@ai-matrx/design-system 0.9.0 → 0.10.1

package/dist/styles.css

@@ -230,6 +230,489 @@
   }
 }
 
+/* ═══════════════════════════════════════════════════════════════════════
+   THE MOTION LAYER (0.10.0) — every overlay animation this package emits.
+
+   THE DOCTRINE (FEATURE.md): a primitive that leaves motion to the host has
+   not shipped motion, it has shipped a coin flip. 0.8.0 and 0.9.0 closed that
+   for Accordion and Collapsible one primitive at a time. The sweep that
+   followed found the SAME shape on ten more, and far worse than a missing
+   keyframe: every floating surface in this package — Dialog, AlertDialog,
+   Sheet, CommandDialog, Popover, DropdownMenu, ContextMenu, HoverCard,
+   Select, Tooltip — animated with `animate-in` / `animate-out` /
+   `fade-in-0` / `zoom-in-95` / `slide-in-from-*-2`. Those are not Tailwind
+   utilities. They come from the `tailwindcss-animate` plugin (or its v4
+   successor `tw-animate-css`), which is a HOST dependency this package never
+   declared and cannot declare — a Tailwind plugin is loaded by the host's CSS
+   entry, not by a node_modules package.
+
+   Measured on built output, 2026-09-07, before this file owned any of it:
+
+     matrx-frontend    `@import "tw-animate-css"` in globals.css  → animated
+     aidream/dashboard         no plugin                          → 0 rules
+     aidream/workflow-studio   no plugin                          → 0 rules
+     matrx-extend      `tailwindcss-animate` in package.json but
+                       NEVER LOADED (it is a Tailwind v3 plugin and
+                       extend is on v4 with no `@plugin` directive)
+                                                                  → 0 rules
+
+   Three consumers out of four. `grep -c 'animate-in\|slide-in-from'` on each
+   app's built stylesheet returned 0. Every dialog, dropdown, popover, tooltip
+   and sheet in the two aidream apps and the Chrome extension appeared
+   instantly, with no animation and no error, for as long as they existed.
+   The one host that worked, worked by accident of its own CSS entry.
+
+   So the package owns it. Below: package-defined keyframes, applied through
+   `matrx-`-prefixed classes the components put on the DOM themselves, timed
+   from `--matrx-motion-*` tokens, silenced by `prefers-reduced-motion`, and
+   asserted by `styles.test.ts` + the packed-tarball canary.
+
+   WHERE THE LINE IS. This layer owns KEYFRAME ANIMATION — motion that either
+   happens or silently does not. It deliberately does NOT own Tailwind's
+   `transition-*` / `duration-*` / `ease-*` utilities that the primitives also
+   carry (a hover colour easing, the progress bar's width, the close button's
+   opacity). Those are CORE Tailwind, present in every Tailwind host, and
+   their absence degrades to an instant-but-correct change rather than to a
+   surface that lies about its state. Re-implementing them here would mean
+   shipping a copy of Tailwind.
+
+   UNLAYERED on purpose, exactly like the accordion and collapsible rules
+   above: a host that still loads `tw-animate-css` would otherwise emit a
+   competing `animation` from `@layer utilities` and win, giving that one host
+   different motion from everyone else — the coin flip again, wearing a
+   working coat. Unlayered means every consumer gets identical motion. The
+   sanctioned escape is the `animated={false}` prop on the component, not a
+   className.
+   ═══════════════════════════════════════════════════════════════════════ */
+
+/* --- scrim ------------------------------------------------------------- */
+@keyframes matrx-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes matrx-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.matrx-motion-overlay[data-state="open"] {
+  animation: matrx-fade-in var(--matrx-motion-duration-base)
+    var(--matrx-motion-ease-out);
+}
+.matrx-motion-overlay[data-state="closed"] {
+  animation: matrx-fade-out var(--matrx-motion-duration-base)
+    var(--matrx-motion-ease-in);
+}
+
+/* --- centred dialog card ----------------------------------------------
+   CENTRING AND MOTION ARE TWO DIFFERENT CSS PROPERTIES HERE, ON PURPOSE.
+   0.10.0 centred the card with `translate-x-[-50%] translate-y-[-50%]`
+   utilities and RE-STATED that centring inside the keyframes, on the
+   assumption an animation of `transform` replaces whatever positioned the
+   element. That assumption is a Tailwind v3 assumption, and it shipped a
+   live regression:
+
+     Tailwind v3  `translate-x-[-50%]` -> `transform: translate(…)`  (replaced)
+     Tailwind v4  `translate-x-[-50%]` -> `translate: -50% -50%`     (COMPOSES)
+
+   `translate` is an independent transform property: per spec it is applied
+   IN ADDITION to `transform`, not replaced by it. So on every v4 host the
+   card was centred twice for the animation's whole duration and snapped back
+   at the end. Measured live, 2560x1289, resting rect x=128 y=32:
+   currentTime=0 -> x=-966 y=-525 (off the top-left of the viewport);
+   `el.style.translate='none'` mid-animation -> x=137 y=41, i.e. resting.
+   Three of four consumers regressed (aidream/dashboard, workflow-studio,
+   matrx-extend went from instant-and-centred to flying in from off-screen).
+
+   The fix does not pick a Tailwind version. The package owns the centring
+   itself, in the `translate` property, on `.matrx-dialog-centered` below —
+   so it reads identically under v3 and v4 hosts — and the keyframes express
+   ONLY the delta: opacity, and a 2% rise scaled up from 95% carried by
+   `transform`, which now has no other job. Resting state is
+   `translate: -50% -50%; transform: none`, byte-identical to 0.10.0's
+   rendered rect. The two never restate each other again, and
+   `motion.test.tsx` fails the build if a centred surface goes back to
+   wearing a non-zero translate utility. */
+.matrx-dialog-centered {
+  translate: -50% -50%;
+}
+@keyframes matrx-dialog-in {
+  from {
+    opacity: 0;
+    transform: translateY(2%) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes matrx-dialog-out {
+  from {
+    opacity: 1;
+    transform: none;
+  }
+  to {
+    opacity: 0;
+    transform: translateY(2%) scale(0.95);
+  }
+}
+.matrx-motion-dialog[data-state="open"] {
+  animation: matrx-dialog-in var(--matrx-motion-duration-base)
+    var(--matrx-motion-ease-out);
+}
+.matrx-motion-dialog[data-state="closed"] {
+  animation: matrx-dialog-out var(--matrx-motion-duration-base)
+    var(--matrx-motion-ease-in);
+}
+
+/* --- edge sheets -------------------------------------------------------
+   Five named classes rather than one `data-side` rule, because a Sheet's side
+   is a `sheetVariants` variant on the element's own class list — Radix
+   publishes no `data-side` on a Dialog-based sheet. The mobile Dialog /
+   CommandDialog bottom sheet reuses `-bottom`. */
+@keyframes matrx-slide-in-top {
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+@keyframes matrx-slide-out-top {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-100%);
+  }
+}
+@keyframes matrx-slide-in-bottom {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+@keyframes matrx-slide-out-bottom {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(100%);
+  }
+}
+@keyframes matrx-slide-in-left {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+@keyframes matrx-slide-out-left {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}
+@keyframes matrx-slide-in-right {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+@keyframes matrx-slide-out-right {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+.matrx-motion-sheet-top[data-state="open"] {
+  animation: matrx-slide-in-top var(--matrx-motion-duration-sheet)
+    var(--matrx-motion-ease-out);
+}
+.matrx-motion-sheet-top[data-state="closed"] {
+  animation: matrx-slide-out-top var(--matrx-motion-duration-slow)
+    var(--matrx-motion-ease-in);
+}
+.matrx-motion-sheet-bottom[data-state="open"] {
+  animation: matrx-slide-in-bottom var(--matrx-motion-duration-sheet)
+    var(--matrx-motion-ease-out);
+}
+.matrx-motion-sheet-bottom[data-state="closed"] {
+  animation: matrx-slide-out-bottom var(--matrx-motion-duration-slow)
+    var(--matrx-motion-ease-in);
+}
+.matrx-motion-sheet-left[data-state="open"] {
+  animation: matrx-slide-in-left var(--matrx-motion-duration-sheet)
+    var(--matrx-motion-ease-out);
+}
+.matrx-motion-sheet-left[data-state="closed"] {
+  animation: matrx-slide-out-left var(--matrx-motion-duration-slow)
+    var(--matrx-motion-ease-in);
+}
+.matrx-motion-sheet-right[data-state="open"] {
+  animation: matrx-slide-in-right var(--matrx-motion-duration-sheet)
+    var(--matrx-motion-ease-out);
+}
+.matrx-motion-sheet-right[data-state="closed"] {
+  animation: matrx-slide-out-right var(--matrx-motion-duration-slow)
+    var(--matrx-motion-ease-in);
+}
+/* A `side="center"` Sheet has no edge to come from, so it fades like a
+   dialog scrim rather than sliding from nowhere. */
+.matrx-motion-sheet-center[data-state="open"] {
+  animation: matrx-fade-in var(--matrx-motion-duration-sheet)
+    var(--matrx-motion-ease-out);
+}
+.matrx-motion-sheet-center[data-state="closed"] {
+  animation: matrx-fade-out var(--matrx-motion-duration-slow)
+    var(--matrx-motion-ease-in);
+}
+/* The mobile Dialog / CommandDialog bottom sheet: slides AND fades, at the
+   dialog's 200ms rather than the Sheet's 500ms, because it is a dialog
+   wearing sheet geometry and it opens from a tap, not from a nav gesture. */
+@keyframes matrx-bottom-sheet-in {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes matrx-bottom-sheet-out {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+}
+.matrx-motion-bottom-sheet[data-state="open"] {
+  animation: matrx-bottom-sheet-in var(--matrx-motion-duration-base)
+    var(--matrx-motion-ease-out);
+}
+.matrx-motion-bottom-sheet[data-state="closed"] {
+  animation: matrx-bottom-sheet-out var(--matrx-motion-duration-base)
+    var(--matrx-motion-ease-in);
+}
+
+/* --- poppers -----------------------------------------------------------
+   Popover, DropdownMenu, ContextMenu, HoverCard, Select and Tooltip all
+   position through Radix's popper, which publishes `data-side` on the content
+   and `--radix-popper-transform-origin` — the point on the surface that faces
+   the trigger. Reading that origin is a correctness fix the `zoom-in-95`
+   original never had: the surface now grows OUT OF its anchor instead of out
+   of its own centre, so a menu below a button no longer appears to expand
+   upward into the button.
+
+   `data-side` says where the surface sits, so it travels FROM the trigger:
+   a surface on the `bottom` starts slightly above where it lands. Exit fades
+   and shrinks without sliding — matching the originals, and the right
+   behaviour, since a surface leaving should not appear to move somewhere. */
+@keyframes matrx-popper-in-from-top {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(calc(-1 * var(--matrx-motion-popper-travel)));
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+@keyframes matrx-popper-in-from-bottom {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(var(--matrx-motion-popper-travel));
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+@keyframes matrx-popper-in-from-left {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateX(calc(-1 * var(--matrx-motion-popper-travel)));
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateX(0);
+  }
+}
+@keyframes matrx-popper-in-from-right {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateX(var(--matrx-motion-popper-travel));
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateX(0);
+  }
+}
+@keyframes matrx-popper-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+/* THE RIGHT VARIABLE, PER PRIMITIVE. Radix publishes the anchor-facing origin
+   under the shared popper name AND under a per-primitive alias, and which one
+   is present depends on the primitive — `Select` sets
+   `--radix-select-content-transform-origin`, `Tooltip` sets
+   `--radix-tooltip-content-transform-origin`, and so on. Reusing one
+   primitive's variable on another is the exact silent death census row 19f
+   recorded (accordion keyframes on a collapsible panel), so this states the
+   whole chain rather than betting on one name. If none resolves, the origin
+   falls back to the element's centre — degraded, never broken. */
+.matrx-motion-popper {
+  transform-origin: var(
+    --radix-popper-transform-origin,
+    var(
+      --radix-select-content-transform-origin,
+      var(
+        --radix-tooltip-content-transform-origin,
+        var(
+          --radix-dropdown-menu-content-transform-origin,
+          var(
+            --radix-context-menu-content-transform-origin,
+            var(
+              --radix-hover-card-content-transform-origin,
+              var(--radix-popover-content-transform-origin, center)
+            )
+          )
+        )
+      )
+    )
+  );
+}
+/* A surface rendered BELOW the trigger enters from above it, and so on. The
+   bare `[data-state=open]` rule is the fallback for the frame before the
+   popper has measured a side (and for `Select` in `item-aligned` position,
+   which publishes no side at all). */
+.matrx-motion-popper[data-state="open"] {
+  animation: matrx-popper-in-from-top var(--matrx-motion-duration-fast)
+    var(--matrx-motion-ease-out);
+}
+.matrx-motion-popper[data-state="open"][data-side="bottom"] {
+  animation-name: matrx-popper-in-from-top;
+}
+.matrx-motion-popper[data-state="open"][data-side="top"] {
+  animation-name: matrx-popper-in-from-bottom;
+}
+.matrx-motion-popper[data-state="open"][data-side="right"] {
+  animation-name: matrx-popper-in-from-left;
+}
+.matrx-motion-popper[data-state="open"][data-side="left"] {
+  animation-name: matrx-popper-in-from-right;
+}
+.matrx-motion-popper[data-state="closed"] {
+  animation: matrx-popper-out var(--matrx-motion-duration-fast)
+    var(--matrx-motion-ease-in);
+}
+
+/* THE POPPER'S RESTING GAP — same law as `.matrx-dialog-centered` above, same
+   reason. `Select` in `popper` position used to nudge itself off its trigger
+   with `data-[side=bottom]:translate-y-1` and three siblings. Those are
+   Tailwind translate utilities on a surface whose keyframes animate
+   `transform` — the identical composite hazard the centred card shipped in
+   0.10.0, at 4px instead of half a viewport: on a v4 host the gap composed
+   correctly by luck, on a v3 host the animation replaced it and the surface
+   snapped 4px at the end. Stated as the `translate` property, it is the
+   resting offset in every host and the keyframes keep `transform` to
+   themselves. Sides are Radix's `data-side` (where the surface SITS), so a
+   surface below its trigger moves further down. */
+.matrx-popper-offset[data-side="bottom"] {
+  translate: 0 var(--matrx-popper-offset);
+}
+.matrx-popper-offset[data-side="top"] {
+  translate: 0 calc(-1 * var(--matrx-popper-offset));
+}
+.matrx-popper-offset[data-side="right"] {
+  translate: var(--matrx-popper-offset) 0;
+}
+.matrx-popper-offset[data-side="left"] {
+  translate: calc(-1 * var(--matrx-popper-offset)) 0;
+}
+
+/* --- the two indefinite loops -----------------------------------------
+   `animate-pulse` and `animate-spin` ARE core Tailwind, so they survive in a
+   Tailwind host — but a Skeleton that does not pulse is indistinguishable
+   from an empty grey box, and a spinner that does not spin claims the work
+   has stopped. Both are load-bearing lies in a non-Tailwind consumer, and
+   both are four lines. The package owns them. */
+@keyframes matrx-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+@keyframes matrx-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.matrx-pulse {
+  animation: matrx-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+.matrx-spin {
+  animation: matrx-spin 1s linear infinite;
+}
+
+/* --- the accessibility switch -----------------------------------------
+   ONE block for the whole motion layer. A surface still appears and
+   disappears — it just does so without travelling. The two indefinite loops
+   are the exception that proves the rule: a Skeleton and a spinner say
+   "still working" with motion and nothing else, so silencing them entirely
+   would remove the information. They slow down instead of stopping.
+
+   Deliberately NOT a `--matrx-motion-*` token: a user's OS-level reduced
+   motion preference is not an org setting a host may override. */
+@media (prefers-reduced-motion: reduce) {
+  .matrx-motion-overlay[data-state],
+  .matrx-motion-dialog[data-state],
+  .matrx-motion-sheet-top[data-state],
+  .matrx-motion-sheet-bottom[data-state],
+  .matrx-motion-sheet-left[data-state],
+  .matrx-motion-sheet-right[data-state],
+  .matrx-motion-sheet-center[data-state],
+  .matrx-motion-bottom-sheet[data-state],
+  .matrx-motion-popper[data-state] {
+    animation: none;
+  }
+  .matrx-pulse {
+    animation-duration: 4s;
+  }
+  .matrx-spin {
+    animation-duration: 3s;
+  }
+}
+
 /* ────────────────────────────────────────────────────────────────────────
    Scroll fade — the "there is more below" cue. UNLAYERED on purpose.
    Driven by `useScrollFade`, which sets the data attributes ONLY on edges

package/dist/tokens.css

@@ -117,6 +117,36 @@
       0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
     --matrx-glass-shadow-lg:
       0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
+
+    /* MOTION (0.10.0). Every package-owned animation in styles.css reads its
+       duration and easing from here, so a host retimes the whole system by
+       redeclaring four values — and an org that wants calmer motion sets them
+       once instead of overriding twenty rules. They are NOT the accessibility
+       switch: `prefers-reduced-motion: reduce` silences the animations
+       outright in styles.css, regardless of these values.
+
+       The numbers are the ones the primitives already carried as Tailwind
+       `duration-*` utilities before the package owned the keyframes:
+       poppers/tooltips 150ms, dialogs and overlays 200ms, a sheet closing
+       300ms and opening 500ms. */
+    --matrx-motion-duration-fast: 150ms;
+    --matrx-motion-duration-base: 200ms;
+    --matrx-motion-duration-slow: 300ms;
+    --matrx-motion-duration-sheet: 500ms;
+    /* Enters decelerate (the surface arrives and settles); exits accelerate
+       (it leaves and is gone). Linear on both — which is what
+       `tailwindcss-animate` defaulted to — reads mechanical at these
+       durations. */
+    --matrx-motion-ease-out: cubic-bezier(0, 0, 0.2, 1);
+    --matrx-motion-ease-in: cubic-bezier(0.4, 0, 1, 1);
+    /* The distance a popper travels toward its anchor as it opens. 0.5rem is
+       the `slide-in-from-*-2` the primitives carried. */
+    --matrx-motion-popper-travel: 0.5rem;
+    /* The RESTING gap between a `popper`-positioned surface and its trigger —
+       not motion, geometry. 0.25rem is the `translate-y-1` the primitives
+       carried before 0.10.1 moved it off Tailwind's translate utilities and
+       into the `translate` property (see `.matrx-popper-offset`). */
+    --matrx-popper-offset: 0.25rem;
   }
 
   /* Dark theme. Matches the `.dark`-class convention (Tailwind v4 hosts wire

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-matrx/design-system",
-  "version": "0.9.0",
+  "version": "0.10.1",
   "description": "AI Matrx semantic React primitives shared across Vite, Next.js, desktop, and customer-built applications.",
   "type": "module",
   "license": "MIT",