next-sanity 3.0.5 → 3.1.1

package/README.md

@@ -522,6 +522,7 @@ export default function StudioPage() {
 }
 ```
 
+Set the right `viewport` meta tag, favicons and mroe
 `app/studio/[[...index]]/head.tsx`:
 
 ```tsx
@@ -546,6 +547,20 @@ export default function CustomStudioHead() {
 }
 ```
 
+Improve the Studio loading experience by setting a `loading.tsx` route.
+`app/studio/[[...index]]/loading.tsx`:
+
+```tsx
+'use client'
+
+import config from '../../../sanity.config'
+import NextStudioLoading from 'next-sanity/studio/loading'
+
+export default function Loading() {
+  return <NextStudioLoading config={config} />
+}
+```
+
 #### Next 12 or `pages/studio`
 
 Using just `NextStudio` gives you a fully working Sanity Studio v3. However we recommend also using `NextStudioHead` as it ensures CSS Media Queries that target mobile devices with display cutouts (for example iPhone's "The Notch" and "Dynamic Island") and other details.

package/dist/_chunks/NextStudioLoading-37471b1b.js

@@ -0,0 +1,128 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { SpinnerIcon } from '@sanity/icons';
+import { _responsive, rem } from '@sanity/ui';
+import { useMemo } from 'react';
+import { defaultTheme } from 'sanity';
+function isWorkspaces(config) {
+  return Array.isArray(config);
+}
+function isWorkspaceWithTheme(workspace) {
+  return Boolean(workspace.theme);
+}
+function useTheme(config) {
+  const workspace = useMemo(() => isWorkspaces(config) ? config[0] : config, [config]);
+  return useMemo(() => isWorkspaceWithTheme(workspace) ? workspace.theme : defaultTheme, [workspace]);
+}
+const style = {
+  __html: "\n.sanity-app-no-js__root {\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0;\n  bottom: 0;\n  background: #fff;\n  z-index: 1;\n}\n\n.sanity-app-no-js__content {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  text-align: center;\n  font-family: helvetica, arial, sans-serif;\n}\n"
+};
+const NextStudioNoScript = () => /* @__PURE__ */jsx("noscript", {
+  children: /* @__PURE__ */jsx("div", {
+    className: "sanity-app-no-js__root",
+    children: /* @__PURE__ */jsxs("div", {
+      className: "sanity-app-no-js__content",
+      children: [/* @__PURE__ */jsx("style", {
+        type: "text/css",
+        dangerouslySetInnerHTML: style
+      }), /* @__PURE__ */jsx("h1", {
+        children: "JavaScript disabled"
+      }), /* @__PURE__ */jsxs("p", {
+        children: ["Please ", /* @__PURE__ */jsx("a", {
+          href: "https://www.enable-javascript.com/",
+          children: "enable JavaScript"
+        }), " in your browser and reload the page to proceed."]
+      })]
+    })
+  })
+});
+const keyframes = "\nfrom {\n  transform: rotate(0deg);\n}\n\nto {\n  transform: rotate(360deg);\n}\n";
+function NextStudioLoading(props) {
+  const {
+    config,
+    scheme = "light",
+    unstable__noScript = true
+  } = props;
+  const id = "next-sanity-spinner";
+  const theme = useTheme(config);
+  const {
+    fonts,
+    media
+  } = theme;
+  const styles = _responsive(media, [2], size => {
+    const {
+      ascenderHeight,
+      descenderHeight,
+      lineHeight,
+      iconSize
+    } = fonts.text.sizes[size];
+    const capHeight = lineHeight - ascenderHeight - descenderHeight;
+    return {
+      wrapper: {
+        display: "block",
+        animation: "".concat(id, " 500ms linear infinite"),
+        color: theme.color[scheme].default.muted.default.enabled.muted.fg,
+        width: rem(capHeight),
+        height: rem(capHeight)
+      },
+      svg: {
+        display: "block",
+        width: rem(iconSize),
+        height: rem(iconSize),
+        margin: (capHeight - iconSize) / 2
+      }
+    };
+  })[0];
+  return /* @__PURE__ */jsxs(Fragment, {
+    children: [unstable__noScript && /* @__PURE__ */jsx(NextStudioNoScript, {}), /* @__PURE__ */jsx("div", {
+      style: {
+        fontFamily: fonts.text.family,
+        backgroundColor: theme.color[scheme].default.base.bg,
+        height: "100vh",
+        maxHeight: "100dvh",
+        overscrollBehavior: "none",
+        WebkitFontSmoothing: "antialiased",
+        overflow: "auto"
+      },
+      children: /* @__PURE__ */jsxs("div", {
+        "data-ui": "Flex",
+        style: {
+          display: "flex",
+          minWidth: 0,
+          minHeight: 0,
+          alignItems: "center",
+          justifyContent: "center",
+          flexDirection: "column",
+          height: "100%",
+          margin: 0,
+          padding: 0,
+          gap: "10px"
+        },
+        children: [/* @__PURE__ */jsx("style", {
+          children: "@keyframes ".concat(id, " {").concat(keyframes, "}")
+        }, scheme), /* @__PURE__ */jsx("div", {
+          "data-ui": "Text",
+          style: {
+            position: "relative",
+            fontWeight: 400,
+            padding: "1px 0px",
+            fontSize: "1rem",
+            lineHeight: "calc(1.3125)",
+            transform: "translateY(-5px)",
+            color: theme.color[scheme].default.muted.default.enabled.muted.fg
+          },
+          children: /* @__PURE__ */jsx("span", {
+            children: "Loading\u2026"
+          })
+        }), /* @__PURE__ */jsx("div", {
+          "data-ui": "Spinner",
+          style: styles.wrapper,
+          children: /* @__PURE__ */jsx(SpinnerIcon, {
+            style: styles.svg
+          })
+        })]
+      })
+    })]
+  });
+}
+export { NextStudioLoading as N, NextStudioNoScript as a, useTheme as u };
+//# sourceMappingURL=NextStudioLoading-37471b1b.js.map

package/dist/_chunks/NextStudioLoading-37471b1b.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NextStudioLoading-37471b1b.js","sources":["../../src/studio/useTheme.ts","../../src/studio/NextStudioNoScript.tsx","../../src/studio/NextStudioLoading.tsx"],"sourcesContent":["import {useMemo} from 'react'\nimport {\n  type Config,\n  type SingleWorkspace,\n  type StudioTheme,\n  type WorkspaceOptions,\n  defaultTheme,\n} from 'sanity'\n\ntype WithTheme = {\n  theme: StudioTheme\n}\ntype SingleWorkspaceWithTheme = Omit<SingleWorkspace, 'theme'> & WithTheme\ntype WorkspaceOptionsWithTheme = Omit<WorkspaceOptions, 'theme'> & WithTheme\n\nfunction isWorkspaces(config: Config): config is WorkspaceOptions[] {\n  return Array.isArray(config)\n}\n\nfunction isWorkspaceWithTheme(\n  workspace: SingleWorkspace | WorkspaceOptions\n): workspace is SingleWorkspaceWithTheme | WorkspaceOptionsWithTheme {\n  return Boolean(workspace.theme)\n}\n\n/** @alpha */\nexport function useTheme(config: Config): StudioTheme {\n  const workspace = useMemo<SingleWorkspace | WorkspaceOptions>(\n    () => (isWorkspaces(config) ? config[0] : config),\n    [config]\n  )\n  return useMemo<StudioTheme>(\n    () => (isWorkspaceWithTheme(workspace) ? workspace.theme : defaultTheme),\n    [workspace]\n  )\n}\n","/* eslint-disable react/no-danger */\n\nconst style = {\n  __html: `\n.sanity-app-no-js__root {\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0;\n  bottom: 0;\n  background: #fff;\n  z-index: 1;\n}\n\n.sanity-app-no-js__content {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  text-align: center;\n  font-family: helvetica, arial, sans-serif;\n}\n`,\n} as const\n\n/** @alpha */\nexport const NextStudioNoScript = () => (\n  <noscript>\n    <div className=\"sanity-app-no-js__root\">\n      <div className=\"sanity-app-no-js__content\">\n        <style type=\"text/css\" dangerouslySetInnerHTML={style} />\n        <h1>JavaScript disabled</h1>\n        <p>\n          Please <a href=\"https://www.enable-javascript.com/\">enable JavaScript</a> in your\n          browser and reload the page to proceed.\n        </p>\n      </div>\n    </div>\n  </noscript>\n)\n","/* eslint-disable no-warning-comments */\n// Intentionally not using `styled-components` to ensure it works in any `next` setup.\n// Wether 'styled-components' SSR is setup or not.\n\nimport {SpinnerIcon} from '@sanity/icons'\nimport {_responsive, rem} from '@sanity/ui'\nimport type {StudioProps} from 'sanity'\n\nimport {NextStudioNoScript} from './NextStudioNoScript'\nimport {useTheme} from './useTheme'\n\n/** @alpha */\nexport interface NextStudioLoadingProps extends Pick<StudioProps, 'config' | 'scheme'> {\n  /**\n   * Render the <noscript> tag\n   * @defaultValue true\n   * @alpha\n   */\n  unstable__noScript?: boolean\n}\n\nconst keyframes = `\nfrom {\n  transform: rotate(0deg);\n}\n\nto {\n  transform: rotate(360deg);\n}\n`\n\nexport function NextStudioLoading(props: NextStudioLoadingProps) {\n  const {config, scheme = 'light', unstable__noScript = true} = props\n  const id = 'next-sanity-spinner'\n  const theme = useTheme(config)\n  const {fonts, media} = theme\n\n  const styles: any = _responsive(media, [2], (size: number) => {\n    const {ascenderHeight, descenderHeight, lineHeight, iconSize} = fonts.text.sizes[size]\n    const capHeight = lineHeight - ascenderHeight - descenderHeight\n\n    return {\n      wrapper: {\n        display: 'block',\n        animation: `${id} 500ms linear infinite`,\n        color: theme.color[scheme].default.muted.default.enabled.muted.fg,\n        width: rem(capHeight),\n        height: rem(capHeight),\n      },\n      svg: {\n        display: 'block',\n        width: rem(iconSize),\n        height: rem(iconSize),\n        margin: (capHeight - iconSize) / 2,\n      },\n    }\n  })[0]\n\n  return (\n    <>\n      {unstable__noScript && <NextStudioNoScript />}\n      <div\n        style={{\n          fontFamily: fonts.text.family,\n          backgroundColor: theme.color[scheme].default.base.bg,\n          height: '100vh',\n          maxHeight: '100dvh',\n          overscrollBehavior: 'none',\n          WebkitFontSmoothing: 'antialiased',\n          overflow: 'auto',\n        }}\n      >\n        <div\n          data-ui=\"Flex\"\n          style={{\n            display: 'flex',\n            minWidth: 0,\n            minHeight: 0,\n            alignItems: 'center',\n            justifyContent: 'center',\n            flexDirection: 'column',\n            height: '100%',\n            margin: 0,\n            padding: 0,\n            // @TODO use rem calc\n            gap: '10px',\n          }}\n        >\n          <style key={scheme}>{`@keyframes ${id} {${keyframes}}`}</style>\n          <div\n            data-ui=\"Text\"\n            style={{\n              position: 'relative',\n              // @TODO read from theme\n              fontWeight: 400,\n              // @TODO read from theme\n              padding: '1px 0px',\n              // @TODO use rem calc\n              fontSize: '1rem',\n              // @TODO use rem calc\n              lineHeight: 'calc(1.3125)',\n              // @TODO use rem calc\n              transform: 'translateY(-5px)',\n              color: theme.color[scheme].default.muted.default.enabled.muted.fg,\n            }}\n          >\n            <span>Loading…</span>\n          </div>\n          <div data-ui=\"Spinner\" style={styles.wrapper}>\n            <SpinnerIcon style={styles.svg} />\n          </div>\n        </div>\n      </div>\n    </>\n  )\n}\n"],"names":["isWorkspaces","config","Array","isArray","isWorkspaceWithTheme","workspace","Boolean","theme","useTheme","useMemo","defaultTheme","style","__html","NextStudioNoScript","jsx","children","className","jsxs","type","dangerouslySetInnerHTML","href","keyframes","NextStudioLoading","props","scheme","unstable__noScript","id","fonts","media","styles","_responsive","size","ascenderHeight","descenderHeight","lineHeight","iconSize","text","sizes","capHeight","wrapper","display","animation","color","default","muted","enabled","fg","width","rem","height","svg","margin","Fragment","fontFamily","family","backgroundColor","base","bg","maxHeight","overscrollBehavior","WebkitFontSmoothing","overflow","minWidth","minHeight","alignItems","justifyContent","flexDirection","padding","gap","position","fontWeight","fontSize","transform","SpinnerIcon"],"mappings":"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"}

package/dist/_chunks/NextStudioLoading-97555646.cjs

@@ -0,0 +1,132 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var icons = require('@sanity/icons');
+var ui = require('@sanity/ui');
+var react = require('react');
+var sanity = require('sanity');
+function isWorkspaces(config) {
+  return Array.isArray(config);
+}
+function isWorkspaceWithTheme(workspace) {
+  return Boolean(workspace.theme);
+}
+function useTheme(config) {
+  const workspace = react.useMemo(() => isWorkspaces(config) ? config[0] : config, [config]);
+  return react.useMemo(() => isWorkspaceWithTheme(workspace) ? workspace.theme : sanity.defaultTheme, [workspace]);
+}
+const style = {
+  __html: "\n.sanity-app-no-js__root {\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0;\n  bottom: 0;\n  background: #fff;\n  z-index: 1;\n}\n\n.sanity-app-no-js__content {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  text-align: center;\n  font-family: helvetica, arial, sans-serif;\n}\n"
+};
+const NextStudioNoScript = () => /* @__PURE__ */jsxRuntime.jsx("noscript", {
+  children: /* @__PURE__ */jsxRuntime.jsx("div", {
+    className: "sanity-app-no-js__root",
+    children: /* @__PURE__ */jsxRuntime.jsxs("div", {
+      className: "sanity-app-no-js__content",
+      children: [/* @__PURE__ */jsxRuntime.jsx("style", {
+        type: "text/css",
+        dangerouslySetInnerHTML: style
+      }), /* @__PURE__ */jsxRuntime.jsx("h1", {
+        children: "JavaScript disabled"
+      }), /* @__PURE__ */jsxRuntime.jsxs("p", {
+        children: ["Please ", /* @__PURE__ */jsxRuntime.jsx("a", {
+          href: "https://www.enable-javascript.com/",
+          children: "enable JavaScript"
+        }), " in your browser and reload the page to proceed."]
+      })]
+    })
+  })
+});
+const keyframes = "\nfrom {\n  transform: rotate(0deg);\n}\n\nto {\n  transform: rotate(360deg);\n}\n";
+function NextStudioLoading(props) {
+  const {
+    config,
+    scheme = "light",
+    unstable__noScript = true
+  } = props;
+  const id = "next-sanity-spinner";
+  const theme = useTheme(config);
+  const {
+    fonts,
+    media
+  } = theme;
+  const styles = ui._responsive(media, [2], size => {
+    const {
+      ascenderHeight,
+      descenderHeight,
+      lineHeight,
+      iconSize
+    } = fonts.text.sizes[size];
+    const capHeight = lineHeight - ascenderHeight - descenderHeight;
+    return {
+      wrapper: {
+        display: "block",
+        animation: "".concat(id, " 500ms linear infinite"),
+        color: theme.color[scheme].default.muted.default.enabled.muted.fg,
+        width: ui.rem(capHeight),
+        height: ui.rem(capHeight)
+      },
+      svg: {
+        display: "block",
+        width: ui.rem(iconSize),
+        height: ui.rem(iconSize),
+        margin: (capHeight - iconSize) / 2
+      }
+    };
+  })[0];
+  return /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [unstable__noScript && /* @__PURE__ */jsxRuntime.jsx(NextStudioNoScript, {}), /* @__PURE__ */jsxRuntime.jsx("div", {
+      style: {
+        fontFamily: fonts.text.family,
+        backgroundColor: theme.color[scheme].default.base.bg,
+        height: "100vh",
+        maxHeight: "100dvh",
+        overscrollBehavior: "none",
+        WebkitFontSmoothing: "antialiased",
+        overflow: "auto"
+      },
+      children: /* @__PURE__ */jsxRuntime.jsxs("div", {
+        "data-ui": "Flex",
+        style: {
+          display: "flex",
+          minWidth: 0,
+          minHeight: 0,
+          alignItems: "center",
+          justifyContent: "center",
+          flexDirection: "column",
+          height: "100%",
+          margin: 0,
+          padding: 0,
+          gap: "10px"
+        },
+        children: [/* @__PURE__ */jsxRuntime.jsx("style", {
+          children: "@keyframes ".concat(id, " {").concat(keyframes, "}")
+        }, scheme), /* @__PURE__ */jsxRuntime.jsx("div", {
+          "data-ui": "Text",
+          style: {
+            position: "relative",
+            fontWeight: 400,
+            padding: "1px 0px",
+            fontSize: "1rem",
+            lineHeight: "calc(1.3125)",
+            transform: "translateY(-5px)",
+            color: theme.color[scheme].default.muted.default.enabled.muted.fg
+          },
+          children: /* @__PURE__ */jsxRuntime.jsx("span", {
+            children: "Loading\u2026"
+          })
+        }), /* @__PURE__ */jsxRuntime.jsx("div", {
+          "data-ui": "Spinner",
+          style: styles.wrapper,
+          children: /* @__PURE__ */jsxRuntime.jsx(icons.SpinnerIcon, {
+            style: styles.svg
+          })
+        })]
+      })
+    })]
+  });
+}
+exports.NextStudioLoading = NextStudioLoading;
+exports.NextStudioNoScript = NextStudioNoScript;
+exports.useTheme = useTheme;
+//# sourceMappingURL=NextStudioLoading-97555646.cjs.map

