@hanzo/design 0.1.0

package/components/core/Card.jsx

@@ -0,0 +1,46 @@
+import React from 'react'
+
+const FILL = {
+  default:'var(--surface-card)',
+  emphasis:'var(--surface-card-emphasis)',
+  quiet:'var(--surface-card-quiet)',
+  plain:'transparent',
+}
+
+export function Card({ variant = 'default', sheen = false, interactive = false, style, children, ...rest }) {
+  const [hover, setHover] = React.useState(false)
+  return (
+    <div
+      onMouseEnter={interactive ? () => setHover(true) : undefined}
+      onMouseLeave={interactive ? () => setHover(false) : undefined}
+      style={{
+        position:'relative',overflow:'hidden',
+        borderRadius:'var(--radius-lg)',
+        border:'1px solid ' + (hover ? 'var(--border-strong)' : 'var(--border-hairline)'),
+        background:FILL[variant] || FILL.default,
+        transition:'border-color var(--duration-fast) var(--ease-out)',
+        ...style,
+      }}
+      {...rest}
+    >
+      {sheen && <div aria-hidden style={{position:'absolute',inset:0,pointerEvents:'none',background:'var(--sheen-card)',opacity:0.7}} />}
+      {children}
+    </div>
+  )
+}
+
+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>
+}
+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>
+}
+export function CardContent({ style, children, ...rest }) {
+  return <div style={{position:'relative',padding:24,...style}} {...rest}>{children}</div>
+}
+export function CardFooter({ style, children, ...rest }) {
+  return <div style={{position:'relative',padding:'0 24px 24px',display:'flex',alignItems:'center',gap:12,...style}} {...rest}>{children}</div>
+}

package/components/core/Card.prompt.md

@@ -0,0 +1,13 @@
+The default grouping surface: 1px hairline border, near-black fill, 12px radius.
+
+```jsx
+<Card interactive sheen>
+  <CardContent>
+    <Icon name="Shield" size={24} />
+    <CardTitle style={{marginTop:12}}>Private by default</CardTitle>
+    <CardDescription>Every request is scoped to your org.</CardDescription>
+  </CardContent>
+</Card>
+```
+
+Fills: default (grid tiles) · emphasis (featured) · quiet (landing story cards) · plain. Hover only ever brightens the border — cards never lift, scale, or glow.

package/components/core/ChromeText.d.ts

@@ -0,0 +1,10 @@
+/** Chrome-gradient headline text — the one gradient Hanzo permits. */
+export interface ChromeTextProps extends React.HTMLAttributes<HTMLElement> {
+  /** Element to render, e.g. "h1" | "h2". */
+  as?: keyof JSX.IntrinsicElements;
+  /** chrome = white→white/60 (default). deep = white→neutral-500, for very large display type. */
+  tone?: 'chrome' | 'deep';
+  /** Optional uppercase eyebrow rendered above the headline. */
+  preHeading?: string;
+}
+export function ChromeText(props: ChromeTextProps): JSX.Element;

package/components/core/ChromeText.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+
+/** The canonical Hanzo headline treatment: white → white/60 chrome gradient,
+ *  clipped to the text. Never a saturated or rainbow gradient. */
+export function ChromeText({ as = 'span', tone = 'chrome', preHeading, preHeadingStyle, style, children, ...rest }) {
+  const Tag = as
+  const gradient = tone === 'deep' ? 'var(--gradient-chrome-2)' : 'var(--gradient-chrome)'
+  const node = (
+    <Tag
+      style={{
+        backgroundImage:gradient,
+        WebkitBackgroundClip:'text',backgroundClip:'text',
+        WebkitTextFillColor:'transparent',color:'transparent',
+        display:'inline-block',
+        ...style,
+      }}
+      {...rest}
+    >
+      {children}
+    </Tag>
+  )
+  if (!preHeading) return node
+  return (
+    <span style={{display:'flex',flexDirection:'column',gap:12,alignItems:'inherit'}}>
+      <span style={{fontSize:'var(--text-xs)',fontWeight:'var(--weight-semibold)',textTransform:'uppercase',letterSpacing:'var(--tracking-widest)',color:'var(--text-helper)',...preHeadingStyle}}>{preHeading}</span>
+      {node}
+    </span>
+  )
+}

package/components/core/ChromeText.prompt.md

