@genesislcap/ai-assistant 14.458.1-GENC-0.3 → 14.458.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/ai-assistant",
   "description": "Genesis AI Assistant micro-frontend",
-  "version": "14.458.1-GENC-0.3",
+  "version": "14.458.2",
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
   "types": "dist/ai-assistant.d.ts",
@@ -64,24 +64,24 @@
     }
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "14.458.1-GENC-0.3",
-    "@genesislcap/genx": "14.458.1-GENC-0.3",
-    "@genesislcap/rollup-builder": "14.458.1-GENC-0.3",
-    "@genesislcap/ts-builder": "14.458.1-GENC-0.3",
-    "@genesislcap/uvu-playwright-builder": "14.458.1-GENC-0.3",
-    "@genesislcap/vite-builder": "14.458.1-GENC-0.3",
-    "@genesislcap/webpack-builder": "14.458.1-GENC-0.3",
+    "@genesislcap/foundation-testing": "14.458.2",
+    "@genesislcap/genx": "14.458.2",
+    "@genesislcap/rollup-builder": "14.458.2",
+    "@genesislcap/ts-builder": "14.458.2",
+    "@genesislcap/uvu-playwright-builder": "14.458.2",
+    "@genesislcap/vite-builder": "14.458.2",
+    "@genesislcap/webpack-builder": "14.458.2",
     "@types/dompurify": "^3.0.5",
     "@types/marked": "^5.0.2"
   },
   "dependencies": {
-    "@genesislcap/foundation-ai": "14.458.1-GENC-0.3",
-    "@genesislcap/foundation-logger": "14.458.1-GENC-0.3",
-    "@genesislcap/foundation-redux": "14.458.1-GENC-0.3",
-    "@genesislcap/foundation-ui": "14.458.1-GENC-0.3",
-    "@genesislcap/foundation-utils": "14.458.1-GENC-0.3",
-    "@genesislcap/rapid-design-system": "14.458.1-GENC-0.3",
-    "@genesislcap/web-core": "14.458.1-GENC-0.3",
+    "@genesislcap/foundation-ai": "14.458.2",
+    "@genesislcap/foundation-logger": "14.458.2",
+    "@genesislcap/foundation-redux": "14.458.2",
+    "@genesislcap/foundation-ui": "14.458.2",
+    "@genesislcap/foundation-utils": "14.458.2",
+    "@genesislcap/rapid-design-system": "14.458.2",
+    "@genesislcap/web-core": "14.458.2",
     "dompurify": "^3.3.1",
     "marked": "^17.0.3"
   },
@@ -93,5 +93,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8c0abb0de4dbbe5069d5456c3d8e7a52b5854133"
+  "gitHead": "d2445453c001d9ab1377d1c0a6d90e2b65adb448"
 }

package/src/main/main.styles.ts

@@ -101,22 +101,14 @@ export const styles = css`
     animation: settings-slide-out 0.2s ease-in forwards;
   }
 
-  /* Collapsed control footprint stays compact (100px)... */
-  rapid-categorized-multiselect::part(root) {
-    min-width: 0;
-    width: 100px;
+  rapid-multiselect::part(root) {
+    min-width: 80px;
+    width: 300%;
   }
 
-  /* ...while the dropdown panel, being absolutely positioned, can be wider
-     (200px) without affecting the root's layout footprint. The control sits on
-     a different side of the settings panel depending on the container width
-     (see the layout rules below), so the dropdown must anchor to whichever side
-     keeps it inside the panel. Default (narrow) layout puts the control on the
-     LEFT, so the dropdown grows rightward. */
-  rapid-categorized-multiselect::part(options) {
-    width: 200px;
-    left: 0;
-    right: auto;
+  rapid-multiselect::part(control),
+  .settings-panel > [part='download-button'] {
+    width: fit-content;
   }
 
   .settings-panel > [part='toggle-tool-calls'] {
@@ -135,7 +127,6 @@ export const styles = css`
   }
 
   .settings-panel > [part='download-button'] {
-    width: fit-content;
     grid-column: 2;
     grid-row: 2;
   }
