@makeswift/runtime 0.28.8-canary.8 → 0.28.8

package/dist/cjs/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":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBM;AAnBN,yCAGO;AAEA,MAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA,UAAU;AACZ,MAAqF;AAInF,QAAM,CAAC,eAAe,cAAc,QAAI,6DAAyB,WAAW;AAC5E,MAAI,gBAAgB;AAKlB,WACE,4CAAC,gEAA6B,UAA7B,EAAsC,OAAO,aAC3C,yBACH;AAAA,EAEJ;AAEA,SAAO;AACT;AAEA,IAAO,8BAAQ;","names":[]}

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

@@ -0,0 +1,51 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var node_value_exports = {};
+__export(node_value_exports, {
+  NodeValue: () => NodeValue
+});
+module.exports = __toCommonJS(node_value_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_use_is_read_only = require("../../hooks/use-is-read-only");
+const EditableNodeValue = (0, import_react.lazy)(() => Promise.resolve().then(() => __toESM(require("./editable-node-value"))));
+const ReadOnlyNodeValue = ({ children }) => children;
+const NodeValue = (0, import_react.memo)(function NodeValue2({
+  instanceKey,
+  children
+}) {
+  const NodeContainer = (0, import_use_is_read_only.useIsReadOnly)() ? ReadOnlyNodeValue : EditableNodeValue;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NodeContainer, { instanceKey, children });
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  NodeValue
+});
+//# sourceMappingURL=index.js.map

package/dist/cjs/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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBS;AAdT,mBAAmE;AAInE,8BAA8B;AAE9B,MAAM,wBAAoB,mBAAK,MAAM,6CAAO,uBAAuB,GAAC;AACpE,MAAM,oBAAoB,CAAC,EAAE,SAAS,MAAyB;AAExD,MAAM,gBAAY,mBAAK,SAASA,WAAU;AAAA,EAC/C;AAAA,EACA;AACF,GAAkF;AAChF,QAAM,oBAAgB,uCAAc,IAAI,oBAAoB;AAC5D,SAAO,4CAAC,iBAAc,aAA2B,UAAS;AAC5D,CAAC;","names":["NodeValue"]}

package/dist/cjs/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":["import_slate","EditableText","isHotkey","SlateReact"]}
+{"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":["import_slate","EditableText","isHotkey","SlateReact"]}

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

