@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/code/CodeStudio.tsx

@@ -0,0 +1,373 @@
+// THE CODE STUDIO (C2): one code component's source, beside a live render of
+// what that source produces. It is the Components workspace's Edit tab for a
+// code component; Preview is ComponentsPreview.tsx.
+//
+// It is `ComponentStudio`'s shape and for that file's reasons: the mounted
+// `StagePanel` stays exactly where it is, and one element in the canvas cell is
+// a HOLE the stage renders into. So the picture beside the editor is the real
+// component under the real renderer, at its contract's own defaults, which is
+// the only way "what I am editing" and "what will ship" can be the same thing.
+//
+// ── IN THE DOCKED CELLS ─────────────────────────────────────────────────
+//
+//   LEFT     the components list (ComponentLibraryRail), as on every tab
+//   CENTRE   the CODE PANE (file bar, the open buffer, the 48 status footer),
+//            then the LIVE PANE (a 40 bar, then the hole), 420 wide
+//   RIGHT    the component's actions and props (InspectorPanel's code branch)
+//   BAR      the way back, the breadcrumb, the tab switch, Save and the zoom
+//
+// No transport under the centre and no timeline: the code pane carries its own
+// footer, and the live pane loops on the component clock.
+//
+// ONE SUBTREE, PORTALLED. The buffer feeds both the editor in the canvas cell
+// and the Save in the bar, and the back chevron and the Escape rung share one
+// dirty confirm. The mode portals only while it IS the workspace
+// (`workspaceOf`) on its Edit tab (`componentsTab`), so no two modes can ever
+// fill one cell.
+//
+// ── THE SUBJECT AND THE BUFFER ──────────────────────────────────────────
+//
+// `codeComponent` is what the stage draws; `codeActive` is what the editor
+// shows. The Files toggle in the file bar opens the project's files beside
+// the editor, docked inside the code pane, and a file opened from it moves the
+// buffer and never the subject: reading a helper is not a request to stop
+// looking at the component it feeds.
+//
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useConfirm } from "@dailies-studio/ui";
+import { framesToSeconds } from "@dailies-studio/engine";
+import { CHEVRON_LEFT_ICON } from "../../icons.js";
+import { instanceExportOf } from "@dailies-studio/shot/doc";
+import { useShotEditor, useStore } from "../../state/context.js";
+import { isEditable } from "../../state/keymap.js";
+import { shortcutHint } from "../../state/shortcuts.js";
+import { activeCodeFile } from "../../state/types.js";
+import type { ComponentBuild } from "../../state/types.js";
+import { workspaceOf } from "../../state/workspace.js";
+import { CODE_LIVE_WIDTH, CODE_PANE_MIN } from "../../state/panelSize.js";
+import { ResizeHandle } from "../ResizeHandle.js";
+import { InCell } from "../stage/cellSlots.js";
+import { formatDuration } from "../timeline/model.js";
+import { dirtyCodeFileCount, discardBuffersMessage } from "./codeBufferGuard.js";
+import { CodeFileStrips, CodePane, CodeTabs, TabWriter, useCodeDiagnostics } from "./codeParts.js";
+import { FileTree } from "./FileTree.js";
+import { ComponentLibraryRail } from "../studio/ComponentLibraryRail.js";
+import { ComponentsTabSwitch, StudioZoom } from "../studio/ComponentStudio.js";
+import { ComponentCrumb, ComponentsBack, useLoopLength, useNewPropKeys } from "../studio/componentParts.js";
+
+export function CodeStudio() {
+  const store = useStore();
+  // THIS MODE'S CELLS, and only while it is the workspace on screen, on the
+  // Edit tab of Components.
+  const open = useShotEditor(
+    (s) => workspaceOf(s) === "components" && s.codeComponent !== null && s.componentsTab === "edit",
+  );
+  const componentId = useShotEditor((s) => s.codeComponent);
+  const doc = useShotEditor((s) => s.doc);
+  const file = useShotEditor(activeCodeFile);
+  const library = useShotEditor((s) => s.library);
+  const readOnly = useShotEditor((s) => s.readOnly);
+  // ACROSS EVERY BUFFER, not the one on screen. Leaving drops them all, so the
+  // question has to be asked about all of them.
+  const dirtyCount = useShotEditor((s) => dirtyCodeFileCount(s.codeFiles));
+  const build = useShotEditor((s) => (s.codeComponent === null ? undefined : s.componentBuilds[s.codeComponent]));
+  const propKeys = useShotEditor((s) => (s.codeComponent === null ? null : s.contracts[s.codeComponent]?.keys));
+  const fresh = useNewPropKeys(propKeys === null || propKeys === undefined ? [] : Object.keys(propKeys));
+  const { frames, fps } = useLoopLength();
+  // The seam between the code and the live pane measures both at the press.
+  const studioRef = useRef<HTMLElement | null>(null);
+  const liveRef = useRef<HTMLDivElement | null>(null);
+  const liveCeiling = (): number | undefined => {
+    const width = studioRef.current?.getBoundingClientRect().width ?? 0;
+    return width > 0 ? width - CODE_PANE_MIN : undefined;
+  };
+  const bufferCount = useShotEditor((s) => s.codeOrder.length);
+  const [filesOpen, setFilesOpen] = useState(false);
+  const { confirm, dialog } = useConfirm();
+
+  const dirty = file !== null && file.content !== file.savedContent;
+
+  // LEAVING IS THE ONE PLACE THAT CAN LOSE WORK, so it is the one place that
+  // asks. The store's verb never blocks (a store cannot open a dialog), which
+  // is why the confirm lives here and every door (Back to Shot, the chevron
+  // to All components, Escape) comes through it.
+  const guard = useCallback(
+    (then: () => void) => {
+      if (dirtyCount === 0) {
+        then();
+        return;
+      }
+      void confirm({
+        title: "Unsaved changes",
+        message: discardBuffersMessage(dirtyCount),
+        confirmLabel: "Discard",
+        danger: true,
+      }).then((ok) => {
+        if (ok) then();
+      });
+    },
+    [confirm, dirtyCount],
+  );
+  // ESCAPE: back to the Shot a Shot door opened this from, else out.
+  const leave = useCallback(
+    () =>
+      guard(() =>
+        store.getState().componentsOrigin !== null ? void store.backToShot() : store.closeCodeComponent(),
+      ),
+    [guard, store],
+  );
+  const fromShot = useShotEditor((s) => s.componentsOrigin !== null);
+
+  // AND AN ESCAPE THE PANEL DID NOT HEAR: one pressed with the stage iframe
+  // focused reaches the store's keymap, which asks here rather than closing.
+  // Answered once per request, because `leave` changes with the dirty count.
+  // A request made while this tab is not up is ComponentsPreview's, and is
+  // marked seen here, so swapping to Edit never answers it a second time.
+  const backRequest = useShotEditor((s) => s.codeBackRequest);
+  const answered = useRef<object | null>(null);
+  useEffect(() => {
+    if (backRequest === answered.current) return;
+    answered.current = backRequest;
+    if (!open || backRequest === null) return;
+    leave();
+  }, [open, backRequest, leave]);
+
+  // ESCAPE COMES HERE while this mode is open, so a dirty buffer gets the same
+  // question the back chevron asks.
+  //
+  // ON THE DOCUMENT, IN THE BUBBLE PHASE: after everything on screen that owns
+  // an Escape of its own, and before the keymap.
+  //   - A menu, a popover and a live drag take Escape at window capture and
+  //     stop it, so it never arrives here.
+  //   - A Dialog stops it in React. CodeMirror marks one it used (closing its
+  //     search panel, collapsing a selection) with preventDefault.
+  //   - A field outside the editor (the Project title, a default, the Agent
+  //     draft) keeps its Escape to revert or cancel.
+  //   - The keymap listens on the window, bubble phase, so it runs after this,
+  //     and every other Escape stops here.
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent): void => {
+      if (e.key !== "Escape") return;
+      const target = e.target instanceof Element ? e.target : null;
+      if (target !== null && isEditable(target) && target.closest(".code-studio-pane") === null) return;
+      e.stopPropagation();
+      if (e.defaultPrevented || target?.closest(".dialog") != null) return;
+      e.preventDefault();
+      leave();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, leave]);
+
+  // THE TYPECHECK of the active buffer (`useCodeDiagnostics`), while this mode
+  // is on screen.
+  useCodeDiagnostics(open ? (file?.rel ?? null) : null, file?.content ?? null);
+
+  if (!open || componentId === null) return null;
+
+  const row = library.find((r) => r.id === componentId);
+  const name = row?.name ?? instanceExportOf(componentId);
+  const errors = file === null ? 0 : file.diagnostics.filter((d) => d.category === "error").length;
+  const tabRel = file?.rel ?? row?.rel ?? null;
+
+  return (
+    <>
+      {/* The confirm portals to <body> itself (house Dialog), so it lands in
+          no cell and paints over all of them. */}
+      {dialog}
+
+      <InCell name="bar">
+        {fromShot ? (
+          <ComponentsBack testId="code-back" guard={guard} />
+        ) : (
+          <button
+            type="button"
+            className="code-back"
+            data-testid="code-back"
+            title="All components"
+            aria-label="All components"
+            onClick={() => guard(() => void store.openComponents())}
+          >
+            {CHEVRON_LEFT_ICON}
+          </button>
+        )}
+        {/* THE SUBJECT, which is what the stage is drawing, NOT the buffer.
+            The file tab in the code pane says the other. */}
+        <ComponentCrumb
+          sel={{ kind: "code", module: componentId }}
+          name={
+            <span className="code-studio-name" title={name}>
+              {name}
+            </span>
+          }
+        />
+        {dirtyCount > 0 ? (
+          <span
+            className="code-studio-dirty"
+            data-testid="code-dirty"
+            title={dirtyCount === 1 ? "One file has unsaved changes" : `${dirtyCount} files have unsaved changes`}
+          />
+        ) : null}
+        <div className="component-studio-tools">
+          <ComponentsTabSwitch />
+          {/* SAVING IS EXPLICIT. Every save rebuilds, re-extracts the contract
+              and records a version, so a keystroke-triggered one would show the
+              author a stream of builds of half-typed code. */}
+          <button
+            type="button"
+            className="btn is-primary"
+            data-testid="code-save"
+            disabled={file === null || !dirty || file.status === "saving" || file.generated !== null}
+            title={file !== null && file.generated !== null ? "Generated files are read-only" : `Save${shortcutHint("file.save")}`}
+            onClick={() => void store.saveCodeFile()}
+          >
+            {file?.status === "saving" ? "Saving…" : "Save"}
+          </button>
+          <StudioZoom />
+        </div>
+      </InCell>
+
+      {doc === null ? null : (
+        <InCell name="left">
+          <ComponentLibraryRail doc={doc} current={{ kind: "code", module: componentId }} />
+        </InCell>
+      )}
+
+      <InCell name="centre">
+        <section className="code-studio" data-testid="code-studio" aria-label={`Code ${name}`} ref={studioRef}>
+          <div className="code-studio-column">
+            <div className="code-file-bar" data-testid="code-file-bar">
+              <button
+                type="button"
+                className={`code-files-toggle${filesOpen ? " is-on" : ""}`}
+                data-testid="code-files-toggle"
+                aria-pressed={filesOpen}
+                title={filesOpen ? "Hide the project's files" : "Show the project's files"}
+                onClick={() => setFilesOpen((v) => !v)}
+              >
+                Files
+              </button>
+              <CodeTabs />
+              {/* One buffer: the file tab alone. Two or more: the tab strip. */}
+              {tabRel !== null && bufferCount < 2 ? (
+                <span className="code-file-tab" data-testid="code-path" title={tabRel}>
+                  {tabRel.slice(tabRel.lastIndexOf("/") + 1)}
+                  <TabWriter rel={tabRel} />
+                </span>
+              ) : null}
+              <span className="code-file-spacer" />
+              <BuildStatus build={build} />
+            </div>
+            {/* The strips are FILE facts, so they head the column with the
+                file in it. */}
+            <CodeFileStrips file={file} />
+            <div className="code-studio-body">
+              {filesOpen ? <FileTree /> : null}
+              {file === null ? (
+                <p className="code-studio-empty" data-testid="code-no-buffer">
+                  Pick a file to read it here.
+                </p>
+              ) : (
+                <CodePane rel={file.rel} />
+              )}
+            </div>
+            <div className="code-status" data-testid="code-status">
+              {errors > 0 ? (
+                <span className="code-status-errors" data-testid="code-errors">
+                  {errors} {errors === 1 ? "error" : "errors"}
+                </span>
+              ) : (
+                <span className="code-status-ok" data-testid="code-problems">
+                  No problems
+                </span>
+              )}
+              {fresh.length > 0 ? (
+                <span className="code-status-note" data-testid="code-new-prop">
+                  · New prop found: {fresh.join(", ")}
+                </span>
+              ) : null}
+              <span className="code-file-spacer" />
+              <span className="code-status-verbs">
+                <button
+                  type="button"
+                  className="code-status-verb"
+                  data-testid="code-remix"
+                  disabled={readOnly || row === undefined || row.builtin === true}
+                  title="Make your own copy of this component. The original stays as it was."
+                  onClick={() => void store.remixComponent()}
+                >
+                  Remix
+                </button>
+                <span aria-hidden="true">·</span>
+                <button
+                  type="button"
+                  className="code-status-verb"
+                  data-testid="code-history"
+                  title="Every built version of this component"
+                  onClick={() => void store.openComponentHistory()}
+                >
+                  History
+                </button>
+              </span>
+            </div>
+          </div>
+          <div className="code-live" data-testid="code-live" ref={liveRef}>
+            {/* ON THE SEAM, inside the pane it sizes. The live pane is on the
+                RIGHT, so moving the pointer along +x shrinks it. */}
+            <ResizeHandle
+              axis="x"
+              getValue={() => liveRef.current?.getBoundingClientRect().width || store.getState().codeLiveWidth}
+              sign={-1}
+              onChange={(px) => store.setCodeLiveWidth(px, liveCeiling())}
+              onReset={() => store.setCodeLiveWidth(CODE_LIVE_WIDTH.default)}
+              className="code-live-resize"
+              label="Resize the live preview"
+            />
+            <div className="code-live-bar">
+              <span className="code-live-title">Live</span>
+              <span className="code-live-loop" data-testid="code-live-loop">
+                loop {formatDuration(framesToSeconds(frames, fps))}
+              </span>
+            </div>
+            {/* THE COMPONENT ITSELF, and it is a HOLE rather than a component.
+                The stage behind this mode renders the registry component
+                standalone through a synthetic definition, and `measureInset`
+                hands it this element's rect. `aria-hidden` because a screen
+                reader has nothing to read in a GL surface this document does
+                not own. */}
+            <div className="stage-window code-studio-hole" aria-hidden="true" data-testid="code-preview-hole" />
+          </div>
+        </section>
+      </InCell>
+    </>
+  );
+}
+
+/** The file bar's build line: a passing build names its version, a failing
+ *  one says the last good build is still the one playing. */
+function BuildStatus(props: { build: ComponentBuild | undefined }) {
+  const b = props.build;
+  if (b === undefined) return null;
+  if (b.status === "building") {
+    return (
+      <span className="code-build is-building" data-testid="code-build-status">
+        Building…
+      </span>
+    );
+  }
+  if (b.status === "failed") {
+    return (
+      <span className="code-build is-failed" data-testid="code-build-status" title={b.message}>
+        <span className="code-build-dot" aria-hidden="true" />
+        {b.version === undefined ? "Build failed" : `Build failed · v${b.version} still plays`}
+      </span>
+    );
+  }
+  return (
+    <span className="code-build is-built" data-testid="code-build-status">
+      <span className="code-build-dot" aria-hidden="true" />
+      {b.version === undefined ? "Built" : `Built v${b.version}`}
+    </span>
+  );
+}

