@floless/app 0.66.0 → 0.67.0

package/dist/floless-server.cjs

@@ -53022,7 +53022,7 @@ function appVersion() {
   return resolveVersion({
     isSea: isSea2(),
     sqVersionXml: readSqVersionXml(),
-    define: true ? "0.66.0" : void 0,
+    define: true ? "0.67.0" : void 0,
     pkgVersion: readPkgVersion()
   });
 }
@@ -53032,7 +53032,7 @@ function resolveChannel(s) {
   return "dev";
 }
 function appChannel() {
-  return resolveChannel({ isSea: isSea2(), define: true ? "0.66.0" : void 0 });
+  return resolveChannel({ isSea: isSea2(), define: true ? "0.67.0" : void 0 });
 }
 
 // workflow-update.ts
@@ -53892,6 +53892,7 @@ function bakeContractIntoApp(sourcePath, contract) {
   doc.setIn(["nodes", idx, "config", "contract"], contract.type);
   const baked = { ...contract };
   delete baked.dims3d;
+  delete baked.detail_placements;
   if (Array.isArray(contract.plans)) {
     baked.plans = contract.plans.map((p) => {
       if (p && typeof p === "object") {
@@ -64852,7 +64853,7 @@ async function startServer() {
     "/api/contract-request",
     { bodyLimit: 25 * 1024 * 1024 },
     async (req, reply) => {
-      const { appId, instruction, snapshots } = req.body ?? {};
+      const { appId, instruction, intent, target, snapshots } = req.body ?? {};
       if (!appId || !instruction) {
         return reply.status(400).send({ ok: false, error: "appId, instruction required" });
       }
@@ -64862,7 +64863,10 @@ async function startServer() {
       } catch (e) {
         return reply.status(400).send({ ok: false, error: e instanceof Error ? e.message : "bad snapshot" });
       }
-      const request = addRequest({ type: "tweak-contract", appId, instruction }, decoded);
+      const request = addRequest(
+        { type: "tweak-contract", appId, instruction, ...intent ? { intent } : {}, ...target ? { target } : {} },
+        decoded
+      );
       broadcast({ type: "request-added", request });
       return { ok: true, request };
     }

package/dist/schemas/steel.takeoff.v1.schema.json

@@ -40,9 +40,27 @@
     "filter": { "$ref": "#/$defs/filter", "description": "Layer/thickness/colour filter pre-stage. `sheets[]` holds per-framing-plan geometry; the facets + `mode` + on-flag selection are GLOBAL across sheets. The saved selection scopes which lines the reader binds profile labels to per sheet; replaces the length heuristic, fallback when absent. CONFIDENTIAL: each sheet's `page.bg_b64` is machine-local, never committed." },
     "connections": { "type": "array", "items": { "$ref": "#/$defs/connection" }, "description": "Vendor-neutral connection library: each row maps a connection type → the firm's design detail# → per-platform component ids. Member ends/columns reference a row by id via `ends[].conn` / `col.conn` (legacy `note`/`detail` = fallback when `conn` is empty)." },
     "joints": { "type": "array", "items": { "$ref": "#/$defs/joint" }, "description": "Placed connections (base plates, …) the connection engine expands into real 3D parts (plate/bolt/weld/cut) bound to their members. A joint may cite a `connections[]` row via `conn` for its type/detail identity; `params` carries the geometry settings (engine defaults when absent)." },
-    "dims3d": { "type": "array", "items": { "$ref": "#/$defs/dim3" }, "description": "Draft-only 3D dimensions (editor annotations, model-global). World-scene mm. NOT baked into the lock / 3D scene / IFC / BOM." }
+    "dims3d": { "type": "array", "items": { "$ref": "#/$defs/dim3" }, "description": "Draft-only 3D dimensions (editor annotations, model-global). World-scene mm. NOT baked into the lock / 3D scene / IFC / BOM." },
+    "detail_placements": { "type": "array", "items": { "$ref": "#/$defs/detailPlacement" }, "description": "Draft-only placed 2D detail images (Slice 4 — insert a vectored detail into the model). Flat image planes the editor renders client-side against the model; metadata only — the image bytes live in custom_details. Model-global. NOT baked into the lock / 3D scene / IFC / BOM." }
   },
   "$defs": {
+    "detailPlacement": {
+      "type": "object",
+      "required": ["id"],
+      "properties": {
+        "id": { "type": "string", "description": "Stable, sheet-unique placement id." },
+        "detailName": { "type": "string", "description": "Key into custom_details for the image bytes." },
+        "sheet": { "type": "string", "description": "Sheet the detail was placed against (targeting scope)." },
+        "anchorId": { "type": ["string", "null"], "description": "Host member id the detail was dropped onto, or null (free placement)." },
+        "pos": { "type": "array", "items": { "type": "number" }, "description": "World-scene mm [x,y,z] of the plane centre." },
+        "u": { "type": "array", "items": { "type": "number" }, "description": "In-plane x-axis basis from the picked face." },
+        "n": { "type": "array", "items": { "type": "number" }, "description": "Plane-normal basis from the picked face." },
+        "rotZ": { "type": "number", "description": "In-plane rotation about the plane normal, degrees." },
+        "size": { "type": "number", "description": "Plane width in mm (height follows the image aspect)." },
+        "opacity": { "type": "number", "minimum": 0, "maximum": 1 }
+      },
+      "additionalProperties": true
+    },
     "grid": {
       "type": ["object", "null"],
       "required": ["origin"],

package/dist/web/steel-3d-view.js

@@ -29,6 +29,11 @@ let epGeom = null, epMatStart = null, epMatEnd = null; // shared across all endp
 let epRing = null, epPreview = null;        // white ring on the active end node + a rubber line while dragging it
 let hoverEp = null, dragEp = null;          // {id,end} of the hovered / dragged end node
 let refGroup = null; let refLineOn = false; // optional reference (work) lines between each member's end points
+let insertMode = false;            // armed "place a vectored detail" pick (mirrors clipMode)
+let insertPending = null;          // {name,url} — the detail the editor queued for the next placement click
+let labelsOnFlag = false;          // member mark/id overlay labels toggle (a readability aid)
+let memberLabelHost = null;        // fixed-position container for the member labels (positioned each frame)
+const memberLabelPool = [];        // reused <div> labels, one per member, positioned in the loop
 const EP_PX = 4;                            // end-dot radius in screen px (screen-constant via pxToWorld)
 let sceneBox = new THREE.Box3();            // current model bounds (Fit / ViewCube)
 let displayMode = 'solid';                  // solid | wire | xray
@@ -148,6 +153,9 @@ function init(canvas, theApi) {
   dimLabelHost = document.createElement('div');
   dimLabelHost.style.cssText = 'position:fixed;left:0;top:0;pointer-events:none;z-index:57';
   document.body.appendChild(dimLabelHost);
+  memberLabelHost = document.createElement('div');   // member mark/id labels (Slice 4) — below the dim labels
+  memberLabelHost.style.cssText = 'position:fixed;left:0;top:0;pointer-events:none;z-index:56;display:none';
+  document.body.appendChild(memberLabelHost);
   // persistent hover/selection status chip, bottom-centre of the canvas (mirrors the viewer's readout)
   hoverChip = document.createElement('div');
   hoverChip.style.cssText = 'position:fixed;display:none;pointer-events:none;z-index:55;background:var(--panel,#0f172a);color:var(--mut,#94a3b8);border:1px solid var(--line,#334155);border-radius:6px;padding:5px 12px;font:12px system-ui;white-space:nowrap;max-width:60vw;overflow:hidden;text-overflow:ellipsis;box-shadow:0 2px 8px rgba(0,0,0,.45)';
@@ -191,6 +199,7 @@ function loop() {
   sizeClipHandles();
   positionDimLabels();
   positionOverlayLabels();
+  positionMemberLabels();
   renderer.render(scene, camera);
   if (overlayScene && overlayScene.children.length) {   // 2nd pass with clipping OFF → the clip/work-area gizmos are never sectioned by any clip
     const saved = renderer.clippingPlanes;
@@ -332,6 +341,34 @@ function placeExtrusion(mesh, el) {
   mesh.position.set(0, 0, z0); // the shape carries world XY; lift the slab to its bottom face
 }
 
+// A placed detail (Slice 4 — insert a vectored detail into the model): a flat image plane the user
+// drops into the 3D scene to reference a 2D detail against real members. `url` is a data: image (from
+// the editor's detail library); the plane sits at the element's world point, oriented to the picked
+// face's basis (u = in-plane x, n = normal) or a default vertical facing -Y, sized by `size` mm with
+// the image's own aspect applied once the texture loads. Injected CLIENT-SIDE by the editor into the
+// scene it feeds this view; the server's contract-to-scene never emits them, so they stay out of the
+// reconstructed scene / IFC / Tekla export (the bytes ride the contract to the localhost host only).
+function placeImage(mesh, el) {
+  const size = Math.max(el.size || 1000, 1);
+  mesh.geometry = new THREE.PlaneGeometry(size, size);
+  const tex = new THREE.TextureLoader().load(el.url || '', (t) => {
+    const iw = t.image && t.image.width, ih = t.image && t.image.height;
+    if (iw && ih) mesh.scale.set(1, ih / iw, 1);   // geometry is square; scale local Y to the image aspect
+  });
+  tex.colorSpace = THREE.SRGBColorSpace;
+  mesh.material = new THREE.MeshBasicMaterial({ map: tex, transparent: true, opacity: el.opacity == null ? 1 : el.opacity, side: THREE.DoubleSide, depthWrite: false });
+  const u = el.u ? new THREE.Vector3(el.u[0], el.u[1], el.u[2]).normalize() : new THREE.Vector3(1, 0, 0);
+  const n = el.n ? new THREE.Vector3(el.n[0], el.n[1], el.n[2]).normalize() : new THREE.Vector3(0, -1, 0);
+  const vAxis = new THREE.Vector3().crossVectors(n, u).normalize();
+  mesh.quaternion.setFromRotationMatrix(new THREE.Matrix4().makeBasis(u, vAxis, n));
+  if (el.rotZ) mesh.rotateZ((el.rotZ * Math.PI) / 180);   // in-plane spin about the plane normal, degrees
+  // Float the plane a hair off the picked surface (along its normal) so it reads clearly instead of
+  // z-fighting the member it was dropped on, and so a click selects the detail (frontmost), not the member.
+  const OFF = 25;
+  mesh.position.set(((el.pos && el.pos[0]) || 0) + n.x * OFF, ((el.pos && el.pos[1]) || 0) + n.y * OFF, ((el.pos && el.pos[2]) || 0) + n.z * OFF);
+  mesh.renderOrder = 995;
+}
+
 // A cylinder between two points (anchor rod / bolt shank).
 function placeBar(mesh, a, b, r, radial) {
   const A = V(a[0], a[1], a[2]), B = V(b[0], b[1], b[2]);
@@ -384,6 +421,7 @@ function placeElement(mesh, el) {
   switch (el.kind || 'box') {
     case 'box': placeMember(mesh, el.from, el.to, el); return true;
     case 'extrusion': placeExtrusion(mesh, el); return true;
+    case 'image': placeImage(mesh, el); return true;
     case 'plate': placePlate(mesh, el); return true;
     case 'rod': placeBar(mesh, el.from, el.to, Math.max((el.d || 20) / 2, 0.5), 16); return true;
     case 'nut': placeNut(mesh, el); return true;
@@ -405,9 +443,12 @@ function materialFor(groupKey) {
 }
 
 function clearRoot() {
-  for (const m of meshById.values()) {
+  for (const [id, m] of meshById) {
     m.geometry.dispose();
     if (m.userData._selMat) m.userData._selMat.dispose(); // per-mesh selection clone (else it leaks per rebuild)
+    // A placed detail (Slice 4) owns a per-mesh MeshBasicMaterial + its image texture (NOT a shared baseMat);
+    // dispose both or every rebuild — which happens on each edit — leaks the old material + GPU texture.
+    if (String(id).startsWith('det:') && m.material) { if (m.material.map) m.material.map.dispose(); m.material.dispose(); }
     root.remove(m);
   }
   meshById.clear();
@@ -511,6 +552,7 @@ function buildFromScene(sc) {
   buildGrid(box);
   buildStructGrid();
   buildRefLines();
+  syncMemberLabels();   // refresh the member-label pool from the (possibly edited) member set
   if (isolatedIds) { isolatedIds = new Set([...isolatedIds].filter((id) => meshById.has(id))); if (!isolatedIds.size) { isolatedIds = null; if (api && api.onIsolateChange) api.onIsolateChange(false); } } // drop ids an edit removed; if none survive, exit isolation + refresh the host's Show-all button
   if (connHidden.size) connHidden = new Set([...connHidden].filter((id) => meshById.has(id)));   // drop per-part hides whose mesh an edit removed
   applyGroupVisibility(); applyDisplayMode();
@@ -551,6 +593,74 @@ function buildRefLines() {
 }
 function setRefLine(on) { refLineOn = !!on; buildRefLines(); }
 
+// ---- Insert a vectored detail (Slice 4): arm a placement pick; the editor owns the entry ----
+// Mirrors setClipMode's arm/disarm. `pending` = {name,url} the editor's Insert menu queued; the
+// placement click raycasts a member face (anchor) or the ground plane and hands the point + basis +
+// anchor id back to the editor, which creates + selects the detail and records the create request.
+function setInsertMode(on, pending) {
+  insertMode = !!on;
+  insertPending = insertMode ? (pending || insertPending) : null;
+  if (insertMode) { if (api && api.disarmTransform) api.disarmTransform(); if (api && api.disarmAdd) api.disarmAdd(); setClipMode(null); }
+  if (canvasEl) canvasEl.style.cursor = insertMode ? 'crosshair' : 'default';
+  if (api && api.onInsertModeChange) api.onInsertModeChange(insertMode);
+}
+function insertModeOn() { return insertMode; }
+// The placement raycast: a member face under the cursor gives the point + its basis + the member id to
+// anchor to; empty space drops the detail on the ground plane (z=0) with a default vertical orientation.
+function insertPick(cx, cy) {
+  camera.updateMatrixWorld(); root.updateMatrixWorld(true);
+  const rect = canvasEl.getBoundingClientRect(); if (!rect.width || !rect.height) return null;
+  const ndc = new THREE.Vector2(((cx - rect.left) / rect.width) * 2 - 1, -((cy - rect.top) / rect.height) * 2 + 1);
+  raycaster.setFromCamera(ndc, camera);
+  const hit = raycaster.intersectObjects([...meshById.values()].filter((m) => m.visible && !String(m.userData.id || '').startsWith('det:')), false)[0];
+  if (hit && hit.face) {
+    const n = hit.face.normal.clone().transformDirection(hit.object.matrixWorld).normalize();
+    const b = planeBasis([n.x, n.y, n.z]);
+    return { point: [hit.point.x, hit.point.y, hit.point.z], u: b.u, n: [n.x, n.y, n.z], anchorId: hit.object.userData.id || null };
+  }
+  const g = new THREE.Vector3();
+  if (!raycaster.ray.intersectPlane(new THREE.Plane(new THREE.Vector3(0, 0, 1), 0), g)) return null;
+  return { point: [g.x, g.y, g.z], u: [1, 0, 0], n: [0, -1, 0], anchorId: null };
+}
+
+// ---- Member labels (Slice 4): a toggled overlay of each member's mark/id, glued to the model ----
+function setLabelsOn(on) { labelsOnFlag = on === undefined ? !labelsOnFlag : !!on; syncMemberLabels(); }
+// Build/refresh one themed label div per member (reused across rebuilds); text = mark or id.
+function syncMemberLabels() {
+  if (!memberLabelHost || !api) return;
+  const ms = labelsOnFlag ? members() : [];
+  while (memberLabelPool.length < ms.length) {
+    const el = document.createElement('div');
+    el.style.cssText = 'position:absolute;transform:translate(-50%,-50%);pointer-events:none;background:var(--panel,#0f172a);color:var(--mut,#94a3b8);border:1px solid var(--line,#1e293b);border-radius:4px;padding:1px 5px;font:11px system-ui;white-space:nowrap;box-shadow:0 1px 4px rgba(0,0,0,.4)';
+    memberLabelHost.appendChild(el); memberLabelPool.push(el);
+  }
+  const ppf = api.ptPerFt(), dtos = api.defaultTosMm();
+  for (let i = 0; i < memberLabelPool.length; i++) {
+    const el = memberLabelPool[i], m = ms[i];
+    if (!m || !Array.isArray(m.wp) || m.wp.length < 2) { el.style.display = 'none'; el._mid = null; continue; }
+    const g = memberGeometry(m, ppf, dtos);
+    el._mid = [(g.line[0][0] + g.line[1][0]) / 2, (g.line[0][1] + g.line[1][1]) / 2, (g.line[0][2] + g.line[1][2]) / 2];
+    el.textContent = m.mark || m.id || '';
+    el.style.display = 'block';
+  }
+}
+// Project each member label's 3D midpoint → screen px (called from the render loop, like the dim labels).
+function positionMemberLabels() {
+  if (!memberLabelHost) return;
+  if (!labelsOnFlag || (canvasEl && canvasEl.style.display === 'none')) { memberLabelHost.style.display = 'none'; return; }
+  memberLabelHost.style.display = 'block';
+  const rect = canvasEl.getBoundingClientRect();
+  for (const el of memberLabelPool) {
+    if (el.style.display === 'none' || !el._mid) continue;
+    if (isPointClipped(el._mid)) { el.style.visibility = 'hidden'; continue; }
+    const v = new THREE.Vector3(el._mid[0], el._mid[1], el._mid[2]).project(camera);
+    if (v.z > 1 || v.x < -1 || v.x > 1 || v.y < -1 || v.y > 1) { el.style.visibility = 'hidden'; continue; }
+    el.style.left = (rect.left + (v.x * 0.5 + 0.5) * rect.width) + 'px';
+    el.style.top = (rect.top + (-v.y * 0.5 + 0.5) * rect.height) + 'px';
+    el.style.visibility = 'visible';
+  }
+}
+
 // ---- structural grid (Tekla-style): dashed lines per Z level live in the SCENE (so clips section
 // them, like Tekla); the label bubbles + level tags are sprites in the UNCLIPPED overlay pass, so the
 // wayfinding survives sectioning/work-area (the UX review's clip-regression guard). Data comes from
@@ -738,8 +848,9 @@ function setDisplayMode(m) { displayMode = m; applyDisplayMode(); }
 // solid → opaque; wire → wireframe; xray → translucent, no depth write. Applied to whatever material
 // each mesh currently carries (shared profile material OR its selection clone).
 function applyDisplayMode() {
-  for (const mesh of meshById.values()) {
+  for (const [id, mesh] of meshById) {
     const mat = mesh.material; if (!mat) continue;
+    if (String(id).startsWith('det:')) continue;   // placed details (Slice 4) own their transparency + opacity — display mode must not override them
     if (displayMode === 'wire') { mat.wireframe = true; mat.transparent = false; mat.opacity = 1; mat.depthWrite = true; }
     else if (displayMode === 'xray') { mat.wireframe = false; mat.transparent = true; mat.opacity = 0.25; mat.depthWrite = false; }
     else { mat.wireframe = false; mat.transparent = false; mat.opacity = 1; mat.depthWrite = true; }
@@ -1132,6 +1243,7 @@ function onKey(e) {
   const ae = document.activeElement; if (ae && /^(INPUT|SELECT|TEXTAREA)$/.test(ae.tagName)) return;
   if (pending && pending.clipDrag && e.key === 'Escape') { e.preventDefault(); const p = pending; if (p.plane) p.clip.point = p.prePoint; else p.clip.box.copy(p.preBox); rebuildClipPlanes(p.clip); applyClips(); renderClipGizmo(); pending = dragging = null; if (controls) controls.enabled = true; if (readout) readout.style.display = 'none'; return; } // Esc mid-drag → undo the handle move
   if (wpMode && e.key === 'Escape') { e.preventDefault(); if (wpMode === '3pt' && wpDraft && wpDraft.length) { wpDraft.pop(); updateStatusChip(); } else { wpMode = null; wpDraft = null; marker.visible = false; canvasEl.style.cursor = 'default'; reflectWpBar(); updateStatusChip(); } return; } // Esc steps a 3pt pick back, else disarms the set-plane mode
+  if (insertMode && e.key === 'Escape') { e.preventDefault(); setInsertMode(false); if (api && api.toast) api.toast('Insert cancelled'); return; }   // Esc disarms the detail-placement pick
   if (clipMode && e.key === 'Escape') { e.preventDefault(); if (clipMode === 'box' && clipBoxDraft) { if (clipBoxDraft.b) clipBoxDraft.b = null; else clipBoxDraft = null; setClipPreview(null); updateStatusChip(); } else setClipMode(null); return; } // Esc steps back: height→footprint→cancel, else disarms the pick
   if (isolatedIds && e.key === 'Escape' && !dimMode3d) { e.preventDefault(); clearIsolation(); return; } // Esc exits isolate-selected (the dim tool's own Esc wins while it's armed)
   if ((e.key === ' ' && e.shiftKey) || ((e.key === 'z' || e.key === 'Z') && e.altKey)) { e.preventDefault(); frameSelection(); return; } // zoom-selected (Tekla Shift+Space / viewer Alt+Z)
@@ -1198,6 +1310,10 @@ function setSelection(ids) {
   const set = ids instanceof Set ? ids : new Set(ids || []);
   for (const [id, mesh] of meshById) {
     const on = set.has(id);
+    // A placed detail (Slice 4) uses a textured MeshBasicMaterial with no `.emissive` — the member
+    // material swap below would drop its texture (and MeshBasicMaterial has no emissive to glow). Keep
+    // its plane and tint the map (blue when selected, white = untinted otherwise) as the selection cue.
+    if (String(id).startsWith('det:')) { if (mesh.material && mesh.material.color) mesh.material.color.setHex(on ? 0x93c5fd : 0xffffff); continue; }
     // Selected → a per-mesh clone that glows (so one selected member doesn't tint its whole profile
     // group). Deselected → back to the SHARED profile material (its real colour).
     mesh.material = on ? selectedMaterial(mesh) : materialFor(mesh.userData.group);
@@ -2046,6 +2162,7 @@ function onDown(e) {
     return; }
   if (addActive()) { e.stopPropagation(); controls.enabled = true; drClick(e); return; }  // Add-member armed (editor state) → two plane picks draw a member
   if (cmActive()) { if (tfClick(e)) { e.stopPropagation(); controls.enabled = true; return; } }  // Move/Copy armed (editor state) → picks land on the working plane; an empty-selection click falls through to select
+  if (insertMode) { e.stopPropagation(); const r = insertPick(e.clientX, e.clientY); if (r && api && api.onInsertPlace) api.onInsertPlace(r, insertPending); setInsertMode(false); return; }  // armed: place the queued detail at the pick, then disarm (one shot)
   if (clipMode === 'plane') { e.stopPropagation(); addClipPlaneAtScreen(e.clientX, e.clientY); return; } // armed: left-click a face → place a clip plane (stays armed)
   if (clipMode === 'box') { e.stopPropagation(); onClipBoxClick(e); return; }                            // armed: 2-corner clip-box draw on the floor plane
   if (selectedClipIds.size) { let ch = null; try { ch = pickClipHandle(e.clientX, e.clientY); } catch { ch = null; } if (ch) { e.stopPropagation(); controls.enabled = false; downXY = [e.clientX, e.clientY]; startClipDrag(ch, e); return; } } // grab a clip handle (plane dot / box face) → drag it
@@ -2146,8 +2263,8 @@ function onMove(e) {
   if (pending.epDrag) { onMoveEndpoint(e); return; }
   if (!pending.grab || !pending.origMm) return;
   if (!dragging && Math.hypot(e.clientX - downXY[0], e.clientY - downXY[1]) <= DRAG_TOL_PX) return;
-  const canDrag = pending.copy || (api && api.dragMoveEnabled && api.dragMoveEnabled());
-  if (!canDrag) { if (!pending._hinted) { pending._hinted = true; if (api && api.dragMoveHint) api.dragMoveHint(); } return; }  // drag-move OFF, plain grab → never translate; onUp selects the member (dragging stays false)
+  const canDrag = api && api.dragMoveEnabled && api.dragMoveEnabled();   // the toggle gates BOTH gestures — plain drag (move) AND Ctrl+drag (copy)
+  if (!canDrag) { if (!pending._hinted) { pending._hinted = true; if (api && api.dragMoveHint) api.dragMoveHint(); } return; }  // drag-move/copy OFF → never translate; onUp selects the grabbed member (dragging stays false)
   if (!dragging) pending.mode = pending.copy ? 'copy' : (e.altKey ? 'vertical' : 'plan'); // lock the mode at drag start (copy is plan-only; Alt = vertical/elevation)
   dragging = pending;
   if (pending.mode === 'vertical') { onMoveVertical(e); return; }
@@ -2244,7 +2361,7 @@ function onUp(e) {
     return;
   }
   if (!wasDragging) {
-    if (p.id && !p.geo && !p.epDrag && !p.copy && moved > DRAG_TOL_PX && api && api.onSelect) { api.onSelect(p.id, false); return; } // a blocked drag (drag-move OFF) selects the GRABBED member, not whatever's under the release point
+    if (p.id && !p.geo && !p.epDrag && moved > DRAG_TOL_PX && api && api.onSelect) { api.onSelect(p.id, p.ctrl); return; } // a blocked drag (drag-move/copy OFF) acts on the GRABBED member, not whatever's under the release point (Ctrl toggles it)
     clickSelect(e.clientX, e.clientY, p.ctrl); return; // click → cycle-pick: member, or a derived part stacked on it at a joint (Ctrl+click = additive select)
   }
   if (p.copy) { // Ctrl+drag → commit a copy at the plan delta (the editor clones + selects); the ghost was the preview
@@ -2343,10 +2460,10 @@ function updateStatusChip() {
   else if (isolatedIds) txt = `Isolated: ${isolatedIds.size} · Show all to restore`;
   // A read-only host (the vector 3D viewer) supplies its own idle hint — the default speaks editing
   // verbs (move/stretch/elevate) a viewer's no-op api would silently ignore. Otherwise the default
-  // tells the truth about the drag-move toggle (grab-to-move ON vs click-to-select + Ctrl+drag-copy).
+  // tells the truth about the drag-move/copy toggle (ON = drag-move + Ctrl-drag-copy; OFF = click-select).
   else if (api && typeof api.statusHint === 'function' && api.statusHint()) txt = api.statusHint();
   else { const canDrag = api && api.dragMoveEnabled && api.dragMoveEnabled();
-    txt = (canDrag ? 'Drag to move · ' : 'Click to select · Ctrl+drag to copy · ') + 'ends to stretch · Alt+drag elevation · right-drag orbit · dbl-click to zoom in'; }
+    txt = (canDrag ? 'Drag to move · Ctrl+drag to copy · ' : 'Click to select · ') + 'ends to stretch · Alt+drag elevation · right-drag orbit · dbl-click to zoom in'; }
   hoverChip.textContent = txt;
   hoverChip.style.left = (rect.left + rect.width / 2) + 'px'; hoverChip.style.transform = 'translateX(-50%)';
   hoverChip.style.top = (rect.bottom - 30) + 'px';
@@ -2357,9 +2474,11 @@ function show() { if (controls) controls.enabled = true; if (canvasEl) { canvasE
 function hide() {
   if (dimMode3d) toggleDimTool();              // disarm the dim tool + sync its toolbar (no stale draft/armed state on return)
   if (clipMode) setClipMode(null);             // disarm the clip-plane pick too (no stale armed state on return)
+  if (insertMode) setInsertMode(false);        // disarm a pending detail placement — else the first click on return would place it
   if (wpMode) { wpMode = null; wpDraft = null; if (marker) marker.visible = false; reflectWpBar(); }  // drop an in-progress set-plane pick — else a stale face/3pt pick steals the first click on return
   cmClear3d(); drClear3d();                     // and any 3D Move/Copy or draw draft/ghosts
   if (dimLabelHost) dimLabelHost.style.display = 'none'; // the loop that hides labels is about to stop — hide synchronously so none are stranded
+  if (memberLabelHost) memberLabelHost.style.display = 'none'; // member labels ride the same about-to-stop loop — hide them too, or they strand over the 2D UI
   clearCopyGhost();                                // drop a stale Ctrl+drag copy ghost on the way out
   if (canvasEl) canvasEl.style.display = 'none'; if (hoverChip) hoverChip.style.display = 'none'; if (rafId) { cancelAnimationFrame(rafId); rafId = null; }
 }
@@ -2376,6 +2495,8 @@ function dispose() {
   window.removeEventListener('keydown', onKey);
   for (const ovl of [readout, hoverChip, rubber, dimLabelHost]) if (ovl && ovl.parentNode) ovl.parentNode.removeChild(ovl);
   dimLabelHost = null; dimLabelPool.length = 0;
+  if (memberLabelHost && memberLabelHost.parentNode) memberLabelHost.parentNode.removeChild(memberLabelHost);
+  memberLabelHost = null; memberLabelPool.length = 0; labelsOnFlag = false; insertMode = false; insertPending = null;
   for (const w of [cube, triad]) {   // both mini-widgets own a WebGL context — leak one and re-init eventually hits the browser's context cap
     if (!w) continue;
     w.scene.traverse((o) => { if (o.geometry) o.geometry.dispose(); const mm = Array.isArray(o.material) ? o.material : (o.material ? [o.material] : []); for (const m of mm) { if (m.map) m.map.dispose(); m.dispose(); } });
@@ -2456,6 +2577,9 @@ window.Steel3DView = {
   init, show, hide, rebuild, setSelection, isReady, dispose,
   setProjection, projection, setDisplayMode, mode: () => displayMode, frameAll, frameSelection, applyView,
   setRefLine, refLine: () => refLineOn,
+  setInsertMode, insertMode: insertModeOn,          // arm/query the detail-placement pick (Slice 4)
+  setLabelsOn, labelsOn: () => labelsOnFlag,          // member mark/id label overlay toggle
+  syncMemberLabels,                                  // editor calls after a mark/id edit to refresh labels
   refreshGrid: buildStructGrid,          // grid edited in the panel → re-render without a full rebuild
   gridInfo: () => ({ lines: structGridGroup ? 1 : 0, labels: gridLabelGroup ? gridLabelGroup.children.length : 0 }),   // test helper
   toggleGroup, setGroupsHidden, setIdsHidden, connHiddenIds: () => [...connHidden], soloToggle, setSoloGroups, showAllGroups, groupState, getGroups,

package/dist/web/steel-editor.html

@@ -25,6 +25,11 @@
  #zoombar{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:6px 10px;box-shadow:0 4px 14px rgba(0,0,0,.45);z-index:5}
  #zoombar button{padding:1px 9px;font-size:15px}
  #zoombar input[type=range]{width:120px;padding:0;accent-color:var(--brand)}
+ /* placed-detail inspector (Slice 4): ft-in fields in a row + a themed opacity slider (no native widgets) */
+ .detrow{display:flex;gap:6px;margin:2px 0}
+ .detf{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;font-size:11px;color:var(--mut)}
+ .detf input{width:100%}
+ #detOpacity{accent-color:var(--brand);flex:1;min-width:0}
  #zoombar #zPct{min-width:40px;text-align:right;color:var(--mut);font-variant-numeric:tabular-nums}
  aside{width:240px;flex:none;background:var(--panel);border-left:1px solid var(--line);padding:12px;overflow:auto}
  aside h3{margin:0 0 8px;font-size:12px;color:var(--mut);text-transform:uppercase;letter-spacing:.05em}
@@ -98,10 +103,10 @@
  #moreMenu .msnap-sect{display:none} #moreMenu .msnap-sect.open{display:block}
  #moreMenu button.msnap{display:flex;align-items:center;gap:0}
  #moreMenu button.msnap.on{color:var(--text)}   /* the switch carries the state — don't also brand the text (reads as an armed tool elsewhere in this menu) */
- #moreMenu .mck{position:relative;width:26px;height:14px;margin-right:9px;border-radius:7px;border:1px solid var(--line);background:#0b1220;flex:none;transition:background-color .15s,border-color .15s}
- #moreMenu .mck::after{content:'';position:absolute;top:1px;left:1px;width:10px;height:10px;border-radius:50%;background:var(--mut);transition:transform .15s,background-color .15s}
- #moreMenu button.msnap.on .mck{background:rgba(59,130,246,.28);border-color:var(--brand)}
- #moreMenu button.msnap.on .mck::after{transform:translateX(12px);background:var(--brand)}
+ #moreMenu .mck,.cmmenu .mck{position:relative;width:26px;height:14px;margin-right:9px;border-radius:7px;border:1px solid var(--line);background:#0b1220;flex:none;transition:background-color .15s,border-color .15s}   /* delicate CSS-only slider switch — shared by the ⋯ Snapping rows and the Move/Copy → Drag-to-move/copy toggle */
+ #moreMenu .mck::after,.cmmenu .mck::after{content:'';position:absolute;top:1px;left:1px;width:10px;height:10px;border-radius:50%;background:var(--mut);transition:transform .15s,background-color .15s}
+ #moreMenu button.msnap.on .mck,.cmmenu #dragMoveB.on .mck{background:rgba(59,130,246,.28);border-color:var(--brand)}
+ #moreMenu button.msnap.on .mck::after,.cmmenu #dragMoveB.on .mck::after{transform:translateX(12px);background:var(--brand)}
  #moreMenu button.msnap .sg{display:inline-block;width:17px;color:#22d3ee;opacity:.5;flex:none;transition:opacity .15s}
  #moreMenu button.msnap.on .sg{opacity:1}
  /* Quick-access snap bar — always-expanded row of glyph toggles, bottom-right of the canvas (both views); reuses the brand-fill "on" toolbar language */
@@ -161,9 +166,9 @@
 .cmwrap{position:relative;display:inline-flex}
 #xfB{white-space:nowrap}
 #xfB.on{background:var(--brand);border-color:var(--brand);color:#fff}   /* a transform tool is armed */
-.cmmenu .mstate{margin-left:auto;font-size:11px;color:var(--mut);padding-left:12px}   /* the Drag-to-move on/off state, right-aligned in its menu row */
-.cmmenu #dragMoveB.on .mstate{color:var(--brand)}
-.cmmenu #dragMoveB.on{color:var(--text)}
+/* Drag-to-move/copy menu item wears the shared .mck slider switch (rules above, shared with ⋯ Snapping). */
+.cmmenu #dragMoveB{display:flex;align-items:center;justify-content:flex-start;gap:0}
+.cmmenu #dragMoveB.on{color:var(--text)}   /* the switch carries the state — don't also brand the text (reads as an armed tool) */
 .cmmenu{display:none;position:absolute;left:0;top:calc(100% + 6px);min-width:200px;background:var(--panel);border:1px solid #475569;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.5);padding:4px 0;z-index:30}
 .cmmenu.open{display:block}
 .cmmenu button{display:flex;justify-content:space-between;gap:12px;width:100%;text-align:left;background:transparent;border:0;border-radius:0;padding:7px 12px;color:var(--text);white-space:nowrap}
@@ -369,7 +374,7 @@
    <button id=cpArrB>Copy array…</button>
    <button id=cpLevelB>Copy to level…</button>
    <div class=mlabel>Dragging</div>
-   <button id=dragMoveB role=menuitemcheckbox aria-checked=false title="When ON, left-dragging a member moves it. When OFF (default), a click only selects — members can't be nudged by accident (Move and Ctrl+drag-copy still work). Applies to 2D and 3D.">Drag to move<span class=mstate id=dragMoveState>Off</span></button>
+   <button id=dragMoveB role=menuitemcheckbox aria-checked=false title="When ON, left-dragging a member moves it and Ctrl+drag copies it. When OFF (default), a drag does neither — a click only selects, so members can't be nudged by accident (the Move and Copy tools still work). Applies to 2D and 3D."><span class=mck aria-hidden=true></span>Drag to move/copy</button>
   </div>
  </div>
  <button id=askAiBtn>Ask AI ▸</button>
@@ -433,6 +438,7 @@
    <span class=tb-sep></span>
    <!-- Measure / annotate -->
    <button id=m3dRef data-tip="Show each member's reference line (centreline)">Ref line</button>
+   <button id=m3dLabels data-tip="Show each member's mark/id label in the 3D view">Labels</button>
    <button id=m3dDim data-tip="Measure — click two snapped points (D); axis Free/X/Y/Z, Alt = vertical; right-click = restrict snap">Dimension</button>
    <div class=seg-group id=m3dDimAxis style="display:none"><button data-d3axis=free class=on data-tip="Free 3D measurement (F)">Free</button><button data-d3axis=x data-tip="Lock measurement to X (X)">X</button><button data-d3axis=y data-tip="Lock measurement to Y (Y)">Y</button><button data-d3axis=z data-tip="Lock to Z / vertical (Z); Alt = quick vertical">Z</button></div>
    <button id=m3dDimShow data-tip="Show or hide placed 3D dimensions" style="display:none">Hide dims</button>
@@ -447,6 +453,11 @@
      <button data-clip=clear class=mdanger data-tip="Remove every clip">Clear all clips</button>
     </div>
    </div>
+   <div class=m3dwrap>
+    <button id=m3dInsert data-tip="Insert a 2D detail image into the 3D scene, near a beam">Insert ▾</button>
+    <div id=m3dInsertMenu class=m3dmenu role=menu></div>
+    <input id=insFile type=file accept="image/*" style="display:none">
+   </div>
    <div class=m3dwrap>
     <button id=m3dWp data-tip="Working plane — every 3D pick (Move/Copy, next: drawing) lands on it. Set it from a face, 3 points, or a principal plane.">◇ Plane ▾</button>
     <div id=m3dWpMenu class=m3dmenu role=menu>
@@ -594,6 +605,7 @@ async function boot() {
   C.custom_details = C.custom_details || {};
   C.profile_colors = C.profile_colors || {};
   if(!Array.isArray(C.dims3d))C.dims3d=[];   // model-global draft-only 3D dimensions
+  if(!Array.isArray(C.detail_placements))C.detail_placements=[];   // model-global draft-only placed detail images (Slice 4)
   if(!C.dim_overlays||typeof C.dim_overlays!=='object'||Array.isArray(C.dim_overlays))C.dim_overlays={bolt_pitch:true,edge_clearance:true,cope_size:true,base_plate:true,anchor_depth:true};  // model-global legend DIMENSIONS toggles — all on by default
   main();
   // SSE: listen for external contract writebacks (e.g. the terminal AI PUT a revision).
@@ -762,7 +774,7 @@ const autofillTOS=syncDefaults;
 // live on one foundation sheet; the reader's ids are unique within the set that gets detailed). The one
 // unsupported edge is two DIFFERENT sheets each detailing a column that happens to share an id — then the
 // slice would over-match. Tracked as a reader-side id-uniqueness hardening. dims3d rides its own persistence.
-function snapshot(){const pm=new Set((P.members||[]).map(m=>m.id));return JSON.stringify({members:P.members,dims:P.dims||[],frame:P.frame||null,grid:P.grid||null,joints:(C.joints||[]).filter(j=>j&&pm.has(j.main)),clips:(window.Steel3DView&&window.Steel3DView.clipState)?window.Steel3DView.clipState():null});}  // clips/work area are view-state but ride the contract undo stack; grid is per-plan (like frame/dims) so the per-plan stack restores it safely
+function snapshot(){const pm=new Set((P.members||[]).map(m=>m.id));return JSON.stringify({members:P.members,dims:P.dims||[],frame:P.frame||null,grid:P.grid||null,joints:(C.joints||[]).filter(j=>j&&pm.has(j.main)),clips:(window.Steel3DView&&window.Steel3DView.clipState)?window.Steel3DView.clipState():null,details:(C.detail_placements||[])});}  // clips/work area are view-state but ride the contract undo stack; grid is per-plan (like frame/dims) so the per-plan stack restores it safely. details = model-global placed images, captured whole each snapshot so undo/redo is cross-plan-safe.
 // Cross-plan undo (spec §4.5): a commit that also touches ANOTHER plan captures that plan's member
 // slice too; undo/redo restore it by sheet. The entry lives on the CURRENT plan's stack — undoing
 // from the plan where the command ran is the supported path (same per-plan-stack rule as everything).
@@ -797,8 +809,9 @@ function apply(json){const d=JSON.parse(json);
    if(Array.isArray(d.others))for(const o of d.others){const tp=C.plans.find(p=>p.sheet===o.sheet);
      if(tp&&tp!==P)tp.members=(o.members||[]).map(ensureMeta);
      else if(!tp){console.error('undo: sheet '+o.sheet+' not found — cross-plan slice skipped');toast('Undo couldn’t restore sheet '+o.sheet);}}}  // restore THIS plan's joint slice: drop joints owned by this plan (old ∪ restored member ids), re-add the snapshot's — OTHER sheets' joints stay untouched. grid is per-plan (restored above); 'others' = the cross-plan slice a to-level commit captured. dims3d rides its own path.
+ if('details' in d)C.detail_placements=Array.isArray(d.details)?d.details:[];   // restore the model-global placed details (Slice 4)
  updCS();
- selIds=new Set([...selIds].filter(id=>byId(id)));
+ selIds=new Set([...selIds].filter(id=>byId(id)||/^det:/.test(id)));   // keep a selected placed-detail id (det:…) — it isn't a member
  selDimIds.forEach(id=>{if(!(P.dims||[]).some(x=>x.id===id))selDimIds.delete(id);});  // drop any dim selection the undo removed
  if(sel3dDimIds.size){const ok=new Set((C.dims3d||[]).map(x=>x.id));sel3dDimIds=new Set([...sel3dDimIds].filter(id=>ok.has(id)));}  // drop stale 3D-dim selections
  dimDraft=null;dimChainPrev=null;dimPrevClear();   // undo/redo changed geometry under the tool → abandon any in-progress dim placement / chain (else the chain head points at a removed segment)
@@ -819,7 +832,7 @@ function setSaved(state,msg){const el=document.getElementById('saveStat');if(!el
  else if(state==='err'){el.classList.add('err');el.textContent='Save failed';}
  else el.textContent=msg||'Auto-save on';}
 function persist(){try{localStorage.setItem(LSKEY,JSON.stringify({sig:dataSig(),ts:Date.now(),active:C.active,
-   custom_details:C.custom_details, profile_colors:C.profile_colors, target_confidence:C.target_confidence, dims3d:C.dims3d, dim_overlays:C.dim_overlays, joints:C.joints,
+   custom_details:C.custom_details, profile_colors:C.profile_colors, target_confidence:C.target_confidence, dims3d:C.dims3d, dim_overlays:C.dim_overlays, joints:C.joints, detail_placements:C.detail_placements,
    plans:C.plans.map(p=>({sheet:p.sheet,members:p.members,default_tos:p.default_tos,details:p.details,dims:p.dims,frame:p.frame||null,grid:p.grid||null}))}));setSaved('ok');}catch(e){setSaved('err');console.error('local autosave failed',e);}}
 // --- server-side draft save: PUT the FULL contract C — this is the copy Approve bakes.
 // localStorage (persist) stays the instant per-browser draft cache; this is the durable one.
@@ -851,6 +864,7 @@ function restoreSaved(){try{const raw=localStorage.getItem(LSKEY);if(!raw)return
    if(d.target_confidence!=null)C.target_confidence=d.target_confidence;
    C.plans.forEach(p=>{const s=by[p.sheet];if(s){if(Array.isArray(s.members))p.members=s.members;if(s.default_tos!=null)p.default_tos=s.default_tos;if(Array.isArray(s.details))p.details=s.details;if(Array.isArray(s.dims))p.dims=s.dims;if('frame' in s)p.frame=s.frame||null;if('grid' in s)p.grid=s.grid||null;p.autofilled=true;}});
    if(Array.isArray(d.dims3d))C.dims3d=d.dims3d;   // restore model-global 3D dims from the local draft
+   if(Array.isArray(d.detail_placements))C.detail_placements=d.detail_placements;   // restore placed details
    if(d.dim_overlays&&typeof d.dim_overlays==='object'&&!Array.isArray(d.dim_overlays)){const o=d.dim_overlays;C.dim_overlays={bolt_pitch:o.bolt_pitch!==false,edge_clearance:o.edge_clearance!==false,cope_size:o.cope_size!==false,base_plate:o.base_plate!==false,anchor_depth:o.anchor_depth!==false};}   // restore the legend DIMENSIONS toggles — sanitised to the known boolean keys (a corrupt/partial draft can't desync the legend from what's drawn; on unless explicitly false)
    if(Array.isArray(d.joints))C.joints=d.joints;   // restore model-global connection joints (base plates) from the local draft
    if(d.active!=null)C.active=d.active;return true;}catch(e){console.warn('discarding corrupt local draft',e);return false;}}
@@ -1358,6 +1372,40 @@ function panel(){
   const ap=document.getElementById('addProf');
   ap.oninput=ap.onchange=e=>{addProfile=e.target.value.toUpperCase().replace(/ /g,'');};
   return;}
+ // A placed detail image (Slice 4) selected — its own inspector: Position / Orientation / Appearance +
+ // "Ask AI to build this" (records a modify request) + Remove. Every field mutation rides edit() → undoable.
+ // HTML built exactly like the connection-part inspector below: every dynamic value is esc()-escaped
+ // (the file's HTML-escaper), numbers are cast to Number — no untrusted markup reaches innerHTML.
+ {const dsel=[...selIds];
+  const detId=dsel.length===1&&/^det:/.test(dsel[0])?dsel[0].slice(4):null;
+  const dp=detId?(C.detail_placements||[]).find(x=>x&&x.id===detId):null;
+  if(dp){
+   const inMM=v=>{const pl=parseLen(v);return pl==null?NaN:pl*25.4;};                 // ft-in field → mm
+   const ftin=mm=>esc(fmtFtIn(Number(mm||0)/25.4));
+   const sec=t=>`<div class=divrow><hr><span class=sect style="margin:0">${esc(t)}</span><hr></div>`;
+   const num=(id,lbl,val)=>`<label class=detf><span>${esc(lbl)}</span><input id=${esc(id)} inputmode=decimal value="${val}" autocomplete=off></label>`;  // id/lbl are literals; val is ftin() (already esc'd)
+   const opPct=Math.round((dp.opacity==null?1:dp.opacity)*100);
+   const host=dp.anchorId?('On <b>'+esc(dp.anchorId)+'</b> · '):'';
+   const html=`<h3>Placed detail <span style="color:var(--mut);font-weight:400">· ${esc(dp.detailName||'')}</span></h3>`
+     +`<div class="row hint" style="margin-top:2px">${host}flat image plane — a reference (v1). Ask the AI to build real geometry.</div>`
+     +sec('Position')+`<div class=detrow>${num('detX','X',ftin(dp.pos&&dp.pos[0]))}${num('detY','Y',ftin(dp.pos&&dp.pos[1]))}${num('detZ','Z',ftin(dp.pos&&dp.pos[2]))}</div>`
+     +sec('Orientation')+`<div class=detrow><label class=detf><span>Rotation °</span><input id=detRot inputmode=decimal value="${esc(String(dp.rotZ||0))}" autocomplete=off></label><label class=detf><span>Size</span><input id=detSize inputmode=decimal value="${ftin(dp.size||1000)}" autocomplete=off></label></div>`
+     +sec('Appearance')+`<div class=detrow style="align-items:center"><span class=detf style="flex:none">Opacity</span><input id=detOpacity type=range min=0 max=100 value="${opPct}"><span id=detOpacityV class=edec style="min-width:36px;text-align:right;font-variant-numeric:tabular-nums">${opPct}%</span></div>`
+     +`<div class=divrow><hr></div>`
+     +`<div class="row f" style="gap:6px;flex-wrap:wrap"><button class=ghostw id=detAsk title="Record a request for your terminal AI to build/adjust this detail">Ask AI to build this…</button><button class=danger id=detRemove>Remove detail</button></div>`;
+   p.innerHTML=html;
+   const find=()=>(C.detail_placements||[]).find(x=>x&&x.id===detId);
+   const wr=(id,fn)=>{const i=document.getElementById(id);if(i)i.onchange=e=>fn(e.target.value);};
+   const setPos=(k,val)=>{const mm=inMM(val);if(!isFinite(mm))return;edit(()=>{const d=find();if(d){d.pos=(d.pos||[0,0,0]).slice();d.pos[k]=mm;}});};
+   wr('detX',v=>setPos(0,v));wr('detY',v=>setPos(1,v));wr('detZ',v=>setPos(2,v));
+   wr('detRot',v=>{const n=Number((v||'').replace(',','.'));if(!isFinite(n))return;edit(()=>{const d=find();if(d)d.rotZ=n;});});
+   wr('detSize',v=>{const mm=inMM(v);if(!isFinite(mm)||mm<=0)return;edit(()=>{const d=find();if(d)d.size=mm;});});
+   {const r=document.getElementById('detOpacity'),ov=document.getElementById('detOpacityV');
+    if(r){r.oninput=()=>{ov.textContent=r.value+'%';};r.onchange=()=>{const op=Math.max(0,Math.min(1,Number(r.value)/100));edit(()=>{const d=find();if(d)d.opacity=op;});};}}
+   {const ab=document.getElementById('detAsk');if(ab)ab.onclick=()=>detailRequest('modify',dp);}
+   {const rm=document.getElementById('detRemove');if(rm)rm.onclick=()=>edit(()=>{C.detail_placements=(C.detail_placements||[]).filter(x=>x&&x.id!==detId);selIds.clear();});}
+   return;
+  }}
  // A derived CONNECTION PART selected in 3D (plate / bolt / weld / cope / stiffener) — show its details
  // read-only (parts have no own state; their params live on the parent joint) + a jump to that member.
  {const selList=[...selIds];
@@ -1809,12 +1857,13 @@ function dimRefreshPrev(){if(!dimMode||!dimDraft||!dimLastPtr)return;
 // array N×M. Same shell as the Dimension tool: armed flag routes the pointer handlers, the preview
 // lives in its own <g> (no render() until commit), commits go through edit()/pushUndo. ---
 let cmTool=null,cmArrayMode=false,cmDraft=null,cmAxis='free',cmCount=1,cmCountA=2,cmCountB=2,cmLastPtr=null,cmLastEvt=null;
-// Drag-to-move: OFF by default so a click only selects (no accidental nudges). Persisted per-browser,
-// global (a UI pref, not per-app). Ctrl+drag-copy ignores this — it's an explicit gesture.
+// Drag-to-move/copy: OFF by default so a click only selects (no accidental nudges). Persisted
+// per-browser, global (a UI pref, not per-app). Gates BOTH drag gestures — left-drag=move AND
+// Ctrl+drag=copy; only Ctrl+CLICK (a click, not a drag) still toggles selection when off.
 let dragMoveOn=false; try{dragMoveOn=localStorage.getItem('steel:dragmove:v1')==='1';}catch(_){}
 let dragHintShown=false; try{dragHintShown=localStorage.getItem('steel:dragmovehint:v1')==='1';}catch(_){}   // one-time "drag-move is off" teach on the first blocked drag
 function setDragMove(on){dragMoveOn=!!on;document.body.classList.toggle('dragmove',dragMoveOn);
- const b=document.getElementById('dragMoveB');if(b){b.classList.toggle('on',dragMoveOn);b.setAttribute('aria-checked',String(dragMoveOn));const st=document.getElementById('dragMoveState');if(st)st.textContent=dragMoveOn?'On':'Off';}
+ const b=document.getElementById('dragMoveB');if(b){b.classList.toggle('on',dragMoveOn);b.setAttribute('aria-checked',String(dragMoveOn));}   // the .mck slider carries the on/off state
  try{localStorage.setItem('steel:dragmove:v1',dragMoveOn?'1':'0');}catch(_){}}
 // cmDraft: {base:[x,y], vA:null} — array mode sets vA=[dx,dy,0] once direction A is picked/typed
 function setCmUi(){document.body.classList.toggle('cmon',!!cmTool);
@@ -2093,7 +2142,7 @@ svg.addEventListener('pointerdown',e=>{if(e.button!==0)return;const t=e.target;
    // Plain click selects on down (so a no-drag click still selects even with drag-move off). Ctrl defers
    // its select to up — a ctrl-DRAG copies, a ctrl-CLICK toggles selection (today's behavior).
    if(!ctrl&&!selIds.has(id)){selIds=new Set([id]);render();}
-   const canDrag=ctrl||dragMoveOn;                                   // plain grab only translates when the toggle is on; ctrl always drags (to copy)
+   const canDrag=dragMoveOn;                                         // the toggle gates BOTH gestures: left-drag=move and Ctrl+drag=copy (Ctrl+CLICK still toggles selection below — a click, not a drag)
    const srcIds=(ctrl&&!selIds.has(id))?new Set([id]):new Set(selArr().map(m=>m.id));  // ctrl on an unselected member copies just it; else the whole selection
    const items=[...srcIds].map(mid=>{const m=byId(mid);return{id:mid,o0:m.wp[0].slice(),o1:m.wp[1].slice()};});
    buildSnap(srcIds);                                                // snap the dragged line(s) to OTHER members'/segments' endpoints
@@ -2200,7 +2249,7 @@ svg.addEventListener('pointerup',()=>{if(!drag)return;snapClear();
      drag=null;render();return;}
    if(!drag.armed){                                                  // dragged but drag-move OFF → nothing moved; teach the toggle once
      drag=null;render();
-     if(!dragHintShown){dragHintShown=true;try{localStorage.setItem('steel:dragmovehint:v1','1');}catch(_){}toast('Drag-to-move is off — turn it on in the toolbar, or use ↔ Move (M)');}
+     if(!dragHintShown){dragHintShown=true;try{localStorage.setItem('steel:dragmovehint:v1','1');}catch(_){}toast('Drag to move/copy is off — turn it on in the Move / Copy menu, or use the Move (M) / Copy (C) tools');}
      return;}
    if(drag.pre&&snapshot()!==drag.pre)pushUndo(drag.pre);           // armed move/copy committed (copy always changed geometry via its clones)
    const wasCopy=drag.copy;if(!anyToolActive())snapOnlyClear2d();drag=null;render();if(wasCopy)toast('Copied '+selIds.size+' member'+(selIds.size===1?'':'s'));return;}  // a grab move/copy was the operation → single-shot override clears
@@ -2242,7 +2291,7 @@ document.getElementById('mrgB').onclick=()=>{const r=mergeCollinearJS(P.members)
  toast('Merged '+r.mergedAway+' segment'+(r.mergedAway===1?'':'s')+' into '+r.runs+' member'+(r.runs===1?'':'s'));};
 document.getElementById('undoB').onclick=doUndo;
 document.getElementById('redoB').onclick=doRedo;
-document.getElementById('dragMoveB').onclick=()=>{setDragMove(!dragMoveOn);toast(dragMoveOn?'Drag to move: ON — dragging a member moves it':'Drag to move: OFF — a click only selects');};
+document.getElementById('dragMoveB').onclick=()=>{setDragMove(!dragMoveOn);toast(dragMoveOn?'Drag to move/copy: ON — drag moves, Ctrl+drag copies':'Drag to move/copy: OFF — a click only selects');};
 setDragMove(dragMoveOn);   // reflect the persisted state on load (body class + pill)
 addEventListener('keydown',e=>{
  const inForm=/^(INPUT|SELECT|TEXTAREA)$/.test((document.activeElement||{}).tagName);
@@ -2274,6 +2323,7 @@ addEventListener('keydown',e=>{
  if(e.key==='Escape'){if(geoMode){geoMode=null;setGeo();render();return;}if(mode==='add'){mode='sel';setMode();}picking=false;pickKind='profile';pickEnd=null;selIds.clear();render();return;}
  if((e.key==='Delete'||e.key==='Backspace')&&view3d&&window.Steel3DView.selectedClips&&window.Steel3DView.selectedClips().length&&!selIds.size&&!sel3dDimIds.size&&!selDimIds.size&&!inForm){e.preventDefault();window.Steel3DView.deleteSelectedClips();return;}  // 3D: Del removes the selected clip plane(s)/box(es) — only when nothing else is selected (clip selection is exclusive)
  if((e.key==='Delete'||e.key==='Backspace')&&view3d&&sel3dDimIds.size&&!selIds.size&&!inForm){e.preventDefault();[...sel3dDimIds].forEach(id=>view3dApi.onDeleteDim3d(id));return;}  // 3D: Delete removes ALL selected 3D dims — only when no member is selected
+ if((e.key==='Delete'||e.key==='Backspace')&&selIds.size&&!selDimIds.size&&[...selIds].every(id=>/^det:/.test(id))&&!inForm){e.preventDefault();edit(()=>{const rm=new Set([...selIds].map(id=>id.slice(4)));C.detail_placements=(C.detail_placements||[]).filter(x=>x&&!rm.has(x.id));selIds.clear();});return;}  // a placed-detail-only selection deletes from detail_placements — Delete now matches every other object's remove gesture (not just the inspector button)
  if((e.key==='Delete'||e.key==='Backspace')&&(selDimIds.size||selIds.size)&&!inForm){e.preventDefault();edit(()=>{   // deletes everything selected — dims and/or members (a marquee can hold both)
    if(selDimIds.size){P.dims=P.dims.filter(d=>!selDimIds.has(d.id));selDimIds.clear();}
    if(selIds.size){P.members=P.members.filter(m=>!selIds.has(m.id));selIds.clear();}});return;}
@@ -2291,7 +2341,7 @@ addEventListener('keydown',e=>{
   if(ck==='m'){e.preventDefault();armCm('move',false);return;}
   if(ck==='c'){e.preventDefault();armCm('copy',false);return;}}
  if(!inForm&&selDimIds.size>=1&&!selIds.size&&!e.ctrlKey&&!e.metaKey&&!e.altKey&&e.key.toLowerCase()==='s'){e.preventDefault();toggleDimSplit();return;}  // S — toggle "add split point" on the selected dimension(s)
- if(!inForm&&selIds.size>=1&&!e.ctrlKey&&!e.metaKey&&!e.altKey){const kk=e.key.toLowerCase();
+ if(!inForm&&[...selIds].some(id=>!/^det:/.test(id))&&!e.ctrlKey&&!e.metaKey&&!e.altKey){const kk=e.key.toLowerCase();  // member-only shortcuts — require a real member selected, not a placed-detail-only selection
    if(kk==='e'){e.preventDefault();geoMode=(geoMode==='el'?null:'el');setGeo();render();setLastCmd('Extend/Trim',()=>{geoMode='el';setGeo();render();});return;}                       // Extend/Trim — any selection
    if(kk==='p'){e.preventDefault();edit(()=>{for(const m of selArr())swapMemberEnds(m);});return;}                     // P — swap start↔end for the whole selection (2D + 3D)
    if(kk==='s'&&selIds.size===1&&!selDimIds.size){e.preventDefault();geoMode=(geoMode==='split'?null:'split');setGeo();render();setLastCmd('Split',()=>{geoMode='split';setGeo();render();});return;}}  // member Split — single member only, and not while dims are also selected (mixed → ambiguous, so neither split fires)
@@ -2347,7 +2397,15 @@ document.getElementById('cpLevelB').onclick=()=>openLevelModal('copy');
 let copesByMember={}, partsById={};
 const view3dApi={
  // POST the in-progress contract so the model reflects unsaved edits; throws on a bad contract.
- fetchScene:async()=>{const r=await fetch('/api/contract/'+encodeURIComponent(APP_ID)+'/scene',{method:'POST',headers:{'content-type':'application/json'},body:JSON.stringify({contract:C})});const j=await r.json();if(!j.ok)throw new Error(j.error||'scene render failed');const cm={},pb={};for(const el of ((j.scene&&j.scene.elements)||[])){if(!el)continue;if(el.id)pb[el.id]=el;if(el.kind==='cut'&&el.member){(cm[el.member]||(cm[el.member]=[])).push((el.meta&&el.meta.label)||'Cope');}}copesByMember=cm;partsById=pb;return j.scene;},  // cache resolved parts by id (real dims for the part Inspector, not just "auto") AND cope labels per member (the coped-beam note)
+ fetchScene:async()=>{const r=await fetch('/api/contract/'+encodeURIComponent(APP_ID)+'/scene',{method:'POST',headers:{'content-type':'application/json'},body:JSON.stringify({contract:C})});const j=await r.json();if(!j.ok)throw new Error(j.error||'scene render failed');const cm={},pb={};const sc=j.scene||{};sc.elements=Array.isArray(sc.elements)?sc.elements:[];for(const el of sc.elements){if(!el)continue;if(el.id)pb[el.id]=el;if(el.kind==='cut'&&el.member){(cm[el.member]||(cm[el.member]=[])).push((el.meta&&el.meta.label)||'Cope');}}
+   // Slice 4: append placed detail images as CLIENT-SIDE scene elements (kind:'image'), resolving each
+   // placement's detailName → custom_details base64 in the browser. The server's contract-to-scene never
+   // emits these, so they stay out of the reconstructed scene / IFC / Tekla export and the baked lock.
+   // (The image bytes live in custom_details, which — as it always has — rides in the contract to the
+   // localhost host; the point is that they are never turned into exported geometry.)
+   for(const p of (C.detail_placements||[])){if(!p||!p.id)continue;const raw=C.custom_details[p.detailName];if(raw==null)continue;const url=String(raw).startsWith('data:')?raw:'data:image/jpeg;base64,'+raw;const el={kind:'image',id:'det:'+p.id,group:'detail',url,pos:p.pos||[0,0,0],u:p.u,n:p.n,rotZ:p.rotZ||0,size:p.size||1000,opacity:p.opacity==null?1:p.opacity};sc.elements.push(el);pb[el.id]=el;}
+   copesByMember=cm;partsById=pb;return sc;},  // cache resolved parts by id (real dims for the part Inspector) AND cope labels per member; placed details ride in as image elements
+
  onSelect:(id,additive)=>{selDimIds.clear();sel3dDimIds.clear();if(!id){selIds=new Set();}else if(additive){selIds.has(id)?selIds.delete(id):selIds.add(id);}else{selIds=new Set([id]);}render();if(window.Steel3DView&&window.Steel3DView.refreshDims)window.Steel3DView.refreshDims();},  // 3D pick → shared selection (clears 2D + 3D dim selection so Delete is unambiguous)
  onSelectMany:(ids)=>{selDimIds.clear();sel3dDimIds.clear();selIds=new Set(ids||[]);if(mode==='add'){mode='sel';setMode();}render();if(window.Steel3DView&&window.Steel3DView.refreshDims)window.Steel3DView.refreshDims();},  // 3D box-select → shared selection
  getMembers:()=>P.members,                                   // raw members (wp) for snap geometry
@@ -2357,7 +2415,7 @@ const view3dApi={
  geoMode:()=>geoMode,                                        // 'el' | 'split' | null — armed Trim/Extend/Split state
  onMoveMember:(id,newWp)=>{edit(()=>{const m=byId(id);if(m)m.wp=newWp;});},  // 3D drag → write wp (undoable, autosaves, syncs 2D/chip/BOM)
  dragMoveEnabled:()=>dragMoveOn,                                                    // the 3D view gates its plain member-drag on this
- dragMoveHint:()=>{if(dragHintShown)return;dragHintShown=true;try{localStorage.setItem('steel:dragmovehint:v1','1');}catch(_){}toast('Drag-to-move is off — turn it on in the toolbar, or use ↔ Move (M)');},
+ dragMoveHint:()=>{if(dragHintShown)return;dragHintShown=true;try{localStorage.setItem('steel:dragmovehint:v1','1');}catch(_){}toast('Drag to move/copy is off — turn it on in the Move / Copy menu, or use the Move (M) / Copy (C) tools');},
  onCopyDrag3d:(ids,dxMm,dyMm)=>{const k=304.8/((P&&P.pt_per_ft>0)?P.pt_per_ft:1),r6=n=>Math.round(n*1e6)/1e6;   // Ctrl+drag copy: mm delta → plan px (Y FLIPPED), clone + translate + select
    const dpx=r6(dxMm/k),dpy=r6(-dyMm/k);
    edit(()=>{const ns=new Set();for(const id of (ids||[])){const src=byId(id);if(!src)continue;const c=cloneMember(src);translateMembers([c],[dpx,dpy,0]);P.members.push(c);ns.add(c.id);}selIds=ns;});
@@ -2414,12 +2472,44 @@ const view3dApi={
  onClipsChange:()=>{build3DLegend();},   // a clip added / removed / toggled → rebuild the legend's Clip section
  beginClipEdit:()=>pushUndo(snapshot()),   // a clip / work-area manipulation → push a pre-edit snapshot so Ctrl+Z/Y restores it
  onClipModeChange:(m)=>{const b=document.getElementById('m3dClip');if(b){b.classList.toggle('on',!!m);b.textContent=m?'Clip ✕':'Clip ▾';}},  // armed → button fills brand-blue + becomes a cancel target (✕ = cancel)
+ onInsertModeChange:(on)=>{const b=document.getElementById('m3dInsert');if(b){b.classList.toggle('on',!!on);b.textContent=on?'Insert ✕':'Insert ▾';}},  // mirror the clip arm/cancel affordance
+ onInsertPlace:(pick,pending)=>{if(!pending||!pending.name){toast('Pick a detail to insert first');return;}   // Slice 4: place the queued detail at the pick, select it, record the create intent
+  const id='det'+Date.now().toString(36)+Math.floor(Math.random()*1e4).toString(36);const sheet=(P&&P.sheet)||'';
+  const place={id,detailName:pending.name,sheet,anchorId:pick.anchorId||null,pos:pick.point,u:pick.u,n:pick.n,rotZ:0,size:1000,opacity:1};
+  edit(()=>{if(!Array.isArray(C.detail_placements))C.detail_placements=[];C.detail_placements.push(place);selIds=new Set(['det:'+id]);});
+  toast('Detail placed'+(pick.anchorId?' on '+pick.anchorId:'')+' — adjust it in the panel or ask the AI to build it');
+  detailRequest('create',place);},
  onIsolateChange:()=>{updateIsolateBtn();refresh3DLegend();},   // isolate / show-all (incl. Esc, legend "show all", showAllGroups clearing connHidden) → refresh the toolbar button + the legend rows' hidden state
  onWorkAreaChange:()=>updateWorkBtn(),     // work area set / toggled → refresh the button + its checkbox
 };
 // Re-extrude the 3D model after a structural edit (keeps the camera where it is). Selection-only
 // changes go through render()'s setSelection — only geometry mutations need a rebuild.
 function sync3D(){if(view3d&&view3dReady&&window.Steel3DView){window.Steel3DView.rebuild(false).then(()=>{window.Steel3DView.setSelection(selIds);build3DLegend();}).catch(()=>{});}}  // rebuild also refreshes the legend (an edit may add/remove a profile)
+// Insert-a-detail helpers (Slice 4). armInsert queues a detail image + arms the 3D placement pick;
+// detailRequest records a create/modify request on the SAME tweak-contract channel, adding intent+target
+// so the terminal AI knows whether to build a new detail or update a placed one, and where.
+function armInsert(name){if(!name)return;const raw=(C.custom_details||{})[name];if(raw==null){toast('That detail image is missing');return;}
+  if(!view3d){toast('Switch to the 3D view to place a detail');return;}
+  window.Steel3DView.setInsertMode(true,{name});
+  toast('Click a beam or the model to place “'+name+'” — Esc to cancel');}
+async function detailRequest(intent,place,note){
+  // flushContract PUTs C to the server so the terminal AI reads the latest contract — but it clears the
+  // debounced autosave (saveT) WITHOUT writing localStorage, which would drop the just-placed detail from
+  // this browser's draft (server would keep it, localStorage wouldn't → restoreSaved clobbers it on reload).
+  // Persist the local draft too so server + localStorage stay in lockstep.
+  try{await window.flushContract();}catch(_){/* a failed save still lets the request queue; the AI reads the current draft */}
+  try{persist();}catch(_){}
+  const raw=(C.custom_details||{})[place.detailName];
+  const snaps=raw?[{name:String(place.detailName||'detail')+'.jpg',dataUrl:String(raw).startsWith('data:')?raw:'data:image/jpeg;base64,'+raw}]:[];
+  const pos=(place.pos||[0,0,0]).map(n=>Math.round(Number(n)||0)).join(', ');
+  const instruction=note||(intent==='create'
+    ? 'Insert the "'+place.detailName+'" detail as real geometry on '+(place.anchorId?('member '+place.anchorId):'the model')+' (sheet '+(place.sheet||'?')+'). A flat reference image is placed at '+pos+' mm — build the actual detail there.'
+    : 'Update the placed "'+place.detailName+'" detail (id '+place.id+') on sheet '+(place.sheet||'?')+' to match the attached image / my adjustments.');
+  const ids=[intent==='create'?(place.anchorId||('det:'+place.id)):('det:'+place.id)];
+  try{const res=await fetch('/api/contract-request',{method:'POST',headers:{'content-type':'application/json'},
+      body:JSON.stringify({appId:APP_ID,instruction,intent,target:{sheet:place.sheet||undefined,ids},snapshots:snaps})});
+    toast(res.ok?(intent==='create'?'Insert queued for your terminal AI session':'Change queued for your terminal AI session'):'Could not queue the request');
+  }catch(_){toast('Could not queue the request');}}
 // Build the 3D legend overlay from the live scene groups (per profile). Single-click hide/show,
 // double-click isolate — mirrors the AWARE viewer-3d legend (deferred click so dbl-click can cancel).
 let leg3dClickT=null,legendAnchor=null;
@@ -2685,6 +2775,30 @@ function wire3DBar(){if(bar3dWired||!window.Steel3DView)return;bar3dWired=true;
    else{clipMenu.classList.add('open');document.addEventListener('mousedown',clipMenuOutside,true);}};
  clipMenu.querySelectorAll('button').forEach(b=>b.onclick=()=>{clipMenuClose();const a=b.dataset.clip;
    if(a==='plane'){d3.setClipMode('plane');setLastCmd('Clip plane',()=>d3.setClipMode('plane'));}else if(a==='box'){d3.setClipMode('box');setLastCmd('Clip box',()=>d3.setClipMode('box'));}else if(a==='clear')d3.clearClips();});
+ // Labels: a plain toggle (mirrors Ref line) — show each member's mark/id in the 3D view.
+ document.getElementById('m3dLabels').onclick=()=>{const on=!d3.labelsOn();d3.setLabelsOn(on);document.getElementById('m3dLabels').classList.toggle('on',on);};
+ // Insert a detail: the ▾ menu lists the detail library + an "add image" option; picking one arms a
+ // placement pick (onInsertPlace drops it). While armed the button is a cancel target (onInsertModeChange).
+ // The menu is built with DOM nodes (textContent) — the detail names are user text, never innerHTML.
+ const insBtn=document.getElementById('m3dInsert'),insMenu=document.getElementById('m3dInsertMenu');
+ function insMenuOutside(e){if(!insMenu.contains(e.target)&&e.target!==insBtn)insMenuClose();}
+ function insMenuClose(){insMenu.classList.remove('open');document.removeEventListener('mousedown',insMenuOutside,true);}
+ function insMenuBuild(){const names=Object.keys(C.custom_details||{}).sort((a,b)=>String(a).localeCompare(String(b),undefined,{numeric:true}));
+   const frag=document.createDocumentFragment();
+   const lab=document.createElement('div');lab.className='mlabel';lab.textContent='Place a detail';frag.appendChild(lab);
+   if(names.length){for(const n of names){const b=document.createElement('button');b.textContent=n;b.title='Place '+n;b.onclick=()=>{insMenuClose();armInsert(n);};frag.appendChild(b);}}
+   else{const note=document.createElement('div');note.style.cssText='padding:4px 10px;color:var(--mut);font-size:12px';note.textContent='No saved details yet — add one below.';frag.appendChild(note);}
+   frag.appendChild(document.createElement('hr'));
+   const add=document.createElement('button');add.textContent='＋ Add an image…';add.onclick=()=>{insMenuClose();document.getElementById('insFile').click();};frag.appendChild(add);
+   insMenu.replaceChildren(frag);}
+ insBtn.onclick=e=>{e.stopPropagation();
+   if(d3.insertMode()){d3.setInsertMode(false);return;}                     // armed → cancel the pick
+   if(insMenu.classList.contains('open'))insMenuClose();
+   else{insMenuBuild();insMenu.classList.add('open');document.addEventListener('mousedown',insMenuOutside,true);}};
+ document.getElementById('insFile').onchange=e=>{const f=e.target.files&&e.target.files[0];e.target.value='';if(!f)return;
+   readImageCompressed(f,b64=>{if(!b64){toast('Could not read that image — try another.');return;}
+     let base=(f.name||'Detail').replace(/\.[^.]+$/,'').trim()||'Detail',name=base,i=2;while(C.custom_details[name]!=null)name=base+' '+(i++);
+     edit(()=>{C.custom_details[name]=b64;});armInsert(name);});};
  document.getElementById('m3dIso').onclick=()=>{if(d3.isIsolated())d3.clearIsolation();else d3.isolateSelected();};  // onIsolateChange refreshes the button label/visibility
  // Work area: the ▢ Work area button opens a menu (Set to all objects / Define from selection / Show work area).
  const workBtn=document.getElementById('m3dWork'),workMenu=document.getElementById('m3dWorkMenu');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floless/app",
-  "version": "0.66.0",
+  "version": "0.67.0",
   "type": "module",
   "description": "Thin localhost host for floless.app — serves web/ and shells the aware CLI. No engine, no LLM.",
   "bin": {