@ds-mo/ui 3.0.1 → 3.1.0

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

@@ -1,17 +0,0 @@
-export type {
-  PanelNavRouterMode,
-  PanelNavItem,
-  PanelNavGroup,
-  PanelNavUserActionDetail,
-} from './panel-nav-types';
-export { PANEL_NAV_USER_MENU_ANCHOR_ID, PANEL_NAV_USER_MENU_PLACEMENT } from './panel-nav-types';
-export type { NavChromeStyle } from '../../nav/nav-chrome';
-export {
-  NAV_STYLE_HINT_ATTR,
-  setNavStyleHint,
-  clearNavStyleHint,
-  resolvePanelNavStyle,
-  shouldResyncPanelNavStyle,
-  deriveActiveIdFromUrl,
-  parsePanelNavGroups,
-} from './panel-nav-utils';

package/src/wc/components/PanelNav/panel-nav-types.ts

@@ -1,36 +0,0 @@
-import type { MenuPlacement } from '../Menu/menu-placement';
-import { PANEL_NAV_USER_MENU_PLACEMENT } from '../Menu/menu-placement';
-import type { NavChromeStyle } from '../../nav/nav-chrome';
-
-export type { NavChromeStyle };
-export type PanelNavRouterMode = 'anchor' | 'event';
-
-export interface PanelNavItem {
-  id: string;
-  icon: string;
-  label: string;
-  /** Show a notification dot badge on the item */
-  dot?: boolean;
-  flag?: boolean;
-  /** Route path used for `currentUrl` matching. In `anchor` mode also sets `<a href>`.
-   *  In `event` mode navigation is delegated to the host via `dsNavSelect`. */
-  href?: string;
-}
-
-export interface PanelNavGroup {
-  id?: string;
-  label?: string;
-  items: PanelNavItem[];
-}
-
-/** Stable `id` on the footer user button — use with `ds-menu` `anchor-id`. */
-export const PANEL_NAV_USER_MENU_ANCHOR_ID = 'ds-panel-nav-user-menu-anchor';
-
-/** Detail for `dsNavUserAction` — anchor element for an external `ds-menu`. */
-export interface PanelNavUserActionDetail {
-  anchor: HTMLElement;
-  /** Recommended `ds-menu` placement — spread onto external user menu instance. */
-  menuPlacement: MenuPlacement;
-}
-
-export { PANEL_NAV_USER_MENU_PLACEMENT };

package/src/wc/components/PanelNav/panel-nav-utils.ts

@@ -1,79 +0,0 @@
-import type { PanelNavGroup, PanelNavItem } from './panel-nav-types';
-import {
-  NAV_STYLE_HINT_ATTR,
-  clearNavStyleHint,
-  readNavStyleAttr,
-  resolveNavChromeStyle,
-  setNavStyleHint,
-  shouldResyncNavChromeStyle,
-} from '../../nav/nav-chrome';
-
-export type { NavChromeStyle } from '../../nav/nav-chrome';
-export {
-  NAV_STYLE_HINT_ATTR,
-  readNavStyleAttr,
-  setNavStyleHint,
-  clearNavStyleHint,
-  resolveNavChromeStyle as resolvePanelNavStyle,
-  shouldResyncNavChromeStyle as shouldResyncPanelNavStyle,
-};
-
-/** Whether `path` matches `href` at a segment boundary (exact or child path). */
-export function hrefMatchesPath(path: string, href: string): boolean {
-  return path === href || path.startsWith(`${href}/`);
-}
-
-/** Derive the active nav item id from a URL using longest segment-boundary prefix match. */
-export function deriveActiveIdFromUrl(path: string, items: PanelNavItem[]): string {
-  if (!path) return '';
-
-  let bestId = '';
-  let bestLen = 0;
-
-  for (const item of items) {
-    if (!item.href) continue;
-    if (hrefMatchesPath(path, item.href) && item.href.length > bestLen) {
-      bestId = item.id;
-      bestLen = item.href.length;
-    }
-  }
-
-  return bestId;
-}
-
-/** Total nav item count across all groups. */
-export function countPanelNavItems(groups: PanelNavGroup[]): number {
-  return groups.reduce((sum, g) => sum + g.items.length, 0);
-}
-
-/** Parse `groups` from either a JSON attribute string or a JS property array. */
-export function parsePanelNavGroups(groups: string | unknown): PanelNavGroup[] {
-  if (Array.isArray(groups)) return groups;
-  if (typeof groups === 'string') {
-    try {
-      const parsed = JSON.parse(groups);
-      return Array.isArray(parsed) ? parsed : [];
-    } catch {
-      return [];
-    }
-  }
-  return [];
-}
-
-/** Resolve whether VT is disabled from prop and/or host attribute. */
-export function resolvePanelNavDisableVt(prop: boolean, attr: string | null): boolean {
-  if (prop) return true;
-  if (attr === null) return false;
-  return attr !== 'false';
-}
-
-/** True when host `groups` has items but internal parsed state is still empty. */
-export function shouldResyncPanelNavGroups(
-  parsedGroups: PanelNavGroup[],
-  groups: string | unknown,
-): boolean {
-  return (
-    countPanelNavItems(parsedGroups) === 0 &&
-    countPanelNavItems(parsePanelNavGroups(groups)) > 0
-  );
-}

