@bendyline/gilde 0.2.4 → 0.2.6

package/data/project-types/jo/job-hunt/art.json

@@ -0,0 +1,17 @@
+{
+  "schemaVersion": 1,
+  "promptVersion": "workshop-mark-cutout-v3",
+  "subject": "a leather briefcase with a small key hanging from its handle",
+  "sourceSummary": "Run your job search like a campaign — a career coach tracks every application through the pipeline, a mock interviewer gets you ready, and a live board keeps the whole slog navigable.",
+  "styleReference": "wikipedia-astronomy",
+  "setReference": "data-dictionary-cutout-v3",
+  "sheet": "s02",
+  "cell": 7,
+  "fill": 0.88,
+  "shadow": {
+    "color": "#1c120a",
+    "opacity": 0.38,
+    "blur": 0.035,
+    "offsetY": 0.025
+  }
+}

package/data/project-types/jo/job-hunt/manifest.json

@@ -19,6 +19,7 @@
   "maintainer": {
     "name": "Gezel"
   },
+  "logo": "logo.webp",
   "license": "MIT",
   "yankedVersions": []
 }

package/data/project-types/ju/just-chat/art.json

@@ -0,0 +1,17 @@
+{
+  "schemaVersion": 1,
+  "promptVersion": "workshop-mark-cutout-v3",
+  "subject": "a steaming cup of tea beside a single rounded speech bubble",
+  "sourceSummary": "A quiet room for talking — no tasks, no workspace, no deliverables.",
+  "styleReference": "wikipedia-astronomy",
+  "setReference": "data-dictionary-cutout-v3",
+  "sheet": "s02",
+  "cell": 4,
+  "fill": 0.88,
+  "shadow": {
+    "color": "#1c120a",
+    "opacity": 0.38,
+    "blur": 0.035,
+    "offsetY": 0.025
+  }
+}

package/data/project-types/ju/just-chat/manifest.json

@@ -15,6 +15,7 @@
   "maintainer": {
     "name": "Gezel"
   },
+  "logo": "logo.webp",
   "license": "MIT",
   "yankedVersions": []
 }

package/data/project-types/la/language-trainer/art.json

@@ -0,0 +1,17 @@
+{
+  "schemaVersion": 1,
+  "promptVersion": "workshop-mark-cutout-v3",
+  "subject": "two overlapping speech bubbles, one filled with a row of three dots",
+  "sourceSummary": "Practice a new language by chatting with a patient tutor who corrects gently and tracks your progress.",
+  "styleReference": "wikipedia-astronomy",
+  "setReference": "data-dictionary-cutout-v3",
+  "sheet": "round3-projects",
+  "cell": 3,
+  "fill": 0.88,
+  "shadow": {
+    "color": "#1c120a",
+    "opacity": 0.38,
+    "blur": 0.035,
+    "offsetY": 0.025
+  }
+}

package/data/project-types/la/language-trainer/manifest.json

@@ -14,6 +14,7 @@
   "maintainer": {
     "name": "Gezel"
   },
+  "logo": "logo.webp",
   "license": "MIT",
   "yankedVersions": []
 }

package/data/project-types/li/life-binder/art.json

@@ -0,0 +1,17 @@
+{
+  "schemaVersion": 1,
+  "promptVersion": "workshop-mark-cutout-v3",
+  "subject": "a sturdy fireproof document box with a carry handle and a padlock",
+  "sourceSummary": "The \"in case of emergency\" file, actually complete.",
+  "styleReference": "wikipedia-astronomy",
+  "setReference": "data-dictionary-cutout-v3",
+  "sheet": "s03",
+  "cell": 2,
+  "fill": 0.88,
+  "shadow": {
+    "color": "#1c120a",
+    "opacity": 0.38,
+    "blur": 0.035,
+    "offsetY": 0.025
+  }
+}

package/data/project-types/li/life-binder/manifest.json

@@ -19,6 +19,7 @@
   "maintainer": {
     "name": "Gezel"
   },
+  "logo": "logo.webp",
   "license": "MIT",
   "yankedVersions": []
 }

package/data/project-types/me/meal-planner/art.json

