@krizaka/ui 2.1.0 → 2.2.0

package/dist/native.js

@@ -749,7 +749,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: Animated8, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated);
+  const { Animated: Animated9, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated);
   const id = useSvgId("kzm");
   const viewBox = size < 48 ? KRIZAKA.croppedViewBox : KRIZAKA.viewBox;
   const stroke = neutral ?? theme.textMuted;
@@ -775,8 +775,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(Animated8.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(Animated8.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsxs7(Svg2, { viewBox, style: layer, children: [
+    /* @__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: [
         dot(KRIZAKA.node),
@@ -786,9 +786,206 @@ function KrizakaMark({ size = 48, animated = true, title, neutral }) {
   ] });
 }
 
+// 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 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
+var mirror = (d) => d.replace(/(-?\d+(?:\.\d+)?) (-?\d+(?:\.\d+)?)/g, (_, x, y) => `${120 - Number(x)} ${y}`);
+var falconWing = "M29 58 C17 68 19 88 37 86 C31 76 31 66 29 58 Z";
+var pigeonWing = "M36 58 C20 50 16 80 38 84 C34 74 34 66 36 58 Z";
+var BIRDS = {
+  falcon: {
+    shadow: [60, 110, 26, 3.5],
+    legs: ["M51 94 L48 108 M44 108 L52 108", "M69 94 L72 108 M68 108 L76 108"],
+    body: "M30 62 C30 42 90 42 90 62 C90 88 78 98 60 98 C42 98 30 88 30 62 Z",
+    belly: "M41 66 C41 55 79 55 79 66 C79 82 71 90 60 90 C49 90 41 82 41 66 Z",
+    wings: [
+      { d: falconWing, pivot: [29, 58] },
+      { d: mirror(falconWing), pivot: [91, 58] }
+    ],
+    head: { cx: 60, cy: 38, r: 22 },
+    details: ["M46 20 L52 10 L56 19 Z", "M74 20 L68 10 L64 19 Z"],
+    visor: { x: 41, y: 29, w: 38, h: 13 },
+    beak: "M54 45 L66 45 L60 57 Z",
+    eyes: { at: [[50, 35.5], [70, 35.5]], white: 0, pupil: 3.2 }
+  },
+  owl: {
+    shadow: [60, 110, 24, 3.5],
+    legs: ["M53 100 L51 107 M47 107 L55 107", "M67 100 L69 107 M65 107 L73 107"],
+    body: "M28 52 C28 20 92 20 92 52 C92 86 82 102 60 102 C38 102 28 86 28 52 Z",
+    belly: "M42 66 C42 52 78 52 78 66 C78 86 72 94 60 94 C48 94 42 86 42 66 Z",
+    wings: [
+      { d: "M29 58 C18 68 20 88 36 90 C32 78 32 68 29 58 Z", pivot: [29, 58] },
+      { d: mirror("M29 58 C18 68 20 88 36 90 C32 78 32 68 29 58 Z"), pivot: [91, 58] }
+    ],
+    head: { cx: 60, cy: 42, r: 0 },
+    details: ["M31 20 L47 31 L31 41 Z", "M89 20 L73 31 L89 41 Z"],
+    beak: "M55 50 L65 50 L60 59 Z",
+    eyes: { at: [[47, 41], [73, 41]], white: 10, pupil: 4 }
+  },
+  duck: {
+    shadow: [60, 110, 30, 3.5],
+    legs: [],
+    back: ["M88 80 C100 76 104 66 96 62 C98 70 94 74 88 74 Z"],
+    body: "M26 80 C26 62 94 62 94 80 C94 100 82 106 60 106 C38 106 26 100 26 80 Z",
+    belly: "M38 84 C38 72 82 72 82 84 C82 96 74 101 60 101 C46 101 38 96 38 84 Z",
+    wings: [
+      { d: "M27 74 C14 80 18 98 35 96 C31 88 29 80 27 74 Z", pivot: [27, 74] },
+      { d: mirror("M27 74 C14 80 18 98 35 96 C31 88 29 80 27 74 Z"), pivot: [93, 74] }
+    ],
+    head: { cx: 60, cy: 42, r: 23 },
+    details: ["M57 20 C54 11 63 8 66 14 C62 13 60 16 61 20 Z"],
+    glasses: true,
+    beak: "M43 51 C43 46 55 45 60 45 C65 45 77 46 77 51 C77 56 66 60 60 60 C54 60 43 56 43 51 Z",
+    eyes: { at: [[51, 37], [69, 37]], white: 0, pupil: 2.6 }
+  },
+  flamingo: {
+    shadow: [60, 110, 20, 3],
+    legs: ["M56 86 L55 97 L58 108 M53 108 L62 108", "M65 86 L66 108 M62 108 L71 108"],
+    body: "M38 70 C38 54 88 54 88 70 C88 86 76 90 62 90 C48 90 38 86 38 70 Z",
+    belly: "M46 72 C46 63 80 63 80 72 C80 82 72 85 63 85 C54 85 46 82 46 72 Z",
+    wings: [
+      { d: "M42 64 C30 68 32 84 47 84 C43 76 43 70 42 64 Z", pivot: [42, 64] },
+      { d: "M84 64 C96 68 94 84 79 84 C83 76 83 70 84 64 Z", pivot: [84, 64] }
+    ],
+    neck: { d: "M58 60 C58 42 40 34 46 22", width: 7 },
+    head: { cx: 48, cy: 18, r: 11 },
+    details: [],
+    beak: "M38 16 C28 18 29 28 24 33 C33 28 38 23 40 20 Z",
+    eyes: { at: [[46, 15]], white: 3.2, pupil: 1.8 }
+  },
+  pigeon: {
+    shadow: [60, 112, 22, 3],
+    legs: ["M52 94 L51 99 M48 99 L54 99", "M68 94 L69 99 M66 99 L72 99"],
+    back: ["M53 98 L52 103", "M67 98 L68 103", "M30 68 C16 72 14 62 28 56 C17 57 15 49 32 48 Z"],
+    body: "M34 64 C34 44 86 44 86 64 C86 86 74 96 60 96 C46 96 34 86 34 64 Z",
+    belly: "M43 68 C43 57 77 57 77 68 C77 82 70 88 60 88 C50 88 43 82 43 68 Z",
+    wings: [
+      { d: pigeonWing, pivot: [36, 58] },
+      { d: mirror(pigeonWing), pivot: [84, 58] }
+    ],
+    head: { cx: 60, cy: 36, r: 19 },
+    details: ["M54 18 C56 12 64 12 66 18 C63 16 57 16 54 18 Z"],
+    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"]
+  }
+};
+var MOOD_PARTS = {
+  /** The badge of `success` and `error`, top right. */
+  badge: { cx: 98, cy: 22, r: 11 },
+  check: "M92.5 22.5 L96.8 26.6 L103.6 18.4",
+  bang: { line: "M98 15.5 L98 23.5", dot: [98, 28] },
+  /** `thinking`: three dots rising to the right of the head. */
+  dots: [
+    [88, 26, 2.6],
+    [96, 19, 3.2],
+    [105, 11, 3.8]
+  ],
+  /** `empty`: an open tray beside the bird. */
+  tray: "M90 96 L110 96 L107 108 L93 108 Z",
+  /** `success`: two sparkles. */
+  sparkles: ["M16 26 L18 31 L23 33 L18 35 L16 40 L14 35 L9 33 L14 31 Z", "M104 52 L105.2 55 L108 56 L105.2 57 L104 60 L102.8 57 L100 56 L102.8 55 Z"]
+};
+var archEye = ([x, y], r) => `M${x - r} ${y + r * 0.45} Q${x} ${y - r * 1.15} ${x + r} ${y + r * 0.45}`;
+var lidEye = ([x, y], r) => `M${x - r} ${y + 0.4} L${x + r} ${y + 0.4}`;
+var upperLid = ([x, y], r) => `M${x - r} ${y} A${r} ${r} 0 0 1 ${x + r} ${y} Z`;
+var brow = ([x, y], r, side) => `M${x - r * 1.1} ${y - r * 1.25 - (side < 0 ? 0 : r * 0.7)} L${x + r * 1.1} ${y - r * 1.5 - (side < 0 ? r * 0.7 : 0)}`;
+var OWN_PALETTES = {
+  falcon: { from: "#ff9f00", to: "#ff2a00", wing: "#d84315", detail: "#b4320d", beak: "#ffb300", eye: "#00c8d4" },
+  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" }
+};
+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";
+function useBob(animated) {
+  const [y] = useState7(() => new Animated4.Value(0));
+  useEffect5(() => {
+    if (!animated) return;
+    let loop;
+    let cancelled = false;
+    void AccessibilityInfo3.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)]));
+      loop.start();
+    });
+    return () => {
+      cancelled = true;
+      loop?.stop();
+    };
+  }, [animated, y]);
+  return y;
+}
+function Mascot({ bird = "owl", mood = "welcome", tone: tone2 = "brand", size = 96, animated = true, title, style }) {
+  const { theme } = useTheme();
+  const id = useSvgId("kzb");
+  const bob = useBob(animated);
+  const g = BIRDS[bird];
+  const brand = { from: theme.accent2, to: theme.accent, wing: theme.accent, detail: theme.accent2, beak: theme.warning, eye: theme.textPrimary };
+  const p = tone2 === "own" ? OWN_PALETTES[bird] : brand;
+  const outline = theme.borderStrong;
+  const body = `url(#${id})`;
+  const line = { stroke: outline, strokeWidth: 1.4, strokeLinejoin: "round" };
+  const eyeR = g.eyes.white || g.eyes.pupil * 1.2;
+  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 })
+    ] }) }),
+    /* @__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 }),
+    [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 })
+      ] }, 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.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 })
+      ] }, 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 })
+  ] }) }) });
+}
+
 // src/native/OrazakaMark.tsx
-import { View as View7 } from "react-native";
-import Svg3, { Circle as Circle2, Defs as Defs3, LinearGradient as LinearGradient3, Path as Path2, RadialGradient as RadialGradient2, Stop as Stop3 } from "react-native-svg";
+import { View as View8 } 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
 var orange = marks.orazaka[marks.orazaka.length - 1][1];
@@ -817,41 +1014,41 @@ var ORAZAKA = {
 };
 
 // src/native/OrazakaMark.tsx
-import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 function OrazakaMark({ size = 48, animated = true, title, neutral }) {
   const { theme } = useTheme();
-  const { Animated: Animated8, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated);
+  const { Animated: Animated9, 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__ */ jsx11(LinearGradient3, { 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__ */ jsx11(Stop3, { offset, stopColor: color }, offset)) });
+  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 fill = `url(#${id}a)`;
-  return /* @__PURE__ */ jsxs8(View7, { style: { width: size, height: size }, ...markA11y(title), children: [
-    /* @__PURE__ */ jsxs8(Svg3, { viewBox, style: layer, children: [
-      /* @__PURE__ */ jsx11(Defs3, { children: /* @__PURE__ */ jsxs8(RadialGradient2, { id: `${id}g`, cx: "50%", cy: "50%", r: "50%", children: [
-        /* @__PURE__ */ jsx11(Stop3, { offset: "0%", stopColor: ORAZAKA.glow.color, stopOpacity: ORAZAKA.glow.opacity }),
-        /* @__PURE__ */ jsx11(Stop3, { offset: "100%", stopColor: ORAZAKA.glow.color, stopOpacity: 0 })
+  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 })
       ] }) }),
-      size >= 48 ? /* @__PURE__ */ jsx11(Circle2, { cx: ORAZAKA.center, cy: ORAZAKA.center, r: 190, fill: `url(#${id}g)` }) : null,
-      /* @__PURE__ */ jsx11(Circle2, { 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__ */ jsx11(Circle2, { cx: ORAZAKA.center, cy: ORAZAKA.center, r: ORAZAKA.ring.r, stroke, strokeWidth: ORAZAKA.ring.width, opacity: 0.35, fill: "none" })
+      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" })
     ] }),
-    /* @__PURE__ */ jsx11(Animated8.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsxs8(Svg3, { viewBox, style: layer, children: [
-      /* @__PURE__ */ jsx11(Defs3, { children: gradient }),
-      ORAZAKA.shards.map((d) => /* @__PURE__ */ jsx11(Path2, { d, fill, stroke: fill, strokeWidth: ORAZAKA.shardStroke, strokeLinejoin: "round" }, d))
+    /* @__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__ */ jsx11(Animated8.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsxs8(Svg3, { viewBox, style: layer, children: [
-      /* @__PURE__ */ jsx11(Defs3, { children: gradient }),
-      /* @__PURE__ */ jsx11(Circle2, { cx: ORAZAKA.center, cy: ORAZAKA.center, r: ORAZAKA.core.r, fill }),
-      /* @__PURE__ */ jsx11(Circle2, { cx: ORAZAKA.center, cy: ORAZAKA.center, r: ORAZAKA.core.inner, fill: ORAZAKA.highlight })
+    /* @__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 })
     ] }) })
   ] });
 }
 
 // src/native/OrochiaMark.tsx
-import { useEffect as useEffect5, useState as useState7 } from "react";
-import { AccessibilityInfo as AccessibilityInfo3, Animated as Animated4, Easing as Easing2, View as View8 } from "react-native";
-import Svg4, { Circle as Circle3, Defs as Defs4, Ellipse, G as Group2, LinearGradient as LinearGradient4, Path as Path3, RadialGradient as RadialGradient3, Stop as Stop4 } from "react-native-svg";
+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 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
 var OROCHIA = {
@@ -878,25 +1075,25 @@ var OROCHIA = {
 };
 
 // src/native/OrochiaMark.tsx
-import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs10 } 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] = useState7(() => new Animated4.Value(0));
-  const [pulse] = useState7(() => new Animated4.Value(0));
-  useEffect5(() => {
+  const [spin] = useState8(() => new Animated5.Value(0));
+  const [pulse] = useState8(() => new Animated5.Value(0));
+  useEffect6(() => {
     if (!animated) return;
     let loops = [];
     let cancelled = false;
-    void AccessibilityInfo3.isReduceMotionEnabled().then((reduce) => {
+    void AccessibilityInfo4.isReduceMotionEnabled().then((reduce) => {
       if (reduce || cancelled) return;
       loops = [
-        Animated4.loop(Animated4.timing(spin, { toValue: 1, duration: 3e4, easing: Easing2.linear, useNativeDriver: true })),
-        Animated4.loop(
-          Animated4.sequence([
-            Animated4.timing(pulse, { toValue: 1, duration: 1600, easing: Easing2.inOut(Easing2.ease), useNativeDriver: true }),
-            Animated4.timing(pulse, { toValue: 0, duration: 1600, easing: Easing2.inOut(Easing2.ease), useNativeDriver: true })
+        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 })
           ])
         )
       ];
@@ -910,52 +1107,52 @@ 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__ */ jsx12(LinearGradient4, { 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__ */ jsx12(Stop4, { offset, stopColor: color }, offset)) });
-  return /* @__PURE__ */ jsxs9(View8, { style: { width: size, height: size }, ...a11y, children: [
-    /* @__PURE__ */ jsxs9(Svg4, { viewBox, style: layer, children: [
-      /* @__PURE__ */ jsx12(Defs4, { children: /* @__PURE__ */ jsxs9(RadialGradient3, { id: "glow", cx: "50%", cy: "50%", r: "50%", children: [
-        /* @__PURE__ */ jsx12(Stop4, { offset: "0%", stopColor: OROCHIA.glow.color, stopOpacity: OROCHIA.glow.opacity }),
-        /* @__PURE__ */ jsx12(Stop4, { offset: "100%", stopColor: OROCHIA.glow.color, stopOpacity: 0 })
+  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 })
       ] }) }),
-      /* @__PURE__ */ jsx12(Circle3, { cx: CENTER, cy: CENTER, r: 170, fill: "url(#glow)" }),
-      /* @__PURE__ */ jsx12(Circle3, { cx: CENTER, cy: CENTER, r: OROCHIA.ring.r, stroke: neutral, strokeWidth: OROCHIA.ring.width, opacity: 0.35, fill: "none" })
+      /* @__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__ */ jsx12(Animated4.View, { style: [layer, { transform: [{ rotate: spin.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "360deg"] }) }] }], children: /* @__PURE__ */ jsx12(Svg4, { viewBox, style: layer, children: /* @__PURE__ */ jsx12(Circle3, { cx: CENTER, cy: CENTER, r: OROCHIA.orbit.r, stroke: neutral, strokeWidth: OROCHIA.orbit.width, strokeDasharray: OROCHIA.orbit.dash, opacity: 0.6, fill: "none" }) }) }),
-    /* @__PURE__ */ jsxs9(Svg4, { viewBox, style: layer, children: [
-      /* @__PURE__ */ jsx12(Defs4, { children: bodyGradient }),
-      /* @__PURE__ */ jsxs9(Group2, { transform: `translate(${OROCHIA.offset} ${OROCHIA.offset})`, children: [
-        /* @__PURE__ */ jsx12(Path3, { d: OROCHIA.arc, stroke: "url(#body)", strokeWidth: 22, strokeLinecap: "round", fill: "none" }),
-        /* @__PURE__ */ jsx12(Path3, { d: OROCHIA.arc, stroke: OROCHIA.scales.color, strokeOpacity: OROCHIA.scales.opacity, strokeWidth: OROCHIA.scales.width, strokeLinecap: "round", strokeDasharray: OROCHIA.scales.dash, fill: "none" }),
-        /* @__PURE__ */ jsx12(Path3, { d: OROCHIA.neck, stroke: "url(#body)", strokeWidth: 14, strokeLinecap: "round", fill: "none" }),
-        /* @__PURE__ */ jsx12(Path3, { d: OROCHIA.tail, stroke: "url(#body)", strokeWidth: 6, strokeLinecap: "round", fill: "none" }),
-        /* @__PURE__ */ jsx12(Ellipse, { 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__ */ jsx12(Path3, { d: OROCHIA.tongue.d, stroke: OROCHIA.tongue.color, strokeWidth: 3, strokeLinecap: "round", 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__ */ jsx12(Animated4.View, { style: [layer, { opacity: pulse.interpolate({ inputRange: [0, 1], outputRange: [0.85, 1] }) }], children: /* @__PURE__ */ jsxs9(Svg4, { viewBox, style: layer, children: [
-      /* @__PURE__ */ jsx12(Defs4, { children: /* @__PURE__ */ jsx12(LinearGradient4, { id: "flame", x1: "50%", y1: "100%", x2: "50%", y2: "0%", children: OROCHIA.flameGradient.stops.map(([offset, color]) => /* @__PURE__ */ jsx12(Stop4, { offset, stopColor: color }, offset)) }) }),
-      /* @__PURE__ */ jsxs9(Group2, { transform: `translate(${OROCHIA.offset} ${OROCHIA.offset})`, children: [
-        /* @__PURE__ */ jsx12(Circle3, { cx: OROCHIA.eye.cx, cy: OROCHIA.eye.cy, r: OROCHIA.eye.r, fill: OROCHIA.eye.color }),
-        /* @__PURE__ */ jsx12(Path3, { d: OROCHIA.flame.d, transform: `translate(${OROCHIA.flame.translate[0]} ${OROCHIA.flame.translate[1]}) scale(${OROCHIA.flame.scale})`, fill: "url(#flame)" })
+    /* @__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)" })
       ] })
     ] }) })
   ] });
 }
 
 // src/native/ProductMark.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 function ProductMark({ id, ...props }) {
-  if (id === "krizaka") return /* @__PURE__ */ jsx13(KrizakaMark, { ...props });
-  if (id === "orazaka") return /* @__PURE__ */ jsx13(OrazakaMark, { ...props });
-  return /* @__PURE__ */ jsx13(OrochiaMark, { ...props });
+  if (id === "krizaka") return /* @__PURE__ */ jsx14(KrizakaMark, { ...props });
+  if (id === "orazaka") return /* @__PURE__ */ jsx14(OrazakaMark, { ...props });
+  return /* @__PURE__ */ jsx14(OrochiaMark, { ...props });
 }
 
 // src/native/progress.tsx
-import * as React8 from "react";
-import { Animated as Animated5, Easing as Easing3, StyleSheet as StyleSheet9, View as View9 } from "react-native";
-import Svg5, { Circle as Circle4, Defs as Defs5, LinearGradient as LinearGradient5, Rect as Rect2, Stop as Stop5 } from "react-native-svg";
-import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
-var AnimatedCircle = Animated5.createAnimatedComponent(Circle4);
+import * as React9 from "react";
+import { Animated as Animated6, Easing as Easing4, StyleSheet as StyleSheet9, View as View10 } from "react-native";
+import Svg6, { Circle as Circle5, Defs as Defs6, LinearGradient as LinearGradient6, Rect as Rect3, Stop as Stop6 } from "react-native-svg";
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+var AnimatedCircle = Animated6.createAnimatedComponent(Circle5);
 var BAR = { sm: 4, md: 8, lg: 12 };
 var RING = { sm: 40, md: 80, lg: 144 };
 var STROKE = { sm: 12, md: 9, lg: 7 };
@@ -966,21 +1163,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] = React8.useState(() => new Animated5.Value(ratio));
-  const [spin] = React8.useState(() => new Animated5.Value(0));
-  const [track, setTrack] = React8.useState(0);
-  React8.useEffect(() => {
+  const [progress] = React9.useState(() => new Animated6.Value(ratio));
+  const [spin] = React9.useState(() => new Animated6.Value(0));
+  const [track, setTrack] = React9.useState(0);
+  React9.useEffect(() => {
     if (reduce) {
       progress.setValue(ratio);
       return;
     }
-    const animation = Animated5.timing(progress, { toValue: ratio, duration: 700, easing: Easing3.out(Easing3.cubic), useNativeDriver: false });
+    const animation = Animated6.timing(progress, { toValue: ratio, duration: 700, easing: Easing4.out(Easing4.cubic), useNativeDriver: false });
     animation.start();
     return () => animation.stop();
   }, [ratio, reduce, progress]);
-  React8.useEffect(() => {
+  React9.useEffect(() => {
     if (known || reduce) return;
-    const loop = Animated5.loop(Animated5.timing(spin, { toValue: 1, duration: 1200, easing: Easing3.linear, useNativeDriver: true }));
+    const loop = Animated6.loop(Animated6.timing(spin, { toValue: 1, duration: 1200, easing: Easing4.linear, useNativeDriver: true }));
     loop.start();
     return () => {
       loop.stop();
@@ -996,9 +1193,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__ */ jsx14(Defs5, { children: /* @__PURE__ */ jsxs10(LinearGradient5, { id, x1: "0", y1: "0", x2: "1", y2: variant === "ring" ? "1" : "0", children: [
-    /* @__PURE__ */ jsx14(Stop5, { offset: "0", stopColor: theme.accent }),
-    /* @__PURE__ */ jsx14(Stop5, { offset: "1", stopColor: theme.accent2 })
+  const gradient = /* @__PURE__ */ jsx15(Defs6, { children: /* @__PURE__ */ jsxs11(LinearGradient6, { id, x1: "0", y1: "0", x2: "1", y2: variant === "ring" ? "1" : "0", children: [
+    /* @__PURE__ */ jsx15(Stop6, { offset: "0", stopColor: theme.accent }),
+    /* @__PURE__ */ jsx15(Stop6, { offset: "1", stopColor: theme.accent2 })
   ] }) });
   if (variant === "ring") {
     const side = RING[size];
@@ -1007,11 +1204,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__ */ jsxs10(View9, { ...a11y, style: [styles9.ring, { width: side, height: side }, style], children: [
-      /* @__PURE__ */ jsx14(Animated5.View, { style: [StyleSheet9.absoluteFill, { transform: [{ rotate: known ? "-90deg" : rotate }] }], children: /* @__PURE__ */ jsxs10(Svg5, { width: side, height: side, viewBox: "0 0 100 100", children: [
+    return /* @__PURE__ */ jsxs11(View10, { ...a11y, style: [styles9.ring, { width: side, height: side }, style], children: [
+      /* @__PURE__ */ jsx15(Animated6.View, { style: [StyleSheet9.absoluteFill, { transform: [{ rotate: known ? "-90deg" : rotate }] }], children: /* @__PURE__ */ jsxs11(Svg6, { width: side, height: side, viewBox: "0 0 100 100", children: [
         gradient,
-        /* @__PURE__ */ jsx14(Circle4, { cx: 50, cy: 50, r, fill: "none", stroke: theme.borderDefault, strokeWidth: stroke }),
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx15(Circle5, { cx: 50, cy: 50, r, fill: "none", stroke: theme.borderDefault, strokeWidth: stroke }),
+        /* @__PURE__ */ jsx15(
           AnimatedCircle,
           {
             cx: 50,
@@ -1031,15 +1228,15 @@ 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__ */ jsx14(
-    View9,
+  return /* @__PURE__ */ jsx15(
+    View10,
     {
       ...a11y,
       onLayout: known ? void 0 : (event) => setTrack(event.nativeEvent.layout.width),
       style: [styles9.bar, { height: BAR[size], backgroundColor: theme.surface3 }, style],
-      children: /* @__PURE__ */ jsx14(Animated5.View, { style: [styles9.fill, { width }, known || reduce ? null : { transform: [{ translateX: translate }] }], children: /* @__PURE__ */ jsxs10(Svg5, { width: "100%", height: "100%", preserveAspectRatio: "none", children: [
+      children: /* @__PURE__ */ jsx15(Animated6.View, { style: [styles9.fill, { width }, known || reduce ? null : { transform: [{ translateX: translate }] }], children: /* @__PURE__ */ jsxs11(Svg6, { width: "100%", height: "100%", preserveAspectRatio: "none", children: [
         gradient,
-        /* @__PURE__ */ jsx14(Rect2, { x: 0, y: 0, width: "100%", height: "100%", fill: `url(#${id})` })
+        /* @__PURE__ */ jsx15(Rect3, { x: 0, y: 0, width: "100%", height: "100%", fill: `url(#${id})` })
       ] }) })
     }
   );
@@ -1051,19 +1248,19 @@ var styles9 = StyleSheet9.create({
 });
 
 // src/native/segmented.tsx
-import { Pressable as Pressable4, StyleSheet as StyleSheet10, Text as Text6, View as View10 } from "react-native";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { Pressable as Pressable4, StyleSheet as StyleSheet10, Text as Text6, View as View11 } from "react-native";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function Segmented({ options, value, onValueChange, size = "md", "aria-label": label, style }) {
   const { theme, radius: radius3 } = useTheme();
-  return /* @__PURE__ */ jsx15(
-    View10,
+  return /* @__PURE__ */ jsx16(
+    View11,
     {
       role: "tablist",
       "aria-label": label,
       style: [styles10.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__ */ jsx15(
+        return /* @__PURE__ */ jsx16(
           Pressable4,
           {
             role: "tab",
@@ -1079,7 +1276,7 @@ function Segmented({ options, value, onValueChange, size = "md", "aria-label": l
               selected ? { backgroundColor: theme.surface0, borderColor: theme.borderDefault } : null,
               option.disabled ? styles10.disabled : null
             ],
-            children: /* @__PURE__ */ jsx15(Text6, { numberOfLines: 1, style: [styles10.label, { color: selected ? theme.textPrimary : theme.textSecondary, fontSize: size === "sm" ? 12 : 13 }], children: option.label })
+            children: /* @__PURE__ */ jsx16(Text6, { numberOfLines: 1, style: [styles10.label, { color: selected ? theme.textPrimary : theme.textSecondary, fontSize: size === "sm" ? 12 : 13 }], children: option.label })
           },
           option.value
         );
@@ -1095,9 +1292,9 @@ var styles10 = StyleSheet10.create({
 });
 
 // src/native/skeleton.tsx
-import * as React9 from "react";
-import { Animated as Animated6 } from "react-native";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import * as React10 from "react";
+import { Animated as Animated7 } from "react-native";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var SHAPE = {
   text: { width: "100%", height: 12, radius: 4 },
   circle: { width: 40, height: 40, radius: 9999 },
@@ -1106,13 +1303,13 @@ var SHAPE = {
 function Skeleton({ shape = "text", width, height, style, testID }) {
   const { theme } = useTheme();
   const reduce = useReducedMotion();
-  const [opacity] = React9.useState(() => new Animated6.Value(1));
-  React9.useEffect(() => {
+  const [opacity] = React10.useState(() => new Animated7.Value(1));
+  React10.useEffect(() => {
     if (reduce) return;
-    const loop = Animated6.loop(
-      Animated6.sequence([
-        Animated6.timing(opacity, { toValue: 0.5, duration: 900, useNativeDriver: true }),
-        Animated6.timing(opacity, { toValue: 1, duration: 900, useNativeDriver: true })
+    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 })
       ])
     );
     loop.start();
@@ -1123,8 +1320,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__ */ jsx16(
-    Animated6.View,
+  return /* @__PURE__ */ jsx17(
+    Animated7.View,
     {
       testID,
       "aria-hidden": true,
@@ -1138,10 +1335,10 @@ function Skeleton({ shape = "text", width, height, style, testID }) {
 
 // src/native/spinner.tsx
 import { ActivityIndicator as ActivityIndicator2 } from "react-native";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function Spinner({ label, size = "md", ...props }) {
   const { theme } = useTheme();
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     ActivityIndicator2,
     {
       accessible: true,
@@ -1156,9 +1353,9 @@ function Spinner({ label, size = "md", ...props }) {
 }
 
 // src/native/toast.tsx
-import * as React10 from "react";
-import { AccessibilityInfo as AccessibilityInfo4, Animated as Animated7, Pressable as Pressable5, StyleSheet as StyleSheet11, Text as Text7, View as View11 } from "react-native";
-import { Fragment as Fragment3, jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+import * as React11 from "react";
+import { AccessibilityInfo as AccessibilityInfo5, Animated as Animated8, Pressable as Pressable5, StyleSheet as StyleSheet11, Text as Text7, View as View12 } from "react-native";
+import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
 var items = [];
 var listeners2 = /* @__PURE__ */ new Set();
 var counter = 0;
@@ -1193,30 +1390,30 @@ var toast = Object.assign(show, {
 function ToastView({ item, closeLabel, duration }) {
   const { theme, radius: radius3 } = useTheme();
   const reduce = useReducedMotion();
-  const [enter] = React10.useState(() => new Animated7.Value(reduce ? 1 : 0));
-  React10.useEffect(() => {
+  const [enter] = React11.useState(() => new Animated8.Value(reduce ? 1 : 0));
+  React11.useEffect(() => {
     if (reduce) enter.setValue(1);
-    else Animated7.timing(enter, { toValue: 1, duration: 220, useNativeDriver: true }).start();
+    else Animated8.timing(enter, { toValue: 1, duration: 220, useNativeDriver: true }).start();
   }, [enter, reduce]);
-  React10.useEffect(() => {
-    AccessibilityInfo4.announceForAccessibility(item.description ? `${item.title}. ${item.description}` : item.title);
+  React11.useEffect(() => {
+    AccessibilityInfo5.announceForAccessibility(item.description ? `${item.title}. ${item.description}` : item.title);
   }, [item.title, item.description]);
   const ms = item.duration ?? duration;
-  React10.useEffect(() => {
+  React11.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__ */ jsxs11(Fragment3, { children: [
-    item.icon ? /* @__PURE__ */ jsx18(View11, { "aria-hidden": true, children: item.icon }) : null,
-    /* @__PURE__ */ jsxs11(View11, { style: styles11.content, children: [
-      /* @__PURE__ */ jsx18(Txt, { variant: "label", numberOfLines: 2, children: item.title }),
-      item.description ? /* @__PURE__ */ jsx18(Txt, { variant: "caption", tone: "secondary", numberOfLines: 3, children: item.description }) : null
+  const text = /* @__PURE__ */ jsxs12(Fragment3, { children: [
+    item.icon ? /* @__PURE__ */ jsx19(View12, { "aria-hidden": true, children: item.icon }) : null,
+    /* @__PURE__ */ jsxs12(View12, { style: styles11.content, children: [
+      /* @__PURE__ */ jsx19(Txt, { variant: "label", numberOfLines: 2, children: item.title }),
+      item.description ? /* @__PURE__ */ jsx19(Txt, { variant: "caption", tone: "secondary", numberOfLines: 3, children: item.description }) : null
     ] })
   ] });
-  const body = /* @__PURE__ */ jsxs11(Fragment3, { children: [
-    item.onPress ? /* @__PURE__ */ jsx18(
+  const body = /* @__PURE__ */ jsxs12(Fragment3, { children: [
+    item.onPress ? /* @__PURE__ */ jsx19(
       Pressable5,
       {
         role: "button",
@@ -1227,8 +1424,8 @@ function ToastView({ item, closeLabel, duration }) {
         style: ({ pressed }) => [styles11.main, { opacity: pressed ? 0.8 : 1 }],
         children: text
       }
-    ) : /* @__PURE__ */ jsx18(View11, { style: styles11.main, children: text }),
-    item.action ? /* @__PURE__ */ jsx18(
+    ) : /* @__PURE__ */ jsx19(View12, { style: styles11.main, children: text }),
+    item.action ? /* @__PURE__ */ jsx19(
       Pressable5,
       {
         role: "button",
@@ -1237,23 +1434,23 @@ function ToastView({ item, closeLabel, duration }) {
           dismiss(item.id);
         },
         style: [styles11.action, { backgroundColor: theme.accent, borderRadius: radius3.sm }],
-        children: /* @__PURE__ */ jsx18(Text7, { style: [styles11.actionLabel, { color: theme.onAccent }], children: item.action.label })
+        children: /* @__PURE__ */ jsx19(Text7, { style: [styles11.actionLabel, { color: theme.onAccent }], children: item.action.label })
       }
     ) : null,
-    /* @__PURE__ */ jsx18(Pressable5, { role: "button", "aria-label": closeLabel, hitSlop: 10, onPress: () => dismiss(item.id), style: styles11.close, children: /* @__PURE__ */ jsx18(Text7, { style: [styles11.cross, { color: theme.textSecondary }], children: "\xD7" }) })
+    /* @__PURE__ */ jsx19(Pressable5, { role: "button", "aria-label": closeLabel, hitSlop: 10, onPress: () => dismiss(item.id), style: styles11.close, children: /* @__PURE__ */ jsx19(Text7, { style: [styles11.cross, { color: theme.textSecondary }], children: "\xD7" }) })
   ] });
   const frame = [
     styles11.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__ */ jsx18(Animated7.View, { "aria-live": "polite", style: motion3, children: /* @__PURE__ */ jsx18(View11, { style: frame, children: body }) });
+  return /* @__PURE__ */ jsx19(Animated8.View, { "aria-live": "polite", style: motion3, children: /* @__PURE__ */ jsx19(View12, { style: frame, children: body }) });
 }
 function Toaster({ closeLabel, position = "top", offset = 12, duration = 6e3, max = 3 }) {
-  const all = React10.useSyncExternalStore(subscribe2, snapshot, snapshot);
+  const all = React11.useSyncExternalStore(subscribe2, snapshot, snapshot);
   const shown = all.slice(-max);
   if (shown.length === 0) return null;
-  return /* @__PURE__ */ jsx18(View11, { pointerEvents: "box-none", style: [styles11.stack, position === "top" ? { top: offset } : { bottom: offset }], children: (position === "top" ? shown : [...shown].reverse()).map((item) => /* @__PURE__ */ jsx18(ToastView, { item, closeLabel, duration }, item.id)) });
+  return /* @__PURE__ */ jsx19(View12, { pointerEvents: "box-none", style: [styles11.stack, position === "top" ? { top: offset } : { bottom: offset }], children: (position === "top" ? shown : [...shown].reverse()).map((item) => /* @__PURE__ */ jsx19(ToastView, { item, closeLabel, duration }, item.id)) });
 }
 var styles11 = StyleSheet11.create({
   stack: { position: "absolute", left: 12, right: 12, gap: 8, zIndex: 100 },
@@ -1296,6 +1493,7 @@ export {
   EmptyState,
   IconButton,
   KrizakaMark,
+  Mascot,
   OrazakaMark,
   OrochiaMark,
   ProductMark,