@hyperframes/studio 0.8.16 → 0.8.18

package/src/hooks/useElementLifecycleOps.ts

@@ -20,6 +20,7 @@ import {
   type LayerRevealCommitOwnership,
 } from "../components/editor/useLayerRevealOverride";
 import type { CommitDomEditPatchBatches, DomEditPatchBatch } from "./domEditCommitTypes";
+import { domEditCommitDeclined, type DomEditCommitOutcome } from "./domEditCommitRunner";
 import { cutoverCommittedOrThrow, type CutoverResult } from "../utils/sdkCutover";
 import { studioWriteHeaders } from "../utils/studioFileVersion";
 
@@ -87,11 +88,11 @@ export function useElementLifecycleOps({
   // fallow-ignore-next-line complexity
   const handleDomEditElementsDelete = useCallback(
     // fallow-ignore-next-line complexity
-    async (selections: DomEditSelection[]) => {
+    async (selections: DomEditSelection[]): Promise<DomEditCommitOutcome> => {
       const pid = projectIdRef.current;
-      if (!pid) return;
+      if (!pid) return domEditCommitDeclined("no-project");
       const [selection] = selections;
-      if (!selection) return;
+      if (!selection) return domEditCommitDeclined("no-selection");
       const label =
         selections.length === 1
           ? selection.label || selection.id || selection.selector || selection.tagName
@@ -141,7 +142,7 @@ export function useElementLifecycleOps({
               `Deleted ${label}. Use Undo to restore ${sameFile.length === 1 ? "it" : "them"}.`,
               "info",
             );
-            return;
+            return { ok: true } as const;
           }
         }
 
@@ -174,7 +175,8 @@ export function useElementLifecycleOps({
           // matching at all means the preview is describing a document the file
           // does not have — say so rather than reporting a delete that happened.
           reloadPreview();
-          throw new Error("Nothing to delete — the preview was out of date. Try again.");
+          showToast("Nothing to delete, the preview was out of date. Try again.");
+          return domEditCommitDeclined("preview-stale");
         }
         const patchedContent =
           typeof removeData.content === "string" ? removeData.content : originalContent;
@@ -208,9 +210,13 @@ export function useElementLifecycleOps({
           `Deleted ${label}. Use Undo to restore ${sameFile.length === 1 ? "it" : "them"}.`,
           "info",
         );
+        return { ok: true } as const;
       } catch (error) {
         const message = error instanceof Error ? error.message : "Failed to delete element";
         showToast(message);
+        // The toast is what tells the human. The returned outcome is what tells
+        // a caller that has no screen to read.
+        return domEditCommitDeclined("persist-failed");
       }
     },
     [

package/src/hooks/useGsapSelectionHandlers.ts

@@ -111,7 +111,7 @@ export function useGsapSelectionHandlers({
   ) => Promise<void>;
   removeAllKeyframes: (sel: DomEditSelection, animId: string) => Promise<void>;
 
-  handleDomManualEditsReset: (sel: DomEditSelection) => void;
+  handleDomManualEditsReset: (sel: DomEditSelection) => Promise<void>;
   selectedGsapAnimations: GsapAnimation[];
   showToast: (message: string, tone?: "error" | "info") => void;
 }) {
@@ -230,7 +230,9 @@ export function useGsapSelectionHandlers({
         },
       );
       if (domEditSelection.element.hasAttribute("data-hf-studio-path-offset")) {
-        handleDomManualEditsReset(domEditSelection);
+        // The reset owns rollback and the position commit already owns user and
+        // telemetry reporting. This is only the fire-and-forget UI boundary.
+        void handleDomManualEditsReset(domEditSelection).catch(() => undefined);
       }
     },
     [domEditSelection, addGsapAnimation, handleDomManualEditsReset, trackGsapHandlerFailure],

package/src/utils/studioUiPreferences.ts

@@ -34,6 +34,14 @@ export interface StudioUiPreferences {
   timelineZoomMode?: "fit" | "manual";
   /** Manual timeline zoom percent, paired with `timelineZoomMode: "manual"`. */
   timelineManualZoomPercent?: number;
+  /**
+   * Expose Studio's editing capabilities to an agentic browser as WebMCP tools.
+   * Absent means on: the browser still gates every actual call behind its own
+   * permission prompt, so "registered" is not "reachable without consent".
+   * Changes take effect on the next Studio reload because registration is
+   * intentionally scoped to one mount.
+   */
+  agentToolsEnabled?: boolean;
 }
 
 const STUDIO_UI_PREFERENCES_KEY = "hf-studio-ui-preferences";
@@ -140,6 +148,9 @@ function readStorage(storage: Storage | null): StudioUiPreferences {
     ) {
       preferences.timelineManualZoomPercent = parsed.timelineManualZoomPercent;
     }
+    if (typeof parsed.agentToolsEnabled === "boolean") {
+      preferences.agentToolsEnabled = parsed.agentToolsEnabled;
+    }
     return preferences;
   } catch {
     return {};

package/src/webmcp/StudioAgentTools.tsx

@@ -0,0 +1,46 @@
+import { useCallback } from "react";
+import { useDomEditSelectionContext } from "../contexts/DomEditContext";
+import { useStudioShellContext } from "../contexts/StudioContext";
+import { usePlayerStore } from "../player";
+import { useStudioAgentTools } from "./useStudioAgentTools";
+import type { StudioLookSnapshot } from "./tools/lookTools";
+
+/**
+ * Mounts Studio's WebMCP tool surface. Renders nothing.
+ *
+ * Lives inside `EditorShell` rather than `App` for two reasons: the DomEdit
+ * contexts are only readable below `DomEditProvider`, which `App` renders, and
+ * `App.tsx` sits three lines under the 600-line cap.
+ *
+ * The player store is read IMPERATIVELY through `getState()` inside the
+ * snapshot callback rather than subscribed to. Subscribing to `currentTime`
+ * would re-render this component on every animation frame during playback for
+ * a value nothing here displays.
+ */
+export function StudioAgentTools() {
+  const { projectId, activeCompPath, editHistory } = useStudioShellContext();
+  const { domEditSelection, selectedGsapAnimations } = useDomEditSelectionContext();
+
+  const getSnapshot = useCallback((): StudioLookSnapshot => {
+    const player = usePlayerStore.getState();
+    return {
+      projectId,
+      compositionPath: activeCompPath,
+      currentTime: player.currentTime,
+      duration: player.duration,
+      isPlaying: player.isPlaying,
+      elements: player.elements,
+      selection: domEditSelection,
+      selectionAnimationCount: selectedGsapAnimations.length,
+      history: {
+        canUndo: editHistory.canUndo,
+        canRedo: editHistory.canRedo,
+        undoLabel: editHistory.undoLabel ?? null,
+        redoLabel: editHistory.redoLabel ?? null,
+      },
+    };
+  }, [projectId, activeCompPath, domEditSelection, selectedGsapAnimations, editHistory]);
+
+  useStudioAgentTools({ getSnapshot });
+  return null;
+}

package/src/webmcp/handles.test.ts

@@ -0,0 +1,130 @@
+// @vitest-environment jsdom
+import { describe, expect, it } from "vitest";
+import type { TimelineElement } from "../player/store/timelineElement";
+import {
+  mintElementHandle,
+  parseElementHandle,
+  resolveElementHandle,
+  timelineElementAddress,
+} from "./handles";
+
+function timelineElement(overrides: Partial<TimelineElement>): TimelineElement {
+  return { id: "synthetic-id", tag: "div", start: 0, duration: 1, track: 0, ...overrides };
+}
+
+/** A separate document, standing in for the preview iframe's realm. */
+function previewDoc(html: string): Document {
+  const iframe = document.createElement("iframe");
+  document.body.append(iframe);
+  const doc = iframe.contentDocument;
+  if (!doc) throw new Error("expected iframe document");
+  doc.body.innerHTML = html;
+  return doc;
+}
+
+describe("mintElementHandle", () => {
+  it("prefers data-hf-id, the stable patch target", () => {
+    const handle = mintElementHandle(
+      timelineElementAddress(
+        timelineElement({ hfId: "abc123", domId: "headline", selector: ".title" }),
+      ),
+    );
+    expect(handle).toBe("hf:abc123");
+  });
+
+  it("falls back to the DOM id when there is no hf id", () => {
+    expect(
+      mintElementHandle(
+        timelineElementAddress(timelineElement({ domId: "headline", selector: ".title" })),
+      ),
+    ).toBe("dom:headline");
+  });
+
+  it("falls back to a selector with its occurrence index", () => {
+    expect(
+      mintElementHandle(
+        timelineElementAddress(timelineElement({ selector: ".card", selectorIndex: 2 })),
+      ),
+    ).toBe("sel:.card#2");
+  });
+
+  it("defaults a missing occurrence index to the first match", () => {
+    expect(mintElementHandle(timelineElementAddress(timelineElement({ selector: ".card" })))).toBe(
+      "sel:.card#0",
+    );
+  });
+
+  it("returns null when the element carries no way to address it", () => {
+    // The synthesised `id` is deliberately NOT used: it cannot resolve.
+    expect(mintElementHandle(timelineElementAddress(timelineElement({})))).toBeNull();
+  });
+});
+
+describe("parseElementHandle", () => {
+  it("splits the index off the LAST hash, so id selectors survive", () => {
+    expect(parseElementHandle("sel:#card > .title#3")).toEqual({
+      scheme: "sel",
+      value: "#card > .title",
+      index: 3,
+    });
+  });
+
+  it("treats a selector with no index as the first match", () => {
+    expect(parseElementHandle("sel:.card")).toEqual({ scheme: "sel", value: ".card", index: 0 });
+  });
+
+  it("rejects an unknown scheme", () => {
+    expect(parseElementHandle("xpath://div")).toBeNull();
+  });
+
+  it("rejects a handle with no value", () => {
+    expect(parseElementHandle("dom:")).toBeNull();
+    expect(parseElementHandle("")).toBeNull();
+    expect(parseElementHandle(":headline")).toBeNull();
+  });
+});
+
+describe("resolveElementHandle", () => {
+  it("round-trips every handle scheme a read can mint", () => {
+    const doc = previewDoc(
+      `<div id="headline" data-hf-id="abc123">A</div>
+       <div class="card">first</div>
+       <div class="card">second</div>`,
+    );
+
+    expect(resolveElementHandle(doc, "hf:abc123")?.id).toBe("headline");
+    expect(resolveElementHandle(doc, "dom:headline")?.id).toBe("headline");
+    expect(resolveElementHandle(doc, "sel:.card#1")?.textContent).toBe("second");
+  });
+
+  it("resolves across realms, where a naive instanceof check fails", () => {
+    const doc = previewDoc('<div id="headline">A</div>');
+    const resolved = resolveElementHandle(doc, "dom:headline");
+
+    expect(resolved).not.toBeNull();
+    // The preview element is NOT an instance of Studio's own HTMLElement.
+    expect(resolved instanceof HTMLElement).toBe(false);
+  });
+
+  it("returns null for a handle that no longer matches", () => {
+    const doc = previewDoc('<div id="headline">A</div>');
+    expect(resolveElementHandle(doc, "dom:deleted")).toBeNull();
+    expect(resolveElementHandle(doc, "hf:missing")).toBeNull();
+    expect(resolveElementHandle(doc, "sel:.card#0")).toBeNull();
+  });
+
+  it("returns null for an out-of-range occurrence rather than the wrong element", () => {
+    const doc = previewDoc('<div class="card">only</div>');
+    expect(resolveElementHandle(doc, "sel:.card#4")).toBeNull();
+  });
+
+  it("returns null for a selector that is invalid in this document", () => {
+    const doc = previewDoc('<div class="card">only</div>');
+    expect(resolveElementHandle(doc, "sel:>>>broken#0")).toBeNull();
+  });
+
+  it("returns null for a malformed handle", () => {
+    const doc = previewDoc('<div id="headline">A</div>');
+    expect(resolveElementHandle(doc, "nonsense")).toBeNull();
+  });
+});

package/src/webmcp/handles.ts

@@ -0,0 +1,129 @@
+/**
+ * Opaque element handles: the one thing reads mint and writes consume.
+ *
+ * `TimelineElement.id` cannot do this job. It is a SYNTHESISED identity built
+ * from label, index, selector and source file when the clip has no authored id
+ * (`timelineElementHelpers.buildTimelineElementIdentity`), so
+ * `getElementById(element.id)` misses most elements. The real addressing fields
+ * are separate: `hfId` (the `data-hf-id` the codebase calls the stable primary
+ * patch target), `domId`, and a `selector` plus occurrence index.
+ *
+ * Handles are strings so they survive a JSON round trip through the agent
+ * untouched. The agent never builds one; it passes back what a read gave it.
+ */
+
+import type { TimelineElement } from "../player/store/timelineElement";
+import type { PatchTarget } from "../utils/sourcePatcher";
+
+const SEPARATOR = ":";
+const INDEX_SEPARATOR = "#";
+
+/**
+ * How to find one element. `TimelineElement` calls the DOM id `domId` and
+ * `PatchTarget` calls it `id`, so both adapt into this rather than the minter
+ * knowing about either.
+ */
+export interface ElementAddress {
+  hfId?: string;
+  domId?: string | null;
+  selector?: string;
+  selectorIndex?: number;
+}
+
+/**
+ * Address an element the same way Studio's own patcher does, most stable first.
+ * `data-hf-id` survives edits that renumber or reorder; a bare selector does not.
+ */
+export function mintElementHandle(address: ElementAddress): string | null {
+  if (address.hfId) return `hf${SEPARATOR}${address.hfId}`;
+  if (address.domId) return `dom${SEPARATOR}${address.domId}`;
+  if (address.selector) {
+    const index = address.selectorIndex ?? 0;
+    return `sel${SEPARATOR}${address.selector}${INDEX_SEPARATOR}${index}`;
+  }
+  return null;
+}
+
+export function timelineElementAddress(element: TimelineElement): ElementAddress {
+  return {
+    hfId: element.hfId,
+    domId: element.domId,
+    selector: element.selector,
+    selectorIndex: element.selectorIndex,
+  };
+}
+
+export function patchTargetAddress(target: PatchTarget): ElementAddress {
+  return {
+    hfId: target.hfId,
+    domId: target.id,
+    selector: target.selector,
+    selectorIndex: target.selectorIndex,
+  };
+}
+
+interface ParsedHandle {
+  scheme: "hf" | "dom" | "sel";
+  value: string;
+  index: number;
+}
+
+export function parseElementHandle(handle: string): ParsedHandle | null {
+  const separatorAt = handle.indexOf(SEPARATOR);
+  if (separatorAt <= 0) return null;
+  const scheme = handle.slice(0, separatorAt);
+  const rest = handle.slice(separatorAt + 1);
+  if (!rest) return null;
+  if (scheme === "hf" || scheme === "dom") return { scheme, value: rest, index: 0 };
+  if (scheme !== "sel") return null;
+
+  // Only the LAST `#` splits the index off: CSS selectors contain `#` themselves.
+  const indexAt = rest.lastIndexOf(INDEX_SEPARATOR);
+  if (indexAt <= 0) return { scheme, value: rest, index: 0 };
+  const index = Number(rest.slice(indexAt + 1));
+  if (!Number.isInteger(index) || index < 0) return { scheme, value: rest, index: 0 };
+  return { scheme, value: rest.slice(0, indexAt), index };
+}
+
+/**
+ * Resolve a handle against the preview document.
+ *
+ * Always re-resolve per call rather than holding an element across calls: a
+ * preview reload replaces the document, and a node from the destroyed one is
+ * detached but still looks like an element.
+ */
+export function resolveElementHandle(doc: Document, handle: string): HTMLElement | null {
+  const parsed = parseElementHandle(handle);
+  if (!parsed) return null;
+
+  if (parsed.scheme === "dom") return asHtmlElement(doc, doc.getElementById(parsed.value));
+  if (parsed.scheme === "hf") {
+    return asHtmlElement(doc, doc.querySelector(`[data-hf-id="${cssEscape(parsed.value)}"]`));
+  }
+
+  let matches: NodeListOf<Element>;
+  try {
+    matches = doc.querySelectorAll(parsed.value);
+  } catch {
+    // A selector minted from a previous document can be invalid in this one.
+    return null;
+  }
+  return asHtmlElement(doc, matches.item(parsed.index));
+}
+
+function cssEscape(value: string): string {
+  // ponytail: happy-dom and jsdom don't always ship CSS.escape; quoting the two
+  // characters that can break out of an attribute selector covers this use.
+  return typeof CSS?.escape === "function" ? CSS.escape(value) : value.replace(/["\\]/g, "\\$&");
+}
+
+/**
+ * `instanceof HTMLElement` is checked against the OWNING document's realm.
+ * The preview lives in an iframe, so Studio's own `HTMLElement` is a different
+ * constructor and the naive check fails on every real preview element.
+ */
+function asHtmlElement(doc: Document, node: Element | null): HTMLElement | null {
+  if (!node) return null;
+  const ctor = doc.defaultView?.HTMLElement;
+  return ctor && node instanceof ctor ? node : null;
+}

package/src/webmcp/polyfill.test.ts

@@ -0,0 +1,98 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { ModelContext } from "./types";
+
+// The real package defines `document.modelContext` as an import side effect.
+// A mock cannot do that, so tests stand the object up themselves to represent
+// the import having happened.
+const trackEvent = vi.hoisted(() => vi.fn());
+vi.mock("@mcp-b/global", () => ({}));
+vi.mock("../telemetry/client", () => ({ trackEvent }));
+
+let loadModelContextPolyfill: typeof import("./polyfill").loadModelContextPolyfill;
+
+function installModelContext(): ModelContext {
+  const modelContext: ModelContext = { registerTool: vi.fn().mockResolvedValue(undefined) };
+  Object.defineProperty(document, "modelContext", {
+    value: modelContext,
+    configurable: true,
+    writable: true,
+  });
+  return modelContext;
+}
+
+beforeEach(async () => {
+  vi.resetModules();
+  ({ loadModelContextPolyfill } = await import("./polyfill"));
+  trackEvent.mockReset();
+});
+
+afterEach(() => {
+  Reflect.deleteProperty(document, "modelContext");
+  vi.restoreAllMocks();
+});
+
+describe("loadModelContextPolyfill", () => {
+  it("returns the model context the package defines", async () => {
+    const modelContext = installModelContext();
+
+    await expect(loadModelContextPolyfill()).resolves.toBe(modelContext);
+    expect(trackEvent).toHaveBeenCalledWith("webmcp.polyfill_loaded");
+  });
+
+  it("shares one load between callers that race", async () => {
+    installModelContext();
+
+    // Identity, not a call count: the guard being tested is the module-level
+    // promise, and the ESM registry would dedupe the import either way.
+    const first = loadModelContextPolyfill();
+    const second = loadModelContextPolyfill();
+
+    expect(first).toBe(second);
+    await expect(first).resolves.toBe(await second);
+  });
+
+  it("reuses the settled load rather than starting another", async () => {
+    installModelContext();
+
+    const first = loadModelContextPolyfill();
+    await first;
+
+    expect(loadModelContextPolyfill()).toBe(first);
+  });
+
+  it("returns null when the package loads but defines nothing", async () => {
+    // Studio must still boot. A missing agent surface is not a broken editor.
+    const first = loadModelContextPolyfill();
+    await expect(first).resolves.toBeNull();
+
+    expect(trackEvent).toHaveBeenCalledWith("webmcp.polyfill_failed", {
+      error_name: "ModelContextMissingError",
+    });
+    const retry = loadModelContextPolyfill();
+    expect(retry).not.toBe(first);
+    await expect(retry).resolves.toBeNull();
+  });
+
+  it("reports a polyfill failure and lets a later mount retry", async () => {
+    const failure = new TypeError("blocked by policy");
+    Object.defineProperty(document, "modelContext", {
+      configurable: true,
+      get: () => {
+        throw failure;
+      },
+    });
+
+    const first = loadModelContextPolyfill();
+    await expect(first).resolves.toBeNull();
+    expect(trackEvent).toHaveBeenCalledWith("webmcp.polyfill_failed", {
+      error_name: "TypeError",
+    });
+
+    Reflect.deleteProperty(document, "modelContext");
+    const modelContext = installModelContext();
+    const retry = loadModelContextPolyfill();
+    expect(retry).not.toBe(first);
+    await expect(retry).resolves.toBe(modelContext);
+  });
+});

package/src/webmcp/polyfill.ts

@@ -0,0 +1,60 @@
+/**
+ * The fallback for browsers that have not shipped WebMCP.
+ *
+ * `@mcp-b/global` does two things: it defines `document.modelContext`, and it
+ * stands up an in-page MCP server for a bridge extension to attach to. The
+ * second is the reason this is the chosen package over the bare
+ * `@mcp-b/webmcp-polyfill`: without the server there is nothing for an
+ * out-of-browser agent to connect to, which is the only case the fallback
+ * exists to serve.
+ *
+ * It is a DYNAMIC import so a browser with native support never downloads it,
+ * and so it lands in its own chunk rather than the entry bundle.
+ */
+
+import { makeStudioDebugLogger } from "../utils/studioDebug";
+import { trackEvent } from "../telemetry/client";
+import { getModelContext, type ModelContext } from "./types";
+
+const log = makeStudioDebugLogger("webmcp");
+
+/**
+ * Module-level, so two mounts racing (React StrictMode, or a remount during
+ * the import) share one load instead of pulling the package twice.
+ */
+let pending: Promise<ModelContext | null> | null = null;
+
+async function importPolyfill(): Promise<ModelContext | null> {
+  try {
+    await import("@mcp-b/global");
+    const modelContext = getModelContext();
+    if (!modelContext) {
+      // The package loaded but did not define what it promises to define.
+      log("polyfill", { loaded: true, modelContext: false });
+      trackEvent("webmcp.polyfill_failed", { error_name: "ModelContextMissingError" });
+    } else {
+      trackEvent("webmcp.polyfill_loaded");
+    }
+    return modelContext;
+  } catch (error) {
+    // A missing agent surface must never break Studio's boot.
+    log("polyfill", { failed: error instanceof Error ? error.message : String(error) });
+    trackEvent("webmcp.polyfill_failed", {
+      error_name: error instanceof Error ? error.name : "NonError",
+    });
+    return null;
+  }
+}
+
+export function loadModelContextPolyfill(): Promise<ModelContext | null> {
+  if (pending) return pending;
+
+  const attempt = importPolyfill();
+  pending = attempt;
+  // A transient chunk/CSP failure must not disable WebMCP for the rest of the
+  // tab. Concurrent callers still share this attempt; a later mount may retry.
+  void attempt.then((modelContext) => {
+    if (modelContext === null && pending === attempt) pending = null;
+  });
+  return pending;
+}