@hyperframes/studio 0.6.0-alpha.9 → 0.6.1

package/src/components/editor/FileTreeIcons.tsx

@@ -0,0 +1,128 @@
+import {
+  FileHtml,
+  FileCss,
+  FileJs,
+  FileJsx,
+  FileTs,
+  FileTsx,
+  FileTxt,
+  FileMd,
+  FileSvg,
+  FilePng,
+  FileJpg,
+  FileVideo,
+  FileCode,
+  File,
+  Waveform,
+  TextAa,
+  Image as PhImage,
+} from "@phosphor-icons/react";
+
+const SZ = 14;
+const W = "duotone" as const;
+
+export function FileIcon({ path }: { path: string }) {
+  const ext = path.split(".").pop()?.toLowerCase() ?? "";
+  const c = "flex-shrink-0";
+  if (ext === "html") return <FileHtml size={SZ} weight={W} color="#E44D26" className={c} />;
+  if (ext === "css") return <FileCss size={SZ} weight={W} color="#264DE4" className={c} />;
+  if (ext === "js" || ext === "mjs" || ext === "cjs")
+    return <FileJs size={SZ} weight={W} color="#F0DB4F" className={c} />;
+  if (ext === "jsx") return <FileJsx size={SZ} weight={W} color="#61DAFB" className={c} />;
+  if (ext === "ts" || ext === "mts")
+    return <FileTs size={SZ} weight={W} color="#3178C6" className={c} />;
+  if (ext === "tsx") return <FileTsx size={SZ} weight={W} color="#3178C6" className={c} />;
+  if (ext === "json") return <FileCode size={SZ} weight={W} color="#4ADE80" className={c} />;
+  if (ext === "svg") return <FileSvg size={SZ} weight={W} color="#F97316" className={c} />;
+  if (ext === "md" || ext === "mdx")
+    return <FileMd size={SZ} weight={W} color="#9CA3AF" className={c} />;
+  if (ext === "txt") return <FileTxt size={SZ} weight={W} color="#9CA3AF" className={c} />;
+  if (ext === "png") return <FilePng size={SZ} weight={W} color="#22C55E" className={c} />;
+  if (ext === "jpg" || ext === "jpeg")
+    return <FileJpg size={SZ} weight={W} color="#22C55E" className={c} />;
+  if (ext === "webp" || ext === "gif" || ext === "ico")
+    return <PhImage size={SZ} weight={W} color="#22C55E" className={c} />;
+  if (ext === "mp4" || ext === "webm" || ext === "mov")
+    return <FileVideo size={SZ} weight={W} color="#A855F7" className={c} />;
+  if (ext === "mp3" || ext === "wav" || ext === "ogg" || ext === "m4a")
+    return <Waveform size={SZ} weight={W} color="#3CE6AC" className={c} />;
+  if (ext === "woff" || ext === "woff2" || ext === "ttf" || ext === "otf")
+    return <TextAa size={SZ} weight={W} color="#6B7280" className={c} />;
+  return <File size={SZ} weight={W} color="#6B7280" className={c} />;
+}
+
+// ── Tree Types ──
+
+export interface TreeNode {
+  name: string;
+  fullPath: string;
+  children: Map<string, TreeNode>;
+  isFile: boolean;
+}
+
+export interface ContextMenuState {
+  x: number;
+  y: number;
+  targetPath: string;
+  targetIsFolder: boolean;
+}
+
+export interface InlineInputState {
+  /** Parent folder path (empty string for root) */
+  parentPath: string;
+  /** "file" or "folder" creation, or "rename" */
+  mode: "new-file" | "new-folder" | "rename";
+  /** For rename mode, the original full path */
+  originalPath?: string;
+  /** For rename mode, the original name */
+  originalName?: string;
+  onCommit?: (name: string) => void;
+  onCancel?: () => void;
+}
+
+// ── Tree Helpers ──
+
+export function buildTree(files: string[]): TreeNode {
+  const root: TreeNode = { name: "", fullPath: "", children: new Map(), isFile: false };
+  for (const file of files) {
+    const parts = file.split("/");
+    let current = root;
+    for (let i = 0; i < parts.length; i++) {
+      const part = parts[i];
+      const isLast = i === parts.length - 1;
+      const fullPath = parts.slice(0, i + 1).join("/");
+      if (!current.children.has(part)) {
+        current.children.set(part, {
+          name: part,
+          fullPath,
+          children: new Map(),
+          isFile: isLast,
+        });
+      }
+      current = current.children.get(part)!;
+      if (isLast) current.isFile = true;
+    }
+  }
+  return root;
+}
+
+export function sortChildren(children: Map<string, TreeNode>): TreeNode[] {
+  return Array.from(children.values()).sort((a, b) => {
+    // index.html always first
+    if (a.name === "index.html") return -1;
+    if (b.name === "index.html") return 1;
+    // Directories before files
+    if (!a.isFile && b.isFile) return -1;
+    if (a.isFile && !b.isFile) return 1;
+    return a.name.localeCompare(b.name);
+  });
+}
+
+export function isActiveInSubtree(node: TreeNode, activeFile: string | null): boolean {
+  if (!activeFile) return false;
+  if (node.fullPath === activeFile) return true;
+  for (const child of node.children.values()) {
+    if (isActiveInSubtree(child, activeFile)) return true;
+  }
+  return false;
+}

