@3sln/trove 0.0.2

package/packages/web/src/ui/components/views/index.js

@@ -0,0 +1,155 @@
+// How a list of items is DRAWN.
+//
+// An opener renders one file; a view renders the results. They register through the
+// same contribution system, so "a gallery for a collection full of photographs" is a
+// contribution rather than an edit to the launcher — which is the whole point: the
+// launcher should not have to know how many ways there are to look at a drive.
+//
+// A view is the workbench's own: the built-ins, plus whatever a build passes to
+// `createWorkbench({ views })`. It runs in the host, so the contract is a dodo vnode.
+//
+// The contract is one function:
+//
+//   render({ groups, index, handlers, state, ui }) -> vnode
+//
+// `groups` is what the launcher assembled — `[{ title, verbatim?, action?, items,
+// empty? }]`, each item `{ icon, title, detail, badge, node?, run() }`. `index` is the
+// flat position of the highlighted item across every group, because keyboard
+// navigation is the launcher's job and not the view's: up and down must mean the same
+// thing whichever way the results happen to be drawn.
+
+import { dd } from '../../../runtime.js';
+import { icon } from '../../icon.js';
+import { listView } from './list.js';
+import { gridView, gridMove } from './grid.js';
+
+const { div, button, span } = dd;
+
+const BUILT_IN = {
+  'core.view.list': {
+    title: 'List', icon: 'list', priority: 50,
+    render: listView,
+  },
+  'core.view.grid': {
+    // Offered first where the results are pictures, and available everywhere.
+    title: 'Grid', icon: 'grid', priority: 40,
+    match: { mime: ['image/*', 'video/*'] },
+    render: gridView, move: gridMove,
+  },
+};
+
+export function registerBuiltinViews(platform) {
+  for (const [name, spec] of Object.entries(BUILT_IN)) {
+    platform.contributions.register(name, { type: 'view', ...spec });
+  }
+}
+
+const SETTING = 'explorer.view';
+
+/**
+ * Every view that could draw these results, best first.
+ *
+ * No availability check, unlike openers: a view is host code, so there is no "its
+ * provider isn't answering" state to be in. A when-clause is the only gate, and it is
+ * the same one every other contribution answers to.
+ */
+export function availableViews(platform) {
+  return platform.contributions
+    .ofType('view')
+    .filter((v) => !v.when || platform.context.evaluate(v.when))
+    .sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
+}
+
+/**
+ * The view to draw with, in order of how much someone meant it.
+ *
+ * 1. A saved choice — they pressed a button. Nothing infers its way past that.
+ * 2. The search transformer's hint, when there is a search on screen. It read the
+ *    sentence: "photos from the trip last summer" is a request for a gallery as much as
+ *    it is a query, and nothing downstream can recover that from a list of content types.
+ * 3. A view whose `match` suits what is actually there — a collection of photographs
+ *    opens as a grid without anyone asking.
+ * 4. The highest priority, which is the list.
+ *
+ * A hint naming a view this build doesn't have is ignored, not an error: the transformer
+ * is deployment configuration and may outlive the build it was written against.
+ */
+export function activeView(platform, items = [], hint = null) {
+  const views = availableViews(platform);
+  if (!views.length) return null;
+  const saved = platform.settings.get(SETTING);
+  const chosen = saved && views.find((v) => v.id === saved);
+  if (chosen) return chosen;
+  const suggested = hint && views.find((v) => v.id === hint);
+  if (suggested) return suggested;
+  const nodes = items.map((i) => i.node).filter(Boolean);
+  if (nodes.length >= 3) {
+    const suits = (v) => v.match && Object.keys(v.match).length
+      && nodes.filter((n) => matchesView(v, n)).length / nodes.length > 0.6;
+    const fitted = views.find(suits);
+    if (fitted) return fitted;
+  }
+  return views[0];
+}
+
+function matchesView(view, node) {
+  const ct = node.contentType || '';
+  const name = (node.name || '').toLowerCase();
+  const ext = name.includes('.') ? name.slice(name.lastIndexOf('.')) : '';
+  if ((view.match.ext || []).includes(ext)) return true;
+  return (view.match.mime || []).some((m) => (m.endsWith('/*') ? ct.startsWith(m.slice(0, -1)) : ct === m));
+}
+
+export function chooseView(platform, viewId) {
+  platform.settings.set(SETTING, viewId || undefined);
+}
+
+/** The switcher, shown only when there is more than one way to look at this. */
+export function viewSwitcher(platform, current) {
+  const views = availableViews(platform);
+  if (views.length < 2) return null;
+  return div({ className: 'view-switch' }, ...views.map((v) =>
+    button({
+      className: `vs-btn ${v.id === current?.id ? 'on' : ''}`,
+      title: `${v.title || v.name} view`,
+      'aria-pressed': v.id === current?.id ? 'true' : 'false',
+    }, icon(v.icon || 'list', { size: 14 })).on({ click: () => chooseView(platform, v.id) })));
+}
+
+/**
+ * Draw the results with `view`, falling back to the list if it throws.
+ *
+ * A view is the whole results area. One that fails takes the drive's contents off the
+ * screen with it, so a broken third-party view degrades to the built-in list rather
+ * than to nothing.
+ */
+/**
+ * The delta an arrow key should move the highlight by, or null for the default.
+ *
+ * Keyboard navigation stays the launcher's: it owns the index, the selection and the
+ * wrapping. But "down" means the row below in a list and the tile below in a grid, so
+ * the view is asked first and answers in the launcher's own terms.
+ */
+export function viewMove(view, key, ctx) {
+  try {
+    const d = view?.move?.({ key, ...ctx });
+    return Number.isFinite(d) && d !== 0 ? d : null;
+  } catch {
+    return null; // a view that can't answer doesn't get to break the arrow keys
+  }
+}
+
+export function renderView(view, ctx) {
+  try {
+    if (typeof view?.render === 'function') return view.render(ctx);
+  } catch (err) {
+    console.error(`view "${view?.id}" failed`, err);
+    return div({},
+      div({ className: 'view-error' }, icon('warn', { size: 13 }),
+        span(`The “${view?.title || view?.id}” view could not be drawn — showing the list instead.`)),
+      listView(ctx));
+  }
+  return listView(ctx);
+}
+
+export { listView, gridView };

