castle-web-cli 0.4.78 → 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

@@ -138,8 +138,14 @@ export function useUndoRedoShortcuts(history, enabled = true) {
       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/engine/ScenePlayer.jsx

@@ -6,7 +6,7 @@ import { SceneUI } from './SceneUI';
 // behavior-driven UI overlay. No game logic lives here -- behaviors and
 // scenes are the place for that. The dev logs drawer is a builtin shell panel
 // now (cli/src/shell), not rendered here.
-export function ScenePlayer({ sceneData, sprites, behaviorClasses, onFirstFrame }) {
+export function ScenePlayer({ sceneData, sprites, files, behaviorClasses, onFirstFrame }) {
   const canvasRef = useRef(null);
   const runtimeRef = useRef(null);
   const getRuntime = useCallback(() => runtimeRef.current, []);
@@ -16,7 +16,7 @@ export function ScenePlayer({ sceneData, sprites, behaviorClasses, onFirstFrame
     const ctx = canvas.getContext('2d');
     if (!ctx) return undefined;
     configureSceneCanvas(canvas, ctx);
-    const runtime = makeScene(sceneData, behaviorClasses, sprites).clone();
+    const runtime = makeScene(sceneData, behaviorClasses, sprites, files).clone();
     runtimeRef.current = runtime;
     // Store BOTH the physical code ('KeyX', 'ArrowLeft', 'Space') and the
     // logical key ('x', 'ArrowLeft', ' ') so behaviors can match either. Codes