@@ -0,0 +1,8 @@
+Wraps hero and section headlines in the chrome gradient (white → white/60).
+
+```jsx
+<ChromeText as="h1" style={{fontSize:'var(--text-6xl)',fontWeight:700}}>Enso, our frontier model</ChromeText>
+<ChromeText as="h2" preHeading="AI cloud" style={{fontSize:'var(--text-4xl)',fontWeight:700}}>Built for agents</ChromeText>
+```
+
+Every product-page h1 uses this. `tone="deep"` (white → neutral-500) is for the very largest display type. Never substitute a hued gradient.

package/components/core/HanzoLogo.d.ts

@@ -0,0 +1,11 @@
+/** The Hanzo mark from the press kit.
+export interface HanzoLogoProps {
+  /** Rendered square size in px. Nav/footer use 22; hero lockups 80. */
+  size?: number;
+  /** white on dark surfaces (default), black on light, inherit to take currentColor. */
+  variant?: 'white' | 'black' | 'inherit';
+  title?: string;
+}
+export function HanzoLogo(props: HanzoLogoProps): JSX.Element;
+export interface HanzoWordmarkProps extends HanzoLogoProps { label?: string }
+export function HanzoWordmark(props: HanzoWordmarkProps): JSX.Element;

package/components/core/HanzoLogo.jsx

@@ -0,0 +1,28 @@
+import React from 'react'
+
+/** The Hanzo mark, exactly as shipped in the press kit (assets/logo.svg).
+ *  Path data is the press-kit source; the light seams stay #DDDDDD. */
+export function HanzoLogo({ size = 22, variant = 'white', title = 'Hanzo', style, ...rest }) {
+  const fill = variant === 'white' ? '#ffffff' : variant === 'black' ? 'var(--hanzo-black)' : 'currentColor'
+  return (
+    <svg viewBox="0 0 67 67" width={size} height={size} xmlns="http://www.w3.org/2000/svg" role="img" aria-label={title} style={{ display: 'block', flexShrink: 0, ...style }} {...rest}>
+      <path d="M22.21 67V44.6369H0V67H22.21Z" fill={fill}></path>
+      <path d="M0 44.6369L22.21 46.8285V44.6369H0Z" fill="#DDDDDD"></path>
+      <path d="M66.7038 22.3184H22.2534L0.0878906 44.6367H44.4634L66.7038 22.3184Z" fill={fill}></path>
+      <path d="M22.21 0H0V22.3184H22.21V0Z" fill={fill}></path>
+      <path d="M66.7198 0H44.5098V22.3184H66.7198V0Z" fill={fill}></path>
+      <path d="M66.6753 22.3185L44.5098 20.0822V22.3185H66.6753Z" fill="#DDDDDD"></path>
+      <path d="M66.7198 67V44.6369H44.5098V67H66.7198Z" fill={fill}></path>
+    </svg>
+  )
+}
+
+/** Mark + wordmark lockup, as used in the nav and footer. */
+export function HanzoWordmark({ size = 22, label = 'Hanzo AI', variant = 'white', style }) {
+  return (
+    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, ...style }}>
+      <HanzoLogo size={size} variant={variant} />
+      <span style={{ fontSize: 15, fontWeight: 600, letterSpacing: 'var(--tracking-tight)', color: 'var(--text-primary)' }}>{label}</span>
+    </span>
+  )
+}

package/components/core/HanzoLogo.prompt.md

@@ -0,0 +1,8 @@
+The Hanzo mark (and mark+wordmark lockup) — use instead of typing "Hanzo" where a logo belongs.
+
+```jsx
+<HanzoLogo size={22} variant="white" />
+<HanzoWordmark label="Hanzo AI" />
+```
+
+Nav and footer use size 22; the wordmark collapses to the bare mark once the page scrolls. Never recolour with hue, never stretch, keep clear space around it.

package/components/core/Icon.d.ts

@@ -0,0 +1,10 @@
+/** Lucide icon glyph, the only icon set Hanzo uses. */
+export interface IconProps extends React.SVGAttributes<SVGSVGElement> {
+  /** Lucide icon name, PascalCase or kebab-case: "ArrowRight" | "arrow-right". */
+  name: string;
+  /** Pixel size. Hanzo sizes: 12 inline, 16 in CTAs, 24 card eyebrow, 40 section accent. */
+  size?: number;
+  strokeWidth?: number;
+  color?: string;
+}
+export function Icon(props: IconProps): JSX.Element;

