@ai-matrx/design-system 0.10.0 → 0.10.1

package/CHANGELOG.md

@@ -1,5 +1,83 @@
 # 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.
+
+### 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
@@ -378,9 +456,19 @@ Install `@ai-matrx/design-system@0.7.0` (and `@ai-matrx/tap-target@0.2.0`), then
      `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
+   - ~~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`.
+     `apps/workflow-studio`.~~ 🚨 **WRONG, corrected 2026-09-07.** That census
+     swept FOUR repos and there are FIVE: **matrx-local** (`desktop/`, the
+     Tauri app) carried its own `tooltip.tsx`, `slider.tsx`, `popover.tsx` and
+     `select.tsx` the whole time — plus ten more from the 0.5.0 list below,
+     whose Consumer action omitted it for the same reason. The sentence was
+     repeated verbatim into census row 19, and every later wave that read it
+     kept skipping the repo. matrx-local was adopted on 0.10.0 the same day
+     this was found: all seventeen forks swapped, fourteen files deleted, 131
+     files repointed, 56 twin-register rows added. **The lesson is the
+     sentence, not the repo — a "no other consumer" claim must name the repos
+     it swept, and the list must be checked against the actual consumer set.**
 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"`).
@@ -567,6 +655,11 @@ copy of something this version now ships:
   Bind `Card size="lg"` to keep this app's density (Table defaults to md as of 0.5.1).
 - **aidream/apps/workflow-studio** — `src/components/ui/{dialog,dropdown-menu,scroll-area,switch,tabs,textarea}.tsx`.
   Its ScrollArea viewport hack becomes `viewportClassName="[&>div]:!block [&>div]:min-w-0"`.
+- **matrx-local** — `desktop/src/components/ui/{avatar,card,checkbox,dialog,progress,scroll-area,switch,tabs,textarea}.tsx`.
+  **Added 2026-09-07**: this repo was missing from the list above (see the
+  correction under 0.7.0 Consumer action 2). Adopted on 0.10.0 — `card` and
+  `dialog` keep one-prop binding shims for this app's `lg` density and its
+  glass surface; everything else re-points straight at the package.
 
 Hosts that do not already import the stylesheets must, or the new structural
 rules do nothing:

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,
@@ -155,6 +156,7 @@ __export(src_exports, {
   MOTION_SHEET: () => MOTION_SHEET,
   MOTION_SPIN: () => MOTION_SPIN,
   OverflowToolbar: () => OverflowToolbar,
+  POPPER_OFFSET: () => POPPER_OFFSET,
   Popover: () => Popover,
   PopoverAnchor: () => PopoverAnchor,
   PopoverContent: () => PopoverContent,
@@ -950,6 +952,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 = {
@@ -1054,7 +1058,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",
@@ -1395,7 +1399,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) => {
@@ -2008,7 +2012,7 @@ var DialogContentPrimitive = React16.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 = React16.forwardRef(
@@ -3069,7 +3073,12 @@ var SelectContent = React23.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,