@makeswift/runtime 0.28.8-canary.8 → 0.28.8

package/dist/esm/controls/slot.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/controls/slot.ts"],"sourcesContent":["import { ReactNode } from 'react'\nimport {\n  SlotDefinition as BaseSlotDefinition,\n  SlotControl,\n  StableValue,\n  type DeserializedRecord,\n  type ResourceResolver,\n  type Stylesheet,\n  type Resolvable,\n  type DataType,\n} from '@makeswift/controls'\n\nimport { renderSlot } from '../runtimes/react/controls/slot'\n\nexport type SlotPlaceholderConfig = {\n  builderOnly?: boolean\n  height?: number\n  text?: string\n}\n\n// TODO: We need to make a decision on how we want to allow users to configure\n// the Slot placeholder. Some considerations (not exhaustive):\n// - Inline vs block slot placeholders\n// - Slots that shouldn't occupy space when they are empty\n// - Slots that are only shown when you engage drop & drop in the builder\n// - Which of these behaviors should be configurable vs. hardcoded\n// - Addressing the builtin box\n//\n// For now, this initial config allows us to experiment with some initial\n// customization. This is subject to change.\nexport type SlotConfig = {\n  unstable_placeholder?: SlotPlaceholderConfig\n}\n\nabstract class BaseDefinition extends BaseSlotDefinition<ReactNode, SlotConfig> {}\n\nexport class SlotDefinition extends BaseDefinition {\n  static deserialize(data: DeserializedRecord): SlotDefinition {\n    if (data.type !== SlotDefinition.type) {\n      throw new Error(`Slot: expected type ${SlotDefinition.type}, got ${data.type}`)\n    }\n\n    return Slot(data.config ?? {})\n  }\n\n  constructor(config: SlotConfig = {}) {\n    super(config)\n  }\n\n  resolveValue(\n    data: DataType<BaseDefinition> | undefined,\n    _resolver: ResourceResolver,\n    _stylesheet: Stylesheet,\n    control?: SlotControl,\n  ): Resolvable<ReactNode | undefined> {\n    const stableValue = StableValue({\n      name: SlotDefinition.type,\n      read: () => renderSlot({ data, control: control ?? null, config: this.config }),\n    })\n\n    return {\n      ...stableValue,\n      triggerResolve: async () => {},\n    }\n  }\n}\n\nexport function Slot(config: SlotConfig = {}): SlotDefinition {\n  return new SlotDefinition(config)\n}\n\nexport { SlotControl }\n"],"mappings":"AACA;AAAA,EACE,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,OAMK;AAEP,SAAS,kBAAkB;AAsB3B,MAAe,uBAAuB,mBAA0C;AAAC;AAE1E,MAAM,uBAAuB,eAAe;AAAA,EACjD,OAAO,YAAY,MAA0C;AAC3D,QAAI,KAAK,SAAS,eAAe,MAAM;AACrC,YAAM,IAAI,MAAM,uBAAuB,eAAe,IAAI,SAAS,KAAK,IAAI,EAAE;AAAA,IAChF;AAEA,WAAO,KAAK,KAAK,UAAU,CAAC,CAAC;AAAA,EAC/B;AAAA,EAEA,YAAY,SAAqB,CAAC,GAAG;AACnC,UAAM,MAAM;AAAA,EACd;AAAA,EAEA,aACE,MACA,WACA,aACA,SACmC;AACnC,UAAM,cAAc,YAAY;AAAA,MAC9B,MAAM,eAAe;AAAA,MACrB,MAAM,MAAM,WAAW,EAAE,MAAM,SAAS,WAAW,MAAM,QAAQ,KAAK,OAAO,CAAC;AAAA,IAChF,CAAC;AAED,WAAO;AAAA,MACL,GAAG;AAAA,MACH,gBAAgB,YAAY;AAAA,MAAC;AAAA,IAC/B;AAAA,EACF;AACF;AAEO,SAAS,KAAK,SAAqB,CAAC,GAAmB;AAC5D,SAAO,IAAI,eAAe,MAAM;AAClC;","names":[]}
+{"version":3,"sources":["../../../src/controls/slot.ts"],"sourcesContent":["import { type ReactNode } from 'react'\nimport {\n  SlotDefinition as BaseSlotDefinition,\n  SlotControl,\n  StableValue,\n  type DeserializedRecord,\n  type ResourceResolver,\n  type Stylesheet,\n  type Resolvable,\n  type DataType,\n} from '@makeswift/controls'\n\nimport { renderSlot } from '../runtimes/react/controls/slot'\n\nexport type SlotPlaceholderConfig = {\n  builderOnly?: boolean\n  height?: number\n  text?: string\n}\n\n// TODO: We need to make a decision on how we want to allow users to configure\n// the Slot placeholder. Some considerations (not exhaustive):\n// - Inline vs block slot placeholders\n// - Slots that shouldn't occupy space when they are empty\n// - Slots that are only shown when you engage drop & drop in the builder\n// - Which of these behaviors should be configurable vs. hardcoded\n// - Addressing the builtin box\n//\n// For now, this initial config allows us to experiment with some initial\n// customization. This is subject to change.\nexport type SlotConfig = {\n  unstable_placeholder?: SlotPlaceholderConfig\n}\n\nabstract class BaseDefinition extends BaseSlotDefinition<ReactNode, SlotConfig> {}\n\nexport class SlotDefinition extends BaseDefinition {\n  static deserialize(data: DeserializedRecord): SlotDefinition {\n    if (data.type !== SlotDefinition.type) {\n      throw new Error(`Slot: expected type ${SlotDefinition.type}, got ${data.type}`)\n    }\n\n    return Slot(data.config ?? {})\n  }\n\n  constructor(config: SlotConfig = {}) {\n    super(config)\n  }\n\n  resolveValue(\n    data: DataType<BaseDefinition> | undefined,\n    _resolver: ResourceResolver,\n    _stylesheet: Stylesheet,\n    control?: SlotControl,\n  ): Resolvable<ReactNode | undefined> {\n    const stableValue = StableValue({\n      name: SlotDefinition.type,\n      read: () => renderSlot({ data, control: control ?? null, config: this.config }),\n    })\n\n    return {\n      ...stableValue,\n      triggerResolve: async () => {},\n    }\n  }\n}\n\nexport function Slot(config: SlotConfig = {}): SlotDefinition {\n  return new SlotDefinition(config)\n}\n\nexport { SlotControl }\n"],"mappings":"AACA;AAAA,EACE,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,OAMK;AAEP,SAAS,kBAAkB;AAsB3B,MAAe,uBAAuB,mBAA0C;AAAC;AAE1E,MAAM,uBAAuB,eAAe;AAAA,EACjD,OAAO,YAAY,MAA0C;AAC3D,QAAI,KAAK,SAAS,eAAe,MAAM;AACrC,YAAM,IAAI,MAAM,uBAAuB,eAAe,IAAI,SAAS,KAAK,IAAI,EAAE;AAAA,IAChF;AAEA,WAAO,KAAK,KAAK,UAAU,CAAC,CAAC;AAAA,EAC/B;AAAA,EAEA,YAAY,SAAqB,CAAC,GAAG;AACnC,UAAM,MAAM;AAAA,EACd;AAAA,EAEA,aACE,MACA,WACA,aACA,SACmC;AACnC,UAAM,cAAc,YAAY;AAAA,MAC9B,MAAM,eAAe;AAAA,MACrB,MAAM,MAAM,WAAW,EAAE,MAAM,SAAS,WAAW,MAAM,QAAQ,KAAK,OAAO,CAAC;AAAA,IAChF,CAAC;AAED,WAAO;AAAA,MACL,GAAG;AAAA,MACH,gBAAgB,YAAY;AAAA,MAAC;AAAA,IAC/B;AAAA,EACF;AACF;AAEO,SAAS,KAAK,SAAqB,CAAC,GAAmB;AAC5D,SAAO,IAAI,eAAe,MAAM;AAClC;","names":[]}

package/dist/esm/next/testing/breakpoints.js

@@ -1,9 +1,2 @@
-const DESKTOP_MEDIA_QUERY = "only screen and (min-width: 769px)";
-const TABLET_MEDIA_QUERY = "only screen and (min-width: 769px)";
-const MOBILE_MEDIA_QUERY = "only screen and (min-width: 769px)";
-export {
-  DESKTOP_MEDIA_QUERY,
-  MOBILE_MEDIA_QUERY,
-  TABLET_MEDIA_QUERY
-};
+export * from "../../testing/breakpoints";
 //# sourceMappingURL=breakpoints.js.map

package/dist/esm/next/testing/breakpoints.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/next/testing/breakpoints.ts"],"sourcesContent":["export const DESKTOP_MEDIA_QUERY = 'only screen and (min-width: 769px)'\nexport const TABLET_MEDIA_QUERY = 'only screen and (min-width: 769px)'\nexport const MOBILE_MEDIA_QUERY = 'only screen and (min-width: 769px)'\n"],"mappings":"AAAO,MAAM,sBAAsB;AAC5B,MAAM,qBAAqB;AAC3B,MAAM,qBAAqB;","names":[]}
+{"version":3,"sources":["../../../../src/next/testing/breakpoints.ts"],"sourcesContent":["export * from '../../testing/breakpoints'\n"],"mappings":"AAAA,cAAc;","names":[]}

package/dist/esm/next/testing/element-data.js

