@datatechsolutions/ui 2.11.91 → 2.11.92

package/README.md

@@ -1,6 +1,8 @@
 # @datatechsolutions/ui
 
-React component library for the Datatech Solutions platform. 130+ components spanning core UI, forms, data display, gestures, geo maps, notifications, and marketing layouts. Includes Brazil and US regional themes.
+React component library for the Datatech Solutions platform. Spans generic primitives (forms, modals, data display, gestures, geo maps), platform shells (auth, billing, admin, settings), and the workflow canvas. Consumed by every Vite SPA frontend in the monorepo.
+
+> Read the canonical version from `package.json`.
 
 ## Install
 
@@ -8,7 +10,7 @@ React component library for the Datatech Solutions platform. 130+ components spa
 npm install @datatechsolutions/ui
 ```
 
-**Published as source TypeScript** — no build step. Your bundler (Next.js, Vite, etc.) compiles it directly.
+The package ships a built artifact (`dist/`) generated by `tsup`. Consumers import from the public subpaths declared in `package.json` `exports` — never from internals.
 
 ## Design Principles
 
@@ -16,64 +18,81 @@ npm install @datatechsolutions/ui
 - **Accessible** — Built on Radix UI and Headless UI primitives
 - **Motion-rich** — Framer Motion animations with reduced-motion support
 - **Theme-aware** — Regional subdivision themes (Brazil states, US states) with palettes, flag URLs, and geo coordinates
-- **i18n-ready** — Integrates with next-intl for localized labels
-
-## Component Categories
-
-| Category | Examples | Count |
-|----------|---------|-------|
-| Core | Button, Card, Input, Select, MetricCard | ~15 |
-| Layout | HeroSection, Container, PageHeading, SafeArea, Dock | ~10 |
-| Navigation | Pagination, Breadcrumb, NavigationProgress, LanguageSwitcher | ~5 |
-| Forms | FormField, FormInput, FormSelect, FormToggle, FormCheckbox, BaseForm, StepFormPage, DatePicker, TimePicker | ~20 |
-| Data Display | Table suite (12 variants), EntityCard, EntityDrawer, ListItem, CollapsibleRegionList | ~15 |
-| Feedback | Spinner, StatusBadge, Badge, GrowthIndicator, ProcessStatusBadge, NotificationBadge | ~10 |
-| Pickers | StationPicker, ChipPicker, SubdivisionPicker, BrandPicker, WheelPicker, MonthPicker | ~7 |
-| Filters | FilterTileButton, FilterPill, SegmentedControl, CategoryTab/Tabs, SearchFilterToolbar | ~8 |
-| Gestures | SwipeableRow (+ action presets), PullToRefreshContainer, EdgeSwipeIndicator | ~5 |
-| States | EmptyState, ErrorState, OfflineState, NoResultsState, PageEmptyState, PageLoadingState | ~7 |
-| Notifications | DynamicIsland, NotificationProvider, NotificationBellButton, NotificationHistoryDrawer | ~5 |
-| Skeletons | CardGridSkeleton, StatCardSkeleton, RegionFilterSkeleton, AnalysisSkeleton, DockSkeleton | ~8 |
-| Radiant (Marketing) | RadiantHeading, BentoCard, PlusGrid, RadiantStatCard, FeatureCard, AnimatedNumber | ~12 |
-| Geo Maps | InteractiveGeoMap, GeoMapCanvas, MapZoomControls, GeoMapLegend | ~5 |
-| Misc | Avatar, CookieConsent, DevModeBanner, Divider, Dropdown, ForceTouchMenu, ThemeToggle | ~15 |
+- **Vite-only** — Every consumer is a Vite SPA. There is no Next.js / SSR support.
+
+## Subpath Exports
+
+Top-level subpaths in `package.json` `exports` (each may have its own sub-subpaths — see `package.json` for the full list):
+
+| Subpath | Contents |
+|---|---|
+| `@datatechsolutions/ui` | Components root (forms, modals, primitives, data display, geo maps, marketing layouts) |
+| `@datatechsolutions/ui/platform` | Platform shells consumed by every product app |
+| `@datatechsolutions/ui/platform/auth` | Sign-in, MFA, profile, route guards (windsock-integrated) |
+| `@datatechsolutions/ui/platform/billing` | Plan picker, billing portal redirect, subscription gates |
+| `@datatechsolutions/ui/platform/admin` | Org admin: members, invites, roles |
+| `@datatechsolutions/ui/platform/settings` | User & org settings shells |
+| `@datatechsolutions/ui/platform/impersonation` | Impersonation banner + admin take-over flow |
+| `@datatechsolutions/ui/platform/pages` | Standard page views (dashboard, workflow list, runs, agents, datasources, rules) |
+| `@datatechsolutions/ui/platform/agents-workspace` | Agent + tool + rule editors |
+| `@datatechsolutions/ui/platform/app-shell` | Top-level shell, dock, breadcrumb, theme |
+| `@datatechsolutions/ui/platform/rbac` | Permission/role hooks bound to windsock JWT claims |
+| `@datatechsolutions/ui/platform/windsock-admin-client` | Typed client for windsock admin APIs |
+| `@datatechsolutions/ui/platform/workflow-api-client` | Typed client for the workflow runtime API |
+| `@datatechsolutions/ui/platform/workflow-canvas-shell` | Embeddable workflow canvas wrapper |
+| `@datatechsolutions/ui/astrlabe` | Workflow canvas internals |
+| `@datatechsolutions/ui/astrlabe/workflow-canvas` | Live editor canvas |
+| `@datatechsolutions/ui/astrlabe/workflow-preview-canvas` | Read-only preview |
+| `@datatechsolutions/ui/astrlabe/graph-node` | Node renderer + handles |
+| `@datatechsolutions/ui/astrlabe/contracts` | DTOs shared with the Rust engine over HTTP |
+| `@datatechsolutions/ui/brand` | Theme tokens, brand assets |
+| `@datatechsolutions/ui/i18n` | i18n integration helpers |
+| `@datatechsolutions/ui/router` | Router adapter (React Router) |
+| `@datatechsolutions/ui/styles` / `./styles/*` | Liquid glass stylesheet |
 
 ## Themes
 
-### Brazil
-`src/lib/themes/brazil.ts` — State palettes, accent maps, coordinates, macro regions, flag URL helpers.
-
-### US
-`src/lib/themes/us.ts` — State palettes, accent maps, coordinates, macro regions, flag URL helpers.
-
-### Custom
-`registerSubdivisionTheme()` to add your own regional theme with palettes, flags, and geo data.
+- **Brazil** (`src/lib/themes/brazil.ts`) — state palettes, coordinates, macro regions, flag URLs
+- **US** (`src/lib/themes/us.ts`) — same shape
+- Custom themes via `registerSubdivisionTheme()`
 
 ## Hooks
 
 | Hook | Purpose |
-|------|---------|
+|---|---|
 | `useHaptic` / `triggerHaptic` | Haptic feedback for touch interactions |
 | `usePullToRefresh` | Pull-to-refresh interaction pattern |
-| `useGeoMapState` | State management for interactive geo maps |
+| `useGeoMapState` | State for interactive geo maps |
 | `useNotifications` | Notification system state and actions |
 
 ## Styles
 
-Import the liquid glass stylesheet:
-
-```typescript
+```ts
 import '@datatechsolutions/ui/styles'
 ```
 
 ## Peer Dependencies
 
-@headlessui/react, @heroicons/react, @radix-ui/react-dialog, @radix-ui/react-popover, clsx, date-fns, framer-motion, lucide-react, next, next-intl, react, react-dom, react-transition-progress, d3-geo, zod.
+The canonical list is `package.json` `peerDependencies`. Currently:
+
+- `@datatechsolutions/shared-domain`
+- `@datatechsolutions/windsock`
+- `@headlessui/react` >= 2
+- `@heroicons/react` >= 2
+- `@radix-ui/react-dialog`, `@radix-ui/react-popover`
+- `@xyflow/react` >= 12 (workflow canvas)
+- `clsx`, `d3-geo`, `date-fns`, `framer-motion`, `lucide-react`
+- `react` >= 18, `react-dom` >= 18, `react-router` >= 7, `react-transition-progress`
+- `zod` >= 3, `zustand` >= 5
+
+> No `next` or `next-intl` — consumers must use Vite + React Router.
 
 ## Scripts
 
 | Script | Command | Description |
-|--------|---------|-------------|
+|---|---|---|
 | `test` | `vitest run` | Run component tests |
 | `test:watch` | `vitest` | Watch mode |
-| `lint` | `tsc --noEmit` | Type check (no build step) |
+| `lint` | `tsc --noEmit` | Type check |
+| `build` | `tsup` | Build `dist/` |
+| `verify:publish` | `build && lint && test` | Pre-publish gate |