flexdesk 0.3.0 → 0.4.1

package/README.md

@@ -104,6 +104,41 @@ const shell = await createShell({
 A working version of exactly this — planets and moons, a mock host, no backend —
 lives in `demo/`.
 
+### Opt-in shell features
+
+These change what the user sees, so all of them are off until you ask:
+
+```js
+await createShell({
+    // …everything above…
+    snapPromotion: true,     // drag a floating window onto a tile: it snaps, and docks back in
+    promoteInPlace: true,    // a window floated out of a tile stays inside that tile's pane
+    backToOpenList: true,    // Back in a record opened beside its list closes onto that list
+    chrome: {
+        topNav: document.getElementById('nav'),
+        zoom:   document.getElementById('status-bar'),   // content zoom, 50–200%
+    },
+});
+```
+
+**`chrome.zoom`** paints a − / track / + / readout control into the element you
+pass, restores the saved zoom through the host's `state` capability, and scales
+the content of tiles and floating windows. It deliberately scales *content only*
+— never the root, a tile's frame or a window's frame — because CSS `zoom`
+establishes a scaled coordinate space and every window drag, resize and snap
+measures in real pixels. `shell.chrome.zoom` exposes `get()` and `set(percent)`
+for a settings pane. An embedder that builds its own `WindowManager` instead of
+calling `createShell` mounts the same control with `mountZoomControl(el, { root,
+host })`.
+
+**`backToOpenList`** is for apps that open a record from a list in a new tab.
+Without it, Back in that record has no history to pop, so it walks the taxonomy
+up and rewrites the record into its parent, and the tile now shows the list
+twice. With it, Back closes the record tab and activates the list it came from:
+the nearest tab to the left, else to the right, that is not a record (no
+`props.id`) and belongs to the same top-nav section. Per-tab history still comes
+first, and a record with no such list beside it still walks up in place.
+
 ## The host port
 
 FlexDesk never touches `pywebview`, `fetch`, `localStorage` or the filesystem. It

package/css/base.css

@@ -4740,3 +4740,71 @@ button.twm-about-dialog__btn--close:focus {
  * `position: fixed` descendants, which would clip every dropdown the grid opens
  * on purpose. */
 .twm-root { position: relative; }
+
+/* ── C31. Content zoom ─────────────────────────────────────────────
+   Applied by zoom.js as `--twm-zoom` plus `.twm-zoomed` on the shell
+   ROOT. The class is only set away from 100%, so an unzoomed shell has
+   no `zoom` declaration anywhere: `zoom: 1` is not a no-op, it still
+   establishes a scaled coordinate space.
+
+   CONTENT SURFACES ONLY. A tile's body and a promoted window's content
+   sit below every piece of geometry the window drag, resize and C15
+   snap probe read. The root, a leaf wrap, tile chrome, tab bars and a
+   window frame are deliberately absent: a contained window lives in a
+   leaf wrap and is re-parented to the root while it is dragged, so
+   zooming either would drift every drag by the zoom factor. See zoom.js. */
+.twm-zoomed .twm-leaf__body,
+.twm-zoomed .twm-window-content { zoom: var(--twm-zoom, 1); }
+
+/* The control. Sized against the bar it sits in, not the zoom — it is
+   chrome, and it is the one thing that must stay reachable at 200%. */
+.twm-zoom {
+    display: inline-flex;
+    align-items: center;
+    gap: 3px;
+    height: 100%;
+    padding: 0 8px;
+    border-left: 1px solid var(--surface-3);
+    user-select: none;
+}
+.twm-zoom__step {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 15px;
+    height: 15px;
+    padding: 0;
+    border: none;
+    border-radius: 2px;
+    background: none;
+    color: var(--text-muted);
+    font: inherit;
+    font-size: var(--font-size-sm);
+    line-height: 1;
+    cursor: pointer;
+}
+.twm-zoom__step:hover { background: var(--surface-3); color: var(--text-primary); }
+/* A short track on purpose: it sits between two buttons in a thin bar,
+   and the readout — not the thumb position — answers "where am I". */
+.twm-zoom__slider {
+    width: 78px;
+    height: 12px;
+    margin: 0;
+    cursor: pointer;
+    accent-color: var(--accent-bright);
+}
+/* Tabular numerals, so the readout does not jiggle between 95% and 100%
+   while the thumb moves. */
+.twm-zoom__value {
+    min-width: 34px;
+    padding: 0;
+    border: none;
+    background: none;
+    color: var(--text-muted);
+    font-family: var(--font-family-mono);
+    font-size: var(--font-size-xs);
+    font-variant-numeric: tabular-nums;
+    text-align: right;
+    cursor: pointer;
+}
+.twm-zoom__value:hover { color: var(--text-primary); }

package/css/flexdesk.css

@@ -7088,3 +7088,71 @@ tr:hover .twm-row-action { opacity: 1; }
 .twm-top-nav__label {
     /* hidden on narrow viewports; icon alone is enough */
 }
+
+/* ── C31. Content zoom ─────────────────────────────────────────────
+   Applied by zoom.js as `--twm-zoom` plus `.twm-zoomed` on the shell
+   ROOT. The class is only set away from 100%, so an unzoomed shell has
+   no `zoom` declaration anywhere: `zoom: 1` is not a no-op, it still
+   establishes a scaled coordinate space.
+
+   CONTENT SURFACES ONLY. A tile's body and a promoted window's content
+   sit below every piece of geometry the window drag, resize and C15
+   snap probe read. The root, a leaf wrap, tile chrome, tab bars and a
+   window frame are deliberately absent: a contained window lives in a
+   leaf wrap and is re-parented to the root while it is dragged, so
+   zooming either would drift every drag by the zoom factor. See zoom.js. */
+.twm-zoomed .twm-leaf__body,
+.twm-zoomed .twm-window-content { zoom: var(--twm-zoom, 1); }
+
+/* The control. Sized against the bar it sits in, not the zoom — it is
+   chrome, and it is the one thing that must stay reachable at 200%. */
+.twm-zoom {
+    display: inline-flex;
+    align-items: center;
+    gap: 3px;
+    height: 100%;
+    padding: 0 8px;
+    border-left: 1px solid var(--surface-3);
+    user-select: none;
+}
+.twm-zoom__step {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 15px;
+    height: 15px;
+    padding: 0;
+    border: none;
+    border-radius: 2px;
+    background: none;
+    color: var(--text-muted);
+    font: inherit;
+    font-size: var(--font-size-sm);
+    line-height: 1;
+    cursor: pointer;
+}
+.twm-zoom__step:hover { background: var(--surface-3); color: var(--text-primary); }
+/* A short track on purpose: it sits between two buttons in a thin bar,
+   and the readout — not the thumb position — answers "where am I". */
+.twm-zoom__slider {
+    width: 78px;
+    height: 12px;
+    margin: 0;
+    cursor: pointer;
+    accent-color: var(--accent-bright);
+}
+/* Tabular numerals, so the readout does not jiggle between 95% and 100%
+   while the thumb moves. */
+.twm-zoom__value {
+    min-width: 34px;
+    padding: 0;
+    border: none;
+    background: none;
+    color: var(--text-muted);
+    font-family: var(--font-family-mono);
+    font-size: var(--font-size-xs);
+    font-variant-numeric: tabular-nums;
+    text-align: right;
+    cursor: pointer;
+}
+.twm-zoom__value:hover { color: var(--text-primary); }

package/dist/flexdesk.css

@@ -7088,3 +7088,71 @@ tr:hover .twm-row-action { opacity: 1; }
 .twm-top-nav__label {
     /* hidden on narrow viewports; icon alone is enough */
 }
+
+/* ── C31. Content zoom ─────────────────────────────────────────────
+   Applied by zoom.js as `--twm-zoom` plus `.twm-zoomed` on the shell
+   ROOT. The class is only set away from 100%, so an unzoomed shell has
+   no `zoom` declaration anywhere: `zoom: 1` is not a no-op, it still
+   establishes a scaled coordinate space.
+
+   CONTENT SURFACES ONLY. A tile's body and a promoted window's content
+   sit below every piece of geometry the window drag, resize and C15
+   snap probe read. The root, a leaf wrap, tile chrome, tab bars and a
+   window frame are deliberately absent: a contained window lives in a
+   leaf wrap and is re-parented to the root while it is dragged, so
+   zooming either would drift every drag by the zoom factor. See zoom.js. */
+.twm-zoomed .twm-leaf__body,
+.twm-zoomed .twm-window-content { zoom: var(--twm-zoom, 1); }
+
+/* The control. Sized against the bar it sits in, not the zoom — it is
+   chrome, and it is the one thing that must stay reachable at 200%. */
+.twm-zoom {
+    display: inline-flex;
+    align-items: center;
+    gap: 3px;
+    height: 100%;
+    padding: 0 8px;
+    border-left: 1px solid var(--surface-3);
+    user-select: none;
+}
+.twm-zoom__step {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 15px;
+    height: 15px;
+    padding: 0;
+    border: none;
+    border-radius: 2px;
+    background: none;
+    color: var(--text-muted);
+    font: inherit;
+    font-size: var(--font-size-sm);
+    line-height: 1;
+    cursor: pointer;
+}
+.twm-zoom__step:hover { background: var(--surface-3); color: var(--text-primary); }
+/* A short track on purpose: it sits between two buttons in a thin bar,
+   and the readout — not the thumb position — answers "where am I". */
+.twm-zoom__slider {
+    width: 78px;
+    height: 12px;
+    margin: 0;
+    cursor: pointer;
+    accent-color: var(--accent-bright);
+}
+/* Tabular numerals, so the readout does not jiggle between 95% and 100%
+   while the thumb moves. */
+.twm-zoom__value {
+    min-width: 34px;
+    padding: 0;
+    border: none;
+    background: none;
+    color: var(--text-muted);
+    font-family: var(--font-family-mono);
+    font-size: var(--font-size-xs);
+    font-variant-numeric: tabular-nums;
+    text-align: right;
+    cursor: pointer;
+}
+.twm-zoom__value:hover { color: var(--text-primary); }

package/dist/wm.js

@@ -588,7 +588,7 @@ var TileTree = class _TileTree {
         0,
         Math.min(n.tabs.length - 1, saved.activeTabIdx || 0)
       );
-      const wantsTarget = target.props?.id != null || target.kind !== targetTopNav;
+      const wantsTarget = target.props?.id != null || target.kind !== targetTopNav || Object.keys(target.props || {}).length > 0;
       if (wantsTarget) {
         const wantId = target.props?.id != null;
         const matchIdx = n.tabs.findIndex((t) => t.kind === target.kind && (!wantId || String(t.props?.id ?? "") === String(target.props.id)));
@@ -757,9 +757,11 @@ var TileTree = class _TileTree {
     };
     n.tabs = Array.isArray(n.tabs) ? n.tabs : [];
     n.tabs.push(tab);
-    n.activeTabIdx = n.tabs.length - 1;
-    _syncActiveTab(n);
-    return n.activeTabIdx;
+    if (!opts.background) {
+      n.activeTabIdx = n.tabs.length - 1;
+      _syncActiveTab(n);
+    }
+    return n.tabs.length - 1;
   }
   /** Switch the active tab on a leaf. No-op if `idx` is out of range. */
   setActiveLeafTab(leafId, idx) {
@@ -3976,7 +3978,8 @@ var WindowManager = class _WindowManager {
     panelDefaults = null,
     snapPromotion = false,
     promoteInPlace = false,
-    tabLayout = null
+    tabLayout = null,
+    backToOpenList = false
   }) {
     if (!taxonomy) throw new Error("WindowManager: a taxonomy is required");
     if (!content || typeof content.mount !== "function") {
@@ -4002,6 +4005,7 @@ var WindowManager = class _WindowManager {
     this.panelDefaults = panelDefaults || null;
     this.snapPromotion = !!snapPromotion;
     this.promoteInPlace = !!promoteInPlace;
+    this.backToOpenList = !!backToOpenList;
     this._snapCtl = null;
     this.desktops = new DesktopManager({
       seed: this._rootLeaf,
@@ -4184,6 +4188,7 @@ var WindowManager = class _WindowManager {
       this._notifyChange("navigate-back");
       return;
     }
+    if (this.backToOpenList && this._backToOpenList(id)) return;
     const leaf = tree.get(id);
     if (!leaf?.content) return;
     const { kind, props } = leaf.content;
@@ -4228,6 +4233,64 @@ var WindowManager = class _WindowManager {
   /** Navigate inside the current tab — preserves every other tab in
    *  the leaf. Used by Backspace + breadcrumb segments + anything
    *  else that should walk WITHIN the tile rather than reset it. */
+  /**
+   * C32. BACK FROM AN OPENED RECORD RETURNS TO THE LIST, IT DOES NOT MAKE ONE.
+   *
+   * The gesture this is for: a list tab, a record opened from it into a NEW
+   * tab, and Backspace in that record. With nothing left in the record tab's
+   * own history, step (3) of `navigateBack` walks the taxonomy up and REWRITES
+   * the record tab into its parent — so the tile ends up showing the list
+   * twice, once in the tab you started from and once in the tab you just left.
+   * The user's model is a browser's: you came from the list, the list is still
+   * open, so going back means closing this and being on the list again.
+   *
+   * So: when the active tab is an ENTITY — its props carry an `id`, the same
+   * test `swapToPage` uses for "the caller asked for a specific entity" — look
+   * for an open tab of the SAME section that is NOT one. That is the list or
+   * landing page the record belongs to. Close the record and activate it.
+   *
+   * NEAREST TO THE LEFT FIRST. New tabs are appended at the end, so the tab a
+   * record was opened from sits to its left; when several lists of the section
+   * are open, the nearest one on that side is the one it most plausibly came
+   * from. The right side is searched only after the left has nothing.
+   *
+   * DECLINES, and leaves step (3) to walk up in place, whenever there is no
+   * such tab: a record that is the tile's only tab, or one whose section has no
+   * list open. That keeps the one guarantee the whole rule exists for — Back
+   * never leaves two copies of a list — without ever closing a record into a
+   * tile that has nothing of its own to show.
+   *
+   * Matching is by SECTION (`topNavFor`) and not by kind, because the list a
+   * record was opened from is often not the record's taxonomy parent: a root
+   * landing page that renders the section, or a list that a flattened taxonomy
+   * files beside the record rather than above it.
+   *
+   * @returns {boolean} whether it closed a tab
+   */
+  _backToOpenList(leafId) {
+    const tree = this._tree();
+    const leaf = tree.get(leafId);
+    if (!leaf || leaf.kind !== "leaf") return false;
+    const tabs = Array.isArray(leaf.tabs) ? leaf.tabs : [];
+    if (tabs.length < 2) return false;
+    const activeIdx = Math.max(0, Math.min(tabs.length - 1, leaf.activeTabIdx || 0));
+    const active = tabs[activeIdx];
+    if (!_isEntityTab(active)) return false;
+    const section = this.taxonomy.topNavFor(active.kind);
+    if (!section) return false;
+    const isList = (t) => t && !_isEntityTab(t) && this.taxonomy.topNavFor(t.kind) === section;
+    let target = -1;
+    for (let i = activeIdx - 1; i >= 0 && target < 0; i--) if (isList(tabs[i])) target = i;
+    for (let i = activeIdx + 1; i < tabs.length && target < 0; i++) if (isList(tabs[i])) target = i;
+    if (target < 0) return false;
+    tree.removeLeafTab(leafId, activeIdx);
+    tree.setActiveLeafTab(leafId, target > activeIdx ? target - 1 : target);
+    tree.focus(leafId);
+    this.renderer.render();
+    this._persist();
+    this._notifyChange("navigate-back-close");
+    return true;
+  }
   navigateActiveTab(leafId, kind, props = {}) {
     const tree = this._tree();
     const leaf = tree.get(leafId);
@@ -6528,6 +6591,11 @@ var WindowManager = class _WindowManager {
    *  `opts.transient` — the appended tab is not persisted/restored
    *                     (e.g. an add-row form). Only meaningful with
    *                     `newTab:true`.
+   *  `opts.background` — with `newTab`, append the tab WITHOUT switching to
+   *                     it or focusing its tile. "Open in a background tab"
+   *                     means the page you are reading stays in front;
+   *                     without it the tab arrives and takes the screen,
+   *                     which is what an ordinary click already does.
    *
    *  Back-compat: the legacy `opts.target` enum still works and maps
    *  onto the axes — 'auto'→origin, 'tab'→origin+newTab,
@@ -6538,6 +6606,7 @@ var WindowManager = class _WindowManager {
    *  `openInWindow`) stay internal; callers prefer `wm.navigate(...)`. */
   navigate(kind, props = {}, opts = {}) {
     const { ctx = null, transient = false } = opts;
+    const background = !!opts.background;
     let { dest = "main", newTab = false } = opts;
     if (opts.target != null) {
       switch (opts.target) {
@@ -6573,9 +6642,9 @@ var WindowManager = class _WindowManager {
     }
     if (dest === "window") return this._navigateWindow(kind, props);
     if (dest === "main") {
-      return newTab ? this.openInTabInPrimary(kind, props, transient) : this.openInPrimary(kind, props);
+      return newTab ? this.openInTabInPrimary(kind, props, transient, background) : this.openInPrimary(kind, props);
     }
-    return newTab ? this._navigateTab(ctx, kind, props, transient) : this._navigateAuto(ctx, kind, props);
+    return newTab ? this._navigateTab(ctx, kind, props, transient, background) : this._navigateAuto(ctx, kind, props);
   }
   _navigateAuto(ctx, kind, props) {
     if (ctx?.windowId && this._windowToLeaf.has(ctx.windowId)) {
@@ -6593,12 +6662,12 @@ var WindowManager = class _WindowManager {
     }
     this.openInPrimary(kind, props);
   }
-  _navigateTab(ctx, kind, props, transient = false) {
+  _navigateTab(ctx, kind, props, transient = false, background = false) {
     if (ctx?.windowId && this._windowToLeaf.has(ctx.windowId)) {
       this.openInWindow(ctx.windowId, kind, props);
       return;
     }
-    this.openInTabFromContext(ctx || {}, kind, props, transient);
+    this.openInTabFromContext(ctx || {}, kind, props, transient, background);
   }
   /** Spawn a fresh ManagedWindow with the requested content. No
    *  source leaf — closing the window just disposes the content. */
@@ -6719,7 +6788,7 @@ var WindowManager = class _WindowManager {
    *  Mirrors `openFromContext` (windowed / split-leaf / primary
    *  routing) but uses `appendLeafTab` so the existing content
    *  stays in place as a tab. */
-  openInTabFromContext(ctx, kind, props = {}, transient = false) {
+  openInTabFromContext(ctx, kind, props = {}, transient = false, background = false) {
     if (ctx?.windowId && this._windowToLeaf.has(ctx.windowId)) {
       this.openInWindow(ctx.windowId, kind, props);
       return;
@@ -6733,8 +6802,13 @@ var WindowManager = class _WindowManager {
       this.openInPrimary(kind, props);
       return;
     }
-    tree.appendLeafTab(leafId, { kind, props }, _tabTitle(kind, props), { transient });
-    tree.focus(leafId);
+    tree.appendLeafTab(
+      leafId,
+      { kind, props },
+      _tabTitle(kind, props),
+      { transient, background }
+    );
+    if (!background) tree.focus(leafId);
     this.renderer.render();
     this._persist();
     this._notifyChange("tab-open");
@@ -6746,15 +6820,20 @@ var WindowManager = class _WindowManager {
    *  click from outside the tile system (e.g. the bottom-panel
    *  "Add row" button, which passes no ctx) reliably lands as a sibling
    *  tab in the main tile rather than swapping its content. */
-  openInTabInPrimary(kind, props = {}, transient = false) {
+  openInTabInPrimary(kind, props = {}, transient = false, background = false) {
     const tree = this._tree();
     const leafId = tree.primaryLeafId();
     if (!leafId) {
       this._navigateWindow(kind, props);
       return;
     }
-    tree.appendLeafTab(leafId, { kind, props }, _tabTitle(kind, props), { transient });
-    tree.focus(leafId);
+    tree.appendLeafTab(
+      leafId,
+      { kind, props },
+      _tabTitle(kind, props),
+      { transient, background }
+    );
+    if (!background) tree.focus(leafId);
     this.renderer.render();
     this._persist();
     this._notifyChange("tab-open");
@@ -6825,6 +6904,9 @@ function _swapSiblings(tree, aId, bId) {
   parent.sizes[j] = size;
   return true;
 }
+function _isEntityTab(tab) {
+  return !!tab && tab.props != null && tab.props.id != null && tab.props.id !== "";
+}
 
 // src/tiling/tile_tab_menu.js
 var PAGE_SIZE = 10;
@@ -7215,6 +7297,112 @@ function _esc7(s) {
   })[c]);
 }
 
+// src/tiling/zoom.js
+var ZOOM_MIN = 50;
+var ZOOM_MAX = 200;
+var ZOOM_STEP = 5;
+var ZOOM_NUDGE = 10;
+var ZOOM_DEFAULT = 100;
+var ZOOM_STATE_KEY = "zoom";
+function clampZoom(value) {
+  if (value == null || value === "") return ZOOM_DEFAULT;
+  const n = Number(value);
+  if (!Number.isFinite(n)) return ZOOM_DEFAULT;
+  const stepped = Math.round(n / ZOOM_STEP) * ZOOM_STEP;
+  return Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, stepped));
+}
+function applyZoom(root, percent) {
+  if (!root?.style) return;
+  root.style.setProperty("--twm-zoom", String(percent / 100));
+  root.classList.toggle("twm-zoomed", percent !== ZOOM_DEFAULT);
+}
+function mountZoomControl(hostEl, { root, host = null, stateKey = ZOOM_STATE_KEY, onChange } = {}) {
+  if (!hostEl || !root) return null;
+  const doc = hostEl.ownerDocument;
+  let current = ZOOM_DEFAULT;
+  let disposed = false;
+  const el = doc.createElement("div");
+  el.className = "twm-zoom";
+  const stepButton = (label, title, delta) => {
+    const b = doc.createElement("button");
+    b.type = "button";
+    b.className = "twm-zoom__step";
+    b.textContent = label;
+    b.title = title;
+    b.setAttribute("aria-label", title);
+    b.addEventListener("click", () => commit(clampZoom(current + delta)));
+    return b;
+  };
+  const slider = doc.createElement("input");
+  slider.type = "range";
+  slider.className = "twm-zoom__slider";
+  slider.min = String(ZOOM_MIN);
+  slider.max = String(ZOOM_MAX);
+  slider.step = String(ZOOM_STEP);
+  slider.value = String(ZOOM_DEFAULT);
+  slider.title = `Zoom the workspace, ${ZOOM_MIN}\u2013${ZOOM_MAX}% \u2014 double-click to reset.`;
+  slider.setAttribute("aria-label", "Zoom the workspace");
+  slider.addEventListener("input", () => commit(clampZoom(slider.value)));
+  slider.addEventListener("dblclick", () => commit(ZOOM_DEFAULT));
+  const readout = doc.createElement("button");
+  readout.type = "button";
+  readout.className = "twm-zoom__value";
+  readout.title = `Back to ${ZOOM_DEFAULT}%`;
+  readout.addEventListener("click", () => commit(ZOOM_DEFAULT));
+  el.append(
+    stepButton("\u2212", `Zoom out ${ZOOM_NUDGE}%`, -ZOOM_NUDGE),
+    slider,
+    stepButton("+", `Zoom in ${ZOOM_NUDGE}%`, ZOOM_NUDGE),
+    readout
+  );
+  hostEl.appendChild(el);
+  const paint = (percent) => {
+    current = percent;
+    slider.value = String(percent);
+    readout.textContent = `${percent}%`;
+    applyZoom(root, percent);
+  };
+  let saveTimer = 0;
+  const persist = (percent) => {
+    const state = host?.state;
+    if (!state) return;
+    clearTimeout(saveTimer);
+    saveTimer = setTimeout(() => {
+      Promise.resolve().then(() => state.write(stateKey, percent)).catch((err) => console.warn("[zoom] save failed", err));
+    }, 400);
+  };
+  const commit = (percent) => {
+    if (disposed || percent === current) return;
+    paint(percent);
+    persist(percent);
+    try {
+      onChange?.(percent);
+    } catch (err) {
+      console.warn("[zoom] onChange threw", err);
+    }
+  };
+  paint(ZOOM_DEFAULT);
+  const ready = Promise.resolve().then(() => host?.state?.read?.(stateKey)).then((saved) => {
+    if (!disposed && saved != null) paint(clampZoom(saved));
+    return current;
+  }).catch((err) => {
+    console.warn("[zoom] load failed", err);
+    return current;
+  });
+  return {
+    el,
+    get: () => current,
+    set: (percent) => commit(clampZoom(percent)),
+    ready,
+    dispose: () => {
+      disposed = true;
+      clearTimeout(saveTimer);
+      el.remove();
+      applyZoom(root, ZOOM_DEFAULT);
+    }
+  };
+}
+
 // src/tiling/shell.js
 async function createShell({
   root,
@@ -7232,6 +7420,7 @@ async function createShell({
   panels = null,
   snapPromotion = false,
   promoteInPlace = false,
+  backToOpenList = false,
   tabLayout = null,
   chrome = {},
   // An embedder that moved its sections out of the top bar — into an icon
@@ -7271,6 +7460,7 @@ async function createShell({
     panelDefaults: panels,
     snapPromotion,
     promoteInPlace,
+    backToOpenList,
     tabLayout,
     // `ctx` is the delivery vehicle for leaf-mounted chrome: tile_renderer
     // spreads it into every content factory, which is how the breadcrumb
@@ -7302,6 +7492,8 @@ async function createShell({
   const paletteBtn = mountPaletteButton(chrome.paletteButton, palette);
   topNavEl = mountTopNav(chrome.topNav, taxonomy, wm);
   desktopsEl = mountDesktopBar(chrome.desktops, wm);
+  const zoom = mountZoomControl(chrome.zoom, { root, host });
+  if (zoom) await zoom.ready;
   toggles = bindPanelToggles(chrome.panelToggles, wm);
   eventBus?.on?.("wm:changed", syncChrome);
   await wm.load();
@@ -7318,7 +7510,10 @@ async function createShell({
       paletteButtonEl: paletteBtn,
       topNavEl,
       desktopsEl,
-      panelToggles: toggles
+      panelToggles: toggles,
+      // `get`/`set` so an embedder can drive the zoom from its own settings
+      // pane, or read it, without reaching into the control's DOM.
+      zoom
     }),
     // A shell that can be built can be built TWICE — an embedder that
     // rebuilds on a context change (a different project, a different
@@ -7343,6 +7538,10 @@ async function createShell({
       } catch (err) {
         log.warn?.("renderer teardown", err);
       }
+      try {
+        zoom?.dispose();
+      } catch {
+      }
     }
   });
 }
@@ -7640,10 +7839,18 @@ export {
   TileRenderer,
   TileTree,
   WindowManager,
+  ZOOM_DEFAULT,
+  ZOOM_MAX,
+  ZOOM_MIN,
+  ZOOM_NUDGE,
+  ZOOM_STATE_KEY,
+  ZOOM_STEP,
   actionsCellRenderer,
+  applyZoom,
   attachLandingKeyboardNav,
   attachLandingShell,
   attachLandingTableBehavior,
+  clampZoom,
   createCommandPalette,
   createContentRegistry,
   createEntityCatalog,
@@ -7661,6 +7868,7 @@ export {
   mountLandingShell,
   mountNavPanel,
   mountTileBreadcrumb,
+  mountZoomControl,
   openTileTabMenu,
   openTileTabSwitcher,
   registerPanelKeys,