@ai-matrx/design-system 0.11.0 → 0.11.1

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## 0.11.1 — 2026-09-07
+
+**The 0.10.1 dialog-centring fix, on the current line.** 0.11.0 was cut and
+published minutes before the fix landed, so `latest` briefly carried the
+regression: `Dialog`, `AlertDialog` and `CommandDialog` flew in from beyond the
+viewport's top-left corner and snapped into place at the end of their 200ms
+animation. **`ConfirmDialog`, which arrived in 0.11.0, is an `AlertDialog` and
+was therefore affected on every Tailwind v4 host** — this is the release that
+fixes it.
+
+Root cause, census, the `.matrx-dialog-centered` / `.matrx-popper-offset` fix
+and its failing-then-passing guard are all documented in § 0.10.1 below; this
+release is that change and nothing else. 0.10.1 exists for anyone still on the
+0.10.x line and is published under a side dist-tag so it cannot pull `latest`
+backwards past the confirm surface.
+
+### Consumer action (C28)
+
+**None** — no API change, resting geometry identical. Take the patch. The three
+consumers that regressed at 0.10.0 and stayed regressed at 0.11.0:
+**aidream/dashboard**, **aidream/workflow-studio**, **matrx-extend**.
+matrx-frontend was never visibly changed (its pre-0.10.0 `tw-animate-css`
+spelling had the identical flaw) but should take it too.
+
 ## 0.11.0 — 2026-09-07
 
 **THE CONFIRM SURFACE MOVES IN.** `ConfirmDialog` and `ConfirmDialogHost` — the
@@ -68,6 +92,84 @@ Mount `<ConfirmDialogHost />` from **here** and keep calling `confirm()` from
 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.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.
+
+### 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.
+
 ## 0.10.0 — 2026-09-07
 
 **THE MOTION SWEEP. Ten more primitives were animating with a host plugin this

package/dist/index.cjs

