feat(components): add large set of new UI components and demos, reorganize groups, and bump a few dependencies

ts_web/elements/00group-media/dees-tile-note/demo.ts

@@ -0,0 +1,135 @@
+import { html } from '@design.estate/dees-element';
+
+export const demo = () => {
+  const sampleCode = `import { html } from 'lit';
+
+export class MyComponent {
+  private items: string[] = [];
+
+  render() {
+    return html\`
+      <div class="container">
+        \${this.items.map(item => html\`
+          <span>\${item}</span>
+        \`)}
+      </div>
+    \`;
+  }
+}`;
+
+  const sampleText = `Meeting Notes - Q4 Planning
+Date: January 15, 2026
+Attendees: Alice, Bob, Charlie
+
+Key Decisions:
+1. Launch new feature by March
+2. Hire 2 more engineers
+3. Migrate to new CI/CD pipeline
+4. Update design system to v3
+
+Action Items:
+- Alice: Draft PRD by next week
+- Bob: Set up interview pipeline
+- Charlie: Evaluate Jenkins vs GitHub Actions`;
+
+  const sampleJson = `{
+  "name": "@design.estate/dees-catalog",
+  "version": "3.38.0",
+  "description": "Design component catalog",
+  "dependencies": {
+    "@design.estate/dees-element": "^2.0.0",
+    "lit": "^3.1.0"
+  },
+  "scripts": {
+    "build": "tsbuild",
+    "test": "tstest"
+  }
+}`;
+
+  return html`
+    <style>
+      .demo-container {
+        padding: 40px;
+        background: #f5f5f5;
+      }
+      .demo-section {
+        margin-bottom: 60px;
+      }
+      h3 {
+        margin-bottom: 20px;
+        font-size: 18px;
+        font-weight: 600;
+      }
+      .tile-row {
+        display: flex;
+        gap: 24px;
+        flex-wrap: wrap;
+        align-items: flex-start;
+      }
+    </style>
+
+    <div class="demo-container">
+      <div class="demo-section">
+        <h3>Note Tiles</h3>
+        <div class="tile-row">
+          <dees-tile-note
+            title="component.ts"
+            .content=${sampleCode}
+            language="typescript"
+            label="component.ts"
+            @tile-click=${(e: CustomEvent) => console.log('Note clicked:', e.detail)}
+          ></dees-tile-note>
+
+          <dees-tile-note
+            title="Meeting Notes"
+            .content=${sampleText}
+            label="meeting-notes.txt"
+          ></dees-tile-note>
+
+          <dees-tile-note
+            title="package.json"
+            .content=${sampleJson}
+            language="json"
+            label="package.json"
+          ></dees-tile-note>
+        </div>
+      </div>
+
+      <div class="demo-section">
+        <h3>Size Variants</h3>
+        <div class="tile-row">
+          <dees-tile-note
+            size="small"
+            title="small.ts"
+            .content=${sampleCode}
+            language="ts"
+            label="small.ts"
+          ></dees-tile-note>
+
+          <dees-tile-note
+            title="default.ts"
+            .content=${sampleCode}
+            language="ts"
+            label="default.ts"
+          ></dees-tile-note>
+
+          <dees-tile-note
+            size="large"
+            title="large.ts"
+            .content=${sampleCode}
+            language="ts"
+            label="large.ts"
+          ></dees-tile-note>
+        </div>
+      </div>
+
+      <div class="demo-section">
+        <h3>Without Title</h3>
+        <dees-tile-note
+          .content=${sampleText}
+          label="untitled.txt"
+        ></dees-tile-note>
+      </div>
+    </div>
+  `;
+};