@ds-mo/ui 3.0.1 → 3.1.0

package/src/wc/components/AppShell/AppShell.tsx

@@ -1,377 +0,0 @@
-import { Component, Prop, Element, Watch, Listen, h, Host } from '@stencil/core';
-import type { NavChromeStyle } from '../../nav/nav-chrome';
-import {
-  isEditableShortcutTarget,
-  resolveShellShortcut,
-} from '../../nav/shell-shortcuts';
-import type { PanelToolsToolId } from '../PanelTools/panel-tools-types';
-import {
-  DEFAULT_SHELL_GRADIENT_PRESET,
-  type ShellGradientPreset,
-} from '../../nav/shell-gradient-presets';
-import {
-  CHROME_TRANSITION_END,
-  CHROME_TRANSITION_START,
-  ChromeTransitionDepth,
-  createRafCoalescer,
-  readChromeTransitionSource,
-} from '../../nav/chrome-transition';
-import {
-  isPanelNavCollapsed,
-  panelWidthPxFromTokens,
-  readPanelNavWidthTokens,
-  type PanelNavWidthTokens,
-} from '../../nav/shell-chrome-metrics';
-import {
-  SHELL_GRADIENT_IMAGE_VAR,
-  SHELL_GRADIENT_OPACITY,
-  SHELL_GRADIENT_OPACITY_VAR,
-  SHELL_GRADIENT_POSITION_BAR_VAR,
-  SHELL_GRADIENT_POSITION_PANEL_VAR,
-  SHELL_GRADIENT_SIZE_VAR,
-  buildShellRadialGradient,
-  readShellViewportDimensions,
-  shellGradientPositionBar,
-  shellGradientPositionPanel,
-  shellGradientSize,
-} from '../../nav/shell-gradient';
-
-@Component({
-  tag: 'ds-app-shell',
-  styleUrl: 'AppShell.css',
-  scoped: true,
-})
-export class AppShell {
-  /** Chrome style propagated to slotted `ds-panel-nav` and `ds-bar-nav`. */
-  @Prop({ attribute: 'nav-style', reflect: true }) navStyle: NavChromeStyle = 'dashboard';
-
-  /** When `true`, paints the radial wash behind panel, bar, and tools (synced to shell layout). */
-  @Prop({ reflect: true }) gradient: boolean = false;
-
-  /**
-   * Optional custom gradient for `background-image` (e.g. SVG URL).
-   * When set, overrides the built-in radial wash.
-   */
-  @Prop() gradientSrc: string = '';
-
-  /**
-   * Built-in shell wash preset when `gradient` is true.
-   * `none` (solid secondary), `cool` (blue), `neutral` (grey), `warm` (yellow). `gradientSrc` overrides when set.
-   */
-  @Prop({ attribute: 'gradient-preset', reflect: true }) gradientPreset: ShellGradientPreset =
-    DEFAULT_SHELL_GRADIENT_PRESET;
-
-  /** 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. */
-  @Prop({ attribute: 'shortcuts-enabled' }) shortcutsEnabled: boolean = true;
-
-  @Element() el!: HTMLElement;
-
-  private resizeObserver: ResizeObserver | null = null;
-  private readonly panelNavTransition = new ChromeTransitionDepth();
-  private readonly chromeSyncCoalescer = createRafCoalescer(() => this.syncChrome());
-  private panelWidthTokens: PanelNavWidthTokens = { expandedPx: 0, collapsedPx: 0 };
-  private cachedViewportWidth = 0;
-  private cachedViewportHeight = 0;
-  private onWindowResize = () => {
-    if (this.panelNavTransition.isActive) return;
-    this.scheduleChromeSync();
-  };
-  private onVisualViewportChange = () => {
-    if (this.panelNavTransition.isActive) return;
-    this.scheduleChromeSync();
-  };
-
-  componentDidLoad() {
-    this.syncSlottedNavStyle();
-    this.connectMetricsObserver();
-    this.connectViewportListeners();
-    this.el.addEventListener(CHROME_TRANSITION_START, this.onChromeTransitionStart);
-    this.el.addEventListener(CHROME_TRANSITION_END, this.onChromeTransitionEnd);
-    requestAnimationFrame(() => {
-      this.cachePanelWidthTokens();
-      this.scheduleChromeSync();
-    });
-  }
-
-  disconnectedCallback() {
-    this.resizeObserver?.disconnect();
-    this.resizeObserver = null;
-    this.disconnectViewportListeners();
-    this.chromeSyncCoalescer.cancel();
-    this.el.removeEventListener(CHROME_TRANSITION_START, this.onChromeTransitionStart);
-    this.el.removeEventListener(CHROME_TRANSITION_END, this.onChromeTransitionEnd);
-  }
-
-  @Watch('navStyle')
-  @Watch('gradient')
-  @Watch('gradientSrc')
-  @Watch('gradientPreset')
-  onShellPropsChange() {
-    this.syncSlottedNavStyle();
-    this.scheduleChromeSync();
-  }
-
-  private onChromeTransitionStart = (event: Event) => {
-    if (readChromeTransitionSource(event) !== 'panel-nav') return;
-
-    this.panelNavTransition.enter();
-    const viewport = readShellViewportDimensions();
-    this.cachedViewportWidth = viewport.width;
-    this.cachedViewportHeight = viewport.height;
-    this.syncChrome();
-  };
-
-  private onChromeTransitionEnd = (event: Event) => {
-    if (readChromeTransitionSource(event) !== 'panel-nav') return;
-
-    this.panelNavTransition.exit();
-    if (!this.panelNavTransition.isActive) {
-      this.scheduleChromeSync();
-    }
-  };
-
-  /** Coalesce ResizeObserver bursts to one layout read per frame. */
-  private scheduleChromeSync() {
-    this.chromeSyncCoalescer.schedule();
-  }
-
-  private syncSlottedNavStyle() {
-    const panel = this.el.querySelector('ds-panel-nav') as (HTMLElement & { navStyle: NavChromeStyle }) | null;
-    const bar = this.el.querySelector('ds-bar-nav') as (HTMLElement & { navStyle: NavChromeStyle }) | null;
-    if (panel) {
-      panel.setAttribute('nav-style', this.navStyle);
-      panel.navStyle = this.navStyle;
-    }
-    if (bar) {
-      bar.setAttribute('nav-style', this.navStyle);
-      bar.navStyle = this.navStyle;
-    }
-  }
-
-  private connectMetricsObserver() {
-    this.resizeObserver = new ResizeObserver(() => {
-      if (this.panelNavTransition.isActive) return;
-      this.scheduleChromeSync();
-    });
-    this.resizeObserver.observe(this.el);
-    const panelWrap = this.el.querySelector('.app-shell__panel');
-    if (panelWrap) this.resizeObserver.observe(panelWrap);
-  }
-
-  private connectViewportListeners() {
-    if (typeof window === 'undefined') return;
-
-    window.addEventListener('resize', this.onWindowResize, { passive: true });
-
-    const visual = window.visualViewport;
-    if (visual) {
-      visual.addEventListener('resize', this.onVisualViewportChange, { passive: true });
-      visual.addEventListener('scroll', this.onVisualViewportChange, { passive: true });
-    }
-  }
-
-  private disconnectViewportListeners() {
-    if (typeof window === 'undefined') return;
-
-    window.removeEventListener('resize', this.onWindowResize);
-
-    const visual = window.visualViewport;
-    if (visual) {
-      visual.removeEventListener('resize', this.onVisualViewportChange);
-      visual.removeEventListener('scroll', this.onVisualViewportChange);
-    }
-  }
-
-  private cachePanelWidthTokens() {
-    const navRoot = this.el.querySelector('ds-panel-nav .panel-nav') as HTMLElement | null;
-    if (!navRoot) return;
-    this.panelWidthTokens = readPanelNavWidthTokens(navRoot);
-  }
-
-  private applyGradientVars(target: HTMLElement, vars: Record<string, string | null>) {
-    const style = target.style;
-    for (const [name, value] of Object.entries(vars)) {
-      if (value === null) style.removeProperty(name);
-      else style.setProperty(name, value);
-    }
-  }
-
-  private clearGradientPaintVars(targets: HTMLElement[]) {
-    const keys = [
-      SHELL_GRADIENT_IMAGE_VAR,
-      SHELL_GRADIENT_SIZE_VAR,
-      SHELL_GRADIENT_OPACITY_VAR,
-    ];
-    for (const target of targets) {
-      for (const key of keys) target.style.removeProperty(key);
-    }
-  }
-
-  /** Panel/bar wash offsets for scroll fades and badge rings. */
-  private syncChromeLayoutVars(
-    panel: HTMLElement | null,
-    bar: HTMLElement | null,
-    panelPosition: string,
-    barPosition: string,
-  ) {
-    if (panel) {
-      panel.style.setProperty(SHELL_GRADIENT_POSITION_PANEL_VAR, panelPosition);
-    }
-    if (bar) {
-      bar.style.setProperty(SHELL_GRADIENT_POSITION_BAR_VAR, barPosition);
-    }
-  }
-
-  private resolvePanelWidthPx(panelNav: HTMLElement | null): number {
-    const navRoot = panelNav?.querySelector('.panel-nav') as HTMLElement | null;
-
-    if (this.panelNavTransition.isActive && this.panelWidthTokens.expandedPx > 0) {
-      const collapsed = isPanelNavCollapsed(panelNav, navRoot);
-      return panelWidthPxFromTokens(this.panelWidthTokens, collapsed);
-    }
-
-    const panelWrap = this.el.querySelector('.app-shell__panel') as HTMLElement | null;
-    const measured = panelWrap?.getBoundingClientRect().width ?? 0;
-    if (measured > 0) return measured;
-
-    if (this.panelWidthTokens.expandedPx > 0) {
-      const collapsed = isPanelNavCollapsed(panelNav, navRoot);
-      return panelWidthPxFromTokens(this.panelWidthTokens, collapsed);
-    }
-
-    return 0;
-  }
-
-  /** Fixed-attachment wash/grid size — always the viewport, never the shell element box. */
-  private resolveViewportDimensions(): { width: number; height: number } {
-    if (this.panelNavTransition.isActive && this.cachedViewportWidth > 0) {
-      return {
-        width: this.cachedViewportWidth,
-        height: this.cachedViewportHeight,
-      };
-    }
-
-    return readShellViewportDimensions();
-  }
-
-  private chromeLayerActive(): boolean {
-    return this.gradient;
-  }
-
-  @Listen('keydown', { target: 'window', capture: true })
-  handleWindowKeyDown(e: KeyboardEvent) {
-    if (!this.shortcutsEnabled) return;
-    if (isEditableShortcutTarget(e.target)) return;
-
-    const action = resolveShellShortcut(e);
-    if (!action) return;
-
-    e.preventDefault();
-
-    const panel = this.el.querySelector('ds-panel-nav') as HTMLDsPanelNavElement | null;
-    const tools = this.el.querySelector('ds-panel-tools') as HTMLDsPanelToolsElement | null;
-
-    if (action === 'toggle-panel-nav') {
-      void panel?.toggleCollapsed();
-      return;
-    }
-
-    if (action === 'close-panel-tools') {
-      void tools?.closeDrawer();
-      return;
-    }
-
-    if (action.startsWith('open-tool:') && tools) {
-      const toolId = action.slice('open-tool:'.length) as PanelToolsToolId;
-      void tools.activateTool(toolId);
-    }
-  }
-
-  private syncChrome() {
-    const panelNav = this.el.querySelector('ds-panel-nav') as HTMLElement | null;
-    const bar = this.el.querySelector('ds-bar-nav') as HTMLElement | null;
-    const targets = [this.el, panelNav, bar].filter((el): el is HTMLElement => el !== null);
-
-    const clearLayoutVars = () => {
-      if (panelNav) panelNav.style.removeProperty(SHELL_GRADIENT_POSITION_PANEL_VAR);
-      if (bar) bar.style.removeProperty(SHELL_GRADIENT_POSITION_BAR_VAR);
-    };
-
-    if (!this.gradient) {
-      this.clearGradientPaintVars(targets);
-      clearLayoutVars();
-      return;
-    }
-
-    const viewport = this.resolveViewportDimensions();
-    const panelWidth = this.resolvePanelWidthPx(panelNav);
-
-    const panelPosition = shellGradientPositionPanel();
-    const barPosition = shellGradientPositionBar(panelWidth);
-
-    this.syncChromeLayoutVars(panelNav, bar, panelPosition, barPosition);
-
-    const image = this.gradientSrc.trim()
-      ? `url(${this.gradientSrc.trim()})`
-      : buildShellRadialGradient(this.gradientPreset);
-
-    const size = shellGradientSize({
-      width: viewport.width,
-      height: viewport.height,
-    });
-    const opacity = SHELL_GRADIENT_OPACITY;
-
-    for (const target of targets) {
-      if (target === this.el) {
-        this.applyGradientVars(target, {
-          [SHELL_GRADIENT_IMAGE_VAR]: image,
-          [SHELL_GRADIENT_SIZE_VAR]: size,
-          [SHELL_GRADIENT_POSITION_PANEL_VAR]: panelPosition,
-          [SHELL_GRADIENT_POSITION_BAR_VAR]: barPosition,
-          [SHELL_GRADIENT_OPACITY_VAR]: opacity,
-        });
-        continue;
-      }
-
-      const isBar = target.tagName.toLowerCase() === 'ds-bar-nav';
-      this.applyGradientVars(target, {
-        [SHELL_GRADIENT_IMAGE_VAR]: image,
-        [SHELL_GRADIENT_SIZE_VAR]: size,
-        [SHELL_GRADIENT_OPACITY_VAR]: opacity,
-        [SHELL_GRADIENT_POSITION_PANEL_VAR]: isBar ? null : panelPosition,
-        [SHELL_GRADIENT_POSITION_BAR_VAR]: isBar ? barPosition : null,
-      });
-    }
-  }
-
-  render() {
-    const chromeActive = this.chromeLayerActive();
-    const shellCls: Record<string, boolean> = {
-      'app-shell': true,
-      'app-shell--gradient': this.gradient,
-      [`app-shell--${this.navStyle}`]: true,
-    };
-
-    return (
-      <Host class={shellCls}>
-        <div class="app-shell__row">
-          {chromeActive ? <div class="app-shell__chrome" aria-hidden="true" /> : null}
-          <div class="app-shell__panel">
-            <slot name="panel" />
-          </div>
-          <div class="app-shell__main">
-            <div class="app-shell__bar">
-              <slot name="bar" />
-            </div>
-            <div class="app-shell__tools">
-              <slot name="tools" />
-            </div>
-            <div class="app-shell__content">
-              <slot />
-            </div>
-          </div>
-        </div>
-      </Host>
-    );
-  }
-}

