@ai-matrx/design-system 0.10.1 → 0.11.0

package/CHANGELOG.md

@@ -1,82 +1,72 @@
 # Changelog
 
-## 0.10.1 — 2026-09-07
-
-**THE CENTRED DIALOG FLEW IN FROM OFF THE SCREEN.** 0.10.0 shipped a live
-regression: `Dialog`, `AlertDialog` and `CommandDialog` entered from beyond the
-top-left corner of the viewport and SNAPPED into place at the end of their
-200ms animation. Independent review caught it on the live surface, measured it,
-and proved the cause rather than inferring it.
-
-**The cause is that one Tailwind class means two different things.**
-
-| | `translate-x-[-50%] translate-y-[-50%]` compiles to |
-|---|---|
-| Tailwind **v3** | `transform: translate(-50%, -50%)` — REPLACED by an animation of `transform` |
-| Tailwind **v4** | `translate: -50% -50%` — an independent property that **composes with** `transform` |
-
-0.10.0's keyframes restated the centring inside `transform`
-(`translate(-50%,-48%)` -> `translate(-50%,-50%)`), which is correct under v3
-and doubles the centring under v4. Measured on the live element, viewport
-2560x1289, `getComputedStyle(el).translate === "-50% -50%"` while
-`transform === "none"` at rest:
-
-| | x | y |
-|---|---|---|
-| resting (correct) | 128 | 32 |
-| `currentTime = 0` | **-966** | **-525** |
-| `currentTime = 100` | **-1015** | **-571** |
-| `currentTime = 199`, `el.style.translate = "none"` | 137 | 41 |
-
-That last row is the proof: removing the `translate` property mid-animation
-restores the resting position exactly, because the element was wearing the
-centring twice.
-
-**The fix is not a different spelling of the keyframes** — there isn't one that
-works in both hosts. Restate the offset and v4 applies it twice; omit it and v3
-drops it for the animation's duration and snaps at the end. So the offset stops
-being a Tailwind utility at all. This package now owns it, in the `translate`
-property, in its own stylesheet:
-
-- `.matrx-dialog-centered` (`translate: -50% -50%`) carries the centring, and
-  the keyframes carry ONLY the delta — `opacity`, plus a 2% rise scaled up from
-  95% in `transform`, ending on `transform: none`. Resting geometry is
-  byte-identical to 0.10.0's; `transform` and `translate` never restate each
-  other again, in any host.
-- **Census — the same hazard, one more surface.** `Select` in `popper` position
-  held its 4px gap from the trigger with `data-[side=bottom]:translate-y-1` and
-  three siblings, while `matrx-popper-*` keyframes animate `transform`. Same
-  defect, 4px instead of half a viewport, failing the other way round (a v3
-  host ate the gap for the animation and snapped it back). It is now
-  `.matrx-popper-offset`, sized by the new `--matrx-popper-offset` token.
-- `Sheet`, the mobile bottom sheet and every other popper were **not** affected
-  and are unchanged — their translate utilities are zero-valued or absent.
-
-**The guard, proven failing-then-passing.** jsdom cannot measure a composite
-transform, so the hazard is asserted as a RULE over the sources in
-`motion.test.tsx`: *no component may pair a NON-ZERO Tailwind translate utility
-with a package motion class*, plus the centred keyframes may not mention `-50%`
-and must end on `transform: none`, plus each of the three surfaces must render
-the package's centring class. Restoring 0.10.0's exact shape (the utility in
-`DIALOG_DESKTOP_CLASSES` and the centring back in the keyframes) turns 4 of
-these red; the fix turns them green. `motion.test.tsx`'s old assertion that
-`translate-x-[-50%]` survives `animated={false}` PINNED the defect — it now
-asserts the centring class survives and the utility is gone. The C26 canaries
-grew too: both new rules are required in `styles.test.ts` and in the packed
-tarball.
+## 0.11.0 — 2026-09-07
+
+**THE CONFIRM SURFACE MOVES IN.** `ConfirmDialog` and `ConfirmDialogHost` — the
+platform's `window.confirm` replacement — now live here. They came from
+`@ai-matrx/kit`, which is releasing 0.9.0 to delete its copy. Census row 19i,
+decided on the row-20a Tooltip precedent: **one surface, one owner.**
+
+**Why it had to move.** kit's confirm shipped a second, inlined AlertDialog with
+its own hand-copied button class strings, a hardcoded `bg-black/80` scrim, and
+the exact `data-[state=open]:animate-in … zoom-in-95 … slide-in-from-top-[48%]`
+host-plugin utilities 0.10.0's motion sweep just finished removing from this
+package. kit ships NO stylesheet, so that dialog was unanimated and off-theme in
+three of the four consumers — on the one surface in the product that stands
+between a user and a destroyed thing. kit could not import 0.10.0's fix, because
+**this package depends on kit**; importing back is a cycle. And giving kit its own
+sheet would have invented a second required-CSS contract no consumer performs —
+the C26 silent host contract, one layer down. The only correct move was this one.
+
+**What it inherits by being here** — none of it hand-copied, all of it already
+proven by this package's own guards:
+
+- `matrx-motion-overlay` / `matrx-motion-dialog` / `matrx-spin`, whose rules ship
+  in `styles.css` and are asserted present in the packed tarball;
+- `--matrx-overlay-scrim`, a token that answers to the host's theme, instead of
+  `bg-black/80`;
+- `AlertDialog` ruling 3 — clamped to `max-h-[85dvh]`, scrolling inside itself,
+  sticky footer. **This is what makes the platform's consequence-first copy law
+  survivable.** A confirmation that names everything it is about to destroy can be
+  long, and in kit's unclamped copy a long one pushed Cancel and Continue below
+  the fold of a short viewport. An AlertDialog does not dismiss on a backdrop
+  click, so that was a dead end on a destructive action. Fixed by the move, with
+  a guard;
+- `buttonVariants` as the ONE source of button appearance — the destructive
+  confirm button is now literally the package's destructive button, including the
+  44px coarse-pointer target, not a second hand-written copy of its classes;
+- `PortalContainerProvider`, so a confirm opened inside a popped-out window panel
+  renders in THAT window's document without the host passing anything.
+
+**Behavior is the kit port, verbatim.** Every prop, default and interaction is
+unchanged; only the chrome underneath is the package's. The suite came across
+whole and grew a third target: `src/confirm-dialog.test.tsx` proves the
+imperative contract across the package boundary, proves the chrome is the
+package's (a guard that fails the moment `bg-black` or `animate-in` comes back),
+and proves the consequence-first copy contract — the consequence renders in full,
+is the dialog's `aria-describedby` description, is never clamped or truncated,
+and never puts the actions out of reach however long it is.
+
+### Added
+
+- `ConfirmDialog`, `ConfirmDialogProps` — the declarative dialog (use it inline
+  when in-dialog `busy` state during async work is meaningful).
+- `ConfirmDialogHost` — mount ONCE near the root of every provider tree.
+
+### Not added, on purpose
+
+- `confirm()` is **not** re-exported from here. The imperative opener stays in
+  `@ai-matrx/kit/confirm-opener`, where it is pure TS with no React and no radix,
+  so hundreds of static call sites cost nothing. The host and the opener find each
+  other through the opener's `Symbol.for("ai-matrx.kit.confirm-opener-state")`
+  globalThis slot — across packages and across module graphs.
 
 ### Consumer action (C28)
 
