@makeswift/runtime 0.28.8-canary.20 → 0.28.8-canary.21

package/dist/cjs/api/graphql-api-client.js

@@ -27,7 +27,7 @@ class MakeswiftGraphQLApiClient {
   graphqlClient;
   constructor({ endpoint }) {
     this.graphqlClient = new import_client.GraphQLClient(endpoint, {
-      "makeswift-runtime-version": "0.28.8-canary.20"
+      "makeswift-runtime-version": "0.28.8-canary.21"
     });
   }
   async createTableRecord(tableId, columns) {

package/dist/cjs/api/rest-api-client.js

@@ -147,7 +147,7 @@ class MakeswiftRestAPIClient {
     const requestHeaders = new Headers({
       "x-api-key": this.apiKey,
       "makeswift-site-api-key": this.apiKey,
-      "makeswift-runtime-version": "0.28.8-canary.20"
+      "makeswift-runtime-version": "0.28.8-canary.21"
     });
     if (siteVersion?.token) {
       requestUrl.searchParams.set("version", siteVersion.version);

package/dist/cjs/api-handler/handlers/manifest.js

@@ -28,7 +28,7 @@ async function manifestHandler(req, { apiKey, manifest }) {
     return import_request_response.ApiResponse.json({ message: "Unauthorized" }, { status: 401 });
   }
   return import_request_response.ApiResponse.json({
-    version: "0.28.8-canary.20",
+    version: "0.28.8-canary.21",
     interactionMode: true,
     clientSideNavigation: false,
     elementFromPoint: false,

package/dist/cjs/client/index.js

@@ -689,7 +689,7 @@ Received "${apiKey}" instead.`
       headers: {
         "x-api-key": this.apiKey,
         "makeswift-site-api-key": this.apiKey,
-        "makeswift-runtime-version": "0.28.8-canary.20",
+        "makeswift-runtime-version": "0.28.8-canary.21",
         "content-type": "application/json"
       },
       body: JSON.stringify({ token }),

package/dist/cjs/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":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,sBASO;AAEP,kBAA2B;AAsB3B,MAAe,uBAAuB,gBAAAA,eAA0C;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,kBAAc,6BAAY;AAAA,MAC9B,MAAM,eAAe;AAAA,MACrB,MAAM,UAAM,wBAAW,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":["BaseSlotDefinition"]}
+{"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":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,sBASO;AAEP,kBAA2B;AAsB3B,MAAe,uBAAuB,gBAAAA,eAA0C;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,kBAAc,6BAAY;AAAA,MAC9B,MAAM,eAAe;AAAA,MACrB,MAAM,UAAM,wBAAW,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":["BaseSlotDefinition"]}

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/esm/api/graphql-api-client.js

@@ -9,7 +9,7 @@ class MakeswiftGraphQLApiClient {
   graphqlClient;
   constructor({ endpoint }) {
     this.graphqlClient = new GraphQLClient(endpoint, {
-      "makeswift-runtime-version": "0.28.8-canary.20"
+      "makeswift-runtime-version": "0.28.8-canary.21"
     });
   }
   async createTableRecord(tableId, columns) {

package/dist/esm/api/rest-api-client.js

@@ -113,7 +113,7 @@ class MakeswiftRestAPIClient {
     const requestHeaders = new Headers({
       "x-api-key": this.apiKey,
       "makeswift-site-api-key": this.apiKey,
-      "makeswift-runtime-version": "0.28.8-canary.20"
+      "makeswift-runtime-version": "0.28.8-canary.21"
     });
     if (siteVersion?.token) {
       requestUrl.searchParams.set("version", siteVersion.version);

package/dist/esm/api-handler/handlers/manifest.js

@@ -8,7 +8,7 @@ async function manifestHandler(req, { apiKey, manifest }) {
     return ApiResponse.json({ message: "Unauthorized" }, { status: 401 });
   }
   return ApiResponse.json({
-    version: "0.28.8-canary.20",
+    version: "0.28.8-canary.21",
     interactionMode: true,
     clientSideNavigation: false,
     elementFromPoint: false,

package/dist/esm/client/index.js

@@ -669,7 +669,7 @@ Received "${apiKey}" instead.`
       headers: {
         "x-api-key": this.apiKey,
         "makeswift-site-api-key": this.apiKey,
-        "makeswift-runtime-version": "0.28.8-canary.20",
+        "makeswift-runtime-version": "0.28.8-canary.21",
         "content-type": "application/json"
       },
       body: JSON.stringify({ token }),

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/runtimes/react/controls/slot/index.js

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

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

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

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

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

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

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

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

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

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

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

package/dist/types/controls/slot.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import { SlotDefinition as BaseSlotDefinition, SlotControl, type DeserializedRecord, type ResourceResolver, type Stylesheet, type Resolvable, type DataType } from '@makeswift/controls';
 export type SlotPlaceholderConfig = {
     builderOnly?: boolean;

package/dist/types/controls/slot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slot.d.ts","sourceRoot":"","sources":["../../../src/controls/slot.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EACL,cAAc,IAAI,kBAAkB,EACpC,WAAW,EAEX,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,EACrB,KAAK,UAAU,EACf,KAAK,UAAU,EACf,KAAK,QAAQ,EACd,MAAM,qBAAqB,CAAA;AAI5B,MAAM,MAAM,qBAAqB,GAAG;IAClC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAYD,MAAM,MAAM,UAAU,GAAG;IACvB,oBAAoB,CAAC,EAAE,qBAAqB,CAAA;CAC7C,CAAA;AAED,uBAAe,cAAe,SAAQ,kBAAkB,CAAC,SAAS,EAAE,UAAU,CAAC;CAAG;AAElF,qBAAa,cAAe,SAAQ,cAAc;IAChD,MAAM,CAAC,WAAW,CAAC,IAAI,EAAE,kBAAkB,GAAG,cAAc;gBAQhD,MAAM,GAAE,UAAe;IAInC,YAAY,CACV,IAAI,EAAE,QAAQ,CAAC,cAAc,CAAC,GAAG,SAAS,EAC1C,SAAS,EAAE,gBAAgB,EAC3B,WAAW,EAAE,UAAU,EACvB,OAAO,CAAC,EAAE,WAAW,GACpB,UAAU,CAAC,SAAS,GAAG,SAAS,CAAC;CAWrC;AAED,wBAAgB,IAAI,CAAC,MAAM,GAAE,UAAe,GAAG,cAAc,CAE5D;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"slot.d.ts","sourceRoot":"","sources":["../../../src/controls/slot.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EACL,cAAc,IAAI,kBAAkB,EACpC,WAAW,EAEX,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,EACrB,KAAK,UAAU,EACf,KAAK,UAAU,EACf,KAAK,QAAQ,EACd,MAAM,qBAAqB,CAAA;AAI5B,MAAM,MAAM,qBAAqB,GAAG;IAClC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAYD,MAAM,MAAM,UAAU,GAAG;IACvB,oBAAoB,CAAC,EAAE,qBAAqB,CAAA;CAC7C,CAAA;AAED,uBAAe,cAAe,SAAQ,kBAAkB,CAAC,SAAS,EAAE,UAAU,CAAC;CAAG;AAElF,qBAAa,cAAe,SAAQ,cAAc;IAChD,MAAM,CAAC,WAAW,CAAC,IAAI,EAAE,kBAAkB,GAAG,cAAc;gBAQhD,MAAM,GAAE,UAAe;IAInC,YAAY,CACV,IAAI,EAAE,QAAQ,CAAC,cAAc,CAAC,GAAG,SAAS,EAC1C,SAAS,EAAE,gBAAgB,EAC3B,WAAW,EAAE,UAAU,EACvB,OAAO,CAAC,EAAE,WAAW,GACpB,UAAU,CAAC,SAAS,GAAG,SAAS,CAAC;CAWrC;AAED,wBAAgB,IAAI,CAAC,MAAM,GAAE,UAAe,GAAG,cAAc,CAE5D;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/types/runtimes/react/controls/slot/index.d.ts

@@ -0,0 +1,2 @@
+export { renderSlot } from './render-slot';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/runtimes/react/controls/slot/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/runtimes/react/controls/slot/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA"}

package/dist/types/runtimes/react/controls/slot/render-slot.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+import { SlotDefinition, SlotControl, type DataType } from '@makeswift/controls';
+import { type SlotConfig } from '../../../../controls/slot';
+export declare function renderSlot({ data, control, config, }: {
+    data: DataType<SlotDefinition<ReactNode>> | undefined;
+    control: SlotControl | null;
+    config: SlotConfig;
+}): ReactNode;
+//# sourceMappingURL=render-slot.d.ts.map

package/dist/types/runtimes/react/controls/slot/render-slot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"render-slot.d.ts","sourceRoot":"","sources":["../../../../../../src/runtimes/react/controls/slot/render-slot.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,KAAK,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAEhF,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,2BAA2B,CAAA;AAI3D,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,OAAO,EACP,MAAM,GACP,EAAE;IACD,IAAI,EAAE,QAAQ,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,GAAG,SAAS,CAAA;IACrD,OAAO,EAAE,WAAW,GAAG,IAAI,CAAA;IAC3B,MAAM,EAAE,UAAU,CAAA;CACnB,GAAG,SAAS,CAWZ"}

package/dist/types/runtimes/react/controls/{slot.d.ts → slot/slot-value.d.ts}

@@ -1,11 +1,11 @@
-import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';
-import { SlotDefinition, SlotControl, type DataType } from '@makeswift/controls';
-import { type SlotConfig, type SlotPlaceholderConfig } from '../../../controls/slot';
-export declare function renderSlot(props: {
+import { type ComponentPropsWithoutRef, type ElementType, type ReactNode } from 'react';
+import { SlotDefinition, SlotControl, type DataType, type ControlInstanceKey } from '@makeswift/controls';
+import { type SlotConfig, type SlotPlaceholderConfig } from '../../../../controls/slot';
+export declare const SlotValue: import("react").NamedExoticComponent<{
     data: DataType<SlotDefinition<ReactNode>> | undefined;
-    control: SlotControl | null;
+    instanceKey: ControlInstanceKey | undefined;
     config: SlotConfig;
-}): ReactNode;
+}>;
 type SlotProps<T extends ElementType> = {
     as?: T;
     control: SlotControl | null;
@@ -32,4 +32,4 @@ type SlotPlaceholderProps = {
 };
 declare function SlotPlaceholder({ control, placeholder }: SlotPlaceholderProps): ReactNode;
 export {};
-//# sourceMappingURL=slot.d.ts.map
+//# sourceMappingURL=slot-value.d.ts.map

package/dist/types/runtimes/react/controls/slot/slot-value.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slot-value.d.ts","sourceRoot":"","sources":["../../../../../../src/runtimes/react/controls/slot/slot-value.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,wBAAwB,EAC7B,KAAK,WAAW,EAChB,KAAK,SAAS,EAIf,MAAM,OAAO,CAAA;AAGd,OAAO,EACL,cAAc,EACd,WAAW,EACX,KAAK,QAAQ,EACb,KAAK,kBAAkB,EACxB,MAAM,qBAAqB,CAAA;AAE5B,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,qBAAqB,EAAE,MAAM,2BAA2B,CAAA;AAYvF,eAAO,MAAM,SAAS;UAKd,QAAQ,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,GAAG,SAAS;iBACxC,kBAAkB,GAAG,SAAS;YACnC,UAAU;EAmBlB,CAAA;AAEF,KAAK,SAAS,CAAC,CAAC,SAAS,WAAW,IAAI;IACtC,EAAE,CAAC,EAAE,CAAC,CAAA;IACN,OAAO,EAAE,WAAW,GAAG,IAAI,CAAA;IAC3B,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,wBAAgB,IAAI,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,EAClD,EAAE,EACF,OAAO,EACP,QAAQ,EACR,SAAS,EACT,GAAG,WAAW,EACf,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,SAAS,CAAC,CAAC,CAAC,CAAC,2CAuBtE;yBA7Be,IAAI;;;;AAmCpB,KAAK,aAAa,CAAC,CAAC,SAAS,WAAW,IAAI;IAC1C,EAAE,CAAC,EAAE,CAAC,CAAA;IACN,OAAO,EAAE,WAAW,GAAG,IAAI,CAAA;IAE3B,IAAI,EAAE,QAAQ,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,SAAS,SAAS,GACvD,SAAS,GACT,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;IAC/D,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,iBAAS,QAAQ,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,EAC/C,EAAE,EACF,OAAO,EACP,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,SAAS,EACT,GAAG,WAAW,EACf,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,aAAa,CAAC,CAAC,CAAC,CAAC,GAAG,SAAS,CA4B1F;AAED,KAAK,oBAAoB,GAAG;IAC1B,OAAO,EAAE,WAAW,GAAG,IAAI,CAAA;IAC3B,WAAW,CAAC,EAAE,qBAAqB,CAAA;CACpC,CAAA;AAKD,iBAAS,eAAe,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,EAAE,oBAAoB,GAAG,SAAS,CAoElF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@makeswift/runtime",
-  "version": "0.28.8-canary.20",
+  "version": "0.28.8-canary.21",
   "license": "MIT",
   "repository": {
     "url": "makeswift/makeswift",
@@ -238,9 +238,9 @@
     "use-sync-external-store": "^1.5.0",
     "uuid": "^9.0.0",
     "zod": "^3.21.4",
-    "@makeswift/controls": "0.1.21-canary.10",
     "@makeswift/next-plugin": "0.6.1",
-    "@makeswift/prop-controllers": "0.4.15-canary.10"
+    "@makeswift/prop-controllers": "0.4.15-canary.10",
+    "@makeswift/controls": "0.1.21-canary.10"
   },
   "devDependencies": {
     "@emotion/jest": "^11.11.0",

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

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

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

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

package/dist/types/runtimes/react/controls/slot.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"slot.d.ts","sourceRoot":"","sources":["../../../../../src/runtimes/react/controls/slot.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,wBAAwB,EAAE,WAAW,EAAE,SAAS,EAA6B,MAAM,OAAO,CAAA;AAGnG,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,KAAK,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAEhF,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,qBAAqB,EAAE,MAAM,wBAAwB,CAAA;AAQpF,wBAAgB,UAAU,CAAC,KAAK,EAAE;IAChC,IAAI,EAAE,QAAQ,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,GAAG,SAAS,CAAA;IACrD,OAAO,EAAE,WAAW,GAAG,IAAI,CAAA;IAC3B,MAAM,EAAE,UAAU,CAAA;CACnB,GAAG,SAAS,CAEZ;AA8BD,KAAK,SAAS,CAAC,CAAC,SAAS,WAAW,IAAI;IACtC,EAAE,CAAC,EAAE,CAAC,CAAA;IACN,OAAO,EAAE,WAAW,GAAG,IAAI,CAAA;IAC3B,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,wBAAgB,IAAI,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,EAClD,EAAE,EACF,OAAO,EACP,QAAQ,EACR,SAAS,EACT,GAAG,WAAW,EACf,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,SAAS,CAAC,CAAC,CAAC,CAAC,2CAuBtE;yBA7Be,IAAI;;;;AAmCpB,KAAK,aAAa,CAAC,CAAC,SAAS,WAAW,IAAI;IAC1C,EAAE,CAAC,EAAE,CAAC,CAAA;IACN,OAAO,EAAE,WAAW,GAAG,IAAI,CAAA;IAE3B,IAAI,EAAE,QAAQ,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,SAAS,SAAS,GACvD,SAAS,GACT,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;IAC/D,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,iBAAS,QAAQ,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,EAC/C,EAAE,EACF,OAAO,EACP,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,SAAS,EACT,GAAG,WAAW,EACf,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,aAAa,CAAC,CAAC,CAAC,CAAC,GAAG,SAAS,CA4B1F;AAED,KAAK,oBAAoB,GAAG;IAC1B,OAAO,EAAE,WAAW,GAAG,IAAI,CAAA;IAC3B,WAAW,CAAC,EAAE,qBAAqB,CAAA;CACpC,CAAA;AAKD,iBAAS,eAAe,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,EAAE,oBAAoB,GAAG,SAAS,CAoElF"}