@makeswift/runtime 0.28.10-canary.9 → 0.29.0-canary.20

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

@@ -1,8 +1,10 @@
 "use strict";
 "use client";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -16,6 +18,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var slot_value_exports = {};
 __export(slot_value_exports, {
@@ -25,15 +35,15 @@ __export(slot_value_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_controls = require("@makeswift/controls");
 var import_Element = require("../../components/Element");
 var import_columns = require("../../../../components/utils/columns");
 var import_responsive_style = require("../../../../components/utils/responsive-style");
 var import_use_is_in_builder = require("../../hooks/use-is-in-builder");
 var import_use_control_instance = require("../../hooks/use-control-instance");
-var import_use_style = require("../../use-style");
 var import_poll_box_model = require("../../poll-box-model");
+var import_use_style = require("../../css-runtime/hooks/use-style");
+var import_clsx = __toESM(require("clsx"));
 var import_node_value = require("../node-value");
 const SlotValue = (0, import_react.memo)(function SlotValue2({
   instanceKey,
@@ -61,7 +71,7 @@ function Slot({
 }) {
   const As = as ?? "div";
   const [element, setElement] = (0, import_react.useState)(null);
-  const baseClassName = (0, import_use_style.useStyle)({
+  const { className: baseClassName, styleElement: baseStyleElement } = (0, import_use_style.useStyle)({
     display: "flex",
     flexWrap: "wrap",
     width: "100%"
@@ -70,11 +80,14 @@ function Slot({
     if (element == null || control == null)
       return;
     return (0, import_poll_box_model.pollBoxModel)({
-      element,
+      getElement: () => element,
       onBoxModelChange: (boxModel) => control.changeContainerBoxModel(boxModel)
     });
   }, [element, control]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(As, { ...restOfProps, ref: setElement, className: (0, import_css.cx)(baseClassName, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(As, { ...restOfProps, ref: setElement, className: (0, import_clsx.default)(baseClassName, className), children }),
+    baseStyleElement
+  ] });
 }
 Slot.Placeholder = SlotPlaceholder;
 Slot.Item = SlotItem;
@@ -89,7 +102,7 @@ function SlotItem({
 }) {
   const As = as ?? "div";
   const [element, setElement] = (0, import_react.useState)(null);
-  const baseClassName = (0, import_use_style.useStyle)({
+  const { className: baseClassName, styleElement: baseStyleElement } = (0, import_use_style.useStyle)({
     display: "flex",
     ...(0, import_responsive_style.useResponsiveStyle)([grid], ([{ count = 12, spans = [[12]] } = {}]) => {
       const [rowIndex, columnIndex] = (0, import_columns.getIndexes)(spans, index);
@@ -102,11 +115,14 @@ function SlotItem({
     if (element == null || control == null)
       return;
     return (0, import_poll_box_model.pollBoxModel)({
-      element,
+      getElement: () => element,
       onBoxModelChange: (boxModel) => control.changeItemBoxModel(index, boxModel)
     });
   }, [element, control, index]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(As, { ...restOfProps, ref: setElement, className: (0, import_css.cx)(baseClassName, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(As, { ...restOfProps, ref: setElement, className: (0, import_clsx.default)(baseClassName, className), children }),
+    baseStyleElement
+  ] });
 }
 const DEFAULT_SHOW_PLACEHOLDER_IN_BUILDER_ONLY = false;
 const DEFAULT_PLACEHOLDER_HEIGHT_PX = 80;
@@ -121,30 +137,30 @@ function SlotPlaceholder({ control, placeholder }) {
     if (element == null || control == null)
       return;
     return (0, import_poll_box_model.pollBoxModel)({
-      element,
+      getElement: () => element,
       onBoxModelChange: (boxModel) => control.changeContainerBoxModel(boxModel)
     });
   }, [element, control]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "div",
-    {
-      ref: setElement,
-      className: (0, import_use_style.useStyle)({
-        width: "100%",
-        background: "rgba(161, 168, 194, 0.18)"
-      }),
-      style: {
-        height: hidePlaceholder ? 0 : placeholderHeight,
-        visibility: hidePlaceholder ? "hidden" : void 0
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-        "svg",
-        {
-          xmlns: "http://www.w3.org/2000/svg",
-          width: "100%",
-          height: "100%",
-          className: (0, import_use_style.useStyle)({ overflow: "visible", padding: 8 }),
-          children: [
+  const { className: placeholderClassName, styleElement: placeholderStyleElement } = (0, import_use_style.useStyle)({
+    width: "100%",
+    background: "rgba(161, 168, 194, 0.18)"
+  });
+  const { className: svgClassName, styleElement: svgStyleElement } = (0, import_use_style.useStyle)({
+    overflow: "visible",
+    padding: 8
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        ref: setElement,
+        className: placeholderClassName,
+        style: {
+          height: hidePlaceholder ? 0 : placeholderHeight,
+          visibility: hidePlaceholder ? "hidden" : void 0
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", className: svgClassName, children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               "rect",
               {
@@ -174,11 +190,13 @@ function SlotPlaceholder({ control, placeholder }) {
                 children: text
               }
             )
-          ]
-        }
-      )
-    }
-  );
+          ] }),
+          svgStyleElement
+        ]
+      }
+    ),
+    placeholderStyleElement
+  ] });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

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

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

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

@@ -22,7 +22,7 @@ __export(typography_exports, {
   getTypographyStyleSwatchIds: () => getTypographyStyleSwatchIds,
   typographyCss: () => typographyCss,
   typographyFragementToTypographyControlData: () => typographyFragementToTypographyControlData,
-  useTypographyClassName: () => useTypographyClassName
+  useTypographyStyle: () => useTypographyStyle
 });
 module.exports = __toCommonJS(typography_exports);
 var import_controls = require("@makeswift/controls");
@@ -30,8 +30,8 @@ var import_makeswift_api = require("../hooks/makeswift-api");
 var import_colorToString = require("../../../components/utils/colorToString");
 var import_responsive_style = require("../../../components/utils/responsive-style");
 var import_isNonNullable = require("../../../utils/isNonNullable");
-var import_use_style = require("../use-style");
 var import_use_breakpoints = require("../hooks/use-breakpoints");
+var import_use_style = require("../css-runtime/hooks/use-style");
 function typographyFragementToTypographyControlData(fragment) {
   if (fragment == null)
     return void 0;
@@ -154,15 +154,16 @@ function typographyCss(breakpoints, style) {
     import_controls.shallowMergeFallbacks
   );
 }
-function useTypographyClassName(value) {
+function useTypographyStyle(value) {
   const breakpoints = (0, import_use_breakpoints.useBreakpoints)();
-  return (0, import_use_style.useStyle)(typographyCss(breakpoints, value));
+  const cssObject = typographyCss(breakpoints, value);
+  return (0, import_use_style.useStyle)(cssObject);
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   getTypographyStyleSwatchIds,
   typographyCss,
   typographyFragementToTypographyControlData,
-  useTypographyClassName
+  useTypographyStyle
 });
 //# sourceMappingURL=typography.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/controls/typography.ts"],"sourcesContent":["import { CSSObject } from '@emotion/serialize'\nimport {\n  unstable_TypographyDefinition,\n  findBreakpointOverride,\n  shallowMergeFallbacks,\n  type DataType,\n  type Breakpoints,\n  type DeviceOverride,\n  type ResponsiveValue,\n} from '@makeswift/controls'\n\nimport { useSwatches, useTypography } from '../hooks/makeswift-api'\nimport { Typography, Swatch } from '../../../api'\nimport { colorToString } from '../../../components/utils/colorToString'\nimport { responsiveStyle } from '../../../components/utils/responsive-style'\nimport { ColorValue } from '../../../components/utils/types'\nimport { isNonNullable } from '../../../utils/isNonNullable'\nimport { useStyle } from '../use-style'\nimport { useBreakpoints } from '../hooks/use-breakpoints'\n\nexport function typographyFragementToTypographyControlData(\n  fragment: Typography | null,\n): DataType<unstable_TypographyDefinition> | undefined {\n  if (fragment == null) return undefined\n  return {\n    id: fragment.id,\n    style: fragment.style.map(({ deviceId, value }) => ({\n      deviceId,\n      value: {\n        fontFamily: value.fontFamily ?? undefined,\n        lineHeight: value.lineHeight ?? undefined,\n        letterSpacing: value.letterSpacing ?? undefined,\n        fontWeight: value.fontWeight ?? undefined,\n        textAlign: value.textAlign ?? undefined,\n        uppercase: value.uppercase ?? undefined,\n        underline: value.underline ?? undefined,\n        strikethrough: value.strikethrough ?? undefined,\n        italic: value.italic ?? undefined,\n        fontSize: value.fontSize ?? undefined,\n        color: value.color ?? undefined,\n      },\n    })),\n  }\n}\n\ntype EnhancedColor = {\n  color?: ColorValue\n}\n\nexport type TypographyControlDataValue = Exclude<\n  DataType<unstable_TypographyDefinition>,\n  undefined\n>['style'][number]['value']\n\ntype EnhancedTypographyValue = Omit<TypographyControlDataValue, keyof EnhancedColor> & EnhancedColor\n\nexport type EnhancedTypography = Array<DeviceOverride<EnhancedTypographyValue>>\n\nexport function getTypographyStyleSwatchIds(\n  style:\n    | Exclude<DataType<unstable_TypographyDefinition>, undefined>['style']\n    | Typography['style']\n    | null\n    | undefined,\n): string[] {\n  return (\n    style\n      ?.map(override => override.value)\n      .flatMap(typographyStyle => typographyStyle.color?.swatchId)\n      .filter(isNonNullable) ?? []\n  )\n}\n\nconst withColor =\n  (swatches: Swatch[]) =>\n  (\n    deviceRawTypographyValue: DeviceOverride<TypographyControlDataValue>,\n  ): DeviceOverride<EnhancedTypographyValue> => {\n    const { value, deviceId } = deviceRawTypographyValue\n\n    if (value.color == null) {\n      const { color, ...nextValue } = value\n      return {\n        deviceId,\n        value: nextValue,\n      }\n    }\n    return {\n      deviceId,\n      value: {\n        ...value,\n        color: {\n          swatch: swatches.find(s => s && s.id === value.color?.swatchId),\n          alpha: value.color?.alpha ?? undefined,\n        },\n      },\n    }\n  }\n\nconst getDeviceId = ({ deviceId }: DeviceOverride<unknown>) => deviceId\n\n/**\n * `enhanced` here just means typography ids have been replaced with the related entity.\n */\nexport default function useEnhancedTypography(\n  data?: DataType<unstable_TypographyDefinition> | null,\n): EnhancedTypography {\n  const typography = typographyFragementToTypographyControlData(useTypography(data?.id ?? null))\n  const source = typography?.style ?? []\n  const override = data?.style ?? []\n  const breakpoints = useBreakpoints()\n\n  const swatchIds = [\n    ...getTypographyStyleSwatchIds(data?.style),\n    ...getTypographyStyleSwatchIds(typography?.style),\n  ]\n  const swatches = useSwatches(swatchIds).filter(isNonNullable)\n\n  const enhancedSource = source.map(withColor(swatches))\n  const enhancedOverride = override.map(withColor(swatches))\n\n  const devices = [\n    ...new Set(enhancedSource.map(getDeviceId).concat(enhancedOverride.map(getDeviceId))),\n  ]\n\n  return devices\n    .map(deviceId => {\n      const deviceSource = findBreakpointOverride(breakpoints, enhancedSource, deviceId)?.value\n      const deviceOverride = findBreakpointOverride(\n        breakpoints,\n        enhancedOverride,\n        deviceId,\n        v => v,\n      )?.value\n\n      if (deviceSource && deviceOverride) {\n        return {\n          deviceId,\n          value: { ...deviceSource, ...deviceOverride },\n        }\n      } else if (deviceOverride) {\n        return {\n          deviceId,\n          value: deviceOverride,\n        }\n      } else if (deviceSource) {\n        return {\n          deviceId,\n          value: deviceSource,\n        }\n      }\n      return null\n    })\n    .filter(isNonNullable)\n}\n\nfunction typographyToCssObject(value: EnhancedTypographyValue): CSSObject {\n  let styles: CSSObject = {}\n  if (value.color != null) styles.color = colorToString(value.color)\n  if (value.fontFamily != null) styles.fontFamily = value.fontFamily\n  if (value.fontSize != null && value.fontSize.value != null && value.fontSize.unit != null)\n    styles.fontSize = `${value.fontSize.value}${value.fontSize.unit}`\n  if (value.fontWeight != null) styles.fontWeight = value.fontWeight\n  if (value.lineHeight != null) styles.lineHeight = value.lineHeight\n  if (value.letterSpacing != null) styles.letterSpacing = `${value.letterSpacing / 10}em`\n  if (value.uppercase != null)\n    styles.textTransform = value.uppercase === true ? 'uppercase' : 'initial'\n  if (value.underline != null || value.strikethrough != null)\n    styles.textDecoration = [\n      Boolean(value.underline) && 'underline',\n      Boolean(value.strikethrough) && 'line-through',\n    ]\n      .filter(Boolean)\n      .join(' ')\n  if (value.italic != null) styles.fontStyle = value.italic === true ? 'italic' : 'initial'\n\n  return styles\n}\n\nexport function typographyCss(breakpoints: Breakpoints, style: EnhancedTypography): CSSObject {\n  return responsiveStyle<\n    EnhancedTypographyValue,\n    [ResponsiveValue<EnhancedTypographyValue> | null | undefined]\n  >(\n    breakpoints,\n    [style],\n    ([value]) => (value !== undefined ? typographyToCssObject(value) : {}),\n    shallowMergeFallbacks,\n  )\n}\n\nexport function useTypographyClassName(value: EnhancedTypography): string {\n  const breakpoints = useBreakpoints()\n  return useStyle(typographyCss(breakpoints, value))\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../../src/runtimes/react/controls/typography.ts"],"sourcesContent":["import { CSSObject } from '@emotion/serialize'\nimport {\n  unstable_TypographyDefinition,\n  findBreakpointOverride,\n  shallowMergeFallbacks,\n  type DataType,\n  type Breakpoints,\n  type DeviceOverride,\n  type ResponsiveValue,\n} from '@makeswift/controls'\n\nimport { useSwatches, useTypography } from '../hooks/makeswift-api'\nimport { Typography, Swatch } from '../../../api'\nimport { colorToString } from '../../../components/utils/colorToString'\nimport { responsiveStyle } from '../../../components/utils/responsive-style'\nimport { ColorValue } from '../../../components/utils/types'\nimport { isNonNullable } from '../../../utils/isNonNullable'\nimport { useBreakpoints } from '../hooks/use-breakpoints'\nimport { useStyle } from '../css-runtime/hooks/use-style'\n\nexport function typographyFragementToTypographyControlData(\n  fragment: Typography | null,\n): DataType<unstable_TypographyDefinition> | undefined {\n  if (fragment == null) return undefined\n  return {\n    id: fragment.id,\n    style: fragment.style.map(({ deviceId, value }) => ({\n      deviceId,\n      value: {\n        fontFamily: value.fontFamily ?? undefined,\n        lineHeight: value.lineHeight ?? undefined,\n        letterSpacing: value.letterSpacing ?? undefined,\n        fontWeight: value.fontWeight ?? undefined,\n        textAlign: value.textAlign ?? undefined,\n        uppercase: value.uppercase ?? undefined,\n        underline: value.underline ?? undefined,\n        strikethrough: value.strikethrough ?? undefined,\n        italic: value.italic ?? undefined,\n        fontSize: value.fontSize ?? undefined,\n        color: value.color ?? undefined,\n      },\n    })),\n  }\n}\n\ntype EnhancedColor = {\n  color?: ColorValue\n}\n\nexport type TypographyControlDataValue = Exclude<\n  DataType<unstable_TypographyDefinition>,\n  undefined\n>['style'][number]['value']\n\ntype EnhancedTypographyValue = Omit<TypographyControlDataValue, keyof EnhancedColor> & EnhancedColor\n\nexport type EnhancedTypography = Array<DeviceOverride<EnhancedTypographyValue>>\n\nexport function getTypographyStyleSwatchIds(\n  style:\n    | Exclude<DataType<unstable_TypographyDefinition>, undefined>['style']\n    | Typography['style']\n    | null\n    | undefined,\n): string[] {\n  return (\n    style\n      ?.map(override => override.value)\n      .flatMap(typographyStyle => typographyStyle.color?.swatchId)\n      .filter(isNonNullable) ?? []\n  )\n}\n\nconst withColor =\n  (swatches: Swatch[]) =>\n  (\n    deviceRawTypographyValue: DeviceOverride<TypographyControlDataValue>,\n  ): DeviceOverride<EnhancedTypographyValue> => {\n    const { value, deviceId } = deviceRawTypographyValue\n\n    if (value.color == null) {\n      const { color, ...nextValue } = value\n      return {\n        deviceId,\n        value: nextValue,\n      }\n    }\n    return {\n      deviceId,\n      value: {\n        ...value,\n        color: {\n          swatch: swatches.find(s => s && s.id === value.color?.swatchId),\n          alpha: value.color?.alpha ?? undefined,\n        },\n      },\n    }\n  }\n\nconst getDeviceId = ({ deviceId }: DeviceOverride<unknown>) => deviceId\n\n/**\n * `enhanced` here just means typography ids have been replaced with the related entity.\n */\nexport default function useEnhancedTypography(\n  data?: DataType<unstable_TypographyDefinition> | null,\n): EnhancedTypography {\n  const typography = typographyFragementToTypographyControlData(useTypography(data?.id ?? null))\n  const source = typography?.style ?? []\n  const override = data?.style ?? []\n  const breakpoints = useBreakpoints()\n\n  const swatchIds = [\n    ...getTypographyStyleSwatchIds(data?.style),\n    ...getTypographyStyleSwatchIds(typography?.style),\n  ]\n  const swatches = useSwatches(swatchIds).filter(isNonNullable)\n\n  const enhancedSource = source.map(withColor(swatches))\n  const enhancedOverride = override.map(withColor(swatches))\n\n  const devices = [\n    ...new Set(enhancedSource.map(getDeviceId).concat(enhancedOverride.map(getDeviceId))),\n  ]\n\n  return devices\n    .map(deviceId => {\n      const deviceSource = findBreakpointOverride(breakpoints, enhancedSource, deviceId)?.value\n      const deviceOverride = findBreakpointOverride(\n        breakpoints,\n        enhancedOverride,\n        deviceId,\n        v => v,\n      )?.value\n\n      if (deviceSource && deviceOverride) {\n        return {\n          deviceId,\n          value: { ...deviceSource, ...deviceOverride },\n        }\n      } else if (deviceOverride) {\n        return {\n          deviceId,\n          value: deviceOverride,\n        }\n      } else if (deviceSource) {\n        return {\n          deviceId,\n          value: deviceSource,\n        }\n      }\n      return null\n    })\n    .filter(isNonNullable)\n}\n\nfunction typographyToCssObject(value: EnhancedTypographyValue): CSSObject {\n  let styles: CSSObject = {}\n  if (value.color != null) styles.color = colorToString(value.color)\n  if (value.fontFamily != null) styles.fontFamily = value.fontFamily\n  if (value.fontSize != null && value.fontSize.value != null && value.fontSize.unit != null)\n    styles.fontSize = `${value.fontSize.value}${value.fontSize.unit}`\n  if (value.fontWeight != null) styles.fontWeight = value.fontWeight\n  if (value.lineHeight != null) styles.lineHeight = value.lineHeight\n  if (value.letterSpacing != null) styles.letterSpacing = `${value.letterSpacing / 10}em`\n  if (value.uppercase != null)\n    styles.textTransform = value.uppercase === true ? 'uppercase' : 'initial'\n  if (value.underline != null || value.strikethrough != null)\n    styles.textDecoration = [\n      Boolean(value.underline) && 'underline',\n      Boolean(value.strikethrough) && 'line-through',\n    ]\n      .filter(Boolean)\n      .join(' ')\n  if (value.italic != null) styles.fontStyle = value.italic === true ? 'italic' : 'initial'\n\n  return styles\n}\n\nexport function typographyCss(breakpoints: Breakpoints, style: EnhancedTypography): CSSObject {\n  return responsiveStyle<\n    EnhancedTypographyValue,\n    [ResponsiveValue<EnhancedTypographyValue> | null | undefined]\n  >(\n    breakpoints,\n    [style],\n    ([value]) => (value !== undefined ? typographyToCssObject(value) : {}),\n    shallowMergeFallbacks,\n  )\n}\n\nexport function useTypographyStyle(value: EnhancedTypography) {\n  const breakpoints = useBreakpoints()\n  const cssObject = typographyCss(breakpoints, value)\n  return useStyle(cssObject)\n}\n"],"mappings":"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","names":[]}

package/dist/cjs/runtimes/react/controls/use-slate-reset.js

@@ -21,7 +21,7 @@ __export(use_slate_reset_exports, {
   useSlateReset: () => useSlateReset
 });
 module.exports = __toCommonJS(use_slate_reset_exports);
-var import_use_style = require("../use-style");
+var import_use_style = require("../css-runtime/hooks/use-style");
 function useSlateReset() {
   return (0, import_use_style.useStyle)({
     // @ts-expect-error: csstype's `all` doesn't accept `!important` annotations

package/dist/cjs/runtimes/react/controls/use-slate-reset.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/controls/use-slate-reset.ts"],"sourcesContent":["import { useStyle } from '../use-style'\n\n/**\n * `slate-react` renders read-only rich-text within a `<p>` tag containing\n * multiple spans. Makeswift text-styles are applied to these spans via a class\n * on the span tags directly:\n *\n * <p class=\"...\">\n *    <span class=\"mswft-12345\">My text</span>\n * </p>\n *\n * HOWEVER: in the builder, `slate-react` renders the same content as editable\n * text with additional DOM structure; namely, intermediate nested spans (with\n * data attributes like `data-slate-string`, `data-slate-zero-width`) between\n * the `<span>` that carries Makeswift's typography class and the text content:\n *\n * <p data-slate-node=\"element\" class=\"...\">\n *    <span data-slate-node=\"text\">\n *        <span class=\"mswft-12345\" data-slate-leaf=\"true\">\n *            <span data-slate-string=\"true\">My text</span>\n *        </span>\n *    </span>\n * </p>\n *\n * If the host contains CSS that matches spans directly (ex: a global `span {\n * color: ... }` rule), the host CSS applies to the innermost spans and beats\n * the Makeswift text styles in terms of specificity. Therefore, setting text\n * styles won't work in the builder: the top-level host styles will win. On the\n * live page, the Makeswift styles win since the intermediate DOM elements are\n * not present.\n *\n * These style updates address this by reverting base styles on these spans,\n * restoring inheritance from Makeswift defined styles, thus matching the live\n * page where the text is a direct child of the classed leaf span.\n */\nexport function useSlateReset(): string {\n  return useStyle({\n    // @ts-expect-error: csstype's `all` doesn't accept `!important` annotations\n    '& [data-slate-string], & [data-slate-zero-width]': {\n      all: 'revert !important',\n    },\n  })\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAyB;AAmClB,SAAS,gBAAwB;AACtC,aAAO,2BAAS;AAAA;AAAA,IAEd,oDAAoD;AAAA,MAClD,KAAK;AAAA,IACP;AAAA,EACF,CAAC;AACH;","names":[]}
+{"version":3,"sources":["../../../../../src/runtimes/react/controls/use-slate-reset.ts"],"sourcesContent":["import { useStyle } from '../css-runtime/hooks/use-style'\n\n/**\n * `slate-react` renders read-only rich-text within a `<p>` tag containing\n * multiple spans. Makeswift text-styles are applied to these spans via a class\n * on the span tags directly:\n *\n * <p class=\"...\">\n *    <span class=\"mswft-12345\">My text</span>\n * </p>\n *\n * HOWEVER: in the builder, `slate-react` renders the same content as editable\n * text with additional DOM structure; namely, intermediate nested spans (with\n * data attributes like `data-slate-string`, `data-slate-zero-width`) between\n * the `<span>` that carries Makeswift's typography class and the text content:\n *\n * <p data-slate-node=\"element\" class=\"...\">\n *    <span data-slate-node=\"text\">\n *        <span class=\"mswft-12345\" data-slate-leaf=\"true\">\n *            <span data-slate-string=\"true\">My text</span>\n *        </span>\n *    </span>\n * </p>\n *\n * If the host contains CSS that matches spans directly (ex: a global `span {\n * color: ... }` rule), the host CSS applies to the innermost spans and beats\n * the Makeswift text styles in terms of specificity. Therefore, setting text\n * styles won't work in the builder: the top-level host styles will win. On the\n * live page, the Makeswift styles win since the intermediate DOM elements are\n * not present.\n *\n * These style updates address this by reverting base styles on these spans,\n * restoring inheritance from Makeswift defined styles, thus matching the live\n * page where the text is a direct child of the classed leaf span.\n */\nexport function useSlateReset() {\n  return useStyle({\n    // @ts-expect-error: csstype's `all` doesn't accept `!important` annotations\n    '& [data-slate-string], & [data-slate-zero-width]': {\n      all: 'revert !important',\n    },\n  })\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAyB;AAmClB,SAAS,gBAAgB;AAC9B,aAAO,2BAAS;AAAA;AAAA,IAEd,oDAAoD;AAAA,MAClD,KAAK;AAAA,IACP;AAAA,EACF,CAAC;AACH;","names":[]}

package/dist/cjs/runtimes/react/css-runtime/browser-dynamic-styles-bridge.js

@@ -0,0 +1,55 @@
+"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 browser_dynamic_styles_bridge_exports = {};
+__export(browser_dynamic_styles_bridge_exports, {
+  BrowserDynamicStylesBridge: () => BrowserDynamicStylesBridge
+});
+module.exports = __toCommonJS(browser_dynamic_styles_bridge_exports);
+class BrowserDynamicStylesBridge {
+  unsubscribe;
+  isDisposed;
+  applier;
+  constructor(registry, applier) {
+    this.isDisposed = false;
+    this.applier = applier;
+    this.unsubscribe = registry.subscribeToControlledStyleWrites(
+      ({ className, currentData, initialData }) => {
+        this.handleWrite({ className, currentData, initialData });
+      }
+    );
+  }
+  handleWrite({
+    className,
+    currentData,
+    initialData
+  }) {
+    if (currentData === initialData || this.isDisposed)
+      return;
+    this.applier.apply({ className, css: currentData.css });
+  }
+  dispose() {
+    this.isDisposed = true;
+    this.unsubscribe();
+  }
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BrowserDynamicStylesBridge
+});
+//# sourceMappingURL=browser-dynamic-styles-bridge.js.map

package/dist/cjs/runtimes/react/css-runtime/browser-dynamic-styles-bridge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/css-runtime/browser-dynamic-styles-bridge.ts"],"sourcesContent":["import { ControlledStyleData, BrowserStyleApplier } from './types'\nimport { StylesRegistry } from './styles-registry'\n\n/**\n * Handles runtime style changes to \"controlled\" (Makeswift-editable) style data by mediating\n * between the Makeswift styles registry and a mechanism for applying dynamic style updates\n * to the browser.\n */\nexport class BrowserDynamicStylesBridge {\n  private unsubscribe: () => void\n  private isDisposed: boolean\n  private applier: BrowserStyleApplier\n\n  constructor(registry: StylesRegistry, applier: BrowserStyleApplier) {\n    this.isDisposed = false\n    this.applier = applier\n    this.unsubscribe = registry.subscribeToControlledStyleWrites(\n      ({ className, currentData, initialData }) => {\n        this.handleWrite({ className, currentData, initialData })\n      },\n    )\n  }\n\n  private handleWrite({\n    className,\n    currentData,\n    initialData,\n  }: {\n    className: string\n    currentData: ControlledStyleData\n    initialData: ControlledStyleData\n  }) {\n    if (currentData === initialData || this.isDisposed) return\n    this.applier.apply({ className, css: currentData.css })\n  }\n\n  dispose(): void {\n    this.isDisposed = true\n    this.unsubscribe()\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAQO,MAAM,2BAA2B;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EAER,YAAY,UAA0B,SAA8B;AAClE,SAAK,aAAa;AAClB,SAAK,UAAU;AACf,SAAK,cAAc,SAAS;AAAA,MAC1B,CAAC,EAAE,WAAW,aAAa,YAAY,MAAM;AAC3C,aAAK,YAAY,EAAE,WAAW,aAAa,YAAY,CAAC;AAAA,MAC1D;AAAA,IACF;AAAA,EACF;AAAA,EAEQ,YAAY;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,EACF,GAIG;AACD,QAAI,gBAAgB,eAAe,KAAK;AAAY;AACpD,SAAK,QAAQ,MAAM,EAAE,WAAW,KAAK,YAAY,IAAI,CAAC;AAAA,EACxD;AAAA,EAEA,UAAgB;AACd,SAAK,aAAa;AAClB,SAAK,YAAY;AAAA,EACnB;AACF;","names":[]}

package/dist/cjs/runtimes/react/css-runtime/components/controlled-styles.js

@@ -0,0 +1,76 @@
+"use strict";
+"use client";
+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 controlled_styles_exports = {};
+__export(controlled_styles_exports, {
+  ControlledStyle: () => ControlledStyle,
+  ControlledStyles: () => ControlledStyles
+});
+module.exports = __toCommonJS(controlled_styles_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_poll_box_model = require("../../poll-box-model");
+var import_makeswift_style = require("./makeswift-style");
+var import_utils = require("../utils");
+var import_use_is_in_builder = require("../../hooks/use-is-in-builder");
+function ControlledStyles({ classNameToStyles }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: Array.from(classNameToStyles.entries()).map(([className, styleData]) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ControlledStyle, { className, styleData }, className);
+  }) });
+}
+function ControlledStyle({
+  className,
+  styleData
+}) {
+  const isInBuilder = (0, import_use_is_in_builder.useIsInBuilder)();
+  (0, import_react.useEffect)(() => {
+    if (isInBuilder) {
+      const onBoxModelChange = styleData.onBoxModelChange;
+      if (onBoxModelChange == null)
+        return;
+      const findElement = () => document.querySelector(`.${className}`);
+      let element = findElement();
+      return (0, import_poll_box_model.pollBoxModel)({
+        getElement: () => {
+          if (element == null || !element.isConnected) {
+            element = findElement();
+          }
+          return element;
+        },
+        onBoxModelChange
+      });
+    }
+    return () => {
+    };
+  }, [className, isInBuilder]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_makeswift_style.MakeswiftStyle,
+    {
+      href: className,
+      css: styleData.css,
+      precedence: (0, import_utils.getControlledStylePrecedence)(styleData)
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ControlledStyle,
+  ControlledStyles
+});
+//# sourceMappingURL=controlled-styles.js.map

package/dist/cjs/runtimes/react/css-runtime/components/controlled-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/runtimes/react/css-runtime/components/controlled-styles.tsx"],"sourcesContent":["'use client'\n\nimport { ReactNode, useEffect } from 'react'\nimport { pollBoxModel } from '../../poll-box-model'\nimport { MakeswiftStyle } from './makeswift-style'\nimport { ControlledStyleData } from '../types'\nimport { getControlledStylePrecedence } from '../utils'\nimport { useIsInBuilder } from '../../hooks/use-is-in-builder'\n\ntype Props = {\n  classNameToStyles: ReadonlyMap<string, ControlledStyleData>\n}\n\n/*\n  Note the importance of prop resolution having completed, such that the store\n  (`classNameToStyles`) has been fully populated.\n*/\nexport function ControlledStyles({ classNameToStyles }: Props): ReactNode {\n  return (\n    <>\n      {Array.from(classNameToStyles.entries()).map(([className, styleData]) => {\n        return <ControlledStyle className={className} styleData={styleData} key={className} />\n      })}\n    </>\n  )\n}\n\nexport function ControlledStyle({\n  className,\n  styleData,\n}: {\n  className: string\n  styleData: ControlledStyleData\n}): ReactNode {\n  const isInBuilder = useIsInBuilder()\n\n  // Excluding `styleData.onBoxModelChange` from effect dependencies prevents unnecessary\n  // tear downs and restarts of box model polling. `styleData.onBoxModelChange` is a wrapper\n  // around a function from a control instance. The wrapper reference changes on every StableValue\n  // read, but the underlying logic from the control instance does not.\n  useEffect(() => {\n    if (isInBuilder) {\n      const onBoxModelChange = styleData.onBoxModelChange\n      if (onBoxModelChange == null) return\n\n      const findElement = () => document.querySelector(`.${className}`)\n      let element = findElement()\n\n      return pollBoxModel({\n        getElement: () => {\n          // The 'isConnected' check is important to RSC re-renders, where the DOM node bearing the controlled class gets replaced\n          if (element == null || !element.isConnected) {\n            element = findElement()\n          }\n          return element\n        },\n        onBoxModelChange,\n      })\n    }\n    return () => {}\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [className, isInBuilder])\n\n  return (\n    <MakeswiftStyle\n      href={className}\n      css={styleData.css}\n      precedence={getControlledStylePrecedence(styleData)}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBI;AAjBJ,mBAAqC;AACrC,4BAA6B;AAC7B,6BAA+B;AAE/B,mBAA6C;AAC7C,+BAA+B;AAUxB,SAAS,iBAAiB,EAAE,kBAAkB,GAAqB;AACxE,SACE,2EACG,gBAAM,KAAK,kBAAkB,QAAQ,CAAC,EAAE,IAAI,CAAC,CAAC,WAAW,SAAS,MAAM;AACvE,WAAO,4CAAC,mBAAgB,WAAsB,aAA2B,SAAW;AAAA,EACtF,CAAC,GACH;AAEJ;AAEO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AACF,GAGc;AACZ,QAAM,kBAAc,yCAAe;AAMnC,8BAAU,MAAM;AACd,QAAI,aAAa;AACf,YAAM,mBAAmB,UAAU;AACnC,UAAI,oBAAoB;AAAM;AAE9B,YAAM,cAAc,MAAM,SAAS,cAAc,IAAI,SAAS,EAAE;AAChE,UAAI,UAAU,YAAY;AAE1B,iBAAO,oCAAa;AAAA,QAClB,YAAY,MAAM;AAEhB,cAAI,WAAW,QAAQ,CAAC,QAAQ,aAAa;AAC3C,sBAAU,YAAY;AAAA,UACxB;AACA,iBAAO;AAAA,QACT;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH;AACA,WAAO,MAAM;AAAA,IAAC;AAAA,EAEhB,GAAG,CAAC,WAAW,WAAW,CAAC;AAE3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,KAAK,UAAU;AAAA,MACf,gBAAY,2CAA6B,SAAS;AAAA;AAAA,EACpD;AAEJ;","names":[]}

package/dist/cjs/runtimes/react/css-runtime/components/makeswift-style.js

@@ -0,0 +1,42 @@
+"use strict";
+"use client";
+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 makeswift_style_exports = {};
+__export(makeswift_style_exports, {
+  MakeswiftStyle: () => MakeswiftStyle
+});
+module.exports = __toCommonJS(makeswift_style_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_constants = require("../constants");
+var import_use_styles_context = require("../hooks/use-styles-context");
+function MakeswiftStyle({
+  href,
+  css,
+  precedence
+}) {
+  const { shouldRenderStyleElements } = (0, import_use_styles_context.useStylesContext)();
+  if (!shouldRenderStyleElements)
+    return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { href, precedence: precedence ?? import_constants.DEFAULT_CSS_PRECEDENCE, children: css });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MakeswiftStyle
+});
+//# sourceMappingURL=makeswift-style.js.map

package/dist/cjs/runtimes/react/css-runtime/components/makeswift-style.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/runtimes/react/css-runtime/components/makeswift-style.tsx"],"sourcesContent":["'use client'\n\nimport { DEFAULT_CSS_PRECEDENCE } from '../constants'\nimport { useStylesContext } from '../hooks/use-styles-context'\n\nexport function MakeswiftStyle({\n  href,\n  css,\n  precedence,\n}: {\n  href: string\n  css: string\n  precedence?: string\n}) {\n  const { shouldRenderStyleElements } = useStylesContext()\n  if (!shouldRenderStyleElements) return null\n  return (\n    <style href={href} precedence={precedence ?? DEFAULT_CSS_PRECEDENCE}>\n      {css}\n    </style>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBI;AAfJ,uBAAuC;AACvC,gCAAiC;AAE1B,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,EAAE,0BAA0B,QAAI,4CAAiB;AACvD,MAAI,CAAC;AAA2B,WAAO;AACvC,SACE,4CAAC,WAAM,MAAY,YAAY,cAAc,yCAC1C,eACH;AAEJ;","names":[]}

package/dist/cjs/runtimes/react/css-runtime/components/rsc-emitted-style.js

@@ -0,0 +1,46 @@
+"use strict";
+"use client";
+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 rsc_emitted_style_exports = {};
+__export(rsc_emitted_style_exports, {
+  RSCEmittedStyle: () => RSCEmittedStyle
+});
+module.exports = __toCommonJS(rsc_emitted_style_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_use_is_read_only = require("../../hooks/use-is-read-only");
+var import_use_styles_context = require("../hooks/use-styles-context");
+var import_controlled_styles = require("./controlled-styles");
+function RSCEmittedStyle({ namespace, serializableData }) {
+  const { stylesRegistry } = (0, import_use_styles_context.useStylesContext)();
+  const isReadOnly = (0, import_use_is_read_only.useIsReadOnly)();
+  if (!isReadOnly) {
+    return null;
+  }
+  stylesRegistry.setControlledStyle({
+    namespace,
+    className: serializableData.className,
+    data: serializableData
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_controlled_styles.ControlledStyle, { className: serializableData.className, styleData: serializableData });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  RSCEmittedStyle
+});
+//# sourceMappingURL=rsc-emitted-style.js.map

package/dist/cjs/runtimes/react/css-runtime/components/rsc-emitted-style.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/runtimes/react/css-runtime/components/rsc-emitted-style.tsx"],"sourcesContent":["'use client'\n\nimport { useIsReadOnly } from '../../hooks/use-is-read-only'\nimport { useStylesContext } from '../hooks/use-styles-context'\nimport { ControlledStyleData } from '../types'\nimport { ControlledStyle } from './controlled-styles'\n\ntype Props = {\n  namespace: string\n  serializableData: Omit<ControlledStyleData, 'onBoxModelChange'>\n}\n\n/**\n * After crossing the RSC/client boundary, uses the subset of style data\n * which was able to cross that boundary to conditionally:\n *  - update the styles registry\n *  - render a `ControlledStyle`\n *\n * When in read-only mode, this is the only source which attempts to\n * render `ControlledStyle` for RSC props that uses style controls.\n *\n * When in read/write mode (in the builder), the editable server elements pathway\n * separately renders `ControlledStyle` for RSC props using prop data that\n * is resolved beyond the RSC/client boundary and therefore able to retain\n * unserializable properties that aren't available to `RSCEmittedStyle`.\n *\n * Attempting to write to the styles registry here when in read/write mode would\n * lead to a last-write-wins scenario involving RSC-emitted `serializableData` and\n * style data written by the editable server element pathway. Given that\n * `serializableData` becomes stale when dynamic style edits are made (since they\n * do not trigger re-rendering the RSC), this would visually break the editing\n * experience in cases where `RSCEmittedStyle` re-renders and writes stale style\n * data after the editable server element pathway.\n */\nexport function RSCEmittedStyle({ namespace, serializableData }: Props) {\n  const { stylesRegistry } = useStylesContext()\n  const isReadOnly = useIsReadOnly()\n\n  // Defer to the pathway for handling editable server elements, see note above\n  if (!isReadOnly) {\n    return null\n  }\n\n  stylesRegistry.setControlledStyle({\n    namespace,\n    className: serializableData.className,\n    data: serializableData,\n  })\n\n  return <ControlledStyle className={serializableData.className} styleData={serializableData} />\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiDS;AA/CT,8BAA8B;AAC9B,gCAAiC;AAEjC,+BAAgC;AA6BzB,SAAS,gBAAgB,EAAE,WAAW,iBAAiB,GAAU;AACtE,QAAM,EAAE,eAAe,QAAI,4CAAiB;AAC5C,QAAM,iBAAa,uCAAc;AAGjC,MAAI,CAAC,YAAY;AACf,WAAO;AAAA,EACT;AAEA,iBAAe,mBAAmB;AAAA,IAChC;AAAA,IACA,WAAW,iBAAiB;AAAA,IAC5B,MAAM;AAAA,EACR,CAAC;AAED,SAAO,4CAAC,4CAAgB,WAAW,iBAAiB,WAAW,WAAW,kBAAkB;AAC9F;","names":[]}