package/packages/web/src/ui/components/views/list.js

@@ -0,0 +1,50 @@
+// The list view: one row per item, which is what a drive looks like unless you ask
+// for something else.
+//
+// It is also the fallback for every other view: one that throws lands here, and views
+// are host code with no sandbox to catch them first. So it must not depend on anything
+// beyond the contract itself — no settings, no capabilities, no network.
+
+import { dd } from '../../../runtime.js';
+import { icon } from '../../icon.js';
+import { groupHeader, menuButton, openRowMenu } from './parts.js';
+
+const { div, span } = dd;
+
+export function listView({ groups, index, handlers, ui }) {
+  let gi = -1;
+  return div({ className: 'launch-view view-list' },
+    ...groups.map((group) => div({ className: 'launch-group' },
+      groupHeader(group),
+      group.items.length
+        ? div({ className: 'launch-list' }, ...group.items.map((it) => {
+          const at = ++gi;
+          return itemRow(it, at === index, {
+            hover: () => handlers.hover(at),
+            select: () => handlers.select(at),
+          }, ui);
+        }))
+        : div({ className: 'launch-empty' }, group.empty || 'Nothing here.'),
+    )),
+  );
+}
+
+function itemRow(it, active, { hover, select }, ui) {
+  return div({ className: `launch-item ${active ? 'active' : ''}` },
+    icon(it.icon, { size: 15 }),
+    span({ className: 'name' }, it.title),
+    it.detail ? span({ className: 'launch-detail' }, it.detail) : null,
+    it.badge ? span({ className: 'launch-kind' }, it.badge) : null,
+    // Everything you can do to a file, on the file. Rename, download, copy link and
+    // delete were all commands with no way to reach them: the palette's versions act on
+    // "the selection", and until the highlight became a selection there never was one.
+    menuButton(it, ui, select),
+  // One `.on()` call: a second replaces the handler map rather than merging into it,
+  // which is how adding `contextmenu` silently removed `click` and stopped every file
+  // in the drive from opening.
+  ).on({
+    click: it.run,
+    mouseenter: hover,
+    ...(it.menu ? { contextmenu: (e) => { e.preventDefault(); openRowMenu(e.currentTarget, it, ui, e, select); } } : {}),
+  });
+}

package/packages/web/src/ui/components/views/parts.js

