@ds-mo/ui 12.6.2 → 12.8.0

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

@@ -1,2 +1,2 @@
-import{p as e,H as s,c as t,h as l,a as i,t as n}from"./index.js";import{D as a,b as o,n as h,a as p}from"./p-D1HFMTdC.js";import{e as r,c as d,r as c,a as f,b}from"./p-D2x17ei-.js";import{a as u}from"./p-BrusnEYP.js";const m="--ds-shell-gradient-image";const v="--ds-shell-gradient-size";const _="--ds-shell-gradient-position-panel";const g="--ds-shell-gradient-position-bar";const y="--ds-shell-gradient-opacity";function w(e=a){return o(e)}function x(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 k(e){return`${Math.round(e.width)}px ${Math.round(e.height)}px`}function S(){return"0 0"}function z(e){return`${-Math.round(e)}px 0`}const P={k:"search",a:"agents",s:"stacks",m:"messages",n:"activity","/":"help"};function C(e){return!e.metaKey&&!e.ctrlKey&&!e.altKey&&!e.shiftKey}function M(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 l=s.getAttribute("role");if(l==="textbox"||l==="combobox"||l==="searchbox")return true;return Boolean(s.isContentEditable)}function D(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 L(e){if(!C(e))return null;const s=D(e);if(s==="[")return"toggle-panel-nav";if(s==="]")return"close-panel-tools";const t=P[s];if(t)return`open-tool:${t}`;return null}function j(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 l=t.getBoundingClientRect().width;e.removeChild(t);return l}function O(e){return{expandedPx:j(e,"--_nav-width"),collapsedPx:j(e,"--_nav-width-collapsed")}}function T(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 $=()=>`.sc-ds-shell-app-h{display:block;height:100%;min-height:0;box-sizing:border-box;overflow:hidden;overscroll-behavior:none;--ds-shell-panel-tools-width:var(--dimension-panel-width-xs)}.shell-app.sc-ds-shell-app{display:flex;flex-direction:column;height:100%;min-height:0;box-sizing:border-box;overflow:hidden;overscroll-behavior:none;font-family:var(--typography-font-family, system-ui)}.sc-ds-shell-app-h{--_shell-chrome-bg:var(--color-background-secondary)}.shell-app__row.sc-ds-shell-app{display:flex;flex:1 1 auto;min-height:0;height:100%;position:relative}.shell-app__chrome.sc-ds-shell-app{position:absolute;inset:0;pointer-events:none;z-index:0;background-color:var(--_shell-chrome-bg)}.shell-app--gradient.sc-ds-shell-app-h .shell-app__chrome.sc-ds-shell-app::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}.shell-app__panel.sc-ds-shell-app{flex:0 0 auto;min-height:0;height:100%;position:relative;z-index:2}.shell-app__panel.sc-ds-shell-app-s>ds-panel-nav,.shell-app__panel .sc-ds-shell-app-s>ds-panel-nav{display:block;height:100%}.shell-app__main.sc-ds-shell-app{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}.shell-app__mobile-sheet-nav.sc-ds-shell-app,.shell-app__mobile-bar-nav.sc-ds-shell-app{display:none}.shell-app__bar.sc-ds-shell-app{grid-area:bar;flex:0 0 auto;min-width:0}.shell-app__bar.sc-ds-shell-app-s>ds-bar-nav,.shell-app__bar .sc-ds-shell-app-s>ds-bar-nav{display:block}.shell-app__content.sc-ds-shell-app{grid-area:content;flex:1 1 auto;min-width:0;min-height:0;overflow:auto;overscroll-behavior:none;contain:layout}.shell-app__content.sc-ds-shell-app{position:relative;z-index:1;background-color:var(--color-background-primary)}.shell-app__tools.sc-ds-shell-app{grid-area:tools;flex:0 0 auto;min-width:0;min-height:0;height:100%;display:flex;position:relative;z-index:0;overflow:hidden}.shell-app__tools.sc-ds-shell-app-s>ds-panel-tools,.shell-app__tools .sc-ds-shell-app-s>ds-panel-tools{display:block;height:100%;min-height:0}.shell-app__tools.sc-ds-shell-app-s>ds-shell-tools,.shell-app__tools .sc-ds-shell-app-s>ds-shell-tools{display:block;height:100%;min-height:0}.shell-app--tools-fullscreen.sc-ds-shell-app-h .shell-app__panel.sc-ds-shell-app,.shell-app--tools-fullscreen.sc-ds-shell-app-h .shell-app__bar.sc-ds-shell-app,.shell-app--tools-fullscreen.sc-ds-shell-app-h .shell-app__content.sc-ds-shell-app{visibility:hidden}.shell-app--mobile.sc-ds-shell-app-h{--_shell-chrome-bg:var(--color-background-primary)}.shell-app--mobile.sc-ds-shell-app-h .shell-app__chrome.sc-ds-shell-app,.shell-app--mobile.sc-ds-shell-app-h .shell-app__panel.sc-ds-shell-app,.shell-app--mobile.sc-ds-shell-app-h .shell-app__bar.sc-ds-shell-app{display:none}.shell-app--mobile.sc-ds-shell-app-h .shell-app__main.sc-ds-shell-app{width:100%;grid-template-columns:minmax(0, 1fr);grid-template-rows:minmax(0, 1fr) auto;grid-template-areas:'stage'     'mobile-bar-nav';background:var(--color-background-primary)}.shell-app--mobile.sc-ds-shell-app-h .shell-app__content.sc-ds-shell-app,.shell-app--mobile.sc-ds-shell-app-h .shell-app__tools.sc-ds-shell-app,.shell-app--mobile.sc-ds-shell-app-h .shell-app__mobile-sheet-nav.sc-ds-shell-app{grid-area:stage;min-width:0;min-height:0;height:100%;position:relative}.shell-app--mobile.sc-ds-shell-app-h .shell-app__content.sc-ds-shell-app{z-index:1;overflow:auto}.shell-app--mobile.sc-ds-shell-app-h .shell-app__tools.sc-ds-shell-app{z-index:2;width:100%;overflow:hidden;background:var(--color-background-primary)}.shell-app--mobile.sc-ds-shell-app-h .shell-app__mobile-sheet-nav.sc-ds-shell-app{display:block;z-index:3;overflow:hidden;background:var(--color-background-primary)}.shell-app--mobile.sc-ds-shell-app-h .shell-app__mobile-bar-nav.sc-ds-shell-app{grid-area:mobile-bar-nav;display:block;min-width:0;position:relative;z-index:4}.shell-app--mobile.sc-ds-shell-app-h .shell-app__tools[hidden].sc-ds-shell-app,.shell-app--mobile.sc-ds-shell-app-h .shell-app__mobile-sheet-nav[hidden].sc-ds-shell-app,.shell-app--mobile.sc-ds-shell-app-h .shell-app__mobile-bar-nav[hidden].sc-ds-shell-app{display:none}.shell-app--mobile-tool-active.sc-ds-shell-app-h .shell-app__content.sc-ds-shell-app,.shell-app--mobile-sheet-nav-open.sc-ds-shell-app-h .shell-app__content.sc-ds-shell-app,.shell-app--mobile-sheet-nav-open.sc-ds-shell-app-h .shell-app__tools.sc-ds-shell-app{visibility:hidden}`;const E=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsResponsiveModeChange=t(this,"dsResponsiveModeChange");this.navStyle="dashboard";this.gradientPreset=a;this.shortcutsEnabled=true;this.mobileDestination="area";this.mobileSheetNavOpen=false;this.toolsFullscreen=false;this.resolvedMode="desktop";this.resizeObserver=null;this.hasLoaded=false;this.panelNavTransition=new r;this.chromeSyncCoalescer=d((()=>this.syncChrome()));this.panelWidthTokens={expandedPx:0,collapsedPx:0};this.cachedViewportWidth=0;this.cachedViewportHeight=0;this.onWindowResize=()=>{this.updateResponsiveMode();if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()};this.onVisualViewportChange=()=>{if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()};this.onChromeTransitionStart=e=>{if(c(e)!=="panel-nav")return;this.panelNavTransition.enter();const s=x();this.cachedViewportWidth=s.width;this.cachedViewportHeight=s.height;this.syncChrome()};this.onChromeTransitionEnd=e=>{if(c(e)!=="panel-nav")return;this.panelNavTransition.exit();if(!this.panelNavTransition.isActive){this.scheduleChromeSync()}}}componentWillLoad(){if(typeof window!=="undefined"){this.resolvedMode=u(window.innerWidth)}}componentDidLoad(){this.hasLoaded=true;this.syncSlottedNavStyle();this.syncSlottedMobileState();this.connectMetricsObserver();this.connectViewportListeners();this.el.addEventListener(f,this.onChromeTransitionStart);this.el.addEventListener(b,this.onChromeTransitionEnd);requestAnimationFrame((()=>{this.cachePanelWidthTokens();this.scheduleChromeSync()}));const e=this.el.querySelector("ds-shell-tools, ds-panel-tools");this.toolsFullscreen=e?.getAttribute("presentation")==="fullscreen"}handleToolsPresentation(e){this.toolsFullscreen=e.detail?.presentation==="fullscreen"}disconnectedCallback(){this.resizeObserver?.disconnect();this.resizeObserver=null;this.disconnectViewportListeners();this.chromeSyncCoalescer.cancel();this.el.removeEventListener(f,this.onChromeTransitionStart);this.el.removeEventListener(b,this.onChromeTransitionEnd)}onShellPropsChange(){this.syncSlottedNavStyle();this.scheduleChromeSync()}onMobileStateChange(e,t){this.syncSlottedMobileState();if(t===true&&!this.mobileSheetNavOpen&&this.resolvedMode==="mobile"){requestAnimationFrame((()=>{const e=this.el.querySelector("ds-mobile-bar-nav");const t=document.activeElement;if(t instanceof s&&e?.contains(t))return;void e?.focusDestination?.("sheet-nav")}))}}updateResponsiveMode(){if(typeof window==="undefined")return;const e=u(window.innerWidth);if(e===this.resolvedMode)return;this.resolvedMode=e;this.syncSlottedMobileState();this.scheduleChromeSync();if(this.hasLoaded)this.dsResponsiveModeChange.emit({mode:e})}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}}syncSlottedMobileState(){const e=this.el.querySelector("ds-shell-tools");const s=this.el.querySelector("ds-mobile-bar-nav");const t=this.el.querySelector("ds-mobile-sheet-nav");if(e){e.setAttribute("responsive-mode",this.resolvedMode);e.responsiveMode=this.resolvedMode}if(s){s.activeDestination=this.mobileDestination;s.sheetNavExpanded=this.mobileSheetNavOpen}if(t){t.open=this.mobileSheetNavOpen}}connectMetricsObserver(){this.resizeObserver=new ResizeObserver((()=>{if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()}));this.resizeObserver.observe(this.el);const e=this.el.querySelector(".shell-app__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=O(e)}applyGradientVars(e,s){const t=e.style;for(const[e,l]of Object.entries(s)){if(l===null)t.removeProperty(e);else t.setProperty(e,l)}}clearGradientPaintVars(e){const s=[m,v,y];for(const t of e){for(const e of s)t.style.removeProperty(e)}}syncChromeLayoutVars(e,s,t,l){if(e){e.style.setProperty(_,t)}if(s){s.style.setProperty(g,l)}}resolvePanelWidthPx(e){const s=e?.querySelector(".panel-nav");if(this.panelNavTransition.isActive&&this.panelWidthTokens.expandedPx>0){const t=T(e,s);return V(this.panelWidthTokens,t)}const t=this.el.querySelector(".shell-app__panel");const l=t?.getBoundingClientRect().width??0;if(l>0)return l;if(this.panelWidthTokens.expandedPx>0){const t=T(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 x()}chromeLayerActive(){return this.resolvedMode!=="mobile"&&h(this.gradientPreset)!=="none"}handleWindowKeyDown(e){if(!this.shortcutsEnabled)return;if(M(e.target))return;const s=L(e);if(!s)return;e.preventDefault();const t=this.el.querySelector("ds-panel-nav");const l=this.el.querySelector("ds-shell-tools, ds-panel-tools");if(s==="toggle-panel-nav"){void t?.toggleCollapsed();return}if(s==="close-panel-tools"){void l?.closeDrawer?.();return}if(s.startsWith("open-tool:")&&l){const e=s.slice("open-tool:".length);void l.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 l=()=>{if(e)e.style.removeProperty(_);if(s)s.style.removeProperty(g)};const i=h(this.gradientPreset);if(i==="none"||this.resolvedMode==="mobile"){this.clearGradientPaintVars(t);l();return}const n=this.resolveViewportDimensions();const a=this.resolvePanelWidthPx(e);const o=S();const r=z(a);this.syncChromeLayoutVars(e,s,o,r);const d=w(i);const c=k({width:n.width,height:n.height});const f=p(i);for(const e of t){if(e===this.el){this.applyGradientVars(e,{[m]:d,[v]:c,[_]:o,[g]:r,[y]:f});continue}const s=e.tagName.toLowerCase()==="ds-bar-nav";this.applyGradientVars(e,{[m]:d,[v]:c,[y]:f,[_]:s?null:o,[g]:s?r:null})}}render(){const e=this.chromeLayerActive();const s=this.resolvedMode==="mobile";const t=s&&this.mobileDestination!=="area";const n=s&&(t||this.mobileSheetNavOpen);const a=!s&&this.toolsFullscreen;const o={"shell-app":true,"shell-app--gradient":e,[`shell-app--${this.navStyle}`]:true,[`shell-app--${this.resolvedMode}`]:true,"shell-app--tools-fullscreen":a,"shell-app--mobile-tool-active":t,"shell-app--mobile-sheet-nav-open":s&&this.mobileSheetNavOpen};return l(i,{key:"cd72e7372ba3309f543b3dd3a683bd8e3021dba6",class:o,"responsive-mode":this.resolvedMode},l("div",{key:"e4bb7b40701a3bd50767b20ecbe5e7c296fb0bdb",class:"shell-app__row"},l("div",{key:"9f8ce3f727654a45372776dfce08e89257e93be9",class:"shell-app__chrome","aria-hidden":"true"}),l("div",{key:"5d85ecb3d4a13ef29dccda03e21be74b8b09620c",class:"shell-app__panel","aria-hidden":a?"true":undefined,inert:a?true:undefined},l("slot",{key:"b36441d733b245fff72bfebe83202911d4c2d8ae",name:"panel"})),l("div",{key:"cbb98136d5a623846ccb951b349dc0cce38d23fd",class:"shell-app__main"},l("div",{key:"975f3c3b1745f96623b45b48f8baec3d865a7b68",class:"shell-app__bar","aria-hidden":a?"true":undefined,inert:a?true:undefined},l("slot",{key:"ce9a86bcd081cc0cd77a861f4fcc8359db9b6490",name:"bar"})),l("div",{key:"a7051f65265c0e1e3dc58adc3607da063ab2ec56",class:"shell-app__tools","aria-hidden":s&&(!t||this.mobileSheetNavOpen)?"true":undefined,inert:s&&(!t||this.mobileSheetNavOpen)?true:undefined,hidden:s&&!t},l("slot",{key:"d00b82f280b33eefd7f74519598ea14281dc8067",name:"tools"})),l("div",{key:"e9e7dafa5f2523277651fd87e4c71b7c8a66f955",class:"shell-app__content","aria-hidden":a||n?"true":undefined,inert:a||n?true:undefined},l("slot",{key:"23074afefe20fa150d4b67ce2c271eef396a25b5"})),l("div",{key:"50b0018a5111e44c6a97a43d6ca4e67ea5cf56d9",class:"shell-app__mobile-sheet-nav",hidden:!s||!this.mobileSheetNavOpen,"aria-hidden":s&&this.mobileSheetNavOpen?undefined:"true",inert:s&&this.mobileSheetNavOpen?undefined:true},l("slot",{key:"231bf3f2de8f473b6c5a69fd4567ecea3dc4bea3",name:"mobile-sheet-nav"})),l("div",{key:"4495823e86c0ec90fa937936a26fffc7c0924551",class:"shell-app__mobile-bar-nav",hidden:!s},l("slot",{key:"eb918859a3383812c34198c18e6794512ecba657",name:"mobile-bar-nav"})))))}get el(){return this}static get watchers(){return{navStyle:[{onShellPropsChange:0}],gradientPreset:[{onShellPropsChange:0}],mobileDestination:[{onMobileStateChange:0}],mobileSheetNavOpen:[{onMobileStateChange:0}]}}static get style(){return $()}},[262,"ds-shell-app",{navStyle:[513,"nav-style"],gradientPreset:[513,"gradient-preset"],shortcutsEnabled:[4,"shortcuts-enabled"],mobileDestination:[1,"mobile-destination"],mobileSheetNavOpen:[4,"mobile-sheet-nav-open"],toolsFullscreen:[32],resolvedMode:[32]},[[0,"dsPresentationChange","handleToolsPresentation"],[10,"keydown","handleWindowKeyDown"]],{navStyle:[{onShellPropsChange:0}],gradientPreset:[{onShellPropsChange:0}],mobileDestination:[{onMobileStateChange:0}],mobileSheetNavOpen:[{onMobileStateChange:0}]}]);function W(){if(typeof customElements==="undefined"){return}const e=["ds-shell-app"];e.forEach((e=>{switch(e){case"ds-shell-app":if(!customElements.get(n(e))){customElements.define(n(e),E)}break}}))}W();const B=E;const F=W;export{B as DsShellApp,F as defineCustomElement};
+import{p as e,H as s,c as t,h as l,a as i,t as n}from"./index.js";import{D as a,b as o,n as h,a as p}from"./p-D1HFMTdC.js";import{e as r,c as d,r as c,a as f,b as u}from"./p-D2x17ei-.js";import{a as b}from"./p-BrusnEYP.js";const m="--ds-shell-gradient-image";const v="--ds-shell-gradient-size";const _="--ds-shell-gradient-position-panel";const g="--ds-shell-gradient-position-bar";const y="--ds-shell-gradient-opacity";function w(e=a){return o(e)}function x(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 k(e){return`${Math.round(e.width)}px ${Math.round(e.height)}px`}function z(){return"0 0"}function S(e){return`${-Math.round(e)}px 0`}const P={k:"search",a:"agents",s:"stacks",m:"messages",n:"activity","/":"help"};function C(e){return!e.metaKey&&!e.ctrlKey&&!e.altKey&&!e.shiftKey}function M(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 l=s.getAttribute("role");if(l==="textbox"||l==="combobox"||l==="searchbox")return true;return Boolean(s.isContentEditable)}function D(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 L(e){if(!C(e))return null;const s=D(e);if(s==="[")return"toggle-panel-nav";if(s==="]")return"close-panel-tools";const t=P[s];if(t)return`open-tool:${t}`;return null}function j(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 l=t.getBoundingClientRect().width;e.removeChild(t);return l}function O(e){return{expandedPx:j(e,"--_nav-width"),collapsedPx:j(e,"--_nav-width-collapsed")}}function T(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 $=()=>`.sc-ds-shell-app-h{display:block;height:100%;min-height:0;box-sizing:border-box;overflow:hidden;overscroll-behavior:none;--ds-shell-panel-tools-width:var(--dimension-panel-width-xs)}.shell-app.sc-ds-shell-app{display:flex;flex-direction:column;height:100%;min-height:0;box-sizing:border-box;overflow:hidden;overscroll-behavior:none;font-family:var(--typography-font-family, system-ui)}.sc-ds-shell-app-h{--_shell-chrome-bg:var(--color-background-secondary)}.shell-app__row.sc-ds-shell-app{display:flex;flex:1 1 auto;min-height:0;height:100%;position:relative}.shell-app__chrome.sc-ds-shell-app{position:absolute;inset:0;pointer-events:none;z-index:0;background-color:var(--_shell-chrome-bg)}.shell-app--gradient.sc-ds-shell-app-h .shell-app__chrome.sc-ds-shell-app::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}.shell-app__panel.sc-ds-shell-app{flex:0 0 auto;min-height:0;height:100%;position:relative;z-index:2}.shell-app__panel.sc-ds-shell-app-s>ds-panel-nav,.shell-app__panel .sc-ds-shell-app-s>ds-panel-nav{display:block;height:100%}.shell-app__main.sc-ds-shell-app{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}.shell-app__mobile-sheet-nav.sc-ds-shell-app,.shell-app__mobile-bar-nav.sc-ds-shell-app{display:none}.shell-app__bar.sc-ds-shell-app{grid-area:bar;flex:0 0 auto;min-width:0}.shell-app__bar.sc-ds-shell-app-s>ds-bar-nav,.shell-app__bar .sc-ds-shell-app-s>ds-bar-nav{display:block}.shell-app__content.sc-ds-shell-app{grid-area:content;flex:1 1 auto;min-width:0;min-height:0;overflow:auto;overscroll-behavior:none;contain:layout}.shell-app__content.sc-ds-shell-app{position:relative;z-index:1;background-color:var(--color-background-primary)}.shell-app__tools.sc-ds-shell-app{grid-area:tools;flex:0 0 auto;min-width:0;min-height:0;height:100%;display:flex;position:relative;z-index:0;overflow:hidden}.shell-app__tools.sc-ds-shell-app-s>ds-panel-tools,.shell-app__tools .sc-ds-shell-app-s>ds-panel-tools{display:block;height:100%;min-height:0}.shell-app__tools.sc-ds-shell-app-s>ds-shell-tools,.shell-app__tools .sc-ds-shell-app-s>ds-shell-tools{display:block;height:100%;min-height:0}.shell-app--tools-fullscreen.sc-ds-shell-app-h .shell-app__panel.sc-ds-shell-app,.shell-app--tools-fullscreen.sc-ds-shell-app-h .shell-app__bar.sc-ds-shell-app,.shell-app--tools-fullscreen.sc-ds-shell-app-h .shell-app__content.sc-ds-shell-app{visibility:hidden}.shell-app--mobile.sc-ds-shell-app-h{--_shell-chrome-bg:var(--color-background-primary)}.shell-app--mobile.sc-ds-shell-app-h .shell-app__chrome.sc-ds-shell-app,.shell-app--mobile.sc-ds-shell-app-h .shell-app__panel.sc-ds-shell-app,.shell-app--mobile.sc-ds-shell-app-h .shell-app__bar.sc-ds-shell-app{display:none}.shell-app--mobile.sc-ds-shell-app-h .shell-app__main.sc-ds-shell-app{width:100%;padding-block-start:env(safe-area-inset-top);box-sizing:border-box;grid-template-columns:minmax(0, 1fr);grid-template-rows:minmax(0, 1fr) auto;grid-template-areas:'stage'     'mobile-bar-nav';background:var(--color-background-primary)}.shell-app--mobile.sc-ds-shell-app-h .shell-app__content.sc-ds-shell-app,.shell-app--mobile.sc-ds-shell-app-h .shell-app__tools.sc-ds-shell-app,.shell-app--mobile.sc-ds-shell-app-h .shell-app__mobile-sheet-nav.sc-ds-shell-app{grid-area:stage;min-width:0;min-height:0;height:100%;position:relative}.shell-app--mobile.sc-ds-shell-app-h .shell-app__content.sc-ds-shell-app{z-index:1;overflow:auto}.shell-app--mobile.sc-ds-shell-app-h .shell-app__tools.sc-ds-shell-app{z-index:2;width:100%;overflow:hidden;background:var(--color-background-primary)}.shell-app--mobile.sc-ds-shell-app-h .shell-app__mobile-sheet-nav.sc-ds-shell-app{display:block;z-index:3;overflow:hidden;background:var(--color-background-primary)}.shell-app--mobile.sc-ds-shell-app-h .shell-app__mobile-bar-nav.sc-ds-shell-app{grid-area:mobile-bar-nav;display:block;min-width:0;position:relative;z-index:4}.shell-app--mobile.sc-ds-shell-app-h .shell-app__tools[hidden].sc-ds-shell-app,.shell-app--mobile.sc-ds-shell-app-h .shell-app__mobile-sheet-nav[hidden].sc-ds-shell-app,.shell-app--mobile.sc-ds-shell-app-h .shell-app__mobile-bar-nav[hidden].sc-ds-shell-app{display:none}.shell-app--mobile-tool-active.sc-ds-shell-app-h .shell-app__content.sc-ds-shell-app,.shell-app--mobile-sheet-nav-open.sc-ds-shell-app-h .shell-app__content.sc-ds-shell-app,.shell-app--mobile-sheet-nav-open.sc-ds-shell-app-h .shell-app__tools.sc-ds-shell-app{visibility:hidden}`;const E=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsResponsiveModeChange=t(this,"dsResponsiveModeChange");this.navStyle="dashboard";this.gradientPreset=a;this.shortcutsEnabled=true;this.mobileDestination="area";this.mobileSheetNavOpen=false;this.toolsFullscreen=false;this.resolvedMode="desktop";this.resizeObserver=null;this.hasLoaded=false;this.panelNavTransition=new r;this.chromeSyncCoalescer=d((()=>this.syncChrome()));this.panelWidthTokens={expandedPx:0,collapsedPx:0};this.cachedViewportWidth=0;this.cachedViewportHeight=0;this.onWindowResize=()=>{this.updateResponsiveMode();if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()};this.onVisualViewportChange=()=>{if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()};this.onChromeTransitionStart=e=>{if(c(e)!=="panel-nav")return;this.panelNavTransition.enter();const s=x();this.cachedViewportWidth=s.width;this.cachedViewportHeight=s.height;this.syncChrome()};this.onChromeTransitionEnd=e=>{if(c(e)!=="panel-nav")return;this.panelNavTransition.exit();if(!this.panelNavTransition.isActive){this.scheduleChromeSync()}}}componentWillLoad(){if(typeof window!=="undefined"){this.resolvedMode=b(window.innerWidth)}}componentDidLoad(){this.hasLoaded=true;this.syncSlottedNavStyle();this.syncSlottedMobileState();this.connectMetricsObserver();this.connectViewportListeners();this.el.addEventListener(f,this.onChromeTransitionStart);this.el.addEventListener(u,this.onChromeTransitionEnd);requestAnimationFrame((()=>{this.cachePanelWidthTokens();this.scheduleChromeSync()}));const e=this.el.querySelector("ds-shell-tools, ds-panel-tools");this.toolsFullscreen=e?.getAttribute("presentation")==="fullscreen"}handleToolsPresentation(e){this.toolsFullscreen=e.detail?.presentation==="fullscreen"}disconnectedCallback(){this.resizeObserver?.disconnect();this.resizeObserver=null;this.disconnectViewportListeners();this.chromeSyncCoalescer.cancel();this.el.removeEventListener(f,this.onChromeTransitionStart);this.el.removeEventListener(u,this.onChromeTransitionEnd)}onShellPropsChange(){this.syncSlottedNavStyle();this.scheduleChromeSync()}onMobileStateChange(e,t){this.syncSlottedMobileState();if(t===true&&!this.mobileSheetNavOpen&&this.resolvedMode==="mobile"){requestAnimationFrame((()=>{const e=this.el.querySelector("ds-mobile-bar-nav");const t=document.activeElement;if(t instanceof s&&e?.contains(t))return;void e?.focusDestination?.("sheet-nav")}))}}updateResponsiveMode(){if(typeof window==="undefined")return;const e=b(window.innerWidth);if(e===this.resolvedMode)return;this.resolvedMode=e;this.syncSlottedMobileState();this.scheduleChromeSync();if(this.hasLoaded)this.dsResponsiveModeChange.emit({mode:e})}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}}syncSlottedMobileState(){const e=this.el.querySelector("ds-shell-tools");const s=this.el.querySelector("ds-mobile-bar-nav");const t=this.el.querySelector("ds-mobile-sheet-nav");if(e){e.setAttribute("responsive-mode",this.resolvedMode);e.responsiveMode=this.resolvedMode}if(s){s.activeDestination=this.mobileDestination;s.sheetNavExpanded=this.mobileSheetNavOpen}if(t){t.open=this.mobileSheetNavOpen}}connectMetricsObserver(){this.resizeObserver=new ResizeObserver((()=>{if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()}));this.resizeObserver.observe(this.el);const e=this.el.querySelector(".shell-app__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=O(e)}applyGradientVars(e,s){const t=e.style;for(const[e,l]of Object.entries(s)){if(l===null)t.removeProperty(e);else t.setProperty(e,l)}}clearGradientPaintVars(e){const s=[m,v,y];for(const t of e){for(const e of s)t.style.removeProperty(e)}}syncChromeLayoutVars(e,s,t,l){if(e){e.style.setProperty(_,t)}if(s){s.style.setProperty(g,l)}}resolvePanelWidthPx(e){const s=e?.querySelector(".panel-nav");if(this.panelNavTransition.isActive&&this.panelWidthTokens.expandedPx>0){const t=T(e,s);return V(this.panelWidthTokens,t)}const t=this.el.querySelector(".shell-app__panel");const l=t?.getBoundingClientRect().width??0;if(l>0)return l;if(this.panelWidthTokens.expandedPx>0){const t=T(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 x()}chromeLayerActive(){return this.resolvedMode!=="mobile"&&h(this.gradientPreset)!=="none"}handleWindowKeyDown(e){if(!this.shortcutsEnabled)return;if(M(e.target))return;const s=L(e);if(!s)return;e.preventDefault();const t=this.el.querySelector("ds-panel-nav");const l=this.el.querySelector("ds-shell-tools, ds-panel-tools");if(s==="toggle-panel-nav"){void t?.toggleCollapsed();return}if(s==="close-panel-tools"){void l?.closeDrawer?.();return}if(s.startsWith("open-tool:")&&l){const e=s.slice("open-tool:".length);void l.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 l=()=>{if(e)e.style.removeProperty(_);if(s)s.style.removeProperty(g)};const i=h(this.gradientPreset);if(i==="none"||this.resolvedMode==="mobile"){this.clearGradientPaintVars(t);l();return}const n=this.resolveViewportDimensions();const a=this.resolvePanelWidthPx(e);const o=z();const r=S(a);this.syncChromeLayoutVars(e,s,o,r);const d=w(i);const c=k({width:n.width,height:n.height});const f=p(i);for(const e of t){if(e===this.el){this.applyGradientVars(e,{[m]:d,[v]:c,[_]:o,[g]:r,[y]:f});continue}const s=e.tagName.toLowerCase()==="ds-bar-nav";this.applyGradientVars(e,{[m]:d,[v]:c,[y]:f,[_]:s?null:o,[g]:s?r:null})}}render(){const e=this.chromeLayerActive();const s=this.resolvedMode==="mobile";const t=s&&this.mobileDestination!=="area";const n=s&&(t||this.mobileSheetNavOpen);const a=!s&&this.toolsFullscreen;const o={"shell-app":true,"shell-app--gradient":e,[`shell-app--${this.navStyle}`]:true,[`shell-app--${this.resolvedMode}`]:true,"shell-app--tools-fullscreen":a,"shell-app--mobile-tool-active":t,"shell-app--mobile-sheet-nav-open":s&&this.mobileSheetNavOpen};return l(i,{key:"ed54ffc5cb0fa7ad328543830ca055fb8e288bdc",class:o,"responsive-mode":this.resolvedMode},l("div",{key:"095083f9ce48843d65d0c8c7e468ce0c3332cfa8",class:"shell-app__row"},l("div",{key:"75bb3895fe80a9d705a7c6378143d6242ae25a54",class:"shell-app__chrome","aria-hidden":"true"}),l("div",{key:"c8dead37ac4f581df224a21d419e9d606968049f",class:"shell-app__panel","aria-hidden":a?"true":undefined,inert:a?true:undefined},l("slot",{key:"1fe4c15358b66c41c5cf70132ae3c6e7440cc943",name:"panel"})),l("div",{key:"93e5edb4daaede3478ca06470a90b1f601075205",class:"shell-app__main"},l("div",{key:"34171c69bfc89d5195c5ddc4956f0f655b6f6d5f",class:"shell-app__bar","aria-hidden":a?"true":undefined,inert:a?true:undefined},l("slot",{key:"a4acba561a0715855943e818222c9e5666d0ccf3",name:"bar"})),l("div",{key:"8f9a3633c0cd10e8f7e94e6198295a3195f42d49",class:"shell-app__tools","aria-hidden":s&&(!t||this.mobileSheetNavOpen)?"true":undefined,inert:s&&(!t||this.mobileSheetNavOpen)?true:undefined,hidden:s&&!t},l("slot",{key:"31c00ca4bea0f17d94e02fd900ddb47cc1a1f84a",name:"tools"})),l("div",{key:"fce0391a33459c62a1729962005b4d301ce24b12",class:"shell-app__content","aria-hidden":a||n?"true":undefined,inert:a||n?true:undefined},l("slot",{key:"029025c9eb72e56ee9bbe445f279ab0f6135fe47"})),l("div",{key:"e61a07e608716d3df0656083c58c1c5f87d3c716",class:"shell-app__mobile-sheet-nav",hidden:!s||!this.mobileSheetNavOpen,"aria-hidden":s&&this.mobileSheetNavOpen?undefined:"true",inert:s&&this.mobileSheetNavOpen?undefined:true},l("slot",{key:"c9b9a802dcff58e1f764b8b17ab95eabc37f805e",name:"mobile-sheet-nav"})),l("div",{key:"bc7041785f09d239c59de787bbeeaadb41fa650c",class:"shell-app__mobile-bar-nav",hidden:!s},l("slot",{key:"651bc31d1a9e7343ca925d5c7fc89eac4754574d",name:"mobile-bar-nav"})))))}get el(){return this}static get watchers(){return{navStyle:[{onShellPropsChange:0}],gradientPreset:[{onShellPropsChange:0}],mobileDestination:[{onMobileStateChange:0}],mobileSheetNavOpen:[{onMobileStateChange:0}]}}static get style(){return $()}},[262,"ds-shell-app",{navStyle:[513,"nav-style"],gradientPreset:[513,"gradient-preset"],shortcutsEnabled:[4,"shortcuts-enabled"],mobileDestination:[1,"mobile-destination"],mobileSheetNavOpen:[4,"mobile-sheet-nav-open"],toolsFullscreen:[32],resolvedMode:[32]},[[0,"dsPresentationChange","handleToolsPresentation"],[10,"keydown","handleWindowKeyDown"]],{navStyle:[{onShellPropsChange:0}],gradientPreset:[{onShellPropsChange:0}],mobileDestination:[{onMobileStateChange:0}],mobileSheetNavOpen:[{onMobileStateChange:0}]}]);function W(){if(typeof customElements==="undefined"){return}const e=["ds-shell-app"];e.forEach((e=>{switch(e){case"ds-shell-app":if(!customElements.get(n(e))){customElements.define(n(e),E)}break}}))}W();const B=E;const F=W;export{B as DsShellApp,F as defineCustomElement};
 //# sourceMappingURL=ds-shell-app.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["SHELL_GRADIENT_IMAGE_VAR","SHELL_GRADIENT_SIZE_VAR","SHELL_GRADIENT_POSITION_PANEL_VAR","SHELL_GRADIENT_POSITION_BAR_VAR","SHELL_GRADIENT_OPACITY_VAR","buildShellRadialGradient","preset","DEFAULT_SHELL_GRADIENT_PRESET","buildShellRadialGradientForPreset","readShellViewportDimensions","win","w","globalThis","window","undefined","width","height","visual","visualViewport","Math","round","innerWidth","innerHeight","shellGradientSize","layout","shellGradientPositionPanel","shellGradientPositionBar","panelWidth","TOOL_SHORTCUT_KEYS","k","a","s","m","n","isBareShellShortcutKey","e","metaKey","ctrlKey","altKey","shiftKey","isEditableShortcutTarget","target","closest","el","editable","role","getAttribute","Boolean","isContentEditable","normalizedShortcutKey","key","code","length","toLowerCase","resolveShellShortcut","toolId","readCssVarWidthPx","context","cssVarName","document","probe","createElement","style","cssText","appendChild","getBoundingClientRect","removeChild","readPanelNavWidthTokens","navRoot","expandedPx","collapsedPx","isPanelNavCollapsed","panelNavHost","classList","contains","collapsedProp","collapsed","panelWidthPxFromTokens","tokens","shellAppCss","ShellApp","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","navStyle","gradientPreset","shortcutsEnabled","mobileDestination","mobileSheetNavOpen","toolsFullscreen","resolvedMode","resizeObserver","hasLoaded","panelNavTransition","ChromeTransitionDepth","chromeSyncCoalescer","createRafCoalescer","syncChrome","panelWidthTokens","cachedViewportWidth","cachedViewportHeight","onWindowResize","updateResponsiveMode","isActive","scheduleChromeSync","onVisualViewportChange","onChromeTransitionStart","event","readChromeTransitionSource","enter","viewport","onChromeTransitionEnd","exit","componentWillLoad","resolveShellResponsiveMode","componentDidLoad","syncSlottedNavStyle","syncSlottedMobileState","connectMetricsObserver","connectViewportListeners","addEventListener","CHROME_TRANSITION_START","CHROME_TRANSITION_END","requestAnimationFrame","cachePanelWidthTokens","tools","querySelector","handleToolsPresentation","detail","presentation","disconnectedCallback","disconnect","disconnectViewportListeners","cancel","removeEventListener","onShellPropsChange","onMobileStateChange","_next","previous","bar","activeElement","focusDestination","next","dsResponsiveModeChange","emit","mode","schedule","panel","setAttribute","sheetNav","responsiveMode","activeDestination","sheetNavExpanded","open","ResizeObserver","observe","panelWrap","passive","applyGradientVars","vars","name","value","Object","entries","removeProperty","setProperty","clearGradientPaintVars","targets","keys","syncChromeLayoutVars","panelPosition","barPosition","resolvePanelWidthPx","panelNav","measured","resolveViewportDimensions","chromeLayerActive","normalizeShellGradientPreset","handleWindowKeyDown","action","preventDefault","toggleCollapsed","closeDrawer","startsWith","slice","activateTool","filter","clearLayoutVars","image","size","opacity","shellGradientPresetOpacity","isBar","tagName","render","chromeActive","mobile","mobileToolActive","mobileStageBlocked","fullscreen","shellCls","h","Host","class","inert","hidden"],"sources":["src/wc/shell/shell-gradient.ts","src/wc/shell/shell-shortcuts.ts","src/wc/shell/shell-chrome-metrics.ts","src/wc/components/ShellApp/ShellApp.css?tag=ds-shell-app&encapsulation=scoped","src/wc/components/ShellApp/ShellApp.tsx"],"sourcesContent":["/** CSS var names consumed by `ds-panel-nav` / `ds-bar-nav` inside `ds-shell-app`. */\nimport type { ShellGradientPreset } from './shell-gradient-presets';\nimport {\n  DEFAULT_SHELL_GRADIENT_PRESET,\n  buildShellRadialGradientForPreset,\n  normalizeShellGradientPreset,\n} from './shell-gradient-presets';\n\nexport type { ShellGradientPreset } from './shell-gradient-presets';\nexport {\n  DEFAULT_SHELL_GRADIENT_PRESET,\n  SHELL_GRADIENT_PRESETS,\n  SHELL_GRADIENT_PRESET_LABELS,\n  buildShellRadialGradientForPreset,\n  buildShellRadialGradientFromStops,\n  isShellGradientPreset,\n  shellGradientPresetOpacity,\n  shellGradientPresetRecipe,\n  shellGradientPresetStopToken,\n} from './shell-gradient-presets';\n\nexport const SHELL_GRADIENT_IMAGE_VAR = '--ds-shell-gradient-image';\nexport const SHELL_GRADIENT_SIZE_VAR = '--ds-shell-gradient-size';\nexport const SHELL_GRADIENT_POSITION_PANEL_VAR = '--ds-shell-gradient-position-panel';\nexport const SHELL_GRADIENT_POSITION_BAR_VAR = '--ds-shell-gradient-position-bar';\nexport const SHELL_GRADIENT_OPACITY_VAR = '--ds-shell-gradient-opacity';\n/** Per chrome-surface background-position — offsets wash + grid to shell row origin. */\nexport const SHELL_CHROME_SURFACE_POSITION_VAR = '--ds-shell-chrome-surface-position';\n\n/** Whether the shared chrome layer (secondary bg + optional wash) should mount. */\nexport function shellChromeLayerActive(preset: ShellGradientPreset): boolean {\n  return normalizeShellGradientPreset(preset) !== 'none';\n}\n\n/**\n * Shell radial wash — same for panel and bar nav.\n * Tokens follow `data-theme` (light/dark intent stops).\n */\nexport function buildShellRadialGradient(\n  preset: ShellGradientPreset = DEFAULT_SHELL_GRADIENT_PRESET,\n): string {\n  return buildShellRadialGradientForPreset(preset);\n}\n\n/** Built-in radial image for the selected shell preset. */\nexport function shellGradientImage(\n  preset: ShellGradientPreset = DEFAULT_SHELL_GRADIENT_PRESET,\n): string {\n  return buildShellRadialGradient(preset);\n}\n\nexport interface ShellViewportDimensions {\n  width: number;\n  height: number;\n}\n\n/**\n * Viewport size for shell chrome with `background-attachment: fixed`.\n * Must not use the `ds-shell-app` element box — the shell can be shorter or\n * taller than the viewport when host height chains break or content overflows.\n */\nexport function readShellViewportDimensions(win?: Window): ShellViewportDimensions {\n  const w = win ?? (typeof globalThis.window !== 'undefined' ? globalThis.window : undefined);\n  if (!w) return { width: 0, height: 0 };\n\n  const visual = w.visualViewport;\n  return {\n    width: Math.round(visual?.width ?? w.innerWidth),\n    height: Math.round(visual?.height ?? w.innerHeight),\n  };\n}\n\nexport interface ShellGradientLayout {\n  width: number;\n  height: number;\n  panelWidth: number;\n}\n\n/** Pixel `background-size` for the fixed-attachment radial wash. */\nexport function shellGradientSize(layout: Pick<ShellGradientLayout, 'width' | 'height'>): string {\n  return `${Math.round(layout.width)}px ${Math.round(layout.height)}px`;\n}\n\nexport function shellGradientPositionPanel(): string {\n  return '0 0';\n}\n\nexport function shellGradientPositionBar(panelWidth: number): string {\n  return `${-Math.round(panelWidth)}px 0`;\n}\n\n/** Phase-lock a chrome rect to the shell row coordinate system (wash + grid). */\nexport function shellChromeSurfacePosition(leftPx: number, topPx: number): string {\n  return `${-Math.round(leftPx)}px ${-Math.round(topPx)}px`;\n}\n","import type { PanelToolsToolId } from '../components/PanelTools/panel-tools-types';\n\nexport type ShellShortcutAction =\n  | 'toggle-panel-nav'\n  | 'close-panel-tools'\n  | `open-tool:${PanelToolsToolId}`;\n\nconst TOOL_SHORTCUT_KEYS: Record<string, PanelToolsToolId> = {\n  k: 'search',\n  a: 'agents',\n  s: 'stacks',\n  m: 'messages',\n  n: 'activity',\n  '/': 'help',\n};\n\n/** Tool shortcut keys (K, A, S, M, N, /) toggle open/closed via `ds-panel-tools.activateTool`. */\n\n/** True when no modifier keys are held — avoids browser/app chords like ⌘N. */\nexport function isBareShellShortcutKey(\n  e: Pick<KeyboardEvent, 'metaKey' | 'ctrlKey' | 'altKey' | 'shiftKey'>,\n): boolean {\n  return !e.metaKey && !e.ctrlKey && !e.altKey && !e.shiftKey;\n}\n\n/** Skip shell shortcuts while typing in an editable control. */\nexport function isEditableShortcutTarget(target: EventTarget | null): boolean {\n  if (!target || typeof target !== 'object') return false;\n  if (!('closest' in target) || typeof target.closest !== 'function') return false;\n\n  const el = target as Element & { isContentEditable?: boolean };\n\n  const editable = el.closest(\n    'input, textarea, select, [contenteditable=\"\"], [contenteditable=\"true\"], [contenteditable=\"plaintext-only\"]',\n  );\n  if (editable) return true;\n\n  const role = el.getAttribute('role');\n  if (role === 'textbox' || role === 'combobox' || role === 'searchbox') return true;\n\n  return Boolean(el.isContentEditable);\n}\n\nfunction normalizedShortcutKey(e: Pick<KeyboardEvent, 'key' | 'code'>): string {\n  if (e.key === '[' || e.code === 'BracketLeft') return '[';\n  if (e.key === ']' || e.code === 'BracketRight') return ']';\n  return e.key.length === 1 ? e.key.toLowerCase() : e.key.toLowerCase();\n}\n\n/** Resolve a shell chrome shortcut, or `null` when the key is not handled. */\nexport function resolveShellShortcut(\n  e: Pick<KeyboardEvent, 'key' | 'code' | 'metaKey' | 'ctrlKey' | 'altKey' | 'shiftKey'>,\n): ShellShortcutAction | null {\n  if (!isBareShellShortcutKey(e)) return null;\n\n  const key = normalizedShortcutKey(e);\n  if (key === '[') return 'toggle-panel-nav';\n  if (key === ']') return 'close-panel-tools';\n\n  const toolId = TOOL_SHORTCUT_KEYS[key];\n  if (toolId) return `open-tool:${toolId}`;\n\n  return null;\n}\n","import { shellGradientPositionBar } from './shell-gradient';\n\n/** Read a `var(--token)` width in px using a hidden probe (works with calc() tokens). */\nexport function readCssVarWidthPx(context: HTMLElement, cssVarName: string): number {\n  if (typeof document === 'undefined') return 0;\n\n  const probe = document.createElement('div');\n  probe.style.cssText =\n    'position:absolute;visibility:hidden;pointer-events:none;height:0;width:var(' +\n    cssVarName +\n    ');';\n  context.appendChild(probe);\n  const width = probe.getBoundingClientRect().width;\n  context.removeChild(probe);\n  return width;\n}\n\nexport interface PanelNavWidthTokens {\n  expandedPx: number;\n  collapsedPx: number;\n}\n\n/** Resolve panel-nav expanded/collapsed widths from scoped CSS vars on `.panel-nav`. */\nexport function readPanelNavWidthTokens(navRoot: HTMLElement): PanelNavWidthTokens {\n  return {\n    expandedPx: readCssVarWidthPx(navRoot, '--_nav-width'),\n    collapsedPx: readCssVarWidthPx(navRoot, '--_nav-width-collapsed'),\n  };\n}\n\nexport function isPanelNavCollapsed(\n  panelNavHost: HTMLElement | null,\n  navRoot: HTMLElement | null,\n): boolean {\n  if (navRoot?.classList.contains('panel-nav--collapsed')) return true;\n  const collapsedProp = (panelNavHost as (HTMLElement & { collapsed?: boolean }) | null)?.collapsed;\n  return collapsedProp === true;\n}\n\nexport function panelWidthPxFromTokens(\n  tokens: PanelNavWidthTokens,\n  collapsed: boolean,\n): number {\n  return collapsed ? tokens.collapsedPx : tokens.expandedPx;\n}\n\nexport function barGradientPositionFromPanelWidth(panelWidthPx: number): string {\n  return shellGradientPositionBar(panelWidthPx);\n}\n",":host {\n  display: block;\n  height: 100%;\n  min-height: 0;\n  box-sizing: border-box;\n  overflow: hidden;\n  overscroll-behavior: none;\n  --ds-shell-panel-tools-width: var(--dimension-panel-width-xs);\n}\n\n.shell-app {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n  box-sizing: border-box;\n  overflow: hidden;\n  overscroll-behavior: none;\n  font-family: var(--typography-font-family, system-ui);\n}\n\n:host {\n  --_shell-chrome-bg: var(--color-background-secondary);\n}\n\n.shell-app__row {\n  display: flex;\n  flex: 1 1 auto;\n  min-height: 0;\n  height: 100%;\n  position: relative;\n}\n\n/*\n * One chrome layer behind the shell row. Wash uses background-attachment: fixed\n * so the pattern is locked to the viewport — panel/tools collapse only changes the\n * transparent window, not the pattern phase. JS sets wash background-size from\n * readShellViewportDimensions(), not the shell element box.\n */\n.shell-app__chrome {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  z-index: 0;\n  background-color: var(--_shell-chrome-bg);\n}\n\n:host(.shell-app--gradient) .shell-app__chrome::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  background-position: 0 0;\n  background-attachment: fixed;\n  z-index: 1;\n  opacity: var(--ds-shell-gradient-opacity, 1);\n  background-image: var(--ds-shell-gradient-image, none);\n  background-size: var(--ds-shell-gradient-size, auto);\n  background-repeat: no-repeat;\n}\n\n.shell-app__panel {\n  flex: 0 0 auto;\n  min-height: 0;\n  height: 100%;\n  position: relative;\n  /* Above main so resize handle line can paint over the workspace edge */\n  z-index: 2;\n}\n\n.shell-app__panel ::slotted(ds-panel-nav) {\n  display: block;\n  height: 100%;\n}\n\n.shell-app__main {\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: 0;\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  grid-template-rows: auto minmax(0, 1fr);\n  grid-template-areas:\n    'bar tools'\n    'content tools';\n  position: relative;\n  z-index: 1;\n}\n\n.shell-app__mobile-sheet-nav,\n.shell-app__mobile-bar-nav {\n  display: none;\n}\n\n.shell-app__bar {\n  grid-area: bar;\n  flex: 0 0 auto;\n  min-width: 0;\n}\n\n.shell-app__bar ::slotted(ds-bar-nav) {\n  display: block;\n}\n\n.shell-app__content {\n  grid-area: content;\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: 0;\n  overflow: auto;\n  overscroll-behavior: none;\n  /* Limit reflow to the page column — not on __main (breaks tools flex shrink). */\n  contain: layout;\n}\n\n/* Opaque page surface — masks the fixed chrome layer in the content column. */\n.shell-app__content {\n  position: relative;\n  z-index: 1;\n  background-color: var(--color-background-primary);\n}\n\n.shell-app__tools {\n  grid-area: tools;\n  flex: 0 0 auto;\n  min-width: 0;\n  min-height: 0;\n  height: 100%;\n  display: flex;\n  position: relative;\n  z-index: 0;\n  overflow: hidden;\n}\n\n.shell-app__tools ::slotted(ds-panel-tools) {\n  display: block;\n  height: 100%;\n  min-height: 0;\n}\n\n.shell-app__tools ::slotted(ds-shell-tools) {\n  display: block;\n  height: 100%;\n  min-height: 0;\n}\n\n:host(.shell-app--tools-fullscreen) .shell-app__panel,\n:host(.shell-app--tools-fullscreen) .shell-app__bar,\n:host(.shell-app--tools-fullscreen) .shell-app__content {\n  visibility: hidden;\n}\n\n:host(.shell-app--mobile) {\n  --_shell-chrome-bg: var(--color-background-primary);\n}\n\n:host(.shell-app--mobile) .shell-app__chrome,\n:host(.shell-app--mobile) .shell-app__panel,\n:host(.shell-app--mobile) .shell-app__bar {\n  display: none;\n}\n\n:host(.shell-app--mobile) .shell-app__main {\n  width: 100%;\n  grid-template-columns: minmax(0, 1fr);\n  grid-template-rows: minmax(0, 1fr) auto;\n  grid-template-areas:\n    'stage'\n    'mobile-bar-nav';\n  background: var(--color-background-primary);\n}\n\n:host(.shell-app--mobile) .shell-app__content,\n:host(.shell-app--mobile) .shell-app__tools,\n:host(.shell-app--mobile) .shell-app__mobile-sheet-nav {\n  grid-area: stage;\n  min-width: 0;\n  min-height: 0;\n  height: 100%;\n  position: relative;\n}\n\n:host(.shell-app--mobile) .shell-app__content {\n  z-index: 1;\n  overflow: auto;\n}\n\n:host(.shell-app--mobile) .shell-app__tools {\n  z-index: 2;\n  width: 100%;\n  overflow: hidden;\n  background: var(--color-background-primary);\n}\n\n:host(.shell-app--mobile) .shell-app__mobile-sheet-nav {\n  display: block;\n  z-index: 3;\n  overflow: hidden;\n  background: var(--color-background-primary);\n}\n\n:host(.shell-app--mobile) .shell-app__mobile-bar-nav {\n  grid-area: mobile-bar-nav;\n  display: block;\n  min-width: 0;\n  position: relative;\n  z-index: 4;\n}\n\n:host(.shell-app--mobile) .shell-app__tools[hidden],\n:host(.shell-app--mobile) .shell-app__mobile-sheet-nav[hidden],\n:host(.shell-app--mobile) .shell-app__mobile-bar-nav[hidden] {\n  display: none;\n}\n\n:host(.shell-app--mobile-tool-active) .shell-app__content,\n:host(.shell-app--mobile-sheet-nav-open) .shell-app__content,\n:host(.shell-app--mobile-sheet-nav-open) .shell-app__tools {\n  visibility: hidden;\n}\n","import {\n  Component,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  State,\n  Watch,\n  Listen,\n  h,\n  Host,\n} from '@stencil/core';\nimport type { NavChromeStyle } from '../../shell/nav-chrome';\nimport {\n  isEditableShortcutTarget,\n  resolveShellShortcut,\n} from '../../shell/shell-shortcuts';\nimport type { PanelToolsToolId } from '../PanelTools/panel-tools-types';\nimport {\n  DEFAULT_SHELL_GRADIENT_PRESET,\n  normalizeShellGradientPreset,\n  type ShellGradientPreset,\n} from '../../shell/shell-gradient-presets';\nimport {\n  CHROME_TRANSITION_END,\n  CHROME_TRANSITION_START,\n  ChromeTransitionDepth,\n  createRafCoalescer,\n  readChromeTransitionSource,\n} from '../../shell/chrome-transition';\nimport {\n  isPanelNavCollapsed,\n  panelWidthPxFromTokens,\n  readPanelNavWidthTokens,\n  type PanelNavWidthTokens,\n} from '../../shell/shell-chrome-metrics';\nimport {\n  SHELL_GRADIENT_IMAGE_VAR,\n  SHELL_GRADIENT_OPACITY_VAR,\n  SHELL_GRADIENT_POSITION_BAR_VAR,\n  SHELL_GRADIENT_POSITION_PANEL_VAR,\n  SHELL_GRADIENT_SIZE_VAR,\n  buildShellRadialGradient,\n  readShellViewportDimensions,\n  shellGradientPositionBar,\n  shellGradientPositionPanel,\n  shellGradientPresetOpacity,\n  shellGradientSize,\n} from '../../shell/shell-gradient';\nimport {\n  resolveShellResponsiveMode,\n  type MobileDestination,\n  type ShellResponsiveMode,\n} from '../../shell/shell-responsive';\n\n@Component({\n  tag: 'ds-shell-app',\n  styleUrl: 'ShellApp.css',\n  scoped: true,\n})\nexport class ShellApp {\n  /** Chrome style propagated to slotted `ds-panel-nav` and `ds-bar-nav`. */\n  @Prop({ attribute: 'nav-style', reflect: true }) navStyle: NavChromeStyle = 'dashboard';\n\n  /**\n   * Shell chrome wash preset. `none` renders solid chrome; the remaining\n   * presets use token-based washes that adapt to the active color theme.\n   */\n  @Prop({ attribute: 'gradient-preset', reflect: true }) gradientPreset: ShellGradientPreset =\n    DEFAULT_SHELL_GRADIENT_PRESET;\n\n  /** When `true` (default), registers global shell keyboard shortcuts. `[` toggles panel nav; `]` closes tools; K, A, S, M, N, and / toggle tool drawers. Modifiers are ignored so browser chords like ⌘N stay native. */\n  @Prop({ attribute: 'shortcuts-enabled' }) shortcutsEnabled: boolean = true;\n\n  /** Controlled mobile surface shown above the persistent bottom bar. */\n  @Prop({ attribute: 'mobile-destination' })\n  mobileDestination: MobileDestination = 'area';\n\n  /** Controlled full-stage Mobile Sheet Nav state. */\n  @Prop({ attribute: 'mobile-sheet-nav-open' })\n  mobileSheetNavOpen: boolean = false;\n\n  /** Emitted after crossing the fixed 768px or 1200px shell boundaries. */\n  @Event() dsResponsiveModeChange!: EventEmitter<{ mode: ShellResponsiveMode }>;\n\n  @Element() el!: HTMLElement;\n  @State() private toolsFullscreen = false;\n  @State() private resolvedMode: ShellResponsiveMode = 'desktop';\n\n  private resizeObserver: ResizeObserver | null = null;\n  private hasLoaded = false;\n  private readonly panelNavTransition = new ChromeTransitionDepth();\n  private readonly chromeSyncCoalescer = createRafCoalescer(() => this.syncChrome());\n  private panelWidthTokens: PanelNavWidthTokens = { expandedPx: 0, collapsedPx: 0 };\n  private cachedViewportWidth = 0;\n  private cachedViewportHeight = 0;\n  private onWindowResize = () => {\n    this.updateResponsiveMode();\n    if (this.panelNavTransition.isActive) return;\n    this.scheduleChromeSync();\n  };\n  private onVisualViewportChange = () => {\n    if (this.panelNavTransition.isActive) return;\n    this.scheduleChromeSync();\n  };\n\n  componentWillLoad() {\n    if (typeof window !== 'undefined') {\n      this.resolvedMode = resolveShellResponsiveMode(window.innerWidth);\n    }\n  }\n\n  componentDidLoad() {\n    this.hasLoaded = true;\n    this.syncSlottedNavStyle();\n    this.syncSlottedMobileState();\n    this.connectMetricsObserver();\n    this.connectViewportListeners();\n    this.el.addEventListener(CHROME_TRANSITION_START, this.onChromeTransitionStart);\n    this.el.addEventListener(CHROME_TRANSITION_END, this.onChromeTransitionEnd);\n    requestAnimationFrame(() => {\n      this.cachePanelWidthTokens();\n      this.scheduleChromeSync();\n    });\n    const tools = this.el.querySelector('ds-shell-tools, ds-panel-tools');\n    this.toolsFullscreen = tools?.getAttribute('presentation') === 'fullscreen';\n  }\n\n  @Listen('dsPresentationChange')\n  handleToolsPresentation(event: CustomEvent<{ presentation?: string }>) {\n    this.toolsFullscreen = event.detail?.presentation === 'fullscreen';\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = null;\n    this.disconnectViewportListeners();\n    this.chromeSyncCoalescer.cancel();\n    this.el.removeEventListener(CHROME_TRANSITION_START, this.onChromeTransitionStart);\n    this.el.removeEventListener(CHROME_TRANSITION_END, this.onChromeTransitionEnd);\n  }\n\n  @Watch('navStyle')\n  @Watch('gradientPreset')\n  onShellPropsChange() {\n    this.syncSlottedNavStyle();\n    this.scheduleChromeSync();\n  }\n\n  @Watch('mobileDestination')\n  @Watch('mobileSheetNavOpen')\n  onMobileStateChange(_next: unknown, previous: unknown) {\n    this.syncSlottedMobileState();\n    if (\n      previous === true &&\n      !this.mobileSheetNavOpen &&\n      this.resolvedMode === 'mobile'\n    ) {\n      requestAnimationFrame(() => {\n        const bar = this.el.querySelector('ds-mobile-bar-nav') as\n          | (HTMLElement & {\n              focusDestination?: (\n                destination: MobileDestination | 'sheet-nav'\n              ) => Promise<void>;\n            })\n          | null;\n        const activeElement = document.activeElement;\n        if (activeElement instanceof HTMLElement && bar?.contains(activeElement)) return;\n        void bar?.focusDestination?.('sheet-nav');\n      });\n    }\n  }\n\n  private updateResponsiveMode() {\n    if (typeof window === 'undefined') return;\n    const next = resolveShellResponsiveMode(window.innerWidth);\n    if (next === this.resolvedMode) return;\n    this.resolvedMode = next;\n    this.syncSlottedMobileState();\n    this.scheduleChromeSync();\n    if (this.hasLoaded) this.dsResponsiveModeChange.emit({ mode: next });\n  }\n\n  private onChromeTransitionStart = (event: Event) => {\n    if (readChromeTransitionSource(event) !== 'panel-nav') return;\n\n    this.panelNavTransition.enter();\n    const viewport = readShellViewportDimensions();\n    this.cachedViewportWidth = viewport.width;\n    this.cachedViewportHeight = viewport.height;\n    this.syncChrome();\n  };\n\n  private onChromeTransitionEnd = (event: Event) => {\n    if (readChromeTransitionSource(event) !== 'panel-nav') return;\n\n    this.panelNavTransition.exit();\n    if (!this.panelNavTransition.isActive) {\n      this.scheduleChromeSync();\n    }\n  };\n\n  /** Coalesce ResizeObserver bursts to one layout read per frame. */\n  private scheduleChromeSync() {\n    this.chromeSyncCoalescer.schedule();\n  }\n\n  private syncSlottedNavStyle() {\n    const panel = this.el.querySelector('ds-panel-nav') as (HTMLElement & { navStyle: NavChromeStyle }) | null;\n    const bar = this.el.querySelector('ds-bar-nav') as (HTMLElement & { navStyle: NavChromeStyle }) | null;\n    if (panel) {\n      panel.setAttribute('nav-style', this.navStyle);\n      panel.navStyle = this.navStyle;\n    }\n    if (bar) {\n      bar.setAttribute('nav-style', this.navStyle);\n      bar.navStyle = this.navStyle;\n    }\n  }\n\n  private syncSlottedMobileState() {\n    const tools = this.el.querySelector('ds-shell-tools') as\n      | (HTMLElement & { responsiveMode: ShellResponsiveMode })\n      | null;\n    const bar = this.el.querySelector('ds-mobile-bar-nav') as\n      | (HTMLElement & {\n          activeDestination: MobileDestination;\n          sheetNavExpanded: boolean;\n        })\n      | null;\n    const sheetNav = this.el.querySelector('ds-mobile-sheet-nav') as\n      | (HTMLElement & { open: boolean })\n      | null;\n\n    if (tools) {\n      tools.setAttribute('responsive-mode', this.resolvedMode);\n      tools.responsiveMode = this.resolvedMode;\n    }\n    if (bar) {\n      bar.activeDestination = this.mobileDestination;\n      bar.sheetNavExpanded = this.mobileSheetNavOpen;\n    }\n    if (sheetNav) {\n      sheetNav.open = this.mobileSheetNavOpen;\n    }\n  }\n\n  private connectMetricsObserver() {\n    this.resizeObserver = new ResizeObserver(() => {\n      if (this.panelNavTransition.isActive) return;\n      this.scheduleChromeSync();\n    });\n    this.resizeObserver.observe(this.el);\n    const panelWrap = this.el.querySelector('.shell-app__panel');\n    if (panelWrap) this.resizeObserver.observe(panelWrap);\n  }\n\n  private connectViewportListeners() {\n    if (typeof window === 'undefined') return;\n\n    window.addEventListener('resize', this.onWindowResize, { passive: true });\n\n    const visual = window.visualViewport;\n    if (visual) {\n      visual.addEventListener('resize', this.onVisualViewportChange, { passive: true });\n      visual.addEventListener('scroll', this.onVisualViewportChange, { passive: true });\n    }\n  }\n\n  private disconnectViewportListeners() {\n    if (typeof window === 'undefined') return;\n\n    window.removeEventListener('resize', this.onWindowResize);\n\n    const visual = window.visualViewport;\n    if (visual) {\n      visual.removeEventListener('resize', this.onVisualViewportChange);\n      visual.removeEventListener('scroll', this.onVisualViewportChange);\n    }\n  }\n\n  private cachePanelWidthTokens() {\n    const navRoot = this.el.querySelector('ds-panel-nav .panel-nav') as HTMLElement | null;\n    if (!navRoot) return;\n    this.panelWidthTokens = readPanelNavWidthTokens(navRoot);\n  }\n\n  private applyGradientVars(target: HTMLElement, vars: Record<string, string | null>) {\n    const style = target.style;\n    for (const [name, value] of Object.entries(vars)) {\n      if (value === null) style.removeProperty(name);\n      else style.setProperty(name, value);\n    }\n  }\n\n  private clearGradientPaintVars(targets: HTMLElement[]) {\n    const keys = [\n      SHELL_GRADIENT_IMAGE_VAR,\n      SHELL_GRADIENT_SIZE_VAR,\n      SHELL_GRADIENT_OPACITY_VAR,\n    ];\n    for (const target of targets) {\n      for (const key of keys) target.style.removeProperty(key);\n    }\n  }\n\n  /** Panel/bar wash offsets for scroll fades and badge rings. */\n  private syncChromeLayoutVars(\n    panel: HTMLElement | null,\n    bar: HTMLElement | null,\n    panelPosition: string,\n    barPosition: string,\n  ) {\n    if (panel) {\n      panel.style.setProperty(SHELL_GRADIENT_POSITION_PANEL_VAR, panelPosition);\n    }\n    if (bar) {\n      bar.style.setProperty(SHELL_GRADIENT_POSITION_BAR_VAR, barPosition);\n    }\n  }\n\n  private resolvePanelWidthPx(panelNav: HTMLElement | null): number {\n    const navRoot = panelNav?.querySelector('.panel-nav') as HTMLElement | null;\n\n    if (this.panelNavTransition.isActive && this.panelWidthTokens.expandedPx > 0) {\n      const collapsed = isPanelNavCollapsed(panelNav, navRoot);\n      return panelWidthPxFromTokens(this.panelWidthTokens, collapsed);\n    }\n\n    const panelWrap = this.el.querySelector('.shell-app__panel') as HTMLElement | null;\n    const measured = panelWrap?.getBoundingClientRect().width ?? 0;\n    if (measured > 0) return measured;\n\n    if (this.panelWidthTokens.expandedPx > 0) {\n      const collapsed = isPanelNavCollapsed(panelNav, navRoot);\n      return panelWidthPxFromTokens(this.panelWidthTokens, collapsed);\n    }\n\n    return 0;\n  }\n\n  /** Fixed-attachment wash/grid size — always the viewport, never the shell element box. */\n  private resolveViewportDimensions(): { width: number; height: number } {\n    if (this.panelNavTransition.isActive && this.cachedViewportWidth > 0) {\n      return {\n        width: this.cachedViewportWidth,\n        height: this.cachedViewportHeight,\n      };\n    }\n\n    return readShellViewportDimensions();\n  }\n\n  private chromeLayerActive(): boolean {\n    return (\n      this.resolvedMode !== 'mobile' &&\n      normalizeShellGradientPreset(this.gradientPreset) !== 'none'\n    );\n  }\n\n  @Listen('keydown', { target: 'window', capture: true })\n  handleWindowKeyDown(e: KeyboardEvent) {\n    if (!this.shortcutsEnabled) return;\n    if (isEditableShortcutTarget(e.target)) return;\n\n    const action = resolveShellShortcut(e);\n    if (!action) return;\n\n    e.preventDefault();\n\n    const panel = this.el.querySelector('ds-panel-nav') as HTMLDsPanelNavElement | null;\n    const tools = this.el.querySelector('ds-shell-tools, ds-panel-tools') as\n      | (HTMLElement & {\n          closeDrawer?: () => Promise<void>;\n          activateTool?: (id: PanelToolsToolId) => Promise<void>;\n        })\n      | null;\n\n    if (action === 'toggle-panel-nav') {\n      void panel?.toggleCollapsed();\n      return;\n    }\n\n    if (action === 'close-panel-tools') {\n      void tools?.closeDrawer?.();\n      return;\n    }\n\n    if (action.startsWith('open-tool:') && tools) {\n      const toolId = action.slice('open-tool:'.length) as PanelToolsToolId;\n      void tools.activateTool?.(toolId);\n    }\n  }\n\n  private syncChrome() {\n    const panelNav = this.el.querySelector('ds-panel-nav') as HTMLElement | null;\n    const bar = this.el.querySelector('ds-bar-nav') as HTMLElement | null;\n    const targets = [this.el, panelNav, bar].filter((el): el is HTMLElement => el !== null);\n\n    const clearLayoutVars = () => {\n      if (panelNav) panelNav.style.removeProperty(SHELL_GRADIENT_POSITION_PANEL_VAR);\n      if (bar) bar.style.removeProperty(SHELL_GRADIENT_POSITION_BAR_VAR);\n    };\n\n    const preset = normalizeShellGradientPreset(this.gradientPreset);\n    if (preset === 'none' || this.resolvedMode === 'mobile') {\n      this.clearGradientPaintVars(targets);\n      clearLayoutVars();\n      return;\n    }\n\n    const viewport = this.resolveViewportDimensions();\n    const panelWidth = this.resolvePanelWidthPx(panelNav);\n\n    const panelPosition = shellGradientPositionPanel();\n    const barPosition = shellGradientPositionBar(panelWidth);\n\n    this.syncChromeLayoutVars(panelNav, bar, panelPosition, barPosition);\n\n    const image = buildShellRadialGradient(preset);\n\n    const size = shellGradientSize({\n      width: viewport.width,\n      height: viewport.height,\n    });\n    const opacity = shellGradientPresetOpacity(preset);\n\n    for (const target of targets) {\n      if (target === this.el) {\n        this.applyGradientVars(target, {\n          [SHELL_GRADIENT_IMAGE_VAR]: image,\n          [SHELL_GRADIENT_SIZE_VAR]: size,\n          [SHELL_GRADIENT_POSITION_PANEL_VAR]: panelPosition,\n          [SHELL_GRADIENT_POSITION_BAR_VAR]: barPosition,\n          [SHELL_GRADIENT_OPACITY_VAR]: opacity,\n        });\n        continue;\n      }\n\n      const isBar = target.tagName.toLowerCase() === 'ds-bar-nav';\n      this.applyGradientVars(target, {\n        [SHELL_GRADIENT_IMAGE_VAR]: image,\n        [SHELL_GRADIENT_SIZE_VAR]: size,\n        [SHELL_GRADIENT_OPACITY_VAR]: opacity,\n        [SHELL_GRADIENT_POSITION_PANEL_VAR]: isBar ? null : panelPosition,\n        [SHELL_GRADIENT_POSITION_BAR_VAR]: isBar ? barPosition : null,\n      });\n    }\n  }\n\n  render() {\n    const chromeActive = this.chromeLayerActive();\n    const mobile = this.resolvedMode === 'mobile';\n    const mobileToolActive = mobile && this.mobileDestination !== 'area';\n    const mobileStageBlocked = mobile && (mobileToolActive || this.mobileSheetNavOpen);\n    const fullscreen = !mobile && this.toolsFullscreen;\n    const shellCls: Record<string, boolean> = {\n      'shell-app': true,\n      'shell-app--gradient': chromeActive,\n      [`shell-app--${this.navStyle}`]: true,\n      [`shell-app--${this.resolvedMode}`]: true,\n      'shell-app--tools-fullscreen': fullscreen,\n      'shell-app--mobile-tool-active': mobileToolActive,\n      'shell-app--mobile-sheet-nav-open': mobile && this.mobileSheetNavOpen,\n    };\n\n    return (\n      <Host class={shellCls} responsive-mode={this.resolvedMode}>\n        <div class=\"shell-app__row\">\n          <div class=\"shell-app__chrome\" aria-hidden=\"true\" />\n          <div class=\"shell-app__panel\" aria-hidden={fullscreen ? 'true' : undefined} inert={fullscreen ? true : undefined}>\n            <slot name=\"panel\" />\n          </div>\n          <div class=\"shell-app__main\">\n            <div class=\"shell-app__bar\" aria-hidden={fullscreen ? 'true' : undefined} inert={fullscreen ? true : undefined}>\n              <slot name=\"bar\" />\n            </div>\n            <div\n              class=\"shell-app__tools\"\n              aria-hidden={mobile && (!mobileToolActive || this.mobileSheetNavOpen) ? 'true' : undefined}\n              inert={mobile && (!mobileToolActive || this.mobileSheetNavOpen) ? true : undefined}\n              hidden={mobile && !mobileToolActive}\n            >\n              <slot name=\"tools\" />\n            </div>\n            <div\n              class=\"shell-app__content\"\n              aria-hidden={fullscreen || mobileStageBlocked ? 'true' : undefined}\n              inert={fullscreen || mobileStageBlocked ? true : undefined}\n            >\n              <slot />\n            </div>\n            <div\n              class=\"shell-app__mobile-sheet-nav\"\n              hidden={!mobile || !this.mobileSheetNavOpen}\n              aria-hidden={mobile && this.mobileSheetNavOpen ? undefined : 'true'}\n              inert={mobile && this.mobileSheetNavOpen ? undefined : true}\n            >\n              <slot name=\"mobile-sheet-nav\" />\n            </div>\n            <div class=\"shell-app__mobile-bar-nav\" hidden={!mobile}>\n              <slot name=\"mobile-bar-nav\" />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["SHELL_GRADIENT_IMAGE_VAR","SHELL_GRADIENT_SIZE_VAR","SHELL_GRADIENT_POSITION_PANEL_VAR","SHELL_GRADIENT_POSITION_BAR_VAR","SHELL_GRADIENT_OPACITY_VAR","buildShellRadialGradient","preset","DEFAULT_SHELL_GRADIENT_PRESET","buildShellRadialGradientForPreset","readShellViewportDimensions","win","w","globalThis","window","undefined","width","height","visual","visualViewport","Math","round","innerWidth","innerHeight","shellGradientSize","layout","shellGradientPositionPanel","shellGradientPositionBar","panelWidth","TOOL_SHORTCUT_KEYS","k","a","s","m","n","isBareShellShortcutKey","e","metaKey","ctrlKey","altKey","shiftKey","isEditableShortcutTarget","target","closest","el","editable","role","getAttribute","Boolean","isContentEditable","normalizedShortcutKey","key","code","length","toLowerCase","resolveShellShortcut","toolId","readCssVarWidthPx","context","cssVarName","document","probe","createElement","style","cssText","appendChild","getBoundingClientRect","removeChild","readPanelNavWidthTokens","navRoot","expandedPx","collapsedPx","isPanelNavCollapsed","panelNavHost","classList","contains","collapsedProp","collapsed","panelWidthPxFromTokens","tokens","shellAppCss","ShellApp","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","navStyle","gradientPreset","shortcutsEnabled","mobileDestination","mobileSheetNavOpen","toolsFullscreen","resolvedMode","resizeObserver","hasLoaded","panelNavTransition","ChromeTransitionDepth","chromeSyncCoalescer","createRafCoalescer","syncChrome","panelWidthTokens","cachedViewportWidth","cachedViewportHeight","onWindowResize","updateResponsiveMode","isActive","scheduleChromeSync","onVisualViewportChange","onChromeTransitionStart","event","readChromeTransitionSource","enter","viewport","onChromeTransitionEnd","exit","componentWillLoad","resolveShellResponsiveMode","componentDidLoad","syncSlottedNavStyle","syncSlottedMobileState","connectMetricsObserver","connectViewportListeners","addEventListener","CHROME_TRANSITION_START","CHROME_TRANSITION_END","requestAnimationFrame","cachePanelWidthTokens","tools","querySelector","handleToolsPresentation","detail","presentation","disconnectedCallback","disconnect","disconnectViewportListeners","cancel","removeEventListener","onShellPropsChange","onMobileStateChange","_next","previous","bar","activeElement","focusDestination","next","dsResponsiveModeChange","emit","mode","schedule","panel","setAttribute","sheetNav","responsiveMode","activeDestination","sheetNavExpanded","open","ResizeObserver","observe","panelWrap","passive","applyGradientVars","vars","name","value","Object","entries","removeProperty","setProperty","clearGradientPaintVars","targets","keys","syncChromeLayoutVars","panelPosition","barPosition","resolvePanelWidthPx","panelNav","measured","resolveViewportDimensions","chromeLayerActive","normalizeShellGradientPreset","handleWindowKeyDown","action","preventDefault","toggleCollapsed","closeDrawer","startsWith","slice","activateTool","filter","clearLayoutVars","image","size","opacity","shellGradientPresetOpacity","isBar","tagName","render","chromeActive","mobile","mobileToolActive","mobileStageBlocked","fullscreen","shellCls","h","Host","class","inert","hidden"],"sources":["src/wc/shell/shell-gradient.ts","src/wc/shell/shell-shortcuts.ts","src/wc/shell/shell-chrome-metrics.ts","src/wc/components/ShellApp/ShellApp.css?tag=ds-shell-app&encapsulation=scoped","src/wc/components/ShellApp/ShellApp.tsx"],"sourcesContent":["/** CSS var names consumed by `ds-panel-nav` / `ds-bar-nav` inside `ds-shell-app`. */\nimport type { ShellGradientPreset } from './shell-gradient-presets';\nimport {\n  DEFAULT_SHELL_GRADIENT_PRESET,\n  buildShellRadialGradientForPreset,\n  normalizeShellGradientPreset,\n} from './shell-gradient-presets';\n\nexport type { ShellGradientPreset } from './shell-gradient-presets';\nexport {\n  DEFAULT_SHELL_GRADIENT_PRESET,\n  SHELL_GRADIENT_PRESETS,\n  SHELL_GRADIENT_PRESET_LABELS,\n  buildShellRadialGradientForPreset,\n  buildShellRadialGradientFromStops,\n  isShellGradientPreset,\n  shellGradientPresetOpacity,\n  shellGradientPresetRecipe,\n  shellGradientPresetStopToken,\n} from './shell-gradient-presets';\n\nexport const SHELL_GRADIENT_IMAGE_VAR = '--ds-shell-gradient-image';\nexport const SHELL_GRADIENT_SIZE_VAR = '--ds-shell-gradient-size';\nexport const SHELL_GRADIENT_POSITION_PANEL_VAR = '--ds-shell-gradient-position-panel';\nexport const SHELL_GRADIENT_POSITION_BAR_VAR = '--ds-shell-gradient-position-bar';\nexport const SHELL_GRADIENT_OPACITY_VAR = '--ds-shell-gradient-opacity';\n/** Per chrome-surface background-position — offsets wash + grid to shell row origin. */\nexport const SHELL_CHROME_SURFACE_POSITION_VAR = '--ds-shell-chrome-surface-position';\n\n/** Whether the shared chrome layer (secondary bg + optional wash) should mount. */\nexport function shellChromeLayerActive(preset: ShellGradientPreset): boolean {\n  return normalizeShellGradientPreset(preset) !== 'none';\n}\n\n/**\n * Shell radial wash — same for panel and bar nav.\n * Tokens follow `data-theme` (light/dark intent stops).\n */\nexport function buildShellRadialGradient(\n  preset: ShellGradientPreset = DEFAULT_SHELL_GRADIENT_PRESET,\n): string {\n  return buildShellRadialGradientForPreset(preset);\n}\n\n/** Built-in radial image for the selected shell preset. */\nexport function shellGradientImage(\n  preset: ShellGradientPreset = DEFAULT_SHELL_GRADIENT_PRESET,\n): string {\n  return buildShellRadialGradient(preset);\n}\n\nexport interface ShellViewportDimensions {\n  width: number;\n  height: number;\n}\n\n/**\n * Viewport size for shell chrome with `background-attachment: fixed`.\n * Must not use the `ds-shell-app` element box — the shell can be shorter or\n * taller than the viewport when host height chains break or content overflows.\n */\nexport function readShellViewportDimensions(win?: Window): ShellViewportDimensions {\n  const w = win ?? (typeof globalThis.window !== 'undefined' ? globalThis.window : undefined);\n  if (!w) return { width: 0, height: 0 };\n\n  const visual = w.visualViewport;\n  return {\n    width: Math.round(visual?.width ?? w.innerWidth),\n    height: Math.round(visual?.height ?? w.innerHeight),\n  };\n}\n\nexport interface ShellGradientLayout {\n  width: number;\n  height: number;\n  panelWidth: number;\n}\n\n/** Pixel `background-size` for the fixed-attachment radial wash. */\nexport function shellGradientSize(layout: Pick<ShellGradientLayout, 'width' | 'height'>): string {\n  return `${Math.round(layout.width)}px ${Math.round(layout.height)}px`;\n}\n\nexport function shellGradientPositionPanel(): string {\n  return '0 0';\n}\n\nexport function shellGradientPositionBar(panelWidth: number): string {\n  return `${-Math.round(panelWidth)}px 0`;\n}\n\n/** Phase-lock a chrome rect to the shell row coordinate system (wash + grid). */\nexport function shellChromeSurfacePosition(leftPx: number, topPx: number): string {\n  return `${-Math.round(leftPx)}px ${-Math.round(topPx)}px`;\n}\n","import type { PanelToolsToolId } from '../components/PanelTools/panel-tools-types';\n\nexport type ShellShortcutAction =\n  | 'toggle-panel-nav'\n  | 'close-panel-tools'\n  | `open-tool:${PanelToolsToolId}`;\n\nconst TOOL_SHORTCUT_KEYS: Record<string, PanelToolsToolId> = {\n  k: 'search',\n  a: 'agents',\n  s: 'stacks',\n  m: 'messages',\n  n: 'activity',\n  '/': 'help',\n};\n\n/** Tool shortcut keys (K, A, S, M, N, /) toggle open/closed via `ds-panel-tools.activateTool`. */\n\n/** True when no modifier keys are held — avoids browser/app chords like ⌘N. */\nexport function isBareShellShortcutKey(\n  e: Pick<KeyboardEvent, 'metaKey' | 'ctrlKey' | 'altKey' | 'shiftKey'>,\n): boolean {\n  return !e.metaKey && !e.ctrlKey && !e.altKey && !e.shiftKey;\n}\n\n/** Skip shell shortcuts while typing in an editable control. */\nexport function isEditableShortcutTarget(target: EventTarget | null): boolean {\n  if (!target || typeof target !== 'object') return false;\n  if (!('closest' in target) || typeof target.closest !== 'function') return false;\n\n  const el = target as Element & { isContentEditable?: boolean };\n\n  const editable = el.closest(\n    'input, textarea, select, [contenteditable=\"\"], [contenteditable=\"true\"], [contenteditable=\"plaintext-only\"]',\n  );\n  if (editable) return true;\n\n  const role = el.getAttribute('role');\n  if (role === 'textbox' || role === 'combobox' || role === 'searchbox') return true;\n\n  return Boolean(el.isContentEditable);\n}\n\nfunction normalizedShortcutKey(e: Pick<KeyboardEvent, 'key' | 'code'>): string {\n  if (e.key === '[' || e.code === 'BracketLeft') return '[';\n  if (e.key === ']' || e.code === 'BracketRight') return ']';\n  return e.key.length === 1 ? e.key.toLowerCase() : e.key.toLowerCase();\n}\n\n/** Resolve a shell chrome shortcut, or `null` when the key is not handled. */\nexport function resolveShellShortcut(\n  e: Pick<KeyboardEvent, 'key' | 'code' | 'metaKey' | 'ctrlKey' | 'altKey' | 'shiftKey'>,\n): ShellShortcutAction | null {\n  if (!isBareShellShortcutKey(e)) return null;\n\n  const key = normalizedShortcutKey(e);\n  if (key === '[') return 'toggle-panel-nav';\n  if (key === ']') return 'close-panel-tools';\n\n  const toolId = TOOL_SHORTCUT_KEYS[key];\n  if (toolId) return `open-tool:${toolId}`;\n\n  return null;\n}\n","import { shellGradientPositionBar } from './shell-gradient';\n\n/** Read a `var(--token)` width in px using a hidden probe (works with calc() tokens). */\nexport function readCssVarWidthPx(context: HTMLElement, cssVarName: string): number {\n  if (typeof document === 'undefined') return 0;\n\n  const probe = document.createElement('div');\n  probe.style.cssText =\n    'position:absolute;visibility:hidden;pointer-events:none;height:0;width:var(' +\n    cssVarName +\n    ');';\n  context.appendChild(probe);\n  const width = probe.getBoundingClientRect().width;\n  context.removeChild(probe);\n  return width;\n}\n\nexport interface PanelNavWidthTokens {\n  expandedPx: number;\n  collapsedPx: number;\n}\n\n/** Resolve panel-nav expanded/collapsed widths from scoped CSS vars on `.panel-nav`. */\nexport function readPanelNavWidthTokens(navRoot: HTMLElement): PanelNavWidthTokens {\n  return {\n    expandedPx: readCssVarWidthPx(navRoot, '--_nav-width'),\n    collapsedPx: readCssVarWidthPx(navRoot, '--_nav-width-collapsed'),\n  };\n}\n\nexport function isPanelNavCollapsed(\n  panelNavHost: HTMLElement | null,\n  navRoot: HTMLElement | null,\n): boolean {\n  if (navRoot?.classList.contains('panel-nav--collapsed')) return true;\n  const collapsedProp = (panelNavHost as (HTMLElement & { collapsed?: boolean }) | null)?.collapsed;\n  return collapsedProp === true;\n}\n\nexport function panelWidthPxFromTokens(\n  tokens: PanelNavWidthTokens,\n  collapsed: boolean,\n): number {\n  return collapsed ? tokens.collapsedPx : tokens.expandedPx;\n}\n\nexport function barGradientPositionFromPanelWidth(panelWidthPx: number): string {\n  return shellGradientPositionBar(panelWidthPx);\n}\n",":host {\n  display: block;\n  height: 100%;\n  min-height: 0;\n  box-sizing: border-box;\n  overflow: hidden;\n  overscroll-behavior: none;\n  --ds-shell-panel-tools-width: var(--dimension-panel-width-xs);\n}\n\n.shell-app {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n  box-sizing: border-box;\n  overflow: hidden;\n  overscroll-behavior: none;\n  font-family: var(--typography-font-family, system-ui);\n}\n\n:host {\n  --_shell-chrome-bg: var(--color-background-secondary);\n}\n\n.shell-app__row {\n  display: flex;\n  flex: 1 1 auto;\n  min-height: 0;\n  height: 100%;\n  position: relative;\n}\n\n/*\n * One chrome layer behind the shell row. Wash uses background-attachment: fixed\n * so the pattern is locked to the viewport — panel/tools collapse only changes the\n * transparent window, not the pattern phase. JS sets wash background-size from\n * readShellViewportDimensions(), not the shell element box.\n */\n.shell-app__chrome {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  z-index: 0;\n  background-color: var(--_shell-chrome-bg);\n}\n\n:host(.shell-app--gradient) .shell-app__chrome::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  background-position: 0 0;\n  background-attachment: fixed;\n  z-index: 1;\n  opacity: var(--ds-shell-gradient-opacity, 1);\n  background-image: var(--ds-shell-gradient-image, none);\n  background-size: var(--ds-shell-gradient-size, auto);\n  background-repeat: no-repeat;\n}\n\n.shell-app__panel {\n  flex: 0 0 auto;\n  min-height: 0;\n  height: 100%;\n  position: relative;\n  /* Above main so resize handle line can paint over the workspace edge */\n  z-index: 2;\n}\n\n.shell-app__panel ::slotted(ds-panel-nav) {\n  display: block;\n  height: 100%;\n}\n\n.shell-app__main {\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: 0;\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  grid-template-rows: auto minmax(0, 1fr);\n  grid-template-areas:\n    'bar tools'\n    'content tools';\n  position: relative;\n  z-index: 1;\n}\n\n.shell-app__mobile-sheet-nav,\n.shell-app__mobile-bar-nav {\n  display: none;\n}\n\n.shell-app__bar {\n  grid-area: bar;\n  flex: 0 0 auto;\n  min-width: 0;\n}\n\n.shell-app__bar ::slotted(ds-bar-nav) {\n  display: block;\n}\n\n.shell-app__content {\n  grid-area: content;\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: 0;\n  overflow: auto;\n  overscroll-behavior: none;\n  /* Limit reflow to the page column — not on __main (breaks tools flex shrink). */\n  contain: layout;\n}\n\n/* Opaque page surface — masks the fixed chrome layer in the content column. */\n.shell-app__content {\n  position: relative;\n  z-index: 1;\n  background-color: var(--color-background-primary);\n}\n\n.shell-app__tools {\n  grid-area: tools;\n  flex: 0 0 auto;\n  min-width: 0;\n  min-height: 0;\n  height: 100%;\n  display: flex;\n  position: relative;\n  z-index: 0;\n  overflow: hidden;\n}\n\n.shell-app__tools ::slotted(ds-panel-tools) {\n  display: block;\n  height: 100%;\n  min-height: 0;\n}\n\n.shell-app__tools ::slotted(ds-shell-tools) {\n  display: block;\n  height: 100%;\n  min-height: 0;\n}\n\n:host(.shell-app--tools-fullscreen) .shell-app__panel,\n:host(.shell-app--tools-fullscreen) .shell-app__bar,\n:host(.shell-app--tools-fullscreen) .shell-app__content {\n  visibility: hidden;\n}\n\n:host(.shell-app--mobile) {\n  --_shell-chrome-bg: var(--color-background-primary);\n}\n\n:host(.shell-app--mobile) .shell-app__chrome,\n:host(.shell-app--mobile) .shell-app__panel,\n:host(.shell-app--mobile) .shell-app__bar {\n  display: none;\n}\n\n:host(.shell-app--mobile) .shell-app__main {\n  width: 100%;\n  padding-block-start: env(safe-area-inset-top);\n  box-sizing: border-box;\n  grid-template-columns: minmax(0, 1fr);\n  grid-template-rows: minmax(0, 1fr) auto;\n  grid-template-areas:\n    'stage'\n    'mobile-bar-nav';\n  background: var(--color-background-primary);\n}\n\n:host(.shell-app--mobile) .shell-app__content,\n:host(.shell-app--mobile) .shell-app__tools,\n:host(.shell-app--mobile) .shell-app__mobile-sheet-nav {\n  grid-area: stage;\n  min-width: 0;\n  min-height: 0;\n  height: 100%;\n  position: relative;\n}\n\n:host(.shell-app--mobile) .shell-app__content {\n  z-index: 1;\n  overflow: auto;\n}\n\n:host(.shell-app--mobile) .shell-app__tools {\n  z-index: 2;\n  width: 100%;\n  overflow: hidden;\n  background: var(--color-background-primary);\n}\n\n:host(.shell-app--mobile) .shell-app__mobile-sheet-nav {\n  display: block;\n  z-index: 3;\n  overflow: hidden;\n  background: var(--color-background-primary);\n}\n\n:host(.shell-app--mobile) .shell-app__mobile-bar-nav {\n  grid-area: mobile-bar-nav;\n  display: block;\n  min-width: 0;\n  position: relative;\n  z-index: 4;\n}\n\n:host(.shell-app--mobile) .shell-app__tools[hidden],\n:host(.shell-app--mobile) .shell-app__mobile-sheet-nav[hidden],\n:host(.shell-app--mobile) .shell-app__mobile-bar-nav[hidden] {\n  display: none;\n}\n\n:host(.shell-app--mobile-tool-active) .shell-app__content,\n:host(.shell-app--mobile-sheet-nav-open) .shell-app__content,\n:host(.shell-app--mobile-sheet-nav-open) .shell-app__tools {\n  visibility: hidden;\n}\n","import {\n  Component,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  State,\n  Watch,\n  Listen,\n  h,\n  Host,\n} from '@stencil/core';\nimport type { NavChromeStyle } from '../../shell/nav-chrome';\nimport {\n  isEditableShortcutTarget,\n  resolveShellShortcut,\n} from '../../shell/shell-shortcuts';\nimport type { PanelToolsToolId } from '../PanelTools/panel-tools-types';\nimport {\n  DEFAULT_SHELL_GRADIENT_PRESET,\n  normalizeShellGradientPreset,\n  type ShellGradientPreset,\n} from '../../shell/shell-gradient-presets';\nimport {\n  CHROME_TRANSITION_END,\n  CHROME_TRANSITION_START,\n  ChromeTransitionDepth,\n  createRafCoalescer,\n  readChromeTransitionSource,\n} from '../../shell/chrome-transition';\nimport {\n  isPanelNavCollapsed,\n  panelWidthPxFromTokens,\n  readPanelNavWidthTokens,\n  type PanelNavWidthTokens,\n} from '../../shell/shell-chrome-metrics';\nimport {\n  SHELL_GRADIENT_IMAGE_VAR,\n  SHELL_GRADIENT_OPACITY_VAR,\n  SHELL_GRADIENT_POSITION_BAR_VAR,\n  SHELL_GRADIENT_POSITION_PANEL_VAR,\n  SHELL_GRADIENT_SIZE_VAR,\n  buildShellRadialGradient,\n  readShellViewportDimensions,\n  shellGradientPositionBar,\n  shellGradientPositionPanel,\n  shellGradientPresetOpacity,\n  shellGradientSize,\n} from '../../shell/shell-gradient';\nimport {\n  resolveShellResponsiveMode,\n  type MobileDestination,\n  type ShellResponsiveMode,\n} from '../../shell/shell-responsive';\n\n@Component({\n  tag: 'ds-shell-app',\n  styleUrl: 'ShellApp.css',\n  scoped: true,\n})\nexport class ShellApp {\n  /** Chrome style propagated to slotted `ds-panel-nav` and `ds-bar-nav`. */\n  @Prop({ attribute: 'nav-style', reflect: true }) navStyle: NavChromeStyle = 'dashboard';\n\n  /**\n   * Shell chrome wash preset. `none` renders solid chrome; the remaining\n   * presets use token-based washes that adapt to the active color theme.\n   */\n  @Prop({ attribute: 'gradient-preset', reflect: true }) gradientPreset: ShellGradientPreset =\n    DEFAULT_SHELL_GRADIENT_PRESET;\n\n  /** When `true` (default), registers global shell keyboard shortcuts. `[` toggles panel nav; `]` closes tools; K, A, S, M, N, and / toggle tool drawers. Modifiers are ignored so browser chords like ⌘N stay native. */\n  @Prop({ attribute: 'shortcuts-enabled' }) shortcutsEnabled: boolean = true;\n\n  /** Controlled mobile surface shown above the persistent bottom bar. */\n  @Prop({ attribute: 'mobile-destination' })\n  mobileDestination: MobileDestination = 'area';\n\n  /** Controlled full-stage Mobile Sheet Nav state. */\n  @Prop({ attribute: 'mobile-sheet-nav-open' })\n  mobileSheetNavOpen: boolean = false;\n\n  /** Emitted after crossing the fixed 768px or 1200px shell boundaries. */\n  @Event() dsResponsiveModeChange!: EventEmitter<{ mode: ShellResponsiveMode }>;\n\n  @Element() el!: HTMLElement;\n  @State() private toolsFullscreen = false;\n  @State() private resolvedMode: ShellResponsiveMode = 'desktop';\n\n  private resizeObserver: ResizeObserver | null = null;\n  private hasLoaded = false;\n  private readonly panelNavTransition = new ChromeTransitionDepth();\n  private readonly chromeSyncCoalescer = createRafCoalescer(() => this.syncChrome());\n  private panelWidthTokens: PanelNavWidthTokens = { expandedPx: 0, collapsedPx: 0 };\n  private cachedViewportWidth = 0;\n  private cachedViewportHeight = 0;\n  private onWindowResize = () => {\n    this.updateResponsiveMode();\n    if (this.panelNavTransition.isActive) return;\n    this.scheduleChromeSync();\n  };\n  private onVisualViewportChange = () => {\n    if (this.panelNavTransition.isActive) return;\n    this.scheduleChromeSync();\n  };\n\n  componentWillLoad() {\n    if (typeof window !== 'undefined') {\n      this.resolvedMode = resolveShellResponsiveMode(window.innerWidth);\n    }\n  }\n\n  componentDidLoad() {\n    this.hasLoaded = true;\n    this.syncSlottedNavStyle();\n    this.syncSlottedMobileState();\n    this.connectMetricsObserver();\n    this.connectViewportListeners();\n    this.el.addEventListener(CHROME_TRANSITION_START, this.onChromeTransitionStart);\n    this.el.addEventListener(CHROME_TRANSITION_END, this.onChromeTransitionEnd);\n    requestAnimationFrame(() => {\n      this.cachePanelWidthTokens();\n      this.scheduleChromeSync();\n    });\n    const tools = this.el.querySelector('ds-shell-tools, ds-panel-tools');\n    this.toolsFullscreen = tools?.getAttribute('presentation') === 'fullscreen';\n  }\n\n  @Listen('dsPresentationChange')\n  handleToolsPresentation(event: CustomEvent<{ presentation?: string }>) {\n    this.toolsFullscreen = event.detail?.presentation === 'fullscreen';\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = null;\n    this.disconnectViewportListeners();\n    this.chromeSyncCoalescer.cancel();\n    this.el.removeEventListener(CHROME_TRANSITION_START, this.onChromeTransitionStart);\n    this.el.removeEventListener(CHROME_TRANSITION_END, this.onChromeTransitionEnd);\n  }\n\n  @Watch('navStyle')\n  @Watch('gradientPreset')\n  onShellPropsChange() {\n    this.syncSlottedNavStyle();\n    this.scheduleChromeSync();\n  }\n\n  @Watch('mobileDestination')\n  @Watch('mobileSheetNavOpen')\n  onMobileStateChange(_next: unknown, previous: unknown) {\n    this.syncSlottedMobileState();\n    if (\n      previous === true &&\n      !this.mobileSheetNavOpen &&\n      this.resolvedMode === 'mobile'\n    ) {\n      requestAnimationFrame(() => {\n        const bar = this.el.querySelector('ds-mobile-bar-nav') as\n          | (HTMLElement & {\n              focusDestination?: (\n                destination: MobileDestination | 'sheet-nav'\n              ) => Promise<void>;\n            })\n          | null;\n        const activeElement = document.activeElement;\n        if (activeElement instanceof HTMLElement && bar?.contains(activeElement)) return;\n        void bar?.focusDestination?.('sheet-nav');\n      });\n    }\n  }\n\n  private updateResponsiveMode() {\n    if (typeof window === 'undefined') return;\n    const next = resolveShellResponsiveMode(window.innerWidth);\n    if (next === this.resolvedMode) return;\n    this.resolvedMode = next;\n    this.syncSlottedMobileState();\n    this.scheduleChromeSync();\n    if (this.hasLoaded) this.dsResponsiveModeChange.emit({ mode: next });\n  }\n\n  private onChromeTransitionStart = (event: Event) => {\n    if (readChromeTransitionSource(event) !== 'panel-nav') return;\n\n    this.panelNavTransition.enter();\n    const viewport = readShellViewportDimensions();\n    this.cachedViewportWidth = viewport.width;\n    this.cachedViewportHeight = viewport.height;\n    this.syncChrome();\n  };\n\n  private onChromeTransitionEnd = (event: Event) => {\n    if (readChromeTransitionSource(event) !== 'panel-nav') return;\n\n    this.panelNavTransition.exit();\n    if (!this.panelNavTransition.isActive) {\n      this.scheduleChromeSync();\n    }\n  };\n\n  /** Coalesce ResizeObserver bursts to one layout read per frame. */\n  private scheduleChromeSync() {\n    this.chromeSyncCoalescer.schedule();\n  }\n\n  private syncSlottedNavStyle() {\n    const panel = this.el.querySelector('ds-panel-nav') as (HTMLElement & { navStyle: NavChromeStyle }) | null;\n    const bar = this.el.querySelector('ds-bar-nav') as (HTMLElement & { navStyle: NavChromeStyle }) | null;\n    if (panel) {\n      panel.setAttribute('nav-style', this.navStyle);\n      panel.navStyle = this.navStyle;\n    }\n    if (bar) {\n      bar.setAttribute('nav-style', this.navStyle);\n      bar.navStyle = this.navStyle;\n    }\n  }\n\n  private syncSlottedMobileState() {\n    const tools = this.el.querySelector('ds-shell-tools') as\n      | (HTMLElement & { responsiveMode: ShellResponsiveMode })\n      | null;\n    const bar = this.el.querySelector('ds-mobile-bar-nav') as\n      | (HTMLElement & {\n          activeDestination: MobileDestination;\n          sheetNavExpanded: boolean;\n        })\n      | null;\n    const sheetNav = this.el.querySelector('ds-mobile-sheet-nav') as\n      | (HTMLElement & { open: boolean })\n      | null;\n\n    if (tools) {\n      tools.setAttribute('responsive-mode', this.resolvedMode);\n      tools.responsiveMode = this.resolvedMode;\n    }\n    if (bar) {\n      bar.activeDestination = this.mobileDestination;\n      bar.sheetNavExpanded = this.mobileSheetNavOpen;\n    }\n    if (sheetNav) {\n      sheetNav.open = this.mobileSheetNavOpen;\n    }\n  }\n\n  private connectMetricsObserver() {\n    this.resizeObserver = new ResizeObserver(() => {\n      if (this.panelNavTransition.isActive) return;\n      this.scheduleChromeSync();\n    });\n    this.resizeObserver.observe(this.el);\n    const panelWrap = this.el.querySelector('.shell-app__panel');\n    if (panelWrap) this.resizeObserver.observe(panelWrap);\n  }\n\n  private connectViewportListeners() {\n    if (typeof window === 'undefined') return;\n\n    window.addEventListener('resize', this.onWindowResize, { passive: true });\n\n    const visual = window.visualViewport;\n    if (visual) {\n      visual.addEventListener('resize', this.onVisualViewportChange, { passive: true });\n      visual.addEventListener('scroll', this.onVisualViewportChange, { passive: true });\n    }\n  }\n\n  private disconnectViewportListeners() {\n    if (typeof window === 'undefined') return;\n\n    window.removeEventListener('resize', this.onWindowResize);\n\n    const visual = window.visualViewport;\n    if (visual) {\n      visual.removeEventListener('resize', this.onVisualViewportChange);\n      visual.removeEventListener('scroll', this.onVisualViewportChange);\n    }\n  }\n\n  private cachePanelWidthTokens() {\n    const navRoot = this.el.querySelector('ds-panel-nav .panel-nav') as HTMLElement | null;\n    if (!navRoot) return;\n    this.panelWidthTokens = readPanelNavWidthTokens(navRoot);\n  }\n\n  private applyGradientVars(target: HTMLElement, vars: Record<string, string | null>) {\n    const style = target.style;\n    for (const [name, value] of Object.entries(vars)) {\n      if (value === null) style.removeProperty(name);\n      else style.setProperty(name, value);\n    }\n  }\n\n  private clearGradientPaintVars(targets: HTMLElement[]) {\n    const keys = [\n      SHELL_GRADIENT_IMAGE_VAR,\n      SHELL_GRADIENT_SIZE_VAR,\n      SHELL_GRADIENT_OPACITY_VAR,\n    ];\n    for (const target of targets) {\n      for (const key of keys) target.style.removeProperty(key);\n    }\n  }\n\n  /** Panel/bar wash offsets for scroll fades and badge rings. */\n  private syncChromeLayoutVars(\n    panel: HTMLElement | null,\n    bar: HTMLElement | null,\n    panelPosition: string,\n    barPosition: string,\n  ) {\n    if (panel) {\n      panel.style.setProperty(SHELL_GRADIENT_POSITION_PANEL_VAR, panelPosition);\n    }\n    if (bar) {\n      bar.style.setProperty(SHELL_GRADIENT_POSITION_BAR_VAR, barPosition);\n    }\n  }\n\n  private resolvePanelWidthPx(panelNav: HTMLElement | null): number {\n    const navRoot = panelNav?.querySelector('.panel-nav') as HTMLElement | null;\n\n    if (this.panelNavTransition.isActive && this.panelWidthTokens.expandedPx > 0) {\n      const collapsed = isPanelNavCollapsed(panelNav, navRoot);\n      return panelWidthPxFromTokens(this.panelWidthTokens, collapsed);\n    }\n\n    const panelWrap = this.el.querySelector('.shell-app__panel') as HTMLElement | null;\n    const measured = panelWrap?.getBoundingClientRect().width ?? 0;\n    if (measured > 0) return measured;\n\n    if (this.panelWidthTokens.expandedPx > 0) {\n      const collapsed = isPanelNavCollapsed(panelNav, navRoot);\n      return panelWidthPxFromTokens(this.panelWidthTokens, collapsed);\n    }\n\n    return 0;\n  }\n\n  /** Fixed-attachment wash/grid size — always the viewport, never the shell element box. */\n  private resolveViewportDimensions(): { width: number; height: number } {\n    if (this.panelNavTransition.isActive && this.cachedViewportWidth > 0) {\n      return {\n        width: this.cachedViewportWidth,\n        height: this.cachedViewportHeight,\n      };\n    }\n\n    return readShellViewportDimensions();\n  }\n\n  private chromeLayerActive(): boolean {\n    return (\n      this.resolvedMode !== 'mobile' &&\n      normalizeShellGradientPreset(this.gradientPreset) !== 'none'\n    );\n  }\n\n  @Listen('keydown', { target: 'window', capture: true })\n  handleWindowKeyDown(e: KeyboardEvent) {\n    if (!this.shortcutsEnabled) return;\n    if (isEditableShortcutTarget(e.target)) return;\n\n    const action = resolveShellShortcut(e);\n    if (!action) return;\n\n    e.preventDefault();\n\n    const panel = this.el.querySelector('ds-panel-nav') as HTMLDsPanelNavElement | null;\n    const tools = this.el.querySelector('ds-shell-tools, ds-panel-tools') as\n      | (HTMLElement & {\n          closeDrawer?: () => Promise<void>;\n          activateTool?: (id: PanelToolsToolId) => Promise<void>;\n        })\n      | null;\n\n    if (action === 'toggle-panel-nav') {\n      void panel?.toggleCollapsed();\n      return;\n    }\n\n    if (action === 'close-panel-tools') {\n      void tools?.closeDrawer?.();\n      return;\n    }\n\n    if (action.startsWith('open-tool:') && tools) {\n      const toolId = action.slice('open-tool:'.length) as PanelToolsToolId;\n      void tools.activateTool?.(toolId);\n    }\n  }\n\n  private syncChrome() {\n    const panelNav = this.el.querySelector('ds-panel-nav') as HTMLElement | null;\n    const bar = this.el.querySelector('ds-bar-nav') as HTMLElement | null;\n    const targets = [this.el, panelNav, bar].filter((el): el is HTMLElement => el !== null);\n\n    const clearLayoutVars = () => {\n      if (panelNav) panelNav.style.removeProperty(SHELL_GRADIENT_POSITION_PANEL_VAR);\n      if (bar) bar.style.removeProperty(SHELL_GRADIENT_POSITION_BAR_VAR);\n    };\n\n    const preset = normalizeShellGradientPreset(this.gradientPreset);\n    if (preset === 'none' || this.resolvedMode === 'mobile') {\n      this.clearGradientPaintVars(targets);\n      clearLayoutVars();\n      return;\n    }\n\n    const viewport = this.resolveViewportDimensions();\n    const panelWidth = this.resolvePanelWidthPx(panelNav);\n\n    const panelPosition = shellGradientPositionPanel();\n    const barPosition = shellGradientPositionBar(panelWidth);\n\n    this.syncChromeLayoutVars(panelNav, bar, panelPosition, barPosition);\n\n    const image = buildShellRadialGradient(preset);\n\n    const size = shellGradientSize({\n      width: viewport.width,\n      height: viewport.height,\n    });\n    const opacity = shellGradientPresetOpacity(preset);\n\n    for (const target of targets) {\n      if (target === this.el) {\n        this.applyGradientVars(target, {\n          [SHELL_GRADIENT_IMAGE_VAR]: image,\n          [SHELL_GRADIENT_SIZE_VAR]: size,\n          [SHELL_GRADIENT_POSITION_PANEL_VAR]: panelPosition,\n          [SHELL_GRADIENT_POSITION_BAR_VAR]: barPosition,\n          [SHELL_GRADIENT_OPACITY_VAR]: opacity,\n        });\n        continue;\n      }\n\n      const isBar = target.tagName.toLowerCase() === 'ds-bar-nav';\n      this.applyGradientVars(target, {\n        [SHELL_GRADIENT_IMAGE_VAR]: image,\n        [SHELL_GRADIENT_SIZE_VAR]: size,\n        [SHELL_GRADIENT_OPACITY_VAR]: opacity,\n        [SHELL_GRADIENT_POSITION_PANEL_VAR]: isBar ? null : panelPosition,\n        [SHELL_GRADIENT_POSITION_BAR_VAR]: isBar ? barPosition : null,\n      });\n    }\n  }\n\n  render() {\n    const chromeActive = this.chromeLayerActive();\n    const mobile = this.resolvedMode === 'mobile';\n    const mobileToolActive = mobile && this.mobileDestination !== 'area';\n    const mobileStageBlocked = mobile && (mobileToolActive || this.mobileSheetNavOpen);\n    const fullscreen = !mobile && this.toolsFullscreen;\n    const shellCls: Record<string, boolean> = {\n      'shell-app': true,\n      'shell-app--gradient': chromeActive,\n      [`shell-app--${this.navStyle}`]: true,\n      [`shell-app--${this.resolvedMode}`]: true,\n      'shell-app--tools-fullscreen': fullscreen,\n      'shell-app--mobile-tool-active': mobileToolActive,\n      'shell-app--mobile-sheet-nav-open': mobile && this.mobileSheetNavOpen,\n    };\n\n    return (\n      <Host class={shellCls} responsive-mode={this.resolvedMode}>\n        <div class=\"shell-app__row\">\n          <div class=\"shell-app__chrome\" aria-hidden=\"true\" />\n          <div class=\"shell-app__panel\" aria-hidden={fullscreen ? 'true' : undefined} inert={fullscreen ? true : undefined}>\n            <slot name=\"panel\" />\n          </div>\n          <div class=\"shell-app__main\">\n            <div class=\"shell-app__bar\" aria-hidden={fullscreen ? 'true' : undefined} inert={fullscreen ? true : undefined}>\n              <slot name=\"bar\" />\n            </div>\n            <div\n              class=\"shell-app__tools\"\n              aria-hidden={mobile && (!mobileToolActive || this.mobileSheetNavOpen) ? 'true' : undefined}\n              inert={mobile && (!mobileToolActive || this.mobileSheetNavOpen) ? true : undefined}\n              hidden={mobile && !mobileToolActive}\n            >\n              <slot name=\"tools\" />\n            </div>\n            <div\n              class=\"shell-app__content\"\n              aria-hidden={fullscreen || mobileStageBlocked ? 'true' : undefined}\n              inert={fullscreen || mobileStageBlocked ? true : undefined}\n            >\n              <slot />\n            </div>\n            <div\n              class=\"shell-app__mobile-sheet-nav\"\n              hidden={!mobile || !this.mobileSheetNavOpen}\n              aria-hidden={mobile && this.mobileSheetNavOpen ? undefined : 'true'}\n              inert={mobile && this.mobileSheetNavOpen ? undefined : true}\n            >\n              <slot name=\"mobile-sheet-nav\" />\n            </div>\n            <div class=\"shell-app__mobile-bar-nav\" hidden={!mobile}>\n              <slot name=\"mobile-bar-nav\" />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/ds-shell-gradient-picker.js

@@ -1,2 +1,2 @@
-import{p as s,H as e,c as t,h as i,a as c,t as r}from"./index.js";import{D as a,n,s as o}from"./p-D1HFMTdC.js";import{d as h}from"./p-DwX7UmLl.js";const l=()=>`.sc-ds-shell-gradient-picker-h{display:block;width:100%}`;const d=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsChange=t(this,"dsChange");this.value=a;this.groupLabel="Shell gradient theme";this.handleChange=s=>{const e=n(s);if(e===n(this.value))return;this.value=e;this.dsChange.emit(e)}}render(){return i(c,{key:"093f794778f9d2fef9f251ea78d3087f6b96c773"},i("ds-swatch-picker",{key:"83183c2efcc4458f47c0e982283b28ed30e9553e",value:n(this.value),groupLabel:this.groupLabel,sections:o(),onDsChange:s=>{s.stopPropagation();this.handleChange(s.detail)}}))}static get style(){return l()}},[2,"ds-shell-gradient-picker",{value:[1537],groupLabel:[1,"group-label"]}]);function f(){if(typeof customElements==="undefined"){return}const s=["ds-shell-gradient-picker","ds-swatch-picker"];s.forEach((s=>{switch(s){case"ds-shell-gradient-picker":if(!customElements.get(r(s))){customElements.define(r(s),d)}break;case"ds-swatch-picker":if(!customElements.get(r(s))){h()}break}}))}f();const p=d;const u=f;export{p as DsShellGradientPicker,u as defineCustomElement};
+import{p as s,H as e,c as t,h as i,a as r,t as c}from"./index.js";import{D as a,n,s as d}from"./p-D1HFMTdC.js";import{d as o}from"./p-Utr23NC-.js";const h=()=>`.sc-ds-shell-gradient-picker-h{display:block;width:100%}`;const l=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsChange=t(this,"dsChange");this.value=a;this.groupLabel="Shell gradient theme";this.handleChange=s=>{const e=n(s);if(e===n(this.value))return;this.value=e;this.dsChange.emit(e)}}render(){return i(r,{key:"9bf287642e25d9f262a1766b271ed55f0f6c8e82"},i("ds-swatch-picker",{key:"b1c045d3c3003326987008c4e63067dde213c4f7",value:n(this.value),groupLabel:this.groupLabel,sections:d(),onDsChange:s=>{s.stopPropagation();this.handleChange(s.detail)}}))}static get style(){return h()}},[2,"ds-shell-gradient-picker",{value:[1537],groupLabel:[1,"group-label"]}]);function p(){if(typeof customElements==="undefined"){return}const s=["ds-shell-gradient-picker","ds-swatch-picker"];s.forEach((s=>{switch(s){case"ds-shell-gradient-picker":if(!customElements.get(c(s))){customElements.define(c(s),l)}break;case"ds-swatch-picker":if(!customElements.get(c(s))){o()}break}}))}p();const f=l;const u=p;export{f as DsShellGradientPicker,u as defineCustomElement};
 //# sourceMappingURL=ds-shell-gradient-picker.js.map