@@ -185,13 +176,6 @@ export const styles = css`
     .settings-panel > .settings-animations {
       grid-row: 2;
     }
-
-    /* Control now sits on the RIGHT (justify-self: end / margin-left: auto in
-       the wider layouts), so the dropdown grows leftward to stay in the panel. */
-    rapid-categorized-multiselect::part(options) {
-      left: auto;
-      right: 0;
-    }
   }
 
   @container (min-width: 750px) {
@@ -825,22 +809,6 @@ export const styles = css`
     }
   }
 
-  .thinking-waves {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    align-self: center;
-    gap: 6px;
-    padding: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 3px);
-  }
-
-  .thinking-caption {
-    font-size: var(--type-ramp-minus-1-font-size, 12px);
-    line-height: var(--type-ramp-minus-1-line-height, 16px);
-    color: var(--neutral-foreground-rest);
-    opacity: 70%;
-  }
-
   .attachment-chips {
     display: flex;
     flex-wrap: wrap;

package/src/main/main.template.ts

@@ -40,6 +40,10 @@ function unknownToolPayload(tc: ChatToolCall): string {
   return lines.join('\n');
 }
 
+const animationItemRenderer = (option: any): ViewTemplate => html`
+  <span part="option-label" title="${() => option.tooltip}">${() => option.label}</span>
+`;
+
 const HALO_SPEED_DEFAULT = 1.5;
 const HALO_SPEED_ORCHESTRATING = 0.4;
 const HALO_BORDER_SIZE_DEFAULT = 3;
@@ -48,10 +52,9 @@ const HALO_BORDER_SIZE_DEFAULT = 3;
 const SESSION_COST_DECIMALS = 4;
 
 const animationOptions = Object.entries(ANIMATION_DEFS).map(([value, def]) => ({
-  type: def.category,
   value,
   label: def.label,
-  description: def.description,
+  tooltip: def.tooltip,
 }));
 
 // Avatar markup is owned by the component (`assistantIconSafe` / `userIconSafe`),
@@ -173,30 +176,6 @@ const liveSubAgentTraceTemplate = html<FoundationAiAssistant>`
   </div>
 `;
 
-// The two interchangeable loading indicators. These MUST be stable module-level
-// instances: the binding that selects between them reads `enabledAnimations`,
-// which is backed by the redux store proxy and re-evaluates on every change to
-// the aiAssistant slice (i.e. every new message, including hidden tool-call and
-// thinking-step messages). Returning a fresh `html` instance from that binding
-// would make FAST tear down and rebuild the indicator DOM each time, restarting
-// the dots' CSS animation and the waves' rAF loop. Stable references let FAST
-// reuse the existing view so the animation runs uninterrupted.
-const thinkingDotsTemplate = html<FoundationAiAssistant>`
-  <div class="thinking-dots">
-    <div class="dot dot-1"></div>
-    <div class="dot dot-2"></div>
-    <div class="dot dot-3"></div>
-    <div class="dot dot-4"></div>
-  </div>
-`;
-
-const thinkingWavesTemplate = html<FoundationAiAssistant>`
-  <div class="thinking-waves" part="thinking-waves">
-    <ai-waves-indicator></ai-waves-indicator>
-    <span class="thinking-caption">Thinking...</span>
-  </div>
-`;
-
 // ─── Public factory ───────────────────────────────────────────────────────────
 
 /** @internal */
@@ -205,7 +184,7 @@ export const FoundationAiAssistantTemplate = (
 ): ViewTemplate<FoundationAiAssistant> => {
   const buttonTag = `${designSystemPrefix}-button`;
   const switchTag = `${designSystemPrefix}-switch`;
-  const categorizedMultiselectTag = `${designSystemPrefix}-categorized-multiselect`;
+  const multiselectTag = `${designSystemPrefix}-multiselect`;
   const textareaTag = `${designSystemPrefix}-text-area`;
   const iconTag = `${designSystemPrefix}-icon`;
   const progressTag = `${designSystemPrefix}-progress`;
@@ -494,14 +473,16 @@ ${(tc) => (tc.foldPath?.length ? `${tc.foldPath.join(' › ')} › ` : '')}<stro
                   html<FoundationAiAssistant>`
                     <div class="settings-animations">
                       <span class="settings-label">Animations</span>
-                      <${categorizedMultiselectTag}
+                      <${multiselectTag}
                         part="toggle-animations"
                         :selectedOptions=${(x) => x.enabledAnimations}
                         :options=${() => animationOptions}
+                        :itemRenderer=${() => animationItemRenderer}
                         @selectionChange=${(x, c) =>
                           x.setEnabledAnimations((c.event as CustomEvent).detail)}
                         search="false"
-                      ></${categorizedMultiselectTag}>
+                        all="false"
+                      ></${multiselectTag}>
                     </div>
                   `,
                 )}
