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

package/dist/esm/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/esm/runtimes/react/controls/use-slate-reset.js

@@ -1,4 +1,4 @@
-import { useStyle } from "../use-style";
+import { useStyle } from "../css-runtime/hooks/use-style";
 function useSlateReset() {
   return useStyle({
     // @ts-expect-error: csstype's `all` doesn't accept `!important` annotations

package/dist/esm/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,SAAS,gBAAgB;AAmClB,SAAS,gBAAwB;AACtC,SAAO,SAAS;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,SAAS,gBAAgB;AAmClB,SAAS,gBAAgB;AAC9B,SAAO,SAAS;AAAA;AAAA,IAEd,oDAAoD;AAAA,MAClD,KAAK;AAAA,IACP;AAAA,EACF,CAAC;AACH;","names":[]}

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

@@ -0,0 +1,31 @@
+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();
+  }
+}
+export {
+  BrowserDynamicStylesBridge
+};
+//# sourceMappingURL=browser-dynamic-styles-bridge.js.map

package/dist/esm/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":"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/esm/runtimes/react/css-runtime/components/controlled-styles.js

@@ -0,0 +1,51 @@
+"use client";
+import { Fragment, jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { pollBoxModel } from "../../poll-box-model";
+import { MakeswiftStyle } from "./makeswift-style";
+import { getControlledStylePrecedence } from "../utils";
+import { useIsInBuilder } from "../../hooks/use-is-in-builder";
+function ControlledStyles({ classNameToStyles }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: Array.from(classNameToStyles.entries()).map(([className, styleData]) => {
+    return /* @__PURE__ */ jsx(ControlledStyle, { className, styleData }, className);
+  }) });
+}
+function ControlledStyle({
+  className,
+  styleData
+}) {
+  const isInBuilder = useIsInBuilder();
+  useEffect(() => {
+    if (isInBuilder) {
+      const onBoxModelChange = styleData.onBoxModelChange;
+      if (onBoxModelChange == null)
+        return;
+      const findElement = () => document.querySelector(`.${className}`);
+      let element = findElement();
+      return pollBoxModel({
+        getElement: () => {
+          if (element == null || !element.isConnected) {
+            element = findElement();
+          }
+          return element;
+        },
+        onBoxModelChange
+      });
+    }
+    return () => {
+    };
+  }, [className, isInBuilder]);
+  return /* @__PURE__ */ jsx(
+    MakeswiftStyle,
+    {
+      href: className,
+      css: styleData.css,
+      precedence: getControlledStylePrecedence(styleData)
+    }
+  );
+}
+export {
+  ControlledStyle,
+  ControlledStyles
+};
+//# sourceMappingURL=controlled-styles.js.map

package/dist/esm/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":";AAmBI,mBAEW,WAFX;AAjBJ,SAAoB,iBAAiB;AACrC,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAE/B,SAAS,oCAAoC;AAC7C,SAAS,sBAAsB;AAUxB,SAAS,iBAAiB,EAAE,kBAAkB,GAAqB;AACxE,SACE,gCACG,gBAAM,KAAK,kBAAkB,QAAQ,CAAC,EAAE,IAAI,CAAC,CAAC,WAAW,SAAS,MAAM;AACvE,WAAO,oBAAC,mBAAgB,WAAsB,aAA2B,SAAW;AAAA,EACtF,CAAC,GACH;AAEJ;AAEO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AACF,GAGc;AACZ,QAAM,cAAc,eAAe;AAMnC,YAAU,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,aAAO,aAAa;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,YAAY,6BAA6B,SAAS;AAAA;AAAA,EACpD;AAEJ;","names":[]}

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

@@ -0,0 +1,18 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { DEFAULT_CSS_PRECEDENCE } from "../constants";
+import { useStylesContext } from "../hooks/use-styles-context";
+function MakeswiftStyle({
+  href,
+  css,
+  precedence
+}) {
+  const { shouldRenderStyleElements } = useStylesContext();
+  if (!shouldRenderStyleElements)
+    return null;
+  return /* @__PURE__ */ jsx("style", { href, precedence: precedence ?? DEFAULT_CSS_PRECEDENCE, children: css });
+}
+export {
+  MakeswiftStyle
+};
+//# sourceMappingURL=makeswift-style.js.map

package/dist/esm/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":";AAiBI;AAfJ,SAAS,8BAA8B;AACvC,SAAS,wBAAwB;AAE1B,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,EAAE,0BAA0B,IAAI,iBAAiB;AACvD,MAAI,CAAC;AAA2B,WAAO;AACvC,SACE,oBAAC,WAAM,MAAY,YAAY,cAAc,wBAC1C,eACH;AAEJ;","names":[]}

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

@@ -0,0 +1,22 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useIsReadOnly } from "../../hooks/use-is-read-only";
+import { useStylesContext } from "../hooks/use-styles-context";
+import { ControlledStyle } from "./controlled-styles";
+function RSCEmittedStyle({ namespace, serializableData }) {
+  const { stylesRegistry } = useStylesContext();
+  const isReadOnly = useIsReadOnly();
+  if (!isReadOnly) {
+    return null;
+  }
+  stylesRegistry.setControlledStyle({
+    namespace,
+    className: serializableData.className,
+    data: serializableData
+  });
+  return /* @__PURE__ */ jsx(ControlledStyle, { className: serializableData.className, styleData: serializableData });
+}
+export {
+  RSCEmittedStyle
+};
+//# sourceMappingURL=rsc-emitted-style.js.map

