@krizaka/ui 2.6.0 → 2.8.0

package/dist/native.js

@@ -166,6 +166,16 @@ var marks = /* @__PURE__ */ Object.freeze({
       "100%",
       "#f472b6"
     ]
+  ],
+  "yazakia": [
+    [
+      "0%",
+      "#079d61"
+    ],
+    [
+      "100%",
+      "#089b96"
+    ]
   ]
 });
 
@@ -773,7 +783,7 @@ function useMarkMotion(size, animated, spinMs = 3e4) {
 import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs7 } 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: Animated10, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated);
   const id = useSvgId("kzm");
   const viewBox = size < 48 ? KRIZAKA.croppedViewBox : KRIZAKA.viewBox;
   const stroke = neutral ?? theme.textMuted;
@@ -799,8 +809,8 @@ function KrizakaMark({ size = 48, animated = true, title, neutral }) {
       /* @__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" }) })
     ] }),
-    /* @__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(Animated10.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(Animated10.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: [
         dot(KRIZAKA.node),
@@ -810,6 +820,10 @@ function KrizakaMark({ size = 48, animated = true, title, neutral }) {
   ] });
 }
 
+// src/native/mascot-state.tsx
+import * as React8 from "react";
+import { AccessibilityInfo as AccessibilityInfo4, Animated as Animated5, Easing as Easing3, StyleSheet as StyleSheet9, View as View8 } 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";
@@ -895,6 +909,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,7 +955,8 @@ 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";
@@ -1007,8 +1041,63 @@ function Mascot({ bird = "owl", mood = "welcome", tone: tone2 = "brand", size =
   ] }) }) });
 }
 
+// src/native/mascot-state.tsx
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+var SIZE = { sm: 64, md: 96, lg: 128 };
+function useArrival(animated) {
+  const [value] = React8.useState(() => new Animated5.Value(animated ? 0 : 1));
+  React8.useEffect(() => {
+    if (!animated) return;
+    let cancelled = false;
+    void AccessibilityInfo4.isReduceMotionEnabled().then((reduce) => {
+      if (cancelled) return;
+      if (reduce) value.setValue(1);
+      else Animated5.timing(value, { toValue: 1, duration: 420, easing: Easing3.out(Easing3.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__ */ jsxs9(
+    Animated5.View,
+    {
+      role: mood === "error" ? "alert" : "status",
+      accessibilityLiveRegion: mood === "error" ? "assertive" : "polite",
+      "aria-busy": mood === "thinking" ? true : void 0,
+      ...props,
+      style: [inline ? styles9.inline : styles9.stacked, { opacity, transform: [{ translateY: opacity.interpolate({ inputRange: [0, 1], outputRange: [6, 0] }) }] }, style],
+      children: [
+        /* @__PURE__ */ jsx12(Mascot, { bird, mood, tone: tone2, size: SIZE[size], animated }),
+        /* @__PURE__ */ jsxs9(View8, { style: inline ? styles9.wordsInline : styles9.words, children: [
+          /* @__PURE__ */ jsx12(Txt, { variant: "label", role: "heading", style: inline ? null : styles9.center, children: title }),
+          description ? /* @__PURE__ */ jsx12(Txt, { tone: "secondary", style: inline ? null : styles9.center, children: description }) : null,
+          action ? /* @__PURE__ */ jsx12(View8, { style: [styles9.action, inline ? null : styles9.actionCentred], children: action }) : null
+        ] })
+      ]
+    }
+  );
+}
+var ErrorState = (props) => /* @__PURE__ */ jsx12(MascotState, { mood: "error", ...props });
+var SuccessState = (props) => /* @__PURE__ */ jsx12(MascotState, { mood: "success", ...props });
+var LoadingState = (props) => /* @__PURE__ */ jsx12(MascotState, { mood: "thinking", ...props });
+var WelcomeState = (props) => /* @__PURE__ */ jsx12(MascotState, { mood: "welcome", ...props });
+var styles9 = StyleSheet9.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 View9 } 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 +1127,40 @@ var ORAZAKA = {
 };
 
 // src/native/OrazakaMark.tsx
