partforge 0.50.0 → 0.51.0

package/README.md

@@ -114,6 +114,10 @@ runtime.setHostPane("rail");  // narrow layout only: show just the controls
                                // built-in tab bar. null hands selection back.
 runtime.setActive(false);      // park the viewer: stop the render loop, release the
                                // drawing buffer. setActive(true) restores both.
+runtime.attachTooltips([{ element: myButton }]);  // host chrome buttons join the mount's
+                               // shared hover tooltip (label = the button's title or
+                               // aria-label, or a per-entry getLabel()); returns
+                               // { sync, hide, detach }, auto-detached on dispose()
 const off = runtime.onContextLost(() => {});  // WebGL context loss; returns an unsubscribe
 runtime.dispose();     // stops loops, workers, observers, listeners; frees GPU resources
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "partforge",
-  "version": "0.50.0",
+  "version": "0.51.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/chrome.css

@@ -79,6 +79,74 @@
 .pf-rail-head, .pf-rail-foot { flex: none; }
 .pf-rail-head { padding: 12px var(--pf-rail-pad); border-bottom: 1px solid var(--pf-border); }
 .pf-rail-foot { padding: 12px var(--pf-rail-pad); border-top: 1px solid var(--pf-border); }
+
+/* Foot ACTIONS, the counterpart to app.css's `#viewbar button`: any button a
+   host puts in the foot inherits the shared chrome, so a host-drawn control
+   sits beside a built-in one without restating the metrics — or, more to the
+   point, without re-deriving the states. Both hosts had independently written
+   the same padding/radius/mono stack, and only one of them had remembered to
+   exclude :disabled from :hover, so a dead button still lit up under the
+   pointer in the other. That bug is unreachable from here.
+
+   Buttons only; the ROW is the host's. A foot can hold a bare row
+   (partforge-cloud) or a labelled group (the demo pages' .dl/.dl-head), and a
+   container rule here would have to pick one. This mirrors the viewbar only
+   as far as the analogy holds: there, the pill itself is a single known
+   element partforge can own outright.
+
+   Base is the quiet outline treatment, because that is the safe thing to
+   inherit by accident; the loud one is opt-in via .pf-primary. Equal
+   specificity to app.css's `.dl-row button`, which is imported after this
+   file and therefore still wins — the legacy download row renders exactly as
+   before, and can drop .dl-row whenever it likes. */
+.pf-rail-foot button {
+  flex: 1;
+  padding: 8px 0;
+  border: 1px solid var(--pf-border);
+  border-radius: var(--pf-radius-control);
+  background: transparent;
+  color: var(--pf-text-2);
+  font-family: var(--pf-mono);
+  font-weight: 600;
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  cursor: pointer;
+}
+.pf-rail-foot button:hover:not(:disabled) {
+  border-color: var(--pf-accent);
+  color: var(--pf-text-strong);
+}
+.pf-rail-foot button:disabled { opacity: .45; cursor: default; }
+
+/* The foot's main call to action — accent-filled, so it reads as the primary
+   thing to do with a finished part. */
+.pf-rail-foot button.pf-primary {
+  border-color: var(--pf-accent);
+  background: var(--pf-accent);
+  color: var(--pf-on-accent);
+}
+.pf-rail-foot button.pf-primary:hover:not(:disabled) {
+  background: color-mix(in oklab, var(--pf-accent) 88%, #000);
+  border-color: color-mix(in oklab, var(--pf-accent) 88%, #000);
+}
+
+/* A square icon-only action sitting beside the primary one. Sized to match
+   the viewbar's icon buttons, and flex-none so the primary action keeps the
+   remaining width rather than the two splitting it evenly. */
+.pf-rail-foot button.pf-icon {
+  flex: 0 0 auto;
+  width: 34px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--pf-muted);
+}
+.pf-rail-foot button.pf-icon:hover:not(:disabled) {
+  background: var(--pf-surface-2);
+  border-color: var(--pf-border);
+  color: var(--pf-text-2);
+}
+
 .pf-rail-body {
   flex: 1;
   min-height: 0;

package/src/framework/mount.js

@@ -5,7 +5,7 @@ import { attachViewerControls } from "./viewer-controls.js";
 import { attachCutawayControls } from "./cutaway-controls.js";
 import { attachRail } from "./rail.js";
 import { attachMobileTabs } from "./mobile-tabs.js";
-import { createTooltipPresenter } from "./tooltip.js";
+import { createTooltipPresenter, attachButtonTooltips } from "./tooltip.js";
 import { loadCamera } from "./view-state.js";
 import { buildControls } from "./controls.js";
 import { relevantParamKeys } from "./param-deps.js";
@@ -29,7 +29,11 @@ import { resolveDefaultView } from "./default-view.js";
 
 // The mount handle, factored out so its shape is unit-testable without booting
 // the full mount() pipeline (WASM + workers + DOM).
-export function makeHandle({ ready, dispose, viewer, setParams, listExportableParts, exportParts, setHostPane, animation, getView, setView, captureView }) {
+// The default no-op tooltip binding, so a host can hold on to whatever
+// attachTooltips returned without caring whether this mount resolved one.
+const NOOP_TOOLTIP_BINDING = { sync: () => {}, hide: () => {}, detach: () => {} };
+
+export function makeHandle({ ready, dispose, viewer, setParams, listExportableParts, exportParts, setHostPane, animation, getView, setView, captureView, attachTooltips }) {
   return {
     ready, dispose, setParams,
     // Part-declared animation playback (spec 2026-08-02): animations are
@@ -60,6 +64,12 @@ export function makeHandle({ ready, dispose, viewer, setParams, listExportablePa
     // (partforge-cloud does, at the window level). Defaulted to a no-op so the
     // handle's shape never depends on whether this mount resolved a rail.
     setHostPane: setHostPane ?? (() => {}),
+    // Join host-owned chrome buttons to this mount's shared hover tooltip, so
+    // a host's own viewbar/rail-foot buttons match the built-in ones. Entries
+    // are [{ element, getLabel? }] (label falls back to the button's
+    // title/aria-label); returns { sync, hide, detach }. Same no-op default
+    // stance as setHostPane above.
+    attachTooltips: attachTooltips ?? (() => NOOP_TOOLTIP_BINDING),
   };
 }
 
@@ -116,6 +126,15 @@ function createCleanupStack() {
 //   runtime.setHostPane("rail");  // narrow layout only: show just the controls
 //                                 // rail ('stage' | 'rail'), suppressing the
 //                                 // built-in tab bar. null hands selection back.
+//   runtime.attachTooltips([{ element: myButton }]);  // host chrome buttons join the
+//                                 // mount's shared hover tooltip (the viewbar one).
+//                                 // Label = the button's title (or aria-label), or a
+//                                 // per-entry getLabel(); the title attribute is
+//                                 // absorbed while attached so it can't double up as a
+//                                 // native tooltip, and restored on detach. Returns
+//                                 // { sync, hide, detach } — call sync() after you
+//                                 // toggle a button's disabled state. Detached
+//                                 // automatically on dispose().
 //   runtime.setActive(false);     // park the viewer: stop the render loop and release
 //                                 // both large GPU allocations (the drawing buffer and
 //                                 // the cached capture target). For a host that hides the
@@ -203,7 +222,7 @@ export function mount(part, { createWorker, elements = {}, onBuild, onPick, onDo
     cleanup.defer(() => cutawayChrome.detach());
     // Resizable/collapsible controls rail. No-ops when the host lays out the
     // framework itself (no #panel / no elements.rail).
-    const railChrome = attachRail({ rail: els.rail, toggle: els.chrome.railToggle, shell: els.shell });
+    const railChrome = attachRail({ rail: els.rail, toggle: els.chrome.railToggle, shell: els.shell, tooltip });
     cleanup.defer(() => railChrome.detach());
     // Narrow-layout pane tabs. Below RAIL_NARROW_BREAKPOINT the rail cannot sit
     // beside the viewer, so exactly one pane shows and this bar picks it. Same
@@ -639,8 +658,19 @@ export function mount(part, { createWorker, elements = {}, onBuild, onPick, onDo
       }
     };
 
+    // Host chrome buttons joining the mount's shared tooltip (the one the
+    // viewbar and cutaway buttons already use). Bindings are detached by
+    // dispose() via the cleanup stack; a host detaching earlier is fine —
+    // attachButtonTooltips.detach is idempotent.
+    const attachHostTooltips = (entries) => {
+      const binding = attachButtonTooltips(tooltip, entries);
+      cleanup.defer(() => binding.detach());
+      return binding;
+    };
+
     return makeHandle({
       ready, dispose, viewer, setParams,
+      attachTooltips: attachHostTooltips,
       setHostPane: paneTabs.setHostPane,
       getView: view,                         // () => tabsCtl.current()
       setView: (name) => tabsCtl.select(name),

package/src/framework/rail.js

@@ -2,6 +2,7 @@ import {
   RAIL_DEFAULT_WIDTH, RAIL_MIN_WIDTH, RAIL_NARROW_BREAKPOINT,
   clampRailWidth, railMaxWidth, readRailPref, resolveRailDrag, writeRailPref,
 } from "./rail-state.js";
+import { attachButtonTooltips } from "./tooltip.js";
 
 const KEY_STEP = 16;
 const KEY_STEP_SHIFT = 64;
@@ -75,7 +76,11 @@ function safeStorage() {
 //
 // Everything is optional. With no rail this returns a no-op, so hosts that lay
 // the framework out themselves (see embed-test.html) are unaffected.
-export function attachRail({ rail, toggle, shell = rail?.parentElement, storage = safeStorage() } = {}) {
+//
+// `tooltip` is the mount's shared presenter (tooltip.js). With it, the toggle's
+// Hide/Show-controls label renders as the same anchored pf-hover-tip the
+// viewbar buttons use; without it, the label falls back to a native title.
+export function attachRail({ rail, toggle, shell = rail?.parentElement, storage = safeStorage(), tooltip } = {}) {
   if (!rail || !shell) {
     // No rail to resolve in this document: --pf-rail-w still defaults to 288px
     // from tokens.css, but nothing is reserving that space, so anything that
@@ -107,6 +112,12 @@ export function attachRail({ rail, toggle, shell = rail?.parentElement, storage
     toggle.replaceChildren(svg);
     toggleChevron = chevron;
   }
+  // Attached BEFORE the first apply() below writes an aria-label, so the
+  // binding's original-attribute capture (what its detach() restores) sees the
+  // host's own markup, not our first label.
+  const tooltipBinding = toggle && tooltip
+    ? attachButtonTooltips(tooltip, [{ element: toggle }])
+    : null;
 
   const seam = document.createElement("div");
   seam.className = "pf-rail-seam";
@@ -157,8 +168,11 @@ export function attachRail({ rail, toggle, shell = rail?.parentElement, storage
       const label = collapsed ? "Show controls" : "Hide controls";
       toggle.setAttribute("aria-expanded", String(!collapsed));
       toggle.setAttribute("aria-label", label);
-      toggle.title = label;
+      // The shared tooltip reads the aria-label at show time, so a native
+      // title would double up as a second, competing tooltip.
+      if (!tooltipBinding) toggle.title = label;
       toggle.classList.toggle("on", collapsed);
+      tooltipBinding?.sync();
     }
     if (persist) writeRailPref(state, storage);
   }
@@ -324,6 +338,9 @@ export function attachRail({ rail, toggle, shell = rail?.parentElement, storage
       shell.removeAttribute("data-pf-dragging");
       rail.removeAttribute("inert");
       root.style.removeProperty("--pf-rail-w");
+      // Before the attribute restore below: the binding's own detach rewrites
+      // title/aria-label from its capture, and ours must win.
+      tooltipBinding?.detach();
       if (toggle) {
         toggle.innerHTML = toggleOriginal.html;
         toggle.title = toggleOriginal.title;