@hanzo/ui 8.0.7 → 8.0.8

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,80 +0,0 @@
-'use client'
-
-/**
- * SelectMenu — a compact, reusable dropdown select on @hanzo/gui Popover. Renders a
- * labelled trigger ("All types", or the chosen option) and a menu list with a check on
- * the active option. Prop-driven + self-contained. `value === null` is the
- * "all"/unfiltered state.
- *
- * Uses the ONE shared menu spec (MenuPanel + MenuItemView) so it is pixel-identical to
- * DropdownMenu/ContextMenu, and the SAME portal-theme fix (PortalTheme) so it renders
- * correctly through the portal under a nested `<Theme>`, light or dark.
- */
-import type { ReactElement } from 'react'
-import { useState } from 'react'
-import { Button, Popover, Text } from '@hanzo/gui'
-import { ChevronDown } from '@hanzogui/lucide-icons-2'
-import { MenuItemView, MenuPanel } from './menu/items'
-import { PortalTheme, useThemeName } from './menu/portal-theme'
-import { menuKeyDown } from './menu/roving'
-
-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 themeName = useThemeName()
-  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 bg="transparent" borderWidth={0} p={0} elevation={0}>
-        <PortalTheme name={themeName}>
-          <MenuPanel minWidth={minWidth} maxHeight={320} onKeyDown={(e) => menuKeyDown(e, () => setOpen(false))}>
-            <MenuItemView label={allLabel} selected={value === null} onSelect={() => pick(null)} />
-            {options.map((o) => (
-              <MenuItemView key={o.key} label={o.label} selected={value === o.key} onSelect={() => pick(o.key)} />
-            ))}
-          </MenuPanel>
-        </PortalTheme>
-      </Popover.Content>
-    </Popover>
-  )
-}

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,135 +0,0 @@
-'use client'
-
-/**
- * ThemeToggle — flips between dark and light. Framework-agnostic by default so
- * Vite / Tauri / Express hosts can use it with NO Next dependency:
- *
- *   • Controlled:  <ThemeToggle theme={theme} onToggle={setTheme} />   (host owns theme)
- *   • Uncontrolled (agnostic): <ThemeToggle onThemeChange={fn} />       (toggles the DOM
- *                              `.dark` class + persists to localStorage)
- *   • Uncontrolled (no props): <ThemeToggle />                          (console/Next —
- *                              falls back to the OPTIONAL @hanzogui/next-theme path;
- *                              if it cannot load, degrades to the agnostic DOM toggle)
- *
- * Shows the action's target icon (a sun in dark mode, a moon in light mode).
- */
-import type { ReactNode } from 'react'
-import { Component, Suspense, lazy, useState } from 'react'
-import { Button } from '@hanzo/gui'
-import { Moon, Sun } from '@hanzogui/lucide-icons-2'
-
-export type ThemeMode = 'light' | 'dark'
-
-export type ThemeToggleProps = {
-  /** Controlled theme. Pair with `onToggle`/`onThemeChange` to fully control it. */
-  theme?: ThemeMode
-  /** Seed for uncontrolled mode (default: read from the DOM `.dark` class, else 'dark'). */
-  defaultTheme?: ThemeMode
-  /** Called with the next theme on toggle (alias of `onThemeChange`). */
-  onToggle?: (next: ThemeMode) => void
-  /** Called with the next theme on toggle. */
-  onThemeChange?: (next: ThemeMode) => void
-  /** @hanzo/gui Button size token (default "$2"). */
-  size?: string
-  /** aria-label override. */
-  label?: string
-}
-
-const STORAGE_KEY = 'theme'
-
-function readDomTheme(): ThemeMode | undefined {
-  if (typeof document === 'undefined') return undefined
-  const el = document.documentElement
-  if (el.classList.contains('dark')) return 'dark'
-  if (el.classList.contains('light')) return 'light'
-  try {
-    const ls = window.localStorage.getItem(STORAGE_KEY)
-    if (ls === 'light' || ls === 'dark') return ls
-  } catch {
-    /* localStorage may be unavailable */
-  }
-  return undefined
-}
-
-function applyDomTheme(next: ThemeMode): void {
-  if (typeof document === 'undefined') return
-  const el = document.documentElement
-  el.classList.toggle('dark', next === 'dark')
-  el.classList.toggle('light', next === 'light')
-  el.style.colorScheme = next
-  try {
-    window.localStorage.setItem(STORAGE_KEY, next)
-  } catch {
-    /* ignore */
-  }
-}
-
-/**
- * The framework-agnostic toggle button. Controlled when `theme` is provided; otherwise
- * self-managed via the DOM `.dark` class. No framework dependency — safe on any host.
- */
-export function AgnosticThemeToggle({
-  theme,
-  defaultTheme,
-  onToggle,
-  onThemeChange,
-  size = '$2',
-  label,
-}: ThemeToggleProps) {
-  const controlled = theme !== undefined
-  const [internal, setInternal] = useState<ThemeMode>(() => theme ?? defaultTheme ?? readDomTheme() ?? 'dark')
-  const current: ThemeMode = controlled ? (theme as ThemeMode) : internal
-  const isDark = current === 'dark'
-
-  const toggle = () => {
-    const next: ThemeMode = isDark ? 'light' : 'dark'
-    if (!controlled) {
-      setInternal(next)
-      applyDomTheme(next)
-    }
-    onToggle?.(next)
-    onThemeChange?.(next)
-  }
-
-  return (
-    <Button
-      size={size as never}
-      chromeless
-      icon={isDark ? <Sun size={16} /> : <Moon size={16} />}
-      onPress={toggle}
-      aria-label={label ?? (isDark ? 'Switch to light theme' : 'Switch to dark theme')}
-    />
-  )
-}
-
-// @hanzogui/next-theme is an OPTIONAL dependency — loaded only on the uncontrolled,
-// no-props path (console/Next). Lazily code-split so non-Next hosts never need it at
-// runtime; if it fails to load, the boundary below degrades to the agnostic toggle.
-const NextThemeToggle = lazy(() => import('./ThemeToggleNext'))
-
-class NextThemeBoundary extends Component<{ fallback: ReactNode; children: ReactNode }, { failed: boolean }> {
-  state = { failed: false }
-  static getDerivedStateFromError() {
-    return { failed: true }
-  }
-  render() {
-    return this.state.failed ? this.props.fallback : this.props.children
-  }
-}
-
-export function ThemeToggle(props: ThemeToggleProps) {
-  const injected =
-    props.theme !== undefined || props.onToggle !== undefined || props.onThemeChange !== undefined
-  if (injected) return <AgnosticThemeToggle {...props} />
-
-  // No props → keep the existing console/Next behaviour via the optional next-theme
-  // path, degrading to the agnostic DOM toggle if it is not installed.
-  const fallback = <AgnosticThemeToggle {...props} />
-  return (
-    <NextThemeBoundary fallback={fallback}>
-      <Suspense fallback={fallback}>
-        <NextThemeToggle size={props.size} label={props.label} />
-      </Suspense>
-    </NextThemeBoundary>
-  )
-}

package/src/product/ThemeToggleNext.tsx

@@ -1,27 +0,0 @@
-'use client'
-
-/**
- * ThemeToggleNext — the @hanzogui/next-theme binding (console / Next). This is the ONLY
- * module that imports @hanzogui/next-theme, so it stays an OPTIONAL dependency: the base
- * ThemeToggle lazy-loads it (default export) and non-Next hosts never pull it in unless
- * they import this component directly. UI is delegated to the framework-agnostic button
- * in controlled mode, so every toggle looks identical.
- */
-import { useThemeSetting } from '@hanzogui/next-theme'
-import { AgnosticThemeToggle, type ThemeToggleProps } from './ThemeToggle'
-
-function ThemeToggleNext({ size, label }: Pick<ThemeToggleProps, 'size' | 'label'>) {
-  const { current, resolvedTheme, set } = useThemeSetting()
-  const isDark = (resolvedTheme ?? current ?? 'dark') !== 'light'
-  return (
-    <AgnosticThemeToggle
-      theme={isDark ? 'dark' : 'light'}
-      onToggle={(next) => set(next)}
-      size={size}
-      label={label}
-    />
-  )
-}
-
-export default ThemeToggleNext
-export { ThemeToggleNext }