@jbpark/live-editor 5.0.0 → 6.0.0

package/dist/edit-options-C_r9aCz4.d.ts

@@ -0,0 +1,100 @@
+import { a as BindingOption, d as BindingType, f as BindingWidget, l as BindingRenderMap, p as DataAttrNode } from "./types-Czps1Txy.js";
+import { r as UpdateFailure } from "./update-2PJbwoS8.js";
+//#region src/components/dnd/panel-binding.d.ts
+interface PanelNodeChange {
+  (params: {
+    id: string;
+    label: string;
+    property: string;
+    value: unknown;
+  }): void;
+}
+interface PanelNodesChange {
+  (changes: Parameters<PanelNodeChange>[0][]): void;
+}
+interface PanelBinding {
+  id: string;
+  label: string;
+  property: string;
+  type?: BindingType;
+  widget?: BindingWidget;
+  options?: BindingOption[];
+  render?: BindingRenderMap;
+  min?: number;
+  max?: number;
+  pattern?: string;
+  patternMessage?: string;
+  required?: boolean;
+  minLength?: number;
+  maxLength?: number;
+  step?: number;
+  minItems?: number;
+  maxItems?: number;
+  minDate?: string;
+  maxDate?: string;
+  protocols?: string[];
+  meta?: Record<string, unknown>;
+  value: unknown;
+  rawValue: string;
+  canEditValue?: boolean;
+  present?: boolean;
+  element?: PanelBindingElement;
+  onChange: (value: unknown) => void;
+}
+interface PanelBindingElement {
+  tagName: string;
+  text: string;
+}
+type PanelBindingData = Omit<PanelBinding, 'onChange'>;
+interface PanelBindingSource {
+  id: string;
+  tagName: string;
+  bindings: PanelBindingData[];
+}
+declare const resolvePanelBindings: (node: DataAttrNode) => PanelBindingSource | null;
+declare const withPanelCommit: (bindings: PanelBindingData[], commit: PanelNodeChange | undefined) => PanelBinding[];
+//#endregion
+//#region src/components/dnd/panel/types.d.ts
+interface FieldProps {
+  binding: PanelBinding;
+  onNodeChange?: PanelNodeChange;
+}
+//#endregion
+//#region src/components/dnd/edit-options.d.ts
+type DndEditError = {
+  type: 'update';
+  id: string;
+  label: string;
+  property: string;
+  failure: UpdateFailure | undefined;
+  title: string;
+  description?: string;
+} | {
+  type: 'parse';
+  target: 'section' | 'items';
+  error?: unknown;
+  title: string;
+  description?: string;
+} | {
+  type: 'parse';
+  target: 'document';
+  reason: 'parse-error';
+  error: unknown;
+  title: string;
+  description?: string;
+} | {
+  type: 'parse';
+  target: 'document';
+  reason: 'container-not-found';
+  containerId: string;
+  title: string;
+  description?: string;
+} | {
+  type: 'items';
+  title: string;
+  description?: string;
+};
+type DndRenderField = (props: FieldProps, builtin: React.ReactElement) => React.ReactNode | undefined;
+//#endregion
+export { PanelBindingData as a, PanelNodeChange as c, withPanelCommit as d, PanelBinding as i, PanelNodesChange as l, DndRenderField as n, PanelBindingElement as o, FieldProps as r, PanelBindingSource as s, DndEditError as t, resolvePanelBindings as u };
+//# sourceMappingURL=edit-options-C_r9aCz4.d.ts.map

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-13BDSrQc.js";
+import { a as Props, i as Core, n as EditorRenderData, r as Props$1, t as Editor } from "../index-C93npmTU.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-CKazr4tT.js";
-import { t as Editor } from "../editor-Bty5XzpV.js";
+import { t as Core } from "../core-BNVuH8-l.js";
+import { t as Editor } from "../editor-CvnzrM9J.js";
 export { Core, Editor as default };

package/dist/{editor-Bty5XzpV.js → editor-CvnzrM9J.js}

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

package/dist/{editor-Bty5XzpV.js.map → editor-CvnzrM9J.js.map}

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

package/dist/error/index.d.ts

