partforge 0.88.0 → 0.89.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "partforge",
-  "version": "0.88.0",
+  "version": "0.89.0",
   "description": "Turn a declarative part definition into a parametric-CAD web app (three.js + Manifold/Replicad). Requires a Vite-based consumer.",
   "type": "module",
   "license": "MIT",

package/src/framework/app.css

@@ -278,6 +278,7 @@ button.action:disabled { opacity: .5; cursor: default; }
 /* keyboard focus ring shared across the panel's interactive controls */
 .seg button:focus-visible, select.preset:focus-visible, .dl-row button:focus-visible,
 button.action:focus-visible, .adv-toggle:focus-visible, .sec-title:focus-visible, #viewbar button:focus-visible,
+.pf-view-select:focus-visible,
 .pf-viewcube-toggle:focus-visible, .pf-float-rail-toggle:focus-visible, .pf-sketch-toolbar button:focus-visible {
   outline: none;
   box-shadow: 0 0 0 3px color-mix(in oklab, var(--pf-accent) 35%, transparent);
@@ -299,14 +300,65 @@ button.action:focus-visible, .adv-toggle:focus-visible, .sec-title:focus-visible
   border-radius: var(--pf-radius-pill);
   box-shadow: var(--pf-shadow-float);
 }
-/* nowrap: `.seg button` is `flex: 1` (equal-width columns), and a part with
-   two views where one label is long (e.g. import-demo's "Reference overlay")
-   would otherwise wrap onto a second line, making this pill taller than the
-   single fixed height debug-overlay.js positions itself below (see its
-   comment) — the overlay would then overlap the now-two-row tabs. Letting the
-   label force the column wider instead keeps the pill single-row regardless
-   of label length. */
-#topbar .seg button { min-width: 70px; padding: 7px 10px; white-space: nowrap; }
+/* flex: the panel's `.seg button` is `flex: 1 1 0%` — equal-width columns,
+   which is right for a radio group in the rail and wrong here. With a zero
+   basis every tab gets the SAME width, so the widest label does not get to
+   size its own column: import-demo's two tabs came out 106px each while
+   "Reference overlay" needs ~127, and the text simply drew outside the pill's
+   rounded background (measured in Chromium: scrollWidth 238 against
+   clientWidth 221). Sizing each tab to its own content is what the nowrap note
+   below always claimed happened, and is also what makes the pill's natural
+   width honest — view-tabs.js's collapse measures exactly this.
+
+   nowrap: with content-sized columns a long label would otherwise wrap onto a
+   second line, making this pill taller than the single fixed height
+   debug-overlay.js positions itself below (see its comment) — the overlay
+   would then overlap the now-two-row tabs. Letting the label force the column
+   wider instead keeps the pill single-row regardless of label length, and
+   hands the overflow to the collapse rather than to a second row.
+
+   view-tabs.js ALSO sets nowrap inline on every button it generates, and that is
+   the copy that actually protects the rule: a host restyling the pill from
+   scratch (partforge-cloud's `#viewer #part button`, with no `.seg` class)
+   never sees this selector, and long labels wrapped there for exactly that
+   reason. This one still covers hand-written markup on partforge's own pages. */
+#topbar .seg button { flex: 0 0 auto; min-width: 70px; padding: 7px 10px; white-space: nowrap; }
+
+/* The tabs' narrow-stage fallback. When view-tabs.js measures the segmented
+   pill as wider than the stage's top-centre slot it flips `data-pf-tabs` to
+   "menu", and this dropdown stands in for the buttons.
+
+   Ungated on `.seg` / `#topbar` for the same reason #viewbar's chrome below is:
+   partforge-cloud dresses the pill with its own `#viewer #part` rules and
+   neither of those selectors reaches it — and it is the host that most needs
+   this, since its stage is a column beside an editor rather than a full window.
+
+   27px tall, which is what the buttons it replaces measure (11px mono + 7px of
+   padding top and bottom). Matched rather than approximated so the pill's own
+   height does not change as it swaps — it sits at the stage's top centre, where
+   a 1px jump on every resize past the threshold would read as a twitch — and so
+   the collapsed pill stays under the fixed height debug-overlay.js parks itself
+   below. Capped in width so a long label ellipsizes rather than pushing the
+   pill back out to the width that collapsed it in the first place. */
+.pf-view-select {
+  box-sizing: border-box;
+  height: 27px; max-width: min(220px, 100%);
+  padding: 0 24px 0 9px;
+  border: 0; border-radius: var(--pf-radius-control);
+  background: transparent; color: var(--pf-text-2);
+  font-family: var(--pf-mono); font-size: 11px; letter-spacing: 0.02em;
+  cursor: pointer; appearance: none; text-overflow: ellipsis;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='7'%3E%3Cpolygon points='0,0 8,0 4,7' fill='%238b8b94'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 9px center;
+}
+/* `hidden` is the switch view-tabs.js flips between the two representations,
+   and a host that gives tab buttons a `display` of their own would beat the
+   UA's [hidden] rule — the trap `#viewbar button[hidden]` below already guards
+   against. Said again here against the layout state, which lives on the
+   element itself and so holds whatever a host does to the pill around it. */
+[data-pf-tabs="menu"] > button[data-part] { display: none; }
+[data-pf-tabs="segmented"] > .pf-view-select { display: none; }
 
 /* viewer controls. APPEARANCE is ungated: partforge-cloud re-anchors #viewbar's
    position in sandbox.css but inherits this pill chrome, so gating it on a class

package/src/framework/view-tabs.js

@@ -7,10 +7,89 @@ import { loadView, saveView } from "./view-state.js";
 // hand-wrote. Which tab opens is resolveDefaultView's call, not key order. The
 // active tab then persists per part for the rest of the browser session, so a
 // Vite dev reload doesn't throw you back mid-edit.
-export function createViewTabs(el, part, { onChange }) {
+//
+// The bar has TWO representations of the same choice, and both exist from the
+// start: the segmented buttons, and a dropdown that takes over when the pill no
+// longer fits the stage's top-centre slot. Which one shows is `data-pf-tabs` on
+// the element, kept current by the measurement below. They are built together
+// and switched together rather than rebuilt on each swap, so a click and a
+// dropdown change are the same commit path and neither can drift from the other.
+
+// The slot must clear the pill by this much before the buttons come back. Purely
+// an anti-flap margin: a pill whose natural width lands within a subpixel of the
+// slot would otherwise swap layouts on every ResizeObserver notification.
+const EXPAND_MARGIN = 2;
+// chrome.css's `.pf-float-tabs { top: 12px; left: 50% }` inset — the margin the
+// bar keeps from the stage edge when nothing else competes for the corner.
+const STAGE_MARGIN = 12;
+// Breathing room between the pill's edge and the rail toggle it must not reach.
+const TOGGLE_GAP = 8;
+
+// Which representation to show. Pure, and deliberately a function of the pill's
+// NATURAL width rather than its current one — see `natural` below for why that
+// distinction is what stops the swap oscillating.
+//
+// A non-positive measurement is the ABSENCE of a reading, not a claim that
+// nothing fits: happy-dom reports zeros for every box, and so does a real
+// browser before first layout. Segmented is the honest fallback — it is what
+// the bar looked like before this measurement existed.
+export function pickLayout({ natural, available, collapsed }) {
+  if (!(natural > 0) || !(available > 0)) return "segmented";
+  if (collapsed) return available >= natural + EXPAND_MARGIN ? "segmented" : "menu";
+  return natural > available ? "menu" : "segmented";
+}
+
+// How much of each stage edge is spoken for. Doubled by the caller because the
+// pill is centre-anchored: the tighter side governs both halves. Derived from
+// the rail toggle's measured box rather than from a second copy of its offsets,
+// the same way animation-controls.js derives the view cube's claim from the
+// viewbar's — retune chrome.css and this follows. The toggle is `[hidden]`
+// below the narrow breakpoint, where the stage margin stands alone.
+function sideClearance(stage, stageRect) {
+  const toggle = stage?.querySelector?.(".pf-float-rail-toggle");
+  if (!toggle || toggle.hidden || !stageRect) return STAGE_MARGIN;
+  const rect = toggle.getBoundingClientRect?.();
+  if (!(rect?.width > 0)) return STAGE_MARGIN;
+  return Math.max(STAGE_MARGIN, stageRect.right - rect.left + TOGGLE_GAP);
+}
+
+// `segWidth` is what the pill measures RIGHT NOW, which is near nothing once the
+// buttons are hidden. Reporting it raw rather than smoothing it here keeps this
+// a plain reading; remembering the last meaningful one is the orchestrator's job.
+function domMeasure(el) {
+  return () => {
+    const stage = el.closest?.(".pf-stage") ?? el.offsetParent ?? el.ownerDocument?.documentElement;
+    const stageRect = stage?.getBoundingClientRect?.() ?? null;
+    const stageWidth = stageRect?.width || stage?.clientWidth || 0;
+    return {
+      segWidth: el.scrollWidth || 0,
+      available: stageWidth ? stageWidth - 2 * sideClearance(stage, stageRect) : 0,
+    };
+  };
+}
+
+// Built from the buttons rather than from part.views so a page with hand-written
+// markup gets a working dropdown too — the buttons are the one description of
+// the choice that both paths share. Option text goes through textContent for the
+// same reason the buttons do: view labels are untrusted data.
+function buildSelect(doc, tabs) {
+  const select = doc.createElement("select");
+  select.className = "pf-view-select";
+  select.setAttribute("aria-label", "View");
+  for (const btn of tabs) {
+    const option = doc.createElement("option");
+    option.value = btn.dataset.part;
+    option.textContent = btn.textContent;
+    select.append(option);
+  }
+  return select;
+}
+
+export function createViewTabs(el, part, { onChange, measure } = {}) {
   const generated = !!(el && part.views);
   const partKey = part?.meta?.title ?? "";
   const resolved = resolveDefaultView(part);
+  const doc = el.ownerDocument ?? document;
   if (generated) {
     // Built node-by-node with textContent/dataset rather than an innerHTML
     // template — view keys and labels come from the part, which is untrusted
@@ -20,32 +99,113 @@ export function createViewTabs(el, part, { onChange }) {
       const btn = document.createElement("button");
       btn.dataset.part = key;
       btn.textContent = v?.label ?? key;
+      // Inline, not a stylesheet rule, because this one is load-bearing rather
+      // than decorative and a host can drop a stylesheet rule by accident.
+      // partforge-cloud restyles the pill from scratch (`#viewer #part button`,
+      // no `.seg` class), which is exactly how app.css's `white-space: nowrap`
+      // stopped applying there and let long labels wrap onto a second line. A
+      // wrapping label makes the pill NARROWER, not wider, so the collapse
+      // below would never trip — the overflow it is meant to catch would show
+      // up as a two-row pill instead. On the element, it is out of reach.
+      btn.style.whiteSpace = "nowrap";
       if (key === resolved) btn.classList.add("on");
       return btn;
     }));
   }
 
-  const setActive = (btn) => { for (const b of el.children) b.classList.toggle("on", b === btn); };
+  const buttons = () => [...el.querySelectorAll("button[data-part]")];
+  const tabs = buttons();
+  // Below two tabs there is nothing to choose, and an empty pill must stay
+  // empty: partforge-cloud hides the bar with `#viewer #part:empty`, so a part
+  // with no views would otherwise gain a one-option dropdown and a visible pill.
+  const select = tabs.length >= 2 ? buildSelect(doc, tabs) : null;
+  if (select) el.append(select);
+
+  const setActive = (btn) => {
+    for (const b of buttons()) b.classList.toggle("on", b === btn);
+    if (select) select.value = btn.dataset.part;
+  };
 
   // Initial view: the session-saved one if it still matches a tab, else the active
   // button — the resolved default for a generated bar, or whatever the page's own
   // markup marked `on` for a hand-written one.
   const defaultView = el.querySelector("button.on")?.dataset.part ?? el.querySelector("button")?.dataset.part;
   const saved = loadView(partKey);
-  const savedBtn = saved ? [...el.querySelectorAll("button[data-part]")].find((b) => b.dataset.part === saved) : null;
+  const savedBtn = saved ? tabs.find((b) => b.dataset.part === saved) : null;
   let view = savedBtn ? saved : defaultView;
-  if (savedBtn) setActive(savedBtn);
+  // Unconditional now (it used to run only for a restored view): the dropdown
+  // has to open showing the same tab the buttons do, and for a generated bar
+  // the button half of this is the no-op it always was.
+  const activeBtn = savedBtn ?? tabs.find((b) => b.dataset.part === view);
+  if (activeBtn) setActive(activeBtn);
 
-  const onClick = (e) => {
-    const btn = e.target.closest("button[data-part]");
-    if (!btn) return;
+  const commit = (btn) => {
     view = btn.dataset.part;
     saveView(partKey, view);
     setActive(btn);
     onChange(view);
   };
+
+  const onClick = (e) => {
+    const btn = e.target.closest("button[data-part]");
+    if (!btn) return;
+    commit(btn);
+  };
   el.addEventListener("click", onClick);
 
+  const onSelectChange = () => {
+    const btn = buttons().find((b) => b.dataset.part === select.value);
+    if (btn) commit(btn);
+  };
+  select?.addEventListener("change", onSelectChange);
+
+  // ---- layout: which representation is on screen --------------------------
+  let detached = false;
+  let mode = null;
+  // The pill's width AS IF THE BUTTONS WERE SHOWING — the fixed point the swap
+  // turns on, and the same trick animation-controls.js's nominalClusterRect
+  // plays for the view cube. Re-reading the live pill while collapsed would
+  // measure the dropdown instead, decide the buttons fit, expand, overflow, and
+  // collapse again: two frames per cycle, on screen as a flickering bar. This
+  // value cannot change while collapsed, so the collapsed state is stable.
+  // Caching is exact rather than approximate here because the buttons are
+  // content-sized (`min-width` + padding + nowrap, no percentages), so their
+  // natural width does not depend on the viewport at all.
+  let natural = 0;
+  const read = measure ?? domMeasure(el);
+
+  const setMode = (next) => {
+    if (next === mode) return;
+    mode = next;
+    el.dataset.pfTabs = next;
+    const menu = next === "menu";
+    for (const b of buttons()) b.hidden = menu;
+    if (select) select.hidden = !menu;
+  };
+
+  const relayout = () => {
+    if (detached) return;
+    if (!select) { setMode("segmented"); return; }
+    const { segWidth, available } = read();
+    if (mode !== "menu" && segWidth > 0) natural = segWidth;
+    setMode(pickLayout({ natural, available, collapsed: mode === "menu" }));
+  };
+  setMode("segmented"); // measure from the state the cache is only valid in
+  relayout();
+
+  // ResizeObserver is the precise trigger; the resize listener is the belt that
+  // also fires where it is absent, mirroring animation-controls.js's placement
+  // pair. Both land on the same idempotent relayout, so a doubled notification
+  // costs one measurement and no DOM write.
+  const win = doc.defaultView ?? globalThis;
+  win.addEventListener?.("resize", relayout);
+  const stage = el.closest?.(".pf-stage") ?? el.parentElement;
+  const observer = typeof win.ResizeObserver === "function" ? new win.ResizeObserver(relayout) : null;
+  if (observer && stage) observer.observe(stage);
+  // A webfont swap changes every label's width, and so the pill's natural width,
+  // after the first layout the measurement above ran against.
+  doc.fonts?.ready?.then(relayout).catch(() => {});
+
   return {
     current: () => view,
     // Programmatic switch — the click path without the click. Used by an
@@ -53,17 +213,21 @@ export function createViewTabs(el, part, { onChange }) {
     // Returns false for a name that isn't a tab so callers can validate.
     select: (name) => {
       if (name === view) return true; // already active — nothing to do
-      const btn = [...el.querySelectorAll("button[data-part]")].find((b) => b.dataset.part === name);
+      const btn = buttons().find((b) => b.dataset.part === name);
       if (!btn) return false;
-      view = name;
-      saveView(partKey, view);
-      setActive(btn);
-      onChange(view);
+      commit(btn);
       return true;
     },
     detach: () => {
+      detached = true;
       el.removeEventListener("click", onClick);
+      select?.removeEventListener("change", onSelectChange);
+      win.removeEventListener?.("resize", relayout);
+      observer?.disconnect();
+      select?.remove(); // ours in both paths — hand-written markup never has one
+      delete el.dataset.pfTabs;
       if (generated) el.innerHTML = ""; // we generated these buttons; hand-written markup stays
+      else for (const b of buttons()) b.hidden = false; // leave the page's own buttons as we found them
     },
   };
 }