package/dist/components/ds-shell-gradient-swatch.js

@@ -1,2 +1,2 @@
-import{p as s,H as e,c as t,h as a,a as i,t as n}from"./index.js";import{D as r,S as c,a as l,b as d}from"./p-D1HFMTdC.js";const o=()=>`.sc-ds-shell-gradient-swatch-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-shell-gradient-swatch-h,.ds-focus-ring.sc-ds-shell-gradient-swatch,.ds-focus-ring-inset.sc-ds-shell-gradient-swatch-h,.ds-focus-ring-inset.sc-ds-shell-gradient-swatch{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-shell-gradient-swatch-h:focus-visible,.ds-focus-ring.sc-ds-shell-gradient-swatch:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-shell-gradient-swatch-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-shell-gradient-swatch{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-shell-gradient-swatch-h:focus-visible,.ds-focus-ring-inset.sc-ds-shell-gradient-swatch:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-shell-gradient-swatch-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-shell-gradient-swatch:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-shell-gradient-swatch-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-shell-gradient-swatch{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-shell-gradient-swatch-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-shell-gradient-swatch::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-control-inactive.sc-ds-shell-gradient-swatch-h,.ds-control-inactive.sc-ds-shell-gradient-swatch{opacity:0.5;pointer-events:none;cursor:not-allowed}.sc-ds-shell-gradient-swatch-h{box-sizing:border-box;display:inline-flex;flex:0 0 auto;width:var(--dimension-size-300);height:var(--dimension-size-300);--_swatch-inner-inset:calc(     var(--dimension-stroke-width-025) + var(--dimension-space-025)   );--_swatch-ring-bg:var(--color-background-primary);--_swatch-select-motion:var(--effect-motion-short-3)}.shell-gradient-swatch.sc-ds-shell-gradient-swatch{position:relative;box-sizing:border-box;width:var(--dimension-size-300);height:var(--dimension-size-300);padding:0;border:none;border-radius:var(--dimension-radius-half);background:transparent;cursor:default;flex-shrink:0;isolation:isolate}.shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__border.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__halo.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__stroke.sc-ds-shell-gradient-swatch{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;pointer-events:none}.shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch{z-index:1;background-color:var(--color-background-secondary);background-image:var(--_swatch-gradient-image);background-repeat:no-repeat;background-size:cover;background-position:0 0;transition:top var(--_swatch-select-motion),     right var(--_swatch-select-motion),     bottom var(--_swatch-select-motion),     left var(--_swatch-select-motion)}.shell-gradient-swatch--none.sc-ds-shell-gradient-swatch .shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch{background-image:none}.shell-gradient-swatch.sc-ds-shell-gradient-swatch:not(.shell-gradient-swatch--none) .shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch{opacity:var(--ds-shell-gradient-opacity, 0.1)}.shell-gradient-swatch__border.sc-ds-shell-gradient-swatch{z-index:2;box-shadow:inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-secondary);transition:top var(--_swatch-select-motion),     right var(--_swatch-select-motion),     bottom var(--_swatch-select-motion),     left var(--_swatch-select-motion)}.shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch{z-index:3;background:transparent;transition:top var(--_swatch-select-motion),     right var(--_swatch-select-motion),     bottom var(--_swatch-select-motion),     left var(--_swatch-select-motion),     background-color 0s}.shell-gradient-swatch.sc-ds-shell-gradient-swatch:hover:not(:disabled) .shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch{background:var(--color-interaction-hover)}.shell-gradient-swatch.sc-ds-shell-gradient-swatch:active:not(:disabled) .shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch{background:var(--color-interaction-pressed)}.shell-gradient-swatch__halo.sc-ds-shell-gradient-swatch{z-index:4;opacity:0;transform:scale(1.2);transform-origin:center;box-shadow:inset 0 0 0 var(--_swatch-inner-inset) var(--_swatch-ring-bg);transition:opacity var(--_swatch-select-motion),     transform var(--_swatch-select-motion)}.shell-gradient-swatch__stroke.sc-ds-shell-gradient-swatch{z-index:5;opacity:0;transform:scale(1.2);transform-origin:center;box-shadow:inset 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand);transition:opacity var(--_swatch-select-motion),     transform var(--_swatch-select-motion)}.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch,.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__border.sc-ds-shell-gradient-swatch,.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch{top:var(--_swatch-inner-inset);right:var(--_swatch-inner-inset);bottom:var(--_swatch-inner-inset);left:var(--_swatch-inner-inset)}.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__halo.sc-ds-shell-gradient-swatch,.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__stroke.sc-ds-shell-gradient-swatch{opacity:1;transform:scale(1)}@media (prefers-reduced-motion: reduce){.shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__border.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__halo.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__stroke.sc-ds-shell-gradient-swatch{transition:none}}`;const h=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsSelect=t(this,"dsSelect");this.preset=r;this.selected=false;this.isInactive=false;this.ariaLabel=null;this.handleClick=()=>{if(this.isInactive)return;this.dsSelect.emit(this.preset)}}render(){const s=this.ariaLabel??c[this.preset];return a(i,{key:"0d12ac3346e4eaadd70a35fd9e50d145666ad702"},a("button",{key:"9366f3f1e848b72ddf645b6acb6ea60ee4f534b8",type:"button",class:{"shell-gradient-swatch":true,"ds-focus-ring-inset":true,"ds-control-inactive":this.isInactive,"shell-gradient-swatch--selected":this.selected,"shell-gradient-swatch--none":this.preset==="none"},style:this.preset==="none"?undefined:{"--_swatch-gradient-image":d(this.preset),"--ds-shell-gradient-opacity":l(this.preset)},"aria-label":s,role:"radio","aria-checked":this.selected?"true":"false",tabIndex:this.selected?0:-1,disabled:this.isInactive,onClick:this.handleClick},a("span",{key:"e3678a99856a2f515f95cbd65b8c740cf4a0a094",class:"shell-gradient-swatch__fill","aria-hidden":"true"}),a("span",{key:"be20c113c92426a6faeee2cfe5e97e6f346d610c",class:"shell-gradient-swatch__border","aria-hidden":"true"}),a("span",{key:"ecd7b26f15c98a1c3e47f0d163fdbe7c29b8ce8d",class:"shell-gradient-swatch__interaction","aria-hidden":"true"}),a("span",{key:"0a0732edcc8fa4a88bff99bf730c437c2f54d911",class:"shell-gradient-swatch__halo","aria-hidden":"true"}),a("span",{key:"d720023825c171b3f47d0db2e75a04d232eafda8",class:"shell-gradient-swatch__stroke","aria-hidden":"true"})))}static get style(){return o()}},[2,"ds-shell-gradient-swatch",{preset:[513],selected:[516],isInactive:[4,"is-inactive"],ariaLabel:[1,"aria-label"]}]);function g(){if(typeof customElements==="undefined"){return}const s=["ds-shell-gradient-swatch"];s.forEach((s=>{switch(s){case"ds-shell-gradient-swatch":if(!customElements.get(n(s))){customElements.define(n(s),h)}break}}))}g();const w=h;const f=g;export{w as DsShellGradientSwatch,f as defineCustomElement};
+import{p as s,H as e,c as t,h as a,a as i,t as n}from"./index.js";import{D as r,S as c,a as l,b as d}from"./p-D1HFMTdC.js";const o=()=>`.sc-ds-shell-gradient-swatch-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-shell-gradient-swatch-h,.ds-focus-ring.sc-ds-shell-gradient-swatch,.ds-focus-ring-inset.sc-ds-shell-gradient-swatch-h,.ds-focus-ring-inset.sc-ds-shell-gradient-swatch{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-shell-gradient-swatch-h:focus-visible,.ds-focus-ring.sc-ds-shell-gradient-swatch:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-shell-gradient-swatch-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-shell-gradient-swatch{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-shell-gradient-swatch-h:focus-visible,.ds-focus-ring-inset.sc-ds-shell-gradient-swatch:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-shell-gradient-swatch-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-shell-gradient-swatch:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-shell-gradient-swatch-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-shell-gradient-swatch{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-shell-gradient-swatch-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-shell-gradient-swatch::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-control-inactive.sc-ds-shell-gradient-swatch-h,.ds-control-inactive.sc-ds-shell-gradient-swatch{opacity:0.5;pointer-events:none;cursor:not-allowed}.sc-ds-shell-gradient-swatch-h{box-sizing:border-box;display:inline-flex;flex:0 0 auto;width:var(--dimension-size-300);height:var(--dimension-size-300);--_swatch-inner-inset:calc(     var(--dimension-stroke-width-025) + var(--dimension-space-025)   );--_swatch-ring-bg:var(--color-background-primary);--_swatch-select-motion:var(--effect-motion-short-3)}.shell-gradient-swatch.sc-ds-shell-gradient-swatch{position:relative;box-sizing:border-box;width:var(--dimension-size-300);height:var(--dimension-size-300);padding:0;border:none;border-radius:var(--dimension-radius-half);background:transparent;cursor:default;flex-shrink:0;isolation:isolate}.shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__border.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__halo.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__stroke.sc-ds-shell-gradient-swatch{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;pointer-events:none}.shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch{z-index:1;background-color:var(--color-background-secondary);background-image:var(--_swatch-gradient-image);background-repeat:no-repeat;background-size:cover;background-position:0 0;transition:top var(--_swatch-select-motion),     right var(--_swatch-select-motion),     bottom var(--_swatch-select-motion),     left var(--_swatch-select-motion)}.shell-gradient-swatch--none.sc-ds-shell-gradient-swatch .shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch{background-image:none}.shell-gradient-swatch.sc-ds-shell-gradient-swatch:not(.shell-gradient-swatch--none) .shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch{opacity:var(--ds-shell-gradient-opacity, 0.1)}.shell-gradient-swatch__border.sc-ds-shell-gradient-swatch{z-index:2;box-shadow:inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-secondary);transition:top var(--_swatch-select-motion),     right var(--_swatch-select-motion),     bottom var(--_swatch-select-motion),     left var(--_swatch-select-motion)}.shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch{z-index:3;background:transparent;transition:top var(--_swatch-select-motion),     right var(--_swatch-select-motion),     bottom var(--_swatch-select-motion),     left var(--_swatch-select-motion),     background-color 0s}.shell-gradient-swatch.sc-ds-shell-gradient-swatch:hover:not(:disabled) .shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch{background:var(--color-interaction-hover)}.shell-gradient-swatch.sc-ds-shell-gradient-swatch:active:not(:disabled) .shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch{background:var(--color-interaction-pressed)}.shell-gradient-swatch__halo.sc-ds-shell-gradient-swatch{z-index:4;opacity:0;transform:scale(1.2);transform-origin:center;box-shadow:inset 0 0 0 var(--_swatch-inner-inset) var(--_swatch-ring-bg);transition:opacity var(--_swatch-select-motion),     transform var(--_swatch-select-motion)}.shell-gradient-swatch__stroke.sc-ds-shell-gradient-swatch{z-index:5;opacity:0;transform:scale(1.2);transform-origin:center;box-shadow:inset 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand);transition:opacity var(--_swatch-select-motion),     transform var(--_swatch-select-motion)}.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch,.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__border.sc-ds-shell-gradient-swatch,.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch{top:var(--_swatch-inner-inset);right:var(--_swatch-inner-inset);bottom:var(--_swatch-inner-inset);left:var(--_swatch-inner-inset)}.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__halo.sc-ds-shell-gradient-swatch,.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__stroke.sc-ds-shell-gradient-swatch{opacity:1;transform:scale(1)}@media (prefers-reduced-motion: reduce){.shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__border.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__halo.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__stroke.sc-ds-shell-gradient-swatch{transition:none}}`;const h=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsSelect=t(this,"dsSelect");this.preset=r;this.selected=false;this.isInactive=false;this.ariaLabel=null;this.handleClick=()=>{if(this.isInactive)return;this.dsSelect.emit(this.preset)}}render(){const s=this.ariaLabel??c[this.preset];return a(i,{key:"a027ca0392b36c12469089ba34767a4e8ffde8aa"},a("button",{key:"a2362b9a0c742c2bdf4ef20bc5537e140f433c82",type:"button",class:{"shell-gradient-swatch":true,"ds-focus-ring-inset":true,"ds-control-inactive":this.isInactive,"shell-gradient-swatch--selected":this.selected,"shell-gradient-swatch--none":this.preset==="none"},style:this.preset==="none"?undefined:{"--_swatch-gradient-image":d(this.preset),"--ds-shell-gradient-opacity":l(this.preset)},"aria-label":s,role:"radio","aria-checked":this.selected?"true":"false",tabIndex:this.selected?0:-1,disabled:this.isInactive,onClick:this.handleClick},a("span",{key:"5d6708aa4ad89c5c8c50f6bdb29e5d98c9d0ed98",class:"shell-gradient-swatch__fill","aria-hidden":"true"}),a("span",{key:"6a8cf9ee19da77654b264dba87e67c1001595fce",class:"shell-gradient-swatch__border","aria-hidden":"true"}),a("span",{key:"a33f1eb871c8474060975d782b96e2b59775b185",class:"shell-gradient-swatch__interaction","aria-hidden":"true"}),a("span",{key:"68da9cda686613e53c51be5fca55bd6097ca5b4f",class:"shell-gradient-swatch__halo","aria-hidden":"true"}),a("span",{key:"aa40f0b58a51903861838e2b759659160b029e45",class:"shell-gradient-swatch__stroke","aria-hidden":"true"})))}static get style(){return o()}},[2,"ds-shell-gradient-swatch",{preset:[513],selected:[516],isInactive:[4,"is-inactive"],ariaLabel:[1,"aria-label"]}]);function g(){if(typeof customElements==="undefined"){return}const s=["ds-shell-gradient-swatch"];s.forEach((s=>{switch(s){case"ds-shell-gradient-swatch":if(!customElements.get(n(s))){customElements.define(n(s),h)}break}}))}g();const w=h;const f=g;export{w as DsShellGradientSwatch,f as defineCustomElement};
 //# sourceMappingURL=ds-shell-gradient-swatch.js.map

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

