@stackframe/stack 2.5.12 → 2.5.15

package/dist/utils/browser-script.js

@@ -27,21 +27,46 @@ var import_ssr_layout_effect = require("../components/elements/ssr-layout-effect
 var import_jsx_runtime = require("react/jsx-runtime");
 var script = () => {
   const attributes = ["data-joy-color-scheme", "data-mui-color-scheme", "data-theme", "data-color-scheme", "class"];
+  const getColorMode = (value) => {
+    if (value.includes("dark")) {
+      return "dark";
+    }
+    if (value.includes("light")) {
+      return "light";
+    }
+    return null;
+  };
+  const copyFromColorScheme = () => {
+    const colorScheme = getComputedStyle(document.documentElement).getPropertyValue("color-scheme");
+    if (colorScheme) {
+      const mode = getColorMode(colorScheme);
+      if (mode) {
+        document.documentElement.setAttribute("data-stack-theme", mode);
+        return true;
+      }
+    }
+    return false;
+  };
+  const copyFromAttributes = () => {
+    for (const attributeName of attributes) {
+      const colorTheme = document.documentElement.getAttribute(attributeName);
+      if (colorTheme) {
+        const mode = getColorMode(colorTheme);
+        if (mode) {
+          document.documentElement.setAttribute("data-stack-theme", mode);
+          return true;
+        }
+      }
+    }
+    return false;
+  };
   const observer = new MutationObserver((mutations) => {
     mutations.forEach((mutation) => {
-      for (const attributeName of attributes) {
-        if (mutation.attributeName === attributeName) {
-          const colorTheme = document.documentElement.getAttribute(attributeName);
-          if (!colorTheme) {
-            continue;
-          }
-          const darkMode = colorTheme.includes("dark");
-          const lightMode = colorTheme.includes("light");
-          if (!darkMode && !lightMode) {
-            continue;
-          }
-          document.documentElement.setAttribute("data-stack-theme", darkMode ? "dark" : "light");
-        }
+      if (copyFromColorScheme()) {
+        return;
+      }
+      if (mutation.attributeName && attributes.includes(mutation.attributeName)) {
+        copyFromAttributes();
       }
     });
   });
@@ -49,6 +74,9 @@ var script = () => {
     attributes: true,
     attributeFilter: attributes
   });
+  if (!copyFromColorScheme()) {
+    copyFromAttributes();
+  }
 };
 function BrowserScript(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ssr_layout_effect.SsrScript, { nonce: props.nonce, script: `(${script.toString()})()` });

package/dist/utils/browser-script.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/browser-script.tsx"],"sourcesContent":["// Note that this script can not import anything from outside as it will be converted to a string and executed in the browser.\n\nimport { SsrScript } from \"../components/elements/ssr-layout-effect\";\n\n// Also please note that there might be hydration issues with this script, always check the browser console for errors after changing this script.\nconst script = () => {\n  const attributes = ['data-joy-color-scheme', 'data-mui-color-scheme', 'data-theme', 'data-color-scheme', 'class'];\n\n  const observer = new MutationObserver((mutations) => {\n    mutations.forEach((mutation) => {\n      for (const attributeName of attributes) {\n        if (mutation.attributeName === attributeName) {\n          const colorTheme = document.documentElement.getAttribute(attributeName);\n          if (!colorTheme) {\n            continue;\n          }\n          const darkMode = colorTheme.includes('dark');\n          const lightMode = colorTheme.includes('light');\n          if (!darkMode && !lightMode) {\n            continue;\n          }\n          document.documentElement.setAttribute('data-stack-theme', darkMode ? 'dark' : 'light');\n        }\n      }\n    });\n  });\n\n  observer.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: attributes,\n  });\n};\n\nexport function BrowserScript(props : { nonce?: string }) {\n  return <SsrScript nonce={props.nonce} script={`(${script.toString()})()`}/>;\n}"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,+BAA0B;AAgCjB;AA7BT,IAAM,SAAS,MAAM;AACnB,QAAM,aAAa,CAAC,yBAAyB,yBAAyB,cAAc,qBAAqB,OAAO;AAEhH,QAAM,WAAW,IAAI,iBAAiB,CAAC,cAAc;AACnD,cAAU,QAAQ,CAAC,aAAa;AAC9B,iBAAW,iBAAiB,YAAY;AACtC,YAAI,SAAS,kBAAkB,eAAe;AAC5C,gBAAM,aAAa,SAAS,gBAAgB,aAAa,aAAa;AACtE,cAAI,CAAC,YAAY;AACf;AAAA,UACF;AACA,gBAAM,WAAW,WAAW,SAAS,MAAM;AAC3C,gBAAM,YAAY,WAAW,SAAS,OAAO;AAC7C,cAAI,CAAC,YAAY,CAAC,WAAW;AAC3B;AAAA,UACF;AACA,mBAAS,gBAAgB,aAAa,oBAAoB,WAAW,SAAS,OAAO;AAAA,QACvF;AAAA,MACF;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AAED,WAAS,QAAQ,SAAS,iBAAiB;AAAA,IACzC,YAAY;AAAA,IACZ,iBAAiB;AAAA,EACnB,CAAC;AACH;AAEO,SAAS,cAAc,OAA4B;AACxD,SAAO,4CAAC,sCAAU,OAAO,MAAM,OAAO,QAAQ,IAAI,OAAO,SAAS,CAAC,OAAM;AAC3E;","names":[]}
+{"version":3,"sources":["../../src/utils/browser-script.tsx"],"sourcesContent":["// Note that this script can not import anything from outside as it will be converted to a string and executed in the browser.\n\nimport { SsrScript } from \"../components/elements/ssr-layout-effect\";\n\n// Also please note that there might be hydration issues with this script, always check the browser console for errors after changing this script.\nconst script = () => {\n  const attributes = ['data-joy-color-scheme', 'data-mui-color-scheme', 'data-theme', 'data-color-scheme', 'class'];\n\n  const getColorMode = (value: string) => {\n    if (value.includes('dark')) {\n      return 'dark';\n    }\n    if (value.includes('light')) {\n      return 'light';\n    }\n    return null;\n  };\n\n  const copyFromColorScheme = () => {\n    const colorScheme = getComputedStyle(document.documentElement).getPropertyValue('color-scheme');\n    if (colorScheme) {\n      const mode = getColorMode(colorScheme);\n      if (mode) {\n        document.documentElement.setAttribute('data-stack-theme', mode);\n        return true;\n      }\n    }\n    return false;\n  };\n\n  const copyFromAttributes = () => {\n    for (const attributeName of attributes) {\n      const colorTheme = document.documentElement.getAttribute(attributeName);\n      if (colorTheme) {\n        const mode = getColorMode(colorTheme);\n        if (mode) {\n          document.documentElement.setAttribute('data-stack-theme', mode);\n          return true;\n        }\n      }\n    }\n    return false;\n  };\n\n  const observer = new MutationObserver((mutations) => {\n    mutations.forEach((mutation) => {\n      if (copyFromColorScheme()) {\n        return;\n      }\n      if (mutation.attributeName && attributes.includes(mutation.attributeName)) {\n        copyFromAttributes();\n      }\n    });\n  });\n\n  observer.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: attributes,\n  });\n\n  // Initial check on page load\n  if (!copyFromColorScheme()) {\n    copyFromAttributes();\n  }\n};\n\nexport function BrowserScript(props : { nonce?: string }) {\n  return <SsrScript nonce={props.nonce} script={`(${script.toString()})()`}/>;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,+BAA0B;AAiEjB;AA9DT,IAAM,SAAS,MAAM;AACnB,QAAM,aAAa,CAAC,yBAAyB,yBAAyB,cAAc,qBAAqB,OAAO;AAEhH,QAAM,eAAe,CAAC,UAAkB;AACtC,QAAI,MAAM,SAAS,MAAM,GAAG;AAC1B,aAAO;AAAA,IACT;AACA,QAAI,MAAM,SAAS,OAAO,GAAG;AAC3B,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT;AAEA,QAAM,sBAAsB,MAAM;AAChC,UAAM,cAAc,iBAAiB,SAAS,eAAe,EAAE,iBAAiB,cAAc;AAC9F,QAAI,aAAa;AACf,YAAM,OAAO,aAAa,WAAW;AACrC,UAAI,MAAM;AACR,iBAAS,gBAAgB,aAAa,oBAAoB,IAAI;AAC9D,eAAO;AAAA,MACT;AAAA,IACF;AACA,WAAO;AAAA,EACT;AAEA,QAAM,qBAAqB,MAAM;AAC/B,eAAW,iBAAiB,YAAY;AACtC,YAAM,aAAa,SAAS,gBAAgB,aAAa,aAAa;AACtE,UAAI,YAAY;AACd,cAAM,OAAO,aAAa,UAAU;AACpC,YAAI,MAAM;AACR,mBAAS,gBAAgB,aAAa,oBAAoB,IAAI;AAC9D,iBAAO;AAAA,QACT;AAAA,MACF;AAAA,IACF;AACA,WAAO;AAAA,EACT;AAEA,QAAM,WAAW,IAAI,iBAAiB,CAAC,cAAc;AACnD,cAAU,QAAQ,CAAC,aAAa;AAC9B,UAAI,oBAAoB,GAAG;AACzB;AAAA,MACF;AACA,UAAI,SAAS,iBAAiB,WAAW,SAAS,SAAS,aAAa,GAAG;AACzE,2BAAmB;AAAA,MACrB;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AAED,WAAS,QAAQ,SAAS,iBAAiB;AAAA,IACzC,YAAY;AAAA,IACZ,iBAAiB;AAAA,EACnB,CAAC;AAGD,MAAI,CAAC,oBAAoB,GAAG;AAC1B,uBAAmB;AAAA,EACrB;AACF;AAEO,SAAS,cAAc,OAA4B;AACxD,SAAO,4CAAC,sCAAU,OAAO,MAAM,OAAO,QAAQ,IAAI,OAAO,SAAS,CAAC,OAAM;AAC3E;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stackframe/stack",
-  "version": "2.5.12",
+  "version": "2.5.15",
   "sideEffects": false,
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -38,9 +38,9 @@
     "tailwindcss-animate": "^1.0.7",
     "tsx": "^4.7.2",
     "yup": "^1.4.0",
-    "@stackframe/stack-shared": "2.5.12",
-    "@stackframe/stack-ui": "2.5.12",
-    "@stackframe/stack-sc": "2.5.12"
+    "@stackframe/stack-sc": "2.5.15",
+    "@stackframe/stack-shared": "2.5.15",
+    "@stackframe/stack-ui": "2.5.15"
   },
   "peerDependencies": {
     "next": ">=14.1",