@jbpark/live-editor 3.0.2 → 3.2.0

package/dist/editor/index.d.ts

@@ -1,2 +1,2 @@
-import { a as Props, i as Core, n as EditorRenderData, r as Props$1, t as Editor } from "../index-Ck3akHag.js";
+import { a as Props, i as Core, n as EditorRenderData, r as Props$1, t as Editor } from "../index-Ba8jGXSM.js";
 export { Core, type Props as CoreProps, type EditorRenderData, type Props$1 as Props, Editor as default };

package/dist/editor/index.js

@@ -1,3 +1,3 @@
-import { t as Core } from "../core-CTsQ9LiQ.js";
-import { t as Editor } from "../editor-C0lphNg6.js";
+import { t as Core } from "../core-D3q5rpuz.js";
+import { t as Editor } from "../editor-LzqHe_-F.js";
 export { Core, Editor as default };

package/dist/{editor-C0lphNg6.js → editor-LzqHe_-F.js}

@@ -1,6 +1,6 @@
 import { y as DEFAULT_TEMPLATE } from "./document-C6bNHl7l.js";
 import { i as usePreview, r as useError } from "./states-Ci1AvoQ9.js";
-import { n as useFormatCode, t as Core } from "./core-CTsQ9LiQ.js";
+import { n as useFormatCode, t as Core } from "./core-D3q5rpuz.js";
 import { useCallback, useEffect } from "react";
 import { jsx } from "react/jsx-runtime";
 import { useDebouncedValue } from "@jbpark/use-hooks";
