@ai-matrx/design-system 0.86.338 → 0.86.340

package/dist/controls.css

@@ -2463,3 +2463,169 @@
     color: var(--mac-label-secondary) !important;
   }
 }
+
+/* ── THE WINDOW CHROME (2026-10-23) ───────────────────────────────────────────────────────────
+   `WindowLights` / `WindowLight` / `WindowChromeButton` (controls/window-controls.tsx): a floating
+   window's title bar at macOS's own geometry, never the 28px control (a light drawn as a Button was a
+   28px box with a 16px glyph in a 14px dot). Lights: 12px dots 8px apart, an 8px glyph revealed when
+   the group is hovered or focused, each light's glyph in its own dark shade; disabled is a grey dot;
+   an inactive window's lights are grey until the pointer reaches them. Chrome button: a 20px square,
+   a 14px glyph, quiet until hovered. Colors are the --matrx-window-light-* tokens (tokens.css).
+   Pinned by controls/window-controls-geometry.test.tsx. */
+@layer matrx-tap-lock {
+  :root {
+    --matrx-window-light-size: 0.75rem; /* 12px — the dot */
+    --matrx-window-light-gap: 0.5rem; /* 8px between dots */
+    --matrx-window-light-glyph-size: 0.5rem; /* 8px — the revealed glyph */
+    --matrx-window-light-touch-size: 1.5rem; /* 24px — the phone header's dot */
+    --matrx-window-light-touch-glyph-size: 0.625rem; /* 10px */
+    --matrx-window-light-touch-gap: 0.75rem; /* 12px — the 44px hit areas barely meet */
+    --matrx-window-chrome-button-size: 1.25rem; /* 20px — a title-bar action */
+    --matrx-window-chrome-glyph: 0.875rem; /* 14px */
+  }
+  .matrx-window-lights {
+    display: inline-flex !important;
+    align-items: center !important;
+    gap: var(--matrx-window-light-gap) !important;
+    flex-shrink: 0 !important;
+    cursor: default;
+  }
+  .matrx-window-light {
+    position: relative;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    flex-shrink: 0 !important;
+    width: var(--matrx-window-light-size) !important;
+    min-width: var(--matrx-window-light-size) !important;
+    max-width: var(--matrx-window-light-size) !important;
+    height: var(--matrx-window-light-size) !important;
+    min-height: var(--matrx-window-light-size) !important;
+    max-height: var(--matrx-window-light-size) !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    border: 0 !important;
+    border-radius: 9999px !important;
+    box-shadow: inset 0 0 0 0.5px hsl(var(--matrx-window-light-edge)) !important;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    transition: background-color 120ms ease, filter 120ms ease;
+  }
+  /* The hit area spans half the gap on every side, so the row of lights has no dead pixels between dots. */
+  .matrx-window-light::after {
+    content: "";
+    position: absolute;
+    inset: calc(var(--matrx-window-light-gap) / -2);
+    border-radius: 9999px;
+  }
+  .matrx-window-light[data-matrx-window-light="close"] {
+    background-color: hsl(var(--matrx-window-light-close)) !important;
+    color: hsl(var(--matrx-window-light-close-glyph)) !important;
+  }
+  .matrx-window-light[data-matrx-window-light="minimize"] {
+    background-color: hsl(var(--matrx-window-light-minimize)) !important;
+    color: hsl(var(--matrx-window-light-minimize-glyph)) !important;
+  }
+  .matrx-window-light[data-matrx-window-light="maximize"] {
+    background-color: hsl(var(--matrx-window-light-maximize)) !important;
+    color: hsl(var(--matrx-window-light-maximize-glyph)) !important;
+  }
+  .matrx-window-light:active:not(:disabled) {
+    filter: brightness(0.85);
+  }
+  .matrx-window-light svg {
+    width: var(--matrx-window-light-glyph-size) !important;
+    height: var(--matrx-window-light-glyph-size) !important;
+    flex-shrink: 0 !important;
+    stroke-width: 3.5 !important;
+    opacity: 0;
+    transition: opacity 100ms ease;
+    pointer-events: none;
+  }
+  .matrx-window-lights:is(:hover, :focus-within) .matrx-window-light:not(:disabled) svg {
+    opacity: 1;
+  }
+  /* Nothing hovers on touch: the glyphs are always shown. */
+  @media (hover: none) {
+    .matrx-window-light:not(:disabled) svg {
+      opacity: 1;
+    }
+  }
+  .matrx-window-light:focus-visible {
+    outline: 2px solid hsl(var(--ring)) !important;
+    outline-offset: 1px !important;
+  }
+  .matrx-window-light:disabled,
+  .matrx-window-lights[data-inactive]:not(:hover):not(:focus-within) .matrx-window-light {
+    background-color: hsl(var(--matrx-window-light-off)) !important;
+  }
+  .matrx-window-light:disabled {
+    cursor: default;
+  }
+  .matrx-window-light:disabled svg {
+    opacity: 0 !important;
+  }
+  /* The phone header's lights: bigger dots, glyphs always shown, a 44px hit area. */
+  .matrx-window-lights[data-touch] {
+    gap: var(--matrx-window-light-touch-gap) !important;
+  }
+  .matrx-window-lights[data-touch] .matrx-window-light {
+    width: var(--matrx-window-light-touch-size) !important;
+    min-width: var(--matrx-window-light-touch-size) !important;
+    max-width: var(--matrx-window-light-touch-size) !important;
+    height: var(--matrx-window-light-touch-size) !important;
+    min-height: var(--matrx-window-light-touch-size) !important;
+    max-height: var(--matrx-window-light-touch-size) !important;
+  }
+  .matrx-window-lights[data-touch] .matrx-window-light::after {
+    inset: calc((var(--matrx-control-touch) - var(--matrx-window-light-touch-size)) / -2);
+  }
+  .matrx-window-lights[data-touch] .matrx-window-light svg {
+    width: var(--matrx-window-light-touch-glyph-size) !important;
+    height: var(--matrx-window-light-touch-glyph-size) !important;
+    stroke-width: 3 !important;
+  }
+  .matrx-window-lights[data-touch] .matrx-window-light:not(:disabled) svg {
+    opacity: 1;
+  }
+
+  .matrx-window-chrome-button {
+    position: relative;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    flex-shrink: 0 !important;
+    width: var(--matrx-window-chrome-button-size) !important;
+    min-width: var(--matrx-window-chrome-button-size) !important;
+    max-width: var(--matrx-window-chrome-button-size) !important;
+    height: var(--matrx-window-chrome-button-size) !important;
+    min-height: var(--matrx-window-chrome-button-size) !important;
+    max-height: var(--matrx-window-chrome-button-size) !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    border: 0 !important;
+    border-radius: 0.375rem !important;
+    background-color: transparent !important;
+    color: hsl(var(--muted-foreground)) !important;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    transition: background-color 120ms ease, color 120ms ease;
+  }
+  .matrx-window-chrome-button svg {
+    width: var(--matrx-window-chrome-glyph) !important;
+    height: var(--matrx-window-chrome-glyph) !important;
+    flex-shrink: 0 !important;
+  }
+  .matrx-window-chrome-button:hover:not(:disabled) {
+    background-color: hsl(var(--accent)) !important;
+    color: hsl(var(--foreground)) !important;
+  }
+  .matrx-window-chrome-button:focus-visible {
+    outline: 2px solid hsl(var(--ring)) !important;
+    outline-offset: 1px !important;
+  }
+  .matrx-window-chrome-button:disabled {
+    color: hsl(var(--disabled-foreground)) !important;
+    cursor: default;
+  }
+}

