@hanzo/ui 8.0.6 → 8.0.8

package/src/product/ProviderLogo.tsx

@@ -1,137 +0,0 @@
-'use client'
-
-/**
- * ProviderLogo — a small provider/model avatar resolved from a provider NAME
- * alone (no external logo URLs, no network). Self-contained and prop-driven so
- * it lifts cleanly into `@hanzo/ui` for hanzo.ai / @hanzo/dev / the desktop app.
- *
- * Resolution order:
- *   1. First-party — Zen renders the real ensō mark, Hanzo the real block-H mark
- *      (same geometry as @zenlm/logo / @hanzo/logo), knocked out of a filled
- *      rounded tile so our own models read distinctly and on-brand.
- *   2. A known provider → its mapped @hanzogui/lucide-icons-2 glyph.
- *   3. Otherwise → a stable initials chip (1–2 letters from the name).
- *
- * Honest by construction: we never claim an official brand logo we don't ship —
- * unknown providers get clean initials, not a guessed icon. Colors are @hanzo/gui
- * theme tokens so the mark themes with the shell.
- */
-import { Text, XStack, useTheme } from '@hanzo/gui'
-import { Boxes, Server, Globe, Cpu } from '@hanzogui/lucide-icons-2'
-
-type IconCmp = typeof Globe
-
-/** Curated, extendable provider→glyph map (lowercased keys). Brand-neutral avatars. */
-const KNOWN: Record<string, IconCmp> = {
-  openrouter: Globe,
-  nvidia: Cpu,
-}
-
-const isFirstParty = (provider: string): boolean => {
-  const p = provider.trim().toLowerCase()
-  return p === 'hanzo' || p === 'zen'
-}
-
-/** The Zen ensō mark — identical geometry to @zenlm/logo (svg/zen-enso.svg). */
-function EnsoMark({ size, color }: { size: number; color: string }) {
-  return (
-    <svg width={size} height={size} viewBox="0 0 100 100" aria-hidden="true">
-      <path d="M66.22 83.26 A37 37 0 1 1 85.57 60.20" fill="none" stroke={color} strokeWidth={11} strokeLinecap="round" />
-    </svg>
-  )
-}
-
-/** The Hanzo block-H mark — identical geometry to @hanzo/logo (app/icon.svg). */
-const HANZO_PATHS = [
-  'M22.21 67V44.6369H0V67H22.21Z',
-  'M66.7038 22.3184H22.2534L0.0878906 44.6367H44.4634L66.7038 22.3184Z',
-  'M22.21 0H0V22.3184H22.21V0Z',
-  'M66.7198 0H44.5098V22.3184H66.7198V0Z',
-  'M66.7198 67V44.6369H44.5098V67H66.7198Z',
-]
-function HanzoHMark({ size, color }: { size: number; color: string }) {
-  return (
-    <svg width={size} height={size} viewBox="0 0 67 67" aria-hidden="true">
-      {HANZO_PATHS.map((d) => (
-        <path key={d} d={d} fill={color} />
-      ))}
-    </svg>
-  )
-}
-
-/** 1–2 uppercase initials from a provider name: words→first letters, else first 2 chars. */
-export function providerInitials(provider: string): string {
-  const name = provider.trim()
-  if (!name) return '•'
-  const words = name.split(/[\s/_-]+/).filter(Boolean)
-  if (words.length >= 2) return (words[0][0] + words[1][0]).toUpperCase()
-  return name.slice(0, 2).toUpperCase()
-}
-
-export function ProviderLogo({ provider, size = 24 }: { provider: string; size?: number }) {
-  const theme = useTheme()
-  const radius = Math.round(size * 0.28)
-  const iconSize = Math.round(size * 0.56)
-
-  // First-party (Zen/Hanzo) — the real brand mark knocked out of a filled tile.
-  if (isFirstParty(provider)) {
-    const fg = theme.color1?.get() ?? '#000000' // cut-out mark: the tile's contrast color
-    const markSize = Math.round(size * 0.66)
-    const isZen = provider.trim().toLowerCase() === 'zen'
-    return (
-      <XStack width={size} height={size} items="center" justify="center" rounded={radius} bg="$color12">
-        {isZen ? <EnsoMark size={markSize} color={fg} /> : <HanzoHMark size={Math.round(size * 0.56)} color={fg} />}
-      </XStack>
-    )
-  }
-
-  // A known provider with a curated, brand-neutral glyph.
-  const Known = KNOWN[provider.trim().toLowerCase()]
-  if (Known) {
-    return (
-      <XStack
-        width={size}
-        height={size}
-        items="center"
-        justify="center"
-        rounded={radius}
-        bg="$color3"
-        borderWidth={1}
-        borderColor="$borderColor"
-      >
-        <Known size={iconSize} color="$color11" />
-      </XStack>
-    )
-  }
-
-  // Otherwise — a clean, stable initials chip (no fabricated brand logo).
-  return (
-    <XStack
-      width={size}
-      height={size}
-      items="center"
-      justify="center"
-      rounded={radius}
-      bg="$color3"
-      borderWidth={1}
-      borderColor="$borderColor"
-    >
-      <Text fontSize={Math.round(size * 0.4)} fontWeight="800" color="$color11">
-        {providerInitials(provider)}
-      </Text>
-    </XStack>
-  )
-}
-
-/** A generic fallback mark for an unspecified provider (used sparingly). */
-export function GenericLogo({ size = 24 }: { size?: number }) {
-  return (
-    <XStack width={size} height={size} items="center" justify="center" rounded={Math.round(size * 0.28)} bg="$color3" borderWidth={1} borderColor="$borderColor">
-      <Server size={Math.round(size * 0.56)} color="$color11" />
-    </XStack>
-  )
-}
-
-// Boxes is re-exported as the conventional "custom model" mark for callers that
-// render a non-provider tile next to ProviderLogo (keeps the icon source single).
-export { Boxes as CustomModelMark }

