@ds-mo/ui 2.4.0 → 2.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/dist/.build-stamp +1 -1
  2. package/dist/components/ds-app-shell.js +1 -1
  3. package/dist/components/ds-app-shell.js.map +1 -1
  4. package/dist/components/ds-panel-tools.js +1 -1
  5. package/dist/components/ds-panel-tools.js.map +1 -1
  6. package/dist/types/components/AppShell/AppShell.d.ts +1 -1
  7. package/dist/types/components/PanelTools/PanelTools.d.ts +1 -1
  8. package/dist/types/components.d.ts +3 -3
  9. package/dist/types/nav/shell-shortcuts.d.ts +4 -4
  10. package/package.json +1 -1
  11. package/src/wc/components/AppShell/AppShell.tsx +1 -1
  12. package/src/wc/components/PanelTools/PanelTools.tsx +1 -1
  13. package/src/wc/components.d.ts +3 -3
  14. package/src/wc/nav/shell-shortcuts.ts +6 -6
package/dist/.build-stamp CHANGED
@@ -1 +1 @@
1
- 1783375791678
1
+ 1783376695366
package/dist/components/ds-app-shell.js CHANGED
@@ -1,2 +1,2 @@
1
- import{p as e,H as s,h as t,a as n,t as i}from"./index.js";import{C as l,c as a,r as o,a as r,b as h}from"./p-BiM6QBTF.js";const c={k:"search",a:"agents",s:"stacks",m:"messages",n:"activity"};function p(e){return(e.metaKey||e.ctrlKey)&&!e.altKey&&!e.shiftKey}function d(e){if(!e||typeof e!=="object")return false;if(!("closest"in e)||typeof e.closest!=="function")return false;const s=e;const t=s.closest('input, textarea, select, [contenteditable=""], [contenteditable="true"], [contenteditable="plaintext-only"]');if(t)return true;const n=s.getAttribute("role");if(n==="textbox"||n==="combobox"||n==="searchbox")return true;return Boolean(s.isContentEditable)}function u(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 f(e){if(!p(e))return null;const s=u(e);if(s==="[")return"toggle-panel-nav";if(s==="]")return"close-panel-tools";const t=c[s];if(t)return`open-tool:${t}`;return null}const g="--ds-shell-gradient-image";const b="--ds-shell-gradient-size";const m="--ds-shell-gradient-position-panel";const v="--ds-shell-gradient-position-bar";const _="--ds-shell-gradient-opacity";const y="0.1";const x="100% 100% at 0% 0%";function w(){return`radial-gradient(${x}, var(--color-background-transparent) 0%, var(--color-color-intent-blue-strong-background) 100%)`}function k(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 z(e){return`${Math.round(e.width)}px ${Math.round(e.height)}px`}function S(){return"0 0"}function P(e){return`${-Math.round(e)}px 0`}function C(e,s){if(typeof document==="undefined")return 0;const t=document.createElement("div");t.style.cssText="position:absolute;visibility:hidden;pointer-events:none;height:0;width:var("+s+");";e.appendChild(t);const n=t.getBoundingClientRect().width;e.removeChild(t);return n}function M(e){return{expandedPx:C(e,"--_nav-width"),collapsedPx:C(e,"--_nav-width-collapsed")}}function $(e,s){if(s?.classList.contains("panel-nav--collapsed"))return true;const t=e?.collapsed;return t===true}function L(e,s){return s?e.collapsedPx:e.expandedPx}const V=()=>`.sc-ds-app-shell-h{display:block;height:100%;min-height:0;box-sizing:border-box}.app-shell.sc-ds-app-shell{display:flex;flex-direction:column;height:100%;min-height:0;box-sizing:border-box;font-family:var(--typography-font-family, system-ui)}.app-shell--gradient.sc-ds-app-shell-h,.app-shell--grid.sc-ds-app-shell-h{--_shell-chrome-bg:var(--color-background-secondary)}.app-shell--grid.sc-ds-app-shell-h{--_shell-chrome-grid-cell:var(--dimension-size-050);--_shell-chrome-grid-stroke:var(--dimension-stroke-width-012);--_shell-chrome-grid-line:var(--color-foreground-quaternary);--_shell-chrome-grid-opacity:0.1}.app-shell__row.sc-ds-app-shell{display:flex;flex:1 1 auto;min-height:0;height:100%;position:relative}.app-shell__chrome.sc-ds-app-shell{position:absolute;inset:0;pointer-events:none;z-index:0}.app-shell--gradient.sc-ds-app-shell-h .app-shell__chrome.sc-ds-app-shell,.app-shell--grid.sc-ds-app-shell-h .app-shell__chrome.sc-ds-app-shell{background-color:var(--_shell-chrome-bg)}.app-shell--gradient.sc-ds-app-shell-h .app-shell__chrome.sc-ds-app-shell::before,.app-shell--grid.sc-ds-app-shell-h .app-shell__chrome.sc-ds-app-shell::after{content:'';position:absolute;inset:0;pointer-events:none;background-position:0 0;background-attachment:fixed}.app-shell--gradient.sc-ds-app-shell-h .app-shell__chrome.sc-ds-app-shell::before{z-index:1;opacity:var(--ds-shell-gradient-opacity, 1);background-image:var(--ds-shell-gradient-image, none);background-size:var(--ds-shell-gradient-size, auto);background-repeat:no-repeat}.app-shell--grid.sc-ds-app-shell-h .app-shell__chrome.sc-ds-app-shell::after{z-index:2;opacity:var(--_shell-chrome-grid-opacity);background-image:repeating-linear-gradient( 120deg, var(--_shell-chrome-grid-line) 0, var(--_shell-chrome-grid-line) var(--_shell-chrome-grid-stroke), transparent var(--_shell-chrome-grid-stroke), transparent var(--_shell-chrome-grid-cell) )}.app-shell__panel.sc-ds-app-shell{flex:0 0 auto;min-height:0;height:100%;position:relative;z-index:2}.app-shell__panel.sc-ds-app-shell-s>ds-panel-nav,.app-shell__panel .sc-ds-app-shell-s>ds-panel-nav{display:block;height:100%}.app-shell__main.sc-ds-app-shell{flex:1 1 auto;min-width:0;min-height:0;display:grid;grid-template-columns:minmax(0, 1fr) auto;grid-template-rows:auto minmax(0, 1fr);grid-template-areas:'bar tools' 'content tools';position:relative;z-index:1}.app-shell__bar.sc-ds-app-shell{grid-area:bar;flex:0 0 auto;min-width:0}.app-shell__bar.sc-ds-app-shell-s>ds-bar-nav,.app-shell__bar .sc-ds-app-shell-s>ds-bar-nav{display:block}.app-shell__content.sc-ds-app-shell{grid-area:content;flex:1 1 auto;min-width:0;min-height:0;overflow:auto;contain:layout}.app-shell--gradient.sc-ds-app-shell-h .app-shell__content.sc-ds-app-shell,.app-shell--grid.sc-ds-app-shell-h .app-shell__content.sc-ds-app-shell{position:relative;z-index:1;background-color:var(--color-background-primary)}.app-shell__tools.sc-ds-app-shell{grid-area:tools;flex:0 0 auto;min-width:0;min-height:0;height:100%;display:flex;position:relative;z-index:0;overflow:hidden}.app-shell__tools.sc-ds-app-shell-s>ds-panel-tools,.app-shell__tools .sc-ds-app-shell-s>ds-panel-tools{display:block;height:100%;min-height:0}`;const B=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.navStyle="dashboard";this.gradient=false;this.grid=false;this.gradientSrc="";this.shortcutsEnabled=true;this.resizeObserver=null;this.panelNavTransition=new l;this.chromeSyncCoalescer=a((()=>this.syncChrome()));this.panelWidthTokens={expandedPx:0,collapsedPx:0};this.cachedViewportWidth=0;this.cachedViewportHeight=0;this.onWindowResize=()=>{if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()};this.onVisualViewportChange=()=>{if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()};this.onChromeTransitionStart=e=>{if(o(e)!=="panel-nav")return;this.panelNavTransition.enter();const s=k();this.cachedViewportWidth=s.width;this.cachedViewportHeight=s.height;this.syncChrome()};this.onChromeTransitionEnd=e=>{if(o(e)!=="panel-nav")return;this.panelNavTransition.exit();if(!this.panelNavTransition.isActive){this.scheduleChromeSync()}}}componentDidLoad(){this.syncSlottedNavStyle();this.connectMetricsObserver();this.connectViewportListeners();this.el.addEventListener(r,this.onChromeTransitionStart);this.el.addEventListener(h,this.onChromeTransitionEnd);requestAnimationFrame((()=>{this.cachePanelWidthTokens();this.scheduleChromeSync()}))}disconnectedCallback(){this.resizeObserver?.disconnect();this.resizeObserver=null;this.disconnectViewportListeners();this.chromeSyncCoalescer.cancel();this.el.removeEventListener(r,this.onChromeTransitionStart);this.el.removeEventListener(h,this.onChromeTransitionEnd)}onShellPropsChange(){this.syncSlottedNavStyle();this.scheduleChromeSync()}scheduleChromeSync(){this.chromeSyncCoalescer.schedule()}syncSlottedNavStyle(){const e=this.el.querySelector("ds-panel-nav");const s=this.el.querySelector("ds-bar-nav");if(e){e.setAttribute("nav-style",this.navStyle);e.navStyle=this.navStyle}if(s){s.setAttribute("nav-style",this.navStyle);s.navStyle=this.navStyle}}connectMetricsObserver(){this.resizeObserver=new ResizeObserver((()=>{if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()}));this.resizeObserver.observe(this.el);const e=this.el.querySelector(".app-shell__panel");if(e)this.resizeObserver.observe(e)}connectViewportListeners(){if(typeof window==="undefined")return;window.addEventListener("resize",this.onWindowResize,{passive:true});const e=window.visualViewport;if(e){e.addEventListener("resize",this.onVisualViewportChange,{passive:true});e.addEventListener("scroll",this.onVisualViewportChange,{passive:true})}}disconnectViewportListeners(){if(typeof window==="undefined")return;window.removeEventListener("resize",this.onWindowResize);const e=window.visualViewport;if(e){e.removeEventListener("resize",this.onVisualViewportChange);e.removeEventListener("scroll",this.onVisualViewportChange)}}cachePanelWidthTokens(){const e=this.el.querySelector("ds-panel-nav .panel-nav");if(!e)return;this.panelWidthTokens=M(e)}applyGradientVars(e,s){const t=e.style;for(const[e,n]of Object.entries(s)){if(n===null)t.removeProperty(e);else t.setProperty(e,n)}}clearGradientPaintVars(e){const s=[g,b,_];for(const t of e){for(const e of s)t.style.removeProperty(e)}}syncChromeLayoutVars(e,s,t,n){if(e){e.style.setProperty(m,t)}if(s){s.style.setProperty(v,n)}}resolvePanelWidthPx(e){const s=e?.querySelector(".panel-nav");if(this.panelNavTransition.isActive&&this.panelWidthTokens.expandedPx>0){const t=$(e,s);return L(this.panelWidthTokens,t)}const t=this.el.querySelector(".app-shell__panel");const n=t?.getBoundingClientRect().width??0;if(n>0)return n;if(this.panelWidthTokens.expandedPx>0){const t=$(e,s);return L(this.panelWidthTokens,t)}return 0}resolveViewportDimensions(){if(this.panelNavTransition.isActive&&this.cachedViewportWidth>0){return{width:this.cachedViewportWidth,height:this.cachedViewportHeight}}return k()}chromeLayerActive(){return this.gradient||this.grid}handleWindowKeyDown(e){if(!this.shortcutsEnabled)return;if(d(e.target))return;const s=f(e);if(!s)return;e.preventDefault();const t=this.el.querySelector("ds-panel-nav");const n=this.el.querySelector("ds-panel-tools");if(s==="toggle-panel-nav"){void t?.toggleCollapsed();return}if(s==="close-panel-tools"){void n?.closeDrawer();return}if(s.startsWith("open-tool:")&&n){const e=s.slice("open-tool:".length);void n.activateTool(e)}}syncChrome(){const e=this.el.querySelector("ds-panel-nav");const s=this.el.querySelector("ds-bar-nav");const t=[this.el,e,s].filter((e=>e!==null));const n=()=>{if(e)e.style.removeProperty(m);if(s)s.style.removeProperty(v)};if(!this.chromeLayerActive()){this.clearGradientPaintVars(t);n();return}if(!this.gradient){this.clearGradientPaintVars(t);n();return}const i=this.resolveViewportDimensions();const l=this.resolvePanelWidthPx(e);const a=S();const o=P(l);this.syncChromeLayoutVars(e,s,a,o);const r=this.gradientSrc.trim()?`url(${this.gradientSrc.trim()})`:w();const h=z({width:i.width,height:i.height});const c=y;for(const e of t){if(e===this.el){this.applyGradientVars(e,{[g]:r,[b]:h,[m]:a,[v]:o,[_]:c});continue}const s=e.tagName.toLowerCase()==="ds-bar-nav";this.applyGradientVars(e,{[g]:r,[b]:h,[_]:c,[m]:s?null:a,[v]:s?o:null})}}render(){const e=this.chromeLayerActive();const s={"app-shell":true,"app-shell--gradient":this.gradient,"app-shell--grid":this.grid,[`app-shell--${this.navStyle}`]:true};return t(n,{key:"dc16dcaf5994e45724a815047a7b3604ee71e751",class:s},t("div",{key:"a339a691b89ae01209f364a0ed322ac43761761b",class:"app-shell__row"},e?t("div",{class:"app-shell__chrome","aria-hidden":"true"}):null,t("div",{key:"c52737dd640af567c1640af988f45700c8f7633e",class:"app-shell__panel"},t("slot",{key:"d4860907bd34030bf4b34a1a1d1acb0a46c8424c",name:"panel"})),t("div",{key:"c7559b7f7c1d2d0c79b106fee6161b77c2e47efe",class:"app-shell__main"},t("div",{key:"d0959b13127d859931c82e45f2d163a94b896d70",class:"app-shell__bar"},t("slot",{key:"0c69d5ee98109347c78881616e28d7d5450fe0c4",name:"bar"})),t("div",{key:"4c7dce2f8eb8c1bcb456ed3dd9bbee7dc67f4584",class:"app-shell__tools"},t("slot",{key:"cc4729e3eb1f25907acba77654af51b840996005",name:"tools"})),t("div",{key:"7c5fba6dd3d29961d9dbb3dd4654c06c45b85ee6",class:"app-shell__content"},t("slot",{key:"f5ec97a3d84dec4f358231dac87914e5387cd883"})))))}get el(){return this}static get watchers(){return{navStyle:[{onShellPropsChange:0}],gradient:[{onShellPropsChange:0}],grid:[{onShellPropsChange:0}],gradientSrc:[{onShellPropsChange:0}]}}static get style(){return V()}},[262,"ds-app-shell",{navStyle:[513,"nav-style"],gradient:[516],grid:[516],gradientSrc:[1,"gradient-src"],shortcutsEnabled:[4,"shortcuts-enabled"]},[[10,"keydown","handleWindowKeyDown"]],{navStyle:[{onShellPropsChange:0}],gradient:[{onShellPropsChange:0}],grid:[{onShellPropsChange:0}],gradientSrc:[{onShellPropsChange:0}]}]);function j(){if(typeof customElements==="undefined"){return}const e=["ds-app-shell"];e.forEach((e=>{switch(e){case"ds-app-shell":if(!customElements.get(i(e))){customElements.define(i(e),B)}break}}))}j();const D=B;const E=j;export{D as DsAppShell,E as defineCustomElement};
1
+ import{p as e,H as s,h as t,a as n,t as i}from"./index.js";import{C as l,c as a,r as o,a as r,b as h}from"./p-BiM6QBTF.js";const c={k:"search",a:"agents",s:"stacks",m:"messages",n:"activity"};function p(e){return!e.metaKey&&!e.ctrlKey&&!e.altKey&&!e.shiftKey}function d(e){if(!e||typeof e!=="object")return false;if(!("closest"in e)||typeof e.closest!=="function")return false;const s=e;const t=s.closest('input, textarea, select, [contenteditable=""], [contenteditable="true"], [contenteditable="plaintext-only"]');if(t)return true;const n=s.getAttribute("role");if(n==="textbox"||n==="combobox"||n==="searchbox")return true;return Boolean(s.isContentEditable)}function f(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 u(e){if(!p(e))return null;const s=f(e);if(s==="[")return"toggle-panel-nav";if(s==="]")return"close-panel-tools";const t=c[s];if(t)return`open-tool:${t}`;return null}const g="--ds-shell-gradient-image";const b="--ds-shell-gradient-size";const m="--ds-shell-gradient-position-panel";const v="--ds-shell-gradient-position-bar";const _="--ds-shell-gradient-opacity";const y="0.1";const x="100% 100% at 0% 0%";function w(){return`radial-gradient(${x}, var(--color-background-transparent) 0%, var(--color-color-intent-blue-strong-background) 100%)`}function k(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 z(e){return`${Math.round(e.width)}px ${Math.round(e.height)}px`}function S(){return"0 0"}function P(e){return`${-Math.round(e)}px 0`}function C(e,s){if(typeof document==="undefined")return 0;const t=document.createElement("div");t.style.cssText="position:absolute;visibility:hidden;pointer-events:none;height:0;width:var("+s+");";e.appendChild(t);const n=t.getBoundingClientRect().width;e.removeChild(t);return n}function M(e){return{expandedPx:C(e,"--_nav-width"),collapsedPx:C(e,"--_nav-width-collapsed")}}function $(e,s){if(s?.classList.contains("panel-nav--collapsed"))return true;const t=e?.collapsed;return t===true}function L(e,s){return s?e.collapsedPx:e.expandedPx}const V=()=>`.sc-ds-app-shell-h{display:block;height:100%;min-height:0;box-sizing:border-box}.app-shell.sc-ds-app-shell{display:flex;flex-direction:column;height:100%;min-height:0;box-sizing:border-box;font-family:var(--typography-font-family, system-ui)}.app-shell--gradient.sc-ds-app-shell-h,.app-shell--grid.sc-ds-app-shell-h{--_shell-chrome-bg:var(--color-background-secondary)}.app-shell--grid.sc-ds-app-shell-h{--_shell-chrome-grid-cell:var(--dimension-size-050);--_shell-chrome-grid-stroke:var(--dimension-stroke-width-012);--_shell-chrome-grid-line:var(--color-foreground-quaternary);--_shell-chrome-grid-opacity:0.1}.app-shell__row.sc-ds-app-shell{display:flex;flex:1 1 auto;min-height:0;height:100%;position:relative}.app-shell__chrome.sc-ds-app-shell{position:absolute;inset:0;pointer-events:none;z-index:0}.app-shell--gradient.sc-ds-app-shell-h .app-shell__chrome.sc-ds-app-shell,.app-shell--grid.sc-ds-app-shell-h .app-shell__chrome.sc-ds-app-shell{background-color:var(--_shell-chrome-bg)}.app-shell--gradient.sc-ds-app-shell-h .app-shell__chrome.sc-ds-app-shell::before,.app-shell--grid.sc-ds-app-shell-h .app-shell__chrome.sc-ds-app-shell::after{content:'';position:absolute;inset:0;pointer-events:none;background-position:0 0;background-attachment:fixed}.app-shell--gradient.sc-ds-app-shell-h .app-shell__chrome.sc-ds-app-shell::before{z-index:1;opacity:var(--ds-shell-gradient-opacity, 1);background-image:var(--ds-shell-gradient-image, none);background-size:var(--ds-shell-gradient-size, auto);background-repeat:no-repeat}.app-shell--grid.sc-ds-app-shell-h .app-shell__chrome.sc-ds-app-shell::after{z-index:2;opacity:var(--_shell-chrome-grid-opacity);background-image:repeating-linear-gradient( 120deg, var(--_shell-chrome-grid-line) 0, var(--_shell-chrome-grid-line) var(--_shell-chrome-grid-stroke), transparent var(--_shell-chrome-grid-stroke), transparent var(--_shell-chrome-grid-cell) )}.app-shell__panel.sc-ds-app-shell{flex:0 0 auto;min-height:0;height:100%;position:relative;z-index:2}.app-shell__panel.sc-ds-app-shell-s>ds-panel-nav,.app-shell__panel .sc-ds-app-shell-s>ds-panel-nav{display:block;height:100%}.app-shell__main.sc-ds-app-shell{flex:1 1 auto;min-width:0;min-height:0;display:grid;grid-template-columns:minmax(0, 1fr) auto;grid-template-rows:auto minmax(0, 1fr);grid-template-areas:'bar tools' 'content tools';position:relative;z-index:1}.app-shell__bar.sc-ds-app-shell{grid-area:bar;flex:0 0 auto;min-width:0}.app-shell__bar.sc-ds-app-shell-s>ds-bar-nav,.app-shell__bar .sc-ds-app-shell-s>ds-bar-nav{display:block}.app-shell__content.sc-ds-app-shell{grid-area:content;flex:1 1 auto;min-width:0;min-height:0;overflow:auto;contain:layout}.app-shell--gradient.sc-ds-app-shell-h .app-shell__content.sc-ds-app-shell,.app-shell--grid.sc-ds-app-shell-h .app-shell__content.sc-ds-app-shell{position:relative;z-index:1;background-color:var(--color-background-primary)}.app-shell__tools.sc-ds-app-shell{grid-area:tools;flex:0 0 auto;min-width:0;min-height:0;height:100%;display:flex;position:relative;z-index:0;overflow:hidden}.app-shell__tools.sc-ds-app-shell-s>ds-panel-tools,.app-shell__tools .sc-ds-app-shell-s>ds-panel-tools{display:block;height:100%;min-height:0}`;const B=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.navStyle="dashboard";this.gradient=false;this.grid=false;this.gradientSrc="";this.shortcutsEnabled=true;this.resizeObserver=null;this.panelNavTransition=new l;this.chromeSyncCoalescer=a((()=>this.syncChrome()));this.panelWidthTokens={expandedPx:0,collapsedPx:0};this.cachedViewportWidth=0;this.cachedViewportHeight=0;this.onWindowResize=()=>{if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()};this.onVisualViewportChange=()=>{if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()};this.onChromeTransitionStart=e=>{if(o(e)!=="panel-nav")return;this.panelNavTransition.enter();const s=k();this.cachedViewportWidth=s.width;this.cachedViewportHeight=s.height;this.syncChrome()};this.onChromeTransitionEnd=e=>{if(o(e)!=="panel-nav")return;this.panelNavTransition.exit();if(!this.panelNavTransition.isActive){this.scheduleChromeSync()}}}componentDidLoad(){this.syncSlottedNavStyle();this.connectMetricsObserver();this.connectViewportListeners();this.el.addEventListener(r,this.onChromeTransitionStart);this.el.addEventListener(h,this.onChromeTransitionEnd);requestAnimationFrame((()=>{this.cachePanelWidthTokens();this.scheduleChromeSync()}))}disconnectedCallback(){this.resizeObserver?.disconnect();this.resizeObserver=null;this.disconnectViewportListeners();this.chromeSyncCoalescer.cancel();this.el.removeEventListener(r,this.onChromeTransitionStart);this.el.removeEventListener(h,this.onChromeTransitionEnd)}onShellPropsChange(){this.syncSlottedNavStyle();this.scheduleChromeSync()}scheduleChromeSync(){this.chromeSyncCoalescer.schedule()}syncSlottedNavStyle(){const e=this.el.querySelector("ds-panel-nav");const s=this.el.querySelector("ds-bar-nav");if(e){e.setAttribute("nav-style",this.navStyle);e.navStyle=this.navStyle}if(s){s.setAttribute("nav-style",this.navStyle);s.navStyle=this.navStyle}}connectMetricsObserver(){this.resizeObserver=new ResizeObserver((()=>{if(this.panelNavTransition.isActive)return;this.scheduleChromeSync()}));this.resizeObserver.observe(this.el);const e=this.el.querySelector(".app-shell__panel");if(e)this.resizeObserver.observe(e)}connectViewportListeners(){if(typeof window==="undefined")return;window.addEventListener("resize",this.onWindowResize,{passive:true});const e=window.visualViewport;if(e){e.addEventListener("resize",this.onVisualViewportChange,{passive:true});e.addEventListener("scroll",this.onVisualViewportChange,{passive:true})}}disconnectViewportListeners(){if(typeof window==="undefined")return;window.removeEventListener("resize",this.onWindowResize);const e=window.visualViewport;if(e){e.removeEventListener("resize",this.onVisualViewportChange);e.removeEventListener("scroll",this.onVisualViewportChange)}}cachePanelWidthTokens(){const e=this.el.querySelector("ds-panel-nav .panel-nav");if(!e)return;this.panelWidthTokens=M(e)}applyGradientVars(e,s){const t=e.style;for(const[e,n]of Object.entries(s)){if(n===null)t.removeProperty(e);else t.setProperty(e,n)}}clearGradientPaintVars(e){const s=[g,b,_];for(const t of e){for(const e of s)t.style.removeProperty(e)}}syncChromeLayoutVars(e,s,t,n){if(e){e.style.setProperty(m,t)}if(s){s.style.setProperty(v,n)}}resolvePanelWidthPx(e){const s=e?.querySelector(".panel-nav");if(this.panelNavTransition.isActive&&this.panelWidthTokens.expandedPx>0){const t=$(e,s);return L(this.panelWidthTokens,t)}const t=this.el.querySelector(".app-shell__panel");const n=t?.getBoundingClientRect().width??0;if(n>0)return n;if(this.panelWidthTokens.expandedPx>0){const t=$(e,s);return L(this.panelWidthTokens,t)}return 0}resolveViewportDimensions(){if(this.panelNavTransition.isActive&&this.cachedViewportWidth>0){return{width:this.cachedViewportWidth,height:this.cachedViewportHeight}}return k()}chromeLayerActive(){return this.gradient||this.grid}handleWindowKeyDown(e){if(!this.shortcutsEnabled)return;if(d(e.target))return;const s=u(e);if(!s)return;e.preventDefault();const t=this.el.querySelector("ds-panel-nav");const n=this.el.querySelector("ds-panel-tools");if(s==="toggle-panel-nav"){void t?.toggleCollapsed();return}if(s==="close-panel-tools"){void n?.closeDrawer();return}if(s.startsWith("open-tool:")&&n){const e=s.slice("open-tool:".length);void n.activateTool(e)}}syncChrome(){const e=this.el.querySelector("ds-panel-nav");const s=this.el.querySelector("ds-bar-nav");const t=[this.el,e,s].filter((e=>e!==null));const n=()=>{if(e)e.style.removeProperty(m);if(s)s.style.removeProperty(v)};if(!this.chromeLayerActive()){this.clearGradientPaintVars(t);n();return}if(!this.gradient){this.clearGradientPaintVars(t);n();return}const i=this.resolveViewportDimensions();const l=this.resolvePanelWidthPx(e);const a=S();const o=P(l);this.syncChromeLayoutVars(e,s,a,o);const r=this.gradientSrc.trim()?`url(${this.gradientSrc.trim()})`:w();const h=z({width:i.width,height:i.height});const c=y;for(const e of t){if(e===this.el){this.applyGradientVars(e,{[g]:r,[b]:h,[m]:a,[v]:o,[_]:c});continue}const s=e.tagName.toLowerCase()==="ds-bar-nav";this.applyGradientVars(e,{[g]:r,[b]:h,[_]:c,[m]:s?null:a,[v]:s?o:null})}}render(){const e=this.chromeLayerActive();const s={"app-shell":true,"app-shell--gradient":this.gradient,"app-shell--grid":this.grid,[`app-shell--${this.navStyle}`]:true};return t(n,{key:"23a41d0fc04f83ff3042bed994ba8fce8a99caf2",class:s},t("div",{key:"948d732daca7021ca6c451f99b9268418c62c7d4",class:"app-shell__row"},e?t("div",{class:"app-shell__chrome","aria-hidden":"true"}):null,t("div",{key:"8ccf2cd8cdfc539fe80253bfc8e29d2733cd9fb5",class:"app-shell__panel"},t("slot",{key:"c0bc1a9cb35d21fff66f2bd2ce1af2fad6e014e7",name:"panel"})),t("div",{key:"a92eac7478ec325bb511551662135750e31dc060",class:"app-shell__main"},t("div",{key:"eecda41a2a6235a533f501f95c06a23f5e182ab5",class:"app-shell__bar"},t("slot",{key:"c8008f87420137707e7a4187007c716f403a0f45",name:"bar"})),t("div",{key:"ace8662c61504e60aea6dcf91eb04ec8e37aa4fd",class:"app-shell__tools"},t("slot",{key:"340f9977bafa373b9431d40f050b7c1cca10d3ac",name:"tools"})),t("div",{key:"b39038df6e4dc1b6bde16c9bff115e921af959a1",class:"app-shell__content"},t("slot",{key:"8629ae9f312714bdaccea69dc0dbe602251fa72b"})))))}get el(){return this}static get watchers(){return{navStyle:[{onShellPropsChange:0}],gradient:[{onShellPropsChange:0}],grid:[{onShellPropsChange:0}],gradientSrc:[{onShellPropsChange:0}]}}static get style(){return V()}},[262,"ds-app-shell",{navStyle:[513,"nav-style"],gradient:[516],grid:[516],gradientSrc:[1,"gradient-src"],shortcutsEnabled:[4,"shortcuts-enabled"]},[[10,"keydown","handleWindowKeyDown"]],{navStyle:[{onShellPropsChange:0}],gradient:[{onShellPropsChange:0}],grid:[{onShellPropsChange:0}],gradientSrc:[{onShellPropsChange:0}]}]);function j(){if(typeof customElements==="undefined"){return}const e=["ds-app-shell"];e.forEach((e=>{switch(e){case"ds-app-shell":if(!customElements.get(i(e))){customElements.define(i(e),B)}break}}))}j();const D=B;const E=j;export{D as DsAppShell,E as defineCustomElement};
2
2
  //# sourceMappingURL=ds-app-shell.js.map
