castle-web-cli 0.4.77 → 0.4.79

package/kits/basic-2d/editors/SelectionOverlay.jsx

@@ -48,10 +48,19 @@ const SCALE_HANDLES = [
   { id: 'w', x: -1, y: 0, cursor: 'ew-resize' },
 ];
 
+// `sceneData` (raw, sparse) is the clone target for every write here --
+// writes only ever add/replace the exact prop keys a gesture changed (x/y,
+// rotation, width/height), preserving whatever sparse overrides already
+// existed. `previewSceneData` (blueprint template merged with overrides) is
+// the read side for every geometry computation (bounds, colliders, drag-start
+// snapshots) -- an instance that inherits width/height from its blueprint has
+// no `Layout.width` at all in `sceneData`, so reading raw here would produce
+// NaN boxes. See engine/blueprint.js for the merge this mirrors.
 export function SelectionOverlay({
   canvasRef,
   editCameraRef,
   sceneData,
+  previewSceneData,
   selectedActorIds,
   snap,
   onArrange,
@@ -91,20 +100,20 @@ export function SelectionOverlay({
     setArrangeOpen(false);
   }, [selectionKey]);
 
-  const frame = getSelectionFrame(sceneData, selectedActorIds, groupFrameRotation);
+  const frame = getSelectionFrame(previewSceneData, selectedActorIds, groupFrameRotation);
 
   const onMoveDown = usePointerDragHandle((event) => {
     const canvas = canvasRef.current;
     if (!canvas || !sceneData || selectedActorIds.length === 0) return null;
     const startPoint = screenToCard(canvas, event.clientX, event.clientY);
-    const starts = collectLayoutStarts(sceneData, selectedActorIds);
+    const starts = collectLayoutStarts(previewSceneData, selectedActorIds);
     const state = { recorded: false };
     return {
       onMove: (moveEvent) => {
         const point = screenToCard(canvas, moveEvent.clientX, moveEvent.clientY);
         const dx = snapDelta(point.x - startPoint.x, snap);
         const dy = snapDelta(point.y - startPoint.y, snap);
-        const next = moveSelected(sceneData, selectedActorIds, starts, dx, dy);
+        const next = moveSelected(sceneData, previewSceneData, selectedActorIds, starts, dx, dy);
         applyDragResult(next, sceneData, state, recordSnapshot, applyScene);
       },
     };
@@ -118,7 +127,7 @@ export function SelectionOverlay({
     let lastAngle = startAngle;
     let totalDelta = 0;
     const startFrameRotation = frame.rotation;
-    const starts = collectLayoutStarts(sceneData, selectedActorIds);
+    const starts = collectLayoutStarts(previewSceneData, selectedActorIds);
     const state = { recorded: false, lastDelta: 0 };
     return {
       onMove: (moveEvent) => {
@@ -138,7 +147,7 @@ export function SelectionOverlay({
         if (delta === state.lastDelta) return;
         state.lastDelta = delta;
         setGroupFrameRotation(normalizeAngle(startFrameRotation + delta));
-        const next = rotateSelected(sceneData, selectedActorIds, starts, center, delta);
+        const next = rotateSelected(sceneData, previewSceneData, selectedActorIds, starts, center, delta);
         if (!state.recorded) {
           recordSnapshot();
           state.recorded = true;
@@ -155,7 +164,7 @@ export function SelectionOverlay({
     if (!handle || !canvas || !sceneData || !frame || selectedActorIds.length === 0) return null;
     const startTransform = makeBoundsTransform(frame, frame.rotation);
     const startPointer = pointerLocal(canvas, editCameraRef, event, startTransform);
-    const starts = collectLayoutStarts(sceneData, selectedActorIds);
+    const starts = collectLayoutStarts(previewSceneData, selectedActorIds);
     const state = { recorded: false };
     return {
       onMove: (moveEvent) => {
@@ -169,7 +178,7 @@ export function SelectionOverlay({
           dy,
           moveEvent.shiftKey
         );
-        const next = scaleSelected(sceneData, selectedActorIds, starts, startTransform, nextBounds);
+        const next = scaleSelected(sceneData, previewSceneData, selectedActorIds, starts, startTransform, nextBounds);
         applyDragResult(next, sceneData, state, recordSnapshot, applyScene);
       },
     };
@@ -181,7 +190,7 @@ export function SelectionOverlay({
   }
 
   const geometry = getOverlayGeometry(frame, box, camera);
-  const colliderFrames = getSelectedColliderFrames(sceneData, selectedActorIds);
+  const colliderFrames = getSelectedColliderFrames(previewSceneData, selectedActorIds);
 
   return (
     <div ref={rootRef} className={styles.selOverlayRoot}>
@@ -221,7 +230,7 @@ export function SelectionOverlay({
               transformOrigin: `${geometry.centerCardX}px ${geometry.centerCardY}px`,
               transform: `rotate(${geometry.rotation}deg)`,
             }}>
-            <SelectionChrome frame={frame} stemLength={geometry.stemLength} onScaleDown={onScaleDown} />
+            <SelectionChrome frame={frame} stemLength={geometry.stemLength} />
           </div>
         </div>
       </div>
@@ -230,12 +239,56 @@ export function SelectionOverlay({
           readable. The rotate handle orbits via its anchor; clone/delete flip
           above/below to stay clear of it. */}
       <div className={styles.selButtonLayer}>
+        {/* Dashed bounding box + center pivot render here (un-scaled px layer)
+            rather than the chrome layer, so their stroke width, dash pattern,
+            and pivot size stay constant with zoom. Their px dimensions are
+            projected from the box's screen extents, so the box still traces the
+            actual bounds. */}
+        <div
+          className={styles.selBox}
+          style={{
+            left: geometry.centerX,
+            top: geometry.centerY,
+            width: geometry.boxWidthPx,
+            height: geometry.boxHeightPx,
+            transform: `translate(-50%, -50%) rotate(${geometry.rotation}deg)`,
+          }}
+        />
+        <div className={styles.selPivot} style={{ left: geometry.centerX, top: geometry.centerY }} />
+        {/* Scale handles live here (un-scaled px layer), not in the chrome layer:
+            projecting them to screen px keeps them crisp and a constant size at
+            any zoom, instead of being rasterized small then stretched by the
+            layer's `scale()`. Each is rotated so edge handles hug the box side. */}
+        {geometry.scaleHandles.map((handle) => (
+          <div
+            key={handle.id}
+            role="button"
+            aria-label={`Scale ${handle.id}`}
+            title={`Scale ${handle.id}`}
+            className={cx(
+              styles.selScaleHandle,
+              handle.corner ? styles.selScaleCorner : styles.selScaleEdge
+            )}
+            data-handle={handle.id}
+            style={{
+              left: handle.x,
+              top: handle.y,
+              cursor: handle.cursor,
+              transform: `translate(-50%, -50%) rotate(${geometry.rotation}deg)`,
+            }}
+            onPointerDown={(event) => {
+              event.stopPropagation();
+              onScaleDown(event);
+            }}
+          />
+        ))}
         <Floating x={geometry.cloneAnchor.x} y={geometry.cloneAnchor.y}>
           <div className={styles.selBtnGroup}>
             <div className={styles.selArrangeWrap}>
               <OverlayButton
                 label="Arrange"
                 icon="layer-group"
+                disabled={!onArrange}
                 onActivate={() => setArrangeOpen((open) => !open)}
               />
               {arrangeOpen ? (
@@ -261,8 +314,8 @@ export function SelectionOverlay({
                 </div>
               ) : null}
             </div>
-            <OverlayButton label="Clone" icon="clone" onActivate={onClone} />
-            <OverlayButton label="Delete" icon="trash" onActivate={onDelete} />
+            <OverlayButton label="Clone" icon="clone" disabled={!onClone} onActivate={onClone} />
+            <OverlayButton label="Delete" icon="trash" disabled={!onDelete} onActivate={onDelete} />
           </div>
         </Floating>
         <Floating x={geometry.rotateAnchor.x} y={geometry.rotateAnchor.y}>
@@ -282,49 +335,21 @@ export function SelectionOverlay({
 // Chrome in card units: dashed bounding box, scale handles, connector stem, and
 // center pivot dot. The layer itself ignores pointer events; only the handles
 // opt back in so the canvas still receives ordinary selection gestures.
-function SelectionChrome({ frame, stemLength, onScaleDown }) {
+function SelectionChrome({ frame, stemLength }) {
   const left = frame.x;
   const top = frame.y;
   const width = frame.width;
   const height = frame.height;
-  const centerX = left + width / 2;
   const centerY = top + height / 2;
-  const handlePosition = (handle) => ({
-    left: centerX + (handle.x * width) / 2,
-    top: centerY + (handle.y * height) / 2,
-    cursor: handle.cursor,
-  });
-  return (
-    <>
-      {/* Connector stem from the right-center edge out to the rotate handle.
-          Lives in the rotated chrome, so it swings with the actor. */}
-      {stemLength > 0 ? (
-        <div className={styles.selStem} style={{ left: left + width, top: centerY, width: stemLength }} />
-      ) : null}
-      <div className={styles.selBox} style={{ left, top, width, height }} />
-      {SCALE_HANDLES.map((handle) => (
-        <div
-          key={handle.id}
-          role="button"
-          aria-label={`Scale ${handle.id}`}
-          title={`Scale ${handle.id}`}
-          className={cx(
-            styles.selScaleHandle,
-            handle.corner ? styles.selScaleCorner : styles.selScaleEdge
-          )}
-          data-handle={handle.id}
-          style={handlePosition(handle)}
-          onPointerDown={(event) => {
-            event.stopPropagation();
-            onScaleDown(event);
-          }}
-        />
-      ))}
-      <div className={styles.selPivot} style={{ left: centerX, top: centerY }} />
-    </>
-  );
+  if (stemLength <= 0) return null;
+  // Connector stem from the right-center edge out to the rotate handle. Lives in
+  // the rotated chrome so it swings with the actor. (The box + pivot render in
+  // the un-scaled px layer so their stroke/size stay constant with zoom.)
+  return <div className={styles.selStem} style={{ left: left + width, top: centerY, width: stemLength }} />;
 }
 
+// `sceneData` here is always the MERGED preview scene (see the note on
+// `SelectionOverlay` above) -- every Layout read in this file is.
 function getSelectionFrame(sceneData, actorIds, preferredRotation = null) {
   if (!sceneData || !actorIds || actorIds.length === 0) return null;
   const wanted = new Set(actorIds);
@@ -370,9 +395,35 @@ function getOverlayGeometry(frame, box, camera) {
     rotateAnchor,
     cloneAnchor: getActionAnchor({ centerX, centerY, halfH, rotateAnchor }),
     stemLength: HANDLE_OFFSET + GAP_PX / sx,
+    boxWidthPx: frame.width * sx,
+    boxHeightPx: frame.height * sy,
+    scaleHandles: getScaleHandleAnchors({
+      centerX,
+      centerY,
+      halfWpx: (frame.width / 2) * sx,
+      halfHpx: (frame.height / 2) * sy,
+      rotation,
+    }),
   };
 }
 
+// Project the 8 scale handles from the box's rotated corners/edges into screen
+// px so they can render in the un-scaled button layer at a constant size.
+function getScaleHandleAnchors({ centerX, centerY, halfWpx, halfHpx, rotation }) {
+  const rad = (rotation * Math.PI) / 180;
+  const cosR = Math.cos(rad);
+  const sinR = Math.sin(rad);
+  return SCALE_HANDLES.map((handle) => {
+    const lx = handle.x * halfWpx;
+    const ly = handle.y * halfHpx;
+    return {
+      ...handle,
+      x: centerX + lx * cosR - ly * sinR,
+      y: centerY + lx * sinR + ly * cosR,
+    };
+  });
+}
+
 function getRotateAnchor({ centerX, centerY, halfW, rotation }) {
   const rad = (rotation * Math.PI) / 180;
   const cosR = Math.cos(rad);
@@ -492,19 +543,22 @@ function Floating({ x, y, children }) {
   );
 }
 
-function OverlayButton({ label, icon, onActivate, onPointerDown, extraClass }) {
+function OverlayButton({ label, icon, onActivate, onPointerDown, extraClass, disabled = false }) {
   return (
     <button
       type="button"
       aria-label={label}
       title={label}
+      disabled={disabled}
       className={cx(styles.selBtn, extraClass)}
       onPointerDown={(event) => {
         event.stopPropagation();
+        if (disabled) return;
         onPointerDown?.(event);
       }}
       onClick={(event) => {
         event.stopPropagation();
+        if (disabled) return;
         onActivate?.();
       }}>
       <Icon name={icon} />
@@ -577,29 +631,37 @@ function snapDelta(delta, snap) {
   return Math.round(delta / snap.gridSize) * snap.gridSize;
 }
 
-// Clone the scene and patch the Layout of every selected actor. `patch(layout,
-// start)` returns the props to merge into that actor's Layout, or null to leave
-// it untouched. Returns the original `sceneData` when nothing changed so callers
-// can skip a no-op commit.
-function updateSelectedLayouts(sceneData, actorIds, starts, patch) {
+// Clone the RAW `sceneData` (the sparse write target) and patch the Layout
+// override of every selected actor, but read each actor's CURRENT layout
+// from `previewSceneData` (blueprint-merged) so `patch` sees real width/
+// height/rotation even when an instance inherits them and has no Layout
+// override of its own yet. `patch(layout, start)` returns the props to merge
+// into that actor's Layout OVERRIDE (not the merged layout), or null to leave
+// it untouched -- this is exactly the sparse-override write path (drag =
+// x/y, always non-inherited; scale additionally promotes width/height to
+// instance overrides). Returns the original `sceneData` when nothing changed
+// so callers can skip a no-op commit.
+function updateSelectedLayouts(sceneData, previewSceneData, actorIds, starts, patch) {
   const wanted = new Set(actorIds);
   const next = structuredClone(sceneData);
   let changed = false;
   for (const actor of next.actors) {
     if (!wanted.has(actor.id)) continue;
     const start = starts[actor.id];
-    const layout = actor.components.Layout;
-    if (!start || !layout) continue;
-    const props = patch(layout, start);
+    const previewLayout = previewSceneData.actors.find((candidate) => candidate.id === actor.id)
+      ?.components?.Layout;
+    if (!start || !previewLayout) continue;
+    const props = patch(previewLayout, start);
     if (!props) continue;
-    actor.components.Layout = { ...layout, ...props };
+    actor.components ??= {};
+    actor.components.Layout = { ...(actor.components.Layout ?? {}), ...props };
     changed = true;
   }
   return changed ? next : sceneData;
 }
 
-function moveSelected(sceneData, actorIds, starts, dx, dy) {
-  return updateSelectedLayouts(sceneData, actorIds, starts, (layout, start) => {
+function moveSelected(sceneData, previewSceneData, actorIds, starts, dx, dy) {
+  return updateSelectedLayouts(sceneData, previewSceneData, actorIds, starts, (layout, start) => {
     const x = Math.round(start.x + dx);
     const y = Math.round(start.y + dy);
     return layout.x === x && layout.y === y ? null : { x, y };
@@ -608,8 +670,8 @@ function moveSelected(sceneData, actorIds, starts, dx, dy) {
 
 // Common-pivot rotation: actor centers orbit the selection pivot while each
 // actor also spins by the same delta, matching a temporary group transform.
-function rotateSelected(sceneData, actorIds, starts, pivot, deltaDeg) {
-  return updateSelectedLayouts(sceneData, actorIds, starts, (layout, start) => {
+function rotateSelected(sceneData, previewSceneData, actorIds, starts, pivot, deltaDeg) {
+  return updateSelectedLayouts(sceneData, previewSceneData, actorIds, starts, (layout, start) => {
     const center = {
       x: start.x + start.width / 2,
       y: start.y + start.height / 2,
@@ -623,11 +685,11 @@ function rotateSelected(sceneData, actorIds, starts, pivot, deltaDeg) {
   });
 }
 
-function scaleSelected(sceneData, actorIds, starts, startTransform, nextLocalBounds) {
+function scaleSelected(sceneData, previewSceneData, actorIds, starts, startTransform, nextLocalBounds) {
   const startBounds = startTransform.localBounds;
   const scaleX = startBounds.width === 0 ? 1 : nextLocalBounds.width / startBounds.width;
   const scaleY = startBounds.height === 0 ? 1 : nextLocalBounds.height / startBounds.height;
-  return updateSelectedLayouts(sceneData, actorIds, starts, (layout, start) => {
+  return updateSelectedLayouts(sceneData, previewSceneData, actorIds, starts, (layout, start) => {
     const startCenter = {
       x: start.x + start.width / 2,
       y: start.y + start.height / 2,

package/kits/basic-2d/editors/SingleEditor.jsx

@@ -79,9 +79,17 @@ export function SingleEditor({ path, editor }) {
     [stashKey, selectedActorIds, multiSelectMode]
   );
   const { sprites } = collectAssets(files);
+  // Optimistic cross-file edit: fold the new text into live files state NOW
+  // (so merged previews update this frame) and debounce the real write; the
+  // fs echo of our own write is skipped while pending (shouldSkipPath above).
+  // Used for this editor's own file AND for blueprint-file edits made from a
+  // scene panel's blueprint inspector.
+  function onChangeFile(targetPath, nextText) {
+    setFiles((current) => ({ ...current, [targetPath]: nextText }));
+    schedule(targetPath, nextText);
+  }
   function onChange(nextText) {
-    setFiles((current) => ({ ...current, [path]: nextText }));
-    schedule(path, nextText);
+    onChangeFile(path, nextText);
   }
   const kind = editor || getFileKind(path);
   const text = files[path] ?? '';
@@ -94,6 +102,7 @@ export function SingleEditor({ path, editor }) {
         files={files}
         sprites={sprites}
         onChange={onChange}
+        onChangeFile={onChangeFile}
         selectedActorIds={selectedActorIds}
         onSelectActorIds={setSelectedActorIds}
         multiSelectMode={multiSelectMode}

package/kits/basic-2d/editors/editorHistory.js

@@ -1,47 +1,116 @@
 import { useEffect, useRef, useState } from 'react';
 const HISTORY_LIMIT = 50;
+// Time window (ms) within which consecutive commits sharing the same
+// coalesceKey collapse into a single undo entry (e.g. dragging a color
+// picker or repeatedly clicking a number stepper). Sliding: each coalesced
+// commit refreshes the window.
+const COALESCE_WINDOW_MS = 800;
+
+function historyStorageKey(path) {
+  return `castle-edit-history:${path}`;
+}
+// Best-effort sessionStorage read/write so undo/redo survives the editor
+// iframe reloading (e.g. after `npm run restart`). Quota errors or disabled
+// storage (private browsing, etc.) degrade silently to in-memory-only history.
+function loadStoredHistory(path) {
+  if (!path) return null;
+  try {
+    const raw = sessionStorage.getItem(historyStorageKey(path));
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    if (!parsed || !Array.isArray(parsed.undo) || !Array.isArray(parsed.redo)) return null;
+    return {
+      undo: parsed.undo.slice(-HISTORY_LIMIT),
+      redo: parsed.redo.slice(0, HISTORY_LIMIT),
+    };
+  } catch {
+    return null;
+  }
+}
+function saveStoredHistory(path, history) {
+  if (!path) return;
+  try {
+    sessionStorage.setItem(historyStorageKey(path), JSON.stringify(history));
+  } catch {
+    // Storage full or unavailable -- history still works in-memory this session.
+  }
+}
+// Drop entries at the end of `stack` equal to `text`: snapshots recorded at
+// gesture start (recordSnapshot) that the gesture never actually changed.
+function trimTrailingNoOps(stack, text) {
+  let end = stack.length;
+  while (end > 0 && stack[end - 1] === text) end--;
+  return end === stack.length ? stack : stack.slice(0, end);
+}
+// Same idea for the redo stack, which is read from the front.
+function trimLeadingNoOps(stack, text) {
+  let start = 0;
+  while (start < stack.length && stack[start] === text) start++;
+  return start === 0 ? stack : stack.slice(start);
+}
 // Text-undo/redo for file-backed editors. `text` is the canonical current
 // value; `onChange` writes the new value back. The hook owns the undo/redo
-// stacks; it never mutates `text` directly.
-export function useEditHistory(text, onChange) {
-  const [history, setHistory] = useState({ undo: [], redo: [] });
+// stacks; it never mutates `text` directly. `path`, when given, persists the
+// stacks to sessionStorage keyed by file path.
+export function useEditHistory(text, onChange, path) {
+  const [history, setHistory] = useState(() => loadStoredHistory(path) ?? { undo: [], redo: [] });
   // Mirror the latest stacks so undo/redo can read them synchronously in the
   // event handler. onChange writes the PARENT's state, so it must never run
   // inside a setHistory updater -- updaters execute in React's render phase,
   // which would update the parent while this editor renders (setState-in-render).
   const historyRef = useRef(history);
   historyRef.current = history;
-  function commit(nextText) {
+  useEffect(() => {
+    saveStoredHistory(path, history);
+  }, [path, history]);
+  // { key, time } of the most recent coalescable commit. Undo/redo/
+  // recordSnapshot null this out so a later commit never coalesces across them.
+  const coalesceRef = useRef({ key: null, time: 0 });
+  function commit(nextText, { coalesceKey } = {}) {
     if (nextText === text) return;
-    setHistory((current) => ({
-      undo: [...current.undo, text].slice(-HISTORY_LIMIT),
-      redo: [],
-    }));
+    const now = Date.now();
+    const last = coalesceRef.current;
+    const coalescing =
+      coalesceKey != null && last.key === coalesceKey && now - last.time <= COALESCE_WINDOW_MS;
+    coalesceRef.current = { key: coalesceKey ?? null, time: now };
+    if (coalescing) {
+      setHistory((current) => ({ ...current, redo: [] }));
+    } else {
+      setHistory((current) => ({
+        undo: [...current.undo, text].slice(-HISTORY_LIMIT),
+        redo: [],
+      }));
+    }
     onChange(nextText);
   }
   function recordSnapshot() {
+    coalesceRef.current = { key: null, time: 0 };
     setHistory((current) => ({
       undo: [...current.undo, text].slice(-HISTORY_LIMIT),
       redo: [],
     }));
   }
   function undo() {
+    coalesceRef.current = { key: null, time: 0 };
     const current = historyRef.current;
-    const previous = current.undo.at(-1);
+    const stack = trimTrailingNoOps(current.undo, text);
+    const previous = stack.at(-1);
     if (previous === undefined) return;
     setHistory({
-      undo: current.undo.slice(0, -1),
+      undo: stack.slice(0, -1),
       redo: [text, ...current.redo].slice(0, HISTORY_LIMIT),
     });
     onChange(previous);
   }
   function redo() {
+    coalesceRef.current = { key: null, time: 0 };
     const current = historyRef.current;
-    const next = current.redo[0];
+    const stack = trimLeadingNoOps(current.redo, text);
+    const next = stack[0];
     if (next === undefined) return;
     setHistory({
       undo: [...current.undo, text].slice(-HISTORY_LIMIT),
-      redo: current.redo.slice(1),
+      redo: stack.slice(1),
     });
     onChange(next);
   }
@@ -49,25 +118,34 @@ export function useEditHistory(text, onChange) {
     commit,
     undo,
     redo,
-    canUndo: history.undo.length > 0,
-    canRedo: history.redo.length > 0,
+    canUndo: trimTrailingNoOps(history.undo, text).length > 0,
+    canRedo: trimLeadingNoOps(history.redo, text).length > 0,
     recordSnapshot,
   };
 }
 
-export function useUndoRedoShortcuts(history) {
+export function useUndoRedoShortcuts(history, enabled = true) {
   const historyRef = useRef(history);
   historyRef.current = history;
+  const enabledRef = useRef(enabled);
+  enabledRef.current = enabled;
   useEffect(() => {
     function onKeyDown(event) {
+      if (!enabledRef.current) return;
       if (event.defaultPrevented || isEditableTarget(event.target)) return;
       if (!(event.metaKey || event.ctrlKey) || event.key.toLowerCase() !== 'z') return;
       event.preventDefault();
       if (event.shiftKey) historyRef.current.redo();
       else historyRef.current.undo();
     }
-    window.addEventListener('keydown', onKeyDown);
-    return () => window.removeEventListener('keydown', onKeyDown);
+    // Capture phase, not bubble: this must win Cmd+Z/Cmd+Shift+Z before it can
+    // fall through to the browser's own undo, and before any other listener
+    // further down the tree (e.g. a widget that stops propagation on its own
+    // keydown) can swallow it first. This only matters once this iframe
+    // actually HAS keyboard focus (see EditorBody's pointer-down focus claim)
+    // -- capture order can't help if the event never reaches this window.
+    window.addEventListener('keydown', onKeyDown, true);
+    return () => window.removeEventListener('keydown', onKeyDown, true);
   }, []);
 }
 

package/kits/basic-2d/editors/inspectorSheet.js

@@ -1,23 +1,9 @@
-import { useEffect, useState } from 'react';
 import { styles, useMobileSheet } from '../engine/ui';
 
-// Inspector panel as a bottom sheet on compact viewports, docked on desktop.
-// Used by the pixel-art (PxArt) editor. `inspectorOpen` drives visibility;
-// tapping the grab handle toggles between the high and low snaps.
+// Inspector panel as a drag-resizable bottom sheet on compact viewports, docked
+// on desktop. Used by the pixel-art (PxArt) editor. `inspectorOpen` drives
+// visibility; the sheet hook owns the resize height and the settle-on-release
+// behavior (drag the grab handle to resize, tap it to toggle peek / expanded).
 export function useInspectorSheet(inspectorOpen) {
-  const [snap, setSnap] = useState('high');
-  useEffect(() => {
-    if (inspectorOpen) setSnap('high');
-  }, [inspectorOpen]);
-  const effectiveSnap = inspectorOpen ? snap : 'hidden';
-  return useMobileSheet({
-    snap: effectiveSnap,
-    baseClassName: styles.inspector,
-    onTransition: (direction) => {
-      if (!inspectorOpen) return;
-      if (direction === 'tap') setSnap((previous) => (previous === 'high' ? 'low' : 'high'));
-      else if (direction === 'down') setSnap('low');
-      else if (direction === 'up') setSnap('high');
-    },
-  });
+  return useMobileSheet({ open: inspectorOpen, baseClassName: styles.inspector });
 }

package/kits/basic-2d/editors/pixelEditorChrome.jsx

@@ -5,8 +5,8 @@ import { useEditHistory, useUndoRedoShortcuts } from './editorHistory';
 // Shared shell state for the pixel editors: text undo/redo history and undo/redo
 // keyboard shortcuts. Returns the `history` controller and `headerShell` for the
 // header (undo/redo only — paint controls live in the artboard layout).
-export function usePixelEditorShell(text, onChange) {
-  const history = useEditHistory(text, onChange);
+export function usePixelEditorShell(text, onChange, path) {
+  const history = useEditHistory(text, onChange, path);
   useUndoRedoShortcuts(history);
   const headerShell = { history };
   return { history, headerShell };
@@ -36,18 +36,31 @@ export function PixelEditorHeader({ title, subtitle, shell, chrome }) {
 }
 
 // The native-resolution canvas inside its artboard frame. `style` sets the fitted
-// display size; `handlers` are the pointer callbacks the editor wires for tools.
-// `overlayRef` is a sibling canvas at display resolution used for crisp overlays
-// (marching-ants selection) that would otherwise render sub-pixel on the upscaled
-// native canvas.
-export function PixelArtboard({ canvasRef, overlayRef, style, handlers }) {
+// display size, and is applied ONLY to the frame: all three canvases inside are
+// absolutely positioned with `width/height: 100%`, so they fill the frame's
+// content box identically. (Passing `style` to a canvas too would size it to the
+// frame's BORDER box — the frame is border-box with a 1px border — leaving the
+// canvas ~2px larger than its siblings and anchored top-left, which shifts the
+// smooth-preview vs. pixel render out of alignment.) `handlers` are the pointer
+// callbacks the editor wires for tools. `overlayRef` is a sibling canvas at
+// display resolution used for crisp overlays (marching-ants selection) that would
+// otherwise render sub-pixel on the upscaled native canvas. `smoothRef` is a
+// sibling canvas BEHIND the main one, holding the corner-rounded render for
+// "smooth"-mode sprites (empty/unused in "pixel" mode) so the interactive canvas
+// above it can stay at native resolution — pointer math and tool-preview overlays
+// are unaffected by the render mode.
+export function PixelArtboard({ canvasRef, smoothRef, overlayRef, style, handlers }) {
   return (
     <div className={styles.drawingArtboard}>
       <div className={styles.drawingArtboardFrame} style={style}>
+        <canvas ref={smoothRef} className={styles.drawingSmooth} aria-hidden="true" />
         <canvas
           ref={canvasRef}
           className={styles.drawingCanvas}
-          style={style}
+          // Focusable so a pointer-down can pull keyboard focus into this editor
+          // iframe (see startTool). Without it, Safari often leaves keyboard focus
+          // on the top document and Cmd+Z falls through to the browser's own undo.
+          tabIndex={-1}
           onPointerDown={handlers.onPointerDown}
           onPointerMove={handlers.onPointerMove}
           onPointerUp={handlers.onPointerUp}