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

package/dist/cjs/runtimes/react/components/page/PageHead.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/runtimes/react/components/page/PageHead.tsx"],"sourcesContent":["import { useMemo, useSyncExternalStore, ReactNode } from 'react'\n\nimport { type MakeswiftPageDocument } from '../../../../client'\nimport { type Site } from '../../../../api'\n\nimport { useApiResourcesClient } from '../../hooks/use-api-resources-client'\nimport { useFrameworkContext } from '../hooks/use-framework-context'\nimport { useIsInBuilder } from '../../hooks/use-is-in-builder'\nimport { usePageSnippets } from '../hooks/use-page-snippets'\n\nimport { PageTitle, PageMeta, PageLink, PageStyle } from './head-tags'\nimport { type PageMetadataSettings } from './page-seo-settings'\n\nconst defaultFavicon = {\n  id: 'default-favicon',\n  mimetype: 'image/png',\n  publicUrl:\n    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAACXBIWXMAABcRAAAXEQHKJvM/AAABjElEQVRYhc2XzU3EMBCFB8TddAAXn6EE6GCpgNABZ1/IXnymBOgAOmA7YM8+ABVsXEHQQFaKQryeN3Yk3ilKJtEnv/nLUd/3pFG0riGi88yrnQn+UfJ5FUi0riWiB2H4nQn+KRd0DFP8agXEfkqCYJBoHdtxIQxfm+DfFgEhoith3NYE30o/qgGR2BJB+xY7kdYEL8oNFUi0jiFMJuxVWrJqEMFxsyUNCsE6AeNztvBp7aJ143vXksoRnwhYtmNdSoIQa6RlO9YXEWW7KgoCleOgxgTf1QZBT+RZ2lXFING6UxCCq+ceeUE8fYdknY599v9sJvzGBP+yCEgC7GPmETc0OJ+0awAlkhe2pAbIXAeFZ8xe2g2Nk3c3ub0xwWt6zY9qbmiqGVMbZK21ZC/YmhlbeBMTzZNDQqcvDb1kM1x32iqZSt1HaqukfKvq34BAOTLsrH+ETNmUkKHHA+428RgeclPVWozeSyAI2EdWB34jtqXNTAySOY3i/KgFIlqOa4GkFmBegorzg4joG07he/M7zl6jAAAAAElFTkSuQmCC',\n}\n\ntype Props = {\n  document: MakeswiftPageDocument\n  metadata?: PageMetadataSettings\n}\n\nexport function PageHead({ document: page, metadata = {} }: Props): ReactNode {\n  const {\n    title: useTitle = false,\n    favicon: useFavicon = false,\n    canonicalUrl: useCanonicalUrl = false,\n    indexingBlocked: useIndexingBlocked = false,\n    description: useDescription = false,\n    keywords: useKeywords = false,\n    socialImage: useSocialImage = false,\n  } = metadata\n\n  const { headSnippets } = usePageSnippets({ page })\n  const { HeadSnippet } = useFrameworkContext()\n\n  const isInBuilder = useIsInBuilder()\n\n  const site = useCachedSite(isInBuilder ? page.site.id : null)\n  const baseLocalizedPage = page.localizedPages.find(({ parentId }) => parentId == null)\n\n  const favicon = page.meta.favicon ?? defaultFavicon\n  const title = baseLocalizedPage?.meta.title ?? page.meta.title\n  const description = baseLocalizedPage?.meta.description ?? page.meta.description\n  const keywords = baseLocalizedPage?.meta.keywords ?? page.meta.keywords\n  const socialImage = baseLocalizedPage?.meta.socialImage ?? page.meta.socialImage\n  const canonicalUrl = baseLocalizedPage?.seo.canonicalUrl ?? page.seo.canonicalUrl\n  const isIndexingBlocked = baseLocalizedPage?.seo.isIndexingBlocked ?? page.seo.isIndexingBlocked\n\n  const fontFamilyParamValue = useMemo(() => {\n    if (site == null) {\n      return page.fonts\n        .map(({ family, variants }) => {\n          return `${family.replace(/ /g, '+')}:${variants.join()}`\n        })\n        .join('|')\n    }\n\n    return site.googleFonts.edges\n      .filter((edge): edge is NonNullable<typeof edge> => edge != null)\n      .map(({ activeVariants, node: { family, variants } }) => {\n        const activeVariantSpecifiers = variants\n          .filter(variant =>\n            activeVariants.some(activeVariant => activeVariant.specifier === variant.specifier),\n          )\n          .map(variant => variant.specifier)\n          .join()\n\n        return `${family.replace(/ /g, '+')}:${activeVariantSpecifiers}`\n      })\n      .join('|')\n  }, [site, page])\n\n  return (\n    <>\n      <PageStyle precedence=\"high\" href=\"makeswift-base-styles\">\n        {`\n        html {\n            font-family: sans-serif;\n        }\n        div#__next {\n            overflow: hidden;\n        }\n        `}\n      </PageStyle>\n      {useTitle && title && (\n        <>\n          <PageTitle>{title}</PageTitle>\n          <PageMeta property=\"og:title\" content={title} />\n          <PageMeta name=\"twitter:title\" content={title} />\n        </>\n      )}\n      {useFavicon && favicon && (\n        <PageLink rel=\"icon\" type={favicon.mimetype} href={favicon.publicUrl} />\n      )}\n      {useCanonicalUrl && canonicalUrl && <PageLink rel=\"canonical\" href={canonicalUrl} />}\n      {useIndexingBlocked && isIndexingBlocked && <PageMeta name=\"robots\" content=\"noindex\" />}\n      {useDescription && description && (\n        <>\n          <PageMeta name=\"description\" content={description} />\n          <PageMeta property=\"og:description\" content={description} />\n          <PageMeta name=\"twitter:description\" content={description} />\n        </>\n      )}\n      {useKeywords && keywords && <PageMeta name=\"keywords\" content={keywords} />}\n      {useSocialImage && socialImage && (\n        <>\n          <PageMeta property=\"og:image\" content={socialImage.publicUrl} />\n          <PageMeta property=\"og:image:type\" content={socialImage.mimetype} />\n          <PageMeta name=\"twitter:image\" content={socialImage.publicUrl} />\n          <PageMeta name=\"twitter:card\" content=\"summary_large_image\" />\n        </>\n      )}\n      {fontFamilyParamValue !== '' && (\n        <PageLink\n          precedence=\"medium\"\n          rel=\"stylesheet\"\n          href={`https://fonts.googleapis.com/css?family=${fontFamilyParamValue}&display=swap`}\n        />\n      )}\n      {headSnippets.map(snippet => (\n        <HeadSnippet key={snippet.id} snippet={snippet} />\n      ))}\n    </>\n  )\n}\n\nfunction useCachedSite(siteId: string | null): Site | null {\n  const client = useApiResourcesClient()\n  const getSnapshot = () => (siteId == null ? null : client.readSite(siteId))\n\n  const site = useSyncExternalStore(client.subscribe, getSnapshot, getSnapshot)\n\n  return site\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../../../src/runtimes/react/components/page/PageHead.tsx"],"sourcesContent":["import { useMemo, useSyncExternalStore, ReactNode } from 'react'\n\nimport { type MakeswiftPageDocument } from '../../../../client'\nimport { type Site } from '../../../../api'\n\nimport { useApiResourcesClient } from '../../hooks/use-api-resources-client'\nimport { useFrameworkContext } from '../hooks/use-framework-context'\nimport { useIsInBuilder } from '../../hooks/use-is-in-builder'\nimport { usePageSnippets } from '../hooks/use-page-snippets'\n\nimport { PageTitle, PageMeta, PageLink } from './head-tags'\nimport { type PageMetadataSettings } from './page-seo-settings'\n\nconst defaultFavicon = {\n  id: 'default-favicon',\n  mimetype: 'image/png',\n  publicUrl:\n    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAACXBIWXMAABcRAAAXEQHKJvM/AAABjElEQVRYhc2XzU3EMBCFB8TddAAXn6EE6GCpgNABZ1/IXnymBOgAOmA7YM8+ABVsXEHQQFaKQryeN3Yk3ilKJtEnv/nLUd/3pFG0riGi88yrnQn+UfJ5FUi0riWiB2H4nQn+KRd0DFP8agXEfkqCYJBoHdtxIQxfm+DfFgEhoith3NYE30o/qgGR2BJB+xY7kdYEL8oNFUi0jiFMJuxVWrJqEMFxsyUNCsE6AeNztvBp7aJ143vXksoRnwhYtmNdSoIQa6RlO9YXEWW7KgoCleOgxgTf1QZBT+RZ2lXFING6UxCCq+ceeUE8fYdknY599v9sJvzGBP+yCEgC7GPmETc0OJ+0awAlkhe2pAbIXAeFZ8xe2g2Nk3c3ub0xwWt6zY9qbmiqGVMbZK21ZC/YmhlbeBMTzZNDQqcvDb1kM1x32iqZSt1HaqukfKvq34BAOTLsrH+ETNmUkKHHA+428RgeclPVWozeSyAI2EdWB34jtqXNTAySOY3i/KgFIlqOa4GkFmBegorzg4joG07he/M7zl6jAAAAAElFTkSuQmCC',\n}\n\ntype Props = {\n  document: MakeswiftPageDocument\n  metadata?: PageMetadataSettings\n}\n\nexport function PageHead({ document: page, metadata = {} }: Props): ReactNode {\n  const {\n    title: useTitle = false,\n    favicon: useFavicon = false,\n    canonicalUrl: useCanonicalUrl = false,\n    indexingBlocked: useIndexingBlocked = false,\n    description: useDescription = false,\n    keywords: useKeywords = false,\n    socialImage: useSocialImage = false,\n  } = metadata\n\n  const { headSnippets } = usePageSnippets({ page })\n  const { HeadSnippet } = useFrameworkContext()\n\n  const isInBuilder = useIsInBuilder()\n\n  const site = useCachedSite(isInBuilder ? page.site.id : null)\n  const baseLocalizedPage = page.localizedPages.find(({ parentId }) => parentId == null)\n\n  const favicon = page.meta.favicon ?? defaultFavicon\n  const title = baseLocalizedPage?.meta.title ?? page.meta.title\n  const description = baseLocalizedPage?.meta.description ?? page.meta.description\n  const keywords = baseLocalizedPage?.meta.keywords ?? page.meta.keywords\n  const socialImage = baseLocalizedPage?.meta.socialImage ?? page.meta.socialImage\n  const canonicalUrl = baseLocalizedPage?.seo.canonicalUrl ?? page.seo.canonicalUrl\n  const isIndexingBlocked = baseLocalizedPage?.seo.isIndexingBlocked ?? page.seo.isIndexingBlocked\n\n  const fontFamilyParamValue = useMemo(() => {\n    if (site == null) {\n      return page.fonts\n        .map(({ family, variants }) => {\n          return `${family.replace(/ /g, '+')}:${variants.join()}`\n        })\n        .join('|')\n    }\n\n    return site.googleFonts.edges\n      .filter((edge): edge is NonNullable<typeof edge> => edge != null)\n      .map(({ activeVariants, node: { family, variants } }) => {\n        const activeVariantSpecifiers = variants\n          .filter(variant =>\n            activeVariants.some(activeVariant => activeVariant.specifier === variant.specifier),\n          )\n          .map(variant => variant.specifier)\n          .join()\n\n        return `${family.replace(/ /g, '+')}:${activeVariantSpecifiers}`\n      })\n      .join('|')\n  }, [site, page])\n\n  return (\n    <>\n      {useTitle && title && (\n        <>\n          <PageTitle>{title}</PageTitle>\n          <PageMeta property=\"og:title\" content={title} />\n          <PageMeta name=\"twitter:title\" content={title} />\n        </>\n      )}\n      {useFavicon && favicon && (\n        <PageLink rel=\"icon\" type={favicon.mimetype} href={favicon.publicUrl} />\n      )}\n      {useCanonicalUrl && canonicalUrl && <PageLink rel=\"canonical\" href={canonicalUrl} />}\n      {useIndexingBlocked && isIndexingBlocked && <PageMeta name=\"robots\" content=\"noindex\" />}\n      {useDescription && description && (\n        <>\n          <PageMeta name=\"description\" content={description} />\n          <PageMeta property=\"og:description\" content={description} />\n          <PageMeta name=\"twitter:description\" content={description} />\n        </>\n      )}\n      {useKeywords && keywords && <PageMeta name=\"keywords\" content={keywords} />}\n      {useSocialImage && socialImage && (\n        <>\n          <PageMeta property=\"og:image\" content={socialImage.publicUrl} />\n          <PageMeta property=\"og:image:type\" content={socialImage.mimetype} />\n          <PageMeta name=\"twitter:image\" content={socialImage.publicUrl} />\n          <PageMeta name=\"twitter:card\" content=\"summary_large_image\" />\n        </>\n      )}\n      {fontFamilyParamValue !== '' && (\n        <PageLink\n          precedence=\"medium\"\n          rel=\"stylesheet\"\n          href={`https://fonts.googleapis.com/css?family=${fontFamilyParamValue}&display=swap`}\n        />\n      )}\n      {headSnippets.map(snippet => (\n        <HeadSnippet key={snippet.id} snippet={snippet} />\n      ))}\n    </>\n  )\n}\n\nfunction useCachedSite(siteId: string | null): Site | null {\n  const client = useApiResourcesClient()\n  const getSnapshot = () => (siteId == null ? null : client.readSite(siteId))\n\n  const site = useSyncExternalStore(client.subscribe, getSnapshot, getSnapshot)\n\n  return site\n}\n"],"mappings":"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","names":[]}

package/dist/cjs/runtimes/react/components/page/head-tags.js

@@ -20,7 +20,6 @@ var head_tags_exports = {};
 __export(head_tags_exports, {
   PageLink: () => PageLink,
   PageMeta: () => PageMeta,
-  PageStyle: () => PageStyle,
   PageTitle: () => PageTitle
 });
 module.exports = __toCommonJS(head_tags_exports);
@@ -38,15 +37,10 @@ function PageLink({ precedence, ...props }) {
   const { Head } = (0, import_use_framework_context.useFrameworkContext)();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Head, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("link", { ...props, precedence }) });
 }
