@jbpark/live-editor 4.3.0 → 4.4.0

package/dist/editor/index.js

@@ -1,3 +1,3 @@
-import { t as Core } from "../core-B3ruccKb.js";
-import { t as Editor } from "../editor-DvMruljw.js";
+import { t as Core } from "../core-CRsAGpei.js";
+import { t as Editor } from "../editor-DQ8Q--qR.js";
 export { Core, Editor as default };

package/dist/{editor-DvMruljw.js → editor-DQ8Q--qR.js}

@@ -1,5 +1,5 @@
 import { i as usePreview, r as useError } from "./states-Ci1AvoQ9.js";
-import { n as useFormatCode, t as Core } from "./core-B3ruccKb.js";
+import { n as useFormatCode, t as Core } from "./core-CRsAGpei.js";
 import { useCallback, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { useDebouncedCallback } from "@jbpark/use-hooks";
@@ -63,4 +63,4 @@ Editor.Core = Core;
 //#endregion
 export { Editor as t };
 
-//# sourceMappingURL=editor-DvMruljw.js.map
+//# sourceMappingURL=editor-DQ8Q--qR.js.map

package/dist/{editor-DvMruljw.js.map → editor-DQ8Q--qR.js.map}

@@ -1 +1 @@
-{"version":3,"file":"editor-DvMruljw.js","names":["Editor","EditorImpl"],"sources":["../src/components/editor/editor.tsx","../src/components/editor/index.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\n\nimport { useDebouncedCallback } from '@jbpark/use-hooks';\n\nimport { useError, usePreview } from '~/components/context/states';\n\nimport Core, { type Props as CoreProps } from './core';\nimport { useFormatCode } from './use-format-code';\n\nexport interface EditorRenderData {\n  value: string;\n  onChange: (value: string) => void;\n  // Same prettier-based formatting Core's own Cmd+S uses - reused rather\n  // than reimplemented, so a custom editor can offer equivalent\n  // format-on-save behavior without duplicating the prettier wiring.\n  formatCode: (code: string) => Promise<string>;\n}\n\nexport interface Props extends Omit<CoreProps, 'value' | 'onSave' | 'onError'> {\n  value?: string;\n  defaultValue?: string;\n  debounce?: number;\n  // Full replacement for the built-in CodeMirror editor. Editor still owns\n  // syncing `value` to the shared preview code (debounced), regardless of\n  // which UI renders it - only the editing surface itself is customizable.\n  renderEditor?: (data: EditorRenderData) => React.ReactNode;\n}\n\nconst Editor = ({\n  defaultValue,\n  value: _value,\n  debounce = 1000,\n  onChange: _onChange,\n  renderEditor,\n  fragment,\n  prettierOptions,\n  ...props\n}: Props) => {\n  const { code, setCode } = usePreview();\n  const { setError } = useError();\n\n  // Controlled, the host owns the document. Uncontrolled, the provider does\n  // (#341): `draft` shows each keystroke at once, while the provider only\n  // hears about it after `debounce`. Without a draft, the editor had nowhere\n  // to keep what was typed, so an uncontrolled editor dropped every edit.\n  const controlled = _value !== undefined;\n  const [draft, setDraft] = useState(() => defaultValue ?? code);\n\n  // The last code this editor pushed, and the provider code it has already\n  // seen. A provider change that isn't this editor's own push came from\n  // somewhere else sharing the provider — an uncontrolled DnD, say — and the\n  // draft follows it. Adjusted during render so no frame shows the old one.\n  const [pushed, setPushed] = useState<string | null>(null);\n  const [seenCode, setSeenCode] = useState(code);\n\n  if (code !== seenCode) {\n    setSeenCode(code);\n\n    if (!controlled && code !== pushed) {\n      setDraft(code);\n    }\n  }\n\n  const value = controlled ? _value : draft;\n\n  const pushCode = useCallback(\n    (next: string) => {\n      setPushed(next);\n      setCode(next);\n    },\n    [setCode],\n  );\n\n  const onChange = useCallback(\n    (next: string) => {\n      if (!controlled) {\n        setDraft(next);\n      }\n\n      _onChange?.(next);\n    },\n    [_onChange, controlled],\n  );\n\n  // Formatting on save reaches the provider at once, ahead of the debounce.\n  const onSave = useCallback(\n    (formattedCode: string) => {\n      pushCode(formattedCode);\n    },\n    [pushCode],\n  );\n\n  const onError = useCallback(\n    (error: string | null) => {\n      setError(error);\n    },\n    [setError],\n  );\n\n  const formatCode = useFormatCode({ fragment, prettierOptions });\n\n  // Pushes `value` to the provider `debounce` ms after it stops changing,\n  // and at once on mount. A pending push is never dropped: it runs when the\n  // editor unmounts, and when focus leaves it — so clicking into another\n  // surface right after typing edits a document that includes the typing.\n  const push = useDebouncedCallback(\n    () => pushCode(value),\n    { delay: debounce, flushOnUnmount: true },\n    [value],\n  );\n\n  // `display: contents` so the wrapper adds a blur listener without adding a\n  // box: the editor lays out against this element's parent, as before.\n  return (\n    <div style={{ display: 'contents' }} onBlur={push.flush}>\n      {renderEditor ? (\n        renderEditor({ value, onChange, formatCode })\n      ) : (\n        <Core\n          value={value}\n          onChange={onChange}\n          onSave={onSave}\n          onError={onError}\n          fragment={fragment}\n          prettierOptions={prettierOptions}\n          {...props}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default Editor;\n","import Core, { type Props as CoreProps } from './core';\nimport EditorImpl, { type EditorRenderData, type Props } from './editor';\n\ntype EditorComponent = typeof EditorImpl & { Core: typeof Core };\n\nconst Editor = EditorImpl as EditorComponent;\n\nEditor.Core = Core;\n\nexport { Core };\nexport type { Props, CoreProps, EditorRenderData };\nexport default Editor;\n"],"mappings":";;;;;;AA4BA,MAAMA,YAAU,EACd,cACA,OAAO,QACP,WAAW,KACX,UAAU,WACV,cACA,UACA,iBACA,GAAG,YACQ;CACX,MAAM,EAAE,MAAM,YAAY,WAAW;CACrC,MAAM,EAAE,aAAa,SAAS;CAM9B,MAAM,aAAa,WAAW,KAAA;CAC9B,MAAM,CAAC,OAAO,YAAY,eAAe,gBAAgB,IAAI;CAM7D,MAAM,CAAC,QAAQ,aAAa,SAAwB,IAAI;CACxD,MAAM,CAAC,UAAU,eAAe,SAAS,IAAI;CAE7C,IAAI,SAAS,UAAU;EACrB,YAAY,IAAI;EAEhB,IAAI,CAAC,cAAc,SAAS,QAC1B,SAAS,IAAI;CAEjB;CAEA,MAAM,QAAQ,aAAa,SAAS;CAEpC,MAAM,WAAW,aACd,SAAiB;EAChB,UAAU,IAAI;EACd,QAAQ,IAAI;CACd,GACA,CAAC,OAAO,CACV;CAEA,MAAM,WAAW,aACd,SAAiB;EAChB,IAAI,CAAC,YACH,SAAS,IAAI;EAGf,YAAY,IAAI;CAClB,GACA,CAAC,WAAW,UAAU,CACxB;CAGA,MAAM,SAAS,aACZ,kBAA0B;EACzB,SAAS,aAAa;CACxB,GACA,CAAC,QAAQ,CACX;CAEA,MAAM,UAAU,aACb,UAAyB;EACxB,SAAS,KAAK;CAChB,GACA,CAAC,QAAQ,CACX;CAEA,MAAM,aAAa,cAAc;EAAE;EAAU;CAAgB,CAAC;CAM9D,MAAM,OAAO,2BACL,SAAS,KAAK,GACpB;EAAE,OAAO;EAAU,gBAAgB;CAAK,GACxC,CAAC,KAAK,CACR;CAIA,OACE,oBAAC,OAAD;EAAK,OAAO,EAAE,SAAS,WAAW;EAAG,QAAQ,KAAK;EAC/C,UAAA,eACC,aAAa;GAAE;GAAO;GAAU;EAAW,CAAC,IAE5C,oBAAC,MAAD;GACS;GACG;GACF;GACC;GACC;GACO;GACjB,GAAI;EACL,CAAA;CAEA,CAAA;AAET;;;AC7HA,MAAM,SAASC;AAEf,OAAO,OAAO"}
+{"version":3,"file":"editor-DQ8Q--qR.js","names":["Editor","EditorImpl"],"sources":["../src/components/editor/editor.tsx","../src/components/editor/index.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\n\nimport { useDebouncedCallback } from '@jbpark/use-hooks';\n\nimport { useError, usePreview } from '~/components/context/states';\n\nimport Core, { type Props as CoreProps } from './core';\nimport { useFormatCode } from './use-format-code';\n\nexport interface EditorRenderData {\n  value: string;\n  onChange: (value: string) => void;\n  // Same prettier-based formatting Core's own Cmd+S uses - reused rather\n  // than reimplemented, so a custom editor can offer equivalent\n  // format-on-save behavior without duplicating the prettier wiring.\n  formatCode: (code: string) => Promise<string>;\n}\n\nexport interface Props extends Omit<CoreProps, 'value' | 'onSave' | 'onError'> {\n  value?: string;\n  defaultValue?: string;\n  debounce?: number;\n  // Full replacement for the built-in CodeMirror editor. Editor still owns\n  // syncing `value` to the shared preview code (debounced), regardless of\n  // which UI renders it - only the editing surface itself is customizable.\n  renderEditor?: (data: EditorRenderData) => React.ReactNode;\n}\n\nconst Editor = ({\n  defaultValue,\n  value: _value,\n  debounce = 1000,\n  onChange: _onChange,\n  renderEditor,\n  fragment,\n  prettierOptions,\n  ...props\n}: Props) => {\n  const { code, setCode } = usePreview();\n  const { setError } = useError();\n\n  // Controlled, the host owns the document. Uncontrolled, the provider does\n  // (#341): `draft` shows each keystroke at once, while the provider only\n  // hears about it after `debounce`. Without a draft, the editor had nowhere\n  // to keep what was typed, so an uncontrolled editor dropped every edit.\n  const controlled = _value !== undefined;\n  const [draft, setDraft] = useState(() => defaultValue ?? code);\n\n  // The last code this editor pushed, and the provider code it has already\n  // seen. A provider change that isn't this editor's own push came from\n  // somewhere else sharing the provider — an uncontrolled DnD, say — and the\n  // draft follows it. Adjusted during render so no frame shows the old one.\n  const [pushed, setPushed] = useState<string | null>(null);\n  const [seenCode, setSeenCode] = useState(code);\n\n  if (code !== seenCode) {\n    setSeenCode(code);\n\n    if (!controlled && code !== pushed) {\n      setDraft(code);\n    }\n  }\n\n  const value = controlled ? _value : draft;\n\n  const pushCode = useCallback(\n    (next: string) => {\n      setPushed(next);\n      setCode(next);\n    },\n    [setCode],\n  );\n\n  const onChange = useCallback(\n    (next: string) => {\n      if (!controlled) {\n        setDraft(next);\n      }\n\n      _onChange?.(next);\n    },\n    [_onChange, controlled],\n  );\n\n  // Formatting on save reaches the provider at once, ahead of the debounce.\n  const onSave = useCallback(\n    (formattedCode: string) => {\n      pushCode(formattedCode);\n    },\n    [pushCode],\n  );\n\n  const onError = useCallback(\n    (error: string | null) => {\n      setError(error);\n    },\n    [setError],\n  );\n\n  const formatCode = useFormatCode({ fragment, prettierOptions });\n\n  // Pushes `value` to the provider `debounce` ms after it stops changing,\n  // and at once on mount. A pending push is never dropped: it runs when the\n  // editor unmounts, and when focus leaves it — so clicking into another\n  // surface right after typing edits a document that includes the typing.\n  const push = useDebouncedCallback(\n    () => pushCode(value),\n    { delay: debounce, flushOnUnmount: true },\n    [value],\n  );\n\n  // `display: contents` so the wrapper adds a blur listener without adding a\n  // box: the editor lays out against this element's parent, as before.\n  return (\n    <div style={{ display: 'contents' }} onBlur={push.flush}>\n      {renderEditor ? (\n        renderEditor({ value, onChange, formatCode })\n      ) : (\n        <Core\n          value={value}\n          onChange={onChange}\n          onSave={onSave}\n          onError={onError}\n          fragment={fragment}\n          prettierOptions={prettierOptions}\n          {...props}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default Editor;\n","import Core, { type Props as CoreProps } from './core';\nimport EditorImpl, { type EditorRenderData, type Props } from './editor';\n\ntype EditorComponent = typeof EditorImpl & { Core: typeof Core };\n\nconst Editor = EditorImpl as EditorComponent;\n\nEditor.Core = Core;\n\nexport { Core };\nexport type { Props, CoreProps, EditorRenderData };\nexport default Editor;\n"],"mappings":";;;;;;AA4BA,MAAMA,YAAU,EACd,cACA,OAAO,QACP,WAAW,KACX,UAAU,WACV,cACA,UACA,iBACA,GAAG,YACQ;CACX,MAAM,EAAE,MAAM,YAAY,WAAW;CACrC,MAAM,EAAE,aAAa,SAAS;CAM9B,MAAM,aAAa,WAAW,KAAA;CAC9B,MAAM,CAAC,OAAO,YAAY,eAAe,gBAAgB,IAAI;CAM7D,MAAM,CAAC,QAAQ,aAAa,SAAwB,IAAI;CACxD,MAAM,CAAC,UAAU,eAAe,SAAS,IAAI;CAE7C,IAAI,SAAS,UAAU;EACrB,YAAY,IAAI;EAEhB,IAAI,CAAC,cAAc,SAAS,QAC1B,SAAS,IAAI;CAEjB;CAEA,MAAM,QAAQ,aAAa,SAAS;CAEpC,MAAM,WAAW,aACd,SAAiB;EAChB,UAAU,IAAI;EACd,QAAQ,IAAI;CACd,GACA,CAAC,OAAO,CACV;CAEA,MAAM,WAAW,aACd,SAAiB;EAChB,IAAI,CAAC,YACH,SAAS,IAAI;EAGf,YAAY,IAAI;CAClB,GACA,CAAC,WAAW,UAAU,CACxB;CAGA,MAAM,SAAS,aACZ,kBAA0B;EACzB,SAAS,aAAa;CACxB,GACA,CAAC,QAAQ,CACX;CAEA,MAAM,UAAU,aACb,UAAyB;EACxB,SAAS,KAAK;CAChB,GACA,CAAC,QAAQ,CACX;CAEA,MAAM,aAAa,cAAc;EAAE;EAAU;CAAgB,CAAC;CAM9D,MAAM,OAAO,2BACL,SAAS,KAAK,GACpB;EAAE,OAAO;EAAU,gBAAgB;CAAK,GACxC,CAAC,KAAK,CACR;CAIA,OACE,oBAAC,OAAD;EAAK,OAAO,EAAE,SAAS,WAAW;EAAG,QAAQ,KAAK;EAC/C,UAAA,eACC,aAAa;GAAE;GAAO;GAAU;EAAW,CAAC,IAE5C,oBAAC,MAAD;GACS;GACG;GACF;GACC;GACC;GACO;GACjB,GAAI;EACL,CAAA;CAEA,CAAA;AAET;;;AC7HA,MAAM,SAASC;AAEf,OAAO,OAAO"}

package/dist/{index-CtlUYnWq.d.ts → index-Dgh1JTX3.d.ts}

@@ -1,4 +1,4 @@
-import { $ as BindingWidget, Q as BindingType, Y as BindingOption, Z as BindingRenderMap, et as DataAttrNode, f as UpdateFailure } from "./index-w3kLcCXl.js";
+import { ct as BindingWidget, f as UpdateFailure, it as BindingRegistry, lt as DataAttrNode, nt as BindingOption, ot as BindingRenderMap, rt as BindingOptions, st as BindingType, tt as BindingKeyMap } from "./index-f7ijuNTa.js";
 import { v as Section } from "./document-Ct4jW78J.js";
 import { t as FrameProps } from "./index-DpDU1IAw.js";
 import { useMultiSelect } from "@jbpark/use-hooks";
@@ -56,6 +56,7 @@ interface DndInspector {
   deactivate: () => void;
   toggle: () => void;
   picked: DndNodePick | null;
+  highlight: (id: string | null) => void;
 }
 declare const useDndInspector: () => DndInspector;
 //#endregion
@@ -88,8 +89,13 @@ interface PanelBinding {
   rawValue: string;
   canEditValue?: boolean;
   present?: boolean;
+  element?: PanelBindingElement;
   onChange: (value: unknown) => void;
 }
+interface PanelBindingElement {
+  tagName: string;
+  text: string;
+}
 type PanelBindingData = Omit<PanelBinding, 'onChange'>;
 interface PanelBindingSource {
   id: string;
@@ -124,6 +130,7 @@ interface DndPanel {
   onNodeChange: PanelNodeChange;
   onNodesChange: PanelNodesChange;
   readOnly: boolean;
+  bindingOptions: BindingOptions;
 }
 interface Props extends Omit<React.ComponentPropsWithRef<'div'>, 'onChange'> {
   value?: string;
@@ -141,10 +148,12 @@ interface Props extends Omit<React.ComponentPropsWithRef<'div'>, 'onChange'> {
   onBeforeDelete?: (section: Section) => boolean | Promise<boolean>;
   sectionNameFallback?: (index: number) => string;
   containerId?: string;
+  bindings?: BindingRegistry;
+  bindingKeys?: BindingKeyMap;
   onNodePick?: (pick: DndNodePick) => void;
   children?: React.ReactNode;
 }
-declare const Dnd$1: ({ value: _value, props, modules: _modules, onChange: _onChange, className, items, frame, dynamicTailwind, provider, renderField, onEditError, renderSectionFallback, shouldForceSectionFallback, onBeforeDelete, sectionNameFallback, containerId, onNodePick, children, ...restProps }: Props) => import("react").JSX.Element;
+declare const Dnd$1: ({ value: _value, props, modules: _modules, onChange: _onChange, className, items, frame, dynamicTailwind, provider, renderField, onEditError, renderSectionFallback, shouldForceSectionFallback, onBeforeDelete, sectionNameFallback, containerId, bindings: bindingRegistry, bindingKeys, onNodePick, children, ...restProps }: Props) => import("react").JSX.Element;
 //#endregion
 //#region src/components/dnd/draggable.d.ts
 interface DraggableItemDragState {
@@ -309,5 +318,5 @@ type ChildrenEditor = DndChildren;
 /** @deprecated Renamed to `DndChildrenOptions`. */
 type ChildrenEditorOptions = DndChildrenOptions;
 //#endregion
-export { DndNodePick as $, useDndPanel as A, DndPalette as B, useDndItems as C, DndLayout as D, useDndChildren as E, Palette as F, PanelBinding as G, Props as H, Panel as I, PanelNodeChange as J, PanelBindingData as K, DraggableItem as L, DndLayoutProps as M, DndRegionProps as N, useDndLayout as O, Layout as P, DndInspector as Q, DraggableItemDragState as R, DndItemsOptions as S, DndChildrenOptions as T, DndRenderSectionFallback as U, DndPanel as V, DndSectionFallbackArgs as W, resolvePanelBindings as X, PanelNodesChange as Y, withPanelCommit as Z, DndItemsActions as _, ItemsEditorActions as a, DndItemsNestedElement as b, ItemsEditorNestedGroup as c, useItemsEditor as d, useDndInspector as et, FieldKind as f, DndItems as g, isStructuralFieldKind as h, ItemsEditor as i, FieldProps as it, Canvas as j, useDndPalette as k, ItemsEditorOptions as l, getFieldKind as m, ChildrenEditorOptions as n, DndRenderField as nt, ItemsEditorItem as o, FieldKindBinding as p, PanelBindingSource as q, Dnd as r, Field as rt, ItemsEditorNestedElement as s, ChildrenEditor as t, DndEditError as tt, useChildrenEditor as u, DndItemsExpansion as v, DndChildren as w, DndItemsNestedGroup as x, DndItemsItem as y, DraggableItemProps as z };
-//# sourceMappingURL=index-CtlUYnWq.d.ts.map
+export { DndInspector as $, useDndPanel as A, DndPalette as B, useDndItems as C, DndLayout as D, useDndChildren as E, Palette as F, PanelBinding as G, Props as H, Panel as I, PanelBindingSource as J, PanelBindingData as K, DraggableItem as L, DndLayoutProps as M, DndRegionProps as N, useDndLayout as O, Layout as P, withPanelCommit as Q, DraggableItemDragState as R, DndItemsOptions as S, DndChildrenOptions as T, DndRenderSectionFallback as U, DndPanel as V, DndSectionFallbackArgs as W, PanelNodesChange as X, PanelNodeChange as Y, resolvePanelBindings as Z, DndItemsActions as _, ItemsEditorActions as a, FieldProps as at, DndItemsNestedElement as b, ItemsEditorNestedGroup as c, useItemsEditor as d, DndNodePick as et, FieldKind as f, DndItems as g, isStructuralFieldKind as h, ItemsEditor as i, Field as it, Canvas as j, useDndPalette as k, ItemsEditorOptions as l, getFieldKind as m, ChildrenEditorOptions as n, DndEditError as nt, ItemsEditorItem as o, FieldKindBinding as p, PanelBindingElement as q, Dnd as r, DndRenderField as rt, ItemsEditorNestedElement as s, ChildrenEditor as t, useDndInspector as tt, useChildrenEditor as u, DndItemsExpansion as v, DndChildren as w, DndItemsNestedGroup as x, DndItemsItem as y, DraggableItemProps as z };
+//# sourceMappingURL=index-Dgh1JTX3.d.ts.map

package/dist/{index-w3kLcCXl.d.ts → index-f7ijuNTa.d.ts}

@@ -61,6 +61,13 @@ interface BindingItem extends BindingFieldSpec {
   label: string;
   property: string;
 }
+type BindingComponentName = `${string}.${string}` | Capitalize<string>;
+type BindingRegistry = Partial<Record<BindingComponentName, BindingItem[]>>;
+type BindingKeyMap = Record<string, BindingItem[]>;
+interface BindingOptions {
+  bindings?: BindingRegistry;
+  bindingKeys?: BindingKeyMap;
+}
 type NodeValueType = 'boolean' | 'number' | 'string' | 'null' | 'array' | 'object' | 'unknown';
 type EditableNodeValueType = 'boolean' | 'number' | 'string' | 'null';
 interface ExtractedNodeValue {
@@ -69,10 +76,15 @@ interface ExtractedNodeValue {
 }
 //#endregion
 //#region src/utils/ast/binding.d.ts
+declare const isComponentTagName: (tagName: string) => boolean;
+declare const getRegistryBindings: (registry: BindingRegistry | undefined, tagName: string) => BindingItem[] | undefined;
+declare const getKeyBindings: (bindingKeys: BindingKeyMap | undefined, key: string) => BindingItem[] | undefined;
+declare const resolveBindings: (own: BindingItem[] | undefined, key: string | null | undefined, tagName: string, options?: BindingOptions) => BindingItem[];
 declare const parseBinding: (bindingValue: string | null) => BindingItem[];
 declare const parseBindingExpression: (expression: ArrayExpression) => BindingItem[];
 declare const getCurrentValue: (node: DataAttrNode, property: string) => string;
 declare const getStructuredValue: (node: DataAttrNode, property: string, type?: BindingType) => unknown;
+declare const readNodeBindings: (node: DataAttrNode) => BindingItem[];
 declare const findEditableChildren: (node: DataAttrNode) => DataAttrNode[];
 //#endregion
 //#region src/utils/ast/value.d.ts
@@ -117,7 +129,7 @@ declare const duplicateArrayItems: (code: string, indices: Set<number>, generate
 declare const appendArrayItem: (code: string, kind: ItemKind, generateId?: () => string) => string | null;
 //#endregion
 //#region src/utils/ast/extract.d.ts
-declare function extract(raw: string): DataAttrNode[];
+declare function extract(raw: string, options?: BindingOptions): DataAttrNode[];
 declare function clearExtractCache(): void;
 //#endregion
 //#region src/utils/ast/update.d.ts
@@ -164,7 +176,7 @@ interface UpdateResult {
   failure?: UpdateFailure;
   failures?: UpdateFailure[];
 }
-declare const update: (code: string, dataId: string, label: string, value: unknown, property?: string) => UpdateResult;
+declare const update: (code: string, dataId: string, label: string, value: unknown, property?: string, options?: BindingOptions) => UpdateResult;
 interface UpdateEntry {
   dataId: string;
   label: string;
@@ -180,7 +192,7 @@ type UpdateAllResult = {
   failure: UpdateFailure;
   index: number;
 };
-declare const updateAll: (raw: string, entries: UpdateEntry[]) => UpdateAllResult;
+declare const updateAll: (raw: string, entries: UpdateEntry[], options?: BindingOptions) => UpdateAllResult;
 /**
  * @deprecated Not atomic: when an entry fails, the ones before and after it
  * are still applied, and the returned `code` carries them. Use `updateAll`,
@@ -251,5 +263,5 @@ interface ValidationResult {
 }
 declare const validateBindingValue: (binding: BindingItem, value: unknown) => ValidationResult;
 //#endregion
-export { BindingWidget as $, EditablePathSegment as A, parseValue as B, moveArrayItem as C, updateArrayItemProperty as D, removeArrayItems as E, createNodeFromValue as F, parseBinding as G, findEditableChildren as H, extractNodeValue as I, BindingItem as J, parseBindingExpression as K, extractObjectProperties as L, EditableValueEntry as M, arrayExpressionToCode as N, updateArrayItemValue as O, canLosslesslyEvaluateSource as P, BindingType as Q, flattenEditableValue as R, duplicateArrayItems as S, parseItems as T, getCurrentValue as U, setEditableValue as V, getStructuredValue as W, BindingRenderLeaf as X, BindingOption as Y, BindingRenderMap as Z, clearExtractCache as _, replaceIds as a, ItemKind as b, ChildrenEdit as c, UpdateEntry as d, DataAttrNode as et, UpdateFailure as f, updateAll as g, update as h, fillIds as i, EditablePrimitive as j, generateCode as k, getChildrenSignatures as l, bulkUpdate as m, validateBindingValue as n, ExtractedNodeValue as nt, canStructurallyEditArray as o, UpdateResult as p, BindingFieldSpec as q, clone as r, NodeValueType as rt, ChildrenAction as s, ValidationResult as t, EditableNodeValueType as tt, UpdateAllResult as u, extract as v, moveArrayItems as w, appendArrayItem as x, ArrayItem as y, parseArrayExpression as z };
-//# sourceMappingURL=index-w3kLcCXl.d.ts.map
+export { BindingFieldSpec as $, EditablePathSegment as A, parseValue as B, moveArrayItem as C, updateArrayItemProperty as D, removeArrayItems as E, createNodeFromValue as F, getRegistryBindings as G, findEditableChildren as H, extractNodeValue as I, parseBinding as J, getStructuredValue as K, extractObjectProperties as L, EditableValueEntry as M, arrayExpressionToCode as N, updateArrayItemValue as O, canLosslesslyEvaluateSource as P, BindingComponentName as Q, flattenEditableValue as R, duplicateArrayItems as S, parseItems as T, getCurrentValue as U, setEditableValue as V, getKeyBindings as W, readNodeBindings as X, parseBindingExpression as Y, resolveBindings as Z, clearExtractCache as _, replaceIds as a, BindingRenderLeaf as at, ItemKind as b, ChildrenEdit as c, BindingWidget as ct, UpdateEntry as d, ExtractedNodeValue as dt, BindingItem as et, UpdateFailure as f, NodeValueType as ft, updateAll as g, update as h, fillIds as i, BindingRegistry as it, EditablePrimitive as j, generateCode as k, getChildrenSignatures as l, DataAttrNode as lt, bulkUpdate as m, validateBindingValue as n, BindingOption as nt, canStructurallyEditArray as o, BindingRenderMap as ot, UpdateResult as p, isComponentTagName as q, clone as r, BindingOptions as rt, ChildrenAction as s, BindingType as st, ValidationResult as t, BindingKeyMap as tt, UpdateAllResult as u, EditableNodeValueType as ut, extract as v, moveArrayItems as w, appendArrayItem as x, ArrayItem as y, parseArrayExpression as z };
+//# sourceMappingURL=index-f7ijuNTa.d.ts.map

package/dist/index.d.ts

@@ -1,6 +1,7 @@
+import { it as BindingRegistry, rt as BindingOptions, tt as BindingKeyMap } from "./index-f7ijuNTa.js";
 import { v as Section } from "./document-Ct4jW78J.js";
 import { t as FrameProps } from "./index-DpDU1IAw.js";
-import { $ as DndNodePick, B as DndPalette, D as DndLayout, F as Palette, G as PanelBinding, H as Props, I as Panel, J as PanelNodeChange, P as Layout, Q as DndInspector, S as DndItemsOptions, U as DndRenderSectionFallback, V as DndPanel, W as DndSectionFallbackArgs, Y as PanelNodesChange, g as DndItems, i as ItemsEditor, it as FieldProps, j as Canvas, l as ItemsEditorOptions, nt as DndRenderField, o as ItemsEditorItem, r as Dnd, tt as DndEditError, y as DndItemsItem, z as DraggableItemProps } from "./index-CtlUYnWq.js";
+import { $ as DndInspector, B as DndPalette, D as DndLayout, F as Palette, G as PanelBinding, H as Props, I as Panel, P as Layout, S as DndItemsOptions, U as DndRenderSectionFallback, V as DndPanel, W as DndSectionFallbackArgs, X as PanelNodesChange, Y as PanelNodeChange, at as FieldProps, et as DndNodePick, g as DndItems, i as ItemsEditor, j as Canvas, l as ItemsEditorOptions, nt as DndEditError, o as ItemsEditorItem, r as Dnd, rt as DndRenderField, y as DndItemsItem, z as DraggableItemProps } from "./index-Dgh1JTX3.js";
 import { a as Props$2, n as EditorRenderData, r as Props$1, t as Editor } from "./index-13BDSrQc.js";
 import { a as Props$5, n as Props$4, o as Props$3, s as ErrorBoundary, t as Error } from "./index-C4SGQ3Ci.js";
 import { n as Preview, r as Props$6 } from "./index-DQkL37eL.js";
@@ -19,7 +20,7 @@ declare const App: {
   Editor: (({ defaultValue, value: _value, debounce, onChange: _onChange, renderEditor, fragment, prettierOptions, ...props }: Props$1) => import("react").JSX.Element) & {
     Core: ({ value, theme, height, className, prettierOptions, fragment, raw, onChange, onSave, onError, ...props }: Props$2) => import("react").JSX.Element;
   };
-  Dnd: (({ value: _value, props, modules: _modules, onChange: _onChange, className, items, frame, dynamicTailwind, provider, renderField, onEditError, renderSectionFallback, shouldForceSectionFallback, onBeforeDelete, sectionNameFallback, containerId, onNodePick, children, ...restProps }: Props) => import("react").JSX.Element) & {
+  Dnd: (({ value: _value, props, modules: _modules, onChange: _onChange, className, items, frame, dynamicTailwind, provider, renderField, onEditError, renderSectionFallback, shouldForceSectionFallback, onBeforeDelete, sectionNameFallback, containerId, bindings: bindingRegistry, bindingKeys, onNodePick, children, ...restProps }: Props) => import("react").JSX.Element) & {
     DraggableItem: ({ item, children }: DraggableItemProps) => import("react").ReactNode;
     Field: (props: FieldProps) => import("react").JSX.Element;
     Palette: typeof Palette;
@@ -30,5 +31,5 @@ declare const App: {
 };
 declare const LiveRenderer: ({ code, props, modules, dynamicTailwind, provider, ...restProps }: Props$6) => import("react").JSX.Element;
 //#endregion
-export { type DndEditError, type DndInspector, type DndItems, type DndItemsItem, type DndItemsOptions, type DndLayout, type DndNodePick, type DndPalette, type DndPanel, type DndRenderField, type DndRenderSectionFallback, type DndSectionFallbackArgs, type EditorRenderData, type FieldProps, type FrameProps, type ItemsEditor, type ItemsEditorItem, type ItemsEditorOptions, Dnd as LiveDnd, Editor as LiveEditor, Error as LiveError, Preview as LivePreview, App as LiveProvider, App as default, LiveRenderer, type PanelBinding, type PanelNodeChange, type PanelNodesChange, type Section };
+export { type BindingKeyMap, type BindingOptions, type BindingRegistry, type DndEditError, type DndInspector, type DndItems, type DndItemsItem, type DndItemsOptions, type DndLayout, type DndNodePick, type DndPalette, type DndPanel, type DndRenderField, type DndRenderSectionFallback, type DndSectionFallbackArgs, type EditorRenderData, type FieldProps, type FrameProps, type ItemsEditor, type ItemsEditorItem, type ItemsEditorOptions, Dnd as LiveDnd, Editor as LiveEditor, Error as LiveError, Preview as LivePreview, App as LiveProvider, App as default, LiveRenderer, type PanelBinding, type PanelNodeChange, type PanelNodesChange, type Section };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1,8 +1,8 @@
-import { t as ContextProvider } from "./context-93X3gyfJ.js";
-import { t as Dnd } from "./dnd-Z1KS16Fy.js";
-import { t as Editor } from "./editor-DvMruljw.js";
+import { t as ContextProvider } from "./context-DB5kW3qe.js";
+import { t as Dnd } from "./dnd-BE5ZizqX.js";
+import { t as Editor } from "./editor-DQ8Q--qR.js";
 import { t as Error } from "./error-DWhxQEom.js";
-import { t as Preview } from "./preview-C_UzpGWh.js";
+import { t as Preview } from "./preview-BnaCEFsF.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/index.tsx
 const App = ({ children }) => {

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Context","LivePreview","LiveError","LiveEditor","LiveDnd"],"sources":["../src/index.tsx"],"sourcesContent":["import './index.css';\n\nimport Context from './components/context';\nimport LiveDnd, {\n  type DndEditError,\n  type DndInspector,\n  type DndItems,\n  type DndItemsItem,\n  type DndItemsOptions,\n  type DndLayout,\n  type DndNodePick,\n  type DndPalette,\n  type DndPanel,\n  type DndRenderField,\n  type DndRenderSectionFallback,\n  type DndSectionFallbackArgs,\n  type FieldProps,\n  type ItemsEditor,\n  type ItemsEditorItem,\n  type ItemsEditorOptions,\n  type PanelBinding,\n  type PanelNodeChange,\n  type PanelNodesChange,\n} from './components/dnd';\nimport LiveEditor, { type EditorRenderData } from './components/editor';\nimport LiveError from './components/error';\nimport { type FrameProps } from './components/frame';\nimport LivePreview from './components/preview';\nimport type { Section } from './types';\n\nconst App = ({ children }: { children?: React.ReactNode }) => {\n  return <Context>{children}</Context>;\n};\n\nconst LiveRenderer = LivePreview;\n\nexport {\n  LivePreview,\n  LiveError,\n  LiveEditor,\n  LiveDnd,\n  LiveRenderer,\n  App as LiveProvider,\n  //\n};\n\nexport type {\n  DndEditError,\n  DndRenderField,\n  DndRenderSectionFallback,\n  DndSectionFallbackArgs,\n  DndPalette,\n  DndPanel,\n  DndLayout,\n  DndInspector,\n  DndNodePick,\n  PanelBinding,\n  PanelNodeChange,\n  PanelNodesChange,\n  FieldProps,\n  DndItems,\n  DndItemsItem,\n  DndItemsOptions,\n  // Deprecated aliases of the three above, kept until the next major.\n  ItemsEditor,\n  ItemsEditorItem,\n  ItemsEditorOptions,\n  EditorRenderData,\n  FrameProps,\n  Section,\n};\n\nApp.Preview = LivePreview;\nApp.Renderer = LiveRenderer;\nApp.Error = LiveError;\nApp.Editor = LiveEditor;\nApp.Dnd = LiveDnd;\n\nexport default App;\n"],"mappings":";;;;;;;AA8BA,MAAM,OAAO,EAAE,eAA+C;CAC5D,OAAO,oBAACA,iBAAD,EAAU,SAAkB,CAAA;AACrC;AAEA,MAAM,eAAeC;AAsCrB,IAAI,UAAUA;AACd,IAAI,WAAW;AACf,IAAI,QAAQC;AACZ,IAAI,SAASC;AACb,IAAI,MAAMC"}
+{"version":3,"file":"index.js","names":["Context","LivePreview","LiveError","LiveEditor","LiveDnd"],"sources":["../src/index.tsx"],"sourcesContent":["import './index.css';\n\nimport Context from './components/context';\nimport LiveDnd, {\n  type DndEditError,\n  type DndInspector,\n  type DndItems,\n  type DndItemsItem,\n  type DndItemsOptions,\n  type DndLayout,\n  type DndNodePick,\n  type DndPalette,\n  type DndPanel,\n  type DndRenderField,\n  type DndRenderSectionFallback,\n  type DndSectionFallbackArgs,\n  type FieldProps,\n  type ItemsEditor,\n  type ItemsEditorItem,\n  type ItemsEditorOptions,\n  type PanelBinding,\n  type PanelNodeChange,\n  type PanelNodesChange,\n} from './components/dnd';\nimport LiveEditor, { type EditorRenderData } from './components/editor';\nimport LiveError from './components/error';\nimport { type FrameProps } from './components/frame';\nimport LivePreview from './components/preview';\nimport type { Section } from './types';\nimport type {\n  BindingKeyMap,\n  BindingOptions,\n  BindingRegistry,\n} from './utils/ast';\n\nconst App = ({ children }: { children?: React.ReactNode }) => {\n  return <Context>{children}</Context>;\n};\n\nconst LiveRenderer = LivePreview;\n\nexport {\n  LivePreview,\n  LiveError,\n  LiveEditor,\n  LiveDnd,\n  LiveRenderer,\n  App as LiveProvider,\n  //\n};\n\nexport type {\n  DndEditError,\n  DndRenderField,\n  DndRenderSectionFallback,\n  DndSectionFallbackArgs,\n  DndPalette,\n  DndPanel,\n  DndLayout,\n  DndInspector,\n  DndNodePick,\n  PanelBinding,\n  PanelNodeChange,\n  PanelNodesChange,\n  FieldProps,\n  DndItems,\n  DndItemsItem,\n  DndItemsOptions,\n  // Deprecated aliases of the three above, kept until the next major.\n  ItemsEditor,\n  ItemsEditorItem,\n  ItemsEditorOptions,\n  EditorRenderData,\n  FrameProps,\n  Section,\n  BindingRegistry,\n  BindingKeyMap,\n  BindingOptions,\n};\n\nApp.Preview = LivePreview;\nApp.Renderer = LiveRenderer;\nApp.Error = LiveError;\nApp.Editor = LiveEditor;\nApp.Dnd = LiveDnd;\n\nexport default App;\n"],"mappings":";;;;;;;AAmCA,MAAM,OAAO,EAAE,eAA+C;CAC5D,OAAO,oBAACA,iBAAD,EAAU,SAAkB,CAAA;AACrC;AAEA,MAAM,eAAeC;AAyCrB,IAAI,UAAUA;AACd,IAAI,WAAW;AACf,IAAI,QAAQC;AACZ,IAAI,SAASC;AACb,IAAI,MAAMC"}

package/dist/preview/index.js

@@ -1,3 +1,3 @@
-import { r as baseModules } from "../use-dynamic-tailwind-DpbjmATF.js";
-import { t as Preview } from "../preview-C_UzpGWh.js";
+import { r as baseModules } from "../use-dynamic-tailwind-Bcipc1hL.js";
+import { t as Preview } from "../preview-BnaCEFsF.js";
 export { baseModules, Preview as default };

package/dist/{preview-C_UzpGWh.js → preview-BnaCEFsF.js}

@@ -1,6 +1,6 @@
 import { i as usePreview, r as useError } from "./states-Ci1AvoQ9.js";
 import { t as cn } from "./cn-CAnad2vL.js";
-import { a as Frame, n as useCompiledModule, t as useDynamicTailwind } from "./use-dynamic-tailwind-DpbjmATF.js";
+import { a as Frame, n as useCompiledModule, t as useDynamicTailwind } from "./use-dynamic-tailwind-Bcipc1hL.js";
 import { t as Error } from "./error-DWhxQEom.js";
 import { useMemo } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -83,4 +83,4 @@ const Preview = ({ code, props = NO_PROPS, modules = NO_MODULES, dynamicTailwind
 //#endregion
 export { Preview as t };
 
-//# sourceMappingURL=preview-C_UzpGWh.js.map
+//# sourceMappingURL=preview-BnaCEFsF.js.map

package/dist/{preview-C_UzpGWh.js.map → preview-BnaCEFsF.js.map}

@@ -1 +1 @@
-{"version":3,"file":"preview-C_UzpGWh.js","names":["LiveError"],"sources":["../src/components/preview/defaults.ts","../src/components/preview/client.tsx","../src/components/preview/preview.tsx"],"sourcesContent":["// Stable defaults for optional object props. A `= {}` default is a new\n// object on every render, which re-runs every memo keyed on it — the merged\n// module map, and so `compile()` — even when the caller passed nothing (#348).\nexport const NO_PROPS: Record<string, unknown> = {};\nexport const NO_MODULES: Record<string, unknown> = {};\n","'use client';\n\nimport { useMemo } from 'react';\n\nimport { useError, usePreview } from '~/components/context/states';\nimport LiveError from '~/components/error';\nimport Frame, { type FrameProps } from '~/components/frame';\nimport { cn } from '~/utils/cn';\n\nimport { NO_MODULES, NO_PROPS } from './defaults';\nimport { type Props } from './preview';\nimport { useCompiledModule } from './use-compiled-module';\nimport { useDynamicTailwind } from './use-dynamic-tailwind';\n\nconst Client = ({\n  code: _code,\n  className,\n  showError,\n  props = NO_PROPS,\n  modules = NO_MODULES,\n  frame,\n  dynamicTailwind = false,\n  provider,\n}: Props) => {\n  const { code } = usePreview();\n  const { error, setError } = useError();\n  const isError = !!showError && !!error;\n\n  const classNames = cn(isError && 'hidden', className);\n\n  const effectiveCode = _code === undefined ? code : _code;\n\n  const module = useCompiledModule(effectiveCode, modules);\n\n  // Attached to the wrapper below; scans the rendered DOM so classes coming\n  // from an imported component are picked up too. See the hook for details.\n  const { ref: contentRef, css: dynamicCSS } = useDynamicTailwind(\n    effectiveCode,\n    dynamicTailwind,\n  );\n\n  const componentProps = useMemo(\n    () => ({\n      ...props,\n    }),\n    [props],\n  );\n\n  const renderProvider = (component: React.ReactNode) => {\n    return provider ? provider(component) : component;\n  };\n\n  if (module && module.error) {\n    return (\n      <>\n        <div className={cn('relative h-full w-full', classNames)}>\n          <LiveError message={module.error} title=\"Compile Error\" />\n        </div>\n        <LiveError.Runtime open={isError} />\n      </>\n    );\n  }\n\n  const Component = module?.exports?.default;\n\n  if (!Component) {\n    return null;\n  }\n\n  return (\n    <>\n      {frame ? (\n        <div className={cn('h-full w-full', classNames)}>\n          <Frame {...(frame as FrameProps)}>\n            {container => (\n              <div ref={contentRef} style={{ display: 'contents' }}>\n                <LiveError.Boundary\n                  resetKeys={[effectiveCode]}\n                  onError={(e: Error) => setError(e.message)}\n                >\n                  {renderProvider(\n                    <LiveError.Guard onError={e => setError(e.message)}>\n                      <Component {...componentProps} container={container} />\n                      {dynamicTailwind && dynamicCSS && (\n                        <style>{dynamicCSS}</style>\n                      )}\n                    </LiveError.Guard>,\n                  )}\n                </LiveError.Boundary>\n              </div>\n            )}\n          </Frame>\n        </div>\n      ) : (\n        <div\n          ref={contentRef}\n          className={cn(\n            'relative h-full w-full overflow-x-hidden overflow-y-auto',\n            classNames,\n          )}\n          style={{\n            isolation: 'isolate',\n            transform: 'translateZ(0)',\n            containerType: 'inline-size',\n          }}\n        >\n          <LiveError.Boundary\n            resetKeys={[effectiveCode]}\n            onError={e => setError(e.message)}\n          >\n            {renderProvider(\n              <LiveError.Guard onError={e => setError(e.message)}>\n                <Component {...componentProps} />\n                {dynamicTailwind && dynamicCSS && <style>{dynamicCSS}</style>}\n              </LiveError.Guard>,\n            )}\n          </LiveError.Boundary>\n        </div>\n      )}\n      <LiveError.Runtime open={isError} />\n    </>\n  );\n};\n\nexport default Client;\n","import type React from 'react';\n\nimport type { FrameProps } from '../frame';\nimport Client from './client';\nimport { NO_MODULES, NO_PROPS } from './defaults';\n\nexport interface Props extends React.ComponentPropsWithRef<'div'> {\n  code?: string;\n  showError?: boolean;\n  props?: Record<string, unknown>;\n  container?: HTMLElement | null;\n  frame?: boolean | FrameProps;\n  modules?: Record<string, unknown>;\n  dynamicTailwind?: boolean;\n  provider?: (children: React.ReactNode) => React.ReactNode;\n}\n\n// A thin wrapper around Client, which does the actual compiling, error\n// handling, and frame wrapping. This used to have its own duplicate\n// compile-and-render branch for the `code` prop that never wrapped its\n// output in <Frame>, so `frame` was silently ignored whenever `code` was\n// passed — see #187. Client already handles `code` (falling back to\n// context when absent) and `frame`, so there is only one render path now.\nconst Preview = ({\n  code,\n  props = NO_PROPS,\n  modules = NO_MODULES,\n  dynamicTailwind = false,\n  provider,\n  ...restProps\n}: Props) => {\n  return (\n    <Client\n      code={code}\n      props={props}\n      modules={modules}\n      dynamicTailwind={dynamicTailwind}\n      provider={provider}\n      {...restProps}\n    />\n  );\n};\n\nexport default Preview;\n"],"mappings":";;;;;;;AAGA,MAAa,WAAoC,CAAC;AAClD,MAAa,aAAsC,CAAC;;;ACUpD,MAAM,UAAU,EACd,MAAM,OACN,WACA,WACA,QAAQ,UACR,UAAU,YACV,OACA,kBAAkB,OAClB,eACW;CACX,MAAM,EAAE,SAAS,WAAW;CAC5B,MAAM,EAAE,OAAO,aAAa,SAAS;CACrC,MAAM,UAAU,CAAC,CAAC,aAAa,CAAC,CAAC;CAEjC,MAAM,aAAa,GAAG,WAAW,UAAU,SAAS;CAEpD,MAAM,gBAAgB,UAAU,KAAA,IAAY,OAAO;CAEnD,MAAM,SAAS,kBAAkB,eAAe,OAAO;CAIvD,MAAM,EAAE,KAAK,YAAY,KAAK,eAAe,mBAC3C,eACA,eACF;CAEA,MAAM,iBAAiB,eACd,EACL,GAAG,MACL,IACA,CAAC,KAAK,CACR;CAEA,MAAM,kBAAkB,cAA+B;EACrD,OAAO,WAAW,SAAS,SAAS,IAAI;CAC1C;CAEA,IAAI,UAAU,OAAO,OACnB,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAD;EAAK,WAAW,GAAG,0BAA0B,UAAU;EACrD,UAAA,oBAACA,OAAD;GAAW,SAAS,OAAO;GAAO,OAAM;EAAiB,CAAA;CACtD,CAAA,GACL,oBAACA,MAAU,SAAX,EAAmB,MAAM,QAAU,CAAA,CACnC,EAAA,CAAA;CAIN,MAAM,YAAY,QAAQ,SAAS;CAEnC,IAAI,CAAC,WACH,OAAO;CAGT,OACE,qBAAA,UAAA,EAAA,UAAA,CACG,QACC,oBAAC,OAAD;EAAK,WAAW,GAAG,iBAAiB,UAAU;EAC5C,UAAA,oBAAC,OAAD;GAAO,GAAK;GACT,WAAA,cACC,oBAAC,OAAD;IAAK,KAAK;IAAY,OAAO,EAAE,SAAS,WAAW;IACjD,UAAA,oBAACA,MAAU,UAAX;KACE,WAAW,CAAC,aAAa;KACzB,UAAU,MAAa,SAAS,EAAE,OAAO;KAExC,UAAA,eACC,qBAACA,MAAU,OAAX;MAAiB,UAAS,MAAK,SAAS,EAAE,OAAO;MAAjD,UAAA,CACE,oBAAC,WAAD;OAAW,GAAI;OAA2B;MAAY,CAAA,GACrD,mBAAmB,cAClB,oBAAC,SAAD,EAAA,UAAQ,WAAkB,CAAA,CAEb;KACnB,CAAA,CAAA;IACkB,CAAA;GACjB,CAAA;EAEF,CAAA;CACJ,CAAA,IAEL,oBAAC,OAAD;EACE,KAAK;EACL,WAAW,GACT,4DACA,UACF;EACA,OAAO;GACL,WAAW;GACX,WAAW;GACX,eAAe;EACjB;EAEA,UAAA,oBAACA,MAAU,UAAX;GACE,WAAW,CAAC,aAAa;GACzB,UAAS,MAAK,SAAS,EAAE,OAAO;GAE/B,UAAA,eACC,qBAACA,MAAU,OAAX;IAAiB,UAAS,MAAK,SAAS,EAAE,OAAO;IAAjD,UAAA,CACE,oBAAC,WAAD,EAAW,GAAI,eAAiB,CAAA,GAC/B,mBAAmB,cAAc,oBAAC,SAAD,EAAA,UAAQ,WAAkB,CAAA,CAC7C;GACnB,CAAA,CAAA;EACkB,CAAA;CACjB,CAAA,GAEP,oBAACA,MAAU,SAAX,EAAmB,MAAM,QAAU,CAAA,CACnC,EAAA,CAAA;AAEN;;;ACnGA,MAAM,WAAW,EACf,MACA,QAAQ,UACR,UAAU,YACV,kBAAkB,OAClB,UACA,GAAG,gBACQ;CACX,OACE,oBAAC,QAAD;EACQ;EACC;EACE;EACQ;EACP;EACV,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"preview-BnaCEFsF.js","names":["LiveError"],"sources":["../src/components/preview/defaults.ts","../src/components/preview/client.tsx","../src/components/preview/preview.tsx"],"sourcesContent":["// Stable defaults for optional object props. A `= {}` default is a new\n// object on every render, which re-runs every memo keyed on it — the merged\n// module map, and so `compile()` — even when the caller passed nothing (#348).\nexport const NO_PROPS: Record<string, unknown> = {};\nexport const NO_MODULES: Record<string, unknown> = {};\n","'use client';\n\nimport { useMemo } from 'react';\n\nimport { useError, usePreview } from '~/components/context/states';\nimport LiveError from '~/components/error';\nimport Frame, { type FrameProps } from '~/components/frame';\nimport { cn } from '~/utils/cn';\n\nimport { NO_MODULES, NO_PROPS } from './defaults';\nimport { type Props } from './preview';\nimport { useCompiledModule } from './use-compiled-module';\nimport { useDynamicTailwind } from './use-dynamic-tailwind';\n\nconst Client = ({\n  code: _code,\n  className,\n  showError,\n  props = NO_PROPS,\n  modules = NO_MODULES,\n  frame,\n  dynamicTailwind = false,\n  provider,\n}: Props) => {\n  const { code } = usePreview();\n  const { error, setError } = useError();\n  const isError = !!showError && !!error;\n\n  const classNames = cn(isError && 'hidden', className);\n\n  const effectiveCode = _code === undefined ? code : _code;\n\n  const module = useCompiledModule(effectiveCode, modules);\n\n  // Attached to the wrapper below; scans the rendered DOM so classes coming\n  // from an imported component are picked up too. See the hook for details.\n  const { ref: contentRef, css: dynamicCSS } = useDynamicTailwind(\n    effectiveCode,\n    dynamicTailwind,\n  );\n\n  const componentProps = useMemo(\n    () => ({\n      ...props,\n    }),\n    [props],\n  );\n\n  const renderProvider = (component: React.ReactNode) => {\n    return provider ? provider(component) : component;\n  };\n\n  if (module && module.error) {\n    return (\n      <>\n        <div className={cn('relative h-full w-full', classNames)}>\n          <LiveError message={module.error} title=\"Compile Error\" />\n        </div>\n        <LiveError.Runtime open={isError} />\n      </>\n    );\n  }\n\n  const Component = module?.exports?.default;\n\n  if (!Component) {\n    return null;\n  }\n\n  return (\n    <>\n      {frame ? (\n        <div className={cn('h-full w-full', classNames)}>\n          <Frame {...(frame as FrameProps)}>\n            {container => (\n              <div ref={contentRef} style={{ display: 'contents' }}>\n                <LiveError.Boundary\n                  resetKeys={[effectiveCode]}\n                  onError={(e: Error) => setError(e.message)}\n                >\n                  {renderProvider(\n                    <LiveError.Guard onError={e => setError(e.message)}>\n                      <Component {...componentProps} container={container} />\n                      {dynamicTailwind && dynamicCSS && (\n                        <style>{dynamicCSS}</style>\n                      )}\n                    </LiveError.Guard>,\n                  )}\n                </LiveError.Boundary>\n              </div>\n            )}\n          </Frame>\n        </div>\n      ) : (\n        <div\n          ref={contentRef}\n          className={cn(\n            'relative h-full w-full overflow-x-hidden overflow-y-auto',\n            classNames,\n          )}\n          style={{\n            isolation: 'isolate',\n            transform: 'translateZ(0)',\n            containerType: 'inline-size',\n          }}\n        >\n          <LiveError.Boundary\n            resetKeys={[effectiveCode]}\n            onError={e => setError(e.message)}\n          >\n            {renderProvider(\n              <LiveError.Guard onError={e => setError(e.message)}>\n                <Component {...componentProps} />\n                {dynamicTailwind && dynamicCSS && <style>{dynamicCSS}</style>}\n              </LiveError.Guard>,\n            )}\n          </LiveError.Boundary>\n        </div>\n      )}\n      <LiveError.Runtime open={isError} />\n    </>\n  );\n};\n\nexport default Client;\n","import type React from 'react';\n\nimport type { FrameProps } from '../frame';\nimport Client from './client';\nimport { NO_MODULES, NO_PROPS } from './defaults';\n\nexport interface Props extends React.ComponentPropsWithRef<'div'> {\n  code?: string;\n  showError?: boolean;\n  props?: Record<string, unknown>;\n  container?: HTMLElement | null;\n  frame?: boolean | FrameProps;\n  modules?: Record<string, unknown>;\n  dynamicTailwind?: boolean;\n  provider?: (children: React.ReactNode) => React.ReactNode;\n}\n\n// A thin wrapper around Client, which does the actual compiling, error\n// handling, and frame wrapping. This used to have its own duplicate\n// compile-and-render branch for the `code` prop that never wrapped its\n// output in <Frame>, so `frame` was silently ignored whenever `code` was\n// passed — see #187. Client already handles `code` (falling back to\n// context when absent) and `frame`, so there is only one render path now.\nconst Preview = ({\n  code,\n  props = NO_PROPS,\n  modules = NO_MODULES,\n  dynamicTailwind = false,\n  provider,\n  ...restProps\n}: Props) => {\n  return (\n    <Client\n      code={code}\n      props={props}\n      modules={modules}\n      dynamicTailwind={dynamicTailwind}\n      provider={provider}\n      {...restProps}\n    />\n  );\n};\n\nexport default Preview;\n"],"mappings":";;;;;;;AAGA,MAAa,WAAoC,CAAC;AAClD,MAAa,aAAsC,CAAC;;;ACUpD,MAAM,UAAU,EACd,MAAM,OACN,WACA,WACA,QAAQ,UACR,UAAU,YACV,OACA,kBAAkB,OAClB,eACW;CACX,MAAM,EAAE,SAAS,WAAW;CAC5B,MAAM,EAAE,OAAO,aAAa,SAAS;CACrC,MAAM,UAAU,CAAC,CAAC,aAAa,CAAC,CAAC;CAEjC,MAAM,aAAa,GAAG,WAAW,UAAU,SAAS;CAEpD,MAAM,gBAAgB,UAAU,KAAA,IAAY,OAAO;CAEnD,MAAM,SAAS,kBAAkB,eAAe,OAAO;CAIvD,MAAM,EAAE,KAAK,YAAY,KAAK,eAAe,mBAC3C,eACA,eACF;CAEA,MAAM,iBAAiB,eACd,EACL,GAAG,MACL,IACA,CAAC,KAAK,CACR;CAEA,MAAM,kBAAkB,cAA+B;EACrD,OAAO,WAAW,SAAS,SAAS,IAAI;CAC1C;CAEA,IAAI,UAAU,OAAO,OACnB,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAD;EAAK,WAAW,GAAG,0BAA0B,UAAU;EACrD,UAAA,oBAACA,OAAD;GAAW,SAAS,OAAO;GAAO,OAAM;EAAiB,CAAA;CACtD,CAAA,GACL,oBAACA,MAAU,SAAX,EAAmB,MAAM,QAAU,CAAA,CACnC,EAAA,CAAA;CAIN,MAAM,YAAY,QAAQ,SAAS;CAEnC,IAAI,CAAC,WACH,OAAO;CAGT,OACE,qBAAA,UAAA,EAAA,UAAA,CACG,QACC,oBAAC,OAAD;EAAK,WAAW,GAAG,iBAAiB,UAAU;EAC5C,UAAA,oBAAC,OAAD;GAAO,GAAK;GACT,WAAA,cACC,oBAAC,OAAD;IAAK,KAAK;IAAY,OAAO,EAAE,SAAS,WAAW;IACjD,UAAA,oBAACA,MAAU,UAAX;KACE,WAAW,CAAC,aAAa;KACzB,UAAU,MAAa,SAAS,EAAE,OAAO;KAExC,UAAA,eACC,qBAACA,MAAU,OAAX;MAAiB,UAAS,MAAK,SAAS,EAAE,OAAO;MAAjD,UAAA,CACE,oBAAC,WAAD;OAAW,GAAI;OAA2B;MAAY,CAAA,GACrD,mBAAmB,cAClB,oBAAC,SAAD,EAAA,UAAQ,WAAkB,CAAA,CAEb;KACnB,CAAA,CAAA;IACkB,CAAA;GACjB,CAAA;EAEF,CAAA;CACJ,CAAA,IAEL,oBAAC,OAAD;EACE,KAAK;EACL,WAAW,GACT,4DACA,UACF;EACA,OAAO;GACL,WAAW;GACX,WAAW;GACX,eAAe;EACjB;EAEA,UAAA,oBAACA,MAAU,UAAX;GACE,WAAW,CAAC,aAAa;GACzB,UAAS,MAAK,SAAS,EAAE,OAAO;GAE/B,UAAA,eACC,qBAACA,MAAU,OAAX;IAAiB,UAAS,MAAK,SAAS,EAAE,OAAO;IAAjD,UAAA,CACE,oBAAC,WAAD,EAAW,GAAI,eAAiB,CAAA,GAC/B,mBAAmB,cAAc,oBAAC,SAAD,EAAA,UAAQ,WAAkB,CAAA,CAC7C;GACnB,CAAA,CAAA;EACkB,CAAA;CACjB,CAAA,GAEP,oBAACA,MAAU,SAAX,EAAmB,MAAM,QAAU,CAAA,CACnC,EAAA,CAAA;AAEN;;;ACnGA,MAAM,WAAW,EACf,MACA,QAAQ,UACR,UAAU,YACV,kBAAkB,OAClB,UACA,GAAG,gBACQ;CACX,OACE,oBAAC,QAAD;EACQ;EACC;EACE;EACQ;EACP;EACV,GAAI;CACL,CAAA;AAEL"}

package/dist/provider/index.js

@@ -1,2 +1,2 @@
-import { t as ContextProvider } from "../context-93X3gyfJ.js";
+import { t as ContextProvider } from "../context-DB5kW3qe.js";
 export { ContextProvider as default };

package/dist/{sections-GJQ63uEB.js → sections-CBVMO8Jl.js}

@@ -1,5 +1,5 @@
-import { a as generateSectionPreview, l as parseDocument, o as generateSectionPreviews, s as getSections, u as replaceDocumentSections } from "./document-cEEdFERz.js";
-import { i as DEFAULT_CONTAINER_ID, u as documentTemplate } from "./constants-CKvdqZtO.js";
+import { a as generateSectionPreview, l as parseDocument, o as generateSectionPreviews, s as getSections, u as replaceDocumentSections } from "./document-BDn_f08_.js";
+import { i as DEFAULT_CONTAINER_ID, u as documentTemplate } from "./constants-h1JAgOeW.js";
 //#region src/utils/sections.ts
 const extractSections = (code, options) => {
 	const doc = parseDocument(code, options);
@@ -21,4 +21,4 @@ const createDocument = ({ containerId = DEFAULT_CONTAINER_ID } = {}) => {
 //#endregion
 export { replaceSections as a, generateSections as i, extractSections as n, generateSection as r, createDocument as t };
 
-//# sourceMappingURL=sections-GJQ63uEB.js.map
+//# sourceMappingURL=sections-CBVMO8Jl.js.map

package/dist/{sections-GJQ63uEB.js.map → sections-CBVMO8Jl.js.map}

@@ -1 +1 @@
-{"version":3,"file":"sections-GJQ63uEB.js","names":[],"sources":["../src/utils/sections.ts"],"sourcesContent":["import { DEFAULT_CONTAINER_ID, documentTemplate } from '~/constants';\nimport type { Section } from '~/types';\n\nimport {\n  type DocumentOptions,\n  type SectionOptions,\n  createSectionPreviewCache,\n  generateSectionPreview,\n  generateSectionPreviews,\n  getSections,\n  parseDocument,\n  replaceDocumentSections,\n} from './ast/document';\n\nexport const extractSections = (\n  code: string,\n  options?: SectionOptions,\n): Section[] => {\n  const doc = parseDocument(code, options);\n\n  return doc ? getSections(doc, options) : [];\n};\n\nexport const replaceSections = (\n  code: string,\n  sections: string[],\n  options?: DocumentOptions,\n): string => {\n  return replaceDocumentSections(code, sections, options);\n};\n\nexport const generateSection = (\n  code: string,\n  fullCode: string,\n  options?: DocumentOptions,\n) => {\n  return generateSectionPreview(fullCode, code, options);\n};\n\n// Batched form of generateSection() — computes every section's preview from\n// a single parse of fullCode instead of one parseDocument call per section\n// (see generateSectionPreviews). Unchanged sections come back byte-identical\n// to their previous preview string, which is what lets a caller pass each\n// one down as a stable prop (see Renderer's React.memo).\nexport const generateSections = (\n  codes: string[],\n  fullCode: string,\n  options?: DocumentOptions,\n): string[] => {\n  return generateSectionPreviews(fullCode, codes, options);\n};\n\n// A new, empty document `Live.Dnd` can add sections to: an `App` component\n// rendering the container element and nothing else. Start a controlled\n// `Live.Dnd` from this rather than an empty string, which has no container,\n// so nothing dropped on the canvas would land anywhere (#449). Pass the same\n// `containerId` you give `Live.Dnd`.\nexport const createDocument = ({\n  containerId = DEFAULT_CONTAINER_ID,\n}: DocumentOptions = {}): string => {\n  // The id is written into a JSX attribute as-is, so anything that could end\n  // the attribute or the tag is refused rather than producing broken source.\n  if (!/^[^\\s\"'<>{}]+$/.test(containerId)) {\n    throw new Error(\n      `createDocument: containerId must be a plain element id, got ${JSON.stringify(containerId)}`,\n    );\n  }\n\n  return documentTemplate(containerId);\n};\n\n// Incremental counterpart to generateSections() — see createSectionPreviewCache\n// (#131). Pass a fresh instance's `compute` in place of generateSections()\n// where the caller can keep it alive across renders (e.g. Dnd holds one via\n// `useState(() => createSectionPreviewCache())`).\nexport { createSectionPreviewCache };\nexport type {\n  DocumentOptions,\n  SectionOptions,\n  SectionPreviewCache,\n} from './ast/document';\n"],"mappings":";;;AAcA,MAAa,mBACX,MACA,YACc;CACd,MAAM,MAAM,cAAc,MAAM,OAAO;CAEvC,OAAO,MAAM,YAAY,KAAK,OAAO,IAAI,CAAC;AAC5C;AAEA,MAAa,mBACX,MACA,UACA,YACW;CACX,OAAO,wBAAwB,MAAM,UAAU,OAAO;AACxD;AAEA,MAAa,mBACX,MACA,UACA,YACG;CACH,OAAO,uBAAuB,UAAU,MAAM,OAAO;AACvD;AAOA,MAAa,oBACX,OACA,UACA,YACa;CACb,OAAO,wBAAwB,UAAU,OAAO,OAAO;AACzD;AAOA,MAAa,kBAAkB,EAC7B,cAAc,yBACK,CAAC,MAAc;CAGlC,IAAI,CAAC,iBAAiB,KAAK,WAAW,GACpC,MAAM,IAAI,MACR,+DAA+D,KAAK,UAAU,WAAW,GAC3F;CAGF,OAAO,iBAAiB,WAAW;AACrC"}
+{"version":3,"file":"sections-CBVMO8Jl.js","names":[],"sources":["../src/utils/sections.ts"],"sourcesContent":["import { DEFAULT_CONTAINER_ID, documentTemplate } from '~/constants';\nimport type { Section } from '~/types';\n\nimport {\n  type DocumentOptions,\n  type SectionOptions,\n  createSectionPreviewCache,\n  generateSectionPreview,\n  generateSectionPreviews,\n  getSections,\n  parseDocument,\n  replaceDocumentSections,\n} from './ast/document';\n\nexport const extractSections = (\n  code: string,\n  options?: SectionOptions,\n): Section[] => {\n  const doc = parseDocument(code, options);\n\n  return doc ? getSections(doc, options) : [];\n};\n\nexport const replaceSections = (\n  code: string,\n  sections: string[],\n  options?: DocumentOptions,\n): string => {\n  return replaceDocumentSections(code, sections, options);\n};\n\nexport const generateSection = (\n  code: string,\n  fullCode: string,\n  options?: DocumentOptions,\n) => {\n  return generateSectionPreview(fullCode, code, options);\n};\n\n// Batched form of generateSection() — computes every section's preview from\n// a single parse of fullCode instead of one parseDocument call per section\n// (see generateSectionPreviews). Unchanged sections come back byte-identical\n// to their previous preview string, which is what lets a caller pass each\n// one down as a stable prop (see Renderer's React.memo).\nexport const generateSections = (\n  codes: string[],\n  fullCode: string,\n  options?: DocumentOptions,\n): string[] => {\n  return generateSectionPreviews(fullCode, codes, options);\n};\n\n// A new, empty document `Live.Dnd` can add sections to: an `App` component\n// rendering the container element and nothing else. Start a controlled\n// `Live.Dnd` from this rather than an empty string, which has no container,\n// so nothing dropped on the canvas would land anywhere (#449). Pass the same\n// `containerId` you give `Live.Dnd`.\nexport const createDocument = ({\n  containerId = DEFAULT_CONTAINER_ID,\n}: DocumentOptions = {}): string => {\n  // The id is written into a JSX attribute as-is, so anything that could end\n  // the attribute or the tag is refused rather than producing broken source.\n  if (!/^[^\\s\"'<>{}]+$/.test(containerId)) {\n    throw new Error(\n      `createDocument: containerId must be a plain element id, got ${JSON.stringify(containerId)}`,\n    );\n  }\n\n  return documentTemplate(containerId);\n};\n\n// Incremental counterpart to generateSections() — see createSectionPreviewCache\n// (#131). Pass a fresh instance's `compute` in place of generateSections()\n// where the caller can keep it alive across renders (e.g. Dnd holds one via\n// `useState(() => createSectionPreviewCache())`).\nexport { createSectionPreviewCache };\nexport type {\n  DocumentOptions,\n  SectionOptions,\n  SectionPreviewCache,\n} from './ast/document';\n"],"mappings":";;;AAcA,MAAa,mBACX,MACA,YACc;CACd,MAAM,MAAM,cAAc,MAAM,OAAO;CAEvC,OAAO,MAAM,YAAY,KAAK,OAAO,IAAI,CAAC;AAC5C;AAEA,MAAa,mBACX,MACA,UACA,YACW;CACX,OAAO,wBAAwB,MAAM,UAAU,OAAO;AACxD;AAEA,MAAa,mBACX,MACA,UACA,YACG;CACH,OAAO,uBAAuB,UAAU,MAAM,OAAO;AACvD;AAOA,MAAa,oBACX,OACA,UACA,YACa;CACb,OAAO,wBAAwB,UAAU,OAAO,OAAO;AACzD;AAOA,MAAa,kBAAkB,EAC7B,cAAc,yBACK,CAAC,MAAc;CAGlC,IAAI,CAAC,iBAAiB,KAAK,WAAW,GACpC,MAAM,IAAI,MACR,+DAA+D,KAAK,UAAU,WAAW,GAC3F;CAGF,OAAO,iBAAiB,WAAW;AACrC"}

package/dist/{use-dynamic-tailwind-DpbjmATF.js → use-dynamic-tailwind-Bcipc1hL.js}

@@ -1,4 +1,4 @@
-import { n as compile, s as withScriptBlobs } from "./compile-0Dvp8zp5.js";
+import { n as compile, s as withScriptBlobs } from "./compile-DDfk5P25.js";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import * as ui from "@jbpark/ui-kit";
@@ -90,6 +90,30 @@ const reconcileStyles = (sourceDocument, target, manager, enabled, transformStyl
 		previous = clone;
 	});
 };
+const createRootAttributeSync = () => ({
+	attributes: /* @__PURE__ */ new Set(),
+	classes: /* @__PURE__ */ new Set()
+});
+const isMirroredAttribute = (name) => name.startsWith("data-");
+const reconcileRootAttributes = (source, target, sync, enabled) => {
+	const attributes = enabled ? Array.from(source.attributes).filter(({ name }) => isMirroredAttribute(name)) : [];
+	const classes = enabled ? Array.from(source.classList) : [];
+	const attributeNames = new Set(attributes.map(({ name }) => name));
+	const classNames = new Set(classes);
+	sync.attributes.forEach((name) => {
+		if (!attributeNames.has(name)) target.removeAttribute(name);
+	});
+	attributes.forEach(({ name, value }) => {
+		if (target.getAttribute(name) !== value) target.setAttribute(name, value);
+	});
+	sync.classes.forEach((name) => {
+		if (!classNames.has(name)) target.classList.remove(name);
+	});
+	classes.forEach((name) => target.classList.add(name));
+	if (!target.classList.length) target.removeAttribute("class");
+	sync.attributes = attributeNames;
+	sync.classes = classNames;
+};
 //#endregion
 //#region src/components/frame/viewport-units.ts
 const UNIT_MAP = {
@@ -149,6 +173,7 @@ const IFrame = ({ title = "Live Preview", sandbox, style = {}, scripts = EMPTY_S
 	const iframeRef = useRef(null);
 	const [mountNode, setMountNode] = useState(null);
 	const loadedScriptsRef = useRef(/* @__PURE__ */ new Set());
+	const loadedScriptsDocRef = useRef(null);
 	const prevStyleCountRef = useRef(0);
 	const prevStylesheetCountRef = useRef(0);
 	const trackedAnimationsRef = useRef(/* @__PURE__ */ new WeakSet());
@@ -156,10 +181,12 @@ const IFrame = ({ title = "Live Preview", sandbox, style = {}, scripts = EMPTY_S
 	const lastProbeHeightRef = useRef(void 0);
 	const shouldAutoHeight = autoHeight && style.height == null;
 	const styleManagerRef = useRef(createStyleSyncManager());
+	const rootAttributeSyncRef = useRef(createRootAttributeSync());
 	const applyStyle = useCallback(() => {
 		const doc = iframeRef.current?.contentDocument;
 		if (!doc) return;
 		reconcileStyles(document, doc, styleManagerRef.current, syncStyle, convertViewportUnits, doc.getElementById(CONTAINER_STYLE_ID));
+		reconcileRootAttributes(document.documentElement, doc.documentElement, rootAttributeSyncRef.current, syncStyle);
 	}, [syncStyle]);
 	const applyStyleTimeoutRef = useRef(void 0);
 	const debouncedApplyStyle = useCallback(() => {
@@ -175,12 +202,20 @@ const IFrame = ({ title = "Live Preview", sandbox, style = {}, scripts = EMPTY_S
 		subtree: true,
 		attributes: true
 	});
+	useMutationObserver(document.documentElement, debouncedApplyStyle, {
+		enabled: syncStyle,
+		attributes: true
+	});
 	useEffect(() => {
 		const $iframe = iframeRef.current;
 		if (!$iframe) return;
 		const onLoad = () => {
 			const doc = $iframe.contentDocument;
 			if (!doc) return;
+			if (loadedScriptsDocRef.current !== doc) {
+				loadedScriptsDocRef.current = doc;
+				loadedScriptsRef.current = /* @__PURE__ */ new Set();
+			}
 			doc.body.style.overflowX = "hidden";
 			doc.body.style.margin = "0";
 			let node = doc.getElementById("iframe-root");
@@ -318,6 +353,12 @@ const IFrame = ({ title = "Live Preview", sandbox, style = {}, scripts = EMPTY_S
 		if (shouldAutoHeight) return;
 		iframeRef.current?.contentDocument?.getElementById(CONTAINER_STYLE_ID)?.remove();
 	}, [shouldAutoHeight]);
+	useEffect(() => {
+		const body = iframeRef.current?.contentDocument?.body;
+		if (!body || !mountNode) return;
+		if (shouldAutoHeight) body.style.removeProperty("overflow-y");
+		else body.style.setProperty("overflow-y", "auto");
+	}, [shouldAutoHeight, mountNode]);
 	useEffect(() => {
 		const doc = iframeRef.current?.contentDocument;
 		if (!doc?.head) return;
@@ -527,4 +568,4 @@ const useDynamicTailwind = (code, enabled) => {
 //#endregion
 export { Frame as a, useStableModules as i, useCompiledModule as n, baseModules as r, useDynamicTailwind as t };
 
-//# sourceMappingURL=use-dynamic-tailwind-DpbjmATF.js.map
+//# sourceMappingURL=use-dynamic-tailwind-Bcipc1hL.js.map