castle-web-cli 0.4.3 → 0.4.5

package/kits/rpg-2d/editors/App.tsx

@@ -1,163 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { writeFile } from 'castle-web-sdk';
-import {
-  flatFileOrder,
-  formatJson,
-  getFileKind,
-  initialFiles,
-  normalizeDrawing,
-  parseJsonFile,
-} from '../engine/files';
-import type { DrawingData, FileMap } from '../engine/files';
-import { AppShell, cx, MainEditor, styles } from '../engine/ui';
-import { CodeEditor } from './CodeEditor';
-import { DrawingEditor } from './DrawingEditor';
-import { FileBrowser } from './FileBrowser';
-import { SceneEditor } from './SceneEditor';
-
-export function App() {
-  const [files, setFiles] = useState<FileMap>(initialFiles);
-  const [selectedPath, setSelectedPath] = useState('scenes/main.scene');
-  const [filesSheetOpen, setFilesSheetOpen] = useState(false);
-  const [selectedActorIds, setSelectedActorIds] = useState<string[]>([]);
-  const [multiSelectMode, setMultiSelectMode] = useState(false);
-  const saveTimersRef = useRef<Record<string, number>>({});
-  const saveVersionsRef = useRef<Record<string, number>>({});
-
-  const drawings: Record<string, DrawingData> = {};
-  for (const [path, text] of Object.entries(files)) {
-    if (!path.endsWith('.drawing')) continue;
-    const parsed = parseJsonFile<unknown>(path, text);
-    if (parsed.value) drawings[path] = normalizeDrawing(parsed.value);
-  }
-
-  function updateSelectedFile(nextText: string): void {
-    const path = selectedPath;
-    setFiles((current) => ({
-      ...current,
-      [path]: nextText,
-    }));
-    scheduleFileWrite(path, nextText);
-  }
-
-  function scheduleFileWrite(path: string, nextText: string): void {
-    const version = (saveVersionsRef.current[path] ?? 0) + 1;
-    saveVersionsRef.current[path] = version;
-    const existingTimer = saveTimersRef.current[path];
-    if (existingTimer) window.clearTimeout(existingTimer);
-    saveTimersRef.current[path] = window.setTimeout(() => {
-      delete saveTimersRef.current[path];
-      writeFile(path, nextText).catch((error: unknown) => {
-        if (saveVersionsRef.current[path] !== version) return;
-        const message = error instanceof Error ? error.message : String(error);
-        console.error(`Failed to save ${path}: ${message}`);
-      });
-    }, 1500);
-  }
-
-  const kind = getFileKind(selectedPath);
-  const text = files[selectedPath] ?? '';
-
-  function selectFile(path: string): void {
-    setSelectedPath(path);
-    setFilesSheetOpen(false);
-    setSelectedActorIds([]);
-    setMultiSelectMode(false);
-  }
-
-  const onToggleFiles = (): void => {
-    setFilesSheetOpen((previous) => !previous);
-    setSelectedActorIds([]);
-    setMultiSelectMode(false);
-  };
-
-  // Alt+Up / Alt+Down steps through files in file-browser sidebar order.
-  useEffect(() => {
-    function onKeyDown(event: KeyboardEvent): void {
-      if (!event.altKey || event.metaKey || event.ctrlKey) return;
-      if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') return;
-      const active = document.activeElement as HTMLElement | null;
-      if (
-        active &&
-        (active.tagName === 'INPUT' ||
-          active.tagName === 'TEXTAREA' ||
-          active.tagName === 'SELECT' ||
-          active.isContentEditable ||
-          active.closest('.cm-editor'))
-      ) {
-        return;
-      }
-      const order = flatFileOrder(Object.keys(files));
-      const index = order.indexOf(selectedPath);
-      if (index === -1) return;
-      const nextIndex = event.key === 'ArrowUp' ? index - 1 : index + 1;
-      if (nextIndex < 0 || nextIndex >= order.length) return;
-      event.preventDefault();
-      selectFile(order[nextIndex]);
-    }
-    window.addEventListener('keydown', onKeyDown);
-    return () => window.removeEventListener('keydown', onKeyDown);
-  }, [files, selectedPath]);
-
-  return (
-    <AppShell>
-      <FileBrowser
-        files={files}
-        selectedPath={selectedPath}
-        onSelect={selectFile}
-        sheetOpen={filesSheetOpen}
-        onSheetOpenChange={setFilesSheetOpen}
-      />
-      {filesSheetOpen ? (
-        <div
-          className={cx(styles.sheetBackdrop, styles.mobileOnly)}
-          onClick={() => setFilesSheetOpen(false)}
-        />
-      ) : null}
-      <MainEditor>
-        {kind === 'scene' ? (
-          <SceneEditor
-            path={selectedPath}
-            text={text}
-            files={files}
-            drawings={drawings}
-            onChange={updateSelectedFile}
-            onToggleFiles={onToggleFiles}
-            filesOpen={filesSheetOpen}
-            selectedActorIds={selectedActorIds}
-            onSelectActorIds={setSelectedActorIds}
-            multiSelectMode={multiSelectMode}
-            onSetMultiSelectMode={setMultiSelectMode}
-          />
-        ) : null}
-        {kind === 'drawing' ? (
-          <DrawingEditor
-            path={selectedPath}
-            text={text}
-            onChange={updateSelectedFile}
-            onToggleFiles={onToggleFiles}
-            filesOpen={filesSheetOpen}
-          />
-        ) : null}
-        {kind === 'code' ? (
-          <CodeEditor
-            path={selectedPath}
-            text={text}
-            onChange={updateSelectedFile}
-            onToggleFiles={onToggleFiles}
-            filesOpen={filesSheetOpen}
-          />
-        ) : null}
-        {kind === 'text' ? (
-          <CodeEditor
-            path={selectedPath}
-            text={formatJson(text)}
-            onChange={updateSelectedFile}
-            onToggleFiles={onToggleFiles}
-            filesOpen={filesSheetOpen}
-          />
-        ) : null}
-      </MainEditor>
-    </AppShell>
-  );
-}