package/components/core/Icon.jsx

@@ -0,0 +1,43 @@
+import React from 'react'
+
+/** Lucide glyph renderer. Hanzo uses lucide-react 0.462.0 and no other icon set;
+ *  in a plain browser page the same set arrives as the lucide UMD bundle, which
+ *  this component reads. Load it once per page:
+ *  <script src="https://unpkg.com/lucide@0.462.0/dist/umd/lucide.js"></script> */
+const pascal = (n) => n.replace(/(^|[-_ ])(\w)/g, (_, __, c) => c.toUpperCase())
+
+function lookup(name) {
+  const g = typeof window !== 'undefined' ? window.lucide : null
+  if (!g) return null
+  const set = g.icons || g
+  return set[name] || set[pascal(name)] || null
+}
+
+export function Icon({ name, size = 16, strokeWidth = 2, color = 'currentColor', style, ...rest }) {
+  const node = lookup(name)
+  const kids = []
+  if (Array.isArray(node)) {
+    node.forEach((child, i) => {
+      if (Array.isArray(child)) kids.push(React.createElement(child[0], { key: i, ...child[1] }))
+      else if (child && child.tag) kids.push(React.createElement(child.tag, { key: i, ...child.attrs }))
+    })
+  }
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke={color}
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      style={{ flexShrink: 0, display: 'block', ...style }}
+      {...rest}
+    >
+      {kids}
+    </svg>
+  )
+}

package/components/core/Icon.prompt.md

@@ -0,0 +1,9 @@
+Renders a lucide glyph — the only icon set on Hanzo surfaces.
+
+```jsx
+<Icon name="ArrowRight" size={16} />
+<Icon name="Shield" size={24} color="var(--text-secondary)" />
+```
+
+Requires the lucide UMD bundle on the page: `<script src="https://unpkg.com/lucide@0.462.0/dist/umd/lucide.js"></script>`.
+Sizes in use: 12 (inline with body text), 16 (button/CTA), 24 (card eyebrow), 40 (section accent). Stroke stays at the default 2. Colour inherits — never tint an icon with hue.

package/components/core/Progress.d.ts

@@ -0,0 +1,8 @@
+/** Thin monochrome meter — white fill on a neutral-800 track. */
+export interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+  value?: number;
+  max?: number;
+  /** Track height in px. 6 in dashboards, 1.5–2 for inline meters. */
+  height?: number;
+}
+export function Progress(props: ProgressProps): JSX.Element;

package/components/core/Progress.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+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}>
+      <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/Progress.prompt.md

@@ -0,0 +1,8 @@
+Usage/quota meter. White fill on a neutral-800 track — no colour thresholds.
+
+```jsx
+<Progress value={68} height={6} />
+<Progress value={92} height={2} style={{width:64}} />
+```
+
+Used for agent memory, credit balance, and resource usage. Pair with a numeric label; the bar alone never carries the value.

package/components/core/Table.d.ts

@@ -0,0 +1,11 @@
+/** Dense data table. Rows separated by neutral-800 hairlines; header sits on pure black. */
+export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+  /** Adds the neutral-900/60 hover fill — use when the row opens something. */
+  interactive?: boolean;
+}
+export function Table(props: React.TableHTMLAttributes<HTMLTableElement>): JSX.Element;
+export function TableHeader(props: React.HTMLAttributes<HTMLTableSectionElement>): JSX.Element;
+export function TableBody(props: React.HTMLAttributes<HTMLTableSectionElement>): JSX.Element;
+export function TableRow(props: TableRowProps): JSX.Element;
+export function TableHead(props: React.ThHTMLAttributes<HTMLTableCellElement> & { align?: 'left' | 'right' | 'center' }): JSX.Element;
+export function TableCell(props: React.TdHTMLAttributes<HTMLTableCellElement> & { align?: 'left' | 'right' | 'center' }): JSX.Element;

