@doan-labs/peek 1.0.0 → 2.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Doan Labs
+
+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

@@ -19,7 +19,66 @@ import { Peek } from '@doan-labs/peek'
 Use `animate` for blinking and expression transitions, and
 `gaze='pointer'` to follow the pointer. Animation respects reduced motion.
 
-## Plain SVG, without React
+## Vue 3.5
+
+The same component, with the same props and the same markup:
+
+```vue
+<script setup>
+import { Peek } from '@doan-labs/peek/vue'
+</script>
+
+<template>
+  <Peek name="Linh" :size="96" expression="happy" animate />
+</template>
+```
+
+## Svelte 5
+
+Needs Svelte 5.20 or newer. The component ships as source, so your bundler
+compiles it:
+
+```svelte
+<script>
+  import { Peek } from '@doan-labs/peek/svelte'
+</script>
+
+<Peek name="Linh" size={96} expression="happy" animate />
+```
+
+In Vue and Svelte, use `class` and `style` in place of `className` and
+`style`. Both entry points also export `toSvg`, `identify` and the option
+lists, so neither needs React installed.
+
+## Accessories
+
+Dress a face with three independent slots:
+
+```tsx
+<Peek name='Linh' eyewear='glasses' headwear='bow' />
+<Peek name='Linh' eyewear='sunglasses' headwear='sprout' />
+<Peek name='Linh' headwear='cap' neckwear='tie' animate />
+```
+
+Eyewear: `none`, `glasses`, `sunglasses`. Headwear: `none`, `bow`, `cap`,
+`sprout`. Neckwear: `none`, `tie`. All default to `none` at `peek@1`, so
+existing avatars stay unchanged. Slots combine and work with every
+expression, gaze and frame. The same options work with `toSvg`.
+
+## Variants
+
+Draw the same face another way. A variant never changes who it is:
+
+```tsx
+<Peek name='Linh' variant='haze' />
+<Peek name='Linh' variant='bloc' expression='angry' animate />
+```
+
+`peek` (default), `haze` (the body in soft color) or `bloc` (flat
+geometry: two tones, one bar, hard edges). Every variant draws every
+expression, gaze and frame.
+
+## Plain SVG, without a framework
 
 The SVG and identity entry points have no runtime dependencies:
 
