@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/files/MissingAssetsNotice.tsx

@@ -0,0 +1,60 @@
+// The way out when a Project's file is gone from storage (F3). The server
+// lists such rows in `assetUsage.missing` and still saves; this names the
+// first one and offers Relink (upload it again, same row) and Remove (the
+// row and the layers that show it). One at a time: fixing one shows the next.
+import { useRef } from "react";
+import { useShotEditor, useStore } from "../../state/context.js";
+import { UPLOAD_ACCEPT, fileNameOf } from "./resourceParts.js";
+
+export function MissingAssetsNotice() {
+  const store = useStore();
+  const doc = useShotEditor((state) => state.doc);
+  const missing = useShotEditor((state) => state.assetUsage?.missing);
+  const picker = useRef<HTMLInputElement | null>(null);
+  // Only rows the document still has at that path: a relink or a remove
+  // clears the notice now, not at the next save's refresh.
+  const rows = (missing ?? []).flatMap((row) => {
+    const asset = doc?.assets[row.id];
+    return asset !== undefined && asset.path === row.path ? [asset] : [];
+  });
+  const first = rows[0];
+  if (first === undefined) return null;
+  const name = fileNameOf(first);
+  const more = rows.length - 1;
+
+  return (
+    <div className="overlay-message is-sticky" data-testid="missing-assets">
+      <span>
+        {more === 0
+          ? `${name} is missing from this Project. Saving still works.`
+          : `${name} and ${more} more ${more === 1 ? "file are" : "files are"} missing from this Project. Saving still works.`}
+      </span>
+      <input
+        ref={picker}
+        type="file"
+        hidden
+        accept={UPLOAD_ACCEPT}
+        data-testid="missing-assets-input"
+        onChange={(event) => {
+          const file = event.target.files?.[0];
+          event.target.value = "";
+          if (file === undefined) return;
+          store.relinkAsset(first.id, file).catch((error: unknown) => {
+            store.reportError(error instanceof Error ? error.message : String(error));
+          });
+        }}
+      />
+      <button type="button" className="overlay-action" onClick={() => picker.current?.click()}>
+        Relink file
+      </button>
+      <button
+        type="button"
+        className="overlay-action"
+        title={`Take ${name} and the layers that show it out of this Project. Undo brings them back.`}
+        onClick={() => store.removeMissingAsset(first.id)}
+      >
+        Remove
+      </button>
+    </div>
+  );
+}

package/src/panels/files/assetDrag.ts