package/dist/esm/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":";AAiDS;AA/CT,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AAEjC,SAAS,uBAAuB;AA6BzB,SAAS,gBAAgB,EAAE,WAAW,iBAAiB,GAAU;AACtE,QAAM,EAAE,eAAe,IAAI,iBAAiB;AAC5C,QAAM,aAAa,cAAc;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,oBAAC,mBAAgB,WAAW,iBAAiB,WAAW,WAAW,kBAAkB;AAC9F;","names":[]}

package/dist/esm/runtimes/react/css-runtime/components/styles-context-provider.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext } from "react";
+const StylesContext = createContext(void 0);
+function StylesContextProvider({
+  children,
+  classNamePrefix,
+  enableCssReset,
+  stylesRegistry,
+  shouldRenderStyleElements
+}) {
+  return /* @__PURE__ */ jsx(
+    StylesContext.Provider,
+    {
+      value: {
+        classNamePrefix,
+        enableCssReset,
+        stylesRegistry,
+        shouldRenderStyleElements
+      },
+      children
+    }
+  );
+}
+export {
+  StylesContext,
+  StylesContextProvider
+};
+//# sourceMappingURL=styles-context-provider.js.map

package/dist/esm/runtimes/react/css-runtime/components/styles-context-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/runtimes/react/css-runtime/components/styles-context-provider.tsx"],"sourcesContent":["'use client'\n\nimport { createContext, PropsWithChildren } from 'react'\nimport { StylesRegistry } from '../styles-registry'\n\nexport type StylesContextValue = {\n  classNamePrefix: string\n  enableCssReset: boolean\n  stylesRegistry: StylesRegistry\n\n  /**\n   * By default, Makeswift-generated `<style>` elements are placed in JSX alongside the components that use them\n   * (note that in practice, React may hoist `<style>`s into the document `<head>` such that they don't appear in the\n   * `<body>` at all).\n   *\n   * This setting allows you to disable the automatic rendering of Makeswift-generated `<style>` elements. The expectation\n   * is that, when `shouldRenderStyleElements` is `false`, you will access generated styles from the Makeswift styles registry\n   * and handle applying them manually.\n   */\n  shouldRenderStyleElements: boolean\n}\n\nexport const StylesContext = createContext<StylesContextValue | undefined>(undefined)\n\nexport function StylesContextProvider({\n  children,\n  classNamePrefix,\n  enableCssReset,\n  stylesRegistry,\n  shouldRenderStyleElements,\n}: PropsWithChildren<StylesContextValue>) {\n  return (\n    <StylesContext.Provider\n      value={{\n        classNamePrefix,\n        enableCssReset,\n        stylesRegistry,\n        shouldRenderStyleElements,\n      }}\n    >\n      {children}\n    </StylesContext.Provider>\n  )\n}\n"],"mappings":";AAgCI;AA9BJ,SAAS,qBAAwC;AAoB1C,MAAM,gBAAgB,cAA8C,MAAS;AAE7E,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA0C;AACxC,SACE;AAAA,IAAC,cAAc;AAAA,IAAd;AAAA,MACC,OAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/esm/runtimes/react/css-runtime/constants.js

@@ -0,0 +1,12 @@
+import { MakeswiftStylePrecedence } from "./types";
+const DEFAULT_CSS_CLASS_NAME_PREFIX = "ms";
+const DEFAULT_CSS_RESET_ENABLED = true;
+const DEFAULT_CSS_PRECEDENCE = MakeswiftStylePrecedence.MEDIUM;
+const DEFAULT_SHOULD_RENDER_STYLE_ELEMENTS = true;
+export {
+  DEFAULT_CSS_CLASS_NAME_PREFIX,
+  DEFAULT_CSS_PRECEDENCE,
+  DEFAULT_CSS_RESET_ENABLED,
+  DEFAULT_SHOULD_RENDER_STYLE_ELEMENTS
+};
+//# sourceMappingURL=constants.js.map

package/dist/esm/runtimes/react/css-runtime/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/css-runtime/constants.ts"],"sourcesContent":["import { MakeswiftStylePrecedence } from './types'\n\nexport const DEFAULT_CSS_CLASS_NAME_PREFIX = 'ms'\nexport const DEFAULT_CSS_RESET_ENABLED = true\nexport const DEFAULT_CSS_PRECEDENCE = MakeswiftStylePrecedence.MEDIUM\nexport const DEFAULT_SHOULD_RENDER_STYLE_ELEMENTS = true\n"],"mappings":"AAAA,SAAS,gCAAgC;AAElC,MAAM,gCAAgC;AACtC,MAAM,4BAA4B;AAClC,MAAM,yBAAyB,yBAAyB;AACxD,MAAM,uCAAuC;","names":[]}

package/dist/esm/runtimes/react/css-runtime/hooks/use-base-styles.js