@@ -33,7 +33,7 @@ __export(rich_text_exports, {
 module.exports = __toCommonJS(rich_text_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-var import_prop_controller_handles = require("../../../../state/modules/prop-controller-handles");
+var import_prop_controllers = require("../../../../state/modules/read-write/prop-controllers");
 var import_use_is_read_only = require("../../hooks/use-is-read-only");
 const EditableText = (0, import_react.lazy)(() => Promise.resolve().then(() => __toESM(require("./EditableText"))));
 const ReadOnlyText = (0, import_react.lazy)(() => Promise.resolve().then(() => __toESM(require("./ReadOnlyText"))));
@@ -46,7 +46,7 @@ function RichText({
 }) {
   const textCallbackRef = (0, import_react.useCallback)(
     (handle) => {
-      if ((0, import_prop_controller_handles.isPropControllersHandle)(handle))
+      if ((0, import_prop_controllers.isPropControllersHandle)(handle))
         handle?.setPropControllers?.(control == null ? null : { text: control });
     },
     [control]

package/dist/cjs/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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBS;AAvBT,mBAA6C;AAK7C,qCAGO;AAEP,8BAA8B;AAE9B,MAAM,mBAAe,mBAAK,MAAM,6CAAO,gBAAgB,GAAC;AACxD,MAAM,mBAAe,mBAAK,MAAM,6CAAO,gBAAgB,GAAC;AAMjD,SAAS,eACd,MACA,SACA;AACA,SAAO,4CAAC,YAAS,MAAY,SAAkB;AACjD;AAEA,SAAS,SAAS;AAAA,EAChB;AAAA,EACA;AACF,GAGG;AACD,QAAM,sBAAkB;AAAA,IACtB,CAAC,WAAuE;AACtE,cAAI,wDAAwB,MAAM;AAChC,gBAAQ,qBAAqB,WAAW,OAAO,OAAO,EAAE,MAAM,QAAQ,CAAC;AAAA,IAC3E;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,aAAO,uCAAc,IACnB,4CAAC,gBAAa,MAAM,MAAM,KAAK,iBAAiB,IAEhD,4CAAC,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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBS;AAvBT,mBAA6C;AAK7C,8BAGO;AAEP,8BAA8B;AAE9B,MAAM,mBAAe,mBAAK,MAAM,6CAAO,gBAAgB,GAAC;AACxD,MAAM,mBAAe,mBAAK,MAAM,6CAAO,gBAAgB,GAAC;AAMjD,SAAS,eACd,MACA,SACA;AACA,SAAO,4CAAC,YAAS,MAAY,SAAkB;AACjD;AAEA,SAAS,SAAS;AAAA,EAChB;AAAA,EACA;AACF,GAGG;AACD,QAAM,sBAAkB;AAAA,IACtB,CAAC,WAAuE;AACtE,cAAI,iDAAwB,MAAM;AAChC,gBAAQ,qBAAqB,WAAW,OAAO,OAAO,EAAE,MAAM,QAAQ,CAAC;AAAA,IAC3E;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,aAAO,uCAAc,IACnB,4CAAC,gBAAa,MAAM,MAAM,KAAK,iBAAiB,IAEhD,4CAAC,gBAAa,MAAM,MAAM,KAAK,iBAAiB;AAEpD;","names":[]}

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

@@ -0,0 +1,29 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var slot_exports = {};
+__export(slot_exports, {
+  renderSlot: () => import_render_slot.renderSlot
+});
+module.exports = __toCommonJS(slot_exports);
+var import_render_slot = require("./render-slot");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  renderSlot
+});
+//# sourceMappingURL=index.js.map

package/dist/cjs/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;AAAA;AAAA;AAAA;AAAA;AAAA,yBAA2B;","names":[]}

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

@@ -0,0 +1,37 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var render_slot_exports = {};
+__export(render_slot_exports, {
+  renderSlot: () => renderSlot
+});
+module.exports = __toCommonJS(render_slot_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_slot_value = require("./slot-value");
+function renderSlot({
+  data,
+  control,
+  config
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_slot_value.SlotValue, { data, instanceKey: control?.instanceKey, config });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  renderSlot
+});
+//# sourceMappingURL=render-slot.js.map

package/dist/cjs/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":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAyBS;AApBT,wBAA0B;AAEnB,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AACF,GAIc;AAUZ,SAAO,4CAAC,+BAAU,MAAY,aAAa,SAAS,aAAa,QAAgB;AACnF;","names":[]}

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

@@ -17,36 +17,41 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var slot_exports = {};
-__export(slot_exports, {
+var slot_value_exports = {};
+__export(slot_value_exports, {
   Slot: () => Slot,
-  renderSlot: () => renderSlot
+  SlotValue: () => SlotValue
 });
-module.exports = __toCommonJS(slot_exports);
+module.exports = __toCommonJS(slot_value_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_css = require("@emotion/css");
-var import_Element = require("../components/Element");
-var import_use_is_in_builder = require("../hooks/use-is-in-builder");
-var import_columns = require("../../../components/utils/columns");
-var import_responsive_style = require("../../../components/utils/responsive-style");
-var import_use_style = require("../use-style");
-var import_poll_box_model = require("../poll-box-model");
-function renderSlot(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SlotValue, { ...props });
-}
-const SlotValue = (0, import_react.memo)(
-  ({
-    data,
-    control,
-    config
-  }) => {
-    if (data == null || data.elements.length === 0) {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Slot.Placeholder, { control, placeholder: config.unstable_placeholder });
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Slot, { control, children: data.elements.map((element, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Slot.Item, { control, grid: data.columns, index: i, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Element.Element, { element }) }, element.key)) });
+var import_controls = require("@makeswift/controls");
+var import_Element = require("../../components/Element");
+var import_columns = require("../../../../components/utils/columns");
+var import_responsive_style = require("../../../../components/utils/responsive-style");
+var import_use_is_in_builder = require("../../hooks/use-is-in-builder");
+var import_use_control_instance = require("../../hooks/use-control-instance");
+var import_use_style = require("../../use-style");
+var import_poll_box_model = require("../../poll-box-model");
+var import_node_value = require("../node-value");
+const SlotValue = (0, import_react.memo)(function SlotValue2({
+  instanceKey,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_node_value.NodeValue, { instanceKey, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SlotOrPlaceholder, { instanceKey, ...props }) });
+});
+const SlotOrPlaceholder = ({
+  data,
+  instanceKey,
+  config
+}) => {
+  const control = (0, import_use_control_instance.useControlInstance)(instanceKey, import_controls.SlotControl);
+  if (data == null || data.elements.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Slot.Placeholder, { control, placeholder: config.unstable_placeholder });
   }
-);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Slot, { control, children: data.elements.map((element, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Slot.Item, { control, grid: data.columns, index: i, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Element.Element, { element }) }, element.key)) });
+};
 function Slot({
   as,
   control,
@@ -178,6 +183,6 @@ function SlotPlaceholder({ control, placeholder }) {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Slot,
-  renderSlot
+  SlotValue
 });
-//# sourceMappingURL=slot.js.map
+//# sourceMappingURL=slot-value.js.map

package/dist/cjs/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/cjs/runtimes/react/element-imperative-handle.js

@@ -23,7 +23,7 @@ __export(element_imperative_handle_exports, {
 });
 module.exports = __toCommonJS(element_imperative_handle_exports);
 var import_box_models2 = require("../../state/modules/read-write/box-models");
-var import_prop_controller_handles = require("../../state/modules/prop-controller-handles");
+var import_prop_controllers = require("../../state/modules/read-write/prop-controllers");
 class ElementImperativeHandle {
   getCurrent = () => null;
   lastPropControllers = null;
@@ -41,7 +41,7 @@ class ElementImperativeHandle {
   }
   setPropControllers(propControllers) {
     const current = this.getCurrent();
-    if ((0, import_prop_controller_handles.isPropControllersHandle)(current))
+    if ((0, import_prop_controllers.isPropControllersHandle)(current))
       current.setPropControllers(propControllers);
     this.lastPropControllers = propControllers;
   }

package/dist/cjs/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":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,IAAAA,qBAAsC;AACtC,qCAGO;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,eAAO,iCAAa,OAAO,QAAI,4BAAQ,OAAO,IAAI;AAAA,EACpD;AAAA,EAEA,mBAAmB,iBAA6D;AAC9E,UAAM,UAAU,KAAK,WAAW;AAEhC,YAAI,wDAAwB,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":["import_box_models"]}
+{"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":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,IAAAA,qBAAsC;AACtC,8BAGO;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,eAAO,iCAAa,OAAO,QAAI,4BAAQ,OAAO,IAAI;AAAA,EACpD;AAAA,EAEA,mBAAmB,iBAA6D;AAC9E,UAAM,UAAU,KAAK,WAAW;AAEhC,YAAI,iDAAwB,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":["import_box_models"]}

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

@@ -0,0 +1,88 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var use_control_instance_exports = {};
+__export(use_control_instance_exports, {
+  getInstanceByPropPath: () => getInstanceByPropPath,
+  getInstanceChainByPropPath: () => getInstanceChainByPropPath,
+  useControlInstance: () => useControlInstance
+});
+module.exports = __toCommonJS(use_control_instance_exports);
+var import_react = require("react");
+var import_controls = require("@makeswift/controls");
+var import_use_control_instances = require("./use-control-instances");
+function useControlInstance(instanceKey, instanceClass) {
+  const { elementKey, propPath } = instanceKey ?? {};
+  const instances = (0, import_use_control_instances.useControlInstances)(elementKey);
+  const getInstance = (0, import_react.useCallback)(
+    () => instances != null && propPath != null ? getInstanceByPropPath(instances, propPath) : null,
+    [instances, propPath]
+  );
+  const subscribe = (0, import_react.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(import_controls.isNotNil);
+        unsubscribes = chain.map((instance) => instance.subscribe(handleStateChange));
+      };
+      resubscribe();
+      return () => unsubscribes.forEach((unsubscribe) => unsubscribe());
+    },
+    [instances, propPath]
+  );
+  const result = (0, import_react.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;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getInstanceByPropPath,
+  getInstanceChainByPropPath,
+  useControlInstance
+});
+//# sourceMappingURL=use-control-instance.js.map

