236 ways to communicate progress.

import { OrbuxElement } from '@vikast908/core';

/**
 * Arc Spinner: a rotating conic-gradient ring. Indeterminate by default; if a
 * `progress` value (0..1) is set it becomes a determinate arc filled to that
 * fraction. Turns a full green ring on done, red on error.
 */
const STYLES = /* css */ `
@property --_p {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 0%;
}
:host { --_dur: 1.1s; --_p: 0%; }
.ring {
  inline-size: 100%;
  block-size: 100%;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0%,
    color-mix(in srgb, var(--orbux-color, #6366f1) 55%, transparent) 55%,
    var(--orbux-color, #6366f1) 85%,
    var(--orbux-color-2, #a855f7) 100%);
  -webkit-mask: radial-gradient(farthest-side, #0000 76%, #000 78%);
  mask: radial-gradient(farthest-side, #0000 76%, #000 78%);
  animation: orbux-arc-spin calc(var(--_dur) * var(--orbux-speed-scale)) linear infinite;
}

@keyframes orbux-arc-spin { to { transform: rotate(360deg); } }

/* ---- indeterminate state speeds ---- */
:host([data-state="thinking"])     { --_dur: 1.1s; }
:host([data-state="streaming"])    { --_dur: 0.7s; }
:host([data-state="tool-calling"]) { --_dur: 0.9s; }
:host([data-state="tool-calling"]) .ring { border-radius: 28%; animation-timing-function: steps(8, end); }
:host([data-state="idle"])         { --_dur: 2.6s; }
:host([data-state="waiting"])      { --_dur: 2.2s; }
:host([data-state="idle"]) .ring { animation: none; opacity: .48; transform: rotate(28deg); }
:host([data-state="waiting"]) .ring {
  animation: none;
  opacity: .78;
  transform: rotate(-18deg);
  background: conic-gradient(from 0deg,
    transparent 0 38%,
    color-mix(in srgb, var(--orbux-color, #6366f1) 70%, transparent) 38% 72%,
    transparent 72%);
}

/* ---- determinate (progress set) ---- */
:host([data-determinate]) .ring {
  animation: none;
  transition: --_p 120ms ease-out;
  background: conic-gradient(
    var(--orbux-color-progress, var(--orbux-color-2, #a855f7)) var(--_p),
    color-mix(in srgb, var(--orbux-color, #6366f1) 18%, transparent) 0);
}

/* ---- done / error (override determinate) ---- */
:host([data-state="done"]) .ring {
  animation: none;
  background: conic-gradient(var(--orbux-color-success, #22c55e) 100%, transparent 0);
}
:host([data-state="error"]) .ring {
  animation: orbux-arc-error 200ms ease-out 1;
  background: conic-gradient(var(--orbux-color-error, #ef4444) 100%, transparent 0);
}
@keyframes orbux-arc-error { 35% { transform: rotate(-10deg); } 70% { transform: rotate(10deg); } }
:host([data-settled="true"]) .ring { animation: none; }

/* ---- run state ---- */
:host([data-paused="true"]) .ring { animation-play-state: paused; }
:host([data-reduced-motion="true"]) .ring { animation: none !important; }
:host([data-reduced-motion="true"][data-state="thinking"]) .ring { transform:rotate(45deg); }
:host([data-reduced-motion="true"][data-state="streaming"]) .ring { background:conic-gradient(var(--orbux-color,#6366f1) 72%,transparent 0); }
:host([data-reduced-motion="true"][data-state="tool-calling"]) .ring { border-radius:28%; }
:host([data-reduced-motion="true"][data-state="waiting"]) .ring { opacity:.48; }
`;

export class OrbuxArcSpinner extends OrbuxElement {
  protected build(): void {
    const style = document.createElement('style');
    style.textContent = STYLES;
    const ring = document.createElement('div');
    ring.className = 'ring';
    ring.setAttribute('part', 'ring');
    this.root.append(style, ring);
  }

  protected onProgressChange(progress: number | null): void {
    if (progress == null) {
      this.removeAttribute('data-determinate');
    } else {
      this.setAttribute('data-determinate', '');
      this.style.setProperty('--_p', `${(progress * 100).toFixed(1)}%`);
    }
  }
}

if (typeof customElements !== 'undefined' && !customElements.get('orbux-arc-spinner')) {
  customElements.define('orbux-arc-spinner', OrbuxArcSpinner);
}

declare global {
  interface HTMLElementTagNameMap {
    'orbux-arc-spinner': OrbuxArcSpinner;
  }
}

import { OrbuxElement } from '@vikast908/core';

const STYLES = /* css */ `
:host { --_tone:var(--orbux-color,#a855f7);--_tone-2:var(--orbux-color-2,#f0abfc);--_dur:4s; }
.seal { position:relative;inline-size:100%;block-size:100%;display:grid;place-items:center;filter:drop-shadow(0 0 7px color-mix(in srgb,var(--_tone) 58%,transparent)); }
.ring { position:absolute;inset:var(--_inset);border-radius:50%;border:var(--_weight) solid color-mix(in srgb,var(--_tone) var(--_alpha),transparent);animation:orbux-arcane-turn calc((var(--_dur) + var(--_i) * .8s) * var(--orbux-speed-scale)) linear infinite; }
.ring:nth-child(2) { border-style:dashed;animation-direction:reverse; }
.triangle { position:absolute;inset:25%;clip-path:polygon(50% 0,100% 88%,0 88%);background:var(--_tone);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:2px;animation:orbux-arcane-pulse calc(1.6s * var(--orbux-speed-scale)) cubic-bezier(.77,0,.175,1) infinite; }
.glyph { position:absolute;left:46%;top:4%;inline-size:8%;block-size:13%;transform-origin:50% 354%;rotate:var(--_angle); }
.glyph::before,.glyph::after { content:"";position:absolute;left:45%;inline-size:2px;block-size:100%;border-radius:999px;background:var(--_tone-2); }
.glyph::after { transform:rotate(55deg);transform-origin:center; }
.core { position:absolute;inset:41%;border-radius:50%;background:var(--_tone-2);box-shadow:0 0 10px var(--_tone); }
@keyframes orbux-arcane-turn { to { transform:rotate(360deg); } }
@keyframes orbux-arcane-pulse { 50% { transform:rotate(60deg) scale(.86);opacity:.55; } }
@keyframes orbux-arcane-done { 50% { transform:scale(1.055); } }
@keyframes orbux-arcane-error { 35% { transform:translateX(-4%); } 70% { transform:translateX(4%); } }
:host([data-state="streaming"]) { --_dur:2s; }
:host([data-state="tool-calling"]) .ring { animation-timing-function:steps(8,end); }
:host([data-state="tool-calling"]) .triangle { transform:rotate(180deg); }
:host([data-state="idle"]) .ring,:host([data-state="waiting"]) .ring,:host([data-state="idle"]) .triangle,:host([data-state="waiting"]) .triangle { animation:none; }
:host([data-state="idle"]) .seal { opacity:.5; }
:host([data-state="waiting"]) .glyph:nth-of-type(even) { opacity:.22; }
:host([data-state="done"]) { --_tone:var(--orbux-color-success,#22c55e);--_tone-2:#bbf7d0; }
:host([data-state="error"]) { --_tone:var(--orbux-color-error,#ef4444);--_tone-2:#fecdd3; }
:host([data-state="done"]) .ring,:host([data-state="error"]) .ring,:host([data-state="done"]) .triangle,:host([data-state="error"]) .triangle { animation:none; }
:host([data-state="done"]) .seal { animation:orbux-arcane-done 220ms cubic-bezier(.23,1,.32,1) 1; }
:host([data-state="error"]) .seal { animation:orbux-arcane-error 200ms cubic-bezier(.23,1,.32,1) 1; }
:host([data-settled="true"]) .seal { animation:none; }
:host([data-paused="true"]) * { animation-play-state:paused !important; }
:host([data-reduced-motion="true"]) * { animation:none !important; }
:host([data-reduced-motion="true"][data-state="streaming"]) .triangle { transform:rotate(60deg); }
`;

export class OrbuxArcaneSeal extends OrbuxElement {
  protected build(): void {
    const style = document.createElement('style');
    style.textContent = STYLES;
    const seal = document.createElement('div');
    seal.className = 'seal';
    seal.setAttribute('part', 'seal');
    seal.innerHTML = `<span class="ring" style="--_i:0;--_inset:6%;--_weight:1px;--_alpha:72%"></span><span class="ring" style="--_i:1;--_inset:16%;--_weight:2px;--_alpha:58%"></span><span class="ring" style="--_i:2;--_inset:31%;--_weight:1px;--_alpha:82%"></span><span class="triangle"></span>${Array.from({ length: 8 }, (_, index) => `<i class="glyph" style="--_angle:${index * 45}deg"></i>`).join('')}<span class="core"></span>`;
    this.root.append(style, seal);
  }
}
if (typeof customElements !== 'undefined' && !customElements.get('orbux-arcane-seal'))
  customElements.define('orbux-arcane-seal', OrbuxArcaneSeal);
declare global {
  interface HTMLElementTagNameMap {
    'orbux-arcane-seal': OrbuxArcaneSeal;
  }
}

import { type AgentState, lerp, type OrbuxFrameInfo, ShaderElement } from '@vikast908/core';

