@hyperframes/studio 0.7.45 → 0.7.47

package/src/components/panels/VariablesValueControls.tsx

@@ -0,0 +1,215 @@
+/**
+ * Per-type preview-value inputs for the Variables panel. Text-like inputs
+ * draft locally and commit on blur/Enter so the preview doesn't reload per
+ * keystroke; discrete inputs (checkbox, select, color swatch, range) commit
+ * immediately.
+ */
+
+import { useState } from "react";
+import type {
+  CompositionVariable,
+  ColorVariable,
+  EnumVariable,
+  NumberVariable,
+} from "@hyperframes/sdk";
+
+export const VARIABLES_INPUT_CLASS =
+  "w-full bg-neutral-900 border border-neutral-800 rounded px-2 py-1 text-[10px] text-neutral-200 focus:outline-none focus:border-neutral-700";
+
+/** Text input that drafts locally and commits on blur/Enter. */
+function DraftTextInput({
+  value,
+  onCommit,
+  type = "text",
+  className = VARIABLES_INPUT_CLASS,
+  maxLength,
+  placeholder,
+  min,
+  max,
+  step,
+}: {
+  value: string;
+  onCommit: (raw: string) => void;
+  type?: "text" | "number";
+  className?: string;
+  maxLength?: number;
+  placeholder?: string;
+  min?: number;
+  max?: number;
+  step?: number;
+}) {
+  const [draft, setDraft] = useState<string | null>(null);
+  return (
+    <input
+      type={type}
+      value={draft ?? value}
+      maxLength={maxLength}
+      placeholder={placeholder}
+      min={min}
+      max={max}
+      step={step}
+      onChange={(e) => setDraft(e.target.value)}
+      onBlur={() => {
+        if (draft !== null && draft !== value) onCommit(draft);
+        setDraft(null);
+      }}
+      onKeyDown={(e) => e.key === "Enter" && e.currentTarget.blur()}
+      className={className}
+    />
+  );
+}
+
+function EnumControl({
+  decl,
+  current,
+  onCommit,
+}: {
+  decl: EnumVariable;
+  current: unknown;
+  onCommit: (value: unknown) => void;
+}) {
+  return (
+    <select
+      value={String(current)}
+      onChange={(e) => onCommit(e.target.value)}
+      className={VARIABLES_INPUT_CLASS}
+    >
+      {decl.options.map((opt) => (
+        <option key={opt.value} value={opt.value}>
+          {opt.label}
+        </option>
+      ))}
+    </select>
+  );
+}
+
+function ColorControl({
+  current,
+  onCommit,
+}: {
+  decl: ColorVariable;
+  current: unknown;
+  onCommit: (value: unknown) => void;
+}) {
+  const colorValue = typeof current === "string" ? current : "#000000";
+  // The native picker fires change continuously while dragging the gradient;
+  // draft locally and commit once on close (blur) — each commit reloads the
+  // whole preview iframe.
+  const [draft, setDraft] = useState<string | null>(null);
+  return (
+    <div className="flex items-center gap-2">
+      <input
+        type="color"
+        value={draft ?? (/^#[0-9a-fA-F]{6}$/.test(colorValue) ? colorValue : "#000000")}
+        onChange={(e) => setDraft(e.target.value)}
+        onBlur={() => {
+          if (draft !== null && draft !== colorValue) onCommit(draft);
+          setDraft(null);
+        }}
+        className="h-6 w-6 cursor-pointer rounded border border-neutral-700 bg-transparent"
+      />
+      <DraftTextInput
+        value={colorValue}
+        onCommit={onCommit}
+        className={`${VARIABLES_INPUT_CLASS} flex-1 font-mono`}
+      />
+    </div>
+  );
+}
+
+// fallow-ignore-next-line complexity
+function NumberControl({
+  decl,
+  current,
+  onCommit,
+}: {
+  decl: NumberVariable;
+  current: unknown;
+  onCommit: (value: unknown) => void;
+}) {
+  const numberValue = typeof current === "number" ? current : Number(current) || 0;
+  const hasRange = decl.min !== undefined && decl.max !== undefined;
+  // Drag ticks stay local; commit once on release — each commit reloads the
+  // whole preview iframe, so per-tick commits would thrash it.
+  const [dragValue, setDragValue] = useState<number | null>(null);
+  const commitDrag = () => {
+    if (dragValue !== null && dragValue !== numberValue) onCommit(dragValue);
+    setDragValue(null);
+  };
+  const commitRaw = (raw: string) => {
+    const n = Number(raw);
+    onCommit(Number.isFinite(n) ? n : raw);
+  };
+  return (
+    <div className="flex items-center gap-2">
+      {hasRange && (
+        <input
+          type="range"
+          min={decl.min}
+          max={decl.max}
+          step={decl.step ?? 1}
+          value={dragValue ?? numberValue}
+          onChange={(e) => setDragValue(Number(e.target.value))}
+          onPointerUp={commitDrag}
+          onKeyUp={commitDrag}
+          onBlur={commitDrag}
+          className="flex-1"
+        />
+      )}
+      <DraftTextInput
+        type="number"
+        value={String(numberValue)}
+        onCommit={commitRaw}
+        min={decl.min}
+        max={decl.max}
+        step={decl.step}
+        className={`${VARIABLES_INPUT_CLASS} ${hasRange ? "w-16" : "flex-1"} tabular-nums`}
+      />
+      {decl.unit && <span className="text-[9px] text-neutral-500">{decl.unit}</span>}
+    </div>
+  );
+}
+
+// Per-type dispatcher — one branch per variable type, same shape as BlockParamsPanel.
+// fallow-ignore-next-line complexity
+export function PreviewValueControl({
+  decl,
+  value,
+  onCommit,
+}: {
+  decl: CompositionVariable;
+  value: unknown;
+  onCommit: (value: unknown) => void;
+}) {
+  const current = value === undefined ? decl.default : value;
+
+  switch (decl.type) {
+    case "boolean":
+      return (
+        <input
+          type="checkbox"
+          checked={current === true}
+          onChange={(e) => onCommit(e.target.checked)}
+          className="h-3.5 w-3.5 accent-neutral-400"
+        />
+      );
+    case "enum":
+      return <EnumControl decl={decl} current={current} onCommit={onCommit} />;
+    case "color":
+      return <ColorControl decl={decl} current={current} onCommit={onCommit} />;
+    case "number":
+      return <NumberControl decl={decl} current={current} onCommit={onCommit} />;
+    default: {
+      // string / font (family name) / image (URL) — plain text input for v1.
+      const textValue = typeof current === "string" ? current : JSON.stringify(current);
+      return (
+        <DraftTextInput
+          value={textValue}
+          onCommit={onCommit}
+          maxLength={decl.type === "string" ? decl.maxLength : undefined}
+          placeholder={decl.type === "string" ? decl.placeholder : undefined}
+        />
+      );
+    }
+  }
+}

package/src/components/renders/useRenderQueue.ts

@@ -34,6 +34,12 @@ export interface StartRenderOptions {
   resolution?: ResolutionPreset | "auto";
   /** Render a specific composition file instead of index.html. */
   composition?: string;
+  /**
+   * Composition-variable overrides ({variableId: value}), forwarded to the
+   * render route and injected as window.__hfVariables — the same channel
+   * `hyperframes render --variables` uses.
+   */
+  variables?: Record<string, unknown>;
 }
 
 // "Hide" (formerly "Clear") is a view operation, not a delete: hidden ids are
@@ -126,7 +132,9 @@ export function useRenderQueue(projectId: string | null) {
   }, [loadRenders]);
 
   // Start a render and track progress via SSE
+  // Pre-existing branchy fetch/poll flow — the variables passthrough added one branch.
   const startRender = useCallback(
+    // fallow-ignore-next-line complexity
     async (opts: StartRenderOptions = {}) => {
       if (!projectId) return;
 
@@ -154,6 +162,7 @@ export function useRenderQueue(projectId: string | null) {
         format: string;
         resolution?: string;
         composition?: string;
+        variables?: Record<string, unknown>;
         telemetryDistinctId: string;
       } = {
         fps,
@@ -166,6 +175,9 @@ export function useRenderQueue(projectId: string | null) {
       };
       if (resolution && resolution !== "auto") body.resolution = resolution;
       if (composition) body.composition = composition;
+      if (opts.variables && Object.keys(opts.variables).length > 0) {
+        body.variables = opts.variables;
+      }
       let res: Response;
       try {
         res = await fetch(`/api/projects/${projectId}/render`, {

package/src/contexts/TimelineEditContext.tsx

@@ -10,7 +10,7 @@ export function useTimelineEditContext(): TimelineEditCallbacks {
 }
 
 /**
- * Optional access — returns an empty object when outside a provider.
+ * Optional access, returns an empty object when outside a provider.
  * Useful in components that can render both inside and outside the NLE.
  */
 export function useTimelineEditContextOptional(): TimelineEditCallbacks {
@@ -26,13 +26,18 @@ export function TimelineEditProvider({
 }) {
   const memoized = useMemo(
     () => value,
-    // Each callback is a stable reference from the parent — memoize the bag
+    // Each callback is a stable reference from the parent, memoize the bag
     // so consumers don't re-render when unrelated parent state changes.
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
       value.onMoveElement,
       value.onResizeElement,
+      value.onMoveElements,
+      value.onResizeElements,
+      value.onPreviewMoveElements,
+      value.onPreviewResizeElements,
       value.onToggleTrackHidden,
+      value.onToggleElementHidden,
       value.onBlockedEditAttempt,
       value.onSplitElement,
       value.onRazorSplit,

package/src/contexts/VariablePromoteContext.tsx

@@ -0,0 +1,138 @@
+/**
+ * Promote-to-variable from the Design panel. Provides the same bind gesture the
+ * Variables tab offers (declare a variable defaulting to the element's current
+ * value + write the declarative binding), surfaced contextually on individual
+ * property controls. A control asks about its channel (text / src / a style
+ * prop) and gets back: whether it can be promoted, whether it is already bound,
+ * and callbacks to promote or to edit the bound variable's default in place.
+ */
+
+import { createContext, useContext, useEffect, useMemo, useState } from "react";
+import type { Composition, CompositionVariable } from "@hyperframes/sdk";
+import type { DomEditSelection } from "../components/editor/domEditingTypes";
+import {
+  applyBind,
+  buildBindActions,
+  rgbToHex,
+  type BindAction,
+} from "../components/panels/VariablesBindElement";
+import {
+  matchAction,
+  readBindingFrom,
+  uniqueId,
+  type PromoteChannel,
+} from "./variablePromoteHelpers";
+
+export type { PromoteChannel };
+
+export interface ChannelPromote {
+  /** The bind action for this channel, present only when the element supports it. */
+  action: BindAction | null;
+  /** Id of the variable this channel is already bound to, or null. */
+  boundId: string | null;
+  /** The bound variable's declaration (for its type + current default), if bound. */
+  declaration: CompositionVariable | null;
+  /** Declare a new variable (default = current value) and bind this channel to it. */
+  promote: () => void;
+  /** Update the bound variable's default value in place. */
+  setDefault: (value: string) => void;
+}
+
+interface VariablePromoteContextValue {
+  session: Composition | null;
+  selection: DomEditSelection | null;
+  actions: BindAction[];
+  declarations: CompositionVariable[];
+  persist: (label: string, mutate: (session: Composition) => void) => Promise<boolean>;
+}
+
+const VariablePromoteContext = createContext<VariablePromoteContextValue | null>(null);
+
+function readBinding(session: Composition, hfId: string, channel: PromoteChannel): string | null {
+  const snapshot = session.getElement(hfId);
+  if (!snapshot) return null;
+  return readBindingFrom(snapshot, channel);
+}
+
+export function VariablePromoteProvider({
+  session,
+  selection,
+  persist,
+  children,
+}: {
+  session: Composition | null;
+  selection: DomEditSelection | null;
+  persist: (label: string, mutate: (session: Composition) => void) => Promise<boolean>;
+  children: React.ReactNode;
+}) {
+  // Re-derive actions/bindings after each persisted schema edit.
+  const [revision, setRevision] = useState(0);
+  useEffect(() => {
+    if (!session) return;
+    return session.on("change", () => setRevision((r) => r + 1));
+  }, [session]);
+
+  const actions = useMemo(() => {
+    if (!session || !selection) return [];
+    return buildBindActions(selection, session);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [session, selection, revision]);
+
+  const declarations = useMemo(() => {
+    if (!session) return [];
+    return session.getVariableDeclarations();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [session, revision]);
+
+  const value = useMemo<VariablePromoteContextValue>(
+    () => ({ session, selection, actions, declarations, persist }),
+    [session, selection, actions, declarations, persist],
+  );
+
+  return (
+    <VariablePromoteContext.Provider value={value}>{children}</VariablePromoteContext.Provider>
+  );
+}
+
+/**
+ * Binding state + actions for one control's channel. Returns null when there is
+ * no selection, no session, or the channel is neither bindable nor bound here —
+ * so a control renders plain unless promoting genuinely applies.
+ */
+export function useVariablePromoteChannel(channel: PromoteChannel): ChannelPromote | null {
+  const ctx = useContext(VariablePromoteContext);
+  const key = channel.kind === "style" ? `style:${channel.prop}` : channel.kind;
+
+  return useMemo(() => {
+    if (!ctx || !ctx.session || !ctx.selection?.hfId) return null;
+    const { session, selection, actions, declarations, persist } = ctx;
+    const hfId = selection.hfId!;
+    const action = matchAction(actions, channel);
+    const boundId = readBinding(session, hfId, channel);
+    if (!action && !boundId) return null;
+    const declaration = boundId ? (declarations.find((d) => d.id === boundId) ?? null) : null;
+
+    return {
+      action,
+      boundId,
+      declaration,
+      promote: () => {
+        if (!action) return;
+        // Right-click promote auto-names, so always mint a fresh id — unlike the
+        // Variables-tab card, where the user types the id and may intentionally
+        // reuse one. Auto-binding to a colliding pre-existing variable here would
+        // silently couple two unrelated elements.
+        const id = uniqueId(action.suggestedId, declarations);
+        void persist(`Bind ${action.label.toLowerCase()} to variable "${id}"`, (s) =>
+          applyBind(s, hfId, action, id),
+        );
+      },
+      setDefault: (raw: string) => {
+        if (!boundId || !declaration) return;
+        const next = declaration.type === "color" ? rgbToHex(raw) : raw;
+        void persist(`Set default for "${boundId}"`, (s) => s.setVariableValue(boundId, next));
+      },
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ctx, key]);
+}

package/src/contexts/variablePromoteHelpers.test.ts

@@ -0,0 +1,124 @@
+import { describe, expect, it } from "vitest";
+import type { CompositionVariable } from "@hyperframes/sdk";
+import type { BindAction } from "../components/panels/VariablesBindElement";
+import {
+  matchAction,
+  parseVarId,
+  readBindingFrom,
+  toCamel,
+  uniqueId,
+  type PromoteChannel,
+} from "./variablePromoteHelpers";
+
+function action(kind: BindAction["kind"], styleProp?: string): BindAction {
+  return {
+    key: `${kind}:${styleProp ?? ""}`,
+    label: kind,
+    kind,
+    styleProp,
+    suggestedId: "x",
+    declaration: (id) => ({ id, type: "string", label: id, default: "" }),
+  };
+}
+
+function decl(id: string): CompositionVariable {
+  return { id, type: "string", label: id, default: "" };
+}
+
+describe("toCamel", () => {
+  it("hyphenates CSS props to camelCase", () => {
+    expect(toCamel("font-family")).toBe("fontFamily");
+    expect(toCamel("background-color")).toBe("backgroundColor");
+    expect(toCamel("color")).toBe("color");
+  });
+});
+
+describe("parseVarId", () => {
+  it("extracts the id from a var() reference", () => {
+    expect(parseVarId("var(--headline-color)")).toBe("headline-color");
+    expect(parseVarId("  var(--brand_1)  ")).toBe("brand_1");
+  });
+  it("tolerates a simple fallback value and !important", () => {
+    expect(parseVarId("var(--accent, #000)")).toBe("accent");
+    expect(parseVarId("var(--accent, transparent)")).toBe("accent");
+    expect(parseVarId("var(--accent) !important")).toBe("accent");
+  });
+  it("does not parse a nested-paren fallback (degrades to unbound, not a wrong id)", () => {
+    // Rare hand-authored case; regex can't balance parens. Returning null means
+    // the control shows as unbound rather than binding to a wrong id.
+    expect(parseVarId("var(--accent, rgb(0,0,0))")).toBeNull();
+  });
+  it("returns null for non-var values", () => {
+    expect(parseVarId("#00c3ff")).toBeNull();
+    expect(parseVarId("rgb(0,0,0)")).toBeNull();
+    expect(parseVarId(undefined)).toBeNull();
+    expect(parseVarId("")).toBeNull();
+  });
+});
+
+describe("readBindingFrom", () => {
+  const channels: Record<string, PromoteChannel> = {
+    text: { kind: "text" },
+    src: { kind: "src" },
+    color: { kind: "style", prop: "color" },
+    font: { kind: "style", prop: "font-family" },
+  };
+
+  it("reads data-var-text / data-var-src from attributes", () => {
+    const src = {
+      attributes: { "data-var-text": "title", "data-var-src": "logo" },
+      inlineStyles: {},
+    };
+    expect(readBindingFrom(src, channels.text)).toBe("title");
+    expect(readBindingFrom(src, channels.src)).toBe("logo");
+  });
+
+  it("reads a style-prop binding from inlineStyles var()", () => {
+    const src = {
+      attributes: {},
+      inlineStyles: { color: "var(--accent)", fontFamily: "var(--brand-font)" },
+    };
+    expect(readBindingFrom(src, channels.color)).toBe("accent");
+    expect(readBindingFrom(src, channels.font)).toBe("brand-font");
+  });
+
+  it("returns null when the channel is not bound", () => {
+    const src = { attributes: {}, inlineStyles: { color: "#fff" } };
+    expect(readBindingFrom(src, channels.text)).toBeNull();
+    expect(readBindingFrom(src, channels.color)).toBeNull();
+  });
+});
+
+describe("matchAction", () => {
+  const actions = [
+    action("text"),
+    action("src"),
+    action("style", "color"),
+    action("style", "font-family"),
+  ];
+
+  it("matches text/src by kind", () => {
+    expect(matchAction(actions, { kind: "text" })?.kind).toBe("text");
+    expect(matchAction(actions, { kind: "src" })?.kind).toBe("src");
+  });
+  it("matches a style channel by its prop", () => {
+    expect(matchAction(actions, { kind: "style", prop: "color" })?.styleProp).toBe("color");
+    expect(matchAction(actions, { kind: "style", prop: "font-family" })?.styleProp).toBe(
+      "font-family",
+    );
+  });
+  it("returns null when no action fits the channel", () => {
+    expect(matchAction(actions, { kind: "style", prop: "background-color" })).toBeNull();
+    expect(matchAction([], { kind: "text" })).toBeNull();
+  });
+});
+
+describe("uniqueId", () => {
+  it("returns the base when free", () => {
+    expect(uniqueId("headline", [decl("other")])).toBe("headline");
+  });
+  it("suffixes to avoid collisions", () => {
+    expect(uniqueId("headline", [decl("headline")])).toBe("headline-2");
+    expect(uniqueId("headline", [decl("headline"), decl("headline-2")])).toBe("headline-3");
+  });
+});

package/src/contexts/variablePromoteHelpers.ts

@@ -0,0 +1,53 @@
+/**
+ * Pure helpers for promote-to-variable from the Design panel. Kept free of React
+ * and the SDK session so the binding-detection and id logic can be unit-tested.
+ */
+
+import type { CompositionVariable } from "@hyperframes/sdk";
+import type { BindAction } from "../components/panels/VariablesBindElement";
+
+export type PromoteChannel = { kind: "text" } | { kind: "src" } | { kind: "style"; prop: string };
+
+/** Minimal element shape needed to read a binding — mirrors the SDK snapshot. */
+export interface BindingSource {
+  attributes: Readonly<Record<string, string>>;
+  inlineStyles: Readonly<Record<string, string>>;
+}
+
+/** "font-family" → "fontFamily" to index inlineStyles (camelCase, per SDK convention). */
+export function toCamel(prop: string): string {
+  return prop.replace(/-([a-z])/g, (_, c: string) => c.toUpperCase());
+}
+
+/**
+ * "var(--headline-color)" → "headline-color". Tolerates a fallback
+ * ("var(--id, #fff)") and a trailing "!important"; anything else → null.
+ */
+export function parseVarId(value: string | undefined): string | null {
+  if (!value) return null;
+  const m = /^var\(\s*--([A-Za-z0-9_-]+)\s*(?:,[^)]*)?\)\s*(?:!important)?\s*$/.exec(value.trim());
+  return m ? m[1] : null;
+}
+
+export function matchAction(actions: BindAction[], channel: PromoteChannel): BindAction | null {
+  if (channel.kind === "style") {
+    return actions.find((a) => a.kind === "style" && a.styleProp === channel.prop) ?? null;
+  }
+  return actions.find((a) => a.kind === channel.kind) ?? null;
+}
+
+/** Id of the variable this channel is bound to on the element, or null. */
+export function readBindingFrom(source: BindingSource, channel: PromoteChannel): string | null {
+  if (channel.kind === "text") return source.attributes["data-var-text"] ?? null;
+  if (channel.kind === "src") return source.attributes["data-var-src"] ?? null;
+  return parseVarId(source.inlineStyles[toCamel(channel.prop)]);
+}
+
+/** Unique id from a suggested base, avoiding collisions with existing declarations. */
+export function uniqueId(base: string, existing: CompositionVariable[]): string {
+  const taken = new Set(existing.map((d) => d.id));
+  if (!taken.has(base)) return base;
+  let n = 2;
+  while (taken.has(`${base}-${n}`)) n += 1;
+  return `${base}-${n}`;
+}

package/src/contexts/variablePromoteIntegration.test.ts

@@ -0,0 +1,80 @@
+// @vitest-environment happy-dom
+/**
+ * Round-trip proof for Design-panel promote-to-variable: a bind written by
+ * applyBind against a real SDK session must be detected by readBindingFrom off
+ * the resulting element snapshot — the same read the Design controls rely on to
+ * show bound state.
+ */
+import { describe, expect, it } from "vitest";
+import { openComposition } from "@hyperframes/sdk";
+import { createMemoryAdapter } from "@hyperframes/sdk/adapters/memory";
+import { applyBind, type BindAction } from "../components/panels/VariablesBindElement";
+import { readBindingFrom } from "./variablePromoteHelpers";
+
+const HTML = /* html */ `<!DOCTYPE html>
+<html>
+  <body>
+    <div data-hf-id="hf-title" style="color: rgb(255, 0, 0)">Hello</div>
+    <img data-hf-id="hf-logo" src="logo.png" />
+  </body>
+</html>`;
+
+function open() {
+  return openComposition(HTML, { persist: createMemoryAdapter() });
+}
+
+const styleAction: BindAction = {
+  key: "color",
+  label: "Text color",
+  kind: "style",
+  styleProp: "color",
+  suggestedId: "title-color",
+  declaration: (id) => ({ id, type: "color", label: "Title color", default: "#ff0000" }),
+};
+
+const textAction: BindAction = {
+  key: "text",
+  label: "Text",
+  kind: "text",
+  suggestedId: "title-text",
+  declaration: (id) => ({ id, type: "string", label: "Title text", default: "Hello" }),
+};
+
+const srcAction: BindAction = {
+  key: "src",
+  label: "Image source",
+  kind: "src",
+  suggestedId: "logo",
+  declaration: (id) => ({ id, type: "image", label: "Logo", default: "logo.png" }),
+};
+
+describe("promote round-trip", () => {
+  it("style bind writes var() and reads back the id", async () => {
+    const comp = await open();
+    applyBind(comp, "hf-title", styleAction, "title-color");
+    const snap = comp.getElement("hf-title")!;
+    expect(readBindingFrom(snap, { kind: "style", prop: "color" })).toBe("title-color");
+    expect(comp.getVariableDeclarations().some((d) => d.id === "title-color")).toBe(true);
+  });
+
+  it("text bind writes data-var-text and reads back the id", async () => {
+    const comp = await open();
+    applyBind(comp, "hf-title", textAction, "title-text");
+    const snap = comp.getElement("hf-title")!;
+    expect(readBindingFrom(snap, { kind: "text" })).toBe("title-text");
+  });
+
+  it("src bind writes data-var-src and reads back the id", async () => {
+    const comp = await open();
+    applyBind(comp, "hf-logo", srcAction, "logo");
+    const snap = comp.getElement("hf-logo")!;
+    expect(readBindingFrom(snap, { kind: "src" })).toBe("logo");
+  });
+
+  it("does not report a binding before promote", async () => {
+    const comp = await open();
+    const snap = comp.getElement("hf-title")!;
+    expect(readBindingFrom(snap, { kind: "style", prop: "color" })).toBeNull();
+    expect(readBindingFrom(snap, { kind: "text" })).toBeNull();
+  });
+});