@3sln/trove 0.0.2

package/packages/web/src/ui/components/openers/markdown.js

@@ -0,0 +1,222 @@
+// The markdown opener. Markdown is load-bearing now: with no folder hierarchy, a
+// document that links its sources IS the grouping, so these files have to render as
+// documents with working links rather than as a wall of `<pre>`.
+//
+// A `trove:` link navigates in-app (see ../../../bl/links.js for resolution); an http(s)
+// link opens in a new tab with `rel="noopener noreferrer"`; anything else — `javascript:`,
+// `data:` — is rendered as inert text, because a document is untrusted content that any
+// user of the drive can write.
+//
+// The parser is deliberately small: headings, lists, block quotes, fenced code, inline
+// code/emphasis/links, and paragraphs. It builds VDOM nodes directly and never produces
+// an HTML string, so there is no innerHTML to get wrong.
+//
+// It is also BOUNDED. The input is a file someone uploaded, so its size and shape are
+// not ours to choose: a document with tens of thousands of emphasis spans used to
+// recurse once per span and overflow the stack mid-render, which left the viewer on a
+// spinner forever with nothing said. Inline scanning is now iterative, and both the
+// document length and the node count are capped — a truncated document with a visible
+// notice beats a hung one.
+
+import { dd, fromAsync } from '../../../runtime.js';
+import { icon } from '../../icon.js';
+import { parseTroveUri } from '@3sln/trove/core/links.js';
+import { openTroveLink } from '../../../bl/links.js';
+
+const { div, span, h1, h2, h3, p, ul, ol, li, pre, code, a, em, strong, blockquote, hr, br } = dd;
+
+export function markdownOpener(node, ui) {
+  // Bounded at the TRANSFER, not just the render: MAX_CHARS below stops us laying out a
+  // huge document, but without this the whole file is still pulled into the tab first.
+  const src = fromAsync(() => ui.platform.api.readTextCapped(node.id, { maxBytes: MAX_CHARS, size: node.size }).then((r) => r.text));
+  return dd.alias(() =>
+    ui.platform.reactive.watch(
+      src,
+      // A throw in here is NOT covered by the `error:` handler below — that one is for
+      // the observable failing, not for the mapper. Rendering untrusted content is
+      // exactly where a throw is plausible, and an uncaught one leaves the placeholder
+      // on screen forever, so it is caught where it happens.
+      (text) => {
+        try {
+          return div({ className: 'viewer markdown' }, div({ className: 'md' }, ...renderMarkdown(text, node, ui)));
+        } catch (err) {
+          console.error('markdown render failed', err);
+          return errorView(`This document couldn’t be displayed: ${err.message}`);
+        }
+      },
+      {
+        placeholder: () => div({ className: 'viewer' }, div({ className: 'loading' }, div({ className: 'spinner' }), span('Loading…'))),
+        error: (e) => errorView(e.message),
+      },
+    ),
+  )();
+}
+
+function errorView(message) {
+  return div({ className: 'viewer' }, div({ className: 'fallback' }, icon('warn', { size: 40 }), span(message)));
+}
+
+// Bounds. A document past these renders as much as fits, with a notice — the parse is
+// linear, so these are about the size of the resulting DOM, not about parse time.
+const MAX_CHARS = 512 * 1024;
+const MAX_BLOCKS = 5_000;
+const MAX_INLINE_NODES = 2_000; // per block
+
+// --- block level -------------------------------------------------------------
+
+export function renderMarkdown(text, node, ui) {
+  const raw = String(text ?? '');
+  const truncated = raw.length > MAX_CHARS;
+  const lines = (truncated ? raw.slice(0, MAX_CHARS) : raw).split(/\r?\n/);
+  const out = [];
+  let i = 0;
+
+  while (i < lines.length) {
+    if (out.length >= MAX_BLOCKS) return [...out, tooLarge()];
+    const line = lines[i];
+
+    // Fenced code — taken verbatim, including any markdown inside it.
+    const fence = /^\s*(```+|~~~+)(.*)$/.exec(line);
+    if (fence) {
+      const marker = fence[1][0].repeat(3);
+      const body = [];
+      i++;
+      while (i < lines.length && !lines[i].trimStart().startsWith(marker)) body.push(lines[i++]);
+      i++; // closing fence (or EOF — an unterminated fence still renders)
+      out.push(pre({ className: 'md-code' }, code(body.join('\n'))));
+      continue;
+    }
+
+    if (!line.trim()) { i++; continue; }
+
+    const heading = /^(#{1,6})\s+(.*)$/.exec(line);
+    if (heading) {
+      const level = heading[1].length;
+      const factory = level === 1 ? h1 : level === 2 ? h2 : h3;
+      out.push(factory({ className: `md-h md-h${level}` }, ...inline(heading[2], node, ui)));
+      i++;
+      continue;
+    }
+
+    if (/^\s*(-{3,}|\*{3,}|_{3,})\s*$/.test(line)) { out.push(hr({ className: 'md-hr' })); i++; continue; }
+
+    if (/^\s*>/.test(line)) {
+      const body = [];
+      while (i < lines.length && /^\s*>/.test(lines[i])) body.push(lines[i++].replace(/^\s*>\s?/, ''));
+      out.push(blockquote({ className: 'md-quote' }, ...renderMarkdown(body.join('\n'), node, ui)));
+      continue;
+    }
+
+    const bullet = /^\s*([-*+]|\d+[.)])\s+/.exec(line);
+    if (bullet) {
+      const ordered = /\d/.test(bullet[1]);
+      const items = [];
+      while (i < lines.length) {
+        const m = /^\s*([-*+]|\d+[.)])\s+(.*)$/.exec(lines[i]);
+        if (!m || /\d/.test(m[1]) !== ordered) break;
+        items.push(li({ className: 'md-li' }, ...inline(m[2], node, ui)));
+        i++;
+      }
+      out.push((ordered ? ol : ul)({ className: 'md-list' }, ...items));
+      continue;
+    }
+
+    // Paragraph: consecutive non-blank lines that don't start another block.
+    const para = [];
+    while (i < lines.length && lines[i].trim() && !startsBlock(lines[i])) para.push(lines[i++]);
+    const joined = para.join('\n');
+    const kids = [];
+    joined.split('\n').forEach((l, n) => {
+      if (n) kids.push(br());
+      kids.push(...inline(l, node, ui));
+    });
+    out.push(p({ className: 'md-p' }, ...kids));
+  }
+  return truncated ? [...out, tooLarge()] : out;
+}
+
+// Say what happened, rather than silently rendering a prefix as if it were the whole
+// document — a reader who can't tell it was cut off will believe the rest isn't there.
+function tooLarge() {
+  return p({ className: 'md-truncated' },
+    'This document is too large to display in full. Download it to read the rest.');
+}
+
+function startsBlock(line) {
+  return /^(#{1,6}\s|\s*>|\s*([-*+]|\d+[.)])\s|\s*(```|~~~))/.test(line)
+    || /^\s*(-{3,}|\*{3,}|_{3,})\s*$/.test(line);
+}
+
+// --- inline level ------------------------------------------------------------
+
+// Ordered by precedence: code spans win over emphasis (so `*` inside backticks is
+// literal), and explicit links win over bare autolinks.
+const INLINE = [
+  { re: /`([^`]+)`/, node: (m) => code({ className: 'md-inline-code' }, m[1]) },
+  { re: /\[([^\]]*)\]\(([^)\s]+)(?:\s+"[^"]*")?\)/, node: (m, node, ui) => link(m[2], m[1] || m[2], node, ui) },
+  { re: /(\*\*|__)(.+?)\1/, node: (m, node, ui, d) => strong(...inline(m[2], node, ui, d + 1)) },
+  { re: /(\*|_)(.+?)\1/, node: (m, node, ui, d) => em(...inline(m[2], node, ui, d + 1)) },
+  // Bare URLs, so a pasted trove: reference is clickable without link syntax.
+  { re: /(trove:[^\s<>"'`)\]}]+|https?:\/\/[^\s<>"'`)\]}]+)/, node: (m, node, ui) => link(trimTrailing(m[1]), trimTrailing(m[1]), node, ui) },
+];
+
+/**
+ * Scan one line into inline nodes. Iterative on purpose: the obvious recursive form
+ * (split on the first match, recurse on both sides) descends once per span, so a line
+ * with thousands of them overflows the stack — and the input is a file someone
+ * uploaded, so "thousands of them" is their choice, not ours.
+ *
+ * Emphasis still nests, via a bounded recursion on the span's *contents* only. That
+ * depth is limited by how deeply markers are nested rather than by how many spans a
+ * line contains, so it stays shallow for anything a person would write, and `depth`
+ * stops a pathological document regardless.
+ */
+function inline(text, node, ui, depth = 0) {
+  if (!text) return [];
+  if (depth > 12) return [text]; // deeper than any real markup; render it literally
+  const out = [];
+  let rest = text;
+  while (rest) {
+    if (out.length >= MAX_INLINE_NODES) { out.push(rest); break; }
+    let best = null;
+    for (const rule of INLINE) {
+      const m = rule.re.exec(rest);
+      if (m && (best === null || m.index < best.m.index)) best = { m, rule };
+    }
+    if (!best) { out.push(rest); break; }
+    const { m, rule } = best;
+    if (m.index) out.push(rest.slice(0, m.index));
+    out.push(rule.node(m, node, ui, depth));
+    rest = rest.slice(m.index + m[0].length);
+  }
+  return out;
+}
+
+function trimTrailing(url) {
+  return url.replace(/[.,;:!?]+$/, '');
+}
+
+/**
+ * One link. A `trove:` reference navigates inside the app and is resolved lazily on
+ * click — resolving every link up front would mean a request per link on every render,
+ * and a link's target can appear or disappear between renders anyway.
+ *
+ * Only trove: and http(s) are rendered as links at all. A `javascript:` or `data:` URL
+ * is shown as plain text: markdown here is untrusted content written by whoever can
+ * write to the drive, and an allowlist is the only way to be sure about a scheme.
+ */
+function link(href, label, node, ui) {
+  const trove = parseTroveUri(href);
+  if (trove) {
+    return a({ className: 'md-link md-trove', href: '#', title: href }, label).on({
+      click: (e) => {
+        e.preventDefault();
+        openTroveLink(ui, href, { from: node });
+      },
+    });
+  }
+  if (/^https?:\/\//i.test(href)) {
+    return a({ className: 'md-link', href, target: '_blank', rel: 'noopener noreferrer', title: href }, label);
+  }
+  return span({ className: 'md-deadlink', title: `Unsupported link: ${href}` }, label);
+}