package/dist/cjs/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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkD;AAClD,sBAA2E;AAE3E,mCAAoC;AAI7B,SAAS,mBACd,aACA,eACU;AACV,QAAM,EAAE,YAAY,SAAS,IAAI,eAAe,CAAC;AAEjD,QAAM,gBAAY,kDAAoB,UAAU;AAChD,QAAM,kBAAc;AAAA,IAClB,MACE,aAAa,QAAQ,YAAY,OAAO,sBAAsB,WAAW,QAAQ,IAAI;AAAA,IACvF,CAAC,WAAW,QAAQ;AAAA,EACtB;AAEA,QAAM,gBAAY;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,wBAAQ;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,aAAS,mCAAqB,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/cjs/runtimes/react/hooks/use-control-instances.js

@@ -18,20 +18,10 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var use_control_instances_exports = {};
 __export(use_control_instances_exports, {
-  useControlInstances: () => useControlInstances
+  useControlInstances: () => import_control_instances_context.useControlInstances
 });
 module.exports = __toCommonJS(use_control_instances_exports);
-var import_read_only_state = require("../../../state/read-only-state");
-var import_use_document_context = require("./use-document-context");
-var import_use_selector = require("./use-selector");
-function useControlInstances(elementKey) {
-  const documentKey = (0, import_use_document_context.useDocumentKey)();
-  return (0, import_use_selector.useSelector)((state) => {
-    if (documentKey == null)
-      return null;
-    return (0, import_read_only_state.getPropControllers)(state, { documentKey, elementKey });
-  });
-}
+var import_control_instances_context = require("../components/control-instances-context");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   useControlInstances

