npm - @hyperframes/studio - Versions diffs - 0.1.15 → 0.2.0 - Mend

@hyperframes/studio 0.1.15 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/README.md +2 -2
package/dist/assets/index-Bkp9HQbo.css +1 -0
package/dist/assets/index-DfhSlTti.js +93 -0
package/dist/index.html +2 -2
package/package.json +2 -2
package/src/App.tsx +231 -4
package/src/components/editor/FileTree.tsx +759 -49
package/src/components/sidebar/AssetsTab.tsx +180 -38
package/src/components/sidebar/LeftSidebar.tsx +28 -3
package/dist/assets/index-CLmYRLY-.css +0 -1
package/dist/assets/index-CRvFpc0E.js +0 -84

package/dist/index.html CHANGED Viewed

@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>HyperFrames Studio</title>
-    <script type="module" crossorigin src="/assets/index-CRvFpc0E.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-CLmYRLY-.css">
+    <script type="module" crossorigin src="/assets/index-DfhSlTti.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-Bkp9HQbo.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.1.15",
+  "version": "0.2.0",
   "description": "",
   "repository": {
     "type": "git",
@@ -32,7 +32,7 @@
     "@phosphor-icons/react": "^2.1.10",
     "codemirror": "^6.0.1",
     "motion": "^12.38.0",
-    "@hyperframes/core": "0.1.15"
+    "@hyperframes/core": "0.2.0"
   },
   "devDependencies": {
     "@types/react": "^19.0.0",

package/src/App.tsx CHANGED Viewed

@@ -24,8 +24,7 @@ export function StudioApp() {
   const [projectId, setProjectId] = useState<string | null>(null);
   const [resolving, setResolving] = useState(true);
-  // eslint-disable-next-line no-restricted-syntax
-  useEffect(() => {
+  useMountEffect(() => {
     const hashMatch = window.location.hash.match(/^#project\/([^/]+)/);
     if (hashMatch) {
       setProjectId(hashMatch[1]);
@@ -44,7 +43,7 @@ export function StudioApp() {
       })
       .catch(() => {})
       .finally(() => setResolving(false));
-  }, []);
+  });
   const [editingFile, setEditingFile] = useState<EditingFile | null>(null);
   const [activeCompPath, setActiveCompPath] = useState<string | null>(null);
@@ -57,7 +56,10 @@ export function StudioApp() {
   const [rightWidth, setRightWidth] = useState(400);
   const [leftCollapsed, setLeftCollapsed] = useState(false);
   const [rightCollapsed, setRightCollapsed] = useState(true);
+  const [globalDragOver, setGlobalDragOver] = useState(false);
+  const [uploadToast, setUploadToast] = useState<string | null>(null);
   const [timelineVisible, setTimelineVisible] = useState(false);
+  const dragCounterRef = useRef(0);
   const panelDragRef = useRef<{
     side: "left" | "right";
     startX: number;
@@ -246,6 +248,169 @@ export function StudioApp() {
     }, 600);
   }, []);
+  // ── File Management Handlers ──
+  const refreshFileTree = useCallback(async () => {
+    const pid = projectIdRef.current;
+    if (!pid) return;
+    const res = await fetch(`/api/projects/${pid}`);
+    const data = await res.json();
+    if (data.files) setFileTree(data.files);
+  }, []);
+  const handleCreateFile = useCallback(
+    async (path: string) => {
+      const pid = projectIdRef.current;
+      if (!pid) return;
+      let content = "";
+      if (path.endsWith(".html")) {
+        content =
+          '<!DOCTYPE html>\n<html>\n<head>\n  <meta charset="UTF-8">\n</head>\n<body>\n\n</body>\n</html>\n';
+      }
+      const res = await fetch(`/api/projects/${pid}/files/${encodeURIComponent(path)}`, {
+        method: "POST",
+        headers: { "Content-Type": "text/plain" },
+        body: content,
+      });
+      if (res.ok) {
+        await refreshFileTree();
+        handleFileSelect(path);
+      } else {
+        const err = await res.json().catch(() => ({ error: "unknown" }));
+        console.error(`Create file failed: ${err.error}`);
+      }
+    },
+    [refreshFileTree, handleFileSelect],
+  );
+  const handleCreateFolder = useCallback(
+    async (path: string) => {
+      const pid = projectIdRef.current;
+      if (!pid) return;
+      // Create a .gitkeep inside the folder so it appears in the tree
+      const res = await fetch(
+        `/api/projects/${pid}/files/${encodeURIComponent(path + "/.gitkeep")}`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "text/plain" },
+          body: "",
+        },
+      );
+      if (res.ok) {
+        await refreshFileTree();
+      } else {
+        const err = await res.json().catch(() => ({ error: "unknown" }));
+        console.error(`Create folder failed: ${err.error}`);
+      }
+    },
+    [refreshFileTree],
+  );
+  const handleDeleteFile = useCallback(
+    async (path: string) => {
+      const pid = projectIdRef.current;
+      if (!pid) return;
+      const res = await fetch(`/api/projects/${pid}/files/${encodeURIComponent(path)}`, {
+        method: "DELETE",
+      });
+      if (res.ok) {
+        if (editingPathRef.current === path) setEditingFile(null);
+        await refreshFileTree();
+      } else {
+        const err = await res.json().catch(() => ({ error: "unknown" }));
+        console.error(`Delete failed: ${err.error}`);
+      }
+    },
+    [refreshFileTree],
+  );
+  const handleRenameFile = useCallback(
+    async (oldPath: string, newPath: string) => {
+      const pid = projectIdRef.current;
+      if (!pid) return;
+      const res = await fetch(`/api/projects/${pid}/files/${encodeURIComponent(oldPath)}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ newPath }),
+      });
+      if (res.ok) {
+        if (editingPathRef.current === oldPath) {
+          handleFileSelect(newPath);
+        }
+        await refreshFileTree();
+        // Refresh preview — references in compositions may have been updated
+        setRefreshKey((k) => k + 1);
+      } else {
+        const err = await res.json().catch(() => ({ error: "unknown" }));
+        console.error(`Rename failed: ${err.error}`);
+      }
+    },
+    [refreshFileTree, handleFileSelect],
+  );
+  const handleDuplicateFile = useCallback(
+    async (path: string) => {
+      const pid = projectIdRef.current;
+      if (!pid) return;
+      const res = await fetch(`/api/projects/${pid}/duplicate-file`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ path }),
+      });
+      if (res.ok) {
+        const data = await res.json();
+        await refreshFileTree();
+        if (data.path) handleFileSelect(data.path);
+      } else {
+        const err = await res.json().catch(() => ({ error: "unknown" }));
+        console.error(`Duplicate failed: ${err.error}`);
+      }
+    },
+    [refreshFileTree, handleFileSelect],
+  );
+  const handleMoveFile = handleRenameFile;
+  const showUploadToast = useCallback((msg: string) => {
+    setUploadToast(msg);
+    setTimeout(() => setUploadToast(null), 4000);
+  }, []);
+  const handleImportFiles = useCallback(
+    async (files: FileList, dir?: string) => {
+      const pid = projectIdRef.current;
+      if (!pid || files.length === 0) return;
+      const formData = new FormData();
+      for (const file of Array.from(files)) {
+        formData.append("file", file);
+      }
+      const qs = dir ? `?dir=${encodeURIComponent(dir)}` : "";
+      try {
+        const res = await fetch(`/api/projects/${pid}/upload${qs}`, {
+          method: "POST",
+          body: formData,
+        });
+        if (res.ok) {
+          const data = await res.json();
+          if (data.skipped?.length) {
+            showUploadToast(`Skipped (too large): ${data.skipped.join(", ")}`);
+          }
+          await refreshFileTree();
+          setRefreshKey((k) => k + 1);
+        } else if (res.status === 413) {
+          showUploadToast("Upload rejected: payload too large");
+        } else {
+          showUploadToast(`Upload failed (${res.status})`);
+        }
+      } catch {
+        showUploadToast("Upload failed: network error");
+      }
+    },
+    [refreshFileTree, showUploadToast],
+  );
   const handleLint = useCallback(async () => {
     const pid = projectIdRef.current;
     if (!pid) return;
@@ -325,7 +490,31 @@ export function StudioApp() {
   // At this point projectId is guaranteed non-null (narrowed by the guard above)
   return (
-    <div className="flex flex-col h-screen w-screen bg-neutral-950">
+    <div
+      className="flex flex-col h-screen w-screen bg-neutral-950 relative"
+      onDragOver={(e) => {
+        if (!e.dataTransfer.types.includes("Files")) return;
+        e.preventDefault();
+      }}
+      onDragEnter={(e) => {
+        if (!e.dataTransfer.types.includes("Files")) return;
+        e.preventDefault();
+        dragCounterRef.current++;
+        setGlobalDragOver(true);
+      }}
+      onDragLeave={() => {
+        dragCounterRef.current--;
+        if (dragCounterRef.current === 0) setGlobalDragOver(false);
+      }}
+      onDrop={(e) => {
+        dragCounterRef.current = 0;
+        setGlobalDragOver(false);
+        // Skip if a child (e.g. AssetsTab) already handled the drop
+        if (e.defaultPrevented) return;
+        e.preventDefault();
+        if (e.dataTransfer.files.length) handleImportFiles(e.dataTransfer.files);
+      }}
+    >
       {/* Header bar */}
       <div className="flex items-center justify-between h-10 px-3 bg-neutral-900 border-b border-neutral-800 flex-shrink-0">
         {/* Left: project name */}
@@ -433,6 +622,13 @@ export function StudioApp() {
             fileTree={fileTree}
             editingFile={editingFile}
             onSelectFile={handleFileSelect}
+            onCreateFile={handleCreateFile}
+            onCreateFolder={handleCreateFolder}
+            onDeleteFile={handleDeleteFile}
+            onRenameFile={handleRenameFile}
+            onDuplicateFile={handleDuplicateFile}
+            onMoveFile={handleMoveFile}
+            onImportFiles={handleImportFiles}
             codeChildren={
               editingFile ? (
                 isMediaFile(editingFile.path) ? (
@@ -514,6 +710,37 @@ export function StudioApp() {
       {lintModal !== null && projectId && (
         <LintModal findings={lintModal} projectId={projectId} onClose={() => setLintModal(null)} />
       )}
+      {/* Global drag-drop overlay */}
+      {globalDragOver && (
+        <div className="absolute inset-0 z-[90] flex items-center justify-center bg-black/50 backdrop-blur-sm pointer-events-none">
+          <div className="flex flex-col items-center gap-3 px-8 py-6 rounded-xl border-2 border-dashed border-studio-accent/60 bg-studio-accent/[0.06]">
+            <svg
+              width="32"
+              height="32"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className="text-studio-accent"
+            >
+              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+              <polyline points="7 10 12 15 17 10" />
+              <line x1="12" y1="15" x2="12" y2="3" />
+            </svg>
+            <span className="text-sm font-medium text-studio-accent">
+              Drop files to import into project
+            </span>
+          </div>
+        </div>
+      )}
+      {uploadToast && (
+        <div className="absolute bottom-6 left-1/2 -translate-x-1/2 z-[91] px-4 py-2 rounded-lg bg-red-900/90 border border-red-700/50 text-sm text-red-200 shadow-lg animate-in fade-in slide-in-from-bottom-2">
+          {uploadToast}
+        </div>
+      )}
     </div>
   );
 }