@dowel-ui/react 0.5.0 → 0.8.0

package/dist/components/number-flow/number-flow.js

@@ -0,0 +1,226 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useEffect, useRef, useState } from "react";
+//#region src/components/number-flow/number-flow.tsx
+const PREFIX = "dowel-number-flow";
+const STYLES = `
+[data-slot=number-flow-display][data-ready]>[data-slot=number-flow-token]{transition:opacity var(--duration-slow) var(--ease-out-quint),translate var(--duration-slow) var(--ease-out-quint)}
+@starting-style{[data-slot=number-flow-display][data-ready]>[data-slot=number-flow-token]{opacity:0;translate:0 var(--${PREFIX}-enter,100%)}}
+`;
+/** Resting band: positions 10–19. Bands 0–9 and 20–29 absorb wrap-around. */
+const BAND = 10;
+const CELLS = Array.from({ length: 30 }, (_, index) => index);
+/** The row of characters. The root itself stays a plain inline box. */
+const numberFlowVariants = cva("inline-flex items-baseline whitespace-nowrap", {
+	variants: { variant: {
+		plain: "",
+		tiles: "items-center gap-1"
+	} },
+	defaultVariants: { variant: "plain" }
+});
+/** One digit's window onto its reel. `tiles` is the source Number Flow's boxed counter. */
+const numberFlowDigitVariants = cva("relative inline-flex justify-center overflow-hidden", {
+	variants: { variant: {
+		plain: "",
+		tiles: "h-[2.667em] w-[2em] items-center rounded-lg border border-border bg-primary font-semibold text-primary-foreground"
+	} },
+	defaultVariants: { variant: "plain" }
+});
+const formatters = /* @__PURE__ */ new Map();
+/** A formatter and the ten digit glyphs of its numbering system, cached per options. */
+function formatterFor(locales, options) {
+	const id = JSON.stringify([locales, options]);
+	let cached = formatters.get(id);
+	if (!cached) {
+		const format = new Intl.NumberFormat(locales, options);
+		const { locale, numberingSystem } = format.resolvedOptions();
+		const plain = new Intl.NumberFormat(locale, {
+			numberingSystem,
+			useGrouping: false
+		});
+		cached = {
+			format,
+			glyphs: CELLS.slice(0, BAND).map((digit) => plain.format(digit))
+		};
+		formatters.set(id, cached);
+	}
+	return cached;
+}
+/** Splits a formatted number into keyed digits and symbols. */
+function tokenize(parts, glyphs) {
+	let place = parts.filter((part) => part.type === "integer").reduce((count, part) => count + [...part.value].length, 0);
+	let fraction = 0;
+	const seen = /* @__PURE__ */ new Map();
+	const tokens = [];
+	for (const part of parts) if (part.type === "integer" || part.type === "fraction") for (const char of part.value) {
+		const key = part.type === "integer" ? `i${String(--place)}` : `f${String(fraction++)}`;
+		const digit = glyphs.indexOf(char);
+		tokens.push(digit === -1 ? {
+			kind: "symbol",
+			key,
+			text: char
+		} : {
+			kind: "digit",
+			key,
+			digit
+		});
+	}
+	else if (part.type === "group") tokens.push({
+		kind: "symbol",
+		key: `g${String(place)}`,
+		text: part.value
+	});
+	else {
+		const count = seen.get(part.type) ?? 0;
+		seen.set(part.type, count + 1);
+		tokens.push({
+			kind: "symbol",
+			key: `${part.type}${String(count)}:${part.value}`,
+			text: part.value
+		});
+	}
+	return tokens;
+}
+/** The reel position of `digit` nearest `from` in the direction of travel. */
+function travel(from, digit, up) {
+	const copies = [
+		digit,
+		digit + BAND,
+		digit + 20
+	];
+	if (up) return copies.find((position) => position > from) ?? digit + 20;
+	return copies.reverse().find((position) => position < from) ?? digit;
+}
+function Digit({ digit, up, index, stagger, glyphs, variant }) {
+	const [reel, setReel] = useState({
+		digit,
+		position: BAND + digit,
+		snapping: false
+	});
+	if (reel.digit !== digit) setReel({
+		digit,
+		position: travel(reel.position, digit, up),
+		snapping: false
+	});
+	function handleTransitionEnd(event) {
+		if (event.target !== event.currentTarget || event.propertyName !== "transform") return;
+		const rest = BAND + reel.digit;
+		if (reel.position !== rest) setReel({
+			...reel,
+			position: rest,
+			snapping: true
+		});
+	}
+	const motion = reel.snapping ? "transition-none" : "duration-[var(--duration-slow)] ease-[var(--ease-out-quint)]";
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "number-flow-digit",
+		"data-digit": digit,
+		className: numberFlowDigitVariants({ variant }),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "invisible",
+			children: glyphs[digit]
+		}), /* @__PURE__ */ jsx("span", {
+			"data-slot": "number-flow-reel",
+			"data-position": reel.position,
+			"data-snapping": reel.snapping ? "" : void 0,
+			onTransitionEnd: handleTransitionEnd,
+			className: cn("absolute inset-0 transition-transform", motion),
+			style: {
+				transform: `translateY(${String(-reel.position * 100)}%)`,
+				transitionDelay: `calc(${String(index * stagger)}ms * var(--motion-scale, 1))`
+			},
+			children: CELLS.map((cell) => /* @__PURE__ */ jsx("span", {
+				"data-active": cell === reel.position ? "" : void 0,
+				className: cn("absolute inset-x-0 flex h-full items-center justify-center opacity-0 transition-opacity data-active:opacity-100", motion),
+				style: {
+					top: `${String(cell * 100)}%`,
+					transitionDelay: "inherit"
+				},
+				children: glyphs[cell % BAND]
+			}, cell))
+		})]
+	});
+}
+/** A number whose digits roll to each new value. */
+function NumberFlow({ className, style, value, locales, format, trend = "auto", stagger = 0, variant = "plain", as = "span", ...props }) {
+	const Root = as;
+	const { format: formatter, glyphs } = formatterFor(locales, format ?? {});
+	const text = formatter.format(value);
+	const tokens = tokenize(formatter.formatToParts(value), glyphs);
+	const [last, setLast] = useState({
+		value,
+		up: true
+	});
+	if (last.value !== value) setLast({
+		value,
+		up: value > last.value
+	});
+	const up = trend === "auto" ? last.up : trend === "up";
+	const display = useRef(null);
+	useEffect(() => {
+		display.current?.setAttribute("data-ready", "");
+	}, []);
+	let digitIndex = 0;
+	return /* @__PURE__ */ jsxs(Root, {
+		"data-slot": "number-flow",
+		"data-variant": variant,
+		"data-trend": up ? "up" : "down",
+		"aria-atomic": props["aria-live"] ? true : void 0,
+		className: cn("inline-block tabular-nums", className),
+		style: {
+			[`--${PREFIX}-enter`]: up ? "100%" : "-100%",
+			...style
+		},
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("style", {
+				href: PREFIX,
+				precedence: "dowel",
+				children: STYLES
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: text
+			}),
+			/* @__PURE__ */ jsx("span", {
+				ref: display,
+				"aria-hidden": "true",
+				dir: "ltr",
+				"data-slot": "number-flow-display",
+				className: numberFlowVariants({ variant }),
+				children: tokens.map((token) => /* @__PURE__ */ jsx("span", {
+					"data-slot": "number-flow-token",
+					className: "inline-flex",
+					children: token.kind === "digit" ? /* @__PURE__ */ jsx(Digit, {
+						digit: token.digit,
+						up,
+						index: digitIndex++,
+						stagger,
+						glyphs,
+						variant
+					}) : /* @__PURE__ */ jsx("span", {
+						className: "whitespace-pre",
+						children: token.text
+					})
+				}, token.key))
+			})
+		]
+	});
+}
+/**
+* The source's Price Flow: two-digit minimum and a 50ms stagger from the
+* leading digit. Pass `format` for a currency; the stagger is kept.
+*/
+function PriceFlow({ format, stagger = 50, ...props }) {
+	return /* @__PURE__ */ jsx(NumberFlow, {
+		format: format ?? { minimumIntegerDigits: 2 },
+		stagger,
+		...props
+	});
+}
+//#endregion
+export { NumberFlow, PriceFlow, numberFlowDigitVariants, numberFlowVariants };
+
+//# sourceMappingURL=number-flow.js.map