@@ -0,0 +1,33 @@
+import { useStylesContext } from "./use-styles-context";
+import { processCss, toRawCss } from "../serialize-css";
+import { MakeswiftStylePrecedence } from "../types";
+import React from "react";
+import { MakeswiftStyle } from "../components/makeswift-style";
+function useBaseStyles({ styles }) {
+  const { stylesRegistry } = useStylesContext();
+  const { content: rawContent, contentHash } = toRawCss([styles]);
+  let styleData = stylesRegistry.getBaseStyles().get(contentHash);
+  if (styleData == null) {
+    const css = processCss({ content: rawContent });
+    styleData = {
+      css,
+      cssObject: styles,
+      contentHash
+    };
+    stylesRegistry.setBaseStyles(styleData);
+  }
+  const href = `makeswift-base-styles-${contentHash}`;
+  const styleElement = React.createElement(MakeswiftStyle, {
+    key: contentHash,
+    href,
+    css: styleData.css,
+    precedence: MakeswiftStylePrecedence.HIGH
+  });
+  return {
+    styleElement
+  };
+}
+export {
+  useBaseStyles
+};
+//# sourceMappingURL=use-base-styles.js.map

package/dist/esm/runtimes/react/css-runtime/hooks/use-base-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/runtimes/react/css-runtime/hooks/use-base-styles.ts"],"sourcesContent":["import { type CSSObject } from '@emotion/serialize'\nimport { useStylesContext } from './use-styles-context'\nimport { processCss, toRawCss } from '../serialize-css'\nimport { MakeswiftStylePrecedence } from '../types'\nimport React from 'react'\nimport { MakeswiftStyle } from '../components/makeswift-style'\n\nexport function useBaseStyles({ styles }: { styles: CSSObject }) {\n  const { stylesRegistry } = useStylesContext()\n  const { content: rawContent, contentHash } = toRawCss([styles])\n  let styleData = stylesRegistry.getBaseStyles().get(contentHash)\n  if (styleData == null) {\n    const css = processCss({ content: rawContent })\n    styleData = {\n      css,\n      cssObject: styles,\n      contentHash,\n    }\n    stylesRegistry.setBaseStyles(styleData)\n  }\n  const href = `makeswift-base-styles-${contentHash}`\n  const styleElement = React.createElement(MakeswiftStyle, {\n    key: contentHash,\n    href: href,\n    css: styleData.css,\n    precedence: MakeswiftStylePrecedence.HIGH,\n  })\n  return {\n    styleElement,\n  }\n}\n"],"mappings":"AACA,SAAS,wBAAwB;AACjC,SAAS,YAAY,gBAAgB;AACrC,SAAS,gCAAgC;AACzC,OAAO,WAAW;AAClB,SAAS,sBAAsB;AAExB,SAAS,cAAc,EAAE,OAAO,GAA0B;AAC/D,QAAM,EAAE,eAAe,IAAI,iBAAiB;AAC5C,QAAM,EAAE,SAAS,YAAY,YAAY,IAAI,SAAS,CAAC,MAAM,CAAC;AAC9D,MAAI,YAAY,eAAe,cAAc,EAAE,IAAI,WAAW;AAC9D,MAAI,aAAa,MAAM;AACrB,UAAM,MAAM,WAAW,EAAE,SAAS,WAAW,CAAC;AAC9C,gBAAY;AAAA,MACV;AAAA,MACA,WAAW;AAAA,MACX;AAAA,IACF;AACA,mBAAe,cAAc,SAAS;AAAA,EACxC;AACA,QAAM,OAAO,yBAAyB,WAAW;AACjD,QAAM,eAAe,MAAM,cAAc,gBAAgB;AAAA,IACvD,KAAK;AAAA,IACL;AAAA,IACA,KAAK,UAAU;AAAA,IACf,YAAY,yBAAyB;AAAA,EACvC,CAAC;AACD,SAAO;AAAA,IACL;AAAA,EACF;AACF;","names":[]}

package/dist/esm/runtimes/react/css-runtime/hooks/use-controlled-styles.js

@@ -0,0 +1,45 @@
+import React, { useCallback } from "react";
+import { ControlledStyles } from "../components/controlled-styles";
+import { useStylesContext } from "./use-styles-context";
+import { StylesheetEngine } from "../stylesheet-engine";
+import { useDocumentKey } from "../../hooks/use-document-context";
+function useControlledStyles({ namespace }) {
+  const { classNamePrefix, stylesRegistry } = useStylesContext();
+  const documentKey = useDocumentKey();
+  if (documentKey == null) {
+    throw new Error("Root document key not found when attempting to use controlled styles");
+  }
+  const getStylesheet = useCallback(
+    ({ breakpointsData, elementKey, propPathComponents }) => {
+      const onDefineStyle = (definedStyle) => {
+        stylesRegistry.setControlledStyle({
+          namespace,
+          className: definedStyle.className,
+          data: {
+            ...definedStyle
+          }
+        });
+      };
+      return new StylesheetEngine({
+        breakpointsData,
+        documentKey,
+        elementKey,
+        propPathComponents,
+        onDefineStyle,
+        classNamePrefix
+      });
+    },
+    [classNamePrefix, stylesRegistry, namespace, documentKey]
+  );
+  const styleElements = React.createElement(ControlledStyles, {
+    classNameToStyles: stylesRegistry.getControlledStyles(namespace)
+  });
+  return {
+    getStylesheet,
+    styleElements
+  };
+}
+export {
+  useControlledStyles
+};
+//# sourceMappingURL=use-controlled-styles.js.map