const FRAG = /* glsl */ `
precision highp float;
uniform vec2  uRes;
uniform float uTime;
uniform vec3  uColorA;
uniform vec3  uColorB;
uniform float uActivity;
uniform float uState;
uniform float uProgress;
uniform vec3  uProgressColor;

void main() {
  vec2 uv = (gl_FragCoord.xy * 2.0 - uRes) / min(uRes.x, uRes.y);
  float r = length(uv);
  float t = uTime;

  // layered aurora ribbons advected over time
  float bands = 0.0;
  for (int i = 0; i < 4; i++) {
    float fi = float(i);
    bands += sin(uv.x * (2.5 + fi) + t * (0.5 + fi * 0.35)
              + sin(uv.y * 2.0 - t * 0.4) * (1.0 + uActivity)) * (0.5 / (fi + 1.0));
  }
  float ang = atan(uv.y, uv.x);
  float shade = clamp(0.5 + 0.5 * bands + 0.18 * sin(ang * 3.0 + t), 0.0, 1.0);
  vec3 col = mix(uColorA, uColorB, shade);

  float body = smoothstep(0.92, 0.6, r);
  float glow = smoothstep(1.3, 0.0, r) * (0.3 + 0.45 * uActivity);
  float rim = smoothstep(0.92, 0.88, r) - smoothstep(0.88, 0.68, r);
  col += rim * 0.4;

  vec3 outCol = col * body + mix(uColorA, uColorB, 0.5) * glow;
  float alpha = max(body, glow);
  if (uState > 3.5 && uState < 4.5) alpha *= smoothstep(0.18, 0.28, r);
  if (uState > 2.5 && uState < 3.5) alpha *= 0.78 + 0.22 * step(0.3, abs(sin(ang * 4.0)));
  if (uProgress >= 0.0) {
    float a01 = mod(atan(uv.x, uv.y) + 6.2831853, 6.2831853) / 6.2831853;
    float ring = smoothstep(0.03, 0.0, abs(r - 0.97));
    float fill = ring * step(a01, uProgress);
    outCol = mix(outCol, uProgressColor, fill * 0.9);
    alpha = max(alpha, fill);
  }

  gl_FragColor = vec4(outCol, alpha);
}
`;

type RGB = [number, number, number];
interface Visual {
  activity: number;
  a: RGB;
  b: RGB;
}

const STATE_VISUALS: Record<AgentState, Visual> = {
  idle: { activity: 0.15, a: [0.16, 0.24, 0.44], b: [0.2, 0.5, 0.55] },
  thinking: { activity: 0.5, a: [0.36, 0.32, 0.9], b: [0.3, 0.72, 0.86] },
  streaming: { activity: 0.95, a: [0.2, 0.72, 0.85], b: [0.5, 0.95, 0.8] },
  'tool-calling': { activity: 0.75, a: [0.13, 0.72, 0.5], b: [0.65, 0.9, 0.35] },
  waiting: { activity: 0.2, a: [0.28, 0.32, 0.52], b: [0.4, 0.55, 0.68] },
  done: { activity: 0.28, a: [0.13, 0.7, 0.42], b: [0.5, 0.92, 0.6] },
  error: { activity: 0.55, a: [0.82, 0.2, 0.3], b: [0.95, 0.55, 0.35] },
};

/**
 * Aurora Orb: a sphere of flowing aurora ribbons. Color and energy shift with
 * state; supports a `progress` ring.
 */
export class OrbuxAuroraOrb extends ShaderElement {
  #act = 0.5;
  #a: RGB = [0.36, 0.32, 0.9];
  #b: RGB = [0.3, 0.72, 0.86];

  protected fragmentSource(): string {
    return FRAG;
  }

  protected override timeScale(): number {
    return 0.4 + this.#act;
  }

  protected override fallbackBackground(): string {
    return 'background:radial-gradient(circle at 40% 35%,var(--orbux-color-2,#4ade80),var(--orbux-color,#6366f1) 72%);';
  }