package/src/product/Reorder.test.ts

@@ -1,41 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import { rowShift, targetIndex } from './Reorder'
-
-describe('targetIndex', () => {
-  it('rounds travel to the nearest row and clamps to range', () => {
-    // rowH=44, from=2, drag down 100px → +2.27 → +2 → index 4
-    expect(targetIndex(2, 100, 44, 6)).toBe(4)
-    // drag up 100px → −2 → index 0
-    expect(targetIndex(2, -100, 44, 6)).toBe(0)
-    // clamp at the ends
-    expect(targetIndex(5, 999, 44, 6)).toBe(5)
-    expect(targetIndex(0, -999, 44, 6)).toBe(0)
-    // sub-half-row travel stays put
-    expect(targetIndex(3, 20, 44, 6)).toBe(3)
-  })
-
-  it('is a safe no-op for degenerate inputs', () => {
-    expect(targetIndex(2, 100, 0, 6)).toBe(2)
-    expect(targetIndex(2, 100, 44, 0)).toBe(2)
-  })
-})
-
-describe('rowShift — displacement of siblings during a drag', () => {
-  const rowH = 44
-  it('the dragged row follows the pointer', () => {
-    expect(rowShift(2, 2, 4, 90, rowH)).toBe(90)
-  })
-  it('rows between from and to (dragging down) move up by one row', () => {
-    // from=1 → to=3: rows 2,3 shift up
-    expect(rowShift(2, 1, 3, 90, rowH)).toBe(-rowH)
-    expect(rowShift(3, 1, 3, 90, rowH)).toBe(-rowH)
-    expect(rowShift(4, 1, 3, 90, rowH)).toBe(0)
-  })
-  it('rows between to and from (dragging up) move down by one row', () => {
-    // from=4 → to=2: rows 2,3 shift down
-    expect(rowShift(2, 4, 2, -90, rowH)).toBe(rowH)
-    expect(rowShift(3, 4, 2, -90, rowH)).toBe(rowH)
-    expect(rowShift(1, 4, 2, -90, rowH)).toBe(0)
-  })
-})

package/src/product/Reorder.tsx