@@ -0,0 +1,58 @@
+// The pieces every view draws the same way.
+//
+// A view decides how results are ARRANGED. It does not get to decide what a group
+// header says, or where the row menu opens, because those are the same promises
+// whichever way the drive is drawn: the header carries the group's action (Upload,
+// Empty trash, Retry) and the menu carries everything you can do to a file. A view that
+// dropped either would quietly take working features off the screen.
+
+import { dd } from '../../../runtime.js';
+import { icon } from '../../icon.js';
+
+const { div, span, button } = dd;
+
+/**
+ * A group's heading.
+ *
+ * `group.title` is uppercased by CSS, which is right for a label and wrong for anything
+ * the user typed — it turns their `#draft` into `#DRAFT`, a tag that isn't what they
+ * wrote. So a group can carry a verbatim half.
+ */
+export function groupHeader(group) {
+  return div({ className: 'launch-h' },
+    // Label and value together on the left; `.launch-h` is space-between, so an
+    // ungrouped value gets flung to the far edge away from the label it belongs to.
+    div({ className: 'lh-title' },
+      span(group.title),
+      group.verbatim ? span({ className: 'lh-verbatim' }, group.verbatim) : null),
+    group.action || null,
+  );
+}
+
+/** The "…" button, for items that have a menu. */
+export function menuButton(it, ui, select) {
+  if (!it.menu) return null;
+  return button({
+    className: 'launch-more',
+    title: `Actions for ${it.title}`,
+    $attrs: { 'aria-label': `Actions for ${it.title}` },
+  }, icon('dots', { size: 14 }))
+    .on({ click: (e) => { e.stopPropagation(); openRowMenu(e.currentTarget, it, ui, null, select); } });
+}
+
+/**
+ * Open an item's menu, anchored to the thing it belongs to.
+ *
+ * Anchored to the row (or the pointer, when there was one) rather than to a remembered
+ * click position, so the keyboard route lands somewhere sensible too.
+ */
+export function openRowMenu(anchor, it, ui, event, select) {
+  const r = anchor?.getBoundingClientRect?.();
+  const x = event?.clientX ?? (r ? r.right - 8 : 0);
+  const y = event?.clientY ?? (r ? r.bottom : 0);
+  // Read the coordinates BEFORE selecting: selecting re-renders, and `anchor` is then
+  // a detached node whose rect is all zeroes.
+  const items = it.menu(ui);
+  select?.();
+  ui.platform.workbench.showContextMenu(x, y, items);
+}

package/packages/web/src/ui/compositions/workbench.js

