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

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

@@ -1,10 +1,8 @@
 "use strict";
 "use client";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -18,98 +16,57 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var root_style_registry_exports = {};
 __export(root_style_registry_exports, {
   DefaultRootStyleRegistry: () => DefaultRootStyleRegistry,
-  RootStyleRegistry: () => RootStyleRegistry,
-  StyleTagSSR: () => StyleTagSSR,
-  createRootStyleCache: () => createRootStyleCache,
-  styleTagHtml: () => styleTagHtml,
-  useCSSResetEnabled: () => useCSSResetEnabled,
-  useCache: () => useCache
+  RootStyleRegistry: () => RootStyleRegistry
 });
 module.exports = __toCommonJS(root_style_registry_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_cache = __toESM(require("@emotion/cache"));
-var import_css = require("@emotion/css");
 var import_react = require("react");
-const CacheContext = (0, import_react.createContext)(import_css.cache);
-const DEFAULT_CSS_RESET_ENABLED = true;
-const CSSResetEnabledContext = (0, import_react.createContext)(DEFAULT_CSS_RESET_ENABLED);
-const createRootStyleCache = ({ key } = {}) => {
-  const cache2 = (0, import_cache.default)({ 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__ */ (0, import_jsx_runtime.jsx)(
-  "style",
-  {
-    "data-emotion": `${cacheKey} ${classNames.join(" ")}`,
-    dangerouslySetInnerHTML: {
-      __html: css
-    }
-  }
-);
-const styleTagHtml = ({ cacheKey, classNames, css }) => `<style data-emotion="${cacheKey} ${classNames.join(" ")}">${css}</style>`;
+var import_styles_context_provider = require("./css-runtime/components/styles-context-provider");
+var import_use_dynamic_browser_style_updates = require("./css-runtime/hooks/use-dynamic-browser-style-updates");
+var import_constants = require("./css-runtime/constants");
+var import_utils = require("./css-runtime/utils");
 function RootStyleRegistry({
   children,
-  cache: cache2,
-  enableCssReset
+  stylesRegistry,
+  classNamePrefix = import_constants.DEFAULT_CSS_CLASS_NAME_PREFIX,
+  enableCssReset = import_constants.DEFAULT_CSS_RESET_ENABLED,
+  shouldRenderStyleElements = import_constants.DEFAULT_SHOULD_RENDER_STYLE_ELEMENTS
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CacheContext.Provider, { value: cache2, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CSSResetEnabledContext.Provider, { value: enableCssReset ?? DEFAULT_CSS_RESET_ENABLED, children }) });
+  (0, import_use_dynamic_browser_style_updates.useDynamicBrowserStyleUpdates)(stylesRegistry);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_styles_context_provider.StylesContextProvider,
+    {
+      classNamePrefix,
+      enableCssReset,
+      stylesRegistry,
+      shouldRenderStyleElements,
+      children
+    }
+  );
 }
 function DefaultRootStyleRegistry({
   children,
-  cacheKey,
+  classNamePrefix,
   enableCssReset
 }) {
-  const [cache2] = (0, import_react.useState)(() => createRootStyleCache({ key: cacheKey }));
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RootStyleRegistry, { cache: cache2, enableCssReset, children });
-}
-function useCache() {
-  return (0, import_react.useContext)(CacheContext);
-}
-function useCSSResetEnabled() {
-  return (0, import_react.useContext)(CSSResetEnabledContext);
+  const [stylesRegistry] = (0, import_react.useState)(import_utils.createMakeswiftStylesRegistry);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    RootStyleRegistry,
+    {
+      stylesRegistry,
+      classNamePrefix,
+      enableCssReset,
+      children
+    }
+  );
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DefaultRootStyleRegistry,
-  RootStyleRegistry,
-  StyleTagSSR,
-  createRootStyleCache,
-  styleTagHtml,
-  useCSSResetEnabled,
-  useCache
+  RootStyleRegistry
 });
 //# sourceMappingURL=root-style-registry.js.map