@@ -1,110 +0,0 @@
-'use client'
-
-/**
- * Reorder — a tiny pointer-driven drag-to-reorder list. No dependency: it uses
- * Pointer Events (so it works with mouse AND touch) and CSS transforms, matching
- * the shell's transform-driven motion. Rows are a FIXED height (all pinned rows
- * are), which keeps the "where does it drop?" math exact and pure (`targetIndex`)
- * and the reflow buttery — the lifted row follows the pointer 1:1 while its
- * displaced siblings ease into place.
- *
- * The list is controlled: `onReorder(from, to)` fires once on drop; the parent
- * owns the data (here, the account-backed pins model). `renderItem` gets a
- * `handle` to spread on the drag affordance so the rest of the row stays
- * interactive (tap to open, etc.).
- */
-import { useCallback, useRef, useState, type ReactNode } from 'react'
-import { YStack } from '@hanzo/gui'
-
-/** Final index for a drag: start + rounded rows travelled, clamped. PURE. */
-export function targetIndex(from: number, dy: number, rowH: number, count: number): number {
-  if (rowH <= 0 || count <= 0) return from
-  const raw = from + Math.round(dy / rowH)
-  return Math.max(0, Math.min(raw, count - 1))
-}
-
-/** Vertical shift for row `i` during a drag from `from`→`to` (the dragged row
- *  follows the pointer; rows between them make room). PURE. */
-export function rowShift(i: number, from: number, to: number, dy: number, rowH: number): number {
-  if (i === from) return dy
-  if (from < to && i > from && i <= to) return -rowH
-  if (from > to && i < from && i >= to) return rowH
-  return 0
-}
-
-export type DragHandle = { onPointerDown: (e: { clientY?: number; pointerId?: number; nativeEvent?: { clientY?: number } }) => void }
-
-export function Reorder<T>({
-  items,
-  keyOf,
-  rowHeight = 44,
-  onReorder,
-  renderItem,
-}: {
-  items: T[]
-  keyOf: (t: T) => string
-  rowHeight?: number
-  onReorder: (from: number, to: number) => void
-  renderItem: (item: T, handle: DragHandle, dragging: boolean) => ReactNode
-}) {
-  const [drag, setDrag] = useState<{ from: number; dy: number } | null>(null)
-  const startRef = useRef<{ from: number; startY: number } | null>(null)
-
-  const to = drag ? targetIndex(drag.from, drag.dy, rowHeight, items.length) : -1
-
-  const begin = useCallback(
-    (index: number) =>
-      (e: { clientY?: number; pointerId?: number; nativeEvent?: { clientY?: number } }) => {
-        const startY = e.clientY ?? e.nativeEvent?.clientY ?? 0
-        startRef.current = { from: index, startY }
-        setDrag({ from: index, dy: 0 })
-
-        const move = (ev: PointerEvent) => {
-          if (!startRef.current) return
-          setDrag({ from: startRef.current.from, dy: ev.clientY - startRef.current.startY })
-        }
-        const end = () => {
-          const s = startRef.current
-          window.removeEventListener('pointermove', move)
-          window.removeEventListener('pointerup', end)
-          window.removeEventListener('pointercancel', end)
-          startRef.current = null
-          setDrag((d) => {
-            if (s && d) {
-              const t = targetIndex(s.from, d.dy, rowHeight, items.length)
-              if (t !== s.from) onReorder(s.from, t)
-            }
-            return null
-          })
-        }
-        window.addEventListener('pointermove', move)
-        window.addEventListener('pointerup', end)
-        window.addEventListener('pointercancel', end)
-      },
-    [items.length, rowHeight, onReorder],
-  )
-
-  return (
-    <YStack>
-      {items.map((item, i) => {
-        const dragging = drag?.from === i
-        const shift = drag && to >= 0 ? rowShift(i, drag.from, to, drag.dy, rowHeight) : 0
-        return (
-          <YStack
-            key={keyOf(item)}
-            height={rowHeight}
-            justify="center"
-            className="hz-drag-item"
-            style={{
-              transform: `translateY(${shift}px)`,
-              zIndex: dragging ? 2 : 1,
-              ...(dragging ? { transition: 'none', boxShadow: '0 8px 24px rgba(0,0,0,0.28)' } : null),
-            }}
-          >
-            {renderItem(item, { onPointerDown: begin(i) }, dragging)}
-          </YStack>
-        )
-      })}
-    </YStack>
-  )
-}

package/src/product/SelectMenu.tsx

