@daihum/ui

Production web UI components shared by DAIHUM applications.

This is the shared app UI package for Carrel, Ontal, and other DAIHUM-level products. It is distinct from @daihum/exhibit, which remains exhibition/site-oriented UI. Reusable app controls and their required dependency primitives should be promoted here when they are product-neutral.

The package uses the same baseline expected by Carrel and Ontal shared UI work:

• React
• shadcn component primitives generated by the shadcn CLI
• Tailwind CSS
• Storybook
• typed, built package exports

The first cross-product AI component is DaihumModelPicker, a provider-scoped model picker extracted from Ontal's mature picker UX and made product-neutral for Carrel and Ontal. The second composed shared surface is DataTableVNext, with React web rendering in this package and platform-independent query execution in @daihum/ui-core.

The platform-independent contracts, builders, and formatters (model-picker, data-table-vnext, plus the headless dock-layout / panel-region / work-area / desktop-canvas / settings-registry / surface-registry / workspace-file / action-menu modules) live in @daihum/ui-core. That package is an internal substrate: this web package re-exports every consumer-facing piece through a @daihum/ui/* subpath, so external consumers (Carrel, Ontal, and their facades) import only @daihum/ui/* and never name @daihum/ui-core. The React-free logic stays in @daihum/ui-core as an implementation detail shared by the web layer and daihum-internal non-DOM code.

Picker-mode UI dependencies such as command search, popover positioning, toggle groups, badges, buttons, cards, inputs, labels, selects, switches, icons, and class merging live behind DAIHUM-owned exports in this package. Downstream products should consume @daihum/ui/model-picker and only pass product data, settings handlers, and class overrides.

The package is style-system compatible rather than product-skinned: components expose className and data-slot hooks, use Tailwind/shadcn-style token classes, and leave product shell, settings persistence, gateway/account policy, and workflow copy to downstream applications.

Layering

The source tree is intentionally layered:

• src/entrypoints/*: public package shims for stable @daihum/ui/* subpaths.
• src/primitives/shadcn/ui/*: generated shadcn/Radix primitives.
• src/primitives/lib/* and src/primitives/hooks/*: primitive utilities and hooks used by shadcn output.
• src/composed/*: DAIHUM-level composed app components such as model picker, shell, tree, file tree, and matrix UI.
• src/composed/data-table-vnext/*: web data-table rendering and worker client code backed by @daihum/ui-core.
• src/platform/*: browser/platform helpers shared by app UI.
• src/icons/* and src/styles/*: shared icon exports and Tailwind/shadcn CSS.

Update shadcn primitives with the shadcn CLI, then run npm run shadcn:normalize so package-local aliases become relative imports that are safe to emit from a shared package. The boundary guard fails if old flat folders such as src/components/ui, src/model-picker, src/shell, or src/tree reappear.

Public DAIHUM entrypoints such as @daihum/ui/button and @daihum/ui/model-picker are the stable package API. Primitive subpaths re-export the generated layer; composed components such as DaihumModelPicker build on top of those primitives. Downstream applications should not import from src/* internals directly.

@daihum/ui/style.css provides Tailwind/shadcn token plumbing and an opt-in .daihum-ui-theme default token set. Products may use that class directly or provide their own token values.

Public Surfaces

Import focused subpaths instead of depending on root re-export shape when a consumer only needs one primitive family:

• @daihum/ui/model-picker
• @daihum/ui/model-picker/builders
• @daihum/ui/model-picker/contracts
• @daihum/ui/model-picker/formatters
• @daihum/ui/data-table-vnext
• @daihum/ui/data-table-vnext/backend
• @daihum/ui/data-table-vnext/contracts
• @daihum/ui/dock-layout
• @daihum/ui/panel-region
• @daihum/ui/work-area
• @daihum/ui/desktop-canvas
• @daihum/ui/settings-registry
• @daihum/ui/surface-registry
• @daihum/ui/workspace-file
• @daihum/ui/action-menu
• @daihum/ui/icons
• @daihum/ui/shell
• @daihum/ui/browser-fs
• @daihum/ui/tree
• @daihum/ui/file-tree
• @daihum/ui/action
• @daihum/ui/badge
• @daihum/ui/button
• @daihum/ui/card
• @daihum/ui/command
• @daihum/ui/dialog
• @daihum/ui/input
• @daihum/ui/label
• @daihum/ui/popover
• @daihum/ui/select
• @daihum/ui/switch
• @daihum/ui/toggle
• @daihum/ui/toggle-group
• @daihum/ui/utils
• @daihum/ui/matrix-camera
• @daihum/ui/matrix-card
• @daihum/ui/matrix-mini-map
• @daihum/ui/matrix-stack-viewport
• @daihum/ui/matrix-utils
• @daihum/ui/matrix-viewport
• @daihum/ui/matrix-viewport-baseline

Use @daihum/ui/style.css once at the app boundary when these components need their shared Tailwind layer.

Boundary Proof

Run pnpm --filter @daihum/ui build after changing generated primitives, public wrappers, or styles. The build fails if shadcn @/..., temporary @ui/*, or #ui/* aliases leak into source or dist.

Run npm run proof:ui-boundaries from the DAIHUM repo root after changing shared UI exports or picker-mode dependencies. The proof bundles focused package subpaths and fails if model-picker imports accidentally pull exhibition UI, shell/tree/matrix families, or other unrelated component graphs. It also compiles and runs a temporary no-DOM consumer for @daihum/ui-core/model-picker/contracts, @daihum/ui-core/model-picker/builders, and @daihum/ui-core/model-picker/formatters, while keeping the current @daihum/ui/model-picker/* re-export subpaths proven. Native/TUI-oriented catalog code should not accidentally depend on React DOM, Radix, Tailwind CSS, or browser globals. The same boundary proof covers @daihum/ui/data-table-vnext, ensuring the rendered web table pulls the intended table/button/utils/core graph without dragging picker, tree, file-tree, matrix, shell, or browser-fs surfaces.

Run npm run proof:ui-downstream-imports when changing @daihum/ui package exports or model-picker types. That proof creates temporary Carrel and Ontal consumer projects, compiles them with each downstream package manager, and runs the model-picker helper path, the promoted picker primitive subpaths (badge, button, card, command, input, label, popover, select, switch, toggle, toggle-group, icons, and utils), data-table-vnext, and the headless contract re-exports (dock-layout, panel-region, work-area, desktop-canvas, settings-registry, surface-registry, workspace-file, action-menu) — all imported through @daihum/ui/*, never @daihum/ui-core. It then git greps the real Carrel and Ontal repos and fails if any tracked source imports @daihum/ui-core directly (the no-core-leak boundary guard).

Within daihum, non-React internal code (workers, AI catalog/projection) may import @daihum/ui-core/* helpers directly. External product consumers must not — every @daihum/ui-core capability has a matching @daihum/ui/* re-export, so consumers never name @daihum/ui-core. Use @daihum/ui/model-picker (and its /builders /contracts /formatters subpaths; the root subpath also exports the React view) for picker construction, and @daihum/ui/data-table-vnext (with /backend and /contracts for pure query execution, the root subpath for the composed React table) for tables.

Linked local consumers that render DAIHUM React/Radix components must keep one React runtime authority. For Vite apps, dedupe react, react-dom, react/jsx-runtime, react/jsx-dev-runtime, and scheduler. For Vitest/jsdom tests against linked package source, also inline and client-optimize the DAIHUM UI/Radix picker stack so React peer imports are resolved through the app graph instead of the linked package's physical node_modules.