@@ -0,0 +1,79 @@
+// DRAGGING A FILE OUT OF THE BOARD'S ASSETS PANEL AND ONTO THE BOARD.
+//
+// ── THE PAYLOAD IS THE STORYBOARD'S SHAPE, AND A SEPARATE MIME ──────────
+//
+// `storyboardDrop.ts` established the format: one vendor MIME carrying JSON,
+// mirrored to `text/plain` because Safari drops custom types on some paths, and
+// `text/plain` trusted only when it parses as OUR json so the outliner's plain
+// layer ids never read as a card. This lane copies that rule and NOT that MIME.
+//
+// A separate type is what keeps the targets honest about what they accept: a
+// file lands as a new card made for it (`addReferenceForAsset`), never as a
+// move of a card that exists. Sharing one MIME would make that a parse of the
+// payload's `kind` at each target, a type test written twice. Two MIMEs, and
+// `dataTransfer.types` answers "can I take this" before anything is read.
+import type { ShotEditorState } from "../../state/types.js";
+
+export const ASSET_MIME = "application/x-dailies-asset";
+
+/**
+ * Whether a drop target for an asset drag is ON SCREEN, which is the only
+ * condition under which a tile may be picked up.
+ *
+ * The readers of `ASSET_MIME` are the board's canvas and its shot cards
+ * (BoardCanvas, ShotCard), so a tile drags while the board is open. Anywhere
+ * else a pickup is a gesture with nowhere to land, and "Use in shot" is the
+ * way in.
+ */
+export function assetDropTargetShown(s: Pick<ShotEditorState, "doc" | "storyboardOpen">): boolean {
+  return s.doc !== null && s.storyboardOpen;
+}
+
+/** What a tile says while it can be dragged: what the board's drop does. */
+export const ASSET_DROP_COPY = "Drag onto the board or a shot to pin it";
+
+/**
+ * What an asset drag CARRIES: the registry id, and nothing else.
+ *
+ * Not the path, not the kind, not the size. All three are on the `ShotAsset`
+ * row the id addresses, and a drop resolves the id against the document it is
+ * landing in — so a payload that carried a copy could disagree with the
+ * registry after an undo, and the disagreement would be invisible until the
+ * layer drew the wrong file.
+ */
+export interface AssetDragPayload {
+  asset: string;
+}
+
+/** Only `setData` and `effectAllowed`, which is all a jsdom test can hand a
+ *  synthetic drag. */
+export type DragWriter = Pick<DataTransfer, "setData"> & { effectAllowed?: string };
+
+export function writeAssetDrag(dataTransfer: DragWriter, payload: AssetDragPayload): void {
+  const text = JSON.stringify(payload);
+  dataTransfer.setData(ASSET_MIME, text);
+  dataTransfer.setData("text/plain", text);
+  // COPY, not move. The registry row stays where it is: placing an asset mints
+  // a layer that points at it, and the same file may be placed many times.
+  dataTransfer.effectAllowed = "copy";
+}
+
+/** Reads only `types` and `getData`, for the reason above. */
+export function readAssetDrag(
+  dataTransfer: Pick<DataTransfer, "types" | "getData">,
+): AssetDragPayload | null {
+  const types = Array.from(dataTransfer.types ?? []);
+  if (types.includes(ASSET_MIME)) return parsePayload(dataTransfer.getData(ASSET_MIME));
+  return types.includes("text/plain") ? parsePayload(dataTransfer.getData("text/plain")) : null;
+}
+
+function parsePayload(text: string): AssetDragPayload | null {
+  try {
+    const parsed = JSON.parse(text) as unknown;
+    if (typeof parsed !== "object" || parsed === null) return null;
+    const asset = (parsed as Record<string, unknown>)["asset"];
+    return typeof asset === "string" && asset !== "" ? { asset } : null;
+  } catch {
+    return null;
+  }
+}

package/src/panels/files/resourceParts.tsx