@@ -1,2 +1,2 @@
-import{p as e,H as s,h as t,a as i,t as a}from"./index.js";import{r as h}from"./p-BJMRBHKW.js";function n(e,s,t){if(e!=="auto")return e;if(s==="constrained")return"constrained";if(s==="compact"||!t)return"compact";return"expanded"}const l=()=>`.sc-ds-shell-page-h{display:block;position:relative;min-width:0;min-height:100%;box-sizing:border-box;background:var(--color-background-primary)}.shell-page__scroll-sentinel.sc-ds-shell-page{position:absolute;inset-block-start:var(--ds-shell-page-header-travel, 0);inset-inline-start:0;width:var(--dimension-stroke-width-012);height:var(--dimension-stroke-width-012);pointer-events:none}.shell-page__sticky-header.sc-ds-shell-page{position:sticky;inset-block-start:var(--ds-shell-page-sticky-offset, 0);z-index:var(--dimension-z-index-raised);min-width:0;background:var(--color-background-primary);overflow:visible;overflow-anchor:none}.shell-page__desktop-header.sc-ds-shell-page-s>ds-bar-title,.shell-page__desktop-header .sc-ds-shell-page-s>ds-bar-title,.shell-page__desktop-header.sc-ds-shell-page-s>ds-bar-workflow,.shell-page__desktop-header .sc-ds-shell-page-s>ds-bar-workflow,.shell-page__mobile-header.sc-ds-shell-page-s>ds-mobile-header,.shell-page__mobile-header .sc-ds-shell-page-s>ds-mobile-header{display:block;min-width:0}.shell-page__desktop-header[hidden].sc-ds-shell-page,.shell-page__mobile-header[hidden].sc-ds-shell-page{display:none}.shell-page-host--mobile.sc-ds-shell-page-h .shell-page__scroll-sentinel.sc-ds-shell-page,.shell-page-host--mobile.sc-ds-shell-page-h .shell-page__flow-spacer.sc-ds-shell-page{display:none}.shell-page__flow-spacer.sc-ds-shell-page{height:var(--ds-shell-page-flow-spacer, 0);background:var(--color-background-primary)}.shell-page__content.sc-ds-shell-page{min-width:0;box-sizing:border-box;background:var(--color-background-primary)}.shell-page-host--inset-default.sc-ds-shell-page-h .shell-page__content.sc-ds-shell-page{padding:var(--dimension-space-400) var(--dimension-space-400) var(--dimension-space-800)}.shell-page-host--inset-none.sc-ds-shell-page-h .shell-page__content.sc-ds-shell-page{padding:0}`;const r=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.headerPresentation="auto";this.contentInset="default";this.responsiveMode="desktop";this.pageTopVisible=true;this.sentinelEl=null;this.spacerEl=null;this.stickyHeaderEl=null;this.headerEl=null;this.expandedHeaderHeight=0;this.headerTravel=0;this.expandedGeometryFrozen=false;this.headerResizeObserver=null;this.headerMutationObserver=null;this.headerRevealFrame=null;this.headerGeometryFrame=null;this.scrollRoot=null;this.handleScroll=()=>{if(!this.sentinelEl||!this.scrollRoot)return;const e=this.scrollRoot===window?0:this.scrollRoot.getBoundingClientRect().top;const s=this.sentinelEl.getBoundingClientRect().top>=e;if(!s&&this.pageTopVisible&&this.headerEl?.classList.contains(this.variantClass("expanded"))){this.captureExpandedHeaderGeometry(this.headerEl);this.expandedGeometryFrozen=true}if(s&&this.expandedGeometryFrozen&&this.el.getBoundingClientRect().top>=e){this.expandedGeometryFrozen=false;if(this.headerEl?.classList.contains(this.variantClass("expanded"))){this.captureExpandedHeaderGeometry(this.headerEl)}}this.pageTopVisible=s};this.handleHeaderSlotChange=e=>{if(this.responsiveMode==="mobile")return;const s=e.target;const t=s.assignedElements().find((e=>e.tagName.toLowerCase()==="ds-bar-title"));this.observeHeader(t??null)}}handleHeaderContractChange(){this.syncHeaderVariant(true)}handleResponsiveModeChange(){this.observeHeader(this.responsiveMode==="mobile"?null:this.findHeader())}componentDidLoad(){this.observeHeader(this.responsiveMode==="mobile"?null:this.findHeader());this.connectScrollRoot()}componentDidRender(){this.syncHeaderVariant()}disconnectedCallback(){this.headerResizeObserver?.disconnect();this.headerResizeObserver=null;this.headerMutationObserver?.disconnect();this.headerMutationObserver=null;this.cancelHeaderReveal();this.cancelHeaderGeometrySync();this.scrollRoot?.removeEventListener("scroll",this.handleScroll);this.scrollRoot=null}get effectiveVariant(){return n(this.headerPresentation,this.headerCapacity??"roomy",this.pageTopVisible)}get headerContractResolved(){return this.headerPresentation!=="auto"||this.headerCapacity!==undefined}get isScrollCompacted(){return this.headerPresentation==="auto"&&this.headerCapacity==="roomy"&&!this.pageTopVisible}composedParent(e){return e.assignedSlot?.parentElement??e.parentElement}findScrollRoot(){let e=this.composedParent(this.el);while(e&&e!==document.documentElement){const s=getComputedStyle(e).overflowY;if(s==="auto"||s==="scroll"||s==="overlay"){return e}e=this.composedParent(e)}return window}connectScrollRoot(){const e=this.findScrollRoot();if(e===this.scrollRoot)return;this.scrollRoot?.removeEventListener("scroll",this.handleScroll);this.scrollRoot=e;this.scrollRoot.addEventListener("scroll",this.handleScroll,{passive:true});this.handleScroll()}findHeader(){return this.el.querySelector("ds-bar-title")}get compactHeaderHeight(){return h("--dimension-size-600",0)}setHeaderTravel(e){const s=Math.max(0,e);if(Math.abs(s-this.headerTravel)<.5)return;this.headerTravel=s;this.el.style.setProperty("--ds-shell-page-header-travel",`${s}px`);this.handleScroll()}measureHeaderTravel(e){const s=e.querySelector("[data-shell-page-header-anchor]");const t=this.compactHeaderHeight;if(!s||t<=0)return;const i=e.getBoundingClientRect();const a=s.getBoundingClientRect();if(i.height<=0||a.height<=0)return;const h=a.top-i.top;const n=Math.max(0,(t-a.height)/2);this.setHeaderTravel(h-n)}captureExpandedHeaderGeometry(e){this.expandedHeaderHeight=e.getBoundingClientRect().height;this.measureHeaderTravel(e)}setSpacerHeight(e){if(!this.spacerEl)return;this.spacerEl.style.setProperty("--ds-shell-page-flow-spacer",`${Math.max(0,e)}px`)}variantClass(e){return`bar-title-host--${e}`}setStickyHeaderOffset(e){this.stickyHeaderEl?.style.setProperty("--ds-shell-page-sticky-offset",e==="expanded"&&this.headerPresentation==="auto"&&this.headerCapacity==="roomy"?`${-this.headerTravel}px`:"0px")}syncRenderedHeaderGeometry(e){const s=this.effectiveVariant;if(!e.classList.contains(this.variantClass(s)))return;this.setSpacerHeight(this.isScrollCompacted?this.expandedHeaderHeight-this.compactHeaderHeight:0);this.setStickyHeaderOffset(s);if(s==="expanded"&&!this.expandedGeometryFrozen){this.captureExpandedHeaderGeometry(e);this.setStickyHeaderOffset(s)}}cancelHeaderGeometrySync(){if(this.headerGeometryFrame!==null)cancelAnimationFrame(this.headerGeometryFrame);this.headerGeometryFrame=null}scheduleHeaderGeometrySync(s){this.cancelHeaderGeometrySync();let t=e.MAX_HEADER_GEOMETRY_FRAMES;let i=0;const a=()=>{if(this.headerEl!==s)return;t-=1;i+=1;this.connectScrollRoot();this.syncRenderedHeaderGeometry(s);const e=this.effectiveVariant!=="expanded"||this.expandedHeaderHeight>0&&this.headerTravel>0;if(e&&i>=2||t<=0){this.headerGeometryFrame=null;return}this.headerGeometryFrame=requestAnimationFrame(a)};this.headerGeometryFrame=requestAnimationFrame(a)}cancelHeaderReveal(){if(this.headerRevealFrame!==null)cancelAnimationFrame(this.headerRevealFrame);this.headerRevealFrame=null;this.headerEl?.removeAttribute("data-shell-page-syncing")}revealHeaderWhenSynced(s,t){let i=e.MAX_HEADER_REVEAL_FRAMES;const a=()=>{if(this.headerEl!==s){s.removeAttribute("data-shell-page-syncing");return}i-=1;if(s.classList.contains(this.variantClass(t))){s.removeAttribute("data-shell-page-syncing");this.headerRevealFrame=null;return}if(i<=0){this.headerRevealFrame=null;return}this.headerRevealFrame=requestAnimationFrame(a)};this.headerRevealFrame=requestAnimationFrame(a)}syncHeaderVariant(e=false){const s=this.headerEl;if(!s)return;if(!this.headerContractResolved){this.cancelHeaderReveal();s.setAttribute("data-shell-page-syncing","");return}const t=this.effectiveVariant;const i=!s.classList.contains(this.variantClass(t));if(!i)this.syncRenderedHeaderGeometry(s);if(e){this.cancelHeaderReveal();s.setAttribute("data-shell-page-syncing","")}if(s.variant!==t)s.variant=t;if(e){this.revealHeaderWhenSynced(s,t)}}observeHeader(e){this.cancelHeaderReveal();this.cancelHeaderGeometrySync();this.headerResizeObserver?.disconnect();this.headerResizeObserver=null;this.headerMutationObserver?.disconnect();this.headerMutationObserver=null;this.headerEl=e;this.expandedHeaderHeight=0;this.expandedGeometryFrozen=false;this.setHeaderTravel(0);this.setSpacerHeight(0);this.stickyHeaderEl?.style.setProperty("--ds-shell-page-sticky-offset","0px");if(!e)return;if(e.classList.contains(this.variantClass("expanded"))){this.captureExpandedHeaderGeometry(e)}if(typeof ResizeObserver!=="undefined"){this.headerResizeObserver=new ResizeObserver((()=>{this.syncRenderedHeaderGeometry(e)}));this.headerResizeObserver.observe(e)}if(typeof MutationObserver!=="undefined"){this.headerMutationObserver=new MutationObserver((()=>{this.syncRenderedHeaderGeometry(e)}));this.headerMutationObserver.observe(e,{attributes:true,attributeFilter:["class"]})}this.syncHeaderVariant(true);this.scheduleHeaderGeometrySync(e)}render(){const e=this.responsiveMode==="mobile";return t(i,{key:"230cb797d70d0c1451070c9d86b432dc69082a4d",role:"main",class:{"shell-page-host--inset-default":this.contentInset==="default","shell-page-host--inset-none":this.contentInset==="none","shell-page-host--mobile":e,[`shell-page-host--header-${this.effectiveVariant}`]:true}},t("div",{key:"0782cc369e194afc559bde120703077e717db4b0",ref:e=>{this.sentinelEl=e??null},class:"shell-page__scroll-sentinel","aria-hidden":"true"}),t("div",{key:"9ac10ffadfa5b74028e80b3044ee072c6e8f1f0c",ref:e=>{this.stickyHeaderEl=e??null},class:"shell-page__sticky-header"},t("div",{key:"2500a6487ae97e7674e5bcc479567c6b618362cb",class:"shell-page__desktop-header",hidden:e,"aria-hidden":e?"true":undefined,inert:e?true:undefined},t("slot",{key:"bb8644f4e7de699d7c0687ff0c663ce1f9a3c33c",name:"header",onSlotchange:this.handleHeaderSlotChange})),t("div",{key:"a3cbb0780b6eaf3d01c0e6723e0e63a9ef9612aa",class:"shell-page__mobile-header",hidden:!e,"aria-hidden":!e?"true":undefined,inert:!e?true:undefined},t("slot",{key:"b8d424add22f061bc3625618f0d89c195b5cd3d7",name:"mobile-header"}))),t("div",{key:"b545c5414adeefd56df6b9e9061c54bb8fda0d7e",ref:e=>{this.spacerEl=e??null},class:"shell-page__flow-spacer","aria-hidden":"true"}),t("div",{key:"5edbaa263ded0457f5f8608b46049a3f3a883f06",class:"shell-page__content"},t("slot",{key:"e69edd6df18e12b2eb5e643a031f9304ed548f1d"})))}get el(){return this}static get watchers(){return{headerCapacity:[{handleHeaderContractChange:0}],headerPresentation:[{handleHeaderContractChange:0}],responsiveMode:[{handleResponsiveModeChange:0}]}}static get style(){return l()}},[262,"ds-shell-page",{headerPresentation:[1,"header-presentation"],headerCapacity:[1,"header-capacity"],contentInset:[1,"content-inset"],responsiveMode:[513,"responsive-mode"],pageTopVisible:[32]},undefined,{headerCapacity:[{handleHeaderContractChange:0}],headerPresentation:[{handleHeaderContractChange:0}],responsiveMode:[{handleResponsiveModeChange:0}]}]);r.MAX_HEADER_REVEAL_FRAMES=12;r.MAX_HEADER_GEOMETRY_FRAMES=12;function d(){if(typeof customElements==="undefined"){return}const e=["ds-shell-page"];e.forEach((e=>{switch(e){case"ds-shell-page":if(!customElements.get(a(e))){customElements.define(a(e),r)}break}}))}d();const o=r;const c=d;export{o as DsShellPage,c as defineCustomElement};
+import{p as e,H as s,h as t,a as i,t as a}from"./index.js";import{r as h}from"./p-BJMRBHKW.js";function n(e,s,t){if(e!=="auto")return e;if(s==="constrained")return"constrained";if(s==="compact"||!t)return"compact";return"expanded"}const l=()=>`.sc-ds-shell-page-h{display:block;position:relative;min-width:0;min-height:100%;box-sizing:border-box;background:var(--color-background-primary)}.shell-page__scroll-sentinel.sc-ds-shell-page{position:absolute;inset-block-start:var(--ds-shell-page-header-travel, 0);inset-inline-start:0;width:var(--dimension-stroke-width-012);height:var(--dimension-stroke-width-012);pointer-events:none}.shell-page__sticky-header.sc-ds-shell-page{position:sticky;inset-block-start:var(--ds-shell-page-sticky-offset, 0);z-index:var(--dimension-z-index-raised);min-width:0;background:var(--color-background-primary);overflow:visible;overflow-anchor:none}.shell-page__desktop-header.sc-ds-shell-page-s>ds-bar-title,.shell-page__desktop-header .sc-ds-shell-page-s>ds-bar-title,.shell-page__desktop-header.sc-ds-shell-page-s>ds-bar-workflow,.shell-page__desktop-header .sc-ds-shell-page-s>ds-bar-workflow,.shell-page__mobile-header.sc-ds-shell-page-s>ds-mobile-header,.shell-page__mobile-header .sc-ds-shell-page-s>ds-mobile-header{display:block;min-width:0}.shell-page__desktop-header[hidden].sc-ds-shell-page,.shell-page__mobile-header[hidden].sc-ds-shell-page{display:none}.shell-page-host--mobile.sc-ds-shell-page-h .shell-page__scroll-sentinel.sc-ds-shell-page,.shell-page-host--mobile.sc-ds-shell-page-h .shell-page__flow-spacer.sc-ds-shell-page{display:none}.shell-page__flow-spacer.sc-ds-shell-page{height:var(--ds-shell-page-flow-spacer, 0);background:var(--color-background-primary)}.shell-page__content.sc-ds-shell-page{min-width:0;box-sizing:border-box;background:var(--color-background-primary)}.shell-page-host--inset-default.sc-ds-shell-page-h .shell-page__content.sc-ds-shell-page{padding:var(--dimension-space-400) var(--dimension-space-400) var(--dimension-space-800)}.shell-page-host--inset-default[responsive-mode='tablet'].sc-ds-shell-page-h .shell-page__content.sc-ds-shell-page,.shell-page-host--inset-default[responsive-mode='mobile'].sc-ds-shell-page-h .shell-page__content.sc-ds-shell-page{padding:var(--dimension-space-200) var(--dimension-space-200) var(--dimension-space-800)}.shell-page-host--inset-none.sc-ds-shell-page-h .shell-page__content.sc-ds-shell-page{padding:0}`;const r=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.headerPresentation="auto";this.contentInset="default";this.responsiveMode="desktop";this.pageTopVisible=true;this.sentinelEl=null;this.spacerEl=null;this.stickyHeaderEl=null;this.headerEl=null;this.expandedHeaderHeight=0;this.headerTravel=0;this.expandedGeometryFrozen=false;this.headerResizeObserver=null;this.headerMutationObserver=null;this.headerRevealFrame=null;this.headerGeometryFrame=null;this.scrollRoot=null;this.handleScroll=()=>{if(!this.sentinelEl||!this.scrollRoot)return;const e=this.scrollRoot===window?0:this.scrollRoot.getBoundingClientRect().top;this.syncHeaderDividerInset(e);const s=this.sentinelEl.getBoundingClientRect().top>=e;if(!s&&this.pageTopVisible&&this.headerEl?.classList.contains(this.variantClass("expanded"))){this.captureExpandedHeaderGeometry(this.headerEl);this.expandedGeometryFrozen=true}if(s&&this.expandedGeometryFrozen&&this.el.getBoundingClientRect().top>=e){this.expandedGeometryFrozen=false;if(this.headerEl?.classList.contains(this.variantClass("expanded"))){this.captureExpandedHeaderGeometry(this.headerEl)}}this.pageTopVisible=s};this.handleHeaderSlotChange=e=>{if(this.responsiveMode==="mobile")return;const s=e.target;const t=s.assignedElements().find((e=>e.tagName.toLowerCase()==="ds-bar-title"));this.observeHeader(t??null)}}handleHeaderContractChange(){this.syncHeaderVariant(true)}handleResponsiveModeChange(){this.observeHeader(this.responsiveMode==="mobile"?null:this.findHeader())}componentDidLoad(){this.observeHeader(this.responsiveMode==="mobile"?null:this.findHeader());this.connectScrollRoot()}componentDidRender(){this.syncHeaderVariant()}disconnectedCallback(){this.headerResizeObserver?.disconnect();this.headerResizeObserver=null;this.headerMutationObserver?.disconnect();this.headerMutationObserver=null;this.cancelHeaderReveal();this.cancelHeaderGeometrySync();this.headerEl?.style.removeProperty("--ds-bar-title-divider-inset");this.scrollRoot?.removeEventListener("scroll",this.handleScroll);this.scrollRoot=null}get effectiveVariant(){return n(this.headerPresentation,this.headerCapacity??"roomy",this.pageTopVisible)}get headerContractResolved(){return this.headerPresentation!=="auto"||this.headerCapacity!==undefined}get isScrollCompacted(){return this.headerPresentation==="auto"&&this.headerCapacity==="roomy"&&!this.pageTopVisible}composedParent(e){return e.assignedSlot?.parentElement??e.parentElement}findScrollRoot(){let e=this.composedParent(this.el);while(e&&e!==document.documentElement){const s=getComputedStyle(e).overflowY;if(s==="auto"||s==="scroll"||s==="overlay"){return e}e=this.composedParent(e)}return window}connectScrollRoot(){const e=this.findScrollRoot();if(e===this.scrollRoot)return;this.scrollRoot?.removeEventListener("scroll",this.handleScroll);this.scrollRoot=e;this.scrollRoot.addEventListener("scroll",this.handleScroll,{passive:true});this.handleScroll()}findHeader(){return this.el.querySelector("ds-bar-title")}get compactHeaderHeight(){return h("--dimension-size-600",0)}syncHeaderDividerInset(e){const s=this.headerEl;if(!s)return;const t=this.headerPresentation==="auto"&&this.headerCapacity==="roomy";const i=h("--dimension-space-400",0);if(!t||!this.sentinelEl||!this.scrollRoot||this.headerTravel<=0||i<=0){s.style.removeProperty("--ds-bar-title-divider-inset");return}const a=e??(this.scrollRoot===window?0:this.scrollRoot.getBoundingClientRect().top);const n=this.sentinelEl.getBoundingClientRect().top-a;const l=Math.min(1,Math.max(0,1-n/this.headerTravel));s.style.setProperty("--ds-bar-title-divider-inset",`${i*(1-l)}px`)}setHeaderTravel(e){const s=Math.max(0,e);if(Math.abs(s-this.headerTravel)<.5)return;this.headerTravel=s;this.el.style.setProperty("--ds-shell-page-header-travel",`${s}px`);this.handleScroll()}measureHeaderTravel(e){const s=e.querySelector("[data-shell-page-header-anchor]");const t=this.compactHeaderHeight;if(!s||t<=0)return;const i=e.getBoundingClientRect();const a=s.getBoundingClientRect();if(i.height<=0||a.height<=0)return;const h=a.top-i.top;const n=Math.max(0,(t-a.height)/2);this.setHeaderTravel(h-n)}captureExpandedHeaderGeometry(e){this.expandedHeaderHeight=e.getBoundingClientRect().height;this.measureHeaderTravel(e)}setSpacerHeight(e){if(!this.spacerEl)return;this.spacerEl.style.setProperty("--ds-shell-page-flow-spacer",`${Math.max(0,e)}px`)}variantClass(e){return`bar-title-host--${e}`}setStickyHeaderOffset(e){this.stickyHeaderEl?.style.setProperty("--ds-shell-page-sticky-offset",e==="expanded"&&this.headerPresentation==="auto"&&this.headerCapacity==="roomy"?`${-this.headerTravel}px`:"0px")}syncRenderedHeaderGeometry(e){const s=this.effectiveVariant;if(!e.classList.contains(this.variantClass(s)))return;this.setSpacerHeight(this.isScrollCompacted?this.expandedHeaderHeight-this.compactHeaderHeight:0);this.setStickyHeaderOffset(s);if(s==="expanded"&&!this.expandedGeometryFrozen){this.captureExpandedHeaderGeometry(e);this.setStickyHeaderOffset(s)}}cancelHeaderGeometrySync(){if(this.headerGeometryFrame!==null)cancelAnimationFrame(this.headerGeometryFrame);this.headerGeometryFrame=null}scheduleHeaderGeometrySync(s){this.cancelHeaderGeometrySync();let t=e.MAX_HEADER_GEOMETRY_FRAMES;let i=0;const a=()=>{if(this.headerEl!==s)return;t-=1;i+=1;this.connectScrollRoot();this.syncRenderedHeaderGeometry(s);const e=this.effectiveVariant!=="expanded"||this.expandedHeaderHeight>0&&this.headerTravel>0;if(e&&i>=2||t<=0){this.headerGeometryFrame=null;return}this.headerGeometryFrame=requestAnimationFrame(a)};this.headerGeometryFrame=requestAnimationFrame(a)}cancelHeaderReveal(){if(this.headerRevealFrame!==null)cancelAnimationFrame(this.headerRevealFrame);this.headerRevealFrame=null;this.headerEl?.removeAttribute("data-shell-page-syncing")}revealHeaderWhenSynced(s,t){let i=e.MAX_HEADER_REVEAL_FRAMES;const a=()=>{if(this.headerEl!==s){s.removeAttribute("data-shell-page-syncing");return}i-=1;if(s.classList.contains(this.variantClass(t))){s.removeAttribute("data-shell-page-syncing");this.headerRevealFrame=null;return}if(i<=0){this.headerRevealFrame=null;return}this.headerRevealFrame=requestAnimationFrame(a)};this.headerRevealFrame=requestAnimationFrame(a)}syncHeaderVariant(e=false){const s=this.headerEl;if(!s)return;this.syncHeaderDividerInset();if(!this.headerContractResolved){this.cancelHeaderReveal();s.setAttribute("data-shell-page-syncing","");return}const t=this.effectiveVariant;const i=!s.classList.contains(this.variantClass(t));if(!i)this.syncRenderedHeaderGeometry(s);if(e){this.cancelHeaderReveal();s.setAttribute("data-shell-page-syncing","")}if(s.variant!==t)s.variant=t;if(e){this.revealHeaderWhenSynced(s,t)}}observeHeader(e){this.cancelHeaderReveal();this.cancelHeaderGeometrySync();this.headerResizeObserver?.disconnect();this.headerResizeObserver=null;this.headerMutationObserver?.disconnect();this.headerMutationObserver=null;this.headerEl?.style.removeProperty("--ds-bar-title-divider-inset");this.headerEl=e;this.expandedHeaderHeight=0;this.expandedGeometryFrozen=false;this.setHeaderTravel(0);this.setSpacerHeight(0);this.stickyHeaderEl?.style.setProperty("--ds-shell-page-sticky-offset","0px");if(!e)return;if(e.classList.contains(this.variantClass("expanded"))){this.captureExpandedHeaderGeometry(e)}if(typeof ResizeObserver!=="undefined"){this.headerResizeObserver=new ResizeObserver((()=>{this.syncRenderedHeaderGeometry(e)}));this.headerResizeObserver.observe(e)}if(typeof MutationObserver!=="undefined"){this.headerMutationObserver=new MutationObserver((()=>{this.syncRenderedHeaderGeometry(e)}));this.headerMutationObserver.observe(e,{attributes:true,attributeFilter:["class"]})}this.syncHeaderVariant(true);this.scheduleHeaderGeometrySync(e)}render(){const e=this.responsiveMode==="mobile";return t(i,{key:"ca3bb19e72cb4806994b138cab1d1d63cd492e5f",role:"main",class:{"shell-page-host--inset-default":this.contentInset==="default","shell-page-host--inset-none":this.contentInset==="none","shell-page-host--mobile":e,[`shell-page-host--header-${this.effectiveVariant}`]:true}},t("div",{key:"ca8f7605c5819782d1c5a8bc75527207c16149a8",ref:e=>{this.sentinelEl=e??null},class:"shell-page__scroll-sentinel","aria-hidden":"true"}),t("div",{key:"48ceae02793000c23ad9d920d1faed02d8e1edd6",ref:e=>{this.stickyHeaderEl=e??null},class:"shell-page__sticky-header"},t("div",{key:"9a4d8727ec9b55ba3c2e4c99206dc81ce33dc67a",class:"shell-page__desktop-header",hidden:e,"aria-hidden":e?"true":undefined,inert:e?true:undefined},t("slot",{key:"7bf8dae0a362cc851f5796bddd081b23e3a51c89",name:"header",onSlotchange:this.handleHeaderSlotChange})),t("div",{key:"2514338ebd418b5b5ef8c56ca59f49a465c2f0df",class:"shell-page__mobile-header",hidden:!e,"aria-hidden":!e?"true":undefined,inert:!e?true:undefined},t("slot",{key:"350a97a0eb340076d881225c4c501c494664014e",name:"mobile-header"}))),t("div",{key:"a9feb0999f2ae79c9d490d6b68e17f0daccdee6a",ref:e=>{this.spacerEl=e??null},class:"shell-page__flow-spacer","aria-hidden":"true"}),t("div",{key:"d11deeb57bf1fa5dde1f92dd53c3bcaf00c33de7",class:"shell-page__content"},t("slot",{key:"47ee4cfc2af0ffbb376b09b9c0062969846f3f46"})))}get el(){return this}static get watchers(){return{headerCapacity:[{handleHeaderContractChange:0}],headerPresentation:[{handleHeaderContractChange:0}],responsiveMode:[{handleResponsiveModeChange:0}]}}static get style(){return l()}},[262,"ds-shell-page",{headerPresentation:[1,"header-presentation"],headerCapacity:[1,"header-capacity"],contentInset:[1,"content-inset"],responsiveMode:[513,"responsive-mode"],pageTopVisible:[32]},undefined,{headerCapacity:[{handleHeaderContractChange:0}],headerPresentation:[{handleHeaderContractChange:0}],responsiveMode:[{handleResponsiveModeChange:0}]}]);r.MAX_HEADER_REVEAL_FRAMES=12;r.MAX_HEADER_GEOMETRY_FRAMES=12;function d(){if(typeof customElements==="undefined"){return}const e=["ds-shell-page"];e.forEach((e=>{switch(e){case"ds-shell-page":if(!customElements.get(a(e))){customElements.define(a(e),r)}break}}))}d();const o=r;const c=d;export{o as DsShellPage,c as defineCustomElement};
 //# sourceMappingURL=ds-shell-page.js.map