-import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs10 } 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: Animated10, 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__ */ jsx13(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__ */ jsx13(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__ */ jsxs10(View9, { style: { width: size, height: size }, ...markA11y(title), children: [
+    /* @__PURE__ */ jsxs10(Svg4, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsx13(Defs4, { children: /* @__PURE__ */ jsxs10(RadialGradient2, { id: `${id}g`, cx: "50%", cy: "50%", r: "50%", children: [
+        /* @__PURE__ */ jsx13(Stop4, { offset: "0%", stopColor: ORAZAKA.glow.color, stopOpacity: ORAZAKA.glow.opacity }),
+        /* @__PURE__ */ jsx13(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__ */ jsx13(Circle3, { cx: ORAZAKA.center, cy: ORAZAKA.center, r: 190, fill: `url(#${id}g)` }) : null,
+      /* @__PURE__ */ jsx13(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__ */ jsx13(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__ */ jsx13(Animated10.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsxs10(Svg4, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsx13(Defs4, { children: gradient }),
+      ORAZAKA.shards.map((d) => /* @__PURE__ */ jsx13(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__ */ jsx13(Animated10.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsxs10(Svg4, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsx13(Defs4, { children: gradient }),
+      /* @__PURE__ */ jsx13(Circle3, { cx: ORAZAKA.center, cy: ORAZAKA.center, r: ORAZAKA.core.r, fill }),
+      /* @__PURE__ */ jsx13(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 useEffect7, useState as useState9 } from "react";
+import { AccessibilityInfo as AccessibilityInfo5, Animated as Animated6, Easing as Easing4, View as View10 } 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 +1188,25 @@ var OROCHIA = {
 };
 
 // src/native/OrochiaMark.tsx
-import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs11 } 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] = useState9(() => new Animated6.Value(0));
+  const [pulse] = useState9(() => new Animated6.Value(0));
+  useEffect7(() => {
     if (!animated) return;
     let loops = [];
     let cancelled = false;
-    void AccessibilityInfo4.isReduceMotionEnabled().then((reduce) => {
+    void AccessibilityInfo5.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 })
+        Animated6.loop(Animated6.timing(spin, { toValue: 1, duration: 3e4, easing: Easing4.linear, useNativeDriver: true })),
+        Animated6.loop(
+          Animated6.sequence([
+            Animated6.timing(pulse, { toValue: 1, duration: 1600, easing: Easing4.inOut(Easing4.ease), useNativeDriver: true }),
+            Animated6.timing(pulse, { toValue: 0, duration: 1600, easing: Easing4.inOut(Easing4.ease), useNativeDriver: true })
           ])
         )
       ];
@@ -1131,44 +1220,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__ */ jsx14(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__ */ jsx14(Stop5, { offset, stopColor: color }, offset)) });
+  return /* @__PURE__ */ jsxs11(View10, { style: { width: size, height: size }, ...a11y, children: [
+    /* @__PURE__ */ jsxs11(Svg5, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsx14(Defs5, { children: /* @__PURE__ */ jsxs11(RadialGradient3, { id: "glow", cx: "50%", cy: "50%", r: "50%", children: [
+        /* @__PURE__ */ jsx14(Stop5, { offset: "0%", stopColor: OROCHIA.glow.color, stopOpacity: OROCHIA.glow.opacity }),
+        /* @__PURE__ */ jsx14(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__ */ jsx14(Circle4, { cx: CENTER, cy: CENTER, r: 170, fill: "url(#glow)" }),
+      /* @__PURE__ */ jsx14(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__ */ jsx14(Animated6.View, { style: [layer, { transform: [{ rotate: spin.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "360deg"] }) }] }], children: /* @__PURE__ */ jsx14(Svg5, { viewBox, style: layer, children: /* @__PURE__ */ jsx14(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__ */ jsxs11(Svg5, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsx14(Defs5, { children: bodyGradient }),
+      /* @__PURE__ */ jsxs11(Group2, { transform: `translate(${OROCHIA.offset} ${OROCHIA.offset})`, children: [
+        /* @__PURE__ */ jsx14(Path4, { d: OROCHIA.arc, stroke: "url(#body)", strokeWidth: 22, strokeLinecap: "round", fill: "none" }),
+        /* @__PURE__ */ jsx14(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__ */ jsx14(Path4, { d: OROCHIA.neck, stroke: "url(#body)", strokeWidth: 14, strokeLinecap: "round", fill: "none" }),
+        /* @__PURE__ */ jsx14(Path4, { d: OROCHIA.tail, stroke: "url(#body)", strokeWidth: 6, strokeLinecap: "round", fill: "none" }),
+        /* @__PURE__ */ jsx14(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__ */ jsx14(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__ */ jsx14(Animated6.View, { style: [layer, { opacity: pulse.interpolate({ inputRange: [0, 1], outputRange: [0.85, 1] }) }], children: /* @__PURE__ */ jsxs11(Svg5, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsx14(Defs5, { children: /* @__PURE__ */ jsx14(LinearGradient5, { id: "flame", x1: "50%", y1: "100%", x2: "50%", y2: "0%", children: OROCHIA.flameGradient.stops.map(([offset, color]) => /* @__PURE__ */ jsx14(Stop5, { offset, stopColor: color }, offset)) }) }),
+      /* @__PURE__ */ jsxs11(Group2, { transform: `translate(${OROCHIA.offset} ${OROCHIA.offset})`, children: [
+        /* @__PURE__ */ jsx14(Circle4, { cx: OROCHIA.eye.cx, cy: OROCHIA.eye.cy, r: OROCHIA.eye.r, fill: OROCHIA.eye.color }),
+        /* @__PURE__ */ jsx14(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 StyleSheet10, Text as Text6, View as View11 } 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 jsx15, jsxs as jsxs12 } 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__ */ jsx15(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__ */ jsx15(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 +1266,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__ */ jsx15(
     Pressable4,
     {
       role: "button",
@@ -1187,39 +1276,112 @@ function Pagination({ page = 1, pageCount, onPageChange, hasPrevious, hasNext, o
       hitSlop: 6,
       onPress,
       style: ({ pressed }) => [
-        styles9.button,
+        styles10.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__ */ jsx15(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__ */ jsxs12(View11, { role: "navigation", style: [styles10.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__ */ jsx15(Text6, { "aria-live": "polite", style: [styles10.status, { color: theme.textSecondary }], children: text }) : null,
     button("right", canNext, paged ? () => onPageChange?.(current + 1) : onNext, labels.next)
   ] });
 }
-var styles9 = StyleSheet9.create({
+var styles10 = StyleSheet10.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: StyleSheet10.hairlineWidth },
   status: { fontSize: 13, fontWeight: "600", fontVariant: ["tabular-nums"] }
 });
 
+// src/native/YazakiaMark.tsx
+import { View as View12 } 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/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 arms, from each head to the core, mirrored around x = 200. */
+  arms: ["M128 126 C130 178 168 206 200 214", "M272 126 C270 178 232 206 200 214"],
+  /** The stem, from the core down. */
+  stem: "M200 214 L200 280",
+  /** The width of the arms and the stem: the weight of Orochia's body. */
+  stroke: 36,
+  /** The two heads, at the ends of the arms. */
+  heads: [
+    { cx: 128, cy: 124, r: 28 },
+    { cx: 272, cy: 124, r: 28 }
+  ],
+  gradient: { x1: 110, y1: 300, x2: 290, y2: 100, stops: marks.yazakia },
+  /** Where the arms meet: the core that breathes. */
+  core: { cx: 200, cy: 214, r: 24, inner: 8.5 },
+  highlight: "#f0fdfa",
+  /** 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 jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
+function YazakiaMark({ size = 48, animated = true, title, neutral }) {
+  const { theme } = useTheme();
+  const { Animated: Animated10, 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__ */ jsx16(LinearGradient6, { 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__ */ jsx16(Stop6, { offset, stopColor: color }, offset)) });
+  const fill = `url(#${id}a)`;
+  return /* @__PURE__ */ jsxs13(View12, { style: { width: size, height: size }, ...markA11y(title), children: [
+    /* @__PURE__ */ jsxs13(Svg7, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsxs13(Defs6, { children: [
+        /* @__PURE__ */ jsxs13(RadialGradient4, { id: `${id}g`, cx: "50%", cy: "50%", r: "50%", children: [
+          /* @__PURE__ */ jsx16(Stop6, { offset: "0%", stopColor: YAZAKIA.glow.color, stopOpacity: YAZAKIA.glow.opacity }),
+          /* @__PURE__ */ jsx16(Stop6, { offset: "100%", stopColor: YAZAKIA.glow.color, stopOpacity: 0 })
+        ] }),
+        gradient
+      ] }),
+      size >= 48 ? /* @__PURE__ */ jsx16(Circle5, { cx: YAZAKIA.center, cy: YAZAKIA.center, r: 190, fill: `url(#${id}g)` }) : null,
+      /* @__PURE__ */ jsx16(Circle5, { cx: YAZAKIA.center, cy: YAZAKIA.center, r: YAZAKIA.ring.r, stroke, strokeWidth: YAZAKIA.ring.width, opacity: 0.35, fill: "none" }),
+      YAZAKIA.arms.map((d) => /* @__PURE__ */ jsx16(Path6, { d, stroke: fill, strokeWidth: YAZAKIA.stroke, strokeLinecap: "round", fill: "none" }, d)),
+      /* @__PURE__ */ jsx16(Path6, { d: YAZAKIA.stem, stroke: fill, strokeWidth: YAZAKIA.stroke, strokeLinecap: "round", fill: "none" }),
+      YAZAKIA.heads.map((h) => /* @__PURE__ */ jsx16(Circle5, { cx: h.cx, cy: h.cy, r: h.r, fill }, h.cx))
+    ] }),
+    /* @__PURE__ */ jsx16(Animated10.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsxs13(Svg7, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsx16(Defs6, { children: gradient }),
+      /* @__PURE__ */ jsx16(Circle5, { 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__ */ jsx16(Circle5, { cx, cy, r: YAZAKIA.pair.r, fill }, cx))
+    ] }) }),
+    /* @__PURE__ */ jsx16(Animated10.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsxs13(Svg7, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsx16(Defs6, { children: gradient }),
+      /* @__PURE__ */ jsx16(Circle5, { cx: YAZAKIA.core.cx, cy: YAZAKIA.core.cy, r: YAZAKIA.core.r, fill }),
+      /* @__PURE__ */ jsx16(Circle5, { cx: YAZAKIA.core.cx, cy: YAZAKIA.core.cy, r: YAZAKIA.core.inner, fill: YAZAKIA.highlight })
+    ] }) })
+  ] });
+}
+
 // src/native/ProductMark.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx17 } 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__ */ jsx17(KrizakaMark, { ...props });
+  if (id === "orazaka") return /* @__PURE__ */ jsx17(OrazakaMark, { ...props });
+  if (id === "yazakia") return /* @__PURE__ */ jsx17(YazakiaMark, { ...props });
+  return /* @__PURE__ */ jsx17(OrochiaMark, { ...props });
 }
 
 // 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 React10 from "react";
+import { Animated as Animated7, Easing as Easing5, StyleSheet as StyleSheet11, View as View13 } from "react-native";
+import Svg8, { Circle as Circle6, Defs as Defs7, LinearGradient as LinearGradient7, Rect as Rect3, Stop as Stop7 } from "react-native-svg";
+import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+var AnimatedCircle = Animated7.createAnimatedComponent(Circle6);
 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 +1392,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] = React10.useState(() => new Animated7.Value(ratio));
+  const [spin] = React10.useState(() => new Animated7.Value(0));
+  const [track, setTrack] = React10.useState(0);
+  React10.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 = Animated7.timing(progress, { toValue: ratio, duration: 700, easing: Easing5.out(Easing5.cubic), useNativeDriver: false });
     animation.start();
     return () => animation.stop();
   }, [ratio, reduce, progress]);
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     if (known || reduce) return;
-    const loop = Animated6.loop(Animated6.timing(spin, { toValue: 1, duration: 1200, easing: Easing4.linear, useNativeDriver: true }));
+    const loop = Animated7.loop(Animated7.timing(spin, { toValue: 1, duration: 1200, easing: Easing5.linear, useNativeDriver: true }));
     loop.start();
     return () => {
       loop.stop();
@@ -1260,9 +1422,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__ */ jsx18(Defs7, { children: /* @__PURE__ */ jsxs14(LinearGradient7, { id, x1: "0", y1: "0", x2: "1", y2: variant === "ring" ? "1" : "0", children: [
+    /* @__PURE__ */ jsx18(Stop7, { offset: "0", stopColor: theme.accent }),
+    /* @__PURE__ */ jsx18(Stop7, { offset: "1", stopColor: theme.accent2 })
   ] }) });
   if (variant === "ring") {
     const side = RING[size];
@@ -1271,11 +1433,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__ */ jsxs14(View13, { ...a11y, style: [styles11.ring, { width: side, height: side }, style], children: [
+      /* @__PURE__ */ jsx18(Animated7.View, { style: [StyleSheet11.absoluteFill, { transform: [{ rotate: known ? "-90deg" : rotate }] }], children: /* @__PURE__ */ jsxs14(Svg8, { 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__ */ jsx18(Circle6, { cx: 50, cy: 50, r, fill: "none", stroke: theme.borderDefault, strokeWidth: stroke }),
+        /* @__PURE__ */ jsx18(
           AnimatedCircle,
           {
             cx: 50,
@@ -1295,48 +1457,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__ */ jsx18(
+    View13,
     {
       ...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: [styles11.bar, { height: BAR[size], backgroundColor: theme.surface3 }, style],
+      children: /* @__PURE__ */ jsx18(Animated7.View, { style: [styles11.fill, { width }, known || reduce ? null : { transform: [{ translateX: translate }] }], children: /* @__PURE__ */ jsxs14(Svg8, { width: "100%", height: "100%", preserveAspectRatio: "none", children: [
         gradient,
-        /* @__PURE__ */ jsx16(Rect3, { x: 0, y: 0, width: "100%", height: "100%", fill: `url(#${id})` })
+        /* @__PURE__ */ jsx18(Rect3, { x: 0, y: 0, width: "100%", height: "100%", fill: `url(#${id})` })
       ] }) })
     }
   );
 }
-var styles10 = StyleSheet10.create({
+var styles11 = StyleSheet11.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 React11 from "react";
+import { Pressable as Pressable5, StyleSheet as StyleSheet12, TextInput, View as View14 } from "react-native";
+import Svg9, { Circle as Circle7, Path as Path7 } from "react-native-svg";
+import { jsx as jsx19, jsxs as jsxs15 } 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] = React11.useState(defaultValue);
   const query = value ?? own;
-  const timer2 = React10.useRef(void 0);
-  React10.useEffect(() => () => clearTimeout(timer2.current), []);
+  const timer2 = React11.useRef(void 0);
+  React11.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__ */ jsxs15(View14, { style: [styles12.frame, { borderRadius: radius3.md, borderColor: theme.borderDefault, backgroundColor: theme.surface2 }, style], children: [
+    /* @__PURE__ */ jsxs15(Svg9, { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", stroke: theme.textSecondary, strokeWidth: 2, strokeLinecap: "round", "aria-hidden": true, children: [
+      /* @__PURE__ */ jsx19(Circle7, { cx: 11, cy: 11, r: 7 }),
+      /* @__PURE__ */ jsx19(Path7, { d: "m20 20-3.5-3.5" })
     ] }),
-    /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsx19(
       TextInput,
       {
         role: "searchbox",
@@ -1354,33 +1516,33 @@ function SearchField({ label, value, defaultValue = "", onValueChange, onSearch,
           onSearch?.(query);
           onSubmit?.(query);
         },
-        style: [styles11.input, { color: theme.textPrimary }],
+        style: [styles12.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__ */ jsx19(Pressable5, { role: "button", "aria-label": clearLabel, hitSlop: 10, onPress: () => change(""), style: styles12.clear, children: /* @__PURE__ */ jsx19(Svg9, { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: theme.textSecondary, strokeWidth: 2.4, strokeLinecap: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx19(Path7, { 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 styles12 = StyleSheet12.create({
+  frame: { flexDirection: "row", alignItems: "center", gap: 8, height: 44, paddingLeft: 12, paddingRight: 6, borderWidth: StyleSheet12.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 StyleSheet13, Text as Text7, View as View15 } from "react-native";
+import { jsx as jsx20 } 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__ */ jsx20(
+    View15,
     {
       role: "tablist",
       "aria-label": label,
-      style: [styles12.track, { backgroundColor: theme.surface2, borderColor: theme.borderSubtle, borderRadius: radius3.md, height: size === "sm" ? 32 : 40 }, style],
+      style: [styles13.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__ */ jsx20(
           Pressable6,
           {
             role: "tab",
@@ -1391,12 +1553,12 @@ function Segmented({ options, value, onValueChange, size = "md", "aria-label": l
               if (!selected) onValueChange(option.value);
             },
             style: [
-              styles12.segment,
+              styles13.segment,
               { borderRadius: radius3.sm },
               selected ? { backgroundColor: theme.surface0, borderColor: theme.borderDefault } : null,
-              option.disabled ? styles12.disabled : null
+              option.disabled ? styles13.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__ */ jsx20(Text7, { numberOfLines: 1, style: [styles13.label, { color: selected ? theme.textPrimary : theme.textSecondary, fontSize: size === "sm" ? 12 : 13 }], children: option.label })
           },
           option.value
         );
@@ -1404,17 +1566,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 styles13 = StyleSheet13.create({
+  track: { flexDirection: "row", padding: 3, gap: 3, borderWidth: StyleSheet13.hairlineWidth },
+  segment: { flex: 1, alignItems: "center", justifyContent: "center", paddingHorizontal: 8, borderWidth: StyleSheet13.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 React12 from "react";
+import { Animated as Animated8 } from "react-native";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var SHAPE = {
   text: { width: "100%", height: 12, radius: 4 },
   circle: { width: 40, height: 40, radius: 9999 },
@@ -1423,13 +1585,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] = React12.useState(() => new Animated8.Value(1));
+  React12.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 = Animated8.loop(
+      Animated8.sequence([
+        Animated8.timing(opacity, { toValue: 0.5, duration: 900, useNativeDriver: true }),
+        Animated8.timing(opacity, { toValue: 1, duration: 900, useNativeDriver: true })
       ])
     );
     loop.start();
@@ -1440,8 +1602,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__ */ jsx21(
+    Animated8.View,
     {
       testID,
       "aria-hidden": true,
@@ -1455,10 +1617,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 jsx22 } from "react/jsx-runtime";
 function Spinner({ label, size = "md", ...props }) {
   const { theme } = useTheme();
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx22(
     ActivityIndicator2,
     {
       accessible: true,
@@ -1473,9 +1635,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 React13 from "react";
+import { AccessibilityInfo as AccessibilityInfo6, Animated as Animated9, Pressable as Pressable7, StyleSheet as StyleSheet14, Text as Text8, View as View16 } from "react-native";
+import { Fragment as Fragment3, jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
 var items = [];
 var listeners2 = /* @__PURE__ */ new Set();
 var counter = 0;
@@ -1510,30 +1672,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] = React13.useState(() => new Animated9.Value(reduce ? 1 : 0));
+  React13.useEffect(() => {
     if (reduce) enter.setValue(1);
-    else Animated8.timing(enter, { toValue: 1, duration: 220, useNativeDriver: true }).start();
+    else Animated9.timing(enter, { toValue: 1, duration: 220, useNativeDriver: true }).start();
   }, [enter, reduce]);
-  React12.useEffect(() => {
-    AccessibilityInfo5.announceForAccessibility(item.description ? `${item.title}. ${item.description}` : item.title);
+  React13.useEffect(() => {
+    AccessibilityInfo6.announceForAccessibility(item.description ? `${item.title}. ${item.description}` : item.title);
   }, [item.title, item.description]);
   const ms = item.duration ?? duration;
-  React12.useEffect(() => {
+  React13.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__ */ jsxs16(Fragment3, { children: [
+    item.icon ? /* @__PURE__ */ jsx23(View16, { "aria-hidden": true, children: item.icon }) : null,
+    /* @__PURE__ */ jsxs16(View16, { style: styles14.content, children: [
+      /* @__PURE__ */ jsx23(Txt, { variant: "label", numberOfLines: 2, children: item.title }),
+      item.description ? /* @__PURE__ */ jsx23(Txt, { variant: "caption", tone: "secondary", numberOfLines: 3, children: item.description }) : null
     ] })
   ] });
-  const body = /* @__PURE__ */ jsxs14(Fragment3, { children: [
-    item.onPress ? /* @__PURE__ */ jsx21(
+  const body = /* @__PURE__ */ jsxs16(Fragment3, { children: [
+    item.onPress ? /* @__PURE__ */ jsx23(
       Pressable7,
       {
         role: "button",
@@ -1541,11 +1703,11 @@ function ToastView({ item, closeLabel, duration }) {
           item.onPress?.();
           dismiss(item.id);
         },
-        style: ({ pressed }) => [styles13.main, { opacity: pressed ? 0.8 : 1 }],
+        style: ({ pressed }) => [styles14.main, { opacity: pressed ? 0.8 : 1 }],
         children: text
       }
-    ) : /* @__PURE__ */ jsx21(View14, { style: styles13.main, children: text }),
-    item.action ? /* @__PURE__ */ jsx21(
+    ) : /* @__PURE__ */ jsx23(View16, { style: styles14.main, children: text }),
+    item.action ? /* @__PURE__ */ jsx23(
       Pressable7,
       {
         role: "button",
@@ -1553,33 +1715,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: [styles14.action, { backgroundColor: theme.accent, borderRadius: radius3.sm }],
+        children: /* @__PURE__ */ jsx23(Text8, { style: [styles14.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__ */ jsx23(Pressable7, { role: "button", "aria-label": closeLabel, hitSlop: 10, onPress: () => dismiss(item.id), style: styles14.close, children: /* @__PURE__ */ jsx23(Text8, { style: [styles14.cross, { color: theme.textSecondary }], children: "\xD7" }) })
   ] });
   const frame = [
-    styles13.toast,
+    styles14.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__ */ jsx23(Animated9.View, { "aria-live": "polite", style: motion3, children: /* @__PURE__ */ jsx23(View16, { style: frame, children: body }) });
 }
 function Toaster({ closeLabel, position = "top", offset = 12, duration = 6e3, max = 3 }) {
-  const all = React12.useSyncExternalStore(subscribe2, snapshot, snapshot);
+  const all = React13.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__ */ jsx23(View16, { pointerEvents: "box-none", style: [styles14.stack, position === "top" ? { top: offset } : { bottom: offset }], children: (position === "top" ? shown : [...shown].reverse()).map((item) => /* @__PURE__ */ jsx23(ToastView, { item, closeLabel, duration }, item.id)) });
 }
-var styles13 = StyleSheet13.create({
+var styles14 = StyleSheet14.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: StyleSheet14.hairlineWidth,
     borderLeftWidth: 4,
     shadowOpacity: 0.3,
     shadowRadius: 16,
@@ -1611,9 +1773,12 @@ export {
   Chip,
   Countdown,
   EmptyState,
+  ErrorState,
   IconButton,
   KrizakaMark,
+  LoadingState,
   Mascot,
+  MascotState,
   OrazakaMark,
   OrochiaMark,
   Pagination,
@@ -1623,9 +1788,12 @@ export {
   Segmented,
   Skeleton,
   Spinner,
+  SuccessState,
   ThemeProvider,
   Toaster,
   Txt,
+  WelcomeState,
+  YazakiaMark,
   alpha,
   splitDuration,
   textStyles,