package/dist/esm/runtimes/react/css-runtime/hooks/use-controlled-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/runtimes/react/css-runtime/hooks/use-controlled-styles.ts"],"sourcesContent":["import React, { useCallback } from 'react'\nimport { ControlledStyles } from '../components/controlled-styles'\nimport { ControlledStyleData, GetStylesheet } from '../types'\nimport { useStylesContext } from './use-styles-context'\nimport { StylesheetEngine } from '../stylesheet-engine'\nimport { useDocumentKey } from '../../hooks/use-document-context'\n\nexport function useControlledStyles({ namespace }: { namespace: string }) {\n  const { classNamePrefix, stylesRegistry } = useStylesContext()\n  const documentKey = useDocumentKey()\n  if (documentKey == null) {\n    throw new Error('Root document key not found when attempting to use controlled styles')\n  }\n\n  const getStylesheet = useCallback<GetStylesheet>(\n    ({ breakpointsData, elementKey, propPathComponents }) => {\n      const onDefineStyle = (definedStyle: ControlledStyleData) => {\n        stylesRegistry.setControlledStyle({\n          namespace,\n          className: definedStyle.className,\n          data: {\n            ...definedStyle,\n          },\n        })\n      }\n      return new StylesheetEngine({\n        breakpointsData,\n        documentKey,\n        elementKey,\n        propPathComponents,\n        onDefineStyle,\n        classNamePrefix,\n      })\n    },\n    [classNamePrefix, stylesRegistry, namespace, documentKey],\n  )\n\n  const styleElements = React.createElement(ControlledStyles, {\n    classNameToStyles: stylesRegistry.getControlledStyles(namespace),\n  })\n\n  return {\n    getStylesheet,\n    styleElements,\n  }\n}\n"],"mappings":"AAAA,OAAO,SAAS,mBAAmB;AACnC,SAAS,wBAAwB;AAEjC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAExB,SAAS,oBAAoB,EAAE,UAAU,GAA0B;AACxE,QAAM,EAAE,iBAAiB,eAAe,IAAI,iBAAiB;AAC7D,QAAM,cAAc,eAAe;AACnC,MAAI,eAAe,MAAM;AACvB,UAAM,IAAI,MAAM,sEAAsE;AAAA,EACxF;AAEA,QAAM,gBAAgB;AAAA,IACpB,CAAC,EAAE,iBAAiB,YAAY,mBAAmB,MAAM;AACvD,YAAM,gBAAgB,CAAC,iBAAsC;AAC3D,uBAAe,mBAAmB;AAAA,UAChC;AAAA,UACA,WAAW,aAAa;AAAA,UACxB,MAAM;AAAA,YACJ,GAAG;AAAA,UACL;AAAA,QACF,CAAC;AAAA,MACH;AACA,aAAO,IAAI,iBAAiB;AAAA,QAC1B;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA,CAAC,iBAAiB,gBAAgB,WAAW,WAAW;AAAA,EAC1D;AAEA,QAAM,gBAAgB,MAAM,cAAc,kBAAkB;AAAA,IAC1D,mBAAmB,eAAe,oBAAoB,SAAS;AAAA,EACjE,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;","names":[]}

package/dist/esm/runtimes/react/css-runtime/hooks/use-css-reset.js

@@ -0,0 +1,36 @@
+import { useStylesContext } from "./use-styles-context";
+import { processCss, toRawCss } from "../serialize-css";
+import { MakeswiftStylePrecedence } from "../types";
+import { MakeswiftStyle } from "../components/makeswift-style";
+import React from "react";
+function useCssReset({ styles }) {
+  const { enableCssReset, stylesRegistry } = useStylesContext();
+  if (!enableCssReset)
+    return { styleElement: null };
+  const { content: rawContent, contentHash } = toRawCss(styles);
+  let styleData = stylesRegistry.getCssResets().get(contentHash);
+  if (styleData == null) {
+    const css2 = processCss({ content: rawContent });
+    styleData = {
+      css: css2,
+      cssObjects: styles,
+      contentHash
+    };
+    stylesRegistry.setCssReset(styleData);
+  }
+  const css = processCss({ content: rawContent });
+  const href = `makeswift-css-reset-${contentHash}`;
+  const styleElement = React.createElement(MakeswiftStyle, {
+    key: contentHash,
+    href,
+    css,
+    precedence: MakeswiftStylePrecedence.RESET
+  });
+  return {
+    styleElement
+  };
+}
+export {
+  useCssReset
+};
+//# sourceMappingURL=use-css-reset.js.map