package/components/core/Table.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+
+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>
+}
+export function TableBody({ style, children, ...rest }) {
+  return <tbody style={style} {...rest}>{children}</tbody>
+}
+export function TableRow({ interactive = false, style, children, ...rest }) {
+  const [hover, setHover] = React.useState(false)
+  return (
+    <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}}
+      {...rest}
+    >
+      {children}
+    </tr>
+  )
+}
+export function TableHead({ align = 'left', style, children, ...rest }) {
+  return <th style={{padding:'12px 24px',textAlign:align,fontWeight:'var(--weight-medium)',color:'var(--text-helper)',...style}} {...rest}>{children}</th>
+}
+export function TableCell({ align = 'left', style, children, ...rest }) {
+  return <td style={{padding:'16px 24px',textAlign:align,color:'var(--foreground)',...style}} {...rest}>{children}</td>
+}

package/components/core/Table.prompt.md

@@ -0,0 +1,10 @@
+Invoice / agent / usage tables in the console.
+
+```jsx
+<Table>
+  <TableHeader><TableRow><TableHead>Invoice</TableHead><TableHead align="right">Amount</TableHead></TableRow></TableHeader>
+  <TableBody><TableRow interactive><TableCell>INV-20230501</TableCell><TableCell align="right">$25.00</TableCell></TableRow></TableBody>
+</Table>
+```
+
+Wrap in a `Card` for the rounded hairline frame. Status cells use `Badge` with the opacity ladder, not coloured chips.

package/components/core/core.card.html

@@ -0,0 +1,56 @@
+<!-- @dsCard group="Components" viewport="700x340" name="Core" subtitle="Button, Badge, Card, Progress, Avatar, ChromeText, Icon" -->
+<!doctype html><html class="dark"><head><meta charset="utf-8"><title>Core components</title>
+<link rel="stylesheet" href="../../styles.css">
+<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
+<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="https://unpkg.com/lucide@0.462.0/dist/umd/lucide.js"></script>
+<script src="../../_ds_bundle.js"></script>
+<style>body{margin:0;padding:20px;background:#000;font-family:var(--font-sans)}.row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.col{display:flex;flex-direction:column;gap:14px}.lbl{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--neutral-600)}</style></head><body><div id="root"></div>
+<script type="text/babel">
+const { Button, Badge, StatusBadge, Card, CardContent, CardTitle, CardDescription, ChromeText, Progress, Avatar, AvatarFallback, Icon, HanzoLogo } = window.HanzoDesignSystem_0a9445;
+function Demo(){
+  return (<div className="col">
+    <div className="row">
+      <Button pill>Try Hanzo <Icon name="ChevronDown" /></Button>
+      <Button variant="secondary">Secondary</Button>
+      <Button variant="outline"><Icon name="Filter" /> Filter</Button>
+      <Button variant="ghost">Ghost</Button>
+      <Button variant="destructive">Delete</Button>
+      <Button variant="link">Read the docs</Button>
+      <Button variant="ghost" size="icon"><Icon name="Settings" /></Button>
+      <Button disabled>Disabled</Button>
+      <Button size="sm" variant="outline">Small</Button>
+      <Button size="lg" pill>Get started <Icon name="ArrowRight" /></Button>
+    </div>
+    <div className="row">
+      <Badge>Default</Badge><Badge variant="tier1">Edge</Badge><Badge variant="tier2">Pro</Badge><Badge variant="tier3">Ultra</Badge>
+      <Badge variant="outline">Open source</Badge><Badge variant="error">Failed</Badge>
+      <StatusBadge status="online" label="All systems normal" />
+      <Avatar size={28}><AvatarFallback>ZK</AvatarFallback></Avatar>
+      <Avatar size={28} />
+      <HanzoLogo size={22} />
+    </div>
+    <div className="row" style={{alignItems:'stretch'}}>
+      <Card interactive sheen style={{flex:1,minWidth:200}}>
+        <CardContent>
+          <Icon name="Shield" size={24} color="var(--text-secondary)" />
+          <CardTitle style={{marginTop:12}}>Private by default</CardTitle>
+          <CardDescription>Every request scoped to your org.</CardDescription>
+        </CardContent>
+      </Card>
+      <Card variant="emphasis" style={{flex:1,minWidth:200}}>
+        <CardContent>
+          <div className="lbl">Credits</div>
+          <div style={{fontSize:'var(--text-2xl)',fontWeight:600,color:'#fff',margin:'6px 0 10px'}}>$412.80</div>
+          <Progress value={68} />
+        </CardContent>
+      </Card>
+      <Card variant="plain" style={{flex:1,minWidth:200,display:'flex',alignItems:'center',justifyContent:'center',padding:16}}>
+        <ChromeText as="div" style={{fontSize:'var(--text-3xl)',fontWeight:700,letterSpacing:'-.025em'}}>Chrome text</ChromeText>
+      </Card>
+    </div>
+  </div>)
+}
+ReactDOM.createRoot(document.getElementById('root')).render(<Demo />);
+</script></body></html>

package/components/forms/Checkbox.d.ts

@@ -0,0 +1,10 @@
+/** Square 16px checkbox; checked state is a white fill with a black tick. */
+export interface CheckboxProps {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  /** Optional inline label rendered to the right. */
+  label?: React.ReactNode;
+}
+export function Checkbox(props: CheckboxProps): JSX.Element;

package/components/forms/Checkbox.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+
+export function Checkbox({ checked, defaultChecked, onChange, disabled, label, style, ...rest }) {
+  const [inner, setInner] = React.useState(!!defaultChecked)
+  const on = checked === undefined ? inner : checked
+  const toggle = () => {
+    if (disabled) return
+    if (checked === undefined) setInner(!on)
+    onChange && onChange(!on)
+  }
+  const box = (
+    <span
+      role="checkbox" aria-checked={on} tabIndex={disabled ? -1 : 0}
+      onClick={toggle}
+      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)'),
+        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)',
+        ...style,
+      }}
+      {...rest}
+    >
+      {on && (
+        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="var(--primary-foreground)" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12" /></svg>
+      )}
+    </span>
+  )
+  if (!label) return box
+  return <span style={{display:'inline-flex',alignItems:'center',gap:8,fontSize:'var(--text-sm)',color:'var(--text-secondary)'}}>{box}{label}</span>
+}