@@ -1,94 +0,0 @@
-'use client'
-
-/**
- * SelectMenu — a compact, reusable dropdown select on @hanzo/gui Popover (the
- * console's proven dropdown idiom, same as OrgSwitcher/ScopeSwitcher). Renders a
- * labelled trigger ("All types", or the chosen option) and a popover list with a
- * check on the active option. Prop-driven + self-contained so it lifts into
- * `@hanzo/ui`. `value === null` is the "all"/unfiltered state.
- */
-import type { ReactElement } from 'react'
-import { useState } from 'react'
-import { Button, Popover, Text, XStack, YStack } from '@hanzo/gui'
-import { ChevronDown, Check } from '@hanzogui/lucide-icons-2'
-
-export type SelectOption<T extends string> = { key: T; label: string }
-
-export function SelectMenu<T extends string>({
-  options,
-  value,
-  onChange,
-  allLabel = 'All',
-  icon,
-  minWidth = 130,
-}: {
-  options: SelectOption<T>[]
-  value: T | null
-  onChange: (v: T | null) => void
-  /** Label shown (and first menu row) for the unfiltered `null` state. */
-  allLabel?: string
-  /** Optional leading icon in the trigger. */
-  icon?: ReactElement
-  minWidth?: number
-}) {
-  const [open, setOpen] = useState(false)
-  const active = value === null ? null : options.find((o) => o.key === value) ?? null
-  const triggerLabel = active ? active.label : allLabel
-
-  const pick = (v: T | null) => {
-    onChange(v)
-    setOpen(false)
-  }
-
-  return (
-    <Popover open={open} onOpenChange={setOpen} placement="bottom-start">
-      <Popover.Trigger asChild>
-        <Button
-          size="$2"
-          minW={minWidth}
-          justify="space-between"
-          borderWidth={1}
-          borderColor="$borderColor"
-          bg={value !== null ? '$color5' : 'transparent'}
-          icon={icon}
-          iconAfter={<ChevronDown size={14} opacity={0.6} />}
-        >
-          <Text fontSize="$2" color="$color12" numberOfLines={1} flex={1}>
-            {triggerLabel}
-          </Text>
-        </Button>
-      </Popover.Trigger>
-      <Popover.Content bordered elevate p="$1.5" minW={minWidth} bg="$color2" borderColor="$borderColor">
-        <YStack gap="$0.5" minW={minWidth} maxH={320} overflow="scroll">
-          <Row label={allLabel} active={value === null} onPress={() => pick(null)} />
-          {options.map((o) => (
-            <Row key={o.key} label={o.label} active={value === o.key} onPress={() => pick(o.key)} />
-          ))}
-        </YStack>
-      </Popover.Content>
-    </Popover>
-  )
-}
-
-function Row({ label, active, onPress }: { label: string; active: boolean; onPress: () => void }) {
-  return (
-    <XStack
-      items="center"
-      gap="$2"
-      px="$2.5"
-      py="$1.5"
-      rounded="$3"
-      cursor="pointer"
-      hoverStyle={{ bg: '$color4' }}
-      bg={active ? '$color4' : 'transparent'}
-      onPress={onPress}
-    >
-      <XStack width={14} items="center" justify="center">
-        {active ? <Check size={13} /> : null}
-      </XStack>
-      <Text fontSize="$2" color="$color12" flex={1} numberOfLines={1}>
-        {label}
-      </Text>
-    </XStack>
-  )
-}

package/src/product/SlideOver.tsx

