@makeswift/runtime 0.21.3 → 0.22.0

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

@@ -28,128 +28,32 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var controls_exports = {};
 __export(controls_exports, {
-  PropsValue: () => PropsValue
+  ResolveProps: () => ResolveProps
 });
 module.exports = __toCommonJS(controls_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
+var import_partition = require("../../utils/partition");
 var ReactPage = __toESM(require("../../state/react-page"));
-var import_controls = require("../../controls");
 var import_descriptors = require("../../prop-controllers/descriptors");
-var import_style = require("./controls/style");
-var import_control = require("./controls/control");
-var import_slot = require("./controls/slot");
-var import_rich_text = require("./controls/rich-text/rich-text");
-var import_rich_text_v2 = require("./controls/rich-text-v2");
 var import_use_store = require("./hooks/use-store");
-var import_use_document_key = require("./hooks/use-document-key");
-var import_use_selector = require("./hooks/use-selector");
-var import_components = require("./components");
 var import_legacy_controls = require("./legacy-controls");
-function PropsValue({ element, children }) {
+var import_use_resolved_props = require("./hooks/use-resolved-props");
+function useControlDefs(elementType) {
   const store = (0, import_use_store.useStore)();
-  const propControllerDescriptorsRef = (0, import_react.useRef)(
-    ReactPage.getComponentPropControllerDescriptors(store.getState(), element.type) ?? {}
+  const all = ReactPage.getComponentPropControllerDescriptors(store.getState(), elementType) ?? {};
+  return (0, import_react.useRef)((0, import_partition.partitionRecord)(all, import_descriptors.isLegacyDescriptor)).current;
+}
+function ResolveProps({ element, children: renderComponent }) {
+  const [legacyDescriptors, definitions] = useControlDefs(element.type);
+  const resolvedProps = (0, import_use_resolved_props.useResolvedProps)(definitions, element.props, element.key);
+  const renderFn = Object.entries(legacyDescriptors).reduceRight(
+    (renderFn2, [propName, descriptor]) => (props) => (0, import_legacy_controls.resolveLegacyDescriptorProp)(descriptor, propName, element.props[propName], props, renderFn2),
+    renderComponent
   );
-  const props = element.props;
-  const documentKey = (0, import_use_document_key.useDocumentKey)();
-  const propControllers = (0, import_use_selector.useSelector)((state) => {
-    if (documentKey == null)
-      return null;
-    return ReactPage.getPropControllers(state, documentKey, element.key);
-  });
-  return Object.entries(propControllerDescriptorsRef.current).reduceRight(
-    (renderFn, [propName, descriptor]) => (propsValue) => {
-      if ((0, import_descriptors.isLegacyDescriptor)(descriptor)) {
-        return (0, import_legacy_controls.resolveLegacyDescriptorProp)(
-          descriptor,
-          propName,
-          props[propName],
-          propsValue,
-          renderFn
-        );
-      }
-      switch (descriptor.controlType) {
-        case import_controls.CheckboxDefinition.type:
-        case import_controls.NumberDefinition.type:
-        case import_controls.TextInputDefinition.type:
-        case import_controls.TextAreaDefinition.type:
-        case import_controls.SelectDefinition.type:
-        case import_controls.ColorDefinition.type:
-        case import_controls.IconRadioGroupDefinition.type:
-        case import_controls.ImageDefinition.type:
-        case import_controls.ComboboxDefinition.type:
-        case import_controls.ShapeDefinition.type:
-        case import_controls.ListDefinition.type:
-        case import_controls.LinkDefinition.type:
-        case import_controls.StyleV2Definition.type:
-        case import_controls.unstable_TypographyDefinition.type:
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_control.ControlValue,
-            {
-              definition: descriptor,
-              data: props[propName],
-              control: propControllers?.[propName],
-              children: (value) => renderFn({ ...propsValue, [propName]: value })
-            }
-          );
-        case import_controls.StyleDefinition.type: {
-          const control = propControllers?.[propName] ?? null;
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_components.RenderHook,
-            {
-              hook: import_style.useFormattedStyle,
-              parameters: [props[propName], descriptor, control],
-              children: (value) => renderFn({ ...propsValue, [propName]: value })
-            },
-            descriptor.controlType
-          );
-        }
-        case import_controls.RichTextV1Definition.type: {
-          const control = propControllers?.[propName] ?? null;
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_components.RenderHook,
-            {
-              hook: import_rich_text.useRichText,
-              parameters: [props[propName], control],
-              children: (value) => renderFn({ ...propsValue, [propName]: value })
-            },
-            descriptor.controlType
-          );
-        }
-        case import_controls.RichTextV2Definition.type: {
-          const control = propControllers?.[propName] ?? null;
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_components.RenderHook,
-            {
-              hook: import_rich_text_v2.useRichTextV2,
-              parameters: [props[propName], descriptor, control],
-              children: (value) => renderFn({ ...propsValue, [propName]: value })
-            },
-            descriptor.controlType
-          );
-        }
-        case import_controls.SlotDefinition.type: {
-          const control = propControllers?.[propName] ?? null;
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_components.RenderHook,
-            {
-              hook: import_slot.useSlot,
-              parameters: [props[propName], control],
-              children: (value) => renderFn({ ...propsValue, [propName]: value })
-            },
-            descriptor.controlType
-          );
-        }
-      }
-      console.error(`Unknown control type: ${descriptor.controlType}`);
-      return renderFn({ ...propsValue, [propName]: props[propName] });
-    },
-    children
-  )({});
+  return renderFn(resolvedProps);
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  PropsValue
+  ResolveProps
 });
 //# sourceMappingURL=controls.js.map

