@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/studio/ComponentSidePanel.tsx

@@ -0,0 +1,355 @@
+// THE COMPONENTS RIGHT PANEL'S OWN PARTS (C1, C2): the three ways out (Add to
+// storyboard, Share, Use in a shot) and where the component lists (Made for
+// this project, In your library) over the props, History in place of the
+// props while it is open, and the footer that says whose it is and which
+// version is live. InspectorPanel puts them around its definition and code
+// branches while Components is the workspace; InspectorFooter shows the footer.
+import { useEffect, useRef, useState } from "react";
+import { Avatar } from "@dailies-studio/ui";
+import { componentFilesOf, instanceModuleOf } from "@dailies-studio/shot/doc";
+import type { Doc3D } from "@dailies-studio/shot/doc";
+import type { WorkspaceComponentVersion, WorkspaceComponentVersionInfo } from "../../api.js";
+import { useShotEditor, useStore } from "../../state/context.js";
+import { shotNumberOf } from "../../state/storyboardModel.js";
+import type { ComponentsSelection } from "../../state/types.js";
+import { componentsSubject, libraryRuleOf, readOnlyReason } from "../../state/workspace.js";
+import { shortAgo } from "../comments/parts.js";
+import { useSignedIn } from "../header/AccountAvatar.js";
+import { ShareComponentDialog } from "../share/ShareComponentDialog.js";
+import { useSubjectRow, useSubjectVersions } from "./componentParts.js";
+
+/** One option per Shot, numbered as the board numbers it. */
+function shotOptions(doc: Doc3D): { id: string; label: string }[] {
+  return doc.scenes.flatMap((id, i) => {
+    const scene = doc.scenesById[id];
+    if (scene === undefined) return [];
+    const number = shotNumberOf(doc, id) ?? String(i + 1).padStart(2, "0");
+    return [{ id, label: `${number} ${scene.name}` }];
+  });
+}
+
+/** The actions block: Add to storyboard (as Style; the board pins it to a
+ *  Shot from there), Share, Use in a shot, and where it lists. */
+export function ComponentActions() {
+  const store = useStore();
+  const doc = useShotEditor((s) => s.doc);
+  const readOnly = useShotEditor((s) => s.readOnly);
+  const codeComponent = useShotEditor((s) => s.codeComponent);
+  const editingDef = useShotEditor((s) => s.editingDef);
+  const [added, setAdded] = useState<string | null>(null);
+  if (doc === null) return null;
+  const subject = componentsSubject({ codeComponent, editingDef });
+  const shots = shotOptions(doc);
+  const add = async (): Promise<void> => {
+    if (await store.addComponentToStoryboard(null)) setAdded("On the board as Style.");
+  };
+  return (
+    <div className="components-actions" data-testid="components-actions">
+      <ShareComponentDialog />
+      <div className="components-actions-row">
+        <button
+          type="button"
+          className="components-add-board"
+          data-testid="components-add-board"
+          disabled={readOnly}
+          title="Put this component on the Storyboard"
+          onClick={() => void add()}
+        >
+          Add to storyboard
+        </button>
+        <button
+          type="button"
+          className="components-share-button"
+          data-testid="components-share"
+          title="Share this component"
+          onClick={() => store.openShareComponent()}
+        >
+          Share
+        </button>
+      </div>
+      <label className="components-field">
+        <span className="components-field-label">Use in a shot</span>
+        <select
+          className="select"
+          data-testid="components-use-in-shot"
+          value=""
+          disabled={readOnly || shots.length === 0}
+          onChange={(e) => {
+            const id = e.currentTarget.value;
+            if (id !== "") void store.placeComponentInShot(id);
+          }}
+        >
+          <option value="">{shots.length === 0 ? "No shots yet" : "Pick a shot"}</option>
+          {shots.map((s) => (
+            <option key={s.id} value={s.id}>
+              {s.label}
+            </option>
+          ))}
+        </select>
+      </label>
+      {subject === null ? null : <ComponentMembership doc={doc} sel={subject} />}
+      {added === null ? null : (
+        <p className="components-actions-note" role="status" data-testid="components-added">
+          {added}
+        </p>
+      )}
+    </div>
+  );
+}
+
+/** Every Project in this workspace lists a component the library holds. */
+const IN_LIBRARY_NOTE = "Every Project in this workspace lists it under Your library.";
+
+/**
+ * Where the component lists: "Made for this project" (code only: its file is
+ * in `componentFiles`, so it lists under This project with no shot using it)
+ * and "In your library" (its workspace row's `library` flag). Two rows and
+ * ONE note: the reason the library box is ticked by rule, else what a tick
+ * means. A box that cannot change is `aria-disabled`, still pressable, and a
+ * press says why in the error line: a viewer's refusal, the rule, or that the
+ * lists are still loading.
+ */
+function ComponentMembership(props: { doc: Doc3D; sel: ComponentsSelection }) {
+  const store = useStore();
+  const { doc, sel } = props;
+  const viewer = useShotEditor((s) => (s.readOnly ? readOnlyReason(s) : null));
+  const library = useShotEditor((s) => s.library);
+  const workspace = useShotEditor((s) => s.workspaceComponents);
+  const homes = useShotEditor((s) => s.componentHomes);
+  const row = useSubjectRow();
+  // A definition's Edit tab shows its layers where the rail would be, so
+  // nothing else may have read the lists yet.
+  useEffect(() => {
+    const s = store.getState();
+    if (s.workspaceComponents === null || s.componentHomes === null) void store.refreshWorkspaceComponents();
+  }, [store]);
+  const rel = sel.kind === "code" ? instanceModuleOf(sel.module) : null;
+  const made = rel !== null && componentFilesOf(doc).includes(rel);
+  const reading = workspace === null || homes === null;
+  const rule = workspace === null || homes === null ? null : libraryRuleOf(doc, sel, library, workspace, homes);
+  const inLibrary = !reading && (rule !== null || row?.library === true);
+  const libraryRefusal = viewer ?? (reading ? "Your library is still loading." : rule);
+  const note = reading
+    ? "Reading…"
+    : (rule ?? (inLibrary ? IN_LIBRARY_NOTE : rel !== null ? "Listed here even when no shot uses it." : null));
+  return (
+    <div className="components-membership" data-testid="components-membership">
+      {rel === null ? null : (
+        <label className="components-membership-row">
+          <input
+            type="checkbox"
+            className="checkbox"
+            data-testid="components-made-here"
+            checked={made}
+            aria-disabled={viewer === null ? undefined : true}
+            onChange={() => {
+              if (viewer !== null) {
+                store.reportError(viewer);
+                return;
+              }
+              const out = store.setComponentFile(rel, !made);
+              if (!out.ok) store.reportError(out.reason);
+            }}
+          />
+          <span>Made for this project</span>
+        </label>
+      )}
+      <label className="components-membership-row">
+        <input
+          type="checkbox"
+          className="checkbox"
+          data-testid="components-in-library"
+          checked={inLibrary}
+          aria-disabled={libraryRefusal === null ? undefined : true}
+          onChange={() => {
+            if (libraryRefusal !== null) {
+              store.reportError(libraryRefusal);
+              return;
+            }
+            void store.setComponentInLibrary(sel, !inLibrary);
+          }}
+        />
+        <span>In your library</span>
+      </label>
+      {note === null ? null : (
+        <p className="insp-note" data-testid="components-membership-note">
+          {note}
+        </p>
+      )}
+    </div>
+  );
+}
+
+/** History, in the props' place: every recorded version, newest first, with
+ *  a read-only view of one and Restore. */
+export function ComponentHistory() {
+  const store = useStore();
+  const viewing = useShotEditor((s) => s.componentHistory?.viewing ?? null);
+  const readOnly = useShotEditor((s) => s.readOnly);
+  const row = useSubjectRow();
+  const versions = useSubjectVersions();
+  // History is one component's: picking another closes it.
+  const subjectKey = useShotEditor((s) => `${s.codeComponent ?? ""}|${s.editingDef ?? ""}`);
+  const openedOn = useRef(subjectKey);
+  useEffect(() => {
+    if (subjectKey !== openedOn.current) store.closeComponentHistory();
+  }, [store, subjectKey]);
+  return (
+    <section className="components-history" data-testid="components-history" aria-label="History">
+      <div className="components-history-head">
+        {viewing === null ? (
+          <h3 className="components-history-title">History</h3>
+        ) : (
+          <button
+            type="button"
+            className="components-history-back"
+            data-testid="components-history-back"
+            onClick={() => void store.viewComponentVersion(null)}
+          >
+            All versions
+          </button>
+        )}
+        <button
+          type="button"
+          className="components-history-done"
+          data-testid="components-history-close"
+          onClick={() => store.closeComponentHistory()}
+        >
+          Done
+        </button>
+      </div>
+      {viewing !== null ? (
+        <VersionView version={viewing} current={row?.version} readOnly={readOnly} />
+      ) : row === undefined ? (
+        <p className="insp-empty" data-testid="components-history-empty">
+          No versions yet. A version is recorded when the component builds or when you leave Edit.
+        </p>
+      ) : versions === undefined ? (
+        <p className="insp-empty">Reading the versions…</p>
+      ) : (
+        <ol className="components-history-list" data-testid="components-history-list">
+          {versions.map((v) => (
+            <VersionRow key={v.version} info={v} current={v.version === row.version} readOnly={readOnly} />
+          ))}
+        </ol>
+      )}
+    </section>
+  );
+}
+
+function VersionRow(props: { info: WorkspaceComponentVersionInfo; current: boolean; readOnly: boolean }) {
+  const store = useStore();
+  const v = props.info;
+  return (
+    <li className={`components-history-row${props.current ? " is-current" : ""}`} data-testid="components-history-row">
+      <span className="components-history-version">v{v.version}</span>
+      <span className="components-history-when" title={new Date(v.createdAt).toLocaleString()}>
+        {props.current ? "live" : shortAgo(v.createdAt)}
+      </span>
+      <button
+        type="button"
+        className="components-history-verb"
+        data-testid="components-history-view"
+        onClick={() => void store.viewComponentVersion(v.version)}
+      >
+        View
+      </button>
+      <button
+        type="button"
+        className="components-history-verb"
+        data-testid="components-history-restore"
+        disabled={props.current || props.readOnly}
+        title={props.current ? "This is the live version" : `Make v${v.version} the live version`}
+        onClick={() => void store.restoreComponentVersion(v.version)}
+      >
+        Restore
+      </button>
+    </li>
+  );
+}
+
+/** One version, read-only: a code version's files, a Studio version's props. */
+function VersionView(props: { version: WorkspaceComponentVersion; current: number | undefined; readOnly: boolean }) {
+  const store = useStore();
+  const v = props.version;
+  const payload = v.payload;
+  return (
+    <div className="components-history-view" data-testid="components-history-viewing">
+      <div className="components-history-row is-head">
+        <span className="components-history-version">v{v.version}</span>
+        <span className="components-history-when">{v.name}</span>
+        <button
+          type="button"
+          className="components-history-verb"
+          data-testid="components-history-restore"
+          disabled={v.version === props.current || props.readOnly}
+          onClick={() => void store.restoreComponentVersion(v.version)}
+        >
+          Restore
+        </button>
+      </div>
+      {payload.kind === "code" ? (
+        payload.files.map((f) => (
+          <figure key={f.path} className="components-history-file">
+            <figcaption className="components-history-path">{f.path}</figcaption>
+            <pre className="components-history-code" data-testid="components-history-code">
+              {f.content}
+            </pre>
+          </figure>
+        ))
+      ) : (
+        <p className="components-history-props" data-testid="components-history-props">
+          {v.propKeys.length === 0 ? "No props." : `Props: ${v.propKeys.join(", ")}`}
+        </p>
+      )}
+    </div>
+  );
+}
+
+/** "Made by you · private · vN": who made it, who can see it, and which
+ *  version is live. A code component adds "saved" once nothing is unsaved. */
+export function ComponentFooter() {
+  const store = useStore();
+  const codeComponent = useShotEditor((s) => s.codeComponent);
+  const editingDef = useShotEditor((s) => s.editingDef);
+  const subject = componentsSubject({ codeComponent, editingDef });
+  const dirty = useShotEditor((s) => Object.values(s.codeFiles).some((f) => f.content !== f.savedContent));
+  const readOnly = useShotEditor((s) => s.readOnly);
+  const row = useSubjectRow();
+  const me = useSignedIn();
+  if (subject === null) return null;
+  const meta = ["private", ...(row === undefined ? [] : [`v${row.version}`]), ...(subject.kind === "code" && !dirty ? ["saved"] : [])];
+  return (
+    <footer className="inspector-footer components-footer" data-testid="components-footer">
+      <Avatar url={null} label={me?.name ?? ""} className="components-footer-avatar" />
+      <span className="components-footer-who">Made by you</span>
+      <span className="components-footer-meta" data-testid="components-footer-meta">
+        {meta.join(" · ")}
+      </span>
+      {/* A code component has Remix and History in its status footer. */}
+      {subject.kind === "studio" ? (
+        <span className="components-footer-verbs">
+          <button
+            type="button"
+            className="code-status-verb"
+            data-testid="studio-remix"
+            disabled={readOnly}
+            title="Make your own copy of this component. The original stays as it was."
+            onClick={() => void store.remixComponent()}
+          >
+            Remix
+          </button>
+          <button
+            type="button"
+            className="code-status-verb"
+            data-testid="studio-history"
+            title="Every recorded version of this component"
+            onClick={() => void store.openComponentHistory()}
+          >
+            History
+          </button>
+        </span>
+      ) : null}
+    </footer>
+  );
+}

