pictoguys 0.1.0

package/dist/character-DAS3IMm1.d.ts

@@ -0,0 +1,141 @@
+/** Artist body colors, e.g. "blue", "pink". */
+declare const COLORS: string[];
+/** Body shape variants, "1".."4". */
+declare const SHAPES: string[];
+/** Background keys, "1".."5". */
+declare const BGS: string[];
+/** Eye kinds that have both eyes and matching eyebrows: "single" | "double" | "triple". */
+declare const PREFIXES: string[];
+interface PalEntry {
+    name: string;
+    light: string;
+    dark: string;
+    gen: boolean;
+}
+declare function buildPalette(selColors: string[], extra: number): PalEntry[];
+interface Tuning {
+    /** feature (outline) lightness, 10..45 */
+    featL: number;
+    /** feature tint chroma, 0..12 */
+    featC: number;
+    /** lit pupil lightness, 60..95 */
+    litL: number;
+    /** pupil chroma, 4..22 */
+    pupC: number;
+}
+declare const DEFAULT_TUNING: Tuning;
+interface ComposeArgs {
+    light: string;
+    dark: string;
+    shape: string;
+    bg: string;
+    eye: string;
+    brow: string;
+    mode: string;
+    tuning: Tuning;
+    uid: string;
+    background: boolean;
+}
+declare function compose(a: ComposeArgs): string;
+type Mode = 'mono' | 'hetero' | 'triad';
+type EyeKind = 'single' | 'double' | 'triple';
+/**
+ * A constraint value. Three ways to use any field:
+ *  - omit it           -> fully random (picked from the seed)
+ *  - one value         -> locked to that value
+ *  - an array of values -> random, but only from that set (picked from the seed)
+ */
+type OneOrMany<T> = T | readonly T[];
+interface CharConfig {
+    /** Explicit seed. Omit to derive a stable seed from the other fields. */
+    seed?: number | string;
+    /**
+     * Body color. An anchor name ("blue"), OR a brand hex ("#19c37d") which gets a
+     * matching darker shade auto-generated. Array = pick one at random.
+     */
+    color?: OneOrMany<string>;
+    /** Body hue in degrees. Array = pick one. Used when `color` is absent. */
+    hue?: OneOrMany<number>;
+    /** Explicit gradient stops. Full manual lock, wins over color/hue. */
+    light?: string;
+    dark?: string;
+    /** Body shape, 1..4. Array = pick one. */
+    shape?: OneOrMany<number | string>;
+    /** Eye kind. Array = pick one. */
+    eyes?: OneOrMany<EyeKind>;
+    /** Exact eye file key, e.g. "double_2" (implies `eyes`). Array = pick one. */
+    eye?: OneOrMany<string>;
+    /** Exact eyebrow file key. Array = pick one. */
+    brow?: OneOrMany<string>;
+    /** Background, 1..5. Array = pick one. */
+    bg?: OneOrMany<number | string>;
+    /** Eye coloring mode. Array = pick one. Invalid combos fall back to "mono". */
+    mode?: OneOrMany<Mode>;
+    /** OKLCH fine-tuning overrides. */
+    tuning?: Partial<Tuning>;
+    /** Generated-hue variety for seeded picks (default 8). */
+    genHues?: number;
+}
+type CharInput = number | string | CharConfig;
+/** A fully-resolved, concrete character spec. */
+interface Resolved {
+    color: string;
+    light: string;
+    dark: string;
+    shape: string;
+    eyes: EyeKind;
+    eye: string;
+    brow: string;
+    bg: string;
+    mode: Mode;
+    hue: number;
+    tuning: Tuning;
+}
+/**
+ * Build a body gradient from a single brand color (hex) or a hue (degrees).
+ * Handy for inspecting or reusing what `color: '#hex'` would produce.
+ */
+declare function gradient(input: string | number): {
+    light: string;
+    dark: string;
+};
+declare function resolve(input: CharInput): Resolved;
+
+type AnimName = 'blink' | 'jump' | 'breath' | 'dance';
+/** name = animation to play, or null to stop. */
+interface AnimEvent {
+    name: AnimName | null;
+}
+type Listener = (e: AnimEvent) => void;
+interface SvgOptions {
+    /** Add a background tile (default false). Omit/false -> transparent. */
+    background?: boolean;
+    /** Id prefix to keep filters/gradients unique across SVGs in one document. */
+    uid?: string;
+}
+declare class Character {
+    /** The fully-resolved, concrete spec. */
+    readonly config: Resolved;
+    /** Stable id prefix derived from the spec — keeps .svg() deterministic. */
+    private readonly _uid;
+    private _listeners;
+    constructor(input?: CharInput);
+    /** Render this character to a standalone SVG string. */
+    svg(opts?: SvgOptions): string;
+    toString(): string;
+    /** Blink once. */
+    blink(): this;
+    /** Hop once. */
+    jump(): this;
+    /** Breathe (loops until stop or another animation). */
+    breath(): this;
+    /** Dance (loops until stop or another animation). */
+    dance(): this;
+    /** Stop any running animation. */
+    stop(): this;
+    /** @internal — used by <Picto> to react to animation calls. */
+    _subscribe(fn: Listener): () => void;
+    private _emit;
+}
+
+export { type AnimEvent as A, BGS as B, COLORS as C, DEFAULT_TUNING as D, type EyeKind as E, type Mode as M, type OneOrMany as O, PREFIXES as P, type Resolved as R, SHAPES as S, type Tuning as T, type AnimName as a, type CharConfig as b, type CharInput as c, Character as d, type ComposeArgs as e, type PalEntry as f, type SvgOptions as g, buildPalette as h, compose as i, gradient as j, resolve as r };

