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

package/dist/esm/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":"AA8EM,SAWE,UAXF,KAWE,YAXF;AA9EN,SAAS,SAAS,4BAAuC;AAKzD,SAAS,6BAA6B;AACtC,SAAS,2BAA2B;AACpC,SAAS,sBAAsB;AAC/B,SAAS,uBAAuB;AAEhC,SAAS,WAAW,UAAU,UAAU,iBAAiB;AAGzD,MAAM,iBAAiB;AAAA,EACrB,IAAI;AAAA,EACJ,UAAU;AAAA,EACV,WACE;AACJ;AAOO,SAAS,SAAS,EAAE,UAAU,MAAM,WAAW,CAAC,EAAE,GAAqB;AAC5E,QAAM;AAAA,IACJ,OAAO,WAAW;AAAA,IAClB,SAAS,aAAa;AAAA,IACtB,cAAc,kBAAkB;AAAA,IAChC,iBAAiB,qBAAqB;AAAA,IACtC,aAAa,iBAAiB;AAAA,IAC9B,UAAU,cAAc;AAAA,IACxB,aAAa,iBAAiB;AAAA,EAChC,IAAI;AAEJ,QAAM,EAAE,aAAa,IAAI,gBAAgB,EAAE,KAAK,CAAC;AACjD,QAAM,EAAE,YAAY,IAAI,oBAAoB;AAE5C,QAAM,cAAc,eAAe;AAEnC,QAAM,OAAO,cAAc,cAAc,KAAK,KAAK,KAAK,IAAI;AAC5D,QAAM,oBAAoB,KAAK,eAAe,KAAK,CAAC,EAAE,SAAS,MAAM,YAAY,IAAI;AAErF,QAAM,UAAU,KAAK,KAAK,WAAW;AACrC,QAAM,QAAQ,mBAAmB,KAAK,SAAS,KAAK,KAAK;AACzD,QAAM,cAAc,mBAAmB,KAAK,eAAe,KAAK,KAAK;AACrE,QAAM,WAAW,mBAAmB,KAAK,YAAY,KAAK,KAAK;AAC/D,QAAM,cAAc,mBAAmB,KAAK,eAAe,KAAK,KAAK;AACrE,QAAM,eAAe,mBAAmB,IAAI,gBAAgB,KAAK,IAAI;AACrE,QAAM,oBAAoB,mBAAmB,IAAI,qBAAqB,KAAK,IAAI;AAE/E,QAAM,uBAAuB,QAAQ,MAAM;AACzC,QAAI,QAAQ,MAAM;AAChB,aAAO,KAAK,MACT,IAAI,CAAC,EAAE,QAAQ,SAAS,MAAM;AAC7B,eAAO,GAAG,OAAO,QAAQ,MAAM,GAAG,CAAC,IAAI,SAAS,KAAK,CAAC;AAAA,MACxD,CAAC,EACA,KAAK,GAAG;AAAA,IACb;AAEA,WAAO,KAAK,YAAY,MACrB,OAAO,CAAC,SAA2C,QAAQ,IAAI,EAC/D,IAAI,CAAC,EAAE,gBAAgB,MAAM,EAAE,QAAQ,SAAS,EAAE,MAAM;AACvD,YAAM,0BAA0B,SAC7B;AAAA,QAAO,aACN,eAAe,KAAK,mBAAiB,cAAc,cAAc,QAAQ,SAAS;AAAA,MACpF,EACC,IAAI,aAAW,QAAQ,SAAS,EAChC,KAAK;AAER,aAAO,GAAG,OAAO,QAAQ,MAAM,GAAG,CAAC,IAAI,uBAAuB;AAAA,IAChE,CAAC,EACA,KAAK,GAAG;AAAA,EACb,GAAG,CAAC,MAAM,IAAI,CAAC;AAEf,SACE,iCACE;AAAA,wBAAC,aAAU,YAAW,QAAO,MAAK,yBAC/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAQH;AAAA,IACC,YAAY,SACX,iCACE;AAAA,0BAAC,aAAW,iBAAM;AAAA,MAClB,oBAAC,YAAS,UAAS,YAAW,SAAS,OAAO;AAAA,MAC9C,oBAAC,YAAS,MAAK,iBAAgB,SAAS,OAAO;AAAA,OACjD;AAAA,IAED,cAAc,WACb,oBAAC,YAAS,KAAI,QAAO,MAAM,QAAQ,UAAU,MAAM,QAAQ,WAAW;AAAA,IAEvE,mBAAmB,gBAAgB,oBAAC,YAAS,KAAI,aAAY,MAAM,cAAc;AAAA,IACjF,sBAAsB,qBAAqB,oBAAC,YAAS,MAAK,UAAS,SAAQ,WAAU;AAAA,IACrF,kBAAkB,eACjB,iCACE;AAAA,0BAAC,YAAS,MAAK,eAAc,SAAS,aAAa;AAAA,MACnD,oBAAC,YAAS,UAAS,kBAAiB,SAAS,aAAa;AAAA,MAC1D,oBAAC,YAAS,MAAK,uBAAsB,SAAS,aAAa;AAAA,OAC7D;AAAA,IAED,eAAe,YAAY,oBAAC,YAAS,MAAK,YAAW,SAAS,UAAU;AAAA,IACxE,kBAAkB,eACjB,iCACE;AAAA,0BAAC,YAAS,UAAS,YAAW,SAAS,YAAY,WAAW;AAAA,MAC9D,oBAAC,YAAS,UAAS,iBAAgB,SAAS,YAAY,UAAU;AAAA,MAClE,oBAAC,YAAS,MAAK,iBAAgB,SAAS,YAAY,WAAW;AAAA,MAC/D,oBAAC,YAAS,MAAK,gBAAe,SAAQ,uBAAsB;AAAA,OAC9D;AAAA,IAED,yBAAyB,MACxB;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,KAAI;AAAA,QACJ,MAAM,2CAA2C,oBAAoB;AAAA;AAAA,IACvE;AAAA,IAED,aAAa,IAAI,aAChB,oBAAC,eAA6B,WAAZ,QAAQ,EAAsB,CACjD;AAAA,KACH;AAEJ;AAEA,SAAS,cAAc,QAAoC;AACzD,QAAM,SAAS,sBAAsB;AACrC,QAAM,cAAc,MAAO,UAAU,OAAO,OAAO,OAAO,SAAS,MAAM;AAEzE,QAAM,OAAO,qBAAqB,OAAO,WAAW,aAAa,WAAW;AAE5E,SAAO;AACT;","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/esm/runtimes/react/components/page/head-tags.js