@@ -1,197 +0,0 @@
-'use client'
-
-/**
- * SlideOver — the ONE right-side (or left) slide-out overlay for the console.
- *
- * It is the single mechanism behind every off-canvas surface: the mobile nav
- * drawer, the item DetailPane, and the account/settings menu. One definition, many
- * mounts (DRY) — so every drawer slides, dims, traps, and closes identically.
- *
- * Smoothness is CSS-transform driven (never a JS layout branch): the panel is
- * ALWAYS mounted and toggles `translateX(0) ↔ translateX(±100%)` via the shared
- * `.hz-slide` class, and the backdrop cross-fades via `.hz-fade`. Because it never
- * unmounts, the EXIT animates too (a `Dialog` that unmounts on close cannot). Both
- * classes are reduced-motion-aware in `globals.css`, so the whole thing snaps
- * instantly for users who ask for that — no bespoke logic here.
- *
- * Responsive by construction: FULL-WIDTH (full-screen) below `lg`, a fixed-width
- * pane at `lg+` (`size`). Uses `100dvh` so the mobile browser chrome never clips it.
- *
- * A11y: `role="dialog" aria-modal`, Escape to close, backdrop click to close, body
- * scroll lock while open (ref-counted so stacked overlays don't fight), and focus
- * moves into the panel on open and returns to the opener on close.
- */
-import { useEffect, useRef, type ReactNode } from 'react'
-import { Button, ScrollView, Text, XStack, YStack } from '@hanzo/gui'
-import { X } from '@hanzogui/lucide-icons-2'
-
-import { asColor, type IconLike } from './color'
-
-/** The lg breakpoint (px) — matches the shell's one responsive threshold. */
-const LG = 1024
-
-// ── Body scroll lock, ref-counted so nested/stacked overlays don't clobber it ──
-let lockCount = 0
-let savedOverflow = ''
-function lockScroll() {
-  if (typeof document === 'undefined') return
-  if (lockCount === 0) {
-    savedOverflow = document.body.style.overflow
-    document.body.style.overflow = 'hidden'
-  }
-  lockCount++
-}
-function unlockScroll() {
-  if (typeof document === 'undefined') return
-  lockCount = Math.max(0, lockCount - 1)
-  if (lockCount === 0) document.body.style.overflow = savedOverflow
-}
-
-export type SlideOverProps = {
-  open: boolean
-  onClose: () => void
-  /** Which edge the panel slides from. Default right. */
-  side?: 'right' | 'left'
-  /** Panel width at lg+ (px). Below lg it is always full-screen. Default 420. */
-  size?: number
-  /** Optional header title — when set, SlideOver renders a header + a scroll body. */
-  title?: ReactNode
-  /** Optional header icon (tinted with `iconColor`). */
-  icon?: IconLike
-  iconColor?: string
-  /** Extra header content, right-aligned before the close button. */
-  headerRight?: ReactNode
-  /** Accessible label when no visible title is given. */
-  ariaLabel?: string
-  /** z-index for stacking (a pane opened over a drawer passes a higher value). */
-  zIndex?: number
-  children: ReactNode
-}
-
-export function SlideOver({
-  open,
-  onClose,
-  side = 'right',
-  size = 420,
-  title,
-  icon: Icon,
-  iconColor,
-  headerRight,
-  ariaLabel,
-  zIndex = 1000,
-  children,
-}: SlideOverProps) {
-  const panelRef = useRef<HTMLElement | null>(null)
-  const openerRef = useRef<Element | null>(null)
-
-  // Body scroll lock + focus management, driven by `open`.
-  useEffect(() => {
-    if (!open) return
-    openerRef.current = typeof document !== 'undefined' ? document.activeElement : null
-    lockScroll()
-    // Move focus into the panel (next frame so it is laid out + on-screen).
-    const t = window.setTimeout(() => {
-      const el = panelRef.current
-      if (el && typeof el.focus === 'function') el.focus()
-    }, 0)
-    return () => {
-      window.clearTimeout(t)
-      unlockScroll()
-      const opener = openerRef.current
-      if (opener && opener instanceof HTMLElement && typeof opener.focus === 'function') opener.focus()
-    }
-  }, [open])
-
-  // Escape closes.
-  useEffect(() => {
-    if (!open) return
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        e.stopPropagation()
-        onClose()
-      }
-    }
-    window.addEventListener('keydown', onKey)
-    return () => window.removeEventListener('keydown', onKey)
-  }, [open, onClose])
-
-  const offscreen = side === 'right' ? 'translateX(100%)' : 'translateX(-100%)'
-  const edge = side === 'right' ? { r: 0 } : { l: 0 }
-
-  return (
-    <YStack
-      // Fixed to the viewport; overflow hidden so the off-screen panel (absolute
-      // child) is CLIPPED and never adds a horizontal scrollbar.
-      overflow="hidden"
-      pointerEvents={open ? 'auto' : 'none'}
-      aria-hidden={!open}
-      style={{ position: 'fixed', inset: 0, zIndex }}
-    >
-      {/* Backdrop — cross-fades; click to dismiss. */}
-      <YStack
-        position="absolute"
-        t={0}
-        l={0}
-        r={0}
-        b={0}
-        bg="rgba(0,0,0,0.55)"
-        className="hz-fade"
-        style={{ opacity: open ? 1 : 0 }}
-        onPress={onClose}
-      />
-
-      {/* Panel — slides in from the edge. Full-screen below lg, fixed width at lg+. */}
-      <YStack
-        // @ts-expect-error — web DOM ref; Gui forwards it to the underlying node.
-        ref={panelRef}
-        tabIndex={-1}
-        role="dialog"
-        aria-modal={open ? true : undefined}
-        aria-label={typeof title === 'string' ? title : ariaLabel}
-        position="absolute"
-        t={0}
-        b={0}
-        {...edge}
-        width="100%"
-        $lg={{ width: size, maxW: '100vw' }}
-        bg="$color1"
-        borderLeftWidth={side === 'right' ? 1 : 0}
-        borderRightWidth={side === 'left' ? 1 : 0}
-        borderColor="$borderColor"
-        className="hz-slide"
-        style={{ transform: open ? 'translateX(0)' : offscreen, height: '100dvh' }}
-      >
-        {title !== undefined ? (
-          <>
-            <XStack
-              items="center"
-              gap="$2.5"
-              px="$4"
-              height={56}
-              borderBottomWidth={1}
-              borderColor="$borderColor"
-            >
-              {Icon ? <Icon size={18} color={iconColor ? asColor(iconColor) : undefined} /> : null}
-              <Text flex={1} fontSize="$5" fontWeight="700" color="$color12" numberOfLines={1}>
-                {title}
-              </Text>
-              {headerRight}
-              <Button size="$2" chromeless icon={<X size={18} />} onPress={onClose} aria-label="Close" />
-            </XStack>
-            <ScrollView flex={1}>
-              <YStack flex={1} p="$4" gap="$3">
-                {children}
-              </YStack>
-            </ScrollView>
-          </>
-        ) : (
-          // Bare mode — the caller owns the full panel layout (e.g. the nav drawer
-          // renders its own header + scroll + footer).
-          children
-        )}
-      </YStack>
-    </YStack>
-  )
-}
-
-export { LG as SLIDEOVER_LG }