@@ -0,0 +1,255 @@
+// THE PARTS THE RESOURCE PANELS SHARE: the lane, the add form, a brand row,
+// the thumb, and the readers over the registry they all ask.
+//
+// One home, so the board's AssetsTab and the inspector render the same row
+// the same way. Each panel decides WHICH rows it lists and
+// where an add lands. These parts only draw a row and say what it can do.
+import { useState } from "react";
+import { IconChevron } from "@dailies-studio/ui";
+import type {
+  BrandItem3D,
+  Doc3D,
+  Layer3D,
+  ScopedBrandItem3D,
+  ScopedReferenceItem3D,
+  ShotAsset,
+} from "@dailies-studio/shot/doc";
+import { formatBytes } from "../../api.js";
+
+/** What a file input on a resource panel offers. The server is the gate. */
+export const UPLOAD_ACCEPT = "image/*,video/*,audio/*,.glb,.gltf,.woff,.woff2,.ttf,.otf";
+
+export type AddFormKind = "color" | "guidance" | "reference";
+
+/** What a brand row's one action is, or null when it has none here. */
+export type ResourceAction = { label: "Use" | "Apply"; enabled: boolean; reason?: string };
+
+export function ResourceLane({
+  title,
+  count,
+  meta,
+  actions,
+  readOnly,
+  foldable,
+  children,
+}: {
+  title: string;
+  count: number;
+  meta?: string;
+  actions: React.ReactNode;
+  readOnly: boolean;
+  /** Fold a WRITABLE lane, closed by default. `readOnly` already folds, and
+   *  the two are separate questions: the board's Parts lane has an add button
+   *  and still wants to start out of the way, because the material an author
+   *  handles is the lane above it. */
+  foldable?: boolean;
+  children: React.ReactNode;
+}) {
+  const heading = (
+    <span className="resource-lane-title">
+      <span>{title}</span>
+      <span className="resource-count">{count}</span>
+      {meta === undefined ? null : <span className="resource-usage">{meta}</span>}
+    </span>
+  );
+  return readOnly || foldable === true ? (
+    <details className="resource-lane">
+      {/* The house chevron, same as the outline tree and the MCP lane. */}
+      <summary>
+        <IconChevron className="chevron" />
+        {heading}
+        {actions}
+      </summary>
+      <div className="resource-lane-body">{children}</div>
+    </details>
+  ) : (
+    <section className="resource-lane">
+      <div className="resource-lane-head">
+        {heading}
+        {actions}
+      </div>
+      <div className="resource-lane-body">{children}</div>
+    </section>
+  );
+}
+
+export function ResourceForm({
+  kind,
+  onSubmit,
+  onCancel,
+}: {
+  kind: AddFormKind;
+  onSubmit: (label: string, value: string) => void;
+  onCancel: () => void;
+}) {
+  const [label, setLabel] = useState("");
+  const [value, setValue] = useState(kind === "color" ? "#ffffff" : "");
+  const noun = kind === "color" ? "Color" : kind === "reference" ? "Reference note" : "Guidance";
+  return (
+    <form
+      className="resource-form"
+      onSubmit={(event) => {
+        event.preventDefault();
+        if (label.trim().length === 0 || value.trim().length === 0) return;
+        onSubmit(label, value);
+      }}
+    >
+      <input autoFocus value={label} placeholder={`${noun} name`} aria-label={`${noun} name`} onChange={(e) => setLabel(e.target.value)} />
+      <div className="resource-form-value">
+        {kind === "color" ? (
+          <input type="color" value={value} aria-label="Brand color" onChange={(e) => setValue(e.target.value)} />
+        ) : null}
+        <input
+          value={value}
+          placeholder={kind === "color" ? "#rrggbb" : kind === "reference" ? "What should the agent notice?" : "How should this be used?"}
+          aria-label={`${noun} value`}
+          onChange={(e) => setValue(e.target.value)}
+        />
+      </div>
+      <div className="resource-form-actions">
+        <button type="button" onClick={onCancel}>Cancel</button>
+        <button type="submit" className="is-primary">Add</button>
+      </div>
+    </form>
+  );
+}
+
+export function BrandRow({
+  item,
+  asset,
+  used,
+  canOverride,
+  shadowed,
+  readOnly,
+  action,
+  onUse,
+  onOverride,
+  onRemove,
+}: {
+  item: ScopedBrandItem3D;
+  asset?: ShotAsset;
+  used: boolean;
+  /** A Project row, with a Shot entered to copy it into. */
+  canOverride: boolean;
+  /** The entered Shot has its own row for this key, so it gets that one. */
+  shadowed: boolean;
+  readOnly: boolean;
+  action: ResourceAction | null;
+  onUse: () => void;
+  onOverride: () => void;
+  onRemove: () => void;
+}) {
+  return (
+    <li className={`resource-row is-${item.scope}`} data-resource={item.id}>
+      <details>
+        <summary>
+          <ResourceThumb item={item} {...(asset === undefined ? {} : { asset })} />
+          <span className="resource-label">{item.label}</span>
+          <span className="resource-badge">{item.scope === "shot" ? "Shot" : "Project"}</span>
+          {used ? <span className="resource-used">Used</span> : null}
+          {shadowed ? (
+            <span className="resource-used" title="This shot has its own row for this role">
+              Overridden
+            </span>
+          ) : null}
+        </summary>
+        <div className="resource-detail">
+          <div><span>Role</span><code>{item.key}</code></div>
+          {asset === undefined ? null : <div><span>File</span><code>{asset.path}</code></div>}
+          {item.type === "asset" && item.guidance !== undefined ? <p>{item.guidance}</p> : null}
+          {item.type === "guidance" ? <p>{item.text}</p> : null}
+          <div className="resource-row-actions">
+            {readOnly || action === null ? null : (
+              <button type="button" disabled={!action.enabled} title={action.reason} onClick={onUse}>{action.label}</button>
+            )}
+            {readOnly || !canOverride ? null : (
+              <button type="button" onClick={onOverride}>Override</button>
+            )}
+            {/* Every row the tab shows is one it owns: the Project's lanes
+                and the Shot's lane each remove from their own scope. */}
+            {readOnly ? null : (
+              <button type="button" className="is-danger" onClick={onRemove}>Remove</button>
+            )}
+          </div>
+        </div>
+      </details>
+    </li>
+  );
+}
+
+export function ResourceThumb({ item, asset }: { item: BrandItem3D | ScopedReferenceItem3D; asset?: ShotAsset }) {
+  if (item.type === "color") {
+    return <span className="resource-thumb is-swatch" style={{ backgroundColor: item.value }} aria-hidden="true" />;
+  }
+  if (item.type === "asset" && asset?.kind === "image") {
+    return <img className="resource-thumb" src={`/studio/assets/${encodeURIComponent(asset.path)}`} alt="" />;
+  }
+  const glyph =
+    item.type === "note" ? "N" : item.type === "guidance" ? "G" : item.type === "component" ? "</>" : assetGlyph(asset);
+  return <span className="resource-thumb is-kind" aria-hidden="true">{glyph}</span>;
+}
+
+/** The glyph a file with no picture of its own shows in a row's thumb. */
+export function assetGlyph(asset: ShotAsset | undefined): string {
+  return asset?.kind === "font" ? "Aa" : asset?.kind === "video" ? "▶" : asset?.kind === "audio" ? "♪" : asset?.kind === "model" ? "3D" : "·";
+}
+
+export function actionForResource(
+  item: ScopedBrandItem3D,
+  asset: ShotAsset | undefined,
+  selected: readonly Layer3D[],
+  inShot: boolean,
+): ResourceAction | null {
+  if (!inShot || item.type === "guidance") return null;
+  if (item.type === "color") {
+    const enabled = selected.some((layer) => ["text", "rect", "ellipse", "path", "line", "arrow"].includes(layer.kind));
+    return enabled ? { label: "Apply", enabled } : { label: "Apply", enabled, reason: "Select text or a vector layer" };
+  }
+  if (asset?.kind === "font") {
+    const enabled = selected.some((layer) => layer.kind === "text");
+    return enabled ? { label: "Apply", enabled } : { label: "Apply", enabled, reason: "Select a text layer" };
+  }
+  if (asset === undefined) return { label: "Use", enabled: false, reason: "The file is missing" };
+  return { label: "Use", enabled: true };
+}
+
+export function selectedLayers(doc: Doc3D, containerId: string | null, selection: readonly string[]): Layer3D[] {
+  if (containerId === null) return [];
+  const home = doc.components?.[containerId] ?? doc.scenesById[containerId];
+  if (home === undefined) return [];
+  return selection.flatMap((id) => {
+    const layer = home.layersById[id];
+    return layer === undefined ? [] : [layer];
+  });
+}
+
+export function assetUsedInComposition(doc: Doc3D, assetId: string): boolean {
+  if (Object.values(doc.audio).some((clip) => clip.asset === assetId)) return true;
+  for (const scene of Object.values(doc.scenesById)) {
+    if (Object.values(scene.audio ?? {}).some((clip) => clip.asset === assetId)) return true;
+    if (containsAsset(scene.layersById, assetId)) return true;
+  }
+  return containsAsset(doc.components ?? {}, assetId);
+}
+
+function containsAsset(value: unknown, assetId: string): boolean {
+  if (value === assetId) return true;
+  if (Array.isArray(value)) return value.some((entry) => containsAsset(entry, assetId));
+  if (typeof value !== "object" || value === null) return false;
+  return Object.values(value as Readonly<Record<string, unknown>>).some((entry) => containsAsset(entry, assetId));
+}
+
+/** The name without its content-hash prefix, as the audio lane shows it. */
+export function fileNameOf(asset: ShotAsset): string {
+  return asset.path.replace(/^[0-9a-f]{8}-/, "");
+}
+
+/** The shown name, with the stored one (and the size, when given) in the
+ *  tooltip. */
+export function NameOf({ asset, bytes }: { asset: ShotAsset; bytes?: number | undefined }) {
+  return (
+    <span className="resource-label" title={bytes === undefined ? asset.path : `${asset.path} · ${formatBytes(bytes)}`}>
+      {fileNameOf(asset)}
+    </span>
+  );
+}