@@ -0,0 +1,17 @@
+{
+  "schemaVersion": 1,
+  "promptVersion": "workshop-mark-cutout-v3",
+  "subject": "a cooking pot with a sprig of herbs and three wisps of steam",
+  "sourceSummary": "Answer \"what's for dinner?\" once a week.",
+  "styleReference": "wikipedia-astronomy",
+  "setReference": "data-dictionary-cutout-v3",
+  "sheet": "round3-projects",
+  "cell": 2,
+  "fill": 0.88,
+  "shadow": {
+    "color": "#1c120a",
+    "opacity": 0.38,
+    "blur": 0.035,
+    "offsetY": 0.025
+  }
+}

package/data/project-types/me/meal-planner/manifest.json

@@ -15,6 +15,7 @@
   "maintainer": {
     "name": "Gezel"
   },
+  "logo": "logo.webp",
   "license": "MIT",
   "yankedVersions": []
 }

package/data/project-types/me/media-library/art.json

@@ -0,0 +1,17 @@
+{
+  "schemaVersion": 1,
+  "promptVersion": "workshop-mark-cutout-v3",
+  "subject": "a photo, a short film strip and a vinyl record stacked together",
+  "sourceSummary": "Browse a folder of images, videos, and audio in a live gallery.",
+  "styleReference": "wikipedia-astronomy",
+  "setReference": "data-dictionary-cutout-v3",
+  "sheet": "s01",
+  "cell": 5,
+  "fill": 0.88,
+  "shadow": {
+    "color": "#1c120a",
+    "opacity": 0.38,
+    "blur": 0.035,
+    "offsetY": 0.025
+  }
+}

package/data/project-types/me/media-library/manifest.json

@@ -0,0 +1,23 @@
+{
+  "schemaVersion": 1,
+  "kind": "project-type",
+  "id": "media-library",
+  "name": "Media Library",
+  "description": "Browse a folder of images, videos, and audio in a live gallery. Preview and play your media without importing or moving the originals.",
+  "tags": [
+    "photos",
+    "images",
+    "video",
+    "audio",
+    "gallery",
+    "library",
+    "folder"
+  ],
+  "category": "creative",
+  "icon": "camera",
+  "maintainer": {
+    "name": "Gezel"
+  },
+  "logo": "logo.webp",
+  "license": "MIT"
+}

package/data/project-types/me/media-library/versions/1.0.0/about.md

@@ -0,0 +1,17 @@
+# Media Library
+
+This project is a window into a folder of photos, illustrations, videos, and
+recordings. The gallery finds media in the workspace and its subfolders, with
+search, folder and format filters, sorting, and a larger preview. Files stay
+where they are: no import, copy, or reorganization is needed.
+
+Help the person find and understand their collection. Preserve original media
+and folder names. Discuss proposed edits or organization before changing files.
+Do not assume a filename or modification date proves when or where a photo was
+taken. Playback depends on the device's supported formats; unpreviewable files
+remain listed and can be opened through Gezel's existing viewers.
+
+The shared Add files control can copy selected files into this workspace when managed writes are enabled. Existing names are preserved by choosing a new name. Browsing does not change files. Hidden folders, dependency folders, and document
+companion folders are skipped. Scans stop after 100 folders or 10,000 files and
+clearly label a partial library. The bundled samples are only a standalone demo;
+they are never inserted into a real project's folder.

package/data/project-types/me/media-library/versions/1.0.0/manifest.json

@@ -0,0 +1,73 @@
+{
+  "schemaVersion": 1,
+  "version": "1.0.0",
+  "releasedAt": "2026-10-19T00:00:00Z",
+  "extends": "media-production",
+  "nameTemplate": "Media Library",
+  "aboutTemplate": "about.md",
+  "missionTemplate": "mission.md",
+  "pages": {
+    "entry": "index.html",
+    "api": 1,
+    "reads": [
+      {
+        "source": "workspace",
+        "path": ".",
+        "subtree": true
+      }
+    ],
+    "imports": [
+      {
+        "id": "library",
+        "source": "workspace",
+        "path": ".",
+        "accept": [
+          ".jpg",
+          ".jpeg",
+          ".png",
+          ".gif",
+          ".webp",
+          ".avif",
+          ".bmp",
+          ".svg",
+          ".ico",
+          ".heic",
+          ".heif",
+          ".tif",
+          ".tiff",
+          ".dng",
+          ".raw",
+          ".cr2",
+          ".cr3",
+          ".nef",
+          ".arw",
+          ".orf",
+          ".raf",
+          ".mp4",
+          ".webm",
+          ".mov",
+          ".m4v",
+          ".ogv",
+          ".avi",
+          ".mkv",
+          ".mpg",
+          ".mpeg",
+          ".mts",
+          ".m2ts",
+          ".mp3",
+          ".wav",
+          ".ogg",
+          ".oga",
+          ".m4a",
+          ".aac",
+          ".flac",
+          ".opus",
+          ".aif",
+          ".aiff",
+          ".wma"
+        ],
+        "maxFileBytes": 268435456
+      }
+    ]
+  }
+}