  protected paint(gl: WebGLRenderingContext, info: OrbuxFrameInfo): void {
    const v = STATE_VISUALS[info.state];
    let ta = v.a;
    let tb = v.b;
    if (info.state === 'done') {
      ta = this.cssColorRGB('--orbux-color-success', v.a);
      tb = v.b;
    } else if (info.state === 'error') {
      ta = this.cssColorRGB('--orbux-color-error', v.a);
      tb = v.b;
    } else {
      ta = this.cssColorRGB('--orbux-color', v.a);
      tb = this.cssColorRGB('--orbux-color-2', v.b);
    }
    const rate = info.state === 'done' || info.state === 'error' ? 18 : 3.5;
    const k = info.dt === 0 ? 1 : 1 - Math.exp(-rate * info.dt);
    this.#act = lerp(this.#act, v.activity, k);
    for (let i = 0; i < 3; i++) {
      this.#a[i] = lerp(this.#a[i] ?? 0, ta[i] ?? 0, k);
      this.#b[i] = lerp(this.#b[i] ?? 0, tb[i] ?? 0, k);
    }
    gl.uniform3fv(this.uniform('uColorA'), this.#a);
    gl.uniform3fv(this.uniform('uColorB'), this.#b);
    gl.uniform1f(this.uniform('uActivity'), this.#act);
  }
}

if (typeof customElements !== 'undefined' && !customElements.get('orbux-aurora-orb')) {
  customElements.define('orbux-aurora-orb', OrbuxAuroraOrb);
}

declare global {
  interface HTMLElementTagNameMap {
    'orbux-aurora-orb': OrbuxAuroraOrb;
  }
}

import { OrbuxElement } from '@vikast908/core';

/**
 * Breathing Ring: a soft glowing ring that breathes while a dashed segment
 * slowly rotates around it. Calm and meditative: slow when idle, brighter and
 * faster while streaming, the segment spins up while calling a tool, a solid
 * green ring on `done`, red on `error`.
 */
const STYLES = /* css */ `
:host { --_breath: 3.4s; --_spin: 3s; }
.ring { display: grid; place-items: center; inline-size: 100%; block-size: 100%; }
svg { inline-size: 100%; block-size: 100%; overflow: visible; }
.halo {
  fill: none;
  stroke: var(--orbux-color, #6366f1);
  stroke-width: 7;
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--orbux-color, #6366f1) 55%, transparent));
  animation: orbux-breathe calc(var(--_breath) * var(--orbux-speed-scale)) ease-in-out infinite;
}
.dash {
  fill: none;
  stroke: var(--orbux-color-2, #a855f7);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 22 78;
  transform-box: fill-box;
  transform-origin: center;
  animation: orbux-spin calc(var(--_spin) * var(--orbux-speed-scale)) linear infinite;
}
@keyframes orbux-breathe {
  0%, 100% { transform: scale(0.86); opacity: 0.55; }
  50%      { transform: scale(1.04); opacity: 1; }
}
@keyframes orbux-spin { to { transform: rotate(360deg); } }

/* ---- states ---- */
:host([data-state="idle"])         { --_breath: 6s;   --_spin: 6s; }
:host([data-state="waiting"])      { --_breath: 5s;   --_spin: 5s; }
:host([data-state="thinking"])     { --_breath: 3.4s; --_spin: 3s; }
:host([data-state="streaming"])    { --_breath: 2s;   --_spin: 2s; }
:host([data-state="tool-calling"]) { --_breath: 3s;   --_spin: 1s; }
:host([data-state="idle"]) .halo,
:host([data-state="idle"]) .dash { animation: none; opacity: .48; }
:host([data-state="waiting"]) .halo { animation: none; opacity: .82; }
:host([data-state="waiting"]) .dash { animation: none; opacity: .35; stroke-dashoffset: 28; }

:host([data-state="done"]) .halo { stroke: var(--orbux-color-success, #22c55e); animation: orbux-terminal-bloom 220ms ease-out 1; }
:host([data-state="done"]) .dash { display: none; }

:host([data-state="error"]) { --_breath: 2.4s; }
:host([data-state="error"]) .halo { stroke: var(--orbux-color-error, #ef4444); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--orbux-color-error, #ef4444) 55%, transparent)); animation:orbux-terminal-error 200ms ease-out 1; }
:host([data-state="error"]) .dash { stroke: var(--orbux-color-error, #ef4444); animation:none; }
@keyframes orbux-terminal-bloom { 50% { transform:scale(1.08); } }
@keyframes orbux-terminal-error { 35% { transform:translateX(-4%); } 70% { transform:translateX(4%); } }
:host([data-settled="true"]) .halo { animation:none;transform:none;opacity:.9; }

:host([data-paused="true"]) .halo,
:host([data-paused="true"]) .dash { animation-play-state: paused; }
:host([data-reduced-motion="true"]) .halo,
:host([data-reduced-motion="true"]) .dash { animation: none !important; transform: none; opacity: 0.9; }
:host([data-reduced-motion="true"][data-state="streaming"]) .dash { stroke-dasharray:42 58; }
:host([data-reduced-motion="true"][data-state="tool-calling"]) .dash { stroke-dasharray:12 13; }
:host([data-reduced-motion="true"][data-state="waiting"]) .dash { opacity:.3; }
`;

export class OrbuxBreathingRing extends OrbuxElement {
  protected build(): void {
    const style = document.createElement('style');
    style.textContent = STYLES;
    const ring = document.createElement('div');
    ring.className = 'ring';
    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svg.setAttribute('viewBox', '0 0 100 100');
    svg.innerHTML =
      '<circle class="halo" part="halo" cx="50" cy="50" r="34"/>' +
      '<circle class="dash" part="dash" cx="50" cy="50" r="34" pathLength="100"/>';
    ring.appendChild(svg);
    this.root.append(style, ring);
  }
}

if (typeof customElements !== 'undefined' && !customElements.get('orbux-breathing-ring')) {
  customElements.define('orbux-breathing-ring', OrbuxBreathingRing);
}

declare global {
  interface HTMLElementTagNameMap {
    'orbux-breathing-ring': OrbuxBreathingRing;
  }
}

import { OrbuxElement } from '@vikast908/core';

const STYLES = /* css */ `
:host{inline-size:var(--orbux-width,var(--orbux-size,20px));block-size:var(--orbux-height,var(--orbux-size,20px));color:var(--orbux-color,currentColor)}
.spinner{position:relative;inline-size:100%;block-size:100%;border:2px solid color-mix(in srgb,currentColor 22%,transparent);border-block-start-color:currentColor;border-radius:50%;animation:orbux-button-spin calc(.72s * var(--orbux-speed-scale)) linear infinite}
@keyframes orbux-button-spin{to{transform:rotate(1turn)}}
:host([data-state="idle"]) .spinner{animation:none;opacity:.42}
:host([data-state="waiting"]) .spinner{animation:none;opacity:.72;border-style:dashed}
:host([data-state="streaming"]) .spinner{animation-duration:calc(.48s * var(--orbux-speed-scale))}
:host([data-state="tool-calling"]) .spinner{border-radius:28%;animation-timing-function:steps(4,end)}
:host([data-state="done"]) .spinner,:host([data-state="error"]) .spinner{border:0;animation:none}
:host([data-state="done"]) .spinner::after{content:"";position:absolute;inset:18% 8% 28% 18%;border-inline-end:2px solid var(--orbux-color-success,#22c55e);border-block-end:2px solid var(--orbux-color-success,#22c55e);transform:rotate(42deg);animation:orbux-button-pop 200ms ease-out 1}
:host([data-state="error"]) .spinner::before,:host([data-state="error"]) .spinner::after{content:"";position:absolute;inset-inline-start:48%;inset-block:10%;inline-size:2px;background:var(--orbux-color-error,#ef4444);border-radius:2px;animation:orbux-button-pop 180ms ease-out 1}
:host([data-state="error"]) .spinner::before{transform:rotate(45deg)}
:host([data-state="error"]) .spinner::after{transform:rotate(-45deg)}
@keyframes orbux-button-pop{from{opacity:0;scale:.72}}
:host([data-settled="true"]) .spinner::before,:host([data-settled="true"]) .spinner::after{animation:none}
:host([data-paused="true"]) .spinner{animation-play-state:paused}
:host([data-reduced-motion="true"]) .spinner{animation:none}
:host([data-reduced-motion="true"][data-state="streaming"]) .spinner{border-width:3px}
:host([data-reduced-motion="true"][data-state="thinking"]) .spinner{opacity:.78}
`;

export class OrbuxButtonSpinner extends OrbuxElement {
  protected build(): void {
    const style = document.createElement('style');
    style.textContent = STYLES;
    const spinner = document.createElement('span');
    spinner.className = 'spinner';
    spinner.setAttribute('part', 'spinner');
    this.root.append(style, spinner);
  }
}

if (typeof customElements !== 'undefined' && !customElements.get('orbux-button-spinner')) {
  customElements.define('orbux-button-spinner', OrbuxButtonSpinner);
}

declare global {
  interface HTMLElementTagNameMap {
    'orbux-button-spinner': OrbuxButtonSpinner;
  }
}

import { OrbuxElement } from '@vikast908/core';

/**
 * Comet Track: a bright comet tracing a rounded-square track. Fast while
 * calling a tool, medium while streaming, parked on an accent-green track on
 * `done`, red on `error`.
 */
const STYLES = /* css */ `
:host { --_dur: 2.4s; }
svg { inline-size: 100%; block-size: 100%; overflow: visible; }
.track {
  fill: none;
  stroke: color-mix(in srgb, var(--orbux-color, #6366f1) 30%, transparent);
  stroke-width: 6;
}
.comet {
  fill: none;
  stroke: var(--orbux-color-2, #a855f7);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 42 258;
  filter: drop-shadow(0 0 5px var(--orbux-color-2, #a855f7));
  animation: orbux-comet calc(var(--_dur) * var(--orbux-speed-scale)) linear infinite;
}
@keyframes orbux-comet { to { stroke-dashoffset: -300; } }

/* ---- states ---- */
:host([data-state="thinking"])     { --_dur: 2.4s; }
:host([data-state="streaming"])    { --_dur: 1.5s; }
:host([data-state="streaming"]) .comet { stroke-dasharray: 64 236; }
:host([data-state="tool-calling"]) { --_dur: 0.9s; }
:host([data-state="tool-calling"]) .comet { stroke-dasharray: 18 48; animation-timing-function: steps(12, end); }
:host([data-state="tool-calling"]) .track { stroke-dasharray: 12 10; }
:host([data-state="idle"]),
:host([data-state="waiting"])      { --_dur: 4.5s; }
:host([data-state="idle"]) .comet { animation: none; opacity: .32; stroke-dashoffset: -40; }
:host([data-state="waiting"]) .comet { animation: none; opacity: .72; stroke-dashoffset: -120; }
:host([data-state="waiting"]) .track { opacity: .85; }

:host([data-state="done"]) .comet { opacity: 0; animation:none; }
:host([data-state="done"]) .track { stroke: var(--orbux-color-success, #22c55e); }

:host([data-state="error"]) .comet { stroke: var(--orbux-color-error, #ef4444); filter: drop-shadow(0 0 5px var(--orbux-color-error, #ef4444)); animation:orbux-comet-error 200ms ease-out 1; }
:host([data-state="error"]) .track { stroke: color-mix(in srgb, var(--orbux-color-error, #ef4444) 30%, transparent); }
@keyframes orbux-comet-error { to { stroke-dashoffset:-52; } }
:host([data-settled="true"]) .comet { animation:none; }

:host([data-paused="true"]) .comet { animation-play-state: paused; }
:host([data-reduced-motion="true"]) .comet { animation: none !important; }
:host([data-reduced-motion="true"][data-state="streaming"]) .comet { stroke-dasharray:72 228; }
:host([data-reduced-motion="true"][data-state="tool-calling"]) .track { stroke-dasharray:18 8; }
:host([data-reduced-motion="true"][data-state="waiting"]) .comet { opacity:.35; }
`;

export class OrbuxCometTrack extends OrbuxElement {
  protected build(): void {
    const style = document.createElement('style');
    style.textContent = STYLES;
    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svg.setAttribute('viewBox', '0 0 100 100');
    svg.innerHTML =
      '<rect class="track" part="track" x="16" y="16" width="68" height="68" rx="22" pathLength="300"/>' +
      '<rect class="comet" part="comet" x="16" y="16" width="68" height="68" rx="22" pathLength="300"/>';
    this.root.append(style, svg);
  }
}

if (typeof customElements !== 'undefined' && !customElements.get('orbux-comet-track')) {
  customElements.define('orbux-comet-track', OrbuxCometTrack);
}

declare global {
  interface HTMLElementTagNameMap {
    'orbux-comet-track': OrbuxCometTrack;
  }
}

import { OrbuxElement } from '@vikast908/core';

/**
 * Crimson Sigil: a clean ocular mark — soft rim, rotating iris sweep, and a
 * focused pupil. Restraint over ornament: theme tokens only, transform/opacity
 * motion, crisp state language.
 */
const STYLES = /* css */ `
:host {
  --_tone: var(--orbux-color, #ef3340);
  --_tone-2: var(--orbux-color-2, #fb7185);
  --_dur: 2.8s;
  --_ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --_ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

.sigil {
  position: relative;
  inline-size: 100%;
  block-size: 100%;
  display: grid;
  place-items: center;
}

/* Soft outer glow via box-shadow (cheaper than filter: drop-shadow on the host) */
.rim {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--_tone) 55%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--_tone-2) 18%, transparent),
    0 0 14px color-mix(in srgb, var(--_tone) 32%, transparent);
  transition: border-color 180ms var(--_ease-out), box-shadow 180ms var(--_ease-out), opacity 160ms ease;
}

/* Rotating energy sweep — single clear motion language */
.iris {
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0 58%,
    color-mix(in srgb, var(--_tone) 35%, transparent) 72%,
    var(--_tone-2) 88%,
    transparent 100%
  );
  -webkit-mask: radial-gradient(farthest-side, #0000 62%, #000 64%);
  mask: radial-gradient(farthest-side, #0000 62%, #000 64%);
  animation: orbux-crimson-spin calc(var(--_dur) * var(--orbux-speed-scale)) linear infinite;
}

/* Focused core — no hardcoded black; theme-aware dark */
.pupil {
  position: absolute;
  inset: 34%;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 34% 30%,
      color-mix(in srgb, var(--_tone-2) 55%, white) 0 10%,
      transparent 18%
    ),
    radial-gradient(
      circle at 50% 55%,
      color-mix(in srgb, var(--_tone) 22%, transparent) 0 42%,
      color-mix(in srgb, var(--_tone) 55%, #0a0a0b) 70%,
      color-mix(in srgb, var(--_tone) 35%, #050506) 100%
    );
  box-shadow:
    inset 0 0 0 1.5px color-mix(in srgb, var(--_tone) 45%, transparent),
    0 0 10px color-mix(in srgb, var(--_tone) 28%, transparent);
  transition:
    border-radius 180ms var(--_ease-out),
    transform 180ms var(--_ease-out),
    box-shadow 180ms var(--_ease-out),
    opacity 160ms ease;
}

/* Subtle breathing on the pupil while active */
.glint {
  position: absolute;
  inset: 38%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 32% 28%,
    color-mix(in srgb, white 55%, transparent),
    transparent 55%
  );
  opacity: 0.55;
  animation: orbux-crimson-breathe calc(1.6s * var(--orbux-speed-scale)) var(--_ease-in-out) infinite;
  pointer-events: none;
}

@keyframes orbux-crimson-spin {
  to { transform: rotate(1turn); }
}
@keyframes orbux-crimson-breathe {
  0%, 100% { opacity: 0.35; transform: scale(0.96); }
  50% { opacity: 0.7; transform: scale(1); }
}
@keyframes orbux-crimson-done {
  0% { transform: scale(1); }
  50% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
@keyframes orbux-crimson-error {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-3%); }
  60% { transform: translateX(3%); }
}

/* ---- states ---- */
:host([data-state="thinking"]) { --_dur: 2.8s; }
:host([data-state="streaming"]) { --_dur: 1.4s; }
:host([data-state="streaming"]) .rim {
  border-color: color-mix(in srgb, var(--_tone) 78%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--_tone-2) 35%, transparent),
    0 0 18px color-mix(in srgb, var(--_tone) 48%, transparent);
}
:host([data-state="streaming"]) .glint {
  animation-duration: calc(0.9s * var(--orbux-speed-scale));
}

:host([data-state="tool-calling"]) { --_dur: 1.1s; }
:host([data-state="tool-calling"]) .iris {
  animation-timing-function: steps(8, end);
  animation-direction: reverse;
}
:host([data-state="tool-calling"]) .pupil {
  border-radius: 26%;
}

:host([data-state="idle"]) .iris,
:host([data-state="idle"]) .glint { animation: none; }
:host([data-state="idle"]) .sigil { opacity: 0.5; }
:host([data-state="idle"]) .iris { opacity: 0.35; transform: rotate(24deg); }

:host([data-state="waiting"]) .iris,
:host([data-state="waiting"]) .glint { animation: none; }
:host([data-state="waiting"]) .sigil { opacity: 0.82; }
:host([data-state="waiting"]) .pupil { transform: scale(0.9); opacity: 0.88; }
:host([data-state="waiting"]) .iris { opacity: 0.55; transform: rotate(-18deg); }

:host([data-state="done"]) {
  --_tone: var(--orbux-color-success, #22c55e);
  --_tone-2: #86efac;
}
:host([data-state="error"]) {
  --_tone: var(--orbux-color-error, #ef4444);
  --_tone-2: #fda4af;
}
:host([data-state="done"]) .iris,
:host([data-state="error"]) .iris,
:host([data-state="done"]) .glint,
:host([data-state="error"]) .glint { animation: none; }
:host([data-state="done"]) .sigil { animation: orbux-crimson-done 220ms var(--_ease-out) 1; }
:host([data-state="error"]) .sigil { animation: orbux-crimson-error 200ms var(--_ease-out) 1; }
:host([data-settled="true"]) .sigil { animation: none; }

:host([data-paused="true"]) .iris,
:host([data-paused="true"]) .glint { animation-play-state: paused; }

:host([data-reduced-motion="true"]) .iris,
:host([data-reduced-motion="true"]) .glint { animation: none !important; }
:host([data-reduced-motion="true"][data-state="thinking"]) .iris {
  opacity: 0.75;
  transform: rotate(40deg);
}
:host([data-reduced-motion="true"][data-state="streaming"]) .rim {
  border-width: 3px;
}
:host([data-reduced-motion="true"][data-state="tool-calling"]) .pupil {
  border-radius: 26%;
}
:host([data-reduced-motion="true"][data-state="waiting"]) .pupil {
  transform: scale(0.9);
  opacity: 0.7;
}
`;

export class OrbuxCrimsonSigil extends OrbuxElement {
  protected build(): void {
    const style = document.createElement('style');
    style.textContent = STYLES;
    const sigil = document.createElement('div');
    sigil.className = 'sigil';
    sigil.setAttribute('part', 'sigil');
    sigil.innerHTML =
      '<span class="rim" part="rim"></span>' +
      '<span class="iris" part="iris"></span>' +
      '<span class="pupil" part="pupil"></span>' +
      '<span class="glint" part="glint" aria-hidden="true"></span>';
    this.root.append(style, sigil);
  }
}

if (typeof customElements !== 'undefined' && !customElements.get('orbux-crimson-sigil')) {
  customElements.define('orbux-crimson-sigil', OrbuxCrimsonSigil);
}

declare global {
  interface HTMLElementTagNameMap {
    'orbux-crimson-sigil': OrbuxCrimsonSigil;
  }
}

import { OrbuxElement } from '@vikast908/core';

const STYLES = /* css */ `
:host { --_tone:var(--orbux-color,#22d3ee);--_tone-2:var(--orbux-color-2,#f43f5e);--_dur:1.15s; }
.glitch { position:relative;inline-size:100%;block-size:100%;display:grid;place-items:center;overflow:hidden; }
.frame { position:absolute;inset:18%;clip-path:polygon(14% 0,100% 0,100% 74%,84% 100%,0 100%,0 22%);background:linear-gradient(135deg,color-mix(in srgb,var(--_tone) 25%,transparent),transparent 48%,color-mix(in srgb,var(--_tone-2) 24%,transparent));border:2px solid var(--_tone);box-shadow:4px 0 0 color-mix(in srgb,var(--_tone-2) 75%,transparent),-3px 0 0 color-mix(in srgb,var(--_tone) 75%,transparent);animation:orbux-cyber-shift calc(var(--_dur) * var(--orbux-speed-scale)) steps(6,end) infinite; }
.frame::before { content:"";position:absolute;inset:12% 18%;background:repeating-linear-gradient(to bottom,var(--_tone) 0 2px,transparent 2px 8px);opacity:.68; }
.scan { position:absolute;inset:10% 8%;background:linear-gradient(to bottom,transparent 44%,color-mix(in srgb,var(--_tone) 72%,white) 48% 52%,transparent 56%);animation:orbux-cyber-scan calc(1.05s * var(--orbux-speed-scale)) linear infinite; }
.pixel { position:absolute;left:calc(10% + var(--_x));top:calc(14% + var(--_y));inline-size:calc(7% + var(--_i) * 1%);block-size:4%;background:var(--_color);animation:orbux-cyber-pixel calc((.7s + var(--_i) * .08s) * var(--orbux-speed-scale)) steps(3,end) infinite;animation-delay:calc(var(--_i) * -90ms); }
@keyframes orbux-cyber-shift { 0%,100% { transform:translate(0) skewX(0); } 22% { transform:translate(-4%,2%) skewX(5deg); } 28% { transform:translate(5%,-2%) skewX(-4deg); } 62% { transform:translate(0); } }
@keyframes orbux-cyber-scan { from { transform:translateY(-55%); } to { transform:translateY(55%); } }
@keyframes orbux-cyber-pixel { 50% { transform:translateX(80%);opacity:.2; } }
@keyframes orbux-cyber-done { 50% { transform:scale(1.055); } }
@keyframes orbux-cyber-error { 35% { transform:translateX(-4%); } 70% { transform:translateX(4%); } }
:host([data-state="streaming"]) { --_dur:.62s; }
:host([data-state="tool-calling"]) .frame { clip-path:polygon(0 0,78% 0,100% 22%,100% 100%,22% 100%,0 78%); }
:host([data-state="idle"]) .frame,:host([data-state="waiting"]) .frame,:host([data-state="idle"]) .scan,:host([data-state="waiting"]) .scan,:host([data-state="idle"]) .pixel,:host([data-state="waiting"]) .pixel { animation:none; }
:host([data-state="idle"]) .glitch { opacity:.5; }
:host([data-state="waiting"]) .pixel:nth-child(even) { opacity:.2; }
:host([data-state="done"]) { --_tone:var(--orbux-color-success,#22c55e);--_tone-2:#86efac; }
:host([data-state="error"]) { --_tone:var(--orbux-color-error,#ef4444);--_tone-2:#f97316; }
:host([data-state="done"]) .frame,:host([data-state="error"]) .frame,:host([data-state="done"]) .scan,:host([data-state="error"]) .scan,:host([data-state="done"]) .pixel,:host([data-state="error"]) .pixel { animation:none; }
:host([data-state="done"]) .glitch { animation:orbux-cyber-done 220ms cubic-bezier(.23,1,.32,1) 1; }
:host([data-state="error"]) .glitch { animation:orbux-cyber-error 200ms cubic-bezier(.23,1,.32,1) 1; }
:host([data-settled="true"]) .glitch { animation:none; }
:host([data-paused="true"]) * { animation-play-state:paused !important; }
:host([data-reduced-motion="true"]) * { animation:none !important; }
:host([data-reduced-motion="true"][data-state="streaming"]) .scan { transform:translateY(24%); }
`;

export class OrbuxCyberGlitch extends OrbuxElement {
  protected build(): void {
    const style = document.createElement('style');
    style.textContent = STYLES;
    const glitch = document.createElement('div');
    glitch.className = 'glitch';
    glitch.setAttribute('part', 'glitch');
    const points = [
      [2, 8],
      [61, 4],
      [14, 63],
      [70, 52],
      [38, 24],
      [4, 46],
    ];
    glitch.innerHTML = `<span class="frame"></span><span class="scan"></span>${points.map(([x, y], index) => `<i class="pixel" style="--_i:${index};--_x:${x}%;--_y:${y}%;--_color:${index % 2 ? 'var(--_tone-2)' : 'var(--_tone)'}"></i>`).join('')}`;
    this.root.append(style, glitch);
  }
}
if (typeof customElements !== 'undefined' && !customElements.get('orbux-cyber-glitch'))
  customElements.define('orbux-cyber-glitch', OrbuxCyberGlitch);
declare global {
  interface HTMLElementTagNameMap {
    'orbux-cyber-glitch': OrbuxCyberGlitch;
  }
}

import { OrbuxElement } from '@vikast908/core';

/**
 * Dot Grid: a 3×3 grid of dots doing a diagonal wave ripple. Faster while
 * streaming, a checkerboard pulse while calling a tool, all-green on `done`,
 * staggered red snap on `error`.
 */
const STYLES = /* css */ `
:host { --_dur: 1.4s; }
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 14%;
  inline-size: 100%; block-size: 100%;
  place-items: center;
  padding: 10%;
  box-sizing: border-box;
}
.grid i {
  inline-size: 100%; aspect-ratio: 1; border-radius: 50%;
  background: var(--orbux-color, #6366f1);
  animation: orbux-dg calc(var(--_dur) * var(--orbux-speed-scale)) ease-in-out infinite;
  animation-delay: calc(var(--_dur) * var(--d, 0) * 0.13 * var(--orbux-speed-scale));
}
@keyframes orbux-dg {
  0%, 60%, 100% { transform: scale(0.45); opacity: 0.35; }
  30%           { transform: scale(1);    opacity: 1;    }
}

/* ---- states ---- */
:host([data-state="thinking"])  { --_dur: 1.4s; }
:host([data-state="streaming"]) { --_dur: 0.85s; }
:host([data-state="streaming"]) .grid i { border-radius: 35%; }
:host([data-state="idle"]),
:host([data-state="waiting"])   { --_dur: 2.6s; }
:host([data-state="idle"]) .grid i { animation: none; opacity: .38; transform:scale(.55); }
:host([data-state="waiting"]) .grid i { animation: none; opacity: .72; transform:scale(.78); }
:host([data-state="waiting"]) .grid i:nth-child(even) { opacity: .28; }
:host([data-state="tool-calling"]) { --_dur: 1s; }
:host([data-state="tool-calling"]) .grid i {
  border-radius: 22%;
  animation-delay: calc(var(--_dur) * var(--p, 0) * 0.5 * var(--orbux-speed-scale));
  animation-timing-function: steps(2, end);
}

:host([data-state="done"]) .grid i {
  animation: none;
  transform: scale(0.9);
  opacity: 1;
  background: var(--orbux-color-success, #22c55e);
}
:host([data-state="error"]) { --_dur: 0.5s; }
:host([data-state="error"]) .grid i {
  background: var(--orbux-color-error, #ef4444);
  animation: orbux-dg-flicker 220ms ease-out 1;
  animation-delay: calc(var(--d, 0) * 28ms);
}
@keyframes orbux-dg-flicker {
  0%, 100% { opacity: 1; transform: scale(0.9); }
  35% { opacity: 0.25; transform: scale(0.45); }
  70% { opacity: 1; transform: scale(1.05); }
}
:host([data-state="error"]) .grid { animation:orbux-dg-error 200ms ease-out 1; }
@keyframes orbux-dg-error { 35% { transform:translateX(-5%); } 70% { transform:translateX(5%); } }
:host([data-settled="true"]) .grid,
:host([data-settled="true"]) .grid i { animation:none; }
:host([data-settled="true"][data-state="error"]) .grid i { opacity: 1; transform: scale(0.9); }

:host([data-paused="true"]) .grid i { animation-play-state: paused; }
:host([data-reduced-motion="true"]) .grid i { animation: none !important; transform: none; opacity: 0.8; }
:host([data-reduced-motion="true"][data-state="thinking"]) .grid i:nth-child(even) { opacity:.45; }
:host([data-reduced-motion="true"][data-state="streaming"]) .grid i { opacity:1; }
:host([data-reduced-motion="true"][data-state="tool-calling"]) .grid i { border-radius:22%; }
:host([data-reduced-motion="true"][data-state="waiting"]) .grid i:nth-child(n+7) { opacity:.25; }
`;

export class OrbuxDotGrid extends OrbuxElement {
  protected build(): void {
    const style = document.createElement('style');
    style.textContent = STYLES;
    const grid = document.createElement('div');
    grid.className = 'grid';
    grid.setAttribute('part', 'grid');
    for (let r = 0; r < 3; r++) {
      for (let c = 0; c < 3; c++) {
        const dot = document.createElement('i');
        dot.style.setProperty('--d', String(r + c));
        dot.style.setProperty('--p', String((r + c) % 2));
        grid.appendChild(dot);
      }
    }
    this.root.append(style, grid);
  }
}

if (typeof customElements !== 'undefined' && !customElements.get('orbux-dot-grid')) {
  customElements.define('orbux-dot-grid', OrbuxDotGrid);
}

declare global {
  interface HTMLElementTagNameMap {
    'orbux-dot-grid': OrbuxDotGrid;
  }
}

// Generated by scripts/generate-recipe-catalog.mjs. Edit recipe-catalog.json or generated-loader.ts instead.
import { defineGeneratedLoader } from '../generated-loader.js';

/** Drift Beacon: beacon geometry driven by the drift motion recipe. */
export const OrbuxDriftBeacon = defineGeneratedLoader('drift-beacon');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-drift-beacon': InstanceType<typeof OrbuxDriftBeacon>;
  }
}

// Generated by scripts/generate-recipe-catalog.mjs. Edit recipe-catalog.json or generated-loader.ts instead.
import { defineGeneratedLoader } from '../generated-loader.js';

/** Drift Beads: beads geometry driven by the drift motion recipe. */
export const OrbuxDriftBeads = defineGeneratedLoader('drift-beads');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-drift-beads': InstanceType<typeof OrbuxDriftBeads>;
  }
}

