@ds-mo/ui 1.10.1 → 1.11.1

package/src/wc/components.d.ts

@@ -99,7 +99,7 @@ export namespace Components {
     }
     interface DsAppShell {
         /**
-          * When `true`, paints the shared chrome surface (bg + wash + grid) behind panel, bar, and tools.
+          * When `true`, paints the radial wash behind panel, bar, and tools (synced to shell layout).
           * @default false
          */
         "gradient": boolean;
@@ -108,6 +108,11 @@ export namespace Components {
           * @default ''
          */
         "gradientSrc": string;
+        /**
+          * When `true`, paints the diagonal grid overlay on the shared chrome layer. Independent of `gradient`.
+          * @default false
+         */
+        "grid": boolean;
         /**
           * Chrome style propagated to slotted `ds-panel-nav` and `ds-bar-nav`.
           * @default 'dashboard'
@@ -1781,7 +1786,7 @@ declare namespace LocalJSX {
     }
     interface DsAppShell {
         /**
-          * When `true`, paints the shared chrome surface (bg + wash + grid) behind panel, bar, and tools.
+          * When `true`, paints the radial wash behind panel, bar, and tools (synced to shell layout).
           * @default false
          */
         "gradient"?: boolean;
@@ -1790,6 +1795,11 @@ declare namespace LocalJSX {
           * @default ''
          */
         "gradientSrc"?: string;
+        /**
+          * When `true`, paints the diagonal grid overlay on the shared chrome layer. Independent of `gradient`.
+          * @default false
+         */
+        "grid"?: boolean;
         /**
           * Chrome style propagated to slotted `ds-panel-nav` and `ds-bar-nav`.
           * @default 'dashboard'
@@ -2871,6 +2881,7 @@ declare namespace LocalJSX {
     interface DsAppShellAttributes {
         "navStyle": NavChromeStyle;
         "gradient": boolean;
+        "grid": boolean;
         "gradientSrc": string;
     }
     interface DsBadgeAttributes {

package/src/wc/nav/chrome-transition.ts

@@ -8,3 +8,49 @@ export type ChromeTransitionSource = 'panel-nav' | 'panel-tools';
 export interface ChromeTransitionDetail {
   source: ChromeTransitionSource;
 }
+
+/** Reference-counted gate — used while panel-nav width is transitioning. */
+export class ChromeTransitionDepth {
+  private depth = 0;
+
+  enter(): void {
+    this.depth += 1;
+  }
+
+  exit(): void {
+    this.depth = Math.max(0, this.depth - 1);
+  }
+
+  get isActive(): boolean {
+    return this.depth > 0;
+  }
+}
+
+export interface RafCoalescer {
+  schedule(): void;
+  cancel(): void;
+}
+
+/** Coalesce bursty layout work (ResizeObserver, prop churn) to one callback per frame. */
+export function createRafCoalescer(onFrame: () => void): RafCoalescer {
+  let rafId = 0;
+  return {
+    schedule() {
+      if (rafId !== 0) return;
+      rafId = requestAnimationFrame(() => {
+        rafId = 0;
+        onFrame();
+      });
+    },
+    cancel() {
+      if (rafId !== 0) {
+        cancelAnimationFrame(rafId);
+        rafId = 0;
+      }
+    },
+  };
+}
+
+export function readChromeTransitionSource(event: Event): ChromeTransitionSource | undefined {
+  return (event as CustomEvent<ChromeTransitionDetail>).detail?.source;
+}

package/src/wc/nav/index.ts

@@ -33,12 +33,16 @@ export {
   shellGradientPositionPanel,
   shellGradientPositionBar,
   shellChromeSurfacePosition,
+  shellChromeLayerActive,
 } from './shell-gradient';
 export type { ShellGradientLayout } from './shell-gradient';
 export type { ChromeTransitionDetail, ChromeTransitionSource } from './chrome-transition';
 export {
   CHROME_TRANSITION_END,
   CHROME_TRANSITION_START,
+  ChromeTransitionDepth,
+  createRafCoalescer,
+  readChromeTransitionSource,
 } from './chrome-transition';
 export {
   barGradientPositionFromPanelWidth,

package/src/wc/nav/shell-gradient.ts

@@ -10,6 +10,11 @@ export const SHELL_CHROME_SURFACE_POSITION_VAR = '--ds-shell-chrome-surface-posi
 /** Layer opacity for the nav gradient wash. */
 export const SHELL_GRADIENT_OPACITY = '0.1';
 
+/** Whether the shared chrome layer (bg + optional wash/grid) should mount. */
+export function shellChromeLayerActive(gradient: boolean, grid: boolean): boolean {
+  return gradient || grid;
+}
+
 const GRADIENT_GEOMETRY = '100% 100% at 0% 0%';
 
 /**

package/dist/components/p-DN65lYYc.js

@@ -1,2 +0,0 @@
-const n="dsChromeTransitionStart";const t="dsChromeTransitionEnd";function e(n,t){if(typeof document==="undefined")return 0;const e=document.createElement("div");e.style.cssText="position:absolute;visibility:hidden;pointer-events:none;height:0;width:var("+t+");";n.appendChild(e);const i=e.getBoundingClientRect().width;n.removeChild(e);return i}function i(n){return{expandedPx:e(n,"--_nav-width"),collapsedPx:e(n,"--_nav-width-collapsed")}}function o(n,t){if(t?.classList.contains("panel-nav--collapsed"))return true;const e=n?.collapsed;return e===true}function r(n,t){return t?n.collapsedPx:n.expandedPx}export{n as C,t as a,e as b,o as i,r as p,i as r};
-//# sourceMappingURL=p-DN65lYYc.js.map

package/dist/components/p-DN65lYYc.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["CHROME_TRANSITION_START","CHROME_TRANSITION_END","readCssVarWidthPx","context","cssVarName","document","probe","createElement","style","cssText","appendChild","width","getBoundingClientRect","removeChild","readPanelNavWidthTokens","navRoot","expandedPx","collapsedPx","isPanelNavCollapsed","panelNavHost","classList","contains","collapsedProp","collapsed","panelWidthPxFromTokens","tokens"],"sources":["src/wc/nav/chrome-transition.ts","src/wc/nav/shell-chrome-metrics.ts"],"sourcesContent":["/** Bubbling/composed events — `ds-app-shell` and `ds-bar-nav` coordinate during width motion. */\n\nexport const CHROME_TRANSITION_START = 'dsChromeTransitionStart';\nexport const CHROME_TRANSITION_END = 'dsChromeTransitionEnd';\n\nexport type ChromeTransitionSource = 'panel-nav' | 'panel-tools';\n\nexport interface ChromeTransitionDetail {\n  source: ChromeTransitionSource;\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"],"mappings":"AAEO,MAAMA,EAA0B,0BAChC,MAAMC,EAAwB,wBCA/B,SAAUC,EAAkBC,EAAsBC,GACtD,UAAWC,WAAa,YAAa,OAAO,EAE5C,MAAMC,EAAQD,SAASE,cAAc,OACrCD,EAAME,MAAMC,QACV,8EACAL,EACA,KACFD,EAAQO,YAAYJ,GACpB,MAAMK,EAAQL,EAAMM,wBAAwBD,MAC5CR,EAAQU,YAAYP,GACpB,OAAOK,CACT,CAQM,SAAUG,EAAwBC,GACtC,MAAO,CACLC,WAAYd,EAAkBa,EAAS,gBACvCE,YAAaf,EAAkBa,EAAS,0BAE5C,CAEM,SAAUG,EACdC,EACAJ,GAEA,GAAIA,GAASK,UAAUC,SAAS,wBAAyB,OAAO,KAChE,MAAMC,EAAiBH,GAAiEI,UACxF,OAAOD,IAAkB,IAC3B,CAEM,SAAUE,EACdC,EACAF,GAEA,OAAOA,EAAYE,EAAOR,YAAcQ,EAAOT,UACjD,Q","ignoreList":[]}