package/dist/components/number-flow/number-flow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-flow.js","names":[],"sources":["../../../src/components/number-flow/number-flow.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from SmoothUI Number Flow and Price Flow (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  useEffect,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type TransitionEvent,\n} from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A number whose digits roll to their next value (ADR 0014).\n *\n * Each digit is a vertical reel of three 0–9 bands, translated by a CSS\n * transition. It rests in the middle band; a change travels to the nearest\n * copy of the new digit in the direction the value moved (up for a rise, as in\n * the source: the old digit leaves upward and the new one arrives from below),\n * wrapping into the outer band when it has to — 9 → 0 on a rise keeps rolling\n * up. When the transition ends the reel snaps back to the middle band with\n * transitions off, so the next change has room either way.\n *\n * Only the active cell is opaque, so the outgoing digit fades as it leaves and\n * the incoming one fades in, as the source's slide-out/slide-in pair does.\n *\n * Formatting is Intl.NumberFormat's `formatToParts`. Digits are keyed by their\n * place (ones, tens, … and fraction positions), so 99 → 100 keeps the two\n * existing reels and adds a hundreds reel rather than shifting every digit.\n * New characters — a new leading digit, a minus sign, a changed compact\n * suffix — fade in from the direction of change through @starting-style.\n *\n * Everything is a transition on token durations, so the reduced-motion rule in\n * base.css makes every change a snap. This is decoration, never an indicator.\n */\n\nconst PREFIX = \"dowel-number-flow\";\n\nconst STYLES = `\n[data-slot=number-flow-display][data-ready]>[data-slot=number-flow-token]{transition:opacity var(--duration-slow) var(--ease-out-quint),translate var(--duration-slow) var(--ease-out-quint)}\n@starting-style{[data-slot=number-flow-display][data-ready]>[data-slot=number-flow-token]{opacity:0;translate:0 var(--${PREFIX}-enter,100%)}}\n`;\n\n/** Resting band: positions 10–19. Bands 0–9 and 20–29 absorb wrap-around. */\nconst BAND = 10;\nconst CELLS = Array.from({ length: BAND * 3 }, (_, index) => index);\n\n/** The row of characters. The root itself stays a plain inline box. */\nconst numberFlowVariants = cva(\"inline-flex items-baseline whitespace-nowrap\", {\n  variants: {\n    variant: {\n      plain: \"\",\n      tiles: \"items-center gap-1\",\n    },\n  },\n  defaultVariants: { variant: \"plain\" },\n});\n\n/** One digit's window onto its reel. `tiles` is the source Number Flow's boxed counter. */\nconst numberFlowDigitVariants = cva(\"relative inline-flex justify-center overflow-hidden\", {\n  variants: {\n    variant: {\n      plain: \"\",\n      tiles:\n        \"h-[2.667em] w-[2em] items-center rounded-lg border border-border bg-primary font-semibold text-primary-foreground\",\n    },\n  },\n  defaultVariants: { variant: \"plain\" },\n});\n\nexport type NumberFlowElement = \"span\" | \"div\" | \"p\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n\n/** Which way the reels roll. `auto` follows the change in value. */\nexport type NumberFlowTrend = \"auto\" | \"up\" | \"down\";\n\nexport interface NumberFlowProps\n  extends\n    Omit<ComponentPropsWithRef<\"span\">, \"children\">,\n    VariantProps<typeof numberFlowVariants> {\n  /** The number to show. */\n  value: number;\n  /** Passed to Intl.NumberFormat. Defaults to the user's locale. */\n  locales?: Intl.LocalesArgument;\n  /**\n   * Intl.NumberFormat options: `style: \"currency\" | \"percent\"`,\n   * `notation: \"compact\"`, `signDisplay`, `minimumFractionDigits`, …\n   */\n  format?: Intl.NumberFormatOptions;\n  /** Which way the reels roll. `auto` (default) rolls up on a rise, down on a fall. */\n  trend?: NumberFlowTrend;\n  /**\n   * Milliseconds between one digit starting to roll and the next, from the\n   * leading digit. Price Flow uses 50.\n   */\n  stagger?: number;\n  /** The element rendered as the root. */\n  as?: NumberFlowElement;\n}\n\ntype Token =\n  { kind: \"digit\"; key: string; digit: number } | { kind: \"symbol\"; key: string; text: string };\n\nconst formatters = new Map<string, { format: Intl.NumberFormat; glyphs: string[] }>();\n\n/** A formatter and the ten digit glyphs of its numbering system, cached per options. */\nfunction formatterFor(locales: Intl.LocalesArgument, options: Intl.NumberFormatOptions) {\n  const id = JSON.stringify([locales, options]);\n  let cached = formatters.get(id);\n  if (!cached) {\n    const format = new Intl.NumberFormat(locales, options);\n    const { locale, numberingSystem } = format.resolvedOptions();\n    const plain = new Intl.NumberFormat(locale, { numberingSystem, useGrouping: false });\n    cached = { format, glyphs: CELLS.slice(0, BAND).map((digit) => plain.format(digit)) };\n    formatters.set(id, cached);\n  }\n  return cached;\n}\n\n/** Splits a formatted number into keyed digits and symbols. */\nfunction tokenize(parts: Intl.NumberFormatPart[], glyphs: string[]): Token[] {\n  const integerDigits = parts\n    .filter((part) => part.type === \"integer\")\n    .reduce((count, part) => count + [...part.value].length, 0);\n\n  let place = integerDigits;\n  let fraction = 0;\n  const seen = new Map<string, number>();\n  const tokens: Token[] = [];\n\n  for (const part of parts) {\n    if (part.type === \"integer\" || part.type === \"fraction\") {\n      for (const char of part.value) {\n        const key = part.type === \"integer\" ? `i${String(--place)}` : `f${String(fraction++)}`;\n        const digit = glyphs.indexOf(char);\n        tokens.push(\n          digit === -1 ? { kind: \"symbol\", key, text: char } : { kind: \"digit\", key, digit },\n        );\n      }\n    } else if (part.type === \"group\") {\n      tokens.push({ kind: \"symbol\", key: `g${String(place)}`, text: part.value });\n    } else {\n      // Keyed by its text too: a changed symbol ($ → €, K → M) remounts and\n      // fades in rather than swapping in place.\n      const count = seen.get(part.type) ?? 0;\n      seen.set(part.type, count + 1);\n      tokens.push({\n        kind: \"symbol\",\n        key: `${part.type}${String(count)}:${part.value}`,\n        text: part.value,\n      });\n    }\n  }\n  return tokens;\n}\n\ninterface Reel {\n  digit: number;\n  position: number;\n  snapping: boolean;\n}\n\n/** The reel position of `digit` nearest `from` in the direction of travel. */\nfunction travel(from: number, digit: number, up: boolean): number {\n  const copies = [digit, digit + BAND, digit + BAND * 2];\n  if (up) return copies.find((position) => position > from) ?? digit + BAND * 2;\n  return copies.reverse().find((position) => position < from) ?? digit;\n}\n\ninterface DigitProps {\n  digit: number;\n  up: boolean;\n  index: number;\n  stagger: number;\n  glyphs: string[];\n  variant: NumberFlowProps[\"variant\"];\n}\n\nfunction Digit({ digit, up, index, stagger, glyphs, variant }: DigitProps) {\n  const [reel, setReel] = useState<Reel>({ digit, position: BAND + digit, snapping: false });\n\n  // Derived during render, so the reel starts moving in the same commit as the\n  // value changes rather than one frame later.\n  if (reel.digit !== digit) {\n    setReel({ digit, position: travel(reel.position, digit, up), snapping: false });\n  }\n\n  function handleTransitionEnd(event: TransitionEvent<HTMLSpanElement>) {\n    if (event.target !== event.currentTarget || event.propertyName !== \"transform\") return;\n    const rest = BAND + reel.digit;\n    if (reel.position !== rest) setReel({ ...reel, position: rest, snapping: true });\n  }\n\n  const motion = reel.snapping\n    ? \"transition-none\"\n    : \"duration-[var(--duration-slow)] ease-[var(--ease-out-quint)]\";\n\n  return (\n    <span\n      data-slot=\"number-flow-digit\"\n      data-digit={digit}\n      className={numberFlowDigitVariants({ variant })}\n    >\n      {/* Sizes the window: in-flow, invisible, one glyph wide and one line tall. */}\n      <span className=\"invisible\">{glyphs[digit]}</span>\n      <span\n        data-slot=\"number-flow-reel\"\n        data-position={reel.position}\n        data-snapping={reel.snapping ? \"\" : undefined}\n        onTransitionEnd={handleTransitionEnd}\n        className={cn(\"absolute inset-0 transition-transform\", motion)}\n        style={{\n          transform: `translateY(${String(-reel.position * 100)}%)`,\n          transitionDelay: `calc(${String(index * stagger)}ms * var(--motion-scale, 1))`,\n        }}\n      >\n        {CELLS.map((cell) => (\n          <span\n            key={cell}\n            data-active={cell === reel.position ? \"\" : undefined}\n            className={cn(\n              \"absolute inset-x-0 flex h-full items-center justify-center opacity-0 transition-opacity data-active:opacity-100\",\n              motion,\n            )}\n            style={{ top: `${String(cell * 100)}%`, transitionDelay: \"inherit\" }}\n          >\n            {glyphs[cell % BAND]}\n          </span>\n        ))}\n      </span>\n    </span>\n  );\n}\n\n/** A number whose digits roll to each new value. */\nexport function NumberFlow({\n  className,\n  style,\n  value,\n  locales,\n  format,\n  trend = \"auto\",\n  stagger = 0,\n  variant = \"plain\",\n  as = \"span\",\n  ...props\n}: NumberFlowProps) {\n  // Every allowed element takes the same attributes as a span; only the ref's\n  // element type differs, which TypeScript cannot reconcile across the union.\n  const Root = as as \"span\";\n  // Cached by content, so an inline `format` object costs nothing per render.\n  const { format: formatter, glyphs } = formatterFor(locales, format ?? {});\n  const text = formatter.format(value);\n  const tokens = tokenize(formatter.formatToParts(value), glyphs);\n\n  // Direction of the most recent change, derived during render.\n  const [last, setLast] = useState({ value, up: true });\n  if (last.value !== value) setLast({ value, up: value > last.value });\n  const up = trend === \"auto\" ? last.up : trend === \"up\";\n\n  // Characters present on first paint should not fade in; later ones should.\n  // Marked on the DOM directly: it is a styling hook, not render state.\n  const display = useRef<HTMLSpanElement>(null);\n  useEffect(() => {\n    display.current?.setAttribute(\"data-ready\", \"\");\n  }, []);\n\n  let digitIndex = 0;\n\n  return (\n    <Root\n      data-slot=\"number-flow\"\n      data-variant={variant}\n      data-trend={up ? \"up\" : \"down\"}\n      aria-atomic={props[\"aria-live\"] ? true : undefined}\n      className={cn(\"inline-block tabular-nums\", className)}\n      style={{ [`--${PREFIX}-enter`]: up ? \"100%\" : \"-100%\", ...style } as CSSProperties}\n      {...props}\n    >\n      <style href={PREFIX} precedence=\"dowel\">\n        {STYLES}\n      </style>\n      {/* The settled value, once, for assistive technology. The reels below are\n          hidden: read cell by cell they would be thirty digits per place. */}\n      <span className=\"sr-only\">{text}</span>\n      {/* Left to right whatever the page direction: the tokens are flex items,\n          and an RTL row would reverse the digits. */}\n      <span\n        ref={display}\n        aria-hidden=\"true\"\n        dir=\"ltr\"\n        data-slot=\"number-flow-display\"\n        className={numberFlowVariants({ variant })}\n      >\n        {tokens.map((token) => (\n          <span key={token.key} data-slot=\"number-flow-token\" className=\"inline-flex\">\n            {token.kind === \"digit\" ? (\n              <Digit\n                digit={token.digit}\n                up={up}\n                index={digitIndex++}\n                stagger={stagger}\n                glyphs={glyphs}\n                variant={variant}\n              />\n            ) : (\n              <span className=\"whitespace-pre\">{token.text}</span>\n            )}\n          </span>\n        ))}\n      </span>\n    </Root>\n  );\n}\n\nexport type PriceFlowProps = NumberFlowProps;\n\n/**\n * The source's Price Flow: two-digit minimum and a 50ms stagger from the\n * leading digit. Pass `format` for a currency; the stagger is kept.\n */\nexport function PriceFlow({ format, stagger = 50, ...props }: PriceFlowProps) {\n  return (\n    <NumberFlow format={format ?? { minimumIntegerDigits: 2 }} stagger={stagger} {...props} />\n  );\n}\n\nexport { numberFlowDigitVariants, numberFlowVariants };\n"],"mappings":";;;;;;AAuCA,MAAM,SAAS;AAEf,MAAM,SAAS;;wHAEyG,OAAO;;;AAI/H,MAAM,OAAO;AACb,MAAM,QAAQ,MAAM,KAAK,EAAE,QAAQ,GAAS,IAAI,GAAG,UAAU,KAAK;;AAGlE,MAAM,qBAAqB,IAAI,gDAAgD;CAC7E,UAAU,EACR,SAAS;EACP,OAAO;EACP,OAAO;CACT,EACF;CACA,iBAAiB,EAAE,SAAS,QAAQ;AACtC,CAAC;;AAGD,MAAM,0BAA0B,IAAI,uDAAuD;CACzF,UAAU,EACR,SAAS;EACP,OAAO;EACP,OACE;CACJ,EACF;CACA,iBAAiB,EAAE,SAAS,QAAQ;AACtC,CAAC;AAkCD,MAAM,6BAAa,IAAI,IAA6D;;AAGpF,SAAS,aAAa,SAA+B,SAAmC;CACtF,MAAM,KAAK,KAAK,UAAU,CAAC,SAAS,OAAO,CAAC;CAC5C,IAAI,SAAS,WAAW,IAAI,EAAE;CAC9B,IAAI,CAAC,QAAQ;EACX,MAAM,SAAS,IAAI,KAAK,aAAa,SAAS,OAAO;EACrD,MAAM,EAAE,QAAQ,oBAAoB,OAAO,gBAAgB;EAC3D,MAAM,QAAQ,IAAI,KAAK,aAAa,QAAQ;GAAE;GAAiB,aAAa;EAAM,CAAC;EACnF,SAAS;GAAE;GAAQ,QAAQ,MAAM,MAAM,GAAG,IAAI,CAAC,CAAC,KAAK,UAAU,MAAM,OAAO,KAAK,CAAC;EAAE;EACpF,WAAW,IAAI,IAAI,MAAM;CAC3B;CACA,OAAO;AACT;;AAGA,SAAS,SAAS,OAAgC,QAA2B;CAK3E,IAAI,QAJkB,MACnB,QAAQ,SAAS,KAAK,SAAS,SAAS,CAAC,CACzC,QAAQ,OAAO,SAAS,QAAQ,CAAC,GAAG,KAAK,KAAK,CAAC,CAAC,QAAQ,CAEnC;CACxB,IAAI,WAAW;CACf,MAAM,uBAAO,IAAI,IAAoB;CACrC,MAAM,SAAkB,CAAC;CAEzB,KAAK,MAAM,QAAQ,OACjB,IAAI,KAAK,SAAS,aAAa,KAAK,SAAS,YAC3C,KAAK,MAAM,QAAQ,KAAK,OAAO;EAC7B,MAAM,MAAM,KAAK,SAAS,YAAY,IAAI,OAAO,EAAE,KAAK,MAAM,IAAI,OAAO,UAAU;EACnF,MAAM,QAAQ,OAAO,QAAQ,IAAI;EACjC,OAAO,KACL,UAAU,KAAK;GAAE,MAAM;GAAU;GAAK,MAAM;EAAK,IAAI;GAAE,MAAM;GAAS;GAAK;EAAM,CACnF;CACF;MACK,IAAI,KAAK,SAAS,SACvB,OAAO,KAAK;EAAE,MAAM;EAAU,KAAK,IAAI,OAAO,KAAK;EAAK,MAAM,KAAK;CAAM,CAAC;MACrE;EAGL,MAAM,QAAQ,KAAK,IAAI,KAAK,IAAI,KAAK;EACrC,KAAK,IAAI,KAAK,MAAM,QAAQ,CAAC;EAC7B,OAAO,KAAK;GACV,MAAM;GACN,KAAK,GAAG,KAAK,OAAO,OAAO,KAAK,EAAE,GAAG,KAAK;GAC1C,MAAM,KAAK;EACb,CAAC;CACH;CAEF,OAAO;AACT;;AASA,SAAS,OAAO,MAAc,OAAe,IAAqB;CAChE,MAAM,SAAS;EAAC;EAAO,QAAQ;EAAM,QAAQ;CAAQ;CACrD,IAAI,IAAI,OAAO,OAAO,MAAM,aAAa,WAAW,IAAI,KAAK,QAAQ;CACrE,OAAO,OAAO,QAAQ,CAAC,CAAC,MAAM,aAAa,WAAW,IAAI,KAAK;AACjE;AAWA,SAAS,MAAM,EAAE,OAAO,IAAI,OAAO,SAAS,QAAQ,WAAuB;CACzE,MAAM,CAAC,MAAM,WAAW,SAAe;EAAE;EAAO,UAAU,OAAO;EAAO,UAAU;CAAM,CAAC;CAIzF,IAAI,KAAK,UAAU,OACjB,QAAQ;EAAE;EAAO,UAAU,OAAO,KAAK,UAAU,OAAO,EAAE;EAAG,UAAU;CAAM,CAAC;CAGhF,SAAS,oBAAoB,OAAyC;EACpE,IAAI,MAAM,WAAW,MAAM,iBAAiB,MAAM,iBAAiB,aAAa;EAChF,MAAM,OAAO,OAAO,KAAK;EACzB,IAAI,KAAK,aAAa,MAAM,QAAQ;GAAE,GAAG;GAAM,UAAU;GAAM,UAAU;EAAK,CAAC;CACjF;CAEA,MAAM,SAAS,KAAK,WAChB,oBACA;CAEJ,OACE,qBAAC,QAAD;EACE,aAAU;EACV,cAAY;EACZ,WAAW,wBAAwB,EAAE,QAAQ,CAAC;EAHhD,UAAA,CAME,oBAAC,QAAD;GAAM,WAAU;GAAa,UAAA,OAAO;EAAa,CAAA,GACjD,oBAAC,QAAD;GACE,aAAU;GACV,iBAAe,KAAK;GACpB,iBAAe,KAAK,WAAW,KAAK,KAAA;GACpC,iBAAiB;GACjB,WAAW,GAAG,yCAAyC,MAAM;GAC7D,OAAO;IACL,WAAW,cAAc,OAAO,CAAC,KAAK,WAAW,GAAG,EAAE;IACtD,iBAAiB,QAAQ,OAAO,QAAQ,OAAO,EAAE;GACnD;GAEC,UAAA,MAAM,KAAK,SACV,oBAAC,QAAD;IAEE,eAAa,SAAS,KAAK,WAAW,KAAK,KAAA;IAC3C,WAAW,GACT,mHACA,MACF;IACA,OAAO;KAAE,KAAK,GAAG,OAAO,OAAO,GAAG,EAAE;KAAI,iBAAiB;IAAU;IAElE,UAAA,OAAO,OAAO;GACX,GATC,IASD,CACP;EACG,CAAA,CACF;;AAEV;;AAGA,SAAgB,WAAW,EACzB,WACA,OACA,OACA,SACA,QACA,QAAQ,QACR,UAAU,GACV,UAAU,SACV,KAAK,QACL,GAAG,SACe;CAGlB,MAAM,OAAO;CAEb,MAAM,EAAE,QAAQ,WAAW,WAAW,aAAa,SAAS,UAAU,CAAC,CAAC;CACxE,MAAM,OAAO,UAAU,OAAO,KAAK;CACnC,MAAM,SAAS,SAAS,UAAU,cAAc,KAAK,GAAG,MAAM;CAG9D,MAAM,CAAC,MAAM,WAAW,SAAS;EAAE;EAAO,IAAI;CAAK,CAAC;CACpD,IAAI,KAAK,UAAU,OAAO,QAAQ;EAAE;EAAO,IAAI,QAAQ,KAAK;CAAM,CAAC;CACnE,MAAM,KAAK,UAAU,SAAS,KAAK,KAAK,UAAU;CAIlD,MAAM,UAAU,OAAwB,IAAI;CAC5C,gBAAgB;EACd,QAAQ,SAAS,aAAa,cAAc,EAAE;CAChD,GAAG,CAAC,CAAC;CAEL,IAAI,aAAa;CAEjB,OACE,qBAAC,MAAD;EACE,aAAU;EACV,gBAAc;EACd,cAAY,KAAK,OAAO;EACxB,eAAa,MAAM,eAAe,OAAO,KAAA;EACzC,WAAW,GAAG,6BAA6B,SAAS;EACpD,OAAO;IAAG,KAAK,OAAO,UAAU,KAAK,SAAS;GAAS,GAAG;EAAM;EAChE,GAAI;EAPN,UAAA;GASE,oBAAC,SAAD;IAAO,MAAM;IAAQ,YAAW;IAC7B,UAAA;GACI,CAAA;GAGP,oBAAC,QAAD;IAAM,WAAU;IAAW,UAAA;GAAW,CAAA;GAGtC,oBAAC,QAAD;IACE,KAAK;IACL,eAAY;IACZ,KAAI;IACJ,aAAU;IACV,WAAW,mBAAmB,EAAE,QAAQ,CAAC;IAExC,UAAA,OAAO,KAAK,UACX,oBAAC,QAAD;KAAsB,aAAU;KAAoB,WAAU;KAC3D,UAAA,MAAM,SAAS,UACd,oBAAC,OAAD;MACE,OAAO,MAAM;MACT;MACJ,OAAO;MACE;MACD;MACC;KACV,CAAA,IAED,oBAAC,QAAD;MAAM,WAAU;MAAkB,UAAA,MAAM;KAAW,CAAA;IAEjD,GAbK,MAAM,GAaX,CACP;GACG,CAAA;EACF;;AAEV;;;;;AAQA,SAAgB,UAAU,EAAE,QAAQ,UAAU,IAAI,GAAG,SAAyB;CAC5E,OACE,oBAAC,YAAD;EAAY,QAAQ,UAAU,EAAE,sBAAsB,EAAE;EAAY;EAAS,GAAI;CAAQ,CAAA;AAE7F"}