// Generated by scripts/generate-recipe-catalog.mjs. Edit recipe-catalog.json or generated-loader.ts instead.
import { defineGeneratedLoader } from '../generated-loader.js';

/** Drift Bloom: bloom geometry driven by the drift motion recipe. */
export const OrbuxDriftBloom = defineGeneratedLoader('drift-bloom');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-drift-bloom': InstanceType<typeof OrbuxDriftBloom>;
  }
}

// Generated by scripts/generate-recipe-catalog.mjs. Edit recipe-catalog.json or generated-loader.ts instead.
import { defineGeneratedLoader } from '../generated-loader.js';

/** Drift Cascade: cascade geometry driven by the drift motion recipe. */
export const OrbuxDriftCascade = defineGeneratedLoader('drift-cascade');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-drift-cascade': InstanceType<typeof OrbuxDriftCascade>;
  }
}

// Generated by scripts/generate-recipe-catalog.mjs. Edit recipe-catalog.json or generated-loader.ts instead.
import { defineGeneratedLoader } from '../generated-loader.js';

/** Drift Columns: columns geometry driven by the drift motion recipe. */
export const OrbuxDriftColumns = defineGeneratedLoader('drift-columns');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-drift-columns': InstanceType<typeof OrbuxDriftColumns>;
  }
}

