castle-web-cli 0.4.71 → 0.4.73

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

@@ -7,11 +7,12 @@
 
 import React, { useEffect, useRef, useState } from 'react';
 import { onBeforeRestart, writeFile } from 'castle-web-sdk';
-import { formatJson, getFileKind, initialFiles, parseJsonFile } from '../engine/files';
+import { getFileKind, initialFiles } from '../engine/files';
+import { collectAssets } from '../engine/assets';
 import { MainEditor, styles } from '../engine/ui';
 import { CodeEditor } from './CodeEditor';
-import { DrawingEditor } from './DrawingEditor';
-import { FileTree } from './FileBrowser';
+import { PxArtEditor } from './PxArtEditor';
+import { FileBrowser } from './FileBrowser';
 import { SceneEditor } from './SceneEditor';
 
 // Debounced writeFile per path, flushed on reload -- the same save behavior the
@@ -64,12 +65,7 @@ export function SingleEditor({ path, editor }) {
   const [selectedActorIds, setSelectedActorIds] = useState([]);
   const [multiSelectMode, setMultiSelectMode] = useState(false);
   const schedule = useFileSaver();
-  const drawings = {};
-  for (const [filePath, text] of Object.entries(files)) {
-    if (!filePath.endsWith('.drawing')) continue;
-    const parsed = parseJsonFile(filePath, text);
-    if (parsed.value) drawings[filePath] = parsed.value;
-  }
+  const { sprites } = collectAssets(files);
   function onChange(nextText) {
     setFiles((current) => ({ ...current, [path]: nextText }));
     schedule(path, nextText);
@@ -83,21 +79,22 @@ export function SingleEditor({ path, editor }) {
         path={path}
         text={text}
         files={files}
-        drawings={drawings}
+        sprites={sprites}
         onChange={onChange}
         selectedActorIds={selectedActorIds}
         onSelectActorIds={setSelectedActorIds}
         multiSelectMode={multiSelectMode}
         onSetMultiSelectMode={setMultiSelectMode}
-        bare
       />
     );
-  } else if (kind === 'drawing') {
-    body = <DrawingEditor path={path} text={text} onChange={onChange} bare />;
-  } else if (kind === 'text') {
-    body = <CodeEditor path={path} text={formatJson(text)} onChange={onChange} bare />;
+  } else if (kind === 'pxart') {
+    body = <PxArtEditor path={path} text={text} onChange={onChange} />;
   } else {
-    body = <CodeEditor path={path} text={text} onChange={onChange} bare />;
+    // 'code' and 'text' both render raw. Note: do NOT run plain text through
+    // formatJson (JSON.stringify) -- getFileKind only routes non-JSON files
+    // here, so it would quote/escape the contents (a new file.txt would show
+    // and save back as "Hello I'm a file" with literal quotes).
+    body = <CodeEditor path={path} text={text} onChange={onChange} />;
   }
   return (
     <div className={styles.panelBare}>
@@ -106,19 +103,40 @@ export function SingleEditor({ path, editor }) {
   );
 }
 
-// File panel: the shared tree (all dirs + files, no header), bare. Clicking a
-// file asks the shell to open / focus its editor panel.
+// File panel: a read-only file browser (bare, no sidebar/sheet chrome).
+// Clicking a file asks the shell to open / focus its editor panel. File
+// mutation (add / duplicate / rename / delete) is intentionally NOT wired here:
+// under the kit's static-glob content model those edits only persist within a
+// session, so the browser is browse-and-open only until real persistence lands.
 export function FileList({ selectedPath }) {
+  const [files] = useState(initialFiles);
+  const [selected, setSelected] = useState(selectedPath);
+  useEffect(() => {
+    setSelected(selectedPath);
+  }, [selectedPath]);
+
   function open(path) {
+    setSelected(path);
     try {
       window.parent.postMessage({ type: 'castle-open-file', path }, '*');
     } catch {
       /* not embedded */
     }
   }
+  // Safari won't paint this static panel inside its composited dockview iframe
+  // until an invalidation is forced (the rows only appear once devtools opens).
+  // translateZ(0) promotes it to its own compositing layer so Safari paints and
+  // keeps it. The container sits at the iframe's viewport origin and isn't the
+  // scrollport's scrolling box, so it doesn't shift the fixed context menu.
   return (
-    <div style={{ height: '100vh', overflow: 'auto', background: 'var(--castle-sheet-bg, #fff)' }}>
-      <FileTree files={initialFiles} selectedPath={selectedPath} onSelect={open} />
+    <div
+      style={{
+        height: '100vh',
+        overflow: 'auto',
+        background: 'var(--castle-sheet-bg, #0d0d0d)',
+        transform: 'translateZ(0)',
+      }}>
+      <FileBrowser bare files={files} selectedPath={selected} onSelect={open} />
     </div>
   );
 }

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

@@ -0,0 +1,135 @@
+import { HighlightStyle } from '@codemirror/language';
+import { EditorView } from '@codemirror/view';
+import { tags } from '@lezer/highlight';
+
+// Dark theme for the in-kit CodeMirror editor. Surfaces reference the kit's
+// shared `--castle-*` tokens (defined on `.editor-root` in ui.module.css) so
+// the editor stays in sync with the rest of the dark inspector palette. Syntax
+// token colors are literal hex chosen to read well on the #0d0d0d background.
+const selectionBg = 'rgba(230, 230, 230, 0.22)';
+
+export const castleCodeTheme = EditorView.theme(
+  {
+    '&': {
+      height: '100%',
+      fontSize: '9pt',
+      color: 'var(--castle-inspector-text)',
+      backgroundColor: 'var(--castle-inspector-bg)',
+    },
+    '&.cm-editor.cm-focused': {
+      outline: 'none',
+    },
+    '.cm-scroller': {
+      overflow: 'auto',
+      fontFamily: 'Menlo, Monaco, Lucida Console, monospace',
+    },
+    '.cm-content': {
+      minHeight: '100%',
+      caretColor: 'var(--castle-black)',
+      color: 'var(--castle-inspector-text)',
+      paddingBottom: '400px',
+      paddingRight: '80px',
+    },
+    '.cm-cursor, .cm-dropCursor': {
+      borderLeftColor: 'var(--castle-black)',
+    },
+    '&.cm-focused .cm-cursor': {
+      borderLeftColor: 'var(--castle-black)',
+    },
+    '.cm-selectionBackground, .cm-content ::selection': {
+      backgroundColor: selectionBg,
+    },
+    '&.cm-focused .cm-selectionBackground, &.cm-focused .cm-content ::selection': {
+      backgroundColor: selectionBg,
+    },
+    '.cm-gutters': {
+      // Gutters are hidden in this editor; keep them themed in case they are
+      // re-enabled so they don't flash a light surface.
+      display: 'none',
+      backgroundColor: 'var(--castle-inspector-bg)',
+      color: 'var(--castle-inspector-muted)',
+      borderRight: '1px solid var(--castle-inspector-divider)',
+    },
+    '.cm-activeLine': {
+      backgroundColor: 'var(--castle-inspector-input-bg)',
+    },
+    '.cm-activeLineGutter': {
+      color: 'var(--castle-inspector-text)',
+      backgroundColor: 'var(--castle-inspector-input-bg)',
+    },
+    '.cm-foldPlaceholder': {
+      backgroundColor: 'var(--castle-inspector-input-bg)',
+      border: '1px solid var(--castle-inspector-border)',
+      color: 'var(--castle-inspector-muted)',
+    },
+    '.cm-matchingBracket, &.cm-focused .cm-matchingBracket': {
+      backgroundColor: 'rgba(230, 230, 230, 0.18)',
+      outline: '1px solid var(--castle-black)',
+      color: 'inherit',
+    },
+    '.cm-nonmatchingBracket, &.cm-focused .cm-nonmatchingBracket': {
+      backgroundColor: 'rgba(232, 106, 115, 0.35)',
+    },
+    '.cm-searchMatch': {
+      backgroundColor: 'rgba(255, 203, 107, 0.25)',
+      outline: '1px solid rgba(255, 203, 107, 0.5)',
+    },
+    '.cm-searchMatch.cm-searchMatch-selected': {
+      backgroundColor: 'rgba(255, 203, 107, 0.45)',
+    },
+    '.cm-selectionMatch': {
+      backgroundColor: 'rgba(230, 230, 230, 0.14)',
+    },
+    '.cm-panels': {
+      backgroundColor: 'var(--castle-inspector-input-bg)',
+      color: 'var(--castle-inspector-text)',
+    },
+    '.cm-panels.cm-panels-top': {
+      borderBottom: '1px solid var(--castle-inspector-divider)',
+    },
+    '.cm-panels.cm-panels-bottom': {
+      borderTop: '1px solid var(--castle-inspector-divider)',
+    },
+    '.cm-panel.cm-search input, .cm-panel.cm-search button, .cm-panel.cm-search label': {
+      color: 'var(--castle-inspector-text)',
+    },
+    '.cm-panel.cm-search input': {
+      backgroundColor: 'var(--castle-inspector-bg)',
+      border: '1px solid var(--castle-inspector-border)',
+    },
+    '.cm-tooltip': {
+      backgroundColor: 'var(--castle-inspector-input-bg)',
+      border: '1px solid var(--castle-inspector-border)',
+      color: 'var(--castle-inspector-text)',
+    },
+    '.cm-tooltip-autocomplete > ul > li[aria-selected]': {
+      backgroundColor: 'var(--castle-black)',
+      color: 'var(--castle-inspector-text)',
+    },
+  },
+  { dark: true },
+);
+
+export const castleHighlightStyle = HighlightStyle.define([
+  { tag: [tags.keyword, tags.modifier, tags.operatorKeyword], color: '#b3b9d1' },
+  { tag: [tags.controlKeyword, tags.moduleKeyword], color: '#b3b9d1' },
+  { tag: [tags.definitionKeyword, tags.self], color: '#b3b9d1' },
+  { tag: [tags.string, tags.special(tags.string), tags.regexp], color: '#c3e88d' },
+  { tag: tags.escape, color: '#f78c6c' },
+  { tag: [tags.number, tags.integer, tags.float, tags.bool, tags.null], color: '#f78c6c' },
+  { tag: [tags.literal, tags.atom, tags.constant(tags.variableName)], color: '#f78c6c' },
+  { tag: [tags.comment, tags.lineComment, tags.blockComment, tags.docComment], color: '#676e95', fontStyle: 'italic' },
+  { tag: [tags.function(tags.variableName), tags.function(tags.propertyName)], color: '#82aaff' },
+  { tag: tags.definition(tags.variableName), color: '#e6e6e6' },
+  { tag: [tags.variableName, tags.labelName], color: '#e6e6e6' },
+  { tag: tags.propertyName, color: '#b2ccd6' },
+  { tag: [tags.typeName, tags.className, tags.namespace], color: '#ffcb6b' },
+  { tag: [tags.operator, tags.punctuation, tags.bracket, tags.angleBracket, tags.brace, tags.squareBracket], color: '#89ddff' },
+  { tag: [tags.tagName], color: '#f07178' },
+  { tag: [tags.attributeName], color: '#b3b9d1' },
+  { tag: [tags.attributeValue], color: '#c3e88d' },
+  { tag: tags.link, color: '#82aaff', textDecoration: 'underline' },
+  { tag: tags.strong, fontWeight: 'bold' },
+  { tag: tags.emphasis, fontStyle: 'italic' },
+  { tag: tags.invalid, color: '#e86a73' },
+]);

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

@@ -1,10 +1,16 @@
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 const HISTORY_LIMIT = 50;
 // 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: [] });
+  // 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) {
     if (nextText === text) return;
     setHistory((current) => ({
@@ -20,26 +26,24 @@ export function useEditHistory(text, onChange) {
     }));
   }
   function undo() {
-    setHistory((current) => {
-      const previous = current.undo.at(-1);
-      if (!previous) return current;
-      onChange(previous);
-      return {
-        undo: current.undo.slice(0, -1),
-        redo: [text, ...current.redo].slice(0, HISTORY_LIMIT),
-      };
+    const current = historyRef.current;
+    const previous = current.undo.at(-1);
+    if (previous === undefined) return;
+    setHistory({
+      undo: current.undo.slice(0, -1),
+      redo: [text, ...current.redo].slice(0, HISTORY_LIMIT),
     });
+    onChange(previous);
   }
   function redo() {
-    setHistory((current) => {
-      const next = current.redo[0];
-      if (!next) return current;
-      onChange(next);
-      return {
-        undo: [...current.undo, text].slice(-HISTORY_LIMIT),
-        redo: current.redo.slice(1),
-      };
+    const current = historyRef.current;
+    const next = current.redo[0];
+    if (next === undefined) return;
+    setHistory({
+      undo: [...current.undo, text].slice(-HISTORY_LIMIT),
+      redo: current.redo.slice(1),
     });
+    onChange(next);
   }
   return {
     commit,
@@ -50,3 +54,26 @@ export function useEditHistory(text, onChange) {
     recordSnapshot,
   };
 }
+
+export function useUndoRedoShortcuts(history) {
+  const historyRef = useRef(history);
+  historyRef.current = history;
+  useEffect(() => {
+    function onKeyDown(event) {
+      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);
+  }, []);
+}
+
+function isEditableTarget(target) {
+  return (
+    target instanceof Element &&
+    !!target.closest('input, textarea, select, [contenteditable="true"]')
+  );
+}

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

@@ -0,0 +1,23 @@
+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.
+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');
+    },
+  });
+}

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

@@ -0,0 +1,11 @@
+// Map a pointer event over a pixel-art canvas element to integer cell
+// coordinates within a `width x height` raster, or null when the pointer is
+// outside the raster. Used by the PxArt editor, whose artboard stretches a
+// native-resolution canvas to fit via CSS.
+export function eventToCell(event, width, height) {
+  const rect = event.currentTarget.getBoundingClientRect();
+  const x = Math.floor(((event.clientX - rect.left) / rect.width) * width);
+  const y = Math.floor(((event.clientY - rect.top) / rect.height) * height);
+  if (x < 0 || y < 0 || x >= width || y >= height) return null;
+  return { x, y };
+}

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import { EditorHeader, IconButton, styles } from '../engine/ui';
+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);
+  useUndoRedoShortcuts(history);
+  const headerShell = { history };
+  return { history, headerShell };
+}
+
+function PixelEditorTools({ history }) {
+  return (
+    <>
+      <IconButton icon="undo" label="Undo" onClick={history.undo} disabled={!history.canUndo} />
+      <IconButton icon="redo" label="Redo" onClick={history.redo} disabled={!history.canRedo} />
+    </>
+  );
+}
+
+// The full editor header shared by the pixel editors: title/subtitle plus undo/redo.
+export function PixelEditorHeader({ title, subtitle, shell, chrome }) {
+  return (
+    <EditorHeader
+      title={title}
+      subtitle={subtitle}
+      right={<PixelEditorTools history={shell.history} />}
+      onToggleFiles={chrome.onToggleFiles}
+      filesOpen={chrome.filesOpen}
+      headerHost={chrome.headerHost}
+    />
+  );
+}
+
+// The native-resolution canvas inside its artboard frame. `style` sets the fitted
+// display size; `handlers` are the pointer callbacks the editor wires for tools.
+export function PixelArtboard({ canvasRef, style, handlers }) {
+  return (
+    <div className={styles.drawingArtboard}>
+      <canvas
+        ref={canvasRef}
+        className={styles.drawingCanvas}
+        style={style}
+        onPointerDown={handlers.onPointerDown}
+        onPointerMove={handlers.onPointerMove}
+        onPointerUp={handlers.onPointerUp}
+        onPointerCancel={handlers.onPointerCancel}
+        onPointerLeave={handlers.onPointerLeave}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,45 @@
+// Pure pixel-raster geometry for the PxArt tools. These helpers know nothing
+// about pixel storage (flat array vs cell matrix) — they only emit integer
+// coordinates, so the editor can apply its own write.
+
+// Visit the integer offsets covering one brush "dab" of `size`, relative to the
+// dab center. A diameter < 4 paints a solid square; 4+ uses a circular mask so
+// larger brushes round off. `visit(dx, dy)` receives signed offsets.
+export function forEachDab(size, visit) {
+  const diameter = Math.max(1, Math.round(size));
+  const offset = Math.floor(diameter / 2);
+  const useCircle = diameter >= 4;
+  const radius = diameter * 0.5;
+  const radiusSquared = radius * radius;
+  const centerOffset = (diameter - 1) * 0.5;
+  for (let ly = 0; ly < diameter; ly++) {
+    for (let lx = 0; lx < diameter; lx++) {
+      if (useCircle) {
+        const dx = lx - centerOffset;
+        const dy = ly - centerOffset;
+        if (dx * dx + dy * dy > radiusSquared) continue;
+      }
+      visit(lx - offset, ly - offset);
+    }
+  }
+}
+
+// Visit the deduped integer points along the segment from `from` to `to`,
+// supersampled so a fast drag paints a continuous run. `visit(x, y)` receives
+// rounded cell coordinates.
+export function forEachLinePoint(from, to, visit) {
+  const dx = to.x - from.x;
+  const dy = to.y - from.y;
+  const distance = Math.hypot(dx, dy);
+  const steps = Math.max(1, Math.ceil(distance * 2));
+  let lastKey = '';
+  for (let step = 0; step <= steps; step++) {
+    const t = step / steps;
+    const x = Math.round(from.x + dx * t);
+    const y = Math.round(from.y + dy * t);
+    const key = `${x},${y}`;
+    if (key === lastKey) continue;
+    lastKey = key;
+    visit(x, y);
+  }
+}