@doan-labs/peek 1.1.0 → 2.0.0

package/README.md

@@ -19,6 +19,37 @@ import { Peek } from '@doan-labs/peek'
 Use `animate` for blinking and expression transitions, and
 `gaze='pointer'` to follow the pointer. Animation respects reduced motion.
 
+## 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:
@@ -34,7 +65,20 @@ Eyewear: `none`, `glasses`, `sunglasses`. Headwear: `none`, `bow`, `cap`,
 existing avatars stay unchanged. Slots combine and work with every
 expression, gaze and frame. The same options work with `toSvg`.
 
-## Plain SVG, without React
+## 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:
 

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/index.d.ts

@@ -1,11 +1,3 @@
-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 * from './core.js';
 export type { PeekProps } from './peek.js';
 export { Peek } from './peek.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, } from './tables.js';
-export { ACCESSORIES, COLORS, EXPRESSIONS, FACES, GROUPS, LATEST, PARTS, VERSIONS, } from './tables.js';