@hanzo/ui 8.0.7 → 8.0.11

package/src/product/OrgSwitcher.tsx

@@ -1,332 +0,0 @@
-'use client'
-
-/**
- * OrgSwitcher — the Vercel-style org/team switcher, hoisted from the console
- * (hanzoai/ui#36) onto @hanzo/gui primitives. Shows the org the surface is
- * scoped to, switches between the orgs the caller can see, and creates one.
- *
- * Host-agnostic: the LIST is a lazy, paged loader the host injects (IAM
- * `get-organizations` behind its own proxy) — one page at a time, the search
- * term pushed to the server, more on demand (scroll + "Load more"), so it
- * scales to thousands of orgs. No loader → the current org alone, synthesized
- * from the scope (never fabricated). Selecting re-scopes IN PLACE via
- * `scope.switchOrg` (persist + reload → every module refetches under the new
- * `X-Org-Id`). Create posts through the injected hook, then scopes into the
- * new org.
- */
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { Button, Input, Popover, Spinner, Text, XStack, YStack } from '@hanzo/gui'
-import { Check, ChevronsUpDown, LayoutGrid, Plus, Search } from '@hanzogui/lucide-icons-2'
-
-import { filterOrgs, type Org, type OrgScope } from './scope'
-
-const titleCase = (s: string) => (s ? s[0].toUpperCase() + s.slice(1) : s)
-const initialsOf = (o: Org) =>
-  (o.displayName || o.name)
-    .split(/\s+/)
-    .map((w) => w[0])
-    .join('')
-    .slice(0, 2)
-    .toUpperCase()
-
-/** An org's avatar — its logo when set, else a monogram tile. */
-function OrgAvatar({ org, size = 22 }: { org: Org; size?: number }) {
-  if (org.logo) {
-    // eslint-disable-next-line @next/next/no-img-element
-    return <img src={org.logo} alt="" style={{ height: size, width: size, objectFit: 'contain', display: 'block', borderRadius: 6 }} />
-  }
-  return (
-    <YStack width={size} height={size} rounded="$3" bg="$color4" items="center" justify="center">
-      <Text fontSize="$1" fontWeight="800" color="$color12">
-        {initialsOf(org)}
-      </Text>
-    </YStack>
-  )
-}
-
-export type OrgSwitcherProps = {
-  /** The active-org contract (see `orgScope`). */
-  scope: OrgScope
-  /**
-   * Lazy paged org list: 0-based page + server-pushed search → one page of
-   * rows. A full page (=== pageSize) implies another. Omit when the caller
-   * can only see its own org.
-   */
-  orgs?: (page: number, query: string) => Promise<Org[]>
-  /** Rows per page the loader returns. Default 20. */
-  pageSize?: number
-  /** Create-org hook → the created org's id; omit to hide the affordance. */
-  create?: (name: string) => Promise<string>
-  /** Show the "All organizations" de-scope row (`scope.leaveOrg`). */
-  picker?: boolean
-}
-
-export function OrgSwitcher({ scope, orgs, pageSize = 20, create, picker = false }: OrgSwitcherProps) {
-  const currentId = scope.currentOrg()
-
-  const [open, setOpen] = useState(false)
-  const [query, setQuery] = useState('')
-  const [debounced, setDebounced] = useState('')
-  const [rows, setRows] = useState<Org[]>([])
-  const [loading, setLoading] = useState(false)
-  const [loadingMore, setLoadingMore] = useState(false)
-  const [hasMore, setHasMore] = useState(false)
-  const [creating, setCreating] = useState(false)
-  const [newName, setNewName] = useState('')
-  const [busy, setBusy] = useState(false)
-  const [err, setErr] = useState<string | null>(null)
-  const pageRef = useRef(0)
-  const reqRef = useRef(0) // race token — a newer request supersedes older ones
-
-  // Debounce the search so type-as-you-search re-hits the server at most ~4×/s.
-  useEffect(() => {
-    const id = setTimeout(() => setDebounced(query.trim()), 250)
-    return () => clearTimeout(id)
-  }, [query])
-
-  const fetchPage = useCallback(
-    async (page: number, q: string, append: boolean) => {
-      if (!orgs) return
-      const token = ++reqRef.current
-      append ? setLoadingMore(true) : setLoading(true)
-      try {
-        const incoming = await orgs(page, q)
-        if (token !== reqRef.current) return
-        pageRef.current = page
-        setRows((prev) => {
-          const merged = append ? [...prev] : []
-          const seen = new Set(merged.map((o) => o.name))
-          for (const o of incoming) if (!seen.has(o.name)) merged.push(o)
-          return merged
-        })
-        setHasMore(incoming.length >= pageSize)
-      } catch {
-        // Honest empty / keep what's shown — never a fabricated list.
-        if (token !== reqRef.current) return
-        if (!append) setRows([])
-        setHasMore(false)
-      } finally {
-        if (token === reqRef.current) {
-          setLoading(false)
-          setLoadingMore(false)
-        }
-      }
-    },
-    [orgs, pageSize],
-  )
-
-  // (Re)load page 0 when the popover opens or the debounced query changes.
-  useEffect(() => {
-    if (!open || !orgs) return
-    void fetchPage(0, debounced, false)
-  }, [open, debounced, fetchPage, orgs])
-
-  const loadMore = useCallback(() => {
-    if (loading || loadingMore || !hasMore) return
-    void fetchPage(pageRef.current + 1, debounced, true)
-  }, [loading, loadingMore, hasMore, debounced, fetchPage])
-
-  // Rows to render — the loaded list (client-filtered too), else the current
-  // org synthesized from the scope.
-  const visible: Org[] = useMemo(() => {
-    if (orgs) return filterOrgs(rows, query)
-    return [{ name: currentId, displayName: titleCase(currentId) }]
-  }, [orgs, rows, query, currentId])
-
-  const current: Org = useMemo(
-    () => rows.find((o) => o.name === currentId) ?? { name: currentId, displayName: titleCase(currentId) },
-    [rows, currentId],
-  )
-
-  const select = useCallback(
-    (org: string) => {
-      setOpen(false)
-      scope.switchOrg(org)
-    },
-    [scope],
-  )
-
-  const submitCreate = async () => {
-    const name = newName.trim()
-    if (!name || !create) return
-    setBusy(true)
-    setErr(null)
-    try {
-      const org = await create(name)
-      scope.switchOrg(org)
-    } catch (e) {
-      setErr(e instanceof Error ? e.message : 'Could not create the organization.')
-      setBusy(false)
-    }
-  }
-
-  return (
-    <Popover open={open} onOpenChange={setOpen} placement="bottom-start">
-      <Popover.Trigger asChild>
-        <Button size="$2" chromeless icon={<OrgAvatar org={current} size={18} />} iconAfter={<ChevronsUpDown size={13} />}>
-          {current.displayName || titleCase(current.name)}
-        </Button>
-      </Popover.Trigger>
-      <Popover.Content bordered elevate p="$2" width={300} bg="$color2" borderColor="$borderColor">
-        {creating ? (
-          <YStack gap="$2">
-            <Text fontSize="$2" color="$color12" fontWeight="700">
-              Create organization
-            </Text>
-            <Input
-              size="$3"
-              placeholder="Organization name"
-              value={newName}
-              onChangeText={setNewName}
-              autoCapitalize="words"
-              onSubmitEditing={() => void submitCreate()}
-            />
-            {err ? (
-              <Text fontSize="$1" color="$red10">
-                {err}
-              </Text>
-            ) : null}
-            <XStack gap="$2" justify="flex-end">
-              <Button size="$2" chromeless onPress={() => setCreating(false)} disabled={busy}>
-                Cancel
-              </Button>
-              <Button
-                size="$2"
-                onPress={() => void submitCreate()}
-                disabled={busy || !newName.trim()}
-                icon={busy ? <Spinner size="small" /> : <Plus size={14} />}
-              >
-                Create
-              </Button>
-            </XStack>
-          </YStack>
-        ) : (
-          <YStack gap="$1">
-            {orgs ? (
-              <XStack items="center" gap="$2" px="$2" py="$1" rounded="$3" borderWidth={1} borderColor="$borderColor">
-                <Search size={13} opacity={0.6} />
-                <Input
-                  flex={1}
-                  size="$2"
-                  borderWidth={0}
-                  bg="transparent"
-                  placeholder="Find organization…"
-                  value={query}
-                  onChangeText={setQuery}
-                  autoCapitalize="none"
-                  autoCorrect={false}
-                />
-              </XStack>
-            ) : null}
-
-            <div
-              style={{ maxHeight: 300, overflowY: 'auto', display: 'flex', flexDirection: 'column' }}
-              onScroll={(e) => {
-                const el = e.currentTarget
-                if (el.scrollHeight - el.scrollTop - el.clientHeight < 48) loadMore()
-              }}
-            >
-              {loading ? (
-                <XStack items="center" gap="$2" px="$2" py="$3">
-                  <Spinner size="small" color="$color11" />
-                  <Text fontSize="$2" color="$color10">
-                    Loading organizations…
-                  </Text>
-                </XStack>
-              ) : visible.length === 0 ? (
-                <Text px="$2" py="$2" fontSize="$2" color="$color10">
-                  {query.trim() ? `No organizations match “${query.trim()}”.` : 'No organizations yet.'}
-                </Text>
-              ) : (
-                visible.map((org) => (
-                  <XStack
-                    key={org.name}
-                    onPress={() => select(org.name)}
-                    cursor="pointer"
-                    items="center"
-                    gap="$2.5"
-                    px="$2"
-                    py="$2"
-                    rounded="$3"
-                    bg={org.name === currentId ? '$color4' : 'transparent'}
-                    hoverStyle={{ bg: '$color5' }}
-                  >
-                    <OrgAvatar org={org} />
-                    <Text flex={1} fontSize="$2" color="$color12" numberOfLines={1}>
-                      {org.displayName || org.name}
-                    </Text>
-                    {org.name === currentId ? <Check size={15} /> : null}
-                  </XStack>
-                ))
-              )}
-
-              {loadingMore ? (
-                <XStack items="center" gap="$2" px="$2" py="$2">
-                  <Spinner size="small" color="$color11" />
-                  <Text fontSize="$1" color="$color10">
-                    Loading more…
-                  </Text>
-                </XStack>
-              ) : hasMore ? (
-                <XStack onPress={loadMore} cursor="pointer" items="center" justify="center" px="$2" py="$1.5" rounded="$3" hoverStyle={{ bg: '$color4' }}>
-                  <Text fontSize="$1" color="$color11" fontWeight="600">
-                    Load more
-                  </Text>
-                </XStack>
-              ) : null}
-            </div>
-
-            {create ? (
-              <XStack
-                onPress={() => {
-                  setCreating(true)
-                  setErr(null)
-                }}
-                cursor="pointer"
-                items="center"
-                gap="$2.5"
-                px="$2"
-                py="$2"
-                mt="$1"
-                rounded="$3"
-                borderTopWidth={1}
-                borderColor="$borderColor"
-                hoverStyle={{ bg: '$color5' }}
-              >
-                <YStack width={22} height={22} rounded="$3" bg="$color3" items="center" justify="center">
-                  <Plus size={14} />
-                </YStack>
-                <Text fontSize="$2" color="$color12">
-                  Create organization
-                </Text>
-              </XStack>
-            ) : null}
-
-            {picker ? (
-              <XStack
-                onPress={() => {
-                  setOpen(false)
-                  scope.leaveOrg()
-                }}
-                cursor="pointer"
-                items="center"
-                gap="$2.5"
-                px="$2"
-                py="$2"
-                rounded="$3"
-                hoverStyle={{ bg: '$color5' }}
-              >
-                <YStack width={22} height={22} rounded="$3" bg="$color3" items="center" justify="center">
-                  <LayoutGrid size={14} />
-                </YStack>
-                <Text fontSize="$2" color="$color12">
-                  All organizations
-                </Text>
-              </XStack>
-            ) : null}
-          </YStack>
-        )}
-      </Popover.Content>
-    </Popover>
-  )
-}

