npm - castle-web-cli - Versions diffs - 0.4.119 → 0.4.120 - Mend

castle-web-cli 0.4.119 → 0.4.120

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (24) hide show

package/dist/api.js +13 -2
package/dist/castle-host/host.d.ts +16 -0
package/dist/castle-host/host.js +249 -11
package/dist/castle-host/leaderboardPanel.d.ts +73 -0
package/dist/castle-host/leaderboardPanel.js +714 -0
package/dist/ide.d.ts +2 -0
package/dist/ide.js +35 -0
package/dist/index.js +1 -6
package/dist/preview.d.ts +0 -1
package/dist/preview.js +18 -23
package/dist/save-deck.js +33 -2
package/dist/serve.js +9 -4
package/dist/shell/assets/index-BkJ87APM.css +1 -0
package/dist/shell/assets/index-Cxmq9Sed.js +434 -0
package/dist/shell/index.html +2 -2
package/kits/physics-2d/CLAUDE.md +8 -4
package/kits/physics-2d/castle.json +1 -1
package/kits/physics-2d/editors/SceneEditor.jsx +11 -2
package/kits/physics-2d/editors/pixelInspector.jsx +30 -9
package/kits/physics-2d/editors/pxArtTimeline.jsx +147 -18
package/kits/physics-2d/engine/ui.module.css +1 -0
package/package.json +1 -1
package/dist/shell/assets/index-WtgFx1s8.js +0 -144
package/dist/shell/assets/index-Y6cJRRCX.css +0 -1

package/dist/shell/index.html CHANGED Viewed

@@ -10,8 +10,8 @@
     <link rel="icon" type="image/png" sizes="32x32" href="/__castle/ide/favicon-32x32.png" />
     <link rel="icon" type="image/png" sizes="16x16" href="/__castle/ide/favicon-16x16.png" />
     <link rel="icon" href="/__castle/ide/favicon.ico" sizes="any" />
-    <script type="module" crossorigin src="/__castle/ide/assets/index-WtgFx1s8.js"></script>
-    <link rel="stylesheet" crossorigin href="/__castle/ide/assets/index-Y6cJRRCX.css">
+    <script type="module" crossorigin src="/__castle/ide/assets/index-Cxmq9Sed.js"></script>
+    <link rel="stylesheet" crossorigin href="/__castle/ide/assets/index-BkJ87APM.css">
   </head>
   <body>
     <div id="root"></div>

package/kits/physics-2d/CLAUDE.md CHANGED Viewed

@@ -192,10 +192,14 @@ make it move.**
   (`mode`, `width`/`height`, `offsetX`/`offsetY`, `debug`) it has:
   - `shape: 'box' | 'circle'` — the physics shape (default `box`). A circle uses
     `radius`, or half the smaller collider dimension if `radius` is 0.
-  - A collider can hold **multiple shapes** (a compound body) — edit them in the
-    inspector's shape list. A **box shape takes an `angle`** (degrees), so one
-    actor can have an angled collider (e.g. a skateboard: a flat deck box plus an
-    upturned nose and tail box) instead of gluing separate actors together.
+  - A collider can hold **multiple shapes** (a compound body) — add and edit them
+    in the inspector's shape list. Each entry in `shapes` is `{ type, ... }` sized
+    in **fractions of the Layout box** (`0.5` = centered, `1` = full width), so a
+    shape keeps its proportions when the actor is resized: a box takes
+    `x`/`y`/`w`/`h`, a circle `x`/`y`/`r`.
+  - A **box shape takes an `angle`** (degrees), so one actor can have an angled
+    collider (e.g. a skateboard: a flat deck box plus an upturned nose and tail
+    box) instead of gluing separate actors together.
   - `isTrigger` — a **sensor**: detects overlaps (fires collision callbacks) but
     does **not** block. Use for pickups, goals, zones.
   - `bounciness` — restitution, 0 (dead) to ~1 (very bouncy), can exceed 1.

package/kits/physics-2d/castle.json CHANGED Viewed

@@ -123,5 +123,5 @@
   "main": "main.jsx",
   "autoUpdateWhenImported": true,
   "title": "physics-2d",
