webui: clean up component demos
diff --git a/webui/src/web-components/demo/sketch-monaco-view.demo.ts b/webui/src/web-components/demo/sketch-monaco-view.demo.ts
new file mode 100644
index 0000000..b15865a
--- /dev/null
+++ b/webui/src/web-components/demo/sketch-monaco-view.demo.ts
@@ -0,0 +1,171 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { DemoModule } from "./demo-framework/types";
+import { demoUtils } from "./demo-fixtures/index";
+
+const demo: DemoModule = {
+ title: "Sketch Monaco Viewer Demo",
+ description:
+ "Monaco editor with code comparison functionality for different languages",
+ imports: ["../sketch-monaco-view.ts"],
+
+ customStyles: `
+ button {
+ padding: 8px 12px;
+ background-color: #4285f4;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ margin-right: 8px;
+ }
+
+ button:hover {
+ background-color: #3367d6;
+ }
+
+ sketch-monaco-view {
+ margin-top: 20px;
+ height: 500px;
+ }
+ `,
+
+ setup: async (container: HTMLElement) => {
+ const section = demoUtils.createDemoSection(
+ "Monaco Code Viewer",
+ "Demonstrates the Monaco editor component with side-by-side code comparison for different programming languages.",
+ );
+
+ // Create control panel
+ const controlPanel = document.createElement("div");
+ controlPanel.style.marginBottom = "2rem";
+ controlPanel.style.padding = "1rem";
+ controlPanel.style.backgroundColor = "#f0f0f0";
+ controlPanel.style.borderRadius = "4px";
+
+ const buttonsContainer = document.createElement("div");
+ buttonsContainer.style.marginTop = "1rem";
+
+ // Create example buttons
+ const jsButton = demoUtils.createButton("Example 1: JavaScript", () => {
+ diffEditor.setOriginalCode(
+ `function calculateTotal(items) {
+ return items
+ .map(item => item.price * item.quantity)
+ .reduce((a, b) => a + b, 0);
+}`,
+ "original.js",
+ );
+
+ diffEditor.setModifiedCode(
+ `function calculateTotal(items) {
+ // Apply discount if available
+ return items
+ .map(item => {
+ const price = item.discount ?
+ item.price * (1 - item.discount) :
+ item.price;
+ return price * item.quantity;
+ })
+ .reduce((a, b) => a + b, 0);
+}`,
+ "modified.js",
+ );
+ });
+
+ const htmlButton = demoUtils.createButton("Example 2: HTML", () => {
+ diffEditor.setOriginalCode(
+ `<!DOCTYPE html>
+<html>
+<head>
+ <title>Demo Page</title>
+</head>
+<body>
+ <h1>Hello World</h1>
+ <p>This is a paragraph.</p>
+</body>
+</html>`,
+ "original.html",
+ );
+
+ diffEditor.setModifiedCode(
+ `<!DOCTYPE html>
+<html>
+<head>
+ <title>Demo Page</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+ <header>
+ <h1>Hello World</h1>
+ </header>
+ <main>
+ <p>This is a paragraph with some <strong>bold</strong> text.</p>
+ </main>
+ <footer>
+ <p>© 2025</p>
+ </footer>
+</body>
+</html>`,
+ "modified.html",
+ );
+ });
+
+ const goButton = demoUtils.createButton("Example 3: Go", () => {
+ diffEditor.setOriginalCode(
+ `package main
+
+import "fmt"
+
+func main() {
+ fmt.Println("Hello, world!")
+}`,
+ "original.go",
+ );
+
+ diffEditor.setModifiedCode(
+ `package main
+
+import (
+ "fmt"
+ "time"
+)
+
+func main() {
+ fmt.Println("Hello, world!")
+ fmt.Printf("The time is %s\n", time.Now().Format(time.RFC3339))
+}`,
+ "modified.go",
+ );
+ });
+
+ buttonsContainer.appendChild(jsButton);
+ buttonsContainer.appendChild(htmlButton);
+ buttonsContainer.appendChild(goButton);
+
+ controlPanel.innerHTML = `<p>Select an example to see code comparison in different languages:</p>`;
+ controlPanel.appendChild(buttonsContainer);
+
+ // Create the Monaco view component
+ const diffEditor = document.createElement("sketch-monaco-view") as any;
+ diffEditor.id = "diffEditor";
+
+ // Set initial example
+ diffEditor.originalCode = `function hello() {
+ console.log("Hello World");
+ return true;
+}`;
+
+ diffEditor.modifiedCode = `function hello() {
+ // Add a comment
+ console.log("Hello Updated World");
+ return true;
+}`;
+
+ section.appendChild(controlPanel);
+ section.appendChild(diffEditor);
+ container.appendChild(section);
+ },
+};
+
+export default demo;