package/packages/web/src/ui/components/overlays.js

@@ -0,0 +1,255 @@
+// Small transient overlays: modal dialog (prompt/confirm), right-click context
+// menu, toast notifications, the upload/transfer tray, and the plugin popup
+// panel (which hosts a plugin's own iframe, Chrome-extension style).
+
+import { dd } from '../../runtime.js';
+import { icon, iconForNode } from '../icon.js';
+import { bytes } from '../format.js';
+import { pluginReview } from './pluginReview.js';
+import { typeKeyFor, typeLabelFor, rememberOpener, openerSource } from '../../bl/openers.js';
+
+const { div, span, button, input, h3, p, select, option, label, textarea } = dd;
+
+// ---- Dialog ----------------------------------------------------------------
+export function dialog(state, ui) {
+  const d = state.overlay.dialog;
+  if (!d) return null;
+  if (d.kind === 'collection') return collectionDialog(d, ui);
+  if (d.kind === 'plugin-review') return pluginReview(d, ui);
+  if (d.kind === 'opener-chooser') return openerChooserDialog(d, ui);
+  const wb = ui.platform.workbench;
+  let value = d.value ?? '';
+  const submit = () => (d.kind === 'confirm' ? d.onConfirm?.() : d.onSubmit?.(value));
+  return div({},
+    div({ className: 'scrim' }).on({ click: () => wb.closeDialog() }),
+    div({ className: 'dialog' },
+      h3(d.title),
+      d.body ? div({ className: 'body' }, d.body) : null,
+      d.kind === 'prompt'
+        ? div({ className: 'field' },
+            d.label ? span({ $styling: { 'font-size': '12px', color: 'var(--text-dim)' } }, d.label) : null,
+            input({ className: 'input', value: d.value ?? '', placeholder: d.placeholder || '', autofocus: true })
+              .on({
+                input: (e) => { value = e.target.value; },
+                keydown: (e) => { if (e.key === 'Enter') submit(); if (e.key === 'Escape') wb.closeDialog(); },
+                $attach: (el) => queueMicrotask(() => { el.focus(); el.select(); }),
+              }),
+          )
+        : null,
+      div({ className: 'row-actions' },
+        button({ className: 'btn' }, 'Cancel').on({ click: () => wb.closeDialog() }),
+        button({ className: `btn ${d.danger ? 'danger' : 'primary'}` }, d.confirmLabel || 'OK').on({ click: submit }),
+      ),
+    ),
+  );
+}
+
+// Choose which viewer opens a file when several openers match. Reactive via the
+// workbench dialog state (updateDialog), so radio/checkbox selection survives
+// re-renders. "Remember" persists a per-file-type association in settings.
+function openerChooserDialog(d, ui) {
+  const wb = ui.platform.workbench;
+  const platform = ui.platform;
+  const selected = d.openerId || d.current || d.openers[0]?.id;
+  const remember = !!d.remember;
+  const confirm = () => {
+    if (remember && selected) rememberOpener(platform, typeKeyFor(d.node), selected);
+    wb.closeDialog();
+    wb.openFile(d.node, selected, { reset: !!d.reset });
+  };
+  return div({},
+    div({ className: 'scrim' }).on({ click: () => wb.closeDialog() }),
+    div({ className: 'dialog opener-chooser' },
+      h3(`Open “${d.node.name}” with…`),
+      div({ className: 'opener-list' },
+        ...d.openers.map((o) =>
+          label({ className: `opener-opt ${o.id === selected ? 'sel' : ''}` },
+            input({ type: 'radio', name: 'opener-choice', checked: o.id === selected })
+              .on({ change: () => wb.updateDialog({ openerId: o.id }) }),
+            icon(o.icon || iconForNode(d.node), { size: 18 }),
+            div({ className: 'oo-main' },
+              span({ className: 'oo-title' }, o.title || o.id),
+              span({ className: 'oo-src' }, openerSource(platform, o)),
+            ),
+          ).on({ click: () => wb.updateDialog({ openerId: o.id }) }),
+        ),
+      ),
+      label({ className: 'opener-remember' },
+        input({ type: 'checkbox', checked: remember }).on({ change: (e) => wb.updateDialog({ remember: e.target.checked }) }),
+        span(`Always use this for ${typeLabelFor(d.node)}`),
+      ),
+      div({ className: 'row-actions' },
+        button({ className: 'btn' }, 'Cancel').on({ click: () => wb.closeDialog() }),
+        button({ className: 'btn primary' }, 'Open').on({ click: confirm }),
+      ),
+    ),
+  );
+}
+
+// A collection is a backing-store config. This form collects the driver + its
+// fields (filesystem path, or S3 bucket/prefix/keys) so a user with the create
+// capability can provision a new collection dynamically. The form persists
+// across re-renders (keyed to the dialog instance) so switching driver keeps it.
+let colState = { ref: null, form: null };
+function collectionDialog(d, ui) {
+  const wb = ui.platform.workbench;
+  if (colState.ref !== d) {
+    colState = { ref: d, form: { name: '', description: '', driver: 'filesystem', root: '', bucket: '', prefix: '', region: 'auto', endpoint: '', accessKeyId: '', secretAccessKey: '' } };
+  }
+  const form = colState.form;
+  const set = (k) => (e) => { form[k] = e.target.value; if (k === 'driver') ui.rerender?.(); };
+  const submit = () => {
+    const store = { driver: form.driver };
+    if (form.driver === 'filesystem') store.root = form.root;
+    if (form.driver === 's3') {
+      store.s3 = { bucket: form.bucket, region: form.region, endpoint: form.endpoint || undefined, accessKeyId: form.accessKeyId, secretAccessKey: form.secretAccessKey, forcePathStyle: !!form.endpoint };
+      if (form.prefix) store.prefix = form.prefix;
+    }
+    if (form.driver === 'filesystem' && form.prefix) store.prefix = form.prefix;
+    d.onSubmit?.({ name: form.name, description: form.description, store });
+  };
+  const field = (lbl, k, ph = '') => div({ className: 'field', $styling: { 'margin-bottom': '10px' } },
+    label(lbl), input({ className: 'input', placeholder: ph }).on({ input: set(k) }));
+  return div({},
+    div({ className: 'scrim' }).on({ click: () => wb.closeDialog() }),
+    div({ className: 'dialog', $styling: { width: 'min(480px, 94vw)' } },
+      h3('New collection'),
+      div({ className: 'body' }, 'A collection is a backing store you own. Configure where its files live.'),
+      field('Name', 'name', 'Team Vault'),
+      div({ className: 'field', $styling: { 'margin-bottom': '10px' } },
+        label('Backing store'),
+        select({ className: 'input' },
+          option({ value: 'filesystem', selected: form.driver === 'filesystem' }, 'Filesystem / NAS'),
+          option({ value: 's3', selected: form.driver === 's3' }, 'S3-compatible (S3 · R2 · MinIO)'),
+          option({ value: 'memory', selected: form.driver === 'memory' }, 'Memory (ephemeral)'),
+        ).on({ change: set('driver') })),
+      storeFields(form, set),
+      div({ className: 'row-actions' },
+        button({ className: 'btn' }, 'Cancel').on({ click: () => wb.closeDialog() }),
+        button({ className: 'btn primary' }, 'Create collection').on({ click: submit }),
+      ),
+    ),
+  );
+}
+function storeFields(form, set) {
+  const f = (lbl, k, ph = '', type = 'text') => div({ className: 'field', $styling: { 'margin-bottom': '10px' } },
+    label(lbl), input({ className: 'input', placeholder: ph, type, autocomplete: 'off' }).on({ input: set(k) }));
+  if (form.driver === 'filesystem') return div({}, f('Root directory', 'root', './data/team'), f('Prefix (optional)', 'prefix'));
+  if (form.driver === 's3') {
+    return div({},
+      f('Bucket', 'bucket', 'my-bucket'),
+      f('Prefix (optional)', 'prefix', 'team-a/'),
+      f('Region', 'region', 'auto'),
+      f('Endpoint (R2/MinIO; blank for AWS)', 'endpoint', 'https://<acct>.r2.cloudflarestorage.com'),
+      f('Access key id', 'accessKeyId'),
+      f('Secret access key', 'secretAccessKey', '', 'password'),
+    );
+  }
+  return div({ className: 'body', $styling: { 'font-size': '12px' } }, 'Ephemeral — data is lost on restart. Good for testing.');
+}
+
+// ---- Context menu ----------------------------------------------------------
+export function contextMenu(state, ui) {
+  const m = state.overlay.contextMenu;
+  if (!m || !m.items?.length) return null;
+  const wb = ui.platform.workbench;
+  // Clamp on both edges. Anchoring a menu ABOVE its trigger (the status bar opens
+  // upward) produces a negative top, and only the far edge used to be clamped.
+  // The height is whatever the menu needs OR whatever the window allows, whichever is
+  // smaller — past that the menu scrolls (see `.menu`), so pushing it further up buys
+  // nothing and would just leave a gap at the bottom.
+  const wanted = Math.min(m.items.length * 34 + 20, window.innerHeight - 24);
+  const x = Math.max(8, Math.min(m.x, window.innerWidth - 220));
+  const y = Math.max(8, Math.min(m.y, window.innerHeight - wanted));
+  return div({},
+    div({ className: 'scrim', $styling: { background: 'transparent' } }).on({ click: () => wb.closeContextMenu(), contextmenu: (e) => { e.preventDefault(); wb.closeContextMenu(); } }),
+    div({ className: 'menu', $styling: { left: x + 'px', top: y + 'px' } },
+      ...m.items.map((it, i) =>
+        it.sep
+          ? div({ className: 'sep' })
+          // A real <button>, not a click-handling div: menu entries were unreachable by
+          // keyboard and invisible to the TV shell's spatial navigation, which only
+          // considers focusable elements.
+          : button({ className: `mi ${it.danger ? 'danger' : ''}`, autofocus: i === 0 },
+              it.icon ? icon(it.icon, { size: 15 }) : null,
+              span(it.label),
+              it.kbd ? span({ className: 'kbd' }, it.kbd) : null,
+            ).on({
+              click: () => { wb.closeContextMenu(); it.run?.(); },
+              // The first item is focused on open, so Escape has to get you back out.
+              keydown: (e) => { if (e.key === 'Escape') { e.preventDefault(); wb.closeContextMenu(); } },
+              $attach: (el) => { if (i === 0) queueMicrotask(() => el.focus()); },
+            }),
+      ),
+    ),
+  );
+}
+
+// ---- Toasts ----------------------------------------------------------------
+export function toasts(state, ui) {
+  const list = state.notif || [];
+  if (!list.length) return null;
+  return div({ className: 'toasts' },
+    ...list.slice(-5).map((n) =>
+      div({ className: `toast ${n.level}` },
+        div({ className: 'bar' }),
+        div({ className: 'msg' }, n.message),
+        button({ className: 'x' }, icon('close', { size: 14 })).on({ click: () => ui.platform.notifications.dismiss(n.id) }),
+      ).key(n.id),
+    ),
+  );
+}
+
+// ---- Transfer tray ---------------------------------------------------------
+export function transferTray(state, ui) {
+  const items = state.tr.items;
+  if (!items.length) return null;
+  return div({ className: 'tray' },
+    div({ className: 'head' },
+      icon('upload', { size: 14 }),
+      span({ $styling: { 'margin-left': '6px' } }, 'Transfers'),
+      div({ className: 'actions' },
+        button({ className: 'iconbtn', title: 'Clear finished' }, icon('check', { size: 14 }))
+          .on({ click: () => ui.app.transfers.clearDone() }),
+      ),
+    ),
+    div({ className: 'items' },
+      ...items.map((t) =>
+        div({ className: `xfer ${t.status}` },
+          div({ className: 'top' },
+            icon(t.status === 'error' ? 'warn' : t.status === 'done' ? 'check' : 'upload', { size: 14 }),
+            span({ className: 'name' }, t.name),
+            t.status === 'active'
+              ? button({ className: 'iconbtn', title: 'Cancel' }, icon('close', { size: 13 })).on({ click: () => ui.app.transfers.cancel(t.id) })
+              : span({ className: 'pct' }, t.status === 'done' ? bytes(t.total) : t.status),
+          ),
+          t.status === 'active'
+            ? div({ className: 'progress' }, div({ $styling: { width: `${Math.round(t.ratio * 100)}%` } }))
+            : t.error ? div({ $styling: { 'font-size': '11px', color: 'var(--danger)', 'margin-top': '4px' } }, t.error) : null,
+          t.status === 'active' ? div({ className: 'pct', $styling: { 'margin-top': '4px' } }, `${bytes(t.loaded)} / ${bytes(t.total)}`) : null,
+        ).key(t.id),
+      ),
+    ),
+  );
+}
+
+// ---- Plugin popup panel ----------------------------------------------------
+export function pluginPanel(state, ui) {
+  const pid = state.overlay.pluginPanel;
+  if (!pid) return null;
+  const plugin = (state.plugins || []).find((p) => p.id === pid);
+  return div({ className: 'plugin-panel', $styling: { width: '380px' } },
+    div({ className: 'head' },
+      icon('plug', { size: 14 }),
+      span(plugin?.name || pid),
+      button({ className: 'iconbtn x' }, icon('close', { size: 14 })).on({ click: () => ui.platform.workbench.closePluginPanel() }),
+    ),
+    // The host mounts the plugin's iframe into this element on attach.
+    div({ className: 'host' }).on({
+      $attach: (el) => {
+        el._detach = ui.platform.plugins.mountPanel(pid, el, { width: 380, height: 460 });
+      },
+      $detach: (el) => el._detach?.(),
+    }),
+  );
+}