package/dist/controls.d.cts

@@ -326,6 +326,54 @@ interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement
  */
 declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
 
+/**
+ * THE WINDOW CHROME CONTROLS (2026-10-23) — the title bar of a floating window (summon's
+ * WindowPanel) drawn at macOS's own geometry, never the 28px control:
+ *
+ *   WindowLights        the traffic-light group: 12px dots 8px apart; hovering (or focusing) the
+ *                       group reveals every light's 8px glyph, as macOS does. `inactive` greys the
+ *                       lights of a window that is not in front until the pointer reaches them.
+ *                       `touch` is the phone header's lights: 24px dots, 10px glyphs always shown.
+ *   WindowLight         one light: `kind` close / minimize / maximize picks its color and glyph;
+ *                       `restores` swaps in the restore glyph (a minimized window's yellow, a
+ *                       maximized window's green). Disabled is a grey dot with no glyph.
+ *   WindowChromeButton  a title-bar icon action (the sidebar toggle, pop out): a 20px square with
+ *                       a 14px glyph, quiet until hovered.
+ *
+ * Geometry and color live in `controls.css` (THE WINDOW CHROME), locked in
+ * `@layer matrx-tap-lock` like every control, so `className` places them and never restyles them.
+ * Colors are the `--matrx-window-light-*` tokens in `tokens.css` (both themes). The contract is
+ * pinned by `window-controls-geometry.test.tsx`: moving a light back onto the 28px Button fails it.
+ */
+
+type WindowLightKind = "close" | "minimize" | "maximize";
+interface WindowLightsProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** The window is not the one in front: the lights are grey until the pointer reaches them. */
+    inactive?: boolean;
+    /** The phone header's lights: 24px dots with their glyphs always shown (no hover on touch). */
+    touch?: boolean;
+}
+/** The traffic-light group. Its hover (or keyboard focus) reveals every light's glyph. */
+declare const WindowLights: React.ForwardRefExoticComponent<WindowLightsProps & React.RefAttributes<HTMLDivElement>>;
+interface WindowLightProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+    /** Which light: close (red), minimize (yellow), maximize (green). */
+    kind: WindowLightKind;
+    /** The light undoes its window's state (restore a minimized or maximized window): the restore glyph. */
+    restores?: boolean;
+    /** A light must say what it does. */
+    "aria-label": string;
+}
+/** One traffic light. Place it inside `WindowLights`. */
+declare const WindowLight: React.ForwardRefExoticComponent<WindowLightProps & React.RefAttributes<HTMLButtonElement>>;
+interface WindowChromeButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+    /** The 14px glyph. */
+    icon: React.ReactNode;
+    /** A title-bar action must say what it does (also its tooltip unless `title` is given). */
+    "aria-label": string;
+}
+/** A title-bar icon action (sidebar toggle, pop out): 20px, quiet until hovered. */
+declare const WindowChromeButton: React.ForwardRefExoticComponent<WindowChromeButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
 /**
  * DecisionControl — THE row decision: [Yes] [No] [Other] + the answer's value chip.
  *
@@ -2078,4 +2126,4 @@ interface TileCardGridProps {
 }
 declare function TileCardGrid({ title, description, cards, columns, className }: TileCardGridProps): React.JSX.Element;
 
-export { ActionFeedbackButton, type ActionFeedbackButtonProps, AdvancedCollapsible, type AdvancedCollapsibleProps, type AnchorRect, AnchoredToolbar, type AnchoredToolbarProps, AspectRatioGlyph, AspectRatioSelect, type AspectRatioSelectProps, Badge, type BadgeProps, type BadgeTone, type BlockingCheck, Button, type ButtonProps$1 as ButtonProps, CHIP_TONES, CONFIGURATION_CHOICE_SIZE, CONTROLS_COLLAPSE_BELOW_REM, CONTROLS_CONTAINER_CLASS, CONTROLS_CONTAINER_NAME, CalloutBanner, type CalloutTone, type CardColor, type CardSize, Chip, type ChipHue, type ChipProps, ChipSet, type ChipSetProps, type ChipTone, CitationChip, type CitationChipProps, CitationPopoverBody, type CitationPopoverBodyProps, ClampedNumberInput, type ClampedNumberInputProps, CollapsibleText, CollapsibleTextGroupControls, type ColorSwatch, ColorSwatchRow, type ColorSwatchRowProps, type ConfigurationColumn, ConfigurationTable, ConfigurationTableRow, ConfigurationValueList, ConfirmDelete, type ConfirmDeleteProps, ControlRow, type ControlRowProps, ControlScope, type ControlVariant, type ControlWidth, DangerZone, DateField, type DateFieldMode, type DateFieldProps, DateTimeField, type DecisionAnswer, DecisionControl, type DecisionControlProps, DeleteButton, type DeleteButtonProps, DisclosureHeader, type DisclosureHeaderProps, type DisclosureHeaderVariant, EmptyState, EmptyStateCard, type EmptyStateCardProps, type EmptyStateProps, Field, FieldHelp, type FieldProps, GatedActionButton, type GatedActionButtonProps, type GlyphTone, HUE_TONE, HelpIcon, type HelpIconProps, HueCard, type HueCardProps, HueGrid, type HueGridProps, HueList, type HueListProps, HueRow, type HueRowProps, IconDropdownMenu, type IconDropdownMenuProps, type IconDropdownOption, IconSelect, type IconSelectItem, type IconSelectProps, type IndicatorItem, IndicatorStrip, type IndicatorStripProps, type IndicatorTone, InfoHint, type InfoHintProps, Input, type InputProps, IosWidget, type IosWidgetProps, KpiGrid, KpiTile, type KpiTileProps, type KpiTone, type KpiTrend, LabeledField, type LabeledFieldProps, LightSwitchToggle, type LightSwitchToggleProps, MiddleTruncate, MissingTag, NumberStepper, type NumberStepperProps, OpacitySlider, type OpacitySliderProps, OptionCombobox, type OptionComboboxGroup, type OptionComboboxProps, PageRangeInput, type PageRangeInputProps, type PageRangeIssue, type PageRangeIssueKind, type ParsedPageRanges, type ParsedRatio, PromoBanner, type PromoBannerProps, type PromoTone, PropertyRow, type PropertyRowProps, type RatioGroups, RegionSkeleton, type RegionSkeletonProps, RowGroup, type RowGroupProps, STATUS_TONES, SearchField, SearchInput, type SearchInputProps, type SegmentOption, SegmentedControl, type SegmentedControlProps, Select, type SelectOption, type SelectProps, SelectTrigger, type SelectTriggerProps, SettingRow, type SettingRowProps, Slider, type SliderProps, SplitButton, type StageState, type StageStep, StageSteps, type StageStepsProps, StatusBadge, type StatusBadgeProps, type StatusBadgeSize, StatusToken, type StatusTone, StructuredSectionCard, type StructuredSectionCardProps, type StructuredSectionCardTitleTone, Switch, type SwitchProps, Tabs, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsVariant, TextArrayInput, type TextArrayInputProps, Textarea, type TextareaProps, Tile, TileCard, TileCardGrid, type TileCardGridProps, type TileCardProps, type TileLayout, type TileProps, TimeField, ToolRail, type ToolRailItem, type ToolRailProps, type WayOutItem, clampDraft, cleanUrl, firstBlockingReason, formatDay, formatPageRanges, formatTime, groupRatioOptions, humanizeRatioWord, indicatorText, isAspectRatioOptionSet, isCollectedValue, parsePageRanges, parseRatio, parseTypedDate, parseTypedTime, ratioShapeName, shownDraft, spansOf, splitForMiddleTruncate, stageStates, valueSummary };
+export { ActionFeedbackButton, type ActionFeedbackButtonProps, AdvancedCollapsible, type AdvancedCollapsibleProps, type AnchorRect, AnchoredToolbar, type AnchoredToolbarProps, AspectRatioGlyph, AspectRatioSelect, type AspectRatioSelectProps, Badge, type BadgeProps, type BadgeTone, type BlockingCheck, Button, type ButtonProps$1 as ButtonProps, CHIP_TONES, CONFIGURATION_CHOICE_SIZE, CONTROLS_COLLAPSE_BELOW_REM, CONTROLS_CONTAINER_CLASS, CONTROLS_CONTAINER_NAME, CalloutBanner, type CalloutTone, type CardColor, type CardSize, Chip, type ChipHue, type ChipProps, ChipSet, type ChipSetProps, type ChipTone, CitationChip, type CitationChipProps, CitationPopoverBody, type CitationPopoverBodyProps, ClampedNumberInput, type ClampedNumberInputProps, CollapsibleText, CollapsibleTextGroupControls, type ColorSwatch, ColorSwatchRow, type ColorSwatchRowProps, type ConfigurationColumn, ConfigurationTable, ConfigurationTableRow, ConfigurationValueList, ConfirmDelete, type ConfirmDeleteProps, ControlRow, type ControlRowProps, ControlScope, type ControlVariant, type ControlWidth, DangerZone, DateField, type DateFieldMode, type DateFieldProps, DateTimeField, type DecisionAnswer, DecisionControl, type DecisionControlProps, DeleteButton, type DeleteButtonProps, DisclosureHeader, type DisclosureHeaderProps, type DisclosureHeaderVariant, EmptyState, EmptyStateCard, type EmptyStateCardProps, type EmptyStateProps, Field, FieldHelp, type FieldProps, GatedActionButton, type GatedActionButtonProps, type GlyphTone, HUE_TONE, HelpIcon, type HelpIconProps, HueCard, type HueCardProps, HueGrid, type HueGridProps, HueList, type HueListProps, HueRow, type HueRowProps, IconDropdownMenu, type IconDropdownMenuProps, type IconDropdownOption, IconSelect, type IconSelectItem, type IconSelectProps, type IndicatorItem, IndicatorStrip, type IndicatorStripProps, type IndicatorTone, InfoHint, type InfoHintProps, Input, type InputProps, IosWidget, type IosWidgetProps, KpiGrid, KpiTile, type KpiTileProps, type KpiTone, type KpiTrend, LabeledField, type LabeledFieldProps, LightSwitchToggle, type LightSwitchToggleProps, MiddleTruncate, MissingTag, NumberStepper, type NumberStepperProps, OpacitySlider, type OpacitySliderProps, OptionCombobox, type OptionComboboxGroup, type OptionComboboxProps, PageRangeInput, type PageRangeInputProps, type PageRangeIssue, type PageRangeIssueKind, type ParsedPageRanges, type ParsedRatio, PromoBanner, type PromoBannerProps, type PromoTone, PropertyRow, type PropertyRowProps, type RatioGroups, RegionSkeleton, type RegionSkeletonProps, RowGroup, type RowGroupProps, STATUS_TONES, SearchField, SearchInput, type SearchInputProps, type SegmentOption, SegmentedControl, type SegmentedControlProps, Select, type SelectOption, type SelectProps, SelectTrigger, type SelectTriggerProps, SettingRow, type SettingRowProps, Slider, type SliderProps, SplitButton, type StageState, type StageStep, StageSteps, type StageStepsProps, StatusBadge, type StatusBadgeProps, type StatusBadgeSize, StatusToken, type StatusTone, StructuredSectionCard, type StructuredSectionCardProps, type StructuredSectionCardTitleTone, Switch, type SwitchProps, Tabs, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsVariant, TextArrayInput, type TextArrayInputProps, Textarea, type TextareaProps, Tile, TileCard, TileCardGrid, type TileCardGridProps, type TileCardProps, type TileLayout, type TileProps, TimeField, ToolRail, type ToolRailItem, type ToolRailProps, type WayOutItem, WindowChromeButton, type WindowChromeButtonProps, WindowLight, type WindowLightKind, type WindowLightProps, WindowLights, type WindowLightsProps, clampDraft, cleanUrl, firstBlockingReason, formatDay, formatPageRanges, formatTime, groupRatioOptions, humanizeRatioWord, indicatorText, isAspectRatioOptionSet, isCollectedValue, parsePageRanges, parseRatio, parseTypedDate, parseTypedTime, ratioShapeName, shownDraft, spansOf, splitForMiddleTruncate, stageStates, valueSummary };

package/dist/controls.d.ts

@@ -326,6 +326,54 @@ interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement
  */
 declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
 