package/kits/rpg-2d/editors/CodeEditor.tsx

@@ -1,120 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import { javascript } from '@codemirror/lang-javascript';
-import { HighlightStyle, indentUnit, syntaxHighlighting } from '@codemirror/language';
-import { EditorState } from '@codemirror/state';
-import { EditorView } from '@codemirror/view';
-import { tags } from '@lezer/highlight';
-import { basicSetup } from 'codemirror';
-import { basename } from '../engine/files';
-import { EditorBody, EditorHeader, styles } from '../engine/ui';
-import type { FileEditorProps } from './editorProps';
-
-const castleHighlightStyle = HighlightStyle.define([
-  { tag: tags.strong, color: '#285CC4' },
-  { tag: tags.namespace, color: '#BB7547' },
-  { tag: tags.keyword, color: '#BC4A9B' },
-  { tag: [tags.literal, tags.inserted], color: '#5DAF8D' },
-  { tag: [tags.string, tags.deleted], color: '#E86A73' },
-  { tag: tags.comment, color: '#8B93AF', fontStyle: 'italic' },
-]);
-
-const castleCodeTheme = EditorView.theme({
-  '&': {
-    height: '100%',
-    fontSize: '9pt',
-    backgroundColor: '#fff',
-  },
-  '&.cm-editor.cm-focused': {
-    outline: 'none',
-  },
-  '.cm-scroller': {
-    overflow: 'auto',
-    fontFamily: 'Menlo, Monaco, Lucida Console, monospace',
-  },
-  '.cm-content': {
-    minHeight: '100%',
-    color: '#322b28',
-    paddingBottom: '400px',
-    paddingRight: '80px',
-  },
-  '.cm-gutters': {
-    display: 'none',
-  },
-  '.cm-activeLine': {
-    backgroundColor: '#eeeeeea0',
-  },
-  '.cm-activeLineGutter': {
-    color: '#000',
-    backgroundColor: '#ddd',
-  },
-});
-
-export function CodeEditor({ path, text, onChange, onToggleFiles, filesOpen }: FileEditorProps) {
-  const editorRef = useRef<HTMLDivElement | null>(null);
-  const viewRef = useRef<EditorView | null>(null);
-  const onChangeRef = useRef(onChange);
-  const initialTextRef = useRef(text);
-  const applyingExternalTextRef = useRef(false);
-
-  useEffect(() => {
-    onChangeRef.current = onChange;
-  }, [onChange]);
-
-  // The editor is created once per `path`; the initial doc comes from a ref
-  // so `text` is not a dep of this effect (subsequent `text` updates flow
-  // through the second effect below). On `path` change we read whatever the
-  // latest `text` is at the moment of mount.
-  initialTextRef.current = text;
-  useEffect(() => {
-    if (!editorRef.current) return undefined;
-    const view = new EditorView({
-      parent: editorRef.current,
-      state: EditorState.create({
-        doc: initialTextRef.current,
-        extensions: [
-          basicSetup,
-          javascript({ jsx: true, typescript: true }),
-          indentUnit.of('  '),
-          castleCodeTheme,
-          syntaxHighlighting(castleHighlightStyle),
-          EditorView.updateListener.of((update) => {
-            if (!update.docChanged || applyingExternalTextRef.current) return;
-            onChangeRef.current(update.state.doc.toString());
-          }),
-        ],
-      }),
-    });
-    viewRef.current = view;
-    return () => {
-      view.destroy();
-      viewRef.current = null;
-    };
-  }, [path]);
-
-  useEffect(() => {
-    const view = viewRef.current;
-    if (!view) return;
-    const currentText = view.state.doc.toString();
-    if (currentText === text) return;
-    applyingExternalTextRef.current = true;
-    view.dispatch({
-      changes: {
-        from: 0,
-        to: currentText.length,
-        insert: text,
-      },
-    });
-    applyingExternalTextRef.current = false;
-  }, [text]);
-
-  return (
-    <>
-      <EditorHeader title={basename(path)} onToggleFiles={onToggleFiles} filesOpen={filesOpen} />
-      <EditorBody>
-        <div className={styles.codeEditor}>
-          <div ref={editorRef} className={styles.codeMirrorHost} />
-        </div>
-      </EditorBody>
-    </>
-  );
-}

