@jbpark/live-editor 3.2.1 → 4.0.0

package/dist/{index-DxbG789f.d.ts → index-B_p74BRM.d.ts}

@@ -31,21 +31,17 @@ interface BindingOption {
   label: string;
   value: string;
 }
-declare const BINDING_TYPES: readonly ["array", "object", "string", "number", "boolean", "color", "jsx", "richtext", "date", "url", "icon-picker", "asset-picker"];
+declare const BINDING_TYPES: readonly ["array", "object", "string", "number", "boolean", "color", "jsx", "richtext", "date", "url"];
 type BindingType = (typeof BINDING_TYPES)[number];
-interface BindingRenderLeaf {
-  type?: BindingType;
-  property?: string;
-  render?: BindingRenderMap;
-}
-interface BindingRenderMap {
-  [key: string]: BindingRenderLeaf | BindingRenderMap;
+interface BindingWidget {
+  type: string;
+  step?: number;
+  unit?: string;
+  [key: string]: unknown;
 }
-interface BindingItem {
-  label: string;
-  property: string;
+interface BindingFieldSpec {
   type?: BindingType;
-  widget?: string;
+  widget?: BindingWidget;
   options?: BindingOption[];
   render?: BindingRenderMap;
   min?: number;
@@ -54,6 +50,17 @@ interface BindingItem {
   required?: boolean;
   meta?: Record<string, unknown>;
 }
+interface BindingRenderLeaf extends BindingFieldSpec {
+  label?: string;
+  property?: string;
+}
+interface BindingRenderMap {
+  [key: string]: BindingRenderLeaf | BindingRenderMap;
+}
+interface BindingItem extends BindingFieldSpec {
+  label: string;
+  property: string;
+}
 type NodeValueType = 'boolean' | 'number' | 'string' | 'null' | 'array' | 'object' | 'unknown';
 type EditableNodeValueType = 'boolean' | 'number' | 'string' | 'null';
 interface ExtractedNodeValue {
@@ -69,6 +76,7 @@ declare const getStructuredValue: (node: DataAttrNode, property: string, type?:
 declare const findEditableChildren: (node: DataAttrNode) => DataAttrNode[];
 //#endregion
 //#region src/utils/ast/value.d.ts
+declare const canLosslesslyEvaluateSource: (source: string) => boolean;
 declare const parseValue: (value: unknown) => unknown;
 type EditablePathSegment = string | number;
 type EditablePrimitive = string | number | boolean;
@@ -134,6 +142,10 @@ type UpdateFailure = {
   reason: 'attribute-not-found';
   dataId: string;
   property: string;
+} | {
+  reason: 'unsupported-syntax';
+  dataId: string;
+  property: string;
 } | {
   reason: 'parse-error';
   error: unknown;
@@ -174,6 +186,9 @@ interface ChildrenEdit {
 }
 declare const getChildrenSignatures: (nodes: DataAttrNode[]) => string[];
 //#endregion
+//#region src/utils/ast/array-source.d.ts
+declare const canStructurallyEditArray: (source: string) => boolean;
+//#endregion
 //#region node_modules/.pnpm/@babel+parser@7.29.8/node_modules/@babel/parser/typings/babel-parser.d.ts
 declare class Position {
   line: number;
@@ -212,5 +227,5 @@ interface ValidationResult {
 }
 declare const validateBindingValue: (binding: BindingItem, value: unknown) => ValidationResult;
 //#endregion
-export { createNodeFromValue as A, parseBinding as B, updateArrayItemProperty as C, EditablePrimitive as D, EditablePathSegment as E, parseValue as F, BindingRenderMap as G, BindingItem as H, setEditableValue as I, EditableNodeValueType as J, BindingType as K, findEditableChildren as L, extractObjectProperties as M, flattenEditableValue as N, EditableValueEntry as O, parseArrayExpression as P, getCurrentValue as R, removeArrayItems as S, generateCode as T, BindingOption as U, parseBindingExpression as V, BindingRenderLeaf as W, NodeValueType as X, ExtractedNodeValue as Y, appendArrayItem as _, replaceIds as a, moveArrayItems as b, getChildrenSignatures as c, bulkUpdate as d, update as f, ItemKind as g, ArrayItem as h, fillIds as i, extractNodeValue as j, arrayExpressionToCode as k, UpdateFailure as l, extract as m, validateBindingValue as n, ChildrenAction as o, clearExtractCache as p, DataAttrNode as q, clone as r, ChildrenEdit as s, ValidationResult as t, UpdateResult as u, duplicateArrayItems as v, updateArrayItemValue as w, parseItems as x, moveArrayItem as y, getStructuredValue as z };
-//# sourceMappingURL=index-DxbG789f.d.ts.map
+export { ExtractedNodeValue as $, arrayExpressionToCode as A, getCurrentValue as B, removeArrayItems as C, EditablePathSegment as D, generateCode as E, flattenEditableValue as F, BindingItem as G, parseBinding as H, parseArrayExpression as I, BindingRenderMap as J, BindingOption as K, parseValue as L, createNodeFromValue as M, extractNodeValue as N, EditablePrimitive as O, extractObjectProperties as P, EditableNodeValueType as Q, setEditableValue as R, parseItems as S, updateArrayItemValue as T, parseBindingExpression as U, getStructuredValue as V, BindingFieldSpec as W, BindingWidget as X, BindingType as Y, DataAttrNode as Z, ItemKind as _, replaceIds as a, moveArrayItem as b, ChildrenEdit as c, UpdateResult as d, NodeValueType as et, bulkUpdate as f, ArrayItem as g, extract as h, fillIds as i, canLosslesslyEvaluateSource as j, EditableValueEntry as k, getChildrenSignatures as l, clearExtractCache as m, validateBindingValue as n, canStructurallyEditArray as o, update as p, BindingRenderLeaf as q, clone as r, ChildrenAction as s, ValidationResult as t, UpdateFailure as u, appendArrayItem as v, updateArrayItemProperty as w, moveArrayItems as x, duplicateArrayItems as y, findEditableChildren as z };
+//# sourceMappingURL=index-B_p74BRM.d.ts.map

package/dist/{index-CCynrS6c.d.ts → index-DNNj_0ba.d.ts}

@@ -2,7 +2,7 @@ import React$1 from "react";
 //#region src/components/error/boundary.d.ts
 interface Props$3 {
   children: React$1.ReactNode;
-  fallback?: (message?: string) => React$1.ReactNode;
+  fallback?: (message?: string, reset?: () => void) => React$1.ReactNode;
   onError?: (e: Error, info: React$1.ErrorInfo) => void;
   resetKeys?: readonly unknown[];
 }
@@ -15,6 +15,7 @@ declare class ErrorBoundary extends React$1.Component<Props$3, State> {
   static getDerivedStateFromError(error: Error): State;
   componentDidCatch(error: Error, errorInfo: React$1.ErrorInfo): void;
   componentDidUpdate(prevProps: Props$3): void;
+  reset: () => void;
   render(): string | number | bigint | boolean | Iterable<React$1.ReactNode> | Promise<string | number | bigint | boolean | React$1.ReactPortal | React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>> | Iterable<React$1.ReactNode> | null | undefined> | React$1.JSX.Element | null | undefined;
 }
 //#endregion
@@ -49,4 +50,4 @@ type ErrorComponent = typeof Error$2 & {
 declare const Error$1: ErrorComponent;
 //#endregion
 export { Props$1 as a, Guard as i, Props as n, Props$2 as o, Runtime as r, ErrorBoundary as s, Error$1 as t };
-//# sourceMappingURL=index-CCynrS6c.d.ts.map
+//# sourceMappingURL=index-DNNj_0ba.d.ts.map

package/dist/{index-lgHdCda5.d.ts → index-DQkL37eL.d.ts}

@@ -1,5 +1,7 @@
 import { t as FrameProps } from "./index-DpDU1IAw.js";
 import React from "react";
+import * as ui from "@jbpark/ui-kit";
+import * as utils from "@jbpark/ui-kit/utils";
 //#region src/components/preview/preview.d.ts
 interface Props extends React.ComponentPropsWithRef<'div'> {
   code?: string;
@@ -13,5 +15,11 @@ interface Props extends React.ComponentPropsWithRef<'div'> {
 }
 declare const Preview: ({ code, props, modules, dynamicTailwind, provider, ...restProps }: Props) => React.JSX.Element;
 //#endregion
-export { Props as n, Preview as t };
-//# sourceMappingURL=index-lgHdCda5.d.ts.map
+//#region src/components/preview/base-modules.d.ts
+declare const baseModules: {
+  'ui-kit': typeof ui;
+  'ui-kit/utils': typeof utils;
+};
+//#endregion
+export { Preview as n, Props as r, baseModules as t };
+//# sourceMappingURL=index-DQkL37eL.d.ts.map

package/dist/{index-DswWDEXZ.d.ts → index-Doh4VTXr.d.ts}

@@ -1,13 +1,37 @@
 import { v as Section } from "./document-J9Lo9p81.js";
-import { G as BindingRenderMap, K as BindingType, U as BindingOption, q as DataAttrNode } from "./index-DxbG789f.js";
 import { t as FrameProps } from "./index-DpDU1IAw.js";
+import { J as BindingRenderMap, K as BindingOption, X as BindingWidget, Y as BindingType, Z as DataAttrNode, u as UpdateFailure } from "./index-B_p74BRM.js";
 import { useMultiSelect } from "@jbpark/use-hooks";
-import { LucideIcon } from "lucide-react";
-//#region src/components/dnd/dnd.d.ts
-interface DndPalette {
-  items: Section[];
-  onAdd: (item: Section) => void;
+//#region src/components/dnd/panel/field.d.ts
+interface FieldProps {
+  binding: PanelBinding;
+  onNodeChange?: PanelNodeChange;
 }
+declare const Field: (props: FieldProps) => import("react").JSX.Element;
+//#endregion
+//#region src/components/dnd/edit-options.d.ts
+type DndEditError = {
+  type: 'update';
+  id: string;
+  label: string;
+  property: string;
+  failure: UpdateFailure | undefined;
+  title: string;
+  description?: string;
+} | {
+  type: 'parse';
+  target: 'section' | 'items';
+  error?: unknown;
+  title: string;
+  description?: string;
+} | {
+  type: 'items';
+  title: string;
+  description?: string;
+};
+type DndRenderField = (props: FieldProps, builtin: React.ReactElement) => React.ReactNode | undefined;
+//#endregion
+//#region src/components/dnd/panel-binding.d.ts
 interface PanelNodeChange {
   (params: {
     id: string;
@@ -16,23 +40,12 @@ interface PanelNodeChange {
     value: unknown;
   }): void;
 }
-interface DndPanel {
-  item?: Section;
-  onChange: (next: Partial<Section>) => void;
-  onDelete: (id: string) => void;
-  onMoveUp: () => void;
-  onMoveDown: () => void;
-  canMoveUp: boolean;
-  canMoveDown: boolean;
-  bindings: PanelBinding[];
-  onNodeChange: PanelNodeChange;
-}
 interface PanelBinding {
   id: string;
   label: string;
   property: string;
   type?: BindingType;
-  widget?: string;
+  widget?: BindingWidget;
   options?: BindingOption[];
   render?: BindingRenderMap;
   min?: number;
@@ -42,8 +55,34 @@ interface PanelBinding {
   meta?: Record<string, unknown>;
   value: unknown;
   rawValue: string;
+  canEditValue?: boolean;
   onChange: (value: unknown) => void;
 }
+//#endregion
+//#region src/components/dnd/section-fallback-context.d.ts
+interface DndSectionFallbackArgs {
+  section: Section;
+  reason: 'compile' | 'runtime' | 'forced';
+  message?: string;
+}
+type DndRenderSectionFallback = (args: DndSectionFallbackArgs) => React.ReactNode | undefined;
+//#endregion
+//#region src/components/dnd/dnd.d.ts
+interface DndPalette {
+  items: Section[];
+  onAdd: (item: Section) => void;
+}
+interface DndPanel {
+  item?: Section;
+  onChange: (next: Partial<Section>) => void;
+  onDelete: (id: string) => void;
+  onMoveUp: () => void;
+  onMoveDown: () => void;
+  canMoveUp: boolean;
+  canMoveDown: boolean;
+  bindings: PanelBinding[];
+  onNodeChange: PanelNodeChange;
+}
 interface Props extends Omit<React.ComponentPropsWithRef<'div'>, 'onChange'> {
   value?: string;
   props?: Record<string, unknown>;
@@ -53,9 +92,13 @@ interface Props extends Omit<React.ComponentPropsWithRef<'div'>, 'onChange'> {
   dynamicTailwind?: boolean;
   provider?: (children: React.ReactNode) => React.ReactNode;
   onChange?: (value: string) => void;
+  renderField?: DndRenderField;
+  onEditError?: (error: DndEditError) => void;
+  renderSectionFallback?: DndRenderSectionFallback;
+  shouldForceSectionFallback?: (section: Section) => boolean;
   children?: React.ReactNode;
 }
-declare const Dnd$1: ({ value: _value, props, modules, onChange: _onChange, className, items, frame, dynamicTailwind, provider, children, ...restProps }: Props) => import("react").JSX.Element;
+declare const Dnd$1: ({ value: _value, props, modules, onChange: _onChange, className, items, frame, dynamicTailwind, provider, renderField, onEditError, renderSectionFallback, shouldForceSectionFallback, children, ...restProps }: Props) => import("react").JSX.Element;
 //#endregion
 //#region src/components/dnd/draggable.d.ts
 interface DraggableItemDragState {
@@ -92,20 +135,6 @@ declare const useDndPalette: () => DndPalette;
 declare const useDndPanel: () => DndPanel;
 declare const useDndLayout: () => DndLayout;
 //#endregion
-//#region src/components/dnd/panel/field.d.ts
-interface FieldProps {
-  binding: PanelBinding;
-  onNodeChange?: PanelNodeChange;
-}
-declare const Field: ({ binding, onNodeChange }: FieldProps) => import("react").JSX.Element;
-//#endregion
-//#region src/components/dnd/panel/icon-map.d.ts
-declare const ICON_MAP: Record<string, LucideIcon>;
-declare const ICON_OPTIONS: {
-  label: import("react").JSX.Element;
-  value: string;
-}[];
-//#endregion
 //#region src/components/dnd/panel/use-items-editor.d.ts
 interface ItemsEditorNestedElement {
   id: string;
@@ -138,6 +167,7 @@ interface ItemsEditor {
   items: ItemsEditorItem[];
   selection: ReturnType<typeof useMultiSelect>;
   actions: ItemsEditorActions;
+  canEditStructure: boolean;
   parseError: boolean;
 }
 interface ItemsEditorOptions {
@@ -182,5 +212,5 @@ type DndComponent = typeof Dnd$1 & {
 };
 declare const Dnd: DndComponent;
 //#endregion
-export { DndPanel as A, Layout as C, DraggableItemDragState as D, DraggableItem as E, PanelNodeChange as M, Props as N, DraggableItemProps as O, DndRegionProps as S, Panel as T, useDndLayout as _, ItemsEditor as a, Canvas as b, ItemsEditorNestedElement as c, useItemsEditor as d, ICON_MAP as f, DndLayout as g, FieldProps as h, useChildrenEditor as i, PanelBinding as j, DndPalette as k, ItemsEditorNestedGroup as l, Field as m, ChildrenEditor as n, ItemsEditorActions as o, ICON_OPTIONS as p, ChildrenEditorOptions as r, ItemsEditorItem as s, Dnd as t, ItemsEditorOptions as u, useDndPalette as v, Palette as w, DndLayoutProps as x, useDndPanel as y };
-//# sourceMappingURL=index-DswWDEXZ.d.ts.map
+export { PanelBinding as A, DraggableItemDragState as C, Props as D, DndPanel as E, FieldProps as F, DndEditError as M, DndRenderField as N, DndRenderSectionFallback as O, Field as P, DraggableItem as S, DndPalette as T, DndLayoutProps as _, ItemsEditor as a, Palette as b, ItemsEditorNestedElement as c, useItemsEditor as d, DndLayout as f, Canvas as g, useDndPanel as h, useChildrenEditor as i, PanelNodeChange as j, DndSectionFallbackArgs as k, ItemsEditorNestedGroup as l, useDndPalette as m, ChildrenEditor as n, ItemsEditorActions as o, useDndLayout as p, ChildrenEditorOptions as r, ItemsEditorItem as s, Dnd as t, ItemsEditorOptions as u, DndRegionProps as v, DraggableItemProps as w, Panel as x, Layout as y };
+//# sourceMappingURL=index-Doh4VTXr.d.ts.map

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 import { v as Section } from "./document-J9Lo9p81.js";
 import { t as FrameProps } from "./index-DpDU1IAw.js";
-import { A as DndPanel, C as Layout, M as PanelNodeChange, N as Props, O as DraggableItemProps, T as Panel, a as ItemsEditor, b as Canvas, g as DndLayout, h as FieldProps, j as PanelBinding, k as DndPalette, s as ItemsEditorItem, t as Dnd, u as ItemsEditorOptions, w as Palette } from "./index-DswWDEXZ.js";
+import { A as PanelBinding, D as Props, E as DndPanel, F as FieldProps, M as DndEditError, N as DndRenderField, O as DndRenderSectionFallback, T as DndPalette, a as ItemsEditor, b as Palette, f as DndLayout, g as Canvas, j as PanelNodeChange, k as DndSectionFallbackArgs, s as ItemsEditorItem, t as Dnd, u as ItemsEditorOptions, w as DraggableItemProps, x as Panel, y as Layout } from "./index-Doh4VTXr.js";
 import { a as Props$2, n as EditorRenderData, r as Props$1, t as Editor } from "./index-BQdZ6LrR.js";
-import { a as Props$5, n as Props$4, o as Props$3, s as ErrorBoundary, t as Error } from "./index-CCynrS6c.js";
-import { n as Props$6, t as Preview } from "./index-lgHdCda5.js";
+import { a as Props$5, n as Props$4, o as Props$3, s as ErrorBoundary, t as Error } from "./index-DNNj_0ba.js";
+import { n as Preview, r as Props$6 } from "./index-DQkL37eL.js";
 //#region src/index.d.ts
 declare const App: {
   ({ children }: {
@@ -19,9 +19,9 @@ declare const App: {
   Editor: (({ defaultValue, value: _value, debounce, onChange: _onChange, renderEditor, fragment, prettierOptions, ...props }: Props$1) => string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined) & {
     Core: ({ value, theme, height, className, prettierOptions, fragment, raw, onChange, onSave, onError, ...props }: Props$2) => import("react").JSX.Element;
   };
-  Dnd: (({ value: _value, props, modules, onChange: _onChange, className, items, frame, dynamicTailwind, provider, children, ...restProps }: Props) => import("react").JSX.Element) & {
+  Dnd: (({ value: _value, props, modules, onChange: _onChange, className, items, frame, dynamicTailwind, provider, renderField, onEditError, renderSectionFallback, shouldForceSectionFallback, children, ...restProps }: Props) => import("react").JSX.Element) & {
     DraggableItem: ({ item, children }: DraggableItemProps) => import("react").ReactNode;
-    Field: ({ binding, onNodeChange }: FieldProps) => import("react").JSX.Element;
+    Field: (props: FieldProps) => import("react").JSX.Element;
     Palette: typeof Palette;
     Canvas: typeof Canvas;
     Panel: typeof Panel;
@@ -30,5 +30,5 @@ declare const App: {
 };
 declare const LiveRenderer: ({ code, props, modules, dynamicTailwind, provider, ...restProps }: Props$6) => import("react").JSX.Element;
 //#endregion
-export { type DndLayout, type DndPalette, type DndPanel, 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 Section };
+export { type DndEditError, type DndLayout, 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 Section };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1,8 +1,8 @@
-import { t as ContextProvider } from "./context-649REFsj.js";
-import { t as Dnd } from "./dnd-D90jLjLH.js";
-import { t as Editor } from "./editor-LzqHe_-F.js";
-import { t as Error } from "./error-CO0EbMlA.js";
-import { t as Preview } from "./preview-CWT0lgwq.js";
+import { t as ContextProvider } from "./context-Y-M9fViD.js";
+import { t as Dnd } from "./dnd-ClnGRNaY.js";
+import { t as Editor } from "./editor-COKGtmfE.js";
+import { t as Error } from "./error-o0SBwtTv.js";
+import { t as Preview } from "./preview-DKyKKcu7.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 DndLayout,\n  type DndPalette,\n  type DndPanel,\n  type FieldProps,\n  type ItemsEditor,\n  type ItemsEditorItem,\n  type ItemsEditorOptions,\n  type PanelBinding,\n  type PanelNodeChange,\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  DndPalette,\n  DndPanel,\n  DndLayout,\n  PanelBinding,\n  PanelNodeChange,\n  FieldProps,\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":";;;;;;;AAoBA,MAAM,OAAO,EAAE,eAA+C;CAC5D,OAAO,oBAACA,iBAAD,EAAU,SAAkB,CAAA;AACrC;AAEA,MAAM,eAAeC;AA2BrB,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 DndLayout,\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} 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  PanelBinding,\n  PanelNodeChange,\n  FieldProps,\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":";;;;;;;AAwBA,MAAM,OAAO,EAAE,eAA+C;CAC5D,OAAO,oBAACA,iBAAD,EAAU,SAAkB,CAAA;AACrC;AAEA,MAAM,eAAeC;AA+BrB,IAAI,UAAUA;AACd,IAAI,WAAW;AACf,IAAI,QAAQC;AACZ,IAAI,SAASC;AACb,IAAI,MAAMC"}

package/dist/preview/index.d.ts

@@ -1,2 +1,2 @@
-import { n as Props, t as Preview } from "../index-lgHdCda5.js";
-export { type Props, Preview as default };
+import { n as Preview, r as Props, t as baseModules } from "../index-DQkL37eL.js";
+export { type Props, baseModules, Preview as default };

package/dist/preview/index.js

@@ -1,2 +1,3 @@
-import { t as Preview } from "../preview-CWT0lgwq.js";
-export { Preview as default };
+import { r as baseModules } from "../use-dynamic-tailwind-BF8TQ3Yy.js";
+import { t as Preview } from "../preview-DKyKKcu7.js";
+export { baseModules, Preview as default };

package/dist/{preview-CWT0lgwq.js → preview-DKyKKcu7.js}

@@ -1,7 +1,7 @@
-import { r as cn } from "./utils-WyxPYZGh.js";
+import { i as cn } from "./utils-BQ7WL7Jh.js";
 import { i as usePreview, r as useError } from "./states-Ci1AvoQ9.js";
-import { n as useCompiledModule, r as Frame, t as useDynamicTailwind } from "./use-dynamic-tailwind-DAhKGsY4.js";
-import { t as Error } from "./error-CO0EbMlA.js";
+import { i as Frame, n as useCompiledModule, t as useDynamicTailwind } from "./use-dynamic-tailwind-BF8TQ3Yy.js";
+import { t as Error } from "./error-o0SBwtTv.js";
 import { useMemo } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/preview/client.tsx
@@ -79,4 +79,4 @@ const Preview = ({ code, props = {}, modules = {}, dynamicTailwind = false, prov
 //#endregion
 export { Preview as t };
 
-//# sourceMappingURL=preview-CWT0lgwq.js.map
+//# sourceMappingURL=preview-DKyKKcu7.js.map

package/dist/{preview-CWT0lgwq.js.map → preview-DKyKKcu7.js.map}

@@ -1 +1 @@
-{"version":3,"file":"preview-CWT0lgwq.js","names":["LiveError"],"sources":["../src/components/preview/client.tsx","../src/components/preview/preview.tsx"],"sourcesContent":["'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';\n\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 = {},\n  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';\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 = {},\n  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":";;;;;;;AAaA,MAAM,UAAU,EACd,MAAM,OACN,WACA,WACA,QAAQ,CAAC,GACT,UAAU,CAAC,GACX,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,CAAC,GACT,UAAU,CAAC,GACX,kBAAkB,OAClB,UACA,GAAG,gBACQ;CACX,OACE,oBAAC,QAAD;EACQ;EACC;EACE;EACQ;EACP;EACV,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"preview-DKyKKcu7.js","names":["LiveError"],"sources":["../src/components/preview/client.tsx","../src/components/preview/preview.tsx"],"sourcesContent":["'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';\n\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 = {},\n  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';\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 = {},\n  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":";;;;;;;AAaA,MAAM,UAAU,EACd,MAAM,OACN,WACA,WACA,QAAQ,CAAC,GACT,UAAU,CAAC,GACX,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,CAAC,GACT,UAAU,CAAC,GACX,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-649REFsj.js";
+import { t as ContextProvider } from "../context-Y-M9fViD.js";
 export { ContextProvider as default };

package/dist/{use-dynamic-tailwind-DAhKGsY4.js → use-dynamic-tailwind-BF8TQ3Yy.js}

@@ -1,15 +1,18 @@
-import { i as compile, l as getCachedScriptBlob, t as baseModules } from "./utils-WyxPYZGh.js";
+import { a as compile, u as getCachedScriptBlob } from "./utils-BQ7WL7Jh.js";
 import { t as generateTailwindCSSFromDOM } from "./tailwind-CbjdLyVX.js";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-import { useMutationObserver, useResizeObserver } from "@jbpark/use-hooks";
+import * as ui from "@jbpark/ui-kit";
+import { useEventListener, useMutationObserver, useResizeObserver } from "@jbpark/use-hooks";
 import { createPortal } from "react-dom";
+import * as utils from "@jbpark/ui-kit/utils";
 //#region src/components/frame/measure.ts
 const computeProbeHeight = (scrollContainerClientHeight, wrapperInsets) => {
 	const usable = scrollContainerClientHeight - wrapperInsets;
 	return usable > 0 ? usable : null;
 };
-const isVisuallyHidden = (computed) => computed.visibility === "hidden" || computed.opacity === "0";
+const isVisuallyHidden = (computed, isAnimating = false) => computed.visibility === "hidden" || computed.opacity === "0" && !isAnimating;
+const isAnimationActive = (playState) => playState === "running" || playState === "paused";
 const parseTranslateY = (transform) => {
 	if (!transform || transform === "none") return 0;
 	const translateYMatch = transform.match(/translateY\(\s*([+-]?\d*\.?\d+)/);
@@ -110,12 +113,39 @@ const rewriteInlineViewportUnits = (root) => {
 //#endregion
 //#region src/components/frame/iframe.tsx
 const EMPTY_STRING_ARRAY = [];
+const isCssAnimation = (win, animation) => typeof win.CSSAnimation === "function" && animation instanceof win.CSSAnimation;
+const isCssTransition = (win, animation) => typeof win.CSSTransition === "function" && animation instanceof win.CSSTransition;
+const hasActiveAnimation = (el) => typeof el.getAnimations === "function" && el.getAnimations().some((animation) => isAnimationActive(animation.playState));
+const neverFinishes = (animation) => {
+	const timing = animation.effect?.getComputedTiming();
+	return timing?.iterations === Infinity || timing?.duration === Infinity;
+};
+const MEASUREMENT_OVERRIDE_STYLE_ID = "autoheight-measurement-overrides";
+const SCROLLBAR_OVERRIDE_RULES = ["html, body { scrollbar-width: none !important; }", "html::-webkit-scrollbar, body::-webkit-scrollbar { display: none !important; }"];
+const FREEZE_TRANSITIONS_RULE = "*, *::before, *::after { transition: none !important; }";
+const withMeasurementOverrides = (doc, freezeTransitions, measure) => {
+	let styleEl = doc.getElementById(MEASUREMENT_OVERRIDE_STYLE_ID);
+	if (!styleEl) {
+		styleEl = doc.createElement("style");
+		styleEl.id = MEASUREMENT_OVERRIDE_STYLE_ID;
+		styleEl.media = "not all";
+		doc.head?.appendChild(styleEl);
+	}
+	const text = (freezeTransitions ? [FREEZE_TRANSITIONS_RULE, ...SCROLLBAR_OVERRIDE_RULES] : SCROLLBAR_OVERRIDE_RULES).join("\n");
+	if (styleEl.textContent !== text) styleEl.textContent = text;
+	styleEl.media = "all";
+	measure();
+	styleEl.media = "not all";
+};
 const IFrame = ({ title = "Live Preview", sandbox, style = {}, scripts = EMPTY_STRING_ARRAY, styles = EMPTY_STRING_ARRAY, stylesheets = EMPTY_STRING_ARRAY, autoHeight = false, syncStyle = false, children, onLoaded, ...props }) => {
 	const iframeRef = useRef(null);
 	const [mountNode, setMountNode] = useState(null);
 	const loadedScriptsRef = useRef(/* @__PURE__ */ new Set());
 	const prevStyleCountRef = useRef(0);
 	const prevStylesheetCountRef = useRef(0);
+	const trackedAnimationsRef = useRef(/* @__PURE__ */ new WeakSet());
+	const updateHeightRef = useRef(null);
+	const lastProbeHeightRef = useRef(void 0);
 	const shouldAutoHeight = autoHeight && style.height == null;
 	const styleManagerRef = useRef(createStyleSyncManager());
 	const applyStyle = useCallback(() => {
@@ -218,26 +248,17 @@ const IFrame = ({ title = "Live Preview", sandbox, style = {}, scripts = EMPTY_S
 			styleEl.id = CONTAINER_STYLE_ID;
 			doc.head?.appendChild(styleEl);
 		}
-		styleEl.textContent = `html { container-type: size !important; height: ${probeHeight}px !important; }`;
-	};
-	const MEASUREMENT_OVERRIDE_STYLE_ID = "autoheight-measurement-overrides";
-	const withMeasurementOverrides = (doc, measure) => {
-		let styleEl = doc.getElementById(MEASUREMENT_OVERRIDE_STYLE_ID);
-		if (!styleEl) {
-			styleEl = doc.createElement("style");
-			styleEl.id = MEASUREMENT_OVERRIDE_STYLE_ID;
-			styleEl.media = "not all";
-			styleEl.textContent = [
-				"*, *::before, *::after { transition: none !important; }",
-				"html, body { scrollbar-width: none !important; }",
-				"html::-webkit-scrollbar, body::-webkit-scrollbar { display: none !important; }"
-			].join("\n");
-			doc.head?.appendChild(styleEl);
-		}
-		styleEl.media = "all";
-		measure();
-		styleEl.media = "not all";
+		const text = `html { container-type: size !important; height: ${probeHeight}px !important; }`;
+		if (styleEl.textContent !== text) styleEl.textContent = text;
 	};
+	const trackScriptAnimations = useCallback((doc, win) => {
+		if (typeof doc.getAnimations !== "function") return;
+		doc.getAnimations().forEach((animation) => {
+			if (trackedAnimationsRef.current.has(animation) || !isAnimationActive(animation.playState) || isCssAnimation(win, animation) || isCssTransition(win, animation) || neverFinishes(animation)) return;
+			trackedAnimationsRef.current.add(animation);
+			animation.finished.catch(() => void 0).then(() => updateHeightRef.current?.());
+		});
+	}, []);
 	const updateHeight = useCallback(() => {
 		if (!shouldAutoHeight || !mountNode || !iframeRef.current) return;
 		const iframe = iframeRef.current;
@@ -260,13 +281,16 @@ const IFrame = ({ title = "Live Preview", sandbox, style = {}, scripts = EMPTY_S
 			probeHeight = computed;
 		}
 		let contentHeight = 0;
-		withMeasurementOverrides(doc, () => {
+		const freezeTransitions = probeHeight !== lastProbeHeightRef.current;
+		lastProbeHeightRef.current = probeHeight;
+		withMeasurementOverrides(doc, freezeTransitions, () => {
 			ensureContainerStyle(doc, probeHeight);
 			rewriteInlineViewportUnits(mountNode);
 			contentHeight = mountNode.scrollHeight;
 			mountNode.querySelectorAll("*").forEach((el) => {
 				const style = win.getComputedStyle(el);
-				if (isVisuallyHidden(style)) return;
+				const isAnimating = style.opacity === "0" && hasActiveAnimation(el);
+				if (isVisuallyHidden(style, isAnimating)) return;
 				if ((style.position === "fixed" || style.position === "absolute") && el.offsetHeight > 0) {
 					const estimatedHeight = estimatePositionedElementHeight(el.offsetHeight, style.transform, probeHeight);
 					contentHeight = Math.max(contentHeight, estimatedHeight);
@@ -274,7 +298,15 @@ const IFrame = ({ title = "Live Preview", sandbox, style = {}, scripts = EMPTY_S
 			});
 		});
 		if (contentHeight > 0) iframe.style.height = `${Math.ceil(contentHeight)}px`;
-	}, [shouldAutoHeight, mountNode]);
+		trackScriptAnimations(doc, win);
+	}, [
+		shouldAutoHeight,
+		mountNode,
+		trackScriptAnimations
+	]);
+	useEffect(() => {
+		updateHeightRef.current = updateHeight;
+	}, [updateHeight]);
 	useEffect(() => {
 		if (shouldAutoHeight) return;
 		iframeRef.current?.contentDocument?.getElementById(CONTAINER_STYLE_ID)?.remove();
@@ -316,6 +348,24 @@ const IFrame = ({ title = "Live Preview", sandbox, style = {}, scripts = EMPTY_S
 		attributes: true,
 		characterData: true
 	});
+	const mountNodeRef = useMemo(() => ({ current: mountNode }), [mountNode]);
+	const settleListenerEnabled = shouldAutoHeight && mountNode !== null;
+	useEventListener("animationend", updateHeight, {
+		target: mountNodeRef,
+		enabled: settleListenerEnabled
+	});
+	useEventListener("animationcancel", updateHeight, {
+		target: mountNodeRef,
+		enabled: settleListenerEnabled
+	});
+	useEventListener("transitionend", updateHeight, {
+		target: mountNodeRef,
+		enabled: settleListenerEnabled
+	});
+	useEventListener("transitioncancel", updateHeight, {
+		target: mountNodeRef,
+		enabled: settleListenerEnabled
+	});
 	const content = mountNode ? createPortal(children(mountNode), mountNode) : null;
 	return /* @__PURE__ */ jsx("iframe", {
 		ref: iframeRef,
@@ -400,6 +450,12 @@ const Frame = ({ mode, children, ...restProps }) => {
 	});
 };
 //#endregion
+//#region src/components/preview/base-modules.ts
+const baseModules = {
+	"ui-kit": ui,
+	"ui-kit/utils": utils
+};
+//#endregion
 //#region src/components/preview/use-compiled-module.ts
 const useCompiledModule = (code, modules) => {
 	const mergedModules = useMemo(() => ({
@@ -446,6 +502,6 @@ const useDynamicTailwind = (code, enabled) => {
 	};
 };
 //#endregion
-export { useCompiledModule as n, Frame as r, useDynamicTailwind as t };
+export { Frame as i, useCompiledModule as n, baseModules as r, useDynamicTailwind as t };
 
-//# sourceMappingURL=use-dynamic-tailwind-DAhKGsY4.js.map
+//# sourceMappingURL=use-dynamic-tailwind-BF8TQ3Yy.js.map