castle-web-cli 0.4.78 → 0.4.80

package/kits/basic-2d/engine/ui.jsx

@@ -11,6 +11,7 @@ import {
   faCircle,
   faClone,
   faCode,
+  faCodeBranch,
   faEraser,
   faEyeDropper,
   faFile,
@@ -115,9 +116,26 @@ export function EditorHeader({ title, subtitle, right, onToggleFiles, filesOpen,
   if (!headerHost) return null;
   return createPortal(header, headerHost);
 }
+// Safari only moves keyboard focus into an iframe -- at the browser level,
+// not just document.activeElement -- when the click lands on something
+// Safari itself focuses on click (a text input; NOT a button, div, or
+// canvas). PxArtEditor/SceneEditor each already focus their own canvas on
+// pointer-down for exactly this reason, but that only covers clicks that
+// land on the canvas: clicking a tool button, a palette swatch, the
+// timeline, etc. does nothing, so Safari's frame focus can stay wherever it
+// was and the NEXT keyboard shortcut or Cmd+Z falls through to the browser
+// -- reproducing right after the user just clicked in the editor. Claiming
+// focus here, once, for every pointer-down anywhere in the editor body
+// closes that gap for both editors without duplicating the fix. Real text
+// inputs still win focus normally right after: the browser's own
+// click-focuses-inputs behavior runs as mousedown's default action, which
+// fires AFTER this pointerdown handler.
+function claimEditorFocus(event) {
+  event.currentTarget.focus({ preventScroll: true });
+}
 export const EditorBody = React.forwardRef(function EditorBody({ children }, ref) {
   return (
-    <div ref={ref} className={styles.editorBody}>
+    <div ref={ref} className={styles.editorBody} tabIndex={-1} onPointerDown={claimEditorFocus}>
       {children}
     </div>
   );
@@ -158,6 +176,8 @@ const icons = {
   circle: faCircle,
   clone: faClone,
   code: faCode,
+  // FA5 has no faCodeFork (that's the FA6 name); faCodeBranch is the fork glyph.
+  'code-fork': faCodeBranch,
   eraser: faEraser,
   eyedropper: faEyeDropper,
   fill: faFillDrip,
@@ -361,33 +381,125 @@ export function isHexColor(value) {
     typeof value === 'string' && /^#[0-9a-fA-F]{3}([0-9a-fA-F]{3}([0-9a-fA-F]{2})?)?$/.test(value)
   );
 }
-export function useMobileSheet({ snap, baseClassName, onTransition }) {
-  const startY = useRef(0);
-  const lastDy = useRef(0);
-  const dragging = useRef(false);
+// --- Bottom-sheet sizing (mobile only) -------------------------------------
+// The inspector / file sheets are docked panels on desktop; below the CSS
+// breakpoint they become drag-resizable bottom sheets. `useMobileSheet` owns a
+// continuous pixel height so the sheet tracks the finger 1:1 and can rest at
+// any height (the old version only read the drag delta at release and jumped
+// between two fixed snaps, which felt dead mid-drag).
+const SHEET_PEEK_FRACTION = 0.18; // collapsed "peek" height, fraction of viewport
+const SHEET_DEFAULT_FRACTION = 0.62; // expanded default height
+const SHEET_MAX_FRACTION = 0.92; // never quite cover the whole screen
+const SHEET_MIN_PX = 96; // floor so the grab handle always fits
+const SHEET_TAP_PX = 6; // release movement under this reads as a tap, not a drag
+const SHEET_FLICK_VELOCITY = 0.6; // px/ms; a faster release flings to an end
+function sheetViewportHeight() {
+  return typeof window !== 'undefined' ? window.innerHeight : 800;
+}
+function sheetSizes() {
+  const vh = sheetViewportHeight();
+  const peek = Math.max(SHEET_MIN_PX, vh * SHEET_PEEK_FRACTION);
+  const max = vh * SHEET_MAX_FRACTION;
+  const expanded = Math.min(max, Math.max(peek, vh * SHEET_DEFAULT_FRACTION));
+  return { peek, expanded, max };
+}
+function clampSheetHeight(px) {
+  const { peek, max } = sheetSizes();
+  return Math.min(max, Math.max(peek, px));
+}
+function releasePointer(event, pointerId) {
+  try {
+    event.currentTarget.releasePointerCapture(pointerId);
+  } catch {
+    // Capture may already be gone after a cancel / blur.
+  }
+}
+// Decide where the sheet rests when the finger lifts: a stationary press toggles
+// between the peek and the last expanded height; a fast flick flings to the
+// nearest end; otherwise it stays exactly where it was dragged (free resize).
+function settleSheet(drag, setHeight, expandedRef) {
+  const { peek, expanded, max } = sheetSizes();
+  if (drag.moved < SHEET_TAP_PX) {
+    const wasCollapsed = drag.startHeight <= peek + 2;
+    if (!wasCollapsed) expandedRef.current = drag.startHeight;
+    setHeight(wasCollapsed ? expandedRef.current || expanded : peek);
+    return;
+  }
+  if (drag.velocity > SHEET_FLICK_VELOCITY) {
+    setHeight(peek);
+    return;
+  }
+  if (drag.velocity < -SHEET_FLICK_VELOCITY) {
+    expandedRef.current = max;
+    setHeight(max);
+    return;
+  }
+  const settled = setHeight(drag.startHeight - (drag.lastY - drag.startY));
+  if (settled > peek + 2) expandedRef.current = settled;
+}
+export function useMobileSheet({ open = true, baseClassName }) {
+  const [height, setHeightState] = useState(() => sheetSizes().expanded);
+  const [dragging, setDragging] = useState(false);
+  const heightRef = useRef(height);
+  const expandedRef = useRef(height); // last height above the peek, for tap-restore
+  const dragRef = useRef(null);
+  const setHeight = (px) => {
+    const next = clampSheetHeight(px);
+    heightRef.current = next;
+    setHeightState(next);
+    return next;
+  };
+  // Restore the last expanded height whenever the sheet (re)opens, and keep the
+  // height in range across viewport resize / rotation.
+  useEffect(() => {
+    if (open) setHeight(expandedRef.current);
+  }, [open]);
+  useEffect(() => {
+    const onResize = () => setHeight(heightRef.current);
+    window.addEventListener('resize', onResize);
+    return () => window.removeEventListener('resize', onResize);
+  }, []);
   function onPointerDown(event) {
-    startY.current = event.clientY;
-    lastDy.current = 0;
-    dragging.current = true;
-    event.currentTarget.setPointerCapture(event.pointerId);
+    dragRef.current = {
+      pointerId: event.pointerId,
+      startY: event.clientY,
+      startHeight: heightRef.current,
+      lastY: event.clientY,
+      lastT: event.timeStamp,
+      velocity: 0,
+      moved: 0,
+    };
+    setDragging(true);
+    try {
+      event.currentTarget.setPointerCapture(event.pointerId);
+    } catch {
+      // No active pointer to capture (e.g. synthetic events) -- drag still works.
+    }
   }
   function onPointerMove(event) {
-    if (!dragging.current) return;
-    lastDy.current = event.clientY - startY.current;
+    const drag = dragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    const dy = event.clientY - drag.startY; // down is positive
+    drag.moved = Math.max(drag.moved, Math.abs(dy));
+    const dt = event.timeStamp - drag.lastT;
+    if (dt > 0) drag.velocity = (event.clientY - drag.lastY) / dt;
+    drag.lastY = event.clientY;
+    drag.lastT = event.timeStamp;
+    setHeight(drag.startHeight - dy); // dragging up grows the sheet
   }
-  function endDrag() {
-    if (!dragging.current) return;
-    dragging.current = false;
-    const dy = lastDy.current;
-    lastDy.current = 0;
-    if (Math.abs(dy) < 6) onTransition('tap');
-    else if (dy > 30) onTransition('down');
-    else if (dy < -30) onTransition('up');
+  function endDrag(event) {
+    const drag = dragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    dragRef.current = null;
+    setDragging(false);
+    releasePointer(event, drag.pointerId);
+    settleSheet(drag, setHeight, expandedRef);
   }
   return {
     rootProps: {
-      className: baseClassName,
-      'data-sheet-snap': snap,
+      className: cx(baseClassName, dragging && styles.sheetDragging),
+      'data-sheet-open': open ? 'true' : 'false',
+      style: { '--sheet-h': `${Math.round(height)}px` },
     },
     grabProps: {
       className: cx(styles.sheetGrab, styles.mobileOnly),
@@ -466,6 +578,33 @@ export function ContextMenu({ x, y, items, onClose }) {
     </div>
   );
 }
+// Cursor-independent modal confirm (unlike `ContextMenu`, which anchors to a
+// click point) -- for actions with real consequences, like the blueprint
+// library's cascade delete. Dismisses on Escape or a backdrop click, same as
+// cancelling.
+export function ConfirmDialog({ title, message, confirmLabel = 'Delete', danger = true, onConfirm, onCancel }) {
+  useEffect(() => {
+    const onKeyDown = (event) => {
+      if (event.key === 'Escape') onCancel();
+    };
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [onCancel]);
+  return (
+    <div className={styles.confirmBackdrop} onPointerDown={onCancel}>
+      <div className={styles.confirmDialog} role="alertdialog" onPointerDown={(event) => event.stopPropagation()}>
+        <div className={styles.confirmTitle}>{title}</div>
+        <div className={styles.confirmMessage}>{message}</div>
+        <div className={styles.confirmActions}>
+          <Button onClick={onCancel}>Cancel</Button>
+          <Button variant={danger ? 'danger' : ''} onClick={onConfirm}>
+            {confirmLabel}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
 export function SelectField({ label, value, onChange, options }) {
   return (
     <FieldRow label={label}>

package/kits/basic-2d/engine/ui.module.css

@@ -372,8 +372,13 @@
 
 .bpSlot,
 .bpActionSlot {
+  position: relative;
   width: 46px;
   height: 46px;
+  /* Never shrink in the flex hotbar -- keep the square 46x46 and let the
+     hotbar scroll (overflow-x: auto) when the panel gets narrow, instead of
+     squishing slots (the add button collapsed since its icon is only 14px). */
+  flex: 0 0 46px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -387,11 +392,34 @@
   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
 }
 
+.bpSlotBadge {
+  position: absolute;
+  right: -4px;
+  bottom: -4px;
+  min-width: 15px;
+  height: 15px;
+  padding: 0 3px;
+  border-radius: 999px;
+  background: var(--castle-selected);
+  color: var(--castle-selected-ink);
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 15px;
+  text-align: center;
+}
+
 .bpSlot:hover,
 .bpActionSlot:hover {
   background: var(--castle-inspector-input-bg);
 }
 
+.bpSlotSelected,
+.bpSlotSelected:hover {
+  border-color: var(--castle-selected);
+  box-shadow: 0 0 0 1px var(--castle-selected);
+  background: var(--castle-inspector-input-bg);
+}
+
 .bpSlot:disabled,
 .bpActionSlot:disabled {
   cursor: default;
@@ -448,6 +476,119 @@
   flex: 1 1 auto;
 }
 
+.confirmBackdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 2000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.55);
+}
+
+.confirmDialog {
+  width: min(340px, calc(100vw - 32px));
+  padding: 18px;
+  border: 1px solid var(--castle-border);
+  border-radius: 10px;
+  background: var(--castle-panel-raised);
+  color: var(--castle-text);
+  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5);
+}
+
+.confirmTitle {
+  font-size: 15px;
+  font-weight: 650;
+  margin-bottom: 8px;
+}
+
+.confirmMessage {
+  font-size: 13px;
+  color: var(--castle-text-dim);
+  line-height: 1.45;
+  margin-bottom: 16px;
+}
+
+.confirmActions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.blueprintBadge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 7px;
+  border-radius: 999px;
+  border: 1px solid var(--castle-inspector-border);
+  background: var(--castle-inspector-input-bg);
+  color: var(--castle-inspector-muted);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+
+.editorHeaderTitleRow {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.instanceHint {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--castle-inspector-divider);
+}
+
+.instanceHintLabel {
+  color: var(--castle-inspector-muted);
+  font-size: 12px;
+}
+
+.instanceForkButton {
+  border: 1px solid var(--castle-inspector-border);
+  border-radius: 6px;
+  background: var(--castle-inspector-input-bg);
+  color: inherit;
+  font-size: 11px;
+  padding: 5px 9px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.instanceForkButton:hover {
+  background: var(--castle-inspector-border);
+}
+
+/* Editable blueprint title: reads as a heading until hovered/focused, where a
+   border + input background reveal that it's editable. */
+.blueprintNameInput {
+  flex: 1;
+  min-width: 0;
+  border: 1px solid transparent;
+  border-radius: var(--castle-radius);
+  background: transparent;
+  color: var(--castle-inspector-text);
+  font-size: 14px;
+  font-weight: 600;
+  padding: 4px 6px;
+  margin: -4px -6px;
+  outline: 0;
+}
+
+.blueprintNameInput:hover {
+  border-color: var(--castle-inspector-border);
+}
+
+.blueprintNameInput:focus {
+  border-color: var(--castle-inspector-border);
+  background: var(--castle-inspector-input-bg);
+}
+
 .stageWrap {
   grid-column: 1;
   grid-row: 2;
@@ -581,9 +722,11 @@
 
 .selBox {
   position: absolute;
+  box-sizing: border-box;
   border: 2px dashed var(--castle-text);
   border-radius: 3px;
   opacity: 0.85;
+  pointer-events: none;
 }
 
 /* Connector stem from the box's right-center edge to the rotate handle. */
@@ -1734,8 +1877,9 @@
 
 @media (max-width: 600px) {
   :root {
+    /* Fallback for the file-browser sheet and the inspector's initial slide-in;
+       the inspector's live height is driven by the hook's --sheet-h (see below). */
     --sheet-high-height: 62vh;
-    --sheet-low-height: 18vh;
   }
 
   /* `display: contents` makes wrapper spans transparent in layout so their
@@ -1883,7 +2027,7 @@
     overflow-y: auto;
   }
 
-  /* Inspector sheet: hidden off-screen by default; slides up to high (full) or low (partial). */
+  /* Inspector sheet: hidden off-screen by default; slides up when open. */
   .inspector {
     z-index: 45;
     border-left: 0;
@@ -1891,20 +2035,18 @@
     padding: 0;
   }
 
-  .inspector[data-sheet-snap='high'] {
-    transform: translateY(0);
-    height: var(--sheet-high-height);
-  }
-
-  .inspector[data-sheet-snap='low'] {
+  /* Open inspector sheet: continuous height driven by the hook's live --sheet-h
+     (falls back to the default expanded height). Drag the grab handle to resize
+     freely; the hook picks the settle point on release. */
+  .inspector[data-sheet-open='true'] {
     transform: translateY(0);
-    height: var(--sheet-low-height);
+    height: var(--sheet-h, var(--sheet-high-height));
   }
 
-  /* Auto-height variant -- inspector hugs its content at the high snap (drawing/code). */
-  .inspector.inspectorAuto[data-sheet-snap='high'] {
-    height: auto;
-    max-height: var(--sheet-high-height);
+  /* While dragging, drop the transition so the sheet tracks the finger 1:1; the
+     settle animation returns the moment this class is removed on release. */
+  .inspector.sheetDragging {
+    transition: none;
   }
 
   /* Shared sheet chrome -- grab bar pill + label row. Always visible when sheet is visible. */

package/kits/basic-2d/pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+allowBuilds:
+  '@fortawesome/fontawesome-common-types': set this to true or false
+  '@fortawesome/free-solid-svg-icons': set this to true or false

package/kits/basic-2d/scenes/main.scene

@@ -1,23 +1,13 @@
 {
-  "background": "#00396D",
+  "background": "#1a1932",
   "actors": [
     {
       "id": "pig",
+      "blueprint": "blueprints/cauldron.scene",
       "components": {
         "Layout": {
           "x": 210,
-          "y": 310,
-          "width": 80,
-          "height": 80,
-          "z": 1
-        },
-        "Sprite": {
-          "file": "drawings/pig.pxart"
-        },
-        "Collider": {
-          "kind": "solid",
-          "width": 70,
-          "height": 70
+          "y": 310
         }
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "castle-web-cli",
-  "version": "0.4.78",
+  "version": "0.4.80",
   "type": "module",
   "bin": {
     "castle-web": "./dist/index.js"
@@ -40,6 +40,7 @@
     "nanoid": "^5.1.7",
     "open": "^10.0.0",
     "picomatch": "^4.0.4",
+    "playwright-core": "^1.61.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "vite": "^8.0.3",

package/kits/basic-2d/drawings/pig.pxart

@@ -1,26 +0,0 @@
-{
-  "format": "compact",
-  "palette": {
-    "6": "#f5555d",
-    "q": "#391f21",
-    "v": "#f6ca9f"
-  },
-  "grid": [
-    "................",
-    "................",
-    "........q..q....",
-    "....qqqqvqqvq...",
-    "...qvvvvvvvvq...",
-    "..qvvvvvvvvvvq..",
-    ".qvvvvvvvqvvqvq.",
-    ".qvvvvvvvqvvqvq.",
-    "q6vvvvvvvvv666q.",
-    "q6vvvvvvvv6q6q6q",
-    ".qvvvvvvvv66666q",
-    ".qvvvvvvvvv666q.",
-    "..qvvvvvvvvvqq..",
-    "..q66qqqq6q6q...",
-    "..q6q...q6q.....",
-    "................"
-  ]
-}