@jbpark/live-editor 5.0.0 → 6.0.0

package/dist/error-DyYx2NQ2.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"error-DyYx2NQ2.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 { useRef, useState } from 'react';\n\nimport { useEventListener, useLatest } from '@jbpark/use-hooks';\n\nimport { useLiveMessages } from '~/components/context/messages';\n\nimport ErrorComponent from './error';\n\n// Exported although no file imports it: the declaration of `App` in\n// `src/index.tsx` names it, and TypeScript can't name a type from another\n// module unless it is exported (TS4023).\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  const messages = useLiveMessages();\n\n  const errorHandled = useRef(false);\n  // Read by the listeners, so new messages don't subscribe them again.\n  const messagesRef = useLatest(messages);\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 ||\n        event.message ||\n        messagesRef.current.errors.unknown;\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  useEventListener(\n    'unhandledrejection',\n    event => {\n      if (errorHandled.current) {\n        return;\n      }\n\n      errorHandled.current = true;\n\n      const errorMessage =\n        event.reason?.message || messagesRef.current.errors.unhandledRejection;\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    { capture: true },\n  );\n\n  if (error) {\n    return (\n      <ErrorComponent\n        title={messages.errors.runtime}\n        message={error}\n        className=\"m-4\"\n        onReset={() => {\n          setError(null);\n          errorHandled.current = false;\n        }}\n      />\n    );\n  }\n\n  return <div>{children}</div>;\n};\n\nexport default Guard;\n","import { useEffect } from 'react';\n\nimport { useEventListener } from '@jbpark/use-hooks';\n\nimport { useLiveMessages } from '~/components/context/messages';\nimport { useError } from '~/components/context/states';\n\nimport Error from './error';\n\n// Exported although no file imports it: the declaration of `App` in\n// `src/index.tsx` names it, and TypeScript can't name a type from another\n// module unless it is exported (TS4023).\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  const messages = useLiveMessages();\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 (\n    <Error message={message} onReset={reset} title={messages.errors.runtime} />\n  );\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":";;;;;;;AAgBA,MAAM,SAAS,EAAE,UAAU,cAAqB;CAC9C,MAAM,CAAC,OAAO,YAAY,SAAwB,IAAI;CACtD,MAAM,WAAW,gBAAgB;CAEjC,MAAM,eAAe,OAAO,KAAK;CAEjC,MAAM,cAAc,UAAU,QAAQ;CAEtC,iBACE,UACA,UAAS;EACP,IAAI,aAAa,SACf;EAGF,aAAa,UAAU;EAEvB,MAAM,eACJ,MAAM,OAAO,WACb,MAAM,WACN,YAAY,QAAQ,OAAO;EAE7B,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,iBACE,uBACA,UAAS;EACP,IAAI,aAAa,SACf;EAGF,aAAa,UAAU;EAEvB,MAAM,eACJ,MAAM,QAAQ,WAAW,YAAY,QAAQ,OAAO;EAEtD,MAAM,eAAe;EACrB,SAAS,YAAY;EACrB,UAAU,MAAM,UAAU,IAAI,OAAO,MAAM,YAAY,CAAC;EAExD,iBAAiB;GACf,aAAa,UAAU;EACzB,GAAG,GAAG;CACR,GACA,EAAE,SAAS,KAAK,CAClB;CAEA,IAAI,OACF,OACE,oBAACA,SAAD;EACE,OAAO,SAAS,OAAO;EACvB,SAAS;EACT,WAAU;EACV,eAAe;GACb,SAAS,IAAI;GACb,aAAa,UAAU;EACzB;CACD,CAAA;CAIL,OAAO,oBAAC,OAAD,EAAM,SAAc,CAAA;AAC7B;;;ACzEA,MAAM,WAAW,EAAE,OAAO,MAAM,YAAmB;CACjD,MAAM,EAAE,OAAO,SAAS,aAAa,SAAS;CAC9C,MAAM,WAAW,gBAAgB;CAEjC,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,OACE,oBAACC,SAAD;EAAgB;EAAS,SAAS;EAAO,OAAO,SAAS,OAAO;CAAU,CAAA;AAE9E;;;AC1BA,MAAM,QAAQC;AAEd,MAAM,WAAW;AACjB,MAAM,UAAUC;AAChB,MAAM,QAAQC"}