package/src/product/PageHeader.tsx

@@ -1,31 +0,0 @@
-'use client'
-
-import type { ReactNode } from 'react'
-import { Text, XStack, YStack } from '@hanzo/gui'
-
-/** Section title + optional subtitle and right-aligned actions. */
-export function PageHeader({
-  title,
-  subtitle,
-  actions,
-}: {
-  title: string
-  subtitle?: string
-  actions?: ReactNode
-}) {
-  return (
-    <XStack justify="space-between" items="flex-start" gap="$4">
-      <YStack gap="$1">
-        <Text fontSize="$7" fontWeight="800">
-          {title}
-        </Text>
-        {subtitle ? (
-          <Text fontSize="$3" color="$color11">
-            {subtitle}
-          </Text>
-        ) : null}
-      </YStack>
-      {actions ? <XStack gap="$2">{actions}</XStack> : null}
-    </XStack>
-  )
-}

package/src/product/PrimaryButton.tsx

@@ -1,17 +0,0 @@
-'use client'
-
-/**
- * Primary button — the one white, high-emphasis action for the console.
- *
- * Monochrome brand: `theme="light"` flips the button to the light theme inside
- * the dark console, giving a white fill with a near-black label and icon — no
- * hue accent. Use it for the single primary action in a view (sign in, save,
- * get started). Secondary and destructive actions use the default neutral
- * `Button`.
- */
-import type { ComponentProps } from 'react'
-import { Button } from '@hanzo/gui'
-
-export function PrimaryButton(props: ComponentProps<typeof Button>) {
-  return <Button theme="light" {...props} />
-}

