@usenavii/core 0.2.1 → 0.4.0

package/dist/index.d.cts

@@ -1,5 +1,5 @@
-import { b as AvatarOptions, c as AvatarSpec, d as BodyShapeId, E as EyeStyleId, M as MouthStyleId, a as AntennaStyleId, A as AccessoryId, B as BackgroundId, T as TopperId } from './types-BlMtdWZf.cjs';
-export { P as Palette } from './types-BlMtdWZf.cjs';
+import { b as AvatarOptions, c as AvatarSpec, d as BodyShapeId, E as EyeStyleId, M as MouthStyleId, a as AntennaStyleId, A as AccessoryId, B as BackgroundId, T as TopperId, O as OutfitId } from './types-BfsKZ8zK.cjs';
+export { P as Palette } from './types-BfsKZ8zK.cjs';
 
 /**
  * Seed → stable PRNG stream.
@@ -130,6 +130,7 @@ interface BuildSpec {
     accessory?: AccessoryId;
     background?: BackgroundId;
     topper?: TopperId;
+    outfit?: OutfitId;
     hueShift?: number;
     bodyScale?: number;
     eyeGapShift?: number;
@@ -182,6 +183,37 @@ declare function build(spec?: BuildSpec, options?: AvatarOptions): string;
  * ```
  */
 declare function createAvatar(seed: string, options?: AvatarOptions): string;
