@trinityui/design-system 2.11.1 → 2.13.1

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

@@ -3,6 +3,8 @@
  */
 import type { ReactNode } from 'react';
 import type { SxProps, Theme } from '@mui/material';
+import type { HeadingLevel } from '../shared/headingLevel';
+import type { TrinityRootProps } from '../shared/rootProps';
 /**
  * A single line item shown inside the digest. Each highlight is a short,
  * scannable bullet — keep them under ~140 characters.
@@ -16,8 +18,18 @@ export interface AIDigestHighlight {
     text: string;
     /** When true, the highlight body is parsed as markdown. */
     markdown?: boolean;
-    /** Optional click handler — turns the row into a button. */
+    /**
+     * Optional click handler. The whole row becomes pressable: an invisible button covers it, and
+     * links inside the text keep their own clicks.
+     */
     onClick?: () => void;
+    /**
+     * Accessible name of the row's button when `onClick` is set, such as "Open the revenue report".
+     * The highlight text then describes the button. Without it, the button is named by the
+     * category and the text.
+     * @since 2.13.0
+     */
+    actionLabel?: string;
 }
 /**
  * Frequency hint shown alongside the title.
@@ -34,16 +46,29 @@ export type AIDigestCadence = 'daily' | 'weekly' | 'monthly' | 'quarterly' | 'cu
  * (visual identity) + `AITextBlock` (per-highlight markdown). No new
  * AI-styling primitives — colors and gradients flow through `AIContainer`.
  */