+/**
+ * THE WINDOW CHROME CONTROLS (2026-10-23) — the title bar of a floating window (summon's
+ * WindowPanel) drawn at macOS's own geometry, never the 28px control:
+ *
+ *   WindowLights        the traffic-light group: 12px dots 8px apart; hovering (or focusing) the
+ *                       group reveals every light's 8px glyph, as macOS does. `inactive` greys the
+ *                       lights of a window that is not in front until the pointer reaches them.
+ *                       `touch` is the phone header's lights: 24px dots, 10px glyphs always shown.
+ *   WindowLight         one light: `kind` close / minimize / maximize picks its color and glyph;
+ *                       `restores` swaps in the restore glyph (a minimized window's yellow, a
+ *                       maximized window's green). Disabled is a grey dot with no glyph.
+ *   WindowChromeButton  a title-bar icon action (the sidebar toggle, pop out): a 20px square with
+ *                       a 14px glyph, quiet until hovered.
+ *
+ * Geometry and color live in `controls.css` (THE WINDOW CHROME), locked in
+ * `@layer matrx-tap-lock` like every control, so `className` places them and never restyles them.
+ * Colors are the `--matrx-window-light-*` tokens in `tokens.css` (both themes). The contract is
+ * pinned by `window-controls-geometry.test.tsx`: moving a light back onto the 28px Button fails it.
+ */
+
+type WindowLightKind = "close" | "minimize" | "maximize";
+interface WindowLightsProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** The window is not the one in front: the lights are grey until the pointer reaches them. */
+    inactive?: boolean;
+    /** The phone header's lights: 24px dots with their glyphs always shown (no hover on touch). */
+    touch?: boolean;
+}
+/** The traffic-light group. Its hover (or keyboard focus) reveals every light's glyph. */
+declare const WindowLights: React.ForwardRefExoticComponent<WindowLightsProps & React.RefAttributes<HTMLDivElement>>;
+interface WindowLightProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+    /** Which light: close (red), minimize (yellow), maximize (green). */
+    kind: WindowLightKind;
+    /** The light undoes its window's state (restore a minimized or maximized window): the restore glyph. */
+    restores?: boolean;
+    /** A light must say what it does. */
+    "aria-label": string;
+}
+/** One traffic light. Place it inside `WindowLights`. */
+declare const WindowLight: React.ForwardRefExoticComponent<WindowLightProps & React.RefAttributes<HTMLButtonElement>>;
+interface WindowChromeButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+    /** The 14px glyph. */
+    icon: React.ReactNode;
+    /** A title-bar action must say what it does (also its tooltip unless `title` is given). */
+    "aria-label": string;
+}
+/** A title-bar icon action (sidebar toggle, pop out): 20px, quiet until hovered. */
+declare const WindowChromeButton: React.ForwardRefExoticComponent<WindowChromeButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
 /**
  * DecisionControl — THE row decision: [Yes] [No] [Other] + the answer's value chip.
  *
@@ -2078,4 +2126,4 @@ interface TileCardGridProps {
 }
 declare function TileCardGrid({ title, description, cards, columns, className }: TileCardGridProps): React.JSX.Element;
 
-export { ActionFeedbackButton, type ActionFeedbackButtonProps, AdvancedCollapsible, type AdvancedCollapsibleProps, type AnchorRect, AnchoredToolbar, type AnchoredToolbarProps, AspectRatioGlyph, AspectRatioSelect, type AspectRatioSelectProps, Badge, type BadgeProps, type BadgeTone, type BlockingCheck, Button, type ButtonProps$1 as ButtonProps, CHIP_TONES, CONFIGURATION_CHOICE_SIZE, CONTROLS_COLLAPSE_BELOW_REM, CONTROLS_CONTAINER_CLASS, CONTROLS_CONTAINER_NAME, CalloutBanner, type CalloutTone, type CardColor, type CardSize, Chip, type ChipHue, type ChipProps, ChipSet, type ChipSetProps, type ChipTone, CitationChip, type CitationChipProps, CitationPopoverBody, type CitationPopoverBodyProps, ClampedNumberInput, type ClampedNumberInputProps, CollapsibleText, CollapsibleTextGroupControls, type ColorSwatch, ColorSwatchRow, type ColorSwatchRowProps, type ConfigurationColumn, ConfigurationTable, ConfigurationTableRow, ConfigurationValueList, ConfirmDelete, type ConfirmDeleteProps, ControlRow, type ControlRowProps, ControlScope, type ControlVariant, type ControlWidth, DangerZone, DateField, type DateFieldMode, type DateFieldProps, DateTimeField, type DecisionAnswer, DecisionControl, type DecisionControlProps, DeleteButton, type DeleteButtonProps, DisclosureHeader, type DisclosureHeaderProps, type DisclosureHeaderVariant, EmptyState, EmptyStateCard, type EmptyStateCardProps, type EmptyStateProps, Field, FieldHelp, type FieldProps, GatedActionButton, type GatedActionButtonProps, type GlyphTone, HUE_TONE, HelpIcon, type HelpIconProps, HueCard, type HueCardProps, HueGrid, type HueGridProps, HueList, type HueListProps, HueRow, type HueRowProps, IconDropdownMenu, type IconDropdownMenuProps, type IconDropdownOption, IconSelect, type IconSelectItem, type IconSelectProps, type IndicatorItem, IndicatorStrip, type IndicatorStripProps, type IndicatorTone, InfoHint, type InfoHintProps, Input, type InputProps, IosWidget, type IosWidgetProps, KpiGrid, KpiTile, type KpiTileProps, type KpiTone, type KpiTrend, LabeledField, type LabeledFieldProps, LightSwitchToggle, type LightSwitchToggleProps, MiddleTruncate, MissingTag, NumberStepper, type NumberStepperProps, OpacitySlider, type OpacitySliderProps, OptionCombobox, type OptionComboboxGroup, type OptionComboboxProps, PageRangeInput, type PageRangeInputProps, type PageRangeIssue, type PageRangeIssueKind, type ParsedPageRanges, type ParsedRatio, PromoBanner, type PromoBannerProps, type PromoTone, PropertyRow, type PropertyRowProps, type RatioGroups, RegionSkeleton, type RegionSkeletonProps, RowGroup, type RowGroupProps, STATUS_TONES, SearchField, SearchInput, type SearchInputProps, type SegmentOption, SegmentedControl, type SegmentedControlProps, Select, type SelectOption, type SelectProps, SelectTrigger, type SelectTriggerProps, SettingRow, type SettingRowProps, Slider, type SliderProps, SplitButton, type StageState, type StageStep, StageSteps, type StageStepsProps, StatusBadge, type StatusBadgeProps, type StatusBadgeSize, StatusToken, type StatusTone, StructuredSectionCard, type StructuredSectionCardProps, type StructuredSectionCardTitleTone, Switch, type SwitchProps, Tabs, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsVariant, TextArrayInput, type TextArrayInputProps, Textarea, type TextareaProps, Tile, TileCard, TileCardGrid, type TileCardGridProps, type TileCardProps, type TileLayout, type TileProps, TimeField, ToolRail, type ToolRailItem, type ToolRailProps, type WayOutItem, clampDraft, cleanUrl, firstBlockingReason, formatDay, formatPageRanges, formatTime, groupRatioOptions, humanizeRatioWord, indicatorText, isAspectRatioOptionSet, isCollectedValue, parsePageRanges, parseRatio, parseTypedDate, parseTypedTime, ratioShapeName, shownDraft, spansOf, splitForMiddleTruncate, stageStates, valueSummary };
+export { ActionFeedbackButton, type ActionFeedbackButtonProps, AdvancedCollapsible, type AdvancedCollapsibleProps, type AnchorRect, AnchoredToolbar, type AnchoredToolbarProps, AspectRatioGlyph, AspectRatioSelect, type AspectRatioSelectProps, Badge, type BadgeProps, type BadgeTone, type BlockingCheck, Button, type ButtonProps$1 as ButtonProps, CHIP_TONES, CONFIGURATION_CHOICE_SIZE, CONTROLS_COLLAPSE_BELOW_REM, CONTROLS_CONTAINER_CLASS, CONTROLS_CONTAINER_NAME, CalloutBanner, type CalloutTone, type CardColor, type CardSize, Chip, type ChipHue, type ChipProps, ChipSet, type ChipSetProps, type ChipTone, CitationChip, type CitationChipProps, CitationPopoverBody, type CitationPopoverBodyProps, ClampedNumberInput, type ClampedNumberInputProps, CollapsibleText, CollapsibleTextGroupControls, type ColorSwatch, ColorSwatchRow, type ColorSwatchRowProps, type ConfigurationColumn, ConfigurationTable, ConfigurationTableRow, ConfigurationValueList, ConfirmDelete, type ConfirmDeleteProps, ControlRow, type ControlRowProps, ControlScope, type ControlVariant, type ControlWidth, DangerZone, DateField, type DateFieldMode, type DateFieldProps, DateTimeField, type DecisionAnswer, DecisionControl, type DecisionControlProps, DeleteButton, type DeleteButtonProps, DisclosureHeader, type DisclosureHeaderProps, type DisclosureHeaderVariant, EmptyState, EmptyStateCard, type EmptyStateCardProps, type EmptyStateProps, Field, FieldHelp, type FieldProps, GatedActionButton, type GatedActionButtonProps, type GlyphTone, HUE_TONE, HelpIcon, type HelpIconProps, HueCard, type HueCardProps, HueGrid, type HueGridProps, HueList, type HueListProps, HueRow, type HueRowProps, IconDropdownMenu, type IconDropdownMenuProps, type IconDropdownOption, IconSelect, type IconSelectItem, type IconSelectProps, type IndicatorItem, IndicatorStrip, type IndicatorStripProps, type IndicatorTone, InfoHint, type InfoHintProps, Input, type InputProps, IosWidget, type IosWidgetProps, KpiGrid, KpiTile, type KpiTileProps, type KpiTone, type KpiTrend, LabeledField, type LabeledFieldProps, LightSwitchToggle, type LightSwitchToggleProps, MiddleTruncate, MissingTag, NumberStepper, type NumberStepperProps, OpacitySlider, type OpacitySliderProps, OptionCombobox, type OptionComboboxGroup, type OptionComboboxProps, PageRangeInput, type PageRangeInputProps, type PageRangeIssue, type PageRangeIssueKind, type ParsedPageRanges, type ParsedRatio, PromoBanner, type PromoBannerProps, type PromoTone, PropertyRow, type PropertyRowProps, type RatioGroups, RegionSkeleton, type RegionSkeletonProps, RowGroup, type RowGroupProps, STATUS_TONES, SearchField, SearchInput, type SearchInputProps, type SegmentOption, SegmentedControl, type SegmentedControlProps, Select, type SelectOption, type SelectProps, SelectTrigger, type SelectTriggerProps, SettingRow, type SettingRowProps, Slider, type SliderProps, SplitButton, type StageState, type StageStep, StageSteps, type StageStepsProps, StatusBadge, type StatusBadgeProps, type StatusBadgeSize, StatusToken, type StatusTone, StructuredSectionCard, type StructuredSectionCardProps, type StructuredSectionCardTitleTone, Switch, type SwitchProps, Tabs, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsVariant, TextArrayInput, type TextArrayInputProps, Textarea, type TextareaProps, Tile, TileCard, TileCardGrid, type TileCardGridProps, type TileCardProps, type TileLayout, type TileProps, TimeField, ToolRail, type ToolRailItem, type ToolRailProps, type WayOutItem, WindowChromeButton, type WindowChromeButtonProps, WindowLight, type WindowLightKind, type WindowLightProps, WindowLights, type WindowLightsProps, clampDraft, cleanUrl, firstBlockingReason, formatDay, formatPageRanges, formatTime, groupRatioOptions, humanizeRatioWord, indicatorText, isAspectRatioOptionSet, isCollectedValue, parsePageRanges, parseRatio, parseTypedDate, parseTypedTime, ratioShapeName, shownDraft, spansOf, splitForMiddleTruncate, stageStates, valueSummary };

package/dist/controls.js

@@ -47,6 +47,9 @@ import {
   TileCardGrid,
   TimeField,
   ToolRail,
+  WindowChromeButton,
+  WindowLight,
+  WindowLights,
   clampDraft,
   cleanUrl,
   firstBlockingReason,
@@ -66,7 +69,7 @@ import {
   spansOf,
   splitForMiddleTruncate,
   stageStates
-} from "./chunk-T4IJELSS.js";
+} from "./chunk-KYH42WEX.js";
 import "./chunk-6NOLVA4E.js";
 import {
   Input,
@@ -239,6 +242,9 @@ export {
   TileCardGrid,
   TimeField,
   ToolRail,
+  WindowChromeButton,
+  WindowLight,
+  WindowLights,
   clampDraft,
   cleanUrl,
   firstBlockingReason,

package/dist/index.cjs

@@ -4272,6 +4272,7 @@ __export(src_exports, {
   ArchivedDisclosure: () => ArchivedDisclosure,
   AssistPeekCard: () => AssistPeekCard,
   AssistPeekHover: () => AssistPeekHover,
+  AssistTray: () => AssistTray,
   AuthGateDialog: () => AuthGateDialog2,
   Avatar: () => Avatar,
   AvatarFallback: () => AvatarFallback,
@@ -13315,7 +13316,7 @@ function MenuDoor({ action, menu, disabled }) {
         variant: "quiet",
         "aria-label": action.label,
         title: action.label,
-        icon: action.busy ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Loader2Icon, { className: "animate-spin" }) : glyph,
+        icon: action.busy ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Loader2Icon, { className: "matrx-spin" }) : glyph,
         className: "shrink-0",
         disabled: disabled || action.busy,
         onClick: (event) => event.stopPropagation()
@@ -13544,7 +13545,7 @@ function PeekCardFooter({ primary, primaryAt, onSettings, doors = [], copy, open
       style: fills ? { minWidth: PEEK_PRIMARY_MIN_PX[sheet ? "sheet" : "card"] } : void 0,
       disabled: loading || primary.disabled || primary.busy,
       title: primary.title,
-      icon: primary.busy ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Loader2Icon, { className: "animate-spin" }) : void 0,
+      icon: primary.busy ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Loader2Icon, { className: "matrx-spin" }) : void 0,
       onClick: primary.onClick,
       children: primary.label
     }
@@ -14447,7 +14448,7 @@ function ValueShell({ kind, glyph: Glyph, text, copy, state, record, peek, wrap
   const off = state !== "ok";
   const value = /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("span", { className: cn("min-w-0", wrap ? "whitespace-pre-line break-words" : "truncate", off ? "text-muted-foreground line-through" : "text-foreground"), children: text });
   const body = /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(import_jsx_runtime92.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Glyph, { className: cn("size-[1em] shrink-0", off ? "text-muted-foreground" : "text-muted-foreground") }),
+    Glyph ? /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Glyph, { className: "size-[1em] shrink-0 text-muted-foreground" }) : null,
     value,
     off ? /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("span", { className: "shrink-0 text-muted-foreground no-underline", children: `\xB7 ${CONTACT_STATE_LABEL[state]}` }) : null
   ] });
@@ -14648,7 +14649,7 @@ function SocialHandleValue(props) {
     }
   );
 }
-function UrlValue({ url, title, owner, state = "ok", peek = true }) {
+function UrlValue({ url, title, owner, state = "ok", peek = true, icon = true }) {
   const parsed = parseUrl(url);
   const ok = state === "ok" && Boolean(parsed.href);
   const record = {
@@ -14668,9 +14669,9 @@ function UrlValue({ url, title, owner, state = "ok", peek = true }) {
     ...ok ? { primary: { label: "Open", onSelect: () => (0, import_outbound2.openOutbound)(parsed.href) } } : {},
     copyData: { url: parsed.href ?? url, domain: parsed.domain, ...title ? { title } : {} }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(ValueShell, { kind: "link", glyph: GlobeIcon, text: parsed.display, copy: parsed.href ?? url, state, record, peek });
+  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(ValueShell, { kind: "link", ...icon ? { glyph: GlobeIcon } : {}, text: parsed.display, copy: parsed.href ?? url, state, record, peek });
 }
-function ContactValue({ type, value, platform, followers, title, ...common }) {
+function ContactValue({ type, value, platform, followers, title, icon, ...common }) {
   switch (type) {
     case "email":
       return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(EmailValue, { email: value, ...common });
@@ -14681,7 +14682,7 @@ function ContactValue({ type, value, platform, followers, title, ...common }) {
     case "social":
       return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(SocialHandleValue, { value, ...platform !== void 0 ? { platform } : {}, ...followers !== void 0 ? { followers } : {}, ...common });
     case "url":
-      return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(UrlValue, { url: value, ...title !== void 0 ? { title } : {}, ...common });
+      return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(UrlValue, { url: value, ...title !== void 0 ? { title } : {}, ...icon !== void 0 ? { icon } : {}, ...common });
   }
 }
 
@@ -14871,6 +14872,7 @@ var React64 = __toESM(require("react"), 1);
 var import_react_slot7 = require("@radix-ui/react-slot");
 init_controls();
 init_icons();
+init_dropdown_menu();
 init_use_is_mobile();
 var import_jsx_runtime95 = require("react/jsx-runtime");
 function AssistPeekCard({
@@ -14887,8 +14889,10 @@ function AssistPeekCard({
   stopShowing,
   deciding = false,
   onNotNow,
+  closeAs = "not-now",
   step
 }) {
+  const closeLabel = closeAs === "dismiss" ? "Dismiss" : "Not now";
   const laterDoor = later?.length ? { kind: "action", id: "later", label: "Later", icon: ClockIcon, menu: later, busy: deciding } : null;
   const stopDoor = stopShowing?.length ? { kind: "action", id: "stop", label: "Stop showing", icon: BellOffIcon, menu: stopShowing, busy: deciding } : null;
   const doors = laterDoor && stopDoor ? [laterDoor, stopDoor] : laterDoor ? [laterDoor] : stopDoor ? [stopDoor] : [];
@@ -14899,7 +14903,7 @@ function AssistPeekCard({
         title,
         leading: Icon3 ? /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Icon3, {}) : void 0,
         subtitle,
-        trailing: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Button2, { type: "button", variant: "quiet", "aria-label": "Not now", title: "Not now", icon: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(XIcon, {}), disabled: Boolean(primary.busy) || deciding, onClick: onNotNow })
+        trailing: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Button2, { type: "button", variant: "quiet", "aria-label": closeLabel, title: closeLabel, icon: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(XIcon, {}), disabled: Boolean(primary.busy) || deciding, onClick: onNotNow })
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(PeekCardBody, { children: [
@@ -15000,6 +15004,131 @@ function AssistPeekHover({ trigger, label, side = "top", align = "end", presenta
     }
   );
 }
+var TRAY_CLOSE_MS = 300;
+var TRAY_OPEN_MS = 500;
+function AssistTray({ count, children, quickQuiet, menu, allAssists, onHandlePointerDown, reminderAttributes, open: openProp, onOpenChange }) {
+  const [hovered, setHovered] = React64.useState(false);
+  const [keptOwn, setKept] = React64.useState(false);
+  const kept = openProp ?? keptOwn;
+  const open = kept || hovered;
+  const box = React64.useRef(null);
+  const timer = React64.useRef(null);
+  const clear = () => {
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = null;
+  };
+  React64.useEffect(() => clear, []);
+  const setKeep = React64.useCallback(
+    (next) => {
+      setKept(next);
+      onOpenChange?.(next);
+      if (!next) setHovered(false);
+    },
+    [onOpenChange]
+  );
+  const enter = () => {
+    clear();
+    if (!open) timer.current = setTimeout(() => setHovered(true), TRAY_OPEN_MS);
+  };
+  const leave = () => {
+    clear();
+    timer.current = setTimeout(() => {
+      if (document.querySelector("[data-radix-menu-content]")) return;
+      setHovered(false);
+    }, TRAY_CLOSE_MS);
+  };
+  React64.useEffect(() => {
+    if (!kept) return;
+    const onPress = (event) => {
+      if (box.current?.contains(event.target) || inCardMenu(event.target)) return;
+      setKeep(false);
+    };
+    const onKey = (event) => {
+      if (event.key !== "Escape" || document.querySelector("[data-radix-menu-content]")) return;
+      setKeep(false);
+    };
+    document.addEventListener("pointerdown", onPress, true);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("pointerdown", onPress, true);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [kept, setKeep]);
+  if (count <= 0) return null;
+  const label = `${count} assist${count === 1 ? "" : "s"}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(
+    "div",
+    {
+      ref: box,
+      "data-matrx-assist-tray": "",
+      "data-open": open ? "" : void 0,
+      className: "pointer-events-none flex flex-col items-end gap-2 [:root[data-assist-dock-slot=header]_&]:flex-col-reverse",
+      onMouseEnter: enter,
+      onMouseLeave: leave,
+      onPointerDownCapture: (event) => {
+        if (event.target.closest("[data-matrx-assist-peek]")) setKeep(true);
+      },
+      children: [
+        open ? /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { "data-matrx-assist-tray-stack": "", className: "matrx-peek-scroll pointer-events-auto flex max-h-[min(70dvh,640px)] flex-col items-end gap-2 overflow-y-auto", children: [
+          React64.Children.map(children, (child) => child ? /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: "shrink-0", children: child }) : null),
+          allAssists || menu?.length ? /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { className: "flex shrink-0 items-center rounded-md border border-border bg-popover shadow-md", children: [
+            allAssists,
+            menu?.length ? /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(TrayMenu, { menu }) : null
+          ] }) : null
+        ] }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(
+          "div",
+          {
+            "data-matrx-assist-tray-reminder": "",
+            ...reminderAttributes,
+            className: "group pointer-events-auto flex items-center rounded-md border border-border bg-popover shadow-md transition-opacity data-[assist-dock-pending]:invisible data-[assist-dock-yield]:pointer-events-none data-[assist-dock-yield]:opacity-30",
+            onPointerDown: onHandlePointerDown,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+                Button2,
+                {
+                  type: "button",
+                  variant: "quiet",
+                  icon: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(LightbulbIcon, {}),
+                  glyphTone: "primary",
+                  "aria-label": open ? `Hide ${label}` : `Show ${label}`,
+                  "aria-expanded": open,
+                  title: label,
+                  onClick: () => setKeep(!kept),
+                  children: String(count)
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+                Button2,
+                {
+                  type: "button",
+                  variant: "quiet",
+                  removes: true,
+                  icon: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(XIcon, {}),
+                  "aria-label": quickQuiet.label,
+                  title: quickQuiet.label,
+                  onClick: () => {
+                    setKeep(false);
+                    quickQuiet.onQuiet();
+                  }
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function TrayMenu({ menu }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(DropdownMenu, { modal: false, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Button2, { type: "button", variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(BellOffIcon, {}), children: "Quiet" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(DropdownMenuContent, { align: "end", children: menu.map((group, i) => /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(React64.Fragment, { children: [
+      group.label ? /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(DropdownMenuLabel, { children: group.label }) : null,
+      group.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(DropdownMenuItem, { ...item.tone ? { tone: item.tone } : {}, onSelect: () => item.onSelect(), children: item.label }, item.key))
+    ] }, `${group.label ?? ""}-${i}`)) })
+  ] });
+}
 
 // src/radio-group.tsx
 var RadioGroupPrimitive = __toESM(require("@radix-ui/react-radio-group"), 1);