-function PageStyle({ children, precedence, href, ...props }) {
-  const { Head } = (0, import_use_framework_context.useFrameworkContext)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Head, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { ...props, precedence, href, children }) });
-}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   PageLink,
   PageMeta,
-  PageStyle,
   PageTitle
 });
 //# sourceMappingURL=head-tags.js.map

package/dist/cjs/runtimes/react/components/page/head-tags.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/runtimes/react/components/page/head-tags.tsx"],"sourcesContent":["import { type ComponentPropsWithoutRef } from 'react'\n\nimport { useFrameworkContext } from '../hooks/use-framework-context'\n\ntype PageTitleProps = Omit<ComponentPropsWithoutRef<'title'>, 'children'> & {\n  children?: string\n}\n\nexport function PageTitle({ children, ...props }: PageTitleProps) {\n  const { Head } = useFrameworkContext()\n  return (\n    <Head>\n      <title {...props}>{children}</title>\n    </Head>\n  )\n}\n\nexport function PageMeta(props: ComponentPropsWithoutRef<'meta'>) {\n  const { Head } = useFrameworkContext()\n  return (\n    <Head>\n      <meta {...props} />\n    </Head>\n  )\n}\n\ntype ReactCanaryLinkProps = {\n  precedence?: 'reset' | 'low' | 'medium' | 'high'\n}\ntype PageLinkProps = ComponentPropsWithoutRef<'link'> & ReactCanaryLinkProps\n\nexport function PageLink({ precedence, ...props }: PageLinkProps) {\n  const { Head } = useFrameworkContext()\n  return (\n    <Head>\n      <link {...props} precedence={precedence} />\n    </Head>\n  )\n}\n\ntype ReactCanaryStyleProps = {\n  precedence?: 'reset' | 'low' | 'medium' | 'high'\n  href?: string\n}\ntype PageStyleProps = ComponentPropsWithoutRef<'style'> & ReactCanaryStyleProps\n\nexport function PageStyle({ children, precedence, href, ...props }: PageStyleProps) {\n  const { Head } = useFrameworkContext()\n  return (\n    <Head>\n      <style {...props} precedence={precedence} href={href}>\n        {children}\n      </style>\n    </Head>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYM;AAVN,mCAAoC;AAM7B,SAAS,UAAU,EAAE,UAAU,GAAG,MAAM,GAAmB;AAChE,QAAM,EAAE,KAAK,QAAI,kDAAoB;AACrC,SACE,4CAAC,QACC,sDAAC,WAAO,GAAG,OAAQ,UAAS,GAC9B;AAEJ;AAEO,SAAS,SAAS,OAAyC;AAChE,QAAM,EAAE,KAAK,QAAI,kDAAoB;AACrC,SACE,4CAAC,QACC,sDAAC,UAAM,GAAG,OAAO,GACnB;AAEJ;AAOO,SAAS,SAAS,EAAE,YAAY,GAAG,MAAM,GAAkB;AAChE,QAAM,EAAE,KAAK,QAAI,kDAAoB;AACrC,SACE,4CAAC,QACC,sDAAC,UAAM,GAAG,OAAO,YAAwB,GAC3C;AAEJ;AAQO,SAAS,UAAU,EAAE,UAAU,YAAY,MAAM,GAAG,MAAM,GAAmB;AAClF,QAAM,EAAE,KAAK,QAAI,kDAAoB;AACrC,SACE,4CAAC,QACC,sDAAC,WAAO,GAAG,OAAO,YAAwB,MACvC,UACH,GACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../../../src/runtimes/react/components/page/head-tags.tsx"],"sourcesContent":["import { type ComponentPropsWithoutRef } from 'react'\n\nimport { useFrameworkContext } from '../hooks/use-framework-context'\n\ntype PageTitleProps = Omit<ComponentPropsWithoutRef<'title'>, 'children'> & {\n  children?: string\n}\n\nexport function PageTitle({ children, ...props }: PageTitleProps) {\n  const { Head } = useFrameworkContext()\n  return (\n    <Head>\n      <title {...props}>{children}</title>\n    </Head>\n  )\n}\n\nexport function PageMeta(props: ComponentPropsWithoutRef<'meta'>) {\n  const { Head } = useFrameworkContext()\n  return (\n    <Head>\n      <meta {...props} />\n    </Head>\n  )\n}\n\ntype ReactCanaryLinkProps = {\n  precedence?: 'reset' | 'low' | 'medium' | 'high'\n}\ntype PageLinkProps = ComponentPropsWithoutRef<'link'> & ReactCanaryLinkProps\n\nexport function PageLink({ precedence, ...props }: PageLinkProps) {\n  const { Head } = useFrameworkContext()\n  return (\n    <Head>\n      <link {...props} precedence={precedence} />\n    </Head>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYM;AAVN,mCAAoC;AAM7B,SAAS,UAAU,EAAE,UAAU,GAAG,MAAM,GAAmB;AAChE,QAAM,EAAE,KAAK,QAAI,kDAAoB;AACrC,SACE,4CAAC,QACC,sDAAC,WAAO,GAAG,OAAQ,UAAS,GAC9B;AAEJ;AAEO,SAAS,SAAS,OAAyC;AAChE,QAAM,EAAE,KAAK,QAAI,kDAAoB;AACrC,SACE,4CAAC,QACC,sDAAC,UAAM,GAAG,OAAO,GACnB;AAEJ;AAOO,SAAS,SAAS,EAAE,YAAY,GAAG,MAAM,GAAkB;AAChE,QAAM,EAAE,KAAK,QAAI,kDAAoB;AACrC,SACE,4CAAC,QACC,sDAAC,UAAM,GAAG,OAAO,YAAwB,GAC3C;AAEJ;","names":[]}

package/dist/cjs/runtimes/react/components/resolve-props.js

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -21,32 +22,50 @@ __export(resolve_props_exports, {
   ResolveProps: () => ResolveProps
 });
 module.exports = __toCommonJS(resolve_props_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
 var import_use_control_defs = require("../hooks/use-control-defs");
 var import_use_resolved_props = require("../hooks/use-resolved-props");
 var import_use_control_instances = require("../hooks/use-control-instances");
-var import_use_stylesheet_factory = require("../hooks/use-stylesheet-factory");
 var import_legacy_controls = require("../legacy-controls");
+var import_use_controlled_styles = require("../css-runtime/hooks/use-controlled-styles");
 function ResolveProps({
   element,
   children: renderComponent
 }) {
   const [legacyDescriptors, definitions] = (0, import_use_control_defs.useControlDefs)({ elementType: element.type });
   const elementKey = element.key;
-  const stylesheetFactory = (0, import_use_stylesheet_factory.useStylesheetFactory)();
+  const { getStylesheet, styleElements } = (0, import_use_controlled_styles.useControlledStyles)({ namespace: elementKey });
   const controlInstances = (0, import_use_control_instances.useControlInstances)(elementKey);
   const resolvedProps = (0, import_use_resolved_props.useResolvedProps)({
     elementKey,
     propDefs: definitions,
     propData: element.props,
     controlInstances,
-    stylesheetFactory
+    getStylesheet
   });
   const renderFn = Object.entries(legacyDescriptors).reduceRight(
-    (renderFn2, [propName, descriptor]) => (props) => (0, import_legacy_controls.resolveLegacyDescriptorProp)(descriptor, propName, element.props[propName], props, renderFn2),
+    (renderFn2, [propName, descriptor]) => (props) => (0, import_legacy_controls.resolveLegacyDescriptorProp)(
+      descriptor,
+      propName,
+      element.key,
+      element.props[propName],
+      props,
+      renderFn2
+    ),
     renderComponent
   );
-  return renderFn(resolvedProps);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MemoizedComponent, { renderFn, resolvedProps }),
+    styleElements
+  ] });
 }
+const MemoizedComponent = (0, import_react.memo)(function MemoizedComponent2({
+  renderFn,
+  resolvedProps
+}) {
+  return renderFn(resolvedProps);
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ResolveProps

package/dist/cjs/runtimes/react/components/resolve-props.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/components/resolve-props.tsx"],"sourcesContent":["import { type ReactNode } from 'react'\n\nimport { type ElementData } from '../../../state/read-only-state'\n\nimport { useControlDefs } from '../hooks/use-control-defs'\nimport { useResolvedProps } from '../hooks/use-resolved-props'\nimport { useControlInstances } from '../hooks/use-control-instances'\nimport { useStylesheetFactory } from '../hooks/use-stylesheet-factory'\n\nimport { resolveLegacyDescriptorProp } from '../legacy-controls'\n\nexport function ResolveProps({\n  element,\n  children: renderComponent,\n}: {\n  element: ElementData\n  children: (props: Record<string, unknown>) => ReactNode\n}): ReactNode {\n  const [legacyDescriptors, definitions] = useControlDefs({ elementType: element.type })\n\n  const elementKey = element.key\n  const stylesheetFactory = useStylesheetFactory()\n  const controlInstances = useControlInstances(elementKey)\n  const resolvedProps = useResolvedProps({\n    elementKey,\n    propDefs: definitions,\n    propData: element.props,\n    controlInstances,\n    stylesheetFactory,\n  })\n\n  const renderFn = Object.entries(legacyDescriptors).reduceRight(\n    (renderFn, [propName, descriptor]) =>\n      props =>\n        resolveLegacyDescriptorProp(descriptor, propName, element.props[propName], props, renderFn),\n    renderComponent,\n  )\n\n  return renderFn(resolvedProps)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,8BAA+B;AAC/B,gCAAiC;AACjC,mCAAoC;AACpC,oCAAqC;AAErC,6BAA4C;AAErC,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA,UAAU;AACZ,GAGc;AACZ,QAAM,CAAC,mBAAmB,WAAW,QAAI,wCAAe,EAAE,aAAa,QAAQ,KAAK,CAAC;AAErF,QAAM,aAAa,QAAQ;AAC3B,QAAM,wBAAoB,oDAAqB;AAC/C,QAAM,uBAAmB,kDAAoB,UAAU;AACvD,QAAM,oBAAgB,4CAAiB;AAAA,IACrC;AAAA,IACA,UAAU;AAAA,IACV,UAAU,QAAQ;AAAA,IAClB;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,WAAW,OAAO,QAAQ,iBAAiB,EAAE;AAAA,IACjD,CAACA,WAAU,CAAC,UAAU,UAAU,MAC9B,eACE,oDAA4B,YAAY,UAAU,QAAQ,MAAM,QAAQ,GAAG,OAAOA,SAAQ;AAAA,IAC9F;AAAA,EACF;AAEA,SAAO,SAAS,aAAa;AAC/B;","names":["renderFn"]}
+{"version":3,"sources":["../../../../../src/runtimes/react/components/resolve-props.tsx"],"sourcesContent":["'use client'\n\nimport { type ReactNode, memo } from 'react'\n\nimport { type ElementData } from '../../../state/read-only-state'\n\nimport { useControlDefs } from '../hooks/use-control-defs'\nimport { useResolvedProps } from '../hooks/use-resolved-props'\nimport { useControlInstances } from '../hooks/use-control-instances'\n\nimport { resolveLegacyDescriptorProp } from '../legacy-controls'\nimport { useControlledStyles } from '../css-runtime/hooks/use-controlled-styles'\n\nexport function ResolveProps({\n  element,\n  children: renderComponent,\n}: {\n  element: ElementData\n  children: (props: Record<string, unknown>) => ReactNode\n}): ReactNode {\n  const [legacyDescriptors, definitions] = useControlDefs({ elementType: element.type })\n\n  const elementKey = element.key\n  const { getStylesheet, styleElements } = useControlledStyles({ namespace: elementKey })\n  const controlInstances = useControlInstances(elementKey)\n  const resolvedProps = useResolvedProps({\n    elementKey,\n    propDefs: definitions,\n    propData: element.props,\n    controlInstances,\n    getStylesheet,\n  })\n\n  const renderFn = Object.entries(legacyDescriptors).reduceRight(\n    (renderFn, [propName, descriptor]) =>\n      props =>\n        resolveLegacyDescriptorProp(\n          descriptor,\n          propName,\n          element.key,\n          element.props[propName],\n          props,\n          renderFn,\n        ),\n    renderComponent,\n  )\n\n  return (\n    <>\n      <MemoizedComponent renderFn={renderFn} resolvedProps={resolvedProps} />\n      {styleElements}\n    </>\n  )\n}\n\n/**\n * This level of memoization exists so that, for components that do not use legacy prop controllers, changes to\n * element data do not lead to re-renders unless they actually result in changes to resolved prop values.\n */\nconst MemoizedComponent = memo(function MemoizedComponent({\n  renderFn,\n  resolvedProps,\n}: {\n  renderFn: (props: Record<string, unknown>) => ReactNode\n  resolvedProps: Record<string, unknown>\n}) {\n  return renderFn(resolvedProps)\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgDI;AA9CJ,mBAAqC;AAIrC,8BAA+B;AAC/B,gCAAiC;AACjC,mCAAoC;AAEpC,6BAA4C;AAC5C,mCAAoC;AAE7B,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA,UAAU;AACZ,GAGc;AACZ,QAAM,CAAC,mBAAmB,WAAW,QAAI,wCAAe,EAAE,aAAa,QAAQ,KAAK,CAAC;AAErF,QAAM,aAAa,QAAQ;AAC3B,QAAM,EAAE,eAAe,cAAc,QAAI,kDAAoB,EAAE,WAAW,WAAW,CAAC;AACtF,QAAM,uBAAmB,kDAAoB,UAAU;AACvD,QAAM,oBAAgB,4CAAiB;AAAA,IACrC;AAAA,IACA,UAAU;AAAA,IACV,UAAU,QAAQ;AAAA,IAClB;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,WAAW,OAAO,QAAQ,iBAAiB,EAAE;AAAA,IACjD,CAACA,WAAU,CAAC,UAAU,UAAU,MAC9B,eACE;AAAA,MACE;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,QAAQ,MAAM,QAAQ;AAAA,MACtB;AAAA,MACAA;AAAA,IACF;AAAA,IACJ;AAAA,EACF;AAEA,SACE,4EACE;AAAA,gDAAC,qBAAkB,UAAoB,eAA8B;AAAA,IACpE;AAAA,KACH;AAEJ;AAMA,MAAM,wBAAoB,mBAAK,SAASC,mBAAkB;AAAA,EACxD;AAAA,EACA;AACF,GAGG;AACD,SAAO,SAAS,aAAa;AAC/B,CAAC;","names":["renderFn","MemoizedComponent"]}

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

@@ -22,24 +22,38 @@ __export(control_exports, {
   ControlValue: () => ControlValue
 });
 module.exports = __toCommonJS(control_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_use_resolved_value = require("../hooks/use-resolved-value");
-var import_use_stylesheet_factory = require("../hooks/use-stylesheet-factory");
-var import_use_css_id = require("../hooks/use-css-id");
+var import_use_breakpoints = require("../hooks/use-breakpoints");
+var import_use_controlled_styles = require("../css-runtime/hooks/use-controlled-styles");
 function ControlValue({
   data,
   definition,
   children,
+  elementKey,
+  propPathComponents,
   control
 }) {
-  const stylesheetFactory = (0, import_use_stylesheet_factory.useStylesheetFactory)();
-  const id = `cv-${(0, import_use_css_id.useCssId)()}`;
+  const breakpoints = (0, import_use_breakpoints.useBreakpoints)();
+  const styleNamespace = `${elementKey}-controlValue-${propPathComponents.join("-")}`;
+  const { getStylesheet, styleElements } = (0, import_use_controlled_styles.useControlledStyles)({
+    namespace: styleNamespace
+  });
+  const stylesheet = getStylesheet({
+    breakpointsData: breakpoints,
+    elementKey,
+    propPathComponents
+  });
   const value = (0, import_use_resolved_value.useResolvedValue)(
     data,
-    (data2, resourceResolver) => definition.resolveValue(data2, resourceResolver, stylesheetFactory.get(id), control),
-    definition.config?.defaultValue
+    (data2, resourceResolver) => definition.resolveValue(data2, resourceResolver, stylesheet, control),
+    definition.config?.defaultValue,
+    [stylesheet.key()]
   );
-  stylesheetFactory.useDefinedStyles();
-  return children(value);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    children(value),
+    styleElements
+  ] });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/controls/control.tsx"],"sourcesContent":["'use client'\n\nimport {\n  ControlDefinition,\n  type InstanceType,\n  type DataType,\n  type ResolvedValueType,\n} from '@makeswift/controls'\nimport { ReactNode } from 'react'\n\nimport { useResolvedValue } from '../hooks/use-resolved-value'\nimport { useStylesheetFactory } from '../hooks/use-stylesheet-factory'\nimport { useCssId } from '../hooks/use-css-id'\n\ntype ControlValueProps = {\n  definition: ControlDefinition\n  data: DataType<ControlDefinition> | undefined\n  children(value: ResolvedValueType<ControlDefinition>): ReactNode\n  control?: InstanceType<ControlDefinition>\n}\n\nexport function ControlValue({\n  data,\n  definition,\n  children,\n  control,\n}: ControlValueProps): ReactNode {\n  const stylesheetFactory = useStylesheetFactory()\n  const id = `cv-${useCssId()}`\n\n  const value = useResolvedValue(\n    data,\n    (data, resourceResolver) =>\n      definition.resolveValue(data, resourceResolver, stylesheetFactory.get(id), control),\n    (definition.config as any)?.defaultValue,\n  )\n\n  stylesheetFactory.useDefinedStyles()\n\n  return children(value)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA,gCAAiC;AACjC,oCAAqC;AACrC,wBAAyB;AASlB,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAiC;AAC/B,QAAM,wBAAoB,oDAAqB;AAC/C,QAAM,KAAK,UAAM,4BAAS,CAAC;AAE3B,QAAM,YAAQ;AAAA,IACZ;AAAA,IACA,CAACA,OAAM,qBACL,WAAW,aAAaA,OAAM,kBAAkB,kBAAkB,IAAI,EAAE,GAAG,OAAO;AAAA,IACnF,WAAW,QAAgB;AAAA,EAC9B;AAEA,oBAAkB,iBAAiB;AAEnC,SAAO,SAAS,KAAK;AACvB;","names":["data"]}
+{"version":3,"sources":["../../../../../src/runtimes/react/controls/control.tsx"],"sourcesContent":["'use client'\n\nimport {\n  ControlDefinition,\n  type InstanceType,\n  type DataType,\n  type ResolvedValueType,\n} from '@makeswift/controls'\nimport { ReactNode } from 'react'\n\nimport { useResolvedValue } from '../hooks/use-resolved-value'\nimport { useBreakpoints } from '../hooks/use-breakpoints'\nimport { useControlledStyles } from '../css-runtime/hooks/use-controlled-styles'\n\ntype ControlValueProps = {\n  definition: ControlDefinition\n  data: DataType<ControlDefinition> | undefined\n  children(value: ResolvedValueType<ControlDefinition>): ReactNode\n  elementKey: string\n  propPathComponents: string[]\n  control?: InstanceType<ControlDefinition>\n}\n\nexport function ControlValue({\n  data,\n  definition,\n  children,\n  elementKey,\n  propPathComponents,\n  control,\n}: ControlValueProps): ReactNode {\n  const breakpoints = useBreakpoints()\n  const styleNamespace = `${elementKey}-controlValue-${propPathComponents.join('-')}`\n\n  const { getStylesheet, styleElements } = useControlledStyles({\n    namespace: styleNamespace,\n  })\n\n  const stylesheet = getStylesheet({\n    breakpointsData: breakpoints,\n    elementKey,\n    propPathComponents,\n  })\n\n  const value = useResolvedValue(\n    data,\n    (data, resourceResolver) =>\n      definition.resolveValue(data, resourceResolver, stylesheet, control),\n    (definition.config as any)?.defaultValue,\n    [stylesheet.key()],\n  )\n\n  return (\n    <>\n      {children(value)}\n      {styleElements}\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAqDI;AA3CJ,gCAAiC;AACjC,6BAA+B;AAC/B,mCAAoC;AAW7B,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAiC;AAC/B,QAAM,kBAAc,uCAAe;AACnC,QAAM,iBAAiB,GAAG,UAAU,iBAAiB,mBAAmB,KAAK,GAAG,CAAC;AAEjF,QAAM,EAAE,eAAe,cAAc,QAAI,kDAAoB;AAAA,IAC3D,WAAW;AAAA,EACb,CAAC;AAED,QAAM,aAAa,cAAc;AAAA,IAC/B,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,YAAQ;AAAA,IACZ;AAAA,IACA,CAACA,OAAM,qBACL,WAAW,aAAaA,OAAM,kBAAkB,YAAY,OAAO;AAAA,IACpE,WAAW,QAAgB;AAAA,IAC5B,CAAC,WAAW,IAAI,CAAC;AAAA,EACnB;AAEA,SACE,4EACG;AAAA,aAAS,KAAK;AAAA,IACd;AAAA,KACH;AAEJ;","names":["data"]}

package/dist/cjs/runtimes/react/controls/rich-text/EditableText/editable-text.js

@@ -34,7 +34,6 @@ __export(editable_text_exports, {
 });
 module.exports = __toCommonJS(editable_text_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_css = require("@emotion/css");
 var import_css_box_model = require("css-box-model");
 var import_is_hotkey = __toESM(require("is-hotkey"));
 var import_react = require("react");
@@ -49,6 +48,7 @@ var import_poll_box_model = require("../../../poll-box-model");
 var import_components = require("../components");
 var import_useSyncDOMSelection = require("./useSyncDOMSelection");
 var import_useSyncWithBuilder = require("./useSyncWithBuilder");
+var import_clsx = __toESM(require("clsx"));
 const defaultText = [
   { type: import_controls.Slate.BlockType.Paragraph, children: [{ text: "" }] }
 ];
@@ -65,7 +65,7 @@ const EditableText = (0, import_react.forwardRef)(function EditableText2({ id, t
       return;
     const element = import_slate_react.ReactEditor.toDOMNode(editor, editor);
     return (0, import_poll_box_model.pollBoxModel)({
-      element,
+      getElement: () => element,
       onBoxModelChange: (boxModel) => controller.changeBoxModel(boxModel)
     });
   }, [editor, controller]);
@@ -102,27 +102,30 @@ const EditableText = (0, import_react.forwardRef)(function EditableText2({ id, t
     },
     [controller, editor]
   );
-  const slateReset = (0, import_use_slate_reset.useSlateReset)();
+  const { className: slateResetClass, styleElement: slateResetStyleElement } = (0, import_use_slate_reset.useSlateReset)();
   const handleBlur = (0, import_react.useCallback)((e) => {
     if (e.relatedTarget == null)
       return;
     setIsPreservingDOMSelection(false);
     import_slate_react.ReactEditor.deselect(editor);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_slate_react.Slate, { editor, value: initialValue, onChange: delaySync, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_slate_react.Editable,
-    {
-      id,
-      renderLeaf: import_components.Leaf,
-      renderElement: import_components.Element,
-      onFocus: handleFocus,
-      onKeyDown: handleKeyDown,
-      onBlur: handleBlur,
-      className: (0, import_css.cx)(slateReset, width, margin),
-      readOnly: editMode !== import_builder_edit_mode.BuilderEditMode.CONTENT,
-      placeholder: "Write some text..."
-    }
-  ) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    slateResetStyleElement,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_slate_react.Slate, { editor, value: initialValue, onChange: delaySync, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_slate_react.Editable,
+      {
+        id,
+        renderLeaf: import_components.Leaf,
+        renderElement: import_components.Element,
+        onFocus: handleFocus,
+        onKeyDown: handleKeyDown,
+        onBlur: handleBlur,
+        className: (0, import_clsx.default)(slateResetClass, width, margin),
+        readOnly: editMode !== import_builder_edit_mode.BuilderEditMode.CONTENT,
+        placeholder: "Write some text..."
+      }
+    ) })
+  ] });
 });
 var editable_text_default = EditableText;
 // Annotate the CommonJS export names for ESM import in node:

package/dist/cjs/runtimes/react/controls/rich-text/EditableText/editable-text.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/runtimes/react/controls/rich-text/EditableText/editable-text.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@emotion/css'\nimport { getBox } from 'css-box-model'\nimport isHotkey from 'is-hotkey'\nimport {\n  FocusEvent,\n  forwardRef,\n  KeyboardEvent,\n  Ref,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useState,\n} from 'react'\n\nimport { createEditor } from 'slate'\nimport { Slate as SlateReact, Editable, withReact, ReactEditor } from 'slate-react'\n\nimport { Slate, richTextDTOtoDAO, type RichTextValue } from '@makeswift/controls'\n\nimport { useBuilderEditMode } from '../../..'\nimport { useSlateReset } from '../../use-slate-reset'\nimport { DescriptorsPropControllers } from '../../../../../prop-controllers/instances'\nimport { withBlock, withTypography, withBuilder, onKeyDown } from '../../../../../slate'\nimport { BuilderEditMode } from '../../../../../state/modules/builder-edit-mode'\nimport { PropControllersHandle } from '../../../../../state/modules/read-write/prop-controllers'\nimport { pollBoxModel } from '../../../poll-box-model'\nimport { Element, Leaf } from '../components'\nimport { Descriptors } from '../rich-text'\nimport { useSyncDOMSelection } from './useSyncDOMSelection'\nimport { useSyncWithBuilder } from './useSyncWithBuilder'\n\ntype Props = {\n  id?: string\n  text?: RichTextValue\n  width?: string\n  margin?: string\n}\n\nconst defaultText: Slate.RichTextDAO = [\n  { type: Slate.BlockType.Paragraph, children: [{ text: '' }] },\n]\n\nexport const EditableText = forwardRef(function EditableText(\n  { id, text, width, margin }: Props,\n  ref: Ref<PropControllersHandle<Descriptors>>,\n) {\n  const [editor] = useState(() => withBlock(withTypography(withBuilder(withReact(createEditor())))))\n  const [isPreservingDOMSElection, setIsPreservingDOMSelection] = useState(false)\n  useSyncDOMSelection(editor, isPreservingDOMSElection)\n  const delaySync = useSyncWithBuilder(editor, text)\n  const editMode = useBuilderEditMode()\n\n  const [propControllers, setPropControllers] =\n    useState<DescriptorsPropControllers<Descriptors> | null>(null)\n  const controller = propControllers?.text\n\n  useEffect(() => {\n    if (controller == null) return\n\n    const element = ReactEditor.toDOMNode(editor, editor)\n\n    return pollBoxModel({\n      element,\n      onBoxModelChange: boxModel => controller.changeBoxModel(boxModel),\n    })\n  }, [editor, controller])\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      getDomNode() {\n        return ReactEditor.toDOMNode(editor, editor)\n      },\n      getBoxModel() {\n        return getBox(ReactEditor.toDOMNode(editor, editor))\n      },\n      setPropControllers,\n    }),\n    [editor, setPropControllers],\n  )\n\n  const initialValue = useMemo(() => (text ? richTextDTOtoDAO(text) : defaultText), [text])\n\n  useEffect(() => {\n    controller?.setSlateEditor(editor)\n  }, [controller, editor])\n\n  const handleFocus = useCallback(() => {\n    controller?.focus()\n    setIsPreservingDOMSelection(true)\n  }, [controller])\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (isHotkey('mod+shift+z', e)) return controller?.redo()\n      if (isHotkey('mod+z', e)) return controller?.undo()\n      if (isHotkey('escape')(e)) return controller?.blur()\n      onKeyDown(e, editor)\n    },\n    [controller, editor],\n  )\n\n  const slateReset = useSlateReset()\n\n  const handleBlur = useCallback((e: FocusEvent) => {\n    // When clicking outside of the iframe (`relatedTarget` is null) we want to preserve the DOM selection.\n    if (e.relatedTarget == null) return\n    // Otherwise we want to deselect on blur and stop preserving selection.\n    setIsPreservingDOMSelection(false)\n    ReactEditor.deselect(editor)\n  }, [])\n\n  return (\n    <SlateReact editor={editor} value={initialValue} onChange={delaySync}>\n      <Editable\n        id={id}\n        renderLeaf={Leaf}\n        renderElement={Element}\n        onFocus={handleFocus}\n        onKeyDown={handleKeyDown}\n        onBlur={handleBlur}\n        className={cx(slateReset, width, margin)}\n        readOnly={editMode !== BuilderEditMode.CONTENT}\n        placeholder=\"Write some text...\"\n      />\n    </SlateReact>\n  )\n})\n\nexport default EditableText\n"],"mappings":"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","names":["import_slate","EditableText","isHotkey","SlateReact"]}
+{"version":3,"sources":["../../../../../../../src/runtimes/react/controls/rich-text/EditableText/editable-text.tsx"],"sourcesContent":["'use client'\n\nimport { getBox } from 'css-box-model'\nimport isHotkey from 'is-hotkey'\nimport {\n  FocusEvent,\n  forwardRef,\n  KeyboardEvent,\n  Ref,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useState,\n} from 'react'\n\nimport { createEditor } from 'slate'\nimport { Slate as SlateReact, Editable, withReact, ReactEditor } from 'slate-react'\n\nimport { Slate, richTextDTOtoDAO, type RichTextValue } from '@makeswift/controls'\n\nimport { useBuilderEditMode } from '../../..'\nimport { useSlateReset } from '../../use-slate-reset'\nimport { DescriptorsPropControllers } from '../../../../../prop-controllers/instances'\nimport { withBlock, withTypography, withBuilder, onKeyDown } from '../../../../../slate'\nimport { BuilderEditMode } from '../../../../../state/modules/builder-edit-mode'\nimport { PropControllersHandle } from '../../../../../state/modules/read-write/prop-controllers'\nimport { pollBoxModel } from '../../../poll-box-model'\nimport { Element, Leaf } from '../components'\nimport { Descriptors } from '../rich-text'\nimport { useSyncDOMSelection } from './useSyncDOMSelection'\nimport { useSyncWithBuilder } from './useSyncWithBuilder'\nimport clsx from 'clsx'\n\ntype Props = {\n  id?: string\n  text?: RichTextValue\n  width?: string\n  margin?: string\n}\n\nconst defaultText: Slate.RichTextDAO = [\n  { type: Slate.BlockType.Paragraph, children: [{ text: '' }] },\n]\n\nexport const EditableText = forwardRef(function EditableText(\n  { id, text, width, margin }: Props,\n  ref: Ref<PropControllersHandle<Descriptors>>,\n) {\n  const [editor] = useState(() => withBlock(withTypography(withBuilder(withReact(createEditor())))))\n  const [isPreservingDOMSElection, setIsPreservingDOMSelection] = useState(false)\n  useSyncDOMSelection(editor, isPreservingDOMSElection)\n  const delaySync = useSyncWithBuilder(editor, text)\n  const editMode = useBuilderEditMode()\n\n  const [propControllers, setPropControllers] =\n    useState<DescriptorsPropControllers<Descriptors> | null>(null)\n  const controller = propControllers?.text\n\n  useEffect(() => {\n    if (controller == null) return\n\n    const element = ReactEditor.toDOMNode(editor, editor)\n\n    return pollBoxModel({\n      getElement: () => element,\n      onBoxModelChange: boxModel => controller.changeBoxModel(boxModel),\n    })\n  }, [editor, controller])\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      getDomNode() {\n        return ReactEditor.toDOMNode(editor, editor)\n      },\n      getBoxModel() {\n        return getBox(ReactEditor.toDOMNode(editor, editor))\n      },\n      setPropControllers,\n    }),\n    [editor, setPropControllers],\n  )\n\n  const initialValue = useMemo(() => (text ? richTextDTOtoDAO(text) : defaultText), [text])\n\n  useEffect(() => {\n    controller?.setSlateEditor(editor)\n  }, [controller, editor])\n\n  const handleFocus = useCallback(() => {\n    controller?.focus()\n    setIsPreservingDOMSelection(true)\n  }, [controller])\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (isHotkey('mod+shift+z', e)) return controller?.redo()\n      if (isHotkey('mod+z', e)) return controller?.undo()\n      if (isHotkey('escape')(e)) return controller?.blur()\n      onKeyDown(e, editor)\n    },\n    [controller, editor],\n  )\n\n  const { className: slateResetClass, styleElement: slateResetStyleElement } = useSlateReset()\n\n  const handleBlur = useCallback((e: FocusEvent) => {\n    // When clicking outside of the iframe (`relatedTarget` is null) we want to preserve the DOM selection.\n    if (e.relatedTarget == null) return\n    // Otherwise we want to deselect on blur and stop preserving selection.\n    setIsPreservingDOMSelection(false)\n    ReactEditor.deselect(editor)\n  }, [])\n\n  return (\n    <>\n      {slateResetStyleElement}\n      <SlateReact editor={editor} value={initialValue} onChange={delaySync}>\n        <Editable\n          id={id}\n          renderLeaf={Leaf}\n          renderElement={Element}\n          onFocus={handleFocus}\n          onKeyDown={handleKeyDown}\n          onBlur={handleBlur}\n          className={clsx(slateResetClass, width, margin)}\n          readOnly={editMode !== BuilderEditMode.CONTENT}\n          placeholder=\"Write some text...\"\n        />\n      </SlateReact>\n    </>\n  )\n})\n\nexport default EditableText\n"],"mappings":"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","names":["import_slate","EditableText","isHotkey","SlateReact","clsx"]}

package/dist/cjs/runtimes/react/controls/rich-text/ReadOnlyText.js

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -34,14 +35,14 @@ __export(ReadOnlyText_exports, {
 });
 module.exports = __toCommonJS(ReadOnlyText_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_css = require("@emotion/css");
 var import_react = require("react");
 var import_controls = require("@makeswift/controls");
 var import_responsive_style = require("../../../../components/utils/responsive-style");
 var import_types = require("../../../../slate/types");
-var import_use_style = require("../../use-style");
 var import_typography = __toESM(require("../typography"));
 var import_Link = require("../../../../components/shared/Link");
+var import_use_style = require("../../css-runtime/hooks/use-style");
+var import_clsx = __toESM(require("clsx"));
 const ReadOnlyText = (0, import_react.forwardRef)(function ReadOnlyText2({ id, text, width, margin }, ref) {
   const descendants = text == null ? [] : (0, import_controls.richTextDTOtoDAO)(text);
   const descendantsAsString = getText(descendants);
@@ -60,83 +61,138 @@ const ReadOnlyText = (0, import_react.forwardRef)(function ReadOnlyText2({ id, t
         whiteSpace: "pre-wrap",
         wordWrap: "break-word"
       },
-      className: (0, import_css.cx)(width, margin),
+      className: (0, import_clsx.default)(width, margin),
       children: descendantsAsString === "" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Placeholder, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Descendants, { descendants })
     }
   );
 });
 var ReadOnlyText_default = ReadOnlyText;
 function Placeholder({ text = "Write some text..." }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "span",
-    {
-      className: (0, import_use_style.useStyle)({
-        display: "inline-block",
-        width: 0,
-        maxWidth: "100%",
-        whiteSpace: "nowrap",
-        opacity: 0.333,
-        verticalAlign: "text-top"
-      }),
-      children: text
-    }
-  );
+  const { className, styleElement } = (0, import_use_style.useStyle)({
+    display: "inline-block",
+    width: 0,
+    maxWidth: "100%",
+    whiteSpace: "nowrap",
+    opacity: 0.333,
+    verticalAlign: "text-top"
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    styleElement,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className, children: text })
+  ] });
 }
 function TextElement({ descendant }) {
   const enhancedTypography = (0, import_typography.default)(descendant.typography);
-  const typographyClassName = (0, import_typography.useTypographyClassName)(enhancedTypography);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: typographyClassName, children: descendant.text === "" ? "\uFEFF" : descendant.text });
+  const { className, styleElement } = (0, import_typography.useTypographyStyle)(enhancedTypography);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    styleElement,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className, children: descendant.text === "" ? "\uFEFF" : descendant.text })
+  ] });
 }
 function InlineElement({ descendant }) {
-  const linkClassName = (0, import_use_style.useStyle)({ textDecoration: "none" });
+  const { className: linkClassName, styleElement: linkStyleElement } = (0, import_use_style.useStyle)({
+    textDecoration: "none"
+  });
   switch (descendant.type) {
     case import_types.InlineType.Code:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Descendants, { descendants: descendant.children }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("code", { children: [
+        linkStyleElement,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Descendants, { descendants: descendant.children })
+      ] });
     case import_types.InlineType.SuperScript:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("sup", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Descendants, { descendants: descendant.children }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("sup", { children: [
+        linkStyleElement,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Descendants, { descendants: descendant.children })
+      ] });
     case import_types.InlineType.SubScript:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("sub", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Descendants, { descendants: descendant.children }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("sub", { children: [
+        linkStyleElement,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Descendants, { descendants: descendant.children })
+      ] });
     case import_types.InlineType.Link:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Link.Link, { className: linkClassName, link: descendant.link ?? void 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Descendants, { descendants: descendant.children }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Link.Link, { className: linkClassName, link: descendant.link ?? void 0, children: [
+        linkStyleElement,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Descendants, { descendants: descendant.children })
+      ] });
   }
 }
 function BlockElement({ descendant }) {
-  const blockStyles = [
-    (0, import_use_style.useStyle)({ margin: 0 }),
-    (0, import_use_style.useStyle)((0, import_responsive_style.useResponsiveStyle)([descendant.textAlign], ([textAlign = "left"]) => ({ textAlign })))
-  ];
-  const quoteStyle = (0, import_use_style.useStyle)({
+  const responsiveBlockStyles = (0, import_responsive_style.useResponsiveStyle)(
+    [descendant.textAlign],
+    ([textAlign = "left"]) => ({ textAlign })
+  );
+  const blockStyles = { margin: 0, ...responsiveBlockStyles };
+  const { className: blockStylesClassName, styleElement: blockStylesStyleElement } = (0, import_use_style.useStyle)(blockStyles);
+  const quoteStyles = {
     padding: "0.5em 10px",
     fontSize: "1.25em",
     fontWeight: "300",
     borderLeft: "5px solid rgba(0, 0, 0, 0.1)"
-  });
+  };
+  const { className: quoteStylesClassName, styleElement: quoteStylesStyleElement } = (0, import_use_style.useStyle)(quoteStyles);
   switch (descendant.type) {
     case import_types.BlockType.Default:
     case import_types.BlockType.Paragraph:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: (0, import_css.cx)(...blockStyles), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Descendants, { descendants: descendant.children }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: blockStylesClassName, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Descendants, { descendants: descendant.children }) })
