castle-web-cli 0.4.72 → 0.4.74

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

@@ -1,52 +1,13 @@
 import React, { useEffect, useRef } from 'react';
 import { javascript } from '@codemirror/lang-javascript';
-import { HighlightStyle, indentUnit, syntaxHighlighting } from '@codemirror/language';
+import { 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';
-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({
-  '&': {
-    width: '100%',
-    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: '16px',
-  },
-  '.cm-gutters': {
-    display: 'none',
-  },
-  '.cm-activeLine': {
-    backgroundColor: '#eeeeeea0',
-  },
-  '.cm-activeLineGutter': {
-    color: '#000',
-    backgroundColor: '#ddd',
-  },
-});
-export function CodeEditor({ path, text, onChange, onToggleFiles, filesOpen, bare = false }) {
+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);
@@ -102,9 +63,12 @@ export function CodeEditor({ path, text, onChange, onToggleFiles, filesOpen, bar
   }, [text]);
   return (
     <>
-      {bare ? null : (
-        <EditorHeader title={basename(path)} onToggleFiles={onToggleFiles} filesOpen={filesOpen} />
-      )}
+      <EditorHeader
+        title={basename(path)}
+        onToggleFiles={onToggleFiles}
+        filesOpen={filesOpen}
+        headerHost={headerHost}
+      />
       <EditorBody>
         <div className={styles.codeEditor}>
           <div ref={editorRef} className={styles.codeMirrorHost} />

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

@@ -1,11 +1,40 @@
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { basename } from '../engine/files';
-import { cx, Icon, SheetGrabHandle, styles, useMobileSheet } from '../engine/ui';
-// Just the file tree (no aside / mobile-sheet / header chrome) so it can be
-// reused bare in the shell's file panel. All directories expanded by default.
-export function FileTree({ files, selectedPath, onSelect }) {
+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);
@@ -14,7 +43,49 @@ export function FileTree({ files, selectedPath, onSelect }) {
       return next;
     });
   }
-  return (
+  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
@@ -23,56 +94,89 @@ export function FileTree({ files, selectedPath, onSelect }) {
           depth={0}
           expanded={expanded}
           selectedPath={selectedPath}
+          renaming={renaming}
           onSelect={onSelect}
           onToggle={toggle}
+          onContextMenu={openMenu}
+          onRenameSubmit={submitRename}
+          onRenameCancel={() => setRenaming(null)}
         />
       ))}
     </div>
   );
-}
-export function FileBrowser({
-  files,
-  selectedPath,
-  onSelect,
-  sheetOpen = false,
-  onSheetOpenChange,
-}) {
-  const sheet = useMobileSheet({
-    snap: sheetOpen ? 'high' : 'hidden',
-    baseClassName: styles.fileBrowser,
-    onTransition: (direction) => {
-      if (direction !== 'up') onSheetOpenChange?.(false);
-    },
-  });
+  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}>
+    <aside {...sheet.rootProps} onContextMenu={(event) => openMenu(event, null)}>
       <div {...sheet.grabProps}>
         <SheetGrabHandle label="Files" hint={basename(selectedPath)} />
       </div>
-      <div className={styles.fileBrowserHeader}>
-        <div>
-          <div className={styles.fileBrowserTitle}>Deck Files</div>
-        </div>
-      </div>
-      <FileTree files={files} selectedPath={selectedPath} onSelect={onSelect} />
+      {treeNodes}
+      {menuEl}
     </aside>
   );
 }
-function FileNode({ node, depth, expanded, selectedPath, onSelect, onToggle }) {
+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}>
-        <button
-          className={styles.fileDirRow}
-          style={depthStyle}
-          onClick={() => onToggle(node.path)}>
-          <span className={styles.fileDisclosure}>
-            <Icon name={isExpanded ? 'chevron-down' : 'chevron-right'} />
-          </span>
-          <span>{node.name}</span>
-        </button>
+        {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) => (
@@ -82,8 +186,12 @@ function FileNode({ node, depth, expanded, selectedPath, onSelect, onToggle }) {
                 depth={depth + 1}
                 expanded={expanded}
                 selectedPath={selectedPath}
+                renaming={renaming}
                 onSelect={onSelect}
                 onToggle={onToggle}
+                onContextMenu={onContextMenu}
+                onRenameSubmit={onRenameSubmit}
+                onRenameCancel={onRenameCancel}
               />
             ))}
           </div>
@@ -91,21 +199,100 @@ function FileNode({ node, depth, expanded, selectedPath, onSelect, onToggle }) {
       </div>
     );
   }
-  // File rows nest under their directory header: extra left padding so
-  // file text sits to the right of the parent directory header.
-  const fileRowStyle = {
-    ...depthStyle,
-    paddingLeft: `calc(9px + ${depth} * 16px + 7px)`,
-  };
+  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={fileRowStyle}
-      onClick={() => onSelect(node.path)}>
-      <span>{basename(node.path)}</span>
+      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',

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

@@ -1,5 +1,7 @@
 import React from 'react';
+import { Lifecycle } from 'castle-web-sdk';
 import { initialFiles, parseJsonFile } from '../engine/files';
+import { collectAssets } from '../engine/assets';
 import { ScenePlayer } from '../engine/ScenePlayer';
 import { behaviorClasses } from './behaviorRegistry';
 // Play-mode entry point. Intentionally thin: it locates the start scene and
@@ -9,13 +11,13 @@ export function PlayOnly() {
   const sceneText = initialFiles['scenes/main.scene'] ?? '';
   const { value: sceneData } = parseJsonFile('scenes/main.scene', sceneText);
   if (!sceneData) return null;
-  const drawings = {};
-  for (const [path, text] of Object.entries(initialFiles)) {
-    if (!path.endsWith('.drawing')) continue;
-    const parsed = parseJsonFile(path, text);
-    if (parsed.value) drawings[path] = parsed.value;
-  }
+  const { sprites } = collectAssets(initialFiles);
   return (
-    <ScenePlayer sceneData={sceneData} drawings={drawings} behaviorClasses={behaviorClasses} />
+    <ScenePlayer
+      sceneData={sceneData}
+      sprites={sprites}
+      behaviorClasses={behaviorClasses}
+      onFirstFrame={Lifecycle.ready}
+    />
   );
 }