// Generated by scripts/generate-recipe-catalog.mjs. Edit recipe-catalog.json or generated-loader.ts instead.
import { defineGeneratedLoader } from '../generated-loader.js';

/** Drift Filament: filament geometry driven by the drift motion recipe. */
export const OrbuxDriftFilament = defineGeneratedLoader('drift-filament');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-drift-filament': InstanceType<typeof OrbuxDriftFilament>;
  }
}

// Generated by scripts/generate-recipe-catalog.mjs. Edit recipe-catalog.json or generated-loader.ts instead.
import { defineGeneratedLoader } from '../generated-loader.js';

/** Drift Glyph: glyph geometry driven by the drift motion recipe. */
export const OrbuxDriftGlyph = defineGeneratedLoader('drift-glyph');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-drift-glyph': InstanceType<typeof OrbuxDriftGlyph>;
  }
}

// Generated by scripts/generate-recipe-catalog.mjs. Edit recipe-catalog.json or generated-loader.ts instead.
import { defineGeneratedLoader } from '../generated-loader.js';

/** Drift Halo: halo geometry driven by the drift motion recipe. */
export const OrbuxDriftHalo = defineGeneratedLoader('drift-halo');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-drift-halo': InstanceType<typeof OrbuxDriftHalo>;
  }
}

// Generated by scripts/generate-recipe-catalog.mjs. Edit recipe-catalog.json or generated-loader.ts instead.
import { defineGeneratedLoader } from '../generated-loader.js';

/** Drift Helix: helix geometry driven by the drift motion recipe. */
export const OrbuxDriftHelix = defineGeneratedLoader('drift-helix');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-drift-helix': InstanceType<typeof OrbuxDriftHelix>;
  }
}

// Generated by scripts/generate-recipe-catalog.mjs. Edit recipe-catalog.json or generated-loader.ts instead.
import { defineGeneratedLoader } from '../generated-loader.js';

/** Drift Matrix: matrix geometry driven by the drift motion recipe. */
export const OrbuxDriftMatrix = defineGeneratedLoader('drift-matrix');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-drift-matrix': InstanceType<typeof OrbuxDriftMatrix>;
  }
}

// Generated by scripts/generate-recipe-catalog.mjs. Edit recipe-catalog.json or generated-loader.ts instead.
import { defineGeneratedLoader } from '../generated-loader.js';

/** Drift Mesh: mesh geometry driven by the drift motion recipe. */
export const OrbuxDriftMesh = defineGeneratedLoader('drift-mesh');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-drift-mesh': InstanceType<typeof OrbuxDriftMesh>;
  }
}

// Generated by scripts/generate-recipe-catalog.mjs. Edit recipe-catalog.json or generated-loader.ts instead.
import { defineGeneratedLoader } from '../generated-loader.js';

/** Drift Portal: portal geometry driven by the drift motion recipe. */
export const OrbuxDriftPortal = defineGeneratedLoader('drift-portal');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-drift-portal': InstanceType<typeof OrbuxDriftPortal>;
  }
}

// Generated by scripts/generate-recipe-catalog.mjs. Edit recipe-catalog.json or generated-loader.ts instead.
import { defineGeneratedLoader } from '../generated-loader.js';

/** Drift Prism: prism geometry driven by the drift motion recipe. */
export const OrbuxDriftPrism = defineGeneratedLoader('drift-prism');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-drift-prism': InstanceType<typeof OrbuxDriftPrism>;
  }
}

// Generated by scripts/generate-recipe-catalog.mjs. Edit recipe-catalog.json or generated-loader.ts instead.
import { defineGeneratedLoader } from '../generated-loader.js';

/** Drift Ripple: ripple geometry driven by the drift motion recipe. */
export const OrbuxDriftRipple = defineGeneratedLoader('drift-ripple');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-drift-ripple': InstanceType<typeof OrbuxDriftRipple>;
  }
}

// Generated by scripts/generate-recipe-catalog.mjs. Edit recipe-catalog.json or generated-loader.ts instead.
import { defineGeneratedLoader } from '../generated-loader.js';

/** Drift Satellite: satellite geometry driven by the drift motion recipe. */
export const OrbuxDriftSatellite = defineGeneratedLoader('drift-satellite');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-drift-satellite': InstanceType<typeof OrbuxDriftSatellite>;
  }
}

// Generated by scripts/generate-recipe-catalog.mjs. Edit recipe-catalog.json or generated-loader.ts instead.
import { defineGeneratedLoader } from '../generated-loader.js';

/** Drift Signal: signal geometry driven by the drift motion recipe. */
export const OrbuxDriftSignal = defineGeneratedLoader('drift-signal');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-drift-signal': InstanceType<typeof OrbuxDriftSignal>;
  }
}

// Generated by scripts/generate-recipe-catalog.mjs. Edit recipe-catalog.json or generated-loader.ts instead.
import { defineGeneratedLoader } from '../generated-loader.js';

/** Drift Sonar: sonar geometry driven by the drift motion recipe. */
export const OrbuxDriftSonar = defineGeneratedLoader('drift-sonar');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-drift-sonar': InstanceType<typeof OrbuxDriftSonar>;
  }
}

// Generated by scripts/generate-recipe-catalog.mjs. Edit recipe-catalog.json or generated-loader.ts instead.
import { defineGeneratedLoader } from '../generated-loader.js';

/** Drift Tracer: tracer geometry driven by the drift motion recipe. */
export const OrbuxDriftTracer = defineGeneratedLoader('drift-tracer');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-drift-tracer': InstanceType<typeof OrbuxDriftTracer>;
  }
}

// Generated by scripts/generate-recipe-catalog.mjs. Edit recipe-catalog.json or generated-loader.ts instead.
import { defineGeneratedLoader } from '../generated-loader.js';

/** Drift Vortex: vortex geometry driven by the drift motion recipe. */
export const OrbuxDriftVortex = defineGeneratedLoader('drift-vortex');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-drift-vortex': InstanceType<typeof OrbuxDriftVortex>;
  }
}

// Generated by scripts/generate-recipe-catalog.mjs. Edit recipe-catalog.json or generated-loader.ts instead.
import { defineGeneratedLoader } from '../generated-loader.js';

/** Drift Waveform: waveform geometry driven by the drift motion recipe. */
export const OrbuxDriftWaveform = defineGeneratedLoader('drift-waveform');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-drift-waveform': InstanceType<typeof OrbuxDriftWaveform>;
  }
}

