@krizaka/ui 3.8.0 → 3.10.0

package/dist/native.js

@@ -519,22 +519,22 @@ var UNITS = [
 ];
 function timeAgo(at, { now = /* @__PURE__ */ new Date(), locale = "en-US", style = "short" } = {}) {
   let value = (new Date(at).getTime() - now.getTime()) / 1e3;
-  let unit = "second";
+  let unit2 = "second";
   for (const [name, size] of UNITS) {
-    unit = name;
+    unit2 = name;
     if (Math.abs(value) < size - 0.5) break;
     value /= size;
   }
-  return new Intl.RelativeTimeFormat(locale, { numeric: "auto", style }).format(Math.round(value) + 0, unit);
+  return new Intl.RelativeTimeFormat(locale, { numeric: "auto", style }).format(Math.round(value) + 0, unit2);
 }
 
 // src/native/activity-feed.tsx
 import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var LABELS = { today: "Today", yesterday: "Yesterday", times: (n) => `\xD7${n}`, newEvents: (n) => n === 1 ? "1 new event" : `${n} new events` };
 var tone = (t, name) => ({ neutral: t.borderStrong, accent: t.accent, success: t.success, warning: t.warning, danger: t.danger, info: t.info })[name ?? "neutral"];
-function ActivityFeed({ events, "aria-label": label, locale = "en-US", now: given, fold = true, live, leading, empty, labels: words, style }) {
+function ActivityFeed({ events, "aria-label": label, locale = "en-US", now: given, fold = true, live, leading, empty: empty2, labels: words2, style }) {
   const { theme } = useTheme();
-  const labels = { ...LABELS, ...words };
+  const labels = { ...LABELS, ...words2 };
   const [tick, setTick] = React3.useState(() => given ?? /* @__PURE__ */ new Date());
   React3.useEffect(() => {
     if (given) return;
@@ -557,7 +557,7 @@ function ActivityFeed({ events, "aria-label": label, locale = "en-US", now: give
       sections,
       keyExtractor: (item) => item.event.id,
       stickySectionHeadersEnabled: true,
-      ListEmptyComponent: empty ? /* @__PURE__ */ jsx4(Fragment, { children: empty }) : null,
+      ListEmptyComponent: empty2 ? /* @__PURE__ */ jsx4(Fragment, { children: empty2 }) : null,
       renderSectionHeader: ({ section }) => /* @__PURE__ */ jsx4(View2, { style: [styles3.heading, { backgroundColor: theme.surface0 }], children: /* @__PURE__ */ jsx4(Txt, { variant: "caption", tone: "secondary", role: "heading", style: styles3.headingText, children: section.title }) }),
       renderItem: ({ item: { event, count } }) => /* @__PURE__ */ jsxs2(View2, { style: styles3.row, accessible: true, children: [
         leading ? leading(event) : /* @__PURE__ */ jsx4(View2, { "aria-hidden": true, style: [styles3.marker, { backgroundColor: tone(theme, event.tone) }] }),
@@ -669,24 +669,217 @@ var styles4 = StyleSheet4.create({
 // src/native/badge.tsx
 import * as React5 from "react";
 import { Animated, StyleSheet as StyleSheet5, Text as Text3 } from "react-native";
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
-function look(tone3, t) {
-  switch (tone3) {
-    case "accent":
-      return { bg: t.accentSoft, fg: t.textPrimary, border: alpha(t.accent, 0.4), dot: t.accent };
-    case "success":
-    case "warning":
-    case "danger":
-      return { bg: alpha(t[tone3], 0.15), fg: t.textPrimary, border: alpha(t[tone3], 0.4), dot: t[tone3] };
-    case "scrim":
-      return { bg: t.scrim, fg: t.textOnMedia, border: "transparent", dot: t.textOnMedia };
-    default:
-      return { bg: t.surface3, fg: t.textSecondary, border: "transparent", dot: t.textSecondary };
+
+// src/recipes/define.ts
+function defineRecipe(config) {
+  return config;
+}
+
+// src/badge/recipe.ts
+var badgeRecipe = defineRecipe({
+  base: "inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-full font-semibold uppercase tracking-wider",
+  variants: {
+    tone: {
+      neutral: "bg-surface-3 text-fg-secondary",
+      accent: "bg-accent-soft text-fg ring-1 ring-inset ring-accent/40 [&>[data-dot]]:bg-accent",
+      success: "bg-success/15 text-fg ring-1 ring-inset ring-success/40 [&>[data-dot]]:bg-success",
+      warning: "bg-warning/15 text-fg ring-1 ring-inset ring-warning/40 [&>[data-dot]]:bg-warning",
+      danger: "bg-danger/15 text-fg ring-1 ring-inset ring-danger/40 [&>[data-dot]]:bg-danger",
+      /** On a media: veil and text invariant, identical in both themes. */
+      scrim: "bg-scrim text-fg-on-media backdrop-blur-md"
+    },
+    size: { sm: "px-2 py-0.5 text-[10px]", md: "px-2.5 py-1 text-[11px]" },
+    pulse: { true: "[&>[data-dot]]:motion-safe:animate-pulse" }
+  },
+  defaultVariants: { tone: "neutral", size: "sm" }
+});
+
+// src/recipes/roles.ts
+var ROLES = {
+  "surface-0": "surface0",
+  "surface-1": "surface1",
+  "surface-2": "surface2",
+  "surface-3": "surface3",
+  media: "media",
+  scrim: "scrim",
+  "scrim-strong": "scrimStrong",
+  overlay: "overlay",
+  "border-subtle": "borderSubtle",
+  "border-default": "borderDefault",
+  "border-strong": "borderStrong",
+  fg: "textPrimary",
+  "fg-secondary": "textSecondary",
+  "fg-muted": "textMuted",
+  "fg-on-media": "textOnMedia",
+  "fg-accent": "accentText",
+  "fg-success": "successText",
+  "fg-warning": "warningText",
+  "fg-danger": "dangerText",
+  "fg-info": "infoText",
+  accent: "accent",
+  "accent-hover": "accentHover",
+  "accent-soft": "accentSoft",
+  "accent-2": "accent2",
+  "on-accent": "onAccent",
+  ring: "ring",
+  success: "success",
+  warning: "warning",
+  danger: "danger",
+  info: "info",
+  "success-soft": "successSoft",
+  "warning-soft": "warningSoft",
+  "danger-soft": "dangerSoft",
+  glass: "glassBg",
+  "glass-border": "glassBorder"
+};
+var TEXT_SIZES = { xs: 12, sm: 14, base: 16, lg: 18, xl: 20, "2xl": 24, "3xl": 30 };
+var FONT_WEIGHTS = { normal: "400", medium: "500", semibold: "600", bold: "700", extrabold: "800", black: "900" };
+var TRACKING = { tighter: -0.05, tight: -0.025, normal: 0, wide: 0.025, wider: 0.05, widest: 0.1 };
+
+// src/recipes/native.ts
+var BASE = "base";
+var words = (value) => typeof value === "string" ? value.split(/\s+/).filter(Boolean) : Array.isArray(value) ? value.flatMap(words) : [];
+function withAlpha(color, opacity) {
+  const hex = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(color);
+  if (!hex) return color;
+  const [r, g, b] = hex.slice(1).map((part) => parseInt(part, 16));
+  return `rgba(${r},${g},${b},${opacity})`;
+}
+function slotNames(config) {
+  return config.slots ? Object.keys(config.slots) : [BASE];
+}
+function classesFor(config, props) {
+  const names = slotNames(config);
+  const out = Object.fromEntries(names.map((name) => [name, config.slots ? words(config.slots[name]) : words(config.base)]));
+  const add = (value) => {
+    if (typeof value === "string" || Array.isArray(value)) (out[BASE] ??= []).push(...words(value));
+    else if (value && typeof value === "object") for (const [name, classes] of Object.entries(value)) (out[name] ??= []).push(...words(classes));
+  };
+  const chosen = { ...config.defaultVariants, ...Object.fromEntries(Object.entries(props).filter(([, v]) => v !== void 0)) };
+  for (const [dimension, values] of Object.entries(config.variants ?? {})) {
+    const key = String(chosen[dimension]);
+    if (key in values) add(values[key]);
+  }
+  for (const compound of config.compoundVariants ?? []) {
+    const { class: a, className: b, ...conditions } = compound;
+    const matches = Object.entries(conditions).every(([dimension, expected]) => Array.isArray(expected) ? expected.map(String).includes(String(chosen[dimension])) : String(chosen[dimension]) === String(expected));
+    if (matches) add(a ?? b);
   }
+  return out;
+}
+var empty = () => ({ frame: {}, text: {}, disabled: { frame: {}, text: {} }, on: { frame: {}, text: {} }, ignored: [] });
+var unit = (value) => /^\d+(\.\d+)?$/.test(value) ? Number(value) * 4 : void 0;
+function colour(name, theme) {
+  const [role, percent] = name.split("/");
+  if (role === "transparent") return "transparent";
+  if (!role || !(role in ROLES)) return void 0;
+  const resolved = theme[ROLES[role]];
+  if (resolved === void 0) return void 0;
+  return percent === void 0 ? resolved : withAlpha(resolved, Number(percent) / 100);
+}
+function apply(look3, cls, theme) {
+  let target = look3;
+  let utility = cls;
+  if (cls.startsWith("disabled:")) {
+    target = look3.disabled;
+    utility = cls.slice("disabled:".length);
+  } else if (cls.startsWith("data-[state=on]:")) {
+    target = look3.on;
+    utility = cls.slice("data-[state=on]:".length);
+  } else if (cls.startsWith("[&>[data-dot]]:bg-")) {
+    const dot = colour(cls.slice("[&>[data-dot]]:bg-".length), theme);
+    if (dot === void 0) return false;
+    look3.dot = dot;
+    return true;
+  }
+  if (utility.includes(":") || utility.startsWith("[&")) return false;
+  const { frame, text } = target;
+  let match;
+  if (utility.startsWith("bg-linear-to-")) return true;
+  if (match = /^bg-(.+)$/.exec(utility)) {
+    const value = colour(match[1], theme);
+    if (value === void 0) return false;
+    frame.backgroundColor = value;
+    return true;
+  }
+  if (match = /^text-(.+)$/.exec(utility)) {
+    const arbitrary = /^\[(\d+(?:\.\d+)?)px\]$/.exec(match[1]);
+    if (arbitrary) return text.fontSize = Number(arbitrary[1]), true;
+    if (match[1] in TEXT_SIZES) return text.fontSize = TEXT_SIZES[match[1]], true;
+    const value = colour(match[1], theme);
+    if (value === void 0) return false;
+    text.color = value;
+    return true;
+  }
+  if (utility === "border") return frame.borderWidth = 1, true;
+  if (match = /^(?:border|ring)-(.+)$/.exec(utility)) {
+    if (match[1] === "1") return frame.borderWidth = 1, true;
+    if (match[1] === "inset") return true;
+    const value = colour(match[1], theme);
+    if (value === void 0) return false;
+    frame.borderColor = value;
+    return true;
+  }
+  if (utility === "ring-inset") return true;
+  if (match = /^(h|w|min-w|px|py|p|gap)-(\d+(?:\.\d+)?)$/.exec(utility)) {
+    const points = unit(match[2]);
+    const key = { h: "height", w: "width", "min-w": "minWidth", px: "paddingHorizontal", py: "paddingVertical", p: "padding", gap: "gap" }[match[1]];
+    frame[key] = points;
+    return true;
+  }
+  if (match = /^opacity-(\d+)$/.exec(utility)) return frame.opacity = Number(match[1]) / 100, true;
+  if ((match = /^font-(.+)$/.exec(utility)) && match[1] in FONT_WEIGHTS) return text.fontWeight = FONT_WEIGHTS[match[1]], true;
+  if ((match = /^tracking-(.+)$/.exec(utility)) && match[1] in TRACKING) return text.letterSpacing = TRACKING[match[1]], true;
+  if (utility === "uppercase" || utility === "lowercase" || utility === "capitalize") return text.textTransform = utility, true;
+  if (match = /^(from|to)-(.+)$/.exec(utility)) {
+    const value = colour(match[2], theme);
+    if (value === void 0) return false;
+    const stops = [...look3.gradient ?? ["transparent", "transparent"]];
+    stops[match[1] === "from" ? 0 : 1] = value;
+    look3.gradient = stops;
+    return true;
+  }
+  return false;
+}
+function finish(look3) {
+  for (const part of [look3, look3.disabled, look3.on]) {
+    if (part.text.letterSpacing !== void 0) part.text.letterSpacing = part.text.letterSpacing * (part.text.fontSize ?? look3.text.fontSize ?? 14);
+  }
+  return look3;
+}
+function nativeRecipe(config) {
+  return {
+    resolve(props, theme) {
+      const looks = {};
+      for (const [slot, classes] of Object.entries(classesFor(config, props))) {
+        const look3 = empty();
+        for (const cls of classes) if (!apply(look3, cls, theme)) look3.ignored.push(cls);
+        looks[slot] = finish(look3);
+      }
+      return looks;
+    }
+  };
+}
+
+// src/native/badge.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var RECIPE = nativeRecipe(badgeRecipe);
+function look(tone3, size, t) {
+  const { frame, text, dot } = RECIPE.resolve({ tone: tone3, size }, t).base;
+  const fg = text.color ?? t.textPrimary;
+  return {
+    bg: frame.backgroundColor ?? "transparent",
+    border: frame.borderColor ?? "transparent",
+    // The dot is the tone's colour, or the text's own (`bg-current` on the web).
+    dot: dot ?? fg,
+    paddingHorizontal: frame.paddingHorizontal ?? 8,
+    paddingVertical: frame.paddingVertical ?? 2,
+    text: { color: fg, fontSize: text.fontSize ?? 10, fontWeight: text.fontWeight, letterSpacing: text.letterSpacing, textTransform: text.textTransform }
+  };
 }
 function Badge({ tone: tone3 = "neutral", size = "sm", dot, pulse, style, children, ...props }) {
   const { theme } = useTheme();
-  const colors = look(tone3, theme);
+  const colors = look(tone3, size, theme);
   const reduce = useReducedMotion();
   const [opacity] = React5.useState(() => new Animated.Value(1));
   React5.useEffect(() => {
@@ -707,51 +900,70 @@ function Badge({ tone: tone3 = "neutral", size = "sm", dot, pulse, style, childr
     Animated.View,
     {
       ...props,
-      style: [styles5.root, size === "md" ? styles5.md : styles5.sm, { backgroundColor: colors.bg, borderColor: colors.border }, style],
+      style: [styles5.root, { paddingHorizontal: colors.paddingHorizontal, paddingVertical: colors.paddingVertical, backgroundColor: colors.bg, borderColor: colors.border }, style],
       children: [
         dot ? /* @__PURE__ */ jsx6(Animated.View, { "aria-hidden": true, style: [styles5.dot, { backgroundColor: colors.dot, opacity }] }) : null,
-        typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx6(Text3, { style: [styles5.text, { color: colors.fg, fontSize: size === "md" ? 11 : 10 }], children }) : children
+        typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx6(Text3, { style: colors.text, children }) : children
       ]
     }
   );
 }
 var styles5 = StyleSheet5.create({
   root: { flexDirection: "row", alignItems: "center", alignSelf: "flex-start", gap: 4, borderRadius: 9999, borderWidth: 1 },
-  sm: { paddingHorizontal: 8, paddingVertical: 2 },
-  md: { paddingHorizontal: 10, paddingVertical: 4 },
-  dot: { width: 6, height: 6, borderRadius: 3 },
-  text: { fontWeight: "700", textTransform: "uppercase", letterSpacing: 0.8 }
+  dot: { width: 6, height: 6, borderRadius: 3 }
 });
 
 // src/native/button.tsx
 import * as React6 from "react";
 import { ActivityIndicator, Pressable as Pressable2, StyleSheet as StyleSheet6, View as View4 } from "react-native";
 import Svg2, { Defs as Defs2, LinearGradient as LinearGradient2, Rect, Stop as Stop2 } from "react-native-svg";
+
+// src/button/recipe.ts
+var buttonRecipe = defineRecipe({
+  base: "inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap font-semibold transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 disabled:pointer-events-none disabled:opacity-40 data-loading:cursor-progress active:scale-[0.98] [&[data-loading]]:opacity-100",
+  variants: {
+    variant: {
+      primary: "bg-accent text-on-accent shadow-sm hover:bg-accent-hover",
+      // The brand's signature: accent → accent-2 (on-accent reads on both stops, tested in @krizaka/tokens).
+      gradient: "bg-linear-to-r from-accent to-accent-2 text-on-accent shadow-sm hover:brightness-110",
+      secondary: "border border-border-default bg-surface-2 text-fg hover:border-border-strong hover:bg-surface-3",
+      outline: "border border-border-default bg-transparent text-fg hover:border-accent hover:text-fg-accent",
+      ghost: "text-fg-secondary hover:bg-surface-2 hover:text-fg",
+      // The border and the tint carry the danger; the label stays the primary text role, legible on the tint at rest
+      // and hovered over every surface (`text-fg-danger` is for text set directly on a surface).
+      danger: "border border-danger/50 bg-danger/10 text-fg hover:border-danger hover:bg-danger/20"
+    },
+    size: { sm: "h-8 px-3 text-xs", md: "h-10 px-4 text-sm", lg: "h-12 px-6 text-sm", icon: "h-10 w-10" },
+    // `cut`: the Krizaka chamfer — 45° corners (CSS corner-shape, where supported; rounded elsewhere). The border, the
+    // focus ring and the hover follow the cut, unlike a clip-path.
+    shape: { rounded: "rounded-lg", pill: "rounded-full", cut: "rounded-[10px] [corner-shape:bevel]" }
+  },
+  defaultVariants: { variant: "secondary", size: "md", shape: "rounded" }
+});
+
+// src/native/button.tsx
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
-function look2(variant, t) {
-  switch (variant) {
-    case "primary":
-      return { bg: t.accent, fg: t.onAccent, border: t.accent };
-    case "gradient":
-      return { bg: t.accent, fg: t.onAccent, border: "transparent", gradient: [t.accent, t.accent2] };
-    case "outline":
-      return { bg: "transparent", fg: t.textPrimary, border: t.borderDefault };
-    case "ghost":
-      return { bg: "transparent", fg: t.textSecondary, border: "transparent" };
-    case "danger":
-      return { bg: alpha(t.danger, 0.1), fg: t.textPrimary, border: alpha(t.danger, 0.5) };
-    default:
-      return { bg: t.surface2, fg: t.textPrimary, border: t.borderDefault };
-  }
+var RECIPE2 = nativeRecipe(buttonRecipe);
+function look2(variant, size, t) {
+  const { frame, text, gradient } = RECIPE2.resolve({ variant, size }, t).base;
+  return {
+    // The brand's signature, accent → accent-2, is drawn over this fill; on-accent reads on both stops (tested in tokens).
+    bg: frame.backgroundColor ?? gradient?.[0] ?? "transparent",
+    fg: text.color ?? t.textPrimary,
+    border: frame.borderColor ?? "transparent",
+    gradient,
+    height: frame.height ?? 40,
+    paddingHorizontal: frame.paddingHorizontal ?? 16,
+    fontSize: text.fontSize ?? 14,
+    fontWeight: text.fontWeight
+  };
 }
-var HEIGHT = { sm: 32, md: 40, lg: 48 };
-var PADDING = { sm: 12, md: 16, lg: 24 };
 function useButton({ variant = "secondary", size = "md", shape = "rounded", loading, disabled }) {
   const { theme, radius: radius3 } = useTheme();
-  const colors = look2(variant, theme);
+  const colors = look2(variant, size, theme);
   const inactive = Boolean(disabled || loading);
   const frame = (pressed) => ({
-    height: HEIGHT[size],
+    height: colors.height,
     borderRadius: shape === "pill" ? radius3.full : radius3.sm,
     backgroundColor: colors.bg,
     borderColor: colors.border,
@@ -782,12 +994,12 @@ function Button({ label, icon, variant, size = "md", shape, loading = false, dis
       "aria-busy": loading,
       ...props,
       disabled: inactive,
-      style: ({ pressed }) => [styles6.base, { paddingHorizontal: PADDING[size] }, frame(pressed), style],
+      style: ({ pressed }) => [styles6.base, { paddingHorizontal: colors.paddingHorizontal }, frame(pressed), style],
       children: [
         /* @__PURE__ */ jsx7(Fill, { colors, id: gradientId }),
         /* @__PURE__ */ jsxs5(View4, { style: styles6.row, children: [
           loading ? /* @__PURE__ */ jsx7(ActivityIndicator, { "aria-hidden": true, size: "small", color: colors.fg }) : icon,
-          /* @__PURE__ */ jsx7(Txt, { variant: "label", numberOfLines: 1, style: { color: colors.fg, fontSize: size === "sm" ? 12 : 14 }, children: label })
+          /* @__PURE__ */ jsx7(Txt, { variant: "label", numberOfLines: 1, style: { color: colors.fg, fontSize: colors.fontSize, fontWeight: colors.fontWeight }, children: label })
         ] })
       ]
     }
@@ -796,7 +1008,7 @@ function Button({ label, icon, variant, size = "md", shape, loading = false, dis
 function IconButton({ label, icon, variant, size = "md", shape, loading = false, disabled, style, ...props }) {
   const { colors, inactive, frame } = useButton({ variant, size, shape, loading, disabled });
   const gradientId = `kz-button-${React6.useId().replace(/:/g, "")}`;
-  const side = HEIGHT[size];
+  const side = colors.height;
   return /* @__PURE__ */ jsxs5(
     Pressable2,
     {
@@ -822,14 +1034,43 @@ var styles6 = StyleSheet6.create({
 
 // src/native/card.tsx
 import { Image as Image2, Pressable as Pressable3, StyleSheet as StyleSheet7, View as View5 } from "react-native";
+
+// src/card/recipe.ts
+var cardRecipe = defineRecipe({
+  slots: {
+    root: "group relative flex flex-col overflow-hidden border border-border-default bg-surface-1 text-fg transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
+    media: "relative overflow-hidden bg-media",
+    image: "h-full w-full object-cover transition-transform duration-500 motion-safe:group-hover:scale-105",
+    fallback: "flex h-full w-full items-center justify-center bg-linear-to-br from-accent/15 via-media to-accent-2/15 text-accent/60",
+    overlay: "absolute z-10 flex items-center gap-1.5",
+    body: "relative flex flex-1 flex-col gap-3",
+    title: "line-clamp-1 text-sm font-semibold text-fg transition-colors group-hover:text-fg-accent",
+    description: "line-clamp-2 text-xs text-fg-secondary",
+    stat: "min-w-0",
+    statLabel: "text-[10px] font-semibold uppercase tracking-wider text-fg-secondary",
+    statValue: "font-display text-xl font-black tabular-nums text-fg",
+    footer: "relative mt-auto flex items-center gap-2 border-t border-border-subtle pt-3 text-xs text-fg-secondary"
+  },
+  variants: {
+    radius: { md: { root: "rounded-md" }, lg: { root: "rounded-lg" }, xl: { root: "rounded-xl" } },
+    tone: { default: {}, elevated: { root: "bg-surface-2 shadow-md" }, glass: { root: "bg-surface-1/70 backdrop-blur-md" } },
+    interactive: { true: { root: "kz-spotlight kz-lift hover:border-accent/50" } },
+    padding: { none: { body: "p-0" }, sm: { body: "p-3" }, md: { body: "p-4" }, lg: { body: "p-6" } }
+  },
+  defaultVariants: { radius: "xl", tone: "default", padding: "md" }
+});
+
+// src/native/card.tsx
 import { jsx as jsx8 } from "react/jsx-runtime";
+var RECIPES = nativeRecipe(cardRecipe);
 function CardRoot({ tone: tone3 = "default", radius: radius3 = "xl", onPress, style, ...props }) {
   const { theme, radius: r } = useTheme();
+  const { frame: look3 } = RECIPES.resolve({ tone: tone3 }, theme).root;
   const frame = [
     styles7.root,
     {
-      backgroundColor: tone3 === "elevated" ? theme.surface2 : theme.surface1,
-      borderColor: theme.borderDefault,
+      backgroundColor: look3.backgroundColor,
+      borderColor: look3.borderColor,
       borderRadius: r[radius3]
     },
     tone3 === "elevated" ? [styles7.shadow, { shadowColor: theme.scrimStrong }] : null
@@ -866,9 +1107,10 @@ var CORNER = {
 function CardOverlay({ corner = "top-left", style, ...props }) {
   return /* @__PURE__ */ jsx8(View5, { ...props, style: [styles7.overlay, CORNER[corner], style] });
 }
-var PADDING2 = { none: 0, sm: 12, md: 16, lg: 24 };
 function CardBody({ padding = "md", style, ...props }) {
-  return /* @__PURE__ */ jsx8(View5, { ...props, style: [styles7.body, { padding: PADDING2[padding] }, style] });
+  const { theme } = useTheme();
+  const { frame } = RECIPES.resolve({ padding }, theme).body;
+  return /* @__PURE__ */ jsx8(View5, { ...props, style: [styles7.body, { padding: frame.padding }, style] });
 }
 function CardTitle({ numberOfLines = 1, ...props }) {
   return /* @__PURE__ */ jsx8(Txt, { variant: "label", role: "heading", numberOfLines, ...props });
@@ -908,7 +1150,7 @@ import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-run
 var STATUS = { sending: "Sending", sent: "Sent", delivered: "Delivered", read: "Read", failed: "Not sent" };
 function MessageBubble({ text, mine, time, status, showStatus, context, onRetry, grouped = "single", labels, style }) {
   const { theme, radius: radius3 } = useTheme();
-  const words = { ...STATUS, ...labels?.status };
+  const words2 = { ...STATUS, ...labels?.status };
   const failed = status === "failed";
   const big = radius3.xl;
   const tight = 6;
@@ -930,12 +1172,12 @@ function MessageBubble({ text, mine, time, status, showStatus, context, onRetry,
       ]
     }
   );
-  const name = [text, time, failed ? `${words.failed}. ${labels?.retry ?? ""}` : null].filter(Boolean).join(", ");
+  const name = [text, time, failed ? `${words2.failed}. ${labels?.retry ?? ""}` : null].filter(Boolean).join(", ");
   return /* @__PURE__ */ jsxs6(View6, { style: [styles8.row, mine ? styles8.mine : styles8.theirs, style], children: [
     failed && onRetry ? /* @__PURE__ */ jsx9(Pressable4, { role: "button", "aria-label": name, onPress: onRetry, style: styles8.max, children: bubble }) : /* @__PURE__ */ jsx9(View6, { accessible: true, "aria-label": name, style: styles8.max, children: bubble }),
     showStatus && status ? /* @__PURE__ */ jsxs6(View6, { style: styles8.status, children: [
       status === "delivered" || status === "read" || status === "sent" ? /* @__PURE__ */ jsx9(Svg3, { width: 14, height: 14, viewBox: "0 0 24 24", "aria-hidden": true, children: /* @__PURE__ */ jsx9(Path, { d: status === "sent" ? "M5 12.5l4.5 4.5L19 7.5" : "M2 12.5l4.5 4.5L16 7.5M9 15l2 2 9.5-9.5", fill: "none", stroke: status === "read" ? theme.accent : theme.textSecondary, strokeWidth: 2.2, strokeLinecap: "round", strokeLinejoin: "round" }) }) : null,
-      /* @__PURE__ */ jsx9(Txt, { variant: "caption", tone: failed ? "danger" : "secondary", children: words[status] })
+      /* @__PURE__ */ jsx9(Txt, { variant: "caption", tone: failed ? "danger" : "secondary", children: words2[status] })
     ] }) : null
   ] });
 }
@@ -1109,28 +1351,48 @@ var styles9 = StyleSheet9.create({
 // src/native/chip.tsx
 import * as React9 from "react";
 import { Pressable as Pressable6, ScrollView, StyleSheet as StyleSheet10, Text as Text5, View as View8 } from "react-native";
+
+// src/chip/recipe.ts
+var chipRecipe = defineRecipe({
+  slots: {
+    group: "flex flex-wrap items-center gap-2 data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch",
+    base: "inline-flex shrink-0 select-none items-center justify-center gap-1.5 whitespace-nowrap rounded-full border font-semibold transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40 border-border-default bg-surface-1 text-fg-secondary hover:border-border-strong hover:text-fg data-[state=on]:border-accent data-[state=on]:bg-accent-soft data-[state=on]:text-fg",
+    remove: "-mr-1.5 inline-flex h-6 w-6 items-center justify-center rounded-full text-fg-secondary transition-colors hover:bg-surface-3 hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
+  },
+  variants: {
+    size: { sm: { base: "h-7 px-3 text-xs" }, md: { base: "h-9 px-3.5 text-xs" } }
+  },
+  defaultVariants: { size: "md" }
+});
+
+// src/native/chip.tsx
 import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 var ChipGroupContext = React9.createContext(null);
-function Label({ children, color, size }) {
+var RECIPE3 = nativeRecipe(chipRecipe);
+function Label({ children, color, fontSize }) {
   if (typeof children !== "string" && typeof children !== "number") return /* @__PURE__ */ jsx11(Fragment3, { children });
-  return /* @__PURE__ */ jsx11(Text5, { style: [styles10.label, { color, fontSize: size === "sm" ? 12 : 13 }], children });
+  return /* @__PURE__ */ jsx11(Text5, { style: [styles10.label, { color, fontSize }], children });
 }
 function ChipBase(props) {
   const group = React9.useContext(ChipGroupContext);
   const { theme, radius: radius3 } = useTheme();
   const [own, setOwn] = React9.useState(props.removable ? false : props.defaultSelected ?? false);
   const size = props.size ?? group?.size ?? "md";
+  const look3 = RECIPE3.resolve({ size }, theme).base;
+  const fontSize = look3.text.fontSize ?? 12;
   const frame = (on2, pressed) => ({
-    height: size === "sm" ? 28 : 36,
+    height: look3.frame.height,
+    paddingHorizontal: look3.frame.paddingHorizontal,
     borderRadius: radius3.full,
-    borderColor: on2 ? theme.accent : theme.borderDefault,
-    backgroundColor: on2 ? theme.accentSoft : theme.surface1,
+    borderColor: (on2 ? look3.on.frame.borderColor : look3.frame.borderColor) ?? "transparent",
+    backgroundColor: (on2 ? look3.on.frame.backgroundColor : look3.frame.backgroundColor) ?? "transparent",
     opacity: pressed ? 0.85 : 1
   });
+  const labelColor = (on2) => (on2 ? look3.on.text.color : look3.text.color) ?? theme.textPrimary;
   if (props.removable) {
     const { removable: _r2, removeLabel, onRemove, disabled: disabled2, size: _s2, style: style2, children: children2, ...rest2 } = props;
     return /* @__PURE__ */ jsxs8(View8, { ...rest2, style: [styles10.base, frame(false, false), disabled2 ? styles10.disabled : null, style2], children: [
-      /* @__PURE__ */ jsx11(Label, { color: theme.textSecondary, size, children: children2 }),
+      /* @__PURE__ */ jsx11(Label, { color: labelColor(false), fontSize, children: children2 }),
       /* @__PURE__ */ jsx11(Pressable6, { role: "button", "aria-label": removeLabel, disabled: disabled2 ?? void 0, hitSlop: 10, onPress: onRemove, style: styles10.remove, children: /* @__PURE__ */ jsx11(Text5, { style: [styles10.cross, { color: theme.textSecondary }], children: "\xD7" }) })
     ] });
   }
@@ -1154,7 +1416,7 @@ function ChipBase(props) {
       disabled,
       onPress: press,
       style: ({ pressed }) => [styles10.base, frame(on, pressed), disabled ? styles10.disabled : null, style],
-      children: /* @__PURE__ */ jsx11(Label, { color: on ? theme.textPrimary : theme.textSecondary, size, children })
+      children: /* @__PURE__ */ jsx11(Label, { color: labelColor(on), fontSize, children })
     }
   );
 }
@@ -1182,7 +1444,7 @@ function ChipGroup(props) {
 }
 var Chip = Object.assign(ChipBase, { Group: ChipGroup });
 var styles10 = StyleSheet10.create({
-  base: { flexDirection: "row", alignItems: "center", justifyContent: "center", gap: 6, paddingHorizontal: 14, borderWidth: 1, alignSelf: "flex-start" },
+  base: { flexDirection: "row", alignItems: "center", justifyContent: "center", gap: 6, borderWidth: 1, alignSelf: "flex-start" },
   label: { fontWeight: "600" },
   remove: { marginRight: -6, width: 24, height: 24, alignItems: "center", justifyContent: "center" },
   cross: { fontSize: 16, lineHeight: 18, fontWeight: "700" },
@@ -1447,7 +1709,7 @@ 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(" ");
+  const text = parts.map(([value, unit2]) => `${String(value).padStart(2, "0")}${unit2}`).join(" ");
   return /* @__PURE__ */ jsxs11(
     Animated4.View,
     {
@@ -1457,10 +1719,10 @@ function Countdown({ target, skewMs = 0, units, urgentBelowMs = 6e4, size = "md"
       style: [styles13.root, style],
       children: [
         showLabel ? /* @__PURE__ */ jsx14(Text8, { style: [styles13.label, { color: theme.textSecondary, fontSize: Math.max(11, Math.round(FONT[size] * 0.6)) }], children: label }) : null,
-        parts.map(([value, unit], i) => /* @__PURE__ */ jsxs11(Animated4.View, { style: [styles13.segment, urgent && i === parts.length - 1 ? { opacity } : null], children: [
+        parts.map(([value, unit2], i) => /* @__PURE__ */ jsxs11(Animated4.View, { style: [styles13.segment, urgent && i === parts.length - 1 ? { opacity } : null], children: [
           /* @__PURE__ */ jsx14(Text8, { style: [styles13.value, { color, fontSize: FONT[size] }, fonts.display ? { fontFamily: fonts.display } : null], children: String(value).padStart(2, "0") }),
-          /* @__PURE__ */ jsx14(Text8, { style: [styles13.unit, { color: theme.textSecondary, fontSize: Math.round(FONT[size] / 2) }], children: unit })
-        ] }, unit))
+          /* @__PURE__ */ jsx14(Text8, { style: [styles13.unit, { color: theme.textSecondary, fontSize: Math.round(FONT[size] / 2) }], children: unit2 })
+        ] }, unit2))
       ]
     }
   );
@@ -2207,7 +2469,7 @@ function GoalGauge({ label, segments, value, valueText, mode = "fill", showLabel
   const { theme } = useTheme();
   const total = Math.max(1, Math.round(segments));
   const lit = Math.min(total, Math.max(0, Math.round(value ?? total)));
-  const words = valueText ?? `${lit} / ${total}`;
+  const words2 = valueText ?? `${lit} / ${total}`;
   const arcade = variant === "arcade";
   return /* @__PURE__ */ jsxs19(
     View18,
@@ -2218,13 +2480,13 @@ function GoalGauge({ label, segments, value, valueText, mode = "fill", showLabel
       "aria-valuemin": 0,
       "aria-valuemax": total,
       "aria-valuenow": lit,
-      "aria-valuetext": words,
+      "aria-valuetext": words2,
       ...props,
       style: [styles21.root, style],
       children: [
         showLabel ? /* @__PURE__ */ jsxs19(View18, { "aria-hidden": true, style: [styles21.head, arcade ? styles21.headArcade : null], children: [
           /* @__PURE__ */ jsx22(Txt, { variant: arcade ? "mono" : "caption", tone: "secondary", children: arcade ? label.toUpperCase() : label }),
-          arcade ? null : /* @__PURE__ */ jsx22(Txt, { variant: "caption", children: words })
+          arcade ? null : /* @__PURE__ */ jsx22(Txt, { variant: "caption", children: words2 })
         ] }) : null,
         /* @__PURE__ */ jsx22(View18, { "aria-hidden": true, style: [styles21.cells, arcade ? [styles21.cellsArcade, { borderColor: theme.borderSubtle, backgroundColor: theme.surface1 }] : null], children: Array.from({ length: total }, (_, i) => {
           const on = i < lit;
@@ -2490,7 +2752,7 @@ function useMarkMotion(size, animated, spinMs = 3e4) {
 import { Fragment as Fragment5, jsx as jsx25, jsxs as jsxs22 } from "react/jsx-runtime";
 function KrizakaMark({ size = 48, animated = true, title, neutral }) {
   const { theme } = useTheme();
-  const { Animated: Animated27, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated);
+  const { Animated: Animated28, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated);
   const id = useSvgId("kzm");
   const viewBox = size < 48 ? KRIZAKA.croppedViewBox : KRIZAKA.viewBox;
   const stroke = neutral ?? theme.textMuted;
@@ -2516,8 +2778,8 @@ function KrizakaMark({ size = 48, animated = true, title, neutral }) {
       /* @__PURE__ */ jsx25(Circle2, { cx: 200, cy: 200, r: KRIZAKA.ring.r, stroke, strokeWidth: KRIZAKA.ring.width, opacity: 0.35, fill: "none" }),
       /* @__PURE__ */ jsx25(Group, { transform: `translate(${KRIZAKA.offset} ${KRIZAKA.offset})`, children: /* @__PURE__ */ jsx25(Path6, { d: KRIZAKA.shield, stroke: `url(#${id}i)`, strokeWidth: KRIZAKA.stroke, strokeLinecap: "round", strokeLinejoin: "round", fill: "none" }) })
     ] }),
-    /* @__PURE__ */ jsx25(Animated27.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsx25(Svg8, { viewBox, style: layer, children: /* @__PURE__ */ jsx25(Circle2, { cx: 200, cy: 200, r: KRIZAKA.orbit.r, stroke, strokeWidth: KRIZAKA.orbit.width, strokeDasharray: KRIZAKA.orbit.dash, opacity: 0.6, fill: "none" }) }) }),
-    /* @__PURE__ */ jsx25(Animated27.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsxs22(Svg8, { viewBox, style: layer, children: [
+    /* @__PURE__ */ jsx25(Animated28.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsx25(Svg8, { viewBox, style: layer, children: /* @__PURE__ */ jsx25(Circle2, { cx: 200, cy: 200, r: KRIZAKA.orbit.r, stroke, strokeWidth: KRIZAKA.orbit.width, strokeDasharray: KRIZAKA.orbit.dash, opacity: 0.6, fill: "none" }) }) }),
+    /* @__PURE__ */ jsx25(Animated28.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsxs22(Svg8, { viewBox, style: layer, children: [
       /* @__PURE__ */ jsx25(Defs3, { children: blue }),
       /* @__PURE__ */ jsxs22(Group, { transform: `translate(${KRIZAKA.offset} ${KRIZAKA.offset})`, children: [
         dot(KRIZAKA.node),
@@ -2566,7 +2828,7 @@ var ORAZAKA = {
 import { jsx as jsx26, jsxs as jsxs23 } from "react/jsx-runtime";
 function OrazakaMark({ size = 48, animated = true, title, neutral }) {
   const { theme } = useTheme();
-  const { Animated: Animated27, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated);
+  const { Animated: Animated28, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated);
   const id = useSvgId("ozm");
   const viewBox = size < 48 ? ORAZAKA.croppedViewBox : ORAZAKA.viewBox;
   const stroke = neutral ?? theme.textMuted;
@@ -2582,11 +2844,11 @@ function OrazakaMark({ size = 48, animated = true, title, neutral }) {
       /* @__PURE__ */ jsx26(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__ */ jsx26(Circle3, { cx: ORAZAKA.center, cy: ORAZAKA.center, r: ORAZAKA.ring.r, stroke, strokeWidth: ORAZAKA.ring.width, opacity: 0.35, fill: "none" })
     ] }),
-    /* @__PURE__ */ jsx26(Animated27.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsxs23(Svg9, { viewBox, style: layer, children: [
+    /* @__PURE__ */ jsx26(Animated28.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsxs23(Svg9, { viewBox, style: layer, children: [
       /* @__PURE__ */ jsx26(Defs4, { children: gradient }),
       ORAZAKA.shards.map((d) => /* @__PURE__ */ jsx26(Path7, { d, fill, stroke: fill, strokeWidth: ORAZAKA.shardStroke, strokeLinejoin: "round" }, d))
     ] }) }),
-    /* @__PURE__ */ jsx26(Animated27.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsxs23(Svg9, { viewBox, style: layer, children: [
+    /* @__PURE__ */ jsx26(Animated28.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsxs23(Svg9, { viewBox, style: layer, children: [
       /* @__PURE__ */ jsx26(Defs4, { children: gradient }),
       /* @__PURE__ */ jsx26(Circle3, { cx: ORAZAKA.center, cy: ORAZAKA.center, r: ORAZAKA.core.r, fill }),
       /* @__PURE__ */ jsx26(Circle3, { cx: ORAZAKA.center, cy: ORAZAKA.center, r: ORAZAKA.core.inner, fill: ORAZAKA.highlight })
@@ -2724,7 +2986,7 @@ var YASAKIA = {
 import { jsx as jsx28, jsxs as jsxs25 } from "react/jsx-runtime";
 function YasakiaMark({ size = 48, animated = true, title, neutral }) {
   const { theme } = useTheme();
-  const { Animated: Animated27, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated);
+  const { Animated: Animated28, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated);
   const id = useSvgId("yzm");
   const viewBox = size < 48 ? YASAKIA.croppedViewBox : YASAKIA.viewBox;
   const stroke = neutral ?? theme.textMuted;
@@ -2747,12 +3009,12 @@ function YasakiaMark({ size = 48, animated = true, title, neutral }) {
         i === 0 ? /* @__PURE__ */ jsx28(Path9, { d: `${v.body} ${v.tail}`, fill: YASAKIA.shade.color, opacity: YASAKIA.shade.opacity }) : null
       ] }, v.body))
     ] }),
-    /* @__PURE__ */ jsx28(Animated27.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsxs25(Svg11, { viewBox, style: layer, children: [
+    /* @__PURE__ */ jsx28(Animated28.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsxs25(Svg11, { viewBox, style: layer, children: [
       /* @__PURE__ */ jsx28(Defs6, { children: gradient }),
       /* @__PURE__ */ jsx28(Circle5, { cx: YASAKIA.center, cy: YASAKIA.center, r: YASAKIA.orbit.r, stroke, strokeWidth: YASAKIA.orbit.width, strokeDasharray: YASAKIA.orbit.dash, opacity: 0.6, fill: "none" }),
       YASAKIA.pair.at.map(([cx, cy]) => /* @__PURE__ */ jsx28(Circle5, { cx, cy, r: YASAKIA.pair.r, fill }, cx))
     ] }) }),
-    /* @__PURE__ */ jsx28(Animated27.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsxs25(Svg11, { viewBox, style: layer, children: [
+    /* @__PURE__ */ jsx28(Animated28.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsxs25(Svg11, { viewBox, style: layer, children: [
       /* @__PURE__ */ jsxs25(Defs6, { children: [
         gradient,
         /* @__PURE__ */ jsxs25(LinearGradient6, { id: `${id}l`, gradientUnits: "userSpaceOnUse", x1: 0, y1: YASAKIA.lens.y1, x2: 0, y2: YASAKIA.lens.y2, children: [
@@ -2808,7 +3070,7 @@ var YORORIS = {
 import { jsx as jsx29, jsxs as jsxs26 } from "react/jsx-runtime";
 function YororisMark({ size = 48, animated = true, title, neutral }) {
   const { theme } = useTheme();
-  const { Animated: Animated27, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated, 36e3);
+  const { Animated: Animated28, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated, 36e3);
   const id = useSvgId("yrm");
   const viewBox = size < 48 ? YORORIS.croppedViewBox : YORORIS.viewBox;
   const stroke = neutral ?? theme.textMuted;
@@ -2829,12 +3091,12 @@ function YororisMark({ size = 48, animated = true, title, neutral }) {
       YORORIS.leaves.map((d) => /* @__PURE__ */ jsx29(Path10, { d, fill }, d)),
       /* @__PURE__ */ jsx29(Path10, { d: YORORIS.veins, stroke: YORORIS.vein.color, strokeOpacity: YORORIS.vein.opacity, strokeWidth: YORORIS.vein.width, strokeLinecap: "round", strokeDasharray: YORORIS.vein.dash, fill: "none" })
     ] }),
-    /* @__PURE__ */ jsx29(Animated27.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsxs26(Svg12, { viewBox, style: layer, children: [
+    /* @__PURE__ */ jsx29(Animated28.View, { style: [layer, spinStyle], children: /* @__PURE__ */ jsxs26(Svg12, { viewBox, style: layer, children: [
       /* @__PURE__ */ jsx29(Defs7, { children: gradient }),
       /* @__PURE__ */ jsx29(Circle6, { 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__ */ jsx29(Circle6, { cx: YORORIS.moment.at[0], cy: YORORIS.moment.at[1], r: YORORIS.moment.r, fill })
     ] }) }),
-    /* @__PURE__ */ jsx29(Animated27.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsxs26(Svg12, { viewBox, style: layer, children: [
+    /* @__PURE__ */ jsx29(Animated28.View, { style: [layer, pulseStyle], children: /* @__PURE__ */ jsxs26(Svg12, { viewBox, style: layer, children: [
       /* @__PURE__ */ jsx29(Defs7, { children: /* @__PURE__ */ jsx29(LinearGradient7, { id: `${id}c`, x1: "50%", y1: "100%", x2: "50%", y2: "0%", children: YORORIS.coreGradient.stops.map(([offset, color]) => /* @__PURE__ */ jsx29(Stop7, { offset, stopColor: color }, offset)) }) }),
       /* @__PURE__ */ jsx29(Circle6, { cx: YORORIS.core.cx, cy: YORORIS.core.cy, r: YORORIS.core.r, fill: `url(#${id}c)` }),
       /* @__PURE__ */ jsx29(Circle6, { cx: YORORIS.core.cx, cy: YORORIS.core.cy, r: YORORIS.core.inner, fill: YORORIS.highlight })
@@ -2919,10 +3181,10 @@ function Loader({ label, status = "loading", successLabel, errorLabel, value, et
     };
   }, [waiting, status, endDuration]);
   const phase = waiting ? "loading" : ending;
-  const words = phase === "success" ? successLabel ?? label : phase === "error" ? errorLabel ?? label : label;
+  const words2 = phase === "success" ? successLabel ?? label : phase === "error" ? errorLabel ?? label : label;
   React22.useEffect(() => {
-    if (phase) AccessibilityInfo7.announceForAccessibility(words);
-  }, [phase, words]);
+    if (phase) AccessibilityInfo7.announceForAccessibility(words2);
+  }, [phase, words2]);
   if (!phase) return null;
   const known = phase === "loading" && typeof value === "number" && Number.isFinite(value);
   const detail = phase === "loading" ? [known ? `${Math.round(Math.min(1, Math.max(0, value)) * 100)} %` : null, eta].filter(Boolean).join(" \xB7 ") : "";
@@ -2930,11 +3192,11 @@ function Loader({ label, status = "loading", successLabel, errorLabel, value, et
   const box = /* @__PURE__ */ jsxs27(View26, { style: [stacked ? styles24.stacked : styles24.inline, variant === "overlay" ? { backgroundColor: alpha(theme.surface1, 0.92), borderColor: theme.borderDefault, borderRadius: radius3.lg, ...styles24.card } : null], children: [
     product && phase === "loading" ? /* @__PURE__ */ jsx31(ProductMark, { id: product, size: GLYPH[variant], animated: true }) : /* @__PURE__ */ jsx31(LoaderGlyph, { state: phase, value: known ? value : null, size: GLYPH[variant] }),
     /* @__PURE__ */ jsxs27(View26, { style: stacked ? styles24.center : styles24.text, children: [
-      /* @__PURE__ */ jsx31(Txt, { variant: variant === "page" ? "title" : "label", style: stacked ? styles24.centered : null, children: words }),
+      /* @__PURE__ */ jsx31(Txt, { variant: variant === "page" ? "title" : "label", style: stacked ? styles24.centered : null, children: words2 }),
       detail ? /* @__PURE__ */ jsx31(Txt, { variant: "caption", tone: "secondary", style: stacked ? styles24.centered : null, children: detail }) : null
     ] })
   ] });
-  const a11y = { accessible: true, role: "progressbar", "aria-label": words, "aria-busy": phase === "loading", accessibilityLiveRegion: "polite" };
+  const a11y = { accessible: true, role: "progressbar", "aria-label": words2, "aria-busy": phase === "loading", accessibilityLiveRegion: "polite" };
   if (variant === "overlay" || variant === "page")
     return /* @__PURE__ */ jsx31(View26, { ...a11y, style: [StyleSheet24.absoluteFill, styles24.cover, variant === "page" ? { backgroundColor: alpha(theme.surface0, 0.86) } : null, style], children: box });
   return /* @__PURE__ */ jsx31(View26, { ...a11y, style: [variant === "block" ? styles24.block : null, style], children: box });
@@ -3321,9 +3583,9 @@ function Meter({ label, value = 0, min = 0, max = 100, valueText, thresholds, op
   const ratio = Math.min(1, Math.max(0, (value - min) / span));
   const level = !thresholds ? "ok" : ratio >= thresholds.high ? optimum === "low" ? "danger" : "success" : ratio >= thresholds.low ? "warning" : optimum === "low" ? "success" : "danger";
   const tone3 = { ok: theme.accent, success: theme.success, warning: theme.warning, danger: theme.danger }[level];
-  const words = valueText ?? `${Math.round(ratio * 100)} %`;
+  const words2 = valueText ?? `${Math.round(ratio * 100)} %`;
   const shares = (parts ?? []).map((p, i) => ({ ...p, color: partColor(theme, i), ratio: Math.min(1, Math.max(0, p.value / span)), words: p.valueText ?? `${Math.round(p.value / span * 100)} %` }));
-  const a11y = parts ? { role: "group", "aria-label": `${label}: ${shares.map((p) => `${p.label} ${p.words}`).join(", ")}` } : { role: "meter", "aria-label": label, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": Math.min(max, Math.max(min, value)), "aria-valuetext": words };
+  const a11y = parts ? { role: "group", "aria-label": `${label}: ${shares.map((p) => `${p.label} ${p.words}`).join(", ")}` } : { role: "meter", "aria-label": label, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": Math.min(max, Math.max(min, value)), "aria-valuetext": words2 };
   const legend = parts ? /* @__PURE__ */ jsx35(View30, { style: styles27.legend, "aria-hidden": true, children: shares.map((p, i) => /* @__PURE__ */ jsxs31(View30, { style: styles27.legendItem, children: [
     /* @__PURE__ */ jsx35(View30, { style: [styles27.swatch, { backgroundColor: p.color }] }),
     /* @__PURE__ */ jsx35(Txt, { variant: "caption", children: p.label }),
@@ -3353,7 +3615,7 @@ function Meter({ label, value = 0, min = 0, max = 100, valueText, thresholds, op
   return /* @__PURE__ */ jsxs31(View30, { accessible: true, ...a11y, style: [styles27.root, style], children: [
     showLabel ? /* @__PURE__ */ jsxs31(View30, { style: styles27.header, "aria-hidden": true, children: [
       /* @__PURE__ */ jsx35(Txt, { variant: "caption", numberOfLines: 1, style: styles27.caption, children: label }),
-      !parts ? /* @__PURE__ */ jsx35(Txt, { variant: "caption", tone: "secondary", children: words }) : null
+      !parts ? /* @__PURE__ */ jsx35(Txt, { variant: "caption", tone: "secondary", children: words2 }) : null
     ] }) : null,
     /* @__PURE__ */ jsx35(View30, { style: [styles27.track, { height: THICK[size], backgroundColor: theme.surface3 }], children: parts ? shares.map((p, i) => /* @__PURE__ */ jsx35(View30, { style: { width: `${p.ratio * 100}%`, backgroundColor: p.color } }, i)) : /* @__PURE__ */ jsx35(View30, { style: [styles27.fill, { width: `${ratio * 100}%`, backgroundColor: tone3 }] }) }),
     legend
@@ -3779,7 +4041,7 @@ import * as React31 from "react";
 import { Animated as Animated17, StyleSheet as StyleSheet33, View as View37 } from "react-native";
 import { jsx as jsx43, jsxs as jsxs38 } 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 }) {
+function Bar({ label, ratio, words: words2, animated, delay }) {
   const { theme } = useTheme();
   const t = useEntrance(animated, delay, 900);
   const [width, setWidth] = React31.useState(0);
@@ -3793,7 +4055,7 @@ function Bar({ label, ratio, words, animated, delay }) {
       "aria-valuemin": 0,
       "aria-valuemax": 100,
       "aria-valuenow": Math.round(ratio * 100),
-      "aria-valuetext": words,
+      "aria-valuetext": words2,
       onLayout: (e) => setWidth(e.nativeEvent.layout.width),
       style: [styles33.track, { backgroundColor: theme.surface3 }],
       children: /* @__PURE__ */ jsx43(Animated17.View, { style: [styles33.fill, { width: `${ratio * 100}%`, backgroundColor: theme.accent, transform: [{ translateX }] }] })
@@ -3816,13 +4078,13 @@ function ProfileCard({ visual, name, statLabel, value = 100, valueText, stats, c
     statLabel ? /* @__PURE__ */ jsx43(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)} %`;
+      const words2 = s.valueText ?? `${Math.round(r * 100)} %`;
       return /* @__PURE__ */ jsxs38(View37, { style: styles33.stat, children: [
         /* @__PURE__ */ jsxs38(View37, { "aria-hidden": true, style: styles33.statHead, children: [
           /* @__PURE__ */ jsx43(Txt, { variant: "caption", tone: "secondary", children: s.label }),
-          /* @__PURE__ */ jsx43(Txt, { variant: "caption", children: words })
+          /* @__PURE__ */ jsx43(Txt, { variant: "caption", children: words2 })
         ] }),
-        /* @__PURE__ */ jsx43(Bar, { label: s.label, ratio: r, words, animated, delay: 320 + i * 120 })
+        /* @__PURE__ */ jsx43(Bar, { label: s.label, ratio: r, words: words2, animated, delay: 320 + i * 120 })
       ] }, s.label);
     }),
     caption ? /* @__PURE__ */ jsx43(Txt, { variant: "caption", tone: "secondary", style: styles33.caption, children: caption }) : null,
@@ -4147,6 +4409,7 @@ function Screen({ header, footer, children, scroll = true, keyboard = true, padd
 var styles37 = StyleSheet37.create({ flex: { flex: 1 } });
 
 // src/native/search-field.tsx
+import { useDebouncedCallback } from "@krizaka/pacer/react";
 import * as React35 from "react";
 import { Pressable as Pressable19, StyleSheet as StyleSheet38, TextInput as TextInput6, View as View42 } from "react-native";
 import Svg22, { Circle as Circle12, Path as Path18 } from "react-native-svg";
@@ -4157,13 +4420,12 @@ function SearchField({ label, value, defaultValue = "", onValueChange, onSearch,
   const { theme, radius: radius3 } = useTheme();
   const [own, setOwn] = React35.useState(defaultValue);
   const query = value ?? own;
-  const timer2 = React35.useRef(void 0);
-  React35.useEffect(() => () => clearTimeout(timer2.current), []);
+  const search = useDebouncedCallback((next) => onSearch?.(next), debounce);
   const change = (next) => {
     if (value === void 0) setOwn(next);
     onValueChange?.(next);
-    clearTimeout(timer2.current);
-    if (onSearch) timer2.current = setTimeout(() => onSearch(next), debounce);
+    search.cancel();
+    if (onSearch) search(next);
   };
   const field = /* @__PURE__ */ jsxs43(View42, { style: [styles38.frame, { borderRadius: radius3.md, borderColor: theme.borderDefault, backgroundColor: theme.surface2 }, style], children: [
     /* @__PURE__ */ jsxs43(Svg22, { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", stroke: theme.textSecondary, strokeWidth: 2, strokeLinecap: "round", "aria-hidden": true, children: [
@@ -4185,7 +4447,7 @@ function SearchField({ label, value, defaultValue = "", onValueChange, onSearch,
         clearButtonMode: "never",
         onChangeText: change,
         onSubmitEditing: () => {
-          clearTimeout(timer2.current);
+          search.cancel();
           onSearch?.(query);
           onSubmit?.(query);
         },
@@ -4275,10 +4537,125 @@ var styles39 = StyleSheet39.create({
   disabled: { opacity: 0.4 }
 });
 
-// src/native/skeleton.tsx
+// src/native/showcase.tsx
 import * as React36 from "react";
-import { Animated as Animated21 } from "react-native";
-import { jsx as jsx50 } from "react/jsx-runtime";
+import { Animated as Animated21, AppState, Easing as Easing12, FlatList, Pressable as Pressable21, StyleSheet as StyleSheet40, View as View44 } from "react-native";
+import Svg23, { Path as Path19 } from "react-native-svg";
+import { jsx as jsx50, jsxs as jsxs44 } from "react/jsx-runtime";
+var showcaseLabels = {
+  previous: "Previous slide",
+  next: "Next slide",
+  pause: "Pause the slideshow",
+  play: "Play the slideshow",
+  goTo: (n) => `Go to slide ${n}`,
+  counter: (n, total) => `Slide ${n} of ${total}`,
+  slide: (n, total) => `${n} of ${total}`
+};
+function Showcase({ label, items: items2, getId, renderItem, getTitle, interval = 6e3, autoplay = true, loop = true, onIndexChange, labels = showcaseLabels, style }) {
+  const { theme } = useTheme();
+  const reduced = useReducedMotion();
+  const total = items2.length;
+  const [current, setCurrent] = React36.useState(0);
+  const [width, setWidth] = React36.useState(0);
+  const [paused, setPaused] = React36.useState(false);
+  const [dragging, setDragging] = React36.useState(false);
+  const [background, setBackground] = React36.useState(false);
+  const [announce, setAnnounce] = React36.useState(false);
+  const list = React36.useRef(null);
+  const [fill] = React36.useState(() => new Animated21.Value(0));
+  const progress = React36.useRef(0);
+  React36.useEffect(() => {
+    const id = fill.addListener(({ value }) => {
+      progress.current = value;
+    });
+    const subscription = AppState.addEventListener("change", (state) => setBackground(state !== "active"));
+    return () => {
+      fill.removeListener(id);
+      subscription.remove();
+    };
+  }, [fill]);
+  const go = (to, user) => {
+    if (total === 0) return;
+    const next = loop ? (to + total) % total : Math.min(Math.max(to, 0), total - 1);
+    if (next === current) return;
+    setAnnounce(user);
+    setCurrent(next);
+    list.current?.scrollToOffset({ offset: next * width, animated: !reduced });
+    onIndexChange?.(next, user);
+  };
+  const playing = autoplay && !reduced && total > 1;
+  const running = playing && !paused && !dragging && !background && !(!loop && current === total - 1);
+  React36.useEffect(() => {
+    fill.setValue(0);
+    progress.current = 0;
+  }, [current, fill]);
+  React36.useEffect(() => {
+    if (!running) return;
+    const animation = Animated21.timing(fill, { toValue: 1, duration: Math.max(1, interval * (1 - progress.current)), easing: Easing12.linear, useNativeDriver: false });
+    animation.start(({ finished }) => {
+      if (finished) go(current + 1, false);
+    });
+    return () => animation.stop();
+  }, [running, current, interval]);
+  const item = items2[current];
+  const title = item !== void 0 ? getTitle?.(item) : void 0;
+  const control = [styles40.control, { borderColor: theme.borderDefault, backgroundColor: theme.surface1 }];
+  const icon = (d) => /* @__PURE__ */ jsx50(Svg23, { width: 16, height: 16, viewBox: "0 0 24 24", "aria-hidden": true, children: /* @__PURE__ */ jsx50(Path19, { d, stroke: theme.textSecondary, strokeWidth: 2.2, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" }) });
+  return /* @__PURE__ */ jsxs44(View44, { role: "group", "aria-label": label, style: [styles40.root, style], children: [
+    /* @__PURE__ */ jsx50(View44, { "aria-live": announce ? "polite" : "off", onLayout: (e) => setWidth(e.nativeEvent.layout.width), children: /* @__PURE__ */ jsx50(
+      FlatList,
+      {
+        ref: list,
+        horizontal: true,
+        pagingEnabled: true,
+        focusable: true,
+        showsHorizontalScrollIndicator: false,
+        data: items2,
+        keyExtractor: getId,
+        getItemLayout: (_, index) => ({ length: width, offset: width * index, index }),
+        onScrollBeginDrag: () => setDragging(true),
+        onScrollEndDrag: () => setDragging(false),
+        onMomentumScrollEnd: (e) => {
+          const next = Math.round(e.nativeEvent.contentOffset.x / Math.max(width, 1));
+          if (next !== current && next >= 0 && next < total) {
+            setAnnounce(true);
+            setCurrent(next);
+            onIndexChange?.(next, true);
+          }
+        },
+        renderItem: ({ item: slide, index }) => /* @__PURE__ */ jsx50(View44, { role: "group", "aria-label": labels.slide(index + 1, total), style: { width }, children: Math.abs(index - current) <= 1 ? renderItem(slide, { index, active: index === current }) : null })
+      }
+    ) }),
+    /* @__PURE__ */ jsx50(View44, { style: styles40.segments, children: items2.map((slide, i) => /* @__PURE__ */ jsx50(Pressable21, { role: "button", "aria-label": labels.goTo(i + 1, total), "aria-current": i === current ? true : void 0, onPress: () => go(i, true), style: styles40.segment, children: /* @__PURE__ */ jsxs44(View44, { style: [styles40.track, { backgroundColor: theme.surface3 }], children: [
+      i < current || i === current && !playing ? /* @__PURE__ */ jsx50(View44, { style: [StyleSheet40.absoluteFill, { backgroundColor: theme.accent }] }) : null,
+      i === current && playing ? /* @__PURE__ */ jsx50(Animated21.View, { style: [styles40.fill, { backgroundColor: theme.accent, width: fill.interpolate({ inputRange: [0, 1], outputRange: ["0%", "100%"] }) }] }) : null
+    ] }) }, getId(slide))) }),
+    /* @__PURE__ */ jsxs44(View44, { style: styles40.bar, children: [
+      /* @__PURE__ */ jsxs44(Txt, { variant: "caption", tone: "secondary", numberOfLines: 1, style: styles40.counter, children: [
+        title ? `${title} \xB7 ` : "",
+        labels.counter(current + 1, total)
+      ] }),
+      /* @__PURE__ */ jsx50(Pressable21, { role: "button", "aria-label": labels.previous, disabled: !loop && current === 0, hitSlop: 6, onPress: () => go(current - 1, true), style: control, children: icon("M15 5l-7 7 7 7") }),
+      playing ? /* @__PURE__ */ jsx50(Pressable21, { role: "button", "aria-label": paused ? labels.play : labels.pause, hitSlop: 6, onPress: () => setPaused(!paused), style: control, children: icon(paused ? "M8 5.5v13l10-6.5Z" : "M8 5v14M16 5v14") }) : null,
+      /* @__PURE__ */ jsx50(Pressable21, { role: "button", "aria-label": labels.next, disabled: !loop && current === total - 1, hitSlop: 6, onPress: () => go(current + 1, true), style: control, children: icon("M9 5l7 7-7 7") })
+    ] })
+  ] });
+}
+var styles40 = StyleSheet40.create({
+  root: { gap: 8 },
+  segments: { flexDirection: "row", gap: 4 },
+  segment: { flex: 1, height: 24, justifyContent: "center" },
+  track: { height: 4, borderRadius: 2, overflow: "hidden" },
+  fill: { position: "absolute", left: 0, top: 0, bottom: 0 },
+  bar: { flexDirection: "row", alignItems: "center", gap: 8 },
+  counter: { flex: 1 },
+  control: { width: 36, height: 36, borderRadius: 18, borderWidth: 1, alignItems: "center", justifyContent: "center" }
+});
+
+// src/native/skeleton.tsx
+import * as React37 from "react";
+import { Animated as Animated22 } from "react-native";
+import { jsx as jsx51 } from "react/jsx-runtime";
 var SHAPE = {
   text: { width: "100%", height: 12, radius: 4 },
   circle: { width: 40, height: 40, radius: 9999 },
@@ -4287,13 +4664,13 @@ var SHAPE = {
 function Skeleton({ shape = "text", width, height, style, testID }) {
   const { theme } = useTheme();
   const reduce = useReducedMotion();
-  const [opacity] = React36.useState(() => new Animated21.Value(1));
-  React36.useEffect(() => {
+  const [opacity] = React37.useState(() => new Animated22.Value(1));
+  React37.useEffect(() => {
     if (reduce) return;
-    const loop = Animated21.loop(
-      Animated21.sequence([
-        Animated21.timing(opacity, { toValue: 0.5, duration: 900, useNativeDriver: true }),
-        Animated21.timing(opacity, { toValue: 1, duration: 900, useNativeDriver: true })
+    const loop = Animated22.loop(
+      Animated22.sequence([
+        Animated22.timing(opacity, { toValue: 0.5, duration: 900, useNativeDriver: true }),
+        Animated22.timing(opacity, { toValue: 1, duration: 900, useNativeDriver: true })
       ])
     );
     loop.start();
@@ -4304,8 +4681,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__ */ jsx50(
-    Animated21.View,
+  return /* @__PURE__ */ jsx51(
+    Animated22.View,
     {
       testID,
       "aria-hidden": true,
@@ -4318,10 +4695,10 @@ function Skeleton({ shape = "text", width, height, style, testID }) {
 }
 
 // src/native/slider.tsx
-import * as React37 from "react";
-import { PanResponder as PanResponder2, StyleSheet as StyleSheet40, Text as Text17, View as View44 } from "react-native";
-import Svg23, { Defs as Defs11, LinearGradient as LinearGradient11, Rect as Rect4, Stop as Stop11 } from "react-native-svg";
-import { jsx as jsx51, jsxs as jsxs44 } from "react/jsx-runtime";
+import * as React38 from "react";
+import { PanResponder as PanResponder2, StyleSheet as StyleSheet41, Text as Text17, View as View45 } from "react-native";
+import Svg24, { Defs as Defs11, LinearGradient as LinearGradient11, Rect as Rect4, Stop as Stop11 } from "react-native-svg";
+import { jsx as jsx52, jsxs as jsxs45 } from "react/jsx-runtime";
 var THUMB = 26;
 var toArray = (v) => v === void 0 ? void 0 : typeof v === "number" ? [v] : [...v];
 function Slider({
@@ -4347,20 +4724,20 @@ function Slider({
   const { theme, radius: radius3, haptic } = useTheme();
   const range = Array.isArray(value ?? defaultValue);
   const vertical = orientation === "vertical";
-  const [inner, setInner] = React37.useState(() => toArray(defaultValue) ?? [min]);
+  const [inner, setInner] = React38.useState(() => toArray(defaultValue) ?? [min]);
   const current = toArray(value) ?? inner;
-  const [length, setLength] = React37.useState(0);
-  const [dragging, setDragging] = React37.useState(null);
+  const [length, setLength] = React38.useState(0);
+  const [dragging, setDragging] = React38.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 = React37.useRef({ current, length, vertical, disabled });
-  React37.useLayoutEffect(() => {
+  const live = React38.useRef({ current, length, vertical, disabled });
+  React38.useLayoutEffect(() => {
     live.current = { current, length, vertical, disabled };
   });
-  const active = React37.useRef(0);
-  const start = React37.useRef(0);
+  const active = React38.useRef(0);
+  const start = React38.useRef(0);
   const set = (next) => {
     if (value === void 0) setInner(next);
     onValueChange?.(out(next));
@@ -4381,11 +4758,11 @@ function Slider({
     return min + p * (max - min);
   };
   const commit = () => onValueCommit?.(out(live.current.current));
-  const handlers = React37.useRef({ move, at, commit });
-  React37.useLayoutEffect(() => {
+  const handlers = React38.useRef({ move, at, commit });
+  React38.useLayoutEffect(() => {
     handlers.current = { move, at, commit };
   });
-  const [responder] = React37.useState(
+  const [responder] = React38.useState(
     () => PanResponder2.create({
       onStartShouldSetPanResponder: () => !live.current.disabled,
       onMoveShouldSetPanResponder: () => !live.current.disabled,
@@ -4413,24 +4790,24 @@ function Slider({
   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__ */ jsxs44(View44, { style: [styles40.root, vertical ? styles40.rootVertical : null, disabled ? styles40.disabled : null, style], children: [
-    showLabel ? /* @__PURE__ */ jsxs44(View44, { style: styles40.header, children: [
-      /* @__PURE__ */ jsx51(Text17, { style: [styles40.label, { color: theme.textSecondary }], children: label }),
-      /* @__PURE__ */ jsx51(Text17, { "aria-hidden": true, style: [styles40.value, { color: theme.textSecondary }], children: current.map(formatValue).join(" \u2013 ") })
+  return /* @__PURE__ */ jsxs45(View45, { style: [styles41.root, vertical ? styles41.rootVertical : null, disabled ? styles41.disabled : null, style], children: [
+    showLabel ? /* @__PURE__ */ jsxs45(View45, { style: styles41.header, children: [
+      /* @__PURE__ */ jsx52(Text17, { style: [styles41.label, { color: theme.textSecondary }], children: label }),
+      /* @__PURE__ */ jsx52(Text17, { "aria-hidden": true, style: [styles41.value, { color: theme.textSecondary }], children: current.map(formatValue).join(" \u2013 ") })
     ] }) : null,
-    /* @__PURE__ */ jsxs44(View44, { ...responder.panHandlers, style: vertical ? styles40.controlVertical : styles40.control, children: [
-      /* @__PURE__ */ jsxs44(View44, { onLayout, pointerEvents: "none", style: [vertical ? styles40.trackVertical : styles40.track, { borderRadius: radius3.full, backgroundColor: theme.surface3 }], children: [
-        /* @__PURE__ */ jsx51(View44, { style: [styles40.fill, fill, { borderRadius: radius3.full, overflow: "hidden", backgroundColor: theme.accent }], children: tone3 === "gradient" ? /* @__PURE__ */ jsxs44(Svg23, { width: "100%", height: "100%", "aria-hidden": true, children: [
-          /* @__PURE__ */ jsx51(Defs11, { children: /* @__PURE__ */ jsxs44(LinearGradient11, { id: gradientId, x1: "0", y1: vertical ? "1" : "0", x2: vertical ? "0" : "1", y2: "0", children: [
-            /* @__PURE__ */ jsx51(Stop11, { offset: "0", stopColor: theme.accent }),
-            /* @__PURE__ */ jsx51(Stop11, { offset: "1", stopColor: theme.accent2 })
+    /* @__PURE__ */ jsxs45(View45, { ...responder.panHandlers, style: vertical ? styles41.controlVertical : styles41.control, children: [
+      /* @__PURE__ */ jsxs45(View45, { onLayout, pointerEvents: "none", style: [vertical ? styles41.trackVertical : styles41.track, { borderRadius: radius3.full, backgroundColor: theme.surface3 }], children: [
+        /* @__PURE__ */ jsx52(View45, { style: [styles41.fill, fill, { borderRadius: radius3.full, overflow: "hidden", backgroundColor: theme.accent }], children: tone3 === "gradient" ? /* @__PURE__ */ jsxs45(Svg24, { width: "100%", height: "100%", "aria-hidden": true, children: [
+          /* @__PURE__ */ jsx52(Defs11, { children: /* @__PURE__ */ jsxs45(LinearGradient11, { id: gradientId, x1: "0", y1: vertical ? "1" : "0", x2: vertical ? "0" : "1", y2: "0", children: [
+            /* @__PURE__ */ jsx52(Stop11, { offset: "0", stopColor: theme.accent }),
+            /* @__PURE__ */ jsx52(Stop11, { offset: "1", stopColor: theme.accent2 })
           ] }) }),
-          /* @__PURE__ */ jsx51(Rect4, { width: "100%", height: "100%", fill: `url(#${gradientId})` })
+          /* @__PURE__ */ jsx52(Rect4, { width: "100%", height: "100%", fill: `url(#${gradientId})` })
         ] }) : null }),
-        tickValues.map((t) => /* @__PURE__ */ jsx51(View44, { style: [vertical ? styles40.tickVertical : styles40.tick, along(pct(t)), { backgroundColor: t > lo && t < hi ? theme.onAccent : theme.borderStrong }] }, t))
+        tickValues.map((t) => /* @__PURE__ */ jsx52(View45, { style: [vertical ? styles41.tickVertical : styles41.tick, along(pct(t)), { backgroundColor: t > lo && t < hi ? theme.onAccent : theme.borderStrong }] }, t))
       ] }),
-      current.map((v, i) => /* @__PURE__ */ jsx51(
-        View44,
+      current.map((v, i) => /* @__PURE__ */ jsx52(
+        View45,
         {
           accessible: true,
           role: "slider",
@@ -4449,16 +4826,16 @@ function Slider({
             onValueCommit?.(out(values));
           },
           pointerEvents: "none",
-          style: [styles40.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__ */ jsx51(View44, { "aria-hidden": true, style: [vertical ? styles40.bubbleVertical : styles40.bubble, { backgroundColor: theme.textPrimary, borderRadius: radius3.md }], children: /* @__PURE__ */ jsx51(Text17, { style: [styles40.bubbleText, { color: theme.surface0 }], children: formatValue(v) }) }) : null
+          style: [styles41.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__ */ jsx52(View45, { "aria-hidden": true, style: [vertical ? styles41.bubbleVertical : styles41.bubble, { backgroundColor: theme.textPrimary, borderRadius: radius3.md }], children: /* @__PURE__ */ jsx52(Text17, { style: [styles41.bubbleText, { color: theme.surface0 }], children: formatValue(v) }) }) : null
         },
         i
       ))
     ] }),
-    marks2?.length && !vertical ? /* @__PURE__ */ jsx51(View44, { "aria-hidden": true, style: styles40.marks, children: marks2.map((m) => /* @__PURE__ */ jsx51(Text17, { style: [styles40.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
+    marks2?.length && !vertical ? /* @__PURE__ */ jsx52(View45, { "aria-hidden": true, style: styles41.marks, children: marks2.map((m) => /* @__PURE__ */ jsx52(Text17, { style: [styles41.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 styles40 = StyleSheet40.create({
+var styles41 = StyleSheet41.create({
   root: { gap: 8, alignSelf: "stretch" },
   rootVertical: { alignSelf: "flex-start", alignItems: "center" },
   header: { flexDirection: "row", justifyContent: "space-between", alignItems: "baseline", gap: 12 },
@@ -4494,10 +4871,10 @@ var styles40 = StyleSheet40.create({
 
 // src/native/spinner.tsx
 import { ActivityIndicator as ActivityIndicator2 } from "react-native";
-import { jsx as jsx52 } from "react/jsx-runtime";
+import { jsx as jsx53 } from "react/jsx-runtime";
 function Spinner({ label, size = "md", ...props }) {
   const { theme } = useTheme();
-  return /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx53(
     ActivityIndicator2,
     {
       accessible: true,
@@ -4512,17 +4889,17 @@ function Spinner({ label, size = "md", ...props }) {
 }
 
 // src/native/splash-handoff.tsx
-import * as React38 from "react";
-import { Animated as Animated22, Easing as Easing12, StyleSheet as StyleSheet41, View as View45 } from "react-native";
-import { jsx as jsx53 } from "react/jsx-runtime";
+import * as React39 from "react";
+import { Animated as Animated23, Easing as Easing13, StyleSheet as StyleSheet42, View as View46 } from "react-native";
+import { jsx as jsx54 } from "react/jsx-runtime";
 function SplashHandoff({ product, ready, onShown, onDone, size = 96, background, label, duration = 320, style }) {
   const { theme } = useTheme();
   const reduce = useReducedMotion();
-  const [opacity] = React38.useState(() => new Animated22.Value(1));
-  const [gone, setGone] = React38.useState(false);
-  React38.useEffect(() => {
+  const [opacity] = React39.useState(() => new Animated23.Value(1));
+  const [gone, setGone] = React39.useState(false);
+  React39.useEffect(() => {
     if (!ready) return;
-    const animation = Animated22.timing(opacity, { toValue: 0, duration: reduce ? 0 : duration, easing: Easing12.out(Easing12.ease), useNativeDriver: true });
+    const animation = Animated23.timing(opacity, { toValue: 0, duration: reduce ? 0 : duration, easing: Easing13.out(Easing13.ease), useNativeDriver: true });
     animation.start(({ finished }) => {
       if (finished) {
         setGone(true);
@@ -4532,8 +4909,8 @@ function SplashHandoff({ product, ready, onShown, onDone, size = 96, background,
     return () => animation.stop();
   }, [ready, reduce, duration, opacity, onDone]);
   if (gone) return null;
-  return /* @__PURE__ */ jsx53(
-    Animated22.View,
+  return /* @__PURE__ */ jsx54(
+    Animated23.View,
     {
       accessible: true,
       role: "progressbar",
@@ -4541,30 +4918,30 @@ function SplashHandoff({ product, ready, onShown, onDone, size = 96, background,
       "aria-busy": true,
       pointerEvents: ready ? "none" : "auto",
       onLayout: onShown,
-      style: [StyleSheet41.absoluteFill, styles41.root, { backgroundColor: background ?? theme.surface0, opacity }, style],
-      children: /* @__PURE__ */ jsx53(View45, { children: /* @__PURE__ */ jsx53(ProductMark, { id: product, size, animated: true }) })
+      style: [StyleSheet42.absoluteFill, styles42.root, { backgroundColor: background ?? theme.surface0, opacity }, style],
+      children: /* @__PURE__ */ jsx54(View46, { children: /* @__PURE__ */ jsx54(ProductMark, { id: product, size, animated: true }) })
     }
   );
 }
-var styles41 = StyleSheet41.create({ root: { alignItems: "center", justifyContent: "center", zIndex: 100 } });
+var styles42 = StyleSheet42.create({ root: { alignItems: "center", justifyContent: "center", zIndex: 100 } });
 
 // src/native/step-progress.tsx
-import { Pressable as Pressable21, StyleSheet as StyleSheet42, View as View46 } from "react-native";
-import Svg24, { Path as Path19 } from "react-native-svg";
-import { jsx as jsx54, jsxs as jsxs45 } from "react/jsx-runtime";
+import { Pressable as Pressable22, StyleSheet as StyleSheet43, View as View47 } from "react-native";
+import Svg25, { Path as Path20 } from "react-native-svg";
+import { jsx as jsx55, jsxs as jsxs46 } from "react/jsx-runtime";
 function StepProgress({ step, total, label, backLabel, onBack, trailing, style }) {
   const { theme, insets } = useTheme();
-  const words = label(step, total);
-  return /* @__PURE__ */ jsxs45(View46, { style: [styles42.root, { paddingTop: insets.top + 8 }, style], children: [
-    /* @__PURE__ */ jsxs45(View46, { style: styles42.row, children: [
-      onBack && backLabel ? /* @__PURE__ */ jsx54(Pressable21, { role: "button", "aria-label": backLabel, hitSlop: 10, onPress: onBack, style: styles42.back, children: /* @__PURE__ */ jsx54(Svg24, { width: 22, height: 22, viewBox: "0 0 24 24", "aria-hidden": true, children: /* @__PURE__ */ jsx54(Path19, { d: "M15 5l-7 7 7 7", stroke: theme.textPrimary, strokeWidth: 2.4, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" }) }) }) : /* @__PURE__ */ jsx54(View46, { style: styles42.back }),
-      /* @__PURE__ */ jsx54(View46, { accessible: true, role: "progressbar", "aria-label": words, "aria-valuemin": 1, "aria-valuemax": total, "aria-valuenow": step, "aria-valuetext": words, style: styles42.bars, children: Array.from({ length: total }, (_, i) => /* @__PURE__ */ jsx54(View46, { style: [styles42.bar, { backgroundColor: i < step ? theme.accent : theme.surface3 }] }, i)) }),
-      /* @__PURE__ */ jsx54(View46, { style: styles42.trailing, children: trailing })
+  const words2 = label(step, total);
+  return /* @__PURE__ */ jsxs46(View47, { style: [styles43.root, { paddingTop: insets.top + 8 }, style], children: [
+    /* @__PURE__ */ jsxs46(View47, { style: styles43.row, children: [
+      onBack && backLabel ? /* @__PURE__ */ jsx55(Pressable22, { role: "button", "aria-label": backLabel, hitSlop: 10, onPress: onBack, style: styles43.back, children: /* @__PURE__ */ jsx55(Svg25, { width: 22, height: 22, viewBox: "0 0 24 24", "aria-hidden": true, children: /* @__PURE__ */ jsx55(Path20, { d: "M15 5l-7 7 7 7", stroke: theme.textPrimary, strokeWidth: 2.4, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" }) }) }) : /* @__PURE__ */ jsx55(View47, { style: styles43.back }),
+      /* @__PURE__ */ jsx55(View47, { accessible: true, role: "progressbar", "aria-label": words2, "aria-valuemin": 1, "aria-valuemax": total, "aria-valuenow": step, "aria-valuetext": words2, style: styles43.bars, children: Array.from({ length: total }, (_, i) => /* @__PURE__ */ jsx55(View47, { style: [styles43.bar, { backgroundColor: i < step ? theme.accent : theme.surface3 }] }, i)) }),
+      /* @__PURE__ */ jsx55(View47, { style: styles43.trailing, children: trailing })
     ] }),
-    /* @__PURE__ */ jsx54(Txt, { variant: "caption", tone: "secondary", style: styles42.words, "aria-hidden": true, children: words })
+    /* @__PURE__ */ jsx55(Txt, { variant: "caption", tone: "secondary", style: styles43.words, "aria-hidden": true, children: words2 })
   ] });
 }
-var styles42 = StyleSheet42.create({
+var styles43 = StyleSheet43.create({
   root: { paddingHorizontal: 12, gap: 6 },
   row: { flexDirection: "row", alignItems: "center", gap: 8 },
   back: { width: 40, height: 40, alignItems: "center", justifyContent: "center" },
@@ -4575,36 +4952,36 @@ var styles42 = StyleSheet42.create({
 });
 
 // src/native/stepper.tsx
-import { StyleSheet as StyleSheet43, View as View47 } from "react-native";
-import Svg25, { Circle as Circle13, Path as Path20 } from "react-native-svg";
-import { jsx as jsx55, jsxs as jsxs46 } from "react/jsx-runtime";
+import { StyleSheet as StyleSheet44, View as View48 } from "react-native";
+import Svg26, { Circle as Circle13, Path as Path21 } from "react-native-svg";
+import { jsx as jsx56, jsxs as jsxs47 } from "react/jsx-runtime";
 var WORDS = { done: "done", current: "in progress", upcoming: "to come", error: "failed" };
 function Stepper({ steps, current = 0, orientation = "vertical", statusLabels, "aria-label": label, style }) {
   const { theme } = useTheme();
-  const words = { ...WORDS, ...statusLabels };
+  const words2 = { ...WORDS, ...statusLabels };
   const vertical = orientation === "vertical";
-  return /* @__PURE__ */ jsx55(View47, { role: "list", "aria-label": label, style: [vertical ? styles43.column : styles43.row, style], children: steps.map((step, i) => {
+  return /* @__PURE__ */ jsx56(View48, { role: "list", "aria-label": label, style: [vertical ? styles44.column : styles44.row, style], children: steps.map((step, i) => {
     const status = step.status ?? (i < current ? "done" : i === current ? "current" : "upcoming");
     const last = i === steps.length - 1;
-    const node = status === "current" ? /* @__PURE__ */ jsx55(LoaderGlyph, { value: step.value ?? null, size: 24 }) : status === "error" ? /* @__PURE__ */ jsx55(LoaderGlyph, { state: "error", size: 24 }) : /* @__PURE__ */ jsxs46(Svg25, { width: 24, height: 24, viewBox: "0 0 24 24", "aria-hidden": true, children: [
-      /* @__PURE__ */ jsx55(Circle13, { cx: 12, cy: 12, r: 10, fill: status === "done" ? theme.accent : "none", stroke: status === "done" ? theme.accent : theme.borderStrong, strokeWidth: 2 }),
-      status === "done" ? /* @__PURE__ */ jsx55(Path20, { d: "M7.5 12.3l3 3 6-6.3", stroke: theme.onAccent, strokeWidth: 2.2, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" }) : null
+    const node = status === "current" ? /* @__PURE__ */ jsx56(LoaderGlyph, { value: step.value ?? null, size: 24 }) : status === "error" ? /* @__PURE__ */ jsx56(LoaderGlyph, { state: "error", size: 24 }) : /* @__PURE__ */ jsxs47(Svg26, { width: 24, height: 24, viewBox: "0 0 24 24", "aria-hidden": true, children: [
+      /* @__PURE__ */ jsx56(Circle13, { cx: 12, cy: 12, r: 10, fill: status === "done" ? theme.accent : "none", stroke: status === "done" ? theme.accent : theme.borderStrong, strokeWidth: 2 }),
+      status === "done" ? /* @__PURE__ */ jsx56(Path21, { d: "M7.5 12.3l3 3 6-6.3", stroke: theme.onAccent, strokeWidth: 2.2, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" }) : null
     ] });
-    const connector = !last ? /* @__PURE__ */ jsx55(View47, { "aria-hidden": true, style: [vertical ? styles43.vLine : styles43.hLine, { backgroundColor: status === "done" ? theme.accent : theme.borderDefault }] }) : null;
-    return /* @__PURE__ */ jsxs46(View47, { role: "listitem", accessible: true, "aria-label": `${step.title}, ${words[status]}`, style: vertical ? styles43.vStep : styles43.hStep, children: [
-      /* @__PURE__ */ jsxs46(View47, { style: vertical ? styles43.vRail : styles43.hRail, children: [
+    const connector = !last ? /* @__PURE__ */ jsx56(View48, { "aria-hidden": true, style: [vertical ? styles44.vLine : styles44.hLine, { backgroundColor: status === "done" ? theme.accent : theme.borderDefault }] }) : null;
+    return /* @__PURE__ */ jsxs47(View48, { role: "listitem", accessible: true, "aria-label": `${step.title}, ${words2[status]}`, style: vertical ? styles44.vStep : styles44.hStep, children: [
+      /* @__PURE__ */ jsxs47(View48, { style: vertical ? styles44.vRail : styles44.hRail, children: [
         node,
         connector
       ] }),
-      /* @__PURE__ */ jsxs46(View47, { style: [styles43.body, vertical && !last ? { paddingBottom: 20 } : null], children: [
-        /* @__PURE__ */ jsx55(Txt, { variant: "label", tone: status === "upcoming" ? "secondary" : "text", numberOfLines: vertical ? void 0 : 2, children: step.title }),
-        step.description ? /* @__PURE__ */ jsx55(Txt, { variant: "caption", tone: "secondary", children: step.description }) : null,
-        step.content && (status === "current" || status === "error") ? /* @__PURE__ */ jsx55(View47, { style: styles43.content, children: step.content }) : null
+      /* @__PURE__ */ jsxs47(View48, { style: [styles44.body, vertical && !last ? { paddingBottom: 20 } : null], children: [
+        /* @__PURE__ */ jsx56(Txt, { variant: "label", tone: status === "upcoming" ? "secondary" : "text", numberOfLines: vertical ? void 0 : 2, children: step.title }),
+        step.description ? /* @__PURE__ */ jsx56(Txt, { variant: "caption", tone: "secondary", children: step.description }) : null,
+        step.content && (status === "current" || status === "error") ? /* @__PURE__ */ jsx56(View48, { style: styles44.content, children: step.content }) : null
       ] })
     ] }, i);
   }) });
 }
-var styles43 = StyleSheet43.create({
+var styles44 = StyleSheet44.create({
   column: { gap: 0 },
   row: { flexDirection: "row" },
   vStep: { flexDirection: "row", gap: 12 },
@@ -4618,59 +4995,59 @@ var styles43 = StyleSheet43.create({
 });
 
 // src/native/swipe-deck.tsx
-import * as React39 from "react";
-import { AccessibilityInfo as AccessibilityInfo14, Animated as Animated23, Image as Image5, PanResponder as PanResponder3, Platform as Platform4, Pressable as Pressable22, StyleSheet as StyleSheet44, useWindowDimensions as useWindowDimensions2, View as View48 } from "react-native";
-import Svg26, { Defs as Defs12, LinearGradient as LinearGradient12, Path as Path21, Rect as Rect5, Stop as Stop12 } from "react-native-svg";
-import { Fragment as Fragment8, jsx as jsx56, jsxs as jsxs47 } from "react/jsx-runtime";
+import * as React40 from "react";
+import { AccessibilityInfo as AccessibilityInfo14, Animated as Animated24, Image as Image5, PanResponder as PanResponder3, Platform as Platform4, Pressable as Pressable23, StyleSheet as StyleSheet45, useWindowDimensions as useWindowDimensions2, View as View49 } from "react-native";
+import Svg27, { Defs as Defs12, LinearGradient as LinearGradient12, Path as Path22, Rect as Rect5, Stop as Stop12 } from "react-native-svg";
+import { Fragment as Fragment8, jsx as jsx57, jsxs as jsxs48 } from "react/jsx-runtime";
 function PersonCard({ photos, name, age, badge, meta, bio, footer, photoLabel = (n, t) => `Photo ${n} of ${t}`, style }) {
   const { theme, radius: radius3 } = useTheme();
-  const [index, setIndex] = React39.useState(0);
+  const [index, setIndex] = React40.useState(0);
   const gradient = useSvgId("kz-profile-");
-  const [box, setBox] = React39.useState(null);
+  const [box, setBox] = React40.useState(null);
   const photo = photos[index];
-  return /* @__PURE__ */ jsxs47(
-    View48,
+  return /* @__PURE__ */ jsxs48(
+    View49,
     {
       accessible: Platform4.OS !== "web",
       accessibilityActions: photos.length > 1 ? [{ name: "increment" }, { name: "decrement" }] : [],
       onAccessibilityAction: (e) => setIndex((i) => Math.max(0, Math.min(photos.length - 1, i + (e.nativeEvent.actionName === "increment" ? 1 : -1)))),
       role: Platform4.OS === "web" ? "group" : "img",
       "aria-label": [`${name}${age !== void 0 ? `, ${age}` : ""}`, bio, photos.length > 1 ? photoLabel(index + 1, photos.length) : null].filter(Boolean).join(". "),
-      style: [styles44.card, { borderRadius: radius3.xl, backgroundColor: theme.media }, style],
+      style: [styles45.card, { borderRadius: radius3.xl, backgroundColor: theme.media }, style],
       children: [
-        photo ? /* @__PURE__ */ jsx56(Image5, { testID: "person-card-photo", source: { uri: photo.uri }, style: StyleSheet44.absoluteFill, resizeMode: "cover" }) : null,
-        photos.length > 1 ? /* @__PURE__ */ jsxs47(Fragment8, { children: [
-          /* @__PURE__ */ jsx56(View48, { style: styles44.bars, "aria-hidden": true, children: photos.map((_, i) => /* @__PURE__ */ jsx56(View48, { style: [styles44.bar, { backgroundColor: theme.textOnMedia, opacity: i === index ? 1 : 0.4 }] }, i)) }),
-          /* @__PURE__ */ jsx56(Pressable22, { "aria-hidden": true, accessible: false, focusable: false, tabIndex: -1, style: [styles44.half, { left: 0 }], onPress: () => setIndex((i) => Math.max(0, i - 1)) }),
-          /* @__PURE__ */ jsx56(Pressable22, { "aria-hidden": true, accessible: false, focusable: false, tabIndex: -1, style: [styles44.half, { right: 0 }], onPress: () => setIndex((i) => Math.min(photos.length - 1, i + 1)) })
+        photo ? /* @__PURE__ */ jsx57(Image5, { testID: "person-card-photo", source: { uri: photo.uri }, style: StyleSheet45.absoluteFill, resizeMode: "cover" }) : null,
+        photos.length > 1 ? /* @__PURE__ */ jsxs48(Fragment8, { children: [
+          /* @__PURE__ */ jsx57(View49, { style: styles45.bars, "aria-hidden": true, children: photos.map((_, i) => /* @__PURE__ */ jsx57(View49, { style: [styles45.bar, { backgroundColor: theme.textOnMedia, opacity: i === index ? 1 : 0.4 }] }, i)) }),
+          /* @__PURE__ */ jsx57(Pressable23, { "aria-hidden": true, accessible: false, focusable: false, tabIndex: -1, style: [styles45.half, { left: 0 }], onPress: () => setIndex((i) => Math.max(0, i - 1)) }),
+          /* @__PURE__ */ jsx57(Pressable23, { "aria-hidden": true, accessible: false, focusable: false, tabIndex: -1, style: [styles45.half, { right: 0 }], onPress: () => setIndex((i) => Math.min(photos.length - 1, i + 1)) })
         ] }) : null,
-        /* @__PURE__ */ jsxs47(
-          View48,
+        /* @__PURE__ */ jsxs48(
+          View49,
           {
             testID: "person-card-overlay",
             pointerEvents: "box-none",
-            style: styles44.bottom,
+            style: styles45.bottom,
             onLayout: (e) => setBox({ width: e.nativeEvent.layout.width, height: e.nativeEvent.layout.height }),
             children: [
-              box ? /* @__PURE__ */ jsxs47(Svg26, { testID: "person-card-scrim", style: styles44.scrim, width: box.width, height: box.height, "aria-hidden": true, children: [
-                /* @__PURE__ */ jsx56(Defs12, { children: /* @__PURE__ */ jsxs47(LinearGradient12, { id: gradient, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-                  /* @__PURE__ */ jsx56(Stop12, { offset: "0", stopColor: theme.scrimStrong, stopOpacity: 0 }),
-                  /* @__PURE__ */ jsx56(Stop12, { offset: "0.5", stopColor: theme.scrimStrong, stopOpacity: 0.8 }),
-                  /* @__PURE__ */ jsx56(Stop12, { offset: "1", stopColor: theme.scrimStrong, stopOpacity: 1 })
+              box ? /* @__PURE__ */ jsxs48(Svg27, { testID: "person-card-scrim", style: styles45.scrim, width: box.width, height: box.height, "aria-hidden": true, children: [
+                /* @__PURE__ */ jsx57(Defs12, { children: /* @__PURE__ */ jsxs48(LinearGradient12, { id: gradient, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                  /* @__PURE__ */ jsx57(Stop12, { offset: "0", stopColor: theme.scrimStrong, stopOpacity: 0 }),
+                  /* @__PURE__ */ jsx57(Stop12, { offset: "0.5", stopColor: theme.scrimStrong, stopOpacity: 0.8 }),
+                  /* @__PURE__ */ jsx57(Stop12, { offset: "1", stopColor: theme.scrimStrong, stopOpacity: 1 })
                 ] }) }),
-                /* @__PURE__ */ jsx56(Rect5, { x: 0, y: 0, width: box.width, height: box.height, fill: `url(#${gradient})` })
+                /* @__PURE__ */ jsx57(Rect5, { x: 0, y: 0, width: box.width, height: box.height, fill: `url(#${gradient})` })
               ] }) : null,
-              /* @__PURE__ */ jsxs47(View48, { style: styles44.text, children: [
-                /* @__PURE__ */ jsxs47(View48, { style: styles44.nameRow, children: [
-                  /* @__PURE__ */ jsxs47(Txt, { variant: "display", tone: "onMedia", style: styles44.name, numberOfLines: 1, children: [
+              /* @__PURE__ */ jsxs48(View49, { style: styles45.text, children: [
+                /* @__PURE__ */ jsxs48(View49, { style: styles45.nameRow, children: [
+                  /* @__PURE__ */ jsxs48(Txt, { variant: "display", tone: "onMedia", style: styles45.name, numberOfLines: 1, children: [
                     name,
-                    age !== void 0 ? /* @__PURE__ */ jsx56(Txt, { variant: "display", tone: "onMedia", style: styles44.age, children: `  ${age}` }) : null
+                    age !== void 0 ? /* @__PURE__ */ jsx57(Txt, { variant: "display", tone: "onMedia", style: styles45.age, children: `  ${age}` }) : null
                   ] }),
                   badge
                 ] }),
                 meta,
-                bio ? /* @__PURE__ */ jsx56(Txt, { tone: "onMedia", numberOfLines: 2, children: bio }) : null,
-                footer ? /* @__PURE__ */ jsx56(View48, { style: styles44.footer, children: footer }) : null
+                bio ? /* @__PURE__ */ jsx57(Txt, { tone: "onMedia", numberOfLines: 2, children: bio }) : null,
+                footer ? /* @__PURE__ */ jsx57(View49, { style: styles45.footer, children: footer }) : null
               ] })
             ]
           }
@@ -4679,13 +5056,13 @@ function PersonCard({ photos, name, age, badge, meta, bio, footer, photoLabel =
     }
   );
 }
-function SwipeDeck({ items: items2, getId, renderCard, onSwipe, empty, labels, hideButtons, style }) {
+function SwipeDeck({ items: items2, getId, renderCard, onSwipe, empty: empty2, labels, hideButtons, style }) {
   const { theme, haptic } = useTheme();
   const reduce = useReducedMotion();
   const { width } = useWindowDimensions2();
-  const [x] = React39.useState(() => new Animated23.Value(0));
+  const [x] = React40.useState(() => new Animated24.Value(0));
   const top = items2[0];
-  const decide = React39.useCallback(
+  const decide = React40.useCallback(
     (direction) => {
       if (!top) return;
       haptic("impact");
@@ -4695,18 +5072,18 @@ function SwipeDeck({ items: items2, getId, renderCard, onSwipe, empty, labels, h
         if (items2.length === 1 && labels.empty) AccessibilityInfo14.announceForAccessibility(labels.empty);
       };
       if (reduce) return done();
-      Animated23.timing(x, { toValue: (direction === "like" ? 1.4 : -1.4) * width, duration: 220, useNativeDriver: true }).start(done);
+      Animated24.timing(x, { toValue: (direction === "like" ? 1.4 : -1.4) * width, duration: 220, useNativeDriver: true }).start(done);
     },
     [top, haptic, reduce, x, width, onSwipe, items2.length, labels.empty]
   );
-  const pan = React39.useMemo(
+  const pan = React40.useMemo(
     () => PanResponder3.create({
       onMoveShouldSetPanResponder: (_, g) => Math.abs(g.dx) > 8 && Math.abs(g.dx) > Math.abs(g.dy),
       onPanResponderMove: (_, g) => x.setValue(g.dx),
       onPanResponderRelease: (_, g) => {
         if (g.dx > width / 3 || g.vx > 1) decide("like");
         else if (g.dx < -width / 3 || g.vx < -1) decide("pass");
-        else Animated23.spring(x, { toValue: 0, useNativeDriver: true, friction: 6 }).start();
+        else Animated24.spring(x, { toValue: 0, useNativeDriver: true, friction: 6 }).start();
       }
     }),
     [x, width, decide]
@@ -4714,27 +5091,27 @@ function SwipeDeck({ items: items2, getId, renderCard, onSwipe, empty, labels, h
   const rotate = x.interpolate({ inputRange: [-width, 0, width], outputRange: ["-14deg", "0deg", "14deg"] });
   const likeOpacity = x.interpolate({ inputRange: [0, width / 4], outputRange: [0, 1], extrapolate: "clamp" });
   const passOpacity = x.interpolate({ inputRange: [-width / 4, 0], outputRange: [1, 0], extrapolate: "clamp" });
-  const button = (direction) => /* @__PURE__ */ jsx56(
-    Pressable22,
+  const button = (direction) => /* @__PURE__ */ jsx57(
+    Pressable23,
     {
       role: "button",
       "aria-label": direction === "like" ? labels.like : labels.pass,
       disabled: !top,
       onPress: () => decide(direction),
       style: ({ pressed }) => [
-        styles44.button,
+        styles45.button,
         { borderColor: direction === "like" ? theme.success : theme.danger, backgroundColor: theme.surface1, transform: [{ scale: pressed ? 0.92 : 1 }], opacity: top ? 1 : 0.4 }
       ],
-      children: /* @__PURE__ */ jsx56(Svg26, { width: 28, height: 28, viewBox: "0 0 24 24", "aria-hidden": true, children: direction === "like" ? /* @__PURE__ */ jsx56(Path21, { d: "M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z", fill: theme.success }) : /* @__PURE__ */ jsx56(Path21, { d: "M6 6l12 12M18 6 6 18", stroke: theme.danger, strokeWidth: 3, strokeLinecap: "round" }) })
+      children: /* @__PURE__ */ jsx57(Svg27, { width: 28, height: 28, viewBox: "0 0 24 24", "aria-hidden": true, children: direction === "like" ? /* @__PURE__ */ jsx57(Path22, { d: "M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z", fill: theme.success }) : /* @__PURE__ */ jsx57(Path22, { d: "M6 6l12 12M18 6 6 18", stroke: theme.danger, strokeWidth: 3, strokeLinecap: "round" }) })
     }
   );
-  return /* @__PURE__ */ jsxs47(View48, { style: [styles44.deck, style], children: [
-    /* @__PURE__ */ jsxs47(View48, { style: styles44.stack, children: [
-      !top ? empty ?? null : null,
+  return /* @__PURE__ */ jsxs48(View49, { style: [styles45.deck, style], children: [
+    /* @__PURE__ */ jsxs48(View49, { style: styles45.stack, children: [
+      !top ? empty2 ?? null : null,
       items2.slice(0, 2).reverse().map((item) => {
         const isTop = item === top;
-        return /* @__PURE__ */ jsxs47(
-          Animated23.View,
+        return /* @__PURE__ */ jsxs48(
+          Animated24.View,
           {
             ...isTop ? pan.panHandlers : {},
             accessibilityActions: isTop ? [{ name: "like", label: labels.like }, { name: "pass", label: labels.pass }] : [],
@@ -4742,12 +5119,12 @@ function SwipeDeck({ items: items2, getId, renderCard, onSwipe, empty, labels, h
             "aria-hidden": !isTop,
             importantForAccessibility: isTop ? "auto" : "no-hide-descendants",
             pointerEvents: isTop ? "auto" : "none",
-            style: [StyleSheet44.absoluteFill, isTop ? { transform: [{ translateX: x }, { rotate }] } : { transform: [{ scale: 0.96 }], opacity: 0.9 }],
+            style: [StyleSheet45.absoluteFill, isTop ? { transform: [{ translateX: x }, { rotate }] } : { transform: [{ scale: 0.96 }], opacity: 0.9 }],
             children: [
               renderCard(item),
-              isTop ? /* @__PURE__ */ jsxs47(Fragment8, { children: [
-                /* @__PURE__ */ jsx56(Animated23.View, { pointerEvents: "none", style: [styles44.stamp, styles44.stampLike, { borderColor: theme.success, opacity: likeOpacity }], "aria-hidden": true, children: /* @__PURE__ */ jsx56(Txt, { variant: "title", style: { color: theme.success }, children: labels.likeStamp ?? labels.like.toUpperCase() }) }),
-                /* @__PURE__ */ jsx56(Animated23.View, { pointerEvents: "none", style: [styles44.stamp, styles44.stampPass, { borderColor: theme.danger, opacity: passOpacity }], "aria-hidden": true, children: /* @__PURE__ */ jsx56(Txt, { variant: "title", style: { color: theme.danger }, children: labels.passStamp ?? labels.pass.toUpperCase() }) })
+              isTop ? /* @__PURE__ */ jsxs48(Fragment8, { children: [
+                /* @__PURE__ */ jsx57(Animated24.View, { pointerEvents: "none", style: [styles45.stamp, styles45.stampLike, { borderColor: theme.success, opacity: likeOpacity }], "aria-hidden": true, children: /* @__PURE__ */ jsx57(Txt, { variant: "title", style: { color: theme.success }, children: labels.likeStamp ?? labels.like.toUpperCase() }) }),
+                /* @__PURE__ */ jsx57(Animated24.View, { pointerEvents: "none", style: [styles45.stamp, styles45.stampPass, { borderColor: theme.danger, opacity: passOpacity }], "aria-hidden": true, children: /* @__PURE__ */ jsx57(Txt, { variant: "title", style: { color: theme.danger }, children: labels.passStamp ?? labels.pass.toUpperCase() }) })
               ] }) : null
             ]
           },
@@ -4755,13 +5132,13 @@ function SwipeDeck({ items: items2, getId, renderCard, onSwipe, empty, labels, h
         );
       })
     ] }),
-    hideButtons ? null : /* @__PURE__ */ jsxs47(View48, { style: styles44.buttons, children: [
+    hideButtons ? null : /* @__PURE__ */ jsxs48(View49, { style: styles45.buttons, children: [
       button("pass"),
       button("like")
     ] })
   ] });
 }
-var styles44 = StyleSheet44.create({
+var styles45 = StyleSheet45.create({
   card: { flex: 1, overflow: "hidden" },
   bars: { position: "absolute", top: 8, left: 8, right: 8, flexDirection: "row", gap: 4 },
   bar: { flex: 1, height: 3, borderRadius: 2 },
@@ -4783,28 +5160,28 @@ var styles44 = StyleSheet44.create({
 });
 
 // src/native/swipeable-row.tsx
-import * as React40 from "react";
-import { Animated as Animated24, PanResponder as PanResponder4, Pressable as Pressable23, StyleSheet as StyleSheet45, View as View49 } from "react-native";
-import { jsx as jsx57, jsxs as jsxs48 } from "react/jsx-runtime";
+import * as React41 from "react";
+import { Animated as Animated25, PanResponder as PanResponder4, Pressable as Pressable24, StyleSheet as StyleSheet46, View as View50 } from "react-native";
+import { jsx as jsx58, jsxs as jsxs49 } from "react/jsx-runtime";
 var toneColor = (t, tone3) => ({ neutral: t.surface3, accent: t.accent, success: t.success, warning: t.warning, danger: t.danger })[tone3 ?? "neutral"];
 var toneText = (tone3) => tone3 === "neutral" || tone3 === void 0 ? "text" : "onAccent";
 function SwipeableRow({ children, trailing = [], leading = [], fullSwipe = 0.6, actionWidth = 80, onActivate, testID, style }) {
   const { theme, haptic } = useTheme();
   const reduce = useReducedMotion();
-  const [x] = React40.useState(() => new Animated24.Value(0));
-  const [width, setWidth] = React40.useState(0);
-  const rest = React40.useRef(0);
-  const armed = React40.useRef(false);
+  const [x] = React41.useState(() => new Animated25.Value(0));
+  const [width, setWidth] = React41.useState(0);
+  const rest = React41.useRef(0);
+  const armed = React41.useRef(false);
   const settle = (to) => {
     rest.current = to;
     if (reduce) x.setValue(to);
-    else Animated24.spring(x, { toValue: to, useNativeDriver: true, damping: 22, stiffness: 240 }).start();
+    else Animated25.spring(x, { toValue: to, useNativeDriver: true, damping: 22, stiffness: 240 }).start();
   };
   const run = (action) => {
     settle(0);
     action.onPress();
   };
-  const pan = React40.useMemo(
+  const pan = React41.useMemo(
     () => PanResponder4.create({
       onMoveShouldSetPanResponder: (_, g) => Math.abs(g.dx) > 8 && Math.abs(g.dx) > Math.abs(g.dy) * 1.5,
       onPanResponderMove: (_, g) => {
@@ -4833,19 +5210,19 @@ function SwipeableRow({ children, trailing = [], leading = [], fullSwipe = 0.6,
     [trailing, leading, fullSwipe, width, actionWidth]
     // eslint-disable-line react-hooks/exhaustive-deps -- run/settle are stable in effect
   );
-  const side = (actions, edge) => /* @__PURE__ */ jsx57(View49, { "aria-hidden": true, style: [styles45.side, edge === "left" ? { left: 0 } : { right: 0, flexDirection: "row-reverse" }], children: actions.map((action, i) => (
+  const side = (actions, edge) => /* @__PURE__ */ jsx58(View50, { "aria-hidden": true, style: [styles46.side, edge === "left" ? { left: 0 } : { right: 0, flexDirection: "row-reverse" }], children: actions.map((action, i) => (
     // eslint-disable-next-line react-hooks/refs -- runs on a press, never during render
-    /* @__PURE__ */ jsxs48(Pressable23, { focusable: false, tabIndex: -1, onPress: () => run(action), style: [styles45.action, { width: actionWidth, backgroundColor: toneColor(theme, action.tone) }], children: [
+    /* @__PURE__ */ jsxs49(Pressable24, { focusable: false, tabIndex: -1, onPress: () => run(action), style: [styles46.action, { width: actionWidth, backgroundColor: toneColor(theme, action.tone) }], children: [
       action.icon,
-      /* @__PURE__ */ jsx57(Txt, { variant: "caption", tone: toneText(action.tone), style: styles45.actionText, numberOfLines: 1, children: action.label })
+      /* @__PURE__ */ jsx58(Txt, { variant: "caption", tone: toneText(action.tone), style: styles46.actionText, numberOfLines: 1, children: action.label })
     ] }, i)
   )) });
   const all = [...leading, ...trailing];
-  return /* @__PURE__ */ jsxs48(View49, { style: [styles45.root, style], onLayout: (e) => setWidth(e.nativeEvent.layout.width), children: [
+  return /* @__PURE__ */ jsxs49(View50, { style: [styles46.root, style], onLayout: (e) => setWidth(e.nativeEvent.layout.width), children: [
     leading.length > 0 ? side(leading, "left") : null,
     trailing.length > 0 ? side(trailing, "right") : null,
-    /* @__PURE__ */ jsx57(
-      Animated24.View,
+    /* @__PURE__ */ jsx58(
+      Animated25.View,
       {
         ...pan.panHandlers,
         accessible: true,
@@ -4856,13 +5233,13 @@ function SwipeableRow({ children, trailing = [], leading = [], fullSwipe = 0.6,
           const action = all.find((a) => a.label === e.nativeEvent.actionName);
           if (action) action.onPress();
         },
-        style: [styles45.front, { backgroundColor: theme.surface0, transform: [{ translateX: x }] }],
+        style: [styles46.front, { backgroundColor: theme.surface0, transform: [{ translateX: x }] }],
         children
       }
     )
   ] });
 }
-var styles45 = StyleSheet45.create({
+var styles46 = StyleSheet46.create({
   root: { overflow: "hidden" },
   side: { position: "absolute", top: 0, bottom: 0, flexDirection: "row" },
   action: { alignItems: "center", justifyContent: "center", gap: 4, paddingHorizontal: 6 },
@@ -4871,30 +5248,30 @@ var styles45 = StyleSheet45.create({
 });
 
 // src/native/switch.tsx
-import * as React41 from "react";
-import { Animated as Animated25, Pressable as Pressable24, StyleSheet as StyleSheet46, Text as Text18, View as View50 } from "react-native";
-import { jsx as jsx58, jsxs as jsxs49 } from "react/jsx-runtime";
+import * as React42 from "react";
+import { Animated as Animated26, Pressable as Pressable25, StyleSheet as StyleSheet47, Text as Text18, View as View51 } from "react-native";
+import { jsx as jsx59, jsxs as jsxs50 } 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] = React41.useState(defaultChecked);
+  const [own, setOwn] = React42.useState(defaultChecked);
   const on = checked ?? own;
   const d = SIZES[size];
   const travel = d.w - d.knob - (d.h - d.knob);
-  const [x] = React41.useState(() => new Animated25.Value(on ? 1 : 0));
-  React41.useEffect(() => {
-    Animated25.timing(x, { toValue: on ? 1 : 0, duration: motion3.duration.base, useNativeDriver: true }).start();
+  const [x] = React42.useState(() => new Animated26.Value(on ? 1 : 0));
+  React42.useEffect(() => {
+    Animated26.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__ */ jsx58(View50, { style: [styles46.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__ */ jsx58(
-    Animated25.View,
+  const track = /* @__PURE__ */ jsx59(View51, { style: [styles47.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__ */ jsx59(
+    Animated26.View,
     {
       style: [
-        styles46.knob,
+        styles47.knob,
         {
           width: d.knob,
           height: d.knob,
@@ -4916,19 +5293,19 @@ function Switch({ label, checked, defaultChecked = false, onCheckedChange, descr
     onPress: toggle
   };
   if (!showLabel)
-    return /* @__PURE__ */ jsx58(Pressable24, { ...a11y, hitSlop: { top: (44 - d.h) / 2, bottom: (44 - d.h) / 2, left: Math.max(0, (44 - d.w) / 2), right: Math.max(0, (44 - d.w) / 2) }, style: [disabled ? styles46.disabled : null, style], children: track });
-  return /* @__PURE__ */ jsxs49(View50, { style: [styles46.root, style], children: [
-    /* @__PURE__ */ jsxs49(Pressable24, { ...a11y, style: [styles46.row, disabled ? styles46.disabled : null], children: [
-      /* @__PURE__ */ jsxs49(View50, { style: styles46.text, children: [
-        /* @__PURE__ */ jsx58(Text18, { style: [styles46.label, { color: theme.textPrimary }], children: label }),
-        description ? /* @__PURE__ */ jsx58(Text18, { style: [styles46.description, { color: theme.textSecondary }], children: description }) : null
+    return /* @__PURE__ */ jsx59(Pressable25, { ...a11y, hitSlop: { top: (44 - d.h) / 2, bottom: (44 - d.h) / 2, left: Math.max(0, (44 - d.w) / 2), right: Math.max(0, (44 - d.w) / 2) }, style: [disabled ? styles47.disabled : null, style], children: track });
+  return /* @__PURE__ */ jsxs50(View51, { style: [styles47.root, style], children: [
+    /* @__PURE__ */ jsxs50(Pressable25, { ...a11y, style: [styles47.row, disabled ? styles47.disabled : null], children: [
+      /* @__PURE__ */ jsxs50(View51, { style: styles47.text, children: [
+        /* @__PURE__ */ jsx59(Text18, { style: [styles47.label, { color: theme.textPrimary }], children: label }),
+        description ? /* @__PURE__ */ jsx59(Text18, { style: [styles47.description, { color: theme.textSecondary }], children: description }) : null
       ] }),
       track
     ] }),
-    error ? /* @__PURE__ */ jsx58(Text18, { role: "alert", "aria-live": "polite", style: [styles46.description, { color: theme.dangerText }], children: error }) : null
+    error ? /* @__PURE__ */ jsx59(Text18, { role: "alert", "aria-live": "polite", style: [styles47.description, { color: theme.dangerText }], children: error }) : null
   ] });
 }
-var styles46 = StyleSheet46.create({
+var styles47 = StyleSheet47.create({
   root: { gap: 2, alignSelf: "stretch" },
   row: { flexDirection: "row", alignItems: "center", gap: 16, minHeight: 48 },
   text: { flex: 1, gap: 2 },
@@ -4940,16 +5317,16 @@ var styles46 = StyleSheet46.create({
 });
 
 // src/native/tab-bar.tsx
-import { Pressable as Pressable25, StyleSheet as StyleSheet47, Text as Text19, View as View51 } from "react-native";
-import { jsx as jsx59, jsxs as jsxs50 } from "react/jsx-runtime";
+import { Pressable as Pressable26, StyleSheet as StyleSheet48, Text as Text19, View as View52 } from "react-native";
+import { jsx as jsx60, jsxs as jsxs51 } from "react/jsx-runtime";
 function TabBar({ items: items2, value, onValueChange, onReselect, "aria-label": label, style }) {
   const { theme, insets, haptic } = useTheme();
-  return /* @__PURE__ */ jsx59(View51, { role: "tablist", "aria-label": label, style: [styles47.bar, { backgroundColor: theme.glassBg, borderTopColor: theme.glassBorder, paddingBottom: Math.max(6, insets.bottom) }, style], children: items2.map((item) => {
+  return /* @__PURE__ */ jsx60(View52, { role: "tablist", "aria-label": label, style: [styles48.bar, { backgroundColor: theme.glassBg, borderTopColor: theme.glassBorder, paddingBottom: Math.max(6, insets.bottom) }, style], children: items2.map((item) => {
     const selected = item.value === value;
     const color = selected ? theme.accentText : theme.textSecondary;
     const badge = item.badge === true ? "" : typeof item.badge === "number" && item.badge > 0 ? item.badge > 99 ? "99+" : String(item.badge) : null;
-    return /* @__PURE__ */ jsxs50(
-      Pressable25,
+    return /* @__PURE__ */ jsxs51(
+      Pressable26,
       {
         role: "tab",
         "aria-selected": selected,
@@ -4958,22 +5335,22 @@ function TabBar({ items: items2, value, onValueChange, onReselect, "aria-label":
           if (selected) onReselect?.(item.value);
           else onValueChange(item.value);
         },
-        style: ({ pressed }) => [styles47.item, { opacity: pressed ? 0.7 : 1 }],
+        style: ({ pressed }) => [styles48.item, { opacity: pressed ? 0.7 : 1 }],
         children: [
-          /* @__PURE__ */ jsxs50(View51, { "aria-hidden": true, style: styles47.icon, children: [
+          /* @__PURE__ */ jsxs51(View52, { "aria-hidden": true, style: styles48.icon, children: [
             item.icon(selected, color),
-            badge !== null ? /* @__PURE__ */ jsx59(View51, { style: [badge ? styles47.count : styles47.dot, { backgroundColor: theme.danger, borderColor: theme.surface1 }], children: badge ? /* @__PURE__ */ jsx59(Text19, { style: [styles47.countText, { color: theme.onAccent }], children: badge }) : null }) : null
+            badge !== null ? /* @__PURE__ */ jsx60(View52, { style: [badge ? styles48.count : styles48.dot, { backgroundColor: theme.danger, borderColor: theme.surface1 }], children: badge ? /* @__PURE__ */ jsx60(Text19, { style: [styles48.countText, { color: theme.onAccent }], children: badge }) : null }) : null
           ] }),
-          /* @__PURE__ */ jsx59(Text19, { numberOfLines: 1, style: [styles47.label, { color, fontWeight: selected ? "700" : "500" }], children: item.label }),
-          badge !== null && item.badgeLabel ? /* @__PURE__ */ jsx59(Text19, { style: styles47.unseen, children: `, ${item.badgeLabel}` }) : null
+          /* @__PURE__ */ jsx60(Text19, { numberOfLines: 1, style: [styles48.label, { color, fontWeight: selected ? "700" : "500" }], children: item.label }),
+          badge !== null && item.badgeLabel ? /* @__PURE__ */ jsx60(Text19, { style: styles48.unseen, children: `, ${item.badgeLabel}` }) : null
         ]
       },
       item.value
     );
   }) });
 }
-var styles47 = StyleSheet47.create({
-  bar: { flexDirection: "row", borderTopWidth: StyleSheet47.hairlineWidth, paddingTop: 6 },
+var styles48 = StyleSheet48.create({
+  bar: { flexDirection: "row", borderTopWidth: StyleSheet48.hairlineWidth, paddingTop: 6 },
   item: { flex: 1, alignItems: "center", gap: 2, minHeight: 48, justifyContent: "center" },
   icon: { width: 28, height: 26, alignItems: "center", justifyContent: "center" },
   label: { fontSize: 11, lineHeight: 14 },
@@ -4984,12 +5361,12 @@ var styles47 = StyleSheet47.create({
 });
 
 // src/native/tabs.tsx
-import * as React42 from "react";
-import { Pressable as Pressable26, ScrollView as ScrollView7, StyleSheet as StyleSheet48, View as View52 } from "react-native";
-import { jsx as jsx60, jsxs as jsxs51 } from "react/jsx-runtime";
+import * as React43 from "react";
+import { Pressable as Pressable27, ScrollView as ScrollView7, StyleSheet as StyleSheet49, View as View53 } from "react-native";
+import { jsx as jsx61, jsxs as jsxs52 } from "react/jsx-runtime";
 function Tabs({ items: items2, value, defaultValue, onValueChange, "aria-label": label, variant = "underline", style }) {
   const { theme, radius: radius3, haptic } = useTheme();
-  const [own, setOwn] = React42.useState(defaultValue ?? items2[0]?.value);
+  const [own, setOwn] = React43.useState(defaultValue ?? items2[0]?.value);
   const current = value ?? own;
   const select = (next) => {
     if (next === current) return;
@@ -5000,8 +5377,8 @@ function Tabs({ items: items2, value, defaultValue, onValueChange, "aria-label":
   const segmented = variant === "segmented";
   const tabs = items2.map((item) => {
     const selected = item.value === current;
-    return /* @__PURE__ */ jsx60(
-      Pressable26,
+    return /* @__PURE__ */ jsx61(
+      Pressable27,
       {
         role: "tab",
         "aria-selected": selected,
@@ -5009,45 +5386,45 @@ function Tabs({ items: items2, value, defaultValue, onValueChange, "aria-label":
         disabled: item.disabled,
         onPress: () => select(item.value),
         style: [
-          segmented ? styles48.segment : styles48.tab,
+          segmented ? styles49.segment : styles49.tab,
           segmented && selected ? { backgroundColor: theme.surface0, borderColor: theme.borderDefault, borderRadius: radius3.sm } : null,
           !segmented ? { borderBottomColor: selected ? theme.accent : "transparent" } : null,
-          item.disabled ? styles48.disabled : null
+          item.disabled ? styles49.disabled : null
         ],
-        children: /* @__PURE__ */ jsxs51(Txt, { variant: "label", tone: selected ? "text" : "secondary", numberOfLines: 1, children: [
+        children: /* @__PURE__ */ jsxs52(Txt, { variant: "label", tone: selected ? "text" : "secondary", numberOfLines: 1, children: [
           item.label,
-          item.count !== void 0 ? /* @__PURE__ */ jsx60(Txt, { variant: "caption", tone: "secondary", children: `  ${item.count}` }) : null
+          item.count !== void 0 ? /* @__PURE__ */ jsx61(Txt, { variant: "caption", tone: "secondary", children: `  ${item.count}` }) : null
         ] })
       },
       item.value
     );
   });
   const panel = items2.find((i) => i.value === current)?.content;
-  return /* @__PURE__ */ jsxs51(View52, { style: [styles48.root, style], children: [
-    segmented ? /* @__PURE__ */ jsx60(View52, { role: "tablist", "aria-label": label, style: [styles48.track, { backgroundColor: theme.surface2, borderColor: theme.borderSubtle, borderRadius: radius3.md }], children: tabs }) : /* @__PURE__ */ jsx60(View52, { style: [styles48.underline, { borderBottomColor: theme.borderSubtle }], children: /* @__PURE__ */ jsx60(ScrollView7, { horizontal: true, showsHorizontalScrollIndicator: false, role: "tablist", "aria-label": label, contentContainerStyle: styles48.scroll, children: tabs }) }),
-    panel !== void 0 ? /* @__PURE__ */ jsx60(View52, { role: "tabpanel", children: panel }) : null
+  return /* @__PURE__ */ jsxs52(View53, { style: [styles49.root, style], children: [
+    segmented ? /* @__PURE__ */ jsx61(View53, { role: "tablist", "aria-label": label, style: [styles49.track, { backgroundColor: theme.surface2, borderColor: theme.borderSubtle, borderRadius: radius3.md }], children: tabs }) : /* @__PURE__ */ jsx61(View53, { style: [styles49.underline, { borderBottomColor: theme.borderSubtle }], children: /* @__PURE__ */ jsx61(ScrollView7, { horizontal: true, showsHorizontalScrollIndicator: false, role: "tablist", "aria-label": label, contentContainerStyle: styles49.scroll, children: tabs }) }),
+    panel !== void 0 ? /* @__PURE__ */ jsx61(View53, { role: "tabpanel", children: panel }) : null
   ] });
 }
-var styles48 = StyleSheet48.create({
+var styles49 = StyleSheet49.create({
   root: { gap: 12 },
-  underline: { borderBottomWidth: StyleSheet48.hairlineWidth },
+  underline: { borderBottomWidth: StyleSheet49.hairlineWidth },
   scroll: { gap: 4, paddingHorizontal: 4 },
   tab: { minHeight: 44, justifyContent: "center", paddingHorizontal: 12, borderBottomWidth: 2 },
-  track: { flexDirection: "row", padding: 3, gap: 3, borderWidth: StyleSheet48.hairlineWidth, height: 40 },
-  segment: { flex: 1, alignItems: "center", justifyContent: "center", paddingHorizontal: 8, borderWidth: StyleSheet48.hairlineWidth, borderColor: "transparent" },
+  track: { flexDirection: "row", padding: 3, gap: 3, borderWidth: StyleSheet49.hairlineWidth, height: 40 },
+  segment: { flex: 1, alignItems: "center", justifyContent: "center", paddingHorizontal: 8, borderWidth: StyleSheet49.hairlineWidth, borderColor: "transparent" },
   disabled: { opacity: 0.4 }
 });
 
 // src/native/tag-selector.tsx
-import { StyleSheet as StyleSheet49, View as View53 } from "react-native";
-import { jsx as jsx61, jsxs as jsxs52 } from "react/jsx-runtime";
+import { StyleSheet as StyleSheet50, View as View54 } from "react-native";
+import { jsx as jsx62, jsxs as jsxs53 } from "react/jsx-runtime";
 function TagSelector({ label, options, value, onValueChange, max, countLabel, style }) {
   const { haptic } = useTheme();
   const full = max !== void 0 && value.length >= max;
-  return /* @__PURE__ */ jsxs52(View53, { style: [styles49.root, style], children: [
-    /* @__PURE__ */ jsx61(View53, { role: "group", "aria-label": label, style: styles49.wrap, children: options.map((option) => {
+  return /* @__PURE__ */ jsxs53(View54, { style: [styles50.root, style], children: [
+    /* @__PURE__ */ jsx62(View54, { role: "group", "aria-label": label, style: styles50.wrap, children: options.map((option) => {
       const on = value.includes(option.value);
-      return /* @__PURE__ */ jsx61(
+      return /* @__PURE__ */ jsx62(
         Chip,
         {
           selected: on,
@@ -5061,15 +5438,15 @@ function TagSelector({ label, options, value, onValueChange, max, countLabel, st
         option.value
       );
     }) }),
-    max !== void 0 && countLabel ? /* @__PURE__ */ jsx61(Txt, { variant: "caption", tone: full ? "accent" : "secondary", "aria-live": "polite", children: countLabel(value.length, max) }) : null
+    max !== void 0 && countLabel ? /* @__PURE__ */ jsx62(Txt, { variant: "caption", tone: full ? "accent" : "secondary", "aria-live": "polite", children: countLabel(value.length, max) }) : null
   ] });
 }
-var styles49 = StyleSheet49.create({ root: { gap: 8 }, wrap: { flexDirection: "row", flexWrap: "wrap", gap: 8 } });
+var styles50 = StyleSheet50.create({ root: { gap: 8 }, wrap: { flexDirection: "row", flexWrap: "wrap", gap: 8 } });
 
 // src/native/toast.tsx
-import * as React43 from "react";
-import { AccessibilityInfo as AccessibilityInfo15, Animated as Animated26, PanResponder as PanResponder5, Pressable as Pressable27, StyleSheet as StyleSheet50, Text as Text20, View as View54 } from "react-native";
-import { Fragment as Fragment9, jsx as jsx62, jsxs as jsxs53 } from "react/jsx-runtime";
+import * as React44 from "react";
+import { AccessibilityInfo as AccessibilityInfo15, Animated as Animated27, PanResponder as PanResponder5, Pressable as Pressable28, StyleSheet as StyleSheet51, Text as Text20, View as View55 } from "react-native";
+import { Fragment as Fragment9, jsx as jsx63, jsxs as jsxs54 } from "react/jsx-runtime";
 var items = [];
 var listeners2 = /* @__PURE__ */ new Set();
 var counter = 0;
@@ -5104,93 +5481,93 @@ var toast = Object.assign(show, {
 function ToastView({ item, closeLabel, duration }) {
   const { theme, radius: radius3, haptic } = useTheme();
   const reduce = useReducedMotion();
-  const [swipe] = React43.useState(() => new Animated26.Value(0));
-  const drag = React43.useMemo(
+  const [swipe] = React44.useState(() => new Animated27.Value(0));
+  const drag = React44.useMemo(
     () => PanResponder5.create({
       onMoveShouldSetPanResponder: (_, g) => Math.abs(g.dx) > 8 && Math.abs(g.dx) > Math.abs(g.dy),
       onPanResponderMove: (_, g) => swipe.setValue(g.dx),
       onPanResponderRelease: (_, g) => {
         if (Math.abs(g.dx) > 96 || Math.abs(g.vx) > 0.9) {
-          Animated26.timing(swipe, { toValue: Math.sign(g.dx) * 480, duration: 160, useNativeDriver: true }).start(() => dismiss(item.id));
-        } else Animated26.spring(swipe, { toValue: 0, useNativeDriver: true }).start();
+          Animated27.timing(swipe, { toValue: Math.sign(g.dx) * 480, duration: 160, useNativeDriver: true }).start(() => dismiss(item.id));
+        } else Animated27.spring(swipe, { toValue: 0, useNativeDriver: true }).start();
       }
     }),
     [swipe, item.id]
   );
-  React43.useEffect(() => {
+  React44.useEffect(() => {
     if (item.tone === "success" || item.tone === "warning") haptic(item.tone);
     if (item.tone === "error") haptic("warning");
   }, [item.id]);
-  const [enter] = React43.useState(() => new Animated26.Value(reduce ? 1 : 0));
-  React43.useEffect(() => {
+  const [enter] = React44.useState(() => new Animated27.Value(reduce ? 1 : 0));
+  React44.useEffect(() => {
     if (reduce) enter.setValue(1);
-    else Animated26.timing(enter, { toValue: 1, duration: 220, useNativeDriver: true }).start();
+    else Animated27.timing(enter, { toValue: 1, duration: 220, useNativeDriver: true }).start();
   }, [enter, reduce]);
-  React43.useEffect(() => {
+  React44.useEffect(() => {
     AccessibilityInfo15.announceForAccessibility(item.description ? `${item.title}. ${item.description}` : item.title);
   }, [item.title, item.description]);
   const ms = item.duration ?? duration;
-  React43.useEffect(() => {
+  React44.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__ */ jsxs53(Fragment9, { children: [
-    item.icon ? /* @__PURE__ */ jsx62(View54, { "aria-hidden": true, children: item.icon }) : null,
-    /* @__PURE__ */ jsxs53(View54, { style: styles50.content, children: [
-      /* @__PURE__ */ jsx62(Txt, { variant: "label", numberOfLines: 2, children: item.title }),
-      item.description ? /* @__PURE__ */ jsx62(Txt, { variant: "caption", tone: "secondary", numberOfLines: 3, children: item.description }) : null
+  const text = /* @__PURE__ */ jsxs54(Fragment9, { children: [
+    item.icon ? /* @__PURE__ */ jsx63(View55, { "aria-hidden": true, children: item.icon }) : null,
+    /* @__PURE__ */ jsxs54(View55, { style: styles51.content, children: [
+      /* @__PURE__ */ jsx63(Txt, { variant: "label", numberOfLines: 2, children: item.title }),
+      item.description ? /* @__PURE__ */ jsx63(Txt, { variant: "caption", tone: "secondary", numberOfLines: 3, children: item.description }) : null
     ] })
   ] });
-  const body = /* @__PURE__ */ jsxs53(Fragment9, { children: [
-    item.onPress ? /* @__PURE__ */ jsx62(
-      Pressable27,
+  const body = /* @__PURE__ */ jsxs54(Fragment9, { children: [
+    item.onPress ? /* @__PURE__ */ jsx63(
+      Pressable28,
       {
         role: "button",
         onPress: () => {
           item.onPress?.();
           dismiss(item.id);
         },
-        style: ({ pressed }) => [styles50.main, { opacity: pressed ? 0.8 : 1 }],
+        style: ({ pressed }) => [styles51.main, { opacity: pressed ? 0.8 : 1 }],
         children: text
       }
-    ) : /* @__PURE__ */ jsx62(View54, { style: styles50.main, children: text }),
-    item.action ? /* @__PURE__ */ jsx62(
-      Pressable27,
+    ) : /* @__PURE__ */ jsx63(View55, { style: styles51.main, children: text }),
+    item.action ? /* @__PURE__ */ jsx63(
+      Pressable28,
       {
         role: "button",
         onPress: () => {
           item.action?.onPress();
           dismiss(item.id);
         },
-        style: [styles50.action, { backgroundColor: theme.accent, borderRadius: radius3.sm }],
-        children: /* @__PURE__ */ jsx62(Text20, { style: [styles50.actionLabel, { color: theme.onAccent }], children: item.action.label })
+        style: [styles51.action, { backgroundColor: theme.accent, borderRadius: radius3.sm }],
+        children: /* @__PURE__ */ jsx63(Text20, { style: [styles51.actionLabel, { color: theme.onAccent }], children: item.action.label })
       }
     ) : null,
-    /* @__PURE__ */ jsx62(Pressable27, { role: "button", "aria-label": closeLabel, hitSlop: 10, onPress: () => dismiss(item.id), style: styles50.close, children: /* @__PURE__ */ jsx62(Text20, { style: [styles50.cross, { color: theme.textSecondary }], children: "\xD7" }) })
+    /* @__PURE__ */ jsx63(Pressable28, { role: "button", "aria-label": closeLabel, hitSlop: 10, onPress: () => dismiss(item.id), style: styles51.close, children: /* @__PURE__ */ jsx63(Text20, { style: [styles51.cross, { color: theme.textSecondary }], children: "\xD7" }) })
   ] });
   const frame = [
-    styles50.toast,
+    styles51.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] }) }, { translateX: swipe }] };
-  return /* @__PURE__ */ jsx62(Animated26.View, { "aria-live": "polite", style: motion3, ...drag.panHandlers, children: /* @__PURE__ */ jsx62(View54, { style: frame, children: body }) });
+  return /* @__PURE__ */ jsx63(Animated27.View, { "aria-live": "polite", style: motion3, ...drag.panHandlers, children: /* @__PURE__ */ jsx63(View55, { style: frame, children: body }) });
 }
 function Toaster({ closeLabel, position = "top", offset = 12, duration = 6e3, max = 3 }) {
-  const all = React43.useSyncExternalStore(subscribe2, snapshot, snapshot);
+  const all = React44.useSyncExternalStore(subscribe2, snapshot, snapshot);
   const shown = all.slice(-max);
   if (shown.length === 0) return null;
-  return /* @__PURE__ */ jsx62(View54, { pointerEvents: "box-none", style: [styles50.stack, position === "top" ? { top: offset } : { bottom: offset }], children: (position === "top" ? shown : [...shown].reverse()).map((item) => /* @__PURE__ */ jsx62(ToastView, { item, closeLabel, duration }, item.id)) });
+  return /* @__PURE__ */ jsx63(View55, { pointerEvents: "box-none", style: [styles51.stack, position === "top" ? { top: offset } : { bottom: offset }], children: (position === "top" ? shown : [...shown].reverse()).map((item) => /* @__PURE__ */ jsx63(ToastView, { item, closeLabel, duration }, item.id)) });
 }
-var styles50 = StyleSheet50.create({
+var styles51 = StyleSheet51.create({
   stack: { position: "absolute", left: 12, right: 12, gap: 8, zIndex: 100 },
   toast: {
     flexDirection: "row",
     alignItems: "center",
     gap: 10,
     padding: 12,
-    borderWidth: StyleSheet50.hairlineWidth,
+    borderWidth: StyleSheet51.hairlineWidth,
     borderLeftWidth: 4,
     shadowOpacity: 0.3,
     shadowRadius: 16,
@@ -5206,15 +5583,15 @@ var styles50 = StyleSheet50.create({
 });
 
 // src/native/verified-badge.tsx
-import { StyleSheet as StyleSheet51, View as View55 } from "react-native";
-import Svg27, { Path as Path22 } from "react-native-svg";
-import { jsx as jsx63, jsxs as jsxs54 } from "react/jsx-runtime";
+import { StyleSheet as StyleSheet52, View as View56 } from "react-native";
+import Svg28, { Path as Path23 } from "react-native-svg";
+import { jsx as jsx64, jsxs as jsxs55 } from "react/jsx-runtime";
 function VerifiedBadge({ label, showLabel, size = 16, on = "surface" }) {
   const { theme } = useTheme();
-  return /* @__PURE__ */ jsxs54(View55, { accessible: true, role: "img", "aria-label": label, style: styles51.row, children: [
-    /* @__PURE__ */ jsxs54(Svg27, { width: size, height: size, viewBox: "0 0 24 24", "aria-hidden": true, children: [
-      /* @__PURE__ */ jsx63(
-        Path22,
+  return /* @__PURE__ */ jsxs55(View56, { accessible: true, role: "img", "aria-label": label, style: styles52.row, children: [
+    /* @__PURE__ */ jsxs55(Svg28, { width: size, height: size, viewBox: "0 0 24 24", "aria-hidden": true, children: [
+      /* @__PURE__ */ jsx64(
+        Path23,
         {
           d: "M12 2.5l2.4 1.7 2.9-.1.9 2.8 2.3 1.8-.9 2.8.9 2.8-2.3 1.8-.9 2.8-2.9-.1L12 21.5l-2.4-1.7-2.9.1-.9-2.8-2.3-1.8.9-2.8-.9-2.8 2.3-1.8.9-2.8 2.9.1z",
           fill: theme.accent,
@@ -5222,12 +5599,12 @@ function VerifiedBadge({ label, showLabel, size = 16, on = "surface" }) {
           strokeWidth: 1.2
         }
       ),
-      /* @__PURE__ */ jsx63(Path22, { d: "M8.3 12.3l2.5 2.5 4.9-5.2", fill: "none", stroke: theme.onAccent, strokeWidth: 2.2, strokeLinecap: "round", strokeLinejoin: "round" })
+      /* @__PURE__ */ jsx64(Path23, { d: "M8.3 12.3l2.5 2.5 4.9-5.2", fill: "none", stroke: theme.onAccent, strokeWidth: 2.2, strokeLinecap: "round", strokeLinejoin: "round" })
     ] }),
-    showLabel ? /* @__PURE__ */ jsx63(Txt, { variant: "caption", tone: on === "media" ? "onMedia" : "accent", style: styles51.text, children: label }) : null
+    showLabel ? /* @__PURE__ */ jsx64(Txt, { variant: "caption", tone: on === "media" ? "onMedia" : "accent", style: styles52.text, children: label }) : null
   ] });
 }
-var styles51 = StyleSheet51.create({ row: { flexDirection: "row", alignItems: "center", gap: 4 }, text: { fontWeight: "700" } });
+var styles52 = StyleSheet52.create({ row: { flexDirection: "row", alignItems: "center", gap: 4 }, text: { fontWeight: "700" } });
 export {
   ActionSheet,
   ActivityFeed,
@@ -5294,6 +5671,7 @@ export {
   Segmented,
   Select,
   Sheet,
+  Showcase,
   Skeleton,
   Slider,
   Spinner,
@@ -5336,6 +5714,7 @@ export {
   latestBirthDate,
   monthNames,
   prefetchNeighbours,
+  showcaseLabels,
   splitDuration,
   textStyles,
   timeSlots,