@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/code/CodeDefaultsPanel.tsx

@@ -0,0 +1,345 @@
+// THE PROPS, FROM CODE: a code component's defaults in the Components
+// workspace's right panel (InspectorPanel's code branch renders
+// `CodeSubjectHead` and the component actions over this).
+//
+// Every row is one contract key at its DEFAULT — the value `buildProps` gives
+// every instance that has no opinion of its own. Editing a row edits the
+// component's SOURCE, which is what squares this panel with the old header
+// rule ("the way to change a code component's props is to change the code"):
+// the rail does not bypass the code, it is a hand on it. A scrub crosses the
+// bridge as a live preview override and touches nothing; the release commits
+// through the defaults-persist route, the server splices the one literal, and
+// the watcher pipeline carries the new default to the stage, this panel, and
+// every placed instance without an override.
+//
+// TRY FIRST, SAVE ON PURPOSE. With "Apply to all instances" off (the
+// default), an edit is only TRIED: `playComponentProp` holds it for the
+// preview and nothing else changes. Ticking the box saves what was tried and
+// makes later edits save as they happen (the source path above).
+//
+// NO DOCUMENT WRITES ANYWHERE IN THIS FILE. There is no KeyframeDot (a default
+// is not a track) and no useDocWrite: the store verbs it calls write preview
+// state and HTTP, never a document, so nothing here can land in a shot's undo
+// stack. The head's Reset puts every default the author changed back to what
+// it was before the first change (the store's `codeDefaultsBaseline`), through
+// the same commit as a typed value.
+import { useRef } from "react";
+import { InspectorSection, PropRow, useConfirm } from "@dailies-studio/ui";
+import type { ScrubHandlers } from "@dailies-studio/ui";
+import { orderSpecs } from "@dailies-studio/contract";
+import type { ControlSpec } from "@dailies-studio/contract";
+import { valueEquals, type Value } from "@dailies-studio/engine";
+import { instanceExportOf } from "@dailies-studio/shot/doc";
+import { COMPONENT_ICON } from "../../icons.js";
+import { useShotEditor, useStore } from "../../state/context.js";
+import { codeSubjectRel } from "../../state/types.js";
+import { dirtyCodeFileCount, discardBuffersMessage } from "./codeBufferGuard.js";
+import { ApplyAllToggle, useNewPropKeys } from "../studio/componentParts.js";
+import { coercePropValue, propEditOf, shownPropValue } from "../inspector/propValue.js";
+
+/**
+ * The inspector's subject line in Code Studio: the component the stage is
+ * drawing, on `InspectorHead`'s markup and look. Its own component because
+ * `InspectorHead`'s ladder is about the document (a layer, a shot, the
+ * Project), and none of those is on screen here. No rename: a code
+ * component's name is its export, which is changed in the code.
+ */
+export function CodeSubjectHead({ componentId }: { componentId: string }) {
+  // The NAME, a string, so the head re-renders only when it changes.
+  const name = useShotEditor(
+    (s) => s.library.find((r) => r.id === componentId)?.name ?? instanceExportOf(componentId),
+  );
+  return (
+    <div className="insp-head" data-testid="insp-head">
+      <span className="insp-head-icon is-component">{COMPONENT_ICON}</span>
+      <div className="insp-head-text">
+        <span className="insp-head-kind">Code component</span>
+        <span className="insp-head-name" title={name}>
+          {name}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+export function CodeDefaultsPanel({ componentId }: { componentId: string }) {
+  const contract = useShotEditor((s) => s.contracts[componentId]);
+  const meta = useShotEditor((s) => s.contractDefaults[componentId]);
+  const error = useShotEditor((s) => s.codeDefaultsError);
+  // The owning Project, from the subject's own buffer (the server resolved it).
+  const owner = useShotEditor((s) => {
+    const rel = codeSubjectRel(s);
+    return (rel === null ? null : s.codeFiles[rel]?.generated?.docName) ?? null;
+  });
+  // KEYS THE LAST VERSION DID NOT HAVE: a prop just added in code gets the
+  // "New" badge until the next version records it.
+  const fresh = useNewPropKeys(contract === undefined ? [] : Object.keys(contract.keys));
+  // RESET'S TARGET, from the store: each changed default before its first
+  // change, recorded by the commit itself. A remount keeps it, and a prop
+  // added in code later is covered once it is changed here.
+  const baseline = useShotEditor((s) => s.codeDefaultsBaseline);
+  const applyAll = useShotEditor((s) => s.componentApplyAll);
+  const tried = useShotEditor((s) => Object.keys(s.componentPlay).length);
+  const viewer = useShotEditor((s) => s.readOnly);
+  const store = useStore();
+
+  // Quiet until the contract lands: the fetch was started by
+  // openCodeComponent and a spinner here would flash on every entry.
+  if (contract === undefined) return null;
+
+  const specs = orderSpecs(contract);
+  // Absent meta (still in flight, or an older server) fails OPEN: the rows
+  // render editable and `commitCodeDefault` re-checks everything the meta
+  // would have said, so the only cost is a later refusal instead of an
+  // earlier badge.
+  const writable = meta === undefined || meta.writable;
+  // Saving is only ever on when it can work; trying always can.
+  const saving = applyAll && writable && !viewer;
+  // Keys whose default moved off the baseline and can still be written.
+  const moved = specs
+    .filter((spec) => {
+      const was = baseline[spec.key];
+      // As the engine value the baseline holds: a curve's default is its
+      // decoded object here and its canonical JSON there.
+      const now = "default" in spec ? coercePropValue(spec, spec.default) : null;
+      return was !== undefined && now !== null && !valueEquals(was, now);
+    })
+    .filter((spec) => meta?.keys[spec.key]?.editable !== false)
+    .map((spec) => spec.key);
+  const reset = !saving ? (
+    <button
+      type="button"
+      className="props-head-reset"
+      data-testid="code-defaults-reset"
+      disabled={tried === 0}
+      title={tried === 0 ? "Nothing tried" : "Drop every tried value"}
+      onClick={() => store.resetComponentPlay()}
+    >
+      Reset
+    </button>
+  ) : (
+    <button
+      type="button"
+      className="props-head-reset"
+      data-testid="code-defaults-reset"
+      disabled={!writable || moved.length === 0}
+      title={moved.length === 0 ? "No default changed here" : "Put every changed default back to how it was"}
+      onClick={() => {
+        void (async () => {
+          for (const key of moved) {
+            const was = baseline[key];
+            if (was !== undefined) await store.commitCodeDefault(key, was);
+          }
+        })();
+      }}
+    >
+      Reset
+    </button>
+  );
+
+  return (
+    // The rows are PropRows, drawn by the ui widgets (widgets.css) exactly as
+    // every ControlSpec row is, and a button that is a row's control is the
+    // house row button: nothing here needs a section scope.
+    <InspectorSection title="Props · from code" action={reset}>
+      <ApplyAllToggle
+        disabled={!writable || viewer}
+        disabledReason={viewer ? "View only" : "Generated component: edit the Project instead."}
+      />
+      {!writable ? (
+        <GeneratedStrip docName={owner} className="insp-notice" testId="code-defaults-generated" />
+      ) : null}
+      {error !== null ? (
+        <div className="insp-inline-error" role="alert" data-testid="code-defaults-error">
+          {error}
+        </div>
+      ) : null}
+      {specs.length === 0 ? <div className="insp-notice">This component has no props.</div> : null}
+      {specs.map((spec) => {
+        const keyMeta = meta?.keys[spec.key];
+        // Trying writes nothing, so only a saving edit can be refused.
+        const readOnlyReason = !saving
+          ? null
+          : !writable
+          ? "Generated component: edit the Project instead."
+          : keyMeta !== undefined && !keyMeta.editable
+            ? keyMeta.reason
+            : null;
+        return (
+          <DefaultRow
+            key={spec.key}
+            spec={spec}
+            readOnlyReason={readOnlyReason}
+            isNew={fresh.includes(spec.key)}
+            saving={saving}
+          />
+        );
+      })}
+      {/* Said once, under the rows: what a saved value here is. */}
+      <p className="insp-note code-defaults-note" data-testid="code-defaults-intro">
+        A saved value here is the default in code. In a shot or on the board, a change only touches that use.
+      </p>
+    </InspectorSection>
+  );
+}
+
+/**
+ * One key. The row is the SAME `PropRow` a placed instance's props and one
+ * use's props render, so a default and an override can never be two
+ * different editors over one spec: only the write seams differ.
+ *
+ * A key whose SOURCE cannot take the edit (a computed default, a spread, a
+ * generated file) is READ-ONLY with the reason as its tooltip: the value it
+ * holds stays on screen in its own control, and nothing is offered that would
+ * fail. A slot or an event says "set in code", as it does everywhere.
+ */
+function DefaultRow({
+  spec,
+  readOnlyReason,
+  isNew,
+  saving,
+}: {
+  spec: ControlSpec;
+  readOnlyReason: string | null;
+  isNew: boolean;
+  /** "Apply to all instances" is on: edits save to source. Off = tried. */
+  saving: boolean;
+}) {
+  const store = useStore();
+  const held = useShotEditor((s) => s.codePreviewProps[spec.key]);
+  const tried = useShotEditor((s) => s.componentPlay[spec.key]);
+  const fallback = "default" in spec ? spec.default : undefined;
+  // A tried value first (what the preview draws), then the held override
+  // while a gesture or an in-flight commit owns the key, then the contract's
+  // own default.
+  const value = tried ?? held ?? fallback;
+
+  // Every value crosses the contract's own coercion (`propValue.ts`): a curve
+  // or a gradient editor hands back its VALUE OBJECT, encoded here to the
+  // canonical JSON the bridge and the source both take, and a value the
+  // contract refuses writes nothing. A drag refuses by writing nothing: a
+  // per-pointermove React state write would re-render the rail sixty times a
+  // second to say what the typed path says once.
+  //
+  // TRYING: every move IS the edit, so a cancelled gesture puts back the
+  // value it started from.
+  const before = useRef<Value | undefined>(undefined);
+  const scrub: ScrubHandlers = saving
+    ? {
+        start: () => {},
+        move: (raw: unknown) => {
+          const next = coercePropValue(spec, raw);
+          if (next !== null) store.scrubCodeDefault(spec.key, next);
+        },
+        end: (commit: boolean) => store.endCodeDefaultScrub(commit),
+      }
+    : {
+        start: () => {
+          before.current = tried;
+        },
+        move: (raw: unknown) => {
+          const next = coercePropValue(spec, raw);
+          if (next !== null) store.playComponentProp(spec.key, next);
+        },
+        end: (commit: boolean) => {
+          if (!commit) store.playComponentProp(spec.key, before.current ?? null);
+        },
+      };
+  const commit = (raw: unknown): void => {
+    const edit = propEditOf(spec, raw, fallback);
+    if (edit.kind === "refused") {
+      store.reportError(edit.reason);
+      return;
+    }
+    // "No asset" over a default of none: drop what is tried, and the default
+    // (none) shows again. Saving it would write nothing new.
+    if (edit.kind === "clear") {
+      if (!saving) store.playComponentProp(spec.key, null);
+      return;
+    }
+    if (saving) void store.commitCodeDefault(spec.key, edit.value);
+    else store.playComponentProp(spec.key, edit.value);
+  };
+  // The spec's own description, then why the row cannot be edited, in the
+  // label's tooltip; the reason is the row's own tooltip too.
+  const description = [spec.description?.trim() ?? "", readOnlyReason ?? ""].filter((line) => line !== "").join("\n");
+
+  return (
+    <div className={`code-default${isNew ? " is-new" : ""}`} data-testid={`code-default-${spec.key}`}>
+      <PropRow
+        spec={spec}
+        value={shownPropValue(spec, value)}
+        commit={commit}
+        scrub={scrub}
+        // THE BLUE DOT: a value tried here, not saved.
+        changed={tried !== undefined}
+        changedLabel="Tried, not saved"
+        dotProps={{ "data-tried": spec.key }}
+        {...(description !== "" ? { description } : {})}
+        {...(readOnlyReason !== null ? { readOnly: true, rowProps: { title: readOnlyReason } } : {})}
+      />
+      {isNew ? (
+        // The badge is drawn in the label column (component.css); this copy is
+        // what a screen reader reads, once.
+        <span className="component-new-badge" data-testid="component-new-badge">
+          New
+        </span>
+      ) : null}
+    </div>
+  );
+}
+
+/**
+ * A generated file or component: who owns it, and the way there. Open Project
+ * leaves the code (asking first when a buffer is dirty, since leaving drops
+ * them all) and opens the owner. Without a resolved owner the copy stands alone.
+ *
+ * Here and not beside the editor in codeParts.tsx, because this panel loads
+ * with the shell and the editor does not.
+ */
+export function GeneratedStrip({
+  docName,
+  className,
+  testId,
+}: {
+  docName: string | null;
+  className: string;
+  testId: string;
+}) {
+  const store = useStore();
+  const { confirm, dialog } = useConfirm();
+  const open = (name: string): void => {
+    const go = (): void => {
+      if (store.getState().codeComponent !== null) store.closeCodeComponent();
+      void store.openShot(name);
+    };
+    const count = dirtyCodeFileCount(store.getState().codeFiles);
+    if (count === 0) {
+      go();
+      return;
+    }
+    void confirm({
+      title: "Unsaved changes",
+      message: discardBuffersMessage(count),
+      confirmLabel: "Discard",
+      danger: true,
+    }).then((ok) => {
+      if (ok) go();
+    });
+  };
+  return (
+    <div className={className} data-testid={testId}>
+      {dialog}
+      <span>
+        {docName === null
+          ? "Generated from a Project. Edit the Project to change it."
+          : `Generated from the Project ${docName}. Edit the Project to change it.`}
+      </span>
+      {docName !== null ? (
+        <button type="button" className="btn" data-testid={`${testId}-open`} onClick={() => open(docName)}>
+          Open Project
+        </button>
+      ) : null}
+    </div>
+  );
+}