partforge 0.27.0 → 0.31.0

package/src/framework/chrome.css

@@ -0,0 +1,180 @@
+/* Reusable chrome LAYOUT for a partforge app: the shell, the viewer column
+   ("stage"), the full-height controls rail, its resize seam, and the two
+   floating pill groups. This file owns the shell's layout and its structural
+   surfaces — the rail's/head's/foot's background, border, shadow, and text
+   color, and the seam pill's background — all expressed through overridable
+   --pf-* tokens. Appearance of the controls INSIDE the rail (the panel
+   widgets themselves) stays in app.css.
+
+   Class-based on purpose. partforge-cloud's sandbox builds its own DOM
+   (#viewer / #pfc-controls) and could never reuse an id-keyed sheet, so the
+   layout is expressed as .pf-* classes and exported standalone as
+   "partforge/chrome.css". app.css keeps :not(.pf-*) fallbacks so legacy
+   id-only markup renders its previous floating look untouched.
+
+   Prerequisite: this sheet consumes --pf-* custom properties (--pf-rail-w,
+   --pf-rail-pad, --pf-border, --pf-surface, --pf-bg, --pf-text, --pf-muted,
+   --pf-shadow-rail) but does not import them — a standalone consumer must
+   also load "partforge/tokens.css" (kept separate so the two stay
+   independently composable). The host is also responsible for giving
+   .pf-shell a height (e.g. `height: 100%` on an ancestor chain rooted at
+   `html, body`, or `position: absolute; inset: 0`); this sheet does not size
+   the shell itself.
+
+   See docs/superpowers/specs/2026-07-26-controls-rail-layout-design.md. */
+
+/* ---- shell: viewer column + rail, side by side --------------------------- */
+.pf-shell {
+  display: flex;
+  /* containing block for the absolutely-positioned seam */
+  position: relative;
+  overflow: hidden;
+}
+
+/* ---- stage: the viewer column, which owns its floating chrome ------------
+   min-width: 0 lets the column shrink past the canvas's intrinsic width, so
+   dragging the rail wider actually narrows the viewer instead of overflowing. */
+.pf-stage {
+  flex: 1;
+  position: relative;
+  min-width: 0;
+  background: var(--pf-bg);
+}
+
+/* ---- rail: a full-height right edge, set back from the viewer ------------
+   Square-cornered: it is an edge, not a card. The shadow is INSET on its left
+   side — the viewer casts onto the rail, which is what makes the rail read as
+   set back. An outer shadow would read as floating above the viewer. */
+.pf-rail {
+  flex: none;
+  width: var(--pf-rail-w);
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--pf-surface);
+  border-left: 1px solid var(--pf-border);
+  box-shadow: var(--pf-shadow-rail);
+  color: var(--pf-text);
+  /* Discrete changes (toggle, Home/End, double-click) animate; a drag never
+     does — an animated width fights the pointer and costs an extra WebGL
+     buffer reallocation every frame. */
+  transition: width .15s ease;
+}
+.pf-rail[inert] { border-left-width: 0; }
+
+/* Head and foot are flex-fixed rather than sticky, so the scroll container is
+   exactly .pf-rail-body. On a full-height rail the export buttons must never
+   scroll out of reach. */
+.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); }
+.pf-rail-body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+/* Rail-head title/subtitle typography — class-only (see this file's header:
+   no host-supplied id can be assumed), so a host that adopts this sheet with
+   its own ids (e.g. partforge-cloud) gets a correctly-shaped rail head with
+   correctly-styled text, not just a correctly-shaped empty box. Legacy
+   id-only markup (a bare <h1>/.sub with no .pf-rail-head wrapper) can't be
+   reached from here without an id selector, so app.css restates the same
+   two rules scoped to #panel for that one case — see the comment there. */
+.pf-rail-head h1 {
+  font-size: 14px; margin: 0 0 2px; color: var(--pf-text-strong); letter-spacing: -0.01em;
+}
+.pf-rail-head .sub {
+  font-family: var(--pf-mono); color: var(--pf-muted); font-size: 10px;
+  letter-spacing: 0.04em; text-transform: uppercase;
+  margin: 2px 0 0;
+}
+
+/* ---- resize seam --------------------------------------------------------
+   An OVERLAY, not a flex item. partforge-cloud's seam is a real 12px column
+   because its card is inset from the window with a gutter to live in; this rail
+   is flush against the viewer behind a hairline, so a flex item would open a
+   visible stripe of page background.
+
+   max(0px, …) is what parks the seam flush at the window edge when the rail is
+   collapsed, so a fresh drag can pull it back out. The element is created by
+   rail.js — no host markup declares it. */
+.pf-rail-seam {
+  position: absolute;
+  top: 0; bottom: 0;
+  right: max(0px, calc(var(--pf-rail-w) - 6px));
+  z-index: 20;
+  width: 12px;
+  display: flex; align-items: center; justify-content: center;
+  touch-action: none;
+  cursor: ew-resize;
+}
+/* Collapsed, the only legal direction is left. */
+.pf-rail-seam[data-collapsed] { cursor: w-resize; }
+.pf-rail-seam:focus-visible { outline: none; }
+/* Invisible at rest; the affordance is a short centred pill that appears only
+   on hover, keyboard focus, or during a drag. */
+.pf-rail-seam > span {
+  pointer-events: none;
+  width: 3px; height: 100px; border-radius: 999px;
+  background: transparent;
+  transition: background-color .12s ease;
+  /* Nudges only the pill 5px off the divider hairline it otherwise sits flush
+     against — the seam's own 12px hit target stays centred on the boundary
+     (that line is what a user aims at to drag) and must NOT move. */
+  transform: translateX(-5px);
+}
+.pf-rail-seam:hover > span,
+[data-pf-dragging] .pf-rail-seam > span { background: var(--pf-muted); }
+/* Keyboard focus must read as distinct from hover/drag, not just present —
+   the accent pill, not the muted one, is the only thing that says "focus
+   landed here" for a keyboard user. */
+.pf-rail-seam:focus-visible > span { background: var(--pf-accent); }
+
+/* While dragging, the cursor must stay correct even when the pointer is out
+   over the viewer, and the viewer must not react to it. Pointer capture keeps
+   the events coming; these two rules are the second belt. */
+[data-pf-dragging] { cursor: ew-resize; user-select: none; }
+[data-pf-dragging] .pf-stage { pointer-events: none; }
+[data-pf-dragging] .pf-rail,
+[data-pf-key-resizing] .pf-rail { transition: none; }
+
+/* ---- floating chrome: PLACEMENT ONLY, absolute within the stage ----------
+   Deliberately no appearance here. partforge-cloud's sandbox.css re-anchors
+   #viewbar's position with its own rules but inherits the pill's chrome
+   (background/border/radius/shadow) from app.css, so that chrome must live in
+   app.css ungated — not be duplicated into a class the cloud never sets. This
+   file owns where things sit; app.css owns what they look like. */
+.pf-float-tabs, .pf-float-viewbar { position: absolute; z-index: 15; }
+.pf-float-tabs { top: 12px; left: 50%; transform: translateX(-50%); }
+.pf-float-viewbar { bottom: 12px; right: 12px; }
+
+/* ---- stacked layout: no room for a rail beside the viewer ----------------
+   The seam is hidden and resize is absent at this width (rail.js also refuses
+   to start a drag); the #rail-toggle still collapses and restores. */
+@media (max-width: 719px) {
+  .pf-shell { flex-direction: column; }
+  .pf-rail {
+    width: auto; height: 45vh;
+    border-left: 0; border-top: 1px solid var(--pf-border);
+    box-shadow: none;
+  }
+  .pf-rail-seam { display: none; }
+  /* Collapsed, --pf-rail-w has no effect here (width is auto, height is 45vh),
+     so hide the rail outright — otherwise the toggle's first tap leaves a
+     full-size rail on screen that is inert and unresponsive. */
+  .pf-rail[inert] { display: none; }
+}
+
+/* ---- reduced motion -----------------------------------------------------
+   Collapsing the rail slides 288px of layout across the screen — the first
+   layout-scale animation in the framework, and the kind of movement a
+   vestibular-sensitive user actually feels. Honour the preference: the rail
+   still collapses and still resizes, it just arrives instead of travelling.
+   Scoped to what this layout introduces; the pre-existing busy spinner is a
+   state indicator and is left alone. */
+@media (prefers-reduced-motion: reduce) {
+  .pf-rail, .pf-rail-seam > span { transition: none; }
+}