package/dist/esm/runtimes/react/css-runtime/hooks/use-css-reset.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/runtimes/react/css-runtime/hooks/use-css-reset.ts"],"sourcesContent":["import { type CSSObject } from '@emotion/serialize'\nimport { useStylesContext } from './use-styles-context'\nimport { processCss, toRawCss } from '../serialize-css'\nimport { MakeswiftStylePrecedence } from '../types'\nimport { MakeswiftStyle } from '../components/makeswift-style'\nimport React from 'react'\n\nexport function useCssReset({ styles }: { styles: Array<CSSObject> }) {\n  const { enableCssReset, stylesRegistry } = useStylesContext()\n  if (!enableCssReset) return { styleElement: null }\n  const { content: rawContent, contentHash } = toRawCss(styles)\n  let styleData = stylesRegistry.getCssResets().get(contentHash)\n  if (styleData == null) {\n    const css = processCss({ content: rawContent })\n    styleData = {\n      css,\n      cssObjects: styles,\n      contentHash,\n    }\n    stylesRegistry.setCssReset(styleData)\n  }\n  const css = processCss({ content: rawContent })\n  const href = `makeswift-css-reset-${contentHash}`\n\n  const styleElement = React.createElement(MakeswiftStyle, {\n    key: contentHash,\n    href: href,\n    css,\n    precedence: MakeswiftStylePrecedence.RESET,\n  })\n  return {\n    styleElement,\n  }\n}\n"],"mappings":"AACA,SAAS,wBAAwB;AACjC,SAAS,YAAY,gBAAgB;AACrC,SAAS,gCAAgC;AACzC,SAAS,sBAAsB;AAC/B,OAAO,WAAW;AAEX,SAAS,YAAY,EAAE,OAAO,GAAiC;AACpE,QAAM,EAAE,gBAAgB,eAAe,IAAI,iBAAiB;AAC5D,MAAI,CAAC;AAAgB,WAAO,EAAE,cAAc,KAAK;AACjD,QAAM,EAAE,SAAS,YAAY,YAAY,IAAI,SAAS,MAAM;AAC5D,MAAI,YAAY,eAAe,aAAa,EAAE,IAAI,WAAW;AAC7D,MAAI,aAAa,MAAM;AACrB,UAAMA,OAAM,WAAW,EAAE,SAAS,WAAW,CAAC;AAC9C,gBAAY;AAAA,MACV,KAAAA;AAAA,MACA,YAAY;AAAA,MACZ;AAAA,IACF;AACA,mBAAe,YAAY,SAAS;AAAA,EACtC;AACA,QAAM,MAAM,WAAW,EAAE,SAAS,WAAW,CAAC;AAC9C,QAAM,OAAO,uBAAuB,WAAW;AAE/C,QAAM,eAAe,MAAM,cAAc,gBAAgB;AAAA,IACvD,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA,YAAY,yBAAyB;AAAA,EACvC,CAAC;AACD,SAAO;AAAA,IACL;AAAA,EACF;AACF;","names":["css"]}

package/dist/esm/runtimes/react/css-runtime/hooks/use-dynamic-browser-style-updates.js

@@ -0,0 +1,17 @@
+import { useEffect } from "react";
+import { BrowserDynamicStylesBridge } from "../browser-dynamic-styles-bridge";
+import { StyleElementUpdater } from "../style-element-updater";
+function useDynamicBrowserStyleUpdates(registry) {
+  useEffect(() => {
+    const applier = new StyleElementUpdater();
+    const bridge = new BrowserDynamicStylesBridge(registry, applier);
+    return () => {
+      bridge.dispose();
+      applier.dispose?.();
+    };
+  }, [registry]);
+}
+export {
+  useDynamicBrowserStyleUpdates
+};
+//# sourceMappingURL=use-dynamic-browser-style-updates.js.map

package/dist/esm/runtimes/react/css-runtime/hooks/use-dynamic-browser-style-updates.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/runtimes/react/css-runtime/hooks/use-dynamic-browser-style-updates.ts"],"sourcesContent":["import { useEffect } from 'react'\nimport { StylesRegistry } from '../styles-registry'\nimport { BrowserDynamicStylesBridge } from '../browser-dynamic-styles-bridge'\nimport { StyleElementUpdater } from '../style-element-updater'\nimport { type BrowserStyleApplier } from '../types'\n\nexport function useDynamicBrowserStyleUpdates(registry: StylesRegistry) {\n  useEffect(() => {\n    const applier: BrowserStyleApplier = new StyleElementUpdater()\n    const bridge = new BrowserDynamicStylesBridge(registry, applier)\n\n    return () => {\n      bridge.dispose()\n      applier.dispose?.()\n    }\n  }, [registry])\n}\n"],"mappings":"AAAA,SAAS,iBAAiB;AAE1B,SAAS,kCAAkC;AAC3C,SAAS,2BAA2B;AAG7B,SAAS,8BAA8B,UAA0B;AACtE,YAAU,MAAM;AACd,UAAM,UAA+B,IAAI,oBAAoB;AAC7D,UAAM,SAAS,IAAI,2BAA2B,UAAU,OAAO;AAE/D,WAAO,MAAM;AACX,aAAO,QAAQ;AACf,cAAQ,UAAU;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AACf;","names":[]}

package/dist/esm/runtimes/react/css-runtime/hooks/use-keyframes.js