@@ -12,14 +12,9 @@ function PageLink({ precedence, ...props }) {
   const { Head } = useFrameworkContext();
   return /* @__PURE__ */ jsx(Head, { children: /* @__PURE__ */ jsx("link", { ...props, precedence }) });
 }
-function PageStyle({ children, precedence, href, ...props }) {
-  const { Head } = useFrameworkContext();
-  return /* @__PURE__ */ jsx(Head, { children: /* @__PURE__ */ jsx("style", { ...props, precedence, href, children }) });
-}
 export {
   PageLink,
   PageMeta,
-  PageStyle,
   PageTitle
 };
 //# sourceMappingURL=head-tags.js.map

package/dist/esm/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":"AAYM;AAVN,SAAS,2BAA2B;AAM7B,SAAS,UAAU,EAAE,UAAU,GAAG,MAAM,GAAmB;AAChE,QAAM,EAAE,KAAK,IAAI,oBAAoB;AACrC,SACE,oBAAC,QACC,8BAAC,WAAO,GAAG,OAAQ,UAAS,GAC9B;AAEJ;AAEO,SAAS,SAAS,OAAyC;AAChE,QAAM,EAAE,KAAK,IAAI,oBAAoB;AACrC,SACE,oBAAC,QACC,8BAAC,UAAM,GAAG,OAAO,GACnB;AAEJ;AAOO,SAAS,SAAS,EAAE,YAAY,GAAG,MAAM,GAAkB;AAChE,QAAM,EAAE,KAAK,IAAI,oBAAoB;AACrC,SACE,oBAAC,QACC,8BAAC,UAAM,GAAG,OAAO,YAAwB,GAC3C;AAEJ;AAQO,SAAS,UAAU,EAAE,UAAU,YAAY,MAAM,GAAG,MAAM,GAAmB;AAClF,QAAM,EAAE,KAAK,IAAI,oBAAoB;AACrC,SACE,oBAAC,QACC,8BAAC,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":"AAYM;AAVN,SAAS,2BAA2B;AAM7B,SAAS,UAAU,EAAE,UAAU,GAAG,MAAM,GAAmB;AAChE,QAAM,EAAE,KAAK,IAAI,oBAAoB;AACrC,SACE,oBAAC,QACC,8BAAC,WAAO,GAAG,OAAQ,UAAS,GAC9B;AAEJ;AAEO,SAAS,SAAS,OAAyC;AAChE,QAAM,EAAE,KAAK,IAAI,oBAAoB;AACrC,SACE,oBAAC,QACC,8BAAC,UAAM,GAAG,OAAO,GACnB;AAEJ;AAOO,SAAS,SAAS,EAAE,YAAY,GAAG,MAAM,GAAkB;AAChE,QAAM,EAAE,KAAK,IAAI,oBAAoB;AACrC,SACE,oBAAC,QACC,8BAAC,UAAM,GAAG,OAAO,YAAwB,GAC3C;AAEJ;","names":[]}

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

@@ -1,29 +1,48 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { memo } from "react";
 import { useControlDefs } from "../hooks/use-control-defs";
 import { useResolvedProps } from "../hooks/use-resolved-props";
 import { useControlInstances } from "../hooks/use-control-instances";
-import { useStylesheetFactory } from "../hooks/use-stylesheet-factory";
 import { resolveLegacyDescriptorProp } from "../legacy-controls";
+import { useControlledStyles } from "../css-runtime/hooks/use-controlled-styles";
 function ResolveProps({
   element,
   children: renderComponent
 }) {
   const [legacyDescriptors, definitions] = useControlDefs({ elementType: element.type });
   const elementKey = element.key;
-  const stylesheetFactory = useStylesheetFactory();
+  const { getStylesheet, styleElements } = useControlledStyles({ namespace: elementKey });
   const controlInstances = useControlInstances(elementKey);
   const resolvedProps = useResolvedProps({
     elementKey,
     propDefs: definitions,
     propData: element.props,
     controlInstances,
-    stylesheetFactory
+    getStylesheet
   });
   const renderFn = Object.entries(legacyDescriptors).reduceRight(
-    (renderFn2, [propName, descriptor]) => (props) => resolveLegacyDescriptorProp(descriptor, propName, element.props[propName], props, renderFn2),
+    (renderFn2, [propName, descriptor]) => (props) => resolveLegacyDescriptorProp(
+      descriptor,
+      propName,
+      element.key,
+      element.props[propName],
+      props,
+      renderFn2
+    ),
     renderComponent
   );
-  return renderFn(resolvedProps);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(MemoizedComponent, { renderFn, resolvedProps }),
+    styleElements
+  ] });
 }
+const MemoizedComponent = memo(function MemoizedComponent2({
+  renderFn,
+  resolvedProps
+}) {
+  return renderFn(resolvedProps);
+});
 export {
   ResolveProps
 };