package/dist/_chunks/NextStudioLoading-97555646.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NextStudioLoading-97555646.cjs","sources":["../../src/studio/useTheme.ts","../../src/studio/NextStudioNoScript.tsx","../../src/studio/NextStudioLoading.tsx"],"sourcesContent":["import {useMemo} from 'react'\nimport {\n  type Config,\n  type SingleWorkspace,\n  type StudioTheme,\n  type WorkspaceOptions,\n  defaultTheme,\n} from 'sanity'\n\ntype WithTheme = {\n  theme: StudioTheme\n}\ntype SingleWorkspaceWithTheme = Omit<SingleWorkspace, 'theme'> & WithTheme\ntype WorkspaceOptionsWithTheme = Omit<WorkspaceOptions, 'theme'> & WithTheme\n\nfunction isWorkspaces(config: Config): config is WorkspaceOptions[] {\n  return Array.isArray(config)\n}\n\nfunction isWorkspaceWithTheme(\n  workspace: SingleWorkspace | WorkspaceOptions\n): workspace is SingleWorkspaceWithTheme | WorkspaceOptionsWithTheme {\n  return Boolean(workspace.theme)\n}\n\n/** @alpha */\nexport function useTheme(config: Config): StudioTheme {\n  const workspace = useMemo<SingleWorkspace | WorkspaceOptions>(\n    () => (isWorkspaces(config) ? config[0] : config),\n    [config]\n  )\n  return useMemo<StudioTheme>(\n    () => (isWorkspaceWithTheme(workspace) ? workspace.theme : defaultTheme),\n    [workspace]\n  )\n}\n","/* eslint-disable react/no-danger */\n\nconst style = {\n  __html: `\n.sanity-app-no-js__root {\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0;\n  bottom: 0;\n  background: #fff;\n  z-index: 1;\n}\n\n.sanity-app-no-js__content {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  text-align: center;\n  font-family: helvetica, arial, sans-serif;\n}\n`,\n} as const\n\n/** @alpha */\nexport const NextStudioNoScript = () => (\n  <noscript>\n    <div className=\"sanity-app-no-js__root\">\n      <div className=\"sanity-app-no-js__content\">\n        <style type=\"text/css\" dangerouslySetInnerHTML={style} />\n        <h1>JavaScript disabled</h1>\n        <p>\n          Please <a href=\"https://www.enable-javascript.com/\">enable JavaScript</a> in your\n          browser and reload the page to proceed.\n        </p>\n      </div>\n    </div>\n  </noscript>\n)\n","/* eslint-disable no-warning-comments */\n// Intentionally not using `styled-components` to ensure it works in any `next` setup.\n// Wether 'styled-components' SSR is setup or not.\n\nimport {SpinnerIcon} from '@sanity/icons'\nimport {_responsive, rem} from '@sanity/ui'\nimport type {StudioProps} from 'sanity'\n\nimport {NextStudioNoScript} from './NextStudioNoScript'\nimport {useTheme} from './useTheme'\n\n/** @alpha */\nexport interface NextStudioLoadingProps extends Pick<StudioProps, 'config' | 'scheme'> {\n  /**\n   * Render the <noscript> tag\n   * @defaultValue true\n   * @alpha\n   */\n  unstable__noScript?: boolean\n}\n\nconst keyframes = `\nfrom {\n  transform: rotate(0deg);\n}\n\nto {\n  transform: rotate(360deg);\n}\n`\n\nexport function NextStudioLoading(props: NextStudioLoadingProps) {\n  const {config, scheme = 'light', unstable__noScript = true} = props\n  const id = 'next-sanity-spinner'\n  const theme = useTheme(config)\n  const {fonts, media} = theme\n\n  const styles: any = _responsive(media, [2], (size: number) => {\n    const {ascenderHeight, descenderHeight, lineHeight, iconSize} = fonts.text.sizes[size]\n    const capHeight = lineHeight - ascenderHeight - descenderHeight\n\n    return {\n      wrapper: {\n        display: 'block',\n        animation: `${id} 500ms linear infinite`,\n        color: theme.color[scheme].default.muted.default.enabled.muted.fg,\n        width: rem(capHeight),\n        height: rem(capHeight),\n      },\n      svg: {\n        display: 'block',\n        width: rem(iconSize),\n        height: rem(iconSize),\n        margin: (capHeight - iconSize) / 2,\n      },\n    }\n  })[0]\n\n  return (\n    <>\n      {unstable__noScript && <NextStudioNoScript />}\n      <div\n        style={{\n          fontFamily: fonts.text.family,\n          backgroundColor: theme.color[scheme].default.base.bg,\n          height: '100vh',\n          maxHeight: '100dvh',\n          overscrollBehavior: 'none',\n          WebkitFontSmoothing: 'antialiased',\n          overflow: 'auto',\n        }}\n      >\n        <div\n          data-ui=\"Flex\"\n          style={{\n            display: 'flex',\n            minWidth: 0,\n            minHeight: 0,\n            alignItems: 'center',\n            justifyContent: 'center',\n            flexDirection: 'column',\n            height: '100%',\n            margin: 0,\n            padding: 0,\n            // @TODO use rem calc\n            gap: '10px',\n          }}\n        >\n          <style key={scheme}>{`@keyframes ${id} {${keyframes}}`}</style>\n          <div\n            data-ui=\"Text\"\n            style={{\n              position: 'relative',\n              // @TODO read from theme\n              fontWeight: 400,\n              // @TODO read from theme\n              padding: '1px 0px',\n              // @TODO use rem calc\n              fontSize: '1rem',\n              // @TODO use rem calc\n              lineHeight: 'calc(1.3125)',\n              // @TODO use rem calc\n              transform: 'translateY(-5px)',\n              color: theme.color[scheme].default.muted.default.enabled.muted.fg,\n            }}\n          >\n            <span>Loading…</span>\n          </div>\n          <div data-ui=\"Spinner\" style={styles.wrapper}>\n            <SpinnerIcon style={styles.svg} />\n          </div>\n        </div>\n      </div>\n    </>\n  )\n}\n"],"names":["isWorkspaces","config","Array","isArray","isWorkspaceWithTheme","workspace","Boolean","theme","useTheme","useMemo","defaultTheme","style","__html","NextStudioNoScript","jsx","children","className","jsxs","type","dangerouslySetInnerHTML","href","keyframes","NextStudioLoading","props","scheme","unstable__noScript","id","fonts","media","styles","_responsive","size","ascenderHeight","descenderHeight","lineHeight","iconSize","text","sizes","capHeight","wrapper","display","animation","color","default","muted","enabled","fg","width","rem","height","svg","margin","Fragment","fontFamily","family","backgroundColor","base","bg","maxHeight","overscrollBehavior","WebkitFontSmoothing","overflow","minWidth","minHeight","alignItems","justifyContent","flexDirection","padding","gap","position","fontWeight","fontSize","transform","SpinnerIcon"],"mappings":";;;;;;;AAeA,SAASA,aAAaC,MAA8C,EAAA;EAC3D,OAAAC,KAAA,CAAMC,QAAQF,MAAM,CAAA;AAC7B;AAEA,SAASG,qBACPC,SACmE,EAAA;EAC5D,OAAAC,OAAA,CAAQD,UAAUE,KAAK,CAAA;AAChC;AAGO,SAASC,SAASP,MAA6B,EAAA;EACpD,MAAMI,SAAY,GAAAI,KAAA,CAAAA,OAAA,CAChB,MAAOT,YAAA,CAAaC,MAAM,CAAA,GAAIA,OAAO,CAAK,CAAA,GAAAA,MAAA,EAC1C,CAACA,MAAM,CAAA,CACT;EACO,OAAAQ,KAAA,CAAAA,OAAA,CACL,MAAOL,oBAAA,CAAqBC,SAAS,CAAA,GAAIA,UAAUE,KAAQ,GAAAG,MAAA,CAAAA,YAAA,EAC3D,CAACL,SAAS,CAAA,CACZ;AACF;ACjCA,MAAMM,KAAQ,GAAA;EACZC,MAAQ;AAoBV,CAAA;AAGa,MAAAC,kBAAA,GAAqB,MAAA,eAC/BC,UAAA,CAAAA,GAAA,CAAA,UAAA,EAAA;EACCC,QAAC,EAAA,eAAAD,UAAA,CAAAA,GAAA,CAAA,KAAA,EAAA;IAAIE,SAAU,EAAA,wBAAA;IACbD,QAAC,EAAA,eAAAE,UAAA,CAAAA,IAAA,CAAA,KAAA,EAAA;MAAID,SAAU,EAAA,2BAAA;MACbD,QAAA,EAAA,CAACD,eAAAA,UAAAA,CAAAA,GAAA,CAAA,OAAA,EAAA;QAAMI,IAAK,EAAA,UAAA;QAAWC,uBAAyB,EAAAR;MAAA,CAAO,CAAA,EACtDG,eAAAA,UAAAA,CAAAA,GAAA,CAAA,IAAA,EAAA;QAAGC,QAAA,EAAA;MAAA,CAAmB,CAAA,EACtBE,eAAAA,UAAAA,CAAAA,IAAA,CAAA,GAAA,EAAA;QAAEF,QAAA,EAAA,CAAA,SAAA,EACOD,eAAAA,UAAAA,CAAAA,GAAA,CAAA,GAAA,EAAA;UAAEM,IAAK,EAAA,oCAAA;UAAqCL,QAAA,EAAA;QAAA,CAAiB,CAAA,EAAI,kDAAA;MAAA,CAE3E,CAAA;IAAA,CACF;EAAA,CACF;AAAA,CACF,CAAA;ACjBF,MAAMM,SAAY,uFAAA;AAUX,SAASC,kBAAkBC,KAA+B,EAAA;EAC/D,MAAM;IAACtB,MAAQ;IAAAuB,MAAA,GAAS,OAAS;IAAAC,kBAAA,GAAqB;EAAQ,CAAA,GAAAF,KAAA;EAC9D,MAAMG,EAAK,GAAA,qBAAA;EACL,MAAAnB,KAAA,GAAQC,SAASP,MAAM,CAAA;EACvB,MAAA;IAAC0B,KAAO;IAAAC;EAAS,CAAA,GAAArB,KAAA;EAEvB,MAAMsB,SAAcC,EAAAA,CAAAA,WAAY,CAAAF,KAAA,EAAO,CAAC,CAAC,CAAA,EAAIG,IAAiB,IAAA;IACtD,MAAA;MAACC;MAAgBC,eAAiB;MAAAC,UAAA;MAAYC;KAAY,GAAAR,KAAA,CAAMS,KAAKC,KAAM,CAAAN,IAAA,CAAA;IAC3E,MAAAO,SAAA,GAAYJ,aAAaF,cAAiB,GAAAC,eAAA;IAEzC,OAAA;MACLM,OAAS,EAAA;QACPC,OAAS,EAAA,OAAA;QACTC,qBAAcf,EAAA,2BAAA;QACdgB,KAAA,EAAOnC,MAAMmC,KAAM,CAAAlB,MAAA,CAAA,CAAQmB,QAAQC,KAAM,CAAAD,OAAA,CAAQE,QAAQD,KAAM,CAAAE,EAAA;QAC/DC,KAAA,EAAOC,OAAIV,SAAS,CAAA;QACpBW,MAAA,EAAQD,OAAIV,SAAS;MACvB,CAAA;MACAY,GAAK,EAAA;QACHV,OAAS,EAAA,OAAA;QACTO,KAAA,EAAOC,OAAIb,QAAQ,CAAA;QACnBc,MAAA,EAAQD,OAAIb,QAAQ,CAAA;QACpBgB,MAAA,EAAA,CAASb,YAAYH,QAAY,IAAA;MACnC;IAAA,CACF;EAAA,CACD,CAAE,CAAA,CAAA,CAAA;EAGD,OAAAlB,eAAAA,UAAAA,CAAAA,IAAA,CAAAmC,UAAAA,CAAAA,QAAA,EAAA;IACGrC,QAAA,EAAA,CAAAU,kBAAA,kCAAuBZ,kBAAmB,EAAA,EAAA,CAAA,EAC1CC,eAAAA,UAAAA,CAAAA,GAAA,CAAA,KAAA,EAAA;MACCH,KAAO,EAAA;QACL0C,UAAA,EAAY1B,MAAMS,IAAK,CAAAkB,MAAA;QACvBC,eAAiB,EAAAhD,KAAA,CAAMmC,KAAM,CAAAlB,MAAA,CAAA,CAAQmB,QAAQa,IAAK,CAAAC,EAAA;QAClDR,MAAQ,EAAA,OAAA;QACRS,SAAW,EAAA,QAAA;QACXC,kBAAoB,EAAA,MAAA;QACpBC,mBAAqB,EAAA,aAAA;QACrBC,QAAU,EAAA;MACZ,CAAA;MAEA9C,QAAC,EAAA,eAAAE,UAAA,CAAAA,IAAA,CAAA,KAAA,EAAA;QACC,SAAQ,EAAA,MAAA;QACRN,KAAO,EAAA;UACL6B,OAAS,EAAA,MAAA;UACTsB,QAAU,EAAA,CAAA;UACVC,SAAW,EAAA,CAAA;UACXC,UAAY,EAAA,QAAA;UACZC,cAAgB,EAAA,QAAA;UAChBC,aAAe,EAAA,QAAA;UACfjB,MAAQ,EAAA,MAAA;UACRE,MAAQ,EAAA,CAAA;UACRgB,OAAS,EAAA,CAAA;UAETC,GAAK,EAAA;QACP,CAAA;QAEArD,QAAA,EAAA,CAACD,eAAAA,UAAAA,CAAAA,GAAA,CAAA,OAAA,EAAA;UAAoBC,+BAAcW,EAAO,eAAAL,SAAA;QAAA,CAAA,EAA9BG,MAA2C,CAAA,EACtDV,eAAAA,UAAAA,CAAAA,GAAA,CAAA,KAAA,EAAA;UACC,SAAQ,EAAA,MAAA;UACRH,KAAO,EAAA;YACL0D,QAAU,EAAA,UAAA;YAEVC,UAAY,EAAA,GAAA;YAEZH,OAAS,EAAA,SAAA;YAETI,QAAU,EAAA,MAAA;YAEVrC,UAAY,EAAA,cAAA;YAEZsC,SAAW,EAAA,kBAAA;YACX9B,KAAA,EAAOnC,MAAMmC,KAAM,CAAAlB,MAAA,CAAA,CAAQmB,QAAQC,KAAM,CAAAD,OAAA,CAAQE,QAAQD,KAAM,CAAAE;UACjE,CAAA;UAEA/B,QAAC,EAAA,eAAAD,UAAA,CAAAA,GAAA,CAAA,MAAA,EAAA;YAAKC,QAAA,EAAA;UAAA,CAAQ;QAAA,CAChB,CAAA,EACCD,eAAAA,UAAAA,CAAAA,GAAA,CAAA,KAAA,EAAA;UAAI,SAAQ,EAAA,SAAA;UAAUH,OAAOkB,MAAO,CAAAU,OAAA;UACnCxB,QAAC,EAAA,eAAAD,UAAA,CAAAA,GAAA,CAAA2D,iBAAA,EAAA;YAAY9D,OAAOkB,MAAO,CAAAqB;UAAA,CAAK;QAAA,CAClC,CAAA;MAAA,CACF;IAAA,CACF,CAAA;EAAA,CACF,CAAA;AAEJ;;;"}