@@ -0,0 +1,125 @@
+// Root composition. Assembles the `ui` helper (stable for the app's life),
+// zips every reactive slice the shell needs into one snapshot, and renders the
+// full workbench from it. Components stay pure — they receive (state, ui) and
+// either call ui.exec(commandId) or ui.go(action). This is the only module that
+// knows about every service at once.
+
+import { dd, cell, derive, constant } from '../../runtime.js';
+import { NavigateAction } from '../../bl/actions.js';
+import activityBar from '../components/activityBar.js';
+import statusBar from '../components/statusBar.js';
+import launcher from '../components/launcher.js';
+import settingsView from '../components/settingsView.js';
+import pluginsView from '../components/pluginsView.js';
+import editorArea from '../components/editorArea.js';
+import commandPalette from '../components/commandPalette.js';
+import { dialog, contextMenu, toasts, transferTray, pluginPanel } from '../components/overlays.js';
+import activityPanel from '../components/activityPanel.js';
+import { infoPanel } from '../components/social.js';
+import { phoneTopBar, phoneBottomBar, phoneSheet } from '../components/phoneChrome.js';
+
+const { alias, div } = dd;
+
+export default function workbench({ engine, app, platform, plugins }) {
+  // A counter rather than a timestamp: a cell drops a write of the value it already
+  // holds, and two `rerender()` calls in the same millisecond would have compared equal.
+  const bump = cell(0);
+  const ui = {
+    engine, app, platform,
+    go: (action) => engine.dispatch(action),
+    exec: (id, ...args) => platform.commands.execute(id, ...args),
+    rerender: () => bump.update((n) => n + 1),
+    uninstallPlugin: (id) => plugins?.uninstall(id),
+  };
+
+  const { watch } = platform.reactive;
+  // One derived snapshot of every slice the shell reads. `derive` invalidates when any
+  // of them does and recomputes once on the next read, so fifteen changes in a frame
+  // still cost one render.
+  const combined = derive(
+    [
+      platform.workbench.observe(),
+      platform.workbench.observeOverlay(),
+      platform.workbench.observeNav(),
+      app.explorer.observe(),
+      app.search.observe(),
+      app.transfers.observe(),
+      platform.notifications.observe(),
+      platform.context.observe(),
+      platform.settings.observe(),
+      platform.plugins.observe() ?? constant([]),
+      platform.contributions.observeType('statusItem'),
+      app.social.observe(),
+      app.offline.observe(),
+      app.activity.observe(),
+      platform.viewport.observe(),
+      platform.voice.observe(),
+      bump,
+    ],
+    // `_bump` is IN the snapshot, unlike before. `watch` skips a render whose value is
+    // shallow-equal to the last one, so a forced re-render that left no trace in the
+    // object would be discarded as "nothing changed" — which is the opposite of what
+    // asking for one means.
+    (wb, overlay, nav, ex, se, tr, notif, ctx, settings, pluginList, statusItems, so, off, act, vp, voice, _bump) =>
+      ({ wb, overlay, nav, ex, se, tr, notif, ctx, settings, plugins: pluginList, statusItems, so, off, act, vp, voice, _bump }),
+  );
+
+  return alias(() => watch(combined, (state) => view(state, ui)));
+}
+
+function view(state, ui) {
+  const mode = state.vp?.mode || 'desktop';
+  const phone = mode === 'phone';
+  return div({ className: `shell ${mode} ${state.settings['workbench.density'] === 'compact' ? 'compact' : ''}` },
+    // On a phone the rail becomes a bottom bar and the status bar folds behind one icon
+    // in a top bar — see phoneChrome. Everything between them is identical, which is the
+    // point: only the chrome changes shape, not the app.
+    phone ? phoneTopBar(state, ui) : null,
+    div({ className: 'body' },
+      phone ? null : activityBar(state, ui),
+      mainArea(state, ui),
+    ),
+    phone ? phoneBottomBar(state, ui) : statusBar(state, ui),
+    phone ? phoneSheet(state, ui) : null,
+    // Overlays.
+    searchModal(state, ui),
+    commandPalette(state, ui),
+    dialog(state, ui),
+    contextMenu(state, ui),
+    pluginPanel(state, ui),
+    toasts(state, ui),
+    transferTray(state, ui),
+    activityPanel(state, ui),
+  );
+}
+
+function mainArea(state, ui) {
+  switch (state.wb.activity) {
+    case 'settings': return settingsView(state, ui);
+    case 'plugins': return pluginsView(state, ui);
+    default: {
+      // Home: the top of the panel stack — the launcher (base search) or, once a
+      // file is open, its opener full-width (optionally split with the info panel).
+      if (!state.nav.activeTabId) return launcher(state, ui);
+      if (!state.wb.infoPanel) return editorArea(state, ui);
+      // A 340px rail beside a 390px screen leaves nothing on either side. On a phone the
+      // details panel takes the whole panel instead — it has its own close button, so
+      // there is still a way back to the file.
+      return state.vp?.mode === 'phone'
+        ? infoPanel(state, ui)
+        : div({ className: 'editor-split' }, editorArea(state, ui), infoPanel(state, ui));
+    }
+  }
+}
+
+// Double-shift search: the launcher as a modal overlay. Picking an item resets the
+// viewer stack (starts over) — the launcher reads state.wb.searchModal to know.
+function searchModal(state, ui) {
+  if (!state.wb.searchModal) return div();
+  return div({ className: 'search-modal' },
+    div({ className: 'scrim' }).on({ click: () => ui.platform.workbench.closeSearchModal() }),
+    div({ className: 'search-modal-panel' }, launcher(state, ui, { modal: true })),
+  );
+}
+
+export { NavigateAction };

package/packages/web/src/ui/format.js