package/dist/components/orb-face/index.d.ts

@@ -0,0 +1,2 @@
+import { OrbFace, OrbFaceColors, OrbFaceProps, OrbFaceState } from "./orb-face.js";
+export { OrbFace, type OrbFaceColors, type OrbFaceProps, type OrbFaceState };

package/dist/components/orb-face/index.js

@@ -0,0 +1,2 @@
+import { OrbFace } from "./orb-face.js";
+export { OrbFace };

package/dist/components/orb-face/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/orb-face/meta.ts
+const meta = defineMeta({
+	name: "orb-face",
+	title: "Orb Face",
+	description: "A cartoon assistant orb whose gaze follows the pointer, who blinks, and whose expression tells its state — listening, thinking, speaking, done or broken.",
+	category: "ai",
+	status: "beta",
+	dependencies: ["motion"],
+	registryDependencies: [],
+	files: ["orb-face.tsx"],
+	a11y: "Decorative: aria-hidden unless given aria-label or aria-labelledby, when it becomes role=\"img\" — keep that label in step with `state`, and keep a text status nearby, because an expression is not a word. It is never a live region. Under reduced motion the gaze, blinking and thinking glances are switched off and every keyframe stops, leaving each state's settled face; the gaze spring is the only use of `motion`."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/orb-face/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/orb-face/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"orb-face\",\n  title: \"Orb Face\",\n  description:\n    \"A cartoon assistant orb whose gaze follows the pointer, who blinks, and whose expression tells its state — listening, thinking, speaking, done or broken.\",\n  category: \"ai\",\n  status: \"beta\",\n  dependencies: [\"motion\"],\n  registryDependencies: [],\n  files: [\"orb-face.tsx\"],\n  a11y:\n    'Decorative: aria-hidden unless given aria-label or aria-labelledby, when it becomes role=\"img\" — keep that ' +\n    \"label in step with `state`, and keep a text status nearby, because an expression is not a word. It is never \" +\n    \"a live region. Under reduced motion the gaze, blinking and thinking glances are switched off and every \" +\n    \"keyframe stops, leaving each state's settled face; the gaze spring is the only use of `motion`.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,QAAQ;CACvB,sBAAsB,CAAC;CACvB,OAAO,CAAC,cAAc;CACtB,MACE;AAIJ,CAAC"}

package/dist/components/orb-face/orb-face.d.ts

@@ -0,0 +1,29 @@
+import { ComponentPropsWithRef } from "react";
+//#region src/components/orb-face/orb-face.d.ts
+type OrbFaceState = "idle" | "listening" | "thinking" | "streaming" | "speaking" | "done" | "error";
+interface OrbFaceColors {
+  body?: string;
+  bodyEdge?: string;
+  /** Eyes and mouth. */
+  feature?: string;
+}
+interface OrbFaceProps extends Omit<ComponentPropsWithRef<"svg">, "children" | "color"> {
+  /** What the assistant is doing, told by expression. */
+  state?: OrbFaceState;
+  /**
+   * Follow the pointer with its gaze. Turn it off in dense UI, where a dozen
+   * faces tracking the cursor would be noise.
+   */
+  gaze?: boolean;
+  /** Live audio level, 0–1: while listening, the body swells with the voice. */
+  amplitude?: number;
+  /** Rendered size. A number is pixels; a string is any CSS length. */
+  size?: number | string;
+  /** Any CSS colours — theme tokens by default. */
+  colors?: OrbFaceColors;
+}
+/** A cartoon orb whose gaze follows the pointer and whose face tells its state. */
+declare function OrbFace({ className, state, gaze, amplitude, size, colors, style, ref, ...props }: OrbFaceProps): import("react").JSX.Element;
+//#endregion
+export { OrbFace, OrbFaceColors, OrbFaceProps, OrbFaceState };
+//# sourceMappingURL=orb-face.d.ts.map

package/dist/components/orb-face/orb-face.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"orb-face.d.ts","names":[],"sources":["../../../src/components/orb-face/orb-face.tsx"],"mappings":";;KAuFY;UAWK;EACf;EACA;;EAEA;;UAUe,qBAAqB,KAAK;;EAEzC,QAAQ;;;;;EAKR;;EAEA;;EAEA;;EAEA,SAAS;;;iBAmDK,UACd,WACA,OACA,MACA,WACA,MACA,QACA,OACA,QACG,SACF,+BAAY,IAAA"}