package/dist/components/ds-app-shell.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["TOOL_SHORTCUT_KEYS","k","a","s","m","n","isShellShortcutModifier","e","metaKey","ctrlKey","altKey","shiftKey","isEditableShortcutTarget","target","closest","el","editable","role","getAttribute","Boolean","isContentEditable","normalizedShortcutKey","key","code","length","toLowerCase","resolveShellShortcut","toolId","SHELL_GRADIENT_IMAGE_VAR","SHELL_GRADIENT_SIZE_VAR","SHELL_GRADIENT_POSITION_PANEL_VAR","SHELL_GRADIENT_POSITION_BAR_VAR","SHELL_GRADIENT_OPACITY_VAR","SHELL_GRADIENT_OPACITY","GRADIENT_GEOMETRY","buildShellRadialGradient","readShellViewportDimensions","win","w","globalThis","window","undefined","width","height","visual","visualViewport","Math","round","innerWidth","innerHeight","shellGradientSize","layout","shellGradientPositionPanel","shellGradientPositionBar","panelWidth","readCssVarWidthPx","context","cssVarName","document","probe","createElement","style","cssText","appendChild","getBoundingClientRect","removeChild","readPanelNavWidthTokens","navRoot","expandedPx","collapsedPx","isPanelNavCollapsed","panelNavHost","classList","contains","collapsedProp","collapsed","panelWidthPxFromTokens","tokens","appShellCss","AppShell","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","navStyle","gradient","grid","gradientSrc","shortcutsEnabled","resizeObserver","panelNavTransition","ChromeTransitionDepth","chromeSyncCoalescer","createRafCoalescer","syncChrome","panelWidthTokens","cachedViewportWidth","cachedViewportHeight","onWindowResize","isActive","scheduleChromeSync","onVisualViewportChange","onChromeTransitionStart","event","readChromeTransitionSource","enter","viewport","onChromeTransitionEnd","exit","componentDidLoad","syncSlottedNavStyle","connectMetricsObserver","connectViewportListeners","addEventListener","CHROME_TRANSITION_START","CHROME_TRANSITION_END","requestAnimationFrame","cachePanelWidthTokens","disconnectedCallback","disconnect","disconnectViewportListeners","cancel","removeEventListener","onShellPropsChange","schedule","panel","querySelector","bar","setAttribute","ResizeObserver","observe","panelWrap","passive","applyGradientVars","vars","name","value","Object","entries","removeProperty","setProperty","clearGradientPaintVars","targets","keys","syncChromeLayoutVars","panelPosition","barPosition","resolvePanelWidthPx","panelNav","measured","resolveViewportDimensions","chromeLayerActive","handleWindowKeyDown","action","preventDefault","tools","toggleCollapsed","closeDrawer","startsWith","slice","activateTool","filter","clearLayoutVars","image","trim","size","opacity","isBar","tagName","render","chromeActive","shellCls","h","Host","class"],"sources":["src/wc/nav/shell-shortcuts.ts","src/wc/nav/shell-gradient.ts","src/wc/nav/shell-chrome-metrics.ts","src/wc/components/AppShell/AppShell.css?tag=ds-app-shell&encapsulation=scoped","src/wc/components/AppShell/AppShell.tsx"],"sourcesContent":["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};\n\n/** Tool shortcut chords (⌘/Ctrl+K/A/S/M/N) toggle open/closed via `ds-panel-tools.activateTool`. */\n\n/** True when Cmd (macOS) or Ctrl (Windows/Linux) is held without Alt/Shift. */\nexport function isShellShortcutModifier(\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 chord is not handled. */\nexport function resolveShellShortcut(\n e: Pick<KeyboardEvent, 'key' | 'code' | 'metaKey' | 'ctrlKey' | 'altKey' | 'shiftKey'>,\n): ShellShortcutAction | null {\n if (!isShellShortcutModifier(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","/** CSS var names consumed by `ds-panel-nav` / `ds-bar-nav` inside `ds-app-shell`. */\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/** Layer opacity for the nav gradient wash. */\nexport const SHELL_GRADIENT_OPACITY = '0.1';\n\n/** Whether the shared chrome layer (bg + optional wash/grid) should mount. */\nexport function shellChromeLayerActive(gradient: boolean, grid: boolean): boolean {\n return gradient || grid;\n}\n\nconst GRADIENT_GEOMETRY = '100% 100% at 0% 0%';\n\n/**\n * Shell radial wash — same for panel and bar nav.\n * Tokens follow `data-theme` (light/dark blue intent).\n */\nexport function buildShellRadialGradient(): string {\n return `radial-gradient(${GRADIENT_GEOMETRY}, var(--color-background-transparent) 0%, var(--color-color-intent-blue-strong-background) 100%)`;\n}\n\n/** Built-in radial image (optional `gradientSrc` on shell overrides). */\nexport function shellGradientImage(): string {\n return buildShellRadialGradient();\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-app-shell` 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 { 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}\n\n.app-shell {\n display: flex;\n flex-direction: column;\n height: 100%;\n min-height: 0;\n box-sizing: border-box;\n font-family: var(--typography-font-family, system-ui);\n}\n\n:host(.app-shell--gradient),\n:host(.app-shell--grid) {\n --_shell-chrome-bg: var(--color-background-secondary);\n}\n\n:host(.app-shell--grid) {\n --_shell-chrome-grid-cell: var(--dimension-size-050);\n --_shell-chrome-grid-stroke: var(--dimension-stroke-width-012);\n --_shell-chrome-grid-line: var(--color-foreground-quaternary);\n --_shell-chrome-grid-opacity: 0.1;\n}\n\n.app-shell__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 + grid use 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.app-shell__chrome {\n position: absolute;\n inset: 0;\n pointer-events: none;\n z-index: 0;\n}\n\n:host(.app-shell--gradient) .app-shell__chrome,\n:host(.app-shell--grid) .app-shell__chrome {\n background-color: var(--_shell-chrome-bg);\n}\n\n/* Layer stack (bottom → top): bg → wash (::before) → grid (::after) */\n:host(.app-shell--gradient) .app-shell__chrome::before,\n:host(.app-shell--grid) .app-shell__chrome::after {\n content: '';\n position: absolute;\n inset: 0;\n pointer-events: none;\n background-position: 0 0;\n background-attachment: fixed;\n}\n\n:host(.app-shell--gradient) .app-shell__chrome::before {\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:host(.app-shell--grid) .app-shell__chrome::after {\n z-index: 2;\n opacity: var(--_shell-chrome-grid-opacity);\n background-image: repeating-linear-gradient(\n 120deg,\n var(--_shell-chrome-grid-line) 0,\n var(--_shell-chrome-grid-line) var(--_shell-chrome-grid-stroke),\n transparent var(--_shell-chrome-grid-stroke),\n transparent var(--_shell-chrome-grid-cell)\n );\n}\n\n.app-shell__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.app-shell__panel ::slotted(ds-panel-nav) {\n display: block;\n height: 100%;\n}\n\n.app-shell__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.app-shell__bar {\n grid-area: bar;\n flex: 0 0 auto;\n min-width: 0;\n}\n\n.app-shell__bar ::slotted(ds-bar-nav) {\n display: block;\n}\n\n.app-shell__content {\n grid-area: content;\n flex: 1 1 auto;\n min-width: 0;\n min-height: 0;\n overflow: auto;\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:host(.app-shell--gradient) .app-shell__content,\n:host(.app-shell--grid) .app-shell__content {\n position: relative;\n z-index: 1;\n background-color: var(--color-background-primary);\n}\n\n.app-shell__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.app-shell__tools ::slotted(ds-panel-tools) {\n display: block;\n height: 100%;\n min-height: 0;\n}\n","import { Component, Prop, Element, Watch, Listen, h, Host } from '@stencil/core';\nimport type { NavChromeStyle } from '../../nav/nav-chrome';\nimport {\n isEditableShortcutTarget,\n resolveShellShortcut,\n} from '../../nav/shell-shortcuts';\nimport type { PanelToolsToolId } from '../PanelTools/panel-tools-types';\nimport {\n CHROME_TRANSITION_END,\n CHROME_TRANSITION_START,\n ChromeTransitionDepth,\n createRafCoalescer,\n readChromeTransitionSource,\n} from '../../nav/chrome-transition';\nimport {\n isPanelNavCollapsed,\n panelWidthPxFromTokens,\n readPanelNavWidthTokens,\n type PanelNavWidthTokens,\n} from '../../nav/shell-chrome-metrics';\nimport {\n SHELL_GRADIENT_IMAGE_VAR,\n SHELL_GRADIENT_OPACITY,\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 shellGradientSize,\n} from '../../nav/shell-gradient';\n\n@Component({\n tag: 'ds-app-shell',\n styleUrl: 'AppShell.css',\n scoped: true,\n})\nexport class AppShell {\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 /** When `true`, paints the radial wash behind panel, bar, and tools (synced to shell layout). */\n @Prop({ reflect: true }) gradient: boolean = false;\n\n /** When `true`, paints the diagonal grid overlay on the shared chrome layer. Independent of `gradient`. */\n @Prop({ reflect: true }) grid: boolean = false;\n\n /**\n * Optional custom gradient for `background-image` (e.g. SVG URL).\n * When set, overrides the built-in radial wash.\n */\n @Prop() gradientSrc: string = '';\n\n /** When `true` (default), registers global shell keyboard shortcuts. Tool chords (⌘/Ctrl+K/A/S/M/N) toggle their drawer open and closed; ⌘/Ctrl+[ toggles panel nav; ⌘/Ctrl+] closes any open tool drawer. */\n @Prop({ attribute: 'shortcuts-enabled' }) shortcutsEnabled: boolean = true;\n\n @Element() el!: HTMLElement;\n\n private resizeObserver: ResizeObserver | null = null;\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 if (this.panelNavTransition.isActive) return;\n this.scheduleChromeSync();\n };\n private onVisualViewportChange = () => {\n if (this.panelNavTransition.isActive) return;\n this.scheduleChromeSync();\n };\n\n componentDidLoad() {\n this.syncSlottedNavStyle();\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 }\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('gradient')\n @Watch('grid')\n @Watch('gradientSrc')\n onShellPropsChange() {\n this.syncSlottedNavStyle();\n this.scheduleChromeSync();\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 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('.app-shell__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('.app-shell__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 this.gradient || this.grid;\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-panel-tools') as HTMLDsPanelToolsElement | 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 if (!this.chromeLayerActive()) {\n this.clearGradientPaintVars(targets);\n clearLayoutVars();\n return;\n }\n\n if (!this.gradient) {\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 = this.gradientSrc.trim()\n ? `url(${this.gradientSrc.trim()})`\n : buildShellRadialGradient();\n\n const size = shellGradientSize({\n width: viewport.width,\n height: viewport.height,\n });\n const opacity = SHELL_GRADIENT_OPACITY;\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 shellCls: Record<string, boolean> = {\n 'app-shell': true,\n 'app-shell--gradient': this.gradient,\n 'app-shell--grid': this.grid,\n [`app-shell--${this.navStyle}`]: true,\n };\n\n return (\n <Host class={shellCls}>\n <div class=\"app-shell__row\">\n {chromeActive ? <div class=\"app-shell__chrome\" aria-hidden=\"true\" /> : null}\n <div class=\"app-shell__panel\">\n <slot name=\"panel\" />\n </div>\n <div class=\"app-shell__main\">\n <div class=\"app-shell__bar\">\n <slot name=\"bar\" />\n </div>\n <div class=\"app-shell__tools\">\n <slot name=\"tools\" />\n </div>\n <div class=\"app-shell__content\">\n <slot />\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["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","SHELL_GRADIENT_IMAGE_VAR","SHELL_GRADIENT_SIZE_VAR","SHELL_GRADIENT_POSITION_PANEL_VAR","SHELL_GRADIENT_POSITION_BAR_VAR","SHELL_GRADIENT_OPACITY_VAR","SHELL_GRADIENT_OPACITY","GRADIENT_GEOMETRY","buildShellRadialGradient","readShellViewportDimensions","win","w","globalThis","window","undefined","width","height","visual","visualViewport","Math","round","innerWidth","innerHeight","shellGradientSize","layout","shellGradientPositionPanel","shellGradientPositionBar","panelWidth","readCssVarWidthPx","context","cssVarName","document","probe","createElement","style","cssText","appendChild","getBoundingClientRect","removeChild","readPanelNavWidthTokens","navRoot","expandedPx","collapsedPx","isPanelNavCollapsed","panelNavHost","classList","contains","collapsedProp","collapsed","panelWidthPxFromTokens","tokens","appShellCss","AppShell","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","navStyle","gradient","grid","gradientSrc","shortcutsEnabled","resizeObserver","panelNavTransition","ChromeTransitionDepth","chromeSyncCoalescer","createRafCoalescer","syncChrome","panelWidthTokens","cachedViewportWidth","cachedViewportHeight","onWindowResize","isActive","scheduleChromeSync","onVisualViewportChange","onChromeTransitionStart","event","readChromeTransitionSource","enter","viewport","onChromeTransitionEnd","exit","componentDidLoad","syncSlottedNavStyle","connectMetricsObserver","connectViewportListeners","addEventListener","CHROME_TRANSITION_START","CHROME_TRANSITION_END","requestAnimationFrame","cachePanelWidthTokens","disconnectedCallback","disconnect","disconnectViewportListeners","cancel","removeEventListener","onShellPropsChange","schedule","panel","querySelector","bar","setAttribute","ResizeObserver","observe","panelWrap","passive","applyGradientVars","vars","name","value","Object","entries","removeProperty","setProperty","clearGradientPaintVars","targets","keys","syncChromeLayoutVars","panelPosition","barPosition","resolvePanelWidthPx","panelNav","measured","resolveViewportDimensions","chromeLayerActive","handleWindowKeyDown","action","preventDefault","tools","toggleCollapsed","closeDrawer","startsWith","slice","activateTool","filter","clearLayoutVars","image","trim","size","opacity","isBar","tagName","render","chromeActive","shellCls","h","Host","class"],"sources":["src/wc/nav/shell-shortcuts.ts","src/wc/nav/shell-gradient.ts","src/wc/nav/shell-chrome-metrics.ts","src/wc/components/AppShell/AppShell.css?tag=ds-app-shell&encapsulation=scoped","src/wc/components/AppShell/AppShell.tsx"],"sourcesContent":["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};\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","/** CSS var names consumed by `ds-panel-nav` / `ds-bar-nav` inside `ds-app-shell`. */\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/** Layer opacity for the nav gradient wash. */\nexport const SHELL_GRADIENT_OPACITY = '0.1';\n\n/** Whether the shared chrome layer (bg + optional wash/grid) should mount. */\nexport function shellChromeLayerActive(gradient: boolean, grid: boolean): boolean {\n return gradient || grid;\n}\n\nconst GRADIENT_GEOMETRY = '100% 100% at 0% 0%';\n\n/**\n * Shell radial wash — same for panel and bar nav.\n * Tokens follow `data-theme` (light/dark blue intent).\n */\nexport function buildShellRadialGradient(): string {\n return `radial-gradient(${GRADIENT_GEOMETRY}, var(--color-background-transparent) 0%, var(--color-color-intent-blue-strong-background) 100%)`;\n}\n\n/** Built-in radial image (optional `gradientSrc` on shell overrides). */\nexport function shellGradientImage(): string {\n return buildShellRadialGradient();\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-app-shell` 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 { 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}\n\n.app-shell {\n display: flex;\n flex-direction: column;\n height: 100%;\n min-height: 0;\n box-sizing: border-box;\n font-family: var(--typography-font-family, system-ui);\n}\n\n:host(.app-shell--gradient),\n:host(.app-shell--grid) {\n --_shell-chrome-bg: var(--color-background-secondary);\n}\n\n:host(.app-shell--grid) {\n --_shell-chrome-grid-cell: var(--dimension-size-050);\n --_shell-chrome-grid-stroke: var(--dimension-stroke-width-012);\n --_shell-chrome-grid-line: var(--color-foreground-quaternary);\n --_shell-chrome-grid-opacity: 0.1;\n}\n\n.app-shell__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 + grid use 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.app-shell__chrome {\n position: absolute;\n inset: 0;\n pointer-events: none;\n z-index: 0;\n}\n\n:host(.app-shell--gradient) .app-shell__chrome,\n:host(.app-shell--grid) .app-shell__chrome {\n background-color: var(--_shell-chrome-bg);\n}\n\n/* Layer stack (bottom → top): bg → wash (::before) → grid (::after) */\n:host(.app-shell--gradient) .app-shell__chrome::before,\n:host(.app-shell--grid) .app-shell__chrome::after {\n content: '';\n position: absolute;\n inset: 0;\n pointer-events: none;\n background-position: 0 0;\n background-attachment: fixed;\n}\n\n:host(.app-shell--gradient) .app-shell__chrome::before {\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:host(.app-shell--grid) .app-shell__chrome::after {\n z-index: 2;\n opacity: var(--_shell-chrome-grid-opacity);\n background-image: repeating-linear-gradient(\n 120deg,\n var(--_shell-chrome-grid-line) 0,\n var(--_shell-chrome-grid-line) var(--_shell-chrome-grid-stroke),\n transparent var(--_shell-chrome-grid-stroke),\n transparent var(--_shell-chrome-grid-cell)\n );\n}\n\n.app-shell__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.app-shell__panel ::slotted(ds-panel-nav) {\n display: block;\n height: 100%;\n}\n\n.app-shell__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.app-shell__bar {\n grid-area: bar;\n flex: 0 0 auto;\n min-width: 0;\n}\n\n.app-shell__bar ::slotted(ds-bar-nav) {\n display: block;\n}\n\n.app-shell__content {\n grid-area: content;\n flex: 1 1 auto;\n min-width: 0;\n min-height: 0;\n overflow: auto;\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:host(.app-shell--gradient) .app-shell__content,\n:host(.app-shell--grid) .app-shell__content {\n position: relative;\n z-index: 1;\n background-color: var(--color-background-primary);\n}\n\n.app-shell__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.app-shell__tools ::slotted(ds-panel-tools) {\n display: block;\n height: 100%;\n min-height: 0;\n}\n","import { Component, Prop, Element, Watch, Listen, h, Host } from '@stencil/core';\nimport type { NavChromeStyle } from '../../nav/nav-chrome';\nimport {\n isEditableShortcutTarget,\n resolveShellShortcut,\n} from '../../nav/shell-shortcuts';\nimport type { PanelToolsToolId } from '../PanelTools/panel-tools-types';\nimport {\n CHROME_TRANSITION_END,\n CHROME_TRANSITION_START,\n ChromeTransitionDepth,\n createRafCoalescer,\n readChromeTransitionSource,\n} from '../../nav/chrome-transition';\nimport {\n isPanelNavCollapsed,\n panelWidthPxFromTokens,\n readPanelNavWidthTokens,\n type PanelNavWidthTokens,\n} from '../../nav/shell-chrome-metrics';\nimport {\n SHELL_GRADIENT_IMAGE_VAR,\n SHELL_GRADIENT_OPACITY,\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 shellGradientSize,\n} from '../../nav/shell-gradient';\n\n@Component({\n tag: 'ds-app-shell',\n styleUrl: 'AppShell.css',\n scoped: true,\n})\nexport class AppShell {\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 /** When `true`, paints the radial wash behind panel, bar, and tools (synced to shell layout). */\n @Prop({ reflect: true }) gradient: boolean = false;\n\n /** When `true`, paints the diagonal grid overlay on the shared chrome layer. Independent of `gradient`. */\n @Prop({ reflect: true }) grid: boolean = false;\n\n /**\n * Optional custom gradient for `background-image` (e.g. SVG URL).\n * When set, overrides the built-in radial wash.\n */\n @Prop() gradientSrc: string = '';\n\n /** When `true` (default), registers global shell keyboard shortcuts. `[` toggles panel nav; `]` closes tools; K/A/S/M/N toggle tool drawers. Modifiers are ignored so browser chords like ⌘N stay native. */\n @Prop({ attribute: 'shortcuts-enabled' }) shortcutsEnabled: boolean = true;\n\n @Element() el!: HTMLElement;\n\n private resizeObserver: ResizeObserver | null = null;\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 if (this.panelNavTransition.isActive) return;\n this.scheduleChromeSync();\n };\n private onVisualViewportChange = () => {\n if (this.panelNavTransition.isActive) return;\n this.scheduleChromeSync();\n };\n\n componentDidLoad() {\n this.syncSlottedNavStyle();\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 }\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('gradient')\n @Watch('grid')\n @Watch('gradientSrc')\n onShellPropsChange() {\n this.syncSlottedNavStyle();\n this.scheduleChromeSync();\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 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('.app-shell__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('.app-shell__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 this.gradient || this.grid;\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-panel-tools') as HTMLDsPanelToolsElement | 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 if (!this.chromeLayerActive()) {\n this.clearGradientPaintVars(targets);\n clearLayoutVars();\n return;\n }\n\n if (!this.gradient) {\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 = this.gradientSrc.trim()\n ? `url(${this.gradientSrc.trim()})`\n : buildShellRadialGradient();\n\n const size = shellGradientSize({\n width: viewport.width,\n height: viewport.height,\n });\n const opacity = SHELL_GRADIENT_OPACITY;\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 shellCls: Record<string, boolean> = {\n 'app-shell': true,\n 'app-shell--gradient': this.gradient,\n 'app-shell--grid': this.grid,\n [`app-shell--${this.navStyle}`]: true,\n };\n\n return (\n <Host class={shellCls}>\n <div class=\"app-shell__row\">\n {chromeActive ? <div class=\"app-shell__chrome\" aria-hidden=\"true\" /> : null}\n <div class=\"app-shell__panel\">\n <slot name=\"panel\" />\n </div>\n <div class=\"app-shell__main\">\n <div class=\"app-shell__bar\">\n <slot name=\"bar\" />\n </div>\n <div class=\"app-shell__tools\">\n <slot name=\"tools\" />\n </div>\n <div class=\"app-shell__content\">\n <slot />\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
package/dist/components/ds-panel-tools.js CHANGED
@@ -1,2 +1,2 @@
1
- import{p as e,H as s,c as t,h as o,a,t as i}from"./index.js";import{p as n}from"./p-BOQnc-M4.js";import{d as l}from"./p-CiEc8Nwx.js";import{d as r}from"./p-BTndnbR_.js";import{d}from"./p-DqBCQRRd.js";const c="search";const h={search:"Search",messages:"Messages",stacks:"Stacks",activity:"Activity",agents:"Agents"};function p(e,s){if(s){return n(s,[])}return e??[]}function f(e,s){return!e&&s==="idle"}function b(e,s,t){if(e&&s===t){return{open:false,activeTool:t,selected:false}}return{open:true,activeTool:t,selected:true}}const u=()=>`.sc-ds-panel-tools-h{display:block;flex:0 0 auto;box-sizing:border-box;height:100%;min-height:0;overflow:hidden;--_panel-tools-rail-width:var(--dimension-size-600);--_panel-tools-drawer-width:var(--dimension-panel-width-sm);--_panel-tools-border:var(--dimension-stroke-width-012, 1px) solid var(--color-border-tertiary);--_panel-tools-surface-bg:var(--color-background-secondary);--_panel-tools-expand-dur:var(--effect-animation-duration-medium-1, 300ms)}.panel-tools__layout.sc-ds-panel-tools{display:flex;flex-direction:row-reverse;align-items:stretch;height:100%;min-height:0;box-sizing:border-box}.panel-tools__drawer.sc-ds-panel-tools{flex:0 0 auto;max-width:0;min-width:0;height:100%;min-height:0;overflow:hidden;box-sizing:border-box;transition:none}.panel-tools--ready.panel-tools--motion-opening.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:max-width var(--_panel-tools-expand-dur) var(--effect-animation-easing-ease-out, ease-out)}.panel-tools--ready.panel-tools--motion-closing.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:max-width var(--_panel-tools-expand-dur) var(--effect-animation-easing-ease-in, ease-in)}.panel-tools--open.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{max-width:var(--_panel-tools-drawer-width)}.panel-tools__drawer--visible.sc-ds-panel-tools{border-left:var(--_panel-tools-border)}.panel-tools__drawer-surface.sc-ds-panel-tools{display:flex;flex-direction:column;width:var(--_panel-tools-drawer-width);height:100%;min-height:0;box-sizing:border-box;background-color:var(--_panel-tools-surface-bg)}ds-app-shell[gradient].sc-ds-panel-tools-h .panel-tools__drawer-surface.sc-ds-panel-tools,ds-app-shell[gradient] .sc-ds-panel-tools-h .panel-tools__drawer-surface.sc-ds-panel-tools,ds-app-shell[grid].sc-ds-panel-tools-h .panel-tools__drawer-surface.sc-ds-panel-tools,ds-app-shell[grid] .sc-ds-panel-tools-h .panel-tools__drawer-surface.sc-ds-panel-tools,ds-app-shell[gradient].sc-ds-panel-tools-h .panel-tools__rail.sc-ds-panel-tools,ds-app-shell[gradient] .sc-ds-panel-tools-h .panel-tools__rail.sc-ds-panel-tools,ds-app-shell[grid].sc-ds-panel-tools-h .panel-tools__rail.sc-ds-panel-tools,ds-app-shell[grid] .sc-ds-panel-tools-h .panel-tools__rail.sc-ds-panel-tools{background-color:transparent}.panel-tools__header.sc-ds-panel-tools{flex:0 0 auto;display:flex;align-items:center;height:var(--dimension-size-600);padding:var(--dimension-space-100);border-bottom:var(--_panel-tools-border);color:var(--color-foreground-primary);box-sizing:border-box;-webkit-user-select:none;user-select:none}.panel-tools__title.sc-ds-panel-tools{display:inline-flex;align-items:center;height:var(--dimension-size-400);padding-inline:var(--dimension-space-100);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.panel-tools__body.sc-ds-panel-tools{flex:1 1 auto;min-height:0;overflow:auto;position:relative}.panel-tools--drawer-resting.sc-ds-panel-tools-h .panel-tools__body.sc-ds-panel-tools{content-visibility:auto;contain-intrinsic-size:auto 200px}.panel-tools__view.sc-ds-panel-tools{display:none;height:100%;min-height:0;box-sizing:border-box;padding:var(--dimension-space-200);color:var(--color-foreground-secondary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.panel-tools__view.sc-ds-panel-tools-s>*,.panel-tools__view .sc-ds-panel-tools-s>*{margin:0;color:var(--color-foreground-secondary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.panel-tools__view--active.sc-ds-panel-tools{display:block}.panel-tools__rail.sc-ds-panel-tools{flex:0 0 var(--_panel-tools-rail-width);width:var(--_panel-tools-rail-width);min-width:var(--_panel-tools-rail-width);display:flex;flex-direction:column;box-sizing:border-box;height:100%;min-height:0;border-left:var(--_panel-tools-border);background-color:var(--_panel-tools-surface-bg)}.panel-tools__rail-header.sc-ds-panel-tools{display:flex;align-items:center;justify-content:center;height:var(--dimension-size-600);padding:var(--dimension-space-100);flex-shrink:0;box-sizing:border-box;border-bottom:var(--_panel-tools-border)}.panel-tools__rail-body.sc-ds-panel-tools{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:var(--dimension-space-050);padding:var(--dimension-space-100);box-sizing:border-box;scrollbar-width:none}.panel-tools__rail-body.sc-ds-panel-tools::-webkit-scrollbar{display:none}.panel-tools__rail-action.sc-ds-panel-tools{display:flex;align-items:center;justify-content:center;width:100%;height:var(--dimension-size-400);flex-shrink:0}`;const g=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsToolChange=t(this,"dsToolChange");this.dsChromeTransitionStart=t(this,"dsChromeTransitionStart");this.dsChromeTransitionEnd=t(this,"dsChromeTransitionEnd");this.open=false;this.activeTool="";this.items=[];this.itemsJson="";this.motion="idle";this.readyForMotion=false;this.rovingIndex=0;this.motionEnableGeneration=0;this.handleTransitionEnd=e=>{if(e.target!==this.el.querySelector(".panel-tools__drawer"))return;if(e.propertyName!=="max-width")return;this.motion="idle";this.dsChromeTransitionEnd.emit({source:"panel-tools"})};this.handleToolChange=e=>{const s=b(this.open,this.activeTool,e);this.open=s.open;this.activeTool=s.activeTool;this.dsToolChange.emit({id:e,selected:s.selected})};this.handleRailKeyDown=(e,s)=>{const t=this.orderedRailItems;if(!t.length)return;if(e.key==="Enter"||e.key===" "){e.preventDefault();this.handleToolChange(t[s].id);return}if(e.key==="ArrowDown"){if(s>=t.length-1)return;e.preventDefault();this.focusRailAt(s+1);return}if(e.key==="ArrowUp"){if(s<=0)return;e.preventDefault();this.focusRailAt(s-1)}}}get railItems(){return p(this.items,this.itemsJson)}get orderedRailItems(){const e=this.railItems;const s=e.find((e=>e.id===c));const t=e.filter((e=>e.id!==c));return s?[s,...t]:t}disconnectedCallback(){this.el.removeEventListener("transitionend",this.handleTransitionEnd);this.motionEnableGeneration+=1}deferMotionEnable(){if(this.readyForMotion)return;const e=++this.motionEnableGeneration;requestAnimationFrame((()=>{if(e!==this.motionEnableGeneration)return;requestAnimationFrame((()=>{if(e!==this.motionEnableGeneration)return;this.readyForMotion=true}))}))}connectedCallback(){this.el.addEventListener("transitionend",this.handleTransitionEnd)}openChanged(e,s){if(this.readyForMotion&&s!==undefined&&s!==e){this.motion=e?"opening":"closing";this.dsChromeTransitionStart.emit({source:"panel-tools",phase:e?"opening":"closing"})}this.deferMotionEnable()}activeToolChanged(){this.deferMotionEnable()}componentDidLoad(){this.deferMotionEnable()}itemsChanged(){this.rovingIndex=0;this.deferMotionEnable()}isRailSelected(e){return this.open&&this.activeTool===e}isDrawerPresent(){return this.open||this.motion==="closing"}isViewActive(e){return this.isDrawerPresent()&&this.activeTool===e}headerLabel(){if(!this.isDrawerPresent()||!this.activeTool)return"";return h[this.activeTool]??""}async activateTool(e){const s=this.railItems.find((s=>s.id===e));if(!s||s.inactive)return;this.handleToolChange(e)}async closeDrawer(){if(!this.open)return;const e=this.activeTool;this.open=false;if(e){this.dsToolChange.emit({id:e,selected:false})}}focusRailAt(e){const s=this.orderedRailItems;if(!s.length)return;const t=Math.max(0,Math.min(e,s.length-1));if(t===this.rovingIndex)return;this.rovingIndex=t;const o=Array.from(this.el.querySelectorAll(".panel-tools__rail-action .button-icon"));o[t]?.focus({preventScroll:true})}renderRailAction(e,s){return o("ds-button-unfilled-icon",{key:e.id,class:"panel-tools__rail-action",icon:e.icon,isActive:this.isRailSelected(e.id),activeFill:false,dot:e.dot??false,inactive:e.inactive,focusTabIndex:s===this.rovingIndex?0:-1,"aria-label":e.ariaLabel??h[e.id],pressed:this.isRailSelected(e.id),onFocusin:()=>{this.rovingIndex=s},onKeyDown:e=>this.handleRailKeyDown(e,s),onDsClick:()=>this.handleToolChange(e.id)})}render(){const e=this.headerLabel();const s=this.orderedRailItems;const t=s.find((e=>e.id===c));const i=s.filter((e=>e.id!==c));const n=this.isDrawerPresent();const l=f(this.open,this.motion);return o(a,{key:"2e7619fc974bf60c774b13c162a1e77284eaee11",class:{"panel-tools":true,"panel-tools--open":this.open,"panel-tools--ready":this.readyForMotion,"panel-tools--motion-opening":this.motion==="opening","panel-tools--motion-closing":this.motion==="closing","panel-tools--drawer-resting":l},role:"complementary","aria-label":"Tools"},o("div",{key:"9379429c254fd230159107e3dc3d72c0d370cae8",class:"panel-tools__layout"},o("nav",{key:"1e15f483c9dd5b6eb6a5126e05f0c501218edeff",class:"panel-tools__rail","aria-label":"Tool shortcuts"},t?o("div",{class:"panel-tools__rail-header"},this.renderRailAction(t,0)):null,o("div",{key:"55147687d8c0e8ace3bcba8d40f4927675251a93",class:"panel-tools__rail-body"},i.map(((e,s)=>this.renderRailAction(e,t?s+1:s))))),o("div",{key:"383bd00dcb4429188c6ecab83a657c82f99e84f6",class:{"panel-tools__drawer":true,"panel-tools__drawer--visible":n},"aria-hidden":n?null:"true",inert:n?undefined:true},o("div",{key:"621933485686b46e16ded0b514f86e08f450b9c8",class:"panel-tools__drawer-surface"},o("header",{key:"36a9723473934bb9c36f5e5cb3bb361b3cafab38",class:"panel-tools__header"},o("span",{key:"4f5a6ede5f748d5b9cc04306dcd5079aee223df6",class:"panel-tools__title text-body-medium-emphasis"},e)),o("div",{key:"c0156a2ce3626be4ea5316dd8e323884da9f3bc8",class:"panel-tools__body"},o("div",{key:"4a877a94557ff6ca040573d31e38a17168644370",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("search"),"text-body-medium":true},hidden:!this.isViewActive("search")},o("slot",{key:"a751579570c44b9cf6bc849648b2fed3b7d8d0e8",name:"search"})),o("div",{key:"4d0f296e31f4c5aa86906034639ae446aedb8ebd",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("messages"),"text-body-medium":true},hidden:!this.isViewActive("messages")},o("slot",{key:"a3ffe7ac8f233bfcbf37698e70b4c3e9c953e254",name:"messages"})),o("div",{key:"bbd7d03ba2b66fc819d6b96ec653b8d84e3ac426",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("stacks"),"text-body-medium":true},hidden:!this.isViewActive("stacks")},o("slot",{key:"ab38977a4316d98ae3667ae2c4b37fd597e7f79e",name:"stacks"})),o("div",{key:"d0479821c5e9586ab685b15936b621724f22e716",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("activity"),"text-body-medium":true},hidden:!this.isViewActive("activity")},o("slot",{key:"abe0142c84722cc7ab3b10f9bf87ef4bbe49c342",name:"activity"})),o("div",{key:"43a497fb7a52bf7c2316705f9974d22c56c96763",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("agents"),"text-body-medium":true},hidden:!this.isViewActive("agents")},o("slot",{key:"c6b0147b01da918a5dc65ee07694edb094ec03b4",name:"agents"})))))))}get el(){return this}static get watchers(){return{open:[{openChanged:0}],activeTool:[{activeToolChanged:0}],items:[{itemsChanged:0}],itemsJson:[{itemsChanged:0}]}}static get style(){return u()}},[262,"ds-panel-tools",{open:[1540],activeTool:[1537,"active-tool"],items:[16],itemsJson:[1,"items-json"],motion:[32],readyForMotion:[32],rovingIndex:[32],activateTool:[64],closeDrawer:[64]},undefined,{open:[{openChanged:0}],activeTool:[{activeToolChanged:0}],items:[{itemsChanged:0}],itemsJson:[{itemsChanged:0}]}]);function m(){if(typeof customElements==="undefined"){return}const e=["ds-panel-tools","ds-badge","ds-button-unfilled-icon","ds-icon"];e.forEach((e=>{switch(e){case"ds-panel-tools":if(!customElements.get(i(e))){customElements.define(i(e),g)}break;case"ds-badge":if(!customElements.get(i(e))){l()}break;case"ds-button-unfilled-icon":if(!customElements.get(i(e))){r()}break;case"ds-icon":if(!customElements.get(i(e))){d()}break}}))}m();const _=g;const v=m;export{_ as DsPanelTools,v as defineCustomElement};
1
+ import{p as e,H as s,c as t,h as o,a,t as i}from"./index.js";import{p as n}from"./p-BOQnc-M4.js";import{d as l}from"./p-CiEc8Nwx.js";import{d as r}from"./p-BTndnbR_.js";import{d}from"./p-DqBCQRRd.js";const c="search";const h={search:"Search",messages:"Messages",stacks:"Stacks",activity:"Activity",agents:"Agents"};function p(e,s){if(s){return n(s,[])}return e??[]}function f(e,s){return!e&&s==="idle"}function u(e,s,t){if(e&&s===t){return{open:false,activeTool:t,selected:false}}return{open:true,activeTool:t,selected:true}}const g=()=>`.sc-ds-panel-tools-h{display:block;flex:0 0 auto;box-sizing:border-box;height:100%;min-height:0;overflow:hidden;--_panel-tools-rail-width:var(--dimension-size-600);--_panel-tools-drawer-width:var(--dimension-panel-width-sm);--_panel-tools-border:var(--dimension-stroke-width-012, 1px) solid var(--color-border-tertiary);--_panel-tools-surface-bg:var(--color-background-secondary);--_panel-tools-expand-dur:var(--effect-animation-duration-medium-1, 300ms)}.panel-tools__layout.sc-ds-panel-tools{display:flex;flex-direction:row-reverse;align-items:stretch;height:100%;min-height:0;box-sizing:border-box}.panel-tools__drawer.sc-ds-panel-tools{flex:0 0 auto;max-width:0;min-width:0;height:100%;min-height:0;overflow:hidden;box-sizing:border-box;transition:none}.panel-tools--ready.panel-tools--motion-opening.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:max-width var(--_panel-tools-expand-dur) var(--effect-animation-easing-ease-out, ease-out)}.panel-tools--ready.panel-tools--motion-closing.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:max-width var(--_panel-tools-expand-dur) var(--effect-animation-easing-ease-in, ease-in)}.panel-tools--open.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{max-width:var(--_panel-tools-drawer-width)}.panel-tools__drawer--visible.sc-ds-panel-tools{border-left:var(--_panel-tools-border)}.panel-tools__drawer-surface.sc-ds-panel-tools{display:flex;flex-direction:column;width:var(--_panel-tools-drawer-width);height:100%;min-height:0;box-sizing:border-box;background-color:var(--_panel-tools-surface-bg)}ds-app-shell[gradient].sc-ds-panel-tools-h .panel-tools__drawer-surface.sc-ds-panel-tools,ds-app-shell[gradient] .sc-ds-panel-tools-h .panel-tools__drawer-surface.sc-ds-panel-tools,ds-app-shell[grid].sc-ds-panel-tools-h .panel-tools__drawer-surface.sc-ds-panel-tools,ds-app-shell[grid] .sc-ds-panel-tools-h .panel-tools__drawer-surface.sc-ds-panel-tools,ds-app-shell[gradient].sc-ds-panel-tools-h .panel-tools__rail.sc-ds-panel-tools,ds-app-shell[gradient] .sc-ds-panel-tools-h .panel-tools__rail.sc-ds-panel-tools,ds-app-shell[grid].sc-ds-panel-tools-h .panel-tools__rail.sc-ds-panel-tools,ds-app-shell[grid] .sc-ds-panel-tools-h .panel-tools__rail.sc-ds-panel-tools{background-color:transparent}.panel-tools__header.sc-ds-panel-tools{flex:0 0 auto;display:flex;align-items:center;height:var(--dimension-size-600);padding:var(--dimension-space-100);border-bottom:var(--_panel-tools-border);color:var(--color-foreground-primary);box-sizing:border-box;-webkit-user-select:none;user-select:none}.panel-tools__title.sc-ds-panel-tools{display:inline-flex;align-items:center;height:var(--dimension-size-400);padding-inline:var(--dimension-space-100);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.panel-tools__body.sc-ds-panel-tools{flex:1 1 auto;min-height:0;overflow:auto;position:relative}.panel-tools--drawer-resting.sc-ds-panel-tools-h .panel-tools__body.sc-ds-panel-tools{content-visibility:auto;contain-intrinsic-size:auto 200px}.panel-tools__view.sc-ds-panel-tools{display:none;height:100%;min-height:0;box-sizing:border-box;padding:var(--dimension-space-200);color:var(--color-foreground-secondary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.panel-tools__view.sc-ds-panel-tools-s>*,.panel-tools__view .sc-ds-panel-tools-s>*{margin:0;color:var(--color-foreground-secondary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.panel-tools__view--active.sc-ds-panel-tools{display:block}.panel-tools__rail.sc-ds-panel-tools{flex:0 0 var(--_panel-tools-rail-width);width:var(--_panel-tools-rail-width);min-width:var(--_panel-tools-rail-width);display:flex;flex-direction:column;box-sizing:border-box;height:100%;min-height:0;border-left:var(--_panel-tools-border);background-color:var(--_panel-tools-surface-bg)}.panel-tools__rail-header.sc-ds-panel-tools{display:flex;align-items:center;justify-content:center;height:var(--dimension-size-600);padding:var(--dimension-space-100);flex-shrink:0;box-sizing:border-box;border-bottom:var(--_panel-tools-border)}.panel-tools__rail-body.sc-ds-panel-tools{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:var(--dimension-space-050);padding:var(--dimension-space-100);box-sizing:border-box;scrollbar-width:none}.panel-tools__rail-body.sc-ds-panel-tools::-webkit-scrollbar{display:none}.panel-tools__rail-action.sc-ds-panel-tools{display:flex;align-items:center;justify-content:center;width:100%;height:var(--dimension-size-400);flex-shrink:0}`;const m=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsToolChange=t(this,"dsToolChange");this.dsChromeTransitionStart=t(this,"dsChromeTransitionStart");this.dsChromeTransitionEnd=t(this,"dsChromeTransitionEnd");this.open=false;this.activeTool="";this.items=[];this.itemsJson="";this.motion="idle";this.readyForMotion=false;this.rovingIndex=0;this.motionEnableGeneration=0;this.handleTransitionEnd=e=>{if(e.target!==this.el.querySelector(".panel-tools__drawer"))return;if(e.propertyName!=="max-width")return;this.motion="idle";this.dsChromeTransitionEnd.emit({source:"panel-tools"})};this.handleToolChange=e=>{const s=u(this.open,this.activeTool,e);this.open=s.open;this.activeTool=s.activeTool;this.dsToolChange.emit({id:e,selected:s.selected})};this.handleRailKeyDown=(e,s)=>{const t=this.orderedRailItems;if(!t.length)return;if(e.key==="Enter"||e.key===" "){e.preventDefault();this.handleToolChange(t[s].id);return}if(e.key==="ArrowDown"){if(s>=t.length-1)return;e.preventDefault();this.focusRailAt(s+1);return}if(e.key==="ArrowUp"){if(s<=0)return;e.preventDefault();this.focusRailAt(s-1)}}}get railItems(){return p(this.items,this.itemsJson)}get orderedRailItems(){const e=this.railItems;const s=e.find((e=>e.id===c));const t=e.filter((e=>e.id!==c));return s?[s,...t]:t}disconnectedCallback(){this.el.removeEventListener("transitionend",this.handleTransitionEnd);this.motionEnableGeneration+=1}deferMotionEnable(){if(this.readyForMotion)return;const e=++this.motionEnableGeneration;requestAnimationFrame((()=>{if(e!==this.motionEnableGeneration)return;requestAnimationFrame((()=>{if(e!==this.motionEnableGeneration)return;this.readyForMotion=true}))}))}connectedCallback(){this.el.addEventListener("transitionend",this.handleTransitionEnd)}openChanged(e,s){if(this.readyForMotion&&s!==undefined&&s!==e){this.motion=e?"opening":"closing";this.dsChromeTransitionStart.emit({source:"panel-tools",phase:e?"opening":"closing"})}this.deferMotionEnable()}activeToolChanged(){this.deferMotionEnable()}componentDidLoad(){this.deferMotionEnable()}itemsChanged(){this.rovingIndex=0;this.deferMotionEnable()}isRailSelected(e){return this.open&&this.activeTool===e}isDrawerPresent(){return this.open||this.motion==="closing"}isViewActive(e){return this.isDrawerPresent()&&this.activeTool===e}headerLabel(){if(!this.isDrawerPresent()||!this.activeTool)return"";return h[this.activeTool]??""}async activateTool(e){const s=this.railItems.find((s=>s.id===e));if(!s||s.inactive)return;this.handleToolChange(e)}async closeDrawer(){if(!this.open)return;const e=this.activeTool;this.open=false;if(e){this.dsToolChange.emit({id:e,selected:false})}}focusRailAt(e){const s=this.orderedRailItems;if(!s.length)return;const t=Math.max(0,Math.min(e,s.length-1));if(t===this.rovingIndex)return;this.rovingIndex=t;const o=Array.from(this.el.querySelectorAll(".panel-tools__rail-action .button-icon"));o[t]?.focus({preventScroll:true})}renderRailAction(e,s){return o("ds-button-unfilled-icon",{key:e.id,class:"panel-tools__rail-action",icon:e.icon,isActive:this.isRailSelected(e.id),activeFill:false,dot:e.dot??false,inactive:e.inactive,focusTabIndex:s===this.rovingIndex?0:-1,"aria-label":e.ariaLabel??h[e.id],pressed:this.isRailSelected(e.id),onFocusin:()=>{this.rovingIndex=s},onKeyDown:e=>this.handleRailKeyDown(e,s),onDsClick:()=>this.handleToolChange(e.id)})}render(){const e=this.headerLabel();const s=this.orderedRailItems;const t=s.find((e=>e.id===c));const i=s.filter((e=>e.id!==c));const n=this.isDrawerPresent();const l=f(this.open,this.motion);return o(a,{key:"3a03a7796177bc4c35679b0c1f0d59c168c6632f",class:{"panel-tools":true,"panel-tools--open":this.open,"panel-tools--ready":this.readyForMotion,"panel-tools--motion-opening":this.motion==="opening","panel-tools--motion-closing":this.motion==="closing","panel-tools--drawer-resting":l},role:"complementary","aria-label":"Tools"},o("div",{key:"60a85f7995518fd8a2cea1da55c4ef19e71b7af1",class:"panel-tools__layout"},o("nav",{key:"45208e1bbc6d18ff012c2d043738844ecad423bd",class:"panel-tools__rail","aria-label":"Tool shortcuts"},t?o("div",{class:"panel-tools__rail-header"},this.renderRailAction(t,0)):null,o("div",{key:"8ae84262aa3eca333ff44c7cced8dd3740e15c4b",class:"panel-tools__rail-body"},i.map(((e,s)=>this.renderRailAction(e,t?s+1:s))))),o("div",{key:"82d2d99f5a7a65f4773544049f5139bb6163b56d",class:{"panel-tools__drawer":true,"panel-tools__drawer--visible":n},"aria-hidden":n?null:"true",inert:n?undefined:true},o("div",{key:"9e805c5f27cdbfe0b56a57739a9a8f141c30fc96",class:"panel-tools__drawer-surface"},o("header",{key:"6ccfe2c7a8f79b06c12f5bcad3ccfc2a50e554aa",class:"panel-tools__header"},o("span",{key:"29e56d604f046126427087f49cbce7d8873c657c",class:"panel-tools__title text-body-medium-emphasis"},e)),o("div",{key:"c697a333561dba12fc112005773128428b93376d",class:"panel-tools__body"},o("div",{key:"cdadef06be4406f540ad2feedc4450b90924b0cc",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("search"),"text-body-medium":true},hidden:!this.isViewActive("search")},o("slot",{key:"cea999e30107bde89a49c45865eac64dcbe38bc6",name:"search"})),o("div",{key:"717e8dae8f494917ce6b8618d6229b7d298b3163",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("messages"),"text-body-medium":true},hidden:!this.isViewActive("messages")},o("slot",{key:"e20cb76f14c7c06be856a8456a8fbcdf5e3829d4",name:"messages"})),o("div",{key:"8f4a525710061e435d165ae781d62a18e3e145b7",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("stacks"),"text-body-medium":true},hidden:!this.isViewActive("stacks")},o("slot",{key:"1a98e5c768962759f1f95426deca712c24a119c5",name:"stacks"})),o("div",{key:"c1b72cf8129f72540c2889524e28171d92c54722",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("activity"),"text-body-medium":true},hidden:!this.isViewActive("activity")},o("slot",{key:"dffe6de0a5a0f8eb87a0a39752af8e08b322b389",name:"activity"})),o("div",{key:"50487f7253b7960b24037aeddf0e527b82487a73",class:{"panel-tools__view":true,"panel-tools__view--active":this.isViewActive("agents"),"text-body-medium":true},hidden:!this.isViewActive("agents")},o("slot",{key:"73f3eb9a2509bd1041fced6e9e3bf060f6e84285",name:"agents"})))))))}get el(){return this}static get watchers(){return{open:[{openChanged:0}],activeTool:[{activeToolChanged:0}],items:[{itemsChanged:0}],itemsJson:[{itemsChanged:0}]}}static get style(){return g()}},[262,"ds-panel-tools",{open:[1540],activeTool:[1537,"active-tool"],items:[16],itemsJson:[1,"items-json"],motion:[32],readyForMotion:[32],rovingIndex:[32],activateTool:[64],closeDrawer:[64]},undefined,{open:[{openChanged:0}],activeTool:[{activeToolChanged:0}],items:[{itemsChanged:0}],itemsJson:[{itemsChanged:0}]}]);function b(){if(typeof customElements==="undefined"){return}const e=["ds-panel-tools","ds-badge","ds-button-unfilled-icon","ds-icon"];e.forEach((e=>{switch(e){case"ds-panel-tools":if(!customElements.get(i(e))){customElements.define(i(e),m)}break;case"ds-badge":if(!customElements.get(i(e))){l()}break;case"ds-button-unfilled-icon":if(!customElements.get(i(e))){r()}break;case"ds-icon":if(!customElements.get(i(e))){d()}break}}))}b();const _=m;const v=b;export{_ as DsPanelTools,v as defineCustomElement};
2
2
  //# sourceMappingURL=ds-panel-tools.js.map
package/dist/components/ds-panel-tools.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["PANEL_TOOLS_PRIMARY_TOOL_ID","PANEL_TOOLS_LABELS","search","messages","stacks","activity","agents","parsePanelToolsItems","items","itemsJson","parseJsonArrayProp","panelToolsDrawerResting","open","motion","resolvePanelToolActivation","activeTool","id","selected","panelToolsCss","PanelTools","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","readyForMotion","rovingIndex","motionEnableGeneration","handleTransitionEnd","event","target","el","querySelector","propertyName","dsChromeTransitionEnd","emit","source","handleToolChange","next","dsToolChange","handleRailKeyDown","e","index","orderedRailItems","length","key","preventDefault","focusRailAt","railItems","headerItem","find","item","bodyItems","filter","disconnectedCallback","removeEventListener","deferMotionEnable","generation","requestAnimationFrame","connectedCallback","addEventListener","openChanged","isOpen","wasOpen","undefined","dsChromeTransitionStart","phase","activeToolChanged","componentDidLoad","itemsChanged","isRailSelected","isDrawerPresent","isViewActive","headerLabel","activateTool","entry","inactive","closeDrawer","bounded","Math","max","min","actions","Array","from","querySelectorAll","focus","preventScroll","renderRailAction","h","class","icon","isActive","activeFill","dot","focusTabIndex","ariaLabel","pressed","onFocusin","onKeyDown","onDsClick","render","showDrawerChrome","drawerResting","Host","role","map","bodyIdx","inert","hidden","name"],"sources":["src/wc/components/PanelTools/panel-tools-types.ts","src/wc/components/PanelTools/panel-tools-utils.ts","src/wc/components/PanelTools/PanelTools.css?tag=ds-panel-tools&encapsulation=scoped","src/wc/components/PanelTools/PanelTools.tsx"],"sourcesContent":["/** Tool ids for the `ds-panel-tools` rail and drawer views. */\nexport type PanelToolsToolId = 'search' | 'agents' | 'messages' | 'stacks' | 'activity';\n\nexport const PANEL_TOOLS_TOOL_IDS: PanelToolsToolId[] = [\n 'search',\n 'agents',\n 'messages',\n 'stacks',\n 'activity',\n];\n\n/** Rail header slot — mirrors panel-nav M logo row. */\nexport const PANEL_TOOLS_PRIMARY_TOOL_ID: PanelToolsToolId = 'search';\n\nexport const PANEL_TOOLS_LABELS: Record<PanelToolsToolId, string> = {\n search: 'Search',\n messages: 'Messages',\n stacks: 'Stacks',\n activity: 'Activity',\n agents: 'Agents',\n};\n\nexport interface PanelToolsItem {\n id: PanelToolsToolId;\n /** Icon name for <ds-icon>. */\n icon: string;\n /** Whether this rail button is currently pressed/active. */\n selected?: boolean;\n /** Show a notification dot. */\n dot?: boolean;\n inactive?: boolean;\n ariaLabel?: string;\n}\n","import { parseJsonArrayProp } from '../BarNav/bar-nav-utils';\nimport type { PanelToolsItem, PanelToolsToolId } from './panel-tools-types';\n\nexport function parsePanelToolsItems(\n items: PanelToolsItem[],\n itemsJson: string,\n): PanelToolsItem[] {\n if (itemsJson) {\n return parseJsonArrayProp<PanelToolsItem>(itemsJson, []);\n }\n return items ?? [];\n}\n\nexport function shouldResyncPanelToolsItems(\n prev: PanelToolsItem[],\n next: PanelToolsItem[],\n): boolean {\n if (prev.length !== next.length) return true;\n return next.some((item, index) => {\n const prior = prev[index];\n if (!prior) return true;\n return (\n prior.id !== item.id ||\n prior.icon !== item.icon ||\n prior.selected !== item.selected ||\n prior.dot !== item.dot ||\n prior.inactive !== item.inactive ||\n prior.ariaLabel !== item.ariaLabel\n );\n });\n}\n\nexport type PanelToolsMotion = 'opening' | 'closing' | 'idle';\n\n/** True when the drawer clip is fully closed — safe to skip painting slot content. */\nexport function panelToolsDrawerResting(open: boolean, motion: PanelToolsMotion): boolean {\n return !open && motion === 'idle';\n}\n\n/** Toggle or switch rail tool selection — repeat activation closes the active tool. */\nexport function resolvePanelToolActivation(\n open: boolean,\n activeTool: PanelToolsToolId | '',\n id: PanelToolsToolId,\n): { open: boolean; activeTool: PanelToolsToolId; selected: boolean } {\n if (open && activeTool === id) {\n return { open: false, activeTool: id, selected: false };\n }\n return { open: true, activeTool: id, selected: true };\n}\n",":host {\n display: block;\n flex: 0 0 auto;\n box-sizing: border-box;\n height: 100%;\n min-height: 0;\n overflow: hidden;\n --_panel-tools-rail-width: var(--dimension-size-600);\n --_panel-tools-drawer-width: var(--dimension-panel-width-sm);\n --_panel-tools-border: var(--dimension-stroke-width-012, 1px) solid var(--color-border-tertiary);\n --_panel-tools-surface-bg: var(--color-background-secondary);\n /* Match panel-nav expand timing (medium-1); easing differs by direction. */\n --_panel-tools-expand-dur: var(--effect-animation-duration-medium-1, 300ms);\n}\n\n.panel-tools__layout {\n display: flex;\n flex-direction: row-reverse;\n align-items: stretch;\n height: 100%;\n min-height: 0;\n box-sizing: border-box;\n}\n\n/* Clip frame — only max-width animates (slide reveal, same as pre-rail :host). */\n.panel-tools__drawer {\n flex: 0 0 auto;\n max-width: 0;\n min-width: 0;\n height: 100%;\n min-height: 0;\n overflow: hidden;\n box-sizing: border-box;\n transition: none;\n}\n\n:host(.panel-tools--ready.panel-tools--motion-opening) .panel-tools__drawer {\n transition: max-width var(--_panel-tools-expand-dur)\n var(--effect-animation-easing-ease-out, ease-out);\n}\n\n:host(.panel-tools--ready.panel-tools--motion-closing) .panel-tools__drawer {\n transition: max-width var(--_panel-tools-expand-dur)\n var(--effect-animation-easing-ease-in, ease-in);\n}\n\n:host(.panel-tools--open) .panel-tools__drawer {\n max-width: var(--_panel-tools-drawer-width);\n}\n\n.panel-tools__drawer--visible {\n border-left: var(--_panel-tools-border);\n}\n\n/* Fixed-width surface — stays 400px while the clip frame opens/closes. */\n.panel-tools__drawer-surface {\n display: flex;\n flex-direction: column;\n width: var(--_panel-tools-drawer-width);\n height: 100%;\n min-height: 0;\n box-sizing: border-box;\n background-color: var(--_panel-tools-surface-bg);\n}\n\n/* Shell-owned chrome (bg + wash +/or grid) — drawer + rail are transparent frames. */\n:host-context(ds-app-shell[gradient]) .panel-tools__drawer-surface,\n:host-context(ds-app-shell[grid]) .panel-tools__drawer-surface,\n:host-context(ds-app-shell[gradient]) .panel-tools__rail,\n:host-context(ds-app-shell[grid]) .panel-tools__rail {\n background-color: transparent;\n}\n\n/* Aligns with ds-bar-nav row — same height, inset, border, and title token. */\n.panel-tools__header {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n height: var(--dimension-size-600);\n padding: var(--dimension-space-100);\n border-bottom: var(--_panel-tools-border);\n color: var(--color-foreground-primary);\n box-sizing: border-box;\n -webkit-user-select: none;\n user-select: none;\n}\n\n.panel-tools__title {\n display: inline-flex;\n align-items: center;\n height: var(--dimension-size-400);\n padding-inline: var(--dimension-space-100);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.panel-tools__body {\n flex: 1 1 auto;\n min-height: 0;\n overflow: auto;\n position: relative;\n}\n\n/* Skip paint while fully closed; cleared during open/close motion for WYSIWYG slide. */\n:host(.panel-tools--drawer-resting) .panel-tools__body {\n content-visibility: auto;\n contain-intrinsic-size: auto 200px;\n}\n\n.panel-tools__view {\n display: none;\n height: 100%;\n min-height: 0;\n box-sizing: border-box;\n padding: var(--dimension-space-200);\n color: var(--color-foreground-secondary);\n font-family: var(--typography-font-family);\n font-size: var(--typography-fontsize-md);\n line-height: var(--typography-lineheight-md);\n font-weight: var(--typography-weight-regular);\n letter-spacing: var(--typography-letterspacing-negative-half);\n}\n\n.panel-tools__view ::slotted(*) {\n margin: 0;\n color: var(--color-foreground-secondary);\n font-family: var(--typography-font-family);\n font-size: var(--typography-fontsize-md);\n line-height: var(--typography-lineheight-md);\n font-weight: var(--typography-weight-regular);\n letter-spacing: var(--typography-letterspacing-negative-half);\n}\n\n.panel-tools__view--active {\n display: block;\n}\n\n/* Rail — mirrors collapsed panel-nav width, padding, and item rhythm. */\n.panel-tools__rail {\n flex: 0 0 var(--_panel-tools-rail-width);\n width: var(--_panel-tools-rail-width);\n min-width: var(--_panel-tools-rail-width);\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n height: 100%;\n min-height: 0;\n border-left: var(--_panel-tools-border);\n background-color: var(--_panel-tools-surface-bg);\n}\n\n.panel-tools__rail-header {\n display: flex;\n align-items: center;\n justify-content: center;\n height: var(--dimension-size-600);\n padding: var(--dimension-space-100);\n flex-shrink: 0;\n box-sizing: border-box;\n border-bottom: var(--_panel-tools-border);\n}\n\n.panel-tools__rail-body {\n flex: 1 1 auto;\n min-height: 0;\n overflow-y: auto;\n overflow-x: hidden;\n display: flex;\n flex-direction: column;\n gap: var(--dimension-space-050);\n padding: var(--dimension-space-100);\n box-sizing: border-box;\n scrollbar-width: none;\n}\n\n.panel-tools__rail-body::-webkit-scrollbar {\n display: none;\n}\n\n.panel-tools__rail-action {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: var(--dimension-size-400);\n flex-shrink: 0;\n}\n","import { Component, Prop, Event, EventEmitter, Element, State, Watch, Method, h, Host } from '@stencil/core';\nimport type { ChromeTransitionDetail } from '../../nav/chrome-transition';\nimport {\n PANEL_TOOLS_LABELS,\n PANEL_TOOLS_PRIMARY_TOOL_ID,\n type PanelToolsItem,\n type PanelToolsToolId,\n} from './panel-tools-types';\nimport { parsePanelToolsItems, panelToolsDrawerResting, resolvePanelToolActivation } from './panel-tools-utils';\n\n@Component({\n tag: 'ds-panel-tools',\n styleUrl: 'PanelTools.css',\n scoped: true,\n})\nexport class PanelTools {\n @Element() el!: HTMLElement;\n\n /** When false, only the icon rail is shown. */\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /** Active tool view — `search`, `agents`, `messages`, `stacks`, or `activity`. */\n @Prop({ mutable: true, attribute: 'active-tool', reflect: true })\n activeTool: PanelToolsToolId | '' = '';\n\n /**\n * Rail items rendered in the right column.\n * Set via JS property: `el.items = [...]`. Replace the array reference to update.\n */\n @Prop() items: PanelToolsItem[] = [];\n\n /** JSON fallback for `items` — useful when framework bindings don't propagate arrays. */\n @Prop({ attribute: 'items-json' }) itemsJson: string = '';\n\n /** Emitted when a rail button is toggled. Detail = { id, selected }. */\n @Event({ bubbles: true, composed: true }) dsToolChange!: EventEmitter<{\n id: PanelToolsToolId;\n selected: boolean;\n }>;\n\n /** Bubbling lifecycle — `ds-bar-nav` defers overflow checks during drawer motion. */\n @Event({ bubbles: true, composed: true })\n dsChromeTransitionStart!: EventEmitter<ChromeTransitionDetail>;\n\n @Event({ bubbles: true, composed: true })\n dsChromeTransitionEnd!: EventEmitter<ChromeTransitionDetail>;\n\n /** Arms open vs close easing for the in-flight width transition. */\n @State() private motion: 'opening' | 'closing' | 'idle' = 'idle';\n\n /** Suppresses width transition until the host has painted its initial open state. */\n @State() private readyForMotion = false;\n\n @State() private rovingIndex = 0;\n\n private motionEnableGeneration = 0;\n\n private get railItems(): PanelToolsItem[] {\n return parsePanelToolsItems(this.items, this.itemsJson);\n }\n\n private get orderedRailItems(): PanelToolsItem[] {\n const railItems = this.railItems;\n const headerItem = railItems.find(item => item.id === PANEL_TOOLS_PRIMARY_TOOL_ID);\n const bodyItems = railItems.filter(item => item.id !== PANEL_TOOLS_PRIMARY_TOOL_ID);\n return headerItem ? [headerItem, ...bodyItems] : bodyItems;\n }\n\n disconnectedCallback() {\n this.el.removeEventListener('transitionend', this.handleTransitionEnd);\n this.motionEnableGeneration += 1;\n }\n\n private deferMotionEnable() {\n if (this.readyForMotion) return;\n const generation = ++this.motionEnableGeneration;\n requestAnimationFrame(() => {\n if (generation !== this.motionEnableGeneration) return;\n requestAnimationFrame(() => {\n if (generation !== this.motionEnableGeneration) return;\n this.readyForMotion = true;\n });\n });\n }\n\n connectedCallback() {\n this.el.addEventListener('transitionend', this.handleTransitionEnd);\n }\n\n @Watch('open')\n openChanged(isOpen: boolean, wasOpen?: boolean) {\n if (this.readyForMotion && wasOpen !== undefined && wasOpen !== isOpen) {\n this.motion = isOpen ? 'opening' : 'closing';\n this.dsChromeTransitionStart.emit({\n source: 'panel-tools',\n phase: isOpen ? 'opening' : 'closing',\n });\n }\n this.deferMotionEnable();\n }\n\n @Watch('activeTool')\n activeToolChanged() {\n this.deferMotionEnable();\n }\n\n componentDidLoad() {\n this.deferMotionEnable();\n }\n\n @Watch('items')\n @Watch('itemsJson')\n itemsChanged() {\n this.rovingIndex = 0;\n this.deferMotionEnable();\n }\n\n private handleTransitionEnd = (event: TransitionEvent) => {\n if (event.target !== this.el.querySelector('.panel-tools__drawer')) return;\n if (event.propertyName !== 'max-width') return;\n this.motion = 'idle';\n this.dsChromeTransitionEnd.emit({ source: 'panel-tools' });\n };\n\n /** Rail selection follows `open` immediately — independent of the slide animation. */\n private isRailSelected(id: PanelToolsToolId): boolean {\n return this.open && this.activeTool === id;\n }\n\n /** Drawer body stays mounted while the clip frame animates closed. */\n private isDrawerPresent(): boolean {\n return this.open || this.motion === 'closing';\n }\n\n private isViewActive(id: PanelToolsToolId): boolean {\n return this.isDrawerPresent() && this.activeTool === id;\n }\n\n private headerLabel(): string {\n if (!this.isDrawerPresent() || !this.activeTool) return '';\n return PANEL_TOOLS_LABELS[this.activeTool as PanelToolsToolId] ?? '';\n }\n\n private handleToolChange = (id: PanelToolsToolId) => {\n const next = resolvePanelToolActivation(this.open, this.activeTool, id);\n this.open = next.open;\n this.activeTool = next.activeTool;\n this.dsToolChange.emit({ id, selected: next.selected });\n };\n\n /** Toggle any rail tool open/closed — shell shortcuts ⌘/Ctrl+K/A/S/M/N call this. */\n @Method()\n async activateTool(id: PanelToolsToolId) {\n const item = this.railItems.find(entry => entry.id === id);\n if (!item || item.inactive) return;\n this.handleToolChange(id);\n }\n\n /** Close the tools drawer when open — used by shell keyboard shortcuts. */\n @Method()\n async closeDrawer() {\n if (!this.open) return;\n const id = this.activeTool;\n this.open = false;\n if (id) {\n this.dsToolChange.emit({ id, selected: false });\n }\n }\n\n private focusRailAt(index: number) {\n const items = this.orderedRailItems;\n if (!items.length) return;\n const bounded = Math.max(0, Math.min(index, items.length - 1));\n if (bounded === this.rovingIndex) return;\n this.rovingIndex = bounded;\n const actions = Array.from(\n this.el.querySelectorAll<HTMLElement>('.panel-tools__rail-action .button-icon'),\n );\n actions[bounded]?.focus({ preventScroll: true });\n }\n\n private handleRailKeyDown = (e: KeyboardEvent, index: number) => {\n const items = this.orderedRailItems;\n if (!items.length) return;\n\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n this.handleToolChange(items[index].id);\n return;\n }\n\n if (e.key === 'ArrowDown') {\n if (index >= items.length - 1) return;\n e.preventDefault();\n this.focusRailAt(index + 1);\n return;\n }\n\n if (e.key === 'ArrowUp') {\n if (index <= 0) return;\n e.preventDefault();\n this.focusRailAt(index - 1);\n }\n };\n\n private renderRailAction(item: PanelToolsItem, index: number) {\n return (\n <ds-button-unfilled-icon\n key={item.id}\n class=\"panel-tools__rail-action\"\n icon={item.icon}\n isActive={this.isRailSelected(item.id)}\n activeFill={false}\n dot={item.dot ?? false}\n inactive={item.inactive}\n focusTabIndex={index === this.rovingIndex ? 0 : -1}\n aria-label={item.ariaLabel ?? PANEL_TOOLS_LABELS[item.id]}\n pressed={this.isRailSelected(item.id)}\n onFocusin={() => { this.rovingIndex = index; }}\n onKeyDown={(e: KeyboardEvent) => this.handleRailKeyDown(e, index)}\n onDsClick={() => this.handleToolChange(item.id)}\n />\n );\n }\n\n render() {\n const headerLabel = this.headerLabel();\n const orderedRailItems = this.orderedRailItems;\n const headerItem = orderedRailItems.find(item => item.id === PANEL_TOOLS_PRIMARY_TOOL_ID);\n const bodyItems = orderedRailItems.filter(item => item.id !== PANEL_TOOLS_PRIMARY_TOOL_ID);\n const showDrawerChrome = this.isDrawerPresent();\n const drawerResting = panelToolsDrawerResting(this.open, this.motion);\n\n return (\n <Host\n class={{\n 'panel-tools': true,\n 'panel-tools--open': this.open,\n 'panel-tools--ready': this.readyForMotion,\n 'panel-tools--motion-opening': this.motion === 'opening',\n 'panel-tools--motion-closing': this.motion === 'closing',\n 'panel-tools--drawer-resting': drawerResting,\n }}\n role=\"complementary\"\n aria-label=\"Tools\"\n >\n <div class=\"panel-tools__layout\">\n <nav class=\"panel-tools__rail\" aria-label=\"Tool shortcuts\">\n {headerItem ? (\n <div class=\"panel-tools__rail-header\">\n {this.renderRailAction(headerItem, 0)}\n </div>\n ) : null}\n <div class=\"panel-tools__rail-body\">\n {bodyItems.map((item, bodyIdx) =>\n this.renderRailAction(item, headerItem ? bodyIdx + 1 : bodyIdx),\n )}\n </div>\n </nav>\n\n <div\n class={{\n 'panel-tools__drawer': true,\n 'panel-tools__drawer--visible': showDrawerChrome,\n }}\n aria-hidden={showDrawerChrome ? null : 'true'}\n inert={showDrawerChrome ? undefined : true}\n >\n <div class=\"panel-tools__drawer-surface\">\n <header class=\"panel-tools__header\">\n <span class=\"panel-tools__title text-body-medium-emphasis\">{headerLabel}</span>\n </header>\n <div class=\"panel-tools__body\">\n <div\n class={{\n 'panel-tools__view': true,\n 'panel-tools__view--active': this.isViewActive('search'),\n 'text-body-medium': true,\n }}\n hidden={!this.isViewActive('search')}\n >\n <slot name=\"search\" />\n </div>\n <div\n class={{\n 'panel-tools__view': true,\n 'panel-tools__view--active': this.isViewActive('messages'),\n 'text-body-medium': true,\n }}\n hidden={!this.isViewActive('messages')}\n >\n <slot name=\"messages\" />\n </div>\n <div\n class={{\n 'panel-tools__view': true,\n 'panel-tools__view--active': this.isViewActive('stacks'),\n 'text-body-medium': true,\n }}\n hidden={!this.isViewActive('stacks')}\n >\n <slot name=\"stacks\" />\n </div>\n <div\n class={{\n 'panel-tools__view': true,\n 'panel-tools__view--active': this.isViewActive('activity'),\n 'text-body-medium': true,\n }}\n hidden={!this.isViewActive('activity')}\n >\n <slot name=\"activity\" />\n </div>\n <div\n class={{\n 'panel-tools__view': true,\n 'panel-tools__view--active': this.isViewActive('agents'),\n 'text-body-medium': true,\n }}\n hidden={!this.isViewActive('agents')}\n >\n <slot name=\"agents\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["PANEL_TOOLS_PRIMARY_TOOL_ID","PANEL_TOOLS_LABELS","search","messages","stacks","activity","agents","parsePanelToolsItems","items","itemsJson","parseJsonArrayProp","panelToolsDrawerResting","open","motion","resolvePanelToolActivation","activeTool","id","selected","panelToolsCss","PanelTools","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","readyForMotion","rovingIndex","motionEnableGeneration","handleTransitionEnd","event","target","el","querySelector","propertyName","dsChromeTransitionEnd","emit","source","handleToolChange","next","dsToolChange","handleRailKeyDown","e","index","orderedRailItems","length","key","preventDefault","focusRailAt","railItems","headerItem","find","item","bodyItems","filter","disconnectedCallback","removeEventListener","deferMotionEnable","generation","requestAnimationFrame","connectedCallback","addEventListener","openChanged","isOpen","wasOpen","undefined","dsChromeTransitionStart","phase","activeToolChanged","componentDidLoad","itemsChanged","isRailSelected","isDrawerPresent","isViewActive","headerLabel","activateTool","entry","inactive","closeDrawer","bounded","Math","max","min","actions","Array","from","querySelectorAll","focus","preventScroll","renderRailAction","h","class","icon","isActive","activeFill","dot","focusTabIndex","ariaLabel","pressed","onFocusin","onKeyDown","onDsClick","render","showDrawerChrome","drawerResting","Host","role","map","bodyIdx","inert","hidden","name"],"sources":["src/wc/components/PanelTools/panel-tools-types.ts","src/wc/components/PanelTools/panel-tools-utils.ts","src/wc/components/PanelTools/PanelTools.css?tag=ds-panel-tools&encapsulation=scoped","src/wc/components/PanelTools/PanelTools.tsx"],"sourcesContent":["/** Tool ids for the `ds-panel-tools` rail and drawer views. */\nexport type PanelToolsToolId = 'search' | 'agents' | 'messages' | 'stacks' | 'activity';\n\nexport const PANEL_TOOLS_TOOL_IDS: PanelToolsToolId[] = [\n 'search',\n 'agents',\n 'messages',\n 'stacks',\n 'activity',\n];\n\n/** Rail header slot — mirrors panel-nav M logo row. */\nexport const PANEL_TOOLS_PRIMARY_TOOL_ID: PanelToolsToolId = 'search';\n\nexport const PANEL_TOOLS_LABELS: Record<PanelToolsToolId, string> = {\n search: 'Search',\n messages: 'Messages',\n stacks: 'Stacks',\n activity: 'Activity',\n agents: 'Agents',\n};\n\nexport interface PanelToolsItem {\n id: PanelToolsToolId;\n /** Icon name for <ds-icon>. */\n icon: string;\n /** Whether this rail button is currently pressed/active. */\n selected?: boolean;\n /** Show a notification dot. */\n dot?: boolean;\n inactive?: boolean;\n ariaLabel?: string;\n}\n","import { parseJsonArrayProp } from '../BarNav/bar-nav-utils';\nimport type { PanelToolsItem, PanelToolsToolId } from './panel-tools-types';\n\nexport function parsePanelToolsItems(\n items: PanelToolsItem[],\n itemsJson: string,\n): PanelToolsItem[] {\n if (itemsJson) {\n return parseJsonArrayProp<PanelToolsItem>(itemsJson, []);\n }\n return items ?? [];\n}\n\nexport function shouldResyncPanelToolsItems(\n prev: PanelToolsItem[],\n next: PanelToolsItem[],\n): boolean {\n if (prev.length !== next.length) return true;\n return next.some((item, index) => {\n const prior = prev[index];\n if (!prior) return true;\n return (\n prior.id !== item.id ||\n prior.icon !== item.icon ||\n prior.selected !== item.selected ||\n prior.dot !== item.dot ||\n prior.inactive !== item.inactive ||\n prior.ariaLabel !== item.ariaLabel\n );\n });\n}\n\nexport type PanelToolsMotion = 'opening' | 'closing' | 'idle';\n\n/** True when the drawer clip is fully closed — safe to skip painting slot content. */\nexport function panelToolsDrawerResting(open: boolean, motion: PanelToolsMotion): boolean {\n return !open && motion === 'idle';\n}\n\n/** Toggle or switch rail tool selection — repeat activation closes the active tool. */\nexport function resolvePanelToolActivation(\n open: boolean,\n activeTool: PanelToolsToolId | '',\n id: PanelToolsToolId,\n): { open: boolean; activeTool: PanelToolsToolId; selected: boolean } {\n if (open && activeTool === id) {\n return { open: false, activeTool: id, selected: false };\n }\n return { open: true, activeTool: id, selected: true };\n}\n",":host {\n display: block;\n flex: 0 0 auto;\n box-sizing: border-box;\n height: 100%;\n min-height: 0;\n overflow: hidden;\n --_panel-tools-rail-width: var(--dimension-size-600);\n --_panel-tools-drawer-width: var(--dimension-panel-width-sm);\n --_panel-tools-border: var(--dimension-stroke-width-012, 1px) solid var(--color-border-tertiary);\n --_panel-tools-surface-bg: var(--color-background-secondary);\n /* Match panel-nav expand timing (medium-1); easing differs by direction. */\n --_panel-tools-expand-dur: var(--effect-animation-duration-medium-1, 300ms);\n}\n\n.panel-tools__layout {\n display: flex;\n flex-direction: row-reverse;\n align-items: stretch;\n height: 100%;\n min-height: 0;\n box-sizing: border-box;\n}\n\n/* Clip frame — only max-width animates (slide reveal, same as pre-rail :host). */\n.panel-tools__drawer {\n flex: 0 0 auto;\n max-width: 0;\n min-width: 0;\n height: 100%;\n min-height: 0;\n overflow: hidden;\n box-sizing: border-box;\n transition: none;\n}\n\n:host(.panel-tools--ready.panel-tools--motion-opening) .panel-tools__drawer {\n transition: max-width var(--_panel-tools-expand-dur)\n var(--effect-animation-easing-ease-out, ease-out);\n}\n\n:host(.panel-tools--ready.panel-tools--motion-closing) .panel-tools__drawer {\n transition: max-width var(--_panel-tools-expand-dur)\n var(--effect-animation-easing-ease-in, ease-in);\n}\n\n:host(.panel-tools--open) .panel-tools__drawer {\n max-width: var(--_panel-tools-drawer-width);\n}\n\n.panel-tools__drawer--visible {\n border-left: var(--_panel-tools-border);\n}\n\n/* Fixed-width surface — stays 400px while the clip frame opens/closes. */\n.panel-tools__drawer-surface {\n display: flex;\n flex-direction: column;\n width: var(--_panel-tools-drawer-width);\n height: 100%;\n min-height: 0;\n box-sizing: border-box;\n background-color: var(--_panel-tools-surface-bg);\n}\n\n/* Shell-owned chrome (bg + wash +/or grid) — drawer + rail are transparent frames. */\n:host-context(ds-app-shell[gradient]) .panel-tools__drawer-surface,\n:host-context(ds-app-shell[grid]) .panel-tools__drawer-surface,\n:host-context(ds-app-shell[gradient]) .panel-tools__rail,\n:host-context(ds-app-shell[grid]) .panel-tools__rail {\n background-color: transparent;\n}\n\n/* Aligns with ds-bar-nav row — same height, inset, border, and title token. */\n.panel-tools__header {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n height: var(--dimension-size-600);\n padding: var(--dimension-space-100);\n border-bottom: var(--_panel-tools-border);\n color: var(--color-foreground-primary);\n box-sizing: border-box;\n -webkit-user-select: none;\n user-select: none;\n}\n\n.panel-tools__title {\n display: inline-flex;\n align-items: center;\n height: var(--dimension-size-400);\n padding-inline: var(--dimension-space-100);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.panel-tools__body {\n flex: 1 1 auto;\n min-height: 0;\n overflow: auto;\n position: relative;\n}\n\n/* Skip paint while fully closed; cleared during open/close motion for WYSIWYG slide. */\n:host(.panel-tools--drawer-resting) .panel-tools__body {\n content-visibility: auto;\n contain-intrinsic-size: auto 200px;\n}\n\n.panel-tools__view {\n display: none;\n height: 100%;\n min-height: 0;\n box-sizing: border-box;\n padding: var(--dimension-space-200);\n color: var(--color-foreground-secondary);\n font-family: var(--typography-font-family);\n font-size: var(--typography-fontsize-md);\n line-height: var(--typography-lineheight-md);\n font-weight: var(--typography-weight-regular);\n letter-spacing: var(--typography-letterspacing-negative-half);\n}\n\n.panel-tools__view ::slotted(*) {\n margin: 0;\n color: var(--color-foreground-secondary);\n font-family: var(--typography-font-family);\n font-size: var(--typography-fontsize-md);\n line-height: var(--typography-lineheight-md);\n font-weight: var(--typography-weight-regular);\n letter-spacing: var(--typography-letterspacing-negative-half);\n}\n\n.panel-tools__view--active {\n display: block;\n}\n\n/* Rail — mirrors collapsed panel-nav width, padding, and item rhythm. */\n.panel-tools__rail {\n flex: 0 0 var(--_panel-tools-rail-width);\n width: var(--_panel-tools-rail-width);\n min-width: var(--_panel-tools-rail-width);\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n height: 100%;\n min-height: 0;\n border-left: var(--_panel-tools-border);\n background-color: var(--_panel-tools-surface-bg);\n}\n\n.panel-tools__rail-header {\n display: flex;\n align-items: center;\n justify-content: center;\n height: var(--dimension-size-600);\n padding: var(--dimension-space-100);\n flex-shrink: 0;\n box-sizing: border-box;\n border-bottom: var(--_panel-tools-border);\n}\n\n.panel-tools__rail-body {\n flex: 1 1 auto;\n min-height: 0;\n overflow-y: auto;\n overflow-x: hidden;\n display: flex;\n flex-direction: column;\n gap: var(--dimension-space-050);\n padding: var(--dimension-space-100);\n box-sizing: border-box;\n scrollbar-width: none;\n}\n\n.panel-tools__rail-body::-webkit-scrollbar {\n display: none;\n}\n\n.panel-tools__rail-action {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: var(--dimension-size-400);\n flex-shrink: 0;\n}\n","import { Component, Prop, Event, EventEmitter, Element, State, Watch, Method, h, Host } from '@stencil/core';\nimport type { ChromeTransitionDetail } from '../../nav/chrome-transition';\nimport {\n PANEL_TOOLS_LABELS,\n PANEL_TOOLS_PRIMARY_TOOL_ID,\n type PanelToolsItem,\n type PanelToolsToolId,\n} from './panel-tools-types';\nimport { parsePanelToolsItems, panelToolsDrawerResting, resolvePanelToolActivation } from './panel-tools-utils';\n\n@Component({\n tag: 'ds-panel-tools',\n styleUrl: 'PanelTools.css',\n scoped: true,\n})\nexport class PanelTools {\n @Element() el!: HTMLElement;\n\n /** When false, only the icon rail is shown. */\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /** Active tool view — `search`, `agents`, `messages`, `stacks`, or `activity`. */\n @Prop({ mutable: true, attribute: 'active-tool', reflect: true })\n activeTool: PanelToolsToolId | '' = '';\n\n /**\n * Rail items rendered in the right column.\n * Set via JS property: `el.items = [...]`. Replace the array reference to update.\n */\n @Prop() items: PanelToolsItem[] = [];\n\n /** JSON fallback for `items` — useful when framework bindings don't propagate arrays. */\n @Prop({ attribute: 'items-json' }) itemsJson: string = '';\n\n /** Emitted when a rail button is toggled. Detail = { id, selected }. */\n @Event({ bubbles: true, composed: true }) dsToolChange!: EventEmitter<{\n id: PanelToolsToolId;\n selected: boolean;\n }>;\n\n /** Bubbling lifecycle — `ds-bar-nav` defers overflow checks during drawer motion. */\n @Event({ bubbles: true, composed: true })\n dsChromeTransitionStart!: EventEmitter<ChromeTransitionDetail>;\n\n @Event({ bubbles: true, composed: true })\n dsChromeTransitionEnd!: EventEmitter<ChromeTransitionDetail>;\n\n /** Arms open vs close easing for the in-flight width transition. */\n @State() private motion: 'opening' | 'closing' | 'idle' = 'idle';\n\n /** Suppresses width transition until the host has painted its initial open state. */\n @State() private readyForMotion = false;\n\n @State() private rovingIndex = 0;\n\n private motionEnableGeneration = 0;\n\n private get railItems(): PanelToolsItem[] {\n return parsePanelToolsItems(this.items, this.itemsJson);\n }\n\n private get orderedRailItems(): PanelToolsItem[] {\n const railItems = this.railItems;\n const headerItem = railItems.find(item => item.id === PANEL_TOOLS_PRIMARY_TOOL_ID);\n const bodyItems = railItems.filter(item => item.id !== PANEL_TOOLS_PRIMARY_TOOL_ID);\n return headerItem ? [headerItem, ...bodyItems] : bodyItems;\n }\n\n disconnectedCallback() {\n this.el.removeEventListener('transitionend', this.handleTransitionEnd);\n this.motionEnableGeneration += 1;\n }\n\n private deferMotionEnable() {\n if (this.readyForMotion) return;\n const generation = ++this.motionEnableGeneration;\n requestAnimationFrame(() => {\n if (generation !== this.motionEnableGeneration) return;\n requestAnimationFrame(() => {\n if (generation !== this.motionEnableGeneration) return;\n this.readyForMotion = true;\n });\n });\n }\n\n connectedCallback() {\n this.el.addEventListener('transitionend', this.handleTransitionEnd);\n }\n\n @Watch('open')\n openChanged(isOpen: boolean, wasOpen?: boolean) {\n if (this.readyForMotion && wasOpen !== undefined && wasOpen !== isOpen) {\n this.motion = isOpen ? 'opening' : 'closing';\n this.dsChromeTransitionStart.emit({\n source: 'panel-tools',\n phase: isOpen ? 'opening' : 'closing',\n });\n }\n this.deferMotionEnable();\n }\n\n @Watch('activeTool')\n activeToolChanged() {\n this.deferMotionEnable();\n }\n\n componentDidLoad() {\n this.deferMotionEnable();\n }\n\n @Watch('items')\n @Watch('itemsJson')\n itemsChanged() {\n this.rovingIndex = 0;\n this.deferMotionEnable();\n }\n\n private handleTransitionEnd = (event: TransitionEvent) => {\n if (event.target !== this.el.querySelector('.panel-tools__drawer')) return;\n if (event.propertyName !== 'max-width') return;\n this.motion = 'idle';\n this.dsChromeTransitionEnd.emit({ source: 'panel-tools' });\n };\n\n /** Rail selection follows `open` immediately — independent of the slide animation. */\n private isRailSelected(id: PanelToolsToolId): boolean {\n return this.open && this.activeTool === id;\n }\n\n /** Drawer body stays mounted while the clip frame animates closed. */\n private isDrawerPresent(): boolean {\n return this.open || this.motion === 'closing';\n }\n\n private isViewActive(id: PanelToolsToolId): boolean {\n return this.isDrawerPresent() && this.activeTool === id;\n }\n\n private headerLabel(): string {\n if (!this.isDrawerPresent() || !this.activeTool) return '';\n return PANEL_TOOLS_LABELS[this.activeTool as PanelToolsToolId] ?? '';\n }\n\n private handleToolChange = (id: PanelToolsToolId) => {\n const next = resolvePanelToolActivation(this.open, this.activeTool, id);\n this.open = next.open;\n this.activeTool = next.activeTool;\n this.dsToolChange.emit({ id, selected: next.selected });\n };\n\n /** Toggle any rail tool open/closed — shell shortcuts K/A/S/M/N call this. */\n @Method()\n async activateTool(id: PanelToolsToolId) {\n const item = this.railItems.find(entry => entry.id === id);\n if (!item || item.inactive) return;\n this.handleToolChange(id);\n }\n\n /** Close the tools drawer when open — used by shell keyboard shortcuts. */\n @Method()\n async closeDrawer() {\n if (!this.open) return;\n const id = this.activeTool;\n this.open = false;\n if (id) {\n this.dsToolChange.emit({ id, selected: false });\n }\n }\n\n private focusRailAt(index: number) {\n const items = this.orderedRailItems;\n if (!items.length) return;\n const bounded = Math.max(0, Math.min(index, items.length - 1));\n if (bounded === this.rovingIndex) return;\n this.rovingIndex = bounded;\n const actions = Array.from(\n this.el.querySelectorAll<HTMLElement>('.panel-tools__rail-action .button-icon'),\n );\n actions[bounded]?.focus({ preventScroll: true });\n }\n\n private handleRailKeyDown = (e: KeyboardEvent, index: number) => {\n const items = this.orderedRailItems;\n if (!items.length) return;\n\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n this.handleToolChange(items[index].id);\n return;\n }\n\n if (e.key === 'ArrowDown') {\n if (index >= items.length - 1) return;\n e.preventDefault();\n this.focusRailAt(index + 1);\n return;\n }\n\n if (e.key === 'ArrowUp') {\n if (index <= 0) return;\n e.preventDefault();\n this.focusRailAt(index - 1);\n }\n };\n\n private renderRailAction(item: PanelToolsItem, index: number) {\n return (\n <ds-button-unfilled-icon\n key={item.id}\n class=\"panel-tools__rail-action\"\n icon={item.icon}\n isActive={this.isRailSelected(item.id)}\n activeFill={false}\n dot={item.dot ?? false}\n inactive={item.inactive}\n focusTabIndex={index === this.rovingIndex ? 0 : -1}\n aria-label={item.ariaLabel ?? PANEL_TOOLS_LABELS[item.id]}\n pressed={this.isRailSelected(item.id)}\n onFocusin={() => { this.rovingIndex = index; }}\n onKeyDown={(e: KeyboardEvent) => this.handleRailKeyDown(e, index)}\n onDsClick={() => this.handleToolChange(item.id)}\n />\n );\n }\n\n render() {\n const headerLabel = this.headerLabel();\n const orderedRailItems = this.orderedRailItems;\n const headerItem = orderedRailItems.find(item => item.id === PANEL_TOOLS_PRIMARY_TOOL_ID);\n const bodyItems = orderedRailItems.filter(item => item.id !== PANEL_TOOLS_PRIMARY_TOOL_ID);\n const showDrawerChrome = this.isDrawerPresent();\n const drawerResting = panelToolsDrawerResting(this.open, this.motion);\n\n return (\n <Host\n class={{\n 'panel-tools': true,\n 'panel-tools--open': this.open,\n 'panel-tools--ready': this.readyForMotion,\n 'panel-tools--motion-opening': this.motion === 'opening',\n 'panel-tools--motion-closing': this.motion === 'closing',\n 'panel-tools--drawer-resting': drawerResting,\n }}\n role=\"complementary\"\n aria-label=\"Tools\"\n >\n <div class=\"panel-tools__layout\">\n <nav class=\"panel-tools__rail\" aria-label=\"Tool shortcuts\">\n {headerItem ? (\n <div class=\"panel-tools__rail-header\">\n {this.renderRailAction(headerItem, 0)}\n </div>\n ) : null}\n <div class=\"panel-tools__rail-body\">\n {bodyItems.map((item, bodyIdx) =>\n this.renderRailAction(item, headerItem ? bodyIdx + 1 : bodyIdx),\n )}\n </div>\n </nav>\n\n <div\n class={{\n 'panel-tools__drawer': true,\n 'panel-tools__drawer--visible': showDrawerChrome,\n }}\n aria-hidden={showDrawerChrome ? null : 'true'}\n inert={showDrawerChrome ? undefined : true}\n >\n <div class=\"panel-tools__drawer-surface\">\n <header class=\"panel-tools__header\">\n <span class=\"panel-tools__title text-body-medium-emphasis\">{headerLabel}</span>\n </header>\n <div class=\"panel-tools__body\">\n <div\n class={{\n 'panel-tools__view': true,\n 'panel-tools__view--active': this.isViewActive('search'),\n 'text-body-medium': true,\n }}\n hidden={!this.isViewActive('search')}\n >\n <slot name=\"search\" />\n </div>\n <div\n class={{\n 'panel-tools__view': true,\n 'panel-tools__view--active': this.isViewActive('messages'),\n 'text-body-medium': true,\n }}\n hidden={!this.isViewActive('messages')}\n >\n <slot name=\"messages\" />\n </div>\n <div\n class={{\n 'panel-tools__view': true,\n 'panel-tools__view--active': this.isViewActive('stacks'),\n 'text-body-medium': true,\n }}\n hidden={!this.isViewActive('stacks')}\n >\n <slot name=\"stacks\" />\n </div>\n <div\n class={{\n 'panel-tools__view': true,\n 'panel-tools__view--active': this.isViewActive('activity'),\n 'text-body-medium': true,\n }}\n hidden={!this.isViewActive('activity')}\n >\n <slot name=\"activity\" />\n </div>\n <div\n class={{\n 'panel-tools__view': true,\n 'panel-tools__view--active': this.isViewActive('agents'),\n 'text-body-medium': true,\n }}\n hidden={!this.isViewActive('agents')}\n >\n <slot name=\"agents\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
package/dist/types/components/AppShell/AppShell.d.ts CHANGED
@@ -11,7 +11,7 @@ export declare class AppShell {
11
11
  * When set, overrides the built-in radial wash.
12
12
  */
13
13
  gradientSrc: string;
14
- /** When `true` (default), registers global shell keyboard shortcuts. Tool chords (⌘/Ctrl+K/A/S/M/N) toggle their drawer open and closed; ⌘/Ctrl+[ toggles panel nav; ⌘/Ctrl+] closes any open tool drawer. */
14
+ /** When `true` (default), registers global shell keyboard shortcuts. `[` toggles panel nav; `]` closes tools; K/A/S/M/N toggle tool drawers. Modifiers are ignored so browser chords like ⌘N stay native. */
15
15
  shortcutsEnabled: boolean;
16
16
  el: HTMLElement;
17
17
  private resizeObserver;
package/dist/types/components/PanelTools/PanelTools.d.ts CHANGED
@@ -45,7 +45,7 @@ export declare class PanelTools {
45
45
  private isViewActive;
46
46
  private headerLabel;
47
47
  private handleToolChange;
48
- /** Toggle any rail tool open/closed — shell shortcuts ⌘/Ctrl+K/A/S/M/N call this. */
48
+ /** Toggle any rail tool open/closed — shell shortcuts K/A/S/M/N call this. */
49
49
  activateTool(id: PanelToolsToolId): Promise<void>;
50
50
  /** Close the tools drawer when open — used by shell keyboard shortcuts. */
51
51
  closeDrawer(): Promise<void>;
package/dist/types/components.d.ts CHANGED
@@ -119,7 +119,7 @@ export namespace Components {
119
119
  */
120
120
  "navStyle": NavChromeStyle;
121
121
  /**
122
- * When `true` (default), registers global shell keyboard shortcuts. Tool chords (⌘/Ctrl+K/A/S/M/N) toggle their drawer open and closed; ⌘/Ctrl+[ toggles panel nav; ⌘/Ctrl+] closes any open tool drawer.
122
+ * When `true` (default), registers global shell keyboard shortcuts. `[` toggles panel nav; `]` closes tools; K/A/S/M/N toggle tool drawers. Modifiers are ignored so browser chords like ⌘N stay native.
123
123
  * @default true
124
124
  */
125
125
  "shortcutsEnabled": boolean;
@@ -719,7 +719,7 @@ export namespace Components {
719
719
  }
720
720
  interface DsPanelTools {
721
721
  /**
722
- * Toggle any rail tool open/closed — shell shortcuts ⌘/Ctrl+K/A/S/M/N call this.
722
+ * Toggle any rail tool open/closed — shell shortcuts K/A/S/M/N call this.
723
723
  */
724
724
  "activateTool": (id: PanelToolsToolId) => Promise<void>;
725
725
  /**
@@ -1856,7 +1856,7 @@ declare namespace LocalJSX {
1856
1856
  */
1857
1857
  "navStyle"?: NavChromeStyle;
1858
1858
  /**
1859
- * When `true` (default), registers global shell keyboard shortcuts. Tool chords (⌘/Ctrl+K/A/S/M/N) toggle their drawer open and closed; ⌘/Ctrl+[ toggles panel nav; ⌘/Ctrl+] closes any open tool drawer.
1859
+ * When `true` (default), registers global shell keyboard shortcuts. `[` toggles panel nav; `]` closes tools; K/A/S/M/N toggle tool drawers. Modifiers are ignored so browser chords like ⌘N stay native.
1860
1860
  * @default true
1861
1861
  */
1862
1862
  "shortcutsEnabled"?: boolean;
package/dist/types/nav/shell-shortcuts.d.ts CHANGED
@@ -1,10 +1,10 @@
1
1
  import type { PanelToolsToolId } from '../components/PanelTools/panel-tools-types';
2
2
  export type ShellShortcutAction = 'toggle-panel-nav' | 'close-panel-tools' | `open-tool:${PanelToolsToolId}`;
3
- /** Tool shortcut chords (⌘/Ctrl+K/A/S/M/N) toggle open/closed via `ds-panel-tools.activateTool`. */
4
- /** True when Cmd (macOS) or Ctrl (Windows/Linux) is held without Alt/Shift. */
5
- export declare function isShellShortcutModifier(e: Pick<KeyboardEvent, 'metaKey' | 'ctrlKey' | 'altKey' | 'shiftKey'>): boolean;
3
+ /** Tool shortcut keys (K/A/S/M/N) toggle open/closed via `ds-panel-tools.activateTool`. */
4
+ /** True when no modifier keys are held — avoids browser/app chords like ⌘N. */
5
+ export declare function isBareShellShortcutKey(e: Pick<KeyboardEvent, 'metaKey' | 'ctrlKey' | 'altKey' | 'shiftKey'>): boolean;
6
6
  /** Skip shell shortcuts while typing in an editable control. */
7
7
  export declare function isEditableShortcutTarget(target: EventTarget | null): boolean;
8
- /** Resolve a shell chrome shortcut, or `null` when the chord is not handled. */
8
+ /** Resolve a shell chrome shortcut, or `null` when the key is not handled. */
9
9
  export declare function resolveShellShortcut(e: Pick<KeyboardEvent, 'key' | 'code' | 'metaKey' | 'ctrlKey' | 'altKey' | 'shiftKey'>): ShellShortcutAction | null;
10
10
  //# sourceMappingURL=shell-shortcuts.d.ts.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ds-mo/ui",
3
- "version": "2.4.0",
3
+ "version": "2.4.1",
4
4
  "description": "CompoMo — composable web components styled with TokoMo design tokens",
5
5
  "keywords": [
6
6
  "web-components",
package/src/wc/components/AppShell/AppShell.tsx CHANGED
@@ -53,7 +53,7 @@ export class AppShell {
53
53
  */
54
54
  @Prop() gradientSrc: string = '';
55
55
 
56
- /** When `true` (default), registers global shell keyboard shortcuts. Tool chords (⌘/Ctrl+K/A/S/M/N) toggle their drawer open and closed; ⌘/Ctrl+[ toggles panel nav; ⌘/Ctrl+] closes any open tool drawer. */
56
+ /** When `true` (default), registers global shell keyboard shortcuts. `[` toggles panel nav; `]` closes tools; K/A/S/M/N toggle tool drawers. Modifiers are ignored so browser chords like ⌘N stay native. */
57
57
  @Prop({ attribute: 'shortcuts-enabled' }) shortcutsEnabled: boolean = true;
58
58
 
59
59
  @Element() el!: HTMLElement;
package/src/wc/components/PanelTools/PanelTools.tsx CHANGED
@@ -148,7 +148,7 @@ export class PanelTools {
148
148
  this.dsToolChange.emit({ id, selected: next.selected });
149
149
  };
150
150
 
151
- /** Toggle any rail tool open/closed — shell shortcuts ⌘/Ctrl+K/A/S/M/N call this. */
151
+ /** Toggle any rail tool open/closed — shell shortcuts K/A/S/M/N call this. */
152
152
  @Method()
153
153
  async activateTool(id: PanelToolsToolId) {
154
154
  const item = this.railItems.find(entry => entry.id === id);
package/src/wc/components.d.ts CHANGED
@@ -119,7 +119,7 @@ export namespace Components {
119
119
  */
120
120
  "navStyle": NavChromeStyle;
121
121
  /**
122
- * When `true` (default), registers global shell keyboard shortcuts. Tool chords (⌘/Ctrl+K/A/S/M/N) toggle their drawer open and closed; ⌘/Ctrl+[ toggles panel nav; ⌘/Ctrl+] closes any open tool drawer.
122
+ * When `true` (default), registers global shell keyboard shortcuts. `[` toggles panel nav; `]` closes tools; K/A/S/M/N toggle tool drawers. Modifiers are ignored so browser chords like ⌘N stay native.
123
123
  * @default true
124
124
  */
125
125
  "shortcutsEnabled": boolean;
@@ -719,7 +719,7 @@ export namespace Components {
719
719
  }
720
720
  interface DsPanelTools {
721
721
  /**
722
- * Toggle any rail tool open/closed — shell shortcuts ⌘/Ctrl+K/A/S/M/N call this.
722
+ * Toggle any rail tool open/closed — shell shortcuts K/A/S/M/N call this.
723
723
  */
724
724
  "activateTool": (id: PanelToolsToolId) => Promise<void>;
725
725
  /**
@@ -1856,7 +1856,7 @@ declare namespace LocalJSX {
1856
1856
  */
1857
1857
  "navStyle"?: NavChromeStyle;
1858
1858
  /**
1859
- * When `true` (default), registers global shell keyboard shortcuts. Tool chords (⌘/Ctrl+K/A/S/M/N) toggle their drawer open and closed; ⌘/Ctrl+[ toggles panel nav; ⌘/Ctrl+] closes any open tool drawer.
1859
+ * When `true` (default), registers global shell keyboard shortcuts. `[` toggles panel nav; `]` closes tools; K/A/S/M/N toggle tool drawers. Modifiers are ignored so browser chords like ⌘N stay native.
1860
1860
  * @default true
1861
1861
  */
1862
1862
  "shortcutsEnabled"?: boolean;
package/src/wc/nav/shell-shortcuts.ts CHANGED
@@ -13,13 +13,13 @@ const TOOL_SHORTCUT_KEYS: Record<string, PanelToolsToolId> = {
13
13
  n: 'activity',
14
14
  };
15
15
 
16
- /** Tool shortcut chords (⌘/Ctrl+K/A/S/M/N) toggle open/closed via `ds-panel-tools.activateTool`. */
16
+ /** Tool shortcut keys (K/A/S/M/N) toggle open/closed via `ds-panel-tools.activateTool`. */
17
17
 
18
- /** True when Cmd (macOS) or Ctrl (Windows/Linux) is held without Alt/Shift. */
19
- export function isShellShortcutModifier(
18
+ /** True when no modifier keys are held — avoids browser/app chords like ⌘N. */
19
+ export function isBareShellShortcutKey(
20
20
  e: Pick<KeyboardEvent, 'metaKey' | 'ctrlKey' | 'altKey' | 'shiftKey'>,
21
21
  ): boolean {
22
- return (e.metaKey || e.ctrlKey) && !e.altKey && !e.shiftKey;
22
+ return !e.metaKey && !e.ctrlKey && !e.altKey && !e.shiftKey;
23
23
  }
24
24
 
25
25
  /** Skip shell shortcuts while typing in an editable control. */
@@ -46,11 +46,11 @@ function normalizedShortcutKey(e: Pick<KeyboardEvent, 'key' | 'code'>): string {
46
46
  return e.key.length === 1 ? e.key.toLowerCase() : e.key.toLowerCase();
47
47
  }
48
48
 
49
- /** Resolve a shell chrome shortcut, or `null` when the chord is not handled. */
49
+ /** Resolve a shell chrome shortcut, or `null` when the key is not handled. */
50
50
  export function resolveShellShortcut(
51
51
  e: Pick<KeyboardEvent, 'key' | 'code' | 'metaKey' | 'ctrlKey' | 'altKey' | 'shiftKey'>,
52
52
  ): ShellShortcutAction | null {
53
- if (!isShellShortcutModifier(e)) return null;
53
+ if (!isBareShellShortcutKey(e)) return null;
54
54
 
55
55
  const key = normalizedShortcutKey(e);
56
56
  if (key === '[') return 'toggle-panel-nav';