@@ -0,0 +1,33 @@
+// Formatting helpers for the UI.
+
+export function bytes(n) {
+  if (n == null || Number.isNaN(n)) return '—';
+  const u = ['B', 'KB', 'MB', 'GB', 'TB'];
+  let i = 0;
+  let v = n;
+  while (v >= 1024 && i < u.length - 1) {
+    v /= 1024;
+    i++;
+  }
+  return `${v >= 100 || i === 0 ? Math.round(v) : v.toFixed(1)} ${u[i]}`;
+}
+
+export function duration(sec) {
+  if (sec == null || Number.isNaN(sec) || !isFinite(sec)) return '0:00';
+  sec = Math.max(0, Math.floor(sec));
+  const h = Math.floor(sec / 3600);
+  const m = Math.floor((sec % 3600) / 60);
+  const s = sec % 60;
+  return h > 0 ? `${h}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}` : `${m}:${String(s).padStart(2, '0')}`;
+}
+
+export function relativeDate(ms) {
+  if (!ms) return '';
+  const diff = Date.now() - ms;
+  const day = 86400000;
+  if (diff < 60000) return 'just now';
+  if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;
+  if (diff < day) return `${Math.floor(diff / 3600000)}h ago`;
+  if (diff < 7 * day) return `${Math.floor(diff / day)}d ago`;
+  return new Date(ms).toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: diff > 330 * day ? 'numeric' : undefined });
+}

package/packages/web/src/ui/icon.js

