@makeswift/runtime 0.28.8-canary.9 → 0.28.9-canary.0

package/dist/esm/runtimes/react/components/resolve-props.js

@@ -1,5 +1,6 @@
 import { useControlDefs } from "../hooks/use-control-defs";
 import { useResolvedProps } from "../hooks/use-resolved-props";
+import { useControlInstances } from "../hooks/use-control-instances";
 import { useStylesheetFactory } from "../hooks/use-stylesheet-factory";
 import { resolveLegacyDescriptorProp } from "../legacy-controls";
 function ResolveProps({
@@ -7,11 +8,14 @@ function ResolveProps({
   children: renderComponent
 }) {
   const [legacyDescriptors, definitions] = useControlDefs({ elementType: element.type });
+  const elementKey = element.key;
   const stylesheetFactory = useStylesheetFactory();
+  const controlInstances = useControlInstances(elementKey);
   const resolvedProps = useResolvedProps({
+    elementKey,
     propDefs: definitions,
     propData: element.props,
-    elementKey: element.key,
+    controlInstances,
     stylesheetFactory
   });
   const renderFn = Object.entries(legacyDescriptors).reduceRight(

package/dist/esm/runtimes/react/components/resolve-props.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/components/resolve-props.tsx"],"sourcesContent":["import { type ReactNode } from 'react'\n\nimport { type ElementData } from '../../../state/read-only-state'\n\nimport { useControlDefs } from '../hooks/use-control-defs'\nimport { useResolvedProps } from '../hooks/use-resolved-props'\nimport { useStylesheetFactory } from '../hooks/use-stylesheet-factory'\n\nimport { resolveLegacyDescriptorProp } from '../legacy-controls'\n\nexport function ResolveProps({\n  element,\n  children: renderComponent,\n}: {\n  element: ElementData\n  children: (props: Record<string, unknown>) => ReactNode\n}): ReactNode {\n  const [legacyDescriptors, definitions] = useControlDefs({ elementType: element.type })\n\n  const stylesheetFactory = useStylesheetFactory()\n  const resolvedProps = useResolvedProps({\n    propDefs: definitions,\n    propData: element.props,\n    elementKey: element.key,\n    stylesheetFactory,\n  })\n\n  const renderFn = Object.entries(legacyDescriptors).reduceRight(\n    (renderFn, [propName, descriptor]) =>\n      props =>\n        resolveLegacyDescriptorProp(descriptor, propName, element.props[propName], props, renderFn),\n    renderComponent,\n  )\n\n  return renderFn(resolvedProps)\n}\n"],"mappings":"AAIA,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,4BAA4B;AAErC,SAAS,mCAAmC;AAErC,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA,UAAU;AACZ,GAGc;AACZ,QAAM,CAAC,mBAAmB,WAAW,IAAI,eAAe,EAAE,aAAa,QAAQ,KAAK,CAAC;AAErF,QAAM,oBAAoB,qBAAqB;AAC/C,QAAM,gBAAgB,iBAAiB;AAAA,IACrC,UAAU;AAAA,IACV,UAAU,QAAQ;AAAA,IAClB,YAAY,QAAQ;AAAA,IACpB;AAAA,EACF,CAAC;AAED,QAAM,WAAW,OAAO,QAAQ,iBAAiB,EAAE;AAAA,IACjD,CAACA,WAAU,CAAC,UAAU,UAAU,MAC9B,WACE,4BAA4B,YAAY,UAAU,QAAQ,MAAM,QAAQ,GAAG,OAAOA,SAAQ;AAAA,IAC9F;AAAA,EACF;AAEA,SAAO,SAAS,aAAa;AAC/B;","names":["renderFn"]}
+{"version":3,"sources":["../../../../../src/runtimes/react/components/resolve-props.tsx"],"sourcesContent":["import { type ReactNode } from 'react'\n\nimport { type ElementData } from '../../../state/read-only-state'\n\nimport { useControlDefs } from '../hooks/use-control-defs'\nimport { useResolvedProps } from '../hooks/use-resolved-props'\nimport { useControlInstances } from '../hooks/use-control-instances'\nimport { useStylesheetFactory } from '../hooks/use-stylesheet-factory'\n\nimport { resolveLegacyDescriptorProp } from '../legacy-controls'\n\nexport function ResolveProps({\n  element,\n  children: renderComponent,\n}: {\n  element: ElementData\n  children: (props: Record<string, unknown>) => ReactNode\n}): ReactNode {\n  const [legacyDescriptors, definitions] = useControlDefs({ elementType: element.type })\n\n  const elementKey = element.key\n  const stylesheetFactory = useStylesheetFactory()\n  const controlInstances = useControlInstances(elementKey)\n  const resolvedProps = useResolvedProps({\n    elementKey,\n    propDefs: definitions,\n    propData: element.props,\n    controlInstances,\n    stylesheetFactory,\n  })\n\n  const renderFn = Object.entries(legacyDescriptors).reduceRight(\n    (renderFn, [propName, descriptor]) =>\n      props =>\n        resolveLegacyDescriptorProp(descriptor, propName, element.props[propName], props, renderFn),\n    renderComponent,\n  )\n\n  return renderFn(resolvedProps)\n}\n"],"mappings":"AAIA,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,2BAA2B;AACpC,SAAS,4BAA4B;AAErC,SAAS,mCAAmC;AAErC,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA,UAAU;AACZ,GAGc;AACZ,QAAM,CAAC,mBAAmB,WAAW,IAAI,eAAe,EAAE,aAAa,QAAQ,KAAK,CAAC;AAErF,QAAM,aAAa,QAAQ;AAC3B,QAAM,oBAAoB,qBAAqB;AAC/C,QAAM,mBAAmB,oBAAoB,UAAU;AACvD,QAAM,gBAAgB,iBAAiB;AAAA,IACrC;AAAA,IACA,UAAU;AAAA,IACV,UAAU,QAAQ;AAAA,IAClB;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,WAAW,OAAO,QAAQ,iBAAiB,EAAE;AAAA,IACjD,CAACA,WAAU,CAAC,UAAU,UAAU,MAC9B,WACE,4BAA4B,YAAY,UAAU,QAAQ,MAAM,QAAQ,GAAG,OAAOA,SAAQ;AAAA,IAC9F;AAAA,EACF;AAEA,SAAO,SAAS,aAAa;AAC/B;","names":["renderFn"]}

package/dist/esm/runtimes/react/controls/node-value/editable-node-value.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import {
+  useResolvedValueOverride,
+  DisableResolvedValueOverride
+} from "../../hooks/use-resolved-value-override";
+const EditableNodeValue = ({
+  instanceKey,
+  children: value
+}) => {
+  const [valueOverride, shouldOverride] = useResolvedValueOverride(instanceKey);
+  if (shouldOverride) {
+    return /* @__PURE__ */ jsx(DisableResolvedValueOverride.Provider, { value: instanceKey, children: valueOverride });
+  }
+  return value;
+};
+var editable_node_value_default = EditableNodeValue;
+export {
+  EditableNodeValue,
+  editable_node_value_default as default
+};
+//# sourceMappingURL=editable-node-value.js.map

package/dist/esm/runtimes/react/controls/node-value/editable-node-value.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/runtimes/react/controls/node-value/editable-node-value.tsx"],"sourcesContent":["import { type ReactNode, type PropsWithChildren } from 'react'\n\nimport { type ControlInstanceKey } from '@makeswift/controls'\n\nimport {\n  useResolvedValueOverride,\n  DisableResolvedValueOverride,\n} from '../../hooks/use-resolved-value-override'\n\nexport const EditableNodeValue = ({\n  instanceKey,\n  children: value,\n}: PropsWithChildren<{ instanceKey: ControlInstanceKey | undefined }>): ReactNode => {\n  // To make ReactNode props that have been rendered by an RSC component editable purely\n  // client-side, we store the edits in the read-write store as overrides and swap them\n  // in when present\n  const [valueOverride, shouldOverride] = useResolvedValueOverride(instanceKey)\n  if (shouldOverride) {\n    // disable the override for this instance while rendering it to prevent infinite recursion\n    // (the override for a `Slot` prop is a `SlotValue`, which recursively renders another\n    // instance of `EditableNodeValue`, which, if we don’t disable it, will find the override\n    // and render it again, ad infinitum)\n    return (\n      <DisableResolvedValueOverride.Provider value={instanceKey}>\n        {valueOverride as ReactNode}\n      </DisableResolvedValueOverride.Provider>\n    )\n  }\n\n  return value\n}\n\nexport default EditableNodeValue\n"],"mappings":"AAuBM;AAnBN;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEA,MAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA,UAAU;AACZ,MAAqF;AAInF,QAAM,CAAC,eAAe,cAAc,IAAI,yBAAyB,WAAW;AAC5E,MAAI,gBAAgB;AAKlB,WACE,oBAAC,6BAA6B,UAA7B,EAAsC,OAAO,aAC3C,yBACH;AAAA,EAEJ;AAEA,SAAO;AACT;AAEA,IAAO,8BAAQ;","names":[]}

package/dist/esm/runtimes/react/controls/node-value/index.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { memo, lazy } from "react";
+import { useIsReadOnly } from "../../hooks/use-is-read-only";
+const EditableNodeValue = lazy(() => import("./editable-node-value"));
+const ReadOnlyNodeValue = ({ children }) => children;
+const NodeValue = memo(function NodeValue2({
+  instanceKey,
+  children
+}) {
+  const NodeContainer = useIsReadOnly() ? ReadOnlyNodeValue : EditableNodeValue;
+  return /* @__PURE__ */ jsx(NodeContainer, { instanceKey, children });
+});
+export {
+  NodeValue
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/runtimes/react/controls/node-value/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/runtimes/react/controls/node-value/index.tsx"],"sourcesContent":["'use client'\n\nimport { type ReactNode, type PropsWithChildren, memo, lazy } from 'react'\n\nimport { type ControlInstanceKey } from '@makeswift/controls'\n\nimport { useIsReadOnly } from '../../hooks/use-is-read-only'\n\nconst EditableNodeValue = lazy(() => import('./editable-node-value'))\nconst ReadOnlyNodeValue = ({ children }: PropsWithChildren) => children\n\nexport const NodeValue = memo(function NodeValue({\n  instanceKey,\n  children,\n}: PropsWithChildren<{ instanceKey: ControlInstanceKey | undefined }>): ReactNode {\n  const NodeContainer = useIsReadOnly() ? ReadOnlyNodeValue : EditableNodeValue\n  return <NodeContainer instanceKey={instanceKey}>{children}</NodeContainer>\n})\n"],"mappings":";AAgBS;AAdT,SAAiD,MAAM,YAAY;AAInE,SAAS,qBAAqB;AAE9B,MAAM,oBAAoB,KAAK,MAAM,OAAO,uBAAuB,CAAC;AACpE,MAAM,oBAAoB,CAAC,EAAE,SAAS,MAAyB;AAExD,MAAM,YAAY,KAAK,SAASA,WAAU;AAAA,EAC/C;AAAA,EACA;AACF,GAAkF;AAChF,QAAM,gBAAgB,cAAc,IAAI,oBAAoB;AAC5D,SAAO,oBAAC,iBAAc,aAA2B,UAAS;AAC5D,CAAC;","names":["NodeValue"]}

package/dist/esm/runtimes/react/controls/rich-text/EditableText/editable-text.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/runtimes/react/controls/rich-text/EditableText/editable-text.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@emotion/css'\nimport { getBox } from 'css-box-model'\nimport isHotkey from 'is-hotkey'\nimport {\n  FocusEvent,\n  forwardRef,\n  KeyboardEvent,\n  Ref,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useState,\n} from 'react'\n\nimport { createEditor } from 'slate'\nimport { Slate as SlateReact, Editable, withReact, ReactEditor } from 'slate-react'\n\nimport { Slate, richTextDTOtoDAO, type RichTextValue } from '@makeswift/controls'\n\nimport { useBuilderEditMode } from '../../..'\nimport { DescriptorsPropControllers } from '../../../../../prop-controllers/instances'\nimport { withBlock, withTypography, withBuilder, onKeyDown } from '../../../../../slate'\nimport { BuilderEditMode } from '../../../../../state/modules/builder-edit-mode'\nimport { PropControllersHandle } from '../../../../../state/modules/prop-controller-handles'\nimport { pollBoxModel } from '../../../poll-box-model'\nimport { Element, Leaf } from '../components'\nimport { Descriptors } from '../rich-text'\nimport { useSyncDOMSelection } from './useSyncDOMSelection'\nimport { useSyncWithBuilder } from './useSyncWithBuilder'\n\ntype Props = {\n  id?: string\n  text?: RichTextValue\n  width?: string\n  margin?: string\n}\n\nconst defaultText: Slate.RichTextDAO = [\n  { type: Slate.BlockType.Paragraph, children: [{ text: '' }] },\n]\n\nexport const EditableText = forwardRef(function EditableText(\n  { id, text, width, margin }: Props,\n  ref: Ref<PropControllersHandle<Descriptors>>,\n) {\n  const [editor] = useState(() => withBlock(withTypography(withBuilder(withReact(createEditor())))))\n  const [isPreservingDOMSElection, setIsPreservingDOMSelection] = useState(false)\n  useSyncDOMSelection(editor, isPreservingDOMSElection)\n  const delaySync = useSyncWithBuilder(editor, text)\n  const editMode = useBuilderEditMode()\n\n  const [propControllers, setPropControllers] =\n    useState<DescriptorsPropControllers<Descriptors> | null>(null)\n  const controller = propControllers?.text\n\n  useEffect(() => {\n    if (controller == null) return\n\n    const element = ReactEditor.toDOMNode(editor, editor)\n\n    return pollBoxModel({\n      element,\n      onBoxModelChange: boxModel => controller.changeBoxModel(boxModel),\n    })\n  }, [editor, controller])\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      getDomNode() {\n        return ReactEditor.toDOMNode(editor, editor)\n      },\n      getBoxModel() {\n        return getBox(ReactEditor.toDOMNode(editor, editor))\n      },\n      setPropControllers,\n    }),\n    [editor, setPropControllers],\n  )\n\n  const initialValue = useMemo(() => (text ? richTextDTOtoDAO(text) : defaultText), [text])\n\n  useEffect(() => {\n    controller?.setSlateEditor(editor)\n  }, [controller, editor])\n\n  const handleFocus = useCallback(() => {\n    controller?.focus()\n    setIsPreservingDOMSelection(true)\n  }, [controller])\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (isHotkey('mod+shift+z', e)) return controller?.redo()\n      if (isHotkey('mod+z', e)) return controller?.undo()\n      if (isHotkey('escape')(e)) return controller?.blur()\n      onKeyDown(e, editor)\n    },\n    [controller, editor],\n  )\n\n  const handleBlur = useCallback((e: FocusEvent) => {\n    // When clicking outside of the iframe (`relatedTarget` is null) we want to preserve the DOM selection.\n    if (e.relatedTarget == null) return\n    // Otherwise we want to deselect on blur and stop preserving selection.\n    setIsPreservingDOMSelection(false)\n    ReactEditor.deselect(editor)\n  }, [])\n\n  return (\n    <SlateReact editor={editor} value={initialValue} onChange={delaySync}>\n      <Editable\n        id={id}\n        renderLeaf={Leaf}\n        renderElement={Element}\n        onFocus={handleFocus}\n        onKeyDown={handleKeyDown}\n        onBlur={handleBlur}\n        className={cx(width, margin)}\n        readOnly={editMode !== BuilderEditMode.CONTENT}\n        placeholder=\"Write some text...\"\n      />\n    </SlateReact>\n  )\n})\n\nexport default EditableText\n"],"mappings":"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","names":["EditableText"]}
+{"version":3,"sources":["../../../../../../../src/runtimes/react/controls/rich-text/EditableText/editable-text.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@emotion/css'\nimport { getBox } from 'css-box-model'\nimport isHotkey from 'is-hotkey'\nimport {\n  FocusEvent,\n  forwardRef,\n  KeyboardEvent,\n  Ref,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useState,\n} from 'react'\n\nimport { createEditor } from 'slate'\nimport { Slate as SlateReact, Editable, withReact, ReactEditor } from 'slate-react'\n\nimport { Slate, richTextDTOtoDAO, type RichTextValue } from '@makeswift/controls'\n\nimport { useBuilderEditMode } from '../../..'\nimport { DescriptorsPropControllers } from '../../../../../prop-controllers/instances'\nimport { withBlock, withTypography, withBuilder, onKeyDown } from '../../../../../slate'\nimport { BuilderEditMode } from '../../../../../state/modules/builder-edit-mode'\nimport { PropControllersHandle } from '../../../../../state/modules/read-write/prop-controllers'\nimport { pollBoxModel } from '../../../poll-box-model'\nimport { Element, Leaf } from '../components'\nimport { Descriptors } from '../rich-text'\nimport { useSyncDOMSelection } from './useSyncDOMSelection'\nimport { useSyncWithBuilder } from './useSyncWithBuilder'\n\ntype Props = {\n  id?: string\n  text?: RichTextValue\n  width?: string\n  margin?: string\n}\n\nconst defaultText: Slate.RichTextDAO = [\n  { type: Slate.BlockType.Paragraph, children: [{ text: '' }] },\n]\n\nexport const EditableText = forwardRef(function EditableText(\n  { id, text, width, margin }: Props,\n  ref: Ref<PropControllersHandle<Descriptors>>,\n) {\n  const [editor] = useState(() => withBlock(withTypography(withBuilder(withReact(createEditor())))))\n  const [isPreservingDOMSElection, setIsPreservingDOMSelection] = useState(false)\n  useSyncDOMSelection(editor, isPreservingDOMSElection)\n  const delaySync = useSyncWithBuilder(editor, text)\n  const editMode = useBuilderEditMode()\n\n  const [propControllers, setPropControllers] =\n    useState<DescriptorsPropControllers<Descriptors> | null>(null)\n  const controller = propControllers?.text\n\n  useEffect(() => {\n    if (controller == null) return\n\n    const element = ReactEditor.toDOMNode(editor, editor)\n\n    return pollBoxModel({\n      element,\n      onBoxModelChange: boxModel => controller.changeBoxModel(boxModel),\n    })\n  }, [editor, controller])\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      getDomNode() {\n        return ReactEditor.toDOMNode(editor, editor)\n      },\n      getBoxModel() {\n        return getBox(ReactEditor.toDOMNode(editor, editor))\n      },\n      setPropControllers,\n    }),\n    [editor, setPropControllers],\n  )\n\n  const initialValue = useMemo(() => (text ? richTextDTOtoDAO(text) : defaultText), [text])\n\n  useEffect(() => {\n    controller?.setSlateEditor(editor)\n  }, [controller, editor])\n\n  const handleFocus = useCallback(() => {\n    controller?.focus()\n    setIsPreservingDOMSelection(true)\n  }, [controller])\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (isHotkey('mod+shift+z', e)) return controller?.redo()\n      if (isHotkey('mod+z', e)) return controller?.undo()\n      if (isHotkey('escape')(e)) return controller?.blur()\n      onKeyDown(e, editor)\n    },\n    [controller, editor],\n  )\n\n  const handleBlur = useCallback((e: FocusEvent) => {\n    // When clicking outside of the iframe (`relatedTarget` is null) we want to preserve the DOM selection.\n    if (e.relatedTarget == null) return\n    // Otherwise we want to deselect on blur and stop preserving selection.\n    setIsPreservingDOMSelection(false)\n    ReactEditor.deselect(editor)\n  }, [])\n\n  return (\n    <SlateReact editor={editor} value={initialValue} onChange={delaySync}>\n      <Editable\n        id={id}\n        renderLeaf={Leaf}\n        renderElement={Element}\n        onFocus={handleFocus}\n        onKeyDown={handleKeyDown}\n        onBlur={handleBlur}\n        className={cx(width, margin)}\n        readOnly={editMode !== BuilderEditMode.CONTENT}\n        placeholder=\"Write some text...\"\n      />\n    </SlateReact>\n  )\n})\n\nexport default EditableText\n"],"mappings":"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","names":["EditableText"]}

package/dist/esm/runtimes/react/controls/rich-text/rich-text.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { lazy, useCallback } from "react";
 import {
   isPropControllersHandle
-} from "../../../../state/modules/prop-controller-handles";
+} from "../../../../state/modules/read-write/prop-controllers";
 import { useIsReadOnly } from "../../hooks/use-is-read-only";
 const EditableText = lazy(() => import("./EditableText"));
 const ReadOnlyText = lazy(() => import("./ReadOnlyText"));

package/dist/esm/runtimes/react/controls/rich-text/rich-text.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/runtimes/react/controls/rich-text/rich-text.tsx"],"sourcesContent":["import { ReactNode, lazy, useCallback } from 'react'\n\nimport { type DataType } from '@makeswift/controls'\nimport { RichTextV1Control, RichTextV1Definition } from '../../../../controls/rich-text'\n\nimport {\n  isPropControllersHandle,\n  PropControllersHandle,\n} from '../../../../state/modules/prop-controller-handles'\n\nimport { useIsReadOnly } from '../../hooks/use-is-read-only'\n\nconst EditableText = lazy(() => import('./EditableText'))\nconst ReadOnlyText = lazy(() => import('./ReadOnlyText'))\n\nexport type RichTextControlValue = ReactNode\n\nexport type Descriptors = { text?: RichTextV1Definition }\n\nexport function renderRichText(\n  data: DataType<RichTextV1Definition> | undefined,\n  control: RichTextV1Control | null,\n) {\n  return <RichText data={data} control={control} />\n}\n\nfunction RichText({\n  data,\n  control,\n}: {\n  data: DataType<RichTextV1Definition> | undefined\n  control: RichTextV1Control | null\n}) {\n  const textCallbackRef = useCallback(\n    (handle: PropControllersHandle<Descriptors> | HTMLDivElement | null) => {\n      if (isPropControllersHandle(handle))\n        handle?.setPropControllers?.(control == null ? null : { text: control })\n    },\n    [control],\n  )\n\n  return useIsReadOnly() ? (\n    <ReadOnlyText text={data} ref={textCallbackRef} />\n  ) : (\n    <EditableText text={data} ref={textCallbackRef} />\n  )\n}\n"],"mappings":"AAuBS;AAvBT,SAAoB,MAAM,mBAAmB;AAK7C;AAAA,EACE;AAAA,OAEK;AAEP,SAAS,qBAAqB;AAE9B,MAAM,eAAe,KAAK,MAAM,OAAO,gBAAgB,CAAC;AACxD,MAAM,eAAe,KAAK,MAAM,OAAO,gBAAgB,CAAC;AAMjD,SAAS,eACd,MACA,SACA;AACA,SAAO,oBAAC,YAAS,MAAY,SAAkB;AACjD;AAEA,SAAS,SAAS;AAAA,EAChB;AAAA,EACA;AACF,GAGG;AACD,QAAM,kBAAkB;AAAA,IACtB,CAAC,WAAuE;AACtE,UAAI,wBAAwB,MAAM;AAChC,gBAAQ,qBAAqB,WAAW,OAAO,OAAO,EAAE,MAAM,QAAQ,CAAC;AAAA,IAC3E;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,SAAO,cAAc,IACnB,oBAAC,gBAAa,MAAM,MAAM,KAAK,iBAAiB,IAEhD,oBAAC,gBAAa,MAAM,MAAM,KAAK,iBAAiB;AAEpD;","names":[]}
+{"version":3,"sources":["../../../../../../src/runtimes/react/controls/rich-text/rich-text.tsx"],"sourcesContent":["import { ReactNode, lazy, useCallback } from 'react'\n\nimport { type DataType } from '@makeswift/controls'\nimport { RichTextV1Control, RichTextV1Definition } from '../../../../controls/rich-text'\n\nimport {\n  isPropControllersHandle,\n  PropControllersHandle,\n} from '../../../../state/modules/read-write/prop-controllers'\n\nimport { useIsReadOnly } from '../../hooks/use-is-read-only'\n\nconst EditableText = lazy(() => import('./EditableText'))\nconst ReadOnlyText = lazy(() => import('./ReadOnlyText'))\n\nexport type RichTextControlValue = ReactNode\n\nexport type Descriptors = { text?: RichTextV1Definition }\n\nexport function renderRichText(\n  data: DataType<RichTextV1Definition> | undefined,\n  control: RichTextV1Control | null,\n) {\n  return <RichText data={data} control={control} />\n}\n\nfunction RichText({\n  data,\n  control,\n}: {\n  data: DataType<RichTextV1Definition> | undefined\n  control: RichTextV1Control | null\n}) {\n  const textCallbackRef = useCallback(\n    (handle: PropControllersHandle<Descriptors> | HTMLDivElement | null) => {\n      if (isPropControllersHandle(handle))\n        handle?.setPropControllers?.(control == null ? null : { text: control })\n    },\n    [control],\n  )\n\n  return useIsReadOnly() ? (\n    <ReadOnlyText text={data} ref={textCallbackRef} />\n  ) : (\n    <EditableText text={data} ref={textCallbackRef} />\n  )\n}\n"],"mappings":"AAuBS;AAvBT,SAAoB,MAAM,mBAAmB;AAK7C;AAAA,EACE;AAAA,OAEK;AAEP,SAAS,qBAAqB;AAE9B,MAAM,eAAe,KAAK,MAAM,OAAO,gBAAgB,CAAC;AACxD,MAAM,eAAe,KAAK,MAAM,OAAO,gBAAgB,CAAC;AAMjD,SAAS,eACd,MACA,SACA;AACA,SAAO,oBAAC,YAAS,MAAY,SAAkB;AACjD;AAEA,SAAS,SAAS;AAAA,EAChB;AAAA,EACA;AACF,GAGG;AACD,QAAM,kBAAkB;AAAA,IACtB,CAAC,WAAuE;AACtE,UAAI,wBAAwB,MAAM;AAChC,gBAAQ,qBAAqB,WAAW,OAAO,OAAO,EAAE,MAAM,QAAQ,CAAC;AAAA,IAC3E;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,SAAO,cAAc,IACnB,oBAAC,gBAAa,MAAM,MAAM,KAAK,iBAAiB,IAEhD,oBAAC,gBAAa,MAAM,MAAM,KAAK,iBAAiB;AAEpD;","names":[]}

package/dist/esm/runtimes/react/controls/slot/index.js

@@ -0,0 +1,5 @@
+import { renderSlot } from "./render-slot";
+export {
+  renderSlot
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/runtimes/react/controls/slot/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/runtimes/react/controls/slot/index.ts"],"sourcesContent":["export { renderSlot } from './render-slot'\n"],"mappings":"AAAA,SAAS,kBAAkB;","names":[]}

package/dist/esm/runtimes/react/controls/slot/render-slot.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import { SlotValue } from "./slot-value";
+function renderSlot({
+  data,
+  control,
+  config
+}) {
+  return /* @__PURE__ */ jsx(SlotValue, { data, instanceKey: control?.instanceKey, config });
+}
+export {
+  renderSlot
+};
+//# sourceMappingURL=render-slot.js.map

package/dist/esm/runtimes/react/controls/slot/render-slot.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/runtimes/react/controls/slot/render-slot.tsx"],"sourcesContent":["import { type ReactNode } from 'react'\nimport { SlotDefinition, SlotControl, type DataType } from '@makeswift/controls'\n\nimport { type SlotConfig } from '../../../../controls/slot'\n\nimport { SlotValue } from './slot-value'\n\nexport function renderSlot({\n  data,\n  control,\n  config,\n}: {\n  data: DataType<SlotDefinition<ReactNode>> | undefined\n  control: SlotControl | null\n  config: SlotConfig\n}): ReactNode {\n  // To make `SlotValue` interactive in the builder after it has been rendered as part of an\n  // RSC component's server output and hydrated on the client, we need some way to connect\n  // it to the corresponding control instance. Handling this purely client-side isn't an\n  // option, as by itself the rendered slot has no identity we could use to look up its control\n  // instance. Instantiating the instance on the server and simply passing it as a prop is\n  // also not an option, as class instances like `SlotControl` can't cross the RSC server-client\n  // serialization boundary. We can, however, pass the control's `instanceKey` instead, and use\n  // it to look up the corresponding client-side control instance in `SlotValue` via\n  // `useControlInstance`, and it works equally well for purely client-side rendering.\n  return <SlotValue data={data} instanceKey={control?.instanceKey} config={config} />\n}\n"],"mappings":"AAyBS;AApBT,SAAS,iBAAiB;AAEnB,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AACF,GAIc;AAUZ,SAAO,oBAAC,aAAU,MAAY,aAAa,SAAS,aAAa,QAAgB;AACnF;","names":[]}

package/dist/esm/runtimes/react/controls/{slot.js → slot/slot-value.js}

@@ -1,28 +1,39 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useState, memo } from "react";
+import {
+  useEffect,
+  useState,
+  memo
+} from "react";
 import { cx } from "@emotion/css";
-import { Element } from "../components/Element";
-import { useIsInBuilder } from "../hooks/use-is-in-builder";
-import { getIndexes } from "../../../components/utils/columns";
-import { useResponsiveStyle } from "../../../components/utils/responsive-style";
-import { useStyle } from "../use-style";
-import { pollBoxModel } from "../poll-box-model";
-function renderSlot(props) {
-  return /* @__PURE__ */ jsx(SlotValue, { ...props });
-}
-const SlotValue = memo(
-  ({
-    data,
-    control,
-    config
-  }) => {
-    if (data == null || data.elements.length === 0) {
-      return /* @__PURE__ */ jsx(Slot.Placeholder, { control, placeholder: config.unstable_placeholder });
-    }
-    return /* @__PURE__ */ jsx(Slot, { control, children: data.elements.map((element, i) => /* @__PURE__ */ jsx(Slot.Item, { control, grid: data.columns, index: i, children: /* @__PURE__ */ jsx(Element, { element }) }, element.key)) });
+import {
+  SlotControl
+} from "@makeswift/controls";
+import { Element } from "../../components/Element";
+import { getIndexes } from "../../../../components/utils/columns";
+import { useResponsiveStyle } from "../../../../components/utils/responsive-style";
+import { useIsInBuilder } from "../../hooks/use-is-in-builder";
+import { useControlInstance } from "../../hooks/use-control-instance";
+import { useStyle } from "../../use-style";
+import { pollBoxModel } from "../../poll-box-model";
+import { NodeValue } from "../node-value";
+const SlotValue = memo(function SlotValue2({
+  instanceKey,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(NodeValue, { instanceKey, children: /* @__PURE__ */ jsx(SlotOrPlaceholder, { instanceKey, ...props }) });
+});
+const SlotOrPlaceholder = ({
+  data,
+  instanceKey,
+  config
+}) => {
+  const control = useControlInstance(instanceKey, SlotControl);
+  if (data == null || data.elements.length === 0) {
+    return /* @__PURE__ */ jsx(Slot.Placeholder, { control, placeholder: config.unstable_placeholder });
   }
-);
+  return /* @__PURE__ */ jsx(Slot, { control, children: data.elements.map((element, i) => /* @__PURE__ */ jsx(Slot.Item, { control, grid: data.columns, index: i, children: /* @__PURE__ */ jsx(Element, { element }) }, element.key)) });
+};
 function Slot({
   as,
   control,
@@ -153,6 +164,6 @@ function SlotPlaceholder({ control, placeholder }) {
 }
 export {
   Slot,
-  renderSlot
+  SlotValue
 };
-//# sourceMappingURL=slot.js.map
+//# sourceMappingURL=slot-value.js.map

package/dist/esm/runtimes/react/controls/slot/slot-value.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/runtimes/react/controls/slot/slot-value.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  type ReactNode,\n  useEffect,\n  useState,\n  memo,\n} from 'react'\n\nimport { cx } from '@emotion/css'\n\nimport {\n  SlotDefinition,\n  SlotControl,\n  type DataType,\n  type ControlInstanceKey,\n} from '@makeswift/controls'\n\nimport { type SlotConfig, type SlotPlaceholderConfig } from '../../../../controls/slot'\n\nimport { Element } from '../../components/Element'\nimport { getIndexes } from '../../../../components/utils/columns'\nimport { useResponsiveStyle } from '../../../../components/utils/responsive-style'\n\nimport { useIsInBuilder } from '../../hooks/use-is-in-builder'\nimport { useControlInstance } from '../../hooks/use-control-instance'\n\nimport { useStyle } from '../../use-style'\nimport { pollBoxModel } from '../../poll-box-model'\n\nimport { NodeValue } from '../node-value'\n\nexport const SlotValue = memo(function SlotValue({\n  instanceKey,\n  ...props\n}: {\n  data: DataType<SlotDefinition<ReactNode>> | undefined\n  instanceKey: ControlInstanceKey | undefined\n  config: SlotConfig\n}): ReactNode {\n  return (\n    <NodeValue instanceKey={instanceKey}>\n      <SlotOrPlaceholder instanceKey={instanceKey} {...props} />\n    </NodeValue>\n  )\n})\n\nconst SlotOrPlaceholder = ({\n  data,\n  instanceKey,\n  config,\n}: {\n  data: DataType<SlotDefinition<ReactNode>> | undefined\n  instanceKey: ControlInstanceKey | undefined\n  config: SlotConfig\n}): ReactNode => {\n  const control = useControlInstance(instanceKey, SlotControl)\n\n  // TODO(miguel): While the UI shouldn't allow the state, we should probably check that at least\n  // one element is visible.\n  if (data == null || data.elements.length === 0) {\n    return <Slot.Placeholder control={control} placeholder={config.unstable_placeholder} />\n  }\n\n  return (\n    <Slot control={control}>\n      {data.elements.map((element, i) => (\n        <Slot.Item key={element.key} control={control} grid={data.columns} index={i}>\n          <Element element={element} />\n        </Slot.Item>\n      ))}\n    </Slot>\n  )\n}\n\ntype SlotProps<T extends ElementType> = {\n  as?: T\n  control: SlotControl | null\n  children?: ReactNode\n  className?: string\n}\n\nexport function Slot<T extends ElementType = 'div'>({\n  as,\n  control,\n  children,\n  className,\n  ...restOfProps\n}: SlotProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof SlotProps<T>>) {\n  const As = as ?? 'div'\n  const [element, setElement] = useState<Element | null>(null)\n  const baseClassName = useStyle({\n    display: 'flex',\n    flexWrap: 'wrap',\n    width: '100%',\n  })\n\n  useEffect(() => {\n    if (element == null || control == null) return\n\n    return pollBoxModel({\n      element,\n      onBoxModelChange: boxModel => control.changeContainerBoxModel(boxModel),\n    })\n  }, [element, control])\n\n  return (\n    <As {...restOfProps} ref={setElement} className={cx(baseClassName, className)}>\n      {children}\n    </As>\n  )\n}\n\nSlot.Placeholder = SlotPlaceholder\n\nSlot.Item = SlotItem\n\ntype SlotItemProps<T extends ElementType> = {\n  as?: T\n  control: SlotControl | null\n  // @arvin: review for correctness\n  grid: DataType<SlotDefinition<ReactNode>> extends undefined\n    ? undefined\n    : NonNullable<DataType<SlotDefinition<ReactNode>>>['columns']\n  index: number\n  children?: ReactNode\n  className?: string\n}\n\nfunction SlotItem<T extends ElementType = 'div'>({\n  as,\n  control,\n  grid,\n  index,\n  children,\n  className,\n  ...restOfProps\n}: SlotItemProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof SlotItemProps<T>>): ReactNode {\n  const As = as ?? 'div'\n  const [element, setElement] = useState<Element | null>(null)\n  const baseClassName = useStyle({\n    display: 'flex',\n    ...useResponsiveStyle([grid], ([{ count = 12, spans = [[12]] } = {}]) => {\n      const [rowIndex, columnIndex] = getIndexes(spans, index)\n      const span = spans[rowIndex][columnIndex]\n      const flexBasis = `calc(100% * ${(span / count).toFixed(5)})`\n\n      return span === 0 ? { display: 'none' } : { flexBasis, minWidth: flexBasis }\n    }),\n  })\n\n  useEffect(() => {\n    if (element == null || control == null) return\n\n    return pollBoxModel({\n      element,\n      onBoxModelChange: boxModel => control.changeItemBoxModel(index, boxModel),\n    })\n  }, [element, control, index])\n\n  return (\n    <As {...restOfProps} ref={setElement} className={cx(baseClassName, className)}>\n      {children}\n    </As>\n  )\n}\n\ntype SlotPlaceholderProps = {\n  control: SlotControl | null\n  placeholder?: SlotPlaceholderConfig\n}\n\nconst DEFAULT_SHOW_PLACEHOLDER_IN_BUILDER_ONLY = false\nconst DEFAULT_PLACEHOLDER_HEIGHT_PX = 80\n\nfunction SlotPlaceholder({ control, placeholder }: SlotPlaceholderProps): ReactNode {\n  const isInBuilder = useIsInBuilder()\n  const [element, setElement] = useState<Element | null>(null)\n\n  // TODO: When ready, we can default to only showing the slot placeholder in\n  // the builder\n  const showInBuilderOnly = placeholder?.builderOnly ?? DEFAULT_SHOW_PLACEHOLDER_IN_BUILDER_ONLY\n  const placeholderHeight = placeholder?.height ?? DEFAULT_PLACEHOLDER_HEIGHT_PX\n  const text = placeholder?.text\n\n  const hidePlaceholder = showInBuilderOnly && !isInBuilder\n\n  useEffect(() => {\n    if (element == null || control == null) return\n\n    return pollBoxModel({\n      element,\n      onBoxModelChange: boxModel => control.changeContainerBoxModel(boxModel),\n    })\n  }, [element, control])\n\n  return (\n    <div\n      ref={setElement}\n      className={useStyle({\n        width: '100%',\n        background: 'rgba(161, 168, 194, 0.18)',\n      })}\n      style={{\n        height: hidePlaceholder ? 0 : placeholderHeight,\n        visibility: hidePlaceholder ? 'hidden' : undefined,\n      }}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"100%\"\n        height=\"100%\"\n        className={useStyle({ overflow: 'visible', padding: 8 })}\n      >\n        <rect\n          x={0}\n          y={0}\n          width=\"100%\"\n          height=\"100%\"\n          strokeWidth={2}\n          strokeDasharray=\"4 2\"\n          fill=\"none\"\n          stroke=\"rgba(161, 168, 194, 0.40)\"\n          rx=\"4\"\n          ry=\"4\"\n        />\n        {text != null && (\n          <text\n            x=\"50%\"\n            y=\"50%\"\n            dominantBaseline=\"central\"\n            textAnchor=\"middle\"\n            fill=\"rgba(161, 168, 194, 0.80)\"\n            fontSize=\"14px\"\n            fontFamily=\"sans-serif\"\n            style={{ userSelect: 'none' }}\n          >\n            {text}\n          </text>\n        )}\n      </svg>\n    </div>\n  )\n}\n"],"mappings":"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","names":["SlotValue"]}

package/dist/esm/runtimes/react/element-imperative-handle.js

@@ -1,7 +1,7 @@
 import { isMeasurable, measure } from "../../state/modules/read-write/box-models";
 import {
   isPropControllersHandle
-} from "../../state/modules/prop-controller-handles";
+} from "../../state/modules/read-write/prop-controllers";
 class ElementImperativeHandle {
   getCurrent = () => null;
   lastPropControllers = null;

package/dist/esm/runtimes/react/element-imperative-handle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/runtimes/react/element-imperative-handle.ts"],"sourcesContent":["import { BoxModelHandle, type BoxDisplayModel } from '../../state/modules/read-write/box-models'\nimport { Descriptor } from '../../prop-controllers/descriptors'\nimport { DescriptorsPropControllers } from '../../prop-controllers/instances'\nimport { isMeasurable, measure } from '../../state/modules/read-write/box-models'\nimport {\n  isPropControllersHandle,\n  PropControllersHandle,\n} from '../../state/modules/prop-controller-handles'\n\nexport class ElementImperativeHandle<\n    T extends Record<string, Descriptor> = Record<string, Descriptor>,\n  >\n  implements BoxModelHandle, PropControllersHandle<T>\n{\n  private getCurrent: () => unknown = () => null\n  private lastPropControllers: DescriptorsPropControllers<T> | null = null\n\n  callback(getCurrent: () => unknown) {\n    const current = this.getCurrent()\n\n    if (current === null) this.setPropControllers(null)\n\n    this.getCurrent = getCurrent\n\n    if (this.lastPropControllers !== null) this.setPropControllers(this.lastPropControllers)\n  }\n\n  getBoxModel(): BoxDisplayModel | null {\n    const current = this.getCurrent()\n\n    return isMeasurable(current) ? measure(current) : null\n  }\n\n  setPropControllers(propControllers: DescriptorsPropControllers<T> | null): void {\n    const current = this.getCurrent()\n\n    if (isPropControllersHandle(current)) current.setPropControllers(propControllers)\n\n    this.lastPropControllers = propControllers\n  }\n\n  getDomNode(): Element | null {\n    const current = this.getCurrent()\n\n    if (isDomNodeHandle(current)) return current.getDomNode()\n\n    return current instanceof Element ? current : null\n  }\n}\n\ntype DomNodeHandle = {\n  getDomNode(): Element | null\n}\n\nexport function isDomNodeHandle(value: unknown): value is DomNodeHandle {\n  if (\n    typeof value === 'object' &&\n    value !== null &&\n    'getDomNode' in value &&\n    typeof (value as { getDomNode: unknown }).getDomNode === 'function'\n  ) {\n    return true\n  }\n\n  return false\n}\n"],"mappings":"AAGA,SAAS,cAAc,eAAe;AACtC;AAAA,EACE;AAAA,OAEK;AAEA,MAAM,wBAIb;AAAA,EACU,aAA4B,MAAM;AAAA,EAClC,sBAA4D;AAAA,EAEpE,SAAS,YAA2B;AAClC,UAAM,UAAU,KAAK,WAAW;AAEhC,QAAI,YAAY;AAAM,WAAK,mBAAmB,IAAI;AAElD,SAAK,aAAa;AAElB,QAAI,KAAK,wBAAwB;AAAM,WAAK,mBAAmB,KAAK,mBAAmB;AAAA,EACzF;AAAA,EAEA,cAAsC;AACpC,UAAM,UAAU,KAAK,WAAW;AAEhC,WAAO,aAAa,OAAO,IAAI,QAAQ,OAAO,IAAI;AAAA,EACpD;AAAA,EAEA,mBAAmB,iBAA6D;AAC9E,UAAM,UAAU,KAAK,WAAW;AAEhC,QAAI,wBAAwB,OAAO;AAAG,cAAQ,mBAAmB,eAAe;AAEhF,SAAK,sBAAsB;AAAA,EAC7B;AAAA,EAEA,aAA6B;AAC3B,UAAM,UAAU,KAAK,WAAW;AAEhC,QAAI,gBAAgB,OAAO;AAAG,aAAO,QAAQ,WAAW;AAExD,WAAO,mBAAmB,UAAU,UAAU;AAAA,EAChD;AACF;AAMO,SAAS,gBAAgB,OAAwC;AACtE,MACE,OAAO,UAAU,YACjB,UAAU,QACV,gBAAgB,SAChB,OAAQ,MAAkC,eAAe,YACzD;AACA,WAAO;AAAA,EACT;AAEA,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../../../src/runtimes/react/element-imperative-handle.ts"],"sourcesContent":["import { BoxModelHandle, type BoxDisplayModel } from '../../state/modules/read-write/box-models'\nimport { Descriptor } from '../../prop-controllers/descriptors'\nimport { DescriptorsPropControllers } from '../../prop-controllers/instances'\nimport { isMeasurable, measure } from '../../state/modules/read-write/box-models'\nimport {\n  isPropControllersHandle,\n  PropControllersHandle,\n} from '../../state/modules/read-write/prop-controllers'\n\nexport class ElementImperativeHandle<\n    T extends Record<string, Descriptor> = Record<string, Descriptor>,\n  >\n  implements BoxModelHandle, PropControllersHandle<T>\n{\n  private getCurrent: () => unknown = () => null\n  private lastPropControllers: DescriptorsPropControllers<T> | null = null\n\n  callback(getCurrent: () => unknown) {\n    const current = this.getCurrent()\n\n    if (current === null) this.setPropControllers(null)\n\n    this.getCurrent = getCurrent\n\n    if (this.lastPropControllers !== null) this.setPropControllers(this.lastPropControllers)\n  }\n\n  getBoxModel(): BoxDisplayModel | null {\n    const current = this.getCurrent()\n\n    return isMeasurable(current) ? measure(current) : null\n  }\n\n  setPropControllers(propControllers: DescriptorsPropControllers<T> | null): void {\n    const current = this.getCurrent()\n\n    if (isPropControllersHandle(current)) current.setPropControllers(propControllers)\n\n    this.lastPropControllers = propControllers\n  }\n\n  getDomNode(): Element | null {\n    const current = this.getCurrent()\n\n    if (isDomNodeHandle(current)) return current.getDomNode()\n\n    return current instanceof Element ? current : null\n  }\n}\n\ntype DomNodeHandle = {\n  getDomNode(): Element | null\n}\n\nexport function isDomNodeHandle(value: unknown): value is DomNodeHandle {\n  if (\n    typeof value === 'object' &&\n    value !== null &&\n    'getDomNode' in value &&\n    typeof (value as { getDomNode: unknown }).getDomNode === 'function'\n  ) {\n    return true\n  }\n\n  return false\n}\n"],"mappings":"AAGA,SAAS,cAAc,eAAe;AACtC;AAAA,EACE;AAAA,OAEK;AAEA,MAAM,wBAIb;AAAA,EACU,aAA4B,MAAM;AAAA,EAClC,sBAA4D;AAAA,EAEpE,SAAS,YAA2B;AAClC,UAAM,UAAU,KAAK,WAAW;AAEhC,QAAI,YAAY;AAAM,WAAK,mBAAmB,IAAI;AAElD,SAAK,aAAa;AAElB,QAAI,KAAK,wBAAwB;AAAM,WAAK,mBAAmB,KAAK,mBAAmB;AAAA,EACzF;AAAA,EAEA,cAAsC;AACpC,UAAM,UAAU,KAAK,WAAW;AAEhC,WAAO,aAAa,OAAO,IAAI,QAAQ,OAAO,IAAI;AAAA,EACpD;AAAA,EAEA,mBAAmB,iBAA6D;AAC9E,UAAM,UAAU,KAAK,WAAW;AAEhC,QAAI,wBAAwB,OAAO;AAAG,cAAQ,mBAAmB,eAAe;AAEhF,SAAK,sBAAsB;AAAA,EAC7B;AAAA,EAEA,aAA6B;AAC3B,UAAM,UAAU,KAAK,WAAW;AAEhC,QAAI,gBAAgB,OAAO;AAAG,aAAO,QAAQ,WAAW;AAExD,WAAO,mBAAmB,UAAU,UAAU;AAAA,EAChD;AACF;AAMO,SAAS,gBAAgB,OAAwC;AACtE,MACE,OAAO,UAAU,YACjB,UAAU,QACV,gBAAgB,SAChB,OAAQ,MAAkC,eAAe,YACzD;AACA,WAAO;AAAA,EACT;AAEA,SAAO;AACT;","names":[]}

package/dist/esm/runtimes/react/hooks/use-control-instance.js

@@ -0,0 +1,62 @@
+import { useCallback, useSyncExternalStore } from "react";
+import { isNotNil } from "@makeswift/controls";
+import { useControlInstances } from "./use-control-instances";
+function useControlInstance(instanceKey, instanceClass) {
+  const { elementKey, propPath } = instanceKey ?? {};
+  const instances = useControlInstances(elementKey);
+  const getInstance = useCallback(
+    () => instances != null && propPath != null ? getInstanceByPropPath(instances, propPath) : null,
+    [instances, propPath]
+  );
+  const subscribe = useCallback(
+    (onStateChange) => {
+      if (instances == null || propPath == null)
+        return () => {
+        };
+      let unsubscribes = [];
+      const handleStateChange = () => {
+        resubscribe();
+        onStateChange();
+      };
+      const resubscribe = () => {
+        unsubscribes.forEach((unsubscribe) => unsubscribe());
+        const chain = getInstanceChainByPropPath(instances, propPath).filter(isNotNil);
+        unsubscribes = chain.map((instance) => instance.subscribe(handleStateChange));
+      };
+      resubscribe();
+      return () => unsubscribes.forEach((unsubscribe) => unsubscribe());
+    },
+    [instances, propPath]
+  );
+  const result = useSyncExternalStore(subscribe, getInstance, getInstance);
+  if (result) {
+    const foundKey = result.instanceKey;
+    if (foundKey.elementKey !== elementKey || foundKey.propPath != propPath) {
+      console.error("Mismatching control instance key: expected", instanceKey, " got", foundKey);
+      return null;
+    }
+    if (!(result instanceof instanceClass)) {
+      console.error(
+        `Unexpected control instance class: requested '${instanceClass.name}', found '${result.constructor.name}'`,
+        { instanceKey }
+      );
+      return null;
+    }
+  }
+  return result;
+}
+function getInstanceChainByPropPath(instances, propPath) {
+  const [parentProp, ...childPath] = propPath.split(".");
+  const parentInstance = instances[parentProp];
+  const getInstanceChain = (parent, childPath2) => parent == null || childPath2.length === 0 ? [parent ?? null] : [parent, ...getInstanceChain(parent.child(childPath2[0]), childPath2.slice(1))];
+  return getInstanceChain(parentInstance, childPath);
+}
+function getInstanceByPropPath(instances, propPath) {
+  return getInstanceChainByPropPath(instances, propPath).at(-1) ?? null;
+}
+export {
+  getInstanceByPropPath,
+  getInstanceChainByPropPath,
+  useControlInstance
+};
+//# sourceMappingURL=use-control-instance.js.map

package/dist/esm/runtimes/react/hooks/use-control-instance.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/hooks/use-control-instance.ts"],"sourcesContent":["import { useCallback, useSyncExternalStore } from 'react'\nimport { type AnyControlInstance, type ControlInstanceKey, isNotNil } from '@makeswift/controls'\n\nimport { useControlInstances } from './use-control-instances'\n\ntype InstanceConstructor<T extends AnyControlInstance> = abstract new (...args: never[]) => T\n\nexport function useControlInstance<T extends AnyControlInstance>(\n  instanceKey: ControlInstanceKey | undefined,\n  instanceClass: InstanceConstructor<T>,\n): T | null {\n  const { elementKey, propPath } = instanceKey ?? {}\n\n  const instances = useControlInstances(elementKey)\n  const getInstance = useCallback(\n    () =>\n      instances != null && propPath != null ? getInstanceByPropPath(instances, propPath) : null,\n    [instances, propPath],\n  )\n\n  const subscribe = useCallback(\n    (onStateChange: () => void) => {\n      if (instances == null || propPath == null) return () => {}\n\n      let unsubscribes: (() => void)[] = []\n\n      // recompute the instance chain and resubscribe to its updates on every notification,\n      // since a control's own update (e.g. a `ListControl` replacing its children) can replace\n      // the instances further down the chain\n      const handleStateChange = () => {\n        resubscribe()\n        onStateChange()\n      }\n\n      const resubscribe = () => {\n        unsubscribes.forEach(unsubscribe => unsubscribe())\n\n        const chain = getInstanceChainByPropPath(instances, propPath).filter(isNotNil)\n        unsubscribes = chain.map(instance => instance.subscribe(handleStateChange))\n      }\n\n      resubscribe()\n\n      return () => unsubscribes.forEach(unsubscribe => unsubscribe())\n    },\n    [instances, propPath],\n  )\n\n  const result = useSyncExternalStore(subscribe, getInstance, getInstance)\n\n  if (result) {\n    const foundKey = result.instanceKey\n    if (foundKey.elementKey !== elementKey || foundKey.propPath != propPath) {\n      console.error('Mismatching control instance key: expected', instanceKey, ' got', foundKey)\n      return null\n    }\n\n    if (!(result instanceof instanceClass)) {\n      console.error(\n        `Unexpected control instance class: requested '${instanceClass.name}', found '${result.constructor.name}'`,\n        { instanceKey },\n      )\n\n      return null\n    }\n  }\n\n  return result\n}\n\nexport function getInstanceChainByPropPath(\n  instances: Record<string, AnyControlInstance>,\n  propPath: string,\n): (AnyControlInstance | null)[] {\n  const [parentProp, ...childPath] = propPath.split('.')\n  const parentInstance = instances[parentProp]\n\n  const getInstanceChain = (\n    parent: AnyControlInstance | undefined,\n    childPath: string[],\n  ): (AnyControlInstance | null)[] =>\n    parent == null || childPath.length === 0\n      ? [parent ?? null]\n      : [parent, ...getInstanceChain(parent.child(childPath[0]), childPath.slice(1))]\n\n  return getInstanceChain(parentInstance, childPath)\n}\n\nexport function getInstanceByPropPath(\n  instances: Record<string, AnyControlInstance>,\n  propPath: string,\n): AnyControlInstance | null {\n  return getInstanceChainByPropPath(instances, propPath).at(-1) ?? null\n}\n"],"mappings":"AAAA,SAAS,aAAa,4BAA4B;AAClD,SAA2D,gBAAgB;AAE3E,SAAS,2BAA2B;AAI7B,SAAS,mBACd,aACA,eACU;AACV,QAAM,EAAE,YAAY,SAAS,IAAI,eAAe,CAAC;AAEjD,QAAM,YAAY,oBAAoB,UAAU;AAChD,QAAM,cAAc;AAAA,IAClB,MACE,aAAa,QAAQ,YAAY,OAAO,sBAAsB,WAAW,QAAQ,IAAI;AAAA,IACvF,CAAC,WAAW,QAAQ;AAAA,EACtB;AAEA,QAAM,YAAY;AAAA,IAChB,CAAC,kBAA8B;AAC7B,UAAI,aAAa,QAAQ,YAAY;AAAM,eAAO,MAAM;AAAA,QAAC;AAEzD,UAAI,eAA+B,CAAC;AAKpC,YAAM,oBAAoB,MAAM;AAC9B,oBAAY;AACZ,sBAAc;AAAA,MAChB;AAEA,YAAM,cAAc,MAAM;AACxB,qBAAa,QAAQ,iBAAe,YAAY,CAAC;AAEjD,cAAM,QAAQ,2BAA2B,WAAW,QAAQ,EAAE,OAAO,QAAQ;AAC7E,uBAAe,MAAM,IAAI,cAAY,SAAS,UAAU,iBAAiB,CAAC;AAAA,MAC5E;AAEA,kBAAY;AAEZ,aAAO,MAAM,aAAa,QAAQ,iBAAe,YAAY,CAAC;AAAA,IAChE;AAAA,IACA,CAAC,WAAW,QAAQ;AAAA,EACtB;AAEA,QAAM,SAAS,qBAAqB,WAAW,aAAa,WAAW;AAEvE,MAAI,QAAQ;AACV,UAAM,WAAW,OAAO;AACxB,QAAI,SAAS,eAAe,cAAc,SAAS,YAAY,UAAU;AACvE,cAAQ,MAAM,8CAA8C,aAAa,QAAQ,QAAQ;AACzF,aAAO;AAAA,IACT;AAEA,QAAI,EAAE,kBAAkB,gBAAgB;AACtC,cAAQ;AAAA,QACN,iDAAiD,cAAc,IAAI,aAAa,OAAO,YAAY,IAAI;AAAA,QACvG,EAAE,YAAY;AAAA,MAChB;AAEA,aAAO;AAAA,IACT;AAAA,EACF;AAEA,SAAO;AACT;AAEO,SAAS,2BACd,WACA,UAC+B;AAC/B,QAAM,CAAC,YAAY,GAAG,SAAS,IAAI,SAAS,MAAM,GAAG;AACrD,QAAM,iBAAiB,UAAU,UAAU;AAE3C,QAAM,mBAAmB,CACvB,QACAA,eAEA,UAAU,QAAQA,WAAU,WAAW,IACnC,CAAC,UAAU,IAAI,IACf,CAAC,QAAQ,GAAG,iBAAiB,OAAO,MAAMA,WAAU,CAAC,CAAC,GAAGA,WAAU,MAAM,CAAC,CAAC,CAAC;AAElF,SAAO,iBAAiB,gBAAgB,SAAS;AACnD;AAEO,SAAS,sBACd,WACA,UAC2B;AAC3B,SAAO,2BAA2B,WAAW,QAAQ,EAAE,GAAG,EAAE,KAAK;AACnE;","names":["childPath"]}

package/dist/esm/runtimes/react/hooks/use-control-instances.js

@@ -1,14 +1,4 @@
-import { getPropControllers } from "../../../state/read-only-state";
-import { useDocumentKey } from "./use-document-context";
-import { useSelector } from "./use-selector";
-function useControlInstances(elementKey) {
-  const documentKey = useDocumentKey();
-  return useSelector((state) => {
-    if (documentKey == null)
-      return null;
-    return getPropControllers(state, { documentKey, elementKey });
-  });
-}
+import { useControlInstances } from "../components/control-instances-context";
 export {
   useControlInstances
 };

package/dist/esm/runtimes/react/hooks/use-control-instances.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/hooks/use-control-instances.ts"],"sourcesContent":["import { ControlInstance } from '@makeswift/controls'\n\nimport { getPropControllers } from '../../../state/read-only-state'\nimport { useDocumentKey } from './use-document-context'\nimport { useSelector } from './use-selector'\n\nexport function useControlInstances(elementKey: string): Record<string, ControlInstance> | null {\n  const documentKey = useDocumentKey()\n\n  return useSelector(state => {\n    if (documentKey == null) return null\n\n    return getPropControllers(state, { documentKey, elementKey })\n  })\n}\n"],"mappings":"AAEA,SAAS,0BAA0B;AACnC,SAAS,sBAAsB;AAC/B,SAAS,mBAAmB;AAErB,SAAS,oBAAoB,YAA4D;AAC9F,QAAM,cAAc,eAAe;AAEnC,SAAO,YAAY,WAAS;AAC1B,QAAI,eAAe;AAAM,aAAO;AAEhC,WAAO,mBAAmB,OAAO,EAAE,aAAa,WAAW,CAAC;AAAA,EAC9D,CAAC;AACH;","names":[]}
+{"version":3,"sources":["../../../../../src/runtimes/react/hooks/use-control-instances.ts"],"sourcesContent":["export { useControlInstances } from '../components/control-instances-context'\n"],"mappings":"AAAA,SAAS,2BAA2B;","names":[]}

package/dist/esm/runtimes/react/hooks/use-disable-register-element.js

@@ -1,10 +1,10 @@
 import { createContext, useContext } from "react";
 const DisableRegisterElement = createContext(false);
-function useDisableRegisterElement() {
+function useIsRegisterElementDisabled() {
   return useContext(DisableRegisterElement);
 }
 export {
   DisableRegisterElement,
-  useDisableRegisterElement
+  useIsRegisterElementDisabled
 };
 //# sourceMappingURL=use-disable-register-element.js.map

package/dist/esm/runtimes/react/hooks/use-disable-register-element.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/hooks/use-disable-register-element.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nexport const DisableRegisterElement = createContext(false)\n\nexport function useDisableRegisterElement() {\n  return useContext(DisableRegisterElement)\n}\n"],"mappings":"AAAA,SAAS,eAAe,kBAAkB;AAEnC,MAAM,yBAAyB,cAAc,KAAK;AAElD,SAAS,4BAA4B;AAC1C,SAAO,WAAW,sBAAsB;AAC1C;","names":[]}
+{"version":3,"sources":["../../../../../src/runtimes/react/hooks/use-disable-register-element.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nexport const DisableRegisterElement = createContext(false)\n\nexport function useIsRegisterElementDisabled() {\n  return useContext(DisableRegisterElement)\n}\n"],"mappings":"AAAA,SAAS,eAAe,kBAAkB;AAEnC,MAAM,yBAAyB,cAAc,KAAK;AAElD,SAAS,+BAA+B;AAC7C,SAAO,WAAW,sBAAsB;AAC1C;","names":[]}

package/dist/esm/runtimes/react/hooks/use-resolved-props.js

@@ -4,21 +4,20 @@ import {
 } from "@makeswift/controls";
 import { useResourceResolver } from "./use-resource-resolver";
 import { propErrorHandlingProxy } from "../utils/prop-error-handling-proxy";
-import { useControlInstances } from "./use-control-instances";
 import { useResolvableRecord } from "./use-resolvable-record";
 function useResolvedProps({
+  elementKey,
   propDefs,
   propData,
-  elementKey,
+  controlInstances,
   stylesheetFactory
 }) {
   const resourceResolver = useResourceResolver();
-  const controls = useControlInstances(elementKey);
   const cache = useRef({}).current;
   const resolveProp = useCallback(
     (def, propName) => {
       const data = propData[propName];
-      const control = controls?.[propName];
+      const control = controlInstances?.[propName];
       if (cache[propName] != null && data === cache[propName].data && control === cache[propName].control) {
         return cache[propName].resolvedValue;
       }
@@ -31,24 +30,26 @@ function useResolvedProps({
       cache[propName] = { data, control, resolvedValue };
       return resolvedValue;
     },
-    [controls, propData, resourceResolver, stylesheetFactory]
+    [propData, cache, resourceResolver, controlInstances, stylesheetFactory]
   );
   const resolvables = useMemo(
     () => mapValues(propDefs, (def, propName) => {
       const defaultValue = def.config?.defaultValue;
       return propErrorHandlingProxy(resolveProp(def, propName), defaultValue, (error) => {
         console.warn(
-          `Error reading value for prop "${propName}", falling back to \`${defaultValue}\`.`,
+          `Error reading value for prop "${propName}" of element ${elementKey}, falling back to \`${defaultValue}\`.`,
           { control: def, error }
         );
       });
     }),
-    [propDefs, resolveProp]
+    [propDefs, resolveProp, elementKey]
   );
   const props = useResolvableRecord(resolvables);
   useEffect(() => {
-    props.triggerResolve();
-  }, [props]);
+    props.triggerResolve().catch((err) => {
+      console.log(`Error while resolving props for element ${elementKey}`, err);
+    });
+  }, [props, elementKey]);
   const resolvedProps = useSyncExternalStore(props.subscribe, props.readStable, props.readStable);
   stylesheetFactory.useDefinedStyles();
   return resolvedProps;

package/dist/esm/runtimes/react/hooks/use-resolved-props.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/hooks/use-resolved-props.ts"],"sourcesContent":["import { useMemo, useEffect, useRef, useSyncExternalStore, useCallback } from 'react'\nimport {\n  ControlDefinition,\n  ControlInstance,\n  mapValues,\n  type Data,\n  type Resolvable,\n} from '@makeswift/controls'\n\nimport { useResourceResolver } from './use-resource-resolver'\n\nimport { type StylesheetFactory } from '../stylesheet-factory'\nimport { propErrorHandlingProxy } from '../utils/prop-error-handling-proxy'\n\nimport { useControlInstances } from './use-control-instances'\nimport { useResolvableRecord } from './use-resolvable-record'\n\ntype CacheItem = {\n  data: Data\n  control: ControlInstance | undefined\n  resolvedValue: Resolvable<unknown>\n}\n\nexport function useResolvedProps({\n  propDefs,\n  propData,\n  elementKey,\n  stylesheetFactory,\n}: {\n  propDefs: Record<string, ControlDefinition>\n  propData: Record<string, Data>\n  elementKey: string\n  stylesheetFactory: StylesheetFactory\n}): Record<string, unknown> {\n  const resourceResolver = useResourceResolver()\n  const controls = useControlInstances(elementKey)\n\n  const cache = useRef<Record<string, CacheItem>>({}).current\n  const resolveProp = useCallback(\n    (def: ControlDefinition, propName: string) => {\n      const data = propData[propName]\n      const control = controls?.[propName]\n\n      if (\n        cache[propName] != null &&\n        data === cache[propName].data &&\n        control === cache[propName].control\n      ) {\n        return cache[propName].resolvedValue\n      }\n\n      const resolvedValue = def.resolveValue(\n        data,\n        resourceResolver,\n        stylesheetFactory.get(propName),\n        control,\n      )\n\n      cache[propName] = { data, control, resolvedValue }\n      return resolvedValue\n    },\n    [controls, propData, resourceResolver, stylesheetFactory],\n  )\n\n  const resolvables = useMemo<Record<string, Resolvable<unknown>>>(\n    () =>\n      mapValues(propDefs, (def, propName) => {\n        const defaultValue = (def.config as any)?.defaultValue\n        return propErrorHandlingProxy(resolveProp(def, propName), defaultValue, error => {\n          console.warn(\n            `Error reading value for prop \"${propName}\", falling back to \\`${defaultValue}\\`.`,\n            { control: def, error },\n          )\n        })\n      }),\n    [propDefs, resolveProp],\n  )\n\n  const props = useResolvableRecord(resolvables)\n\n  // no need to call `triggerResolve` on the server, all the resources should already be in\n  // the host API client's cache (populated from the snapshot's cache)\n  useEffect(() => {\n    props.triggerResolve()\n  }, [props])\n\n  // the order is important here, the styles are defined in the process of the props resolution,\n  // calling `useDefinedStyles` before the props are resolved would effectively be a noop\n  const resolvedProps = useSyncExternalStore(props.subscribe, props.readStable, props.readStable)\n\n  stylesheetFactory.useDefinedStyles()\n\n  return resolvedProps\n}\n"],"mappings":"AAAA,SAAS,SAAS,WAAW,QAAQ,sBAAsB,mBAAmB;AAC9E;AAAA,EAGE;AAAA,OAGK;AAEP,SAAS,2BAA2B;AAGpC,SAAS,8BAA8B;AAEvC,SAAS,2BAA2B;AACpC,SAAS,2BAA2B;AAQ7B,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAK4B;AAC1B,QAAM,mBAAmB,oBAAoB;AAC7C,QAAM,WAAW,oBAAoB,UAAU;AAE/C,QAAM,QAAQ,OAAkC,CAAC,CAAC,EAAE;AACpD,QAAM,cAAc;AAAA,IAClB,CAAC,KAAwB,aAAqB;AAC5C,YAAM,OAAO,SAAS,QAAQ;AAC9B,YAAM,UAAU,WAAW,QAAQ;AAEnC,UACE,MAAM,QAAQ,KAAK,QACnB,SAAS,MAAM,QAAQ,EAAE,QACzB,YAAY,MAAM,QAAQ,EAAE,SAC5B;AACA,eAAO,MAAM,QAAQ,EAAE;AAAA,MACzB;AAEA,YAAM,gBAAgB,IAAI;AAAA,QACxB;AAAA,QACA;AAAA,QACA,kBAAkB,IAAI,QAAQ;AAAA,QAC9B;AAAA,MACF;AAEA,YAAM,QAAQ,IAAI,EAAE,MAAM,SAAS,cAAc;AACjD,aAAO;AAAA,IACT;AAAA,IACA,CAAC,UAAU,UAAU,kBAAkB,iBAAiB;AAAA,EAC1D;AAEA,QAAM,cAAc;AAAA,IAClB,MACE,UAAU,UAAU,CAAC,KAAK,aAAa;AACrC,YAAM,eAAgB,IAAI,QAAgB;AAC1C,aAAO,uBAAuB,YAAY,KAAK,QAAQ,GAAG,cAAc,WAAS;AAC/E,gBAAQ;AAAA,UACN,iCAAiC,QAAQ,wBAAwB,YAAY;AAAA,UAC7E,EAAE,SAAS,KAAK,MAAM;AAAA,QACxB;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,IACH,CAAC,UAAU,WAAW;AAAA,EACxB;AAEA,QAAM,QAAQ,oBAAoB,WAAW;AAI7C,YAAU,MAAM;AACd,UAAM,eAAe;AAAA,EACvB,GAAG,CAAC,KAAK,CAAC;AAIV,QAAM,gBAAgB,qBAAqB,MAAM,WAAW,MAAM,YAAY,MAAM,UAAU;AAE9F,oBAAkB,iBAAiB;AAEnC,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../../../../src/runtimes/react/hooks/use-resolved-props.ts"],"sourcesContent":["import { useMemo, useEffect, useRef, useSyncExternalStore, useCallback } from 'react'\nimport {\n  ControlDefinition,\n  ControlInstance,\n  mapValues,\n  type Data,\n  type Resolvable,\n} from '@makeswift/controls'\n\nimport { useResourceResolver } from './use-resource-resolver'\n\nimport { type StylesheetFactory } from '../stylesheet-factory'\nimport { propErrorHandlingProxy } from '../utils/prop-error-handling-proxy'\n\nimport { useResolvableRecord } from './use-resolvable-record'\n\ntype CacheItem = {\n  data: Data\n  control: ControlInstance | undefined\n  resolvedValue: Resolvable<unknown>\n}\n\nexport function useResolvedProps({\n  elementKey,\n  propDefs,\n  propData,\n  controlInstances,\n  stylesheetFactory,\n}: {\n  elementKey: string\n  propDefs: Record<string, ControlDefinition>\n  propData: Record<string, Data>\n  controlInstances: Record<string, ControlInstance> | null\n  stylesheetFactory: StylesheetFactory\n}): Record<string, unknown> {\n  const resourceResolver = useResourceResolver()\n\n  const cache = useRef<Record<string, CacheItem>>({}).current\n  const resolveProp = useCallback(\n    (def: ControlDefinition, propName: string) => {\n      const data = propData[propName]\n      const control = controlInstances?.[propName]\n\n      if (\n        cache[propName] != null &&\n        data === cache[propName].data &&\n        control === cache[propName].control\n      ) {\n        return cache[propName].resolvedValue\n      }\n\n      const resolvedValue = def.resolveValue(\n        data,\n        resourceResolver,\n        stylesheetFactory.get(propName),\n        control,\n      )\n\n      cache[propName] = { data, control, resolvedValue }\n      return resolvedValue\n    },\n    [propData, cache, resourceResolver, controlInstances, stylesheetFactory],\n  )\n\n  const resolvables = useMemo<Record<string, Resolvable<unknown>>>(\n    () =>\n      mapValues(propDefs, (def, propName) => {\n        const defaultValue = (def.config as any)?.defaultValue\n        return propErrorHandlingProxy(resolveProp(def, propName), defaultValue, error => {\n          console.warn(\n            `Error reading value for prop \"${propName}\" of element ${elementKey}, falling back to \\`${defaultValue}\\`.`,\n            { control: def, error },\n          )\n        })\n      }),\n    [propDefs, resolveProp, elementKey],\n  )\n\n  const props = useResolvableRecord(resolvables)\n\n  // no need to call `triggerResolve` on the server, all the resources should already be in\n  // the host API client's cache (populated from the snapshot's cache)\n  useEffect(() => {\n    props.triggerResolve().catch(err => {\n      console.log(`Error while resolving props for element ${elementKey}`, err)\n    })\n  }, [props, elementKey])\n\n  // the order is important here, the styles are defined in the process of the props resolution,\n  // calling `useDefinedStyles` before the props are resolved would effectively be a noop\n  const resolvedProps = useSyncExternalStore(props.subscribe, props.readStable, props.readStable)\n\n  stylesheetFactory.useDefinedStyles()\n\n  return resolvedProps\n}\n"],"mappings":"AAAA,SAAS,SAAS,WAAW,QAAQ,sBAAsB,mBAAmB;AAC9E;AAAA,EAGE;AAAA,OAGK;AAEP,SAAS,2BAA2B;AAGpC,SAAS,8BAA8B;AAEvC,SAAS,2BAA2B;AAQ7B,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAM4B;AAC1B,QAAM,mBAAmB,oBAAoB;AAE7C,QAAM,QAAQ,OAAkC,CAAC,CAAC,EAAE;AACpD,QAAM,cAAc;AAAA,IAClB,CAAC,KAAwB,aAAqB;AAC5C,YAAM,OAAO,SAAS,QAAQ;AAC9B,YAAM,UAAU,mBAAmB,QAAQ;AAE3C,UACE,MAAM,QAAQ,KAAK,QACnB,SAAS,MAAM,QAAQ,EAAE,QACzB,YAAY,MAAM,QAAQ,EAAE,SAC5B;AACA,eAAO,MAAM,QAAQ,EAAE;AAAA,MACzB;AAEA,YAAM,gBAAgB,IAAI;AAAA,QACxB;AAAA,QACA;AAAA,QACA,kBAAkB,IAAI,QAAQ;AAAA,QAC9B;AAAA,MACF;AAEA,YAAM,QAAQ,IAAI,EAAE,MAAM,SAAS,cAAc;AACjD,aAAO;AAAA,IACT;AAAA,IACA,CAAC,UAAU,OAAO,kBAAkB,kBAAkB,iBAAiB;AAAA,EACzE;AAEA,QAAM,cAAc;AAAA,IAClB,MACE,UAAU,UAAU,CAAC,KAAK,aAAa;AACrC,YAAM,eAAgB,IAAI,QAAgB;AAC1C,aAAO,uBAAuB,YAAY,KAAK,QAAQ,GAAG,cAAc,WAAS;AAC/E,gBAAQ;AAAA,UACN,iCAAiC,QAAQ,gBAAgB,UAAU,uBAAuB,YAAY;AAAA,UACtG,EAAE,SAAS,KAAK,MAAM;AAAA,QACxB;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,IACH,CAAC,UAAU,aAAa,UAAU;AAAA,EACpC;AAEA,QAAM,QAAQ,oBAAoB,WAAW;AAI7C,YAAU,MAAM;AACd,UAAM,eAAe,EAAE,MAAM,SAAO;AAClC,cAAQ,IAAI,2CAA2C,UAAU,IAAI,GAAG;AAAA,IAC1E,CAAC;AAAA,EACH,GAAG,CAAC,OAAO,UAAU,CAAC;AAItB,QAAM,gBAAgB,qBAAqB,MAAM,WAAW,MAAM,YAAY,MAAM,UAAU;AAE9F,oBAAkB,iBAAiB;AAEnC,SAAO;AACT;","names":[]}

package/dist/esm/runtimes/react/hooks/use-resolved-value-override.js

@@ -0,0 +1,35 @@
+"use client";
+import { createContext, useContext } from "react";
+import {
+  hasResolvedValueOverride,
+  getResolvedValueOverride
+} from "../../../state/read-write-state";
+import { isReadWriteState } from "../../../state/unified-state";
+import { useSelector } from "./use-selector";
+import { useDocumentKey } from "./use-document-context";
+const DisableResolvedValueOverride = createContext(void 0);
+function useIsResolvedValueOverrideDisabled(instanceKey) {
+  const disabledKey = useContext(DisableResolvedValueOverride);
+  return disabledKey?.elementKey === instanceKey?.elementKey && disabledKey?.propPath === instanceKey?.propPath;
+}
+const useResolvedValueOverride = (instanceKey) => {
+  const documentKey = useDocumentKey();
+  const isDisabled = useIsResolvedValueOverrideDisabled(instanceKey);
+  return useSelector(
+    (state) => {
+      if (documentKey == null || instanceKey == null || !isReadWriteState(state))
+        return [void 0, false];
+      return [
+        getResolvedValueOverride(state, documentKey, instanceKey),
+        !isDisabled && hasResolvedValueOverride(state, documentKey, instanceKey)
+      ];
+    },
+    (a, b) => a[0] === b[0] && a[1] === b[1]
+  );
+};
+export {
+  DisableResolvedValueOverride,
+  useIsResolvedValueOverrideDisabled,
+  useResolvedValueOverride
+};
+//# sourceMappingURL=use-resolved-value-override.js.map

package/dist/esm/runtimes/react/hooks/use-resolved-value-override.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/hooks/use-resolved-value-override.tsx"],"sourcesContent":["'use client'\n\nimport { createContext, useContext } from 'react'\n\nimport {\n  type ResolvedValueKey,\n  type ResolvedValue,\n  hasResolvedValueOverride,\n  getResolvedValueOverride,\n} from '../../../state/read-write-state'\n\nimport { isReadWriteState } from '../../../state/unified-state'\nimport { useSelector } from './use-selector'\nimport { useDocumentKey } from './use-document-context'\n\nexport const DisableResolvedValueOverride = createContext<ResolvedValueKey | undefined>(undefined)\n\nexport function useIsResolvedValueOverrideDisabled(\n  instanceKey: ResolvedValueKey | undefined,\n): boolean {\n  const disabledKey = useContext(DisableResolvedValueOverride)\n  return (\n    disabledKey?.elementKey === instanceKey?.elementKey &&\n    disabledKey?.propPath === instanceKey?.propPath\n  )\n}\n\nexport const useResolvedValueOverride = (\n  instanceKey: ResolvedValueKey | undefined,\n): [ResolvedValue, boolean] => {\n  const documentKey = useDocumentKey()\n  const isDisabled = useIsResolvedValueOverrideDisabled(instanceKey)\n\n  return useSelector(\n    state => {\n      if (documentKey == null || instanceKey == null || !isReadWriteState(state))\n        return [undefined, false]\n\n      return [\n        getResolvedValueOverride(state, documentKey, instanceKey),\n        !isDisabled && hasResolvedValueOverride(state, documentKey, instanceKey),\n      ]\n    },\n    (a, b) => a[0] === b[0] && a[1] === b[1],\n  )\n}\n"],"mappings":";AAEA,SAAS,eAAe,kBAAkB;AAE1C;AAAA,EAGE;AAAA,EACA;AAAA,OACK;AAEP,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAExB,MAAM,+BAA+B,cAA4C,MAAS;AAE1F,SAAS,mCACd,aACS;AACT,QAAM,cAAc,WAAW,4BAA4B;AAC3D,SACE,aAAa,eAAe,aAAa,cACzC,aAAa,aAAa,aAAa;AAE3C;AAEO,MAAM,2BAA2B,CACtC,gBAC6B;AAC7B,QAAM,cAAc,eAAe;AACnC,QAAM,aAAa,mCAAmC,WAAW;AAEjE,SAAO;AAAA,IACL,WAAS;AACP,UAAI,eAAe,QAAQ,eAAe,QAAQ,CAAC,iBAAiB,KAAK;AACvE,eAAO,CAAC,QAAW,KAAK;AAE1B,aAAO;AAAA,QACL,yBAAyB,OAAO,aAAa,WAAW;AAAA,QACxD,CAAC,cAAc,yBAAyB,OAAO,aAAa,WAAW;AAAA,MACzE;AAAA,IACF;AAAA,IACA,CAAC,GAAG,MAAM,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,CAAC;AAAA,EACzC;AACF;","names":[]}

package/dist/esm/runtimes/react/hooks/use-selector.js

@@ -1,8 +1,14 @@
 import { useSyncExternalStoreWithSelector } from "use-sync-external-store/with-selector";
 import { useStore } from "./use-store";
-function useSelector(selector) {
+function useSelector(selector, isEqual) {
   const store = useStore();
-  return useSyncExternalStoreWithSelector(store.subscribe, store.getState, store.getState, selector);
+  return useSyncExternalStoreWithSelector(
+    store.subscribe,
+    store.getState,
+    store.getState,
+    selector,
+    isEqual
+  );
 }
 export {
   useSelector

package/dist/esm/runtimes/react/hooks/use-selector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/hooks/use-selector.ts"],"sourcesContent":["import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector'\n\nimport { useStore } from './use-store'\nimport { type State as ReadOnlyState } from '../../../state/read-only-state'\nimport { type State as ReadWriteState } from '../../../state/read-write-state'\n\ntype State = ReadOnlyState | ReadWriteState\n\nexport function useSelector<R>(selector: (state: State) => R): R {\n  const store = useStore()\n\n  return useSyncExternalStoreWithSelector(store.subscribe, store.getState, store.getState, selector)\n}\n"],"mappings":"AAAA,SAAS,wCAAwC;AAEjD,SAAS,gBAAgB;AAMlB,SAAS,YAAe,UAAkC;AAC/D,QAAM,QAAQ,SAAS;AAEvB,SAAO,iCAAiC,MAAM,WAAW,MAAM,UAAU,MAAM,UAAU,QAAQ;AACnG;","names":[]}
+{"version":3,"sources":["../../../../../src/runtimes/react/hooks/use-selector.ts"],"sourcesContent":["import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector'\n\nimport { type State } from '../../../state/unified-state'\n\nimport { useStore } from './use-store'\n\nexport function useSelector<R>(\n  selector: (state: State) => R,\n  isEqual?: (a: R, b: R) => boolean,\n): R {\n  const store = useStore()\n\n  return useSyncExternalStoreWithSelector(\n    store.subscribe,\n    store.getState,\n    store.getState,\n    selector,\n    isEqual,\n  )\n}\n"],"mappings":"AAAA,SAAS,wCAAwC;AAIjD,SAAS,gBAAgB;AAElB,SAAS,YACd,UACA,SACG;AACH,QAAM,QAAQ,SAAS;AAEvB,SAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN;AAAA,IACA;AAAA,EACF;AACF;","names":[]}

package/dist/esm/runtimes/react/testing/index.js

@@ -0,0 +1,3 @@
+export * from "./react-provider";
+export * from "./react-runtime";
+//# sourceMappingURL=index.js.map

package/dist/esm/runtimes/react/testing/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/testing/index.ts"],"sourcesContent":["export * from './react-provider'\nexport * from './react-runtime'\n"],"mappings":"AAAA,cAAc;AACd,cAAc;","names":[]}

package/dist/esm/runtimes/react/testing/react-provider.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { RuntimeProvider } from "../components/RuntimeProvider";
+import { DefaultRootStyleRegistry } from "../root-style-registry";
+function ReactProvider({
+  children,
+  runtime,
+  siteVersion = null
+}) {
+  return /* @__PURE__ */ jsx(RuntimeProvider, { siteVersion, runtime, children: /* @__PURE__ */ jsx(DefaultRootStyleRegistry, { children }) });
+}
+export {
+  ReactProvider
+};
+//# sourceMappingURL=react-provider.js.map

package/dist/esm/runtimes/react/testing/react-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/testing/react-provider.tsx"],"sourcesContent":["import { type ReactRuntimeCore } from '../react-runtime-core'\nimport { RuntimeProvider } from '../components/RuntimeProvider'\n\nimport { DefaultRootStyleRegistry } from '../root-style-registry'\nimport { SiteVersion } from '../../../api/site-version'\n\nexport function ReactProvider({\n  children,\n  runtime,\n  siteVersion = null,\n}: {\n  children: React.ReactNode\n  runtime: ReactRuntimeCore\n  siteVersion?: SiteVersion | null\n}) {\n  return (\n    <RuntimeProvider siteVersion={siteVersion} runtime={runtime}>\n      <DefaultRootStyleRegistry>{children}</DefaultRootStyleRegistry>\n    </RuntimeProvider>\n  )\n}\n"],"mappings":"AAiBM;AAhBN,SAAS,uBAAuB;AAEhC,SAAS,gCAAgC;AAGlC,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,cAAc;AAChB,GAIG;AACD,SACE,oBAAC,mBAAgB,aAA0B,SACzC,8BAAC,4BAA0B,UAAS,GACtC;AAEJ;","names":[]}