package/src/product/ProductIcon.tsx

@@ -1,61 +0,0 @@
-'use client'
-
-/**
- * ProductIcon — the Linear-style product tile: a rounded-square block filled with
- * the product's accent color, with the product glyph knocked out in near-white so
- * it reads "cut out" of the color. This is the ONE way a product icon renders in
- * the console chrome (sidebar nav, command palette, product overview header) — a
- * bare tinted glyph is replaced everywhere by this tile.
- *
- * Prop-driven and pure: the accent hex is resolved by the caller (registry-curated
- * → per-user override → stable hash, via `useProductColors().colorOf`) and passed
- * in as `color`, so this component owns only the look, never the palette. With no
- * color it falls back to a tasteful neutral chip ($color12 fill + $color1 glyph) —
- * never a random hue — matching the first-party `ProviderLogo` mark, so first-party
- * marks and product tiles read as one family.
- *
- * The knock-out is the same technique the color-swatch button uses (a raw-hex
- * `backgroundColor` fill + a `#ffffff` glyph) so an arbitrary product accent tints
- * cleanly outside Gui's token palette, in the ONE sanctioned place.
- */
-import { XStack } from '@hanzo/gui'
-
-import { asColor, type IconLike } from './color'
-
-export function ProductIcon({
-  icon: Icon,
-  color,
-  size = 24,
-}: {
-  icon: IconLike
-  /** The product's resolved accent hex (e.g. `#5E6AD2`). Omit for the neutral chip. */
-  color?: string
-  size?: number
-}) {
-  const radius = Math.round(size * 0.28)
-  const glyph = Math.round(size * 0.58)
-  const tinted = typeof color === 'string' && color.trim() !== ''
-
-  // Accent tile — product color fill + near-white glyph (the Linear "cut out").
-  if (tinted) {
-    return (
-      <XStack
-        width={size}
-        height={size}
-        items="center"
-        justify="center"
-        rounded={radius}
-        style={{ backgroundColor: color }}
-      >
-        <Icon size={glyph} color={asColor('#ffffff')} />
-      </XStack>
-    )
-  }
-
-  // No accent — a tasteful neutral chip (consistent with ProviderLogo's mark).
-  return (
-    <XStack width={size} height={size} items="center" justify="center" rounded={radius} bg="$color12">
-      <Icon size={glyph} color="$color1" />
-    </XStack>
-  )
-}

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)
-  })
-})