@@ -1,76 +1,2 @@
-import { randomUUID } from "crypto";
-import { CacheData } from "../../api/api-resources-client";
-import { MakeswiftComponentType } from "../../components/builtin/constants";
-function createRootComponent(elements, rootId) {
-  return {
-    key: rootId ?? randomUUID(),
-    type: MakeswiftComponentType.Root,
-    props: {
-      children: {
-        columns: [
-          {
-            deviceId: "desktop",
-            value: {
-              count: 12,
-              spans: elements?.map(() => [12])
-            }
-          }
-        ],
-        elements
-      }
-    }
-  };
-}
-const isDocument = (elementDataOrDocument) => "snippets" in elementDataOrDocument || "fonts" in elementDataOrDocument || "meta" in elementDataOrDocument || "seo" in elementDataOrDocument;
-function createMakeswiftPageSnapshot(elementDataOrDocument, {
-  cacheData = {},
-  locale = null
-} = {}) {
-  return {
-    document: isDocument(elementDataOrDocument) ? elementDataOrDocument : {
-      id: "test-page-id",
-      site: { id: "test-site-id" },
-      data: elementDataOrDocument,
-      snippets: [],
-      fonts: [],
-      meta: {},
-      seo: {},
-      localizedPages: [],
-      locale
-    },
-    cacheData: {
-      ...CacheData.empty(),
-      ...cacheData
-    }
-  };
-}
-function createMakeswiftComponentSnapshot(elementData, {
-  cacheData = {},
-  locale = null
-} = {}) {
-  return {
-    key: randomUUID(),
-    document: {
-      id: "test-component-id",
-      name: "Test Component Document",
-      siteId: "test-site-id",
-      data: elementData,
-      inheritsFromParent: false,
-      locale
-    },
-    meta: {
-      allowLocaleFallback: false,
-      requestedLocale: locale
-    },
-    cacheData: {
-      ...CacheData.empty(),
-      ...cacheData
-    }
-  };
-}
-export {
-  createMakeswiftComponentSnapshot,
-  createMakeswiftPageSnapshot,
-  createRootComponent
-};
+export * from "../../testing/element-data";
 //# sourceMappingURL=element-data.js.map

package/dist/esm/next/testing/element-data.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/next/testing/element-data.ts"],"sourcesContent":["import { randomUUID } from 'crypto'\n\nimport {\n  type MakeswiftPageSnapshot,\n  type MakeswiftPageDocument,\n  type MakeswiftComponentSnapshot,\n} from '../../client'\nimport { CacheData } from '../../api/api-resources-client'\nimport { type ElementData } from '../../state/read-only-state'\nimport { MakeswiftComponentType } from '../../components/builtin/constants'\n\nexport function createRootComponent(elements: ElementData[], rootId?: string) {\n  return {\n    key: rootId ?? randomUUID(),\n    type: MakeswiftComponentType.Root,\n    props: {\n      children: {\n        columns: [\n          {\n            deviceId: 'desktop',\n            value: {\n              count: 12,\n              spans: elements?.map(() => [12]),\n            },\n          },\n        ],\n        elements,\n      },\n    },\n  }\n}\n\nconst isDocument = (\n  elementDataOrDocument: ElementData | MakeswiftPageDocument,\n): elementDataOrDocument is MakeswiftPageDocument =>\n  'snippets' in elementDataOrDocument ||\n  'fonts' in elementDataOrDocument ||\n  'meta' in elementDataOrDocument ||\n  'seo' in elementDataOrDocument\n\nexport function createMakeswiftPageSnapshot(\n  elementDataOrDocument: ElementData | MakeswiftPageDocument,\n  {\n    cacheData = {},\n    locale = null,\n  }: { cacheData?: Partial<MakeswiftPageSnapshot['cacheData']>; locale?: string | null } = {},\n): MakeswiftPageSnapshot {\n  return {\n    document: isDocument(elementDataOrDocument)\n      ? elementDataOrDocument\n      : {\n          id: 'test-page-id',\n          site: { id: 'test-site-id' },\n          data: elementDataOrDocument,\n          snippets: [],\n          fonts: [],\n          meta: {},\n          seo: {},\n          localizedPages: [],\n          locale,\n        },\n    cacheData: {\n      ...CacheData.empty(),\n      ...cacheData,\n    },\n  }\n}\n\nexport function createMakeswiftComponentSnapshot(\n  elementData: ElementData | null,\n  {\n    cacheData = {},\n    locale = null,\n  }: { cacheData?: Partial<MakeswiftComponentSnapshot['cacheData']>; locale?: string | null } = {},\n): MakeswiftComponentSnapshot {\n  return {\n    key: randomUUID(),\n    document: {\n      id: 'test-component-id',\n      name: 'Test Component Document',\n      siteId: 'test-site-id',\n      data: elementData,\n      inheritsFromParent: false,\n      locale,\n    },\n    meta: {\n      allowLocaleFallback: false,\n      requestedLocale: locale,\n    },\n    cacheData: {\n      ...CacheData.empty(),\n      ...cacheData,\n    },\n  }\n}\n"],"mappings":"AAAA,SAAS,kBAAkB;AAO3B,SAAS,iBAAiB;AAE1B,SAAS,8BAA8B;AAEhC,SAAS,oBAAoB,UAAyB,QAAiB;AAC5E,SAAO;AAAA,IACL,KAAK,UAAU,WAAW;AAAA,IAC1B,MAAM,uBAAuB;AAAA,IAC7B,OAAO;AAAA,MACL,UAAU;AAAA,QACR,SAAS;AAAA,UACP;AAAA,YACE,UAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAO;AAAA,cACP,OAAO,UAAU,IAAI,MAAM,CAAC,EAAE,CAAC;AAAA,YACjC;AAAA,UACF;AAAA,QACF;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;AAEA,MAAM,aAAa,CACjB,0BAEA,cAAc,yBACd,WAAW,yBACX,UAAU,yBACV,SAAS;AAEJ,SAAS,4BACd,uBACA;AAAA,EACE,YAAY,CAAC;AAAA,EACb,SAAS;AACX,IAAyF,CAAC,GACnE;AACvB,SAAO;AAAA,IACL,UAAU,WAAW,qBAAqB,IACtC,wBACA;AAAA,MACE,IAAI;AAAA,MACJ,MAAM,EAAE,IAAI,eAAe;AAAA,MAC3B,MAAM;AAAA,MACN,UAAU,CAAC;AAAA,MACX,OAAO,CAAC;AAAA,MACR,MAAM,CAAC;AAAA,MACP,KAAK,CAAC;AAAA,MACN,gBAAgB,CAAC;AAAA,MACjB;AAAA,IACF;AAAA,IACJ,WAAW;AAAA,MACT,GAAG,UAAU,MAAM;AAAA,MACnB,GAAG;AAAA,IACL;AAAA,EACF;AACF;AAEO,SAAS,iCACd,aACA;AAAA,EACE,YAAY,CAAC;AAAA,EACb,SAAS;AACX,IAA8F,CAAC,GACnE;AAC5B,SAAO;AAAA,IACL,KAAK,WAAW;AAAA,IAChB,UAAU;AAAA,MACR,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,oBAAoB;AAAA,MACpB;AAAA,IACF;AAAA,IACA,MAAM;AAAA,MACJ,qBAAqB;AAAA,MACrB,iBAAiB;AAAA,IACnB;AAAA,IACA,WAAW;AAAA,MACT,GAAG,UAAU,MAAM;AAAA,MACnB,GAAG;AAAA,IACL;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../../../../src/next/testing/element-data.ts"],"sourcesContent":["export * from '../../testing/element-data'\n"],"mappings":"AAAA,cAAc;","names":[]}

package/dist/esm/next/testing/react-runtime.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/next/testing/react-runtime.tsx"],"sourcesContent":["export { createReactRuntime } from '../../runtimes/react/testing/react-runtime'\n"],"mappings":"AAAA,SAAS,0BAA0B;","names":[]}
+{"version":3,"sources":["../../../../src/next/testing/react-runtime.ts"],"sourcesContent":["export { createReactRuntime } from '../../runtimes/react/testing/react-runtime'\n"],"mappings":"AAAA,SAAS,0BAA0B;","names":[]}

package/dist/esm/prop-controllers/instances.js

