@patterninc/pattern-ui 0.0.0-main.202610210601.309a97ae982a → 0.0.0-main.202610210708.fb02fcd2f652

package/dist/browser/@patterninc/pattern-ui/contrast.js

@@ -1,16 +1,16 @@
-import{a as e}from"../../_chunks/rolldown-runtime-BWaJ3C7D.js";import{t}from"../../_chunks/react-CUaU2Z9V.js";import{t as n}from"../../_chunks/compiler-runtime-B3BlmaWz.js";import{t as r}from"../../_chunks/jsx-runtime-Dgn0yPdi.js";import{a as i}from"../../_chunks/user-settings-Do1mOxtc.js";var a=n(),o=/* @__PURE__ */ e(r(),1),s=/* @__PURE__ */ e(t(),1);const c=`contrast`,l=[`default`,`high`],u=(0,s.createContext)(void 0);function d(e){return l.find(t=>t===e)??null}function f(e,t=typeof document>`u`?void 0:document.documentElement){t&&(e===`high`?t.dataset.contrast=`high`:delete t.dataset.contrast)}function p(){if(typeof window>`u`)return null;try{let e=window.localStorage.getItem(c);return e?d(JSON.parse(e)):null}catch{return null}}function m(){return p()??`default`}function h(e){if(typeof window<`u`)try{window.localStorage.setItem(c,JSON.stringify(e))}catch{}}function g(e){let t=JSON.stringify(c),n=JSON.stringify(l),r=JSON.stringify(`default`);return`;(() => {
+import{a as e}from"../../_chunks/rolldown-runtime-BWaJ3C7D.js";import{t}from"../../_chunks/react-CUaU2Z9V.js";import{t as n}from"../../_chunks/compiler-runtime-B3BlmaWz.js";import{t as r}from"../../_chunks/jsx-runtime-Dgn0yPdi.js";import{n as i,t as a}from"../../_chunks/root-setting-CrLE5SPb.js";import{a as o}from"../../_chunks/user-settings-Do1mOxtc.js";var s=n(),c=/* @__PURE__ */ e(r(),1),l=/* @__PURE__ */ e(t(),1);const u=`contrast`,d=[`default`,`high`],f=(0,l.createContext)(void 0);function p(e){return d.find(t=>t===e)??null}function m(e,t=typeof document>`u`?void 0:document.documentElement){t&&(e===`high`?t.dataset.contrast=`high`:delete t.dataset.contrast)}function h(){if(typeof window>`u`)return null;try{let e=window.localStorage.getItem(u);return e?p(JSON.parse(e)):null}catch{return null}}function g(e){if(typeof window<`u`)try{window.localStorage.setItem(u,JSON.stringify(e))}catch{}}function _(e,{gateStorageKey:t}={}){let n=JSON.stringify(u),r=JSON.stringify(d),i=JSON.stringify(`default`);return`;(() => {
   const root = document.documentElement
-  const allowed = ${n}
+  const allowed = ${r}
   const initial = ${JSON.stringify(e??null)}
-  let contrast = ${r}
+  let contrast = ${i}
   try {
-    if (allowed.includes(initial)) {
+    ${a(t)}if (allowed.includes(initial)) {
       contrast = initial
-      localStorage.setItem(${t}, JSON.stringify(initial))
+      localStorage.setItem(${n}, JSON.stringify(initial))
     } else {
-      const stored = localStorage.getItem(${t})
-      const parsed = stored ? JSON.parse(stored) : ${r}
-      contrast = allowed.includes(parsed) ? parsed : ${r}
+      const stored = localStorage.getItem(${n})
+      const parsed = stored ? JSON.parse(stored) : ${i}
+      contrast = allowed.includes(parsed) ? parsed : ${i}
     }
   } catch {}
   if (contrast === 'high') {
@@ -18,4 +18,4 @@ import{a as e}from"../../_chunks/rolldown-runtime-BWaJ3C7D.js";import{t}from"../
   } else {
     delete root.dataset.contrast
   }
-})()`}function _(e){let t=(0,a.c)(13),{children:n,enabled:r,initialContrast:i}=e,c=r===void 0||r,l;t[0]===i?l=t[1]:(l=()=>i??m(),t[0]=i,t[1]=l);let[d,p]=(0,s.useState)(l),g=c?d:`default`,_,v;t[2]===g?(_=t[3],v=t[4]):(_=()=>{f(g)},v=[g],t[2]=g,t[3]=_,t[4]=v),(0,s.useEffect)(_,v);let y;t[5]===c?y=t[6]:(y=e=>{h(e),c&&f(e),p(e)},t[5]=c,t[6]=y);let b=y,x;t[7]!==g||t[8]!==b?(x={contrast:g,setContrast:b},t[7]=g,t[8]=b,t[9]=x):x=t[9];let S=x,C;return t[10]!==n||t[11]!==S?(C=/* @__PURE__ */ (0,o.jsx)(u.Provider,{value:S,children:n}),t[10]=n,t[11]=S,t[12]=C):C=t[12],C}function v(){let e=(0,s.useContext)(u);if(e===void 0)throw Error(`useContrast must be used within a ContrastProvider`);return e}const y=`settings:contrast`;function b(e){return d(typeof e==`object`&&e?e.contrast:e)}function x(e){let t=(0,a.c)(11),{client:n,enabled:r}=e,o=r===void 0||r,{contrast:s,setContrast:c}=v(),l;t[0]!==n||t[1]!==s||t[2]!==o||t[3]!==c?(l={client:n,key:y,enabled:o,value:s,readExplicitValue:p,parse:b,serialize:S,onRemoteValue:c},t[0]=n,t[1]=s,t[2]=o,t[3]=c,t[4]=l):l=t[4];let u=i(l),d;t[5]!==u||t[6]!==c?(d=e=>{c(e),u(e)},t[5]=u,t[6]=c,t[7]=d):d=t[7];let f;return t[8]!==s||t[9]!==d?(f={contrast:s,setContrast:d},t[8]=s,t[9]=d,t[10]=f):f=t[10],f}function S(e){return{contrast:e}}export{l as CONTRAST_PREFERENCES,y as CONTRAST_SETTING_KEY,c as CONTRAST_STORAGE_KEY,u as ContrastContext,_ as ContrastProvider,f as applyContrastAttribute,g as getContrastNoFlashScript,d as parseContrastPreference,b as parseContrastSetting,p as readExplicitContrast,x as useAccountContrast,v as useContrast};
+})()`}function v(e){let t=(0,s.c)(12),{children:n,enabled:r,initialContrast:a,gateStorageKey:o}=e,l=r===void 0||r,u;t[0]!==l||t[1]!==o||t[2]!==a?(u={enabled:l,initial:a,fallback:`default`,readStored:h,apply:m,gateStorageKey:o},t[0]=l,t[1]=o,t[2]=a,t[3]=u):u=t[3];let[d,p]=i(u),_=l?d:`default`,v;t[4]===p?v=t[5]:(v=e=>{g(e),p(e)},t[4]=p,t[5]=v);let y=v,b;t[6]!==_||t[7]!==y?(b={contrast:_,setContrast:y},t[6]=_,t[7]=y,t[8]=b):b=t[8];let x=b,S;return t[9]!==n||t[10]!==x?(S=/* @__PURE__ */ (0,c.jsx)(f.Provider,{value:x,children:n}),t[9]=n,t[10]=x,t[11]=S):S=t[11],S}function y(){let e=(0,l.useContext)(f);if(e===void 0)throw Error(`useContrast must be used within a ContrastProvider`);return e}const b=`settings:contrast`;function x(e){return p(typeof e==`object`&&e?e.contrast:e)}function S(e){let t=(0,s.c)(11),{client:n,enabled:r}=e,i=r===void 0||r,{contrast:a,setContrast:c}=y(),l;t[0]!==n||t[1]!==a||t[2]!==i||t[3]!==c?(l={client:n,key:b,enabled:i,value:a,readExplicitValue:h,parse:x,serialize:C,onRemoteValue:c},t[0]=n,t[1]=a,t[2]=i,t[3]=c,t[4]=l):l=t[4];let u=o(l),d;t[5]!==u||t[6]!==c?(d=e=>{c(e),u(e)},t[5]=u,t[6]=c,t[7]=d):d=t[7];let f;return t[8]!==a||t[9]!==d?(f={contrast:a,setContrast:d},t[8]=a,t[9]=d,t[10]=f):f=t[10],f}function C(e){return{contrast:e}}export{d as CONTRAST_PREFERENCES,b as CONTRAST_SETTING_KEY,u as CONTRAST_STORAGE_KEY,f as ContrastContext,v as ContrastProvider,m as applyContrastAttribute,_ as getContrastNoFlashScript,p as parseContrastPreference,x as parseContrastSetting,h as readExplicitContrast,S as useAccountContrast,y as useContrast};

package/dist/browser/@patterninc/pattern-ui/density-context.js

@@ -0,0 +1,25 @@
+import{a as e}from"../../_chunks/rolldown-runtime-BWaJ3C7D.js";import{t}from"../../_chunks/react-CUaU2Z9V.js";import{t as n}from"../../_chunks/compiler-runtime-B3BlmaWz.js";import{t as r}from"../../_chunks/jsx-runtime-Dgn0yPdi.js";import{a as i,f as a,i as o,o as s}from"../../_chunks/density-Cp1PW4SA.js";import{n as c,t as l}from"../../_chunks/root-setting-CrLE5SPb.js";import{a as u}from"../../_chunks/user-settings-Do1mOxtc.js";var d=n(),f=/* @__PURE__ */ e(r(),1),p=/* @__PURE__ */ e(t(),1);const m=`density`,h=`settings:density`,g={available:!1,density:1,setDensity:()=>void 0},_=(0,p.createContext)(g);function v(e){let t=typeof e==`object`&&e?e.density:e,n=typeof t==`string`?Number.parseFloat(t):t;return typeof n!=`number`||!Number.isFinite(n)?null:a(n)}function y(e){typeof document<`u`&&s(document.documentElement,e)}function b(){if(typeof window>`u`)return null;try{return v(window.localStorage.getItem(m))}catch{return null}}function x(e){if(typeof window<`u`)try{window.localStorage.setItem(m,String(e))}catch{}}function S(e,{gateStorageKey:t}={}){let n=JSON.stringify(m),r=JSON.stringify(e??null),a=JSON.stringify(Object.fromEntries(i.map(e=>[e.value,e.name])));return`;(() => {
+  try {
+    ${l(t)}const initial = ${r}
+    if (typeof initial === 'number') localStorage.setItem(${n}, String(initial))
+    const stored = typeof initial === 'number' ? initial : parseFloat(localStorage.getItem(${n}) || '1')
+    const raw = Math.min(1.5, Math.max(0.75, stored || 1))
+    const steps = ${JSON.stringify(o)}
+    let d = 1
+    for (const step of steps) {
+      const gap = Math.abs(step - raw) - Math.abs(d - raw)
+      if (gap < -1e-9 || (Math.abs(gap) <= 1e-9 && Math.abs(step - 1) < Math.abs(d - 1))) d = step
+    }
+    const root = document.documentElement
+    const stop = ${a}[String(d)]
+    root.style.removeProperty('--pui-density')
+    if (d === 1) {
+      root.removeAttribute('data-density')
+    } else if (stop) {
+      root.setAttribute('data-density', stop)
+    } else {
+      root.setAttribute('data-density', '')
+      root.style.setProperty('--pui-density', String(d))
+    }
+  } catch {}
+})()`}function C(e){let t=(0,d.c)(13),{children:n,enabled:r,initialDensity:i,gateStorageKey:o}=e,s=r===void 0||r,l;t[0]===i?l=t[1]:(l=i===void 0?void 0:a(i),t[0]=i,t[1]=l);let u;t[2]!==s||t[3]!==o||t[4]!==l?(u={enabled:s,initial:l,fallback:1,readStored:b,apply:y,gateStorageKey:o},t[2]=s,t[3]=o,t[4]=l,t[5]=u):u=t[5];let[p,m]=c(u),h=s?p:1,v;t[6]!==h||t[7]!==s||t[8]!==m?(v=s?{available:!0,density:h,setDensity:e=>{let t=a(e);x(t),m(t)}}:g,t[6]=h,t[7]=s,t[8]=m,t[9]=v):v=t[9];let S=v,C;return t[10]!==n||t[11]!==S?(C=/* @__PURE__ */ (0,f.jsx)(_.Provider,{value:S,children:n}),t[10]=n,t[11]=S,t[12]=C):C=t[12],C}function w(){return(0,p.useContext)(_)}function T(e){let t=(0,d.c)(12),{client:n,enabled:r}=e,i=r===void 0||r,{available:o,density:s,setDensity:c}=w(),l=i&&o,f;t[0]!==n||t[1]!==s||t[2]!==c||t[3]!==l?(f={client:n,key:h,enabled:l,value:s,readExplicitValue:b,parse:v,serialize:E,onRemoteValue:c},t[0]=n,t[1]=s,t[2]=c,t[3]=l,t[4]=f):f=t[4];let p=u(f),m;t[5]!==p||t[6]!==c?(m=e=>{let t=a(e);c(t),p(t)},t[5]=p,t[6]=c,t[7]=m):m=t[7];let g;return t[8]!==o||t[9]!==s||t[10]!==m?(g={available:o,density:s,setDensity:m},t[8]=o,t[9]=s,t[10]=m,t[11]=g):g=t[11],g}function E(e){return{density:e}}export{h as DENSITY_SETTING_KEY,m as DENSITY_STORAGE_KEY,_ as DensityContext,C as DensityProvider,S as getDensityNoFlashScript,v as parseDensitySetting,b as readExplicitDensity,T as useAccountDensity,w as useDensity};

package/dist/browser/@patterninc/pattern-ui/theme.js

@@ -1 +1 @@
-import{a as e}from"../../_chunks/rolldown-runtime-BWaJ3C7D.js";import{t}from"../../_chunks/react-CUaU2Z9V.js";import{t as n}from"../../_chunks/compiler-runtime-B3BlmaWz.js";import{t as r}from"../../_chunks/jsx-runtime-Dgn0yPdi.js";import{l as i}from"../../_chunks/dist-CPlSvWC_.js";import{n as a}from"../../_chunks/theme-transition-D3CJt3SA.js";var o=n(),s=/* @__PURE__ */ e(r(),1),c=/* @__PURE__ */ e(t(),1);const l=(0,c.createContext)(void 0);function u(e){if(typeof document>`u`)return;let t=document.documentElement;e?t.classList.add(`dark`):t.classList.remove(`dark`)}function d(){try{let e=window.localStorage.getItem(`theme`),t=e?JSON.parse(e):`system`;return t===`light`||t===`dark`?t:`system`}catch{return`system`}}function f(e){return typeof window>`u`?`light`:e===`system`?window.matchMedia(`(prefers-color-scheme: dark)`).matches?`dark`:`light`:e}function p(e){let t=(0,o.c)(13),{children:n}=e,r;t[0]===Symbol.for(`react.memo_cache_sentinel`)?(r={defaultValue:`system`,localStorageKey:`theme`,initializeWithValue:!1},t[0]=r):r=t[0];let{ternaryDarkMode:p,setTernaryDarkMode:m,isDarkMode:h}=i(r),g=p,_=h?`dark`:`light`,v=(0,c.useRef)(!1),y,b;t[1]===h?(y=t[2],b=t[3]):(y=()=>{v.current?u(h):(v.current=!0,u(f(d())===`dark`))},b=[h],t[1]=h,t[2]=y,t[3]=b),(0,c.useEffect)(y,b);let x;t[4]===m?x=t[5]:(x=e=>{a(()=>{u(f(e)===`dark`),m(e)})},t[4]=m,t[5]=x);let S=x,C;t[6]!==_||t[7]!==S||t[8]!==g?(C={theme:g,effectiveTheme:_,setTheme:S},t[6]=_,t[7]=S,t[8]=g,t[9]=C):C=t[9];let w=C,T;return t[10]!==n||t[11]!==w?(T=/* @__PURE__ */ (0,s.jsx)(l.Provider,{value:w,children:n}),t[10]=n,t[11]=w,t[12]=T):T=t[12],T}function m(){let e=(0,c.useContext)(l);if(e===void 0)throw Error(`useTheme must be used within a ThemeProvider`);return e}export{l as ThemeContext,p as ThemeProvider,m as useTheme};
+import{a as e}from"../../_chunks/rolldown-runtime-BWaJ3C7D.js";import{t}from"../../_chunks/react-CUaU2Z9V.js";import{t as n}from"../../_chunks/compiler-runtime-B3BlmaWz.js";import{t as r}from"../../_chunks/jsx-runtime-Dgn0yPdi.js";import{l as i}from"../../_chunks/dist-CPlSvWC_.js";import{a}from"../../_chunks/user-settings-Do1mOxtc.js";import{n as o}from"../../_chunks/theme-transition-D3CJt3SA.js";var s=n(),c=/* @__PURE__ */ e(r(),1),l=/* @__PURE__ */ e(t(),1);const u=[`light`,`dark`,`system`],d=`settings:theme`,f=(0,l.createContext)(void 0);function p(e){if(typeof document>`u`)return;let t=document.documentElement;e?t.classList.add(`dark`):t.classList.remove(`dark`)}function m(){return b()??`system`}function h(e){return typeof window>`u`?`light`:e===`system`?window.matchMedia(`(prefers-color-scheme: dark)`).matches?`dark`:`light`:e}function g(e){let t=(0,s.c)(13),{children:n}=e,r;t[0]===Symbol.for(`react.memo_cache_sentinel`)?(r={defaultValue:`system`,localStorageKey:`theme`,initializeWithValue:!1},t[0]=r):r=t[0];let{ternaryDarkMode:a,setTernaryDarkMode:u,isDarkMode:d}=i(r),g=a,_=d?`dark`:`light`,v=(0,l.useRef)(!1),y,b;t[1]===d?(y=t[2],b=t[3]):(y=()=>{v.current?p(d):(v.current=!0,p(h(m())===`dark`))},b=[d],t[1]=d,t[2]=y,t[3]=b),(0,l.useEffect)(y,b);let x;t[4]===u?x=t[5]:(x=(e,t)=>{let{transition:n}=t===void 0?{}:t,r=n===void 0||n,i=()=>{p(h(e)===`dark`),u(e)};r?o(i):i()},t[4]=u,t[5]=x);let S=x,C;t[6]!==_||t[7]!==S||t[8]!==g?(C={theme:g,effectiveTheme:_,setTheme:S},t[6]=_,t[7]=S,t[8]=g,t[9]=C):C=t[9];let w=C,T;return t[10]!==n||t[11]!==w?(T=/* @__PURE__ */ (0,c.jsx)(f.Provider,{value:w,children:n}),t[10]=n,t[11]=w,t[12]=T):T=t[12],T}function _(){let e=(0,l.useContext)(f);if(e===void 0)throw Error(`useTheme must be used within a ThemeProvider`);return e}function v(e){return u.find(t=>t===e)??null}function y(e){return v(typeof e==`object`&&e?e.theme:e)}function b(){if(typeof window>`u`)return null;try{let e=window.localStorage.getItem(`theme`);return e?v(JSON.parse(e)):null}catch{return null}}function x(e){let t=(0,s.c)(14),{client:n,enabled:r}=e,i=r===void 0||r,{theme:o,effectiveTheme:c,setTheme:l}=_(),u;t[0]===l?u=t[1]:(u=e=>l(e,{transition:!1}),t[0]=l,t[1]=u);let f;t[2]!==n||t[3]!==i||t[4]!==u||t[5]!==o?(f={client:n,key:d,enabled:i,value:o,readExplicitValue:b,parse:y,serialize:S,onRemoteValue:u},t[2]=n,t[3]=i,t[4]=u,t[5]=o,t[6]=f):f=t[6];let p=a(f),m;t[7]!==p||t[8]!==l?(m=(e,t)=>{l(e,t),p(e)},t[7]=p,t[8]=l,t[9]=m):m=t[9];let h;return t[10]!==c||t[11]!==m||t[12]!==o?(h={theme:o,effectiveTheme:c,setTheme:m},t[10]=c,t[11]=m,t[12]=o,t[13]=h):h=t[13],h}function S(e){return{theme:e}}export{u as THEMES,d as THEME_SETTING_KEY,f as ThemeContext,g as ThemeProvider,v as parseTheme,y as parseThemeSetting,b as readExplicitTheme,x as useAccountTheme,_ as useTheme};

package/dist/browser/@patterninc/pattern-ui/tone.js

@@ -0,0 +1,21 @@
+import{a as e}from"../../_chunks/rolldown-runtime-BWaJ3C7D.js";import{t}from"../../_chunks/react-CUaU2Z9V.js";import{t as n}from"../../_chunks/compiler-runtime-B3BlmaWz.js";import{t as r}from"../../_chunks/jsx-runtime-Dgn0yPdi.js";import{n as i,t as a}from"../../_chunks/root-setting-CrLE5SPb.js";import{a as o}from"../../_chunks/user-settings-Do1mOxtc.js";var s=n(),c=/* @__PURE__ */ e(r(),1),l=/* @__PURE__ */ e(t(),1);const u=`tone`,d=[`default`,`warm`,`cool`],f=`settings:tone`,p={available:!1,tone:`default`,setTone:()=>void 0},m=(0,l.createContext)(p);function h(e){return d.find(t=>t===e)??null}function g(e){return h(typeof e==`object`&&e?e.tone:e)}function _(e,t=typeof document>`u`?void 0:document.documentElement){t&&(e==="default"?delete t.dataset.theme:t.dataset.theme=e)}function v(){if(typeof window>`u`)return null;try{let e=window.localStorage.getItem(u);return e?h(JSON.parse(e)):null}catch{return null}}function y(e){if(typeof window<`u`)try{window.localStorage.setItem(u,JSON.stringify(e))}catch{}}function b(e,{gateStorageKey:t}={}){let n=JSON.stringify(u);return`;(() => {
+  const root = document.documentElement
+  const allowed = ${JSON.stringify(d)}
+  const initial = ${JSON.stringify(e??null)}
+  let tone = 'default'
+  try {
+    ${a(t)}if (allowed.includes(initial)) {
+      tone = initial
+      localStorage.setItem(${n}, JSON.stringify(initial))
+    } else {
+      const stored = localStorage.getItem(${n})
+      const parsed = stored ? JSON.parse(stored) : 'default'
+      tone = allowed.includes(parsed) ? parsed : 'default'
+    }
+  } catch {}
+  if (tone === 'default') {
+    delete root.dataset.theme
+  } else {
+    root.dataset.theme = tone
+  }
+})()`}function x(e){let t=(0,s.c)(11),{children:n,enabled:r,initialTone:a,gateStorageKey:o}=e,l=r===void 0||r,u;t[0]!==l||t[1]!==o||t[2]!==a?(u={enabled:l,initial:a,fallback:`default`,readStored:v,apply:_,gateStorageKey:o},t[0]=l,t[1]=o,t[2]=a,t[3]=u):u=t[3];let[d,f]=i(u),h=l?d:`default`,g;t[4]!==l||t[5]!==f||t[6]!==h?(g=l?{available:!0,tone:h,setTone:e=>{y(e),f(e)}}:p,t[4]=l,t[5]=f,t[6]=h,t[7]=g):g=t[7];let b=g,x;return t[8]!==n||t[9]!==b?(x=/* @__PURE__ */ (0,c.jsx)(m.Provider,{value:b,children:n}),t[8]=n,t[9]=b,t[10]=x):x=t[10],x}function S(){return(0,l.useContext)(m)}function C(e){let t=(0,s.c)(12),{client:n,enabled:r}=e,i=r===void 0||r,{available:a,tone:c,setTone:l}=S(),u=i&&a,d;t[0]!==n||t[1]!==l||t[2]!==u||t[3]!==c?(d={client:n,key:f,enabled:u,value:c,readExplicitValue:v,parse:g,serialize:w,onRemoteValue:l},t[0]=n,t[1]=l,t[2]=u,t[3]=c,t[4]=d):d=t[4];let p=o(d),m;t[5]!==p||t[6]!==l?(m=e=>{l(e),p(e)},t[5]=p,t[6]=l,t[7]=m):m=t[7];let h;return t[8]!==a||t[9]!==m||t[10]!==c?(h={available:a,tone:c,setTone:m},t[8]=a,t[9]=m,t[10]=c,t[11]=h):h=t[11],h}function w(e){return{tone:e}}export{d as TONES,f as TONE_SETTING_KEY,u as TONE_STORAGE_KEY,m as ToneContext,x as ToneProvider,_ as applyTone,b as getToneNoFlashScript,h as parseTone,g as parseToneSetting,v as readExplicitTone,C as useAccountTone,S as useTone};

package/dist/browser/_chunks/root-setting-CrLE5SPb.js

@@ -0,0 +1 @@
+import{a as e}from"./rolldown-runtime-BWaJ3C7D.js";import{t}from"./react-CUaU2Z9V.js";var n=/* @__PURE__ */ e(t(),1);function r(e,t){try{window.localStorage.setItem(e,String(t))}catch{}}function i({enabled:e,initial:t,fallback:i,readStored:a,apply:o,gateStorageKey:s}){let[c,l]=(0,n.useState)(t??i),[u,d]=(0,n.useState)(t!==void 0),f=(0,n.useRef)(!1);return(0,n.useEffect)(()=>{if(u)return;let e=a();e!==null&&l(e),d(!0)},[u,a]),(0,n.useEffect)(()=>{u&&(s&&r(s,e),e?(f.current=!0,o(c)):((f.current||a()!==null)&&o(i),f.current=!1))},[u,e,c,i,a,o,s]),[c,l]}function a(e){return e?`if (localStorage.getItem(${JSON.stringify(e)}) !== 'true') return\n    `:``}export{i as n,a as t};

package/dist/play-cdn-claude.js

@@ -2,7 +2,7 @@
 const NPM_CDN = "https://cdn.jsdelivr.net/npm/";
 const SHARED = /^(@patterninc\/pattern-ui\/|(react|react-dom|@lingui\/core|@lingui\/react|sucrase)(\/|$))/;
 const scriptUrl = document.currentScript instanceof HTMLScriptElement ? document.currentScript.src : "";
-const packageUrl = new URL("../", scriptUrl || location.href).href.replace(/\/@patterninc\/pattern-ui(@[^/]*)?\//, `/@patterninc/pattern-ui@0.0.0-main.202610210601.309a97ae982a/`);
+const packageUrl = new URL("../", scriptUrl || location.href).href.replace(/\/@patterninc\/pattern-ui(@[^/]*)?\//, `/@patterninc/pattern-ui@0.0.0-main.202610210708.fb02fcd2f652/`);
 globalThis.patternPlayCdnUrl = (specifier) => {
 	if (SHARED.test(specifier)) return `${packageUrl}dist/browser/${specifier}.js`;
 	return specifier.endsWith(".css") ? `${NPM_CDN}${specifier}` : `${NPM_CDN}${specifier}/+esm`;

package/dist/utils/contrast-context.js

@@ -1,7 +1,8 @@
+import { gateScriptGuard, useRootSetting } from "./root-setting.js";
 import { useAccountSetting } from "./user-settings.js";
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
-import React, { createContext, useContext, useEffect, useState } from "react";
+import React, { createContext, useContext } from "react";
 
 //#region src/utils/contrast-context.tsx
 const CONTRAST_STORAGE_KEY = "contrast";
@@ -25,9 +26,6 @@ function readExplicitContrast() {
 		return null;
 	}
 }
-function readStoredContrast() {
-	return readExplicitContrast() ?? "default";
-}
 function persistContrastPreference(preference) {
 	if (typeof window === "undefined") return;
 	try {
@@ -40,9 +38,9 @@ function persistContrastPreference(preference) {
 *
 * Pass `initial` when the server already knows the user's preference (e.g. from their account): it
 * wins over this browser's stored value and replaces it, so a new device paints correctly on first
-* load.
+* load. In an SPA, pass the provider's `gateStorageKey` (see `getToneNoFlashScript`).
 */
-function getContrastNoFlashScript(initial) {
+function getContrastNoFlashScript(initial, { gateStorageKey } = {}) {
 	const storageKey = JSON.stringify(CONTRAST_STORAGE_KEY);
 	const allowed = JSON.stringify(CONTRAST_PREFERENCES);
 	const defaultPreference = JSON.stringify("default");
@@ -52,7 +50,7 @@ function getContrastNoFlashScript(initial) {
   const initial = ${JSON.stringify(initial ?? null)}
   let contrast = ${defaultPreference}
   try {
-    if (allowed.includes(initial)) {
+    ${gateScriptGuard(gateStorageKey)}if (allowed.includes(initial)) {
       contrast = initial
       localStorage.setItem(${storageKey}, JSON.stringify(initial))
     } else {
@@ -74,69 +72,62 @@ function getContrastNoFlashScript(initial) {
 * with `getContrastNoFlashScript()` in the document head so the stored overlay applies before
 * hydration.
 *
-* SSR-safe: browser globals are only touched in effects / event handlers / lazy client state, never
-* during render.
+* SSR-safe: the first render uses `initialContrast ?? 'default'` and storage is read after mount.
+* While disabled, `<html>` is touched only to clear an overlay this feature applied.
 */
 function ContrastProvider(t0) {
-	const $ = c(13);
-	const { children, enabled: t1, initialContrast } = t0;
+	const $ = c(12);
+	const { children, enabled: t1, initialContrast, gateStorageKey } = t0;
 	const enabled = t1 === void 0 ? true : t1;
 	let t2;
-	if ($[0] !== initialContrast) {
-		t2 = () => initialContrast ?? readStoredContrast();
-		$[0] = initialContrast;
-		$[1] = t2;
-	} else t2 = $[1];
-	const [storedContrast, setContrastState] = useState(t2);
+	if ($[0] !== enabled || $[1] !== gateStorageKey || $[2] !== initialContrast) {
+		t2 = {
+			enabled,
+			initial: initialContrast,
+			fallback: "default",
+			readStored: readExplicitContrast,
+			apply: applyContrastAttribute,
+			gateStorageKey
+		};
+		$[0] = enabled;
+		$[1] = gateStorageKey;
+		$[2] = initialContrast;
+		$[3] = t2;
+	} else t2 = $[3];
+	const [storedContrast, setContrastState] = useRootSetting(t2);
 	const contrast = enabled ? storedContrast : "default";
 	let t3;
-	let t4;
-	if ($[2] !== contrast) {
-		t3 = () => {
-			applyContrastAttribute(contrast);
-		};
-		t4 = [contrast];
-		$[2] = contrast;
-		$[3] = t3;
-		$[4] = t4;
-	} else {
-		t3 = $[3];
-		t4 = $[4];
-	}
-	useEffect(t3, t4);
-	let t5;
-	if ($[5] !== enabled) {
-		t5 = (next) => {
+	if ($[4] !== setContrastState) {
+		t3 = (next) => {
 			persistContrastPreference(next);
-			if (enabled) applyContrastAttribute(next);
 			setContrastState(next);
 		};
-		$[5] = enabled;
-		$[6] = t5;
-	} else t5 = $[6];
-	const setContrast = t5;
-	let t6;
-	if ($[7] !== contrast || $[8] !== setContrast) {
-		t6 = {
+		$[4] = setContrastState;
+		$[5] = t3;
+	} else t3 = $[5];
+	const setContrast = t3;
+	let t4;
+	if ($[6] !== contrast || $[7] !== setContrast) {
+		t4 = {
 			contrast,
 			setContrast
 		};
-		$[7] = contrast;
-		$[8] = setContrast;
-		$[9] = t6;
-	} else t6 = $[9];
-	const value = t6;
-	let t7;
-	if ($[10] !== children || $[11] !== value) {
-		t7 = /* @__PURE__ */ jsx(ContrastContext.Provider, {
+		$[6] = contrast;
+		$[7] = setContrast;
+		$[8] = t4;
+	} else t4 = $[8];
+	const value = t4;
+	let t5;
+	if ($[9] !== children || $[10] !== value) {
+		t5 = /* @__PURE__ */ jsx(ContrastContext.Provider, {
 			value,
 			children
 		});
-		$[10] = children;
-		$[11] = value;
-		$[12] = t7;
-	} else t7 = $[12];
-	return t7;
+		$[9] = children;
+		$[10] = value;
+		$[11] = t5;
+	} else t5 = $[11];
+	return t5;
 }
 function useContrast() {
 	const context = useContext(ContrastContext);

package/dist/utils/density-context.js

@@ -0,0 +1,209 @@
+import { gateScriptGuard, useRootSetting } from "./root-setting.js";
+import { useAccountSetting } from "./user-settings.js";
+import { DENSITY_DEFAULT, DENSITY_STEPS, DENSITY_STOPS, applyDensity, snapDensity } from "../lib/utils/density.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import React, { createContext, useContext } from "react";
+
+//#region src/utils/density-context.tsx
+const DENSITY_STORAGE_KEY = "density";
+/** User-settings key for the density preference. Value shape: `{ density: number }`. */
+const DENSITY_SETTING_KEY = "settings:density";
+const DISABLED_DENSITY = {
+	available: false,
+	density: 1,
+	setDensity: () => void 0
+};
+const DensityContext = createContext(DISABLED_DENSITY);
+/** Reads a stored density, either `{ density }`, a bare number, or a numeric string. */
+function parseDensitySetting(value) {
+	const raw = typeof value === "object" && value !== null ? value.density : value;
+	const parsed = typeof raw === "string" ? Number.parseFloat(raw) : raw;
+	if (typeof parsed !== "number" || !Number.isFinite(parsed)) return null;
+	return snapDensity(parsed);
+}
+function applyRootDensity(density) {
+	if (typeof document === "undefined") return;
+	applyDensity(document.documentElement, density);
+}
+/** The density saved in this browser, or `null` if the user never chose one here. */
+function readExplicitDensity() {
+	if (typeof window === "undefined") return null;
+	try {
+		return parseDensitySetting(window.localStorage.getItem(DENSITY_STORAGE_KEY));
+	} catch {
+		return null;
+	}
+}
+function persistDensity(density) {
+	if (typeof window === "undefined") return;
+	try {
+		window.localStorage.setItem(DENSITY_STORAGE_KEY, String(density));
+	} catch {}
+}
+/**
+* Inline script that applies the density before React hydrates. Render it only while the density
+* feature is on. Snaps to `DENSITY_STEPS` like `snapDensity` (ties toward 1) and then does what
+* `applyDensity` does: a named stop sets `data-density="<name>"`, an in-between step sets
+* `data-density=""` plus an inline `--pui-density`, and the default clears both. Pass `initial`
+* when the server already knows the user's density: it wins and replaces the stored one. In an SPA,
+* pass the provider's `gateStorageKey` (see `getToneNoFlashScript`).
+*/
+function getDensityNoFlashScript(initial, { gateStorageKey } = {}) {
+	const storageKey = JSON.stringify(DENSITY_STORAGE_KEY);
+	const initialDensity = JSON.stringify(initial ?? null);
+	const stops = JSON.stringify(Object.fromEntries(DENSITY_STOPS.map((s) => [s.value, s.name])));
+	return `;(() => {
+  try {
+    ${gateScriptGuard(gateStorageKey)}const initial = ${initialDensity}
+    if (typeof initial === 'number') localStorage.setItem(${storageKey}, String(initial))
+    const stored = typeof initial === 'number' ? initial : parseFloat(localStorage.getItem(${storageKey}) || '1')
+    const raw = Math.min(1.5, Math.max(0.75, stored || 1))
+    const steps = ${JSON.stringify(DENSITY_STEPS)}
+    let d = 1
+    for (const step of steps) {
+      const gap = Math.abs(step - raw) - Math.abs(d - raw)
+      if (gap < -1e-9 || (Math.abs(gap) <= 1e-9 && Math.abs(step - 1) < Math.abs(d - 1))) d = step
+    }
+    const root = document.documentElement
+    const stop = ${stops}[String(d)]
+    root.style.removeProperty('--pui-density')
+    if (d === 1) {
+      root.removeAttribute('data-density')
+    } else if (stop) {
+      root.setAttribute('data-density', stop)
+    } else {
+      root.setAttribute('data-density', '')
+      root.style.setProperty('--pui-density', String(d))
+    }
+  } catch {}
+})()`;
+}
+/**
+* App-wide density (Scale) provider. Persists to localStorage (key `density`) and applies the
+* density to `<html>` with `applyDensity`. Pair with `getDensityNoFlashScript()` in the head.
+*
+* SSR-safe: the first render uses `initialDensity ?? 1` and storage is read after mount. While
+* disabled, `<html>` is touched only to clear a density this feature applied.
+*/
+function DensityProvider(t0) {
+	const $ = c(13);
+	const { children, enabled: t1, initialDensity, gateStorageKey } = t0;
+	const enabled = t1 === void 0 ? true : t1;
+	let t2;
+	if ($[0] !== initialDensity) {
+		t2 = initialDensity === void 0 ? void 0 : snapDensity(initialDensity);
+		$[0] = initialDensity;
+		$[1] = t2;
+	} else t2 = $[1];
+	let t3;
+	if ($[2] !== enabled || $[3] !== gateStorageKey || $[4] !== t2) {
+		t3 = {
+			enabled,
+			initial: t2,
+			fallback: 1,
+			readStored: readExplicitDensity,
+			apply: applyRootDensity,
+			gateStorageKey
+		};
+		$[2] = enabled;
+		$[3] = gateStorageKey;
+		$[4] = t2;
+		$[5] = t3;
+	} else t3 = $[5];
+	const [storedDensity, setDensityState] = useRootSetting(t3);
+	const density = enabled ? storedDensity : 1;
+	let t4;
+	if ($[6] !== density || $[7] !== enabled || $[8] !== setDensityState) {
+		t4 = enabled ? {
+			available: true,
+			density,
+			setDensity: (next) => {
+				const snapped = snapDensity(next);
+				persistDensity(snapped);
+				setDensityState(snapped);
+			}
+		} : DISABLED_DENSITY;
+		$[6] = density;
+		$[7] = enabled;
+		$[8] = setDensityState;
+		$[9] = t4;
+	} else t4 = $[9];
+	const value = t4;
+	let t5;
+	if ($[10] !== children || $[11] !== value) {
+		t5 = /* @__PURE__ */ jsx(DensityContext.Provider, {
+			value,
+			children
+		});
+		$[10] = children;
+		$[11] = value;
+		$[12] = t5;
+	} else t5 = $[12];
+	return t5;
+}
+/** Current density and its setter. Safe anywhere; outside an enabled provider it is unavailable. */
+function useDensity() {
+	return useContext(DensityContext);
+}
+/**
+* `useDensity` plus the user's account copy, so the density follows them across apps, browsers, and
+* devices. Use it where the density control lives, inside `DensityProvider`. Pass the same feature
+* gate as the provider's `enabled`.
+*/
+function useAccountDensity(t0) {
+	const $ = c(12);
+	const { client, enabled: t1 } = t0;
+	const enabled = t1 === void 0 ? true : t1;
+	const { available, density, setDensity } = useDensity();
+	const t2 = enabled && available;
+	let t3;
+	if ($[0] !== client || $[1] !== density || $[2] !== setDensity || $[3] !== t2) {
+		t3 = {
+			client,
+			key: DENSITY_SETTING_KEY,
+			enabled: t2,
+			value: density,
+			readExplicitValue: readExplicitDensity,
+			parse: parseDensitySetting,
+			serialize: _temp,
+			onRemoteValue: setDensity
+		};
+		$[0] = client;
+		$[1] = density;
+		$[2] = setDensity;
+		$[3] = t2;
+		$[4] = t3;
+	} else t3 = $[4];
+	const save = useAccountSetting(t3);
+	let t4;
+	if ($[5] !== save || $[6] !== setDensity) {
+		t4 = (next_0) => {
+			const snapped = snapDensity(next_0);
+			setDensity(snapped);
+			save(snapped);
+		};
+		$[5] = save;
+		$[6] = setDensity;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== available || $[9] !== density || $[10] !== t4) {
+		t5 = {
+			available,
+			density,
+			setDensity: t4
+		};
+		$[8] = available;
+		$[9] = density;
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	return t5;
+}
+function _temp(next) {
+	return { density: next };
+}
+
+//#endregion
+export { DENSITY_SETTING_KEY, DENSITY_STORAGE_KEY, DensityContext, DensityProvider, getDensityNoFlashScript, parseDensitySetting, readExplicitDensity, useAccountDensity, useDensity };

package/dist/utils/root-setting.js

@@ -0,0 +1,61 @@
+import { useEffect, useRef, useState } from "react";
+
+//#region src/utils/root-setting.ts
+/** Saves a feature's on/off flag for a gated no-flash script. Storage errors are ignored. */
+function writeGateFlag(key, enabled) {
+	try {
+		window.localStorage.setItem(key, String(enabled));
+	} catch {}
+}
+/**
+* State for one appearance setting that lives on `<html>` (tone, density, contrast). Shared by the
+* providers so they hydrate and clean up the same way:
+*
+* - The first render uses `initial ?? fallback`, never `localStorage`, so it matches the server
+*   render. The stored value is read after mount; the no-flash script has already painted it.
+* - While `enabled`, the value is applied to `<html>`.
+* - While disabled, `<html>` is cleared only if this feature may have painted it (it was enabled
+*   earlier in this mount, or this browser has a stored value the no-flash script applied). A
+*   browser that never used the feature is never touched.
+* - `gateStorageKey` (SPAs only) saves `enabled` so the gated no-flash script can skip a feature that
+*   is off.
+*/
+function useRootSetting({ enabled, initial, fallback, readStored, apply, gateStorageKey }) {
+	const [value, setValue] = useState(initial ?? fallback);
+	const [ready, setReady] = useState(initial !== void 0);
+	const wasEnabledRef = useRef(false);
+	useEffect(() => {
+		if (ready) return;
+		const stored = readStored();
+		if (stored !== null) setValue(stored);
+		setReady(true);
+	}, [ready, readStored]);
+	useEffect(() => {
+		if (!ready) return;
+		if (gateStorageKey) writeGateFlag(gateStorageKey, enabled);
+		if (enabled) {
+			wasEnabledRef.current = true;
+			apply(value);
+			return;
+		}
+		if (wasEnabledRef.current || readStored() !== null) apply(fallback);
+		wasEnabledRef.current = false;
+	}, [
+		ready,
+		enabled,
+		value,
+		fallback,
+		readStored,
+		apply,
+		gateStorageKey
+	]);
+	return [value, setValue];
+}
+/** Script prefix for a gated no-flash script: stop unless the saved flag is `true`. */
+function gateScriptGuard(gateStorageKey) {
+	if (!gateStorageKey) return "";
+	return `if (localStorage.getItem(${JSON.stringify(gateStorageKey)}) !== 'true') return\n    `;
+}
+
+//#endregion
+export { gateScriptGuard, useRootSetting };