@@ -36,3 +95,7 @@ The same normalized name and options produce the same SVG every time.
 
 See the [documentation](https://peek.doan-labs.com/docs) for options,
 expressions, identity axes and versioned styles.
+
+## License
+
+[MIT](./LICENSE) © Doan Labs

package/dist/bloc.d.ts

@@ -0,0 +1,2 @@
+import { type Node, type Parts } from './draw.js';
+export declare function blocParts({ who, pose, o, defs, g }: Parts): [Node[], Node[]];

package/dist/core.d.ts

@@ -0,0 +1,9 @@
+export type { Frame, Gaze, Node } from './draw.js';
+/** Low level: the drawing tree that toSvg and <Peek> both render. */
+export { draw } from './draw.js';
+export type { Axes, Identity, Persona } from './identity.js';
+export { AXES, identify, LISTS, tidy } from './identity.js';
+export type { PeekOptions } from './svg.js';
+export { settle, toSvg } from './svg.js';
+export type { AccessorySlot, Axis, Brows, Channel, Cheeks, Color, Expression, Eyes, Eyewear, Face, Headwear, Mouth, Neckwear, Trait, Variant, } from './tables.js';
+export { ACCESSORIES, BLOC, COLORS, EXPRESSIONS, FACES, GROUPS, HAZE, LATEST, PARTS, VARIANTS, VERSIONS, WHEEL, } from './tables.js';

package/dist/draw.d.ts

@@ -1,5 +1,5 @@
-import type { Axes, Persona } from './identity.js';
-import { type Channels, type Expression, type FaceGeom } from './tables.js';
+import { type Axes, type Persona } from './identity.js';
+import { type Channel, type Channels, type Expression, type FaceGeom, type Variant } from './tables.js';
 export type Node = {
     tag: string;
     key: string;
@@ -30,13 +30,18 @@ export type DrawOptions = {
     title: string | false;
     /** Keep invisible nodes so an animator can write into them. */
     live?: boolean;
+    /** How the face is drawn. Default 'peek'. */
+    variant?: Variant;
 };
+/** `key`, the tidied name, seeds Haze's blobs; without it, it hazes as ''. */
 export type Drawable = Axes & {
     persona: Persona;
+    key?: string;
 };
 export declare const VB: readonly [-30, -30, 400, 400];
 export declare const clamp: (v: number, a: number, b: number) => number;
 export declare const smooth: (a: number, b: number, v: number) => number;
+export declare const f2: (v: number) => string;
 /** Where a face rests: the body offset, the eye line, one altitude unit. */
 export declare function frameOf(face: FaceGeom): {
     baseY: number;
@@ -66,4 +71,21 @@ export declare function ringWalk(sh: FaceGeom): {
     rest: number;
     min: number;
 };
+type Attrs = Record<string, string | number | false | undefined>;
+export declare function n(tag: string, key: string, attrs: Attrs, children?: Node[]): {
+    tag: string;
+    key: string;
+    attrs: Record<string, string>;
+    children: Node[];
+};
 export declare function draw(who: Drawable, pose: Pose, o: DrawOptions): Node;
+/** What a variant draws from: the defs it may add to, and the pose reader. */
+export type Parts = {
+    who: Drawable;
+    pose: Pose;
+    o: DrawOptions;
+    defs: Node[];
+    /** A channel with the persona applied. */
+    g: (c: Channel) => number;
+};
+export {};

package/dist/identity.d.ts

@@ -1,4 +1,4 @@
-import { type Axis, type Brows, type Cheeks, type Color, type Eyes, type Face, type Mouth, type Trait } from './tables.js';
+import { type Axis, type Brows, type Cheeks, type Color, type Eyes, type Eyewear, type Face, type Headwear, type Mouth, type Neckwear, type Trait } from './tables.js';
 export declare const STYLE = "peek";
 export declare const tidy: (s: string) => string;
 /** FNV-1a over the UTF-8 bytes. */
@@ -34,6 +34,9 @@ export type Axes = {
     mouth: Mouth;
     cheeks: Cheeks;
     trait: Trait;
+    eyewear: Eyewear;
+    headwear: Headwear;
+    neckwear: Neckwear;
 };
 export type Identity = Axes & {
     /** The tidied name. */

package/dist/identity.js

@@ -116,8 +116,24 @@ var PARTS = {
   cheeks: ["oval", "dots", "lines"],
   trait: ["square", "fin", "ring", "dot", "peak"]
 };
+var ACCESSORIES = {
+  eyewear: ["none", "glasses", "sunglasses"],
+  headwear: ["none", "bow", "cap", "sprout"],
+  neckwear: ["none", "tie"]
+};
 var VERSIONS = {
-  1: { face: 4, color: 7, eyes: 3, brows: 4, mouth: 4, cheeks: 3, trait: 5 }
+  1: {
+    face: 4,
+    color: 7,
+    eyes: 3,
+    brows: 4,
+    mouth: 4,
+    cheeks: 3,
+    trait: 5,
+    eyewear: 1,
+    headwear: 1,
+    neckwear: 1
+  }
 };
 var LATEST = 1;
 var BASE = {
@@ -339,7 +355,8 @@ function mulberry32(a) {
 var LISTS = {
   face: Object.keys(FACES),
   color: Object.keys(COLORS),
-  ...PARTS
+  ...PARTS,
+  ...ACCESSORIES
 };
 var AXES = Object.keys(LISTS);
 function seed(name, axis, version = LATEST) {
@@ -383,6 +400,9 @@ function identify(name, { version = LATEST } = {}) {
     mouth: pick("mouth"),
     cheeks: pick("cheeks"),
     trait: pick("trait"),
+    eyewear: pick("eyewear"),
+    headwear: pick("headwear"),
+    neckwear: pick("neckwear"),
     persona
   };
 }

package/dist/index.d.ts

@@ -1,9 +1,3 @@
-export type { Frame, Gaze } from './draw.js';
-export type { Axes, Identity, Persona } from './identity.js';
-export { AXES, identify, LISTS, tidy } from './identity.js';
+export * from './core.js';
 export type { PeekProps } from './peek.js';
 export { Peek } from './peek.js';
-export type { PeekOptions } from './svg.js';
-export { toSvg } from './svg.js';
-export type { Axis, Brows, Channel, Cheeks, Color, Expression, Eyes, Face, Mouth, Trait, } from './tables.js';
-export { COLORS, EXPRESSIONS, FACES, GROUPS, LATEST, PARTS, VERSIONS, } from './tables.js';