npm - castle-web-cli - Versions diffs - 0.4.75 → 0.4.76 - Mend

castle-web-cli 0.4.75 → 0.4.76

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 (68) hide show

package/dist/agent-prompts.d.ts +4 -0
package/dist/agent-prompts.js +20 -8
package/dist/agent.js +301 -28
package/dist/castle-host/host.js +59 -5
package/dist/commonInstructions.d.ts +1 -1
package/dist/commonInstructions.js +4 -0
package/dist/ide.d.ts +1 -0
package/dist/ide.js +250 -1
package/dist/init.js +46 -4
package/dist/save-deck.js +8 -1
package/dist/serve.js +27 -1
package/dist/shell/assets/index-DNWEQd4R.js +141 -0
package/dist/shell/assets/{index-WNbOHPBj.css → index-DuKq-Grp.css} +1 -1
package/dist/shell/index.html +2 -2
package/kits/basic-2d/CLAUDE.md +13 -5
package/kits/basic-2d/castle.json +15 -0
package/kits/basic-2d/drawings/pig.pxart +22 -55
package/kits/basic-2d/editors/PxArtEditor.jsx +237 -4
package/kits/basic-2d/editors/SingleEditor.jsx +6 -51
package/kits/basic-2d/editors/pixelEditorChrome.jsx +17 -11
package/kits/basic-2d/editors/pixelGeometry.js +95 -0
package/kits/basic-2d/editors/pixelInspector.jsx +229 -51
package/kits/basic-2d/editors/pxArtTools.js +109 -1
package/kits/basic-2d/engine/ScenePlayer.jsx +11 -160
package/kits/basic-2d/engine/ui.jsx +15 -0
package/kits/basic-2d/engine/ui.module.css +44 -117
package/kits/basic-2d/main.jsx +6 -10
package/package.json +10 -1
package/dist/shell/assets/index-Dfn29Bkt.js +0 -108
package/kits/basic-2d/editors/App.jsx +0 -226
package/kits/basic-2d/editors/CodeEditor.jsx +0 -79
package/kits/basic-2d/editors/FileBrowser.jsx +0 -349
package/kits/basic-2d/editors/codeTheme.js +0 -135
package/kits/basic-2d/engine/playConsole.js +0 -66
package/kits/basic-3d/.prettierrc +0 -8
package/kits/basic-3d/CLAUDE.md +0 -162
package/kits/basic-3d/behaviors/Camera.jsx +0 -56
package/kits/basic-3d/behaviors/Collider.jsx +0 -78
package/kits/basic-3d/behaviors/Mesh.jsx +0 -82
package/kits/basic-3d/behaviors/Model.jsx +0 -61
package/kits/basic-3d/behaviors/Transform.jsx +0 -35
package/kits/basic-3d/editors/App.jsx +0 -147
package/kits/basic-3d/editors/CodeEditor.jsx +0 -112
package/kits/basic-3d/editors/FileBrowser.jsx +0 -143
package/kits/basic-3d/editors/ModelEditor.jsx +0 -400
package/kits/basic-3d/editors/PlayOnly.jsx +0 -22
package/kits/basic-3d/editors/SceneEditor.jsx +0 -1081
package/kits/basic-3d/editors/behaviorRegistry.js +0 -24
package/kits/basic-3d/editors/editorHistory.js +0 -52
package/kits/basic-3d/editors/viewportRig.js +0 -90
package/kits/basic-3d/engine/ScenePlayer.jsx +0 -58
package/kits/basic-3d/engine/SceneUI.jsx +0 -67
package/kits/basic-3d/engine/SceneViewport.jsx +0 -102
package/kits/basic-3d/engine/autoInspector.jsx +0 -51
package/kits/basic-3d/engine/files.js +0 -73
package/kits/basic-3d/engine/scene.js +0 -502
package/kits/basic-3d/engine/threeUtil.js +0 -260
package/kits/basic-3d/engine/ui.jsx +0 -352
package/kits/basic-3d/engine/ui.module.css +0 -944
package/kits/basic-3d/eslint.config.js +0 -51
package/kits/basic-3d/index.html +0 -11
package/kits/basic-3d/main.jsx +0 -10
package/kits/basic-3d/models/block.model +0 -14
package/kits/basic-3d/package-lock.json +0 -2713
package/kits/basic-3d/package.json +0 -41
package/kits/basic-3d/pnpm-lock.yaml +0 -1769
package/kits/basic-3d/scenes/main.scene +0 -76
package/kits/basic-3d/vite.config.js +0 -1

package/kits/basic-2d/engine/ScenePlayer.jsx CHANGED Viewed