@@ -0,0 +1,30 @@
+import { generateClassName } from "../utils";
+import React from "react";
+import { MakeswiftStyle } from "../components/makeswift-style";
+import { useStylesContext } from "./use-styles-context";
+function useKeyframes(cssBody) {
+  const { classNamePrefix, stylesRegistry } = useStylesContext();
+  const keyframesNamePrefix = `${classNamePrefix}-animation`;
+  const keyframesName = generateClassName({
+    data: cssBody,
+    classNamePrefix: keyframesNamePrefix
+  });
+  const cssString = `@keyframes ${keyframesName} { ${cssBody} }`;
+  const styleData = {
+    keyframesName,
+    css: cssString
+  };
+  stylesRegistry.setKeyframes(styleData);
+  const styleElement = React.createElement(MakeswiftStyle, {
+    href: keyframesName,
+    css: cssString
+  });
+  return {
+    keyframesName,
+    styleElement
+  };
+}
+export {
+  useKeyframes
+};
+//# sourceMappingURL=use-keyframes.js.map

package/dist/esm/runtimes/react/css-runtime/hooks/use-keyframes.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/runtimes/react/css-runtime/hooks/use-keyframes.ts"],"sourcesContent":["import { generateClassName } from '../utils'\nimport React from 'react'\nimport { MakeswiftStyle } from '../components/makeswift-style'\nimport { useStylesContext } from './use-styles-context'\nimport { KeyframesData } from '../types'\n\nexport function useKeyframes(cssBody: string): {\n  keyframesName: string\n  styleElement: React.ReactElement\n} {\n  const { classNamePrefix, stylesRegistry } = useStylesContext()\n  const keyframesNamePrefix = `${classNamePrefix}-animation`\n  const keyframesName = generateClassName({\n    data: cssBody,\n    classNamePrefix: keyframesNamePrefix,\n  })\n  const cssString = `@keyframes ${keyframesName} { ${cssBody} }`\n  const styleData: KeyframesData = {\n    keyframesName,\n    css: cssString,\n  }\n  stylesRegistry.setKeyframes(styleData)\n\n  const styleElement = React.createElement(MakeswiftStyle, {\n    href: keyframesName,\n    css: cssString,\n  })\n\n  return {\n    keyframesName,\n    styleElement,\n  }\n}\n"],"mappings":"AAAA,SAAS,yBAAyB;AAClC,OAAO,WAAW;AAClB,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AAG1B,SAAS,aAAa,SAG3B;AACA,QAAM,EAAE,iBAAiB,eAAe,IAAI,iBAAiB;AAC7D,QAAM,sBAAsB,GAAG,eAAe;AAC9C,QAAM,gBAAgB,kBAAkB;AAAA,IACtC,MAAM;AAAA,IACN,iBAAiB;AAAA,EACnB,CAAC;AACD,QAAM,YAAY,cAAc,aAAa,MAAM,OAAO;AAC1D,QAAM,YAA2B;AAAA,IAC/B;AAAA,IACA,KAAK;AAAA,EACP;AACA,iBAAe,aAAa,SAAS;AAErC,QAAM,eAAe,MAAM,cAAc,gBAAgB;AAAA,IACvD,MAAM;AAAA,IACN,KAAK;AAAA,EACP,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;","names":[]}

package/dist/esm/runtimes/react/css-runtime/hooks/use-legacy-controlled-style.js

@@ -0,0 +1,44 @@
+import { generateClassName } from "../utils";
+import React from "react";
+import { useStylesContext } from "./use-styles-context";
+import { ControlledStyles } from "../components/controlled-styles";
+import { toCssStatements } from "../serialize-css";
+import { useDocumentKey } from "../../hooks/use-document-context";
+function useLegacyControlledStyle(style, elementKey, propName) {
+  const { classNamePrefix, stylesRegistry } = useStylesContext();
+  const documentKey = useDocumentKey();
+  if (documentKey == null) {
+    throw new Error("Root document key not found when attempting to use legacy controlled styles");
+  }
+  const namespace = `${elementKey}-legacy-${propName}`;
+  const className = generateClassName({
+    data: `${documentKey}-${elementKey}-${propName}`,
+    classNamePrefix
+  });
+  const { css, contentHash } = toCssStatements(style, className);
+  const data = {
+    className,
+    css,
+    cssObject: style,
+    contentHash,
+    elementKey,
+    joinedPropPath: propName,
+    onBoxModelChange: void 0
+  };
+  stylesRegistry.setControlledStyle({
+    namespace,
+    className,
+    data
+  });
+  const styleElement = React.createElement(ControlledStyles, {
+    classNameToStyles: /* @__PURE__ */ new Map([[className, data]])
+  });
+  return {
+    className,
+    styleElement
+  };
+}
+export {
+  useLegacyControlledStyle
+};
+//# sourceMappingURL=use-legacy-controlled-style.js.map