@@ -609,9 +590,7 @@ ${(tc) => (tc.foldPath?.length ? `${tc.foldPath.join(' › ')} › ` : '')}<stro
         ${when(
           (x) =>
             x.showLoadingIndicator &&
-            (x.chatConfig.ui?.animations == null ||
-              x.enabledAnimations.includes('loading') ||
-              x.enabledAnimations.includes('waves')),
+            (x.chatConfig.ui?.animations == null || x.enabledAnimations.includes('loading')),
           html<FoundationAiAssistant>`
             <div class="message-row ai" part="thinking">
               <div class="avatar">
@@ -624,10 +603,12 @@ ${(tc) => (tc.foldPath?.length ? `${tc.foldPath.join(' › ')} › ` : '')}<stro
                         <span class="avatar-icon" :innerHTML="${() => x.assistantIconSafe}"></span>
                       `}
               </div>
-              ${(x) =>
-                x.enabledAnimations.includes('waves')
-                  ? thinkingWavesTemplate
-                  : thinkingDotsTemplate}
+              <div class="thinking-dots">
+                <div class="dot dot-1"></div>
+                <div class="dot dot-2"></div>
+                <div class="dot dot-3"></div>
+                <div class="dot dot-4"></div>
+              </div>
             </div>
           `,
         )}

package/src/main/main.ts

@@ -49,7 +49,6 @@ import { AiChatInteractionWrapper } from '../components/chat-interaction-wrapper
 import { AiChatMarkdown } from '../components/chat-markdown/chat-markdown';
 import { AiHaloOverlay } from '../components/halo-overlay';
 import { OrchestratingDriver } from '../components/orchestrating-driver/orchestrating-driver';
-import { AiWavesIndicator } from '../components/waves-indicator';
 import type { AgentConfig } from '../config/config';
 import {
   recordMetaEvent,
@@ -67,7 +66,6 @@ import {
 } from '../styles/ai-colours';
 import { ChatSuggestions } from '../suggestions/chat-suggestions';
 import { AnimatedPanelToggle } from '../utils/animated-panel-toggle';
-import { resolveExclusiveLoadingStyle } from '../utils/animation-exclusivity';
 import { logger } from '../utils/logger';
 import { filterVisibleMessages, trailingInteractionRow } from '../utils/message-partition';
 import { sumCosts } from '../utils/sum-costs';
@@ -82,7 +80,7 @@ import type {
   SubmitMessageResult,
   SuggestionsState,
 } from './main.types';
-import { DEFAULT_ANIMATIONS } from './main.types';
+import { ALL_ANIMATIONS } from './main.types';
 
 /** Context window sizes (in tokens) for known models. */
 /**
@@ -139,7 +137,6 @@ avoidTreeShaking(
   AiChatMarkdown,
   AiChatInteractionWrapper,
   AiHaloOverlay,
-  AiWavesIndicator,
   AiChatBubble,
   AiActivityHalo,
   ChatSuggestions,
@@ -659,9 +656,7 @@ export class FoundationAiAssistant extends GenesisElement {
       return;
     }
     const last = this.messages[this.messages.length - 1];
-    // Hide only while a pending interaction blocks on the user; a resolved
-    // interaction means the assistant is computing again (keep the halo).
-    if (last?.interaction && !last.interaction.resolved) {
+    if (last?.interaction) {
       this.showHalo = 'no';
     } else if (this.showHalo !== 'orchestrating') {
       this.showHalo = 'agent';
@@ -1052,10 +1047,9 @@ export class FoundationAiAssistant extends GenesisElement {
       this.showToolCalls = ui.showToolCalls === true;
       this.showThinkingSteps = ui.showThinkingSteps === true;
       this.showAgentSwitchIndicator = ui.showAgentSwitchIndicator === true;
-      this.enabledAnimations = resolveExclusiveLoadingStyle(
+      this.enabledAnimations =
         (ui.animations?.enabled as AiAssistantAnimation[]) ??
-          (ui.animations ? [...DEFAULT_ANIMATIONS] : []),
-      );
+        (ui.animations ? [...ALL_ANIMATIONS] : []);
 
       const defaultAgent = this.chatConfig.picker?.defaultAgent;
       if (defaultAgent && (this.agents ?? []).some((a) => a.name === defaultAgent)) {
@@ -1222,13 +1216,9 @@ export class FoundationAiAssistant extends GenesisElement {
     // waiting for the user, not computing.
     if (this.busy) {
       const last = this.messages[this.messages.length - 1];
-      // Only a *pending* interaction means the assistant is blocked waiting on
-      // the user. Once it's resolved — or for any normal step — the assistant is
-      // computing again, so the indicator should resume (e.g. while it works out
-      // the next planning question after the user answers a widget).
-      if (last?.interaction && !last.interaction.resolved) {
+      if (last?.interaction) {
         this.stopLoadingTimer();
-      } else {
+      } else if (last?.role === 'assistant') {
         this.startLoadingTimer();
       }
     }
@@ -1312,7 +1302,7 @@ export class FoundationAiAssistant extends GenesisElement {
     });
   }
 
-  private static readonly DEFAULT_LOADING_DELAY_S = 0;
+  private static readonly DEFAULT_LOADING_DELAY_S = 5;
   private static readonly DEFAULT_SUGGESTION_COUNT = 3;
   private static readonly MS_PER_SECOND = 1000;
 
@@ -1516,9 +1506,7 @@ export class FoundationAiAssistant extends GenesisElement {
   }
 
   setEnabledAnimations(animations: AiAssistantAnimation[]) {
-    // The dots and waves loading styles are mutually exclusive — enabling one
-    // disables the other (see resolveExclusiveLoadingStyle).
-    this.enabledAnimations = resolveExclusiveLoadingStyle(animations, this.enabledAnimations);
+    this.enabledAnimations = animations;
   }
 
   getDebugLog() {

package/src/main/main.types.ts

@@ -53,41 +53,24 @@ export type SuggestionsState =
 export interface AiAssistantAnimationDef {
   /** Display label shown in the settings multiselect. */
   label: string;
-  /** Short description shown beneath the label in the categorized multiselect. */
-  description: string;
-  /** Group heading the option is listed under in the settings multiselect. */
-  category: string;
+  /** Short description shown as a tooltip on the option. */
+  tooltip: string;
 }
 
 /**
  * Registry of all available animations with their display metadata.
  * Adding an entry here automatically extends the {@link AiAssistantAnimation} type.
  *
- * @remarks
- * `loading` (dots) and `waves` are two interchangeable styles of the same
- * "is the assistant working" indicator and are therefore grouped under the same
- * {@link AiAssistantAnimationDef.category}. They are mutually exclusive — see
- * `LOADING_STYLE_ANIMATIONS`.
- *
  * @beta
  */
 export const ANIMATION_DEFS = {
   loading: {
-    label: 'Dots',
-    description: 'Shows pulsing dots while the assistant is generating a response.',
-    category: 'Loading style',
-  },
-  waves: {
-    label: 'Waves',
-    description:
-      'Shows glowing sine waves inside a circle while the assistant is generating a response.',
-    category: 'Loading style',
+    label: 'Loading indicator',
+    tooltip: 'Shows a pulsing animation while the assistant is generating a response.',
   },
   halo: {
     label: 'Halo',
-    description:
-      'Displays a glowing halo around the assistant avatar while a response is streaming.',
-    category: 'Effects',
+    tooltip: 'Displays a glowing halo around the assistant avatar while a response is streaming.',
   },
 } satisfies Record<string, AiAssistantAnimationDef>;
 
@@ -104,23 +87,3 @@ export type AiAssistantAnimation = keyof typeof ANIMATION_DEFS;
  * @internal
  */
 export const ALL_ANIMATIONS = Object.keys(ANIMATION_DEFS) as AiAssistantAnimation[];
-
-/**
- * The interchangeable "assistant is working" loading-indicator styles. At most
- * one of these may be enabled at a time — enabling one disables the other.
- *
- * @internal
- */
-export const LOADING_STYLE_ANIMATIONS = [
-  'loading',
-  'waves',
-] as const satisfies readonly AiAssistantAnimation[];
-
-/**
- * Animations enabled by default when a consumer opts into the animations
- * feature without specifying an explicit `enabled` list. Keeps the dots loading
- * style (the long-standing default); the waves style is opt-in.
- *
- * @internal
- */
-export const DEFAULT_ANIMATIONS: AiAssistantAnimation[] = ['loading', 'halo'];

package/dist/dts/components/waves-indicator.d.ts

@@ -1,30 +0,0 @@
-import { GenesisElement } from '@genesislcap/web-core';
-/**
- * Animated "waves inside a circle" loading indicator — coloured sine waves that
- * slosh like glowing liquid inside a circular window, ringed by a rotating
- * gradient halo (the same effect as `<ai-halo-overlay>`).
- *
- * Visual sibling of the dots loading indicator; the two are interchangeable
- * styles of the same "assistant is working" state.
- *
- * @example
- * ```html
- * <ai-waves-indicator size="56"></ai-waves-indicator>
- * ```
- *
- * @beta
- */
-export declare class AiWavesIndicator extends GenesisElement {
-    /** Diameter of the circular window in px. Default: 56. */
-    size: number;
-    sizeChanged(): void;
-    private frame;
-    private animFrame?;
-    private wavePaths?;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private tick;
-    /** Trace one wave's polyline `d` attribute for the given frame. */
-    private static buildWavePath;
-}
-//# sourceMappingURL=waves-indicator.d.ts.map

package/dist/dts/components/waves-indicator.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"waves-indicator.d.ts","sourceRoot":"","sources":["../../../src/components/waves-indicator.ts"],"names":[],"mappings":"AACA,OAAO,EAA4B,cAAc,EAAQ,MAAM,uBAAuB,CAAC;AAwFvF;;;;;;;;;;;;;;GAcG;AACH,qBAkDa,gBAAiB,SAAQ,cAAc;IAClD,0DAA0D;IACC,IAAI,EAAE,MAAM,CAAsB;IAE7F,WAAW;IAQX,OAAO,CAAC,KAAK,CAAK;IAClB,OAAO,CAAC,SAAS,CAAC,CAAS;IAC3B,OAAO,CAAC,SAAS,CAAC,CAAmB;IAErC,iBAAiB;IAKjB,oBAAoB;IAQpB,OAAO,CAAC,IAAI;IAYZ,mEAAmE;IACnE,OAAO,CAAC,MAAM,CAAC,aAAa;CAY7B"}

package/dist/dts/utils/animation-exclusivity.d.ts

@@ -1,23 +0,0 @@
-import type { AiAssistantAnimation } from '../main/main.types';
-/**
- * Enforces that at most one loading-indicator style (dots vs. waves) is enabled
- * at a time. The two are alternative presentations of the same "assistant is
- * working" state, so selecting one must deselect the other.
- *
- * The settings control is a multiselect (checkboxes), which permits selecting
- * both; this resolver makes the loading-style group behave like a radio group
- * by dropping the previously-selected style whenever a new one is added.
- *
- * @param next - The freshly-selected animation list (e.g. emitted by the
- *   multiselect, or read from consumer config).
- * @param previous - The animation list in effect before this change. Used to
- *   work out which loading style was just added so the other can be dropped.
- *   Pass `[]` when resolving an initial/config value with no prior state.
- * @returns `next` with at most one loading style retained. When both are
- *   present and neither is newly added (e.g. a misconfigured `enabled` list),
- *   the first entry of `LOADING_STYLE_ANIMATIONS` (dots) wins.
- *
- * @internal
- */
-export declare function resolveExclusiveLoadingStyle(next: AiAssistantAnimation[], previous?: AiAssistantAnimation[]): AiAssistantAnimation[];
-//# sourceMappingURL=animation-exclusivity.d.ts.map

package/dist/dts/utils/animation-exclusivity.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"animation-exclusivity.d.ts","sourceRoot":"","sources":["../../../src/utils/animation-exclusivity.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAG/D;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,4BAA4B,CAC1C,IAAI,EAAE,oBAAoB,EAAE,EAC5B,QAAQ,GAAE,oBAAoB,EAAO,GACpC,oBAAoB,EAAE,CAaxB"}

package/dist/dts/utils/animation-exclusivity.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=animation-exclusivity.test.d.ts.map

package/dist/dts/utils/animation-exclusivity.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"animation-exclusivity.test.d.ts","sourceRoot":"","sources":["../../../src/utils/animation-exclusivity.test.ts"],"names":[],"mappings":""}

package/dist/esm/components/waves-indicator.js

@@ -1,180 +0,0 @@
-var AiWavesIndicator_1;
-import { __decorate } from "tslib";
-import { avoidTreeShaking } from '@genesislcap/foundation-utils';
-import { attr, 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';
-import { AiHaloOverlay } from './halo-overlay';
-const WAVES_DEFAULT_SIZE = 56;
-/** CSS-ready form of `WAVES_DEFAULT_SIZE` (the `css` tag rejects raw numbers). */
-const WAVES_DEFAULT_SIZE_CSS = `${WAVES_DEFAULT_SIZE}px`;
-/** SVG coordinate space the waves are drawn in (square; the circle fills it). */
-const VIEWBOX = 120;
-const CENTRE = VIEWBOX / 2;
-/** Horizontal sampling step when tracing each wave path. Lower = smoother. */
-const SAMPLE_STEP = 6;
-const WAVES = [
-    {
-        colour: AI_COLOUR_AMBER,
-        amplitude: 11,
-        frequency: 0.085,
-        phaseSpeed: 0.05,
-        verticalOffset: -6,
-        slosh: 6,
-        sloshFrequency: 0.018,
-        sloshSpeed: 0.021,
-    },
-    {
-        colour: AI_COLOUR_PINK,
-        amplitude: 14,
-        frequency: 0.07,
-        phaseSpeed: -0.043,
-        verticalOffset: -2,
-        slosh: 7,
-        sloshFrequency: 0.022,
-        sloshSpeed: -0.017,
-    },
-    {
-        colour: AI_COLOUR_CYAN,
-        amplitude: 13,
-        frequency: 0.095,
-        phaseSpeed: 0.037,
-        verticalOffset: 2,
-        slosh: 5,
-        sloshFrequency: 0.015,
-        sloshSpeed: 0.025,
-    },
-    {
-        colour: AI_COLOUR_VIOLET,
-        amplitude: 10,
-        frequency: 0.06,
-        phaseSpeed: -0.055,
-        verticalOffset: 6,
-        slosh: 8,
-        sloshFrequency: 0.025,
-        sloshSpeed: -0.013,
-    },
-];
-const wavePathsMarkup = WAVES.map((w, i) => `<path class="wave" data-wave="${i}" stroke="${w.colour}" />`).join('');
-/**
- * Animated "waves inside a circle" loading indicator — coloured sine waves that
- * slosh like glowing liquid inside a circular window, ringed by a rotating
- * gradient halo (the same effect as `<ai-halo-overlay>`).
- *
- * Visual sibling of the dots loading indicator; the two are interchangeable
- * styles of the same "assistant is working" state.
- *
- * @example
- * ```html
- * <ai-waves-indicator size="56"></ai-waves-indicator>
- * ```
- *
- * @beta
- */
-let AiWavesIndicator = AiWavesIndicator_1 = class AiWavesIndicator extends GenesisElement {
-    constructor() {
-        super(...arguments);
-        /** Diameter of the circular window in px. Default: 56. */
-        this.size = WAVES_DEFAULT_SIZE;
-        // A rAF loop drives the wave paths for the same reason `<ai-halo-overlay>`
-        // hand-drives its rotation: a pure-CSS approach can't produce per-frame sine
-        // geometry, and SMIL/`<animate>` can't express the combined travel + slosh.
-        this.frame = 0;
-    }
-    sizeChanged() {
-        this.style.setProperty('--waves-size', `${this.size}px`);
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.tick();
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        if (this.animFrame !== undefined) {
-            cancelAnimationFrame(this.animFrame);
-            this.animFrame = undefined;
-        }
-    }
-    tick() {
-        var _a, _b;
-        if (!this.wavePaths) {
-            const paths = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.wave');
-            if (paths === null || paths === void 0 ? void 0 : paths.length)
-                this.wavePaths = Array.from(paths);
-        }
-        (_b = this.wavePaths) === null || _b === void 0 ? void 0 : _b.forEach((path, i) => {
-            path.setAttribute('d', AiWavesIndicator_1.buildWavePath(WAVES[i], this.frame));
-        });
-        this.frame += 1;
-        this.animFrame = requestAnimationFrame(() => this.tick());
-    }
-    /** Trace one wave's polyline `d` attribute for the given frame. */
-    static buildWavePath(cfg, frame) {
-        const segments = [];
-        for (let x = 0; x <= VIEWBOX; x += SAMPLE_STEP) {
-            const y = CENTRE +
-                cfg.verticalOffset +
-                cfg.amplitude * Math.sin(x * cfg.frequency + frame * cfg.phaseSpeed) +
-                cfg.slosh * Math.sin(x * cfg.sloshFrequency + frame * cfg.sloshSpeed);
-            segments.push(`${x},${y.toFixed(2)}`);
-        }
-        return `M ${segments.join(' L ')}`;
-    }
-};
-__decorate([
-    attr({ converter: { fromView: Number, toView: String } })
-], AiWavesIndicator.prototype, "size", void 0);
-AiWavesIndicator = AiWavesIndicator_1 = __decorate([
-    customElement({
-        name: 'ai-waves-indicator',
-        template: html `
-    <div class="window" role="img" aria-label="Assistant is working">
-      <svg class="waves" viewBox="0 0 ${VIEWBOX} ${VIEWBOX}" preserveAspectRatio="none">
-        <defs>
-          <filter id="wave-glow" x="-20%" y="-20%" width="140%" height="140%">
-            <feGaussianBlur stdDeviation="1.6" result="blur" />
-            <feMerge>
-              <feMergeNode in="blur" />
-              <feMergeNode in="SourceGraphic" />
-            </feMerge>
-          </filter>
-        </defs>
-        <g filter="url(#wave-glow)">${wavePathsMarkup}</g>
-      </svg>
-      <ai-halo-overlay active border-size="2" glow-opacity="0.5" glow-spread="55"></ai-halo-overlay>
-    </div>
-  `,
-        styles: css `
-    :host {
-      display: inline-block;
-      width: var(--waves-size, ${WAVES_DEFAULT_SIZE_CSS});
-      height: var(--waves-size, ${WAVES_DEFAULT_SIZE_CSS});
-    }
-
-    .window {
-      position: relative;
-      width: 100%;
-      height: 100%;
-      border-radius: 50%;
-      overflow: hidden;
-      background: radial-gradient(circle at 50% 32%, #2b3140 0%, #11141c 55%, #05070c 100%);
-    }
-
-    .waves {
-      position: absolute;
-      inset: 0;
-      width: 100%;
-      height: 100%;
-    }
-
-    .wave {
-      fill: none;
-      stroke-width: 2;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-    }
-  `,
-    })
-], AiWavesIndicator);
-export { AiWavesIndicator };
-// Ensure the halo overlay used for the ring is registered alongside this component.
-avoidTreeShaking(AiHaloOverlay);