import { OrbuxElement } from '@vikast908/core';

/**
 * Ember Flame: layered fire with a hot core, mid and outer tongues, soft glow,
 * and rising sparks. Organic sway — not cardboard clip-path cutouts.
 */
const STYLES = /* css */ `
:host {
  --_tone: var(--orbux-color, #f97316);
  --_tone-2: var(--orbux-color-2, #facc15);
  --_hot: color-mix(in srgb, var(--_tone-2) 55%, white);
  --_dur: 0.95s;
  --_ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --_ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

.flame {
  position: relative;
  inline-size: 100%;
  block-size: 100%;
  display: grid;
  place-items: end center;
  overflow: visible;
}

/* Soft ground heat — not a hard drop-shadow plate */
.glow {
  position: absolute;
  inset-inline: 12%;
  inset-block-end: 2%;
  block-size: 28%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--_tone) 55%, transparent) 0%,
    color-mix(in srgb, var(--_tone-2) 22%, transparent) 45%,
    transparent 72%
  );
  opacity: 0.85;
  animation: orbux-ember-glow calc(1.1s * var(--orbux-speed-scale)) var(--_ease-in-out) infinite;
}

/* Shared teardrop volume: pointed top, wide base */
.tongue {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: 10%;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  border-radius: 50% 50% 42% 42% / 68% 68% 28% 28%;
  will-change: transform, opacity;
}

/* Cool outer envelope — soft, slightly blurred edge */
.outer {
  inline-size: 52%;
  block-size: 72%;
  background: radial-gradient(
    ellipse 70% 90% at 50% 78%,
    color-mix(in srgb, var(--_tone) 88%, transparent) 0 38%,
    color-mix(in srgb, var(--_tone) 45%, transparent) 62%,
    transparent 78%
  );
  filter: blur(1.2px);
  opacity: 0.92;
  animation: orbux-ember-sway-a calc(var(--_dur) * 1.15 * var(--orbux-speed-scale)) var(--_ease-in-out) infinite;
}

/* Mid body — hotter, tighter */
.mid {
  inline-size: 38%;
  block-size: 62%;
  background: radial-gradient(
    ellipse 65% 85% at 48% 72%,
    var(--_tone-2) 0 22%,
    var(--_tone) 48%,
    color-mix(in srgb, var(--_tone) 35%, transparent) 72%,
    transparent 86%
  );
  filter: blur(0.4px);
  opacity: 0.95;
  animation: orbux-ember-sway-b calc(var(--_dur) * var(--orbux-speed-scale)) var(--_ease-in-out) infinite;
  animation-delay: calc(-0.12s * var(--orbux-speed-scale));
  mix-blend-mode: screen;
}

/* Hot core — white-yellow heart of the fire */
.core {
  inline-size: 24%;
  block-size: 48%;
  background: radial-gradient(
    ellipse 60% 80% at 50% 70%,
    white 0 12%,
    var(--_hot) 28%,
    var(--_tone-2) 55%,
    color-mix(in srgb, var(--_tone) 40%, transparent) 78%,
    transparent 92%
  );
  opacity: 0.98;
  animation: orbux-ember-sway-c calc(var(--_dur) * 0.85 * var(--orbux-speed-scale)) var(--_ease-in-out) infinite;
  animation-delay: calc(-0.22s * var(--orbux-speed-scale));
  mix-blend-mode: screen;
}

/* Small tip lick above the core */
.tip {
  inline-size: 14%;
  block-size: 28%;
  inset-block-end: 48%;
  background: radial-gradient(
    ellipse at 50% 80%,
    color-mix(in srgb, var(--_hot) 80%, white) 0 30%,
    color-mix(in srgb, var(--_tone-2) 55%, transparent) 60%,
    transparent 85%
  );
  filter: blur(0.6px);
  opacity: 0.9;
  animation: orbux-ember-tip calc(var(--_dur) * 0.7 * var(--orbux-speed-scale)) var(--_ease-in-out) infinite;
  mix-blend-mode: screen;
}

/* Rising sparks */
.spark {
  position: absolute;
  inset-inline-start: calc(32% + var(--_x));
  inset-block-end: 22%;
  inline-size: calc(3.5% + var(--_s, 0%));
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, white, var(--_tone-2) 45%, transparent 75%);
  opacity: 0;
  animation: orbux-ember-lift calc((1.15s + var(--_i) * 0.07s) * var(--orbux-speed-scale)) var(--_ease-out) infinite;
  animation-delay: calc(var(--_i) * -0.18s * var(--orbux-speed-scale));
  pointer-events: none;
}

@keyframes orbux-ember-sway-a {
  0%, 100% { transform: translateX(-50%) scale(0.94, 1) rotate(-4deg); opacity: 0.78; }
  40% { transform: translateX(-50%) scale(1.04, 0.96) rotate(5deg); opacity: 1; }
  70% { transform: translateX(-50%) scale(0.97, 1.02) rotate(-2deg); opacity: 0.9; }
}
@keyframes orbux-ember-sway-b {
  0%, 100% { transform: translateX(-50%) scale(0.96, 1.02) rotate(3deg); }
  50% { transform: translateX(-50%) scale(1.05, 0.94) rotate(-5deg); }
}
@keyframes orbux-ember-sway-c {
  0%, 100% { transform: translateX(-50%) scale(0.92, 1.04) rotate(-2deg); opacity: 0.88; }
  50% { transform: translateX(-50%) scale(1.06, 0.92) rotate(3deg); opacity: 1; }
}
@keyframes orbux-ember-tip {
  0%, 100% { transform: translateX(-50%) scale(0.85, 1) rotate(-8deg); opacity: 0.55; }
  50% { transform: translateX(-50%) scale(1.1, 0.88) rotate(10deg); opacity: 1; }
}
@keyframes orbux-ember-glow {
  0%, 100% { transform: scaleX(0.92); opacity: 0.65; }
  50% { transform: scaleX(1.06); opacity: 0.95; }
}
@keyframes orbux-ember-lift {
  0% { transform: translateY(0) translateX(0) scale(0.85); opacity: 0; }
  12% { opacity: 0.95; }
  100% { transform: translateY(-520%) translateX(var(--_drift, 40%)) scale(0.35); opacity: 0; }
}
@keyframes orbux-ember-done {
  0% { transform: scale(1); }
  50% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
@keyframes orbux-ember-error {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-3%); }
  60% { transform: translateX(3%); }
}

/* ---- states ---- */
:host([data-state="thinking"]) { --_dur: 0.95s; }
:host([data-state="streaming"]) { --_dur: 0.55s; }
:host([data-state="streaming"]) .glow {
  opacity: 1;
  filter: blur(0.5px);
}
:host([data-state="streaming"]) .outer,
:host([data-state="streaming"]) .mid,
:host([data-state="streaming"]) .core {
  filter: saturate(1.15) brightness(1.06);
}

/* Mechanical “tool” feel without cardboard steps on organic fire */
:host([data-state="tool-calling"]) { --_dur: 0.72s; }
:host([data-state="tool-calling"]) .outer { animation-duration: calc(0.55s * var(--orbux-speed-scale)); }
:host([data-state="tool-calling"]) .mid { animation-duration: calc(0.42s * var(--orbux-speed-scale)); }
:host([data-state="tool-calling"]) .tip { animation-duration: calc(0.35s * var(--orbux-speed-scale)); }

:host([data-state="idle"]) .outer,
:host([data-state="idle"]) .mid,
:host([data-state="idle"]) .core,
:host([data-state="idle"]) .tip,
:host([data-state="idle"]) .glow,
:host([data-state="idle"]) .spark { animation: none; }
:host([data-state="idle"]) .flame { opacity: 0.48; }
:host([data-state="idle"]) .outer { transform: translateX(-50%) scale(0.88, 0.82); opacity: 0.55; }
:host([data-state="idle"]) .mid { transform: translateX(-50%) scale(0.9, 0.85); }
:host([data-state="idle"]) .core { transform: translateX(-50%) scale(0.92, 0.88); opacity: 0.7; }
:host([data-state="idle"]) .tip { opacity: 0.25; transform: translateX(-50%) scale(0.8); }
:host([data-state="idle"]) .glow { opacity: 0.35; transform: scaleX(0.85); }

:host([data-state="waiting"]) .outer,
:host([data-state="waiting"]) .mid,
:host([data-state="waiting"]) .core,
:host([data-state="waiting"]) .tip,
:host([data-state="waiting"]) .glow,
:host([data-state="waiting"]) .spark { animation: none; }
:host([data-state="waiting"]) .flame { opacity: 0.82; }
:host([data-state="waiting"]) .outer { transform: translateX(-50%) scale(0.92, 0.78); opacity: 0.7; }
:host([data-state="waiting"]) .mid { transform: translateX(-50%) scale(0.94, 0.8); }
:host([data-state="waiting"]) .core { transform: translateX(-50%) scale(0.9, 0.82); opacity: 0.85; }
:host([data-state="waiting"]) .tip { opacity: 0.4; transform: translateX(-50%) scale(0.75) rotate(-6deg); }
:host([data-state="waiting"]) .glow { opacity: 0.55; }

:host([data-state="done"]) {
  --_tone: var(--orbux-color-success, #22c55e);
  --_tone-2: #bbf7d0;
  --_hot: #ecfdf5;
}
:host([data-state="error"]) {
  --_tone: var(--orbux-color-error, #ef4444);
  --_tone-2: #fbbf24;
  --_hot: #fff7ed;
}
:host([data-state="done"]) .outer,
:host([data-state="error"]) .outer,
:host([data-state="done"]) .mid,
:host([data-state="error"]) .mid,
:host([data-state="done"]) .core,
:host([data-state="error"]) .core,
:host([data-state="done"]) .tip,
:host([data-state="error"]) .tip,
:host([data-state="done"]) .glow,
:host([data-state="error"]) .glow,
:host([data-state="done"]) .spark,
:host([data-state="error"]) .spark { animation: none; }
:host([data-state="done"]) .flame { animation: orbux-ember-done 220ms var(--_ease-out) 1; }
:host([data-state="error"]) .flame { animation: orbux-ember-error 200ms var(--_ease-out) 1; }
:host([data-settled="true"]) .flame { animation: none; }

:host([data-paused="true"]) .outer,
:host([data-paused="true"]) .mid,
:host([data-paused="true"]) .core,
:host([data-paused="true"]) .tip,
:host([data-paused="true"]) .glow,
:host([data-paused="true"]) .spark { animation-play-state: paused; }

:host([data-reduced-motion="true"]) .outer,
:host([data-reduced-motion="true"]) .mid,
:host([data-reduced-motion="true"]) .core,
:host([data-reduced-motion="true"]) .tip,
:host([data-reduced-motion="true"]) .glow,
:host([data-reduced-motion="true"]) .spark { animation: none !important; }
:host([data-reduced-motion="true"]) .outer { transform: translateX(-50%); opacity: 0.85; }
:host([data-reduced-motion="true"]) .mid { transform: translateX(-50%); }
:host([data-reduced-motion="true"]) .core { transform: translateX(-50%); }
:host([data-reduced-motion="true"]) .tip { transform: translateX(-50%); opacity: 0.7; }
:host([data-reduced-motion="true"][data-state="streaming"]) .glow { opacity: 1; }
:host([data-reduced-motion="true"][data-state="tool-calling"]) .outer { transform: translateX(-50%) scale(1.05, 0.92); }
:host([data-reduced-motion="true"][data-state="waiting"]) .outer,
:host([data-reduced-motion="true"][data-state="waiting"]) .mid,
:host([data-reduced-motion="true"][data-state="waiting"]) .core {
  transform: translateX(-50%) scale(0.92, 0.8);
  opacity: 0.7;
}
:host([data-reduced-motion="true"][data-state="idle"]) .flame { opacity: 0.5; }
`;

