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-folder/demo.ts

@@ -0,0 +1,122 @@
+import { html } from '@design.estate/dees-element';
+import type { ITileFolderItem } from './component.js';
+
+export const demo = () => {
+  const photosFolder: ITileFolderItem[] = [
+    { type: 'image', name: 'sunset.jpg', thumbnailSrc: 'https://picsum.photos/200/200?random=1' },
+    { type: 'image', name: 'mountain.jpg', thumbnailSrc: 'https://picsum.photos/200/200?random=2' },
+    { type: 'image', name: 'ocean.jpg', thumbnailSrc: 'https://picsum.photos/200/200?random=3' },
+    { type: 'image', name: 'forest.jpg', thumbnailSrc: 'https://picsum.photos/200/200?random=4' },
+    { type: 'image', name: 'city.jpg', thumbnailSrc: 'https://picsum.photos/200/200?random=5' },
+    { type: 'image', name: 'desert.jpg', thumbnailSrc: 'https://picsum.photos/200/200?random=6' },
+  ];
+
+  const projectFolder: ITileFolderItem[] = [
+    { type: 'note', name: 'README.md' },
+    { type: 'note', name: 'package.json' },
+    { type: 'folder', name: 'src' },
+    { type: 'folder', name: 'test' },
+    { type: 'note', name: 'tsconfig.json' },
+    { type: 'pdf', name: 'docs.pdf' },
+    { type: 'image', name: 'logo.png', thumbnailSrc: 'https://picsum.photos/100/100?random=10' },
+  ];
+
+  const mediaFolder: ITileFolderItem[] = [
+    { type: 'video', name: 'intro.mp4' },
+    { type: 'audio', name: 'background.mp3' },
+    { type: 'image', name: 'thumbnail.jpg', thumbnailSrc: 'https://picsum.photos/200/200?random=20' },
+    { type: 'pdf', name: 'storyboard.pdf' },
+  ];
+
+  const emptyFolder: ITileFolderItem[] = [];
+
+  const singleItemFolder: ITileFolderItem[] = [
+    { type: 'pdf', name: 'report.pdf' },
+  ];
+
+  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>Folder Tiles</h3>
+        <div class="tile-row">
+          <dees-tile-folder
+            name="Photos"
+            .items=${photosFolder}
+            label="6 photos"
+            @tile-click=${(e: CustomEvent) => console.log('Folder clicked:', e.detail)}
+          ></dees-tile-folder>
+
+          <dees-tile-folder
+            name="my-project"
+            .items=${projectFolder}
+            label="Project files"
+          ></dees-tile-folder>
+
+          <dees-tile-folder
+            name="Media Assets"
+            .items=${mediaFolder}
+            label="Mixed media"
+          ></dees-tile-folder>
+        </div>
+      </div>
+
+      <div class="demo-section">
+        <h3>Edge Cases</h3>
+        <div class="tile-row">
+          <dees-tile-folder
+            name="Empty Folder"
+            .items=${emptyFolder}
+          ></dees-tile-folder>
+
+          <dees-tile-folder
+            name="Single Item"
+            .items=${singleItemFolder}
+          ></dees-tile-folder>
+        </div>
+      </div>
+
+      <div class="demo-section">
+        <h3>Size Variants</h3>
+        <div class="tile-row">
+          <dees-tile-folder
+            size="small"
+            name="Small"
+            .items=${photosFolder}
+          ></dees-tile-folder>
+
+          <dees-tile-folder
+            name="Default"
+            .items=${photosFolder}
+          ></dees-tile-folder>
+
+          <dees-tile-folder
+            size="large"
+            name="Large"
+            .items=${photosFolder}
+          ></dees-tile-folder>
+        </div>
+      </div>
+    </div>
+  `;
+};