@@ -1,2 +1,2 @@
-import { i as Guard, o as Props, r as Runtime, s as ErrorBoundary, t as Error } from "../index-kKUjo9lr.js";
+import { i as Guard, o as Props, r as Runtime, s as ErrorBoundary, t as Error } from "../index-DfIvkht8.js";
 export { ErrorBoundary, Guard as ErrorGuard, Runtime as ErrorRuntime, type Props, Error as default };

package/dist/error/index.js

@@ -1,3 +1,3 @@
-import { t as ErrorBoundary } from "../boundary-6_nTsWxP.js";
-import { n as Runtime, r as Guard, t as Error } from "../error-DyYx2NQ2.js";
+import { t as ErrorBoundary } from "../boundary-CySnDUs2.js";
+import { n as Runtime, r as Guard, t as Error } from "../error-CFzvnLCf.js";
 export { ErrorBoundary, Guard as ErrorGuard, Runtime as ErrorRuntime, Error as default };

package/dist/{error-DyYx2NQ2.js → error-CFzvnLCf.js}

@@ -1,6 +1,6 @@
-import { i as useLiveMessages } from "./messages-Bt5WXKTE.js";
+import { i as useLiveMessages } from "./messages-DrINcRdG.js";
 import { r as useError } from "./states-Ci1AvoQ9.js";