package/dist/cjs/runtimes/react/controls.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/runtimes/react/controls.tsx"],"sourcesContent":["import { useRef } from 'react'\n\nimport * as ReactPage from '../../state/react-page'\n\nimport {\n  CheckboxDefinition,\n  NumberDefinition,\n  RichTextV2Definition,\n  RichTextV2Control,\n  ColorDefinition,\n  ComboboxDefinition,\n  IconRadioGroupDefinition,\n  ImageDefinition,\n  LinkDefinition,\n  ListDefinition,\n  RichTextV1Definition,\n  RichTextV1Control,\n  SelectDefinition,\n  ShapeDefinition,\n  SlotDefinition,\n  SlotControl,\n  StyleDefinition,\n  StyleControl,\n  StyleV2Definition,\n  TextAreaDefinition,\n  TextInputDefinition,\n  unstable_TypographyDefinition,\n} from '../../controls'\n\nimport { isLegacyDescriptor } from '../../prop-controllers/descriptors'\n\nimport { useFormattedStyle } from './controls/style'\nimport { ControlValue } from './controls/control'\nimport { useSlot } from './controls/slot'\nimport { useRichText } from './controls/rich-text/rich-text'\nimport { useRichTextV2 } from './controls/rich-text-v2'\n\nimport { useStore } from './hooks/use-store'\nimport { useDocumentKey } from './hooks/use-document-key'\nimport { useSelector } from './hooks/use-selector'\n\nimport { RenderHook } from './components'\nimport { resolveLegacyDescriptorProp } from './legacy-controls'\n\ntype PropsValueProps = {\n  element: ReactPage.ElementData\n  children(props: Record<string, unknown>): JSX.Element\n}\n\nexport function PropsValue({ element, children }: PropsValueProps): JSX.Element {\n  const store = useStore()\n  const propControllerDescriptorsRef = useRef(\n    ReactPage.getComponentPropControllerDescriptors(store.getState(), element.type) ?? {},\n  )\n  const props = element.props as Record<string, any>\n  const documentKey = useDocumentKey()\n\n  const propControllers = useSelector(state => {\n    if (documentKey == null) return null\n\n    return ReactPage.getPropControllers(state, documentKey, element.key)\n  })\n\n  return Object.entries(propControllerDescriptorsRef.current).reduceRight(\n    (renderFn, [propName, descriptor]) =>\n      propsValue => {\n        if (isLegacyDescriptor(descriptor)) {\n          return resolveLegacyDescriptorProp(\n            descriptor,\n            propName,\n            props[propName],\n            propsValue,\n            renderFn,\n          )\n        }\n\n        switch (descriptor.controlType) {\n          case CheckboxDefinition.type:\n          case NumberDefinition.type:\n          case TextInputDefinition.type:\n          case TextAreaDefinition.type:\n          case SelectDefinition.type:\n          case ColorDefinition.type:\n          case IconRadioGroupDefinition.type:\n          case ImageDefinition.type:\n          case ComboboxDefinition.type:\n          case ShapeDefinition.type:\n          case ListDefinition.type:\n          case LinkDefinition.type:\n          case StyleV2Definition.type:\n          case unstable_TypographyDefinition.type:\n            return (\n              <ControlValue\n                definition={descriptor}\n                data={props[propName]}\n                control={propControllers?.[propName]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </ControlValue>\n            )\n\n          case StyleDefinition.type: {\n            const control = (propControllers?.[propName] ?? null) as StyleControl | null\n\n            return (\n              <RenderHook\n                key={descriptor.controlType}\n                hook={useFormattedStyle}\n                parameters={[props[propName], descriptor as StyleDefinition, control]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n          }\n\n          case RichTextV1Definition.type: {\n            const control = (propControllers?.[propName] ?? null) as RichTextV1Control | null\n\n            return (\n              <RenderHook\n                key={descriptor.controlType}\n                hook={useRichText}\n                parameters={[props[propName], control]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n          }\n\n          case RichTextV2Definition.type: {\n            const control = (propControllers?.[propName] ?? null) as RichTextV2Control | null\n\n            return (\n              <RenderHook\n                key={descriptor.controlType}\n                hook={useRichTextV2}\n                parameters={[props[propName], descriptor as RichTextV2Definition, control]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n          }\n\n          case SlotDefinition.type: {\n            const control = (propControllers?.[propName] ?? null) as SlotControl | null\n\n            return (\n              <RenderHook\n                key={descriptor.controlType}\n                hook={useSlot}\n                parameters={[props[propName], control]}\n              >\n                {value => renderFn({ ...propsValue, [propName]: value })}\n              </RenderHook>\n            )\n          }\n        }\n\n        console.error(`Unknown control type: ${descriptor.controlType}`)\n        return renderFn({ ...propsValue, [propName]: props[propName] })\n      },\n    children,\n  )({})\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/runtimes/react/controls.tsx"],"sourcesContent":["import { useRef } from 'react'\n\nimport { ControlDefinition } from '@makeswift/controls'\n\nimport { partitionRecord } from '../../utils/partition'\n\nimport * as ReactPage from '../../state/react-page'\nimport { isLegacyDescriptor, LegacyDescriptor } from '../../prop-controllers/descriptors'\n\nimport { useStore } from './hooks/use-store'\n\nimport { resolveLegacyDescriptorProp } from './legacy-controls'\nimport { useResolvedProps } from './hooks/use-resolved-props'\n\ntype PropsValueProps = {\n  element: ReactPage.ElementData\n  children(props: Record<string, unknown>): JSX.Element\n}\n\nfunction useControlDefs(\n  elementType: string,\n): readonly [Record<string, LegacyDescriptor>, Record<string, ControlDefinition>] {\n  const store = useStore()\n  const all = ReactPage.getComponentPropControllerDescriptors(store.getState(), elementType) ?? {}\n  return useRef(partitionRecord(all, isLegacyDescriptor)).current\n}\n\nexport function ResolveProps({ element, children: renderComponent }: PropsValueProps): JSX.Element {\n  const [legacyDescriptors, definitions] = useControlDefs(element.type)\n\n  const resolvedProps = useResolvedProps(definitions, element.props, element.key)\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAuB;AAIvB,uBAAgC;AAEhC,gBAA2B;AAC3B,yBAAqD;AAErD,uBAAyB;AAEzB,6BAA4C;AAC5C,gCAAiC;AAOjC,SAAS,eACP,aACgF;AAChF,QAAM,YAAQ,2BAAS;AACvB,QAAM,MAAM,UAAU,sCAAsC,MAAM,SAAS,GAAG,WAAW,KAAK,CAAC;AAC/F,aAAO,yBAAO,kCAAgB,KAAK,qCAAkB,CAAC,EAAE;AAC1D;AAEO,SAAS,aAAa,EAAE,SAAS,UAAU,gBAAgB,GAAiC;AACjG,QAAM,CAAC,mBAAmB,WAAW,IAAI,eAAe,QAAQ,IAAI;AAEpE,QAAM,oBAAgB,4CAAiB,aAAa,QAAQ,OAAO,QAAQ,GAAG;AAE9E,QAAM,WAAW,OAAO,QAAQ,iBAAiB,EAAE;AAAA,IACjD,CAACA,WAAU,CAAC,UAAU,UAAU,MAC9B,eACE,oDAA4B,YAAY,UAAU,QAAQ,MAAM,QAAQ,GAAG,OAAOA,SAAQ;AAAA,IAC9F;AAAA,EACF;AAEA,SAAO,SAAS,aAAa;AAC/B;","names":["renderFn"]}

package/dist/cjs/{utils/coalesce.js → runtimes/react/hooks/use-css-id.js}

@@ -16,18 +16,17 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var coalesce_exports = {};
-__export(coalesce_exports, {
-  default: () => coalesce_default
+var use_css_id_exports = {};
+__export(use_css_id_exports, {
+  useCssId: () => useCssId
 });
-module.exports = __toCommonJS(coalesce_exports);
-const coalesce = (...args) => {
-  let i;
-  for (i = 0; i < args.length - 1; i += 1) {
-    if (args[i] != null)
-      return args[i];
-  }
-  return args[i];
-};
-var coalesce_default = coalesce;
-//# sourceMappingURL=coalesce.js.map
+module.exports = __toCommonJS(use_css_id_exports);
+var import_react = require("react");
+function useCssId() {
+  return (0, import_react.useId)().replaceAll(":", "");
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useCssId
+});
+//# sourceMappingURL=use-css-id.js.map

package/dist/cjs/runtimes/react/hooks/use-css-id.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/hooks/use-css-id.ts"],"sourcesContent":["import { useId } from 'react'\n\nexport function useCssId(): string {\n  return useId().replaceAll(':', '') // CSS class names prohibit colons\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAsB;AAEf,SAAS,WAAmB;AACjC,aAAO,oBAAM,EAAE,WAAW,KAAK,EAAE;AACnC;","names":[]}

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

@@ -0,0 +1,85 @@
+"use strict";
+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 use_resolved_props_exports = {};
+__export(use_resolved_props_exports, {
+  useResolvedProps: () => useResolvedProps
+});
+module.exports = __toCommonJS(use_resolved_props_exports);
+var import_react = require("react");
+var import_controls = require("@makeswift/controls");
+var ReactPage = __toESM(require("../../../state/react-page"));
+var import_use_resource_resolver = require("./use-resource-resolver");
+var import_use_document_key = require("./use-document-key");
+var import_use_selector = require("./use-selector");
+var import_use_stylesheet_factory = require("./use-stylesheet-factory");
+var import_resolvable_record = require("../resolvable-record");
+function useControlInstances(elementKey) {
+  const documentKey = (0, import_use_document_key.useDocumentKey)();
+  return (0, import_use_selector.useSelector)((state) => {
+    if (documentKey == null)
+      return null;
+    return ReactPage.getPropControllers(state, documentKey, elementKey);
+  });
+}
+function useResolvedProps(propDefs, elementData, elementKey) {
+  const stylesheetFactory = (0, import_use_stylesheet_factory.useStylesheetFactory)();
+  const resourceResolver = (0, import_use_resource_resolver.useResourceResolver)();
+  const controls = useControlInstances(elementKey);
+  const cache = (0, import_react.useRef)({}).current;
+  const resolveProp = (0, import_react.useCallback)(
+    (def, propName) => {
+      const data = elementData[propName];
+      const control = controls?.[propName];
+      if (cache[propName] != null && data === cache[propName].data && control === cache[propName].control) {
+        return cache[propName].resolvedValue;
+      }
+      const resolvedValue = def.resolveValue(
+        data,
+        resourceResolver,
+        stylesheetFactory.get(propName),
+        control
+      );
+      cache[propName] = { data, control, resolvedValue };
+      return resolvedValue;
+    },
+    [controls, elementData, resourceResolver, stylesheetFactory]
+  );
+  const resolvables = (0, import_react.useMemo)(() => (0, import_controls.mapValues)(propDefs, resolveProp), [propDefs, resolveProp]);
+  const props = (0, import_react.useMemo)(() => (0, import_resolvable_record.resolvableRecord)(resolvables), [resolvables]);
+  stylesheetFactory.useDefinedStyles();
+  (0, import_react.useEffect)(() => {
+    props.triggerResolve();
+  }, []);
+  return (0, import_react.useSyncExternalStore)(props.subscribe, props.readStable, props.readStable);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useResolvedProps
+});
+//# sourceMappingURL=use-resolved-props.js.map

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

@@ -0,0 +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 * as ReactPage from '../../../state/react-page'\nimport { useResourceResolver } from './use-resource-resolver'\nimport { useDocumentKey } from './use-document-key'\nimport { useSelector } from './use-selector'\n\nimport { useStylesheetFactory } from './use-stylesheet-factory'\n\nimport { resolvableRecord } from '../resolvable-record'\n\nfunction 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 ReactPage.getPropControllers(state, documentKey, elementKey)\n  })\n}\n\ntype CacheItem = {\n  data: Data\n  control: ControlInstance | undefined\n  resolvedValue: Resolvable<unknown>\n}\n\nexport function useResolvedProps(\n  propDefs: Record<string, ControlDefinition>,\n  elementData: Record<string, Data>,\n  elementKey: string,\n): Record<string, unknown> {\n  const stylesheetFactory = useStylesheetFactory()\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 = elementData[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, elementData, resourceResolver, stylesheetFactory],\n  )\n\n  const resolvables = useMemo(() => mapValues(propDefs, resolveProp), [propDefs, resolveProp])\n  const props = useMemo(() => resolvableRecord(resolvables), [resolvables])\n\n  stylesheetFactory.useDefinedStyles()\n\n  useEffect(() => {\n    props.triggerResolve()\n  }, [])\n\n  return useSyncExternalStore(props.subscribe, props.readStable, props.readStable)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA8E;AAC9E,sBAMO;AAEP,gBAA2B;AAC3B,mCAAoC;AACpC,8BAA+B;AAC/B,0BAA4B;AAE5B,oCAAqC;AAErC,+BAAiC;AAEjC,SAAS,oBAAoB,YAA4D;AACvF,QAAM,kBAAc,wCAAe;AAEnC,aAAO,iCAAY,WAAS;AAC1B,QAAI,eAAe;AAAM,aAAO;AAEhC,WAAO,UAAU,mBAAmB,OAAO,aAAa,UAAU;AAAA,EACpE,CAAC;AACH;AAQO,SAAS,iBACd,UACA,aACA,YACyB;AACzB,QAAM,wBAAoB,oDAAqB;AAC/C,QAAM,uBAAmB,kDAAoB;AAC7C,QAAM,WAAW,oBAAoB,UAAU;AAE/C,QAAM,YAAQ,qBAAkC,CAAC,CAAC,EAAE;AACpD,QAAM,kBAAc;AAAA,IAClB,CAAC,KAAwB,aAAqB;AAC5C,YAAM,OAAO,YAAY,QAAQ;AACjC,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,aAAa,kBAAkB,iBAAiB;AAAA,EAC7D;AAEA,QAAM,kBAAc,sBAAQ,UAAM,2BAAU,UAAU,WAAW,GAAG,CAAC,UAAU,WAAW,CAAC;AAC3F,QAAM,YAAQ,sBAAQ,UAAM,2CAAiB,WAAW,GAAG,CAAC,WAAW,CAAC;AAExE,oBAAkB,iBAAiB;AAEnC,8BAAU,MAAM;AACd,UAAM,eAAe;AAAA,EACvB,GAAG,CAAC,CAAC;AAEL,aAAO,mCAAqB,MAAM,WAAW,MAAM,YAAY,MAAM,UAAU;AACjF;","names":[]}

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

@@ -21,8 +21,15 @@ __export(use_resolved_value_exports, {
   useResolvedValue: () => useResolvedValue
 });
 module.exports = __toCommonJS(use_resolved_value_exports);
-function useResolvedValue(data, definition) {
-  return definition.resolveValue(data).readStableValue();
+var import_react = require("react");
+var import_use_resource_resolver = require("./use-resource-resolver");
+function useResolvedValue(data, resolver) {
+  const resourceResolver = (0, import_use_resource_resolver.useResourceResolver)();
+  const resolvable = (0, import_react.useMemo)(() => resolver(data, resourceResolver), [data, resourceResolver]);
+  (0, import_react.useEffect)(() => {
+    resolvable.triggerResolve();
+  }, []);
+  return (0, import_react.useSyncExternalStore)(resolvable.subscribe, resolvable.readStable, resolvable.readStable);
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/hooks/use-resolved-value.ts"],"sourcesContent":["import { ControlDefinition, type DataType, type ResolvedValueType } from '@makeswift/controls'\n\nexport function useResolvedValue(\n  data: DataType<ControlDefinition> | undefined,\n  definition: ControlDefinition,\n): ResolvedValueType<ControlDefinition> {\n  return definition.resolveValue(data).readStableValue()\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEO,SAAS,iBACd,MACA,YACsC;AACtC,SAAO,WAAW,aAAa,IAAI,EAAE,gBAAgB;AACvD;","names":[]}
+{"version":3,"sources":["../../../../../src/runtimes/react/hooks/use-resolved-value.ts"],"sourcesContent":["import { useMemo, useEffect, useSyncExternalStore } from 'react'\nimport { Resolvable, ResourceResolver } from '@makeswift/controls'\n\nimport { useResourceResolver } from './use-resource-resolver'\n\nexport function useResolvedValue<D, T>(\n  data: D,\n  resolver: (data: D, resourceResolver: ResourceResolver) => Resolvable<T>,\n): T {\n  const resourceResolver = useResourceResolver()\n  const resolvable = useMemo(() => resolver(data, resourceResolver), [data, resourceResolver])\n\n  useEffect(() => {\n    resolvable.triggerResolve()\n  }, [])\n\n  return useSyncExternalStore(resolvable.subscribe, resolvable.readStable, resolvable.readStable)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAyD;AAGzD,mCAAoC;AAE7B,SAAS,iBACd,MACA,UACG;AACH,QAAM,uBAAmB,kDAAoB;AAC7C,QAAM,iBAAa,sBAAQ,MAAM,SAAS,MAAM,gBAAgB,GAAG,CAAC,MAAM,gBAAgB,CAAC;AAE3F,8BAAU,MAAM;AACd,eAAW,eAAe;AAAA,EAC5B,GAAG,CAAC,CAAC;AAEL,aAAO,mCAAqB,WAAW,WAAW,WAAW,YAAY,WAAW,UAAU;AAChG;","names":[]}

package/dist/cjs/runtimes/react/hooks/use-resource-resolver.js

@@ -0,0 +1,68 @@
+"use strict";
+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 use_resource_resolver_exports = {};
+__export(use_resource_resolver_exports, {
+  useResourceResolver: () => useResourceResolver
+});
+module.exports = __toCommonJS(use_resource_resolver_exports);
+var import_react = require("react");
+var ReactPage = __toESM(require("../../../state/react-page"));
+var import_use_store = require("./use-store");
+var import_use_document_key = require("./use-document-key");
+var import_makeswift_host_api_client = require("../../../next/context/makeswift-host-api-client");
+function useResourceResolver() {
+  const store = (0, import_use_store.useStore)();
+  const client = (0, import_makeswift_host_api_client.useMakeswiftHostApiClient)();
+  const documentKey = (0, import_use_document_key.useDocumentKey)();
+  return (0, import_react.useMemo)(() => {
+    return {
+      resolveSwatch: (swatchId) => client.resolveSwatch(swatchId),
+      resolveFile: (fileId) => client.resolveFile(fileId),
+      resolveTypography: (typographyId) => client.resolveTypography(typographyId),
+      resolvePagePathnameSlice: (pageId) => client.resolvePagePathnameSlice(pageId),
+      resolveElementId: (elementKey) => {
+        const read = () => documentKey == null ? null : ReactPage.getElementId(store.getState(), documentKey, elementKey);
+        let lastValue = null;
+        return {
+          name: `element-id:${documentKey}:${elementKey}`,
+          readStable: () => lastValue = read(),
+          subscribe: (onUpdate) => store.subscribe(() => {
+            if (read() !== lastValue)
+              onUpdate();
+          })
+        };
+      }
+    };
+  }, [client, store, documentKey]);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useResourceResolver
+});
+//# sourceMappingURL=use-resource-resolver.js.map

package/dist/cjs/runtimes/react/hooks/use-resource-resolver.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/hooks/use-resource-resolver.ts"],"sourcesContent":["import { useMemo } from 'react'\nimport { type ResourceResolver } from '@makeswift/controls'\n\nimport * as ReactPage from '../../../state/react-page'\nimport { useStore } from './use-store'\nimport { useDocumentKey } from './use-document-key'\nimport { useMakeswiftHostApiClient } from '../../../next/context/makeswift-host-api-client'\n\nexport function useResourceResolver(): ResourceResolver {\n  const store = useStore()\n  const client = useMakeswiftHostApiClient()\n  const documentKey = useDocumentKey()\n\n  return useMemo<ResourceResolver>(() => {\n    return {\n      resolveSwatch: swatchId => client.resolveSwatch(swatchId),\n      resolveFile: fileId => client.resolveFile(fileId),\n      resolveTypography: typographyId => client.resolveTypography(typographyId),\n      resolvePagePathnameSlice: pageId => client.resolvePagePathnameSlice(pageId),\n      resolveElementId: elementKey => {\n        const read = () =>\n          documentKey == null\n            ? null\n            : ReactPage.getElementId(store.getState(), documentKey, elementKey)\n\n        let lastValue: string | null = null\n        return {\n          name: `element-id:${documentKey}:${elementKey}`,\n          readStable: () => (lastValue = read()),\n          subscribe: (onUpdate: () => void) =>\n            store.subscribe(() => {\n              if (read() !== lastValue) onUpdate()\n            }),\n        }\n      },\n    }\n  }, [client, store, documentKey])\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAwB;AAGxB,gBAA2B;AAC3B,uBAAyB;AACzB,8BAA+B;AAC/B,uCAA0C;AAEnC,SAAS,sBAAwC;AACtD,QAAM,YAAQ,2BAAS;AACvB,QAAM,aAAS,4DAA0B;AACzC,QAAM,kBAAc,wCAAe;AAEnC,aAAO,sBAA0B,MAAM;AACrC,WAAO;AAAA,MACL,eAAe,cAAY,OAAO,cAAc,QAAQ;AAAA,MACxD,aAAa,YAAU,OAAO,YAAY,MAAM;AAAA,MAChD,mBAAmB,kBAAgB,OAAO,kBAAkB,YAAY;AAAA,MACxE,0BAA0B,YAAU,OAAO,yBAAyB,MAAM;AAAA,MAC1E,kBAAkB,gBAAc;AAC9B,cAAM,OAAO,MACX,eAAe,OACX,OACA,UAAU,aAAa,MAAM,SAAS,GAAG,aAAa,UAAU;AAEtE,YAAI,YAA2B;AAC/B,eAAO;AAAA,UACL,MAAM,cAAc,WAAW,IAAI,UAAU;AAAA,UAC7C,YAAY,MAAO,YAAY,KAAK;AAAA,UACpC,WAAW,CAAC,aACV,MAAM,UAAU,MAAM;AACpB,gBAAI,KAAK,MAAM;AAAW,uBAAS;AAAA,UACrC,CAAC;AAAA,QACL;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,QAAQ,OAAO,WAAW,CAAC;AACjC;","names":[]}

package/dist/cjs/runtimes/react/hooks/use-stylesheet-factory.js

@@ -0,0 +1,115 @@
+"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_stylesheet_factory_exports = {};
+__export(use_stylesheet_factory_exports, {
+  useStylesheetFactory: () => useStylesheetFactory
+});
+module.exports = __toCommonJS(use_stylesheet_factory_exports);
+var import_react = require("react");
+var import_serialize = require("@emotion/serialize");
+var import_controls = require("@makeswift/controls");
+var import_root_style_registry = require("../../../next/root-style-registry");
+var import_breakpoints = require("../../../state/modules/breakpoints");
+var import_style = require("../controls/style");
+var import_typography = require("../controls/typography");
+var import_use_breakpoints = require("./use-breakpoints");
+var import_use_css_id = require("./use-css-id");
+var import_use_style = require("../use-style");
+var import_poll_box_model = require("../poll-box-model");
+function useStylesheetFactory() {
+  const breakpoints = (0, import_use_breakpoints.useBreakpoints)();
+  const cache = (0, import_root_style_registry.useCache)();
+  const componentUid = (0, import_use_css_id.useCssId)();
+  const computedStyles = (0, import_react.useRef)({}).current;
+  const boxModelCallbacks = (0, import_react.useRef)({}).current;
+  return (0, import_react.useMemo)(() => {
+    const getStylesheet = (styleSheetId) => ({
+      breakpoints() {
+        return breakpoints;
+      },
+      defineStyle(style, onBoxModelChange) {
+        const serialized = serializeStyle(breakpoints, style, cache);
+        const uid = `u-${componentUid}-${styleSheetId}`;
+        computedStyles[uid] = serialized;
+        const className = (0, import_use_style.serializedStyleClassName)(cache, serialized);
+        if (!onBoxModelChange)
+          return className;
+        boxModelCallbacks[uid] = onBoxModelChange;
+        return `${className} ${uid}`;
+      },
+      child(id) {
+        return getStylesheet(`${styleSheetId}-${id}`);
+      }
+    });
+    return {
+      get(propName) {
+        return getStylesheet(propName);
+      },
+      useDefinedStyles() {
+        (0, import_use_style.useStyles)(cache, Object.values(computedStyles));
+        (0, import_react.useEffect)(() => {
+          const unsubscribes = Object.entries(boxModelCallbacks).map(
+            ([uid, callback]) => callback != null ? (0, import_poll_box_model.pollBoxModel)({
+              element: document.querySelector(`.${uid}`),
+              onBoxModelChange: callback
+            }) : void 0
+          ).filter(import_controls.isNotNil);
+          return () => unsubscribes.forEach((fn) => fn());
+        }, [Object.keys(boxModelCallbacks).join(" ")]);
+      }
+    };
+  }, [breakpoints, cache, componentUid]);
+}
+function isTypographyStyle(style) {
+  return Array.isArray(style);
+}
+function isStyleV2(style) {
+  return typeof style === "object" && "getStyle" in style && typeof style.getStyle === "function";
+}
+function styleV2Css(breakpoints, style) {
+  return {
+    ...style.getStyle((0, import_controls.getBaseBreakpoint)(breakpoints)),
+    ...breakpoints.reduce(
+      (styles, breakpoint) => ({
+        ...styles,
+        [(0, import_breakpoints.getBreakpointMediaQuery)(breakpoint)]: style.getStyle(breakpoint)
+      }),
+      {}
+    )
+  };
+}
+function resolvedStyleToCss(breakpoints, style) {
+  if (isTypographyStyle(style)) {
+    return (0, import_typography.typographyCss)(breakpoints, style);
+  }
+  if (isStyleV2(style)) {
+    return styleV2Css(breakpoints, style);
+  }
+  const { properties, styleData } = style;
+  return (0, import_style.styleV1Css)(breakpoints, styleData, properties);
+}
+function serializeStyle(breakpoints, style, cache) {
+  const css = resolvedStyleToCss(breakpoints, style);
+  return (0, import_serialize.serializeStyles)([css], cache.registered);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useStylesheetFactory
+});
+//# sourceMappingURL=use-stylesheet-factory.js.map

package/dist/cjs/runtimes/react/hooks/use-stylesheet-factory.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/hooks/use-stylesheet-factory.ts"],"sourcesContent":["import { useMemo, useEffect, useRef } from 'react'\nimport { type CSSObject, serializeStyles } from '@emotion/serialize'\nimport { type EmotionCache } from '@emotion/cache'\nimport { type SerializedStyles } from '@emotion/utils'\n\nimport {\n  type Breakpoints,\n  type BoxModel,\n  type Stylesheet,\n  type ResolvedStyle,\n  type ResolvedStyleV2,\n  type ResolvedTypographyStyle,\n  isNotNil,\n  getBaseBreakpoint,\n} from '@makeswift/controls'\n\nimport { useCache } from '../../../next/root-style-registry'\nimport { getBreakpointMediaQuery } from '../../../state/modules/breakpoints'\n\nimport { styleV1Css } from '../controls/style'\nimport { typographyCss } from '../controls/typography'\n\nimport { useBreakpoints } from './use-breakpoints'\nimport { useCssId } from './use-css-id'\nimport { useStyles, serializedStyleClassName } from '../use-style'\nimport { pollBoxModel } from '../poll-box-model'\n\nexport type StylesheetFactory = {\n  get(propName: string): Stylesheet\n  useDefinedStyles(): void\n}\n\nexport function useStylesheetFactory(): StylesheetFactory {\n  const breakpoints = useBreakpoints()\n  const cache = useCache()\n  const componentUid = useCssId()\n\n  const computedStyles = useRef<Record<string, SerializedStyles>>({}).current\n  const boxModelCallbacks = useRef<Record<string, (boxModel: BoxModel | null) => void>>({}).current\n\n  return useMemo(() => {\n    const getStylesheet = (styleSheetId: string): Stylesheet => ({\n      breakpoints(): Breakpoints {\n        return breakpoints\n      },\n\n      defineStyle(\n        style: ResolvedStyle,\n        onBoxModelChange?: (boxModel: BoxModel | null) => void,\n      ): string {\n        const serialized = serializeStyle(breakpoints, style, cache)\n        const uid = `u-${componentUid}-${styleSheetId}`\n        computedStyles[uid] = serialized\n\n        const className = serializedStyleClassName(cache, serialized)\n        if (!onBoxModelChange) return className\n\n        boxModelCallbacks[uid] = onBoxModelChange\n        return `${className} ${uid}`\n      },\n\n      child(id: string): Stylesheet {\n        return getStylesheet(`${styleSheetId}-${id}`)\n      },\n    })\n\n    return {\n      get(propName: string): Stylesheet {\n        return getStylesheet(propName)\n      },\n\n      useDefinedStyles() {\n        useStyles(cache, Object.values(computedStyles))\n\n        useEffect(() => {\n          const unsubscribes = Object.entries(boxModelCallbacks)\n            .map(([uid, callback]) =>\n              callback != null\n                ? pollBoxModel({\n                    element: document.querySelector(`.${uid}`),\n                    onBoxModelChange: callback,\n                  })\n                : undefined,\n            )\n            .filter(isNotNil)\n\n          return () => unsubscribes.forEach(fn => fn())\n        }, [Object.keys(boxModelCallbacks).join(' ')])\n      },\n    }\n  }, [breakpoints, cache, componentUid])\n}\n\nfunction isTypographyStyle(style: ResolvedStyle): style is ResolvedTypographyStyle {\n  return Array.isArray(style)\n}\n\nfunction isStyleV2(style: ResolvedStyle): style is ResolvedStyleV2 {\n  return typeof style === 'object' && 'getStyle' in style && typeof style.getStyle === 'function'\n}\n\nfunction styleV2Css(breakpoints: Breakpoints, style: ResolvedStyleV2<CSSObject>): CSSObject {\n  return {\n    ...style.getStyle(getBaseBreakpoint(breakpoints)),\n    ...breakpoints.reduce(\n      (styles, breakpoint) => ({\n        ...styles,\n        [getBreakpointMediaQuery(breakpoint)]: style.getStyle(breakpoint),\n      }),\n      {},\n    ),\n  }\n}\n\nfunction resolvedStyleToCss(breakpoints: Breakpoints, style: ResolvedStyle) {\n  if (isTypographyStyle(style)) {\n    return typographyCss(breakpoints, style)\n  }\n\n  if (isStyleV2(style)) {\n    return styleV2Css(breakpoints, style as ResolvedStyleV2<CSSObject>)\n  }\n\n  const { properties, styleData } = style\n  return styleV1Css(breakpoints, styleData, properties)\n}\n\nfunction serializeStyle(\n  breakpoints: Breakpoints,\n  style: ResolvedStyle,\n  cache: EmotionCache,\n): SerializedStyles {\n  const css = resolvedStyleToCss(breakpoints, style)\n  return serializeStyles([css], cache.registered)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA2C;AAC3C,uBAAgD;AAIhD,sBASO;AAEP,iCAAyB;AACzB,yBAAwC;AAExC,mBAA2B;AAC3B,wBAA8B;AAE9B,6BAA+B;AAC/B,wBAAyB;AACzB,uBAAoD;AACpD,4BAA6B;AAOtB,SAAS,uBAA0C;AACxD,QAAM,kBAAc,uCAAe;AACnC,QAAM,YAAQ,qCAAS;AACvB,QAAM,mBAAe,4BAAS;AAE9B,QAAM,qBAAiB,qBAAyC,CAAC,CAAC,EAAE;AACpE,QAAM,wBAAoB,qBAA4D,CAAC,CAAC,EAAE;AAE1F,aAAO,sBAAQ,MAAM;AACnB,UAAM,gBAAgB,CAAC,kBAAsC;AAAA,MAC3D,cAA2B;AACzB,eAAO;AAAA,MACT;AAAA,MAEA,YACE,OACA,kBACQ;AACR,cAAM,aAAa,eAAe,aAAa,OAAO,KAAK;AAC3D,cAAM,MAAM,KAAK,YAAY,IAAI,YAAY;AAC7C,uBAAe,GAAG,IAAI;AAEtB,cAAM,gBAAY,2CAAyB,OAAO,UAAU;AAC5D,YAAI,CAAC;AAAkB,iBAAO;AAE9B,0BAAkB,GAAG,IAAI;AACzB,eAAO,GAAG,SAAS,IAAI,GAAG;AAAA,MAC5B;AAAA,MAEA,MAAM,IAAwB;AAC5B,eAAO,cAAc,GAAG,YAAY,IAAI,EAAE,EAAE;AAAA,MAC9C;AAAA,IACF;AAEA,WAAO;AAAA,MACL,IAAI,UAA8B;AAChC,eAAO,cAAc,QAAQ;AAAA,MAC/B;AAAA,MAEA,mBAAmB;AACjB,wCAAU,OAAO,OAAO,OAAO,cAAc,CAAC;AAE9C,oCAAU,MAAM;AACd,gBAAM,eAAe,OAAO,QAAQ,iBAAiB,EAClD;AAAA,YAAI,CAAC,CAAC,KAAK,QAAQ,MAClB,YAAY,WACR,oCAAa;AAAA,cACX,SAAS,SAAS,cAAc,IAAI,GAAG,EAAE;AAAA,cACzC,kBAAkB;AAAA,YACpB,CAAC,IACD;AAAA,UACN,EACC,OAAO,wBAAQ;AAElB,iBAAO,MAAM,aAAa,QAAQ,QAAM,GAAG,CAAC;AAAA,QAC9C,GAAG,CAAC,OAAO,KAAK,iBAAiB,EAAE,KAAK,GAAG,CAAC,CAAC;AAAA,MAC/C;AAAA,IACF;AAAA,EACF,GAAG,CAAC,aAAa,OAAO,YAAY,CAAC;AACvC;AAEA,SAAS,kBAAkB,OAAwD;AACjF,SAAO,MAAM,QAAQ,KAAK;AAC5B;AAEA,SAAS,UAAU,OAAgD;AACjE,SAAO,OAAO,UAAU,YAAY,cAAc,SAAS,OAAO,MAAM,aAAa;AACvF;AAEA,SAAS,WAAW,aAA0B,OAA8C;AAC1F,SAAO;AAAA,IACL,GAAG,MAAM,aAAS,mCAAkB,WAAW,CAAC;AAAA,IAChD,GAAG,YAAY;AAAA,MACb,CAAC,QAAQ,gBAAgB;AAAA,QACvB,GAAG;AAAA,QACH,KAAC,4CAAwB,UAAU,CAAC,GAAG,MAAM,SAAS,UAAU;AAAA,MAClE;AAAA,MACA,CAAC;AAAA,IACH;AAAA,EACF;AACF;AAEA,SAAS,mBAAmB,aAA0B,OAAsB;AAC1E,MAAI,kBAAkB,KAAK,GAAG;AAC5B,eAAO,iCAAc,aAAa,KAAK;AAAA,EACzC;AAEA,MAAI,UAAU,KAAK,GAAG;AACpB,WAAO,WAAW,aAAa,KAAmC;AAAA,EACpE;AAEA,QAAM,EAAE,YAAY,UAAU,IAAI;AAClC,aAAO,yBAAW,aAAa,WAAW,UAAU;AACtD;AAEA,SAAS,eACP,aACA,OACA,OACkB;AAClB,QAAM,MAAM,mBAAmB,aAAa,KAAK;AACjD,aAAO,kCAAgB,CAAC,GAAG,GAAG,MAAM,UAAU;AAChD;","names":[]}

package/dist/cjs/runtimes/react/resolvable-record.js

@@ -0,0 +1,67 @@
+"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 resolvable_record_exports = {};
+__export(resolvable_record_exports, {
+  resolvableRecord: () => resolvableRecord
+});
+module.exports = __toCommonJS(resolvable_record_exports);
+function resolvableRecord(resolvables) {
+  let resolvedValues = {};
+  return {
+    name: "resolvable-record",
+    subscribe: (onUpdate) => {
+      const unsubscribes = Object.values(resolvables).map((s) => s.subscribe(onUpdate));
+      return () => {
+        unsubscribes.forEach((u) => u());
+      };
+    },
+    readStable: () => {
+      const { isDirty, resolved } = Object.entries(resolvables).reduce(
+        ({ isDirty: isDirty2, resolved: resolved2 }, [propName, subscription]) => {
+          const lastPropValue = resolvedValues[propName];
+          const propValue = subscription.readStable();
+          return {
+            isDirty: isDirty2 || propValue !== lastPropValue,
+            resolved: {
+              ...resolved2,
+              [propName]: propValue
+            }
+          };
+        },
+        { isDirty: false, resolved: {} }
+      );
+      if (isDirty) {
+        resolvedValues = resolved;
+      }
+      return resolvedValues;
+    },
+    triggerResolve: async () => {
+      return await Promise.all(
+        Object.entries(resolvables).map(
+          ([propName, sub]) => sub.triggerResolve(resolvedValues[propName])
+        )
+      );
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  resolvableRecord
+});
+//# sourceMappingURL=resolvable-record.js.map

package/dist/cjs/runtimes/react/resolvable-record.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/runtimes/react/resolvable-record.tsx"],"sourcesContent":["import { type Resolvable } from '@makeswift/controls'\n\nexport function resolvableRecord(\n  resolvables: Record<string, Resolvable<unknown>>,\n): Resolvable<Record<string, unknown>> {\n  let resolvedValues: Record<string, unknown> = {}\n\n  return {\n    name: 'resolvable-record',\n    subscribe: (onUpdate: () => void): (() => void) => {\n      const unsubscribes = Object.values(resolvables).map(s => s.subscribe(onUpdate))\n      return () => {\n        unsubscribes.forEach(u => u())\n      }\n    },\n\n    readStable: () => {\n      const { isDirty, resolved } = Object.entries(resolvables).reduce(\n        ({ isDirty, resolved }, [propName, subscription]) => {\n          const lastPropValue = resolvedValues[propName]\n          const propValue = subscription.readStable()\n          return {\n            isDirty: isDirty || propValue !== lastPropValue,\n            resolved: {\n              ...resolved,\n              [propName]: propValue,\n            },\n          }\n        },\n        { isDirty: false, resolved: {} },\n      )\n\n      if (isDirty) {\n        resolvedValues = resolved\n      }\n\n      return resolvedValues\n    },\n\n    triggerResolve: async () => {\n      return await Promise.all(\n        Object.entries(resolvables).map(([propName, sub]) =>\n          sub.triggerResolve(resolvedValues[propName]),\n        ),\n      )\n    },\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEO,SAAS,iBACd,aACqC;AACrC,MAAI,iBAA0C,CAAC;AAE/C,SAAO;AAAA,IACL,MAAM;AAAA,IACN,WAAW,CAAC,aAAuC;AACjD,YAAM,eAAe,OAAO,OAAO,WAAW,EAAE,IAAI,OAAK,EAAE,UAAU,QAAQ,CAAC;AAC9E,aAAO,MAAM;AACX,qBAAa,QAAQ,OAAK,EAAE,CAAC;AAAA,MAC/B;AAAA,IACF;AAAA,IAEA,YAAY,MAAM;AAChB,YAAM,EAAE,SAAS,SAAS,IAAI,OAAO,QAAQ,WAAW,EAAE;AAAA,QACxD,CAAC,EAAE,SAAAA,UAAS,UAAAC,UAAS,GAAG,CAAC,UAAU,YAAY,MAAM;AACnD,gBAAM,gBAAgB,eAAe,QAAQ;AAC7C,gBAAM,YAAY,aAAa,WAAW;AAC1C,iBAAO;AAAA,YACL,SAASD,YAAW,cAAc;AAAA,YAClC,UAAU;AAAA,cACR,GAAGC;AAAA,cACH,CAAC,QAAQ,GAAG;AAAA,YACd;AAAA,UACF;AAAA,QACF;AAAA,QACA,EAAE,SAAS,OAAO,UAAU,CAAC,EAAE;AAAA,MACjC;AAEA,UAAI,SAAS;AACX,yBAAiB;AAAA,MACnB;AAEA,aAAO;AAAA,IACT;AAAA,IAEA,gBAAgB,YAAY;AAC1B,aAAO,MAAM,QAAQ;AAAA,QACnB,OAAO,QAAQ,WAAW,EAAE;AAAA,UAAI,CAAC,CAAC,UAAU,GAAG,MAC7C,IAAI,eAAe,eAAe,QAAQ,CAAC;AAAA,QAC7C;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;","names":["isDirty","resolved"]}