package/dist/studio/index.cjs

@@ -14,120 +14,51 @@ Object.defineProperty(exports, '__esModule', {
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var sanity = require('sanity');
-var icons = require('@sanity/icons');
-var ui = require('@sanity/ui');
 var styled = require('styled-components');
+var NextStudioLoading = require('../_chunks/NextStudioLoading-97555646.cjs');
+require('@sanity/icons');
+require('@sanity/ui');
 function _interopDefaultLegacy(e) {
   return e && typeof e === 'object' && 'default' in e ? e : {
     'default': e
   };
 }
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-function isWorkspaces(config) {
-  return Array.isArray(config);
-}
-function isWorkspaceWithTheme(workspace) {
-  return Boolean(workspace.theme);
-}
-function useTheme(config) {
-  const workspace = react.useMemo(() => isWorkspaces(config) ? config[0] : config, [config]);
-  return react.useMemo(() => isWorkspaceWithTheme(workspace) ? workspace.theme : sanity.defaultTheme, [workspace]);
-}
-const keyframes = "\nfrom {\n  transform: rotate(0deg);\n}\n\nto {\n  transform: rotate(360deg);\n}\n";
-function NextStudioFallbackComponent(props) {
-  const {
-    config,
-    scheme = "light"
-  } = props;
-  const id = "next-sanity-spinner";
-  const theme = useTheme(config);
-  const {
-    fonts,
-    media
-  } = theme;
-  const styles = ui._responsive(media, [2], size => {
-    const {
-      ascenderHeight,
-      descenderHeight,
-      lineHeight,
-      iconSize
-    } = fonts.text.sizes[size];
-    const capHeight = lineHeight - ascenderHeight - descenderHeight;
-    return {
-      wrapper: {
-        animation: "".concat(id, " 500ms linear infinite"),
-        color: theme.color[scheme].default.muted.default.enabled.muted.fg,
-        width: ui.rem(capHeight),
-        height: ui.rem(capHeight)
-      },
-      svg: {
-        display: "block",
-        width: ui.rem(iconSize),
-        height: ui.rem(iconSize),
-        margin: (capHeight - iconSize) / 2
-      }
-    };
-  })[0];
-  return /* @__PURE__ */jsxRuntime.jsx("div", {
-    style: {
-      fontFamily: fonts.text.family,
-      backgroundColor: theme.color[scheme].default.base.bg,
-      height: "100vh",
-      maxHeight: "100dvh",
-      overscrollBehavior: "none",
-      WebkitFontSmoothing: "antialiased",
-      overflow: "auto"
-    },
-    children: /* @__PURE__ */jsxRuntime.jsxs("div", {
-      "data-ui": "Flex",
-      style: {
-        display: "flex",
-        minWidth: 0,
-        minHeight: 0,
-        alignItems: "center",
-        justifyContent: "center",
-        flexDirection: "column",
-        height: "100%",
-        margin: 0,
-        padding: 0
-      },
-      children: [/* @__PURE__ */jsxRuntime.jsx("style", {
-        children: "@keyframes ".concat(id, " {").concat(keyframes, "}")
-      }, scheme), /* @__PURE__ */jsxRuntime.jsx("div", {
-        "data-ui": "Spinner",
-        style: styles.wrapper,
-        children: /* @__PURE__ */jsxRuntime.jsx(icons.SpinnerIcon, {
-          style: styles.svg
-        })
-      })]
-    })
+function NextStudioClientOnly(_ref) {
+  let {
+    children,
+    fallback
+  } = _ref;
+  const [mounted, setMounted] = react.useState(false);
+  react.useEffect(() => react.startTransition(() => setMounted(true)), []);
+  return /* @__PURE__ */jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: mounted ? children : fallback
   });
 }
-const NextStudioFallback = react.memo(NextStudioFallbackComponent);
-const Layout = styled__default["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-family: ", ";\n  background-color: ", ";\n  height: 100vh;\n  max-height: 100dvh;\n  overscroll-behavior: none;\n  -webkit-font-smoothing: antialiased;\n  overflow: auto;\n\n  ", "\n"])), _ref => {
+const Layout = styled__default["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-family: ", ";\n  background-color: ", ";\n  height: 100vh;\n  max-height: 100dvh;\n  overscroll-behavior: none;\n  -webkit-font-smoothing: antialiased;\n  overflow: auto;\n\n  ", "\n"])), _ref2 => {
   let {
     $fontFamily
-  } = _ref;
+  } = _ref2;
   return $fontFamily;