package/data/project-types/me/media-library/versions/1.0.0/mission.md

@@ -0,0 +1,6 @@
+# Mission
+
+- Make the media in the selected folder easy to find and browse.
+- Preview images and play supported video and audio in place.
+- Keep original files intact and make unavailable previews clear.
+- Reflect new, renamed, and removed files as the folder changes.

package/data/project-types/me/media-library/versions/1.0.0/pages/assets/alpine.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" viewBox="0 0 800 600"><title>Alpine morning — sample illustration</title><rect width="800" height="600" fill="#d8e5e1"/><circle cx="630" cy="135" r="58" fill="#edca91"/><path d="M0 450L210 120l175 230 120-170 295 290v130H0" fill="#829894"/><path d="M135 238l75-118 84 110-80-29z M460 243l45-63 72 76-73-27z" fill="#f9f4e9"/><path d="M0 460Q230 330 440 475T800 435v165H0" fill="#556f66"/><path d="M0 530Q280 420 500 540T800 500v100H0" fill="#354f48"/></svg>

package/data/project-types/me/media-library/versions/1.0.0/pages/assets/coast.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" viewBox="0 0 800 600"><title>Quiet coast — sample illustration</title><rect width="800" height="600" fill="#e6ded0"/><circle cx="570" cy="150" r="72" fill="#d8aa78"/><path d="M0 290Q180 270 800 305v295H0" fill="#9db9bb"/><path d="M0 400Q180 390 380 450T800 470v130H0" fill="#698e91"/><path d="M0 600V470Q260 400 380 475T800 530v70" fill="#d8c6a9"/><path d="M0 480Q240 414 395 487T800 541" stroke="#f7eee1" stroke-width="8" fill="none"/></svg>

package/data/project-types/me/media-library/versions/1.0.0/pages/assets/evening.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" viewBox="0 0 800 600"><title>Evening light — sample illustration</title><rect width="800" height="600" fill="#ccb7a7"/><circle cx="380" cy="285" r="100" fill="#e5b880"/><path d="M0 400Q240 190 475 400T800 320v280H0" fill="#9a8275"/><path d="M0 460Q250 330 510 450T800 420v180H0" fill="#6c7370"/><path d="M0 535Q210 450 450 550T800 470v130H0" fill="#3e5555"/></svg>

package/data/project-types/me/media-library/versions/1.0.0/pages/assets/forest.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" viewBox="0 0 800 600"><title>Forest path — sample illustration</title><rect width="800" height="600" fill="#becab3"/><path d="M0 600V290Q300 250 800 320v280" fill="#738971"/><path d="M285 600Q440 420 410 300Q485 430 535 600" fill="#c6b68e"/><g fill="#425e4a"><path d="M40 0h50v600H40z M180 0h38v600h-38z M570 0h60v600h-60z M730 0h50v600h-50z"/><circle cx="100" cy="75" r="140"/><circle cx="650" cy="35" r="180"/></g><g fill="#263f33"><path d="M10 0h30v600H10z M665 0h25v600h-25z"/></g></svg>

package/data/project-types/me/media-library/versions/1.0.0/pages/assets/study.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" viewBox="0 0 800 600"><title>Color study — sample illustration</title><rect width="800" height="600" fill="#e9decc"/><rect x="130" y="100" width="270" height="340" rx="8" fill="#ad6b4b"/><circle cx="450" cy="300" r="170" fill="#63765c"/><rect x="355" y="350" width="280" height="150" rx="6" fill="#d4b16c"/><path d="M170 490L270 300l90 190z" fill="#3f555b"/></svg>

package/data/project-types/me/media-library/versions/1.0.0/pages/gallery.css