package/kits/rpg-2d/editors/DrawingEditor.tsx

@@ -1,278 +0,0 @@
-import type { CSSProperties, PointerEvent } from 'react';
-import React, { useEffect, useRef, useState } from 'react';
-import { basename, formatJson, normalizeDrawing, parseJsonFile } from '../engine/files';
-import type { DrawingData } from '../engine/files';
-
-// The editor treats layer 0, frame 0 as the editable surface -- multi-layer +
-// multi-frame authoring is a future feature. Helpers below shim between that
-// flat-pixel mental model and the layered DrawingData on disk.
-function getEditPixels(drawing: DrawingData): string[] {
-  return drawing.layers[0]?.frames[0] ?? [];
-}
-function withEditPixels(drawing: DrawingData, pixels: string[]): DrawingData {
-  const layers = drawing.layers.map((layer, layerIndex) =>
-    layerIndex === 0
-      ? { ...layer, frames: layer.frames.map((frame, frameIndex) => (frameIndex === 0 ? pixels : frame)) }
-      : layer
-  );
-  return { ...drawing, layers };
-}
-import {
-  cx,
-  EditorBody,
-  EditorHeader,
-  IconButton,
-  NumberField,
-  Panel,
-  SheetGrabHandle,
-  styles,
-  theme,
-  useMobileSheet,
-} from '../engine/ui';
-import type { SheetSnap } from '../engine/ui';
-import type { FileEditorProps } from './editorProps';
-import { useEditHistory } from './editorHistory';
-
-const palette = [
-  '#00000000',
-  '#000000FF',
-  '#050505FF',
-  '#111111FF',
-  '#242234FF',
-  '#444444FF',
-  '#777777FF',
-  '#ffffffFF',
-  '#e3e6ffFF',
-  '#8db7ffFF',
-  '#ff5d5dFF',
-  '#ffe17aFF',
-];
-
-interface StrokeState {
-  active: boolean;
-  recorded: boolean;
-}
-
-export function DrawingEditor({ path, text, onChange, onToggleFiles, filesOpen }: FileEditorProps) {
-  const canvasRef = useRef<HTMLCanvasElement | null>(null);
-  const strokeRef = useRef<StrokeState>({ active: false, recorded: false });
-  const [color, setColor] = useState('#ffffffFF');
-  const [inspectorOpen, setInspectorOpen] = useState(true);
-  const history = useEditHistory(text, onChange);
-  const inspectorSheet = useInspectorSheet(inspectorOpen);
-  const parsed = parseJsonFile<unknown>(path, text);
-  const drawing: DrawingData | null = parsed.value ? normalizeDrawing(parsed.value) : null;
-  const error = parsed.error;
-  const isWide = drawing ? drawing.width >= drawing.height : true;
-
-  useEffect(() => {
-    if (!drawing || !canvasRef.current) return;
-    const canvas = canvasRef.current;
-    const ctx = canvas.getContext('2d');
-    if (!ctx) return;
-    canvas.width = drawing.width;
-    canvas.height = drawing.height;
-    ctx.clearRect(0, 0, drawing.width, drawing.height);
-    const editPixels = getEditPixels(drawing);
-    for (let y = 0; y < drawing.height; y++) {
-      for (let x = 0; x < drawing.width; x++) {
-        const pixel = editPixels[y * drawing.width + x];
-        if (!pixel || pixel.endsWith('00')) continue;
-        ctx.fillStyle = pixel;
-        ctx.fillRect(x, y, 1, 1);
-      }
-    }
-  }, [drawing, text]);
-
-  function commitDrawing(nextDrawing: DrawingData): void {
-    history.commit(formatJson(nextDrawing));
-  }
-
-  function resizeDrawing(nextWidth: number, nextHeight: number): void {
-    if (!drawing) return;
-    const width = clampInteger(nextWidth, 1, 128);
-    const height = clampInteger(nextHeight, 1, 128);
-    if (width === drawing.width && height === drawing.height) return;
-    const oldPixels = getEditPixels(drawing);
-    const pixels = Array<string>(width * height).fill('#00000000');
-    const copiedWidth = Math.min(width, drawing.width);
-    const copiedHeight = Math.min(height, drawing.height);
-    for (let y = 0; y < copiedHeight; y++) {
-      for (let x = 0; x < copiedWidth; x++) {
-        pixels[y * width + x] = oldPixels[y * drawing.width + x] ?? '#00000000';
-      }
-    }
-    commitDrawing(withEditPixels({ ...drawing, width, height }, pixels));
-  }
-
-  function paintAt(event: PointerEvent<HTMLCanvasElement>): void {
-    if (!drawing) return;
-    const rect = event.currentTarget.getBoundingClientRect();
-    const x = Math.floor(((event.clientX - rect.left) / rect.width) * drawing.width);
-    const y = Math.floor(((event.clientY - rect.top) / rect.height) * drawing.height);
-    if (x < 0 || y < 0 || x >= drawing.width || y >= drawing.height) return;
-    const editPixels = getEditPixels(drawing);
-    if (editPixels[y * drawing.width + x] === color) return;
-    const nextPixels = editPixels.slice();
-    nextPixels[y * drawing.width + x] = color;
-    const next = withEditPixels(drawing, nextPixels);
-    // Record one undo snapshot per pointer stroke (not per painted pixel).
-    if (!strokeRef.current.recorded) {
-      history.recordSnapshot();
-      strokeRef.current.recorded = true;
-    }
-    onChange(formatJson(next));
-  }
-
-  function startPaint(event: PointerEvent<HTMLCanvasElement>): void {
-    strokeRef.current = { active: true, recorded: false };
-    event.currentTarget.setPointerCapture(event.pointerId);
-    paintAt(event);
-  }
-
-  function finishPaint(): void {
-    strokeRef.current = { active: false, recorded: false };
-  }
-
-  const canvasStyle: CSSProperties | undefined = drawing
-    ? {
-        width: isWide ? 'min(70vh, 520px)' : 'auto',
-        height: isWide ? 'auto' : 'min(70vh, 520px)',
-      }
-    : undefined;
-
-  const sharedActionButtons = (
-    <>
-      <IconButton icon="undo" label="Undo" onClick={history.undo} disabled={!history.canUndo} />
-      <IconButton icon="redo" label="Redo" onClick={history.redo} disabled={!history.canRedo} />
-    </>
-  );
-
-  return (
-    <>
-      <EditorHeader
-        title={basename(path)}
-        subtitle={drawing ? `${drawing.width} x ${drawing.height} pixels` : error}
-        right={
-          <span className={styles.mobileOnly}>
-            {sharedActionButtons}
-            <IconButton
-              icon="palette"
-              label="Tools"
-              active={inspectorOpen}
-              onClick={() => setInspectorOpen((previous) => !previous)}
-            />
-          </span>
-        }
-        onToggleFiles={onToggleFiles}
-        filesOpen={filesOpen}
-      />
-      <EditorBody>
-        <div className={styles.drawingEditor}>
-          <div className={styles.drawingTools}>{sharedActionButtons}</div>
-          <div className={styles.drawingCanvasWrap}>
-            <canvas
-              ref={canvasRef}
-              className={styles.drawingCanvas}
-              style={canvasStyle}
-              onPointerDown={startPaint}
-              onPointerMove={(event) => {
-                if (strokeRef.current.active && event.buttons === 1) paintAt(event);
-              }}
-              onPointerUp={finishPaint}
-              onPointerCancel={finishPaint}
-            />
-          </div>
-          <DrawingInspector
-            sheet={inspectorSheet}
-            drawing={drawing}
-            color={color}
-            onSelectColor={setColor}
-            onResize={resizeDrawing}
-          />
-        </div>
-      </EditorBody>
-    </>
-  );
-}
-
-function useInspectorSheet(inspectorOpen: boolean): ReturnType<typeof useMobileSheet> {
-  const [snap, setSnap] = useState<'high' | 'low'>('high');
-  useEffect(() => {
-    if (inspectorOpen) setSnap('high');
-  }, [inspectorOpen]);
-  const effectiveSnap: SheetSnap = 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');
-    },
-  });
-}
-
-function DrawingInspector({
-  sheet,
-  drawing,
-  color,
-  onSelectColor,
-  onResize,
-}: {
-  sheet: ReturnType<typeof useMobileSheet>;
-  drawing: DrawingData | null;
-  color: string;
-  onSelectColor: (color: string) => void;
-  onResize: (width: number, height: number) => void;
-}) {
-  return (
-    <aside {...sheet.rootProps} className={cx(sheet.rootProps.className, styles.inspectorAuto)}>
-      <div {...sheet.grabProps}>
-        <SheetGrabHandle
-          label="Inspector"
-          hint={drawing ? `${drawing.width}x${drawing.height} · color` : 'drawing tools'}
-        />
-      </div>
-      <div className={cx(styles.sheetBody, styles.inspectorBody)}>
-        <Panel title="Size">
-          <NumberField
-            label="Width"
-            value={drawing?.width ?? 1}
-            min={1}
-            max={128}
-            onChange={(width) => onResize(width, drawing?.height ?? 1)}
-          />
-          <NumberField
-            label="Height"
-            value={drawing?.height ?? 1}
-            min={1}
-            max={128}
-            onChange={(height) => onResize(drawing?.width ?? 1, height)}
-          />
-        </Panel>
-        <Panel title="Palette">
-          <div className={styles.palette}>
-            {palette.map((swatch) => (
-              <button
-                key={swatch}
-                className={cx(styles.swatch, color === swatch && styles.swatchSelected)}
-                title={swatch}
-                style={{
-                  background: swatch.endsWith('00') ? theme.transparentChecker : swatch,
-                }}
-                onClick={() => onSelectColor(swatch)}
-              />
-            ))}
-          </div>
-        </Panel>
-      </div>
-    </aside>
-  );
-}
-
-function clampInteger(value: number, min: number, max: number): number {
-  if (!Number.isFinite(value)) return min;
-  return Math.max(min, Math.min(max, Math.round(value)));
-}