@@ -8,7 +8,7 @@ import { useDebouncedValue } from "@jbpark/use-hooks";
 const Editor$1 = ({ defaultValue, value: _value, debounce = 1e3, onChange: _onChange, renderEditor, fragment, prettierOptions, ...props }) => {
 	const { setCode } = usePreview();
 	const { setError } = useError();
-	const value = _value.trim() === "" ? defaultValue || DEFAULT_TEMPLATE : _value;
+	const value = _value === void 0 ? defaultValue ?? DEFAULT_TEMPLATE : _value;
 	const onChange = useCallback((value) => {
 		_onChange?.(value);
 	}, [_onChange]);
@@ -48,4 +48,4 @@ Editor.Core = Core;
 //#endregion
 export { Editor as t };
 
-//# sourceMappingURL=editor-C0lphNg6.js.map
+//# sourceMappingURL=editor-LzqHe_-F.js.map

package/dist/editor-LzqHe_-F.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor-LzqHe_-F.js","names":["Editor","EditorImpl"],"sources":["../src/components/editor/editor.tsx","../src/components/editor/index.ts"],"sourcesContent":["import { useCallback, useEffect } from 'react';\n\nimport { useDebouncedValue } from '@jbpark/use-hooks';\n\nimport { useError, usePreview } from '~/components/context/states';\nimport { DEFAULT_TEMPLATE } from '~/constants';\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 { setCode } = usePreview();\n  const { setError } = useError();\n\n  const value =\n    _value === undefined ? (defaultValue ?? DEFAULT_TEMPLATE) : _value;\n\n  const onChange = useCallback(\n    (value: string) => {\n      _onChange?.(value);\n    },\n    [_onChange],\n  );\n\n  const onSave = useCallback(\n    (formattedCode: string) => {\n      setCode(formattedCode);\n    },\n    [setCode],\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  const debouncedValue = useDebouncedValue(value, debounce);\n\n  useEffect(() => {\n    setCode(debouncedValue);\n  }, [debouncedValue, setCode]);\n\n  if (renderEditor) {\n    return renderEditor({ value, onChange, formatCode });\n  }\n\n  return (\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};\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":";;;;;;;AA6BA,MAAMA,YAAU,EACd,cACA,OAAO,QACP,WAAW,KACX,UAAU,WACV,cACA,UACA,iBACA,GAAG,YACQ;CACX,MAAM,EAAE,YAAY,WAAW;CAC/B,MAAM,EAAE,aAAa,SAAS;CAE9B,MAAM,QACJ,WAAW,KAAA,IAAa,gBAAgB,mBAAoB;CAE9D,MAAM,WAAW,aACd,UAAkB;EACjB,YAAY,KAAK;CACnB,GACA,CAAC,SAAS,CACZ;CAEA,MAAM,SAAS,aACZ,kBAA0B;EACzB,QAAQ,aAAa;CACvB,GACA,CAAC,OAAO,CACV;CAEA,MAAM,UAAU,aACb,UAAyB;EACxB,SAAS,KAAK;CAChB,GACA,CAAC,QAAQ,CACX;CAEA,MAAM,aAAa,cAAc;EAAE;EAAU;CAAgB,CAAC;CAE9D,MAAM,iBAAiB,kBAAkB,OAAO,QAAQ;CAExD,gBAAgB;EACd,QAAQ,cAAc;CACxB,GAAG,CAAC,gBAAgB,OAAO,CAAC;CAE5B,IAAI,cACF,OAAO,aAAa;EAAE;EAAO;EAAU;CAAW,CAAC;CAGrD,OACE,oBAAC,MAAD;EACS;EACG;EACF;EACC;EACC;EACO;EACjB,GAAI;CACL,CAAA;AAEL;;;ACpFA,MAAM,SAASC;AAEf,OAAO,OAAO"}

package/dist/error/index.js

@@ -1,3 +1,3 @@
-import { t as ErrorBoundary } from "../boundary-BF7iZp6e.js";
-import { n as Runtime, r as Guard, t as Error } from "../error-lsJey-it.js";
+import { t as ErrorBoundary } from "../boundary-BTP1nfG6.js";
+import { n as Runtime, r as Guard, t as Error } from "../error-CO0EbMlA.js";
 export { ErrorBoundary, Guard as ErrorGuard, Runtime as ErrorRuntime, Error as default };

package/dist/{error-lsJey-it.js → error-CO0EbMlA.js}

@@ -1,5 +1,5 @@
 import { r as useError } from "./states-Ci1AvoQ9.js";
-import { n as Error$1, t as ErrorBoundary } from "./boundary-BF7iZp6e.js";
+import { n as Error$1, t as ErrorBoundary } from "./boundary-BTP1nfG6.js";
 import { useEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { useEventListener } from "@jbpark/use-hooks";
@@ -79,4 +79,4 @@ Error.Guard = Guard;
 //#endregion
 export { Runtime as n, Guard as r, Error as t };
 
-//# sourceMappingURL=error-lsJey-it.js.map
+//# sourceMappingURL=error-CO0EbMlA.js.map

package/dist/{error-lsJey-it.js.map → error-CO0EbMlA.js.map}

@@ -1 +1 @@
-{"version":3,"file":"error-lsJey-it.js","names":["ErrorComponent","Error","ErrorImpl","ErrorRuntime","ErrorGuard"],"sources":["../src/components/error/guard.tsx","../src/components/error/runtime.tsx","../src/components/error/index.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport { useEventListener } from '@jbpark/use-hooks';\n\nimport ErrorComponent from './error';\n\nexport interface Props {\n  children: React.ReactNode;\n  onError?: (error: Error) => void;\n}\n\nconst Guard = ({ children, onError }: Props) => {\n  const [error, setError] = useState<string | null>(null);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const errorHandled = useRef(false);\n\n  useEventListener(\n    'error',\n    event => {\n      if (errorHandled.current) {\n        return;\n      }\n\n      errorHandled.current = true;\n\n      const errorMessage =\n        event.error?.message || event.message || 'Unknown error';\n\n      console.error('⚡ [Guard] Event handler error:', errorMessage);\n\n      event.preventDefault();\n\n      setError(errorMessage);\n      onError?.(event.error || new window.Error(errorMessage));\n\n      setTimeout(() => {\n        errorHandled.current = false;\n      }, 100);\n    },\n    { capture: true },\n  );\n\n  useEffect(() => {\n    const container = containerRef.current;\n\n    if (!container) {\n      return;\n    }\n\n    const handleUnhandledRejection = (event: PromiseRejectionEvent) => {\n      if (errorHandled.current) {\n        return;\n      }\n\n      errorHandled.current = true;\n\n      const errorMessage = event.reason?.message || 'Promise rejection';\n\n      event.preventDefault();\n      setError(errorMessage);\n      onError?.(event.reason || new window.Error(errorMessage));\n\n      setTimeout(() => {\n        errorHandled.current = false;\n      }, 100);\n    };\n\n    window.addEventListener(\n      'unhandledrejection',\n      handleUnhandledRejection,\n      true,\n    );\n\n    return () => {\n      window.removeEventListener(\n        'unhandledrejection',\n        handleUnhandledRejection,\n        true,\n      );\n    };\n  }, [onError]);\n\n  if (error) {\n    return (\n      <ErrorComponent\n        title=\"Runtime Error\"\n        message={error}\n        className=\"m-4\"\n        onReset={() => {\n          setError(null);\n          errorHandled.current = false;\n        }}\n      />\n    );\n  }\n\n  return <div ref={containerRef}>{children}</div>;\n};\n\nexport default Guard;\n","import { useEffect } from 'react';\n\nimport { useEventListener } from '@jbpark/use-hooks';\n\nimport { useError } from '~/components/context/states';\n\nimport Error from './error';\n\nexport interface Props extends React.ComponentPropsWithRef<'div'> {\n  open?: boolean;\n  reset?: () => void;\n}\n\nconst Runtime = ({ open = true, reset }: Props) => {\n  const { error: message, setError } = useError();\n\n  useEventListener('error', e => {\n    setError(e.message);\n    e.preventDefault();\n  });\n\n  useEffect(() => {\n    return () => setError(null);\n  }, [setError]);\n\n  if (!open) {\n    return null;\n  }\n\n  return <Error message={message} onReset={reset} title=\"Runtime Error\" />;\n};\n\nexport default Runtime;\n","import ErrorBoundary from './boundary';\nimport ErrorImpl, { type Props } from './error';\nimport ErrorGuard from './guard';\nimport ErrorRuntime from './runtime';\n\ntype ErrorComponent = typeof ErrorImpl & {\n  Boundary: typeof ErrorBoundary;\n  Runtime: typeof ErrorRuntime;\n  Guard: typeof ErrorGuard;\n};\n\nconst Error = ErrorImpl as ErrorComponent;\n\nError.Boundary = ErrorBoundary;\nError.Runtime = ErrorRuntime;\nError.Guard = ErrorGuard;\n\nexport { ErrorBoundary, ErrorRuntime, ErrorGuard };\nexport type { Props };\nexport default Error;\n"],"mappings":";;;;;;AAWA,MAAM,SAAS,EAAE,UAAU,cAAqB;CAC9C,MAAM,CAAC,OAAO,YAAY,SAAwB,IAAI;CAEtD,MAAM,eAAe,OAAuB,IAAI;CAChD,MAAM,eAAe,OAAO,KAAK;CAEjC,iBACE,UACA,UAAS;EACP,IAAI,aAAa,SACf;EAGF,aAAa,UAAU;EAEvB,MAAM,eACJ,MAAM,OAAO,WAAW,MAAM,WAAW;EAE3C,QAAQ,MAAM,kCAAkC,YAAY;EAE5D,MAAM,eAAe;EAErB,SAAS,YAAY;EACrB,UAAU,MAAM,SAAS,IAAI,OAAO,MAAM,YAAY,CAAC;EAEvD,iBAAiB;GACf,aAAa,UAAU;EACzB,GAAG,GAAG;CACR,GACA,EAAE,SAAS,KAAK,CAClB;CAEA,gBAAgB;EAGd,IAAI,CAFc,aAAa,SAG7B;EAGF,MAAM,4BAA4B,UAAiC;GACjE,IAAI,aAAa,SACf;GAGF,aAAa,UAAU;GAEvB,MAAM,eAAe,MAAM,QAAQ,WAAW;GAE9C,MAAM,eAAe;GACrB,SAAS,YAAY;GACrB,UAAU,MAAM,UAAU,IAAI,OAAO,MAAM,YAAY,CAAC;GAExD,iBAAiB;IACf,aAAa,UAAU;GACzB,GAAG,GAAG;EACR;EAEA,OAAO,iBACL,sBACA,0BACA,IACF;EAEA,aAAa;GACX,OAAO,oBACL,sBACA,0BACA,IACF;EACF;CACF,GAAG,CAAC,OAAO,CAAC;CAEZ,IAAI,OACF,OACE,oBAACA,SAAD;EACE,OAAM;EACN,SAAS;EACT,WAAU;EACV,eAAe;GACb,SAAS,IAAI;GACb,aAAa,UAAU;EACzB;CACD,CAAA;CAIL,OAAO,oBAAC,OAAD;EAAK,KAAK;EAAe;CAAc,CAAA;AAChD;;;ACrFA,MAAM,WAAW,EAAE,OAAO,MAAM,YAAmB;CACjD,MAAM,EAAE,OAAO,SAAS,aAAa,SAAS;CAE9C,iBAAiB,UAAS,MAAK;EAC7B,SAAS,EAAE,OAAO;EAClB,EAAE,eAAe;CACnB,CAAC;CAED,gBAAgB;EACd,aAAa,SAAS,IAAI;CAC5B,GAAG,CAAC,QAAQ,CAAC;CAEb,IAAI,CAAC,MACH,OAAO;CAGT,OAAO,oBAACC,SAAD;EAAgB;EAAS,SAAS;EAAO,OAAM;CAAiB,CAAA;AACzE;;;ACnBA,MAAM,QAAQC;AAEd,MAAM,WAAW;AACjB,MAAM,UAAUC;AAChB,MAAM,QAAQC"}
+{"version":3,"file":"error-CO0EbMlA.js","names":["ErrorComponent","Error","ErrorImpl","ErrorRuntime","ErrorGuard"],"sources":["../src/components/error/guard.tsx","../src/components/error/runtime.tsx","../src/components/error/index.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport { useEventListener } from '@jbpark/use-hooks';\n\nimport ErrorComponent from './error';\n\nexport interface Props {\n  children: React.ReactNode;\n  onError?: (error: Error) => void;\n}\n\nconst Guard = ({ children, onError }: Props) => {\n  const [error, setError] = useState<string | null>(null);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const errorHandled = useRef(false);\n\n  useEventListener(\n    'error',\n    event => {\n      if (errorHandled.current) {\n        return;\n      }\n\n      errorHandled.current = true;\n\n      const errorMessage =\n        event.error?.message || event.message || 'Unknown error';\n\n      console.error('⚡ [Guard] Event handler error:', errorMessage);\n\n      event.preventDefault();\n\n      setError(errorMessage);\n      onError?.(event.error || new window.Error(errorMessage));\n\n      setTimeout(() => {\n        errorHandled.current = false;\n      }, 100);\n    },\n    { capture: true },\n  );\n\n  useEffect(() => {\n    const container = containerRef.current;\n\n    if (!container) {\n      return;\n    }\n\n    const handleUnhandledRejection = (event: PromiseRejectionEvent) => {\n      if (errorHandled.current) {\n        return;\n      }\n\n      errorHandled.current = true;\n\n      const errorMessage = event.reason?.message || 'Promise rejection';\n\n      event.preventDefault();\n      setError(errorMessage);\n      onError?.(event.reason || new window.Error(errorMessage));\n\n      setTimeout(() => {\n        errorHandled.current = false;\n      }, 100);\n    };\n\n    window.addEventListener(\n      'unhandledrejection',\n      handleUnhandledRejection,\n      true,\n    );\n\n    return () => {\n      window.removeEventListener(\n        'unhandledrejection',\n        handleUnhandledRejection,\n        true,\n      );\n    };\n  }, [onError]);\n\n  if (error) {\n    return (\n      <ErrorComponent\n        title=\"Runtime Error\"\n        message={error}\n        className=\"m-4\"\n        onReset={() => {\n          setError(null);\n          errorHandled.current = false;\n        }}\n      />\n    );\n  }\n\n  return <div ref={containerRef}>{children}</div>;\n};\n\nexport default Guard;\n","import { useEffect } from 'react';\n\nimport { useEventListener } from '@jbpark/use-hooks';\n\nimport { useError } from '~/components/context/states';\n\nimport Error from './error';\n\nexport interface Props extends React.ComponentPropsWithRef<'div'> {\n  open?: boolean;\n  reset?: () => void;\n}\n\nconst Runtime = ({ open = true, reset }: Props) => {\n  const { error: message, setError } = useError();\n\n  useEventListener('error', e => {\n    setError(e.message);\n    e.preventDefault();\n  });\n\n  useEffect(() => {\n    return () => setError(null);\n  }, [setError]);\n\n  if (!open) {\n    return null;\n  }\n\n  return <Error message={message} onReset={reset} title=\"Runtime Error\" />;\n};\n\nexport default Runtime;\n","import ErrorBoundary from './boundary';\nimport ErrorImpl, { type Props } from './error';\nimport ErrorGuard from './guard';\nimport ErrorRuntime from './runtime';\n\ntype ErrorComponent = typeof ErrorImpl & {\n  Boundary: typeof ErrorBoundary;\n  Runtime: typeof ErrorRuntime;\n  Guard: typeof ErrorGuard;\n};\n\nconst Error = ErrorImpl as ErrorComponent;\n\nError.Boundary = ErrorBoundary;\nError.Runtime = ErrorRuntime;\nError.Guard = ErrorGuard;\n\nexport { ErrorBoundary, ErrorRuntime, ErrorGuard };\nexport type { Props };\nexport default Error;\n"],"mappings":";;;;;;AAWA,MAAM,SAAS,EAAE,UAAU,cAAqB;CAC9C,MAAM,CAAC,OAAO,YAAY,SAAwB,IAAI;CAEtD,MAAM,eAAe,OAAuB,IAAI;CAChD,MAAM,eAAe,OAAO,KAAK;CAEjC,iBACE,UACA,UAAS;EACP,IAAI,aAAa,SACf;EAGF,aAAa,UAAU;EAEvB,MAAM,eACJ,MAAM,OAAO,WAAW,MAAM,WAAW;EAE3C,QAAQ,MAAM,kCAAkC,YAAY;EAE5D,MAAM,eAAe;EAErB,SAAS,YAAY;EACrB,UAAU,MAAM,SAAS,IAAI,OAAO,MAAM,YAAY,CAAC;EAEvD,iBAAiB;GACf,aAAa,UAAU;EACzB,GAAG,GAAG;CACR,GACA,EAAE,SAAS,KAAK,CAClB;CAEA,gBAAgB;EAGd,IAAI,CAFc,aAAa,SAG7B;EAGF,MAAM,4BAA4B,UAAiC;GACjE,IAAI,aAAa,SACf;GAGF,aAAa,UAAU;GAEvB,MAAM,eAAe,MAAM,QAAQ,WAAW;GAE9C,MAAM,eAAe;GACrB,SAAS,YAAY;GACrB,UAAU,MAAM,UAAU,IAAI,OAAO,MAAM,YAAY,CAAC;GAExD,iBAAiB;IACf,aAAa,UAAU;GACzB,GAAG,GAAG;EACR;EAEA,OAAO,iBACL,sBACA,0BACA,IACF;EAEA,aAAa;GACX,OAAO,oBACL,sBACA,0BACA,IACF;EACF;CACF,GAAG,CAAC,OAAO,CAAC;CAEZ,IAAI,OACF,OACE,oBAACA,SAAD;EACE,OAAM;EACN,SAAS;EACT,WAAU;EACV,eAAe;GACb,SAAS,IAAI;GACb,aAAa,UAAU;EACzB;CACD,CAAA;CAIL,OAAO,oBAAC,OAAD;EAAK,KAAK;EAAe;CAAc,CAAA;AAChD;;;ACrFA,MAAM,WAAW,EAAE,OAAO,MAAM,YAAmB;CACjD,MAAM,EAAE,OAAO,SAAS,aAAa,SAAS;CAE9C,iBAAiB,UAAS,MAAK;EAC7B,SAAS,EAAE,OAAO;EAClB,EAAE,eAAe;CACnB,CAAC;CAED,gBAAgB;EACd,aAAa,SAAS,IAAI;CAC5B,GAAG,CAAC,QAAQ,CAAC;CAEb,IAAI,CAAC,MACH,OAAO;CAGT,OAAO,oBAACC,SAAD;EAAgB;EAAS,SAAS;EAAO,OAAM;CAAiB,CAAA;AACzE;;;ACnBA,MAAM,QAAQC;AAEd,MAAM,WAAW;AACjB,MAAM,UAAUC;AAChB,MAAM,QAAQC"}

package/dist/{index-Ck3akHag.d.ts → index-Ba8jGXSM.d.ts}

@@ -20,7 +20,8 @@ interface EditorRenderData {
   onChange: (value: string) => void;
   formatCode: (code: string) => Promise<string>;
 }
-interface Props extends Omit<Props$1, 'onSave' | 'onError'> {
+interface Props extends Omit<Props$1, 'value' | 'onSave' | 'onError'> {
+  value?: string;
   defaultValue?: string;
   debounce?: number;
   renderEditor?: (data: EditorRenderData) => React.ReactNode;
@@ -34,4 +35,4 @@ type EditorComponent = typeof Editor$1 & {
 declare const Editor: EditorComponent;
 //#endregion
 export { Props$1 as a, Core as i, EditorRenderData as n, Props as r, Editor as t };
-//# sourceMappingURL=index-Ck3akHag.d.ts.map
+//# sourceMappingURL=index-Ba8jGXSM.d.ts.map

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

@@ -1,5 +1,5 @@
 import { v as Section } from "./document-J9Lo9p81.js";
-import { B as BindingOption, H as BindingRenderMap, U as BindingType } from "./index-GuEiafMN.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 { useMultiSelect } from "@jbpark/use-hooks";
 import { LucideIcon } from "lucide-react";
@@ -147,6 +147,30 @@ interface ItemsEditorOptions {
 }
 declare const useItemsEditor: (value: string, { render, onChange, onNodeChange }?: ItemsEditorOptions) => ItemsEditor;
 //#endregion
+//#region src/components/dnd/panel/use-children-editor.d.ts
+interface ChildrenEditorOptions {
+  onChange?: (value: string) => void;
+}
+declare const useChildrenEditor: (items: DataAttrNode[], { onChange }?: ChildrenEditorOptions) => {
+  items: DataAttrNode[];
+  selection: {
+    readonly selected: Set<number>;
+    readonly isSelected: (index: number) => boolean;
+    readonly toggle: (index: number, shiftKey?: boolean) => void;
+    readonly clear: () => void;
+    readonly replace: (indices: Set<number>) => void;
+  };
+  actions: {
+    move: (from: number, to: number) => void;
+    remove: (index: number) => void;
+    add: () => void;
+    duplicateSelected: () => void;
+    moveSelected: (direction: "up" | "down") => void;
+    removeSelected: () => void;
+  };
+};
+type ChildrenEditor = ReturnType<typeof useChildrenEditor>;
+//#endregion
 //#region src/components/dnd/index.d.ts
 type DndComponent = typeof Dnd$1 & {
   DraggableItem: typeof DraggableItem;
@@ -158,5 +182,5 @@ type DndComponent = typeof Dnd$1 & {
 };
 declare const Dnd: DndComponent;
 //#endregion
-export { Props as A, DraggableItem as C, DndPanel as D, DndPalette as E, PanelBinding as O, Panel as S, DraggableItemProps as T, Canvas as _, ItemsEditorNestedElement as a, Layout as b, useItemsEditor as c, Field as d, FieldProps as f, useDndPanel as g, useDndPalette as h, ItemsEditorItem as i, PanelNodeChange as k, ICON_MAP as l, useDndLayout as m, ItemsEditor as n, ItemsEditorNestedGroup as o, DndLayout as p, ItemsEditorActions as r, ItemsEditorOptions as s, Dnd as t, ICON_OPTIONS as u, DndLayoutProps as v, DraggableItemDragState as w, Palette as x, DndRegionProps as y };
-//# sourceMappingURL=index-Bqc5kUAG.d.ts.map
+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

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

@@ -12,6 +12,7 @@ interface DataAttrNode {
   dataAttributes: Attribute[];
   textContent: string;
   rawChildren?: string;
+  source?: string;
   loc?: {
     start: {
       line: number;
@@ -151,6 +152,28 @@ declare const bulkUpdate: (raw: string, entries: {
   property?: string;
 }[]) => UpdateResult;
 //#endregion
+//#region src/utils/ast/children.d.ts
+type ChildrenAction = {
+  type: 'move';
+  from: number;
+  to: number;
+} | {
+  type: 'move-selected';
+  indices: number[];
+  direction: 'up' | 'down';
+} | {
+  type: 'remove' | 'duplicate';
+  indices: number[];
+} | {
+  type: 'append';
+};
+interface ChildrenEdit {
+  kind: 'children-edit';
+  expected: string[];
+  action: ChildrenAction;
+}
+declare const getChildrenSignatures: (nodes: DataAttrNode[]) => string[];
+//#endregion
 //#region node_modules/.pnpm/@babel+parser@7.29.8/node_modules/@babel/parser/typings/babel-parser.d.ts
 declare class Position {
   line: number;
@@ -189,5 +212,5 @@ interface ValidationResult {
 }
 declare const validateBindingValue: (binding: BindingItem, value: unknown) => ValidationResult;
 //#endregion
-export { flattenEditableValue as A, BindingOption as B, EditablePathSegment as C, createNodeFromValue as D, arrayExpressionToCode as E, getCurrentValue as F, EditableNodeValueType as G, BindingRenderMap as H, getStructuredValue as I, ExtractedNodeValue as K, parseBinding as L, parseValue as M, setEditableValue as N, extractNodeValue as O, findEditableChildren as P, parseBindingExpression as R, generateCode as S, EditableValueEntry as T, BindingType as U, BindingRenderLeaf as V, DataAttrNode as W, moveArrayItems as _, replaceIds as a, updateArrayItemProperty as b, bulkUpdate as c, extract as d, ArrayItem as f, moveArrayItem as g, duplicateArrayItems as h, fillIds as i, parseArrayExpression as j, extractObjectProperties as k, update as l, appendArrayItem as m, validateBindingValue as n, UpdateFailure as o, ItemKind as p, NodeValueType as q, clone as r, UpdateResult as s, ValidationResult as t, clearExtractCache as u, parseItems as v, EditablePrimitive as w, updateArrayItemValue as x, removeArrayItems as y, BindingItem as z };
-//# sourceMappingURL=index-GuEiafMN.d.ts.map
+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

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import { v as Section } from "./document-J9Lo9p81.js";
 import { t as FrameProps } from "./index-DpDU1IAw.js";
-import { A as Props, D as DndPanel, E as DndPalette, O as PanelBinding, S as Panel, T as DraggableItemProps, _ as Canvas, b as Layout, f as FieldProps, i as ItemsEditorItem, k as PanelNodeChange, n as ItemsEditor, p as DndLayout, s as ItemsEditorOptions, t as Dnd, x as Palette } from "./index-Bqc5kUAG.js";
-import { a as Props$2, n as EditorRenderData, r as Props$1, t as Editor } from "./index-Ck3akHag.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 Props$2, n as EditorRenderData, r as Props$1, t as Editor } from "./index-Ba8jGXSM.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";
 //#region src/index.d.ts

package/dist/index.js

@@ -1,8 +1,8 @@
-import { t as ContextProvider } from "./context-DH70wj9d.js";
-import { t as Dnd } from "./dnd-C4iBiSkv.js";
-import { t as Editor } from "./editor-C0lphNg6.js";
-import { t as Error } from "./error-lsJey-it.js";
-import { t as Preview } from "./preview-CNVXyDgY.js";
+import { t as ContextProvider } from "./context-649REFsj.js";
+import { t as Dnd } from "./dnd-DTT37EbA.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 { jsx } from "react/jsx-runtime";
 //#region src/index.tsx
 const App = ({ children }) => {

package/dist/preview/index.js

@@ -1,2 +1,2 @@
-import { t as Preview } from "../preview-CNVXyDgY.js";
+import { t as Preview } from "../preview-CWT0lgwq.js";
 export { Preview as default };

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

@@ -1,16 +1,16 @@
-import { r as cn } from "./utils-BwEgY5pe.js";
+import { r as cn } from "./utils-WyxPYZGh.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-C0Onss1A.js";
-import { t as Error } from "./error-lsJey-it.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 { useMemo } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/preview/client.tsx
-const Client = ({ code: _code = "", className, showError, props = {}, modules = {}, frame, dynamicTailwind = false, provider }) => {
+const Client = ({ code: _code, className, showError, props = {}, modules = {}, frame, dynamicTailwind = false, provider }) => {
 	const { code } = usePreview();
 	const { error, setError } = useError();
 	const isError = !!showError && !!error;
 	const classNames = cn(isError && "hidden", className);
-	const effectiveCode = _code || code;
+	const effectiveCode = _code === void 0 ? code : _code;
 	const module = useCompiledModule(effectiveCode, modules);
 	const { ref: contentRef, css: dynamicCSS } = useDynamicTailwind(effectiveCode, dynamicTailwind);
 	const componentProps = useMemo(() => ({ ...props }), [props]);
@@ -79,4 +79,4 @@ const Preview = ({ code, props = {}, modules = {}, dynamicTailwind = false, prov
 //#endregion
 export { Preview as t };
 
-//# sourceMappingURL=preview-CNVXyDgY.js.map
+//# sourceMappingURL=preview-CWT0lgwq.js.map

package/dist/preview-CWT0lgwq.js.map

@@ -0,0 +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"}

package/dist/provider/index.js

@@ -1,2 +1,2 @@
-import { t as ContextProvider } from "../context-DH70wj9d.js";
+import { t as ContextProvider } from "../context-649REFsj.js";
 export { ContextProvider as default };

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

@@ -1,4 +1,4 @@
-import { i as compile, l as getCachedScriptBlob, t as baseModules } from "./utils-BwEgY5pe.js";
+import { i as compile, l as getCachedScriptBlob, t as baseModules } from "./utils-WyxPYZGh.js";
 import { t as generateTailwindCSSFromDOM } from "./tailwind-CbjdLyVX.js";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -24,6 +24,63 @@ const estimatePositionedElementHeight = (offsetHeight, transform, probeHeight) =
 	return Math.min(offsetY + offsetHeight, probeHeight);
 };
 //#endregion
+//#region src/components/frame/style-sync.ts
+const SYNCED_STYLE_ATTR = "data-live-editor-synced-style";
+const createStyleSyncManager = () => ({ clones: /* @__PURE__ */ new Map() });
+const isDocument = (target) => target.nodeType === Node.DOCUMENT_NODE;
+const sourceStyles = (document) => Array.from(document.head.querySelectorAll("link[rel=\"stylesheet\"], style"));
+const copyAttributes = (source, clone, transformStyle) => {
+	Array.from(clone.attributes).forEach((attribute) => {
+		if (attribute.name !== SYNCED_STYLE_ATTR && !source.hasAttribute(attribute.name)) clone.removeAttribute(attribute.name);
+	});
+	Array.from(source.attributes).forEach((attribute) => {
+		clone.setAttribute(attribute.name, attribute.value);
+	});
+	if (source.tagName === "LINK" && clone.tagName === "LINK") clone.disabled = source.disabled;
+	clone.textContent = source.tagName === "STYLE" ? transformStyle(source.textContent || "") : source.textContent;
+};
+const createClone = (source, target, transformStyle) => {
+	const clone = (isDocument(target) ? target : target.ownerDocument).createElement(source.tagName.toLowerCase());
+	clone.setAttribute(SYNCED_STYLE_ATTR, "");
+	copyAttributes(source, clone, transformStyle);
+	return clone;
+};
+const targetContainer = (target) => isDocument(target) ? target.head : target;
+const isSyncedStyle = (node) => {
+	const element = node;
+	return (element.tagName === "LINK" || element.tagName === "STYLE") && element.hasAttribute(SYNCED_STYLE_ATTR);
+};
+const removeClone = (clone) => {
+	clone.remove();
+};
+const reconcileStyles = (sourceDocument, target, manager, enabled, transformStyle = (content) => content) => {
+	if (!enabled) {
+		manager.clones.forEach(removeClone);
+		manager.clones.clear();
+		return;
+	}
+	const sources = sourceStyles(sourceDocument);
+	const sourceSet = new Set(sources);
+	const container = targetContainer(target);
+	manager.clones.forEach((clone, source) => {
+		if (!sourceSet.has(source)) {
+			removeClone(clone);
+			manager.clones.delete(source);
+		}
+	});
+	let previous = null;
+	sources.forEach((source) => {
+		let clone = manager.clones.get(source);
+		if (!clone) {
+			clone = createClone(source, target, transformStyle);
+			manager.clones.set(source, clone);
+		} else copyAttributes(source, clone, transformStyle);
+		const nextSibling = previous ? previous.nextSibling : Array.from(container.childNodes).find(isSyncedStyle) ?? null;
+		if (clone !== nextSibling) container.insertBefore(clone, nextSibling);
+		previous = clone;
+	});
+};
+//#endregion
 //#region src/components/frame/viewport-units.ts
 const UNIT_MAP = {
 	vh: "cqh",
@@ -60,44 +117,11 @@ const IFrame = ({ title = "Live Preview", sandbox, style = {}, scripts = EMPTY_S
 	const prevStyleCountRef = useRef(0);
 	const prevStylesheetCountRef = useRef(0);
 	const shouldAutoHeight = autoHeight && style.height == null;
-	const styleManagerRef = useRef({
-		copiedLinks: /* @__PURE__ */ new Set(),
-		copiedStyles: /* @__PURE__ */ new Set()
-	});
+	const styleManagerRef = useRef(createStyleSyncManager());
 	const applyStyle = useCallback(() => {
 		const doc = iframeRef.current?.contentDocument;
-		if (!doc || !syncStyle) return;
-		const manager = styleManagerRef.current;
-		const links = document.querySelectorAll("link[rel=\"stylesheet\"]");
-		const newLinks = Array.from(links).map((link) => link.href).filter((href) => !manager.copiedLinks.has(href));
-		if (newLinks.length) {
-			const fragment = doc.createDocumentFragment();
-			newLinks.forEach((href) => {
-				const link = doc.createElement("link");
-				link.rel = "stylesheet";
-				link.href = href;
-				fragment.appendChild(link);
-				manager.copiedLinks.add(href);
-			});
-			doc.head.appendChild(fragment);
-		}
-		const styles = document.querySelectorAll("style");
-		const newStyles = Array.from(styles).map((style) => style.textContent || "").filter((content) => {
-			if (!content) return false;
-			const hash = content.length + content.slice(0, 50);
-			if (manager.copiedStyles.has(hash)) return false;
-			manager.copiedStyles.add(hash);
-			return true;
-		});
-		if (newStyles.length) {
-			const fragment = doc.createDocumentFragment();
-			newStyles.forEach((content) => {
-				const style = doc.createElement("style");
-				style.textContent = convertViewportUnits(content);
-				fragment.appendChild(style);
-			});
-			doc.head.appendChild(fragment);
-		}
+		if (!doc) return;
+		reconcileStyles(document, doc, styleManagerRef.current, syncStyle, convertViewportUnits);
 	}, [syncStyle]);
 	const applyStyleTimeoutRef = useRef(void 0);
 	const debouncedApplyStyle = useCallback(() => {
@@ -111,8 +135,7 @@ const IFrame = ({ title = "Live Preview", sandbox, style = {}, scripts = EMPTY_S
 		enabled: syncStyle,
 		childList: true,
 		subtree: true,
-		attributes: true,
-		attributeFilter: ["href"]
+		attributes: true
 	});
 	useEffect(() => {
 		const $iframe = iframeRef.current;
@@ -316,56 +339,25 @@ const Shadow = ({ syncStyle = false, children }) => {
 	const renderTargetRef = useRef(null);
 	const [renderTarget, setRenderTarget] = useState(null);
 	const [hostContainer, setHostContainer] = useState(null);
-	const styleManagerRef = useRef({
-		copiedLinks: /* @__PURE__ */ new Set(),
-		copiedStyles: /* @__PURE__ */ new Set()
-	});
+	const styleManagerRef = useRef(createStyleSyncManager());
 	const applyStyle = useCallback(() => {
 		const shadowRoot = shadowRootRef.current;
-		if (!shadowRoot || !syncStyle) return;
-		const manager = styleManagerRef.current;
-		const links = document.querySelectorAll("link[rel=\"stylesheet\"]");
-		const newLinks = Array.from(links).map((link) => link.href).filter((href) => !manager.copiedLinks.has(href));
-		if (newLinks.length) {
-			const fragment = document.createDocumentFragment();
-			newLinks.forEach((href) => {
-				const link = document.createElement("link");
-				link.rel = "stylesheet";
-				link.href = href;
-				fragment.appendChild(link);
-				manager.copiedLinks.add(href);
-			});
-			shadowRoot.appendChild(fragment);
-		}
-		const styleTags = document.querySelectorAll("style");
-		const newStyles = Array.from(styleTags).map((style) => style.textContent || "").filter((content) => {
-			if (!content) return false;
-			const hash = content.length + content.slice(0, 50);
-			if (manager.copiedStyles.has(hash)) return false;
-			manager.copiedStyles.add(hash);
-			return true;
-		});
-		if (newStyles.length) {
-			const fragment = document.createDocumentFragment();
-			newStyles.forEach((content) => {
-				const style = document.createElement("style");
-				style.textContent = content;
-				fragment.appendChild(style);
-			});
-			shadowRoot.appendChild(fragment);
-		}
+		if (!shadowRoot) return;
+		reconcileStyles(document, shadowRoot, styleManagerRef.current, syncStyle);
 	}, [syncStyle]);
 	const applyStyleTimeoutRef = useRef(void 0);
 	const debouncedApplyStyle = useCallback(() => {
 		clearTimeout(applyStyleTimeoutRef.current);
 		applyStyleTimeoutRef.current = window.setTimeout(applyStyle, 50);
 	}, [applyStyle]);
+	useEffect(() => {
+		return () => clearTimeout(applyStyleTimeoutRef.current);
+	}, []);
 	useMutationObserver(document.head, debouncedApplyStyle, {
 		enabled: syncStyle,
 		childList: true,
 		subtree: true,
-		attributes: true,
-		attributeFilter: ["href"]
+		attributes: true
 	});
 	useLayoutEffect(() => {
 		if (!hostRef.current) return;
@@ -456,4 +448,4 @@ const useDynamicTailwind = (code, enabled) => {
 //#endregion
 export { useCompiledModule as n, Frame as r, useDynamicTailwind as t };
 
-//# sourceMappingURL=use-dynamic-tailwind-C0Onss1A.js.map
+//# sourceMappingURL=use-dynamic-tailwind-DAhKGsY4.js.map