package/dist/components/orb-face/orb-face.js

@@ -0,0 +1,353 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState, useSyncExternalStore } from "react";
+import { MotionConfig, motion, useSpring } from "motion/react";
+//#region src/components/orb-face/orb-face.tsx
+const PREFIX = "dowel-orb-face";
+const VIEWBOX = 100;
+const CENTER = VIEWBOX / 2;
+const EYE_OFFSET = 16;
+const EYE_Y = 44;
+const EYE_WIDTH = 11;
+const EYE_HEIGHT = 26;
+const EYE_RADIUS = 5.5;
+/** How far the pupils travel from centre, in viewBox units. */
+const GAZE_RANGE = 5.5;
+/** Pointer distance, in px, at which the gaze reaches full deflection. */
+const GAZE_FALLOFF = 220;
+const BLINK_MIN_MS = 3200;
+const BLINK_EXTRA_MS = 2600;
+const BLINK_MS = 230;
+const DOUBLE_BLINK_CHANCE = .25;
+/** Thinking saccades: the eyes look away and up, the way people search. */
+const SACCADE_MIN_MS = 700;
+const SACCADE_EXTRA_MS = 700;
+const SACCADES = [
+	{
+		x: -1,
+		y: -1
+	},
+	{
+		x: 1,
+		y: -1
+	},
+	{
+		x: -.6,
+		y: -.4
+	},
+	{
+		x: .8,
+		y: -.9
+	}
+];
+/** A ~1.25-turn swirl; spun in place it reads as dizzy. */
+const SPIRAL = "M0 0C-0.6 -4 5 -5 6 -0.6C7 4.5 1 8 -4 6C-9 4.5 -9.5 -2 -6 -6";
+function scaled(ms) {
+	return `calc(${String(ms)}ms * var(--motion-scale, 1))`;
+}
+const EASE_OUT = "cubic-bezier(0.23, 1, 0.32, 1)";
+const STYLES = `
+.${PREFIX}{display:block;overflow:visible;flex-shrink:0}
+.${PREFIX} [data-slot=orb-face-body]{transform-box:fill-box;transform-origin:center;scale:calc(1 + var(--face-amplitude, 0) * .07);translate:0 calc(var(--face-amplitude, 0) * -2px)}
+.${PREFIX}[data-state=done] [data-slot=orb-face-body]{animation:${PREFIX}-hop ${scaled(850)} ${EASE_OUT} 1}
+.${PREFIX}[data-state=error] [data-slot=orb-face-body]{animation:${PREFIX}-wobble ${scaled(1050)} cubic-bezier(0.45, 0, 0.55, 1) 1}
+.${PREFIX} [data-part=eye]{transform-box:fill-box;transform-origin:center}
+.${PREFIX} [data-blink=single] [data-part=eye]{animation:${PREFIX}-blink ${scaled(BLINK_MS)} linear 1}
+.${PREFIX} [data-blink=double] [data-part=eye]{animation:${PREFIX}-blink ${scaled(BLINK_MS)} linear 2}
+.${PREFIX} [data-part=arc]{stroke-dasharray:1;stroke-dashoffset:0;animation:${PREFIX}-draw ${scaled(320)} ${EASE_OUT} 1 backwards}
+.${PREFIX} [data-part=spiral]{animation:${PREFIX}-spin ${scaled(2400)} linear infinite}
+.${PREFIX} [data-part=spiral][data-side=left]{animation-direction:reverse}
+.${PREFIX} [data-part=hmm]{animation:${PREFIX}-hmm ${scaled(2400)} ${EASE_OUT} infinite}
+.${PREFIX} [data-part=talk]{transform-box:fill-box;transform-origin:center;animation:${PREFIX}-talk ${scaled(280)} ease-in-out infinite alternate}
+@keyframes ${PREFIX}-blink{0%,100%{transform:scaleY(1)}30%{transform:scaleY(.08)}}
+@keyframes ${PREFIX}-hop{0%{transform:translateY(0) scale(1,1)}12%{transform:translateY(3px) scale(1.08,.9)}40%{transform:translateY(-9px) scale(.94,1.08)}62%{transform:translateY(0) scale(1.04,.95)}82%{transform:translateY(-3px) scale(.99,1.02)}100%{transform:translateY(0) scale(1,1)}}
+@keyframes ${PREFIX}-wobble{0%,100%{transform:translateX(0) rotate(0)}17%{transform:translateX(-5px) rotate(-11deg)}33%{transform:translateX(4px) rotate(9deg)}50%{transform:translateX(-3px) rotate(-7deg)}67%{transform:translateX(2px) rotate(5deg)}83%{transform:translateX(-1px) rotate(-3deg)}}
+@keyframes ${PREFIX}-draw{from{stroke-dashoffset:1}}
+@keyframes ${PREFIX}-spin{to{transform:rotate(360deg)}}
+@keyframes ${PREFIX}-hmm{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
+@keyframes ${PREFIX}-talk{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
+`;
+/** How open the eyes rest in each state. Drives height; the blink owns scale. */
+const EYE_OPENNESS = {
+	listening: 1.15,
+	thinking: .62,
+	streaming: .88,
+	speaking: .92
+};
+/** Features in primary-foreground on a primary body contrast in every theme. */
+const DEFAULT_COLORS = {
+	body: "var(--color-primary)",
+	bodyEdge: "color-mix(in oklab, var(--color-primary) 72%, var(--color-foreground))",
+	feature: "var(--color-primary-foreground)"
+};
+const REDUCED_MOTION = "(prefers-reduced-motion: reduce)";
+function subscribeToReducedMotion(onChange) {
+	const query = window.matchMedia(REDUCED_MOTION);
+	query.addEventListener("change", onChange);
+	return () => query.removeEventListener("change", onChange);
+}
+/** Read live, not cached, so the face follows the setting as it changes. */
+function usePrefersReducedMotion() {
+	return useSyncExternalStore(subscribeToReducedMotion, () => window.matchMedia(REDUCED_MOTION).matches, () => false);
+}
+/** Random blinking — occasionally a double — while the eyes are open. */
+function useBlink(enabled) {
+	const [blink, setBlink] = useState(null);
+	useEffect(() => {
+		if (!enabled) return;
+		let schedule;
+		let reset;
+		const next = () => {
+			schedule = setTimeout(() => {
+				const double = Math.random() < DOUBLE_BLINK_CHANCE;
+				setBlink(double ? "double" : "single");
+				reset = setTimeout(() => setBlink(null), BLINK_MS * (double ? 2 : 1) + 50);
+				next();
+			}, BLINK_MIN_MS + Math.random() * BLINK_EXTRA_MS);
+		};
+		next();
+		return () => {
+			clearTimeout(schedule);
+			clearTimeout(reset);
+			setBlink(null);
+		};
+	}, [enabled]);
+	return blink;
+}
+/** A cartoon orb whose gaze follows the pointer and whose face tells its state. */
+function OrbFace({ className, state = "idle", gaze = true, amplitude, size = 128, colors, style, ref, ...props }) {
+	const reduced = usePrefersReducedMotion();
+	const palette = {
+		...DEFAULT_COLORS,
+		...colors
+	};
+	const gradientId = `${PREFIX}-${useId().replace(/:/g, "")}`;
+	const svgRef = useRef(null);
+	const gazeX = useSpring(0, {
+		damping: 26,
+		stiffness: 220
+	});
+	const gazeY = useSpring(0, {
+		damping: 26,
+		stiffness: 220
+	});
+	const happy = state === "done";
+	const broken = state === "error";
+	const thinking = state === "thinking";
+	const eyesOpen = !happy && !broken;
+	const blink = useBlink(eyesOpen && !reduced);
+	const named = props["aria-label"] != null || props["aria-labelledby"] != null;
+	const tracking = gaze && !reduced && !thinking && eyesOpen;
+	useEffect(() => {
+		if (!tracking) {
+			if (!thinking) {
+				gazeX.set(0);
+				gazeY.set(0);
+			}
+			return;
+		}
+		const handle = (event) => {
+			const svg = svgRef.current;
+			if (!svg) return;
+			const rect = svg.getBoundingClientRect();
+			const dx = event.clientX - (rect.left + rect.width / 2);
+			const dy = event.clientY - (rect.top + rect.height / 2);
+			const reach = Math.min(1, Math.hypot(dx, dy) / GAZE_FALLOFF) * GAZE_RANGE;
+			const angle = Math.atan2(dy, dx);
+			gazeX.set(Math.cos(angle) * reach);
+			gazeY.set(Math.sin(angle) * reach);
+		};
+		window.addEventListener("pointermove", handle);
+		return () => window.removeEventListener("pointermove", handle);
+	}, [
+		tracking,
+		thinking,
+		gazeX,
+		gazeY
+	]);
+	useEffect(() => {
+		if (!thinking) return;
+		if (reduced) {
+			gazeX.set(0);
+			gazeY.set(0);
+			return;
+		}
+		let timeout;
+		let index = 0;
+		const next = () => {
+			timeout = setTimeout(() => {
+				const target = SACCADES[index % SACCADES.length] ?? SACCADES[0];
+				index += 1;
+				gazeX.set(target.x * GAZE_RANGE);
+				gazeY.set(target.y * GAZE_RANGE);
+				next();
+			}, SACCADE_MIN_MS + Math.random() * SACCADE_EXTRA_MS);
+		};
+		next();
+		return () => clearTimeout(timeout);
+	}, [
+		thinking,
+		reduced,
+		gazeX,
+		gazeY
+	]);
+	const openness = EYE_OPENNESS[state] ?? 1;
+	const resolvedSize = typeof size === "number" ? `${String(size)}px` : size;
+	const level = state === "listening" && amplitude != null && !reduced ? amplitude : 0;
+	function eye(side) {
+		const height = EYE_HEIGHT * openness;
+		return /* @__PURE__ */ jsx("rect", {
+			"data-part": "eye",
+			x: CENTER + side * EYE_OFFSET - EYE_WIDTH / 2,
+			y: EYE_Y + (EYE_HEIGHT - height) / 2,
+			width: EYE_WIDTH,
+			height,
+			rx: Math.min(EYE_RADIUS, height / 2),
+			fill: palette.feature
+		}, side);
+	}
+	function arc(side) {
+		const cx = CENTER + side * EYE_OFFSET;
+		return /* @__PURE__ */ jsx("path", {
+			"data-part": "arc",
+			pathLength: 1,
+			d: `M${String(cx - 8)} ${String(60)} Q${String(cx)} ${String(46)} ${String(cx + 8)} ${String(60)}`,
+			fill: "none",
+			stroke: palette.feature,
+			strokeLinecap: "round",
+			strokeWidth: 7,
+			style: { animationDelay: side === 1 ? scaled(60) : void 0 }
+		}, side);
+	}
+	function spiral(side) {
+		return /* @__PURE__ */ jsx("g", {
+			transform: `translate(${String(CENTER + side * EYE_OFFSET)} ${String(57)}) scale(1.5)`,
+			children: /* @__PURE__ */ jsx("path", {
+				"data-part": "spiral",
+				"data-side": side === -1 ? "left" : "right",
+				d: SPIRAL,
+				fill: "none",
+				stroke: palette.feature,
+				strokeLinecap: "round",
+				strokeWidth: 3
+			})
+		}, side);
+	}
+	function mouth() {
+		const line = {
+			stroke: palette.feature,
+			strokeLinecap: "round",
+			strokeWidth: 4
+		};
+		if (happy) return /* @__PURE__ */ jsx("path", {
+			"data-part": "arc",
+			"data-slot": "orb-face-mouth",
+			pathLength: 1,
+			d: `M${String(39)} 76 Q${String(CENTER)} 88 ${String(61)} 76`,
+			fill: "none",
+			...line,
+			strokeWidth: 5
+		});
+		if (broken) return /* @__PURE__ */ jsx("path", {
+			"data-slot": "orb-face-mouth",
+			d: `M${String(38)} 79 q6 -7 12 0 t12 0`,
+			fill: "none",
+			...line
+		});
+		if (state === "speaking") return /* @__PURE__ */ jsx("ellipse", {
+			"data-slot": "orb-face-mouth",
+			"data-part": "talk",
+			cx: CENTER,
+			cy: 78,
+			rx: 6,
+			ry: 4.5,
+			fill: palette.feature
+		});
+		return /* @__PURE__ */ jsx("line", {
+			"data-slot": "orb-face-mouth",
+			"data-part": thinking ? "hmm" : void 0,
+			x1: thinking ? 44 : 43,
+			x2: thinking ? 58 : 57,
+			y1: 78,
+			y2: 78,
+			...line
+		});
+	}
+	function setRefs(node) {
+		svgRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}
+	return /* @__PURE__ */ jsxs(MotionConfig, {
+		reducedMotion: "user",
+		children: [/* @__PURE__ */ jsx("style", {
+			href: PREFIX,
+			precedence: "dowel",
+			children: STYLES
+		}), /* @__PURE__ */ jsxs("svg", {
+			ref: setRefs,
+			viewBox: `0 0 ${String(VIEWBOX)} ${String(VIEWBOX)}`,
+			"data-slot": "orb-face",
+			"data-state": state,
+			role: named ? "img" : void 0,
+			"aria-hidden": named ? void 0 : true,
+			className: cn(PREFIX, className),
+			style: {
+				width: resolvedSize,
+				height: resolvedSize,
+				"--face-amplitude": String(Math.min(1, Math.max(0, level))),
+				...style
+			},
+			...props,
+			children: [/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("radialGradient", {
+				id: gradientId,
+				cx: "35%",
+				cy: "28%",
+				r: "80%",
+				children: [/* @__PURE__ */ jsx("stop", {
+					offset: "0%",
+					stopColor: palette.body
+				}), /* @__PURE__ */ jsx("stop", {
+					offset: "100%",
+					stopColor: palette.bodyEdge
+				})]
+			}) }), /* @__PURE__ */ jsxs("g", {
+				"data-slot": "orb-face-body",
+				children: [
+					/* @__PURE__ */ jsx("circle", {
+						cx: CENTER,
+						cy: CENTER,
+						r: 48,
+						fill: `url(#${gradientId})`
+					}),
+					/* @__PURE__ */ jsx("ellipse", {
+						cx: 36,
+						cy: 28,
+						rx: 13,
+						ry: 8,
+						fill: palette.body,
+						opacity: .7,
+						style: { mixBlendMode: "screen" }
+					}),
+					eyesOpen ? /* @__PURE__ */ jsxs(motion.g, {
+						"data-slot": "orb-face-eyes",
+						"data-blink": blink ?? void 0,
+						style: {
+							x: gazeX,
+							y: gazeY
+						},
+						children: [eye(-1), eye(1)]
+					}) : null,
+					happy ? [arc(-1), arc(1)] : null,
+					broken ? [spiral(-1), spiral(1)] : null,
+					mouth()
+				]
+			})]
+		})]
+	});
+}
+//#endregion
+export { OrbFace };
+
+//# sourceMappingURL=orb-face.js.map