pictoguys 0.1.0 → 0.1.1

package/README.md

@@ -17,7 +17,7 @@
 </p>
 
 <p align="center">
-  <img src="https://img.shields.io/badge/version-0.1.0-ff69b4" alt="version" />
+  <img src="https://img.shields.io/badge/version-0.1.1-ff69b4" alt="version" />
   <img src="https://img.shields.io/badge/TypeScript-ready-3178c6?logo=typescript&logoColor=white" alt="typescript" />
   <img src="https://img.shields.io/badge/React-%E2%89%A5%2017-61dafb?logo=react&logoColor=white" alt="react" />
   <img src="https://img.shields.io/badge/runtime%20deps-0-22c55e" alt="zero deps" />
@@ -258,8 +258,8 @@ Two ways, pick whichever feels easier.
 <Picto seed="Gizmo" animate="breath" />
 ```
 
-Animations available: `"blink"`, `"jump"`, `"breath"`, `"dance"`.
-`breath` and `dance` loop forever. `blink` and `jump` play once.
+Animations available: `"blink"`, `"jump"`, `"breath"`, `"dance"`, `"sleeping"`.
+`breath`, `dance`, and `sleeping` loop forever. `blink` and `jump` play once.
 
 **The hands-on way: tell a specific picto to do something.**
 
@@ -276,6 +276,7 @@ function Mascot() {
       <Picto char={guy} size={140} />
       <button onClick={() => guy.blink()}>blink</button>
       <button onClick={() => guy.dance()}>dance</button>
+      <button onClick={() => guy.sleep()}>sleep</button>
       <button onClick={() => guy.stop()}>chill</button>
     </>
   )
@@ -287,6 +288,7 @@ guy.blink()    // one blink
 guy.jump()     // one hop
 guy.breath()   // breathe (loops)
 guy.dance()    // dance (loops)
+guy.sleep()    // sleep with Zs (loops)
 guy.stop()     // freeze
 ```
 
@@ -305,7 +307,7 @@ guy.stop()     // freeze
 | `char`       | `Character`                            | none    | Use a picto you already made (wins).      |
 | `size`       | `number`                               | `120`   | Width and height, in pixels.              |
 | `background` | `boolean`                              | `false` | Set `true` to add a background tile.      |
-| `animate`    | `"blink" \| "jump" \| "breath" \| "dance"` | none | Play an animation on loop or once.      |
+| `animate`    | `"blink" \| "jump" \| "breath" \| "dance" \| "sleeping"` | none | Play an animation on loop or once.      |
 
 Any normal `<span>` prop works too (`className`, `style`, `onClick`, and so on),
 because that is what `<Picto>` renders into.

package/dist/{character-DAS3IMm1.d.cts → character-DxUH8H-l.d.cts}

@@ -101,7 +101,7 @@ declare function gradient(input: string | number): {
 };
 declare function resolve(input: CharInput): Resolved;
 