@@ -11,9 +11,22 @@ const TableFormFieldsMessageType = {
 class TableFormFieldsPropController extends ControlInstance {
   recv = () => {
   };
+  subscribe(_listener) {
+    return () => {
+    };
+  }
+  isCompositeProp() {
+    return false;
+  }
+  children() {
+    return [];
+  }
   child(_key) {
     return void 0;
   }
+  resolvesToRenderableNode() {
+    return false;
+  }
   tableFormLayoutChange(payload) {
     this.sendMessage({ type: TableFormFieldsMessageType.TABLE_FORM_LAYOUT_CHANGE, payload });
   }
@@ -21,15 +34,18 @@ class TableFormFieldsPropController extends ControlInstance {
     this.sendMessage({ type: TableFormFieldsMessageType.TABLE_FORM_FIELD_LAYOUT_CHANGE, payload });
   }
 }
-function createPropController(descriptor, send) {
+function createPropController({
+  descriptor,
+  ...args
+}) {
   if (!isLegacyDescriptor(descriptor)) {
-    return descriptor.createInstance(send);
+    return descriptor.createInstance(args);
   }
   switch (descriptor.type) {
     case PropControllerTypes.TableFormFields:
-      return new TableFormFieldsPropController(send);
+      return new TableFormFieldsPropController(args);
     default:
-      return new DefaultControlInstance(send);
+      return new DefaultControlInstance(args);
   }
 }
 export {

package/dist/esm/prop-controllers/instances.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/prop-controllers/instances.ts"],"sourcesContent":["import { type Descriptor, isLegacyDescriptor } from './descriptors'\nimport { Types as PropControllerTypes } from '@makeswift/prop-controllers'\n\nimport {\n  type BoxDisplayModel,\n  type ControlMessage,\n  type SendMessage,\n  type InstanceType,\n  ControlInstance,\n  DefaultControlInstance,\n} from '@makeswift/controls'\n\nexport type PropControllerMessage = ControlMessage\n\nexport const TableFormFieldsMessageType = {\n  TABLE_FORM_LAYOUT_CHANGE: 'TABLE_FORM_LAYOUT_CHANGE',\n  TABLE_FORM_FIELD_LAYOUT_CHANGE: 'TABLE_FORM_FIELD_LAYOUT_CHANGE',\n} as const\n\ntype TableLayoutTableFormFieldsMessage = {\n  type: typeof TableFormFieldsMessageType.TABLE_FORM_LAYOUT_CHANGE\n  payload: { layout: BoxDisplayModel }\n}\n\ntype TableFieldLayoutTableFormFieldsMessage = {\n  type: typeof TableFormFieldsMessageType.TABLE_FORM_FIELD_LAYOUT_CHANGE\n  payload: { layout: BoxDisplayModel; index: number }\n}\n\nexport type TableFormFieldsMessage =\n  | TableLayoutTableFormFieldsMessage\n  | TableFieldLayoutTableFormFieldsMessage\n\nexport class TableFormFieldsPropController extends ControlInstance<TableFormFieldsMessage> {\n  recv = () => {}\n  child(_key: string): ControlInstance | undefined {\n    return undefined\n  }\n\n  tableFormLayoutChange(payload: { layout: BoxDisplayModel }) {\n    this.sendMessage({ type: TableFormFieldsMessageType.TABLE_FORM_LAYOUT_CHANGE, payload })\n  }\n\n  tableFormFieldLayoutChange(payload: { layout: BoxDisplayModel; index: number }) {\n    this.sendMessage({ type: TableFormFieldsMessageType.TABLE_FORM_FIELD_LAYOUT_CHANGE, payload })\n  }\n}\n\ntype DescriptorPropController<T extends Descriptor> = T extends {\n  type: typeof PropControllerTypes.TableFormFields\n}\n  ? TableFormFieldsPropController\n  : InstanceType<T>\n\nexport type DescriptorsPropControllers<T extends Record<string, Descriptor>> = {\n  [K in keyof T]: undefined extends T[K]\n    ? DescriptorPropController<Exclude<T[K], undefined>>\n    : DescriptorPropController<T[K]>\n}\n\nexport type AnyPropController = ControlInstance<any> | TableFormFieldsPropController\n\nexport function createPropController(\n  descriptor: Descriptor,\n  send: SendMessage<PropControllerMessage>,\n): AnyPropController {\n  if (!isLegacyDescriptor(descriptor)) {\n    return descriptor.createInstance(send)\n  }\n\n  switch (descriptor.type) {\n    case PropControllerTypes.TableFormFields:\n      return new TableFormFieldsPropController(send as SendMessage<TableFormFieldsMessage>)\n\n    default:\n      return new DefaultControlInstance(send as SendMessage)\n  }\n}\n"],"mappings":"AAAA,SAA0B,0BAA0B;AACpD,SAAS,SAAS,2BAA2B;AAE7C;AAAA,EAKE;AAAA,EACA;AAAA,OACK;AAIA,MAAM,6BAA6B;AAAA,EACxC,0BAA0B;AAAA,EAC1B,gCAAgC;AAClC;AAgBO,MAAM,sCAAsC,gBAAwC;AAAA,EACzF,OAAO,MAAM;AAAA,EAAC;AAAA,EACd,MAAM,MAA2C;AAC/C,WAAO;AAAA,EACT;AAAA,EAEA,sBAAsB,SAAsC;AAC1D,SAAK,YAAY,EAAE,MAAM,2BAA2B,0BAA0B,QAAQ,CAAC;AAAA,EACzF;AAAA,EAEA,2BAA2B,SAAqD;AAC9E,SAAK,YAAY,EAAE,MAAM,2BAA2B,gCAAgC,QAAQ,CAAC;AAAA,EAC/F;AACF;AAgBO,SAAS,qBACd,YACA,MACmB;AACnB,MAAI,CAAC,mBAAmB,UAAU,GAAG;AACnC,WAAO,WAAW,eAAe,IAAI;AAAA,EACvC;AAEA,UAAQ,WAAW,MAAM;AAAA,IACvB,KAAK,oBAAoB;AACvB,aAAO,IAAI,8BAA8B,IAA2C;AAAA,IAEtF;AACE,aAAO,IAAI,uBAAuB,IAAmB;AAAA,EACzD;AACF;","names":[]}
+{"version":3,"sources":["../../../src/prop-controllers/instances.ts"],"sourcesContent":["import { type Descriptor, isLegacyDescriptor } from './descriptors'\nimport { Types as PropControllerTypes } from '@makeswift/prop-controllers'\n\nimport {\n  type BoxDisplayModel,\n  type ControlInstanceArgs,\n  type ControlMessage,\n  type InstanceType,\n  type AnyControlInstance,\n  ControlInstance,\n  DefaultControlInstance,\n} from '@makeswift/controls'\n\nexport type PropControllerMessage = ControlMessage\n\nexport const TableFormFieldsMessageType = {\n  TABLE_FORM_LAYOUT_CHANGE: 'TABLE_FORM_LAYOUT_CHANGE',\n  TABLE_FORM_FIELD_LAYOUT_CHANGE: 'TABLE_FORM_FIELD_LAYOUT_CHANGE',\n} as const\n\ntype TableLayoutTableFormFieldsMessage = {\n  type: typeof TableFormFieldsMessageType.TABLE_FORM_LAYOUT_CHANGE\n  payload: { layout: BoxDisplayModel }\n}\n\ntype TableFieldLayoutTableFormFieldsMessage = {\n  type: typeof TableFormFieldsMessageType.TABLE_FORM_FIELD_LAYOUT_CHANGE\n  payload: { layout: BoxDisplayModel; index: number }\n}\n\nexport type TableFormFieldsMessage =\n  | TableLayoutTableFormFieldsMessage\n  | TableFieldLayoutTableFormFieldsMessage\n\nexport class TableFormFieldsPropController extends ControlInstance<TableFormFieldsMessage> {\n  recv = () => {}\n\n  subscribe(_listener: () => void): () => void {\n    // No mutable state, nothing to subscribe to\n    return () => {}\n  }\n\n  isCompositeProp(): boolean {\n    return false\n  }\n\n  children(): ControlInstance[] {\n    return []\n  }\n\n  child(_key: string): ControlInstance | undefined {\n    return undefined\n  }\n\n  resolvesToRenderableNode(): boolean {\n    return false\n  }\n\n  tableFormLayoutChange(payload: { layout: BoxDisplayModel }) {\n    this.sendMessage({ type: TableFormFieldsMessageType.TABLE_FORM_LAYOUT_CHANGE, payload })\n  }\n\n  tableFormFieldLayoutChange(payload: { layout: BoxDisplayModel; index: number }) {\n    this.sendMessage({ type: TableFormFieldsMessageType.TABLE_FORM_FIELD_LAYOUT_CHANGE, payload })\n  }\n}\n\ntype DescriptorPropController<T extends Descriptor> = T extends {\n  type: typeof PropControllerTypes.TableFormFields\n}\n  ? TableFormFieldsPropController\n  : InstanceType<T>\n\nexport type DescriptorsPropControllers<T extends Record<string, Descriptor>> = {\n  [K in keyof T]: undefined extends T[K]\n    ? DescriptorPropController<Exclude<T[K], undefined>>\n    : DescriptorPropController<T[K]>\n}\n\nexport type AnyPropController = AnyControlInstance | TableFormFieldsPropController\n\nexport function createPropController({\n  descriptor,\n  ...args\n}: {\n  descriptor: Descriptor\n} & ControlInstanceArgs): AnyPropController {\n  if (!isLegacyDescriptor(descriptor)) {\n    return descriptor.createInstance(args)\n  }\n\n  switch (descriptor.type) {\n    case PropControllerTypes.TableFormFields:\n      return new TableFormFieldsPropController(args)\n\n    default:\n      return new DefaultControlInstance(args)\n  }\n}\n"],"mappings":"AAAA,SAA0B,0BAA0B;AACpD,SAAS,SAAS,2BAA2B;AAE7C;AAAA,EAME;AAAA,EACA;AAAA,OACK;AAIA,MAAM,6BAA6B;AAAA,EACxC,0BAA0B;AAAA,EAC1B,gCAAgC;AAClC;AAgBO,MAAM,sCAAsC,gBAAwC;AAAA,EACzF,OAAO,MAAM;AAAA,EAAC;AAAA,EAEd,UAAU,WAAmC;AAE3C,WAAO,MAAM;AAAA,IAAC;AAAA,EAChB;AAAA,EAEA,kBAA2B;AACzB,WAAO;AAAA,EACT;AAAA,EAEA,WAA8B;AAC5B,WAAO,CAAC;AAAA,EACV;AAAA,EAEA,MAAM,MAA2C;AAC/C,WAAO;AAAA,EACT;AAAA,EAEA,2BAAoC;AAClC,WAAO;AAAA,EACT;AAAA,EAEA,sBAAsB,SAAsC;AAC1D,SAAK,YAAY,EAAE,MAAM,2BAA2B,0BAA0B,QAAQ,CAAC;AAAA,EACzF;AAAA,EAEA,2BAA2B,SAAqD;AAC9E,SAAK,YAAY,EAAE,MAAM,2BAA2B,gCAAgC,QAAQ,CAAC;AAAA,EAC/F;AACF;AAgBO,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA,GAAG;AACL,GAE4C;AAC1C,MAAI,CAAC,mBAAmB,UAAU,GAAG;AACnC,WAAO,WAAW,eAAe,IAAI;AAAA,EACvC;AAEA,UAAQ,WAAW,MAAM;AAAA,IACvB,KAAK,oBAAoB;AACvB,aAAO,IAAI,8BAA8B,IAAI;AAAA,IAE/C;AACE,aAAO,IAAI,uBAAuB,IAAI;AAAA,EAC1C;AACF;","names":[]}

package/dist/esm/runtimes/react/components/Element.js

@@ -1,40 +1,66 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { forwardRef, memo, useCallback, useImperativeHandle, useRef } from "react";
+import {
+  forwardRef,
+  memo,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+  lazy
+} from "react";
 import {
   isElementReference
 } from "../../../state/read-only-state";
-import { ElementRegistration } from "./ElementRegistration";
-import { ElementReference } from "./ElementReference";
-import { ElementData } from "./ElementData";
-import { ElementImperativeHandle } from "../element-imperative-handle";
-import { FindDomNode } from "../find-dom-node";
 import { FallbackComponent } from "../../../components/shared/FallbackComponent";
 import { ErrorBoundary } from "../../../components/shared/ErrorBoundary";
+import { useIsReadOnly } from "../hooks/use-is-read-only";
+import { useIsRegisterElementDisabled } from "../hooks/use-disable-register-element";
+import { ElementImperativeHandle } from "../element-imperative-handle";
+import { FindDomNode } from "../find-dom-node";
+import { ElementReference } from "./ElementReference";
+import { ElementData } from "./ElementData";
+const BuilderElementRegistration = lazy(() => import("./ElementRegistration"));
 const Element = memo(
   forwardRef(function Element2({ element }, ref) {
-    const useFindDomNodeRef = useRef(true);
-    const imperativeHandleRef = useRef(new ElementImperativeHandle());
-    const findDomNodeCallbackRef = useCallback((current) => {
-      if (useFindDomNodeRef.current === true) {
-        imperativeHandleRef.current.callback(() => current?.() ?? null);
-      }
-    }, []);
-    const elementCallbackRef = useCallback((current) => {
-      useFindDomNodeRef.current = false;
-      imperativeHandleRef.current.callback(() => current);
-    }, []);
-    useImperativeHandle(ref, () => imperativeHandleRef.current, []);
-    return /* @__PURE__ */ jsx(ElementRegistration, { componentHandle: imperativeHandleRef.current, elementKey: element.key, children: /* @__PURE__ */ jsx(FindDomNode, { ref: findDomNodeCallbackRef, children: /* @__PURE__ */ jsx(ErrorBoundary, { FallbackComponent: ErrorFallback, children: isElementReference(element) ? /* @__PURE__ */ jsx(
-      ElementReference,
+    const { imperativeHandleRef, findDomNodeCallbackRef, elementCallbackRef } = useElementImperativeHandle(ref);
+    const isRegisterElementDisabled = useIsRegisterElementDisabled();
+    const ElementRegistration = useIsReadOnly() || isRegisterElementDisabled ? NoOp : BuilderElementRegistration;
+    return /* @__PURE__ */ jsx(
+      ElementRegistration,
       {
-        ref: elementCallbackRef,
-        elementReference: element
-      },
-      element.key
-    ) : /* @__PURE__ */ jsx(ElementData, { ref: elementCallbackRef, elementData: element }, element.key) }) }) });
+        componentHandle: imperativeHandleRef.current,
+        elementKey: element.key,
+        componentType: element.type,
+        children: /* @__PURE__ */ jsx(FindDomNode, { ref: findDomNodeCallbackRef, children: /* @__PURE__ */ jsx(ErrorBoundary, { FallbackComponent: ErrorFallback, children: isElementReference(element) ? /* @__PURE__ */ jsx(
+          ElementReference,
+          {
+            ref: elementCallbackRef,
+            elementReference: element
+          },
+          element.key
+        ) : /* @__PURE__ */ jsx(ElementData, { ref: elementCallbackRef, elementData: element }, element.key) }) })
+      }
+    );
   })
 );
+function useElementImperativeHandle(ref) {
+  const useFindDomNodeRef = useRef(true);
+  const imperativeHandleRef = useRef(new ElementImperativeHandle());
+  const findDomNodeCallbackRef = useCallback((current) => {
+    if (useFindDomNodeRef.current === true) {
+      imperativeHandleRef.current.callback(() => current?.() ?? null);
+    }
+  }, []);
+  const elementCallbackRef = useCallback((current) => {
+    useFindDomNodeRef.current = false;
+    imperativeHandleRef.current.callback(() => current);
+  }, []);
+  useImperativeHandle(ref, () => imperativeHandleRef.current, []);
+  return { imperativeHandleRef, findDomNodeCallbackRef, elementCallbackRef };
+}
+function NoOp({ children }) {
+  return children;
+}
 function ErrorFallback() {
   return /* @__PURE__ */ jsx(FallbackComponent, { text: `Error rendering component` });
 }

package/dist/esm/runtimes/react/components/Element.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/components/Element.tsx"],"sourcesContent":["'use client'\n\nimport { forwardRef, memo, Ref, useCallback, useImperativeHandle, useRef, ReactNode } from 'react'\nimport {\n  isElementReference,\n  type Element as ElementDataOrRef,\n} from '../../../state/read-only-state'\nimport { ElementRegistration } from './ElementRegistration'\nimport { ElementReference } from './ElementReference'\nimport { ElementData } from './ElementData'\nimport { ElementImperativeHandle } from '../element-imperative-handle'\nimport { FindDomNode } from '../find-dom-node'\nimport { FallbackComponent } from '../../../components/shared/FallbackComponent'\nimport { ErrorBoundary } from '../../../components/shared/ErrorBoundary'\n\ntype Props = {\n  element: ElementDataOrRef\n}\n\nexport const Element = memo(\n  forwardRef(function Element(\n    { element }: Props,\n    ref: Ref<ElementImperativeHandle>,\n  ): ReactNode | null {\n    const useFindDomNodeRef = useRef(true)\n    const imperativeHandleRef = useRef(new ElementImperativeHandle())\n\n    const findDomNodeCallbackRef = useCallback((current: (() => Element | Text | null) | null) => {\n      if (useFindDomNodeRef.current === true) {\n        imperativeHandleRef.current.callback(() => current?.() ?? null)\n      }\n    }, [])\n\n    const elementCallbackRef = useCallback((current: unknown | null) => {\n      useFindDomNodeRef.current = false\n\n      imperativeHandleRef.current.callback(() => current)\n    }, [])\n\n    useImperativeHandle(ref, () => imperativeHandleRef.current, [])\n\n    return (\n      <ElementRegistration componentHandle={imperativeHandleRef.current} elementKey={element.key}>\n        <FindDomNode ref={findDomNodeCallbackRef}>\n          <ErrorBoundary FallbackComponent={ErrorFallback}>\n            {isElementReference(element) ? (\n              <ElementReference\n                key={element.key}\n                ref={elementCallbackRef}\n                elementReference={element}\n              />\n            ) : (\n              <ElementData key={element.key} ref={elementCallbackRef} elementData={element} />\n            )}\n          </ErrorBoundary>\n        </FindDomNode>\n      </ElementRegistration>\n    )\n  }),\n)\n\nfunction ErrorFallback() {\n  return <FallbackComponent text={`Error rendering component`} />\n}\n"],"mappings":";AA8Cc;AA5Cd,SAAS,YAAY,MAAW,aAAa,qBAAqB,cAAyB;AAC3F;AAAA,EACE;AAAA,OAEK;AACP,SAAS,2BAA2B;AACpC,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAC5B,SAAS,+BAA+B;AACxC,SAAS,mBAAmB;AAC5B,SAAS,yBAAyB;AAClC,SAAS,qBAAqB;AAMvB,MAAM,UAAU;AAAA,EACrB,WAAW,SAASA,SAClB,EAAE,QAAQ,GACV,KACkB;AAClB,UAAM,oBAAoB,OAAO,IAAI;AACrC,UAAM,sBAAsB,OAAO,IAAI,wBAAwB,CAAC;AAEhE,UAAM,yBAAyB,YAAY,CAAC,YAAkD;AAC5F,UAAI,kBAAkB,YAAY,MAAM;AACtC,4BAAoB,QAAQ,SAAS,MAAM,UAAU,KAAK,IAAI;AAAA,MAChE;AAAA,IACF,GAAG,CAAC,CAAC;AAEL,UAAM,qBAAqB,YAAY,CAAC,YAA4B;AAClE,wBAAkB,UAAU;AAE5B,0BAAoB,QAAQ,SAAS,MAAM,OAAO;AAAA,IACpD,GAAG,CAAC,CAAC;AAEL,wBAAoB,KAAK,MAAM,oBAAoB,SAAS,CAAC,CAAC;AAE9D,WACE,oBAAC,uBAAoB,iBAAiB,oBAAoB,SAAS,YAAY,QAAQ,KACrF,8BAAC,eAAY,KAAK,wBAChB,8BAAC,iBAAc,mBAAmB,eAC/B,6BAAmB,OAAO,IACzB;AAAA,MAAC;AAAA;AAAA,QAEC,KAAK;AAAA,QACL,kBAAkB;AAAA;AAAA,MAFb,QAAQ;AAAA,IAGf,IAEA,oBAAC,eAA8B,KAAK,oBAAoB,aAAa,WAAnD,QAAQ,GAAoD,GAElF,GACF,GACF;AAAA,EAEJ,CAAC;AACH;AAEA,SAAS,gBAAgB;AACvB,SAAO,oBAAC,qBAAkB,MAAM,6BAA6B;AAC/D;","names":["Element"]}
+{"version":3,"sources":["../../../../../src/runtimes/react/components/Element.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ReactNode,\n  type Ref,\n  type PropsWithChildren,\n  forwardRef,\n  memo,\n  useCallback,\n  useImperativeHandle,\n  useRef,\n  lazy,\n} from 'react'\n\nimport {\n  isElementReference,\n  type Element as ElementDataOrRef,\n} from '../../../state/read-only-state'\n\nimport { FallbackComponent } from '../../../components/shared/FallbackComponent'\nimport { ErrorBoundary } from '../../../components/shared/ErrorBoundary'\n\nimport { useIsReadOnly } from '../hooks/use-is-read-only'\nimport { useIsRegisterElementDisabled } from '../hooks/use-disable-register-element'\n\nimport { ElementImperativeHandle } from '../element-imperative-handle'\nimport { FindDomNode } from '../find-dom-node'\n\nimport { ElementReference } from './ElementReference'\nimport { ElementData } from './ElementData'\n\nconst BuilderElementRegistration = lazy(() => import('./ElementRegistration'))\n\ntype Props = {\n  element: ElementDataOrRef\n}\n\nexport const Element = memo(\n  forwardRef(function Element(\n    { element }: Props,\n    ref: Ref<ElementImperativeHandle>,\n  ): ReactNode | null {\n    const { imperativeHandleRef, findDomNodeCallbackRef, elementCallbackRef } =\n      useElementImperativeHandle(ref)\n\n    const isRegisterElementDisabled = useIsRegisterElementDisabled()\n    const ElementRegistration =\n      useIsReadOnly() || isRegisterElementDisabled ? NoOp : BuilderElementRegistration\n\n    return (\n      <ElementRegistration\n        componentHandle={imperativeHandleRef.current}\n        elementKey={element.key}\n        componentType={element.type}\n      >\n        <FindDomNode ref={findDomNodeCallbackRef}>\n          <ErrorBoundary FallbackComponent={ErrorFallback}>\n            {isElementReference(element) ? (\n              <ElementReference\n                key={element.key}\n                ref={elementCallbackRef}\n                elementReference={element}\n              />\n            ) : (\n              <ElementData key={element.key} ref={elementCallbackRef} elementData={element} />\n            )}\n          </ErrorBoundary>\n        </FindDomNode>\n      </ElementRegistration>\n    )\n  }),\n)\n\n/**\n * Creates an `ElementImperativeHandle` instance that reports the element's DOM location to\n * the builder.\n *\n * Uses the element's attached ref when available; otherwise, falls back to React's\n * `findDOMNode` to locate the rendered DOM node.\n */\nfunction useElementImperativeHandle(ref: Ref<ElementImperativeHandle>) {\n  const useFindDomNodeRef = useRef(true)\n  const imperativeHandleRef = useRef(new ElementImperativeHandle())\n\n  const findDomNodeCallbackRef = useCallback((current: (() => Element | Text | null) | null) => {\n    if (useFindDomNodeRef.current === true) {\n      imperativeHandleRef.current.callback(() => current?.() ?? null)\n    }\n  }, [])\n\n  const elementCallbackRef = useCallback((current: unknown | null) => {\n    useFindDomNodeRef.current = false\n\n    imperativeHandleRef.current.callback(() => current)\n  }, [])\n\n  useImperativeHandle(ref, () => imperativeHandleRef.current, [])\n\n  return { imperativeHandleRef, findDomNodeCallbackRef, elementCallbackRef }\n}\n\nfunction NoOp({ children }: PropsWithChildren) {\n  return children\n}\n\nfunction ErrorFallback() {\n  return <FallbackComponent text={`Error rendering component`} />\n}\n"],"mappings":";AA0Dc;AAxDd;AAAA,EAIE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP;AAAA,EACE;AAAA,OAEK;AAEP,SAAS,yBAAyB;AAClC,SAAS,qBAAqB;AAE9B,SAAS,qBAAqB;AAC9B,SAAS,oCAAoC;AAE7C,SAAS,+BAA+B;AACxC,SAAS,mBAAmB;AAE5B,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAE5B,MAAM,6BAA6B,KAAK,MAAM,OAAO,uBAAuB,CAAC;AAMtE,MAAM,UAAU;AAAA,EACrB,WAAW,SAASA,SAClB,EAAE,QAAQ,GACV,KACkB;AAClB,UAAM,EAAE,qBAAqB,wBAAwB,mBAAmB,IACtE,2BAA2B,GAAG;AAEhC,UAAM,4BAA4B,6BAA6B;AAC/D,UAAM,sBACJ,cAAc,KAAK,4BAA4B,OAAO;AAExD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,iBAAiB,oBAAoB;AAAA,QACrC,YAAY,QAAQ;AAAA,QACpB,eAAe,QAAQ;AAAA,QAEvB,8BAAC,eAAY,KAAK,wBAChB,8BAAC,iBAAc,mBAAmB,eAC/B,6BAAmB,OAAO,IACzB;AAAA,UAAC;AAAA;AAAA,YAEC,KAAK;AAAA,YACL,kBAAkB;AAAA;AAAA,UAFb,QAAQ;AAAA,QAGf,IAEA,oBAAC,eAA8B,KAAK,oBAAoB,aAAa,WAAnD,QAAQ,GAAoD,GAElF,GACF;AAAA;AAAA,IACF;AAAA,EAEJ,CAAC;AACH;AASA,SAAS,2BAA2B,KAAmC;AACrE,QAAM,oBAAoB,OAAO,IAAI;AACrC,QAAM,sBAAsB,OAAO,IAAI,wBAAwB,CAAC;AAEhE,QAAM,yBAAyB,YAAY,CAAC,YAAkD;AAC5F,QAAI,kBAAkB,YAAY,MAAM;AACtC,0BAAoB,QAAQ,SAAS,MAAM,UAAU,KAAK,IAAI;AAAA,IAChE;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,qBAAqB,YAAY,CAAC,YAA4B;AAClE,sBAAkB,UAAU;AAE5B,wBAAoB,QAAQ,SAAS,MAAM,OAAO;AAAA,EACpD,GAAG,CAAC,CAAC;AAEL,sBAAoB,KAAK,MAAM,oBAAoB,SAAS,CAAC,CAAC;AAE9D,SAAO,EAAE,qBAAqB,wBAAwB,mBAAmB;AAC3E;AAEA,SAAS,KAAK,EAAE,SAAS,GAAsB;AAC7C,SAAO;AACT;AAEA,SAAS,gBAAgB;AACvB,SAAO,oBAAC,qBAAkB,MAAM,6BAA6B;AAC/D;","names":["Element"]}

package/dist/esm/runtimes/react/components/ElementRegistration.js

@@ -1,32 +1,57 @@
 "use client";
-import { Fragment, jsx } from "react/jsx-runtime";
-import { memo, useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+import { memo, useMemo, useEffect } from "react";
+import {
+  createPropControllers,
+  registerComponentHandleEffect,
+  registerPropControllersEffect
+} from "../../../state/actions/internal/read-write-actions";
+import { mountComponentEffect } from "../../../state/builder-api/actions";
 import { useDispatch } from "../hooks/use-dispatch";
 import { useDocumentKey } from "../hooks/use-document-context";
-import { useDisableRegisterElement } from "../hooks/use-disable-register-element";
-import { mountComponentEffect } from "../../../state/builder-api/actions";
-import { registerComponentHandleEffect } from "../../../state/actions/internal/read-only-actions";
+import { ControlInstancesProvider } from "./control-instances-context";
 const ElementRegistration = memo(function ElementRegistration2({
   elementKey,
+  componentType,
   componentHandle,
   children
 }) {
   const dispatch = useDispatch();
   const documentKey = useDocumentKey();
-  const isRegisterElementDisabled = useDisableRegisterElement();
+  const controlInstancesContext = useMemo(
+    () => ({
+      elementKey,
+      instances: documentKey ? dispatch(createPropControllers({ documentKey, elementKey, componentType })) : null
+    }),
+    [dispatch, documentKey, elementKey, componentType]
+  );
+  const controlInstances = controlInstancesContext?.instances;
+  useEffect(() => {
+    if (controlInstances == null)
+      return;
+    componentHandle.setPropControllers(controlInstances);
+    return () => componentHandle.setPropControllers(null);
+  }, [controlInstances, componentHandle]);
+  useEffect(() => {
+    if (documentKey == null || controlInstances == null)
+      return;
+    return dispatch(registerPropControllersEffect(documentKey, elementKey, controlInstances));
+  }, [dispatch, documentKey, elementKey, controlInstances]);
   useEffect(() => {
-    if (documentKey == null || isRegisterElementDisabled)
+    if (documentKey == null)
       return;
     return dispatch(registerComponentHandleEffect(documentKey, elementKey, componentHandle));
-  }, [dispatch, documentKey, elementKey, isRegisterElementDisabled]);
+  }, [dispatch, documentKey, elementKey, componentHandle]);
   useEffect(() => {
-    if (documentKey == null || isRegisterElementDisabled)
+    if (documentKey == null)
       return;
     return dispatch(mountComponentEffect(documentKey, elementKey));
-  }, [dispatch, documentKey, elementKey, isRegisterElementDisabled]);
-  return /* @__PURE__ */ jsx(Fragment, { children });
+  }, [dispatch, documentKey, elementKey]);
+  return /* @__PURE__ */ jsx(ControlInstancesProvider, { value: controlInstancesContext, children });
 });