package/dist/esm/runtimes/react/css-runtime/hooks/use-legacy-controlled-style.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/runtimes/react/css-runtime/hooks/use-legacy-controlled-style.ts"],"sourcesContent":["import { CSSObject } from '@emotion/serialize'\nimport { generateClassName } from '../utils'\nimport React from 'react'\nimport { useStylesContext } from './use-styles-context'\nimport { ControlledStyles } from '../components/controlled-styles'\nimport { toCssStatements } from '../serialize-css'\nimport { ControlledStyleData } from '../types'\nimport { useDocumentKey } from '../../hooks/use-document-context'\n\nexport function useLegacyControlledStyle(style: CSSObject, elementKey: string, propName: string) {\n  const { classNamePrefix, stylesRegistry } = useStylesContext()\n  const documentKey = useDocumentKey()\n  if (documentKey == null) {\n    throw new Error('Root document key not found when attempting to use legacy controlled styles')\n  }\n\n  /*\n    Namespaced separately from styles for modern control instances in order to avoid\n    unintentionally attempting to render the corresponding style elements twice.\n  */\n  const namespace = `${elementKey}-legacy-${propName}`\n  const className = generateClassName({\n    data: `${documentKey}-${elementKey}-${propName}`,\n    classNamePrefix,\n  })\n\n  const { css, contentHash } = toCssStatements(style, className)\n\n  const data: ControlledStyleData = {\n    className,\n    css,\n    cssObject: style,\n    contentHash,\n    elementKey,\n    joinedPropPath: propName,\n    onBoxModelChange: undefined,\n  }\n\n  stylesRegistry.setControlledStyle({\n    namespace,\n    className,\n    data,\n  })\n\n  const styleElement = React.createElement(ControlledStyles, {\n    classNameToStyles: new Map([[className, data]]),\n  })\n\n  return {\n    className,\n    styleElement,\n  }\n}\n"],"mappings":"AACA,SAAS,yBAAyB;AAClC,OAAO,WAAW;AAClB,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAEhC,SAAS,sBAAsB;AAExB,SAAS,yBAAyB,OAAkB,YAAoB,UAAkB;AAC/F,QAAM,EAAE,iBAAiB,eAAe,IAAI,iBAAiB;AAC7D,QAAM,cAAc,eAAe;AACnC,MAAI,eAAe,MAAM;AACvB,UAAM,IAAI,MAAM,6EAA6E;AAAA,EAC/F;AAMA,QAAM,YAAY,GAAG,UAAU,WAAW,QAAQ;AAClD,QAAM,YAAY,kBAAkB;AAAA,IAClC,MAAM,GAAG,WAAW,IAAI,UAAU,IAAI,QAAQ;AAAA,IAC9C;AAAA,EACF,CAAC;AAED,QAAM,EAAE,KAAK,YAAY,IAAI,gBAAgB,OAAO,SAAS;AAE7D,QAAM,OAA4B;AAAA,IAChC;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,kBAAkB;AAAA,EACpB;AAEA,iBAAe,mBAAmB;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,eAAe,MAAM,cAAc,kBAAkB;AAAA,IACzD,mBAAmB,oBAAI,IAAI,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC;AAAA,EAChD,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;","names":[]}

package/dist/esm/runtimes/react/css-runtime/hooks/use-style.js

@@ -0,0 +1,56 @@
+import { generateClassName } from "../utils";
+import React from "react";
+import clsx from "clsx";
+import { useStylesContext } from "./use-styles-context";
+import { toCssStatements } from "../serialize-css";
+import { MakeswiftStyle } from "../components/makeswift-style";
+function useStyle(style) {
+  const { classNamePrefix, stylesRegistry } = useStylesContext();
+  const className = generateClassName({
+    data: JSON.stringify(style),
+    classNamePrefix
+  });
+  let styleData = stylesRegistry.getUncontrolledClassStyles().get(className);
+  if (styleData == null) {
+    const { css } = toCssStatements(style, className);
+    styleData = {
+      className,
+      css,
+      cssObject: style
+    };
+    stylesRegistry.setUncontrolledClassStyle(styleData);
+  }
+  const styleElement = React.createElement(MakeswiftStyle, {
+    key: className,
+    href: className,
+    css: styleData.css
+  });
+  return {
+    className,
+    styleElement
+  };
+}
+function composeStyles(...args) {
+  const classNames = [];
+  const styleElements = [];
+  args.forEach((arg) => {
+    if (arg == null)
+      return;
+    if (typeof arg === "string") {
+      classNames.push(arg);
+    } else {
+      classNames.push(arg.className);
+      styleElements.push(arg.styleElement);
+    }
+  });
+  const combinedClassName = clsx(classNames);
+  return {
+    className: combinedClassName,
+    styleElements
+  };
+}
+export {
+  composeStyles,
+  useStyle
+};
+//# sourceMappingURL=use-style.js.map

