@bendyline/gilde 0.2.5 → 0.2.6

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

@@ -11,7 +11,7 @@ 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 page only reads files. Hidden folders, dependency folders, and document
+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

@@ -15,6 +15,59 @@
         "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/pages/gallery.css

@@ -39,20 +39,8 @@ dt { color: var(--muted); font-size: .85rem; } dd { margin: 0; font-size: 1.3rem
 .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; }
-.media-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; width: 100%; height: 100%; text-align: left; background: var(--surface); border-radius: 6px; }
-.thumbnail { display: flex; position: relative; flex-direction: column; align-items: center; justify-content: center; width: 100%; aspect-ratio: 4 / 3; background: var(--soft); color: var(--accent); overflow: hidden; }
-.thumbnail img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--surface); }
 svg { width: 36px; height: 36px; stroke: currentColor; stroke-width: 1.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
-.fallback-label { font-size: .8rem; margin-top: 8px; }
-.card-info { padding: 12px; min-width: 0; }
-.file-name { display: block; font-size: .95rem; font-weight: 600; overflow-wrap: anywhere; }
-.file-folder { display: block; font-size: .8rem; color: var(--muted); overflow-wrap: anywhere; margin-block: 2px 8px; }
-.file-meta { display: block; font-size: .75rem; color: var(--muted); }
 #gallery[data-view="list"] { grid-template-columns: 1fr; gap: 8px; }
-[data-view="list"] .media-card { flex-direction: row; align-items: center; }
-[data-view="list"] .thumbnail { flex: 0 0 100px; width: 100px; }
-[data-view="list"] .fallback-label { display: none; }
-[data-view="list"] .file-folder { margin-bottom: 2px; }
 #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); }
@@ -73,8 +61,6 @@ dialog::backdrop { background: #000b; }
 #position { font-size: .8rem; color: var(--muted); }
 @media (max-width: 480px) {
   #gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
-  .card-info { padding: 8px; }
-  .file-name { font-size: .85rem; }
   .counts { gap: 20px; }
   header { align-items: flex-start; }
   .library-heading { align-items: flex-start; flex-direction: column; gap: 4px; }
@@ -83,3 +69,6 @@ dialog::backdrop { background: #000b; }
   .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

@@ -1,7 +1,5 @@
 (() => {
   'use strict';
-  const api = window.makeDemoGezel({ page: { typeName: 'Media Library' } });
-  const demoMode = api.page.mode === 'demo';
   const model = window.mediaLibraryFiles;
   const $ = (id) => document.getElementById(id);
   const labels = { image: 'Image', video: 'Video', audio: 'Audio' };
@@ -12,9 +10,14 @@
     ['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();
-  const cards = 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');
@@ -29,7 +32,7 @@
     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 ? `assets/${file.asset}` : api.data.url(file.path);
+  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(); }
@@ -37,30 +40,15 @@
   }
   function card(file) {
     const li = document.createElement('li');
-    const button = element('button', undefined, 'media-card'); button.type = 'button';
-    button.dataset.path = file.path; button.setAttribute('aria-label', `Preview ${file.path}`);
-    const thumb = element('span', undefined, 'thumbnail');
-    thumb.append(icon(file.kind), element('span', labels[file.kind], 'fallback-label'));
-    if (file.kind === 'image' && model.browserImages.has(model.extension(file.path))) {
-      const image = document.createElement('img'); image.alt = ''; image.loading = 'lazy'; image.decoding = 'async';
-      image.addEventListener('error', () => { image.remove(); thumb.querySelector('.fallback-label').textContent = 'Preview unavailable'; });
-      try { image.src = mediaUrl(file); thumb.append(image); } catch { /* Keep the usable file card. */ }
-    }
-    const info = element('span', undefined, 'card-info');
-    info.append(element('span', file.path.split('/').pop(), 'file-name'), element('span', model.folderOf(file.path) === '.' ? 'Project folder' : model.folderOf(file.path), 'file-folder'), element('span', `${model.extension(file.path).toUpperCase()} · ${size(file.size)}`, 'file-meta'));
-    button.append(thumb, info); button.addEventListener('click', () => openPreview(file.path)); li.append(button); return 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;
-    const present = new Set(files.map((file) => file.path));
-    for (const path of cards.keys()) if (!present.has(path)) cards.delete(path);
-    $('gallery').replaceChildren(...shown.slice(0, visible).map((file) => {
-      const stamp = `${file.size}:${file.mtime}`;
-      if (cards.get(file.path)?.stamp !== stamp) cards.set(file.path, { stamp, node: card(file) });
-      return cards.get(file.path).node;
-    }));
+    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`;
@@ -68,7 +56,7 @@
     $('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('button')].find((el) => el.dataset.path === previousFocus)?.focus();
+    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;
@@ -115,7 +103,7 @@
     if (busy) { again = true; return; } busy = true; $('refresh').disabled = true;
     $('gallery').setAttribute('aria-busy', 'true'); message('error', '');
     try {
-      const result = demoMode ? { files: samples, folders: ['.', 'Journeys', 'Studio', 'Motion', 'Recordings'] } : await model.scan((path) => api.data.list(path), { cancelled: () => stopped });
+      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;
@@ -142,9 +130,9 @@
   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', () => { $('search').value = ''; $('kind').value = ''; $('folder').value = ''; $('sort').value = 'newest'; visible = 24; view = 'grid'; $('preview').close(); 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('button')].find((el) => el.dataset.path === focusPath)?.focus(); });
+  $('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;
@@ -160,6 +148,6 @@
   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; clearTimeout(debounce); clearInterval(timer); stopPlayback(); stopTheme(); for (const stop of watches.values()) stop(); }, { once: true });
+  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

@@ -6,101 +6,14 @@
   <meta name="gezel-demo" content="standalone" />
   <title>Media Library</title>
   <link rel="stylesheet" href="gallery.css" />
-  <script>
-/* gezel-page-demo-stub v1 */
-/*
- * The canonical demo stub for Gezel type pages. MIT License.
- *
- * Paste this file's bytes verbatim into a <script> block ahead of the
- * page's own code, then call makeDemoGezel({ page, tools, data }) with the
- * page's demo handlers. Served by Gezel, the real window.gezel is already
- * injected and the stub steps aside; opened as a raw file (the live demos
- * on gezelgilde.com), it installs a window.gezel whose tools and data are
- * the page-supplied handler maps — one code path in every mode. `tools`
- * and `data` map a tool name / declared read path to a function; data
- * handlers back read() and list(), and url() returns the handler's value
- * or passes a data: URI through. See docs/page-authoring.md.
- */
-(function () {
-  'use strict';
-  window.makeDemoGezel = function (opts) {
-    if (window.gezel) return window.gezel;
-    var page = (opts && opts.page) || {};
-    var tools = (opts && opts.tools) || {};
-    var data = (opts && opts.data) || {};
-    var themeListeners = [];
-    var media = window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)') : null;
-    var ui = {
-      theme: { mode: media && media.matches ? 'dark' : 'light' },
-      onTheme: function (cb) {
-        themeListeners.push(cb);
-        return function () {
-          var at = themeListeners.indexOf(cb);
-          if (at >= 0) themeListeners.splice(at, 1);
-        };
-      },
-    };
-    if (media && media.addEventListener) {
-      media.addEventListener('change', function (ev) {
-        ui.theme = { mode: ev.matches ? 'dark' : 'light' };
-        themeListeners.slice().forEach(function (cb) { cb(ui.theme); });
-      });
-    }
-    function fail(code, message) {
-      var err = new Error(message);
-      err.code = code;
-      return Promise.reject(err);
-    }
-    function run(map, key, arg) {
-      if (!Object.prototype.hasOwnProperty.call(map, key)) return null;
-      return Promise.resolve().then(function () { return map[key](arg); });
-    }
-    window.gezel = {
-      page: {
-        api: 1,
-        projectId: 'demo',
-        source: 'type',
-        entry: page.entry || 'index.html',
-        typeName: page.typeName || 'demo',
-        params: page.params || {},
-        mode: 'demo',
-      },
-      tools: {
-        list: function () { return Promise.resolve(Object.keys(tools)); },
-        invoke: function (name, input) {
-          var call = run(tools, name, input || {});
-          if (!call) return fail('not-allowed', "The demo does not handle the tool '" + name + "'.");
-          return call.then(function (output) { return { output: output }; });
-        },
-      },
-      data: {
-        read: function (path, o) {
-          return run(data, path, o || {}) || fail('not-allowed', "The demo has no data for '" + path + "'.");
-        },
-        list: function (path, o) {
-          return run(data, path, o || {}) || Promise.resolve([]);
-        },
-        watch: function () { return function () {}; },
-        url: function (path) {
-          if (Object.prototype.hasOwnProperty.call(data, path)) return String(data[path]({}));
-          return typeof path === 'string' && path.indexOf('data:') === 0 ? path : '';
-        },
-      },
-      ui: ui,
-      refresh: function () {},
-    };
-    return window.gezel;
-  };
-})();
-
-  </script>
-  <script src="media-files.js" defer></script>
+    <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>
@@ -117,7 +30,7 @@
       <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. This gallery only reads them. Playback depends on the formats supported by your device.</footer>
+    <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>