@@ -0,0 +1,74 @@
+:root {
+  color-scheme: light dark;
+  --bg: #faf7f2; --surface: #fffdf9; --text: #2b2620; --muted: #71675c;
+  --border: #dcd4c8; --accent: #835333; --soft: #eee5da; --danger: #a42b2b;
+  font-family: var(--font-body, system-ui, sans-serif); font-size: 16px;
+}
+@media (prefers-color-scheme: dark) { :root { --bg: #1c1a17; --surface: #262320; --text: #efe9e0; --muted: #b9aea0; --border: #464039; --accent: #e2b38c; --soft: #332b24; --danger: #ffaaaa; } }
+:root[data-theme="light"] { color-scheme: light; --bg: #faf7f2; --surface: #fffdf9; --text: #2b2620; --muted: #71675c; --border: #dcd4c8; --accent: #835333; --soft: #eee5da; --danger: #a42b2b; }
+:root[data-theme="dark"] { color-scheme: dark; --bg: #1c1a17; --surface: #262320; --text: #efe9e0; --muted: #b9aea0; --border: #464039; --accent: #e2b38c; --soft: #332b24; --danger: #ffaaaa; }
+* { box-sizing: border-box; }
+[hidden] { display: none !important; }
+body { margin: 0; background: var(--bg); color: var(--text); line-height: 1.5; }
+main { max-width: 1220px; margin: auto; padding: clamp(16px, 4vw, 44px); }
+h1,h2 { font-family: var(--font-heading, Georgia, serif); font-weight: 400; line-height: 1.25; }
+h1 { font-size: clamp(1.8rem, 5vw, 2.5rem); margin: 0; }
+h2 { margin: 0; font-size: 1.3rem; overflow-wrap: anywhere; }
+p { margin: 0 0 12px; }
+header, .toolbar, .library-heading, .preview-heading, .preview-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
+header { margin: 26px 0 22px; }
+.eyebrow { color: var(--accent); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; }
+.intro { margin: 8px 0 0; color: var(--muted); }
+button,input,select { font: inherit; font-family: var(--font-ui, system-ui, sans-serif); border: 1px solid var(--border); border-radius: 6px; color: var(--text); background: var(--surface); min-height: 44px; padding: 9px 12px; }
+button { cursor: pointer; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 5%, transparent), 0 1px 2px #0000000d; }
+button:hover { border-color: var(--accent); background: var(--soft); }
+button:disabled { opacity: .5; cursor: default; }
+:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
+input,select { display: block; width: 100%; margin-top: 5px; font-size: .9rem; }
+.counts { display: flex; flex-wrap: wrap; gap: 28px; border-block: 1px solid var(--border); padding: 16px 0; margin: 24px 0; }
+.counts div { display: flex; align-items: baseline; gap: 10px; }
+dt { color: var(--muted); font-size: .85rem; } dd { margin: 0; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
+.filters { display: flex; gap: 12px; flex-wrap: wrap; margin: 20px 0; }
+.filters label { flex: 1 1 120px; min-width: 0; color: var(--muted); font-size: .8rem; }
+.filters label:first-child { flex: 2 1 210px; }
+.muted, #status, footer, #updated { color: var(--muted); font-size: .85rem; }
+.toolbar { margin-bottom: 16px; flex-wrap: wrap; }
+.toolbar p { margin: 0; }
+.view-choices { display: inline-flex; gap: 4px; padding: 4px; background: var(--soft); border: 1px solid var(--border); border-radius: 6px; }
+.view-choices button { font-size: .85rem; }
+.view-choices [aria-pressed="true"] { border-color: var(--accent); background: var(--soft); color: var(--accent); box-shadow: inset 0 1px 3px #0002; }
+#gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); list-style: none; gap: 20px; margin: 0; padding: 0; }
+#gallery li { min-width: 0; }
+svg { width: 36px; height: 36px; stroke: currentColor; stroke-width: 1.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
+#gallery[data-view="list"] { grid-template-columns: 1fr; gap: 8px; }
+#show-more { display: block; margin: 24px auto; }
+.empty { padding: 40px 20px; text-align: center; border: 1px dashed var(--border); border-radius: 10px; background: var(--surface); }
+.empty p { margin: 12px 0 0; color: var(--muted); }
+#error,#preview-error { color: var(--danger); overflow-wrap: anywhere; }
+.notice,[data-gezel-demo-banner] { padding: 12px 16px; background: var(--soft); border-radius: 6px; font-size: .85rem; }
+[data-gezel-demo-banner] { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+footer { margin-top: 32px; }
+dialog { width: min(1040px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 20px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 10px; }
+dialog::backdrop { background: #000b; }
+.preview-heading { align-items: flex-start; }
+.preview-heading > div { min-width: 0; }
+#preview-path { overflow-wrap: anywhere; margin: 6px 0 0; }
+#preview-media { min-height: 160px; max-height: 62dvh; display: flex; align-items: center; justify-content: center; margin: 20px 0 12px; background: var(--soft); border-radius: 6px; overflow: hidden; }
+#preview-media img,#preview-media video { display: block; max-width: 100%; max-height: 62dvh; object-fit: contain; }
+#preview-media audio { width: min(600px, 100%); }
+.preview-actions { flex-wrap: wrap; }
+.navigation { display: flex; align-items: center; gap: 12px; }
+#position { font-size: .8rem; color: var(--muted); }
+@media (max-width: 480px) {
+  #gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
+  .counts { gap: 20px; }
+  header { align-items: flex-start; }
+  .library-heading { align-items: flex-start; flex-direction: column; gap: 4px; }
+  dialog { padding: 14px; }
+  .preview-heading { flex-wrap: wrap; }
+  .navigation { flex-wrap: wrap; gap: 8px; }
+  [data-gezel-demo-banner] { align-items: flex-start; flex-direction: column; }
+}
+
+/* Shared components own file presentation; the page owns its layout. */
+#add-files { margin: 20px 0; }

package/data/project-types/me/media-library/versions/1.0.0/pages/gallery.js

@@ -0,0 +1,153 @@
+(() => {
+  'use strict';
+  const model = window.mediaLibraryFiles;
+  const $ = (id) => document.getElementById(id);
+  const labels = { image: 'Image', video: 'Video', audio: 'Audio' };
+  const icons = { image: 'M3 3h18v18H3z M3 16l5-5 5 5 4-4 4 4 M15 7h.01', video: 'M4 3h16v18H4z M4 7h16 M4 17h16 M10 10l5 2-5 2z', audio: 'M9 18V5l11-2v12 M9 8l11-2 M9 18c0 3-6 3-6 0s6-3 6 0 M20 15c0 3-6 3-6 0s6-3 6 0' };
+  const samples = [
+    ['Journeys/Alpine morning.svg', 'alpine.svg', 2210], ['Journeys/Quiet coast.svg', 'coast.svg', 1840],
+    ['Journeys/Forest path.svg', 'forest.svg', 2670], ['Studio/Color study.svg', 'study.svg', 1420],
+    ['Studio/Evening light.svg', 'evening.svg', 1980], ['Motion/Light study.webm', 'light.webm', 24000],
+    ['Recordings/Three notes.wav', 'notes.wav', 96044],
+  ].map(([path, asset, size], i) => ({ path, asset, kind: model.kind(path), size, mtime: 1792368000000 - i * 86400000 }));
+  const api = window.gezel || window.makeDemoGezel({ page: { typeName: 'Media Library' }, existingPaths: samples.map(file => file.path) });
+  const demoMode = api.page.mode === 'demo';
+  const components = api.ui.components;
+  const componentCards = [];
+  const mountAdder = () => components.fileAdder('#add-files', { target: 'library', onAdded: () => refresh() });
+  let adder = mountAdder();
+  let files = [], shown = [], visible = 24, view = 'grid', busy = false, again = false, stopped = false, debounce, currentPath = null, previewRevision = 0, focusPath = null;
+  const watches = new Map();
+  function element(tag, text, className) { const el = document.createElement(tag); if (text !== undefined) el.textContent = text; if (className) el.className = className; return el; }
+  function icon(type) {
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.setAttribute('viewBox', '0 0 24 24'); svg.setAttribute('aria-hidden', 'true');
+    const path = document.createElementNS(svg.namespaceURI, 'path'); path.setAttribute('d', icons[type]); svg.append(path); return svg;
+  }
+  function message(id, text) { $(id).textContent = text; $(id).hidden = !text; }
+  function size(value) {
+    if (value < 1024) return `${value} B`;
+    const units = ['KB', 'MB', 'GB', 'TB']; let n = value / 1024, i = 0;
+    while (n >= 1024 && i < units.length - 1) { n /= 1024; i++; }
+    return `${new Intl.NumberFormat(undefined, { maximumFractionDigits: 1 }).format(n)} ${units[i]}`;
+  }
+  const stamp = (value) => value ? new Date(value).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' }) : 'Date unavailable';
+  const mediaUrl = (file) => demoMode && file.asset ? `assets/${file.asset}` : api.data.url(file.path);
+  function stopPlayback() {
+    previewRevision++;
+    for (const media of $('preview-media').querySelectorAll('video,audio')) { media.pause(); media.removeAttribute('src'); media.load(); }
+    $('preview-media').replaceChildren();
+  }
+  function card(file) {
+    const li = document.createElement('li');
+    const card = components.fileCard(li, { file: { ...file, source: 'workspace' }, variant: view === 'list' ? 'row' : 'tile', thumbnail: file.kind === 'image' && model.browserImages.has(model.extension(file.path)) ? mediaUrl(file) : false, onActivate: () => openPreview(file.path) });
+    card.element.dataset.path = file.path; componentCards.push(card); return li;
+  }
+  function render() {
+    const previousFocus = document.activeElement?.dataset.path;
+    shown = model.select(files, { query: $('search').value, kind: $('kind').value, folder: $('folder').value, sort: $('sort').value });
+    $('gallery').dataset.view = view;
+    componentCards.splice(0).forEach(card => card.destroy());
+    $('gallery').replaceChildren(...shown.slice(0, visible).map(card));
+    for (const type of ['image', 'video', 'audio']) $(`${type}-count`).textContent = files.filter((f) => f.kind === type).length.toLocaleString();
+    $('file-count').textContent = `${files.length.toLocaleString()} media file${files.length === 1 ? '' : 's'}`;
+    $('status').textContent = shown.length > visible ? `Showing ${visible} of ${shown.length.toLocaleString()} matches` : `${shown.length.toLocaleString()} of ${files.length.toLocaleString()} media files`;
+    $('empty').hidden = files.length > 0;
+    $('no-matches').hidden = files.length === 0 || shown.length > 0;
+    $('show-more').hidden = shown.length <= visible;
+    $('view-grid').setAttribute('aria-pressed', String(view === 'grid')); $('view-list').setAttribute('aria-pressed', String(view === 'list'));
+    if (previousFocus) [...$('gallery').querySelectorAll('gezel-file-card')].find((el) => el.dataset.path === previousFocus)?.shadowRoot.querySelector('button').focus();
+  }
+  function openPreview(path) {
+    const file = files.find((f) => f.path === path); if (!file) return;
+    const wasOpen = $('preview').open;
+    if (!wasOpen) focusPath = path;
+    stopPlayback(); currentPath = path;
+    const rev = previewRevision;
+    $('preview-title').textContent = path.split('/').pop();
+    $('preview-path').textContent = path;
+    $('preview-detail').textContent = `${labels[file.kind]} · ${model.extension(path).toUpperCase()} · ${size(file.size)} · Modified ${stamp(file.mtime)}`;
+    message('preview-error', '');
+    $('open-file').hidden = !demoMode && (api.page.mode !== 'embedded' || !api.data.open);
+    const index = shown.findIndex((f) => f.path === path);
+    $('previous').disabled = index <= 0; $('next').disabled = index < 0 || index >= shown.length - 1;
+    $('position').textContent = index < 0 ? '' : `${index + 1} of ${shown.length}`;
+    if (file.kind === 'image' && !model.browserImages.has(model.extension(path))) {
+      $('preview-media').append(icon(file.kind));
+      message('preview-error', 'This image format cannot be previewed here. Open the file in Gezel to explore available viewers.');
+    } else {
+      const media = document.createElement(file.kind === 'image' ? 'img' : file.kind);
+      if (file.kind === 'image') media.alt = file.path.split('/').pop();
+      else { media.controls = true; media.preload = 'metadata'; if (file.kind === 'video') media.playsInline = true; }
+      media.addEventListener('error', () => {
+        if (rev !== previewRevision) return;
+        message('preview-error', 'This file could not be previewed. Its format may be unsupported, or the file may have moved. Try Refresh or open it in Gezel.');
+      });
+      media.addEventListener(file.kind === 'image' ? 'load' : 'loadedmetadata', () => {
+        if (rev !== previewRevision) return;
+        const dimensions = file.kind === 'image' ? `${media.naturalWidth} × ${media.naturalHeight}` : file.kind === 'video' ? `${media.videoWidth} × ${media.videoHeight}` : '';
+        const seconds = Number.isFinite(media.duration) ? `${Math.floor(media.duration / 60)}:${String(Math.floor(media.duration % 60)).padStart(2, '0')}` : '';
+        $('preview-detail').textContent = [labels[file.kind], dimensions, seconds, size(file.size), `Modified ${stamp(file.mtime)}`].filter(Boolean).join(' · ');
+      });
+      try { media.src = mediaUrl(file); $('preview-media').append(media); }
+      catch (error) { message('preview-error', error.message || 'Media preview is unavailable on this device.'); }
+    }
+    if (!wasOpen) $('preview').showModal();
+  }
+  function move(delta) {
+    const at = shown.findIndex((f) => f.path === currentPath); const next = shown[at + delta];
+    if (at >= 0 && next) openPreview(next.path);
+  }
+  function schedule() { clearTimeout(debounce); debounce = setTimeout(() => { if (!stopped) void refresh(); }, 250); }
+  async function refresh() {
+    if (busy) { again = true; return; } busy = true; $('refresh').disabled = true;
+    $('gallery').setAttribute('aria-busy', 'true'); message('error', '');
+    try {
+      const result = demoMode ? { files: samples.concat(components.demo.files().map(file => ({ ...file, kind: model.kind(file.path) }))), folders: ['.', 'Journeys', 'Studio', 'Motion', 'Recordings'] } : await model.scan((path) => api.data.list(path), { cancelled: () => stopped });
+      if (stopped) return;
+      files = result.files;
+      const chosen = $('folder').value;
+      const option = (value, text) => { const el = element('option', text); el.value = value; return el; };
+      $('folder').replaceChildren(option('', 'All folders'), ...result.folders.map((path) => option(path, path === '.' ? 'Project folder only' : path)));
+      $('folder').value = result.folders.includes(chosen) ? chosen : '';
+      const notes = [];
+      if (result.limited) notes.push(`Partial library: scanned up to ${result.maxFolders} folders and ${result.maxFiles.toLocaleString()} files.`);
+      if (result.skipped) notes.push(`${result.skipped} subfolder${result.skipped === 1 ? '' : 's'} could not be read.`);
+      message('notice', notes.join(' '));
+      if (!demoMode) {
+        const visited = new Set(result.folders);
+        for (const [path, stop] of watches) if (!visited.has(path)) { stop(); watches.delete(path); }
+        for (const path of visited) if (!watches.has(path)) watches.set(path, api.data.watch(path, schedule, { intervalMs: 15000 }));
+      }
+      render();
+      $('updated').textContent = demoMode ? 'Sample library' : `Updated ${new Date().toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' })}`;
+      if (currentPath && !files.some((f) => f.path === currentPath)) { stopPlayback(); message('preview-error', 'This file is no longer in the library. Close this preview to browse the updated folder.'); $('open-file').hidden = true; $('previous').disabled = true; $('next').disabled = true; }
+    } catch (error) { message('error', `Could not read the folder: ${error.message || 'Try Refresh.'}`); $('status').textContent = files.length ? 'Showing the previous listing.' : 'Folder unavailable.'; }
+    finally { busy = false; $('refresh').disabled = false; $('gallery').removeAttribute('aria-busy'); if (again && !stopped) { again = false; schedule(); } }
+  }
+  $('search').addEventListener('input', () => { visible = 24; render(); });
+  for (const id of ['kind', 'folder', 'sort']) $(id).addEventListener('change', () => { visible = 24; render(); });
+  for (const style of ['grid', 'list']) $(`view-${style}`).addEventListener('click', () => { view = style; render(); });
+  $('show-more').addEventListener('click', () => { visible += 24; render(); });
+  $('refresh').addEventListener('click', () => { void refresh(); });
+  $('reset-demo').addEventListener('click', () => { components.demo.reset(); adder.destroy(); adder = mountAdder(); $('search').value = ''; $('kind').value = ''; $('folder').value = ''; $('sort').value = 'newest'; visible = 24; view = 'grid'; $('preview').close(); void refresh(); });
+  $('close-preview').addEventListener('click', () => $('preview').close());
+  $('preview').addEventListener('close', () => { stopPlayback(); currentPath = null; [...$('gallery').querySelectorAll('gezel-file-card')].find((el) => el.dataset.path === focusPath)?.shadowRoot.querySelector('button').focus(); });
+  $('previous').addEventListener('click', () => move(-1)); $('next').addEventListener('click', () => move(1));
+  $('preview').addEventListener('keydown', (e) => {
+    if (['VIDEO', 'AUDIO', 'INPUT', 'SELECT'].includes(e.target.tagName)) return;
+    if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') { e.preventDefault(); move(e.key === 'ArrowLeft' ? -1 : 1); }
+  });
+  $('open-file').addEventListener('click', async () => {
+    if (demoMode) { message('preview-error', 'In Gezel, this button opens the original file in its project viewer.'); return; }
+    try { await api.data.open(currentPath); $('preview').close(); }
+    catch (error) { message('preview-error', error.message || 'Could not open the file.'); }
+  });
+  document.querySelector('[data-gezel-demo-banner]').hidden = !demoMode;
+  const theme = ({ mode }) => { document.documentElement.dataset.theme = mode; };
+  theme(api.ui.theme); const stopTheme = api.ui.onTheme(theme);
+  const timer = demoMode ? null : setInterval(() => { if (document.visibilityState !== 'hidden') void refresh(); }, 30000);
+  document.addEventListener('visibilitychange', () => { if (!demoMode && document.visibilityState !== 'hidden') schedule(); });
+  window.addEventListener('pagehide', () => { stopped = true; adder.destroy(); componentCards.forEach(card => card.destroy()); clearTimeout(debounce); clearInterval(timer); stopPlayback(); stopTheme(); for (const stop of watches.values()) stop(); }, { once: true });
+  void refresh();
+})();

package/data/project-types/me/media-library/versions/1.0.0/pages/index.html

@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="gezel-demo" content="standalone" />
+  <title>Media Library</title>
+  <link rel="stylesheet" href="gallery.css" />
+    <script src="media-files.js" defer></script>
+  <script src="gallery.js" defer></script>
+</head>
+<body>
+  <main>
+    <aside data-gezel-demo-banner hidden><span>Sample library. Illustrations, a short clip, and three notes — all local to this page.</span><button id="reset-demo" type="button">Reset demo</button></aside>
+    <header><div><p class="eyebrow">Your collection, in place</p><h1>Media Library</h1><p class="intro">A window into your photos, films, and recordings.</p></div><button id="refresh" type="button">Refresh</button></header>
+    <div id="add-files"></div>
+    <dl class="counts" aria-label="Library summary"><div><dt>Images</dt><dd id="image-count">—</dd></div><div><dt>Videos</dt><dd id="video-count">—</dd></div><div><dt>Audio</dt><dd id="audio-count">—</dd></div></dl>
+    <section aria-labelledby="library-heading">
+      <div class="library-heading"><h2 id="library-heading">Browse your library</h2><span id="updated"></span></div>
+      <div class="filters">
+        <label>Find media<input id="search" type="search" placeholder="Search names and folders…" /></label>
+        <label>Media type<select id="kind"><option value="">All media</option><option value="image">Images</option><option value="video">Videos</option><option value="audio">Audio</option></select></label>
+        <label>Folder<select id="folder"><option value="">All folders</option></select></label>
+        <label>Sort by<select id="sort"><option value="newest">Recently modified</option><option value="oldest">Oldest modified</option><option value="name">Name</option><option value="size">Largest first</option></select></label>
+      </div>
+      <div class="toolbar"><p id="status" role="status" aria-live="polite">Looking for media…</p><div class="view-choices" role="group" aria-label="Gallery layout"><button id="view-grid" type="button" aria-pressed="true">Grid</button><button id="view-list" type="button" aria-pressed="false">List</button></div></div>
+      <p id="error" role="alert" hidden></p><p id="notice" class="notice" hidden></p>
+      <ul id="gallery" data-view="grid" aria-label="Media files"></ul>
+      <button id="show-more" type="button" hidden>Show more</button>
+      <div id="empty" class="empty" hidden><h2>Your library starts here</h2><p>Choose a media folder when creating this project, or set its folder in project settings. Images, videos, and audio in that folder and its subfolders appear automatically.</p></div>
+      <p id="no-matches" class="empty" hidden>No media matches these filters. Try another name, folder, or media type.</p>
+    </section>
+    <footer><span id="file-count"></span> · Originals stay in your folder. Add files copies selected files into this folder. Playback depends on the formats supported by your device.</footer>
+  </main>
+  <dialog id="preview" aria-labelledby="preview-title">
+    <div class="preview-heading"><div><h2 id="preview-title"></h2><p id="preview-path" class="muted"></p></div><button id="close-preview" type="button" autofocus>Close</button></div>
+    <div id="preview-media"></div><p id="preview-detail" class="muted"></p><p id="preview-error" role="status" hidden></p>
+    <div class="preview-actions"><div class="navigation"><button id="previous" type="button">Previous</button><span id="position"></span><button id="next" type="button">Next</button></div><button id="open-file" type="button">Open in Gezel</button></div>
+  </dialog>
+</body>
+</html>