@krizaka/ui 2.6.0 → 2.9.0

package/dist/native.js

@@ -166,6 +166,16 @@ var marks = /* @__PURE__ */ Object.freeze({
       "100%",
       "#f472b6"
     ]
+  ],
+  "yazakia": [
+    [
+      "0%",
+      "#079d61"
+    ],
+    [
+      "100%",
+      "#089b96"
+    ]
   ]
 });
 
@@ -709,8 +719,88 @@ var styles8 = StyleSheet8.create({
   action: { marginTop: 8, flexDirection: "row", flexWrap: "wrap", justifyContent: "center", gap: 8 }
 });
 
+// src/native/goal-gauge.tsx
+import { Animated as Animated4, StyleSheet as StyleSheet9, View as View6 } from "react-native";
+
+// src/native/story-motion.ts
+import * as React7 from "react";
+import { AccessibilityInfo as AccessibilityInfo2, Animated as Animated3, Easing } from "react-native";
+function useEntrance(animated, delay = 0, duration = 700) {
+  const [value] = React7.useState(() => new Animated3.Value(animated ? 0 : 1));
+  React7.useEffect(() => {
+    if (!animated) return;
+    let cancelled = false;
+    void AccessibilityInfo2.isReduceMotionEnabled().then((reduce) => {
+      if (cancelled) return;
+      if (reduce) value.setValue(1);
+      else Animated3.timing(value, { toValue: 1, duration, delay, easing: Easing.out(Easing.cubic), useNativeDriver: true }).start();
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [animated, delay, duration, value]);
+  return value;
+}
+
+// src/native/goal-gauge.tsx
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+function Cell({ lit, animate, order, animated, arcade }) {
+  const { theme } = useTheme();
+  const t = useEntrance(animated && animate, 300 + order * 100, 350);
+  const spentOpacity = arcade ? 0.14 : 1;
+  const opacity = !animate ? 1 : lit ? t.interpolate({ inputRange: [0, 1], outputRange: [0.25, 1] }) : t.interpolate({ inputRange: [0, 1], outputRange: [1, arcade ? 0.14 : 1] });
+  const color = lit || arcade ? theme.accent : theme.surface3;
+  return /* @__PURE__ */ jsx10(
+    Animated4.View,
+    {
+      style: [styles9.cell, arcade ? styles9.cellArcade : null, { backgroundColor: color, opacity: lit || animate ? opacity : spentOpacity }]
+    }
+  );
+}
+function GoalGauge({ label, segments, value, valueText, mode = "fill", showLabel = true, variant = "default", animated = true, style, ...props }) {
+  const { theme } = useTheme();
+  const total = Math.max(1, Math.round(segments));
+  const lit = Math.min(total, Math.max(0, Math.round(value ?? total)));
+  const words = valueText ?? `${lit} / ${total}`;
+  const arcade = variant === "arcade";
+  return /* @__PURE__ */ jsxs7(
+    View6,
+    {
+      accessible: true,
+      role: "meter",
+      "aria-label": label,
+      "aria-valuemin": 0,
+      "aria-valuemax": total,
+      "aria-valuenow": lit,
+      "aria-valuetext": words,
+      ...props,
+      style: [styles9.root, style],
+      children: [
+        showLabel ? /* @__PURE__ */ jsxs7(View6, { "aria-hidden": true, style: [styles9.head, arcade ? styles9.headArcade : null], children: [
+          /* @__PURE__ */ jsx10(Txt, { variant: arcade ? "mono" : "caption", tone: "secondary", children: arcade ? label.toUpperCase() : label }),
+          arcade ? null : /* @__PURE__ */ jsx10(Txt, { variant: "caption", children: words })
+        ] }) : null,
+        /* @__PURE__ */ jsx10(View6, { "aria-hidden": true, style: [styles9.cells, arcade ? [styles9.cellsArcade, { borderColor: theme.borderSubtle, backgroundColor: theme.surface1 }] : null], children: Array.from({ length: total }, (_, i) => {
+          const on = i < lit;
+          const animate = mode === "fill" ? on : !on;
+          return /* @__PURE__ */ jsx10(Cell, { lit: on, animate, order: mode === "fill" ? i : i - lit, animated, arcade }, i);
+        }) })
+      ]
+    }
+  );
+}
+var styles9 = StyleSheet9.create({
+  root: { alignSelf: "stretch", gap: 8 },
+  head: { flexDirection: "row", justifyContent: "space-between", alignItems: "baseline", gap: 12 },
+  headArcade: { justifyContent: "center" },
+  cells: { flexDirection: "row", gap: 4 },
+  cellsArcade: { padding: 3, borderWidth: 1, borderRadius: 4, transform: [{ skewX: "-14deg" }] },
+  cell: { flex: 1, height: 8, borderRadius: 4 },
+  cellArcade: { height: 10, borderRadius: 1 }
+});
+
 // src/native/KrizakaMark.tsx
-import { View as View6 } from "react-native";
+import { View as View7 } from "react-native";
 import Svg2, { Circle, Defs as Defs2, G as Group, LinearGradient as LinearGradient2, Path, RadialGradient, Stop as Stop2 } from "react-native-svg";
 
 // src/marks/krizaka-geometry.ts
@@ -733,24 +823,24 @@ var KRIZAKA = {
 };
 
 // src/native/mark-motion.ts
-import { useEffect as useEffect4, useState as useState6 } from "react";
-import { AccessibilityInfo as AccessibilityInfo2, Animated as Animated3, Easing } from "react-native";
+import { useEffect as useEffect5, useState as useState7 } from "react";
+import { AccessibilityInfo as AccessibilityInfo3, Animated as Animated5, Easing as Easing2 } from "react-native";
 var markA11y = (title) => title ? { accessible: true, accessibilityRole: "image", accessibilityLabel: title } : { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants" };
 function useMarkMotion(size, animated, spinMs = 3e4) {
-  const [spin] = useState6(() => new Animated3.Value(0));
-  const [pulse] = useState6(() => new Animated3.Value(0));
-  useEffect4(() => {
+  const [spin] = useState7(() => new Animated5.Value(0));
+  const [pulse] = useState7(() => new Animated5.Value(0));
+  useEffect5(() => {
     if (!animated) return;
     let loops = [];
     let cancelled = false;
-    void AccessibilityInfo2.isReduceMotionEnabled().then((reduce) => {
+    void AccessibilityInfo3.isReduceMotionEnabled().then((reduce) => {
       if (reduce || cancelled) return;
       loops = [
-        Animated3.loop(Animated3.timing(spin, { toValue: 1, duration: spinMs, easing: Easing.linear, useNativeDriver: true })),
-        Animated3.loop(
-          Animated3.sequence([
-            Animated3.timing(pulse, { toValue: 1, duration: 1600, easing: Easing.inOut(Easing.ease), useNativeDriver: true }),
-            Animated3.timing(pulse, { toValue: 0, duration: 1600, easing: Easing.inOut(Easing.ease), useNativeDriver: true })
+        Animated5.loop(Animated5.timing(spin, { toValue: 1, duration: spinMs, easing: Easing2.linear, useNativeDriver: true })),
+        Animated5.loop(
+          Animated5.sequence([
+            Animated5.timing(pulse, { toValue: 1, duration: 1600, easing: Easing2.inOut(Easing2.ease), useNativeDriver: true }),
+            Animated5.timing(pulse, { toValue: 0, duration: 1600, easing: Easing2.inOut(Easing2.ease), useNativeDriver: true })
           ])
         )
       ];
@@ -762,7 +852,7 @@ function useMarkMotion(size, animated, spinMs = 3e4) {
     };
   }, [animated, spin, pulse, spinMs]);
   return {
-    Animated: Animated3,
+    Animated: Animated5,
     layer: { position: "absolute", width: size, height: size },
     spinStyle: { transform: [{ rotate: spin.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "360deg"] }) }] },
     pulseStyle: { opacity: pulse.interpolate({ inputRange: [0, 1], outputRange: [0.85, 1] }) }
@@ -770,39 +860,39 @@ function useMarkMotion(size, animated, spinMs = 3e4) {
 }
 
 // src/native/KrizakaMark.tsx
-import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 function KrizakaMark({ size = 48, animated = true, title, neutral }) {
   const { theme } = useTheme();
-  const { Animated: Animated9, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated);
+  const { Animated: Animated14, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated);
   const id = useSvgId("kzm");
   const viewBox = size < 48 ? KRIZAKA.croppedViewBox : KRIZAKA.viewBox;
   const stroke = neutral ?? theme.textMuted;
-  const blue = /* @__PURE__ */ jsx10(LinearGradient2, { id: `${id}b`, gradientUnits: "userSpaceOnUse", x1: KRIZAKA.blue.x1 + KRIZAKA.offset, y1: KRIZAKA.blue.y1 + KRIZAKA.offset, x2: KRIZAKA.blue.x2 + KRIZAKA.offset, y2: KRIZAKA.blue.y2 + KRIZAKA.offset, children: KRIZAKA.blue.stops.map(([offset, color]) => /* @__PURE__ */ jsx10(Stop2, { offset, stopColor: color }, offset)) });
-  const dot = (c) => /* @__PURE__ */ jsxs7(Fragment2, { children: [
-    /* @__PURE__ */ jsx10(Circle, { cx: c.cx, cy: c.cy, r: c.r, fill: `url(#${id}b)` }),
-    /* @__PURE__ */ jsx10(Circle, { cx: c.cx, cy: c.cy, r: c.inner, fill: KRIZAKA.highlight })
+  const blue = /* @__PURE__ */ jsx11(LinearGradient2, { id: `${id}b`, gradientUnits: "userSpaceOnUse", x1: KRIZAKA.blue.x1 + KRIZAKA.offset, y1: KRIZAKA.blue.y1 + KRIZAKA.offset, x2: KRIZAKA.blue.x2 + KRIZAKA.offset, y2: KRIZAKA.blue.y2 + KRIZAKA.offset, children: KRIZAKA.blue.stops.map(([offset, color]) => /* @__PURE__ */ jsx11(Stop2, { offset, stopColor: color }, offset)) });
+  const dot = (c) => /* @__PURE__ */ jsxs8(Fragment2, { children: [
+    /* @__PURE__ */ jsx11(Circle, { cx: c.cx, cy: c.cy, r: c.r, fill: `url(#${id}b)` }),
+    /* @__PURE__ */ jsx11(Circle, { cx: c.cx, cy: c.cy, r: c.inner, fill: KRIZAKA.highlight })
   ] });
-  return /* @__PURE__ */ jsxs7(View6, { style: { width: size, height: size }, ...markA11y(title), children: [
-    /* @__PURE__ */ jsxs7(Svg2, { viewBox, style: layer, children: [
-      /* @__PURE__ */ jsxs7(Defs2, { children: [
-        /* @__PURE__ */ jsxs7(RadialGradient, { id: `${id}g`, cx: "50%", cy: "50%", r: "50%", children: [
-          /* @__PURE__ */ jsx10(Stop2, { offset: "0%", stopColor: KRIZAKA.glow.color, stopOpacity: KRIZAKA.glow.opacity }),
-          /* @__PURE__ */ jsx10(Stop2, { offset: "100%", stopColor: KRIZAKA.glow.color, stopOpacity: 0 })
+  return /* @__PURE__ */ jsxs8(View7, { style: { width: size, height: size }, ...markA11y(title), children: [
+    /* @__PURE__ */ jsxs8(Svg2, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsxs8(Defs2, { children: [
+        /* @__PURE__ */ jsxs8(RadialGradient, { id: `${id}g`, cx: "50%", cy: "50%", r: "50%", children: [
+          /* @__PURE__ */ jsx11(Stop2, { offset: "0%", stopColor: KRIZAKA.glow.color, stopOpacity: KRIZAKA.glow.opacity }),
+          /* @__PURE__ */ jsx11(Stop2, { offset: "100%", stopColor: KRIZAKA.glow.color, stopOpacity: 0 })
         ] }),
-        /* @__PURE__ */ jsxs7(LinearGradient2, { id: `${id}i`, gradientUnits: "userSpaceOnUse", x1: KRIZAKA.ink.x1 + KRIZAKA.offset, y1: KRIZAKA.ink.y1 + KRIZAKA.offset, x2: KRIZAKA.ink.x2 + KRIZAKA.offset, y2: KRIZAKA.ink.y2 + KRIZAKA.offset, children: [
-          /* @__PURE__ */ jsx10(Stop2, { offset: "0%", stopColor: theme.textSecondary }),
-          /* @__PURE__ */ jsx10(Stop2, { offset: "100%", stopColor: theme.textPrimary })
+        /* @__PURE__ */ jsxs8(LinearGradient2, { id: `${id}i`, gradientUnits: "userSpaceOnUse", x1: KRIZAKA.ink.x1 + KRIZAKA.offset, y1: KRIZAKA.ink.y1 + KRIZAKA.offset, x2: KRIZAKA.ink.x2 + KRIZAKA.offset, y2: KRIZAKA.ink.y2 + KRIZAKA.offset, children: [
+          /* @__PURE__ */ jsx11(Stop2, { offset: "0%", stopColor: theme.textSecondary }),
+          /* @__PURE__ */ jsx11(Stop2, { offset: "100%", stopColor: theme.textPrimary })
         ] }),
         blue
       ] }),
-      size >= 48 ? /* @__PURE__ */ jsx10(Circle, { cx: 200, cy: 200, r: 190, fill: `url(#${id}g)` }) : null,
-      /* @__PURE__ */ jsx10(Circle, { cx: 200, cy: 200, r: KRIZAKA.ring.r, stroke, strokeWidth: KRIZAKA.ring.width, opacity: 0.35, fill: "none" }),
-      /* @__PURE__ */ jsx10(Group, { transform: `translate(${KRIZAKA.offset} ${KRIZAKA.offset})`, children: /* @__PURE__ */ jsx10(Path, { d: KRIZAKA.shield, stroke: `url(#${id}i)`, strokeWidth: KRIZAKA.stroke, strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }) })
+      size >= 48 ? /* @__PURE__ */ jsx11(Circle, { cx: 200, cy: 200, r: 190, fill: `url(#${id}g)` }) : null,
+      /* @__PURE__ */ jsx11(Circle, { cx: 200, cy: 200, r: KRIZAKA.ring.r, stroke, strokeWidth: KRIZAKA.ring.width, opacity: 0.35, fill: "none" }),
+      /* @__PURE__ */ jsx11(Group, { transform: `translate(${KRIZAKA.offset} ${KRIZAKA.offset})`, children: /* @__PURE__ */ jsx11(Path, { d: KRIZAKA.shield, stroke: `url(#${id}i)`, strokeWidth: KRIZAKA.stroke, strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }) })
     ] }),
-    /* @__PURE__ */ jsx10(Animated9.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsx10(Svg2, { viewBox, style: layer, children: /* @__PURE__ */ jsx10(Circle, { cx: 200, cy: 200, r: KRIZAKA.orbit.r, stroke, strokeWidth: KRIZAKA.orbit.width, strokeDasharray: KRIZAKA.orbit.dash, opacity: 0.6, fill: "none" }) }) }),
-    /* @__PURE__ */ jsx10(Animated9.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsxs7(Svg2, { viewBox, style: layer, children: [
-      /* @__PURE__ */ jsx10(Defs2, { children: blue }),
-      /* @__PURE__ */ jsxs7(Group, { transform: `translate(${KRIZAKA.offset} ${KRIZAKA.offset})`, children: [
+    /* @__PURE__ */ jsx11(Animated14.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsx11(Svg2, { viewBox, style: layer, children: /* @__PURE__ */ jsx11(Circle, { cx: 200, cy: 200, r: KRIZAKA.orbit.r, stroke, strokeWidth: KRIZAKA.orbit.width, strokeDasharray: KRIZAKA.orbit.dash, opacity: 0.6, fill: "none" }) }) }),
+    /* @__PURE__ */ jsx11(Animated14.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsxs8(Svg2, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsx11(Defs2, { children: blue }),
+      /* @__PURE__ */ jsxs8(Group, { transform: `translate(${KRIZAKA.offset} ${KRIZAKA.offset})`, children: [
         dot(KRIZAKA.node),
         dot(KRIZAKA.core)
       ] })
@@ -810,9 +900,13 @@ function KrizakaMark({ size = 48, animated = true, title, neutral }) {
   ] });
 }
 
+// src/native/mascot-state.tsx
+import * as React9 from "react";
+import { AccessibilityInfo as AccessibilityInfo5, Animated as Animated7, Easing as Easing4, StyleSheet as StyleSheet10, View as View9 } from "react-native";
+
 // src/native/mascots.tsx
-import { useEffect as useEffect5, useState as useState7 } from "react";
-import { AccessibilityInfo as AccessibilityInfo3, Animated as Animated4, Easing as Easing2, View as View7 } from "react-native";
+import { useEffect as useEffect6, useState as useState8 } from "react";
+import { AccessibilityInfo as AccessibilityInfo4, Animated as Animated6, Easing as Easing3, View as View8 } from "react-native";
 import Svg3, { Circle as Circle2, Defs as Defs3, Ellipse, G, LinearGradient as LinearGradient3, Path as Path2, Rect as Rect2, Stop as Stop3 } from "react-native-svg";
 
 // src/mascots/geometry.ts
@@ -895,6 +989,25 @@ var BIRDS = {
     beak: "M55 41 L65 41 L60 50 Z",
     eyes: { at: [[52, 33], [68, 33]], white: 5, pupil: 2.4 },
     parcel: ["M60 100 L71 105 L60 110 L49 105 Z", "M49 105 L60 110 L60 118 L49 113 Z", "M71 105 L60 110 L60 118 L71 113 Z"]
+  },
+  /**
+   * The lovebird — the inseparable that introduces two people. A plump little parrot: a short tail, a round head
+   * with its coloured face (the detail colour), the white eye-rings of the species and a short hooked beak.
+   */
+  lovebird: {
+    shadow: [60, 110, 23, 3.5],
+    legs: ["M53 96 L52 106 M48 106 L56 106", "M67 96 L68 106 M64 106 L72 106"],
+    back: ["M74 90 C82 98 88 104 95 103 C91 98 86 91 82 84 Z"],
+    body: "M32 66 C32 46 88 46 88 66 C88 90 76 100 60 100 C44 100 32 90 32 66 Z",
+    belly: "M42 70 C42 59 78 59 78 70 C78 85 70 92 60 92 C50 92 42 85 42 70 Z",
+    wings: [
+      { d: "M33 60 C20 68 22 88 40 90 C35 80 34 70 33 60 Z", pivot: [33, 60] },
+      { d: mirror("M33 60 C20 68 22 88 40 90 C35 80 34 70 33 60 Z"), pivot: [87, 60] }
+    ],
+    head: { cx: 60, cy: 38, r: 21 },
+    details: ["M43 40 C42 28 51 22 60 22 C69 22 78 28 77 40 C76 50 68 55 60 55 C52 55 44 50 43 40 Z"],
+    beak: "M55 44 C55 40 65 40 65 44 C65 50 62 54 60 55 C58 54 55 50 55 44 Z",
+    eyes: { at: [[51, 36], [69, 36]], white: 4.6, pupil: 2.4 }
   }
 };
 var MOOD_PARTS = {
@@ -922,24 +1035,25 @@ var OWN_PALETTES = {
   owl: { from: "#a78bfa", to: "#6d28d9", wing: "#7c3aed", detail: "#5b21b6", beak: "#fbbf24", eye: "#1f2937" },
   duck: { from: "#f43f5e", to: "#be123c", wing: "#db2777", detail: "#9f1239", beak: "#fbbf24", eye: "#1f2937" },
   flamingo: { from: "#f9a8d4", to: "#db2777", wing: "#ec4899", detail: "#be185d", beak: "#fbbf24", eye: "#1f2937" },
-  pigeon: { from: "#22d3ee", to: "#6366f1", wing: "#a855f7", detail: "#4338ca", beak: "#f59e0b", eye: "#1f2937" }
+  pigeon: { from: "#22d3ee", to: "#6366f1", wing: "#a855f7", detail: "#4338ca", beak: "#f59e0b", eye: "#1f2937" },
+  lovebird: { from: "#6ee7b7", to: "#059669", wing: "#047857", detail: "#fb7185", beak: "#f97316", eye: "#1f2937" }
 };
 var LIGHT = "#ffffff";
 var SHADE = "#000000";
 var PARCEL = ["#f59e0b", "#d97706", "#b45309"];
 
 // src/native/mascots.tsx
-import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 function useBob(animated) {
-  const [y] = useState7(() => new Animated4.Value(0));
-  useEffect5(() => {
+  const [y] = useState8(() => new Animated6.Value(0));
+  useEffect6(() => {
     if (!animated) return;
     let loop;
     let cancelled = false;
-    void AccessibilityInfo3.isReduceMotionEnabled().then((reduce) => {
+    void AccessibilityInfo4.isReduceMotionEnabled().then((reduce) => {
       if (reduce || cancelled) return;
-      const step = (toValue) => Animated4.timing(y, { toValue, duration: 1800, easing: Easing2.inOut(Easing2.ease), useNativeDriver: true });
-      loop = Animated4.loop(Animated4.sequence([step(-2.5), step(0)]));
+      const step = (toValue) => Animated6.timing(y, { toValue, duration: 1800, easing: Easing3.inOut(Easing3.ease), useNativeDriver: true });
+      loop = Animated6.loop(Animated6.sequence([step(-2.5), step(0)]));
       loop.start();
     });
     return () => {
@@ -963,52 +1077,107 @@ function Mascot({ bird = "owl", mood = "welcome", tone: tone2 = "brand", size =
   const look3 = mood === "thinking" ? 1.4 : 0;
   const rot = (deg, [x, y]) => `rotate(${deg} ${x} ${y})`;
   const [wl, wr] = g.wings;
-  return /* @__PURE__ */ jsx11(View7, { style: [{ width: size, height: size }, style], ...markA11y(title), children: /* @__PURE__ */ jsx11(Animated4.View, { style: { transform: [{ translateY: bob }] }, children: /* @__PURE__ */ jsxs8(Svg3, { width: size, height: size, viewBox: "0 0 120 120", children: [
-    /* @__PURE__ */ jsx11(Defs3, { children: /* @__PURE__ */ jsxs8(LinearGradient3, { id, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-      /* @__PURE__ */ jsx11(Stop3, { offset: "0%", stopColor: p.from }),
-      /* @__PURE__ */ jsx11(Stop3, { offset: "100%", stopColor: p.to })
+  return /* @__PURE__ */ jsx12(View8, { style: [{ width: size, height: size }, style], ...markA11y(title), children: /* @__PURE__ */ jsx12(Animated6.View, { style: { transform: [{ translateY: bob }] }, children: /* @__PURE__ */ jsxs9(Svg3, { width: size, height: size, viewBox: "0 0 120 120", children: [
+    /* @__PURE__ */ jsx12(Defs3, { children: /* @__PURE__ */ jsxs9(LinearGradient3, { id, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+      /* @__PURE__ */ jsx12(Stop3, { offset: "0%", stopColor: p.from }),
+      /* @__PURE__ */ jsx12(Stop3, { offset: "100%", stopColor: p.to })
     ] }) }),
-    /* @__PURE__ */ jsx11(Ellipse, { cx: g.shadow[0], cy: g.shadow[1], rx: g.shadow[2], ry: g.shadow[3], fill: SHADE, opacity: 0.14 }),
-    mood === "empty" && /* @__PURE__ */ jsx11(Path2, { d: MOOD_PARTS.tray, stroke: outline, strokeWidth: 1.6, strokeDasharray: "3 3", fill: "none" }),
-    g.legs.map((d) => /* @__PURE__ */ jsx11(Path2, { d, stroke: p.beak, strokeWidth: 2.6, strokeLinecap: "round", fill: "none" }, d)),
-    g.back?.map((d) => d.endsWith("Z") ? /* @__PURE__ */ jsx11(Path2, { d, fill: p.detail, ...line }, d) : /* @__PURE__ */ jsx11(Path2, { d, stroke: outline, strokeWidth: 1.4, fill: "none" }, d)),
-    g.parcel?.map((d, i) => /* @__PURE__ */ jsx11(Path2, { d, fill: PARCEL[i], ...line }, d)),
-    /* @__PURE__ */ jsx11(Path2, { d: g.body, fill: body, ...line }),
-    /* @__PURE__ */ jsx11(Path2, { d: g.belly, fill: LIGHT, opacity: 0.28 }),
+    /* @__PURE__ */ jsx12(Ellipse, { cx: g.shadow[0], cy: g.shadow[1], rx: g.shadow[2], ry: g.shadow[3], fill: SHADE, opacity: 0.14 }),
+    mood === "empty" && /* @__PURE__ */ jsx12(Path2, { d: MOOD_PARTS.tray, stroke: outline, strokeWidth: 1.6, strokeDasharray: "3 3", fill: "none" }),
+    g.legs.map((d) => /* @__PURE__ */ jsx12(Path2, { d, stroke: p.beak, strokeWidth: 2.6, strokeLinecap: "round", fill: "none" }, d)),
+    g.back?.map((d) => d.endsWith("Z") ? /* @__PURE__ */ jsx12(Path2, { d, fill: p.detail, ...line }, d) : /* @__PURE__ */ jsx12(Path2, { d, stroke: outline, strokeWidth: 1.4, fill: "none" }, d)),
+    g.parcel?.map((d, i) => /* @__PURE__ */ jsx12(Path2, { d, fill: PARCEL[i], ...line }, d)),
+    /* @__PURE__ */ jsx12(Path2, { d: g.body, fill: body, ...line }),
+    /* @__PURE__ */ jsx12(Path2, { d: g.belly, fill: LIGHT, opacity: 0.28 }),
     [wl, wr].map((w, i) => {
       const turn = mood === "success" ? i === 0 ? 28 : -28 : mood === "welcome" && i === 1 ? -20 : 0;
-      return /* @__PURE__ */ jsxs8(G, { transform: turn ? rot(turn, w.pivot) : void 0, children: [
-        /* @__PURE__ */ jsx11(Path2, { d: w.d, fill: p.wing, ...line }),
-        /* @__PURE__ */ jsx11(Path2, { d: w.d, fill: SHADE, opacity: 0.16 })
+      return /* @__PURE__ */ jsxs9(G, { transform: turn ? rot(turn, w.pivot) : void 0, children: [
+        /* @__PURE__ */ jsx12(Path2, { d: w.d, fill: p.wing, ...line }),
+        /* @__PURE__ */ jsx12(Path2, { d: w.d, fill: SHADE, opacity: 0.16 })
       ] }, i);
     }),
-    g.neck && /* @__PURE__ */ jsx11(Path2, { d: g.neck.d, stroke: body, strokeWidth: g.neck.width, strokeLinecap: "round", fill: "none" }),
-    g.head.r > 0 && /* @__PURE__ */ jsx11(Circle2, { cx: g.head.cx, cy: g.head.cy, r: g.head.r, fill: body, ...line }),
-    g.details.map((d) => /* @__PURE__ */ jsx11(Path2, { d, fill: p.detail, ...line }, d)),
-    g.visor && /* @__PURE__ */ jsx11(Rect2, { x: g.visor.x, y: g.visor.y, width: g.visor.w, height: g.visor.h, rx: 4, fill: theme.surface0, ...line }),
+    g.neck && /* @__PURE__ */ jsx12(Path2, { d: g.neck.d, stroke: body, strokeWidth: g.neck.width, strokeLinecap: "round", fill: "none" }),
+    g.head.r > 0 && /* @__PURE__ */ jsx12(Circle2, { cx: g.head.cx, cy: g.head.cy, r: g.head.r, fill: body, ...line }),
+    g.details.map((d) => /* @__PURE__ */ jsx12(Path2, { d, fill: p.detail, ...line }, d)),
+    g.visor && /* @__PURE__ */ jsx12(Rect2, { x: g.visor.x, y: g.visor.y, width: g.visor.w, height: g.visor.h, rx: 4, fill: theme.surface0, ...line }),
     g.eyes.at.map(
-      (at, i) => mood === "empty" && g.eyes.white > 0 ? /* @__PURE__ */ jsxs8(G, { children: [
-        /* @__PURE__ */ jsx11(Circle2, { cx: at[0], cy: at[1], r: g.eyes.white, fill: LIGHT, ...line }),
-        /* @__PURE__ */ jsx11(Circle2, { cx: at[0], cy: at[1] + g.eyes.pupil * 0.7, r: g.eyes.pupil, fill: SHADE }),
-        /* @__PURE__ */ jsx11(Path2, { d: upperLid(at, g.eyes.white), fill: p.detail, ...line })
-      ] }, i) : mood === "success" || mood === "empty" ? /* @__PURE__ */ jsx11(Path2, { d: mood === "success" ? archEye(at, eyeR * 0.85) : lidEye(at, eyeR * 0.8), stroke: g.visor ? p.eye : outline, strokeWidth: 2.2, strokeLinecap: "round", fill: "none" }, i) : /* @__PURE__ */ jsxs8(G, { children: [
-        g.eyes.white > 0 && /* @__PURE__ */ jsx11(Circle2, { cx: at[0], cy: at[1], r: g.eyes.white, fill: LIGHT, ...line }),
-        /* @__PURE__ */ jsx11(Circle2, { cx: at[0] + look3, cy: at[1] - look3, r: g.eyes.pupil, fill: g.visor ? p.eye : SHADE })
+      (at, i) => mood === "empty" && g.eyes.white > 0 ? /* @__PURE__ */ jsxs9(G, { children: [
+        /* @__PURE__ */ jsx12(Circle2, { cx: at[0], cy: at[1], r: g.eyes.white, fill: LIGHT, ...line }),
+        /* @__PURE__ */ jsx12(Circle2, { cx: at[0], cy: at[1] + g.eyes.pupil * 0.7, r: g.eyes.pupil, fill: SHADE }),
+        /* @__PURE__ */ jsx12(Path2, { d: upperLid(at, g.eyes.white), fill: p.detail, ...line })
+      ] }, i) : mood === "success" || mood === "empty" ? /* @__PURE__ */ jsx12(Path2, { d: mood === "success" ? archEye(at, eyeR * 0.85) : lidEye(at, eyeR * 0.8), stroke: g.visor ? p.eye : outline, strokeWidth: 2.2, strokeLinecap: "round", fill: "none" }, i) : /* @__PURE__ */ jsxs9(G, { children: [
+        g.eyes.white > 0 && /* @__PURE__ */ jsx12(Circle2, { cx: at[0], cy: at[1], r: g.eyes.white, fill: LIGHT, ...line }),
+        /* @__PURE__ */ jsx12(Circle2, { cx: at[0] + look3, cy: at[1] - look3, r: g.eyes.pupil, fill: g.visor ? p.eye : SHADE })
       ] }, i)
     ),
-    g.glasses && g.eyes.at.map(([x, y]) => /* @__PURE__ */ jsx11(Circle2, { cx: x, cy: y, r: 6.5, fill: "none", stroke: outline, strokeWidth: 1.3 }, x)),
-    mood === "error" && g.eyes.at.map((at, i) => /* @__PURE__ */ jsx11(Path2, { d: brow(at, eyeR, g.eyes.at.length === 1 ? 1 : i === 0 ? -1 : 1), stroke: outline, strokeWidth: 2, strokeLinecap: "round" }, i)),
-    /* @__PURE__ */ jsx11(Path2, { d: g.beak, fill: p.beak, ...line }),
-    mood === "thinking" && MOOD_PARTS.dots.map(([cx, cy, r], i) => /* @__PURE__ */ jsx11(Circle2, { cx, cy, r, fill: theme.textSecondary, opacity: 0.5 + i * 0.25 }, cx)),
-    (mood === "success" || mood === "error") && /* @__PURE__ */ jsx11(Circle2, { cx: MOOD_PARTS.badge.cx, cy: MOOD_PARTS.badge.cy, r: MOOD_PARTS.badge.r, fill: mood === "success" ? theme.success : theme.danger }),
-    mood === "success" && /* @__PURE__ */ jsx11(Path2, { d: MOOD_PARTS.check, stroke: theme.surface0, strokeWidth: 2.6, strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }),
-    mood === "error" && /* @__PURE__ */ jsx11(Path2, { d: MOOD_PARTS.bang.line, stroke: theme.surface0, strokeWidth: 2.8, strokeLinecap: "round" }),
-    mood === "error" && /* @__PURE__ */ jsx11(Circle2, { cx: MOOD_PARTS.bang.dot[0], cy: MOOD_PARTS.bang.dot[1], r: 1.6, fill: theme.surface0 })
+    g.glasses && g.eyes.at.map(([x, y]) => /* @__PURE__ */ jsx12(Circle2, { cx: x, cy: y, r: 6.5, fill: "none", stroke: outline, strokeWidth: 1.3 }, x)),
+    mood === "error" && g.eyes.at.map((at, i) => /* @__PURE__ */ jsx12(Path2, { d: brow(at, eyeR, g.eyes.at.length === 1 ? 1 : i === 0 ? -1 : 1), stroke: outline, strokeWidth: 2, strokeLinecap: "round" }, i)),
+    /* @__PURE__ */ jsx12(Path2, { d: g.beak, fill: p.beak, ...line }),
+    mood === "thinking" && MOOD_PARTS.dots.map(([cx, cy, r], i) => /* @__PURE__ */ jsx12(Circle2, { cx, cy, r, fill: theme.textSecondary, opacity: 0.5 + i * 0.25 }, cx)),
+    (mood === "success" || mood === "error") && /* @__PURE__ */ jsx12(Circle2, { cx: MOOD_PARTS.badge.cx, cy: MOOD_PARTS.badge.cy, r: MOOD_PARTS.badge.r, fill: mood === "success" ? theme.success : theme.danger }),
+    mood === "success" && /* @__PURE__ */ jsx12(Path2, { d: MOOD_PARTS.check, stroke: theme.surface0, strokeWidth: 2.6, strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }),
+    mood === "error" && /* @__PURE__ */ jsx12(Path2, { d: MOOD_PARTS.bang.line, stroke: theme.surface0, strokeWidth: 2.8, strokeLinecap: "round" }),
+    mood === "error" && /* @__PURE__ */ jsx12(Circle2, { cx: MOOD_PARTS.bang.dot[0], cy: MOOD_PARTS.bang.dot[1], r: 1.6, fill: theme.surface0 })
   ] }) }) });
 }
 
+// src/native/mascot-state.tsx
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+var SIZE = { sm: 64, md: 96, lg: 128 };
+function useArrival(animated) {
+  const [value] = React9.useState(() => new Animated7.Value(animated ? 0 : 1));
+  React9.useEffect(() => {
+    if (!animated) return;
+    let cancelled = false;
+    void AccessibilityInfo5.isReduceMotionEnabled().then((reduce) => {
+      if (cancelled) return;
+      if (reduce) value.setValue(1);
+      else Animated7.timing(value, { toValue: 1, duration: 420, easing: Easing4.out(Easing4.cubic), useNativeDriver: true }).start();
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [animated, value]);
+  return value;
+}
+function MascotState({ bird = "owl", mood = "empty", title, description, action, size = "md", layout = "stacked", tone: tone2, animated = true, style, ...props }) {
+  const opacity = useArrival(animated);
+  const inline = layout === "inline";
+  return /* @__PURE__ */ jsxs10(
+    Animated7.View,
+    {
+      role: mood === "error" ? "alert" : "status",
+      accessibilityLiveRegion: mood === "error" ? "assertive" : "polite",
+      "aria-busy": mood === "thinking" ? true : void 0,
+      ...props,
+      style: [inline ? styles10.inline : styles10.stacked, { opacity, transform: [{ translateY: opacity.interpolate({ inputRange: [0, 1], outputRange: [6, 0] }) }] }, style],
+      children: [
+        /* @__PURE__ */ jsx13(Mascot, { bird, mood, tone: tone2, size: SIZE[size], animated }),
+        /* @__PURE__ */ jsxs10(View9, { style: inline ? styles10.wordsInline : styles10.words, children: [
+          /* @__PURE__ */ jsx13(Txt, { variant: "label", role: "heading", style: inline ? null : styles10.center, children: title }),
+          description ? /* @__PURE__ */ jsx13(Txt, { tone: "secondary", style: inline ? null : styles10.center, children: description }) : null,
+          action ? /* @__PURE__ */ jsx13(View9, { style: [styles10.action, inline ? null : styles10.actionCentred], children: action }) : null
+        ] })
+      ]
+    }
+  );
+}
+var ErrorState = (props) => /* @__PURE__ */ jsx13(MascotState, { mood: "error", ...props });
+var SuccessState = (props) => /* @__PURE__ */ jsx13(MascotState, { mood: "success", ...props });
+var LoadingState = (props) => /* @__PURE__ */ jsx13(MascotState, { mood: "thinking", ...props });
+var WelcomeState = (props) => /* @__PURE__ */ jsx13(MascotState, { mood: "welcome", ...props });
+var styles10 = StyleSheet10.create({
+  stacked: { alignItems: "center", justifyContent: "center", gap: 12, paddingVertical: 40, paddingHorizontal: 24 },
+  inline: { flexDirection: "row", alignItems: "center", gap: 16 },
+  words: { alignItems: "center", gap: 6 },
+  wordsInline: { flex: 1, gap: 4 },
+  center: { textAlign: "center", maxWidth: 360 },
+  action: { marginTop: 8, flexDirection: "row", flexWrap: "wrap", gap: 8 },
+  actionCentred: { justifyContent: "center" }
+});
+
 // src/native/OrazakaMark.tsx
-import { View as View8 } from "react-native";
+import { View as View10 } from "react-native";
 import Svg4, { Circle as Circle3, Defs as Defs4, LinearGradient as LinearGradient4, Path as Path3, RadialGradient as RadialGradient2, Stop as Stop4 } from "react-native-svg";
 
 // src/marks/orazaka-geometry.ts
@@ -1038,40 +1207,40 @@ var ORAZAKA = {
 };
 
 // src/native/OrazakaMark.tsx
-import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
 function OrazakaMark({ size = 48, animated = true, title, neutral }) {
   const { theme } = useTheme();
-  const { Animated: Animated9, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated);
+  const { Animated: Animated14, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated);
   const id = useSvgId("ozm");
   const viewBox = size < 48 ? ORAZAKA.croppedViewBox : ORAZAKA.viewBox;
   const stroke = neutral ?? theme.textMuted;
-  const gradient = /* @__PURE__ */ jsx12(LinearGradient4, { id: `${id}a`, gradientUnits: "userSpaceOnUse", x1: ORAZAKA.gradient.x1, y1: ORAZAKA.gradient.y1, x2: ORAZAKA.gradient.x2, y2: ORAZAKA.gradient.y2, children: ORAZAKA.gradient.stops.map(([offset, color]) => /* @__PURE__ */ jsx12(Stop4, { offset, stopColor: color }, offset)) });
+  const gradient = /* @__PURE__ */ jsx14(LinearGradient4, { id: `${id}a`, gradientUnits: "userSpaceOnUse", x1: ORAZAKA.gradient.x1, y1: ORAZAKA.gradient.y1, x2: ORAZAKA.gradient.x2, y2: ORAZAKA.gradient.y2, children: ORAZAKA.gradient.stops.map(([offset, color]) => /* @__PURE__ */ jsx14(Stop4, { offset, stopColor: color }, offset)) });
   const fill = `url(#${id}a)`;
-  return /* @__PURE__ */ jsxs9(View8, { style: { width: size, height: size }, ...markA11y(title), children: [
-    /* @__PURE__ */ jsxs9(Svg4, { viewBox, style: layer, children: [
-      /* @__PURE__ */ jsx12(Defs4, { children: /* @__PURE__ */ jsxs9(RadialGradient2, { id: `${id}g`, cx: "50%", cy: "50%", r: "50%", children: [
-        /* @__PURE__ */ jsx12(Stop4, { offset: "0%", stopColor: ORAZAKA.glow.color, stopOpacity: ORAZAKA.glow.opacity }),
-        /* @__PURE__ */ jsx12(Stop4, { offset: "100%", stopColor: ORAZAKA.glow.color, stopOpacity: 0 })
+  return /* @__PURE__ */ jsxs11(View10, { style: { width: size, height: size }, ...markA11y(title), children: [
+    /* @__PURE__ */ jsxs11(Svg4, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsx14(Defs4, { children: /* @__PURE__ */ jsxs11(RadialGradient2, { id: `${id}g`, cx: "50%", cy: "50%", r: "50%", children: [
+        /* @__PURE__ */ jsx14(Stop4, { offset: "0%", stopColor: ORAZAKA.glow.color, stopOpacity: ORAZAKA.glow.opacity }),
+        /* @__PURE__ */ jsx14(Stop4, { offset: "100%", stopColor: ORAZAKA.glow.color, stopOpacity: 0 })
       ] }) }),
-      size >= 48 ? /* @__PURE__ */ jsx12(Circle3, { cx: ORAZAKA.center, cy: ORAZAKA.center, r: 190, fill: `url(#${id}g)` }) : null,
-      /* @__PURE__ */ jsx12(Circle3, { cx: ORAZAKA.center, cy: ORAZAKA.center, r: ORAZAKA.orbit.r, stroke, strokeWidth: ORAZAKA.orbit.width, strokeDasharray: ORAZAKA.orbit.dash, opacity: 0.6, fill: "none" }),
-      /* @__PURE__ */ jsx12(Circle3, { cx: ORAZAKA.center, cy: ORAZAKA.center, r: ORAZAKA.ring.r, stroke, strokeWidth: ORAZAKA.ring.width, opacity: 0.35, fill: "none" })
+      size >= 48 ? /* @__PURE__ */ jsx14(Circle3, { cx: ORAZAKA.center, cy: ORAZAKA.center, r: 190, fill: `url(#${id}g)` }) : null,
+      /* @__PURE__ */ jsx14(Circle3, { cx: ORAZAKA.center, cy: ORAZAKA.center, r: ORAZAKA.orbit.r, stroke, strokeWidth: ORAZAKA.orbit.width, strokeDasharray: ORAZAKA.orbit.dash, opacity: 0.6, fill: "none" }),
+      /* @__PURE__ */ jsx14(Circle3, { cx: ORAZAKA.center, cy: ORAZAKA.center, r: ORAZAKA.ring.r, stroke, strokeWidth: ORAZAKA.ring.width, opacity: 0.35, fill: "none" })
     ] }),
-    /* @__PURE__ */ jsx12(Animated9.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsxs9(Svg4, { viewBox, style: layer, children: [
-      /* @__PURE__ */ jsx12(Defs4, { children: gradient }),
-      ORAZAKA.shards.map((d) => /* @__PURE__ */ jsx12(Path3, { d, fill, stroke: fill, strokeWidth: ORAZAKA.shardStroke, strokeLinejoin: "round" }, d))
+    /* @__PURE__ */ jsx14(Animated14.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsxs11(Svg4, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsx14(Defs4, { children: gradient }),
+      ORAZAKA.shards.map((d) => /* @__PURE__ */ jsx14(Path3, { d, fill, stroke: fill, strokeWidth: ORAZAKA.shardStroke, strokeLinejoin: "round" }, d))
     ] }) }),
-    /* @__PURE__ */ jsx12(Animated9.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsxs9(Svg4, { viewBox, style: layer, children: [
-      /* @__PURE__ */ jsx12(Defs4, { children: gradient }),
-      /* @__PURE__ */ jsx12(Circle3, { cx: ORAZAKA.center, cy: ORAZAKA.center, r: ORAZAKA.core.r, fill }),
-      /* @__PURE__ */ jsx12(Circle3, { cx: ORAZAKA.center, cy: ORAZAKA.center, r: ORAZAKA.core.inner, fill: ORAZAKA.highlight })
+    /* @__PURE__ */ jsx14(Animated14.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsxs11(Svg4, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsx14(Defs4, { children: gradient }),
+      /* @__PURE__ */ jsx14(Circle3, { cx: ORAZAKA.center, cy: ORAZAKA.center, r: ORAZAKA.core.r, fill }),
+      /* @__PURE__ */ jsx14(Circle3, { cx: ORAZAKA.center, cy: ORAZAKA.center, r: ORAZAKA.core.inner, fill: ORAZAKA.highlight })
     ] }) })
   ] });
 }
 
 // src/native/OrochiaMark.tsx
-import { useEffect as useEffect6, useState as useState8 } from "react";
-import { AccessibilityInfo as AccessibilityInfo4, Animated as Animated5, Easing as Easing3, View as View9 } from "react-native";
+import { useEffect as useEffect8, useState as useState10 } from "react";
+import { AccessibilityInfo as AccessibilityInfo6, Animated as Animated8, Easing as Easing5, View as View11 } from "react-native";
 import Svg5, { Circle as Circle4, Defs as Defs5, Ellipse as Ellipse2, G as Group2, LinearGradient as LinearGradient5, Path as Path4, RadialGradient as RadialGradient3, Stop as Stop5 } from "react-native-svg";
 
 // src/marks/orochia-geometry.ts
@@ -1099,25 +1268,25 @@ var OROCHIA = {
 };
 
 // src/native/OrochiaMark.tsx
-import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
 var CENTER = OROCHIA.offset + 180;
 function OrochiaMark({ size = 48, animated = true, title, neutral: neutralProp }) {
   const { theme } = useTheme();
   const neutral = neutralProp ?? theme.textMuted;
-  const [spin] = useState8(() => new Animated5.Value(0));
-  const [pulse] = useState8(() => new Animated5.Value(0));
-  useEffect6(() => {
+  const [spin] = useState10(() => new Animated8.Value(0));
+  const [pulse] = useState10(() => new Animated8.Value(0));
+  useEffect8(() => {
     if (!animated) return;
     let loops = [];
     let cancelled = false;
-    void AccessibilityInfo4.isReduceMotionEnabled().then((reduce) => {
+    void AccessibilityInfo6.isReduceMotionEnabled().then((reduce) => {
       if (reduce || cancelled) return;
       loops = [
-        Animated5.loop(Animated5.timing(spin, { toValue: 1, duration: 3e4, easing: Easing3.linear, useNativeDriver: true })),
-        Animated5.loop(
-          Animated5.sequence([
-            Animated5.timing(pulse, { toValue: 1, duration: 1600, easing: Easing3.inOut(Easing3.ease), useNativeDriver: true }),
-            Animated5.timing(pulse, { toValue: 0, duration: 1600, easing: Easing3.inOut(Easing3.ease), useNativeDriver: true })
+        Animated8.loop(Animated8.timing(spin, { toValue: 1, duration: 3e4, easing: Easing5.linear, useNativeDriver: true })),
+        Animated8.loop(
+          Animated8.sequence([
+            Animated8.timing(pulse, { toValue: 1, duration: 1600, easing: Easing5.inOut(Easing5.ease), useNativeDriver: true }),
+            Animated8.timing(pulse, { toValue: 0, duration: 1600, easing: Easing5.inOut(Easing5.ease), useNativeDriver: true })
           ])
         )
       ];
@@ -1131,44 +1300,44 @@ function OrochiaMark({ size = 48, animated = true, title, neutral: neutralProp }
   const viewBox = size < 48 ? OROCHIA.croppedViewBox : OROCHIA.viewBox;
   const layer = { position: "absolute", width: size, height: size };
   const a11y = title ? { accessible: true, accessibilityRole: "image", accessibilityLabel: title } : { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants" };
-  const bodyGradient = /* @__PURE__ */ jsx13(LinearGradient5, { id: "body", gradientUnits: "userSpaceOnUse", x1: OROCHIA.body.x1 + OROCHIA.offset, y1: OROCHIA.body.y1 + OROCHIA.offset, x2: OROCHIA.body.x2 + OROCHIA.offset, y2: OROCHIA.body.y2 + OROCHIA.offset, children: OROCHIA.body.stops.map(([offset, color]) => /* @__PURE__ */ jsx13(Stop5, { offset, stopColor: color }, offset)) });
-  return /* @__PURE__ */ jsxs10(View9, { style: { width: size, height: size }, ...a11y, children: [
-    /* @__PURE__ */ jsxs10(Svg5, { viewBox, style: layer, children: [
-      /* @__PURE__ */ jsx13(Defs5, { children: /* @__PURE__ */ jsxs10(RadialGradient3, { id: "glow", cx: "50%", cy: "50%", r: "50%", children: [
-        /* @__PURE__ */ jsx13(Stop5, { offset: "0%", stopColor: OROCHIA.glow.color, stopOpacity: OROCHIA.glow.opacity }),
-        /* @__PURE__ */ jsx13(Stop5, { offset: "100%", stopColor: OROCHIA.glow.color, stopOpacity: 0 })
+  const bodyGradient = /* @__PURE__ */ jsx15(LinearGradient5, { id: "body", gradientUnits: "userSpaceOnUse", x1: OROCHIA.body.x1 + OROCHIA.offset, y1: OROCHIA.body.y1 + OROCHIA.offset, x2: OROCHIA.body.x2 + OROCHIA.offset, y2: OROCHIA.body.y2 + OROCHIA.offset, children: OROCHIA.body.stops.map(([offset, color]) => /* @__PURE__ */ jsx15(Stop5, { offset, stopColor: color }, offset)) });
+  return /* @__PURE__ */ jsxs12(View11, { style: { width: size, height: size }, ...a11y, children: [
+    /* @__PURE__ */ jsxs12(Svg5, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsx15(Defs5, { children: /* @__PURE__ */ jsxs12(RadialGradient3, { id: "glow", cx: "50%", cy: "50%", r: "50%", children: [
+        /* @__PURE__ */ jsx15(Stop5, { offset: "0%", stopColor: OROCHIA.glow.color, stopOpacity: OROCHIA.glow.opacity }),
+        /* @__PURE__ */ jsx15(Stop5, { offset: "100%", stopColor: OROCHIA.glow.color, stopOpacity: 0 })
       ] }) }),
-      /* @__PURE__ */ jsx13(Circle4, { cx: CENTER, cy: CENTER, r: 170, fill: "url(#glow)" }),
-      /* @__PURE__ */ jsx13(Circle4, { cx: CENTER, cy: CENTER, r: OROCHIA.ring.r, stroke: neutral, strokeWidth: OROCHIA.ring.width, opacity: 0.35, fill: "none" })
+      /* @__PURE__ */ jsx15(Circle4, { cx: CENTER, cy: CENTER, r: 170, fill: "url(#glow)" }),
+      /* @__PURE__ */ jsx15(Circle4, { cx: CENTER, cy: CENTER, r: OROCHIA.ring.r, stroke: neutral, strokeWidth: OROCHIA.ring.width, opacity: 0.35, fill: "none" })
     ] }),
-    /* @__PURE__ */ jsx13(Animated5.View, { style: [layer, { transform: [{ rotate: spin.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "360deg"] }) }] }], children: /* @__PURE__ */ jsx13(Svg5, { viewBox, style: layer, children: /* @__PURE__ */ jsx13(Circle4, { cx: CENTER, cy: CENTER, r: OROCHIA.orbit.r, stroke: neutral, strokeWidth: OROCHIA.orbit.width, strokeDasharray: OROCHIA.orbit.dash, opacity: 0.6, fill: "none" }) }) }),
-    /* @__PURE__ */ jsxs10(Svg5, { viewBox, style: layer, children: [
-      /* @__PURE__ */ jsx13(Defs5, { children: bodyGradient }),
-      /* @__PURE__ */ jsxs10(Group2, { transform: `translate(${OROCHIA.offset} ${OROCHIA.offset})`, children: [
-        /* @__PURE__ */ jsx13(Path4, { d: OROCHIA.arc, stroke: "url(#body)", strokeWidth: 22, strokeLinecap: "round", fill: "none" }),
-        /* @__PURE__ */ jsx13(Path4, { d: OROCHIA.arc, stroke: OROCHIA.scales.color, strokeOpacity: OROCHIA.scales.opacity, strokeWidth: OROCHIA.scales.width, strokeLinecap: "round", strokeDasharray: OROCHIA.scales.dash, fill: "none" }),
-        /* @__PURE__ */ jsx13(Path4, { d: OROCHIA.neck, stroke: "url(#body)", strokeWidth: 14, strokeLinecap: "round", fill: "none" }),
-        /* @__PURE__ */ jsx13(Path4, { d: OROCHIA.tail, stroke: "url(#body)", strokeWidth: 6, strokeLinecap: "round", fill: "none" }),
-        /* @__PURE__ */ jsx13(Ellipse2, { cx: OROCHIA.head.cx, cy: OROCHIA.head.cy, rx: OROCHIA.head.rx, ry: OROCHIA.head.ry, rotation: OROCHIA.head.rotate, origin: `${OROCHIA.head.cx}, ${OROCHIA.head.cy}`, fill: "url(#body)" }),
-        /* @__PURE__ */ jsx13(Path4, { d: OROCHIA.tongue.d, stroke: OROCHIA.tongue.color, strokeWidth: 3, strokeLinecap: "round", fill: "none" })
+    /* @__PURE__ */ jsx15(Animated8.View, { style: [layer, { transform: [{ rotate: spin.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "360deg"] }) }] }], children: /* @__PURE__ */ jsx15(Svg5, { viewBox, style: layer, children: /* @__PURE__ */ jsx15(Circle4, { cx: CENTER, cy: CENTER, r: OROCHIA.orbit.r, stroke: neutral, strokeWidth: OROCHIA.orbit.width, strokeDasharray: OROCHIA.orbit.dash, opacity: 0.6, fill: "none" }) }) }),
+    /* @__PURE__ */ jsxs12(Svg5, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsx15(Defs5, { children: bodyGradient }),
+      /* @__PURE__ */ jsxs12(Group2, { transform: `translate(${OROCHIA.offset} ${OROCHIA.offset})`, children: [
+        /* @__PURE__ */ jsx15(Path4, { d: OROCHIA.arc, stroke: "url(#body)", strokeWidth: 22, strokeLinecap: "round", fill: "none" }),
+        /* @__PURE__ */ jsx15(Path4, { d: OROCHIA.arc, stroke: OROCHIA.scales.color, strokeOpacity: OROCHIA.scales.opacity, strokeWidth: OROCHIA.scales.width, strokeLinecap: "round", strokeDasharray: OROCHIA.scales.dash, fill: "none" }),
+        /* @__PURE__ */ jsx15(Path4, { d: OROCHIA.neck, stroke: "url(#body)", strokeWidth: 14, strokeLinecap: "round", fill: "none" }),
+        /* @__PURE__ */ jsx15(Path4, { d: OROCHIA.tail, stroke: "url(#body)", strokeWidth: 6, strokeLinecap: "round", fill: "none" }),
+        /* @__PURE__ */ jsx15(Ellipse2, { cx: OROCHIA.head.cx, cy: OROCHIA.head.cy, rx: OROCHIA.head.rx, ry: OROCHIA.head.ry, rotation: OROCHIA.head.rotate, origin: `${OROCHIA.head.cx}, ${OROCHIA.head.cy}`, fill: "url(#body)" }),
+        /* @__PURE__ */ jsx15(Path4, { d: OROCHIA.tongue.d, stroke: OROCHIA.tongue.color, strokeWidth: 3, strokeLinecap: "round", fill: "none" })
       ] })
     ] }),
-    /* @__PURE__ */ jsx13(Animated5.View, { style: [layer, { opacity: pulse.interpolate({ inputRange: [0, 1], outputRange: [0.85, 1] }) }], children: /* @__PURE__ */ jsxs10(Svg5, { viewBox, style: layer, children: [
-      /* @__PURE__ */ jsx13(Defs5, { children: /* @__PURE__ */ jsx13(LinearGradient5, { id: "flame", x1: "50%", y1: "100%", x2: "50%", y2: "0%", children: OROCHIA.flameGradient.stops.map(([offset, color]) => /* @__PURE__ */ jsx13(Stop5, { offset, stopColor: color }, offset)) }) }),
-      /* @__PURE__ */ jsxs10(Group2, { transform: `translate(${OROCHIA.offset} ${OROCHIA.offset})`, children: [
-        /* @__PURE__ */ jsx13(Circle4, { cx: OROCHIA.eye.cx, cy: OROCHIA.eye.cy, r: OROCHIA.eye.r, fill: OROCHIA.eye.color }),
-        /* @__PURE__ */ jsx13(Path4, { d: OROCHIA.flame.d, transform: `translate(${OROCHIA.flame.translate[0]} ${OROCHIA.flame.translate[1]}) scale(${OROCHIA.flame.scale})`, fill: "url(#flame)" })
+    /* @__PURE__ */ jsx15(Animated8.View, { style: [layer, { opacity: pulse.interpolate({ inputRange: [0, 1], outputRange: [0.85, 1] }) }], children: /* @__PURE__ */ jsxs12(Svg5, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsx15(Defs5, { children: /* @__PURE__ */ jsx15(LinearGradient5, { id: "flame", x1: "50%", y1: "100%", x2: "50%", y2: "0%", children: OROCHIA.flameGradient.stops.map(([offset, color]) => /* @__PURE__ */ jsx15(Stop5, { offset, stopColor: color }, offset)) }) }),
+      /* @__PURE__ */ jsxs12(Group2, { transform: `translate(${OROCHIA.offset} ${OROCHIA.offset})`, children: [
+        /* @__PURE__ */ jsx15(Circle4, { cx: OROCHIA.eye.cx, cy: OROCHIA.eye.cy, r: OROCHIA.eye.r, fill: OROCHIA.eye.color }),
+        /* @__PURE__ */ jsx15(Path4, { d: OROCHIA.flame.d, transform: `translate(${OROCHIA.flame.translate[0]} ${OROCHIA.flame.translate[1]}) scale(${OROCHIA.flame.scale})`, fill: "url(#flame)" })
       ] })
     ] }) })
   ] });
 }
 
 // src/native/pagination.tsx
-import { Pressable as Pressable4, StyleSheet as StyleSheet9, Text as Text6, View as View10 } from "react-native";
+import { Pressable as Pressable4, StyleSheet as StyleSheet11, Text as Text6, View as View12 } from "react-native";
 import Svg6, { Path as Path5 } from "react-native-svg";
-import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
 function Chevron({ direction, color }) {
-  return /* @__PURE__ */ jsx14(Svg6, { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 2.2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx14(Path5, { d: direction === "left" ? "m15 6-6 6 6 6" : "m9 6 6 6-6 6" }) });
+  return /* @__PURE__ */ jsx16(Svg6, { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 2.2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx16(Path5, { d: direction === "left" ? "m15 6-6 6 6 6" : "m9 6 6 6-6 6" }) });
 }
 function Pagination({ page = 1, pageCount, onPageChange, hasPrevious, hasNext, onPrevious, onNext, status, disabled, labels, style }) {
   const { theme, radius: radius3 } = useTheme();
@@ -1177,7 +1346,7 @@ function Pagination({ page = 1, pageCount, onPageChange, hasPrevious, hasNext, o
   const current = Math.min(Math.max(1, page), count);
   const canPrevious = !disabled && (paged ? current > 1 : Boolean(hasPrevious));
   const canNext = !disabled && (paged ? current < count : Boolean(hasNext));
-  const button = (direction, enabled, onPress, label) => /* @__PURE__ */ jsx14(
+  const button = (direction, enabled, onPress, label) => /* @__PURE__ */ jsx16(
     Pressable4,
     {
       role: "button",
@@ -1187,39 +1356,263 @@ function Pagination({ page = 1, pageCount, onPageChange, hasPrevious, hasNext, o
       hitSlop: 6,
       onPress,
       style: ({ pressed }) => [
-        styles9.button,
+        styles11.button,
         { borderRadius: radius3.sm, borderColor: theme.borderDefault, backgroundColor: theme.surface1, opacity: enabled ? pressed ? 0.8 : 1 : 0.4 }
       ],
-      children: /* @__PURE__ */ jsx14(Chevron, { direction, color: theme.textPrimary })
+      children: /* @__PURE__ */ jsx16(Chevron, { direction, color: theme.textPrimary })
     }
   );
   const text = status ?? (paged ? labels.compact(current, count) : null);
-  return /* @__PURE__ */ jsxs11(View10, { role: "navigation", style: [styles9.row, style], children: [
+  return /* @__PURE__ */ jsxs13(View12, { role: "navigation", style: [styles11.row, style], children: [
     button("left", canPrevious, paged ? () => onPageChange?.(current - 1) : onPrevious, labels.previous),
-    text ? /* @__PURE__ */ jsx14(Text6, { "aria-live": "polite", style: [styles9.status, { color: theme.textSecondary }], children: text }) : null,
+    text ? /* @__PURE__ */ jsx16(Text6, { "aria-live": "polite", style: [styles11.status, { color: theme.textSecondary }], children: text }) : null,
     button("right", canNext, paged ? () => onPageChange?.(current + 1) : onNext, labels.next)
   ] });
 }
-var styles9 = StyleSheet9.create({
+var styles11 = StyleSheet11.create({
   row: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", gap: 12 },
-  button: { width: 44, height: 44, alignItems: "center", justifyContent: "center", borderWidth: StyleSheet9.hairlineWidth },
+  button: { width: 44, height: 44, alignItems: "center", justifyContent: "center", borderWidth: StyleSheet11.hairlineWidth },
   status: { fontSize: 13, fontWeight: "600", fontVariant: ["tabular-nums"] }
 });
 
+// src/native/phoenix.tsx
+import { useEffect as useEffect9, useState as useState11 } from "react";
+import { AccessibilityInfo as AccessibilityInfo7, Animated as Animated9, Easing as Easing6, View as View13 } from "react-native";
+import Svg7, { Circle as Circle5, Defs as Defs6, LinearGradient as LinearGradient6, Path as Path6, RadialGradient as RadialGradient4, Stop as Stop6 } from "react-native-svg";
+
+// src/mascots/phoenix-geometry.ts
+var PHOENIX = {
+  wingL: "M56 62 C40 40 22 36 8 40 C22 46 30 56 34 70 C40 64 48 62 56 62 Z",
+  wingR: "M64 62 C80 40 98 36 112 40 C98 46 90 56 86 70 C80 64 72 62 64 62 Z",
+  tailL: "M52 66 C46 82 40 94 30 104 C44 98 52 90 58 78 Z",
+  tailR: "M68 66 C74 82 80 94 90 104 C76 98 68 90 62 78 Z",
+  body: "M60 34 L68 60 L60 82 L52 60 Z",
+  crest: "M60 34 L56 24 M60 34 L64 24"
+};
+var PHOENIX_PALETTES = {
+  own: {
+    left: ["#c084fc", "#7c3aed"],
+    right: ["#fde68a", "#f59e0b"],
+    core: ["#fff7ed", "#fb923c"],
+    body: "#1f1530",
+    edge: "#e9d5ff",
+    crest: "#fbbf24"
+  }
+};
+
+// src/native/phoenix.tsx
+import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
+function useFloat(animated) {
+  const [y] = useState11(() => new Animated9.Value(0));
+  useEffect9(() => {
+    if (!animated) return;
+    let loop;
+    let cancelled = false;
+    void AccessibilityInfo7.isReduceMotionEnabled().then((reduce) => {
+      if (reduce || cancelled) return;
+      const step = (toValue) => Animated9.timing(y, { toValue, duration: 2500, easing: Easing6.inOut(Easing6.ease), useNativeDriver: true });
+      loop = Animated9.loop(Animated9.sequence([step(-6), step(0)]));
+      loop.start();
+    });
+    return () => {
+      cancelled = true;
+      loop?.stop();
+    };
+  }, [animated, y]);
+  return y;
+}
+function Phoenix({ tone: tone2 = "own", size = 120, animated = true, title, style }) {
+  const { theme } = useTheme();
+  const id = useSvgId("kzp");
+  const y = useFloat(animated);
+  const p = tone2 === "brand" ? { left: [theme.accent2, theme.accent], right: [theme.accent, theme.accent2], core: ["#ffffff", theme.accent], body: theme.surface3, edge: theme.borderStrong, crest: theme.accent } : PHOENIX_PALETTES.own;
+  return /* @__PURE__ */ jsx17(View13, { style: [{ width: size, height: size }, style], ...markA11y(title), children: /* @__PURE__ */ jsx17(Animated9.View, { style: { transform: [{ translateY: y }] }, children: /* @__PURE__ */ jsxs14(Svg7, { width: size, height: size, viewBox: "0 0 120 120", children: [
+    /* @__PURE__ */ jsxs14(Defs6, { children: [
+      /* @__PURE__ */ jsxs14(LinearGradient6, { id: `${id}l`, x1: "1", y1: "0", x2: "0", y2: "1", children: [
+        /* @__PURE__ */ jsx17(Stop6, { offset: "0%", stopColor: p.left[0] }),
+        /* @__PURE__ */ jsx17(Stop6, { offset: "100%", stopColor: p.left[1] })
+      ] }),
+      /* @__PURE__ */ jsxs14(LinearGradient6, { id: `${id}r`, x1: "0", y1: "0", x2: "1", y2: "1", children: [
+        /* @__PURE__ */ jsx17(Stop6, { offset: "0%", stopColor: p.right[0] }),
+        /* @__PURE__ */ jsx17(Stop6, { offset: "100%", stopColor: p.right[1] })
+      ] }),
+      /* @__PURE__ */ jsxs14(RadialGradient4, { id: `${id}c`, children: [
+        /* @__PURE__ */ jsx17(Stop6, { offset: "0%", stopColor: p.core[0] }),
+        /* @__PURE__ */ jsx17(Stop6, { offset: "100%", stopColor: p.core[1], stopOpacity: 0 })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx17(Path6, { d: PHOENIX.wingL, fill: `url(#${id}l)` }),
+    /* @__PURE__ */ jsx17(Path6, { d: PHOENIX.wingR, fill: `url(#${id}r)` }),
+    /* @__PURE__ */ jsx17(Path6, { d: PHOENIX.tailL, fill: `url(#${id}l)`, opacity: 0.7 }),
+    /* @__PURE__ */ jsx17(Path6, { d: PHOENIX.tailR, fill: `url(#${id}r)`, opacity: 0.7 }),
+    /* @__PURE__ */ jsx17(Path6, { d: PHOENIX.body, fill: p.body, stroke: p.edge, strokeOpacity: 0.5 }),
+    /* @__PURE__ */ jsx17(Circle5, { cx: 60, cy: 58, r: 12, fill: `url(#${id}c)` }),
+    /* @__PURE__ */ jsx17(Circle5, { cx: 60, cy: 58, r: 3.5, fill: "#ffffff" }),
+    /* @__PURE__ */ jsx17(Path6, { d: PHOENIX.crest, stroke: p.crest, strokeWidth: 2, strokeLinecap: "round" })
+  ] }) }) });
+}
+
+// src/native/YazakiaMark.tsx
+import React12 from "react";
+import { View as View14 } from "react-native";
+import Svg8, { Circle as Circle6, Defs as Defs7, LinearGradient as LinearGradient7, Path as Path7, RadialGradient as RadialGradient5, Stop as Stop7 } from "react-native-svg";
+
+// src/marks/yazakia-geometry.ts
+var turquoise = marks.yazakia[marks.yazakia.length - 1][1];
+var YAZAKIA = {
+  viewBox: "0 0 400 400",
+  croppedViewBox: "80 80 240 240",
+  center: 200,
+  /** The two voices, left then right: each a bubble (cut around the lens) and its tail. */
+  voices: [
+    { body: "M191.9 109 A80 80 0 1 0 191.9 259 A87 87 0 0 1 191.9 109 Z", tail: "M98 230 Q104 268 88 294 Q122 288 144 262 L130 200 Z" },
+    { body: "M208.1 109 A80 80 0 1 1 208.1 259 A87 87 0 0 0 208.1 109 Z", tail: "M302 230 Q296 268 312 294 Q278 288 256 262 L270 200 Z" }
+  ],
+  /** The left voice, a shade deeper: the depth between the two. */
+  shade: { color: "#000", opacity: 0.22 },
+  /** Where the bubbles overlap: the core, lit from above. */
+  lens: { d: "M200 112.6 A80 80 0 0 1 200 255.4 A80 80 0 0 1 200 112.6 Z", y1: 112.6, y2: 255.4 },
+  gradient: { x1: 110, y1: 300, x2: 290, y2: 100, stops: marks.yazakia },
+  /** The light on the lens: bright at the top, fading down. */
+  highlight: { color: "#f0fdfa", from: 0.75, to: 0.2 },
+  /** The pair: two nodes on the orbit, opposite each other, that turn with it. */
+  pair: { r: 8, at: [[40, 200], [360, 200]] },
+  glow: { color: turquoise, opacity: 0.16 },
+  /** The core's breathing shadow (web), in the mark's turquoise. */
+  pulse: { color: turquoise, low: 0.3, high: 0.6 },
+  orbit: { r: 160, dash: "8 8", width: 1.5 },
+  ring: { r: 134, width: 1 }
+};
+
+// src/native/YazakiaMark.tsx
+import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
+function YazakiaMark({ size = 48, animated = true, title, neutral }) {
+  const { theme } = useTheme();
+  const { Animated: Animated14, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated);
+  const id = useSvgId("yzm");
+  const viewBox = size < 48 ? YAZAKIA.croppedViewBox : YAZAKIA.viewBox;
+  const stroke = neutral ?? theme.textMuted;
+  const gradient = /* @__PURE__ */ jsx18(LinearGradient7, { id: `${id}a`, gradientUnits: "userSpaceOnUse", x1: YAZAKIA.gradient.x1, y1: YAZAKIA.gradient.y1, x2: YAZAKIA.gradient.x2, y2: YAZAKIA.gradient.y2, children: YAZAKIA.gradient.stops.map(([offset, color]) => /* @__PURE__ */ jsx18(Stop7, { offset, stopColor: color }, offset)) });
+  const fill = `url(#${id}a)`;
+  return /* @__PURE__ */ jsxs15(View14, { style: { width: size, height: size }, ...markA11y(title), children: [
+    /* @__PURE__ */ jsxs15(Svg8, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsxs15(Defs7, { children: [
+        /* @__PURE__ */ jsxs15(RadialGradient5, { id: `${id}g`, cx: "50%", cy: "50%", r: "50%", children: [
+          /* @__PURE__ */ jsx18(Stop7, { offset: "0%", stopColor: YAZAKIA.glow.color, stopOpacity: YAZAKIA.glow.opacity }),
+          /* @__PURE__ */ jsx18(Stop7, { offset: "100%", stopColor: YAZAKIA.glow.color, stopOpacity: 0 })
+        ] }),
+        gradient
+      ] }),
+      size >= 48 ? /* @__PURE__ */ jsx18(Circle6, { cx: YAZAKIA.center, cy: YAZAKIA.center, r: 190, fill: `url(#${id}g)` }) : null,
+      /* @__PURE__ */ jsx18(Circle6, { cx: YAZAKIA.center, cy: YAZAKIA.center, r: YAZAKIA.ring.r, stroke, strokeWidth: YAZAKIA.ring.width, opacity: 0.35, fill: "none" }),
+      YAZAKIA.voices.map((v, i) => /* @__PURE__ */ jsxs15(React12.Fragment, { children: [
+        /* @__PURE__ */ jsx18(Path7, { d: v.body, fill }),
+        /* @__PURE__ */ jsx18(Path7, { d: v.tail, fill }),
+        i === 0 ? /* @__PURE__ */ jsx18(Path7, { d: `${v.body} ${v.tail}`, fill: YAZAKIA.shade.color, opacity: YAZAKIA.shade.opacity }) : null
+      ] }, v.body))
+    ] }),
+    /* @__PURE__ */ jsx18(Animated14.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsxs15(Svg8, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsx18(Defs7, { children: gradient }),
+      /* @__PURE__ */ jsx18(Circle6, { cx: YAZAKIA.center, cy: YAZAKIA.center, r: YAZAKIA.orbit.r, stroke, strokeWidth: YAZAKIA.orbit.width, strokeDasharray: YAZAKIA.orbit.dash, opacity: 0.6, fill: "none" }),
+      YAZAKIA.pair.at.map(([cx, cy]) => /* @__PURE__ */ jsx18(Circle6, { cx, cy, r: YAZAKIA.pair.r, fill }, cx))
+    ] }) }),
+    /* @__PURE__ */ jsx18(Animated14.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsxs15(Svg8, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsxs15(Defs7, { children: [
+        gradient,
+        /* @__PURE__ */ jsxs15(LinearGradient7, { id: `${id}l`, gradientUnits: "userSpaceOnUse", x1: 0, y1: YAZAKIA.lens.y1, x2: 0, y2: YAZAKIA.lens.y2, children: [
+          /* @__PURE__ */ jsx18(Stop7, { offset: "0%", stopColor: YAZAKIA.highlight.color, stopOpacity: YAZAKIA.highlight.from }),
+          /* @__PURE__ */ jsx18(Stop7, { offset: "100%", stopColor: YAZAKIA.highlight.color, stopOpacity: YAZAKIA.highlight.to })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx18(Path7, { d: YAZAKIA.lens.d, fill }),
+      /* @__PURE__ */ jsx18(Path7, { d: YAZAKIA.lens.d, fill: `url(#${id}l)` })
+    ] }) })
+  ] });
+}
+
 // src/native/ProductMark.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function ProductMark({ id, ...props }) {
-  if (id === "krizaka") return /* @__PURE__ */ jsx15(KrizakaMark, { ...props });
-  if (id === "orazaka") return /* @__PURE__ */ jsx15(OrazakaMark, { ...props });
-  return /* @__PURE__ */ jsx15(OrochiaMark, { ...props });
+  if (id === "krizaka") return /* @__PURE__ */ jsx19(KrizakaMark, { ...props });
+  if (id === "orazaka") return /* @__PURE__ */ jsx19(OrazakaMark, { ...props });
+  if (id === "yazakia") return /* @__PURE__ */ jsx19(YazakiaMark, { ...props });
+  return /* @__PURE__ */ jsx19(OrochiaMark, { ...props });
 }
 
+// src/native/profile-card.tsx
+import * as React13 from "react";
+import { Animated as Animated10, StyleSheet as StyleSheet12, View as View15 } from "react-native";
+import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+var ratioOf = (value, max = 100) => Math.min(1, Math.max(0, value / (max || 1)));
+function Bar({ label, ratio, words, animated, delay }) {
+  const { theme } = useTheme();
+  const t = useEntrance(animated, delay, 900);
+  const [width, setWidth] = React13.useState(0);
+  const translateX = t.interpolate({ inputRange: [0, 1], outputRange: [-width * ratio, 0] });
+  return /* @__PURE__ */ jsx20(
+    View15,
+    {
+      accessible: true,
+      role: "meter",
+      "aria-label": label,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": Math.round(ratio * 100),
+      "aria-valuetext": words,
+      onLayout: (e) => setWidth(e.nativeEvent.layout.width),
+      style: [styles12.track, { backgroundColor: theme.surface3 }],
+      children: /* @__PURE__ */ jsx20(Animated10.View, { style: [styles12.fill, { width: `${ratio * 100}%`, backgroundColor: theme.accent, transform: [{ translateX }] }] })
+    }
+  );
+}
+function ProfileCard({ visual, name, statLabel, value = 100, valueText, stats, caption, children, animated = true, style, ...props }) {
+  const { theme, radius: radius3 } = useTheme();
+  const ratio = ratioOf(value);
+  return /* @__PURE__ */ jsxs16(View15, { ...props, style: [styles12.root, { backgroundColor: theme.surface1, borderColor: theme.borderSubtle, borderRadius: radius3.xl }, style], children: [
+    /* @__PURE__ */ jsx20(View15, { "aria-hidden": true, style: [styles12.disc, { backgroundColor: theme.surface2, borderColor: theme.accentSoft }], children: visual }),
+    /* @__PURE__ */ jsxs16(View15, { style: styles12.head, children: [
+      /* @__PURE__ */ jsx20(Txt, { variant: "title", style: styles12.name, children: name }),
+      statLabel ? /* @__PURE__ */ jsxs16(Txt, { variant: "caption", tone: "secondary", children: [
+        statLabel,
+        " ",
+        /* @__PURE__ */ jsx20(Txt, { variant: "caption", children: valueText ?? `${Math.round(ratio * 100)} %` })
+      ] }) : null
+    ] }),
+    statLabel ? /* @__PURE__ */ jsx20(Bar, { label: statLabel, ratio, words: valueText ?? `${Math.round(ratio * 100)} %`, animated, delay: 200 }) : null,
+    stats?.map((s, i) => {
+      const r = ratioOf(s.value, s.max);
+      const words = s.valueText ?? `${Math.round(r * 100)} %`;
+      return /* @__PURE__ */ jsxs16(View15, { style: styles12.stat, children: [
+        /* @__PURE__ */ jsxs16(View15, { "aria-hidden": true, style: styles12.statHead, children: [
+          /* @__PURE__ */ jsx20(Txt, { variant: "caption", tone: "secondary", children: s.label }),
+          /* @__PURE__ */ jsx20(Txt, { variant: "caption", children: words })
+        ] }),
+        /* @__PURE__ */ jsx20(Bar, { label: s.label, ratio: r, words, animated, delay: 320 + i * 120 })
+      ] }, s.label);
+    }),
+    caption ? /* @__PURE__ */ jsx20(Txt, { variant: "caption", tone: "secondary", style: styles12.caption, children: caption }) : null,
+    children ? /* @__PURE__ */ jsx20(View15, { style: styles12.extra, children }) : null
+  ] });
+}
+var styles12 = StyleSheet12.create({
+  root: { alignItems: "center", gap: 12, padding: 20, borderWidth: StyleSheet12.hairlineWidth },
+  disc: { width: 104, height: 104, borderRadius: 52, borderWidth: 1, alignItems: "center", justifyContent: "center", overflow: "hidden" },
+  head: { flexDirection: "row", alignSelf: "stretch", alignItems: "center", justifyContent: "space-between", gap: 8 },
+  name: { flexShrink: 1, fontSize: 17 },
+  track: { alignSelf: "stretch", height: 6, borderRadius: 3, overflow: "hidden" },
+  fill: { height: "100%", borderRadius: 3 },
+  stat: { alignSelf: "stretch", gap: 5 },
+  statHead: { flexDirection: "row", justifyContent: "space-between", gap: 8 },
+  caption: { textAlign: "center" },
+  extra: { flexDirection: "row", flexWrap: "wrap", justifyContent: "center", gap: 8, alignSelf: "stretch" }
+});
+
 // src/native/progress.tsx
-import * as React9 from "react";
-import { Animated as Animated6, Easing as Easing4, StyleSheet as StyleSheet10, View as View11 } from "react-native";
-import Svg7, { Circle as Circle5, Defs as Defs6, LinearGradient as LinearGradient6, Rect as Rect3, Stop as Stop6 } from "react-native-svg";
-import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
-var AnimatedCircle = Animated6.createAnimatedComponent(Circle5);
+import * as React14 from "react";
+import { Animated as Animated11, Easing as Easing7, StyleSheet as StyleSheet13, View as View16 } from "react-native";
+import Svg9, { Circle as Circle7, Defs as Defs8, LinearGradient as LinearGradient8, Rect as Rect3, Stop as Stop8 } from "react-native-svg";
+import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
+var AnimatedCircle = Animated11.createAnimatedComponent(Circle7);
 var BAR = { sm: 4, md: 8, lg: 12 };
 var RING = { sm: 40, md: 80, lg: 144 };
 var STROKE = { sm: 12, md: 9, lg: 7 };
@@ -1230,21 +1623,21 @@ function Progress({ variant = "bar", size = "md", value, max = 100, label, value
   const known = typeof value === "number" && Number.isFinite(value);
   const ratio = known ? Math.min(1, Math.max(0, value / (max || 1))) : 0;
   const percent = Math.round(ratio * 100);
-  const [progress] = React9.useState(() => new Animated6.Value(ratio));
-  const [spin] = React9.useState(() => new Animated6.Value(0));
-  const [track, setTrack] = React9.useState(0);
-  React9.useEffect(() => {
+  const [progress] = React14.useState(() => new Animated11.Value(ratio));
+  const [spin] = React14.useState(() => new Animated11.Value(0));
+  const [track, setTrack] = React14.useState(0);
+  React14.useEffect(() => {
     if (reduce) {
       progress.setValue(ratio);
       return;
     }
-    const animation = Animated6.timing(progress, { toValue: ratio, duration: 700, easing: Easing4.out(Easing4.cubic), useNativeDriver: false });
+    const animation = Animated11.timing(progress, { toValue: ratio, duration: 700, easing: Easing7.out(Easing7.cubic), useNativeDriver: false });
     animation.start();
     return () => animation.stop();
   }, [ratio, reduce, progress]);
-  React9.useEffect(() => {
+  React14.useEffect(() => {
     if (known || reduce) return;
-    const loop = Animated6.loop(Animated6.timing(spin, { toValue: 1, duration: 1200, easing: Easing4.linear, useNativeDriver: true }));
+    const loop = Animated11.loop(Animated11.timing(spin, { toValue: 1, duration: 1200, easing: Easing7.linear, useNativeDriver: true }));
     loop.start();
     return () => {
       loop.stop();
@@ -1260,9 +1653,9 @@ function Progress({ variant = "bar", size = "md", value, max = 100, label, value
     "aria-valuenow": known ? Math.min(max, Math.max(0, value)) : void 0,
     "aria-valuetext": known ? valueText ?? `${percent}%` : valueText
   };
-  const gradient = /* @__PURE__ */ jsx16(Defs6, { children: /* @__PURE__ */ jsxs12(LinearGradient6, { id, x1: "0", y1: "0", x2: "1", y2: variant === "ring" ? "1" : "0", children: [
-    /* @__PURE__ */ jsx16(Stop6, { offset: "0", stopColor: theme.accent }),
-    /* @__PURE__ */ jsx16(Stop6, { offset: "1", stopColor: theme.accent2 })
+  const gradient = /* @__PURE__ */ jsx21(Defs8, { children: /* @__PURE__ */ jsxs17(LinearGradient8, { id, x1: "0", y1: "0", x2: "1", y2: variant === "ring" ? "1" : "0", children: [
+    /* @__PURE__ */ jsx21(Stop8, { offset: "0", stopColor: theme.accent }),
+    /* @__PURE__ */ jsx21(Stop8, { offset: "1", stopColor: theme.accent2 })
   ] }) });
   if (variant === "ring") {
     const side = RING[size];
@@ -1271,11 +1664,11 @@ function Progress({ variant = "bar", size = "md", value, max = 100, label, value
     const circumference = 2 * Math.PI * r;
     const offset = known ? progress.interpolate({ inputRange: [0, 1], outputRange: [circumference, 0] }) : circumference * 0.75;
     const rotate = spin.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "360deg"] });
-    return /* @__PURE__ */ jsxs12(View11, { ...a11y, style: [styles10.ring, { width: side, height: side }, style], children: [
-      /* @__PURE__ */ jsx16(Animated6.View, { style: [StyleSheet10.absoluteFill, { transform: [{ rotate: known ? "-90deg" : rotate }] }], children: /* @__PURE__ */ jsxs12(Svg7, { width: side, height: side, viewBox: "0 0 100 100", children: [
+    return /* @__PURE__ */ jsxs17(View16, { ...a11y, style: [styles13.ring, { width: side, height: side }, style], children: [
+      /* @__PURE__ */ jsx21(Animated11.View, { style: [StyleSheet13.absoluteFill, { transform: [{ rotate: known ? "-90deg" : rotate }] }], children: /* @__PURE__ */ jsxs17(Svg9, { width: side, height: side, viewBox: "0 0 100 100", children: [
         gradient,
-        /* @__PURE__ */ jsx16(Circle5, { cx: 50, cy: 50, r, fill: "none", stroke: theme.borderDefault, strokeWidth: stroke }),
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx21(Circle7, { cx: 50, cy: 50, r, fill: "none", stroke: theme.borderDefault, strokeWidth: stroke }),
+        /* @__PURE__ */ jsx21(
           AnimatedCircle,
           {
             cx: 50,
@@ -1295,48 +1688,48 @@ function Progress({ variant = "bar", size = "md", value, max = 100, label, value
   }
   const width = known ? progress.interpolate({ inputRange: [0, 1], outputRange: ["0%", "100%"] }) : "40%";
   const translate = spin.interpolate({ inputRange: [0, 1], outputRange: [-0.4 * track, track] });
-  return /* @__PURE__ */ jsx16(
-    View11,
+  return /* @__PURE__ */ jsx21(
+    View16,
     {
       ...a11y,
       onLayout: known ? void 0 : (event) => setTrack(event.nativeEvent.layout.width),
-      style: [styles10.bar, { height: BAR[size], backgroundColor: theme.surface3 }, style],
-      children: /* @__PURE__ */ jsx16(Animated6.View, { style: [styles10.fill, { width }, known || reduce ? null : { transform: [{ translateX: translate }] }], children: /* @__PURE__ */ jsxs12(Svg7, { width: "100%", height: "100%", preserveAspectRatio: "none", children: [
+      style: [styles13.bar, { height: BAR[size], backgroundColor: theme.surface3 }, style],
+      children: /* @__PURE__ */ jsx21(Animated11.View, { style: [styles13.fill, { width }, known || reduce ? null : { transform: [{ translateX: translate }] }], children: /* @__PURE__ */ jsxs17(Svg9, { width: "100%", height: "100%", preserveAspectRatio: "none", children: [
         gradient,
-        /* @__PURE__ */ jsx16(Rect3, { x: 0, y: 0, width: "100%", height: "100%", fill: `url(#${id})` })
+        /* @__PURE__ */ jsx21(Rect3, { x: 0, y: 0, width: "100%", height: "100%", fill: `url(#${id})` })
       ] }) })
     }
   );
 }
-var styles10 = StyleSheet10.create({
+var styles13 = StyleSheet13.create({
   ring: { alignItems: "center", justifyContent: "center" },
   bar: { width: "100%", overflow: "hidden", borderRadius: 9999 },
   fill: { height: "100%", overflow: "hidden", borderRadius: 9999 }
 });
 
 // src/native/search-field.tsx
-import * as React10 from "react";
-import { Pressable as Pressable5, StyleSheet as StyleSheet11, TextInput, View as View12 } from "react-native";
-import Svg8, { Circle as Circle6, Path as Path6 } from "react-native-svg";
-import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+import * as React15 from "react";
+import { Pressable as Pressable5, StyleSheet as StyleSheet14, TextInput, View as View17 } from "react-native";
+import Svg10, { Circle as Circle8, Path as Path8 } from "react-native-svg";
+import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
 function SearchField({ label, value, defaultValue = "", onValueChange, onSearch, debounce = 300, onSubmit, clearLabel, style, placeholder, ...props }) {
   const { theme, radius: radius3 } = useTheme();
-  const [own, setOwn] = React10.useState(defaultValue);
+  const [own, setOwn] = React15.useState(defaultValue);
   const query = value ?? own;
-  const timer2 = React10.useRef(void 0);
-  React10.useEffect(() => () => clearTimeout(timer2.current), []);
+  const timer2 = React15.useRef(void 0);
+  React15.useEffect(() => () => clearTimeout(timer2.current), []);
   const change = (next) => {
     if (value === void 0) setOwn(next);
     onValueChange?.(next);
     clearTimeout(timer2.current);
     if (onSearch) timer2.current = setTimeout(() => onSearch(next), debounce);
   };
-  return /* @__PURE__ */ jsxs13(View12, { style: [styles11.frame, { borderRadius: radius3.md, borderColor: theme.borderDefault, backgroundColor: theme.surface2 }, style], children: [
-    /* @__PURE__ */ jsxs13(Svg8, { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", stroke: theme.textSecondary, strokeWidth: 2, strokeLinecap: "round", "aria-hidden": true, children: [
-      /* @__PURE__ */ jsx17(Circle6, { cx: 11, cy: 11, r: 7 }),
-      /* @__PURE__ */ jsx17(Path6, { d: "m20 20-3.5-3.5" })
+  return /* @__PURE__ */ jsxs18(View17, { style: [styles14.frame, { borderRadius: radius3.md, borderColor: theme.borderDefault, backgroundColor: theme.surface2 }, style], children: [
+    /* @__PURE__ */ jsxs18(Svg10, { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", stroke: theme.textSecondary, strokeWidth: 2, strokeLinecap: "round", "aria-hidden": true, children: [
+      /* @__PURE__ */ jsx22(Circle8, { cx: 11, cy: 11, r: 7 }),
+      /* @__PURE__ */ jsx22(Path8, { d: "m20 20-3.5-3.5" })
     ] }),
-    /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsx22(
       TextInput,
       {
         role: "searchbox",
@@ -1354,33 +1747,33 @@ function SearchField({ label, value, defaultValue = "", onValueChange, onSearch,
           onSearch?.(query);
           onSubmit?.(query);
         },
-        style: [styles11.input, { color: theme.textPrimary }],
+        style: [styles14.input, { color: theme.textPrimary }],
         ...props
       }
     ),
-    query ? /* @__PURE__ */ jsx17(Pressable5, { role: "button", "aria-label": clearLabel, hitSlop: 10, onPress: () => change(""), style: styles11.clear, children: /* @__PURE__ */ jsx17(Svg8, { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: theme.textSecondary, strokeWidth: 2.4, strokeLinecap: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx17(Path6, { d: "M18 6 6 18M6 6l12 12" }) }) }) : null
+    query ? /* @__PURE__ */ jsx22(Pressable5, { role: "button", "aria-label": clearLabel, hitSlop: 10, onPress: () => change(""), style: styles14.clear, children: /* @__PURE__ */ jsx22(Svg10, { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: theme.textSecondary, strokeWidth: 2.4, strokeLinecap: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx22(Path8, { d: "M18 6 6 18M6 6l12 12" }) }) }) : null
   ] });
 }
-var styles11 = StyleSheet11.create({
-  frame: { flexDirection: "row", alignItems: "center", gap: 8, height: 44, paddingLeft: 12, paddingRight: 6, borderWidth: StyleSheet11.hairlineWidth },
+var styles14 = StyleSheet14.create({
+  frame: { flexDirection: "row", alignItems: "center", gap: 8, height: 44, paddingLeft: 12, paddingRight: 6, borderWidth: StyleSheet14.hairlineWidth },
   input: { flex: 1, height: "100%", fontSize: 15, paddingVertical: 0 },
   clear: { width: 32, height: 32, alignItems: "center", justifyContent: "center" }
 });
 
 // src/native/segmented.tsx
-import { Pressable as Pressable6, StyleSheet as StyleSheet12, Text as Text7, View as View13 } from "react-native";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { Pressable as Pressable6, StyleSheet as StyleSheet15, Text as Text7, View as View18 } from "react-native";
+import { jsx as jsx23 } from "react/jsx-runtime";
 function Segmented({ options, value, onValueChange, size = "md", "aria-label": label, style }) {
   const { theme, radius: radius3 } = useTheme();
-  return /* @__PURE__ */ jsx18(
-    View13,
+  return /* @__PURE__ */ jsx23(
+    View18,
     {
       role: "tablist",
       "aria-label": label,
-      style: [styles12.track, { backgroundColor: theme.surface2, borderColor: theme.borderSubtle, borderRadius: radius3.md, height: size === "sm" ? 32 : 40 }, style],
+      style: [styles15.track, { backgroundColor: theme.surface2, borderColor: theme.borderSubtle, borderRadius: radius3.md, height: size === "sm" ? 32 : 40 }, style],
       children: options.map((option) => {
         const selected = option.value === value;
-        return /* @__PURE__ */ jsx18(
+        return /* @__PURE__ */ jsx23(
           Pressable6,
           {
             role: "tab",
@@ -1391,12 +1784,12 @@ function Segmented({ options, value, onValueChange, size = "md", "aria-label": l
               if (!selected) onValueChange(option.value);
             },
             style: [
-              styles12.segment,
+              styles15.segment,
               { borderRadius: radius3.sm },
               selected ? { backgroundColor: theme.surface0, borderColor: theme.borderDefault } : null,
-              option.disabled ? styles12.disabled : null
+              option.disabled ? styles15.disabled : null
             ],
-            children: /* @__PURE__ */ jsx18(Text7, { numberOfLines: 1, style: [styles12.label, { color: selected ? theme.textPrimary : theme.textSecondary, fontSize: size === "sm" ? 12 : 13 }], children: option.label })
+            children: /* @__PURE__ */ jsx23(Text7, { numberOfLines: 1, style: [styles15.label, { color: selected ? theme.textPrimary : theme.textSecondary, fontSize: size === "sm" ? 12 : 13 }], children: option.label })
           },
           option.value
         );
@@ -1404,17 +1797,17 @@ function Segmented({ options, value, onValueChange, size = "md", "aria-label": l
     }
   );
 }
-var styles12 = StyleSheet12.create({
-  track: { flexDirection: "row", padding: 3, gap: 3, borderWidth: StyleSheet12.hairlineWidth },
-  segment: { flex: 1, alignItems: "center", justifyContent: "center", paddingHorizontal: 8, borderWidth: StyleSheet12.hairlineWidth, borderColor: "transparent" },
+var styles15 = StyleSheet15.create({
+  track: { flexDirection: "row", padding: 3, gap: 3, borderWidth: StyleSheet15.hairlineWidth },
+  segment: { flex: 1, alignItems: "center", justifyContent: "center", paddingHorizontal: 8, borderWidth: StyleSheet15.hairlineWidth, borderColor: "transparent" },
   label: { fontWeight: "600" },
   disabled: { opacity: 0.4 }
 });
 
 // src/native/skeleton.tsx
-import * as React11 from "react";
-import { Animated as Animated7 } from "react-native";
-import { jsx as jsx19 } from "react/jsx-runtime";
+import * as React16 from "react";
+import { Animated as Animated12 } from "react-native";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var SHAPE = {
   text: { width: "100%", height: 12, radius: 4 },
   circle: { width: 40, height: 40, radius: 9999 },
@@ -1423,13 +1816,13 @@ var SHAPE = {
 function Skeleton({ shape = "text", width, height, style, testID }) {
   const { theme } = useTheme();
   const reduce = useReducedMotion();
-  const [opacity] = React11.useState(() => new Animated7.Value(1));
-  React11.useEffect(() => {
+  const [opacity] = React16.useState(() => new Animated12.Value(1));
+  React16.useEffect(() => {
     if (reduce) return;
-    const loop = Animated7.loop(
-      Animated7.sequence([
-        Animated7.timing(opacity, { toValue: 0.5, duration: 900, useNativeDriver: true }),
-        Animated7.timing(opacity, { toValue: 1, duration: 900, useNativeDriver: true })
+    const loop = Animated12.loop(
+      Animated12.sequence([
+        Animated12.timing(opacity, { toValue: 0.5, duration: 900, useNativeDriver: true }),
+        Animated12.timing(opacity, { toValue: 1, duration: 900, useNativeDriver: true })
       ])
     );
     loop.start();
@@ -1440,8 +1833,8 @@ function Skeleton({ shape = "text", width, height, style, testID }) {
   }, [reduce, opacity]);
   const s = SHAPE[shape];
   const side = shape === "circle" ? width ?? height ?? s.width : void 0;
-  return /* @__PURE__ */ jsx19(
-    Animated7.View,
+  return /* @__PURE__ */ jsx24(
+    Animated12.View,
     {
       testID,
       "aria-hidden": true,
@@ -1455,10 +1848,10 @@ function Skeleton({ shape = "text", width, height, style, testID }) {
 
 // src/native/spinner.tsx
 import { ActivityIndicator as ActivityIndicator2 } from "react-native";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 function Spinner({ label, size = "md", ...props }) {
   const { theme } = useTheme();
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx25(
     ActivityIndicator2,
     {
       accessible: true,
@@ -1473,9 +1866,9 @@ function Spinner({ label, size = "md", ...props }) {
 }
 
 // src/native/toast.tsx
-import * as React12 from "react";
-import { AccessibilityInfo as AccessibilityInfo5, Animated as Animated8, Pressable as Pressable7, StyleSheet as StyleSheet13, Text as Text8, View as View14 } from "react-native";
-import { Fragment as Fragment3, jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
+import * as React17 from "react";
+import { AccessibilityInfo as AccessibilityInfo8, Animated as Animated13, Pressable as Pressable7, StyleSheet as StyleSheet16, Text as Text8, View as View19 } from "react-native";
+import { Fragment as Fragment3, jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
 var items = [];
 var listeners2 = /* @__PURE__ */ new Set();
 var counter = 0;
@@ -1510,30 +1903,30 @@ var toast = Object.assign(show, {
 function ToastView({ item, closeLabel, duration }) {
   const { theme, radius: radius3 } = useTheme();
   const reduce = useReducedMotion();
-  const [enter] = React12.useState(() => new Animated8.Value(reduce ? 1 : 0));
-  React12.useEffect(() => {
+  const [enter] = React17.useState(() => new Animated13.Value(reduce ? 1 : 0));
+  React17.useEffect(() => {
     if (reduce) enter.setValue(1);
-    else Animated8.timing(enter, { toValue: 1, duration: 220, useNativeDriver: true }).start();
+    else Animated13.timing(enter, { toValue: 1, duration: 220, useNativeDriver: true }).start();
   }, [enter, reduce]);
-  React12.useEffect(() => {
-    AccessibilityInfo5.announceForAccessibility(item.description ? `${item.title}. ${item.description}` : item.title);
+  React17.useEffect(() => {
+    AccessibilityInfo8.announceForAccessibility(item.description ? `${item.title}. ${item.description}` : item.title);
   }, [item.title, item.description]);
   const ms = item.duration ?? duration;
-  React12.useEffect(() => {
+  React17.useEffect(() => {
     if (!Number.isFinite(ms)) return;
     const timer2 = setTimeout(() => dismiss(item.id), ms);
     return () => clearTimeout(timer2);
   }, [item.id, ms]);
   const edge = { success: theme.success, warning: theme.warning, error: theme.danger, info: theme.info, default: theme.borderDefault }[item.tone ?? "default"];
-  const text = /* @__PURE__ */ jsxs14(Fragment3, { children: [
-    item.icon ? /* @__PURE__ */ jsx21(View14, { "aria-hidden": true, children: item.icon }) : null,
-    /* @__PURE__ */ jsxs14(View14, { style: styles13.content, children: [
-      /* @__PURE__ */ jsx21(Txt, { variant: "label", numberOfLines: 2, children: item.title }),
-      item.description ? /* @__PURE__ */ jsx21(Txt, { variant: "caption", tone: "secondary", numberOfLines: 3, children: item.description }) : null
+  const text = /* @__PURE__ */ jsxs19(Fragment3, { children: [
+    item.icon ? /* @__PURE__ */ jsx26(View19, { "aria-hidden": true, children: item.icon }) : null,
+    /* @__PURE__ */ jsxs19(View19, { style: styles16.content, children: [
+      /* @__PURE__ */ jsx26(Txt, { variant: "label", numberOfLines: 2, children: item.title }),
+      item.description ? /* @__PURE__ */ jsx26(Txt, { variant: "caption", tone: "secondary", numberOfLines: 3, children: item.description }) : null
     ] })
   ] });
-  const body = /* @__PURE__ */ jsxs14(Fragment3, { children: [
-    item.onPress ? /* @__PURE__ */ jsx21(
+  const body = /* @__PURE__ */ jsxs19(Fragment3, { children: [
+    item.onPress ? /* @__PURE__ */ jsx26(
       Pressable7,
       {
         role: "button",
@@ -1541,11 +1934,11 @@ function ToastView({ item, closeLabel, duration }) {
           item.onPress?.();
           dismiss(item.id);
         },
-        style: ({ pressed }) => [styles13.main, { opacity: pressed ? 0.8 : 1 }],
+        style: ({ pressed }) => [styles16.main, { opacity: pressed ? 0.8 : 1 }],
         children: text
       }
-    ) : /* @__PURE__ */ jsx21(View14, { style: styles13.main, children: text }),
-    item.action ? /* @__PURE__ */ jsx21(
+    ) : /* @__PURE__ */ jsx26(View19, { style: styles16.main, children: text }),
+    item.action ? /* @__PURE__ */ jsx26(
       Pressable7,
       {
         role: "button",
@@ -1553,33 +1946,33 @@ function ToastView({ item, closeLabel, duration }) {
           item.action?.onPress();
           dismiss(item.id);
         },
-        style: [styles13.action, { backgroundColor: theme.accent, borderRadius: radius3.sm }],
-        children: /* @__PURE__ */ jsx21(Text8, { style: [styles13.actionLabel, { color: theme.onAccent }], children: item.action.label })
+        style: [styles16.action, { backgroundColor: theme.accent, borderRadius: radius3.sm }],
+        children: /* @__PURE__ */ jsx26(Text8, { style: [styles16.actionLabel, { color: theme.onAccent }], children: item.action.label })
       }
     ) : null,
-    /* @__PURE__ */ jsx21(Pressable7, { role: "button", "aria-label": closeLabel, hitSlop: 10, onPress: () => dismiss(item.id), style: styles13.close, children: /* @__PURE__ */ jsx21(Text8, { style: [styles13.cross, { color: theme.textSecondary }], children: "\xD7" }) })
+    /* @__PURE__ */ jsx26(Pressable7, { role: "button", "aria-label": closeLabel, hitSlop: 10, onPress: () => dismiss(item.id), style: styles16.close, children: /* @__PURE__ */ jsx26(Text8, { style: [styles16.cross, { color: theme.textSecondary }], children: "\xD7" }) })
   ] });
   const frame = [
-    styles13.toast,
+    styles16.toast,
     { backgroundColor: theme.surface2, borderColor: theme.borderDefault, borderLeftColor: edge, borderRadius: radius3.lg, shadowColor: theme.scrimStrong }
   ];
   const motion3 = { transform: [{ translateY: enter.interpolate({ inputRange: [0, 1], outputRange: [-8, 0] }) }] };
-  return /* @__PURE__ */ jsx21(Animated8.View, { "aria-live": "polite", style: motion3, children: /* @__PURE__ */ jsx21(View14, { style: frame, children: body }) });
+  return /* @__PURE__ */ jsx26(Animated13.View, { "aria-live": "polite", style: motion3, children: /* @__PURE__ */ jsx26(View19, { style: frame, children: body }) });
 }
 function Toaster({ closeLabel, position = "top", offset = 12, duration = 6e3, max = 3 }) {
-  const all = React12.useSyncExternalStore(subscribe2, snapshot, snapshot);
+  const all = React17.useSyncExternalStore(subscribe2, snapshot, snapshot);
   const shown = all.slice(-max);
   if (shown.length === 0) return null;
-  return /* @__PURE__ */ jsx21(View14, { pointerEvents: "box-none", style: [styles13.stack, position === "top" ? { top: offset } : { bottom: offset }], children: (position === "top" ? shown : [...shown].reverse()).map((item) => /* @__PURE__ */ jsx21(ToastView, { item, closeLabel, duration }, item.id)) });
+  return /* @__PURE__ */ jsx26(View19, { pointerEvents: "box-none", style: [styles16.stack, position === "top" ? { top: offset } : { bottom: offset }], children: (position === "top" ? shown : [...shown].reverse()).map((item) => /* @__PURE__ */ jsx26(ToastView, { item, closeLabel, duration }, item.id)) });
 }
-var styles13 = StyleSheet13.create({
+var styles16 = StyleSheet16.create({
   stack: { position: "absolute", left: 12, right: 12, gap: 8, zIndex: 100 },
   toast: {
     flexDirection: "row",
     alignItems: "center",
     gap: 10,
     padding: 12,
-    borderWidth: StyleSheet13.hairlineWidth,
+    borderWidth: StyleSheet16.hairlineWidth,
     borderLeftWidth: 4,
     shadowOpacity: 0.3,
     shadowRadius: 16,
@@ -1611,21 +2004,30 @@ export {
   Chip,
   Countdown,
   EmptyState,
+  ErrorState,
+  GoalGauge,
   IconButton,
   KrizakaMark,
+  LoadingState,
   Mascot,
+  MascotState,
   OrazakaMark,
   OrochiaMark,
   Pagination,
+  Phoenix,
   ProductMark,
+  ProfileCard,
   Progress,
   SearchField,
   Segmented,
   Skeleton,
   Spinner,
+  SuccessState,
   ThemeProvider,
   Toaster,
   Txt,
+  WelcomeState,
+  YazakiaMark,
   alpha,
   splitDuration,
   textStyles,