+      ] });
     case import_types.BlockType.Heading1:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { className: (0, import_css.cx)(...blockStyles), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Descendants, { descendants: descendant.children }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { className: blockStylesClassName, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Descendants, { descendants: descendant.children }) })
+      ] });
     case import_types.BlockType.Heading2:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: (0, import_css.cx)(...blockStyles), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Descendants, { descendants: descendant.children }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: blockStylesClassName, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Descendants, { descendants: descendant.children }) })
+      ] });
     case import_types.BlockType.Heading3:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: (0, import_css.cx)(...blockStyles), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Descendants, { descendants: descendant.children }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: blockStylesClassName, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Descendants, { descendants: descendant.children }) })
+      ] });
     case import_types.BlockType.Heading4:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h4", { className: (0, import_css.cx)(...blockStyles), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Descendants, { descendants: descendant.children }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h4", { className: blockStylesClassName, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Descendants, { descendants: descendant.children }) })
+      ] });
     case import_types.BlockType.Heading5:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h5", { className: (0, import_css.cx)(...blockStyles), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Descendants, { descendants: descendant.children }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h5", { className: blockStylesClassName, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Descendants, { descendants: descendant.children }) })
+      ] });
     case import_types.BlockType.Heading6:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h6", { className: (0, import_css.cx)(...blockStyles), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Descendants, { descendants: descendant.children }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h6", { className: blockStylesClassName, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Descendants, { descendants: descendant.children }) })