@@ -1,21 +1,15 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
+import React, { useCallback, useEffect, useRef } from 'react';
 import { configureSceneCanvas, makeScene } from './scene';
 import { SceneUI } from './SceneUI';
-import { cx, Icon, styles } from './ui';
-import { usePlayLogs } from './playConsole';
 // Engine-level scene player: mount a `SceneRuntime` against a canvas, wire
 // keyboard / pointer input, run the update+draw loop, and render the
 // behavior-driven UI overlay. No game logic lives here -- behaviors and
-// scenes are the place for that.
+// 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 }) {
   const canvasRef = useRef(null);
   const runtimeRef = useRef(null);
-  // Bumping this re-runs the mount effect below, which tears down the running
-  // loop/runtime and rebuilds a fresh scene from the same data -- a clean restart.
-  const [runToken, setRunToken] = useState(0);
   const getRuntime = useCallback(() => runtimeRef.current, []);
-  const restart = useCallback(() => setRunToken((token) => token + 1), []);
   useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas) return undefined;
@@ -61,9 +55,7 @@ export function ScenePlayer({ sceneData, sprites, behaviorClasses, onFirstFrame
     canvas.addEventListener('pointerup', onPointerUp);
     canvas.addEventListener('pointercancel', onPointerUp);
     canvas.focus();
-    // Only signal first-frame readiness on the initial run; a restart shouldn't
-    // re-fire the host launcher reveal.
-    const stopLoop = startPlayerLoop(canvas, ctx, runtime, runToken === 0 ? onFirstFrame : undefined);
+    const stopLoop = startPlayerLoop(canvas, ctx, runtime, onFirstFrame);
     return () => {
       stopLoop();
       window.removeEventListener('keydown', onKeyDown);
@@ -75,156 +67,15 @@ export function ScenePlayer({ sceneData, sprites, behaviorClasses, onFirstFrame
       runtimeRef.current = null;
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [runToken]);
-  return (
-    <>
-      <div style={{ position: 'fixed', inset: 0, background: '#000' }}>
-        <canvas
-          ref={canvasRef}
-          tabIndex={0}
-          style={{ width: '100%', height: '100%', display: 'block', outline: 'none' }}
-        />
-        <SceneUI getRuntime={getRuntime} />
-      </div>
-      {/* Portal to <body> so the console drawer escapes the SDK's card-sized,
-          transformed `#root > *` wrapper and pins to the panel, outside the
-          play preview. */}
-      {createPortal(<PlayConsole onRestart={restart} />, document.body)}
-    </>
-  );
-}
-function PlayConsole({ onRestart }) {
-  const { logs, clearLogs } = usePlayLogs();
-  const [open, setOpen] = useState(false);
-  const rootRef = useRef(null);
-  const bodyRef = useRef(null);
-  // Reserve the drawer's footprint by shrinking + lifting the SDK deck card so it
-  // sits fully above the drawer (visible + interactive) instead of behind it.
-  // Driven by the live drawer height; recomputed on toggle (height change via the
-  // ResizeObserver) and on window/card resize.
-  useEffect(() => {
-    const el = rootRef.current;
-    if (!el) return undefined;
-    const docEl = document.documentElement;
-    docEl.dataset.castleLogs = '';
-    const TOP_MARGIN = 16;
-    const MIN_CARD_SCALE = 0.2;
-    const apply = () => {
-      const drawerHeight = el.offsetHeight;
-      const cs = getComputedStyle(docEl);
-      const fullW = parseFloat(cs.getPropertyValue('--castle-card-w'));
-      const fullH = parseFloat(cs.getPropertyValue('--castle-card-h'));
-      docEl.style.setProperty('--castle-logs-shift', `${drawerHeight / 2}px`);
-      // Only resize the card when we know its natural size; otherwise leave it to
-      // the SDK fallback (the rule's var() defaults handle this).
-      if (fullW > 0 && fullH > 0) {
-        const available = window.innerHeight - drawerHeight - TOP_MARGIN;
-        // Floor the scale so a very short panel (drawer taller than the area)
-        // can't drive the card to 0/negative and make the deck disappear.
-        const scale = Math.min(1, Math.max(MIN_CARD_SCALE, available / fullH));
-        docEl.style.setProperty('--castle-logs-card-w', `${fullW * scale}px`);
-        docEl.style.setProperty('--castle-logs-card-h', `${fullH * scale}px`);
-      } else {
-        docEl.style.removeProperty('--castle-logs-card-w');
-        docEl.style.removeProperty('--castle-logs-card-h');
-      }
-    };
-    apply();
-    const observer = new ResizeObserver(apply);
-    observer.observe(el);
-    window.addEventListener('resize', apply);
-    return () => {
-      observer.disconnect();
-      window.removeEventListener('resize', apply);
-      delete docEl.dataset.castleLogs;
-      docEl.style.removeProperty('--castle-logs-card-w');
-      docEl.style.removeProperty('--castle-logs-card-h');
-      docEl.style.removeProperty('--castle-logs-shift');
-    };
   }, []);
-  // Keep the newest line in view while expanded.
-  useEffect(() => {
-    if (open && bodyRef.current) bodyRef.current.scrollTop = bodyRef.current.scrollHeight;
-  }, [logs, open]);
-  const copy = useCallback(() => {
-    const text = logs.map((line) => line.text).join('\n');
-    navigator.clipboard?.writeText(text).catch(() => {});
-  }, [logs]);
-  const hasLogs = logs.length > 0;
   return (
-    <div ref={rootRef} className={styles.playConsole}>
-      {/* The whole header row toggles; the action buttons stopPropagation so
-          they don't also collapse/expand. */}
-      <div
-        className={styles.playConsoleHeader}
-        role="button"
-        tabIndex={-1}
-        aria-expanded={open}
-        aria-label={open ? 'Collapse logs' : 'Expand logs'}
-        onClick={() => setOpen((value) => !value)}>
-        <span className={styles.playConsoleToggle}>
-          <span className={styles.playConsoleCaret}>
-            <Icon name={open ? 'chevron-down' : 'chevron-right'} />
-          </span>
-          <span className={styles.playConsoleTitle}>Logs</span>
-        </span>
-        <div
-          className={styles.playConsoleActions}
-          onClick={(event) => event.stopPropagation()}>
-          {open ? (
-            <>
-              <button
-                type="button"
-                tabIndex={-1}
-                className={styles.playConsoleBtn}
-                aria-label="Copy logs"
-                title="Copy logs"
-                disabled={!hasLogs}
-                onClick={copy}>
-                <Icon name="clone" />
-              </button>
-              <button
-                type="button"
-                tabIndex={-1}
-                className={styles.playConsoleBtn}
-                aria-label="Clear logs"
-                title="Clear logs"
-                disabled={!hasLogs}
-                onClick={clearLogs}>
-                <Icon name="trash" />
-              </button>
-            </>
-          ) : null}
-          <button
-            type="button"
-            tabIndex={-1}
-            className={styles.playConsoleBtn}
-            aria-label="Restart"
-            title="Restart"
-            onClick={onRestart}>
-            <Icon name="rotate" />
-          </button>
-        </div>
-      </div>
-      {open ? (
-        <div ref={bodyRef} className={styles.playConsoleBody}>
-          {hasLogs ? (
-            logs.map((line) => (
-              <div
-                key={line.id}
-                className={cx(
-                  styles.playConsoleLine,
-                  line.level === 'warn' && styles.playConsoleLineWarn,
-                  line.level === 'error' && styles.playConsoleLineError
-                )}>
-                {line.text}
-              </div>
-            ))
-          ) : (
-            <div className={styles.playConsoleEmpty}>no output</div>
-          )}
-        </div>
-      ) : null}
+    <div style={{ position: 'fixed', inset: 0, background: '#000' }}>
+      <canvas
+        ref={canvasRef}
+        tabIndex={0}
+        style={{ width: '100%', height: '100%', display: 'block', outline: 'none' }}
+      />
+      <SceneUI getRuntime={getRuntime} />
     </div>
   );
 }

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

@@ -2,10 +2,13 @@ import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import {
   faArrowsAlt,
+  faArrowsAltH,
+  faArrowsAltV,
   faBars,
   faChevronDown,
   faChevronRight,
   faChevronUp,
+  faCircle,
   faClone,
   faCode,
   faEraser,
@@ -22,6 +25,9 @@ import {
   faPlay,
   faPlus,
   faRedo,
+  faShapes,
+  faSlash,
+  faVectorSquare,
   faSquare,
   faStamp,
   faStop,
@@ -149,16 +155,20 @@ const icons = {
   'chevron-down': faChevronDown,
   'chevron-right': faChevronRight,
   'chevron-up': faChevronUp,
+  circle: faCircle,
   clone: faClone,
   code: faCode,
   eraser: faEraser,
   eyedropper: faEyeDropper,
   fill: faFillDrip,
+  'flip-h': faArrowsAltH,
+  'flip-v': faArrowsAltV,
   file: faFile,
   film: faFilm,
   globe: faGlobe,
   image: faImage,
   'layer-group': faLayerGroup,
+  marquee: faVectorSquare,
   move: faArrowsAlt,
   'object-group': faObjectGroup,
   palette: faPalette,
@@ -167,10 +177,15 @@ const icons = {
   plus: faPlus,
   redo: faRedo,
   rotate: faSyncAlt,
+  shapes: faShapes,
+  slash: faSlash,
   square: faSquare,
   stamp: faStamp,
   stop: faStop,
   times: faTimes,
+  // Hand-rolled equilateral-ish triangle glyph (FA free-solid has no plain
+  // triangle); shaped to match the filled-glyph look of the imported icons.
+  triangle: { icon: [512, 512, [], '', 'M256 64 L496 448 L16 448 Z'] },
   trash: faTrash,
   undo: faUndo,
 };

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

@@ -1158,12 +1158,21 @@
   flex-direction: column;
   width: 34px;
   flex: 0 0 auto;
+  gap: 8px;
+}
+/* Each control group (color, size, shape type, mode toggle) is its own boxed
+   section, separated by the strip's gap. Controls stacked inside a section keep
+   1px dividers so a multi-button group still reads as one segmented unit. */
+.paintStripSection {
+  display: flex;
+  flex-direction: column;
   border: 1px solid var(--castle-inspector-border);
   border-radius: var(--castle-radius);
   overflow: hidden;
 }
-.paintStrip > * + * {
+.paintStripSection > * + * {
   border-top: 1px solid var(--castle-inspector-border);
 }
@@ -1211,6 +1220,11 @@
   background: var(--castle-inspector-input-bg);
 }
+.paintStripModeButton:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
 .drawingSizeSliderVertical {
   width: 88px;
   height: 14px;
@@ -1292,6 +1306,21 @@
   justify-content: center;
 }
+/* Stacks the native artboard canvas and the display-resolution overlay so the
+   marching-ants outline renders crisp instead of sub-pixel on the upscaled art. */
+.drawingArtboardFrame {
+  position: relative;
+  flex: 0 0 auto;
+}
+.drawingOverlay {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
 .drawingCanvas {
   image-rendering: pixelated;
   background:
@@ -1432,6 +1461,20 @@
   color: var(--castle-selected-ink);
 }
+/* Horizontal segmented row of shape sub-mode buttons in the wide-layout Tool
+   Settings panel. Reuses .drawingToolButton glyph buttons with shared borders. */
+.drawingShapeModeRow {
+  display: flex;
+  width: max-content;
+  border: 1px solid var(--castle-inspector-border);
+  border-radius: var(--castle-radius);
+  overflow: hidden;
+}
+.drawingShapeModeRow > * + * {
+  border-left: 1px solid var(--castle-inspector-border);
+}
 .drawingToolHint {
   color: var(--castle-inspector-muted);
   font-size: 14px;
@@ -1902,119 +1945,3 @@
   }
 }
-/* On-panel play console: a collapsible log drawer pinned to the bottom of the
-   play panel (portaled to <body> so it sits outside the SDK's card wrapper).
-   Houses the restart control plus copy/clear log affordances. */
-.playConsole {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 60;
-  display: flex;
-  flex-direction: column;
-  border-top: 1px solid rgba(255, 255, 255, 0.12);
-  background: rgba(13, 13, 13, 0.94);
-  color: #e6e6e6;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
-    'Courier New', monospace;
-  padding-bottom: env(safe-area-inset-bottom, 0px);
-  overflow: hidden;
-}
-.playConsoleHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 7px 8px 7px 10px;
-  cursor: pointer;
-}
-.playConsoleHeader:hover {
-  background: rgba(255, 255, 255, 0.04);
-}
-.playConsoleToggle {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.playConsoleCaret {
-  display: inline-flex;
-  font-size: 11px;
-  color: #8a8a8a;
-}
-.playConsoleTitle {
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 1px;
-  text-transform: uppercase;
-  color: #b3b3b3;
-}
-.playConsoleActions {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-.playConsoleBtn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 30px;
-  height: 28px;
-  padding: 0;
-  font-size: 13px;
-  color: #cfcfcf;
-  background: transparent;
-  border: 1px solid rgba(255, 255, 255, 0.14);
-  border-radius: 6px;
-  cursor: pointer;
-}
-.playConsoleBtn:hover {
-  background: rgba(255, 255, 255, 0.08);
-  color: #fff;
-}
-.playConsoleBtn:disabled {
-  opacity: 0.38;
-  cursor: default;
-}
-.playConsoleBtn:disabled:hover {
-  background: transparent;
-  color: #cfcfcf;
-}
-.playConsoleBody {
-  border-top: 1px solid rgba(255, 255, 255, 0.08);
-  height: 165px;
-  overflow-y: auto;
-  padding: 8px 10px;
-  font-size: 12px;
-  line-height: 1.5;
-}
-.playConsoleEmpty {
-  color: #6a6a6a;
-}
-.playConsoleLine {
-  white-space: pre-wrap;
-  word-break: break-word;
-  color: #c8c8c8;
-}
-.playConsoleLineWarn {
-  color: #e0af68;
-}
-.playConsoleLineError {
-  color: #ff7a93;
-}
-/* While the logs drawer is mounted, scale the deck card to fit ABOVE the drawer
-   (rather than sitting behind it) so play stays fully visible and interactive.
-   The SDK's initPlayCard() pins `#root > *` as a viewport-centered card with
-   !important; this higher-specificity (attribute + id) rule overrides its size
-   and vertical offset. The three custom properties are driven from JS in
-   PlayConsole using the live drawer height + the SDK's natural card size. */
-:global(html[data-castle-logs] #root > *) {
-  width: var(--castle-logs-card-w, var(--castle-card-w, 100vw)) !important;
-  height: var(--castle-logs-card-h, var(--castle-card-h, 100vh)) !important;
-  transform: translate(-50%, calc(-50% - var(--castle-logs-shift, 0px))) !important;
-  transition:
-    transform 0.18s ease,
-    width 0.18s ease,
-    height 0.18s ease;
-}

package/kits/basic-2d/main.jsx CHANGED Viewed

@@ -1,27 +1,23 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { isEdit, setup } from 'castle-web-sdk';
-import { App } from './editors/App';
 import { PlayOnly } from './editors/PlayOnly';
 import { ErrorBoundary } from './editors/ErrorBoundary';
-import { FileList, SingleEditor } from './editors/SingleEditor';
+import { SingleEditor } from './editors/SingleEditor';
 document.body.dataset.castleScreenshotTarget = 'viewport';
 setup();
 const root = document.getElementById('root');
 if (!root) throw new Error('Missing root element');
-// Route on URL params so the shell can mount each piece in its own panel iframe:
+// Route on URL params so the shell can mount each piece in its own panel iframe.
+// File browsing and the code/text editor are now builtin shell panels, so the
+// kit only renders the deck (play) and its rich per-file editors (scene/pxart):
 //   (no edit / ?edit=0)        -> play the deck (playtest panel)
-//   ?panel=files               -> the file list (asks the shell to open files)
-//   ?file=<path>[&editor=<id>] -> a single editor for that file
-//   (edit, no params)          -> the combined editor app (legacy fallback)
+//   ?file=<path>[&editor=<id>] -> a single rich editor for that file
 const params = new URLSearchParams(window.location.search);
 function pick() {
   if (!isEdit()) return <PlayOnly />;
-  if (params.get('panel') === 'files') {
-    return <FileList selectedPath={params.get('file') ?? ''} />;
-  }
   const file = params.get('file');
   if (file) return <SingleEditor path={file} editor={params.get('editor') ?? undefined} />;
-  return <App />;
+  return <PlayOnly />;
 }
 createRoot(root).render(<ErrorBoundary>{pick()}</ErrorBoundary>);

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "castle-web-cli",
-  "version": "0.4.75",
+  "version": "0.4.76",
   "type": "module",
   "bin": {
     "castle-web": "./dist/index.js"
@@ -23,15 +23,23 @@
     ]
   },
   "dependencies": {
+    "@codemirror/lang-javascript": "^6.2.5",
+    "@codemirror/language": "^6.12.3",
+    "@codemirror/state": "^6.6.0",
+    "@codemirror/view": "^6.41.1",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@lezer/highlight": "^1.2.3",
     "@lydell/node-pty": "^1.2.0-beta.12",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/addon-serialize": "^0.14.0",
     "@xterm/headless": "^6.0.0",
     "@xterm/xterm": "^6.0.0",
+    "codemirror": "^6.0.2",
     "dockview": "^4.13.1",
     "marked": "^18.0.5",
     "nanoid": "^5.1.7",
     "open": "^10.0.0",
+    "picomatch": "^4.0.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "vite": "^8.0.3",
@@ -40,6 +48,7 @@
   },
   "devDependencies": {
     "@types/node": "^20.0.0",
+    "@types/picomatch": "^4.0.2",
     "@types/react": "^18.3.31",
     "@types/react-dom": "^18.3.7",
     "@types/ws": "^8.18.1",