@genesislcap/ai-assistant 15.19.0 → 15.19.1

package/src/components/plasma-orb-indicator.ts

@@ -1,281 +0,0 @@
-import { css, customElement, GenesisElement, html } from '@genesislcap/web-core';
-import {
-  AI_COLOUR_AMBER,
-  AI_COLOUR_CYAN,
-  AI_COLOUR_PINK,
-  AI_COLOUR_VIOLET,
-} from '../styles/ai-colours';
-
-/**
- * Animated "plasma orb" loading indicator — a fixed glowing energy sphere whose
- * luminous filaments and swirls drift and rotate inside it, like a plasma ball.
- * The globe never resizes; only the energy moves.
- *
- * Brand-coloured: a violet energy core, a slow cyan/pink tint wash, and a warm
- * amber hot-spot — covering all four brand colours.
- *
- * Visual sibling of the dots loading indicator; interchangeable with the other
- * loading styles for the "assistant is working" state.
- *
- * @example
- * ```html
- * <ai-plasma-orb-indicator></ai-plasma-orb-indicator>
- * ```
- *
- * @beta
- */
-@customElement({
-  name: 'ai-plasma-orb-indicator',
-  template: html<AiPlasmaOrbIndicator>`
-    <div class="pulse" role="img" aria-label="Assistant is working">
-      <div class="plasma">
-        <div class="swirl1"></div>
-        <div class="swirl2"></div>
-        <svg class="filaments" viewBox="0 0 100 100">
-          <g>
-            <path d="M8 50 Q50 18 92 50" />
-            <path d="M50 8 Q82 50 50 92" />
-            <path d="M18 22 Q52 54 82 80" />
-            <path d="M82 20 Q48 46 20 82" />
-            <path d="M12 64 Q50 38 88 34" />
-            <path d="M30 12 Q55 50 72 88" />
-            <path d="M14 38 Q50 60 86 62" />
-            <path d="M66 10 Q44 48 24 90" />
-            <path d="M10 28 Q56 44 90 72" />
-            <path d="M88 44 Q46 52 16 76" />
-            <path d="M40 6 Q58 50 88 86" />
-            <path d="M22 86 Q46 44 60 8" />
-          </g>
-        </svg>
-        <div class="tint"></div>
-        <div class="hot"></div>
-      </div>
-      <div class="ring-emit"></div>
-      <div class="ring-emit r2"></div>
-    </div>
-  `,
-  styles: css`
-    :host {
-      position: relative;
-      display: inline-block;
-      width: 56px;
-      height: 56px;
-    }
-
-    /* Authored at the gallery's native 100px size and scaled down so the px
-       glow/filament geometry keeps its proportions. Absolutely centred so the
-       overflowing glow/rings don't affect the host's layout box. */
-    .pulse {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      width: 100px;
-      height: 100px;
-      transform: translate(-50%, -50%) scale(0.56);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .plasma {
-      position: relative;
-      width: 86px;
-      height: 86px;
-      border-radius: 50%;
-      overflow: hidden;
-      isolation: isolate;
-      background: radial-gradient(
-        circle at 50% 40%,
-        #fdf2ff 0%,
-        #f3c7fd 14%,
-        #e362ff 38%,
-        ${AI_COLOUR_VIOLET} 62%,
-        #8a0a9c 84%,
-        #3a0044 100%
-      );
-      box-shadow:
-        0 0 20px 5px color-mix(in srgb, ${AI_COLOUR_VIOLET}, transparent 20%),
-        0 0 48px 12px color-mix(in srgb, ${AI_COLOUR_VIOLET}, transparent 58%),
-        inset 0 0 22px rgb(255 255 255 / 22%),
-        inset 0 0 8px rgb(255 255 255 / 50%);
-    }
-
-    /* bright rim light */
-    .plasma::after {
-      content: '';
-      position: absolute;
-      inset: 0;
-      border-radius: 50%;
-      z-index: 5;
-      pointer-events: none;
-      box-shadow:
-        inset 0 0 6px 1px rgb(245 220 255 / 90%),
-        inset 0 0 16px color-mix(in srgb, ${AI_COLOUR_VIOLET}, transparent 35%);
-    }
-
-    /* slow colour shift: washes the orb toward cyan/pink and back */
-    .tint {
-      position: absolute;
-      inset: 0;
-      border-radius: 50%;
-      z-index: 4;
-      pointer-events: none;
-      background: radial-gradient(
-        circle at 50% 40%,
-        color-mix(in srgb, ${AI_COLOUR_CYAN}, white 35%) 0%,
-        ${AI_COLOUR_CYAN} 45%,
-        ${AI_COLOUR_PINK} 100%
-      );
-      mix-blend-mode: color;
-      opacity: 0;
-      animation: plasma-tint 9s ease-in-out infinite;
-    }
-    @keyframes plasma-tint {
-      0%,
-      100% {
-        opacity: 0;
-      }
-      50% {
-        opacity: 0.85;
-      }
-    }
-
-    /* warm white-hot core highlight (shifts, never resizes the orb) */
-    .hot {
-      position: absolute;
-      left: 50%;
-      top: 38%;
-      width: 42px;
-      height: 36px;
-      z-index: 4;
-      border-radius: 50%;
-      pointer-events: none;
-      filter: blur(3px);
-      background: radial-gradient(
-        circle,
-        rgb(255 255 255 / 90%) 0%,
-        color-mix(in srgb, ${AI_COLOUR_AMBER}, white 30%) 42%,
-        rgb(255 255 255 / 0%) 70%
-      );
-      animation: plasma-hot 5s ease-in-out infinite;
-    }
-    @keyframes plasma-hot {
-      0%,
-      100% {
-        opacity: 0.65;
-        transform: translate(-50%, -50%) translate(-2px, 1px);
-      }
-      50% {
-        opacity: 1;
-        transform: translate(-50%, -50%) translate(3px, -2px);
-      }
-    }
-
-    /* swirling radial filaments */
-    .swirl1,
-    .swirl2 {
-      position: absolute;
-      inset: -25%;
-      border-radius: 50%;
-      z-index: 2;
-      mix-blend-mode: screen;
-    }
-    .swirl1 {
-      background: conic-gradient(
-        from 0deg,
-        transparent 0 4deg,
-        rgb(225 240 255 / 55%) 7deg,
-        transparent 11deg 58deg,
-        rgb(190 225 255 / 45%) 64deg,
-        transparent 70deg 138deg,
-        rgb(255 255 255 / 50%) 144deg,
-        transparent 150deg 220deg,
-        rgb(200 230 255 / 45%) 226deg,
-        transparent 232deg 300deg,
-        rgb(255 255 255 / 45%) 306deg,
-        transparent 312deg 360deg
-      );
-      filter: blur(3px);
-      animation: plasma-spin-cw 9s linear infinite;
-    }
-    .swirl2 {
-      background: conic-gradient(
-        from 40deg,
-        transparent 0 30deg,
-        rgb(180 215 255 / 40%) 36deg,
-        transparent 42deg 110deg,
-        rgb(255 255 255 / 40%) 116deg,
-        transparent 122deg 190deg,
-        rgb(190 225 255 / 40%) 196deg,
-        transparent 202deg 280deg,
-        rgb(255 255 255 / 40%) 286deg,
-        transparent 292deg 360deg
-      );
-      filter: blur(5px);
-      animation: plasma-spin-ccw 13s linear infinite;
-    }
-
-    /* curved web filaments */
-    .filaments {
-      position: absolute;
-      inset: 0;
-      width: 100%;
-      height: 100%;
-      z-index: 3;
-      overflow: visible;
-      mix-blend-mode: screen;
-      filter: blur(0.5px);
-    }
-    .filaments g {
-      transform-box: fill-box;
-      transform-origin: center;
-      animation: plasma-spin-ccw 18s linear infinite;
-    }
-    .filaments path {
-      fill: none;
-      stroke: rgb(230 245 255 / 50%);
-      stroke-width: 0.7;
-    }
-
-    /* soft light rings emitting outward from the orb */
-    .ring-emit {
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      width: 86px;
-      height: 86px;
-      transform: translate(-50%, -50%);
-      border-radius: 50%;
-      border: 2px solid color-mix(in srgb, ${AI_COLOUR_VIOLET}, transparent 25%);
-      box-shadow: 0 0 8px color-mix(in srgb, ${AI_COLOUR_VIOLET}, transparent 35%);
-      pointer-events: none;
-      z-index: 0;
-      animation: plasma-emit 2.8s ease-out infinite;
-    }
-    .ring-emit.r2 {
-      animation-delay: 1.4s;
-    }
-    @keyframes plasma-emit {
-      0% {
-        transform: translate(-50%, -50%) scale(1);
-        opacity: 0.7;
-      }
-      100% {
-        transform: translate(-50%, -50%) scale(1.45);
-        opacity: 0;
-      }
-    }
-
-    @keyframes plasma-spin-cw {
-      to {
-        transform: rotate(360deg);
-      }
-    }
-    @keyframes plasma-spin-ccw {
-      to {
-        transform: rotate(-360deg);
-      }
-    }
-  `,
-})
-export class AiPlasmaOrbIndicator extends GenesisElement {}