export class OrbuxEmberFlame extends OrbuxElement {
  protected build(): void {
    const style = document.createElement('style');
    style.textContent = STYLES;
    const flame = document.createElement('div');
    flame.className = 'flame';
    flame.setAttribute('part', 'flame');
    const sparks = [
      { i: 0, x: '0%', s: '0%', drift: '28%' },
      { i: 1, x: '18%', s: '1%', drift: '-22%' },
      { i: 2, x: '8%', s: '0%', drift: '48%' },
      { i: 3, x: '28%', s: '1.5%', drift: '-36%' },
      { i: 4, x: '12%', s: '0%', drift: '18%' },
    ];
    flame.innerHTML =
      '<span class="glow" part="glow"></span>' +
      '<span class="tongue outer" part="outer"></span>' +
      '<span class="tongue mid" part="mid"></span>' +
      '<span class="tongue core" part="core"></span>' +
      '<span class="tongue tip" part="tip"></span>' +
      sparks
        .map(
          (s) =>
            `<i class="spark" style="--_i:${s.i};--_x:${s.x};--_s:${s.s};--_drift:${s.drift}" part="spark"></i>`,
        )
        .join('');
    this.root.append(style, flame);
  }
}

if (typeof customElements !== 'undefined' && !customElements.get('orbux-ember-flame')) {
  customElements.define('orbux-ember-flame', OrbuxEmberFlame);
}

declare global {
  interface HTMLElementTagNameMap {
    'orbux-ember-flame': OrbuxEmberFlame;
  }
}

import { type AgentState, lerp, type OrbuxFrameInfo, ShaderElement } from '@vikast908/core';

const FRAG = /* glsl */ `
precision highp float;
uniform vec2  uRes;
uniform float uTime;
uniform vec3  uColorA;   // outer / corona
uniform vec3  uColorB;   // hot inner
uniform float uActivity;
uniform float uState;
uniform float uProgress;
uniform vec3  uProgressColor;

float hash(vec2 p){ return fract(sin(dot(p, vec2(127.1,311.7)))*43758.5453); }
float noise(vec2 p){
  vec2 i=floor(p), f=fract(p);
  float a=hash(i), b=hash(i+vec2(1,0)), c=hash(i+vec2(0,1)), d=hash(i+vec2(1,1));
  vec2 u=f*f*(3.0-2.0*f);
  return mix(a,b,u.x)+(c-a)*u.y*(1.0-u.x)+(d-b)*u.x*u.y;
}
float fbm(vec2 p){ float v=0.0,a=0.5; for(int i=0;i<4;i++){ v+=a*noise(p); p*=2.0; a*=0.5;} return v; }

void main(){
  vec2 uv=(gl_FragCoord.xy*2.0-uRes)/min(uRes.x,uRes.y);
  float r=length(uv); float ang=atan(uv.y,uv.x); float t=uTime;

  // turbulent corona: noise flares modulated by angle & time
  float flare=fbm(vec2(ang*2.5, t*0.9)) + fbm(vec2(ang*5.0 - t*0.6, t*0.4))*0.5;
  float coronaR=0.34 + flare*0.5*(0.5+uActivity);
  float corona=smoothstep(coronaR, coronaR-0.4, r)*(0.55+0.45*uActivity);

  // pulsing hot core
  float pulse=0.85+0.15*sin(t*3.0);
  float core=smoothstep(0.34, 0.0, r)*pulse;

  vec3 col=mix(uColorA, uColorB, core);
  col=mix(col, uColorA, corona*0.5);
  col+=vec3(core*0.85);
  float glow=smoothstep(1.25,0.0,r)*0.3*uActivity;
  float alpha=clamp(core + corona + glow, 0.0, 1.0);
  if(uState>3.5&&uState<4.5) alpha*=smoothstep(0.16,0.27,r);
  if(uState>2.5&&uState<3.5) alpha*=0.78+0.22*step(0.3,abs(sin(ang*4.0)));

  if(uProgress>=0.0){
    float a01=mod(atan(uv.x,uv.y)+6.2831853,6.2831853)/6.2831853;
    float ring=smoothstep(0.03,0.0,abs(r-0.9));
    float f=ring*step(a01,uProgress);
    col=mix(col, uProgressColor, f*0.9);
    alpha=max(alpha, f);
  }
  gl_FragColor=vec4(col, alpha);
}
`;

type RGB = [number, number, number];
interface Visual {
  act: number;
  a: RGB;
  b: RGB;
}

const STATE_VISUALS: Record<AgentState, Visual> = {
  idle: { act: 0.15, a: [0.3, 0.25, 0.6], b: [0.6, 0.5, 0.95] },
  thinking: { act: 0.5, a: [0.4, 0.3, 0.9], b: [0.8, 0.6, 1.0] },
  streaming: { act: 0.95, a: [0.3, 0.6, 1.0], b: [0.75, 0.95, 1.0] },
  'tool-calling': { act: 0.72, a: [0.1, 0.7, 0.6], b: [0.6, 1.0, 0.8] },
  waiting: { act: 0.2, a: [0.35, 0.35, 0.6], b: [0.6, 0.6, 0.85] },
  done: { act: 0.3, a: [0.15, 0.6, 0.35], b: [0.6, 1.0, 0.7] },
  error: { act: 0.6, a: [0.7, 0.15, 0.2], b: [1.0, 0.5, 0.3] },
};

/** Energy Core: a pulsing hot core with a turbulent corona of flares. */
export class OrbuxEnergyCore extends ShaderElement {
  #act = 0.5;
  #a: RGB = [0.4, 0.3, 0.9];
  #b: RGB = [0.8, 0.6, 1.0];

  protected fragmentSource(): string {
    return FRAG;
  }
  protected override timeScale(): number {
    return 0.4 + this.#act;
  }
  protected override fallbackBackground(): string {
    return 'background:radial-gradient(circle at 50% 50%,#ffffff,var(--orbux-color-2,#f0abfc) 30%,var(--orbux-color,#6366f1) 75%);';
  }