package/dist/components/ds-shell-page.js.map

@@ -1 +1 @@
-{"version":3,"names":["resolveShellPageHeaderVariant","presentation","capacity","pageTopVisible","shellPageCss","ShellPage","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","headerPresentation","contentInset","responsiveMode","sentinelEl","spacerEl","stickyHeaderEl","headerEl","expandedHeaderHeight","headerTravel","expandedGeometryFrozen","headerResizeObserver","headerMutationObserver","headerRevealFrame","headerGeometryFrame","scrollRoot","handleScroll","rootTop","window","getBoundingClientRect","top","nextPageTopVisible","classList","contains","variantClass","captureExpandedHeaderGeometry","el","handleHeaderSlotChange","event","slot","target","header","assignedElements","find","element","tagName","toLowerCase","observeHeader","handleHeaderContractChange","syncHeaderVariant","handleResponsiveModeChange","findHeader","componentDidLoad","connectScrollRoot","componentDidRender","disconnectedCallback","disconnect","cancelHeaderReveal","cancelHeaderGeometrySync","removeEventListener","effectiveVariant","headerCapacity","headerContractResolved","undefined","isScrollCompacted","composedParent","assignedSlot","parentElement","findScrollRoot","ancestor","document","documentElement","overflow","getComputedStyle","overflowY","next","addEventListener","passive","querySelector","compactHeaderHeight","resolveCssLengthPx","setHeaderTravel","distance","Math","max","abs","style","setProperty","measureHeaderTravel","anchor","compactHeight","headerRect","anchorRect","height","expandedAnchorTop","compactAnchorTop","setSpacerHeight","variant","setStickyHeaderOffset","renderedVariant","syncRenderedHeaderGeometry","cancelAnimationFrame","scheduleHeaderGeometrySync","framesRemaining","MAX_HEADER_GEOMETRY_FRAMES","framesElapsed","sync","geometryReady","requestAnimationFrame","removeAttribute","revealHeaderWhenSynced","MAX_HEADER_REVEAL_FRAMES","reveal","concealUntilSynced","setAttribute","renderedVariantIsStale","ResizeObserver","observe","MutationObserver","attributes","attributeFilter","render","mobile","h","Host","key","role","class","ref","hidden","inert","name","onSlotchange"],"sources":["src/wc/components/ShellPage/shell-page-responsive.ts","src/wc/components/ShellPage/ShellPage.css?tag=ds-shell-page&encapsulation=scoped","src/wc/components/ShellPage/ShellPage.tsx"],"sourcesContent":["import type { ShellPageCapacity, ShellPageHeaderPresentation } from './shell-page-types';\nimport type { BarTitleVariant } from '../BarTitle/bar-title-types';\n\nexport function resolveShellPageHeaderVariant(\n  presentation: ShellPageHeaderPresentation,\n  capacity: ShellPageCapacity,\n  pageTopVisible: boolean\n): BarTitleVariant {\n  if (presentation !== 'auto') return presentation;\n  if (capacity === 'constrained') return 'constrained';\n  if (capacity === 'compact' || !pageTopVisible) return 'compact';\n  return 'expanded';\n}\n",":host {\n  display: block;\n  position: relative;\n  min-width: 0;\n  min-height: 100%;\n  box-sizing: border-box;\n  background: var(--color-background-primary);\n}\n\n.shell-page__scroll-sentinel {\n  position: absolute;\n  inset-block-start: var(--ds-shell-page-header-travel, 0);\n  inset-inline-start: 0;\n  width: var(--dimension-stroke-width-012);\n  height: var(--dimension-stroke-width-012);\n  pointer-events: none;\n}\n\n.shell-page__sticky-header {\n  position: sticky;\n  inset-block-start: var(--ds-shell-page-sticky-offset, 0);\n  z-index: var(--dimension-z-index-raised);\n  min-width: 0;\n  background: var(--color-background-primary);\n  overflow: visible;\n  overflow-anchor: none;\n}\n\n.shell-page__desktop-header ::slotted(ds-bar-title),\n.shell-page__desktop-header ::slotted(ds-bar-workflow),\n.shell-page__mobile-header ::slotted(ds-mobile-header) {\n  display: block;\n  min-width: 0;\n}\n\n.shell-page__desktop-header[hidden],\n.shell-page__mobile-header[hidden] {\n  display: none;\n}\n\n:host(.shell-page-host--mobile) .shell-page__scroll-sentinel,\n:host(.shell-page-host--mobile) .shell-page__flow-spacer {\n  display: none;\n}\n\n.shell-page__flow-spacer {\n  height: var(--ds-shell-page-flow-spacer, 0);\n  background: var(--color-background-primary);\n}\n\n.shell-page__content {\n  min-width: 0;\n  box-sizing: border-box;\n  background: var(--color-background-primary);\n}\n\n:host(.shell-page-host--inset-default) .shell-page__content {\n  padding: var(--dimension-space-400) var(--dimension-space-400) var(--dimension-space-800);\n}\n\n:host(.shell-page-host--inset-none) .shell-page__content {\n  padding: 0;\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport type { ShellResponsiveMode } from '../../shell/shell-responsive';\nimport { resolveCssLengthPx } from '../../utils/resolve-css-length-px';\nimport type { BarTitleVariant } from '../BarTitle/bar-title-types';\nimport { resolveShellPageHeaderVariant } from './shell-page-responsive';\nimport type {\n  ShellPageCapacity,\n  ShellPageContentInset,\n  ShellPageHeaderPresentation,\n} from './shell-page-types';\n\ntype BarTitleElement = HTMLElement & { variant: BarTitleVariant };\n\n@Component({\n  tag: 'ds-shell-page',\n  styleUrl: 'ShellPage.css',\n  scoped: true,\n})\nexport class ShellPage {\n  private static readonly MAX_HEADER_REVEAL_FRAMES = 12;\n  private static readonly MAX_HEADER_GEOMETRY_FRAMES = 12;\n\n  @Element() el!: HTMLElement;\n\n  /** Automatic capacity/scroll behavior, or an explicit header variant override. */\n  @Prop() headerPresentation: ShellPageHeaderPresentation = 'auto';\n\n  /** Available page-header capacity supplied by the owning application shell. */\n  @Prop() headerCapacity?: ShellPageCapacity;\n\n  /** Standard page gutters, or no inset for full-bleed page content. */\n  @Prop() contentInset: ShellPageContentInset = 'default';\n\n  /** Explicit shell breakpoint presentation. Mobile uses the dedicated mobile-header slot. */\n  @Prop({ attribute: 'responsive-mode', reflect: true })\n  responsiveMode: ShellResponsiveMode = 'desktop';\n\n  @State() private pageTopVisible = true;\n\n  private sentinelEl: HTMLElement | null = null;\n  private spacerEl: HTMLElement | null = null;\n  private stickyHeaderEl: HTMLElement | null = null;\n  private headerEl: BarTitleElement | null = null;\n  private expandedHeaderHeight = 0;\n  private headerTravel = 0;\n  private expandedGeometryFrozen = false;\n  private headerResizeObserver: ResizeObserver | null = null;\n  private headerMutationObserver: MutationObserver | null = null;\n  private headerRevealFrame: number | null = null;\n  private headerGeometryFrame: number | null = null;\n  private scrollRoot: HTMLElement | Window | null = null;\n\n  @Watch('headerCapacity')\n  @Watch('headerPresentation')\n  handleHeaderContractChange() {\n    this.syncHeaderVariant(true);\n  }\n\n  @Watch('responsiveMode')\n  handleResponsiveModeChange() {\n    this.observeHeader(this.responsiveMode === 'mobile' ? null : this.findHeader());\n  }\n\n  componentDidLoad() {\n    this.observeHeader(this.responsiveMode === 'mobile' ? null : this.findHeader());\n    this.connectScrollRoot();\n  }\n\n  componentDidRender() {\n    this.syncHeaderVariant();\n  }\n\n  disconnectedCallback() {\n    this.headerResizeObserver?.disconnect();\n    this.headerResizeObserver = null;\n    this.headerMutationObserver?.disconnect();\n    this.headerMutationObserver = null;\n    this.cancelHeaderReveal();\n    this.cancelHeaderGeometrySync();\n    this.scrollRoot?.removeEventListener('scroll', this.handleScroll);\n    this.scrollRoot = null;\n  }\n\n  private get effectiveVariant(): BarTitleVariant {\n    return resolveShellPageHeaderVariant(\n      this.headerPresentation,\n      this.headerCapacity ?? 'roomy',\n      this.pageTopVisible\n    );\n  }\n\n  private get headerContractResolved(): boolean {\n    return this.headerPresentation !== 'auto' || this.headerCapacity !== undefined;\n  }\n\n  private get isScrollCompacted(): boolean {\n    return (\n      this.headerPresentation === 'auto' && this.headerCapacity === 'roomy' && !this.pageTopVisible\n    );\n  }\n\n  private composedParent(element: Element): Element | null {\n    return (element as HTMLElement).assignedSlot?.parentElement ?? element.parentElement;\n  }\n\n  private findScrollRoot(): HTMLElement | Window {\n    let ancestor = this.composedParent(this.el);\n    while (ancestor && ancestor !== document.documentElement) {\n      const overflow = getComputedStyle(ancestor).overflowY;\n      if (overflow === 'auto' || overflow === 'scroll' || overflow === 'overlay') {\n        return ancestor as HTMLElement;\n      }\n      ancestor = this.composedParent(ancestor);\n    }\n    return window;\n  }\n\n  private connectScrollRoot() {\n    const next = this.findScrollRoot();\n    if (next === this.scrollRoot) return;\n    this.scrollRoot?.removeEventListener('scroll', this.handleScroll);\n    this.scrollRoot = next;\n    this.scrollRoot.addEventListener('scroll', this.handleScroll, { passive: true });\n    this.handleScroll();\n  }\n\n  private handleScroll = () => {\n    if (!this.sentinelEl || !this.scrollRoot) return;\n    const rootTop =\n      this.scrollRoot === window ? 0 : (this.scrollRoot as HTMLElement).getBoundingClientRect().top;\n    const nextPageTopVisible = this.sentinelEl.getBoundingClientRect().top >= rootTop;\n    if (\n      !nextPageTopVisible &&\n      this.pageTopVisible &&\n      this.headerEl?.classList.contains(this.variantClass('expanded'))\n    ) {\n      this.captureExpandedHeaderGeometry(this.headerEl);\n      this.expandedGeometryFrozen = true;\n    }\n    if (\n      nextPageTopVisible &&\n      this.expandedGeometryFrozen &&\n      this.el.getBoundingClientRect().top >= rootTop\n    ) {\n      this.expandedGeometryFrozen = false;\n      if (this.headerEl?.classList.contains(this.variantClass('expanded'))) {\n        this.captureExpandedHeaderGeometry(this.headerEl);\n      }\n    }\n    this.pageTopVisible = nextPageTopVisible;\n  };\n\n  private findHeader(): BarTitleElement | null {\n    return this.el.querySelector<BarTitleElement>('ds-bar-title');\n  }\n\n  private get compactHeaderHeight(): number {\n    return resolveCssLengthPx('--dimension-size-600', 0);\n  }\n\n  private setHeaderTravel(distance: number) {\n    const next = Math.max(0, distance);\n    if (Math.abs(next - this.headerTravel) < 0.5) return;\n    this.headerTravel = next;\n    this.el.style.setProperty('--ds-shell-page-header-travel', `${next}px`);\n    this.handleScroll();\n  }\n\n  private measureHeaderTravel(header: BarTitleElement) {\n    const anchor = header.querySelector<HTMLElement>('[data-shell-page-header-anchor]');\n    const compactHeight = this.compactHeaderHeight;\n    if (!anchor || compactHeight <= 0) return;\n\n    const headerRect = header.getBoundingClientRect();\n    const anchorRect = anchor.getBoundingClientRect();\n    if (headerRect.height <= 0 || anchorRect.height <= 0) return;\n\n    const expandedAnchorTop = anchorRect.top - headerRect.top;\n    const compactAnchorTop = Math.max(0, (compactHeight - anchorRect.height) / 2);\n    this.setHeaderTravel(expandedAnchorTop - compactAnchorTop);\n  }\n\n  private captureExpandedHeaderGeometry(header: BarTitleElement) {\n    this.expandedHeaderHeight = header.getBoundingClientRect().height;\n    this.measureHeaderTravel(header);\n  }\n\n  private setSpacerHeight(height: number) {\n    if (!this.spacerEl) return;\n    this.spacerEl.style.setProperty('--ds-shell-page-flow-spacer', `${Math.max(0, height)}px`);\n  }\n\n  private variantClass(variant: BarTitleVariant): string {\n    return `bar-title-host--${variant}`;\n  }\n\n  private setStickyHeaderOffset(renderedVariant: BarTitleVariant) {\n    this.stickyHeaderEl?.style.setProperty(\n      '--ds-shell-page-sticky-offset',\n      renderedVariant === 'expanded' &&\n        this.headerPresentation === 'auto' &&\n        this.headerCapacity === 'roomy'\n        ? `${-this.headerTravel}px`\n        : '0px'\n    );\n  }\n\n  private syncRenderedHeaderGeometry(header: BarTitleElement) {\n    const renderedVariant = this.effectiveVariant;\n    if (!header.classList.contains(this.variantClass(renderedVariant))) return;\n\n    // Update both flow-preservation pieces before reading layout. Otherwise a\n    // reverse compact → expanded render can briefly contain the tall header and\n    // the compact spacer together, giving browser scroll anchoring a transient\n    // height change to compensate.\n    this.setSpacerHeight(\n      this.isScrollCompacted ? this.expandedHeaderHeight - this.compactHeaderHeight : 0\n    );\n    this.setStickyHeaderOffset(renderedVariant);\n\n    if (renderedVariant === 'expanded' && !this.expandedGeometryFrozen) {\n      this.captureExpandedHeaderGeometry(header);\n      this.setStickyHeaderOffset(renderedVariant);\n    }\n  }\n\n  private cancelHeaderGeometrySync() {\n    if (this.headerGeometryFrame !== null) cancelAnimationFrame(this.headerGeometryFrame);\n    this.headerGeometryFrame = null;\n  }\n\n  private scheduleHeaderGeometrySync(header: BarTitleElement) {\n    this.cancelHeaderGeometrySync();\n    let framesRemaining = ShellPage.MAX_HEADER_GEOMETRY_FRAMES;\n    let framesElapsed = 0;\n    const sync = () => {\n      if (this.headerEl !== header) return;\n      framesRemaining -= 1;\n      framesElapsed += 1;\n      // In WebKit a child's componentDidLoad can precede its assignment into\n      // the parent's rendered slot. Revalidate after ShellApp has had a frame\n      // to expose the actual content scroller.\n      this.connectScrollRoot();\n      this.syncRenderedHeaderGeometry(header);\n      const geometryReady =\n        this.effectiveVariant !== 'expanded' ||\n        (this.expandedHeaderHeight > 0 && this.headerTravel > 0);\n      if ((geometryReady && framesElapsed >= 2) || framesRemaining <= 0) {\n        this.headerGeometryFrame = null;\n        return;\n      }\n      this.headerGeometryFrame = requestAnimationFrame(sync);\n    };\n    this.headerGeometryFrame = requestAnimationFrame(sync);\n  }\n\n  private cancelHeaderReveal() {\n    if (this.headerRevealFrame !== null) cancelAnimationFrame(this.headerRevealFrame);\n    this.headerRevealFrame = null;\n    this.headerEl?.removeAttribute('data-shell-page-syncing');\n  }\n\n  private revealHeaderWhenSynced(header: BarTitleElement, variant: BarTitleVariant) {\n    // Stencil normally re-renders within a frame or two of a prop change. Stop\n    // polling at the cap, but fail closed: a stale variant must never paint.\n    let framesRemaining = ShellPage.MAX_HEADER_REVEAL_FRAMES;\n    const reveal = () => {\n      if (this.headerEl !== header) {\n        header.removeAttribute('data-shell-page-syncing');\n        return;\n      }\n      framesRemaining -= 1;\n      if (header.classList.contains(this.variantClass(variant))) {\n        header.removeAttribute('data-shell-page-syncing');\n        this.headerRevealFrame = null;\n        return;\n      }\n      if (framesRemaining <= 0) {\n        this.headerRevealFrame = null;\n        return;\n      }\n      this.headerRevealFrame = requestAnimationFrame(reveal);\n    };\n    this.headerRevealFrame = requestAnimationFrame(reveal);\n  }\n\n  private syncHeaderVariant(concealUntilSynced = false) {\n    const header = this.headerEl;\n    if (!header) return;\n\n    if (!this.headerContractResolved) {\n      this.cancelHeaderReveal();\n      header.setAttribute('data-shell-page-syncing', '');\n      return;\n    }\n\n    const next = this.effectiveVariant;\n    const renderedVariantIsStale = !header.classList.contains(this.variantClass(next));\n    if (!renderedVariantIsStale) this.syncRenderedHeaderGeometry(header);\n    if (concealUntilSynced) {\n      this.cancelHeaderReveal();\n      header.setAttribute('data-shell-page-syncing', '');\n    }\n    if (header.variant !== next) header.variant = next;\n    if (concealUntilSynced) {\n      this.revealHeaderWhenSynced(header, next);\n    }\n  }\n\n  private observeHeader(header: BarTitleElement | null) {\n    this.cancelHeaderReveal();\n    this.cancelHeaderGeometrySync();\n    this.headerResizeObserver?.disconnect();\n    this.headerResizeObserver = null;\n    this.headerMutationObserver?.disconnect();\n    this.headerMutationObserver = null;\n    this.headerEl = header;\n    this.expandedHeaderHeight = 0;\n    this.expandedGeometryFrozen = false;\n    this.setHeaderTravel(0);\n    this.setSpacerHeight(0);\n    this.stickyHeaderEl?.style.setProperty('--ds-shell-page-sticky-offset', '0px');\n\n    if (!header) return;\n    if (header.classList.contains(this.variantClass('expanded'))) {\n      this.captureExpandedHeaderGeometry(header);\n    }\n    if (typeof ResizeObserver !== 'undefined') {\n      this.headerResizeObserver = new ResizeObserver(() => {\n        this.syncRenderedHeaderGeometry(header);\n      });\n      this.headerResizeObserver.observe(header);\n    }\n    if (typeof MutationObserver !== 'undefined') {\n      this.headerMutationObserver = new MutationObserver(() => {\n        this.syncRenderedHeaderGeometry(header);\n      });\n      this.headerMutationObserver.observe(header, {\n        attributes: true,\n        attributeFilter: ['class'],\n      });\n    }\n    this.syncHeaderVariant(true);\n    this.scheduleHeaderGeometrySync(header);\n  }\n\n  private handleHeaderSlotChange = (event: Event) => {\n    if (this.responsiveMode === 'mobile') return;\n    const slot = event.target as HTMLSlotElement;\n    const header = slot\n      .assignedElements()\n      .find(element => element.tagName.toLowerCase() === 'ds-bar-title');\n    this.observeHeader((header as BarTitleElement | undefined) ?? null);\n  };\n\n  render() {\n    const mobile = this.responsiveMode === 'mobile';\n    return (\n      <Host\n        role=\"main\"\n        class={{\n          'shell-page-host--inset-default': this.contentInset === 'default',\n          'shell-page-host--inset-none': this.contentInset === 'none',\n          'shell-page-host--mobile': mobile,\n          [`shell-page-host--header-${this.effectiveVariant}`]: true,\n        }}\n      >\n        <div\n          ref={el => {\n            this.sentinelEl = el ?? null;\n          }}\n          class=\"shell-page__scroll-sentinel\"\n          aria-hidden=\"true\"\n        />\n        <div\n          ref={el => {\n            this.stickyHeaderEl = el ?? null;\n          }}\n          class=\"shell-page__sticky-header\"\n        >\n          <div\n            class=\"shell-page__desktop-header\"\n            hidden={mobile}\n            aria-hidden={mobile ? 'true' : undefined}\n            inert={mobile ? true : undefined}\n          >\n            <slot name=\"header\" onSlotchange={this.handleHeaderSlotChange} />\n          </div>\n          <div\n            class=\"shell-page__mobile-header\"\n            hidden={!mobile}\n            aria-hidden={!mobile ? 'true' : undefined}\n            inert={!mobile ? true : undefined}\n          >\n            <slot name=\"mobile-header\" />\n          </div>\n        </div>\n        <div\n          ref={el => {\n            this.spacerEl = el ?? null;\n          }}\n          class=\"shell-page__flow-spacer\"\n          aria-hidden=\"true\"\n        />\n        <div class=\"shell-page__content\">\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["resolveShellPageHeaderVariant","presentation","capacity","pageTopVisible","shellPageCss","ShellPage","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","headerPresentation","contentInset","responsiveMode","sentinelEl","spacerEl","stickyHeaderEl","headerEl","expandedHeaderHeight","headerTravel","expandedGeometryFrozen","headerResizeObserver","headerMutationObserver","headerRevealFrame","headerGeometryFrame","scrollRoot","handleScroll","rootTop","window","getBoundingClientRect","top","syncHeaderDividerInset","nextPageTopVisible","classList","contains","variantClass","captureExpandedHeaderGeometry","el","handleHeaderSlotChange","event","slot","target","header","assignedElements","find","element","tagName","toLowerCase","observeHeader","handleHeaderContractChange","syncHeaderVariant","handleResponsiveModeChange","findHeader","componentDidLoad","connectScrollRoot","componentDidRender","disconnectedCallback","disconnect","cancelHeaderReveal","cancelHeaderGeometrySync","style","removeProperty","removeEventListener","effectiveVariant","headerCapacity","headerContractResolved","undefined","isScrollCompacted","composedParent","assignedSlot","parentElement","findScrollRoot","ancestor","document","documentElement","overflow","getComputedStyle","overflowY","next","addEventListener","passive","querySelector","compactHeaderHeight","resolveCssLengthPx","ownsScrollTransition","expandedInset","scrollRootTop","remainingTravel","progress","Math","min","max","setProperty","setHeaderTravel","distance","abs","measureHeaderTravel","anchor","compactHeight","headerRect","anchorRect","height","expandedAnchorTop","compactAnchorTop","setSpacerHeight","variant","setStickyHeaderOffset","renderedVariant","syncRenderedHeaderGeometry","cancelAnimationFrame","scheduleHeaderGeometrySync","framesRemaining","MAX_HEADER_GEOMETRY_FRAMES","framesElapsed","sync","geometryReady","requestAnimationFrame","removeAttribute","revealHeaderWhenSynced","MAX_HEADER_REVEAL_FRAMES","reveal","concealUntilSynced","setAttribute","renderedVariantIsStale","ResizeObserver","observe","MutationObserver","attributes","attributeFilter","render","mobile","h","Host","key","role","class","ref","hidden","inert","name","onSlotchange"],"sources":["src/wc/components/ShellPage/shell-page-responsive.ts","src/wc/components/ShellPage/ShellPage.css?tag=ds-shell-page&encapsulation=scoped","src/wc/components/ShellPage/ShellPage.tsx"],"sourcesContent":["import type { ShellPageCapacity, ShellPageHeaderPresentation } from './shell-page-types';\nimport type { BarTitleVariant } from '../BarTitle/bar-title-types';\n\nexport function resolveShellPageHeaderVariant(\n  presentation: ShellPageHeaderPresentation,\n  capacity: ShellPageCapacity,\n  pageTopVisible: boolean\n): BarTitleVariant {\n  if (presentation !== 'auto') return presentation;\n  if (capacity === 'constrained') return 'constrained';\n  if (capacity === 'compact' || !pageTopVisible) return 'compact';\n  return 'expanded';\n}\n",":host {\n  display: block;\n  position: relative;\n  min-width: 0;\n  min-height: 100%;\n  box-sizing: border-box;\n  background: var(--color-background-primary);\n}\n\n.shell-page__scroll-sentinel {\n  position: absolute;\n  inset-block-start: var(--ds-shell-page-header-travel, 0);\n  inset-inline-start: 0;\n  width: var(--dimension-stroke-width-012);\n  height: var(--dimension-stroke-width-012);\n  pointer-events: none;\n}\n\n.shell-page__sticky-header {\n  position: sticky;\n  inset-block-start: var(--ds-shell-page-sticky-offset, 0);\n  z-index: var(--dimension-z-index-raised);\n  min-width: 0;\n  background: var(--color-background-primary);\n  overflow: visible;\n  overflow-anchor: none;\n}\n\n.shell-page__desktop-header ::slotted(ds-bar-title),\n.shell-page__desktop-header ::slotted(ds-bar-workflow),\n.shell-page__mobile-header ::slotted(ds-mobile-header) {\n  display: block;\n  min-width: 0;\n}\n\n.shell-page__desktop-header[hidden],\n.shell-page__mobile-header[hidden] {\n  display: none;\n}\n\n:host(.shell-page-host--mobile) .shell-page__scroll-sentinel,\n:host(.shell-page-host--mobile) .shell-page__flow-spacer {\n  display: none;\n}\n\n.shell-page__flow-spacer {\n  height: var(--ds-shell-page-flow-spacer, 0);\n  background: var(--color-background-primary);\n}\n\n.shell-page__content {\n  min-width: 0;\n  box-sizing: border-box;\n  background: var(--color-background-primary);\n}\n\n:host(.shell-page-host--inset-default) .shell-page__content {\n  padding: var(--dimension-space-400) var(--dimension-space-400) var(--dimension-space-800);\n}\n\n:host(.shell-page-host--inset-default[responsive-mode='tablet']) .shell-page__content,\n:host(.shell-page-host--inset-default[responsive-mode='mobile']) .shell-page__content {\n  padding: var(--dimension-space-200) var(--dimension-space-200) var(--dimension-space-800);\n}\n\n:host(.shell-page-host--inset-none) .shell-page__content {\n  padding: 0;\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport type { ShellResponsiveMode } from '../../shell/shell-responsive';\nimport { resolveCssLengthPx } from '../../utils/resolve-css-length-px';\nimport type { BarTitleVariant } from '../BarTitle/bar-title-types';\nimport { resolveShellPageHeaderVariant } from './shell-page-responsive';\nimport type {\n  ShellPageCapacity,\n  ShellPageContentInset,\n  ShellPageHeaderPresentation,\n} from './shell-page-types';\n\ntype BarTitleElement = HTMLElement & { variant: BarTitleVariant };\n\n@Component({\n  tag: 'ds-shell-page',\n  styleUrl: 'ShellPage.css',\n  scoped: true,\n})\nexport class ShellPage {\n  private static readonly MAX_HEADER_REVEAL_FRAMES = 12;\n  private static readonly MAX_HEADER_GEOMETRY_FRAMES = 12;\n\n  @Element() el!: HTMLElement;\n\n  /** Automatic capacity/scroll behavior, or an explicit header variant override. */\n  @Prop() headerPresentation: ShellPageHeaderPresentation = 'auto';\n\n  /** Available page-header capacity supplied by the owning application shell. */\n  @Prop() headerCapacity?: ShellPageCapacity;\n\n  /** Standard page gutters, or no inset for full-bleed page content. */\n  @Prop() contentInset: ShellPageContentInset = 'default';\n\n  /** Explicit shell breakpoint presentation. Mobile uses the dedicated mobile-header slot. */\n  @Prop({ attribute: 'responsive-mode', reflect: true })\n  responsiveMode: ShellResponsiveMode = 'desktop';\n\n  @State() private pageTopVisible = true;\n\n  private sentinelEl: HTMLElement | null = null;\n  private spacerEl: HTMLElement | null = null;\n  private stickyHeaderEl: HTMLElement | null = null;\n  private headerEl: BarTitleElement | null = null;\n  private expandedHeaderHeight = 0;\n  private headerTravel = 0;\n  private expandedGeometryFrozen = false;\n  private headerResizeObserver: ResizeObserver | null = null;\n  private headerMutationObserver: MutationObserver | null = null;\n  private headerRevealFrame: number | null = null;\n  private headerGeometryFrame: number | null = null;\n  private scrollRoot: HTMLElement | Window | null = null;\n\n  @Watch('headerCapacity')\n  @Watch('headerPresentation')\n  handleHeaderContractChange() {\n    this.syncHeaderVariant(true);\n  }\n\n  @Watch('responsiveMode')\n  handleResponsiveModeChange() {\n    this.observeHeader(this.responsiveMode === 'mobile' ? null : this.findHeader());\n  }\n\n  componentDidLoad() {\n    this.observeHeader(this.responsiveMode === 'mobile' ? null : this.findHeader());\n    this.connectScrollRoot();\n  }\n\n  componentDidRender() {\n    this.syncHeaderVariant();\n  }\n\n  disconnectedCallback() {\n    this.headerResizeObserver?.disconnect();\n    this.headerResizeObserver = null;\n    this.headerMutationObserver?.disconnect();\n    this.headerMutationObserver = null;\n    this.cancelHeaderReveal();\n    this.cancelHeaderGeometrySync();\n    this.headerEl?.style.removeProperty('--ds-bar-title-divider-inset');\n    this.scrollRoot?.removeEventListener('scroll', this.handleScroll);\n    this.scrollRoot = null;\n  }\n\n  private get effectiveVariant(): BarTitleVariant {\n    return resolveShellPageHeaderVariant(\n      this.headerPresentation,\n      this.headerCapacity ?? 'roomy',\n      this.pageTopVisible\n    );\n  }\n\n  private get headerContractResolved(): boolean {\n    return this.headerPresentation !== 'auto' || this.headerCapacity !== undefined;\n  }\n\n  private get isScrollCompacted(): boolean {\n    return (\n      this.headerPresentation === 'auto' && this.headerCapacity === 'roomy' && !this.pageTopVisible\n    );\n  }\n\n  private composedParent(element: Element): Element | null {\n    return (element as HTMLElement).assignedSlot?.parentElement ?? element.parentElement;\n  }\n\n  private findScrollRoot(): HTMLElement | Window {\n    let ancestor = this.composedParent(this.el);\n    while (ancestor && ancestor !== document.documentElement) {\n      const overflow = getComputedStyle(ancestor).overflowY;\n      if (overflow === 'auto' || overflow === 'scroll' || overflow === 'overlay') {\n        return ancestor as HTMLElement;\n      }\n      ancestor = this.composedParent(ancestor);\n    }\n    return window;\n  }\n\n  private connectScrollRoot() {\n    const next = this.findScrollRoot();\n    if (next === this.scrollRoot) return;\n    this.scrollRoot?.removeEventListener('scroll', this.handleScroll);\n    this.scrollRoot = next;\n    this.scrollRoot.addEventListener('scroll', this.handleScroll, { passive: true });\n    this.handleScroll();\n  }\n\n  private handleScroll = () => {\n    if (!this.sentinelEl || !this.scrollRoot) return;\n    const rootTop =\n      this.scrollRoot === window ? 0 : (this.scrollRoot as HTMLElement).getBoundingClientRect().top;\n    this.syncHeaderDividerInset(rootTop);\n    const nextPageTopVisible = this.sentinelEl.getBoundingClientRect().top >= rootTop;\n    if (\n      !nextPageTopVisible &&\n      this.pageTopVisible &&\n      this.headerEl?.classList.contains(this.variantClass('expanded'))\n    ) {\n      this.captureExpandedHeaderGeometry(this.headerEl);\n      this.expandedGeometryFrozen = true;\n    }\n    if (\n      nextPageTopVisible &&\n      this.expandedGeometryFrozen &&\n      this.el.getBoundingClientRect().top >= rootTop\n    ) {\n      this.expandedGeometryFrozen = false;\n      if (this.headerEl?.classList.contains(this.variantClass('expanded'))) {\n        this.captureExpandedHeaderGeometry(this.headerEl);\n      }\n    }\n    this.pageTopVisible = nextPageTopVisible;\n  };\n\n  private findHeader(): BarTitleElement | null {\n    return this.el.querySelector<BarTitleElement>('ds-bar-title');\n  }\n\n  private get compactHeaderHeight(): number {\n    return resolveCssLengthPx('--dimension-size-600', 0);\n  }\n\n  private syncHeaderDividerInset(rootTop?: number) {\n    const header = this.headerEl;\n    if (!header) return;\n\n    const ownsScrollTransition =\n      this.headerPresentation === 'auto' && this.headerCapacity === 'roomy';\n    const expandedInset = resolveCssLengthPx('--dimension-space-400', 0);\n    if (\n      !ownsScrollTransition ||\n      !this.sentinelEl ||\n      !this.scrollRoot ||\n      this.headerTravel <= 0 ||\n      expandedInset <= 0\n    ) {\n      header.style.removeProperty('--ds-bar-title-divider-inset');\n      return;\n    }\n\n    const scrollRootTop =\n      rootTop ??\n      (this.scrollRoot === window\n        ? 0\n        : (this.scrollRoot as HTMLElement).getBoundingClientRect().top);\n    const remainingTravel = this.sentinelEl.getBoundingClientRect().top - scrollRootTop;\n    const progress = Math.min(1, Math.max(0, 1 - remainingTravel / this.headerTravel));\n    header.style.setProperty('--ds-bar-title-divider-inset', `${expandedInset * (1 - progress)}px`);\n  }\n\n  private setHeaderTravel(distance: number) {\n    const next = Math.max(0, distance);\n    if (Math.abs(next - this.headerTravel) < 0.5) return;\n    this.headerTravel = next;\n    this.el.style.setProperty('--ds-shell-page-header-travel', `${next}px`);\n    this.handleScroll();\n  }\n\n  private measureHeaderTravel(header: BarTitleElement) {\n    const anchor = header.querySelector<HTMLElement>('[data-shell-page-header-anchor]');\n    const compactHeight = this.compactHeaderHeight;\n    if (!anchor || compactHeight <= 0) return;\n\n    const headerRect = header.getBoundingClientRect();\n    const anchorRect = anchor.getBoundingClientRect();\n    if (headerRect.height <= 0 || anchorRect.height <= 0) return;\n\n    const expandedAnchorTop = anchorRect.top - headerRect.top;\n    const compactAnchorTop = Math.max(0, (compactHeight - anchorRect.height) / 2);\n    this.setHeaderTravel(expandedAnchorTop - compactAnchorTop);\n  }\n\n  private captureExpandedHeaderGeometry(header: BarTitleElement) {\n    this.expandedHeaderHeight = header.getBoundingClientRect().height;\n    this.measureHeaderTravel(header);\n  }\n\n  private setSpacerHeight(height: number) {\n    if (!this.spacerEl) return;\n    this.spacerEl.style.setProperty('--ds-shell-page-flow-spacer', `${Math.max(0, height)}px`);\n  }\n\n  private variantClass(variant: BarTitleVariant): string {\n    return `bar-title-host--${variant}`;\n  }\n\n  private setStickyHeaderOffset(renderedVariant: BarTitleVariant) {\n    this.stickyHeaderEl?.style.setProperty(\n      '--ds-shell-page-sticky-offset',\n      renderedVariant === 'expanded' &&\n        this.headerPresentation === 'auto' &&\n        this.headerCapacity === 'roomy'\n        ? `${-this.headerTravel}px`\n        : '0px'\n    );\n  }\n\n  private syncRenderedHeaderGeometry(header: BarTitleElement) {\n    const renderedVariant = this.effectiveVariant;\n    if (!header.classList.contains(this.variantClass(renderedVariant))) return;\n\n    // Update both flow-preservation pieces before reading layout. Otherwise a\n    // reverse compact → expanded render can briefly contain the tall header and\n    // the compact spacer together, giving browser scroll anchoring a transient\n    // height change to compensate.\n    this.setSpacerHeight(\n      this.isScrollCompacted ? this.expandedHeaderHeight - this.compactHeaderHeight : 0\n    );\n    this.setStickyHeaderOffset(renderedVariant);\n\n    if (renderedVariant === 'expanded' && !this.expandedGeometryFrozen) {\n      this.captureExpandedHeaderGeometry(header);\n      this.setStickyHeaderOffset(renderedVariant);\n    }\n  }\n\n  private cancelHeaderGeometrySync() {\n    if (this.headerGeometryFrame !== null) cancelAnimationFrame(this.headerGeometryFrame);\n    this.headerGeometryFrame = null;\n  }\n\n  private scheduleHeaderGeometrySync(header: BarTitleElement) {\n    this.cancelHeaderGeometrySync();\n    let framesRemaining = ShellPage.MAX_HEADER_GEOMETRY_FRAMES;\n    let framesElapsed = 0;\n    const sync = () => {\n      if (this.headerEl !== header) return;\n      framesRemaining -= 1;\n      framesElapsed += 1;\n      // In WebKit a child's componentDidLoad can precede its assignment into\n      // the parent's rendered slot. Revalidate after ShellApp has had a frame\n      // to expose the actual content scroller.\n      this.connectScrollRoot();\n      this.syncRenderedHeaderGeometry(header);\n      const geometryReady =\n        this.effectiveVariant !== 'expanded' ||\n        (this.expandedHeaderHeight > 0 && this.headerTravel > 0);\n      if ((geometryReady && framesElapsed >= 2) || framesRemaining <= 0) {\n        this.headerGeometryFrame = null;\n        return;\n      }\n      this.headerGeometryFrame = requestAnimationFrame(sync);\n    };\n    this.headerGeometryFrame = requestAnimationFrame(sync);\n  }\n\n  private cancelHeaderReveal() {\n    if (this.headerRevealFrame !== null) cancelAnimationFrame(this.headerRevealFrame);\n    this.headerRevealFrame = null;\n    this.headerEl?.removeAttribute('data-shell-page-syncing');\n  }\n\n  private revealHeaderWhenSynced(header: BarTitleElement, variant: BarTitleVariant) {\n    // Stencil normally re-renders within a frame or two of a prop change. Stop\n    // polling at the cap, but fail closed: a stale variant must never paint.\n    let framesRemaining = ShellPage.MAX_HEADER_REVEAL_FRAMES;\n    const reveal = () => {\n      if (this.headerEl !== header) {\n        header.removeAttribute('data-shell-page-syncing');\n        return;\n      }\n      framesRemaining -= 1;\n      if (header.classList.contains(this.variantClass(variant))) {\n        header.removeAttribute('data-shell-page-syncing');\n        this.headerRevealFrame = null;\n        return;\n      }\n      if (framesRemaining <= 0) {\n        this.headerRevealFrame = null;\n        return;\n      }\n      this.headerRevealFrame = requestAnimationFrame(reveal);\n    };\n    this.headerRevealFrame = requestAnimationFrame(reveal);\n  }\n\n  private syncHeaderVariant(concealUntilSynced = false) {\n    const header = this.headerEl;\n    if (!header) return;\n\n    this.syncHeaderDividerInset();\n    if (!this.headerContractResolved) {\n      this.cancelHeaderReveal();\n      header.setAttribute('data-shell-page-syncing', '');\n      return;\n    }\n\n    const next = this.effectiveVariant;\n    const renderedVariantIsStale = !header.classList.contains(this.variantClass(next));\n    if (!renderedVariantIsStale) this.syncRenderedHeaderGeometry(header);\n    if (concealUntilSynced) {\n      this.cancelHeaderReveal();\n      header.setAttribute('data-shell-page-syncing', '');\n    }\n    if (header.variant !== next) header.variant = next;\n    if (concealUntilSynced) {\n      this.revealHeaderWhenSynced(header, next);\n    }\n  }\n\n  private observeHeader(header: BarTitleElement | null) {\n    this.cancelHeaderReveal();\n    this.cancelHeaderGeometrySync();\n    this.headerResizeObserver?.disconnect();\n    this.headerResizeObserver = null;\n    this.headerMutationObserver?.disconnect();\n    this.headerMutationObserver = null;\n    this.headerEl?.style.removeProperty('--ds-bar-title-divider-inset');\n    this.headerEl = header;\n    this.expandedHeaderHeight = 0;\n    this.expandedGeometryFrozen = false;\n    this.setHeaderTravel(0);\n    this.setSpacerHeight(0);\n    this.stickyHeaderEl?.style.setProperty('--ds-shell-page-sticky-offset', '0px');\n\n    if (!header) return;\n    if (header.classList.contains(this.variantClass('expanded'))) {\n      this.captureExpandedHeaderGeometry(header);\n    }\n    if (typeof ResizeObserver !== 'undefined') {\n      this.headerResizeObserver = new ResizeObserver(() => {\n        this.syncRenderedHeaderGeometry(header);\n      });\n      this.headerResizeObserver.observe(header);\n    }\n    if (typeof MutationObserver !== 'undefined') {\n      this.headerMutationObserver = new MutationObserver(() => {\n        this.syncRenderedHeaderGeometry(header);\n      });\n      this.headerMutationObserver.observe(header, {\n        attributes: true,\n        attributeFilter: ['class'],\n      });\n    }\n    this.syncHeaderVariant(true);\n    this.scheduleHeaderGeometrySync(header);\n  }\n\n  private handleHeaderSlotChange = (event: Event) => {\n    if (this.responsiveMode === 'mobile') return;\n    const slot = event.target as HTMLSlotElement;\n    const header = slot\n      .assignedElements()\n      .find(element => element.tagName.toLowerCase() === 'ds-bar-title');\n    this.observeHeader((header as BarTitleElement | undefined) ?? null);\n  };\n\n  render() {\n    const mobile = this.responsiveMode === 'mobile';\n    return (\n      <Host\n        role=\"main\"\n        class={{\n          'shell-page-host--inset-default': this.contentInset === 'default',\n          'shell-page-host--inset-none': this.contentInset === 'none',\n          'shell-page-host--mobile': mobile,\n          [`shell-page-host--header-${this.effectiveVariant}`]: true,\n        }}\n      >\n        <div\n          ref={el => {\n            this.sentinelEl = el ?? null;\n          }}\n          class=\"shell-page__scroll-sentinel\"\n          aria-hidden=\"true\"\n        />\n        <div\n          ref={el => {\n            this.stickyHeaderEl = el ?? null;\n          }}\n          class=\"shell-page__sticky-header\"\n        >\n          <div\n            class=\"shell-page__desktop-header\"\n            hidden={mobile}\n            aria-hidden={mobile ? 'true' : undefined}\n            inert={mobile ? true : undefined}\n          >\n            <slot name=\"header\" onSlotchange={this.handleHeaderSlotChange} />\n          </div>\n          <div\n            class=\"shell-page__mobile-header\"\n            hidden={!mobile}\n            aria-hidden={!mobile ? 'true' : undefined}\n            inert={!mobile ? true : undefined}\n          >\n            <slot name=\"mobile-header\" />\n          </div>\n        </div>\n        <div\n          ref={el => {\n            this.spacerEl = el ?? null;\n          }}\n          class=\"shell-page__flow-spacer\"\n          aria-hidden=\"true\"\n        />\n        <div class=\"shell-page__content\">\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}