@genesislcap/ai-assistant 14.458.3 → 14.459.0

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

@@ -0,0 +1,222 @@
+var AiFlowingWavesIndicator_1;
+import { __decorate } from "tslib";
+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';
+/** SVG coordinate space the bands are drawn in (aspect matches the host box). */
+const VIEW_W = 225;
+const VIEW_H = 90;
+const CENTRE_Y = VIEW_H / 2;
+/** Number of samples traced across each band. */
+const POINTS = 90;
+/** Fraction of the width over which thickness ramps from 0 up to full. */
+const EDGE = 0.16;
+/** Global multiplier on the harmonic drift speeds — raise to morph faster. */
+const MORPH_SPEED = 3;
+/** Global multiplier on the harmonic frequencies — raise for narrower peaks. */
+const FREQ_SCALE = 2;
+/**
+ * Half-thickness (viewBox units) each band keeps even between peaks, so the
+ * waves emerge from a continuous line rather than leaving gaps. The four bands
+ * overlap along this line and screen-blend to white.
+ */
+const LINE_THICKNESS = 1.2;
+/**
+ * Amplitude boost added toward the middle of the width (a hump that is 0 at the
+ * ends, max in the centre). Makes peaks more likely to pop up centrally, while
+ * still allowing tall crests to appear nearer the edges.
+ */
+const CENTRE_BIAS = 4;
+const BANDS = [
+    {
+        baseline: -4,
+        harmonics: [
+            { freq: 1.0, amp: 11, speed: 0.03, phase: 0.0 },
+            { freq: 2.3, amp: 6, speed: -0.021, phase: 1.3 },
+            { freq: 3.4, amp: 3, speed: 0.041, phase: 2.7 },
+        ],
+    },
+    {
+        baseline: -4,
+        harmonics: [
+            { freq: 1.3, amp: 10, speed: -0.026, phase: 0.8 },
+            { freq: 2.0, amp: 7, speed: 0.034, phase: 2.1 },
+            { freq: 3.1, amp: 3, speed: -0.045, phase: 0.4 },
+        ],
+    },
+    {
+        baseline: -4,
+        harmonics: [
+            { freq: 0.9, amp: 9, speed: 0.038, phase: 1.9 },
+            { freq: 2.6, amp: 6, speed: 0.019, phase: 3.0 },
+            { freq: 3.7, amp: 3, speed: -0.03, phase: 0.6 },
+        ],
+    },
+    {
+        baseline: -4,
+        harmonics: [
+            { freq: 1.1, amp: 8, speed: -0.034, phase: 2.4 },
+            { freq: 2.4, amp: 5, speed: 0.027, phase: 0.2 },
+            { freq: 3.2, amp: 3, speed: 0.048, phase: 1.5 },
+        ],
+    },
+];
+// Each band is its own stacked <svg> LAYER. The white-on-overlap effect uses
+// `mix-blend-mode: screen`, which composites reliably between HTML-level layers
+// but NOT between sibling SVG <path>/<g> elements in many browsers — hence one
+// svg per band rather than four paths in a single svg.
+const bandLayersMarkup = BANDS.map((_b, i) => `<svg class="layer band-layer" viewBox="0 0 ${VIEW_W} ${VIEW_H}">` +
+    `<path class="band b${i + 1}" data-band="${i}" />` +
+    `</svg>`).join('');
+/**
+ * Animated "flowing waves" loading indicator — coloured organic waves (in the
+ * four brand colours) whose bumps swell, shrink, merge and split across a line,
+ * tapering to nothing at both ends. Where the colours overlap they blend
+ * additively toward white.
+ *
+ * Visual sibling of the dots loading indicator; interchangeable with the other
+ * loading styles for the "assistant is working" state.
+ *
+ * @example
+ * ```html
+ * <ai-flowing-waves-indicator></ai-flowing-waves-indicator>
+ * ```
+ *
+ * @beta
+ */
+let AiFlowingWavesIndicator = AiFlowingWavesIndicator_1 = class AiFlowingWavesIndicator extends GenesisElement {
+    constructor() {
+        // A rAF loop morphs the band shapes: pure CSS can't continuously reshape the
+        // bumps (different sizes appearing at different times), and the per-frame sine
+        // sums are cheap. Same approach as the sine-tracing waves indicator.
+        super(...arguments);
+        this.frame = 0;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Guard against a reconnect starting a second concurrent loop.
+        if (this.animFrame === undefined) {
+            this.tick();
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.animFrame !== undefined) {
+            cancelAnimationFrame(this.animFrame);
+            this.animFrame = undefined;
+        }
+    }
+    tick() {
+        var _a, _c;
+        // Stop ticking once disconnected (belt-and-braces alongside the cancel in
+        // disconnectedCallback) so no frames are scheduled while detached.
+        if (!this.isConnected) {
+            this.animFrame = undefined;
+            return;
+        }
+        if (!this.bandPaths) {
+            const paths = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.band');
+            if (paths === null || paths === void 0 ? void 0 : paths.length)
+                this.bandPaths = Array.from(paths);
+        }
+        (_c = this.bandPaths) === null || _c === void 0 ? void 0 : _c.forEach((path, i) => {
+            const cfg = BANDS[i];
+            if (cfg)
+                path.setAttribute('d', AiFlowingWavesIndicator_1.buildBand(cfg, this.frame));
+        });
+        this.frame += 1;
+        this.animFrame = requestAnimationFrame(() => this.tick());
+    }
+    /**
+     * Trace one band for the given frame: a baseline-plus-harmonics half-thickness
+     * profile, clamped at 0 (so the band pinches to nothing between bumps) and
+     * tapered to 0 at both ends.
+     */
+    static buildBand(cfg, frame) {
+        const top = [];
+        const bottom = [];
+        for (let i = 0; i <= POINTS; i += 1) {
+            const u = i / POINTS;
+            const x = u * VIEW_W;
+            // Plateau edge taper: 0 at both ends, full across the middle.
+            const edge = Math.min(1, Math.min(u, 1 - u) / EDGE);
+            // Sum the drifting harmonics, then clamp so dips pinch the band to nothing.
+            let wave = 0;
+            for (const h of cfg.harmonics) {
+                wave +=
+                    h.amp *
+                        Math.sin(u * Math.PI * 2 * h.freq * FREQ_SCALE + frame * h.speed * MORPH_SPEED + h.phase);
+            }
+            // Hump that favours the middle (0 at the ends, 1 at the centre).
+            const centre = Math.sin(Math.PI * u);
+            const env = edge * (LINE_THICKNESS + Math.max(0, cfg.baseline + wave + CENTRE_BIAS * centre));
+            top.push([x, CENTRE_Y - env]);
+            bottom.push([x, CENTRE_Y + env]);
+        }
+        let d = `M${top[0][0].toFixed(1)} ${top[0][1].toFixed(1)}`;
+        for (let i = 1; i < top.length; i += 1)
+            d += ` L${top[i][0].toFixed(1)} ${top[i][1].toFixed(1)}`;
+        for (let i = bottom.length - 1; i >= 0; i -= 1) {
+            d += ` L${bottom[i][0].toFixed(1)} ${bottom[i][1].toFixed(1)}`;
+        }
+        return `${d} Z`;
+    }
+};
+AiFlowingWavesIndicator = AiFlowingWavesIndicator_1 = __decorate([
+    customElement({
+        name: 'ai-flowing-waves-indicator',
+        template: html `
+    <div class="flow" role="img" aria-label="Assistant is working">${bandLayersMarkup}</div>
+  `,
+        styles: css `
+    :host {
+      display: inline-block;
+      width: 180px;
+      height: 72px;
+    }
+
+    /* Transparent — sits directly on the chat surface (no backdrop). 'isolation:
+       isolate' scopes the band layers' 'screen' blend to each other, so where
+       colours overlap they add toward white, while the group still composites
+       normally onto the page (works on light and dark, no wash-out). */
+    .flow {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      isolation: isolate;
+    }
+
+    .layer {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    }
+
+    .band-layer {
+      mix-blend-mode: screen;
+    }
+
+    .band {
+      filter: drop-shadow(0 0 1.5px currentColor);
+    }
+    .band.b1 {
+      color: ${AI_COLOUR_AMBER};
+      fill: ${AI_COLOUR_AMBER};
+    }
+    .band.b2 {
+      color: ${AI_COLOUR_PINK};
+      fill: ${AI_COLOUR_PINK};
+    }
+    .band.b3 {
+      color: ${AI_COLOUR_CYAN};
+      fill: ${AI_COLOUR_CYAN};
+    }
+    .band.b4 {
+      color: ${AI_COLOUR_VIOLET};
+      fill: ${AI_COLOUR_VIOLET};
+    }
+  `,
+    })
+], AiFlowingWavesIndicator);
+export { AiFlowingWavesIndicator };

package/dist/esm/components/plasma-orb-indicator.js

@@ -0,0 +1,280 @@
+import { __decorate } from "tslib";
+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
+ */
+let AiPlasmaOrbIndicator = class AiPlasmaOrbIndicator extends GenesisElement {
+};
+AiPlasmaOrbIndicator = __decorate([
+    customElement({
+        name: 'ai-plasma-orb-indicator',
+        template: html `
+    <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);
+      }
+    }
+  `,
+    })
+], AiPlasmaOrbIndicator);
+export { AiPlasmaOrbIndicator };

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

@@ -0,0 +1,189 @@
+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();
+        // Guard against a reconnect starting a second concurrent loop.
+        if (this.animFrame === undefined) {
+            this.tick();
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.animFrame !== undefined) {
+            cancelAnimationFrame(this.animFrame);
+            this.animFrame = undefined;
+        }
+    }
+    tick() {
+        var _a, _b;
+        // Stop ticking once disconnected (belt-and-braces alongside the cancel in
+        // disconnectedCallback) so no frames are scheduled while detached.
+        if (!this.isConnected) {
+            this.animFrame = undefined;
+            return;
+        }
+        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);