flexdesk 0.3.0 → 0.4.0

package/README.md

@@ -104,6 +104,32 @@ 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
+
+Two features change what the user sees, so both 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
+    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 })`.
+
 ## 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) {
@@ -6528,6 +6530,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 +6545,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 +6581,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 +6601,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 +6727,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 +6741,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 +6759,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");
@@ -7215,6 +7233,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,
@@ -7302,6 +7426,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 +7444,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 +7472,10 @@ async function createShell({
       } catch (err) {
         log.warn?.("renderer teardown", err);
       }
+      try {
+        zoom?.dispose();
+      } catch {
+      }
     }
   });
 }
@@ -7640,10 +7773,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 +7802,7 @@ export {
   mountLandingShell,
   mountNavPanel,
   mountTileBreadcrumb,
+  mountZoomControl,
   openTileTabMenu,
   openTileTabSwitcher,
   registerPanelKeys,