-**None.** No API changed, no class a consumer writes changed, and resting
-geometry is identical. Take the patch.
-
-Named, because they are the ones that regressed: **aidream/dashboard**,
-**aidream/workflow-studio** and **matrx-extend** loaded no animation rules at
-all before 0.10.0, so their dialogs had always appeared instantly and correctly
-centred — 0.10.0 is what gave them a dialog that flies in from off-screen.
-matrx-frontend was NOT visibly changed by either release: its pre-0.10.0
-`tw-animate-css` spelling had the identical stacking flaw. All four are correct
-on 0.10.1.
+Mount `<ConfirmDialogHost />` from **here** and keep calling `confirm()` from
+`@ai-matrx/kit/confirm-opener`. The full repointing diff — host, dialog, and the
+imperative import — is in `@ai-matrx/kit` CHANGELOG § 0.9.0 § Consumer action.
+Take both releases together: design-system >= 0.11.0 with kit >= 0.9.0.
 
 ## 0.10.0 — 2026-09-07
 

package/README.md

@@ -5,9 +5,28 @@ The small, semantic UI foundation shared by AI Matrx React applications — prim
 **Controls:** Button, Badge, Label, Separator, the Input family, the Textarea family, Checkbox, Switch, RadioGroup, Slider, Toggle + ToggleGroup, Avatar, Progress.
 **Surfaces:** Card, Table, Tabs, Accordion, 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.
+**Composed:** EditableLabel, SegmentedControl, ScoreRing, OverflowToolbar, ConfirmDialog + ConfirmDialogHost.
 **Hooks + utilities:** `useScrollFade`, `useIsMobile`, `usePortalContainer`, `useDialogContainer`, `useDrawerDirection`, `cn`.
 
+**The confirm dialog lives here; the imperative `confirm()` lives in `@ai-matrx/kit`.** Since 0.11.0 / kit 0.9.0 the surface is one implementation, in the package that owns AlertDialog, the motion layer and the overlay scrim token. Mount the host once near your provider root and call `confirm()` from anywhere — they share one registry through a `globalThis` slot:
+
+```tsx
+// app root, once
+import { ConfirmDialogHost } from "@ai-matrx/design-system";
+<ConfirmDialogHost />
+
+// anywhere — a thunk, a util, a click handler
+import { confirm } from "@ai-matrx/kit/confirm-opener";
+if (!(await confirm({
+  title: "Re-run research",
+  description: "This discards the 14 pages you already have (~$50 and 10 minutes) and starts over.",
+  variant: "destructive",
+  confirmLabel: "Discard and re-run",
+}))) return;
+```
+
+Use the declarative `<ConfirmDialog open … busy />` inline instead when the dialog must stay open with a spinner while async work finishes. Name the consequence: a confirmation that says only "Are you sure?" does not satisfy the platform's destructive-and-expensive-actions law.
+
 **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"`, `Accordion 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.