package/src/components/editor/FileTreeNodes.tsx

@@ -0,0 +1,496 @@
+import { memo, useState, useCallback, useMemo, useRef, useEffect } from "react";
+import {
+  PencilSimple,
+  Copy,
+  Trash,
+  FilePlus,
+  FolderSimplePlus,
+  FolderSimple,
+} from "@phosphor-icons/react";
+import { ChevronDown, ChevronRight } from "../../icons/SystemIcons";
+import {
+  FileIcon,
+  buildTree as _buildTree,
+  sortChildren,
+  isActiveInSubtree,
+  type TreeNode,
+  type ContextMenuState,
+  type InlineInputState,
+} from "./FileTreeIcons";
+
+// Re-export for FileTree.tsx consumers
+export type { TreeNode, ContextMenuState, InlineInputState };
+export { buildTree, sortChildren, isActiveInSubtree } from "./FileTreeIcons";
+
+const SZ_ICON = 14;
+
+// ── Context Menu Component ──
+
+export function ContextMenu({
+  state,
+  onClose,
+  onNewFile,
+  onNewFolder,
+  onRename,
+  onDuplicate,
+  onDelete,
+}: {
+  state: ContextMenuState;
+  onClose: () => void;
+  onNewFile: (parentPath: string) => void;
+  onNewFolder: (parentPath: string) => void;
+  onRename: (path: string) => void;
+  onDuplicate: (path: string) => void;
+  onDelete: (path: string) => void;
+}) {
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        onClose();
+      }
+    };
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleEscape);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [onClose]);
+
+  const adjustedX = Math.min(state.x, window.innerWidth - 180);
+  const adjustedY = Math.min(state.y, window.innerHeight - 200);
+
+  const parentPath = state.targetIsFolder
+    ? state.targetPath
+    : state.targetPath.includes("/")
+      ? state.targetPath.slice(0, state.targetPath.lastIndexOf("/"))
+      : "";
+
+  return (
+    <div
+      ref={menuRef}
+      className="fixed z-50 bg-neutral-900 border border-neutral-700 rounded-md shadow-lg py-1 min-w-[160px]"
+      style={{ left: adjustedX, top: adjustedY }}
+    >
+      {state.targetIsFolder && (
+        <>
+          <button
+            className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-neutral-300 hover:bg-neutral-800 cursor-pointer text-left"
+            onClick={() => {
+              onNewFile(state.targetPath);
+              onClose();
+            }}
+          >
+            <FilePlus size={12} weight="duotone" className="text-neutral-500" />
+            New File
+          </button>
+          <button
+            className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-neutral-300 hover:bg-neutral-800 cursor-pointer text-left"
+            onClick={() => {
+              onNewFolder(state.targetPath);
+              onClose();
+            }}
+          >
+            <FolderSimplePlus size={12} weight="duotone" className="text-neutral-500" />
+            New Folder
+          </button>
+          <div className="border-t border-neutral-700 my-1" />
+        </>
+      )}
+      {!state.targetIsFolder && (
+        <>
+          <button
+            className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-neutral-300 hover:bg-neutral-800 cursor-pointer text-left"
+            onClick={() => {
+              onNewFile(parentPath);
+              onClose();
+            }}
+          >
+            <FilePlus size={12} weight="duotone" className="text-neutral-500" />
+            New File
+          </button>
+          <div className="border-t border-neutral-700 my-1" />
+        </>
+      )}
+      <button
+        className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-neutral-300 hover:bg-neutral-800 cursor-pointer text-left"
+        onClick={() => {
+          onRename(state.targetPath);
+          onClose();
+        }}
+      >
+        <PencilSimple size={12} weight="duotone" className="text-neutral-500" />
+        Rename
+      </button>
+      {!state.targetIsFolder && (
+        <button
+          className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-neutral-300 hover:bg-neutral-800 cursor-pointer text-left"
+          onClick={() => {
+            onDuplicate(state.targetPath);
+            onClose();
+          }}
+        >
+          <Copy size={12} weight="duotone" className="text-neutral-500" />
+          Duplicate
+        </button>
+      )}
+      <div className="border-t border-neutral-700 my-1" />
+      <button
+        className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-red-400 hover:bg-red-900/30 cursor-pointer text-left"
+        onClick={() => {
+          onDelete(state.targetPath);
+          onClose();
+        }}
+      >
+        <Trash size={12} weight="duotone" />
+        Delete
+      </button>
+    </div>
+  );
+}
+
+// ── Inline Input (for new file/folder/rename) ──
+
+export function InlineInput({
+  defaultValue,
+  depth,
+  isFolder,
+  onCommit,
+  onCancel,
+}: {
+  defaultValue: string;
+  depth: number;
+  isFolder: boolean;
+  onCommit: (value: string) => void;
+  onCancel: () => void;
+}) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const committedRef = useRef(false);
+  const [value, setValue] = useState(defaultValue);
+
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    const el = inputRef.current;
+    if (!el) return;
+    el.focus();
+    if (defaultValue && defaultValue.includes(".")) {
+      const dotIdx = defaultValue.lastIndexOf(".");
+      el.setSelectionRange(0, dotIdx);
+    } else {
+      el.select();
+    }
+  }, [defaultValue]);
+
+  const commit = (name: string) => {
+    if (committedRef.current) return;
+    committedRef.current = true;
+    onCommit(name);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      const trimmed = value.trim();
+      if (trimmed && !(/[/\\]/.test(trimmed) || trimmed.includes(".."))) commit(trimmed);
+      else onCancel();
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      onCancel();
+    }
+  };
+
+  const handleBlur = () => {
+    const trimmed = value.trim();
+    if (trimmed && trimmed !== defaultValue && !(/[/\\]/.test(trimmed) || trimmed.includes("..")))
+      commit(trimmed);
+    else onCancel();
+  };
+
+  return (
+    <div
+      className="flex items-center gap-2 py-0.5 min-h-7"
+      style={{ paddingLeft: `${8 + depth * 12 + (isFolder ? 0 : 14)}px` }}
+    >
+      {isFolder ? (
+        <FolderSimple size={SZ_ICON} weight="duotone" color="#6B7280" className="flex-shrink-0" />
+      ) : (
+        <FileIcon path={value} />
+      )}
+      <input
+        ref={inputRef}
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        onKeyDown={handleKeyDown}
+        onBlur={handleBlur}
+        className="flex-1 min-w-0 bg-neutral-800 text-neutral-200 text-xs px-1.5 py-0.5 rounded border border-neutral-600 outline-none focus:border-[#3CE6AC]"
+        spellCheck={false}
+      />
+    </div>
+  );
+}
+
+// ── Delete Confirmation ──
+
+export function DeleteConfirm({
+  name,
+  onConfirm,
+  onCancel,
+}: {
+  name: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onCancel();
+    };
+    const handleClickOutside = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) onCancel();
+    };
+    document.addEventListener("keydown", handleEscape);
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [onCancel]);
+
+  return (
+    <div
+      ref={ref}
+      className="mx-1 my-0.5 p-2 bg-neutral-800 border border-neutral-700 rounded-md text-xs"
+    >
+      <p className="text-neutral-300 mb-2">
+        Delete <span className="font-medium text-neutral-100">{name}</span>?
+      </p>
+      <div className="flex gap-1.5">
+        <button
+          onClick={onCancel}
+          className="flex-1 px-2 py-1 rounded bg-neutral-700 text-neutral-300 hover:bg-neutral-600 transition-colors"
+        >
+          Cancel
+        </button>
+        <button
+          onClick={onConfirm}
+          className="flex-1 px-2 py-1 rounded bg-red-900/60 text-red-300 hover:bg-red-800/60 transition-colors"
+        >
+          Delete
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// ── TreeFile ──
+
+export const TreeFile = memo(function TreeFile({
+  node,
+  depth,
+  activeFile,
+  onSelectFile,
+  onContextMenu,
+  inlineInput,
+  onDragStart,
+}: {
+  node: TreeNode;
+  depth: number;
+  activeFile: string | null;
+  onSelectFile: (path: string) => void;
+  onContextMenu: (e: React.MouseEvent, path: string, isFolder: boolean) => void;
+  inlineInput: InlineInputState | null;
+  onDragStart: (e: React.DragEvent, path: string) => void;
+}) {
+  const isActive = node.fullPath === activeFile;
+  const isRenaming = inlineInput?.mode === "rename" && inlineInput.originalPath === node.fullPath;
+
+  if (isRenaming) {
+    return (
+      <InlineInput
+        defaultValue={inlineInput.originalName ?? node.name}
+        depth={depth}
+        isFolder={false}
+        onCommit={(name) => {
+          inlineInput?.onCommit?.(name);
+        }}
+        onCancel={() => {
+          inlineInput?.onCancel?.();
+        }}
+      />
+    );
+  }
+
+  return (
+    <button
+      draggable
+      onDragStart={(e) => onDragStart(e, node.fullPath)}
+      onClick={() => onSelectFile(node.fullPath)}
+      onContextMenu={(e) => {
+        e.preventDefault();
+        onContextMenu(e, node.fullPath, false);
+      }}
+      className={`w-full flex items-center gap-2 py-1 min-h-7 text-left transition-all text-xs ${
+        isActive
+          ? "bg-neutral-800/60 text-neutral-200"
+          : "text-neutral-500 hover:bg-neutral-800/30 hover:text-neutral-300"
+      }`}
+      style={{ paddingLeft: `${8 + depth * 12 + 14}px` }}
+    >
+      <FileIcon path={node.name} />
+      <span className="truncate">{node.name}</span>
+    </button>
+  );
+});
+
+// ── TreeFolder ──
+
+export const TreeFolder = memo(function TreeFolder({
+  node,
+  depth,
+  activeFile,
+  onSelectFile,
+  defaultOpen,
+  onContextMenu,
+  inlineInput,
+  onDragStart,
+  onDragOver,
+  onDrop,
+  onDragLeave,
+  dragOverFolder,
+}: {
+  node: TreeNode;
+  depth: number;
+  activeFile: string | null;
+  onSelectFile: (path: string) => void;
+  defaultOpen: boolean;
+  onContextMenu: (e: React.MouseEvent, path: string, isFolder: boolean) => void;
+  inlineInput: InlineInputState | null;
+  onDragStart: (e: React.DragEvent, path: string) => void;
+  onDragOver: (e: React.DragEvent, folderPath: string) => void;
+  onDrop: (e: React.DragEvent, folderPath: string) => void;
+  onDragLeave: () => void;
+  dragOverFolder: string | null;
+}) {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  const toggle = useCallback(() => setIsOpen((v) => !v), []);
+  const children = useMemo(() => sortChildren(node.children), [node.children]);
+  const Chevron = isOpen ? ChevronDown : ChevronRight;
+  const isDragOver = dragOverFolder === node.fullPath;
+  const isRenaming = inlineInput?.mode === "rename" && inlineInput.originalPath === node.fullPath;
+
+  if (isRenaming) {
+    return (
+      <InlineInput
+        defaultValue={inlineInput.originalName ?? node.name}
+        depth={depth}
+        isFolder={true}
+        onCommit={(name) => {
+          inlineInput?.onCommit?.(name);
+        }}
+        onCancel={() => {
+          inlineInput?.onCancel?.();
+        }}
+      />
+    );
+  }
+
+  return (
+    <>
+      <button
+        draggable
+        onDragStart={(e) => onDragStart(e, node.fullPath)}
+        onClick={toggle}
+        onContextMenu={(e) => {
+          e.preventDefault();
+          onContextMenu(e, node.fullPath, true);
+        }}
+        onDragOver={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          onDragOver(e, node.fullPath);
+        }}
+        onDrop={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          onDrop(e, node.fullPath);
+        }}
+        onDragLeave={onDragLeave}
+        className={`w-full flex items-center gap-1.5 px-2.5 py-1 min-h-7 text-left text-xs text-neutral-400 hover:bg-neutral-800/30 hover:text-neutral-300 transition-colors ${
+          isDragOver ? "bg-[#3CE6AC]/10 outline outline-1 outline-[#3CE6AC]/40" : ""
+        }`}
+        style={{ paddingLeft: `${8 + depth * 12}px` }}
+      >
+        <Chevron size={10} className="flex-shrink-0 text-neutral-600" />
+        <span className="truncate font-medium">{node.name}</span>
+      </button>
+      {isOpen && (
+        <>
+          {inlineInput &&
+            (inlineInput.mode === "new-file" || inlineInput.mode === "new-folder") &&
+            inlineInput.parentPath === node.fullPath && (
+              <InlineInput
+                defaultValue=""
+                depth={depth + 1}
+                isFolder={inlineInput.mode === "new-folder"}
+                onCommit={(name) => {
+                  inlineInput?.onCommit?.(name);
+                }}
+                onCancel={() => {
+                  inlineInput?.onCancel?.();
+                }}
+              />
+            )}
+          {children.map((child) =>
+            child.isFile && child.children.size === 0 ? (
+              <TreeFile
+                key={child.fullPath}
+                node={child}
+                depth={depth + 1}
+                activeFile={activeFile}
+                onSelectFile={onSelectFile}
+                onContextMenu={onContextMenu}
+                inlineInput={inlineInput}
+                onDragStart={onDragStart}
+              />
+            ) : child.children.size > 0 ? (
+              <TreeFolder
+                key={child.fullPath}
+                node={child}
+                depth={depth + 1}
+                activeFile={activeFile}
+                onSelectFile={onSelectFile}
+                defaultOpen={isActiveInSubtree(child, activeFile)}
+                onContextMenu={onContextMenu}
+                inlineInput={inlineInput}
+                onDragStart={onDragStart}
+                onDragOver={onDragOver}
+                onDrop={onDrop}
+                onDragLeave={onDragLeave}
+                dragOverFolder={dragOverFolder}
+              />
+            ) : (
+              <TreeFile
+                key={child.fullPath}
+                node={child}
+                depth={depth + 1}
+                activeFile={activeFile}
+                onSelectFile={onSelectFile}
+                onContextMenu={onContextMenu}
+                inlineInput={inlineInput}
+                onDragStart={onDragStart}
+              />
+            ),
+          )}
+        </>
+      )}
+    </>
+  );
+});