-export interface AIDigestCardProps {
+export interface AIDigestCardOwnProps {
     /** Title of the briefing. */
     title: string;
+    /**
+     * Heading level of the title, passed to AIContainer: 2 to 6 for h2 to h6. Set it to fit the
+     * page outline.
+     * @default 6 (the h6 the title rendered before the prop existed)
+     * @since 2.13.0
+     */
+    headingLevel?: HeadingLevel;
     /** Optional briefing subtitle, e.g. the date or window. */
     subtitle?: string;
     /** Pre-set cadence hint shown as an eyebrow. Default omitted. */
     cadence?: AIDigestCadence;
     /** Custom cadence label — overrides the `cadence` preset. */
     cadenceLabel?: string;
-    /** ISO timestamp of generation, formatted by the consumer if shown. */
+    /**
+     * When the digest was generated. It is shown as given, after the cadence
+     * label, so pass display text ("Today · 06:00 UTC") or a timestamp you have
+     * formatted. When the value is an ISO 8601 date or date-time
+     * ("2026-10-06T06:00:00Z"), it is also exposed as `<time datetime>` for
+     * assistive technology and parsers.
+     */
     generatedAt?: string;
     /** Per-line highlights. Render order is preserved. */
     highlights: AIDigestHighlight[];
@@ -62,9 +87,21 @@ export interface AIDigestCardProps {
      * "Show all" affordance. `0` (default) shows everything.
      */
     maxVisibleHighlights?: number;
-    /** sx overrides on the root container. */
+    /**
+     * Added to the root's own class names.
+     * @since 2.13.0
+     */
+    className?: string;
+    /** sx overrides on the root container (object, array or function), applied after its own styles. */
     sx?: SxProps<Theme>;
-    /** Accessible label override. Falls back to the title. */
+    /** Accessible label override. Falls back to the title. A consumer `aria-label` wins over both. */
     ariaLabel?: string;
 }
+/**
+ * Props for AIDigestCard: its own props, plus the HTML attributes of its root region `div`
+ * (`id`, `data-*`, `aria-*`), which reach the root (ADR-04, WI-40). The root owns
+ * `role="region"`.
+ */
+export interface AIDigestCardProps extends AIDigestCardOwnProps, TrinityRootProps<HTMLDivElement, AIDigestCardOwnProps> {
+}
 //# sourceMappingURL=types.d.ts.map

package/dist/components/AIDigestCard/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/AIDigestCard/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEpD;;;GAGG;AACH,MAAM,WAAW,iBAAiB;IAChC,+CAA+C;IAC/C,EAAE,EAAE,MAAM,CAAC;IACX,uEAAuE;IACvE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2DAA2D;IAC3D,IAAI,EAAE,MAAM,CAAC;IACb,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GACvB,OAAO,GACP,QAAQ,GACR,SAAS,GACT,WAAW,GACX,QAAQ,CAAC;AAEb;;;;;;GAMG;AACH,MAAM,WAAW,iBAAiB;IAChC,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iEAAiE;IACjE,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,6DAA6D;IAC7D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uEAAuE;IACvE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sDAAsD;IACtD,UAAU,EAAE,iBAAiB,EAAE,CAAC;IAChC,wDAAwD;IACxD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qDAAqD;IACrD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,6CAA6C;IAC7C,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,oEAAoE;IACpE,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,qEAAqE;IACrE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,0CAA0C;IAC1C,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IACpB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/AIDigestCard/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE5D;;;GAGG;AACH,MAAM,WAAW,iBAAiB;IAChC,+CAA+C;IAC/C,EAAE,EAAE,MAAM,CAAC;IACX,uEAAuE;IACvE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2DAA2D;IAC3D,IAAI,EAAE,MAAM,CAAC;IACb,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GACvB,OAAO,GACP,QAAQ,GACR,SAAS,GACT,WAAW,GACX,QAAQ,CAAC;AAEb;;;;;;GAMG;AACH,MAAM,WAAW,oBAAoB;IACnC,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iEAAiE;IACjE,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,6DAA6D;IAC7D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sDAAsD;IACtD,UAAU,EAAE,iBAAiB,EAAE,CAAC;IAChC,wDAAwD;IACxD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qDAAqD;IACrD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,6CAA6C;IAC7C,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,oEAAoE;IACpE,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,qEAAqE;IACrE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oGAAoG;IACpG,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IACpB,kGAAkG;IAClG,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,WAAW,iBAAkB,SAAQ,oBAAoB,EAAE,gBAAgB,CAAC,cAAc,EAAE,oBAAoB,CAAC;CAAG"}

package/dist/components/AppLayout/AIFab.d.ts

@@ -15,13 +15,34 @@ import React from 'react';
  * Props for AIFab component.
  */
 export interface AIFabProps {
-    /** Whether the AI panel is currently open */
+    /**
+     * Whether the AI panel is open: the button's `aria-expanded` (H-11).
+     * AppLayout hides its FAB while the panel is open, so there it is `true`
+     * only with AppLayout's `showFabWhenPanelOpen`.
+     * @default false
+     */
     open?: boolean;
+    /**
+     * Id of the panel the button opens, rendered as its `aria-controls`. Pass
+     * it only while that panel is in the document (AppLayout does).
+     * @since 2.13.0
+     */
+    controls?: string;
     /** Callback when the FAB is clicked */
     onClick?: () => void;
-    /** Position of the FAB */
+    /**
+     * Corner of the FAB. The names are logical (H-41): `right` is the inline
+     * end and `left` the inline start, so a right-to-left page puts
+     * `'bottom-right'` at the bottom left, with or without stylis-plugin-rtl;
+     * `top` and `bottom` are the block start and end.
+     * @default 'bottom-right'
+     */
     position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
-    /** Custom offset from the edge (in pixels) */
+    /**
+     * Offset from the corner in px: `x` from the inline edge, `y` from the
+     * block edge.
+     * @default { x: 24, y: 24 }
+     */
     offset?: {
         x?: number;
         y?: number;
@@ -32,18 +53,24 @@ export interface AIFabProps {
     badgeContent?: number | string;
     /** Size of the FAB */
     size?: 'small' | 'medium' | 'large';
-    /** Tooltip text */
+    /**
+     * Tooltip text, also the button's name. Wins over the AI strings catalog.
+     * @default ai.fab.tooltip ('Ask AI')
+     */
     tooltip?: string;
     /** Whether the FAB is disabled */
     disabled?: boolean;
-    /** Custom z-index */
+    /** z-index of the button. Default: the theme's `aiFab` layer role (`zIndex.drawer + 1`, ADR-03-R12). */
     zIndex?: number;
 }
 /**
  * AIFab - Floating Action Button for launching AI chat
  *
  * A beautifully styled FAB with Trinity AI branding that can be used
- * to open the InsightEnginePanel from anywhere in the application.
+ * to open the InsightEnginePanel from anywhere in the application. AppLayout
+ * renders it for `aiTrigger="fab"` and hides it while the AI panel is open
+ * (owner decision 2026-10-09); it comes back, with focus, when the panel
+ * closes.
  */
 export declare const AIFab: React.ForwardRefExoticComponent<AIFabProps & React.RefAttributes<HTMLDivElement>>;
 export default AIFab;

package/dist/components/AppLayout/AIFab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AIFab.d.ts","sourceRoot":"","sources":["../../../src/components/AppLayout/AIFab.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,uCAAuC;IACvC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,cAAc,GAAG,aAAa,GAAG,WAAW,GAAG,UAAU,CAAC;IACrE,8CAA8C;IAC9C,MAAM,CAAC,EAAE;QAAE,CAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACpC,wDAAwD;IACxD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oCAAoC;IACpC,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,sBAAsB;IACtB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,mBAAmB;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;GAKG;AACH,eAAO,MAAM,KAAK,mFAgGhB,CAAC;AAEH,eAAe,KAAK,CAAC"}
+{"version":3,"file":"AIFab.d.ts","sourceRoot":"","sources":["../../../src/components/AppLayout/AIFab.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAoB1B;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uCAAuC;IACvC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,cAAc,GAAG,aAAa,GAAG,WAAW,GAAG,UAAU,CAAC;IACrE;;;;OAIG;IACH,MAAM,CAAC,EAAE;QAAE,CAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACpC,wDAAwD;IACxD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oCAAoC;IACpC,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,sBAAsB;IACtB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wGAAwG;IACxG,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,KAAK,mFAoHhB,CAAC;AAEH,eAAe,KAAK,CAAC"}

package/dist/components/AppLayout/AIFabLayout.deprecated.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AIFabLayout.deprecated.d.ts","sourceRoot":"","sources":["../../../src/components/AppLayout/AIFabLayout.deprecated.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAa,cAAc,EAAE,MAAM,aAAa,CAAC;AAGxD;;;GAGG;AACH,eAAO,MAAM,WAAW,uFAQtB,CAAC"}
+{"version":3,"file":"AIFabLayout.deprecated.d.ts","sourceRoot":"","sources":["../../../src/components/AppLayout/AIFabLayout.deprecated.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAa,cAAc,EAAE,MAAM,aAAa,CAAC;AAGxD;;;GAGG;AACH,eAAO,MAAM,WAAW,uFAStB,CAAC"}

package/dist/components/AppLayout/AppLayout.d.ts

@@ -28,6 +28,18 @@
  * </AppLayout>
  * ```
  *
+ * @example AI panel docked at the start (left in LTR, right in RTL), content at the end
+ * ```tsx
+ * <AppLayout
+ *   navStyle="topnav"
+ *   aiTrigger="fab"
+ *   aiPanelSide="start"
+ *   companyName="Acme Corp"
+ * >
+ *   <YourContent />
+ * </AppLayout>
+ * ```
+ *
  * @example Sidebar navigation with no AI integration
  * ```tsx
  * <AppLayout
@@ -66,6 +78,19 @@ export interface NavItem {
     badge?: number;
     isSpecial?: boolean;
 }
+/**
+ * What `renderAiPanel` receives: the panel's own controls, so a custom AI
+ * surface can close the panel and toggle fullscreen like InsightEnginePanel.
+ * @since 2.13.0
+ */
+export interface AppLayoutAiPanelApi {
+    /** Closes the panel (and leaves fullscreen). Focus handling is the caller's. */
+    onClose: () => void;
+    /** Whether the panel fills the content area. */
+    isFullscreen: boolean;
+    /** Enters or leaves fullscreen. */
+    onFullscreenToggle: () => void;
+}
 /**
  * Props for AppLayout component.
  */
@@ -93,15 +118,24 @@ export interface AppLayoutProps {
      */
     navItems?: NavItem[];
     /**
-     * Currently selected navigation item ID (controlled).
-     * If not provided, no item will be highlighted.
+     * Currently selected navigation item ID (controlled). The sidebar highlight and
+     * `aria-current` follow it on every render; a click does not move them until you
+     * update it from `onSelectedNavItemChange`. Leave it `undefined` to let the sidebar
+     * keep the selection, starting from `defaultSelectedNavItem`.
      */
     selectedNavItem?: string;
+    /**
+     * The item selected first when `selectedNavItem` is not passed (uncontrolled). Read on
+     * the first render only.
+     * @default 'home'
+     * @since 2.13.0
+     */
+    defaultSelectedNavItem?: string;
     /**
      * Callback when selected navigation item changes.
-     * Called when user clicks a non-AI nav item.
+     * Called when user clicks a non-AI nav item, with the new and the previously selected ID.
      */
-    onSelectedNavItemChange?: (itemId: string) => void;
+    onSelectedNavItemChange?: (itemId: string, previousId?: string) => void;
     /**
      * User information for the avatar/menu.
      * The `initials` field should be provided; if omitted, no initials will be displayed.
@@ -112,9 +146,16 @@ export interface AppLayoutProps {
         initials?: string;
     };
     /**
-     * Client name for the client selector
+     * Client name for the client selector, on every render (controlled): update it from
+     * `onClientChange`. Leave it unset to let the selector keep the user's choice.
      */
     clientName?: string;
+    /**
+     * The client name shown first when `clientName` is not passed (uncontrolled).
+     * @default 'Long Client Name 1'
+     * @since 2.13.1
+     */
+    defaultClientName?: string;
     /**
      * Show or hide the client selector in the header.
      * @default true
@@ -152,18 +193,112 @@ export interface AppLayoutProps {
      */
     onNavigate?: (itemId: string) => void;
     /**
-     * Props passed to the AIFab component (when aiTrigger='fab')
+     * Props passed to the AIFab component (when aiTrigger='fab'). The FAB opens
+     * the AI panel and is hidden while the panel is open (see
+     * `showFabWhenPanelOpen`).
      */
     fabProps?: Partial<AIFabProps>;
     /**
-     * Props passed to the InsightEnginePanel component
+     * Keep the AI FAB on screen while the docked AI panel is open: it sits
+     * beside the panel (its offset follows the panel width) and closes the
+     * panel, as before 2.13.0. By default the FAB is hidden whenever the panel
+     * is open (docked, fullscreen or the mobile drawer); the panel's own Close
+     * (or Escape in the drawer, or the AI nav item) closes it, and the FAB comes
+     * back with focus when the panel was opened from it. The FAB never floats
+     * over a fullscreen panel or the mobile drawer, with or without this prop.
+     * @default false
+     * @since 2.13.0
+     */
+    showFabWhenPanelOpen?: boolean;
+    /**
+     * Props passed to the InsightEnginePanel component. Ignored when
+     * `renderAiPanel` is passed (a development warning says so).
+     *
+     * Without `panelProps.onSendMessage` or `panelProps.messages`, and without
+     * `panelProps.demoMode`, the panel answers with demo responses, labelled
+     * 'Demo responses' in its title, and a one-time development warning asks
+     * for an explicit `panelProps.demoMode` (the default becomes `false` in
+     * v3.0). Wire `onSendMessage` (or `messages`) for a real chat, or pass
+     * `demoMode: true` to keep the demo without the warning.
      */
     panelProps?: Partial<InsightEnginePanelProps>;
     /**
-     * Custom panel width
+     * Renders your own AI surface in the AI panel instead of
+     * InsightEnginePanel, inside the same resizable panel, trigger and
+     * geometry (width, content margin, FAB, fullscreen). It receives the
+     * panel's controls (`onClose`, `isFullscreen`, `onFullscreenToggle`) to
+     * wire into your header. When both `renderAiPanel` and `panelProps` are
+     * passed, `renderAiPanel` wins and a development warning fires once.
+     * @since 2.13.0
+     */
+    renderAiPanel?: (api: AppLayoutAiPanelApi) => React.ReactNode;
+    /**
+     * Keep the AI panel mounted while it is closed, so its state (a draft in
+     * the composer, the conversation, the scroll position) survives closing
+     * and reopening. The closed panel is hidden, inert and out of the Tab
+     * sequence (ResizablePanel `keepMounted`). Closing still leaves fullscreen.
+     * @default false
+     * @since 2.13.0
+     */
+    keepAiPanelMounted?: boolean;
+    /**
+     * How the AI panel opens below the `md` breakpoint (phones and small
+     * tablets). `'drawer'`: a full-width modal drawer (`role="dialog"`,
+     * `aria-modal`, named by the panel title or "AI assistant"): focus stays
+     * inside it, Escape closes it, the page behind it is inert, and it has no
+     * content margin, no resize handle and no FAB over it; closing returns focus
+     * to the control that opened it. `'docked'`: the desktop panel at every
+     * width (the behavior before 2.13.0). `keepAiPanelMounted` applies to both.
+     * @default 'drawer'
+     * @since 2.13.0
+     */
+    mobilePanelPresentation?: 'drawer' | 'docked';
+    /**
+     * Initial width of the AI panel in px, kept within the panel's resize range
+     * (320–800). Users can resize the panel by dragging its edge or with the
+     * keyboard (its "Resize panel" window splitter); the main content margin
+     * (and, with `showFabWhenPanelOpen`, the AI FAB beside the panel) follows the
+     * live width, so page content is not left under the panel. After a key press (or a new `aiPanelWidth`) the margin animates
+     * with the panel's own width animation, so both edges move together; it
+     * does not animate during a drag, under reduced motion or when the panel
+     * leaves fullscreen (the panel docks at once), and opening or closing the
+     * panel keeps its 225ms margin animation. The resized width is
+     * kept while AppLayout stays mounted, including
+     * when the panel is closed and reopened. Changing this prop resets the
+     * panel, the margin and the FAB to the new width. NaN falls back to 420.
      * @default 420
      */
     aiPanelWidth?: number;
+    /**
+     * Which side the AI panel docks on, as a logical side. `'end'`: the inline
+     * end (right in a left-to-right layout, left under a right-to-left theme),
+     * as before 2.13.0. `'start'`: the inline start (left in a left-to-right
+     * layout, right under a right-to-left theme), so the chat sits before the
+     * page content.
+     *
+     * Everything that belongs to the panel's side follows it: the content keeps
+     * clear of the panel with `marginInlineStart` instead of `marginInlineEnd`;
+     * the resize handle sits on the panel's inner edge (the one facing the
+     * content), and the arrow keys move it in their own direction (Right Arrow
+     * widens a start panel left to right, Left Arrow right to left); the AI FAB
+     * moves to the bottom start corner; and the mobile drawer slides in from
+     * the start edge. With `navStyle="sidebar"` the order is navigation, AI
+     * panel, content: the panel docks beside the sidebar at its current width
+     * (expanded or collapsed) and moves with it, and the content margin clears
+     * both. Fullscreen, focus handling, the panel landmark and the motion are
+     * the same on both sides.
+     *
+     * @default 'end'
+     * @since 2.13.0
+     * @example
+     * ```tsx
+     * // Chat on the left, page content on the right (left to right).
+     * <AppLayout navStyle="sidebar" navItems={navItems} aiPanelSide="start">
+     *   <YourContent />
+     * </AppLayout>
+     * ```
+     */
+    aiPanelSide?: 'end' | 'start';
     /**
      * SX props for the content wrapper
      */

package/dist/components/AppLayout/AppLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppLayout.d.ts","sourceRoot":"","sources":["../../../src/components/AppLayout/AppLayout.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AAEH,OAAO,KAAgC,MAAM,OAAO,CAAC;AACrD,OAAO,EAAgC,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAI7E,OAAO,EAAsB,KAAK,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAExF,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAOjD;;;;GAIG;AACH,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE5C;;;;;GAKG;AACH,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,KAAK,GAAG,MAAM,CAAC;AAEnD;;GAEG;AACH,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,+CAA+C;IAC/C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;IAErB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,uBAAuB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnD;;;OAGG;IACH,IAAI,CAAC,EAAE;QACL,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;IAEF;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B;;OAEG;IACH,OAAO,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAEzC;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAE5C;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAEtC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IAE/B;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC,uBAAuB,CAAC,CAAC;IAE9C;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IAE3B;;;;;;;;;;;;OAYG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;;;;;;;OAQG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CACnC;AA8FD,eAAO,MAAM,SAAS,uFA2QpB,CAAC;AAEH,eAAe,SAAS,CAAC"}
+{"version":3,"file":"AppLayout.d.ts","sourceRoot":"","sources":["../../../src/components/AppLayout/AppLayout.tsx"],"names":[],"mappings":"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"}