package/dist/chunk-2W2JD54I.js

@@ -0,0 +1,21 @@
+// src/rng.ts
+function mulberry32(a) {
+  return function() {
+    a |= 0;
+    a = a + 1831565813 | 0;
+    let t = Math.imul(a ^ a >>> 15, 1 | a);
+    t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+function hashSeed(s) {
+  if (typeof s === "number") return s >>> 0;
+  let h = 2166136261 >>> 0;
+  for (let i = 0; i < s.length; i++) {
+    h ^= s.charCodeAt(i);
+    h = Math.imul(h, 16777619);
+  }
+  return h >>> 0;
+}
+
+export { hashSeed, mulberry32 };

package/dist/chunk-74VFD4AY.js

@@ -0,0 +1,109 @@
+import { Character } from './chunk-MHPZBNYL.js';
+import * as React from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var TAU = Math.PI * 2;
+var ANIMS = {
+  blink: { loop: false, dur: 280, target: "eyes", f: (p) => `scaleY(${1 - Math.sin(Math.PI * p) * 0.92})` },
+  jump: {
+    loop: false,
+    dur: 640,
+    target: "char",
+    f: (p) => {
+      const y = Math.sin(Math.PI * p);
+      return `translateY(${ -28 * y}%) scaleX(${1 - 0.06 * y}) scaleY(${1 + 0.08 * y})`;
+    }
+  },
+  breath: {
+    loop: true,
+    dur: 2400,
+    target: "char",
+    f: (p) => {
+      const s = Math.sin(TAU * p);
+      return `scaleY(${1 + 0.06 * s}) scaleX(${1 - 0.03 * s})`;
+    }
+  },
+  dance: {
+    loop: true,
+    dur: 720,
+    target: "char",
+    f: (p) => {
+      const s = Math.sin(TAU * p);
+      return `translateX(${6 * s}%) translateY(${ -4 * Math.abs(s)}%) rotate(${9 * s}deg)`;
+    }
+  }
+};
+var reactUseId = React.useId;
+var fallbackId = 0;
+function usePictoUid() {
+  const id = reactUseId ? reactUseId() : React.useMemo(() => `r${++fallbackId}`, []);
+  return "p" + id.replace(/[^a-zA-Z0-9_-]/g, "") + "_";
+}
+function runAnim(svg, name) {
+  const a = ANIMS[name];
+  const target = svg.querySelector("." + a.target);
+  if (!target) return () => {
+  };
+  svg.style.overflow = "visible";
+  target.style.transformBox = "fill-box";
+  target.style.transformOrigin = a.target === "char" ? "50% 100%" : "center";
+  target.style.willChange = "transform";
+  let raf = 0;
+  let start = 0;
+  const step = (ts) => {
+    if (!target.isConnected) return;
+    if (!start) start = ts;
+    const el = (ts - start) / a.dur;
+    const p = a.loop ? el % 1 : Math.min(1, el);
+    target.style.transform = a.f(p);
+    if (!a.loop && el >= 1) {
+      target.style.transform = "";
+      return;
+    }
+    raf = requestAnimationFrame(step);
+  };
+  raf = requestAnimationFrame(step);
+  return () => {
+    cancelAnimationFrame(raf);
+    target.style.transform = "";
+  };
+}
+var Picto = React.forwardRef(function Picto2({ char, seed, config, size = 120, background = false, animate, style, ...rest }, ref) {
+  const uid = usePictoUid();
+  const character = React.useMemo(() => {
+    if (char) return char;
+    if (config != null) return new Character(config);
+    return new Character(seed ?? 0);
+  }, [char, config, seed]);
+  const html = React.useMemo(() => character.svg({ background, uid }), [character, background, uid]);
+  const hostRef = React.useRef(null);
+  React.useImperativeHandle(ref, () => hostRef.current, []);
+  const stopRef = React.useRef(null);
+  const play = React.useCallback((name) => {
+    stopRef.current?.();
+    stopRef.current = null;
+    const svg = hostRef.current?.querySelector("svg");
+    if (svg && name) stopRef.current = runAnim(svg, name);
+  }, []);
+  React.useEffect(() => {
+    return character._subscribe((e) => play(e.name));
+  }, [character, play]);
+  React.useEffect(() => {
+    play(animate ?? null);
+    return () => {
+      stopRef.current?.();
+      stopRef.current = null;
+    };
+  }, [animate, html, play]);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...rest,
+      ref: hostRef,
+      style: { display: "inline-block", width: size, height: size, lineHeight: 0, overflow: "visible", ...style },
+      dangerouslySetInnerHTML: { __html: html }
+    }
+  );
+});
+
+export { Picto };