create-next-imagicma 0.1.6 → 0.1.9

package/template-hono/client/src/lib/imagicma-preview-picker.ts

@@ -0,0 +1,1994 @@
+import {
+  bindPreviewParentOrigin,
+  getBoundPreviewParentOrigin,
+  isAllowedPreviewParentOrigin,
+} from "@/lib/imagicma-preview-bridge";
+
+const PREVIEW_PICKER_CHANNEL = "imagicma.preview-picker";
+const PREVIEW_PICKER_VERSION = 2;
+const MAX_SIBLING_HIGHLIGHTERS = 1000;
+const DEBUG_ATTR_ID = "data-imagicma-id";
+const DEBUG_ATTR_PATH = "data-imagicma-path";
+const DEBUG_ATTR_LINE = "data-imagicma-line";
+const DEBUG_ATTR_FILE = "data-imagicma-file";
+const DEBUG_ATTR_COMPONENT = "data-imagicma-component";
+const SORT_DRAG_THRESHOLD_PX = 4;
+
+type PreviewPickerMode = "single" | "design";
+type PreviewPickerSyncMode = "idle" | "picking";
+type PreviewDraftTargetScope = "single" | "group";
+
+type PreviewDraftPatch = {
+  textContent?: string;
+  fontSize?: string;
+  fontWeight?: string;
+  textAlign?: string;
+  color?: string;
+  backgroundColor?: string;
+  borderRadius?: string;
+  margin?: string;
+  padding?: string;
+};
+
+type PreviewSourceStyleField =
+  | "fontSize"
+  | "fontWeight"
+  | "textAlign"
+  | "color"
+  | "backgroundColor"
+  | "borderRadius"
+  | "margin"
+  | "padding";
+
+type PreviewSourceTextBinding = {
+  kind: "jsx-text";
+  source: PreviewSourceRef;
+};
+
+type PreviewSourceRemoveBinding = {
+  kind: "jsx-element";
+  source: PreviewSourceRef;
+};
+
+type PreviewSourceStyleBinding = {
+  kind: "inline-style-property";
+  field: PreviewSourceStyleField;
+  source: PreviewSourceRef;
+};
+
+type PreviewSourceSortBinding =
+  | {
+      kind: "jsx-sibling-order";
+      source: PreviewSourceRef;
+    }
+  | {
+      kind: "array-literal-order";
+      itemKeyField: string;
+      source: PreviewSourceRef;
+    };
+
+type PreviewSourceBindings = {
+  textContent?: PreviewSourceTextBinding;
+  remove?: PreviewSourceRemoveBinding;
+  fontSize?: PreviewSourceStyleBinding;
+  fontWeight?: PreviewSourceStyleBinding;
+  textAlign?: PreviewSourceStyleBinding;
+  color?: PreviewSourceStyleBinding;
+  backgroundColor?: PreviewSourceStyleBinding;
+  borderRadius?: PreviewSourceStyleBinding;
+  margin?: PreviewSourceStyleBinding;
+  padding?: PreviewSourceStyleBinding;
+  sort?: PreviewSourceSortBinding;
+};
+
+type PreviewSourceRef = {
+  file: string;
+  line: number;
+  column: number;
+  nodeKey: string;
+  templateKey: string;
+  componentName?: string;
+  ownerName?: string;
+};
+
+type PreviewDraftApplyPayload = {
+  revision?: number;
+  target?: {
+    scope: PreviewDraftTargetScope;
+    nodeKey?: string;
+    groupKey?: string;
+    itemKey?: string;
+  };
+  patch: PreviewDraftPatch;
+};
+
+type PreviewOverridePageEntry = {
+  nodes?: Record<string, { textContent?: string; style?: Omit<PreviewDraftPatch, "textContent">; removed?: boolean }>;
+  groups?: Record<string, { style?: Omit<PreviewDraftPatch, "textContent"> }>;
+  sorts?: Record<string, string[]>;
+};
+
+type PreviewSortPreviewPayload = {
+  sortableParentId: string;
+  orderedSortKeys: readonly string[];
+};
+
+type PreviewLinkedSourceSelection = {
+  nodeId?: string;
+  sourceFile?: string;
+  sortKey?: string;
+  source?: PreviewSourceRef;
+  repeat?: {
+    groupKey: string;
+    sortableParentId?: string;
+    itemKey?: string;
+    index?: number;
+    size?: number;
+    sortable: boolean;
+  };
+  sourceBindings?: PreviewSourceBindings;
+};
+
+type PreviewPickerStateSyncPayload = {
+  mode: PreviewPickerSyncMode;
+  pageKey: string;
+  overrides: PreviewOverridePageEntry | null;
+  selectedNodeId: string | null;
+  draft: PreviewDraftApplyPayload | null;
+  drafts: PreviewDraftApplyPayload[];
+  pendingSort: PreviewSortPreviewPayload | null;
+};
+
+type PickerMessage =
+  | {
+      channel: typeof PREVIEW_PICKER_CHANNEL;
+      version: typeof PREVIEW_PICKER_VERSION;
+      type: "IMAGICMA_PICKER_FRAME_HELLO";
+      frameInstanceId: string;
+      payload?: {
+        pageUrl?: string;
+        protocolVersion?: number;
+        reason?: string;
+      };
+    }
+  | {
+      channel: typeof PREVIEW_PICKER_CHANNEL;
+      version: typeof PREVIEW_PICKER_VERSION;
+      type: "IMAGICMA_PICKER_STATE_SYNC";
+      frameInstanceId: string;
+      sessionId: string | null;
+      payload: PreviewPickerStateSyncPayload;
+    }
+  | {
+      channel: typeof PREVIEW_PICKER_CHANNEL;
+      version: typeof PREVIEW_PICKER_VERSION;
+      type: "IMAGICMA_PICKER_STOP";
+      frameInstanceId: string;
+      sessionId: string | null;
+    };
+
+type RuntimeState = {
+  frameInstanceId: string;
+  parentOrigin: string | null;
+  activeSessionId: string | null;
+  enabled: boolean;
+  selectedElement: HTMLElement | null;
+  hoveredElement: HTMLElement | null;
+  overlayRoot: HTMLDivElement | null;
+  hoverLabelEl: HTMLDivElement | null;
+  selectedLabelEl: HTMLDivElement | null;
+  hoverBoxEl: HTMLDivElement | null;
+  selectedBoxEl: HTMLDivElement | null;
+  sortIndicatorEl: HTMLDivElement | null;
+  hoverSiblingBoxEls: HTMLDivElement[];
+  selectedSiblingBoxEls: HTMLDivElement[];
+  draftStyleEl: HTMLStyleElement | null;
+  persistedOverrides: PreviewOverridePageEntry | null;
+  draftPayload: PreviewDraftApplyPayload | null;
+  draftPayloads: PreviewDraftApplyPayload[];
+  pendingSort: { groupKey: string; orderedSortKeys: readonly string[] } | null;
+  draggingSortKey: string | null;
+  sortPointerId: number | null;
+  sortPointerStartX: number;
+  sortPointerStartY: number;
+  sortDragging: boolean;
+  sortSourceElement: HTMLElement | null;
+  sortIndicatorTarget: HTMLElement | null;
+  sortIndicatorPlacement: "before" | "after" | null;
+  ignoreClickUntilTs: number;
+  originalText: Map<HTMLElement, { mode: "full"; value: string } | { mode: "owned"; nodes: Text[]; value: string[] }>;
+  originalDraftStyles: Map<HTMLElement, Record<PreviewSourceStyleField, { value: string; priority: string }>>;
+  originalSortStyles: Map<HTMLElement, {
+    transform: string;
+    transition: string;
+    zIndex: string;
+  }>;
+  throttledRecalculate: (() => void) | null;
+  mutationObserver: MutationObserver | null;
+  suppressMutationObserver: number;
+};
+
+type SortableMetadata = {
+  sortableParentId: string;
+  itemKey: string;
+  index: number;
+  size: number;
+  sortable: true;
+  itemElements: HTMLElement[];
+  mode: "explicit" | "sibling";
+};
+
+function logPreviewPickerRuntime(event: string, details?: Record<string, unknown>) {
+  console.debug("[PreviewPicker][frame]", event, details ?? {});
+}
+
+declare global {
+  interface Window {
+    __IMAGICMA_PREVIEW_PICKER__?: boolean;
+  }
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null;
+}
+
+function trimText(value: unknown): string {
+  return typeof value === "string" ? value.trim() : "";
+}
+
+function createFrameInstanceId(): string {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return `frame_${crypto.randomUUID()}`;
+  }
+  return `frame_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 10)}`;
+}
+
+function isPickerMessage(value: unknown): value is PickerMessage {
+  if (!isRecord(value)) return false;
+  if (value.channel !== PREVIEW_PICKER_CHANNEL) return false;
+  if (value.version !== PREVIEW_PICKER_VERSION) return false;
+  if (typeof value.type !== "string") return false;
+  if (typeof value.frameInstanceId !== "string" || value.frameInstanceId.length === 0) return false;
+  return true;
+}
+
+function escapeAttributeValue(value: string): string {
+  return typeof CSS !== "undefined" && typeof CSS.escape === "function" ? CSS.escape(value) : value.replace(/"/g, '\\"');
+}
+
+function parseLineAndColumnFromId(id: string): { line: number; column: number } | null {
+  const match = /:(\d+):(\d+)$/.exec(id);
+  if (!match) return null;
+  const line = Number(match[1]);
+  const column = Number(match[2]);
+  if (!Number.isFinite(line) || !Number.isFinite(column)) return null;
+  return { line, column };
+}
+
+function buildSelectorForElement(element: HTMLElement): string {
+  const nodeId = trimText(element.getAttribute("data-imagicma-node-id"));
+  if (nodeId) {
+    return `[data-imagicma-node-id="${escapeAttributeValue(nodeId)}"]`;
+  }
+
+  if (element.id) {
+    return `#${escapeAttributeValue(element.id)}`;
+  }
+
+  return element.tagName.toLowerCase();
+}
+
+function getSourceId(element: HTMLElement): string {
+  return trimText(element.getAttribute(DEBUG_ATTR_ID));
+}
+
+function getSourceFile(element: HTMLElement): string {
+  return trimText(element.getAttribute(DEBUG_ATTR_PATH))
+    || trimText(element.getAttribute(DEBUG_ATTR_FILE))
+    || trimText(element.getAttribute("data-imagicma-source-file"));
+}
+
+function getComponentName(element: HTMLElement): string {
+  return trimText(element.getAttribute(DEBUG_ATTR_COMPONENT))
+    || trimText(element.getAttribute("data-imagicma-component"))
+    || trimText(element.getAttribute("data-component-name"))
+    || element.tagName.toLowerCase();
+}
+
+function getSourceMetadata(element: HTMLElement) {
+  const sourceId = getSourceId(element);
+  const sourceFile = getSourceFile(element);
+  const parsed = sourceId ? parseLineAndColumnFromId(sourceId) : null;
+  if (!sourceId || !sourceFile || !parsed) return null;
+
+  return {
+    file: sourceFile,
+    line: parsed.line,
+    column: parsed.column,
+    nodeKey: sourceId,
+    templateKey: sourceId,
+    componentName: getComponentName(element),
+  };
+}
+
+function setSemanticAttribute(element: HTMLElement, name: string, value: string | undefined, force = false) {
+  const nextValue = trimText(value);
+  if (!nextValue) return;
+  if (!force && trimText(element.getAttribute(name))) return;
+  element.setAttribute(name, nextValue);
+}
+
+function toSyntheticNodeId(element: HTMLElement): string | null {
+  const debugId = getSourceId(element);
+  if (debugId) return `runtime:${debugId}`;
+
+  const sourcePath = trimText(element.getAttribute(DEBUG_ATTR_PATH));
+  const line = trimText(element.getAttribute(DEBUG_ATTR_LINE));
+  const componentName = getComponentName(element);
+  if (!sourcePath) return null;
+
+  return [
+    "runtime",
+    sourcePath,
+    line || "0",
+    componentName || element.tagName.toLowerCase(),
+  ].join(":");
+}
+
+function inferSemanticKind(element: HTMLElement): "text" | "box" {
+  return isSimpleTextElement(element) ? "text" : "box";
+}
+
+function annotateBaseSemanticNode(element: HTMLElement) {
+  const syntheticNodeId = toSyntheticNodeId(element);
+  if (!syntheticNodeId) return;
+
+  setSemanticAttribute(element, "data-imagicma-node-id", syntheticNodeId);
+  setSemanticAttribute(element, "data-imagicma-kind", inferSemanticKind(element));
+  setSemanticAttribute(element, "data-imagicma-source-file", getSourceFile(element));
+}
+
+function hydrateRuntimeSemantics() {
+  document.querySelectorAll<HTMLElement>(`[${DEBUG_ATTR_ID}]`).forEach(annotateBaseSemanticNode);
+}
+
+function getRepeatItemRoot(element: HTMLElement): HTMLElement | null {
+  return element.closest<HTMLElement>('[data-imagicma-kind="repeat-item"]');
+}
+
+function queryRepeatItemRoots(groupKey: string): HTMLElement[] {
+  if (!groupKey) return [];
+
+  return Array.from(
+    document.querySelectorAll<HTMLElement>(
+      `[data-imagicma-kind="repeat-item"][data-imagicma-repeat-group="${escapeAttributeValue(groupKey)}"]`,
+    ),
+  );
+}
+
+function findNodeWithinRepeatItem(root: HTMLElement, nodeId: string): HTMLElement | null {
+  if (trimText(root.getAttribute("data-imagicma-node-id")) === nodeId) {
+    return root;
+  }
+
+  return root.querySelector<HTMLElement>(
+    `[data-imagicma-node-id="${escapeAttributeValue(nodeId)}"]`,
+  );
+}
+
+function getRepeatMetadata(element: HTMLElement) {
+  const repeatNode = getRepeatItemRoot(element);
+  const groupKey = trimText(repeatNode?.getAttribute("data-imagicma-repeat-group"));
+  const itemKey = trimText(repeatNode?.getAttribute("data-imagicma-sort-key"));
+  const sortableParentId = trimText(repeatNode?.getAttribute("data-imagicma-sort-parent"));
+
+  if (!groupKey && !sortableParentId) return null;
+
+  const siblings = sortableParentId
+    ? Array.from(
+        document.querySelectorAll<HTMLElement>(
+          `[data-imagicma-kind="repeat-item"][data-imagicma-sort-parent="${escapeAttributeValue(sortableParentId)}"]`,
+        ),
+      )
+    : [];
+
+  return {
+    groupKey: groupKey || sortableParentId,
+    sortableParentId: sortableParentId || undefined,
+    itemKey: itemKey || undefined,
+    index: itemKey ? siblings.findIndex((item) => trimText(item.getAttribute("data-imagicma-sort-key")) === itemKey) : undefined,
+    size: siblings.length || undefined,
+    sortable: Boolean(sortableParentId && itemKey),
+  };
+}
+
+function getElementNodeId(element: HTMLElement | null | undefined): string {
+  return trimText(element?.getAttribute("data-imagicma-node-id"));
+}
+
+function getDirectSemanticSiblingItems(parent: HTMLElement | null): HTMLElement[] {
+  if (!parent) return [];
+
+  const items = Array.from(parent.children).filter((child): child is HTMLElement => {
+    return child instanceof HTMLElement && Boolean(getElementNodeId(child));
+  });
+
+  if (items.length < 2) return [];
+
+  const keys = items.map((item) => getElementNodeId(item));
+  if (keys.some((key) => !key)) return [];
+  if (new Set(keys).size !== keys.length) return [];
+
+  return items;
+}
+
+function getSyntheticSortableParentId(parent: HTMLElement | null): string | null {
+  if (!parent) return null;
+  return getElementNodeId(parent) || toSyntheticNodeId(parent);
+}
+
+function getSiblingSortableMetadata(element: HTMLElement): SortableMetadata | null {
+  const nodeId = getElementNodeId(element);
+  if (!nodeId) return null;
+
+  const parent = element.parentElement;
+  const itemElements = getDirectSemanticSiblingItems(parent);
+  if (itemElements.length < 2) return null;
+
+  const sortableParentId = getSyntheticSortableParentId(parent);
+  if (!sortableParentId) return null;
+
+  const index = itemElements.findIndex((item) => item === element);
+  if (index < 0) return null;
+
+  return {
+    sortableParentId,
+    itemKey: nodeId,
+    index,
+    size: itemElements.length,
+    sortable: true,
+    itemElements,
+    mode: "sibling",
+  };
+}
+
+function getExplicitSortableMetadata(element: HTMLElement): SortableMetadata | null {
+  const sortableParentId = trimText(element.getAttribute("data-imagicma-sort-parent"));
+  const itemKey = trimText(element.getAttribute("data-imagicma-sort-key"));
+  if (!sortableParentId || !itemKey) return null;
+
+  const itemElements = Array.from(
+    document.querySelectorAll<HTMLElement>(
+      `[data-imagicma-kind="repeat-item"][data-imagicma-sort-parent="${escapeAttributeValue(sortableParentId)}"][data-imagicma-sort-key]`,
+    ),
+  );
+  if (itemElements.length < 2) return null;
+
+  const index = itemElements.findIndex((item) => trimText(item.getAttribute("data-imagicma-sort-key")) === itemKey);
+  if (index < 0) return null;
+
+  return {
+    sortableParentId,
+    itemKey,
+    index,
+    size: itemElements.length,
+    sortable: true,
+    itemElements,
+    mode: "explicit",
+  };
+}
+
+function getSortableMetadata(element: HTMLElement): SortableMetadata | null {
+  return getExplicitSortableMetadata(element) || getSiblingSortableMetadata(element);
+}
+
+function queryPeerElements(selector: string, element: HTMLElement): HTMLElement[] {
+  return Array.from(document.querySelectorAll<HTMLElement>(selector))
+    .filter((item) => item !== element)
+    .slice(0, MAX_SIBLING_HIGHLIGHTERS);
+}
+
+function getPeerElements(element: HTMLElement): HTMLElement[] {
+  const repeatMetadata = getRepeatMetadata(element);
+  const repeatGroupId = repeatMetadata?.groupKey || "";
+  const nodeId = trimText(element.getAttribute("data-imagicma-node-id"));
+
+  if (repeatGroupId && nodeId) {
+    return queryRepeatItemRoots(repeatGroupId)
+      .map((root) => findNodeWithinRepeatItem(root, nodeId))
+      .filter((item): item is HTMLElement => Boolean(item) && item !== element)
+      .slice(0, MAX_SIBLING_HIGHLIGHTERS);
+  }
+
+  if (nodeId) {
+    return queryPeerElements(
+      `[data-imagicma-node-id="${escapeAttributeValue(nodeId)}"]`,
+      element,
+    );
+  }
+
+  return [];
+}
+
+function isElementVisible(element: HTMLElement): boolean {
+  const rect = element.getBoundingClientRect();
+  return rect.bottom > 0 && rect.top < window.innerHeight && rect.right > 0 && rect.left < window.innerWidth;
+}
+
+function throttleRAF(callback: () => void): () => void {
+  let frame: number | null = null;
+  return () => {
+    if (frame !== null) return;
+    frame = window.requestAnimationFrame(() => {
+      frame = null;
+      callback();
+    });
+  };
+}
+
+function findSortableItems(sortableParentId: string): HTMLElement[] {
+  const explicitItems = Array.from(
+    document.querySelectorAll<HTMLElement>(
+      `[data-imagicma-kind="repeat-item"][data-imagicma-sort-parent="${escapeAttributeValue(sortableParentId)}"][data-imagicma-sort-key]`,
+    ),
+  );
+  if (explicitItems.length > 0) return explicitItems;
+
+  const candidateParents = new Set<HTMLElement>();
+  document.querySelectorAll<HTMLElement>("[data-imagicma-node-id]").forEach((element) => {
+    if (element.parentElement) {
+      candidateParents.add(element.parentElement);
+    }
+  });
+
+  for (const parent of candidateParents) {
+    const parentId = getSyntheticSortableParentId(parent);
+    if (parentId !== sortableParentId) continue;
+    const items = getDirectSemanticSiblingItems(parent);
+    if (items.length >= 2) return items;
+  }
+
+  return [];
+}
+
+function getSortableItemKey(element: HTMLElement): string | null {
+  return getSortableMetadata(element)?.itemKey || null;
+}
+
+function getSortableAxis(items: HTMLElement[]): "horizontal" | "vertical" {
+  if (items.length < 2) return "vertical";
+  const firstRect = items[0].getBoundingClientRect();
+  const secondRect = items[1].getBoundingClientRect();
+  const dx = Math.abs(secondRect.left - firstRect.left);
+  const dy = Math.abs(secondRect.top - firstRect.top);
+  return dx > dy ? "horizontal" : "vertical";
+}
+
+function beginInternalMutation(state: RuntimeState) {
+  state.suppressMutationObserver += 1;
+}
+
+function endInternalMutation(state: RuntimeState) {
+  queueMicrotask(() => {
+    state.suppressMutationObserver = Math.max(0, state.suppressMutationObserver - 1);
+  });
+}
+
+function runWithInternalMutation<T>(state: RuntimeState, fn: () => T): T {
+  beginInternalMutation(state);
+  try {
+    return fn();
+  } finally {
+    endInternalMutation(state);
+  }
+}
+
+function applySortableAffordance(state: RuntimeState, enabled: boolean, sortableParentId?: string | null) {
+  runWithInternalMutation(state, () => {
+    document.querySelectorAll<HTMLElement>("[data-imagicma-node-id]").forEach((item) => {
+      if (item.dataset.imagicmaSortCursor === "grab") {
+        item.style.cursor = "";
+        delete item.dataset.imagicmaSortCursor;
+      }
+    });
+
+    if (!enabled || !sortableParentId) return;
+
+    findSortableItems(sortableParentId).forEach((item) => {
+      item.style.cursor = "grab";
+      item.dataset.imagicmaSortCursor = "grab";
+    });
+  });
+}
+
+function isSimpleTextElement(element: HTMLElement): boolean {
+  if (element.children.length > 0) return false;
+  return trimText(element.textContent).length > 0;
+}
+
+const INLINE_STYLE_BINDINGS: Array<{ field: PreviewSourceStyleField; cssName: string }> = [
+  { field: "fontSize", cssName: "font-size" },
+  { field: "fontWeight", cssName: "font-weight" },
+  { field: "textAlign", cssName: "text-align" },
+  { field: "color", cssName: "color" },
+  { field: "backgroundColor", cssName: "background-color" },
+  { field: "borderRadius", cssName: "border-radius" },
+  { field: "margin", cssName: "margin" },
+  { field: "padding", cssName: "padding" },
+];
+
+function getExplicitArraySortBinding(element: HTMLElement): PreviewSourceSortBinding | undefined {
+  const root = getRepeatItemRoot(element) || element;
+  const bindingSourceFile = trimText(root.getAttribute("data-imagicma-sort-source-file"));
+  const bindingLine = Number(trimText(root.getAttribute("data-imagicma-sort-source-line")));
+  const bindingColumn = Number(trimText(root.getAttribute("data-imagicma-sort-source-column")));
+  const itemKeyField = trimText(root.getAttribute("data-imagicma-sort-item-key-field"));
+  if (!bindingSourceFile || !Number.isFinite(bindingLine) || !Number.isFinite(bindingColumn) || !itemKeyField) {
+    return undefined;
+  }
+
+  return {
+    kind: "array-literal-order",
+    itemKeyField,
+    source: {
+      file: bindingSourceFile,
+      line: bindingLine,
+      column: bindingColumn,
+      nodeKey: `${bindingSourceFile}:${bindingLine}:${bindingColumn}`,
+      templateKey: `${bindingSourceFile}:${bindingLine}:${bindingColumn}`,
+      componentName: "array",
+    },
+  };
+}
+
+function buildSourceBindings(element: HTMLElement, source: ReturnType<typeof getSourceMetadata>): PreviewSourceBindings | undefined {
+  if (!source) return undefined;
+
+  const bindings: PreviewSourceBindings = {
+    remove: {
+      kind: "jsx-element",
+      source,
+    },
+  };
+
+  if (isSimpleTextElement(element)) {
+    bindings.textContent = {
+      kind: "jsx-text",
+      source,
+    };
+  }
+
+  for (const entry of INLINE_STYLE_BINDINGS) {
+    const value = trimText(element.style.getPropertyValue(entry.cssName)) || trimText((element.style as CSSStyleDeclaration & Record<string, string>)[entry.field]);
+    if (!value) continue;
+    bindings[entry.field] = {
+      kind: "inline-style-property",
+      field: entry.field,
+      source,
+    };
+  }
+
+  const sortable = getSortableMetadata(element);
+  const explicitSortBinding = getExplicitArraySortBinding(element);
+  if (explicitSortBinding) {
+    bindings.sort = explicitSortBinding;
+  } else if (sortable?.sortable && sortable.mode === "sibling") {
+    bindings.sort = {
+      kind: "jsx-sibling-order",
+      source,
+    };
+  }
+
+  return Object.keys(bindings).length > 0 ? bindings : undefined;
+}
+
+function getEditableFields(bindings: PreviewSourceBindings | undefined, sortable: SortableMetadata | null) {
+  return {
+    textContent: Boolean(bindings?.textContent),
+    fontSize: Boolean(bindings?.fontSize),
+    fontWeight: Boolean(bindings?.fontWeight),
+    textAlign: Boolean(bindings?.textAlign),
+    color: Boolean(bindings?.color),
+    backgroundColor: Boolean(bindings?.backgroundColor),
+    borderRadius: Boolean(bindings?.borderRadius),
+    margin: Boolean(bindings?.margin),
+    padding: Boolean(bindings?.padding),
+    sortable: Boolean(bindings?.sort || sortable?.sortable),
+  };
+}
+
+function getComputedStyleSnapshot(element: HTMLElement) {
+  const style = window.getComputedStyle(element);
+  return {
+    textContent: trimText(element.textContent),
+    fontSize: trimText(style.fontSize),
+    fontWeight: trimText(style.fontWeight),
+    textAlign: trimText(style.textAlign),
+    color: trimText(style.color),
+    backgroundColor: trimText(style.backgroundColor),
+    borderRadius: trimText(style.borderRadius),
+    margin: trimText(style.margin),
+    padding: trimText(style.padding),
+  };
+}
+
+function buildLinkedSourceSelection(element: HTMLElement): PreviewLinkedSourceSelection {
+  const source = getSourceMetadata(element);
+  const repeat = getRepeatMetadata(element);
+  const sourceBindings = buildSourceBindings(element, source);
+
+  return {
+    nodeId: trimText(element.getAttribute("data-imagicma-node-id")) || undefined,
+    sourceFile: trimText(element.getAttribute("data-imagicma-source-file")) || source?.file || undefined,
+    sortKey: getSortableMetadata(element)?.itemKey || repeat?.itemKey || undefined,
+    source: source || undefined,
+    repeat: repeat || undefined,
+    sourceBindings,
+  };
+}
+
+function getSortablePeerSelections(element: HTMLElement): PreviewLinkedSourceSelection[] | undefined {
+  const sortable = getSortableMetadata(element);
+  if (!sortable?.sortable) return undefined;
+
+  const items = sortable.itemElements
+    .map((item) => buildLinkedSourceSelection(item))
+    .filter((item) => item.sortKey || item.source || item.sourceFile);
+
+  return items.length > 0 ? items : undefined;
+}
+
+function getSelectionPayload(element: HTMLElement) {
+  const rect = element.getBoundingClientRect();
+  const source = getSourceMetadata(element);
+  const repeat = getRepeatMetadata(element);
+  const sortable = getSortableMetadata(element);
+  const peers = getPeerElements(element);
+  const sourceBindings = buildSourceBindings(element, source);
+  const peerSelections = peers.map((peer) => buildLinkedSourceSelection(peer));
+  const sortablePeers = getSortablePeerSelections(element);
+  const sourceId = source?.templateKey || trimText(element.getAttribute("data-imagicma-node-id"));
+  const persistCapability = {
+    textContent: sourceBindings?.textContent ? "source" : (isSimpleTextElement(element) ? "preview-only" : "unsupported"),
+    style: INLINE_STYLE_BINDINGS.some((entry) => Boolean(sourceBindings?.[entry.field])) ? "source" : "preview-only",
+    sort: sourceBindings?.sort ? "source" : (sortable?.sortable ? "preview-only" : "unsupported"),
+  };
+
+  return {
+    pageUrl: window.location.href,
+    selector: buildSelectorForElement(element),
+    tagName: element.tagName.toLowerCase(),
+    textSnippet: trimText(element.textContent).slice(0, 240),
+    rect: {
+      x: rect.left,
+      y: rect.top,
+      width: rect.width,
+      height: rect.height,
+    },
+    attributes: {
+      class: trimText(element.getAttribute("class")),
+      id: trimText(element.getAttribute("id")),
+      href: trimText(element.getAttribute("href")),
+      "data-testid": trimText(element.getAttribute("data-testid")),
+    },
+    templateKey: sourceId || undefined,
+    nodeId: trimText(element.getAttribute("data-imagicma-node-id")) || undefined,
+    kind: trimText(element.getAttribute("data-imagicma-kind")) || undefined,
+    sourceFile: trimText(element.getAttribute("data-imagicma-source-file")) || source?.file || undefined,
+    propPath: trimText(element.getAttribute("data-imagicma-prop-path")) || undefined,
+    repeatGroupId: trimText(element.getAttribute("data-imagicma-repeat-group")) || repeat?.groupKey || undefined,
+    repeatTemplate: trimText(element.getAttribute("data-imagicma-repeat-template")) || undefined,
+    sortableParentId: sortable?.sortableParentId || undefined,
+    sortKey: sortable?.itemKey || undefined,
+    sortIndex: sortable?.index,
+    editableFields: getEditableFields(sourceBindings, sortable),
+    computedStyleSnapshot: getComputedStyleSnapshot(element),
+    peerRects: peers.map((peer) => {
+      const peerRect = peer.getBoundingClientRect();
+      return {
+        nodeId: trimText(peer.getAttribute("data-imagicma-node-id")) || getSourceId(peer) || buildSelectorForElement(peer),
+        rect: {
+          x: peerRect.left,
+          y: peerRect.top,
+          width: peerRect.width,
+          height: peerRect.height,
+        },
+      };
+    }),
+    source: source || undefined,
+    repeat: repeat || undefined,
+    persistCapability,
+    sourceBindings,
+    peerSelections: peerSelections.length > 0 ? peerSelections : undefined,
+    sortablePeers,
+  };
+}
+
+function createOverlayBox(): HTMLDivElement {
+  const box = document.createElement("div");
+  Object.assign(box.style, {
+    position: "fixed",
+    display: "none",
+    pointerEvents: "none",
+    boxSizing: "border-box",
+    borderRadius: "2px",
+  });
+  return box;
+}
+
+function createOverlayLabel(): HTMLDivElement {
+  const label = document.createElement("div");
+  Object.assign(label.style, {
+    position: "fixed",
+    display: "none",
+    padding: "6px 10px",
+    borderRadius: "8px",
+    background: "#1d7cf2",
+    color: "#fff",
+    fontSize: "12px",
+    fontWeight: "600",
+    lineHeight: "1",
+    boxShadow: "0 8px 24px rgba(0,0,0,0.2)",
+    maxWidth: "240px",
+    whiteSpace: "nowrap",
+  });
+  return label;
+}
+
+function createOverlayRoot(state: RuntimeState): HTMLDivElement {
+  if (state.overlayRoot) return state.overlayRoot;
+
+  const root = document.createElement("div");
+  root.setAttribute("data-imagicma-picker-overlay", "true");
+  Object.assign(root.style, {
+    position: "fixed",
+    inset: "0",
+    pointerEvents: "none",
+    zIndex: "2147483646",
+  });
+
+  state.hoverBoxEl = createOverlayBox();
+  state.selectedBoxEl = createOverlayBox();
+  state.hoverLabelEl = createOverlayLabel();
+  state.selectedLabelEl = createOverlayLabel();
+  state.sortIndicatorEl = document.createElement("div");
+  state.sortIndicatorEl.setAttribute("data-imagicma-picker-sort-indicator", "true");
+  Object.assign(state.sortIndicatorEl.style, {
+    position: "fixed",
+    display: "none",
+    pointerEvents: "none",
+    zIndex: "2147483647",
+    boxSizing: "border-box",
+    borderRadius: "0",
+    background: "#1d7cf2",
+    boxShadow: "none",
+  });
+
+  root.appendChild(state.hoverBoxEl);
+  root.appendChild(state.selectedBoxEl);
+  root.appendChild(state.hoverLabelEl);
+  root.appendChild(state.selectedLabelEl);
+  root.appendChild(state.sortIndicatorEl);
+
+  document.documentElement.appendChild(root);
+  state.overlayRoot = root;
+  return root;
+}
+
+function hideOverlayBox(box: HTMLDivElement | null) {
+  if (!box) return;
+  box.style.display = "none";
+}
+
+function hideOverlayLabel(label: HTMLDivElement | null) {
+  if (!label) return;
+  label.style.display = "none";
+  label.textContent = "";
+}
+
+function clearSiblingBoxes(boxes: HTMLDivElement[]) {
+  boxes.forEach((box) => box.remove());
+  boxes.length = 0;
+}
+
+function clearOverlay(state: RuntimeState) {
+  hideOverlayBox(state.hoverBoxEl);
+  hideOverlayBox(state.selectedBoxEl);
+  hideOverlayBox(state.sortIndicatorEl);
+  hideOverlayLabel(state.hoverLabelEl);
+  hideOverlayLabel(state.selectedLabelEl);
+  clearSiblingBoxes(state.hoverSiblingBoxEls);
+  clearSiblingBoxes(state.selectedSiblingBoxEls);
+}
+
+function getVisibleOverlayRect(element: HTMLElement) {
+  const rect = element.getBoundingClientRect();
+  if (rect.width <= 0 || rect.height <= 0) return null;
+  if (rect.bottom <= 0 || rect.top >= window.innerHeight || rect.right <= 0 || rect.left >= window.innerWidth) {
+    return null;
+  }
+
+  const top = Math.max(0, rect.top);
+  const bottom = Math.min(window.innerHeight, rect.bottom);
+  const height = Math.max(0, bottom - top);
+  if (height <= 0) return null;
+
+  return {
+    top,
+    left: rect.left,
+    width: rect.width,
+    height,
+    rawTop: rect.top,
+  };
+}
+
+function syncOverlayBox(
+  box: HTMLDivElement | null,
+  element: HTMLElement | null,
+  style: { border: string; background: string; outlineOffset?: string },
+) {
+  if (!box || !element) {
+    hideOverlayBox(box);
+    return;
+  }
+
+  const rect = getVisibleOverlayRect(element);
+  if (!rect) {
+    hideOverlayBox(box);
+    return;
+  }
+
+  Object.assign(box.style, {
+    display: "block",
+    top: `${rect.top}px`,
+    left: `${rect.left}px`,
+    width: `${rect.width}px`,
+    height: `${rect.height}px`,
+    border: style.border,
+    background: style.background,
+    outlineOffset: style.outlineOffset ?? "0",
+  });
+}
+
+function syncOverlayLabel(label: HTMLDivElement | null, element: HTMLElement | null, peerCount: number) {
+  if (!label || !element) {
+    hideOverlayLabel(label);
+    return;
+  }
+
+  const rect = getVisibleOverlayRect(element);
+  if (!rect) {
+    hideOverlayLabel(label);
+    return;
+  }
+
+  label.textContent = `${getComponentName(element)}${peerCount > 0 ? ` ×${peerCount + 1}` : ""}`;
+  Object.assign(label.style, {
+    display: "block",
+    top: `${Math.max(8, rect.rawTop - 30)}px`,
+    left: `${Math.max(8, rect.left)}px`,
+  });
+}
+
+function syncSiblingOverlayBoxes(
+  root: HTMLDivElement,
+  boxes: HTMLDivElement[],
+  elements: HTMLElement[],
+  style: { border: string; background: string },
+) {
+  clearSiblingBoxes(boxes);
+
+  for (const element of elements.filter(isElementVisible)) {
+    const rect = getVisibleOverlayRect(element);
+    if (!rect) continue;
+    const box = createOverlayBox();
+    Object.assign(box.style, {
+      display: "block",
+      top: `${rect.top}px`,
+      left: `${rect.left}px`,
+      width: `${rect.width}px`,
+      height: `${rect.height}px`,
+      border: style.border,
+      background: style.background,
+    });
+    root.appendChild(box);
+    boxes.push(box);
+  }
+}
+
+function renderOverlayLayer(
+  state: RuntimeState,
+  element: HTMLElement | null,
+  peers: HTMLElement[],
+  variant: "hover" | "selected",
+) {
+  const root = createOverlayRoot(state);
+  const visiblePeers = peers.filter((peer) => peer !== element && isElementVisible(peer));
+
+  if (variant === "selected") {
+    syncOverlayBox(state.selectedBoxEl, element, {
+      border: "2px solid #1d7cf2",
+      background: "transparent",
+      outlineOffset: "3px",
+    });
+    syncOverlayLabel(state.selectedLabelEl, element, visiblePeers.length);
+    syncSiblingOverlayBoxes(root, state.selectedSiblingBoxEls, visiblePeers, {
+      border: "2px dashed #1d7cf2",
+      background: "rgba(29,124,242,0.08)",
+    });
+    return;
+  }
+
+  syncOverlayBox(state.hoverBoxEl, element, {
+    border: "2px dashed rgba(29,124,242,0.85)",
+    background: "rgba(29,124,242,0.04)",
+  });
+  syncOverlayLabel(state.hoverLabelEl, element, visiblePeers.length);
+  syncSiblingOverlayBoxes(root, state.hoverSiblingBoxEls, visiblePeers, {
+    border: "2px dashed rgba(29,124,242,0.6)",
+    background: "rgba(29,124,242,0.04)",
+  });
+}
+
+function syncSortIndicator(
+  state: RuntimeState,
+  target: HTMLElement | null,
+  placement: "before" | "after" | null,
+  items: HTMLElement[] = [],
+) {
+  const indicator = state.sortIndicatorEl;
+  if (!indicator || !target || !placement) {
+    state.sortIndicatorTarget = null;
+    state.sortIndicatorPlacement = null;
+    hideOverlayBox(indicator);
+    return;
+  }
+
+  state.sortIndicatorTarget = target;
+  state.sortIndicatorPlacement = placement;
+
+  const rect = target.getBoundingClientRect();
+  if (rect.width <= 0 || rect.height <= 0) {
+    state.sortIndicatorTarget = null;
+    state.sortIndicatorPlacement = null;
+    hideOverlayBox(indicator);
+    return;
+  }
+
+  const axis = getSortableAxis(items);
+  if (axis === "horizontal") {
+    const x = placement === "before" ? rect.left : rect.right;
+    Object.assign(indicator.style, {
+      display: "block",
+      top: `${Math.max(0, rect.top)}px`,
+      left: `${Math.max(0, x - 2)}px`,
+      width: "4px",
+      height: `${rect.height}px`,
+    });
+    return;
+  }
+
+  const y = placement === "before" ? rect.top : rect.bottom;
+  Object.assign(indicator.style, {
+    display: "block",
+    top: `${Math.max(0, y - 2)}px`,
+    left: `${Math.max(0, rect.left)}px`,
+    width: `${rect.width}px`,
+    height: "4px",
+  });
+}
+
+function clearSortGesture(state: RuntimeState) {
+  if (state.sortSourceElement) {
+    runWithInternalMutation(state, () => {
+      state.sortSourceElement!.style.opacity = "";
+    });
+  }
+  hideOverlayBox(state.sortIndicatorEl);
+  state.draggingSortKey = null;
+  state.sortPointerId = null;
+  state.sortPointerStartX = 0;
+  state.sortPointerStartY = 0;
+  state.sortDragging = false;
+  state.sortSourceElement = null;
+  state.sortIndicatorTarget = null;
+  state.sortIndicatorPlacement = null;
+}
+
+function buildOrderedSortableItems(items: HTMLElement[], orderedKeys: readonly string[]): HTMLElement[] {
+  if (items.length === 0 || orderedKeys.length === 0) return items;
+
+  const keyedItems = new Map<string, HTMLElement>();
+  items.forEach((item) => {
+    const key = getSortableItemKey(item);
+    if (key) {
+      keyedItems.set(key, item);
+    }
+  });
+
+  const ordered: HTMLElement[] = [];
+  orderedKeys.forEach((key) => {
+    const item = keyedItems.get(key);
+    if (!item) return;
+    ordered.push(item);
+    keyedItems.delete(key);
+  });
+
+  items.forEach((item) => {
+    if (!ordered.includes(item)) {
+      ordered.push(item);
+    }
+  });
+
+  return ordered;
+}
+
+function commitSort(state: RuntimeState, target: HTMLElement, placement: "before" | "after"): boolean {
+  const sortable = getSortableMetadata(target);
+  const draggingKey = state.draggingSortKey;
+  if (!sortable || !draggingKey) return false;
+
+  const groupKey = sortable.sortableParentId;
+  const items = buildOrderedSortableItems(
+    findSortableItems(groupKey),
+    state.pendingSort?.groupKey === groupKey ? state.pendingSort.orderedSortKeys : [],
+  );
+  const draggingItem = items.find((item) => {
+    const sortableItem = getSortableMetadata(item);
+    return sortableItem?.itemKey === draggingKey;
+  });
+  if (!draggingItem || draggingItem === target || draggingItem.parentElement !== target.parentElement) return false;
+
+  const remainingItems = items.filter((item) => item !== draggingItem);
+  const targetIndex = remainingItems.findIndex((item) => item === target);
+  if (targetIndex < 0) return false;
+
+  const insertIndex = placement === "after" ? targetIndex + 1 : targetIndex;
+  remainingItems.splice(insertIndex, 0, draggingItem);
+
+  const orderedSortKeys = remainingItems
+    .map((item) => getSortableItemKey(item))
+    .filter((key): key is string => Boolean(key));
+  state.pendingSort = {
+    groupKey,
+    orderedSortKeys,
+  };
+
+  postToParent(state, {
+    channel: PREVIEW_PICKER_CHANNEL,
+    version: PREVIEW_PICKER_VERSION,
+    type: "IMAGICMA_PICKER_SORT_COMMITTED",
+    frameInstanceId: state.frameInstanceId,
+    sessionId: state.activeSessionId,
+    payload: {
+      sortableParentId: groupKey,
+      orderedSortKeys,
+    },
+  });
+
+  reapplyVisualState(state);
+  return true;
+}
+
+function queryElementsByNodeKey(nodeKey: string): HTMLElement[] {
+  return Array.from(
+    document.querySelectorAll<HTMLElement>(
+      `[data-imagicma-node-id="${escapeAttributeValue(nodeKey)}"]`,
+    ),
+  );
+}
+
+function queryElementsByDraftTarget(target?: {
+  scope?: PreviewDraftTargetScope;
+  nodeKey?: string;
+  groupKey?: string;
+  itemKey?: string;
+}): HTMLElement[] {
+  const nodeKey = trimText(target?.nodeKey);
+  if (!nodeKey) return [];
+
+  const groupKey = trimText(target?.groupKey);
+  const itemKey = trimText(target?.itemKey);
+  if (groupKey && itemKey) {
+    return Array.from(
+      document.querySelectorAll<HTMLElement>(
+        `[data-imagicma-kind="repeat-item"][data-imagicma-repeat-group="${escapeAttributeValue(groupKey)}"][data-imagicma-sort-key="${escapeAttributeValue(itemKey)}"][data-imagicma-node-id="${escapeAttributeValue(nodeKey)}"],[data-imagicma-kind="repeat-item"][data-imagicma-repeat-group="${escapeAttributeValue(groupKey)}"][data-imagicma-sort-key="${escapeAttributeValue(itemKey)}"] [data-imagicma-node-id="${escapeAttributeValue(nodeKey)}"]`,
+      ),
+    );
+  }
+
+  if (groupKey && target?.scope === "group") {
+    return queryElementsByGroupKey(groupKey, nodeKey);
+  }
+
+  return queryElementsByNodeKey(nodeKey);
+}
+
+function doesElementMatchDraftTarget(
+  element: HTMLElement | null,
+  target?: {
+    scope?: PreviewDraftTargetScope;
+    nodeKey?: string;
+    groupKey?: string;
+    itemKey?: string;
+  },
+): boolean {
+  if (!element) return false;
+  const nodeKey = trimText(target?.nodeKey);
+  if (!nodeKey) return false;
+  if (trimText(element.getAttribute("data-imagicma-node-id")) !== nodeKey) return false;
+
+  const groupKey = trimText(target?.groupKey);
+  if (groupKey) {
+    const elementGroupKey = trimText(element.getAttribute("data-imagicma-repeat-group"));
+    if (elementGroupKey !== groupKey) return false;
+  }
+
+  const itemKey = trimText(target?.itemKey);
+  if (itemKey) {
+    const repeatRoot = element.closest<HTMLElement>("[data-imagicma-kind='repeat-item']");
+    const elementItemKey = trimText(repeatRoot?.getAttribute("data-imagicma-sort-key"));
+    if (elementItemKey !== itemKey) return false;
+  }
+
+  return true;
+}
+
+function queryElementsByGroupKey(groupKey: string, nodeKey?: string): HTMLElement[] {
+  if (!groupKey || !nodeKey) return [];
+
+  return queryRepeatItemRoots(groupKey)
+    .map((root) => findNodeWithinRepeatItem(root, nodeKey))
+    .filter((item): item is HTMLElement => Boolean(item));
+}
+
+function parseNodeOverrideKey(nodeOverrideKey: string): {
+  scope: PreviewDraftTargetScope;
+  nodeKey?: string;
+  groupKey?: string;
+  itemKey?: string;
+} {
+  const match = /^item::([^:]+)::([^:]+)::(.+)$/.exec(nodeOverrideKey);
+  if (!match) {
+    return {
+      scope: "single",
+      nodeKey: nodeOverrideKey || undefined,
+    };
+  }
+
+  return {
+    scope: "single",
+    groupKey: match[1] || undefined,
+    itemKey: match[2] || undefined,
+    nodeKey: match[3] || undefined,
+  };
+}
+
+function buildSelectorForDraftTarget(target?: {
+  scope?: PreviewDraftTargetScope;
+  nodeKey?: string;
+  groupKey?: string;
+  itemKey?: string;
+}): string {
+  const nodeKey = trimText(target?.nodeKey);
+  if (!nodeKey) return "";
+
+  const groupKey = trimText(target?.groupKey);
+  const itemKey = trimText(target?.itemKey);
+  if (groupKey && itemKey) {
+    return `[data-imagicma-kind="repeat-item"][data-imagicma-repeat-group="${escapeAttributeValue(groupKey)}"][data-imagicma-sort-key="${escapeAttributeValue(itemKey)}"][data-imagicma-node-id="${escapeAttributeValue(nodeKey)}"],[data-imagicma-kind="repeat-item"][data-imagicma-repeat-group="${escapeAttributeValue(groupKey)}"][data-imagicma-sort-key="${escapeAttributeValue(itemKey)}"] [data-imagicma-node-id="${escapeAttributeValue(nodeKey)}"]`;
+  }
+
+  if (groupKey && target?.scope === "group") {
+    return `[data-imagicma-kind="repeat-item"][data-imagicma-repeat-group="${escapeAttributeValue(groupKey)}"][data-imagicma-node-id="${escapeAttributeValue(nodeKey)}"],[data-imagicma-kind="repeat-item"][data-imagicma-repeat-group="${escapeAttributeValue(groupKey)}"] [data-imagicma-node-id="${escapeAttributeValue(nodeKey)}"]`;
+  }
+
+  return `[data-imagicma-node-id="${escapeAttributeValue(nodeKey)}"]`;
+}
+
+function parseGroupStyleKey(groupStyleKey: string): { groupKey: string; nodeKey?: string } {
+  const [groupKey, nodeKey] = groupStyleKey.split("::");
+  return {
+    groupKey,
+    nodeKey: nodeKey || undefined,
+  };
+}
+
+function ensureDraftStyleEl(state: RuntimeState): HTMLStyleElement {
+  if (state.draftStyleEl) return state.draftStyleEl;
+  const styleEl = document.createElement("style");
+  styleEl.setAttribute("data-imagicma-preview-draft-style", "true");
+  document.head.appendChild(styleEl);
+  state.draftStyleEl = styleEl;
+  return styleEl;
+}
+
+function resetDraftDom(state: RuntimeState) {
+  runWithInternalMutation(state, () => {
+    state.originalText.forEach((entry, element) => {
+      if (!element.isConnected) return;
+      if (entry.mode === "full") {
+        if (element.textContent !== entry.value) {
+          element.textContent = entry.value;
+        }
+        return;
+      }
+
+      entry.nodes.forEach((node, index) => {
+        if (!node.isConnected) return;
+        node.textContent = entry.value[index] ?? "";
+      });
+    });
+    state.originalText.clear();
+
+    state.originalDraftStyles.forEach((snapshot, element) => {
+      if (!element.isConnected) return;
+      INLINE_STYLE_BINDINGS.forEach(({ field, cssName }) => {
+        const original = snapshot[field];
+        if (original.value) {
+          element.style.setProperty(cssName, original.value, original.priority);
+        } else {
+          element.style.removeProperty(cssName);
+        }
+      });
+    });
+    state.originalDraftStyles.clear();
+
+    state.originalSortStyles.forEach((snapshot, element) => {
+      if (!element.isConnected) return;
+      element.style.transform = snapshot.transform;
+      element.style.transition = snapshot.transition;
+      element.style.zIndex = snapshot.zIndex;
+    });
+    state.originalSortStyles.clear();
+  });
+}
+
+function buildStyleRules(entry: PreviewOverridePageEntry | null): string {
+  const rules: string[] = [];
+  const appendRule = (
+    selector: string,
+    style?: Omit<PreviewDraftPatch, "textContent">,
+    options?: { removed?: boolean },
+  ) => {
+    const declarations = [];
+    if (style) {
+      declarations.push(
+        ...Object.entries(style)
+          .filter(([, value]) => typeof value === "string" && value.trim().length > 0)
+          .map(([key, value]) => `${key.replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`)}: ${value} !important;`),
+      );
+    }
+    if (options?.removed) {
+      declarations.push("display: none !important;");
+    }
+    if (declarations.length === 0) return;
+    rules.push(`${selector} { ${declarations.join(" ")} }`);
+  };
+
+  for (const [nodeOverrideKey, nodeEntry] of Object.entries(entry?.nodes ?? {})) {
+    const selector = buildSelectorForDraftTarget(parseNodeOverrideKey(nodeOverrideKey));
+    if (!selector) continue;
+    appendRule(
+      selector,
+      nodeEntry.style,
+      { removed: nodeEntry.removed === true },
+    );
+  }
+
+  for (const [groupStyleKey, groupEntry] of Object.entries(entry?.groups ?? {})) {
+    const { groupKey, nodeKey } = parseGroupStyleKey(groupStyleKey);
+    if (!nodeKey) continue;
+    appendRule(
+      `[data-imagicma-kind="repeat-item"][data-imagicma-repeat-group="${escapeAttributeValue(groupKey)}"][data-imagicma-node-id="${escapeAttributeValue(nodeKey)}"],[data-imagicma-kind="repeat-item"][data-imagicma-repeat-group="${escapeAttributeValue(groupKey)}"] [data-imagicma-node-id="${escapeAttributeValue(nodeKey)}"]`,
+      groupEntry.style,
+    );
+  }
+
+  return rules.join("\n");
+}
+
+function applyDraftStyleOverrides(state: RuntimeState, draftPayloads: PreviewDraftApplyPayload[]) {
+  const applyStylePatch = (
+    elements: HTMLElement[],
+    patch: Partial<Record<PreviewSourceStyleField, string>>,
+  ) => {
+    if (elements.length === 0) return;
+    const hasStylePatch = Object.values(patch).some((value) => typeof value === "string" && value.trim().length > 0);
+    if (!hasStylePatch) return;
+
+    runWithInternalMutation(state, () => {
+      for (const element of elements) {
+        if (!state.originalDraftStyles.has(element)) {
+          const snapshot = {} as Record<PreviewSourceStyleField, { value: string; priority: string }>;
+          INLINE_STYLE_BINDINGS.forEach(({ field, cssName }) => {
+            snapshot[field] = {
+              value: element.style.getPropertyValue(cssName),
+              priority: element.style.getPropertyPriority(cssName),
+            };
+          });
+          state.originalDraftStyles.set(element, snapshot);
+        }
+
+        INLINE_STYLE_BINDINGS.forEach(({ field, cssName }) => {
+          const nextValue = patch[field];
+          if (typeof nextValue !== "string") return;
+          const normalized = nextValue.trim();
+          if (normalized) {
+            element.style.setProperty(cssName, normalized);
+          } else {
+            element.style.removeProperty(cssName);
+          }
+        });
+      }
+    });
+  };
+
+  for (const draftPayload of draftPayloads) {
+    const patch: Partial<Record<PreviewSourceStyleField, string>> = {
+      fontSize: draftPayload.patch.fontSize,
+      fontWeight: draftPayload.patch.fontWeight,
+      textAlign: draftPayload.patch.textAlign,
+      color: draftPayload.patch.color,
+      backgroundColor: draftPayload.patch.backgroundColor,
+      borderRadius: draftPayload.patch.borderRadius,
+      margin: draftPayload.patch.margin,
+      padding: draftPayload.patch.padding,
+    };
+
+    const queriedTargets = queryElementsByDraftTarget(draftPayload.target);
+    const targets = doesElementMatchDraftTarget(state.selectedElement, draftPayload.target)
+      ? [state.selectedElement!, ...queriedTargets.filter((element) => element !== state.selectedElement)]
+      : queriedTargets;
+
+    applyStylePatch(targets, patch);
+  }
+}
+
+function applyTextOverrides(state: RuntimeState, entry: PreviewOverridePageEntry | null, draftPayloads: PreviewDraftApplyPayload[]) {
+  const collectOwnedTextNodes = (element: HTMLElement): Text[] => {
+    const nodes: Text[] = [];
+    const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
+    let current = walker.nextNode();
+    while (current) {
+      if (current instanceof Text) {
+        const parentElement = current.parentElement;
+        const owner = parentElement?.closest<HTMLElement>("[data-imagicma-node-id]");
+        if (owner === element) {
+          nodes.push(current);
+        }
+      }
+      current = walker.nextNode();
+    }
+    return nodes;
+  };
+
+  const applyText = (elements: HTMLElement[], text: string | undefined, enabled = true) => {
+    if (!enabled) return;
+    runWithInternalMutation(state, () => {
+      for (const element of elements) {
+        const nextText = text ?? "";
+        const ownedTextNodes = collectOwnedTextNodes(element);
+        const hasSemanticDescendants = Boolean(
+          element.querySelector("[data-imagicma-node-id]"),
+        );
+
+        if (!state.originalText.has(element)) {
+          if (ownedTextNodes.length > 0 && (hasSemanticDescendants || element.children.length > 0)) {
+            state.originalText.set(element, {
+              mode: "owned",
+              nodes: ownedTextNodes,
+              value: ownedTextNodes.map((node) => node.textContent || ""),
+            });
+          } else {
+            state.originalText.set(element, {
+              mode: "full",
+              value: element.textContent || "",
+            });
+          }
+        }
+
+        if (ownedTextNodes.length > 0 && (hasSemanticDescendants || element.children.length > 0)) {
+          ownedTextNodes.forEach((node, index) => {
+            node.textContent = index === 0 ? nextText : "";
+          });
+          continue;
+        }
+
+        if (element.textContent !== nextText) {
+          element.textContent = nextText;
+        }
+      }
+    });
+  };
+
+  for (const [nodeOverrideKey, nodeEntry] of Object.entries(entry?.nodes ?? {})) {
+    const targets = queryElementsByDraftTarget(parseNodeOverrideKey(nodeOverrideKey));
+    applyText(
+      targets,
+      nodeEntry.textContent,
+      nodeEntry.removed !== true && Object.prototype.hasOwnProperty.call(nodeEntry, "textContent"),
+    );
+  }
+
+  for (const activeDraftPayload of draftPayloads) {
+    const hasDraftText = Object.prototype.hasOwnProperty.call(activeDraftPayload.patch, "textContent");
+    const canApplyDraftText = hasDraftText && activeDraftPayload.target?.scope !== "group";
+    if (!canApplyDraftText) continue;
+    const queriedTargets = queryElementsByDraftTarget(activeDraftPayload.target);
+    const targets = doesElementMatchDraftTarget(state.selectedElement, activeDraftPayload.target)
+      ? [state.selectedElement!, ...queriedTargets.filter((element) => element !== state.selectedElement)]
+      : queriedTargets;
+
+    applyText(targets, activeDraftPayload.patch.textContent, true);
+  }
+}
+
+function applyCurrentDraftToSelectedElement(state: RuntimeState) {
+  const activeDraftPayload = state.draftPayload;
+  const selectedElement = state.selectedElement;
+  if (!activeDraftPayload || !selectedElement) return;
+  if (!Object.prototype.hasOwnProperty.call(activeDraftPayload.patch, "textContent")) return;
+  if (activeDraftPayload.target?.scope === "group") return;
+  if (!doesElementMatchDraftTarget(selectedElement, activeDraftPayload.target)) return;
+
+  const nextText = activeDraftPayload.patch.textContent ?? "";
+  runWithInternalMutation(state, () => {
+    if (!state.originalText.has(selectedElement)) {
+      state.originalText.set(selectedElement, {
+        mode: "full",
+        value: selectedElement.textContent || "",
+      });
+    }
+    if (selectedElement.textContent !== nextText) {
+      selectedElement.textContent = nextText;
+    }
+  });
+}
+
+function applySortPreview(state: RuntimeState, items: HTMLElement[], orderedKeys: readonly string[]) {
+  if (items.length < 2 || orderedKeys.length === 0) return;
+
+  const orderedItems = buildOrderedSortableItems(items, orderedKeys);
+  if (orderedItems.length !== items.length) return;
+
+  runWithInternalMutation(state, () => {
+    items.forEach((item) => {
+      if (!state.originalSortStyles.has(item)) {
+        state.originalSortStyles.set(item, {
+          transform: item.style.transform,
+          transition: item.style.transition,
+          zIndex: item.style.zIndex,
+        });
+      }
+      const snapshot = state.originalSortStyles.get(item);
+      if (!snapshot) return;
+      item.style.transform = snapshot.transform;
+      item.style.transition = snapshot.transition;
+      item.style.zIndex = snapshot.zIndex;
+    });
+  });
+
+  const baseRects = items.map((item) => item.getBoundingClientRect());
+  const targetRectByItem = new Map<HTMLElement, DOMRect>();
+  orderedItems.forEach((item, index) => {
+    const targetRect = baseRects[index];
+    if (targetRect) {
+      targetRectByItem.set(item, targetRect);
+    }
+  });
+
+  // Preview sort order with transforms so React-managed DOM order stays untouched.
+  runWithInternalMutation(state, () => {
+    items.forEach((item, index) => {
+      const snapshot = state.originalSortStyles.get(item);
+      const currentRect = baseRects[index];
+      const targetRect = targetRectByItem.get(item);
+      if (!snapshot || !currentRect || !targetRect) return;
+
+      const dx = targetRect.left - currentRect.left;
+      const dy = targetRect.top - currentRect.top;
+      const baseTransform = snapshot.transform.trim();
+      const translate = Math.abs(dx) > 0.5 || Math.abs(dy) > 0.5
+        ? `translate(${dx}px, ${dy}px)`
+        : "";
+      item.style.transform = [baseTransform, translate].filter(Boolean).join(" ");
+      item.style.transition = snapshot.transition;
+      item.style.zIndex = translate ? "1" : snapshot.zIndex;
+    });
+  });
+}
+
+function applySortOverrides(state: RuntimeState, entry: PreviewOverridePageEntry | null, pendingSort: RuntimeState["pendingSort"]) {
+  const sortRecords = new Map<string, readonly string[]>();
+
+  for (const [groupKey, orderedKeys] of Object.entries(entry?.sorts ?? {})) {
+    sortRecords.set(groupKey, orderedKeys);
+  }
+
+  if (pendingSort) {
+    sortRecords.set(pendingSort.groupKey, pendingSort.orderedSortKeys);
+  }
+
+  sortRecords.forEach((orderedKeys, groupKey) => {
+    const items = findSortableItems(groupKey);
+    applySortPreview(state, items, orderedKeys);
+  });
+}
+
+function reapplyVisualState(state: RuntimeState) {
+  hydrateRuntimeSemantics();
+  resetDraftDom(state);
+
+  const styleEl = ensureDraftStyleEl(state);
+  styleEl.textContent = buildStyleRules(state.persistedOverrides);
+  
+  applyDraftStyleOverrides(state, state.draftPayloads);
+  applyTextOverrides(state, state.persistedOverrides, state.draftPayloads);
+  applyCurrentDraftToSelectedElement(state);
+  applySortOverrides(state, state.persistedOverrides, state.pendingSort);
+
+  const hoverTarget = state.hoveredElement && state.hoveredElement !== state.selectedElement
+    ? state.hoveredElement
+    : null;
+  if (state.selectedElement) {
+    renderOverlayLayer(state, state.selectedElement, getPeerElements(state.selectedElement), "selected");
+  } else {
+    hideOverlayBox(state.selectedBoxEl);
+    hideOverlayLabel(state.selectedLabelEl);
+    clearSiblingBoxes(state.selectedSiblingBoxEls);
+  }
+
+  if (hoverTarget) {
+    renderOverlayLayer(state, hoverTarget, getPeerElements(hoverTarget), "hover");
+  } else {
+    hideOverlayBox(state.hoverBoxEl);
+    hideOverlayLabel(state.hoverLabelEl);
+    clearSiblingBoxes(state.hoverSiblingBoxEls);
+  }
+}
+
+function isNodeSelectableElement(element: HTMLElement): boolean {
+  return element.hasAttribute("data-imagicma-node-id");
+}
+
+function isOverlayElement(state: RuntimeState, element: HTMLElement): boolean {
+  return Boolean(state.overlayRoot && state.overlayRoot.contains(element));
+}
+
+function findElementByNodeKey(nodeKey: string): HTMLElement | null {
+  return document.querySelector<HTMLElement>(
+    `[data-imagicma-node-id="${escapeAttributeValue(nodeKey)}"]`,
+  );
+}
+
+function buildSemanticPath(target: HTMLElement, event: MouseEvent): HTMLElement[] {
+  const fromPath = typeof event.composedPath === "function"
+    ? event.composedPath().filter((item): item is HTMLElement => item instanceof HTMLElement)
+    : [];
+
+  if (fromPath.length > 0) {
+    return fromPath;
+  }
+
+  const path: HTMLElement[] = [];
+  let current: HTMLElement | null = target;
+  while (current) {
+    path.push(current);
+    current = current.parentElement;
+  }
+  return path;
+}
+
+function findSelectableElement(state: RuntimeState, event: MouseEvent): HTMLElement | null {
+  const hit = document.elementFromPoint(event.clientX, event.clientY);
+  if (!(hit instanceof HTMLElement) || isOverlayElement(state, hit)) {
+    return null;
+  }
+
+  return buildSemanticPath(hit, event).find((candidate) => !isOverlayElement(state, candidate) && isNodeSelectableElement(candidate)) ?? null;
+}
+
+function postToParent(state: RuntimeState, message: Record<string, unknown>) {
+  const parentOrigin = state.parentOrigin || getBoundPreviewParentOrigin();
+  if (!parentOrigin || window.parent === window) return;
+  logPreviewPickerRuntime("post-message", {
+    type: typeof message.type === "string" ? message.type : "unknown",
+    sessionId: typeof message.sessionId === "string" ? message.sessionId : null,
+    frameInstanceId: typeof message.frameInstanceId === "string" ? message.frameInstanceId : state.frameInstanceId,
+    targetOrigin: parentOrigin,
+  });
+  window.parent.postMessage(message, parentOrigin);
+}
+
+function createRuntimeState(): RuntimeState {
+  return {
+    frameInstanceId: createFrameInstanceId(),
+    parentOrigin: getBoundPreviewParentOrigin(),
+    activeSessionId: null,
+    enabled: false,
+    selectedElement: null,
+    hoveredElement: null,
+    overlayRoot: null,
+    hoverLabelEl: null,
+    selectedLabelEl: null,
+    hoverBoxEl: null,
+    selectedBoxEl: null,
+    sortIndicatorEl: null,
+    hoverSiblingBoxEls: [],
+    selectedSiblingBoxEls: [],
+    draftStyleEl: null,
+    persistedOverrides: null,
+    draftPayload: null,
+    draftPayloads: [],
+    pendingSort: null,
+    draggingSortKey: null,
+    sortPointerId: null,
+    sortPointerStartX: 0,
+    sortPointerStartY: 0,
+    sortDragging: false,
+    sortSourceElement: null,
+    sortIndicatorTarget: null,
+    sortIndicatorPlacement: null,
+    ignoreClickUntilTs: 0,
+    originalText: new Map(),
+    originalDraftStyles: new Map(),
+    originalSortStyles: new Map(),
+    throttledRecalculate: null,
+    mutationObserver: null,
+    suppressMutationObserver: 0,
+  };
+}
+
+function sendFrameHello(state: RuntimeState, reason: string) {
+  if (window.parent === window) return;
+  const targetOrigin = state.parentOrigin || getBoundPreviewParentOrigin() || "*";
+  window.parent.postMessage({
+    channel: PREVIEW_PICKER_CHANNEL,
+    version: PREVIEW_PICKER_VERSION,
+    type: "IMAGICMA_PICKER_FRAME_HELLO",
+    frameInstanceId: state.frameInstanceId,
+    sessionId: state.activeSessionId,
+    payload: {
+      pageUrl: window.location.href,
+      protocolVersion: PREVIEW_PICKER_VERSION,
+      reason,
+    },
+  }, targetOrigin);
+}
+
+export function installPreviewPickerRuntime() {
+  if (typeof window === "undefined" || window.parent === window) return;
+  if (window.__IMAGICMA_PREVIEW_PICKER__) return;
+  window.__IMAGICMA_PREVIEW_PICKER__ = true;
+
+  const state = createRuntimeState();
+  logPreviewPickerRuntime("install", {
+    pageUrl: window.location.href,
+    parentOrigin: state.parentOrigin,
+    frameInstanceId: state.frameInstanceId,
+  });
+  hydrateRuntimeSemantics();
+  state.throttledRecalculate = throttleRAF(() => {
+    reapplyVisualState(state);
+  });
+
+  const handlePointerMove = (event: MouseEvent) => {
+    if (!state.enabled) return;
+    if (state.sortPointerId !== null) return;
+    const element = findSelectableElement(state, event);
+    const nextHoveredElement = element && element !== state.selectedElement ? element : null;
+    if (nextHoveredElement === state.hoveredElement) return;
+    state.hoveredElement = nextHoveredElement;
+    reapplyVisualState(state);
+  };
+
+  const handleClick = (event: MouseEvent) => {
+    if (!state.enabled) return;
+    if (Date.now() < state.ignoreClickUntilTs) return;
+    const element = findSelectableElement(state, event);
+    if (!element) return;
+
+    event.preventDefault();
+    event.stopPropagation();
+    if (typeof event.stopImmediatePropagation === "function") {
+      event.stopImmediatePropagation();
+    }
+
+    state.selectedElement = element;
+    state.hoveredElement = null;
+    reapplyVisualState(state);
+    const sortableMetadata = getSortableMetadata(element);
+    applySortableAffordance(state, Boolean(sortableMetadata?.sortable), sortableMetadata?.sortableParentId ?? null);
+    logPreviewPickerRuntime("select-element", {
+      nodeId: trimText(element.getAttribute("data-imagicma-node-id")) || null,
+      selector: buildSelectorForElement(element),
+      sessionId: state.activeSessionId,
+      frameInstanceId: state.frameInstanceId,
+    });
+    postToParent(state, {
+      channel: PREVIEW_PICKER_CHANNEL,
+      version: PREVIEW_PICKER_VERSION,
+      type: "IMAGICMA_PICKER_SELECTED",
+      frameInstanceId: state.frameInstanceId,
+      sessionId: state.activeSessionId,
+      payload: getSelectionPayload(element),
+    });
+  };
+
+  window.addEventListener("mousemove", handlePointerMove, true);
+  window.addEventListener("click", handleClick, true);
+  window.addEventListener("scroll", () => state.throttledRecalculate?.(), true);
+  window.addEventListener("resize", () => state.throttledRecalculate?.());
+  state.mutationObserver = new MutationObserver(() => {
+    if (state.suppressMutationObserver > 0) return;
+    hydrateRuntimeSemantics();
+    state.throttledRecalculate?.();
+  });
+  state.mutationObserver.observe(document.body, {
+    subtree: true,
+    childList: true,
+    characterData: true,
+    attributes: true,
+    attributeFilter: ["style", "class"],
+  });
+  window.addEventListener("pointerdown", (event) => {
+    if (!state.enabled || event.button !== 0) return;
+    const target = event.target instanceof HTMLElement ? event.target.closest<HTMLElement>("[data-imagicma-node-id]") : null;
+    if (!target || !state.selectedElement || target !== state.selectedElement) return;
+    const sortable = getSortableMetadata(target);
+    if (!sortable) return;
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    state.sortPointerId = event.pointerId;
+    state.sortPointerStartX = event.clientX;
+    state.sortPointerStartY = event.clientY;
+    state.sortDragging = false;
+    state.sortSourceElement = target;
+    state.draggingSortKey = sortable.itemKey;
+    state.sortIndicatorTarget = null;
+    state.sortIndicatorPlacement = null;
+  }, true);
+
+  window.addEventListener("pointermove", (event) => {
+    if (!state.enabled || state.sortPointerId !== event.pointerId || !state.sortSourceElement || !state.draggingSortKey) return;
+
+    const distance = Math.hypot(event.clientX - state.sortPointerStartX, event.clientY - state.sortPointerStartY);
+    if (!state.sortDragging && distance < SORT_DRAG_THRESHOLD_PX) return;
+
+    if (!state.sortDragging) {
+      state.sortDragging = true;
+      runWithInternalMutation(state, () => {
+        state.sortSourceElement!.style.opacity = "0.5";
+      });
+    }
+
+    const hit = document.elementFromPoint(event.clientX, event.clientY);
+    const target = hit instanceof HTMLElement ? hit.closest<HTMLElement>("[data-imagicma-node-id]") : null;
+    if (!target) {
+      syncSortIndicator(state, null, null);
+      return;
+    }
+
+    const sortable = getSortableMetadata(target);
+    const sourceSortable = getSortableMetadata(state.sortSourceElement);
+    if (!sortable || !sourceSortable || sortable.sortableParentId !== sourceSortable.sortableParentId || target === state.sortSourceElement) {
+      syncSortIndicator(state, null, null);
+      return;
+    }
+
+    event.preventDefault();
+    const rect = target.getBoundingClientRect();
+    const axis = getSortableAxis(sortable.itemElements);
+    const placement = axis === "horizontal"
+      ? event.clientX > rect.left + rect.width / 2 ? "after" : "before"
+      : event.clientY > rect.top + rect.height / 2 ? "after" : "before";
+    syncSortIndicator(state, target, placement, sortable.itemElements);
+  }, true);
+
+  window.addEventListener("pointerup", (event) => {
+    if (state.sortPointerId !== event.pointerId) return;
+    if (state.sortDragging && state.sortIndicatorTarget && state.sortIndicatorPlacement) {
+      commitSort(state, state.sortIndicatorTarget, state.sortIndicatorPlacement);
+      state.ignoreClickUntilTs = Date.now() + 120;
+    }
+    clearSortGesture(state);
+    reapplyVisualState(state);
+  }, true);
+
+  window.addEventListener("pointercancel", (event) => {
+    if (state.sortPointerId !== event.pointerId) return;
+    clearSortGesture(state);
+    reapplyVisualState(state);
+  }, true);
+
+  const originalPushState = window.history.pushState.bind(window.history);
+  const originalReplaceState = window.history.replaceState.bind(window.history);
+  window.history.pushState = (...args) => {
+    originalPushState(...args);
+    window.queueMicrotask(() => sendFrameHello(state, "pushState"));
+  };
+  window.history.replaceState = (...args) => {
+    originalReplaceState(...args);
+    window.queueMicrotask(() => sendFrameHello(state, "replaceState"));
+  };
+  window.addEventListener("popstate", () => {
+    sendFrameHello(state, "popstate");
+  });
+  window.addEventListener("load", () => {
+    sendFrameHello(state, "load");
+  });
+
+  window.addEventListener("message", (event) => {
+    console.log('on message', event);
+    if (event.source !== window.parent) return;
+    if (!isAllowedPreviewParentOrigin(event.origin)) return;
+    if (!isPickerMessage(event.data)) return;
+    if (state.parentOrigin && event.origin !== state.parentOrigin) return;
+    logPreviewPickerRuntime("receive-message", {
+      type: event.data.type,
+      sessionId: "sessionId" in event.data ? event.data.sessionId : null,
+      frameInstanceId: event.data.frameInstanceId,
+      enabled: state.enabled,
+      activeSessionId: state.activeSessionId,
+      pageUrl: window.location.href,
+    });
+
+    state.parentOrigin = bindPreviewParentOrigin(event.origin);
+    if (event.data.frameInstanceId !== state.frameInstanceId) return;
+
+    if (event.data.type === "IMAGICMA_PICKER_STATE_SYNC") {
+      hydrateRuntimeSemantics();
+      state.activeSessionId = event.data.sessionId;
+      state.enabled = event.data.payload.mode === "picking";
+      state.persistedOverrides = event.data.payload.overrides;
+      state.draftPayload = event.data.payload.draft;
+      state.draftPayloads = event.data.payload.drafts ?? (event.data.payload.draft ? [event.data.payload.draft] : []);
+      state.pendingSort = event.data.payload.pendingSort
+        ? {
+            groupKey: event.data.payload.pendingSort.sortableParentId,
+            orderedSortKeys: event.data.payload.pendingSort.orderedSortKeys,
+          }
+        : null;
+      state.selectedElement = event.data.payload.selectedNodeId
+        ? findElementByNodeKey(event.data.payload.selectedNodeId)
+        : null;
+      state.hoveredElement = null;
+      clearOverlay(state);
+      const sortableMetadata = state.selectedElement ? getSortableMetadata(state.selectedElement) : null;
+      applySortableAffordance(state, Boolean(sortableMetadata?.sortable), sortableMetadata?.sortableParentId ?? null);
+      logPreviewPickerRuntime("state-sync", {
+        sessionId: state.activeSessionId,
+        mode: event.data.payload.mode,
+        selectedNodeId: event.data.payload.selectedNodeId,
+        hasDraft: Boolean(event.data.payload.draft),
+        hasPendingSort: Boolean(event.data.payload.pendingSort),
+        pageKey: event.data.payload.pageKey,
+      });
+      reapplyVisualState(state);
+      return;
+    }
+
+    if (event.data.type === "IMAGICMA_PICKER_STOP") {
+      state.enabled = false;
+      state.activeSessionId = null;
+      state.selectedElement = null;
+      state.hoveredElement = null;
+      state.draftPayload = null;
+      state.draftPayloads = [];
+      state.pendingSort = null;
+      clearOverlay(state);
+      applySortableAffordance(state, false);
+      logPreviewPickerRuntime("stop-session", {
+        sessionId: event.data.sessionId,
+        frameInstanceId: event.data.frameInstanceId,
+      });
+      reapplyVisualState(state);
+      return;
+    }
+  });
+
+  sendFrameHello(state, "install");
+}