package/src/panels/code/FileTree.tsx

@@ -0,0 +1,265 @@
+// THE PROJECT'S FILES, as a tree, docked beside the editor in Code Studio's
+// code pane while the file bar's Files toggle is on (CodeStudio.tsx). A head
+// at the bar height, then the list, which is its one scroller: it wears
+// `.rail-scroll`, the left column's scroller recipe, so it is bounded and
+// themed like the outline.
+//
+// ── WHY THE TREE IS DERIVED AND NEVER STORED ────────────────────────────────
+//
+// `GET /api/files` answers a FLAT list of posix paths, and that is the honest
+// shape: the project's directories are an artifact of where the author put
+// things, not a structure the studio owns. Nesting is a way of DRAWING that
+// list. Deriving it per render means a listing that arrives, changes, or
+// truncates can never disagree with the tree on screen, and there is no second
+// copy to invalidate when `files-changed` lands.
+//
+// The cost is one O(n) build per listing change, on at most `LIST_CAP` = 2000
+// entries. That is nothing next to the class of bug it removes.
+//
+// ponytail: every expanded row is a real DOM node, no virtualisation. Fine to
+// the server's own 2000-file cap; if that cap ever rises, this is the thing to
+// window before anything else here.
+//
+// ── WHAT A ROW KNOWS ────────────────────────────────────────────────────────
+//
+// A file row carries three marks and no more: OPEN (it has a buffer), DIRTY
+// (that buffer is unsaved) and GENERATED (the server will refuse to write it).
+// Everything else an author might want here — which component is in it, whether
+// it drifted — already has a home in the library section of the file panel, and
+// duplicating it would make two places to disagree about one fact.
+import { useMemo, useState } from "react";
+import type { CSSProperties } from "react";
+import type { ProjectFile } from "../../api.js";
+import { useShotEditor, useStore } from "../../state/context.js";
+
+/** A directory that starts collapsed. `node_modules` and dotfiles never reach
+ *  the chrome — the server drops them — so this is only about the folders that
+ *  are genuinely output rather than source. */
+const COLLAPSED_BY_DEFAULT = new Set(["out", "dist", "build", "tmp", "coverage"]);
+
+interface DirNode {
+  kind: "dir";
+  name: string;
+  path: string;
+  children: TreeNode[];
+}
+
+interface FileNode {
+  kind: "file";
+  name: string;
+  path: string;
+  generated: boolean;
+}
+
+type TreeNode = DirNode | FileNode;
+
+/**
+ * Fold the flat listing into directories.
+ *
+ * Directories sort before files and both sort by name, which is the order every
+ * file browser has and therefore the only order that does not have to be
+ * learned. The server already sorts its walk, but it interleaves — a flat list
+ * cannot express "folders first" — so the comparison is redone here.
+ */
+function buildTree(files: readonly ProjectFile[]): TreeNode[] {
+  const root: DirNode = { kind: "dir", name: "", path: "", children: [] };
+  const dirs = new Map<string, DirNode>([["", root]]);
+
+  const dirAt = (path: string): DirNode => {
+    const found = dirs.get(path);
+    if (found !== undefined) return found;
+    const cut = path.lastIndexOf("/");
+    const parent = dirAt(cut === -1 ? "" : path.slice(0, cut));
+    const node: DirNode = {
+      kind: "dir",
+      name: path.slice(cut + 1),
+      path,
+      children: [],
+    };
+    dirs.set(path, node);
+    parent.children.push(node);
+    return node;
+  };
+
+  for (const file of files) {
+    const cut = file.path.lastIndexOf("/");
+    const parent = dirAt(cut === -1 ? "" : file.path.slice(0, cut));
+    parent.children.push({
+      kind: "file",
+      name: file.path.slice(cut + 1),
+      path: file.path,
+      generated: file.generated !== undefined,
+    });
+  }
+
+  const sort = (node: DirNode): void => {
+    node.children.sort((a, b) => {
+      if (a.kind !== b.kind) return a.kind === "dir" ? -1 : 1;
+      return a.name < b.name ? -1 : a.name > b.name ? 1 : 0;
+    });
+    for (const child of node.children) if (child.kind === "dir") sort(child);
+  };
+  sort(root);
+  return root.children;
+}
+
+export function FileTree() {
+  const store = useStore();
+  const files = useShotEditor((s) => s.projectFiles);
+  const loaded = useShotEditor((s) => s.projectFilesLoaded);
+  const truncated = useShotEditor((s) => s.projectFilesTruncated);
+  const error = useShotEditor((s) => s.projectFilesError);
+  const tree = useMemo(() => buildTree(files), [files]);
+
+  // COLLAPSE STATE IS THIS PANEL'S, not the store's: it is a posture, it means
+  // nothing to any other surface, and it dies with the mode the way a scroll
+  // position does.
+  const [collapsed, setCollapsed] = useState<ReadonlySet<string>>(new Set());
+  const toggle = (path: string): void => {
+    setCollapsed((was) => {
+      const next = new Set(was);
+      if (!next.delete(path)) next.add(path);
+      return next;
+    });
+  };
+
+  return (
+    <div className="code-tree" data-testid="code-tree">
+      <div className="code-tree-head">
+        <span className="code-tree-title">Files</span>
+        <button
+          type="button"
+          className="btn is-icon"
+          data-testid="code-tree-refresh"
+          title="Re-read the project's files"
+          aria-label="Refresh the file list"
+          onClick={() => void store.refreshProjectFiles()}
+        >
+          ⟳
+        </button>
+      </div>
+      {error !== null ? (
+        <p className="code-tree-empty" role="alert" data-testid="code-tree-error">
+          {error}
+        </p>
+      ) : !loaded ? (
+        <p className="code-tree-empty">Reading the project…</p>
+      ) : tree.length === 0 ? (
+        <p className="code-tree-empty">No editable files in this project.</p>
+      ) : (
+        <ul className="code-tree-list rail-scroll" role="tree" aria-label="Project files">
+          {tree.map((node) => (
+            <TreeRow
+              key={node.path}
+              node={node}
+              depth={0}
+              collapsed={collapsed}
+              onToggle={toggle}
+            />
+          ))}
+        </ul>
+      )}
+      {/* SAID, NEVER SWALLOWED. A file browser that quietly omits files teaches
+          the author their file does not exist. */}
+      {truncated ? (
+        <p className="code-tree-truncated" data-testid="code-tree-truncated">
+          This project has more files than the listing returns. Some are not shown.
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+function TreeRow({
+  node,
+  depth,
+  collapsed,
+  onToggle,
+}: {
+  node: TreeNode;
+  depth: number;
+  collapsed: ReadonlySet<string>;
+  onToggle: (path: string) => void;
+}) {
+  if (node.kind === "dir") {
+    // XOR AGAINST THE DEFAULT, rather than seeding the set: the set is built
+    // before any listing has arrived, so there is nothing to seed it from. The
+    // set therefore holds "the author has toggled this", and a name in the
+    // collapsed-by-default list is open exactly when it has been toggled.
+    // Keyed by full path, so two directories that share a name are independent.
+    const defaultCollapsed = COLLAPSED_BY_DEFAULT.has(node.name);
+    const isCollapsed = collapsed.has(node.path) !== defaultCollapsed;
+    return (
+      <li role="none">
+        <button
+          type="button"
+          className="code-tree-row is-dir"
+          role="treeitem"
+          aria-expanded={!isCollapsed}
+          style={{ "--depth": depth } as CSSProperties}
+          onClick={() => onToggle(node.path)}
+        >
+          <span className="code-tree-caret" aria-hidden="true">
+            {isCollapsed ? "▸" : "▾"}
+          </span>
+          <span className="code-tree-name">{node.name}</span>
+        </button>
+        {isCollapsed ? null : (
+          <ul className="code-tree-list" role="group">
+            {node.children.map((child) => (
+              <TreeRow
+                key={child.path}
+                node={child}
+                depth={depth + 1}
+                collapsed={collapsed}
+                onToggle={onToggle}
+              />
+            ))}
+          </ul>
+        )}
+      </li>
+    );
+  }
+  return <FileRow node={node} depth={depth} />;
+}
+
+function FileRow({ node, depth }: { node: FileNode; depth: number }) {
+  const store = useStore();
+  const active = useShotEditor((s) => s.codeActive === node.path);
+  const buffer = useShotEditor((s) => s.codeFiles[node.path]);
+  const isSubject = useShotEditor(
+    (s) => s.library.find((r) => r.id === s.codeComponent)?.rel === node.path,
+  );
+  const dirty = buffer !== undefined && buffer.content !== buffer.savedContent;
+  return (
+    <li role="none">
+      <button
+        type="button"
+        className="code-tree-row is-file"
+        role="treeitem"
+        aria-selected={active}
+        data-active={active ? "" : undefined}
+        data-open={buffer !== undefined ? "" : undefined}
+        data-testid={`code-tree-file-${node.path}`}
+        title={node.generated ? `${node.path}: generated, read-only` : node.path}
+        style={{ "--depth": depth } as CSSProperties}
+        onClick={() => void store.openCodeFile(node.path)}
+      >
+        <span className="code-tree-name">{node.name}</span>
+        {/* THE SUBJECT MARK, so the one file the stage is drawing is findable
+            in a tree of two hundred. */}
+        {isSubject ? (
+          <span className="code-tree-mark is-subject" title="The component in the preview">
+            ●
+          </span>
+        ) : null}
+        {node.generated ? (
+          <span className="code-tree-mark is-generated" title="Generated, read-only">
+            ⌁
+          </span>
+        ) : null}
+        {dirty ? <span className="code-tree-mark is-dirty" title="Unsaved changes" /> : null}
+      </button>
+    </li>
+  );
+}