@ds-mo/ui 9.0.0 → 9.2.0

package/dist/types/components/Menu/menu-types.d.ts

@@ -1,6 +1,7 @@
 import type { ShellGradientPreset } from '../../shell/shell-gradient-presets';
+import type { SwatchPickerOption, SwatchPickerSection } from '../SwatchPicker/swatch-picker-types';
 export type { MenuAlign, MenuSide } from './menu-position';
-export { PANEL_NAV_USER_MENU_PLACEMENT, type MenuPlacement, } from './menu-placement';
+export { PANEL_NAV_USER_MENU_PLACEMENT, PANEL_TOOLS_HEADER_MENU_PLACEMENT, type MenuPlacement, } from './menu-placement';
 export interface MenuItemData {
     label: string;
     value?: string;
@@ -20,10 +21,22 @@ export interface MenuItemsSection {
 }
 export interface MenuGradientPickerSection {
     header?: string;
+    /** @deprecated Use the generic `swatch-picker` section. */
     variant: 'gradient-picker';
     value: ShellGradientPreset;
 }
-export type MenuSection = MenuItemsSection | MenuGradientPickerSection;
+export interface MenuSwatchPickerSection {
+    header?: string;
+    variant: 'swatch-picker';
+    value: string;
+    options?: SwatchPickerOption[];
+    sections?: SwatchPickerSection[];
+    groupLabel?: string;
+}
+export type MenuSection = MenuItemsSection | MenuGradientPickerSection | MenuSwatchPickerSection;
 export declare function isMenuGradientPickerSection(section: MenuSection): section is MenuGradientPickerSection;
+export declare function isMenuSwatchPickerSection(section: MenuSection): section is MenuSwatchPickerSection;
+export declare function isMenuPickerSection(section: MenuSection): section is MenuGradientPickerSection | MenuSwatchPickerSection;
 export type { ShellGradientPreset };
+export type { SwatchPickerOption, SwatchPickerSection };
 //# sourceMappingURL=menu-types.d.ts.map

package/dist/types/components/Message/Message.d.ts

@@ -0,0 +1,17 @@
+import type { MessageDeliveryState, MessageDirection, MessageGroupPosition } from '../conversation-types';
+export declare class Message {
+    messageId: string;
+    direction: MessageDirection;
+    groupPosition: MessageGroupPosition;
+    author: string;
+    /** Keep author semantics while allowing products with self-evident roles to hide the visible label. */
+    showAuthor: boolean;
+    /** ISO timestamp. */
+    timestamp: string;
+    deliveryState: MessageDeliveryState | undefined;
+    streaming: boolean;
+    scrollAnchor: boolean;
+    private formattedTimestamp;
+    render(): any;
+}
+//# sourceMappingURL=Message.d.ts.map

package/dist/types/components/MessageBubble/MessageBubble.d.ts

@@ -0,0 +1,6 @@
+export type MessageBubbleVariant = 'primary' | 'secondary' | 'ghost' | 'error';
+export declare class MessageBubble {
+    variant: MessageBubbleVariant;
+    render(): any;
+}
+//# sourceMappingURL=MessageBubble.d.ts.map

package/dist/types/components/MessageComposer/MessageComposer.d.ts

@@ -0,0 +1,29 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { ButtonFilledIntent } from '../ButtonFilled/ButtonFilled';
+import type { MessageComposerStatus } from '../conversation-types';
+export declare class MessageComposer {
+    el: HTMLElement;
+    value: string;
+    placeholder: string;
+    label: string;
+    status: MessageComposerStatus;
+    isInactive: boolean;
+    submitIntent: ButtonFilledIntent;
+    dsInput: EventEmitter<string>;
+    dsSubmit: EventEmitter<{
+        text: string;
+    }>;
+    dsStop: EventEmitter<void>;
+    private textarea?;
+    componentDidLoad(): void;
+    onValueChange(): void;
+    setFocus(): Promise<void>;
+    private get streaming();
+    private resize;
+    private handleInput;
+    private submit;
+    private handleKeyDown;
+    private handleAction;
+    render(): any;
+}
+//# sourceMappingURL=MessageComposer.d.ts.map

package/dist/types/components/MessageScroller/MessageScroller.d.ts

@@ -0,0 +1,37 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { MessageScrollerPosition } from '../conversation-types';
+export declare class MessageScroller {
+    el: HTMLElement;
+    busy: boolean;
+    autoFollow: boolean;
+    defaultPosition: MessageScrollerPosition;
+    messagesLabel: string;
+    dsReachStart: EventEmitter<void>;
+    private showScrollToLatest;
+    private viewport?;
+    private content?;
+    private overlay?;
+    private resizeObserver?;
+    private overlayResizeObserver?;
+    private mutationObserver?;
+    private following;
+    private atStart;
+    private programmatic;
+    private previousScrollHeight;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    scrollToMessage(id: string): Promise<boolean>;
+    scrollToStart(): Promise<void>;
+    scrollToEnd(): Promise<void>;
+    private motionBehavior;
+    private scrollTo;
+    private connectObservers;
+    private handleContentGrowth;
+    private applyDefaultPosition;
+    private isAtLiveEdge;
+    private handleScroll;
+    private releaseFollow;
+    private handleSelectionChange;
+    render(): any;
+}
+//# sourceMappingURL=MessageScroller.d.ts.map

package/dist/types/components/PanelNav/PanelNav.d.ts

@@ -65,6 +65,7 @@ export declare class PanelNav {
     private resizeObserver?;
     private scrollRegionObserver?;
     private bodyEl?;
+    private initialRenderComplete;
     private isDragging;
     private dragStartX;
     private didSnap;
@@ -92,6 +93,8 @@ export declare class PanelNav {
     private startCollapseAnimation;
     private finishCollapseAnimation;
     private clearCollapseAnimationCompletion;
+    private effectiveBreakpoint;
+    private isViewportNarrow;
     private connectResizeObserver;
     private disconnectResizeObserver;
     private connectScrollRegionObserver;

package/dist/types/components/PanelToolHeader/PanelToolHeader.d.ts

@@ -0,0 +1,34 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { PanelToolsHeaderAction } from '../PanelTools/panel-tools-types';
+export declare class PanelToolHeader {
+    el: HTMLElement;
+    /** Visible heading for the active tool view. */
+    heading: string;
+    /** Show the leading Back action. */
+    showBack: boolean;
+    /** Canonical icon for the leading navigation or dismiss action. */
+    backIcon: string;
+    /** Accessible name for the leading navigation or dismiss action. */
+    backAriaLabel: string;
+    /** Show the trailing options-menu trigger. */
+    showMenu: boolean;
+    /** Accessible name for the options-menu trigger. */
+    menuAriaLabel: string;
+    /** Stable id placed on the menu trigger host for ds-menu anchoring. */
+    menuTriggerId: string;
+    /** Id of the menu controlled by the trigger. */
+    menuControls: string | undefined;
+    /** Whether the controlled menu is open. */
+    menuExpanded: boolean;
+    /** Trailing application-owned icon actions. When present, these replace the legacy menu action. */
+    actions: PanelToolsHeaderAction[];
+    dsBack: EventEmitter<MouseEvent>;
+    dsMenuToggle: EventEmitter<MouseEvent>;
+    dsAction: EventEmitter<{
+        id: string;
+        originalEvent: MouseEvent;
+    }>;
+    focusMenuTrigger(): Promise<void>;
+    render(): any;
+}
+//# sourceMappingURL=PanelToolHeader.d.ts.map

package/dist/types/components/PanelToolSearch/PanelToolSearch.d.ts

@@ -0,0 +1,35 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class PanelToolSearch {
+    el: HTMLElement;
+    /** Current search query. */
+    value: string;
+    /** Search guidance shown while the query is empty. */
+    placeholder: string;
+    /** Accessible name for the search field. */
+    ariaLabel: string;
+    /** Optional ID of the results region filtered by this search. */
+    controls: string | undefined;
+    /** Prevents search interaction while keeping the row visible. */
+    isInactive: boolean;
+    /** Show the optional trailing filter-menu trigger. */
+    showFilter: boolean;
+    /** Accessible name for the filter-menu trigger. */
+    filterAriaLabel: string;
+    /** Stable id placed on the filter trigger for ds-menu anchoring. */
+    filterTriggerId: string;
+    /** Id of the menu controlled by the filter trigger. */
+    filterControls: string | undefined;
+    /** Whether the controlled filter menu is open. */
+    filterExpanded: boolean;
+    /** Promote the trigger foreground when one or more filters are applied. */
+    filterActive: boolean;
+    dsChange: EventEmitter<string>;
+    dsClear: EventEmitter<void>;
+    dsFilterToggle: EventEmitter<MouseEvent>;
+    componentDidRender(): void;
+    setFocus(): Promise<void>;
+    focusFilterTrigger(): Promise<void>;
+    private handleChange;
+    render(): any;
+}
+//# sourceMappingURL=PanelToolSearch.d.ts.map

package/dist/types/components/PanelTools/PanelTools.d.ts

@@ -1,10 +1,14 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import type { ChromeTransitionDetail } from '../../shell/chrome-transition';
-import { type PanelToolsItem, type PanelToolsToolId } from './panel-tools-types';
+import { type PanelToolsHeaders, type PanelToolsItem, type PanelToolsToolId } from './panel-tools-types';
 export declare class PanelTools {
     el: HTMLElement;
     /** When false, only the icon rail is shown. */
     open: boolean;
+    /** Drawer presentation or viewport-covering presentation for the active tool. */
+    presentation: 'drawer' | 'fullscreen';
+    /** Let a fullscreen product supply independent master/detail headers inside its view. */
+    fullscreenHeaderMode: 'shared' | 'split';
     /** Active tool view — `search`, `agents`, `messages`, `stacks`, `activity`, or `help`. */
     activeTool: PanelToolsToolId | '';
     /**
@@ -16,6 +20,10 @@ export declare class PanelTools {
     itemsJson: string;
     toolsLabel: string;
     toolShortcutsLabel: string;
+    /** Active header state per tool. Replace the object when title, depth, or actions change. */
+    headers: PanelToolsHeaders;
+    /** JSON fallback for `headers`. The `headers` property takes precedence when non-empty. */
+    headersJson: string;
     /**
      * Optional localStorage key for the last active tool. The drawer always starts
      * closed; only the tool identity is restored for continuity within this browser.
@@ -26,24 +34,48 @@ export declare class PanelTools {
         id: PanelToolsToolId;
         selected: boolean;
     }>;
+    /** Emitted when fullscreen changes, including Escape-initiated exits. */
+    dsPresentationChange: EventEmitter<{
+        presentation: 'drawer' | 'fullscreen';
+    }>;
+    /** Requests navigation to the active tool's parent view. */
+    dsHeaderBack: EventEmitter<{
+        tool: PanelToolsToolId;
+    }>;
+    /** Requests one application-owned action from the active tool header. */
+    dsHeaderAction: EventEmitter<{
+        tool: PanelToolsToolId;
+        id: string;
+    }>;
     /** Bubbling lifecycle — `ds-bar-nav` defers overflow checks during drawer motion. */
     dsChromeTransitionStart: EventEmitter<ChromeTransitionDetail>;
     dsChromeTransitionEnd: EventEmitter<ChromeTransitionDetail>;
     /** Arms open vs close easing for the in-flight width transition. */
     private motion;
+    /** Keeps header and slotted content painted until the closing clip transition completes. */
+    private drawerSurfaceRetained;
     /** Suppresses width transition until the host has painted its initial open state. */
     private readyForMotion;
+    /** Fullscreen presentation changes snap without borrowing drawer width motion. */
+    private presentationMotionSuppressed;
     private rovingIndex;
+    private fullViewToolIds;
     private motionEnableGeneration;
+    private presentationMotionGeneration;
     private transitionGeneration;
     private transitionFallbackTimer;
     /** Ignores the old transition's terminal event when reversing direction. */
     private ignoreReplacementTerminal;
+    private focusBeforeFullscreen;
+    private fullViewObserver;
     private get railItems();
     private get orderedRailItems();
     disconnectedCallback(): void;
+    presentationChanged(next: 'drawer' | 'fullscreen', previous?: 'drawer' | 'fullscreen'): void;
+    handleFullscreenEscape(event: KeyboardEvent): void;
     private deferMotionEnable;
     connectedCallback(): void;
+    private handleComposedHeaderAction;
     componentWillLoad(): void;
     openChanged(isOpen: boolean, wasOpen?: boolean): void;
     activeToolChanged(): void;
@@ -56,6 +88,7 @@ export declare class PanelTools {
     private reconcileActiveTool;
     private startDrawerTransition;
     private handleTransitionEnd;
+    private drawerTransitionAtTerminal;
     private finishDrawerTransition;
     private clearTransitionCompletion;
     /** Rail selection follows `open` immediately — independent of the slide animation. */
@@ -63,12 +96,18 @@ export declare class PanelTools {
     /** Drawer body stays mounted while the clip frame animates closed. */
     private isDrawerPresent;
     private isViewActive;
+    private hasFullView;
+    private syncFullViewTools;
     private headerLabel;
+    private resolvedHeaders;
+    private activeHeader;
     private handleToolChange;
     /** Toggle any rail tool open/closed — shell shortcuts K/A/S/M/N call this. */
     activateTool(id: PanelToolsToolId): Promise<void>;
     /** Close the tools drawer when open — used by shell keyboard shortcuts. */
     closeDrawer(): Promise<void>;
+    /** Focus an active tool-header action by its application-owned id. */
+    focusHeaderAction(id: string): Promise<void>;
     private focusRailAt;
     private handleRailKeyDown;
     private renderRailAction;

package/dist/types/components/PanelTools/panel-tools-types.d.ts

@@ -18,4 +18,24 @@ export interface PanelToolsItem {
     isInactive?: boolean;
     ariaLabel?: string;
 }
+export interface PanelToolsHeaderAction {
+    id: string;
+    icon: string;
+    ariaLabel: string;
+    triggerId?: string;
+    controls?: string;
+    expanded?: boolean;
+    haspopup?: 'menu' | 'dialog' | 'listbox' | 'tree' | 'grid';
+    pressed?: boolean;
+    isInactive?: boolean;
+}
+export interface PanelToolsHeaderConfig {
+    title?: string;
+    showBack?: boolean;
+    backIcon?: string;
+    backAriaLabel?: string;
+    actions?: PanelToolsHeaderAction[];
+}
+/** Per-tool header state. The application replaces the object when a tool changes depth or actions. */
+export type PanelToolsHeaders = Partial<Record<PanelToolsToolId, PanelToolsHeaderConfig>>;
 //# sourceMappingURL=panel-tools-types.d.ts.map

package/dist/types/components/PanelTools/panel-tools-utils.d.ts

@@ -18,6 +18,8 @@ export interface PanelToolsTransitionStyle {
 export declare function panelToolsDrawerTransitionMs(style: PanelToolsTransitionStyle): number;
 /** True when the drawer clip is fully closed — safe to skip painting slot content. */
 export declare function panelToolsDrawerResting(open: boolean, motion: PanelToolsMotion): boolean;
+/** True only when the animated clip has reached the terminal width for its motion phase. */
+export declare function panelToolsDrawerAtTerminal(width: number, targetWidth: number, motion: PanelToolsMotion): boolean;
 /** Toggle or switch rail tool selection — repeat activation closes the active tool. */
 export declare function resolvePanelToolActivation(open: boolean, activeTool: PanelToolsToolId | '', id: PanelToolsToolId): {
     open: boolean;

package/dist/types/components/ShellGradientPicker/ShellGradientPicker.d.ts

@@ -1,15 +1,12 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { type ShellGradientPreset } from '../ShellGradientSwatch/shell-gradient-swatch-types';
+/** @deprecated Use `ds-swatch-picker` with shell preset options. */
 export declare class ShellGradientPicker {
     /** Active shell wash preset. */
     value: ShellGradientPreset;
     groupLabel: string;
     dsChange: EventEmitter<ShellGradientPreset>;
-    el: HTMLElement;
-    private handleSwatchSelect;
-    private focusSwatch;
-    private handleSwatchKeyDown;
-    private renderSwatch;
+    private handleChange;
     render(): any;
 }
 //# sourceMappingURL=ShellGradientPicker.d.ts.map

package/dist/types/components/ShellGradientSwatch/ShellGradientSwatch.d.ts

@@ -1,5 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { type ShellGradientPreset } from './shell-gradient-swatch-types';
+/** @deprecated Use `ds-swatch-picker`; individual swatches are implementation detail. */
 export declare class ShellGradientSwatch {
     /** Wash preset this orb previews. */
     preset: ShellGradientPreset;

package/dist/types/components/Slider/Slider.d.ts

@@ -19,7 +19,7 @@ export declare class Slider {
     showValue: boolean;
     size: SliderSize;
     orientation: SliderOrientation;
-    /** Keep the complete thumb inside the rail bounds, or center it on the endpoints. */
+    /** Align the thumb edge with full-width rail endpoints, or its center with inset rail endpoints. */
     thumbAlignment: SliderThumbAlignment;
     name: string | undefined;
     form: string | undefined;

package/dist/types/components/SwatchPicker/SwatchPicker.d.ts

@@ -0,0 +1,21 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { type SwatchPickerOption, type SwatchPickerSection } from './swatch-picker-types';
+export declare class SwatchPicker {
+    el: HTMLElement;
+    /** Selected option value. */
+    value: string;
+    /** Flat option list. Sections take precedence when supplied. Assign as a JavaScript property. */
+    options: SwatchPickerOption[];
+    /** Visually separated option groups that remain one radio group. Assign as a JavaScript property. */
+    sections: SwatchPickerSection[];
+    /** Accessible name for the complete one-of-many choice. */
+    groupLabel: string;
+    dsChange: EventEmitter<string>;
+    private get activeOptions();
+    private selectOption;
+    private focusOption;
+    private handleOptionKeyDown;
+    private renderOption;
+    render(): any;
+}
+//# sourceMappingURL=SwatchPicker.d.ts.map

package/dist/types/components/SwatchPicker/swatch-picker-types.d.ts

@@ -0,0 +1,26 @@
+export interface SwatchPickerPreview {
+    /** CSS color used as the swatch base or as a complete flat-color preview. */
+    backgroundColor?: string;
+    /** CSS gradient used as the swatch image. */
+    backgroundImage?: string;
+    /** Optional preview-layer opacity, clamped to the inclusive 0–1 range. */
+    opacity?: number;
+}
+export interface SwatchPickerOption {
+    /** Stable value emitted when this option is selected. */
+    value: string;
+    /** Accessible option name; the visual preview never replaces this label. */
+    label: string;
+    preview: SwatchPickerPreview;
+    isInactive?: boolean;
+}
+export interface SwatchPickerSection {
+    /** Sections remain one radio group and are separated visually. */
+    options: SwatchPickerOption[];
+}
+export type SwatchPickerNavigationKey = 'ArrowDown' | 'ArrowLeft' | 'ArrowRight' | 'ArrowUp' | 'Home' | 'End';
+export declare function flattenSwatchPickerOptions(options: readonly SwatchPickerOption[], sections: readonly SwatchPickerSection[]): SwatchPickerOption[];
+export declare function resolveSwatchPickerTabIndex(options: readonly SwatchPickerOption[], value: string): number;
+export declare function resolveSwatchPickerNavigationIndex(options: readonly SwatchPickerOption[], currentIndex: number, key: SwatchPickerNavigationKey): number | null;
+export declare function normalizeSwatchPickerOpacity(opacity: number | undefined): number;
+//# sourceMappingURL=swatch-picker-types.d.ts.map

package/dist/types/components/conversation-types.d.ts

@@ -0,0 +1,55 @@
+export type ConversationItemState = 'default' | 'busy' | 'error';
+export type MessageDirection = 'incoming' | 'outgoing' | 'system';
+export type MessageGroupPosition = 'single' | 'first' | 'middle' | 'last';
+export type MessageDeliveryState = 'sending' | 'sent' | 'delivered' | 'read' | 'failed';
+export type MessageScrollerPosition = 'start' | 'end' | 'last-anchor';
+export type MessageComposerStatus = 'ready' | 'submitted' | 'streaming' | 'error';
+export interface ConversationAttachment {
+    id: string;
+    name: string;
+    mediaType?: string;
+    size?: string;
+    url?: string;
+}
+export type AgentActivityState = 'pending' | 'active' | 'complete' | 'error';
+export interface AgentActivityItem {
+    id: string;
+    label: string;
+    detail?: string;
+    state: AgentActivityState;
+}
+export interface AgentSource {
+    id: string;
+    title: string;
+    url: string;
+    description?: string;
+}
+export type AgentToolState = 'queued' | 'running' | 'success' | 'error' | 'denied';
+export type AgentResponsePart = {
+    id: string;
+    type: 'markdown';
+    content: string;
+    state: 'streaming' | 'complete';
+} | {
+    id: string;
+    type: 'activity';
+    items: AgentActivityItem[];
+} | {
+    id: string;
+    type: 'tool';
+    name: string;
+    label: string;
+    state: AgentToolState;
+    input?: unknown;
+    output?: unknown;
+    error?: string;
+} | {
+    id: string;
+    type: 'attachments';
+    items: ConversationAttachment[];
+} | {
+    id: string;
+    type: 'sources';
+    items: AgentSource[];
+};
+//# sourceMappingURL=conversation-types.d.ts.map