zark-design 1.0.0 → 2.0.0

package/templates/patterns.jsx

@@ -1,268 +0,0 @@
-// Zark — Patterns: modal, onboarding, code-block, data table, date picker, banner
-
-const ModalShowcase = () => (
-  <Panel title="Modal — onboarding step" padded={false}>
-    <div style={{
-      padding: 32, background: `
-        radial-gradient(ellipse at top, var(--paper) 0%, var(--canvas) 80%)
-      `, position:'relative', minHeight: 380,
-    }}>
-      <div style={{
-        position:'absolute', inset:0,
-        background:'rgba(20, 17, 12, 0.04)',
-        backdropFilter:'blur(2px)',
-      }}/>
-      <div style={{
-        position:'relative', maxWidth: 460, margin:'24px auto',
-        background:'var(--surface)',
-        border:'1px solid var(--line-200)',
-        borderRadius:'var(--r-2xl)',
-        boxShadow:'var(--shadow-modal)',
-        overflow:'hidden',
-      }}>
-        <div style={{ padding:'24px 24px 0' }}>
-          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom: 6 }}>
-            <h3 style={{ margin: 0, fontSize: 20, fontWeight: 600, fontFamily:'var(--font-display)', letterSpacing:'-0.012em', color:'var(--ink-700)' }}>Let's get you started</h3>
-            <Tag tone="default" size="xs" square>Optional</Tag>
-          </div>
-          <p style={{ margin:'0 0 16px', fontSize: 12, color:'var(--ink-400)' }}>Complete these quick actions to earn bonus credits for your account.</p>
-          <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom: 8 }}>
-            <div style={{ display:'flex', gap: 4 }}>
-              <span style={{ width: 28, height: 4, borderRadius: 2, background:'var(--ember-500)' }}/>
-              <span style={{ width: 12, height: 4, borderRadius: 2, background:'var(--ink-100)' }}/>
-              <span style={{ width: 12, height: 4, borderRadius: 2, background:'var(--ink-100)' }}/>
-              <span style={{ width: 12, height: 4, borderRadius: 2, background:'var(--ink-100)' }}/>
-            </div>
-            <Tag tone="default" size="xs" square>Step 1 of 4</Tag>
-          </div>
-        </div>
-        <div style={{ padding: 4 }}>
-          {[
-            {t:'Email Verified', d:'Your email has been verified', claimed: true, c: ''},
-            {t:'Star our GitHub repo', d:'Check out our open source code and contribute', c:'+100 credits'},
-            {t:'Join our Discord', d:'Connect with us and get community help', c:'+50 credits'},
-            {t:'Follow us on X', d:'Stay updated on new features and launches', c:'+50 credits'},
-          ].map(item => (
-            <div key={item.t} style={{ padding:'12px 20px', borderRadius:'var(--r-md)', display:'flex', alignItems:'center', justifyContent:'space-between' }}>
-              <div>
-                <div style={{ fontSize: 13, fontWeight: 500, color: item.claimed ? 'var(--success-700)' : 'var(--ember-700)' }}>{item.t}</div>
-                <div style={{ fontSize: 11, color:'var(--ink-400)', marginTop: 2 }}>{item.d}</div>
-              </div>
-              {item.claimed ? <Tag tone="success" size="xs">Claimed</Tag> : <span style={{ fontSize: 12, color:'var(--ink-500)', fontFamily:'var(--font-mono)' }}>{item.c}</span>}
-            </div>
-          ))}
-        </div>
-        <div style={{ padding:'16px 20px', borderTop:'1px solid var(--line-100)', display:'flex', justifyContent:'flex-end' }}>
-          <Button variant="secondary">Continue</Button>
-        </div>
-      </div>
-    </div>
-  </Panel>
-);
-
-const CodeBlock = () => (
-  <Panel title="Code block — MCP integration">
-    <div style={{
-      background:'var(--surface)',
-      border:'1px solid var(--line-200)',
-      borderRadius:'var(--r-lg)',
-      padding: 16,
-      fontFamily:'var(--font-mono)', fontSize: 12, lineHeight: 1.7,
-      color:'var(--ink-600)', position:'relative',
-    }}>
-      <div style={{ position:'absolute', top: 10, right: 10, display:'flex', gap: 4 }}>
-        <Button variant="ghost" size="xs" icon={<Icons.Eye size={12}/>}/>
-        <Button variant="ghost" size="xs" icon={<Icons.Copy size={12}/>}/>
-      </div>
-      <div>{'{'}</div>
-      <div style={{ paddingLeft: 16 }}><span style={{ color:'var(--code-fg)' }}>"mcpServers"</span>: {'{'}</div>
-      <div style={{ paddingLeft: 32 }}><span style={{ color:'var(--code-fg)' }}>"zark-mcp"</span>: {'{'}</div>
-      <div style={{ paddingLeft: 48 }}><span style={{ color:'var(--code-fg)' }}>"command"</span>: <span style={{ color:'var(--success-700)' }}>"npx"</span>,</div>
-      <div style={{ paddingLeft: 48 }}><span style={{ color:'var(--code-fg)' }}>"args"</span>: [<span style={{ color:'var(--success-700)' }}>"-y"</span>, <span style={{ color:'var(--success-700)' }}>"zark-mcp"</span>],</div>
-      <div style={{ paddingLeft: 48 }}><span style={{ color:'var(--code-fg)' }}>"env"</span>: {'{'}</div>
-      <div style={{ paddingLeft: 64 }}><span style={{ color:'var(--code-fg)' }}>"ZARK_API_KEY"</span>: <span style={{ color:'var(--success-700)' }}>"$API_KEY"</span></div>
-      <div style={{ paddingLeft: 48 }}>{'}'}</div>
-      <div style={{ paddingLeft: 32 }}>{'}'}</div>
-      <div style={{ paddingLeft: 16 }}>{'}'}</div>
-      <div>{'}'}</div>
-    </div>
-  </Panel>
-);
-
-const DataTableShowcase = () => (
-  <Panel title="Data table" padded={false}>
-    <div style={{
-      padding:'14px 18px',
-      borderBottom:'1px solid var(--line-100)',
-      display:'flex', alignItems:'center', justifyContent:'space-between',
-    }}>
-      <div style={{ display:'flex', gap: 8, alignItems:'center' }}>
-        <div style={{ width: 240 }}><Input size="sm" icon={<Icons.Search size={12}/>} placeholder="Search..."/></div>
-        <Button variant="secondary" size="sm" icon={<Icons.Filter size={12}/>}>/scrape</Button>
-      </div>
-      <Button variant="secondary" size="sm" icon={<Icons.Calendar size={12}/>} iconRight={<Icons.ChevDown size={12}/>}>Custom range</Button>
-    </div>
-    <div>
-      <div style={{
-        display:'grid', gridTemplateColumns:'120px 1fr 100px 60px 140px 40px',
-        padding:'10px 18px',
-        fontFamily:'var(--font-mono)', fontSize: 10,
-        letterSpacing:'var(--ls-wider)', textTransform:'uppercase',
-        color:'var(--ink-300)',
-        borderBottom:'1px solid var(--line-100)',
-      }}>
-        <span>Endpoint</span><span>URL</span><span>Status</span><span>Cr</span><span>Date</span><span></span>
-      </div>
-      {[
-        ['/SCRAPE','https://www.zark.dev/careers','Completed','1','Sep 08, 25 09:57 AM'],
-        ['/SCRAPE','https://www.zark.dev/playground/extract','Completed','2','Sep 08, 25 09:57 AM'],
-        ['/SCRAPE','https://www.zark.dev/extract','Failed','0','Sep 08, 25 09:55 AM'],
-        ['/SCRAPE','https://www.zark.dev/templates','Completed','1','Sep 08, 25 09:54 AM'],
-        ['/SCRAPE','https://www.zark.dev/signin/signup','Pending','—','Sep 08, 25 09:50 AM'],
-      ].map((row, i) => (
-        <div key={i} style={{
-          display:'grid', gridTemplateColumns:'120px 1fr 100px 60px 140px 40px',
-          padding:'14px 18px', alignItems:'center',
-          borderBottom: i < 4 ? '1px solid var(--line-100)' : 'none',
-          fontSize: 12,
-        }}>
-          <Tag tone="mono" size="xs" square>{row[0]}</Tag>
-          <span style={{ color:'var(--ink-600)', fontFamily:'var(--font-mono)', overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{row[1]}</span>
-          <Tag tone={row[2]==='Completed'?'success': row[2]==='Failed'?'danger':'warning'} size="xs">{row[2]}</Tag>
-          <span style={{ color:'var(--ink-500)', fontFamily:'var(--font-mono)' }}>{row[3]}</span>
-          <span style={{ color:'var(--ink-400)', fontFamily:'var(--font-mono)', fontSize: 11 }}>{row[4]}</span>
-          <Icons.Download size={14} style={{ color:'var(--ink-300)', cursor:'pointer' }}/>
-        </div>
-      ))}
-    </div>
-  </Panel>
-);
-
-const DatePickerShowcase = () => {
-  const month = (label, sel = []) => (
-    <div>
-      <div style={{ fontSize: 13, fontWeight: 600, color:'var(--ink-700)', textAlign:'center', marginBottom: 8 }}>{label}</div>
-      <div style={{ display:'grid', gridTemplateColumns:'repeat(7, 1fr)', gap: 2, fontFamily:'var(--font-mono)', fontSize: 10, color:'var(--ink-300)' }}>
-        {['Mo','Tu','We','Th','Fr','Sa','Su'].map(d=><div key={d} style={{ textAlign:'center', padding:'4px 0' }}>{d}</div>)}
-      </div>
-      <div style={{ display:'grid', gridTemplateColumns:'repeat(7, 1fr)', gap: 2, fontSize: 11 }}>
-        {Array.from({length: 30}, (_, i) => i + 1).map(d => {
-          const isSel = sel.includes(d);
-          return (
-            <div key={d} style={{
-              aspectRatio:'1/1', display:'flex', alignItems:'center', justifyContent:'center',
-              borderRadius:'var(--r-sm)',
-              background: isSel ? 'var(--ember-500)' : 'transparent',
-              color: isSel ? '#fff' : 'var(--ink-600)',
-              fontWeight: isSel ? 600 : 400,
-              cursor:'pointer',
-            }}>{d}</div>
-          );
-        })}
-      </div>
-    </div>
-  );
-  return (
-    <Panel title="Date range picker">
-      <div style={{
-        background:'var(--surface)', border:'1px solid var(--line-200)',
-        borderRadius:'var(--r-xl)', boxShadow:'var(--shadow-lg)',
-        maxWidth: 560, padding: 16,
-      }}>
-        <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom: 12 }}>
-          <div style={{ fontSize: 13, fontWeight: 600, color:'var(--ink-600)' }}>Date Range</div>
-          <Icons.Close size={14} style={{ color:'var(--ink-400)', cursor:'pointer' }}/>
-        </div>
-        <div style={{ display:'flex', justifyContent:'space-between', marginBottom: 8, padding:'0 8px' }}>
-          <Icons.ChevLeft size={14} style={{ color:'var(--ink-400)', cursor:'pointer' }}/>
-          <Icons.ChevRight size={14} style={{ color:'var(--ink-400)', cursor:'pointer' }}/>
-        </div>
-        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 24 }}>
-          {month('September 2025', [1, 8])}
-          {month('October 2025')}
-        </div>
-        <div style={{ display:'flex', justifyContent:'flex-end', gap: 8, marginTop: 16 }}>
-          <Button variant="secondary" size="sm">Cancel</Button>
-          <Button variant="primary" size="sm">Apply</Button>
-        </div>
-      </div>
-    </Panel>
-  );
-};
-
-const BannerShowcase = () => (
-  <Panel title="Banners & toasts">
-    <ComponentRow label="Top announcement bar">
-      <div style={{
-        width:'100%',
-        background:'var(--paper)',
-        border:'1px solid var(--line-200)',
-        borderRadius:'var(--r-md)',
-        padding:'10px 16px',
-        textAlign:'center',
-        fontSize: 13, color:'var(--ink-600)',
-      }}>
-        We just raised our Series A and shipped Zark v2 🎉 <a style={{ color:'var(--ember-700)', textDecoration:'underline' }}>Read the blog.</a>
-      </div>
-    </ComponentRow>
-    <ComponentRow label="In-page tip card">
-      <div style={{
-        display:'flex', gap: 12, padding: 14,
-        background:'var(--surface)',
-        border:'1px solid var(--line-200)',
-        borderRadius:'var(--r-lg)',
-        maxWidth: 320,
-        boxShadow:'var(--shadow-md)',
-      }}>
-        <Icons.Sparkles size={16} style={{ color:'var(--ember-500)', marginTop: 2 }}/>
-        <div style={{ flex: 1 }}>
-          <div style={{ fontSize: 12, fontFamily:'var(--font-mono)', letterSpacing:'var(--ls-wider)', color:'var(--ink-300)', textTransform:'uppercase', marginBottom: 4 }}>What's New</div>
-          <div style={{ fontSize: 13, fontWeight: 600, color:'var(--ink-700)', marginBottom: 4 }}>Introducing Zark v2</div>
-          <div style={{ fontSize: 12, color:'var(--ink-400)', lineHeight: 1.45 }}>10x faster scraping, news and image search, smart crawling and more.</div>
-        </div>
-        <Icons.Close size={12} style={{ color:'var(--ink-300)', cursor:'pointer' }}/>
-      </div>
-    </ComponentRow>
-    <ComponentRow label="Toast / pill">
-      <div style={{
-        display:'inline-flex', alignItems:'center', gap: 8,
-        padding:'8px 14px',
-        background:'var(--ink-700)',
-        color:'#fff',
-        borderRadius:'var(--r-pill)',
-        fontSize: 12, boxShadow:'var(--shadow-lg)',
-      }}>
-        Welcome to Zark! <Icons.Flame size={14} style={{ color:'var(--ember-400)' }}/>
-      </div>
-      <div style={{
-        display:'inline-flex', alignItems:'center', gap: 8,
-        padding:'8px 14px',
-        background:'var(--success-500)', color:'#fff',
-        borderRadius:'var(--r-pill)', fontSize: 12,
-      }}>
-        <Icons.Check size={14}/> Copied as Markdown
-      </div>
-    </ComponentRow>
-  </Panel>
-);
-
-const PatternsSection = () => (
-  <Section
-    id="patterns"
-    eyebrow="06 — Patterns"
-    title="Composed patterns, not isolated parts"
-    description="These templates encode opinion: the URL pill always sits inside an ascii field, code blocks always include eye+copy affordances, modals always announce a step counter, tables lead with a mono endpoint tag. Reach for these before improvising."
-  >
-    <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 24 }}>
-      <ModalShowcase/>
-      <CodeBlock/>
-    </div>
-    <DataTableShowcase/>
-    <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 24 }}>
-      <DatePickerShowcase/>
-      <BannerShowcase/>
-    </div>
-  </Section>
-);
-
-window.PatternsSection = PatternsSection;

