@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/studio/ComponentsHome.tsx

@@ -0,0 +1,318 @@
+// ALL COMPONENTS (C5): the Components home, in the canvas cell while no
+// component is open. Every component this Project has, then the ones every
+// Project of the workspace offers, as cards:
+//
+//   THIS PROJECT    its Studio-made definitions, then the code files made for
+//                   it, then the code components it uses (`componentsListOf`),
+//                   and the dashed New card
+//   YOUR LIBRARY    code made for no Project, Dailies Library installs, and
+//                   what someone added with "In your library"
+//                   (`libraryComponentsOf`)
+//
+// A card is a poster at rest and a live loop on hover or focus, through the
+// board's one live preview (`ComponentStage`, with its poster cache and its
+// `LIVE_CAP` budget), so a wall of cards costs pictures, not documents. A card
+// the stage cannot draw (a dom component, or a library definition whose body
+// lives in another Project) shows its kind's icon instead.
+//
+// The search is the canvas bar's (ComponentsPreview.tsx), and it filters the
+// left column's list too, so one field filters both.
+//
+// An MCP agent writing a component's file shows its dots on that card
+// (state/agentActivity.ts), so its work appears as it happens.
+import { useEffect, useMemo, useState } from "react";
+import type { ReactNode } from "react";
+import { IconCode } from "@dailies-studio/ui";
+import { componentUsesOf } from "@dailies-studio/shot/doc";
+import type { Doc3D, ReferenceItem3D } from "@dailies-studio/shot/doc";
+import { CUBE_ICON } from "../../icons.js";
+import { useShotEditor, useStore } from "../../state/context.js";
+import { componentsListOf, libraryComponentsOf, libraryEntryName, libraryHomeLabel } from "../../state/workspace.js";
+import type { ComponentsListRow } from "../../state/workspace.js";
+import { useCodeBufferGuard } from "../code/codeBufferGuard.js";
+import { ComponentStage } from "../storyboard/ComponentStage.js";
+import { workspaceRowTitle } from "./ComponentLibraryRail.js";
+import { agentWriting } from "../../state/agentActivity.js";
+import { AgentDots, useAgentActivity } from "../agent/AgentDots.js";
+
+type CardItem = Extract<ReferenceItem3D, { type: "component" }>;
+
+/** The two sections' rows, filtered by the search, and their full counts for
+ *  the bar's "N in this project · M in your library". */
+export function useHomeRows(doc: Doc3D, query: string) {
+  const library = useShotEditor((s) => s.library);
+  const workspace = useShotEditor((s) => s.workspaceComponents);
+  const homes = useShotEditor((s) => s.componentHomes);
+  const rows = useMemo(() => componentsListOf(doc, library), [doc, library]);
+  const mine = useMemo(
+    () => libraryComponentsOf(doc, library, workspace, homes, rows),
+    [doc, library, workspace, homes, rows],
+  );
+  const needle = query.trim().toLowerCase();
+  const matches = (name: string): boolean => needle.length === 0 || name.toLowerCase().includes(needle);
+  return {
+    project: rows.filter((r) => matches(r.name)),
+    library: mine.filter((entry) => matches(libraryEntryName(entry))),
+    projectCount: rows.length,
+    libraryCount: mine.length,
+  };
+}
+
+export function ComponentsHome(props: { doc: Doc3D; query: string }) {
+  const store = useStore();
+  const readOnly = useShotEditor((s) => s.readOnly);
+  const { guard, dialog } = useCodeBufferGuard();
+  const rows = useHomeRows(props.doc, props.query);
+  // ONE WALK of the document for every card's where line.
+  const uses = useMemo(() => componentUsesOf(props.doc), [props.doc]);
+  const usedIn = (row: ComponentsListRow): number =>
+    uses.filter((u) => (row.sel.kind === "studio" ? u.def === row.sel.def : u.component === row.sel.module)).length;
+  const searching = props.query.trim().length > 0;
+  const activity = useAgentActivity();
+  const library = useShotEditor((s) => s.library);
+  /** The agent writing a code row's file, if one is. */
+  const writerOf = (module: string | null): string | null => {
+    const rel = module === null ? null : (library.find((r) => r.id === module)?.rel ?? null);
+    return agentWriting(activity, rel, module)?.name ?? null;
+  };
+
+  // Your library reads the workspace list and its homes once per visit, and
+  // the store reads them again as other Projects' writes arrive (`rereadHomes`).
+  useEffect(() => {
+    void store.refreshWorkspaceComponents();
+  }, [store]);
+
+  return (
+    <div className="components-home" data-testid="components-home">
+      {dialog}
+      <section className="components-home-section" aria-label="This project">
+        <h2 className="components-section-title">This project</h2>
+        <div className="components-home-grid" data-testid="components-home-project">
+          {rows.project.map((r) => {
+            const sel = r.sel;
+            const n = usedIn(r);
+            const writer = writerOf(sel.kind === "code" ? sel.module : null);
+            return (
+              <HomeCard
+                key={sel.kind === "studio" ? sel.def : sel.module}
+                kind={sel.kind}
+                name={r.name}
+                writer={writer}
+                where={
+                  r.refusal ??
+                  (writer !== null ? `${writer} is writing it` : n === 0 ? "Not used yet" : `Used in ${n} ${n === 1 ? "place" : "places"}`)
+                }
+                title={r.refusal ?? `Open ${r.name}`}
+                refused={r.refusal !== null}
+                stage={(live) => (r.refusal === null ? <ProjectStage doc={props.doc} row={r} live={live} /> : null)}
+                onOpen={() => {
+                  if (r.refusal !== null) {
+                    store.reportError(r.refusal);
+                    return;
+                  }
+                  void store.selectComponent(sel);
+                }}
+              />
+            );
+          })}
+          {searching ? null : <NewCard readOnly={readOnly} />}
+        </div>
+        {searching && rows.project.length === 0 ? (
+          <p className="insp-empty">No component in this project matches “{props.query.trim()}”.</p>
+        ) : null}
+      </section>
+      <section className="components-home-section" aria-label="Your library">
+        <h2 className="components-section-title">Your library</h2>
+        {rows.library.length === 0 ? (
+          <p className="insp-empty">
+            {searching
+              ? `No component in your library matches “${props.query.trim()}”.`
+              : "Code made for no Project, Dailies Library installs and components you add to your library show here."}
+          </p>
+        ) : (
+          <div className="components-home-grid" data-testid="components-home-library">
+            {rows.library.map((entry) => {
+              if (entry.kind === "studio") {
+                const c = entry.component;
+                return (
+                  <HomeCard
+                    key={c.id}
+                    kind="studio"
+                    name={c.name}
+                    where={libraryHomeLabel(entry)}
+                    title={workspaceRowTitle(entry)}
+                    refused={false}
+                    stage={() => null}
+                    onOpen={() => {
+                      if (readOnly) return;
+                      guard(() => void store.addLibraryComponent(c.id));
+                    }}
+                  />
+                );
+              }
+              const { module, refusal } = entry;
+              return (
+                <HomeCard
+                  key={module}
+                  kind="code"
+                  name={entry.name}
+                  where={libraryHomeLabel(entry)}
+                  title={refusal ?? workspaceRowTitle(entry)}
+                  refused={refusal !== null}
+                  stage={(live) =>
+                    refusal === null ? <LibraryStage doc={props.doc} module={module} name={entry.name} live={live} /> : null
+                  }
+                  onOpen={() => {
+                    if (refusal !== null) {
+                      store.reportError(refusal);
+                      return;
+                    }
+                    // OPENED, NOTHING MORE: no record and no membership. It
+                    // stays where it lists until someone ticks a box.
+                    guard(() => void store.openCodeComponent(module));
+                  }}
+                />
+              );
+            })}
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}
+
+/** One card: the picture, then the name, the kind badge and the where line.
+ *  The picture goes live while the pointer or focus is on the card. */
+function HomeCard(props: {
+  kind: "studio" | "code";
+  name: string;
+  where: string;
+  title: string;
+  refused: boolean;
+  /** The agent writing it, whose dots the card shows. */
+  writer?: string | null;
+  stage: (live: boolean) => ReactNode;
+  onOpen: () => void;
+}) {
+  const [hot, setHot] = useState(false);
+  const icon = (
+    <span className="components-home-icon" aria-hidden="true">
+      {props.kind === "code" ? <IconCode /> : CUBE_ICON}
+    </span>
+  );
+  return (
+    <button
+      type="button"
+      className="components-home-card"
+      data-testid="components-home-card"
+      aria-disabled={props.refused || undefined}
+      title={props.title}
+      onClick={props.onOpen}
+      onPointerEnter={() => setHot(true)}
+      onPointerLeave={() => setHot(false)}
+      onFocus={() => setHot(true)}
+      onBlur={() => setHot(false)}
+    >
+      <span className="components-home-poster">{props.stage(hot) ?? icon}</span>
+      <span className="components-home-foot">
+        <span className="components-home-name">{props.name}</span>
+        {props.writer === null || props.writer === undefined ? null : <AgentDots label={`${props.writer} is writing ${props.name}`} />}
+        <span className="components-item-kind">{props.kind === "code" ? "CODE" : "3D"}</span>
+      </span>
+      <span className="components-home-where">{props.where}</span>
+    </button>
+  );
+}
+
+/** A card of this Project: a definition's closure, or a three code component. */
+function ProjectStage(props: { doc: Doc3D; row: ComponentsListRow; live: boolean }) {
+  const { sel, name } = props.row;
+  const module = sel.kind === "code" ? sel.module : null;
+  const item = useMemo<CardItem>(
+    () =>
+      sel.kind === "studio"
+        ? { type: "component", id: `home:${sel.def}`, label: name, def: sel.def, props: {} }
+        : { type: "component", id: `home:${sel.module}`, label: name, component: sel.module, props: {} },
+    [sel, name],
+  );
+  return <CodeAwareStage doc={props.doc} item={item} module={module} live={props.live} />;
+}
+
+/** A Your library code card. A library definition's body lives in its home
+ *  Project until Use here copies it in, so its card keeps the icon and never
+ *  comes here. */
+function LibraryStage(props: { doc: Doc3D; module: string; name: string; live: boolean }) {
+  const { module, name } = props;
+  const item = useMemo<CardItem>(
+    () => ({ type: "component", id: `home:${module}`, label: name, component: module, props: {} }),
+    [module, name],
+  );
+  return <CodeAwareStage doc={props.doc} item={item} module={module} live={props.live} />;
+}
+
+/** The board's preview, with what a code component needs: its registry row,
+ *  its contract (loaded once the card goes live) and the catalog's length. */
+function CodeAwareStage(props: { doc: Doc3D; item: CardItem; module: string | null; live: boolean }) {
+  const store = useStore();
+  const { module, live } = props;
+  const row = useShotEditor((s) => (module === null ? undefined : s.library.find((r) => r.id === module)));
+  const contract = useShotEditor((s) => (module === null ? undefined : s.contracts[module]));
+  const lengthFrames = useShotEditor((s) =>
+    module === null ? undefined : s.libraryCatalog.find((r) => r.installedAs === module)?.lengthFrames,
+  );
+  useEffect(() => {
+    if (live && module !== null) void store.loadContract(module);
+  }, [live, module, store]);
+  if (module !== null && row?.host !== "three") return null;
+  return (
+    <ComponentStage
+      doc={props.doc}
+      item={props.item}
+      contract={contract}
+      availability={row?.contractAvailability}
+      lengthFrames={lengthFrames}
+      live={live}
+      fallback={
+        <span className="components-home-icon" aria-hidden="true">
+          {module === null ? CUBE_ICON : <IconCode />}
+        </span>
+      }
+    />
+  );
+}
+
+/** The dashed card: a new component, Studio-made or code. It opens in
+ *  Components, never in a Shot. */
+function NewCard(props: { readOnly: boolean }) {
+  const store = useStore();
+  const { guard, dialog } = useCodeBufferGuard();
+  return (
+    <div className="components-home-card is-new" data-testid="components-home-new">
+      {dialog}
+      <span className="components-home-new-title">New component</span>
+      <span className="components-home-where">Studio-made or code</span>
+      <span className="components-home-new-verbs">
+        <button
+          type="button"
+          className="btn"
+          data-testid="components-home-new-studio"
+          disabled={props.readOnly}
+          title="A Studio-made component, built from layers"
+          onClick={() => guard(() => store.createEmptyComponent("Component"))}
+        >
+          Studio-made
+        </button>
+        <button
+          type="button"
+          className="btn"
+          data-testid="components-home-new-code"
+          disabled={props.readOnly}
+          title="A code component from the three starter"
+          onClick={() => guard(() => void store.newCodeComponent("Component"))}
+        >
+          Code
+        </button>
+      </span>
+    </div>
+  );
+}

package/src/panels/studio/ComponentsPreview.tsx

@@ -0,0 +1,179 @@
+// COMPONENTS, ON ITS HOME AND ITS PREVIEW TAB.
+//
+// The Components workspace (`workspaceOf`) is every component of the Project,
+// standalone, never inside a Shot. With nothing open it is the home, All
+// components (C5). With a component open it has two tabs: Edit is the studio
+// that edits it (ComponentStudio.tsx for a definition, CodeStudio.tsx for
+// code); Preview is this file, the same cells with the studio taken out.
+//
+//   LEFT     which component (ComponentLibraryRail.tsx), both kinds
+//   CENTRE   the home's cards (ComponentsHome.tsx), or the subject as a HOLE
+//            onto the stage with the loop transport (`PreviewTransport`), or
+//            Every use (C4) while the crumb's "used in N places" has it open
+//   BAR      the way back (Back to Shot when a Shot door opened it, C7), then
+//            the home's count, search and New, or the breadcrumb, Preview |
+//            Edit and the zoom
+//
+// No timeline on this tab (`componentsHideTimeline`): the transport under the
+// stage is the clock.
+//
+// The subject stays in the stage's component context across the tab swap, so
+// the hole is the same render the studio shows, and code buffers survive it.
+import { useEffect, useRef, useState } from "react";
+import { instanceExportOf } from "@dailies-studio/shot/doc";
+import type { Doc3D } from "@dailies-studio/shot/doc";
+import { useShotEditor, useStore } from "../../state/context.js";
+import { usesViewOf, workspaceOf } from "../../state/workspace.js";
+import { useCodeBufferGuard } from "../code/codeBufferGuard.js";
+import { InCell } from "../stage/cellSlots.js";
+import { ComponentLibraryRail } from "./ComponentLibraryRail.js";
+import { ComponentsTabSwitch, StudioZoom } from "./ComponentStudio.js";
+import { ComponentCrumb, ComponentsBack, PreviewTransport } from "./componentParts.js";
+import { ComponentsHome, useHomeRows } from "./ComponentsHome.js";
+import { EveryUse } from "./EveryUse.js";
+
+export function ComponentsPreview() {
+  const store = useStore();
+  const doc = useShotEditor((s) => s.doc);
+  const editingDef = useShotEditor((s) => s.editingDef);
+  const codeComponent = useShotEditor((s) => s.codeComponent);
+  const library = useShotEditor((s) => s.library);
+  const usesOpen = useShotEditor((s) => usesViewOf(s) !== null);
+  // THIS FILE'S CELLS: Components with nothing open (the home), or with a
+  // subject on the Preview tab.
+  const shown = useShotEditor(
+    (s) =>
+      workspaceOf(s) === "components" &&
+      (s.componentsTab === "preview" || (s.codeComponent === null && s.editingDef === null)),
+  );
+  // Leaving drops a code component's buffers, so unsaved text asks first.
+  const { guard, dialog } = useCodeBufferGuard();
+  // ONE SEARCH for the home's cards and the left column's list. On the home
+  // its field is the bar's, and the column draws none.
+  const [query, setQuery] = useState("");
+
+  // AN ESCAPE FOR CODE ON THIS TAB: the keymap's code rung hands it here
+  // (`codeBackRequest`), as it does to CodeStudio on the Edit tab. A request
+  // made while this tab is not up is marked seen, so swapping tabs never
+  // answers a stale one.
+  const backRequest = useShotEditor((s) => s.codeBackRequest);
+  const seen = useRef<object | null>(null);
+  useEffect(() => {
+    if (backRequest === seen.current) return;
+    seen.current = backRequest;
+    if (!shown || backRequest === null || store.getState().codeComponent === null) return;
+    guard(() => (store.getState().componentsOrigin !== null ? void store.backToShot() : store.leaveComponents()));
+  }, [shown, backRequest, guard, store]);
+
+  if (!shown || doc === null) return null;
+
+  const def = editingDef === null ? undefined : doc.components?.[editingDef];
+  const subject =
+    codeComponent !== null
+      ? { kind: "code" as const, module: codeComponent }
+      : def !== undefined
+        ? { kind: "studio" as const, def: def.id }
+        : null;
+  const name =
+    codeComponent !== null
+      ? (library.find((r) => r.id === codeComponent)?.name ?? instanceExportOf(codeComponent))
+      : (def?.name ?? "Components");
+
+  return (
+    <>
+      {dialog}
+      <InCell name="left">
+        <ComponentLibraryRail doc={doc} current={subject} query={query} onQuery={setQuery} />
+      </InCell>
+
+      <InCell name="centre">
+        {subject === null ? (
+          <ComponentsHome doc={doc} query={query} />
+        ) : usesOpen ? (
+          <EveryUse />
+        ) : (
+          // THE COMPONENT ITSELF, a hole like the studios' (`.stage-window`):
+          // no paint, no pointer, so a drag on the subject orbits the stage.
+          // The transport under it paints and takes its own pointer.
+          <>
+            <div className="stage-window components-preview-hole" aria-hidden="true" data-testid="components-preview-hole" />
+            <PreviewTransport />
+          </>
+        )}
+      </InCell>
+
+      <InCell name="bar">
+        <div className="component-studio-bar" role="group" aria-label={name} data-testid="components-preview">
+          <ComponentsBack testId="components-back" guard={guard} />
+          {subject === null ? (
+            <HomeBar query={query} onQuery={setQuery} />
+          ) : (
+            <ComponentCrumb
+              sel={subject}
+              name={
+                <span className="component-studio-name is-label" title={name}>
+                  {name}
+                </span>
+              }
+            />
+          )}
+          {subject === null ? null : (
+            <div className="component-studio-tools">
+              <ComponentsTabSwitch />
+              <StudioZoom />
+            </div>
+          )}
+        </div>
+      </InCell>
+
+    </>
+  );
+}
+
+/** The home's bar (C5): "All components", the two counts, the search and
+ *  New component. New makes an empty master and opens it here, on its Edit
+ *  tab, never in a Shot. */
+function HomeBar(props: { query: string; onQuery: (q: string) => void }) {
+  const store = useStore();
+  const doc = useShotEditor((s) => s.doc);
+  const readOnly = useShotEditor((s) => s.readOnly);
+  if (doc === null) return null;
+  return (
+    <>
+      <span className="component-studio-name is-label">All components</span>
+      <HomeCounts doc={doc} />
+      <div className="component-studio-tools">
+        <label className="components-home-search">
+          <input
+            type="search"
+            value={props.query}
+            placeholder="Search components"
+            aria-label="Search components"
+            data-testid="components-home-search"
+            onChange={(e) => props.onQuery(e.target.value)}
+          />
+        </label>
+        <button
+          type="button"
+          className="btn is-primary"
+          data-testid="components-new"
+          disabled={readOnly}
+          title="A new Studio-made component, opened here"
+          onClick={() => store.createEmptyComponent("Component")}
+        >
+          + New component
+        </button>
+      </div>
+    </>
+  );
+}
+
+function HomeCounts(props: { doc: Doc3D }) {
+  const rows = useHomeRows(props.doc, "");
+  return (
+    <span className="components-home-counts" data-testid="components-home-counts">
+      {rows.projectCount} in this project · {rows.libraryCount} in your library
+    </span>
+  );
+}
+