| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <title>Sketch Web Components - Demo Index</title> |
| <link rel="stylesheet" href="demo.css" /> |
| <style> |
| body { |
| font-family: |
| -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; |
| max-width: 800px; |
| margin: 40px auto; |
| padding: 20px; |
| line-height: 1.6; |
| } |
| |
| h1 { |
| color: #24292f; |
| border-bottom: 1px solid #d1d9e0; |
| padding-bottom: 10px; |
| } |
| |
| .demo-list { |
| list-style: none; |
| padding: 0; |
| } |
| |
| .demo-list li { |
| margin: 15px 0; |
| padding: 15px; |
| border: 1px solid #d1d9e0; |
| border-radius: 6px; |
| background: #f6f8fa; |
| transition: background-color 0.2s; |
| } |
| |
| .demo-list li:hover { |
| background: #ffffff; |
| } |
| |
| .demo-list a { |
| text-decoration: none; |
| color: #0969da; |
| display: block; |
| } |
| |
| .demo-list a:hover { |
| text-decoration: underline; |
| } |
| |
| .demo-list strong { |
| font-size: 16px; |
| display: block; |
| margin-bottom: 5px; |
| } |
| |
| .stats { |
| background: #fff8dc; |
| padding: 15px; |
| border-radius: 6px; |
| margin: 20px 0; |
| border-left: 4px solid #f9c23c; |
| } |
| |
| .runner-link { |
| display: inline-block; |
| padding: 10px 20px; |
| background: #0969da; |
| color: white; |
| text-decoration: none; |
| border-radius: 6px; |
| margin-top: 20px; |
| } |
| |
| .runner-link:hover { |
| background: #0860ca; |
| } |
| </style> |
| </head> |
| <body> |
| <h1>Sketch Web Components Demo Index</h1> |
| |
| <div class="stats"> |
| <strong>Auto-generated index</strong><br /> |
| Found 3 demo components • Last updated: 6/25/2025, 8:50:21 PM |
| </div> |
| |
| <p> |
| This page provides an overview of all available component demos. Click on |
| any component below to view its interactive demo. |
| </p> |
| |
| <a href="demo-runner.html" class="runner-link">🚀 Launch Demo Runner</a> |
| |
| <h2>Available Component Demos</h2> |
| |
| <ul class="demo-list"> |
| <li> |
| <a href="demo-runner.html#sketch-chat-input"> |
| <strong>Chat Input Demo</strong> - Interactive chat input component |
| with send functionality |
| </a> |
| </li> |
| <li> |
| <a href="demo-runner.html#sketch-container-status"> |
| <strong>Container Status Demo</strong> - Display container status |
| information with usage statistics |
| </a> |
| </li> |
| <li> |
| <a href="demo-runner.html#sketch-tool-calls"> |
| <strong>Tool Calls Demo</strong> - Interactive tool call display with |
| various tool types |
| </a> |
| </li> |
| </ul> |
| |
| <hr style="margin: 40px 0; border: none; border-top: 1px solid #d1d9e0" /> |
| |
| <p> |
| <em |
| >This index is automatically generated from available |
| <code>*.demo.ts</code> files.</em |
| ><br /> |
| To add a new demo, create a <code>component-name.demo.ts</code> file in |
| this directory. |
| </p> |
| </body> |
| </html> |