package/dist/cjs/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":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,6BAAmC;AACnC,kCAA+B;AAC/B,0BAA4B;AAErB,SAAS,oBAAoB,YAA4D;AAC9F,QAAM,kBAAc,4CAAe;AAEnC,aAAO,iCAAY,WAAS;AAC1B,QAAI,eAAe;AAAM,aAAO;AAEhC,eAAO,2CAAmB,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;AAAA;AAAA;AAAA;AAAA;AAAA,uCAAoC;","names":[]}

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

@@ -19,17 +19,17 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var use_disable_register_element_exports = {};
 __export(use_disable_register_element_exports, {
   DisableRegisterElement: () => DisableRegisterElement,
-  useDisableRegisterElement: () => useDisableRegisterElement
+  useIsRegisterElementDisabled: () => useIsRegisterElementDisabled
 });
 module.exports = __toCommonJS(use_disable_register_element_exports);
 var import_react = require("react");
 const DisableRegisterElement = (0, import_react.createContext)(false);
-function useDisableRegisterElement() {
+function useIsRegisterElementDisabled() {
   return (0, import_react.useContext)(DisableRegisterElement);
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DisableRegisterElement,
-  useDisableRegisterElement
+  useIsRegisterElementDisabled
 });
 //# sourceMappingURL=use-disable-register-element.js.map

package/dist/cjs/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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA0C;AAEnC,MAAM,6BAAyB,4BAAc,KAAK;AAElD,SAAS,4BAA4B;AAC1C,aAAO,yBAAW,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA0C;AAEnC,MAAM,6BAAyB,4BAAc,KAAK;AAElD,SAAS,+BAA+B;AAC7C,aAAO,yBAAW,sBAAsB;AAC1C;","names":[]}

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

