@ai-matrx/design-system 0.10.0 → 0.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +85 -2
- package/README.md +20 -1
- package/dist/index.cjs +395 -284
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +105 -1
- package/dist/index.d.ts +105 -1
- package/dist/index.js +432 -318
- package/dist/index.js.map +1 -1
- package/package.json +6 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,73 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 0.11.0 — 2026-09-07
|
|
4
|
+
|
|
5
|
+
**THE CONFIRM SURFACE MOVES IN.** `ConfirmDialog` and `ConfirmDialogHost` — the
|
|
6
|
+
platform's `window.confirm` replacement — now live here. They came from
|
|
7
|
+
`@ai-matrx/kit`, which is releasing 0.9.0 to delete its copy. Census row 19i,
|
|
8
|
+
decided on the row-20a Tooltip precedent: **one surface, one owner.**
|
|
9
|
+
|
|
10
|
+
**Why it had to move.** kit's confirm shipped a second, inlined AlertDialog with
|
|
11
|
+
its own hand-copied button class strings, a hardcoded `bg-black/80` scrim, and
|
|
12
|
+
the exact `data-[state=open]:animate-in … zoom-in-95 … slide-in-from-top-[48%]`
|
|
13
|
+
host-plugin utilities 0.10.0's motion sweep just finished removing from this
|
|
14
|
+
package. kit ships NO stylesheet, so that dialog was unanimated and off-theme in
|
|
15
|
+
three of the four consumers — on the one surface in the product that stands
|
|
16
|
+
between a user and a destroyed thing. kit could not import 0.10.0's fix, because
|
|
17
|
+
**this package depends on kit**; importing back is a cycle. And giving kit its own
|
|
18
|
+
sheet would have invented a second required-CSS contract no consumer performs —
|
|
19
|
+
the C26 silent host contract, one layer down. The only correct move was this one.
|
|
20
|
+
|
|
21
|
+
**What it inherits by being here** — none of it hand-copied, all of it already
|
|
22
|
+
proven by this package's own guards:
|
|
23
|
+
|
|
24
|
+
- `matrx-motion-overlay` / `matrx-motion-dialog` / `matrx-spin`, whose rules ship
|
|
25
|
+
in `styles.css` and are asserted present in the packed tarball;
|
|
26
|
+
- `--matrx-overlay-scrim`, a token that answers to the host's theme, instead of
|
|
27
|
+
`bg-black/80`;
|
|
28
|
+
- `AlertDialog` ruling 3 — clamped to `max-h-[85dvh]`, scrolling inside itself,
|
|
29
|
+
sticky footer. **This is what makes the platform's consequence-first copy law
|
|
30
|
+
survivable.** A confirmation that names everything it is about to destroy can be
|
|
31
|
+
long, and in kit's unclamped copy a long one pushed Cancel and Continue below
|
|
32
|
+
the fold of a short viewport. An AlertDialog does not dismiss on a backdrop
|
|
33
|
+
click, so that was a dead end on a destructive action. Fixed by the move, with
|
|
34
|
+
a guard;
|
|
35
|
+
- `buttonVariants` as the ONE source of button appearance — the destructive
|
|
36
|
+
confirm button is now literally the package's destructive button, including the
|
|
37
|
+
44px coarse-pointer target, not a second hand-written copy of its classes;
|
|
38
|
+
- `PortalContainerProvider`, so a confirm opened inside a popped-out window panel
|
|
39
|
+
renders in THAT window's document without the host passing anything.
|
|
40
|
+
|
|
41
|
+
**Behavior is the kit port, verbatim.** Every prop, default and interaction is
|
|
42
|
+
unchanged; only the chrome underneath is the package's. The suite came across
|
|
43
|
+
whole and grew a third target: `src/confirm-dialog.test.tsx` proves the
|
|
44
|
+
imperative contract across the package boundary, proves the chrome is the
|
|
45
|
+
package's (a guard that fails the moment `bg-black` or `animate-in` comes back),
|
|
46
|
+
and proves the consequence-first copy contract — the consequence renders in full,
|
|
47
|
+
is the dialog's `aria-describedby` description, is never clamped or truncated,
|
|
48
|
+
and never puts the actions out of reach however long it is.
|
|
49
|
+
|
|
50
|
+
### Added
|
|
51
|
+
|
|
52
|
+
- `ConfirmDialog`, `ConfirmDialogProps` — the declarative dialog (use it inline
|
|
53
|
+
when in-dialog `busy` state during async work is meaningful).
|
|
54
|
+
- `ConfirmDialogHost` — mount ONCE near the root of every provider tree.
|
|
55
|
+
|
|
56
|
+
### Not added, on purpose
|
|
57
|
+
|
|
58
|
+
- `confirm()` is **not** re-exported from here. The imperative opener stays in
|
|
59
|
+
`@ai-matrx/kit/confirm-opener`, where it is pure TS with no React and no radix,
|
|
60
|
+
so hundreds of static call sites cost nothing. The host and the opener find each
|
|
61
|
+
other through the opener's `Symbol.for("ai-matrx.kit.confirm-opener-state")`
|
|
62
|
+
globalThis slot — across packages and across module graphs.
|
|
63
|
+
|
|
64
|
+
### Consumer action (C28)
|
|
65
|
+
|
|
66
|
+
Mount `<ConfirmDialogHost />` from **here** and keep calling `confirm()` from
|
|
67
|
+
`@ai-matrx/kit/confirm-opener`. The full repointing diff — host, dialog, and the
|
|
68
|
+
imperative import — is in `@ai-matrx/kit` CHANGELOG § 0.9.0 § Consumer action.
|
|
69
|
+
Take both releases together: design-system >= 0.11.0 with kit >= 0.9.0.
|
|
70
|
+
|
|
3
71
|
## 0.10.0 — 2026-09-07
|
|
4
72
|
|
|
5
73
|
**THE MOTION SWEEP. Ten more primitives were animating with a host plugin this
|
|
@@ -378,9 +446,19 @@ Install `@ai-matrx/design-system@0.7.0` (and `@ai-matrx/tap-target@0.2.0`), then
|
|
|
378
446
|
`alert-dialog.tsx`, `alert.tsx`, `slider.tsx`, `resizable.tsx`,
|
|
379
447
|
`matrx/resizable.tsx`, `radio-group.tsx`, `hover-card.tsx`,
|
|
380
448
|
`toggle-group.tsx`, `toggle.tsx`, `radix-dialog-modal-context.tsx`.
|
|
381
|
-
- No other consumer repo carries a fork of these — verified by census on
|
|
449
|
+
- ~~No other consumer repo carries a fork of these — verified by census on
|
|
382
450
|
2026-09-07 across matrx-extend, matrx-games, aidream `apps/dashboard` and
|
|
383
|
-
`apps/workflow-studio
|
|
451
|
+
`apps/workflow-studio`.~~ 🚨 **WRONG, corrected 2026-09-07.** That census
|
|
452
|
+
swept FOUR repos and there are FIVE: **matrx-local** (`desktop/`, the
|
|
453
|
+
Tauri app) carried its own `tooltip.tsx`, `slider.tsx`, `popover.tsx` and
|
|
454
|
+
`select.tsx` the whole time — plus ten more from the 0.5.0 list below,
|
|
455
|
+
whose Consumer action omitted it for the same reason. The sentence was
|
|
456
|
+
repeated verbatim into census row 19, and every later wave that read it
|
|
457
|
+
kept skipping the repo. matrx-local was adopted on 0.10.0 the same day
|
|
458
|
+
this was found: all seventeen forks swapped, fourteen files deleted, 131
|
|
459
|
+
files repointed, 56 twin-register rows added. **The lesson is the
|
|
460
|
+
sentence, not the repo — a "no other consumer" claim must name the repos
|
|
461
|
+
it swept, and the list must be checked against the actual consumer set.**
|
|
384
462
|
3. **`matrx/resizable.tsx` callers keep their `size` prop** — it is the same
|
|
385
463
|
eight-step scale, now on the one component. Callers of the plain
|
|
386
464
|
`resizable.tsx` get the identical 2px default (`size="sm"`).
|
|
@@ -567,6 +645,11 @@ copy of something this version now ships:
|
|
|
567
645
|
Bind `Card size="lg"` to keep this app's density (Table defaults to md as of 0.5.1).
|
|
568
646
|
- **aidream/apps/workflow-studio** — `src/components/ui/{dialog,dropdown-menu,scroll-area,switch,tabs,textarea}.tsx`.
|
|
569
647
|
Its ScrollArea viewport hack becomes `viewportClassName="[&>div]:!block [&>div]:min-w-0"`.
|
|
648
|
+
- **matrx-local** — `desktop/src/components/ui/{avatar,card,checkbox,dialog,progress,scroll-area,switch,tabs,textarea}.tsx`.
|
|
649
|
+
**Added 2026-09-07**: this repo was missing from the list above (see the
|
|
650
|
+
correction under 0.7.0 Consumer action 2). Adopted on 0.10.0 — `card` and
|
|
651
|
+
`dialog` keep one-prop binding shims for this app's `lg` density and its
|
|
652
|
+
glass surface; everything else re-points straight at the package.
|
|
570
653
|
|
|
571
654
|
Hosts that do not already import the stylesheets must, or the new structural
|
|
572
655
|
rules do nothing:
|
package/README.md
CHANGED
|
@@ -5,9 +5,28 @@ The small, semantic UI foundation shared by AI Matrx React applications — prim
|
|
|
5
5
|
**Controls:** Button, Badge, Label, Separator, the Input family, the Textarea family, Checkbox, Switch, RadioGroup, Slider, Toggle + ToggleGroup, Avatar, Progress.
|
|
6
6
|
**Surfaces:** Card, Table, Tabs, Accordion, Collapsible, ScrollArea, Popover, Tooltip, HoverCard, Sheet, Dialog, AlertDialog, Drawer, BottomSheet + TabbedBottomSheet, Alert, Resizable, Skeleton.
|
|
7
7
|
**Menus:** DropdownMenu, ContextMenu, Command / CommandDialog, Select, CreatablePicker.
|
|
8
|
-
**Composed:** EditableLabel, SegmentedControl, ScoreRing, OverflowToolbar.
|
|
8
|
+
**Composed:** EditableLabel, SegmentedControl, ScoreRing, OverflowToolbar, ConfirmDialog + ConfirmDialogHost.
|
|
9
9
|
**Hooks + utilities:** `useScrollFade`, `useIsMobile`, `usePortalContainer`, `useDialogContainer`, `useDrawerDirection`, `cn`.
|
|
10
10
|
|
|
11
|
+
**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:
|
|
12
|
+
|
|
13
|
+
```tsx
|
|
14
|
+
// app root, once
|
|
15
|
+
import { ConfirmDialogHost } from "@ai-matrx/design-system";
|
|
16
|
+
<ConfirmDialogHost />
|
|
17
|
+
|
|
18
|
+
// anywhere — a thunk, a util, a click handler
|
|
19
|
+
import { confirm } from "@ai-matrx/kit/confirm-opener";
|
|
20
|
+
if (!(await confirm({
|
|
21
|
+
title: "Re-run research",
|
|
22
|
+
description: "This discards the 14 pages you already have (~$50 and 10 minutes) and starts over.",
|
|
23
|
+
variant: "destructive",
|
|
24
|
+
confirmLabel: "Discard and re-run",
|
|
25
|
+
}))) return;
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
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.
|
|
29
|
+
|
|
11
30
|
**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.
|
|
12
31
|
|
|
13
32
|
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.
|