@ai-matrx/design-system 0.8.0 → 0.10.0

package/dist/styles.css

@@ -190,6 +190,480 @@
   }
 }
 
+/* Collapsible open/close. The SAME rule as the accordion above and a separate
+   one on purpose: Radix publishes a DIFFERENT measured variable per primitive
+   (`--radix-collapsible-content-height`), and the whole reason this ships here
+   is that two matrx-frontend collapsibles reached for the ACCORDION keyframes
+   and therefore interpolated to a variable that is never set on a collapsible
+   — no animation, no error, for as long as they existed (census row 19f).
+   Six more used host-only `slide-down`/`slide-up` keyframes that were keyed
+   correctly and existed in exactly one app's globals.css: the same C26 silent
+   host contract, wearing a working coat. One duration (200ms) for both
+   primitives, so a collapsible and an accordion on the same screen agree.
+   Colourless and inert until an element carries the class. */
+@keyframes matrx-collapsible-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-collapsible-content-height);
+  }
+}
+@keyframes matrx-collapsible-up {
+  from {
+    height: var(--radix-collapsible-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+.matrx-collapsible-content[data-state="open"] {
+  animation: matrx-collapsible-down 200ms ease-out;
+}
+.matrx-collapsible-content[data-state="closed"] {
+  animation: matrx-collapsible-up 200ms ease-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .matrx-collapsible-content[data-state="open"],
+  .matrx-collapsible-content[data-state="closed"] {
+    animation: none;
+  }
+}
+
+/* ═══════════════════════════════════════════════════════════════════════
+   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 ----------------------------------------------
+   The card is positioned by `translate-x-[-50%] translate-y-[-50%]`
+   utilities, and an animation REPLACES `transform` for its whole duration —
+   which is why the shadcn original had to re-state the centring inside the
+   motion (`slide-in-from-left-1/2 slide-in-from-top-[48%]`). Owning the
+   keyframes lets us just say it: the card rises 2% and scales up from 95%,
+   ending exactly on the resting transform so nothing jumps at the end. */
+@keyframes matrx-dialog-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+@keyframes matrx-dialog-out {
+  from {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translate(-50%, -48%) 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 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,31 @@
       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;
   }
 
   /* 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.8.0",
+  "version": "0.10.0",
   "description": "AI Matrx semantic React primitives shared across Vite, Next.js, desktop, and customer-built applications.",
   "type": "module",
   "license": "MIT",