package/dist/cjs/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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA4DE;AA1DF,mBAA+C;AAC/C,iBAAsB;AACtB,mBAA4E;AAE5E,MAAM,mBAAe,4BAAc,gBAAK;AAExC,MAAM,4BAA4B;AAClC,MAAM,6BAAyB,4BAAc,yBAAyB;AAU/D,MAAM,uBAAuB,CAAC,EAAE,IAAI,IAAsB,CAAC,MAAkB;AAClF,QAAMA,aAAQ,aAAAC,SAAY,EAAE,KAAK,OAAO,QAAQ,CAAC;AACjD,EAAAD,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,4CAAC,aAAa,UAAb,EAAsB,OAAOA,QAC5B,sDAAC,uBAAuB,UAAvB,EAAgC,OAAO,kBAAkB,2BACvD,UACH,GACF;AAEJ;AAEO,SAAS,yBAAyB;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AACF,GAAsC;AACpC,QAAM,CAACA,MAAK,QAAI,uBAAS,MAAM,qBAAqB,EAAE,KAAK,SAAS,CAAC,CAAC;AAEtE,SACE,4CAAC,qBAAkB,OAAOA,QAAO,gBAC9B,UACH;AAEJ;AAEO,SAAS,WAAyB;AACvC,aAAO,yBAAW,YAAY;AAChC;AAEO,SAAS,qBAA8B;AAC5C,aAAO,yBAAW,sBAAsB;AAC1C;","names":["cache","createCache"]}
+{"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":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyCI;AAvCJ,mBAAiD;AACjD,qCAAsC;AAEtC,+CAA8C;AAC9C,uBAIO;AACP,mBAA8C;AAevC,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,4BAA4B;AAC9B,GAKI;AACF,8EAA8B,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,QAAI,uBAAS,0CAA6B;AAC/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;","names":[]}

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

@@ -28,13 +28,13 @@ var import_read_write_actions = require("../../../../state/actions/internal/read
 var import_use_server_element_refresh = require("../../hooks/use-server-element-refresh");
 var import_use_element_data = require("../../hooks/use-element-data");
 var import_use_control_defs = require("../../hooks/use-control-defs");
-var import_use_editable_element_stylesheet_factory = require("../../hooks/use-editable-element-stylesheet-factory");
 var import_use_resolved_props = require("../../hooks/use-resolved-props");
 var import_control_instances_context = require("../../components/control-instances-context");
 var import_use_dispatch = require("../../hooks/use-dispatch");
 var import_use_document_context = require("../../hooks/use-document-context");
 var import_prop_by_path = require("../../../../utils/prop-by-path");
 var import_set = require("../../../../utils/set");
+var import_use_controlled_styles = require("../../css-runtime/hooks/use-controlled-styles");
 const EditableServerElement = ({
   initialElementData,
   children
@@ -55,14 +55,14 @@ const EditableServerElementWrapper = ({
   const dispatch = (0, import_use_dispatch.useDispatch)();
   const documentKey = (0, import_use_document_context.useDocumentKey)();
   const [_legacyDefs, definitions] = (0, import_use_control_defs.useControlDefs)({ elementType: initialElementData.type });
-  const stylesheetFactory = (0, import_use_editable_element_stylesheet_factory.useEditableElementStylesheetFactory)({ elementKey });
+  const { getStylesheet, styleElements } = (0, import_use_controlled_styles.useControlledStyles)({ namespace: elementKey });
   const controlInstances = (0, import_control_instances_context.useControlInstances)(elementKey);
   const resolvedProps = (0, import_use_resolved_props.useResolvedProps)({
     elementKey,
     propDefs: definitions,
     propData: elementData.props,
     controlInstances,
-    stylesheetFactory
+    getStylesheet
   });
   const prevPropsRef = (0, import_react.useRef)(resolvedProps);
   const prevLeafPropsRef = (0, import_react.useRef)(
@@ -128,7 +128,10 @@ const EditableServerElementWrapper = ({
     applyServerRefresh,
     applyResolvedValueOverrides
   ]);
-  return children;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    children,
+    styleElements
+  ] });
 };
 const needsServerRefresh = ({
   resolvedProps,

package/dist/cjs/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/cjs/runtimes/react/server/components/element-data.js

@@ -26,9 +26,10 @@ var import_partition = require("../../../../utils/partition");
 var import_read_only_state = require("../../../../state/read-only-state");
 var import_FallbackComponent = require("../../../../components/shared/FallbackComponent");
 var import_descriptors = require("../../../../prop-controllers/descriptors");
-var import_server_css = require("../css/server-css");
 var import_render_context = require("../render-context");
 var import_resolve_props = require("../resolve-props");
+var import_stylesheet_engine = require("../../css-runtime/stylesheet-engine");
+var import_rsc_emitted_style = require("../../css-runtime/components/rsc-emitted-style");
 async function ServerElementData({
   documentKey,
   context,
@@ -54,19 +55,26 @@ async function ServerElementData({
       legacyKeys
     });
   }
-  const cssCollector = new import_server_css.ServerCSSCollector();
-  const stylesheet = (0, import_server_css.createCollectingServerStylesheet)(
-    cssCollector,
-    (0, import_read_only_state.getBreakpoints)(state),
-    elementData.key
-  );
+  const classStyleData = /* @__PURE__ */ new Map();
+  const stylesheet = new import_stylesheet_engine.StylesheetEngine({
+    breakpointsData: (0, import_read_only_state.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 (0, import_resolve_props.resolveProps)(context, elementData, documentKey, definitions, stylesheet),
     ...injectedProps
   };
+  const styleElements = Array.from(classStyleData, ([className, styleData]) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_rsc_emitted_style.RSCEmittedStyle, { namespace: elementData.key, serializableData: styleData }, className));
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props }, elementData.key),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_server_css.InjectServerCSS, { collector: cssCollector, elementKey: elementData.key })
+    styleElements
   ] });
 }
 const getControlDefs = (state, elementData) => {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/runtimes/react/server/components/element-data.tsx"],"sourcesContent":["import { type ReactNode } from 'react'\n\nimport { partitionRecord } from '../../../../utils/partition'\n\nimport {\n  type State,\n  type ElementData,\n  getReactComponent,\n  getBreakpoints,\n  getComponentPropControllerDescriptors,\n} from '../../../../state/read-only-state'\n\nimport { FallbackComponent } from '../../../../components/shared/FallbackComponent'\nimport { isLegacyDescriptor } from '../../../../prop-controllers/descriptors'\n\nimport {\n  ServerCSSCollector,\n  createCollectingServerStylesheet,\n  InjectServerCSS,\n} from '../css/server-css'\nimport { type ServerRenderContext, getStore } from '../render-context'\nimport { resolveProps } from '../resolve-props'\n\nexport async function ServerElementData({\n  documentKey,\n  context,\n  elementData,\n  injectedProps,\n}: {\n  documentKey: string\n  context: ServerRenderContext\n  elementData: ElementData\n  injectedProps: Record<string, unknown>\n}): Promise<ReactNode> {\n  const state = getStore(context).getState()\n\n  const Component = getReactComponent(state, elementData.type)\n  if (Component == null) {\n    return (\n      <FallbackComponent\n        text=\"Component not found\"\n        details={`Unknown component '${elementData.type}'`}\n      />\n    )\n  }\n\n  const [legacyDescriptors, definitions] = getControlDefs(state, elementData)\n  const legacyKeys = Object.keys(legacyDescriptors)\n  if (legacyKeys.length > 0) {\n    console.warn(`Unexpected legacy control data in server element '${elementData.key}`, {\n      elementData,\n      legacyKeys,\n    })\n  }\n\n  const cssCollector = new ServerCSSCollector()\n  const stylesheet = createCollectingServerStylesheet(\n    cssCollector,\n    getBreakpoints(state),\n    elementData.key,\n  )\n\n  const props = {\n    ...(await resolveProps(context, elementData, documentKey, definitions, stylesheet)),\n    ...injectedProps,\n  }\n\n  return (\n    <>\n      {/* Make the component the first child so that `findDOMNode` resolves to its first\n        rendered DOM node (if any) rather than the component's `<style>` element */}\n      <Component key={elementData.key} {...props} />\n      <InjectServerCSS collector={cssCollector} elementKey={elementData.key} />\n    </>\n  )\n}\n\nconst getControlDefs = (state: State, elementData: ElementData) => {\n  const descriptors = getComponentPropControllerDescriptors(state, elementData.type) ?? {}\n  return partitionRecord(descriptors, isLegacyDescriptor)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAuCM;AArCN,uBAAgC;AAEhC,6BAMO;AAEP,+BAAkC;AAClC,yBAAmC;AAEnC,wBAIO;AACP,4BAAmD;AACnD,2BAA6B;AAE7B,eAAsB,kBAAkB;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKuB;AACrB,QAAM,YAAQ,gCAAS,OAAO,EAAE,SAAS;AAEzC,QAAM,gBAAY,0CAAkB,OAAO,YAAY,IAAI;AAC3D,MAAI,aAAa,MAAM;AACrB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS,sBAAsB,YAAY,IAAI;AAAA;AAAA,IACjD;AAAA,EAEJ;AAEA,QAAM,CAAC,mBAAmB,WAAW,IAAI,eAAe,OAAO,WAAW;AAC1E,QAAM,aAAa,OAAO,KAAK,iBAAiB;AAChD,MAAI,WAAW,SAAS,GAAG;AACzB,YAAQ,KAAK,qDAAqD,YAAY,GAAG,IAAI;AAAA,MACnF;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AAEA,QAAM,eAAe,IAAI,qCAAmB;AAC5C,QAAM,iBAAa;AAAA,IACjB;AAAA,QACA,uCAAe,KAAK;AAAA,IACpB,YAAY;AAAA,EACd;AAEA,QAAM,QAAQ;AAAA,IACZ,GAAI,UAAM,mCAAa,SAAS,aAAa,aAAa,aAAa,UAAU;AAAA,IACjF,GAAG;AAAA,EACL;AAEA,SACE,4EAGE;AAAA,gDAAC,aAAiC,GAAG,SAArB,YAAY,GAAgB;AAAA,IAC5C,4CAAC,qCAAgB,WAAW,cAAc,YAAY,YAAY,KAAK;AAAA,KACzE;AAEJ;AAEA,MAAM,iBAAiB,CAAC,OAAc,gBAA6B;AACjE,QAAM,kBAAc,8DAAsC,OAAO,YAAY,IAAI,KAAK,CAAC;AACvF,aAAO,kCAAgB,aAAa,qCAAkB;AACxD;","names":[]}
+{"version":3,"sources":["../../../../../../src/runtimes/react/server/components/element-data.tsx"],"sourcesContent":["import { type ReactNode } from 'react'\n\nimport { partitionRecord } from '../../../../utils/partition'\n\nimport {\n  type State,\n  type ElementData,\n  getReactComponent,\n  getBreakpoints,\n  getComponentPropControllerDescriptors,\n} from '../../../../state/read-only-state'\n\nimport { FallbackComponent } from '../../../../components/shared/FallbackComponent'\nimport { isLegacyDescriptor } from '../../../../prop-controllers/descriptors'\n\nimport { type ServerRenderContext, getStore } from '../render-context'\nimport { resolveProps } from '../resolve-props'\nimport { StylesheetEngine } from '../../css-runtime/stylesheet-engine'\nimport { type ControlledStyleData } from '../../css-runtime/types'\nimport { RSCEmittedStyle } from '../../css-runtime/components/rsc-emitted-style'\n\nexport async function ServerElementData({\n  documentKey,\n  context,\n  elementData,\n  injectedProps,\n}: {\n  documentKey: string\n  context: ServerRenderContext\n  elementData: ElementData\n  injectedProps: Record<string, unknown>\n}): Promise<ReactNode> {\n  const state = getStore(context).getState()\n\n  const Component = getReactComponent(state, elementData.type)\n  if (Component == null) {\n    return (\n      <FallbackComponent\n        text=\"Component not found\"\n        details={`Unknown component '${elementData.type}'`}\n      />\n    )\n  }\n\n  const [legacyDescriptors, definitions] = getControlDefs(state, elementData)\n  const legacyKeys = Object.keys(legacyDescriptors)\n  if (legacyKeys.length > 0) {\n    console.warn(`Unexpected legacy control data in server element '${elementData.key}`, {\n      elementData,\n      legacyKeys,\n    })\n  }\n\n  const classStyleData = new Map<string, ControlledStyleData>()\n  const stylesheet = new StylesheetEngine({\n    breakpointsData: getBreakpoints(state),\n    classNamePrefix: context.rootStyleProps?.classNamePrefix,\n    documentKey,\n    elementKey: elementData.key,\n    propPathComponents: [],\n    onDefineStyle: styleData => {\n      const { onBoxModelChange, ...serializableStyleData } = styleData\n      classStyleData.set(styleData.className, serializableStyleData)\n    },\n  })\n\n  const props = {\n    ...(await resolveProps(context, elementData, documentKey, definitions, stylesheet)),\n    ...injectedProps,\n  }\n\n  const styleElements = Array.from(classStyleData, ([className, styleData]) => (\n    <RSCEmittedStyle key={className} namespace={elementData.key} serializableData={styleData} />\n  ))\n\n  return (\n    <>\n      {/* Make the component the first child so that `findDOMNode` resolves to its first\n        rendered DOM node (if any) rather than the component's `<style>` element */}\n      <Component key={elementData.key} {...props} />\n      {styleElements}\n    </>\n  )\n}\n\nconst getControlDefs = (state: State, elementData: ElementData) => {\n  const descriptors = getComponentPropControllerDescriptors(state, elementData.type) ?? {}\n  return partitionRecord(descriptors, isLegacyDescriptor)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAqCM;AAnCN,uBAAgC;AAEhC,6BAMO;AAEP,+BAAkC;AAClC,yBAAmC;AAEnC,4BAAmD;AACnD,2BAA6B;AAC7B,+BAAiC;AAEjC,+BAAgC;AAEhC,eAAsB,kBAAkB;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKuB;AACrB,QAAM,YAAQ,gCAAS,OAAO,EAAE,SAAS;AAEzC,QAAM,gBAAY,0CAAkB,OAAO,YAAY,IAAI;AAC3D,MAAI,aAAa,MAAM;AACrB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS,sBAAsB,YAAY,IAAI;AAAA;AAAA,IACjD;AAAA,EAEJ;AAEA,QAAM,CAAC,mBAAmB,WAAW,IAAI,eAAe,OAAO,WAAW;AAC1E,QAAM,aAAa,OAAO,KAAK,iBAAiB;AAChD,MAAI,WAAW,SAAS,GAAG;AACzB,YAAQ,KAAK,qDAAqD,YAAY,GAAG,IAAI;AAAA,MACnF;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AAEA,QAAM,iBAAiB,oBAAI,IAAiC;AAC5D,QAAM,aAAa,IAAI,0CAAiB;AAAA,IACtC,qBAAiB,uCAAe,KAAK;AAAA,IACrC,iBAAiB,QAAQ,gBAAgB;AAAA,IACzC;AAAA,IACA,YAAY,YAAY;AAAA,IACxB,oBAAoB,CAAC;AAAA,IACrB,eAAe,eAAa;AAC1B,YAAM,EAAE,kBAAkB,GAAG,sBAAsB,IAAI;AACvD,qBAAe,IAAI,UAAU,WAAW,qBAAqB;AAAA,IAC/D;AAAA,EACF,CAAC;AAED,QAAM,QAAQ;AAAA,IACZ,GAAI,UAAM,mCAAa,SAAS,aAAa,aAAa,aAAa,UAAU;AAAA,IACjF,GAAG;AAAA,EACL;AAEA,QAAM,gBAAgB,MAAM,KAAK,gBAAgB,CAAC,CAAC,WAAW,SAAS,MACrE,4CAAC,4CAAgC,WAAW,YAAY,KAAK,kBAAkB,aAAzD,SAAoE,CAC3F;AAED,SACE,4EAGE;AAAA,gDAAC,aAAiC,GAAG,SAArB,YAAY,GAAgB;AAAA,IAC3C;AAAA,KACH;AAEJ;AAEA,MAAM,iBAAiB,CAAC,OAAc,gBAA6B;AACjE,QAAM,kBAAc,8DAAsC,OAAO,YAAY,IAAI,KAAK,CAAC;AACvF,aAAO,kCAAgB,aAAa,qCAAkB;AACxD;","names":[]}

package/dist/cjs/runtimes/react/server/components/server-elements-cache.js

@@ -26,7 +26,6 @@ __export(server_elements_cache_exports, {
 module.exports = __toCommonJS(server_elements_cache_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-var import_client_css = require("../css/client-css");
 const Context = (0, import_react.createContext)({
   getElement: () => null,
   updateElement: () => {
@@ -66,7 +65,7 @@ const ServerElementsCache = ({
 const ServerElementsProvider = ({
   children,
   elements
-}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ServerElementsCache, { value: elements, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_client_css.ClientCSSProvider, { children }) });
+}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ServerElementsCache, { value: elements, children });
 const useServerElementsCache = () => (0, import_react.useContext)(Context);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/runtimes/react/server/components/server-elements-cache.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/runtimes/react/server/components/server-elements-cache.tsx"],"sourcesContent":["'use client'\n\nimport { createContext, ReactNode, useCallback, useContext, useState, useMemo } from 'react'\n\nimport { type ElementsMap } from '../collect-server-elements'\nimport { ClientCSSProvider } from '../css/client-css'\n\ntype ContextValue = {\n  getElement: (elementKey: string) => ReactNode\n  updateElement: (elementKey: string, node: ReactNode) => void\n  removeElement: (elementKey: string) => void\n}\n\nconst Context = createContext<ContextValue>({\n  getElement: () => null,\n  updateElement: () => {},\n  removeElement: () => {},\n})\n\n/**\n * Client-side \"cache\" of server-rendered elements; this is one of the key pieces in our RSC\n * implementation, with React doing the majority of the heavy lifting: when `ReactNode`s are\n * passed as props across a 'use client' boundary, React's flight serializer automatically\n * renders and encodes them in the RSC stream and then reconstructs them on the client. All\n * we need to do on the client is to make these React elements available for lookup/\n * manipulation when editing in the builder.\n */\nexport const ServerElementsCache = ({\n  children,\n  value,\n}: {\n  children: ReactNode\n  value: ElementsMap\n}) => {\n  // An RSC re-render does not inherently remount client components; React can reconcile\n  // the new server tree with the existing client tree, so we need to handle the `value`\n  // prop updates\n  const [nodes, setNodes] = useState(value)\n  const [previousValue, setPreviousValue] = useState(value)\n\n  // this is okay to do on render, see https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes\n  if (value !== previousValue) {\n    setPreviousValue(value)\n    setNodes(value)\n  }\n\n  const getElement = useCallback((elementKey: string): ReactNode => nodes.get(elementKey), [nodes])\n\n  const updateElement = useCallback(\n    (elementKey: string, node: ReactNode) => setNodes(prev => new Map(prev).set(elementKey, node)),\n    [],\n  )\n\n  const removeElement = useCallback(\n    (elementKey: string) =>\n      setNodes(prev => {\n        const next = new Map(prev)\n        next.delete(elementKey)\n        return next\n      }),\n    [],\n  )\n\n  const cache = useMemo(\n    () => ({ getElement, updateElement, removeElement }),\n    [getElement, updateElement, removeElement],\n  )\n\n  return <Context.Provider value={cache}>{children}</Context.Provider>\n}\n\nexport const ServerElementsProvider = ({\n  children,\n  elements,\n}: {\n  children: ReactNode\n  elements: ElementsMap\n}) => (\n  <ServerElementsCache value={elements}>\n    <ClientCSSProvider>{children}</ClientCSSProvider>\n  </ServerElementsCache>\n)\n\nexport const useServerElementsCache = () => useContext(Context)\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoES;AAlET,mBAAqF;AAGrF,wBAAkC;AAQlC,MAAM,cAAU,4BAA4B;AAAA,EAC1C,YAAY,MAAM;AAAA,EAClB,eAAe,MAAM;AAAA,EAAC;AAAA,EACtB,eAAe,MAAM;AAAA,EAAC;AACxB,CAAC;AAUM,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AACF,MAGM;AAIJ,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,KAAK;AACxC,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,KAAK;AAGxD,MAAI,UAAU,eAAe;AAC3B,qBAAiB,KAAK;AACtB,aAAS,KAAK;AAAA,EAChB;AAEA,QAAM,iBAAa,0BAAY,CAAC,eAAkC,MAAM,IAAI,UAAU,GAAG,CAAC,KAAK,CAAC;AAEhG,QAAM,oBAAgB;AAAA,IACpB,CAAC,YAAoB,SAAoB,SAAS,UAAQ,IAAI,IAAI,IAAI,EAAE,IAAI,YAAY,IAAI,CAAC;AAAA,IAC7F,CAAC;AAAA,EACH;AAEA,QAAM,oBAAgB;AAAA,IACpB,CAAC,eACC,SAAS,UAAQ;AACf,YAAM,OAAO,IAAI,IAAI,IAAI;AACzB,WAAK,OAAO,UAAU;AACtB,aAAO;AAAA,IACT,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AAEA,QAAM,YAAQ;AAAA,IACZ,OAAO,EAAE,YAAY,eAAe,cAAc;AAAA,IAClD,CAAC,YAAY,eAAe,aAAa;AAAA,EAC3C;AAEA,SAAO,4CAAC,QAAQ,UAAR,EAAiB,OAAO,OAAQ,UAAS;AACnD;AAEO,MAAM,yBAAyB,CAAC;AAAA,EACrC;AAAA,EACA;AACF,MAIE,4CAAC,uBAAoB,OAAO,UAC1B,sDAAC,uCAAmB,UAAS,GAC/B;AAGK,MAAM,yBAAyB,UAAM,yBAAW,OAAO;","names":[]}
+{"version":3,"sources":["../../../../../../src/runtimes/react/server/components/server-elements-cache.tsx"],"sourcesContent":["'use client'\n\nimport { createContext, ReactNode, useCallback, useContext, useState, useMemo } from 'react'\n\nimport { type ElementsMap } from '../collect-server-elements'\n\ntype ContextValue = {\n  getElement: (elementKey: string) => ReactNode\n  updateElement: (elementKey: string, node: ReactNode) => void\n  removeElement: (elementKey: string) => void\n}\n\nconst Context = createContext<ContextValue>({\n  getElement: () => null,\n  updateElement: () => {},\n  removeElement: () => {},\n})\n\n/**\n * Client-side \"cache\" of server-rendered elements; this is one of the key pieces in our RSC\n * implementation, with React doing the majority of the heavy lifting: when `ReactNode`s are\n * passed as props across a 'use client' boundary, React's flight serializer automatically\n * renders and encodes them in the RSC stream and then reconstructs them on the client. All\n * we need to do on the client is to make these React elements available for lookup/\n * manipulation when editing in the builder.\n */\nexport const ServerElementsCache = ({\n  children,\n  value,\n}: {\n  children: ReactNode\n  value: ElementsMap\n}) => {\n  // An RSC re-render does not inherently remount client components; React can reconcile\n  // the new server tree with the existing client tree, so we need to handle the `value`\n  // prop updates\n  const [nodes, setNodes] = useState(value)\n  const [previousValue, setPreviousValue] = useState(value)\n\n  // this is okay to do on render, see https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes\n  if (value !== previousValue) {\n    setPreviousValue(value)\n    setNodes(value)\n  }\n\n  const getElement = useCallback((elementKey: string): ReactNode => nodes.get(elementKey), [nodes])\n\n  const updateElement = useCallback(\n    (elementKey: string, node: ReactNode) => setNodes(prev => new Map(prev).set(elementKey, node)),\n    [],\n  )\n\n  const removeElement = useCallback(\n    (elementKey: string) =>\n      setNodes(prev => {\n        const next = new Map(prev)\n        next.delete(elementKey)\n        return next\n      }),\n    [],\n  )\n\n  const cache = useMemo(\n    () => ({ getElement, updateElement, removeElement }),\n    [getElement, updateElement, removeElement],\n  )\n\n  return <Context.Provider value={cache}>{children}</Context.Provider>\n}\n\nexport const ServerElementsProvider = ({\n  children,\n  elements,\n}: {\n  children: ReactNode\n  elements: ElementsMap\n}) => <ServerElementsCache value={elements}>{children}</ServerElementsCache>\n\nexport const useServerElementsCache = () => useContext(Context)\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmES;AAjET,mBAAqF;AAUrF,MAAM,cAAU,4BAA4B;AAAA,EAC1C,YAAY,MAAM;AAAA,EAClB,eAAe,MAAM;AAAA,EAAC;AAAA,EACtB,eAAe,MAAM;AAAA,EAAC;AACxB,CAAC;AAUM,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AACF,MAGM;AAIJ,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,KAAK;AACxC,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,KAAK;AAGxD,MAAI,UAAU,eAAe;AAC3B,qBAAiB,KAAK;AACtB,aAAS,KAAK;AAAA,EAChB;AAEA,QAAM,iBAAa,0BAAY,CAAC,eAAkC,MAAM,IAAI,UAAU,GAAG,CAAC,KAAK,CAAC;AAEhG,QAAM,oBAAgB;AAAA,IACpB,CAAC,YAAoB,SAAoB,SAAS,UAAQ,IAAI,IAAI,IAAI,EAAE,IAAI,YAAY,IAAI,CAAC;AAAA,IAC7F,CAAC;AAAA,EACH;AAEA,QAAM,oBAAgB;AAAA,IACpB,CAAC,eACC,SAAS,UAAQ;AACf,YAAM,OAAO,IAAI,IAAI,IAAI;AACzB,WAAK,OAAO,UAAU;AACtB,aAAO;AAAA,IACT,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AAEA,QAAM,YAAQ;AAAA,IACZ,OAAO,EAAE,YAAY,eAAe,cAAc;AAAA,IAClD,CAAC,YAAY,eAAe,aAAa;AAAA,EAC3C;AAEA,SAAO,4CAAC,QAAQ,UAAR,EAAiB,OAAO,OAAQ,UAAS;AACnD;AAEO,MAAM,yBAAyB,CAAC;AAAA,EACrC;AAAA,EACA;AACF,MAGM,4CAAC,uBAAoB,OAAO,UAAW,UAAS;AAE/C,MAAM,yBAAyB,UAAM,yBAAW,OAAO;","names":[]}

package/dist/cjs/runtimes/react/server/index.js

@@ -22,7 +22,6 @@ __export(server_exports, {
   RSCElementRenderer: () => import_renderer.RSCElementRenderer,
   RenderContext: () => import_render_context.RenderContext,
   RenderElementPayload: () => import_render_element_payload.RenderElementPayload,
-  ServerCSSCollector: () => import_server_css.ServerCSSCollector,
   ServerElement: () => import_element.ServerElement,
   Slot: () => import_slot.Slot,
   collectServerElements: () => import_collect_server_elements.collectServerElements,
@@ -35,7 +34,6 @@ var import_element = require("./components/element");
 var import_makeswift_component = require("./components/makeswift-component");
 var import_slot = require("./components/slot");
 var import_renderer = require("./components/renderer");
-var import_server_css = require("./css/server-css");
 var import_render_context = require("./render-context");
 var import_render_element_payload = require("./render-element-payload");
 // Annotate the CommonJS export names for ESM import in node:
@@ -44,7 +42,6 @@ var import_render_element_payload = require("./render-element-payload");
   RSCElementRenderer,
   RenderContext,
   RenderElementPayload,
-  ServerCSSCollector,
   ServerElement,
   Slot,
   collectServerElements,

package/dist/cjs/runtimes/react/server/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/server/index.ts"],"sourcesContent":["export { collectServerElements } from './collect-server-elements'\nexport { ServerElement } from './components/element'\nexport { MakeswiftComponent } from './components/makeswift-component'\nexport { Slot } from './components/slot'\nexport { RSCElementRenderer } from './components/renderer'\nexport { ServerCSSCollector } from './css/server-css'\nexport {\n  type ServerRenderContext,\n  RenderContext,\n  setRenderContext,\n  getRenderContext,\n} from './render-context'\nexport { RenderElementPayload } from './render-element-payload'\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qCAAsC;AACtC,qBAA8B;AAC9B,iCAAmC;AACnC,kBAAqB;AACrB,sBAAmC;AACnC,wBAAmC;AACnC,4BAKO;AACP,oCAAqC;","names":[]}
+{"version":3,"sources":["../../../../../src/runtimes/react/server/index.ts"],"sourcesContent":["export { collectServerElements } from './collect-server-elements'\nexport { ServerElement } from './components/element'\nexport { MakeswiftComponent } from './components/makeswift-component'\nexport { Slot } from './components/slot'\nexport { RSCElementRenderer } from './components/renderer'\nexport {\n  type ServerRenderContext,\n  RenderContext,\n  setRenderContext,\n  getRenderContext,\n} from './render-context'\nexport { RenderElementPayload } from './render-element-payload'\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qCAAsC;AACtC,qBAA8B;AAC9B,iCAAmC;AACnC,kBAAqB;AACrB,sBAAmC;AACnC,4BAKO;AACP,oCAAqC;","names":[]}

package/dist/cjs/runtimes/react/server/render-context.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/server/render-context.tsx"],"sourcesContent":["import { cache, type PropsWithChildren } from 'react'\n\nimport { ReactRuntime } from '../../react/react-runtime'\nimport { type Store } from '../../../state/store'\n\nimport { type SiteVersion } from '../../../api/site-version'\nimport { MakeswiftClient } from '../../../client'\n\n/**\n * Request-scoped dependencies used to render Makeswift server elements.\n *\n * Framework integrations create a context for each request and install it with\n * `RenderContext` or `setRenderContext` so nested renderers can access it without\n * threading it through every component. The runtime must be request-bound;\n * together with `siteVersion` and `locale`, it selects the store and API resource\n * cache used during rendering.\n */\nexport type ServerRenderContext = {\n  request: Request\n  runtime: ReactRuntime\n  client: MakeswiftClient\n  siteVersion: SiteVersion | null\n  locale: string | undefined\n  store: Store\n}\n\nconst requestContext = cache((): { current?: ServerRenderContext } => ({}))\n\nexport const setRenderContext = (context: ServerRenderContext) => {\n  requestContext().current = context\n}\n\nexport const getRenderContext = (): ServerRenderContext => {\n  const context = requestContext().current\n  if (!context) throw Error('Makeswift render context was not set.')\n  return context\n}\n\nexport const getStore = ({ store }: ServerRenderContext): Store => store\n\nexport const RenderContext = ({\n  context,\n  children,\n}: PropsWithChildren<{ context: ServerRenderContext }>) => {\n  setRenderContext(context)\n  return children\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA8C;AA0B9C,MAAM,qBAAiB,oBAAM,OAA0C,CAAC,EAAE;AAEnE,MAAM,mBAAmB,CAAC,YAAiC;AAChE,iBAAe,EAAE,UAAU;AAC7B;AAEO,MAAM,mBAAmB,MAA2B;AACzD,QAAM,UAAU,eAAe,EAAE;AACjC,MAAI,CAAC;AAAS,UAAM,MAAM,uCAAuC;AACjE,SAAO;AACT;AAEO,MAAM,WAAW,CAAC,EAAE,MAAM,MAAkC;AAE5D,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AACF,MAA2D;AACzD,mBAAiB,OAAO;AACxB,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../../../../src/runtimes/react/server/render-context.tsx"],"sourcesContent":["import { cache, type PropsWithChildren } from 'react'\n\nimport { ReactRuntime } from '../../react/react-runtime'\nimport { type Store } from '../../../state/store'\n\nimport { type SiteVersion } from '../../../api/site-version'\nimport { MakeswiftClient } from '../../../client'\nimport { type RootStyleProps } from '../root-style-registry'\n\n/**\n * Request-scoped dependencies used to render Makeswift server elements.\n *\n * Framework integrations create a context for each request and install it with\n * `RenderContext` or `setRenderContext` so nested renderers can access it without\n * threading it through every component. The runtime must be request-bound;\n * together with `siteVersion` and `locale`, it selects the store and API resource\n * cache used during rendering.\n */\nexport type ServerRenderContext = {\n  request: Request\n  runtime: ReactRuntime\n  client: MakeswiftClient\n  siteVersion: SiteVersion | null\n  locale: string | undefined\n  store: Store\n  rootStyleProps?: RootStyleProps\n}\n\nconst requestContext = cache((): { current?: ServerRenderContext } => ({}))\n\nexport const setRenderContext = (context: ServerRenderContext) => {\n  requestContext().current = context\n}\n\nexport const getRenderContext = (): ServerRenderContext => {\n  const context = requestContext().current\n  if (!context) throw Error('Makeswift render context was not set.')\n  return context\n}\n\nexport const getStore = ({ store }: ServerRenderContext): Store => store\n\nexport const RenderContext = ({\n  context,\n  children,\n}: PropsWithChildren<{ context: ServerRenderContext }>) => {\n  setRenderContext(context)\n  return children\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA8C;AA4B9C,MAAM,qBAAiB,oBAAM,OAA0C,CAAC,EAAE;AAEnE,MAAM,mBAAmB,CAAC,YAAiC;AAChE,iBAAe,EAAE,UAAU;AAC7B;AAEO,MAAM,mBAAmB,MAA2B;AACzD,QAAM,UAAU,eAAe,EAAE;AACjC,MAAI,CAAC;AAAS,UAAM,MAAM,uCAAuC;AACjE,SAAO;AACT;AAEO,MAAM,WAAW,CAAC,EAAE,MAAM,MAAkC;AAE5D,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AACF,MAA2D;AACzD,mBAAiB,OAAO;AACxB,SAAO;AACT;","names":[]}

package/dist/cjs/slate/BlockPlugin/index.js

@@ -36,7 +36,6 @@ __export(BlockPlugin_exports, {
 });
 module.exports = __toCommonJS(BlockPlugin_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_css = require("@emotion/css");
 var import_slate = require("slate");
 var import_controls = require("@makeswift/controls");
 var import_setBlockKeyForDevice = require("./setBlockKeyForDevice");
@@ -54,9 +53,10 @@ var import_toggleList = require("./toggleList");
 var import_editor = require("../utils/editor");
 var import_is_hotkey = __toESM(require("is-hotkey"));
 var import_constants = require("./constants");
-var import_use_style = require("../../runtimes/react/use-style");
 var import_plugin = require("../../controls/rich-text-v2/plugin");
 var import_types = require("../../slate/types");
+var import_use_style = require("../../runtimes/react/css-runtime/hooks/use-style");
+var import_clsx = __toESM(require("clsx"));
 const BlockActions = {
   setBlockKeyForDevice: import_setBlockKeyForDevice.setBlockKeyForDevice,
   clearBlockKeyForDevice: import_clearBlockKeyForDevice.clearBlockKeyForDevice,
@@ -302,14 +302,17 @@ function BlockPluginComponent({
   renderElement,
   ...props
 }) {
-  const blockStyles = [(0, import_use_style.useStyle)({ margin: 0 }), props.element.className];
-  const quoteStyles = (0, import_use_style.useStyle)({
+  const { className: blockStylesClassName, styleElement: blockStylesStyleElement } = (0, import_use_style.useStyle)({
+    margin: 0
+  });
+  const quoteStyles = {
     padding: "0.5em 10px",
     fontSize: "1.25em",
     fontWeight: "300",
     borderLeft: "5px solid rgba(0, 0, 0, 0.1)"
-  });
-  const unorderedListStyles = (0, import_use_style.useStyle)({
+  };
+  const { className: quoteStylesClassName, styleElement: quoteStylesStyleElement } = (0, import_use_style.useStyle)(quoteStyles);
+  const unorderedListStyles = {
     listStylePosition: "inside",
     paddingInlineStart: "20px",
     listStyleType: "disc",
@@ -319,38 +322,115 @@ function BlockPluginComponent({
     "ul ul": {
       listStyleType: "square"
     }
-  });
-  const orderedListStyles = (0, import_use_style.useStyle)({
+  };
+  const { className: unorderedListStylesClassName, styleElement: unorderedListStyleElement } = (0, import_use_style.useStyle)(unorderedListStyles);
+  const orderedListStyles = {
     listStylePosition: "inside",
     paddingInlineStart: "20px",
     listStyleType: "decimal"
-  });
+  };
+  const { className: orderedListStylesClassName, styleElement: orderedListStyleElement } = (0, import_use_style.useStyle)(orderedListStyles);
   switch (props.element.type) {
     case import_types.BlockType.Default:
     case import_types.BlockType.Paragraph:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { ...props.attributes, className: (0, import_css.cx)(...blockStyles), children: renderElement(props) });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { ...props.attributes, className: (0, import_clsx.default)(blockStylesClassName, props.element.className), children: renderElement(props) })
+      ] });
     case import_types.BlockType.Heading1:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { ...props.attributes, className: (0, import_css.cx)(...blockStyles), children: renderElement(props) });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { ...props.attributes, className: (0, import_clsx.default)(blockStylesClassName, props.element.className), children: renderElement(props) })
+      ] });
     case import_types.BlockType.Heading2:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { ...props.attributes, className: (0, import_css.cx)(...blockStyles), children: renderElement(props) });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { ...props.attributes, className: (0, import_clsx.default)(blockStylesClassName, props.element.className), children: renderElement(props) })
+      ] });
     case import_types.BlockType.Heading3:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { ...props.attributes, className: (0, import_css.cx)(...blockStyles), children: renderElement(props) });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { ...props.attributes, className: (0, import_clsx.default)(blockStylesClassName, props.element.className), children: renderElement(props) })
+      ] });
     case import_types.BlockType.Heading4:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h4", { ...props.attributes, className: (0, import_css.cx)(...blockStyles), children: renderElement(props) });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h4", { ...props.attributes, className: (0, import_clsx.default)(blockStylesClassName, props.element.className), children: renderElement(props) })
+      ] });
     case import_types.BlockType.Heading5:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h5", { ...props.attributes, className: (0, import_css.cx)(...blockStyles), children: renderElement(props) });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h5", { ...props.attributes, className: (0, import_clsx.default)(blockStylesClassName, props.element.className), children: renderElement(props) })