package/src/components/popout-manager/index.ts

@@ -1 +0,0 @@
-export * from './popout-manager';

package/src/components/popout-manager/popout-manager.ts

@@ -1,212 +0,0 @@
-import { customElement, GenesisElement, html, observable } from '@genesislcap/web-core';
-import { agenticActivityBus } from '../../channel/ai-activity-bus';
-
-/**
- * Contract for pages that support docking the AI assistant.
- * Register an implementation with {@link getAiPopoutManager} on mount and deregister on unmount.
- *
- * @beta
- */
-export interface AiDockProvider {
-  /**
-   * Called when the user expands the bubble. The provider **moves the given
-   * element** into its layout — e.g. via a layout factory that re-parents it into
-   * a pane. It is the ONE live assistant element, so it must be moved by reference,
-   * **not cloned** (a clone would be a second, dead instance). Session state
-   * survives the move because it lives in module-level registries, not the element.
-   */
-  onDock(element: HTMLElement): Promise<void>;
-  /**
-   * Called when the user collapses the panel or before navigation. By the time
-   * this runs the manager has already moved the assistant element back into the
-   * bubble, so the provider only needs to tear down its now-empty layout slot.
-   */
-  onUndock(): Promise<void>;
-  /**
-   * Called by `collapseIfDocked` before navigation. The provider is responsible for
-   * finding the docked assistant element and calling `handlePopout()` on it, which
-   * publishes `chat-popin` and returns the assistant to the bubble.
-   */
-  initiateCollapse(): void;
-}
-
-/**
- * App-shell component that owns the pop-out/pop-in lifecycle for the AI assistant bubble.
- *
- * @remarks
- * Place this in the persistent app shell, wrapping a `foundation-ai-chat-bubble` that
- * contains an AI assistant element in the `dialog-content` slot.
- *
- * GENC-1351 (Option A — single element): rather than cloning a second assistant to
- * dock, this manager **moves the one real element** between the bubble and the page
- * layout. One connected instance means no dual-view coordination (no shared-driver
- * unwire/rewire, host election, or duplicated side-effects); the session survives the
- * move because the driver/store/persister live in module-level registries keyed by the
- * element's identity.
- *
- * Pages that support docking call `aiPopoutManager.registerDockProvider()` on mount
- * and `aiPopoutManager.deregisterDockProvider()` on unmount.
- *
- * @example
- * ```html
- * <foundation-ai-popout-manager>
- *   <foundation-ai-chat-bubble title="My Assistant">
- *     <my-assistant slot="dialog-content"></my-assistant>
- *   </foundation-ai-chat-bubble>
- * </foundation-ai-popout-manager>
- * ```
- *
- * @beta
- */
-@customElement({
-  name: 'foundation-ai-popout-manager',
-  template: html`
-    <slot></slot>
-  `,
-})
-export class FoundationAiPopoutManager extends GenesisElement {
-  /** True when a dock provider is registered — controls expand button visibility. */
-  @observable canDock = false;
-
-  /**
-   * The single assistant element. Captured while it's in the bubble slot and held
-   * across the move (it's the same instance whether docked or in the bubble), so
-   * pop-in can re-home it even though it's no longer a child of this manager.
-   */
-  private assistantEl: HTMLElement | null = null;
-  private dockProvider: AiDockProvider | null = null;
-  private isDocked = false;
-  private unsubBus?: () => void;
-
-  connectedCallback() {
-    super.connectedCallback();
-    // oxlint-disable-next-line typescript/no-this-alias -- module-level singleton, not a local alias
-    _aiPopoutManager = this;
-
-    this.assistantEl = this.findAssistant();
-
-    const unsubPopout = agenticActivityBus.subscribe('chat-popout', async () => {
-      if (this.isDocked || !this.dockProvider) return;
-      const el = (this.assistantEl ??= this.findAssistant());
-      if (!el) return;
-      this.isDocked = true;
-      _aiAssistantDocked = true;
-      this.syncBubbleVisibility();
-      // Reflect the new location on the assistant so its header shows the "collapse"
-      // affordance. This is now purely cosmetic — the element stays wired across the
-      // move, so an async mode-forward by a wrapper element can't break it.
-      el.setAttribute('popout-mode', 'collapse');
-      // Hand the ONE real element to the page; the provider moves it into its layout.
-      await this.dockProvider.onDock(el);
-    });
-
-    const unsubPopin = agenticActivityBus.subscribe('chat-popin', async () => {
-      if (!this.isDocked) return;
-      this.isDocked = false;
-      _aiAssistantDocked = false;
-      // Re-home the assistant into the bubble BEFORE the provider tears down its
-      // layout slot — its removeItems (or equivalent) would otherwise destroy the
-      // moved element.
-      const bubble = this.querySelector('foundation-ai-chat-bubble');
-      if (this.assistantEl && bubble) {
-        this.assistantEl.setAttribute('popout-mode', 'expand');
-        this.assistantEl.setAttribute('slot', 'dialog-content');
-        bubble.appendChild(this.assistantEl);
-      }
-      this.syncBubbleVisibility();
-      await this.dockProvider?.onUndock();
-    });
-
-    this.unsubBus = () => {
-      unsubPopout();
-      unsubPopin();
-    };
-    this.syncBubbleVisibility();
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.unsubBus?.();
-    this.unsubBus = undefined;
-    _aiPopoutManager = undefined;
-  }
-
-  /** Locate the assistant element currently slotted into the bubble. */
-  private findAssistant(): HTMLElement | null {
-    const bubble = this.querySelector('foundation-ai-chat-bubble');
-    return (bubble?.querySelector('[slot="dialog-content"]') as HTMLElement | null) ?? null;
-  }
-
-  /**
-   * Register an externally-created assistant element and its docked state. For
-   * single-element hosts that create the assistant directly in a layout pane (rather
-   * than statically in the bubble), so the manager tracks the one element, whether it's
-   * currently docked (for pop-in re-homing), reflects the right `popout-mode` on it
-   * (drives the header button), and hides the empty bubble.
-   */
-  adoptAssistant(el: HTMLElement, docked: boolean): void {
-    this.assistantEl = el;
-    this.isDocked = docked;
-    _aiAssistantDocked = docked;
-    el.setAttribute('popout-mode', docked ? 'collapse' : 'expand');
-    this.syncBubbleVisibility();
-  }
-
-  /** Hide the floating bubble unless it currently contains the assistant. */
-  private syncBubbleVisibility(): void {
-    const bubble = this.querySelector('foundation-ai-chat-bubble') as HTMLElement | null;
-    if (!bubble) return;
-    const hasAssistant = !!bubble.querySelector('[slot="dialog-content"]');
-    bubble.style.display = this.isDocked || !hasAssistant ? 'none' : '';
-  }
-
-  canDockChanged() {
-    const el = (this.assistantEl ??= this.findAssistant());
-    if (this.canDock) {
-      el?.setAttribute('popout-mode', this.isDocked ? 'collapse' : 'expand');
-    } else {
-      el?.removeAttribute('popout-mode');
-    }
-  }
-
-  registerDockProvider(provider: AiDockProvider): void {
-    this.dockProvider = provider;
-    this.canDock = true;
-  }
-
-  deregisterDockProvider(): void {
-    this.isDocked = false;
-    _aiAssistantDocked = false;
-    this.dockProvider = null;
-    this.canDock = false;
-  }
-
-  /**
-   * If the assistant is currently docked, collapses it back into the bubble.
-   * Await this in `onBeforeNavButtonClick` to ensure cleanup before navigation.
-   */
-  collapseIfDocked(): Promise<void> {
-    if (!this.isDocked || !this.dockProvider) return Promise.resolve();
-    this.dockProvider.initiateCollapse();
-    return Promise.resolve();
-  }
-}
-
-let _aiPopoutManager: FoundationAiPopoutManager | undefined;
-/** Whether the assistant is currently docked in the layout panel (vs bubble-only). */
-let _aiAssistantDocked = false;
-
-/** True when the assistant is active in the layout panel (docked) rather than the bubble. */
-export function isAiAssistantDocked(): boolean {
-  return _aiAssistantDocked;
-}
-
-/**
- * Returns the active `FoundationAiPopoutManager` instance, or `undefined` if none is mounted.
- * Import this in pages to call `registerDockProvider` / `deregisterDockProvider`.
- *
- * @beta
- */
-export function getAiPopoutManager(): FoundationAiPopoutManager | undefined {
-  return _aiPopoutManager;
-}

