partforge 0.150.0 → 0.150.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "partforge",
-  "version": "0.150.0",
+  "version": "0.150.1",
   "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

@@ -835,14 +835,16 @@ button.action:focus-visible, .adv-toggle:focus-visible, .sec-title:focus-visible
 .pf-card-lab-row { display: flex; justify-content: space-between; align-items: baseline; }
 .pf-card-lab { font-size: 12px; color: var(--pf-muted); }
 .pf-card-val { font-size: 12px; color: var(--pf-text-2); font-variant-numeric: tabular-nums; }
-.pf-card-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
-.pf-card-tile { display: grid; justify-items: center; gap: 3px; border: 0; background: none; padding: 3px 0; border-radius: 8px; cursor: pointer; font: inherit; color: var(--pf-muted); }
+.pf-card-val.preview { color: var(--pf-text); }
+.pf-card-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px 2px; }
+.pf-card-tile { display: grid; justify-items: center; align-content: start; gap: 4px; border: 0; background: none; padding: 4px 1px 3px; border-radius: 8px; cursor: pointer; font: inherit; color: var(--pf-text-2); }
 .pf-card-tile:hover { background: var(--pf-surface-2); }
 .pf-card-tile[aria-pressed="true"] { background: var(--pf-accent-soft); color: var(--pf-accent); }
-.pf-card-ball { position: relative; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 35% 30%, color-mix(in oklab, var(--pf-swatch) 72%, white) 0, var(--pf-swatch) 48%, color-mix(in oklab, var(--pf-swatch) 68%, black) 100%); box-shadow: inset 0 -1px 2px rgb(0 0 0 / .25); }
+.pf-card-ball { position: relative; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 35% 30%, color-mix(in oklab, var(--pf-swatch) 72%, white) 0, var(--pf-swatch) 48%, color-mix(in oklab, var(--pf-swatch) 68%, black) 100%); box-shadow: inset 0 -1px 2px rgb(0 0 0 / .25); }
 .pf-card-ball img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
 .pf-card-ball img[hidden] { display: none; }
-.pf-card-tile-label { font-size: 9.5px; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* Two lines at most; the Material row names the hovered tile in full. */
+.pf-card-tile-label { font-size: 10.5px; line-height: 1.15; max-width: 100%; min-height: 2.3em; text-align: center; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
 .pf-card-unknown { margin: 0; font-size: 11px; color: var(--pf-err); font-family: var(--pf-mono); }
 .pf-card-unknown[hidden] { display: none; }
 .pf-card-colors { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }

package/src/framework/appearance-card.js

@@ -206,6 +206,30 @@ export function attachAppearanceCard(parts, { onBack, onClose, onGone, getSaveSt
     const ownColor = known(id) && !PRESETS[id].tintable && typeof parts.getState(name)?.override?.color === "number";
     parts.setDisplay(name, ownColor ? { material: id, color: null } : { material: id });
   });
+  // The Material row names the tile under the pointer (or keyboard focus),
+  // then the part's material again: a tile's own label clamps to two lines,
+  // so this is where a long name reads in full. A touch names nothing — a tap
+  // applies the tile, and the row then names it as the material anyway.
+  let previewLabel = null;
+  const showMaterialName = () => {
+    matVal.textContent = previewLabel ?? row?.materialLabel ?? "None";
+    matVal.classList.toggle("preview", previewLabel !== null);
+  };
+  const previewFrom = (e) => {
+    const t = e.target.closest?.(".pf-card-tile");
+    previewLabel = t ? t.title : null;
+    showMaterialName();
+  };
+  const previewEnd = (e) => {
+    const t = e.target.closest?.(".pf-card-tile");
+    if (!t || t.contains(e.relatedTarget)) return;
+    previewLabel = null;
+    showMaterialName();
+  };
+  tiles.addEventListener("pointerover", (e) => { if (e.pointerType !== "touch") previewFrom(e); });
+  tiles.addEventListener("pointerout", (e) => { if (e.pointerType !== "touch") previewEnd(e); });
+  tiles.addEventListener("focusin", previewFrom);
+  tiles.addEventListener("focusout", previewEnd);
   colors.addEventListener("click", (e) => {
     const b = e.target.closest(".pf-card-color");
     if (!b || !name) return;
@@ -238,7 +262,7 @@ export function attachAppearanceCard(parts, { onBack, onClose, onGone, getSaveSt
     see.value = String(pct); seeVal.textContent = `${pct}%`;
     const m = state.effective.material;
     for (const t of tiles.children) t.setAttribute("aria-pressed", String(known(m) && t.dataset.material === m));
-    matVal.textContent = row.materialLabel ?? "None";
+    showMaterialName();
     unknown.hidden = !(m != null && !known(m));
     unknown.textContent = unknown.hidden ? "" : String(m);
     const color = row.color;
@@ -320,7 +344,7 @@ export function attachAppearanceCard(parts, { onBack, onClose, onGone, getSaveSt
     element: root,
     show(next) {
       if (!parts.list().some((r) => r.name === next)) return false;
-      name = next;
+      name = next; previewLabel = null;
       render();
       return true;
     },