package/dist/esm/runtimes/react/css-runtime/hooks/use-style.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/runtimes/react/css-runtime/hooks/use-style.ts"],"sourcesContent":["import { generateClassName } from '../utils'\nimport { CSSObject } from '@emotion/serialize'\nimport React from 'react'\nimport clsx from 'clsx'\nimport { useStylesContext } from './use-styles-context'\nimport { toCssStatements } from '../serialize-css'\nimport { MakeswiftStyle } from '../components/makeswift-style'\n\n/**\n * Generates a css class name and corresponding style element based on the provided\n * styles object.\n *\n * This is intended to be used for \"uncontrolled\" (not editable in Makeswift) styles\n * such as those defined inline in builtin components.\n */\nexport function useStyle(style: CSSObject) {\n  const { classNamePrefix, stylesRegistry } = useStylesContext()\n  const className = generateClassName({\n    data: JSON.stringify(style),\n    classNamePrefix,\n  })\n  let styleData = stylesRegistry.getUncontrolledClassStyles().get(className)\n  if (styleData == null) {\n    const { css } = toCssStatements(style, className)\n    styleData = {\n      className,\n      css,\n      cssObject: style,\n    }\n    stylesRegistry.setUncontrolledClassStyle(styleData)\n  }\n  const styleElement = React.createElement(MakeswiftStyle, {\n    key: className,\n    href: className,\n    css: styleData.css,\n  })\n  return {\n    className,\n    styleElement,\n  }\n}\n\n/**\n * Supplements `useStyle` by providing call sites with a similarly-shaped successor to Emotion's `cx`\n * utility, which was used heavily by builtin components to \"compose\" class names through the following\n * pattern:\n *\n * ```tsx\n * const className = cx(\n *   useStyle({ color: 'red' }),\n *   'class-name-A',\n *   'class-name-B',\n *   useStyle({ fontSize: 16 }),\n * )\n * ```\n *\n * The new pattern using `composeStyles` looks like:\n *\n * ```tsx\n * const { className, styleElements } = composeStyles(\n *   useStyle({ color: 'red' }),\n *   'class-name-A',\n *   'class-name-B',\n *   useStyle({ fontSize: 16 }),\n * )\n * ```\n *\n * Followed by rendering `styleElements` alongside the element\n * where they're used:\n *\n * ```tsx\n * return (\n *  <>\n *   {styleElements}\n *   <div\n *     {...props}\n *     className={className}>\n *   />\n *  </>\n * )\n * ```\n */\nexport function composeStyles(...args: Array<string | ReturnType<typeof useStyle> | undefined>) {\n  const classNames: string[] = []\n  const styleElements: React.ReactElement[] = []\n  args.forEach(arg => {\n    if (arg == null) return\n    if (typeof arg === 'string') {\n      classNames.push(arg)\n    } else {\n      classNames.push(arg.className)\n      styleElements.push(arg.styleElement)\n    }\n  })\n  const combinedClassName = clsx(classNames)\n  return {\n    className: combinedClassName,\n    styleElements,\n  }\n}\n"],"mappings":"AAAA,SAAS,yBAAyB;AAElC,OAAO,WAAW;AAClB,OAAO,UAAU;AACjB,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AASxB,SAAS,SAAS,OAAkB;AACzC,QAAM,EAAE,iBAAiB,eAAe,IAAI,iBAAiB;AAC7D,QAAM,YAAY,kBAAkB;AAAA,IAClC,MAAM,KAAK,UAAU,KAAK;AAAA,IAC1B;AAAA,EACF,CAAC;AACD,MAAI,YAAY,eAAe,2BAA2B,EAAE,IAAI,SAAS;AACzE,MAAI,aAAa,MAAM;AACrB,UAAM,EAAE,IAAI,IAAI,gBAAgB,OAAO,SAAS;AAChD,gBAAY;AAAA,MACV;AAAA,MACA;AAAA,MACA,WAAW;AAAA,IACb;AACA,mBAAe,0BAA0B,SAAS;AAAA,EACpD;AACA,QAAM,eAAe,MAAM,cAAc,gBAAgB;AAAA,IACvD,KAAK;AAAA,IACL,MAAM;AAAA,IACN,KAAK,UAAU;AAAA,EACjB,CAAC;AACD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;AA0CO,SAAS,iBAAiB,MAA+D;AAC9F,QAAM,aAAuB,CAAC;AAC9B,QAAM,gBAAsC,CAAC;AAC7C,OAAK,QAAQ,SAAO;AAClB,QAAI,OAAO;AAAM;AACjB,QAAI,OAAO,QAAQ,UAAU;AAC3B,iBAAW,KAAK,GAAG;AAAA,IACrB,OAAO;AACL,iBAAW,KAAK,IAAI,SAAS;AAC7B,oBAAc,KAAK,IAAI,YAAY;AAAA,IACrC;AAAA,EACF,CAAC;AACD,QAAM,oBAAoB,KAAK,UAAU;AACzC,SAAO;AAAA,IACL,WAAW;AAAA,IACX;AAAA,EACF;AACF;","names":[]}

package/dist/esm/runtimes/react/css-runtime/hooks/use-styles-context.js

@@ -0,0 +1,15 @@
+import { useContext } from "react";
+import { StylesContext } from "../components/styles-context-provider";
+function useStylesContext() {
+  const context = useContext(StylesContext);
+  if (!context) {
+    throw new Error(
+      "Styles context not found. Did you attempt to render Makeswift content without a <RootStyleRegistry> ancestor?"
+    );
+  }
+  return context;
+}
+export {
+  useStylesContext
+};
+//# sourceMappingURL=use-styles-context.js.map

package/dist/esm/runtimes/react/css-runtime/hooks/use-styles-context.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/runtimes/react/css-runtime/hooks/use-styles-context.ts"],"sourcesContent":["import { useContext } from 'react'\nimport { StylesContext, StylesContextValue } from '../components/styles-context-provider'\n\nexport function useStylesContext(): StylesContextValue {\n  const context = useContext(StylesContext)\n  if (!context) {\n    throw new Error(\n      'Styles context not found. Did you attempt to render Makeswift content without a <RootStyleRegistry> ancestor?',\n    )\n  }\n  return context\n}\n"],"mappings":"AAAA,SAAS,kBAAkB;AAC3B,SAAS,qBAAyC;AAE3C,SAAS,mBAAuC;AACrD,QAAM,UAAU,WAAW,aAAa;AACxC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;","names":[]}