  protected paint(gl: WebGLRenderingContext, info: OrbuxFrameInfo): void {
    const v = STATE_VISUALS[info.state];
    let a = v.a;
    let b = v.b;
    if (info.state === 'done') {
      a = this.cssColorRGB('--orbux-color-success', v.a);
      b = v.b;
    } else if (info.state === 'error') {
      a = this.cssColorRGB('--orbux-color-error', v.a);
      b = v.b;
    } else {
      a = this.cssColorRGB('--orbux-color', v.a);
      b = this.cssColorRGB('--orbux-color-2', v.b);
    }
    const rate = info.state === 'done' || info.state === 'error' ? 18 : 3.5;
    const k = info.dt === 0 ? 1 : 1 - Math.exp(-rate * info.dt);
    this.#act = lerp(this.#act, v.act, k);
    for (let i = 0; i < 3; i++) {
      this.#a[i] = lerp(this.#a[i] ?? 0, a[i] ?? 0, k);
      this.#b[i] = lerp(this.#b[i] ?? 0, b[i] ?? 0, k);
    }
    gl.uniform3fv(this.uniform('uColorA'), this.#a);
    gl.uniform3fv(this.uniform('uColorB'), this.#b);
    gl.uniform1f(this.uniform('uActivity'), this.#act);
  }
}

if (typeof customElements !== 'undefined' && !customElements.get('orbux-energy-core')) {
  customElements.define('orbux-energy-core', OrbuxEnergyCore);
}

declare global {
  interface HTMLElementTagNameMap {
    'orbux-energy-core': OrbuxEnergyCore;
  }
}

import {
  type AgentState,
  Canvas2DElement,
  clamp,
  lerp,
  noise1D,
  type OrbuxFrameInfo,
} from '@vikast908/core';

const TAU = Math.PI * 2;

interface Particle {
  x: number;
  y: number;
  tint: number;
  seed: number;
}

interface Tune {
  speed: number;
  pull: number; // toward center (converge)
  turb: number; // random turbulence
  fade: number; // trail fade
}

const STATE_TUNE: Record<AgentState, Tune> = {
  idle: { speed: 0.25, pull: 0, turb: 0, fade: 0.06 },
  thinking: { speed: 0.55, pull: 0, turb: 0, fade: 0.1 },
  streaming: { speed: 1.2, pull: 0, turb: 0, fade: 0.16 },
  'tool-calling': { speed: 0.9, pull: 0.12, turb: 0, fade: 0.14 },
  waiting: { speed: 0.3, pull: 0, turb: 0, fade: 0.07 },
  // pull stays under the wrap threshold so particles remain on-canvas when settled
  done: { speed: 0.45, pull: 0.28, turb: 0, fade: 0.12 },
  error: { speed: 0.8, pull: 0, turb: 0.8, fade: 0.14 },
};

/**
 * Flow Field: particles advected by a smooth pseudo-noise flow field, leaving
 * short fading trails. Elegant generative motion that converges on `done` and
 * turns turbulent on `error`.
 */
export class OrbuxFlowField extends Canvas2DElement {
  #particles: Particle[] = [];
  #cur: Tune = { ...STATE_TUNE.thinking };

  protected override setup(): void {
    this.#seed();
  }
  protected override onResize(): void {
    this.#seed();
  }

  #seed(): void {
    const count = clamp(Math.round(Math.min(this.width, this.height) * 1.0), 40, 150);
    this.#particles = Array.from({ length: count }, (_, i) => ({
      x: Math.random() * this.width,
      y: Math.random() * this.height,
      tint: i % 2,
      seed: i + 1,
    }));
  }

  #flow(nx: number, ny: number, time: number): number {
    return (
      (Math.sin(nx * 3.2 + time * 0.4) +
        Math.cos(ny * 3.0 - time * 0.3) +
        Math.sin((nx + ny) * 4.0 + time * 0.2)) *
      1.4
    );
  }

  protected draw(info: OrbuxFrameInfo): void {
    const ctx = this.ctx;
    if (!ctx) return;
    const t = STATE_TUNE[info.state];
    const rate = info.state === 'done' || info.state === 'error' ? 18 : 3;
    const k = info.dt === 0 ? 1 : 1 - Math.exp(-rate * info.dt);
    this.#cur.speed = lerp(this.#cur.speed, t.speed, k);
    this.#cur.pull = lerp(this.#cur.pull, t.pull, k);
    this.#cur.turb = lerp(this.#cur.turb, t.turb, k);
    this.#cur.fade = lerp(this.#cur.fade, t.fade, k);

    const c1 = this.cssColor('--orbux-color', '#6366f1');
    const c2 = this.cssColor('--orbux-color-2', '#a855f7');
    const terminal =
      info.state === 'done'
        ? this.cssColor('--orbux-color-success', '#22c55e')
        : info.state === 'error'
          ? this.cssColor('--orbux-color-error', '#ef4444')
          : null;

    const w = this.width;
    const h = this.height;
    const reach = Math.min(w, h);
    const spd = reach * 0.525 * this.#cur.speed * info.speed;

    // fade previous frame (keeps transparency, leaves trails)
    ctx.globalCompositeOperation = 'destination-out';
    // Static frames (pause / reduced-motion / offscreen) pass dt === 0; apply a
    // single meaningful fade so trails do not freeze as opaque smudges.
    const fadeAlpha =
      info.dt <= 0
        ? Math.min(0.92, Math.max(0.12, this.#cur.fade * 6))
        : 1 - (1 - this.#cur.fade) ** (info.dt * 60);
    ctx.fillStyle = `rgba(0,0,0,${fadeAlpha})`;
    ctx.fillRect(0, 0, w, h);

    ctx.globalCompositeOperation = 'lighter';
    for (const p of this.#particles) {
      const nx = p.x / w;
      const ny = p.y / h;
      const ang = this.#flow(nx, ny, info.elapsed);
      let vx = Math.cos(ang);
      let vy = Math.sin(ang);
      if (this.#cur.pull > 0) {
        vx += (0.5 - nx) * this.#cur.pull * 3;
        vy += (0.5 - ny) * this.#cur.pull * 3;
      }
      if (this.#cur.turb > 0) {
        vx += noise1D(p.seed, info.elapsed * 7) * this.#cur.turb;
        vy += noise1D(p.seed + 1000, info.elapsed * 7) * this.#cur.turb;
      }
      p.x += vx * spd * info.dt;
      p.y += vy * spd * info.dt;

      // wrap unless strongly converging
      if (this.#cur.pull < 0.3) {
        if (p.x < 0) p.x += w;
        else if (p.x > w) p.x -= w;
        if (p.y < 0) p.y += h;
        else if (p.y > h) p.y -= h;
      }

      const color = terminal ?? (p.tint ? c2 : c1);
      const s = Math.max(1, reach * 0.012);
      ctx.beginPath();
      ctx.arc(p.x, p.y, s, 0, TAU);
      ctx.fillStyle = color;
      ctx.shadowBlur = s * 2.5;
      ctx.shadowColor = color;
      ctx.fill();
    }

    ctx.globalCompositeOperation = 'source-over';
    ctx.shadowBlur = 0;
  }
}

if (typeof customElements !== 'undefined' && !customElements.get('orbux-flow-field')) {
  customElements.define('orbux-flow-field', OrbuxFlowField);
}

declare global {
  interface HTMLElementTagNameMap {
    'orbux-flow-field': OrbuxFlowField;
  }
}

// Generated by scripts/generate-recipe-catalog.mjs. Edit recipe-catalog.json or generated-loader.ts instead.
import { defineGeneratedLoader } from '../generated-loader.js';

/** Fold Beacon: beacon geometry driven by the fold motion recipe. */
export const OrbuxFoldBeacon = defineGeneratedLoader('fold-beacon');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-fold-beacon': InstanceType<typeof OrbuxFoldBeacon>;
  }
}

// Generated by scripts/generate-recipe-catalog.mjs. Edit recipe-catalog.json or generated-loader.ts instead.
import { defineGeneratedLoader } from '../generated-loader.js';

/** Fold Beads: beads geometry driven by the fold motion recipe. */
export const OrbuxFoldBeads = defineGeneratedLoader('fold-beads');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-fold-beads': InstanceType<typeof OrbuxFoldBeads>;
  }
}

// Generated by scripts/generate-recipe-catalog.mjs. Edit recipe-catalog.json or generated-loader.ts instead.
import { defineGeneratedLoader } from '../generated-loader.js';

/** Fold Bloom: bloom geometry driven by the fold motion recipe. */
export const OrbuxFoldBloom = defineGeneratedLoader('fold-bloom');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-fold-bloom': InstanceType<typeof OrbuxFoldBloom>;
  }
}

// Generated by scripts/generate-recipe-catalog.mjs. Edit recipe-catalog.json or generated-loader.ts instead.
import { defineGeneratedLoader } from '../generated-loader.js';

/** Fold Cascade: cascade geometry driven by the fold motion recipe. */
export const OrbuxFoldCascade = defineGeneratedLoader('fold-cascade');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-fold-cascade': InstanceType<typeof OrbuxFoldCascade>;
  }
}

// Generated by scripts/generate-recipe-catalog.mjs. Edit recipe-catalog.json or generated-loader.ts instead.
import { defineGeneratedLoader } from '../generated-loader.js';

/** Fold Columns: columns geometry driven by the fold motion recipe. */
export const OrbuxFoldColumns = defineGeneratedLoader('fold-columns');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-fold-columns': InstanceType<typeof OrbuxFoldColumns>;
  }
}

// Generated by scripts/generate-recipe-catalog.mjs. Edit recipe-catalog.json or generated-loader.ts instead.
import { defineGeneratedLoader } from '../generated-loader.js';

/** Fold Filament: filament geometry driven by the fold motion recipe. */
export const OrbuxFoldFilament = defineGeneratedLoader('fold-filament');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-fold-filament': InstanceType<typeof OrbuxFoldFilament>;
  }
}

// Generated by scripts/generate-recipe-catalog.mjs. Edit recipe-catalog.json or generated-loader.ts instead.
import { defineGeneratedLoader } from '../generated-loader.js';

/** Fold Glyph: glyph geometry driven by the fold motion recipe. */
export const OrbuxFoldGlyph = defineGeneratedLoader('fold-glyph');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-fold-glyph': InstanceType<typeof OrbuxFoldGlyph>;
  }
}

// Generated by scripts/generate-recipe-catalog.mjs. Edit recipe-catalog.json or generated-loader.ts instead.
import { defineGeneratedLoader } from '../generated-loader.js';

/** Fold Halo: halo geometry driven by the fold motion recipe. */
export const OrbuxFoldHalo = defineGeneratedLoader('fold-halo');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-fold-halo': InstanceType<typeof OrbuxFoldHalo>;
  }
}

// Generated by scripts/generate-recipe-catalog.mjs. Edit recipe-catalog.json or generated-loader.ts instead.
import { defineGeneratedLoader } from '../generated-loader.js';

/** Fold Helix: helix geometry driven by the fold motion recipe. */
export const OrbuxFoldHelix = defineGeneratedLoader('fold-helix');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-fold-helix': InstanceType<typeof OrbuxFoldHelix>;
  }
}

// Generated by scripts/generate-recipe-catalog.mjs. Edit recipe-catalog.json or generated-loader.ts instead.
import { defineGeneratedLoader } from '../generated-loader.js';

/** Fold Matrix: matrix geometry driven by the fold motion recipe. */
export const OrbuxFoldMatrix = defineGeneratedLoader('fold-matrix');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-fold-matrix': InstanceType<typeof OrbuxFoldMatrix>;
  }
}

// Generated by scripts/generate-recipe-catalog.mjs. Edit recipe-catalog.json or generated-loader.ts instead.
import { defineGeneratedLoader } from '../generated-loader.js';

/** Fold Mesh: mesh geometry driven by the fold motion recipe. */
export const OrbuxFoldMesh = defineGeneratedLoader('fold-mesh');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-fold-mesh': InstanceType<typeof OrbuxFoldMesh>;
  }
}

// Generated by scripts/generate-recipe-catalog.mjs. Edit recipe-catalog.json or generated-loader.ts instead.
import { defineGeneratedLoader } from '../generated-loader.js';

/** Fold Portal: portal geometry driven by the fold motion recipe. */
export const OrbuxFoldPortal = defineGeneratedLoader('fold-portal');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-fold-portal': InstanceType<typeof OrbuxFoldPortal>;
  }
}

// Generated by scripts/generate-recipe-catalog.mjs. Edit recipe-catalog.json or generated-loader.ts instead.
import { defineGeneratedLoader } from '../generated-loader.js';

/** Fold Prism: prism geometry driven by the fold motion recipe. */
export const OrbuxFoldPrism = defineGeneratedLoader('fold-prism');

declare global {
  interface HTMLElementTagNameMap {
    'orbux-fold-prism': InstanceType<typeof OrbuxFoldPrism>;
  }
}