lucent-ui 0.32.0 → 0.33.0
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/README.md +1 -1
- package/dist/{LucentProvider-BTy2Psol.js → LucentProvider-BAYI38i6.js} +3 -3
- package/dist/devtools.cjs +2 -2
- package/dist/devtools.js +466 -358
- package/dist/index.js +2 -2
- package/dist-server/server/design-rules.js +197 -0
- package/dist-server/server/index.js +48 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Lucent UI
|
|
2
2
|
|
|
3
|
-
[](https://github.com/rozina-hudson/lucent-ui/actions/workflows/ci.yml)
|
|
4
4
|
[](https://www.npmjs.com/package/lucent-ui)
|
|
5
5
|
[](LICENSE)
|
|
6
6
|
|
package/dist/devtools.cjs
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),h=require("react"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),h=require("react"),ne=require("react-dom"),s=require("./LucentProvider-DQ46gmxN.cjs");function oe(){const{tokens:t}=s.useLucent(),[n,o]=h.useState({}),i=h.useRef(n);i.current=n;const c=h.useCallback((f,d)=>{document.documentElement.style.setProperty(s.tokenToCssVar(f),d),o(m=>({...m,[f]:d}))},[]),l=h.useCallback(f=>{document.documentElement.style.removeProperty(s.tokenToCssVar(f)),o(d=>{const m={...d};return delete m[f],m})},[]),u=h.useCallback(()=>{for(const f of Object.keys(i.current))document.documentElement.style.removeProperty(s.tokenToCssVar(f));o({})},[]);return{tokens:t,overrides:n,overrideCount:Object.keys(n).length,setOverride:c,removeOverride:l,resetAll:u}}function y(t){return{key:t,controlType:"color"}}function p(t,n,o,i,c){return{key:t,controlType:"slider",sliderConfig:{min:n,max:o,step:i,unit:c}}}function g(t){return{key:t,controlType:"text"}}const J=[{label:"Colors",defaultExpanded:!0,subgroups:[{label:"Background",tokens:[y("bgBase"),y("bgSubtle"),y("bgOverlay")]},{label:"Surface",tokens:[y("surface"),y("surfaceSecondary"),y("surfaceRaised"),y("surfaceOverlay"),y("surfaceTint")]},{label:"Border",tokens:[y("borderDefault"),y("borderSubtle"),y("borderStrong"),y("controlTrack")]},{label:"Text",tokens:[y("textPrimary"),y("textSecondary"),y("textDisabled"),y("textInverse")]},{label:"Accent",tokens:[y("accentDefault"),y("accentHover"),y("accentSubtle"),y("accentBorder"),y("accentFg")]},{label:"Success",tokens:[y("successDefault"),y("successSubtle"),y("successText")]},{label:"Warning",tokens:[y("warningDefault"),y("warningSubtle"),y("warningText")]},{label:"Danger",tokens:[y("dangerDefault"),y("dangerHover"),y("dangerSubtle"),y("dangerText")]},{label:"Info",tokens:[y("infoDefault"),y("infoSubtle"),y("infoText")]}]},{label:"Typography",tokens:[g("fontFamilyBase"),g("fontFamilyMono"),g("fontFamilyDisplay"),p("fontSizeXs",.5,2,.0625,"rem"),p("fontSizeSm",.5,2,.0625,"rem"),p("fontSizeMd",.5,2,.0625,"rem"),p("fontSizeLg",.5,3,.0625,"rem"),p("fontSizeXl",.5,3,.0625,"rem"),p("fontSize2xl",.5,4,.0625,"rem"),p("fontSize3xl",.5,4,.0625,"rem"),g("fontWeightRegular"),g("fontWeightMedium"),g("fontWeightSemibold"),g("fontWeightBold"),g("lineHeightTight"),g("lineHeightBase"),g("lineHeightRelaxed"),g("letterSpacingTight"),g("letterSpacingBase"),g("letterSpacingWide")]},{label:"Spacing",tokens:[p("space0",0,6,.125,"rem"),p("space1",0,6,.125,"rem"),p("space2",0,6,.125,"rem"),p("space3",0,6,.125,"rem"),p("space4",0,6,.125,"rem"),p("space5",0,6,.125,"rem"),p("space6",0,6,.125,"rem"),p("space8",0,6,.125,"rem"),p("space10",0,6,.125,"rem"),p("space12",0,8,.125,"rem"),p("space16",0,10,.125,"rem"),p("space20",0,12,.125,"rem"),p("space24",0,12,.125,"rem")]},{label:"Radius",tokens:[g("radiusNone"),p("radiusSm",0,2,.0625,"rem"),p("radiusMd",0,2,.0625,"rem"),p("radiusLg",0,2,.0625,"rem"),p("radiusXl",0,3,.0625,"rem"),g("radiusFull")]},{label:"Shadows",tokens:[g("shadowNone"),g("shadowSm"),g("shadowMd"),g("shadowLg"),g("shadowXl")]},{label:"Motion",tokens:[g("durationFast"),g("durationBase"),g("durationSlow"),g("easingDefault"),g("easingEmphasized"),g("easingDecelerate")]}];function re(t){return Object.keys(t).length===0?`<LucentProvider>
|
|
2
2
|
{children}
|
|
3
3
|
</LucentProvider>`:`<LucentProvider tokens={{
|
|
4
4
|
${Object.entries(t).map(([o,i])=>` ${o}: '${i}'`).join(`,
|
|
5
5
|
`)}
|
|
6
6
|
}}>
|
|
7
7
|
{children}
|
|
8
|
-
</LucentProvider>`}async function ee(t){try{return await navigator.clipboard.writeText(t),!0}catch{return!1}}function te({label:t,value:n,isOverridden:o,onChange:i,onReset:c}){return e.jsxs("div",{style:se,children:[e.jsx(s.Text,{as:"code",size:"xs",family:"mono",color:"secondary",style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",marginRight:8},children:t}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:6},children:[e.jsx(s.ColorPicker,{value:n,onChange:i,size:"sm"}),o&&e.jsx(s.Button,{variant:"ghost",size:"2xs",onClick:c,"aria-label":"Reset to default",children:e.jsx("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",children:e.jsx("path",{d:"M1 1l8 8M9 1l-8 8",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})})})]})]})}const se={display:"flex",alignItems:"center",justifyContent:"space-between",padding:"4px 0",minHeight:28};function ne({label:t,value:n,isOverridden:o,min:i,max:c,step:r,unit:y,onChange:u,onReset:d}){const m=parseFloat(n)||0;return e.jsxs("div",{style:oe,children:[e.jsx(s.Text,{as:"code",size:"xs",family:"mono",color:"secondary",style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",marginRight:8},children:t}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:6},children:[e.jsx(s.Slider,{min:i,max:c,step:r,value:m,onChange:b=>u(`${b}${y}`),size:"sm",style:{width:80}}),e.jsx(s.Text,{as:"code",size:"xs",family:"mono",color:"onAccent",style:{width:52,textAlign:"right",flexShrink:0,color:"var(--lucent-accent-default)"},children:n}),o&&e.jsx(s.Button,{variant:"ghost",size:"2xs",onClick:d,"aria-label":"Reset to default",children:e.jsx("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",children:e.jsx("path",{d:"M1 1l8 8M9 1l-8 8",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})})})]})]})}const oe={display:"flex",alignItems:"center",justifyContent:"space-between",padding:"4px 0",minHeight:28};function le({label:t,value:n,isOverridden:o,onChange:i,onReset:c}){return e.jsxs("div",{style:ae,children:[e.jsx(s.Text,{as:"code",size:"xs",family:"mono",color:"secondary",style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",marginRight:8},children:t}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:6},children:[e.jsx(s.Input,{size:"sm",value:n,onChange:r=>i(r.target.value),style:{width:140,fontFamily:"var(--lucent-font-family-mono)"},spellCheck:!1}),o&&e.jsx(s.Button,{variant:"ghost",size:"2xs",onClick:c,"aria-label":"Reset to default",children:e.jsx("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",children:e.jsx("path",{d:"M1 1l8 8M9 1l-8 8",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})})})]})]})}const ae={display:"flex",alignItems:"center",justifyContent:"space-between",padding:"4px 0",minHeight:28};function _(t,n){const o=s.getAccentFg(t),i=s.ensureContrast(t,o),c=n==="light",r=s.adjustLightness(i,c?.05:-.07),y=s.adjustLightness(i,c?.85:-.6),u=s.adjustLightness(i,c?-.15:.15);return{accentDefault:i,accentFg:o,accentHover:r,accentSubtle:y,accentBorder:u}}function re(t,n){const o=n==="light",i=s.adjustLightness(t,o?-.02:.02),c=s.adjustLightness(t,o?-.04:.03),[r,y,u]=s.hexToHsl(t),d=o?s.hslToHex(r,y*.3,Math.min(1,u+(1-u)*.85)):s.hslToHex(r,y,Math.min(.25,u+.04)),m=s.adjustLightness(d,o?-.04:.03),b=s.adjustLightness(d,o?0:.06),v=s.adjustLightness(d,o?0:.06);return{bgBase:t,bgSubtle:i,surfaceTint:c,surface:d,surfaceSecondary:m,surfaceRaised:b,surfaceOverlay:v}}function ie(t,n){const o=n==="light";return{borderDefault:t,borderSubtle:s.adjustLightness(t,o?.05:-.02),borderStrong:s.adjustLightness(t,o?-.27:.19)}}function ce(t,n){const o=n==="light";return{surface:t,surfaceSecondary:s.adjustLightness(t,o?-.04:.03),surfaceRaised:s.adjustLightness(t,o?0:.06),surfaceOverlay:s.adjustLightness(t,o?0:.06)}}const de=[{key:"fontSizeXs",step:-2},{key:"fontSizeSm",step:-1},{key:"fontSizeMd",step:0},{key:"fontSizeLg",step:1},{key:"fontSizeXl",step:2},{key:"fontSize2xl",step:3},{key:"fontSize3xl",step:4}];function I(t,n){const o={};for(const{key:i,step:c}of de){const r=t*Math.pow(n,c),y=Math.round(r*1e3)/1e3;o[i]=`${y}rem`}return o}const ue=[{label:"Minor Second",ratio:1.067},{label:"Major Second",ratio:1.125},{label:"Minor Third",ratio:1.2},{label:"Major Third",ratio:1.25},{label:"Perfect Fourth",ratio:1.333},{label:"Golden Ratio",ratio:1.618}],fe=[{key:"space0",rem:0},{key:"space1",rem:.25},{key:"space2",rem:.5},{key:"space3",rem:.75},{key:"space4",rem:1},{key:"space5",rem:1.25},{key:"space6",rem:1.5},{key:"space8",rem:2},{key:"space10",rem:2.5},{key:"space12",rem:3},{key:"space16",rem:4},{key:"space20",rem:5},{key:"space24",rem:6}];function V(t){const n={};for(const{key:o,rem:i}of fe){if(i===0){n[o]="0px";continue}const c=Math.round(i*t*1e3)/1e3;n[o]=`${c}rem`}return n}const ye=[{key:"radiusSm",sharp:0,rounded:.25,pill:.5},{key:"radiusMd",sharp:0,rounded:.375,pill:.75},{key:"radiusLg",sharp:0,rounded:.5,pill:1},{key:"radiusXl",sharp:0,rounded:.75,pill:1.5}];function W(t){const n={};for(const{key:o,sharp:i,rounded:c,pill:r}of ye){let y;if(t<=.5){const d=t/.5;y=i+(c-i)*d}else{const d=(t-.5)/.5;y=c+(r-c)*d}const u=Math.round(y*1e3)/1e3;n[o]=`${u}rem`}return n}const he={flat:s.flatShadow,subtle:s.subtleShadow,elevated:s.elevatedShadow,liquidGlass:s.liquidGlassShadow,brutalist:s.brutalistShadow,neumorphic:s.neumorphicShadow,natural:s.naturalShadow,glow:s.glowShadow},xe=[{value:"flat",label:"Flat"},{value:"default",label:"Default"},{value:"subtle",label:"Subtle"},{value:"elevated",label:"Elevated"},{value:"natural",label:"Natural"},{value:"liquidGlass",label:"Liquid Glass"},{value:"neumorphic",label:"Neumorphic"},{value:"brutalist",label:"Brutalist"},{value:"glow",label:"Glow"}];function N(t,n){if(t==="default")return n==="dark"?s.darkShadowTokens:s.lightShadowTokens;const o=he[t];return n==="dark"?o.dark:o.light}const U=new Set,pe={Inter:"Inter:wght@300;400;500;600;700",Geist:"Geist:wght@300;400;500;600;700","Plus Jakarta Sans":"Plus+Jakarta+Sans:wght@300;400;500;600;700",Outfit:"Outfit:wght@300;400;500;600;700",Sora:"Sora:wght@300;400;500;600;700","Space Grotesk":"Space+Grotesk:wght@400;500;600;700",Lora:"Lora:wght@400;500;600;700",Merriweather:"Merriweather:wght@300;400;700","Playfair Display":"Playfair+Display:wght@400;500;600;700","JetBrains Mono":"JetBrains+Mono:wght@400;500;600;700","Fira Code":"Fira+Code:wght@400;500;600;700","DM Sans":"DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700","DM Mono":"DM+Mono:wght@400;500",Georama:"Georama:wght@400;500;600;700"};function O(t){var r;const n=t.match(/"([^"]+)"/),o=n?n[1]:(r=t.split(",")[0])==null?void 0:r.trim();if(!o||U.has(o))return;const i=pe[o];if(!i)return;U.add(o);const c=document.createElement("link");c.rel="stylesheet",c.href=`https://fonts.googleapis.com/css2?family=${i}&display=swap`,document.head.appendChild(c)}const ge='"DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',me='"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',be='"Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',ve='"JetBrains Mono", "Fira Code", "Cascadia Code", monospace',Se='"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif',K='-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',ke='"Outfit", -apple-system, BlinkMacSystemFont, sans-serif',je='"Sora", -apple-system, BlinkMacSystemFont, sans-serif',we='"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif',Ce=[{name:"Default",accent:"#111827",roundness:.5,density:1,shadow:"default",typeBase:1,typeRatio:1.125,fontFamily:ge},{name:"Modern",accent:"#6366f1",roundness:.5,density:1,shadow:"subtle",typeBase:1,typeRatio:1.2,fontFamily:me},{name:"Liquid Glass",accent:"#0ea5e9",roundness:1,density:.9,shadow:"liquidGlass",typeBase:1.0625,typeRatio:1.2,fontFamily:K},{name:"Bento",accent:"#0d9488",roundness:.75,density:1,shadow:"natural",typeBase:.9375,typeRatio:1.2,fontFamily:be},{name:"Brutalist",accent:"#ef4444",roundness:0,density:.8,shadow:"brutalist",typeBase:1.125,typeRatio:1.25,fontFamily:Se},{name:"Terminal",accent:"#10b981",roundness:0,density:.8,shadow:"glow",typeBase:.9375,typeRatio:1.125,fontFamily:ve},{name:"Soft UI",accent:"#8b5cf6",roundness:1,density:1.25,shadow:"neumorphic",typeBase:1,typeRatio:1.2,fontFamily:ke},{name:"Bloom",accent:"#e879f9",roundness:.875,density:1.25,shadow:"glow",typeBase:1.0625,typeRatio:1.25,fontFamily:je},{name:"Minimal",accent:"#475569",roundness:.25,density:1,shadow:"flat",typeBase:1,typeRatio:1.125,fontFamily:we},{name:"Enterprise",accent:"#475569",roundness:0,density:.75,shadow:"flat",typeBase:.9375,typeRatio:1.125,fontFamily:K}],Te=[{label:"Brand",colors:["#111827","#e9c96b","#6366f1","#8b5cf6","#10b981","#0d9488","#f43f5e","#e8624a","#d97706","#0ea5e9","#475569","#5f8c6e"]},{label:"Vibrant",colors:["#ef4444","#f97316","#eab308","#22c55e","#06b6d4","#3b82f6","#a855f7","#ec4899","#14b8a6","#f59e0b"]}],Be=[{label:"Light",colors:["#ffffff","#fafafa","#f9fafb","#f5f5f4","#fef7ee","#faf5ff","#f0f9ff","#f0fdf4","#fefce8","#fff1f2"]},{label:"Dark",colors:["#09090b","#0a0a0a","#0c0c0e","#111827","#18181b","#1c1917","#1a1a2e","#0f172a","#171717","#0d1117"]}],ze=[{label:"Light",colors:["#ffffff","#fafafa","#f9fafb","#f5f5f5","#f3f4f6","#f1f5f9","#fef3c7","#fce7f3","#dbeafe","#dcfce7"]},{label:"Dark",colors:["#111111","#141414","#1a1a1a","#1e1e2e","#1f2937","#1e293b","#18181b","#16213e","#1c1c1c","#0f172a"]}],Me=[{label:"Light",colors:["#e5e7eb","#d1d5db","#e2e8f0","#f3f4f6","#d4d4d8","#cbd5e1","#e7e5e4","#fde68a","#c7d2fe","#bbf7d0"]},{label:"Dark",colors:["#27272a","#374151","#334155","#3f3f46","#1e293b","#404040","#44403c","#1c1f2a","#2d2d3f","#1f2937"]}];function Fe({state:t,theme:n}){const[o,i]=h.useState(1),[c,r]=h.useState(.5),[y,u]=h.useState("default"),[d,m]=h.useState(null),b=t.overrides.accentDefault??t.tokens.accentDefault,v=h.useCallback(a=>{for(const[F,P]of Object.entries(a))t.setOverride(F,P)},[t]),T=h.useCallback(a=>{t.resetAll(),m(a.name),i(a.density),r(a.roundness),u(a.shadow);const F={..._(a.accent,n),...I(a.typeBase,a.typeRatio),...V(a.density),...W(a.roundness),...N(a.shadow,n),fontFamilyBase:a.fontFamily};O(a.fontFamily),requestAnimationFrame(()=>{for(const[P,X]of Object.entries(F))t.setOverride(P,X)})},[t,n]),j=a=>{B(),i(a),v(V(a))},w=a=>{B(),r(a),v(W(a))},C=a=>{B(),u(a),v(N(a,n))},M=a=>{B(),/^#[0-9a-f]{6}$/i.test(a)?v(_(a,n)):t.setOverride("accentDefault",a)},l=a=>{B(),/^#[0-9a-f]{6}$/i.test(a)?v(re(a,n)):t.setOverride("bgBase",a)},x=a=>{B(),/^#[0-9a-f]{6}$/i.test(a)?v(ce(a,n)):t.setOverride("surface",a)},S=a=>{B(),/^#[0-9a-f]{6}$/i.test(a)?v(ie(a,n)):t.setOverride("borderDefault",a)},R=t.overrides.bgBase??t.tokens.bgBase,A=t.overrides.surface??t.tokens.surface,G=t.overrides.borderDefault??t.tokens.borderDefault,J=c<.2?"Sharp":c<.4?"Subtle":c<.6?"Rounded":c<.8?"Soft":"Pill",q=o<.85?"Compact":o<.95?"Snug":o<1.05?"Default":o<1.15?"Relaxed":"Spacious",B=()=>m(null);return e.jsxs("div",{style:{padding:"4px 12px 12px",display:"flex",flexDirection:"column",gap:16},children:[e.jsx(L,{label:"Presets",children:e.jsx("div",{style:{display:"grid",gridTemplateColumns:"repeat(5, 1fr)",gap:6},children:Ce.map(a=>e.jsxs(s.Button,{variant:d===a.name?"secondary":"ghost",onClick:()=>T(a),style:{padding:"8px 4px 6px",display:"flex",flexDirection:"column",alignItems:"center",gap:5,height:"auto"},children:[e.jsx("div",{style:{width:24,height:24,borderRadius:a.roundness<.3?3:a.roundness<.7?6:12,background:a.accent,border:"1px solid rgba(255,255,255,0.1)"}}),e.jsx(s.Text,{size:"xs",...d!==a.name&&{color:"secondary"},weight:d===a.name?"semibold":"regular",style:{fontSize:9,whiteSpace:"nowrap"},children:a.name})]},a.name))})}),e.jsx(L,{label:"Colors",children:e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:8},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:10},children:[e.jsx(s.ColorPicker,{value:b,onChange:M,size:"sm",presetGroups:Te}),e.jsx(s.Text,{size:"xs",color:"secondary",style:{flex:1},children:"Accent"}),e.jsx(s.Text,{as:"code",size:"xs",family:"mono",style:{color:"var(--lucent-accent-default)"},children:b})]}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:10},children:[e.jsx(s.ColorPicker,{value:R,onChange:l,size:"sm",presetGroups:Be}),e.jsx(s.Text,{size:"xs",color:"secondary",style:{flex:1},children:"Background"}),e.jsx(s.Text,{as:"code",size:"xs",family:"mono",style:{color:"var(--lucent-accent-default)"},children:R})]}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:10},children:[e.jsx(s.ColorPicker,{value:A,onChange:x,size:"sm",presetGroups:ze}),e.jsx(s.Text,{size:"xs",color:"secondary",style:{flex:1},children:"Surface"}),e.jsx(s.Text,{as:"code",size:"xs",family:"mono",style:{color:"var(--lucent-accent-default)"},children:A})]}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:10},children:[e.jsx(s.ColorPicker,{value:G,onChange:S,size:"sm",presetGroups:Me}),e.jsx(s.Text,{size:"xs",color:"secondary",style:{flex:1},children:"Border"}),e.jsx(s.Text,{as:"code",size:"xs",family:"mono",style:{color:"var(--lucent-accent-default)"},children:G})]})]})}),e.jsxs(L,{label:"Density",children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[e.jsx(s.Text,{size:"xs",family:"mono",color:"secondary",style:{width:54,flexShrink:0},children:"Compact"}),e.jsx(s.Slider,{min:.7,max:1.35,step:.01,value:o,onChange:a=>j(parseFloat(a.target.value)),size:"sm",style:{flex:1}}),e.jsx(s.Text,{size:"xs",family:"mono",color:"secondary",style:{width:54,textAlign:"right",flexShrink:0},children:"Spacious"})]}),e.jsx("div",{style:{textAlign:"center",marginTop:4},children:e.jsxs(s.Text,{size:"xs",style:{color:"var(--lucent-accent-default)"},children:[q," (",o.toFixed(2),"x)"]})})]}),e.jsxs(L,{label:"Roundness",children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[e.jsx(s.Text,{size:"xs",family:"mono",color:"secondary",style:{width:36,flexShrink:0},children:"Sharp"}),e.jsx(s.Slider,{min:0,max:1,step:.01,value:c,onChange:a=>w(parseFloat(a.target.value)),size:"sm",style:{flex:1}}),e.jsx(s.Text,{size:"xs",family:"mono",color:"secondary",style:{width:24,textAlign:"right",flexShrink:0},children:"Pill"})]}),e.jsx("div",{style:{display:"flex",gap:8,marginTop:8,justifyContent:"center"},children:[0,.25,.5,.75,1].map(a=>e.jsx("div",{style:{width:32,height:32,background:"var(--lucent-surface-secondary)",border:`1.5px solid ${Math.abs(c-a)<.05?"var(--lucent-accent-default)":"var(--lucent-border-default)"}`,borderRadius:a===0?2:a<.5?4:a<.8?8:16,cursor:"pointer",transition:"border-color 150ms"},onClick:()=>w(a)},a))}),e.jsx("div",{style:{textAlign:"center",marginTop:4},children:e.jsx(s.Text,{size:"xs",style:{color:"var(--lucent-accent-default)"},children:J})})]}),e.jsx(L,{label:"Shadow Style",children:e.jsx("div",{style:{display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gap:4},children:xe.map(({value:a,label:F})=>e.jsx(s.Button,{variant:y===a?"secondary":"ghost",size:"2xs",onClick:()=>C(a),style:{justifyContent:"center"},children:F},a))})})]})}function L({label:t,children:n}){return e.jsxs("div",{style:{background:"var(--lucent-surface)",borderRadius:"var(--lucent-radius-lg)",padding:"10px 12px",border:"1px solid var(--lucent-border-default)"},children:[e.jsx(s.Text,{size:"xs",weight:"semibold",style:{marginBottom:10,display:"block"},children:t}),n]})}const z=[{label:"DM Sans",family:'"DM Sans", sans-serif',category:"sans"},{label:"Inter",family:'"Inter", sans-serif',category:"sans"},{label:"System UI",family:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',category:"sans"},{label:"Geist",family:'"Geist", sans-serif',category:"sans"},{label:"Plus Jakarta",family:'"Plus Jakarta Sans", sans-serif',category:"sans"},{label:"Outfit",family:'"Outfit", sans-serif',category:"sans"},{label:"Lora",family:'"Lora", serif',category:"serif"},{label:"Merriweather",family:'"Merriweather", serif',category:"serif"},{label:"Playfair",family:'"Playfair Display", serif',category:"serif"},{label:"JetBrains Mono",family:'"JetBrains Mono", monospace',category:"mono"},{label:"Fira Code",family:'"Fira Code", monospace',category:"mono"},{label:"Space Grotesk",family:'"Space Grotesk", sans-serif',category:"display"},{label:"Sora",family:'"Sora", sans-serif',category:"display"},{label:"Georama",family:'"Georama", sans-serif',category:"display"}];function Le({state:t,theme:n}){const o=t.overrides.fontSizeMd??t.tokens.fontSizeMd,i=parseFloat(o)||1,[c,r]=h.useState(i),[y,u]=h.useState(()=>{const l=t.overrides.fontSizeLg??t.tokens.fontSizeLg,x=parseFloat(l)||1.125,S=parseFloat(o)||1;return S>0?Math.round(x/S*1e3)/1e3:1.125});h.useEffect(()=>{const l=parseFloat(t.overrides.fontSizeMd??t.tokens.fontSizeMd)||1,x=parseFloat(t.overrides.fontSizeLg??t.tokens.fontSizeLg)||1.125;r(l),l>0&&u(Math.round(x/l*1e3)/1e3)},[t.overrides.fontSizeMd,t.overrides.fontSizeLg,t.tokens.fontSizeMd,t.tokens.fontSizeLg]);const[d,m]=h.useState("all"),b=t.overrides.fontFamilyBase??t.tokens.fontFamilyBase,v=t.overrides.fontFamilyMono??t.tokens.fontFamilyMono,T=t.overrides.fontFamilyDisplay??t.tokens.fontFamilyDisplay,j=h.useCallback(l=>{for(const[x,S]of Object.entries(l))t.setOverride(x,S)},[t]),w=l=>{r(l),j(I(l,y))},C=l=>{u(l),j(I(c,l))},M=d==="all"?z:z.filter(l=>l.category===d);return e.jsxs("div",{style:{padding:"4px 12px 12px",display:"flex",flexDirection:"column",gap:16},children:[e.jsxs(D,{label:"Font Family",children:[e.jsx("div",{style:{marginBottom:8},children:e.jsx(s.SegmentedControl,{value:d,onChange:l=>m(l),options:[{value:"all",label:"All"},{value:"sans",label:"Sans"},{value:"serif",label:"Serif"},{value:"mono",label:"Mono"},{value:"display",label:"Display"}],size:"sm",fullWidth:!0})}),e.jsx("div",{style:{display:"flex",flexDirection:"column",gap:2},children:M.map(l=>{const x=b.includes(l.label)||l.family===b;return e.jsxs(s.Button,{variant:x?"secondary":"ghost",onClick:()=>{O(l.family),t.setOverride("fontFamilyBase",l.family)},style:{width:"100%",justifyContent:"space-between",height:"auto",padding:"8px 10px"},children:[e.jsx("span",{style:{fontFamily:l.family,fontSize:14},children:l.label}),e.jsx(s.Text,{as:"span",size:"xs",color:"secondary",style:{textTransform:"capitalize"},children:l.category})]},l.label)})}),e.jsxs("div",{style:{marginTop:8},children:[e.jsx(s.Text,{size:"xs",color:"secondary",style:{marginBottom:4,display:"block"},children:"Custom"}),e.jsx(s.Input,{size:"sm",value:b,onChange:l=>t.setOverride("fontFamilyBase",l.target.value),style:{width:"100%",fontFamily:"var(--lucent-font-family-mono)"},spellCheck:!1})]})]}),e.jsx(D,{label:"Code & Display Fonts",children:e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:8},children:[e.jsxs("div",{children:[e.jsx(s.Text,{size:"xs",color:"secondary",style:{marginBottom:4,display:"block"},children:"Monospace"}),e.jsx(s.Select,{size:"sm",value:v,onChange:l=>{O(l.target.value),t.setOverride("fontFamilyMono",l.target.value)},options:[...z.filter(l=>l.category==="mono").map(l=>({value:l.family,label:l.label})),...z.some(l=>l.family===v)?[]:[{value:v,label:"Custom"}]]})]}),e.jsxs("div",{children:[e.jsx(s.Text,{size:"xs",color:"secondary",style:{marginBottom:4,display:"block"},children:"Display"}),e.jsx(s.Select,{size:"sm",value:T,onChange:l=>{O(l.target.value),t.setOverride("fontFamilyDisplay",l.target.value)},options:[...z.filter(l=>l.category==="display"||l.category==="sans").map(l=>({value:l.family,label:l.label})),...z.some(l=>l.family===T)?[]:[{value:T,label:"Custom"}]]})]})]})}),e.jsx(D,{label:"Type Scale",children:e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:10},children:[e.jsxs("div",{children:[e.jsx(s.Text,{size:"xs",color:"secondary",style:{marginBottom:4,display:"block"},children:"Base Size"}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[e.jsx(s.Slider,{min:.75,max:1.5,step:.0625,value:c,onChange:l=>w(parseFloat(l.target.value)),size:"sm",style:{flex:1}}),e.jsxs(s.Text,{as:"code",size:"xs",family:"mono",style:{width:56,textAlign:"right",flexShrink:0,color:"var(--lucent-accent-default)"},children:[c,"rem"]})]})]}),e.jsxs("div",{children:[e.jsx(s.Text,{size:"xs",color:"secondary",style:{marginBottom:4,display:"block"},children:"Scale Ratio"}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[e.jsx(s.Slider,{min:1,max:1.618,step:.001,value:y,onChange:l=>C(parseFloat(l.target.value)),size:"sm",style:{flex:1}}),e.jsx(s.Text,{as:"code",size:"xs",family:"mono",style:{width:56,textAlign:"right",flexShrink:0,color:"var(--lucent-accent-default)"},children:y.toFixed(3)})]}),e.jsx("div",{style:{display:"flex",flexWrap:"wrap",gap:4,marginTop:6},children:ue.map(l=>e.jsx(s.Button,{variant:Math.abs(y-l.ratio)<.005?"secondary":"ghost",size:"2xs",onClick:()=>C(l.ratio),children:l.label},l.label))})]})]})}),e.jsx(D,{label:"Text Colors",children:e.jsx("div",{style:{display:"flex",flexDirection:"column",gap:6},children:De.map(({key:l,label:x})=>{const S=t.overrides[l]??t.tokens[l];return e.jsx(s.ColorPicker,{label:x,value:S,onChange:R=>t.setOverride(l,R),size:"sm",inline:!0},l)})})}),e.jsx(D,{label:"Preview",children:e.jsx(Re,{family:b,baseSize:c,ratio:y,textPrimary:t.overrides.textPrimary??t.tokens.textPrimary,textSecondary:t.overrides.textSecondary??t.tokens.textSecondary,bgBase:t.overrides.bgBase??t.tokens.bgBase})})]})}const De=[{key:"textPrimary",label:"Primary"},{key:"textSecondary",label:"Secondary"},{key:"textDisabled",label:"Disabled"},{key:"textInverse",label:"Inverse"}];function D({label:t,children:n}){return e.jsxs("div",{style:{background:"var(--lucent-surface)",borderRadius:"var(--lucent-radius-lg)",padding:"10px 12px",border:"1px solid var(--lucent-border-default)"},children:[e.jsx(s.Text,{size:"xs",weight:"semibold",style:{marginBottom:10,display:"block"},children:t}),n]})}function Re({family:t,baseSize:n,ratio:o,textPrimary:i,textSecondary:c,bgBase:r}){const y=n*Math.pow(o,4),u=n*Math.pow(o,2),d=n,m=n*Math.pow(o,-1);return e.jsxs("div",{style:{background:r,borderRadius:6,padding:"14px 12px",fontFamily:t,border:"1px solid var(--lucent-border-default)"},children:[e.jsx("div",{style:{fontSize:`${y}rem`,fontWeight:700,color:i,lineHeight:1.2,marginBottom:6},children:"Heading"}),e.jsx("div",{style:{fontSize:`${u}rem`,fontWeight:600,color:i,lineHeight:1.3,marginBottom:8},children:"Subheading text"}),e.jsx("div",{style:{fontSize:`${d}rem`,color:i,lineHeight:1.5,marginBottom:6},children:"Body text looks like this. It should be comfortable to read at any size with good line height and spacing."}),e.jsx("div",{style:{fontSize:`${m}rem`,color:c,lineHeight:1.5},children:"Secondary caption — smaller, muted for supplemental information."})]})}const k={bg:"#0a0a0a",surface:"#141414",text:"#f0ead6",textMuted:"#8a8473",accent:"#e9c96b",border:"rgba(233, 201, 107, 0.1)",inputBg:"rgba(255, 255, 255, 0.05)"},Oe=h.createContext(null);function Pe({children:t}){const[n,o]=h.useState(null),i=h.useCallback(r=>{r&&o(r)},[]),c=h.useMemo(()=>{const r={};for(const[y,u]of Object.entries(s.darkTokens))r[s.tokenToCssVar(y)]=u;return r[s.tokenToCssVar("bgBase")]=k.bg,r[s.tokenToCssVar("surface")]=k.surface,r[s.tokenToCssVar("surfaceSecondary")]=k.inputBg,r[s.tokenToCssVar("borderDefault")]=k.border,r[s.tokenToCssVar("borderSubtle")]=k.border,r[s.tokenToCssVar("textPrimary")]=k.text,r[s.tokenToCssVar("textSecondary")]=k.textMuted,r[s.tokenToCssVar("accentDefault")]=k.accent,r[s.tokenToCssVar("accentFg")]="#0a0a0a",r[s.tokenToCssVar("accentSubtle")]="rgba(233, 201, 107, 0.12)",r[s.tokenToCssVar("accentHover")]="#d4b55a",r[s.tokenToCssVar("accentBorder")]=k.accent,r},[]);return e.jsx("div",{ref:i,style:c,children:e.jsx(Oe.Provider,{value:n,children:t})})}function Ee({state:t,theme:n,position:o,mode:i,onModeChange:c,onThemeChange:r,onClose:y}){const[u,d]=h.useState("design"),[m,b]=h.useState(""),[v,T]=h.useState(()=>{const x={};for(const S of $)x[S.label]=S.defaultExpanded??!1;return x}),[j,w]=h.useState(!1),C=x=>{T(S=>({...S,[x]:!S[x]}))},M=async()=>{const x=Q(t.overrides);await ee(x)&&(w(!0),setTimeout(()=>w(!1),2e3))},l=m.toLowerCase();return e.jsx(Pe,{children:e.jsxs("div",{style:{...Ae,[o]:0,borderLeft:o==="right"?`1px solid ${k.border}`:void 0,borderRight:o==="left"?`1px solid ${k.border}`:void 0},children:[e.jsxs("div",{style:Ge,children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[e.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 60 60",fill:"none",children:[e.jsx("rect",{x:"8",y:"8",width:"18",height:"22",rx:"2",fill:"#e9c96b",opacity:"0.92"}),e.jsx("rect",{x:"8",y:"40",width:"44",height:"12",rx:"2",fill:"#e9c96b",opacity:"0.92"}),e.jsx("rect",{x:"36",y:"8",width:"16",height:"28",rx:"2",fill:"#e9c96b",opacity:"0.08"})]}),e.jsx(s.Text,{size:"sm",weight:"semibold",children:"Lucent DevTools"})]}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[r&&e.jsx(s.Toggle,{checked:n==="dark",onChange:()=>r(n==="light"?"dark":"light"),size:"sm"}),e.jsx(s.Button,{variant:"ghost",size:"2xs",onClick:()=>c(i==="overlay"?"push":"overlay"),"aria-label":i==="overlay"?"Push content":"Overlay",title:i==="overlay"?"Push content":"Overlay",children:i==="overlay"?e.jsxs("svg",{width:"14",height:"14",viewBox:"0 0 14 14",fill:"none",children:[e.jsx("rect",{x:"1",y:"1",width:"8",height:"12",rx:"1",stroke:"currentColor",strokeWidth:"1.2"}),e.jsx("rect",{x:"10",y:"1",width:"3",height:"12",rx:"0.5",fill:"currentColor",opacity:"0.5"})]}):e.jsxs("svg",{width:"14",height:"14",viewBox:"0 0 14 14",fill:"none",children:[e.jsx("rect",{x:"1",y:"1",width:"8",height:"12",rx:"1",stroke:"currentColor",strokeWidth:"1.2"}),e.jsx("rect",{x:"10",y:"1",width:"3",height:"12",rx:"0.5",fill:"currentColor"})]})}),e.jsx(s.Button,{variant:"ghost",size:"2xs",onClick:y,"aria-label":"Close",children:e.jsx("svg",{width:"14",height:"14",viewBox:"0 0 14 14",fill:"none",children:e.jsx("path",{d:"M2 2l10 10M12 2L2 12",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})})})]})]}),e.jsx("div",{style:{flexShrink:0},children:e.jsx(s.Tabs,{value:u,onChange:x=>d(x),tabs:[{value:"design",label:"Design"},{value:"type",label:"Typography"},{value:"tokens",label:"Tokens"}]})}),u==="tokens"&&e.jsxs(e.Fragment,{children:[e.jsx("div",{style:{padding:"8px 12px"},children:e.jsx("input",{type:"text",placeholder:"Filter tokens...",value:m,onChange:x=>b(x.target.value),style:$e,spellCheck:!1})}),e.jsx("div",{style:E,children:$.map(x=>e.jsx(Ie,{group:x,state:t,filter:l,expanded:v[x.label]??!1,onToggle:()=>C(x.label)},x.label))})]}),u==="design"&&e.jsx("div",{style:E,children:e.jsx(Fe,{state:t,theme:n})}),u==="type"&&e.jsx("div",{style:E,children:e.jsx(Le,{state:t,theme:n})}),e.jsxs("div",{style:We,children:[e.jsxs("div",{style:{display:"flex",gap:6,flex:1},children:[e.jsx(s.Button,{size:"xs",onClick:M,children:j?"Copied!":"Copy Config"}),t.overrideCount>0&&e.jsx(s.Button,{variant:"outline",size:"xs",onClick:t.resetAll,children:"Reset All"})]}),t.overrideCount>0&&e.jsxs(s.Badge,{variant:"accent",size:"sm",children:[t.overrideCount," override",t.overrideCount!==1?"s":""]})]})]})})}function Ie({group:t,state:n,filter:o,expanded:i,onToggle:c}){const r=t.subgroups?t.subgroups.flatMap(d=>d.tokens):t.tokens??[];if(!(o===""||r.some(d=>d.key.toLowerCase().includes(o))))return null;const u=i||o!=="";return e.jsxs("div",{style:{borderBottom:`1px solid ${k.border}`},children:[e.jsxs("button",{onClick:c,style:_e,children:[e.jsx("svg",{width:"10",height:"10",viewBox:"0 0 10 10",style:{transform:u?"rotate(90deg)":"none",transition:"transform 150ms"},children:e.jsx("path",{d:"M3 1l4 4-4 4",stroke:k.textMuted,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",fill:"none"})}),e.jsx(s.Text,{size:"xs",weight:"semibold",children:t.label}),e.jsx(s.Text,{size:"xs",color:"secondary",style:{marginLeft:"auto"},children:r.length})]}),u&&e.jsx("div",{style:{padding:"0 12px 8px"},children:t.subgroups?t.subgroups.map(d=>{const m=o?d.tokens.filter(b=>b.key.toLowerCase().includes(o)):d.tokens;return m.length===0?null:e.jsxs("div",{style:{marginBottom:8},children:[e.jsx("div",{style:Ve,children:d.label}),m.map(b=>e.jsx(H,{meta:b,state:n},b.key))]},d.label)}):(t.tokens??[]).filter(d=>!o||d.key.toLowerCase().includes(o)).map(d=>e.jsx(H,{meta:d,state:n},d.key))})]})}function H({meta:t,state:n}){const o=n.overrides[t.key]??n.tokens[t.key],i=t.key in n.overrides,c=y=>n.setOverride(t.key,y),r=()=>n.removeOverride(t.key);switch(t.controlType){case"color":return e.jsx(te,{label:t.key,value:o,isOverridden:i,onChange:c,onReset:r});case"slider":return e.jsx(ne,{label:t.key,value:o,isOverridden:i,min:t.sliderConfig.min,max:t.sliderConfig.max,step:t.sliderConfig.step,unit:t.sliderConfig.unit,onChange:c,onReset:r});case"text":return e.jsx(le,{label:t.key,value:o,isOverridden:i,onChange:c,onReset:r})}}const Ae={position:"fixed",top:0,bottom:0,width:320,background:"var(--lucent-bg-base)",color:"var(--lucent-text-primary)",fontFamily:"var(--lucent-font-family-base)",fontSize:"var(--lucent-font-size-sm)",display:"flex",flexDirection:"column",zIndex:99999,boxShadow:"-4px 0 24px rgba(0, 0, 0, 0.3)"},Ge={display:"flex",alignItems:"center",justifyContent:"space-between",padding:"10px 12px",flexShrink:0},$e={width:"100%",background:"var(--lucent-surface-secondary)",color:"var(--lucent-text-primary)",border:"1px solid var(--lucent-border-default)",borderRadius:"var(--lucent-radius-md)",padding:"6px 10px",fontSize:"var(--lucent-font-size-xs)",outline:"none",fontFamily:"inherit",boxSizing:"border-box"},E={flex:1,overflowY:"auto",minHeight:0},_e={display:"flex",alignItems:"center",gap:8,width:"100%",padding:"10px 12px",background:"none",border:"none",cursor:"pointer",color:"inherit",fontFamily:"inherit",textAlign:"left"},Ve={fontSize:10,fontWeight:600,textTransform:"uppercase",letterSpacing:"0.05em",color:"var(--lucent-text-secondary)",marginBottom:4,marginTop:4},We={display:"flex",alignItems:"center",gap:8,padding:"10px 12px",borderTop:"1px solid var(--lucent-border-default)",flexShrink:0};function Ne(t){const n=t.toLowerCase().split("+");return{ctrl:n.includes("ctrl"),meta:n.includes("meta")||n.includes("cmd"),shift:n.includes("shift"),alt:n.includes("alt"),key:n[n.length-1]??""}}function Ue(t,n){const o=navigator.platform.toUpperCase().includes("MAC");return(n.meta||n.ctrl?o?t.metaKey:t.ctrlKey:!t.ctrlKey&&!t.metaKey)&&n.shift===t.shiftKey&&n.alt===t.altKey&&t.key.toLowerCase()===n.key}function Ke({shortcut:t="meta+shift+d",position:n="right",defaultOpen:o=!1,onThemeChange:i,zIndex:c=99999}){const[r,y]=h.useState(o),[u,d]=h.useState("overlay"),{theme:m}=s.useLucent(),b=Z(),v=h.useCallback(()=>y(j=>!j),[]);return h.useEffect(()=>{if(!r||u!=="push"){document.body.style.removeProperty(`margin-${n}`),document.body.style.removeProperty("transition");return}return document.body.style.transition="margin 200ms ease",document.body.style[n==="right"?"marginRight":"marginLeft"]="320px",()=>{document.body.style.removeProperty(`margin-${n}`),document.body.style.removeProperty("transition")}},[r,u,n]),h.useEffect(()=>{const j=Ne(t),w=C=>{Ue(C,j)&&(C.preventDefault(),v())};return document.addEventListener("keydown",w),()=>document.removeEventListener("keydown",w)},[t,v]),Y.createPortal(e.jsxs(e.Fragment,{children:[!r&&e.jsx("button",{onClick:v,style:{...He,[n]:16,zIndex:c},title:"Open Lucent DevTools",children:e.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 60 60",fill:"none",children:[e.jsx("rect",{x:"8",y:"8",width:"18",height:"22",rx:"2",fill:"#e9c96b",opacity:"0.92"}),e.jsx("rect",{x:"8",y:"40",width:"44",height:"12",rx:"2",fill:"#e9c96b",opacity:"0.92"}),e.jsx("rect",{x:"36",y:"8",width:"16",height:"28",rx:"2",fill:"#e9c96b",opacity:"0.08"})]})}),r&&e.jsx("div",{style:{zIndex:c},children:e.jsx(Ee,{state:b,theme:m,position:n,mode:u,onModeChange:d,...i!==void 0&&{onThemeChange:i},onClose:v})})]}),document.body)}const He={position:"fixed",bottom:16,width:40,height:40,borderRadius:"50%",background:k.bg,border:`1px solid ${k.border}`,cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",boxShadow:"0 2px 12px rgba(0, 0, 0, 0.4)",transition:"transform 150ms ease, box-shadow 150ms ease"};exports.LucentDevTools=Ke;
|
|
8
|
+
</LucentProvider>`}async function ae(t){try{return await navigator.clipboard.writeText(t),!0}catch{return!1}}function le({label:t,value:n,isOverridden:o,onChange:i,onReset:c}){return e.jsxs("div",{style:ie,children:[e.jsx(s.Text,{as:"code",size:"xs",family:"mono",color:"secondary",style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",marginRight:8},children:t}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:6},children:[e.jsx(s.ColorPicker,{value:n,onChange:i,size:"sm"}),o&&e.jsx(s.Button,{variant:"ghost",size:"2xs",onClick:c,"aria-label":"Reset to default",children:e.jsx("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",children:e.jsx("path",{d:"M1 1l8 8M9 1l-8 8",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})})})]})]})}const ie={display:"flex",alignItems:"center",justifyContent:"space-between",padding:"4px 0",minHeight:28};function ce({label:t,value:n,isOverridden:o,min:i,max:c,step:l,unit:u,onChange:f,onReset:d}){const m=parseFloat(n)||0;return e.jsxs("div",{style:de,children:[e.jsx(s.Text,{as:"code",size:"xs",family:"mono",color:"secondary",style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",marginRight:8},children:t}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:6},children:[e.jsx(s.Slider,{min:i,max:c,step:l,value:m,onChange:b=>f(`${b}${u}`),size:"sm",style:{width:80}}),e.jsx(s.Text,{as:"code",size:"xs",family:"mono",color:"onAccent",style:{width:52,textAlign:"right",flexShrink:0,color:"var(--lucent-accent-default)"},children:n}),o&&e.jsx(s.Button,{variant:"ghost",size:"2xs",onClick:d,"aria-label":"Reset to default",children:e.jsx("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",children:e.jsx("path",{d:"M1 1l8 8M9 1l-8 8",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})})})]})]})}const de={display:"flex",alignItems:"center",justifyContent:"space-between",padding:"4px 0",minHeight:28};function fe({label:t,value:n,isOverridden:o,onChange:i,onReset:c}){return e.jsxs("div",{style:ue,children:[e.jsx(s.Text,{as:"code",size:"xs",family:"mono",color:"secondary",style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",marginRight:8},children:t}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:6},children:[e.jsx(s.Input,{size:"sm",value:n,onChange:l=>i(l.target.value),style:{width:140,fontFamily:"var(--lucent-font-family-mono)"},spellCheck:!1}),o&&e.jsx(s.Button,{variant:"ghost",size:"2xs",onClick:c,"aria-label":"Reset to default",children:e.jsx("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",children:e.jsx("path",{d:"M1 1l8 8M9 1l-8 8",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})})})]})]})}const ue={display:"flex",alignItems:"center",justifyContent:"space-between",padding:"4px 0",minHeight:28};function A(t,n){const o=s.getAccentFg(t),i=s.ensureContrast(t,o),c=n==="light",l=s.adjustLightness(i,c?.05:-.07),u=s.adjustLightness(i,c?.85:-.6),f=s.adjustLightness(i,c?-.15:.15);return{accentDefault:i,accentFg:o,accentHover:l,accentSubtle:u,accentBorder:f}}function G(t,n){const o=n==="light",i=s.adjustLightness(t,o?-.02:.02),c=s.adjustLightness(t,o?-.04:.03),[l,u,f]=s.hexToHsl(t),d=o?s.hslToHex(l,u*.3,Math.min(1,f+(1-f)*.85)):s.hslToHex(l,u,Math.min(.25,f+.04)),m=s.adjustLightness(d,o?-.04:.03),b=s.adjustLightness(d,o?0:.06),v=s.adjustLightness(d,o?0:.06);return{bgBase:t,bgSubtle:i,surfaceTint:c,surface:d,surfaceSecondary:m,surfaceRaised:b,surfaceOverlay:v}}function $(t,n){const o=n==="light";return{borderDefault:t,borderSubtle:s.adjustLightness(t,o?.05:-.02),borderStrong:s.adjustLightness(t,o?-.27:.19)}}function _(t,n){const o=n==="light";return{surface:t,surfaceSecondary:s.adjustLightness(t,o?-.04:.03),surfaceRaised:s.adjustLightness(t,o?0:.06),surfaceOverlay:s.adjustLightness(t,o?0:.06)}}const ye=[{key:"fontSizeXs",step:-2},{key:"fontSizeSm",step:-1},{key:"fontSizeMd",step:0},{key:"fontSizeLg",step:1},{key:"fontSizeXl",step:2},{key:"fontSize2xl",step:3},{key:"fontSize3xl",step:4}];function N(t,n){const o={};for(const{key:i,step:c}of ye){const l=t*Math.pow(n,c),u=Math.round(l*1e3)/1e3;o[i]=`${u}rem`}return o}const he=[{label:"Minor Second",ratio:1.067},{label:"Major Second",ratio:1.125},{label:"Minor Third",ratio:1.2},{label:"Major Third",ratio:1.25},{label:"Perfect Fourth",ratio:1.333},{label:"Golden Ratio",ratio:1.618}],xe=[{key:"space0",rem:0},{key:"space1",rem:.25},{key:"space2",rem:.5},{key:"space3",rem:.75},{key:"space4",rem:1},{key:"space5",rem:1.25},{key:"space6",rem:1.5},{key:"space8",rem:2},{key:"space10",rem:2.5},{key:"space12",rem:3},{key:"space16",rem:4},{key:"space20",rem:5},{key:"space24",rem:6}];function q(t){const n={};for(const{key:o,rem:i}of xe){if(i===0){n[o]="0px";continue}const c=Math.round(i*t*1e3)/1e3;n[o]=`${c}rem`}return n}const ge=[{key:"radiusSm",sharp:0,rounded:.25,pill:.5},{key:"radiusMd",sharp:0,rounded:.375,pill:.75},{key:"radiusLg",sharp:0,rounded:.5,pill:1},{key:"radiusXl",sharp:0,rounded:.75,pill:1.5}];function X(t){const n={};for(const{key:o,sharp:i,rounded:c,pill:l}of ge){let u;if(t<=.5){const d=t/.5;u=i+(c-i)*d}else{const d=(t-.5)/.5;u=c+(l-c)*d}const f=Math.round(u*1e3)/1e3;n[o]=`${f}rem`}return n}const pe={flat:s.flatShadow,subtle:s.subtleShadow,elevated:s.elevatedShadow,liquidGlass:s.liquidGlassShadow,brutalist:s.brutalistShadow,neumorphic:s.neumorphicShadow,natural:s.naturalShadow,glow:s.glowShadow},me=[{value:"flat",label:"Flat"},{value:"default",label:"Default"},{value:"subtle",label:"Subtle"},{value:"elevated",label:"Elevated"},{value:"natural",label:"Natural"},{value:"liquidGlass",label:"Liquid Glass"},{value:"neumorphic",label:"Neumorphic"},{value:"brutalist",label:"Brutalist"},{value:"glow",label:"Glow"}];function V(t,n){if(t==="default")return n==="dark"?s.darkShadowTokens:s.lightShadowTokens;const o=pe[t];return n==="dark"?o.dark:o.light}const Y=new Set,be={Inter:"Inter:wght@300;400;500;600;700",Geist:"Geist:wght@300;400;500;600;700","Plus Jakarta Sans":"Plus+Jakarta+Sans:wght@300;400;500;600;700",Outfit:"Outfit:wght@300;400;500;600;700",Sora:"Sora:wght@300;400;500;600;700","Space Grotesk":"Space+Grotesk:wght@400;500;600;700",Lora:"Lora:wght@400;500;600;700",Merriweather:"Merriweather:wght@300;400;700","Playfair Display":"Playfair+Display:wght@400;500;600;700","JetBrains Mono":"JetBrains+Mono:wght@400;500;600;700","Fira Code":"Fira+Code:wght@400;500;600;700","DM Sans":"DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700","DM Mono":"DM+Mono:wght@400;500",Georama:"Georama:wght@400;500;600;700"};function P(t){var l;const n=t.match(/"([^"]+)"/),o=n?n[1]:(l=t.split(",")[0])==null?void 0:l.trim();if(!o||Y.has(o))return;const i=be[o];if(!i)return;Y.add(o);const c=document.createElement("link");c.rel="stylesheet",c.href=`https://fonts.googleapis.com/css2?family=${i}&display=swap`,document.head.appendChild(c)}const ve='"DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',Se='"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',ke='"Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',je='"JetBrains Mono", "Fira Code", "Cascadia Code", monospace',we='"Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif',Z='-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',Ce='"Outfit", -apple-system, BlinkMacSystemFont, sans-serif',Te='"Sora", -apple-system, BlinkMacSystemFont, sans-serif',Be='"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif',Q=[{name:"Default",roundness:.5,density:1,shadow:"default",typeBase:1,typeRatio:1.125,fontFamily:ve,colors:{light:{accent:"#111827",bg:"#f7f8f9",surface:"#ffffff",border:"#e5e7eb"},dark:{accent:"#f9fafb",bg:"#0c0d12",surface:"#1c1e28",border:"#2e3039"}}},{name:"Modern",roundness:.5,density:1,shadow:"subtle",typeBase:1,typeRatio:1.2,fontFamily:Se,colors:{light:{accent:"#6366f1",bg:"#f8f7fc",surface:"#ffffff",border:"#e0dde9"},dark:{accent:"#818cf8",bg:"#0d0c18",surface:"#1e1c30",border:"#302e42"}}},{name:"Liquid Glass",roundness:1,density:.9,shadow:"liquidGlass",typeBase:1.0625,typeRatio:1.2,fontFamily:Z,colors:{light:{accent:"#0ea5e9",bg:"#f5f9fc",surface:"#ffffff",border:"#d9e4ec"},dark:{accent:"#38bdf8",bg:"#0a0e16",surface:"#16202e",border:"#243240"}}},{name:"Bento",roundness:.75,density:1,shadow:"natural",typeBase:.9375,typeRatio:1.2,fontFamily:ke,colors:{light:{accent:"#0d9488",bg:"#f5faf8",surface:"#ffffff",border:"#d4e5e0"},dark:{accent:"#2dd4bf",bg:"#0a110f",surface:"#162824",border:"#263e38"}}},{name:"Brutalist",roundness:0,density:.8,shadow:"brutalist",typeBase:1.125,typeRatio:1.25,fontFamily:we,colors:{light:{accent:"#ef4444",bg:"#faf6f5",surface:"#ffffff",border:"#e9ddd8"},dark:{accent:"#f87171",bg:"#140c0a",surface:"#2c1e1a",border:"#42322c"}}},{name:"Terminal",roundness:0,density:.8,shadow:"glow",typeBase:.9375,typeRatio:1.125,fontFamily:je,colors:{light:{accent:"#10b981",bg:"#f5faf7",surface:"#ffffff",border:"#dbe8df"},dark:{accent:"#34d399",bg:"#0a120c",surface:"#16281e",border:"#263e30"}}},{name:"Soft UI",roundness:1,density:1.25,shadow:"neumorphic",typeBase:1,typeRatio:1.2,fontFamily:Ce,colors:{light:{accent:"#8b5cf6",bg:"#f8f6fc",surface:"#ffffff",border:"#e2dce9"},dark:{accent:"#a78bfa",bg:"#100c1a",surface:"#221e34",border:"#362e48"}}},{name:"Bloom",roundness:.875,density:1.25,shadow:"glow",typeBase:1.0625,typeRatio:1.25,fontFamily:Te,colors:{light:{accent:"#e879f9",bg:"#faf6f8",surface:"#ffffff",border:"#ecdde1"},dark:{accent:"#f0abfc",bg:"#140a10",surface:"#2c1a24",border:"#422a36"}}},{name:"Minimal",roundness:.25,density:1,shadow:"flat",typeBase:1,typeRatio:1.125,fontFamily:Be,colors:{light:{accent:"#475569",bg:"#f4f5f7",surface:"#ffffff",border:"#dde1e6"},dark:{accent:"#94a3b8",bg:"#0c0e12",surface:"#1c2028",border:"#2e3440"}}},{name:"Enterprise",roundness:0,density:.75,shadow:"flat",typeBase:.9375,typeRatio:1.125,fontFamily:Z,colors:{light:{accent:"#475569",bg:"#f4f5f7",surface:"#ffffff",border:"#dde1e6"},dark:{accent:"#94a3b8",bg:"#0c0e12",surface:"#1c2028",border:"#2e3440"}}}],ze=[{label:"Brand",colors:["#111827","#e9c96b","#6366f1","#8b5cf6","#10b981","#0d9488","#f43f5e","#e8624a","#d97706","#0ea5e9","#475569","#5f8c6e"]},{label:"Vibrant",colors:["#ef4444","#f97316","#eab308","#22c55e","#06b6d4","#3b82f6","#a855f7","#ec4899","#14b8a6","#f59e0b"]}],Me=[{label:"Light",colors:["#ffffff","#fafafa","#f9fafb","#f5f5f4","#fef7ee","#faf5ff","#f0f9ff","#f0fdf4","#fefce8","#fff1f2"]},{label:"Dark",colors:["#09090b","#0a0a0a","#0c0c0e","#111827","#18181b","#1c1917","#1a1a2e","#0f172a","#171717","#0d1117"]}],Fe=[{label:"Light",colors:["#ffffff","#fafafa","#f9fafb","#f5f5f5","#f3f4f6","#f1f5f9","#fef3c7","#fce7f3","#dbeafe","#dcfce7"]},{label:"Dark",colors:["#111111","#141414","#1a1a1a","#1e1e2e","#1f2937","#1e293b","#18181b","#16213e","#1c1c1c","#0f172a"]}],Re=[{label:"Light",colors:["#e5e7eb","#d1d5db","#e2e8f0","#f3f4f6","#d4d4d8","#cbd5e1","#e7e5e4","#fde68a","#c7d2fe","#bbf7d0"]},{label:"Dark",colors:["#27272a","#374151","#334155","#3f3f46","#1e293b","#404040","#44403c","#1c1f2a","#2d2d3f","#1f2937"]}];function Le({state:t,theme:n}){const[o,i]=h.useState(1),[c,l]=h.useState(.5),[u,f]=h.useState("default"),[d,m]=h.useState(null),b=t.overrides.accentDefault??t.tokens.accentDefault,v=h.useCallback(a=>{for(const[j,R]of Object.entries(a))t.setOverride(j,R)},[t]),B=h.useCallback(a=>{t.resetAll(),m(a.name),i(a.density),l(a.roundness),f(a.shadow);const j=a.colors[n],R={...A(j.accent,n),...G(j.bg,n),..._(j.surface,n),...$(j.border,n),...N(a.typeBase,a.typeRatio),...q(a.density),...X(a.roundness),...V(a.shadow,n),fontFamilyBase:a.fontFamily};P(a.fontFamily),requestAnimationFrame(()=>{for(const[L,I]of Object.entries(R))t.setOverride(L,I)})},[t,n]),w=h.useRef(n);h.useEffect(()=>{if(w.current===n||(w.current=n,!d))return;const a=Q.find(L=>L.name===d);if(!a)return;const j=a.colors[n],R={...A(j.accent,n),...G(j.bg,n),..._(j.surface,n),...$(j.border,n),...V(u,n)};for(const[L,I]of Object.entries(R))t.setOverride(L,I)},[n,d,u,t]);const T=a=>{z(),i(a),v(q(a))},C=a=>{z(),l(a),v(X(a))},F=a=>{z(),f(a),v(V(a,n))},r=a=>{z(),/^#[0-9a-f]{6}$/i.test(a)?v(A(a,n)):t.setOverride("accentDefault",a)},x=a=>{z(),/^#[0-9a-f]{6}$/i.test(a)?v(G(a,n)):t.setOverride("bgBase",a)},S=a=>{z(),/^#[0-9a-f]{6}$/i.test(a)?v(_(a,n)):t.setOverride("surface",a)},E=a=>{z(),/^#[0-9a-f]{6}$/i.test(a)?v($(a,n)):t.setOverride("borderDefault",a)},U=t.overrides.bgBase??t.tokens.bgBase,K=t.overrides.surface??t.tokens.surface,H=t.overrides.borderDefault??t.tokens.borderDefault,te=c<.2?"Sharp":c<.4?"Subtle":c<.6?"Rounded":c<.8?"Soft":"Pill",se=o<.85?"Compact":o<.95?"Snug":o<1.05?"Default":o<1.15?"Relaxed":"Spacious",z=()=>m(null);return e.jsxs("div",{style:{padding:"4px 12px 12px",display:"flex",flexDirection:"column",gap:16},children:[e.jsx(D,{label:"Presets",children:e.jsx("div",{style:{display:"grid",gridTemplateColumns:"repeat(5, 1fr)",gap:6},children:Q.map(a=>e.jsxs(s.Button,{variant:d===a.name?"secondary":"ghost",onClick:()=>B(a),style:{padding:"8px 4px 6px",display:"flex",flexDirection:"column",alignItems:"center",gap:5,height:"auto"},children:[e.jsx("div",{style:{width:24,height:24,borderRadius:a.roundness<.3?3:a.roundness<.7?6:12,background:a.colors[n].accent,border:"1px solid rgba(255,255,255,0.1)"}}),e.jsx(s.Text,{size:"xs",...d!==a.name&&{color:"secondary"},weight:d===a.name?"semibold":"regular",style:{fontSize:9,whiteSpace:"nowrap"},children:a.name})]},a.name))})}),e.jsx(D,{label:"Colors",children:e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:8},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:10},children:[e.jsx(s.ColorPicker,{value:b,onChange:r,size:"sm",presetGroups:ze}),e.jsx(s.Text,{size:"xs",color:"secondary",style:{flex:1},children:"Accent"}),e.jsx(s.Text,{as:"code",size:"xs",family:"mono",style:{color:"var(--lucent-accent-default)"},children:b})]}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:10},children:[e.jsx(s.ColorPicker,{value:U,onChange:x,size:"sm",presetGroups:Me}),e.jsx(s.Text,{size:"xs",color:"secondary",style:{flex:1},children:"Background"}),e.jsx(s.Text,{as:"code",size:"xs",family:"mono",style:{color:"var(--lucent-accent-default)"},children:U})]}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:10},children:[e.jsx(s.ColorPicker,{value:K,onChange:S,size:"sm",presetGroups:Fe}),e.jsx(s.Text,{size:"xs",color:"secondary",style:{flex:1},children:"Surface"}),e.jsx(s.Text,{as:"code",size:"xs",family:"mono",style:{color:"var(--lucent-accent-default)"},children:K})]}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:10},children:[e.jsx(s.ColorPicker,{value:H,onChange:E,size:"sm",presetGroups:Re}),e.jsx(s.Text,{size:"xs",color:"secondary",style:{flex:1},children:"Border"}),e.jsx(s.Text,{as:"code",size:"xs",family:"mono",style:{color:"var(--lucent-accent-default)"},children:H})]})]})}),e.jsxs(D,{label:"Density",children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[e.jsx(s.Text,{size:"xs",family:"mono",color:"secondary",style:{width:54,flexShrink:0},children:"Compact"}),e.jsx(s.Slider,{min:.7,max:1.35,step:.01,value:o,onChange:a=>T(parseFloat(a.target.value)),size:"sm",style:{flex:1}}),e.jsx(s.Text,{size:"xs",family:"mono",color:"secondary",style:{width:54,textAlign:"right",flexShrink:0},children:"Spacious"})]}),e.jsx("div",{style:{textAlign:"center",marginTop:4},children:e.jsxs(s.Text,{size:"xs",style:{color:"var(--lucent-accent-default)"},children:[se," (",o.toFixed(2),"x)"]})})]}),e.jsxs(D,{label:"Roundness",children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[e.jsx(s.Text,{size:"xs",family:"mono",color:"secondary",style:{width:36,flexShrink:0},children:"Sharp"}),e.jsx(s.Slider,{min:0,max:1,step:.01,value:c,onChange:a=>C(parseFloat(a.target.value)),size:"sm",style:{flex:1}}),e.jsx(s.Text,{size:"xs",family:"mono",color:"secondary",style:{width:24,textAlign:"right",flexShrink:0},children:"Pill"})]}),e.jsx("div",{style:{display:"flex",gap:8,marginTop:8,justifyContent:"center"},children:[0,.25,.5,.75,1].map(a=>e.jsx("div",{style:{width:32,height:32,background:"var(--lucent-surface-secondary)",border:`1.5px solid ${Math.abs(c-a)<.05?"var(--lucent-accent-default)":"var(--lucent-border-default)"}`,borderRadius:a===0?2:a<.5?4:a<.8?8:16,cursor:"pointer",transition:"border-color 150ms"},onClick:()=>C(a)},a))}),e.jsx("div",{style:{textAlign:"center",marginTop:4},children:e.jsx(s.Text,{size:"xs",style:{color:"var(--lucent-accent-default)"},children:te})})]}),e.jsx(D,{label:"Shadow Style",children:e.jsx("div",{style:{display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gap:4},children:me.map(({value:a,label:j})=>e.jsx(s.Button,{variant:u===a?"secondary":"ghost",size:"2xs",onClick:()=>F(a),style:{justifyContent:"center"},children:j},a))})})]})}function D({label:t,children:n}){return e.jsxs("div",{style:{background:"var(--lucent-surface)",borderRadius:"var(--lucent-radius-lg)",padding:"10px 12px",border:"1px solid var(--lucent-border-default)"},children:[e.jsx(s.Text,{size:"xs",weight:"semibold",style:{marginBottom:10,display:"block"},children:t}),n]})}const M=[{label:"DM Sans",family:'"DM Sans", sans-serif',category:"sans"},{label:"Inter",family:'"Inter", sans-serif',category:"sans"},{label:"System UI",family:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',category:"sans"},{label:"Geist",family:'"Geist", sans-serif',category:"sans"},{label:"Plus Jakarta",family:'"Plus Jakarta Sans", sans-serif',category:"sans"},{label:"Outfit",family:'"Outfit", sans-serif',category:"sans"},{label:"Lora",family:'"Lora", serif',category:"serif"},{label:"Merriweather",family:'"Merriweather", serif',category:"serif"},{label:"Playfair",family:'"Playfair Display", serif',category:"serif"},{label:"JetBrains Mono",family:'"JetBrains Mono", monospace',category:"mono"},{label:"Fira Code",family:'"Fira Code", monospace',category:"mono"},{label:"Space Grotesk",family:'"Space Grotesk", sans-serif',category:"display"},{label:"Sora",family:'"Sora", sans-serif',category:"display"},{label:"Georama",family:'"Georama", sans-serif',category:"display"}];function De({state:t,theme:n}){const o=t.overrides.fontSizeMd??t.tokens.fontSizeMd,i=parseFloat(o)||1,[c,l]=h.useState(i),[u,f]=h.useState(()=>{const r=t.overrides.fontSizeLg??t.tokens.fontSizeLg,x=parseFloat(r)||1.125,S=parseFloat(o)||1;return S>0?Math.round(x/S*1e3)/1e3:1.125});h.useEffect(()=>{const r=parseFloat(t.overrides.fontSizeMd??t.tokens.fontSizeMd)||1,x=parseFloat(t.overrides.fontSizeLg??t.tokens.fontSizeLg)||1.125;l(r),r>0&&f(Math.round(x/r*1e3)/1e3)},[t.overrides.fontSizeMd,t.overrides.fontSizeLg,t.tokens.fontSizeMd,t.tokens.fontSizeLg]);const[d,m]=h.useState("all"),b=t.overrides.fontFamilyBase??t.tokens.fontFamilyBase,v=t.overrides.fontFamilyMono??t.tokens.fontFamilyMono,B=t.overrides.fontFamilyDisplay??t.tokens.fontFamilyDisplay,w=h.useCallback(r=>{for(const[x,S]of Object.entries(r))t.setOverride(x,S)},[t]),T=r=>{l(r),w(N(r,u))},C=r=>{f(r),w(N(c,r))},F=d==="all"?M:M.filter(r=>r.category===d);return e.jsxs("div",{style:{padding:"4px 12px 12px",display:"flex",flexDirection:"column",gap:16},children:[e.jsxs(O,{label:"Font Family",children:[e.jsx("div",{style:{marginBottom:8},children:e.jsx(s.SegmentedControl,{value:d,onChange:r=>m(r),options:[{value:"all",label:"All"},{value:"sans",label:"Sans"},{value:"serif",label:"Serif"},{value:"mono",label:"Mono"},{value:"display",label:"Display"}],size:"sm",fullWidth:!0})}),e.jsx("div",{style:{display:"flex",flexDirection:"column",gap:2},children:F.map(r=>{const x=b.includes(r.label)||r.family===b;return e.jsxs(s.Button,{variant:x?"secondary":"ghost",onClick:()=>{P(r.family),t.setOverride("fontFamilyBase",r.family)},style:{width:"100%",justifyContent:"space-between",height:"auto",padding:"8px 10px"},children:[e.jsx("span",{style:{fontFamily:r.family,fontSize:14},children:r.label}),e.jsx(s.Text,{as:"span",size:"xs",color:"secondary",style:{textTransform:"capitalize"},children:r.category})]},r.label)})}),e.jsxs("div",{style:{marginTop:8},children:[e.jsx(s.Text,{size:"xs",color:"secondary",style:{marginBottom:4,display:"block"},children:"Custom"}),e.jsx(s.Input,{size:"sm",value:b,onChange:r=>t.setOverride("fontFamilyBase",r.target.value),style:{width:"100%",fontFamily:"var(--lucent-font-family-mono)"},spellCheck:!1})]})]}),e.jsx(O,{label:"Code & Display Fonts",children:e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:8},children:[e.jsxs("div",{children:[e.jsx(s.Text,{size:"xs",color:"secondary",style:{marginBottom:4,display:"block"},children:"Monospace"}),e.jsx(s.Select,{size:"sm",value:v,onChange:r=>{P(r.target.value),t.setOverride("fontFamilyMono",r.target.value)},options:[...M.filter(r=>r.category==="mono").map(r=>({value:r.family,label:r.label})),...M.some(r=>r.family===v)?[]:[{value:v,label:"Custom"}]]})]}),e.jsxs("div",{children:[e.jsx(s.Text,{size:"xs",color:"secondary",style:{marginBottom:4,display:"block"},children:"Display"}),e.jsx(s.Select,{size:"sm",value:B,onChange:r=>{P(r.target.value),t.setOverride("fontFamilyDisplay",r.target.value)},options:[...M.filter(r=>r.category==="display"||r.category==="sans").map(r=>({value:r.family,label:r.label})),...M.some(r=>r.family===B)?[]:[{value:B,label:"Custom"}]]})]})]})}),e.jsx(O,{label:"Type Scale",children:e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:10},children:[e.jsxs("div",{children:[e.jsx(s.Text,{size:"xs",color:"secondary",style:{marginBottom:4,display:"block"},children:"Base Size"}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[e.jsx(s.Slider,{min:.75,max:1.5,step:.0625,value:c,onChange:r=>T(parseFloat(r.target.value)),size:"sm",style:{flex:1}}),e.jsxs(s.Text,{as:"code",size:"xs",family:"mono",style:{width:56,textAlign:"right",flexShrink:0,color:"var(--lucent-accent-default)"},children:[c,"rem"]})]})]}),e.jsxs("div",{children:[e.jsx(s.Text,{size:"xs",color:"secondary",style:{marginBottom:4,display:"block"},children:"Scale Ratio"}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[e.jsx(s.Slider,{min:1,max:1.618,step:.001,value:u,onChange:r=>C(parseFloat(r.target.value)),size:"sm",style:{flex:1}}),e.jsx(s.Text,{as:"code",size:"xs",family:"mono",style:{width:56,textAlign:"right",flexShrink:0,color:"var(--lucent-accent-default)"},children:u.toFixed(3)})]}),e.jsx("div",{style:{display:"flex",flexWrap:"wrap",gap:4,marginTop:6},children:he.map(r=>e.jsx(s.Button,{variant:Math.abs(u-r.ratio)<.005?"secondary":"ghost",size:"2xs",onClick:()=>C(r.ratio),children:r.label},r.label))})]})]})}),e.jsx(O,{label:"Text Colors",children:e.jsx("div",{style:{display:"flex",flexDirection:"column",gap:6},children:Oe.map(({key:r,label:x})=>{const S=t.overrides[r]??t.tokens[r];return e.jsx(s.ColorPicker,{label:x,value:S,onChange:E=>t.setOverride(r,E),size:"sm",inline:!0},r)})})}),e.jsx(O,{label:"Preview",children:e.jsx(Pe,{family:b,baseSize:c,ratio:u,textPrimary:t.overrides.textPrimary??t.tokens.textPrimary,textSecondary:t.overrides.textSecondary??t.tokens.textSecondary,bgBase:t.overrides.bgBase??t.tokens.bgBase})})]})}const Oe=[{key:"textPrimary",label:"Primary"},{key:"textSecondary",label:"Secondary"},{key:"textDisabled",label:"Disabled"},{key:"textInverse",label:"Inverse"}];function O({label:t,children:n}){return e.jsxs("div",{style:{background:"var(--lucent-surface)",borderRadius:"var(--lucent-radius-lg)",padding:"10px 12px",border:"1px solid var(--lucent-border-default)"},children:[e.jsx(s.Text,{size:"xs",weight:"semibold",style:{marginBottom:10,display:"block"},children:t}),n]})}function Pe({family:t,baseSize:n,ratio:o,textPrimary:i,textSecondary:c,bgBase:l}){const u=n*Math.pow(o,4),f=n*Math.pow(o,2),d=n,m=n*Math.pow(o,-1);return e.jsxs("div",{style:{background:l,borderRadius:6,padding:"14px 12px",fontFamily:t,border:"1px solid var(--lucent-border-default)"},children:[e.jsx("div",{style:{fontSize:`${u}rem`,fontWeight:700,color:i,lineHeight:1.2,marginBottom:6},children:"Heading"}),e.jsx("div",{style:{fontSize:`${f}rem`,fontWeight:600,color:i,lineHeight:1.3,marginBottom:8},children:"Subheading text"}),e.jsx("div",{style:{fontSize:`${d}rem`,color:i,lineHeight:1.5,marginBottom:6},children:"Body text looks like this. It should be comfortable to read at any size with good line height and spacing."}),e.jsx("div",{style:{fontSize:`${m}rem`,color:c,lineHeight:1.5},children:"Secondary caption — smaller, muted for supplemental information."})]})}const k={bg:"#0a0a0a",surface:"#141414",text:"#f0ead6",textMuted:"#8a8473",accent:"#e9c96b",border:"rgba(233, 201, 107, 0.1)",inputBg:"rgba(255, 255, 255, 0.05)"},Ee=h.createContext(null);function Ie({children:t}){const[n,o]=h.useState(null),i=h.useCallback(l=>{l&&o(l)},[]),c=h.useMemo(()=>{const l={};for(const[u,f]of Object.entries(s.darkTokens))l[s.tokenToCssVar(u)]=f;return l[s.tokenToCssVar("bgBase")]=k.bg,l[s.tokenToCssVar("surface")]=k.surface,l[s.tokenToCssVar("surfaceSecondary")]=k.inputBg,l[s.tokenToCssVar("borderDefault")]=k.border,l[s.tokenToCssVar("borderSubtle")]=k.border,l[s.tokenToCssVar("textPrimary")]=k.text,l[s.tokenToCssVar("textSecondary")]=k.textMuted,l[s.tokenToCssVar("accentDefault")]=k.accent,l[s.tokenToCssVar("accentFg")]="#0a0a0a",l[s.tokenToCssVar("accentSubtle")]="rgba(233, 201, 107, 0.12)",l[s.tokenToCssVar("accentHover")]="#d4b55a",l[s.tokenToCssVar("accentBorder")]=k.accent,l},[]);return e.jsx("div",{ref:i,style:c,children:e.jsx(Ee.Provider,{value:n,children:t})})}function Ae({state:t,theme:n,position:o,mode:i,onModeChange:c,onThemeChange:l,onClose:u}){const[f,d]=h.useState("design"),[m,b]=h.useState(""),[v,B]=h.useState(()=>{const x={};for(const S of J)x[S.label]=S.defaultExpanded??!1;return x}),[w,T]=h.useState(!1),C=x=>{B(S=>({...S,[x]:!S[x]}))},F=async()=>{const x=re(t.overrides);await ae(x)&&(T(!0),setTimeout(()=>T(!1),2e3))},r=m.toLowerCase();return e.jsx(Ie,{children:e.jsxs("div",{style:{...$e,[o]:0,borderLeft:o==="right"?`1px solid ${k.border}`:void 0,borderRight:o==="left"?`1px solid ${k.border}`:void 0},children:[e.jsxs("div",{style:_e,children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[e.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 60 60",fill:"none",children:[e.jsx("rect",{x:"8",y:"8",width:"18",height:"22",rx:"2",fill:"#e9c96b",opacity:"0.92"}),e.jsx("rect",{x:"8",y:"40",width:"44",height:"12",rx:"2",fill:"#e9c96b",opacity:"0.92"}),e.jsx("rect",{x:"36",y:"8",width:"16",height:"28",rx:"2",fill:"#e9c96b",opacity:"0.08"})]}),e.jsx(s.Text,{size:"sm",weight:"semibold",children:"Lucent DevTools"})]}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[l&&e.jsx(s.Toggle,{checked:n==="dark",onChange:()=>l(n==="light"?"dark":"light"),size:"sm"}),e.jsx(s.Button,{variant:"ghost",size:"2xs",onClick:()=>c(i==="overlay"?"push":"overlay"),"aria-label":i==="overlay"?"Push content":"Overlay",title:i==="overlay"?"Push content":"Overlay",children:i==="overlay"?e.jsxs("svg",{width:"14",height:"14",viewBox:"0 0 14 14",fill:"none",children:[e.jsx("rect",{x:"1",y:"1",width:"8",height:"12",rx:"1",stroke:"currentColor",strokeWidth:"1.2"}),e.jsx("rect",{x:"10",y:"1",width:"3",height:"12",rx:"0.5",fill:"currentColor",opacity:"0.5"})]}):e.jsxs("svg",{width:"14",height:"14",viewBox:"0 0 14 14",fill:"none",children:[e.jsx("rect",{x:"1",y:"1",width:"8",height:"12",rx:"1",stroke:"currentColor",strokeWidth:"1.2"}),e.jsx("rect",{x:"10",y:"1",width:"3",height:"12",rx:"0.5",fill:"currentColor"})]})}),e.jsx(s.Button,{variant:"ghost",size:"2xs",onClick:u,"aria-label":"Close",children:e.jsx("svg",{width:"14",height:"14",viewBox:"0 0 14 14",fill:"none",children:e.jsx("path",{d:"M2 2l10 10M12 2L2 12",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})})})]})]}),e.jsx("div",{style:{flexShrink:0},children:e.jsx(s.Tabs,{value:f,onChange:x=>d(x),tabs:[{value:"design",label:"Design"},{value:"type",label:"Typography"},{value:"tokens",label:"Tokens"}]})}),f==="tokens"&&e.jsxs(e.Fragment,{children:[e.jsx("div",{style:{padding:"8px 12px"},children:e.jsx("input",{type:"text",placeholder:"Filter tokens...",value:m,onChange:x=>b(x.target.value),style:Ve,spellCheck:!1})}),e.jsx("div",{style:W,children:J.map(x=>e.jsx(Ge,{group:x,state:t,filter:r,expanded:v[x.label]??!1,onToggle:()=>C(x.label)},x.label))})]}),f==="design"&&e.jsx("div",{style:W,children:e.jsx(Le,{state:t,theme:n})}),f==="type"&&e.jsx("div",{style:W,children:e.jsx(De,{state:t,theme:n})}),e.jsxs("div",{style:Ue,children:[e.jsxs("div",{style:{display:"flex",gap:6,flex:1},children:[e.jsx(s.Button,{size:"xs",onClick:F,children:w?"Copied!":"Copy Config"}),t.overrideCount>0&&e.jsx(s.Button,{variant:"outline",size:"xs",onClick:t.resetAll,children:"Reset All"})]}),t.overrideCount>0&&e.jsxs(s.Badge,{variant:"accent",size:"sm",children:[t.overrideCount," override",t.overrideCount!==1?"s":""]})]})]})})}function Ge({group:t,state:n,filter:o,expanded:i,onToggle:c}){const l=t.subgroups?t.subgroups.flatMap(d=>d.tokens):t.tokens??[];if(!(o===""||l.some(d=>d.key.toLowerCase().includes(o))))return null;const f=i||o!=="";return e.jsxs("div",{style:{borderBottom:`1px solid ${k.border}`},children:[e.jsxs("button",{onClick:c,style:We,children:[e.jsx("svg",{width:"10",height:"10",viewBox:"0 0 10 10",style:{transform:f?"rotate(90deg)":"none",transition:"transform 150ms"},children:e.jsx("path",{d:"M3 1l4 4-4 4",stroke:k.textMuted,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",fill:"none"})}),e.jsx(s.Text,{size:"xs",weight:"semibold",children:t.label}),e.jsx(s.Text,{size:"xs",color:"secondary",style:{marginLeft:"auto"},children:l.length})]}),f&&e.jsx("div",{style:{padding:"0 12px 8px"},children:t.subgroups?t.subgroups.map(d=>{const m=o?d.tokens.filter(b=>b.key.toLowerCase().includes(o)):d.tokens;return m.length===0?null:e.jsxs("div",{style:{marginBottom:8},children:[e.jsx("div",{style:Ne,children:d.label}),m.map(b=>e.jsx(ee,{meta:b,state:n},b.key))]},d.label)}):(t.tokens??[]).filter(d=>!o||d.key.toLowerCase().includes(o)).map(d=>e.jsx(ee,{meta:d,state:n},d.key))})]})}function ee({meta:t,state:n}){const o=n.overrides[t.key]??n.tokens[t.key],i=t.key in n.overrides,c=u=>n.setOverride(t.key,u),l=()=>n.removeOverride(t.key);switch(t.controlType){case"color":return e.jsx(le,{label:t.key,value:o,isOverridden:i,onChange:c,onReset:l});case"slider":return e.jsx(ce,{label:t.key,value:o,isOverridden:i,min:t.sliderConfig.min,max:t.sliderConfig.max,step:t.sliderConfig.step,unit:t.sliderConfig.unit,onChange:c,onReset:l});case"text":return e.jsx(fe,{label:t.key,value:o,isOverridden:i,onChange:c,onReset:l})}}const $e={position:"fixed",top:0,bottom:0,width:320,background:"var(--lucent-bg-base)",color:"var(--lucent-text-primary)",fontFamily:"var(--lucent-font-family-base)",fontSize:"var(--lucent-font-size-sm)",display:"flex",flexDirection:"column",zIndex:99999,boxShadow:"-4px 0 24px rgba(0, 0, 0, 0.3)"},_e={display:"flex",alignItems:"center",justifyContent:"space-between",padding:"10px 12px",flexShrink:0},Ve={width:"100%",background:"var(--lucent-surface-secondary)",color:"var(--lucent-text-primary)",border:"1px solid var(--lucent-border-default)",borderRadius:"var(--lucent-radius-md)",padding:"6px 10px",fontSize:"var(--lucent-font-size-xs)",outline:"none",fontFamily:"inherit",boxSizing:"border-box"},W={flex:1,overflowY:"auto",minHeight:0},We={display:"flex",alignItems:"center",gap:8,width:"100%",padding:"10px 12px",background:"none",border:"none",cursor:"pointer",color:"inherit",fontFamily:"inherit",textAlign:"left"},Ne={fontSize:10,fontWeight:600,textTransform:"uppercase",letterSpacing:"0.05em",color:"var(--lucent-text-secondary)",marginBottom:4,marginTop:4},Ue={display:"flex",alignItems:"center",gap:8,padding:"10px 12px",borderTop:"1px solid var(--lucent-border-default)",flexShrink:0};function Ke(t){const n=t.toLowerCase().split("+");return{ctrl:n.includes("ctrl"),meta:n.includes("meta")||n.includes("cmd"),shift:n.includes("shift"),alt:n.includes("alt"),key:n[n.length-1]??""}}function He(t,n){const o=navigator.platform.toUpperCase().includes("MAC");return(n.meta||n.ctrl?o?t.metaKey:t.ctrlKey:!t.ctrlKey&&!t.metaKey)&&n.shift===t.shiftKey&&n.alt===t.altKey&&t.key.toLowerCase()===n.key}function Je({shortcut:t="meta+shift+d",position:n="right",defaultOpen:o=!1,onThemeChange:i,zIndex:c=99999}){const[l,u]=h.useState(o),[f,d]=h.useState("overlay"),{theme:m}=s.useLucent(),b=oe(),v=h.useCallback(()=>u(w=>!w),[]);return h.useEffect(()=>{if(!l||f!=="push"){document.body.style.removeProperty(`margin-${n}`),document.body.style.removeProperty("transition");return}return document.body.style.transition="margin 200ms ease",document.body.style[n==="right"?"marginRight":"marginLeft"]="320px",()=>{document.body.style.removeProperty(`margin-${n}`),document.body.style.removeProperty("transition")}},[l,f,n]),h.useEffect(()=>{const w=Ke(t),T=C=>{He(C,w)&&(C.preventDefault(),v())};return document.addEventListener("keydown",T),()=>document.removeEventListener("keydown",T)},[t,v]),ne.createPortal(e.jsxs(e.Fragment,{children:[!l&&e.jsx("button",{onClick:v,style:{...qe,[n]:16,zIndex:c},title:"Open Lucent DevTools",children:e.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 60 60",fill:"none",children:[e.jsx("rect",{x:"8",y:"8",width:"18",height:"22",rx:"2",fill:"#e9c96b",opacity:"0.92"}),e.jsx("rect",{x:"8",y:"40",width:"44",height:"12",rx:"2",fill:"#e9c96b",opacity:"0.92"}),e.jsx("rect",{x:"36",y:"8",width:"16",height:"28",rx:"2",fill:"#e9c96b",opacity:"0.08"})]})}),l&&e.jsx("div",{style:{zIndex:c},children:e.jsx(Ae,{state:b,theme:m,position:n,mode:f,onModeChange:d,...i!==void 0&&{onThemeChange:i},onClose:v})})]}),document.body)}const qe={position:"fixed",bottom:16,width:40,height:40,borderRadius:"50%",background:k.bg,border:`1px solid ${k.border}`,cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",boxShadow:"0 2px 12px rgba(0, 0, 0, 0.4)",transition:"transform 150ms ease, box-shadow 150ms ease"};exports.LucentDevTools=Je;
|