package/src/panels/studio/ComponentStudio.tsx

@@ -0,0 +1,243 @@
+// THE COMPONENT STUDIO: Components' Edit tab for a Studio-made definition
+// (mock C6), the definition standalone in the docked frame.
+//
+// A definition is not a property of the shot it happens to sit in. It is a
+// module: it has its own canvas, its own clock, its own named actions and its
+// own published surface, and every one of those is a thing an author works on
+// for a while rather than glances at. So it gets the canvas, and the frame
+// around the canvas says what it is:
+//
+//   the LEFT COLUMN   how it is built: the Files panel's LAYERS outline,
+//                     scoped to the definition, under "All components"
+//                     (FilePanel.tsx; `.is-component-edit` in component.css
+//                     keeps it in place of the mode slot)
+//   the CANVAS        it, standalone, through a HOLE onto the stage, with the
+//                     tool footer under it (`toolFooterShown`)
+//   the CANVAS BAR    the way back, its name (the rename), Preview | Edit,
+//                     and the zoom over its render
+//   the RIGHT COLUMN  the inspector: the definition's published surface
+//                     (`DefinitionSection`) with nothing selected, a selected
+//                     layer's sections otherwise
+//   the BOTTOM ROW    its own clock: the timeline's definition fork (def-local
+//                     ruler, Actions rows) and the dock's one transport
+//
+// ── ONE SUBTREE, PORTALLED INTO THE CELLS ────────────────────────────────
+//
+// App mounts this inside its PanelBoundary as before; it renders nothing into
+// the shell itself. Each part goes into its cell's slot through `InCell`
+// (panels/stage/cellSlots.tsx), so the rename prompt and the zoom stay one
+// React subtree. It portals only on its own tab, so no other mode can be
+// filling the same cells.
+//
+// ── WHY THE CANVAS IS A HOLE ─────────────────────────────────────────────
+//
+// The stage iframe behind the shell renders the open definition standalone
+// (no scene, no scene camera, no post), and `measureInset` hands it the hole's
+// rect to fit into. So what is on screen is the real component under the real
+// renderer, which is the only way "preview === export" can hold for a thing
+// the author is about to place in fifteen shots.
+import { useEffect } from "react";
+import { IconMinus, IconPlus, SegmentedControl, usePrompt } from "@dailies-studio/ui";
+import { useShotEditor, useStore } from "../../state/context.js";
+import type { ComponentsTab } from "../../state/types.js";
+import { componentEditOpen } from "../../state/workspace.js";
+import { InCell } from "../stage/cellSlots.js";
+import { ComponentCrumb, ComponentsBack } from "./componentParts.js";
+
+/** No buffers to lose on this tab: the way back never asks. */
+const NO_GUARD = (then: () => void): void => then();
+
+/** One press of the zoom. Multiplicative, because the control is a scale: a
+ *  fixed ±0.25 step is a quarter of the picture near 1x and a whole doubling
+ *  near 0.25x. The store owns the [0.25, 4] clamp. */
+const ZOOM_STEP = 1.25;
+
+export function ComponentStudio() {
+  const store = useStore();
+  const doc = useShotEditor((s) => s.doc);
+  const editingDef = useShotEditor((s) => s.editingDef);
+  // THE WORKSPACE decides, not `editingDef` alone: a mode that outranks this
+  // one (`workspaceOf`'s order) owns the cells while it is open. The Edit tab
+  // of Components only: Preview is ComponentsPreview's.
+  const own = useShotEditor(componentEditOpen);
+  const { prompt, dialog } = usePrompt();
+
+  const def = editingDef === null ? undefined : doc?.components?.[editingDef];
+  if (doc === null || def === undefined || !own) return null;
+
+  return (
+    <>
+      <InCell name="centre">
+        {/* THE COMPONENT ITSELF, and it is a hole rather than a component:
+            `.stage-window` paints nothing and takes no pointer, so every press
+            over the subject reaches the stage. The stage's one pane is the
+            definition's frame there: the tools draw on it, a drag moves a
+            layer or marquees, middle-drag and Alt+left drag orbit, and the
+            wheel pans and dollies. `aria-hidden` because a screen reader has
+            nothing to read in a GL surface this document does not own. */}
+        <div
+          className="stage-window component-studio-hole"
+          aria-hidden="true"
+          data-testid="studio-preview-hole"
+        />
+      </InCell>
+
+      <InCell name="bar">
+        <div
+          className="component-studio-bar"
+          role="group"
+          aria-label={`Component ${def.name}`}
+          data-testid="component-studio"
+        >
+          {dialog}
+          {/* THE WAY BACK: to the Shot this came from, else to All
+              components, the verb the outline's back row runs too. */}
+          <ComponentsBack testId="studio-back" guard={NO_GUARD} />
+          {/* THE NAME IS THE RENAME. One dialog for the whole chrome
+              (`usePrompt`, the app menu's), never a second inline field with its
+              own commit rules: the inspector's Name row is the other spelling of
+              this one call and both land in `renameComponent`. */}
+          <ComponentCrumb
+            sel={{ kind: "studio", def: def.id }}
+            name={
+              <button
+                type="button"
+                className="component-studio-name"
+                data-testid="studio-rename"
+                title="Rename this component"
+                onClick={() => {
+                  void prompt({
+                    title: "Rename component",
+                    label: "Name",
+                    initialValue: def.name,
+                  }).then((name) => {
+                    if (name !== null) store.renameComponent(def.id, name);
+                  });
+                }}
+              >
+                {def.name}
+              </button>
+            }
+          />
+          <div className="component-studio-tools">
+            <ComponentsTabSwitch />
+            <StudioZoom />
+          </div>
+        </div>
+      </InCell>
+    </>
+  );
+}
+
+const TAB_TEST_ID: Record<ComponentsTab, string> = {
+  preview: "components-tab-preview",
+  edit: "components-tab-edit",
+};
+
+/** Set by a swap made from a focused segment, taken by the switch that mounts
+ *  next: the swap unmounts this bar and mounts the other tab's, so focus has
+ *  to be handed across. */
+let refocusTab = false;
+
+/**
+ * Components' Preview | Edit, in the canvas bar of both tabs: Preview is the
+ * component alone on the stage (ComponentsPreview.tsx), Edit its studio (this
+ * file for a definition, CodeStudio.tsx for code). The subject, its clock and
+ * its buffers stay across the swap (`setComponentsTab`).
+ */
+export function ComponentsTabSwitch() {
+  const store = useStore();
+  const tab = useShotEditor((s) => s.componentsTab);
+  useEffect(() => {
+    if (!refocusTab) return;
+    refocusTab = false;
+    document.querySelector<HTMLElement>(`[data-testid="${TAB_TEST_ID[tab]}"]`)?.focus();
+    // On mount only: this instance is the one the swap brought up.
+  }, []);
+  return (
+    <SegmentedControl
+      ariaLabel="Components view"
+      className="is-bar components-tab-switch"
+      value={tab}
+      options={[
+        { value: "preview", label: "Preview", title: "The component alone on the stage", testId: TAB_TEST_ID.preview },
+        { value: "edit", label: "Edit", title: "Edit the component", testId: TAB_TEST_ID.edit },
+      ]}
+      onChange={(next) => {
+        if (next === tab) return;
+        const focused = document.activeElement;
+        refocusTab = focused instanceof HTMLElement && Object.values(TAB_TEST_ID).includes(focused.dataset.testid ?? "");
+        store.setComponentsTab(next === "edit" ? "edit" : "preview");
+      }}
+    />
+  );
+}
+
+/**
+ * How big the definition is drawn, plus the way back to the derived camera.
+ * Code Studio's canvas bar renders this same cluster for its component.
+ *
+ * The zoom is CHROME state pushed to the stage, which divides the definition's
+ * frame by it before fitting, so it scales the subject inside the hole rather
+ * than moving a camera the author may have taken. The stage bar's zoom look
+ * (`.zoom-controls`), because it is the same control over a different subject.
+ *
+ * Recenter appears exactly when it is true: once the author has taken the
+ * camera, by an orbit (middle-drag or Alt+left drag, and over a code
+ * component a plain drag too) or by a wheel pan or dolly, it is theirs and
+ * nothing re-derives it.
+ */
+export function StudioZoom() {
+  const store = useStore();
+  const zoom = useShotEditor((s) => s.studioZoom);
+  const orbited = useShotEditor((s) => s.isolationOrbit);
+  return (
+    <>
+      {orbited ? (
+        <button
+          type="button"
+          className="btn"
+          data-testid="studio-refit"
+          title="Frame the component head-on again (Home)"
+          onClick={() => store.fitWorkingView()}
+        >
+          Recenter
+        </button>
+      ) : null}
+      <div className="zoom-controls" role="group" aria-label="Zoom">
+        <button
+          type="button"
+          className="btn is-icon"
+          data-testid="studio-zoom-out"
+          aria-label="Zoom out"
+          title="Zoom out"
+          onClick={() => store.setStudioZoom(zoom / ZOOM_STEP)}
+        >
+          <IconMinus />
+        </button>
+        {/* The readout doubles as the reset, which is where every editor puts
+            it, and it is the only way back to 1x that does not need repeated
+            presses to land exactly there. */}
+        <button
+          type="button"
+          className="btn zoom-readout"
+          data-testid="studio-zoom-level"
+          title="Reset the zoom"
+          onClick={() => store.setStudioZoom(1)}
+        >
+          {Math.round(zoom * 100)}%
+        </button>
+        <button
+          type="button"
+          className="btn is-icon"
+          data-testid="studio-zoom-in"
+          aria-label="Zoom in"
+          title="Zoom in"
+          onClick={() => store.setStudioZoom(zoom * ZOOM_STEP)}
+        >
+          <IconPlus />
+        </button>
+      </div>
+    </>
+  );
+}