package/src/wc/components/Badge/Badge.tsx

@@ -1,179 +0,0 @@
-import { Component, Prop, Element, State, Watch, h, Host } from '@stencil/core';
-import {
-  BADGE_GRADIENT_POSITION_VAR,
-  isShellGradientActive,
-} from '../../nav/badge-gradient-ring';
-
-export type BadgeVariant = 'counter' | 'dot';
-export type BadgeSurface =
-  | 'default'
-  | 'primary'
-  | 'secondary'
-  | 'medium'
-  | 'bold'
-  | 'strong'
-  | 'navigation'
-  | 'always-dark';
-
-const SURFACE_RING: Record<BadgeSurface, string> = {
-  default: 'var(--color-background-secondary)',
-  primary: 'var(--color-background-primary)',
-  secondary: 'var(--color-background-secondary)',
-  medium: 'var(--color-background-medium-neutral)',
-  bold: 'var(--color-background-bold-neutral)',
-  strong: 'var(--color-background-strong-neutral)',
-  navigation: 'var(--color-navigation-background)',
-  'always-dark': 'var(--color-always-dark-background)',
-};
-
-@Component({
-  tag: 'ds-badge',
-  styleUrl: 'Badge.css',
-  scoped: true,
-})
-export class Badge {
-  @Element() el!: HTMLElement;
-
-  /** Render as a compact counter or notification dot. */
-  @Prop() variant: BadgeVariant = 'counter';
-
-  /** Count shown for counter badges. Count 0 hides the badge. */
-  @Prop() count: number = 0;
-
-  /** Highest count shown before compacting to "+". */
-  @Prop() max: number = 9;
-
-  /** Surface context for the ring around dots. */
-  @Prop() surface: BadgeSurface = 'default';
-
-  /** Direct ring background override for component-local surfaces. */
-  @Prop() background: string | undefined;
-
-  /**
-   * Ring samples the shell gradient stack (base fill + wash) instead of a flat
-   * `box-shadow`. Auto-enabled in `componentDidLoad` under `ds-app-shell[gradient]`;
-   * set `gradient-background` to opt in/out explicitly.
-   *
-   * The attribute must NOT start with `on` — Stencil's setAccessor routes any
-   * unknown `on*` member down the event-listener path during attribute
-   * reflection, calling addEventListener with a non-listener and throwing.
-   */
-  @Prop({ attribute: 'gradient-background', reflect: true }) gradientBackground: boolean = false;
-
-  /** Deprecated alias for selected counter styling. Prefer context-specific color in the parent. */
-  @Prop() isSelected: boolean = false;
-
-  /** Accessible label. Defaults to the count as a string. */
-  @Prop() label: string | undefined;
-
-  /** Bumps on resize/layout so render recomputes gradient ring position. */
-  @State() private gradientLayoutVersion = 0;
-
-  private gradientObserver: ResizeObserver | null = null;
-  private gradientWindowListener: (() => void) | null = null;
-
-  componentDidLoad() {
-    this.enableShellGradientRingIfNeeded();
-  }
-
-  disconnectedCallback() {
-    this.unbindGradientRingSync();
-  }
-
-  @Watch('gradientBackground')
-  gradientBackgroundChanged() {
-    this.bindGradientRingSync();
-  }
-
-  /** Imperative opt-in avoids Stencil aborting parent render for nested badges. */
-  private enableShellGradientRingIfNeeded() {
-    if (!this.gradientBackground && isShellGradientActive(this.el)) {
-      this.gradientBackground = true;
-    }
-
-    if (this.gradientBackground) {
-      this.bindGradientRingSync();
-    }
-  }
-
-  private bindGradientRingSync() {
-    this.unbindGradientRingSync();
-
-    if (!this.gradientBackground) return;
-
-    const update = () => {
-      this.gradientLayoutVersion += 1;
-    };
-    update();
-
-    this.gradientWindowListener = update;
-    window.addEventListener('resize', update);
-
-    if (typeof ResizeObserver !== 'undefined') {
-      this.gradientObserver = new ResizeObserver(update);
-      this.gradientObserver.observe(this.el);
-
-      const shell = this.el.closest('ds-app-shell');
-      if (shell) this.gradientObserver.observe(shell);
-
-      const bar = this.el.closest('ds-bar-nav');
-      if (bar) this.gradientObserver.observe(bar);
-
-      const panel = this.el.closest('ds-panel-nav');
-      if (panel) this.gradientObserver.observe(panel);
-    }
-  }
-
-  private unbindGradientRingSync() {
-    if (this.gradientWindowListener) {
-      window.removeEventListener('resize', this.gradientWindowListener);
-      this.gradientWindowListener = null;
-    }
-
-    this.gradientObserver?.disconnect();
-    this.gradientObserver = null;
-  }
-
-  private ringHostStyle(ring: string): Record<string, string> {
-    void this.gradientLayoutVersion;
-
-    const style: Record<string, string> = { '--_badge-ring': ring };
-    if (!this.gradientBackground || !isShellGradientActive(this.el)) return style;
-
-    /* Shell chrome wash uses background-attachment: fixed at viewport origin. */
-    style[BADGE_GRADIENT_POSITION_VAR] = '0 0';
-    return style;
-  }
-
-  render() {
-    const isDot = this.variant === 'dot';
-
-    if (!isDot && this.count === 0) return <Host style={{ display: 'none' }} />;
-
-    const display = this.count > this.max ? '+' : String(this.count);
-    const ariaLabel = this.label ?? (isDot ? 'Notification' : String(this.count));
-    const ring = this.background ?? SURFACE_RING[this.surface];
-
-    return (
-      <Host
-        class={{
-          badge: true,
-          'badge--counter': !isDot,
-          'badge--dot': isDot,
-          'badge--selected': this.isSelected,
-          'badge--on-gradient-background': this.gradientBackground,
-        }}
-        aria-label={ariaLabel}
-        style={this.ringHostStyle(ring)}
-      >
-        <span class="badge__mark" aria-hidden="true">
-          {!isDot && (
-            <ds-text as="span" variant="text-caption" emphasis color="inherit">
-              {display}
-            </ds-text>
-          )}
-        </span>
-      </Host>
-    );
-  }
-}

package/src/wc/components/Badge/index.ts

@@ -1 +0,0 @@
-export type { BadgeVariant, BadgeSurface } from './Badge';