@krizaka/ui 3.7.1 → 3.9.0

package/dist/native.js

@@ -305,7 +305,7 @@ var marks = /* @__PURE__ */ Object.freeze({
       "#f472b6"
     ]
   ],
-  "yazakia": [
+  "yasakia": [
     [
       "0%",
       "#079d61"
@@ -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;
@@ -2688,14 +2950,14 @@ function OrochiaMark({ size = 48, animated = true, title, neutral: neutralProp }
   ] });
 }
 
-// src/native/YazakiaMark.tsx
+// src/native/YasakiaMark.tsx
 import React21 from "react";
 import { View as View24 } from "react-native";
 import Svg11, { Circle as Circle5, Defs as Defs6, LinearGradient as LinearGradient6, Path as Path9, RadialGradient as RadialGradient4, Stop as Stop6 } from "react-native-svg";
 
-// src/marks/yazakia-geometry.ts
-var turquoise = marks.yazakia[marks.yazakia.length - 1][1];
-var YAZAKIA = {
+// src/marks/yasakia-geometry.ts
+var turquoise = marks.yasakia[marks.yasakia.length - 1][1];
+var YASAKIA = {
   viewBox: "0 0 400 400",
   croppedViewBox: "80 80 240 240",
   center: 200,
@@ -2708,7 +2970,7 @@ var YAZAKIA = {
   shade: { color: "#000", opacity: 0.22 },
   /** Where the bubbles overlap: the core, lit from above. */
   lens: { d: "M200 112.6 A80 80 0 0 1 200 255.4 A80 80 0 0 1 200 112.6 Z", y1: 112.6, y2: 255.4 },
-  gradient: { x1: 110, y1: 300, x2: 290, y2: 100, stops: marks.yazakia },
+  gradient: { x1: 110, y1: 300, x2: 290, y2: 100, stops: marks.yasakia },
   /** The light on the lens: bright at the top, fading down. */
   highlight: { color: "#f0fdfa", from: 0.75, to: 0.2 },
   /** The pair: two nodes on the orbit, opposite each other, that turn with it. */
@@ -2720,51 +2982,52 @@ var YAZAKIA = {
   ring: { r: 134, width: 1 }
 };
 
-// src/native/YazakiaMark.tsx
+// src/native/YasakiaMark.tsx
 import { jsx as jsx28, jsxs as jsxs25 } from "react/jsx-runtime";
-function YazakiaMark({ size = 48, animated = true, title, neutral }) {
+function YasakiaMark({ size = 48, animated = true, title, neutral }) {
   const { theme } = useTheme();
   const { Animated: Animated27, layer, spinStyle, pulseStyle } = useMarkMotion(size, animated);
   const id = useSvgId("yzm");
-  const viewBox = size < 48 ? YAZAKIA.croppedViewBox : YAZAKIA.viewBox;
+  const viewBox = size < 48 ? YASAKIA.croppedViewBox : YASAKIA.viewBox;
   const stroke = neutral ?? theme.textMuted;
-  const gradient = /* @__PURE__ */ jsx28(LinearGradient6, { id: `${id}a`, gradientUnits: "userSpaceOnUse", x1: YAZAKIA.gradient.x1, y1: YAZAKIA.gradient.y1, x2: YAZAKIA.gradient.x2, y2: YAZAKIA.gradient.y2, children: YAZAKIA.gradient.stops.map(([offset, color]) => /* @__PURE__ */ jsx28(Stop6, { offset, stopColor: color }, offset)) });
+  const gradient = /* @__PURE__ */ jsx28(LinearGradient6, { id: `${id}a`, gradientUnits: "userSpaceOnUse", x1: YASAKIA.gradient.x1, y1: YASAKIA.gradient.y1, x2: YASAKIA.gradient.x2, y2: YASAKIA.gradient.y2, children: YASAKIA.gradient.stops.map(([offset, color]) => /* @__PURE__ */ jsx28(Stop6, { offset, stopColor: color }, offset)) });
   const fill = `url(#${id}a)`;
   return /* @__PURE__ */ jsxs25(View24, { style: { width: size, height: size }, ...markA11y(title), children: [
     /* @__PURE__ */ jsxs25(Svg11, { viewBox, style: layer, children: [
       /* @__PURE__ */ jsxs25(Defs6, { children: [
         /* @__PURE__ */ jsxs25(RadialGradient4, { id: `${id}g`, cx: "50%", cy: "50%", r: "50%", children: [
-          /* @__PURE__ */ jsx28(Stop6, { offset: "0%", stopColor: YAZAKIA.glow.color, stopOpacity: YAZAKIA.glow.opacity }),
-          /* @__PURE__ */ jsx28(Stop6, { offset: "100%", stopColor: YAZAKIA.glow.color, stopOpacity: 0 })
+          /* @__PURE__ */ jsx28(Stop6, { offset: "0%", stopColor: YASAKIA.glow.color, stopOpacity: YASAKIA.glow.opacity }),
+          /* @__PURE__ */ jsx28(Stop6, { offset: "100%", stopColor: YASAKIA.glow.color, stopOpacity: 0 })
         ] }),
         gradient
       ] }),
-      size >= 48 ? /* @__PURE__ */ jsx28(Circle5, { cx: YAZAKIA.center, cy: YAZAKIA.center, r: 190, fill: `url(#${id}g)` }) : null,
-      /* @__PURE__ */ jsx28(Circle5, { cx: YAZAKIA.center, cy: YAZAKIA.center, r: YAZAKIA.ring.r, stroke, strokeWidth: YAZAKIA.ring.width, opacity: 0.35, fill: "none" }),
-      YAZAKIA.voices.map((v, i) => /* @__PURE__ */ jsxs25(React21.Fragment, { children: [
+      size >= 48 ? /* @__PURE__ */ jsx28(Circle5, { cx: YASAKIA.center, cy: YASAKIA.center, r: 190, fill: `url(#${id}g)` }) : null,
+      /* @__PURE__ */ jsx28(Circle5, { cx: YASAKIA.center, cy: YASAKIA.center, r: YASAKIA.ring.r, stroke, strokeWidth: YASAKIA.ring.width, opacity: 0.35, fill: "none" }),
+      YASAKIA.voices.map((v, i) => /* @__PURE__ */ jsxs25(React21.Fragment, { children: [
         /* @__PURE__ */ jsx28(Path9, { d: v.body, fill }),
         /* @__PURE__ */ jsx28(Path9, { d: v.tail, fill }),
-        i === 0 ? /* @__PURE__ */ jsx28(Path9, { d: `${v.body} ${v.tail}`, fill: YAZAKIA.shade.color, opacity: YAZAKIA.shade.opacity }) : null
+        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(Defs6, { children: gradient }),
-      /* @__PURE__ */ jsx28(Circle5, { cx: YAZAKIA.center, cy: YAZAKIA.center, r: YAZAKIA.orbit.r, stroke, strokeWidth: YAZAKIA.orbit.width, strokeDasharray: YAZAKIA.orbit.dash, opacity: 0.6, fill: "none" }),
-      YAZAKIA.pair.at.map(([cx, cy]) => /* @__PURE__ */ jsx28(Circle5, { cx, cy, r: YAZAKIA.pair.r, fill }, cx))
+      /* @__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__ */ jsxs25(Defs6, { children: [
         gradient,
-        /* @__PURE__ */ jsxs25(LinearGradient6, { id: `${id}l`, gradientUnits: "userSpaceOnUse", x1: 0, y1: YAZAKIA.lens.y1, x2: 0, y2: YAZAKIA.lens.y2, children: [
-          /* @__PURE__ */ jsx28(Stop6, { offset: "0%", stopColor: YAZAKIA.highlight.color, stopOpacity: YAZAKIA.highlight.from }),
-          /* @__PURE__ */ jsx28(Stop6, { offset: "100%", stopColor: YAZAKIA.highlight.color, stopOpacity: YAZAKIA.highlight.to })
+        /* @__PURE__ */ jsxs25(LinearGradient6, { id: `${id}l`, gradientUnits: "userSpaceOnUse", x1: 0, y1: YASAKIA.lens.y1, x2: 0, y2: YASAKIA.lens.y2, children: [
+          /* @__PURE__ */ jsx28(Stop6, { offset: "0%", stopColor: YASAKIA.highlight.color, stopOpacity: YASAKIA.highlight.from }),
+          /* @__PURE__ */ jsx28(Stop6, { offset: "100%", stopColor: YASAKIA.highlight.color, stopOpacity: YASAKIA.highlight.to })
         ] })
       ] }),
-      /* @__PURE__ */ jsx28(Path9, { d: YAZAKIA.lens.d, fill }),
-      /* @__PURE__ */ jsx28(Path9, { d: YAZAKIA.lens.d, fill: `url(#${id}l)` })
+      /* @__PURE__ */ jsx28(Path9, { d: YASAKIA.lens.d, fill }),
+      /* @__PURE__ */ jsx28(Path9, { d: YASAKIA.lens.d, fill: `url(#${id}l)` })
     ] }) })
   ] });
 }
+var YazakiaMark = YasakiaMark;
 
 // src/native/YororisMark.tsx
 import { View as View25 } from "react-native";
@@ -2846,7 +3109,7 @@ import { jsx as jsx30 } from "react/jsx-runtime";
 function ProductMark({ id, ...props }) {
   if (id === "krizaka") return /* @__PURE__ */ jsx30(KrizakaMark, { ...props });
   if (id === "orazaka") return /* @__PURE__ */ jsx30(OrazakaMark, { ...props });
-  if (id === "yazakia") return /* @__PURE__ */ jsx30(YazakiaMark, { ...props });
+  if (id === "yasakia" || id === "yazakia") return /* @__PURE__ */ jsx30(YasakiaMark, { ...props });
   if (id === "yororis") return /* @__PURE__ */ jsx30(YororisMark, { ...props });
   return /* @__PURE__ */ jsx30(OrochiaMark, { ...props });
 }
@@ -2918,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 ") : "";
@@ -2929,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 });
@@ -3320,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 }),
@@ -3352,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
@@ -3778,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);
@@ -3792,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 }] }] })
@@ -3815,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,
@@ -4146,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";
@@ -4156,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: [
@@ -4184,7 +4447,7 @@ function SearchField({ label, value, defaultValue = "", onValueChange, onSearch,
         clearButtonMode: "never",
         onChangeText: change,
         onSubmitEditing: () => {
-          clearTimeout(timer2.current);
+          search.cancel();
           onSearch?.(query);
           onSubmit?.(query);
         },
@@ -4553,14 +4816,14 @@ import Svg24, { Path as Path19 } from "react-native-svg";
 import { jsx as jsx54, jsxs as jsxs45 } from "react/jsx-runtime";
 function StepProgress({ step, total, label, backLabel, onBack, trailing, style }) {
   const { theme, insets } = useTheme();
-  const words = label(step, total);
+  const words2 = 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, { accessible: true, role: "progressbar", "aria-label": words2, "aria-valuemin": 1, "aria-valuemax": total, "aria-valuenow": step, "aria-valuetext": words2, 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 })
     ] }),
-    /* @__PURE__ */ jsx54(Txt, { variant: "caption", tone: "secondary", style: styles42.words, "aria-hidden": true, children: words })
+    /* @__PURE__ */ jsx54(Txt, { variant: "caption", tone: "secondary", style: styles42.words, "aria-hidden": true, children: words2 })
   ] });
 }
 var styles42 = StyleSheet42.create({
@@ -4580,7 +4843,7 @@ import { jsx as jsx55, jsxs as jsxs46 } 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) => {
     const status = step.status ?? (i < current ? "done" : i === current ? "current" : "upcoming");
@@ -4590,7 +4853,7 @@ function Stepper({ steps, current = 0, orientation = "vertical", statusLabels, "
       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 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: [
+    return /* @__PURE__ */ jsxs46(View47, { role: "listitem", accessible: true, "aria-label": `${step.title}, ${words2[status]}`, style: vertical ? styles43.vStep : styles43.hStep, children: [
       /* @__PURE__ */ jsxs46(View47, { style: vertical ? styles43.vRail : styles43.hRail, children: [
         node,
         connector
@@ -4678,7 +4941,7 @@ 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();
@@ -4729,7 +4992,7 @@ function SwipeDeck({ items: items2, getId, renderCard, onSwipe, empty, labels, h
   );
   return /* @__PURE__ */ jsxs47(View48, { style: [styles44.deck, style], children: [
     /* @__PURE__ */ jsxs47(View48, { style: styles44.stack, children: [
-      !top ? empty ?? null : null,
+      !top ? empty2 ?? null : null,
       items2.slice(0, 2).reverse().map((item) => {
         const isTop = item === top;
         return /* @__PURE__ */ jsxs47(
@@ -5317,6 +5580,7 @@ export {
   Wheel,
   WheelDivider,
   WheelPicker,
+  YasakiaMark,
   YazakiaMark,
   YororisMark,
   addDays,