castle-web-cli 0.4.75 → 0.4.76

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

@@ -1,226 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { onBeforeRestart, writeFile } from 'castle-web-sdk';
-import { flatFileOrder, formatJson, getFileKind, initialFiles } from '../engine/files';
-import { collectAssets } from '../engine/assets';
-import { AppShell, cx, MainEditor, styles, useCompactViewport } from '../engine/ui';
-import { CodeEditor } from './CodeEditor';
-import { PxArtEditor } from './PxArtEditor';
-import { FileBrowser } from './FileBrowser';
-import { SceneEditor } from './SceneEditor';
-// Desktop file-list open/closed state persists across reloads; the bottom
-// sheet (compact) is always session-only.
-const FILES_OPEN_KEY = 'castle-basic2d-files-open';
-const SELECTED_PATH_KEY = 'castle-basic2d-selected-path';
-function readFilesOpen() {
-  try {
-    return localStorage.getItem(FILES_OPEN_KEY) !== '0';
-  } catch {
-    return true;
-  }
-}
-function readSelectedPath() {
-  try {
-    const saved = localStorage.getItem(SELECTED_PATH_KEY);
-    return saved && initialFiles[saved] !== undefined ? saved : 'scenes/main.scene';
-  } catch {
-    return 'scenes/main.scene';
-  }
-}
-export function App() {
-  const [files, setFiles] = useState(initialFiles);
-  const [selectedPath, setSelectedPath] = useState(readSelectedPath);
-  const [filesSheetOpen, setFilesSheetOpen] = useState(false);
-  const [filesOpenDesktop, setFilesOpenDesktop] = useState(readFilesOpen);
-  const [headerHost, setHeaderHost] = useState(null);
-  const isCompact = useCompactViewport();
-  const [selectedActorIds, setSelectedActorIds] = useState([]);
-  const [multiSelectMode, setMultiSelectMode] = useState(false);
-  const saveTimersRef = useRef({});
-  const saveVersionsRef = useRef({});
-  const pendingWritesRef = useRef({});
-  const { sprites } = collectAssets(files);
-  function updateSelectedFile(nextText) {
-    const path = selectedPath;
-    setFiles((current) => ({
-      ...current,
-      [path]: nextText,
-    }));
-    scheduleFileWrite(path, nextText);
-  }
-  function commitFileWrite(path, text, version) {
-    return writeFile(path, text)
-      .then(() => {
-        if (saveVersionsRef.current[path] === version && pendingWritesRef.current[path] === text) {
-          delete pendingWritesRef.current[path];
-        }
-      })
-      .catch((error) => {
-        if (saveVersionsRef.current[path] !== version) return;
-        const message = error instanceof Error ? error.message : String(error);
-        console.error(`Failed to save ${path}: ${message}`);
-      });
-  }
-  function scheduleFileWrite(path, nextText) {
-    const version = (saveVersionsRef.current[path] ?? 0) + 1;
-    saveVersionsRef.current[path] = version;
-    pendingWritesRef.current[path] = nextText;
-    const existingTimer = saveTimersRef.current[path];
-    if (existingTimer) window.clearTimeout(existingTimer);
-    saveTimersRef.current[path] = window.setTimeout(() => {
-      delete saveTimersRef.current[path];
-      void commitFileWrite(path, nextText, version);
-    }, 1500);
-  }
-  // A reload (npm run restart) can land mid-debounce; flush unsaved edits to
-  // disk before the page reloads so in-progress editor work isn't lost.
-  useEffect(() => {
-    return onBeforeRestart(async () => {
-      for (const timer of Object.values(saveTimersRef.current)) window.clearTimeout(timer);
-      saveTimersRef.current = {};
-      const pending = Object.entries(pendingWritesRef.current);
-      await Promise.all(
-        pending.map(([path, text]) =>
-          commitFileWrite(path, text, saveVersionsRef.current[path] ?? 0)
-        )
-      );
-    });
-  }, []);
-  const kind = getFileKind(selectedPath);
-  const text = files[selectedPath] ?? '';
-  // The PxArt pixel editor handles `.pxart` files; pick it by kind and render a
-  // single block.
-  const PixelEditor = kind === 'pxart' ? PxArtEditor : null;
-  // Move selection to `path` and persist it, without the extra resets
-  // selectFile applies. Used by file ops that should keep the same item
-  // selected across a rename or pick a neighbor after a delete.
-  function rememberSelected(path) {
-    setSelectedPath(path);
-    try {
-      localStorage.setItem(SELECTED_PATH_KEY, path);
-    } catch {
-      // Debug convenience only; selecting files still works in-session.
-    }
-  }
-  function selectFile(path) {
-    rememberSelected(path);
-    setFilesSheetOpen(false);
-    setSelectedActorIds([]);
-    setMultiSelectMode(false);
-  }
-  // One toggle, two behaviors: compact opens/closes the file-list bottom
-  // sheet (and deselects, since the sheet covers the canvas); desktop collapses
-  // the 236px file-list column and persists that to localStorage.
-  const onToggleFiles = () => {
-    if (isCompact) {
-      setFilesSheetOpen((previous) => !previous);
-      setSelectedActorIds([]);
-      setMultiSelectMode(false);
-      return;
-    }
-    setFilesOpenDesktop((previous) => {
-      const next = !previous;
-      try {
-        localStorage.setItem(FILES_OPEN_KEY, next ? '1' : '0');
-      } catch {
-        // localStorage may be unavailable; the toggle still works in-session.
-      }
-      return next;
-    });
-  };
-  const filesShown = isCompact ? filesSheetOpen : filesOpenDesktop;
-  // Alt+Up / Alt+Down steps through files in file-browser sidebar order.
-  useEffect(() => {
-    function onKeyDown(event) {
-      if (!event.altKey || event.metaKey || event.ctrlKey) return;
-      if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') return;
-      const active = document.activeElement;
-      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 (
-    <div className={cx(styles.editorRoot, !isCompact && !filesOpenDesktop && styles.filesHidden)}>
-      <div ref={setHeaderHost} className={styles.editorHeaderHost} />
-      <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}
-              sprites={sprites}
-              onChange={updateSelectedFile}
-              onToggleFiles={onToggleFiles}
-              filesOpen={filesShown}
-              headerHost={headerHost}
-              selectedActorIds={selectedActorIds}
-              onSelectActorIds={setSelectedActorIds}
-              multiSelectMode={multiSelectMode}
-              onSetMultiSelectMode={setMultiSelectMode}
-            />
-          ) : null}
-          {PixelEditor ? (
-            <PixelEditor
-              path={selectedPath}
-              text={text}
-              onChange={updateSelectedFile}
-              onToggleFiles={onToggleFiles}
-              filesOpen={filesShown}
-              headerHost={headerHost}
-            />
-          ) : null}
-          {kind === 'code' ? (
-            <CodeEditor
-              path={selectedPath}
-              text={text}
-              onChange={updateSelectedFile}
-              onToggleFiles={onToggleFiles}
-              filesOpen={filesShown}
-              headerHost={headerHost}
-            />
-          ) : null}
-          {kind === 'text' ? (
-            <CodeEditor
-              path={selectedPath}
-              text={formatJson(text)}
-              onChange={updateSelectedFile}
-              onToggleFiles={onToggleFiles}
-              filesOpen={filesShown}
-              headerHost={headerHost}
-            />
-          ) : null}
-        </MainEditor>
-      </AppShell>
-    </div>
-  );
-}

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