package/src/wc/components/PanelTools/PanelTools.tsx

@@ -1,366 +0,0 @@
-import { Component, Prop, Event, EventEmitter, Element, State, Watch, Method, h, Host } from '@stencil/core';
-import type { ChromeTransitionDetail } from '../../nav/chrome-transition';
-import {
-  PANEL_TOOLS_FOOTER_TOOL_ID,
-  PANEL_TOOLS_LABELS,
-  PANEL_TOOLS_PRIMARY_TOOL_ID,
-  type PanelToolsItem,
-  type PanelToolsToolId,
-} from './panel-tools-types';
-import { parsePanelToolsItems, panelToolsDrawerResting, resolvePanelToolActivation } from './panel-tools-utils';
-
-@Component({
-  tag: 'ds-panel-tools',
-  styleUrl: 'PanelTools.css',
-  scoped: true,
-})
-export class PanelTools {
-  @Element() el!: HTMLElement;
-
-  /** When false, only the icon rail is shown. */
-  @Prop({ mutable: true, reflect: true }) open: boolean = false;
-
-  /** Active tool view — `search`, `agents`, `messages`, `stacks`, `activity`, or `help`. */
-  @Prop({ mutable: true, attribute: 'active-tool', reflect: true })
-  activeTool: PanelToolsToolId | '' = '';
-
-  /**
-   * Rail items rendered in the right column.
-   * Set via JS property: `el.items = [...]`. Replace the array reference to update.
-   */
-  @Prop() items: PanelToolsItem[] = [];
-
-  /** JSON fallback for `items` — useful when framework bindings don't propagate arrays. */
-  @Prop({ attribute: 'items-json' }) itemsJson: string = '';
-
-  /** Emitted when a rail button is toggled. Detail = { id, selected }. */
-  @Event({ bubbles: true, composed: true }) dsToolChange!: EventEmitter<{
-    id: PanelToolsToolId;
-    selected: boolean;
-  }>;
-
-  /** Bubbling lifecycle — `ds-bar-nav` defers overflow checks during drawer motion. */
-  @Event({ bubbles: true, composed: true })
-  dsChromeTransitionStart!: EventEmitter<ChromeTransitionDetail>;
-
-  @Event({ bubbles: true, composed: true })
-  dsChromeTransitionEnd!: EventEmitter<ChromeTransitionDetail>;
-
-  /** Arms open vs close easing for the in-flight width transition. */
-  @State() private motion: 'opening' | 'closing' | 'idle' = 'idle';
-
-  /** Suppresses width transition until the host has painted its initial open state. */
-  @State() private readyForMotion = false;
-
-  @State() private rovingIndex = 0;
-
-  private motionEnableGeneration = 0;
-
-  private get railItems(): PanelToolsItem[] {
-    return parsePanelToolsItems(this.items, this.itemsJson);
-  }
-
-  private get orderedRailItems(): PanelToolsItem[] {
-    const railItems = this.railItems;
-    const headerItem = railItems.find(item => item.id === PANEL_TOOLS_PRIMARY_TOOL_ID);
-    const footerItem = railItems.find(item => item.id === PANEL_TOOLS_FOOTER_TOOL_ID);
-    const bodyItems = railItems.filter(
-      item => item.id !== PANEL_TOOLS_PRIMARY_TOOL_ID && item.id !== PANEL_TOOLS_FOOTER_TOOL_ID,
-    );
-    const ordered: PanelToolsItem[] = [];
-    if (headerItem) ordered.push(headerItem);
-    ordered.push(...bodyItems);
-    if (footerItem) ordered.push(footerItem);
-    return ordered;
-  }
-
-  disconnectedCallback() {
-    this.el.removeEventListener('transitionend', this.handleTransitionEnd);
-    this.motionEnableGeneration += 1;
-  }
-
-  private deferMotionEnable() {
-    if (this.readyForMotion) return;
-    const generation = ++this.motionEnableGeneration;
-    requestAnimationFrame(() => {
-      if (generation !== this.motionEnableGeneration) return;
-      requestAnimationFrame(() => {
-        if (generation !== this.motionEnableGeneration) return;
-        this.readyForMotion = true;
-      });
-    });
-  }
-
-  connectedCallback() {
-    this.el.addEventListener('transitionend', this.handleTransitionEnd);
-  }
-
-  @Watch('open')
-  openChanged(isOpen: boolean, wasOpen?: boolean) {
-    if (this.readyForMotion && wasOpen !== undefined && wasOpen !== isOpen) {
-      this.motion = isOpen ? 'opening' : 'closing';
-      this.dsChromeTransitionStart.emit({
-        source: 'panel-tools',
-        phase: isOpen ? 'opening' : 'closing',
-      });
-    }
-    this.deferMotionEnable();
-  }
-
-  @Watch('activeTool')
-  activeToolChanged() {
-    this.deferMotionEnable();
-  }
-
-  componentDidLoad() {
-    this.deferMotionEnable();
-  }
-
-  @Watch('items')
-  @Watch('itemsJson')
-  itemsChanged() {
-    this.rovingIndex = 0;
-    this.deferMotionEnable();
-  }
-
-  private handleTransitionEnd = (event: TransitionEvent) => {
-    if (event.target !== this.el.querySelector('.panel-tools__drawer')) return;
-    if (event.propertyName !== 'max-width') return;
-    this.motion = 'idle';
-    this.dsChromeTransitionEnd.emit({ source: 'panel-tools' });
-  };
-
-  /** Rail selection follows `open` immediately — independent of the slide animation. */
-  private isRailSelected(id: PanelToolsToolId): boolean {
-    return this.open && this.activeTool === id;
-  }
-
-  /** Drawer body stays mounted while the clip frame animates closed. */
-  private isDrawerPresent(): boolean {
-    return this.open || this.motion === 'closing';
-  }
-
-  private isViewActive(id: PanelToolsToolId): boolean {
-    return this.isDrawerPresent() && this.activeTool === id;
-  }
-
-  private headerLabel(): string {
-    if (!this.isDrawerPresent() || !this.activeTool) return '';
-    return PANEL_TOOLS_LABELS[this.activeTool as PanelToolsToolId] ?? '';
-  }
-
-  private handleToolChange = (id: PanelToolsToolId) => {
-    const next = resolvePanelToolActivation(this.open, this.activeTool, id);
-    this.open = next.open;
-    this.activeTool = next.activeTool;
-    this.dsToolChange.emit({ id, selected: next.selected });
-  };
-
-  /** Toggle any rail tool open/closed — shell shortcuts K/A/S/M/N call this. */
-  @Method()
-  async activateTool(id: PanelToolsToolId) {
-    const item = this.railItems.find(entry => entry.id === id);
-    if (!item || item.isInactive) return;
-    this.handleToolChange(id);
-  }
-
-  /** Close the tools drawer when open — used by shell keyboard shortcuts. */
-  @Method()
-  async closeDrawer() {
-    if (!this.open) return;
-    const id = this.activeTool;
-    this.open = false;
-    if (id) {
-      this.dsToolChange.emit({ id, selected: false });
-    }
-  }
-
-  private focusRailAt(index: number) {
-    const items = this.orderedRailItems;
-    if (!items.length) return;
-    const bounded = Math.max(0, Math.min(index, items.length - 1));
-    if (bounded === this.rovingIndex) return;
-    this.rovingIndex = bounded;
-    const actions = Array.from(
-      this.el.querySelectorAll<HTMLElement>('.panel-tools__rail-action .button-icon'),
-    );
-    actions[bounded]?.focus({ preventScroll: true });
-  }
-
-  private handleRailKeyDown = (e: KeyboardEvent, index: number) => {
-    const items = this.orderedRailItems;
-    if (!items.length) return;
-
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      this.handleToolChange(items[index].id);
-      return;
-    }
-
-    if (e.key === 'ArrowDown') {
-      if (index >= items.length - 1) return;
-      e.preventDefault();
-      this.focusRailAt(index + 1);
-      return;
-    }
-
-    if (e.key === 'ArrowUp') {
-      if (index <= 0) return;
-      e.preventDefault();
-      this.focusRailAt(index - 1);
-    }
-  };
-
-  private renderRailAction(item: PanelToolsItem, index: number) {
-    const label = item.ariaLabel ?? PANEL_TOOLS_LABELS[item.id];
-    return (
-      <ds-tooltip key={item.id} label={label} side="left" size="sm">
-        <ds-button-unfilled variant="icon"
-          class="panel-tools__rail-action"
-          icon={item.icon}
-          isActive={this.isRailSelected(item.id)}
-          activeFill={false}
-          hasBorder={false}
-          dot={item.dot ?? false}
-          isInactive={item.isInactive}
-          focusTabIndex={index === this.rovingIndex ? 0 : -1}
-          aria-label={label}
-          pressed={this.isRailSelected(item.id)}
-          onFocusin={() => { this.rovingIndex = index; }}
-          onKeyDown={(e: KeyboardEvent) => this.handleRailKeyDown(e, index)}
-          onDsClick={() => this.handleToolChange(item.id)}
-        />
-      </ds-tooltip>
-    );
-  }
-
-  render() {
-    const headerLabel = this.headerLabel();
-    const orderedRailItems = this.orderedRailItems;
-    const headerItem = orderedRailItems.find(item => item.id === PANEL_TOOLS_PRIMARY_TOOL_ID);
-    const footerItem = orderedRailItems.find(item => item.id === PANEL_TOOLS_FOOTER_TOOL_ID);
-    const bodyItems = orderedRailItems.filter(
-      item => item.id !== PANEL_TOOLS_PRIMARY_TOOL_ID && item.id !== PANEL_TOOLS_FOOTER_TOOL_ID,
-    );
-    const footerIndex = footerItem
-      ? (headerItem ? 1 : 0) + bodyItems.length
-      : -1;
-    const showDrawerChrome = this.isDrawerPresent();
-    const drawerResting = panelToolsDrawerResting(this.open, this.motion);
-
-    return (
-      <Host
-        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': drawerResting,
-        }}
-        role="complementary"
-        aria-label="Tools"
-      >
-        <div class="panel-tools__layout">
-          <nav class="panel-tools__rail" aria-label="Tool shortcuts">
-            {headerItem ? (
-              <div class="panel-tools__rail-header">
-                {this.renderRailAction(headerItem, 0)}
-              </div>
-            ) : null}
-            <div class="panel-tools__rail-body">
-              {bodyItems.map((item, bodyIdx) =>
-                this.renderRailAction(item, headerItem ? bodyIdx + 1 : bodyIdx),
-              )}
-            </div>
-            {footerItem ? (
-              <div class="panel-tools__rail-footer">
-                {this.renderRailAction(footerItem, footerIndex)}
-              </div>
-            ) : null}
-          </nav>
-
-          <div
-            class={{
-              'panel-tools__drawer': true,
-              'panel-tools__drawer--visible': showDrawerChrome,
-            }}
-            aria-hidden={showDrawerChrome ? null : 'true'}
-            inert={showDrawerChrome ? undefined : true}
-          >
-            <div class="panel-tools__drawer-surface">
-              <header class="panel-tools__header">
-                <ds-text
-                  class="panel-tools__title"
-                  as="span"
-                  variant="text-body-medium"
-                  emphasis
-                  color="primary"
-                  wrap="nowrap"
-                >
-                  {headerLabel}
-                </ds-text>
-              </header>
-              <div class="panel-tools__body">
-                <div
-                  class={{
-                    'panel-tools__view': true,
-                    'panel-tools__view--active': this.isViewActive('search'),
-                  }}
-                  hidden={!this.isViewActive('search')}
-                >
-                  <slot name="search" />
-                </div>
-                <div
-                  class={{
-                    'panel-tools__view': true,
-                    'panel-tools__view--active': this.isViewActive('messages'),
-                  }}
-                  hidden={!this.isViewActive('messages')}
-                >
-                  <slot name="messages" />
-                </div>
-                <div
-                  class={{
-                    'panel-tools__view': true,
-                    'panel-tools__view--active': this.isViewActive('stacks'),
-                  }}
-                  hidden={!this.isViewActive('stacks')}
-                >
-                  <slot name="stacks" />
-                </div>
-                <div
-                  class={{
-                    'panel-tools__view': true,
-                    'panel-tools__view--active': this.isViewActive('activity'),
-                  }}
-                  hidden={!this.isViewActive('activity')}
-                >
-                  <slot name="activity" />
-                </div>
-                <div
-                  class={{
-                    'panel-tools__view': true,
-                    'panel-tools__view--active': this.isViewActive('agents'),
-                  }}
-                  hidden={!this.isViewActive('agents')}
-                >
-                  <slot name="agents" />
-                </div>
-                <div
-                  class={{
-                    'panel-tools__view': true,
-                    'panel-tools__view--active': this.isViewActive('help'),
-                  }}
-                  hidden={!this.isViewActive('help')}
-                >
-                  <slot name="help" />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </Host>
-    );
-  }
-}

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