package/templates/primitives.jsx

@@ -1,306 +0,0 @@
-// Zark — Primitives: Button, Input, Toggle, Tag, Badge, Tabs, Card, etc.
-
-const Section = ({ id, eyebrow, title, description, children, columns }) => (
-  <section id={id} style={{
-    borderTop:'1px solid var(--line-200)',
-    padding:'72px 64px 80px',
-  }}>
-    <div style={{ maxWidth:1200, margin:'0 auto' }}>
-      <header style={{
-        display:'grid',
-        gridTemplateColumns:'minmax(220px, 280px) 1fr',
-        gap: 64,
-        marginBottom: 48,
-        alignItems:'start',
-      }}>
-        <div>
-          <div style={{
-            fontFamily:'var(--font-mono)', fontSize: 11,
-            letterSpacing:'var(--ls-widest)', textTransform:'uppercase',
-            color:'var(--ember-600)', marginBottom: 12,
-          }}>{eyebrow}</div>
-          <h2 style={{
-            fontFamily:'var(--font-display)',
-            fontSize: 'var(--fs-3xl)', lineHeight:'var(--lh-tight)',
-            letterSpacing:'var(--ls-tight)', margin: 0,
-            color:'var(--ink-700)',
-          }}>{title}</h2>
-        </div>
-        <p style={{
-          margin:0, color:'var(--ink-400)', fontSize:'var(--fs-lg)',
-          lineHeight: 1.55, maxWidth: 640,
-        }}>{description}</p>
-      </header>
-      <div style={{
-        display:'grid',
-        gridTemplateColumns: columns || '1fr',
-        gap: 24,
-      }}>
-        {children}
-      </div>
-    </div>
-  </section>
-);
-
-const Panel = ({ title, kicker, children, padded = true, style }) => (
-  <div style={{
-    background:'var(--surface)',
-    border:'1px solid var(--line-200)',
-    borderRadius:'var(--r-xl)',
-    overflow:'hidden',
-    ...style,
-  }}>
-    {(title || kicker) && (
-      <div style={{
-        padding:'14px 18px',
-        borderBottom:'1px solid var(--line-100)',
-        display:'flex', alignItems:'center', justifyContent:'space-between',
-        background:'var(--paper)',
-      }}>
-        <div style={{ fontSize: 13, fontWeight: 600, color:'var(--ink-600)' }}>{title}</div>
-        {kicker && <div style={{
-          fontFamily:'var(--font-mono)', fontSize: 10,
-          letterSpacing:'var(--ls-wider)', textTransform:'uppercase',
-          color:'var(--ink-300)',
-        }}>{kicker}</div>}
-      </div>
-    )}
-    <div style={{ padding: padded ? 24 : 0 }}>{children}</div>
-  </div>
-);
-
-const Spec = ({ label, value, mono }) => (
-  <div style={{ display:'flex', justifyContent:'space-between', gap:16, padding:'8px 0', borderBottom:'1px dashed var(--line-200)', fontSize: 12 }}>
-    <span style={{ color:'var(--ink-400)' }}>{label}</span>
-    <span style={{ color:'var(--ink-600)', fontFamily: mono ? 'var(--font-mono)' : 'inherit' }}>{value}</span>
-  </div>
-);
-
-// ---------- BUTTON ----------
-const buttonVariants = {
-  primary: {
-    bg:'var(--ember-600)', fg:'#fff', border:'transparent',
-    bgHover:'var(--ember-700)',
-  },
-  secondary: {
-    bg:'var(--surface)', fg:'var(--ink-700)', border:'var(--line-300)',
-    bgHover:'var(--paper)',
-  },
-  ghost: {
-    bg:'transparent', fg:'var(--ink-600)', border:'transparent',
-    bgHover:'var(--ink-50)',
-  },
-  soft: {
-    bg:'var(--ember-50)', fg:'var(--ember-700)', border:'transparent',
-    bgHover:'var(--ember-100)',
-  },
-  danger: {
-    bg:'var(--surface)', fg:'var(--danger-700)', border:'var(--line-300)',
-    bgHover:'var(--danger-50)',
-  },
-};
-const buttonSizes = {
-  xs: { h: 22, px: 8,  fs: 11, gap: 4, r: 'var(--r-sm)' },
-  sm: { h: 28, px: 10, fs: 12, gap: 6, r: 'var(--r-md)' },
-  md: { h: 32, px: 12, fs: 13, gap: 6, r: 'var(--r-md)' },
-  lg: { h: 40, px: 16, fs: 14, gap: 8, r: 'var(--r-lg)' },
-};
-const Button = ({ variant='secondary', size='md', icon, iconRight, children, full, ...rest }) => {
-  const v = buttonVariants[variant];
-  const s = buttonSizes[size];
-  const [hover, setHover] = React.useState(false);
-  return (
-    <button
-      onMouseEnter={()=>setHover(true)}
-      onMouseLeave={()=>setHover(false)}
-      style={{
-        display:'inline-flex', alignItems:'center', justifyContent:'center',
-        gap: s.gap,
-        height: s.h,
-        padding: `0 ${s.px}px`,
-        fontSize: s.fs, fontWeight: 500,
-        fontFamily:'var(--font-sans)',
-        color: v.fg,
-        background: hover ? v.bgHover : v.bg,
-        border: `1px solid ${v.border === 'transparent' ? 'transparent' : v.border}`,
-        borderRadius: s.r,
-        cursor:'pointer',
-        whiteSpace:'nowrap',
-        transition:'background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out)',
-        boxShadow: variant==='primary' ? 'inset 0 1px 0 rgba(255,255,255,0.18), 0 1px 2px rgba(168, 53, 8, 0.18)' :
-                   variant==='secondary' ? 'var(--shadow-xs)' : 'none',
-        width: full ? '100%' : 'auto',
-      }}
-      {...rest}
-    >
-      {icon}
-      {children}
-      {iconRight}
-    </button>
-  );
-};
-
-// ---------- INPUT ----------
-const Input = ({ icon, suffix, value, onChange, placeholder, mono, size='md', invalid, ...rest }) => {
-  const sizes = { sm:{h:28,fs:12,px:8}, md:{h:36,fs:13,px:12}, lg:{h:44,fs:14,px:14} };
-  const s = sizes[size];
-  return (
-    <label style={{
-      display:'inline-flex', alignItems:'center', gap: 6,
-      height: s.h,
-      padding: `0 ${s.px}px`,
-      background:'var(--surface)',
-      border:`1px solid ${invalid ? 'var(--danger-500)' : 'var(--line-300)'}`,
-      borderRadius:'var(--r-lg)',
-      width:'100%',
-      transition:'box-shadow var(--t-fast), border-color var(--t-fast)',
-    }}
-    onFocus={e=>e.currentTarget.style.boxShadow='var(--ring-focus)'}
-    onBlur={e=>e.currentTarget.style.boxShadow='none'}
-    >
-      {icon && <span style={{ color:'var(--ink-300)', display:'inline-flex' }}>{icon}</span>}
-      <input
-        value={value} onChange={onChange} placeholder={placeholder}
-        style={{
-          flex:1, border:'none', outline:'none', background:'transparent',
-          fontSize: s.fs, color:'var(--ink-700)',
-          fontFamily: mono ? 'var(--font-mono)' : 'var(--font-sans)',
-          minWidth: 0,
-        }}
-        {...rest}
-      />
-      {suffix && <span style={{ color:'var(--ink-300)' }}>{suffix}</span>}
-    </label>
-  );
-};
-
-// ---------- TAG / BADGE ----------
-const Tag = ({ tone = 'default', size='sm', children, square }) => {
-  const tones = {
-    default:{ bg:'var(--ink-50)',     fg:'var(--ink-500)' },
-    ember:  { bg:'var(--ember-50)',   fg:'var(--ember-700)' },
-    mono:   { bg:'var(--tag-bg)',     fg:'var(--tag-fg)' },
-    success:{ bg:'var(--success-50)', fg:'var(--success-700)' },
-    warning:{ bg:'var(--warning-50)', fg:'var(--warning-700)' },
-    danger: { bg:'var(--danger-50)',  fg:'var(--danger-700)' },
-    info:   { bg:'var(--info-50)',    fg:'var(--info-700)' },
-  };
-  const sizes = { xs:{fs:10,h:18,px:6}, sm:{fs:11,h:22,px:8}, md:{fs:12,h:26,px:10} };
-  const t = tones[tone]; const s = sizes[size];
-  return (
-    <span style={{
-      display:'inline-flex', alignItems:'center', gap:4,
-      height: s.h, padding:`0 ${s.px}px`,
-      background:t.bg, color:t.fg,
-      fontSize:s.fs, fontWeight:500,
-      fontFamily:'var(--font-mono)',
-      letterSpacing:'var(--ls-wide)',
-      textTransform:'uppercase',
-      borderRadius: square ? 'var(--r-sm)' : 'var(--r-pill)',
-    }}>{children}</span>
-  );
-};
-
-const Badge = ({ count, tone='ember' }) => (
-  <span style={{
-    display:'inline-flex', alignItems:'center', justifyContent:'center',
-    minWidth:18, height:18, padding:'0 5px',
-    background: tone==='ember' ? 'var(--ember-500)' : 'var(--ink-600)',
-    color:'#fff', fontSize:10, fontWeight:600,
-    borderRadius:'var(--r-pill)',
-  }}>{count}</span>
-);
-
-// ---------- TOGGLE ----------
-const Toggle = ({ on, onChange, size='md' }) => {
-  const sizes = { sm:{w:28,h:16,d:12}, md:{w:36,h:20,d:16}, lg:{w:44,h:24,d:20} };
-  const s = sizes[size];
-  return (
-    <button onClick={()=>onChange?.(!on)} style={{
-      width: s.w, height: s.h, padding: 2,
-      borderRadius:'var(--r-pill)',
-      background: on ? 'var(--ember-500)' : 'var(--ink-100)',
-      border:'none', cursor:'pointer', position:'relative',
-      transition:'background var(--t-base) var(--ease-out)',
-    }}>
-      <span style={{
-        position:'absolute', top:2,
-        left: on ? s.w - s.d - 2 : 2,
-        width: s.d, height: s.d, borderRadius:'50%',
-        background:'#fff',
-        boxShadow:'0 1px 2px rgba(0,0,0,0.18)',
-        transition:'left var(--t-base) var(--ease-out)',
-      }}/>
-    </button>
-  );
-};
-
-// ---------- TABS / SEGMENTED ----------
-const Segmented = ({ items, value, onChange, size='md' }) => {
-  const sizes = { sm:{h:28,fs:12,px:10}, md:{h:34,fs:13,px:12} };
-  const s = sizes[size];
-  return (
-    <div style={{
-      display:'inline-flex', padding:3, gap:2,
-      background:'var(--ink-50)',
-      border:'1px solid var(--line-200)',
-      borderRadius:'var(--r-lg)',
-    }}>
-      {items.map(it => {
-        const active = it.value === value;
-        return (
-          <button key={it.value} onClick={()=>onChange?.(it.value)} style={{
-            display:'inline-flex', alignItems:'center', gap:6,
-            height: s.h, padding:`0 ${s.px}px`,
-            fontSize: s.fs, fontWeight: active ? 600 : 500,
-            color: active ? 'var(--ink-700)' : 'var(--ink-400)',
-            background: active ? 'var(--surface)' : 'transparent',
-            border:'none', cursor:'pointer',
-            borderRadius:'var(--r-md)',
-            boxShadow: active ? 'var(--shadow-xs), 0 0 0 1px var(--line-200)' : 'none',
-            transition:'all var(--t-fast)',
-          }}>{it.icon}{it.label}{it.tag && <Tag tone="mono" size="xs">{it.tag}</Tag>}</button>
-        );
-      })}
-    </div>
-  );
-};
-
-// ---------- AVATAR ----------
-const Avatar = ({ name, size = 24, color = 'var(--ember-500)', square }) => (
-  <span style={{
-    width: size, height: size,
-    background: color, color:'#fff',
-    borderRadius: square ? 'var(--r-sm)' : '50%',
-    display:'inline-flex', alignItems:'center', justifyContent:'center',
-    fontSize: size * 0.42, fontWeight: 600,
-    fontFamily:'var(--font-display)',
-    flexShrink: 0,
-  }}>{(name || '?').charAt(0).toUpperCase()}</span>
-);
-
-// ---------- KBD ----------
-const Kbd = ({ children }) => (
-  <span style={{
-    display:'inline-flex', alignItems:'center', justifyContent:'center',
-    minWidth: 18, height: 18, padding:'0 4px',
-    fontFamily:'var(--font-mono)', fontSize: 10,
-    color:'var(--ink-400)',
-    background:'var(--surface)',
-    border:'1px solid var(--line-200)',
-    borderBottomWidth: 2,
-    borderRadius:'var(--r-sm)',
-  }}>{children}</span>
-);
-
-window.Section = Section;
-window.Panel = Panel;
-window.Spec = Spec;
-window.Button = Button;
-window.Input = Input;
-window.Tag = Tag;
-window.Badge = Badge;
-window.Toggle = Toggle;
-window.Segmented = Segmented;
-window.Avatar = Avatar;
-window.Kbd = Kbd;