@appinternalleads/ui 0.4.0 → 0.4.1

package/src/motion/neon/artwork.ts

@@ -0,0 +1,95 @@
+/**
+ * **Artwork for neon: SVG in, clean vector geometry out.** A user's or an agent's SVG is parsed
+ * (no DOM needed, so it works on a server and in tests) and reduced to shapes only — `path`,
+ * `circle`, `ellipse`, `rect`, `line`, `polyline`, `polygon`, nested in `g` — with geometry and
+ * transform attributes only. Fills, strokes, styles, ids, links, scripts, event handlers, images and
+ * text are dropped. The neon renderer then paints that geometry as tubes, exactly like letters.
+ *
+ * Also a small built-in library of line drawings made for neon (heart, star, bolt, …), drawn as
+ * single tube paths on a 100-unit square.
+ */
+export type SvgNode = { tag: SvgTag; attrs: Record<string, string>; children: SvgNode[] };
+export type SvgTag = 'g' | 'path' | 'circle' | 'ellipse' | 'rect' | 'line' | 'polyline' | 'polygon';
+export type ParsedSvg = { viewBox: [number, number, number, number]; nodes: SvgNode[]; shapes: number };
+
+const SHAPES = new Set<string>(['path', 'circle', 'ellipse', 'rect', 'line', 'polyline', 'polygon']);
+const CONTAINERS = new Set<string>(['g', 'a', 'switch']);
+const SKIP = new Set<string>(['defs', 'style', 'script', 'title', 'desc', 'metadata', 'clippath', 'mask', 'pattern', 'lineargradient', 'radialgradient', 'filter', 'symbol', 'marker', 'text', 'foreignobject', 'image', 'use']);
+const ATTRS = new Set(['d', 'cx', 'cy', 'r', 'rx', 'ry', 'x', 'y', 'width', 'height', 'x1', 'y1', 'x2', 'y2', 'points', 'transform', 'fill-rule']);
+/* Attribute values must be geometry: numbers, path commands, transform functions. Nothing else survives. */
+const SAFE_VALUE = /^[\s\d.,eE+\-MmLlHhVvCcSsQqTtAaZz()a-z%]*$/;
+const SAFE_TRANSFORM = /^\s*((matrix|translate|scale|rotate|skewX|skewY)\s*\([\d\s.,eE+-]*\)\s*,?\s*)*$/;
+
+function parseAttrs(src: string): Record<string, string> {
+  const out: Record<string, string> = {};
+  for (const m of src.matchAll(/([a-zA-Z_:][\w:.-]*)\s*=\s*("([^"]*)"|'([^']*)')/g)) out[m[1]!.toLowerCase()] = m[3] ?? m[4] ?? '';
+  return out;
+}
+
+const MAX_SVG_BYTES = 500_000;
+const MAX_NODES = 2000;
+
+/** Parses an SVG string into safe geometry. Throws `Error` with a plain message when there is nothing to draw. */
+export function parseSvgArtwork(svg: string): ParsedSvg {
+  if (typeof svg !== 'string' || !svg.trim()) throw new Error('The SVG is empty.');
+  if (svg.length > MAX_SVG_BYTES) throw new Error(`The SVG is larger than ${MAX_SVG_BYTES / 1000} kB.`);
+  const clean = svg.replace(/<!--[\s\S]*?-->/g, '').replace(/<!\[CDATA\[[\s\S]*?\]\]>/g, '').replace(/<![^>]*>/g, '').replace(/<\?[\s\S]*?\?>/g, '');
+  const root: SvgNode = { tag: 'g', attrs: {}, children: [] };
+  const stack: { node: SvgNode | null; tag: string }[] = [{ node: root, tag: '#root' }];
+  let viewBox: [number, number, number, number] | null = null;
+  let count = 0;
+  let shapes = 0;
+  for (const m of clean.matchAll(/<(\/?)([a-zA-Z][\w:.-]*)((?:\s+[^\s=>/]+\s*=\s*(?:"[^"]*"|'[^']*'))*)\s*(\/?)>/g)) {
+    const [, close, rawTag, rawAttrs, selfClose] = m;
+    const tag = rawTag!.toLowerCase().replace(/^svg:/, '');
+    if (close) {
+      while (stack.length > 1) { const top = stack.pop()!; if (top.tag === tag) break; }
+      continue;
+    }
+    const parent = stack[stack.length - 1]!.node;
+    const attrs = parseAttrs(rawAttrs ?? '');
+    if (tag === 'svg' && !viewBox) {
+      const vb = (attrs.viewbox ?? '').trim().split(/[\s,]+/).map(Number);
+      if (vb.length === 4 && vb.every(Number.isFinite) && vb[2]! > 0 && vb[3]! > 0) viewBox = vb as [number, number, number, number];
+      else {
+        const w = parseFloat(attrs.width ?? '');
+        const h = parseFloat(attrs.height ?? '');
+        if (w > 0 && h > 0) viewBox = [0, 0, w, h];
+      }
+    }
+    /* <svg> itself is transparent: its children join the parent. */
+    if (tag === 'svg') { if (!selfClose) stack.push({ node: parent, tag }); continue; }
+    let node: SvgNode | null = null;
+    if (parent && !SKIP.has(tag) && (SHAPES.has(tag) || CONTAINERS.has(tag)) && count < MAX_NODES) {
+      const kept: Record<string, string> = {};
+      for (const [k, v] of Object.entries(attrs)) {
+        if (!ATTRS.has(k)) continue;
+        if (k === 'transform' ? !SAFE_TRANSFORM.test(v) : !SAFE_VALUE.test(v)) continue;
+        if (CONTAINERS.has(tag) && k !== 'transform') continue;
+        kept[k] = v;
+      }
+      node = { tag: SHAPES.has(tag) ? (tag as SvgTag) : 'g', attrs: kept, children: [] };
+      parent.children.push(node);
+      count++;
+      if (SHAPES.has(tag)) shapes++;
+    }
+    if (!selfClose && !SHAPES.has(tag)) stack.push({ node: SKIP.has(tag) ? null : node, tag });
+    else if (!selfClose && SHAPES.has(tag)) stack.push({ node: null, tag });
+  }
+  if (!shapes) throw new Error('The SVG has no shapes to bend into tubes (paths, circles, rects, lines or polygons).');
+  return { viewBox: viewBox ?? [0, 0, 100, 100], nodes: root.children, shapes };
+}
+
+/** Built-in neon line art on a 100-unit square: each is one or two continuous tubes. */
+export const NEON_ARTWORK_LIBRARY: Record<string, { name: string; svg: string }> = {
+  heart: { name: 'Heart', svg: '<svg viewBox="0 0 100 100"><path d="M50 84 C22 64 8 48 12 32 C16 17 35 13 45 24 C48 27 49 30 50 33 C51 30 52 27 55 24 C65 13 84 17 88 32 C92 48 78 64 50 84 Z"/></svg>' },
+  star: { name: 'Star', svg: '<svg viewBox="0 0 100 100"><polygon points="50,9 61,37 91,38 67,57 76,87 50,70 24,87 33,57 9,38 39,37"/></svg>' },
+  bolt: { name: 'Lightning', svg: '<svg viewBox="0 0 100 100"><path d="M60 7 L26 55 L49 55 L40 93 L75 42 L52 42 Z"/></svg>' },
+  moon: { name: 'Moon', svg: '<svg viewBox="0 0 100 100"><path d="M64 12 C40 16 26 35 28 55 C30 76 50 90 72 87 C56 80 45 66 45 49 C45 33 52 20 64 12 Z"/></svg>' },
+  sparkle: { name: 'Sparkle', svg: '<svg viewBox="0 0 100 100"><path d="M50 8 C54 38 62 46 92 50 C62 54 54 62 50 92 C46 62 38 54 8 50 C38 46 46 38 50 8 Z"/></svg>' },
+  note: { name: 'Music note', svg: '<svg viewBox="0 0 100 100"><path d="M38 74 C38 83 21 86 19 77 C17 69 33 64 38 71 L38 20 L80 11 L80 64 C80 73 63 76 61 67 C59 59 75 54 80 61"/><path d="M38 31 L80 22"/></svg>' },
+  arrow: { name: 'Arrow', svg: '<svg viewBox="0 0 100 100"><path d="M10 50 L84 50"/><path d="M62 28 L86 50 L62 72"/></svg>' },
+  cocktail: { name: 'Cocktail', svg: '<svg viewBox="0 0 100 100"><path d="M18 18 L82 18 L50 54 Z"/><path d="M50 54 L50 86 M32 86 L68 86"/><circle cx="70" cy="12" r="7"/></svg>' },
+  rocket: { name: 'Rocket', svg: '<svg viewBox="0 0 100 100"><path d="M50 8 C66 22 70 44 64 66 L36 66 C30 44 34 22 50 8 Z"/><circle cx="50" cy="36" r="7"/><path d="M36 54 L24 72 L36 68 M64 54 L76 72 L64 68 M44 74 L50 90 L56 74"/></svg>' },
+  crown: { name: 'Crown', svg: '<svg viewBox="0 0 100 100"><path d="M14 74 L10 30 L32 50 L50 20 L68 50 L90 30 L86 74 Z"/><path d="M16 84 L84 84"/></svg>' },
+};

package/src/motion/neon/audio.ts

@@ -0,0 +1,162 @@
+import type { NeonAudioConfig, NeonCueKind } from './scene';
+import { NEON_SOUND_IDS, synthesizeNeonSound, type NeonSoundId } from './synth';
+
+/**
+ * **The neon sound engine (Web Audio).** One looping hum whose loudness follows the tube's live
+ * brightness — it sags in a dip, drops out in a failure and swells back on the re-strike — and
+ * one-shot sounds for flicker, dip, failure, glitch and recovery, each on its own mixer channel.
+ *
+ * - Sounds come from `sources` (URLs of local files; the site ships WAVs) or, if a source is
+ *   missing or fails, are synthesised in the browser (`synthesizeNeonSound`), so it always works.
+ * - Browsers only start audio from a user gesture: call `start()` from a click.
+ * - Scrubbing: `play(kind, { scrub: true })` is throttled to one sound per 140 ms, so dragging a
+ *   timeline never fires dozens at once. Every sound is also rate-limited per kind (60 ms).
+ * - Mixer changes apply immediately (short ramps, no clicks).
+ */
+export type NeonAudioState = 'idle' | 'starting' | 'running' | 'unsupported' | 'error';
+const KIND_TO_SOUND: Partial<Record<NeonCueKind, NeonSoundId>> = { flicker: 'flicker', dip: 'dip', failure: 'failure', glitch: 'glitch', restore: 'restore' };
+const KIND_TO_CHANNEL: Record<NeonSoundId, keyof NeonAudioConfig> = { hum: 'hum', flicker: 'flicker', dip: 'dip', failure: 'failure', glitch: 'glitch', restore: 'recovery' };
+
+type Ctx = AudioContext;
+
+export class NeonAudioEngine {
+  private ctx: Ctx | null = null;
+  private master: GainNode | null = null;
+  private humGain: GainNode | null = null;
+  private hum: AudioBufferSourceNode | null = null;
+  private buffers = new Map<NeonSoundId, AudioBuffer>();
+  private mix: NeonAudioConfig | null = null;
+  private brightness = 1;
+  private last = new Map<string, number>();
+  private lastScrub = 0;
+  private voices = 0;
+  state: NeonAudioState = 'idle';
+  error: string | null = null;
+
+  constructor(private readonly sources: Partial<Record<NeonSoundId, string>> = {}) {}
+
+  static supported(): boolean {
+    return typeof globalThis !== 'undefined' && typeof (globalThis as { AudioContext?: unknown }).AudioContext === 'function';
+  }
+
+  /** Create the audio graph and load the sounds. Call from a user gesture. */
+  async start(mix: NeonAudioConfig): Promise<void> {
+    this.mix = mix;
+    if (this.state === 'running' || this.state === 'starting') { this.applyMix(); return; }
+    if (!NeonAudioEngine.supported()) { this.state = 'unsupported'; return; }
+    this.state = 'starting';
+    try {
+      const ctx = new AudioContext();
+      this.ctx = ctx;
+      if (ctx.state === 'suspended') await ctx.resume();
+      this.master = ctx.createGain();
+      this.master.gain.value = 0;
+      this.master.connect(ctx.destination);
+      this.humGain = ctx.createGain();
+      this.humGain.gain.value = 0;
+      this.humGain.connect(this.master);
+      await Promise.all(NEON_SOUND_IDS.map((id) => this.load(id)));
+      this.startHum();
+      this.state = 'running';
+      this.applyMix();
+    } catch (err) {
+      this.state = 'error';
+      this.error = (err as Error).message;
+    }
+  }
+
+  private async load(id: NeonSoundId) {
+    const ctx = this.ctx!;
+    const url = this.sources[id];
+    if (url) {
+      try {
+        const res = await fetch(url);
+        if (!res.ok) throw new Error(`${res.status}`);
+        this.buffers.set(id, await ctx.decodeAudioData(await res.arrayBuffer()));
+        return;
+      } catch { /* fall through to synthesis */ }
+    }
+    const data = synthesizeNeonSound(id, ctx.sampleRate);
+    const buf = ctx.createBuffer(1, data.length, ctx.sampleRate);
+    buf.getChannelData(0).set(data);
+    this.buffers.set(id, buf);
+  }
+
+  private startHum() {
+    const ctx = this.ctx!;
+    const buf = this.buffers.get('hum');
+    if (!buf || !this.humGain) return;
+    const src = ctx.createBufferSource();
+    src.buffer = buf;
+    src.loop = true;
+    src.connect(this.humGain);
+    src.start();
+    this.hum = src;
+  }
+
+  private ramp(param: AudioParam, value: number, seconds = 0.03) {
+    const ctx = this.ctx;
+    if (!ctx) return;
+    param.cancelScheduledValues(ctx.currentTime);
+    param.setTargetAtTime(value, ctx.currentTime, seconds);
+  }
+
+  private applyMix() {
+    const m = this.mix;
+    if (!m || !this.master || !this.humGain) return;
+    this.ramp(this.master.gain, m.enabled && !m.muted ? m.master : 0);
+    this.ramp(this.humGain.gain, m.hum * Math.pow(Math.max(0, Math.min(1.1, this.brightness)), 1.6), 0.015);
+  }
+
+  /** New mixer settings: applied immediately. */
+  setMix(mix: NeonAudioConfig) {
+    this.mix = mix;
+    this.applyMix();
+  }
+
+  /** The tube's live brightness (0…~1.05): the hum follows it. */
+  setBrightness(b: number) {
+    if (!Number.isFinite(b)) return;
+    this.brightness = b;
+    if (this.humGain && this.mix) this.ramp(this.humGain.gain, this.mix.hum * Math.pow(Math.max(0, Math.min(1.1, b)), 1.6), 0.012);
+  }
+
+  /** Play a cue's sound. `depth` (0…1) scales it; `scrub` uses the scrub volume and throttle. */
+  play(kind: NeonCueKind, opts: { depth?: number; scrub?: boolean } = {}) {
+    const ctx = this.ctx;
+    const m = this.mix;
+    const id = KIND_TO_SOUND[kind];
+    if (!ctx || !m || !id || !this.master || this.state !== 'running' || !m.enabled || m.muted) return;
+    const now = performance.now();
+    if (opts.scrub) {
+      if (!m.scrub || now - this.lastScrub < 140) return;
+      this.lastScrub = now;
+    }
+    if (now - (this.last.get(id) ?? -1e9) < 60 || this.voices >= 8) return;
+    this.last.set(id, now);
+    const buf = this.buffers.get(id);
+    if (!buf) return;
+    const vol = (m[KIND_TO_CHANNEL[id]] as number) * (opts.scrub ? m.scrubVolume : 1) * (0.55 + 0.45 * Math.max(0, Math.min(1, opts.depth ?? 1)));
+    if (vol <= 0.001) return;
+    const src = ctx.createBufferSource();
+    src.buffer = buf;
+    src.playbackRate.value = 0.96 + 0.08 * Math.random();
+    const g = ctx.createGain();
+    g.gain.value = vol;
+    src.connect(g).connect(this.master);
+    this.voices++;
+    src.onended = () => { this.voices = Math.max(0, this.voices - 1); g.disconnect(); };
+    src.start();
+  }
+
+  async stop() {
+    try { this.hum?.stop(); } catch { /* already stopped */ }
+    this.hum = null;
+    const ctx = this.ctx;
+    this.ctx = null;
+    this.master = null;
+    this.humGain = null;
+    this.state = 'idle';
+    if (ctx) await ctx.close().catch(() => undefined);
+  }
+}