package/dist/messages-Bt5WXKTE.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"messages-Bt5WXKTE.js","names":[],"sources":["../src/components/context/messages.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nimport {\n  type ValidationMessages,\n  defaultValidationMessages,\n} from '~/utils/ast/validate';\n\n// Every piece of text the editor shows or announces, grouped by where it\n// appears (#524). Text with values in it is a function, so a translation\n// can put them where its grammar needs them. Pass a partial set to `Live`'s\n// `messages` prop to replace any of it; the rest stays English.\nexport interface LiveMessages {\n  // The section toolbar on the canvas and the panel header.\n  section: {\n    moveUp: string;\n    moveDown: string;\n    duplicate: string;\n    delete: string;\n  };\n  canvas: {\n    // The mobile palette button and Drawer title.\n    palette: string;\n    // The mobile panel Drawer title.\n    properties: string;\n    pickElement: string;\n    pickElementActive: string;\n    dropHere: string;\n    dropAtBottom: string;\n    empty: string;\n    emptyHintTouch: string;\n    emptyHintDrag: string;\n    syntaxError: string;\n    syntaxErrorDetail: string;\n    missingContainer: (containerId: string) => string;\n    missingContainerDetail: (containerId: string) => string;\n    stale: string;\n  };\n  panel: {\n    selectSection: string;\n    noEditableElements: string;\n    readOnly: string;\n    expressionPreserved: string;\n    useCodeEditor: string;\n    invalidValue: string;\n    urlPlaceholder: string;\n    emailPlaceholder: string;\n    telPlaceholder: string;\n    numberPlaceholder: string;\n    textPlaceholder: string;\n  };\n  // The built-in editor for an array value.\n  items: {\n    heading: (count: number) => string;\n    add: string;\n    item: (position: number) => string;\n    reorder: (item: string) => string;\n    moveUp: string;\n    moveDown: string;\n    delete: string;\n    collapseAll: string;\n    expandAll: string;\n    unreadable: string;\n    empty: string;\n    structureLocked: string;\n    noNestedBindings: string;\n  };\n  // The built-in editor for child elements.\n  children: {\n    heading: (count: number) => string;\n    add: string;\n    child: (position: number, tagName: string) => string;\n    moveUp: string;\n    moveDown: string;\n    delete: string;\n    editableBindings: string;\n    childNodes: string;\n  };\n  // The bar shown while items or children are selected.\n  selection: {\n    count: (count: number) => string;\n    selectAll: string;\n    duplicate: string;\n    moveUp: string;\n    moveDown: string;\n    delete: string;\n    clear: string;\n  };\n  // The `title` and `description` of a `DndEditError`, which the default\n  // toast shows.\n  editErrors: {\n    updateFailed: (label: string) => string;\n    cannotEdit: (label: string) => string;\n    cannotRemove: (label: string) => string;\n    attributeNotFound: (property: string) => string;\n    // `property` is set when the binding names one, otherwise `label` is the\n    // one to show.\n    bindingNotDeclared: (target: {\n      label: string;\n      property?: string;\n    }) => string;\n    duplicateBinding: (target: {\n      count: number;\n      label: string;\n      property?: string;\n    }) => string;\n    reservedProperty: (property: string) => string;\n    requiredProperty: (property: string) => string;\n    noBinding: string;\n    elementNotFound: string;\n    unsupportedSyntax: (property: string) => string;\n    selfClosing: (property: string) => string;\n    checkConsole: string;\n    syntaxError: string;\n    syntaxErrorDetail: string;\n    missingContainer: (containerId: string) => string;\n    missingContainerDetail: (containerId: string) => string;\n    sectionParseFailed: string;\n    itemsParseFailed: string;\n    itemUpdateFailed: string;\n    itemUpdateFailedDetail: string;\n  };\n  // What a screen reader hears during a drag.\n  announcements: {\n    instructions: string;\n    // Stands in for a section without a name.\n    section: string;\n    pickedUp: (name: string) => string;\n    movedTo: (name: string, position: number, total: number) => string;\n    notOver: (name: string) => string;\n    droppedAt: (name: string, position: number, total: number) => string;\n    dropped: (name: string) => string;\n    cancelled: (name: string) => string;\n    itemOver: (name: string, over: string) => string;\n    itemMoved: (name: string, over: string) => string;\n  };\n  // The error boxes of `Live.Preview`, `Live.Error` and canvas sections.\n  errors: {\n    default: string;\n    compile: string;\n    runtime: string;\n    rendering: string;\n    sectionUnavailable: string;\n    sectionNotRendered: string;\n    tryAgain: string;\n    // The message of a page error that carries none.\n    unknown: string;\n    // The message of an unhandled promise rejection that carries none.\n    unhandledRejection: string;\n  };\n  validation: ValidationMessages;\n}\n\n// Every group of `LiveMessages`, each with any of its keys.\nexport type LiveMessagesInput = {\n  [Group in keyof LiveMessages]?: Partial<LiveMessages[Group]>;\n};\n\nexport const defaultMessages: LiveMessages = {\n  section: {\n    moveUp: 'Move section up',\n    moveDown: 'Move section down',\n    duplicate: 'Duplicate section',\n    delete: 'Delete section',\n  },\n  canvas: {\n    palette: 'Components',\n    properties: 'Properties',\n    pickElement: 'Pick an element',\n    pickElementActive: 'Click an element to edit it. Esc to cancel.',\n    dropHere: 'Drop here',\n    dropAtBottom: 'Drag here to add at bottom',\n    empty: 'No sections available',\n    emptyHintTouch: 'Tap a component to add it',\n    emptyHintDrag: 'Drag a component from the left to add it',\n    syntaxError: 'The document has a syntax error',\n    syntaxErrorDetail: 'Fix it in the code to see its sections',\n    missingContainer: containerId =>\n      `No #${containerId} element in the document`,\n    missingContainerDetail: containerId =>\n      `Sections go inside the element with id=\"${containerId}\"`,\n    stale:\n      'Showing the last version that parsed. Fix the syntax error in the code to edit here again.',\n  },\n  panel: {\n    selectSection: 'Please select a section.',\n    noEditableElements: 'No editable elements.',\n    readOnly:\n      \"The document has a syntax error. These fields are from the last version that parsed, and can't be edited until it parses again.\",\n    expressionPreserved:\n      'This expression is preserved but is not editable here.',\n    useCodeEditor: 'Use the code editor to change it.',\n    invalidValue: 'Invalid value.',\n    urlPlaceholder: 'https://example.com',\n    emailPlaceholder: 'name@example.com',\n    telPlaceholder: '+1 555 0100',\n    numberPlaceholder: 'Enter a numeric value',\n    textPlaceholder: 'Enter a value',\n  },\n  items: {\n    heading: count => `Items (${count})`,\n    add: 'Add Item',\n    item: position => `Item ${position}`,\n    reorder: item => `Reorder ${item}`,\n    moveUp: 'Move item up',\n    moveDown: 'Move item down',\n    delete: 'Delete item',\n    collapseAll: 'Collapse all',\n    expandAll: 'Expand all',\n    unreadable:\n      'This value could not be read as a list. Edit it in the code editor.',\n    empty:\n      'No editable items. The panel copies an existing item rather than guessing the shape of a new one — add the first item in the code editor.',\n    structureLocked:\n      'Values remain editable, but moving, copying, adding, and deleting require a dense array without spreads or parenthesized top-level items. Use the code editor for those structural changes.',\n    noNestedBindings: 'No JSX bindings found',\n  },\n  children: {\n    heading: count => `Children Items (${count})`,\n    add: 'Add Child',\n    child: (position, tagName) => `Child ${position} (${tagName})`,\n    moveUp: 'Move child up',\n    moveDown: 'Move child down',\n    delete: 'Delete child',\n    editableBindings: 'Editable Bindings:',\n    childNodes: 'Child Nodes:',\n  },\n  selection: {\n    count: count => `${count} selected`,\n    selectAll: 'Select all',\n    duplicate: 'Duplicate selected',\n    moveUp: 'Move selected up',\n    moveDown: 'Move selected down',\n    delete: 'Delete selected',\n    clear: 'Clear',\n  },\n  editErrors: {\n    updateFailed: label => `Failed to update \"${label}\"`,\n    cannotEdit: label => `Cannot edit \"${label}\" in the panel`,\n    cannotRemove: label => `Cannot remove \"${label}\"`,\n    attributeNotFound: property =>\n      `This element has no \"${property}\" attribute — check the property in its data-binding.`,\n    bindingNotDeclared: ({ label, property }) =>\n      `No binding for ${\n        property ? `property \"${property}\"` : `label \"${label}\"`\n      } is declared on this element's data-binding.`,\n    duplicateBinding: ({ count, label, property }) =>\n      `${count} bindings share ${\n        property ? `property \"${property}\"` : `label \"${label}\"`\n      } on this element — remove the duplicate in its data-binding.`,\n    reservedProperty: property =>\n      `\"${property}\" is managed by the editor, so a binding can't change it.`,\n    requiredProperty: property =>\n      `\"${property}\" is marked required in its data-binding, so it can't be removed.`,\n    noBinding: 'This element has no data-binding declaration.',\n    elementNotFound: 'The target element could not be found in this section.',\n    unsupportedSyntax: property =>\n      `The \"${property}\" expression was preserved. Change it in the code editor instead.`,\n    selfClosing: property =>\n      `This element is self-closing, so it has no content for \"${property}\". Give it a closing tag in the code editor.`,\n    checkConsole: 'Check the console for details.',\n    syntaxError: 'The document has a syntax error',\n    syntaxErrorDetail:\n      'The canvas shows the last version that parsed. Fix the error in the code, then edit here again.',\n    missingContainer: containerId =>\n      `No #${containerId} element in the document`,\n    missingContainerDetail: containerId =>\n      `Sections are the <section> elements inside the element with id=\"${containerId}\". Start from createDocument(), or set containerId to match your document.`,\n    sectionParseFailed: 'Failed to parse this section',\n    itemsParseFailed: 'Failed to parse items',\n    itemUpdateFailed: 'Failed to update this item',\n    itemUpdateFailedDetail:\n      'The source was preserved. Structural edits require a dense array without spreads; use the code editor for unsupported syntax.',\n  },\n  announcements: {\n    instructions:\n      'On a palette item, press Enter to add it to the canvas. On a canvas section, press Enter to select it, the up and down arrow keys to go to the previous or next section, and Delete to remove it. Press Space to pick a section up, the arrow keys to move it, and Space or Enter to drop it. Press Escape to cancel.',\n    section: 'section',\n    pickedUp: name => `Picked up ${name}.`,\n    movedTo: (name, position, total) =>\n      `${name} moved to position ${position} of ${total}.`,\n    notOver: name => `${name} is no longer over a position.`,\n    droppedAt: (name, position, total) =>\n      `${name} dropped at position ${position} of ${total}.`,\n    dropped: name => `${name} dropped.`,\n    cancelled: name => `Moving ${name} was cancelled.`,\n    itemOver: (name, over) => `${name} is over ${over}.`,\n    itemMoved: (name, over) => `${name} was moved to the place of ${over}.`,\n  },\n  errors: {\n    default: 'An error occurred',\n    compile: 'Compile Error',\n    runtime: 'Runtime Error',\n    rendering: 'Rendering Error',\n    sectionUnavailable: 'Section Unavailable',\n    sectionNotRendered: 'This section is not rendered in this editor.',\n    tryAgain: 'Try Again',\n    unknown: 'Unknown error',\n    unhandledRejection: 'Unhandled promise rejection',\n  },\n  validation: defaultValidationMessages,\n};\n\n// `base` (the defaults, unless given) with each group's given keys on top.\nexport const mergeMessages = (\n  input?: LiveMessagesInput,\n  base: LiveMessages = defaultMessages,\n): LiveMessages => {\n  if (!input) {\n    return base;\n  }\n\n  const merged = { ...base };\n\n  for (const group of Object.keys(base) as (keyof LiveMessages)[]) {\n    if (input[group]) {\n      merged[group] = { ...base[group], ...input[group] } as never;\n    }\n  }\n\n  return merged;\n};\n\n// The English defaults outside a provider, so an error box rendered on its\n// own still has text.\nexport const MessagesContext = createContext<LiveMessages>(defaultMessages);\n\n// The messages in effect: the provider's, merged over the defaults. A custom\n// palette or panel can use it to show the same text as the built-in ones.\nexport const useLiveMessages = () => useContext(MessagesContext);\n"],"mappings":"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"}

