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

package/dist/esm/runtimes/react/legacy-controls.js

@@ -1,4 +1,4 @@
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import {
   useBoxShadow,
   useBorder as useBorderData,
@@ -18,7 +18,6 @@ import {
   useResponsiveWidth
 } from "../../components/utils/responsive-style";
 import { RenderHook } from "./components";
-import { useStyle } from "./use-style";
 import {
   Types as PropControllerTypes,
   getShadowsPropControllerDataResponsiveShadowsData,
@@ -55,31 +54,44 @@ import { useImagePropControllerData } from "../../components/hooks/useImagePropC
 import { useImagesPropControllerData } from "../../components/hooks/useImagesPropControllerData";
 import { useBackgroundsPropControllerData } from "../../components/hooks/useBackgroundsPropControllerData";
 import { useTextInputPropControllerData } from "../../components/hooks/useTextInputPropControllerData";
-function useWidthStyle(data, descriptor) {
+import { useLegacyControlledStyle } from "./css-runtime/hooks/use-legacy-controlled-style";
+function useWidthStyle(elementKey, propName, data, descriptor) {
   const value = getWidthPropControllerDataResponsiveLengthData(data);
-  return useStyle(useResponsiveWidth(value, descriptor.options.defaultValue));
+  return useLegacyControlledStyle(
+    useResponsiveWidth(value, descriptor.options.defaultValue),
+    elementKey,
+    propName
+  );
 }
-function usePaddingStyle(data) {
+function usePaddingStyle(elementKey, propName, data) {
   const value = getPaddingPropControllerDataResponsivePaddingData(data);
-  return useStyle(useResponsivePadding(value));
+  return useLegacyControlledStyle(useResponsivePadding(value), elementKey, propName);
 }
-function useMarginStyle(data) {
+function useMarginStyle(elementKey, propName, data) {
   const value = getMarginPropControllerDataResponsiveMarginData(data);
-  return useStyle(useResponsiveMargin(value));
+  return useLegacyControlledStyle(useResponsiveMargin(value), elementKey, propName);
 }
-function useBorderRadiusStyle(data) {
+function useBorderRadiusStyle(elementKey, propName, data) {
   const value = getBorderRadiusPropControllerDataResponsiveBorderRadiusData(data);
-  return useStyle(useResponsiveBorderRadius(value));
+  return useLegacyControlledStyle(useResponsiveBorderRadius(value), elementKey, propName);
 }
-function useShadowsStyle(data) {
-  return useStyle(useResponsiveShadow(useBoxShadow(data) ?? void 0));
+function useShadowsStyle(elementKey, propName, data) {
+  return useLegacyControlledStyle(
+    useResponsiveShadow(useBoxShadow(data) ?? void 0),
+    elementKey,
+    propName
+  );
 }
-function useBorderStyle(data) {
+function useBorderStyle(elementKey, propName, data) {
   const value = getBorderPropControllerDataResponsiveBorderData(data);
   const borderData = useBorderData(value);
-  return useStyle(useResponsiveBorder(borderData ?? void 0));
+  return useLegacyControlledStyle(
+    useResponsiveBorder(borderData ?? void 0),
+    elementKey,
+    propName
+  );
 }
-function resolveLegacyDescriptorProp(descriptor, propName, propData, props, renderFn) {
+function resolveLegacyDescriptorProp(descriptor, propName, elementKey, propData, props, renderFn) {
   switch (descriptor.type) {
     case PropControllerTypes.Width:
       switch (descriptor.options.format) {
@@ -88,8 +100,11 @@ function resolveLegacyDescriptorProp(descriptor, propName, propData, props, rend
             RenderHook,
             {
               hook: useWidthStyle,
-              parameters: [propData, descriptor],
-              children: (value) => renderFn({ ...props, [propName]: value })
+              parameters: [elementKey, propName, propData, descriptor],
+              children: ({ className, styleElement }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+                styleElement,
+                renderFn({ ...props, [propName]: className })
+              ] })
             },
             descriptor.type
           );
@@ -103,7 +118,18 @@ function resolveLegacyDescriptorProp(descriptor, propName, propData, props, rend
     case PropControllerTypes.Padding:
       switch (descriptor.options.format) {
         case PaddingPropControllerFormat.ClassName:
-          return /* @__PURE__ */ jsx(RenderHook, { hook: usePaddingStyle, parameters: [propData], children: (value) => renderFn({ ...props, [propName]: value }) }, descriptor.type);
+          return /* @__PURE__ */ jsx(
+            RenderHook,
+            {
+              hook: usePaddingStyle,
+              parameters: [elementKey, propName, propData],
+              children: ({ className, styleElement }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+                styleElement,
+                renderFn({ ...props, [propName]: className })
+              ] })
+            },
+            descriptor.type
+          );
         case PaddingPropControllerFormat.ResponsiveValue:
         default:
           return renderFn({
@@ -114,7 +140,18 @@ function resolveLegacyDescriptorProp(descriptor, propName, propData, props, rend
     case PropControllerTypes.Margin:
       switch (descriptor.options.format) {
         case MarginPropControllerFormat.ClassName:
-          return /* @__PURE__ */ jsx(RenderHook, { hook: useMarginStyle, parameters: [propData], children: (value) => renderFn({ ...props, [propName]: value }) }, descriptor.type);
+          return /* @__PURE__ */ jsx(
+            RenderHook,
+            {
+              hook: useMarginStyle,
+              parameters: [elementKey, propName, propData],
+              children: ({ className, styleElement }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+                styleElement,
+                renderFn({ ...props, [propName]: className })
+              ] })
+            },
+            descriptor.type
+          );
         case MarginPropControllerFormat.ResponsiveValue:
         default:
           return renderFn({
@@ -125,7 +162,18 @@ function resolveLegacyDescriptorProp(descriptor, propName, propData, props, rend
     case PropControllerTypes.BorderRadius:
       switch (descriptor.options.format) {
         case BorderRadiusPropControllerFormat.ClassName:
-          return /* @__PURE__ */ jsx(RenderHook, { hook: useBorderRadiusStyle, parameters: [propData], children: (value) => renderFn({ ...props, [propName]: value }) }, descriptor.type);
+          return /* @__PURE__ */ jsx(
+            RenderHook,
+            {
+              hook: useBorderRadiusStyle,
+              parameters: [elementKey, propName, propData],
+              children: ({ className, styleElement }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+                styleElement,
+                renderFn({ ...props, [propName]: className })
+              ] })
+            },
+            descriptor.type
+          );
         case BorderRadiusPropControllerFormat.ResponsiveValue:
         default:
           return renderFn({
@@ -218,7 +266,18 @@ function resolveLegacyDescriptorProp(descriptor, propName, propData, props, rend
     case PropControllerTypes.Shadows:
       switch (descriptor.options.format) {
         case Shadows.Format.ClassName:
-          return /* @__PURE__ */ jsx(RenderHook, { hook: useShadowsStyle, parameters: [propData], children: (value) => renderFn({ ...props, [propName]: value }) }, descriptor.type);
+          return /* @__PURE__ */ jsx(
+            RenderHook,
+            {
+              hook: useShadowsStyle,
+              parameters: [elementKey, propName, propData],
+              children: ({ className, styleElement }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+                styleElement,
+                renderFn({ ...props, [propName]: className })
+              ] })
+            },
+            descriptor.type
+          );
         case Shadows.Format.ResponsiveValue:
         default:
           return renderFn({
@@ -229,7 +288,18 @@ function resolveLegacyDescriptorProp(descriptor, propName, propData, props, rend
     case PropControllerTypes.Border:
       switch (descriptor.options.format) {
         case BorderPropControllerFormat.ClassName:
-          return /* @__PURE__ */ jsx(RenderHook, { hook: useBorderStyle, parameters: [propData], children: (value) => renderFn({ ...props, [propName]: value }) }, descriptor.type);
+          return /* @__PURE__ */ jsx(
+            RenderHook,
+            {
+              hook: useBorderStyle,
+              parameters: [elementKey, propName, propData],
+              children: ({ className, styleElement }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+                styleElement,
+                renderFn({ ...props, [propName]: className })
+              ] })
+            },
+            descriptor.type
+          );
         case BorderPropControllerFormat.ResponsiveValue:
         default:
           return renderFn({

package/dist/esm/runtimes/react/legacy-controls.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/runtimes/react/legacy-controls.tsx"],"sourcesContent":["import { ReactNode } from 'react'\nimport {\n  useBoxShadow,\n  useBorder as useBorderData,\n  useLinkPropControllerData,\n  useCheckboxPropControllerData,\n  useDatePropControllerData,\n  useFontPropControllerData,\n  useVideoPropControllerData,\n  useTablePropControllerData,\n} from '../../components/hooks'\nimport type { ColorValue } from '../../components/utils/types'\nimport {\n  useResponsiveBorder,\n  useResponsiveBorderRadius,\n  useResponsiveMargin,\n  useResponsivePadding,\n  useResponsiveShadow,\n  useResponsiveWidth,\n} from '../../components/utils/responsive-style'\n\nimport { RenderHook } from './components'\nimport { useStyle } from './use-style'\n\nimport {\n  Types as PropControllerTypes,\n  getShadowsPropControllerDataResponsiveShadowsData,\n  ShadowsPropControllerData,\n  Shadows,\n  ResponsiveValue,\n  BorderPropControllerFormat,\n  ResponsiveBorderData,\n  BorderPropControllerData,\n  getBorderPropControllerDataResponsiveBorderData,\n  getBorderRadiusPropControllerDataResponsiveBorderRadiusData,\n  BorderRadiusPropControllerData,\n  BorderRadiusPropControllerFormat,\n  MarginPropControllerFormat,\n  MarginPropControllerData,\n  getMarginPropControllerDataResponsiveMarginData,\n  PaddingPropControllerData,\n  getPaddingPropControllerDataResponsivePaddingData,\n  PaddingPropControllerFormat,\n  WidthPropControllerData,\n  getWidthPropControllerDataResponsiveLengthData,\n  WidthPropControllerFormat,\n  WidthDescriptor,\n  GapX,\n  ResponsiveNumber,\n  ResponsiveIconRadioGroup,\n  ResponsiveSelect,\n  ResponsiveOpacity,\n  getSocialLinksPropControllerDataSocialLinksData,\n} from '@makeswift/prop-controllers'\n\nimport { LegacyDescriptor } from '../../prop-controllers/descriptors'\nimport { useResponsiveLengthPropControllerData } from '../../components/hooks/useResponsiveLengthPropControllerData'\nimport { useNumberPropControllerData } from '../../components/hooks/useNumberPropControllerData'\nimport { useResponsiveColorPropControllerData } from '../../components/hooks/useResponsiveColorPropControllerData'\nimport { useTextStylePropControllerData } from '../../components/hooks/useTextStylePropControllerData'\nimport { useNavigationLinksPropControllerData } from '../../components/hooks/useNavigationLinksPropControllerData'\nimport { useTextAreaPropControllerData } from '../../components/hooks/useTextAreaPropControllerData'\nimport { usePropValue } from '../../components/hooks/usePropValue'\nimport { useGapYPropControllerData } from '../../components/hooks/useGapYPropControllerData'\nimport { useElementIDPropControllerData } from '../../components/hooks/useElementIDPropControllerData'\nimport { useTableFormFieldsPropControllerData } from '../../components/hooks/useTableFormFieldsPropControllerData'\nimport { useGridPropControllerData } from '../../components/hooks/useGridPropControllerData'\nimport { useImagePropControllerData } from '../../components/hooks/useImagePropControllerData'\nimport { useImagesPropControllerData } from '../../components/hooks/useImagesPropControllerData'\nimport { useBackgroundsPropControllerData } from '../../components/hooks/useBackgroundsPropControllerData'\nimport { useTextInputPropControllerData } from '../../components/hooks/useTextInputPropControllerData'\n\nexport type ResponsiveColor = ResponsiveValue<ColorValue>\n\nfunction useWidthStyle(\n  data: WidthPropControllerData | undefined,\n  descriptor: WidthDescriptor,\n): string {\n  const value = getWidthPropControllerDataResponsiveLengthData(data)\n\n  return useStyle(useResponsiveWidth(value, descriptor.options.defaultValue))\n}\n\nfunction usePaddingStyle(data: PaddingPropControllerData | undefined): string {\n  const value = getPaddingPropControllerDataResponsivePaddingData(data)\n\n  return useStyle(useResponsivePadding(value))\n}\n\nfunction useMarginStyle(data: MarginPropControllerData | undefined): string {\n  const value = getMarginPropControllerDataResponsiveMarginData(data)\n\n  return useStyle(useResponsiveMargin(value))\n}\n\nfunction useBorderRadiusStyle(data: BorderRadiusPropControllerData | undefined): string {\n  const value = getBorderRadiusPropControllerDataResponsiveBorderRadiusData(data)\n\n  return useStyle(useResponsiveBorderRadius(value))\n}\n\nfunction useShadowsStyle(data: ShadowsPropControllerData | undefined): string {\n  return useStyle(useResponsiveShadow(useBoxShadow(data) ?? undefined))\n}\n\nfunction useBorderStyle(\n  data: BorderPropControllerData | undefined,\n): string | ResponsiveBorderData | undefined {\n  const value = getBorderPropControllerDataResponsiveBorderData(data)\n  const borderData = useBorderData(value)\n\n  return useStyle(useResponsiveBorder(borderData ?? undefined))\n}\n\nexport function resolveLegacyDescriptorProp(\n  descriptor: LegacyDescriptor,\n  propName: string,\n  propData: any,\n  props: Record<string, any>,\n  renderFn: (props: Record<string, unknown>) => ReactNode,\n) {\n  switch (descriptor.type) {\n    case PropControllerTypes.Width:\n      switch (descriptor.options.format) {\n        case WidthPropControllerFormat.ClassName:\n          return (\n            <RenderHook\n              key={descriptor.type}\n              hook={useWidthStyle}\n              parameters={[propData, descriptor]}\n            >\n              {value => renderFn({ ...props, [propName]: value })}\n            </RenderHook>\n          )\n\n        case WidthPropControllerFormat.ResponsiveValue:\n        default:\n          return renderFn({\n            ...props,\n            [propName]: getWidthPropControllerDataResponsiveLengthData(propData),\n          })\n      }\n\n    case PropControllerTypes.Padding:\n      switch (descriptor.options.format) {\n        case PaddingPropControllerFormat.ClassName:\n          return (\n            <RenderHook key={descriptor.type} hook={usePaddingStyle} parameters={[propData]}>\n              {value => renderFn({ ...props, [propName]: value })}\n            </RenderHook>\n          )\n\n        case PaddingPropControllerFormat.ResponsiveValue:\n        default:\n          return renderFn({\n            ...props,\n            [propName]: getPaddingPropControllerDataResponsivePaddingData(propData),\n          })\n      }\n\n    case PropControllerTypes.Margin:\n      switch (descriptor.options.format) {\n        case MarginPropControllerFormat.ClassName:\n          return (\n            <RenderHook key={descriptor.type} hook={useMarginStyle} parameters={[propData]}>\n              {value => renderFn({ ...props, [propName]: value })}\n            </RenderHook>\n          )\n\n        case MarginPropControllerFormat.ResponsiveValue:\n        default:\n          return renderFn({\n            ...props,\n            [propName]: getMarginPropControllerDataResponsiveMarginData(propData),\n          })\n      }\n\n    case PropControllerTypes.BorderRadius:\n      switch (descriptor.options.format) {\n        case BorderRadiusPropControllerFormat.ClassName:\n          return (\n            <RenderHook key={descriptor.type} hook={useBorderRadiusStyle} parameters={[propData]}>\n              {value => renderFn({ ...props, [propName]: value })}\n            </RenderHook>\n          )\n\n        case BorderRadiusPropControllerFormat.ResponsiveValue:\n        default:\n          return renderFn({\n            ...props,\n            [propName]: getBorderRadiusPropControllerDataResponsiveBorderRadiusData(propData),\n          })\n      }\n\n    case PropControllerTypes.Backgrounds:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={useBackgroundsPropControllerData}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.Image:\n      return (\n        <RenderHook key={descriptor.type} hook={useImagePropControllerData} parameters={[propData]}>\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.Images:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={useImagesPropControllerData}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.Number:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={useNumberPropControllerData}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.ResponsiveNumber:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={data => usePropValue(ResponsiveNumber, data)}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.ResponsiveIconRadioGroup:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={data => usePropValue(ResponsiveIconRadioGroup, data)}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.ResponsiveSelect:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={data => usePropValue(ResponsiveSelect, data)}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.ResponsiveOpacity:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={data => usePropValue(ResponsiveOpacity, data)}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.ResponsiveLength:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={useResponsiveLengthPropControllerData}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.Shadows:\n      switch (descriptor.options.format) {\n        case Shadows.Format.ClassName:\n          return (\n            <RenderHook key={descriptor.type} hook={useShadowsStyle} parameters={[propData]}>\n              {value => renderFn({ ...props, [propName]: value })}\n            </RenderHook>\n          )\n\n        case Shadows.Format.ResponsiveValue:\n        default:\n          return renderFn({\n            ...props,\n            [propName]: getShadowsPropControllerDataResponsiveShadowsData(propData),\n          })\n      }\n\n    case PropControllerTypes.Border:\n      switch (descriptor.options.format) {\n        case BorderPropControllerFormat.ClassName:\n          return (\n            <RenderHook key={descriptor.type} hook={useBorderStyle} parameters={[propData]}>\n              {value => renderFn({ ...props, [propName]: value })}\n            </RenderHook>\n          )\n\n        case BorderPropControllerFormat.ResponsiveValue:\n        default:\n          return renderFn({\n            ...props,\n            [propName]: getBorderPropControllerDataResponsiveBorderData(propData),\n          })\n      }\n\n    case PropControllerTypes.ResponsiveColor:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={useResponsiveColorPropControllerData}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.Link:\n      return (\n        <RenderHook key={descriptor.type} hook={useLinkPropControllerData} parameters={[propData]}>\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.Checkbox:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={useCheckboxPropControllerData}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.Date:\n      return (\n        <RenderHook key={descriptor.type} hook={useDatePropControllerData} parameters={[propData]}>\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.Font:\n      return (\n        <RenderHook key={descriptor.type} hook={useFontPropControllerData} parameters={[propData]}>\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.Video:\n      return (\n        <RenderHook key={descriptor.type} hook={useVideoPropControllerData} parameters={[propData]}>\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.Table:\n      return (\n        <RenderHook key={descriptor.type} hook={useTablePropControllerData} parameters={[propData]}>\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.TextStyle:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={useTextStylePropControllerData}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.NavigationLinks:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={useNavigationLinksPropControllerData}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.TextInput:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={useTextInputPropControllerData}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.TextArea:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={useTextAreaPropControllerData}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.GapX:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={data => usePropValue(GapX, data)}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.GapY:\n      return (\n        <RenderHook key={descriptor.type} hook={useGapYPropControllerData} parameters={[propData]}>\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.ElementID:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={useElementIDPropControllerData}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.TableFormFields:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={useTableFormFieldsPropControllerData}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.SocialLinks:\n      return renderFn({\n        ...props,\n        [propName]: getSocialLinksPropControllerDataSocialLinksData(propData),\n      })\n\n    case PropControllerTypes.Grid:\n      return (\n        <RenderHook key={descriptor.type} hook={useGridPropControllerData} parameters={[propData]}>\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    default:\n      return renderFn({ ...props, [propName]: propData })\n  }\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/runtimes/react/legacy-controls.tsx"],"sourcesContent":["import { ReactNode } from 'react'\nimport {\n  useBoxShadow,\n  useBorder as useBorderData,\n  useLinkPropControllerData,\n  useCheckboxPropControllerData,\n  useDatePropControllerData,\n  useFontPropControllerData,\n  useVideoPropControllerData,\n  useTablePropControllerData,\n} from '../../components/hooks'\nimport type { ColorValue } from '../../components/utils/types'\nimport {\n  useResponsiveBorder,\n  useResponsiveBorderRadius,\n  useResponsiveMargin,\n  useResponsivePadding,\n  useResponsiveShadow,\n  useResponsiveWidth,\n} from '../../components/utils/responsive-style'\n\nimport { RenderHook } from './components'\n\nimport {\n  Types as PropControllerTypes,\n  getShadowsPropControllerDataResponsiveShadowsData,\n  ShadowsPropControllerData,\n  Shadows,\n  ResponsiveValue,\n  BorderPropControllerFormat,\n  BorderPropControllerData,\n  getBorderPropControllerDataResponsiveBorderData,\n  getBorderRadiusPropControllerDataResponsiveBorderRadiusData,\n  BorderRadiusPropControllerData,\n  BorderRadiusPropControllerFormat,\n  MarginPropControllerFormat,\n  MarginPropControllerData,\n  getMarginPropControllerDataResponsiveMarginData,\n  PaddingPropControllerData,\n  getPaddingPropControllerDataResponsivePaddingData,\n  PaddingPropControllerFormat,\n  WidthPropControllerData,\n  getWidthPropControllerDataResponsiveLengthData,\n  WidthPropControllerFormat,\n  WidthDescriptor,\n  GapX,\n  ResponsiveNumber,\n  ResponsiveIconRadioGroup,\n  ResponsiveSelect,\n  ResponsiveOpacity,\n  getSocialLinksPropControllerDataSocialLinksData,\n} from '@makeswift/prop-controllers'\n\nimport { LegacyDescriptor } from '../../prop-controllers/descriptors'\nimport { useResponsiveLengthPropControllerData } from '../../components/hooks/useResponsiveLengthPropControllerData'\nimport { useNumberPropControllerData } from '../../components/hooks/useNumberPropControllerData'\nimport { useResponsiveColorPropControllerData } from '../../components/hooks/useResponsiveColorPropControllerData'\nimport { useTextStylePropControllerData } from '../../components/hooks/useTextStylePropControllerData'\nimport { useNavigationLinksPropControllerData } from '../../components/hooks/useNavigationLinksPropControllerData'\nimport { useTextAreaPropControllerData } from '../../components/hooks/useTextAreaPropControllerData'\nimport { usePropValue } from '../../components/hooks/usePropValue'\nimport { useGapYPropControllerData } from '../../components/hooks/useGapYPropControllerData'\nimport { useElementIDPropControllerData } from '../../components/hooks/useElementIDPropControllerData'\nimport { useTableFormFieldsPropControllerData } from '../../components/hooks/useTableFormFieldsPropControllerData'\nimport { useGridPropControllerData } from '../../components/hooks/useGridPropControllerData'\nimport { useImagePropControllerData } from '../../components/hooks/useImagePropControllerData'\nimport { useImagesPropControllerData } from '../../components/hooks/useImagesPropControllerData'\nimport { useBackgroundsPropControllerData } from '../../components/hooks/useBackgroundsPropControllerData'\nimport { useTextInputPropControllerData } from '../../components/hooks/useTextInputPropControllerData'\nimport { useLegacyControlledStyle } from './css-runtime/hooks/use-legacy-controlled-style'\n\nexport type ResponsiveColor = ResponsiveValue<ColorValue>\n\nfunction useWidthStyle(\n  elementKey: string,\n  propName: string,\n  data: WidthPropControllerData | undefined,\n  descriptor: WidthDescriptor,\n): { className: string; styleElement: ReactNode } {\n  const value = getWidthPropControllerDataResponsiveLengthData(data)\n\n  return useLegacyControlledStyle(\n    useResponsiveWidth(value, descriptor.options.defaultValue),\n    elementKey,\n    propName,\n  )\n}\n\nfunction usePaddingStyle(\n  elementKey: string,\n  propName: string,\n  data: PaddingPropControllerData | undefined,\n): { className: string; styleElement: ReactNode } {\n  const value = getPaddingPropControllerDataResponsivePaddingData(data)\n\n  return useLegacyControlledStyle(useResponsivePadding(value), elementKey, propName)\n}\n\nfunction useMarginStyle(\n  elementKey: string,\n  propName: string,\n  data: MarginPropControllerData | undefined,\n): { className: string; styleElement: ReactNode } {\n  const value = getMarginPropControllerDataResponsiveMarginData(data)\n\n  return useLegacyControlledStyle(useResponsiveMargin(value), elementKey, propName)\n}\n\nfunction useBorderRadiusStyle(\n  elementKey: string,\n  propName: string,\n  data: BorderRadiusPropControllerData | undefined,\n): { className: string; styleElement: ReactNode } {\n  const value = getBorderRadiusPropControllerDataResponsiveBorderRadiusData(data)\n\n  return useLegacyControlledStyle(useResponsiveBorderRadius(value), elementKey, propName)\n}\n\nfunction useShadowsStyle(\n  elementKey: string,\n  propName: string,\n  data: ShadowsPropControllerData | undefined,\n): { className: string; styleElement: ReactNode } {\n  return useLegacyControlledStyle(\n    useResponsiveShadow(useBoxShadow(data) ?? undefined),\n    elementKey,\n    propName,\n  )\n}\n\nfunction useBorderStyle(\n  elementKey: string,\n  propName: string,\n  data: BorderPropControllerData | undefined,\n): { className: string; styleElement: ReactNode } {\n  const value = getBorderPropControllerDataResponsiveBorderData(data)\n  const borderData = useBorderData(value)\n\n  return useLegacyControlledStyle(\n    useResponsiveBorder(borderData ?? undefined),\n    elementKey,\n    propName,\n  )\n}\n\nexport function resolveLegacyDescriptorProp(\n  descriptor: LegacyDescriptor,\n  propName: string,\n  elementKey: string,\n  propData: any,\n  props: Record<string, any>,\n  renderFn: (props: Record<string, unknown>) => ReactNode,\n) {\n  switch (descriptor.type) {\n    case PropControllerTypes.Width:\n      switch (descriptor.options.format) {\n        case WidthPropControllerFormat.ClassName:\n          return (\n            <RenderHook\n              key={descriptor.type}\n              hook={useWidthStyle}\n              parameters={[elementKey, propName, propData, descriptor]}\n            >\n              {({ className, styleElement }) => (\n                <>\n                  {styleElement}\n                  {renderFn({ ...props, [propName]: className })}\n                </>\n              )}\n            </RenderHook>\n          )\n\n        case WidthPropControllerFormat.ResponsiveValue:\n        default:\n          return renderFn({\n            ...props,\n            [propName]: getWidthPropControllerDataResponsiveLengthData(propData),\n          })\n      }\n\n    case PropControllerTypes.Padding:\n      switch (descriptor.options.format) {\n        case PaddingPropControllerFormat.ClassName:\n          return (\n            <RenderHook\n              key={descriptor.type}\n              hook={usePaddingStyle}\n              parameters={[elementKey, propName, propData]}\n            >\n              {({ className, styleElement }) => (\n                <>\n                  {styleElement}\n                  {renderFn({ ...props, [propName]: className })}\n                </>\n              )}\n            </RenderHook>\n          )\n\n        case PaddingPropControllerFormat.ResponsiveValue:\n        default:\n          return renderFn({\n            ...props,\n            [propName]: getPaddingPropControllerDataResponsivePaddingData(propData),\n          })\n      }\n\n    case PropControllerTypes.Margin:\n      switch (descriptor.options.format) {\n        case MarginPropControllerFormat.ClassName:\n          return (\n            <RenderHook\n              key={descriptor.type}\n              hook={useMarginStyle}\n              parameters={[elementKey, propName, propData]}\n            >\n              {({ className, styleElement }) => (\n                <>\n                  {styleElement}\n                  {renderFn({ ...props, [propName]: className })}\n                </>\n              )}\n            </RenderHook>\n          )\n\n        case MarginPropControllerFormat.ResponsiveValue:\n        default:\n          return renderFn({\n            ...props,\n            [propName]: getMarginPropControllerDataResponsiveMarginData(propData),\n          })\n      }\n\n    case PropControllerTypes.BorderRadius:\n      switch (descriptor.options.format) {\n        case BorderRadiusPropControllerFormat.ClassName:\n          return (\n            <RenderHook\n              key={descriptor.type}\n              hook={useBorderRadiusStyle}\n              parameters={[elementKey, propName, propData]}\n            >\n              {({ className, styleElement }) => (\n                <>\n                  {styleElement}\n                  {renderFn({ ...props, [propName]: className })}\n                </>\n              )}\n            </RenderHook>\n          )\n\n        case BorderRadiusPropControllerFormat.ResponsiveValue:\n        default:\n          return renderFn({\n            ...props,\n            [propName]: getBorderRadiusPropControllerDataResponsiveBorderRadiusData(propData),\n          })\n      }\n\n    case PropControllerTypes.Backgrounds:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={useBackgroundsPropControllerData}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.Image:\n      return (\n        <RenderHook key={descriptor.type} hook={useImagePropControllerData} parameters={[propData]}>\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.Images:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={useImagesPropControllerData}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.Number:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={useNumberPropControllerData}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.ResponsiveNumber:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={data => usePropValue(ResponsiveNumber, data)}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.ResponsiveIconRadioGroup:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={data => usePropValue(ResponsiveIconRadioGroup, data)}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.ResponsiveSelect:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={data => usePropValue(ResponsiveSelect, data)}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.ResponsiveOpacity:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={data => usePropValue(ResponsiveOpacity, data)}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.ResponsiveLength:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={useResponsiveLengthPropControllerData}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.Shadows:\n      switch (descriptor.options.format) {\n        case Shadows.Format.ClassName:\n          return (\n            <RenderHook\n              key={descriptor.type}\n              hook={useShadowsStyle}\n              parameters={[elementKey, propName, propData]}\n            >\n              {({ className, styleElement }) => (\n                <>\n                  {styleElement}\n                  {renderFn({ ...props, [propName]: className })}\n                </>\n              )}\n            </RenderHook>\n          )\n\n        case Shadows.Format.ResponsiveValue:\n        default:\n          return renderFn({\n            ...props,\n            [propName]: getShadowsPropControllerDataResponsiveShadowsData(propData),\n          })\n      }\n\n    case PropControllerTypes.Border:\n      switch (descriptor.options.format) {\n        case BorderPropControllerFormat.ClassName:\n          return (\n            <RenderHook\n              key={descriptor.type}\n              hook={useBorderStyle}\n              parameters={[elementKey, propName, propData]}\n            >\n              {({ className, styleElement }) => (\n                <>\n                  {styleElement}\n                  {renderFn({ ...props, [propName]: className })}\n                </>\n              )}\n            </RenderHook>\n          )\n\n        case BorderPropControllerFormat.ResponsiveValue:\n        default:\n          return renderFn({\n            ...props,\n            [propName]: getBorderPropControllerDataResponsiveBorderData(propData),\n          })\n      }\n\n    case PropControllerTypes.ResponsiveColor:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={useResponsiveColorPropControllerData}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.Link:\n      return (\n        <RenderHook key={descriptor.type} hook={useLinkPropControllerData} parameters={[propData]}>\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.Checkbox:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={useCheckboxPropControllerData}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.Date:\n      return (\n        <RenderHook key={descriptor.type} hook={useDatePropControllerData} parameters={[propData]}>\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.Font:\n      return (\n        <RenderHook key={descriptor.type} hook={useFontPropControllerData} parameters={[propData]}>\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.Video:\n      return (\n        <RenderHook key={descriptor.type} hook={useVideoPropControllerData} parameters={[propData]}>\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.Table:\n      return (\n        <RenderHook key={descriptor.type} hook={useTablePropControllerData} parameters={[propData]}>\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.TextStyle:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={useTextStylePropControllerData}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.NavigationLinks:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={useNavigationLinksPropControllerData}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.TextInput:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={useTextInputPropControllerData}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.TextArea:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={useTextAreaPropControllerData}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.GapX:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={data => usePropValue(GapX, data)}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.GapY:\n      return (\n        <RenderHook key={descriptor.type} hook={useGapYPropControllerData} parameters={[propData]}>\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.ElementID:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={useElementIDPropControllerData}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.TableFormFields:\n      return (\n        <RenderHook\n          key={descriptor.type}\n          hook={useTableFormFieldsPropControllerData}\n          parameters={[propData]}\n        >\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    case PropControllerTypes.SocialLinks:\n      return renderFn({\n        ...props,\n        [propName]: getSocialLinksPropControllerDataSocialLinksData(propData),\n      })\n\n    case PropControllerTypes.Grid:\n      return (\n        <RenderHook key={descriptor.type} hook={useGridPropControllerData} parameters={[propData]}>\n          {value => renderFn({ ...props, [propName]: value })}\n        </RenderHook>\n      )\n\n    default:\n      return renderFn({ ...props, [propName]: propData })\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/esm/runtimes/react/poll-box-model.js

@@ -1,11 +1,12 @@
 import { getBox } from "../../state/modules/read-write/box-models";
 import deepEqual from "../../utils/deepEqual";
 function pollBoxModel({
-  element,
+  getElement,
   onBoxModelChange
 }) {
   let currentBoxModel = null;
   const handleAnimationFrameRequest = () => {
+    const element = getElement();
     const measuredBoxModel = element == null ? null : getBox(element);
     if (!deepEqual(currentBoxModel, measuredBoxModel)) {
       currentBoxModel = measuredBoxModel;

package/dist/esm/runtimes/react/poll-box-model.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/runtimes/react/poll-box-model.ts"],"sourcesContent":["import { BoxDisplayModel, getBox } from '../../state/modules/read-write/box-models'\nimport deepEqual from '../../utils/deepEqual'\n\nexport function pollBoxModel({\n  element,\n  onBoxModelChange,\n}: {\n  element: Element | null\n  onBoxModelChange(boxModel: BoxDisplayModel | null): void\n}): () => void {\n  let currentBoxModel: BoxDisplayModel | null = null\n\n  const handleAnimationFrameRequest = () => {\n    const measuredBoxModel = element == null ? null : getBox(element)\n\n    if (!deepEqual(currentBoxModel, measuredBoxModel)) {\n      currentBoxModel = measuredBoxModel\n\n      onBoxModelChange(currentBoxModel)\n    }\n\n    animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest)\n  }\n\n  let animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest)\n\n  return () => {\n    cancelAnimationFrame(animationFrameHandle)\n\n    onBoxModelChange(null)\n  }\n}\n"],"mappings":"AAAA,SAA0B,cAAc;AACxC,OAAO,eAAe;AAEf,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AACF,GAGe;AACb,MAAI,kBAA0C;AAE9C,QAAM,8BAA8B,MAAM;AACxC,UAAM,mBAAmB,WAAW,OAAO,OAAO,OAAO,OAAO;AAEhE,QAAI,CAAC,UAAU,iBAAiB,gBAAgB,GAAG;AACjD,wBAAkB;AAElB,uBAAiB,eAAe;AAAA,IAClC;AAEA,2BAAuB,sBAAsB,2BAA2B;AAAA,EAC1E;AAEA,MAAI,uBAAuB,sBAAsB,2BAA2B;AAE5E,SAAO,MAAM;AACX,yBAAqB,oBAAoB;AAEzC,qBAAiB,IAAI;AAAA,EACvB;AACF;","names":[]}
+{"version":3,"sources":["../../../../src/runtimes/react/poll-box-model.ts"],"sourcesContent":["import { BoxDisplayModel, getBox } from '../../state/modules/read-write/box-models'\nimport deepEqual from '../../utils/deepEqual'\n\nexport function pollBoxModel({\n  getElement,\n  onBoxModelChange,\n}: {\n  getElement: () => Element | null\n  onBoxModelChange(boxModel: BoxDisplayModel | null): void\n}): () => void {\n  let currentBoxModel: BoxDisplayModel | null = null\n\n  const handleAnimationFrameRequest = () => {\n    const element = getElement()\n    const measuredBoxModel = element == null ? null : getBox(element)\n\n    if (!deepEqual(currentBoxModel, measuredBoxModel)) {\n      currentBoxModel = measuredBoxModel\n\n      onBoxModelChange(currentBoxModel)\n    }\n\n    animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest)\n  }\n\n  let animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest)\n\n  return () => {\n    cancelAnimationFrame(animationFrameHandle)\n\n    onBoxModelChange(null)\n  }\n}\n"],"mappings":"AAAA,SAA0B,cAAc;AACxC,OAAO,eAAe;AAEf,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AACF,GAGe;AACb,MAAI,kBAA0C;AAE9C,QAAM,8BAA8B,MAAM;AACxC,UAAM,UAAU,WAAW;AAC3B,UAAM,mBAAmB,WAAW,OAAO,OAAO,OAAO,OAAO;AAEhE,QAAI,CAAC,UAAU,iBAAiB,gBAAgB,GAAG;AACjD,wBAAkB;AAElB,uBAAiB,eAAe;AAAA,IAClC;AAEA,2BAAuB,sBAAsB,2BAA2B;AAAA,EAC1E;AAEA,MAAI,uBAAuB,sBAAsB,2BAA2B;AAE5E,SAAO,MAAM;AACX,yBAAqB,oBAAoB;AAEzC,qBAAiB,IAAI;AAAA,EACvB;AACF;","names":[]}

package/dist/esm/runtimes/react/root-style-registry.js

@@ -1,75 +1,51 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import createCache from "@emotion/cache";
-import { cache } from "@emotion/css";
-import { createContext, useContext, useState } from "react";
-const CacheContext = createContext(cache);
-const DEFAULT_CSS_RESET_ENABLED = true;
-const CSSResetEnabledContext = createContext(DEFAULT_CSS_RESET_ENABLED);
-const createRootStyleCache = ({ key } = {}) => {
-  const cache2 = createCache({ key: key ?? "mswft" });
-  cache2.compat = true;
-  let inserted = [];
-  return {
-    ...cache2,
-    // override the `insert` method to track inserted names
-    insert(...args) {
-      const serialized = args[1];
-      if (cache2.inserted[serialized.name] === void 0) {
-        inserted.push(serialized.name);
-      }
-      return cache2.insert(...args);
-    },
-    flush() {
-      const classNames = inserted;
-      inserted = [];
-      return {
-        classNames,
-        css: classNames.reduce((css, name) => {
-          return css + cache2.inserted[name];
-        }, "")
-      };
-    }
-  };
-};
-const StyleTagSSR = ({ cacheKey, classNames, css }) => /* @__PURE__ */ jsx(
-  "style",
-  {
-    "data-emotion": `${cacheKey} ${classNames.join(" ")}`,
-    dangerouslySetInnerHTML: {
-      __html: css
-    }
-  }
-);
-const styleTagHtml = ({ cacheKey, classNames, css }) => `<style data-emotion="${cacheKey} ${classNames.join(" ")}">${css}</style>`;
+import { useState } from "react";
+import { StylesContextProvider } from "./css-runtime/components/styles-context-provider";
+import { useDynamicBrowserStyleUpdates } from "./css-runtime/hooks/use-dynamic-browser-style-updates";
+import {
+  DEFAULT_CSS_CLASS_NAME_PREFIX,
+  DEFAULT_SHOULD_RENDER_STYLE_ELEMENTS,
+  DEFAULT_CSS_RESET_ENABLED
+} from "./css-runtime/constants";
+import { createMakeswiftStylesRegistry } from "./css-runtime/utils";
 function RootStyleRegistry({
   children,
-  cache: cache2,
-  enableCssReset
+  stylesRegistry,
+  classNamePrefix = DEFAULT_CSS_CLASS_NAME_PREFIX,
+  enableCssReset = DEFAULT_CSS_RESET_ENABLED,
+  shouldRenderStyleElements = DEFAULT_SHOULD_RENDER_STYLE_ELEMENTS
 }) {
-  return /* @__PURE__ */ jsx(CacheContext.Provider, { value: cache2, children: /* @__PURE__ */ jsx(CSSResetEnabledContext.Provider, { value: enableCssReset ?? DEFAULT_CSS_RESET_ENABLED, children }) });
+  useDynamicBrowserStyleUpdates(stylesRegistry);
+  return /* @__PURE__ */ jsx(
+    StylesContextProvider,
+    {
+      classNamePrefix,
+      enableCssReset,
+      stylesRegistry,
+      shouldRenderStyleElements,
+      children
+    }
+  );
 }
 function DefaultRootStyleRegistry({
   children,
-  cacheKey,
+  classNamePrefix,
   enableCssReset
 }) {
-  const [cache2] = useState(() => createRootStyleCache({ key: cacheKey }));
-  return /* @__PURE__ */ jsx(RootStyleRegistry, { cache: cache2, enableCssReset, children });
-}
-function useCache() {
-  return useContext(CacheContext);
-}
-function useCSSResetEnabled() {
-  return useContext(CSSResetEnabledContext);
+  const [stylesRegistry] = useState(createMakeswiftStylesRegistry);
+  return /* @__PURE__ */ jsx(
+    RootStyleRegistry,
+    {
+      stylesRegistry,
+      classNamePrefix,
+      enableCssReset,
+      children
+    }
+  );
 }
 export {
   DefaultRootStyleRegistry,
-  RootStyleRegistry,
-  StyleTagSSR,
-  createRootStyleCache,
-  styleTagHtml,
-  useCSSResetEnabled,
-  useCache
+  RootStyleRegistry
 };
 //# sourceMappingURL=root-style-registry.js.map

package/dist/esm/runtimes/react/root-style-registry.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/runtimes/react/root-style-registry.tsx"],"sourcesContent":["'use client'\n\nimport createCache, { type EmotionCache } from '@emotion/cache'\nimport { cache } from '@emotion/css'\nimport { type PropsWithChildren, createContext, useContext, useState } from 'react'\n\nconst CacheContext = createContext(cache)\n\nconst DEFAULT_CSS_RESET_ENABLED = true\nconst CSSResetEnabledContext = createContext(DEFAULT_CSS_RESET_ENABLED)\n\nexport type StyleCache = EmotionCache & {\n  /**\n   * Flush the inserted styles.\n   * @returns A list of class names and the corresponding CSS rules that were flushed.\n   */\n  flush: () => { classNames: string[]; css: string }\n}\n\nexport const createRootStyleCache = ({ key }: { key?: string } = {}): StyleCache => {\n  const cache = createCache({ key: key ?? 'mswft' })\n  cache.compat = true\n\n  // additional state to track inserted style names\n  let inserted: string[] = []\n\n  return {\n    ...cache,\n\n    // override the `insert` method to track inserted names\n    insert(...args) {\n      const serialized = args[1]\n      if (cache.inserted[serialized.name] === undefined) {\n        inserted.push(serialized.name)\n      }\n      return cache.insert(...args)\n    },\n\n    flush() {\n      const classNames = inserted\n      // reset our own state, leave `cache.inserted` intact\n      inserted = []\n\n      return {\n        classNames,\n        css: classNames.reduce((css, name) => {\n          return css + cache.inserted[name]\n        }, ''),\n      }\n    },\n  }\n}\n\ntype StyleTagProps = {\n  cacheKey: string\n  classNames: string[]\n  css: string\n}\n\nexport const StyleTagSSR = ({ cacheKey, classNames, css }: StyleTagProps) => (\n  <style\n    data-emotion={`${cacheKey} ${classNames.join(' ')}`}\n    dangerouslySetInnerHTML={{\n      __html: css,\n    }}\n  />\n)\n\nexport const styleTagHtml = ({ cacheKey, classNames, css }: StyleTagProps): string =>\n  `<style data-emotion=\"${cacheKey} ${classNames.join(' ')}\">${css}</style>`\n\nexport type RootStyleProps = {\n  /**\n   * The key used to prefix generated class names.\n   * If not provided, a default key will be used.\n   */\n  cacheKey?: string\n  /**\n   * Toggle the built-in CSS reset.\n   * Set to `false` when using `@layer`-based CSS frameworks like Tailwind.\n   */\n  enableCssReset?: boolean\n}\n\nexport function RootStyleRegistry({\n  children,\n  cache,\n  enableCssReset,\n}: PropsWithChildren<{\n  cache: StyleCache\n  enableCssReset?: boolean\n}>) {\n  return (\n    <CacheContext.Provider value={cache}>\n      <CSSResetEnabledContext.Provider value={enableCssReset ?? DEFAULT_CSS_RESET_ENABLED}>\n        {children}\n      </CSSResetEnabledContext.Provider>\n    </CacheContext.Provider>\n  )\n}\n\nexport function DefaultRootStyleRegistry({\n  children,\n  cacheKey,\n  enableCssReset,\n}: PropsWithChildren<RootStyleProps>) {\n  const [cache] = useState(() => createRootStyleCache({ key: cacheKey }))\n\n  return (\n    <RootStyleRegistry cache={cache} enableCssReset={enableCssReset}>\n      {children}\n    </RootStyleRegistry>\n  )\n}\n\nexport function useCache(): EmotionCache {\n  return useContext(CacheContext)\n}\n\nexport function useCSSResetEnabled(): boolean {\n  return useContext(CSSResetEnabledContext)\n}\n"],"mappings":";AA4DE;AA1DF,OAAO,iBAAwC;AAC/C,SAAS,aAAa;AACtB,SAAiC,eAAe,YAAY,gBAAgB;AAE5E,MAAM,eAAe,cAAc,KAAK;AAExC,MAAM,4BAA4B;AAClC,MAAM,yBAAyB,cAAc,yBAAyB;AAU/D,MAAM,uBAAuB,CAAC,EAAE,IAAI,IAAsB,CAAC,MAAkB;AAClF,QAAMA,SAAQ,YAAY,EAAE,KAAK,OAAO,QAAQ,CAAC;AACjD,EAAAA,OAAM,SAAS;AAGf,MAAI,WAAqB,CAAC;AAE1B,SAAO;AAAA,IACL,GAAGA;AAAA;AAAA,IAGH,UAAU,MAAM;AACd,YAAM,aAAa,KAAK,CAAC;AACzB,UAAIA,OAAM,SAAS,WAAW,IAAI,MAAM,QAAW;AACjD,iBAAS,KAAK,WAAW,IAAI;AAAA,MAC/B;AACA,aAAOA,OAAM,OAAO,GAAG,IAAI;AAAA,IAC7B;AAAA,IAEA,QAAQ;AACN,YAAM,aAAa;AAEnB,iBAAW,CAAC;AAEZ,aAAO;AAAA,QACL;AAAA,QACA,KAAK,WAAW,OAAO,CAAC,KAAK,SAAS;AACpC,iBAAO,MAAMA,OAAM,SAAS,IAAI;AAAA,QAClC,GAAG,EAAE;AAAA,MACP;AAAA,IACF;AAAA,EACF;AACF;AAQO,MAAM,cAAc,CAAC,EAAE,UAAU,YAAY,IAAI,MACtD;AAAA,EAAC;AAAA;AAAA,IACC,gBAAc,GAAG,QAAQ,IAAI,WAAW,KAAK,GAAG,CAAC;AAAA,IACjD,yBAAyB;AAAA,MACvB,QAAQ;AAAA,IACV;AAAA;AACF;AAGK,MAAM,eAAe,CAAC,EAAE,UAAU,YAAY,IAAI,MACvD,wBAAwB,QAAQ,IAAI,WAAW,KAAK,GAAG,CAAC,KAAK,GAAG;AAe3D,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA,OAAAA;AAAA,EACA;AACF,GAGI;AACF,SACE,oBAAC,aAAa,UAAb,EAAsB,OAAOA,QAC5B,8BAAC,uBAAuB,UAAvB,EAAgC,OAAO,kBAAkB,2BACvD,UACH,GACF;AAEJ;AAEO,SAAS,yBAAyB;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AACF,GAAsC;AACpC,QAAM,CAACA,MAAK,IAAI,SAAS,MAAM,qBAAqB,EAAE,KAAK,SAAS,CAAC,CAAC;AAEtE,SACE,oBAAC,qBAAkB,OAAOA,QAAO,gBAC9B,UACH;AAEJ;AAEO,SAAS,WAAyB;AACvC,SAAO,WAAW,YAAY;AAChC;AAEO,SAAS,qBAA8B;AAC5C,SAAO,WAAW,sBAAsB;AAC1C;","names":["cache"]}
+{"version":3,"sources":["../../../../src/runtimes/react/root-style-registry.tsx"],"sourcesContent":["'use client'\n\nimport { useState, type PropsWithChildren } from 'react'\nimport { StylesContextProvider } from './css-runtime/components/styles-context-provider'\nimport { StylesRegistry } from './css-runtime/styles-registry'\nimport { useDynamicBrowserStyleUpdates } from './css-runtime/hooks/use-dynamic-browser-style-updates'\nimport {\n  DEFAULT_CSS_CLASS_NAME_PREFIX,\n  DEFAULT_SHOULD_RENDER_STYLE_ELEMENTS,\n  DEFAULT_CSS_RESET_ENABLED,\n} from './css-runtime/constants'\nimport { createMakeswiftStylesRegistry } from './css-runtime/utils'\n\nexport type RootStyleProps = {\n  /**\n   * The prefix used for generated class names.\n   * If not provided, a default prefix will be used.\n   */\n  classNamePrefix?: string\n  /**\n   * Toggle the built-in CSS reset.\n   * Set to `false` when using `@layer`-based CSS frameworks like Tailwind.\n   */\n  enableCssReset?: boolean\n}\n\nexport function RootStyleRegistry({\n  children,\n  stylesRegistry,\n  classNamePrefix = DEFAULT_CSS_CLASS_NAME_PREFIX,\n  enableCssReset = DEFAULT_CSS_RESET_ENABLED,\n  shouldRenderStyleElements = DEFAULT_SHOULD_RENDER_STYLE_ELEMENTS,\n}: PropsWithChildren<{\n  stylesRegistry: StylesRegistry\n  classNamePrefix?: string\n  enableCssReset?: boolean\n  shouldRenderStyleElements?: boolean\n}>) {\n  useDynamicBrowserStyleUpdates(stylesRegistry)\n\n  return (\n    <StylesContextProvider\n      classNamePrefix={classNamePrefix}\n      enableCssReset={enableCssReset}\n      stylesRegistry={stylesRegistry}\n      shouldRenderStyleElements={shouldRenderStyleElements}\n    >\n      {children}\n    </StylesContextProvider>\n  )\n}\n\nexport function DefaultRootStyleRegistry({\n  children,\n  classNamePrefix,\n  enableCssReset,\n}: PropsWithChildren<RootStyleProps>) {\n  const [stylesRegistry] = useState(createMakeswiftStylesRegistry)\n  return (\n    <RootStyleRegistry\n      stylesRegistry={stylesRegistry}\n      classNamePrefix={classNamePrefix}\n      enableCssReset={enableCssReset}\n    >\n      {children}\n    </RootStyleRegistry>\n  )\n}\n"],"mappings":";AAyCI;AAvCJ,SAAS,gBAAwC;AACjD,SAAS,6BAA6B;AAEtC,SAAS,qCAAqC;AAC9C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,qCAAqC;AAevC,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,4BAA4B;AAC9B,GAKI;AACF,gCAA8B,cAAc;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEO,SAAS,yBAAyB;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AACF,GAAsC;AACpC,QAAM,CAAC,cAAc,IAAI,SAAS,6BAA6B;AAC/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/esm/runtimes/react/server/components/editable-server-element.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, startTransition, useCallback } from "react";
 import {
   setResolvedValueOverride,
@@ -8,13 +8,13 @@ import {
 import { useServerElementRefresh } from "../../hooks/use-server-element-refresh";
 import { useElementData } from "../../hooks/use-element-data";
 import { useControlDefs } from "../../hooks/use-control-defs";
-import { useEditableElementStylesheetFactory } from "../../hooks/use-editable-element-stylesheet-factory";
 import { useResolvedProps } from "../../hooks/use-resolved-props";
 import { useControlInstances } from "../../components/control-instances-context";
 import { useDispatch } from "../../hooks/use-dispatch";
 import { useDocumentKey } from "../../hooks/use-document-context";
 import { getProp } from "../../../../utils/prop-by-path";
 import { setUnion, setDifference } from "../../../../utils/set";
+import { useControlledStyles } from "../../css-runtime/hooks/use-controlled-styles";
 const EditableServerElement = ({
   initialElementData,
   children
@@ -35,14 +35,14 @@ const EditableServerElementWrapper = ({
   const dispatch = useDispatch();
   const documentKey = useDocumentKey();
   const [_legacyDefs, definitions] = useControlDefs({ elementType: initialElementData.type });
-  const stylesheetFactory = useEditableElementStylesheetFactory({ elementKey });
+  const { getStylesheet, styleElements } = useControlledStyles({ namespace: elementKey });
   const controlInstances = useControlInstances(elementKey);
   const resolvedProps = useResolvedProps({
     elementKey,
     propDefs: definitions,
     propData: elementData.props,
     controlInstances,
-    stylesheetFactory
+    getStylesheet
   });
   const prevPropsRef = useRef(resolvedProps);
   const prevLeafPropsRef = useRef(
@@ -108,7 +108,10 @@ const EditableServerElementWrapper = ({
     applyServerRefresh,
     applyResolvedValueOverrides
   ]);
-  return children;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    children,
+    styleElements
+  ] });
 };
 const needsServerRefresh = ({
   resolvedProps,

package/dist/esm/runtimes/react/server/components/editable-server-element.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/runtimes/react/server/components/editable-server-element.tsx"],"sourcesContent":["'use client'\n\nimport { type PropsWithChildren, useEffect, useRef, startTransition, useCallback } from 'react'\n\nimport { ControlInstance } from '@makeswift/controls'\n\nimport { type ElementData } from '../../../../state/read-only-state'\nimport {\n  setResolvedValueOverride,\n  clearResolvedValueOverride,\n} from '../../../../state/actions/internal/read-write-actions'\n\nimport { useServerElementRefresh } from '../../hooks/use-server-element-refresh'\nimport { useElementData } from '../../hooks/use-element-data'\nimport { useControlDefs } from '../../hooks/use-control-defs'\nimport { useEditableElementStylesheetFactory } from '../../hooks/use-editable-element-stylesheet-factory'\nimport { useResolvedProps } from '../../hooks/use-resolved-props'\nimport { useControlInstances } from '../../components/control-instances-context'\nimport { useDispatch } from '../../hooks/use-dispatch'\nimport { useDocumentKey } from '../../hooks/use-document-context'\n\nimport { getProp } from '../../../../utils/prop-by-path'\nimport { setUnion, setDifference } from '../../../../utils/set'\n\nexport const EditableServerElement = ({\n  initialElementData,\n  children,\n}: PropsWithChildren<{ initialElementData: ElementData }>) => {\n  const elementKey = initialElementData.key\n  const elementData = useElementData({ elementKey })\n  if (elementData == null) {\n    // Element has been deleted\n    return null\n  }\n\n  return (\n    <EditableServerElementWrapper {...{ initialElementData, elementData }}>\n      {children}\n    </EditableServerElementWrapper>\n  )\n}\n\n/**\n * Reflects edits to `elementData.props` in the server-rendered `children`.\n * Changes limited to existing `ReactNode` props are applied through client-side\n * overrides. Style prop changes are handled by the stylesheet engine during\n * prop resolution. All other prop changes trigger a server refresh.\n */\nconst EditableServerElementWrapper = ({\n  initialElementData,\n  elementData,\n  children,\n}: PropsWithChildren<{ initialElementData: ElementData; elementData: ElementData }>) => {\n  const elementKey = initialElementData.key\n  const dispatch = useDispatch()\n  const documentKey = useDocumentKey()\n\n  const [_legacyDefs, definitions] = useControlDefs({ elementType: initialElementData.type })\n  const stylesheetFactory = useEditableElementStylesheetFactory({ elementKey })\n\n  const controlInstances = useControlInstances(elementKey)\n  const resolvedProps = useResolvedProps({\n    elementKey,\n    propDefs: definitions,\n    propData: elementData.props,\n    controlInstances,\n    stylesheetFactory,\n  })\n\n  const prevPropsRef = useRef(resolvedProps)\n  const prevLeafPropsRef = useRef(\n    getLeafPropsAndInstances(resolvedProps, controlInstances).leafProps,\n  )\n\n  const serverRefresh = useServerElementRefresh({ elementKey })\n  const applyServerRefresh = useCallback(\n    (elementData: ElementData, leafInstances: ControlInstance[], documentKey: string) =>\n      startTransition(async () => {\n        const applied = await serverRefresh(elementData)\n        if (!applied) return\n\n        // need a nested `startTransition` here, see\n        // https://react.dev/reference/react/useTransition#react-doesnt-treat-my-state-update-after-await-as-a-transition\n        startTransition(() => {\n          // reset instance overrides, if any\n          leafInstances.forEach(c =>\n            dispatch(clearResolvedValueOverride({ documentKey, instanceKey: c.instanceKey })),\n          )\n        })\n      }),\n    [serverRefresh, dispatch],\n  )\n\n  const applyResolvedValueOverrides = useCallback(\n    (instances: ControlInstance[], props: Record<string, unknown>, documentKey: string) =>\n      instances.forEach(c =>\n        dispatch(\n          setResolvedValueOverride({\n            documentKey,\n            instanceKey: c.instanceKey,\n            value: getProp(props, c.propPath),\n          }),\n        ),\n      ),\n    [dispatch],\n  )\n\n  useEffect(() => {\n    if (documentKey == null) return\n\n    if (children == null) {\n      // If we don't have a server-rendered node (i.e. user just dropped the element to the page),\n      // trigger a server re-render\n      const { leafInstances, leafProps } = getLeafPropsAndInstances(resolvedProps, controlInstances)\n\n      applyServerRefresh(elementData, leafInstances, documentKey)\n\n      prevPropsRef.current = resolvedProps\n      prevLeafPropsRef.current = leafProps\n      return\n    }\n\n    if (resolvedProps !== prevPropsRef.current) {\n      // If there was a change in resolved value, check if any of the changed props necessitate\n      // a server refresh.\n      //\n      // Note that style props have stable class names and updating a style prop will not result\n      // in a change to the resolved value, which is what we want. The stylesheet engine takes\n      // care of updating the client CSS on style prop updates through the `useResolvedProps` call.\n      const { needsRefresh, leafInstances, leafProps, reactNodeInstances } = needsServerRefresh({\n        resolvedProps,\n        controlInstances,\n        prevProps: prevPropsRef.current,\n        prevLeafProps: prevLeafPropsRef.current,\n      })\n\n      if (needsRefresh) {\n        applyServerRefresh(elementData, leafInstances, documentKey)\n      } else {\n        applyResolvedValueOverrides(reactNodeInstances, resolvedProps, documentKey)\n      }\n\n      prevPropsRef.current = resolvedProps\n      prevLeafPropsRef.current = leafProps\n    }\n  }, [\n    children,\n    resolvedProps,\n    documentKey,\n    elementData,\n    controlInstances,\n    applyServerRefresh,\n    applyResolvedValueOverrides,\n  ])\n\n  return children\n}\n\n/**\n * Determines whether resolved prop changes require a server refresh and returns\n * the control-instance state needed to apply the update.\n */\nconst needsServerRefresh = ({\n  resolvedProps,\n  controlInstances,\n  prevProps,\n  prevLeafProps,\n}: {\n  resolvedProps: Record<string, unknown>\n  controlInstances: Record<string, ControlInstance> | null\n  prevProps: Record<string, unknown>\n  prevLeafProps: Set<string>\n}): {\n  needsRefresh: boolean\n  leafInstances: ControlInstance[]\n  leafProps: Set<string>\n  reactNodeInstances: ControlInstance[]\n} => {\n  const { leafInstances, leafProps } = getLeafPropsAndInstances(resolvedProps, controlInstances)\n\n  const combinedLeafProps = setUnion(leafProps, prevLeafProps).values()\n  const updatedLeafProps = new Set(\n    [...combinedLeafProps].filter(\n      propName => getProp(resolvedProps, propName) !== getProp(prevProps, propName),\n    ),\n  )\n\n  const updatedLeafInstances = leafInstances.filter(instance =>\n    updatedLeafProps.has(instance.propPath),\n  )\n\n  const reactNodeInstances = updatedLeafInstances.filter(c => c.resolvesToRenderableNode())\n\n  const reactNodePropKeys = new Set(reactNodeInstances.map(c => c.propPath))\n  const newlyAddedLeafProps = setDifference(leafProps, prevLeafProps)\n\n  // A server refresh is needed if some of the updated props are not `ReactNode` props, or we\n  // have newly observed props (typically `List` items). Even when newly observed props are\n  // `ReactNode` props, we have to first render them on the server to get them in the element\n  // tree before they can be updated client-side.\n  const needsRefresh =\n    setDifference(updatedLeafProps, reactNodePropKeys).size > 0 || newlyAddedLeafProps.size > 0\n\n  return {\n    needsRefresh,\n    leafInstances,\n    leafProps,\n    reactNodeInstances,\n  }\n}\n\n/**\n *  Returns terminal prop paths with the corresponding control instances.\n */\nconst getLeafPropsAndInstances = (\n  props: Record<string, unknown>,\n  controlInstances: Record<string, ControlInstance> | null,\n): {\n  leafProps: Set<string>\n  leafInstances: ControlInstance[]\n} => {\n  const topLevelInstances = Object.keys(props)\n    .map(prop => controlInstances?.[prop])\n    .filter(inst => inst != null)\n\n  const leafInstances = getLeafInstances(topLevelInstances)\n  const leafProps = new Set(leafInstances.map(c => c.propPath))\n  return { leafProps, leafInstances }\n}\n\n/**\n * Flattens a control instance tree to its leaf (terminal) instances.\n */\nconst getLeafInstances = (instances: ControlInstance[]): ControlInstance[] =>\n  instances.flatMap(instance =>\n    instance.isCompositeProp() ? getLeafInstances(instance.children()) : [instance],\n  )\n"],"mappings":"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","names":["elementData","documentKey"]}
+{"version":3,"sources":["../../../../../../src/runtimes/react/server/components/editable-server-element.tsx"],"sourcesContent":["'use client'\n\nimport { type PropsWithChildren, useEffect, useRef, startTransition, useCallback } from 'react'\n\nimport { ControlInstance } from '@makeswift/controls'\n\nimport { type ElementData } from '../../../../state/read-only-state'\nimport {\n  setResolvedValueOverride,\n  clearResolvedValueOverride,\n} from '../../../../state/actions/internal/read-write-actions'\n\nimport { useServerElementRefresh } from '../../hooks/use-server-element-refresh'\nimport { useElementData } from '../../hooks/use-element-data'\nimport { useControlDefs } from '../../hooks/use-control-defs'\nimport { useResolvedProps } from '../../hooks/use-resolved-props'\nimport { useControlInstances } from '../../components/control-instances-context'\nimport { useDispatch } from '../../hooks/use-dispatch'\nimport { useDocumentKey } from '../../hooks/use-document-context'\n\nimport { getProp } from '../../../../utils/prop-by-path'\nimport { setUnion, setDifference } from '../../../../utils/set'\nimport { useControlledStyles } from '../../css-runtime/hooks/use-controlled-styles'\n\nexport const EditableServerElement = ({\n  initialElementData,\n  children,\n}: PropsWithChildren<{ initialElementData: ElementData }>) => {\n  const elementKey = initialElementData.key\n  const elementData = useElementData({ elementKey })\n  if (elementData == null) {\n    // Element has been deleted\n    return null\n  }\n\n  return (\n    <EditableServerElementWrapper {...{ initialElementData, elementData }}>\n      {children}\n    </EditableServerElementWrapper>\n  )\n}\n\n/**\n * Reflects edits to `elementData.props` in the server-rendered `children`.\n * Changes limited to existing `ReactNode` props are applied through client-side\n * overrides. Style prop changes are handled by the stylesheet engine during\n * prop resolution. All other prop changes trigger a server refresh.\n */\nconst EditableServerElementWrapper = ({\n  initialElementData,\n  elementData,\n  children,\n}: PropsWithChildren<{ initialElementData: ElementData; elementData: ElementData }>) => {\n  const elementKey = initialElementData.key\n  const dispatch = useDispatch()\n  const documentKey = useDocumentKey()\n\n  const [_legacyDefs, definitions] = useControlDefs({ elementType: initialElementData.type })\n  const { getStylesheet, styleElements } = useControlledStyles({ namespace: elementKey })\n\n  const controlInstances = useControlInstances(elementKey)\n  const resolvedProps = useResolvedProps({\n    elementKey,\n    propDefs: definitions,\n    propData: elementData.props,\n    controlInstances,\n    getStylesheet,\n  })\n\n  const prevPropsRef = useRef(resolvedProps)\n  const prevLeafPropsRef = useRef(\n    getLeafPropsAndInstances(resolvedProps, controlInstances).leafProps,\n  )\n\n  const serverRefresh = useServerElementRefresh({ elementKey })\n  const applyServerRefresh = useCallback(\n    (elementData: ElementData, leafInstances: ControlInstance[], documentKey: string) =>\n      startTransition(async () => {\n        const applied = await serverRefresh(elementData)\n        if (!applied) return\n\n        // need a nested `startTransition` here, see\n        // https://react.dev/reference/react/useTransition#react-doesnt-treat-my-state-update-after-await-as-a-transition\n        startTransition(() => {\n          // reset instance overrides, if any\n          leafInstances.forEach(c =>\n            dispatch(clearResolvedValueOverride({ documentKey, instanceKey: c.instanceKey })),\n          )\n        })\n      }),\n    [serverRefresh, dispatch],\n  )\n\n  const applyResolvedValueOverrides = useCallback(\n    (instances: ControlInstance[], props: Record<string, unknown>, documentKey: string) =>\n      instances.forEach(c =>\n        dispatch(\n          setResolvedValueOverride({\n            documentKey,\n            instanceKey: c.instanceKey,\n            value: getProp(props, c.propPath),\n          }),\n        ),\n      ),\n    [dispatch],\n  )\n\n  useEffect(() => {\n    if (documentKey == null) return\n\n    if (children == null) {\n      // If we don't have a server-rendered node (i.e. user just dropped the element to the page),\n      // trigger a server re-render\n      const { leafInstances, leafProps } = getLeafPropsAndInstances(resolvedProps, controlInstances)\n\n      applyServerRefresh(elementData, leafInstances, documentKey)\n\n      prevPropsRef.current = resolvedProps\n      prevLeafPropsRef.current = leafProps\n      return\n    }\n\n    if (resolvedProps !== prevPropsRef.current) {\n      // If there was a change in resolved value, check if any of the changed props necessitate\n      // a server refresh.\n      //\n      // Note that style props have stable class names and updating a style prop will not result\n      // in a change to the resolved value, which is what we want. Dynamic style updates are handled\n      // through a subscription mechanism that listens for changes to controlled style data in the\n      // styles registry.\n      const { needsRefresh, leafInstances, leafProps, reactNodeInstances } = needsServerRefresh({\n        resolvedProps,\n        controlInstances,\n        prevProps: prevPropsRef.current,\n        prevLeafProps: prevLeafPropsRef.current,\n      })\n\n      if (needsRefresh) {\n        applyServerRefresh(elementData, leafInstances, documentKey)\n      } else {\n        applyResolvedValueOverrides(reactNodeInstances, resolvedProps, documentKey)\n      }\n\n      prevPropsRef.current = resolvedProps\n      prevLeafPropsRef.current = leafProps\n    }\n  }, [\n    children,\n    resolvedProps,\n    documentKey,\n    elementData,\n    controlInstances,\n    applyServerRefresh,\n    applyResolvedValueOverrides,\n  ])\n\n  return (\n    <>\n      {children}\n      {styleElements}\n    </>\n  )\n}\n\n/**\n * Determines whether resolved prop changes require a server refresh and returns\n * the control-instance state needed to apply the update.\n */\nconst needsServerRefresh = ({\n  resolvedProps,\n  controlInstances,\n  prevProps,\n  prevLeafProps,\n}: {\n  resolvedProps: Record<string, unknown>\n  controlInstances: Record<string, ControlInstance> | null\n  prevProps: Record<string, unknown>\n  prevLeafProps: Set<string>\n}): {\n  needsRefresh: boolean\n  leafInstances: ControlInstance[]\n  leafProps: Set<string>\n  reactNodeInstances: ControlInstance[]\n} => {\n  const { leafInstances, leafProps } = getLeafPropsAndInstances(resolvedProps, controlInstances)\n\n  const combinedLeafProps = setUnion(leafProps, prevLeafProps).values()\n  const updatedLeafProps = new Set(\n    [...combinedLeafProps].filter(\n      propName => getProp(resolvedProps, propName) !== getProp(prevProps, propName),\n    ),\n  )\n\n  const updatedLeafInstances = leafInstances.filter(instance =>\n    updatedLeafProps.has(instance.propPath),\n  )\n\n  const reactNodeInstances = updatedLeafInstances.filter(c => c.resolvesToRenderableNode())\n\n  const reactNodePropKeys = new Set(reactNodeInstances.map(c => c.propPath))\n  const newlyAddedLeafProps = setDifference(leafProps, prevLeafProps)\n\n  // A server refresh is needed if some of the updated props are not `ReactNode` props, or we\n  // have newly observed props (typically `List` items). Even when newly observed props are\n  // `ReactNode` props, we have to first render them on the server to get them in the element\n  // tree before they can be updated client-side.\n  const needsRefresh =\n    setDifference(updatedLeafProps, reactNodePropKeys).size > 0 || newlyAddedLeafProps.size > 0\n\n  return {\n    needsRefresh,\n    leafInstances,\n    leafProps,\n    reactNodeInstances,\n  }\n}\n\n/**\n *  Returns terminal prop paths with the corresponding control instances.\n */\nconst getLeafPropsAndInstances = (\n  props: Record<string, unknown>,\n  controlInstances: Record<string, ControlInstance> | null,\n): {\n  leafProps: Set<string>\n  leafInstances: ControlInstance[]\n} => {\n  const topLevelInstances = Object.keys(props)\n    .map(prop => controlInstances?.[prop])\n    .filter(inst => inst != null)\n\n  const leafInstances = getLeafInstances(topLevelInstances)\n  const leafProps = new Set(leafInstances.map(c => c.propPath))\n  return { leafProps, leafInstances }\n}\n\n/**\n * Flattens a control instance tree to its leaf (terminal) instances.\n */\nconst getLeafInstances = (instances: ControlInstance[]): ControlInstance[] =>\n  instances.flatMap(instance =>\n    instance.isCompositeProp() ? getLeafInstances(instance.children()) : [instance],\n  )\n"],"mappings":"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","names":["elementData","documentKey"]}

package/dist/esm/runtimes/react/server/components/element-data.js

@@ -7,13 +7,10 @@ import {
 } from "../../../../state/read-only-state";
 import { FallbackComponent } from "../../../../components/shared/FallbackComponent";
 import { isLegacyDescriptor } from "../../../../prop-controllers/descriptors";
-import {
-  ServerCSSCollector,
-  createCollectingServerStylesheet,
-  InjectServerCSS
-} from "../css/server-css";
 import { getStore } from "../render-context";
 import { resolveProps } from "../resolve-props";
+import { StylesheetEngine } from "../../css-runtime/stylesheet-engine";
+import { RSCEmittedStyle } from "../../css-runtime/components/rsc-emitted-style";
 async function ServerElementData({
   documentKey,
   context,
@@ -39,19 +36,26 @@ async function ServerElementData({
       legacyKeys
     });
   }
-  const cssCollector = new ServerCSSCollector();
-  const stylesheet = createCollectingServerStylesheet(
-    cssCollector,
-    getBreakpoints(state),
-    elementData.key
-  );
+  const classStyleData = /* @__PURE__ */ new Map();
+  const stylesheet = new StylesheetEngine({
+    breakpointsData: getBreakpoints(state),
+    classNamePrefix: context.rootStyleProps?.classNamePrefix,
+    documentKey,
+    elementKey: elementData.key,
+    propPathComponents: [],
+    onDefineStyle: (styleData) => {
+      const { onBoxModelChange, ...serializableStyleData } = styleData;
+      classStyleData.set(styleData.className, serializableStyleData);
+    }
+  });
   const props = {
     ...await resolveProps(context, elementData, documentKey, definitions, stylesheet),
     ...injectedProps
   };
+  const styleElements = Array.from(classStyleData, ([className, styleData]) => /* @__PURE__ */ jsx(RSCEmittedStyle, { namespace: elementData.key, serializableData: styleData }, className));
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Component, { ...props }, elementData.key),
-    /* @__PURE__ */ jsx(InjectServerCSS, { collector: cssCollector, elementKey: elementData.key })
+    styleElements
   ] });
 }
 const getControlDefs = (state, elementData) => {