@@ -1,7 +0,0 @@
-export type { PanelToolsItem, PanelToolsToolId } from './panel-tools-types';
-export {
-  PANEL_TOOLS_FOOTER_TOOL_ID,
-  PANEL_TOOLS_LABELS,
-  PANEL_TOOLS_PRIMARY_TOOL_ID,
-  PANEL_TOOLS_TOOL_IDS,
-} from './panel-tools-types';

package/src/wc/components/PanelTools/panel-tools-types.ts

@@ -1,44 +0,0 @@
-/** Tool ids for the `ds-panel-tools` rail and drawer views. */
-export type PanelToolsToolId =
-  | 'search'
-  | 'agents'
-  | 'messages'
-  | 'stacks'
-  | 'activity'
-  | 'help';
-
-export const PANEL_TOOLS_TOOL_IDS: PanelToolsToolId[] = [
-  'search',
-  'agents',
-  'messages',
-  'stacks',
-  'activity',
-  'help',
-];
-
-/** Rail header slot — mirrors panel-nav M logo row. */
-export const PANEL_TOOLS_PRIMARY_TOOL_ID: PanelToolsToolId = 'search';
-
-/** Rail footer slot — flush to the bottom of the tools column. */
-export const PANEL_TOOLS_FOOTER_TOOL_ID: PanelToolsToolId = 'help';
-
-export const PANEL_TOOLS_LABELS: Record<PanelToolsToolId, string> = {
-  search: 'Search',
-  messages: 'Messages',
-  stacks: 'Stacks',
-  activity: 'Activity',
-  agents: 'Agents',
-  help: 'Help & Support',
-};
-
-export interface PanelToolsItem {
-  id: PanelToolsToolId;
-  /** Icon name for <ds-icon>. */
-  icon: string;
-  /** Whether this rail button is currently pressed/active. */
-  selected?: boolean;
-  /** Show a notification dot. */
-  dot?: boolean;
-  isInactive?: boolean;
-  ariaLabel?: string;
-}

