@hanzo/ui 5.7.1 → 8.0.1

package/README.md

@@ -1,229 +1,61 @@
 # @hanzo/ui
 
-A comprehensive UI component library for Hanzo applications, built with React and TypeScript.
+The **one** Hanzo component library, built on [`@hanzo/gui`](https://github.com/hanzoai/gui) (Tamagui) so every component runs on **web, native (iOS), and desktop**. It unifies what used to be three fragmented homes — `@hanzo/data`, the console's in-app `components/ui/*`, and ad-hoc duplicates — into one canonical, presentational, host-agnostic, clean-room library.
 
-## Version 4.5.6
+> This is the gui-based line (**v8+**). The legacy shadcn/Radix `@hanzo/ui` (v5.x) is a different architecture; it is being retired to `@hanzo/ui-shadcn` so the `@hanzo/ui` name carries the unified gui-based library forward — see `CONSOLIDATION.md` at the repo root.
 
-## Installation
+## Install
 
-```bash
-npm install @hanzo/ui
-# or
-pnpm add @hanzo/ui
-# or
-yarn add @hanzo/ui
+```sh
+bun add @hanzo/ui @hanzo/gui @hanzo/data
 ```
 
-## Components
-
-### Primitives
-
-Core UI components based on Radix UI primitives:
-
-- **Accordion** - Collapsible content panels
-- **Alert** - Informative alert messages
-- **AlertDialog** - Modal dialogs for important alerts
-- **Avatar** - User avatar display
-- **Badge** - Status and label badges
-- **Breadcrumb** - Navigation breadcrumbs
-- **Button** - Interactive buttons with variants
-- **Calendar** - Date picker calendar
-- **Card** - Container cards for content
-- **Carousel** - Image/content carousel
-- **Checkbox** - Checkbox input
-- **Collapsible** - Collapsible content sections
-- **Combobox** - Searchable select dropdown
-- **Command** - Command palette component
-- **ContextMenu** - Right-click context menus
-- **Dialog** - Modal dialogs
-- **Drawer** - Slide-out drawer panels
-- **DropdownMenu** - Dropdown menu component
-- **Form** - Form components with validation
-- **HoverCard** - Hover-triggered info cards
-- **Input** - Text input field
-- **InputOTP** - One-time password input
-- **Label** - Form labels
-- **NavigationMenu** - Navigation menu bar
-- **Popover** - Popover overlays
-- **Progress** - Progress indicators
-- **RadioGroup** - Radio button groups
-- **ResizablePanel** - Resizable panel layouts
-- **ScrollArea** - Custom scrollable areas
-- **SearchInput** - Search input with icon
-- **Select** - Select dropdown
-- **Separator** - Visual separator line
-- **Sheet** - Side sheet panels
-- **Skeleton** - Loading skeleton screens
-- **Slider** - Range slider input
-- **Switch** - Toggle switch
-- **Table** - Data tables
-- **Tabs** - Tabbed interfaces
-- **TextArea** - Multi-line text input
-- **TextField** - Enhanced text input
-- **Toast** - Toast notifications (via Sonner)
-- **Toggle** - Toggle buttons
-- **ToggleGroup** - Grouped toggle buttons
-- **Tooltip** - Hover tooltips
-- **VideoPlayer** - Video playback component
-
-### Assets
-
-Icon components and visual assets:
-
-#### AI Provider Icons
-- **AnthropicIcon** - Anthropic AI logo
-- **OpenAIIcon** - OpenAI logo
-- **GeminiIcon** - Google Gemini logo
-- **DeepSeekIcon** - DeepSeek logo
-- **MistralIcon** - Mistral AI logo
-- **MetaIcon** - Meta AI logo
-- **GroqIcon** - Groq logo
-- **OllamaIcon** - Ollama logo
-- **HanzoIcon** - Hanzo AI logo
-- **TogetherAI** - Together AI logo
-- **ExoIcon** - Exo logo
-- **GrokIcon** - Grok logo
-- **LmStudioIcon** - LM Studio logo
-- **OpenRouterIcon** - OpenRouter logo
-- **PerplexityIcon** - Perplexity logo
-- **QwenIcon** - Qwen logo
-- **AyaCohereIcon** - Aya/Cohere logo
-
-#### Feature Icons
-- **AIAgentIcon** - AI agent indicator
-- **AisIcon** - AI services icon
-- **ReactJsIcon** - React.js logo
-- **ReasoningIcon** - AI reasoning indicator
-- **ToolsIcon** - Tools/utilities icon
-- **TracingIcon** - Tracing/monitoring icon
-- **ScheduledTasksIcon** - Scheduled tasks icon
-- **SendIcon** - Send/submit icon
-
-#### File Type Icons
-- **FileTypeIcon** - Dynamic file type icon based on extension
-- **DirectoryTypeIcon** - Folder/directory icon
-
-### Utilities
-
-Helper functions and hooks:
-
-- **cn()** - Class name utility (clsx + tailwind-merge)
-- **markdown()** - Markdown to JSX converter
-- **formatText()** - Text formatting utilities
-- **useDebounce()** - Debounce hook
-- **useMap()** - Map state management hook
-- **formatDateToLocaleStringWithTime()** - Date formatting
-- **getFileExt()** - File extension extraction
-- **hexToRgb()** - Color conversion utilities
-
-### Custom Components
-
-Additional enhanced components:
-
-- **ChatInput** - Chat message input
-- **ChatInputArea** - Multi-line chat input
-- **ChatSettingsIcon** - Chat settings icon
-- **CopyToClipboardIcon** - Copy to clipboard button
-- **DotsLoader** - Loading dots animation
-- **FileList** - File list display
-- **FileUploader** - File upload component
-- **JsonForm** - JSON-based dynamic forms
-- **MarkdownText** - Markdown renderer
-- **PrettyJsonPrint** - Formatted JSON display
-
-## Styling
-
-The library uses Tailwind CSS for styling. Make sure your application includes Tailwind CSS configuration.
-
-## Dependencies
-
-Key peer dependencies:
-- React 18.3.1+
-- React DOM 18.3.1+
-- @hookform/resolvers ^3.3.2
-- react-hook-form 7.51.4
-- lucide-react 0.456.0
-- next-themes ^0.2.1
-- embla-carousel ^8.1.6
-
-## Usage Examples
-
-### Basic Button
+`@hanzo/gui`, `@hanzo/data`, and `react` are peers.
+
+## Two orthogonal layers, one package
 
 ```tsx
-import { Button } from '@hanzo/ui';
-
-function App() {
-  return (
-    <Button variant="primary" onClick={() => console.log('clicked')}>
-      Click me
-    </Button>
-  );
-}
+// product / app layer — charts, metrics, headers, status, empty states, combobox…
+import { PageHeader, Sparkline, LineChart, EmptyState, StatusTag, ComboBox, tokens } from '@hanzo/ui'
+
+// metadata-driven record layer — RecordsView & the typed field editors (@hanzo/data)
+import { RecordsView, DataTable, BoardView, RecordDetail, registerField } from '@hanzo/ui/data'
 ```
 
-### Alert Dialog
+- **`@hanzo/ui`** — the product/app component layer:
+  - **Charts** (dependency-free inline SVG): `Sparkline`, `LineChart`, `BarChart`, `Donut`, `BarRows` — hover tooltips, axis ticks, honest `null` under two real points.
+  - **Metric** tiles/panels: `MetricCard`, `MiniBars`, `UtilBar`, `LegendDot`, `Panel`, `HintButton` (+ `MetricSparkline`).
+  - **Chrome**: `PageHeader`, `StatusTag`, `EmptyState` (DO/Vercel-class first-run), `PrimaryButton`, `HanzoMark`, `ProductIcon`, `ProviderLogo`.
+  - **Interaction**: `ComboBox` (typeable, ReDoS-safe filter), `SelectMenu`, `SlideOver` (a11y drawer), `Toast` (`useToast`), `Reorder` (pointer DnD), `Field*` rows, `FadeIn`, `ThemeToggle`, generic `DataTable<T>`.
+  - **Tokens**: `tokens`, `TAG_TONES`, `tagTone` — the calm, dark-first, zinc-on-black identity.
+- **`@hanzo/ui/data`** — the metadata-driven record layer (source of truth: `@hanzo/data`): `RecordsView` (table ⇆ board, filter/sort/search/group, inline edit, saved views), the record-grid `DataTable`, `BoardView`, `RecordDetail`/`RecordForm`, every typed field editor, the field registry, and the pure view/sort/filter logic.
 
-```tsx
-import {
-  AlertDialog,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogAction,
-  AlertDialogCancel
-} from '@hanzo/ui';
-
-function ConfirmDialog() {
-  return (
-    <AlertDialog>
-      <AlertDialogTrigger>
-        <Button>Open Dialog</Button>
-      </AlertDialogTrigger>
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>Are you sure?</AlertDialogTitle>
-          <AlertDialogDescription>
-            This action cannot be undone.
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel>Cancel</AlertDialogCancel>
-          <AlertDialogAction>Continue</AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  );
-}
-```
+Both layers are **presentational + data-injected**: the host supplies rows and persistence callbacks; the components own only interaction state. Nothing imports an app's `~/lib`.
 
-### AI Provider Icons
+> Each layer owns a `DataTable` — the product one is a generic typed `<T>` list; the data one is the field-driven record grid. Keeping the record layer on the `./data` subpath keeps each name unambiguous.
 
-```tsx
-import { OpenAIIcon, AnthropicIcon, GeminiIcon } from '@hanzo/ui/assets';
-
-function AIProviders() {
-  return (
-    <div className="flex gap-4">
-      <OpenAIIcon className="h-6 w-6" />
-      <AnthropicIcon className="h-6 w-6" />
-      <GeminiIcon className="h-6 w-6" />
-    </div>
-  );
-}
+## Motion
+
+The calm motion vocabulary (`FadeIn`, drawer/backdrop transitions, skeleton shimmer, live pulse) ships as one stylesheet. Import it once at the app root:
+
+```ts
+import '@hanzo/ui/styles/motion.css'
 ```
 
-## License
+Every animation honors `prefers-reduced-motion`.
 
-BSD-3-Clause
+## Extend the record layer
 
-## Author
+```tsx
+import { registerField } from '@hanzo/ui/data'
+registerField('rating', { Display: MyStars, Input: MyStarPicker })
+```
 
-Hanzo AI, Inc.
+## Design principles
 
-## Repository
+- **One home, no duplication** — components are extracted, never copied. The record layer's source of truth stays in `@hanzo/data`; `@hanzo/ui` composes it.
+- **Host-agnostic** — data + effects injected; zero coupling to any app.
+- **Clean-room** — original implementation, no GPL / Twenty code. Airtable/Twenty-*class* polish, our own code.
+- **Cross-platform** — web + native + desktop, because it's only `@hanzo/gui`.
 
-https://github.com/hanzoai/react-sdk
+BSD-3-Clause · Hanzo AI