package/components/forms/Checkbox.prompt.md

@@ -0,0 +1,8 @@
+Checkbox for opt-ins and multi-select filters.
+
+```jsx
+<Checkbox label="Auto-recharge credits" defaultChecked />
+<Checkbox checked={agree} onChange={setAgree} label="I agree to the terms" />
+```
+
+Checked = white fill + black tick. There is no indeterminate state in the Hanzo set.

package/components/forms/Input.d.ts

@@ -0,0 +1,3 @@
+/** Single-line text field. Black fill, neutral-800 hairline, ring-coloured focus border. */
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> { invalid?: boolean }
+export function Input(props: InputProps): JSX.Element;

package/components/forms/Input.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+export function Input({ invalid = false, style, ...rest }) {
+  const [focus, setFocus] = React.useState(false)
+  return (
+    <input
+      onFocus={(e)=>{setFocus(true);rest.onFocus&&rest.onFocus(e)}}
+      onBlur={(e)=>{setFocus(false);rest.onBlur&&rest.onBlur(e)}}
+      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)',
+        ...style,
+      }}
+      {...rest}
+    />
+  )
+}

package/components/forms/Input.prompt.md

@@ -0,0 +1,8 @@
+Text field for search, forms, and settings.
+
+```jsx
+<Input placeholder="Search agents…" />
+<Input type="email" invalid aria-describedby="err" />
+```
+
+For search fields, place a 16px lucide `Search` icon absolutely at 12px from the left and pad the input to 36px. Focus shows a `--ring` border, never a removed outline.

package/components/forms/Label.d.ts

@@ -0,0 +1,3 @@
+/** Field label — 14px medium at 80% white. */
+export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> { required?: boolean }
+export function Label(props: LabelProps): JSX.Element;

package/components/forms/Label.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export function Label({ required = false, style, children, ...rest }) {
+  return (
+    <label style={{display:'inline-block',fontSize:'var(--text-sm)',fontWeight:'var(--weight-medium)',color:'var(--text-secondary)',...style}} {...rest}>
+      {children}{required && <span aria-hidden style={{color:'var(--text-helper)'}}> *</span>}
+    </label>
+  )
+}

package/components/forms/Label.prompt.md

@@ -0,0 +1,8 @@
+Field label. Always `htmlFor` the control it names.
+
+```jsx
+<Label htmlFor="org" required>Organization name</Label>
+<Input id="org" />
+```
+
+Stack label → control with 8px gap; helper text goes below the control in `--text-xs` / `--text-helper`.

