@hanzo/design 0.4.0 → 0.4.2

package/components/core/Avatar.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 export function Avatar({ size = 32, style, children, ...rest }) {
   return (
-    <span style={{position:'relative',display:'inline-flex',alignItems:'center',justifyContent:'center',width:size,height:size,flexShrink:0,borderRadius:'var(--radius-full)',overflow:'hidden',border:'1px solid var(--border-hairline)',background:'linear-gradient(to bottom right,var(--neutral-700),var(--neutral-900))',...style}} {...rest}>
+    <span style={{position:'relative',display:'inline-flex',alignItems:'center',justifyContent:'center',width:size,height:size,flexShrink:0,borderRadius:'var(--radius-full)',overflow:'hidden',border:'1px solid var(--border)',background:'linear-gradient(to bottom right,var(--muted-foreground),var(--surface-3))',...style}} {...rest}>
       {children}
     </span>
   )

package/components/core/Badge.jsx

@@ -1,13 +1,16 @@
 import React from 'react'
 
-/** Rank is carried by opacity, never by hue (DESIGN.md §2.3). */
+/** Rank is carried by lift, never by hue (DESIGN.md §2.3).
+    The rungs come off the SURFACE ladder and --glass, not off --white-*: the
+    opacity ladder is white-on-white in the light theme, so a tier2 pill drawn
+    from --white-15 was an invisible chip the moment a surface went light. */
 const V = {
-  default:{background:'var(--white-10)',color:'var(--text-primary)',border:'1px solid var(--border)'},
+  default:{background:'var(--glass-strong)',color:'var(--text-primary)',border:'1px solid var(--border)'},
   secondary:{background:'var(--secondary)',color:'var(--secondary-foreground)',border:'1px solid transparent'},
-  outline:{background:'transparent',color:'var(--text-secondary)',border:'1px solid var(--border-card)'},
-  tier1:{background:'var(--white-05)',color:'var(--text-tertiary)',border:'1px solid var(--border-card)'},
-  tier2:{background:'var(--white-15)',color:'var(--text-secondary)',border:'1px solid var(--border-card)'},
-  tier3:{background:'var(--white-20)',color:'var(--text-primary)',border:'1px solid var(--white-20)'},
+  outline:{background:'transparent',color:'var(--text-secondary)',border:'1px solid var(--border)'},
+  tier1:{background:'var(--glass)',color:'var(--text-tertiary)',border:'1px solid var(--border)'},
+  tier2:{background:'var(--surface-2)',color:'var(--text-secondary)',border:'1px solid var(--border)'},
+  tier3:{background:'var(--surface-3)',color:'var(--text-primary)',border:'1px solid var(--border-strong)'},
   error:{background:'var(--state-error-bg)',color:'var(--state-error-text)',border:'1px solid transparent'},
 }
 
@@ -31,7 +34,7 @@ export function Badge({ variant = 'default', pill = true, style, children, ...re
 /** The eyebrow pill above a hero headline. */
 export function EyebrowBadge({ children, style, ...rest }) {
   return (
-    <span style={{display:'inline-flex',alignItems:'center',gap:8,padding:'8px 16px',borderRadius:'var(--radius-full)',border:'1px solid var(--border-hairline)',background:'var(--white-05)',fontSize:'var(--text-sm)',color:'var(--neutral-200)',...style}} {...rest}>{children}</span>
+    <span style={{display:'inline-flex',alignItems:'center',gap:8,padding:'8px 16px',borderRadius:'var(--radius-full)',border:'1px solid var(--border)',background:'var(--glass)',fontSize:'var(--text-sm)',color:'var(--text-secondary)',...style}} {...rest}>{children}</span>
   )
 }
 

package/components/core/Button.jsx

@@ -3,7 +3,8 @@ import React from 'react'
 const V = {
   primary:{background:'var(--primary)',color:'var(--primary-foreground)',border:'1px solid transparent'},
   secondary:{background:'var(--secondary)',color:'var(--secondary-foreground)',border:'1px solid transparent'},
-  outline:{background:'transparent',color:'var(--text-primary)',border:'1px solid var(--border)'},
+  // --border-control, not --border: an outline button's edge IS the button.
+  outline:{background:'transparent',color:'var(--text-primary)',border:'1px solid var(--border-control)'},
   ghost:{background:'transparent',color:'var(--text-secondary)',border:'1px solid transparent'},
   link:{background:'transparent',color:'var(--text-primary)',border:'1px solid transparent',textDecoration:'underline',textUnderlineOffset:4,padding:0,height:'auto'},
   destructive:{background:'var(--destructive)',color:'var(--destructive-foreground)',border:'1px solid transparent'},
@@ -14,18 +15,34 @@ const SZ = {
   lg:{height:44,padding:'0 24px',fontSize:'var(--text-sm)'},
   icon:{height:36,width:36,padding:0},
 }
-const HOVER = { primary:'primary', secondary:'secondary', outline:'accent', ghost:'accent', destructive:'destructive', link:'link' }
+// Hover, per variant. A FILLED button does not brighten on hover — its fill is
+// already the top of the ink ramp — so it steps DOWN that ramp and
+// gains a bloom instead, which is the reference's own move
+// (.primary-btn:hover → --accent-hover + a white glow). This used to be
+// `opacity: 0.9`, which faded the button toward the page: the one thing a
+// hovered control must never do is look more disabled than it did at rest.
+// An UNFILLED button has room to gain, so it takes a surface and an edge.
+const HOVER = {
+  primary:    { background:'var(--primary-hover)', boxShadow:'var(--bloom)' },
+  secondary:  { background:'var(--secondary-hover)', boxShadow:'var(--edge-highlight)' },
+  // An unfilled button's hover is the SURFACE arriving, not the edge moving:
+  // --border-control (.15) to --border-strong (.16) is a one-percent step and
+  // reads as nothing, so the fill has to carry it. --glass-strong, not --glass;
+  // at .05 the fill was invisible too and the variant had no hover at all.
+  outline:    { background:'var(--glass-strong)', borderColor:'var(--border-strong)', color:'var(--text-primary)' },
+  ghost:      { background:'var(--glass-strong)', color:'var(--text-primary)' },
+  destructive:{ background:'var(--destructive-hover)', boxShadow:'var(--bloom)' },
+  link:       { textDecoration:'underline' },
+}
+// The filled variants catch the light along their top edge, the same way every
+// raised surface in this system does.
+const LIT = new Set(['primary', 'destructive'])
 
 export function Button({ variant = 'primary', size = 'default', pill = false, disabled, style, children, ...rest }) {
   const [hover, setHover] = React.useState(false)
   const v = V[variant] || V.primary
   const s = SZ[size] || SZ.default
-  const h = HOVER[variant]
-  const hoverStyle = !hover || disabled ? null
-    : h === 'primary' || h === 'destructive' ? { opacity: 0.9 }
-    : h === 'secondary' ? { background: 'var(--neutral-800)' }
-    : h === 'accent' ? { background: 'var(--accent)', color: 'var(--text-primary)' }
-    : { textDecoration: 'underline' }
+  const hoverStyle = !hover || disabled ? null : HOVER[variant]
   return (
     <button
       disabled={disabled}
@@ -34,10 +51,18 @@ export function Button({ variant = 'primary', size = 'default', pill = false, di
       style={{
         display:'inline-flex',alignItems:'center',justifyContent:'center',gap:8,whiteSpace:'nowrap',
         fontFamily:'var(--font-sans)',fontWeight:'var(--weight-medium)',lineHeight:1,
-        borderRadius: pill ? 'var(--radius-full)' : 'var(--radius-sm)',
+        // --radius-md (8px), not --radius-sm (6px): on a 36px control that one
+        // step is the difference between boxy and considered. --radius-sm keeps
+        // its job on genuinely small parts (badges, chips, menu rows).
+        borderRadius: pill ? 'var(--radius-full)' : 'var(--radius-md)',
+        letterSpacing:'var(--tracking-tight)',
         cursor: disabled ? 'not-allowed' : 'pointer',
         opacity: disabled ? 0.5 : 1,
-        transition:'background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out)',
+        boxShadow: LIT.has(variant) ? 'var(--edge-highlight)' : 'none',
+        // `transform` is in the list because tokens/base.css scales this button
+        // to .98 while it is held down, and a transform with no transition
+        // snaps rather than presses.
+        transition:'background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out), transform var(--duration-press) var(--ease-out)',
         ...v, ...s, ...hoverStyle, ...style,
       }}
       {...rest}

package/components/core/Card.jsx

@@ -7,8 +7,9 @@ const FILL = {
   plain:'transparent',
 }
 
-export function Card({ variant = 'default', sheen = false, interactive = false, style, children, ...rest }) {
+export function Card({ variant = 'default', sheen = false, interactive = false, selected = false, style, children, ...rest }) {
   const [hover, setHover] = React.useState(false)
+  const edge = selected ? 'var(--border-selected)' : hover ? 'var(--border-strong)' : 'var(--border)'
   return (
     <div
       onMouseEnter={interactive ? () => setHover(true) : undefined}
@@ -16,13 +17,24 @@ export function Card({ variant = 'default', sheen = false, interactive = false,
       style={{
         position:'relative',overflow:'hidden',
         borderRadius:'var(--radius-lg)',
-        border:'1px solid ' + (hover ? 'var(--border-strong)' : 'var(--border-hairline)'),
+        border:'1px solid ' + edge,
         background:FILL[variant] || FILL.default,
-        transition:'border-color var(--duration-fast) var(--ease-out)',
+        // The card catches the light along its top edge at rest, and picks up a
+        // real drop only when it lifts. A shadow on a resting card is noise; a
+        // card with NO inset highlight is a coloured rectangle rather than a
+        // surface, which is why the highlight is unconditional and the drop is
+        // not. See tokens/elevation.css for why this is the part that matters
+        // on a near-black ground.
+        boxShadow: hover ? 'var(--edge-highlight), var(--shadow-lg)' : 'var(--edge-highlight)',
+        transform: hover ? 'translateY(-1px)' : 'none',
+        transition:'border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out)',
         ...style,
       }}
       {...rest}
     >
+      {/* The top hairline: brightest at the centre, dissolved before either
+          corner, so the edge never terminates in a hard stop. */}
+      <div aria-hidden style={{position:'absolute',top:0,left:0,right:0,height:1,pointerEvents:'none',background:'var(--sheen-edge)'}} />
       {sheen && <div aria-hidden style={{position:'absolute',inset:0,pointerEvents:'none',background:'var(--sheen-card)',opacity:0.7}} />}
       {children}
     </div>
@@ -33,10 +45,13 @@ export function CardHeader({ style, children, ...rest }) {
   return <div style={{position:'relative',padding:'24px 24px 0',display:'flex',flexDirection:'column',gap:6,...style}} {...rest}>{children}</div>
 }
 export function CardTitle({ style, children, ...rest }) {
-  return <h3 style={{fontSize:'var(--text-base)',fontWeight:'var(--weight-semibold)',color:'var(--text-primary)',...style}} {...rest}>{children}</h3>
+  // --text-lg over --text-base: at 14px a title sat one point above its own
+  // 13px description, which is not a hierarchy, it is a rounding error. The
+  // step up plus the tighter tracking is what makes a card scannable.
+  return <h3 style={{fontSize:'var(--text-lg)',fontWeight:'var(--weight-semibold)',letterSpacing:'var(--tracking-tight)',color:'var(--text-primary)',...style}} {...rest}>{children}</h3>
 }
 export function CardDescription({ style, children, ...rest }) {
-  return <p style={{fontSize:'var(--text-sm)',lineHeight:'var(--leading-relaxed)',color:'var(--text-helper)',...style}} {...rest}>{children}</p>
+  return <p style={{fontSize:'var(--text-sm)',lineHeight:'var(--leading-relaxed)',color:'var(--text-tertiary)',...style}} {...rest}>{children}</p>
 }
 export function CardContent({ style, children, ...rest }) {
   return <div style={{position:'relative',padding:24,...style}} {...rest}>{children}</div>

package/components/core/Progress.jsx

@@ -4,7 +4,7 @@ export function Progress({ value = 0, max = 100, height = 6, style, ...rest }) {
   const pct = Math.max(0, Math.min(100, (value / max) * 100))
   return (
     <div role="progressbar" aria-valuenow={value} aria-valuemin={0} aria-valuemax={max}
-      style={{position:'relative',width:'100%',height,borderRadius:'var(--radius-full)',background:'var(--neutral-800)',overflow:'hidden',...style}} {...rest}>
+      style={{position:'relative',width:'100%',height,borderRadius:'var(--radius-full)',background:'var(--glass-strong)',overflow:'hidden',...style}} {...rest}>
       <div style={{height:'100%',width:pct+'%',background:'var(--primary)',borderRadius:'var(--radius-full)',transition:'width var(--duration-base) var(--ease-out)'}} />
     </div>
   )

package/components/core/Table.jsx

@@ -4,7 +4,7 @@ export function Table({ style, children, ...rest }) {
   return <table style={{width:'100%',borderCollapse:'collapse',fontSize:'var(--text-sm)',...style}} {...rest}>{children}</table>
 }
 export function TableHeader({ style, children, ...rest }) {
-  return <thead style={{background:'var(--black)',...style}} {...rest}>{children}</thead>
+  return <thead style={{background:'var(--surface-2)',...style}} {...rest}>{children}</thead>
 }
 export function TableBody({ style, children, ...rest }) {
   return <tbody style={style} {...rest}>{children}</tbody>
@@ -15,7 +15,7 @@ export function TableRow({ interactive = false, style, children, ...rest }) {
     <tr
       onMouseEnter={interactive ? () => setHover(true) : undefined}
       onMouseLeave={interactive ? () => setHover(false) : undefined}
-      style={{borderTop:'1px solid var(--border-hairline)',background: hover ? 'rgb(23 23 23 / .6)' : 'transparent',cursor: interactive ? 'pointer' : 'default',transition:'background-color var(--duration-fast) var(--ease-out)',...style}}
+      style={{borderTop:'1px solid var(--border)',background: hover ? 'var(--glass)' : 'transparent',cursor: interactive ? 'pointer' : 'default',transition:'background-color var(--duration-fast) var(--ease-out)',...style}}
       {...rest}
     >
       {children}

package/components/forms/Checkbox.jsx

@@ -15,7 +15,7 @@ export function Checkbox({ checked, defaultChecked, onChange, disabled, label, s
       onKeyDown={(e)=>{if(e.key===' '||e.key==='Enter'){e.preventDefault();toggle()}}}
       style={{
         display:'inline-flex',alignItems:'center',justifyContent:'center',width:16,height:16,flexShrink:0,
-        borderRadius:4,border:'1px solid ' + (on ? 'var(--primary)' : 'var(--border-strong)'),
+        borderRadius:4,border:'1px solid ' + (on ? 'var(--primary)' : 'var(--border-control)'),
         background: on ? 'var(--primary)' : 'transparent',
         cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? 0.5 : 1,
         transition:'background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out)',

package/components/forms/Input.jsx

@@ -2,17 +2,27 @@ import React from 'react'
 
 export function Input({ invalid = false, style, ...rest }) {
   const [focus, setFocus] = React.useState(false)
+  const [hover, setHover] = React.useState(false)
   return (
     <input
       onFocus={(e)=>{setFocus(true);rest.onFocus&&rest.onFocus(e)}}
       onBlur={(e)=>{setFocus(false);rest.onBlur&&rest.onBlur(e)}}
+      onMouseEnter={()=>setHover(true)}
+      onMouseLeave={()=>setHover(false)}
       style={{
         width:'100%',height:36,padding:'0 12px',
-        fontFamily:'var(--font-sans)',fontSize:'var(--text-sm)',color:'var(--foreground)',
-        background:'var(--black)',
-        border:'1px solid ' + (invalid ? 'var(--state-error)' : focus ? 'var(--ring)' : 'var(--border)'),
-        borderRadius:'var(--radius-sm)',outline:'none',
-        transition:'border-color var(--duration-fast) var(--ease-out)',
+        fontFamily:'var(--font-sans)',fontSize:'var(--text-control)',color:'var(--foreground)',
+        // A hovered field lifts its SURFACE. Moving its edge from .15 to .16
+        // is a state you cannot see, and a state you cannot see is dead code.
+        background: hover && !focus ? 'var(--surface-3)' : 'var(--surface-2)',
+        border:'1px solid ' + (invalid ? 'var(--state-error)' : focus ? 'var(--border-focus)' : 'var(--border-control)'),
+        borderRadius:'var(--radius-md)',
+        outline:'none',
+        // Focus is the edge brightening plus a soft halo just outside it — the
+        // reference's .composer-box:focus-within, and the same recipe
+        // tokens/base.css gives a bare <input>. Not a second hard ring.
+        boxShadow: focus ? 'var(--ring-focus)' : 'none',
+        transition:'border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out)',
         ...style,
       }}
       {...rest}

package/components/forms/Select.jsx

@@ -11,9 +11,9 @@ export function Select({ options = [], value, onChange, placeholder, style, chil
         onFocus={()=>setFocus(true)} onBlur={()=>setFocus(false)}
         style={{
           appearance:'none',width:'100%',height:36,padding:'0 32px 0 12px',
-          fontFamily:'var(--font-sans)',fontSize:'var(--text-sm)',color:'var(--foreground)',
-          background:'var(--black)',border:'1px solid ' + (focus ? 'var(--ring)' : 'var(--border)'),
-          borderRadius:'var(--radius-sm)',outline:'none',cursor:'pointer',
+          fontFamily:'var(--font-sans)',fontSize:'var(--text-control)',color:'var(--foreground)',
+          background:'var(--surface-2)',border:'1px solid ' + (focus ? 'var(--border-focus)' : 'var(--border-control)'),
+          borderRadius:'var(--radius-sm)',cursor:'pointer',
           transition:'border-color var(--duration-fast) var(--ease-out)',
           ...style,
         }}

package/components/forms/Slider.jsx

@@ -10,7 +10,7 @@ export function Slider({ min = 0, max = 100, step = 1, value, defaultValue = 0,
       onChange={(e) => { const n = Number(e.target.value); if (value === undefined) setInner(n); onChange && onChange(n) }}
       style={{
         appearance:'none',WebkitAppearance:'none',width:'100%',height:16,background:'transparent',cursor:'pointer',
-        backgroundImage:'linear-gradient(var(--primary),var(--primary)),linear-gradient(var(--neutral-800),var(--neutral-800))',
+        backgroundImage:'linear-gradient(var(--primary),var(--primary)),linear-gradient(var(--glass-strong),var(--glass-strong))',
         backgroundSize: pct + '% 4px, 100% 4px',
         backgroundPosition:'left center, left center',
         backgroundRepeat:'no-repeat',

package/components/forms/Textarea.jsx

@@ -9,9 +9,9 @@ export function Textarea({ rows = 4, style, ...rest }) {
       onBlur={(e)=>{setFocus(false);rest.onBlur&&rest.onBlur(e)}}
       style={{
         width:'100%',padding:'8px 12px',resize:'vertical',
-        fontFamily:'var(--font-sans)',fontSize:'var(--text-sm)',lineHeight:'var(--leading-relaxed)',color:'var(--foreground)',
-        background:'var(--black)',border:'1px solid ' + (focus ? 'var(--ring)' : 'var(--border)'),
-        borderRadius:'var(--radius-sm)',outline:'none',
+        fontFamily:'var(--font-sans)',fontSize:'var(--text-control)',lineHeight:'var(--leading-relaxed)',color:'var(--foreground)',
+        background:'var(--surface-2)',border:'1px solid ' + (focus ? 'var(--border-focus)' : 'var(--border-control)'),
+        borderRadius:'var(--radius-sm)',
         transition:'border-color var(--duration-fast) var(--ease-out)',
         ...style,
       }}

package/components/navigation/Accordion.jsx

@@ -11,7 +11,7 @@ export function Accordion({ type = 'single', defaultValue = null, style, childre
   const isOpen = (v) => (type === 'multiple' ? open.includes(v) : open === v)
   return (
     <Ctx.Provider value={{ isOpen, toggle }}>
-      <div style={{borderTop:'1px solid var(--border-hairline)',...style}} {...rest}>{children}</div>
+      <div style={{borderTop:'1px solid var(--border)',...style}} {...rest}>{children}</div>
     </Ctx.Provider>
   )
 }
@@ -20,7 +20,7 @@ export function AccordionItem({ value, title, style, children, ...rest }) {
   const { isOpen, toggle } = React.useContext(Ctx)
   const on = isOpen(value)
   return (
-    <div style={{borderBottom:'1px solid var(--border-hairline)',...style}} {...rest}>
+    <div style={{borderBottom:'1px solid var(--border)',...style}} {...rest}>
       <button
         onClick={() => toggle(value)} aria-expanded={on}
         style={{display:'flex',width:'100%',alignItems:'center',justifyContent:'space-between',gap:16,padding:'18px 0',background:'transparent',border:'none',cursor:'pointer',textAlign:'left',fontFamily:'var(--font-sans)',fontSize:'var(--text-base)',fontWeight:'var(--weight-medium)',color:'var(--text-primary)'}}

package/components/navigation/Tabs.jsx

@@ -15,24 +15,35 @@ export function Tabs({ defaultValue, value, onValueChange, style, children, ...r
 
 export function TabsList({ style, children, ...rest }) {
   return (
-    <div role="tablist" style={{display:'inline-flex',alignItems:'center',gap:4,padding:4,borderRadius:'var(--radius-sm)',background:'var(--muted)',border:'1px solid var(--border)',...style}} {...rest}>{children}</div>
+    // alignSelf: a segmented control is as wide as its segments. Without it the
+    // list is a flex ITEM of the Tabs column and stretches to the full row,
+    // which turns a compact control into a full-width bar.
+    <div role="tablist" style={{display:'inline-flex',alignSelf:'flex-start',maxWidth:'100%',overflowX:'auto',alignItems:'center',gap:2,padding:3,borderRadius:'var(--radius-lg)',background:'var(--surface-2)',border:'1px solid var(--border)',...style}} {...rest}>{children}</div>
   )
 }
 
 export function TabsTrigger({ value, style, children, ...rest }) {
   const { value: active, setValue } = React.useContext(Ctx)
+  const [hover, setHover] = React.useState(false)
   const on = active === value
   return (
     <button
       role="tab" aria-selected={on} onClick={() => setValue(value)}
+      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
       style={{
-        display:'inline-flex',alignItems:'center',gap:8,height:30,padding:'0 12px',
+        display:'inline-flex',alignItems:'center',gap:8,height:30,padding:'0 14px',
         fontFamily:'var(--font-sans)',fontSize:'var(--text-sm)',fontWeight:'var(--weight-medium)',
-        color: on ? 'var(--text-primary)' : 'var(--text-helper)',
-        background: on ? 'var(--secondary)' : 'transparent',
-        border:'1px solid ' + (on ? 'var(--border)' : 'transparent'),
-        borderRadius:'calc(var(--radius-sm) - 2px)',cursor:'pointer',whiteSpace:'nowrap',
-        transition:'color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out)',
+        letterSpacing:'var(--tracking-tight)',
+        color: on ? 'var(--text-primary)' : hover ? 'var(--text-secondary)' : 'var(--text-helper)',
+        // The selected tab is a surface that has RISEN out of the track: it
+        // lifts a rung, catches the light on its top edge and casts a small
+        // drop. A selected tab that only changes colour reads as a link that
+        // happens to be a different grey.
+        background: on ? 'var(--surface-3)' : 'transparent',
+        border:'1px solid ' + (on ? 'var(--border-strong)' : 'transparent'),
+        boxShadow: on ? 'var(--edge-highlight), var(--shadow-sm)' : 'none',
+        borderRadius:'calc(var(--radius-lg) - 3px)',cursor:'pointer',whiteSpace:'nowrap',
+        transition:'color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-press) var(--ease-out)',
         ...style,
       }}
       {...rest}

package/components/navigation/navigation.card.html

@@ -5,7 +5,7 @@
 <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
 <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
 <script src="../../_ds_bundle.js"></script>
-<style>body{margin:0;padding:20px;background:#000;font-family:var(--font-sans)}pre{margin:0;padding:16px;background:var(--card);border:1px solid var(--border-hairline);border-radius:var(--radius-lg);font-size:12px;line-height:1.7;color:var(--neutral-300);overflow:auto}</style></head>
+<style>body{margin:0;padding:20px;background:#000;font-family:var(--font-sans)}pre{margin:0;padding:16px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);font-size:12px;line-height:1.7;color:var(--neutral-300);overflow:auto}</style></head>
 <body><div id="root"></div>
 <script type="text/babel">
 const { Tabs, TabsList, TabsTrigger, TabsContent, Accordion, AccordionItem } = window.HanzoDesignSystem_0a9445;

package/components/overlays/Dialog.jsx

@@ -11,7 +11,7 @@ export function Dialog({ open, onOpenChange, children }) {
   return (
     <div
       onClick={() => onOpenChange && onOpenChange(false)}
-      style={{position:'fixed',inset:0,zIndex:'var(--z-modal)',display:'flex',alignItems:'center',justifyContent:'center',padding:24,background:'var(--surface-scrim)',backdropFilter:'blur(4px)',animation:'hanzo-fade-up var(--duration-fast) var(--ease-out)'}}
+      style={{position:'fixed',inset:0,zIndex:'var(--z-modal)',display:'flex',alignItems:'center',justifyContent:'center',padding:24,background:'var(--surface-scrim)',backdropFilter:'blur(8px) saturate(140%)',animation:'hanzo-fade-up var(--duration-fast) var(--ease-out)'}}
     >
       {children}
     </div>
@@ -22,7 +22,7 @@ export function DialogContent({ width = 480, style, children, ...rest }) {
   return (
     <div
       role="dialog" aria-modal="true" onClick={(e) => e.stopPropagation()}
-      style={{width:'100%',maxWidth:width,maxHeight:'85vh',overflowY:'auto',padding:24,display:'flex',flexDirection:'column',gap:16,background:'var(--popover)',color:'var(--popover-foreground)',border:'1px solid var(--border-hairline)',borderRadius:'var(--radius-xl)',boxShadow:'var(--shadow-floating)',...style}}
+      style={{width:'100%',maxWidth:width,maxHeight:'85vh',overflowY:'auto',padding:24,display:'flex',flexDirection:'column',gap:16,background:'var(--popover)',color:'var(--popover-foreground)',border:'1px solid var(--border-strong)',borderRadius:'var(--radius-xl)',boxShadow:'var(--edge-highlight), var(--shadow-floating)',animation:'hanzo-zoom-in var(--duration-base) var(--ease-emphasis)',...style}}
       {...rest}
     >{children}</div>
   )

package/components/overlays/DropdownMenu.jsx

@@ -19,7 +19,7 @@ export function DropdownMenu({ align = 'right', hover = false, trigger, style, c
       <span onClick={() => setOpen((v) => !v)} style={{display:'inline-flex'}}>{trigger}</span>
       {open && (
         <div style={{position:'absolute',top:'100%',[align]:0,paddingTop:12,zIndex:'var(--z-dropdown)',minWidth:208}}>
-          <div style={{display:'flex',flexDirection:'column',padding:8,background:'var(--surface-overlay)',border:'1px solid var(--border-hairline)',borderRadius:'var(--radius-xl)',boxShadow:'var(--shadow-floating)',backdropFilter:'blur(16px)',animation:'hanzo-fade-down var(--duration-fast) var(--ease-out)'}}>
+          <div style={{display:'flex',flexDirection:'column',padding:6,background:'var(--surface-overlay)',border:'1px solid var(--border-strong)',borderRadius:'var(--radius-lg)',boxShadow:'var(--edge-highlight), var(--shadow-floating)',backdropFilter:'blur(20px) saturate(180%)',animation:'hanzo-zoom-in var(--duration-fast) var(--ease-emphasis)'}}>
             {children}
           </div>
         </div>
@@ -33,17 +33,21 @@ export function DropdownMenuItem({ desc, style, children, ...rest }) {
   return (
     <a
       onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
-      style={{display:'block',padding: desc ? '10px 12px' : '8px 12px',borderRadius:'var(--radius-sm)',background: hover ? 'var(--neutral-900)' : 'transparent',cursor:'pointer',textDecoration:'none',transition:'background-color var(--duration-fast) var(--ease-out)',...style}}
+      style={{display:'block',padding: desc ? '10px 12px' : '8px 12px',borderRadius:'var(--radius-sm)',background: hover ? 'var(--glass-strong)' : 'transparent',cursor:'pointer',textDecoration:'none',transition:'background-color var(--duration-fast) var(--ease-out)',...style}}
       {...rest}
     >
-      <span style={{display:'block',fontSize:'var(--text-sm)',fontWeight:'var(--weight-medium)',color:'var(--neutral-100)'}}>{children}</span>
-      {desc && <span style={{display:'block',marginTop:2,fontSize:'var(--text-xs)',color:'var(--neutral-500)'}}>{desc}</span>}
+      {/* --text-primary / --text-tertiary, not --neutral-100 / --neutral-500.
+          The neutral ladder is a PALETTE: it does not invert, so a menu item
+          painted from it rendered #f5f5f5 text on the light theme's #ffffff
+          popover — the item did not change colour, it stopped being legible. */}
+      <span style={{display:'block',fontSize:'var(--text-sm)',fontWeight:'var(--weight-medium)',color:'var(--text-primary)'}}>{children}</span>
+      {desc && <span style={{display:'block',marginTop:2,fontSize:'var(--text-xs)',lineHeight:'var(--leading-normal)',color:'var(--text-tertiary)'}}>{desc}</span>}
     </a>
   )
 }
 export function DropdownMenuLabel({ style, children, ...rest }) {
-  return <span style={{padding:'6px 12px',fontSize:'var(--text-xs)',fontWeight:'var(--weight-medium)',textTransform:'uppercase',letterSpacing:'var(--tracking-wide)',color:'var(--neutral-500)',...style}} {...rest}>{children}</span>
+  return <span style={{padding:'6px 12px',fontSize:'var(--text-xs)',fontWeight:'var(--weight-semibold)',textTransform:'uppercase',letterSpacing:'var(--tracking-widest)',color:'var(--text-tertiary)',...style}} {...rest}>{children}</span>
 }
 export function DropdownMenuSeparator({ style }) {
-  return <span style={{height:1,margin:'6px 4px',background:'var(--border-hairline)',...style}} />
+  return <span style={{height:1,margin:'6px 4px',background:'var(--border)',...style}} />
 }

package/components/overlays/Sheet.jsx

@@ -9,8 +9,8 @@ export function Sheet({ open, onOpenChange, side = 'right', width = 380, childre
   }, [open, onOpenChange])
   if (!open) return null
   const pos = side === 'left'
-    ? { left: 0, top: 0, bottom: 0, width, borderRight: '1px solid var(--border-hairline)' }
-    : { right: 0, top: 0, bottom: 0, width, borderLeft: '1px solid var(--border-hairline)' }
+    ? { left: 0, top: 0, bottom: 0, width, borderRight: '1px solid var(--border)' }
+    : { right: 0, top: 0, bottom: 0, width, borderLeft: '1px solid var(--border)' }
   return (
     <div onClick={() => onOpenChange && onOpenChange(false)} style={{position:'fixed',inset:0,zIndex:'var(--z-modal)',background:'var(--surface-scrim)'}}>
       <div
@@ -21,7 +21,7 @@ export function Sheet({ open, onOpenChange, side = 'right', width = 380, childre
   )
 }
 export function SheetHeader({ style, children, ...rest }) {
-  return <div style={{padding:'20px 24px',borderBottom:'1px solid var(--border-hairline)',display:'flex',flexDirection:'column',gap:4,...style}} {...rest}>{children}</div>
+  return <div style={{padding:'20px 24px',borderBottom:'1px solid var(--border)',display:'flex',flexDirection:'column',gap:4,...style}} {...rest}>{children}</div>
 }
 export function SheetTitle({ style, children, ...rest }) {
   return <h2 style={{fontSize:'var(--text-base)',fontWeight:'var(--weight-semibold)',color:'var(--text-primary)',...style}} {...rest}>{children}</h2>

package/components/overlays/Toaster.jsx

@@ -33,7 +33,7 @@ export function Toaster({ duration = 3500, position = 'bottom-right' }) {
       {items.map((i) => (
         <div key={i.id} style={{
           minWidth:260,maxWidth:380,padding:'12px 14px',display:'flex',alignItems:'flex-start',gap:10,
-          background:'var(--surface-overlay)',border:'1px solid ' + (i.tone === 'error' ? 'var(--state-error)' : 'var(--border-hairline)'),
+          background:'var(--surface-overlay)',border:'1px solid ' + (i.tone === 'error' ? 'var(--state-error)' : 'var(--border)'),
           borderRadius:'var(--radius-lg)',boxShadow:'var(--shadow-floating)',backdropFilter:'blur(16px)',
           fontSize:'var(--text-sm)',color:'var(--neutral-100)',animation:'hanzo-slide-up-fade var(--duration-base) var(--ease-out)',
         }}>