add sketch-app-shell demo fixture
Creates TypeScript demo module for sketch-app-shell component with:
- Interactive controls for mode switching (chat, diff, terminal)
- Follows established demo framework conventions
- Added component to demo runner registry
- Enables testing via npm run demo:runner or npx vite
Co-Authored-By: sketch <hello@sketch.dev>
Change-ID: s25f711ddd94f1609k
diff --git a/webui/src/web-components/demo/demo-framework/demo-runner.ts b/webui/src/web-components/demo/demo-framework/demo-runner.ts
index 7dc02d4..396da39 100644
--- a/webui/src/web-components/demo/demo-framework/demo-runner.ts
+++ b/webui/src/web-components/demo/demo-framework/demo-runner.ts
@@ -95,6 +95,7 @@
// This could be improved with build-time generation
const knownComponents = [
"chat-input",
+ "sketch-app-shell",
"sketch-call-status",
"sketch-chat-input",
"sketch-container-status",
diff --git a/webui/src/web-components/demo/demo-runner.html b/webui/src/web-components/demo/demo-runner.html
index 94af314..fe12f18 100644
--- a/webui/src/web-components/demo/demo-runner.html
+++ b/webui/src/web-components/demo/demo-runner.html
@@ -4,7 +4,6 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sketch Web Components Demo Runner</title>
- <link rel="stylesheet" href="demo.css" />
<link rel="stylesheet" href="/dist/tailwind.css" />
<style>
:root {
@@ -15,6 +14,7 @@
}
.demo-runner {
+ width: 100%;
display: flex;
height: 100vh;
font-family:
diff --git a/webui/src/web-components/demo/sketch-app-shell.demo.ts b/webui/src/web-components/demo/sketch-app-shell.demo.ts
new file mode 100644
index 0000000..d0ee53c
--- /dev/null
+++ b/webui/src/web-components/demo/sketch-app-shell.demo.ts
@@ -0,0 +1,51 @@
+/**
+ * Demo module for sketch-app-shell component
+ */
+
+import { DemoModule } from "./demo-framework/types";
+import { demoUtils } from "./demo-fixtures/index";
+
+const demo: DemoModule = {
+ title: "Sketch App Shell Demo",
+ description:
+ "Full sketch application shell with chat, diff, and terminal views",
+ imports: ["../sketch-app-shell"],
+ styles: ["/src/sketch-app-shell.css"],
+
+ setup: async (container: HTMLElement) => {
+ // Mock the service worker for data services
+ const { worker } = await import("./mocks/browser");
+ await worker.start();
+
+ // Create demo sections
+ const mainSection = demoUtils.createDemoSection(
+ "Sketch App Shell",
+ "Interactive sketch application shell with multiple view modes",
+ );
+
+ // Create the app shell
+ const appShell = document.createElement("sketch-app-shell") as any;
+
+ // Set up the shell to be contained within the demo
+ appShell.style.cssText = `
+ border: 1px solid #d1d9e0;
+ overflow: hidden;
+ display: block;
+ `;
+
+ // Assemble the demo
+ mainSection.appendChild(appShell);
+
+ container.appendChild(mainSection);
+
+ // Wait a bit for the component to initialize
+ await demoUtils.delay(100);
+ },
+
+ cleanup: async () => {
+ // Clean up any global state if needed
+ console.log("Cleaning up sketch-app-shell demo");
+ },
+};
+
+export default demo;