@@ -0,0 +1,81 @@
+// Inline SVG icons. One function, a path table, sized via viewBox 24. Using
+// dodo's element helpers so icons are just vnodes like everything else.
+
+import { dd } from '../runtime.js';
+
+const { svg, h } = dd;
+
+// Each entry is an array of <path>/<primitive> specs (attrs use SVG names).
+const PATHS = {
+  link: [{ d: 'M10 13a5 5 0 0 0 7.07 0l3-3A5 5 0 0 0 13 3l-1.5 1.5' }, { d: 'M14 11a5 5 0 0 0-7.07 0l-3 3A5 5 0 0 0 11 21l1.5-1.5' }],
+  file: [{ d: 'M6 3h8l5 5v13a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z' }, { d: 'M14 3v5h5' }],
+  'file-text': [{ d: 'M6 3h8l5 5v13a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z' }, { d: 'M14 3v5h5M9 13h6M9 17h6M9 9h2' }],
+  'file-image': [{ d: 'M6 3h8l5 5v13a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z' }, { d: 'M14 3v5h5' }, { d: 'M8.5 15l2-2 3 3 2-1.5' }, { d: 'M10 12a1 1 0 1 0 0-.01' }],
+  'file-audio': [{ d: 'M6 3h8l5 5v13a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z' }, { d: 'M14 3v5h5M10 12v5M13 10v9' }],
+  'file-video': [{ d: 'M6 3h8l5 5v13a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z' }, { d: 'M14 3v5h5M10 12l4 2.5-4 2.5z' }],
+  book: [{ d: 'M4 5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2z' }, { d: 'M4 19a2 2 0 0 1 2-2h13' }],
+  search: [{ d: 'M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14zM20 20l-3.5-3.5' }],
+  mic: [{ d: 'M12 3a3 3 0 0 0-3 3v6a3 3 0 0 0 6 0V6a3 3 0 0 0-3-3z' }, { d: 'M5 11a7 7 0 0 0 14 0M12 18v3M9 21h6' }],
+  command: [{ d: 'M8 6a2 2 0 1 0-2 2h12a2 2 0 1 0-2-2v12a2 2 0 1 0 2-2H6a2 2 0 1 0 2 2z' }],
+  gear: [{ d: 'M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6z' }, { d: 'M19 12a7 7 0 0 0-.1-1.2l2-1.6-2-3.4-2.4 1a7 7 0 0 0-2-1.2L14 2h-4l-.5 2.6a7 7 0 0 0-2 1.2l-2.4-1-2 3.4 2 1.6A7 7 0 0 0 5 12a7 7 0 0 0 .1 1.2l-2 1.6 2 3.4 2.4-1a7 7 0 0 0 2 1.2L10 22h4l.5-2.6a7 7 0 0 0 2-1.2l2.4 1 2-3.4-2-1.6A7 7 0 0 0 19 12z' }],
+  upload: [{ d: 'M12 16V4M7 9l5-5 5 5M4 20h16' }],
+  download: [{ d: 'M12 4v12M7 11l5 5 5-5M4 20h16' }],
+  trash: [{ d: 'M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13M10 11v6M14 11v6' }],
+  refresh: [{ d: 'M20 11a8 8 0 1 0-.5 4M20 5v6h-6' }],
+  'chevron-right': [{ d: 'M9 6l6 6-6 6' }],
+  'chevron-left': [{ d: 'M15 6l-6 6 6 6' }],
+  'chevron-down': [{ d: 'M6 9l6 6 6-6' }],
+  close: [{ d: 'M6 6l12 12M18 6L6 18' }],
+  tag: [{ d: 'M4 4h6.5a1 1 0 0 1 .7.3l8.5 8.5a1 1 0 0 1 0 1.4l-5.5 5.5a1 1 0 0 1-1.4 0L4.3 11.2a1 1 0 0 1-.3-.7V4z' }, { d: 'M8 8a0.6 0.6 0 1 0 0-.01' }],
+  play: [{ d: 'M8 5v14l11-7z', fill: 'currentColor', stroke: 'none' }],
+  pause: [{ d: 'M8 5h3v14H8zM13 5h3v14h-3z', fill: 'currentColor', stroke: 'none' }],
+  'skip-back': [{ d: 'M11 6v12L3 12zM13 6l8 6-8 6zM21 6v12', fill: 'none' }],
+  'skip-forward': [{ d: 'M13 6v12l8-6zM3 6l8 6-8 6zM3 6v12' }],
+  'back-30': [{ d: 'M11 8a7 7 0 1 0 7 7' }, { d: 'M11 4l-3 4 4 1' }],
+  'fwd-30': [{ d: 'M13 8a7 7 0 1 1-7 7' }, { d: 'M13 4l3 4-4 1' }],
+  plug: [{ d: 'M9 3v6M15 3v6M6 9h12v3a6 6 0 0 1-12 0zM12 18v3' }],
+  bell: [{ d: 'M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9z' }, { d: 'M13.73 21a2 2 0 0 1-3.46 0' }],
+  files: [{ d: 'M4 4h9l3 3v3M8 8h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2v-9a2 2 0 0 1 2-2z' }],
+  dots: [{ d: 'M5 12h.01M12 12h.01M19 12h.01' }],
+  check: [{ d: 'M5 12l5 5L20 6' }],
+  plus: [{ d: 'M12 5v14M5 12h14' }],
+  'arrow-up': [{ d: 'M12 19V5M6 11l6-6 6 6' }],
+  star: [{ d: 'M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1L3.2 9.5l6.1-.9z' }],
+  info: [{ d: 'M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zM12 11v5M12 8h.01' }],
+  warn: [{ d: 'M12 3l9 16H3zM12 10v4M12 17h.01' }],
+  x: [{ d: 'M6 6l12 12M18 6L6 18' }],
+  list: [{ d: 'M8 6h12M8 12h12M8 18h12M4 6h.01M4 12h.01M4 18h.01' }],
+  grid: [{ d: 'M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z' }],
+};
+
+// Map a node to an icon name via the shared file-type classifier.
+export { iconForKind as iconForNode } from '../bl/fileType.js';
+
+export function icon(name, { size = 18, strokeWidth = 1.6, className } = {}) {
+  // `Object.hasOwn`, not a bare lookup: `PATHS` is a plain object, so a contribution
+  // declaring `"icon": "constructor"` (kept verbatim from the manifest) otherwise
+  // resolves to a function and takes down the whole render with `specs.map is not a
+  // function`.
+  const specs = Object.hasOwn(PATHS, name) ? PATHS[name] : PATHS.file;
+  // `class` through `$attrs`, not `className`. An SVGElement's `className` is a
+  // read-only SVGAnimatedString, so the prop is written out as a literal `className="…"`
+  // attribute — which no selector matches. `.sheet-row .sr-go` was styling nothing.
+  return svg(
+    {
+      $attrs: {
+        viewBox: '0 0 24 24', width: size, height: size, fill: 'none',
+        stroke: 'currentColor', 'stroke-width': strokeWidth,
+        'stroke-linecap': 'round', 'stroke-linejoin': 'round',
+        ...(className ? { class: className } : {}),
+      },
+    },
+    ...specs.map((s) => h('path', { $attrs: filterAttrs(s) })),
+  );
+}
+
+function filterAttrs(s) {
+  const out = { d: s.d };
+  if (s.fill) out.fill = s.fill;
+  if (s.stroke) out.stroke = s.stroke;
+  return out;
+}

package/packages/web/src/ui/media.js