@@ -1,79 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import { javascript } from '@codemirror/lang-javascript';
-import { indentUnit, syntaxHighlighting } from '@codemirror/language';
-import { EditorState } from '@codemirror/state';
-import { EditorView } from '@codemirror/view';
-import { basicSetup } from 'codemirror';
-import { basename } from '../engine/files';
-import { EditorBody, EditorHeader, styles } from '../engine/ui';
-import { castleCodeTheme, castleHighlightStyle } from './codeTheme';
-export function CodeEditor({ path, text, onChange, onToggleFiles, filesOpen, headerHost }) {
-  const editorRef = useRef(null);
-  const viewRef = useRef(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}
-        headerHost={headerHost}
-      />
-      <EditorBody>
-        <div className={styles.codeEditor}>
-          <div ref={editorRef} className={styles.codeMirrorHost} />
-        </div>
-      </EditorBody>
-    </>
-  );
-}

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

@@ -1,349 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { basename } from '../engine/files';
-import { ContextMenu, cx, Icon, SheetGrabHandle, styles, useMobileSheet } from '../engine/ui';
-// The file tree plus its right-click menus and inline rename. By default it
-// renders inside an `aside` with mobile-sheet chrome (the combined editor's
-// sidebar). Pass `bare` to drop that chrome and render just the tree + menus so
-// it can be mounted on its own in the dockview "Files" panel.
-//
-// The file-op props (onAddFile / onDuplicate / onRename / onDelete) are
-// OPTIONAL. When none are provided the browser is read-only: no context menus,
-// no inline rename, no add affordances -- just a browsable, clickable tree.
-export function FileBrowser({
-  files,
-  selectedPath,
-  onSelect,
-  onAddFile,
-  onDuplicate,
-  onRename,
-  onDelete,
-  sheetOpen = false,
-  onSheetOpenChange,
-  bare = false,
-}) {
-  const canMutate = Boolean(onAddFile || onDuplicate || onRename || onDelete);
-  const tree = buildFileTree(Object.keys(files));
-  const [expanded, setExpanded] = useState(() => new Set(collectDirectoryPaths(tree)));
-  // `menu` is { x, y, node } for a row menu, or { x, y, node: null } for the
-  // panel-background menu. `renaming` holds the path whose row is in edit mode.
-  const [menu, setMenu] = useState(null);
-  const [renaming, setRenaming] = useState(null);
-  const sheet = useMobileSheet({
-    snap: sheetOpen ? 'high' : 'hidden',
-    baseClassName: styles.fileBrowser,
-    onTransition: (direction) => {
-      if (direction !== 'up') onSheetOpenChange?.(false);
-    },
-  });
-  function toggle(path) {
-    setExpanded((current) => {
-      const next = new Set(current);
-      if (next.has(path)) next.delete(path);
-      else next.add(path);
-      return next;
-    });
-  }
-  function expandDir(path) {
-    if (!path) return;
-    setExpanded((current) => new Set(current).add(path));
-  }
-  function openMenu(event, node) {
-    if (!canMutate) return;
-    event.preventDefault();
-    event.stopPropagation();
-    setMenu({ x: event.clientX, y: event.clientY, node });
-  }
-  function handleAddFile(dirPath) {
-    onAddFile?.(dirPath);
-    expandDir(dirPath);
-  }
-  function handleDuplicate(node) {
-    const newPath = onDuplicate?.(node);
-    if (node.type === 'directory' && newPath) expandDir(newPath);
-  }
-  function submitRename(node, rawName) {
-    setRenaming(null);
-    const newName = rawName.trim();
-    if (!newName || newName === node.name) return;
-    const newPath = onRename?.(node, newName);
-    if (node.type === 'directory' && newPath && newPath !== node.path) {
-      setExpanded((current) => repathExpanded(current, node.path, newPath));
-    }
-  }
-  function menuItems(node) {
-    const fileOnly = [
-      { key: 'duplicate', label: 'Duplicate', onClick: () => handleDuplicate(node) },
-      { key: 'rename', label: 'Rename', onClick: () => setRenaming(node.path) },
-      { key: 'delete', label: 'Delete', onClick: () => onDelete?.(node) },
-    ];
-    if (!node) return [{ key: 'add', label: 'Add file', onClick: () => handleAddFile('') }];
-    if (node.type === 'directory') {
-      return [
-        { key: 'add', label: 'Add file', onClick: () => handleAddFile(node.path) },
-        ...fileOnly,
-      ];
-    }
-    return fileOnly;
-  }
-  const treeNodes = (
-    <div className={styles.fileTree}>
-      {tree.children.map((node) => (
-        <FileNode
-          key={node.path}
-          node={node}
-          depth={0}
-          expanded={expanded}
-          selectedPath={selectedPath}
-          renaming={renaming}
-          onSelect={onSelect}
-          onToggle={toggle}
-          onContextMenu={openMenu}
-          onRenameSubmit={submitRename}
-          onRenameCancel={() => setRenaming(null)}
-        />
-      ))}
-    </div>
-  );
-  const menuEl = menu ? (
-    <ContextMenu x={menu.x} y={menu.y} items={menuItems(menu.node)} onClose={() => setMenu(null)} />
-  ) : null;
-  // Panel mount: no sheet/grab-handle chrome, just a full-height tree whose
-  // empty area below the rows opens the blank-area ("Add file") menu.
-  if (bare) {
-    return (
-      <div className={styles.fileBrowserBare} onContextMenu={(event) => openMenu(event, null)}>
-        {treeNodes}
-        {menuEl}
-      </div>
-    );
-  }
-  return (
-    <aside {...sheet.rootProps} onContextMenu={(event) => openMenu(event, null)}>
-      <div {...sheet.grabProps}>
-        <SheetGrabHandle label="Files" hint={basename(selectedPath)} />
-      </div>
-      {treeNodes}
-      {menuEl}
-    </aside>
-  );
-}
-function FileNode({
-  node,
-  depth,
-  expanded,
-  selectedPath,
-  renaming,
-  onSelect,
-  onToggle,
-  onContextMenu,
-  onRenameSubmit,
-  onRenameCancel,
-}) {
-  const depthStyle = { '--file-depth': depth };
-  const isRenaming = renaming === node.path;
-  if (node.type === 'directory') {
-    const isExpanded = expanded.has(node.path);
-    const label = isRenaming ? (
-      <span className={styles.fileLabel}>
-        <span className={cx(styles.fileIcon, styles.fileDisclosure)}>
-          <Icon name={isExpanded ? 'chevron-down' : 'chevron-right'} />
-        </span>
-        <RenameInput
-          initialName={node.name}
-          onSubmit={(value) => onRenameSubmit(node, value)}
-          onCancel={onRenameCancel}
-        />
-      </span>
-    ) : (
-      <span className={styles.fileLabel}>
-        <span className={cx(styles.fileIcon, styles.fileDisclosure)}>
-          <Icon name={isExpanded ? 'chevron-down' : 'chevron-right'} />
-        </span>
-        <span>{node.name}</span>
-      </span>
-    );
-    return (
-      <div className={styles.fileBranch}>
-        {isRenaming ? (
-          <div className={styles.fileDirRow} style={depthStyle}>
-            {label}
-          </div>
-        ) : (
-          <button
-            className={styles.fileDirRow}
-            style={depthStyle}
-            onClick={() => onToggle(node.path)}
-            onContextMenu={(event) => onContextMenu(event, node)}>
-            {label}
-          </button>
-        )}
-        {isExpanded ? (
-          <div>
-            {node.children.map((child) => (
-              <FileNode
-                key={child.path}
-                node={child}
-                depth={depth + 1}
-                expanded={expanded}
-                selectedPath={selectedPath}
-                renaming={renaming}
-                onSelect={onSelect}
-                onToggle={onToggle}
-                onContextMenu={onContextMenu}
-                onRenameSubmit={onRenameSubmit}
-                onRenameCancel={onRenameCancel}
-              />
-            ))}
-          </div>
-        ) : null}
-      </div>
-    );
-  }
-  if (isRenaming) {
-    return (
-      <div className={styles.fileRow} style={depthStyle}>
-        <span className={styles.fileLabel}>
-          <span className={styles.fileIcon}>
-            <Icon name={fileIconName(node.path)} />
-          </span>
-          <RenameInput
-            initialName={basename(node.path)}
-            onSubmit={(value) => onRenameSubmit(node, value)}
-            onCancel={onRenameCancel}
-          />
-        </span>
-      </div>
-    );
-  }
-  return (
-    <button
-      className={cx(styles.fileRow, selectedPath === node.path && styles.fileRowSelected)}
-      style={depthStyle}
-      onClick={() => onSelect(node.path)}
-      onContextMenu={(event) => onContextMenu(event, node)}>
-      <span className={styles.fileLabel}>
-        <span className={styles.fileIcon}>
-          <Icon name={fileIconName(node.path)} />
-        </span>
-        <span>{basename(node.path)}</span>
-      </span>
-    </button>
-  );
-}
-// Inline rename field: focuses + selects on mount, commits on Enter or blur,
-// abandons on Escape. A done-guard keeps the blur that follows an
-// Enter/Escape from firing a second submit/cancel.
-function RenameInput({ initialName, onSubmit, onCancel }) {
-  const [value, setValue] = useState(initialName);
-  const inputRef = useRef(null);
-  const doneRef = useRef(false);
-  useEffect(() => {
-    const el = inputRef.current;
-    if (!el) return;
-    el.focus();
-    el.select();
-  }, []);
-  function commit() {
-    if (doneRef.current) return;
-    doneRef.current = true;
-    onSubmit(value);
-  }
-  function abandon() {
-    if (doneRef.current) return;
-    doneRef.current = true;
-    onCancel();
-  }
-  return (
-    <input
-      ref={inputRef}
-      className={styles.fileRenameInput}
-      value={value}
-      onClick={(event) => event.stopPropagation()}
-      onChange={(event) => setValue(event.target.value)}
-      onBlur={commit}
-      onKeyDown={(event) => {
-        if (event.key === 'Enter') {
-          event.preventDefault();
-          commit();
-        } else if (event.key === 'Escape') {
-          event.preventDefault();
-          abandon();
-        }
-      }}
-    />
-  );
-}
-// Re-path a set of expanded directory paths after a folder rename so the
-// renamed folder (and any expanded descendants) stay open in place.
-function repathExpanded(set, oldDir, newDir) {
-  const next = new Set();
-  for (const path of set) {
-    if (path === oldDir) next.add(newDir);
-    else if (path.startsWith(`${oldDir}/`)) next.add(`${newDir}${path.slice(oldDir.length)}`);
-    else next.add(path);
-  }
-  return next;
-}
-// Per-file-type icon, keyed by extension. Sprites (.pxart) -> layer-group,
-// scenes -> globe, behaviors (.jsx) -> code, anything else -> a generic file
-// icon.
-function fileIconName(path) {
-  if (path.endsWith('.pxart')) return 'layer-group';
-  if (path.endsWith('.scene')) return 'globe';
-  if (path.endsWith('.jsx')) return 'code';
-  return 'file';
-}
-function buildFileTree(paths) {
-  const root = {
-    type: 'directory',
-    name: '',
-    path: '',
-    children: [],
-    childMap: new Map(),
-  };
-  for (const path of paths) {
-    const parts = path.split('/');
-    let parent = root;
-    for (let index = 0; index < parts.length; index++) {
-      const name = parts[index];
-      const nodePath = parts.slice(0, index + 1).join('/');
-      const isFile = index === parts.length - 1;
-      if (!parent.childMap?.has(name)) {
-        const node = isFile
-          ? { type: 'file', name, path: nodePath }
-          : { type: 'directory', name, path: nodePath, children: [], childMap: new Map() };
-        parent.childMap?.set(name, node);
-        parent.children.push(node);
-      }
-      const child = parent.childMap?.get(name);
-      if (!child || child.type !== 'directory') break;
-      parent = child;
-    }
-  }
-  pruneChildMaps(root);
-  sortRootChildren(root);
-  return root;
-}
-function pruneChildMaps(node) {
-  if (node.type !== 'directory') return;
-  for (const child of node.children) pruneChildMaps(child);
-  delete node.childMap;
-}
-// Top-level folders list in a fixed order: drawings, then scenes, then
-// behaviors, then anything else alphabetically.
-function sortRootChildren(root) {
-  const rank = (name) => {
-    if (name === 'drawings') return 0;
-    if (name === 'scenes') return 1;
-    if (name === 'behaviors') return 2;
-    return 3;
-  };
-  root.children.sort((a, b) => rank(a.name) - rank(b.name) || a.name.localeCompare(b.name));
-}
-function collectDirectoryPaths(node) {
-  if (node.type !== 'directory') return [];
-  return [
-    ...(node.path ? [node.path] : []),
-    ...node.children.flatMap((child) => collectDirectoryPaths(child)),
-  ];
-}