package/src/wc/components/PanelTools/panel-tools-utils.ts

@@ -1,50 +0,0 @@
-import { parseJsonArrayProp } from '../BarNav/bar-nav-utils';
-import type { PanelToolsItem, PanelToolsToolId } from './panel-tools-types';
-
-export function parsePanelToolsItems(
-  items: PanelToolsItem[],
-  itemsJson: string,
-): PanelToolsItem[] {
-  if (itemsJson) {
-    return parseJsonArrayProp<PanelToolsItem>(itemsJson, []);
-  }
-  return items ?? [];
-}
-
-export function shouldResyncPanelToolsItems(
-  prev: PanelToolsItem[],
-  next: PanelToolsItem[],
-): boolean {
-  if (prev.length !== next.length) return true;
-  return next.some((item, index) => {
-    const prior = prev[index];
-    if (!prior) return true;
-    return (
-      prior.id !== item.id ||
-      prior.icon !== item.icon ||
-      prior.selected !== item.selected ||
-      prior.dot !== item.dot ||
-      prior.isInactive !== item.isInactive ||
-      prior.ariaLabel !== item.ariaLabel
-    );
-  });
-}
-
-export type PanelToolsMotion = 'opening' | 'closing' | 'idle';
-
-/** True when the drawer clip is fully closed — safe to skip painting slot content. */
-export function panelToolsDrawerResting(open: boolean, motion: PanelToolsMotion): boolean {
-  return !open && motion === 'idle';
-}
-
-/** Toggle or switch rail tool selection — repeat activation closes the active tool. */
-export function resolvePanelToolActivation(
-  open: boolean,
-  activeTool: PanelToolsToolId | '',
-  id: PanelToolsToolId,
-): { open: boolean; activeTool: PanelToolsToolId; selected: boolean } {
-  if (open && activeTool === id) {
-    return { open: false, activeTool: id, selected: false };
-  }
-  return { open: true, activeTool: id, selected: true };
-}