package/dist/preview-DC0pyOdu.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"preview-DC0pyOdu.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 { useLiveMessages } from '~/components/context/messages';\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 './types';\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 messages = useLiveMessages();\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={messages.errors.compile} />\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 Client from './client';\nimport { NO_MODULES, NO_PROPS } from './defaults';\nimport type { Props } from './types';\n\n// `Live.Preview`: a thin wrapper around `Client`, which compiles, handles\n// errors and wraps the frame. One render path for both `code` and the\n// provider's code (#187).\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;;;ACWpD,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,WAAW,gBAAgB;CACjC,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,OAAO,SAAS,OAAO;EAAU,CAAA;CAChE,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;;;ACrHA,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/use-dynamic-tailwind-CSYKXDmX.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-dynamic-tailwind-CSYKXDmX.js","names":[],"sources":["../src/components/frame/auto-height/measure.ts","../src/components/frame/auto-height/animations.ts","../src/components/frame/viewport-units.ts","../src/components/frame/auto-height/auto-height.ts","../src/components/frame/auto-height/use-auto-height.ts","../src/components/frame/iframe/inject-assets.ts","../src/components/frame/style-sync.ts","../src/components/frame/iframe/use-host-style-sync.ts","../src/components/frame/iframe/use-iframe-document.ts","../src/components/frame/iframe/iframe.tsx","../src/components/frame/shadow.tsx","../src/components/frame/frame.tsx","../src/components/preview/base-modules.ts","../src/components/preview/use-compiled-module.ts","../src/components/preview/use-dynamic-tailwind.ts"],"sourcesContent":["// The calculations behind `autoHeight`, kept free of the DOM so they can be\n// unit-tested. The DOM reads stay in `auto-height.ts`, which needs a real\n// browser to test.\n\n// The probe height when there's no `[data-frame-container]` scroll\n// container, as when `Frame` is used without `Live.Dnd`. A common mobile\n// viewport height.\nexport const FALLBACK_PROBE_HEIGHT = 812;\n\n// The vertical space an element takes around its content: margin, border\n// and padding, top and bottom. Margin counts (#440), or a `100vh` section in\n// a wrapper with a margin would overflow the container by that margin. A\n// margin that collapses through a parent is counted twice, which errs toward\n// a smaller probe that fits.\nexport const verticalInsets = (\n  style: Pick<\n    CSSStyleDeclaration,\n    | 'marginTop'\n    | 'marginBottom'\n    | 'borderTopWidth'\n    | 'borderBottomWidth'\n    | 'paddingTop'\n    | 'paddingBottom'\n  >,\n): number =>\n  [\n    style.marginTop,\n    style.marginBottom,\n    style.borderTopWidth,\n    style.borderBottomWidth,\n    style.paddingTop,\n    style.paddingBottom,\n  ].reduce((sum, value) => sum + (parseFloat(value) || 0), 0);\n\n// The height the preview's `cq*` units resolve against: the scroll\n// container's `clientHeight` minus `wrapperInsets`, the space everything\n// between the iframe and the container takes (`verticalInsets`). `null`\n// while the container isn't laid out yet: skip the pass rather than guess a\n// height that nothing would correct later.\nexport const computeProbeHeight = (\n  scrollContainerClientHeight: number,\n  wrapperInsets: number,\n): number | null => {\n  const usable = scrollContainerClientHeight - wrapperInsets;\n\n  return usable > 0 ? usable : null;\n};\n\n// Whether an element is hidden but still takes height: `visibility: hidden`\n// or `opacity: 0` (`display: none` already reads 0), such as a closed bottom\n// sheet. A transparent element that `isAnimating` is a fade-in starting, so\n// it's measured (#374). `visibility: hidden` stays hidden even while\n// animating.\nexport const isVisuallyHidden = (\n  computed: {\n    visibility: string;\n    opacity: string;\n  },\n  isAnimating = false,\n): boolean =>\n  computed.visibility === 'hidden' ||\n  (computed.opacity === '0' && !isAnimating);\n\n// The `playState`s that mean the element is still changing. Not just\n// `!== 'idle'`: a finished fade-out with `fill-mode: forwards` stays\n// `finished` at `opacity: 0` and is hidden for good. `paused` counts, since\n// a paused fade-in stopped part-way.\nexport const isAnimationActive = (playState: string): boolean =>\n  playState === 'running' || playState === 'paused';\n\n// How far down a fixed or absolute element reaches, from its viewport `top`\n// and `bottom` read while the viewport is `probeHeight` tall: its bottom\n// edge, capped at `probeHeight` so one element placed past the viewport can't\n// stretch the whole preview. `null` for an element entirely outside the\n// viewport, such as a closed drawer moved off-screen, which shows nothing.\nexport const positionedElementBottom = (\n  top: number,\n  bottom: number,\n  probeHeight: number,\n): number | null => {\n  if (bottom <= 0 || top >= probeHeight) {\n    return null;\n  }\n\n  return Math.min(bottom, probeHeight);\n};\n","import { isAnimationActive } from './measure';\n\n// `getAnimations()` mixes CSS animations, CSS transitions and script\n// animations (`element.animate()`). Only the first two fire a bubbling event\n// when they end, so they're told apart. Both constructors are checked first,\n// since jsdom has neither.\nexport const isCssAnimation = (\n  win: Window & typeof globalThis,\n  animation: Animation,\n): boolean =>\n  typeof win.CSSAnimation === 'function' &&\n  animation instanceof win.CSSAnimation;\n\nexport const isCssTransition = (\n  win: Window & typeof globalThis,\n  animation: Animation,\n): boolean =>\n  typeof win.CSSTransition === 'function' &&\n  animation instanceof win.CSSTransition;\n\n// Whether the element is animating, which tells a passing `opacity: 0` (the\n// start of a fade-in, so measure it) from a lasting one (a closed overlay, so\n// skip it). Transitions count too: a measurement pass doesn't always freeze\n// them, so a fade-in can read `opacity: 0` with a transition running. Without\n// `getAnimations()` (jsdom, old browsers) this is false, which under-measures\n// a fading-in overlay rather than counting a closed one.\nexport const hasActiveAnimation = (el: HTMLElement): boolean =>\n  typeof el.getAnimations === 'function' &&\n  el.getAnimations().some(animation => isAnimationActive(animation.playState));\n\n// An animation that repeats forever never resolves `finished`, so it gets no\n// handler. It's always animating, so `hasActiveAnimation` keeps it measured\n// anyway.\nexport const neverFinishes = (animation: Animation): boolean => {\n  const timing = animation.effect?.getComputedTiming();\n\n  return timing?.iterations === Infinity || timing?.duration === Infinity;\n};\n","// Rewrites viewport units to container units for `autoHeight` (#132). The\n// iframe measures its content against a fixed-height size container\n// (`html { container-type: size; height: <probe>px }`), but a size container\n// doesn't change what `vh` resolves against, so `vh`, `svh`, `lvh`, `dvh`,\n// `vmin` and `vmax` become `cqh`, `cqmin` and `cqmax`. `vw` and `vi` are left\n// alone: they depend on width, which the measurement doesn't touch.\nconst UNIT_MAP: Record<string, string> = {\n  vh: 'cqh',\n  svh: 'cqh',\n  lvh: 'cqh',\n  dvh: 'cqh',\n  vmin: 'cqmin',\n  vmax: 'cqmax',\n};\n\n// Longest-unit-first so `svh`/`lvh`/`dvh` aren't shadowed by a shorter\n// alternative matching a prefix of them first.\nconst UNITS_PATTERN = Object.keys(UNIT_MAP)\n  .sort((a, b) => b.length - a.length)\n  .join('|');\n\n// A CSS dimension token: optional sign, then digits with an optional\n// fractional part on either side of the decimal point (`100`, `50.5`,\n// `-10`, `.5` all match; a bare `-` or `.` alone does not).\nconst NUMBER_PATTERN = '-?(?:\\\\d+\\\\.?\\\\d*|\\\\.\\\\d+)';\n\n// The number must not follow a letter, digit, `_`, `.` or `-`, so\n// `url(a5vh.png)`, `.a5vh{}` and `.hero-100vh{}` stay as they are: those\n// digits belong to a name. A real negative value (`margin-top: -10vh`) still\n// matches, since a space comes before its `-`. `--my-vh` never matches:\n// there's no number before `vh`.\nconst VIEWPORT_UNIT_RE = new RegExp(\n  `(?<![\\\\w.-])(${NUMBER_PATTERN})(${UNITS_PATTERN})(?![a-zA-Z0-9_-])`,\n  'gi',\n);\n\n// Rewrites `vh`, `svh`, `lvh`, `dvh`, `vmin` and `vmax` to `cqh`, `cqmin` and\n// `cqmax` wherever they appear as a dimension, including inside `calc()` and\n// `var()` fallbacks. `vw` stays (see `UNIT_MAP`). A plain text replacement,\n// so a value in a CSS string such as `content: \"100vh\"` is rewritten too,\n// which doesn't affect layout.\nexport const convertViewportUnits = (css: string): string =>\n  css.replace(\n    VIEWPORT_UNIT_RE,\n    (_match, number: string, unit: string) =>\n      number + UNIT_MAP[unit.toLowerCase()],\n  );\n\n// Rewrites viewport units in the two places `convertViewportUnits` doesn't\n// see: inline `style` attributes (which panel edits produce) and `<style>`\n// elements the preview renders itself. Without this, their `vh` would\n// resolve against the iframe's own height again (#132). Call it from\n// `updateHeight` after the container style is applied, before reading any\n// height.\n//\n// Idempotent: converted values no longer match the selectors, and a node is\n// written only when its text changes. A write would trigger the\n// MutationObserver in `iframe.tsx` again and loop.\nexport const rewriteInlineViewportUnits = (root: HTMLElement): void => {\n  // `vh` as a substring already covers `svh`/`lvh`/`dvh`; `vmin`/`vmax` need\n  // their own terms. Case-insensitive so `100VH` inline is caught too.\n  const inlineTargets = root.querySelectorAll<HTMLElement>(\n    '[style*=\"vh\" i], [style*=\"vmin\" i], [style*=\"vmax\" i]',\n  );\n\n  inlineTargets.forEach(el => {\n    const current = el.getAttribute('style');\n\n    if (current == null) {\n      return;\n    }\n\n    const converted = convertViewportUnits(current);\n\n    if (converted !== current) {\n      el.setAttribute('style', converted);\n    }\n  });\n\n  root.querySelectorAll<HTMLStyleElement>('style').forEach(styleEl => {\n    const current = styleEl.textContent;\n\n    if (!current) {\n      return;\n    }\n\n    const converted = convertViewportUnits(current);\n\n    if (converted !== current) {\n      styleEl.textContent = converted;\n    }\n  });\n};\n","import { rewriteInlineViewportUnits } from '../viewport-units';\nimport { hasActiveAnimation } from './animations';\nimport {\n  FALLBACK_PROBE_HEIGHT,\n  computeProbeHeight,\n  isVisuallyHidden,\n  positionedElementBottom,\n  verticalInsets,\n} from './measure';\n\n// The style that makes `<html>` a size container, found again by this id.\n// Scoped to `html`, so it only affects how `cq*` units resolve.\nexport const CONTAINER_STYLE_ID = 'autoheight-container';\n\n// A style that is off (`media=\"not all\"`) except while a measurement runs.\n// It guards against two things:\n//\n// - Transitions: a transition on what the measurement changes would animate\n//   the new probe height, and the read would catch a value part-way there.\n//   Only on a pass that changes the probe height (`freezeTransitions`).\n// - Scrollbars: a new probe height can show or hide a scrollbar for that\n//   pass, which narrows the content where scrollbars take space (Windows)\n//   and changes the height. Only the scrollbar is hidden; scrolling still\n//   works.\n//\n// One element that is never added or removed, so toggling it doesn't trigger\n// the MutationObserver that watches the content.\nconst MEASUREMENT_OVERRIDE_STYLE_ID = 'autoheight-measurement-overrides';\n\nexport const SCROLLBAR_OVERRIDE_RULES = [\n  'html, body { scrollbar-width: none !important; }',\n  'html::-webkit-scrollbar, body::-webkit-scrollbar { display: none !important; }',\n];\n\nconst FREEZE_TRANSITIONS_RULE =\n  '*, *::before, *::after { transition: none !important; }';\n\n// Measures with the overrides above on. `freezeTransitions` is off unless\n// the pass changes the probe height: `transition: none` cancels a running\n// transition rather than pausing it, and the element jumps to its end state\n// for good. A pass that leaves the probe height alone changes nothing, so it\n// leaves the preview's transitions alone.\nconst withMeasurementOverrides = (\n  doc: Document,\n  freezeTransitions: boolean,\n  measure: () => void,\n) => {\n  let styleEl = doc.getElementById(\n    MEASUREMENT_OVERRIDE_STYLE_ID,\n  ) as HTMLStyleElement | null;\n\n  if (!styleEl) {\n    styleEl = doc.createElement('style');\n    styleEl.id = MEASUREMENT_OVERRIDE_STYLE_ID;\n    styleEl.media = 'not all';\n    doc.head?.appendChild(styleEl);\n  }\n\n  const text = (\n    freezeTransitions\n      ? [FREEZE_TRANSITIONS_RULE, ...SCROLLBAR_OVERRIDE_RULES]\n      : SCROLLBAR_OVERRIDE_RULES\n  ).join('\\n');\n\n  if (styleEl.textContent !== text) {\n    styleEl.textContent = text;\n  }\n\n  styleEl.media = 'all';\n  measure();\n  styleEl.media = 'not all';\n};\n\n// Hides the iframe document's scrollbar while `autoHeight` sizes it.\n// Rounding can leave the document a fraction taller than the iframe, which\n// would draw a scrollbar in every section. Unlike the measurement override,\n// this stays on. Scrolling still works if the content ever outgrows it.\nexport const HIDE_SCROLLBAR_STYLE_ID = 'autoheight-hide-scrollbar';\n\n// Makes `<html>` a size container with a fixed height, `probeHeight`, the\n// scroll container's available height. Viewport units are rewritten to `cq*`\n// units (`convertViewportUnits`), so they resolve against this height\n// instead of the iframe's own. Against the iframe's own height, `100vh`\n// content would grow the iframe, which grows the content again, and never\n// settle (#132).\nconst ensureContainerStyle = (doc: Document, probeHeight: number) => {\n  let styleEl = doc.getElementById(\n    CONTAINER_STYLE_ID,\n  ) as HTMLStyleElement | null;\n\n  if (!styleEl) {\n    styleEl = doc.createElement('style');\n    styleEl.id = CONTAINER_STYLE_ID;\n    doc.head?.appendChild(styleEl);\n  }\n\n  const text = `html { container-type: size !important; height: ${probeHeight}px !important; }`;\n\n  // Written only when it differs, so a pass with the same probe height\n  // changes nothing in the document (see `freezeTransitions`).\n  if (styleEl.textContent !== text) {\n    styleEl.textContent = text;\n  }\n};\n\n// The height the preview's `cq*` units resolve against, read from the\n// iframe's scroll container. `null` while the layout isn't ready.\nexport const getProbeHeight = (\n  iframe: HTMLIFrameElement,\n  win: Window,\n): number | null => {\n  const scrollParent = iframe.closest<HTMLElement>('[data-frame-container]');\n\n  if (!scrollParent) {\n    // No scroll container (`Frame` used without `Live.Dnd`): use a fixed\n    // default. See `FALLBACK_PROBE_HEIGHT`.\n    return FALLBACK_PROBE_HEIGHT;\n  }\n\n  // From the iframe up to the scroll container: the iframe's and each\n  // wrapper's margin, border and padding take space, and the scroll container\n  // adds only its padding, since `clientHeight` leaves out its border and\n  // margin (#440).\n  const scrollParentStyle = win.getComputedStyle(scrollParent);\n  let wrapperInsets =\n    (parseFloat(scrollParentStyle.paddingTop) || 0) +\n    (parseFloat(scrollParentStyle.paddingBottom) || 0);\n  let node: HTMLElement | null = iframe;\n\n  while (node && node !== scrollParent) {\n    wrapperInsets += verticalInsets(win.getComputedStyle(node));\n    node = node.parentElement;\n  }\n\n  return computeProbeHeight(scrollParent.clientHeight, wrapperInsets);\n};\n\n// The height of the preview's content with the iframe sized to\n// `probeHeight`: the mount node's `scrollHeight`, or the bottom edge of a\n// fixed or absolute element if that reaches further. Runs inside the\n// measurement overrides, and writes the container style and the rewritten\n// viewport units into the document.\nexport const measureContentHeight = (\n  mountNode: HTMLElement,\n  doc: Document,\n  win: Window,\n  probeHeight: number,\n  freezeTransitions: boolean,\n): number => {\n  let contentHeight = 0;\n\n  withMeasurementOverrides(doc, freezeTransitions, () => {\n    ensureContainerStyle(doc, probeHeight);\n\n    // Rewrite viewport units in inline `style` attributes and in-preview\n    // `<style>` tags, which the container style can't reach, so they resolve\n    // against the probe height too. After `ensureContainerStyle` and before the\n    // reads below. It's idempotent, so the observer pass its own rewrites trigger\n    // changes nothing.\n    rewriteInlineViewportUnits(mountNode);\n\n    // No need to fold the iframe to 0px first: `cq*` content is sized against\n    // the fixed probe height, so a direct read is stable (#132).\n    contentHeight = mountNode.scrollHeight;\n\n    // Every descendant, so an overlay nested deep in the tree counts too.\n    const descendants = mountNode.querySelectorAll<HTMLElement>('*');\n\n    descendants.forEach(el => {\n      const style = win.getComputedStyle(el);\n\n      // `visibility: hidden` and `opacity: 0` elements, such as a closed bottom\n      // sheet, still have an `offsetHeight`, so they're skipped here\n      // (`display: none` already reads 0). Animations are checked only for a fully\n      // transparent element, to tell a fade-in apart from a hidden one.\n      const isAnimating = style.opacity === '0' && hasActiveAnimation(el);\n\n      if (isVisuallyHidden(style, isAnimating)) {\n        return;\n      }\n\n      if (\n        (style.position === 'fixed' || style.position === 'absolute') &&\n        el.offsetHeight > 0\n      ) {\n        const rect = el.getBoundingClientRect();\n        const bottom = positionedElementBottom(\n          rect.top,\n          rect.bottom,\n          probeHeight,\n        );\n\n        if (bottom !== null) {\n          contentHeight = Math.max(contentHeight, bottom);\n        }\n      }\n    });\n  });\n\n  return contentHeight;\n};\n","import { useCallback, useEffect, useMemo, useRef } from 'react';\nimport type { RefObject } from 'react';\n\nimport {\n  useEventListener,\n  useMutationObserver,\n  useResizeObserver,\n} from '@jbpark/use-hooks';\n\nimport { isCssAnimation, isCssTransition, neverFinishes } from './animations';\nimport {\n  CONTAINER_STYLE_ID,\n  HIDE_SCROLLBAR_STYLE_ID,\n  SCROLLBAR_OVERRIDE_RULES,\n  getProbeHeight,\n  measureContentHeight,\n} from './auto-height';\nimport { isAnimationActive } from './measure';\n\n// Sizes the iframe to its content while `shouldAutoHeight` is on, and\n// re-measures when anything that can change the height does. Also owns the\n// document styles that only `autoHeight` needs. Call it after the hooks that\n// set up the document: the effects below rely on running after them.\nexport const useAutoHeight = (\n  iframeRef: RefObject<HTMLIFrameElement | null>,\n  mountNode: HTMLElement | null,\n  shouldAutoHeight: boolean,\n) => {\n  // Animations that already have a re-measure handler, so a long one gets only\n  // one. Weak, so it never keeps an animation or its element alive.\n  const trackedAnimationsRef = useRef(new WeakSet<Animation>());\n  // Lets those handlers call the current `updateHeight` without it depending\n  // on itself.\n  const updateHeightRef = useRef<(() => void) | null>(null);\n  // The probe height the container style was last built for. A pass that\n  // leaves it unchanged changes nothing, so it can measure without freezing\n  // transitions.\n  const lastProbeHeightRef = useRef<number | undefined>(undefined);\n  // Script animations fire no event when they end, so each gets one\n  // re-measure when its `finished` promise settles. CSS animations and\n  // transitions are skipped: their end events already bubble to the mount node.\n  // A cancelled animation rejects `finished` and snaps the element back, which\n  // also changes the height, so both outcomes re-measure.\n  const trackScriptAnimations = useCallback(\n    (doc: Document, win: Window & typeof globalThis) => {\n      if (typeof doc.getAnimations !== 'function') {\n        return;\n      }\n\n      doc.getAnimations().forEach(animation => {\n        if (\n          trackedAnimationsRef.current.has(animation) ||\n          !isAnimationActive(animation.playState) ||\n          isCssAnimation(win, animation) ||\n          isCssTransition(win, animation) ||\n          neverFinishes(animation)\n        ) {\n          return;\n        }\n\n        trackedAnimationsRef.current.add(animation);\n\n        void animation.finished\n          .catch(() => undefined)\n          .then(() => updateHeightRef.current?.());\n      });\n    },\n    [],\n  );\n\n  // There is no \"skip when `scrollHeight` and the probe height are unchanged\"\n  // check, though setting the iframe's height can trigger the ResizeObserver\n  // again. Opening or closing a fixed or absolute overlay often leaves\n  // `scrollHeight` unchanged, so such a check would skip exactly the updates\n  // the full-subtree walk is for.\n  const updateHeight = useCallback(() => {\n    if (!shouldAutoHeight || !mountNode || !iframeRef.current) {\n      return;\n    }\n\n    const iframe = iframeRef.current;\n    const doc = iframe.contentDocument;\n    const win = doc?.defaultView;\n\n    if (!doc || !win) {\n      return;\n    }\n\n    const probeHeight = getProbeHeight(iframe, win);\n\n    if (probeHeight === null) {\n      // Layout isn't ready yet: skip this pass. The observers call this again\n      // once it settles.\n      return;\n    }\n\n    // Only the first pass and a pass that moves the probe height change the\n    // container, so only they freeze transitions.\n    const freezeTransitions = probeHeight !== lastProbeHeightRef.current;\n\n    lastProbeHeightRef.current = probeHeight;\n\n    // Sizes the iframe's viewport to the probe height for the reads below, so\n    // a fixed element's percentage `height` or `top` resolves against what the\n    // section shows, not against the iframe's current height, which is itself\n    // what is being measured (#565). The final height replaces it before the\n    // next paint.\n    const previousHeight = iframe.style.height;\n\n    iframe.style.height = `${probeHeight}px`;\n\n    const contentHeight = measureContentHeight(\n      mountNode,\n      doc,\n      win,\n      probeHeight,\n      freezeTransitions,\n    );\n\n    iframe.style.height =\n      contentHeight > 0 ? `${Math.ceil(contentHeight)}px` : previousHeight;\n\n    // After the measurement window, which can cancel transitions, so this sees\n    // the document's real animations.\n    trackScriptAnimations(doc, win);\n  }, [iframeRef, shouldAutoHeight, mountNode, trackScriptAnimations]);\n\n  useEffect(() => {\n    updateHeightRef.current = updateHeight;\n  }, [updateHeight]);\n\n  // Removes the container style when `autoHeight` turns off or a height is\n  // given, so `cq*` content goes back to sizing against the viewport.\n  useEffect(() => {\n    if (shouldAutoHeight) {\n      return;\n    }\n\n    iframeRef.current?.contentDocument\n      ?.getElementById(CONTAINER_STYLE_ID)\n      ?.remove();\n  }, [iframeRef, shouldAutoHeight]);\n\n  // A fixed-height iframe scrolls its own document. A copied host\n  // `body { overflow: hidden }` would stop that, so an inline value overrides\n  // it. With `autoHeight` there's nothing to scroll, so the body is left\n  // alone.\n  useEffect(() => {\n    const body = iframeRef.current?.contentDocument?.body;\n\n    if (!body || !mountNode) {\n      return;\n    }\n\n    if (shouldAutoHeight) {\n      body.style.removeProperty('overflow-y');\n    } else {\n      body.style.setProperty('overflow-y', 'auto');\n    }\n  }, [iframeRef, shouldAutoHeight, mountNode]);\n\n  // Depends on `mountNode` so it runs again once the iframe's document\n  // exists.\n  useEffect(() => {\n    const doc = iframeRef.current?.contentDocument;\n\n    if (!doc?.head) {\n      return;\n    }\n\n    const existing = doc.getElementById(HIDE_SCROLLBAR_STYLE_ID);\n\n    if (!shouldAutoHeight) {\n      existing?.remove();\n      return;\n    }\n\n    if (existing) {\n      return;\n    }\n\n    const styleEl = doc.createElement('style');\n    styleEl.id = HIDE_SCROLLBAR_STYLE_ID;\n    styleEl.textContent = SCROLLBAR_OVERRIDE_RULES.join('\\n');\n    doc.head.appendChild(styleEl);\n  }, [iframeRef, shouldAutoHeight, mountNode]);\n\n  useEffect(() => {\n    updateHeight();\n  }, [updateHeight]);\n\n  const [resizeRef, resizeSize] = useResizeObserver<HTMLElement>();\n\n  // Attached by hand, since `mountNode` is created by the portal, not\n  // rendered here. Only used as a trigger: `updateHeight`'s own walk measures\n  // more accurately than the mount node's size.\n  useEffect(() => {\n    if (!shouldAutoHeight || !mountNode) {\n      return;\n    }\n\n    resizeRef(mountNode);\n    return () => resizeRef(null);\n  }, [shouldAutoHeight, mountNode, resizeRef]);\n\n  // Runs on each size the resize observer reports. `updateHeight` stays out\n  // of the deps: the effect above already runs it whenever it changes.\n  useEffect(() => {\n    updateHeight();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [resizeSize]);\n\n  useMutationObserver(mountNode, updateHeight, {\n    enabled: shouldAutoHeight,\n    childList: true,\n    subtree: true,\n    attributes: true,\n    characterData: true,\n  });\n\n  // Re-measure when an animation or transition ends or is cancelled, which\n  // neither observer sees. A fixed or absolute element read part-way through a\n  // fade would otherwise keep its height until something else changed (#374).\n  // All four events bubble, so one listener each on the mount node covers\n  // every descendant.\n  //\n  // The mount node is wrapped in a ref that changes only with the node, and\n  // `enabled` waits until it exists.\n  const mountNodeRef = useMemo(() => ({ current: mountNode }), [mountNode]);\n  const settleListenerEnabled = shouldAutoHeight && mountNode !== null;\n\n  useEventListener('animationend', updateHeight, {\n    target: mountNodeRef,\n    enabled: settleListenerEnabled,\n  });\n\n  useEventListener('animationcancel', updateHeight, {\n    target: mountNodeRef,\n    enabled: settleListenerEnabled,\n  });\n\n  useEventListener('transitionend', updateHeight, {\n    target: mountNodeRef,\n    enabled: settleListenerEnabled,\n  });\n\n  useEventListener('transitioncancel', updateHeight, {\n    target: mountNodeRef,\n    enabled: settleListenerEnabled,\n  });\n};\n","import { convertViewportUnits } from '../viewport-units';\n\n// How many `<style>` and `<link>` elements the last sync left in the\n// document, so a shorter list can remove the extras.\nexport interface InjectedCounts {\n  styles: number;\n  stylesheets: number;\n}\n\n// Gives each value its own element in the head, found again by\n// `${idPrefix}${index}`, and removes the elements a shorter list leaves\n// behind.\nconst syncInjectedElements = <T extends HTMLElement>(\n  doc: Document,\n  idPrefix: string,\n  values: string[],\n  previousCount: number,\n  create: () => T,\n  update: (el: T, value: string) => void,\n) => {\n  values.forEach((value, index) => {\n    const id = `${idPrefix}${index}`;\n    let el = doc.getElementById(id) as T | null;\n\n    if (!el) {\n      el = create();\n      el.id = id;\n      doc.head.appendChild(el);\n    }\n\n    update(el, value);\n  });\n\n  for (let index = values.length; index < previousCount; index++) {\n    doc.getElementById(`${idPrefix}${index}`)?.remove();\n  }\n};\n\n// Writes `styles` (CSS text) and `stylesheets` (URLs) into the document's\n// head and returns the counts for the next call. Writes only what differs.\nexport const syncInjectedAssets = (\n  doc: Document,\n  styles: string[],\n  stylesheets: string[],\n  previous: InjectedCounts,\n): InjectedCounts => {\n  syncInjectedElements(\n    doc,\n    'injected-style-',\n    styles,\n    previous.styles,\n    () => doc.createElement('style'),\n    (styleEl, css) => {\n      // The main source of `vh` units in a preview: compiled component CSS,\n      // such as Tailwind's `h-screen`. See `ensureContainerStyle` in\n      // `auto-height.ts` for why they're converted.\n      const convertedCss = convertViewportUnits(css);\n\n      if (styleEl.textContent !== convertedCss) {\n        styleEl.textContent = convertedCss;\n      }\n    },\n  );\n\n  syncInjectedElements(\n    doc,\n    'injected-stylesheet-',\n    stylesheets,\n    previous.stylesheets,\n    () => {\n      const linkEl = doc.createElement('link');\n\n      linkEl.rel = 'stylesheet';\n\n      return linkEl;\n    },\n    (linkEl, href) => {\n      if (linkEl.href !== href) {\n        linkEl.href = href;\n      }\n    },\n  );\n\n  return { styles: styles.length, stylesheets: stylesheets.length };\n};\n","const SYNCED_STYLE_ATTR = 'data-live-editor-synced-style';\n\ntype SourceStyle = HTMLLinkElement | HTMLStyleElement;\ntype SyncedStyle = HTMLLinkElement | HTMLStyleElement;\n\ninterface StyleSyncManager {\n  clones: Map<SourceStyle, SyncedStyle>;\n}\n\nexport const createStyleSyncManager = (): StyleSyncManager => ({\n  clones: new Map(),\n});\n\nconst isDocument = (target: Document | ShadowRoot): target is Document =>\n  target.nodeType === Node.DOCUMENT_NODE;\n\nconst sourceStyles = (document: Document): SourceStyle[] =>\n  Array.from(\n    document.head.querySelectorAll<HTMLLinkElement | HTMLStyleElement>(\n      'link[rel=\"stylesheet\"], style',\n    ),\n  );\n\nconst copyAttributes = (\n  source: SourceStyle,\n  clone: SyncedStyle,\n  transformStyle: (content: string) => string,\n) => {\n  Array.from(clone.attributes).forEach(attribute => {\n    if (\n      attribute.name !== SYNCED_STYLE_ATTR &&\n      !source.hasAttribute(attribute.name)\n    ) {\n      clone.removeAttribute(attribute.name);\n    }\n  });\n\n  Array.from(source.attributes).forEach(attribute => {\n    clone.setAttribute(attribute.name, attribute.value);\n  });\n\n  if (source.tagName === 'LINK' && clone.tagName === 'LINK') {\n    (clone as HTMLLinkElement).disabled = (source as HTMLLinkElement).disabled;\n  }\n\n  clone.textContent =\n    source.tagName === 'STYLE'\n      ? transformStyle(source.textContent || '')\n      : source.textContent;\n};\n\nconst createClone = (\n  source: SourceStyle,\n  target: Document | ShadowRoot,\n  transformStyle: (content: string) => string,\n): SyncedStyle => {\n  const ownerDocument = isDocument(target) ? target : target.ownerDocument;\n  const clone = ownerDocument.createElement(\n    source.tagName.toLowerCase(),\n  ) as SyncedStyle;\n\n  clone.setAttribute(SYNCED_STYLE_ATTR, '');\n  copyAttributes(source, clone, transformStyle);\n\n  return clone;\n};\n\nconst targetContainer = (target: Document | ShadowRoot) =>\n  isDocument(target) ? target.head : target;\n\nconst isSyncedStyle = (node: Node): node is SyncedStyle => {\n  const element = node as Element;\n\n  return (\n    (element.tagName === 'LINK' || element.tagName === 'STYLE') &&\n    element.hasAttribute(SYNCED_STYLE_ATTR)\n  );\n};\n\nconst removeClone = (clone: SyncedStyle) => {\n  clone.remove();\n};\n\n// `anchor`, when given, is an element the synced block has to stay in front\n// of. Without it, a first sync appends the block after whatever the target\n// already holds, so a rule the target added for itself could end up before\n// the host's copies and lose to them on order (#441).\nexport const reconcileStyles = (\n  sourceDocument: Document,\n  target: Document | ShadowRoot,\n  manager: StyleSyncManager,\n  enabled: boolean,\n  transformStyle: (content: string) => string = content => content,\n  anchor: Node | null = null,\n) => {\n  if (!enabled) {\n    manager.clones.forEach(removeClone);\n    manager.clones.clear();\n\n    return;\n  }\n\n  const sources = sourceStyles(sourceDocument);\n  const sourceSet = new Set(sources);\n  const container = targetContainer(target);\n\n  manager.clones.forEach((clone, source) => {\n    if (!sourceSet.has(source)) {\n      removeClone(clone);\n      manager.clones.delete(source);\n    }\n  });\n\n  let previous: SyncedStyle | null = null;\n\n  sources.forEach(source => {\n    let clone = manager.clones.get(source);\n\n    if (!clone) {\n      clone = createClone(source, target, transformStyle);\n      manager.clones.set(source, clone);\n    } else {\n      copyAttributes(source, clone, transformStyle);\n    }\n\n    const nextSibling = previous\n      ? previous.nextSibling\n      : (Array.from(container.childNodes).find(isSyncedStyle) ??\n        (anchor?.parentNode === container ? anchor : null));\n\n    if (clone !== nextSibling) {\n      container.insertBefore(clone, nextSibling);\n    }\n\n    previous = clone;\n  });\n};\n\n// What a root-attribute sync has written onto the target, so a later pass\n// removes exactly that and never what the target set for itself.\ninterface RootAttributeSync {\n  attributes: Set<string>;\n  classes: Set<string>;\n}\n\nexport const createRootAttributeSync = (): RootAttributeSync => ({\n  attributes: new Set(),\n  classes: new Set(),\n});\n\nconst isMirroredAttribute = (name: string) => name.startsWith('data-');\n\n// Mirrors the host `<html>`'s classes and `data-*` attributes onto an iframe's\n// `<html>`. A theme is usually switched there (`.dark`, `data-theme=\"dark\"`),\n// and copying the host's stylesheets alone doesn't help an iframe: its\n// selectors look for those on an ancestor, and the iframe document has a root\n// of its own. A shadow root needs none of this, since it sits under the host's\n// `<html>` already (#497).\n//\n// Classes are synced token by token, so a class the preview put on its own\n// root survives. Other attributes (`style`, `lang`, `dir`, ...) are left\n// alone: the frame relies on its own root for sizing and layout.\nexport const reconcileRootAttributes = (\n  source: Element,\n  target: Element,\n  sync: RootAttributeSync,\n  enabled: boolean,\n) => {\n  const attributes = enabled\n    ? Array.from(source.attributes).filter(({ name }) =>\n        isMirroredAttribute(name),\n      )\n    : [];\n  const classes = enabled ? Array.from(source.classList) : [];\n  const attributeNames = new Set(attributes.map(({ name }) => name));\n  const classNames = new Set(classes);\n\n  sync.attributes.forEach(name => {\n    if (!attributeNames.has(name)) {\n      target.removeAttribute(name);\n    }\n  });\n  attributes.forEach(({ name, value }) => {\n    if (target.getAttribute(name) !== value) {\n      target.setAttribute(name, value);\n    }\n  });\n\n  sync.classes.forEach(name => {\n    if (!classNames.has(name)) {\n      target.classList.remove(name);\n    }\n  });\n  classes.forEach(name => target.classList.add(name));\n\n  if (!target.classList.length) {\n    target.removeAttribute('class');\n  }\n\n  sync.attributes = attributeNames;\n  sync.classes = classNames;\n};\n","import { useCallback, useRef } from 'react';\nimport type { RefObject } from 'react';\n\nimport { useDebouncedCallback, useMutationObserver } from '@jbpark/use-hooks';\n\nimport { CONTAINER_STYLE_ID } from '../auto-height/auto-height';\nimport {\n  createRootAttributeSync,\n  createStyleSyncManager,\n  reconcileRootAttributes,\n  reconcileStyles,\n} from '../style-sync';\nimport { convertViewportUnits } from '../viewport-units';\n\n// Copies the host page's styles and root attributes into the iframe while\n// `syncStyle` is on, and again whenever the host changes them. Returns\n// `applyStyle`, which the document setup calls once the iframe's document\n// exists.\nexport const useHostStyleSync = (\n  iframeRef: RefObject<HTMLIFrameElement | null>,\n  syncStyle: boolean,\n) => {\n  const styleManagerRef = useRef(createStyleSyncManager());\n  const rootAttributeSyncRef = useRef(createRootAttributeSync());\n\n  const applyStyle = useCallback(() => {\n    const doc = iframeRef.current?.contentDocument;\n\n    if (!doc) {\n      return;\n    }\n\n    // The container style goes after every copied host style. Both use\n    // `!important`, so a host `html { height: 100% !important }` copied in after\n    // it would win and fold the frame to a pixel (#441).\n    reconcileStyles(\n      document,\n      doc,\n      styleManagerRef.current,\n      syncStyle,\n      convertViewportUnits,\n      doc.getElementById(CONTAINER_STYLE_ID),\n    );\n    // The host's theme class or attribute, which the copied styles select on\n    // (#497).\n    reconcileRootAttributes(\n      document.documentElement,\n      doc.documentElement,\n      rootAttributeSyncRef.current,\n      syncStyle,\n    );\n  }, [iframeRef, syncStyle]);\n\n  // Debounced, since a stylesheet swap fires several head mutations in a\n  // row.\n  const debouncedApplyStyle = useDebouncedCallback(applyStyle, {\n    delay: 50,\n    autoInvoke: false,\n  });\n\n  useMutationObserver(document.head, debouncedApplyStyle, {\n    enabled: syncStyle,\n    childList: true,\n    subtree: true,\n    attributes: true,\n  });\n\n  // A theme switch only changes the host's `<html>` attributes, which the head\n  // observer above doesn't see.\n  useMutationObserver(document.documentElement, debouncedApplyStyle, {\n    enabled: syncStyle,\n    attributes: true,\n  });\n\n  return applyStyle;\n};\n","import { useEffect, useRef, useState } from 'react';\nimport type { RefObject } from 'react';\n\nimport { withScriptBlobs } from '~/utils/scripts';\n\n// Adds each script to the document's head as a `<script>` that loads from a\n// blob URL. Not awaited: a script that fails to load becomes an unhandled\n// rejection on the host page.\nconst injectScripts = (doc: Document, srcs: string[]) => {\n  void withScriptBlobs(srcs, blobUrls => {\n    if (!doc.head) {\n      return;\n    }\n\n    const fragment = doc.createDocumentFragment();\n    blobUrls.forEach(blobUrl => {\n      const script = doc.createElement('script');\n      script.src = blobUrl;\n      fragment.appendChild(script);\n    });\n    doc.head.appendChild(fragment);\n  });\n};\n\ninterface Options {\n  scripts: string[];\n  onLoaded?: () => void;\n  applyStyle: () => void;\n}\n\n// Prepares the iframe's document each time it loads: creates the mount node,\n// applies the host styles, injects the scripts not yet in it and calls\n// `onLoaded`. Returns the mount node, `null` until the first load.\nexport const useIframeDocument = (\n  iframeRef: RefObject<HTMLIFrameElement | null>,\n  { scripts, onLoaded, applyStyle }: Options,\n) => {\n  const [mountNode, setMountNode] = useState<HTMLElement | null>(null);\n  // The script srcs already added to this iframe's document, so a src added\n  // to `scripts` later still loads.\n  const loadedScriptsRef = useRef<Set<string>>(new Set());\n  // The document those scripts went into. Moving the iframe, as reordering\n  // canvas sections does, reloads it with a new document that has none\n  // (#507).\n  const loadedScriptsDocRef = useRef<Document | null>(null);\n\n  useEffect(() => {\n    const $iframe = iframeRef.current;\n\n    if (!$iframe) {\n      return;\n    }\n\n    const onLoad = () => {\n      const doc = $iframe.contentDocument;\n\n      if (!doc) {\n        return;\n      }\n\n      if (loadedScriptsDocRef.current !== doc) {\n        loadedScriptsDocRef.current = doc;\n        loadedScriptsRef.current = new Set();\n      }\n\n      doc.body.style.overflowX = 'hidden';\n      doc.body.style.margin = '0';\n\n      let node = doc.getElementById('iframe-root');\n\n      if (!node) {\n        node = doc.createElement('div');\n        node.id = 'iframe-root';\n        doc.body.appendChild(node);\n      }\n\n      setMountNode(node);\n\n      applyStyle();\n\n      const pendingScripts = scripts.filter(\n        src => !loadedScriptsRef.current.has(src),\n      );\n\n      if (pendingScripts.length) {\n        pendingScripts.forEach(src => loadedScriptsRef.current.add(src));\n        injectScripts(doc, pendingScripts);\n      }\n\n      onLoaded?.();\n    };\n\n    $iframe.addEventListener('load', onLoad);\n\n    if ($iframe.contentDocument?.readyState === 'complete') {\n      onLoad();\n    }\n\n    return () => {\n      $iframe.removeEventListener('load', onLoad);\n    };\n  }, [iframeRef, scripts, onLoaded, applyStyle]);\n\n  return mountNode;\n};\n","import { useEffect, useRef } from 'react';\nimport type { ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { useAutoHeight } from '../auto-height/use-auto-height';\nimport { type InjectedCounts, syncInjectedAssets } from './inject-assets';\nimport { useHostStyleSync } from './use-host-style-sync';\nimport { useIframeDocument } from './use-iframe-document';\n\nexport interface Props {\n  title?: string;\n  /** Forwarded to the iframe's `sandbox` attribute for DOM/CSS isolation only — not a security boundary, since preview code executes in the host window's realm (see `compileModule` in `~/utils`). */\n  sandbox?: string;\n  style?: React.CSSProperties;\n  scripts?: string[];\n  styles?: string[];\n  stylesheets?: string[];\n  autoHeight?: boolean;\n  syncStyle?: boolean;\n  children: (container: HTMLElement) => ReactNode;\n  onLoaded?: () => void;\n}\n\nconst EMPTY_STRING_ARRAY: string[] = [];\n\nconst IFrame = ({\n  title = 'Live Preview',\n  sandbox,\n  style = {},\n  scripts = EMPTY_STRING_ARRAY,\n  styles = EMPTY_STRING_ARRAY,\n  stylesheets = EMPTY_STRING_ARRAY,\n  autoHeight = false,\n  syncStyle = false,\n  children,\n  onLoaded,\n  ...props\n}: Props) => {\n  const iframeRef = useRef<HTMLIFrameElement>(null);\n  const shouldAutoHeight = autoHeight && style.height == null;\n\n  const applyStyle = useHostStyleSync(iframeRef, syncStyle);\n  const mountNode = useIframeDocument(iframeRef, {\n    scripts,\n    onLoaded,\n    applyStyle,\n  });\n  const injectedCountsRef = useRef<InjectedCounts>({\n    styles: 0,\n    stylesheets: 0,\n  });\n\n  useEffect(() => {\n    const doc = iframeRef.current?.contentDocument;\n\n    if (!doc?.head) {\n      return;\n    }\n\n    injectedCountsRef.current = syncInjectedAssets(\n      doc,\n      styles,\n      stylesheets,\n      injectedCountsRef.current,\n    );\n  }, [styles, stylesheets]);\n\n  useAutoHeight(iframeRef, mountNode, shouldAutoHeight);\n\n  const content = mountNode\n    ? createPortal(children(mountNode), mountNode)\n    : null;\n\n  return (\n    <iframe\n      ref={iframeRef}\n      style={{\n        // An iframe is inline by default and leaves a gap below it for text\n        // descenders, which added up across canvas sections (#439).\n        display: 'block',\n        width: '100%',\n        height: '100%',\n        border: 'none',\n        ...style,\n      }}\n      title={title}\n      sandbox={sandbox}\n      {...props}\n    >\n      {content}\n    </iframe>\n  );\n};\n\nexport default IFrame;\n","import { useCallback, useLayoutEffect, useRef, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { useDebouncedCallback, useMutationObserver } from '@jbpark/use-hooks';\n\nimport { createStyleSyncManager, reconcileStyles } from './style-sync';\n\ninterface Props {\n  // Copies the host page's stylesheets and `<style>` tags into the shadow\n  // root, like `iframe.tsx`'s option of the same name. This brings the host's\n  // compiled CSS, its own utilities and theme included. `dynamicTailwind`\n  // covers what the host's build never saw, such as a class typed at runtime.\n  syncStyle?: boolean;\n  // Receives the overlay layer, the `container` to portal a modal or drawer\n  // into so it opens inside the preview.\n  children: (overlayLayer: HTMLElement | null) => ReactNode;\n}\n\nconst OVERLAY_LAYER_ATTR = 'data-live-editor-overlay-layer';\n\n// The layer lets clicks through to the preview under it. What is portaled\n// into it takes them again.\nconst OVERLAY_LAYER_STYLE = `[${OVERLAY_LAYER_ATTR}] > * { pointer-events: auto; }`;\n\n// The render target and the overlay layer in one grid cell, so the layer\n// covers exactly the preview's box. `min-height: 100%` stretches that box to\n// a parent with a set height, such as `Live.Preview`'s, so an overlay isn't\n// squeezed into short content. The wrapper isn't positioned, so it doesn't\n// change what an `absolute` element in the preview is placed against.\n// `isolation` keeps the layer's stacking inside the preview.\nconst createFrameNodes = () => {\n  const wrapper = document.createElement('div');\n\n  wrapper.style.display = 'grid';\n  wrapper.style.gridTemplateColumns = 'minmax(0, 1fr)';\n  wrapper.style.minHeight = '100%';\n  wrapper.style.isolation = 'isolate';\n\n  const renderTarget = document.createElement('div');\n\n  renderTarget.style.gridArea = '1 / 1';\n\n  // `contain: layout` makes the layer the containing block of the fixed\n  // elements inside it, so an overlay covers the preview and not the page.\n  const overlayLayer = document.createElement('div');\n\n  overlayLayer.setAttribute(OVERLAY_LAYER_ATTR, '');\n  overlayLayer.style.gridArea = '1 / 1';\n  overlayLayer.style.zIndex = '1';\n  overlayLayer.style.contain = 'layout';\n  overlayLayer.style.pointerEvents = 'none';\n\n  const style = document.createElement('style');\n\n  style.textContent = OVERLAY_LAYER_STYLE;\n  wrapper.append(style, renderTarget, overlayLayer);\n\n  return { wrapper, renderTarget };\n};\n\n// The overlay layer `createFrameNodes` put next to `renderTarget`.\nconst overlayLayerOf = (renderTarget: HTMLElement) => {\n  const layer = renderTarget.nextElementSibling;\n\n  return layer instanceof HTMLElement && layer.hasAttribute(OVERLAY_LAYER_ATTR)\n    ? layer\n    : null;\n};\n\nconst Shadow = ({ syncStyle = false, children }: Props) => {\n  const hostRef = useRef<HTMLDivElement>(null);\n  const shadowRootRef = useRef<ShadowRoot | null>(null);\n  const renderTargetRef = useRef<HTMLDivElement | null>(null);\n  const [renderTarget, setRenderTarget] = useState<HTMLDivElement | null>(null);\n\n  // Added next to the portal target, not inside it: React owns that subtree\n  // and would remove anything added there.\n  const styleManagerRef = useRef(createStyleSyncManager());\n\n  const applyStyle = useCallback(() => {\n    const shadowRoot = shadowRootRef.current;\n\n    if (!shadowRoot) {\n      return;\n    }\n\n    reconcileStyles(document, shadowRoot, styleManagerRef.current, syncStyle);\n  }, [syncStyle]);\n\n  // Debounced, since a stylesheet swap fires several head mutations in a\n  // row, as in `iframe.tsx`.\n  const debouncedApplyStyle = useDebouncedCallback(applyStyle, {\n    delay: 50,\n    autoInvoke: false,\n  });\n\n  useMutationObserver(document.head, debouncedApplyStyle, {\n    enabled: syncStyle,\n    childList: true,\n    subtree: true,\n    attributes: true,\n  });\n\n  useLayoutEffect(() => {\n    if (!hostRef.current) {\n      return;\n    }\n\n    let shadowRoot = shadowRootRef.current;\n\n    if (!shadowRoot) {\n      shadowRoot =\n        hostRef.current.shadowRoot ||\n        hostRef.current.attachShadow({ mode: 'open' });\n      shadowRootRef.current = shadowRoot;\n    }\n\n    let target = renderTargetRef.current;\n\n    if (!target) {\n      const nodes = createFrameNodes();\n\n      shadowRoot.appendChild(nodes.wrapper);\n      target = nodes.renderTarget;\n      renderTargetRef.current = target;\n      setRenderTarget(target);\n    }\n\n    applyStyle();\n    // `click`, `pointerdown` and `pointerup` already cross the shadow boundary\n    // (`composed: true`), so they aren't dispatched again here, which made\n    // listeners outside see them twice (#92). `event.composedPath()[0]` gives\n    // the element inside.\n  }, [applyStyle]);\n\n  useLayoutEffect(() => {\n    if (renderTargetRef.current && !renderTarget) {\n      setRenderTarget(renderTargetRef.current);\n    }\n  }, [renderTarget]);\n\n  return (\n    <div ref={hostRef} style={{ display: 'contents' }}>\n      {renderTarget &&\n        createPortal(children(overlayLayerOf(renderTarget)), renderTarget)}\n    </div>\n  );\n};\n\nexport default Shadow;\n","import { type ReactNode } from 'react';\n\nimport IFrame, { type Props as IframeProps } from './iframe/iframe';\nimport Shadow from './shadow';\n\nexport interface FrameProps extends Omit<IframeProps, 'children'> {\n  mode?: 'iframe' | 'shadow';\n}\n\ninterface Props extends FrameProps {\n  children: (container: HTMLElement) => ReactNode;\n}\n\nconst Frame = ({ mode, children, ...restProps }: Props) => {\n  if (!mode) {\n    return children(document.body);\n  }\n\n  if (mode === 'shadow') {\n    return (\n      <Shadow syncStyle={restProps.syncStyle}>\n        {container => children(container || document.body)}\n      </Shadow>\n    );\n  }\n\n  return <IFrame {...restProps}>{children}</IFrame>;\n};\n\nexport default Frame;\n","import * as ui from '@jbpark/ui-kit';\nimport * as utils from '@jbpark/ui-kit/utils';\n\n// What every preview can import without the host passing it\n// (`import * as ui from 'ui-kit'`). Kept here, not in `~/utils`, because\n// loading ui-kit reaches its stylesheets, which would make `./utils`\n// unloadable in Node (#372).\nexport const baseModules = {\n  'ui-kit': ui,\n  'ui-kit/utils': utils,\n};\n","import { useMemo } from 'react';\n\nimport { useStableValue } from '@jbpark/use-hooks';\n\nimport { useLiveMessages } from '~/components/context/messages';\nimport type { Module } from '~/types';\nimport { compile } from '~/utils/compile';\n\nimport { baseModules } from './base-modules';\n\n// Compiles code into a component, for `Live.Preview` and each canvas\n// section, so both handle errors the same way (#246). `null` for empty code,\n// so a caller can tell \"nothing to render\" from a failed compile, which\n// comes back as a module with `error`.\nexport const useCompiledModule = (\n  code: string,\n  _modules?: Record<string, unknown>,\n): Module | null => {\n  // An inline `modules` object from `Live.Preview`'s host is new each\n  // render; only a changed entry should recompile (#397).\n  const modules = useStableValue(_modules);\n  const { unknown } = useLiveMessages().errors;\n\n  const mergedModules = useMemo(\n    () => ({ ...baseModules, ...modules }),\n    [modules],\n  );\n\n  return useMemo(() => {\n    if (!code) {\n      return null;\n    }\n\n    try {\n      return compile(code, mergedModules);\n    } catch (e) {\n      return {\n        exports: {},\n        error: e instanceof Error ? e.message : unknown,\n      };\n    }\n  }, [code, mergedModules, unknown]);\n};\n","import { useCallback, useEffect, useState } from 'react';\n\n// Compiles the Tailwind classes in the rendered DOM into CSS for a `<style>`\n// tag, for `Live.Preview` and each canvas section. Reading the DOM, not the\n// source, finds the classes imported components add too.\n//\n// The element is held in state through a callback ref: in shadow mode it\n// appears a commit later, and an effect reading a plain ref would miss it.\n// The compiler and theme load on first use, since they're large (#332).\nexport const useDynamicTailwind = (code: string, enabled: boolean) => {\n  const [css, setCss] = useState('');\n  const [element, setElement] = useState<HTMLDivElement | null>(null);\n\n  const ref = useCallback((node: HTMLDivElement | null) => {\n    setElement(node);\n  }, []);\n\n  useEffect(() => {\n    if (!code || !enabled || !element) {\n      return;\n    }\n\n    let cancelled = false;\n\n    // Not awaited: a failure to generate the CSS becomes an unhandled\n    // rejection on the host page.\n    void import('~/utils/tailwind')\n      .then(({ generateTailwindCSSFromDOM }) =>\n        generateTailwindCSSFromDOM(element),\n      )\n      .then(next => {\n        if (!cancelled) {\n          setCss(next);\n        }\n      });\n\n    return () => {\n      cancelled = true;\n    };\n  }, [code, enabled, element]);\n\n  return { ref, css };\n};\n"],"mappings":"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"}