-type AnimName = 'blink' | 'jump' | 'breath' | 'dance';
+type AnimName = 'blink' | 'jump' | 'breath' | 'dance' | 'sleeping';
 /** name = animation to play, or null to stop. */
 interface AnimEvent {
     name: AnimName | null;
@@ -131,6 +131,8 @@ declare class Character {
     breath(): this;
     /** Dance (loops until stop or another animation). */
     dance(): this;
+    /** Sleep (loops until stop or another animation). */
+    sleep(): this;
     /** Stop any running animation. */
     stop(): this;
     /** @internal — used by <Picto> to react to animation calls. */

package/dist/{character-DAS3IMm1.d.ts → character-DxUH8H-l.d.ts}

@@ -101,7 +101,7 @@ declare function gradient(input: string | number): {
 };
 declare function resolve(input: CharInput): Resolved;
 
-type AnimName = 'blink' | 'jump' | 'breath' | 'dance';
+type AnimName = 'blink' | 'jump' | 'breath' | 'dance' | 'sleeping';
 /** name = animation to play, or null to stop. */
 interface AnimEvent {
     name: AnimName | null;
@@ -131,6 +131,8 @@ declare class Character {
     breath(): this;
     /** Dance (loops until stop or another animation). */
     dance(): this;
+    /** Sleep (loops until stop or another animation). */
+    sleep(): this;
     /** Stop any running animation. */
     stop(): this;
     /** @internal — used by <Picto> to react to animation calls. */

package/dist/{chunk-MHPZBNYL.js → chunk-7CLVRJRG.js}

@@ -339,6 +339,10 @@ var Character = class {
   dance() {
     return this._emit("dance");
   }
+  /** Sleep (loops until stop or another animation). */
+  sleep() {
+    return this._emit("sleeping");
+  }
   /** Stop any running animation. */
   stop() {
     return this._emit(null);

package/dist/{chunk-RSKU5HRZ.js → chunk-ETGCETAD.js}

@@ -1,4 +1,4 @@
-import { gradient, Character } from './chunk-MHPZBNYL.js';
+import { gradient, Character } from './chunk-7CLVRJRG.js';
 
 // src/picto.ts
 function character(input = 0) {

package/dist/{chunk-74VFD4AY.js → chunk-OF2R5NOW.js}

@@ -1,4 +1,4 @@
-import { Character } from './chunk-MHPZBNYL.js';
+import { Character } from './chunk-7CLVRJRG.js';
 import * as React from 'react';
 import { jsx } from 'react/jsx-runtime';
 
@@ -33,6 +33,78 @@ var ANIMS = {
     }
   }
 };
+var SVG_NS = "http://www.w3.org/2000/svg";
+var ZZZ_PATHS = [
+  [
+    "M20 3H14V0H26V3H23V6H20V3Z",
+    "M14 9H17V6H20V9H26V12H14V9Z"
+  ],
+  [
+    "M9 15H5V13H13V15H11V17H9V15Z",
+    "M5 19H7V17H9V19H13V21H5V19Z"
+  ],
+  [
+    "M3 23V24H2V23H0V22H4V23H3Z",
+    "M0 25H1V24H2V25H4V26H0V25Z"
+  ]
+];
+function makeSleepZzz() {
+  const wrap = document.createElementNS(SVG_NS, "g");
+  wrap.setAttribute("class", "sleep-zzz");
+  wrap.setAttribute("transform", "translate(24 -2) scale(0.55)");
+  wrap.style.pointerEvents = "none";
+  for (let i = 0; i < ZZZ_PATHS.length; i++) {
+    const z = document.createElementNS(SVG_NS, "g");
+    z.setAttribute("class", `sleep-zzz-${i}`);
+    z.style.willChange = "transform";
+    for (const d of ZZZ_PATHS[i]) {
+      const path = document.createElementNS(SVG_NS, "path");
+      path.setAttribute("d", d);
+      path.setAttribute("fill", i === 0 ? "#3B2199" : i === 1 ? "#4F6FC4" : "#6CA3E2");
+      z.appendChild(path);
+    }
+    wrap.appendChild(z);
+  }
+  return wrap;
+}
+function runSleepingAnim(svg) {
+  const char = svg.querySelector(".char");
+  const eyes = svg.querySelector(".eyes");
+  if (!char || !eyes) return () => {
+  };
+  const zzz = makeSleepZzz();
+  svg.appendChild(zzz);
+  svg.style.overflow = "visible";
+  char.style.transformBox = "fill-box";
+  char.style.transformOrigin = "50% 100%";
+  char.style.willChange = "transform";
+  eyes.style.transformBox = "fill-box";
+  eyes.style.transformOrigin = "center";
+  eyes.style.willChange = "transform";
+  eyes.style.transform = "scaleY(0.08)";
+  const zs = Array.from(zzz.children);
+  let raf = 0;
+  let start = 0;
+  const step = (ts) => {
+    if (!char.isConnected || !eyes.isConnected || !zzz.isConnected) return;
+    if (!start) start = ts;
+    const p = (ts - start) / 2800 % 1;
+    const breath = Math.sin(TAU * p);
+    char.style.transform = `scaleY(${1 + 0.025 * breath}) scaleX(${1 - 0.012 * breath})`;
+    for (let i = 0; i < zs.length; i++) {
+      const y = Math.sin(TAU * p + i * 0.85) * 1.6;
+      zs[i].style.transform = `translateY(${y}px)`;
+    }
+    raf = requestAnimationFrame(step);
+  };
+  raf = requestAnimationFrame(step);
+  return () => {
+    cancelAnimationFrame(raf);
+    char.style.transform = "";
+    eyes.style.transform = "";
+    zzz.remove();
+  };
+}
 var reactUseId = React.useId;
 var fallbackId = 0;
 function usePictoUid() {
@@ -40,6 +112,7 @@ function usePictoUid() {
   return "p" + id.replace(/[^a-zA-Z0-9_-]/g, "") + "_";
 }
 function runAnim(svg, name) {
+  if (name === "sleeping") return runSleepingAnim(svg);
   const a = ANIMS[name];
   const target = svg.querySelector("." + a.target);
   if (!target) return () => {

package/dist/core.cjs

@@ -359,6 +359,10 @@ var Character = class {
   dance() {
     return this._emit("dance");
   }
+  /** Sleep (loops until stop or another animation). */
+  sleep() {
+    return this._emit("sleeping");
+  }
   /** Stop any running animation. */
   stop() {
     return this._emit(null);

package/dist/core.d.cts

@@ -1,5 +1,5 @@
-import { c as CharInput, d as Character, b as CharConfig, j as gradient } from './character-DAS3IMm1.cjs';
-export { A as AnimEvent, a as AnimName, B as BGS, C as COLORS, e as ComposeArgs, D as DEFAULT_TUNING, E as EyeKind, M as Mode, O as OneOrMany, P as PREFIXES, f as PalEntry, R as Resolved, S as SHAPES, g as SvgOptions, T as Tuning, h as buildPalette, i as compose, r as resolve } from './character-DAS3IMm1.cjs';
+import { c as CharInput, d as Character, b as CharConfig, j as gradient } from './character-DxUH8H-l.cjs';
+export { A as AnimEvent, a as AnimName, B as BGS, C as COLORS, e as ComposeArgs, D as DEFAULT_TUNING, E as EyeKind, M as Mode, O as OneOrMany, P as PREFIXES, f as PalEntry, R as Resolved, S as SHAPES, g as SvgOptions, T as Tuning, h as buildPalette, i as compose, r as resolve } from './character-DxUH8H-l.cjs';
 export { hashSeed, mulberry32 } from './rng.cjs';
 
 /** Create a picto from a seed, a string, or an explicit config object. */

package/dist/core.d.ts

@@ -1,5 +1,5 @@
-import { c as CharInput, d as Character, b as CharConfig, j as gradient } from './character-DAS3IMm1.js';
-export { A as AnimEvent, a as AnimName, B as BGS, C as COLORS, e as ComposeArgs, D as DEFAULT_TUNING, E as EyeKind, M as Mode, O as OneOrMany, P as PREFIXES, f as PalEntry, R as Resolved, S as SHAPES, g as SvgOptions, T as Tuning, h as buildPalette, i as compose, r as resolve } from './character-DAS3IMm1.js';
+import { c as CharInput, d as Character, b as CharConfig, j as gradient } from './character-DxUH8H-l.js';
+export { A as AnimEvent, a as AnimName, B as BGS, C as COLORS, e as ComposeArgs, D as DEFAULT_TUNING, E as EyeKind, M as Mode, O as OneOrMany, P as PREFIXES, f as PalEntry, R as Resolved, S as SHAPES, g as SvgOptions, T as Tuning, h as buildPalette, i as compose, r as resolve } from './character-DxUH8H-l.js';
 export { hashSeed, mulberry32 } from './rng.js';
 
 /** Create a picto from a seed, a string, or an explicit config object. */

package/dist/core.js

@@ -1,3 +1,3 @@
-export { character, picto, preset } from './chunk-RSKU5HRZ.js';
-export { BGS, COLORS, Character, DEFAULT_TUNING, PARTS, PREFIXES, SHAPES, buildPalette, compose, gradient, resolve } from './chunk-MHPZBNYL.js';
+export { character, picto, preset } from './chunk-ETGCETAD.js';
+export { BGS, COLORS, Character, DEFAULT_TUNING, PARTS, PREFIXES, SHAPES, buildPalette, compose, gradient, resolve } from './chunk-7CLVRJRG.js';
 export { hashSeed, mulberry32 } from './chunk-2W2JD54I.js';

package/dist/index.cjs

@@ -382,6 +382,10 @@ var Character = class {
   dance() {
     return this._emit("dance");
   }
+  /** Sleep (loops until stop or another animation). */
+  sleep() {
+    return this._emit("sleeping");
+  }
   /** Stop any running animation. */
   stop() {
     return this._emit(null);
@@ -444,6 +448,78 @@ var ANIMS = {
     }
   }
 };
+var SVG_NS = "http://www.w3.org/2000/svg";
+var ZZZ_PATHS = [
+  [
+    "M20 3H14V0H26V3H23V6H20V3Z",
+    "M14 9H17V6H20V9H26V12H14V9Z"
+  ],
+  [
+    "M9 15H5V13H13V15H11V17H9V15Z",
+    "M5 19H7V17H9V19H13V21H5V19Z"
+  ],
+  [
+    "M3 23V24H2V23H0V22H4V23H3Z",
+    "M0 25H1V24H2V25H4V26H0V25Z"
+  ]
+];
+function makeSleepZzz() {
+  const wrap = document.createElementNS(SVG_NS, "g");
+  wrap.setAttribute("class", "sleep-zzz");
+  wrap.setAttribute("transform", "translate(24 -2) scale(0.55)");
+  wrap.style.pointerEvents = "none";
+  for (let i = 0; i < ZZZ_PATHS.length; i++) {
+    const z = document.createElementNS(SVG_NS, "g");
+    z.setAttribute("class", `sleep-zzz-${i}`);
+    z.style.willChange = "transform";
+    for (const d of ZZZ_PATHS[i]) {
+      const path = document.createElementNS(SVG_NS, "path");
+      path.setAttribute("d", d);
+      path.setAttribute("fill", i === 0 ? "#3B2199" : i === 1 ? "#4F6FC4" : "#6CA3E2");
+      z.appendChild(path);
+    }
+    wrap.appendChild(z);
+  }
+  return wrap;
+}
+function runSleepingAnim(svg) {
+  const char = svg.querySelector(".char");
+  const eyes = svg.querySelector(".eyes");
+  if (!char || !eyes) return () => {
+  };
+  const zzz = makeSleepZzz();
+  svg.appendChild(zzz);
+  svg.style.overflow = "visible";
+  char.style.transformBox = "fill-box";
+  char.style.transformOrigin = "50% 100%";
+  char.style.willChange = "transform";
+  eyes.style.transformBox = "fill-box";
+  eyes.style.transformOrigin = "center";
+  eyes.style.willChange = "transform";
+  eyes.style.transform = "scaleY(0.08)";
+  const zs = Array.from(zzz.children);
+  let raf = 0;
+  let start = 0;
+  const step = (ts) => {
+    if (!char.isConnected || !eyes.isConnected || !zzz.isConnected) return;
+    if (!start) start = ts;
+    const p = (ts - start) / 2800 % 1;
+    const breath = Math.sin(TAU * p);
+    char.style.transform = `scaleY(${1 + 0.025 * breath}) scaleX(${1 - 0.012 * breath})`;
+    for (let i = 0; i < zs.length; i++) {
+      const y = Math.sin(TAU * p + i * 0.85) * 1.6;
+      zs[i].style.transform = `translateY(${y}px)`;
+    }
+    raf = requestAnimationFrame(step);
+  };
+  raf = requestAnimationFrame(step);
+  return () => {
+    cancelAnimationFrame(raf);
+    char.style.transform = "";
+    eyes.style.transform = "";
+    zzz.remove();
+  };
+}
 var reactUseId = React__namespace.useId;
 var fallbackId = 0;
 function usePictoUid() {
@@ -451,6 +527,7 @@ function usePictoUid() {
   return "p" + id.replace(/[^a-zA-Z0-9_-]/g, "") + "_";
 }
 function runAnim(svg, name) {
+  if (name === "sleeping") return runSleepingAnim(svg);
   const a = ANIMS[name];
   const target = svg.querySelector("." + a.target);
   if (!target) return () => {

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 export { PARTS, Parts, Preset, character, picto, preset } from './core.cjs';
-export { A as AnimEvent, a as AnimName, B as BGS, C as COLORS, b as CharConfig, c as CharInput, d as Character, e as ComposeArgs, D as DEFAULT_TUNING, E as EyeKind, M as Mode, O as OneOrMany, P as PREFIXES, f as PalEntry, R as Resolved, S as SHAPES, g as SvgOptions, T as Tuning, h as buildPalette, i as compose, j as gradient, r as resolve } from './character-DAS3IMm1.cjs';
+export { A as AnimEvent, a as AnimName, B as BGS, C as COLORS, b as CharConfig, c as CharInput, d as Character, e as ComposeArgs, D as DEFAULT_TUNING, E as EyeKind, M as Mode, O as OneOrMany, P as PREFIXES, f as PalEntry, R as Resolved, S as SHAPES, g as SvgOptions, T as Tuning, h as buildPalette, i as compose, j as gradient, r as resolve } from './character-DxUH8H-l.cjs';
 export { hashSeed, mulberry32 } from './rng.cjs';
 export { Picto, PictoProps } from './react.cjs';
 import 'react';

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { PARTS, Parts, Preset, character, picto, preset } from './core.js';
-export { A as AnimEvent, a as AnimName, B as BGS, C as COLORS, b as CharConfig, c as CharInput, d as Character, e as ComposeArgs, D as DEFAULT_TUNING, E as EyeKind, M as Mode, O as OneOrMany, P as PREFIXES, f as PalEntry, R as Resolved, S as SHAPES, g as SvgOptions, T as Tuning, h as buildPalette, i as compose, j as gradient, r as resolve } from './character-DAS3IMm1.js';
+export { A as AnimEvent, a as AnimName, B as BGS, C as COLORS, b as CharConfig, c as CharInput, d as Character, e as ComposeArgs, D as DEFAULT_TUNING, E as EyeKind, M as Mode, O as OneOrMany, P as PREFIXES, f as PalEntry, R as Resolved, S as SHAPES, g as SvgOptions, T as Tuning, h as buildPalette, i as compose, j as gradient, r as resolve } from './character-DxUH8H-l.js';
 export { hashSeed, mulberry32 } from './rng.js';
 export { Picto, PictoProps } from './react.js';
 import 'react';

package/dist/index.js

@@ -1,4 +1,4 @@
-export { character, picto, preset } from './chunk-RSKU5HRZ.js';
-export { Picto } from './chunk-74VFD4AY.js';
-export { BGS, COLORS, Character, DEFAULT_TUNING, PARTS, PREFIXES, SHAPES, buildPalette, compose, gradient, resolve } from './chunk-MHPZBNYL.js';
+export { character, picto, preset } from './chunk-ETGCETAD.js';
+export { Picto } from './chunk-OF2R5NOW.js';
+export { BGS, COLORS, Character, DEFAULT_TUNING, PARTS, PREFIXES, SHAPES, buildPalette, compose, gradient, resolve } from './chunk-7CLVRJRG.js';
 export { hashSeed, mulberry32 } from './chunk-2W2JD54I.js';

package/dist/react.cjs

@@ -381,6 +381,10 @@ var Character = class {
   dance() {
     return this._emit("dance");
   }
+  /** Sleep (loops until stop or another animation). */
+  sleep() {
+    return this._emit("sleeping");
+  }
   /** Stop any running animation. */
   stop() {
     return this._emit(null);
@@ -428,6 +432,78 @@ var ANIMS = {
     }
   }
 };
+var SVG_NS = "http://www.w3.org/2000/svg";
+var ZZZ_PATHS = [
+  [
+    "M20 3H14V0H26V3H23V6H20V3Z",
+    "M14 9H17V6H20V9H26V12H14V9Z"
+  ],
+  [
+    "M9 15H5V13H13V15H11V17H9V15Z",
+    "M5 19H7V17H9V19H13V21H5V19Z"
+  ],
+  [
+    "M3 23V24H2V23H0V22H4V23H3Z",
+    "M0 25H1V24H2V25H4V26H0V25Z"
+  ]
+];
+function makeSleepZzz() {
+  const wrap = document.createElementNS(SVG_NS, "g");
+  wrap.setAttribute("class", "sleep-zzz");
+  wrap.setAttribute("transform", "translate(24 -2) scale(0.55)");
+  wrap.style.pointerEvents = "none";
+  for (let i = 0; i < ZZZ_PATHS.length; i++) {
+    const z = document.createElementNS(SVG_NS, "g");
+    z.setAttribute("class", `sleep-zzz-${i}`);
+    z.style.willChange = "transform";
+    for (const d of ZZZ_PATHS[i]) {
+      const path = document.createElementNS(SVG_NS, "path");
+      path.setAttribute("d", d);
+      path.setAttribute("fill", i === 0 ? "#3B2199" : i === 1 ? "#4F6FC4" : "#6CA3E2");
+      z.appendChild(path);
+    }
+    wrap.appendChild(z);
+  }
+  return wrap;
+}
+function runSleepingAnim(svg) {
+  const char = svg.querySelector(".char");
+  const eyes = svg.querySelector(".eyes");
+  if (!char || !eyes) return () => {
+  };
+  const zzz = makeSleepZzz();
+  svg.appendChild(zzz);
+  svg.style.overflow = "visible";
+  char.style.transformBox = "fill-box";
+  char.style.transformOrigin = "50% 100%";
+  char.style.willChange = "transform";
+  eyes.style.transformBox = "fill-box";
+  eyes.style.transformOrigin = "center";
+  eyes.style.willChange = "transform";
+  eyes.style.transform = "scaleY(0.08)";
+  const zs = Array.from(zzz.children);
+  let raf = 0;
+  let start = 0;
+  const step = (ts) => {
+    if (!char.isConnected || !eyes.isConnected || !zzz.isConnected) return;
+    if (!start) start = ts;
+    const p = (ts - start) / 2800 % 1;
+    const breath = Math.sin(TAU * p);
+    char.style.transform = `scaleY(${1 + 0.025 * breath}) scaleX(${1 - 0.012 * breath})`;
+    for (let i = 0; i < zs.length; i++) {
+      const y = Math.sin(TAU * p + i * 0.85) * 1.6;
+      zs[i].style.transform = `translateY(${y}px)`;
+    }
+    raf = requestAnimationFrame(step);
+  };
+  raf = requestAnimationFrame(step);
+  return () => {
+    cancelAnimationFrame(raf);
+    char.style.transform = "";
+    eyes.style.transform = "";
+    zzz.remove();
+  };
+}
 var reactUseId = React__namespace.useId;
 var fallbackId = 0;
 function usePictoUid() {
@@ -435,6 +511,7 @@ function usePictoUid() {
   return "p" + id.replace(/[^a-zA-Z0-9_-]/g, "") + "_";
 }
 function runAnim(svg, name) {
+  if (name === "sleeping") return runSleepingAnim(svg);
   const a = ANIMS[name];
   const target = svg.querySelector("." + a.target);
   if (!target) return () => {

package/dist/react.d.cts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { d as Character, b as CharConfig, a as AnimName } from './character-DAS3IMm1.cjs';
+import { d as Character, b as CharConfig, a as AnimName } from './character-DxUH8H-l.cjs';
 
 interface PictoProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {
     /** An existing character (e.g. from picto.character). Wins over seed/config. */

package/dist/react.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { d as Character, b as CharConfig, a as AnimName } from './character-DAS3IMm1.js';
+import { d as Character, b as CharConfig, a as AnimName } from './character-DxUH8H-l.js';
 
 interface PictoProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {
     /** An existing character (e.g. from picto.character). Wins over seed/config. */

package/dist/react.js

@@ -1,3 +1,3 @@
-export { Picto } from './chunk-74VFD4AY.js';
-import './chunk-MHPZBNYL.js';
+export { Picto } from './chunk-OF2R5NOW.js';
+import './chunk-7CLVRJRG.js';
 import './chunk-2W2JD54I.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pictoguys",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Tiny React library for procedural SVG characters. Seed in, character out.",
   "type": "module",
   "main": "./dist/index.cjs",