package/components/forms/Select.d.ts

@@ -0,0 +1,9 @@
+/** Dropdown select. Same chrome as Input plus a chevron. */
+export interface SelectOption { value: string; label: string }
+export interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'onChange'> {
+  options?: (SelectOption | string)[];
+  value?: string;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+}
+export function Select(props: SelectProps): JSX.Element;

package/components/forms/Select.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+
+/** Native-select build of the @hanzo/ui Select — same chrome, no portal. */
+export function Select({ options = [], value, onChange, placeholder, style, children, ...rest }) {
+  const [focus, setFocus] = React.useState(false)
+  return (
+    <span style={{position:'relative',display:'inline-flex',alignItems:'center',width:'100%'}}>
+      <select
+        value={value}
+        onChange={(e)=>onChange && onChange(e.target.value)}
+        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',
+          transition:'border-color var(--duration-fast) var(--ease-out)',
+          ...style,
+        }}
+        {...rest}
+      >
+        {placeholder && <option value="">{placeholder}</option>}
+        {options.map((o) => {
+          const v = typeof o === 'string' ? o : o.value
+          const l = typeof o === 'string' ? o : o.label
+          return <option key={v} value={v}>{l}</option>
+        })}
+        {children}
+      </select>
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--text-helper)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" style={{position:'absolute',right:10,pointerEvents:'none'}}><polyline points="6 9 12 15 18 9" /></svg>
+    </span>
+  )
+}

package/components/forms/Select.prompt.md

@@ -0,0 +1,7 @@
+Single-choice dropdown for settings and filters.
+
+```jsx
+<Select value={org} onChange={setOrg} options={[{value:'hanzo',label:'Hanzo AI'},{value:'zoo',label:'Zoo Labs'}]} />
+```
+
+For 2–3 short options prefer `Tabs` or a segmented row of `Button variant="outline"`; reach for Select at 4+.

package/components/forms/Slider.d.ts

@@ -0,0 +1,7 @@
+/** Range control — white filled track on neutral-800, used on the pricing/team-size calculators. */
+export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'> {
+  min?: number; max?: number; step?: number;
+  value?: number; defaultValue?: number;
+  onChange?: (value: number) => void;
+}
+export function Slider(props: SliderProps): JSX.Element;

package/components/forms/Slider.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+export function Slider({ min = 0, max = 100, step = 1, value, defaultValue = 0, onChange, style, ...rest }) {
+  const [inner, setInner] = React.useState(defaultValue)
+  const v = value === undefined ? inner : value
+  const pct = ((v - min) / (max - min)) * 100
+  return (
+    <input
+      type="range" min={min} max={max} step={step} value={v}
+      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))',
+        backgroundSize: pct + '% 4px, 100% 4px',
+        backgroundPosition:'left center, left center',
+        backgroundRepeat:'no-repeat',
+        ...style,
+      }}
+      {...rest}
+    />
+  )
+}

package/components/forms/Slider.prompt.md

@@ -0,0 +1,7 @@
+Numeric range — seats, credits, spend caps.
+
+```jsx
+<Slider min={1} max={200} value={seats} onChange={setSeats} />
+```
+
+Always render the current value as text beside or above the slider; the track alone never communicates the number.

package/components/forms/Textarea.d.ts

@@ -0,0 +1,3 @@
+/** Multi-line field. Same chrome as Input, vertical resize only. */
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+export function Textarea(props: TextareaProps): JSX.Element;

package/components/forms/Textarea.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+export function Textarea({ rows = 4, style, ...rest }) {
+  const [focus, setFocus] = React.useState(false)
+  return (
+    <textarea
+      rows={rows}
+      onFocus={(e)=>{setFocus(true);rest.onFocus&&rest.onFocus(e)}}
+      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',
+        transition:'border-color var(--duration-fast) var(--ease-out)',
+        ...style,
+      }}
+      {...rest}
+    />
+  )
+}

package/components/forms/Textarea.prompt.md

@@ -0,0 +1,7 @@
+Multi-line input for descriptions, prompts, and notes.
+
+```jsx
+<Textarea rows={5} placeholder="System prompt…" />
+```
+
+The chat composer is NOT this component — it is a borderless textarea inside a 28px-radius pill (see the site UI kit).