@@ -62,6 +62,7 @@ __export(src_exports, {
   BottomSheetFooter: () => BottomSheetFooter,
   BottomSheetHeader: () => BottomSheetHeader,
   Button: () => Button,
+  CENTERED_DIALOG: () => CENTERED_DIALOG,
   Card: () => Card,
   CardAction: () => CardAction,
   CardContent: () => CardContent,
@@ -157,6 +158,7 @@ __export(src_exports, {
   MOTION_SHEET: () => MOTION_SHEET,
   MOTION_SPIN: () => MOTION_SPIN,
   OverflowToolbar: () => OverflowToolbar,
+  POPPER_OFFSET: () => POPPER_OFFSET,
   Popover: () => Popover,
   PopoverAnchor: () => PopoverAnchor,
   PopoverContent: () => PopoverContent,
@@ -952,6 +954,8 @@ Button.displayName = "Button";
 // src/motion.ts
 var MOTION_OVERLAY = "matrx-motion-overlay";
 var MOTION_DIALOG = "matrx-motion-dialog";
+var CENTERED_DIALOG = "matrx-dialog-centered";
+var POPPER_OFFSET = "matrx-popper-offset";
 var MOTION_BOTTOM_SHEET = "matrx-motion-bottom-sheet";
 var MOTION_POPPER = "matrx-motion-popper";
 var MOTION_SHEET = {
@@ -1056,7 +1060,7 @@ var AlertDialogContent = React7.forwardRef(({ className, children, container, an
         ref,
         "data-slot": "alert-dialog-content",
         className: cn(
-          "fixed left-[50%] top-[50%] z-[10000] grid min-w-0 w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg",
+          `fixed left-[50%] top-[50%] z-[10000] grid min-w-0 w-full max-w-lg ${CENTERED_DIALOG} gap-4 border bg-background p-6 shadow-lg`,
           // Ruling 3 — never taller than the viewport, always scrollable, and
           // the footer stays reachable via --dialog-pad like Dialog's.
           "max-h-[85dvh] overflow-y-auto overscroll-contain [--dialog-pad:1.5rem] overflow-x-clip [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full",
@@ -1397,7 +1401,7 @@ var Command = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 Command.displayName = import_cmdk.Command.displayName;
-var DIALOG_DESKTOP_CLASSES = "fixed left-[50%] top-[50%] z-[10000] grid min-w-0 w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 overflow-x-clip border bg-background p-6 shadow-lg [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full sm:rounded-lg";
+var DIALOG_DESKTOP_CLASSES = `fixed left-[50%] top-[50%] z-[10000] grid min-w-0 w-full max-w-lg ${CENTERED_DIALOG} gap-4 overflow-x-clip border bg-background p-6 shadow-lg [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full sm:rounded-lg`;
 var DIALOG_MOBILE_SHEET_CLASSES = "fixed inset-x-0 bottom-0 left-0 right-0 top-auto z-[10000] flex min-w-0 flex-col w-full max-w-full max-h-[90dvh] translate-x-0 translate-y-0 gap-4 overflow-x-clip border-t bg-background p-4 pb-safe shadow-lg [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full rounded-t-2xl rounded-b-none overflow-y-auto overscroll-contain";
 var DIALOG_MOBILE_SHEET_OVERRIDE = "inset-x-0 bottom-0 left-0 right-0 top-auto translate-x-0 translate-y-0 w-full max-w-full max-h-[90dvh] rounded-b-none rounded-t-2xl overflow-y-auto";
 var CommandDialogContent = React13.forwardRef(({ className, children, container, ...props }, ref) => {
@@ -2119,7 +2123,7 @@ var DialogContentPrimitive = React17.forwardRef((props, ref) => {
   );
 });
 DialogContentPrimitive.displayName = "DialogContentPrimitive";
-var DIALOG_DESKTOP_CLASSES2 = "fixed left-[50%] top-[50%] z-[10000] grid min-w-0 w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 max-h-[85dvh] overflow-y-auto overscroll-contain [--dialog-pad:1.5rem] overflow-x-clip border bg-background p-6 shadow-lg [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full sm:rounded-lg";
+var DIALOG_DESKTOP_CLASSES2 = `fixed left-[50%] top-[50%] z-[10000] grid min-w-0 w-full max-w-lg ${CENTERED_DIALOG} gap-4 max-h-[85dvh] overflow-y-auto overscroll-contain [--dialog-pad:1.5rem] overflow-x-clip border bg-background p-6 shadow-lg [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full sm:rounded-lg`;
 var DIALOG_MOBILE_SHEET_CLASSES2 = "matrx-mobile-sheet fixed inset-x-0 bottom-0 left-0 right-0 top-auto z-[10000] flex min-w-0 flex-col w-full max-w-full max-h-[90dvh] translate-x-0 translate-y-0 gap-4 [--dialog-pad:1rem] overflow-x-clip border-t bg-background p-4 pb-safe shadow-lg [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full rounded-t-2xl rounded-b-none overflow-y-auto overscroll-contain";
 var DIALOG_MOBILE_SHEET_OVERRIDE2 = "inset-x-0 bottom-0 left-0 right-0 top-auto translate-x-0 translate-y-0 w-full max-w-full max-h-[90dvh] rounded-b-none rounded-t-2xl overflow-y-auto";
 var DialogContent = React17.forwardRef(
@@ -3180,7 +3184,12 @@ var SelectContent = React24.forwardRef(
         className: cn(
           "relative z-[10001] max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md",
           animated && MOTION_POPPER,
-          position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          // The resting gap from the trigger. It is the `translate` property
+          // (POPPER_OFFSET), never Tailwind translate utilities: those compose
+          // with `transform` on a v4 host and are REPLACED by it on a v3 one,
+          // so on v3 the animation ate the gap and the surface snapped 4px at
+          // the end. Same law as the centred dialog card — see motion.ts.
+          position === "popper" && POPPER_OFFSET,
           className
         ),
         position,