package/src/product/StatusTag.tsx

@@ -1,49 +0,0 @@
-'use client'
-
-/**
- * Status pill — maps a resource/cluster status string to a tone, one place.
- *
- * Provisioned things (managed resources, clusters) report free-form lifecycle
- * strings; this normalizes them to green/yellow/red/neutral so every list reads
- * the same. Style props use the v5 shorthand set.
- */
-import { Text } from '@hanzo/gui'
-
-type Tone = 'green' | 'yellow' | 'red' | 'neutral'
-
-const toneOf = (status: string): Tone => {
-  const s = status.toLowerCase()
-  // Platform health verdicts map straight to a tone (the apps inventory reports
-  // green/yellow/red directly).
-  if (s === 'green') return 'green'
-  if (s === 'yellow') return 'yellow'
-  if (s === 'red') return 'red'
-  if (['ready', 'active', 'running', 'available', 'ok'].includes(s)) return 'green'
-  if (['creating', 'provisioning', 'pending', 'updating', 'attaching'].includes(s)) return 'yellow'
-  if (['error', 'failed', 'degraded', 'down'].includes(s)) return 'red'
-  return 'neutral'
-}
-
-// `as const` keeps the literal token types (not widened to `string`) so they
-// satisfy the GUI `bg`/`color` token unions.
-const TONE_BG = {
-  green: '$color5',
-  yellow: '$color4',
-  red: '$color4',
-  neutral: '$color3',
-} as const
-const TONE_FG = {
-  green: '$color12',
-  yellow: '$color12',
-  red: '$color12',
-  neutral: '$color11',
-} as const
-
-export function StatusTag({ status }: { status?: string }) {
-  const tone = toneOf(status ?? '')
-  return (
-    <Text fontSize="$1" px="$2" py="$1" rounded="$2" bg={TONE_BG[tone]} color={TONE_FG[tone]}>
-      {status || 'unknown'}
-    </Text>
-  )
-}

package/src/product/ThemeToggle.tsx

@@ -1,25 +0,0 @@
-'use client'
-
-/**
- * Theme toggle — flips the console between dark and light via next-theme. The
- * provider already wires `NextThemeProvider` → `GuiProvider`, so setting the
- * theme here re-themes the whole tree. Shows the action's target icon (a sun in
- * dark mode, a moon in light mode).
- */
-import { Button } from '@hanzo/gui'
-import { useThemeSetting } from '@hanzogui/next-theme'
-import { Moon, Sun } from '@hanzogui/lucide-icons-2'
-
-export function ThemeToggle() {
-  const { current, resolvedTheme, set } = useThemeSetting()
-  const isDark = (resolvedTheme ?? current ?? 'dark') !== 'light'
-  return (
-    <Button
-      size="$2"
-      chromeless
-      icon={isDark ? <Sun size={16} /> : <Moon size={16} />}
-      onPress={() => set(isDark ? 'light' : 'dark')}
-      aria-label={isDark ? 'Switch to light theme' : 'Switch to dark theme'}
-    />
-  )
-}