+var ElementRegistration_default = ElementRegistration;
 export {
-  ElementRegistration
+  ElementRegistration,
+  ElementRegistration_default as default
 };
 //# sourceMappingURL=ElementRegistration.js.map

package/dist/esm/runtimes/react/components/ElementRegistration.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/components/ElementRegistration.tsx"],"sourcesContent":["'use client'\n\nimport { ReactNode, memo, useEffect } from 'react'\nimport { ElementImperativeHandle } from '../element-imperative-handle'\nimport { useDispatch } from '../hooks/use-dispatch'\nimport { useDocumentKey } from '../hooks/use-document-context'\nimport { useDisableRegisterElement } from '../hooks/use-disable-register-element'\nimport { mountComponentEffect } from '../../../state/builder-api/actions'\nimport { registerComponentHandleEffect } from '../../../state/actions/internal/read-only-actions'\n\ntype RegisterChildrenAsElementProps = {\n  elementKey: string\n  componentHandle: ElementImperativeHandle\n  children?: ReactNode\n}\n\nexport const ElementRegistration = memo(function ElementRegistration({\n  elementKey,\n  componentHandle,\n  children,\n}: RegisterChildrenAsElementProps): ReactNode {\n  const dispatch = useDispatch()\n  const documentKey = useDocumentKey()\n\n  const isRegisterElementDisabled = useDisableRegisterElement()\n\n  useEffect(() => {\n    if (documentKey == null || isRegisterElementDisabled) return\n\n    return dispatch(registerComponentHandleEffect(documentKey, elementKey, componentHandle))\n  }, [dispatch, documentKey, elementKey, isRegisterElementDisabled])\n\n  useEffect(() => {\n    if (documentKey == null || isRegisterElementDisabled) return\n\n    return dispatch(mountComponentEffect(documentKey, elementKey))\n  }, [dispatch, documentKey, elementKey, isRegisterElementDisabled])\n\n  return <>{children}</>\n})\n"],"mappings":";AAsCS;AApCT,SAAoB,MAAM,iBAAiB;AAE3C,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,iCAAiC;AAC1C,SAAS,4BAA4B;AACrC,SAAS,qCAAqC;AAQvC,MAAM,sBAAsB,KAAK,SAASA,qBAAoB;AAAA,EACnE;AAAA,EACA;AAAA,EACA;AACF,GAA8C;AAC5C,QAAM,WAAW,YAAY;AAC7B,QAAM,cAAc,eAAe;AAEnC,QAAM,4BAA4B,0BAA0B;AAE5D,YAAU,MAAM;AACd,QAAI,eAAe,QAAQ;AAA2B;AAEtD,WAAO,SAAS,8BAA8B,aAAa,YAAY,eAAe,CAAC;AAAA,EACzF,GAAG,CAAC,UAAU,aAAa,YAAY,yBAAyB,CAAC;AAEjE,YAAU,MAAM;AACd,QAAI,eAAe,QAAQ;AAA2B;AAEtD,WAAO,SAAS,qBAAqB,aAAa,UAAU,CAAC;AAAA,EAC/D,GAAG,CAAC,UAAU,aAAa,YAAY,yBAAyB,CAAC;AAEjE,SAAO,gCAAG,UAAS;AACrB,CAAC;","names":["ElementRegistration"]}
+{"version":3,"sources":["../../../../../src/runtimes/react/components/ElementRegistration.tsx"],"sourcesContent":["'use client'\n\nimport { ReactNode, memo, useMemo, useEffect } from 'react'\n\nimport {\n  createPropControllers,\n  registerComponentHandleEffect,\n  registerPropControllersEffect,\n} from '../../../state/actions/internal/read-write-actions'\nimport { mountComponentEffect } from '../../../state/builder-api/actions'\n\nimport { useDispatch } from '../hooks/use-dispatch'\nimport { useDocumentKey } from '../hooks/use-document-context'\n\nimport { ElementImperativeHandle } from '../element-imperative-handle'\n\nimport { ControlInstancesProvider } from './control-instances-context'\n\nexport const ElementRegistration = memo(function ElementRegistration({\n  elementKey,\n  componentType,\n  componentHandle,\n  children,\n}: {\n  elementKey: string\n  componentHandle: ElementImperativeHandle\n  componentType: string\n  children?: ReactNode\n}): ReactNode {\n  const dispatch = useDispatch()\n  const documentKey = useDocumentKey()\n\n  // Create control instances on first render and make them available down the React tree\n  // through `ControlInstancesProvider`\n  const controlInstancesContext = useMemo(\n    () => ({\n      elementKey,\n      instances: documentKey\n        ? dispatch(createPropControllers({ documentKey, elementKey, componentType }))\n        : null,\n    }),\n    [dispatch, documentKey, elementKey, componentType],\n  )\n\n  const controlInstances = controlInstancesContext?.instances\n\n  // Set control instances into the corresponding component handle\n  useEffect(() => {\n    if (controlInstances == null) return\n\n    componentHandle.setPropControllers(controlInstances)\n    return () => componentHandle.setPropControllers(null)\n  }, [controlInstances, componentHandle])\n\n  // Register the control instances and component handle in the state\n  useEffect(() => {\n    if (documentKey == null || controlInstances == null) return\n\n    return dispatch(registerPropControllersEffect(documentKey, elementKey, controlInstances))\n  }, [dispatch, documentKey, elementKey, controlInstances])\n\n  useEffect(() => {\n    if (documentKey == null) return\n\n    return dispatch(registerComponentHandleEffect(documentKey, elementKey, componentHandle))\n  }, [dispatch, documentKey, elementKey, componentHandle])\n\n  // Register the element with to the builder\n  useEffect(() => {\n    if (documentKey == null) return\n\n    return dispatch(mountComponentEffect(documentKey, elementKey))\n  }, [dispatch, documentKey, elementKey])\n\n  return (\n    <ControlInstancesProvider value={controlInstancesContext}>{children}</ControlInstancesProvider>\n  )\n})\n\nexport default ElementRegistration\n"],"mappings":";AA2EI;AAzEJ,SAAoB,MAAM,SAAS,iBAAiB;AAEpD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,4BAA4B;AAErC,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAI/B,SAAS,gCAAgC;AAElC,MAAM,sBAAsB,KAAK,SAASA,qBAAoB;AAAA,EACnE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKc;AACZ,QAAM,WAAW,YAAY;AAC7B,QAAM,cAAc,eAAe;AAInC,QAAM,0BAA0B;AAAA,IAC9B,OAAO;AAAA,MACL;AAAA,MACA,WAAW,cACP,SAAS,sBAAsB,EAAE,aAAa,YAAY,cAAc,CAAC,CAAC,IAC1E;AAAA,IACN;AAAA,IACA,CAAC,UAAU,aAAa,YAAY,aAAa;AAAA,EACnD;AAEA,QAAM,mBAAmB,yBAAyB;AAGlD,YAAU,MAAM;AACd,QAAI,oBAAoB;AAAM;AAE9B,oBAAgB,mBAAmB,gBAAgB;AACnD,WAAO,MAAM,gBAAgB,mBAAmB,IAAI;AAAA,EACtD,GAAG,CAAC,kBAAkB,eAAe,CAAC;AAGtC,YAAU,MAAM;AACd,QAAI,eAAe,QAAQ,oBAAoB;AAAM;AAErD,WAAO,SAAS,8BAA8B,aAAa,YAAY,gBAAgB,CAAC;AAAA,EAC1F,GAAG,CAAC,UAAU,aAAa,YAAY,gBAAgB,CAAC;AAExD,YAAU,MAAM;AACd,QAAI,eAAe;AAAM;AAEzB,WAAO,SAAS,8BAA8B,aAAa,YAAY,eAAe,CAAC;AAAA,EACzF,GAAG,CAAC,UAAU,aAAa,YAAY,eAAe,CAAC;AAGvD,YAAU,MAAM;AACd,QAAI,eAAe;AAAM;AAEzB,WAAO,SAAS,qBAAqB,aAAa,UAAU,CAAC;AAAA,EAC/D,GAAG,CAAC,UAAU,aAAa,UAAU,CAAC;AAEtC,SACE,oBAAC,4BAAyB,OAAO,yBAA0B,UAAS;AAExE,CAAC;AAED,IAAO,8BAAQ;","names":["ElementRegistration"]}