-}, _ref2 => {
+}, _ref3 => {
   let {
     $bg
-  } = _ref2;
+  } = _ref3;
   return $bg;
-}, _ref3 => {
+}, _ref4 => {
   let {
     $unstable__tailwindSvgFix
-  } = _ref3;
+  } = _ref4;
   return $unstable__tailwindSvgFix ? styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          /* override tailwind reset */\n          *:not([data-ui='Popover__arrow']):not([data-ui='Tooltip__arrow']) > svg {\n            display: inline;\n          }\n        "]))) : "";
 });
-const NextStudioLayoutComponent = _ref4 => {
+const NextStudioLayoutComponent = _ref5 => {
   let {
     children,
     config,
     scheme = "light",
     unstable__tailwindSvgFix = true
-  } = _ref4;
-  const theme = useTheme(config);
+  } = _ref5;
+  const theme = NextStudioLoading.useTheme(config);
   return /* @__PURE__ */jsxRuntime.jsx(Layout, {
     "data-ui": "NextStudioLayout",
     $unstable__tailwindSvgFix: unstable__tailwindSvgFix,
@@ -137,66 +68,31 @@ const NextStudioLayoutComponent = _ref4 => {
   });
 };
 const NextStudioLayout = react.memo(NextStudioLayoutComponent);
-const style = {
-  __html: "\n.sanity-app-no-js__root {\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0;\n  bottom: 0;\n  background: #fff;\n  z-index: 1;\n}\n\n.sanity-app-no-js__content {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  text-align: center;\n  font-family: helvetica, arial, sans-serif;\n}\n"
-};
-const NextStudioNoScript = () => /* @__PURE__ */jsxRuntime.jsx("noscript", {
-  children: /* @__PURE__ */jsxRuntime.jsx("div", {
-    className: "sanity-app-no-js__root",
-    children: /* @__PURE__ */jsxRuntime.jsxs("div", {
-      className: "sanity-app-no-js__content",
-      children: [/* @__PURE__ */jsxRuntime.jsx("style", {
-        type: "text/css",
-        dangerouslySetInnerHTML: style
-      }), /* @__PURE__ */jsxRuntime.jsx("h1", {
-        children: "JavaScript disabled"
-      }), /* @__PURE__ */jsxRuntime.jsxs("p", {
-        children: ["Please ", /* @__PURE__ */jsxRuntime.jsx("a", {
-          href: "https://www.enable-javascript.com/",
-          children: "enable JavaScript"
-        }), " in your browser and reload the page to proceed."]
-      })]
-    })
-  })
-});
-function NextStudioSuspense(_ref5) {
-  let {
-    children,
-    fallback
-  } = _ref5;
-  const [mounted, mount] = react.useReducer(() => true, false);
-  react.useEffect(mount, [mount]);
-  return /* @__PURE__ */jsxRuntime.jsx(react.Suspense, {
-    fallback,
-    children: mounted ? children : fallback
-  });
-}
 const NextStudioComponent = _ref6 => {
   let {
       children,
       config,
       unstable__tailwindSvgFix = true,
-      unstable__noScript = true,
+      unstable__noScript,
       scheme
     } = _ref6,
     props = _objectWithoutProperties(_ref6, _excluded);
-  return /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [!unstable__noScript && /* @__PURE__ */jsxRuntime.jsx(NextStudioNoScript, {}), /* @__PURE__ */jsxRuntime.jsx(NextStudioSuspense, {
-      fallback: /* @__PURE__ */jsxRuntime.jsx(NextStudioFallback, {
-        config,
-        scheme
-      }),
-      children: /* @__PURE__ */jsxRuntime.jsx(NextStudioLayout, {
+  return /* @__PURE__ */jsxRuntime.jsx(NextStudioClientOnly, {
+    fallback: /* @__PURE__ */jsxRuntime.jsx(NextStudioLoading.NextStudioLoading, {
+      unstable__noScript,
+      config,
+      scheme
+    }),
+    children: /* @__PURE__ */jsxRuntime.jsx(NextStudioLayout, {
+      config,
+      scheme,
+      unstable__tailwindSvgFix,
+      children: children || /* @__PURE__ */jsxRuntime.jsx(sanity.Studio, _objectSpread({
         config,
         scheme,
-        unstable__tailwindSvgFix,
-        children: children || /* @__PURE__ */jsxRuntime.jsx(sanity.Studio, _objectSpread({
-          config,
-          scheme,
-          unstable_globalStyles: true
-        }, props))
-      })
-    })]
+        unstable_globalStyles: true
+      }, props))
+    })
   });
 };
 const NextStudio = react.memo(NextStudioComponent);
@@ -222,11 +118,10 @@ const store = createStore();
 function usePrefersColorScheme() {
   return react.useSyncExternalStore(store.subscribe, store.getSnapshot, store.getServerSnapshot);
 }
+exports.NextStudioNoScript = NextStudioLoading.NextStudioNoScript;
+exports.useTheme = NextStudioLoading.useTheme;
 exports.NextStudio = NextStudio;
-exports.NextStudioFallback = NextStudioFallback;
+exports.NextStudioClientOnly = NextStudioClientOnly;
 exports.NextStudioLayout = NextStudioLayout;
-exports.NextStudioNoScript = NextStudioNoScript;
-exports.NextStudioSuspense = NextStudioSuspense;
 exports.usePrefersColorScheme = usePrefersColorScheme;
-exports.useTheme = useTheme;
 //# sourceMappingURL=index.cjs.map

package/dist/studio/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/studio/useTheme.ts","../../src/studio/NextStudioFallback.tsx","../../src/studio/NextStudioLayout.tsx","../../src/studio/NextStudioNoScript.tsx","../../src/studio/NextStudioSuspense.tsx","../../src/studio/NextStudio.tsx","../../src/studio/usePrefersColorScheme.ts"],"sourcesContent":["import {useMemo} from 'react'\nimport {\n  type Config,\n  type SingleWorkspace,\n  type StudioTheme,\n  type WorkspaceOptions,\n  defaultTheme,\n} from 'sanity'\n\ntype WithTheme = {\n  theme: StudioTheme\n}\ntype SingleWorkspaceWithTheme = Omit<SingleWorkspace, 'theme'> & WithTheme\ntype WorkspaceOptionsWithTheme = Omit<WorkspaceOptions, 'theme'> & WithTheme\n\nfunction isWorkspaces(config: Config): config is WorkspaceOptions[] {\n  return Array.isArray(config)\n}\n\nfunction isWorkspaceWithTheme(\n  workspace: SingleWorkspace | WorkspaceOptions\n): workspace is SingleWorkspaceWithTheme | WorkspaceOptionsWithTheme {\n  return Boolean(workspace.theme)\n}\n\n/** @alpha */\nexport function useTheme(config: Config): StudioTheme {\n  const workspace = useMemo<SingleWorkspace | WorkspaceOptions>(\n    () => (isWorkspaces(config) ? config[0] : config),\n    [config]\n  )\n  return useMemo<StudioTheme>(\n    () => (isWorkspaceWithTheme(workspace) ? workspace.theme : defaultTheme),\n    [workspace]\n  )\n}\n","// Intentionally not using `styled-components` to ensure it works in any `next` setup.\n// Wether 'styled-components' SSR is setup or not.\n\nimport {SpinnerIcon} from '@sanity/icons'\nimport {_responsive, rem} from '@sanity/ui'\nimport {memo} from 'react'\nimport type {StudioProps} from 'sanity'\n\nimport {useTheme} from './useTheme'\n\n/** @alpha */\nexport type NextStudioFallbackProps = Pick<StudioProps, 'config' | 'scheme'>\n\nconst keyframes = `\nfrom {\n  transform: rotate(0deg);\n}\n\nto {\n  transform: rotate(360deg);\n}\n`\n\nfunction NextStudioFallbackComponent(props: NextStudioFallbackProps) {\n  const {config, scheme = 'light'} = props\n  const id = 'next-sanity-spinner'\n  const theme = useTheme(config)\n  const {fonts, media} = theme\n\n  const styles: any = _responsive(media, [2], (size: number) => {\n    const {ascenderHeight, descenderHeight, lineHeight, iconSize} = fonts.text.sizes[size]\n    const capHeight = lineHeight - ascenderHeight - descenderHeight\n\n    return {\n      wrapper: {\n        animation: `${id} 500ms linear infinite`,\n        color: theme.color[scheme].default.muted.default.enabled.muted.fg,\n        width: rem(capHeight),\n        height: rem(capHeight),\n      },\n      svg: {\n        display: 'block',\n        width: rem(iconSize),\n        height: rem(iconSize),\n        margin: (capHeight - iconSize) / 2,\n      },\n    }\n  })[0]\n\n  return (\n    <div\n      style={{\n        fontFamily: fonts.text.family,\n        backgroundColor: theme.color[scheme].default.base.bg,\n        height: '100vh',\n        maxHeight: '100dvh',\n        overscrollBehavior: 'none',\n        WebkitFontSmoothing: 'antialiased',\n        overflow: 'auto',\n      }}\n    >\n      <div\n        data-ui=\"Flex\"\n        style={{\n          display: 'flex',\n          minWidth: 0,\n          minHeight: 0,\n          alignItems: 'center',\n          justifyContent: 'center',\n          flexDirection: 'column',\n          height: '100%',\n          margin: 0,\n          padding: 0,\n        }}\n      >\n        <style key={scheme}>{`@keyframes ${id} {${keyframes}}`}</style>\n        <div data-ui=\"Spinner\" style={styles.wrapper}>\n          <SpinnerIcon style={styles.svg} />\n        </div>\n      </div>\n    </div>\n  )\n}\n\n/** @alpha */\nexport const NextStudioFallback = memo(NextStudioFallbackComponent)\n","/* eslint-disable camelcase */\nimport {memo} from 'react'\nimport type {StudioProps} from 'sanity'\nimport styled, {css} from 'styled-components'\n\nimport {useTheme} from './useTheme'\n\n/** @alpha */\nexport interface NextStudioLayoutProps extends Pick<StudioProps, 'config' | 'scheme'> {\n  children: React.ReactNode\n  /**\n   * Apply fix with SVG icon centering that happens if TailwindCSS is loaded\n   * @defaultValue true\n   */\n  unstable__tailwindSvgFix?: boolean\n}\n\ntype LayoutProps = {\n  $unstable__tailwindSvgFix: NextStudioLayoutProps['unstable__tailwindSvgFix']\n  $bg: string\n  $fontFamily: string\n}\nconst Layout = styled.div<LayoutProps>`\n  font-family: ${({$fontFamily}) => $fontFamily};\n  background-color: ${({$bg}: any) => $bg};\n  height: 100vh;\n  max-height: 100dvh;\n  overscroll-behavior: none;\n  -webkit-font-smoothing: antialiased;\n  overflow: auto;\n\n  ${({$unstable__tailwindSvgFix}: any) =>\n    $unstable__tailwindSvgFix\n      ? css`\n          /* override tailwind reset */\n          *:not([data-ui='Popover__arrow']):not([data-ui='Tooltip__arrow']) > svg {\n            display: inline;\n          }\n        `\n      : ''}\n`\n\nconst NextStudioLayoutComponent = ({\n  children,\n  config,\n  scheme = 'light',\n  unstable__tailwindSvgFix = true,\n}: NextStudioLayoutProps) => {\n  const theme = useTheme(config)\n\n  return (\n    <Layout\n      data-ui=\"NextStudioLayout\"\n      $unstable__tailwindSvgFix={unstable__tailwindSvgFix}\n      $fontFamily={theme.fonts.text.family}\n      $bg={theme.color[scheme].default.base.bg}\n    >\n      {children}\n    </Layout>\n  )\n}\n\n/** @alpha */\nexport const NextStudioLayout = memo(NextStudioLayoutComponent)\n","/* eslint-disable react/no-danger */\n\nconst style = {\n  __html: `\n.sanity-app-no-js__root {\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0;\n  bottom: 0;\n  background: #fff;\n  z-index: 1;\n}\n\n.sanity-app-no-js__content {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  text-align: center;\n  font-family: helvetica, arial, sans-serif;\n}\n`,\n} as const\n\n/** @alpha */\nexport const NextStudioNoScript = () => (\n  <noscript>\n    <div className=\"sanity-app-no-js__root\">\n      <div className=\"sanity-app-no-js__content\">\n        <style type=\"text/css\" dangerouslySetInnerHTML={style} />\n        <h1>JavaScript disabled</h1>\n        <p>\n          Please <a href=\"https://www.enable-javascript.com/\">enable JavaScript</a> in your\n          browser and reload the page to proceed.\n        </p>\n      </div>\n    </div>\n  </noscript>\n)\n","import {type ReactNode, Suspense, useEffect, useReducer} from 'react'\n\n/** @alpha */\nexport type NextStudioSuspenseProps = {\n  children: ReactNode\n  fallback: ReactNode\n}\n\n/** @alpha */\nexport function NextStudioSuspense({children, fallback}: NextStudioSuspenseProps) {\n  const [mounted, mount] = useReducer(() => true, false)\n  useEffect(mount, [mount])\n\n  return <Suspense fallback={fallback}>{mounted ? children : fallback}</Suspense>\n}\n","import {memo} from 'react'\nimport {type StudioProps, Studio} from 'sanity'\n\nimport {NextStudioFallback} from './NextStudioFallback'\nimport {type NextStudioLayoutProps, NextStudioLayout} from './NextStudioLayout'\nimport {NextStudioNoScript} from './NextStudioNoScript'\nimport {NextStudioSuspense} from './NextStudioSuspense'\n\n// eslint-disable-next-line no-warning-comments\n// FIXME: https://github.com/vercel/next.js/issues/43147\n// const Studio = memo(lazy(() => import('./LazyStudio')))\n\n/** @beta */\nexport interface NextStudioProps extends StudioProps {\n  children?: React.ReactNode\n  /**\n   * Apply fix with SVG icon centering that happens if TailwindCSS is loaded\n   * @defaultValue true\n   * @alpha\n   */\n  unstable__tailwindSvgFix?: NextStudioLayoutProps['unstable__tailwindSvgFix']\n  /**\n   * Render the <noscript> tag\n   * @defaultValue true\n   * @alpha\n   */\n  unstable__noScript?: boolean\n}\n/**\n * Intended to render at the root of a page, letting the Studio own that page and render much like it would if you used `npx sanity start` to render\n * It's a drop-in replacement for `import {Studio} from 'sanity'`\n */\nconst NextStudioComponent = ({\n  children,\n  config,\n  unstable__tailwindSvgFix = true,\n  unstable__noScript = true,\n  scheme,\n  ...props\n}: NextStudioProps) => {\n  return (\n    <>\n      {!unstable__noScript && <NextStudioNoScript />}\n      <NextStudioSuspense fallback={<NextStudioFallback config={config} scheme={scheme} />}>\n        <NextStudioLayout\n          config={config}\n          scheme={scheme}\n          unstable__tailwindSvgFix={unstable__tailwindSvgFix}\n        >\n          {children || (\n            <Studio config={config} scheme={scheme} unstable_globalStyles {...props} />\n          )}\n        </NextStudioLayout>\n      </NextStudioSuspense>\n    </>\n  )\n}\n\n/**\n * Override how the Studio renders by passing children.\n * This is useful for advanced use cases where you're using StudioProvider and StudioLayout instead of Studio:\n * ```\n * import {StudioProvider, StudioLayout} from 'sanity'\n * import {NextStudio} from 'next-sanity/studio'\n * <NextStudio config={config}>\n *   <StudioProvider config={config}>\n *     <CustomComponentThatUsesContextFromStudioProvider />\n *     <StudioLayout />\n *   </StudioProvider>\n * </NextStudio>\n * ```\n * @beta\n */\nexport const NextStudio = memo(NextStudioComponent)\n","/* eslint-disable @typescript-eslint/no-empty-function */\nimport type {ThemeColorSchemeKey} from '@sanity/ui'\nimport {useSyncExternalStore} from 'react'\n\nfunction createStore() {\n  if (typeof document === 'undefined') {\n    return {\n      subscribe: () => () => {},\n      getSnapshot: () => 'light' as const,\n      getServerSnapshot: () => 'light' as const,\n    }\n  }\n\n  const matchMedia = window.matchMedia('(prefers-color-scheme: dark)')\n\n  return {\n    subscribe: (onStoreChange: () => void) => {\n      matchMedia.addEventListener('change', onStoreChange)\n      return () => matchMedia.removeEventListener('change', onStoreChange)\n    },\n    getSnapshot: () => (matchMedia.matches ? 'dark' : 'light'),\n    getServerSnapshot: () => 'light' as const,\n  }\n}\nconst store = createStore()\n\n/** @alpha */\nexport function usePrefersColorScheme(): ThemeColorSchemeKey {\n  return useSyncExternalStore(store.subscribe, store.getSnapshot, store.getServerSnapshot)\n}\n"],"names":["isWorkspaces","config","Array","isArray","isWorkspaceWithTheme","workspace","Boolean","theme","useTheme","useMemo","defaultTheme","keyframes","NextStudioFallbackComponent","props","scheme","id","fonts","media","styles","_responsive","size","ascenderHeight","descenderHeight","lineHeight","iconSize","text","sizes","capHeight","wrapper","animation","color","default","muted","enabled","fg","width","rem","height","svg","display","margin","jsx","style","fontFamily","family","backgroundColor","base","bg","maxHeight","overscrollBehavior","WebkitFontSmoothing","overflow","children","jsxs","minWidth","minHeight","alignItems","justifyContent","flexDirection","padding","SpinnerIcon","NextStudioFallback","memo","Layout","styled","div","$fontFamily","$bg","$unstable__tailwindSvgFix","css","NextStudioLayoutComponent","unstable__tailwindSvgFix","NextStudioLayout","__html","NextStudioNoScript","className","type","dangerouslySetInnerHTML","href","NextStudioSuspense","fallback","mounted","mount","useReducer","useEffect","Suspense","NextStudioComponent","unstable__noScript","Fragment","Studio","unstable_globalStyles","NextStudio","createStore","document","subscribe","getSnapshot","getServerSnapshot","matchMedia","window","onStoreChange","addEventListener","removeEventListener","matches","store","usePrefersColorScheme","useSyncExternalStore"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../src/studio/NextStudioClientOnly.tsx","../../src/studio/NextStudioLayout.tsx","../../src/studio/NextStudio.tsx","../../src/studio/usePrefersColorScheme.ts"],"sourcesContent":["import {type ReactNode, startTransition, useEffect, useState} from 'react'\n\n/** @alpha */\nexport type NextStudioClientOnlyProps = {\n  children: ReactNode\n  fallback: ReactNode\n}\n\n/** @alpha */\nexport function NextStudioClientOnly({children, fallback}: NextStudioClientOnlyProps) {\n  const [mounted, setMounted] = useState(false)\n  useEffect(() => startTransition(() => setMounted(true)), [])\n\n  return <>{mounted ? children : fallback}</>\n}\n","/* eslint-disable camelcase */\nimport {memo} from 'react'\nimport type {StudioProps} from 'sanity'\nimport styled, {css} from 'styled-components'\n\nimport {useTheme} from './useTheme'\n\n/** @alpha */\nexport interface NextStudioLayoutProps extends Pick<StudioProps, 'config' | 'scheme'> {\n  children: React.ReactNode\n  /**\n   * Apply fix with SVG icon centering that happens if TailwindCSS is loaded\n   * @defaultValue true\n   */\n  unstable__tailwindSvgFix?: boolean\n}\n\ntype LayoutProps = {\n  $unstable__tailwindSvgFix: NextStudioLayoutProps['unstable__tailwindSvgFix']\n  $bg: string\n  $fontFamily: string\n}\nconst Layout = styled.div<LayoutProps>`\n  font-family: ${({$fontFamily}) => $fontFamily};\n  background-color: ${({$bg}: any) => $bg};\n  height: 100vh;\n  max-height: 100dvh;\n  overscroll-behavior: none;\n  -webkit-font-smoothing: antialiased;\n  overflow: auto;\n\n  ${({$unstable__tailwindSvgFix}: any) =>\n    $unstable__tailwindSvgFix\n      ? css`\n          /* override tailwind reset */\n          *:not([data-ui='Popover__arrow']):not([data-ui='Tooltip__arrow']) > svg {\n            display: inline;\n          }\n        `\n      : ''}\n`\n\nconst NextStudioLayoutComponent = ({\n  children,\n  config,\n  scheme = 'light',\n  unstable__tailwindSvgFix = true,\n}: NextStudioLayoutProps) => {\n  const theme = useTheme(config)\n\n  return (\n    <Layout\n      data-ui=\"NextStudioLayout\"\n      $unstable__tailwindSvgFix={unstable__tailwindSvgFix}\n      $fontFamily={theme.fonts.text.family}\n      $bg={theme.color[scheme].default.base.bg}\n    >\n      {children}\n    </Layout>\n  )\n}\n\n/** @alpha */\nexport const NextStudioLayout = memo(NextStudioLayoutComponent)\n","import {memo} from 'react'\nimport {type StudioProps, Studio} from 'sanity'\n\nimport {NextStudioClientOnly} from './NextStudioClientOnly'\nimport {type NextStudioLayoutProps, NextStudioLayout} from './NextStudioLayout'\nimport {type NextStudioLoadingProps, NextStudioLoading} from './NextStudioLoading'\n\nexport type {NextStudioLoadingProps}\n\n// eslint-disable-next-line no-warning-comments\n// FIXME: https://github.com/vercel/next.js/issues/43147\n// const Studio = memo(lazy(() => import('./LazyStudio')))\n\n/** @beta */\nexport interface NextStudioProps extends StudioProps {\n  children?: React.ReactNode\n  /**\n   * Apply fix with SVG icon centering that happens if TailwindCSS is loaded\n   * @defaultValue true\n   * @alpha\n   */\n  unstable__tailwindSvgFix?: NextStudioLayoutProps['unstable__tailwindSvgFix']\n  /**\n   * Render the <noscript> tag\n   * @defaultValue true\n   * @alpha\n   */\n  unstable__noScript?: NextStudioLoadingProps['unstable__noScript']\n}\n/**\n * Intended to render at the root of a page, letting the Studio own that page and render much like it would if you used `npx sanity start` to render\n * It's a drop-in replacement for `import {Studio} from 'sanity'`\n */\nconst NextStudioComponent = ({\n  children,\n  config,\n  unstable__tailwindSvgFix = true,\n  unstable__noScript,\n  scheme,\n  ...props\n}: NextStudioProps) => (\n  <NextStudioClientOnly\n    fallback={\n      <NextStudioLoading\n        unstable__noScript={unstable__noScript}\n        config={config}\n        scheme={scheme}\n      />\n    }\n  >\n    <NextStudioLayout\n      config={config}\n      scheme={scheme}\n      unstable__tailwindSvgFix={unstable__tailwindSvgFix}\n    >\n      {children || <Studio config={config} scheme={scheme} unstable_globalStyles {...props} />}\n    </NextStudioLayout>\n  </NextStudioClientOnly>\n)\n\n/**\n * Override how the Studio renders by passing children.\n * This is useful for advanced use cases where you're using StudioProvider and StudioLayout instead of Studio:\n * ```\n * import {StudioProvider, StudioLayout} from 'sanity'\n * import {NextStudio} from 'next-sanity/studio'\n * <NextStudio config={config}>\n *   <StudioProvider config={config}>\n *     <CustomComponentThatUsesContextFromStudioProvider />\n *     <StudioLayout />\n *   </StudioProvider>\n * </NextStudio>\n * ```\n * @beta\n */\nexport const NextStudio = memo(NextStudioComponent)\n","/* eslint-disable @typescript-eslint/no-empty-function */\nimport type {ThemeColorSchemeKey} from '@sanity/ui'\nimport {useSyncExternalStore} from 'react'\n\nfunction createStore() {\n  if (typeof document === 'undefined') {\n    return {\n      subscribe: () => () => {},\n      getSnapshot: () => 'light' as const,\n      getServerSnapshot: () => 'light' as const,\n    }\n  }\n\n  const matchMedia = window.matchMedia('(prefers-color-scheme: dark)')\n\n  return {\n    subscribe: (onStoreChange: () => void) => {\n      matchMedia.addEventListener('change', onStoreChange)\n      return () => matchMedia.removeEventListener('change', onStoreChange)\n    },\n    getSnapshot: () => (matchMedia.matches ? 'dark' : 'light'),\n    getServerSnapshot: () => 'light' as const,\n  }\n}\nconst store = createStore()\n\n/** @alpha */\nexport function usePrefersColorScheme(): ThemeColorSchemeKey {\n  return useSyncExternalStore(store.subscribe, store.getSnapshot, store.getServerSnapshot)\n}\n"],"names":["NextStudioClientOnly","children","fallback","mounted","setMounted","useState","useEffect","startTransition","jsx","Fragment","Layout","styled","div","$fontFamily","$bg","$unstable__tailwindSvgFix","css","NextStudioLayoutComponent","config","scheme","unstable__tailwindSvgFix","theme","useTheme","fonts","text","family","color","default","base","bg","NextStudioLayout","memo","NextStudioComponent","unstable__noScript","props","NextStudioLoading","Studio","unstable_globalStyles","NextStudio","createStore","document","subscribe","getSnapshot","getServerSnapshot","matchMedia","window","onStoreChange","addEventListener","removeEventListener","matches","store","usePrefersColorScheme","useSyncExternalStore"],"mappings":"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"}