package/src/framework/debug-overlay.js

@@ -5,8 +5,23 @@
 export function createDebugOverlay({ initialCachingOn = true, onToggle } = {}) {
   const box = document.createElement("div");
   box.id = "pf-debug";
+  // Left edge, below the top tab row: #viewbar is bottom-right and
+  // #pf-pick/#pf-pick-toast are bottom-left, so the top-left corner has no
+  // OTHER fixed element competing for it — but #topbar's tabs are centred in
+  // the stage, and the stage starts flush at the window's left edge, so a top
+  // offset of 12px (matching the tabs') is not actually free of them: at
+  // narrow/medium widths this ~240px-wide box reaches past the stage's
+  // horizontal centre and touches the tabs no matter which top corner it
+  // anchors to (measured — see .superpowers/sdd/debug-overlay-fix.md).
+  // #topbar's pill is a fixed 38px tall regardless of viewport or label width
+  // (12px top + 38px), so clearing it VERTICALLY is what's actually
+  // width-independent: sit below the tabs instead of racing them
+  // horizontally. That also drops any dependency on --pf-rail-w, so no media
+  // query is needed for the stacked layout below 720px.
+  // Positioned inline (not in chrome.css) because this box is dev-only chrome
+  // specific to partforge itself, never exported for a host to skin or reuse.
   Object.assign(box.style, {
-    position: "fixed", bottom: "12px", right: "12px", zIndex: "9999",
+    position: "fixed", top: "58px", left: "12px", zIndex: "9999",
     font: "12px ui-monospace, monospace", background: "rgba(0,0,0,0.7)",
     color: "#e6e6e6", padding: "8px 10px", borderRadius: "6px",
     lineHeight: "1.5", whiteSpace: "pre",

package/src/framework/download.js

@@ -2,9 +2,16 @@ import { zipSync } from "fflate";
 
 // Browser file-download helpers. Pure DOM/Blob utilities with no app state — the
 // worker produces the bytes; these just hand them to the browser as a download.
+//
+// `sink` is an optional escape hatch for embedders that cannot download from
+// their own document — e.g. partforge running inside a null-origin sandboxed
+// iframe, where a blob: URL is blob:null and browsers such as WebKit refuse to
+// load it. When `sink` is supplied it receives the FINAL bytes and no DOM work
+// happens here; the embedder saves them from a context that can.
 
-// Trigger a download of one binary blob under `filename`.
-export function triggerDownload(data, filename, mime) {
+// Trigger a download of one binary blob under `filename` (or hand it to `sink`).
+export function triggerDownload(data, filename, mime, sink) {
+  if (typeof sink === "function") { sink({ data, filename, mime }); return; }
   const url = URL.createObjectURL(new Blob([data], { type: mime }));
   const a = document.createElement("a");
   a.href = url;
@@ -14,10 +21,11 @@ export function triggerDownload(data, filename, mime) {
 }
 
 // Download a set of built parts: a single part downloads directly; multiple parts
-// are bundled into one flat, store-only (level 0) zip named `zipName`.
-export function downloadParts({ parts, ext, mime }, zipName) {
-  if (parts.length === 1) return triggerDownload(parts[0].data, `${parts[0].name}.${ext}`, mime);
+// are bundled into one flat, store-only (level 0) zip named `zipName`. `sink`, if
+// given, is forwarded to triggerDownload so it receives the final bytes.
+export function downloadParts({ parts, ext, mime }, zipName, sink) {
+  if (parts.length === 1) return triggerDownload(parts[0].data, `${parts[0].name}.${ext}`, mime, sink);
   const entries = {};
   for (const p of parts) entries[`${p.name}.${ext}`] = new Uint8Array(p.data);
-  triggerDownload(zipSync(entries, { level: 0 }), zipName, "application/zip");
+  triggerDownload(zipSync(entries, { level: 0 }), zipName, "application/zip", sink);
 }

package/src/framework/geometry/manifold-backend.js

@@ -8,6 +8,7 @@ import { addSugar } from "./solid-sugar.js";
 import { addShape2dSugar } from "./shape2d-sugar.js";
 import { assembleRegions } from "./shape2d-regions.js";
 import { finishKernel } from "./kernel-front.js";
+import { meshToStl } from "./mesh-stl.js";
 
 const PLANE_NORMAL = { XY: [0, 0, 1], XZ: [0, 1, 0], YZ: [1, 0, 0] };
 // 'preview' = interactive view (fast); 'print' = STL export (high-res, used only
@@ -363,21 +364,14 @@ function creasedNormals(g, sharpCos, featureLabels) {
 }
 
 function stlFromMesh(g) {
-  const tris = g.triVerts, vp = g.vertProperties, np = g.numProp, n = tris.length / 3;
-  const ab = new ArrayBuffer(84 + n * 50); const dv = new DataView(ab); dv.setUint32(80, n, true);
-  let o = 84; const P = (i) => [vp[i*np], vp[i*np+1], vp[i*np+2]];
-  for (let i = 0; i < n; i++) {
-    const a = P(tris[i*3]), b = P(tris[i*3+1]), c = P(tris[i*3+2]);
-    // Per-facet flat normal from the winding (Manifold is CCW → outward). Slicers
-    // recompute this, but viewers that light from the stored normal (macOS
-    // Preview/Quick Look) render the mesh unlit if it's left as zero.
-    const ux = b[0]-a[0], uy = b[1]-a[1], uz = b[2]-a[2];
-    const vx = c[0]-a[0], vy = c[1]-a[1], vz = c[2]-a[2];
-    const nx = uy*vz - uz*vy, ny = uz*vx - ux*vz, nz = ux*vy - uy*vx;
-    const L = Math.hypot(nx, ny, nz) || 1;
-    dv.setFloat32(o, nx/L, true); dv.setFloat32(o+4, ny/L, true); dv.setFloat32(o+8, nz/L, true); o += 12;
-    for (const p of [a, b, c]) for (const x of p) { dv.setFloat32(o, x, true); o += 4; }
-    dv.setUint16(o, 0, true); o += 2;
+  const vp = g.vertProperties, np = g.numProp;
+  const nVert = (vp.length / np) | 0;
+  let positions;
+  if (np === 3) {
+    positions = vp; // already x,y,z per vertex
+  } else {
+    positions = new Float32Array(nVert * 3);
+    for (let i = 0; i < nVert; i++) { positions[i*3] = vp[i*np]; positions[i*3+1] = vp[i*np+1]; positions[i*3+2] = vp[i*np+2]; }
   }
-  return ab;
+  return meshToStl(positions, g.triVerts);
 }

package/src/framework/geometry/mesh-stl.js

@@ -0,0 +1,27 @@
+// Pure-JS binary STL writer, shared by both geometry backends. Takes a flat
+// vertex-position array (x,y,z per vertex) and triangle indices, and returns a
+// binary STL ArrayBuffer. STL is a triangle-mesh format, so this is the one and
+// only STL path — OCCT and Manifold both feed it a mesh. It deliberately does
+// NOT touch Blobs: the sandbox worker on Safari cannot read a Blob, so every
+// export must hand back a raw ArrayBuffer.
+export function meshToStl(positions, indices) {
+  const n = (indices.length / 3) | 0;
+  const ab = new ArrayBuffer(84 + n * 50);
+  const dv = new DataView(ab);
+  dv.setUint32(80, n, true); // triangle count (80-byte header left zero)
+  let o = 84;
+  const P = (i) => [positions[i * 3], positions[i * 3 + 1], positions[i * 3 + 2]];
+  for (let i = 0; i < n; i++) {
+    const a = P(indices[i * 3]), b = P(indices[i * 3 + 1]), c = P(indices[i * 3 + 2]);
+    // Per-facet flat normal from the winding. Slicers recompute this, but some
+    // viewers (macOS Preview/Quick Look) render unlit if it's left zero.
+    const ux = b[0] - a[0], uy = b[1] - a[1], uz = b[2] - a[2];
+    const vx = c[0] - a[0], vy = c[1] - a[1], vz = c[2] - a[2];
+    const nx = uy * vz - uz * vy, ny = uz * vx - ux * vz, nz = ux * vy - uy * vx;
+    const L = Math.hypot(nx, ny, nz) || 1;
+    dv.setFloat32(o, nx / L, true); dv.setFloat32(o + 4, ny / L, true); dv.setFloat32(o + 8, nz / L, true); o += 12;
+    for (const p of [a, b, c]) for (const x of p) { dv.setFloat32(o, x, true); o += 4; }
+    dv.setUint16(o, 0, true); o += 2;
+  }
+  return ab;
+}