package/dist/esm/runtimes/react/components/control-instances-context.js

@@ -0,0 +1,13 @@
+"use client";
+import { createContext, useContext } from "react";
+const ControlInstancesContext = createContext(null);
+const ControlInstancesProvider = ControlInstancesContext.Provider;
+function useControlInstances(elementKey) {
+  const cx = useContext(ControlInstancesContext);
+  return cx && cx.elementKey === elementKey ? cx.instances : null;
+}
+export {
+  ControlInstancesProvider,
+  useControlInstances
+};
+//# sourceMappingURL=control-instances-context.js.map

package/dist/esm/runtimes/react/components/control-instances-context.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/components/control-instances-context.tsx"],"sourcesContent":["'use client'\n\nimport { createContext, useContext } from 'react'\n\nimport { type AnyControlInstance } from '@makeswift/controls'\n\ntype Context = {\n  elementKey: string\n  instances: Record<string, AnyControlInstance> | null\n}\n\nconst ControlInstancesContext = createContext<Context | null>(null)\n\nexport const ControlInstancesProvider = ControlInstancesContext.Provider\n\nexport function useControlInstances(elementKey: string | undefined): Context['instances'] | null {\n  const cx = useContext(ControlInstancesContext)\n  return cx && cx.elementKey === elementKey ? cx.instances : null\n}\n"],"mappings":";AAEA,SAAS,eAAe,kBAAkB;AAS1C,MAAM,0BAA0B,cAA8B,IAAI;AAE3D,MAAM,2BAA2B,wBAAwB;AAEzD,SAAS,oBAAoB,YAA6D;AAC/F,QAAM,KAAK,WAAW,uBAAuB;AAC7C,SAAO,MAAM,GAAG,eAAe,aAAa,GAAG,YAAY;AAC7D;","names":[]}