@@ -0,0 +1,114 @@
+// Keeping a media element pointed at a URL that still works.
+//
+// A minted URL expires (docs/design/signed-urls.md). Content URLs are long — longer than
+// almost any sitting — but "almost" is not "always": someone pauses a film, closes the
+// laptop, and comes back tomorrow. So the element has to be able to swap its own source,
+// and swapping the source under a playing video is not a matter of assigning `src`.
+//
+// Both refresh paths are needed and neither is sufficient alone:
+//
+//   PROACTIVE  a timer from `expiresAt`. Handles the common case invisibly.
+//   REACTIVE   the element's own `error`. A backgrounded tab has its timers throttled,
+//              so the proactive refresh may simply never run — which is exactly the
+//              paused-overnight case, the one the timer was supposed to cover.
+
+const REFRESH_AT = 0.8; // of the URL's life, so the swap lands well before it matters.
+const MAX_TIMER = 2 ** 31 - 1; // setTimeout overflows past this and fires immediately.
+
+/**
+ * Point `el` at `node`'s bytes and keep it pointed there.
+ *
+ * @param {HTMLMediaElement|HTMLImageElement} el
+ * @param {object} node
+ * @param {object} ui
+ * @param {{op?: string, onError?: (msg: string) => void}} [opts]
+ * @returns {() => void} detach
+ */
+export function attachMedia(el, node, ui, { op = 'media', onError } = {}) {
+  const urls = ui.platform.mediaUrls;
+  let timer = null;
+  let stopped = false;
+  // One retry per URL. A file whose bytes are genuinely gone would otherwise re-mint
+  // forever, hammering the server over a 404 that is never going to change.
+  let retried = false;
+
+  const clear = () => { clearTimeout(timer); timer = null; };
+
+  const schedule = (expiresAt) => {
+    clear();
+    if (!Number.isFinite(expiresAt)) return; // nothing was minted; nothing expires
+    const wait = Math.max(1000, (expiresAt - Date.now()) * REFRESH_AT);
+    timer = setTimeout(() => apply({ resume: true }), Math.min(wait, MAX_TIMER));
+  };
+
+  /**
+   * Fetch a URL and put it on the element, preserving where the user was.
+   *
+   * The order matters and every step earns its place: without `resume` the film restarts
+   * from the beginning, without `load()` an element that has already errored may not pick
+   * up the new source at all, and without the final `play()` it sits there paused looking
+   * like a crash.
+   */
+  async function apply({ resume }) {
+    if (stopped) return;
+    const media = isMedia(el);
+    const at = media && resume ? el.currentTime : 0;
+    const wasPlaying = media && resume ? !el.paused && !el.ended : false;
+    let got;
+    try {
+      got = await urls.url(node.id, { op });
+    } catch (err) {
+      if (!stopped) onError?.(err.message);
+      return;
+    }
+    if (stopped) return;
+    el.src = got.url;
+    if (media) {
+      el.load();
+      if (at > 0 || wasPlaying) {
+        const restore = () => {
+          el.removeEventListener('loadedmetadata', restore);
+          // Guard the seek: a live or zero-length source has nowhere to seek to, and
+          // assigning currentTime there throws.
+          if (at > 0 && Number.isFinite(el.duration) && el.duration > at) el.currentTime = at;
+          if (wasPlaying) el.play().catch(() => { /* autoplay policy; the user can press play */ });
+        };
+        el.addEventListener('loadedmetadata', restore);
+      }
+    }
+    schedule(got.expiresAt);
+  }
+
+  // The retry budget is spent by a failed LOAD and refunded by a successful one — not by
+  // a successful mint. Refunding it in `apply` meant a file whose bytes are genuinely
+  // gone re-minted forever: every retry got a perfectly good URL, reset the budget, and
+  // failed again, so the fallback was never shown and the request never stopped.
+  const onLoaded = () => { retried = false; };
+  el.addEventListener('load', onLoaded);      // <img>
+  el.addEventListener('loadeddata', onLoaded); // <audio>/<video>
+
+  // The reactive half. An expired URL and a missing file look identical from here — both
+  // are just a failed load — so it re-mints once and, if that fails too, says so.
+  const onElementError = () => {
+    if (stopped) return;
+    if (retried) { onError?.(null); return; }
+    retried = true;
+    urls.invalidate(node.id, op);
+    apply({ resume: true });
+  };
+  el.addEventListener('error', onElementError);
+
+  apply({ resume: false });
+
+  return () => {
+    stopped = true;
+    clear();
+    el.removeEventListener('error', onElementError);
+    el.removeEventListener('load', onLoaded);
+    el.removeEventListener('loadeddata', onLoaded);
+  };
+}
+
+function isMedia(el) {
+  return typeof el?.play === 'function' && typeof el?.load === 'function';
+}