+/**
+ * Generate a random avatar without supplying a seed.
+ *
+ * Picks a fresh UUID seed via `crypto.randomUUID()` (or a `Math.random()`
+ * fallback when WebCrypto is unavailable) and renders the avatar. The seed
+ * is returned alongside the SVG so callers can **persist it** — e.g. save
+ * to the user's profile so future renders are stable.
+ *
+ * Use for: "spin again" UX, dev/demo seeding, lazy onboarding flows where
+ * the user gets an avatar before picking one.
+ *
+ * Each call returns a different avatar — DO NOT call inline in a render
+ * function or the avatar will change every re-render. Stabilize with a
+ * `useState`/`useMemo` init or persist the returned seed:
+ *
+ * @example
+ * ```ts
+ * const { svg, seed } = Navii.random({ size: 96 });
+ * saveToProfile(user.id, { naviiSeed: seed });
+ * ```
+ *
+ * @example React
+ * ```tsx
+ * const [random] = useState(() => Navii.random());
+ * return <Navii seed={random.seed} />;
+ * ```
+ */
+declare function random(options?: AvatarOptions): {
+    svg: string;
+    seed: string;
+};
 /**
  * Convenience namespace — bundles every public function under one import.
  *
@@ -197,6 +229,7 @@ declare function createAvatar(seed: string, options?: AvatarOptions): string;
  */
 declare const Navii: {
     readonly create: typeof createAvatar;
+    readonly random: typeof random;
     readonly render: typeof renderAvatar;
     readonly select: typeof selectAvatar;
     readonly group: typeof renderGroup;
@@ -204,4 +237,4 @@ declare const Navii: {
     readonly build: typeof build;
 };
 
-export { AccessoryId, AntennaStyleId, AvatarOptions, AvatarSpec, BackgroundId, BodyShapeId, type BuildSpec, EyeStyleId, type GroupOptions, MouthStyleId, Navii, type SeedFields, TopperId, build, createAvatar, createRng, cyrb53, renderAvatar, renderAvatarInner, renderGroup, seed, selectAvatar };
+export { AccessoryId, AntennaStyleId, AvatarOptions, AvatarSpec, BackgroundId, BodyShapeId, type BuildSpec, EyeStyleId, type GroupOptions, MouthStyleId, Navii, OutfitId, type SeedFields, TopperId, build, createAvatar, createRng, cyrb53, random, renderAvatar, renderAvatarInner, renderGroup, seed, selectAvatar };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { b as AvatarOptions, c as AvatarSpec, d as BodyShapeId, E as EyeStyleId, M as MouthStyleId, a as AntennaStyleId, A as AccessoryId, B as BackgroundId, T as TopperId } from './types-BlMtdWZf.js';
-export { P as Palette } from './types-BlMtdWZf.js';
+import { b as AvatarOptions, c as AvatarSpec, d as BodyShapeId, E as EyeStyleId, M as MouthStyleId, a as AntennaStyleId, A as AccessoryId, B as BackgroundId, T as TopperId, O as OutfitId } from './types-BfsKZ8zK.js';
+export { P as Palette } from './types-BfsKZ8zK.js';
 
 /**
  * Seed → stable PRNG stream.
@@ -130,6 +130,7 @@ interface BuildSpec {
     accessory?: AccessoryId;
     background?: BackgroundId;
     topper?: TopperId;
+    outfit?: OutfitId;
     hueShift?: number;
     bodyScale?: number;
     eyeGapShift?: number;
@@ -182,6 +183,37 @@ declare function build(spec?: BuildSpec, options?: AvatarOptions): string;
  * ```
  */
 declare function createAvatar(seed: string, options?: AvatarOptions): string;
+/**
+ * Generate a random avatar without supplying a seed.
+ *
+ * Picks a fresh UUID seed via `crypto.randomUUID()` (or a `Math.random()`
+ * fallback when WebCrypto is unavailable) and renders the avatar. The seed
+ * is returned alongside the SVG so callers can **persist it** — e.g. save
+ * to the user's profile so future renders are stable.
+ *
+ * Use for: "spin again" UX, dev/demo seeding, lazy onboarding flows where
+ * the user gets an avatar before picking one.
+ *
+ * Each call returns a different avatar — DO NOT call inline in a render
+ * function or the avatar will change every re-render. Stabilize with a
+ * `useState`/`useMemo` init or persist the returned seed:
+ *
+ * @example
+ * ```ts
+ * const { svg, seed } = Navii.random({ size: 96 });
+ * saveToProfile(user.id, { naviiSeed: seed });
+ * ```
+ *
+ * @example React
+ * ```tsx
+ * const [random] = useState(() => Navii.random());
+ * return <Navii seed={random.seed} />;
+ * ```
+ */
+declare function random(options?: AvatarOptions): {
+    svg: string;
+    seed: string;
+};
 /**
  * Convenience namespace — bundles every public function under one import.
  *
@@ -197,6 +229,7 @@ declare function createAvatar(seed: string, options?: AvatarOptions): string;
  */
 declare const Navii: {
     readonly create: typeof createAvatar;
+    readonly random: typeof random;
     readonly render: typeof renderAvatar;
     readonly select: typeof selectAvatar;
     readonly group: typeof renderGroup;
@@ -204,4 +237,4 @@ declare const Navii: {
     readonly build: typeof build;
 };
 
-export { AccessoryId, AntennaStyleId, AvatarOptions, AvatarSpec, BackgroundId, BodyShapeId, type BuildSpec, EyeStyleId, type GroupOptions, MouthStyleId, Navii, type SeedFields, TopperId, build, createAvatar, createRng, cyrb53, renderAvatar, renderAvatarInner, renderGroup, seed, selectAvatar };
+export { AccessoryId, AntennaStyleId, AvatarOptions, AvatarSpec, BackgroundId, BodyShapeId, type BuildSpec, EyeStyleId, type GroupOptions, MouthStyleId, Navii, OutfitId, type SeedFields, TopperId, build, createAvatar, createRng, cyrb53, random, renderAvatar, renderAvatarInner, renderGroup, seed, selectAvatar };

package/dist/index.js

@@ -557,6 +557,76 @@ function renderTopper(id, anchor, palette) {
   }
 }
 
+// src/parts/outfit.ts
+function renderOutfit(id, anchor, palette) {
+  if (id === "none") return "";
+  const cx = anchor.cx;
+  const cy = anchor.mouthY + (anchor.groundY - anchor.mouthY) * 0.55;
+  const ink = palette.ink;
+  const accent = palette.accent;
+  switch (id) {
+    case "collar":
+      return [
+        `<path d="M${cx - 9} ${cy} L${cx - 2} ${cy - 4} L${cx - 2} ${cy + 5} Z" fill="${accent}" stroke="${ink}" stroke-width="0.7" />`,
+        `<path d="M${cx + 9} ${cy} L${cx + 2} ${cy - 4} L${cx + 2} ${cy + 5} Z" fill="${accent}" stroke="${ink}" stroke-width="0.7" />`,
+        // tiny button at center
+        `<circle cx="${cx}" cy="${cy + 4}" r="0.9" fill="${ink}" />`
+      ].join("");
+    case "scarf":
+      return [
+        // wrap band
+        `<path d="M${cx - 14} ${cy - 2} Q${cx} ${cy + 3} ${cx + 14} ${cy - 2} L${cx + 14} ${cy + 3} Q${cx} ${cy + 8} ${cx - 14} ${cy + 3} Z" fill="${palette.bodyTo}" stroke="${ink}" stroke-width="0.6" />`,
+        // tail 1 (left)
+        `<path d="M${cx - 6} ${cy + 5} L${cx - 9} ${cy + 12} L${cx - 4} ${cy + 12} L${cx - 2} ${cy + 5} Z" fill="${palette.bodyTo}" stroke="${ink}" stroke-width="0.5" />`,
+        // tail 2 (slightly right)
+        `<path d="M${cx + 1} ${cy + 6} L${cx + 4} ${cy + 13} L${cx - 1} ${cy + 13} L${cx - 2} ${cy + 6} Z" fill="${palette.bodyFrom}" stroke="${ink}" stroke-width="0.5" />`
+      ].join("");
+    case "bowtie":
+      return [
+        // left wing
+        `<path d="M${cx - 1} ${cy} L${cx - 9} ${cy - 4} L${cx - 9} ${cy + 4} Z" fill="${palette.bodyTo}" stroke="${ink}" stroke-width="0.7" />`,
+        // right wing
+        `<path d="M${cx + 1} ${cy} L${cx + 9} ${cy - 4} L${cx + 9} ${cy + 4} Z" fill="${palette.bodyTo}" stroke="${ink}" stroke-width="0.7" />`,
+        // center knot
+        `<rect x="${cx - 1.4}" y="${cy - 2.4}" width="2.8" height="4.8" rx="0.8" fill="${palette.bodyFrom}" stroke="${ink}" stroke-width="0.5" />`
+      ].join("");
+    case "sunflower": {
+      const fx = cx - 8;
+      const fy = cy + 2;
+      const petals = [];
+      for (let i = 0; i < 8; i++) {
+        const a = i / 8 * Math.PI * 2;
+        const px = fx + Math.cos(a) * 3.2;
+        const py = fy + Math.sin(a) * 3.2;
+        petals.push(
+          `<ellipse cx="${px.toFixed(2)}" cy="${py.toFixed(2)}" rx="2.4" ry="1.3" fill="#FACC15" stroke="${ink}" stroke-width="0.35" transform="rotate(${(a * 180 / Math.PI).toFixed(1)} ${px.toFixed(2)} ${py.toFixed(2)})" />`
+        );
+      }
+      return [
+        // stem (tucked behind)
+        `<path d="M${fx + 2} ${fy + 2} Q${fx + 4} ${fy + 6} ${fx + 1} ${fy + 10}" stroke="#16A34A" stroke-width="1.1" fill="none" stroke-linecap="round" />`,
+        // leaf
+        `<path d="M${fx + 3} ${fy + 6} Q${fx + 7} ${fy + 4} ${fx + 6} ${fy + 8} Q${fx + 4} ${fy + 8} ${fx + 3} ${fy + 6} Z" fill="#22C55E" stroke="${ink}" stroke-width="0.35" />`,
+        ...petals,
+        // center disc
+        `<circle cx="${fx}" cy="${fy}" r="2" fill="#92400E" stroke="${ink}" stroke-width="0.4" />`,
+        // texture dots on disc
+        `<circle cx="${fx - 0.6}" cy="${fy - 0.5}" r="0.4" fill="#451A03" />`,
+        `<circle cx="${fx + 0.7}" cy="${fy + 0.3}" r="0.4" fill="#451A03" />`,
+        `<circle cx="${fx - 0.4}" cy="${fy + 0.8}" r="0.4" fill="#451A03" />`
+      ].join("");
+    }
+    case "necklace":
+      return [
+        // chain (curve from collarbone left → drop → right)
+        `<path d="M${cx - 10} ${cy} Q${cx} ${cy + 8} ${cx + 10} ${cy}" stroke="${accent}" stroke-width="0.8" fill="none" stroke-linecap="round" />`,
+        // pendant
+        `<circle cx="${cx}" cy="${cy + 7}" r="1.6" fill="${accent}" stroke="${ink}" stroke-width="0.5" />`,
+        `<circle cx="${cx}" cy="${cy + 7}" r="0.7" fill="${palette.blush}" />`
+      ].join("");
+  }
+}
+
 // src/parts/index.ts
 var BODY_IDS = [
   "orb",
@@ -655,6 +725,7 @@ function selectAvatar(seed2, options = {}) {
     accessory,
     background,
     topper,
+    outfit: "none",
     hueShift,
     bodyScale,
     eyeGapShift,
@@ -738,10 +809,13 @@ function renderAvatarInner(spec, options = {}) {
   const antennaWrapped = antennaSvg ? `<g${transformAntenna(spec.antennaTilt ?? 0, anchor)}><g class="antenna">${antennaSvg}</g></g>` : "";
   const tileBg = resolveTileBg(options.tileBg, spec.palette);
   const tileCircle = tileBg ? `<circle cx="50" cy="50" r="50" fill="${tileBg}" />` : "";
+  const outfitSvg = renderOutfit(spec.outfit ?? "none", anchor, spec.palette);
   const parts = [
     tileCircle,
     renderBackground(spec.background, spec.palette, bgOverride),
     bodyWrapped,
+    // outfit sits on the body but below the face, so face features stay readable
+    outfitSvg,
     renderTopper(spec.topper, anchor, spec.palette),
     wrap("eyes", renderEyes(spec.eyes, spec.palette, anchor)),
     renderMouth(spec.mouth, spec.palette, anchor, spec.mouthCurveScale ?? 1),
@@ -857,6 +931,7 @@ function build(spec = {}, options = {}) {
     accessory: spec.accessory ?? "none",
     background: spec.background ?? "none",
     topper: spec.topper ?? "none",
+    outfit: spec.outfit ?? "none",
     hueShift: spec.hueShift ?? 0,
     bodyScale: spec.bodyScale ?? 1,
     eyeGapShift: spec.eyeGapShift ?? 0,
@@ -873,8 +948,18 @@ function createAvatar(seed2, options = {}) {
   }
   return renderAvatar(selectAvatar(seed2, options), options);
 }
+function random(options = {}) {
+  const seed2 = randomSeed();
+  return { svg: createAvatar(seed2, options), seed: seed2 };
+}
+function randomSeed() {
+  const c = globalThis.crypto;
+  if (c && typeof c.randomUUID === "function") return c.randomUUID();
+  return Math.random().toString(36).slice(2) + Math.random().toString(36).slice(2);
+}
 var Navii = {
   create: createAvatar,
+  random,
   render: renderAvatar,
   select: selectAvatar,
   group: renderGroup,
@@ -882,6 +967,6 @@ var Navii = {
   build
 };
 
-export { Navii, build, createAvatar, createRng, cyrb53, renderAvatar, renderAvatarInner, renderGroup, seed, selectAvatar };
+export { Navii, build, createAvatar, createRng, cyrb53, random, renderAvatar, renderAvatarInner, renderGroup, seed, selectAvatar };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map