+      ] });
     case import_types.BlockType.Heading6:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h6", { ...props.attributes, className: (0, import_css.cx)(...blockStyles), children: renderElement(props) });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h6", { ...props.attributes, className: (0, import_clsx.default)(blockStylesClassName, props.element.className), children: renderElement(props) })
+      ] });
     case import_types.BlockType.BlockQuote:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("blockquote", { ...props.attributes, className: (0, import_css.cx)(...blockStyles, quoteStyles), children: renderElement(props) });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        blockStylesStyleElement,
+        quoteStylesStyleElement,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "blockquote",
+          {
+            ...props.attributes,
+            className: (0, import_clsx.default)(blockStylesClassName, quoteStylesClassName, props.element.className),
+            children: renderElement(props)
+          }
+        )
+      ] });
     case import_types.BlockType.OrderedList:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", { ...props.attributes, className: (0, import_css.cx)(...blockStyles, orderedListStyles), children: renderElement(props) });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        blockStylesStyleElement,
+        orderedListStyleElement,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "ol",
+          {
+            ...props.attributes,
+            className: (0, import_clsx.default)(
+              blockStylesClassName,
+              orderedListStylesClassName,
+              props.element.className
+            ),
+            children: renderElement(props)
+          }
+        )
+      ] });
     case import_types.BlockType.UnorderedList:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { ...props.attributes, className: (0, import_css.cx)(...blockStyles, unorderedListStyles), children: renderElement(props) });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        blockStylesStyleElement,
+        unorderedListStyleElement,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "ul",
+          {
+            ...props.attributes,
+            className: (0, import_clsx.default)(
+              blockStylesClassName,
+              unorderedListStylesClassName,
+              props.element.className
+            ),
+            children: renderElement(props)
+          }
+        )
+      ] });
     case import_types.BlockType.ListItem:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { ...props.attributes, className: (0, import_css.cx)(...blockStyles), children: renderElement(props) });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { ...props.attributes, className: (0, import_clsx.default)(blockStylesClassName, props.element.className), children: renderElement(props) })
+      ] });
     case import_types.BlockType.ListItemChild:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ...props.attributes, className: (0, import_css.cx)(...blockStyles), children: renderElement(props) });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            ...props.attributes,
+            className: (0, import_clsx.default)(blockStylesClassName, props.element.className),
+            children: renderElement(props)
+          }
+        )
+      ] });
     default:
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: renderElement(props) });
   }