@ds-mo/ui 3.2.1 → 4.0.0

package/dist/.build-stamp

@@ -1 +1 @@
-1783825797406
+1783831860713

package/dist/agent.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": "1.0.0",
   "package": "@ds-mo/ui",
-  "packageVersion": "3.2.1",
+  "packageVersion": "4.0.0",
   "kind": "components",
   "entries": [
     {
@@ -28,7 +28,8 @@
         "commonlyComposedWith": [
           "component:ds-panel-nav",
           "component:ds-bar-nav",
-          "component:ds-panel-tools"
+          "component:ds-panel-tools",
+          "component:ds-shell-gradient-picker"
         ],
         "patterns": [
           "pattern:application-shell"
@@ -46,6 +47,8 @@
           "PanelNav, BarNav, and PanelTools are required shell regions; PanelTools contains at least Search and Help even when no additional product tools apply.",
           "The application router owns the current route, authorization filtering, Dashboard or Settings context, destination collections, section collections, and localized content labels.",
           "AppShell propagates navStyle and coordinates layout, gradient alignment, transitions, metrics, shortcuts, and responsive composition.",
+          "Set gradientPreset to the single resolved global chrome preference: neutral by default, none for solid chrome, or cool, neutral, warm, and fresh for token-based washes.",
+          "The application owns gradient preference persistence, cross-tab synchronization, and server or account precedence; AppShell owns rendering the resolved preset across authenticated routes.",
           "Dashboard represents day-to-day operational work while Settings represents administrative and configuration work; route state selects the context.",
           "Update PanelNav groups, BarNav tabs and heading, navStyle, basePath, and currentUrl atomically from one resolved route state.",
           "BarNav remains present: it shows route-section tabs when available and the active PanelNav destination label as heading otherwise.",
@@ -95,18 +98,10 @@
       },
       "api": {
         "props": {
-          "gradient": {
-            "type": "boolean",
-            "required": false
-          },
           "gradientPreset": {
             "type": "ShellGradientPreset",
             "required": false
           },
-          "gradientSrc": {
-            "type": "string",
-            "required": false
-          },
           "navStyle": {
             "type": "NavChromeStyle",
             "required": false
@@ -1479,7 +1474,8 @@
         "states": [
           "The host owns open state and responds to selection and close events.",
           "Use either flat items or sections, not both.",
-          "Arrays, objects, and element anchors must be assigned as JavaScript properties."
+          "Arrays, objects, and element anchors must be assigned as JavaScript properties.",
+          "Use one gradient-picker section in the user or account Appearance or Theme menu for the global AppShell wash preference; apply dsGradientSelect immediately without closing the menu."
         ],
         "responsiveBehavior": [
           "Choose placement relative to the trigger and allow the component to clamp the popup to the viewport.",
@@ -1930,9 +1926,106 @@
       "tag": "ds-panel-tools",
       "name": "panel-tools",
       "title": "PanelTools",
-      "summary": "PanelTools component from @ds-mo/ui.",
-      "intentStatus": "migration-pending",
-      "intent": null,
+      "summary": "Required AppShell utility rail and persistent drawer host for the fixed set of global Search, Agents, Messages, Stacks, Activity, and Help products.",
+      "intentStatus": "complete",
+      "intent": {
+        "audience": "specialized",
+        "status": "stable",
+        "summary": "Required AppShell utility rail and persistent drawer host for the fixed set of global Search, Agents, Messages, Stacks, Activity, and Help products.",
+        "useWhen": [
+          "Composing the required global tools region inside the application's single AppShell.",
+          "Users need to move between application-wide utilities without losing each tool's in-progress state.",
+          "Search, AI conversations, user messages, review stacks, notifications, or help content must remain available alongside route content."
+        ],
+        "avoidWhen": [
+          "The action is specific to the current page or selected content rather than globally available across the application.",
+          "The item navigates to a primary or secondary route; use PanelNav or BarNav instead.",
+          "A consumer wants to add arbitrary tools, reorder fixed tools, or repurpose a semantic tool id.",
+          "Building the mobile tools experience; future mobile AppShell composition uses a different bottom-bar and panel pattern.",
+          "PanelTools would be mounted outside the application's single AppShell."
+        ],
+        "alternatives": [
+          {
+            "when": "The action navigates to a top-level application destination.",
+            "component": "component:ds-panel-nav",
+            "reason": "PanelNav exclusively owns primary application navigation."
+          },
+          {
+            "when": "The action navigates between route sections of the active destination.",
+            "component": "component:ds-bar-nav",
+            "reason": "BarNav exclusively owns secondary route navigation."
+          },
+          {
+            "when": "Temporary contextual actions or options are needed.",
+            "component": "component:ds-menu",
+            "reason": "Menu owns transient contextual choices rather than persistent global products."
+          }
+        ],
+        "commonlyComposedWith": [
+          "component:ds-app-shell",
+          "component:ds-panel-nav",
+          "component:ds-bar-nav"
+        ],
+        "patterns": [
+          "pattern:application-shell"
+        ],
+        "accessibility": [
+          "Provide localized accessible labels for the rail, shortcut group, and every rendered tool.",
+          "Keep Search first in the rail header and Help last in the rail footer so keyboard and visual order remain predictable.",
+          "Keep focus on the selected rail action when opening a drawer and allow normal Tab navigation into its content.",
+          "Do not trigger global shortcuts while focus is in an editable control.",
+          "Use notification dots only as supplemental unread or new-content status and never as the sole status indication.",
+          "Explain temporarily inactive tools through an accessible label or adjacent product guidance; omit unauthorized tools entirely."
+        ],
+        "states": [
+          "Search and Help are required; optional Agents, Messages, Stacks, and Activity tools are filtered by the application for authorization and entitlement.",
+          "Use only the fixed semantic tool ids and canonical order: Search, Agents, Messages, Stacks, Activity, Help; do not reorder, duplicate, or repurpose them.",
+          "Search is application-wide; Agents is user-to-AI chat; Messages is user-to-user chat; Stacks is a specialized inbox of grouped application events for review; Activity is the notification center; Help is drawer content that may link to external resources.",
+          "Only one drawer is open at a time; selecting another tool switches directly and selecting the active tool closes to rail-only mode.",
+          "The drawer starts closed, remains open across ordinary route changes, and retains every mounted tool's independent conversation, query, scroll, and work state.",
+          "When storageKey is set, persist only the last active tool in this browser and still restore the drawer closed after reload.",
+          "The application owns unread state; opening Messages, Agents, Stacks, or Activity does not automatically clear its notification dot.",
+          "If an active optional tool becomes unavailable, PanelTools closes the drawer, clears activeTool, and emits its deselection.",
+          "Use isInactive only for a temporarily unavailable visible tool; omit tools the user is not authorized to access.",
+          "The application owns slotted tool products and data while PanelTools owns rail ordering, drawer selection, open state, motion, and shell events."
+        ],
+        "responsiveBehavior": [
+          "On desktop at 1200px and wider, the open drawer reduces main-content width and uses --dimension-panel-width-sm (400px).",
+          "On tablet from 768px through 1199px, the open drawer also reduces main-content width and uses --dimension-panel-width-xs (300px).",
+          "AppShell owns the responsive drawer-width variable and fixed breakpoint policy; consumers must not hardcode alternate drawer widths.",
+          "Below 768px, do not reuse desktop PanelTools: future AppShell mobile composition uses a bottom bar for Search, Agents, Notifications, and Stacks, while Help moves into mobile primary navigation.",
+          "Keep named-slot content mounted while tools switch or the drawer closes so users can return to in-progress global work.",
+          "Use fixed drawer widths for now; do not add user resizing or width persistence."
+        ],
+        "frameworkCaveats": {
+          "customElements": [
+            "Assign items as a JavaScript property for structured data; items-json is the string fallback.",
+            "Keep PanelTools mounted at AppShell scope across route changes and provide each product through its matching named slot."
+          ],
+          "react": [
+            "Pass the fixed item collection through the generated React wrapper and keep named-slot product content mounted at AppShell scope.",
+            "Use storageKey only for same-browser last-tool continuity; do not persist the open drawer."
+          ],
+          "angular": [
+            "Import DsPanelTools from @ds-mo/ui/angular/ds-panel-tools and bind items as a property.",
+            "Keep the component in the persistent shell layout rather than recreating it in routed page components."
+          ]
+        },
+        "references": [
+          {
+            "label": "Executable Storybook examples",
+            "path": "src/wc/components/PanelTools/PanelTools.stories.ts"
+          },
+          {
+            "label": "Framework and shell integration",
+            "path": "docs/framework-integration.md"
+          },
+          {
+            "label": "Application shell composition",
+            "path": "agent/patterns/application-shell/pattern.agent.json"
+          }
+        ]
+      },
       "api": {
         "props": {
           "activeTool": {
@@ -1951,6 +2044,10 @@
             "type": "boolean",
             "required": false
           },
+          "storageKey": {
+            "type": "string",
+            "required": false
+          },
           "toolShortcutsLabel": {
             "type": "string",
             "required": false
@@ -2159,9 +2256,78 @@
       "tag": "ds-shell-gradient-picker",
       "name": "shell-gradient-picker",
       "title": "ShellGradientPicker",
-      "summary": "ShellGradientPicker component from @ds-mo/ui.",
-      "intentStatus": "migration-pending",
-      "intent": null,
+      "summary": "The canonical compact control for selecting the single global AppShell chrome wash preference from fixed token-based presets.",
+      "intentStatus": "complete",
+      "intent": {
+        "audience": "specialized",
+        "status": "stable",
+        "summary": "The canonical compact control for selecting the single global AppShell chrome wash preference from fixed token-based presets.",
+        "useWhen": [
+          "Adding the Appearance or Theme section to the application's user or account menu.",
+          "Users must choose the global AppShell chrome treatment from none, cool, neutral, warm, or fresh."
+        ],
+        "avoidWhen": [
+          "Choosing semantic intent, page background, chart, content, or brand colors.",
+          "Building an arbitrary gradient editor or allowing custom gradient values.",
+          "A picker already exists for the application; provide exactly one canonical preference location.",
+          "Rendering an individual swatch outside the complete picker."
+        ],
+        "alternatives": [
+          {
+            "when": "The user is selecting the application light, dark, or system color mode.",
+            "component": "component:ds-menu",
+            "reason": "Color mode is a separate appearance preference and should use ordinary menu selection rows."
+          }
+        ],
+        "commonlyComposedWith": [
+          "component:ds-app-shell",
+          "component:ds-menu"
+        ],
+        "patterns": [
+          "pattern:application-shell"
+        ],
+        "accessibility": [
+          "Provide a localized groupLabel that describes the shell appearance choice.",
+          "Treat the presets as one radio group with one Tab stop; Arrow keys, Home, and End move and select within the group.",
+          "Keep the visible compact swatches and their accessible preset names; do not rely on color alone for assistive technology."
+        ],
+        "states": [
+          "Neutral is the default preset; none renders solid shell chrome without a wash.",
+          "Cool, neutral, warm, and fresh use design tokens and automatically adapt to the active light or dark color theme.",
+          "Apply dsChange immediately to AppShell.gradientPreset and keep the containing account menu open.",
+          "The application owns local persistence, cross-tab synchronization, and server or account preference precedence; the picker owns only selection UI and events.",
+          "Treat the fixed preset union as the only supported values and do not construct custom gradients."
+        ],
+        "responsiveBehavior": [
+          "Keep the compact picker in the user or account appearance menu on supported desktop and tablet shell compositions.",
+          "The future mobile account surface may present the same preference differently."
+        ],
+        "frameworkCaveats": {
+          "customElements": [
+            "Listen for dsChange, resolve application preference precedence, and assign the result to the single AppShell gradientPreset property."
+          ],
+          "react": [
+            "Use the generated wrapper and handle onDsChange without closing the containing account menu."
+          ],
+          "angular": [
+            "Bind value to the resolved preference and handle dsChange to update application state."
+          ]
+        },
+        "references": [
+          {
+            "label": "Executable stories",
+            "path": "src/wc/components/ShellGradientPicker/ShellGradientPicker.stories.ts"
+          },
+          {
+            "label": "AppShell gradient contract",
+            "path": "src/wc/components/AppShell/AppShell.mdx"
+          },
+          {
+            "label": "Application shell composition",
+            "path": "agent/patterns/application-shell/pattern.agent.json"
+          }
+        ]
+      },
       "api": {
         "props": {
           "groupLabel": {
@@ -2199,9 +2365,61 @@
       "tag": "ds-shell-gradient-swatch",
       "name": "shell-gradient-swatch",
       "title": "ShellGradientSwatch",
-      "summary": "ShellGradientSwatch component from @ds-mo/ui.",
-      "intentStatus": "migration-pending",
-      "intent": null,
+      "summary": "Internal radio swatch used by ShellGradientPicker to preview one fixed AppShell chrome preset.",
+      "intentStatus": "complete",
+      "intent": {
+        "audience": "internal",
+        "status": "stable",
+        "summary": "Internal radio swatch used by ShellGradientPicker to preview one fixed AppShell chrome preset.",
+        "useWhen": [
+          "Maintaining or extending ShellGradientPicker inside CompoMo."
+        ],
+        "avoidWhen": [
+          "Building application UI directly; use ShellGradientPicker instead.",
+          "Selecting semantic, brand, chart, page, or arbitrary gradient colors.",
+          "Creating a partial or custom set of shell gradient choices."
+        ],
+        "alternatives": [
+          {
+            "when": "An application needs the supported global shell appearance control.",
+            "component": "component:ds-shell-gradient-picker",
+            "reason": "The picker provides the complete preset set, radio semantics, keyboard behavior, and selection event."
+          }
+        ],
+        "commonlyComposedWith": [
+          "component:ds-shell-gradient-picker"
+        ],
+        "accessibility": [
+          "Keep radio semantics, aria-checked state, and a preset-specific accessible name on the internal button.",
+          "Let ShellGradientPicker manage the roving tab stop and group keyboard navigation.",
+          "Do not expose an unlabeled color-only choice."
+        ],
+        "states": [
+          "Preset determines the token-based preview; selected determines radio state and selected visuals.",
+          "The selected swatch owns the radio group's single tab stop while ShellGradientPicker coordinates selection and focus movement.",
+          "isInactive disables interaction but does not remove the accessible name."
+        ],
+        "responsiveBehavior": [
+          "Preserve the fixed compact swatch geometry and let ShellGradientPicker own layout."
+        ],
+        "frameworkCaveats": {
+          "customElements": [
+            "Do not instantiate this internal primitive in consuming applications."
+          ],
+          "react": [
+            "Use DsShellGradientPicker rather than the generated swatch wrapper."
+          ],
+          "angular": [
+            "Use DsShellGradientPicker rather than importing DsShellGradientSwatch."
+          ]
+        },
+        "references": [
+          {
+            "label": "Parent picker",
+            "path": "src/wc/components/ShellGradientPicker/ShellGradientPicker.tsx"
+          }
+        ]
+      },
       "api": {
         "props": {
           "ariaLabel": {

package/dist/angular/ds-app-shell.d.ts

@@ -6,7 +6,7 @@ export declare class DsAppShell {
     protected el: HTMLDsAppShellElement;
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<DsAppShell, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DsAppShell, "ds-app-shell", never, { "gradient": { "alias": "gradient"; "required": false; }; "gradientPreset": { "alias": "gradientPreset"; "required": false; }; "gradientSrc": { "alias": "gradientSrc"; "required": false; }; "navStyle": { "alias": "navStyle"; "required": false; }; "shortcutsEnabled": { "alias": "shortcutsEnabled"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DsAppShell, "ds-app-shell", never, { "gradientPreset": { "alias": "gradientPreset"; "required": false; }; "navStyle": { "alias": "navStyle"; "required": false; }; "shortcutsEnabled": { "alias": "shortcutsEnabled"; "required": false; }; }, {}, never, ["*"], true, never>;
 }
 export declare interface DsAppShell extends Components.DsAppShell {
 }

package/dist/angular/ds-app-shell.js

@@ -17,12 +17,12 @@ let DsAppShell = class DsAppShell {
         this.el = r.nativeElement;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DsAppShell, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: DsAppShell, isStandalone: true, selector: "ds-app-shell", inputs: { gradient: "gradient", gradientPreset: "gradientPreset", gradientSrc: "gradientSrc", navStyle: "navStyle", shortcutsEnabled: "shortcutsEnabled" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: DsAppShell, isStandalone: true, selector: "ds-app-shell", inputs: { gradientPreset: "gradientPreset", navStyle: "navStyle", shortcutsEnabled: "shortcutsEnabled" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 DsAppShell = __decorate([
     ProxyCmp({
         defineCustomElementFn: defineDsAppShell,
-        inputs: ['gradient', 'gradientPreset', 'gradientSrc', 'navStyle', 'shortcutsEnabled']
+        inputs: ['gradientPreset', 'navStyle', 'shortcutsEnabled']
     })
 ], DsAppShell);
 export { DsAppShell };
@@ -33,6 +33,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['gradient', 'gradientPreset', 'gradientSrc', 'navStyle', 'shortcutsEnabled'],
+                    inputs: ['gradientPreset', 'navStyle', 'shortcutsEnabled'],
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }] });

package/dist/angular/ds-panel-tools.d.ts

@@ -15,7 +15,7 @@ export declare class DsPanelTools {
     dsChromeTransitionEnd: EventEmitter<DsPanelToolsCustomEvent<IDsPanelToolsChromeTransitionDetail>>;
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<DsPanelTools, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DsPanelTools, "ds-panel-tools", never, { "activeTool": { "alias": "activeTool"; "required": false; }; "items": { "alias": "items"; "required": false; }; "itemsJson": { "alias": "itemsJson"; "required": false; }; "open": { "alias": "open"; "required": false; }; "toolShortcutsLabel": { "alias": "toolShortcutsLabel"; "required": false; }; "toolsLabel": { "alias": "toolsLabel"; "required": false; }; }, { "dsToolChange": "dsToolChange"; "dsChromeTransitionStart": "dsChromeTransitionStart"; "dsChromeTransitionEnd": "dsChromeTransitionEnd"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DsPanelTools, "ds-panel-tools", never, { "activeTool": { "alias": "activeTool"; "required": false; }; "items": { "alias": "items"; "required": false; }; "itemsJson": { "alias": "itemsJson"; "required": false; }; "open": { "alias": "open"; "required": false; }; "storageKey": { "alias": "storageKey"; "required": false; }; "toolShortcutsLabel": { "alias": "toolShortcutsLabel"; "required": false; }; "toolsLabel": { "alias": "toolsLabel"; "required": false; }; }, { "dsToolChange": "dsToolChange"; "dsChromeTransitionStart": "dsChromeTransitionStart"; "dsChromeTransitionEnd": "dsChromeTransitionEnd"; }, never, ["*"], true, never>;
 }
 export declare interface DsPanelTools extends Components.DsPanelTools {
     /**

package/dist/angular/ds-panel-tools.js

@@ -20,12 +20,12 @@ let DsPanelTools = class DsPanelTools {
         this.el = r.nativeElement;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DsPanelTools, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: DsPanelTools, isStandalone: true, selector: "ds-panel-tools", inputs: { activeTool: "activeTool", items: "items", itemsJson: "itemsJson", open: "open", toolShortcutsLabel: "toolShortcutsLabel", toolsLabel: "toolsLabel" }, outputs: { dsToolChange: "dsToolChange", dsChromeTransitionStart: "dsChromeTransitionStart", dsChromeTransitionEnd: "dsChromeTransitionEnd" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: DsPanelTools, isStandalone: true, selector: "ds-panel-tools", inputs: { activeTool: "activeTool", items: "items", itemsJson: "itemsJson", open: "open", storageKey: "storageKey", toolShortcutsLabel: "toolShortcutsLabel", toolsLabel: "toolsLabel" }, outputs: { dsToolChange: "dsToolChange", dsChromeTransitionStart: "dsChromeTransitionStart", dsChromeTransitionEnd: "dsChromeTransitionEnd" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 DsPanelTools = __decorate([
     ProxyCmp({
         defineCustomElementFn: defineDsPanelTools,
-        inputs: ['activeTool', 'items', 'itemsJson', 'open', 'toolShortcutsLabel', 'toolsLabel'],
+        inputs: ['activeTool', 'items', 'itemsJson', 'open', 'storageKey', 'toolShortcutsLabel', 'toolsLabel'],
         methods: ['activateTool', 'closeDrawer']
     })
 ], DsPanelTools);
@@ -37,7 +37,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['activeTool', 'items', 'itemsJson', 'open', 'toolShortcutsLabel', 'toolsLabel'],
+                    inputs: ['activeTool', 'items', 'itemsJson', 'open', 'storageKey', 'toolShortcutsLabel', 'toolsLabel'],
                     outputs: ['dsToolChange', 'dsChromeTransitionStart', 'dsChromeTransitionEnd'],
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { dsToolChange: [{

package/dist/components/ds-app-shell.js

@@ -1,2 +1,2 @@
-import{p as e,t as s,H as t,h as n,a as i}from"./index.js";import{D as a,r as l,d as o,e as r,f as h,g as c,h as p,s as d,i as f,j as u,b,k as g}from"./p-Bz3jyrDV.js";import{C as v,c as m,r as y,a as _,b as x}from"./p-NkAPA-Dz.js";const w={k:"search",a:"agents",s:"stacks",m:"messages",n:"activity"};function k(e){return!e.metaKey&&!e.ctrlKey&&!e.altKey&&!e.shiftKey}function P(e){if(!e||typeof e!=="object")return false;if(!("closest"in e)||typeof e.closest!=="function")return false;const s=e;const t=s.closest('input, textarea, select, [contenteditable=""], [contenteditable="true"], [contenteditable="plaintext-only"]');if(t)return true;const n=s.getAttribute("role");if(n==="textbox"||n==="combobox"||n==="searchbox")return true;return Boolean(s.isContentEditable)}function S(e){if(e.key==="["||e.code==="BracketLeft")return"[";if(e.key==="]"||e.code==="BracketRight")return"]";return e.key.length===1?e.key.toLowerCase():e.key.toLowerCase()}function z(e){if(!k(e))return null;const s=S(e);if(s==="[")return"toggle-panel-nav";if(s==="]")return"close-panel-tools";const t=w[s];if(t)return`open-tool:${t}`;return null}function C(e,s){if(typeof document==="undefined")return 0;const t=document.createElement("div");t.style.cssText="position:absolute;visibility:hidden;pointer-events:none;height:0;width:var("+s+");";e.appendChild(t);const n=t.getBoundingClientRect().width;e.removeChild(t);return n}function j(e){return{expandedPx:C(e,"--_nav-width"),collapsedPx:C(e,"--_nav-width-collapsed")}}function D(e,s){if(s?.classList.contains("panel-nav--collapsed"))return true;const t=e?.collapsed;return t===true}function V(e,s){return s?e.collapsedPx:e.expandedPx}const L=()=>`.sc-ds-app-shell-h{display:block;height:100%;min-height:0;box-sizing:border-box}.app-shell.sc-ds-app-shell{display:flex;flex-direction:column;height:100%;min-height:0;box-sizing:border-box;font-family:var(--typography-font-family, system-ui)}.app-shell--gradient.sc-ds-app-shell-h{--_shell-chrome-bg:var(--color-background-secondary)}.app-shell__row.sc-ds-app-shell{display:flex;flex:1 1 auto;min-height:0;height:100%;position:relative}.app-shell__chrome.sc-ds-app-shell{position:absolute;inset:0;pointer-events:none;z-index:0}.app-shell--gradient.sc-ds-app-shell-h .app-shell__chrome.sc-ds-app-shell{background-color:var(--_shell-chrome-bg)}.app-shell--gradient.sc-ds-app-shell-h .app-shell__chrome.sc-ds-app-shell::before{content:'';position:absolute;inset:0;pointer-events:none;background-position:0 0;background-attachment:fixed;z-index:1;opacity:var(--ds-shell-gradient-opacity, 1);background-image:var(--ds-shell-gradient-image, none);background-size:var(--ds-shell-gradient-size, auto);background-repeat:no-repeat}.app-shell__panel.sc-ds-app-shell{flex:0 0 auto;min-height:0;height:100%;position:relative;z-index:2}.app-shell__panel.sc-ds-app-shell-s>ds-panel-nav,.app-shell__panel .sc-ds-app-shell-s>ds-panel-nav{display:block;height:100%}.app-shell__main.sc-ds-app-shell{flex:1 1 auto;min-width:0;min-height:0;display:grid;grid-template-columns:minmax(0, 1fr) auto;grid-template-rows:auto minmax(0, 1fr);grid-template-areas:'bar tools'     'content tools';position:relative;z-index:1}.app-shell__bar.sc-ds-app-shell{grid-area:bar;flex:0 0 auto;min-width:0}.app-shell__bar.sc-ds-app-shell-s>ds-bar-nav,.app-shell__bar .sc-ds-app-shell-s>ds-bar-nav{display:block}.app-shell__content.sc-ds-app-shell{grid-area:content;flex:1 1 auto;min-width:0;min-height:0;overflow:auto;contain:layout}.app-shell--gradient.sc-ds-app-shell-h .app-shell__content.sc-ds-app-shell{position:relative;z-index:1;background-color:var(--color-background-primary)}.app-shell__tools.sc-ds-app-shell{grid-area:tools;flex:0 0 auto;min-width:0;min-height:0;height:100%;display:flex;position:relative;z-index:0;overflow:hidden}.app-shell__tools.sc-ds-app-shell-s>ds-panel-tools,.app-shell__tools .sc-ds-app-shell-s>ds-panel-tools{display:block;height:100%;min-height:0}`;const A=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.navStyle="dashboard";this.gradient=false;this.gradientSrc="";this.gradientPreset=a;this.shortcutsEnabled=true;this.resizeObserver=null;this.panelNavTransition=new v;this.chromeSyncCoalescer=m((()=>this.syncChrome()));this.panelWidthTokens={expandedPx:0,collapsedPx:0};this.cachedViewportWidth=0;this.cachedViewportHeight=0;this.onWindowResize=()=>{if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()};this.onVisualViewportChange=()=>{if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()};this.onChromeTransitionStart=e=>{if(y(e)!=="panel-nav")return;this.panelNavTransition.enter();const s=l();this.cachedViewportWidth=s.width;this.cachedViewportHeight=s.height;this.syncChrome()};this.onChromeTransitionEnd=e=>{if(y(e)!=="panel-nav")return;this.panelNavTransition.exit();if(!this.panelNavTransition.isActive){this.scheduleChromeSync()}}}componentDidLoad(){this.syncSlottedNavStyle();this.connectMetricsObserver();this.connectViewportListeners();this.el.addEventListener(_,this.onChromeTransitionStart);this.el.addEventListener(x,this.onChromeTransitionEnd);requestAnimationFrame((()=>{this.cachePanelWidthTokens();this.scheduleChromeSync()}))}disconnectedCallback(){this.resizeObserver?.disconnect();this.resizeObserver=null;this.disconnectViewportListeners();this.chromeSyncCoalescer.cancel();this.el.removeEventListener(_,this.onChromeTransitionStart);this.el.removeEventListener(x,this.onChromeTransitionEnd)}onShellPropsChange(){this.syncSlottedNavStyle();this.scheduleChromeSync()}scheduleChromeSync(){this.chromeSyncCoalescer.schedule()}syncSlottedNavStyle(){const e=this.el.querySelector("ds-panel-nav");const s=this.el.querySelector("ds-bar-nav");if(e){e.setAttribute("nav-style",this.navStyle);e.navStyle=this.navStyle}if(s){s.setAttribute("nav-style",this.navStyle);s.navStyle=this.navStyle}}connectMetricsObserver(){this.resizeObserver=new ResizeObserver((()=>{if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()}));this.resizeObserver.observe(this.el);const e=this.el.querySelector(".app-shell__panel");if(e)this.resizeObserver.observe(e)}connectViewportListeners(){if(typeof window==="undefined")return;window.addEventListener("resize",this.onWindowResize,{passive:true});const e=window.visualViewport;if(e){e.addEventListener("resize",this.onVisualViewportChange,{passive:true});e.addEventListener("scroll",this.onVisualViewportChange,{passive:true})}}disconnectViewportListeners(){if(typeof window==="undefined")return;window.removeEventListener("resize",this.onWindowResize);const e=window.visualViewport;if(e){e.removeEventListener("resize",this.onVisualViewportChange);e.removeEventListener("scroll",this.onVisualViewportChange)}}cachePanelWidthTokens(){const e=this.el.querySelector("ds-panel-nav .panel-nav");if(!e)return;this.panelWidthTokens=j(e)}applyGradientVars(e,s){const t=e.style;for(const[e,n]of Object.entries(s)){if(n===null)t.removeProperty(e);else t.setProperty(e,n)}}clearGradientPaintVars(e){const s=[o,r,h];for(const t of e){for(const e of s)t.style.removeProperty(e)}}syncChromeLayoutVars(e,s,t,n){if(e){e.style.setProperty(c,t)}if(s){s.style.setProperty(p,n)}}resolvePanelWidthPx(e){const s=e?.querySelector(".panel-nav");if(this.panelNavTransition.isActive&&this.panelWidthTokens.expandedPx>0){const t=D(e,s);return V(this.panelWidthTokens,t)}const t=this.el.querySelector(".app-shell__panel");const n=t?.getBoundingClientRect().width??0;if(n>0)return n;if(this.panelWidthTokens.expandedPx>0){const t=D(e,s);return V(this.panelWidthTokens,t)}return 0}resolveViewportDimensions(){if(this.panelNavTransition.isActive&&this.cachedViewportWidth>0){return{width:this.cachedViewportWidth,height:this.cachedViewportHeight}}return l()}chromeLayerActive(){return this.gradient}handleWindowKeyDown(e){if(!this.shortcutsEnabled)return;if(P(e.target))return;const s=z(e);if(!s)return;e.preventDefault();const t=this.el.querySelector("ds-panel-nav");const n=this.el.querySelector("ds-panel-tools");if(s==="toggle-panel-nav"){void t?.toggleCollapsed();return}if(s==="close-panel-tools"){void n?.closeDrawer();return}if(s.startsWith("open-tool:")&&n){const e=s.slice("open-tool:".length);void n.activateTool(e)}}syncChrome(){const e=this.el.querySelector("ds-panel-nav");const s=this.el.querySelector("ds-bar-nav");const t=[this.el,e,s].filter((e=>e!==null));const n=()=>{if(e)e.style.removeProperty(c);if(s)s.style.removeProperty(p)};if(!this.gradient){this.clearGradientPaintVars(t);n();return}const i=this.resolveViewportDimensions();const a=this.resolvePanelWidthPx(e);const l=d();const v=f(a);this.syncChromeLayoutVars(e,s,l,v);const m=this.gradientSrc.trim()?`url(${this.gradientSrc.trim()})`:u(this.gradientPreset);const y=g({width:i.width,height:i.height});const _=b;for(const e of t){if(e===this.el){this.applyGradientVars(e,{[o]:m,[r]:y,[c]:l,[p]:v,[h]:_});continue}const s=e.tagName.toLowerCase()==="ds-bar-nav";this.applyGradientVars(e,{[o]:m,[r]:y,[h]:_,[c]:s?null:l,[p]:s?v:null})}}render(){const e=this.chromeLayerActive();const s={"app-shell":true,"app-shell--gradient":this.gradient,[`app-shell--${this.navStyle}`]:true};return n(i,{key:"4a9f8692893bba62a2fe4e4f4ee6338ea959935e",class:s},n("div",{key:"9bcd7c59ea5f653bae21eba71de38c7d9fae2196",class:"app-shell__row"},e?n("div",{class:"app-shell__chrome","aria-hidden":"true"}):null,n("div",{key:"5185e2dce7fe4d7a0a82b6a6fac10d5650833322",class:"app-shell__panel"},n("slot",{key:"fb23f25d5cf398da4f7ab11ab57017e68bfb10fb",name:"panel"})),n("div",{key:"8012f718181a697b5c625f50b7d7db2bd67e636d",class:"app-shell__main"},n("div",{key:"002b8ec32d1ef64d188cc062b0fb42490dbc9aec",class:"app-shell__bar"},n("slot",{key:"50cd0f20fed82ac80cbd40bed601a14ee5973dc1",name:"bar"})),n("div",{key:"0c6ab0369cd0849f729541fc3f479facb7d887ee",class:"app-shell__tools"},n("slot",{key:"d394ad6979da4c72edc18c3205facec77613ea6f",name:"tools"})),n("div",{key:"aea438b830aeb4e00e8bcdabaeba4e5caf75640d",class:"app-shell__content"},n("slot",{key:"f95130528bb58fc956a582cba908d9ff9c7c7bea"})))))}get el(){return this}static get watchers(){return{navStyle:[{onShellPropsChange:0}],gradient:[{onShellPropsChange:0}],gradientSrc:[{onShellPropsChange:0}],gradientPreset:[{onShellPropsChange:0}]}}static get style(){return L()}},[262,"ds-app-shell",{navStyle:[513,"nav-style"],gradient:[516],gradientSrc:[1,"gradient-src"],gradientPreset:[513,"gradient-preset"],shortcutsEnabled:[4,"shortcuts-enabled"]},[[10,"keydown","handleWindowKeyDown"]],{navStyle:[{onShellPropsChange:0}],gradient:[{onShellPropsChange:0}],gradientSrc:[{onShellPropsChange:0}],gradientPreset:[{onShellPropsChange:0}]}]);function B(){if(typeof customElements==="undefined"){return}const e=["ds-app-shell"];e.forEach((e=>{switch(e){case"ds-app-shell":if(!customElements.get(s(e))){customElements.define(s(e),A)}break}}))}B();const E=A;const W=B;export{E as DsAppShell,W as defineCustomElement};
+import{p as e,t as s,H as t,h as n,a as i}from"./index.js";import{D as a,c as l,n as o,s as r}from"./p-D0B9uDTP.js";import{e as h,c,r as p,a as d,b as f}from"./p-BKhG2xrW.js";const u={k:"search",a:"agents",s:"stacks",m:"messages",n:"activity"};function b(e){return!e.metaKey&&!e.ctrlKey&&!e.altKey&&!e.shiftKey}function g(e){if(!e||typeof e!=="object")return false;if(!("closest"in e)||typeof e.closest!=="function")return false;const s=e;const t=s.closest('input, textarea, select, [contenteditable=""], [contenteditable="true"], [contenteditable="plaintext-only"]');if(t)return true;const n=s.getAttribute("role");if(n==="textbox"||n==="combobox"||n==="searchbox")return true;return Boolean(s.isContentEditable)}function m(e){if(e.key==="["||e.code==="BracketLeft")return"[";if(e.key==="]"||e.code==="BracketRight")return"]";return e.key.length===1?e.key.toLowerCase():e.key.toLowerCase()}function v(e){if((e.key==="?"||e.code==="Slash"&&e.shiftKey)&&!e.metaKey&&!e.ctrlKey&&!e.altKey){return"open-tool:help"}if(!b(e))return null;const s=m(e);if(s==="[")return"toggle-panel-nav";if(s==="]")return"close-panel-tools";const t=u[s];if(t)return`open-tool:${t}`;return null}const y="--ds-shell-gradient-image";const _="--ds-shell-gradient-size";const x="--ds-shell-gradient-position-panel";const w="--ds-shell-gradient-position-bar";const k="--ds-shell-gradient-opacity";function P(e=a){return l(e)}function z(e){const s=typeof globalThis.window!=="undefined"?globalThis.window:undefined;if(!s)return{width:0,height:0};const t=s.visualViewport;return{width:Math.round(t?.width??s.innerWidth),height:Math.round(t?.height??s.innerHeight)}}function S(e){return`${Math.round(e.width)}px ${Math.round(e.height)}px`}function C(){return"0 0"}function D(e){return`${-Math.round(e)}px 0`}function L(e,s){if(typeof document==="undefined")return 0;const t=document.createElement("div");t.style.cssText="position:absolute;visibility:hidden;pointer-events:none;height:0;width:var("+s+");";e.appendChild(t);const n=t.getBoundingClientRect().width;e.removeChild(t);return n}function M(e){return{expandedPx:L(e,"--_nav-width"),collapsedPx:L(e,"--_nav-width-collapsed")}}function V(e,s){if(s?.classList.contains("panel-nav--collapsed"))return true;const t=e?.collapsed;return t===true}function j(e,s){return s?e.collapsedPx:e.expandedPx}const B=()=>`.sc-ds-app-shell-h{display:block;height:100%;min-height:0;box-sizing:border-box;--ds-shell-panel-tools-width:var(--dimension-panel-width-sm)}@media (min-width: 768px) and (max-width: 1199px){.sc-ds-app-shell-h{--ds-shell-panel-tools-width:var(--dimension-panel-width-xs)}}.app-shell.sc-ds-app-shell{display:flex;flex-direction:column;height:100%;min-height:0;box-sizing:border-box;font-family:var(--typography-font-family, system-ui)}.app-shell--gradient.sc-ds-app-shell-h{--_shell-chrome-bg:var(--color-background-secondary)}.app-shell__row.sc-ds-app-shell{display:flex;flex:1 1 auto;min-height:0;height:100%;position:relative}.app-shell__chrome.sc-ds-app-shell{position:absolute;inset:0;pointer-events:none;z-index:0}.app-shell--gradient.sc-ds-app-shell-h .app-shell__chrome.sc-ds-app-shell{background-color:var(--_shell-chrome-bg)}.app-shell--gradient.sc-ds-app-shell-h .app-shell__chrome.sc-ds-app-shell::before{content:'';position:absolute;inset:0;pointer-events:none;background-position:0 0;background-attachment:fixed;z-index:1;opacity:var(--ds-shell-gradient-opacity, 1);background-image:var(--ds-shell-gradient-image, none);background-size:var(--ds-shell-gradient-size, auto);background-repeat:no-repeat}.app-shell__panel.sc-ds-app-shell{flex:0 0 auto;min-height:0;height:100%;position:relative;z-index:2}.app-shell__panel.sc-ds-app-shell-s>ds-panel-nav,.app-shell__panel .sc-ds-app-shell-s>ds-panel-nav{display:block;height:100%}.app-shell__main.sc-ds-app-shell{flex:1 1 auto;min-width:0;min-height:0;display:grid;grid-template-columns:minmax(0, 1fr) auto;grid-template-rows:auto minmax(0, 1fr);grid-template-areas:'bar tools'     'content tools';position:relative;z-index:1}.app-shell__bar.sc-ds-app-shell{grid-area:bar;flex:0 0 auto;min-width:0}.app-shell__bar.sc-ds-app-shell-s>ds-bar-nav,.app-shell__bar .sc-ds-app-shell-s>ds-bar-nav{display:block}.app-shell__content.sc-ds-app-shell{grid-area:content;flex:1 1 auto;min-width:0;min-height:0;overflow:auto;contain:layout}.app-shell--gradient.sc-ds-app-shell-h .app-shell__content.sc-ds-app-shell{position:relative;z-index:1;background-color:var(--color-background-primary)}.app-shell__tools.sc-ds-app-shell{grid-area:tools;flex:0 0 auto;min-width:0;min-height:0;height:100%;display:flex;position:relative;z-index:0;overflow:hidden}.app-shell__tools.sc-ds-app-shell-s>ds-panel-tools,.app-shell__tools .sc-ds-app-shell-s>ds-panel-tools{display:block;height:100%;min-height:0}`;const W=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.navStyle="dashboard";this.gradientPreset=a;this.shortcutsEnabled=true;this.resizeObserver=null;this.panelNavTransition=new h;this.chromeSyncCoalescer=c((()=>this.syncChrome()));this.panelWidthTokens={expandedPx:0,collapsedPx:0};this.cachedViewportWidth=0;this.cachedViewportHeight=0;this.onWindowResize=()=>{if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()};this.onVisualViewportChange=()=>{if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()};this.onChromeTransitionStart=e=>{if(p(e)!=="panel-nav")return;this.panelNavTransition.enter();const s=z();this.cachedViewportWidth=s.width;this.cachedViewportHeight=s.height;this.syncChrome()};this.onChromeTransitionEnd=e=>{if(p(e)!=="panel-nav")return;this.panelNavTransition.exit();if(!this.panelNavTransition.isActive){this.scheduleChromeSync()}}}componentDidLoad(){this.syncSlottedNavStyle();this.connectMetricsObserver();this.connectViewportListeners();this.el.addEventListener(d,this.onChromeTransitionStart);this.el.addEventListener(f,this.onChromeTransitionEnd);requestAnimationFrame((()=>{this.cachePanelWidthTokens();this.scheduleChromeSync()}))}disconnectedCallback(){this.resizeObserver?.disconnect();this.resizeObserver=null;this.disconnectViewportListeners();this.chromeSyncCoalescer.cancel();this.el.removeEventListener(d,this.onChromeTransitionStart);this.el.removeEventListener(f,this.onChromeTransitionEnd)}onShellPropsChange(){this.syncSlottedNavStyle();this.scheduleChromeSync()}scheduleChromeSync(){this.chromeSyncCoalescer.schedule()}syncSlottedNavStyle(){const e=this.el.querySelector("ds-panel-nav");const s=this.el.querySelector("ds-bar-nav");if(e){e.setAttribute("nav-style",this.navStyle);e.navStyle=this.navStyle}if(s){s.setAttribute("nav-style",this.navStyle);s.navStyle=this.navStyle}}connectMetricsObserver(){this.resizeObserver=new ResizeObserver((()=>{if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()}));this.resizeObserver.observe(this.el);const e=this.el.querySelector(".app-shell__panel");if(e)this.resizeObserver.observe(e)}connectViewportListeners(){if(typeof window==="undefined")return;window.addEventListener("resize",this.onWindowResize,{passive:true});const e=window.visualViewport;if(e){e.addEventListener("resize",this.onVisualViewportChange,{passive:true});e.addEventListener("scroll",this.onVisualViewportChange,{passive:true})}}disconnectViewportListeners(){if(typeof window==="undefined")return;window.removeEventListener("resize",this.onWindowResize);const e=window.visualViewport;if(e){e.removeEventListener("resize",this.onVisualViewportChange);e.removeEventListener("scroll",this.onVisualViewportChange)}}cachePanelWidthTokens(){const e=this.el.querySelector("ds-panel-nav .panel-nav");if(!e)return;this.panelWidthTokens=M(e)}applyGradientVars(e,s){const t=e.style;for(const[e,n]of Object.entries(s)){if(n===null)t.removeProperty(e);else t.setProperty(e,n)}}clearGradientPaintVars(e){const s=[y,_,k];for(const t of e){for(const e of s)t.style.removeProperty(e)}}syncChromeLayoutVars(e,s,t,n){if(e){e.style.setProperty(x,t)}if(s){s.style.setProperty(w,n)}}resolvePanelWidthPx(e){const s=e?.querySelector(".panel-nav");if(this.panelNavTransition.isActive&&this.panelWidthTokens.expandedPx>0){const t=V(e,s);return j(this.panelWidthTokens,t)}const t=this.el.querySelector(".app-shell__panel");const n=t?.getBoundingClientRect().width??0;if(n>0)return n;if(this.panelWidthTokens.expandedPx>0){const t=V(e,s);return j(this.panelWidthTokens,t)}return 0}resolveViewportDimensions(){if(this.panelNavTransition.isActive&&this.cachedViewportWidth>0){return{width:this.cachedViewportWidth,height:this.cachedViewportHeight}}return z()}chromeLayerActive(){return o(this.gradientPreset)!=="none"}handleWindowKeyDown(e){if(!this.shortcutsEnabled)return;if(g(e.target))return;const s=v(e);if(!s)return;e.preventDefault();const t=this.el.querySelector("ds-panel-nav");const n=this.el.querySelector("ds-panel-tools");if(s==="toggle-panel-nav"){void t?.toggleCollapsed();return}if(s==="close-panel-tools"){void n?.closeDrawer();return}if(s.startsWith("open-tool:")&&n){const e=s.slice("open-tool:".length);void n.activateTool(e)}}syncChrome(){const e=this.el.querySelector("ds-panel-nav");const s=this.el.querySelector("ds-bar-nav");const t=[this.el,e,s].filter((e=>e!==null));const n=()=>{if(e)e.style.removeProperty(x);if(s)s.style.removeProperty(w)};const i=o(this.gradientPreset);if(i==="none"){this.clearGradientPaintVars(t);n();return}const a=this.resolveViewportDimensions();const l=this.resolvePanelWidthPx(e);const h=C();const c=D(l);this.syncChromeLayoutVars(e,s,h,c);const p=P(i);const d=S({width:a.width,height:a.height});const f=r(i);for(const e of t){if(e===this.el){this.applyGradientVars(e,{[y]:p,[_]:d,[x]:h,[w]:c,[k]:f});continue}const s=e.tagName.toLowerCase()==="ds-bar-nav";this.applyGradientVars(e,{[y]:p,[_]:d,[k]:f,[x]:s?null:h,[w]:s?c:null})}}render(){const e=this.chromeLayerActive();const s={"app-shell":true,"app-shell--gradient":e,[`app-shell--${this.navStyle}`]:true};return n(i,{key:"b7f97a7099bb031f052d1e7f3a7e424ea398b0e5",class:s},n("div",{key:"6cb7da9eb2a3d39cc055b059a466c67c290b35b0",class:"app-shell__row"},e?n("div",{class:"app-shell__chrome","aria-hidden":"true"}):null,n("div",{key:"40d1725e752309c3a8e39045c4d95b875632d692",class:"app-shell__panel"},n("slot",{key:"5db47b876100aeef79705ec3e75ce5f996c95498",name:"panel"})),n("div",{key:"5a6dca7c0d3506e76b813caa1c2ff1f390a13655",class:"app-shell__main"},n("div",{key:"c80383d391c1ac1f95591f770b10a938f310ce45",class:"app-shell__bar"},n("slot",{key:"766abea7f6b7e615b7bdaddef78323591e9c919e",name:"bar"})),n("div",{key:"d831d4a9f209603b5405ef3f98787b6d182c3652",class:"app-shell__tools"},n("slot",{key:"0e29d4987cc7fbab8f085829a700ab4b9c431f17",name:"tools"})),n("div",{key:"4873a41363faf7791dccdd7aa8b29c74b7a9743f",class:"app-shell__content"},n("slot",{key:"0275cee1741708721122b14e762f4f7f250d9286"})))))}get el(){return this}static get watchers(){return{navStyle:[{onShellPropsChange:0}],gradientPreset:[{onShellPropsChange:0}]}}static get style(){return B()}},[262,"ds-app-shell",{navStyle:[513,"nav-style"],gradientPreset:[513,"gradient-preset"],shortcutsEnabled:[4,"shortcuts-enabled"]},[[10,"keydown","handleWindowKeyDown"]],{navStyle:[{onShellPropsChange:0}],gradientPreset:[{onShellPropsChange:0}]}]);function $(){if(typeof customElements==="undefined"){return}const e=["ds-app-shell"];e.forEach((e=>{switch(e){case"ds-app-shell":if(!customElements.get(s(e))){customElements.define(s(e),W)}break}}))}$();const E=W;const T=$;export{E as DsAppShell,T as defineCustomElement};
 //# sourceMappingURL=ds-app-shell.js.map