@ai-matrx/design-system 0.60.1 → 0.60.6
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 +41 -0
- package/dist/desktop-lint.mjs +218 -0
- package/dist/desktop.cjs +3565 -0
- package/dist/desktop.cjs.map +1 -0
- package/dist/desktop.css +234 -0
- package/dist/desktop.d.cts +484 -0
- package/dist/desktop.d.ts +484 -0
- package/dist/desktop.js +3533 -0
- package/dist/desktop.js.map +1 -0
- package/dist/index.d.cts +14 -876
- package/dist/index.d.ts +14 -876
- package/dist/organization-picker-mLqIcesx.d.cts +875 -0
- package/dist/organization-picker-mLqIcesx.d.ts +875 -0
- package/package.json +13 -1
package/dist/index.d.cts
CHANGED
|
@@ -5,21 +5,16 @@ import * as class_variance_authority_types from 'class-variance-authority/types'
|
|
|
5
5
|
import { VariantProps } from 'class-variance-authority';
|
|
6
6
|
import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
|
|
7
7
|
import * as AvatarPrimitive from '@radix-ui/react-avatar';
|
|
8
|
-
import
|
|
8
|
+
import { a8 as TooltipContent } from './organization-picker-mLqIcesx.cjs';
|
|
9
|
+
export { A as AppRail, a as AppRailAvatar, b as AppRailAvatarProps, c as AppRailGroup, d as AppRailItem, e as AppRailItemProps, f as AppRailSpacer, C as CanvasColumnDef, g as CanvasLayout, h as CanvasLayoutProps, i as CanvasPanelDef, j as Checkbox, k as CheckboxProps, ad as CheckboxSize, l as Collapsible, m as CollapsibleContent, ae as CollapsibleContentProps, n as CollapsibleTrigger, o as ConfirmDialog, p as ConfirmDialogHost, q as ConfirmDialogProps, r as ContextMenu, af as ContextMenuCheckboxItem, s as ContextMenuContent, ag as ContextMenuContentProps, ah as ContextMenuGroup, t as ContextMenuItem, ai as ContextMenuLabel, aj as ContextMenuPortal, ak as ContextMenuRadioGroup, al as ContextMenuRadioItem, u as ContextMenuSeparator, v as ContextMenuShortcut, am as ContextMenuSub, an as ContextMenuSubContent, ao as ContextMenuSubTrigger, w as ContextMenuTrigger, D as Dialog, x as DialogClose, y as DialogContent, ap as DialogContentPrimitive, aq as DialogContentProps, z as DialogDescription, B as DialogFooter, E as DialogHeader, ar as DialogOverlay, as as DialogPortal, F as DialogTitle, G as DialogTrigger, H as DropdownMenu, I as DropdownMenuCheckboxItem, J as DropdownMenuContent, at as DropdownMenuContentProps, K as DropdownMenuGroup, L as DropdownMenuItem, M as DropdownMenuLabel, au as DropdownMenuPortal, N as DropdownMenuRadioGroup, O as DropdownMenuRadioItem, P as DropdownMenuSeparator, Q as DropdownMenuShortcut, R as DropdownMenuSub, S as DropdownMenuSubContent, T as DropdownMenuSubTrigger, U as DropdownMenuTrigger, V as ModeSwitch, W as ModeSwitchOption, X as ModeSwitchProps, Y as OrganizationMark, av as OrganizationPicker, aw as OrganizationPickerOrganization, ax as OrganizationPickerProps, Z as Popover, _ as PopoverAnchor, $ as PopoverContent, ay as PopoverContentProps, a0 as PopoverTrigger, a1 as Skeleton, az as SkeletonProps, a2 as StatusDot, a3 as StatusDotProps, a4 as StatusTone, a5 as Switch, a6 as SwitchProps, aA as SwitchSize, a7 as Tooltip, a9 as TooltipContentProps, aa as TooltipProvider, aB as TooltipProviderProps, ab as TooltipTrigger, ac as organizationColor, aC as useDialogContainer } from './organization-picker-mLqIcesx.cjs';
|
|
9
10
|
import { ClassValue } from 'clsx';
|
|
10
|
-
import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
|
|
11
11
|
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
12
12
|
import { DialogProps } from '@radix-ui/react-dialog';
|
|
13
|
-
import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
|
|
14
|
-
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
|
|
15
13
|
import * as LabelPrimitive from '@radix-ui/react-label';
|
|
16
|
-
import * as PopoverPrimitive from '@radix-ui/react-popover';
|
|
17
14
|
import * as ProgressPrimitive from '@radix-ui/react-progress';
|
|
18
15
|
import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
|
|
19
16
|
import * as SelectPrimitive from '@radix-ui/react-select';
|
|
20
17
|
import * as SeparatorPrimitive from '@radix-ui/react-separator';
|
|
21
|
-
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
|
|
22
|
-
import * as SwitchPrimitives from '@radix-ui/react-switch';
|
|
23
18
|
import * as TabsPrimitive from '@radix-ui/react-tabs';
|
|
24
19
|
export { MOBILE_BREAKPOINT, useIsMobile } from '@ai-matrx/kit/media-query';
|
|
25
20
|
import * as vaul from 'vaul';
|
|
@@ -31,6 +26,17 @@ import * as SliderPrimitive from '@radix-ui/react-slider';
|
|
|
31
26
|
import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
|
|
32
27
|
import * as TogglePrimitive from '@radix-ui/react-toggle';
|
|
33
28
|
export { TapFeatureProps, TapShortcut, TapSolidTone, TapTargetButton, TapTargetButtonDestructive, TapTargetButtonForGroup, TapTargetButtonGroup, TapTargetButtonOutline, TapTargetButtonProps, TapTargetButtonSolid, TapTargetButtonSolidProps, TapTargetButtonTransparent, TapTargetCopyButton, TapTargetCopyButtonProps, TapTargetLabeled, TapTargetLinkComponent, TapTargetLinkProps, TapTargetSearchGroup, TapTargetSearchGroupProps, TapTargetSearchShortcut, TapTone, enableTapTargetGuard, findTapPlacementWarning, findTapViolation, formatShortcut, getTapTargetLinkComponent, setTapTargetLinkComponent } from './tap-target.cjs';
|
|
29
|
+
import '@radix-ui/react-switch';
|
|
30
|
+
import '@radix-ui/react-checkbox';
|
|
31
|
+
import '@radix-ui/react-tooltip';
|
|
32
|
+
import '@radix-ui/react-dropdown-menu';
|
|
33
|
+
import '@radix-ui/react-context-menu';
|
|
34
|
+
import '@radix-ui/react-popover';
|
|
35
|
+
import '@radix-ui/react-collapsible';
|
|
36
|
+
|
|
37
|
+
declare const NATIVE_TITLE_OPT_OUT_ATTR = "data-native-title";
|
|
38
|
+
/** Install the takeover on `doc`. Returns the release function. */
|
|
39
|
+
declare function acquireTitleTooltips(doc?: Document | undefined): () => void;
|
|
34
40
|
|
|
35
41
|
/**
|
|
36
42
|
* Accordion — the last primitive the fleet was still standing in for.
|
|
@@ -414,81 +420,8 @@ declare const CardAction: React.ForwardRefExoticComponent<React.HTMLAttributes<H
|
|
|
414
420
|
declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
415
421
|
declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
416
422
|
|
|
417
|
-
/**
|
|
418
|
-
* Checkbox — Radix checkbox, and the indeterminate ruling that came with it.
|
|
419
|
-
*
|
|
420
|
-
* RADIX RENDERS THE INDICATOR FOR BOTH `checked` AND `"indeterminate"`. The
|
|
421
|
-
* stock shadcn body puts a full check inside it either way, so a half-selected
|
|
422
|
-
* "select all" tells the user every row is selected — a screen stating
|
|
423
|
-
* something false. The two states get different glyphs here, always.
|
|
424
|
-
*
|
|
425
|
-
* `size` carries the two boxes the hosts had forked into: matrx-frontend's
|
|
426
|
-
* dense 14px control and the stock 16px one.
|
|
427
|
-
*/
|
|
428
|
-
|
|
429
|
-
type CheckboxSize = "sm" | "md";
|
|
430
|
-
interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {
|
|
431
|
-
/** Box size. Default `md` (the stock 16px control); `sm` is the dense 14px one. */
|
|
432
|
-
size?: CheckboxSize;
|
|
433
|
-
}
|
|
434
|
-
declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;
|
|
435
|
-
|
|
436
423
|
declare function cn(...inputs: ClassValue[]): string;
|
|
437
424
|
|
|
438
|
-
/**
|
|
439
|
-
* Collapsible — Radix's, with the one thing Radix does not ship: the open/close
|
|
440
|
-
* transition.
|
|
441
|
-
*
|
|
442
|
-
* THE ROOT RENDERS UNCONDITIONALLY — no mount gate. The matrx-frontend
|
|
443
|
-
* original carried the note that earned this line: a wrapper used to defer
|
|
444
|
-
* rendering until after hydration on the theory that "Radix generates dynamic
|
|
445
|
-
* aria-controls ids that differ between SSR and client". That was false —
|
|
446
|
-
* Radix ids come from React's SSR-stable `useId` — and the gate was actively
|
|
447
|
-
* harmful, because a Collapsible's Trigger wraps ALWAYS-VISIBLE content, so
|
|
448
|
-
* `return null` deleted it from SSR and from the first client paint.
|
|
449
|
-
*
|
|
450
|
-
* THE TRANSITION IS PACKAGE-OWNED (census row 19f, the tail of 19c). Until
|
|
451
|
-
* 0.9.0 this file was a bare re-export and the package shipped NO transition,
|
|
452
|
-
* so every consumer invented its own — and two of them invented it wrong.
|
|
453
|
-
* `matrx-collapsible.tsx` and `enhanced-collapsible.tsx` put
|
|
454
|
-
* `animate-accordion-down`/`-up` on a COLLAPSIBLE panel: those keyframes
|
|
455
|
-
* interpolate to `--radix-ACCORDION-content-height`, a variable Radix never
|
|
456
|
-
* publishes on a collapsible, so they had never animated once — silently, with
|
|
457
|
-
* no error, for as long as they existed. Six other matrx-frontend components
|
|
458
|
-
* used host-only `animate-slide-down`/`-up` keyframes that WERE keyed
|
|
459
|
-
* correctly — and worked in exactly one app in the fleet, because the
|
|
460
|
-
* keyframes lived in that app's `globals.css`. Both shapes are the same C26
|
|
461
|
-
* failure: a component whose motion depends on a contract the host has to
|
|
462
|
-
* happen to hold. `.matrx-collapsible-content` in `styles.css` ends it — keyed
|
|
463
|
-
* off Radix's runtime `--radix-collapsible-content-height`, honouring
|
|
464
|
-
* `prefers-reduced-motion`, shipped in the tarball.
|
|
465
|
-
*
|
|
466
|
-
* Nothing else here is restyled: the trigger and the panel's own padding are
|
|
467
|
-
* the host's to dress, and every fork agreed on that. Unlike `AccordionContent`
|
|
468
|
-
* this component does NOT wrap children in a padding div — collapsibles in the
|
|
469
|
-
* fleet pad their own bodies, and inserting a box would move every one of them.
|
|
470
|
-
*/
|
|
471
|
-
|
|
472
|
-
declare const Collapsible: React.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleProps & React.RefAttributes<HTMLDivElement>>;
|
|
473
|
-
declare const CollapsibleTrigger: React.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
474
|
-
interface CollapsibleContentProps extends React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.CollapsibleContent> {
|
|
475
|
-
/**
|
|
476
|
-
* Animate the height on open/close. Default `true`.
|
|
477
|
-
*
|
|
478
|
-
* Pass `false` for the rare panel that must not clip or must not move: the
|
|
479
|
-
* animated panel carries `overflow-hidden` (a height transition without it
|
|
480
|
-
* spills the body over whatever is below), so a panel with a child that
|
|
481
|
-
* deliberately overflows its bounds — a non-portalled popover, a sticky
|
|
482
|
-
* column header — opts out here rather than fighting the class. Opting out
|
|
483
|
-
* gives you bare Radix: instant open, no clipping, no keyframes.
|
|
484
|
-
*
|
|
485
|
-
* `prefers-reduced-motion` is NOT this prop's job; the stylesheet already
|
|
486
|
-
* drops the animation for those users while keeping the clipping.
|
|
487
|
-
*/
|
|
488
|
-
animated?: boolean;
|
|
489
|
-
}
|
|
490
|
-
declare const CollapsibleContent: React.ForwardRefExoticComponent<CollapsibleContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
491
|
-
|
|
492
425
|
/**
|
|
493
426
|
* Command — ported verbatim from matrx-frontend `components/ui/command.tsx`.
|
|
494
427
|
*
|
|
@@ -595,174 +528,6 @@ declare const CommandShortcut: {
|
|
|
595
528
|
displayName: string;
|
|
596
529
|
};
|
|
597
530
|
|
|
598
|
-
/**
|
|
599
|
-
* ConfirmDialog — the `window.confirm` replacement, declarative half.
|
|
600
|
-
*
|
|
601
|
-
* WHY IT LIVES HERE AND NOT IN `@ai-matrx/kit` (census row 19i, decided by the
|
|
602
|
-
* package-graph ruling of 2026-09-07, on the row-20a Tooltip precedent).
|
|
603
|
-
*
|
|
604
|
-
* kit shipped this dialog with its own inlined AlertDialog, its own inlined
|
|
605
|
-
* button class strings, a hardcoded 80%-opaque black scrim, and
|
|
606
|
-
* `data-[state=open]:animate-in … zoom-in-95 … slide-in-from-top-[48%]` —
|
|
607
|
-
* host-plugin utilities `tailwindcss-animate`/`tw-animate-css` supply and a
|
|
608
|
-
* package cannot ship. kit ships NO stylesheet at all, so in three of the four
|
|
609
|
-
* consumers the most consequential surface in the app (the one standing
|
|
610
|
-
* between a user and a destroyed thing) appeared with no animation, no error,
|
|
611
|
-
* and a scrim that ignored the theme. kit could not import the fix:
|
|
612
|
-
* `@ai-matrx/design-system` depends on `@ai-matrx/kit`, so importing back is a
|
|
613
|
-
* cycle; giving kit its own sheet would invent a second required-CSS contract
|
|
614
|
-
* no consumer performs (the C26 silent host contract, one layer down).
|
|
615
|
-
*
|
|
616
|
-
* The resolution is the one row 20a already proved: the surface moves to the
|
|
617
|
-
* package that owns the surface. This file is built on THIS package's
|
|
618
|
-
* `AlertDialog` — so it inherits, for free and forever:
|
|
619
|
-
*
|
|
620
|
-
* - the package motion layer (`matrx-motion-overlay` / `matrx-motion-dialog`),
|
|
621
|
-
* whose rules ship in `styles.css` and are proven present in the tarball;
|
|
622
|
-
* - `--matrx-overlay-scrim`, a token that answers to the host's theme,
|
|
623
|
-
* instead of an opaque black literal;
|
|
624
|
-
* - AlertDialog ruling 3 — clamped to `max-h-[85dvh]`, scrolling inside
|
|
625
|
-
* itself, with a sticky footer. **This is what makes the consequence-first
|
|
626
|
-
* copy law survivable**: a confirmation that names everything it is about
|
|
627
|
-
* to destroy can be long, and in kit's copy a long one pushed Cancel and
|
|
628
|
-
* Continue below the fold of a short viewport with no backdrop dismissal —
|
|
629
|
-
* a dead end on a destructive action;
|
|
630
|
-
* - `buttonVariants` as the ONE source of button appearance, including the
|
|
631
|
-
* 44px coarse-pointer target;
|
|
632
|
-
* - `PortalContainerProvider`, so a dialog opened inside a popped-out window
|
|
633
|
-
* panel renders in THAT window's document.
|
|
634
|
-
*
|
|
635
|
-
* kit keeps `./confirm-opener` — the pure, React-free imperative `confirm()`
|
|
636
|
-
* and its `globalThis`-slotted host registry — and re-exports nothing of this.
|
|
637
|
-
* Consumers mount `<ConfirmDialogHost />` from here and call `confirm()` from
|
|
638
|
-
* there. See `confirm-host.tsx` for the join.
|
|
639
|
-
*
|
|
640
|
-
* BEHAVIOR IS THE KIT PORT, VERBATIM. Every prop, default and interaction is
|
|
641
|
-
* unchanged; only the chrome underneath it is the package's.
|
|
642
|
-
*
|
|
643
|
-
* Pattern: hold the pending target in state, render `<ConfirmDialog />` once at
|
|
644
|
-
* the bottom of the component, and open it by setting the target. When busy
|
|
645
|
-
* state is meaningful (a network delete that should hold the dialog open with a
|
|
646
|
-
* spinner), use THIS component inline; the imperative `confirm()` closes
|
|
647
|
-
* immediately on click.
|
|
648
|
-
*/
|
|
649
|
-
|
|
650
|
-
interface ConfirmDialogProps {
|
|
651
|
-
open: boolean;
|
|
652
|
-
onOpenChange: (open: boolean) => void;
|
|
653
|
-
title: React.ReactNode;
|
|
654
|
-
/**
|
|
655
|
-
* THE CONSEQUENCE. Per the platform's destructive-and-expensive-actions law,
|
|
656
|
-
* a confirmation must name what is lost, what is duplicated, and/or what it
|
|
657
|
-
* costs — "Are you sure?" is not a confirmation. This renders as the dialog's
|
|
658
|
-
* accessible description, so a screen-reader user is told the consequence
|
|
659
|
-
* too, and it is never clamped or truncated.
|
|
660
|
-
*/
|
|
661
|
-
description?: React.ReactNode | undefined;
|
|
662
|
-
/**
|
|
663
|
-
* Rich body rendered between the header and the footer. Use it for
|
|
664
|
-
* supplementary or interactive content that is not part of the dialog's
|
|
665
|
-
* accessible consequence description.
|
|
666
|
-
*/
|
|
667
|
-
content?: React.ReactNode | undefined;
|
|
668
|
-
/** Extra classes for the dialog content (e.g. a wider max-w for diffs). */
|
|
669
|
-
contentClassName?: string | undefined;
|
|
670
|
-
confirmLabel?: string | undefined;
|
|
671
|
-
/**
|
|
672
|
-
* `null` hides the cancel button entirely — for acknowledge-only dialogs
|
|
673
|
-
* where there is nothing to cancel. Anything else labels it.
|
|
674
|
-
*/
|
|
675
|
-
cancelLabel?: string | null | undefined;
|
|
676
|
-
variant?: "default" | "destructive" | undefined;
|
|
677
|
-
busy?: boolean | undefined;
|
|
678
|
-
/**
|
|
679
|
-
* Blocks confirming without pretending work is in flight. For a dialog whose
|
|
680
|
-
* `content` asks the user something the action cannot proceed without — the
|
|
681
|
-
* choice is missing, not loading — `busy` would show a misleading spinner.
|
|
682
|
-
*/
|
|
683
|
-
confirmDisabled?: boolean | undefined;
|
|
684
|
-
/**
|
|
685
|
-
* The question is not answerable yet — Confirm is ABSENT, not disabled (a
|
|
686
|
-
* control is absent or honest, never dead). The body carries its own loading
|
|
687
|
-
* state; Cancel stays. Set by `ConfirmDialogHost` while `ConfirmOptions.ready`
|
|
688
|
-
* is pending (0.54.0).
|
|
689
|
-
*/
|
|
690
|
-
confirmHeld?: boolean | undefined;
|
|
691
|
-
/**
|
|
692
|
-
* Explicit portal target. Default (undefined): the container injected by
|
|
693
|
-
* `PortalContainerProvider`, else `document.body`. Hosts with retargeting
|
|
694
|
-
* needs (a popped-out browser window whose dialog must render in THAT
|
|
695
|
-
* window's document) may still pass the element directly.
|
|
696
|
-
*/
|
|
697
|
-
portalContainer?: HTMLElement | null | undefined;
|
|
698
|
-
onConfirm: () => void | Promise<void>;
|
|
699
|
-
}
|
|
700
|
-
/**
|
|
701
|
-
* Drop-in replacement for `window.confirm`. Use this anywhere you would
|
|
702
|
-
* otherwise reach for a browser-level confirm dialog.
|
|
703
|
-
*/
|
|
704
|
-
declare function ConfirmDialog({ open, onOpenChange, title, description, content, contentClassName, confirmLabel, cancelLabel, variant, busy, confirmDisabled, confirmHeld, portalContainer, onConfirm, }: ConfirmDialogProps): React.JSX.Element;
|
|
705
|
-
|
|
706
|
-
declare function ConfirmDialogHost(): React.JSX.Element;
|
|
707
|
-
|
|
708
|
-
/**
|
|
709
|
-
* ContextMenu — the right-click menu primitive.
|
|
710
|
-
*
|
|
711
|
-
* THE ROOT RENDERS UNCONDITIONALLY — no hydration mount gate. The gate a
|
|
712
|
-
* matrx-frontend wrapper once carried ("Radix generates dynamic aria-controls
|
|
713
|
-
* ids that differ between SSR and client") was false twice over: a CLOSED
|
|
714
|
-
* `ContextMenuTrigger` renders only `data-state` / `data-disabled` and emits
|
|
715
|
-
* no id at all, so there was never a mismatch to defend against. And the gate
|
|
716
|
-
* was actively harmful: the Trigger wraps ALWAYS-VISIBLE content, so `return
|
|
717
|
-
* null` deleted the wrapped subtree from the server render and the first
|
|
718
|
-
* client render — around a list row, that means the list paints EMPTY and
|
|
719
|
-
* fills in after hydration. Gating the Root would additionally orphan any
|
|
720
|
-
* Trigger rendered beneath it.
|
|
721
|
-
*
|
|
722
|
-
* That history is exactly why this belongs in the package: the same repo had
|
|
723
|
-
* already accumulated two copies of this wrapper, one gated and one not, with
|
|
724
|
-
* the CORRECT one sitting unused beside the defective one.
|
|
725
|
-
*
|
|
726
|
-
* This is the PRIMITIVE only. A host's actual right-click menu SYSTEM — the
|
|
727
|
-
* sections, the copy/export/convert actions, the surface registry — composes
|
|
728
|
-
* these parts and stays host-owned; nothing here knows what an action is.
|
|
729
|
-
*
|
|
730
|
-
* Portalling goes through the package's `usePortalContainer` seam so a menu
|
|
731
|
-
* raised inside a Dialog mounts inside it; an explicit `container` wins.
|
|
732
|
-
*/
|
|
733
|
-
|
|
734
|
-
declare const ContextMenu: React.FC<ContextMenuPrimitive.ContextMenuProps>;
|
|
735
|
-
declare const ContextMenuTrigger: React.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuTriggerProps & React.RefAttributes<HTMLSpanElement>>;
|
|
736
|
-
declare const ContextMenuGroup: React.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
|
|
737
|
-
declare const ContextMenuPortal: React.FC<ContextMenuPrimitive.ContextMenuPortalProps>;
|
|
738
|
-
declare const ContextMenuSub: React.FC<ContextMenuPrimitive.ContextMenuSubProps>;
|
|
739
|
-
declare const ContextMenuRadioGroup: React.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
|
|
740
|
-
declare const ContextMenuSubTrigger: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
741
|
-
inset?: boolean;
|
|
742
|
-
} & React.RefAttributes<HTMLDivElement>>;
|
|
743
|
-
/** Portalled like its parent, so it opens BESIDE it — see `DropdownMenuSubContent` for why. */
|
|
744
|
-
declare const ContextMenuSubContent: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
745
|
-
container?: HTMLElement | null;
|
|
746
|
-
} & React.RefAttributes<HTMLDivElement>>;
|
|
747
|
-
interface ContextMenuContentProps extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content> {
|
|
748
|
-
/** Explicit portal target; wins over the injected container. */
|
|
749
|
-
container?: HTMLElement | null;
|
|
750
|
-
}
|
|
751
|
-
declare const ContextMenuContent: React.ForwardRefExoticComponent<ContextMenuContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
752
|
-
declare const ContextMenuItem: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
753
|
-
inset?: boolean;
|
|
754
|
-
} & React.RefAttributes<HTMLDivElement>>;
|
|
755
|
-
declare const ContextMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
756
|
-
declare const ContextMenuRadioItem: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
757
|
-
declare const ContextMenuLabel: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
758
|
-
inset?: boolean;
|
|
759
|
-
} & React.RefAttributes<HTMLDivElement>>;
|
|
760
|
-
declare const ContextMenuSeparator: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
761
|
-
declare const ContextMenuShortcut: {
|
|
762
|
-
({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
|
|
763
|
-
displayName: string;
|
|
764
|
-
};
|
|
765
|
-
|
|
766
531
|
/** Structural stand-in for the host's `LucideIcon` in `footerActions`. */
|
|
767
532
|
type PickerIcon = ComponentType<{
|
|
768
533
|
className?: string;
|
|
@@ -866,131 +631,6 @@ interface CreatablePickerProps {
|
|
|
866
631
|
}
|
|
867
632
|
declare function CreatablePicker({ value, options, onSelect, placeholder, searchPlaceholder, noun, onCreate, onCreateRequiresMore, disabled, loading, className, triggerClassName, emptyLabel, ariaLabel, lockedNote, lockedAction, createExtra, manageAction, footerActions, renderSelected, size, }: CreatablePickerProps): React.JSX.Element;
|
|
868
633
|
|
|
869
|
-
/**
|
|
870
|
-
* Dialog — the modal surface, carrying every ruling the host forks paid for.
|
|
871
|
-
*
|
|
872
|
-
* Four hosts shipped four dialogs. Three were the stock shadcn body: a
|
|
873
|
-
* fixed-size centered card with `overflow: visible`. matrx-frontend's had been
|
|
874
|
-
* hardened, incident by incident, and those hardenings are the reason this
|
|
875
|
-
* component belongs in the package rather than being copied a fifth time:
|
|
876
|
-
*
|
|
877
|
-
* 1. THE ROOT RENDERS UNCONDITIONALLY — no hydration mount gate. The gate a
|
|
878
|
-
* wrapper once carried ("Radix ids differ between SSR and client") was
|
|
879
|
-
* false — Radix ids come from React's SSR-stable `useId` — and it deleted
|
|
880
|
-
* the always-visible Trigger from SSR and the first client paint.
|
|
881
|
-
*
|
|
882
|
-
* 2. THE DIALOG IS CLAMPED TO THE VIEWPORT AND SCROLLS INSIDE ITSELF. Proven
|
|
883
|
-
* live: an admin "Create Category" dialog rendered 851px tall in a 657px
|
|
884
|
-
* viewport with `overflow-y: visible`, so its Create button sat below the
|
|
885
|
-
* fold, unreachable. The only way out was a backdrop click — which
|
|
886
|
-
* dismisses WITHOUT writing, and is indistinguishable from a silent save
|
|
887
|
-
* failure. `max-h-[85dvh] overflow-y-auto` is the cap.
|
|
888
|
-
*
|
|
889
|
-
* 3. THE PRIMARY ACTION IS ALWAYS PRESSABLE — AND NEVER ON TOP OF THE BODY.
|
|
890
|
-
* `DialogFooter` is sticky and bleeds to the card's edges using
|
|
891
|
-
* `--dialog-pad`. Until 0.11.3 that bleed was a NEGATIVE BLOCK MARGIN,
|
|
892
|
-
* which sticky clamps: the footer was dragged up over the row above it by
|
|
893
|
-
* `--dialog-pad` minus the card gap. The card now RESERVES the footer's
|
|
894
|
-
* block size instead (`.matrx-dialog-card` in `styles.css` hands its bottom
|
|
895
|
-
* padding to the footer), so scrolled content never shows through beneath
|
|
896
|
-
* the actions AND the footer never covers the row above it. Outside a
|
|
897
|
-
* DialogContent both variables are unset, the padding falls back to `0px`,
|
|
898
|
-
* and the footer is the plain row it always was.
|
|
899
|
-
*
|
|
900
|
-
* 4. ON MOBILE THE SAME DIALOG IS A BOTTOM SHEET — full width, bottom
|
|
901
|
-
* anchored, height-capped, internally scrollable, safe-area padded. Opt out
|
|
902
|
-
* with `mobileSheet={false}` only for the rare surface that must stay
|
|
903
|
-
* centered (a tiny spinner). The sheet geometry is re-asserted AFTER the
|
|
904
|
-
* caller's className so a desktop `max-w-2xl` cannot un-fullscreen it.
|
|
905
|
-
*
|
|
906
|
-
* 5. AN UNTITLED DIALOG IS STILL ACCESSIBLE. Radix warns (correctly) that
|
|
907
|
-
* every dialog needs a title; rather than let hosts ship the warning, a
|
|
908
|
-
* visually-hidden title is injected when the tree has none, and
|
|
909
|
-
* `aria-describedby` is dropped when there is no description rather than
|
|
910
|
-
* pointing at nothing.
|
|
911
|
-
*
|
|
912
|
-
* 6. ON DESKTOP A DIALOG IS A WINDOW, NOT A WALL (0.38.0, Arman 2026-09-23:
|
|
913
|
-
* "none of the built-in page ai integrations are accessible because the
|
|
914
|
-
* page is totally blocked"). Unless the caller passes `modal`, a desktop
|
|
915
|
-
* dialog does not block the page: no overlay, the page, the Agents menu,
|
|
916
|
-
* the assist dock and right-click AI stay usable beside it. It behaves like
|
|
917
|
-
* a window: a click outside never closes it (`dismissOnOutsideClick` opts a
|
|
918
|
-
* quick picker back in), Escape closes it only while focus is inside it
|
|
919
|
-
* (Escape in the page belongs to the page), and its `DialogHeader` drags
|
|
920
|
-
* it, clamped on screen, double-click to recenter. On a phone it stays the
|
|
921
|
-
* blocking bottom sheet — nothing useful sits behind a sheet. Confirmations
|
|
922
|
-
* are `AlertDialog`, a different component, and stay blocking. This is a
|
|
923
|
-
* LIGHT window: the host's heavy window manager (tray, persistence) is a
|
|
924
|
-
* separate system and must not be pulled into every dialog.
|
|
925
|
-
*
|
|
926
|
-
* SEAM INVERSIONS. The host original resolved its portal target through
|
|
927
|
-
* app-shaped hooks (a popped-out window-panel body). Here that is the
|
|
928
|
-
* package's `PortalContainerProvider` seam, with an explicit `container` prop
|
|
929
|
-
* keeping top priority. And DialogContent PROVIDES that seam to its own
|
|
930
|
-
* children, so a Popover or menu opened inside a dialog portals INTO the
|
|
931
|
-
* dialog — staying inside the scroll shard, where its wheel events work.
|
|
932
|
-
* `useDialogContainer` exposes the same element for host code that needs it.
|
|
933
|
-
*/
|
|
934
|
-
|
|
935
|
-
declare const Dialog: {
|
|
936
|
-
({ children, ...props }: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>): React.JSX.Element;
|
|
937
|
-
displayName: string;
|
|
938
|
-
};
|
|
939
|
-
declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
940
|
-
declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
|
|
941
|
-
/**
|
|
942
|
-
* Portal-seam-aware DialogPortal. An explicit `container` always wins; with
|
|
943
|
-
* none, the injected `PortalContainerProvider` value decides; with neither,
|
|
944
|
-
* Radix's `document.body`.
|
|
945
|
-
*/
|
|
946
|
-
declare const DialogPortal: {
|
|
947
|
-
({ container, ...props }: Omit<React.ComponentPropsWithoutRef<typeof DialogPrimitive.Portal>, "container"> & {
|
|
948
|
-
/** `undefined` → use the injected container; `null` → force document.body. */
|
|
949
|
-
container?: HTMLElement | null | undefined;
|
|
950
|
-
}): React.JSX.Element;
|
|
951
|
-
displayName: string;
|
|
952
|
-
};
|
|
953
|
-
/** The DialogContent element, for host code that portals into the dialog. */
|
|
954
|
-
declare const useDialogContainer: () => HTMLElement | null;
|
|
955
|
-
declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
956
|
-
/**
|
|
957
|
-
* Unstyled, non-portalling Content for custom dialog layouts. Preserves Radix
|
|
958
|
-
* focus/background behavior and derives `aria-modal` from the Root.
|
|
959
|
-
*/
|
|
960
|
-
declare const DialogContentPrimitive: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
961
|
-
interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
|
|
962
|
-
/**
|
|
963
|
-
* Windowed (non-blocking) dialogs never close from a click outside them —
|
|
964
|
-
* the person is reaching for the page or an AI control beside the window.
|
|
965
|
-
* Pass `true` for a quick picker that should close when the person clicks
|
|
966
|
-
* away. Ignored on a blocking dialog, which keeps Radix's behaviour.
|
|
967
|
-
*/
|
|
968
|
-
dismissOnOutsideClick?: boolean;
|
|
969
|
-
/** Render as a bottom sheet below the mobile breakpoint. Default `true`. */
|
|
970
|
-
mobileSheet?: boolean;
|
|
971
|
-
/** Render the built-in close control. Default `true`. */
|
|
972
|
-
showCloseButton?: boolean;
|
|
973
|
-
/** Explicit portal target; wins over the injected container. */
|
|
974
|
-
container?: HTMLElement | null;
|
|
975
|
-
/**
|
|
976
|
-
* Package-owned open/close motion. Default `true`. Pass `false` for a
|
|
977
|
-
* surface that must appear instantly. It is NOT the reduced-motion switch;
|
|
978
|
-
* `styles.css` already honours `prefers-reduced-motion`.
|
|
979
|
-
*/
|
|
980
|
-
animated?: boolean;
|
|
981
|
-
}
|
|
982
|
-
declare const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
983
|
-
declare const DialogHeader: {
|
|
984
|
-
({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
|
|
985
|
-
displayName: string;
|
|
986
|
-
};
|
|
987
|
-
declare const DialogFooter: {
|
|
988
|
-
({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
|
|
989
|
-
displayName: string;
|
|
990
|
-
};
|
|
991
|
-
declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
|
|
992
|
-
declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
|
|
993
|
-
|
|
994
634
|
/**
|
|
995
635
|
* THE FRONT-MOST LAYER — one signal every floating layer shares, so the layer
|
|
996
636
|
* the person used last is the one on top.
|
|
@@ -1065,70 +705,6 @@ declare const FloatingLayer: React.ForwardRefExoticComponent<{
|
|
|
1065
705
|
children: React.ReactElement;
|
|
1066
706
|
} & React.RefAttributes<HTMLElement>>;
|
|
1067
707
|
|
|
1068
|
-
/**
|
|
1069
|
-
* DropdownMenu — Radix dropdown with two behaviours the stock body lacks.
|
|
1070
|
-
*
|
|
1071
|
-
* 1. THE ROOT RENDERS UNCONDITIONALLY — no hydration mount gate. A wrapper in
|
|
1072
|
-
* matrx-frontend once deferred rendering until after hydration on a false
|
|
1073
|
-
* premise (Radix ids come from React's SSR-stable `useId`), which deleted
|
|
1074
|
-
* the always-visible trigger — buttons, `…` menus — from SSR and the first
|
|
1075
|
-
* client paint.
|
|
1076
|
-
*
|
|
1077
|
-
* 2. A LONG MENU SCROLLS INSTEAD OF GROWING OFF-SCREEN. Content and SubContent
|
|
1078
|
-
* cap at `--radix-dropdown-menu-content-available-height` — the space Radix
|
|
1079
|
-
* actually measured between the trigger and the viewport edge — and scroll
|
|
1080
|
-
* past it. Without the cap a menu longer than the viewport puts its last
|
|
1081
|
-
* items where no pointer can reach them, and on a short window that can be
|
|
1082
|
-
* the only exit from the surface.
|
|
1083
|
-
*
|
|
1084
|
-
* Portalling goes through the package's `usePortalContainer` seam, so a menu
|
|
1085
|
-
* opened inside a Dialog mounts INSIDE the dialog (staying in the scroll
|
|
1086
|
-
* shard, where its wheel events work) instead of at `document.body`. An
|
|
1087
|
-
* explicit `container` prop still wins.
|
|
1088
|
-
*
|
|
1089
|
-
* Icons are the package's inlined SVGs (C19) — no icon-library dependency.
|
|
1090
|
-
*/
|
|
1091
|
-
|
|
1092
|
-
declare const DropdownMenu: React.FC<DropdownMenuPrimitive.DropdownMenuProps>;
|
|
1093
|
-
declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
1094
|
-
declare const DropdownMenuGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
|
|
1095
|
-
declare const DropdownMenuPortal: React.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
|
|
1096
|
-
declare const DropdownMenuSub: React.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
|
|
1097
|
-
declare const DropdownMenuRadioGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
|
|
1098
|
-
declare const DropdownMenuSubTrigger: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
1099
|
-
inset?: boolean;
|
|
1100
|
-
} & React.RefAttributes<HTMLDivElement>>;
|
|
1101
|
-
/**
|
|
1102
|
-
* A SUBMENU OPENS BESIDE ITS PARENT, NEVER ON TOP OF IT (merged-grid review 2, C1: "nested
|
|
1103
|
-
* submenus overlap the parent menu"). The submenu was drawn INSIDE the parent's surface, and that
|
|
1104
|
-
* surface's entry animation leaves a `transform` on it — which makes the parent the containing
|
|
1105
|
-
* block of the submenu's `position: fixed`. Radix measured the submenu's place in viewport
|
|
1106
|
-
* coordinates and the browser applied them from the parent's corner, so it landed over the parent
|
|
1107
|
-
* (and was clipped by the parent's scroll box). Portalled like every other surface, through the
|
|
1108
|
-
* same container seam, it sits beside its trigger as Radix placed it.
|
|
1109
|
-
*/
|
|
1110
|
-
declare const DropdownMenuSubContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
1111
|
-
container?: HTMLElement | null;
|
|
1112
|
-
} & React.RefAttributes<HTMLDivElement>>;
|
|
1113
|
-
interface DropdownMenuContentProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> {
|
|
1114
|
-
/** Explicit portal target; wins over the injected container. */
|
|
1115
|
-
container?: HTMLElement | null;
|
|
1116
|
-
}
|
|
1117
|
-
declare const DropdownMenuContent: React.ForwardRefExoticComponent<DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
1118
|
-
declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
1119
|
-
inset?: boolean;
|
|
1120
|
-
} & React.RefAttributes<HTMLDivElement>>;
|
|
1121
|
-
declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
1122
|
-
declare const DropdownMenuRadioItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
1123
|
-
declare const DropdownMenuLabel: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
1124
|
-
inset?: boolean;
|
|
1125
|
-
} & React.RefAttributes<HTMLDivElement>>;
|
|
1126
|
-
declare const DropdownMenuSeparator: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
1127
|
-
declare const DropdownMenuShortcut: {
|
|
1128
|
-
({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
|
|
1129
|
-
displayName: string;
|
|
1130
|
-
};
|
|
1131
|
-
|
|
1132
708
|
type EditableLabelCommitMode = "optimistic" | "await";
|
|
1133
709
|
type EditableLabelActivation = "click" | "doubleClick" | "controlled";
|
|
1134
710
|
interface EditableLabelProps {
|
|
@@ -1283,71 +859,6 @@ interface OverflowToolbarProps {
|
|
|
1283
859
|
}
|
|
1284
860
|
declare function OverflowToolbar({ actions, leading, overflowAriaLabel, className, renderOverflowMenu, renderTooltip, }: OverflowToolbarProps): React__default.JSX.Element;
|
|
1285
861
|
|
|
1286
|
-
/**
|
|
1287
|
-
* Popover — ported verbatim from matrx-frontend `components/ui/popover.tsx`.
|
|
1288
|
-
*
|
|
1289
|
-
* Seam inversion: the host's `useNestedPortalContainer` (dialog/popout aware)
|
|
1290
|
-
* becomes the injected `PortalContainerProvider` seam (`portal-container.tsx`);
|
|
1291
|
-
* the explicit `container` prop keeps top priority, exactly as before.
|
|
1292
|
-
*
|
|
1293
|
-
* THE ROOT RENDERS UNCONDITIONALLY — no mount gate. This wrapper used to defer
|
|
1294
|
-
* rendering until after hydration ("Radix generates dynamic aria-controls ids
|
|
1295
|
-
* that differ between SSR and client"), and that justification was false:
|
|
1296
|
-
* Radix ids come from React's SSR-stable `useId` (verified against
|
|
1297
|
-
* @radix-ui/react-popover 1.1.17 / react-id 1.1.2). The gate was actively
|
|
1298
|
-
* harmful — the Trigger wraps ALWAYS-VISIBLE content, so `return null`
|
|
1299
|
-
* deleted it from SSR and the first client paint.
|
|
1300
|
-
*/
|
|
1301
|
-
|
|
1302
|
-
declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
|
|
1303
|
-
declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
1304
|
-
declare const PopoverAnchor: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
|
|
1305
|
-
interface PopoverContentProps extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> {
|
|
1306
|
-
/** Explicit portal target; wins over the injected container. */
|
|
1307
|
-
container?: HTMLElement | null;
|
|
1308
|
-
/**
|
|
1309
|
-
* Package-owned open/close motion. Default `true`. Pass `false` for a
|
|
1310
|
-
* surface that must appear instantly — a picker re-anchoring while the user
|
|
1311
|
-
* types, a measurement pass. It is NOT the reduced-motion switch;
|
|
1312
|
-
* `styles.css` already honours `prefers-reduced-motion`.
|
|
1313
|
-
*/
|
|
1314
|
-
animated?: boolean;
|
|
1315
|
-
/**
|
|
1316
|
-
* HOW WIDE THE POPOVER IS ALLOWED TO BE, and it is the SYSTEM that decides — never a
|
|
1317
|
-
* surface pasting its own `w-64` over the default (lane FIX-14, 2026-09-22).
|
|
1318
|
-
*
|
|
1319
|
-
* `"fixed"` (default) is the historical `w-72`: right for a menu of short, known
|
|
1320
|
-
* labels, where a ragged edge would look broken.
|
|
1321
|
-
*
|
|
1322
|
-
* `"content"` is for a popover whose whole job is to SHOW SOMETHING THE SYSTEM DID
|
|
1323
|
-
* NOT CHOOSE — a person's name, a record's title, a row the user is about to
|
|
1324
|
-
* create. The relation picker offered
|
|
1325
|
-
*
|
|
1326
|
-
* Create “Marisol Okonkwo — 418 Calle Pu
|
|
1327
|
-
*
|
|
1328
|
-
* inside a 16rem box, cut mid-word, on the one control that exists to show the name
|
|
1329
|
-
* being created. A fixed width cannot be right for content of unknown length, so
|
|
1330
|
-
* this one grows to its content between an honest floor and an honest ceiling:
|
|
1331
|
-
*
|
|
1332
|
-
* · at least the trigger's own width, and at least 20rem — the width Airtable's and
|
|
1333
|
-
* Notion's link-record pickers settle on, and wide enough that an ordinary
|
|
1334
|
-
* "name — street, town" fits on one line;
|
|
1335
|
-
* · at most 28rem, and never wider than the viewport less a 1rem gutter each side,
|
|
1336
|
-
* so it still fits a 375px phone with nothing running off the screen. The floor is
|
|
1337
|
-
* clamped by the same gutter, so on a very narrow screen the ceiling still wins.
|
|
1338
|
-
*
|
|
1339
|
-
* Beyond that ceiling the CONTENT truncates with an ellipsis and carries a `title`.
|
|
1340
|
-
* Growing, then ellipsis — never a mid-word cut.
|
|
1341
|
-
*
|
|
1342
|
-
* BOTH modes keep the phone gutter (2026-09-26): the box is never wider than the
|
|
1343
|
-
* viewport less 1rem each side, and Radix keeps it `collisionPadding` (16px) off every
|
|
1344
|
-
* screen edge. Measured at 375px before this: `w-72`/`w-80` callers landed flush on
|
|
1345
|
-
* the right edge (55→375) because collision padding was 0.
|
|
1346
|
-
*/
|
|
1347
|
-
sizing?: "fixed" | "content";
|
|
1348
|
-
}
|
|
1349
|
-
declare const PopoverContent: React.ForwardRefExoticComponent<PopoverContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
1350
|
-
|
|
1351
862
|
/**
|
|
1352
863
|
* Progress — a determinate bar.
|
|
1353
864
|
*
|
|
@@ -1735,237 +1246,6 @@ declare const SheetFooter: {
|
|
|
1735
1246
|
};
|
|
1736
1247
|
declare const SheetTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
|
|
1737
1248
|
|
|
1738
|
-
/**
|
|
1739
|
-
* OrganizationPicker — THE ONE "which organization am I acting in" control,
|
|
1740
|
-
* identical on every Matrx surface (the main app's user menu and header nudge,
|
|
1741
|
-
* Workflow Studio's sidebar, the admin dashboard's settings).
|
|
1742
|
-
*
|
|
1743
|
-
* Ported from matrx-frontend `features/organizations/components/
|
|
1744
|
-
* OrganizationPickerPanel.tsx` + `UserMenuOrgSection.tsx` + `DefaultOrgSwitch.tsx`
|
|
1745
|
-
* (2026-09-08), which until then were the ONLY surfaces with the full picker;
|
|
1746
|
-
* Studio and the dashboard each had a bare `<Select>` with different copy,
|
|
1747
|
-
* different placement and no default control. Three UIs for one fact.
|
|
1748
|
-
*
|
|
1749
|
-
* THE ACTIVE ROW IS THE ANSWER (owner, 2026-10-01). The active organization is
|
|
1750
|
-
* the highlighted row — tinted, bold, ringed and checked — and nothing else:
|
|
1751
|
-
* the "Working in …" sentence above the list is gone ("It should be
|
|
1752
|
-
* highlighted and clear"), and so is the "Keep it at the top" switch.
|
|
1753
|
-
*
|
|
1754
|
-
* FAVORITES (owner, 2026-10-01: "add a star you can click to favorite any of
|
|
1755
|
-
* them"). Every row carries its own star; a person favorites as many as they
|
|
1756
|
-
* like, and favorites are drawn first. The star never selects the row — it is
|
|
1757
|
-
* a sibling button, not part of the row — and it picks no organization for
|
|
1758
|
-
* anyone: which organization you are working in is this device's own
|
|
1759
|
-
* remembered choice (the host's resolver), never a star.
|
|
1760
|
-
*
|
|
1761
|
-
* 🚨 A HUNDRED ROWS IS NOT A LIST (VERIFIER-8 MEDIUM-3, 2026-09-21).
|
|
1762
|
-
* The first screen of the data product offered the admin account's 116
|
|
1763
|
-
* organizations nine at a time, with no search, most of them lane fixtures.
|
|
1764
|
-
* Three things answer that, and all three are here rather than in one host:
|
|
1765
|
-
* • SEARCH over name and abbreviation, once the list passes eight rows.
|
|
1766
|
-
* • TEST ORGANIZATIONS HIDDEN by default behind the platform's one
|
|
1767
|
-
* archive-style disclosure (`ArchivedDisclosure`), with their count always
|
|
1768
|
-
* on screen. Hidden, never dropped.
|
|
1769
|
-
* • THE PERSON'S OWN organizations drawn first, under the starred one.
|
|
1770
|
-
* The host classifies (`isTestFixture`, `isOwn`); this component decides
|
|
1771
|
-
* nothing about a name it is given.
|
|
1772
|
-
*
|
|
1773
|
-
* Seam inversions from the origin: lucide `Check`/`Star` become package
|
|
1774
|
-
* SVGs (C19); the host `Switch` becomes this package's; `cn` is local.
|
|
1775
|
-
*/
|
|
1776
|
-
|
|
1777
|
-
interface OrganizationPickerOrganization {
|
|
1778
|
-
id: string;
|
|
1779
|
-
name: string;
|
|
1780
|
-
/** Database-validated 2–3 uppercase letters. Optional — not every report carries it. */
|
|
1781
|
-
abbreviation?: string | null;
|
|
1782
|
-
/**
|
|
1783
|
-
* THE ADDRESS, for when the NAME is not enough — its slug, or whatever else the
|
|
1784
|
-
* host has that tells two of them apart.
|
|
1785
|
-
*
|
|
1786
|
-
* 🚨 WHY (crew D2, 2026-09-21). Two organizations called "Kessler Lab for Applied
|
|
1787
|
-
* Microbial Ecology" and two called "Wraithmoor Regional Museum of Art & Craft" sat
|
|
1788
|
-
* in one list, identical down to the abbreviation tile, and a person had no way of
|
|
1789
|
-
* knowing which one they were about to work in. The list drew the name and nothing
|
|
1790
|
-
* else, so there was nothing for it to draw.
|
|
1791
|
-
*
|
|
1792
|
-
* It is shown ONLY on the rows whose name another row in the list also carries —
|
|
1793
|
-
* the way Slack shows a workspace's URL and Google shows the account's email, and
|
|
1794
|
-
* only where it settles the question. A list of distinct names stays exactly as it
|
|
1795
|
-
* was, because a second line under every row is noise a person learns to skip.
|
|
1796
|
-
*/
|
|
1797
|
-
distinguisher?: string | null;
|
|
1798
|
-
/**
|
|
1799
|
-
* This organization is a TEST FIXTURE — a lane's scratch organization, not a
|
|
1800
|
-
* business anybody works in. Classified in `iam.organizations.settings`
|
|
1801
|
-
* (`test_fixture`), never guessed from its name.
|
|
1802
|
-
*
|
|
1803
|
-
* 🚨 WHY (VERIFIER-8 MEDIUM-3, 2026-09-21). The admin account belongs to 116
|
|
1804
|
-
* organizations and 59 of them are fixtures. The first screen of the data
|
|
1805
|
-
* product offered all of them, nine at a time, with no search — so the two
|
|
1806
|
-
* or three a person actually works in were buried under lane debris. The
|
|
1807
|
-
* archived-items law already answers this shape everywhere else in the
|
|
1808
|
-
* platform: hide by default, ONE disclosure to reveal, and the count of what
|
|
1809
|
-
* is hidden is always on screen. It is hidden, never dropped: a fixture the
|
|
1810
|
-
* person genuinely wants is one click away.
|
|
1811
|
-
*/
|
|
1812
|
-
isTestFixture?: boolean;
|
|
1813
|
-
/**
|
|
1814
|
-
* The signed-in person created this organization. Drawn before the rest,
|
|
1815
|
-
* under the starred one — the same reason Slack puts your own workspace
|
|
1816
|
-
* first: in a list of a hundred, yours must not be something you search for.
|
|
1817
|
-
*/
|
|
1818
|
-
isOwn?: boolean;
|
|
1819
|
-
/**
|
|
1820
|
-
* A short trailing label for the row — what a click does or the row's state
|
|
1821
|
-
* ("Open", "Finish setup", "Turn on HR"). Muted text, right-aligned; the row
|
|
1822
|
-
* stays one button. Omitted, the row is exactly as before.
|
|
1823
|
-
*/
|
|
1824
|
-
detail?: string | null;
|
|
1825
|
-
/**
|
|
1826
|
-
* Fold this row behind the host's second disclosure (`foldedLabel`) — for rows
|
|
1827
|
-
* the person rarely came for (organizations without HR). Hidden, counted,
|
|
1828
|
-
* one click away; a search that matches only folded rows opens the fold.
|
|
1829
|
-
*/
|
|
1830
|
-
folded?: boolean;
|
|
1831
|
-
}
|
|
1832
|
-
interface OrganizationPickerProps {
|
|
1833
|
-
organizations: readonly OrganizationPickerOrganization[];
|
|
1834
|
-
/** The organization the person is acting in right now; null = nothing chosen. */
|
|
1835
|
-
activeOrganizationId: string | null;
|
|
1836
|
-
/** The person's favorite organizations, drawn first and starred. */
|
|
1837
|
-
favoriteOrganizationIds?: readonly string[];
|
|
1838
|
-
loading?: boolean;
|
|
1839
|
-
/** Memberships could not be read. The panel says so instead of showing an empty list. */
|
|
1840
|
-
loadFailed?: boolean;
|
|
1841
|
-
/** Choose the active organization. Hosts persist + refetch here. */
|
|
1842
|
-
onSelect: (organization: OrganizationPickerOrganization) => void;
|
|
1843
|
-
/**
|
|
1844
|
-
* Favorite (true) or unfavorite (false) one organization. Omit to draw no
|
|
1845
|
-
* star buttons — a host with no write path must not show a control that
|
|
1846
|
-
* does nothing (a favorite is still marked, read-only).
|
|
1847
|
-
*/
|
|
1848
|
-
onToggleFavorite?: ((organizationId: string, favorite: boolean) => void) | undefined;
|
|
1849
|
-
/** Hide the "Organization" eyebrow when the host already labels the section. */
|
|
1850
|
-
hideHeading?: boolean;
|
|
1851
|
-
/** Extra classes on each row button (e.g. a host menu's item class). */
|
|
1852
|
-
itemClassName?: string;
|
|
1853
|
-
/** The noun on the disclosure that holds `folded` rows. Default "More". */
|
|
1854
|
-
foldedLabel?: string;
|
|
1855
|
-
className?: string;
|
|
1856
|
-
}
|
|
1857
|
-
declare function organizationColor(seed: string): {
|
|
1858
|
-
background: string;
|
|
1859
|
-
color: string;
|
|
1860
|
-
};
|
|
1861
|
-
/**
|
|
1862
|
-
* THE organization mark — its own logo when it has one, otherwise its 2–3
|
|
1863
|
-
* letter abbreviation on its colour tile (the first letter of the name when the
|
|
1864
|
-
* report has no abbreviation, so a tile is never empty). Three letters get a
|
|
1865
|
-
* smaller face than two so they fit the tile. Every Matrx surface draws this.
|
|
1866
|
-
*/
|
|
1867
|
-
declare function OrganizationMark({ id, name, abbreviation, logoUrl, size, className, }: {
|
|
1868
|
-
/** Seeds the colour; the name is used when absent. */
|
|
1869
|
-
id?: string | null | undefined;
|
|
1870
|
-
name: string;
|
|
1871
|
-
abbreviation?: string | null | undefined;
|
|
1872
|
-
logoUrl?: string | null | undefined;
|
|
1873
|
-
size?: number;
|
|
1874
|
-
className?: string | undefined;
|
|
1875
|
-
}): React.JSX.Element;
|
|
1876
|
-
declare function OrganizationPicker({ organizations, activeOrganizationId, favoriteOrganizationIds, loading, loadFailed, onSelect, onToggleFavorite, hideHeading, itemClassName, foldedLabel, className, }: OrganizationPickerProps): React.JSX.Element;
|
|
1877
|
-
|
|
1878
|
-
declare const NATIVE_TITLE_OPT_OUT_ATTR = "data-native-title";
|
|
1879
|
-
/** Install the takeover on `doc`. Returns the release function. */
|
|
1880
|
-
declare function acquireTitleTooltips(doc?: Document | undefined): () => void;
|
|
1881
|
-
|
|
1882
|
-
/**
|
|
1883
|
-
* Tooltip — the ONE tooltip in the fleet.
|
|
1884
|
-
*
|
|
1885
|
-
* THE COLLAPSE (0.6.0). Two implementations existed: matrx-frontend's
|
|
1886
|
-
* `components/ui/tooltip.tsx` (182 import sites) and `@ai-matrx/tap-target`'s
|
|
1887
|
-
* `src/tooltip.tsx` — the latter an explicit inlined PORT of the former,
|
|
1888
|
-
* carrying a header that said so. tap-target shipped it only because its ~60
|
|
1889
|
-
* tap buttons need a tooltip and no shared package owned one; four repos then
|
|
1890
|
-
* adopted `TooltipProvider` from tap-target. That made tap-target — a
|
|
1891
|
-
* button-geometry package — the accidental owner of a design-system primitive,
|
|
1892
|
-
* with a second copy living in the biggest host.
|
|
1893
|
-
*
|
|
1894
|
-
* A tooltip is a design-system surface, so it lives here. tap-target now takes
|
|
1895
|
-
* `@ai-matrx/design-system` as an ordinary sibling dependency and imports this
|
|
1896
|
-
* file; its own copy is deleted, and its re-export removed. The DAG already
|
|
1897
|
-
* ordered design-system before tap-target, so no cycle is introduced.
|
|
1898
|
-
*
|
|
1899
|
-
* BEHAVIOUR is matrx-frontend's, verbatim, including the ruling both copies
|
|
1900
|
-
* carried in prose:
|
|
1901
|
-
*
|
|
1902
|
-
* 1. THE ROOT RENDERS UNCONDITIONALLY — no hydration mount gate. The gate the
|
|
1903
|
-
* host wrapper once carried ("Radix generates dynamic aria-controls ids that
|
|
1904
|
-
* differ between SSR and client") was false: Radix ids come from React's
|
|
1905
|
-
* SSR-stable `useId`. It was actively harmful — a Trigger wraps
|
|
1906
|
-
* ALWAYS-VISIBLE content, so `return null` deleted that subtree from SSR and
|
|
1907
|
-
* the first client paint.
|
|
1908
|
-
*
|
|
1909
|
-
* 2. THE SURFACE IS TOKEN-DRIVEN, NOT BRANDED. Popover tokens, not
|
|
1910
|
-
* `bg-primary`: rich tooltip content using `text-muted-foreground` was
|
|
1911
|
-
* illegible on a brand-coloured background in one theme or the other.
|
|
1912
|
-
* Since 2026-09-28 the `.matrx-tooltip` class re-scopes those tokens to a dark,
|
|
1913
|
-
* high-contrast chip in both themes (styles.css, THE TOOLTIP SURFACE): the
|
|
1914
|
-
* neutral white surface it wore before was indistinguishable from the
|
|
1915
|
-
* browser's own `title` box.
|
|
1916
|
-
*
|
|
1917
|
-
* 3. EVERY `title` IS THIS TOOLTIP. The provider installs the title takeover
|
|
1918
|
-
* (`title-tooltips.ts`), so a hand-written `title=` anywhere in the
|
|
1919
|
-
* document shows this surface, never the browser's.
|
|
1920
|
-
*
|
|
1921
|
-
* SEAM INVERSION. The host resolved nested portal targets through
|
|
1922
|
-
* `useNestedPortalContainer` (an app hook wired to its dialog + window-panel
|
|
1923
|
-
* systems); tap-target's port dropped that seam entirely and always portalled
|
|
1924
|
-
* to `document.body` — which is why a tooltip inside a popped-out panel landed
|
|
1925
|
-
* in the wrong window. Here it is the package's `PortalContainerProvider`
|
|
1926
|
-
* seam: an explicit `container` prop wins, then the injected container, then
|
|
1927
|
-
* `document.body`. Both prior behaviours are reachable; neither is forked.
|
|
1928
|
-
*/
|
|
1929
|
-
|
|
1930
|
-
interface TooltipProviderProps extends React.ComponentProps<typeof TooltipPrimitive.Provider> {
|
|
1931
|
-
/**
|
|
1932
|
-
* THE TITLE TAKEOVER (2026-09-28) — while any provider is mounted, every native
|
|
1933
|
-
* `title` attribute in the document shows as this tooltip instead of the
|
|
1934
|
-
* browser's (see `title-tooltips.ts`). On by default, because a rule every
|
|
1935
|
-
* author must remember is a rule that is broken; pass `false` only for a
|
|
1936
|
-
* surface that must keep the browser's own box. One provider opting out does
|
|
1937
|
-
* not turn it off while another one is mounted.
|
|
1938
|
-
*/
|
|
1939
|
-
titleTooltips?: boolean;
|
|
1940
|
-
}
|
|
1941
|
-
/**
|
|
1942
|
-
* Mount once near the app root. Every tooltip in the tree shares its
|
|
1943
|
-
* `delayDuration` / `skipDelayDuration` timing, and the root provider takes
|
|
1944
|
-
* over native `title` attributes (see `titleTooltips`).
|
|
1945
|
-
*/
|
|
1946
|
-
declare function TooltipProvider({ titleTooltips, ...props }: TooltipProviderProps): React.JSX.Element;
|
|
1947
|
-
declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
|
|
1948
|
-
/**
|
|
1949
|
-
* Stamps `data-matrx-tooltip-trigger` so the title takeover never draws a
|
|
1950
|
-
* second tooltip over a control that already has this one — it still lifts a
|
|
1951
|
-
* `title` on the same control, so the browser's box never doubles it either.
|
|
1952
|
-
*/
|
|
1953
|
-
declare const TooltipTrigger: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
1954
|
-
interface TooltipContentProps extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> {
|
|
1955
|
-
/**
|
|
1956
|
-
* Explicit portal target; wins over the injected `PortalContainerProvider`
|
|
1957
|
-
* value. Pass `null` to force `document.body`.
|
|
1958
|
-
*/
|
|
1959
|
-
container?: HTMLElement | null;
|
|
1960
|
-
/**
|
|
1961
|
-
* Package-owned open/close motion. Default `true`. Pass `false` for a
|
|
1962
|
-
* surface that must appear instantly. It is NOT the reduced-motion switch;
|
|
1963
|
-
* `styles.css` already honours `prefers-reduced-motion`.
|
|
1964
|
-
*/
|
|
1965
|
-
animated?: boolean;
|
|
1966
|
-
}
|
|
1967
|
-
declare const TooltipContent: React.ForwardRefExoticComponent<TooltipContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
1968
|
-
|
|
1969
1249
|
type SidebarContextProps = {
|
|
1970
1250
|
state: "expanded" | "collapsed";
|
|
1971
1251
|
open: boolean;
|
|
@@ -2031,148 +1311,6 @@ declare function SidebarMenuSubButton({ asChild, size, isActive, className, ...p
|
|
|
2031
1311
|
isActive?: boolean;
|
|
2032
1312
|
}): React.JSX.Element;
|
|
2033
1313
|
|
|
2034
|
-
/**
|
|
2035
|
-
* A 6 px status mark. Tones read semantic tokens (`--info` blue, `--warning` orange,
|
|
2036
|
-
* `--destructive` red, `--success` green), so a host re-tints them with its own values.
|
|
2037
|
-
* `ring` is the hollow variant for icon corners, where a filled dot reads as "unread".
|
|
2038
|
-
*/
|
|
2039
|
-
type StatusTone = "info" | "warning" | "danger" | "success" | "neutral";
|
|
2040
|
-
interface StatusDotProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
2041
|
-
tone: StatusTone;
|
|
2042
|
-
variant?: "solid" | "ring";
|
|
2043
|
-
/** Accessible name; without it the dot is decorative. */
|
|
2044
|
-
label?: string;
|
|
2045
|
-
}
|
|
2046
|
-
declare function StatusDot({ tone, variant, label, className, ...props }: StatusDotProps): React.JSX.Element;
|
|
2047
|
-
|
|
2048
|
-
/**
|
|
2049
|
-
* The app rail: a narrow, never-changing strip of area icons on the far left, with the
|
|
2050
|
-
* person at the bottom (Codex, VS Code, Slack, Teams). It answers "where am I"; the panel
|
|
2051
|
-
* beside it answers "what can I do here". Width is the `--app-rail-width` knob (48 px).
|
|
2052
|
-
*/
|
|
2053
|
-
declare function AppRail({ className, style, ...props }: React.HTMLAttributes<HTMLElement>): React.JSX.Element;
|
|
2054
|
-
declare function AppRailGroup({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
|
|
2055
|
-
/** Pushes everything after it to the bottom of the rail. */
|
|
2056
|
-
declare function AppRailSpacer(): React.JSX.Element;
|
|
2057
|
-
interface AppRailItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
|
|
2058
|
-
icon: React.ReactNode;
|
|
2059
|
-
label: string;
|
|
2060
|
-
/** Shown in the tooltip after the label, e.g. "⌘1". */
|
|
2061
|
-
shortcut?: string;
|
|
2062
|
-
active?: boolean;
|
|
2063
|
-
/** A hollow corner mark when the area needs attention; healthy areas carry none. */
|
|
2064
|
-
attention?: StatusTone;
|
|
2065
|
-
attentionLabel?: string;
|
|
2066
|
-
}
|
|
2067
|
-
declare const AppRailItem: React.ForwardRefExoticComponent<AppRailItemProps & React.RefAttributes<HTMLButtonElement>>;
|
|
2068
|
-
interface AppRailAvatarProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
|
|
2069
|
-
/** Up to two letters. Ignored when `children` is given. */
|
|
2070
|
-
initials?: string;
|
|
2071
|
-
label: string;
|
|
2072
|
-
/** A glyph instead of initials (e.g. a neutral person while signed out). */
|
|
2073
|
-
children?: React.ReactNode;
|
|
2074
|
-
}
|
|
2075
|
-
/** The person, at the bottom of the rail (Codex's initials circle). */
|
|
2076
|
-
declare const AppRailAvatar: React.ForwardRefExoticComponent<AppRailAvatarProps & React.RefAttributes<HTMLButtonElement>>;
|
|
2077
|
-
|
|
2078
|
-
/**
|
|
2079
|
-
* The canvas: a right-hand workspace of panels (terminal, files, browser, info) beside the
|
|
2080
|
-
* main content, as in Claude desktop and Codex. Panels stack in columns, resize by dragging
|
|
2081
|
-
* the gaps between them, and any one can expand to fill the whole canvas region.
|
|
2082
|
-
*
|
|
2083
|
-
* The layout is presentational: the host owns which panels are open, which is expanded and
|
|
2084
|
-
* what each renders. The panel CHROME (CanvasPanel, CanvasPanelEmpty, BrowserTabs, BrowserBar)
|
|
2085
|
-
* lives in @ai-matrx/canvas/react — the one canvas chrome; this package cannot depend on it
|
|
2086
|
-
* (canvas → tap-target → design-system would be a cycle).
|
|
2087
|
-
*/
|
|
2088
|
-
interface CanvasPanelDef {
|
|
2089
|
-
id: string;
|
|
2090
|
-
node: React.ReactNode;
|
|
2091
|
-
/** Pixels (number) or percent of the column (string). */
|
|
2092
|
-
minSize?: number | string;
|
|
2093
|
-
defaultSize?: number | string;
|
|
2094
|
-
}
|
|
2095
|
-
interface CanvasColumnDef {
|
|
2096
|
-
id: string;
|
|
2097
|
-
panels: CanvasPanelDef[];
|
|
2098
|
-
minSize?: number | string;
|
|
2099
|
-
defaultSize?: number | string;
|
|
2100
|
-
}
|
|
2101
|
-
interface CanvasLayoutProps {
|
|
2102
|
-
columns: CanvasColumnDef[];
|
|
2103
|
-
/** When set, only this panel renders, filling the layout. */
|
|
2104
|
-
expandedId?: string | null;
|
|
2105
|
-
className?: string;
|
|
2106
|
-
}
|
|
2107
|
-
declare function CanvasLayout({ columns, expandedId, className }: CanvasLayoutProps): React.JSX.Element;
|
|
2108
|
-
|
|
2109
|
-
/**
|
|
2110
|
-
* A small segmented group of icon buttons for switching the app's mode (Claude desktop's
|
|
2111
|
-
* chat | code pair in the title bar). A radio group: arrow keys move, one is always checked.
|
|
2112
|
-
*/
|
|
2113
|
-
interface ModeSwitchOption<T extends string> {
|
|
2114
|
-
value: T;
|
|
2115
|
-
label: string;
|
|
2116
|
-
icon: React.ReactNode;
|
|
2117
|
-
shortcut?: string;
|
|
2118
|
-
}
|
|
2119
|
-
interface ModeSwitchProps<T extends string> {
|
|
2120
|
-
value: T;
|
|
2121
|
-
onValueChange: (value: T) => void;
|
|
2122
|
-
options: ReadonlyArray<ModeSwitchOption<T>>;
|
|
2123
|
-
label?: string;
|
|
2124
|
-
className?: string;
|
|
2125
|
-
}
|
|
2126
|
-
declare function ModeSwitch<T extends string>({ value, onValueChange, options, label, className }: ModeSwitchProps<T>): React.JSX.Element;
|
|
2127
|
-
|
|
2128
|
-
/**
|
|
2129
|
-
* Skeleton — the "content is coming" placeholder.
|
|
2130
|
-
*
|
|
2131
|
-
* Ported from matrx-frontend `components/ui/skeleton.tsx`; no seams, pure
|
|
2132
|
-
* markup over semantic tokens. ONE change from the original (0.10.0): the
|
|
2133
|
-
* breathing loop is `.matrx-pulse`, a package-owned keyframe, not Tailwind's
|
|
2134
|
-
* `animate-pulse`. A Skeleton that does not pulse is indistinguishable from an
|
|
2135
|
-
* empty grey box — it stops saying "loading" and starts saying "nothing here"
|
|
2136
|
-
* — so the motion is part of the component's meaning and ships with it (see
|
|
2137
|
-
* `styles.css` § THE MOTION LAYER).
|
|
2138
|
-
*/
|
|
2139
|
-
|
|
2140
|
-
interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
2141
|
-
/**
|
|
2142
|
-
* Package-owned pulse. Default `true`. Pass `false` for a static
|
|
2143
|
-
* placeholder — a print/PDF render, or a screenshot fixture where the
|
|
2144
|
-
* animation makes the output non-deterministic. `prefers-reduced-motion`
|
|
2145
|
-
* already SLOWS the pulse rather than stopping it (a still skeleton would
|
|
2146
|
-
* lose the information), so this is not the accessibility switch.
|
|
2147
|
-
*/
|
|
2148
|
-
animated?: boolean;
|
|
2149
|
-
}
|
|
2150
|
-
declare function Skeleton({ className, animated, ...props }: SkeletonProps): React.JSX.Element;
|
|
2151
|
-
|
|
2152
|
-
/**
|
|
2153
|
-
* Switch — Radix switch, one implementation, two sizes.
|
|
2154
|
-
*
|
|
2155
|
-
* The four forks were the same control with two different tracks: a 16px track
|
|
2156
|
-
* with a visible border and an overhanging thumb (matrx-frontend) and a 20px
|
|
2157
|
-
* track with a transparent border and an inset thumb (matrx-extend, dashboard,
|
|
2158
|
-
* workflow-studio). Both stay reachable through `size`, so no host has to keep
|
|
2159
|
-
* a copy to keep its look:
|
|
2160
|
-
*
|
|
2161
|
-
* sm → h-4 track, bordered, thumb sits proud of the rail
|
|
2162
|
-
* md → h-5 track, transparent border, thumb sits inside (the default)
|
|
2163
|
-
*
|
|
2164
|
-
* The unchecked track reads `bg-input`, the token that exists for exactly this
|
|
2165
|
-
* — workflow-studio's fork used `bg-muted`, which is the surface token and
|
|
2166
|
-
* makes an off switch disappear into a muted panel.
|
|
2167
|
-
*/
|
|
2168
|
-
|
|
2169
|
-
type SwitchSize = "sm" | "md";
|
|
2170
|
-
interface SwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> {
|
|
2171
|
-
/** Track size. Default `md`. */
|
|
2172
|
-
size?: SwitchSize;
|
|
2173
|
-
}
|
|
2174
|
-
declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
|
|
2175
|
-
|
|
2176
1314
|
/** What a tab body can do to the sheet that hosts it. */
|
|
2177
1315
|
interface TabbedBottomSheetTabNav {
|
|
2178
1316
|
/**
|
|
@@ -2710,4 +1848,4 @@ declare const FORBIDDEN_HOST_MOTION_UTILITIES: readonly ["animate-in", "animate-
|
|
|
2710
1848
|
*/
|
|
2711
1849
|
declare const FIELD_SURFACE_CLASS = "border border-border bg-card";
|
|
2712
1850
|
|
|
2713
|
-
export { ALL_MOTION_CLASSES, ARCHIVE_FILTER_LABELS, ARCHIVE_FILTER_VALUES, ARCHIVE_LABEL, Accordion, AccordionContent, AccordionItem, type AccordionProps, type AccordionSize, AccordionTrigger, type AccordionTriggerProps, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogContentPrimitive, type AlertDialogContentProps, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle,
|
|
1851
|
+
export { ALL_MOTION_CLASSES, ARCHIVE_FILTER_LABELS, ARCHIVE_FILTER_VALUES, ARCHIVE_LABEL, Accordion, AccordionContent, AccordionItem, type AccordionProps, type AccordionSize, AccordionTrigger, type AccordionTriggerProps, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogContentPrimitive, type AlertDialogContentProps, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, ArchiveFilter, type ArchiveFilterProps, type ArchiveFilterValue, ArchivedDisclosure, type ArchivedDisclosureProps, Avatar, AvatarFallback, AvatarImage, type AvatarProps, type AvatarSize, Badge, type BadgeProps, BasicInput, BasicTextarea, BottomSheet, BottomSheetBody, type BottomSheetBodyProps, BottomSheetFooter, type BottomSheetFooterProps, BottomSheetHeader, type BottomSheetHeaderProps, type BottomSheetProps, Button, type ButtonProps, CENTERED_DIALOG, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, type CardSize, CardTitle, Command, CommandDialog, type CommandDialogProps, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, type CreatableOption, CreatablePicker, type CreatablePickerProps, DEFAULT_ARCHIVE_FILTER, DEFAULT_SCORE_THRESHOLDS, DRAG_CURSORS, type DragCursor, DragCursorMonitor, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerContentPrimitive, type DrawerContentProps, DrawerDescription, type DrawerDirection, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, type DrawerProps, type DrawerSize, DrawerTitle, DrawerTrigger, EditableLabel, type EditableLabelActivation, type EditableLabelCommitMode, type EditableLabelProps, EnterInput, type EnterInputProps, ErrorActions, type ErrorActionsInput, ErrorActionsProvider, type ErrorActionsRecord, type ErrorActionsRenderer, ErrorBox, type ErrorBoxProps, FIELD_SURFACE_CLASS, FLOATING_LAYER_ATTR, FORBIDDEN_HOST_MOTION_UTILITIES, FloatingLayer, HoverCard, HoverCardContent, type HoverCardContentProps, HoverCardTrigger, Input, type InputProps, type InputVariant, InputWithPrefix, type InputWithPrefixProps, LAYER_FRONT_EVENT, Label, type LayerFrontDetail, MODAL_LAYER_Z, MOTION_BOTTOM_SHEET, MOTION_DIALOG, MOTION_OVERLAY, MOTION_POPPER, MOTION_PULSE, MOTION_SHEET, MOTION_SPIN, NATIVE_TITLE_OPT_OUT_ATTR, OverflowToolbar, type OverflowToolbarProps, POPPER_OFFSET, type PickerIcon, PortalContainerProvider, type PortalContainerProviderProps, Progress, type ProgressProps, type ProgressTone, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, type RadioGroupSize, RadixDialogModalProvider, type RadixDialogModalProviderProps, ResizableHandle, type ResizableHandleProps, type ResizableHandleSize, ResizablePanel, ResizablePanelGroup, ScoreRing, type ScoreRingProps, type ScoreThresholds, ScrollArea, type ScrollAreaProps, ScrollBar, type ScrollFadeState, type SegmentOption, SegmentedControl, type SegmentedControlProps, Select, SelectChevron, SelectContent, type SelectContentProps, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, Separator, Sheet, SheetClose, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Slider, type SliderProps, type SliderSize, TabbedBottomSheet, type TabbedBottomSheetProps, type TabbedBottomSheetTab, type TabbedBottomSheetTabNav, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableSize, Tabs, TabsContent, TabsList, TabsTrigger, TabsTriggerCore, Textarea, type TextareaProps, TextareaWithPrefix, type TextareaWithPrefixProps, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, type ToggleProps, type ToolbarAction, type ToolbarActionTone, type ToolbarIcon, TooltipContent, type UseScrollFadeResult, acquireTitleTooltips, alertVariants, announceLayerFront, archiveFilterFromDisclosure, badgeVariants, buttonVariants, cn, floatingLayerZIndex, holdDragCursor, isInsideFloatingLayer, isModalLayerOpen, keepFloatingLayersInside, registerModalLayer, scoreAccentBgClasses, scoreRingColorClasses, selectTriggerVariants, sheetVariants, sidebarMenuButtonVariants, toArchiveFilter, toggleVariants, useAccordionSize, useCardSize, useDrawerDirection, useErrorActions, useFloatingLayerZIndex, useModalLayer, useModalLayerOpen, usePortalContainer, useRadixDialogModal, useScrollFade, useSidebar, useTableSize };
|