@ai-matrx/design-system 0.5.2 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,152 @@
 # 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
+(`components/ui/ButtonMine.tsx`, 17 call sites) alongside the package `Button`.
+It existed for one reason: the package scale stopped at `sm`/`lg`, so a dense
+toolbar had nowhere to go. Per C22 the gap moves into the package rather than
+being papered over in a host shim, and the fork is deleted in the same session.
+
+- **`Button` gains six size rungs** — `xs`, `md`, `xl`, `2xl`, `3xl`, and
+  `roundIcon` (a circular icon box) — completing one scale from `xs` to `3xl`
+  beside the existing `icon` / `icon-sm`. `md` is a deliberate alias of
+  `default`; the fork's middle rung was spelled that way at its call sites.
+- **`Button` gains two variants** — `primary` (an explicit spelling of
+  `default`, identical by construction, because ~17 sites say it) and
+  `success`, the affirmative twin of `destructive`, painted from the
+  `--success` / `--success-foreground` token pair the theme already shipped.
+- **`src/button.test.tsx` makes the scale a contract**: every rung resolves,
+  every rung is distinct (except the declared `md` alias), heights ascend, and
+  NO variant reaches a raw palette colour. Proven failing-then-passing by
+  deleting the `xs` rung. A missing rung is how the fork came back the first
+  time.
+
+Two names the fork spelled differently now resolve to the package's geometry,
+and the ~17 adopted sites move with them: `sm` is `h-8` (the fork's was `h-7`)
+and `icon` is `h-9 w-9` (the fork's was `h-10 w-10`). This is the convergence,
+not a regression — the fork also painted hardcoded `blue-600`/`gray-700`
+palettes, so those sites now follow the host's own tokens in light and dark.
+
+Not carried: the fork's `m` / `l` legacy size aliases (no call site used
+either) and its runtime `isValidOption` variant/size validation, which guarded
+against values TypeScript already refuses.
+
+### Consumer action (C28)
+
+None required — every existing `variant`/`size` value keeps its meaning. If
+your repo has its own button fork with extra sizes, it can now be deleted:
+adopt `@ai-matrx/design-system`'s `Button` and re-point the call sites.
+
 ## 0.5.2 — 2026-09-07
 
 Two real source corrections, found by adopting 0.5.0 in the first two consumers
@@ -121,7 +268,7 @@ copy of something this version now ships:
 - **matrx-frontend** — `components/ui/{avatar,card,checkbox,collapsible,dialog,dropdown-menu,progress,scroll-area,switch,table,tabs,textarea}.tsx`
   and `components/ui/context-menu/context-menu.tsx`. High-fanout files become
   re-export shims that bind this repo's historical variant (`Card size="sm"`,
-  `Switch size="sm"`, `Table size="sm"`), matching what the 08-30 swap
+  `Switch size="sm"`, `Checkbox size="sm"`, `Table size="sm"`), matching what the 08-30 swap
   established for `button` / `badge` / `label` / `separator`. The
   clipboard/motion variants (`CopyInput`, `FancyInput`, `DeleteInput`,
   `CopyTextarea`, `FancyTextarea`) stay host-owned under the C8 split-out law.

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