package/dist/esm/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":"AAIA,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,2BAA2B;AACpC,SAAS,4BAA4B;AAErC,SAAS,mCAAmC;AAErC,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA,UAAU;AACZ,GAGc;AACZ,QAAM,CAAC,mBAAmB,WAAW,IAAI,eAAe,EAAE,aAAa,QAAQ,KAAK,CAAC;AAErF,QAAM,aAAa,QAAQ;AAC3B,QAAM,oBAAoB,qBAAqB;AAC/C,QAAM,mBAAmB,oBAAoB,UAAU;AACvD,QAAM,gBAAgB,iBAAiB;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,WACE,4BAA4B,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":";AAgDI,mBACE,KADF;AA9CJ,SAAyB,YAAY;AAIrC,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,2BAA2B;AAEpC,SAAS,mCAAmC;AAC5C,SAAS,2BAA2B;AAE7B,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA,UAAU;AACZ,GAGc;AACZ,QAAM,CAAC,mBAAmB,WAAW,IAAI,eAAe,EAAE,aAAa,QAAQ,KAAK,CAAC;AAErF,QAAM,aAAa,QAAQ;AAC3B,QAAM,EAAE,eAAe,cAAc,IAAI,oBAAoB,EAAE,WAAW,WAAW,CAAC;AACtF,QAAM,mBAAmB,oBAAoB,UAAU;AACvD,QAAM,gBAAgB,iBAAiB;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,WACE;AAAA,MACE;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,QAAQ,MAAM,QAAQ;AAAA,MACtB;AAAA,MACAA;AAAA,IACF;AAAA,IACJ;AAAA,EACF;AAEA,SACE,iCACE;AAAA,wBAAC,qBAAkB,UAAoB,eAA8B;AAAA,IACpE;AAAA,KACH;AAEJ;AAMA,MAAM,oBAAoB,KAAK,SAASC,mBAAkB;AAAA,EACxD;AAAA,EACA;AACF,GAGG;AACD,SAAO,SAAS,aAAa;AAC/B,CAAC;","names":["renderFn","MemoizedComponent"]}

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

@@ -1,22 +1,36 @@
 "use client";
+import { Fragment, jsxs } from "react/jsx-runtime";
 import { useResolvedValue } from "../hooks/use-resolved-value";
-import { useStylesheetFactory } from "../hooks/use-stylesheet-factory";
-import { useCssId } from "../hooks/use-css-id";
+import { useBreakpoints } from "../hooks/use-breakpoints";
+import { useControlledStyles } from "../css-runtime/hooks/use-controlled-styles";
 function ControlValue({
   data,
   definition,
   children,
+  elementKey,
+  propPathComponents,
   control
 }) {
-  const stylesheetFactory = useStylesheetFactory();
-  const id = `cv-${useCssId()}`;
+  const breakpoints = useBreakpoints();
+  const styleNamespace = `${elementKey}-controlValue-${propPathComponents.join("-")}`;
+  const { getStylesheet, styleElements } = useControlledStyles({
+    namespace: styleNamespace
+  });
+  const stylesheet = getStylesheet({
+    breakpointsData: breakpoints,
+    elementKey,
+    propPathComponents
+  });
   const 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__ */ jsxs(Fragment, { children: [
+    children(value),
+    styleElements
+  ] });
 }
 export {
   ControlValue

package/dist/esm/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":";AAUA,SAAS,wBAAwB;AACjC,SAAS,4BAA4B;AACrC,SAAS,gBAAgB;AASlB,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAiC;AAC/B,QAAM,oBAAoB,qBAAqB;AAC/C,QAAM,KAAK,MAAM,SAAS,CAAC;AAE3B,QAAM,QAAQ;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":";AAqDI;AA3CJ,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AAW7B,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAiC;AAC/B,QAAM,cAAc,eAAe;AACnC,QAAM,iBAAiB,GAAG,UAAU,iBAAiB,mBAAmB,KAAK,GAAG,CAAC;AAEjF,QAAM,EAAE,eAAe,cAAc,IAAI,oBAAoB;AAAA,IAC3D,WAAW;AAAA,EACb,CAAC;AAED,QAAM,aAAa,cAAc;AAAA,IAC/B,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,QAAQ;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,iCACG;AAAA,aAAS,KAAK;AAAA,IACd;AAAA,KACH;AAEJ;","names":["data"]}

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

@@ -1,6 +1,5 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
-import { cx } from "@emotion/css";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { getBox } from "css-box-model";
 import isHotkey from "is-hotkey";
 import {
@@ -22,6 +21,7 @@ import { pollBoxModel } from "../../../poll-box-model";
 import { Element, Leaf } from "../components";
 import { useSyncDOMSelection } from "./useSyncDOMSelection";
 import { useSyncWithBuilder } from "./useSyncWithBuilder";
+import clsx from "clsx";
 const defaultText = [
   { type: Slate.BlockType.Paragraph, children: [{ text: "" }] }
 ];
@@ -38,7 +38,7 @@ const EditableText = forwardRef(function EditableText2({ id, text, width, margin
       return;
     const element = ReactEditor.toDOMNode(editor, editor);
     return pollBoxModel({
-      element,
+      getElement: () => element,
       onBoxModelChange: (boxModel) => controller.changeBoxModel(boxModel)
     });
   }, [editor, controller]);
@@ -75,27 +75,30 @@ const EditableText = forwardRef(function EditableText2({ id, text, width, margin
     },
     [controller, editor]
   );
-  const slateReset = useSlateReset();
+  const { className: slateResetClass, styleElement: slateResetStyleElement } = useSlateReset();
   const handleBlur = useCallback((e) => {
     if (e.relatedTarget == null)
       return;
     setIsPreservingDOMSelection(false);
     ReactEditor.deselect(editor);
   }, []);
-  return /* @__PURE__ */ jsx(SlateReact, { editor, value: initialValue, onChange: delaySync, children: /* @__PURE__ */ jsx(
-    Editable,
-    {
-      id,
-      renderLeaf: Leaf,
-      renderElement: Element,
-      onFocus: handleFocus,
-      onKeyDown: handleKeyDown,
-      onBlur: handleBlur,
-      className: cx(slateReset, width, margin),
-      readOnly: editMode !== BuilderEditMode.CONTENT,
-      placeholder: "Write some text..."
-    }
-  ) });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    slateResetStyleElement,
+    /* @__PURE__ */ jsx(SlateReact, { editor, value: initialValue, onChange: delaySync, children: /* @__PURE__ */ jsx(
+      Editable,
+      {
+        id,
+        renderLeaf: Leaf,
+        renderElement: Element,
+        onFocus: handleFocus,
+        onKeyDown: handleKeyDown,
+        onBlur: handleBlur,
+        className: clsx(slateResetClass, width, margin),
+        readOnly: editMode !== BuilderEditMode.CONTENT,
+        placeholder: "Write some text..."
+      }
+    ) })
+  ] });
 });
 var editable_text_default = EditableText;
 export {

package/dist/esm/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":["EditableText"]}
+{"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":["EditableText"]}

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

@@ -1,12 +1,13 @@
-import { Fragment, jsx } from "react/jsx-runtime";
-import { cx } from "@emotion/css";
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Slate, richTextDTOtoDAO } from "@makeswift/controls";
 import { useResponsiveStyle } from "../../../../components/utils/responsive-style";
 import { InlineType, BlockType } from "../../../../slate/types";