-  "publishedVersion": "2026-08-08T19:00:43.040Z"
+  "publishedVersion": "2026-08-12T18:15:12.718Z"
 }

package/kits/physics-2d/editors/SceneEditor.jsx CHANGED Viewed

@@ -442,8 +442,16 @@ export function SceneEditor({
       sceneData,
       files
     );
-    void writeFile(drawingFile.path, drawingFile.text);
-    void writeFile(blueprintFile.path, blueprintFile.text);
+    // Add both generated files to the live map before committing the instance.
+    // Otherwise another + click can mint the same numbered paths while the fs
+    // watcher's asynchronous echo of these direct writes is still pending.
+    if (onChangeFile) {
+      onChangeFile(drawingFile.path, drawingFile.text);
+      onChangeFile(blueprintFile.path, blueprintFile.text);
+    } else {
+      void writeFile(drawingFile.path, drawingFile.text);
+      void writeFile(blueprintFile.path, blueprintFile.text);
+    }
     history.commit(serialize(next));
     onSelectActorIds([newId]);
   };
@@ -1675,6 +1683,7 @@ function BlueprintInspector({
         selectedActor={templateActor}
         rawActor={templateActor}
         files={files}
+        sprites={sprites}
         onSetComponent={(actorId, behaviorName, nextProps) => onSetComponent(behaviorName, nextProps)}
         onAddBehavior={(actorId, behaviorName) => onAddBehavior(behaviorName)}
         onRemoveBehavior={(actorId, behaviorName) => onRemoveBehavior(behaviorName)}

package/kits/physics-2d/editors/pixelInspector.jsx CHANGED Viewed

@@ -271,15 +271,36 @@ export function PalettePopover({ open, anchorRef, onClose, children }) {
   useLayoutEffect(() => {
     if (!open || !anchorRef.current) return;
-    const anchor = anchorRef.current.getBoundingClientRect();
-    const popoverWidth = 280;
-    const margin = 8;
-    let left = anchor.left - popoverWidth - margin;
-    if (left < margin) left = anchor.right + margin;
-    let top = anchor.top;
-    const maxTop = window.innerHeight - margin;
-    if (top + 320 > maxTop) top = Math.max(margin, maxTop - 320);
-    setPosition({ top, left });
+    function positionPopover() {
+      const anchor = anchorRef.current.getBoundingClientRect();
+      const rect = popoverRef.current?.getBoundingClientRect();
+      const margin = 8;
+      const width = rect?.width ?? 280;
+      const height = rect?.height ?? 320;
+      const maxLeft = Math.max(margin, window.innerWidth - width - margin);
+      const maxTop = Math.max(margin, window.innerHeight - height - margin);
+      const leftSide = anchor.left - width - margin;
+      const rightSide = anchor.right + margin;
+      // Prefer the side with room, then clamp a too-wide picker inside this
+      // iframe rather than sending it beyond either viewport edge.
+      const left =
+        leftSide >= margin
+          ? leftSide
+          : rightSide <= maxLeft
+            ? rightSide
+            : Math.min(maxLeft, Math.max(margin, anchor.left + anchor.width / 2 - width / 2));
+      const top = Math.min(maxTop, Math.max(margin, anchor.top));
+      setPosition({ top, left });
+    }
+    positionPopover();
+    window.addEventListener('resize', positionPopover);
+    window.addEventListener('scroll', positionPopover, true);
+    return () => {
+      window.removeEventListener('resize', positionPopover);
+      window.removeEventListener('scroll', positionPopover, true);
+    };
   }, [open, anchorRef]);
   useEffect(() => {

package/kits/physics-2d/editors/pxArtTimeline.jsx CHANGED Viewed

@@ -31,6 +31,8 @@ const SHOW_PER_FRAME_DURATION = false;
 // re-renders the count input, so this is a trivial, easily-revertible toggle.
 const SHOW_ONION_RANGE = false;
 const ONION_RANGE = 1;
+const TIMELINE_LONG_PRESS_MS = 500;
+const TIMELINE_LONG_PRESS_MOVE_TOLERANCE = 10;
 // faClapperboard ships in Font Awesome 6, but this kit is pinned to FA5 (see
 // package.json), which doesn't export it. Rather than silently swap in a
@@ -328,26 +330,58 @@ function TimelineGrid({ sprite, text, selection, actions }) {
   const [convertConfirm, setConvertConfirm] = useState(null);
   const closeMenu = useCallback(() => setMenu(null), []);
-  // Each opener stops the browser's native menu, anchors at the cursor, and
-  // stashes just enough to rebuild items from the latest props at render time
-  // (so relocated actions always run against current sprite/selection state).
+  // A timeline entity is selected independently by its relevant axis: a layer
+  // by layer index, a frame by frame index, and a cel by the complete pair.
+  // First tap selects; a second tap on that same entity opens its action menu.
+  // A touch long-press always selects its target and opens the same menu.
+  const selectTarget = useCallback(
+    (target) => {
+      if (target.kind === 'layer') actions.selectCell(target.layerIndex, selection.frameIndex);
+      else if (target.kind === 'frame') actions.selectCell(selection.layerIndex, target.frameIndex);
+      else actions.selectCell(target.layerIndex, target.frameIndex);
+    },
+    [actions, selection.frameIndex, selection.layerIndex]
+  );
+  const targetIsSelected = useCallback(
+    (target) => {
+      if (target.kind === 'layer') return selection.layerIndex === target.layerIndex;
+      if (target.kind === 'frame') return selection.frameIndex === target.frameIndex;
+      return selection.layerIndex === target.layerIndex && selection.frameIndex === target.frameIndex;
+    },
+    [selection.frameIndex, selection.layerIndex]
+  );
+  const openMenu = useCallback(
+    (target, event) => {
+      selectTarget(target);
+      const rect = event.currentTarget?.getBoundingClientRect?.();
+      const x = Number.isFinite(event.clientX) ? event.clientX : rect?.left + rect?.width / 2;
+      const y = Number.isFinite(event.clientY) ? event.clientY : rect?.top + rect?.height / 2;
+      setMenu({ ...target, x: x ?? 0, y: y ?? 0 });
+    },
+    [selectTarget]
+  );
+  const press = useTimelineItemPress(openMenu);
+  const activateTarget = (target, event) => {
+    if (isTimelineNestedControl(event) || press.consumeClick(target)) return;
+    if (targetIsSelected(target)) openMenu(target, event);
+    else selectTarget(target);
+  };
+  // Right-click keeps the desktop path and deliberately opens its target even
+  // when it was not already selected.
   const openLayerMenu = (event, layerIndex) => {
     event.preventDefault();
     event.stopPropagation();
-    setMenu({ kind: 'layer', x: event.clientX, y: event.clientY, layerIndex });
+    openMenu({ kind: 'layer', layerIndex }, event);
   };
   const openFrameMenu = (event, frameIndex) => {
     event.preventDefault();
     event.stopPropagation();
-    setMenu({ kind: 'frame', x: event.clientX, y: event.clientY, frameIndex });
+    openMenu({ kind: 'frame', frameIndex }, event);
   };
   const openCellMenu = (event, layerIndex, frameIndex) => {
     event.preventDefault();
     event.stopPropagation();
-    // Link/Unlink are bound to the active cell, so select this one first; the
-    // menu re-renders with rebuilt actions that target (layerIndex, frameIndex).
-    actions.selectCell(layerIndex, frameIndex);
-    setMenu({ kind: 'cell', x: event.clientX, y: event.clientY, layerIndex, frameIndex });
+    openMenu({ kind: 'cell', layerIndex, frameIndex }, event);
   };
   return (
@@ -361,7 +395,8 @@ function TimelineGrid({ sprite, text, selection, actions }) {
             index={f}
             globalMs={sprite.defaultDurationMs}
             active={f === selection.frameIndex}
-            onSelect={() => actions.selectCell(selection.layerIndex, f)}
+            onActivate={(event) => activateTarget({ kind: 'frame', frameIndex: f }, event)}
+            onPointerDown={(event) => press.onPointerDown(event, { kind: 'frame', frameIndex: f })}
             onDuration={(ms) => actions.setFrameDuration(f, ms)}
             onContextMenu={(event) => openFrameMenu(event, f)}
           />
@@ -373,7 +408,8 @@ function TimelineGrid({ sprite, text, selection, actions }) {
             layer={sprite.layers[li]}
             index={li}
             active={li === selection.layerIndex}
-            onSelect={() => actions.selectCell(li, selection.frameIndex)}
+            onActivate={(event) => activateTarget({ kind: 'layer', layerIndex: li }, event)}
+            onPointerDown={(event) => press.onPointerDown(event, { kind: 'layer', layerIndex: li })}
             actions={actions}
             onContextMenu={openLayerMenu}
           />
@@ -385,7 +421,8 @@ function TimelineGrid({ sprite, text, selection, actions }) {
               layerIndex={li}
               frameIndex={f}
               active={li === selection.layerIndex && f === selection.frameIndex}
-              onSelect={() => actions.selectCell(li, f)}
+              onActivate={(event) => activateTarget({ kind: 'cell', layerIndex: li, frameIndex: f }, event)}
+              onPointerDown={(event) => press.onPointerDown(event, { kind: 'cell', layerIndex: li, frameIndex: f })}
               onContextMenu={(event) => openCellMenu(event, li, f)}
             />
           ))}
@@ -425,6 +462,93 @@ function TimelineGrid({ sprite, text, selection, actions }) {
   );
 }
+function targetKey(target) {
+  if (target.kind === 'layer') return `layer:${target.layerIndex}`;
+  if (target.kind === 'frame') return `frame:${target.frameIndex}`;
+  return `cell:${target.layerIndex}:${target.frameIndex}`;
+}
+// Form controls inside a selectable timeline header keep their direct behavior;
+// pressing the layer visibility toggle or a duration input must not arm a menu.
+function isTimelineNestedControl(event) {
+  if (!(event.target instanceof Element) || event.target === event.currentTarget) return false;
+  return Boolean(event.target.closest('input, select, textarea, [data-timeline-control]'));
+}
+// Touch-only long press. Scroll intent cancels it after a small move threshold;
+// the subsequent synthetic click is consumed after a successful hold so it
+// doesn't immediately close/reopen the action menu.
+function useTimelineItemPress(openMenu) {
+  const openMenuRef = useRef(openMenu);
+  const pressRef = useRef(null);
+  const suppressClickRef = useRef(null);
+  openMenuRef.current = openMenu;
+  useEffect(() => {
+    const clearPress = () => {
+      const press = pressRef.current;
+      if (!press) return null;
+      window.clearTimeout(press.timer);
+      pressRef.current = null;
+      return press;
+    };
+    const onPointerMove = (event) => {
+      const press = pressRef.current;
+      if (!press || press.pointerId !== event.pointerId || press.opened) return;
+      if (Math.hypot(event.clientX - press.startX, event.clientY - press.startY) <= TIMELINE_LONG_PRESS_MOVE_TOLERANCE) return;
+      clearPress();
+    };
+    const onPointerEnd = (event) => {
+      const press = pressRef.current;
+      if (!press || press.pointerId !== event.pointerId) return;
+      const ended = clearPress();
+      if (ended?.opened) suppressClickRef.current = targetKey(ended.target);
+    };
+    window.addEventListener('pointermove', onPointerMove);
+    window.addEventListener('pointerup', onPointerEnd);
+    window.addEventListener('pointercancel', onPointerEnd);
+    return () => {
+      clearPress();
+      window.removeEventListener('pointermove', onPointerMove);
+      window.removeEventListener('pointerup', onPointerEnd);
+      window.removeEventListener('pointercancel', onPointerEnd);
+    };
+  }, []);
+  const onPointerDown = useCallback((event, target) => {
+    if (event.pointerType !== 'touch' || event.button !== 0 || isTimelineNestedControl(event)) return;
+    const prior = pressRef.current;
+    if (prior) window.clearTimeout(prior.timer);
+    const menuEvent = {
+      clientX: event.clientX,
+      clientY: event.clientY,
+      currentTarget: event.currentTarget,
+    };
+    const press = {
+      pointerId: event.pointerId,
+      target,
+      startX: event.clientX,
+      startY: event.clientY,
+      opened: false,
+      timer: 0,
+    };
+    press.timer = window.setTimeout(() => {
+      if (pressRef.current !== press) return;
+      press.opened = true;
+      openMenuRef.current(target, menuEvent);
+    }, TIMELINE_LONG_PRESS_MS);
+    pressRef.current = press;
+  }, []);
+  const consumeClick = useCallback((target) => {
+    if (suppressClickRef.current !== targetKey(target)) return false;
+    suppressClickRef.current = null;
+    return true;
+  }, []);
+  return { onPointerDown, consumeClick };
+}
 // Cursor-anchored right-click menu. Reuses the scene editor's "Arrange" menu
 // chrome (the shared `selArrangeMenu`/`selArrangeItem` classes from
 // engine/ui.module.css) for visual consistency, switching to fixed positioning
@@ -588,12 +712,14 @@ function cellMenuItems(menu, sprite, actions) {
   ];
 }
-function FrameHeader({ frame, index, globalMs, active, onSelect, onDuration, onContextMenu }) {
+function FrameHeader({ frame, index, globalMs, active, onActivate, onPointerDown, onDuration, onContextMenu }) {
   return (
     <div
       className={active ? tl.frameHead + ' ' + tl.frameHeadActive : tl.frameHead}
+      onPointerDown={onPointerDown}
+      onClick={onActivate}
       onContextMenu={onContextMenu}>
-      <button type="button" className={tl.frameNum} onClick={onSelect} style={btnReset}>
+      <button type="button" className={tl.frameNum} style={btnReset}>
         {index + 1}
       </button>
       {SHOW_PER_FRAME_DURATION ? (
@@ -681,11 +807,12 @@ function FaGlyph({ icon, className = tl.visGlyph }) {
   );
 }
-function LayerHeader({ layer, index, active, onSelect, actions, onContextMenu }) {
+function LayerHeader({ layer, index, active, onActivate, onPointerDown, actions, onContextMenu }) {
   return (
     <div
       className={active ? tl.layerHead + ' ' + tl.layerHeadActive : tl.layerHead}
-      onClick={onSelect}
+      onPointerDown={onPointerDown}
+      onClick={onActivate}
       onContextMenu={(event) => onContextMenu(event, index)}>
       <div className={tl.layerTopRow}>
         <span
@@ -710,6 +837,7 @@ function LayerHeader({ layer, index, active, onSelect, actions, onContextMenu })
         />
         <button
           type="button"
+          data-timeline-control
           className={layer.visible ? tl.visBtn : tl.visBtn + ' ' + tl.visOff}
           title={layer.visible ? 'Hide layer' : 'Show layer'}
           onClick={(event) => {
@@ -723,7 +851,7 @@ function LayerHeader({ layer, index, active, onSelect, actions, onContextMenu })
   );
 }
-function CellThumb({ sprite, text, layerIndex, frameIndex, active, onSelect, onContextMenu }) {
+function CellThumb({ sprite, text, layerIndex, frameIndex, active, onActivate, onPointerDown, onContextMenu }) {
   const canvasRef = useRef(null);
   const layer = sprite.layers[layerIndex];
   const kind = cellKind(layer, frameIndex);
@@ -743,7 +871,8 @@ function CellThumb({ sprite, text, layerIndex, frameIndex, active, onSelect, onC
       type="button"
       className={active ? tl.cell + ' ' + tl.cellActive : tl.cell}
       title={`Layer ${layerIndex + 1}, frame ${frameIndex + 1} (${kind})`}
-      onClick={onSelect}
+      onPointerDown={onPointerDown}
+      onClick={onActivate}
       onContextMenu={onContextMenu}>
       {kind === 'empty' ? (
         <span className={tl.empty} />

package/kits/physics-2d/engine/ui.module.css CHANGED Viewed

@@ -1797,6 +1797,7 @@
   z-index: 200;
   width: min(280px, calc(100vw - 16px));
   max-height: min(420px, calc(100vh - 16px));
+  box-sizing: border-box;
   overflow: auto;
   padding: 12px 14px 14px;
   border: 1px solid var(--castle-inspector-border);

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "castle-web-cli",
-  "version": "0.4.119",
+  "version": "0.4.120",
   "type": "module",
   "bin": {
     "castle-web": "./dist/index.js"