+      ] });
     case import_types.BlockType.BlockQuote:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("blockquote", { className: (0, import_css.cx)(...blockStyles, quoteStyle), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Descendants, { descendants: descendant.children }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        blockStylesStyleElement,
+        quoteStylesStyleElement,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("blockquote", { className: (0, import_clsx.default)(blockStylesClassName, quoteStylesClassName), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Descendants, { descendants: descendant.children }) })
+      ] });
     case import_types.BlockType.OrderedList:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", { className: (0, import_css.cx)(...blockStyles), style: { listStylePosition: "inside" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Descendants, { descendants: descendant.children }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", { className: blockStylesClassName, style: { listStylePosition: "inside" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Descendants, { descendants: descendant.children }) })
+      ] });
     case import_types.BlockType.UnorderedList:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: (0, import_css.cx)(...blockStyles), style: { listStylePosition: "inside" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Descendants, { descendants: descendant.children }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: blockStylesClassName, style: { listStylePosition: "inside" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Descendants, { descendants: descendant.children }) })
+      ] });
     case import_types.BlockType.ListItem:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { className: (0, import_css.cx)(...blockStyles), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Descendants, { descendants: descendant.children }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { className: blockStylesClassName, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Descendants, { descendants: descendant.children }) })
+      ] });
     case import_types.BlockType.ListItemChild:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_css.cx)(...blockStyles), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Descendants, { descendants: descendant.children }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: blockStylesClassName, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Descendants, { descendants: descendant.children }) })
+      ] });
     default:
       return null;
   }