-import { useStyle } from "../../use-style";
-import useEnhancedTypography, { useTypographyClassName } from "../typography";
+import useEnhancedTypography, { useTypographyStyle } from "../typography";
 import { Link } from "../../../../components/shared/Link";
+import { useStyle } from "../../css-runtime/hooks/use-style";
+import clsx from "clsx";
 const ReadOnlyText = forwardRef(function ReadOnlyText2({ id, text, width, margin }, ref) {
   const descendants = text == null ? [] : richTextDTOtoDAO(text);
   const descendantsAsString = getText(descendants);
@@ -25,83 +26,138 @@ const ReadOnlyText = forwardRef(function ReadOnlyText2({ id, text, width, margin
         whiteSpace: "pre-wrap",
         wordWrap: "break-word"
       },
-      className: cx(width, margin),
+      className: clsx(width, margin),
       children: descendantsAsString === "" ? /* @__PURE__ */ jsx(Placeholder, {}) : /* @__PURE__ */ jsx(Descendants, { descendants })
     }
   );
 });
 var ReadOnlyText_default = ReadOnlyText;
 function Placeholder({ text = "Write some text..." }) {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: useStyle({
-        display: "inline-block",
-        width: 0,
-        maxWidth: "100%",
-        whiteSpace: "nowrap",
-        opacity: 0.333,
-        verticalAlign: "text-top"
-      }),
-      children: text
-    }
-  );
+  const { className, styleElement } = useStyle({
+    display: "inline-block",
+    width: 0,
+    maxWidth: "100%",
+    whiteSpace: "nowrap",
+    opacity: 0.333,
+    verticalAlign: "text-top"
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    styleElement,
+    /* @__PURE__ */ jsx("span", { className, children: text })
+  ] });
 }
 function TextElement({ descendant }) {
   const enhancedTypography = useEnhancedTypography(descendant.typography);
-  const typographyClassName = useTypographyClassName(enhancedTypography);
-  return /* @__PURE__ */ jsx("span", { className: typographyClassName, children: descendant.text === "" ? "\uFEFF" : descendant.text });
+  const { className, styleElement } = useTypographyStyle(enhancedTypography);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    styleElement,
+    /* @__PURE__ */ jsx("span", { className, children: descendant.text === "" ? "\uFEFF" : descendant.text })
+  ] });
 }
 function InlineElement({ descendant }) {
-  const linkClassName = useStyle({ textDecoration: "none" });
+  const { className: linkClassName, styleElement: linkStyleElement } = useStyle({
+    textDecoration: "none"
+  });
   switch (descendant.type) {
     case InlineType.Code:
-      return /* @__PURE__ */ jsx("code", { children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) });
+      return /* @__PURE__ */ jsxs("code", { children: [
+        linkStyleElement,
+        /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children })
+      ] });
     case InlineType.SuperScript:
-      return /* @__PURE__ */ jsx("sup", { children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) });
+      return /* @__PURE__ */ jsxs("sup", { children: [
+        linkStyleElement,
+        /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children })
+      ] });
     case InlineType.SubScript:
-      return /* @__PURE__ */ jsx("sub", { children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) });
+      return /* @__PURE__ */ jsxs("sub", { children: [
+        linkStyleElement,
+        /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children })
+      ] });
     case InlineType.Link:
-      return /* @__PURE__ */ jsx(Link, { className: linkClassName, link: descendant.link ?? void 0, children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) });
+      return /* @__PURE__ */ jsxs(Link, { className: linkClassName, link: descendant.link ?? void 0, children: [
+        linkStyleElement,
+        /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children })
+      ] });
   }
 }
 function BlockElement({ descendant }) {
-  const blockStyles = [
-    useStyle({ margin: 0 }),
-    useStyle(useResponsiveStyle([descendant.textAlign], ([textAlign = "left"]) => ({ textAlign })))
-  ];
-  const quoteStyle = useStyle({
+  const responsiveBlockStyles = useResponsiveStyle(
+    [descendant.textAlign],
+    ([textAlign = "left"]) => ({ textAlign })
+  );
+  const blockStyles = { margin: 0, ...responsiveBlockStyles };
+  const { className: blockStylesClassName, styleElement: blockStylesStyleElement } = 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 } = useStyle(quoteStyles);
   switch (descendant.type) {
     case BlockType.Default:
     case BlockType.Paragraph:
-      return /* @__PURE__ */ jsx("p", { className: cx(...blockStyles), children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) });
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ jsx("p", { className: blockStylesClassName, children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) })
+      ] });
     case BlockType.Heading1:
-      return /* @__PURE__ */ jsx("h1", { className: cx(...blockStyles), children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) });
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ jsx("h1", { className: blockStylesClassName, children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) })
+      ] });
     case BlockType.Heading2:
-      return /* @__PURE__ */ jsx("h2", { className: cx(...blockStyles), children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) });
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ jsx("h2", { className: blockStylesClassName, children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) })
+      ] });
     case BlockType.Heading3:
-      return /* @__PURE__ */ jsx("h3", { className: cx(...blockStyles), children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) });
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ jsx("h3", { className: blockStylesClassName, children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) })
+      ] });
     case BlockType.Heading4:
-      return /* @__PURE__ */ jsx("h4", { className: cx(...blockStyles), children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) });
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ jsx("h4", { className: blockStylesClassName, children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) })
+      ] });
     case BlockType.Heading5:
-      return /* @__PURE__ */ jsx("h5", { className: cx(...blockStyles), children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) });
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ jsx("h5", { className: blockStylesClassName, children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) })
+      ] });
     case BlockType.Heading6:
-      return /* @__PURE__ */ jsx("h6", { className: cx(...blockStyles), children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) });
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ jsx("h6", { className: blockStylesClassName, children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) })
+      ] });
     case BlockType.BlockQuote:
-      return /* @__PURE__ */ jsx("blockquote", { className: cx(...blockStyles, quoteStyle), children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) });
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        blockStylesStyleElement,
+        quoteStylesStyleElement,
+        /* @__PURE__ */ jsx("blockquote", { className: clsx(blockStylesClassName, quoteStylesClassName), children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) })
+      ] });
     case BlockType.OrderedList:
-      return /* @__PURE__ */ jsx("ol", { className: cx(...blockStyles), style: { listStylePosition: "inside" }, children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) });
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ jsx("ol", { className: blockStylesClassName, style: { listStylePosition: "inside" }, children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) })
+      ] });
     case BlockType.UnorderedList:
-      return /* @__PURE__ */ jsx("ul", { className: cx(...blockStyles), style: { listStylePosition: "inside" }, children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) });
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ jsx("ul", { className: blockStylesClassName, style: { listStylePosition: "inside" }, children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) })
+      ] });
     case BlockType.ListItem:
-      return /* @__PURE__ */ jsx("li", { className: cx(...blockStyles), children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) });
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ jsx("li", { className: blockStylesClassName, children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) })
+      ] });
     case BlockType.ListItemChild:
-      return /* @__PURE__ */ jsx("span", { className: cx(...blockStyles), children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) });
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ jsx("span", { className: blockStylesClassName, children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) })
+      ] });
     default:
       return null;
   }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/runtimes/react/controls/rich-text/ReadOnlyText.tsx"],"sourcesContent":["import { cx } from '@emotion/css'\nimport { ForwardedRef, forwardRef } from 'react'\nimport { Descendant, Text } from 'slate'\n\nimport { Slate, RichTextValue, richTextDTOtoDAO } from '@makeswift/controls'\n\nimport { useResponsiveStyle } from '../../../../components/utils/responsive-style'\nimport { InlineType, BlockType } from '../../../../slate/types'\nimport { useStyle } from '../../use-style'\nimport useEnhancedTypography, { useTypographyClassName } from '../typography'\nimport { Link } from '../../../../components/shared/Link'\n\ntype Props = {\n  id?: string\n  text?: RichTextValue\n  width?: string\n  margin?: string\n}\n\nconst ReadOnlyText = forwardRef(function ReadOnlyText(\n  { id, text, width, margin }: Props,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const descendants = text == null ? [] : richTextDTOtoDAO(text)\n  const descendantsAsString = getText(descendants)\n\n  return (\n    <div\n      ref={ref}\n      id={id}\n      style={{\n        /**\n         * These are the default styles that Slate uses for its editable div.\n         * https://github.com/ianstormtaylor/slate/blob/4bd15ed3950e3a0871f5d0ecb391bb637c05e59d/packages/slate-react/src/components/editable.tsx\n         * Search for `disableDefaultStyles`\n         */\n        position: 'relative',\n        whiteSpace: 'pre-wrap',\n        wordWrap: 'break-word',\n      }}\n      className={cx(width, margin)}\n    >\n      {descendantsAsString === '' ? <Placeholder /> : <Descendants descendants={descendants} />}\n    </div>\n  )\n})\n\nexport default ReadOnlyText\n\nfunction Placeholder({ text = 'Write some text...' }: { text?: string }) {\n  return (\n    <span\n      className={useStyle({\n        display: 'inline-block',\n        width: 0,\n        maxWidth: '100%',\n        whiteSpace: 'nowrap',\n        opacity: 0.333,\n        verticalAlign: 'text-top',\n      })}\n    >\n      {text}\n    </span>\n  )\n}\n\nexport interface TextProps {\n  descendant: Text\n}\n\nexport function TextElement({ descendant }: TextProps) {\n  const enhancedTypography = useEnhancedTypography(descendant.typography)\n  const typographyClassName = useTypographyClassName(enhancedTypography)\n\n  return (\n    <span className={typographyClassName}>\n      {descendant.text === '' ? '\\uFEFF' : descendant.text}\n    </span>\n  )\n}\n\nexport interface InlineProps {\n  descendant: Slate.Inline\n}\n\nfunction InlineElement({ descendant }: InlineProps) {\n  const linkClassName = useStyle({ textDecoration: 'none' })\n\n  switch (descendant.type) {\n    case InlineType.Code:\n      return (\n        <code>\n          <Descendants descendants={descendant.children} />\n        </code>\n      )\n\n    case InlineType.SuperScript:\n      return (\n        <sup>\n          <Descendants descendants={descendant.children} />\n        </sup>\n      )\n\n    case InlineType.SubScript:\n      return (\n        <sub>\n          <Descendants descendants={descendant.children} />\n        </sub>\n      )\n\n    case InlineType.Link:\n      return (\n        <Link className={linkClassName} link={descendant.link ?? undefined}>\n          <Descendants descendants={descendant.children} />\n        </Link>\n      )\n  }\n}\n\nexport interface BlockProps {\n  descendant: Slate.Block\n}\n\nexport function BlockElement({ descendant }: BlockProps) {\n  const blockStyles = [\n    useStyle({ margin: 0 }),\n    useStyle(useResponsiveStyle([descendant.textAlign], ([textAlign = 'left']) => ({ textAlign }))),\n  ]\n  const quoteStyle = useStyle({\n    padding: '0.5em 10px',\n    fontSize: '1.25em',\n    fontWeight: '300',\n    borderLeft: '5px solid rgba(0, 0, 0, 0.1)',\n  })\n\n  switch (descendant.type) {\n    case BlockType.Default:\n    case BlockType.Paragraph:\n      return (\n        <p className={cx(...blockStyles)}>\n          <Descendants descendants={descendant.children} />\n        </p>\n      )\n    case BlockType.Heading1:\n      return (\n        <h1 className={cx(...blockStyles)}>\n          <Descendants descendants={descendant.children} />\n        </h1>\n      )\n    case BlockType.Heading2:\n      return (\n        <h2 className={cx(...blockStyles)}>\n          <Descendants descendants={descendant.children} />\n        </h2>\n      )\n    case BlockType.Heading3:\n      return (\n        <h3 className={cx(...blockStyles)}>\n          <Descendants descendants={descendant.children} />\n        </h3>\n      )\n    case BlockType.Heading4:\n      return (\n        <h4 className={cx(...blockStyles)}>\n          <Descendants descendants={descendant.children} />\n        </h4>\n      )\n    case BlockType.Heading5:\n      return (\n        <h5 className={cx(...blockStyles)}>\n          <Descendants descendants={descendant.children} />\n        </h5>\n      )\n    case BlockType.Heading6:\n      return (\n        <h6 className={cx(...blockStyles)}>\n          <Descendants descendants={descendant.children} />\n        </h6>\n      )\n    case BlockType.BlockQuote:\n      return (\n        <blockquote className={cx(...blockStyles, quoteStyle)}>\n          <Descendants descendants={descendant.children} />\n        </blockquote>\n      )\n    case BlockType.OrderedList:\n      return (\n        <ol className={cx(...blockStyles)} style={{ listStylePosition: 'inside' }}>\n          <Descendants descendants={descendant.children} />\n        </ol>\n      )\n    case BlockType.UnorderedList:\n      return (\n        <ul className={cx(...blockStyles)} style={{ listStylePosition: 'inside' }}>\n          <Descendants descendants={descendant.children} />\n        </ul>\n      )\n    case BlockType.ListItem:\n      return (\n        <li className={cx(...blockStyles)}>\n          <Descendants descendants={descendant.children} />\n        </li>\n      )\n    case BlockType.ListItemChild:\n      return (\n        <span className={cx(...blockStyles)}>\n          <Descendants descendants={descendant.children} />\n        </span>\n      )\n    default:\n      return null\n  }\n}\n\nfunction Descendants({ descendants }: { descendants: Descendant[] }) {\n  return (\n    <>\n      {descendants.map((descendant, index) => {\n        if (Slate.isText(descendant)) {\n          return <TextElement key={index} descendant={descendant} />\n        }\n\n        switch (descendant.type) {\n          case InlineType.Link:\n          case InlineType.Code:\n          case InlineType.SubScript:\n          case InlineType.SuperScript:\n            return <InlineElement key={index} descendant={descendant} />\n          case BlockType.Heading1:\n          case BlockType.Heading2:\n          case BlockType.Heading3:\n          case BlockType.Heading4:\n          case BlockType.Heading5:\n          case BlockType.Heading6:\n          case BlockType.BlockQuote:\n          case BlockType.Paragraph:\n          case BlockType.Default:\n          case BlockType.OrderedList:\n          case BlockType.UnorderedList:\n          case BlockType.ListItem:\n          case BlockType.ListItemChild:\n            return <BlockElement key={index} descendant={descendant} />\n          default:\n            return null\n        }\n      })}\n    </>\n  )\n}\n\nfunction isBlock(descendant: Descendant): descendant is Slate.Block {\n  if ('text' in descendant) return false\n\n  switch (descendant.type) {\n    case BlockType.Heading1:\n    case BlockType.Heading2:\n    case BlockType.Heading3:\n    case BlockType.Heading4:\n    case BlockType.Heading5:\n    case BlockType.Heading6:\n    case BlockType.BlockQuote:\n    case BlockType.Paragraph:\n    case BlockType.Default:\n    case BlockType.OrderedList:\n    case BlockType.UnorderedList:\n    case BlockType.ListItem:\n    case BlockType.ListItemChild:\n      return true\n\n    default:\n      return false\n  }\n}\n\nfunction getTextByDescendant(descendant: Descendant): string {\n  if ('text' in descendant) {\n    return descendant.text ?? ''\n  }\n\n  switch (descendant.type) {\n    case InlineType.Link:\n    case InlineType.Code:\n    case InlineType.SubScript:\n    case InlineType.SuperScript:\n      return descendant.children.map(descendant => getTextByDescendant(descendant)).join('') ?? ''\n    case BlockType.Heading1:\n    case BlockType.Heading2:\n    case BlockType.Heading3:\n    case BlockType.Heading4:\n    case BlockType.Heading5:\n    case BlockType.Heading6:\n    case BlockType.BlockQuote:\n    case BlockType.Paragraph:\n    case BlockType.Default:\n    case BlockType.OrderedList:\n    case BlockType.UnorderedList:\n    case BlockType.ListItem:\n    case BlockType.ListItemChild:\n      return (\n        descendant.children\n          .map(descendant => getTextByDescendant(descendant))\n          .join(descendant.children.every(isBlock) ? '\\n' : '') ?? ''\n      )\n    default:\n      return ''\n  }\n}\n\nfunction getText(descendant: Descendant[]): string {\n  return descendant.map(getTextByDescendant).join('\\n')\n}\n"],"mappings":"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","names":["ReadOnlyText","descendant"]}