package/src/components/settings-modal/index.ts

@@ -1,2 +0,0 @@
-export { SettingsModalTemplate, type SettingsModalTab } from './settings-modal.template';
-export { settingsModalStyles } from './settings-modal.styles';

package/src/components/settings-modal/settings-modal.styles.test.ts

@@ -1,94 +0,0 @@
-import { assert, createLogicSuite } from '@genesislcap/foundation-testing';
-import { settingsModalStyles } from './settings-modal.styles';
-
-// GENC-1464 budget meter — the styling invariants a reviewer would otherwise
-// have to catch by eye, following main.styles.test.ts (see there for why CSS
-// gets asserted from the generated text at all, and for the scoping lesson:
-// these assertions are about the BUDGET rules only, not a global style policy).
-//
-//   1. Design-system tokens are consumed UNFALLBACKED — the #2411/#2436 review
-//      rule. Every token the meter reads ships a DS default, so a
-//      `var(--token, fallback)` is dead code at best and a silently-broken
-//      token name at worst.
-//   2. The meter's row anatomy is SHARED with the context indicator via grouped
-//      selectors, not copied. The two indicators are siblings by design;
-//      copied declarations would let them drift apart one edit at a time, which
-//      is exactly what the grouping was chosen to make impossible.
-
-const suite = createLogicSuite('settings-modal.styles budget-meter rules');
-
-/**
- * The generated stylesheet text, flattened recursively — `css` composes nested
- * `ElementStyles`, and a shallow read can return almost nothing, making every
- * negative assertion below pass vacuously. The first test guards that.
- */
-const flatten = (value: unknown): string => {
-  if (typeof value === 'string') return value;
-  if (Array.isArray(value)) return value.map(flatten).join('\n');
-  const nested = (value as { styles?: unknown } | null | undefined)?.styles;
-  return nested ? flatten(nested) : '';
-};
-
-/**
- * Comments stripped before matching: the assertions below are about
- * DECLARATIONS, and the sheet's own prose legitimately mentions the very
- * pattern (`var(--x, y)`) the negative assertion hunts for.
- */
-const cssText = flatten(settingsModalStyles).replace(/\/\*[\s\S]*?\*\//g, '');
-
-/** Every declaration block whose selector mentions `.settings-budget-`, joined. */
-const budgetRules = (cssText.match(/[^{}]*\.settings-budget-[^{}]*\{[^}]*\}/g) ?? []).join('\n');
-
-suite('the budget rules were extracted as text (guards the assertions below)', () => {
-  assert.ok(cssText.includes('.settings-budget-usage'), 'the meter container rule is in the sheet');
-  assert.ok(budgetRules.length > 0, 'the extraction found the budget rules');
-});
-
-suite('the meter consumes design-system tokens without dead fallbacks', () => {
-  // One structural probe rather than a per-token list: ANY `var(--x,` inside a
-  // budget rule is a fallback, and the meter reads only tokens that ship DS
-  // defaults (--design-unit, --neutral-foreground-*), so there is no legitimate
-  // fallback for this scope. Scoped to the budget rules on purpose — see
-  // main.styles.test.ts for why a whole-sheet grep is the wrong test.
-  assert.not.ok(/var\(--[a-z-]+\s*,/.test(budgetRules), 'no var(--token, fallback) in the meter');
-  assert.ok(budgetRules.includes('var(--design-unit)'), 'and it does consume tokens');
-});
-
-suite('every meter row sits on one shared rhythm', () => {
-  // The 4/2/2 fix. `.settings-modal-section-body` gaps at 4 units and the
-  // budget meter at 2, so an unwrapped context indicator sat 4 units above the
-  // FIRST vendor row while the vendor rows sat 2 apart — three visually
-  // identical meter rows, unevenly spaced. Both meters now live in
-  // `.settings-usage-meters`, which must carry the SAME gap as the meter it
-  // wraps: asserted as ONE grouped rule, so the two cannot drift to different
-  // rhythms. (settings-modal.template.test.ts pins the other half — that the
-  // wrapper is conditional, so a host with no meters pays no stray gap for it.)
-  const shared = /\.settings-usage-meters\s*,\s*\.settings-budget-usage\s*\{([^}]*)\}/.exec(
-    cssText,
-  );
-  assert.ok(shared, '.settings-usage-meters is grouped with .settings-budget-usage');
-  assert.ok(shared![1].includes('flex-direction: column'), 'the shared container is a column');
-  assert.ok(
-    shared![1].includes('gap: calc(var(--design-unit) * 2px)'),
-    'gapped at the meter rhythm (2 units), not the section body 4',
-  );
-});
-
-suite("the meter shares the context indicator's row anatomy by grouped selector", () => {
-  // The invariant is the SHARING, not the shape: each budget class must sit in
-  // the same selector list as its context sibling, so restyling one restyles
-  // both and the two indicators cannot drift apart.
-  const sharedPairs: Array<[string, string]> = [
-    ['.settings-context-header', '.settings-budget-header'],
-    ['.settings-context-label', '.settings-budget-label'],
-    ['.settings-context-tokens', '.settings-budget-figures'],
-  ];
-  for (const [contextClass, budgetClass] of sharedPairs) {
-    const grouped = new RegExp(
-      `${contextClass.replace(/\./g, '\\.')}\\s*,\\s*${budgetClass.replace(/\./g, '\\.')}\\s*\\{`,
-    );
-    assert.ok(grouped.test(cssText), `${budgetClass} is grouped with ${contextClass}`);
-  }
-});
-
-suite.run();