package/packages/web/src/ui/components/phoneChrome.js

@@ -0,0 +1,188 @@
+// The phone shell: a thin top bar, a bottom tab bar, and two sheets.
+//
+// A left rail costs 52px of a 390px-wide screen and a status bar costs a row of chrome
+// that is unreadable at that size anyway — on a phone both are worse than useless. So
+// the rail's destinations become bottom tabs (thumb-reachable, which the top of the
+// screen is not), everything past the first few becomes one "More" sheet, and the whole
+// status bar folds behind a single icon in the top bar.
+//
+// The icon is not decoration: it changes to say what is happening. Work running shows a
+// spinner, a standing problem shows a badge, and neither is something the user has to go
+// looking for. Everything else — item counts, free space, backend — is a tap away rather
+// than permanently on screen, because on a phone it is reference material, not status.
+
+import { dd } from '../../runtime.js';
+import { icon } from '../icon.js';
+import { bytes } from '../format.js';
+import { statusFacts, usageChip } from './statusBar.js';
+
+const { div, button, span, img } = dd;
+
+// The tabs that earn a permanent slot. Everything else lives in More — a bottom bar with
+// six items is a bottom bar nobody can hit.
+const TABS = [
+  { id: 'home', icon: 'search', label: 'Files', command: 'workbench.view.home' },
+  { id: 'upload', icon: 'upload', label: 'Upload', command: 'explorer.upload' },
+  { id: 'plugins', icon: 'plug', label: 'Plugins', command: 'workbench.view.plugins' },
+];
+
+/** Which single glyph best describes the drive's state right now. */
+function statusGlyph(f) {
+  if (!f.off.online) return { icon: 'info', tone: 'warn', label: 'Offline' };
+  if (f.issues.length) return { icon: 'warn', tone: 'danger', label: `${f.issues.length} need attention`, badge: f.issues.length };
+  if (f.running.length || f.uploading.length || f.off.syncing) return { spinner: true, tone: '', label: 'Working…' };
+  if (f.usage?.total && f.usage.available / f.usage.total < 0.1) return { icon: 'info', tone: 'warn', label: 'Low on space' };
+  return { icon: 'info', tone: '', label: 'Status' };
+}
+
+export function phoneTopBar(state, ui) {
+  const f = statusFacts(state, ui);
+  const g = statusGlyph(f);
+  // Where you are, at the coarsest level. Deliberately NOT the open file's name: the
+  // viewer's own breadcrumb sits directly beneath this bar and already says that, and two
+  // rows of chrome repeating "notes.txt" costs a fifth of the screen to say it twice.
+  const title = state.wb.activity === 'settings' ? 'Settings'
+    : state.wb.activity === 'plugins' ? 'Plugins'
+      : f.collectionId;
+  return div({ className: 'phonebar top' },
+    button({ className: 'pb-brand', title: 'Trove — home' }, img({ src: '/icon.svg', alt: 'Trove' }))
+      .on({ click: () => ui.exec('workbench.view.home') }),
+    div({ className: 'pb-title' }, title),
+    button({ className: `pb-status ${g.tone}`, title: g.label, $attrs: { 'aria-label': g.label } },
+      g.spinner
+        ? div({ className: 'spinner', $styling: { width: '15px', height: '15px' } })
+        : icon(g.icon, { size: 18 }),
+      g.badge ? span({ className: 'pb-badge' }, String(g.badge > 9 ? '9+' : g.badge)) : null,
+    ).on({ click: () => ui.platform.workbench.openSheet('status') }),
+  );
+}
+
+export function phoneBottomBar(state, ui) {
+  const active = state.wb.activity;
+  const sheet = state.wb.sheet;
+  const unread = state.so.notifications.unread;
+  return div({ className: 'phonebar bottom' },
+    ...TABS.map((t) => button({
+      className: `pb-tab ${!sheet && active === t.id ? 'active' : ''}`,
+      $attrs: { 'aria-label': t.label },
+    }, icon(t.icon, { size: 21 }), span({ className: 'pb-label' }, t.label))
+      .on({ click: () => { ui.platform.workbench.closeSheet(); ui.exec(t.command); } })),
+    // Settings is reached FROM the More sheet, so while you are in it "More" is where
+    // you are — otherwise all four tabs read as inactive and the bar claims you are
+    // nowhere.
+    button({
+      className: `pb-tab ${sheet === 'more' || (!sheet && !TABS.some((t) => t.id === active)) ? 'active' : ''}`,
+      $attrs: { 'aria-label': 'More' },
+    },
+      icon('dots', { size: 21 }),
+      unread ? span({ className: 'pb-badge' }, String(unread > 9 ? '9+' : unread)) : null,
+      span({ className: 'pb-label' }, 'More'),
+    ).on({ click: () => ui.platform.workbench.openSheet('more') }),
+  );
+}
+
+/** A row in a sheet: an icon, a label, and either a value or a chevron. */
+function sheetRow({ icon: name, label, value, danger, onClick }) {
+  const body = [
+    icon(name, { size: 18 }),
+    span({ className: 'sr-label' }, label),
+    value != null ? span({ className: 'sr-value' }, value) : null,
+    onClick ? icon('chevron-right', { size: 16, className: 'sr-go' }) : null,
+  ];
+  return onClick
+    ? button({ className: `sheet-row ${danger ? 'danger' : ''}` }, ...body).on({ click: onClick })
+    : div({ className: 'sheet-row static' }, ...body);
+}
+
+export function phoneSheet(state, ui) {
+  const which = state.wb.sheet;
+  if (!which) return null;
+  const wb = ui.platform.workbench;
+  return div({ className: 'sheet-wrap' },
+    div({ className: 'scrim' }).on({ click: () => wb.closeSheet() }),
+    div({ className: 'sheet' },
+      div({ className: 'sheet-grip' }).on({ click: () => wb.closeSheet() }),
+      which === 'status' ? statusSheet(state, ui) : moreSheet(state, ui),
+    ),
+  );
+}
+
+function statusSheet(state, ui) {
+  const f = statusFacts(state, ui);
+  const wb = ui.platform.workbench;
+  const go = (cmd) => () => { wb.closeSheet(); ui.exec(cmd); };
+  return div({ className: 'sheet-body' },
+    div({ className: 'sheet-title' }, f.collectionId),
+
+    // Problems and running work first: they are the reason someone opened this.
+    f.issues.length
+      ? sheetRow({
+        icon: 'warn', danger: true,
+        label: `${f.issues.length} need${f.issues.length === 1 ? 's' : ''} attention`,
+        onClick: () => { wb.closeSheet(); ui.app.activity.togglePanel(true); },
+      })
+      : null,
+    f.running.length || f.uploading.length
+      ? sheetRow({
+        icon: 'refresh',
+        label: `${f.running.length + f.uploading.length} running`,
+        onClick: () => { wb.closeSheet(); ui.app.activity.togglePanel(true); },
+      })
+      : null,
+    !f.off.online ? sheetRow({ icon: 'info', label: 'Offline', value: `${f.off.pins.length} pinned` }) : null,
+    f.off.queued ? sheetRow({ icon: 'upload', label: 'Waiting to sync', value: String(f.off.queued) }) : null,
+
+    sheetRow({
+      icon: 'files',
+      label: 'Items',
+      value: f.partial
+        ? `${f.shown.toLocaleString()} of ${f.totalKnown ? f.totalItems.toLocaleString() : 'more'}`
+        : f.totalItems.toLocaleString(),
+    }),
+    // `+` where the figure covers only what has loaded, matching the desktop bar.
+    sheetRow({ icon: 'file', label: 'Size', value: `${bytes(f.totalBytes)}${f.totalKnown || !f.partial ? '' : '+'}` }),
+    // Only where the backend can actually answer — see usageChip.
+    f.usage?.total
+      ? div({ className: 'sheet-row static usage' },
+        icon('download', { size: 18 }),
+        span({ className: 'sr-label' }, 'Free space'),
+        usageChip({ usage: f.usage }))
+      : null,
+    f.caps ? sheetRow({
+      icon: f.caps.storage?.presignDownload ? 'download' : 'files',
+      label: 'Transfers',
+      value: f.caps.storage?.presignDownload ? 'Direct to storage' : 'Through the server',
+    }) : null,
+    f.caps?.features?.semanticSearch ? sheetRow({ icon: 'star', label: 'Search', value: 'Semantic + keyword' }) : null,
+
+    div({ className: 'sheet-actions' },
+      button({ className: 'btn small ghost' }, icon('refresh', { size: 13 }), span('Scan for changes')).on({ click: go('workbench.scanCollection') }),
+      button({ className: 'btn small ghost' }, icon('refresh', { size: 13 }), span('Activity'))
+        .on({ click: () => { ui.platform.workbench.closeSheet(); ui.app.activity.togglePanel(true); } }),
+    ),
+  );
+}
+
+function moreSheet(state, ui) {
+  const wb = ui.platform.workbench;
+  const go = (cmd) => () => { wb.closeSheet(); ui.exec(cmd); };
+  const me = state.so.me;
+  const unread = state.so.notifications.unread;
+  return div({ className: 'sheet-body' },
+    // No identity, no profile row — the same rule the desktop rail follows. An anonymous
+    // deployment has no account to show and nothing to sign into.
+    me && !me.anonymous
+      ? div({ className: 'sheet-me' },
+        me.picture ? img({ src: me.picture, alt: '', className: 'avatar-img' }) : span({ className: 'avatar-txt' }, (me.name || me.id || '?')[0].toUpperCase()),
+        div({}, div({ className: 'sm-name' }, me.name || me.id), me.email ? div({ className: 'sm-sub' }, me.email) : null))
+      : null,
+
+    sheetRow({ icon: 'bell', label: unread ? `Notifications (${unread})` : 'Notifications', onClick: () => { wb.closeSheet(); ui.app.social.toggleInbox(true); } }),
+    sheetRow({ icon: 'refresh', label: 'Activity & problems', onClick: () => { wb.closeSheet(); ui.app.activity.togglePanel(true); } }),
+    sheetRow({ icon: 'info', label: 'Details & conversation', onClick: go('workbench.toggleInfoPanel') }),
+    sheetRow({ icon: 'trash', label: 'Trash', onClick: go('explorer.showTrash') }),
+    sheetRow({ icon: 'refresh', label: 'Refresh', onClick: go('explorer.refresh') }),
+    sheetRow({ icon: 'command', label: 'All commands', onClick: go('workbench.showCommandPalette') }),
+    sheetRow({ icon: 'gear', label: 'Settings', onClick: go('workbench.openSettings') }),
+  );
+}