@@ -25,21 +25,20 @@ var import_react = require("react");
 var import_controls = require("@makeswift/controls");
 var import_use_resource_resolver = require("./use-resource-resolver");
 var import_prop_error_handling_proxy = require("../utils/prop-error-handling-proxy");
-var import_use_control_instances = require("./use-control-instances");
 var import_use_resolvable_record = require("./use-resolvable-record");
 function useResolvedProps({
+  elementKey,
   propDefs,
   propData,
-  elementKey,
+  controlInstances,
   stylesheetFactory
 }) {
   const resourceResolver = (0, import_use_resource_resolver.useResourceResolver)();
-  const controls = (0, import_use_control_instances.useControlInstances)(elementKey);
   const cache = (0, import_react.useRef)({}).current;
   const resolveProp = (0, import_react.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;
       }
@@ -52,24 +51,26 @@ function useResolvedProps({
       cache[propName] = { data, control, resolvedValue };
       return resolvedValue;
     },
-    [controls, propData, resourceResolver, stylesheetFactory]
+    [propData, cache, resourceResolver, controlInstances, stylesheetFactory]
   );
   const resolvables = (0, import_react.useMemo)(
     () => (0, import_controls.mapValues)(propDefs, (def, propName) => {
       const defaultValue = def.config?.defaultValue;
       return (0, import_prop_error_handling_proxy.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 = (0, import_use_resolvable_record.useResolvableRecord)(resolvables);
   (0, import_react.useEffect)(() => {
-    props.triggerResolve();
-  }, [props]);
+    props.triggerResolve().catch((err) => {
+      console.log(`Error while resolving props for element ${elementKey}`, err);
+    });
+  }, [props, elementKey]);
   const resolvedProps = (0, import_react.useSyncExternalStore)(props.subscribe, props.readStable, props.readStable);
   stylesheetFactory.useDefinedStyles();
   return resolvedProps;

package/dist/cjs/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;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA8E;AAC9E,sBAMO;AAEP,mCAAoC;AAGpC,uCAAuC;AAEvC,mCAAoC;AACpC,mCAAoC;AAQ7B,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAK4B;AAC1B,QAAM,uBAAmB,kDAAoB;AAC7C,QAAM,eAAW,kDAAoB,UAAU;AAE/C,QAAM,YAAQ,qBAAkC,CAAC,CAAC,EAAE;AACpD,QAAM,kBAAc;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,kBAAc;AAAA,IAClB,UACE,2BAAU,UAAU,CAAC,KAAK,aAAa;AACrC,YAAM,eAAgB,IAAI,QAAgB;AAC1C,iBAAO,yDAAuB,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,YAAQ,kDAAoB,WAAW;AAI7C,8BAAU,MAAM;AACd,UAAM,eAAe;AAAA,EACvB,GAAG,CAAC,KAAK,CAAC;AAIV,QAAM,oBAAgB,mCAAqB,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;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA8E;AAC9E,sBAMO;AAEP,mCAAoC;AAGpC,uCAAuC;AAEvC,mCAAoC;AAQ7B,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAM4B;AAC1B,QAAM,uBAAmB,kDAAoB;AAE7C,QAAM,YAAQ,qBAAkC,CAAC,CAAC,EAAE;AACpD,QAAM,kBAAc;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,kBAAc;AAAA,IAClB,UACE,2BAAU,UAAU,CAAC,KAAK,aAAa;AACrC,YAAM,eAAgB,IAAI,QAAgB;AAC1C,iBAAO,yDAAuB,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,YAAQ,kDAAoB,WAAW;AAI7C,8BAAU,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,oBAAgB,mCAAqB,MAAM,WAAW,MAAM,YAAY,MAAM,UAAU;AAE9F,oBAAkB,iBAAiB;AAEnC,SAAO;AACT;","names":[]}