@krizaka/ui 3.1.0 → 3.3.0

package/dist/native.js

@@ -55,6 +55,101 @@ function isRealDate(value) {
 function latestBirthDate(age, today = /* @__PURE__ */ new Date()) {
   return new Date(Date.UTC(today.getFullYear() - age, today.getMonth(), today.getDate())).toISOString().slice(0, 10);
 }
+function daysInMonth(year, month) {
+  return new Date(Date.UTC(year, month, 0)).getUTCDate();
+}
+function isoParts(iso) {
+  const [year = 0, month = 0, day = 0] = iso.split("-").map(Number);
+  return { year, month, day };
+}
+function isoOf(year, month, day) {
+  const d = Math.min(Math.max(day, 1), daysInMonth(year, month));
+  return `${String(year).padStart(4, "0")}-${String(month).padStart(2, "0")}-${String(d).padStart(2, "0")}`;
+}
+function todayIso(now = /* @__PURE__ */ new Date()) {
+  return isoOf(now.getFullYear(), now.getMonth() + 1, now.getDate());
+}
+function ageOn(birth, today = todayIso()) {
+  const b = isoParts(birth);
+  const t = isoParts(today);
+  return t.year - b.year - (t.month < b.month || t.month === b.month && t.day < b.day ? 1 : 0);
+}
+function monthNames(locale, style = "long") {
+  const format = new Intl.DateTimeFormat(locale, { month: style, timeZone: "UTC" });
+  return Array.from({ length: 12 }, (_, i) => format.format(new Date(Date.UTC(2001, i, 1))));
+}
+function yearRange(from, to) {
+  const step = from <= to ? 1 : -1;
+  return Array.from({ length: Math.abs(to - from) + 1 }, (_, i) => from + i * step);
+}
+function timeToMinutes(value) {
+  const m = /^(\d{1,2}):(\d{1,2})$/.exec(value ?? "");
+  if (!m) return null;
+  const h = Number(m[1]);
+  const min = Number(m[2]);
+  return h < 24 && min < 60 ? h * 60 + min : null;
+}
+function minutesToTime(minutes) {
+  const m = (Math.round(minutes) % 1440 + 1440) % 1440;
+  return `${String(Math.floor(m / 60)).padStart(2, "0")}:${String(m % 60).padStart(2, "0")}`;
+}
+function timeSlots(start, end, step = 30) {
+  const a = timeToMinutes(start);
+  const b = timeToMinutes(end);
+  if (a === null || b === null || step <= 0) return [];
+  const slots = [];
+  for (let m = a; m < b; m += step) slots.push(minutesToTime(m));
+  return slots;
+}
+function uses12Hours(locale) {
+  try {
+    const options = new Intl.DateTimeFormat(locale, { hour: "numeric" }).resolvedOptions();
+    return options.hourCycle ? options.hourCycle === "h12" || options.hourCycle === "h11" : Boolean(options.hour12);
+  } catch {
+    return false;
+  }
+}
+function dayPeriods(locale) {
+  const format = new Intl.DateTimeFormat(locale, { hour: "numeric", hour12: true, timeZone: "UTC" });
+  const period = (h) => format.formatToParts(new Date(Date.UTC(2001, 0, 1, h))).find((p) => p.type === "dayPeriod")?.value ?? (h < 12 ? "AM" : "PM");
+  return [period(9), period(15)];
+}
+function formatTime(locale, value) {
+  const minutes = timeToMinutes(value);
+  if (minutes === null) return "";
+  return new Intl.DateTimeFormat(locale, { hour: "numeric", minute: "2-digit", timeZone: "UTC" }).format(new Date(Date.UTC(2001, 0, 1, 0, minutes)));
+}
+var toLocalDate = (iso) => {
+  const { year, month, day } = isoParts(iso);
+  return new Date(year, month - 1, day);
+};
+var toIsoDate = (date) => `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+var addDays = (iso, days) => {
+  const date = toLocalDate(iso);
+  date.setDate(date.getDate() + days);
+  return toIsoDate(date);
+};
+var addMonths = (iso, months) => {
+  const { year, month, day } = isoParts(iso);
+  const first = new Date(year, month - 1 + months, 1);
+  return isoOf(first.getFullYear(), first.getMonth() + 1, day);
+};
+function weekStartOf(locale) {
+  try {
+    const info = new Intl.Locale(locale);
+    const firstDay = info.getWeekInfo?.().firstDay ?? info.weekInfo?.firstDay;
+    return firstDay ? firstDay % 7 : 1;
+  } catch {
+    return 1;
+  }
+}
+function monthGrid(month, weekStartsOn) {
+  const first = `${month.slice(0, 7)}-01`;
+  const lead = (toLocalDate(first).getDay() - weekStartsOn + 7) % 7;
+  const start = addDays(first, -lead);
+  const days = Array.from({ length: 42 }, (_, i) => addDays(start, i));
+  return Array.from({ length: 6 }, (_, w) => days.slice(w * 7, w * 7 + 7)).filter((week, w) => w < 5 || week[0].slice(0, 7) === first.slice(0, 7));
+}
 
 // src/native/avatar.tsx
 import * as React2 from "react";
@@ -227,11 +322,12 @@ var radius2 = radius;
 var motion2 = motion;
 var stillMotion = { ...motion2, duration: { instant: 0, fast: 0, base: 0 } };
 var ThemeContext = React.createContext(null);
+var noop = () => void 0;
 function resolve(mode, system) {
   if (mode === "system") return system === "light" ? "light" : "dark";
   return mode;
 }
-function ThemeProvider({ children, mode: controlled, defaultMode = "system", onModeChange, overrides, fonts }) {
+function ThemeProvider({ children, mode: controlled, defaultMode = "system", onModeChange, overrides, fonts, haptics }) {
   const system = useColorScheme();
   const [own, setOwn] = React.useState(defaultMode);
   const mode = controlled ?? own;
@@ -247,18 +343,17 @@ function ThemeProvider({ children, mode: controlled, defaultMode = "system", onM
   const reduce = useReducedMotion();
   const theme = React.useMemo(() => override ? { ...themes2[scheme], ...override } : themes2[scheme], [scheme, override]);
   const value = React.useMemo(
-    () => ({ mode, setMode, scheme, theme, radius: radius2, motion: reduce ? stillMotion : motion2, fonts: fonts ?? {} }),
-    [mode, setMode, scheme, theme, fonts, reduce]
+    () => ({ mode, setMode, scheme, theme, radius: radius2, motion: reduce ? stillMotion : motion2, fonts: fonts ?? {}, haptic: haptics ?? noop }),
+    [mode, setMode, scheme, theme, fonts, reduce, haptics]
   );
   return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
 }
-var noop = () => void 0;
 function useTheme() {
   const context = React.useContext(ThemeContext);
   const system = useColorScheme();
   if (context) return context;
   const scheme = resolve("system", system);
-  return { mode: "system", setMode: noop, scheme, theme: themes2[scheme], radius: radius2, motion: motion2, fonts: {} };
+  return { mode: "system", setMode: noop, scheme, theme: themes2[scheme], radius: radius2, motion: motion2, fonts: {}, haptic: noop };
 }
 function useReducedMotion() {
   const [reduce, setReduce] = React.useState(false);
@@ -744,10 +839,239 @@ var styles7 = StyleSheet7.create({
   wrap: { flexWrap: "wrap" }
 });
 
-// src/native/countdown.tsx
+// src/native/combobox.tsx
+import * as React8 from "react";
+import { Pressable as Pressable6, ScrollView as ScrollView2, StyleSheet as StyleSheet9, Text as Text7, TextInput, View as View7 } from "react-native";
+import Svg3, { Path as Path2 } from "react-native-svg";
+
+// src/native/dialog.tsx
 import * as React7 from "react";
-import { Animated as Animated2, StyleSheet as StyleSheet8, Text as Text6 } from "react-native";
+import { Animated as Animated2, Modal, Pressable as Pressable5, StyleSheet as StyleSheet8, Text as Text6, View as View6 } from "react-native";
 import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+function Sheet({ open, onOpenChange, title, closeLabel = "Close", children, style }) {
+  const { theme, radius: radius3, motion: motion3 } = useTheme();
+  const [rise] = React7.useState(() => new Animated2.Value(0));
+  React7.useEffect(() => {
+    if (open) Animated2.timing(rise, { toValue: 1, duration: motion3.duration.base * 1.6, useNativeDriver: true }).start();
+    else rise.setValue(0);
+  }, [open, rise, motion3.duration.base]);
+  return /* @__PURE__ */ jsx9(Modal, { transparent: true, visible: open, animationType: "none", onRequestClose: () => onOpenChange(false), statusBarTranslucent: true, children: /* @__PURE__ */ jsxs6(View6, { style: styles8.backdrop, children: [
+    /* @__PURE__ */ jsx9(Animated2.View, { style: [StyleSheet8.absoluteFill, { opacity: rise }], children: /* @__PURE__ */ jsx9(Pressable5, { role: "button", "aria-label": closeLabel, onPress: () => onOpenChange(false), style: [StyleSheet8.absoluteFill, { backgroundColor: theme.scrim }] }) }),
+    /* @__PURE__ */ jsxs6(
+      Animated2.View,
+      {
+        role: "dialog",
+        "aria-label": title,
+        style: [
+          styles8.sheet,
+          {
+            backgroundColor: theme.surface1,
+            borderColor: theme.borderDefault,
+            borderTopLeftRadius: radius3["2xl"],
+            borderTopRightRadius: radius3["2xl"],
+            shadowColor: theme.scrimStrong,
+            transform: [{ translateY: rise.interpolate({ inputRange: [0, 1], outputRange: [48, 0] }) }],
+            opacity: rise.interpolate({ inputRange: [0, 1], outputRange: [0.6, 1] })
+          },
+          style
+        ],
+        children: [
+          /* @__PURE__ */ jsx9(View6, { "aria-hidden": true, style: [styles8.grip, { backgroundColor: theme.borderStrong }] }),
+          title ? /* @__PURE__ */ jsx9(Text6, { role: "heading", style: [styles8.title, { color: theme.textPrimary }], children: title }) : null,
+          children
+        ]
+      }
+    )
+  ] }) });
+}
+var styles8 = StyleSheet8.create({
+  backdrop: { flex: 1, justifyContent: "flex-end" },
+  sheet: { maxHeight: "85%", paddingHorizontal: 16, paddingTop: 8, paddingBottom: 28, gap: 12, borderWidth: StyleSheet8.hairlineWidth, shadowOpacity: 0.3, shadowRadius: 16, shadowOffset: { width: 0, height: -4 }, elevation: 12 },
+  grip: { alignSelf: "center", width: 40, height: 5, borderRadius: 3, marginBottom: 4 },
+  title: { fontSize: 17, fontWeight: "700" }
+});
+
+// src/native/combobox.tsx
+import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+function Chevron({ color }) {
+  return /* @__PURE__ */ jsx10(Svg3, { 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__ */ jsx10(Path2, { d: "m6 9 6 6 6-6" }) });
+}
+function Tick({ color }) {
+  return /* @__PURE__ */ jsx10(Svg3, { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 2.6, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx10(Path2, { d: "M20 6 9 17l-5-5" }) });
+}
+function Trigger({ shared, text, onPress, open }) {
+  const { theme, radius: radius3 } = useTheme();
+  const { label, placeholder, hint, error, disabled } = shared;
+  const caption = error ?? hint;
+  return /* @__PURE__ */ jsxs7(View7, { style: [styles9.field, shared.style], children: [
+    /* @__PURE__ */ jsx10(Text7, { style: [styles9.label, { color: theme.textSecondary }], children: label }),
+    /* @__PURE__ */ jsxs7(
+      Pressable6,
+      {
+        role: "button",
+        "aria-label": `${label}, ${text ?? placeholder ?? ""}`.replace(/, $/, ""),
+        "aria-expanded": open,
+        "aria-haspopup": "listbox",
+        "aria-disabled": disabled || void 0,
+        accessibilityHint: caption,
+        disabled,
+        onPress,
+        style: [styles9.trigger, { borderRadius: radius3.md, backgroundColor: theme.surface2, borderColor: error ? theme.danger : open ? theme.accent : theme.borderDefault }, disabled ? styles9.disabled : null],
+        children: [
+          /* @__PURE__ */ jsx10(Text7, { numberOfLines: 1, style: [styles9.triggerText, { color: text ? theme.textPrimary : theme.textSecondary }], children: text ?? placeholder ?? "" }),
+          /* @__PURE__ */ jsx10(Chevron, { color: theme.textSecondary })
+        ]
+      }
+    ),
+    caption ? /* @__PURE__ */ jsx10(Text7, { role: error ? "alert" : void 0, "aria-live": error ? "polite" : void 0, style: [styles9.caption, { color: error ? theme.dangerText : theme.textSecondary }], children: caption }) : null
+  ] });
+}
+function Options({ options, isChosen, onPick, multiple }) {
+  const { theme, radius: radius3, haptic } = useTheme();
+  return /* @__PURE__ */ jsx10(ScrollView2, { role: multiple ? "list" : "radiogroup", keyboardShouldPersistTaps: "handled", style: styles9.options, children: options.map((o) => {
+    const chosen = isChosen(o.value);
+    return /* @__PURE__ */ jsxs7(
+      Pressable6,
+      {
+        role: multiple ? "checkbox" : "radio",
+        "aria-checked": chosen,
+        "aria-label": o.description ? `${o.label}, ${o.description}` : o.label,
+        "aria-disabled": o.disabled || void 0,
+        disabled: o.disabled,
+        onPress: () => {
+          haptic("selection");
+          onPick(o);
+        },
+        style: ({ pressed }) => [styles9.option, { borderRadius: radius3.md, backgroundColor: chosen ? theme.accentSoft : pressed ? theme.surface3 : "transparent" }, o.disabled ? styles9.disabled : null],
+        children: [
+          /* @__PURE__ */ jsxs7(View7, { style: styles9.optionText, children: [
+            /* @__PURE__ */ jsx10(Text7, { style: [styles9.optionLabel, { color: theme.textPrimary, fontWeight: chosen ? "700" : "500" }], children: o.label }),
+            o.description ? /* @__PURE__ */ jsx10(Text7, { style: [styles9.caption, { color: theme.textSecondary }], children: o.description }) : null
+          ] }),
+          chosen ? /* @__PURE__ */ jsx10(Tick, { color: theme.accentText }) : null
+        ]
+      },
+      o.value
+    );
+  }) });
+}
+function Select({ options, value: valueProp, defaultValue = null, onValueChange, sheetTitle, ...shared }) {
+  const [own, setOwn] = React8.useState(defaultValue);
+  const value = valueProp !== void 0 ? valueProp : own;
+  const [open, setOpen] = React8.useState(false);
+  const close = () => {
+    setOpen(false);
+    shared.onBlur?.();
+  };
+  return /* @__PURE__ */ jsxs7(Fragment2, { children: [
+    /* @__PURE__ */ jsx10(Trigger, { shared, text: options.find((o) => o.value === value)?.label ?? null, open, onPress: () => setOpen(true) }),
+    /* @__PURE__ */ jsx10(Sheet, { open, onOpenChange: (o) => o ? setOpen(true) : close(), title: sheetTitle ?? shared.label, children: /* @__PURE__ */ jsx10(
+      Options,
+      {
+        options,
+        isChosen: (v) => v === value,
+        onPick: (o) => {
+          if (valueProp === void 0) setOwn(o.value);
+          onValueChange?.(o.value);
+          close();
+        }
+      }
+    ) })
+  ] });
+}
+var comboboxLabels = { search: "Search", loading: "Searching\u2026", empty: "No results", done: "Done" };
+function Combobox({ options = [], onSearch, multiple, value, onValueChange, labels: given, ...shared }) {
+  const labels = { ...comboboxLabels, ...given };
+  const { theme, radius: radius3 } = useTheme();
+  const [open, setOpen] = React8.useState(false);
+  const [query, setQuery] = React8.useState("");
+  const [found, setFound] = React8.useState(null);
+  const [loading, setLoading] = React8.useState(false);
+  const [seen, setSeen] = React8.useState({});
+  const chosen = value == null ? [] : typeof value === "string" ? value ? [value] : [] : [...value];
+  React8.useEffect(() => {
+    if (!onSearch || !open) return;
+    const controller = new AbortController();
+    const timer2 = setTimeout(() => {
+      setLoading(true);
+      onSearch(query, controller.signal).then((result) => {
+        if (!controller.signal.aborted) setFound(result);
+      }).catch(() => void 0).finally(() => {
+        if (!controller.signal.aborted) setLoading(false);
+      });
+    }, 250);
+    return () => {
+      clearTimeout(timer2);
+      controller.abort();
+    };
+  }, [query, onSearch, open]);
+  const q = query.trim().toLowerCase();
+  const list = onSearch ? found ?? [] : options.filter((o) => !q || o.label.toLowerCase().includes(q));
+  const labelOf = (v) => options.find((o) => o.value === v)?.label ?? seen[v]?.label ?? v;
+  const close = () => {
+    setOpen(false);
+    setQuery("");
+    shared.onBlur?.();
+  };
+  return /* @__PURE__ */ jsxs7(Fragment2, { children: [
+    /* @__PURE__ */ jsx10(Trigger, { shared, text: chosen.length ? chosen.map(labelOf).join(", ") : null, open, onPress: () => setOpen(true) }),
+    /* @__PURE__ */ jsxs7(Sheet, { open, onOpenChange: (o) => o ? setOpen(true) : close(), title: shared.label, children: [
+      /* @__PURE__ */ jsx10(
+        TextInput,
+        {
+          "aria-label": labels.search,
+          placeholder: labels.search,
+          placeholderTextColor: theme.textMuted,
+          value: query,
+          onChangeText: setQuery,
+          autoFocus: true,
+          autoCorrect: false,
+          returnKeyType: "search",
+          style: [styles9.search, { borderRadius: radius3.md, backgroundColor: theme.surface2, borderColor: theme.borderDefault, color: theme.textPrimary }]
+        }
+      ),
+      loading ? /* @__PURE__ */ jsx10(Text7, { style: [styles9.caption, { color: theme.textSecondary }], children: labels.loading }) : null,
+      !loading && list.length === 0 ? /* @__PURE__ */ jsx10(Text7, { style: [styles9.caption, { color: theme.textSecondary }], children: labels.empty }) : null,
+      /* @__PURE__ */ jsx10(
+        Options,
+        {
+          options: list,
+          multiple,
+          isChosen: (v) => chosen.includes(v),
+          onPick: (o) => {
+            setSeen((known) => ({ ...known, [o.value]: o }));
+            if (multiple) onValueChange?.(chosen.includes(o.value) ? chosen.filter((v) => v !== o.value) : [...chosen, o.value]);
+            else {
+              onValueChange?.(o.value);
+              close();
+            }
+          }
+        }
+      ),
+      multiple ? /* @__PURE__ */ jsx10(Pressable6, { role: "button", onPress: close, style: [styles9.done, { borderRadius: radius3.md, backgroundColor: theme.accent }], children: /* @__PURE__ */ jsx10(Text7, { style: [styles9.doneText, { color: theme.onAccent }], children: labels.done }) }) : null
+    ] })
+  ] });
+}
+var styles9 = StyleSheet9.create({
+  field: { gap: 6, alignSelf: "stretch" },
+  label: { fontSize: 12, lineHeight: 16, fontWeight: "600" },
+  trigger: { minHeight: 48, flexDirection: "row", alignItems: "center", gap: 8, paddingHorizontal: 14, borderWidth: 1 },
+  triggerText: { flex: 1, fontSize: 16 },
+  caption: { fontSize: 12, lineHeight: 16 },
+  options: { flexGrow: 0 },
+  option: { minHeight: 48, flexDirection: "row", alignItems: "center", gap: 12, paddingHorizontal: 12, paddingVertical: 8 },
+  optionText: { flex: 1, gap: 2 },
+  optionLabel: { fontSize: 16 },
+  search: { height: 44, paddingHorizontal: 12, borderWidth: 1, fontSize: 16 },
+  done: { height: 48, alignItems: "center", justifyContent: "center" },
+  doneText: { fontSize: 15, fontWeight: "700" },
+  disabled: { opacity: 0.4 }
+});
+
+// src/native/countdown.tsx
+import * as React9 from "react";
+import { Animated as Animated3, StyleSheet as StyleSheet10, Text as Text8 } from "react-native";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 var FONT = { sm: 14, md: 20, lg: 32 };
 function Countdown({ target, skewMs = 0, units, urgentBelowMs = 6e4, size = "md", label, showLabel = false, style }) {
   const { theme, fonts } = useTheme();
@@ -755,13 +1079,13 @@ function Countdown({ target, skewMs = 0, units, urgentBelowMs = 6e4, size = "md"
   const ms = useCountdown(target, skewMs);
   const urgent = ms > 0 && ms < urgentBelowMs;
   const parts = countdownParts(ms, units);
-  const [opacity] = React7.useState(() => new Animated2.Value(1));
-  React7.useEffect(() => {
+  const [opacity] = React9.useState(() => new Animated3.Value(1));
+  React9.useEffect(() => {
     if (!urgent || reduce) return;
-    const loop = Animated2.loop(
-      Animated2.sequence([
-        Animated2.timing(opacity, { toValue: 0.4, duration: 500, useNativeDriver: true }),
-        Animated2.timing(opacity, { toValue: 1, duration: 500, useNativeDriver: true })
+    const loop = Animated3.loop(
+      Animated3.sequence([
+        Animated3.timing(opacity, { toValue: 0.4, duration: 500, useNativeDriver: true }),
+        Animated3.timing(opacity, { toValue: 1, duration: 500, useNativeDriver: true })
       ])
     );
     loop.start();
@@ -772,24 +1096,24 @@ function Countdown({ target, skewMs = 0, units, urgentBelowMs = 6e4, size = "md"
   }, [urgent, reduce, opacity]);
   const color = urgent ? theme.dangerText : theme.textPrimary;
   const text = parts.map(([value, unit]) => `${String(value).padStart(2, "0")}${unit}`).join(" ");
-  return /* @__PURE__ */ jsxs6(
-    Animated2.View,
+  return /* @__PURE__ */ jsxs8(
+    Animated3.View,
     {
       accessible: true,
       role: "timer",
       "aria-label": `${label} ${text}`,
-      style: [styles8.root, style],
+      style: [styles10.root, style],
       children: [
-        showLabel ? /* @__PURE__ */ jsx9(Text6, { style: [styles8.label, { color: theme.textSecondary, fontSize: Math.max(11, Math.round(FONT[size] * 0.6)) }], children: label }) : null,
-        parts.map(([value, unit], i) => /* @__PURE__ */ jsxs6(Animated2.View, { style: [styles8.segment, urgent && i === parts.length - 1 ? { opacity } : null], children: [
-          /* @__PURE__ */ jsx9(Text6, { style: [styles8.value, { color, fontSize: FONT[size] }, fonts.display ? { fontFamily: fonts.display } : null], children: String(value).padStart(2, "0") }),
-          /* @__PURE__ */ jsx9(Text6, { style: [styles8.unit, { color: theme.textSecondary, fontSize: Math.round(FONT[size] / 2) }], children: unit })
+        showLabel ? /* @__PURE__ */ jsx11(Text8, { style: [styles10.label, { color: theme.textSecondary, fontSize: Math.max(11, Math.round(FONT[size] * 0.6)) }], children: label }) : null,
+        parts.map(([value, unit], i) => /* @__PURE__ */ jsxs8(Animated3.View, { style: [styles10.segment, urgent && i === parts.length - 1 ? { opacity } : null], children: [
+          /* @__PURE__ */ jsx11(Text8, { style: [styles10.value, { color, fontSize: FONT[size] }, fonts.display ? { fontFamily: fonts.display } : null], children: String(value).padStart(2, "0") }),
+          /* @__PURE__ */ jsx11(Text8, { style: [styles10.unit, { color: theme.textSecondary, fontSize: Math.round(FONT[size] / 2) }], children: unit })
         ] }, unit))
       ]
     }
   );
 }
-var styles8 = StyleSheet8.create({
+var styles10 = StyleSheet10.create({
   root: { flexDirection: "row", alignItems: "baseline", gap: 6 },
   segment: { flexDirection: "row", alignItems: "baseline" },
   value: { fontWeight: "900", fontVariant: ["tabular-nums"], letterSpacing: -0.3 },
@@ -798,18 +1122,18 @@ var styles8 = StyleSheet8.create({
 });
 
 // src/native/date-picker.tsx
-import * as React8 from "react";
-import { Platform, StyleSheet as StyleSheet9, Text as Text7, TextInput, View as View6 } from "react-native";
-import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import * as React10 from "react";
+import { Platform, StyleSheet as StyleSheet11, Text as Text9, TextInput as TextInput2, View as View8 } from "react-native";
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 var LENGTH = DATE_PART_LENGTH;
 var dateFieldLabels = { day: "Day", month: "Month", year: "Year" };
 function DateField({ label, hint, error, value, defaultValue, onValueChange, onBlur, locale = "en-US", labels: given, autoComplete, disabled, inputRef, onSubmitEditing, returnKeyType = "done", style }) {
   const { theme, radius: radius3 } = useTheme();
   const labels = { ...dateFieldLabels, ...given };
-  const order = React8.useMemo(() => datePartsOrder(locale), [locale]);
-  const [parts, setParts] = React8.useState(() => splitDate(value ?? defaultValue));
-  const [focused, setFocused] = React8.useState(null);
-  const refs = { day: React8.useRef(null), month: React8.useRef(null), year: React8.useRef(null) };
+  const order = React10.useMemo(() => datePartsOrder(locale), [locale]);
+  const [parts, setParts] = React10.useState(() => splitDate(value ?? defaultValue));
+  const [focused, setFocused] = React10.useState(null);
+  const refs = { day: React10.useRef(null), month: React10.useRef(null), year: React10.useRef(null) };
   if (value !== void 0 && value !== composeDate(parts) && composeDate(splitDate(value)) === value) setParts(splitDate(value));
   const caption = error ?? hint;
   const change = (part, text) => {
@@ -820,12 +1144,12 @@ function DateField({ label, hint, error, value, defaultValue, onValueChange, onB
     const following = order[order.indexOf(part) + 1];
     if (digits.length === LENGTH[part] && following) refs[following].current?.focus();
   };
-  return /* @__PURE__ */ jsxs7(View6, { role: "group", "aria-label": label, style: [styles9.root, disabled ? styles9.disabled : null, style], children: [
-    /* @__PURE__ */ jsx10(Text7, { style: [styles9.label, { color: theme.textSecondary }], children: label }),
-    /* @__PURE__ */ jsx10(View6, { style: styles9.row, children: order.map((part, i) => /* @__PURE__ */ jsxs7(View6, { style: part === "year" ? styles9.yearBox : styles9.box, children: [
-      /* @__PURE__ */ jsx10(Text7, { style: [styles9.part, { color: theme.textSecondary }], children: labels[part] }),
-      /* @__PURE__ */ jsx10(
-        TextInput,
+  return /* @__PURE__ */ jsxs9(View8, { role: "group", "aria-label": label, style: [styles11.root, disabled ? styles11.disabled : null, style], children: [
+    /* @__PURE__ */ jsx12(Text9, { style: [styles11.label, { color: theme.textSecondary }], children: label }),
+    /* @__PURE__ */ jsx12(View8, { style: styles11.row, children: order.map((part, i) => /* @__PURE__ */ jsxs9(View8, { style: part === "year" ? styles11.yearBox : styles11.box, children: [
+      /* @__PURE__ */ jsx12(Text9, { style: [styles11.part, { color: theme.textSecondary }], children: labels[part] }),
+      /* @__PURE__ */ jsx12(
+        TextInput2,
         {
           ref: (node) => {
             refs[part].current = node;
@@ -856,16 +1180,16 @@ function DateField({ label, hint, error, value, defaultValue, onValueChange, onB
             if (i === order.length - 1) onBlur?.();
           },
           style: [
-            styles9.input,
+            styles11.input,
             { color: theme.textPrimary, backgroundColor: theme.surface2, borderRadius: radius3.md, borderColor: error ? theme.danger : focused === part ? theme.accent : theme.borderDefault }
           ]
         }
       )
     ] }, part)) }),
-    caption ? /* @__PURE__ */ jsx10(Text7, { role: error ? "alert" : void 0, "aria-live": error ? "polite" : void 0, style: [styles9.caption, { color: error ? theme.dangerText : theme.textSecondary }], children: caption }) : null
+    caption ? /* @__PURE__ */ jsx12(Text9, { role: error ? "alert" : void 0, "aria-live": error ? "polite" : void 0, style: [styles11.caption, { color: error ? theme.dangerText : theme.textSecondary }], children: caption }) : null
   ] });
 }
-var styles9 = StyleSheet9.create({
+var styles11 = StyleSheet11.create({
   root: { gap: 6, alignSelf: "stretch" },
   label: { fontSize: 12, lineHeight: 16, fontWeight: "600" },
   row: { flexDirection: "row", gap: 10 },
@@ -877,19 +1201,481 @@ var styles9 = StyleSheet9.create({
   disabled: { opacity: 0.5 }
 });
 
+// src/native/date-time.tsx
+import * as React12 from "react";
+import { Pressable as Pressable8, ScrollView as ScrollView4, StyleSheet as StyleSheet13, Text as Text11, View as View10 } from "react-native";
+import Svg4, { Path as Path3 } from "react-native-svg";
+
+// src/native/wheel.tsx
+import * as React11 from "react";
+import { Pressable as Pressable7, ScrollView as ScrollView3, StyleSheet as StyleSheet12, Text as Text10, View as View9 } from "react-native";
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+var ITEM = 44;
+var FrameContext = React11.createContext({ visible: 5, unset: false });
+function WheelPicker({ label, children, visible = 5, invalid, unset = false, style }) {
+  const { theme, radius: radius3 } = useTheme();
+  return /* @__PURE__ */ jsx13(FrameContext.Provider, { value: React11.useMemo(() => ({ visible, unset }), [visible, unset]), children: /* @__PURE__ */ jsxs10(
+    View9,
+    {
+      role: "group",
+      "aria-label": label,
+      style: [styles12.root, { height: ITEM * visible, borderRadius: radius3.xl, backgroundColor: theme.surface1, borderColor: invalid ? theme.danger : theme.borderDefault }, style],
+      children: [
+        /* @__PURE__ */ jsx13(View9, { pointerEvents: "none", style: [styles12.band, { top: ITEM * (visible - 1) / 2, height: ITEM, borderRadius: radius3.lg, backgroundColor: theme.surface3, borderColor: theme.borderSubtle }] }),
+        children
+      ]
+    }
+  ) });
+}
+function WheelDivider({ children }) {
+  const { theme } = useTheme();
+  return /* @__PURE__ */ jsx13(Text10, { "aria-hidden": true, style: [styles12.divider, { color: theme.textSecondary }], children });
+}
+var nearestEnabled = (options, index) => {
+  for (let d = 0; d < options.length; d++) {
+    if (options[index + d] && !options[index + d].disabled) return index + d;
+    if (options[index - d] && !options[index - d].disabled) return index - d;
+  }
+  return index;
+};
+function Wheel({ label, options, value: valueProp, defaultValue, onValueChange, disabled, style }) {
+  const { theme, haptic } = useTheme();
+  const { visible, unset } = React11.useContext(FrameContext);
+  const [own, setOwn] = React11.useState(defaultValue ?? options[0]?.value ?? "");
+  const value = valueProp ?? own;
+  const index = Math.max(0, options.findIndex((o) => o.value === value));
+  const scroller = React11.useRef(null);
+  const passing = React11.useRef(index);
+  const [shown, setShown] = React11.useState(index);
+  const [seen, setSeen] = React11.useState(index);
+  if (seen !== index) {
+    setSeen(index);
+    setShown(index);
+  }
+  const commit = (i) => {
+    const target = nearestEnabled(options, Math.min(options.length - 1, Math.max(0, i)));
+    const option = options[target];
+    if (!option) return;
+    if (target !== i) scroller.current?.scrollTo({ y: target * ITEM, animated: true });
+    if (valueProp === void 0) setOwn(option.value);
+    if (option.value !== value) onValueChange?.(option.value);
+  };
+  React11.useEffect(() => {
+    passing.current = index;
+    scroller.current?.scrollTo({ y: index * ITEM, animated: false });
+  }, [index]);
+  const onScroll = (e) => {
+    const i = Math.round(e.nativeEvent.contentOffset.y / ITEM);
+    if (i !== passing.current && i >= 0 && i < options.length) {
+      passing.current = i;
+      setShown(i);
+      haptic("selection");
+    }
+  };
+  const settle = (e) => commit(Math.round(e.nativeEvent.contentOffset.y / ITEM));
+  const step = (by) => {
+    let i = index + by;
+    while (options[i]?.disabled) i += by;
+    if (options[i]) commit(i);
+  };
+  const pad = (visible - 1) / 2 * ITEM;
+  return /* @__PURE__ */ jsx13(
+    View9,
+    {
+      accessible: true,
+      role: "spinbutton",
+      "aria-label": label,
+      "aria-valuetext": options[index]?.label,
+      "aria-valuenow": index,
+      "aria-valuemin": 0,
+      "aria-valuemax": Math.max(0, options.length - 1),
+      "aria-disabled": disabled || void 0,
+      accessibilityActions: [{ name: "increment" }, { name: "decrement" }],
+      onAccessibilityAction: (e) => step(e.nativeEvent.actionName === "increment" ? 1 : -1),
+      style: [styles12.column, disabled ? styles12.disabled : null, style],
+      children: /* @__PURE__ */ jsx13(
+        ScrollView3,
+        {
+          ref: scroller,
+          "aria-hidden": true,
+          importantForAccessibility: "no-hide-descendants",
+          scrollEnabled: !disabled,
+          showsVerticalScrollIndicator: false,
+          snapToInterval: ITEM,
+          decelerationRate: "fast",
+          contentOffset: { x: 0, y: index * ITEM },
+          contentContainerStyle: { paddingVertical: pad },
+          scrollEventThrottle: 16,
+          onScroll,
+          onMomentumScrollEnd: settle,
+          onScrollEndDrag: (e) => {
+            if (Math.abs(e.nativeEvent.velocity?.y ?? 0) < 0.05) settle(e);
+          },
+          children: options.map((o, i) => {
+            const distance = Math.abs(i - shown);
+            return /* @__PURE__ */ jsx13(Pressable7, { focusable: false, tabIndex: -1, disabled: disabled || o.disabled, onPress: () => commit(i), style: [styles12.item, { height: ITEM }], children: /* @__PURE__ */ jsx13(
+              Text10,
+              {
+                numberOfLines: 1,
+                style: [
+                  styles12.itemText,
+                  {
+                    color: o.disabled ? theme.textMuted : i === shown && !unset ? theme.textPrimary : theme.textSecondary,
+                    fontWeight: i === shown && !unset ? "600" : "400",
+                    opacity: distance === 0 ? 1 : distance === 1 ? 0.7 : 0.4,
+                    transform: [{ scale: distance === 0 ? 1 : 0.92 }],
+                    textDecorationLine: o.disabled ? "line-through" : "none"
+                  }
+                ],
+                children: o.label
+              }
+            ) }, o.value);
+          })
+        }
+      )
+    }
+  );
+}
+var styles12 = StyleSheet12.create({
+  root: { flexDirection: "row", alignItems: "stretch", borderWidth: StyleSheet12.hairlineWidth, paddingHorizontal: 6, gap: 4, overflow: "hidden", alignSelf: "flex-start" },
+  band: { position: "absolute", left: 6, right: 6, borderWidth: StyleSheet12.hairlineWidth },
+  column: { minWidth: 56, flexGrow: 1 },
+  item: { alignItems: "center", justifyContent: "center", paddingHorizontal: 8 },
+  itemText: { fontSize: 18, fontVariant: ["tabular-nums"] },
+  divider: { alignSelf: "center", fontSize: 18, fontWeight: "600" },
+  disabled: { opacity: 0.4 }
+});
+
+// src/native/date-time.tsx
+import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+var longDate = (locale, iso) => new Intl.DateTimeFormat(locale, { dateStyle: "long" }).format(toLocalDate(iso));
+var useOwn = (value, initial) => {
+  const [own, setOwn] = React12.useState(initial);
+  return [value !== void 0 ? value : own, (next) => value === void 0 && setOwn(next)];
+};
+function Chevron2({ direction, color }) {
+  return /* @__PURE__ */ jsx14(Svg4, { 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(Path3, { d: direction === "left" ? "m15 18-6-6 6-6" : "m9 18 6-6-6-6" }) });
+}
+function NavButton({ label, direction, disabled, onPress }) {
+  const { theme, radius: radius3 } = useTheme();
+  return /* @__PURE__ */ jsx14(
+    Pressable8,
+    {
+      role: "button",
+      "aria-label": label,
+      "aria-disabled": disabled || void 0,
+      disabled,
+      hitSlop: 6,
+      onPress,
+      style: ({ pressed }) => [styles13.nav, { borderRadius: radius3.md, backgroundColor: pressed ? theme.surface3 : theme.surface2, borderColor: theme.borderSubtle }, disabled ? styles13.disabled : null],
+      children: /* @__PURE__ */ jsx14(Chevron2, { direction, color: theme.textSecondary })
+    }
+  );
+}
+function Node({ color, style }) {
+  return /* @__PURE__ */ jsx14(View10, { "aria-hidden": true, style: [styles13.node, { backgroundColor: color }, style] });
+}
+var calendarLabels = { previousMonth: "Previous month", nextMonth: "Next month" };
+function Calendar({ locale, value, range, onSelect, defaultMonth, min, max, isDateDisabled, weekStartsOn, today: todayProp, labels: given, style }) {
+  const labels = { ...calendarLabels, ...given };
+  const { theme, radius: radius3, haptic } = useTheme();
+  const today = todayProp ?? todayIso();
+  const [month, setMonth] = React12.useState(`${(defaultMonth ?? value ?? range?.start ?? today).slice(0, 7)}-01`);
+  const start = weekStartsOn ?? weekStartOf(locale);
+  const weeks = monthGrid(month, start);
+  const weekday = new Intl.DateTimeFormat(locale, { weekday: "narrow" });
+  const title = new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }).format(toLocalDate(month));
+  const [lo, hi] = range?.end ? range.start <= range.end ? [range.start, range.end] : [range.end, range.start] : [null, null];
+  const off = (iso) => Boolean(min && iso < min || max && iso > max || isDateDisabled?.(iso));
+  return /* @__PURE__ */ jsxs11(View10, { style: [styles13.calendar, { backgroundColor: theme.surface1, borderColor: theme.borderDefault, borderRadius: radius3.xl }, style], children: [
+    /* @__PURE__ */ jsxs11(View10, { style: styles13.header, children: [
+      /* @__PURE__ */ jsx14(NavButton, { label: labels.previousMonth, direction: "left", disabled: Boolean(min && addDays(month, -1) < min), onPress: () => setMonth(addMonths(month, -1)) }),
+      /* @__PURE__ */ jsx14(Text11, { role: "heading", "aria-live": "polite", style: [styles13.title, { color: theme.textPrimary }], children: title }),
+      /* @__PURE__ */ jsx14(NavButton, { label: labels.nextMonth, direction: "right", disabled: Boolean(max && addMonths(month, 1) > max), onPress: () => setMonth(addMonths(month, 1)) })
+    ] }),
+    /* @__PURE__ */ jsx14(View10, { style: styles13.week, "aria-hidden": true, children: weeks[0].map((iso) => /* @__PURE__ */ jsx14(Text11, { style: [styles13.weekday, { color: theme.textSecondary }], children: weekday.format(toLocalDate(iso)) }, iso)) }),
+    /* @__PURE__ */ jsx14(View10, { role: "radiogroup", "aria-label": title, children: weeks.map((week) => /* @__PURE__ */ jsx14(View10, { style: styles13.week, children: week.map((iso) => {
+      const outside = iso.slice(0, 7) !== month.slice(0, 7);
+      const selected = iso === value || Boolean(range && (iso === range.start || iso === range.end));
+      const disabled = off(iso);
+      const band = lo && hi && lo !== hi && iso >= lo && iso <= hi;
+      return /* @__PURE__ */ jsx14(
+        View10,
+        {
+          style: [
+            styles13.cell,
+            band ? { backgroundColor: theme.accentSoft } : null,
+            band && iso === lo ? { borderTopLeftRadius: radius3.lg, borderBottomLeftRadius: radius3.lg } : null,
+            band && iso === hi ? { borderTopRightRadius: radius3.lg, borderBottomRightRadius: radius3.lg } : null
+          ],
+          children: /* @__PURE__ */ jsxs11(
+            Pressable8,
+            {
+              role: "radio",
+              "aria-label": longDate(locale, iso),
+              "aria-checked": selected,
+              "aria-disabled": disabled || void 0,
+              "aria-current": iso === today ? "date" : void 0,
+              disabled,
+              onPress: () => {
+                haptic("selection");
+                onSelect?.(iso);
+              },
+              style: ({ pressed }) => [
+                styles13.day,
+                { borderRadius: radius3.lg },
+                selected ? { backgroundColor: theme.accent } : pressed ? { backgroundColor: theme.surface3 } : null
+              ],
+              children: [
+                /* @__PURE__ */ jsx14(
+                  Text11,
+                  {
+                    style: [
+                      styles13.dayText,
+                      {
+                        color: selected ? theme.onAccent : disabled ? theme.textMuted : iso === today ? theme.accentText : outside ? theme.textSecondary : theme.textPrimary,
+                        fontWeight: selected || iso === today ? "700" : "400",
+                        textDecorationLine: disabled ? "line-through" : "none"
+                      }
+                    ],
+                    children: Number(iso.slice(8))
+                  }
+                ),
+                iso === today ? /* @__PURE__ */ jsx14(Node, { color: selected ? theme.onAccent : theme.accent, style: styles13.todayNode }) : null
+              ]
+            }
+          )
+        },
+        iso
+      );
+    }) }, week[0])) })
+  ] });
+}
+function MonthPicker({ locale, value, onValueChange, min, max, labels, style }) {
+  const { theme, radius: radius3, haptic } = useTheme();
+  const [year, setYear] = React12.useState(Number((value ?? todayIso()).slice(0, 4)));
+  const names = monthNames(locale, "short").map((n) => n.replace(/\.$/, ""));
+  const long = monthNames(locale, "long");
+  return /* @__PURE__ */ jsxs11(View10, { style: [styles13.calendar, { backgroundColor: theme.surface1, borderColor: theme.borderDefault, borderRadius: radius3.xl }, style], children: [
+    /* @__PURE__ */ jsxs11(View10, { style: styles13.header, children: [
+      /* @__PURE__ */ jsx14(NavButton, { label: labels?.previousYear ?? "Previous year", direction: "left", disabled: Boolean(min && year - 1 < Number(min.slice(0, 4))), onPress: () => setYear(year - 1) }),
+      /* @__PURE__ */ jsx14(Text11, { role: "heading", "aria-live": "polite", style: [styles13.title, { color: theme.textPrimary }], children: year }),
+      /* @__PURE__ */ jsx14(NavButton, { label: labels?.nextYear ?? "Next year", direction: "right", disabled: Boolean(max && year + 1 > Number(max.slice(0, 4))), onPress: () => setYear(year + 1) })
+    ] }),
+    /* @__PURE__ */ jsx14(View10, { role: "radiogroup", "aria-label": String(year), style: styles13.months, children: names.map((name, i) => {
+      const id = `${year}-${String(i + 1).padStart(2, "0")}`;
+      const selected = id === value;
+      const disabled = Boolean(min && id < min || max && id > max);
+      return /* @__PURE__ */ jsx14(
+        Pressable8,
+        {
+          role: "radio",
+          "aria-checked": selected,
+          "aria-label": `${long[i]} ${year}`,
+          "aria-disabled": disabled || void 0,
+          disabled,
+          onPress: () => {
+            haptic("selection");
+            onValueChange?.(id);
+          },
+          style: ({ pressed }) => [styles13.month, { borderRadius: radius3.lg, backgroundColor: selected ? theme.accent : pressed ? theme.surface3 : "transparent" }, disabled ? styles13.disabled : null],
+          children: /* @__PURE__ */ jsx14(Text11, { style: [styles13.monthText, { color: selected ? theme.onAccent : theme.textPrimary, fontWeight: selected ? "700" : "500" }], children: name })
+        },
+        id
+      );
+    }) })
+  ] });
+}
+function DayStrip({ label, locale, value: valueProp, defaultValue = null, onValueChange, start, days = 14, isDateDisabled, isDateMarked, markedLabel = "has events", today: todayProp, style }) {
+  const { theme, radius: radius3, haptic } = useTheme();
+  const today = todayProp ?? todayIso();
+  const first = start ?? today;
+  const [value, setValue] = useOwn(valueProp, defaultValue);
+  const weekday = new Intl.DateTimeFormat(locale, { weekday: "short" });
+  const list = Array.from({ length: days }, (_, i) => addDays(first, i));
+  return /* @__PURE__ */ jsx14(ScrollView4, { horizontal: true, showsHorizontalScrollIndicator: false, role: "radiogroup", "aria-label": label, contentContainerStyle: styles13.strip, style, children: list.map((iso) => {
+    const selected = iso === value;
+    const disabled = Boolean(isDateDisabled?.(iso));
+    const marked = Boolean(isDateMarked?.(iso));
+    const name = longDate(locale, iso);
+    return /* @__PURE__ */ jsxs11(
+      Pressable8,
+      {
+        role: "radio",
+        "aria-checked": selected,
+        "aria-label": marked ? `${name}, ${markedLabel}` : name,
+        "aria-disabled": disabled || void 0,
+        "aria-current": iso === today ? "date" : void 0,
+        disabled,
+        onPress: () => {
+          haptic("selection");
+          setValue(iso);
+          onValueChange?.(iso);
+        },
+        style: ({ pressed }) => [
+          styles13.stripDay,
+          {
+            borderRadius: radius3.xl,
+            backgroundColor: selected ? theme.accent : disabled ? "transparent" : theme.surface2,
+            borderColor: selected ? theme.accent : theme.borderDefault,
+            borderStyle: disabled ? "dashed" : "solid",
+            transform: [{ scale: pressed ? 0.95 : 1 }]
+          }
+        ],
+        children: [
+          iso === today ? /* @__PURE__ */ jsx14(Node, { color: selected ? theme.onAccent : theme.accent, style: styles13.stripNode }) : null,
+          /* @__PURE__ */ jsx14(Text11, { style: [styles13.stripWeekday, { color: selected ? theme.onAccent : disabled ? theme.textMuted : theme.textSecondary }], children: weekday.format(toLocalDate(iso)).replace(/\.$/, "").toUpperCase() }),
+          /* @__PURE__ */ jsx14(Text11, { style: [styles13.stripNumber, { color: selected ? theme.onAccent : disabled ? theme.textMuted : theme.textPrimary }], children: Number(iso.slice(8)) }),
+          /* @__PURE__ */ jsx14(View10, { style: [styles13.dot, marked ? { backgroundColor: selected ? theme.onAccent : theme.textSecondary } : null] })
+        ]
+      },
+      iso
+    );
+  }) });
+}
+function TimePicker({ label, locale, value: valueProp, defaultValue = null, onValueChange, variant = "wheel", minuteStep = 5, hour12, labels: given, slots = [], isTimeDisabled, disabled, style }) {
+  const { theme, radius: radius3, haptic } = useTheme();
+  const [value, setOwn] = useOwn(valueProp, defaultValue);
+  const set = (next) => {
+    setOwn(next);
+    onValueChange?.(next);
+  };
+  if (variant === "slots")
+    return /* @__PURE__ */ jsx14(View10, { role: "radiogroup", "aria-label": label, style: [styles13.slots, style], children: slots.map((t) => {
+      const selected = t === value;
+      const off = disabled || Boolean(isTimeDisabled?.(t));
+      return /* @__PURE__ */ jsx14(
+        Pressable8,
+        {
+          role: "radio",
+          "aria-checked": selected,
+          "aria-label": formatTime(locale, t),
+          "aria-disabled": off || void 0,
+          disabled: off,
+          onPress: () => {
+            haptic("selection");
+            set(t);
+          },
+          style: ({ pressed }) => [
+            styles13.slot,
+            {
+              borderRadius: radius3.lg,
+              backgroundColor: selected ? theme.accent : off ? "transparent" : theme.surface2,
+              borderColor: selected ? theme.accent : theme.borderDefault,
+              borderStyle: off ? "dashed" : "solid",
+              transform: [{ scale: pressed ? 0.97 : 1 }]
+            }
+          ],
+          children: /* @__PURE__ */ jsx14(Text11, { style: [styles13.slotText, { color: selected ? theme.onAccent : off ? theme.textMuted : theme.textPrimary, textDecorationLine: off ? "line-through" : "none" }], children: formatTime(locale, t) })
+        },
+        t
+      );
+    }) });
+  const labels = { hours: "Hours", minutes: "Minutes", period: "AM/PM", ...given };
+  const twelve = hour12 ?? uses12Hours(locale);
+  const total = timeToMinutes(value) ?? 9 * 60;
+  const h24 = Math.floor(total / 60);
+  const minute = total % 60;
+  const pm = h24 >= 12;
+  const two = (n) => String(n).padStart(2, "0");
+  const put = (h, m) => set(`${two(h)}:${two(m)}`);
+  const hours = twelve ? [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map((h) => ({ value: String(h), label: String(h) })) : Array.from({ length: 24 }, (_, h) => ({ value: String(h), label: two(h) }));
+  const minutes = Array.from({ length: Math.ceil(60 / minuteStep) }, (_, i) => ({ value: String(i * minuteStep), label: two(i * minuteStep) }));
+  const [am, pmLabel] = dayPeriods(locale);
+  return /* @__PURE__ */ jsxs11(WheelPicker, { label: value ? `${label}, ${formatTime(locale, value)}` : label, style, children: [
+    /* @__PURE__ */ jsx14(Wheel, { label: labels.hours, options: hours, disabled, value: twelve ? String(h24 % 12 === 0 ? 12 : h24 % 12) : String(h24), onValueChange: (v) => put(twelve ? Number(v) % 12 + (pm ? 12 : 0) : Number(v), minute) }),
+    /* @__PURE__ */ jsx14(WheelDivider, { children: ":" }),
+    /* @__PURE__ */ jsx14(Wheel, { label: labels.minutes, options: minutes, disabled, value: String(Math.min(60 - minuteStep, Math.round(minute / minuteStep) * minuteStep)), onValueChange: (v) => put(h24, Number(v)) }),
+    twelve ? /* @__PURE__ */ jsx14(
+      Wheel,
+      {
+        label: labels.period,
+        options: [
+          { value: "am", label: am },
+          { value: "pm", label: pmLabel }
+        ],
+        disabled,
+        value: pm ? "pm" : "am",
+        onValueChange: (v) => put(h24 % 12 + (v === "pm" ? 12 : 0), minute)
+      }
+    ) : null
+  ] });
+}
+function DateWheel({ label, locale, value: valueProp, defaultValue = null, onValueChange, min, max, defaultView, hint, error, labels: given, disabled, style }) {
+  const { theme } = useTheme();
+  const names = { day: "Day", month: "Month", year: "Year", ...given };
+  const [value, setOwn] = useOwn(valueProp, defaultValue);
+  const today = todayIso();
+  const hi = max ?? today;
+  const lo = min ?? isoOf(Number(today.slice(0, 4)) - 120, 1, 1);
+  const { year, month, day } = isoParts(value || defaultView || hi);
+  const months = monthNames(locale, "long");
+  const set = (y, m, d) => {
+    let next = isoOf(y, m, d);
+    if (next > hi) next = hi;
+    if (next < lo) next = lo;
+    setOwn(next);
+    onValueChange?.(next);
+  };
+  const last = daysInMonth(year, month);
+  const columns = {
+    day: /* @__PURE__ */ jsx14(Wheel, { label: names.day, disabled, options: Array.from({ length: last }, (_, i) => ({ value: String(i + 1), label: String(i + 1), disabled: isoOf(year, month, i + 1) > hi || isoOf(year, month, i + 1) < lo })), value: String(Math.min(day, last)), onValueChange: (v) => set(year, month, Number(v)), style: styles13.dayWheel }, "day"),
+    month: /* @__PURE__ */ jsx14(Wheel, { label: names.month, disabled, options: months.map((n, i) => ({ value: String(i + 1), label: n, disabled: isoOf(year, i + 1, 1) > hi || isoOf(year, i + 1, daysInMonth(year, i + 1)) < lo })), value: String(month), onValueChange: (v) => set(year, Number(v), day), style: styles13.monthWheel }, "month"),
+    year: /* @__PURE__ */ jsx14(Wheel, { label: names.year, disabled, options: yearRange(Number(hi.slice(0, 4)), Number(lo.slice(0, 4))).map((y) => ({ value: String(y), label: String(y) })), value: String(year), onValueChange: (v) => set(Number(v), month, day), style: styles13.yearWheel }, "year")
+  };
+  const caption = error ?? hint;
+  return /* @__PURE__ */ jsxs11(View10, { style: [styles13.field, style], children: [
+    /* @__PURE__ */ jsx14(Text11, { "aria-hidden": true, style: [styles13.fieldLabel, { color: theme.textSecondary }], children: label }),
+    /* @__PURE__ */ jsx14(WheelPicker, { label, invalid: Boolean(error), unset: !value, children: datePartsOrder(locale).map((part) => columns[part]) }),
+    caption ? /* @__PURE__ */ jsx14(Text11, { role: error ? "alert" : void 0, "aria-live": error ? "polite" : void 0, style: [styles13.caption, { color: error ? theme.dangerText : theme.textSecondary }], children: caption }) : null
+  ] });
+}
+var styles13 = StyleSheet13.create({
+  calendar: { padding: 12, gap: 4, borderWidth: StyleSheet13.hairlineWidth, alignSelf: "flex-start" },
+  header: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", marginBottom: 6, gap: 8 },
+  title: { fontSize: 15, fontWeight: "700", textTransform: "capitalize" },
+  nav: { width: 36, height: 36, alignItems: "center", justifyContent: "center", borderWidth: StyleSheet13.hairlineWidth },
+  week: { flexDirection: "row" },
+  weekday: { width: 44, textAlign: "center", fontSize: 11, fontWeight: "700", paddingBottom: 4 },
+  cell: { width: 44, height: 44, marginVertical: 1 },
+  day: { flex: 1, alignItems: "center", justifyContent: "center" },
+  dayText: { fontSize: 15, fontVariant: ["tabular-nums"] },
+  node: { width: 5, height: 5, borderRadius: 1, transform: [{ rotate: "45deg" }] },
+  todayNode: { position: "absolute", bottom: 5 },
+  months: { flexDirection: "row", flexWrap: "wrap", width: 264, gap: 6 },
+  month: { width: 84, height: 44, alignItems: "center", justifyContent: "center" },
+  monthText: { fontSize: 14, textTransform: "capitalize" },
+  strip: { gap: 8, paddingVertical: 4 },
+  stripDay: { width: 56, height: 72, alignItems: "center", justifyContent: "center", gap: 2, borderWidth: 1 },
+  stripNode: { position: "absolute", top: 6 },
+  stripWeekday: { fontSize: 11, fontWeight: "700", letterSpacing: 0.5 },
+  stripNumber: { fontSize: 19, fontWeight: "700", fontVariant: ["tabular-nums"] },
+  dot: { width: 6, height: 6, borderRadius: 3 },
+  slots: { flexDirection: "row", flexWrap: "wrap", gap: 8, alignSelf: "stretch" },
+  slot: { minWidth: 88, height: 44, paddingHorizontal: 12, alignItems: "center", justifyContent: "center", borderWidth: 1 },
+  slotText: { fontSize: 15, fontWeight: "600", fontVariant: ["tabular-nums"] },
+  field: { gap: 6, alignSelf: "stretch" },
+  fieldLabel: { fontSize: 12, lineHeight: 16, fontWeight: "600" },
+  caption: { fontSize: 12, lineHeight: 16 },
+  dayWheel: { minWidth: 56 },
+  monthWheel: { minWidth: 128 },
+  yearWheel: { minWidth: 76 },
+  disabled: { opacity: 0.4 }
+});
+
 // src/native/empty-state.tsx
-import { StyleSheet as StyleSheet10, View as View7 } from "react-native";
-import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+import { StyleSheet as StyleSheet14, View as View11 } from "react-native";
+import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
 function EmptyState({ icon, title, description, action, style, ...props }) {
   const { theme } = useTheme();
-  return /* @__PURE__ */ jsxs8(View7, { ...props, style: [styles10.root, style], children: [
-    icon ? /* @__PURE__ */ jsx11(View7, { "aria-hidden": true, style: [styles10.icon, { backgroundColor: theme.surface2 }], children: icon }) : null,
-    /* @__PURE__ */ jsx11(Txt, { variant: "label", role: "heading", style: styles10.center, children: title }),
-    description ? /* @__PURE__ */ jsx11(Txt, { tone: "secondary", style: styles10.center, children: description }) : null,
-    action ? /* @__PURE__ */ jsx11(View7, { style: styles10.action, children: action }) : null
+  return /* @__PURE__ */ jsxs12(View11, { ...props, style: [styles14.root, style], children: [
+    icon ? /* @__PURE__ */ jsx15(View11, { "aria-hidden": true, style: [styles14.icon, { backgroundColor: theme.surface2 }], children: icon }) : null,
+    /* @__PURE__ */ jsx15(Txt, { variant: "label", role: "heading", style: styles14.center, children: title }),
+    description ? /* @__PURE__ */ jsx15(Txt, { tone: "secondary", style: styles14.center, children: description }) : null,
+    action ? /* @__PURE__ */ jsx15(View11, { style: styles14.action, children: action }) : null
   ] });
 }
-var styles10 = StyleSheet10.create({
+var styles14 = StyleSheet14.create({
   root: { alignItems: "center", justifyContent: "center", gap: 8, paddingVertical: 40, paddingHorizontal: 24 },
   icon: { width: 48, height: 48, borderRadius: 24, alignItems: "center", justifyContent: "center", marginBottom: 4 },
   center: { textAlign: "center", maxWidth: 360 },
@@ -897,19 +1683,19 @@ var styles10 = StyleSheet10.create({
 });
 
 // src/native/field.tsx
-import * as React9 from "react";
-import { StyleSheet as StyleSheet11, Text as Text8, TextInput as TextInput2, View as View8 } from "react-native";
-import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+import * as React13 from "react";
+import { StyleSheet as StyleSheet15, Text as Text12, TextInput as TextInput3, View as View12 } from "react-native";
+import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
 function TextField({ label, hint, error, value, defaultValue, onValueChange, disabled, end, inputRef, style, multiline, onFocus, onBlur, ...props }) {
   const { theme, radius: radius3 } = useTheme();
-  const [focused, setFocused] = React9.useState(false);
+  const [focused, setFocused] = React13.useState(false);
   const caption = error ?? hint;
   const border = error ? theme.danger : focused ? theme.accent : theme.borderDefault;
-  return /* @__PURE__ */ jsxs9(View8, { style: [styles11.root, disabled ? styles11.disabled : null, style], children: [
-    /* @__PURE__ */ jsx12(Text8, { style: [styles11.label, { color: theme.textSecondary }], children: label }),
-    /* @__PURE__ */ jsxs9(View8, { style: [styles11.frame, multiline ? styles11.multiline : null, { borderRadius: radius3.md, borderColor: border, backgroundColor: theme.surface2 }], children: [
-      /* @__PURE__ */ jsx12(
-        TextInput2,
+  return /* @__PURE__ */ jsxs13(View12, { style: [styles15.root, disabled ? styles15.disabled : null, style], children: [
+    /* @__PURE__ */ jsx16(Text12, { style: [styles15.label, { color: theme.textSecondary }], children: label }),
+    /* @__PURE__ */ jsxs13(View12, { style: [styles15.frame, multiline ? styles15.multiline : null, { borderRadius: radius3.md, borderColor: border, backgroundColor: theme.surface2 }], children: [
+      /* @__PURE__ */ jsx16(
+        TextInput3,
         {
           ref: inputRef,
           "aria-label": label,
@@ -930,16 +1716,16 @@ function TextField({ label, hint, error, value, defaultValue, onValueChange, dis
             setFocused(false);
             onBlur?.(event);
           },
-          style: [styles11.input, multiline ? styles11.inputMultiline : null, { color: theme.textPrimary }],
+          style: [styles15.input, multiline ? styles15.inputMultiline : null, { color: theme.textPrimary }],
           ...props
         }
       ),
-      end ? /* @__PURE__ */ jsx12(View8, { style: styles11.end, children: end }) : null
+      end ? /* @__PURE__ */ jsx16(View12, { style: styles15.end, children: end }) : null
     ] }),
-    caption ? /* @__PURE__ */ jsx12(Text8, { role: error ? "alert" : void 0, "aria-live": error ? "polite" : void 0, style: [styles11.caption, { color: error ? theme.dangerText : theme.textSecondary }], children: caption }) : null
+    caption ? /* @__PURE__ */ jsx16(Text12, { role: error ? "alert" : void 0, "aria-live": error ? "polite" : void 0, style: [styles15.caption, { color: error ? theme.dangerText : theme.textSecondary }], children: caption }) : null
   ] });
 }
-var styles11 = StyleSheet11.create({
+var styles15 = StyleSheet15.create({
   root: { gap: 6, alignSelf: "stretch" },
   label: { fontSize: 12, lineHeight: 16, fontWeight: "600" },
   frame: { flexDirection: "row", alignItems: "center", minHeight: 44, paddingHorizontal: 12, borderWidth: 1 },
@@ -952,20 +1738,20 @@ var styles11 = StyleSheet11.create({
 });
 
 // src/native/goal-gauge.tsx
-import { Animated as Animated4, StyleSheet as StyleSheet12, View as View9 } from "react-native";
+import { Animated as Animated5, StyleSheet as StyleSheet16, View as View13 } from "react-native";
 
 // src/native/story-motion.ts
-import * as React10 from "react";
-import { AccessibilityInfo as AccessibilityInfo2, Animated as Animated3, Easing } from "react-native";
+import * as React14 from "react";
+import { AccessibilityInfo as AccessibilityInfo2, Animated as Animated4, Easing } from "react-native";
 function useEntrance(animated, delay = 0, duration = 700) {
-  const [value] = React10.useState(() => new Animated3.Value(animated ? 0 : 1));
-  React10.useEffect(() => {
+  const [value] = React14.useState(() => new Animated4.Value(animated ? 0 : 1));
+  React14.useEffect(() => {
     if (!animated) return;
     let cancelled = false;
     void AccessibilityInfo2.isReduceMotionEnabled().then((reduce) => {
       if (cancelled) return;
       if (reduce) value.setValue(1);
-      else Animated3.timing(value, { toValue: 1, duration, delay, easing: Easing.out(Easing.cubic), useNativeDriver: true }).start();
+      else Animated4.timing(value, { toValue: 1, duration, delay, easing: Easing.out(Easing.cubic), useNativeDriver: true }).start();
     });
     return () => {
       cancelled = true;
@@ -975,17 +1761,17 @@ function useEntrance(animated, delay = 0, duration = 700) {
 }
 
 // src/native/goal-gauge.tsx
-import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
 function Cell({ lit, animate, order, animated, arcade }) {
   const { theme } = useTheme();
   const t = useEntrance(animated && animate, 300 + order * 100, 350);
   const spentOpacity = arcade ? 0.14 : 1;
   const opacity = !animate ? 1 : lit ? t.interpolate({ inputRange: [0, 1], outputRange: [0.25, 1] }) : t.interpolate({ inputRange: [0, 1], outputRange: [1, arcade ? 0.14 : 1] });
   const color = lit || arcade ? theme.accent : theme.surface3;
-  return /* @__PURE__ */ jsx13(
-    Animated4.View,
+  return /* @__PURE__ */ jsx17(
+    Animated5.View,
     {
-      style: [styles12.cell, arcade ? styles12.cellArcade : null, { backgroundColor: color, opacity: lit || animate ? opacity : spentOpacity }]
+      style: [styles16.cell, arcade ? styles16.cellArcade : null, { backgroundColor: color, opacity: lit || animate ? opacity : spentOpacity }]
     }
   );
 }
@@ -995,8 +1781,8 @@ function GoalGauge({ label, segments, value, valueText, mode = "fill", showLabel
   const lit = Math.min(total, Math.max(0, Math.round(value ?? total)));
   const words = valueText ?? `${lit} / ${total}`;
   const arcade = variant === "arcade";
-  return /* @__PURE__ */ jsxs10(
-    View9,
+  return /* @__PURE__ */ jsxs14(
+    View13,
     {
       accessible: true,
       role: "meter",
@@ -1006,22 +1792,22 @@ function GoalGauge({ label, segments, value, valueText, mode = "fill", showLabel
       "aria-valuenow": lit,
       "aria-valuetext": words,
       ...props,
-      style: [styles12.root, style],
+      style: [styles16.root, style],
       children: [
-        showLabel ? /* @__PURE__ */ jsxs10(View9, { "aria-hidden": true, style: [styles12.head, arcade ? styles12.headArcade : null], children: [
-          /* @__PURE__ */ jsx13(Txt, { variant: arcade ? "mono" : "caption", tone: "secondary", children: arcade ? label.toUpperCase() : label }),
-          arcade ? null : /* @__PURE__ */ jsx13(Txt, { variant: "caption", children: words })
+        showLabel ? /* @__PURE__ */ jsxs14(View13, { "aria-hidden": true, style: [styles16.head, arcade ? styles16.headArcade : null], children: [
+          /* @__PURE__ */ jsx17(Txt, { variant: arcade ? "mono" : "caption", tone: "secondary", children: arcade ? label.toUpperCase() : label }),
+          arcade ? null : /* @__PURE__ */ jsx17(Txt, { variant: "caption", children: words })
         ] }) : null,
-        /* @__PURE__ */ jsx13(View9, { "aria-hidden": true, style: [styles12.cells, arcade ? [styles12.cellsArcade, { borderColor: theme.borderSubtle, backgroundColor: theme.surface1 }] : null], children: Array.from({ length: total }, (_, i) => {
+        /* @__PURE__ */ jsx17(View13, { "aria-hidden": true, style: [styles16.cells, arcade ? [styles16.cellsArcade, { borderColor: theme.borderSubtle, backgroundColor: theme.surface1 }] : null], children: Array.from({ length: total }, (_, i) => {
           const on = i < lit;
           const animate = mode === "fill" ? on : !on;
-          return /* @__PURE__ */ jsx13(Cell, { lit: on, animate, order: mode === "fill" ? i : i - lit, animated, arcade }, i);
+          return /* @__PURE__ */ jsx17(Cell, { lit: on, animate, order: mode === "fill" ? i : i - lit, animated, arcade }, i);
         }) })
       ]
     }
   );
 }
-var styles12 = StyleSheet12.create({
+var styles16 = StyleSheet16.create({
   root: { alignSelf: "stretch", gap: 8 },
   head: { flexDirection: "row", justifyContent: "space-between", alignItems: "baseline", gap: 12 },
   headArcade: { justifyContent: "center" },
@@ -1032,8 +1818,8 @@ var styles12 = StyleSheet12.create({
 });
 
 // src/native/KrizakaMark.tsx
-import { View as View10 } from "react-native";
-import Svg3, { Circle, Defs as Defs2, G as Group, LinearGradient as LinearGradient2, Path as Path2, RadialGradient, Stop as Stop2 } from "react-native-svg";
+import { View as View14 } from "react-native";
+import Svg5, { Circle, Defs as Defs2, G as Group, LinearGradient as LinearGradient2, Path as Path4, RadialGradient, Stop as Stop2 } from "react-native-svg";
 
 // src/marks/krizaka-geometry.ts
 var KRIZAKA = {
@@ -1055,24 +1841,24 @@ var KRIZAKA = {
 };
 
 // src/native/mark-motion.ts
-import { useEffect as useEffect5, useState as useState10 } from "react";
-import { AccessibilityInfo as AccessibilityInfo3, Animated as Animated5, Easing as Easing2 } from "react-native";
+import { useEffect as useEffect8, useState as useState14 } from "react";
+import { AccessibilityInfo as AccessibilityInfo3, Animated as Animated6, Easing as Easing2 } from "react-native";
 var markA11y = (title) => title ? { accessible: true, accessibilityRole: "image", accessibilityLabel: title } : { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants" };
 function useMarkMotion(size, animated, spinMs = 3e4) {
-  const [spin] = useState10(() => new Animated5.Value(0));
-  const [pulse] = useState10(() => new Animated5.Value(0));
-  useEffect5(() => {
+  const [spin] = useState14(() => new Animated6.Value(0));
+  const [pulse] = useState14(() => new Animated6.Value(0));
+  useEffect8(() => {
     if (!animated) return;
     let loops = [];
     let cancelled = false;
     void AccessibilityInfo3.isReduceMotionEnabled().then((reduce) => {
       if (reduce || cancelled) return;
       loops = [
-        Animated5.loop(Animated5.timing(spin, { toValue: 1, duration: spinMs, easing: Easing2.linear, useNativeDriver: true })),
-        Animated5.loop(
-          Animated5.sequence([
-            Animated5.timing(pulse, { toValue: 1, duration: 1600, easing: Easing2.inOut(Easing2.ease), useNativeDriver: true }),
-            Animated5.timing(pulse, { toValue: 0, duration: 1600, easing: Easing2.inOut(Easing2.ease), useNativeDriver: true })
+        Animated6.loop(Animated6.timing(spin, { toValue: 1, duration: spinMs, easing: Easing2.linear, useNativeDriver: true })),
+        Animated6.loop(
+          Animated6.sequence([
+            Animated6.timing(pulse, { toValue: 1, duration: 1600, easing: Easing2.inOut(Easing2.ease), useNativeDriver: true }),
+            Animated6.timing(pulse, { toValue: 0, duration: 1600, easing: Easing2.inOut(Easing2.ease), useNativeDriver: true })
           ])
         )
       ];
@@ -1084,7 +1870,7 @@ function useMarkMotion(size, animated, spinMs = 3e4) {
     };
   }, [animated, spin, pulse, spinMs]);
   return {
-    Animated: Animated5,
+    Animated: Animated6,
     layer: { position: "absolute", width: size, height: size },
     spinStyle: { transform: [{ rotate: spin.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "360deg"] }) }] },
     pulseStyle: { opacity: pulse.interpolate({ inputRange: [0, 1], outputRange: [0.85, 1] }) }
@@ -1092,39 +1878,39 @@ function useMarkMotion(size, animated, spinMs = 3e4) {
 }
 
 // src/native/KrizakaMark.tsx
-import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
 function KrizakaMark({ size = 48, animated = true, title, neutral }) {
   const { theme } = useTheme();
-  const { Animated: Animated14, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated);
+  const { Animated: Animated17, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated);
   const id = useSvgId("kzm");
   const viewBox = size < 48 ? KRIZAKA.croppedViewBox : KRIZAKA.viewBox;
   const stroke = neutral ?? theme.textMuted;
-  const blue = /* @__PURE__ */ jsx14(LinearGradient2, { id: `${id}b`, gradientUnits: "userSpaceOnUse", x1: KRIZAKA.blue.x1 + KRIZAKA.offset, y1: KRIZAKA.blue.y1 + KRIZAKA.offset, x2: KRIZAKA.blue.x2 + KRIZAKA.offset, y2: KRIZAKA.blue.y2 + KRIZAKA.offset, children: KRIZAKA.blue.stops.map(([offset, color]) => /* @__PURE__ */ jsx14(Stop2, { offset, stopColor: color }, offset)) });
-  const dot = (c) => /* @__PURE__ */ jsxs11(Fragment2, { children: [
-    /* @__PURE__ */ jsx14(Circle, { cx: c.cx, cy: c.cy, r: c.r, fill: `url(#${id}b)` }),
-    /* @__PURE__ */ jsx14(Circle, { cx: c.cx, cy: c.cy, r: c.inner, fill: KRIZAKA.highlight })
+  const blue = /* @__PURE__ */ jsx18(LinearGradient2, { id: `${id}b`, gradientUnits: "userSpaceOnUse", x1: KRIZAKA.blue.x1 + KRIZAKA.offset, y1: KRIZAKA.blue.y1 + KRIZAKA.offset, x2: KRIZAKA.blue.x2 + KRIZAKA.offset, y2: KRIZAKA.blue.y2 + KRIZAKA.offset, children: KRIZAKA.blue.stops.map(([offset, color]) => /* @__PURE__ */ jsx18(Stop2, { offset, stopColor: color }, offset)) });
+  const dot = (c) => /* @__PURE__ */ jsxs15(Fragment3, { children: [
+    /* @__PURE__ */ jsx18(Circle, { cx: c.cx, cy: c.cy, r: c.r, fill: `url(#${id}b)` }),
+    /* @__PURE__ */ jsx18(Circle, { cx: c.cx, cy: c.cy, r: c.inner, fill: KRIZAKA.highlight })
   ] });
-  return /* @__PURE__ */ jsxs11(View10, { style: { width: size, height: size }, ...markA11y(title), children: [
-    /* @__PURE__ */ jsxs11(Svg3, { viewBox, style: layer, children: [
-      /* @__PURE__ */ jsxs11(Defs2, { children: [
-        /* @__PURE__ */ jsxs11(RadialGradient, { id: `${id}g`, cx: "50%", cy: "50%", r: "50%", children: [
-          /* @__PURE__ */ jsx14(Stop2, { offset: "0%", stopColor: KRIZAKA.glow.color, stopOpacity: KRIZAKA.glow.opacity }),
-          /* @__PURE__ */ jsx14(Stop2, { offset: "100%", stopColor: KRIZAKA.glow.color, stopOpacity: 0 })
+  return /* @__PURE__ */ jsxs15(View14, { style: { width: size, height: size }, ...markA11y(title), children: [
+    /* @__PURE__ */ jsxs15(Svg5, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsxs15(Defs2, { children: [
+        /* @__PURE__ */ jsxs15(RadialGradient, { id: `${id}g`, cx: "50%", cy: "50%", r: "50%", children: [
+          /* @__PURE__ */ jsx18(Stop2, { offset: "0%", stopColor: KRIZAKA.glow.color, stopOpacity: KRIZAKA.glow.opacity }),
+          /* @__PURE__ */ jsx18(Stop2, { offset: "100%", stopColor: KRIZAKA.glow.color, stopOpacity: 0 })
         ] }),
-        /* @__PURE__ */ jsxs11(LinearGradient2, { id: `${id}i`, gradientUnits: "userSpaceOnUse", x1: KRIZAKA.ink.x1 + KRIZAKA.offset, y1: KRIZAKA.ink.y1 + KRIZAKA.offset, x2: KRIZAKA.ink.x2 + KRIZAKA.offset, y2: KRIZAKA.ink.y2 + KRIZAKA.offset, children: [
-          /* @__PURE__ */ jsx14(Stop2, { offset: "0%", stopColor: theme.textSecondary }),
-          /* @__PURE__ */ jsx14(Stop2, { offset: "100%", stopColor: theme.textPrimary })
+        /* @__PURE__ */ jsxs15(LinearGradient2, { id: `${id}i`, gradientUnits: "userSpaceOnUse", x1: KRIZAKA.ink.x1 + KRIZAKA.offset, y1: KRIZAKA.ink.y1 + KRIZAKA.offset, x2: KRIZAKA.ink.x2 + KRIZAKA.offset, y2: KRIZAKA.ink.y2 + KRIZAKA.offset, children: [
+          /* @__PURE__ */ jsx18(Stop2, { offset: "0%", stopColor: theme.textSecondary }),
+          /* @__PURE__ */ jsx18(Stop2, { offset: "100%", stopColor: theme.textPrimary })
         ] }),
         blue
       ] }),
-      size >= 48 ? /* @__PURE__ */ jsx14(Circle, { cx: 200, cy: 200, r: 190, fill: `url(#${id}g)` }) : null,
-      /* @__PURE__ */ jsx14(Circle, { cx: 200, cy: 200, r: KRIZAKA.ring.r, stroke, strokeWidth: KRIZAKA.ring.width, opacity: 0.35, fill: "none" }),
-      /* @__PURE__ */ jsx14(Group, { transform: `translate(${KRIZAKA.offset} ${KRIZAKA.offset})`, children: /* @__PURE__ */ jsx14(Path2, { d: KRIZAKA.shield, stroke: `url(#${id}i)`, strokeWidth: KRIZAKA.stroke, strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }) })
+      size >= 48 ? /* @__PURE__ */ jsx18(Circle, { cx: 200, cy: 200, r: 190, fill: `url(#${id}g)` }) : null,
+      /* @__PURE__ */ jsx18(Circle, { cx: 200, cy: 200, r: KRIZAKA.ring.r, stroke, strokeWidth: KRIZAKA.ring.width, opacity: 0.35, fill: "none" }),
+      /* @__PURE__ */ jsx18(Group, { transform: `translate(${KRIZAKA.offset} ${KRIZAKA.offset})`, children: /* @__PURE__ */ jsx18(Path4, { d: KRIZAKA.shield, stroke: `url(#${id}i)`, strokeWidth: KRIZAKA.stroke, strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }) })
     ] }),
-    /* @__PURE__ */ jsx14(Animated14.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsx14(Svg3, { viewBox, style: layer, children: /* @__PURE__ */ jsx14(Circle, { cx: 200, cy: 200, r: KRIZAKA.orbit.r, stroke, strokeWidth: KRIZAKA.orbit.width, strokeDasharray: KRIZAKA.orbit.dash, opacity: 0.6, fill: "none" }) }) }),
-    /* @__PURE__ */ jsx14(Animated14.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsxs11(Svg3, { viewBox, style: layer, children: [
-      /* @__PURE__ */ jsx14(Defs2, { children: blue }),
-      /* @__PURE__ */ jsxs11(Group, { transform: `translate(${KRIZAKA.offset} ${KRIZAKA.offset})`, children: [
+    /* @__PURE__ */ jsx18(Animated17.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsx18(Svg5, { viewBox, style: layer, children: /* @__PURE__ */ jsx18(Circle, { cx: 200, cy: 200, r: KRIZAKA.orbit.r, stroke, strokeWidth: KRIZAKA.orbit.width, strokeDasharray: KRIZAKA.orbit.dash, opacity: 0.6, fill: "none" }) }) }),
+    /* @__PURE__ */ jsx18(Animated17.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsxs15(Svg5, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsx18(Defs2, { children: blue }),
+      /* @__PURE__ */ jsxs15(Group, { transform: `translate(${KRIZAKA.offset} ${KRIZAKA.offset})`, children: [
         dot(KRIZAKA.node),
         dot(KRIZAKA.core)
       ] })
@@ -1133,13 +1919,13 @@ function KrizakaMark({ size = 48, animated = true, title, neutral }) {
 }
 
 // src/native/mascot-state.tsx
-import * as React12 from "react";
-import { AccessibilityInfo as AccessibilityInfo5, Animated as Animated7, Easing as Easing4, StyleSheet as StyleSheet13, View as View12 } from "react-native";
+import * as React16 from "react";
+import { AccessibilityInfo as AccessibilityInfo5, Animated as Animated8, Easing as Easing4, StyleSheet as StyleSheet17, View as View16 } from "react-native";
 
 // src/native/mascots.tsx
-import { useEffect as useEffect6, useState as useState11 } from "react";
-import { AccessibilityInfo as AccessibilityInfo4, Animated as Animated6, Easing as Easing3, View as View11 } from "react-native";
-import Svg4, { Circle as Circle2, Defs as Defs3, Ellipse, G, LinearGradient as LinearGradient3, Path as Path3, Rect as Rect2, Stop as Stop3 } from "react-native-svg";
+import { useEffect as useEffect9, useState as useState15 } from "react";
+import { AccessibilityInfo as AccessibilityInfo4, Animated as Animated7, Easing as Easing3, View as View15 } from "react-native";
+import Svg6, { Circle as Circle2, Defs as Defs3, Ellipse, G, LinearGradient as LinearGradient3, Path as Path5, 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}`);
@@ -1297,17 +2083,17 @@ var SHADE = "#000000";
 var PARCEL = ["#f59e0b", "#d97706", "#b45309"];
 
 // src/native/mascots.tsx
-import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
 function useBob(animated) {
-  const [y] = useState11(() => new Animated6.Value(0));
-  useEffect6(() => {
+  const [y] = useState15(() => new Animated7.Value(0));
+  useEffect9(() => {
     if (!animated) return;
     let loop;
     let cancelled = false;
     void AccessibilityInfo4.isReduceMotionEnabled().then((reduce) => {
       if (reduce || cancelled) return;
-      const step = (toValue) => Animated6.timing(y, { toValue, duration: 1800, easing: Easing3.inOut(Easing3.ease), useNativeDriver: true });
-      loop = Animated6.loop(Animated6.sequence([step(-2.5), step(0)]));
+      const step = (toValue) => Animated7.timing(y, { toValue, duration: 1800, easing: Easing3.inOut(Easing3.ease), useNativeDriver: true });
+      loop = Animated7.loop(Animated7.sequence([step(-2.5), step(0)]));
       loop.start();
     });
     return () => {
@@ -1331,62 +2117,62 @@ function Mascot({ bird = "owl", mood = "welcome", tone: tone2 = "brand", size =
   const look3 = mood === "thinking" ? 1.4 : 0;
   const rot = (deg, [x, y]) => `rotate(${deg} ${x} ${y})`;
   const [wl, wr] = g.wings;
-  return /* @__PURE__ */ jsx15(View11, { style: [{ width: size, height: size }, style], ...markA11y(title), children: /* @__PURE__ */ jsx15(Animated6.View, { style: { transform: [{ translateY: bob }] }, children: /* @__PURE__ */ jsxs12(Svg4, { width: size, height: size, viewBox: "0 0 120 120", children: [
-    /* @__PURE__ */ jsx15(Defs3, { children: /* @__PURE__ */ jsxs12(LinearGradient3, { id, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-      /* @__PURE__ */ jsx15(Stop3, { offset: "0%", stopColor: p.from }),
-      /* @__PURE__ */ jsx15(Stop3, { offset: "100%", stopColor: p.to })
+  return /* @__PURE__ */ jsx19(View15, { style: [{ width: size, height: size }, style], ...markA11y(title), children: /* @__PURE__ */ jsx19(Animated7.View, { style: { transform: [{ translateY: bob }] }, children: /* @__PURE__ */ jsxs16(Svg6, { width: size, height: size, viewBox: "0 0 120 120", children: [
+    /* @__PURE__ */ jsx19(Defs3, { children: /* @__PURE__ */ jsxs16(LinearGradient3, { id, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+      /* @__PURE__ */ jsx19(Stop3, { offset: "0%", stopColor: p.from }),
+      /* @__PURE__ */ jsx19(Stop3, { offset: "100%", stopColor: p.to })
     ] }) }),
-    /* @__PURE__ */ jsx15(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__ */ jsx15(Path3, { d: MOOD_PARTS.tray, stroke: outline, strokeWidth: 1.6, strokeDasharray: "3 3", fill: "none" }),
-    g.legs.map((d) => /* @__PURE__ */ jsx15(Path3, { d, stroke: p.beak, strokeWidth: 2.6, strokeLinecap: "round", fill: "none" }, d)),
-    g.back?.map((d) => d.endsWith("Z") ? /* @__PURE__ */ jsx15(Path3, { d, fill: p.detail, ...line }, d) : /* @__PURE__ */ jsx15(Path3, { d, stroke: outline, strokeWidth: 1.4, fill: "none" }, d)),
-    g.parcel?.map((d, i) => /* @__PURE__ */ jsx15(Path3, { d, fill: PARCEL[i], ...line }, d)),
-    /* @__PURE__ */ jsx15(Path3, { d: g.body, fill: body, ...line }),
-    /* @__PURE__ */ jsx15(Path3, { d: g.belly, fill: LIGHT, opacity: 0.28 }),
+    /* @__PURE__ */ jsx19(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__ */ jsx19(Path5, { d: MOOD_PARTS.tray, stroke: outline, strokeWidth: 1.6, strokeDasharray: "3 3", fill: "none" }),
+    g.legs.map((d) => /* @__PURE__ */ jsx19(Path5, { d, stroke: p.beak, strokeWidth: 2.6, strokeLinecap: "round", fill: "none" }, d)),
+    g.back?.map((d) => d.endsWith("Z") ? /* @__PURE__ */ jsx19(Path5, { d, fill: p.detail, ...line }, d) : /* @__PURE__ */ jsx19(Path5, { d, stroke: outline, strokeWidth: 1.4, fill: "none" }, d)),
+    g.parcel?.map((d, i) => /* @__PURE__ */ jsx19(Path5, { d, fill: PARCEL[i], ...line }, d)),
+    /* @__PURE__ */ jsx19(Path5, { d: g.body, fill: body, ...line }),
+    /* @__PURE__ */ jsx19(Path5, { 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__ */ jsxs12(G, { transform: turn ? rot(turn, w.pivot) : void 0, children: [
-        /* @__PURE__ */ jsx15(Path3, { d: w.d, fill: p.wing, ...line }),
-        /* @__PURE__ */ jsx15(Path3, { d: w.d, fill: SHADE, opacity: 0.16 })
+      return /* @__PURE__ */ jsxs16(G, { transform: turn ? rot(turn, w.pivot) : void 0, children: [
+        /* @__PURE__ */ jsx19(Path5, { d: w.d, fill: p.wing, ...line }),
+        /* @__PURE__ */ jsx19(Path5, { d: w.d, fill: SHADE, opacity: 0.16 })
       ] }, i);
     }),
-    g.neck && /* @__PURE__ */ jsx15(Path3, { d: g.neck.d, stroke: body, strokeWidth: g.neck.width, strokeLinecap: "round", fill: "none" }),
-    g.head.r > 0 && /* @__PURE__ */ jsx15(Circle2, { cx: g.head.cx, cy: g.head.cy, r: g.head.r, fill: body, ...line }),
-    g.details.map((d) => /* @__PURE__ */ jsx15(Path3, { d, fill: p.detail, ...line }, d)),
-    g.visor && /* @__PURE__ */ jsx15(Rect2, { x: g.visor.x, y: g.visor.y, width: g.visor.w, height: g.visor.h, rx: 4, fill: theme.surface0, ...line }),
+    g.neck && /* @__PURE__ */ jsx19(Path5, { d: g.neck.d, stroke: body, strokeWidth: g.neck.width, strokeLinecap: "round", fill: "none" }),
+    g.head.r > 0 && /* @__PURE__ */ jsx19(Circle2, { cx: g.head.cx, cy: g.head.cy, r: g.head.r, fill: body, ...line }),
+    g.details.map((d) => /* @__PURE__ */ jsx19(Path5, { d, fill: p.detail, ...line }, d)),
+    g.visor && /* @__PURE__ */ jsx19(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__ */ jsxs12(G, { children: [
-        /* @__PURE__ */ jsx15(Circle2, { cx: at[0], cy: at[1], r: g.eyes.white, fill: LIGHT, ...line }),
-        /* @__PURE__ */ jsx15(Circle2, { cx: at[0], cy: at[1] + g.eyes.pupil * 0.7, r: g.eyes.pupil, fill: SHADE }),
-        /* @__PURE__ */ jsx15(Path3, { d: upperLid(at, g.eyes.white), fill: p.detail, ...line })
-      ] }, i) : mood === "success" || mood === "empty" ? /* @__PURE__ */ jsx15(Path3, { 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__ */ jsxs12(G, { children: [
-        g.eyes.white > 0 && /* @__PURE__ */ jsx15(Circle2, { cx: at[0], cy: at[1], r: g.eyes.white, fill: LIGHT, ...line }),
-        /* @__PURE__ */ jsx15(Circle2, { cx: at[0] + look3, cy: at[1] - look3, r: g.eyes.pupil, fill: g.visor ? p.eye : SHADE })
+      (at, i) => mood === "empty" && g.eyes.white > 0 ? /* @__PURE__ */ jsxs16(G, { children: [
+        /* @__PURE__ */ jsx19(Circle2, { cx: at[0], cy: at[1], r: g.eyes.white, fill: LIGHT, ...line }),
+        /* @__PURE__ */ jsx19(Circle2, { cx: at[0], cy: at[1] + g.eyes.pupil * 0.7, r: g.eyes.pupil, fill: SHADE }),
+        /* @__PURE__ */ jsx19(Path5, { d: upperLid(at, g.eyes.white), fill: p.detail, ...line })
+      ] }, i) : mood === "success" || mood === "empty" ? /* @__PURE__ */ jsx19(Path5, { 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__ */ jsxs16(G, { children: [
+        g.eyes.white > 0 && /* @__PURE__ */ jsx19(Circle2, { cx: at[0], cy: at[1], r: g.eyes.white, fill: LIGHT, ...line }),
+        /* @__PURE__ */ jsx19(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__ */ jsx15(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__ */ jsx15(Path3, { d: brow(at, eyeR, g.eyes.at.length === 1 ? 1 : i === 0 ? -1 : 1), stroke: outline, strokeWidth: 2, strokeLinecap: "round" }, i)),
-    /* @__PURE__ */ jsx15(Path3, { d: g.beak, fill: p.beak, ...line }),
-    mood === "thinking" && MOOD_PARTS.dots.map(([cx, cy, r], i) => /* @__PURE__ */ jsx15(Circle2, { cx, cy, r, fill: theme.textSecondary, opacity: 0.5 + i * 0.25 }, cx)),
-    (mood === "success" || mood === "error") && /* @__PURE__ */ jsx15(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__ */ jsx15(Path3, { d: MOOD_PARTS.check, stroke: theme.surface0, strokeWidth: 2.6, strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }),
-    mood === "error" && /* @__PURE__ */ jsx15(Path3, { d: MOOD_PARTS.bang.line, stroke: theme.surface0, strokeWidth: 2.8, strokeLinecap: "round" }),
-    mood === "error" && /* @__PURE__ */ jsx15(Circle2, { cx: MOOD_PARTS.bang.dot[0], cy: MOOD_PARTS.bang.dot[1], r: 1.6, fill: theme.surface0 })
+    g.glasses && g.eyes.at.map(([x, y]) => /* @__PURE__ */ jsx19(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__ */ jsx19(Path5, { d: brow(at, eyeR, g.eyes.at.length === 1 ? 1 : i === 0 ? -1 : 1), stroke: outline, strokeWidth: 2, strokeLinecap: "round" }, i)),
+    /* @__PURE__ */ jsx19(Path5, { d: g.beak, fill: p.beak, ...line }),
+    mood === "thinking" && MOOD_PARTS.dots.map(([cx, cy, r], i) => /* @__PURE__ */ jsx19(Circle2, { cx, cy, r, fill: theme.textSecondary, opacity: 0.5 + i * 0.25 }, cx)),
+    (mood === "success" || mood === "error") && /* @__PURE__ */ jsx19(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__ */ jsx19(Path5, { d: MOOD_PARTS.check, stroke: theme.surface0, strokeWidth: 2.6, strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }),
+    mood === "error" && /* @__PURE__ */ jsx19(Path5, { d: MOOD_PARTS.bang.line, stroke: theme.surface0, strokeWidth: 2.8, strokeLinecap: "round" }),
+    mood === "error" && /* @__PURE__ */ jsx19(Circle2, { cx: MOOD_PARTS.bang.dot[0], cy: MOOD_PARTS.bang.dot[1], r: 1.6, fill: theme.surface0 })
   ] }) }) });
 }
 
 // src/native/mascot-state.tsx
-import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
 var SIZE = { sm: 64, md: 96, lg: 128 };
 function useArrival(animated) {
-  const [value] = React12.useState(() => new Animated7.Value(animated ? 0 : 1));
-  React12.useEffect(() => {
+  const [value] = React16.useState(() => new Animated8.Value(animated ? 0 : 1));
+  React16.useEffect(() => {
     if (!animated) return;
     let cancelled = false;
     void AccessibilityInfo5.isReduceMotionEnabled().then((reduce) => {
       if (cancelled) return;
       if (reduce) value.setValue(1);
-      else Animated7.timing(value, { toValue: 1, duration: 420, easing: Easing4.out(Easing4.cubic), useNativeDriver: true }).start();
+      else Animated8.timing(value, { toValue: 1, duration: 420, easing: Easing4.out(Easing4.cubic), useNativeDriver: true }).start();
     });
     return () => {
       cancelled = true;
@@ -1397,30 +2183,30 @@ function useArrival(animated) {
 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__ */ jsxs13(
-    Animated7.View,
+  return /* @__PURE__ */ jsxs17(
+    Animated8.View,
     {
       role: mood === "error" ? "alert" : "status",
       accessibilityLiveRegion: mood === "error" ? "assertive" : "polite",
       "aria-busy": mood === "thinking" ? true : void 0,
       ...props,
-      style: [inline ? styles13.inline : styles13.stacked, { opacity, transform: [{ translateY: opacity.interpolate({ inputRange: [0, 1], outputRange: [6, 0] }) }] }, style],
+      style: [inline ? styles17.inline : styles17.stacked, { opacity, transform: [{ translateY: opacity.interpolate({ inputRange: [0, 1], outputRange: [6, 0] }) }] }, style],
       children: [
-        /* @__PURE__ */ jsx16(Mascot, { bird, mood, tone: tone2, size: SIZE[size], animated }),
-        /* @__PURE__ */ jsxs13(View12, { style: inline ? styles13.wordsInline : styles13.words, children: [
-          /* @__PURE__ */ jsx16(Txt, { variant: "label", role: "heading", style: inline ? null : styles13.center, children: title }),
-          description ? /* @__PURE__ */ jsx16(Txt, { tone: "secondary", style: inline ? null : styles13.center, children: description }) : null,
-          action ? /* @__PURE__ */ jsx16(View12, { style: [styles13.action, inline ? null : styles13.actionCentred], children: action }) : null
+        /* @__PURE__ */ jsx20(Mascot, { bird, mood, tone: tone2, size: SIZE[size], animated }),
+        /* @__PURE__ */ jsxs17(View16, { style: inline ? styles17.wordsInline : styles17.words, children: [
+          /* @__PURE__ */ jsx20(Txt, { variant: "label", role: "heading", style: inline ? null : styles17.center, children: title }),
+          description ? /* @__PURE__ */ jsx20(Txt, { tone: "secondary", style: inline ? null : styles17.center, children: description }) : null,
+          action ? /* @__PURE__ */ jsx20(View16, { style: [styles17.action, inline ? null : styles17.actionCentred], children: action }) : null
         ] })
       ]
     }
   );
 }
-var ErrorState = (props) => /* @__PURE__ */ jsx16(MascotState, { mood: "error", ...props });
-var SuccessState = (props) => /* @__PURE__ */ jsx16(MascotState, { mood: "success", ...props });
-var LoadingState = (props) => /* @__PURE__ */ jsx16(MascotState, { mood: "thinking", ...props });
-var WelcomeState = (props) => /* @__PURE__ */ jsx16(MascotState, { mood: "welcome", ...props });
-var styles13 = StyleSheet13.create({
+var ErrorState = (props) => /* @__PURE__ */ jsx20(MascotState, { mood: "error", ...props });
+var SuccessState = (props) => /* @__PURE__ */ jsx20(MascotState, { mood: "success", ...props });
+var LoadingState = (props) => /* @__PURE__ */ jsx20(MascotState, { mood: "thinking", ...props });
+var WelcomeState = (props) => /* @__PURE__ */ jsx20(MascotState, { mood: "welcome", ...props });
+var styles17 = StyleSheet17.create({
   stacked: { alignItems: "center", justifyContent: "center", gap: 12, paddingVertical: 40, paddingHorizontal: 24 },
   inline: { flexDirection: "row", alignItems: "center", gap: 16 },
   words: { alignItems: "center", gap: 6 },
@@ -1431,8 +2217,8 @@ var styles13 = StyleSheet13.create({
 });
 
 // src/native/OrazakaMark.tsx
-import { View as View13 } from "react-native";
-import Svg5, { Circle as Circle3, Defs as Defs4, LinearGradient as LinearGradient4, Path as Path4, RadialGradient as RadialGradient2, Stop as Stop4 } from "react-native-svg";
+import { View as View17 } from "react-native";
+import Svg7, { Circle as Circle3, Defs as Defs4, LinearGradient as LinearGradient4, Path as Path6, RadialGradient as RadialGradient2, Stop as Stop4 } from "react-native-svg";
 
 // src/marks/orazaka-geometry.ts
 var orange = marks.orazaka[marks.orazaka.length - 1][1];
@@ -1461,41 +2247,41 @@ var ORAZAKA = {
 };
 
 // src/native/OrazakaMark.tsx
-import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
 function OrazakaMark({ size = 48, animated = true, title, neutral }) {
   const { theme } = useTheme();
-  const { Animated: Animated14, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated);
+  const { Animated: Animated17, 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__ */ jsx17(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__ */ jsx17(Stop4, { offset, stopColor: color }, offset)) });
+  const gradient = /* @__PURE__ */ jsx21(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__ */ jsx21(Stop4, { offset, stopColor: color }, offset)) });
   const fill = `url(#${id}a)`;
-  return /* @__PURE__ */ jsxs14(View13, { style: { width: size, height: size }, ...markA11y(title), children: [
-    /* @__PURE__ */ jsxs14(Svg5, { viewBox, style: layer, children: [
-      /* @__PURE__ */ jsx17(Defs4, { children: /* @__PURE__ */ jsxs14(RadialGradient2, { id: `${id}g`, cx: "50%", cy: "50%", r: "50%", children: [
-        /* @__PURE__ */ jsx17(Stop4, { offset: "0%", stopColor: ORAZAKA.glow.color, stopOpacity: ORAZAKA.glow.opacity }),
-        /* @__PURE__ */ jsx17(Stop4, { offset: "100%", stopColor: ORAZAKA.glow.color, stopOpacity: 0 })
+  return /* @__PURE__ */ jsxs18(View17, { style: { width: size, height: size }, ...markA11y(title), children: [
+    /* @__PURE__ */ jsxs18(Svg7, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsx21(Defs4, { children: /* @__PURE__ */ jsxs18(RadialGradient2, { id: `${id}g`, cx: "50%", cy: "50%", r: "50%", children: [
+        /* @__PURE__ */ jsx21(Stop4, { offset: "0%", stopColor: ORAZAKA.glow.color, stopOpacity: ORAZAKA.glow.opacity }),
+        /* @__PURE__ */ jsx21(Stop4, { offset: "100%", stopColor: ORAZAKA.glow.color, stopOpacity: 0 })
       ] }) }),
-      size >= 48 ? /* @__PURE__ */ jsx17(Circle3, { cx: ORAZAKA.center, cy: ORAZAKA.center, r: 190, fill: `url(#${id}g)` }) : null,
-      /* @__PURE__ */ jsx17(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__ */ jsx17(Circle3, { cx: ORAZAKA.center, cy: ORAZAKA.center, r: ORAZAKA.ring.r, stroke, strokeWidth: ORAZAKA.ring.width, opacity: 0.35, fill: "none" })
+      size >= 48 ? /* @__PURE__ */ jsx21(Circle3, { cx: ORAZAKA.center, cy: ORAZAKA.center, r: 190, fill: `url(#${id}g)` }) : null,
+      /* @__PURE__ */ jsx21(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__ */ jsx21(Circle3, { cx: ORAZAKA.center, cy: ORAZAKA.center, r: ORAZAKA.ring.r, stroke, strokeWidth: ORAZAKA.ring.width, opacity: 0.35, fill: "none" })
     ] }),
-    /* @__PURE__ */ jsx17(Animated14.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsxs14(Svg5, { viewBox, style: layer, children: [
-      /* @__PURE__ */ jsx17(Defs4, { children: gradient }),
-      ORAZAKA.shards.map((d) => /* @__PURE__ */ jsx17(Path4, { d, fill, stroke: fill, strokeWidth: ORAZAKA.shardStroke, strokeLinejoin: "round" }, d))
+    /* @__PURE__ */ jsx21(Animated17.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsxs18(Svg7, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsx21(Defs4, { children: gradient }),
+      ORAZAKA.shards.map((d) => /* @__PURE__ */ jsx21(Path6, { d, fill, stroke: fill, strokeWidth: ORAZAKA.shardStroke, strokeLinejoin: "round" }, d))
     ] }) }),
-    /* @__PURE__ */ jsx17(Animated14.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsxs14(Svg5, { viewBox, style: layer, children: [
-      /* @__PURE__ */ jsx17(Defs4, { children: gradient }),
-      /* @__PURE__ */ jsx17(Circle3, { cx: ORAZAKA.center, cy: ORAZAKA.center, r: ORAZAKA.core.r, fill }),
-      /* @__PURE__ */ jsx17(Circle3, { cx: ORAZAKA.center, cy: ORAZAKA.center, r: ORAZAKA.core.inner, fill: ORAZAKA.highlight })
+    /* @__PURE__ */ jsx21(Animated17.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsxs18(Svg7, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsx21(Defs4, { children: gradient }),
+      /* @__PURE__ */ jsx21(Circle3, { cx: ORAZAKA.center, cy: ORAZAKA.center, r: ORAZAKA.core.r, fill }),
+      /* @__PURE__ */ jsx21(Circle3, { cx: ORAZAKA.center, cy: ORAZAKA.center, r: ORAZAKA.core.inner, fill: ORAZAKA.highlight })
     ] }) })
   ] });
 }
 
 // src/native/OrochiaMark.tsx
-import { useEffect as useEffect8, useState as useState13 } from "react";
-import { AccessibilityInfo as AccessibilityInfo6, Animated as Animated8, Easing as Easing5, View as View14 } from "react-native";
-import Svg6, { Circle as Circle4, Defs as Defs5, Ellipse as Ellipse2, G as Group2, LinearGradient as LinearGradient5, Path as Path5, RadialGradient as RadialGradient3, Stop as Stop5 } from "react-native-svg";
+import { useEffect as useEffect11, useState as useState17 } from "react";
+import { AccessibilityInfo as AccessibilityInfo6, Animated as Animated9, Easing as Easing5, View as View18 } from "react-native";
+import Svg8, { Circle as Circle4, Defs as Defs5, Ellipse as Ellipse2, G as Group2, LinearGradient as LinearGradient5, Path as Path7, RadialGradient as RadialGradient3, Stop as Stop5 } from "react-native-svg";
 
 // src/marks/orochia-geometry.ts
 var OROCHIA = {
@@ -1522,25 +2308,25 @@ var OROCHIA = {
 };
 
 // src/native/OrochiaMark.tsx
-import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs19 } 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] = useState13(() => new Animated8.Value(0));
-  const [pulse] = useState13(() => new Animated8.Value(0));
-  useEffect8(() => {
+  const [spin] = useState17(() => new Animated9.Value(0));
+  const [pulse] = useState17(() => new Animated9.Value(0));
+  useEffect11(() => {
     if (!animated) return;
     let loops = [];
     let cancelled = false;
     void AccessibilityInfo6.isReduceMotionEnabled().then((reduce) => {
       if (reduce || cancelled) return;
       loops = [
-        Animated8.loop(Animated8.timing(spin, { toValue: 1, duration: 3e4, easing: Easing5.linear, useNativeDriver: true })),
-        Animated8.loop(
-          Animated8.sequence([
-            Animated8.timing(pulse, { toValue: 1, duration: 1600, easing: Easing5.inOut(Easing5.ease), useNativeDriver: true }),
-            Animated8.timing(pulse, { toValue: 0, duration: 1600, easing: Easing5.inOut(Easing5.ease), useNativeDriver: true })
+        Animated9.loop(Animated9.timing(spin, { toValue: 1, duration: 3e4, easing: Easing5.linear, useNativeDriver: true })),
+        Animated9.loop(
+          Animated9.sequence([
+            Animated9.timing(pulse, { toValue: 1, duration: 1600, easing: Easing5.inOut(Easing5.ease), useNativeDriver: true }),
+            Animated9.timing(pulse, { toValue: 0, duration: 1600, easing: Easing5.inOut(Easing5.ease), useNativeDriver: true })
           ])
         )
       ];
@@ -1554,44 +2340,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__ */ jsx18(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__ */ jsx18(Stop5, { offset, stopColor: color }, offset)) });
-  return /* @__PURE__ */ jsxs15(View14, { style: { width: size, height: size }, ...a11y, children: [
-    /* @__PURE__ */ jsxs15(Svg6, { viewBox, style: layer, children: [
-      /* @__PURE__ */ jsx18(Defs5, { children: /* @__PURE__ */ jsxs15(RadialGradient3, { id: "glow", cx: "50%", cy: "50%", r: "50%", children: [
-        /* @__PURE__ */ jsx18(Stop5, { offset: "0%", stopColor: OROCHIA.glow.color, stopOpacity: OROCHIA.glow.opacity }),
-        /* @__PURE__ */ jsx18(Stop5, { offset: "100%", stopColor: OROCHIA.glow.color, stopOpacity: 0 })
+  const bodyGradient = /* @__PURE__ */ jsx22(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__ */ jsx22(Stop5, { offset, stopColor: color }, offset)) });
+  return /* @__PURE__ */ jsxs19(View18, { style: { width: size, height: size }, ...a11y, children: [
+    /* @__PURE__ */ jsxs19(Svg8, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsx22(Defs5, { children: /* @__PURE__ */ jsxs19(RadialGradient3, { id: "glow", cx: "50%", cy: "50%", r: "50%", children: [
+        /* @__PURE__ */ jsx22(Stop5, { offset: "0%", stopColor: OROCHIA.glow.color, stopOpacity: OROCHIA.glow.opacity }),
+        /* @__PURE__ */ jsx22(Stop5, { offset: "100%", stopColor: OROCHIA.glow.color, stopOpacity: 0 })
       ] }) }),
-      /* @__PURE__ */ jsx18(Circle4, { cx: CENTER, cy: CENTER, r: 170, fill: "url(#glow)" }),
-      /* @__PURE__ */ jsx18(Circle4, { cx: CENTER, cy: CENTER, r: OROCHIA.ring.r, stroke: neutral, strokeWidth: OROCHIA.ring.width, opacity: 0.35, fill: "none" })
+      /* @__PURE__ */ jsx22(Circle4, { cx: CENTER, cy: CENTER, r: 170, fill: "url(#glow)" }),
+      /* @__PURE__ */ jsx22(Circle4, { cx: CENTER, cy: CENTER, r: OROCHIA.ring.r, stroke: neutral, strokeWidth: OROCHIA.ring.width, opacity: 0.35, fill: "none" })
     ] }),
-    /* @__PURE__ */ jsx18(Animated8.View, { style: [layer, { transform: [{ rotate: spin.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "360deg"] }) }] }], children: /* @__PURE__ */ jsx18(Svg6, { viewBox, style: layer, children: /* @__PURE__ */ jsx18(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__ */ jsxs15(Svg6, { viewBox, style: layer, children: [
-      /* @__PURE__ */ jsx18(Defs5, { children: bodyGradient }),
-      /* @__PURE__ */ jsxs15(Group2, { transform: `translate(${OROCHIA.offset} ${OROCHIA.offset})`, children: [
-        /* @__PURE__ */ jsx18(Path5, { d: OROCHIA.arc, stroke: "url(#body)", strokeWidth: 22, strokeLinecap: "round", fill: "none" }),
-        /* @__PURE__ */ jsx18(Path5, { d: OROCHIA.arc, stroke: OROCHIA.scales.color, strokeOpacity: OROCHIA.scales.opacity, strokeWidth: OROCHIA.scales.width, strokeLinecap: "round", strokeDasharray: OROCHIA.scales.dash, fill: "none" }),
-        /* @__PURE__ */ jsx18(Path5, { d: OROCHIA.neck, stroke: "url(#body)", strokeWidth: 14, strokeLinecap: "round", fill: "none" }),
-        /* @__PURE__ */ jsx18(Path5, { d: OROCHIA.tail, stroke: "url(#body)", strokeWidth: 6, strokeLinecap: "round", fill: "none" }),
-        /* @__PURE__ */ jsx18(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__ */ jsx18(Path5, { d: OROCHIA.tongue.d, stroke: OROCHIA.tongue.color, strokeWidth: 3, strokeLinecap: "round", fill: "none" })
+    /* @__PURE__ */ jsx22(Animated9.View, { style: [layer, { transform: [{ rotate: spin.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "360deg"] }) }] }], children: /* @__PURE__ */ jsx22(Svg8, { viewBox, style: layer, children: /* @__PURE__ */ jsx22(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__ */ jsxs19(Svg8, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsx22(Defs5, { children: bodyGradient }),
+      /* @__PURE__ */ jsxs19(Group2, { transform: `translate(${OROCHIA.offset} ${OROCHIA.offset})`, children: [
+        /* @__PURE__ */ jsx22(Path7, { d: OROCHIA.arc, stroke: "url(#body)", strokeWidth: 22, strokeLinecap: "round", fill: "none" }),
+        /* @__PURE__ */ jsx22(Path7, { d: OROCHIA.arc, stroke: OROCHIA.scales.color, strokeOpacity: OROCHIA.scales.opacity, strokeWidth: OROCHIA.scales.width, strokeLinecap: "round", strokeDasharray: OROCHIA.scales.dash, fill: "none" }),
+        /* @__PURE__ */ jsx22(Path7, { d: OROCHIA.neck, stroke: "url(#body)", strokeWidth: 14, strokeLinecap: "round", fill: "none" }),
+        /* @__PURE__ */ jsx22(Path7, { d: OROCHIA.tail, stroke: "url(#body)", strokeWidth: 6, strokeLinecap: "round", fill: "none" }),
+        /* @__PURE__ */ jsx22(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__ */ jsx22(Path7, { d: OROCHIA.tongue.d, stroke: OROCHIA.tongue.color, strokeWidth: 3, strokeLinecap: "round", fill: "none" })
       ] })
     ] }),
-    /* @__PURE__ */ jsx18(Animated8.View, { style: [layer, { opacity: pulse.interpolate({ inputRange: [0, 1], outputRange: [0.85, 1] }) }], children: /* @__PURE__ */ jsxs15(Svg6, { viewBox, style: layer, children: [
-      /* @__PURE__ */ jsx18(Defs5, { children: /* @__PURE__ */ jsx18(LinearGradient5, { id: "flame", x1: "50%", y1: "100%", x2: "50%", y2: "0%", children: OROCHIA.flameGradient.stops.map(([offset, color]) => /* @__PURE__ */ jsx18(Stop5, { offset, stopColor: color }, offset)) }) }),
-      /* @__PURE__ */ jsxs15(Group2, { transform: `translate(${OROCHIA.offset} ${OROCHIA.offset})`, children: [
-        /* @__PURE__ */ jsx18(Circle4, { cx: OROCHIA.eye.cx, cy: OROCHIA.eye.cy, r: OROCHIA.eye.r, fill: OROCHIA.eye.color }),
-        /* @__PURE__ */ jsx18(Path5, { d: OROCHIA.flame.d, transform: `translate(${OROCHIA.flame.translate[0]} ${OROCHIA.flame.translate[1]}) scale(${OROCHIA.flame.scale})`, fill: "url(#flame)" })
+    /* @__PURE__ */ jsx22(Animated9.View, { style: [layer, { opacity: pulse.interpolate({ inputRange: [0, 1], outputRange: [0.85, 1] }) }], children: /* @__PURE__ */ jsxs19(Svg8, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsx22(Defs5, { children: /* @__PURE__ */ jsx22(LinearGradient5, { id: "flame", x1: "50%", y1: "100%", x2: "50%", y2: "0%", children: OROCHIA.flameGradient.stops.map(([offset, color]) => /* @__PURE__ */ jsx22(Stop5, { offset, stopColor: color }, offset)) }) }),
+      /* @__PURE__ */ jsxs19(Group2, { transform: `translate(${OROCHIA.offset} ${OROCHIA.offset})`, children: [
+        /* @__PURE__ */ jsx22(Circle4, { cx: OROCHIA.eye.cx, cy: OROCHIA.eye.cy, r: OROCHIA.eye.r, fill: OROCHIA.eye.color }),
+        /* @__PURE__ */ jsx22(Path7, { 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 Pressable5, StyleSheet as StyleSheet14, Text as Text9, View as View15 } from "react-native";
-import Svg7, { Path as Path6 } from "react-native-svg";
-import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
-function Chevron({ direction, color }) {
-  return /* @__PURE__ */ jsx19(Svg7, { 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__ */ jsx19(Path6, { d: direction === "left" ? "m15 6-6 6 6 6" : "m9 6 6 6-6 6" }) });
+import { Pressable as Pressable9, StyleSheet as StyleSheet18, Text as Text13, View as View19 } from "react-native";
+import Svg9, { Path as Path8 } from "react-native-svg";
+import { jsx as jsx23, jsxs as jsxs20 } from "react/jsx-runtime";
+function Chevron3({ direction, color }) {
+  return /* @__PURE__ */ jsx23(Svg9, { 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__ */ jsx23(Path8, { 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();
@@ -1600,8 +2386,8 @@ 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__ */ jsx19(
-    Pressable5,
+  const button = (direction, enabled, onPress, label) => /* @__PURE__ */ jsx23(
+    Pressable9,
     {
       role: "button",
       "aria-label": label,
@@ -1610,29 +2396,29 @@ function Pagination({ page = 1, pageCount, onPageChange, hasPrevious, hasNext, o
       hitSlop: 6,
       onPress,
       style: ({ pressed }) => [
-        styles14.button,
+        styles18.button,
         { borderRadius: radius3.sm, borderColor: theme.borderDefault, backgroundColor: theme.surface1, opacity: enabled ? pressed ? 0.8 : 1 : 0.4 }
       ],
-      children: /* @__PURE__ */ jsx19(Chevron, { direction, color: theme.textPrimary })
+      children: /* @__PURE__ */ jsx23(Chevron3, { direction, color: theme.textPrimary })
     }
   );
   const text = status ?? (paged ? labels.compact(current, count) : null);
-  return /* @__PURE__ */ jsxs16(View15, { role: "navigation", style: [styles14.row, style], children: [
+  return /* @__PURE__ */ jsxs20(View19, { role: "navigation", style: [styles18.row, style], children: [
     button("left", canPrevious, paged ? () => onPageChange?.(current - 1) : onPrevious, labels.previous),
-    text ? /* @__PURE__ */ jsx19(Text9, { "aria-live": "polite", style: [styles14.status, { color: theme.textSecondary }], children: text }) : null,
+    text ? /* @__PURE__ */ jsx23(Text13, { "aria-live": "polite", style: [styles18.status, { color: theme.textSecondary }], children: text }) : null,
     button("right", canNext, paged ? () => onPageChange?.(current + 1) : onNext, labels.next)
   ] });
 }
-var styles14 = StyleSheet14.create({
+var styles18 = StyleSheet18.create({
   row: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", gap: 12 },
-  button: { width: 44, height: 44, alignItems: "center", justifyContent: "center", borderWidth: StyleSheet14.hairlineWidth },
+  button: { width: 44, height: 44, alignItems: "center", justifyContent: "center", borderWidth: StyleSheet18.hairlineWidth },
   status: { fontSize: 13, fontWeight: "600", fontVariant: ["tabular-nums"] }
 });
 
 // src/native/phoenix.tsx
-import { useEffect as useEffect9, useState as useState14 } from "react";
-import { AccessibilityInfo as AccessibilityInfo7, Animated as Animated9, Easing as Easing6, View as View16 } from "react-native";
-import Svg8, { Circle as Circle5, Defs as Defs6, LinearGradient as LinearGradient6, Path as Path7, RadialGradient as RadialGradient4, Stop as Stop6 } from "react-native-svg";
+import { useEffect as useEffect12, useState as useState18 } from "react";
+import { AccessibilityInfo as AccessibilityInfo7, Animated as Animated10, Easing as Easing6, View as View20 } from "react-native";
+import Svg10, { Circle as Circle5, Defs as Defs6, LinearGradient as LinearGradient6, Path as Path9, RadialGradient as RadialGradient4, Stop as Stop6 } from "react-native-svg";
 
 // src/mascots/phoenix-geometry.ts
 var PHOENIX = {
@@ -1655,17 +2441,17 @@ var PHOENIX_PALETTES = {
 };
 
 // src/native/phoenix.tsx
-import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs21 } from "react/jsx-runtime";
 function useFloat(animated) {
-  const [y] = useState14(() => new Animated9.Value(0));
-  useEffect9(() => {
+  const [y] = useState18(() => new Animated10.Value(0));
+  useEffect12(() => {
     if (!animated) return;
     let loop;
     let cancelled = false;
     void AccessibilityInfo7.isReduceMotionEnabled().then((reduce) => {
       if (reduce || cancelled) return;
-      const step = (toValue) => Animated9.timing(y, { toValue, duration: 2500, easing: Easing6.inOut(Easing6.ease), useNativeDriver: true });
-      loop = Animated9.loop(Animated9.sequence([step(-6), step(0)]));
+      const step = (toValue) => Animated10.timing(y, { toValue, duration: 2500, easing: Easing6.inOut(Easing6.ease), useNativeDriver: true });
+      loop = Animated10.loop(Animated10.sequence([step(-6), step(0)]));
       loop.start();
     });
     return () => {
@@ -1680,36 +2466,36 @@ function Phoenix({ tone: tone2 = "own", size = 120, animated = true, title, styl
   const id = useSvgId("kzp");
   const y = useFloat(animated);
   const p = tone2 === "brand" ? { left: [theme.accent2, theme.accent], right: [theme.accent, theme.accent2], core: ["#ffffff", theme.accent], body: theme.surface3, edge: theme.borderStrong, crest: theme.accent } : PHOENIX_PALETTES.own;
-  return /* @__PURE__ */ jsx20(View16, { style: [{ width: size, height: size }, style], ...markA11y(title), children: /* @__PURE__ */ jsx20(Animated9.View, { style: { transform: [{ translateY: y }] }, children: /* @__PURE__ */ jsxs17(Svg8, { width: size, height: size, viewBox: "0 0 120 120", children: [
-    /* @__PURE__ */ jsxs17(Defs6, { children: [
-      /* @__PURE__ */ jsxs17(LinearGradient6, { id: `${id}l`, x1: "1", y1: "0", x2: "0", y2: "1", children: [
-        /* @__PURE__ */ jsx20(Stop6, { offset: "0%", stopColor: p.left[0] }),
-        /* @__PURE__ */ jsx20(Stop6, { offset: "100%", stopColor: p.left[1] })
+  return /* @__PURE__ */ jsx24(View20, { style: [{ width: size, height: size }, style], ...markA11y(title), children: /* @__PURE__ */ jsx24(Animated10.View, { style: { transform: [{ translateY: y }] }, children: /* @__PURE__ */ jsxs21(Svg10, { width: size, height: size, viewBox: "0 0 120 120", children: [
+    /* @__PURE__ */ jsxs21(Defs6, { children: [
+      /* @__PURE__ */ jsxs21(LinearGradient6, { id: `${id}l`, x1: "1", y1: "0", x2: "0", y2: "1", children: [
+        /* @__PURE__ */ jsx24(Stop6, { offset: "0%", stopColor: p.left[0] }),
+        /* @__PURE__ */ jsx24(Stop6, { offset: "100%", stopColor: p.left[1] })
       ] }),
-      /* @__PURE__ */ jsxs17(LinearGradient6, { id: `${id}r`, x1: "0", y1: "0", x2: "1", y2: "1", children: [
-        /* @__PURE__ */ jsx20(Stop6, { offset: "0%", stopColor: p.right[0] }),
-        /* @__PURE__ */ jsx20(Stop6, { offset: "100%", stopColor: p.right[1] })
+      /* @__PURE__ */ jsxs21(LinearGradient6, { id: `${id}r`, x1: "0", y1: "0", x2: "1", y2: "1", children: [
+        /* @__PURE__ */ jsx24(Stop6, { offset: "0%", stopColor: p.right[0] }),
+        /* @__PURE__ */ jsx24(Stop6, { offset: "100%", stopColor: p.right[1] })
       ] }),
-      /* @__PURE__ */ jsxs17(RadialGradient4, { id: `${id}c`, children: [
-        /* @__PURE__ */ jsx20(Stop6, { offset: "0%", stopColor: p.core[0] }),
-        /* @__PURE__ */ jsx20(Stop6, { offset: "100%", stopColor: p.core[1], stopOpacity: 0 })
+      /* @__PURE__ */ jsxs21(RadialGradient4, { id: `${id}c`, children: [
+        /* @__PURE__ */ jsx24(Stop6, { offset: "0%", stopColor: p.core[0] }),
+        /* @__PURE__ */ jsx24(Stop6, { offset: "100%", stopColor: p.core[1], stopOpacity: 0 })
       ] })
     ] }),
-    /* @__PURE__ */ jsx20(Path7, { d: PHOENIX.wingL, fill: `url(#${id}l)` }),
-    /* @__PURE__ */ jsx20(Path7, { d: PHOENIX.wingR, fill: `url(#${id}r)` }),
-    /* @__PURE__ */ jsx20(Path7, { d: PHOENIX.tailL, fill: `url(#${id}l)`, opacity: 0.7 }),
-    /* @__PURE__ */ jsx20(Path7, { d: PHOENIX.tailR, fill: `url(#${id}r)`, opacity: 0.7 }),
-    /* @__PURE__ */ jsx20(Path7, { d: PHOENIX.body, fill: p.body, stroke: p.edge, strokeOpacity: 0.5 }),
-    /* @__PURE__ */ jsx20(Circle5, { cx: 60, cy: 58, r: 12, fill: `url(#${id}c)` }),
-    /* @__PURE__ */ jsx20(Circle5, { cx: 60, cy: 58, r: 3.5, fill: "#ffffff" }),
-    /* @__PURE__ */ jsx20(Path7, { d: PHOENIX.crest, stroke: p.crest, strokeWidth: 2, strokeLinecap: "round" })
+    /* @__PURE__ */ jsx24(Path9, { d: PHOENIX.wingL, fill: `url(#${id}l)` }),
+    /* @__PURE__ */ jsx24(Path9, { d: PHOENIX.wingR, fill: `url(#${id}r)` }),
+    /* @__PURE__ */ jsx24(Path9, { d: PHOENIX.tailL, fill: `url(#${id}l)`, opacity: 0.7 }),
+    /* @__PURE__ */ jsx24(Path9, { d: PHOENIX.tailR, fill: `url(#${id}r)`, opacity: 0.7 }),
+    /* @__PURE__ */ jsx24(Path9, { d: PHOENIX.body, fill: p.body, stroke: p.edge, strokeOpacity: 0.5 }),
+    /* @__PURE__ */ jsx24(Circle5, { cx: 60, cy: 58, r: 12, fill: `url(#${id}c)` }),
+    /* @__PURE__ */ jsx24(Circle5, { cx: 60, cy: 58, r: 3.5, fill: "#ffffff" }),
+    /* @__PURE__ */ jsx24(Path9, { d: PHOENIX.crest, stroke: p.crest, strokeWidth: 2, strokeLinecap: "round" })
   ] }) }) });
 }
 
 // src/native/YazakiaMark.tsx
-import React15 from "react";
-import { View as View17 } from "react-native";
-import Svg9, { Circle as Circle6, Defs as Defs7, LinearGradient as LinearGradient7, Path as Path8, RadialGradient as RadialGradient5, Stop as Stop7 } from "react-native-svg";
+import React19 from "react";
+import { View as View21 } from "react-native";
+import Svg11, { Circle as Circle6, Defs as Defs7, LinearGradient as LinearGradient7, Path as Path10, RadialGradient as RadialGradient5, Stop as Stop7 } from "react-native-svg";
 
 // src/marks/yazakia-geometry.ts
 var turquoise = marks.yazakia[marks.yazakia.length - 1][1];
@@ -1739,54 +2525,54 @@ var YAZAKIA = {
 };
 
 // src/native/YazakiaMark.tsx
-import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs22 } from "react/jsx-runtime";
 function YazakiaMark({ size = 48, animated = true, title, neutral }) {
   const { theme } = useTheme();
-  const { Animated: Animated14, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated);
+  const { Animated: Animated17, 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__ */ jsx21(LinearGradient7, { id: `${id}a`, gradientUnits: "userSpaceOnUse", x1: YAZAKIA.gradient.x1, y1: YAZAKIA.gradient.y1, x2: YAZAKIA.gradient.x2, y2: YAZAKIA.gradient.y2, children: YAZAKIA.gradient.stops.map(([offset, color]) => /* @__PURE__ */ jsx21(Stop7, { offset, stopColor: color }, offset)) });
+  const gradient = /* @__PURE__ */ jsx25(LinearGradient7, { id: `${id}a`, gradientUnits: "userSpaceOnUse", x1: YAZAKIA.gradient.x1, y1: YAZAKIA.gradient.y1, x2: YAZAKIA.gradient.x2, y2: YAZAKIA.gradient.y2, children: YAZAKIA.gradient.stops.map(([offset, color]) => /* @__PURE__ */ jsx25(Stop7, { offset, stopColor: color }, offset)) });
   const fill = `url(#${id}a)`;
-  return /* @__PURE__ */ jsxs18(View17, { style: { width: size, height: size }, ...markA11y(title), children: [
-    /* @__PURE__ */ jsxs18(Svg9, { viewBox, style: layer, children: [
-      /* @__PURE__ */ jsxs18(Defs7, { children: [
-        /* @__PURE__ */ jsxs18(RadialGradient5, { id: `${id}g`, cx: "50%", cy: "50%", r: "50%", children: [
-          /* @__PURE__ */ jsx21(Stop7, { offset: "0%", stopColor: YAZAKIA.glow.color, stopOpacity: YAZAKIA.glow.opacity }),
-          /* @__PURE__ */ jsx21(Stop7, { offset: "100%", stopColor: YAZAKIA.glow.color, stopOpacity: 0 })
+  return /* @__PURE__ */ jsxs22(View21, { style: { width: size, height: size }, ...markA11y(title), children: [
+    /* @__PURE__ */ jsxs22(Svg11, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsxs22(Defs7, { children: [
+        /* @__PURE__ */ jsxs22(RadialGradient5, { id: `${id}g`, cx: "50%", cy: "50%", r: "50%", children: [
+          /* @__PURE__ */ jsx25(Stop7, { offset: "0%", stopColor: YAZAKIA.glow.color, stopOpacity: YAZAKIA.glow.opacity }),
+          /* @__PURE__ */ jsx25(Stop7, { offset: "100%", stopColor: YAZAKIA.glow.color, stopOpacity: 0 })
         ] }),
         gradient
       ] }),
-      size >= 48 ? /* @__PURE__ */ jsx21(Circle6, { cx: YAZAKIA.center, cy: YAZAKIA.center, r: 190, fill: `url(#${id}g)` }) : null,
-      /* @__PURE__ */ jsx21(Circle6, { cx: YAZAKIA.center, cy: YAZAKIA.center, r: YAZAKIA.ring.r, stroke, strokeWidth: YAZAKIA.ring.width, opacity: 0.35, fill: "none" }),
-      YAZAKIA.voices.map((v, i) => /* @__PURE__ */ jsxs18(React15.Fragment, { children: [
-        /* @__PURE__ */ jsx21(Path8, { d: v.body, fill }),
-        /* @__PURE__ */ jsx21(Path8, { d: v.tail, fill }),
-        i === 0 ? /* @__PURE__ */ jsx21(Path8, { d: `${v.body} ${v.tail}`, fill: YAZAKIA.shade.color, opacity: YAZAKIA.shade.opacity }) : null
+      size >= 48 ? /* @__PURE__ */ jsx25(Circle6, { cx: YAZAKIA.center, cy: YAZAKIA.center, r: 190, fill: `url(#${id}g)` }) : null,
+      /* @__PURE__ */ jsx25(Circle6, { cx: YAZAKIA.center, cy: YAZAKIA.center, r: YAZAKIA.ring.r, stroke, strokeWidth: YAZAKIA.ring.width, opacity: 0.35, fill: "none" }),
+      YAZAKIA.voices.map((v, i) => /* @__PURE__ */ jsxs22(React19.Fragment, { children: [
+        /* @__PURE__ */ jsx25(Path10, { d: v.body, fill }),
+        /* @__PURE__ */ jsx25(Path10, { d: v.tail, fill }),
+        i === 0 ? /* @__PURE__ */ jsx25(Path10, { d: `${v.body} ${v.tail}`, fill: YAZAKIA.shade.color, opacity: YAZAKIA.shade.opacity }) : null
       ] }, v.body))
     ] }),
-    /* @__PURE__ */ jsx21(Animated14.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsxs18(Svg9, { viewBox, style: layer, children: [
-      /* @__PURE__ */ jsx21(Defs7, { children: gradient }),
-      /* @__PURE__ */ jsx21(Circle6, { cx: YAZAKIA.center, cy: YAZAKIA.center, r: YAZAKIA.orbit.r, stroke, strokeWidth: YAZAKIA.orbit.width, strokeDasharray: YAZAKIA.orbit.dash, opacity: 0.6, fill: "none" }),
-      YAZAKIA.pair.at.map(([cx, cy]) => /* @__PURE__ */ jsx21(Circle6, { cx, cy, r: YAZAKIA.pair.r, fill }, cx))
+    /* @__PURE__ */ jsx25(Animated17.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsxs22(Svg11, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsx25(Defs7, { children: gradient }),
+      /* @__PURE__ */ jsx25(Circle6, { cx: YAZAKIA.center, cy: YAZAKIA.center, r: YAZAKIA.orbit.r, stroke, strokeWidth: YAZAKIA.orbit.width, strokeDasharray: YAZAKIA.orbit.dash, opacity: 0.6, fill: "none" }),
+      YAZAKIA.pair.at.map(([cx, cy]) => /* @__PURE__ */ jsx25(Circle6, { cx, cy, r: YAZAKIA.pair.r, fill }, cx))
     ] }) }),
-    /* @__PURE__ */ jsx21(Animated14.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsxs18(Svg9, { viewBox, style: layer, children: [
-      /* @__PURE__ */ jsxs18(Defs7, { children: [
+    /* @__PURE__ */ jsx25(Animated17.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsxs22(Svg11, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsxs22(Defs7, { children: [
         gradient,
-        /* @__PURE__ */ jsxs18(LinearGradient7, { id: `${id}l`, gradientUnits: "userSpaceOnUse", x1: 0, y1: YAZAKIA.lens.y1, x2: 0, y2: YAZAKIA.lens.y2, children: [
-          /* @__PURE__ */ jsx21(Stop7, { offset: "0%", stopColor: YAZAKIA.highlight.color, stopOpacity: YAZAKIA.highlight.from }),
-          /* @__PURE__ */ jsx21(Stop7, { offset: "100%", stopColor: YAZAKIA.highlight.color, stopOpacity: YAZAKIA.highlight.to })
+        /* @__PURE__ */ jsxs22(LinearGradient7, { id: `${id}l`, gradientUnits: "userSpaceOnUse", x1: 0, y1: YAZAKIA.lens.y1, x2: 0, y2: YAZAKIA.lens.y2, children: [
+          /* @__PURE__ */ jsx25(Stop7, { offset: "0%", stopColor: YAZAKIA.highlight.color, stopOpacity: YAZAKIA.highlight.from }),
+          /* @__PURE__ */ jsx25(Stop7, { offset: "100%", stopColor: YAZAKIA.highlight.color, stopOpacity: YAZAKIA.highlight.to })
         ] })
       ] }),
-      /* @__PURE__ */ jsx21(Path8, { d: YAZAKIA.lens.d, fill }),
-      /* @__PURE__ */ jsx21(Path8, { d: YAZAKIA.lens.d, fill: `url(#${id}l)` })
+      /* @__PURE__ */ jsx25(Path10, { d: YAZAKIA.lens.d, fill }),
+      /* @__PURE__ */ jsx25(Path10, { d: YAZAKIA.lens.d, fill: `url(#${id}l)` })
     ] }) })
   ] });
 }
 
 // src/native/YororisMark.tsx
-import { View as View18 } from "react-native";
-import Svg10, { Circle as Circle7, Defs as Defs8, LinearGradient as LinearGradient8, Path as Path9, RadialGradient as RadialGradient6, Stop as Stop8 } from "react-native-svg";
+import { View as View22 } from "react-native";
+import Svg12, { Circle as Circle7, Defs as Defs8, LinearGradient as LinearGradient8, Path as Path11, RadialGradient as RadialGradient6, Stop as Stop8 } from "react-native-svg";
 
 // src/marks/yororis-geometry.ts
 var sand = marks.yororis[0][1];
@@ -1822,65 +2608,65 @@ var YORORIS = {
 };
 
 // src/native/YororisMark.tsx
-import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs23 } from "react/jsx-runtime";
 function YororisMark({ size = 48, animated = true, title, neutral }) {
   const { theme } = useTheme();
-  const { Animated: Animated14, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated, 36e3);
+  const { Animated: Animated17, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated, 36e3);
   const id = useSvgId("yrm");
   const viewBox = size < 48 ? YORORIS.croppedViewBox : YORORIS.viewBox;
   const stroke = neutral ?? theme.textMuted;
-  const gradient = /* @__PURE__ */ jsx22(LinearGradient8, { id: `${id}a`, gradientUnits: "userSpaceOnUse", x1: YORORIS.gradient.x1, y1: YORORIS.gradient.y1, x2: YORORIS.gradient.x2, y2: YORORIS.gradient.y2, children: YORORIS.gradient.stops.map(([offset, color]) => /* @__PURE__ */ jsx22(Stop8, { offset, stopColor: color }, offset)) });
+  const gradient = /* @__PURE__ */ jsx26(LinearGradient8, { id: `${id}a`, gradientUnits: "userSpaceOnUse", x1: YORORIS.gradient.x1, y1: YORORIS.gradient.y1, x2: YORORIS.gradient.x2, y2: YORORIS.gradient.y2, children: YORORIS.gradient.stops.map(([offset, color]) => /* @__PURE__ */ jsx26(Stop8, { offset, stopColor: color }, offset)) });
   const fill = `url(#${id}a)`;
-  return /* @__PURE__ */ jsxs19(View18, { style: { width: size, height: size }, ...markA11y(title), children: [
-    /* @__PURE__ */ jsxs19(Svg10, { viewBox, style: layer, children: [
-      /* @__PURE__ */ jsxs19(Defs8, { children: [
-        /* @__PURE__ */ jsxs19(RadialGradient6, { id: `${id}g`, cx: "50%", cy: "50%", r: "50%", children: [
-          /* @__PURE__ */ jsx22(Stop8, { offset: "0%", stopColor: YORORIS.glow.color, stopOpacity: YORORIS.glow.opacity }),
-          /* @__PURE__ */ jsx22(Stop8, { offset: "100%", stopColor: YORORIS.glow.color, stopOpacity: 0 })
+  return /* @__PURE__ */ jsxs23(View22, { style: { width: size, height: size }, ...markA11y(title), children: [
+    /* @__PURE__ */ jsxs23(Svg12, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsxs23(Defs8, { children: [
+        /* @__PURE__ */ jsxs23(RadialGradient6, { id: `${id}g`, cx: "50%", cy: "50%", r: "50%", children: [
+          /* @__PURE__ */ jsx26(Stop8, { offset: "0%", stopColor: YORORIS.glow.color, stopOpacity: YORORIS.glow.opacity }),
+          /* @__PURE__ */ jsx26(Stop8, { offset: "100%", stopColor: YORORIS.glow.color, stopOpacity: 0 })
         ] }),
         gradient
       ] }),
-      size >= 48 ? /* @__PURE__ */ jsx22(Circle7, { cx: YORORIS.center, cy: YORORIS.center, r: 190, fill: `url(#${id}g)` }) : null,
-      /* @__PURE__ */ jsx22(Circle7, { cx: YORORIS.center, cy: YORORIS.center, r: YORORIS.ring.r, stroke, strokeWidth: YORORIS.ring.width, opacity: 0.35, fill: "none" }),
-      /* @__PURE__ */ jsx22(Path9, { d: YORORIS.stem, stroke: fill, strokeWidth: YORORIS.stroke, strokeLinecap: "round", fill: "none" }),
-      YORORIS.leaves.map((d) => /* @__PURE__ */ jsx22(Path9, { d, fill }, d)),
-      /* @__PURE__ */ jsx22(Path9, { d: YORORIS.veins, stroke: YORORIS.vein.color, strokeOpacity: YORORIS.vein.opacity, strokeWidth: YORORIS.vein.width, strokeLinecap: "round", strokeDasharray: YORORIS.vein.dash, fill: "none" })
+      size >= 48 ? /* @__PURE__ */ jsx26(Circle7, { cx: YORORIS.center, cy: YORORIS.center, r: 190, fill: `url(#${id}g)` }) : null,
+      /* @__PURE__ */ jsx26(Circle7, { cx: YORORIS.center, cy: YORORIS.center, r: YORORIS.ring.r, stroke, strokeWidth: YORORIS.ring.width, opacity: 0.35, fill: "none" }),
+      /* @__PURE__ */ jsx26(Path11, { d: YORORIS.stem, stroke: fill, strokeWidth: YORORIS.stroke, strokeLinecap: "round", fill: "none" }),
+      YORORIS.leaves.map((d) => /* @__PURE__ */ jsx26(Path11, { d, fill }, d)),
+      /* @__PURE__ */ jsx26(Path11, { d: YORORIS.veins, stroke: YORORIS.vein.color, strokeOpacity: YORORIS.vein.opacity, strokeWidth: YORORIS.vein.width, strokeLinecap: "round", strokeDasharray: YORORIS.vein.dash, fill: "none" })
     ] }),
-    /* @__PURE__ */ jsx22(Animated14.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsxs19(Svg10, { viewBox, style: layer, children: [
-      /* @__PURE__ */ jsx22(Defs8, { children: gradient }),
-      /* @__PURE__ */ jsx22(Circle7, { cx: YORORIS.center, cy: YORORIS.center, r: YORORIS.orbit.r, stroke, strokeWidth: YORORIS.orbit.width, strokeDasharray: YORORIS.orbit.dash, opacity: 0.6, fill: "none" }),
-      /* @__PURE__ */ jsx22(Circle7, { cx: YORORIS.moment.at[0], cy: YORORIS.moment.at[1], r: YORORIS.moment.r, fill })
+    /* @__PURE__ */ jsx26(Animated17.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsxs23(Svg12, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsx26(Defs8, { children: gradient }),
+      /* @__PURE__ */ jsx26(Circle7, { cx: YORORIS.center, cy: YORORIS.center, r: YORORIS.orbit.r, stroke, strokeWidth: YORORIS.orbit.width, strokeDasharray: YORORIS.orbit.dash, opacity: 0.6, fill: "none" }),
+      /* @__PURE__ */ jsx26(Circle7, { cx: YORORIS.moment.at[0], cy: YORORIS.moment.at[1], r: YORORIS.moment.r, fill })
     ] }) }),
-    /* @__PURE__ */ jsx22(Animated14.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsxs19(Svg10, { viewBox, style: layer, children: [
-      /* @__PURE__ */ jsx22(Defs8, { children: /* @__PURE__ */ jsx22(LinearGradient8, { id: `${id}c`, x1: "50%", y1: "100%", x2: "50%", y2: "0%", children: YORORIS.coreGradient.stops.map(([offset, color]) => /* @__PURE__ */ jsx22(Stop8, { offset, stopColor: color }, offset)) }) }),
-      /* @__PURE__ */ jsx22(Circle7, { cx: YORORIS.core.cx, cy: YORORIS.core.cy, r: YORORIS.core.r, fill: `url(#${id}c)` }),
-      /* @__PURE__ */ jsx22(Circle7, { cx: YORORIS.core.cx, cy: YORORIS.core.cy, r: YORORIS.core.inner, fill: YORORIS.highlight })
+    /* @__PURE__ */ jsx26(Animated17.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsxs23(Svg12, { viewBox, style: layer, children: [
+      /* @__PURE__ */ jsx26(Defs8, { children: /* @__PURE__ */ jsx26(LinearGradient8, { id: `${id}c`, x1: "50%", y1: "100%", x2: "50%", y2: "0%", children: YORORIS.coreGradient.stops.map(([offset, color]) => /* @__PURE__ */ jsx26(Stop8, { offset, stopColor: color }, offset)) }) }),
+      /* @__PURE__ */ jsx26(Circle7, { cx: YORORIS.core.cx, cy: YORORIS.core.cy, r: YORORIS.core.r, fill: `url(#${id}c)` }),
+      /* @__PURE__ */ jsx26(Circle7, { cx: YORORIS.core.cx, cy: YORORIS.core.cy, r: YORORIS.core.inner, fill: YORORIS.highlight })
     ] }) })
   ] });
 }
 
 // src/native/ProductMark.tsx
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 function ProductMark({ id, ...props }) {
-  if (id === "krizaka") return /* @__PURE__ */ jsx23(KrizakaMark, { ...props });
-  if (id === "orazaka") return /* @__PURE__ */ jsx23(OrazakaMark, { ...props });
-  if (id === "yazakia") return /* @__PURE__ */ jsx23(YazakiaMark, { ...props });
-  if (id === "yororis") return /* @__PURE__ */ jsx23(YororisMark, { ...props });
-  return /* @__PURE__ */ jsx23(OrochiaMark, { ...props });
+  if (id === "krizaka") return /* @__PURE__ */ jsx27(KrizakaMark, { ...props });
+  if (id === "orazaka") return /* @__PURE__ */ jsx27(OrazakaMark, { ...props });
+  if (id === "yazakia") return /* @__PURE__ */ jsx27(YazakiaMark, { ...props });
+  if (id === "yororis") return /* @__PURE__ */ jsx27(YororisMark, { ...props });
+  return /* @__PURE__ */ jsx27(OrochiaMark, { ...props });
 }
 
 // src/native/profile-card.tsx
-import * as React16 from "react";
-import { Animated as Animated10, StyleSheet as StyleSheet15, View as View19 } from "react-native";
-import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
+import * as React20 from "react";
+import { Animated as Animated11, StyleSheet as StyleSheet19, View as View23 } from "react-native";
+import { jsx as jsx28, jsxs as jsxs24 } from "react/jsx-runtime";
 var ratioOf = (value, max = 100) => Math.min(1, Math.max(0, value / (max || 1)));
 function Bar({ label, ratio, words, animated, delay }) {
   const { theme } = useTheme();
   const t = useEntrance(animated, delay, 900);
-  const [width, setWidth] = React16.useState(0);
+  const [width, setWidth] = React20.useState(0);
   const translateX = t.interpolate({ inputRange: [0, 1], outputRange: [-width * ratio, 0] });
-  return /* @__PURE__ */ jsx24(
-    View19,
+  return /* @__PURE__ */ jsx28(
+    View23,
     {
       accessible: true,
       role: "meter",
@@ -1890,42 +2676,42 @@ function Bar({ label, ratio, words, animated, delay }) {
       "aria-valuenow": Math.round(ratio * 100),
       "aria-valuetext": words,
       onLayout: (e) => setWidth(e.nativeEvent.layout.width),
-      style: [styles15.track, { backgroundColor: theme.surface3 }],
-      children: /* @__PURE__ */ jsx24(Animated10.View, { style: [styles15.fill, { width: `${ratio * 100}%`, backgroundColor: theme.accent, transform: [{ translateX }] }] })
+      style: [styles19.track, { backgroundColor: theme.surface3 }],
+      children: /* @__PURE__ */ jsx28(Animated11.View, { style: [styles19.fill, { width: `${ratio * 100}%`, backgroundColor: theme.accent, transform: [{ translateX }] }] })
     }
   );
 }
 function ProfileCard({ visual, name, statLabel, value = 100, valueText, stats, caption, children, animated = true, style, ...props }) {
   const { theme, radius: radius3 } = useTheme();
   const ratio = ratioOf(value);
-  return /* @__PURE__ */ jsxs20(View19, { ...props, style: [styles15.root, { backgroundColor: theme.surface1, borderColor: theme.borderSubtle, borderRadius: radius3.xl }, style], children: [
-    /* @__PURE__ */ jsx24(View19, { "aria-hidden": true, style: [styles15.disc, { backgroundColor: theme.surface2, borderColor: theme.accentSoft }], children: visual }),
-    /* @__PURE__ */ jsxs20(View19, { style: styles15.head, children: [
-      /* @__PURE__ */ jsx24(Txt, { variant: "title", style: styles15.name, children: name }),
-      statLabel ? /* @__PURE__ */ jsxs20(Txt, { variant: "caption", tone: "secondary", children: [
+  return /* @__PURE__ */ jsxs24(View23, { ...props, style: [styles19.root, { backgroundColor: theme.surface1, borderColor: theme.borderSubtle, borderRadius: radius3.xl }, style], children: [
+    /* @__PURE__ */ jsx28(View23, { "aria-hidden": true, style: [styles19.disc, { backgroundColor: theme.surface2, borderColor: theme.accentSoft }], children: visual }),
+    /* @__PURE__ */ jsxs24(View23, { style: styles19.head, children: [
+      /* @__PURE__ */ jsx28(Txt, { variant: "title", style: styles19.name, children: name }),
+      statLabel ? /* @__PURE__ */ jsxs24(Txt, { variant: "caption", tone: "secondary", children: [
         statLabel,
         " ",
-        /* @__PURE__ */ jsx24(Txt, { variant: "caption", children: valueText ?? `${Math.round(ratio * 100)} %` })
+        /* @__PURE__ */ jsx28(Txt, { variant: "caption", children: valueText ?? `${Math.round(ratio * 100)} %` })
       ] }) : null
     ] }),
-    statLabel ? /* @__PURE__ */ jsx24(Bar, { label: statLabel, ratio, words: valueText ?? `${Math.round(ratio * 100)} %`, animated, delay: 200 }) : null,
+    statLabel ? /* @__PURE__ */ jsx28(Bar, { label: statLabel, ratio, words: valueText ?? `${Math.round(ratio * 100)} %`, animated, delay: 200 }) : null,
     stats?.map((s, i) => {
       const r = ratioOf(s.value, s.max);
       const words = s.valueText ?? `${Math.round(r * 100)} %`;
-      return /* @__PURE__ */ jsxs20(View19, { style: styles15.stat, children: [
-        /* @__PURE__ */ jsxs20(View19, { "aria-hidden": true, style: styles15.statHead, children: [
-          /* @__PURE__ */ jsx24(Txt, { variant: "caption", tone: "secondary", children: s.label }),
-          /* @__PURE__ */ jsx24(Txt, { variant: "caption", children: words })
+      return /* @__PURE__ */ jsxs24(View23, { style: styles19.stat, children: [
+        /* @__PURE__ */ jsxs24(View23, { "aria-hidden": true, style: styles19.statHead, children: [
+          /* @__PURE__ */ jsx28(Txt, { variant: "caption", tone: "secondary", children: s.label }),
+          /* @__PURE__ */ jsx28(Txt, { variant: "caption", children: words })
         ] }),
-        /* @__PURE__ */ jsx24(Bar, { label: s.label, ratio: r, words, animated, delay: 320 + i * 120 })
+        /* @__PURE__ */ jsx28(Bar, { label: s.label, ratio: r, words, animated, delay: 320 + i * 120 })
       ] }, s.label);
     }),
-    caption ? /* @__PURE__ */ jsx24(Txt, { variant: "caption", tone: "secondary", style: styles15.caption, children: caption }) : null,
-    children ? /* @__PURE__ */ jsx24(View19, { style: styles15.extra, children }) : null
+    caption ? /* @__PURE__ */ jsx28(Txt, { variant: "caption", tone: "secondary", style: styles19.caption, children: caption }) : null,
+    children ? /* @__PURE__ */ jsx28(View23, { style: styles19.extra, children }) : null
   ] });
 }
-var styles15 = StyleSheet15.create({
-  root: { alignItems: "center", gap: 12, padding: 20, borderWidth: StyleSheet15.hairlineWidth },
+var styles19 = StyleSheet19.create({
+  root: { alignItems: "center", gap: 12, padding: 20, borderWidth: StyleSheet19.hairlineWidth },
   disc: { width: 104, height: 104, borderRadius: 52, borderWidth: 1, alignItems: "center", justifyContent: "center", overflow: "hidden" },
   head: { flexDirection: "row", alignSelf: "stretch", alignItems: "center", justifyContent: "space-between", gap: 8 },
   name: { flexShrink: 1, fontSize: 17 },
@@ -1938,11 +2724,11 @@ var styles15 = StyleSheet15.create({
 });
 
 // src/native/progress.tsx
-import * as React17 from "react";
-import { Animated as Animated11, Easing as Easing7, StyleSheet as StyleSheet16, View as View20 } from "react-native";
-import Svg11, { Circle as Circle8, Defs as Defs9, LinearGradient as LinearGradient9, Rect as Rect3, Stop as Stop9 } from "react-native-svg";
-import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
-var AnimatedCircle = Animated11.createAnimatedComponent(Circle8);
+import * as React21 from "react";
+import { Animated as Animated12, Easing as Easing7, StyleSheet as StyleSheet20, View as View24 } from "react-native";
+import Svg13, { Circle as Circle8, Defs as Defs9, LinearGradient as LinearGradient9, Rect as Rect3, Stop as Stop9 } from "react-native-svg";
+import { jsx as jsx29, jsxs as jsxs25 } from "react/jsx-runtime";
+var AnimatedCircle = Animated12.createAnimatedComponent(Circle8);
 var BAR = { sm: 4, md: 8, lg: 12 };
 var RING = { sm: 40, md: 80, lg: 144 };
 var STROKE = { sm: 12, md: 9, lg: 7 };
@@ -1953,21 +2739,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] = React17.useState(() => new Animated11.Value(ratio));
-  const [spin] = React17.useState(() => new Animated11.Value(0));
-  const [track, setTrack] = React17.useState(0);
-  React17.useEffect(() => {
+  const [progress] = React21.useState(() => new Animated12.Value(ratio));
+  const [spin] = React21.useState(() => new Animated12.Value(0));
+  const [track, setTrack] = React21.useState(0);
+  React21.useEffect(() => {
     if (reduce) {
       progress.setValue(ratio);
       return;
     }
-    const animation = Animated11.timing(progress, { toValue: ratio, duration: 700, easing: Easing7.out(Easing7.cubic), useNativeDriver: false });
+    const animation = Animated12.timing(progress, { toValue: ratio, duration: 700, easing: Easing7.out(Easing7.cubic), useNativeDriver: false });
     animation.start();
     return () => animation.stop();
   }, [ratio, reduce, progress]);
-  React17.useEffect(() => {
+  React21.useEffect(() => {
     if (known || reduce) return;
-    const loop = Animated11.loop(Animated11.timing(spin, { toValue: 1, duration: 1200, easing: Easing7.linear, useNativeDriver: true }));
+    const loop = Animated12.loop(Animated12.timing(spin, { toValue: 1, duration: 1200, easing: Easing7.linear, useNativeDriver: true }));
     loop.start();
     return () => {
       loop.stop();
@@ -1983,9 +2769,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__ */ jsx25(Defs9, { children: /* @__PURE__ */ jsxs21(LinearGradient9, { id, x1: "0", y1: "0", x2: "1", y2: variant === "ring" ? "1" : "0", children: [
-    /* @__PURE__ */ jsx25(Stop9, { offset: "0", stopColor: theme.accent }),
-    /* @__PURE__ */ jsx25(Stop9, { offset: "1", stopColor: theme.accent2 })
+  const gradient = /* @__PURE__ */ jsx29(Defs9, { children: /* @__PURE__ */ jsxs25(LinearGradient9, { id, x1: "0", y1: "0", x2: "1", y2: variant === "ring" ? "1" : "0", children: [
+    /* @__PURE__ */ jsx29(Stop9, { offset: "0", stopColor: theme.accent }),
+    /* @__PURE__ */ jsx29(Stop9, { offset: "1", stopColor: theme.accent2 })
   ] }) });
   if (variant === "ring") {
     const side = RING[size];
@@ -1994,11 +2780,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__ */ jsxs21(View20, { ...a11y, style: [styles16.ring, { width: side, height: side }, style], children: [
-      /* @__PURE__ */ jsx25(Animated11.View, { style: [StyleSheet16.absoluteFill, { transform: [{ rotate: known ? "-90deg" : rotate }] }], children: /* @__PURE__ */ jsxs21(Svg11, { width: side, height: side, viewBox: "0 0 100 100", children: [
+    return /* @__PURE__ */ jsxs25(View24, { ...a11y, style: [styles20.ring, { width: side, height: side }, style], children: [
+      /* @__PURE__ */ jsx29(Animated12.View, { style: [StyleSheet20.absoluteFill, { transform: [{ rotate: known ? "-90deg" : rotate }] }], children: /* @__PURE__ */ jsxs25(Svg13, { width: side, height: side, viewBox: "0 0 100 100", children: [
         gradient,
-        /* @__PURE__ */ jsx25(Circle8, { cx: 50, cy: 50, r, fill: "none", stroke: theme.borderDefault, strokeWidth: stroke }),
-        /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx29(Circle8, { cx: 50, cy: 50, r, fill: "none", stroke: theme.borderDefault, strokeWidth: stroke }),
+        /* @__PURE__ */ jsx29(
           AnimatedCircle,
           {
             cx: 50,
@@ -2018,49 +2804,200 @@ 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__ */ jsx25(
-    View20,
+  return /* @__PURE__ */ jsx29(
+    View24,
     {
       ...a11y,
       onLayout: known ? void 0 : (event) => setTrack(event.nativeEvent.layout.width),
-      style: [styles16.bar, { height: BAR[size], backgroundColor: theme.surface3 }, style],
-      children: /* @__PURE__ */ jsx25(Animated11.View, { style: [styles16.fill, { width }, known || reduce ? null : { transform: [{ translateX: translate }] }], children: /* @__PURE__ */ jsxs21(Svg11, { width: "100%", height: "100%", preserveAspectRatio: "none", children: [
+      style: [styles20.bar, { height: BAR[size], backgroundColor: theme.surface3 }, style],
+      children: /* @__PURE__ */ jsx29(Animated12.View, { style: [styles20.fill, { width }, known || reduce ? null : { transform: [{ translateX: translate }] }], children: /* @__PURE__ */ jsxs25(Svg13, { width: "100%", height: "100%", preserveAspectRatio: "none", children: [
         gradient,
-        /* @__PURE__ */ jsx25(Rect3, { x: 0, y: 0, width: "100%", height: "100%", fill: `url(#${id})` })
+        /* @__PURE__ */ jsx29(Rect3, { x: 0, y: 0, width: "100%", height: "100%", fill: `url(#${id})` })
       ] }) })
     }
   );
 }
-var styles16 = StyleSheet16.create({
+var styles20 = StyleSheet20.create({
   ring: { alignItems: "center", justifyContent: "center" },
   bar: { width: "100%", overflow: "hidden", borderRadius: 9999 },
   fill: { height: "100%", overflow: "hidden", borderRadius: 9999 }
 });
 
+// src/native/radio-group.tsx
+import * as React22 from "react";
+import { Animated as Animated13, Pressable as Pressable10, StyleSheet as StyleSheet21, Text as Text14, View as View25 } from "react-native";
+import Svg14, { Path as Path12 } from "react-native-svg";
+import { jsx as jsx30, jsxs as jsxs26 } from "react/jsx-runtime";
+function Check({ color }) {
+  return /* @__PURE__ */ jsx30(Svg14, { width: 12, height: 12, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 3.2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx30(Path12, { d: "M20 6 9 17l-5-5" }) });
+}
+function Key({ option, checked, disabled, onPress }) {
+  const { theme, radius: radius3, motion: motion3 } = useTheme();
+  const [held, setHeld] = React22.useState(false);
+  const [sink] = React22.useState(() => new Animated13.Value(checked ? 1 : 0));
+  const down = checked || held;
+  React22.useEffect(() => {
+    Animated13.timing(sink, { toValue: down ? 1 : 0, duration: motion3.duration.fast, useNativeDriver: true }).start();
+  }, [down, sink, motion3.duration.fast]);
+  return /* @__PURE__ */ jsxs26(
+    Pressable10,
+    {
+      role: "radio",
+      "aria-checked": checked,
+      "aria-label": option.hint ? `${option.label}, ${option.hint}` : option.label,
+      "aria-disabled": disabled || void 0,
+      disabled,
+      onPress,
+      onPressIn: () => setHeld(true),
+      onPressOut: () => setHeld(false),
+      style: [styles21.keySlot, disabled ? styles21.disabled : null],
+      children: [
+        /* @__PURE__ */ jsx30(View25, { style: [styles21.ledge, { borderRadius: radius3.lg, backgroundColor: checked ? theme.accentHover : theme.borderStrong }] }),
+        /* @__PURE__ */ jsxs26(
+          Animated13.View,
+          {
+            style: [
+              styles21.key,
+              {
+                borderRadius: radius3.lg,
+                backgroundColor: checked ? theme.accent : theme.surface2,
+                borderColor: checked ? theme.accent : theme.borderDefault,
+                transform: [{ translateY: sink.interpolate({ inputRange: [0, 1], outputRange: [0, 3] }) }]
+              }
+            ],
+            children: [
+              /* @__PURE__ */ jsx30(Text14, { style: [styles21.keyLabel, { color: checked ? theme.onAccent : theme.textPrimary }], children: option.label }),
+              option.hint ? /* @__PURE__ */ jsx30(Text14, { style: [styles21.keyHint, { color: checked ? theme.onAccent : theme.textSecondary }], children: option.hint }) : null
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function RadioGroup({ label, options, value: valueProp, defaultValue = null, onValueChange, variant = "list", error, disabled, style }) {
+  const { theme, radius: radius3, haptic } = useTheme();
+  const [own, setOwn] = React22.useState(defaultValue);
+  const value = valueProp !== void 0 ? valueProp : own;
+  const pick = (v) => {
+    haptic(variant === "buttons" ? "impact" : "selection");
+    if (valueProp === void 0) setOwn(v);
+    if (v !== value) onValueChange?.(v);
+  };
+  const body = options.map((o) => {
+    const checked = o.value === value;
+    const off = Boolean(disabled || o.disabled);
+    const name = o.description ? `${o.label}, ${o.description}` : o.label;
+    if (variant === "buttons") return /* @__PURE__ */ jsx30(Key, { option: o, checked, disabled: off, onPress: () => pick(o.value) }, o.value);
+    if (variant === "segmented")
+      return /* @__PURE__ */ jsx30(
+        Pressable10,
+        {
+          role: "radio",
+          "aria-checked": checked,
+          "aria-label": o.label,
+          "aria-disabled": off || void 0,
+          disabled: off,
+          onPress: () => pick(o.value),
+          style: [styles21.segment, { borderRadius: radius3.md }, checked ? { backgroundColor: theme.surface0, borderColor: theme.borderDefault } : null, off ? styles21.disabled : null],
+          children: /* @__PURE__ */ jsx30(Text14, { numberOfLines: 1, style: [styles21.segmentLabel, { color: checked ? theme.textPrimary : theme.textSecondary }], children: o.label })
+        },
+        o.value
+      );
+    if (variant === "cards")
+      return /* @__PURE__ */ jsxs26(
+        Pressable10,
+        {
+          role: "radio",
+          "aria-checked": checked,
+          "aria-label": name,
+          "aria-disabled": off || void 0,
+          disabled: off,
+          onPress: () => pick(o.value),
+          style: ({ pressed }) => [
+            styles21.card,
+            { borderRadius: radius3.xl, backgroundColor: checked ? theme.accentSoft : theme.surface1, borderColor: checked ? theme.accent : theme.borderDefault, transform: [{ scale: pressed ? 0.98 : 1 }] },
+            off ? styles21.disabled : null
+          ],
+          children: [
+            /* @__PURE__ */ jsx30(View25, { style: [styles21.cardCheck, { borderColor: checked ? theme.accent : theme.borderStrong, backgroundColor: checked ? theme.accent : theme.surface1 }], children: checked ? /* @__PURE__ */ jsx30(Check, { color: theme.onAccent }) : null }),
+            /* @__PURE__ */ jsx30(Text14, { style: [styles21.cardLabel, { color: theme.textPrimary }], children: o.label }),
+            o.description ? /* @__PURE__ */ jsx30(Text14, { style: [styles21.cardDescription, { color: theme.textSecondary }], children: o.description }) : null
+          ]
+        },
+        o.value
+      );
+    return /* @__PURE__ */ jsxs26(Pressable10, { role: "radio", "aria-checked": checked, "aria-label": name, "aria-disabled": off || void 0, disabled: off, onPress: () => pick(o.value), style: [styles21.row, off ? styles21.disabled : null], children: [
+      /* @__PURE__ */ jsx30(View25, { style: [styles21.dot, { borderColor: checked ? theme.accent : theme.borderStrong, backgroundColor: checked ? theme.accent : theme.surface1 }], children: checked ? /* @__PURE__ */ jsx30(View25, { style: [styles21.dotIn, { backgroundColor: theme.onAccent }] }) : null }),
+      /* @__PURE__ */ jsxs26(View25, { style: styles21.rowText, children: [
+        /* @__PURE__ */ jsx30(Text14, { style: [styles21.rowLabel, { color: theme.textPrimary }], children: o.label }),
+        o.description ? /* @__PURE__ */ jsx30(Text14, { style: [styles21.cardDescription, { color: theme.textSecondary }], children: o.description }) : null
+      ] })
+    ] }, o.value);
+  });
+  return /* @__PURE__ */ jsxs26(View25, { style: [styles21.root, style], children: [
+    /* @__PURE__ */ jsx30(
+      View25,
+      {
+        role: "radiogroup",
+        "aria-label": label,
+        style: variant === "segmented" ? [styles21.track, { borderRadius: radius3.lg, backgroundColor: theme.surface2, borderColor: error ? theme.danger : theme.borderDefault }] : variant === "buttons" ? styles21.keys : variant === "cards" ? styles21.cards : styles21.list,
+        children: body
+      }
+    ),
+    error ? /* @__PURE__ */ jsx30(Text14, { role: "alert", "aria-live": "polite", style: [styles21.error, { color: theme.dangerText }], children: error }) : null
+  ] });
+}
+var styles21 = StyleSheet21.create({
+  root: { gap: 6, alignSelf: "stretch" },
+  list: { gap: 2 },
+  row: { flexDirection: "row", alignItems: "center", gap: 12, minHeight: 44 },
+  rowText: { flex: 1, gap: 1 },
+  rowLabel: { fontSize: 15, lineHeight: 20 },
+  dot: { width: 22, height: 22, borderRadius: 11, borderWidth: 1.5, alignItems: "center", justifyContent: "center" },
+  dotIn: { width: 8, height: 8, borderRadius: 4 },
+  cards: { flexDirection: "row", flexWrap: "wrap", gap: 10 },
+  card: { flexGrow: 1, flexBasis: 140, minHeight: 72, padding: 14, paddingRight: 40, gap: 2, borderWidth: 1 },
+  cardCheck: { position: "absolute", right: 12, top: 12, width: 20, height: 20, borderRadius: 10, borderWidth: 1.5, alignItems: "center", justifyContent: "center" },
+  cardLabel: { fontSize: 16, fontWeight: "700" },
+  cardDescription: { fontSize: 12, lineHeight: 16 },
+  keys: { flexDirection: "row", flexWrap: "wrap", gap: 10, paddingBottom: 4 },
+  keySlot: { minWidth: 64, minHeight: 52 },
+  ledge: { position: "absolute", left: 0, right: 0, top: 4, bottom: -4 },
+  key: { minHeight: 48, paddingHorizontal: 16, paddingVertical: 8, alignItems: "center", justifyContent: "center", gap: 1, borderWidth: 1 },
+  keyLabel: { fontSize: 15, fontWeight: "700" },
+  keyHint: { fontSize: 11, fontWeight: "500" },
+  track: { flexDirection: "row", padding: 3, gap: 3, borderWidth: StyleSheet21.hairlineWidth, height: 42 },
+  segment: { flex: 1, alignItems: "center", justifyContent: "center", paddingHorizontal: 8, borderWidth: StyleSheet21.hairlineWidth, borderColor: "transparent" },
+  segmentLabel: { fontSize: 13, fontWeight: "600" },
+  error: { fontSize: 12, lineHeight: 16 },
+  disabled: { opacity: 0.4 }
+});
+
 // src/native/search-field.tsx
-import * as React18 from "react";
-import { Pressable as Pressable6, StyleSheet as StyleSheet17, TextInput as TextInput3, View as View21 } from "react-native";
-import Svg12, { Circle as Circle9, Path as Path10 } from "react-native-svg";
-import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
+import * as React23 from "react";
+import { Pressable as Pressable11, StyleSheet as StyleSheet22, TextInput as TextInput4, View as View26 } from "react-native";
+import Svg15, { Circle as Circle9, Path as Path13 } from "react-native-svg";
+import { jsx as jsx31, jsxs as jsxs27 } 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] = React18.useState(defaultValue);
+  const [own, setOwn] = React23.useState(defaultValue);
   const query = value ?? own;
-  const timer2 = React18.useRef(void 0);
-  React18.useEffect(() => () => clearTimeout(timer2.current), []);
+  const timer2 = React23.useRef(void 0);
+  React23.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__ */ jsxs22(View21, { style: [styles17.frame, { borderRadius: radius3.md, borderColor: theme.borderDefault, backgroundColor: theme.surface2 }, style], children: [
-    /* @__PURE__ */ jsxs22(Svg12, { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", stroke: theme.textSecondary, strokeWidth: 2, strokeLinecap: "round", "aria-hidden": true, children: [
-      /* @__PURE__ */ jsx26(Circle9, { cx: 11, cy: 11, r: 7 }),
-      /* @__PURE__ */ jsx26(Path10, { d: "m20 20-3.5-3.5" })
+  return /* @__PURE__ */ jsxs27(View26, { style: [styles22.frame, { borderRadius: radius3.md, borderColor: theme.borderDefault, backgroundColor: theme.surface2 }, style], children: [
+    /* @__PURE__ */ jsxs27(Svg15, { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", stroke: theme.textSecondary, strokeWidth: 2, strokeLinecap: "round", "aria-hidden": true, children: [
+      /* @__PURE__ */ jsx31(Circle9, { cx: 11, cy: 11, r: 7 }),
+      /* @__PURE__ */ jsx31(Path13, { d: "m20 20-3.5-3.5" })
     ] }),
-    /* @__PURE__ */ jsx26(
-      TextInput3,
+    /* @__PURE__ */ jsx31(
+      TextInput4,
       {
         role: "searchbox",
         "aria-label": label,
@@ -2077,34 +3014,34 @@ function SearchField({ label, value, defaultValue = "", onValueChange, onSearch,
           onSearch?.(query);
           onSubmit?.(query);
         },
-        style: [styles17.input, { color: theme.textPrimary }],
+        style: [styles22.input, { color: theme.textPrimary }],
         ...props
       }
     ),
-    query ? /* @__PURE__ */ jsx26(Pressable6, { role: "button", "aria-label": clearLabel, hitSlop: 10, onPress: () => change(""), style: styles17.clear, children: /* @__PURE__ */ jsx26(Svg12, { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: theme.textSecondary, strokeWidth: 2.4, strokeLinecap: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx26(Path10, { d: "M18 6 6 18M6 6l12 12" }) }) }) : null
+    query ? /* @__PURE__ */ jsx31(Pressable11, { role: "button", "aria-label": clearLabel, hitSlop: 10, onPress: () => change(""), style: styles22.clear, children: /* @__PURE__ */ jsx31(Svg15, { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: theme.textSecondary, strokeWidth: 2.4, strokeLinecap: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx31(Path13, { d: "M18 6 6 18M6 6l12 12" }) }) }) : null
   ] });
 }
-var styles17 = StyleSheet17.create({
-  frame: { flexDirection: "row", alignItems: "center", gap: 8, height: 44, paddingLeft: 12, paddingRight: 6, borderWidth: StyleSheet17.hairlineWidth },
+var styles22 = StyleSheet22.create({
+  frame: { flexDirection: "row", alignItems: "center", gap: 8, height: 44, paddingLeft: 12, paddingRight: 6, borderWidth: StyleSheet22.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 Pressable7, StyleSheet as StyleSheet18, Text as Text10, View as View22 } from "react-native";
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { Pressable as Pressable12, StyleSheet as StyleSheet23, Text as Text15, View as View27 } from "react-native";
+import { jsx as jsx32 } from "react/jsx-runtime";
 function Segmented({ options, value, onValueChange, size = "md", "aria-label": label, style }) {
   const { theme, radius: radius3 } = useTheme();
-  return /* @__PURE__ */ jsx27(
-    View22,
+  return /* @__PURE__ */ jsx32(
+    View27,
     {
       role: "tablist",
       "aria-label": label,
-      style: [styles18.track, { backgroundColor: theme.surface2, borderColor: theme.borderSubtle, borderRadius: radius3.md, height: size === "sm" ? 32 : 40 }, style],
+      style: [styles23.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__ */ jsx27(
-          Pressable7,
+        return /* @__PURE__ */ jsx32(
+          Pressable12,
           {
             role: "tab",
             "aria-selected": selected,
@@ -2114,12 +3051,12 @@ function Segmented({ options, value, onValueChange, size = "md", "aria-label": l
               if (!selected) onValueChange(option.value);
             },
             style: [
-              styles18.segment,
+              styles23.segment,
               { borderRadius: radius3.sm },
               selected ? { backgroundColor: theme.surface0, borderColor: theme.borderDefault } : null,
-              option.disabled ? styles18.disabled : null
+              option.disabled ? styles23.disabled : null
             ],
-            children: /* @__PURE__ */ jsx27(Text10, { numberOfLines: 1, style: [styles18.label, { color: selected ? theme.textPrimary : theme.textSecondary, fontSize: size === "sm" ? 12 : 13 }], children: option.label })
+            children: /* @__PURE__ */ jsx32(Text15, { numberOfLines: 1, style: [styles23.label, { color: selected ? theme.textPrimary : theme.textSecondary, fontSize: size === "sm" ? 12 : 13 }], children: option.label })
           },
           option.value
         );
@@ -2127,17 +3064,17 @@ function Segmented({ options, value, onValueChange, size = "md", "aria-label": l
     }
   );
 }
-var styles18 = StyleSheet18.create({
-  track: { flexDirection: "row", padding: 3, gap: 3, borderWidth: StyleSheet18.hairlineWidth },
-  segment: { flex: 1, alignItems: "center", justifyContent: "center", paddingHorizontal: 8, borderWidth: StyleSheet18.hairlineWidth, borderColor: "transparent" },
+var styles23 = StyleSheet23.create({
+  track: { flexDirection: "row", padding: 3, gap: 3, borderWidth: StyleSheet23.hairlineWidth },
+  segment: { flex: 1, alignItems: "center", justifyContent: "center", paddingHorizontal: 8, borderWidth: StyleSheet23.hairlineWidth, borderColor: "transparent" },
   label: { fontWeight: "600" },
   disabled: { opacity: 0.4 }
 });
 
 // src/native/skeleton.tsx
-import * as React19 from "react";
-import { Animated as Animated12 } from "react-native";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import * as React24 from "react";
+import { Animated as Animated14 } from "react-native";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var SHAPE = {
   text: { width: "100%", height: 12, radius: 4 },
   circle: { width: 40, height: 40, radius: 9999 },
@@ -2146,13 +3083,13 @@ var SHAPE = {
 function Skeleton({ shape = "text", width, height, style, testID }) {
   const { theme } = useTheme();
   const reduce = useReducedMotion();
-  const [opacity] = React19.useState(() => new Animated12.Value(1));
-  React19.useEffect(() => {
+  const [opacity] = React24.useState(() => new Animated14.Value(1));
+  React24.useEffect(() => {
     if (reduce) return;
-    const loop = Animated12.loop(
-      Animated12.sequence([
-        Animated12.timing(opacity, { toValue: 0.5, duration: 900, useNativeDriver: true }),
-        Animated12.timing(opacity, { toValue: 1, duration: 900, useNativeDriver: true })
+    const loop = Animated14.loop(
+      Animated14.sequence([
+        Animated14.timing(opacity, { toValue: 0.5, duration: 900, useNativeDriver: true }),
+        Animated14.timing(opacity, { toValue: 1, duration: 900, useNativeDriver: true })
       ])
     );
     loop.start();
@@ -2163,8 +3100,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__ */ jsx28(
-    Animated12.View,
+  return /* @__PURE__ */ jsx33(
+    Animated14.View,
     {
       testID,
       "aria-hidden": true,
@@ -2176,12 +3113,187 @@ function Skeleton({ shape = "text", width, height, style, testID }) {
   );
 }
 
+// src/native/slider.tsx
+import * as React25 from "react";
+import { PanResponder, StyleSheet as StyleSheet24, Text as Text16, View as View28 } from "react-native";
+import Svg16, { Defs as Defs10, LinearGradient as LinearGradient10, Rect as Rect4, Stop as Stop10 } from "react-native-svg";
+import { jsx as jsx34, jsxs as jsxs28 } from "react/jsx-runtime";
+var THUMB = 26;
+var toArray = (v) => v === void 0 ? void 0 : typeof v === "number" ? [v] : [...v];
+function Slider({
+  label,
+  thumbLabels,
+  value,
+  defaultValue,
+  onValueChange,
+  onValueCommit,
+  min = 0,
+  max = 100,
+  step = 1,
+  formatValue = String,
+  showLabel,
+  floatingValue,
+  ticks,
+  marks: marks2,
+  tone: tone2 = "gradient",
+  orientation = "horizontal",
+  disabled,
+  style
+}) {
+  const { theme, radius: radius3, haptic } = useTheme();
+  const range = Array.isArray(value ?? defaultValue);
+  const vertical = orientation === "vertical";
+  const [inner, setInner] = React25.useState(() => toArray(defaultValue) ?? [min]);
+  const current = toArray(value) ?? inner;
+  const [length, setLength] = React25.useState(0);
+  const [dragging, setDragging] = React25.useState(null);
+  const gradientId = useSvgId("kzs");
+  const out = (next) => range ? [next[0], next[1]] : next[0];
+  const snap = (v) => Math.min(max, Math.max(min, Math.round((v - min) / step) * step + min));
+  const pct = (v) => (v - min) / (max - min || 1);
+  const live = React25.useRef({ current, length, vertical, disabled });
+  React25.useLayoutEffect(() => {
+    live.current = { current, length, vertical, disabled };
+  });
+  const active = React25.useRef(0);
+  const start = React25.useRef(0);
+  const set = (next) => {
+    if (value === void 0) setInner(next);
+    onValueChange?.(out(next));
+  };
+  const move = (thumb, to) => {
+    const now = live.current.current;
+    let v = snap(to);
+    if (now.length === 2) v = thumb === 0 ? Math.min(v, now[1]) : Math.max(v, now[0]);
+    if (v === now[thumb]) return;
+    haptic("selection");
+    const next = [...now];
+    next[thumb] = v;
+    set(next);
+  };
+  const at = (position) => {
+    const { length: l, vertical: vert } = live.current;
+    const p = Math.min(1, Math.max(0, (vert ? l + THUMB / 2 - position : position - THUMB / 2) / (l || 1)));
+    return min + p * (max - min);
+  };
+  const commit = () => onValueCommit?.(out(live.current.current));
+  const handlers = React25.useRef({ move, at, commit });
+  React25.useLayoutEffect(() => {
+    handlers.current = { move, at, commit };
+  });
+  const [responder] = React25.useState(
+    () => PanResponder.create({
+      onStartShouldSetPanResponder: () => !live.current.disabled,
+      onMoveShouldSetPanResponder: () => !live.current.disabled,
+      onPanResponderTerminationRequest: () => false,
+      onPanResponderGrant: (e) => {
+        const pos = live.current.vertical ? e.nativeEvent.locationY : e.nativeEvent.locationX;
+        start.current = pos;
+        const target = handlers.current.at(pos);
+        const now = live.current.current;
+        active.current = now.length === 2 && Math.abs(target - now[1]) < Math.abs(target - now[0]) ? 1 : 0;
+        setDragging(active.current);
+        handlers.current.move(active.current, target);
+      },
+      onPanResponderMove: (_, g) => handlers.current.move(active.current, handlers.current.at(start.current + (live.current.vertical ? g.dy : g.dx))),
+      onPanResponderRelease: () => {
+        setDragging(null);
+        handlers.current.commit();
+      },
+      onPanResponderTerminate: () => setDragging(null)
+    })
+  );
+  const lo = range ? Math.min(...current) : min;
+  const hi = range ? Math.max(...current) : current[0];
+  const tickValues = ticks === true ? (max - min) / step <= 40 ? Array.from({ length: Math.round((max - min) / step) + 1 }, (_, i) => min + i * step) : [] : ticks ? [...ticks] : [];
+  const along = (p) => vertical ? { bottom: p * length } : { left: p * length };
+  const onLayout = (e) => setLength(vertical ? e.nativeEvent.layout.height : e.nativeEvent.layout.width);
+  const fill = vertical ? { bottom: pct(lo) * length, height: (pct(hi) - pct(lo)) * length, left: 0, right: 0 } : { left: pct(lo) * length, width: (pct(hi) - pct(lo)) * length, top: 0, bottom: 0 };
+  return /* @__PURE__ */ jsxs28(View28, { style: [styles24.root, vertical ? styles24.rootVertical : null, disabled ? styles24.disabled : null, style], children: [
+    showLabel ? /* @__PURE__ */ jsxs28(View28, { style: styles24.header, children: [
+      /* @__PURE__ */ jsx34(Text16, { style: [styles24.label, { color: theme.textSecondary }], children: label }),
+      /* @__PURE__ */ jsx34(Text16, { "aria-hidden": true, style: [styles24.value, { color: theme.textSecondary }], children: current.map(formatValue).join(" \u2013 ") })
+    ] }) : null,
+    /* @__PURE__ */ jsxs28(View28, { ...responder.panHandlers, style: vertical ? styles24.controlVertical : styles24.control, children: [
+      /* @__PURE__ */ jsxs28(View28, { onLayout, pointerEvents: "none", style: [vertical ? styles24.trackVertical : styles24.track, { borderRadius: radius3.full, backgroundColor: theme.surface3 }], children: [
+        /* @__PURE__ */ jsx34(View28, { style: [styles24.fill, fill, { borderRadius: radius3.full, overflow: "hidden", backgroundColor: theme.accent }], children: tone2 === "gradient" ? /* @__PURE__ */ jsxs28(Svg16, { width: "100%", height: "100%", "aria-hidden": true, children: [
+          /* @__PURE__ */ jsx34(Defs10, { children: /* @__PURE__ */ jsxs28(LinearGradient10, { id: gradientId, x1: "0", y1: vertical ? "1" : "0", x2: vertical ? "0" : "1", y2: "0", children: [
+            /* @__PURE__ */ jsx34(Stop10, { offset: "0", stopColor: theme.accent }),
+            /* @__PURE__ */ jsx34(Stop10, { offset: "1", stopColor: theme.accent2 })
+          ] }) }),
+          /* @__PURE__ */ jsx34(Rect4, { width: "100%", height: "100%", fill: `url(#${gradientId})` })
+        ] }) : null }),
+        tickValues.map((t) => /* @__PURE__ */ jsx34(View28, { style: [vertical ? styles24.tickVertical : styles24.tick, along(pct(t)), { backgroundColor: t > lo && t < hi ? theme.onAccent : theme.borderStrong }] }, t))
+      ] }),
+      current.map((v, i) => /* @__PURE__ */ jsx34(
+        View28,
+        {
+          accessible: true,
+          role: "slider",
+          "aria-label": range ? thumbLabels?.[i] ?? label : label,
+          "aria-valuenow": v,
+          "aria-valuemin": min,
+          "aria-valuemax": max,
+          "aria-valuetext": formatValue(v),
+          "aria-disabled": disabled || void 0,
+          accessibilityActions: [{ name: "increment" }, { name: "decrement" }],
+          onAccessibilityAction: (e) => {
+            const next = snap(v + (e.nativeEvent.actionName === "increment" ? step : -step));
+            move(i, next);
+            const values = [...current];
+            values[i] = next;
+            onValueCommit?.(out(values));
+          },
+          pointerEvents: "none",
+          style: [styles24.thumb, vertical ? { bottom: pct(v) * length, left: (44 - THUMB) / 2, marginLeft: 0, marginTop: 0 } : { left: pct(v) * length - THUMB / 2, top: 0 }, { borderColor: theme.accent, backgroundColor: theme.textOnMedia, shadowColor: theme.scrimStrong }],
+          children: floatingValue === "always" || floatingValue && dragging === i ? /* @__PURE__ */ jsx34(View28, { "aria-hidden": true, style: [vertical ? styles24.bubbleVertical : styles24.bubble, { backgroundColor: theme.textPrimary, borderRadius: radius3.md }], children: /* @__PURE__ */ jsx34(Text16, { style: [styles24.bubbleText, { color: theme.surface0 }], children: formatValue(v) }) }) : null
+        },
+        i
+      ))
+    ] }),
+    marks2?.length && !vertical ? /* @__PURE__ */ jsx34(View28, { "aria-hidden": true, style: styles24.marks, children: marks2.map((m) => /* @__PURE__ */ jsx34(Text16, { style: [styles24.mark, { left: pct(m.value) * length, color: theme.textSecondary, transform: [{ translateX: m.value === min ? 0 : m.value === max ? -40 : -20 }], textAlign: m.value === min ? "left" : m.value === max ? "right" : "center" }], children: m.label }, m.value)) }) : null
+  ] });
+}
+var styles24 = StyleSheet24.create({
+  root: { gap: 8, alignSelf: "stretch" },
+  rootVertical: { alignSelf: "flex-start", alignItems: "center" },
+  header: { flexDirection: "row", justifyContent: "space-between", alignItems: "baseline", gap: 12 },
+  label: { fontSize: 12, fontWeight: "600" },
+  value: { fontSize: 12, fontVariant: ["tabular-nums"] },
+  control: { height: 44, justifyContent: "center", paddingHorizontal: THUMB / 2 },
+  controlVertical: { flex: 1, minHeight: 160, width: 44, alignItems: "center", paddingVertical: THUMB / 2 },
+  track: { height: 6 },
+  trackVertical: { width: 6, flex: 1 },
+  fill: { position: "absolute" },
+  tick: { position: "absolute", top: 1, width: 1, height: 4, marginLeft: -0.5 },
+  tickVertical: { position: "absolute", left: 1, height: 1, width: 4, marginBottom: -0.5 },
+  thumb: {
+    position: "absolute",
+    width: THUMB,
+    height: THUMB,
+    borderRadius: THUMB / 2,
+    borderWidth: 2.5,
+    marginLeft: THUMB / 2,
+    marginTop: (44 - THUMB) / 2,
+    shadowOpacity: 0.3,
+    shadowRadius: 4,
+    shadowOffset: { width: 0, height: 2 },
+    elevation: 3
+  },
+  bubble: { position: "absolute", bottom: THUMB + 6, left: -17, minWidth: 56, paddingHorizontal: 8, paddingVertical: 4, alignItems: "center" },
+  bubbleVertical: { position: "absolute", left: THUMB + 8, top: -2, minWidth: 48, paddingHorizontal: 8, paddingVertical: 4, alignItems: "center" },
+  bubbleText: { fontSize: 12, fontWeight: "700", fontVariant: ["tabular-nums"] },
+  marks: { height: 16, marginHorizontal: THUMB / 2 },
+  mark: { position: "absolute", width: 40, fontSize: 11, fontWeight: "500" },
+  disabled: { opacity: 0.4 }
+});
+
 // src/native/spinner.tsx
 import { ActivityIndicator as ActivityIndicator2 } from "react-native";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 function Spinner({ label, size = "md", ...props }) {
   const { theme } = useTheme();
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx35(
     ActivityIndicator2,
     {
       accessible: true,
@@ -2195,10 +3307,79 @@ function Spinner({ label, size = "md", ...props }) {
   );
 }
 
+// src/native/switch.tsx
+import * as React26 from "react";
+import { Animated as Animated15, Pressable as Pressable13, StyleSheet as StyleSheet25, Text as Text17, View as View29 } from "react-native";
+import { jsx as jsx36, jsxs as jsxs29 } from "react/jsx-runtime";
+var SIZES = { sm: { w: 40, h: 24, knob: 18 }, md: { w: 52, h: 32, knob: 26 } };
+function Switch({ label, checked, defaultChecked = false, onCheckedChange, description, showLabel, size = "md", error, disabled, style }) {
+  const { theme, motion: motion3, haptic } = useTheme();
+  const [own, setOwn] = React26.useState(defaultChecked);
+  const on = checked ?? own;
+  const d = SIZES[size];
+  const travel = d.w - d.knob - (d.h - d.knob);
+  const [x] = React26.useState(() => new Animated15.Value(on ? 1 : 0));
+  React26.useEffect(() => {
+    Animated15.timing(x, { toValue: on ? 1 : 0, duration: motion3.duration.base, useNativeDriver: true }).start();
+  }, [on, x, motion3.duration.base]);
+  const toggle = () => {
+    haptic("selection");
+    if (checked === void 0) setOwn(!on);
+    onCheckedChange?.(!on);
+  };
+  const track = /* @__PURE__ */ jsx36(View29, { style: [styles25.track, { width: d.w, height: d.h, borderRadius: d.h / 2, backgroundColor: on ? theme.accent : theme.surface3, borderColor: error ? theme.danger : on ? theme.accent : theme.borderDefault }], children: /* @__PURE__ */ jsx36(
+    Animated15.View,
+    {
+      style: [
+        styles25.knob,
+        {
+          width: d.knob,
+          height: d.knob,
+          borderRadius: d.knob / 2,
+          backgroundColor: theme.textOnMedia,
+          shadowColor: theme.scrimStrong,
+          transform: [{ translateX: x.interpolate({ inputRange: [0, 1], outputRange: [0, travel] }) }]
+        }
+      ]
+    }
+  ) });
+  const a11y = {
+    role: "switch",
+    "aria-checked": on,
+    "aria-label": label,
+    "aria-disabled": disabled || void 0,
+    accessibilityHint: error ?? description,
+    disabled,
+    onPress: toggle
+  };
+  if (!showLabel)
+    return /* @__PURE__ */ jsx36(Pressable13, { ...a11y, hitSlop: 8, style: [disabled ? styles25.disabled : null, style], children: track });
+  return /* @__PURE__ */ jsxs29(View29, { style: [styles25.root, style], children: [
+    /* @__PURE__ */ jsxs29(Pressable13, { ...a11y, style: [styles25.row, disabled ? styles25.disabled : null], children: [
+      /* @__PURE__ */ jsxs29(View29, { style: styles25.text, children: [
+        /* @__PURE__ */ jsx36(Text17, { style: [styles25.label, { color: theme.textPrimary }], children: label }),
+        description ? /* @__PURE__ */ jsx36(Text17, { style: [styles25.description, { color: theme.textSecondary }], children: description }) : null
+      ] }),
+      track
+    ] }),
+    error ? /* @__PURE__ */ jsx36(Text17, { role: "alert", "aria-live": "polite", style: [styles25.description, { color: theme.dangerText }], children: error }) : null
+  ] });
+}
+var styles25 = StyleSheet25.create({
+  root: { gap: 2, alignSelf: "stretch" },
+  row: { flexDirection: "row", alignItems: "center", gap: 16, minHeight: 48 },
+  text: { flex: 1, gap: 2 },
+  label: { fontSize: 15, lineHeight: 20, fontWeight: "500" },
+  description: { fontSize: 12, lineHeight: 16 },
+  track: { justifyContent: "center", paddingHorizontal: 2, borderWidth: 1 },
+  knob: { shadowOpacity: 0.25, shadowRadius: 3, shadowOffset: { width: 0, height: 1 }, elevation: 2 },
+  disabled: { opacity: 0.4 }
+});
+
 // src/native/toast.tsx
-import * as React20 from "react";
-import { AccessibilityInfo as AccessibilityInfo8, Animated as Animated13, Pressable as Pressable8, StyleSheet as StyleSheet19, Text as Text11, View as View23 } from "react-native";
-import { Fragment as Fragment3, jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
+import * as React27 from "react";
+import { AccessibilityInfo as AccessibilityInfo8, Animated as Animated16, Pressable as Pressable14, StyleSheet as StyleSheet26, Text as Text18, View as View30 } from "react-native";
+import { Fragment as Fragment4, jsx as jsx37, jsxs as jsxs30 } from "react/jsx-runtime";
 var items = [];
 var listeners2 = /* @__PURE__ */ new Set();
 var counter = 0;
@@ -2233,76 +3414,76 @@ var toast = Object.assign(show, {
 function ToastView({ item, closeLabel, duration }) {
   const { theme, radius: radius3 } = useTheme();
   const reduce = useReducedMotion();
-  const [enter] = React20.useState(() => new Animated13.Value(reduce ? 1 : 0));
-  React20.useEffect(() => {
+  const [enter] = React27.useState(() => new Animated16.Value(reduce ? 1 : 0));
+  React27.useEffect(() => {
     if (reduce) enter.setValue(1);
-    else Animated13.timing(enter, { toValue: 1, duration: 220, useNativeDriver: true }).start();
+    else Animated16.timing(enter, { toValue: 1, duration: 220, useNativeDriver: true }).start();
   }, [enter, reduce]);
-  React20.useEffect(() => {
+  React27.useEffect(() => {
     AccessibilityInfo8.announceForAccessibility(item.description ? `${item.title}. ${item.description}` : item.title);
   }, [item.title, item.description]);
   const ms = item.duration ?? duration;
-  React20.useEffect(() => {
+  React27.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__ */ jsxs23(Fragment3, { children: [
-    item.icon ? /* @__PURE__ */ jsx30(View23, { "aria-hidden": true, children: item.icon }) : null,
-    /* @__PURE__ */ jsxs23(View23, { style: styles19.content, children: [
-      /* @__PURE__ */ jsx30(Txt, { variant: "label", numberOfLines: 2, children: item.title }),
-      item.description ? /* @__PURE__ */ jsx30(Txt, { variant: "caption", tone: "secondary", numberOfLines: 3, children: item.description }) : null
+  const text = /* @__PURE__ */ jsxs30(Fragment4, { children: [
+    item.icon ? /* @__PURE__ */ jsx37(View30, { "aria-hidden": true, children: item.icon }) : null,
+    /* @__PURE__ */ jsxs30(View30, { style: styles26.content, children: [
+      /* @__PURE__ */ jsx37(Txt, { variant: "label", numberOfLines: 2, children: item.title }),
+      item.description ? /* @__PURE__ */ jsx37(Txt, { variant: "caption", tone: "secondary", numberOfLines: 3, children: item.description }) : null
     ] })
   ] });
-  const body = /* @__PURE__ */ jsxs23(Fragment3, { children: [
-    item.onPress ? /* @__PURE__ */ jsx30(
-      Pressable8,
+  const body = /* @__PURE__ */ jsxs30(Fragment4, { children: [
+    item.onPress ? /* @__PURE__ */ jsx37(
+      Pressable14,
       {
         role: "button",
         onPress: () => {
           item.onPress?.();
           dismiss(item.id);
         },
-        style: ({ pressed }) => [styles19.main, { opacity: pressed ? 0.8 : 1 }],
+        style: ({ pressed }) => [styles26.main, { opacity: pressed ? 0.8 : 1 }],
         children: text
       }
-    ) : /* @__PURE__ */ jsx30(View23, { style: styles19.main, children: text }),
-    item.action ? /* @__PURE__ */ jsx30(
-      Pressable8,
+    ) : /* @__PURE__ */ jsx37(View30, { style: styles26.main, children: text }),
+    item.action ? /* @__PURE__ */ jsx37(
+      Pressable14,
       {
         role: "button",
         onPress: () => {
           item.action?.onPress();
           dismiss(item.id);
         },
-        style: [styles19.action, { backgroundColor: theme.accent, borderRadius: radius3.sm }],
-        children: /* @__PURE__ */ jsx30(Text11, { style: [styles19.actionLabel, { color: theme.onAccent }], children: item.action.label })
+        style: [styles26.action, { backgroundColor: theme.accent, borderRadius: radius3.sm }],
+        children: /* @__PURE__ */ jsx37(Text18, { style: [styles26.actionLabel, { color: theme.onAccent }], children: item.action.label })
       }
     ) : null,
-    /* @__PURE__ */ jsx30(Pressable8, { role: "button", "aria-label": closeLabel, hitSlop: 10, onPress: () => dismiss(item.id), style: styles19.close, children: /* @__PURE__ */ jsx30(Text11, { style: [styles19.cross, { color: theme.textSecondary }], children: "\xD7" }) })
+    /* @__PURE__ */ jsx37(Pressable14, { role: "button", "aria-label": closeLabel, hitSlop: 10, onPress: () => dismiss(item.id), style: styles26.close, children: /* @__PURE__ */ jsx37(Text18, { style: [styles26.cross, { color: theme.textSecondary }], children: "\xD7" }) })
   ] });
   const frame = [
-    styles19.toast,
+    styles26.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__ */ jsx30(Animated13.View, { "aria-live": "polite", style: motion3, children: /* @__PURE__ */ jsx30(View23, { style: frame, children: body }) });
+  return /* @__PURE__ */ jsx37(Animated16.View, { "aria-live": "polite", style: motion3, children: /* @__PURE__ */ jsx37(View30, { style: frame, children: body }) });
 }
 function Toaster({ closeLabel, position = "top", offset = 12, duration = 6e3, max = 3 }) {
-  const all = React20.useSyncExternalStore(subscribe2, snapshot, snapshot);
+  const all = React27.useSyncExternalStore(subscribe2, snapshot, snapshot);
   const shown = all.slice(-max);
   if (shown.length === 0) return null;
-  return /* @__PURE__ */ jsx30(View23, { pointerEvents: "box-none", style: [styles19.stack, position === "top" ? { top: offset } : { bottom: offset }], children: (position === "top" ? shown : [...shown].reverse()).map((item) => /* @__PURE__ */ jsx30(ToastView, { item, closeLabel, duration }, item.id)) });
+  return /* @__PURE__ */ jsx37(View30, { pointerEvents: "box-none", style: [styles26.stack, position === "top" ? { top: offset } : { bottom: offset }], children: (position === "top" ? shown : [...shown].reverse()).map((item) => /* @__PURE__ */ jsx37(ToastView, { item, closeLabel, duration }, item.id)) });
 }
-var styles19 = StyleSheet19.create({
+var styles26 = StyleSheet26.create({
   stack: { position: "absolute", left: 12, right: 12, gap: 8, zIndex: 100 },
   toast: {
     flexDirection: "row",
     alignItems: "center",
     gap: 10,
     padding: 12,
-    borderWidth: StyleSheet19.hairlineWidth,
+    borderWidth: StyleSheet26.hairlineWidth,
     borderLeftWidth: 4,
     shadowOpacity: 0.3,
     shadowRadius: 16,
@@ -2322,6 +3503,7 @@ export {
   AvatarRoot,
   Badge,
   Button,
+  Calendar,
   Card,
   CardBody,
   CardDescription,
@@ -2333,8 +3515,11 @@ export {
   CardTitle,
   Checkbox,
   Chip,
+  Combobox,
   Countdown,
   DateField,
+  DateWheel,
+  DayStrip,
   EmptyState,
   ErrorState,
   GoalGauge,
@@ -2343,6 +3528,7 @@ export {
   LoadingState,
   Mascot,
   MascotState,
+  MonthPicker,
   OrazakaMark,
   OrochiaMark,
   Pagination,
@@ -2350,29 +3536,50 @@ export {
   ProductMark,
   ProfileCard,
   Progress,
+  RadioGroup,
   SearchField,
   Segmented,
+  Select,
+  Sheet,
   Skeleton,
+  Slider,
   Spinner,
   SuccessState,
+  Switch,
   TextField,
   ThemeProvider,
+  TimePicker,
   Toaster,
   Txt,
   WelcomeState,
+  Wheel,
+  WheelDivider,
+  WheelPicker,
   YazakiaMark,
   YororisMark,
+  addDays,
+  addMonths,
+  ageOn,
   alpha,
+  calendarLabels,
+  comboboxLabels,
   composeDate,
   dateFieldLabels,
   datePartsOrder,
+  daysInMonth,
+  formatTime,
   isRealDate,
   latestBirthDate,
+  monthNames,
   splitDuration,
   textStyles,
+  timeSlots,
+  timeToMinutes,
   toast,
+  todayIso,
   useCountdown,
   useReducedMotion,
-  useTheme
+  useTheme,
+  uses12Hours
 };
 //# sourceMappingURL=native.js.map