feat(studio): storyboard markdown source editor (raw + live preview)

packages/studio/package.json

@@ -32,6 +32,7 @@
     "@codemirror/lang-css": "^6.3.1",
     "@codemirror/lang-html": "^6.4.9",
     "@codemirror/lang-javascript": "^6.2.2",
+    "@codemirror/lang-markdown": "^6.3.4",
     "@codemirror/language": "^6.12.2",
     "@codemirror/search": "^6.6.0",
     "@codemirror/state": "^6.6.0",
@@ -42,6 +43,8 @@
     "@hyperframes/sdk": "workspace:*",
     "@phosphor-icons/react": "^2.1.10",
     "bpm-detective": "^2.0.5",
+    "dompurify": "^3.2.4",
+    "marked": "^14.1.4",
     "mediabunny": "^1.45.3"
   },
   "devDependencies": {

packages/studio/src/components/editor/SourceEditor.tsx

@@ -12,26 +12,26 @@ import { bracketMatching, foldGutter, indentOnInput } from "@codemirror/language
 import { closeBrackets, closeBracketsKeymap } from "@codemirror/autocomplete";
 import { highlightSelectionMatches, searchKeymap } from "@codemirror/search";
 import { oneDark } from "@codemirror/theme-one-dark";
+import type { Extension } from "@codemirror/state";
 import { html } from "@codemirror/lang-html";
 import { css } from "@codemirror/lang-css";
 import { javascript } from "@codemirror/lang-javascript";
+import { markdown } from "@codemirror/lang-markdown";
 
-function getLanguageExtension(language: string) {
-  switch (language) {
-    case "html":
-      return html();
-    case "css":
-      return css();
-    case "javascript":
-    case "js":
-    case "typescript":
-    case "ts":
-      return javascript({
-        typescript: language === "typescript" || language === "ts",
-      });
-    default:
-      return html();
-  }
+const LANGUAGE_EXTENSIONS: Record<string, () => Extension> = {
+  html: () => html(),
+  css: () => css(),
+  markdown: () => markdown(),
+  md: () => markdown(),
+  javascript: () => javascript(),
+  js: () => javascript(),
+  typescript: () => javascript({ typescript: true }),
+  ts: () => javascript({ typescript: true }),
+};
+
+function getLanguageExtension(language: string): Extension {
+  const factory = LANGUAGE_EXTENSIONS[language] ?? html;
+  return factory();
 }
 
 function detectLanguage(filePath: string): string {
@@ -45,6 +45,8 @@ function detectLanguage(filePath: string): string {
     jsx: "javascript",
     tsx: "typescript",
     json: "javascript",
+    md: "markdown",
+    markdown: "markdown",
   };
   return map[ext] ?? "html";
 }
@@ -74,6 +76,7 @@ export const SourceEditor = memo(function SourceEditor({
   const contentRef = useRef(content);
   contentRef.current = content;
 
+  // fallow-ignore-next-line complexity
   const mountEditor = useCallback(
     (node: HTMLDivElement | null) => {
       if (editorRef.current) {

packages/studio/src/components/storyboard/StoryboardLoaded.tsx

@@ -0,0 +1,95 @@
+import { useMemo, useState } from "react";
+import type { StoryboardResponse } from "../../hooks/useStoryboard";
+import { StoryboardDirection } from "./StoryboardDirection";
+import { StoryboardGrid } from "./StoryboardGrid";
+import { StoryboardStatusLegend } from "./StoryboardStatusLegend";
+import { StoryboardScriptPanel } from "./StoryboardScriptPanel";
+import { StoryboardSourceEditor, type SourceFile } from "./StoryboardSourceEditor";
+
+type SubView = "board" | "source";
+
+export interface StoryboardLoadedProps {
+  projectId: string;
+  data: StoryboardResponse;
+  /** Re-fetch the manifest after a source edit is saved. */
+  reload: () => void;
+}
+
+/** A storyboard that exists on disk: Board (contact sheet) ↔ Source (markdown editor). */
+export function StoryboardLoaded({ projectId, data, reload }: StoryboardLoadedProps) {
+  const [subView, setSubView] = useState<SubView>("board");
+  const [sourceDirty, setSourceDirty] = useState(false);
+  const sourceFiles = useMemo<SourceFile[]>(() => {
+    const files: SourceFile[] = [{ path: data.path, label: data.path }];
+    if (data.script?.exists) files.push({ path: data.script.path, label: data.script.path });
+    return files;
+  }, [data.path, data.script]);
+
+  // Leaving the source editor drops its in-memory buffer; confirm when it's dirty.
+  // fallow-ignore-next-line complexity
+  const changeSubView = (next: SubView) => {
+    if (next === subView) return;
+    if (
+      subView === "source" &&
+      sourceDirty &&
+      !window.confirm("Discard unsaved markdown changes?")
+    ) {
+      return;
+    }
+    setSubView(next);
+  };
+
+  return (
+    <div className="flex flex-1 min-h-0 flex-col bg-neutral-950 text-neutral-200">
+      <div className="flex items-center border-b border-neutral-800 px-4 py-2">
+        <SubViewToggle value={subView} onChange={changeSubView} />
+      </div>
+      {subView === "board" ? (
+        <div className="flex-1 min-h-0 overflow-auto">
+          <div className="mx-auto max-w-[1400px] px-8 py-8">
+            <StoryboardDirection globals={data.globals} frameCount={data.frames.length} />
+            <div className="mt-5">
+              <StoryboardStatusLegend />
+            </div>
+            <StoryboardGrid projectId={projectId} frames={data.frames} />
+            {data.script && <StoryboardScriptPanel script={data.script} />}
+          </div>
+        </div>
+      ) : (
+        <StoryboardSourceEditor
+          files={sourceFiles}
+          onSaved={reload}
+          onDirtyChange={setSourceDirty}
+        />
+      )}
+    </div>
+  );
+}
+
+const SUB_VIEWS: Array<{ value: SubView; label: string }> = [
+  { value: "board", label: "Board" },
+  { value: "source", label: "Source" },
+];
+
+function SubViewToggle({ value, onChange }: { value: SubView; onChange: (next: SubView) => void }) {
+  return (
+    <div className="flex items-center gap-0.5 rounded-md bg-neutral-900 p-0.5" role="tablist">
+      {SUB_VIEWS.map((option) => (
+        <button
+          key={option.value}
+          type="button"
+          role="tab"
+          aria-selected={value === option.value}
+          onClick={() => onChange(option.value)}
+          className={`rounded px-3 py-1 text-xs font-medium transition-colors ${
+            value === option.value
+              ? "bg-neutral-700 text-neutral-100"
+              : "text-neutral-400 hover:text-neutral-200"
+          }`}
+        >
+          {option.label}
+        </button>
+      ))}
+    </div>
+  );
+}