@ai-matrx/design-system 0.6.0 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,114 @@
 # Changelog
 
+## 0.7.0 — 2026-09-07
+
+**GROWTH WAVE 2 (C18).** Wave 1 (0.5.0) deleted 34 forked primitives but had
+to KEEP every primitive this package did not ship. A fresh import-site census
+of matrx-frontend `components/ui/` ranked what was left; this release ships all
+of it, so those forks die too.
+
+Ten new primitive families, ordered by the host fan-out they close:
+`Tooltip` (182 sites), `Drawer` (121), `AlertDialog` (78), `Alert` (76),
+`Slider` (46), `Resizable` (38), `RadioGroup` (30), `HoverCard` (16),
+`ToggleGroup` + `Toggle` (10). Each was built from EVERY host variant, not from
+one repo's copy.
+
+### The tooltip collapse
+
+`@ai-matrx/tap-target` shipped a Tooltip family that four repos adopted — and
+its own file header said what it was: an inlined PORT of matrx-frontend's
+`components/ui/tooltip.tsx`. So the fleet ran TWO copies, and a
+button-geometry package was the accidental owner of a design-system surface.
+A tooltip is a design-system surface: it lives here now. `tap-target@0.2.0`
+takes this package as an ordinary sibling dependency, imports the Tooltip from
+it, deletes its own copy, and **re-exports nothing** — one implementation, one
+import path. The sibling DAG already ordered design-system before tap-target,
+so no cycle is introduced.
+
+The port also restores the seam tap-target's copy had dropped: tooltips resolve
+their portal target through `PortalContainerProvider`, so a tooltip inside a
+popped-out panel lands in the right document instead of always `document.body`.
+
+### Real defects fixed in the port (never "preserved")
+
+- **`AlertDialogContent` was not clamped to the viewport.** A confirm dialog
+  listing what is about to be deleted pushed Cancel/Continue below the fold on
+  a short viewport — and Radix does NOT dismiss an ALERT dialog on backdrop
+  click, so the surface was a genuine dead end. It is now
+  `max-h-[85dvh] overflow-y-auto` with a sticky, edge-bleeding footer, matching
+  `Dialog`.
+- **`Slider` rendered exactly one thumb.** The host copy hardcoded a single
+  `Thumb`, so any two-value range silently lost its upper handle. One thumb is
+  now rendered per value.
+- **`HoverCard` rendered inline instead of portalling**, so a card inside an
+  `overflow-hidden` ancestor was clipped and one inside a popped-out panel could
+  not exist. It now portals through the same seam — which is why its layer moved
+  from `z-50` to `z-[10001]`: at the body it would otherwise sit UNDER a modal.
+- **`ResizableHandle` always said `cursor: col-resize`**, inline, including on
+  the horizontal separator of a vertical group, which wants `row-resize`. The
+  cursor is now orientation-aware.
+- **Every touch target under 44px** on `Slider`, `RadioGroup`, `ResizableHandle`
+  and the `Drawer` grab handle. The visible control keeps its size; an invisible
+  pseudo-target expands the hit area on coarse pointers only, so desktop density
+  is untouched.
+
+### Density is a prop, not a fork (C18), on four more primitives
+
+`Slider size`, `RadioGroup size` (declared on the root, inherited by items),
+`Toggle`/`ToggleGroup size`, `ResizableHandle size`. That last one collapses
+TWO host files: matrx-frontend shipped `components/ui/resizable.tsx` AND
+`components/ui/matrx/resizable.tsx`, whose only difference was an eight-step
+handle-thickness scale.
+
+### The Drawer owns the mobile-first rules
+
+matrx-frontend's doctrine is "Drawer, not Dialog, on mobile", so the Drawer is
+where most of the platform's mobile UX lands. It now owns those rules so no
+host re-derives them: `dvh` never `vh`; `pb-safe` / `pt-safe` safe-area padding
+(`pt-safe` is new in `styles.css`); a 44px grab-handle target around the 4px
+pill; `DrawerBody` as the `flex-1 min-h-0` scroll shard with a `mt-auto` footer;
+and `direction` as a prop, so a side or top drawer is not a fork.
+
+It also closes the last CONTEXT twin: `RadixDialogModalProvider` still had a
+host copy at `components/ui/radix-dialog-modal-context.tsx`, and a host copy of
+a React context is the quiet twin — `useContext` matches by object identity, so
+the host Drawer's provider and this package's Sheet consumer were two different
+contexts that merely looked alike. `BottomSheet` now composes `Drawer` too, so
+there is ONE vaul wrapper in the package instead of two.
+
+### Alert ships the whole status vocabulary
+
+`default | destructive | warning | success | info`, all token-driven. The host
+copy had only two variants, which is why the census found dozens of hand-rolled
+amber/emerald banners with literal palette classes across four repos.
+
+### Consumer action (C28)
+
+Install `@ai-matrx/design-system@0.7.0` (and `@ai-matrx/tap-target@0.2.0`), then:
+
+1. **Tooltip imports move.** Anything importing `Tooltip`, `TooltipTrigger`,
+   `TooltipContent` or `TooltipProvider` from `@ai-matrx/tap-target` must import
+   them from `@ai-matrx/design-system` instead — tap-target no longer exports
+   them. Affected today: aidream `apps/dashboard` (10 files), aidream
+   `apps/workflow-studio` (18 files), matrx-extend (1), matrx-frontend (1).
+2. **Delete these host forks** and re-point or shim their imports:
+   - matrx-frontend `components/ui/tooltip.tsx`, `drawer.tsx`,
+     `alert-dialog.tsx`, `alert.tsx`, `slider.tsx`, `resizable.tsx`,
+     `matrx/resizable.tsx`, `radio-group.tsx`, `hover-card.tsx`,
+     `toggle-group.tsx`, `toggle.tsx`, `radix-dialog-modal-context.tsx`.
+   - No other consumer repo carries a fork of these — verified by census on
+     2026-09-07 across matrx-extend, matrx-games, aidream `apps/dashboard` and
+     `apps/workflow-studio`.
+3. **`matrx/resizable.tsx` callers keep their `size` prop** — it is the same
+   eight-step scale, now on the one component. Callers of the plain
+   `resizable.tsx` get the identical 2px default (`size="sm"`).
+4. **Check any `z-50` assumption around HoverCard**; it now portals to the body
+   at `z-[10001]`.
+5. **`react-resizable-panels` v4 overwrites `data-testid`** with its own
+   generated id. Tests that query a handle by test id must query
+   `role="separator"` instead.
+6. Register the new names in each repo's `package-twins.json`.
+
 ## 0.6.0 — 2026-09-07
 
 **THE BUTTON SCALE.** matrx-frontend carried a 127-line CVA button fork