+{"version":3,"sources":["../../../../../../src/runtimes/react/controls/rich-text/ReadOnlyText.tsx"],"sourcesContent":["'use client'\n\nimport { ForwardedRef, forwardRef } from 'react'\nimport { Descendant, Text } from 'slate'\n\nimport { Slate, RichTextValue, richTextDTOtoDAO } from '@makeswift/controls'\n\nimport { useResponsiveStyle } from '../../../../components/utils/responsive-style'\nimport { InlineType, BlockType } from '../../../../slate/types'\nimport useEnhancedTypography, { useTypographyStyle } from '../typography'\nimport { Link } from '../../../../components/shared/Link'\nimport { useStyle } from '../../css-runtime/hooks/use-style'\nimport { CSSObject } from '@emotion/serialize'\nimport clsx from 'clsx'\n\ntype Props = {\n  id?: string\n  text?: RichTextValue\n  width?: string\n  margin?: string\n}\n\nconst ReadOnlyText = forwardRef(function ReadOnlyText(\n  { id, text, width, margin }: Props,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const descendants = text == null ? [] : richTextDTOtoDAO(text)\n  const descendantsAsString = getText(descendants)\n\n  return (\n    <div\n      ref={ref}\n      id={id}\n      style={{\n        /**\n         * These are the default styles that Slate uses for its editable div.\n         * https://github.com/ianstormtaylor/slate/blob/4bd15ed3950e3a0871f5d0ecb391bb637c05e59d/packages/slate-react/src/components/editable.tsx\n         * Search for `disableDefaultStyles`\n         */\n        position: 'relative',\n        whiteSpace: 'pre-wrap',\n        wordWrap: 'break-word',\n      }}\n      className={clsx(width, margin)}\n    >\n      {descendantsAsString === '' ? <Placeholder /> : <Descendants descendants={descendants} />}\n    </div>\n  )\n})\n\nexport default ReadOnlyText\n\nfunction Placeholder({ text = 'Write some text...' }: { text?: string }) {\n  const { className, styleElement } = useStyle({\n    display: 'inline-block',\n    width: 0,\n    maxWidth: '100%',\n    whiteSpace: 'nowrap',\n    opacity: 0.333,\n    verticalAlign: 'text-top',\n  })\n  return (\n    <>\n      {styleElement}\n      <span className={className}>{text}</span>\n    </>\n  )\n}\n\nexport interface TextProps {\n  descendant: Text\n}\n\nexport function TextElement({ descendant }: TextProps) {\n  const enhancedTypography = useEnhancedTypography(descendant.typography)\n  const { className, styleElement } = useTypographyStyle(enhancedTypography)\n\n  return (\n    <>\n      {styleElement}\n      <span className={className}>{descendant.text === '' ? '\\uFEFF' : descendant.text}</span>\n    </>\n  )\n}\n\nexport interface InlineProps {\n  descendant: Slate.Inline\n}\n\nfunction InlineElement({ descendant }: InlineProps) {\n  const { className: linkClassName, styleElement: linkStyleElement } = useStyle({\n    textDecoration: 'none',\n  })\n\n  switch (descendant.type) {\n    case InlineType.Code:\n      return (\n        <code>\n          {linkStyleElement}\n          <Descendants descendants={descendant.children} />\n        </code>\n      )\n\n    case InlineType.SuperScript:\n      return (\n        <sup>\n          {linkStyleElement}\n          <Descendants descendants={descendant.children} />\n        </sup>\n      )\n\n    case InlineType.SubScript:\n      return (\n        <sub>\n          {linkStyleElement}\n          <Descendants descendants={descendant.children} />\n        </sub>\n      )\n\n    case InlineType.Link:\n      return (\n        <Link className={linkClassName} link={descendant.link ?? undefined}>\n          {linkStyleElement}\n          <Descendants descendants={descendant.children} />\n        </Link>\n      )\n  }\n}\n\nexport interface BlockProps {\n  descendant: Slate.Block\n}\n\nexport function BlockElement({ descendant }: BlockProps) {\n  const responsiveBlockStyles = useResponsiveStyle(\n    [descendant.textAlign],\n    ([textAlign = 'left']) => ({ textAlign }),\n  )\n  const blockStyles: CSSObject = { margin: 0, ...responsiveBlockStyles }\n  const { className: blockStylesClassName, styleElement: blockStylesStyleElement } =\n    useStyle(blockStyles)\n  const quoteStyles = {\n    padding: '0.5em 10px',\n    fontSize: '1.25em',\n    fontWeight: '300',\n    borderLeft: '5px solid rgba(0, 0, 0, 0.1)',\n  }\n  const { className: quoteStylesClassName, styleElement: quoteStylesStyleElement } =\n    useStyle(quoteStyles)\n\n  switch (descendant.type) {\n    case BlockType.Default:\n    case BlockType.Paragraph:\n      return (\n        <>\n          {blockStylesStyleElement}\n          <p className={blockStylesClassName}>\n            <Descendants descendants={descendant.children} />\n          </p>\n        </>\n      )\n    case BlockType.Heading1:\n      return (\n        <>\n          {blockStylesStyleElement}\n          <h1 className={blockStylesClassName}>\n            <Descendants descendants={descendant.children} />\n          </h1>\n        </>\n      )\n    case BlockType.Heading2:\n      return (\n        <>\n          {blockStylesStyleElement}\n          <h2 className={blockStylesClassName}>\n            <Descendants descendants={descendant.children} />\n          </h2>\n        </>\n      )\n    case BlockType.Heading3:\n      return (\n        <>\n          {blockStylesStyleElement}\n          <h3 className={blockStylesClassName}>\n            <Descendants descendants={descendant.children} />\n          </h3>\n        </>\n      )\n    case BlockType.Heading4:\n      return (\n        <>\n          {blockStylesStyleElement}\n          <h4 className={blockStylesClassName}>\n            <Descendants descendants={descendant.children} />\n          </h4>\n        </>\n      )\n    case BlockType.Heading5:\n      return (\n        <>\n          {blockStylesStyleElement}\n          <h5 className={blockStylesClassName}>\n            <Descendants descendants={descendant.children} />\n          </h5>\n        </>\n      )\n    case BlockType.Heading6:\n      return (\n        <>\n          {blockStylesStyleElement}\n          <h6 className={blockStylesClassName}>\n            <Descendants descendants={descendant.children} />\n          </h6>\n        </>\n      )\n    case BlockType.BlockQuote:\n      return (\n        <>\n          {blockStylesStyleElement}\n          {quoteStylesStyleElement}\n          <blockquote className={clsx(blockStylesClassName, quoteStylesClassName)}>\n            <Descendants descendants={descendant.children} />\n          </blockquote>\n        </>\n      )\n    case BlockType.OrderedList:\n      return (\n        <>\n          {blockStylesStyleElement}\n          <ol className={blockStylesClassName} style={{ listStylePosition: 'inside' }}>\n            <Descendants descendants={descendant.children} />\n          </ol>\n        </>\n      )\n    case BlockType.UnorderedList:\n      return (\n        <>\n          {blockStylesStyleElement}\n          <ul className={blockStylesClassName} style={{ listStylePosition: 'inside' }}>\n            <Descendants descendants={descendant.children} />\n          </ul>\n        </>\n      )\n    case BlockType.ListItem:\n      return (\n        <>\n          {blockStylesStyleElement}\n          <li className={blockStylesClassName}>\n            <Descendants descendants={descendant.children} />\n          </li>\n        </>\n      )\n    case BlockType.ListItemChild:\n      return (\n        <>\n          {blockStylesStyleElement}\n          <span className={blockStylesClassName}>\n            <Descendants descendants={descendant.children} />\n          </span>\n        </>\n      )\n    default:\n      return null\n  }\n}\n\nfunction Descendants({ descendants }: { descendants: Descendant[] }) {\n  return (\n    <>\n      {descendants.map((descendant, index) => {\n        if (Slate.isText(descendant)) {\n          return <TextElement key={index} descendant={descendant} />\n        }\n\n        switch (descendant.type) {\n          case InlineType.Link:\n          case InlineType.Code:\n          case InlineType.SubScript:\n          case InlineType.SuperScript:\n            return <InlineElement key={index} descendant={descendant} />\n          case BlockType.Heading1:\n          case BlockType.Heading2:\n          case BlockType.Heading3:\n          case BlockType.Heading4:\n          case BlockType.Heading5:\n          case BlockType.Heading6:\n          case BlockType.BlockQuote:\n          case BlockType.Paragraph:\n          case BlockType.Default:\n          case BlockType.OrderedList:\n          case BlockType.UnorderedList:\n          case BlockType.ListItem:\n          case BlockType.ListItemChild:\n            return <BlockElement key={index} descendant={descendant} />\n          default:\n            return null\n        }\n      })}\n    </>\n  )\n}\n\nfunction isBlock(descendant: Descendant): descendant is Slate.Block {\n  if ('text' in descendant) return false\n\n  switch (descendant.type) {\n    case BlockType.Heading1:\n    case BlockType.Heading2:\n    case BlockType.Heading3:\n    case BlockType.Heading4:\n    case BlockType.Heading5:\n    case BlockType.Heading6:\n    case BlockType.BlockQuote:\n    case BlockType.Paragraph:\n    case BlockType.Default:\n    case BlockType.OrderedList:\n    case BlockType.UnorderedList:\n    case BlockType.ListItem:\n    case BlockType.ListItemChild:\n      return true\n\n    default:\n      return false\n  }\n}\n\nfunction getTextByDescendant(descendant: Descendant): string {\n  if ('text' in descendant) {\n    return descendant.text ?? ''\n  }\n\n  switch (descendant.type) {\n    case InlineType.Link:\n    case InlineType.Code:\n    case InlineType.SubScript:\n    case InlineType.SuperScript:\n      return descendant.children.map(descendant => getTextByDescendant(descendant)).join('') ?? ''\n    case BlockType.Heading1:\n    case BlockType.Heading2:\n    case BlockType.Heading3:\n    case BlockType.Heading4:\n    case BlockType.Heading5:\n    case BlockType.Heading6:\n    case BlockType.BlockQuote:\n    case BlockType.Paragraph:\n    case BlockType.Default:\n    case BlockType.OrderedList:\n    case BlockType.UnorderedList:\n    case BlockType.ListItem:\n    case BlockType.ListItemChild:\n      return (\n        descendant.children\n          .map(descendant => getTextByDescendant(descendant))\n          .join(descendant.children.every(isBlock) ? '\\n' : '') ?? ''\n      )\n    default:\n      return ''\n  }\n}\n\nfunction getText(descendant: Descendant[]): string {\n  return descendant.map(getTextByDescendant).join('\\n')\n}\n"],"mappings":"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","names":["ReadOnlyText","descendant"]}