-import { n as Error$1, t as ErrorBoundary } from "./boundary-6_nTsWxP.js";
+import { n as Error$1, t as ErrorBoundary } from "./boundary-CySnDUs2.js";
 import { useEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { useEventListener, useLatest } from "@jbpark/use-hooks";
@@ -36,7 +36,7 @@ const Guard = ({ children, onError }) => {
 	if (error) return /* @__PURE__ */ jsx(Error$1, {
 		title: messages.errors.runtime,
 		message: error,
-		className: "m-4",
+		style: { margin: 16 },
 		onReset: () => {
 			setError(null);
 			errorHandled.current = false;
@@ -72,4 +72,4 @@ Error.Guard = Guard;
 //#endregion
 export { Runtime as n, Guard as r, Error as t };
 
-//# sourceMappingURL=error-DyYx2NQ2.js.map
+//# sourceMappingURL=error-CFzvnLCf.js.map

package/dist/error-CFzvnLCf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"error-CFzvnLCf.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        style={{ margin: 16 }}\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,OAAO,EAAE,QAAQ,GAAG;EACpB,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/{index-tAiuHZsC.d.ts → index-BZpZwrxT.d.ts}

@@ -1,4 +1,4 @@
-import { n as LiveMessagesInput } from "./messages-Yb3b7YJt.js";
+import { n as LiveMessagesInput } from "./messages-BpN3QIhj.js";
 import React from "react";
 //#region src/components/context/context.d.ts
 interface Props {
@@ -8,4 +8,4 @@ interface Props {
 declare const ContextProvider: ({ children, messages }: Props) => React.JSX.Element;
 //#endregion
 export { Props as n, ContextProvider as t };
-//# sourceMappingURL=index-tAiuHZsC.d.ts.map
+//# sourceMappingURL=index-BZpZwrxT.d.ts.map

package/dist/{index-13BDSrQc.d.ts → index-C93npmTU.d.ts}

@@ -1,6 +1,4 @@
-import { ComponentProps } from "react";
-import CodeEditor from "@jbpark/ui-kit/CodeEditor";
-import { Extension } from "@uiw/react-codemirror";
+import { Extension, ReactCodeMirrorProps } from "@uiw/react-codemirror";
 //#region src/components/editor/core.d.ts
 interface Props$1 {
   value: string;
@@ -13,8 +11,8 @@ interface Props$1 {
   onChange?: (value: string) => void;
   onSave?: (value: string) => void;
   onError?: (error: string | null) => void;
-  onCreateEditor?: ComponentProps<typeof CodeEditor>['onCreateEditor'];
-  onUpdate?: ComponentProps<typeof CodeEditor>['onUpdate'];
+  onCreateEditor?: ReactCodeMirrorProps['onCreateEditor'];
+  onUpdate?: ReactCodeMirrorProps['onUpdate'];
 }
 declare const Core: ({ value, theme, height, className, prettierOptions, fragment, raw, onChange, onSave, onError, ...props }: Props$1) => import("react").JSX.Element;
 //#endregion
@@ -39,4 +37,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-13BDSrQc.d.ts.map
+//# sourceMappingURL=index-C93npmTU.d.ts.map

package/dist/{index-Cl79M7ZJ.d.ts → index-CqsS207F.d.ts}

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

package/dist/{index-0VB5C3Jk.d.ts → index-DQcdHg_V.d.ts}

@@ -1,7 +1,7 @@
-import { a as BindingOption, d as BindingType, f as BindingWidget, i as BindingKeyMap, l as BindingRenderMap, o as BindingOptions, p as DataAttrNode, s as BindingRegistry } from "./types-Czps1Txy.js";
+import { i as BindingKeyMap, l as BindingRenderMap, o as BindingOptions, p as DataAttrNode, s as BindingRegistry } from "./types-Czps1Txy.js";
 import { n as Section } from "./index-C8h8TcIl.js";
 import { t as FrameProps } from "./index-92L7F440.js";
-import { r as UpdateFailure } from "./update-2PJbwoS8.js";
+import { c as PanelNodeChange, i as PanelBinding, l as PanelNodesChange, n as DndRenderField, r as FieldProps, t as DndEditError } from "./edit-options-C_r9aCz4.js";
 import { useMultiSelect } from "@jbpark/use-hooks";
 //#region src/components/dnd/canvas/section-fallback-context.d.ts
 interface DndSectionFallbackArgs {
@@ -11,102 +11,6 @@ interface DndSectionFallbackArgs {
 }
 type DndRenderSectionFallback = (args: DndSectionFallbackArgs) => React.ReactNode | undefined;
 //#endregion
-//#region src/components/dnd/panel-binding.d.ts
-interface PanelNodeChange {
-  (params: {
-    id: string;
-    label: string;
-    property: string;
-    value: unknown;
-  }): void;
-}
-interface PanelNodesChange {
-  (changes: Parameters<PanelNodeChange>[0][]): void;
-}
-interface PanelBinding {
-  id: string;
-  label: string;
-  property: string;
-  type?: BindingType;
-  widget?: BindingWidget;
-  options?: BindingOption[];
-  render?: BindingRenderMap;
-  min?: number;
-  max?: number;
-  pattern?: string;
-  patternMessage?: string;
-  required?: boolean;
-  minLength?: number;
-  maxLength?: number;
-  step?: number;
-  minItems?: number;
-  maxItems?: number;
-  minDate?: string;
-  maxDate?: string;
-  protocols?: string[];
-  meta?: Record<string, unknown>;
-  value: unknown;
-  rawValue: string;
-  canEditValue?: boolean;
-  present?: boolean;
-  element?: PanelBindingElement;
-  onChange: (value: unknown) => void;
-}
-interface PanelBindingElement {
-  tagName: string;
-  text: string;
-}
-type PanelBindingData = Omit<PanelBinding, 'onChange'>;
-interface PanelBindingSource {
-  id: string;
-  tagName: string;
-  bindings: PanelBindingData[];
-}
-declare const resolvePanelBindings: (node: DataAttrNode) => PanelBindingSource | null;
-declare const withPanelCommit: (bindings: PanelBindingData[], commit: PanelNodeChange | undefined) => PanelBinding[];
-//#endregion
-//#region src/components/dnd/panel/types.d.ts
-interface FieldProps {
-  binding: PanelBinding;
-  onNodeChange?: PanelNodeChange;
-}
-//#endregion
-//#region src/components/dnd/edit-options.d.ts
-type DndEditError = {
-  type: 'update';
-  id: string;
-  label: string;
-  property: string;
-  failure: UpdateFailure | undefined;
-  title: string;
-  description?: string;
-} | {
-  type: 'parse';
-  target: 'section' | 'items';
-  error?: unknown;
-  title: string;
-  description?: string;
-} | {
-  type: 'parse';
-  target: 'document';
-  reason: 'parse-error';
-  error: unknown;
-  title: string;
-  description?: string;
-} | {
-  type: 'parse';
-  target: 'document';
-  reason: 'container-not-found';
-  containerId: string;
-  title: string;
-  description?: string;
-} | {
-  type: 'items';
-  title: string;
-  description?: string;
-};
-type DndRenderField = (props: FieldProps, builtin: React.ReactElement) => React.ReactNode | undefined;
-//#endregion
 //#region src/components/dnd/inspector.d.ts
 interface DndNodePick {
   id: string;
@@ -299,5 +203,5 @@ type DndComponent = typeof Dnd$1 & {
 };
 declare const Dnd: DndComponent;
 //#endregion
-export { Panel as A, PanelBinding as B, useDndPalette as C, DndRegionProps as D, DndLayoutProps as E, DndNodePick as F, PanelNodesChange as G, PanelBindingElement as H, useDndInspector as I, DndRenderSectionFallback as J, resolvePanelBindings as K, DndEditError as L, DndPanel as M, Props as N, Layout as O, DndInspector as P, DndRenderField as R, useDndLayout as S, Canvas as T, PanelBindingSource as U, PanelBindingData as V, PanelNodeChange as W, DndSectionFallbackArgs as Y, useDndChildren as _, isStructuralFieldKind as a, DraggableItemProps as b, DndItemsExpansion as c, DndItemsNestedGroup as d, DndItemsOptions as f, DndChildrenOptions as g, DndChildren as h, getFieldKind as i, DndPalette as j, Palette as k, DndItemsItem as l, Field as m, FieldKind as n, DndItems as o, useDndItems as p, withPanelCommit as q, FieldKindBinding as r, DndItemsActions as s, Dnd as t, DndItemsNestedElement as u, DraggableItem as v, useDndPanel as w, DndLayout as x, DraggableItemDragState as y, FieldProps as z };
-//# sourceMappingURL=index-0VB5C3Jk.d.ts.map
+export { Panel as A, useDndPalette as C, DndRegionProps as D, DndLayoutProps as E, DndNodePick as F, useDndInspector as I, DndRenderSectionFallback as L, DndPanel as M, Props as N, Layout as O, DndInspector as P, DndSectionFallbackArgs as R, useDndLayout as S, Canvas as T, useDndChildren as _, isStructuralFieldKind as a, DraggableItemProps as b, DndItemsExpansion as c, DndItemsNestedGroup as d, DndItemsOptions as f, DndChildrenOptions as g, DndChildren as h, getFieldKind as i, DndPalette as j, Palette as k, DndItemsItem as l, Field as m, FieldKind as n, DndItems as o, useDndItems as p, FieldKindBinding as r, DndItemsActions as s, Dnd as t, DndItemsNestedElement as u, DraggableItem as v, useDndPanel as w, DndLayout as x, DraggableItemDragState as y };
+//# sourceMappingURL=index-DQcdHg_V.d.ts.map

package/dist/{index-kKUjo9lr.d.ts → index-DfIvkht8.d.ts}

@@ -1,4 +1,4 @@
-import { t as LiveMessages } from "./messages-Yb3b7YJt.js";
+import { t as LiveMessages } from "./messages-BpN3QIhj.js";
 import React$1 from "react";
 //#region src/components/error/boundary.d.ts
 interface Props$3 {
@@ -29,7 +29,7 @@ interface Props$2 extends React.ComponentPropsWithRef<'div'> {
   title?: string;
   onReset?: () => void;
 }
-declare const Error$2: ({ message, title, className, onReset }: Props$2) => import("react").JSX.Element | null;
+declare const Error$2: ({ message, title, className, style, onReset }: Props$2) => import("react").JSX.Element | null;
 //#endregion
 //#region src/components/error/guard.d.ts
 interface Props$1 {
@@ -54,4 +54,4 @@ type ErrorComponent = typeof Error$2 & {
 declare const Error$1: ErrorComponent;
 //#endregion
 export { Props$1 as a, Guard as i, Props as n, Props$2 as o, Runtime as r, ErrorBoundary as s, Error$1 as t };
-//# sourceMappingURL=index-kKUjo9lr.d.ts.map
+//# sourceMappingURL=index-DfIvkht8.d.ts.map

package/dist/index.d.ts

@@ -1,18 +1,19 @@
 import { i as BindingKeyMap, o as BindingOptions, s as BindingRegistry, u as BindingSchema } from "./types-Czps1Txy.js";
-import { i as useLiveMessages, n as LiveMessagesInput, r as defaultMessages, t as LiveMessages } from "./messages-Yb3b7YJt.js";
-import { n as Props } from "./index-tAiuHZsC.js";
+import { i as useLiveMessages, n as LiveMessagesInput, r as defaultMessages, t as LiveMessages } from "./messages-BpN3QIhj.js";
+import { n as Props } from "./index-BZpZwrxT.js";
 import { n as Section } from "./index-C8h8TcIl.js";
-import { A as Panel, B as PanelBinding, F as DndNodePick, G as PanelNodesChange, J as DndRenderSectionFallback, L as DndEditError, M as DndPanel, N as Props$1, O as Layout, P as DndInspector, R as DndRenderField, T as Canvas, W as PanelNodeChange, Y as DndSectionFallbackArgs, b as DraggableItemProps, f as DndItemsOptions, j as DndPalette, k as Palette, l as DndItemsItem, o as DndItems, t as Dnd, x as DndLayout, z as FieldProps } from "./index-0VB5C3Jk.js";
+import { A as Panel, F as DndNodePick, L as DndRenderSectionFallback, M as DndPanel, N as Props$1, O as Layout, P as DndInspector, R as DndSectionFallbackArgs, T as Canvas, b as DraggableItemProps, f as DndItemsOptions, j as DndPalette, k as Palette, l as DndItemsItem, o as DndItems, t as Dnd, x as DndLayout } from "./index-DQcdHg_V.js";
 import { t as FrameProps } from "./index-92L7F440.js";
-import { a as Props$3, n as EditorRenderData, r as Props$2, t as Editor } from "./index-13BDSrQc.js";
-import { a as Props$6, n as Props$5, o as Props$4, s as ErrorBoundary, t as Error } from "./index-kKUjo9lr.js";
-import { n as Preview, r as Props$7 } from "./index-Cl79M7ZJ.js";
+import { c as PanelNodeChange, i as PanelBinding, l as PanelNodesChange, n as DndRenderField, r as FieldProps, t as DndEditError } from "./edit-options-C_r9aCz4.js";
+import { a as Props$3, n as EditorRenderData, r as Props$2, t as Editor } from "./index-C93npmTU.js";
+import { a as Props$6, n as Props$5, o as Props$4, s as ErrorBoundary, t as Error } from "./index-DfIvkht8.js";
+import { n as Props$7, t as Preview } from "./index-CqsS207F.js";
 //#region src/index.d.ts
 declare const App: {
   ({ children, messages }: Props): import("react").JSX.Element;
   Preview: ({ code, props, modules, dynamicTailwind, provider, ...restProps }: Props$7) => import("react").JSX.Element;
   Renderer: ({ code, props, modules, dynamicTailwind, provider, ...restProps }: Props$7) => import("react").JSX.Element;
-  Error: (({ message, title, className, onReset }: Props$4) => import("react").JSX.Element | null) & {
+  Error: (({ message, title, className, style, onReset }: Props$4) => import("react").JSX.Element | null) & {
     Boundary: typeof ErrorBoundary;
     Runtime: ({ open, reset }: Props$5) => import("react").JSX.Element | null;
     Guard: ({ children, onError }: Props$6) => import("react").JSX.Element;

package/dist/index.js

@@ -1,9 +1,9 @@
-import { t as Dnd } from "./dnd-BlC1gqUy.js";
-import { i as useLiveMessages, n as defaultMessages } from "./messages-Bt5WXKTE.js";
-import { t as ContextProvider } from "./context-DDR1xVKo.js";
-import { t as Editor } from "./editor-Bty5XzpV.js";
-import { t as Error } from "./error-DyYx2NQ2.js";
-import { t as Preview } from "./preview-DC0pyOdu.js";
+import { t as Dnd } from "./dnd-BvjEDo-x.js";
+import { i as useLiveMessages, n as defaultMessages } from "./messages-DrINcRdG.js";
+import { t as ContextProvider } from "./context-Bjq0CvBE.js";
+import { t as Editor } from "./editor-CvnzrM9J.js";
+import { t as Error } from "./error-CFzvnLCf.js";
+import { t as Preview } from "./preview-B05MkVIQ.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/index.tsx
 const App = ({ children, messages }) => {

package/dist/{messages-Yb3b7YJt.d.ts → messages-BpN3QIhj.d.ts}

@@ -10,6 +10,9 @@ interface LiveMessages {
   canvas: {
     palette: string;
     properties: string;
+    close: string;
+    resizePalette: string;
+    resizePanel: string;
     pickElement: string;
     pickElementActive: string;
     dropHere: string;
@@ -130,4 +133,4 @@ declare const defaultMessages: LiveMessages;
 declare const useLiveMessages: () => LiveMessages;
 //#endregion
 export { useLiveMessages as i, LiveMessagesInput as n, defaultMessages as r, LiveMessages as t };
-//# sourceMappingURL=messages-Yb3b7YJt.d.ts.map
+//# sourceMappingURL=messages-BpN3QIhj.d.ts.map

package/dist/{messages-Bt5WXKTE.js → messages-DrINcRdG.js}

@@ -11,6 +11,9 @@ const defaultMessages = {
 	canvas: {
 		palette: "Components",
 		properties: "Properties",
+		close: "Close",
+		resizePalette: "Resize the components pane",
+		resizePanel: "Resize the properties pane",
 		pickElement: "Pick an element",
 		pickElementActive: "Click an element to edit it. Esc to cancel.",
 		dropHere: "Drop here",
@@ -133,4 +136,4 @@ const useLiveMessages = () => useContext(MessagesContext);
 //#endregion
 export { useLiveMessages as i, defaultMessages as n, mergeMessages as r, MessagesContext as t };
 
-//# sourceMappingURL=messages-Bt5WXKTE.js.map
+//# sourceMappingURL=messages-DrINcRdG.js.map

package/dist/messages-DrINcRdG.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"messages-DrINcRdG.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    // The mobile Drawers' close button.\n    close: string;\n    // The handles that resize the desktop palette and panel panes.\n    resizePalette: string;\n    resizePanel: 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    close: 'Close',\n    resizePalette: 'Resize the components pane',\n    resizePanel: 'Resize the properties pane',\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":";;;AAkKA,MAAa,kBAAgC;CAC3C,SAAS;EACP,QAAQ;EACR,UAAU;EACV,WAAW;EACX,QAAQ;CACV;CACA,QAAQ;EACN,SAAS;EACT,YAAY;EACZ,OAAO;EACP,eAAe;EACf,aAAa;EACb,aAAa;EACb,mBAAmB;EACnB,UAAU;EACV,cAAc;EACd,OAAO;EACP,gBAAgB;EAChB,eAAe;EACf,aAAa;EACb,mBAAmB;EACnB,mBAAkB,gBAChB,OAAO,YAAY;EACrB,yBAAwB,gBACtB,2CAA2C,YAAY;EACzD,OACE;CACJ;CACA,OAAO;EACL,eAAe;EACf,oBAAoB;EACpB,UACE;EACF,qBACE;EACF,eAAe;EACf,cAAc;EACd,gBAAgB;EAChB,kBAAkB;EAClB,gBAAgB;EAChB,mBAAmB;EACnB,iBAAiB;CACnB;CACA,OAAO;EACL,UAAS,UAAS,UAAU,MAAM;EAClC,KAAK;EACL,OAAM,aAAY,QAAQ;EAC1B,UAAS,SAAQ,WAAW;EAC5B,QAAQ;EACR,UAAU;EACV,QAAQ;EACR,aAAa;EACb,WAAW;EACX,YACE;EACF,OACE;EACF,iBACE;EACF,kBAAkB;CACpB;CACA,UAAU;EACR,UAAS,UAAS,mBAAmB,MAAM;EAC3C,KAAK;EACL,QAAQ,UAAU,YAAY,SAAS,SAAS,IAAI,QAAQ;EAC5D,QAAQ;EACR,UAAU;EACV,QAAQ;EACR,kBAAkB;EAClB,YAAY;CACd;CACA,WAAW;EACT,QAAO,UAAS,GAAG,MAAM;EACzB,WAAW;EACX,WAAW;EACX,QAAQ;EACR,UAAU;EACV,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,eAAc,UAAS,qBAAqB,MAAM;EAClD,aAAY,UAAS,gBAAgB,MAAM;EAC3C,eAAc,UAAS,kBAAkB,MAAM;EAC/C,oBAAmB,aACjB,wBAAwB,SAAS;EACnC,qBAAqB,EAAE,OAAO,eAC5B,kBACE,WAAW,aAAa,SAAS,KAAK,UAAU,MAAM,GACvD;EACH,mBAAmB,EAAE,OAAO,OAAO,eACjC,GAAG,MAAM,kBACP,WAAW,aAAa,SAAS,KAAK,UAAU,MAAM,GACvD;EACH,mBAAkB,aAChB,IAAI,SAAS;EACf,mBAAkB,aAChB,IAAI,SAAS;EACf,WAAW;EACX,iBAAiB;EACjB,oBAAmB,aACjB,QAAQ,SAAS;EACnB,cAAa,aACX,2DAA2D,SAAS;EACtE,cAAc;EACd,aAAa;EACb,mBACE;EACF,mBAAkB,gBAChB,OAAO,YAAY;EACrB,yBAAwB,gBACtB,mEAAmE,YAAY;EACjF,oBAAoB;EACpB,kBAAkB;EAClB,kBAAkB;EAClB,wBACE;CACJ;CACA,eAAe;EACb,cACE;EACF,SAAS;EACT,WAAU,SAAQ,aAAa,KAAK;EACpC,UAAU,MAAM,UAAU,UACxB,GAAG,KAAK,qBAAqB,SAAS,MAAM,MAAM;EACpD,UAAS,SAAQ,GAAG,KAAK;EACzB,YAAY,MAAM,UAAU,UAC1B,GAAG,KAAK,uBAAuB,SAAS,MAAM,MAAM;EACtD,UAAS,SAAQ,GAAG,KAAK;EACzB,YAAW,SAAQ,UAAU,KAAK;EAClC,WAAW,MAAM,SAAS,GAAG,KAAK,WAAW,KAAK;EAClD,YAAY,MAAM,SAAS,GAAG,KAAK,6BAA6B,KAAK;CACvE;CACA,QAAQ;EACN,SAAS;EACT,SAAS;EACT,SAAS;EACT,WAAW;EACX,oBAAoB;EACpB,oBAAoB;EACpB,UAAU;EACV,SAAS;EACT,oBAAoB;CACtB;CACA,YAAY;AACd;AAGA,MAAa,iBACX,OACA,OAAqB,oBACJ;CACjB,IAAI,CAAC,OACH,OAAO;CAGT,MAAM,SAAS,EAAE,GAAG,KAAK;CAEzB,KAAK,MAAM,SAAS,OAAO,KAAK,IAAI,GAClC,IAAI,MAAM,QACR,OAAO,SAAS;EAAE,GAAG,KAAK;EAAQ,GAAG,MAAM;CAAO;CAItD,OAAO;AACT;AAIA,MAAa,kBAAkB,cAA4B,eAAe;AAI1E,MAAa,wBAAwB,WAAW,eAAe"}

package/dist/preview/index.d.ts

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

package/dist/preview/index.js

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

package/dist/{preview-DC0pyOdu.js → preview-B05MkVIQ.js}

@@ -1,13 +1,16 @@
-import { i as useLiveMessages } from "./messages-Bt5WXKTE.js";
+import { i as useLiveMessages } from "./messages-DrINcRdG.js";
 import { i as usePreview, r as useError } from "./states-Ci1AvoQ9.js";
 import { t as cn } from "./cn-CAnad2vL.js";
-import { i as Frame, n as useCompiledModule, t as useDynamicTailwind } from "./use-dynamic-tailwind-CSYKXDmX.js";
-import { t as Error } from "./error-DyYx2NQ2.js";
+import { a as renderStableComponent, i as NO_PROPS, n as useCompiledModule, o as Frame, r as NO_MODULES, t as useDynamicTailwind } from "./use-dynamic-tailwind-B3l1qZRW.js";
+import { t as Error } from "./error-CFzvnLCf.js";
 import { useMemo } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/preview/defaults.ts
-const NO_PROPS = {};
-const NO_MODULES = {};
+//#region src/components/preview/preview.module.css
+var preview_module_default = {
+	"fill": "U36FtW_fill",
+	"hidden": "U36FtW_hidden",
+	"scroll": "U36FtW_scroll"
+};
 //#endregion
 //#region src/components/preview/client.tsx
 const Client = ({ code: _code, className, showError, props = NO_PROPS, modules = NO_MODULES, frame, dynamicTailwind = false, provider }) => {
@@ -15,7 +18,7 @@ const Client = ({ code: _code, className, showError, props = NO_PROPS, modules =
 	const { error, setError } = useError();
 	const messages = useLiveMessages();
 	const isError = !!showError && !!error;
-	const classNames = cn(isError && "hidden", className);
+	const classNames = cn(isError && preview_module_default.hidden, className);
 	const effectiveCode = _code === void 0 ? code : _code;
 	const module = useCompiledModule(effectiveCode, modules);
 	const { ref: contentRef, css: dynamicCSS } = useDynamicTailwind(effectiveCode, dynamicTailwind);
@@ -24,7 +27,7 @@ const Client = ({ code: _code, className, showError, props = NO_PROPS, modules =
 		return provider ? provider(component) : component;
 	};
 	if (module && module.error) return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
-		className: cn("relative h-full w-full", classNames),
+		className: cn(preview_module_default.fill, classNames),
 		children: /* @__PURE__ */ jsx(Error, {
 			message: module.error,
 			title: messages.errors.compile
@@ -33,7 +36,7 @@ const Client = ({ code: _code, className, showError, props = NO_PROPS, modules =
 	const Component = module?.exports?.default;
 	if (!Component) return null;
 	return /* @__PURE__ */ jsxs(Fragment, { children: [frame ? /* @__PURE__ */ jsx("div", {
-		className: cn("h-full w-full", classNames),
+		className: cn(preview_module_default.fill, classNames),
 		children: /* @__PURE__ */ jsx(Frame, {
 			...frame,
 			children: (container) => /* @__PURE__ */ jsx("div", {
@@ -44,7 +47,7 @@ const Client = ({ code: _code, className, showError, props = NO_PROPS, modules =
 					onError: (e) => setError(e.message),
 					children: renderProvider(/* @__PURE__ */ jsxs(Error.Guard, {
 						onError: (e) => setError(e.message),
-						children: [/* @__PURE__ */ jsx(Component, {
+						children: [renderStableComponent(Component, effectiveCode, {
 							...componentProps,
 							container
 						}), dynamicTailwind && dynamicCSS && /* @__PURE__ */ jsx("style", { children: dynamicCSS })]
@@ -54,7 +57,7 @@ const Client = ({ code: _code, className, showError, props = NO_PROPS, modules =
 		})
 	}) : /* @__PURE__ */ jsx("div", {
 		ref: contentRef,
-		className: cn("relative h-full w-full overflow-x-hidden overflow-y-auto", classNames),
+		className: cn(preview_module_default.fill, preview_module_default.scroll, classNames),
 		style: {
 			isolation: "isolate",
 			transform: "translateZ(0)",
@@ -65,7 +68,7 @@ const Client = ({ code: _code, className, showError, props = NO_PROPS, modules =
 			onError: (e) => setError(e.message),
 			children: renderProvider(/* @__PURE__ */ jsxs(Error.Guard, {
 				onError: (e) => setError(e.message),
-				children: [/* @__PURE__ */ jsx(Component, { ...componentProps }), dynamicTailwind && dynamicCSS && /* @__PURE__ */ jsx("style", { children: dynamicCSS })]
+				children: [renderStableComponent(Component, effectiveCode, componentProps), dynamicTailwind && dynamicCSS && /* @__PURE__ */ jsx("style", { children: dynamicCSS })]
 			}))
 		})
 	}), /* @__PURE__ */ jsx(Error.Runtime, { open: isError })] });
@@ -85,4 +88,4 @@ const Preview = ({ code, props = NO_PROPS, modules = NO_MODULES, dynamicTailwind
 //#endregion
 export { Preview as t };
 
-//# sourceMappingURL=preview-DC0pyOdu.js.map
+//# sourceMappingURL=preview-B05MkVIQ.js.map