@actioneer/ads 0.3.1 → 0.5.0

package/theme.css

@@ -2,7 +2,7 @@
 /*
  * ============================================================
  *  ADS 1.0 — Design Tokens
- *  Brand: BLACK · Typeface: Aribau Grotesk (Regular + Bold)
+ *  Brand: Sage (green) · Neutrals: warm greige · Typeface: Aribau Grotesk
  * ============================================================
  */
 @theme {
@@ -40,25 +40,44 @@
   --text-2xl: 1.625rem;    /* 26px — display */
   --text-2xl--line-height: 2rem;
 
-  /* ---- Ink scale (the black brand ramp) ---- */
-  --color-ink-50: #f6f6f7;
-  --color-ink-100: #ececed;
-  --color-ink-200: #d9d9dc;
-  --color-ink-300: #b8b8bd;
-  --color-ink-400: #8f8f96;
-  --color-ink-500: #6e6e75;
-  --color-ink-600: #55555b;
-  --color-ink-700: #3f3f44;
-  --color-ink-800: #262629;
-  --color-ink-900: #161618;
-  --color-ink-950: #0a0a0b;
+  /* ---- Neutral ramp — warm greige (the workhorse: backgrounds, surfaces,
+     text, borders). Kept a touch warm so it sits with Sage without turning
+     green — one family, not colour plus grey. The `ink` name is retained so
+     every existing reference resolves; the values are now greige. ---- */
+  --color-ink-50: #f2f2ed;
+  --color-ink-100: #e7e7e1;
+  --color-ink-200: #d8d7cf;
+  --color-ink-300: #c7c6be;
+  --color-ink-400: #a8a79e;
+  --color-ink-500: #8c8c84;
+  --color-ink-600: #6b6b63;
+  --color-ink-700: #4a4a44;
+  --color-ink-800: #33322e;
+  --color-ink-900: #26251f;
+  --color-ink-950: #1a1a17;
+
+  /* ---- Brand ramp — Sage (one green hue: brand, primary actions, focal
+     data). 600 is the primary. On a white/greige ground, colour earns its
+     place — the eye always knows where to look. ---- */
+  --color-sage-50: #eff5ea;
+  --color-sage-100: #dde8cf;
+  --color-sage-200: #a9ce86;
+  --color-sage-300: #8abb6a;
+  --color-sage-400: #6da24e;
+  --color-sage-500: #548c41;
+  --color-sage-600: #3f7a34;
+  --color-sage-700: #2c5724;
+  --color-sage-800: #254a1d;
+  --color-sage-900: #1e3a16;
 
   /* ---- Semantic accent ramps ---- */
-  --color-success-50: #f0fdf4;
-  --color-success-100: #dcfce7;
-  --color-success-500: #22c55e;
-  --color-success-600: #16a34a;
-  --color-success-700: #15803d;
+  /* Success — shifted cooler (emerald/teal) so positive states stay clearly
+     distinct from the warm Sage brand green. */
+  --color-success-50: #ecfdf5;
+  --color-success-100: #d1fae5;
+  --color-success-500: #10b981;
+  --color-success-600: #059669;
+  --color-success-700: #047857;
 
   --color-warning-50: #fffaeb;
   --color-warning-100: #fef0c7;
@@ -78,6 +97,19 @@
   --color-info-600: #1570ef;
   --color-info-700: #175cd3;
 
+  /* ---- Data-viz accents ---- three small ramps for charts & illustration.
+     deep = text/lines · base = fills · soft = backgrounds. Separate from the
+     semantic status ramps above; these are the "focal data" companions to Sage. */
+  --color-cyan-soft: #c7efe9;  /* Cyan — vivid cool contrast; 2nd series, links */
+  --color-cyan-base: #12b5a5;
+  --color-cyan-deep: #0a7e82;
+  --color-lime-soft: #e4efcf;  /* Lichen lime — energetic pop from the mark */
+  --color-lime-base: #a3c765;
+  --color-lime-deep: #6e8f30;
+  --color-amber-soft: #fce6c0; /* Amber — warm pop; highlights, "new" */
+  --color-amber-base: #f3a72e;
+  --color-amber-deep: #b57414;
+
   /* ---- Radii ---- */
   --radius-xs: 0.25rem;
   --radius-sm: 0.375rem;
@@ -95,8 +127,8 @@
   /* ---- Elevation ---- ONE soft token (Claude-panel style).
      Delineate surfaces with fill color first; add this to gently lift them. */
   --shadow-elevation: 0 0 0 1px rgb(10 10 11 / 0.03),
-    0 1px 2px 0 rgb(10 10 11 / 0.05),
-    0 8px 24px -6px rgb(10 10 11 / 0.12);
+    0 1px 2px 0 rgb(10 10 11 / 0.04),
+    0 8px 28px -8px rgb(10 10 11 / 0.09);
 
   /* ---- CTA inner glow ---- luminous inset highlight for primary buttons
      (adapted from the "AI button" Figma): a crisp top-edge catch plus a soft
@@ -174,12 +206,16 @@
  * every comparison series survives production builds.
  */
 :root {
-  --color-chart-1: var(--color-ink-950);
-  --color-chart-2: var(--color-ink-400);
-  --color-chart-3: var(--color-ink-300);
-  --color-chart-4: var(--color-info-500);
-  --color-chart-5: var(--color-warning-500);
-  --color-chart-6: var(--color-success-500);
+  /* Data-series palette — Sage (brand) leads as the focal/primary series,
+     then the three data-viz accents and two deep variants for extended
+     series. Explicit hexes (not var()) so every series survives @theme
+     pruning, since chart colours are referenced from SVG prop strings. */
+  --color-chart-1: #3f7a34; /* sage — primary / focal series */
+  --color-chart-2: #12b5a5; /* cyan base */
+  --color-chart-3: #f3a72e; /* amber base */
+  --color-chart-4: #a3c765; /* lichen lime base */
+  --color-chart-5: #0a7e82; /* cyan deep */
+  --color-chart-6: #b57414; /* amber deep */
 }
 
 /*
@@ -205,7 +241,7 @@
   --color-card: var(--card);
   --color-card-foreground: var(--card-foreground);
 
-  /* Brand (black) — used for solid fills, not body text */
+  /* Brand (Sage green) — used for solid fills / primary actions, not body text */
   --color-brand: var(--brand);
   --color-brand-foreground: var(--brand-foreground);
   --color-brand-hover: var(--brand-hover);
@@ -247,39 +283,39 @@
 
 /* ---- Theme (light only) ---- */
 :root {
-  --background: #ffffff;
-  --foreground: #0a0a0b;
+  --background: #f7f7f3;
+  --foreground: #1a1a17;
 
-  /* Text hierarchy — accessible on #ffffff */
-  --text-primary: #0a0a0b;   /* ~20:1  AAA */
-  --text-secondary: #52525b; /* ~7.6:1 AAA */
-  --text-tertiary: #6e6e75;  /* ~5.2:1 AA  */
+  /* Text hierarchy — accessible on the warm greige canvas */
+  --text-primary: #1a1a17;   /* ~17:1  AAA */
+  --text-secondary: #4a4a44; /* ~8.5:1 AAA */
+  --text-tertiary: #6b6b63;  /* ~4.8:1 AA  */
 
-  --surface: #f6f6f7;
-  --surface-foreground: #262629;
+  --surface: #f2f2ed;        /* warm greige — the tinted canvas */
+  --surface-foreground: #33322e;
   --elevated: #ffffff;
 
-  --muted: #f6f6f7;
-  --muted-foreground: #6e6e75;
+  --muted: #e7e7e1;
+  --muted-foreground: #6b6b63;
 
   --card: #ffffff;
-  --card-foreground: #0a0a0b;
+  --card-foreground: #1a1a17;
 
-  /* BLACK brand */
-  --brand: #0a0a0b;
+  /* Sage brand (green) — primary actions, focal moments */
+  --brand: #3f7a34;
   --brand-foreground: #ffffff;
-  --brand-hover: #262629;
+  --brand-hover: #2c5724;
 
   /* Quiet fill */
-  --fill: #ececed;
-  --fill-foreground: #161618;
+  --fill: #e7e7e1;
+  --fill-foreground: #1a1a17;
 
-  --accent: #f6f6f7;
-  --accent-foreground: #161618;
+  --accent: #edece6;
+  --accent-foreground: #1a1a17;
 
-  --border: #ececed;
-  --border-strong: #d9d9dc;
-  --input: #d9d9dc;
-  --ring: rgb(10 10 11 / 0.35);
-  --overlay: rgb(10 10 11 / 0.5);
+  --border: #e7e7e1;
+  --border-strong: #c7c6be;
+  --input: #c7c6be;
+  --ring: rgb(63 122 52 / 0.5);
+  --overlay: rgb(26 26 23 / 0.5);
 }

package/components/agents-ui/agent-audio-visualizer-aura.d.ts

@@ -1,11 +0,0 @@
-import { VoiceVisualizerColor, VoiceVisualizerDriver } from '../../hooks/agents-ui/voice-visualizer-types';
-import * as React from "react";
-export interface AgentAudioVisualizerAuraProps extends Omit<React.ComponentPropsWithoutRef<"div">, "color">, VoiceVisualizerDriver {
-    /** Normalized RGB shader color. */
-    color?: VoiceVisualizerColor;
-    /** Hue variation across aura layers. */
-    colorShift?: number;
-    themeMode?: "dark" | "light";
-}
-/** Internal ADS port of LiveKit Agents UI's Aura visualizer. */
-export declare const AgentAudioVisualizerAura: React.ForwardRefExoticComponent<AgentAudioVisualizerAuraProps & React.RefAttributes<HTMLDivElement>>;

package/components/agents-ui/agent-audio-visualizer-aura.js

@@ -1,277 +0,0 @@
-"use client";
-import { jsx as d } from "react/jsx-runtime";
-import * as x from "react";
-import { ReactShaderToy as y } from "./react-shader-toy.js";
-import { useAgentAudioVisualizerAura as b } from "../../hooks/agents-ui/use-agent-audio-visualizer-aura.js";
-import { cn as S } from "../../lib/cn.js";
-const h = [0.122, 0.835, 0.976], A = `
-const float TAU = 6.283185;
-
-// Noise for dithering
-vec2 randFibo(vec2 p) {
-  p = fract(p * vec2(443.897, 441.423));
-  p += dot(p, p.yx + 19.19);
-  return fract((p.xx + p.yx) * p.xy);
-}
-
-// Tonemap
-vec3 Tonemap(vec3 x) {
-  x *= 4.0;
-  return x / (1.0 + x);
-}
-
-// Luma for alpha
-float luma(vec3 color) {
-  return dot(color, vec3(0.299, 0.587, 0.114));
-}
-
-// RGB to HSV
-vec3 rgb2hsv(vec3 c) {
-  vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
-  vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));
-  vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));
-  float d = q.x - min(q.w, q.y);
-  float e = 1.0e-10;
-  return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);
-}
-
-// HSV to RGB
-vec3 hsv2rgb(vec3 c) {
-  vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
-  vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
-  return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
-}
-
-// SDF shapes
-float sdCircle(vec2 st, float r) {
-  return length(st) - r;
-}
-
-float sdLine(vec2 p, float r) {
-  float halfLen = r * 2.0;
-  vec2 a = vec2(-halfLen, 0.0);
-  vec2 b = vec2(halfLen, 0.0);
-  vec2 pa = p - a;
-  vec2 ba = b - a;
-  float h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0);
-  return length(pa - ba * h);
-}
-
-float getSdf(vec2 st) {
-  if(uShape == 1.0) return sdCircle(st, uScale);
-  else if(uShape == 2.0) return sdLine(st, uScale);
-  return sdCircle(st, uScale); // Default
-}
-
-vec2 turb(vec2 pos, float t, float it) {
-  // Initial rotation matrix for swirl direction
-  mat2 rotation = mat2(0.6, -0.25, 0.25, 0.9);
-  // Secondary rotation applied each iteration (approx 53 degree rotation)
-  mat2 layerRotation = mat2(0.6, -0.8, 0.8, 0.6);
-  
-  float frequency = mix(2.0, 15.0, uFrequency);
-  float amplitude = uAmplitude;
-  float frequencyGrowth = 1.4;
-  float animTime = t * 0.1 * uSpeed;
-  
-  const int LAYERS = 4;
-  for(int i = 0; i < LAYERS; i++) {
-    // Calculate wave displacement for this layer
-    vec2 rotatedPos = pos * rotation;
-    vec2 wave = sin(frequency * rotatedPos + float(i) * animTime + it);
-    
-    // Apply displacement along rotation direction
-    pos += (amplitude / frequency) * rotation[0] * wave;
-    
-    // Evolve parameters for next layer
-    rotation *= layerRotation;
-    amplitude *= mix(1.0, max(wave.x, wave.y), uVariance);
-    frequency *= frequencyGrowth;
-  }
-
-  return pos;
-}
-
-const float ITERATIONS = 36.0;
-
-void mainImage(out vec4 fragColor, in vec2 fragCoord) {
-  vec2 uv = fragCoord / iResolution.xy;
-  
-  vec3 pp = vec3(0.0);
-  vec3 bloom = vec3(0.0);
-  float t = iTime * 0.5;
-  vec2 pos = uv - 0.5;
-      
-  vec2 prevPos = turb(pos, t, 0.0 - 1.0 / ITERATIONS);
-  float spacing = mix(1.0, TAU, uSpacing);
-
-  for(float i = 1.0; i < ITERATIONS + 1.0; i++) {
-    float iter = i / ITERATIONS;
-    vec2 st = turb(pos, t, iter * spacing);
-    float d = abs(getSdf(st));
-    float pd = distance(st, prevPos);
-    prevPos = st;
-    float dynamicBlur = exp2(pd * 2.0 * 1.4426950408889634) - 1.0;
-    float ds = smoothstep(0.0, uBlur * 0.05 + max(dynamicBlur * uSmoothing, 0.001), d);
-    
-    // Shift color based on iteration using uColorScale
-    vec3 color = uColor;
-    if(uColorShift > 0.01) {
-      vec3 hsv = rgb2hsv(color);
-      // Shift hue by iteration
-      hsv.x = fract(hsv.x + (1.0 - iter) * uColorShift * 0.3); 
-      color = hsv2rgb(hsv);
-    }
-    
-    float invd = 1.0 / max(d + dynamicBlur, 0.001);
-    pp += (ds - 1.0) * color;
-    bloom += clamp(invd, 0.0, 250.0) * color;
-  }
-
-  pp *= 1.0 / ITERATIONS;
-  
-  vec3 color;
-  
-  // Dark mode (default)
-  if(uMode < 0.5) {
-    // use bloom effect
-    bloom = bloom / (bloom + 2e4);
-    color = (-pp + bloom * 3.0 * uBloom) * 1.2;
-    color += (randFibo(fragCoord).x - 0.5) / 255.0;
-    color = Tonemap(color);
-    float alpha = luma(color) * uMix;
-    fragColor = vec4(color * uMix, alpha);
-  }
-    
-  // Light mode 
-  else {
-    // no bloom effect
-    color = -pp;
-    color += (randFibo(fragCoord).x - 0.5) / 255.0;
-  
-    // Preserve hue by tone mapping brightness only
-    float brightness = length(color);
-    vec3 direction = brightness > 0.0 ? color / brightness : color;
-  
-    // Reinhard on brightness
-    float factor = 2.0;
-    float mappedBrightness = (brightness * factor) / (1.0 + brightness * factor);
-    color = direction * mappedBrightness;
-    
-    // Boost saturation to compensate for white background bleed-through
-    // When alpha < 1.0, white bleeds through making colors look desaturated
-    // So we increase saturation to maintain vibrant appearance
-    float gray = dot(color, vec3(0.2, 0.5, 0.1));
-    float saturationBoost = 3.0;
-    color = mix(vec3(gray), color, saturationBoost);
-    
-    // Clamp between 0-1
-    color = clamp(color, 0.0, 1.0);
-    
-    float alpha = mappedBrightness * clamp(uMix, 1.0, 2.0);
-    fragColor = vec4(color, alpha);
-  }
-}`;
-function g({
-  shape: m = 1,
-  speed: e = 1,
-  amplitude: t = 0.5,
-  frequency: a = 0.5,
-  scale: r = 0.2,
-  blur: l = 1,
-  color: i = h,
-  colorShift: c = 1,
-  brightness: n = 1,
-  themeMode: u = "light",
-  reduced: s = !1,
-  ref: p,
-  className: f,
-  ...v
-}) {
-  return /* @__PURE__ */ d("div", { ref: p, className: f, ...v, children: /* @__PURE__ */ d(
-    y,
-    {
-      fs: A,
-      className: "size-full",
-      devicePixelRatio: 1,
-      paused: s || e === 0,
-      uniforms: {
-        // Aurora wave speed
-        uSpeed: { type: "1f", value: e },
-        // Edge blur/softness
-        uBlur: { type: "1f", value: l },
-        // Shape scale
-        uScale: { type: "1f", value: r },
-        // Shape type: 1=circle, 2=line
-        uShape: { type: "1f", value: m },
-        // Wave frequency and complexity
-        uFrequency: { type: "1f", value: a },
-        // Turbulence amplitude
-        uAmplitude: { type: "1f", value: t },
-        // Light intensity (bloom)
-        uBloom: { type: "1f", value: 0 },
-        // Brightness of the aurora (0-1)
-        uMix: { type: "1f", value: n },
-        // Color variation across layers (0-1)
-        uSpacing: { type: "1f", value: 0.5 },
-        // Color palette offset - shifts colors along the gradient (0-1)
-        uColorShift: { type: "1f", value: c },
-        // Color variation across layers (0-1)
-        uVariance: { type: "1f", value: 0.1 },
-        // Smoothing of the aurora (0-1)
-        uSmoothing: { type: "1f", value: 1 },
-        // Display mode: 0=dark background, 1=light background
-        uMode: { type: "1f", value: u === "light" ? 1 : 0 },
-        // Color
-        uColor: { type: "3fv", value: i }
-      },
-      onError: (o) => {
-        console.error("Shader error:", o);
-      },
-      onWarning: (o) => {
-        console.warn("Shader warning:", o);
-      }
-    }
-  ) });
-}
-g.displayName = "AuraShader";
-const w = x.forwardRef(function({
-  state: e = "idle",
-  volume: t = 0,
-  reduced: a = !1,
-  color: r = h,
-  colorShift: l = 0.05,
-  themeMode: i = "light",
-  className: c,
-  ...n
-}, u) {
-  const { speed: s, scale: p, amplitude: f, frequency: v, brightness: o } = b({
-    state: e,
-    volume: t,
-    reduced: a
-  });
-  return /* @__PURE__ */ d(
-    g,
-    {
-      ref: u,
-      "aria-hidden": !0,
-      "data-state": e,
-      blur: 0.2,
-      color: r,
-      colorShift: l,
-      speed: s,
-      scale: p,
-      themeMode: i,
-      amplitude: f,
-      frequency: v,
-      brightness: o,
-      reduced: a,
-      className: S("size-full", c),
-      ...n
-    }
-  );
-});
-w.displayName = "AgentAudioVisualizerAura";
-export {
-  w as AgentAudioVisualizerAura
-};

package/components/agents-ui/agent-audio-visualizer-wave.d.ts

@@ -1,12 +0,0 @@
-import { VoiceVisualizerColor, VoiceVisualizerDriver } from '../../hooks/agents-ui/voice-visualizer-types';
-import * as React from "react";
-export interface AgentAudioVisualizerWaveProps extends Omit<React.ComponentPropsWithoutRef<"div">, "color">, VoiceVisualizerDriver {
-    /** Normalized RGB shader color. */
-    color?: VoiceVisualizerColor;
-    /** Hue variation toward the outside of the wave. */
-    colorShift?: number;
-    lineWidth?: number;
-    blur?: number;
-}
-/** Internal ADS port of LiveKit Agents UI's Wave visualizer. */
-export declare const AgentAudioVisualizerWave: React.ForwardRefExoticComponent<AgentAudioVisualizerWaveProps & React.RefAttributes<HTMLDivElement>>;