package/dist/esm/runtimes/react/components/framework-context.js

@@ -1,3 +1,4 @@
+"use client";
 import { Fragment, jsx } from "react/jsx-runtime";
 import {
   forwardRef,

package/dist/esm/runtimes/react/components/framework-context.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/components/framework-context.tsx"],"sourcesContent":["import {\n  type ReactNode,\n  type PropsWithChildren,\n  type CSSProperties,\n  type ComponentPropsWithoutRef,\n  type MouseEvent,\n  type ForwardRefExoticComponent,\n  type RefAttributes,\n  forwardRef,\n  createContext,\n  useContext,\n  useMemo,\n} from 'react'\n\nimport { type LinkData } from '@makeswift/prop-controllers'\n\nimport { type Snippet } from '../../../client'\n\nimport { BaseHeadSnippet } from './page/HeadSnippet'\n\ntype HeadComponent = (props: { children: ReactNode }) => ReactNode\ntype HeadSnippet = (props: { snippet: Snippet }) => ReactNode\ntype ImageComponent = (props: {\n  src: string\n  alt: string\n  sizes?: string\n  width?: number\n  height?: number\n  priority?: boolean\n  fill?: boolean\n  style?: CSSProperties\n}) => ReactNode\n\ntype LinkProps = Omit<ComponentPropsWithoutRef<'a'>, 'onClick'> & {\n  linkType?: LinkData['type']\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => unknown\n}\n\ntype LinkComponent = ForwardRefExoticComponent<RefAttributes<HTMLAnchorElement> & LinkProps>\n\nexport type FrameworkContext = {\n  Head: HeadComponent\n  HeadSnippet: HeadSnippet\n  Image: ImageComponent\n  Link: LinkComponent\n}\n\n// React 19 automatically hoists metadata tags to the <head>\nconst DefaultHead = ({ children }: PropsWithChildren) => <>{children}</>\n\nconst DefaultHeadSnippet = BaseHeadSnippet\n\nconst DefaultImage: ImageComponent = ({ priority, fill, style, ...props }) => (\n  <img\n    {...props}\n    style={{\n      ...(fill\n        ? {\n            height: '100%',\n            width: '100%',\n            objectFit: 'cover',\n          }\n        : {}),\n      ...style,\n    }}\n    loading={priority ? 'eager' : 'lazy'}\n  />\n)\n\nconst DefaultLink: LinkComponent = forwardRef<HTMLAnchorElement, LinkProps>(\n  ({ linkType, ...props }, ref) => <a {...props} ref={ref} />,\n)\n\nconst FrameworkContext = createContext<Partial<FrameworkContext>>({})\n\nexport const FrameworkContextProvider = ({\n  value,\n  children,\n}: PropsWithChildren<{ value: Partial<FrameworkContext> }>) => {\n  const parentContext = useContext(FrameworkContext)\n  const mergedContext = useMemo(() => ({ ...parentContext, ...value }), [parentContext, value])\n\n  return <FrameworkContext.Provider value={mergedContext}>{children}</FrameworkContext.Provider>\n}\n\nconst defaultContext: FrameworkContext = {\n  Head: DefaultHead,\n  HeadSnippet: DefaultHeadSnippet,\n  Image: DefaultImage,\n  Link: DefaultLink,\n}\n\nexport function useFrameworkContext(): FrameworkContext {\n  return { ...defaultContext, ...useContext(FrameworkContext) }\n}\n"],"mappings":"AAgDyD;AAhDzD;AAAA,EAQE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAMP,SAAS,uBAAuB;AA8BhC,MAAM,cAAc,CAAC,EAAE,SAAS,MAAyB,gCAAG,UAAS;AAErE,MAAM,qBAAqB;AAE3B,MAAM,eAA+B,CAAC,EAAE,UAAU,MAAM,OAAO,GAAG,MAAM,MACtE;AAAA,EAAC;AAAA;AAAA,IACE,GAAG;AAAA,IACJ,OAAO;AAAA,MACL,GAAI,OACA;AAAA,QACE,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,WAAW;AAAA,MACb,IACA,CAAC;AAAA,MACL,GAAG;AAAA,IACL;AAAA,IACA,SAAS,WAAW,UAAU;AAAA;AAChC;AAGF,MAAM,cAA6B;AAAA,EACjC,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,QAAQ,oBAAC,OAAG,GAAG,OAAO,KAAU;AAC3D;AAEA,MAAM,mBAAmB,cAAyC,CAAC,CAAC;AAE7D,MAAM,2BAA2B,CAAC;AAAA,EACvC;AAAA,EACA;AACF,MAA+D;AAC7D,QAAM,gBAAgB,WAAW,gBAAgB;AACjD,QAAM,gBAAgB,QAAQ,OAAO,EAAE,GAAG,eAAe,GAAG,MAAM,IAAI,CAAC,eAAe,KAAK,CAAC;AAE5F,SAAO,oBAAC,iBAAiB,UAAjB,EAA0B,OAAO,eAAgB,UAAS;AACpE;AAEA,MAAM,iBAAmC;AAAA,EACvC,MAAM;AAAA,EACN,aAAa;AAAA,EACb,OAAO;AAAA,EACP,MAAM;AACR;AAEO,SAAS,sBAAwC;AACtD,SAAO,EAAE,GAAG,gBAAgB,GAAG,WAAW,gBAAgB,EAAE;AAC9D;","names":[]}
+{"version":3,"sources":["../../../../../src/runtimes/react/components/framework-context.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ReactNode,\n  type PropsWithChildren,\n  type CSSProperties,\n  type ComponentPropsWithoutRef,\n  type MouseEvent,\n  type ForwardRefExoticComponent,\n  type RefAttributes,\n  forwardRef,\n  createContext,\n  useContext,\n  useMemo,\n} from 'react'\n\nimport { type LinkData } from '@makeswift/prop-controllers'\n\nimport { type Snippet } from '../../../client'\n\nimport { BaseHeadSnippet } from './page/HeadSnippet'\n\ntype HeadComponent = (props: { children: ReactNode }) => ReactNode\ntype HeadSnippet = (props: { snippet: Snippet }) => ReactNode\ntype ImageComponent = (props: {\n  src: string\n  alt: string\n  sizes?: string\n  width?: number\n  height?: number\n  priority?: boolean\n  fill?: boolean\n  style?: CSSProperties\n}) => ReactNode\n\ntype LinkProps = Omit<ComponentPropsWithoutRef<'a'>, 'onClick'> & {\n  linkType?: LinkData['type']\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => unknown\n}\n\ntype LinkComponent = ForwardRefExoticComponent<RefAttributes<HTMLAnchorElement> & LinkProps>\n\nexport type FrameworkContext = {\n  Head: HeadComponent\n  HeadSnippet: HeadSnippet\n  Image: ImageComponent\n  Link: LinkComponent\n}\n\n// React 19 automatically hoists metadata tags to the <head>\nconst DefaultHead = ({ children }: PropsWithChildren) => <>{children}</>\n\nconst DefaultHeadSnippet = BaseHeadSnippet\n\nconst DefaultImage: ImageComponent = ({ priority, fill, style, ...props }) => (\n  <img\n    {...props}\n    style={{\n      ...(fill\n        ? {\n            height: '100%',\n            width: '100%',\n            objectFit: 'cover',\n          }\n        : {}),\n      ...style,\n    }}\n    loading={priority ? 'eager' : 'lazy'}\n  />\n)\n\nconst DefaultLink: LinkComponent = forwardRef<HTMLAnchorElement, LinkProps>(\n  ({ linkType, ...props }, ref) => <a {...props} ref={ref} />,\n)\n\nconst FrameworkContext = createContext<Partial<FrameworkContext>>({})\n\nexport const FrameworkContextProvider = ({\n  value,\n  children,\n}: PropsWithChildren<{ value: Partial<FrameworkContext> }>) => {\n  const parentContext = useContext(FrameworkContext)\n  const mergedContext = useMemo(() => ({ ...parentContext, ...value }), [parentContext, value])\n\n  return <FrameworkContext.Provider value={mergedContext}>{children}</FrameworkContext.Provider>\n}\n\nconst defaultContext: FrameworkContext = {\n  Head: DefaultHead,\n  HeadSnippet: DefaultHeadSnippet,\n  Image: DefaultImage,\n  Link: DefaultLink,\n}\n\nexport function useFrameworkContext(): FrameworkContext {\n  return { ...defaultContext, ...useContext(FrameworkContext) }\n}\n"],"mappings":";AAkDyD;AAhDzD;AAAA,EAQE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAMP,SAAS,uBAAuB;AA8BhC,MAAM,cAAc,CAAC,EAAE,SAAS,MAAyB,gCAAG,UAAS;AAErE,MAAM,qBAAqB;AAE3B,MAAM,eAA+B,CAAC,EAAE,UAAU,MAAM,OAAO,GAAG,MAAM,MACtE;AAAA,EAAC;AAAA;AAAA,IACE,GAAG;AAAA,IACJ,OAAO;AAAA,MACL,GAAI,OACA;AAAA,QACE,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,WAAW;AAAA,MACb,IACA,CAAC;AAAA,MACL,GAAG;AAAA,IACL;AAAA,IACA,SAAS,WAAW,UAAU;AAAA;AAChC;AAGF,MAAM,cAA6B;AAAA,EACjC,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,QAAQ,oBAAC,OAAG,GAAG,OAAO,KAAU;AAC3D;AAEA,MAAM,mBAAmB,cAAyC,CAAC,CAAC;AAE7D,MAAM,2BAA2B,CAAC;AAAA,EACvC;AAAA,EACA;AACF,MAA+D;AAC7D,QAAM,gBAAgB,WAAW,gBAAgB;AACjD,QAAM,gBAAgB,QAAQ,OAAO,EAAE,GAAG,eAAe,GAAG,MAAM,IAAI,CAAC,eAAe,KAAK,CAAC;AAE5F,SAAO,oBAAC,iBAAiB,UAAjB,EAA0B,OAAO,eAAgB,UAAS;AACpE;AAEA,MAAM,iBAAmC;AAAA,EACvC,MAAM;AAAA,EACN,aAAa;AAAA,EACb,OAAO;AAAA,EACP,MAAM;AACR;AAEO,SAAS,sBAAwC;AACtD,SAAO,EAAE,GAAG,gBAAgB,GAAG,WAAW,gBAAgB,EAAE;AAC9D;","names":[]}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/runtimes/react/controls/rich-text/EditableText/useSyncDOMSelection.tsx"],"sourcesContent":["import { ReactEditor } from 'slate-react'\nimport { Editor, Range as SlateRange } from 'slate'\nimport { useIsomorphicLayoutEffect } from '../../../../../components/hooks/useIsomorphicLayoutEffect'\n\n/**\n * Clicking outside of the host blurs our `<Editable />`.\n * `<Editable />` only updates the DOM's selection to match slate when it is focused.\n * In the case of a panel being clicked this hook updates the DOM selection to match slate.\n */\nexport function useSyncDOMSelection(editor: Editor, isEnabled: boolean) {\n  useIsomorphicLayoutEffect(() => {\n    if (!isEnabled || editor.selection == null || ReactEditor.isFocused(editor)) return\n    try {\n      const root = ReactEditor.findDocumentOrShadowRoot(editor) as Document\n      const domSelection = root.getSelection()\n      const newDomRange: Range | null = ReactEditor.toDOMRange(editor, editor.selection)\n\n      if (newDomRange) {\n        if (SlateRange.isBackward(editor.selection!)) {\n          domSelection?.setBaseAndExtent(\n            newDomRange.endContainer,\n            newDomRange.endOffset,\n            newDomRange.startContainer,\n            newDomRange.startOffset,\n          )\n        } else {\n          domSelection?.setBaseAndExtent(\n            newDomRange.startContainer,\n            newDomRange.startOffset,\n            newDomRange.endContainer,\n            newDomRange.endOffset,\n          )\n        }\n      } else {\n        domSelection?.removeAllRanges()\n      }\n    } catch (e) {\n      console.error(e)\n    }\n  })\n}\n"],"mappings":"AAAA,SAAS,mBAAmB;AAC5B,SAAiB,SAAS,kBAAkB;AAC5C,SAAS,iCAAiC;AAOnC,SAAS,oBAAoB,QAAgB,WAAoB;AACtE,4BAA0B,MAAM;AAC9B,QAAI,CAAC,aAAa,OAAO,aAAa,QAAQ,YAAY,UAAU,MAAM;AAAG;AAC7E,QAAI;AACF,YAAM,OAAO,YAAY,yBAAyB,MAAM;AACxD,YAAM,eAAe,KAAK,aAAa;AACvC,YAAM,cAA4B,YAAY,WAAW,QAAQ,OAAO,SAAS;AAEjF,UAAI,aAAa;AACf,YAAI,WAAW,WAAW,OAAO,SAAU,GAAG;AAC5C,wBAAc;AAAA,YACZ,YAAY;AAAA,YACZ,YAAY;AAAA,YACZ,YAAY;AAAA,YACZ,YAAY;AAAA,UACd;AAAA,QACF,OAAO;AACL,wBAAc;AAAA,YACZ,YAAY;AAAA,YACZ,YAAY;AAAA,YACZ,YAAY;AAAA,YACZ,YAAY;AAAA,UACd;AAAA,QACF;AAAA,MACF,OAAO;AACL,sBAAc,gBAAgB;AAAA,MAChC;AAAA,IACF,SAAS,GAAG;AACV,cAAQ,MAAM,CAAC;AAAA,IACjB;AAAA,EACF,CAAC;AACH;","names":[]}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/runtimes/react/controls/rich-text/EditableText/useSyncWithBuilder.tsx"],"sourcesContent":["import { useState, useEffect, useCallback } from 'react'\nimport { Editor, Range } from 'slate'\nimport { type RichTextDTO, richTextDTOtoDAO, richTextDTOtoSelection } from '@makeswift/controls'\n\nimport { useIsInBuilder } from '../../../hooks/use-is-in-builder'\nimport deepEqual from '../../../../../utils/deepEqual'\n\nconst COMMIT_DEBOUNCE_DELAY = 500\n\n/**\n * Compare new prop value with current editor and update editor\n * if the values are not equal.\n */\nexport function useSyncWithBuilder(editor: Editor, text?: RichTextDTO) {\n  const [shouldCommit, setShouldCommit] = useState(true)\n  const isInBuilder = useIsInBuilder()\n\n  useEffect(() => {\n    if (shouldCommit && text && isInBuilder) {\n      const nextValue = richTextDTOtoDAO(text)\n      const nextSelection = richTextDTOtoSelection(text)\n      const sameSelection =\n        editor.selection == null || nextSelection == null\n          ? editor.selection == nextSelection\n          : Range.equals(editor.selection, nextSelection)\n\n      if (!deepEqual(editor.children, nextValue) || !sameSelection) {\n        editor.children = nextValue\n        editor.selection = nextSelection\n        editor.onChange()\n      }\n    }\n  }, [editor, isInBuilder, shouldCommit, text])\n\n  useEffect(() => {\n    if (shouldCommit) return\n\n    const timeoutId = window.setTimeout(() => {\n      setShouldCommit(true)\n    }, COMMIT_DEBOUNCE_DELAY)\n\n    return () => {\n      window.clearTimeout(timeoutId)\n    }\n  }, [shouldCommit])\n\n  return useCallback(() => setShouldCommit(false), [])\n}\n"],"mappings":"AAAA,SAAS,UAAU,WAAW,mBAAmB;AACjD,SAAiB,aAAa;AAC9B,SAA2B,kBAAkB,8BAA8B;AAE3E,SAAS,sBAAsB;AAC/B,OAAO,eAAe;AAEtB,MAAM,wBAAwB;AAMvB,SAAS,mBAAmB,QAAgB,MAAoB;AACrE,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,IAAI;AACrD,QAAM,cAAc,eAAe;AAEnC,YAAU,MAAM;AACd,QAAI,gBAAgB,QAAQ,aAAa;AACvC,YAAM,YAAY,iBAAiB,IAAI;AACvC,YAAM,gBAAgB,uBAAuB,IAAI;AACjD,YAAM,gBACJ,OAAO,aAAa,QAAQ,iBAAiB,OACzC,OAAO,aAAa,gBACpB,MAAM,OAAO,OAAO,WAAW,aAAa;AAElD,UAAI,CAAC,UAAU,OAAO,UAAU,SAAS,KAAK,CAAC,eAAe;AAC5D,eAAO,WAAW;AAClB,eAAO,YAAY;AACnB,eAAO,SAAS;AAAA,MAClB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,QAAQ,aAAa,cAAc,IAAI,CAAC;AAE5C,YAAU,MAAM;AACd,QAAI;AAAc;AAElB,UAAM,YAAY,OAAO,WAAW,MAAM;AACxC,sBAAgB,IAAI;AAAA,IACtB,GAAG,qBAAqB;AAExB,WAAO,MAAM;AACX,aAAO,aAAa,SAAS;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,YAAY,CAAC;AAEjB,SAAO,YAAY,MAAM,gBAAgB,KAAK,GAAG,CAAC,CAAC;AACrD;","names":[]}

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

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