libraries-dev-svelte 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Jakub Antalik
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,48 @@
+# Libraries.dev Svelte Ports
+
+Svelte 5 ports of the Libraries.dev Bot Avatars and Gooey radial plus menu. The implementation is ported from the cloned repository at `C:\Users\admin\Downloads\Libraries.dev`, including the original drawing/animation source, the Bot Avatars internal README, and the `liquid-gooey` source and README.
+
+## Bot Avatars
+
+```svelte
+<script lang="ts">
+  import { BotAvatar, type BotAvatarState } from 'libraries-dev-svelte';
+  let state = $state<BotAvatarState>('working');
+</script>
+
+<BotAvatar type="clover" {state} size={64} />
+```
+
+The port retains all 18 shapes; idle, working and sleeping animation states; eyes and optional state-aware mouth; pointer following and click jumps; `plastic`, `crisp`, `smooth` and `flat` shading; lighting, whirl and jump controls; reduced-motion and paused poses; seed synchronization; accessible labels; and the canvas drawing exports. Canvas properties and native click handlers pass through.
+
+Types, presets, palette, shape paths, simulation, renderer, and plastic-material helpers are exported from the package entry point. See `packages/bot-avatars/README.md` in the source clone for the complete original prop descriptions.
+
+## Gooey radial menu
+
+```svelte
+<script lang="ts">
+  import { GooeyRadialMenu } from 'libraries-dev-svelte';
+</script>
+
+<GooeyRadialMenu blur={6} contrast={18} shadow="0 2px 6px rgba(0, 0, 0, .08)" />
+```
+
+This ports the source `PlusMenu.tsx` demo and the liquid-gooey behavior it uses: filtered merged silhouettes and shadows, a shared animation clock for each button and its SVG blob, stagger and easing controls, close anticipation, theme-aware fill, and the full tuning panel. The normal playground exposes duration and stagger; add `?pro` on `/gooey` for the full controls, copy-values output, and reset.
+
+Props: `blur` (6), `contrast` (18), `fill` (`var(--modal-bg, #fff)`), `shadow` (empty), `pro` (false), and `bare` (false). `bare` renders only the menu stage. The host can set `--modal-bg`, `--btn-text`, `--stage-bg`, `--accent`, and `--hover-veil` to match its theme.
+
+## Demo routes
+
+- `/` — Bot Avatars, including the source showcase and rendering diagnostics.
+- `/gooey` — Gooey radial menu with live blur, contrast, theme, and shadow controls.
+
+## Development
+
+```sh
+bun install
+bun run dev
+bun run check
+bun run build
+```
+
+MIT. Original source: [Libraries.dev](https://github.com/Jakubantalik/Libraries.dev).

package/dist/bot-avatars/BotAvatar.svelte

@@ -0,0 +1,368 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { autoInk, shade } from './color';
+  import { draw, OVERSCAN, RISE, type DrawConfig } from './draw';
+  import { Sim, restPose } from './engine';
+  import { botAvatarPresets, botAvatarStates, stateLabels } from './presets';
+  import { warmPlastic } from './plastic';
+  import { bodyPath } from './path-cache';
+  import { SHAPE_PARTS, SHAPE_PATHS } from './shapes';
+  import { pointer, subscribe } from './ticker';
+  import type { BotAvatarClickEvent, BotAvatarProps, BotAvatarShading, BotAvatarState } from './types';
+
+  let {
+    type = 'clover',
+    face,
+    state: avatarState = 'default',
+    size = 64,
+    color,
+    ink,
+    brightness = 1,
+    saturation = 1.5,
+    speed = 1,
+    paused = false,
+    seed,
+    shading = 'plastic',
+    shadow = 0.35,
+    highlight = 1.3,
+    depth = 0.65,
+    light = 265,
+    rim = 0.5,
+    spread = 1.55,
+    interactive = true,
+    turn = 1,
+    theme = 'auto',
+    whirl = 0,
+    whirlSize = 1,
+    whirlWidth = 1,
+    whirlLength = 1,
+    whirlTilt = 1,
+    jumpHeight = 26,
+    jumpTime = 0.68,
+    jumpStretch = 1,
+    jumpSpin = 1,
+    jumpLean = 6,
+    jumpEvery = 8,
+    jumpLand = 0,
+    jumpSquash = 1.15,
+    jumpSquashTime = 0.37,
+    jumpSquashEase = 'pulse',
+    jumpGroundTime = 0.11,
+    jumpGroundEase = 'pulse',
+    jumpRiseTime = 0.33,
+    jumpRiseEase = 'pulse',
+    jumpClickSquashTime = 0.24,
+    sides = 'auto',
+    class: classAttr,
+    className,
+    style,
+    ref,
+    canvas = $bindable<HTMLCanvasElement | undefined>(undefined),
+    onClick,
+    onclick,
+    'aria-label': ariaLabel,
+    ...rest
+  }: BotAvatarProps = $props();
+
+  let mounted = $state(false);
+  let motionReduced = $state(false);
+  let sim: Sim | null = null;
+  let cfg: DrawConfig | null = null;
+  let cssSize = 0;
+  let instanceSeed = 0;
+  let speedValue = 1;
+  let interactiveValue = true;
+
+  function hashSeed(id: string): number {
+    let hash = 2166136261;
+    for (let i = 0; i < id.length; i++) hash = Math.imul(hash ^ id.charCodeAt(i), 16777619);
+    return ((hash >>> 0) % 1000) / 1000;
+  }
+
+  const clamp = (value: number, lo: number, hi: number) =>
+    Math.min(hi, Math.max(lo, Number.isFinite(value) ? value : 1));
+
+  const preset = $derived(botAvatarPresets[type] ?? botAvatarPresets.clover);
+  const faceKind = $derived(face ?? preset.face);
+  const stateKey = $derived(botAvatarStates.includes(avatarState) ? avatarState : 'default');
+  const frozen = $derived(paused || !(speed > 0));
+  const shadingMode = $derived<BotAvatarShading>(
+    shading === true ? 'crisp' : shading === false ? 'flat' : shading
+  );
+
+  $effect(() => {
+    speedValue = speed;
+    interactiveValue = interactive;
+  });
+
+  function resolveTheme(el: HTMLElement | null): 'dark' | 'light' {
+    if (theme !== 'auto') return theme;
+    const host = el?.closest('[data-theme], .dark, .light') as HTMLElement | null;
+    if (host) {
+      const value = host.getAttribute('data-theme');
+      if (value === 'dark' || value === 'light') return value;
+      if (host.classList.contains('dark')) return 'dark';
+      if (host.classList.contains('light')) return 'light';
+    }
+    return typeof matchMedia === 'function' && matchMedia('(prefers-color-scheme: light)').matches
+      ? 'light'
+      : 'dark';
+  }
+
+  function paint(poseOverride?: ReturnType<typeof restPose>) {
+    const el = canvas;
+    const current = cfg;
+    if (!el || !current || !current.path) return;
+
+    /* A hidden ancestor measures 0: keep the last size rather than wiping the backing store. */
+    const px = el.clientWidth / OVERSCAN || cssSize || (typeof size === 'number' ? size : 64);
+    if (!px) return;
+    const dpr = Math.min(2, (typeof devicePixelRatio === 'number' && devicePixelRatio) || 1);
+    const wanted = Math.round(px * OVERSCAN * dpr);
+    if (el.width !== wanted || el.height !== wanted) {
+      el.width = wanted;
+      el.height = wanted;
+    }
+    cssSize = px;
+    const ctx = el.getContext('2d');
+    if (!ctx) return;
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    current.dpr = dpr;
+    const pose = poseOverride ?? (sim ? sim.pose : restPose(stateKey));
+    draw(ctx, px, pose, current);
+  }
+
+  function applyJump(current: Sim) {
+    current.setJump({
+      height: jumpHeight,
+      time: Math.max(0.2, jumpTime),
+      stretch: jumpStretch,
+      spin: Math.max(0, Math.round(jumpSpin)),
+      lean: jumpLean,
+      every: jumpEvery,
+      land: jumpLand,
+      squash: jumpSquash,
+      squashTime: Math.max(0.05, jumpSquashTime),
+      squashEase: jumpSquashEase,
+      groundTime: Math.max(0, jumpGroundTime),
+      groundEase: jumpGroundEase,
+      riseTime: Math.max(0.05, jumpRiseTime),
+      riseEase: jumpRiseEase,
+      clickSquashTime: Math.max(0.05, jumpClickSquashTime),
+    });
+  }
+
+  onMount(() => {
+    const id = globalThis.crypto?.randomUUID?.() ?? `${Date.now()}-${Math.random()}`;
+    instanceSeed = hashSeed(id);
+    sim = new Sim(Math.min(1, Math.max(0, seed ?? instanceSeed)), stateKey);
+
+    const media = typeof matchMedia === 'function' ? matchMedia('(prefers-reduced-motion: reduce)') : null;
+    motionReduced = media?.matches ?? false;
+    const updateMotion = (event: MediaQueryListEvent) => {
+      motionReduced = event.matches;
+    };
+    media?.addEventListener?.('change', updateMotion);
+
+    mounted = true;
+
+    return () => {
+      media?.removeEventListener?.('change', updateMotion);
+    };
+  });
+
+  /* Keep the rig and renderer in sync with the component's live props. */
+  $effect(() => {
+    if (!mounted || !canvas || !sim || typeof Path2D === 'undefined') return;
+    const selected = botAvatarPresets[type] ?? botAvatarPresets.clover;
+    const selectedState: BotAvatarState = botAvatarStates.includes(avatarState) ? avatarState : 'default';
+    sim.setState(selectedState);
+    sim.setTurn(clamp(turn, 0, 2));
+    applyJump(sim);
+
+    const selectedFace = face ?? selected.face;
+    const selectedColor = color ?? selected.color;
+    const selectedBody =
+      brightness === 1 && saturation === 1
+        ? selectedColor
+        : shade(
+            selectedColor,
+            (Math.min(2, Math.max(0, brightness)) - 1) * 0.35,
+            (Math.min(2, Math.max(0, saturation)) - 1) * 0.5
+          );
+    const reduced = motionReduced;
+    cfg = {
+      path: bodyPath(SHAPE_PATHS[type] ?? SHAPE_PATHS.clover),
+      face: selectedFace,
+      faceX: selected.faceX,
+      faceY: selected.faceY,
+      faceScale: selected.faceScale,
+      color: selectedBody,
+      ink: ink ?? autoInk(selectedBody),
+      shading: shadingMode,
+      shadow: clamp(shadow, 0, 2),
+      highlight: clamp(highlight, 0, 2),
+      depth: clamp(depth, 0.2, 2),
+      light,
+      rim: clamp(rim, 0, 2),
+      spread: clamp(spread, 0.4, 2.5),
+      typeKey: type,
+      still: frozen || reduced,
+      whirl: {
+        strength: clamp(whirl, 0, 2),
+        size: clamp(whirlSize, 0.6, 1.6),
+        width: clamp(whirlWidth, 0.4, 2),
+        length: clamp(whirlLength, 0.4, 1.6),
+        tilt: clamp(whirlTilt, 0.5, 1.8),
+      },
+      parts: SHAPE_PARTS[type] ? bodyPath(SHAPE_PARTS[type] as string) : undefined,
+      sides,
+      theme: resolveTheme(canvas),
+    };
+
+    if (reduced) paint(restPose(selectedState));
+    else paint();
+  });
+
+  /* Plastic forms bake during idle time; a running avatar shows the smooth stand-in until the form is ready. */
+  $effect(() => {
+    if (!mounted || shadingMode !== 'plastic' || typeof Path2D === 'undefined') return;
+    const path = bodyPath(SHAPE_PATHS[type] ?? SHAPE_PATHS.clover);
+    const dpr = Math.min(2, (typeof devicePixelRatio === 'number' && devicePixelRatio) || 1);
+    const devicePx = (typeof size === 'number' ? size : 64) * dpr;
+    const runtime = globalThis as typeof globalThis & {
+      requestIdleCallback?: (callback: () => void) => number;
+      cancelIdleCallback?: (id: number) => void;
+    };
+    const scheduleIdle = runtime.requestIdleCallback ?? ((callback: () => void) => setTimeout(callback, 1));
+    const id = scheduleIdle(() => warmPlastic(type, path, devicePx, depth));
+    return () => {
+      if (runtime.cancelIdleCallback) runtime.cancelIdleCallback(id);
+      else clearTimeout(id);
+    };
+  });
+
+  /* One shared loop, subscribed only while visible, animated and not reduced. */
+  $effect(() => {
+    const el = canvas;
+    const current = sim;
+    if (!mounted || !el || !current || frozen || motionReduced) return;
+    let onScreen = true;
+    let unsubscribe: (() => void) | null = null;
+    const reach = 3;
+    const tick = (dt: number) => {
+      if (interactiveValue && !Number.isNaN(pointer.x)) {
+        const rect = el.getBoundingClientRect();
+        const box = rect.width / OVERSCAN || 1;
+        const dx = (pointer.x - (rect.left + rect.width / 2)) / box;
+        const dy = (pointer.y - (rect.top + rect.height / 2 + RISE * box)) / box;
+        const distance = Math.hypot(dx, dy);
+        const strength = distance < 1 ? 1 : distance > reach ? 0 : 1 - (distance - 1) / (reach - 1);
+        current.setPointer(dx / Math.max(1, distance), dy / Math.max(1, distance), strength);
+      } else current.setPointer(0, 0, 0);
+      current.update(dt * speedValue);
+      paint();
+    };
+    const run = () => {
+      if (!unsubscribe) unsubscribe = subscribe(tick);
+    };
+    const stop = () => {
+      unsubscribe?.();
+      unsubscribe = null;
+    };
+    let observer: IntersectionObserver | null = null;
+    if (typeof IntersectionObserver === 'function') {
+      observer = new IntersectionObserver((entries) => {
+        onScreen = entries[0]?.isIntersecting ?? true;
+        if (onScreen) run();
+        else stop();
+      });
+      observer.observe(el);
+    } else run();
+    return () => {
+      stop();
+      observer?.disconnect();
+    };
+  });
+
+  $effect(() => {
+    const element = canvas;
+    const target = ref;
+    if (!element || !target) return;
+    if (typeof target === 'function') target(element);
+    else target.current = element;
+    return () => {
+      if (typeof target === 'function') target(null);
+      else if (target.current === element) target.current = null;
+    };
+  });
+
+  const unitlessStyle = new Set([
+    'animationIterationCount', 'borderImageOutset', 'borderImageSlice', 'borderImageWidth',
+    'boxFlex', 'boxFlexGroup', 'boxOrdinalGroup', 'columnCount', 'columns', 'flex', 'flexGrow',
+    'flexPositive', 'flexShrink', 'flexNegative', 'flexOrder', 'gridArea', 'gridColumn',
+    'gridColumnEnd', 'gridColumnSpan', 'gridColumnStart', 'gridRow', 'gridRowEnd', 'gridRowSpan',
+    'gridRowStart', 'fontWeight', 'lineClamp', 'lineHeight', 'opacity', 'order', 'orphans',
+    'tabSize', 'widows', 'zIndex', 'zoom', 'fillOpacity', 'floodOpacity', 'stopOpacity',
+    'strokeDasharray', 'strokeDashoffset', 'strokeMiterlimit', 'strokeOpacity', 'strokeWidth',
+  ]);
+
+  function styleName(name: string) {
+    if (name.startsWith('--')) return name;
+    const kebab = name.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+    return kebab.startsWith('ms-') ? `-${kebab}` : kebab;
+  }
+
+  function styleValue(name: string, value: string | number | null | undefined) {
+    if (value == null) return '';
+    if (typeof value === 'number' && value !== 0 && !unitlessStyle.has(name) && !name.startsWith('--')) return `${value}px`;
+    return String(value);
+  }
+
+  function serializeStyle(input: BotAvatarProps['style']): string {
+    const requestedSize = typeof size === 'number' ? `${size}px` : size;
+    const side = (OVERSCAN - 1) / 2;
+    const defaults: Record<string, string | number> = {
+      display: 'inline-block',
+      verticalAlign: 'middle',
+      width: typeof size === 'number' ? `${size * OVERSCAN}px` : `calc(${size} * ${OVERSCAN})`,
+      height: typeof size === 'number' ? `${size * OVERSCAN}px` : `calc(${size} * ${OVERSCAN})`,
+      marginLeft: typeof size === 'number' ? `${-size * side}px` : `calc(${requestedSize} * ${-side})`,
+      marginRight: typeof size === 'number' ? `${-size * side}px` : `calc(${requestedSize} * ${-side})`,
+      marginTop: typeof size === 'number' ? `${-size * (side + RISE)}px` : `calc(${requestedSize} * ${-(side + RISE)})`,
+      marginBottom: typeof size === 'number' ? `${-size * (side - RISE)}px` : `calc(${requestedSize} * ${-(side - RISE)})`,
+      flex: 'none',
+    };
+    if (typeof input === 'string') {
+      const base = Object.entries(defaults).map(([key, value]) => `${styleName(key)}:${styleValue(key, value)}`).join(';');
+      return `${base};${input}`;
+    }
+    const merged = { ...defaults, ...(input ?? {}) };
+    return Object.entries(merged)
+      .map(([key, value]) => `${styleName(key)}:${styleValue(key, value)}`)
+      .filter((declaration) => !declaration.endsWith(':'))
+      .join(';');
+  }
+
+  const canvasClass = $derived(['ba', className, classAttr].filter(Boolean).join(' '));
+  const canvasStyle = $derived(serializeStyle(style));
+
+  function handleClick(event: BotAvatarClickEvent) {
+    if (interactive && !frozen) sim?.poke();
+    onClick?.(event);
+    if (typeof onclick === 'function') onclick(event);
+  }
+</script>
+
+<canvas
+  bind:this={canvas}
+  class={canvasClass}
+  data-bot-avatar={type}
+  data-face={faceKind}
+  data-state={stateKey}
+  role="img"
+  aria-label={ariaLabel ?? `${preset.label} bot, ${stateLabels[stateKey]}`}
+  style={canvasStyle}
+  {...rest}
+  onclick={handleClick}
+></canvas>

package/dist/bot-avatars/BotAvatar.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { BotAvatarProps } from './types';
+declare const BotAvatar: import("svelte").Component<BotAvatarProps, {}, "canvas">;
+type BotAvatar = ReturnType<typeof BotAvatar>;
+export default BotAvatar;

package/dist/bot-avatars/color.d.ts

@@ -0,0 +1,14 @@
+/** Parse #rgb / #rrggbb / rgb() / hsl() into 0–255 channels; null for anything else. */
+export declare function parseColor(input: string): [number, number, number] | null;
+/** Relative luminance (WCAG), 0–1. Unparseable colours count as mid-grey. */
+export declare function luminance(color: string): number;
+export declare const DARK_INK = "#1E1A33";
+export declare const LIGHT_INK = "#F7F5F2";
+/** Face ink for a body colour: dark ink, or light ink on a dark body. */
+export declare function autoInk(color: string): string;
+/**
+ * A shade of a colour: `dl` moves the lightness (−1..1), `ds` the
+ * saturation. Darker shades get a touch more saturation so they stay
+ * rich instead of going grey, the way a painted surface falls into shadow.
+ */
+export declare function shade(color: string, dl: number, ds?: number): string;

package/dist/bot-avatars/color.js

@@ -0,0 +1,89 @@
+/** Parse #rgb / #rrggbb / rgb() / hsl() into 0–255 channels; null for anything else. */
+export function parseColor(input) {
+    const s = input.trim();
+    const hsl = s.match(/^hsla?\(\s*([\d.]+)(?:deg)?[,\s]+([\d.]+)%[,\s]+([\d.]+)%/i);
+    if (hsl)
+        return hslToRgb([Number(hsl[1]) / 360, Number(hsl[2]) / 100, Number(hsl[3]) / 100]);
+    const hex = s.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+    if (hex) {
+        let h = hex[1];
+        if (h.length === 3)
+            h = h.split('').map((c) => c + c).join('');
+        const n = parseInt(h, 16);
+        return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+    }
+    const rgb = s.match(/^rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)/i);
+    if (rgb)
+        return [Number(rgb[1]), Number(rgb[2]), Number(rgb[3])];
+    return null;
+}
+/** Relative luminance (WCAG), 0–1. Unparseable colours count as mid-grey. */
+export function luminance(color) {
+    const c = parseColor(color);
+    if (!c)
+        return 0.5;
+    const lin = (v) => {
+        const x = v / 255;
+        return x <= 0.03928 ? x / 12.92 : ((x + 0.055) / 1.055) ** 2.4;
+    };
+    return 0.2126 * lin(c[0]) + 0.7152 * lin(c[1]) + 0.0722 * lin(c[2]);
+}
+export const DARK_INK = '#1E1A33';
+export const LIGHT_INK = '#F7F5F2';
+/** Face ink for a body colour: dark ink, or light ink on a dark body. */
+export function autoInk(color) {
+    return luminance(color) < 0.13 ? LIGHT_INK : DARK_INK;
+}
+/* ── HSL, for the body's shades ─────────────────────────────────────── */
+function rgbToHsl([r, g, b]) {
+    r /= 255;
+    g /= 255;
+    b /= 255;
+    const max = Math.max(r, g, b), min = Math.min(r, g, b);
+    const l = (max + min) / 2;
+    if (max === min)
+        return [0, 0, l];
+    const d = max - min;
+    const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    let h = 0;
+    if (max === r)
+        h = (g - b) / d + (g < b ? 6 : 0);
+    else if (max === g)
+        h = (b - r) / d + 2;
+    else
+        h = (r - g) / d + 4;
+    return [h / 6, s, l];
+}
+function hslToRgb([h, s, l]) {
+    if (s === 0)
+        return [l * 255, l * 255, l * 255];
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    const f = (t) => {
+        t = ((t % 1) + 1) % 1;
+        if (t < 1 / 6)
+            return p + (q - p) * 6 * t;
+        if (t < 1 / 2)
+            return q;
+        if (t < 2 / 3)
+            return p + (q - p) * (2 / 3 - t) * 6;
+        return p;
+    };
+    return [f(h + 1 / 3) * 255, f(h) * 255, f(h - 1 / 3) * 255];
+}
+function hslToCss([h, s, l]) {
+    return `hsl(${(h * 360).toFixed(1)} ${(s * 100).toFixed(1)}% ${(l * 100).toFixed(1)}%)`;
+}
+const clamp01 = (v) => Math.min(1, Math.max(0, v));
+/**
+ * A shade of a colour: `dl` moves the lightness (−1..1), `ds` the
+ * saturation. Darker shades get a touch more saturation so they stay
+ * rich instead of going grey, the way a painted surface falls into shadow.
+ */
+export function shade(color, dl, ds = 0) {
+    const c = parseColor(color);
+    if (!c)
+        return color;
+    const [h, s, l] = rgbToHsl(c);
+    return hslToCss([h, clamp01(s + ds + (dl < 0 ? -dl * 0.25 : 0)), clamp01(l + dl)]);
+}

package/dist/bot-avatars/draw.d.ts

@@ -0,0 +1,55 @@
+import type { Pose } from './engine';
+import type { BotAvatarFace, BotAvatarShading } from './types';
+export interface DrawConfig {
+    path: Path2D;
+    face: BotAvatarFace;
+    faceX: number;
+    faceY: number;
+    faceScale: number;
+    color: string;
+    ink: string;
+    shading: BotAvatarShading;
+    /** intensities and geometry of the lighting; omitted means the stock look */
+    shadow?: number;
+    highlight?: number;
+    depth?: number;
+    /** degrees clockwise from the top, where the light comes from */
+    light?: number;
+    rim?: number;
+    spread?: number;
+    /** identifies the outline for the material caches (the type name) */
+    typeKey?: string;
+    /** no animation loop follows this draw (reduced motion, paused): build
+     * materials now instead of on idle time */
+    still?: boolean;
+    /** thin parts (antennae) drawn behind the body with `partsDepth` of its depth */
+    parts?: Path2D;
+    partsDepth?: number;
+    /** the resolved surface: the whirl is white on dark, black on light */
+    theme?: 'dark' | 'light';
+    /** the device pixel ratio the context is scaled by: with it given the
+        context's transform is taken as that scale and never read back */
+    dpr?: number;
+    /** plastic's side slices: filled as vectors, or blitted from sprites of
+        the outline. `auto` (the default) blits on WebKit, where a
+        conic-gradient fill costs thirty times a flat one. */
+    sides?: 'auto' | 'vector' | 'sprite';
+    /** the whirl's knobs; 1 everywhere is the stock look */
+    whirl?: {
+        strength: number;
+        size: number;
+        width: number;
+        length: number;
+        tilt: number;
+    };
+}
+export declare const OVERSCAN = 1.5;
+/** the body's centre sits this fraction of the box below the canvas
+    centre: hops and flips need the room above, not below */
+export declare const RISE = 0.1;
+/**
+ * Draw one frame. `box` is the avatar's layout size in CSS px; the canvas
+ * is `box * OVERSCAN` square with the body's centre `RISE * box` below
+ * its middle, and the context already scaled for the device pixel ratio.
+ */
+export declare function draw(ctx: CanvasRenderingContext2D, box: number, pose: Pose, cfg: DrawConfig): void;