package/README.md

@@ -2,13 +2,17 @@
 
 The small, semantic UI foundation shared by AI Matrx React applications — primitives whose behavior and variants are identical across Vite and Next.js hosts.
 
-**Controls:** Button, Badge, Label, Separator, the Input family, the Textarea family, Checkbox, Switch, Avatar, Progress.
-**Surfaces:** Card, Table, Tabs, Collapsible, ScrollArea, Popover, Sheet, Dialog, BottomSheet + TabbedBottomSheet, Skeleton.
+**Controls:** Button, Badge, Label, Separator, the Input family, the Textarea family, Checkbox, Switch, RadioGroup, Slider, Toggle + ToggleGroup, Avatar, Progress.
+**Surfaces:** Card, Table, Tabs, Collapsible, ScrollArea, Popover, Tooltip, HoverCard, Sheet, Dialog, AlertDialog, Drawer, BottomSheet + TabbedBottomSheet, Alert, Resizable, Skeleton.
 **Menus:** DropdownMenu, ContextMenu, Command / CommandDialog, Select, CreatablePicker.
 **Composed:** EditableLabel, SegmentedControl, ScoreRing, OverflowToolbar.
-**Hooks + utilities:** `useScrollFade`, `useIsMobile`, `usePortalContainer`, `useDialogContainer`, `cn`.
+**Hooks + utilities:** `useScrollFade`, `useIsMobile`, `usePortalContainer`, `useDialogContainer`, `useDrawerDirection`, `cn`.
 
-Where hosts had forked a primitive over DENSITY, density is a prop, not a fork: `Card size="sm|md|lg"`, `Table size="sm|md"`, `Switch`/`Avatar`/`Checkbox` `size`. It is declared once on the root and every section reads it from context, so a card cannot mix paddings.
+**The Tooltip lives here, and only here.** `@ai-matrx/tap-target` used to ship its own copy; since design-system 0.7.0 / tap-target 0.2.0 it consumes this one and re-exports nothing.
+
+Where hosts had forked a primitive over DENSITY, density is a prop, not a fork: `Card size="sm|md|lg"`, `Table size="sm|md"`, `Switch`/`Avatar`/`Checkbox`/`Slider`/`RadioGroup`/`Toggle` `size`, `ResizableHandle size="xs".."4xl"`. It is declared once on the root and every item reads it from context, so a card cannot mix paddings and a radio group cannot mix control sizes.
+
+**Mobile is the Drawer's job.** `Drawer` owns the iOS rules every host was re-deriving — `dvh` never `vh`, `pb-safe`/`pt-safe` safe-area padding, a 44px grab-handle target, `DrawerBody` as the `flex-1 min-h-0` scroll shard — and `direction` makes a top/side drawer a prop rather than a fork. Every touch control (`Slider`, `RadioGroup`, `ResizableHandle`) carries an invisible 44px target on coarse pointers, with desktop density untouched.
 
 ```bash
 pnpm add @ai-matrx/design-system