@ngrok/mantle 0.61.0 → 0.61.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/alert-dialog.js +1 -1
- package/dist/{chunk-HG2MWNPU.js → chunk-A3JO5HCY.js} +2 -2
- package/dist/{chunk-RLW7NBZU.js → chunk-CMHMGZJJ.js} +2 -2
- package/dist/chunk-ZYMZVPDT.js +2 -0
- package/dist/chunk-ZYMZVPDT.js.map +1 -0
- package/dist/command.js +1 -1
- package/dist/dialog.js +1 -1
- package/dist/hooks.d.ts +6 -2
- package/dist/hooks.js +1 -1
- package/dist/hooks.js.map +1 -1
- package/dist/icons.js +1 -1
- package/dist/mantle.css +1 -0
- package/dist/sheet.js +1 -1
- package/dist/theme.d.ts +2 -2
- package/dist/theme.js +1 -1
- package/dist/toast.js +1 -1
- package/package.json +3 -3
- package/dist/chunk-B2CXQETQ.js +0 -2
- package/dist/chunk-B2CXQETQ.js.map +0 -1
- /package/dist/{chunk-HG2MWNPU.js.map → chunk-A3JO5HCY.js.map} +0 -0
- /package/dist/{chunk-RLW7NBZU.js.map → chunk-CMHMGZJJ.js.map} +0 -0
package/dist/alert-dialog.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as y,b as A,c as u,d as c,e as D,f as C,g as P,h as v}from"./chunk-NQZYWYVH.js";import{d as f}from"./chunk-
|
|
1
|
+
import{a as y,b as A,c as u,d as c,e as D,f as C,g as P,h as v}from"./chunk-NQZYWYVH.js";import{d as f}from"./chunk-A3JO5HCY.js";import"./chunk-ZYMZVPDT.js";import"./chunk-6J7D73WA.js";import"./chunk-NJNFZ2EG.js";import"./chunk-KMNACVH6.js";import{a as d}from"./chunk-SK2YHT6N.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-OP6JMBKJ.js";import"./chunk-SBVSECWW.js";import{a as p}from"./chunk-ODDNPNLN.js";import{a as g}from"./chunk-NZ6DRFAL.js";import{a}from"./chunk-PFXFESEN.js";import{InfoIcon as H}from"@phosphor-icons/react/Info";import{WarningIcon as k}from"@phosphor-icons/react/Warning";import{createContext as M,forwardRef as n,useContext as $,useMemo as q}from"react";import E from"tiny-invariant";import{jsx as i,jsxs as J}from"react/jsx-runtime";var x=M(null);function N(){let t=$(x);return E(t,"AlertDialog child component used outside of AlertDialog parent!"),t}function h({priority:t,...e}){let o=q(()=>({priority:t}),[t]);return i(x.Provider,{value:o,children:i(y,{...e})})}h.displayName="AlertDialog";var R=A;R.displayName="AlertDialogTrigger";var b=u;b.displayName="AlertDialogPortal";var W=n(({className:t,...e},o)=>i(D,{className:a("data-state-open:animate-in data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:fade-in-0 bg-overlay fixed inset-0 z-50 backdrop-blur-xs",t),...e,ref:o}));W.displayName="AlertDialogOverlay";var I=n(({className:t,onInteractOutside:e,onPointerDownOutside:o,preferredWidth:r="max-w-md",...l},m)=>J(b,{children:[i(W,{}),i("div",{className:"fixed inset-4 z-50 flex items-center justify-center",children:i(C,{ref:m,className:a("flex w-full flex-1 flex-col items-center gap-4 sm:flex-row sm:items-start","outline-hidden focus-within:outline-hidden","p-6","border-dialog bg-dialog rounded-xl border shadow-lg transition-transform duration-200","data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95",r,t),onInteractOutside:s=>{f(s),e?.(s)},onPointerDownOutside:s=>{f(s),o?.(s)},...l})})]}));I.displayName="AlertDialogContent";var O=n(({asChild:t=!1,className:e,...o},r)=>i(t?p:"div",{className:a("flex-1 space-y-4",e),ref:r,...o}));O.displayName="AlertDialogBody";var w=n(({asChild:t=!1,className:e,...o},r)=>i(t?p:"div",{className:a("flex flex-col space-y-2 text-center sm:text-start",e),ref:r,...o}));w.displayName="AlertDialogHeader";var B=n(({asChild:t=!1,className:e,...o},r)=>i(t?p:"div",{className:a("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",e),ref:r,...o}));B.displayName="AlertDialogFooter";var T=n(({className:t,...e},o)=>i(P,{ref:o,className:a("text-strong text-center text-lg font-medium sm:text-start",t),...e}));T.displayName="AlertDialogTitle";var z=n(({className:t,...e},o)=>i(v,{ref:o,className:a("text-body text-center text-sm font-normal sm:text-start",t),...e}));z.displayName="AlertDialogDescription";var S=n(({appearance:t="filled",...e},o)=>{let r=N(),l="default";return r.priority==="danger"&&(l="danger"),i(d,{appearance:t,priority:l,ref:o,...e})});S.displayName="AlertDialogAction";var j=n(({appearance:t="outlined",className:e,priority:o="neutral",...r},l)=>i(c,{asChild:!0,children:i(d,{appearance:t,className:a("mt-2 sm:mt-0",e),priority:o,ref:l,...r})}));j.displayName="AlertDialogCancel";var V=n(({className:t,svg:e,...o},r)=>{let l=N(),m=l.priority==="danger"?"text-danger-600":"text-accent-600",s=l.priority==="danger"?i(k,{}):i(H,{});return i(g,{ref:r,className:a("size-12 sm:size-7",m,t),svg:e??s,...o})});V.displayName="AlertDialogIcon";var F=c;F.displayName="AlertDialogClose";var G={Root:h,Action:S,Body:O,Cancel:j,Close:F,Content:I,Description:z,Footer:B,Header:w,Icon:V,Title:T,Trigger:R};export{G as AlertDialog};
|
|
2
2
|
//# sourceMappingURL=alert-dialog.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{m as y}from"./chunk-
|
|
2
|
-
//# sourceMappingURL=chunk-
|
|
1
|
+
import{m as y}from"./chunk-ZYMZVPDT.js";import{a as p}from"./chunk-SBVSECWW.js";import{a as d}from"./chunk-ODDNPNLN.js";import{a as n}from"./chunk-PFXFESEN.js";import{CheckCircleIcon as x}from"@phosphor-icons/react/CheckCircle";import{InfoIcon as w}from"@phosphor-icons/react/Info";import{WarningIcon as I}from"@phosphor-icons/react/Warning";import{WarningDiamondIcon as N}from"@phosphor-icons/react/WarningDiamond";import{createContext as P,forwardRef as l,useContext as f}from"react";import*as c from"sonner";import{jsx as s,jsxs as k}from"react/jsx-runtime";var A=({className:t,containerAriaLabel:e,dir:o,duration_ms:r=4e3,position:i="top-center",style:a})=>{let m=y();return s(c.Toaster,{className:n("toaster overlay-prompt pointer-events-auto *:duration-200",t),containerAriaLabel:e,dir:o,duration:r,gap:12,position:i??"top-center",style:a,theme:m,toastOptions:{unstyled:!0}})};A.displayName="Toaster";var g=P("");function L(t,e){let o=e?.duration_ms;return typeof o=="number"&&o<=0&&(o=Number.POSITIVE_INFINITY),c.toast.custom(r=>s(g.Provider,{value:r,children:t}),{duration:o,...e?.id?{id:e.id}:{},unstyled:!0})}var T=P({priority:"info"}),v=l(({asChild:t,children:e,className:o,priority:r,...i},a)=>{let m=t?d:"div";return s(T.Provider,{value:{priority:r},children:k(m,{className:n("relative flex items-start gap-2 text-sm","p-3 pl-3.75","bg-popover high-contrast:border-popover rounded rounded-r-[0.3125rem] border border-gray-500/35 shadow-lg",o),ref:a,...i,children:[s(S,{priority:r}),e]})})});v.displayName="Toast";var h=l(({className:t,svg:e,...o},r)=>{let i=f(T);switch(i.priority){case"danger":return s(p,{className:n("text-danger-600",t),ref:r,svg:e??s(I,{weight:"fill"}),...o});case"warning":return s(p,{className:n("text-warning-600",t),ref:r,svg:e??s(N,{weight:"fill"}),...o});case"success":return s(p,{className:n("text-success-600",t),ref:r,svg:e??s(x,{weight:"fill"}),...o});case"info":return s(p,{className:n("text-accent-600",t),ref:r,svg:s(w,{weight:"fill"}),...o});default:throw new Error(`Unreachable Case: ${i.priority}`)}});h.displayName="ToastIcon";var C=l(({asChild:t,className:e,onClick:o,...r},i)=>{let a=f(g);return s(t?d:"button",{className:n("shrink-0","data-icon-button:-mr-0.5 data-icon-button:-mt-0.5 data-icon-button:rounded-xs",e),onClick:u=>{o?.(u),!u.defaultPrevented&&c.toast.dismiss(a)},ref:i,...r})});C.displayName="ToastAction";var b=l(({asChild:t,className:e,...o},r)=>s(t?d:"p",{className:n("text-strong flex-1 text-sm font-body",e),ref:r,...o}));b.displayName="ToastMessage";var z={Root:v,Action:C,Icon:h,Message:b};function U(t){t.target instanceof Element&&t.target.closest(".overlay-prompt")&&t.preventDefault()}var R={info:"bg-accent-600",warning:"bg-warning-600",success:"bg-success-600",danger:"bg-danger-600"};function S({className:t,priority:e,...o}){return s("div",{"aria-hidden":!0,className:n("z-1 absolute -inset-px right-auto w-1.5 rounded-l",R[e],t),...o})}export{A as a,L as b,z as c,U as d};
|
|
2
|
+
//# sourceMappingURL=chunk-A3JO5HCY.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as f,b as P,c as D,d as m,e as u,f as v,g as y,h as C}from"./chunk-NQZYWYVH.js";import{d as p}from"./chunk-
|
|
2
|
-
//# sourceMappingURL=chunk-
|
|
1
|
+
import{a as f,b as P,c as D,d as m,e as u,f as v,g as y,h as C}from"./chunk-NQZYWYVH.js";import{d as p}from"./chunk-A3JO5HCY.js";import{c as g}from"./chunk-ZCTK5X4D.js";import{a}from"./chunk-PFXFESEN.js";import{XIcon as k}from"@phosphor-icons/react/X";import{forwardRef as r}from"react";import{jsx as e,jsxs as F}from"react/jsx-runtime";var x=f;x.displayName="Dialog";var N=P;N.displayName="DialogTrigger";var d=D;d.displayName="DialogPortal";var b=m;b.displayName="DialogClose";var c=r(({className:o,...t},i)=>e(u,{ref:i,className:a("bg-overlay data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0 fixed inset-0 z-50 backdrop-blur-xs",o),...t}));c.displayName="DialogOverlay";var h=r(({children:o,className:t,onInteractOutside:i,onPointerDownOutside:l,preferredWidth:s="max-w-lg",...W},z)=>F(d,{children:[e(c,{}),e("div",{className:"fixed inset-4 z-50 flex items-center justify-center",children:e(v,{className:a("flex max-h-full w-full flex-1 flex-col","outline-hidden focus-within:outline-hidden","border-dialog bg-dialog rounded-xl border shadow-lg transition-transform duration-200","data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95",s,t),onInteractOutside:n=>{p(n),i?.(n)},onPointerDownOutside:n=>{p(n),l?.(n)},ref:z,...W,children:o})})]}));h.displayName="DialogContent";var R=({className:o,children:t,...i})=>e("div",{className:a("border-dialog-muted text-strong relative flex shrink-0 items-center justify-between gap-2 border-b px-6 py-4","has-[.icon-button]:pr-4",o),...i,children:t});R.displayName="DialogHeader";var w=({size:o="md",type:t="button",label:i="Close Dialog",appearance:l="ghost",...s})=>e(m,{asChild:!0,children:e(g,{appearance:l,icon:e(k,{}),label:i,size:o,type:t,...s})});w.displayName="DialogCloseIconButton";var I=({className:o,...t})=>e("div",{className:a("scrollbar text-body flex-1 overflow-y-auto p-6",o),...t});I.displayName="DialogBody";var B=({className:o,...t})=>e("div",{className:a("border-dialog-muted flex shrink-0 flex-row-reverse gap-2 border-t px-6 py-4",o),...t});B.displayName="DialogFooter";var O=r(({className:o,...t},i)=>e(y,{ref:i,className:a("text-strong truncate text-lg font-medium",o),...t}));O.displayName="DialogTitle";var T=r(({className:o,...t},i)=>e(C,{ref:i,className:a("text-muted",o),...t}));T.displayName="DialogDescription";var E={Root:x,Body:I,Close:b,CloseIconButton:w,Content:h,Description:T,Footer:B,Header:R,Overlay:c,Portal:d,Title:O,Trigger:N};export{E as a};
|
|
2
|
+
//# sourceMappingURL=chunk-CMHMGZJJ.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{a as R}from"./chunk-6J7D73WA.js";import{b as f}from"./chunk-NJNFZ2EG.js";import{a as Q}from"./chunk-PFXFESEN.js";import{Fragment as Z,jsx as K}from"react/jsx-runtime";var q="https://assets.ngrok.com",J=`${q}/fonts`,z=["/roobert/roobert-proportional-vf.woff2","/jetbrains/jetbrainsmono-wght.woff2","/jetbrains/jetbrainsmono-italic-wght.woff2","/family/family-regular.woff2","/family/family-italic.woff2"];function X(e){let t=e.startsWith("/")?e:`/${e}`;return`${J}${t}`}var L=()=>K(Z,{children:z.map(e=>K("link",{rel:"preload",href:X(e),as:"font",type:"font/woff2",crossOrigin:"anonymous"},e))});L.displayName="PreloadCoreFonts";var w=["light","dark","light-high-contrast","dark-high-contrast"],x=["system",...w],ye=e=>e;function k(e){return typeof e!="string"?!1:x.includes(e)}var ve=e=>e;function D(e){return typeof e!="string"?!1:w.includes(e)}import{createContext as ee,useContext as B,useEffect as te,useMemo as V,useRef as ne,useState as oe}from"react";import re from"tiny-invariant";import{Fragment as pe,jsx as E,jsxs as Te}from"react/jsx-runtime";var P="(prefers-color-scheme: dark)",M="(prefers-contrast: more)",g="mantle-ui-theme",C="system",se=["system",()=>null],O=ee(se);function ie({children:e}){let[t,o]=oe(()=>{let n=W({cookie:f()?document.cookie:null});return I(n),n}),r=ne(null);te(()=>{function n(c){let m=c??W({cookie:document.cookie});o(m),I(m)}n();try{"BroadcastChannel"in window&&(r.current=new BroadcastChannel(g),r.current.onmessage=c=>{let m=c?.data?.theme;k(m)&&n(m)})}catch{}function u(c){c.key===`${g}__ping`&&n()}window.addEventListener("storage",u);let a=window.matchMedia(P),p=window.matchMedia(M);function l(){n()}function y(){document.visibilityState==="visible"&&n()}return a.addEventListener("change",l),p.addEventListener("change",l),window.addEventListener("pageshow",l),document.addEventListener("visibilitychange",y),()=>{window.removeEventListener("storage",u),a.removeEventListener("change",l),p.removeEventListener("change",l),window.removeEventListener("pageshow",l),document.removeEventListener("visibilitychange",y);try{r.current?.close()}catch{}r.current=null}},[]);let i=V(()=>[t,n=>{ue(n),o(n),I(n),le(n,{broadcastChannel:r.current,pingKey:`${g}__ping`})}],[t]);return E(O.Provider,{value:i,children:e})}ie.displayName="ThemeProvider";function Ee(){let e=B(O);return re(e,"useTheme must be used within a ThemeProvider"),e}function I(e){if(!f())return;let t=window.document.documentElement,o=window.matchMedia(P).matches,r=window.matchMedia(M).matches,i=N(e,{prefersDarkMode:o,prefersHighContrast:r}),n=t.dataset.theme,u=t.dataset.appliedTheme,a=k(n)?n:void 0,p=D(u)?u:void 0;a===e&&p===i||(t.classList.remove(...w),t.classList.add(i),t.dataset.theme=e,t.dataset.appliedTheme=i)}function $e(){if(!f())return{appliedTheme:void 0,theme:void 0};let e=window.document.documentElement,t=k(e.dataset.theme)?e.dataset.theme:void 0;return{appliedTheme:D(e.dataset.appliedTheme)?e.dataset.appliedTheme:void 0,theme:t}}function N(e,{prefersDarkMode:t,prefersHighContrast:o}){return e==="system"?ae({prefersDarkMode:t,prefersHighContrast:o}):e}function Fe(){let e=B(O),t=e!=null?e[0]:"system",o=R(P),r=R(M);return N(t,{prefersDarkMode:o,prefersHighContrast:r})}function ae({prefersDarkMode:e,prefersHighContrast:t}){return t?e?"dark-high-contrast":"light-high-contrast":e?"dark":"light"}function me(e){let{storageKey:t,defaultTheme:o,themes:r,resolvedThemes:i,prefersDarkModeMediaQuery:n,prefersHighContrastMediaQuery:u}=e;function a(s){return typeof s=="string"&&r.includes(s)}function p(s){let h=document.cookie;if(!h)return null;try{let H=h.split(";").find(_=>_.trim().startsWith(`${s}=`))?.split("=")[1];return H?decodeURIComponent(H):null}catch{return null}}function l(s,h){let d=new Date;d.setFullYear(d.getFullYear()+1);let F=window.location.hostname,H=window.location.protocol,A=F==="ngrok.com"||F.endsWith(".ngrok.com")?"; domain=.ngrok.com":"",_=H==="https:"?"; Secure":"";return`${s}=${encodeURIComponent(h)}; expires=${d.toUTCString()}; path=/${A}; SameSite=Lax${_}`}function y(s,h){try{document.cookie=l(s,h)}catch{}}function c(s,h,d){return s==="system"?d?h?"dark-high-contrast":"light-high-contrast":h?"dark":"light":s}let m=null,v=null,S=null;try{m=p(t)}catch{}if(a(m))S=m;else{try{v=window.localStorage?.getItem(t)??null}catch{}a(v)&&(S=v)}let b=a(S)?S:o,G=matchMedia(n).matches,j=matchMedia(u).matches,$=c(b,G,j),T=document.documentElement;if(T.dataset.appliedTheme!==$||T.dataset.theme!==b){for(let s of i)T.classList.remove(s);T.classList.add($),T.dataset.theme=b,T.dataset.appliedTheme=$}let U=a(m);try{if(a(v)&&!U){y(t,v);try{window.localStorage.removeItem(t)}catch{}}else U||y(t,b)}catch{}}function ce(){let e={storageKey:g,defaultTheme:C,themes:x,resolvedThemes:w,prefersDarkModeMediaQuery:P,prefersHighContrastMediaQuery:M};return`(${me.toString()})(${JSON.stringify(e)})`}var Y=({nonce:e})=>E("script",{dangerouslySetInnerHTML:{__html:ce()},nonce:e,suppressHydrationWarning:!0});Y.displayName="PreventWrongThemeFlashScript";var he=({nonce:e})=>Te(pe,{children:[E(Y,{nonce:e}),E(L,{})]});he.displayName="MantleThemeHeadContent";function _e(e={}){let{className:t=""}=e??{};return V(()=>{let o,r;if(!f())o=C,r="light";else{let i=window.matchMedia(P).matches,n=window.matchMedia(M).matches;o=W({cookie:document.cookie}),r=N(o,{prefersDarkMode:i,prefersHighContrast:n})}return{className:Q(t,r),"data-applied-theme":r,"data-theme":o}},[t])}function W({cookie:e}){if(!e)return C;try{let r=e.split(";").find(n=>n.trim().startsWith(`${g}=`))?.split("=")[1],i=r?globalThis.decodeURIComponent(r):null;return k(i)?i:C}catch{return C}}function le(e,t){let{broadcastChannel:o,pingKey:r}=t;try{if(o){o.postMessage({theme:e,timestamp:Date.now()});return}}catch{}try{localStorage.setItem(r,JSON.stringify({theme:e,timestamp:Date.now()}))}catch{}}function de(e){let t=new Date;t.setFullYear(t.getFullYear()+1);let{hostname:o,protocol:r}=window.location,i=o==="ngrok.com"||o.endsWith(".ngrok.com")?"; domain=.ngrok.com":"",n=r==="https:"?"; Secure":"";return`${g}=${encodeURIComponent(e)}; expires=${t.toUTCString()}; path=/${i}; SameSite=Lax${n}`}function ue(e){if(f())try{document.cookie=de(e)}catch{}}export{q as a,X as b,L as c,w as d,x as e,ye as f,k as g,ve as h,D as i,ie as j,Ee as k,$e as l,Fe as m,ce as n,he as o,_e as p,W as q};
|
|
2
|
+
//# sourceMappingURL=chunk-ZYMZVPDT.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/theme/fonts.tsx","../src/components/theme/themes.ts","../src/components/theme/theme-provider.tsx"],"sourcesContent":["/**\n * @fileoverview Helpers for preloading ngrok brand fonts from the CDN.\n * All font URLs resolve to `${assetsCdnOrigin}/fonts`.\n */\n\n/**\n * The origin for the assets CDN where custom ngrok fonts and assets are hosted.\n *\n * Keep this stable across the app so we can preconnect/DNS-prefetch consistently.\n * @public\n */\nconst assetsCdnOrigin = \"https://assets.ngrok.com\";\n\n/**\n * Base path for font assets on the CDN.\n * @internal\n */\nconst cdnBase = `${assetsCdnOrigin}/fonts`;\n\n/**\n * Canonical list of core font paths (relative to the CDN fonts base).\n */\nconst coreFonts = [\n\t\"/roobert/roobert-proportional-vf.woff2\",\n\t\"/jetbrains/jetbrainsmono-wght.woff2\",\n\t\"/jetbrains/jetbrainsmono-italic-wght.woff2\",\n\t\"/family/family-regular.woff2\",\n\t\"/family/family-italic.woff2\",\n] as const;\n\ntype FontPath = `/${string}` | (string & {});\n\n/**\n * Builds an absolute CDN URL for a given font.\n *\n * @returns {`https://assets.ngrok.com/fonts${T}`} An absolute, literal-typed CDN URL.\n *\n * @example\n * const href = fontHref(\"/roobert/roobert-proportional-vf.woff2\");\n * // -> \"https://assets.ngrok.com/fonts/roobert/roobert-proportional-vf.woff2\"\n */\nfunction fontHref<T extends FontPath = FontPath>(font: T) {\n\tconst path = font.startsWith(\"/\") ? font : `/${font}`;\n\treturn `${cdnBase}${path}` as const;\n}\n\n/**\n * Preload core fonts used in the mantle theme.\n *\n * Include this as early as possible in the document `<head>` so text renders\n * with the intended face without layout shifts. Uses `crossOrigin=\"anonymous\"`\n * so the browser can cache and reuse the font across origins.\n *\n * @remarks\n * For best performance, pair this with preconnect/dns-prefetch hints to the CDN.\n *\n * This is automatically included in `<MantleThemeHeadContent />`.\n *\n * @example\n * ```tsx\n * <head>\n * <meta charSet=\"utf-8\" />\n * <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n *\n * // Preconnect and DNS-prefetch to the assets CDN\n * // either here or in app root headers\n * <link rel=\"preconnect\" href={assetsCdnOrigin} crossOrigin=\"anonymous\" />\n * <link rel=\"dns-prefetch\" href={assetsCdnOrigin} />\n *\n * <PreventWrongThemeFlashScript />\n * <PreloadCoreFonts />\n * // ... other head elements ...\n * </head>\n * ```\n */\nconst PreloadCoreFonts = () => (\n\t<>\n\t\t{coreFonts.map((font) => (\n\t\t\t<link\n\t\t\t\tkey={font}\n\t\t\t\trel=\"preload\"\n\t\t\t\thref={fontHref(font)}\n\t\t\t\tas=\"font\"\n\t\t\t\ttype=\"font/woff2\"\n\t\t\t\tcrossOrigin=\"anonymous\"\n\t\t\t/>\n\t\t))}\n\t</>\n);\nPreloadCoreFonts.displayName = \"PreloadCoreFonts\";\n\nexport {\n\t//,\n\tassetsCdnOrigin,\n\tfontHref,\n\tPreloadCoreFonts,\n};\n","/**\n * resolvedThemes is a tuple of valid themes that have been resolved from \"system\" to a specific theme.\n */\nconst resolvedThemes = [\"light\", \"dark\", \"light-high-contrast\", \"dark-high-contrast\"] as const;\n\n/**\n * ResolvedTheme is a type that represents a theme that has been resolved from \"system\" to a specific theme.\n */\ntype ResolvedTheme = (typeof resolvedThemes)[number];\n\n/**\n * themes is a tuple of valid themes.\n */\nconst themes = [\"system\", ...resolvedThemes] as const;\n\n/**\n * Theme is a string literal type that represents a valid theme.\n */\ntype Theme = (typeof themes)[number];\n\n/**\n * $theme is a helper which translates the Theme type into a string literal type.\n */\nconst $theme = <T extends Theme = Theme>(value: T) => value;\n\n/**\n * Type predicate that checks if a value is a valid theme.\n */\nfunction isTheme(value: unknown): value is Theme {\n\tif (typeof value !== \"string\") {\n\t\treturn false;\n\t}\n\n\treturn themes.includes(value as Theme);\n}\n\n/**\n * $resolvedTheme is a helper which translates the ResolvedTheme type into a string literal type.\n */\nconst $resolvedTheme = <T extends ResolvedTheme = ResolvedTheme>(value: T) => value;\n\n/**\n * Type predicate that checks if a value is a valid resolved theme.\n */\nfunction isResolvedTheme(value: unknown): value is ResolvedTheme {\n\tif (typeof value !== \"string\") {\n\t\treturn false;\n\t}\n\n\treturn resolvedThemes.includes(value as ResolvedTheme);\n}\n\nexport {\n\t//,\n\tthemes,\n\tresolvedThemes,\n\t$resolvedTheme,\n\t$theme,\n\tisResolvedTheme,\n\tisTheme,\n};\n\nexport type {\n\t//,\n\tTheme,\n\tResolvedTheme,\n};\n","\"use client\";\n\nimport type { PropsWithChildren } from \"react\";\nimport { createContext, useContext, useEffect, useMemo, useRef, useState } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { useMatchesMediaQuery } from \"../../hooks/use-matches-media-query.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { canUseDOM } from \"../browser-only/browser-only.js\";\nimport { PreloadCoreFonts } from \"./fonts.js\";\nimport {\n\ttype ResolvedTheme,\n\ttype Theme,\n\tisResolvedTheme,\n\tisTheme,\n\tresolvedThemes,\n\tthemes,\n} from \"./themes.js\";\n\n/**\n * prefersDarkModeMediaQuery is the media query used to detect if the user prefers dark mode.\n */\nconst prefersDarkModeMediaQuery = \"(prefers-color-scheme: dark)\";\n\n/**\n * prefersHighContrastMediaQuery is the media query used to detect if the user prefers high contrast mode.\n */\nconst prefersHighContrastMediaQuery = \"(prefers-contrast: more)\";\n\n/**\n * THEME_STORAGE_KEY is the key used to store the theme in cookies.\n */\nconst THEME_STORAGE_KEY = \"mantle-ui-theme\";\n\n/**\n * DEFAULT_THEME is the initial theme to apply if no value is found in storage.\n * {@link themes}\n */\nconst DEFAULT_THEME = \"system\" satisfies Theme;\n\n/**\n * ThemeProviderState is the shape of the state returned by the ThemeProviderContext.\n */\ntype ThemeProviderState = [theme: Theme, setTheme: (theme: Theme) => void];\n\n/**\n * Initial state for the ThemeProviderContext.\n */\nconst initialState: ThemeProviderState = [\"system\", () => null];\n\n/**\n * ThemeProviderContext is a React Context that provides the current theme and a function to set the theme.\n */\nconst ThemeProviderContext = createContext<ThemeProviderState | null>(initialState);\n\ntype ThemeProviderProps = PropsWithChildren;\n\n/**\n * ThemeProvider is a React Context Provider that provides the current theme and a function to set the theme.\n *\n * @see https://mantle.ngrok.com/components/theme-provider#api-theme-provider\n *\n * @example\n * ```tsx\n * <ThemeProvider defaultTheme=\"system\" storageKey=\"app-theme\">\n * <App />\n * </ThemeProvider>\n * ```\n */\nfunction ThemeProvider({ children }: ThemeProviderProps) {\n\t// Init once from cookie and apply immediately to avoid flashes\n\tconst [theme, setTheme] = useState<Theme>(() => {\n\t\tconst storedTheme = getStoredTheme({\n\t\t\tcookie: canUseDOM() ? document.cookie : null,\n\t\t});\n\t\tapplyThemeToHtml(storedTheme);\n\t\treturn storedTheme;\n\t});\n\n\tconst broadcastChannelRef = useRef<BroadcastChannel | null>(null);\n\n\tuseEffect(() => {\n\t\tfunction syncThemeFromCookie(next?: Theme) {\n\t\t\tconst newTheme = next ?? getStoredTheme({ cookie: document.cookie });\n\t\t\tsetTheme(newTheme);\n\t\t\tapplyThemeToHtml(newTheme);\n\t\t}\n\n\t\t// initial sync in case defaultTheme or storageKey changed\n\t\tsyncThemeFromCookie();\n\n\t\t// add cross-tab listeners (prefer broadcast channel, use localStorage as fallback)\n\t\ttry {\n\t\t\tif (\"BroadcastChannel\" in window) {\n\t\t\t\tbroadcastChannelRef.current = new BroadcastChannel(THEME_STORAGE_KEY);\n\t\t\t\tbroadcastChannelRef.current.onmessage = (event) => {\n\t\t\t\t\tconst value: unknown = event?.data?.theme;\n\t\t\t\t\tif (isTheme(value)) {\n\t\t\t\t\t\tsyncThemeFromCookie(value);\n\t\t\t\t\t}\n\t\t\t\t};\n\t\t\t}\n\t\t\t// oxlint-disable-next-line no-unused-vars\n\t\t} catch (_) {\n\t\t\t// silently swallow errors\n\t\t}\n\n\t\tfunction onStorage(event: StorageEvent) {\n\t\t\tif (event.key === `${THEME_STORAGE_KEY}__ping`) {\n\t\t\t\tsyncThemeFromCookie();\n\t\t\t}\n\t\t}\n\t\twindow.addEventListener(\"storage\", onStorage);\n\n\t\t// add media query listeners for system theme changes\n\t\tconst prefersDarkMql = window.matchMedia(prefersDarkModeMediaQuery);\n\t\tconst prefersHighContrastMql = window.matchMedia(prefersHighContrastMediaQuery);\n\n\t\tfunction onChange() {\n\t\t\tsyncThemeFromCookie();\n\t\t}\n\n\t\tfunction onVisibilityChange() {\n\t\t\tif (document.visibilityState === \"visible\") {\n\t\t\t\tsyncThemeFromCookie();\n\t\t\t}\n\t\t}\n\n\t\tprefersDarkMql.addEventListener(\"change\", onChange);\n\t\tprefersHighContrastMql.addEventListener(\"change\", onChange);\n\n\t\t// pageshow fires on bfcache restore (event.persisted === true) and some restore-from-freeze cases.\n\t\twindow.addEventListener(\"pageshow\", onChange);\n\n\t\t// visibilitychange to handle coming back to a tab\n\t\tdocument.addEventListener(\"visibilitychange\", onVisibilityChange);\n\n\t\t// don't forget to clean up your slop!\n\t\treturn () => {\n\t\t\twindow.removeEventListener(\"storage\", onStorage);\n\t\t\tprefersDarkMql.removeEventListener(\"change\", onChange);\n\t\t\tprefersHighContrastMql.removeEventListener(\"change\", onChange);\n\t\t\twindow.removeEventListener(\"pageshow\", onChange);\n\t\t\tdocument.removeEventListener(\"visibilitychange\", onVisibilityChange);\n\n\t\t\ttry {\n\t\t\t\tbroadcastChannelRef.current?.close();\n\t\t\t\t// oxlint-disable-next-line no-unused-vars\n\t\t\t} catch (_) {\n\t\t\t\t// silently swallow errors\n\t\t\t}\n\t\t\tbroadcastChannelRef.current = null;\n\t\t};\n\t}, []);\n\n\tconst value: ThemeProviderState = useMemo(\n\t\t() => [\n\t\t\ttheme,\n\t\t\t(next: Theme) => {\n\t\t\t\tsetCookie(next);\n\t\t\t\tsetTheme(next);\n\t\t\t\tapplyThemeToHtml(next);\n\t\t\t\tnotifyOtherTabs(next, {\n\t\t\t\t\tbroadcastChannel: broadcastChannelRef.current,\n\t\t\t\t\tpingKey: `${THEME_STORAGE_KEY}__ping`,\n\t\t\t\t});\n\t\t\t},\n\t\t],\n\t\t[theme],\n\t);\n\n\treturn <ThemeProviderContext.Provider value={value}>{children}</ThemeProviderContext.Provider>;\n}\nThemeProvider.displayName = \"ThemeProvider\";\n\n/**\n * useTheme returns the current theme and a function to set the theme.\n *\n * @note This function will throw an error if used outside of a ThemeProvider context tree.\n */\nfunction useTheme() {\n\tconst context = useContext(ThemeProviderContext);\n\n\tinvariant(context, \"useTheme must be used within a ThemeProvider\");\n\n\treturn context;\n}\n\n/**\n * Applies the given theme to the `<html>` element.\n */\nfunction applyThemeToHtml(theme: Theme) {\n\tif (!canUseDOM()) {\n\t\treturn;\n\t}\n\n\tconst html = window.document.documentElement;\n\n\tconst prefersDarkMode = window.matchMedia(prefersDarkModeMediaQuery).matches;\n\tconst prefersHighContrast = window.matchMedia(prefersHighContrastMediaQuery).matches;\n\n\tconst resolvedTheme = resolveTheme(theme, {\n\t\tprefersDarkMode,\n\t\tprefersHighContrast,\n\t});\n\n\tconst htmlTheme = html.dataset.theme;\n\tconst htmlAppliedTheme = html.dataset.appliedTheme;\n\n\tconst currentTheme = isTheme(htmlTheme) ? htmlTheme : undefined;\n\tconst currentResolvedTheme = isResolvedTheme(htmlAppliedTheme) ? htmlAppliedTheme : undefined;\n\n\tif (currentTheme === theme && currentResolvedTheme === resolvedTheme) {\n\t\t// nothing to do: input theme and resolved class already match\n\t\treturn;\n\t}\n\n\t// Clear any stale theme class, then apply the new one\n\thtml.classList.remove(...resolvedThemes); // ✅ remove all potential theme classes\n\thtml.classList.add(resolvedTheme);\n\thtml.dataset.theme = theme;\n\thtml.dataset.appliedTheme = resolvedTheme;\n}\n\n/**\n * Read the theme and applied theme from the `<html>` element.\n */\nfunction readThemeFromHtmlElement() {\n\tif (!canUseDOM()) {\n\t\treturn {\n\t\t\tappliedTheme: undefined,\n\t\t\ttheme: undefined,\n\t\t};\n\t}\n\n\tconst htmlElement = window.document.documentElement;\n\tconst theme = isTheme(htmlElement.dataset.theme) ? htmlElement.dataset.theme : undefined;\n\tconst appliedTheme = isResolvedTheme(htmlElement.dataset.appliedTheme)\n\t\t? htmlElement.dataset.appliedTheme\n\t\t: undefined;\n\n\treturn {\n\t\tappliedTheme,\n\t\ttheme,\n\t};\n}\n\n/**\n * If the theme is \"system\", it will resolve the theme based on the user's media query preferences, otherwise it will return the theme as is.\n * This will mirror the result that gets applied to the <html> element.\n */\nfunction resolveTheme(\n\ttheme: Theme,\n\t{\n\t\tprefersDarkMode,\n\t\tprefersHighContrast,\n\t}: { prefersDarkMode: boolean; prefersHighContrast: boolean },\n) {\n\tif (theme === \"system\") {\n\t\treturn determineThemeFromMediaQuery({\n\t\t\tprefersDarkMode,\n\t\t\tprefersHighContrast,\n\t\t});\n\t}\n\n\treturn theme;\n}\n\n/**\n * If the theme is \"system\", it will resolve the theme based on the user's media query preferences, otherwise it will return the theme as is.\n * This will mirror the result that gets applied to the <html> element.\n */\nfunction useAppliedTheme() {\n\tconst themeContext = useContext(ThemeProviderContext);\n\tconst theme = themeContext != null ? themeContext[0] : \"system\";\n\n\tconst prefersDarkMode = useMatchesMediaQuery(prefersDarkModeMediaQuery);\n\tconst prefersHighContrast = useMatchesMediaQuery(prefersHighContrastMediaQuery);\n\n\treturn resolveTheme(theme, { prefersDarkMode, prefersHighContrast });\n}\n\n/**\n * determineThemeFromMediaQuery returns the theme that should be used based on the user's media query preferences.\n * @private\n *\n * @example\n * ```tsx\n * const theme = determineThemeFromMediaQuery({\n * prefersDarkMode: true,\n * prefersHighContrast: false\n * });\n * // Returns: \"dark\"\n *\n * const themeWithContrast = determineThemeFromMediaQuery({\n * prefersDarkMode: false,\n * prefersHighContrast: true\n * });\n * // Returns: \"light-high-contrast\"\n * ```\n */\nexport function determineThemeFromMediaQuery({\n\tprefersDarkMode,\n\tprefersHighContrast,\n}: {\n\tprefersDarkMode: boolean;\n\tprefersHighContrast: boolean;\n}): ResolvedTheme {\n\tif (prefersHighContrast) {\n\t\treturn prefersDarkMode ? \"dark-high-contrast\" : \"light-high-contrast\";\n\t}\n\n\treturn prefersDarkMode ? \"dark\" : \"light\";\n}\n\n/**\n * Script that runs synchronously to prevent FOUC by applying the correct theme\n * before the page renders. This is the actual function that gets stringified and inlined.\n */\nfunction preventThemeFlash(args: {\n\tstorageKey: string;\n\tdefaultTheme: Theme;\n\tthemes: readonly Theme[];\n\tresolvedThemes: readonly ResolvedTheme[];\n\tprefersDarkModeMediaQuery: string;\n\tprefersHighContrastMediaQuery: string;\n}) {\n\tconst {\n\t\tstorageKey,\n\t\tdefaultTheme,\n\t\tthemes,\n\t\tresolvedThemes,\n\t\tprefersDarkModeMediaQuery,\n\t\tprefersHighContrastMediaQuery,\n\t} = args;\n\n\tfunction isTheme(value: unknown): value is Theme {\n\t\treturn typeof value === \"string\" && themes.includes(value as Theme);\n\t}\n\n\tfunction getThemeFromCookie(name: string): string | null {\n\t\tconst cookie = document.cookie;\n\t\tif (!cookie) {\n\t\t\treturn null;\n\t\t}\n\n\t\ttry {\n\t\t\tconst cookies = cookie.split(\";\");\n\t\t\tconst themeCookie = cookies.find((c) => c.trim().startsWith(`${name}=`));\n\t\t\tconst cookieValue = themeCookie?.split(\"=\")[1];\n\t\t\tconst storedTheme = cookieValue ? decodeURIComponent(cookieValue) : null;\n\t\t\treturn storedTheme;\n\t\t\t// oxlint-disable-next-line no-unused-vars\n\t\t} catch (_) {\n\t\t\treturn null;\n\t\t}\n\t}\n\n\tfunction buildCookie(name: string, val: string): string {\n\t\tconst expires = new Date();\n\t\texpires.setFullYear(expires.getFullYear() + 1);\n\t\tconst hostname = window.location.hostname;\n\t\tconst protocol = window.location.protocol;\n\t\tconst domainAttribute =\n\t\t\thostname === \"ngrok.com\" || hostname.endsWith(\".ngrok.com\") ? \"; domain=.ngrok.com\" : \"\";\n\t\tconst secureAttribute = protocol === \"https:\" ? \"; Secure\" : \"\";\n\t\treturn `${name}=${encodeURIComponent(val)}; expires=${expires.toUTCString()}; path=/${domainAttribute}; SameSite=Lax${secureAttribute}`;\n\t}\n\n\tfunction writeCookie(name: string, val: string): void {\n\t\ttry {\n\t\t\tdocument.cookie = buildCookie(name, val);\n\t\t\t// oxlint-disable-next-line no-unused-vars\n\t\t} catch (_) {\n\t\t\t// silently swallow errors\n\t\t}\n\t}\n\n\tfunction resolveThemeValue(\n\t\ttheme: Theme,\n\t\tisDark: boolean,\n\t\tisHighContrast: boolean,\n\t): ResolvedTheme {\n\t\tif (theme === \"system\") {\n\t\t\tif (isHighContrast) {\n\t\t\t\treturn isDark ? \"dark-high-contrast\" : \"light-high-contrast\";\n\t\t\t}\n\t\t\treturn isDark ? \"dark\" : \"light\";\n\t\t}\n\t\treturn theme;\n\t}\n\n\t// 1) Read preference: cookie first, fallback to localStorage (migration support)\n\tlet cookieTheme: string | null = null;\n\tlet lsTheme: string | null = null;\n\tlet storedTheme: Theme | null = null;\n\n\ttry {\n\t\tcookieTheme = getThemeFromCookie(storageKey);\n\t\t// oxlint-disable-next-line no-unused-vars\n\t} catch (_) {\n\t\t// silently swallow errors\n\t}\n\n\tif (isTheme(cookieTheme)) {\n\t\tstoredTheme = cookieTheme;\n\t} else {\n\t\ttry {\n\t\t\tlsTheme = window.localStorage?.getItem(storageKey) ?? null;\n\t\t\t// oxlint-disable-next-line no-unused-vars\n\t\t} catch (_) {\n\t\t\t// silently swallow errors\n\t\t}\n\t\tif (isTheme(lsTheme)) {\n\t\t\tstoredTheme = lsTheme;\n\t\t}\n\t}\n\n\tconst preference = isTheme(storedTheme) ? storedTheme : defaultTheme;\n\n\t// 2) Resolve theme based on media queries\n\tconst isDark = matchMedia(prefersDarkModeMediaQuery).matches;\n\tconst isHighContrast = matchMedia(prefersHighContrastMediaQuery).matches;\n\tconst resolvedTheme = resolveThemeValue(preference, isDark, isHighContrast);\n\n\tconst html = document.documentElement;\n\t// 3) Apply theme to DOM (same order as applyThemeToHtml)\n\tif (html.dataset.appliedTheme !== resolvedTheme || html.dataset.theme !== preference) {\n\t\t// Remove all theme classes\n\t\tfor (const themeClass of resolvedThemes as readonly string[]) {\n\t\t\thtml.classList.remove(themeClass);\n\t\t}\n\t\t// Add resolved theme class\n\t\thtml.classList.add(resolvedTheme);\n\t\t// Set data attributes\n\t\thtml.dataset.theme = preference;\n\t\thtml.dataset.appliedTheme = resolvedTheme;\n\t}\n\n\t// 4) Handle persistence/migration synchronously to prevent FOUC\n\tconst hadValidCookie = isTheme(cookieTheme);\n\ttry {\n\t\tif (isTheme(lsTheme) && !hadValidCookie) {\n\t\t\t// Migrate from localStorage to cookie\n\t\t\twriteCookie(storageKey, lsTheme);\n\t\t\ttry {\n\t\t\t\twindow.localStorage.removeItem(storageKey);\n\t\t\t\t// oxlint-disable-next-line no-unused-vars\n\t\t\t} catch (_) {\n\t\t\t\t// silently swallow errors\n\t\t\t}\n\t\t} else if (!hadValidCookie) {\n\t\t\t// Set default cookie if none existed\n\t\t\twriteCookie(storageKey, preference);\n\t\t}\n\t\t// oxlint-disable-next-line no-unused-vars\n\t} catch (_) {\n\t\t// silently swallow errors\n\t}\n}\n\n/**\n * preventWrongThemeFlashScriptContent generates a script that prevents the wrong theme from flashing on initial page load.\n * It checks cookies for a stored theme, and if none is found, it sets the default theme.\n * It also applies the correct theme to the `<html>` element based on the user's media query preferences.\n */\nfunction preventWrongThemeFlashScriptContent() {\n\tconst args = {\n\t\tstorageKey: THEME_STORAGE_KEY,\n\t\tdefaultTheme: DEFAULT_THEME,\n\t\tthemes,\n\t\tresolvedThemes,\n\t\tprefersDarkModeMediaQuery,\n\t\tprefersHighContrastMediaQuery,\n\t} as const satisfies Parameters<typeof preventThemeFlash>[0];\n\n\treturn `(${preventThemeFlash.toString()})(${JSON.stringify(args)})`;\n}\n\ntype MantleThemeHeadContentProps = {\n\t/**\n\t * An optional CSP nonce to allowlist this inline script. Using this can help\n\t * you to avoid using the CSP `unsafe-inline` directive, which disables\n\t * XSS protection and would allowlist all inline scripts or styles.\n\t *\n\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/nonce\n\t */\n\tnonce?: string;\n};\n\nexport type PreventWrongThemeFlashScriptProps = MantleThemeHeadContentProps;\n\n/**\n * Renders an inline script that prevents Flash of Unstyled Content (FOUC) or the\n * wrong theme flashing on first paint.\n *\n * Use this when you want full control of the `<head>` contents. For a packaged,\n * one-stop solution that also handles font preloads, use {@link MantleThemeHeadContent}.\n * To add font preloads alongside this script, pair it with {@link PreloadCoreFonts}.\n *\n * Place this as early as possible in the `<head>`.\n *\n * @example\n * ```tsx\n * <head>\n * <PreventWrongThemeFlashScript nonce={nonce} />\n * <PreloadCoreFonts />\n * </head>\n * ```\n *\n * @param nonce - Optional CSP nonce to allowlist the inline script under a strict CSP.\n * @returns {JSX.Element} A script tag injected before first paint.\n * @see PreloadCoreFonts\n * @see MantleThemeHeadContent\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce\n */\nconst PreventWrongThemeFlashScript = ({ nonce }: PreventWrongThemeFlashScriptProps) => (\n\t<script\n\t\tdangerouslySetInnerHTML={{\n\t\t\t__html: preventWrongThemeFlashScriptContent(),\n\t\t}}\n\t\tnonce={nonce}\n\t\tsuppressHydrationWarning\n\t/>\n);\nPreventWrongThemeFlashScript.displayName = \"PreventWrongThemeFlashScript\";\n\n/**\n * Renders the Mantle theme `<head>` content:\n * - an inline script to prevent FOUC / wrong-theme flash, and\n * - preload links for the core fonts.\n *\n * Use this when you want the one-liner that “just works.”\n * If you prefer fine-grained control, use {@link PreventWrongThemeFlashScript}\n * and {@link PreloadCoreFonts} directly.\n *\n * Place this as early as possible in the `<head>` so it runs before first paint\n * and fonts start fetching ASAP.\n *\n * @example\n * ```tsx\n * <head>\n * // Performance hints for the CDN (recommended)\n * <link rel=\"preconnect\" href={assetsCdnOrigin} crossOrigin=\"anonymous\" />\n * <link rel=\"dns-prefetch\" href={assetsCdnOrigin} />\n *\n * <MantleThemeHeadContent nonce={nonce} />\n * </head>\n * ```\n *\n * @param nonce - Optional CSP nonce to allowlist the inline script under a strict CSP.\n * @returns JSX.Element fragment containing the script and font preloads.\n * @see PreventWrongThemeFlashScript\n * @see PreloadCoreFonts\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce\n */\nconst MantleThemeHeadContent = ({ nonce }: MantleThemeHeadContentProps) => (\n\t<>\n\t\t<PreventWrongThemeFlashScript nonce={nonce} />\n\t\t<PreloadCoreFonts />\n\t</>\n);\nMantleThemeHeadContent.displayName = \"MantleThemeHeadContent\";\n\ntype InitialThemeProps = {\n\tclassName: string;\n\t\"data-applied-theme\": ResolvedTheme;\n\t\"data-theme\": Theme;\n};\n\ntype UseInitialHtmlThemePropsOptions = {\n\tclassName?: string;\n};\n\n/**\n * useInitialHtmlThemeProps returns the initial props that should be applied to the <html> element to prevent react hydration errors.\n */\nfunction useInitialHtmlThemeProps(props: UseInitialHtmlThemePropsOptions = {}): InitialThemeProps {\n\tconst { className = \"\" } = props ?? {};\n\n\treturn useMemo(() => {\n\t\tlet initialTheme: Theme;\n\t\tlet resolvedTheme: ResolvedTheme;\n\n\t\tif (!canUseDOM()) {\n\t\t\tinitialTheme = DEFAULT_THEME;\n\t\t\tresolvedTheme = \"light\"; // assume \"light\" for SSR\n\t\t} else {\n\t\t\tconst prefersDarkMode = window.matchMedia(prefersDarkModeMediaQuery).matches;\n\t\t\tconst prefersHighContrast = window.matchMedia(prefersHighContrastMediaQuery).matches;\n\t\t\tinitialTheme = getStoredTheme({ cookie: document.cookie });\n\t\t\tresolvedTheme = resolveTheme(initialTheme, {\n\t\t\t\tprefersDarkMode,\n\t\t\t\tprefersHighContrast,\n\t\t\t});\n\t\t}\n\n\t\treturn {\n\t\t\tclassName: cx(className, resolvedTheme),\n\t\t\t\"data-applied-theme\": resolvedTheme,\n\t\t\t\"data-theme\": initialTheme,\n\t\t};\n\t}, [className]);\n}\n\ntype GetStoredThemeOptions = {\n\t/**\n\t * raw Cookie header (SSR) or document.cookie (client)\n\t */\n\tcookie: string | null | undefined;\n};\n\n/**\n * Returns the persisted UI theme from a Cookie header string.\n *\n * Looks for a cookie named by {@link THEME_STORAGE_KEY} and returns its value **iff**\n * it’s a valid `Theme` per `isTheme`. Otherwise, falls back to\n * {@link DEFAULT_THEME}. This function never throws; malformed encodings or\n * missing cookies quietly return the default.\n *\n * @example\n * getStoredTheme({ cookie: `${THEME_STORAGE_KEY}=dark; session=abc` }) // \"dark\"\n * @example\n * getStoredTheme({ cookie: \"\" }) // DEFAULT_THEME\n */\nfunction getStoredTheme({ cookie }: GetStoredThemeOptions): Theme {\n\tif (!cookie) {\n\t\treturn DEFAULT_THEME;\n\t}\n\n\ttry {\n\t\tconst cookies = cookie.split(\";\");\n\t\tconst themeCookie = cookies.find((cookie) => cookie.trim().startsWith(`${THEME_STORAGE_KEY}=`));\n\t\tconst cookieValue = themeCookie?.split(\"=\")[1];\n\t\tconst storedTheme = cookieValue ? globalThis.decodeURIComponent(cookieValue) : null;\n\n\t\treturn isTheme(storedTheme) ? storedTheme : DEFAULT_THEME;\n\t\t// oxlint-disable-next-line no-unused-vars\n\t} catch (_) {\n\t\treturn DEFAULT_THEME;\n\t}\n}\n\nexport {\n\tMantleThemeHeadContent,\n\tPreventWrongThemeFlashScript,\n\tThemeProvider,\n\t//,\n\tgetStoredTheme,\n\tpreventWrongThemeFlashScriptContent,\n\treadThemeFromHtmlElement,\n\tuseAppliedTheme,\n\tuseInitialHtmlThemeProps,\n\tuseTheme,\n};\n\n/**\n * Notifies other open tabs (same origin) that the theme changed.\n *\n * Prefers a shared {@link BroadcastChannel} for immediate, reliable delivery.\n * Falls back to writing a unique “ping” value to `localStorage`, which triggers\n * the cross-tab `storage` event. Both mechanisms only work across the same origin.\n *\n * Uses a timestamp to ensure the storage value always changes so the event fires.\n *\n * @remarks\n * - Same-origin only: BroadcastChannel and the `storage` event do not cross subdomains\n * or different schemes/ports. For cross-subdomain sync, use a postMessage hub or server push.\n * - This function is fire-and-forget and intentionally swallows errors.\n * - Receivers should re-read the cookie/source of truth and then apply the theme;\n * don’t trust the payload blindly.\n *\n * @example\n * // Sender (inside your setter)\n * notifyOtherTabs(nextTheme, {\n * broadcastChannel: broadcastChannelRef.current,\n * pingKey: `${storageKey}__ping`,\n * });\n *\n * @example\n * // Receiver (setup once per tab)\n * const bc = new BroadcastChannel(storageKey);\n * bc.onmessage = () => syncThemeFromCookie();\n * window.addEventListener('storage', (e) => {\n * if (e.key === `${storageKey}__ping`) syncThemeFromCookie();\n * });\n */\nfunction notifyOtherTabs(\n\ttheme: Theme,\n\toptions: {\n\t\tbroadcastChannel: BroadcastChannel | null;\n\t\tpingKey: `${string}__ping`;\n\t},\n) {\n\tconst { broadcastChannel, pingKey } = options;\n\n\t// first try BroadcastChannel\n\ttry {\n\t\tif (broadcastChannel) {\n\t\t\tbroadcastChannel.postMessage({\n\t\t\t\ttheme,\n\t\t\t\ttimestamp: Date.now(),\n\t\t\t});\n\t\t\treturn;\n\t\t}\n\t\t// oxlint-disable-next-line no-unused-vars\n\t} catch (_) {\n\t\t// silently swallow errors\n\t}\n\n\t// fallback to storage event: write a \"ping\" key (not the real storageKey)\n\ttry {\n\t\tlocalStorage.setItem(pingKey, JSON.stringify({ theme, timestamp: Date.now() }));\n\t\t// oxlint-disable-next-line no-unused-vars\n\t} catch (_) {\n\t\t// silently swallow errors\n\t}\n}\n\nfunction buildThemeCookie(value: string) {\n\tconst expires = new Date();\n\texpires.setFullYear(expires.getFullYear() + 1); // 1 year expiration\n\n\t// Only set .ngrok.com domain for ngrok domains, otherwise let it default to current domain\n\tconst { hostname, protocol } = window.location;\n\tconst domainAttribute =\n\t\thostname === \"ngrok.com\" || hostname.endsWith(\".ngrok.com\") ? \"; domain=.ngrok.com\" : \"\";\n\tconst secureAttribute = protocol === \"https:\" ? \"; Secure\" : \"\";\n\n\treturn `${THEME_STORAGE_KEY}=${encodeURIComponent(value)}; expires=${expires.toUTCString()}; path=/${domainAttribute}; SameSite=Lax${secureAttribute}` as const;\n}\n\n/**\n * Sets a cookie with appropriate domain for the current hostname.\n * Uses .ngrok.com for ngrok domains, otherwise no domain (current domain only).\n */\nfunction setCookie(value: string) {\n\tif (!canUseDOM()) {\n\t\treturn;\n\t}\n\n\ttry {\n\t\tdocument.cookie = buildThemeCookie(value);\n\t\t// oxlint-disable-next-line no-unused-vars\n\t} catch (_) {\n\t\t// silently swallow errors\n\t}\n}\n"],"mappings":"wHA4EC,mBAAAA,EAEE,OAAAC,MAFF,oBAjED,IAAMC,EAAkB,2BAMlBC,EAAU,GAAGD,CAAe,SAK5BE,EAAY,CACjB,yCACA,sCACA,6CACA,+BACA,6BACD,EAaA,SAASC,EAAwCC,EAAS,CACzD,IAAMC,EAAOD,EAAK,WAAW,GAAG,EAAIA,EAAO,IAAIA,CAAI,GACnD,MAAO,GAAGH,CAAO,GAAGI,CAAI,EACzB,CA+BA,IAAMC,EAAmB,IACxBP,EAAAD,EAAA,CACE,SAAAI,EAAU,IAAKE,GACfL,EAAC,QAEA,IAAI,UACJ,KAAMI,EAASC,CAAI,EACnB,GAAG,OACH,KAAK,aACL,YAAY,aALPA,CAMN,CACA,EACF,EAEDE,EAAiB,YAAc,mBCtF/B,IAAMC,EAAiB,CAAC,QAAS,OAAQ,sBAAuB,oBAAoB,EAU9EC,EAAS,CAAC,SAAU,GAAGD,CAAc,EAUrCE,GAAmCC,GAAaA,EAKtD,SAASC,EAAQD,EAAgC,CAChD,OAAI,OAAOA,GAAU,SACb,GAGDF,EAAO,SAASE,CAAc,CACtC,CAKA,IAAME,GAA2DF,GAAaA,EAK9E,SAASG,EAAgBH,EAAwC,CAChE,OAAI,OAAOA,GAAU,SACb,GAGDH,EAAe,SAASG,CAAsB,CACtD,CC/CA,OAAS,iBAAAI,GAAe,cAAAC,EAAY,aAAAC,GAAW,WAAAC,EAAS,UAAAC,GAAQ,YAAAC,OAAgB,QAChF,OAAOC,OAAe,iBAsKd,OAkYP,YAAAC,GAlYO,OAAAC,EAkYP,QAAAC,OAlYO,oBArJR,IAAMC,EAA4B,+BAK5BC,EAAgC,2BAKhCC,EAAoB,kBAMpBC,EAAgB,SAUhBC,GAAmC,CAAC,SAAU,IAAM,IAAI,EAKxDC,EAAuBC,GAAyCF,EAAY,EAgBlF,SAASG,GAAc,CAAE,SAAAC,CAAS,EAAuB,CAExD,GAAM,CAACC,EAAOC,CAAQ,EAAIC,GAAgB,IAAM,CAC/C,IAAMC,EAAcC,EAAe,CAClC,OAAQC,EAAU,EAAI,SAAS,OAAS,IACzC,CAAC,EACD,OAAAC,EAAiBH,CAAW,EACrBA,CACR,CAAC,EAEKI,EAAsBC,GAAgC,IAAI,EAEhEC,GAAU,IAAM,CACf,SAASC,EAAoBC,EAAc,CAC1C,IAAMC,EAAWD,GAAQP,EAAe,CAAE,OAAQ,SAAS,MAAO,CAAC,EACnEH,EAASW,CAAQ,EACjBN,EAAiBM,CAAQ,CAC1B,CAGAF,EAAoB,EAGpB,GAAI,CACC,qBAAsB,SACzBH,EAAoB,QAAU,IAAI,iBAAiBd,CAAiB,EACpEc,EAAoB,QAAQ,UAAaM,GAAU,CAClD,IAAMC,EAAiBD,GAAO,MAAM,MAChCE,EAAQD,CAAK,GAChBJ,EAAoBI,CAAK,CAE3B,EAGF,MAAY,CAEZ,CAEA,SAASE,EAAUH,EAAqB,CACnCA,EAAM,MAAQ,GAAGpB,CAAiB,UACrCiB,EAAoB,CAEtB,CACA,OAAO,iBAAiB,UAAWM,CAAS,EAG5C,IAAMC,EAAiB,OAAO,WAAW1B,CAAyB,EAC5D2B,EAAyB,OAAO,WAAW1B,CAA6B,EAE9E,SAAS2B,GAAW,CACnBT,EAAoB,CACrB,CAEA,SAASU,GAAqB,CACzB,SAAS,kBAAoB,WAChCV,EAAoB,CAEtB,CAEA,OAAAO,EAAe,iBAAiB,SAAUE,CAAQ,EAClDD,EAAuB,iBAAiB,SAAUC,CAAQ,EAG1D,OAAO,iBAAiB,WAAYA,CAAQ,EAG5C,SAAS,iBAAiB,mBAAoBC,CAAkB,EAGzD,IAAM,CACZ,OAAO,oBAAoB,UAAWJ,CAAS,EAC/CC,EAAe,oBAAoB,SAAUE,CAAQ,EACrDD,EAAuB,oBAAoB,SAAUC,CAAQ,EAC7D,OAAO,oBAAoB,WAAYA,CAAQ,EAC/C,SAAS,oBAAoB,mBAAoBC,CAAkB,EAEnE,GAAI,CACHb,EAAoB,SAAS,MAAM,CAEpC,MAAY,CAEZ,CACAA,EAAoB,QAAU,IAC/B,CACD,EAAG,CAAC,CAAC,EAEL,IAAMO,EAA4BO,EACjC,IAAM,CACLrB,EACCW,GAAgB,CAChBW,GAAUX,CAAI,EACdV,EAASU,CAAI,EACbL,EAAiBK,CAAI,EACrBY,GAAgBZ,EAAM,CACrB,iBAAkBJ,EAAoB,QACtC,QAAS,GAAGd,CAAiB,QAC9B,CAAC,CACF,CACD,EACA,CAACO,CAAK,CACP,EAEA,OAAOX,EAACO,EAAqB,SAArB,CAA8B,MAAOkB,EAAQ,SAAAf,EAAS,CAC/D,CACAD,GAAc,YAAc,gBAO5B,SAAS0B,IAAW,CACnB,IAAMC,EAAUC,EAAW9B,CAAoB,EAE/C,OAAA+B,GAAUF,EAAS,8CAA8C,EAE1DA,CACR,CAKA,SAASnB,EAAiBN,EAAc,CACvC,GAAI,CAACK,EAAU,EACd,OAGD,IAAMuB,EAAO,OAAO,SAAS,gBAEvBC,EAAkB,OAAO,WAAWtC,CAAyB,EAAE,QAC/DuC,EAAsB,OAAO,WAAWtC,CAA6B,EAAE,QAEvEuC,EAAgBC,EAAahC,EAAO,CACzC,gBAAA6B,EACA,oBAAAC,CACD,CAAC,EAEKG,EAAYL,EAAK,QAAQ,MACzBM,EAAmBN,EAAK,QAAQ,aAEhCO,EAAepB,EAAQkB,CAAS,EAAIA,EAAY,OAChDG,EAAuBC,EAAgBH,CAAgB,EAAIA,EAAmB,OAEhFC,IAAiBnC,GAASoC,IAAyBL,IAMvDH,EAAK,UAAU,OAAO,GAAGU,CAAc,EACvCV,EAAK,UAAU,IAAIG,CAAa,EAChCH,EAAK,QAAQ,MAAQ5B,EACrB4B,EAAK,QAAQ,aAAeG,EAC7B,CAKA,SAASQ,IAA2B,CACnC,GAAI,CAAClC,EAAU,EACd,MAAO,CACN,aAAc,OACd,MAAO,MACR,EAGD,IAAMmC,EAAc,OAAO,SAAS,gBAC9BxC,EAAQe,EAAQyB,EAAY,QAAQ,KAAK,EAAIA,EAAY,QAAQ,MAAQ,OAK/E,MAAO,CACN,aALoBH,EAAgBG,EAAY,QAAQ,YAAY,EAClEA,EAAY,QAAQ,aACpB,OAIF,MAAAxC,CACD,CACD,CAMA,SAASgC,EACRhC,EACA,CACC,gBAAA6B,EACA,oBAAAC,CACD,EACC,CACD,OAAI9B,IAAU,SACNyC,GAA6B,CACnC,gBAAAZ,EACA,oBAAAC,CACD,CAAC,EAGK9B,CACR,CAMA,SAAS0C,IAAkB,CAC1B,IAAMC,EAAejB,EAAW9B,CAAoB,EAC9CI,EAAQ2C,GAAgB,KAAOA,EAAa,CAAC,EAAI,SAEjDd,EAAkBe,EAAqBrD,CAAyB,EAChEuC,EAAsBc,EAAqBpD,CAA6B,EAE9E,OAAOwC,EAAahC,EAAO,CAAE,gBAAA6B,EAAiB,oBAAAC,CAAoB,CAAC,CACpE,CAqBO,SAASW,GAA6B,CAC5C,gBAAAZ,EACA,oBAAAC,CACD,EAGkB,CACjB,OAAIA,EACID,EAAkB,qBAAuB,sBAG1CA,EAAkB,OAAS,OACnC,CAMA,SAASgB,GAAkBC,EAOxB,CACF,GAAM,CACL,WAAAC,EACA,aAAAC,EACA,OAAAC,EACA,eAAAX,EACA,0BAAA/C,EACA,8BAAAC,CACD,EAAIsD,EAEJ,SAAS/B,EAAQD,EAAgC,CAChD,OAAO,OAAOA,GAAU,UAAYmC,EAAO,SAASnC,CAAc,CACnE,CAEA,SAASoC,EAAmBC,EAA6B,CACxD,IAAMC,EAAS,SAAS,OACxB,GAAI,CAACA,EACJ,OAAO,KAGR,GAAI,CAGH,IAAMC,EAFUD,EAAO,MAAM,GAAG,EACJ,KAAME,GAAMA,EAAE,KAAK,EAAE,WAAW,GAAGH,CAAI,GAAG,CAAC,GACtC,MAAM,GAAG,EAAE,CAAC,EAE7C,OADoBE,EAAc,mBAAmBA,CAAW,EAAI,IAGrE,MAAY,CACX,OAAO,IACR,CACD,CAEA,SAASE,EAAYJ,EAAcK,EAAqB,CACvD,IAAMC,EAAU,IAAI,KACpBA,EAAQ,YAAYA,EAAQ,YAAY,EAAI,CAAC,EAC7C,IAAMC,EAAW,OAAO,SAAS,SAC3BC,EAAW,OAAO,SAAS,SAC3BC,EACLF,IAAa,aAAeA,EAAS,SAAS,YAAY,EAAI,sBAAwB,GACjFG,EAAkBF,IAAa,SAAW,WAAa,GAC7D,MAAO,GAAGR,CAAI,IAAI,mBAAmBK,CAAG,CAAC,aAAaC,EAAQ,YAAY,CAAC,WAAWG,CAAe,iBAAiBC,CAAe,EACtI,CAEA,SAASC,EAAYX,EAAcK,EAAmB,CACrD,GAAI,CACH,SAAS,OAASD,EAAYJ,EAAMK,CAAG,CAExC,MAAY,CAEZ,CACD,CAEA,SAASO,EACR/D,EACAgE,EACAC,EACgB,CAChB,OAAIjE,IAAU,SACTiE,EACID,EAAS,qBAAuB,sBAEjCA,EAAS,OAAS,QAEnBhE,CACR,CAGA,IAAIkE,EAA6B,KAC7BC,EAAyB,KACzBhE,EAA4B,KAEhC,GAAI,CACH+D,EAAchB,EAAmBH,CAAU,CAE5C,MAAY,CAEZ,CAEA,GAAIhC,EAAQmD,CAAW,EACtB/D,EAAc+D,MACR,CACN,GAAI,CACHC,EAAU,OAAO,cAAc,QAAQpB,CAAU,GAAK,IAEvD,MAAY,CAEZ,CACIhC,EAAQoD,CAAO,IAClBhE,EAAcgE,EAEhB,CAEA,IAAMC,EAAarD,EAAQZ,CAAW,EAAIA,EAAc6C,EAGlDgB,EAAS,WAAWzE,CAAyB,EAAE,QAC/C0E,EAAiB,WAAWzE,CAA6B,EAAE,QAC3DuC,EAAgBgC,EAAkBK,EAAYJ,EAAQC,CAAc,EAEpErC,EAAO,SAAS,gBAEtB,GAAIA,EAAK,QAAQ,eAAiBG,GAAiBH,EAAK,QAAQ,QAAUwC,EAAY,CAErF,QAAWC,KAAc/B,EACxBV,EAAK,UAAU,OAAOyC,CAAU,EAGjCzC,EAAK,UAAU,IAAIG,CAAa,EAEhCH,EAAK,QAAQ,MAAQwC,EACrBxC,EAAK,QAAQ,aAAeG,CAC7B,CAGA,IAAMuC,EAAiBvD,EAAQmD,CAAW,EAC1C,GAAI,CACH,GAAInD,EAAQoD,CAAO,GAAK,CAACG,EAAgB,CAExCR,EAAYf,EAAYoB,CAAO,EAC/B,GAAI,CACH,OAAO,aAAa,WAAWpB,CAAU,CAE1C,MAAY,CAEZ,CACD,MAAYuB,GAEXR,EAAYf,EAAYqB,CAAU,CAGpC,MAAY,CAEZ,CACD,CAOA,SAASG,IAAsC,CAC9C,IAAMzB,EAAO,CACZ,WAAYrD,EACZ,aAAcC,EACd,OAAAuD,EACA,eAAAX,EACA,0BAAA/C,EACA,8BAAAC,CACD,EAEA,MAAO,IAAIqD,GAAkB,SAAS,CAAC,KAAK,KAAK,UAAUC,CAAI,CAAC,GACjE,CAuCA,IAAM0B,EAA+B,CAAC,CAAE,MAAAC,CAAM,IAC7CpF,EAAC,UACA,wBAAyB,CACxB,OAAQkF,GAAoC,CAC7C,EACA,MAAOE,EACP,yBAAwB,GACzB,EAEDD,EAA6B,YAAc,+BA+B3C,IAAME,GAAyB,CAAC,CAAE,MAAAD,CAAM,IACvCnF,GAAAF,GAAA,CACC,UAAAC,EAACmF,EAAA,CAA6B,MAAOC,EAAO,EAC5CpF,EAACsF,EAAA,EAAiB,GACnB,EAEDD,GAAuB,YAAc,yBAerC,SAASE,GAAyBC,EAAyC,CAAC,EAAsB,CACjG,GAAM,CAAE,UAAAC,EAAY,EAAG,EAAID,GAAS,CAAC,EAErC,OAAOxD,EAAQ,IAAM,CACpB,IAAI0D,EACAhD,EAEJ,GAAI,CAAC1B,EAAU,EACd0E,EAAerF,EACfqC,EAAgB,YACV,CACN,IAAMF,EAAkB,OAAO,WAAWtC,CAAyB,EAAE,QAC/DuC,EAAsB,OAAO,WAAWtC,CAA6B,EAAE,QAC7EuF,EAAe3E,EAAe,CAAE,OAAQ,SAAS,MAAO,CAAC,EACzD2B,EAAgBC,EAAa+C,EAAc,CAC1C,gBAAAlD,EACA,oBAAAC,CACD,CAAC,CACF,CAEA,MAAO,CACN,UAAWkD,EAAGF,EAAW/C,CAAa,EACtC,qBAAsBA,EACtB,aAAcgD,CACf,CACD,EAAG,CAACD,CAAS,CAAC,CACf,CAsBA,SAAS1E,EAAe,CAAE,OAAAgD,CAAO,EAAiC,CACjE,GAAI,CAACA,EACJ,OAAO1D,EAGR,GAAI,CAGH,IAAM2D,EAFUD,EAAO,MAAM,GAAG,EACJ,KAAMA,GAAWA,EAAO,KAAK,EAAE,WAAW,GAAG3D,CAAiB,GAAG,CAAC,GAC7D,MAAM,GAAG,EAAE,CAAC,EACvCU,EAAckD,EAAc,WAAW,mBAAmBA,CAAW,EAAI,KAE/E,OAAOtC,EAAQZ,CAAW,EAAIA,EAAcT,CAE7C,MAAY,CACX,OAAOA,CACR,CACD,CA8CA,SAASuF,GACRC,EACAC,EAIC,CACD,GAAM,CAAE,iBAAAC,EAAkB,QAAAC,CAAQ,EAAIF,EAGtC,GAAI,CACH,GAAIC,EAAkB,CACrBA,EAAiB,YAAY,CAC5B,MAAAF,EACA,UAAW,KAAK,IAAI,CACrB,CAAC,EACD,MACD,CAED,MAAY,CAEZ,CAGA,GAAI,CACH,aAAa,QAAQG,EAAS,KAAK,UAAU,CAAE,MAAAH,EAAO,UAAW,KAAK,IAAI,CAAE,CAAC,CAAC,CAE/E,MAAY,CAEZ,CACD,CAEA,SAASI,GAAiBC,EAAe,CACxC,IAAMC,EAAU,IAAI,KACpBA,EAAQ,YAAYA,EAAQ,YAAY,EAAI,CAAC,EAG7C,GAAM,CAAE,SAAAC,EAAU,SAAAC,CAAS,EAAI,OAAO,SAChCC,EACLF,IAAa,aAAeA,EAAS,SAAS,YAAY,EAAI,sBAAwB,GACjFG,EAAkBF,IAAa,SAAW,WAAa,GAE7D,MAAO,GAAGG,CAAiB,IAAI,mBAAmBN,CAAK,CAAC,aAAaC,EAAQ,YAAY,CAAC,WAAWG,CAAe,iBAAiBC,CAAe,EACrJ,CAMA,SAASE,GAAUP,EAAe,CACjC,GAAKQ,EAAU,EAIf,GAAI,CACH,SAAS,OAAST,GAAiBC,CAAK,CAEzC,MAAY,CAEZ,CACD","names":["Fragment","jsx","assetsCdnOrigin","cdnBase","coreFonts","fontHref","font","path","PreloadCoreFonts","resolvedThemes","themes","$theme","value","isTheme","$resolvedTheme","isResolvedTheme","createContext","useContext","useEffect","useMemo","useRef","useState","invariant","Fragment","jsx","jsxs","prefersDarkModeMediaQuery","prefersHighContrastMediaQuery","THEME_STORAGE_KEY","DEFAULT_THEME","initialState","ThemeProviderContext","createContext","ThemeProvider","children","theme","setTheme","useState","storedTheme","getStoredTheme","canUseDOM","applyThemeToHtml","broadcastChannelRef","useRef","useEffect","syncThemeFromCookie","next","newTheme","event","value","isTheme","onStorage","prefersDarkMql","prefersHighContrastMql","onChange","onVisibilityChange","useMemo","setCookie","notifyOtherTabs","useTheme","context","useContext","invariant","html","prefersDarkMode","prefersHighContrast","resolvedTheme","resolveTheme","htmlTheme","htmlAppliedTheme","currentTheme","currentResolvedTheme","isResolvedTheme","resolvedThemes","readThemeFromHtmlElement","htmlElement","determineThemeFromMediaQuery","useAppliedTheme","themeContext","useMatchesMediaQuery","preventThemeFlash","args","storageKey","defaultTheme","themes","getThemeFromCookie","name","cookie","cookieValue","c","buildCookie","val","expires","hostname","protocol","domainAttribute","secureAttribute","writeCookie","resolveThemeValue","isDark","isHighContrast","cookieTheme","lsTheme","preference","themeClass","hadValidCookie","preventWrongThemeFlashScriptContent","PreventWrongThemeFlashScript","nonce","MantleThemeHeadContent","PreloadCoreFonts","useInitialHtmlThemeProps","props","className","initialTheme","cx","notifyOtherTabs","theme","options","broadcastChannel","pingKey","buildThemeCookie","value","expires","hostname","protocol","domainAttribute","secureAttribute","THEME_STORAGE_KEY","setCookie","canUseDOM"]}
|
package/dist/command.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as r}from"./chunk-
|
|
1
|
+
import{a as r}from"./chunk-CMHMGZJJ.js";import{a as c}from"./chunk-JQ5D5YZR.js";import"./chunk-NQZYWYVH.js";import"./chunk-A3JO5HCY.js";import"./chunk-ZYMZVPDT.js";import"./chunk-6J7D73WA.js";import"./chunk-NJNFZ2EG.js";import"./chunk-KMNACVH6.js";import"./chunk-ZCTK5X4D.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-OP6JMBKJ.js";import"./chunk-SBVSECWW.js";import"./chunk-ODDNPNLN.js";import"./chunk-NZ6DRFAL.js";import{a as m}from"./chunk-PFXFESEN.js";import{MagnifyingGlassIcon as k}from"@phosphor-icons/react/MagnifyingGlass";import{Command as i,useCommandState as b}from"cmdk";import{forwardRef as n}from"react";import{jsx as a,jsxs as p}from"react/jsx-runtime";var l=n(({className:o,...e},t)=>a(i,{ref:t,"data-slot":"command",className:m("bg-popover flex h-full w-full flex-col overflow-hidden rounded-md",o),...e}));l.displayName="Command";var u=({children:o,className:e,description:t="Search for a command to run...",filter:s,shouldFilter:d,showCloseButton:R=!0,title:P="Command Palette",...N})=>p(r.Root,{...N,children:[p(r.Header,{className:"sr-only absolute",children:[a(r.Title,{children:P}),a(r.Description,{children:t})]}),p(r.Content,{className:m("overflow-hidden p-0 relative",e),children:[a(l,{className:"**:[[cmdk-group-heading]]:text-muted **:data-[slot=command-input-wrapper]:h-12 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 **:[[cmdk-input]]:h-12 **:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5",filter:s,shouldFilter:d,children:o}),R&&a("div",{className:"absolute top-1.5 right-1.5",children:a(r.CloseIconButton,{})})]})]});u.displayName="CommandDialog";var f=n(({className:o,...e},t)=>p("div",{ref:t,"data-slot":"command-input-wrapper",className:"flex h-9 items-center gap-2 border-b border-popover px-3",children:[a(k,{className:"size-4 shrink-0 opacity-50"}),a(i.Input,{"data-slot":"command-input",className:m("placeholder:text-muted flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",o),...e})]}));f.displayName="CommandInput";var g=n(({className:o,...e},t)=>a(i.List,{ref:t,"data-slot":"command-list",className:m("max-h-75 scroll-py-1 overflow-x-hidden overflow-y-auto scrollbar",o),...e}));g.displayName="CommandList";var C=n(({className:o,...e},t)=>a(i.Empty,{ref:t,"data-slot":"command-empty",className:m("py-6 text-center text-sm",o),...e}));C.displayName="CommandEmpty";var h=n(({className:o,...e},t)=>a(i.Group,{ref:t,"data-slot":"command-group",className:m("**:[[cmdk-group-heading]]:text-muted overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium",o),...e}));h.displayName="CommandGroup";var y=n(({className:o,...e},t)=>a(i.Separator,{ref:t,"data-slot":"command-separator",className:m("dark-high-contrast:bg-black high-contrast:bg-black bg-gray-500/20 dark:bg-gray-600/20 -mx-1 h-px",o),...e}));y.displayName="CommandSeparator";var v=n(({className:o,...e},t)=>a(i.Item,{ref:t,"data-slot":"command-item",className:m("data-[selected=true]:bg-popover-hover [&_svg:not([class*='text-'])]:text-muted relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",o),...e}));v.displayName="CommandItem";var x=n(({className:o,...e},t)=>a("span",{ref:t,"data-slot":"command-shortcut",className:m("text-muted ml-auto text-xs tracking-widest",o),...e}));x.displayName="CommandShortcut";var D={Root:l,Dialog:u,Input:f,List:g,Empty:C,Group:h,Item:v,Shortcut:x,Separator:y};import{useEffect as w,useState as _}from"react";import{jsx as A,jsxs as G}from"react/jsx-runtime";function I({className:o,...e}){let[t,s]=_("\u2303");w(()=>{s(W())},[]);let d=t==="\u2318"?"Command":"Control";return G(c,{...e,suppressHydrationWarning:!0,className:m(t==="\u2303"&&"font-medium",o),children:[A("span",{className:"sr-only",children:d}),t]})}function S(o){return"userAgentData"in o}function W(){if(typeof navigator>"u")return"\u2303";let o="";return S(navigator)&&(o=navigator.userAgentData.platform??""),o||(o=navigator.platform||navigator.userAgent||""),/mac|iphone|ipad|ipod/i.test(o)?"\u2318":"\u2303"}export{D as Command,I as MetaKey,b as useCommandState};
|
|
2
2
|
//# sourceMappingURL=command.js.map
|
package/dist/dialog.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as r}from"./chunk-
|
|
1
|
+
import{a as r}from"./chunk-CMHMGZJJ.js";import{i as o}from"./chunk-NQZYWYVH.js";import"./chunk-A3JO5HCY.js";import"./chunk-ZYMZVPDT.js";import"./chunk-6J7D73WA.js";import"./chunk-NJNFZ2EG.js";import"./chunk-KMNACVH6.js";import"./chunk-ZCTK5X4D.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-OP6JMBKJ.js";import"./chunk-SBVSECWW.js";import"./chunk-ODDNPNLN.js";import"./chunk-NZ6DRFAL.js";import"./chunk-PFXFESEN.js";export{r as Dialog,o as isDialogOverlayTarget};
|
|
2
2
|
//# sourceMappingURL=dialog.js.map
|
package/dist/hooks.d.ts
CHANGED
|
@@ -15,8 +15,9 @@ import { useLayoutEffect } from 'react';
|
|
|
15
15
|
* "md" // ≥48rem (768px)
|
|
16
16
|
* "sm" // ≥40rem (640px)
|
|
17
17
|
* "xs" // ≥30rem (480px)
|
|
18
|
+
* "2xs" // ≥22.5rem (360px)
|
|
18
19
|
*/
|
|
19
|
-
declare const tailwindBreakpoints: readonly ["2xl", "xl", "lg", "md", "sm", "xs"];
|
|
20
|
+
declare const tailwindBreakpoints: readonly ["2xl", "xl", "lg", "md", "sm", "xs", "2xs"];
|
|
20
21
|
/**
|
|
21
22
|
* A valid Tailwind CSS breakpoint identifier.
|
|
22
23
|
*
|
|
@@ -30,6 +31,7 @@ declare const tailwindBreakpoints: readonly ["2xl", "xl", "lg", "md", "sm", "xs"
|
|
|
30
31
|
* "md" // ≥48rem (768px)
|
|
31
32
|
* "sm" // ≥40rem (640px)
|
|
32
33
|
* "xs" // ≥30rem (480px)
|
|
34
|
+
* "2xs" // ≥22.5rem (360px)
|
|
33
35
|
*/
|
|
34
36
|
type TailwindBreakpoint = (typeof tailwindBreakpoints)[number];
|
|
35
37
|
/**
|
|
@@ -40,6 +42,7 @@ type TailwindBreakpoint = (typeof tailwindBreakpoints)[number];
|
|
|
40
42
|
*
|
|
41
43
|
* @example
|
|
42
44
|
* "default" // ≥0rem (0px)
|
|
45
|
+
* "2xs" // ≥22.5rem (360px)
|
|
43
46
|
* "xs" // ≥30rem (480px)
|
|
44
47
|
* "sm" // ≥40rem (640px)
|
|
45
48
|
* "md" // ≥48rem (768px)
|
|
@@ -47,7 +50,7 @@ type TailwindBreakpoint = (typeof tailwindBreakpoints)[number];
|
|
|
47
50
|
* "xl" // ≥80rem (1280px)
|
|
48
51
|
* "2xl" // ≥96rem (1536px)
|
|
49
52
|
*/
|
|
50
|
-
declare const breakpoints: readonly ["default", "2xl", "xl", "lg", "md", "sm", "xs"];
|
|
53
|
+
declare const breakpoints: readonly ["default", "2xl", "xl", "lg", "md", "sm", "xs", "2xs"];
|
|
51
54
|
/**
|
|
52
55
|
* A valid Mantle breakpoint identifier.
|
|
53
56
|
*
|
|
@@ -58,6 +61,7 @@ declare const breakpoints: readonly ["default", "2xl", "xl", "lg", "md", "sm", "
|
|
|
58
61
|
*
|
|
59
62
|
* @example
|
|
60
63
|
* "default" // ≥0rem (0px)
|
|
64
|
+
* "2xs" // ≥22.5rem (360px)
|
|
61
65
|
* "xs" // ≥30rem (480px)
|
|
62
66
|
* "sm" // ≥40rem (640px)
|
|
63
67
|
* "md" // ≥48rem (768px)
|
package/dist/hooks.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as Q}from"./chunk-GLSHD37P.js";import{a as
|
|
1
|
+
import{a as Q}from"./chunk-GLSHD37P.js";import{a as M}from"./chunk-6J7D73WA.js";import{a as y,b as T,c as g}from"./chunk-SMYI7SUP.js";import{a as b}from"./chunk-KMNACVH6.js";import{useSyncExternalStore as x}from"react";var h=["2xl","xl","lg","md","sm","xs","2xs"],R=["default",...h];function C(){return x(v,S,()=>"default")}function L(e){return x(E(e),W(e),()=>!1)}var r={"2xl":"(min-width: 96rem)",xl:"(min-width: 80rem)",lg:"(min-width: 64rem)",md:"(min-width: 48rem)",sm:"(min-width: 40rem)",xs:"(min-width: 30rem)","2xs":"(min-width: 22.5rem)"},o={"2xl":"(max-width: 95.99rem)",xl:"(max-width: 79.99rem)",lg:"(max-width: 63.99rem)",md:"(max-width: 47.99rem)",sm:"(max-width: 39.99rem)",xs:"(max-width: 29.99rem)","2xs":"(max-width: 22.49rem)"},u=null,c=null;function p(){return u||(u={"2xl":window.matchMedia(r["2xl"]),xl:window.matchMedia(r.xl),lg:window.matchMedia(r.lg),md:window.matchMedia(r.md),sm:window.matchMedia(r.sm),xs:window.matchMedia(r.xs),"2xs":window.matchMedia(r["2xs"])}),u}function k(e){return c||(c={"2xl":window.matchMedia(o["2xl"]),xl:window.matchMedia(o.xl),lg:window.matchMedia(o.lg),md:window.matchMedia(o.md),sm:window.matchMedia(o.sm),xs:window.matchMedia(o.xs),"2xs":window.matchMedia(o["2xs"])}),c[e]}var m="default",d=new Set,s=!1;function B(){let e=p();for(let t of h)if(e[t].matches)return t;return"default"}var l=!1;function w(){l||(l=!0,requestAnimationFrame(()=>{l=!1;let e=B();if(e!==m){m=e;for(let t of d)t()}}))}function v(e){if(d.add(e),!s){s=!0;let t=p();m=B();for(let n of Object.values(t))n.addEventListener("change",w)}return e(),()=>{if(d.delete(e),d.size===0&&s){s=!1;let t=p();for(let n of Object.values(t))n.removeEventListener("change",w)}}}function S(){return m}function E(e){return t=>{let n=k(e),i=!1,a=()=>{i||(i=!0,requestAnimationFrame(()=>{i=!1,t()}))};return n.addEventListener("change",a),()=>{n.removeEventListener("change",a)}}}function W(e){return()=>k(e).matches}import{useEffect as q,useMemo as I,useRef as j}from"react";function f(e){let t=j(e);return q(()=>{t.current=e}),I(()=>((...n)=>t.current?.(...n)),[])}import{useCallback as O,useEffect as P,useRef as A}from"react";function F(e,t){let n=f(e),i=A(0);return P(()=>()=>window.clearTimeout(i.current),[]),O((...a)=>{window.clearTimeout(i.current),i.current=window.setTimeout(()=>n(...a),t.waitMs)},[n,t.waitMs])}import{useMemo as D}from"react";var _=(e="mantle")=>D(()=>$(e),[e]);function $(e="mantle"){return[e.trim()||"mantle",z()].join("-")}function z(){return Math.random().toString(36).substring(2,9)}export{R as breakpoints,C as useBreakpoint,f as useCallbackRef,Q as useCopyToClipboard,F as useDebouncedCallback,L as useIsBelowBreakpoint,b as useIsHydrated,y as useIsomorphicLayoutEffect,M as useMatchesMediaQuery,T as usePrefersReducedMotion,_ as useRandomStableId,g as useScrollBehavior};
|
|
2
2
|
//# sourceMappingURL=hooks.js.map
|
package/dist/hooks.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hooks/use-breakpoint.tsx","../src/hooks/use-callback-ref.tsx","../src/hooks/use-debounced-callback.tsx","../src/hooks/use-random-stable-id.tsx"],"sourcesContent":["import { useSyncExternalStore } from \"react\";\n\n/**\n * Tailwind CSS breakpoints in descending order (largest → smallest).\n *\n * These correspond to Tailwind’s default `theme.screens` config and are used\n * to determine the current viewport size.\n *\n * @see https://tailwindcss.com/docs/screens\n *\n * @example\n * \"2xl\" // ≥96rem (1536px)\n * \"xl\" // ≥80rem (1280px)\n * \"lg\" // ≥64rem (1024px)\n * \"md\" // ≥48rem (768px)\n * \"sm\" // ≥40rem (640px)\n * \"xs\" // ≥30rem (480px)\n */\nconst tailwindBreakpoints = [\"2xl\", \"xl\", \"lg\", \"md\", \"sm\", \"xs\"] as const;\n\n/**\n * A valid Tailwind CSS breakpoint identifier.\n *\n * @example\n * const bp: TailwindBreakpoint = \"md\"; // ≥48rem (768px)\n *\n * @example\n * \"2xl\" // ≥96rem (1536px)\n * \"xl\" // ≥80rem (1280px)\n * \"lg\" // ≥64rem (1024px)\n * \"md\" // ≥48rem (768px)\n * \"sm\" // ≥40rem (640px)\n * \"xs\" // ≥30rem (480px)\n */\ntype TailwindBreakpoint = (typeof tailwindBreakpoints)[number];\n\n/**\n * Mantle’s breakpoint set, extending Tailwind’s with `\"default\"`.\n *\n * `\"default\"` represents the base (0px and up) viewport,\n * useful for defining fallbacks or mobile-first styles.\n *\n * @example\n * \"default\" // ≥0rem (0px)\n * \"xs\" // ≥30rem (480px)\n * \"sm\" // ≥40rem (640px)\n * \"md\" // ≥48rem (768px)\n * \"lg\" // ≥64rem (1024px)\n * \"xl\" // ≥80rem (1280px)\n * \"2xl\" // ≥96rem (1536px)\n */\nconst breakpoints = [\"default\", ...tailwindBreakpoints] as const;\n\n/**\n * A valid Mantle breakpoint identifier.\n *\n * Includes Tailwind’s standard breakpoints plus `\"default\"` for 0px+.\n *\n * @example\n * const bp: Breakpoint = \"default\"; // ≥0px\n *\n * @example\n * \"default\" // ≥0rem (0px)\n * \"xs\" // ≥30rem (480px)\n * \"sm\" // ≥40rem (640px)\n * \"md\" // ≥48rem (768px)\n * \"lg\" // ≥64rem (1024px)\n * \"xl\" // ≥80rem (1280px)\n * \"2xl\" // ≥96rem (1536px)\n */\ntype Breakpoint = (typeof breakpoints)[number];\n\n/**\n * React hook that returns the current breakpoint based on the viewport width.\n *\n * Uses a singleton subscription to a set of min-width media queries and returns\n * the largest matching breakpoint. Designed for React 18+ with\n * `useSyncExternalStore`.\n *\n * @returns {Breakpoint} The current breakpoint that matches the viewport width.\n *\n * @example\n * const breakpoint = useBreakpoint();\n * if (breakpoint === \"lg\") {\n * // Do something for large screens and above\n * }\n */\nfunction useBreakpoint(): Breakpoint {\n\treturn useSyncExternalStore(\n\t\tsubscribeToBreakpointChanges,\n\t\tgetCurrentBreakpointSnapshot,\n\t\t() => \"default\", // SSR fallback\n\t);\n}\n\n/**\n * React hook that returns true if the current viewport width is below the specified breakpoint.\n *\n * This hook uses `window.matchMedia` with a max-width media query and leverages\n * `useSyncExternalStore` to stay compliant with React's concurrent rendering model.\n *\n * @param {TailwindBreakpoint} breakpoint - The breakpoint to check against (e.g., \"md\", \"lg\").\n *\n * @returns {boolean} `true` if the viewport width is below the breakpoint, otherwise `false`.\n *\n * @example\n * // Check if viewport is below medium (768px)\n * const isBelowMd = useIsBelowBreakpoint(\"md\");\n */\nfunction useIsBelowBreakpoint(breakpoint: TailwindBreakpoint): boolean {\n\treturn useSyncExternalStore(\n\t\tcreateBelowBreakpointSubscribe(breakpoint),\n\t\tcreateBelowBreakpointGetSnapshot(breakpoint),\n\t\t() => false, // SSR fallback - assume desktop\n\t);\n}\n\nexport {\n\t//,\n\tbreakpoints,\n\tuseBreakpoint,\n\tuseIsBelowBreakpoint,\n};\n\nexport type {\n\t//,\n\tBreakpoint,\n\tTailwindBreakpoint,\n};\n\n/**\n * A CSS media query string representing a minimum width in `rem` units.\n *\n * @example\n * const query: MinWidthQuery = \"(min-width: 48rem)\";\n *\n * @private\n */\ntype MinWidthQuery = `(min-width: ${number}rem)`;\n\n/**\n * A CSS media query string representing a maximum width in `rem` units.\n *\n * @example\n * const query: MaxWidthQuery = \"(max-width: 47.99rem)\";\n *\n * @private\n */\ntype MaxWidthQuery = `(max-width: ${number}rem)`;\n\n/**\n * Precomputed min-width media query strings for each Tailwind breakpoint.\n *\n * Using constants avoids template string work in hot paths and ensures type\n * safety against the `MinWidthQuery` template literal type.\n *\n * @remarks\n * These are expressed in `rem`. If your CSS breakpoints are in `px`, consider\n * aligning units to avoid JS/CSS drift when `html{font-size}` changes.\n *\n * @private\n */\nconst breakpointQueries = {\n\t\"2xl\": \"(min-width: 96rem)\" as const,\n\txl: \"(min-width: 80rem)\" as const,\n\tlg: \"(min-width: 64rem)\" as const,\n\tmd: \"(min-width: 48rem)\" as const,\n\tsm: \"(min-width: 40rem)\" as const,\n\txs: \"(min-width: 30rem)\" as const,\n} as const satisfies Record<TailwindBreakpoint, MinWidthQuery>;\n\n/**\n * Precomputed max-width media query strings used by `useIsBelowBreakpoint`.\n *\n * The `-0.01rem` offset avoids overlap at exact boundaries.\n *\n * @private\n */\nconst belowBreakpointQueries = {\n\t\"2xl\": \"(max-width: 95.99rem)\" as const, // 96 - 0.01\n\txl: \"(max-width: 79.99rem)\" as const, // 80 - 0.01\n\tlg: \"(max-width: 63.99rem)\" as const, // 64 - 0.01\n\tmd: \"(max-width: 47.99rem)\" as const, // 48 - 0.01\n\tsm: \"(max-width: 39.99rem)\" as const, // 40 - 0.01\n\txs: \"(max-width: 29.99rem)\" as const, // 40 - 0.01\n} as const satisfies Record<TailwindBreakpoint, MaxWidthQuery>;\n\n/**\n * Lazily-initialized cache of `MediaQueryList` objects for min-width queries.\n *\n * Initialized on first access to remain SSR-safe (no `window` at import time).\n *\n * @private\n */\nlet minWidthMQLs: Record<TailwindBreakpoint, MediaQueryList> | null = null;\n\n/**\n * Lazily-initialized cache of `MediaQueryList` objects for max-width queries.\n *\n * Used by `useIsBelowBreakpoint`. Also SSR-safe by lazy access.\n *\n * @private\n */\nlet maxWidthMQLs: Record<TailwindBreakpoint, MediaQueryList> | null = null;\n\n/**\n * Get (and lazily create) the cached `MediaQueryList` objects for min-width queries.\n *\n * @returns A record of `MediaQueryList` keyed by Tailwind breakpoint.\n * @private\n */\nfunction getMinWidthMQLs(): Record<TailwindBreakpoint, MediaQueryList> {\n\tif (!minWidthMQLs) {\n\t\tminWidthMQLs = {\n\t\t\t\"2xl\": window.matchMedia(breakpointQueries[\"2xl\"]),\n\t\t\txl: window.matchMedia(breakpointQueries.xl),\n\t\t\tlg: window.matchMedia(breakpointQueries.lg),\n\t\t\tmd: window.matchMedia(breakpointQueries.md),\n\t\t\tsm: window.matchMedia(breakpointQueries.sm),\n\t\t\txs: window.matchMedia(breakpointQueries.xs),\n\t\t};\n\t}\n\treturn minWidthMQLs;\n}\n\n/**\n * Get (and lazily create) the cached `MediaQueryList` for a specific max-width breakpoint.\n *\n * @param breakpoint - Tailwind breakpoint identifier (e.g., \"md\").\n * @returns The corresponding `MediaQueryList`.\n * @private\n */\nfunction getMaxWidthMQL(breakpoint: TailwindBreakpoint): MediaQueryList {\n\tif (!maxWidthMQLs) {\n\t\tmaxWidthMQLs = {\n\t\t\t\"2xl\": window.matchMedia(belowBreakpointQueries[\"2xl\"]),\n\t\t\txl: window.matchMedia(belowBreakpointQueries.xl),\n\t\t\tlg: window.matchMedia(belowBreakpointQueries.lg),\n\t\t\tmd: window.matchMedia(belowBreakpointQueries.md),\n\t\t\tsm: window.matchMedia(belowBreakpointQueries.sm),\n\t\t\txs: window.matchMedia(belowBreakpointQueries.xs),\n\t\t};\n\t}\n\treturn maxWidthMQLs[breakpoint];\n}\n\n/**\n * Current breakpoint value used by the singleton store backing `useBreakpoint`.\n *\n * Initialized to `\"default\"` and updated on media-query change events.\n *\n * @private\n */\nlet currentBreakpointValue: Breakpoint = \"default\";\n\n/**\n * Set of component listeners subscribed to the singleton breakpoint store.\n *\n * Each listener is invoked when the current breakpoint value changes.\n *\n * @private\n */\nconst breakpointListeners = new Set<() => void>();\n\n/**\n * Flag indicating whether global media-query listeners are currently attached.\n *\n * Prevents duplicate registrations and enables full teardown when unused.\n *\n * @private\n */\nlet breakpointSubscriptionActive = false;\n\n/**\n * Compute the current breakpoint by checking cached min-width MQLs\n * from largest to smallest.\n *\n * @returns {Breakpoint} The largest matching breakpoint, or `\"default\"`.\n * @private\n */\nfunction getCurrentBreakpoint(): Breakpoint {\n\tconst mqls = getMinWidthMQLs();\n\tfor (const breakpoint of tailwindBreakpoints) {\n\t\tif (mqls[breakpoint].matches) {\n\t\t\treturn breakpoint;\n\t\t}\n\t}\n\treturn \"default\";\n}\n\n/**\n * Update the current breakpoint value and notify all listeners.\n *\n * Uses `requestAnimationFrame` to coalesce rapid resize events and minimize\n * re-renders during active window resizing.\n *\n * @private\n */\nlet breakpointUpdatePending = false;\nfunction updateCurrentBreakpoint() {\n\tif (!breakpointUpdatePending) {\n\t\tbreakpointUpdatePending = true;\n\t\trequestAnimationFrame(() => {\n\t\t\tbreakpointUpdatePending = false;\n\t\t\tconst newBreakpoint = getCurrentBreakpoint();\n\t\t\tif (newBreakpoint !== currentBreakpointValue) {\n\t\t\t\tcurrentBreakpointValue = newBreakpoint;\n\t\t\t\tfor (const listener of breakpointListeners) {\n\t\t\t\t\tlistener();\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t}\n}\n\n/**\n * Subscribe a component to breakpoint changes (singleton pattern).\n *\n * Ensures only one set of MQL listeners exists app-wide. Also reconciles the\n * `useSyncExternalStore` initial snapshot/subscribe race by invoking the\n * subscriber once on mount.\n *\n * @param callback - Listener invoked when the breakpoint value may have changed.\n * @returns Cleanup function to unsubscribe the listener.\n * @private\n */\nfunction subscribeToBreakpointChanges(callback: () => void) {\n\tbreakpointListeners.add(callback);\n\n\t// Attach global listeners once\n\tif (!breakpointSubscriptionActive) {\n\t\tbreakpointSubscriptionActive = true;\n\t\tconst mqls = getMinWidthMQLs();\n\n\t\t// Initialize current value synchronously\n\t\tcurrentBreakpointValue = getCurrentBreakpoint();\n\n\t\t// Attach listeners to all breakpoint MQLs\n\t\tfor (const mql of Object.values(mqls)) {\n\t\t\tmql.addEventListener(\"change\", updateCurrentBreakpoint);\n\t\t}\n\t}\n\n\t// Reconcile initial getSnapshot vs subscribe ordering\n\tcallback();\n\n\t// Cleanup\n\treturn () => {\n\t\tbreakpointListeners.delete(callback);\n\n\t\t// Tear down global listeners when no one is listening\n\t\tif (breakpointListeners.size === 0 && breakpointSubscriptionActive) {\n\t\t\tbreakpointSubscriptionActive = false;\n\t\t\tconst mqls = getMinWidthMQLs();\n\t\t\tfor (const mql of Object.values(mqls)) {\n\t\t\t\tmql.removeEventListener(\"change\", updateCurrentBreakpoint);\n\t\t\t}\n\t\t}\n\t};\n}\n\n/**\n * Return the current breakpoint value from the singleton store.\n *\n * Used as the `getSnapshot` for `useSyncExternalStore`.\n *\n * @returns {Breakpoint} The latest computed breakpoint.\n * @private\n */\nfunction getCurrentBreakpointSnapshot(): Breakpoint {\n\treturn currentBreakpointValue;\n}\n\n/**\n * Factory to create a `subscribe` function for a specific \"below\" breakpoint.\n *\n * Uses a cached `MediaQueryList` and rAF-throttled change handler to avoid\n * bursty updates during resize.\n *\n * @param breakpoint - Tailwind breakpoint identifier (e.g., \"lg\").\n * @returns A `subscribe` function suitable for `useSyncExternalStore`.\n * @private\n */\nfunction createBelowBreakpointSubscribe(breakpoint: TailwindBreakpoint) {\n\treturn (callback: () => void) => {\n\t\tconst mediaQuery = getMaxWidthMQL(breakpoint);\n\n\t\t// rAF throttle the change callback during active resize\n\t\tlet pending = false;\n\t\tconst onChange = () => {\n\t\t\tif (!pending) {\n\t\t\t\tpending = true;\n\t\t\t\trequestAnimationFrame(() => {\n\t\t\t\t\tpending = false;\n\t\t\t\t\tcallback();\n\t\t\t\t});\n\t\t\t}\n\t\t};\n\n\t\tmediaQuery.addEventListener(\"change\", onChange);\n\t\treturn () => {\n\t\t\tmediaQuery.removeEventListener(\"change\", onChange);\n\t\t};\n\t};\n}\n\n/**\n * Factory to create a `getSnapshot` function for a specific \"below\" breakpoint.\n *\n * Uses the cached `MediaQueryList` for the target breakpoint.\n *\n * @param breakpoint - Tailwind breakpoint identifier (e.g., \"lg\").\n * @returns A function that returns `true` when the viewport is below the breakpoint.\n * @private\n */\nfunction createBelowBreakpointGetSnapshot(breakpoint: TailwindBreakpoint) {\n\treturn () => {\n\t\tconst mediaQuery = getMaxWidthMQL(breakpoint);\n\t\treturn mediaQuery.matches;\n\t};\n}\n","import { useEffect, useMemo, useRef } from \"react\";\n\n/**\n * Returns a memoized callback that will always refer to the latest callback\n * passed to the hook.\n *\n * This is useful when you want to pass a callback which may or may not be\n * memoized (have a stable identity) to a child component that will be updated\n * without causing the child component to re-render.\n */\nfunction useCallbackRef<T extends (...args: unknown[]) => unknown>(callback: T | undefined): T {\n\tconst callbackRef = useRef(callback);\n\n\tuseEffect(() => {\n\t\tcallbackRef.current = callback;\n\t});\n\n\treturn useMemo(() => ((...args) => callbackRef.current?.(...args)) as T, []);\n}\n\nexport {\n\t//,\n\tuseCallbackRef,\n};\n","import { useCallback, useEffect, useRef } from \"react\";\nimport { useCallbackRef } from \"./use-callback-ref.js\";\n\ntype Options = {\n\t/**\n\t * The delay in milliseconds to wait before calling the callback.\n\t */\n\twaitMs: number;\n};\n\n/**\n * Create a debounced version of a callback function.\n *\n * It allows you to delay the execution of a function until a certain period of\n * inactivity has passed (the `options.waitMs`), which can be useful for limiting rapid\n * invocations of a function (like in search inputs or button clicks)\n *\n * Note: The debounced callback will always refer to the latest callback passed\n * even without memoization, so it's stable and safe to use in dependency arrays.\n */\nfunction useDebouncedCallback<T extends (...args: unknown[]) => unknown>(\n\tcallbackFn: T,\n\toptions: Options,\n) {\n\tconst stableCallbackFn = useCallbackRef(callbackFn);\n\tconst debounceTimerRef = useRef(0);\n\tuseEffect(() => () => window.clearTimeout(debounceTimerRef.current), []);\n\n\treturn useCallback(\n\t\t(...args: Parameters<T>) => {\n\t\t\twindow.clearTimeout(debounceTimerRef.current);\n\t\t\tdebounceTimerRef.current = window.setTimeout(() => stableCallbackFn(...args), options.waitMs);\n\t\t},\n\t\t[stableCallbackFn, options.waitMs],\n\t);\n}\n\nexport {\n\t//,\n\tuseDebouncedCallback,\n};\n","import { useMemo } from \"react\";\n\n/**\n * Hook to generate a random, stable id.\n * This is similar to `useId`, but generates a stable id client side which can also\n * be used for css selectors and element ids.\n */\nconst useRandomStableId = (prefix = \"mantle\") => useMemo(() => randomStableId(prefix), [prefix]);\n\nexport {\n\t//,\n\tuseRandomStableId,\n};\n\nfunction randomStableId(prefix = \"mantle\") {\n\tconst _prefix = prefix.trim() || \"mantle\";\n\treturn [_prefix, randomPostfix()].join(\"-\");\n}\n\nfunction randomPostfix() {\n\treturn Math.random().toString(36).substring(2, 9);\n}\n"],"mappings":"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","names":["useSyncExternalStore","tailwindBreakpoints","breakpoints","useBreakpoint","subscribeToBreakpointChanges","getCurrentBreakpointSnapshot","useIsBelowBreakpoint","breakpoint","createBelowBreakpointSubscribe","createBelowBreakpointGetSnapshot","breakpointQueries","belowBreakpointQueries","minWidthMQLs","maxWidthMQLs","getMinWidthMQLs","getMaxWidthMQL","breakpoint","currentBreakpointValue","breakpointListeners","breakpointSubscriptionActive","getCurrentBreakpoint","mqls","tailwindBreakpoints","breakpointUpdatePending","updateCurrentBreakpoint","newBreakpoint","listener","subscribeToBreakpointChanges","callback","mql","getCurrentBreakpointSnapshot","createBelowBreakpointSubscribe","mediaQuery","pending","onChange","createBelowBreakpointGetSnapshot","useEffect","useMemo","useRef","useCallbackRef","callback","callbackRef","args","useCallback","useEffect","useRef","useDebouncedCallback","callbackFn","options","stableCallbackFn","useCallbackRef","debounceTimerRef","useRef","useEffect","useCallback","args","useMemo","useRandomStableId","prefix","randomStableId","randomStableId","prefix","randomPostfix"]}
|
|
1
|
+
{"version":3,"sources":["../src/hooks/use-breakpoint.tsx","../src/hooks/use-callback-ref.tsx","../src/hooks/use-debounced-callback.tsx","../src/hooks/use-random-stable-id.tsx"],"sourcesContent":["import { useSyncExternalStore } from \"react\";\n\n/**\n * Tailwind CSS breakpoints in descending order (largest → smallest).\n *\n * These correspond to Tailwind’s default `theme.screens` config and are used\n * to determine the current viewport size.\n *\n * @see https://tailwindcss.com/docs/screens\n *\n * @example\n * \"2xl\" // ≥96rem (1536px)\n * \"xl\" // ≥80rem (1280px)\n * \"lg\" // ≥64rem (1024px)\n * \"md\" // ≥48rem (768px)\n * \"sm\" // ≥40rem (640px)\n * \"xs\" // ≥30rem (480px)\n * \"2xs\" // ≥22.5rem (360px)\n */\nconst tailwindBreakpoints = [\"2xl\", \"xl\", \"lg\", \"md\", \"sm\", \"xs\", \"2xs\"] as const;\n\n/**\n * A valid Tailwind CSS breakpoint identifier.\n *\n * @example\n * const bp: TailwindBreakpoint = \"md\"; // ≥48rem (768px)\n *\n * @example\n * \"2xl\" // ≥96rem (1536px)\n * \"xl\" // ≥80rem (1280px)\n * \"lg\" // ≥64rem (1024px)\n * \"md\" // ≥48rem (768px)\n * \"sm\" // ≥40rem (640px)\n * \"xs\" // ≥30rem (480px)\n * \"2xs\" // ≥22.5rem (360px)\n */\ntype TailwindBreakpoint = (typeof tailwindBreakpoints)[number];\n\n/**\n * Mantle’s breakpoint set, extending Tailwind’s with `\"default\"`.\n *\n * `\"default\"` represents the base (0px and up) viewport,\n * useful for defining fallbacks or mobile-first styles.\n *\n * @example\n * \"default\" // ≥0rem (0px)\n * \"2xs\" // ≥22.5rem (360px)\n * \"xs\" // ≥30rem (480px)\n * \"sm\" // ≥40rem (640px)\n * \"md\" // ≥48rem (768px)\n * \"lg\" // ≥64rem (1024px)\n * \"xl\" // ≥80rem (1280px)\n * \"2xl\" // ≥96rem (1536px)\n */\nconst breakpoints = [\"default\", ...tailwindBreakpoints] as const;\n\n/**\n * A valid Mantle breakpoint identifier.\n *\n * Includes Tailwind’s standard breakpoints plus `\"default\"` for 0px+.\n *\n * @example\n * const bp: Breakpoint = \"default\"; // ≥0px\n *\n * @example\n * \"default\" // ≥0rem (0px)\n * \"2xs\" // ≥22.5rem (360px)\n * \"xs\" // ≥30rem (480px)\n * \"sm\" // ≥40rem (640px)\n * \"md\" // ≥48rem (768px)\n * \"lg\" // ≥64rem (1024px)\n * \"xl\" // ≥80rem (1280px)\n * \"2xl\" // ≥96rem (1536px)\n */\ntype Breakpoint = (typeof breakpoints)[number];\n\n/**\n * React hook that returns the current breakpoint based on the viewport width.\n *\n * Uses a singleton subscription to a set of min-width media queries and returns\n * the largest matching breakpoint. Designed for React 18+ with\n * `useSyncExternalStore`.\n *\n * @returns {Breakpoint} The current breakpoint that matches the viewport width.\n *\n * @example\n * const breakpoint = useBreakpoint();\n * if (breakpoint === \"lg\") {\n * // Do something for large screens and above\n * }\n */\nfunction useBreakpoint(): Breakpoint {\n\treturn useSyncExternalStore(\n\t\tsubscribeToBreakpointChanges,\n\t\tgetCurrentBreakpointSnapshot,\n\t\t() => \"default\", // SSR fallback\n\t);\n}\n\n/**\n * React hook that returns true if the current viewport width is below the specified breakpoint.\n *\n * This hook uses `window.matchMedia` with a max-width media query and leverages\n * `useSyncExternalStore` to stay compliant with React's concurrent rendering model.\n *\n * @param {TailwindBreakpoint} breakpoint - The breakpoint to check against (e.g., \"md\", \"lg\").\n *\n * @returns {boolean} `true` if the viewport width is below the breakpoint, otherwise `false`.\n *\n * @example\n * // Check if viewport is below medium (768px)\n * const isBelowMd = useIsBelowBreakpoint(\"md\");\n */\nfunction useIsBelowBreakpoint(breakpoint: TailwindBreakpoint): boolean {\n\treturn useSyncExternalStore(\n\t\tcreateBelowBreakpointSubscribe(breakpoint),\n\t\tcreateBelowBreakpointGetSnapshot(breakpoint),\n\t\t() => false, // SSR fallback - assume desktop\n\t);\n}\n\nexport {\n\t//,\n\tbreakpoints,\n\tuseBreakpoint,\n\tuseIsBelowBreakpoint,\n};\n\nexport type {\n\t//,\n\tBreakpoint,\n\tTailwindBreakpoint,\n};\n\n/**\n * A CSS media query string representing a minimum width in `rem` units.\n *\n * @example\n * const query: MinWidthQuery = \"(min-width: 48rem)\";\n *\n * @private\n */\ntype MinWidthQuery = `(min-width: ${number}rem)`;\n\n/**\n * A CSS media query string representing a maximum width in `rem` units.\n *\n * @example\n * const query: MaxWidthQuery = \"(max-width: 47.99rem)\";\n *\n * @private\n */\ntype MaxWidthQuery = `(max-width: ${number}rem)`;\n\n/**\n * Precomputed min-width media query strings for each Tailwind breakpoint.\n *\n * Using constants avoids template string work in hot paths and ensures type\n * safety against the `MinWidthQuery` template literal type.\n *\n * @remarks\n * These are expressed in `rem`. If your CSS breakpoints are in `px`, consider\n * aligning units to avoid JS/CSS drift when `html{font-size}` changes.\n *\n * @private\n */\nconst breakpointQueries = {\n\t\"2xl\": \"(min-width: 96rem)\" as const,\n\txl: \"(min-width: 80rem)\" as const,\n\tlg: \"(min-width: 64rem)\" as const,\n\tmd: \"(min-width: 48rem)\" as const,\n\tsm: \"(min-width: 40rem)\" as const,\n\txs: \"(min-width: 30rem)\" as const,\n\t\"2xs\": \"(min-width: 22.5rem)\" as const,\n} as const satisfies Record<TailwindBreakpoint, MinWidthQuery>;\n\n/**\n * Precomputed max-width media query strings used by `useIsBelowBreakpoint`.\n *\n * The `-0.01rem` offset avoids overlap at exact boundaries.\n *\n * @private\n */\nconst belowBreakpointQueries = {\n\t\"2xl\": \"(max-width: 95.99rem)\" as const, // 96 - 0.01\n\txl: \"(max-width: 79.99rem)\" as const, // 80 - 0.01\n\tlg: \"(max-width: 63.99rem)\" as const, // 64 - 0.01\n\tmd: \"(max-width: 47.99rem)\" as const, // 48 - 0.01\n\tsm: \"(max-width: 39.99rem)\" as const, // 40 - 0.01\n\txs: \"(max-width: 29.99rem)\" as const, // 30 - 0.01\n\t\"2xs\": \"(max-width: 22.49rem)\" as const, // 22.5 - 0.01\n} as const satisfies Record<TailwindBreakpoint, MaxWidthQuery>;\n\n/**\n * Lazily-initialized cache of `MediaQueryList` objects for min-width queries.\n *\n * Initialized on first access to remain SSR-safe (no `window` at import time).\n *\n * @private\n */\nlet minWidthMQLs: Record<TailwindBreakpoint, MediaQueryList> | null = null;\n\n/**\n * Lazily-initialized cache of `MediaQueryList` objects for max-width queries.\n *\n * Used by `useIsBelowBreakpoint`. Also SSR-safe by lazy access.\n *\n * @private\n */\nlet maxWidthMQLs: Record<TailwindBreakpoint, MediaQueryList> | null = null;\n\n/**\n * Get (and lazily create) the cached `MediaQueryList` objects for min-width queries.\n *\n * @returns A record of `MediaQueryList` keyed by Tailwind breakpoint.\n * @private\n */\nfunction getMinWidthMQLs(): Record<TailwindBreakpoint, MediaQueryList> {\n\tif (!minWidthMQLs) {\n\t\tminWidthMQLs = {\n\t\t\t\"2xl\": window.matchMedia(breakpointQueries[\"2xl\"]),\n\t\t\txl: window.matchMedia(breakpointQueries.xl),\n\t\t\tlg: window.matchMedia(breakpointQueries.lg),\n\t\t\tmd: window.matchMedia(breakpointQueries.md),\n\t\t\tsm: window.matchMedia(breakpointQueries.sm),\n\t\t\txs: window.matchMedia(breakpointQueries.xs),\n\t\t\t\"2xs\": window.matchMedia(breakpointQueries[\"2xs\"]),\n\t\t};\n\t}\n\treturn minWidthMQLs;\n}\n\n/**\n * Get (and lazily create) the cached `MediaQueryList` for a specific max-width breakpoint.\n *\n * @param breakpoint - Tailwind breakpoint identifier (e.g., \"md\").\n * @returns The corresponding `MediaQueryList`.\n * @private\n */\nfunction getMaxWidthMQL(breakpoint: TailwindBreakpoint): MediaQueryList {\n\tif (!maxWidthMQLs) {\n\t\tmaxWidthMQLs = {\n\t\t\t\"2xl\": window.matchMedia(belowBreakpointQueries[\"2xl\"]),\n\t\t\txl: window.matchMedia(belowBreakpointQueries.xl),\n\t\t\tlg: window.matchMedia(belowBreakpointQueries.lg),\n\t\t\tmd: window.matchMedia(belowBreakpointQueries.md),\n\t\t\tsm: window.matchMedia(belowBreakpointQueries.sm),\n\t\t\txs: window.matchMedia(belowBreakpointQueries.xs),\n\t\t\t\"2xs\": window.matchMedia(belowBreakpointQueries[\"2xs\"]),\n\t\t};\n\t}\n\treturn maxWidthMQLs[breakpoint];\n}\n\n/**\n * Current breakpoint value used by the singleton store backing `useBreakpoint`.\n *\n * Initialized to `\"default\"` and updated on media-query change events.\n *\n * @private\n */\nlet currentBreakpointValue: Breakpoint = \"default\";\n\n/**\n * Set of component listeners subscribed to the singleton breakpoint store.\n *\n * Each listener is invoked when the current breakpoint value changes.\n *\n * @private\n */\nconst breakpointListeners = new Set<() => void>();\n\n/**\n * Flag indicating whether global media-query listeners are currently attached.\n *\n * Prevents duplicate registrations and enables full teardown when unused.\n *\n * @private\n */\nlet breakpointSubscriptionActive = false;\n\n/**\n * Compute the current breakpoint by checking cached min-width MQLs\n * from largest to smallest.\n *\n * @returns {Breakpoint} The largest matching breakpoint, or `\"default\"`.\n * @private\n */\nfunction getCurrentBreakpoint(): Breakpoint {\n\tconst mqls = getMinWidthMQLs();\n\tfor (const breakpoint of tailwindBreakpoints) {\n\t\tif (mqls[breakpoint].matches) {\n\t\t\treturn breakpoint;\n\t\t}\n\t}\n\treturn \"default\";\n}\n\n/**\n * Update the current breakpoint value and notify all listeners.\n *\n * Uses `requestAnimationFrame` to coalesce rapid resize events and minimize\n * re-renders during active window resizing.\n *\n * @private\n */\nlet breakpointUpdatePending = false;\nfunction updateCurrentBreakpoint() {\n\tif (!breakpointUpdatePending) {\n\t\tbreakpointUpdatePending = true;\n\t\trequestAnimationFrame(() => {\n\t\t\tbreakpointUpdatePending = false;\n\t\t\tconst newBreakpoint = getCurrentBreakpoint();\n\t\t\tif (newBreakpoint !== currentBreakpointValue) {\n\t\t\t\tcurrentBreakpointValue = newBreakpoint;\n\t\t\t\tfor (const listener of breakpointListeners) {\n\t\t\t\t\tlistener();\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t}\n}\n\n/**\n * Subscribe a component to breakpoint changes (singleton pattern).\n *\n * Ensures only one set of MQL listeners exists app-wide. Also reconciles the\n * `useSyncExternalStore` initial snapshot/subscribe race by invoking the\n * subscriber once on mount.\n *\n * @param callback - Listener invoked when the breakpoint value may have changed.\n * @returns Cleanup function to unsubscribe the listener.\n * @private\n */\nfunction subscribeToBreakpointChanges(callback: () => void) {\n\tbreakpointListeners.add(callback);\n\n\t// Attach global listeners once\n\tif (!breakpointSubscriptionActive) {\n\t\tbreakpointSubscriptionActive = true;\n\t\tconst mqls = getMinWidthMQLs();\n\n\t\t// Initialize current value synchronously\n\t\tcurrentBreakpointValue = getCurrentBreakpoint();\n\n\t\t// Attach listeners to all breakpoint MQLs\n\t\tfor (const mql of Object.values(mqls)) {\n\t\t\tmql.addEventListener(\"change\", updateCurrentBreakpoint);\n\t\t}\n\t}\n\n\t// Reconcile initial getSnapshot vs subscribe ordering\n\tcallback();\n\n\t// Cleanup\n\treturn () => {\n\t\tbreakpointListeners.delete(callback);\n\n\t\t// Tear down global listeners when no one is listening\n\t\tif (breakpointListeners.size === 0 && breakpointSubscriptionActive) {\n\t\t\tbreakpointSubscriptionActive = false;\n\t\t\tconst mqls = getMinWidthMQLs();\n\t\t\tfor (const mql of Object.values(mqls)) {\n\t\t\t\tmql.removeEventListener(\"change\", updateCurrentBreakpoint);\n\t\t\t}\n\t\t}\n\t};\n}\n\n/**\n * Return the current breakpoint value from the singleton store.\n *\n * Used as the `getSnapshot` for `useSyncExternalStore`.\n *\n * @returns {Breakpoint} The latest computed breakpoint.\n * @private\n */\nfunction getCurrentBreakpointSnapshot(): Breakpoint {\n\treturn currentBreakpointValue;\n}\n\n/**\n * Factory to create a `subscribe` function for a specific \"below\" breakpoint.\n *\n * Uses a cached `MediaQueryList` and rAF-throttled change handler to avoid\n * bursty updates during resize.\n *\n * @param breakpoint - Tailwind breakpoint identifier (e.g., \"lg\").\n * @returns A `subscribe` function suitable for `useSyncExternalStore`.\n * @private\n */\nfunction createBelowBreakpointSubscribe(breakpoint: TailwindBreakpoint) {\n\treturn (callback: () => void) => {\n\t\tconst mediaQuery = getMaxWidthMQL(breakpoint);\n\n\t\t// rAF throttle the change callback during active resize\n\t\tlet pending = false;\n\t\tconst onChange = () => {\n\t\t\tif (!pending) {\n\t\t\t\tpending = true;\n\t\t\t\trequestAnimationFrame(() => {\n\t\t\t\t\tpending = false;\n\t\t\t\t\tcallback();\n\t\t\t\t});\n\t\t\t}\n\t\t};\n\n\t\tmediaQuery.addEventListener(\"change\", onChange);\n\t\treturn () => {\n\t\t\tmediaQuery.removeEventListener(\"change\", onChange);\n\t\t};\n\t};\n}\n\n/**\n * Factory to create a `getSnapshot` function for a specific \"below\" breakpoint.\n *\n * Uses the cached `MediaQueryList` for the target breakpoint.\n *\n * @param breakpoint - Tailwind breakpoint identifier (e.g., \"lg\").\n * @returns A function that returns `true` when the viewport is below the breakpoint.\n * @private\n */\nfunction createBelowBreakpointGetSnapshot(breakpoint: TailwindBreakpoint) {\n\treturn () => {\n\t\tconst mediaQuery = getMaxWidthMQL(breakpoint);\n\t\treturn mediaQuery.matches;\n\t};\n}\n","import { useEffect, useMemo, useRef } from \"react\";\n\n/**\n * Returns a memoized callback that will always refer to the latest callback\n * passed to the hook.\n *\n * This is useful when you want to pass a callback which may or may not be\n * memoized (have a stable identity) to a child component that will be updated\n * without causing the child component to re-render.\n */\nfunction useCallbackRef<T extends (...args: unknown[]) => unknown>(callback: T | undefined): T {\n\tconst callbackRef = useRef(callback);\n\n\tuseEffect(() => {\n\t\tcallbackRef.current = callback;\n\t});\n\n\treturn useMemo(() => ((...args) => callbackRef.current?.(...args)) as T, []);\n}\n\nexport {\n\t//,\n\tuseCallbackRef,\n};\n","import { useCallback, useEffect, useRef } from \"react\";\nimport { useCallbackRef } from \"./use-callback-ref.js\";\n\ntype Options = {\n\t/**\n\t * The delay in milliseconds to wait before calling the callback.\n\t */\n\twaitMs: number;\n};\n\n/**\n * Create a debounced version of a callback function.\n *\n * It allows you to delay the execution of a function until a certain period of\n * inactivity has passed (the `options.waitMs`), which can be useful for limiting rapid\n * invocations of a function (like in search inputs or button clicks)\n *\n * Note: The debounced callback will always refer to the latest callback passed\n * even without memoization, so it's stable and safe to use in dependency arrays.\n */\nfunction useDebouncedCallback<T extends (...args: unknown[]) => unknown>(\n\tcallbackFn: T,\n\toptions: Options,\n) {\n\tconst stableCallbackFn = useCallbackRef(callbackFn);\n\tconst debounceTimerRef = useRef(0);\n\tuseEffect(() => () => window.clearTimeout(debounceTimerRef.current), []);\n\n\treturn useCallback(\n\t\t(...args: Parameters<T>) => {\n\t\t\twindow.clearTimeout(debounceTimerRef.current);\n\t\t\tdebounceTimerRef.current = window.setTimeout(() => stableCallbackFn(...args), options.waitMs);\n\t\t},\n\t\t[stableCallbackFn, options.waitMs],\n\t);\n}\n\nexport {\n\t//,\n\tuseDebouncedCallback,\n};\n","import { useMemo } from \"react\";\n\n/**\n * Hook to generate a random, stable id.\n * This is similar to `useId`, but generates a stable id client side which can also\n * be used for css selectors and element ids.\n */\nconst useRandomStableId = (prefix = \"mantle\") => useMemo(() => randomStableId(prefix), [prefix]);\n\nexport {\n\t//,\n\tuseRandomStableId,\n};\n\nfunction randomStableId(prefix = \"mantle\") {\n\tconst _prefix = prefix.trim() || \"mantle\";\n\treturn [_prefix, randomPostfix()].join(\"-\");\n}\n\nfunction randomPostfix() {\n\treturn Math.random().toString(36).substring(2, 9);\n}\n"],"mappings":"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","names":["useSyncExternalStore","tailwindBreakpoints","breakpoints","useBreakpoint","subscribeToBreakpointChanges","getCurrentBreakpointSnapshot","useIsBelowBreakpoint","breakpoint","createBelowBreakpointSubscribe","createBelowBreakpointGetSnapshot","breakpointQueries","belowBreakpointQueries","minWidthMQLs","maxWidthMQLs","getMinWidthMQLs","getMaxWidthMQL","breakpoint","currentBreakpointValue","breakpointListeners","breakpointSubscriptionActive","getCurrentBreakpoint","mqls","tailwindBreakpoints","breakpointUpdatePending","updateCurrentBreakpoint","newBreakpoint","listener","subscribeToBreakpointChanges","callback","mql","getCurrentBreakpointSnapshot","createBelowBreakpointSubscribe","mediaQuery","pending","onChange","createBelowBreakpointGetSnapshot","useEffect","useMemo","useRef","useCallbackRef","callback","callbackRef","args","useCallback","useEffect","useRef","useDebouncedCallback","callbackFn","options","stableCallbackFn","useCallbackRef","debounceTimerRef","useRef","useEffect","useCallback","args","useMemo","useRandomStableId","prefix","randomStableId","randomStableId","prefix","randomPostfix"]}
|
package/dist/icons.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as h}from"./chunk-W2YQRWR5.js";import{a as s}from"./chunk-HL2HWYKP.js";import"./chunk-7MJQGBE4.js";import{m}from"./chunk-
|
|
1
|
+
import{a as h}from"./chunk-W2YQRWR5.js";import{a as s}from"./chunk-HL2HWYKP.js";import"./chunk-7MJQGBE4.js";import{m}from"./chunk-ZYMZVPDT.js";import"./chunk-6J7D73WA.js";import"./chunk-NJNFZ2EG.js";import"./chunk-KMNACVH6.js";import"./chunk-PFXFESEN.js";import{DesktopIcon as f}from"@phosphor-icons/react/Desktop";import{MoonIcon as n}from"@phosphor-icons/react/Moon";import{SunIcon as i}from"@phosphor-icons/react/Sun";import{jsx as t}from"react/jsx-runtime";function c(o){let e=m();return t(r,{theme:e,...o})}c.displayName="AutoThemeIcon";function r({theme:o,...e}){switch(o){case"system":return t(f,{...e});case"light":return t(i,{...e});case"dark":return t(n,{...e});case"light-high-contrast":return t(i,{...e,weight:"fill"});case"dark-high-contrast":return t(n,{...e,weight:"fill"})}}r.displayName="ThemeIcon";export{c as AutoThemeIcon,s as SortIcon,r as ThemeIcon,h as TrafficPolicyFileIcon};
|
|
2
2
|
//# sourceMappingURL=icons.js.map
|
package/dist/mantle.css
CHANGED
package/dist/sheet.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as u,b as v,c as S,d as m,e as p,f as d,g as h,h as f}from"./chunk-NQZYWYVH.js";import{d as c}from"./chunk-
|
|
1
|
+
import{a as u,b as v,c as S,d as m,e as p,f as d,g as h,h as f}from"./chunk-NQZYWYVH.js";import{d as c}from"./chunk-A3JO5HCY.js";import"./chunk-ZYMZVPDT.js";import"./chunk-6J7D73WA.js";import"./chunk-NJNFZ2EG.js";import"./chunk-KMNACVH6.js";import{c as y}from"./chunk-ZCTK5X4D.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-OP6JMBKJ.js";import"./chunk-SBVSECWW.js";import"./chunk-ODDNPNLN.js";import"./chunk-NZ6DRFAL.js";import{a}from"./chunk-PFXFESEN.js";import{XIcon as W}from"@phosphor-icons/react/X";import{cva as E}from"class-variance-authority";import{forwardRef as s}from"react";import{jsx as o,jsxs as z}from"react/jsx-runtime";var P=u;P.displayName="Sheet";var C=v;C.displayName="SheetTrigger";var g=m;g.displayName="SheetClose";var N=S;N.displayName="SheetPortal";var b=s(({className:e,...t},i)=>o(p,{className:a("bg-overlay data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0 fixed inset-0 z-40 backdrop-blur-xs",e),...t,ref:i}));b.displayName=p.displayName;var V=E("bg-dialog border-dialog inset-y-0 h-full w-full fixed z-40 flex flex-col shadow-lg outline-hidden transition ease-in-out focus-within:outline-hidden data-state-closed:duration-100 data-state-closed:animate-out data-state-open:duration-100 data-state-open:animate-in",{variants:{side:{left:"data-state-closed:slide-out-to-left data-state-open:slide-in-from-left left-0 border-r",right:"data-state-closed:slide-out-to-right data-state-open:slide-in-from-right right-0 border-l"}},defaultVariants:{side:"right"}}),x=s(({children:e,className:t,onInteractOutside:i,onPointerDownOutside:r,preferredWidth:l="sm:max-w-[30rem]",side:B="right",...O},A)=>z(N,{children:[o(b,{}),o(d,{className:a(V({side:B}),l,t),onInteractOutside:n=>{c(n),i?.(n)},onPointerDownOutside:n=>{c(n),r?.(n)},ref:A,...O,children:e})]}));x.displayName=d.displayName;var T=({size:e="md",type:t="button",label:i="Close Sheet",appearance:r="ghost",...l})=>o(m,{asChild:!0,children:o(y,{appearance:r,icon:o(W,{}),label:i,size:e,type:t,...l})});T.displayName="SheetCloseIconButton";var R=({className:e,...t})=>o("div",{className:a("scrollbar text-body flex-1 overflow-y-auto p-6",e),...t});R.displayName="SheetBody";var H=({className:e,...t})=>o("div",{className:a("border-dialog-muted flex shrink-0 flex-col gap-2 border-b py-4 pl-6 pr-4","has-[.icon-button]:pr-4",e),...t});H.displayName="SheetHeader";var D=({className:e,...t})=>o("div",{className:a("border-dialog-muted flex shrink-0 justify-end gap-2 border-t px-6 py-2.5",e),...t});D.displayName="SheetFooter";var L=s(({className:e,...t},i)=>o(h,{ref:i,className:a("text-strong flex-1 truncate text-lg font-medium",e),...t}));L.displayName=h.displayName;var M=s(({children:e,className:t,...i},r)=>o("div",{className:a("flex items-center justify-between gap-2",t),...i,ref:r,children:e}));M.displayName="SheetTitleGroup";var I=s(({className:e,...t},i)=>o(f,{ref:i,className:a("text-body text-sm",e),...t}));I.displayName=f.displayName;var w=s(({children:e,className:t,...i},r)=>o("div",{className:a("flex h-full items-center gap-2",t),...i,ref:r,children:e}));w.displayName="SheetActions";var k={Root:P,Actions:w,Body:R,Close:g,CloseIconButton:T,Content:x,Description:I,Footer:D,Header:H,Title:L,TitleGroup:M,Trigger:C};export{k as Sheet};
|
|
2
2
|
//# sourceMappingURL=sheet.js.map
|
package/dist/theme.d.ts
CHANGED
|
@@ -142,8 +142,8 @@ type FontPath = `/${string}` | (string & {});
|
|
|
142
142
|
* @returns {`https://assets.ngrok.com/fonts${T}`} An absolute, literal-typed CDN URL.
|
|
143
143
|
*
|
|
144
144
|
* @example
|
|
145
|
-
* const href = fontHref("/
|
|
146
|
-
* // -> "https://assets.ngrok.com/fonts/
|
|
145
|
+
* const href = fontHref("/roobert/roobert-proportional-vf.woff2");
|
|
146
|
+
* // -> "https://assets.ngrok.com/fonts/roobert/roobert-proportional-vf.woff2"
|
|
147
147
|
*/
|
|
148
148
|
declare function fontHref<T extends FontPath = FontPath>(font: T): `https://assets.ngrok.com/fonts${string}`;
|
|
149
149
|
/**
|
package/dist/theme.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as e,b as m,c as t,d as o,e as r,f as s,g as h,h as T,i as n,j as l,k as d,l as p,m as i,n as a,o as f,p as v,q as x}from"./chunk-
|
|
1
|
+
import{a as e,b as m,c as t,d as o,e as r,f as s,g as h,h as T,i as n,j as l,k as d,l as p,m as i,n as a,o as f,p as v,q as x}from"./chunk-ZYMZVPDT.js";import"./chunk-6J7D73WA.js";import"./chunk-NJNFZ2EG.js";import"./chunk-KMNACVH6.js";import"./chunk-PFXFESEN.js";export{T as $resolvedTheme,s as $theme,f as MantleThemeHeadContent,t as PreloadCoreFonts,l as ThemeProvider,e as assetsCdnOrigin,m as fontHref,x as getStoredTheme,n as isResolvedTheme,h as isTheme,a as preventWrongThemeFlashScriptContent,p as readThemeFromHtmlElement,o as resolvedThemes,r as themes,i as useAppliedTheme,v as useInitialHtmlThemeProps,d as useTheme};
|
|
2
2
|
//# sourceMappingURL=theme.js.map
|
package/dist/toast.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a as o,b as t,c as r}from"./chunk-
|
|
1
|
+
import{a as o,b as t,c as r}from"./chunk-A3JO5HCY.js";import"./chunk-ZYMZVPDT.js";import"./chunk-6J7D73WA.js";import"./chunk-NJNFZ2EG.js";import"./chunk-KMNACVH6.js";import"./chunk-SBVSECWW.js";import"./chunk-ODDNPNLN.js";import"./chunk-NZ6DRFAL.js";import"./chunk-PFXFESEN.js";export{r as Toast,o as Toaster,t as makeToast};
|
|
2
2
|
//# sourceMappingURL=toast.js.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ngrok/mantle",
|
|
3
|
-
"version": "0.61.
|
|
3
|
+
"version": "0.61.2",
|
|
4
4
|
"description": "mantle is ngrok's UI library and design system.",
|
|
5
5
|
"homepage": "https://mantle.ngrok.com",
|
|
6
6
|
"license": "MIT",
|
|
@@ -307,7 +307,7 @@
|
|
|
307
307
|
"@types/react-dom": "18.3.7",
|
|
308
308
|
"browserslist": "4.28.1",
|
|
309
309
|
"date-fns": "4.1.0",
|
|
310
|
-
"happy-dom": "20.
|
|
310
|
+
"happy-dom": "20.5.0",
|
|
311
311
|
"react": "18.3.1",
|
|
312
312
|
"react-dom": "18.3.1",
|
|
313
313
|
"react-router": "7.13.0",
|
|
@@ -322,7 +322,7 @@
|
|
|
322
322
|
"react": "^18 || ^19",
|
|
323
323
|
"react-dom": "^18 || ^19",
|
|
324
324
|
"react-router": "^7",
|
|
325
|
-
"tailwindcss": "^4.1.
|
|
325
|
+
"tailwindcss": "^4.1.18"
|
|
326
326
|
},
|
|
327
327
|
"browserslist": [
|
|
328
328
|
"last 2 years, not dead, > 0.2%"
|
package/dist/chunk-B2CXQETQ.js
DELETED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{a as F}from"./chunk-6J7D73WA.js";import{b as f}from"./chunk-NJNFZ2EG.js";import{a as U}from"./chunk-PFXFESEN.js";import{Fragment as j,jsx as A}from"react/jsx-runtime";var J="https://assets.ngrok.com",z=`${J}/fonts`,X=["/euclid-square/EuclidSquare-Regular-WebS.woff","/euclid-square/EuclidSquare-RegularItalic-WebS.woff","/euclid-square/EuclidSquare-Medium-WebS.woff","/euclid-square/EuclidSquare-MediumItalic-WebS.woff","/ibm-plex-mono/IBMPlexMono-Text.woff","/ibm-plex-mono/IBMPlexMono-TextItalic.woff","/ibm-plex-mono/IBMPlexMono-SemiBold.woff","/ibm-plex-mono/IBMPlexMono-SemiBoldItalic.woff"];function Z(e){let t=e.startsWith("/")?e:`/${e}`;return`${z}${t}`}var _=()=>A(j,{children:X.map(e=>A("link",{rel:"preload",href:Z(e),as:"font",type:"font/woff",crossOrigin:"anonymous"},e))});_.displayName="PreloadCoreFonts";var k=["light","dark","light-high-contrast","dark-high-contrast"],I=["system",...k],ve=e=>e;function w(e){return typeof e!="string"?!1:I.includes(e)}var ye=e=>e;function L(e){return typeof e!="string"?!1:k.includes(e)}import{createContext as ee,useContext as Q,useEffect as te,useMemo as K,useRef as ne,useState as oe}from"react";import re from"tiny-invariant";import{Fragment as pe,jsx as x,jsxs as Te}from"react/jsx-runtime";var M="(prefers-color-scheme: dark)",S="(prefers-contrast: more)",g="mantle-ui-theme",C="system",se=["system",()=>null],B=ee(se);function ie({children:e}){let[t,o]=oe(()=>{let n=D({cookie:f()?document.cookie:null});return W(n),n}),r=ne(null);te(()=>{function n(c){let m=c??D({cookie:document.cookie});o(m),W(m)}n();try{"BroadcastChannel"in window&&(r.current=new BroadcastChannel(g),r.current.onmessage=c=>{let m=c?.data?.theme;w(m)&&n(m)})}catch{}function u(c){c.key===`${g}__ping`&&n()}window.addEventListener("storage",u);let a=window.matchMedia(M),p=window.matchMedia(S);function l(){n()}function v(){document.visibilityState==="visible"&&n()}return a.addEventListener("change",l),p.addEventListener("change",l),window.addEventListener("pageshow",l),document.addEventListener("visibilitychange",v),()=>{window.removeEventListener("storage",u),a.removeEventListener("change",l),p.removeEventListener("change",l),window.removeEventListener("pageshow",l),document.removeEventListener("visibilitychange",v);try{r.current?.close()}catch{}r.current=null}},[]);let i=K(()=>[t,n=>{ue(n),o(n),W(n),le(n,{broadcastChannel:r.current,pingKey:`${g}__ping`})}],[t]);return x(B.Provider,{value:i,children:e})}ie.displayName="ThemeProvider";function xe(){let e=Q(B);return re(e,"useTheme must be used within a ThemeProvider"),e}function W(e){if(!f())return;let t=window.document.documentElement,o=window.matchMedia(M).matches,r=window.matchMedia(S).matches,i=O(e,{prefersDarkMode:o,prefersHighContrast:r}),n=t.dataset.theme,u=t.dataset.appliedTheme,a=w(n)?n:void 0,p=L(u)?u:void 0;a===e&&p===i||(t.classList.remove(...k),t.classList.add(i),t.dataset.theme=e,t.dataset.appliedTheme=i)}function He(){if(!f())return{appliedTheme:void 0,theme:void 0};let e=window.document.documentElement,t=w(e.dataset.theme)?e.dataset.theme:void 0;return{appliedTheme:L(e.dataset.appliedTheme)?e.dataset.appliedTheme:void 0,theme:t}}function O(e,{prefersDarkMode:t,prefersHighContrast:o}){return e==="system"?ae({prefersDarkMode:t,prefersHighContrast:o}):e}function Re(){let e=Q(B),t=e!=null?e[0]:"system",o=F(M),r=F(S);return O(t,{prefersDarkMode:o,prefersHighContrast:r})}function ae({prefersDarkMode:e,prefersHighContrast:t}){return t?e?"dark-high-contrast":"light-high-contrast":e?"dark":"light"}function me(e){let{storageKey:t,defaultTheme:o,themes:r,resolvedThemes:i,prefersDarkModeMediaQuery:n,prefersHighContrastMediaQuery:u}=e;function a(s){return typeof s=="string"&&r.includes(s)}function p(s){let h=document.cookie;if(!h)return null;try{let E=h.split(";").find($=>$.trim().startsWith(`${s}=`))?.split("=")[1];return E?decodeURIComponent(E):null}catch{return null}}function l(s,h){let d=new Date;d.setFullYear(d.getFullYear()+1);let R=location.hostname,E=location.protocol,N=R==="ngrok.com"||R.endsWith(".ngrok.com")?"; domain=.ngrok.com":"",$=E==="https:"?"; Secure":"";return`${s}=${encodeURIComponent(h)}; expires=${d.toUTCString()}; path=/${N}; SameSite=Lax${$}`}function v(s,h){try{document.cookie=l(s,h)}catch{}}function c(s,h,d){return s==="system"?d?h?"dark-high-contrast":"light-high-contrast":h?"dark":"light":s}let m=null,y=null,P=null;try{m=p(t)}catch{}if(a(m))P=m;else{try{y=window.localStorage?.getItem(t)??null}catch{}a(y)&&(P=y)}let b=a(P)?P:o,Y=matchMedia(n).matches,G=matchMedia(u).matches,H=c(b,Y,G),T=document.documentElement;if(T.dataset.appliedTheme!==H||T.dataset.theme!==b){for(let s of i)T.classList.remove(s);T.classList.add(H),T.dataset.theme=b,T.dataset.appliedTheme=H}let q=a(m);try{if(a(y)&&!q){v(t,y);try{window.localStorage.removeItem(t)}catch{}}else q||v(t,b)}catch{}}function ce(){let e={storageKey:g,defaultTheme:C,themes:I,resolvedThemes:k,prefersDarkModeMediaQuery:M,prefersHighContrastMediaQuery:S};return`(${me.toString()})(${JSON.stringify(e)})`}var V=({nonce:e})=>x("script",{dangerouslySetInnerHTML:{__html:ce()},nonce:e,suppressHydrationWarning:!0});V.displayName="PreventWrongThemeFlashScript";var he=({nonce:e})=>Te(pe,{children:[x(V,{nonce:e}),x(_,{})]});he.displayName="MantleThemeHeadContent";function $e(e={}){let{className:t=""}=e??{};return K(()=>{let o,r;if(!f())o=C,r="light";else{let i=window.matchMedia(M).matches,n=window.matchMedia(S).matches;o=D({cookie:document.cookie}),r=O(o,{prefersDarkMode:i,prefersHighContrast:n})}return{className:U(t,r),"data-applied-theme":r,"data-theme":o}},[t])}function D({cookie:e}){if(!e)return C;try{let r=e.split(";").find(n=>n.trim().startsWith(`${g}=`))?.split("=")[1],i=r?globalThis.decodeURIComponent(r):null;return w(i)?i:C}catch{return C}}function le(e,t){let{broadcastChannel:o,pingKey:r}=t;try{if(o){o.postMessage({theme:e,timestamp:Date.now()});return}}catch{}try{localStorage.setItem(r,JSON.stringify({theme:e,timestamp:Date.now()}))}catch{}}function de(e){let t=new Date;t.setFullYear(t.getFullYear()+1);let{hostname:o,protocol:r}=window.location,i=o==="ngrok.com"||o.endsWith(".ngrok.com")?"; domain=.ngrok.com":"",n=r==="https:"?"; Secure":"";return`${g}=${encodeURIComponent(e)}; expires=${t.toUTCString()}; path=/${i}; SameSite=Lax${n}`}function ue(e){if(f())try{document.cookie=de(e)}catch{}}export{J as a,Z as b,_ as c,k as d,I as e,ve as f,w as g,ye as h,L as i,ie as j,xe as k,He as l,Re as m,ce as n,he as o,$e as p,D as q};
|
|
2
|
-
//# sourceMappingURL=chunk-B2CXQETQ.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/theme/fonts.tsx","../src/components/theme/themes.ts","../src/components/theme/theme-provider.tsx"],"sourcesContent":["/**\n * @fileoverview Helpers for preloading ngrok brand fonts from the CDN.\n * All font URLs resolve to `${assetsCdnOrigin}/fonts`.\n */\n\n/**\n * The origin for the assets CDN where custom ngrok fonts and assets are hosted.\n *\n * Keep this stable across the app so we can preconnect/DNS-prefetch consistently.\n * @public\n */\nconst assetsCdnOrigin = \"https://assets.ngrok.com\";\n\n/**\n * Base path for font assets on the CDN.\n * @internal\n */\nconst cdnBase = `${assetsCdnOrigin}/fonts`;\n\n/**\n * Canonical list of core font paths (relative to the CDN fonts base).\n */\nconst coreFonts = [\n\t\"/euclid-square/EuclidSquare-Regular-WebS.woff\",\n\t\"/euclid-square/EuclidSquare-RegularItalic-WebS.woff\",\n\t\"/euclid-square/EuclidSquare-Medium-WebS.woff\",\n\t\"/euclid-square/EuclidSquare-MediumItalic-WebS.woff\",\n\t\"/ibm-plex-mono/IBMPlexMono-Text.woff\",\n\t\"/ibm-plex-mono/IBMPlexMono-TextItalic.woff\",\n\t\"/ibm-plex-mono/IBMPlexMono-SemiBold.woff\",\n\t\"/ibm-plex-mono/IBMPlexMono-SemiBoldItalic.woff\",\n] as const;\n\ntype FontPath = `/${string}` | (string & {});\n\n/**\n * Builds an absolute CDN URL for a given font.\n *\n * @returns {`https://assets.ngrok.com/fonts${T}`} An absolute, literal-typed CDN URL.\n *\n * @example\n * const href = fontHref(\"/euclid-square/EuclidSquare-Regular-WebS.woff\");\n * // -> \"https://assets.ngrok.com/fonts/euclid-square/EuclidSquare-Regular-WebS.woff\"\n */\nfunction fontHref<T extends FontPath = FontPath>(font: T) {\n\tconst path = font.startsWith(\"/\") ? font : `/${font}`;\n\treturn `${cdnBase}${path}` as const;\n}\n\n/**\n * Preload core fonts used in the mantle theme.\n *\n * Include this as early as possible in the document `<head>` so text renders\n * with the intended face without layout shifts. Uses `crossOrigin=\"anonymous\"`\n * so the browser can cache and reuse the font across origins.\n *\n * @remarks\n * For best performance, pair this with preconnect/dns-prefetch hints to the CDN.\n *\n * This is automatically included in `<MantleThemeHeadContent />`.\n *\n * @example\n * ```tsx\n * <head>\n * <meta charSet=\"utf-8\" />\n * <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n *\n * // Preconnect and DNS-prefetch to the assets CDN\n * // either here or in app root headers\n * <link rel=\"preconnect\" href={assetsCdnOrigin} crossOrigin=\"anonymous\" />\n * <link rel=\"dns-prefetch\" href={assetsCdnOrigin} />\n *\n * <PreventWrongThemeFlashScript />\n * <PreloadCoreFonts />\n * // ... other head elements ...\n * </head>\n * ```\n */\nconst PreloadCoreFonts = () => (\n\t<>\n\t\t{coreFonts.map((font) => (\n\t\t\t<link\n\t\t\t\tkey={font}\n\t\t\t\trel=\"preload\"\n\t\t\t\thref={fontHref(font)}\n\t\t\t\tas=\"font\"\n\t\t\t\ttype=\"font/woff\"\n\t\t\t\tcrossOrigin=\"anonymous\"\n\t\t\t/>\n\t\t))}\n\t</>\n);\nPreloadCoreFonts.displayName = \"PreloadCoreFonts\";\n\nexport {\n\t//,\n\tassetsCdnOrigin,\n\tfontHref,\n\tPreloadCoreFonts,\n};\n","/**\n * resolvedThemes is a tuple of valid themes that have been resolved from \"system\" to a specific theme.\n */\nconst resolvedThemes = [\"light\", \"dark\", \"light-high-contrast\", \"dark-high-contrast\"] as const;\n\n/**\n * ResolvedTheme is a type that represents a theme that has been resolved from \"system\" to a specific theme.\n */\ntype ResolvedTheme = (typeof resolvedThemes)[number];\n\n/**\n * themes is a tuple of valid themes.\n */\nconst themes = [\"system\", ...resolvedThemes] as const;\n\n/**\n * Theme is a string literal type that represents a valid theme.\n */\ntype Theme = (typeof themes)[number];\n\n/**\n * $theme is a helper which translates the Theme type into a string literal type.\n */\nconst $theme = <T extends Theme = Theme>(value: T) => value;\n\n/**\n * Type predicate that checks if a value is a valid theme.\n */\nfunction isTheme(value: unknown): value is Theme {\n\tif (typeof value !== \"string\") {\n\t\treturn false;\n\t}\n\n\treturn themes.includes(value as Theme);\n}\n\n/**\n * $resolvedTheme is a helper which translates the ResolvedTheme type into a string literal type.\n */\nconst $resolvedTheme = <T extends ResolvedTheme = ResolvedTheme>(value: T) => value;\n\n/**\n * Type predicate that checks if a value is a valid resolved theme.\n */\nfunction isResolvedTheme(value: unknown): value is ResolvedTheme {\n\tif (typeof value !== \"string\") {\n\t\treturn false;\n\t}\n\n\treturn resolvedThemes.includes(value as ResolvedTheme);\n}\n\nexport {\n\t//,\n\tthemes,\n\tresolvedThemes,\n\t$resolvedTheme,\n\t$theme,\n\tisResolvedTheme,\n\tisTheme,\n};\n\nexport type {\n\t//,\n\tTheme,\n\tResolvedTheme,\n};\n","\"use client\";\n\nimport type { PropsWithChildren } from \"react\";\nimport { createContext, useContext, useEffect, useMemo, useRef, useState } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { useMatchesMediaQuery } from \"../../hooks/use-matches-media-query.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { canUseDOM } from \"../browser-only/browser-only.js\";\nimport { PreloadCoreFonts } from \"./fonts.js\";\nimport {\n\ttype ResolvedTheme,\n\ttype Theme,\n\tisResolvedTheme,\n\tisTheme,\n\tresolvedThemes,\n\tthemes,\n} from \"./themes.js\";\n\n/**\n * prefersDarkModeMediaQuery is the media query used to detect if the user prefers dark mode.\n */\nconst prefersDarkModeMediaQuery = \"(prefers-color-scheme: dark)\";\n\n/**\n * prefersHighContrastMediaQuery is the media query used to detect if the user prefers high contrast mode.\n */\nconst prefersHighContrastMediaQuery = \"(prefers-contrast: more)\";\n\n/**\n * THEME_STORAGE_KEY is the key used to store the theme in cookies.\n */\nconst THEME_STORAGE_KEY = \"mantle-ui-theme\";\n\n/**\n * DEFAULT_THEME is the initial theme to apply if no value is found in storage.\n * {@link themes}\n */\nconst DEFAULT_THEME = \"system\" satisfies Theme;\n\n/**\n * ThemeProviderState is the shape of the state returned by the ThemeProviderContext.\n */\ntype ThemeProviderState = [theme: Theme, setTheme: (theme: Theme) => void];\n\n/**\n * Initial state for the ThemeProviderContext.\n */\nconst initialState: ThemeProviderState = [\"system\", () => null];\n\n/**\n * ThemeProviderContext is a React Context that provides the current theme and a function to set the theme.\n */\nconst ThemeProviderContext = createContext<ThemeProviderState | null>(initialState);\n\ntype ThemeProviderProps = PropsWithChildren;\n\n/**\n * ThemeProvider is a React Context Provider that provides the current theme and a function to set the theme.\n *\n * @see https://mantle.ngrok.com/components/theme-provider#api-theme-provider\n *\n * @example\n * ```tsx\n * <ThemeProvider defaultTheme=\"system\" storageKey=\"app-theme\">\n * <App />\n * </ThemeProvider>\n * ```\n */\nfunction ThemeProvider({ children }: ThemeProviderProps) {\n\t// Init once from cookie and apply immediately to avoid flashes\n\tconst [theme, setTheme] = useState<Theme>(() => {\n\t\tconst storedTheme = getStoredTheme({\n\t\t\tcookie: canUseDOM() ? document.cookie : null,\n\t\t});\n\t\tapplyThemeToHtml(storedTheme);\n\t\treturn storedTheme;\n\t});\n\n\tconst broadcastChannelRef = useRef<BroadcastChannel | null>(null);\n\n\tuseEffect(() => {\n\t\tfunction syncThemeFromCookie(next?: Theme) {\n\t\t\tconst newTheme = next ?? getStoredTheme({ cookie: document.cookie });\n\t\t\tsetTheme(newTheme);\n\t\t\tapplyThemeToHtml(newTheme);\n\t\t}\n\n\t\t// initial sync in case defaultTheme or storageKey changed\n\t\tsyncThemeFromCookie();\n\n\t\t// add cross-tab listeners (prefer broadcast channel, use localStorage as fallback)\n\t\ttry {\n\t\t\tif (\"BroadcastChannel\" in window) {\n\t\t\t\tbroadcastChannelRef.current = new BroadcastChannel(THEME_STORAGE_KEY);\n\t\t\t\tbroadcastChannelRef.current.onmessage = (event) => {\n\t\t\t\t\tconst value: unknown = event?.data?.theme;\n\t\t\t\t\tif (isTheme(value)) {\n\t\t\t\t\t\tsyncThemeFromCookie(value);\n\t\t\t\t\t}\n\t\t\t\t};\n\t\t\t}\n\t\t\t// oxlint-disable-next-line no-unused-vars\n\t\t} catch (_) {\n\t\t\t// silently swallow errors\n\t\t}\n\n\t\tfunction onStorage(event: StorageEvent) {\n\t\t\tif (event.key === `${THEME_STORAGE_KEY}__ping`) {\n\t\t\t\tsyncThemeFromCookie();\n\t\t\t}\n\t\t}\n\t\twindow.addEventListener(\"storage\", onStorage);\n\n\t\t// add media query listeners for system theme changes\n\t\tconst prefersDarkMql = window.matchMedia(prefersDarkModeMediaQuery);\n\t\tconst prefersHighContrastMql = window.matchMedia(prefersHighContrastMediaQuery);\n\n\t\tfunction onChange() {\n\t\t\tsyncThemeFromCookie();\n\t\t}\n\n\t\tfunction onVisibilityChange() {\n\t\t\tif (document.visibilityState === \"visible\") {\n\t\t\t\tsyncThemeFromCookie();\n\t\t\t}\n\t\t}\n\n\t\tprefersDarkMql.addEventListener(\"change\", onChange);\n\t\tprefersHighContrastMql.addEventListener(\"change\", onChange);\n\n\t\t// pageshow fires on bfcache restore (event.persisted === true) and some restore-from-freeze cases.\n\t\twindow.addEventListener(\"pageshow\", onChange);\n\n\t\t// visibilitychange to handle coming back to a tab\n\t\tdocument.addEventListener(\"visibilitychange\", onVisibilityChange);\n\n\t\t// don't forget to clean up your slop!\n\t\treturn () => {\n\t\t\twindow.removeEventListener(\"storage\", onStorage);\n\t\t\tprefersDarkMql.removeEventListener(\"change\", onChange);\n\t\t\tprefersHighContrastMql.removeEventListener(\"change\", onChange);\n\t\t\twindow.removeEventListener(\"pageshow\", onChange);\n\t\t\tdocument.removeEventListener(\"visibilitychange\", onVisibilityChange);\n\n\t\t\ttry {\n\t\t\t\tbroadcastChannelRef.current?.close();\n\t\t\t\t// oxlint-disable-next-line no-unused-vars\n\t\t\t} catch (_) {\n\t\t\t\t// silently swallow errors\n\t\t\t}\n\t\t\tbroadcastChannelRef.current = null;\n\t\t};\n\t}, []);\n\n\tconst value: ThemeProviderState = useMemo(\n\t\t() => [\n\t\t\ttheme,\n\t\t\t(next: Theme) => {\n\t\t\t\tsetCookie(next);\n\t\t\t\tsetTheme(next);\n\t\t\t\tapplyThemeToHtml(next);\n\t\t\t\tnotifyOtherTabs(next, {\n\t\t\t\t\tbroadcastChannel: broadcastChannelRef.current,\n\t\t\t\t\tpingKey: `${THEME_STORAGE_KEY}__ping`,\n\t\t\t\t});\n\t\t\t},\n\t\t],\n\t\t[theme],\n\t);\n\n\treturn <ThemeProviderContext.Provider value={value}>{children}</ThemeProviderContext.Provider>;\n}\nThemeProvider.displayName = \"ThemeProvider\";\n\n/**\n * useTheme returns the current theme and a function to set the theme.\n *\n * @note This function will throw an error if used outside of a ThemeProvider context tree.\n */\nfunction useTheme() {\n\tconst context = useContext(ThemeProviderContext);\n\n\tinvariant(context, \"useTheme must be used within a ThemeProvider\");\n\n\treturn context;\n}\n\n/**\n * Applies the given theme to the `<html>` element.\n */\nfunction applyThemeToHtml(theme: Theme) {\n\tif (!canUseDOM()) {\n\t\treturn;\n\t}\n\n\tconst html = window.document.documentElement;\n\n\tconst prefersDarkMode = window.matchMedia(prefersDarkModeMediaQuery).matches;\n\tconst prefersHighContrast = window.matchMedia(prefersHighContrastMediaQuery).matches;\n\n\tconst resolvedTheme = resolveTheme(theme, {\n\t\tprefersDarkMode,\n\t\tprefersHighContrast,\n\t});\n\n\tconst htmlTheme = html.dataset.theme;\n\tconst htmlAppliedTheme = html.dataset.appliedTheme;\n\n\tconst currentTheme = isTheme(htmlTheme) ? htmlTheme : undefined;\n\tconst currentResolvedTheme = isResolvedTheme(htmlAppliedTheme) ? htmlAppliedTheme : undefined;\n\n\tif (currentTheme === theme && currentResolvedTheme === resolvedTheme) {\n\t\t// nothing to do: input theme and resolved class already match\n\t\treturn;\n\t}\n\n\t// Clear any stale theme class, then apply the new one\n\thtml.classList.remove(...resolvedThemes); // ✅ remove all potential theme classes\n\thtml.classList.add(resolvedTheme);\n\thtml.dataset.theme = theme;\n\thtml.dataset.appliedTheme = resolvedTheme;\n}\n\n/**\n * Read the theme and applied theme from the `<html>` element.\n */\nfunction readThemeFromHtmlElement() {\n\tif (!canUseDOM()) {\n\t\treturn {\n\t\t\tappliedTheme: undefined,\n\t\t\ttheme: undefined,\n\t\t};\n\t}\n\n\tconst htmlElement = window.document.documentElement;\n\tconst theme = isTheme(htmlElement.dataset.theme) ? htmlElement.dataset.theme : undefined;\n\tconst appliedTheme = isResolvedTheme(htmlElement.dataset.appliedTheme)\n\t\t? htmlElement.dataset.appliedTheme\n\t\t: undefined;\n\n\treturn {\n\t\tappliedTheme,\n\t\ttheme,\n\t};\n}\n\n/**\n * If the theme is \"system\", it will resolve the theme based on the user's media query preferences, otherwise it will return the theme as is.\n * This will mirror the result that gets applied to the <html> element.\n */\nfunction resolveTheme(\n\ttheme: Theme,\n\t{\n\t\tprefersDarkMode,\n\t\tprefersHighContrast,\n\t}: { prefersDarkMode: boolean; prefersHighContrast: boolean },\n) {\n\tif (theme === \"system\") {\n\t\treturn determineThemeFromMediaQuery({\n\t\t\tprefersDarkMode,\n\t\t\tprefersHighContrast,\n\t\t});\n\t}\n\n\treturn theme;\n}\n\n/**\n * If the theme is \"system\", it will resolve the theme based on the user's media query preferences, otherwise it will return the theme as is.\n * This will mirror the result that gets applied to the <html> element.\n */\nfunction useAppliedTheme() {\n\tconst themeContext = useContext(ThemeProviderContext);\n\tconst theme = themeContext != null ? themeContext[0] : \"system\";\n\n\tconst prefersDarkMode = useMatchesMediaQuery(prefersDarkModeMediaQuery);\n\tconst prefersHighContrast = useMatchesMediaQuery(prefersHighContrastMediaQuery);\n\n\treturn resolveTheme(theme, { prefersDarkMode, prefersHighContrast });\n}\n\n/**\n * determineThemeFromMediaQuery returns the theme that should be used based on the user's media query preferences.\n * @private\n *\n * @example\n * ```tsx\n * const theme = determineThemeFromMediaQuery({\n * prefersDarkMode: true,\n * prefersHighContrast: false\n * });\n * // Returns: \"dark\"\n *\n * const themeWithContrast = determineThemeFromMediaQuery({\n * prefersDarkMode: false,\n * prefersHighContrast: true\n * });\n * // Returns: \"light-high-contrast\"\n * ```\n */\nexport function determineThemeFromMediaQuery({\n\tprefersDarkMode,\n\tprefersHighContrast,\n}: {\n\tprefersDarkMode: boolean;\n\tprefersHighContrast: boolean;\n}): ResolvedTheme {\n\tif (prefersHighContrast) {\n\t\treturn prefersDarkMode ? \"dark-high-contrast\" : \"light-high-contrast\";\n\t}\n\n\treturn prefersDarkMode ? \"dark\" : \"light\";\n}\n\n/**\n * Script that runs synchronously to prevent FOUC by applying the correct theme\n * before the page renders. This is the actual function that gets stringified and inlined.\n */\nfunction preventThemeFlash(args: {\n\tstorageKey: string;\n\tdefaultTheme: Theme;\n\tthemes: readonly Theme[];\n\tresolvedThemes: readonly ResolvedTheme[];\n\tprefersDarkModeMediaQuery: string;\n\tprefersHighContrastMediaQuery: string;\n}) {\n\tconst {\n\t\tstorageKey,\n\t\tdefaultTheme,\n\t\tthemes,\n\t\tresolvedThemes,\n\t\tprefersDarkModeMediaQuery,\n\t\tprefersHighContrastMediaQuery,\n\t} = args;\n\n\tfunction isTheme(value: unknown): value is Theme {\n\t\treturn typeof value === \"string\" && themes.includes(value as Theme);\n\t}\n\n\tfunction getThemeFromCookie(name: string): string | null {\n\t\tconst cookie = document.cookie;\n\t\tif (!cookie) {\n\t\t\treturn null;\n\t\t}\n\n\t\ttry {\n\t\t\tconst cookies = cookie.split(\";\");\n\t\t\tconst themeCookie = cookies.find((c) => c.trim().startsWith(`${name}=`));\n\t\t\tconst cookieValue = themeCookie?.split(\"=\")[1];\n\t\t\tconst storedTheme = cookieValue ? decodeURIComponent(cookieValue) : null;\n\t\t\treturn storedTheme;\n\t\t\t// oxlint-disable-next-line no-unused-vars\n\t\t} catch (_) {\n\t\t\treturn null;\n\t\t}\n\t}\n\n\tfunction buildCookie(name: string, val: string): string {\n\t\tconst expires = new Date();\n\t\texpires.setFullYear(expires.getFullYear() + 1);\n\t\tconst hostname = location.hostname;\n\t\tconst protocol = location.protocol;\n\t\tconst domainAttribute =\n\t\t\thostname === \"ngrok.com\" || hostname.endsWith(\".ngrok.com\") ? \"; domain=.ngrok.com\" : \"\";\n\t\tconst secureAttribute = protocol === \"https:\" ? \"; Secure\" : \"\";\n\t\treturn `${name}=${encodeURIComponent(val)}; expires=${expires.toUTCString()}; path=/${domainAttribute}; SameSite=Lax${secureAttribute}`;\n\t}\n\n\tfunction writeCookie(name: string, val: string): void {\n\t\ttry {\n\t\t\tdocument.cookie = buildCookie(name, val);\n\t\t\t// oxlint-disable-next-line no-unused-vars\n\t\t} catch (_) {\n\t\t\t// silently swallow errors\n\t\t}\n\t}\n\n\tfunction resolveThemeValue(\n\t\ttheme: Theme,\n\t\tisDark: boolean,\n\t\tisHighContrast: boolean,\n\t): ResolvedTheme {\n\t\tif (theme === \"system\") {\n\t\t\tif (isHighContrast) {\n\t\t\t\treturn isDark ? \"dark-high-contrast\" : \"light-high-contrast\";\n\t\t\t}\n\t\t\treturn isDark ? \"dark\" : \"light\";\n\t\t}\n\t\treturn theme;\n\t}\n\n\t// 1) Read preference: cookie first, fallback to localStorage (migration support)\n\tlet cookieTheme: string | null = null;\n\tlet lsTheme: string | null = null;\n\tlet storedTheme: Theme | null = null;\n\n\ttry {\n\t\tcookieTheme = getThemeFromCookie(storageKey);\n\t\t// oxlint-disable-next-line no-unused-vars\n\t} catch (_) {\n\t\t// silently swallow errors\n\t}\n\n\tif (isTheme(cookieTheme)) {\n\t\tstoredTheme = cookieTheme;\n\t} else {\n\t\ttry {\n\t\t\tlsTheme = window.localStorage?.getItem(storageKey) ?? null;\n\t\t\t// oxlint-disable-next-line no-unused-vars\n\t\t} catch (_) {\n\t\t\t// silently swallow errors\n\t\t}\n\t\tif (isTheme(lsTheme)) {\n\t\t\tstoredTheme = lsTheme;\n\t\t}\n\t}\n\n\tconst preference = isTheme(storedTheme) ? storedTheme : defaultTheme;\n\n\t// 2) Resolve theme based on media queries\n\tconst isDark = matchMedia(prefersDarkModeMediaQuery).matches;\n\tconst isHighContrast = matchMedia(prefersHighContrastMediaQuery).matches;\n\tconst resolvedTheme = resolveThemeValue(preference, isDark, isHighContrast);\n\n\tconst html = document.documentElement;\n\t// 3) Apply theme to DOM (same order as applyThemeToHtml)\n\tif (html.dataset.appliedTheme !== resolvedTheme || html.dataset.theme !== preference) {\n\t\t// Remove all theme classes\n\t\tfor (const themeClass of resolvedThemes as readonly string[]) {\n\t\t\thtml.classList.remove(themeClass);\n\t\t}\n\t\t// Add resolved theme class\n\t\thtml.classList.add(resolvedTheme);\n\t\t// Set data attributes\n\t\thtml.dataset.theme = preference;\n\t\thtml.dataset.appliedTheme = resolvedTheme;\n\t}\n\n\t// 4) Handle persistence/migration synchronously to prevent FOUC\n\tconst hadValidCookie = isTheme(cookieTheme);\n\ttry {\n\t\tif (isTheme(lsTheme) && !hadValidCookie) {\n\t\t\t// Migrate from localStorage to cookie\n\t\t\twriteCookie(storageKey, lsTheme);\n\t\t\ttry {\n\t\t\t\twindow.localStorage.removeItem(storageKey);\n\t\t\t\t// oxlint-disable-next-line no-unused-vars\n\t\t\t} catch (_) {\n\t\t\t\t// silently swallow errors\n\t\t\t}\n\t\t} else if (!hadValidCookie) {\n\t\t\t// Set default cookie if none existed\n\t\t\twriteCookie(storageKey, preference);\n\t\t}\n\t\t// oxlint-disable-next-line no-unused-vars\n\t} catch (_) {\n\t\t// silently swallow errors\n\t}\n}\n\n/**\n * preventWrongThemeFlashScriptContent generates a script that prevents the wrong theme from flashing on initial page load.\n * It checks cookies for a stored theme, and if none is found, it sets the default theme.\n * It also applies the correct theme to the `<html>` element based on the user's media query preferences.\n */\nfunction preventWrongThemeFlashScriptContent() {\n\tconst args = {\n\t\tstorageKey: THEME_STORAGE_KEY,\n\t\tdefaultTheme: DEFAULT_THEME,\n\t\tthemes,\n\t\tresolvedThemes,\n\t\tprefersDarkModeMediaQuery,\n\t\tprefersHighContrastMediaQuery,\n\t} as const satisfies Parameters<typeof preventThemeFlash>[0];\n\n\treturn `(${preventThemeFlash.toString()})(${JSON.stringify(args)})`;\n}\n\ntype MantleThemeHeadContentProps = {\n\t/**\n\t * An optional CSP nonce to allowlist this inline script. Using this can help\n\t * you to avoid using the CSP `unsafe-inline` directive, which disables\n\t * XSS protection and would allowlist all inline scripts or styles.\n\t *\n\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/nonce\n\t */\n\tnonce?: string;\n};\n\nexport type PreventWrongThemeFlashScriptProps = MantleThemeHeadContentProps;\n\n/**\n * Renders an inline script that prevents Flash of Unstyled Content (FOUC) or the\n * wrong theme flashing on first paint.\n *\n * Use this when you want full control of the `<head>` contents. For a packaged,\n * one-stop solution that also handles font preloads, use {@link MantleThemeHeadContent}.\n * To add font preloads alongside this script, pair it with {@link PreloadCoreFonts}.\n *\n * Place this as early as possible in the `<head>`.\n *\n * @example\n * ```tsx\n * <head>\n * <PreventWrongThemeFlashScript nonce={nonce} />\n * <PreloadCoreFonts />\n * </head>\n * ```\n *\n * @param nonce - Optional CSP nonce to allowlist the inline script under a strict CSP.\n * @returns {JSX.Element} A script tag injected before first paint.\n * @see PreloadCoreFonts\n * @see MantleThemeHeadContent\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce\n */\nconst PreventWrongThemeFlashScript = ({ nonce }: PreventWrongThemeFlashScriptProps) => (\n\t<script\n\t\tdangerouslySetInnerHTML={{\n\t\t\t__html: preventWrongThemeFlashScriptContent(),\n\t\t}}\n\t\tnonce={nonce}\n\t\tsuppressHydrationWarning\n\t/>\n);\nPreventWrongThemeFlashScript.displayName = \"PreventWrongThemeFlashScript\";\n\n/**\n * Renders the Mantle theme `<head>` content:\n * - an inline script to prevent FOUC / wrong-theme flash, and\n * - preload links for the core fonts.\n *\n * Use this when you want the one-liner that “just works.”\n * If you prefer fine-grained control, use {@link PreventWrongThemeFlashScript}\n * and {@link PreloadCoreFonts} directly.\n *\n * Place this as early as possible in the `<head>` so it runs before first paint\n * and fonts start fetching ASAP.\n *\n * @example\n * ```tsx\n * <head>\n * // Performance hints for the CDN (recommended)\n * <link rel=\"preconnect\" href={assetsCdnOrigin} crossOrigin=\"anonymous\" />\n * <link rel=\"dns-prefetch\" href={assetsCdnOrigin} />\n *\n * <MantleThemeHeadContent nonce={nonce} />\n * </head>\n * ```\n *\n * @param nonce - Optional CSP nonce to allowlist the inline script under a strict CSP.\n * @returns JSX.Element fragment containing the script and font preloads.\n * @see PreventWrongThemeFlashScript\n * @see PreloadCoreFonts\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce\n */\nconst MantleThemeHeadContent = ({ nonce }: MantleThemeHeadContentProps) => (\n\t<>\n\t\t<PreventWrongThemeFlashScript nonce={nonce} />\n\t\t<PreloadCoreFonts />\n\t</>\n);\nMantleThemeHeadContent.displayName = \"MantleThemeHeadContent\";\n\ntype InitialThemeProps = {\n\tclassName: string;\n\t\"data-applied-theme\": ResolvedTheme;\n\t\"data-theme\": Theme;\n};\n\ntype UseInitialHtmlThemePropsOptions = {\n\tclassName?: string;\n};\n\n/**\n * useInitialHtmlThemeProps returns the initial props that should be applied to the <html> element to prevent react hydration errors.\n */\nfunction useInitialHtmlThemeProps(props: UseInitialHtmlThemePropsOptions = {}): InitialThemeProps {\n\tconst { className = \"\" } = props ?? {};\n\n\treturn useMemo(() => {\n\t\tlet initialTheme: Theme;\n\t\tlet resolvedTheme: ResolvedTheme;\n\n\t\tif (!canUseDOM()) {\n\t\t\tinitialTheme = DEFAULT_THEME;\n\t\t\tresolvedTheme = \"light\"; // assume \"light\" for SSR\n\t\t} else {\n\t\t\tconst prefersDarkMode = window.matchMedia(prefersDarkModeMediaQuery).matches;\n\t\t\tconst prefersHighContrast = window.matchMedia(prefersHighContrastMediaQuery).matches;\n\t\t\tinitialTheme = getStoredTheme({ cookie: document.cookie });\n\t\t\tresolvedTheme = resolveTheme(initialTheme, {\n\t\t\t\tprefersDarkMode,\n\t\t\t\tprefersHighContrast,\n\t\t\t});\n\t\t}\n\n\t\treturn {\n\t\t\tclassName: cx(className, resolvedTheme),\n\t\t\t\"data-applied-theme\": resolvedTheme,\n\t\t\t\"data-theme\": initialTheme,\n\t\t};\n\t}, [className]);\n}\n\ntype GetStoredThemeOptions = {\n\t/**\n\t * raw Cookie header (SSR) or document.cookie (client)\n\t */\n\tcookie: string | null | undefined;\n};\n\n/**\n * Returns the persisted UI theme from a Cookie header string.\n *\n * Looks for a cookie named by {@link THEME_STORAGE_KEY} and returns its value **iff**\n * it’s a valid `Theme` per `isTheme`. Otherwise, falls back to\n * {@link DEFAULT_THEME}. This function never throws; malformed encodings or\n * missing cookies quietly return the default.\n *\n * @example\n * getStoredTheme({ cookie: `${THEME_STORAGE_KEY}=dark; session=abc` }) // \"dark\"\n * @example\n * getStoredTheme({ cookie: \"\" }) // DEFAULT_THEME\n */\nfunction getStoredTheme({ cookie }: GetStoredThemeOptions): Theme {\n\tif (!cookie) {\n\t\treturn DEFAULT_THEME;\n\t}\n\n\ttry {\n\t\tconst cookies = cookie.split(\";\");\n\t\tconst themeCookie = cookies.find((cookie) => cookie.trim().startsWith(`${THEME_STORAGE_KEY}=`));\n\t\tconst cookieValue = themeCookie?.split(\"=\")[1];\n\t\tconst storedTheme = cookieValue ? globalThis.decodeURIComponent(cookieValue) : null;\n\n\t\treturn isTheme(storedTheme) ? storedTheme : DEFAULT_THEME;\n\t\t// oxlint-disable-next-line no-unused-vars\n\t} catch (_) {\n\t\treturn DEFAULT_THEME;\n\t}\n}\n\nexport {\n\tMantleThemeHeadContent,\n\tPreventWrongThemeFlashScript,\n\tThemeProvider,\n\t//,\n\tgetStoredTheme,\n\tpreventWrongThemeFlashScriptContent,\n\treadThemeFromHtmlElement,\n\tuseAppliedTheme,\n\tuseInitialHtmlThemeProps,\n\tuseTheme,\n};\n\n/**\n * Notifies other open tabs (same origin) that the theme changed.\n *\n * Prefers a shared {@link BroadcastChannel} for immediate, reliable delivery.\n * Falls back to writing a unique “ping” value to `localStorage`, which triggers\n * the cross-tab `storage` event. Both mechanisms only work across the same origin.\n *\n * Uses a timestamp to ensure the storage value always changes so the event fires.\n *\n * @remarks\n * - Same-origin only: BroadcastChannel and the `storage` event do not cross subdomains\n * or different schemes/ports. For cross-subdomain sync, use a postMessage hub or server push.\n * - This function is fire-and-forget and intentionally swallows errors.\n * - Receivers should re-read the cookie/source of truth and then apply the theme;\n * don’t trust the payload blindly.\n *\n * @example\n * // Sender (inside your setter)\n * notifyOtherTabs(nextTheme, {\n * broadcastChannel: broadcastChannelRef.current,\n * pingKey: `${storageKey}__ping`,\n * });\n *\n * @example\n * // Receiver (setup once per tab)\n * const bc = new BroadcastChannel(storageKey);\n * bc.onmessage = () => syncThemeFromCookie();\n * window.addEventListener('storage', (e) => {\n * if (e.key === `${storageKey}__ping`) syncThemeFromCookie();\n * });\n */\nfunction notifyOtherTabs(\n\ttheme: Theme,\n\toptions: {\n\t\tbroadcastChannel: BroadcastChannel | null;\n\t\tpingKey: `${string}__ping`;\n\t},\n) {\n\tconst { broadcastChannel, pingKey } = options;\n\n\t// first try BroadcastChannel\n\ttry {\n\t\tif (broadcastChannel) {\n\t\t\tbroadcastChannel.postMessage({\n\t\t\t\ttheme,\n\t\t\t\ttimestamp: Date.now(),\n\t\t\t});\n\t\t\treturn;\n\t\t}\n\t\t// oxlint-disable-next-line no-unused-vars\n\t} catch (_) {\n\t\t// silently swallow errors\n\t}\n\n\t// fallback to storage event: write a \"ping\" key (not the real storageKey)\n\ttry {\n\t\tlocalStorage.setItem(pingKey, JSON.stringify({ theme, timestamp: Date.now() }));\n\t\t// oxlint-disable-next-line no-unused-vars\n\t} catch (_) {\n\t\t// silently swallow errors\n\t}\n}\n\nfunction buildThemeCookie(value: string) {\n\tconst expires = new Date();\n\texpires.setFullYear(expires.getFullYear() + 1); // 1 year expiration\n\n\t// Only set .ngrok.com domain for ngrok domains, otherwise let it default to current domain\n\tconst { hostname, protocol } = window.location;\n\tconst domainAttribute =\n\t\thostname === \"ngrok.com\" || hostname.endsWith(\".ngrok.com\") ? \"; domain=.ngrok.com\" : \"\";\n\tconst secureAttribute = protocol === \"https:\" ? \"; Secure\" : \"\";\n\n\treturn `${THEME_STORAGE_KEY}=${encodeURIComponent(value)}; expires=${expires.toUTCString()}; path=/${domainAttribute}; SameSite=Lax${secureAttribute}` as const;\n}\n\n/**\n * Sets a cookie with appropriate domain for the current hostname.\n * Uses .ngrok.com for ngrok domains, otherwise no domain (current domain only).\n */\nfunction setCookie(value: string) {\n\tif (!canUseDOM()) {\n\t\treturn;\n\t}\n\n\ttry {\n\t\tdocument.cookie = buildThemeCookie(value);\n\t\t// oxlint-disable-next-line no-unused-vars\n\t} catch (_) {\n\t\t// silently swallow errors\n\t}\n}\n"],"mappings":"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","names":["Fragment","jsx","assetsCdnOrigin","cdnBase","coreFonts","fontHref","font","path","PreloadCoreFonts","resolvedThemes","themes","$theme","value","isTheme","$resolvedTheme","isResolvedTheme","createContext","useContext","useEffect","useMemo","useRef","useState","invariant","Fragment","jsx","jsxs","prefersDarkModeMediaQuery","prefersHighContrastMediaQuery","THEME_STORAGE_KEY","DEFAULT_THEME","initialState","ThemeProviderContext","createContext","ThemeProvider","children","theme","setTheme","useState","storedTheme","getStoredTheme","canUseDOM","applyThemeToHtml","broadcastChannelRef","useRef","useEffect","syncThemeFromCookie","next","newTheme","event","value","isTheme","onStorage","prefersDarkMql","prefersHighContrastMql","onChange","onVisibilityChange","useMemo","setCookie","notifyOtherTabs","useTheme","context","useContext","invariant","html","prefersDarkMode","prefersHighContrast","resolvedTheme","resolveTheme","htmlTheme","htmlAppliedTheme","currentTheme","currentResolvedTheme","isResolvedTheme","resolvedThemes","readThemeFromHtmlElement","htmlElement","determineThemeFromMediaQuery","useAppliedTheme","themeContext","useMatchesMediaQuery","preventThemeFlash","args","storageKey","defaultTheme","themes","getThemeFromCookie","name","cookie","cookieValue","c","buildCookie","val","expires","hostname","protocol","domainAttribute","secureAttribute","writeCookie","resolveThemeValue","isDark","isHighContrast","cookieTheme","lsTheme","preference","themeClass","hadValidCookie","preventWrongThemeFlashScriptContent","PreventWrongThemeFlashScript","nonce","MantleThemeHeadContent","PreloadCoreFonts","useInitialHtmlThemeProps","props","className","initialTheme","cx","notifyOtherTabs","theme","options","broadcastChannel","pingKey","buildThemeCookie","value","expires","hostname","protocol","domainAttribute","secureAttribute","THEME_STORAGE_KEY","setCookie","canUseDOM"]}
|
|
File without changes
|
|
File without changes
|