@kjun-ui/native 0.13.0 → 0.14.0

package/dist/index.js

@@ -2155,7 +2155,11 @@ function KjunCard({
   border = false,
   dividers = false,
   children,
-  style
+  style,
+  pressable = false,
+  disabled = false,
+  ariaLabel,
+  onPress
 }) {
   const { colors } = useKjunStyles();
   const id = "kjun-" + useId4().replace(/[^a-z0-9]/gi, "");
@@ -2166,7 +2170,7 @@ function KjunCard({
   const hasHeading = hasContent(header) || hasContent(title) || hasContent(subtitle);
   const hasHeader = hasHeading || hasContent(headerActions);
   const hasBody = hasContent(children), hasFooter = hasContent(footer), hasMedia = hasContent(media);
-  return /* @__PURE__ */ jsxs5(View8, { style: [
+  const base = [
     {
       minWidth: 0,
       borderRadius: corner,
@@ -2175,7 +2179,8 @@ function KjunCard({
     },
     Platform11.OS === "web" && surface === "glass" ? { backdropFilter: `blur(${tokens10.card.glassBlur}px)` } : {},
     style
-  ], children: [
+  ];
+  const parts = /* @__PURE__ */ jsxs5(Fragment3, { children: [
     paint.gradientEnd && /* @__PURE__ */ jsx14(View8, { pointerEvents: "none", style: { position: "absolute", inset: 0, borderRadius: corner, overflow: "hidden" }, children: /* @__PURE__ */ jsxs5(Svg2, { width: "100%", height: "100%", children: [
       /* @__PURE__ */ jsx14(Defs, { children: /* @__PURE__ */ jsxs5(LinearGradient, { id, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
         /* @__PURE__ */ jsx14(Stop, { offset: "0", stopColor: colors[paint.background] }),
@@ -2218,6 +2223,18 @@ function KjunCard({
       boxShadow: [{ offsetX: 0, offsetY: 0, blurRadius: 0, spreadDistance: tokens10.card.borderWidth, inset: true, color: borderColor }]
     } })
   ] });
+  return pressable ? /* @__PURE__ */ jsx14(
+    AccessiblePressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: ariaLabel != null ? ariaLabel : title,
+      accessibilityState: { disabled },
+      disabled,
+      onPress,
+      style: ({ pressed }) => [base, pressed ? { transform: [{ scale: 0.99 }] } : null, disabled ? { opacity: tokens10.states.opacity.disabled } : null],
+      children: parts
+    }
+  ) : /* @__PURE__ */ jsx14(View8, { style: base, children: parts });
 }
 
 // shared/package-runtime/alert-live.ts
@@ -2228,7 +2245,7 @@ function alertRole(tone, live) {
 }
 
 // packages/native/src/display-primitives.tsx
-import { tokens as tokens11 } from "@kjun-ui/tokens";
+import { tokens as tokens12 } from "@kjun-ui/tokens";
 import { useContext as useContext10, useEffect as useEffect5, useRef as useRef6, useState as useState9 } from "react";
 import {
   Animated as Animated5,
@@ -2238,6 +2255,25 @@ import {
   View as View9
 } from "react-native";
 import Svg3, { Circle as Circle2, Path as Path2 } from "react-native-svg";
+
+// shared/package-runtime/progress-circle.ts
+import { tokens as tokens11 } from "@kjun-ui/tokens";
+function progressCircle(size, percentage) {
+  const { size: diameter, stroke } = tokens11.extensions.progress.circle[size];
+  const radius = (diameter - stroke) / 2, circumference = 2 * Math.PI * radius;
+  return {
+    diameter,
+    stroke,
+    radius,
+    centre: diameter / 2,
+    circumference,
+    offset: circumference * (1 - percentage / 100),
+    // Small circles are too narrow for the centre percentage; screen readers still get the value.
+    showsPercentage: size !== "sm"
+  };
+}
+
+// packages/native/src/display-primitives.tsx
 import { jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
 var badgeLayoutKeys = /* @__PURE__ */ new Set([
   "alignSelf",
@@ -2277,10 +2313,10 @@ function BadgeView({
   dot = false,
   children,
   style,
-  dotSize = tokens11.extensions.badge.dotSize
+  dotSize = tokens12.extensions.badge.dotSize
 }) {
   const { colors, domainColors } = useKjunStyles();
-  const { x, y } = tokens11.extensions.badge.padding[size];
+  const { x, y } = tokens12.extensions.badge.padding[size];
   const type = typeStyle(size === "xl" ? "controlLarge" : size === "lg" ? "control" : "controlSmall");
   const neutral = variant === "default" || variant === "secondary";
   const financial = variant.startsWith("price-");
@@ -2298,10 +2334,10 @@ function BadgeView({
           maxWidth: "100%",
           minWidth: 0,
           flexShrink: 1,
-          gap: tokens11.extensions.badge.gap,
+          gap: tokens12.extensions.badge.gap,
           paddingHorizontal: x,
           paddingVertical: y,
-          borderRadius: tokens11.extensions.badge.radius,
+          borderRadius: tokens12.extensions.badge.radius,
           backgroundColor: background
         },
         inner
@@ -2339,7 +2375,7 @@ function KjunEmpty({
   const m = useKjunMessages();
   text != null ? text : text = m.noData;
   const { colors } = useKjunStyles();
-  const spec = tokens11.extensions.empty;
+  const spec = tokens12.extensions.empty;
   const stateContent = useContext10(DataStateContentContext);
   return /* @__PURE__ */ jsxs6(
     View9,
@@ -2347,7 +2383,7 @@ function KjunEmpty({
       style: {
         alignItems: "center",
         justifyContent: "center",
-        paddingVertical: stateContent === "empty" ? 0 : tokens11.dimension.value32
+        paddingVertical: stateContent === "empty" ? 0 : tokens12.dimension.value32
       },
       children: [
         !!icon && /* @__PURE__ */ jsx15(View9, { style: { marginBottom: spec.iconGap }, children: /* @__PURE__ */ jsx15(KjunIcon, { name: icon, size: spec.iconSize, color: colors.textSecondary }) }),
@@ -2380,7 +2416,7 @@ function KjunSpinner({ size = "md", text }) {
     const loop = Animated5.loop(
       Animated5.timing(rotation, {
         toValue: 1,
-        duration: tokens11.motion.spin,
+        duration: tokens12.motion.spin,
         easing: Easing3.linear,
         useNativeDriver: Platform12.OS !== "web"
       })
@@ -2391,8 +2427,8 @@ function KjunSpinner({ size = "md", text }) {
       rotation.setValue(0);
     };
   }, [reduced, rotation]);
-  const dimension = tokens11.extensions.spinner.sizes[size];
-  const stroke = tokens11.extensions.spinner.strokeWidths[size] * 24 / dimension;
+  const dimension = tokens12.extensions.spinner.sizes[size];
+  const stroke = tokens12.extensions.spinner.strokeWidths[size] * 24 / dimension;
   return /* @__PURE__ */ jsxs6(
     View9,
     {
@@ -2446,7 +2482,7 @@ function KjunSpinner({ size = "md", text }) {
             )
           }
         ),
-        !!text && /* @__PURE__ */ jsx15(KText, { style: { marginLeft: tokens11.dimension.value8, color: colors.textSecondary }, children: text })
+        !!text && /* @__PURE__ */ jsx15(KText, { style: { marginLeft: tokens12.dimension.value8, color: colors.textSecondary }, children: text })
       ]
     }
   );
@@ -2467,8 +2503,8 @@ function KjunAlert({
   const [visible, setVisible] = useState9(true);
   if (!visible) return null;
   const tone = variant || (type === "error" ? "danger" : type), small = size === "sm";
-  const geometry2 = tokens11.extensions.alert;
-  const lineHeight = tokens11.typography[small ? "controlSmall" : "control"].lineHeightPx;
+  const geometry2 = tokens12.extensions.alert;
+  const lineHeight = tokens12.typography[small ? "controlSmall" : "control"].lineHeightPx;
   const titled = hasContent(title);
   const closeSize = small ? geometry2.sm.closeSize : geometry2.closeSize;
   const pick = (suffix) => tone === "primary" ? suffix === "Bg" ? colors.brandSubtleBg : suffix === "Light" ? colors.brandLight : colors.brand : colors[tone + suffix];
@@ -2479,11 +2515,11 @@ function KjunAlert({
       style: {
         flexDirection: "row",
         alignItems: "flex-start",
-        gap: tokens11.extensions.alert[small ? "sm" : "md"].gap,
-        borderWidth: tokens11.border.defaultWidth,
-        borderRadius: tokens11.extensions.alert.radius,
-        paddingVertical: tokens11.extensions.alert[small ? "sm" : "md"].paddingY,
-        paddingHorizontal: tokens11.extensions.alert[small ? "sm" : "md"].paddingX,
+        gap: tokens12.extensions.alert[small ? "sm" : "md"].gap,
+        borderWidth: tokens12.border.defaultWidth,
+        borderRadius: tokens12.extensions.alert.radius,
+        paddingVertical: tokens12.extensions.alert[small ? "sm" : "md"].paddingY,
+        paddingHorizontal: tokens12.extensions.alert[small ? "sm" : "md"].paddingX,
         backgroundColor: pick("Bg"),
         borderColor: pick("Light")
       },
@@ -2498,7 +2534,7 @@ function KjunAlert({
               warning: "alert-triangle",
               danger: "alert-circle"
             }[tone],
-            size: tokens11.extensions.alert.iconSizes[small ? "sm" : "md"],
+            size: tokens12.extensions.alert.iconSizes[small ? "sm" : "md"],
             color: pick("Accent")
           }
         ) }),
@@ -2515,7 +2551,7 @@ function KjunAlert({
           {
             accessibilityRole: "button",
             accessibilityLabel: m.close,
-            hitSlop: Math.max(0, (tokens11.native.minimumTouchTarget - closeSize) / 2),
+            hitSlop: Math.max(0, (tokens12.native.minimumTouchTarget - closeSize) / 2),
             style: ({ pressed, hovered }) => ({
               width: closeSize,
               height: closeSize,
@@ -2553,11 +2589,58 @@ function KjunProgress({
   variant = "primary",
   showLabel = false,
   label,
-  subLabel
+  subLabel,
+  shape = "bar"
 }) {
   const m = useKjunMessages();
-  const { colors } = useKjunStyles();
+  const { colors, numericFontFamily, fontFamily } = useKjunStyles();
   const percentage = Number.isFinite(value) && max > 0 ? Math.min(100, Math.max(0, Math.round(value / max * 100))) : 0;
+  const name = typeof label === "string" ? label : m.progress, color = variant === "primary" ? colors.brand : colors[variant];
+  const semantics = {
+    accessibilityRole: "progressbar",
+    accessibilityLabel: name,
+    accessibilityValue: { min: 0, max: 100, now: percentage },
+    "aria-valuemin": 0,
+    "aria-valuemax": 100,
+    "aria-valuenow": percentage
+  };
+  if (shape === "circle") {
+    const c = progressCircle(size, percentage);
+    return /* @__PURE__ */ jsxs6(View9, { style: { alignSelf: "flex-start", alignItems: "center" }, children: [
+      /* @__PURE__ */ jsxs6(View9, { ...semantics, style: { width: c.diameter, height: c.diameter, alignItems: "center", justifyContent: "center" }, children: [
+        /* @__PURE__ */ jsxs6(Svg3, { width: c.diameter, height: c.diameter, viewBox: `0 0 ${c.diameter} ${c.diameter}`, style: StyleSheet4.absoluteFill, children: [
+          /* @__PURE__ */ jsx15(Circle2, { cx: c.centre, cy: c.centre, r: c.radius, stroke: colors.secondary, strokeWidth: c.stroke, fill: "none" }),
+          percentage > 0 && /* @__PURE__ */ jsx15(
+            Circle2,
+            {
+              cx: c.centre,
+              cy: c.centre,
+              r: c.radius,
+              stroke: color,
+              strokeWidth: c.stroke,
+              fill: "none",
+              strokeLinecap: "round",
+              strokeDasharray: c.circumference,
+              strokeDashoffset: c.offset,
+              rotation: -90,
+              origin: `${c.centre}, ${c.centre}`
+            }
+          )
+        ] }),
+        showLabel && c.showsPercentage && /* @__PURE__ */ jsxs6(KText, { style: {
+          ...typeStyle(size === "lg" ? "numberMd" : "meta"),
+          fontFamily: numericFontFamily || fontFamily,
+          fontVariant: ["tabular-nums"],
+          color: colors.text
+        }, children: [
+          percentage,
+          "%"
+        ] })
+      ] }),
+      content(label, { ...typeStyle("caption"), marginTop: tokens12.dimension.value8, color: colors.textSecondary, textAlign: "center" }),
+      content(subLabel, { ...typeStyle("caption"), marginTop: tokens12.dimension.value4, color: colors.textTertiary, textAlign: "center" })
+    ] });
+  }
   return /* @__PURE__ */ jsxs6(View9, { children: [
     !!(label || showLabel) && /* @__PURE__ */ jsxs6(
       View9,
@@ -2565,7 +2648,7 @@ function KjunProgress({
         style: {
           flexDirection: "row",
           justifyContent: "space-between",
-          marginBottom: tokens11.dimension.value8
+          marginBottom: tokens12.dimension.value8
         },
         children: [
           content(label, {
@@ -2591,13 +2674,11 @@ function KjunProgress({
     /* @__PURE__ */ jsx15(
       View9,
       {
-        accessibilityRole: "progressbar",
-        accessibilityLabel: typeof label === "string" ? label : m.progress,
-        accessibilityValue: { min: 0, max: 100, now: percentage },
+        ...semantics,
         style: {
-          height: tokens11.extensions.progress.heights[size],
+          height: tokens12.extensions.progress.heights[size],
           backgroundColor: colors.secondary,
-          borderRadius: tokens11.radius.radius9999,
+          borderRadius: tokens12.radius.radius9999,
           overflow: "hidden"
         },
         children: /* @__PURE__ */ jsx15(
@@ -2606,8 +2687,8 @@ function KjunProgress({
             style: {
               width: `${percentage}%`,
               height: "100%",
-              borderRadius: tokens11.radius.radius9999,
-              backgroundColor: variant === "primary" ? colors.brand : colors[variant]
+              borderRadius: tokens12.radius.radius9999,
+              backgroundColor: color
             }
           }
         )
@@ -2615,14 +2696,14 @@ function KjunProgress({
     ),
     content(subLabel, {
       ...typeStyle("caption"),
-      marginTop: tokens11.dimension.value4,
+      marginTop: tokens12.dimension.value4,
       color: colors.textTertiary
     })
   ] });
 }
 
 // packages/native/src/skeleton-base.tsx
-import { tokens as tokens12 } from "@kjun-ui/tokens";
+import { tokens as tokens13 } from "@kjun-ui/tokens";
 import { useEffect as useEffect6, useRef as useRef7 } from "react";
 import {
   Animated as Animated6,
@@ -2645,12 +2726,12 @@ function KjunSkeleton({
       Animated6.sequence([
         Animated6.timing(opacity, {
           toValue: 0.6,
-          duration: tokens12.motion.shimmer / 2,
+          duration: tokens13.motion.shimmer / 2,
           useNativeDriver: false
         }),
         Animated6.timing(opacity, {
           toValue: 1,
-          duration: tokens12.motion.shimmer / 2,
+          duration: tokens13.motion.shimmer / 2,
           useNativeDriver: false
         })
       ])
@@ -2669,18 +2750,18 @@ function KjunSkeleton({
         width: w,
         height: h,
         backgroundColor: shimmer,
-        borderRadius: tokens12.extensions.skeleton.lineRadius,
+        borderRadius: tokens13.extensions.skeleton.lineRadius,
         ...extra
       }
     }
   );
   const count = (n) => Array.from({ length: Math.max(0, Math.floor(n)) }, (_, i) => i + 1);
-  const line = (w, key, h = tokens12.extensions.skeleton.lineHeights.md) => /* @__PURE__ */ jsx16(View10, { style: { marginBottom: key === rows ? 0 : tokens12.extensions.skeleton.gap }, children: block(w, h) }, key);
+  const line = (w, key, h = tokens13.extensions.skeleton.lineHeights.md) => /* @__PURE__ */ jsx16(View10, { style: { marginBottom: key === rows ? 0 : tokens13.extensions.skeleton.gap }, children: block(w, h) }, key);
   const frame = {
-    padding: tokens12.extensions.skeleton.padding,
-    borderWidth: tokens12.border.defaultWidth,
+    padding: tokens13.extensions.skeleton.padding,
+    borderWidth: tokens13.border.defaultWidth,
     borderColor: colors.border,
-    borderRadius: tokens12.extensions.skeleton.radius,
+    borderRadius: tokens13.extensions.skeleton.radius,
     backgroundColor: colors.background
   };
   return /* @__PURE__ */ jsxs7(
@@ -2696,7 +2777,7 @@ function KjunSkeleton({
             i
           )
         ),
-        type === "avatar" && block(width || tokens12.extensions.skeleton.avatarSize, height || tokens12.extensions.skeleton.avatarSize, { borderRadius: rounded ? tokens12.radius.radius9999 : tokens12.extensions.skeleton.blockRadius }),
+        type === "avatar" && block(width || tokens13.extensions.skeleton.avatarSize, height || tokens13.extensions.skeleton.avatarSize, { borderRadius: rounded ? tokens13.radius.radius9999 : tokens13.extensions.skeleton.blockRadius }),
         type === "card" && /* @__PURE__ */ jsxs7(View10, { style: frame, children: [
           /* @__PURE__ */ jsxs7(
             View10,
@@ -2704,19 +2785,19 @@ function KjunSkeleton({
               style: {
                 flexDirection: "row",
                 alignItems: "center",
-                gap: tokens12.extensions.skeleton.gap,
-                marginBottom: tokens12.dimension.value16
+                gap: tokens13.extensions.skeleton.gap,
+                marginBottom: tokens13.dimension.value16
               },
               children: [
-                block(tokens12.extensions.skeleton.cardAvatarSize, tokens12.extensions.skeleton.cardAvatarSize, { borderRadius: tokens12.radius.radius9999 }),
-                /* @__PURE__ */ jsxs7(View10, { style: { flex: 1, gap: tokens12.dimension.value8 }, children: [
+                block(tokens13.extensions.skeleton.cardAvatarSize, tokens13.extensions.skeleton.cardAvatarSize, { borderRadius: tokens13.radius.radius9999 }),
+                /* @__PURE__ */ jsxs7(View10, { style: { flex: 1, gap: tokens13.dimension.value8 }, children: [
                   block("60%"),
-                  block("40%", tokens12.extensions.skeleton.lineHeights.sm)
+                  block("40%", tokens13.extensions.skeleton.lineHeights.sm)
                 ] })
               ]
             }
           ),
-          /* @__PURE__ */ jsxs7(View10, { style: { gap: tokens12.dimension.value10 }, children: [
+          /* @__PURE__ */ jsxs7(View10, { style: { gap: tokens13.dimension.value10 }, children: [
             block("100%"),
             block("80%"),
             block("60%")
@@ -2726,9 +2807,9 @@ function KjunSkeleton({
           View10,
           {
             style: {
-              borderWidth: tokens12.border.defaultWidth,
+              borderWidth: tokens13.border.defaultWidth,
               borderColor: colors.border,
-              borderRadius: tokens12.extensions.skeleton.blockRadius,
+              borderRadius: tokens13.extensions.skeleton.blockRadius,
               overflow: "hidden"
             },
             children: [0, ...count(rows)].map((row) => /* @__PURE__ */ jsx16(
@@ -2737,7 +2818,7 @@ function KjunSkeleton({
                 style: {
                   flexDirection: "row",
                   backgroundColor: row === 0 ? colors.secondary : void 0,
-                  borderBottomWidth: row === rows ? 0 : tokens12.border.defaultWidth,
+                  borderBottomWidth: row === rows ? 0 : tokens13.border.defaultWidth,
                   borderBottomColor: colors.border
                 },
                 children: count(columns).map((col) => /* @__PURE__ */ jsx16(
@@ -2745,8 +2826,8 @@ function KjunSkeleton({
                   {
                     style: {
                       flex: 1,
-                      paddingVertical: tokens12.dimension.value12,
-                      paddingHorizontal: tokens12.dimension.value16
+                      paddingVertical: tokens13.dimension.value12,
+                      paddingHorizontal: tokens13.dimension.value16
                     },
                     children: block(
                       row === 0 ? "70%" : [
@@ -2756,7 +2837,7 @@ function KjunSkeleton({
                         "75%",
                         "85%"
                       ][(row + col) % 5],
-                      tokens12.extensions.skeleton.tableLineHeight
+                      tokens13.extensions.skeleton.tableLineHeight
                     )
                   },
                   col
@@ -2778,16 +2859,16 @@ function KjunSkeleton({
               }
             ],
             children: [
-              /* @__PURE__ */ jsxs7(View10, { style: { flex: 1, gap: tokens12.dimension.value8 }, children: [
-                block("40%", tokens12.extensions.skeleton.lineHeights.sm),
-                block("60%", tokens12.extensions.skeleton.lineHeights.lg),
-                block("30%", tokens12.extensions.skeleton.lineHeights.sm)
+              /* @__PURE__ */ jsxs7(View10, { style: { flex: 1, gap: tokens13.dimension.value8 }, children: [
+                block("40%", tokens13.extensions.skeleton.lineHeights.sm),
+                block("60%", tokens13.extensions.skeleton.lineHeights.lg),
+                block("30%", tokens13.extensions.skeleton.lineHeights.sm)
               ] }),
-              block(tokens12.extensions.skeleton.statWidth, tokens12.extensions.skeleton.statHeight)
+              block(tokens13.extensions.skeleton.statWidth, tokens13.extensions.skeleton.statHeight)
             ]
           }
         ),
-        type === "block" && block(width || "100%", height != null ? height : tokens12.extensions.skeleton.blockHeight, { borderRadius: tokens12.extensions.skeleton.blockRadius })
+        type === "block" && block(width || "100%", height != null ? height : tokens13.extensions.skeleton.blockHeight, { borderRadius: tokens13.extensions.skeleton.blockRadius })
       ]
     }
   );
@@ -2796,7 +2877,7 @@ function KjunSkeleton({
 // packages/native/src/layout-primitives.tsx
 import { Children as Children2, Fragment as Fragment4, cloneElement as cloneElement2, isValidElement as isValidElement3 } from "react";
 import { View as View11 } from "react-native";
-import { tokens as tokens13 } from "@kjun-ui/tokens";
+import { tokens as tokens14 } from "@kjun-ui/tokens";
 
 // shared/package-runtime/layout-primitives.ts
 var titleVariants = ["pageTitle", "sectionTitle", "cardTitle"];
@@ -2805,7 +2886,17 @@ var isNumericVariant = (variant) => numeric.test(variant);
 
 // packages/native/src/layout-primitives.tsx
 import { jsx as jsx17 } from "react/jsx-runtime";
-var toneRole = { default: "text", secondary: "textSecondary", tertiary: "textTertiary", disabled: "textDisabled" };
+var toneRole = {
+  default: "text",
+  secondary: "textSecondary",
+  tertiary: "textTertiary",
+  disabled: "textDisabled",
+  brand: "brand",
+  danger: "danger",
+  success: "success",
+  warning: "warning",
+  inverse: "onBrand"
+};
 var textAlign = { start: "left", center: "center", end: "right" };
 function KjunText({ variant = "body", tone = "default", align, maxLines, style, children }) {
   const { colors, fontFamily, numericFontFamily } = useKjunStyles();
@@ -2833,46 +2924,51 @@ function flatten(children, path = "") {
     return isValidElement3(child) && child.type === Fragment4 ? flatten(child.props.children, `${key}.`) : [[key, child]];
   });
 }
-function items(children) {
+function items(children, childAlign) {
   return flatten(children).map(([key, child]) => {
     if (typeof child === "string" || typeof child === "number") return /* @__PURE__ */ jsx17(KText, { children: child }, key);
     if (isValidElement3(child) && child.type === KjunFormGroup) {
       const group = child;
       return cloneElement2(group, { key, style: [{ marginBottom: 0 }, group.props.style] });
     }
+    if (childAlign && isValidElement3(child) && (child.type === KjunButton || child.type === KjunBadge)) {
+      const control = child;
+      return cloneElement2(control, { key, style: [{ alignSelf: childAlign }, control.props.style] });
+    }
     return isValidElement3(child) ? cloneElement2(child, { key }) : child;
   });
 }
+var followed = (align) => align && align !== "stretch" ? crossAxis[align] : void 0;
 var stackGap = {
   none: 0,
-  sm: tokens13.space.stack.sm,
-  md: tokens13.space.stack.md,
-  lg: tokens13.space.stack.lg,
-  "section-sm": tokens13.space.section.sm,
-  "section-md": tokens13.space.section.md,
-  "section-lg": tokens13.space.section.lg
+  sm: tokens14.space.stack.sm,
+  md: tokens14.space.stack.md,
+  lg: tokens14.space.stack.lg,
+  "section-sm": tokens14.space.section.sm,
+  "section-md": tokens14.space.section.md,
+  "section-lg": tokens14.space.section.lg
 };
 var inlineGap = {
   none: 0,
-  xs: tokens13.space.inline.xs,
-  sm: tokens13.space.inline.sm,
-  md: tokens13.space.inline.md,
-  lg: tokens13.space.inline.lg
+  xs: tokens14.space.inline.xs,
+  sm: tokens14.space.inline.sm,
+  md: tokens14.space.inline.md,
+  lg: tokens14.space.inline.lg
 };
 var crossAxis = { stretch: "stretch", start: "flex-start", center: "center", end: "flex-end", baseline: "baseline" };
 var mainAxis = { start: "flex-start", center: "center", end: "flex-end", between: "space-between" };
-function KjunStack({ gap = "md", align = "stretch", style, children }) {
-  return /* @__PURE__ */ jsx17(View11, { style: [{ flexDirection: "column", alignItems: crossAxis[align], gap: stackGap[gap], minWidth: 0 }, style], children: items(children) });
+function KjunStack({ gap = "md", align, style, children }) {
+  return /* @__PURE__ */ jsx17(View11, { style: [{ flexDirection: "column", alignItems: crossAxis[align != null ? align : "stretch"], gap: stackGap[gap], minWidth: 0 }, style], children: items(children, followed(align)) });
 }
-function KjunInline({ gap = "sm", align = "center", justify = "start", wrap = true, style, children }) {
+function KjunInline({ gap = "sm", align, justify = "start", wrap = true, style, children }) {
   return /* @__PURE__ */ jsx17(View11, { style: [{
     flexDirection: "row",
     flexWrap: wrap ? "wrap" : "nowrap",
-    alignItems: crossAxis[align],
+    alignItems: crossAxis[align != null ? align : "center"],
     justifyContent: mainAxis[justify],
     gap: inlineGap[gap],
     minWidth: 0
-  }, style], children: items(children) });
+  }, style], children: items(children, followed(align)) });
 }
 
 // shared/package-runtime/feedback-dialog.ts
@@ -2924,7 +3020,7 @@ function useFeedbackDialog(controller, request, messages = kjunMessagesKo) {
 }
 
 // shared/package-runtime/feedback-motion.ts
-import { tokens as tokens14 } from "@kjun-ui/tokens";
+import { tokens as tokens15 } from "@kjun-ui/tokens";
 import { useLayoutEffect as useLayoutEffect4, useRef as useRef9, useState as useState11 } from "react";
 function usePresentedToasts(toasts, reduced) {
   const [items2, setItems] = useState11([]);
@@ -2942,7 +3038,7 @@ function usePresentedToasts(toasts, reduced) {
         if (!removals.current.has(item.toast.id)) removals.current.set(item.toast.id, setTimeout(() => {
           removals.current.delete(item.toast.id);
           setItems((current) => current.filter((value) => value.toast.id !== item.toast.id));
-        }, tokens14.motion.toastExit));
+        }, tokens15.motion.toastExit));
       }
       return next;
     });
@@ -2964,7 +3060,7 @@ function usePresentedRequest(current, reduced) {
       setRequest(current);
       return;
     }
-    const timer = setTimeout(() => setRequest(current), tokens14.motion.layerExit);
+    const timer = setTimeout(() => setRequest(current), tokens15.motion.layerExit);
     return () => clearTimeout(timer);
   }, [current, request, reduced]);
   return { request, open: !!request && (current == null ? void 0 : current.id) === request.id };
@@ -2980,7 +3076,7 @@ function useOptionalKjunFeedback() {
 // packages/native/src/toast-stack.tsx
 import { useLayoutEffect as useLayoutEffect5, useRef as useRef11 } from "react";
 import { Animated as Animated8, Platform as Platform13, View as View13 } from "react-native";
-import { tokens as tokens16 } from "@kjun-ui/tokens";
+import { tokens as tokens17 } from "@kjun-ui/tokens";
 
 // shared/package-runtime/elevation.ts
 function directionalShadow(layers, direction) {
@@ -2995,7 +3091,7 @@ function shadowLayers(layers, colors) {
 }
 
 // packages/native/src/toast.tsx
-import { tokens as tokens15 } from "@kjun-ui/tokens";
+import { tokens as tokens16 } from "@kjun-ui/tokens";
 import { useEffect as useEffect7, useRef as useRef10 } from "react";
 import { Animated as Animated7, View as View12 } from "react-native";
 import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
@@ -3039,7 +3135,7 @@ function ToastView({
       accessible: false,
       onHoverIn: () => controller.pauseToast(toast.id, reasons.hover),
       onHoverOut: () => controller.resumeToast(toast.id, reasons.hover),
-      style: { width: "100%", maxWidth: tokens15.extensions.toast.maxWidth, alignSelf: "flex-end" },
+      style: { width: "100%", maxWidth: tokens16.extensions.toast.maxWidth, alignSelf: "flex-end" },
       children: /* @__PURE__ */ jsxs8(
         View12,
         {
@@ -3048,19 +3144,19 @@ function ToastView({
           style: {
             flexDirection: "row",
             alignItems: toast.title ? "flex-start" : "center",
-            gap: tokens15.extensions.toast.gap,
-            padding: tokens15.extensions.toast.padding,
-            borderRadius: tokens15.extensions.toast.radius,
+            gap: tokens16.extensions.toast.gap,
+            padding: tokens16.extensions.toast.padding,
+            borderRadius: tokens16.extensions.toast.radius,
             backgroundColor: colors.surface,
-            boxShadow: shadowLayers(tokens15.extensions.toast.elevation, colors),
-            borderWidth: tokens15.border.defaultWidth,
+            boxShadow: shadowLayers(tokens16.extensions.toast.elevation, colors),
+            borderWidth: tokens16.border.defaultWidth,
             borderColor: colors.border,
             overflow: "hidden"
           },
           children: [
             /* @__PURE__ */ jsx18(KjunIcon, { name: icon, color: colors[`${tone}Accent`] }),
             /* @__PURE__ */ jsxs8(View12, { style: { flex: 1, minWidth: 0 }, children: [
-              !!toast.title && /* @__PURE__ */ jsx18(KText, { style: { fontWeight: typeStyle("control").fontWeight, marginBottom: tokens15.extensions.toast.titleGap }, children: toast.title }),
+              !!toast.title && /* @__PURE__ */ jsx18(KText, { style: { fontWeight: typeStyle("control").fontWeight, marginBottom: tokens16.extensions.toast.titleGap }, children: toast.title }),
               /* @__PURE__ */ jsx18(KText, { style: { color: colors.textSecondary }, children: toast.message }),
               toast.action && /* @__PURE__ */ jsx18(
                 AccessiblePressable,
@@ -3078,7 +3174,7 @@ function ToastView({
                       dismiss();
                     }
                   },
-                  style: { minHeight: tokens15.native.minimumTouchTarget, justifyContent: "center", marginTop: tokens15.extensions.toast.actionGap },
+                  style: { minHeight: tokens16.native.minimumTouchTarget, justifyContent: "center", marginTop: tokens16.extensions.toast.actionGap },
                   children: /* @__PURE__ */ jsx18(
                     KText,
                     {
@@ -3100,11 +3196,11 @@ function ToastView({
                 onBlur: () => controller.resumeToast(toast.id, reasons.focus),
                 onPress: dismiss,
                 style: {
-                  minWidth: Math.max(tokens15.extensions.toast.closeSize, tokens15.native.minimumTouchTarget),
-                  minHeight: Math.max(tokens15.extensions.toast.closeSize, tokens15.native.minimumTouchTarget),
+                  minWidth: Math.max(tokens16.extensions.toast.closeSize, tokens16.native.minimumTouchTarget),
+                  minHeight: Math.max(tokens16.extensions.toast.closeSize, tokens16.native.minimumTouchTarget),
                   alignItems: "center",
                   justifyContent: "center",
-                  borderRadius: tokens15.extensions.toast.closeRadius
+                  borderRadius: tokens16.extensions.toast.closeRadius
                 },
                 children: /* @__PURE__ */ jsx18(KjunIcon, { name: "x", color: colors.textTertiary })
               }
@@ -3117,7 +3213,7 @@ function ToastView({
                   position: "absolute",
                   bottom: 0,
                   left: 0,
-                  height: tokens15.extensions.toast.progressHeight,
+                  height: tokens16.extensions.toast.progressHeight,
                   width: progress.interpolate({
                     inputRange: [0, 1],
                     outputRange: ["0%", "100%"]
@@ -3140,8 +3236,8 @@ function useToastReflow(_root, _reduced) {
 // packages/native/src/toast-stack.tsx
 import { jsx as jsx19 } from "react/jsx-runtime";
 function ToastSlot({ item, controller, boxes }) {
-  const born = useRef11(Math.min(tokens16.motion.toastEnter, Date.now() - item.born)).current;
-  const motion = useNativePresence(!item.exiting, tokens16.motion.toastEnter - born, tokens16.motion.toastExit, true, born / tokens16.motion.toastEnter);
+  const born = useRef11(Math.min(tokens17.motion.toastEnter, Date.now() - item.born)).current;
+  const motion = useNativePresence(!item.exiting, tokens17.motion.toastEnter - born, tokens17.motion.toastExit, true, born / tokens17.motion.toastEnter);
   const offset = useRef11(new Animated8.Value(0)).current;
   const box = boxes.get(item.toast.id);
   useLayoutEffect5(() => {
@@ -3162,7 +3258,7 @@ function ToastSlot({ item, controller, boxes }) {
         boxes.set(item.toast.id, next);
         if (old && old.y !== next.y && !motion.reduced) offset.stopAnimation((current) => {
           offset.setValue(current + old.y - next.y);
-          Animated8.timing(offset, { toValue: 0, duration: tokens16.motion.toastMove, easing: motionOut, useNativeDriver: nativeDriver }).start();
+          Animated8.timing(offset, { toValue: 0, duration: tokens17.motion.toastMove, easing: motionOut, useNativeDriver: nativeDriver }).start();
         });
       },
       style: { transform: [{ translateY: offset }], ...item.exiting && box ? {
@@ -3179,7 +3275,7 @@ function ToastSlot({ item, controller, boxes }) {
           accessibilityElementsHidden: item.exiting,
           importantForAccessibility: item.exiting ? "no-hide-descendants" : "auto",
           ...item.exiting ? { inert: true } : {},
-          style: { opacity: motion.opacity, transform: [{ translateY: motion.progress.interpolate({ inputRange: [0, 1], outputRange: [-tokens16.motionDistance.toast, 0] }) }] },
+          style: { opacity: motion.opacity, transform: [{ translateY: motion.progress.interpolate({ inputRange: [0, 1], outputRange: [-tokens17.motionDistance.toast, 0] }) }] },
           children: /* @__PURE__ */ jsx19(ToastView, { toast: item.toast, controller })
         }
       )
@@ -3195,10 +3291,10 @@ function ToastStack({ items: items2, controller }) {
   for (const id of boxes.keys()) if (!items2.some((item) => item.toast.id === id)) boxes.delete(id);
   return /* @__PURE__ */ jsx19(View13, { ref: root, pointerEvents: "box-none", style: {
     position: "absolute",
-    top: tokens16.extensions.toast.inset,
-    right: tokens16.extensions.toast.inset,
-    left: tokens16.extensions.toast.inset,
-    gap: tokens16.extensions.toast.stackGap,
+    top: tokens17.extensions.toast.inset,
+    right: tokens17.extensions.toast.inset,
+    left: tokens17.extensions.toast.inset,
+    gap: tokens17.extensions.toast.stackGap,
     minHeight: items2.some((item) => item.exiting) ? Math.max(0, ...[...boxes.values()].map((box) => box.y + box.height)) : void 0,
     zIndex: layers.zIndex((_a = layers.topWindow()) == null ? void 0 : _a.id, "toast")
   }, children: items2.map((item) => /* @__PURE__ */ jsx19(ToastSlot, { item, controller, boxes }, item.toast.id)) });
@@ -3206,8 +3302,9 @@ function ToastStack({ items: items2, controller }) {
 
 // packages/native/src/feedback.tsx
 import {
-  tokens as tokens17,
-  createFeedbackController
+  tokens as tokens18,
+  createFeedbackController,
+  feedbackControllerOf
 } from "@kjun-ui/tokens";
 import {
   useCallback as useCallback3,
@@ -3217,6 +3314,7 @@ import {
   useSyncExternalStore as useSyncExternalStore2
 } from "react";
 import { View as View14 } from "react-native";
+import { createKjunFeedback } from "@kjun-ui/tokens";
 import { jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
 function useKjunFeedback() {
   const value = useOptionalKjunFeedback();
@@ -3248,7 +3346,7 @@ function FeedbackDialog({
       onConfirm: submit,
       confirmVariant: options.type === "danger" ? "danger" : "primary",
       children: [
-        !!options.message && /* @__PURE__ */ jsx20(KText, { style: { marginBottom: tokens17.dimension.value16 }, children: options.message }),
+        !!options.message && /* @__PURE__ */ jsx20(KText, { style: { marginBottom: tokens18.dimension.value16 }, children: options.message }),
         request.kind === "prompt" && /* @__PURE__ */ jsx20(
           KjunInput,
           {
@@ -3265,8 +3363,10 @@ function FeedbackDialog({
     }
   );
 }
-function KjunFeedbackProvider({ children, style }) {
-  const [controller] = useState12(createFeedbackController);
+function KjunFeedbackProvider({ children, style, controller: controllerProp }) {
+  const [owned] = useState12(() => controllerProp ? void 0 : createFeedbackController());
+  const controller = controllerProp ? feedbackControllerOf(controllerProp) : owned;
+  useEffect8(() => controller.attach(), [controller]);
   const life = useRef12(0);
   const snapshot = useSyncExternalStore2(
     controller.subscribe,
@@ -3280,7 +3380,7 @@ function KjunFeedbackProvider({ children, style }) {
     const version = ++life.current;
     return () => {
       queueMicrotask(() => {
-        if (life.current === version) controller.dispose();
+        if (life.current === version && !controllerProp) controller.dispose();
       });
     };
   }, [controller]);
@@ -3315,7 +3415,7 @@ function KjunFeedbackProvider({ children, style }) {
 
 // packages/native/src/choice-controls.tsx
 import { Animated as Animated9 } from "react-native";
-import { tokens as tokens18 } from "@kjun-ui/tokens";
+import { tokens as tokens19 } from "@kjun-ui/tokens";
 import {
   createContext as createContext16,
   useContext as useContext12,
@@ -3338,7 +3438,7 @@ function KjunCheckbox({
   onValueChange,
   onChange
 }) {
-  const { colors } = useKjunStyles(), checked = Array.isArray(value) ? value.includes(val) : value, dimension = tokens18.extensions.checkbox.sizes[size];
+  const { colors } = useKjunStyles(), checked = Array.isArray(value) ? value.includes(val) : value, dimension = tokens19.extensions.checkbox.sizes[size];
   return /* @__PURE__ */ jsxs10(
     AccessiblePressable,
     {
@@ -3357,8 +3457,8 @@ function KjunCheckbox({
         flexDirection: "row",
         alignItems: "center",
         // Like Web's choice row on a mouse-like pointer; touch layouts keep the 44px target.
-        minHeight: finePointer() ? tokens18.extensions.choice.minimumHeight : tokens18.native.minimumTouchTarget,
-        opacity: disabled ? tokens18.states.opacity.disabled : pressed ? tokens18.states.opacity.pressed : 1
+        minHeight: finePointer() ? tokens19.extensions.choice.minimumHeight : tokens19.native.minimumTouchTarget,
+        opacity: disabled ? tokens19.states.opacity.disabled : pressed ? tokens19.states.opacity.pressed : 1
       }),
       children: [
         /* @__PURE__ */ jsx21(
@@ -3369,8 +3469,8 @@ function KjunCheckbox({
               justifyContent: "center",
               width: dimension,
               height: dimension,
-              borderRadius: tokens18.extensions.checkbox.radii[size],
-              borderWidth: tokens18.border.controlWidth,
+              borderRadius: tokens19.extensions.checkbox.radii[size],
+              borderWidth: tokens19.border.controlWidth,
               // Same boundary roles as Radio: strong while enabled, secondary once disabled.
               borderColor: checked ? colors.brand : disabled ? colors.borderSecondary : colors.borderStrong,
               backgroundColor: checked ? colors.brand : colors.surface
@@ -3379,14 +3479,14 @@ function KjunCheckbox({
               KjunIcon,
               {
                 name: "check",
-                size: tokens18.extensions.checkbox.iconSizes[size],
+                size: tokens19.extensions.checkbox.iconSizes[size],
                 color: colors.onBrand
               }
             )
           }
         ),
         !!(children || label) && content(children || label, {
-          marginLeft: tokens18.extensions.checkbox.labelGap,
+          marginLeft: tokens19.extensions.checkbox.labelGap,
           ...typeStyle("label")
         })
       ]
@@ -3402,7 +3502,7 @@ function useControlFocus(disabled) {
       onFocus: (event) => setFocused(focusVisible(event.currentTarget)),
       onBlur: () => setFocused(false)
     },
-    ring: focused && !disabled ? { outlineStyle: "solid", outlineWidth: tokens18.states.focus.width, outlineOffset: tokens18.states.focus.choiceOffset, outlineColor: colors.focusRing } : {}
+    ring: focused && !disabled ? { outlineStyle: "solid", outlineWidth: tokens19.states.focus.width, outlineOffset: tokens19.states.focus.choiceOffset, outlineColor: colors.focusRing } : {}
   };
 }
 function KjunSwitch({
@@ -3417,10 +3517,10 @@ function KjunSwitch({
   onChange
 }) {
   const { colors } = useKjunStyles();
-  const width = tokens18.extensions.switch.widths[size];
-  const height = tokens18.extensions.switch.heights[size];
-  const thumb = height - 2 * tokens18.extensions.switch.padding;
-  const offScale = (thumb - 2 * tokens18.border.controlWidth) / thumb;
+  const width = tokens19.extensions.switch.widths[size];
+  const height = tokens19.extensions.switch.heights[size];
+  const thumb = height - 2 * tokens19.extensions.switch.padding;
+  const offScale = (thumb - 2 * tokens19.border.controlWidth) / thumb;
   const offset = width - height;
   const motion = useMotionValue(value ? 1 : 0);
   const focus = useControlFocus(disabled);
@@ -3449,8 +3549,8 @@ function KjunSwitch({
         flexDirection: "row",
         alignItems: "center",
         // Like Web's choice row on a mouse-like pointer; touch layouts keep the 44px target.
-        minHeight: finePointer() ? tokens18.extensions.choice.minimumHeight : tokens18.native.minimumTouchTarget,
-        opacity: disabled ? tokens18.states.opacity.disabled : 1
+        minHeight: finePointer() ? tokens19.extensions.choice.minimumHeight : tokens19.native.minimumTouchTarget,
+        opacity: disabled ? tokens19.states.opacity.disabled : 1
       },
       children: [
         /* @__PURE__ */ jsxs10(
@@ -3459,8 +3559,8 @@ function KjunSwitch({
             style: {
               width,
               height,
-              padding: tokens18.extensions.switch.padding,
-              borderRadius: tokens18.extensions.switch.radius,
+              padding: tokens19.extensions.switch.padding,
+              borderRadius: tokens19.extensions.switch.radius,
               backgroundColor: trackColor,
               ...focus.ring
             },
@@ -3472,8 +3572,8 @@ function KjunSwitch({
                   style: {
                     position: "absolute",
                     inset: 0,
-                    borderRadius: tokens18.extensions.switch.radius,
-                    borderWidth: tokens18.border.controlWidth,
+                    borderRadius: tokens19.extensions.switch.radius,
+                    borderWidth: tokens19.border.controlWidth,
                     // Hover turns the boundary to brand, like Checkbox on Web.
                     borderColor: hovered && !disabled ? colors.brand : offRole,
                     opacity: motion.interpolate({ inputRange: [0, 1], outputRange: [1, 0] })
@@ -3486,7 +3586,7 @@ function KjunSwitch({
                   style: {
                     width: thumb,
                     height: thumb,
-                    borderRadius: tokens18.extensions.switch.radius,
+                    borderRadius: tokens19.extensions.switch.radius,
                     backgroundColor: thumbColor,
                     transform: [
                       { translateX: motion.interpolate({ inputRange: [0, 1], outputRange: [0, offset] }) },
@@ -3498,11 +3598,11 @@ function KjunSwitch({
             ]
           }
         ),
-        description ? /* @__PURE__ */ jsxs10(View15, { style: { marginLeft: tokens18.extensions.switch.labelGap, flexShrink: 1, minWidth: 0 }, children: [
+        description ? /* @__PURE__ */ jsxs10(View15, { style: { marginLeft: tokens19.extensions.switch.labelGap, flexShrink: 1, minWidth: 0 }, children: [
           !!(children || label) && content(children || label, typeStyle("label")),
-          /* @__PURE__ */ jsx21(KText, { style: { ...typeStyle("caption"), marginTop: tokens18.dimension.value4, color: colors.textSecondary }, children: description })
+          /* @__PURE__ */ jsx21(KText, { style: { ...typeStyle("caption"), marginTop: tokens19.dimension.value4, color: colors.textSecondary }, children: description })
         ] }) : !!(children || label) && content(children || label, {
-          marginLeft: tokens18.extensions.switch.labelGap,
+          marginLeft: tokens19.extensions.switch.labelGap,
           ...typeStyle("label")
         })
       ]
@@ -3521,7 +3621,7 @@ function KjunRadio({
   onChange
 }) {
   const group = useContext12(RadioContext), { colors } = useKjunStyles(), selected = (group ? group.value : value) === val;
-  const geometry2 = tokens18.extensions.radio;
+  const geometry2 = tokens19.extensions.radio;
   const [hovered, setHovered] = useState13(false);
   useEffect9(() => {
     if (disabled) setHovered(false);
@@ -3548,8 +3648,8 @@ function KjunRadio({
         flexDirection: "row",
         alignItems: "center",
         // Like Web's choice row on a mouse-like pointer; touch layouts keep the 44px target.
-        minHeight: finePointer() ? tokens18.extensions.choice.minimumHeight : tokens18.native.minimumTouchTarget,
-        opacity: disabled ? tokens18.states.opacity.disabled : 1
+        minHeight: finePointer() ? tokens19.extensions.choice.minimumHeight : tokens19.native.minimumTouchTarget,
+        opacity: disabled ? tokens19.states.opacity.disabled : 1
       },
       children: ({ pressed }) => /* @__PURE__ */ jsxs10(Fragment5, { children: [
         /* @__PURE__ */ jsx21(
@@ -3559,7 +3659,7 @@ function KjunRadio({
               width: geometry2.size,
               height: geometry2.size,
               borderWidth: geometry2.borderWidth,
-              borderRadius: tokens18.radius.radius9999,
+              borderRadius: tokens19.radius.radius9999,
               alignItems: "center",
               justifyContent: "center",
               borderColor: disabled ? selected ? colors.brand : colors.borderSecondary : pressed ? colors.brandActive : hovered ? colors.brandHover : selected ? colors.brand : colors.borderStrong,
@@ -3571,7 +3671,7 @@ function KjunRadio({
                 style: {
                   width: geometry2.dot,
                   height: geometry2.dot,
-                  borderRadius: tokens18.radius.radius9999,
+                  borderRadius: tokens19.radius.radius9999,
                   backgroundColor: colors.brand
                 }
               }
@@ -3616,7 +3716,7 @@ function KjunRadioGroup({
           style: {
             flexDirection: direction === "vertical" ? "column" : "row",
             flexWrap: direction === "vertical" ? "nowrap" : "wrap",
-            gap: direction === "vertical" ? tokens18.dimension.value8 : tokens18.dimension.value16
+            gap: direction === "vertical" ? tokens19.dimension.value8 : tokens19.dimension.value16
           },
           children: children || options.map((option) => /* @__PURE__ */ jsx21(
             KjunRadio,
@@ -3634,7 +3734,7 @@ function KjunRadioGroup({
 }
 
 // packages/native/src/selection-groups.tsx
-import { tokens as tokens20 } from "@kjun-ui/tokens";
+import { tokens as tokens21 } from "@kjun-ui/tokens";
 import { useLayoutEffect as useLayoutEffect7, useRef as useRef15 } from "react";
 import {
   Animated as Animated11,
@@ -3646,9 +3746,9 @@ import {
 // packages/native/src/button-group-motion.tsx
 import { useCallback as useCallback4, useEffect as useEffect10, useLayoutEffect as useLayoutEffect6, useRef as useRef14, useState as useState14 } from "react";
 import { Animated as Animated10, Easing as Easing4, StyleSheet as StyleSheet5, View as View16 } from "react-native";
-import { tokens as tokens19 } from "@kjun-ui/tokens";
+import { tokens as tokens20 } from "@kjun-ui/tokens";
 import { jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
-var curve = tokens19.motion.easeOut.match(/-?\d*\.?\d+/g).map(Number);
+var curve = tokens20.motion.easeOut.match(/-?\d*\.?\d+/g).map(Number);
 var easing = Easing4.bezier(...curve);
 var sameBox = (a, b) => a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
 function useButtonGroupMotion(selected) {
@@ -3675,8 +3775,8 @@ function useButtonGroupMotion(selected) {
     width.stopAnimation();
     if (old && old.value !== selected.value && !reduced) {
       Animated10.parallel([
-        Animated10.timing(x, { toValue: layout.x, duration: tokens19.motion.indicator, easing, useNativeDriver: false }),
-        Animated10.timing(width, { toValue: layout.width, duration: tokens19.motion.indicator, easing, useNativeDriver: false })
+        Animated10.timing(x, { toValue: layout.x, duration: tokens20.motion.indicator, easing, useNativeDriver: false }),
+        Animated10.timing(width, { toValue: layout.width, duration: tokens20.motion.indicator, easing, useNativeDriver: false })
       ]).start();
     } else {
       x.setValue(layout.x);
@@ -3697,7 +3797,7 @@ function ButtonGroupLabel({ label, active, size, reduced }) {
   useEffect10(() => {
     progress.stopAnimation();
     if (reduced || !interpolate) progress.setValue(active ? 1 : 0);
-    else Animated10.timing(progress, { toValue: active ? 1 : 0, duration: tokens19.motion.indicator, easing, useNativeDriver: false }).start();
+    else Animated10.timing(progress, { toValue: active ? 1 : 0, duration: tokens20.motion.indicator, easing, useNativeDriver: false }).start();
     return () => progress.stopAnimation();
   }, [active, reduced, interpolate, progress]);
   const resolveFont = useResolveFont();
@@ -3739,8 +3839,8 @@ function KjunButtonGroup({
   const { colors } = useKjunStyles();
   const selected = options.find((option) => option.value === value);
   const motion = useButtonGroupMotion(selected);
-  const padding = tokens20.buttonGroup.padding[size];
-  const itemRadius = tokens20.buttonGroup.itemRadii[size];
+  const padding = tokens21.buttonGroup.padding[size];
+  const itemRadius = tokens21.buttonGroup.itemRadii[size];
   const itemRefs = useRef15(/* @__PURE__ */ new Map());
   const { updateLayout } = motion;
   useLayoutEffect7(() => {
@@ -3766,7 +3866,7 @@ function KjunButtonGroup({
           style: {
             flexDirection: "row",
             padding,
-            borderRadius: tokens20.buttonGroup.radii[size],
+            borderRadius: tokens21.buttonGroup.radii[size],
             backgroundColor: colors.secondary,
             flexGrow: fullWidth ? 1 : 0
           },
@@ -3790,7 +3890,7 @@ function KjunButtonGroup({
                   // Disabled options dim their own labels; the selected value stays readable. The edge keeps it
                   // apart from the track when surface and secondary are close.
                   backgroundColor: colors.surface,
-                  borderWidth: tokens20.border.defaultWidth,
+                  borderWidth: tokens21.border.defaultWidth,
                   borderColor: colors.border
                 }
               }
@@ -3818,22 +3918,22 @@ function KjunButtonGroup({
                     flexDirection: "row",
                     alignItems: "center",
                     justifyContent: "center",
-                    gap: tokens20.dimension.value6,
+                    gap: tokens21.dimension.value6,
                     flex: fullWidth ? 1 : void 0,
-                    minWidth: tokens20.native.minimumTouchTarget,
-                    minHeight: tokens20.native.minimumTouchTarget,
-                    height: Math.max(tokens20.native.minimumTouchTarget, tokens20.buttonGroup.heights[size] - 2 * padding),
-                    paddingHorizontal: tokens20.buttonGroup.itemPaddingX[size],
+                    minWidth: tokens21.native.minimumTouchTarget,
+                    minHeight: tokens21.native.minimumTouchTarget,
+                    height: Math.max(tokens21.native.minimumTouchTarget, tokens21.buttonGroup.heights[size] - 2 * padding),
+                    paddingHorizontal: tokens21.buttonGroup.itemPaddingX[size],
                     borderRadius: itemRadius,
                     backgroundColor: active && !motion.layout ? colors.surface : pressed && !active ? colors.hover : "transparent",
-                    opacity: blocked ? tokens20.states.opacity.disabled : 1
+                    opacity: blocked ? tokens21.states.opacity.disabled : 1
                   }),
                   children: [
                     !!option.icon && /* @__PURE__ */ jsx23(
                       KjunIcon,
                       {
                         name: option.icon,
-                        size: tokens20.extensions.selection.iconSize,
+                        size: tokens21.extensions.selection.iconSize,
                         color: active ? colors.text : colors.textSecondary
                       }
                     ),
@@ -3869,7 +3969,7 @@ function KjunFilterGroup({
   onChange
 }) {
   const { colors } = useKjunStyles();
-  const wide = useWindowDimensions2().width >= tokens20.responsive.selection, roomy = wide && finePointer();
+  const wide = useWindowDimensions2().width >= tokens21.responsive.selection, roomy = wide && finePointer();
   const selected = (v) => multiple ? Array.isArray(value) && (v === null ? value.length === 0 : value.includes(v)) : value === v;
   const children = /* @__PURE__ */ jsx23(
     View17,
@@ -3878,7 +3978,7 @@ function KjunFilterGroup({
       style: {
         flexDirection: "row",
         flexWrap: scroll ? "nowrap" : "wrap",
-        gap: tokens20.dimension.value8
+        gap: tokens21.dimension.value8
       },
       children: options.map((option) => {
         const active = selected(option.value), blocked = disabled || option.disabled;
@@ -3895,9 +3995,9 @@ function KjunFilterGroup({
               onChange == null ? void 0 : onChange(next);
             },
             style: {
-              minHeight: roomy ? void 0 : tokens20.native.minimumTouchTarget,
+              minHeight: roomy ? void 0 : tokens21.native.minimumTouchTarget,
               justifyContent: "center",
-              opacity: blocked ? tokens20.states.opacity.disabledStrong : 1
+              opacity: blocked ? tokens21.states.opacity.disabledStrong : 1
             },
             children: /* @__PURE__ */ jsxs12(
               View17,
@@ -3906,12 +4006,12 @@ function KjunFilterGroup({
                   flexDirection: "row",
                   alignItems: "center",
                   justifyContent: "center",
-                  gap: tokens20.dimension.value4,
-                  minHeight: roomy ? void 0 : tokens20.extensions.selection.minimumHeight,
-                  height: roomy ? tokens20.button.heights[size] : Math.max(tokens20.extensions.selection.minimumHeight, tokens20.button.heights[size]),
-                  paddingHorizontal: { xs: tokens20.dimension.value8, sm: tokens20.dimension.value12, md: tokens20.dimension.value12, lg: tokens20.dimension.value14, xl: tokens20.dimension.value16 }[size],
+                  gap: tokens21.dimension.value4,
+                  minHeight: roomy ? void 0 : tokens21.extensions.selection.minimumHeight,
+                  height: roomy ? tokens21.button.heights[size] : Math.max(tokens21.extensions.selection.minimumHeight, tokens21.button.heights[size]),
+                  paddingHorizontal: { xs: tokens21.dimension.value8, sm: tokens21.dimension.value12, md: tokens21.dimension.value12, lg: tokens21.dimension.value14, xl: tokens21.dimension.value16 }[size],
                   // Corners follow the button scale with the height, so every size keeps the same shape.
-                  borderRadius: tokens20.button.radii[size],
+                  borderRadius: tokens21.button.radii[size],
                   backgroundColor: active ? colors.text : colors.secondary
                 },
                 children: [
@@ -3919,9 +4019,9 @@ function KjunFilterGroup({
                     View17,
                     {
                       style: {
-                        width: tokens20.extensions.selection.dotSize,
-                        height: tokens20.extensions.selection.dotSize,
-                        borderRadius: tokens20.radius.radius4,
+                        width: tokens21.extensions.selection.dotSize,
+                        height: tokens21.extensions.selection.dotSize,
+                        borderRadius: tokens21.radius.radius4,
                         backgroundColor: option.dot
                       }
                     }
@@ -3930,7 +4030,7 @@ function KjunFilterGroup({
                     KjunIcon,
                     {
                       name: option.icon,
-                      size: tokens20.extensions.selection.iconSize,
+                      size: tokens21.extensions.selection.iconSize,
                       color: active ? colors.inverse : colors.textSecondary
                     }
                   ),
@@ -3981,7 +4081,7 @@ function KjunFilterGroup({
 }
 
 // packages/native/src/textarea.tsx
-import { tokens as tokens21 } from "@kjun-ui/tokens";
+import { tokens as tokens22 } from "@kjun-ui/tokens";
 import {
   forwardRef as forwardRef4
 } from "react";
@@ -4003,7 +4103,7 @@ var KjunTextarea = forwardRef4(
     onBlur,
     ...props
   }, ref) {
-    const field = useKjunField(), { colors, fontFamily } = useKjunStyles(), spec = tokens21.input[size];
+    const field = useKjunField(), { colors, fontFamily } = useKjunStyles(), spec = tokens22.input[size];
     const invalid = error || !!(field == null ? void 0 : field.error);
     const surface = useFieldSurface(size, { disabled, readOnly: readonly || props.readOnly || props.editable === false, invalid });
     return /* @__PURE__ */ jsx24(
@@ -4044,8 +4144,8 @@ var KjunTextarea = forwardRef4(
             ...inputTypeStyle(size),
             ...surface.style,
             height: void 0,
-            minHeight: Math.max(spec.height, rows * spec.lineHeight + spec.textareaPaddingY * 2 + 2 * tokens21.border.controlWidth),
-            paddingHorizontal: spec.padding - tokens21.border.controlWidth,
+            minHeight: Math.max(spec.height, rows * spec.lineHeight + spec.textareaPaddingY * 2 + 2 * tokens22.border.controlWidth),
+            paddingHorizontal: spec.padding - tokens22.border.controlWidth,
             paddingVertical: spec.textareaPaddingY,
             textAlignVertical: "top",
             color: surface.ink
@@ -4058,7 +4158,7 @@ var KjunTextarea = forwardRef4(
 );
 
 // packages/native/src/drawer.tsx
-import { tokens as tokens22 } from "@kjun-ui/tokens";
+import { tokens as tokens23 } from "@kjun-ui/tokens";
 import { useEffect as useEffect11, useState as useState15 } from "react";
 import { Animated as Animated12, Keyboard } from "react-native";
 
@@ -4115,7 +4215,7 @@ function KjunDrawer({
   onOpenChange,
   title,
   position = "right",
-  width = tokens22.extensions.drawer.width,
+  width = tokens23.extensions.drawer.width,
   closable = true,
   closeOnOverlay = true,
   closeOnEsc = true,
@@ -4139,13 +4239,13 @@ function KjunDrawer({
     windowHeight: rootHeight || window2.height,
     safeAreaTop: Math.max(0, safeAreaTop),
     safeAreaBottom: Math.max(0, safeAreaBottom),
-    gap: tokens22.extensions.drawer.sheetGap,
+    gap: tokens23.extensions.drawer.sheetGap,
     keyboard,
     maxHeight
   });
   const [panelHeight, setPanelHeight] = useState15(0);
-  const motion = useNativePresence(open, tokens22.motion.layerEnter, tokens22.motion.layerExit, vertical || panelHeight > 0, 0, { enterEasing: motionEmphasized });
-  const backdrop = useNativePresence(open, tokens22.motion.backdrop, tokens22.motion.backdropExit, true, 0, { fade: tokens22.motion.backdropExit });
+  const motion = useNativePresence(open, tokens23.motion.layerEnter, tokens23.motion.layerExit, vertical || panelHeight > 0, 0, { enterEasing: motionEmphasized });
+  const backdrop = useNativePresence(open, tokens23.motion.backdrop, tokens23.motion.backdropExit, true, 0, { fade: tokens23.motion.backdropExit });
   const close = () => {
     if (!open) return;
     onOpenChange(false);
@@ -4210,10 +4310,10 @@ function KjunDrawer({
                   paddingTop: frame.paddingTop,
                   paddingBottom: frame.paddingBottom,
                   marginBottom: frame.lift,
-                  borderRadius: tokens22.extensions.drawer.radius,
-                  borderTopLeftRadius: position === "bottom" ? tokens22.extensions.drawer.bottomRadius : tokens22.extensions.drawer.radius,
-                  borderTopRightRadius: position === "bottom" ? tokens22.extensions.drawer.bottomRadius : tokens22.extensions.drawer.radius,
-                  boxShadow: directionalShadow(tokens22.extensions.drawer.elevation, position).map(({ colorRole, ...layer2 }) => ({ ...layer2, color: colors[colorRole] })),
+                  borderRadius: tokens23.extensions.drawer.radius,
+                  borderTopLeftRadius: position === "bottom" ? tokens23.extensions.drawer.bottomRadius : tokens23.extensions.drawer.radius,
+                  borderTopRightRadius: position === "bottom" ? tokens23.extensions.drawer.bottomRadius : tokens23.extensions.drawer.radius,
+                  boxShadow: directionalShadow(tokens23.extensions.drawer.elevation, position).map(({ colorRole, ...layer2 }) => ({ ...layer2, color: colors[colorRole] })),
                   backgroundColor: colors.surface
                 },
                 children: [
@@ -4224,9 +4324,9 @@ function KjunDrawer({
                         flexDirection: "row",
                         alignItems: "center",
                         justifyContent: "space-between",
-                        paddingVertical: tokens22.extensions.drawer.paddingY,
-                        paddingHorizontal: tokens22.extensions.drawer.paddingX,
-                        borderBottomWidth: tokens22.border.defaultWidth,
+                        paddingVertical: tokens23.extensions.drawer.paddingY,
+                        paddingHorizontal: tokens23.extensions.drawer.paddingX,
+                        borderBottomWidth: tokens23.border.defaultWidth,
                         borderBottomColor: colors.border
                       },
                       children: [
@@ -4244,8 +4344,8 @@ function KjunDrawer({
                             variant: "ghost",
                             ariaLabel: m.close,
                             onPress: close,
-                            style: { borderRadius: tokens22.extensions.drawer.closeRadius, width: tokens22.extensions.drawer.closeSize, height: tokens22.extensions.drawer.closeSize, paddingHorizontal: 0, paddingVertical: 0 },
-                            children: /* @__PURE__ */ jsx25(KjunIcon, { name: "x", size: tokens22.extensions.drawer.closeIconSize })
+                            style: { borderRadius: tokens23.extensions.drawer.closeRadius, width: tokens23.extensions.drawer.closeSize, height: tokens23.extensions.drawer.closeSize, paddingHorizontal: 0, paddingVertical: 0 },
+                            children: /* @__PURE__ */ jsx25(KjunIcon, { name: "x", size: tokens23.extensions.drawer.closeIconSize })
                           }
                         )
                       ]
@@ -4256,7 +4356,7 @@ function KjunDrawer({
                     {
                       keyboardShouldPersistTaps: "handled",
                       style: vertical ? { flex: 1 } : { flexGrow: 0, flexShrink: 1 },
-                      contentContainerStyle: { padding: noPadding ? 0 : tokens22.extensions.drawer.bodyPadding },
+                      contentContainerStyle: { padding: noPadding ? 0 : tokens23.extensions.drawer.bodyPadding },
                       children: content(children)
                     }
                   ),
@@ -4264,9 +4364,9 @@ function KjunDrawer({
                     View18,
                     {
                       style: {
-                        paddingVertical: tokens22.extensions.drawer.paddingY,
-                        paddingHorizontal: tokens22.extensions.drawer.paddingX,
-                        borderTopWidth: tokens22.border.defaultWidth,
+                        paddingVertical: tokens23.extensions.drawer.paddingY,
+                        paddingHorizontal: tokens23.extensions.drawer.paddingX,
+                        borderTopWidth: tokens23.border.defaultWidth,
                         borderTopColor: colors.border
                       },
                       children: content(footer)
@@ -4283,7 +4383,7 @@ function KjunDrawer({
 }
 
 // packages/native/src/dropdown.tsx
-import { tokens as tokens25 } from "@kjun-ui/tokens";
+import { tokens as tokens26 } from "@kjun-ui/tokens";
 import {
   Children as Children3,
   Fragment as Fragment7,
@@ -4300,7 +4400,7 @@ import {
 
 // packages/native/src/floating-panel.tsx
 import { Animated as Animated13 } from "react-native";
-import { tokens as tokens23 } from "@kjun-ui/tokens";
+import { tokens as tokens24 } from "@kjun-ui/tokens";
 import {
   cloneElement as cloneElement3,
   isValidElement as isValidElement4,
@@ -4367,7 +4467,7 @@ function FloatingPanel({
   const scroll = useRef16(null), viewport = useRef16(0);
   const { colors } = useKjunStyles(), window2 = useWindowDimensions4(), [anchored, setAnchored] = useState16(false), [sized, setSized] = useState16(false), [anchor, setAnchor] = useState16({ x: 0, y: 0, width: 0, height: 0 }), [panel, setPanel] = useState16({ width: 0, height: 0 });
   const measurement = useRef16(0);
-  const motion = useNativePresence(open, tooltip ? tokens23.motion.tooltipEnter : tokens23.motion.popupEnter, tooltip ? tokens23.motion.tooltipExit : tokens23.motion.popupExit, anchored && sized);
+  const motion = useNativePresence(open, tooltip ? tokens24.motion.tooltipEnter : tokens24.motion.popupEnter, tooltip ? tokens24.motion.tooltipExit : tokens24.motion.popupExit, anchored && sized);
   const layer = useLayer(open, motion.present, tooltip ? "tooltip" : "popup", () => onOpenChange(false), triggerRef);
   useLayoutEffect8(() => {
     var _a;
@@ -4392,7 +4492,7 @@ function FloatingPanel({
     var _a;
     const row = reveal == null ? void 0 : reveal.current;
     if (!open || !anchored || !sized || !row || !viewport.current) return;
-    const offset = row.y + row.height + (menu || field ? tokens23.extensions.menu.padding : 0) - viewport.current;
+    const offset = row.y + row.height + (menu || field ? tokens24.extensions.menu.padding : 0) - viewport.current;
     if (offset > 0) (_a = scroll.current) == null ? void 0 : _a.scrollTo({ y: offset, animated: false });
   }, [open, anchored, sized, reveal, menu, field]);
   useEffect12(() => {
@@ -4405,30 +4505,30 @@ function FloatingPanel({
       if (tag) AccessibilityInfo3.setAccessibilityFocus(tag);
     }
   }, [open, anchored, sized, focusOnOpen]);
-  const gap = field ? tokens23.extensions.floating.fieldGap : tokens23.extensions.floating.anchorGap;
+  const gap = field ? tokens24.extensions.floating.fieldGap : tokens24.extensions.floating.anchorGap;
   const contentSizedMenu = menu && !matchTriggerWidth;
-  const tooltipWidth = Math.min(Math.max(0, window2.width - 2 * tokens23.extensions.floating.viewportInset), tokens23.extensions.tooltip.maxWidth);
-  const maximumWidth = Math.max(0, window2.width - 2 * tokens23.extensions.floating.viewportInset);
+  const tooltipWidth = Math.min(Math.max(0, window2.width - 2 * tokens24.extensions.floating.viewportInset), tokens24.extensions.tooltip.maxWidth);
+  const maximumWidth = Math.max(0, window2.width - 2 * tokens24.extensions.floating.viewportInset);
   const minimumPanelWidth = Math.min(
     maximumWidth,
-    Math.max(minimumWidth, menu || field ? tokens23.extensions.menu.minimumWidth : 0)
+    Math.max(minimumWidth, menu || field ? tokens24.extensions.menu.minimumWidth : 0)
   );
   const width = tooltip ? Math.min(tooltipWidth, panel.width || tooltipWidth) : Math.min(
     maximumWidth,
-    Math.max(minimumPanelWidth, contentSizedMenu ? panel.width : matchTriggerWidth ? anchor.width : tokens23.extensions.popover.width)
+    Math.max(minimumPanelWidth, contentSizedMenu ? panel.width : matchTriggerWidth ? anchor.width : tokens24.extensions.popover.width)
   );
-  const available = Math.min(maxHeight != null ? maxHeight : field ? tokens23.extensions.menu.listMaxHeight : tokens23.extensions.floating.maxHeight, window2.height - 2 * tokens23.extensions.floating.viewportInset), height = Math.min(panel.height + (header != null ? headerHeight : 0), available), roomAbove = anchor.y - gap - tokens23.extensions.floating.viewportInset, roomBelow = window2.height - anchor.y - anchor.height - gap - tokens23.extensions.floating.viewportInset, above = placement.startsWith("top") ? !(flip && height > roomAbove && roomBelow > roomAbove) : flip && height > roomBelow && roomAbove > roomBelow;
+  const available = Math.min(maxHeight != null ? maxHeight : field ? tokens24.extensions.menu.listMaxHeight : tokens24.extensions.floating.maxHeight, window2.height - 2 * tokens24.extensions.floating.viewportInset), height = Math.min(panel.height + (header != null ? headerHeight : 0), available), roomAbove = anchor.y - gap - tokens24.extensions.floating.viewportInset, roomBelow = window2.height - anchor.y - anchor.height - gap - tokens24.extensions.floating.viewportInset, above = placement.startsWith("top") ? !(flip && height > roomAbove && roomBelow > roomAbove) : flip && height > roomBelow && roomAbove > roomBelow;
   let left = placement.endsWith("end") ? anchor.x + anchor.width - width : placement === "top" || placement === "bottom" ? anchor.x + (anchor.width - width) / 2 : anchor.x, top = above ? anchor.y - height - gap : anchor.y + anchor.height + gap;
   if (placement === "left" || placement === "right") {
     left = placement === "left" ? anchor.x - width - gap : anchor.x + anchor.width + gap;
     top = anchor.y + (anchor.height - height) / 2;
   }
-  left = Math.max(tokens23.extensions.floating.viewportInset, Math.min(window2.width - width - tokens23.extensions.floating.viewportInset, left));
-  top = Math.max(tokens23.extensions.floating.viewportInset, Math.min(window2.height - height - tokens23.extensions.floating.viewportInset, top));
+  left = Math.max(tokens24.extensions.floating.viewportInset, Math.min(window2.width - width - tokens24.extensions.floating.viewportInset, left));
+  top = Math.max(tokens24.extensions.floating.viewportInset, Math.min(window2.height - height - tokens24.extensions.floating.viewportInset, top));
   if (layer.blocked) return null;
   if (tooltip && Platform16.OS === "web") {
     if (!motion.present) return null;
-    const arrow = tokens23.extensions.tooltip.arrowSize, corner = tokens23.radius.radius6, side = placement === "left" ? "right" : placement === "right" ? "left" : above ? "bottom" : "top", along = side === "top" || side === "bottom" ? Math.max(corner, Math.min(width - corner - arrow, anchor.x + anchor.width / 2 - left - arrow / 2)) : Math.max(corner, Math.min(height - corner - arrow, anchor.y + anchor.height / 2 - top - arrow / 2));
+    const arrow = tokens24.extensions.tooltip.arrowSize, corner = tokens24.radius.radius6, side = placement === "left" ? "right" : placement === "right" ? "left" : above ? "bottom" : "top", along = side === "top" || side === "bottom" ? Math.max(corner, Math.min(width - corner - arrow, anchor.x + anchor.width / 2 - left - arrow / 2)) : Math.max(corner, Math.min(height - corner - arrow, anchor.y + anchor.height / 2 - top - arrow / 2));
     return /* @__PURE__ */ jsxs14(
       Animated13.View,
       {
@@ -4455,7 +4555,7 @@ function FloatingPanel({
                 borderRadius: corner,
                 overflow: "hidden",
                 backgroundColor: colors.chartTooltipBg,
-                boxShadow: shadowLayers(tokens23.extensions.tooltip.elevation, colors)
+                boxShadow: shadowLayers(tokens24.extensions.tooltip.elevation, colors)
               },
               children
             }
@@ -4517,8 +4617,8 @@ function FloatingPanel({
                 style: {
                   opacity: anchored && sized ? motion.opacity : 0,
                   transform: tooltip ? void 0 : [
-                    { translateX: motion.progress.interpolate({ inputRange: [0, 1], outputRange: [placement === "left" ? tokens23.motionDistance.popup : placement === "right" ? -tokens23.motionDistance.popup : 0, 0] }) },
-                    { translateY: motion.progress.interpolate({ inputRange: [0, 1], outputRange: [placement === "left" || placement === "right" ? 0 : above ? tokens23.motionDistance.popup : -tokens23.motionDistance.popup, 0] }) }
+                    { translateX: motion.progress.interpolate({ inputRange: [0, 1], outputRange: [placement === "left" ? tokens24.motionDistance.popup : placement === "right" ? -tokens24.motionDistance.popup : 0, 0] }) },
+                    { translateY: motion.progress.interpolate({ inputRange: [0, 1], outputRange: [placement === "left" || placement === "right" ? 0 : above ? tokens24.motionDistance.popup : -tokens24.motionDistance.popup, 0] }) }
                   ],
                   position: "absolute",
                   top,
@@ -4527,11 +4627,11 @@ function FloatingPanel({
                   minWidth: contentSizedMenu ? minimumPanelWidth : void 0,
                   maxWidth: tooltip ? tooltipWidth : maximumWidth,
                   maxHeight: available,
-                  borderRadius: popover ? tokens23.extensions.popover.radius : field ? tokens23.radius.radius12 : tokens23.extensions.menu.radius,
-                  borderWidth: popover ? 0 : tokens23.border.defaultWidth,
+                  borderRadius: popover ? tokens24.extensions.popover.radius : field ? tokens24.radius.radius12 : tokens24.extensions.menu.radius,
+                  borderWidth: popover ? 0 : tokens24.border.defaultWidth,
                   borderColor: colors.border,
                   backgroundColor: colors.surface,
-                  boxShadow: (tooltip ? tokens23.extensions.tooltip.elevation : popover ? tokens23.extensions.popover.elevation : tokens23.extensions.menu.elevation).map(({ colorRole, ...layer2 }) => ({ ...layer2, color: colors[colorRole] })),
+                  boxShadow: (tooltip ? tokens24.extensions.tooltip.elevation : popover ? tokens24.extensions.popover.elevation : tokens24.extensions.menu.elevation).map(({ colorRole, ...layer2 }) => ({ ...layer2, color: colors[colorRole] })),
                   overflow: "hidden"
                 },
                 children: [
@@ -4540,10 +4640,10 @@ function FloatingPanel({
                     {
                       onLayout: ({ nativeEvent: { layout } }) => setHeaderHeight(layout.height),
                       style: {
-                        paddingTop: tokens23.extensions.popover.padding,
-                        paddingHorizontal: tokens23.extensions.popover.padding,
-                        paddingBottom: tokens23.extensions.popover.headerPaddingBottom,
-                        borderBottomWidth: tokens23.border.defaultWidth,
+                        paddingTop: tokens24.extensions.popover.padding,
+                        paddingHorizontal: tokens24.extensions.popover.padding,
+                        paddingBottom: tokens24.extensions.popover.headerPaddingBottom,
+                        borderBottomWidth: tokens24.border.defaultWidth,
                         borderBottomColor: colors.divider
                       },
                       children: content(header, typeStyle("cardTitle"))
@@ -4558,7 +4658,7 @@ function FloatingPanel({
                       },
                       keyboardShouldPersistTaps: "handled",
                       style: { maxHeight: available - (header != null ? headerHeight : 0), flexShrink: 1 },
-                      contentContainerStyle: { padding: menu || field ? tokens23.extensions.menu.padding : 0 },
+                      contentContainerStyle: { padding: menu || field ? tokens24.extensions.menu.padding : 0 },
                       onContentSizeChange: (width2, height2) => {
                         if (contentSizedMenu) return;
                         setSized(true);
@@ -4591,7 +4691,7 @@ import {
   Platform as Platform17,
   View as View20
 } from "react-native";
-import { tokens as tokens24 } from "@kjun-ui/tokens";
+import { tokens as tokens25 } from "@kjun-ui/tokens";
 import { Fragment as Fragment6, jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
 function KjunPopover({
   noPadding = false,
@@ -4640,7 +4740,7 @@ function KjunPopover({
         ariaLabel,
         header: header != null ? content(header, { ...typeStyle("cardTitle"), color: colors.text }) : void 0,
         nonModal: !modal,
-        children: /* @__PURE__ */ jsx27(View20, { style: { padding: noPadding ? 0 : tokens24.extensions.popover.padding, gap: noPadding ? 0 : tokens24.extensions.popover.gap }, children: content(
+        children: /* @__PURE__ */ jsx27(View20, { style: { padding: noPadding ? 0 : tokens25.extensions.popover.padding, gap: noPadding ? 0 : tokens25.extensions.popover.gap }, children: content(
           typeof children === "function" ? children(() => change(false)) : children,
           Platform17.OS === "web" ? { wordBreak: "keep-all", overflowWrap: "anywhere" } : void 0
         ) })
@@ -4747,9 +4847,9 @@ function KjunTooltip({
           View20,
           {
             style: {
-              paddingVertical: tokens24.extensions.tooltip.paddingY,
-              paddingHorizontal: tokens24.extensions.tooltip.paddingX,
-              maxWidth: tokens24.extensions.tooltip.maxWidth,
+              paddingVertical: tokens25.extensions.tooltip.paddingY,
+              paddingHorizontal: tokens25.extensions.tooltip.paddingX,
+              maxWidth: tokens25.extensions.tooltip.maxWidth,
               backgroundColor: colors.chartTooltipBg
             },
             children: /* @__PURE__ */ jsx27(
@@ -4852,18 +4952,18 @@ function KjunDropdownItem({
       style: ({ pressed }) => ({
         flexDirection: "row",
         alignItems: "center",
-        gap: tokens25.dimension.value8,
-        paddingVertical: tokens25.extensions.menu.optionPaddingY,
-        paddingHorizontal: tokens25.extensions.menu.optionPaddingX,
-        minHeight: tokens25.extensions.menu.optionHeight,
-        borderRadius: tokens25.extensions.menu.optionRadius,
+        gap: tokens26.dimension.value8,
+        paddingVertical: tokens26.extensions.menu.optionPaddingY,
+        paddingHorizontal: tokens26.extensions.menu.optionPaddingX,
+        minHeight: tokens26.extensions.menu.optionHeight,
+        borderRadius: tokens26.extensions.menu.optionRadius,
         backgroundColor: selected ? colors.selectedBg : !disabled && (pressed || hovered) ? variant === "danger" ? colors.dangerBg : colors.hover : void 0,
-        opacity: disabled ? tokens25.states.opacity.disabled : 1
+        opacity: disabled ? tokens26.states.opacity.disabled : 1
       }),
       children: [
-        icon ? /* @__PURE__ */ jsx28(KjunIcon, { name: icon, size: tokens25.extensions.menu.iconSize, color: iconColor }) : reserveIcon && /* @__PURE__ */ jsx28(View21, { style: { width: tokens25.extensions.menu.iconSize }, accessible: false }),
-        /* @__PURE__ */ jsx28(View21, { style: { flexGrow: 1, flexShrink: 1 }, children: content(children, { color, fontSize: tokens25.extensions.menu.optionFontSize, lineHeight: tokens25.extensions.menu.optionLineHeight }) }),
-        selected !== null && /* @__PURE__ */ jsx28(View21, { style: { opacity: selected ? 1 : 0 }, accessible: false, children: /* @__PURE__ */ jsx28(KjunIcon, { name: "check", size: tokens25.extensions.menu.iconSize, color: colors.brand }) })
+        icon ? /* @__PURE__ */ jsx28(KjunIcon, { name: icon, size: tokens26.extensions.menu.iconSize, color: iconColor }) : reserveIcon && /* @__PURE__ */ jsx28(View21, { style: { width: tokens26.extensions.menu.iconSize }, accessible: false }),
+        /* @__PURE__ */ jsx28(View21, { style: { flexGrow: 1, flexShrink: 1 }, children: content(children, { color, fontSize: tokens26.extensions.menu.optionFontSize, lineHeight: tokens26.extensions.menu.optionLineHeight }) }),
+        selected !== null && /* @__PURE__ */ jsx28(View21, { style: { opacity: selected ? 1 : 0 }, accessible: false, children: /* @__PURE__ */ jsx28(KjunIcon, { name: "check", size: tokens26.extensions.menu.iconSize, color: colors.brand }) })
       ]
     }
   );
@@ -4874,7 +4974,7 @@ function KjunDropdownDivider() {
     View21,
     {
       role: "separator",
-      style: { height: tokens25.extensions.menu.dividerHeight, marginVertical: tokens25.dimension.value4, backgroundColor: colors.border }
+      style: { height: tokens26.extensions.menu.dividerHeight, marginVertical: tokens26.dimension.value4, backgroundColor: colors.border }
     }
   );
 }
@@ -5047,12 +5147,12 @@ function useComboboxModel({
 }
 
 // packages/native/src/combobox.tsx
-import { tokens as tokens27 } from "@kjun-ui/tokens";
+import { tokens as tokens28 } from "@kjun-ui/tokens";
 import { useId as useId5, useRef as useRef19 } from "react";
 import { Platform as Platform18, View as View23 } from "react-native";
 
 // packages/native/src/select-options.tsx
-import { tokens as tokens26 } from "@kjun-ui/tokens";
+import { tokens as tokens27 } from "@kjun-ui/tokens";
 import { View as View22 } from "react-native";
 import { jsx as jsx29, jsxs as jsxs17 } from "react/jsx-runtime";
 function OptionRow({
@@ -5075,20 +5175,20 @@ function OptionRow({
       onPress,
       onLayout,
       style: ({ pressed }) => ({
-        borderRadius: tokens26.radius.radius8,
-        minHeight: tokens26.extensions.menu.optionHeight,
+        borderRadius: tokens27.radius.radius8,
+        minHeight: tokens27.extensions.menu.optionHeight,
         flexDirection: "row",
         alignItems: "center",
         justifyContent: "space-between",
-        gap: tokens26.dimension.value8,
-        paddingVertical: tokens26.extensions.menu.optionPaddingY,
-        paddingHorizontal: tokens26.extensions.menu.optionPaddingX,
+        gap: tokens27.dimension.value8,
+        paddingVertical: tokens27.extensions.menu.optionPaddingY,
+        paddingHorizontal: tokens27.extensions.menu.optionPaddingX,
         backgroundColor: selected ? colors.selectedBg : pressed ? colors.hover : void 0,
-        opacity: disabled ? tokens26.states.opacity.disabled : 1
+        opacity: disabled ? tokens27.states.opacity.disabled : 1
       }),
       children: [
-        /* @__PURE__ */ jsx29(View22, { style: { flex: 1 }, children: content(children || label, { fontSize: tokens26.extensions.menu.optionFontSize, lineHeight: tokens26.extensions.menu.optionLineHeight }) }),
-        selected && /* @__PURE__ */ jsx29(KjunIcon, { name: "check", size: tokens26.extensions.menu.iconSize, color: colors.brand })
+        /* @__PURE__ */ jsx29(View22, { style: { flex: 1 }, children: content(children || label, { fontSize: tokens27.extensions.menu.optionFontSize, lineHeight: tokens27.extensions.menu.optionLineHeight }) }),
+        selected && /* @__PURE__ */ jsx29(KjunIcon, { name: "check", size: tokens27.extensions.menu.iconSize, color: colors.brand })
       ]
     }
   );
@@ -5226,8 +5326,8 @@ function SearchField({
             View23,
             {
               style: {
-                padding: tokens27.dimension.value8,
-                borderBottomWidth: tokens27.border.defaultWidth,
+                padding: tokens28.dimension.value8,
+                borderBottomWidth: tokens28.border.defaultWidth,
                 borderBottomColor: colors.border
               },
               children: /* @__PURE__ */ jsx30(KjunInput, { ...inputProps, nativeID: searchId, autoFocus: true })
@@ -5235,13 +5335,13 @@ function SearchField({
           ),
           loading ? (
             // Centered like the Select loading row on every platform.
-            /* @__PURE__ */ jsx30(View23, { style: { padding: tokens27.dimension.value12, alignItems: "center" }, children: /* @__PURE__ */ jsx30(KjunSpinner, { size: "sm", text: m.searching }) })
+            /* @__PURE__ */ jsx30(View23, { style: { padding: tokens28.dimension.value12, alignItems: "center" }, children: /* @__PURE__ */ jsx30(KjunSpinner, { size: "sm", text: m.searching }) })
           ) : failed ? /* @__PURE__ */ jsx30(
             KText,
             {
               accessibilityRole: "alert",
               style: {
-                padding: tokens27.dimension.value12,
+                padding: tokens28.dimension.value12,
                 textAlign: "center",
                 color: colors.danger
               },
@@ -5264,7 +5364,7 @@ function SearchField({
             KText,
             {
               style: {
-                padding: tokens27.dimension.value12,
+                padding: tokens28.dimension.value12,
                 textAlign: "center",
                 color: colors.textTertiary
               },
@@ -5278,7 +5378,7 @@ function SearchField({
 }
 
 // packages/native/src/date-picker.tsx
-import { tokens as tokens28 } from "@kjun-ui/tokens";
+import { tokens as tokens29 } from "@kjun-ui/tokens";
 import { useRef as useRef20, useState as useState20 } from "react";
 import { Platform as Platform19, View as View24 } from "react-native";
 import { Fragment as Fragment9, jsx as jsx31, jsxs as jsxs19 } from "react/jsx-runtime";
@@ -5302,7 +5402,7 @@ function KjunDatePicker({
   const scope = useKjunMessageScope();
   placeholder != null ? placeholder : placeholder = scope.messages.datePlaceholder;
   const clear = clearable && !!value && !disabled;
-  const { colors } = useKjunStyles(), field = useKjunField(), [open, setOpen] = useState20(false), [month, setMonth] = useState20(() => displayMonth(value)), ref = useRef20(null), spec = tokens28.input[size];
+  const { colors } = useKjunStyles(), field = useKjunField(), [open, setOpen] = useState20(false), [month, setMonth] = useState20(() => displayMonth(value)), ref = useRef20(null), spec = tokens29.input[size];
   const surface = useFieldSurface(size, { disabled, invalid: error || !!(field == null ? void 0 : field.error), open });
   const year = month.getFullYear(), m = month.getMonth(), first = new Date(year, m, 1).getDay(), count = new Date(year, m + 1, 0).getDate();
   const date = (day) => `${year}-${String(m + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
@@ -5310,7 +5410,7 @@ function KjunDatePicker({
     /* @__PURE__ */ jsxs19(View24, { ref, collapsable: false, ...fieldTarget(() => {
       setMonth(displayMonth(value));
       setOpen(true);
-    }, disabled), style: { minHeight: tokens28.native.minimumTouchTarget, justifyContent: "center" }, children: [
+    }, disabled), style: { minHeight: tokens29.native.minimumTouchTarget, justifyContent: "center" }, children: [
       /* @__PURE__ */ jsxs19(
         FieldPressable,
         {
@@ -5336,7 +5436,7 @@ function KjunDatePicker({
           },
           style: {
             ...surface.style,
-            paddingHorizontal: spec.padding - tokens28.border.controlWidth,
+            paddingHorizontal: spec.padding - tokens29.border.controlWidth,
             flexDirection: "row",
             alignItems: "center",
             justifyContent: "space-between"
@@ -5379,9 +5479,9 @@ function KjunDatePicker({
         triggerRef: ref,
         placement: "bottom-start",
         matchTriggerWidth: true,
-        minimumWidth: tokens28.extensions.calendar.minimumWidth,
+        minimumWidth: tokens29.extensions.calendar.minimumWidth,
         ariaLabel: scope.messages.datePlaceholder,
-        children: /* @__PURE__ */ jsxs19(View24, { style: { padding: tokens28.dimension.value8 }, children: [
+        children: /* @__PURE__ */ jsxs19(View24, { style: { padding: tokens29.dimension.value8 }, children: [
           /* @__PURE__ */ jsxs19(
             View24,
             {
@@ -5422,7 +5522,7 @@ function KjunDatePicker({
                 style: {
                   width: "14.2857%",
                   textAlign: "center",
-                  paddingVertical: tokens28.dimension.value8,
+                  paddingVertical: tokens29.dimension.value8,
                   color: colors.textTertiary
                 },
                 children: day
@@ -5449,12 +5549,12 @@ function KjunDatePicker({
                   },
                   style: {
                     width: "14.2857%",
-                    minHeight: tokens28.native.minimumTouchTarget,
+                    minHeight: tokens29.native.minimumTouchTarget,
                     alignItems: "center",
                     justifyContent: "center",
-                    borderRadius: tokens28.radius.radius6,
+                    borderRadius: tokens29.radius.radius6,
                     backgroundColor: v === value ? colors.brand : void 0,
-                    opacity: blocked ? tokens28.states.opacity.disabledStrong : 1
+                    opacity: blocked ? tokens29.states.opacity.disabledStrong : 1
                   },
                   children: /* @__PURE__ */ jsx31(
                     KText,
@@ -5655,17 +5755,17 @@ function KjunSearchInput({
 }
 
 // packages/native/src/select-control.tsx
-import { tokens as tokens30 } from "@kjun-ui/tokens";
+import { tokens as tokens31 } from "@kjun-ui/tokens";
 import { useContext as useContext14, useEffect as useEffect18, useRef as useRef23 } from "react";
 
 // packages/native/src/compound-control.tsx
 import { createContext as createContext18 } from "react";
 import { View as View25 } from "react-native";
-import { tokens as tokens29 } from "@kjun-ui/tokens";
+import { tokens as tokens30 } from "@kjun-ui/tokens";
 import { jsx as jsx33 } from "react/jsx-runtime";
 var CompoundControlContext = createContext18(null);
 function CompoundTarget({ children, square = false }) {
-  const touch = finePointer() ? void 0 : tokens29.native.minimumTouchTarget;
+  const touch = finePointer() ? void 0 : tokens30.native.minimumTouchTarget;
   return /* @__PURE__ */ jsx33(View25, { style: { minHeight: touch, minWidth: square ? touch : void 0, alignItems: "center", justifyContent: "center" }, children });
 }
 
@@ -5738,7 +5838,7 @@ function KjunSelect({
   placeholder != null ? placeholder : placeholder = m.select;
   searchPlaceholder != null ? searchPlaceholder : searchPlaceholder = m.search;
   const { open, query, limit, changeOpen, search, showMore } = useSelectState(controlled, disabled, optionPageSize, onOpenChange);
-  const { colors } = useKjunStyles(), field = useKjunField(), ref = useRef23(null), spec = tokens30.input[size];
+  const { colors } = useKjunStyles(), field = useKjunField(), ref = useRef23(null), spec = tokens31.input[size];
   const trigger = useRef23(null);
   const compound = useContext14(CompoundControlContext);
   useEffect18(() => {
@@ -5770,10 +5870,10 @@ function KjunSelect({
   return /* @__PURE__ */ jsxs20(Fragment10, { children: [
     /* @__PURE__ */ jsxs20(View26, { ref, collapsable: false, ...fieldTarget(() => changeOpen(!open), disabled), style: {
       position: "relative",
-      minHeight: tokens30.native.minimumTouchTarget,
+      minHeight: tokens31.native.minimumTouchTarget,
       justifyContent: "center",
       // Inside a compound field the touch target overflows so the shared surface keeps its size height.
-      ...compound ? { marginVertical: Math.min(0, (spec.height - tokens30.native.minimumTouchTarget) / 2) } : {}
+      ...compound ? { marginVertical: Math.min(0, (spec.height - tokens31.native.minimumTouchTarget) / 2) } : {}
     }, children: [
       /* @__PURE__ */ jsxs20(
         FieldPressable,
@@ -5809,14 +5909,14 @@ function KjunSelect({
             flexDirection: "row",
             alignItems: "center",
             justifyContent: "space-between",
-            gap: tokens30.dimension.value8,
+            gap: tokens31.dimension.value8,
             ...surface.style,
-            paddingHorizontal: spec.padding - tokens30.border.controlWidth,
-            paddingRight: spec.padding - tokens30.border.controlWidth,
-            ...compound ? { paddingHorizontal: tokens30.extensions.timePicker.segmentPadding, paddingRight: tokens30.extensions.timePicker.segmentPadding, paddingLeft: compound.leading ? spec.padding - tokens30.border.controlWidth : tokens30.extensions.timePicker.segmentPadding, gap: tokens30.extensions.timePicker.segmentPadding, backgroundColor: !disabled && (surface.active || surface.hovered) ? colors.hover : "transparent", borderColor: "transparent", outlineWidth: 0 } : {}
+            paddingHorizontal: spec.padding - tokens31.border.controlWidth,
+            paddingRight: spec.padding - tokens31.border.controlWidth,
+            ...compound ? { paddingHorizontal: tokens31.extensions.timePicker.segmentPadding, paddingRight: tokens31.extensions.timePicker.segmentPadding, paddingLeft: compound.leading ? spec.padding - tokens31.border.controlWidth : tokens31.extensions.timePicker.segmentPadding, gap: tokens31.extensions.timePicker.segmentPadding, backgroundColor: !disabled && (surface.active || surface.hovered) ? colors.hover : "transparent", borderColor: "transparent", outlineWidth: 0 } : {}
           },
           children: [
-            /* @__PURE__ */ jsxs20(View26, { style: { ...compound ? { flexGrow: 1, flexShrink: 0 } : { flex: 1, minWidth: 0 }, paddingRight: clearable && label ? tokens30.native.minimumTouchTarget + spec.affixGap : 0 }, children: [
+            /* @__PURE__ */ jsxs20(View26, { style: { ...compound ? { flexGrow: 1, flexShrink: 0 } : { flex: 1, minWidth: 0 }, paddingRight: clearable && label ? tokens31.native.minimumTouchTarget + spec.affixGap : 0 }, children: [
               compound && /* @__PURE__ */ jsx34(KText, { "aria-hidden": true, importantForAccessibility: "no-hide-descendants", style: { ...inputTypeStyle(size), fontVariant: ["tabular-nums"], opacity: 0 }, children: "00" }),
               (renderSelected == null ? void 0 : renderSelected(selectedOption)) || /* @__PURE__ */ jsx34(KText, { numberOfLines: 1, style: {
                 ...inputTypeStyle(size),
@@ -5828,7 +5928,7 @@ function KjunSelect({
               KjunIcon,
               {
                 name: "chevron-down",
-                size: compound ? tokens30.extensions.timePicker.iconSize : spec.iconSize,
+                size: compound ? tokens31.extensions.timePicker.iconSize : spec.iconSize,
                 color: surface.icon
               }
             ) })
@@ -5872,8 +5972,8 @@ function KjunSelect({
             View26,
             {
               style: {
-                padding: tokens30.dimension.value8,
-                borderBottomWidth: tokens30.border.defaultWidth,
+                padding: tokens31.dimension.value8,
+                borderBottomWidth: tokens31.border.defaultWidth,
                 borderBottomColor: colors.border
               },
               children: /* @__PURE__ */ jsx34(
@@ -5893,7 +5993,7 @@ function KjunSelect({
               )
             }
           ),
-          loading ? /* @__PURE__ */ jsx34(View26, { style: { padding: tokens30.dimension.value12 }, children: /* @__PURE__ */ jsx34(KjunSpinner, { size: "sm", text: m.searching }) }) : visible.map(({ option: o, key }, index) => /* @__PURE__ */ jsx34(
+          loading ? /* @__PURE__ */ jsx34(View26, { style: { padding: tokens31.dimension.value12 }, children: /* @__PURE__ */ jsx34(KjunSpinner, { size: "sm", text: m.searching }) }) : visible.map(({ option: o, key }, index) => /* @__PURE__ */ jsx34(
             OptionRow,
             {
               selected: selected(o),
@@ -5915,7 +6015,7 @@ function KjunSelect({
             KText,
             {
               style: {
-                padding: tokens30.dimension.value12,
+                padding: tokens31.dimension.value12,
                 textAlign: "center",
                 color: colors.textTertiary
               },
@@ -5939,10 +6039,10 @@ function KjunSelect({
 }
 
 // packages/native/src/navigation.tsx
-import { tokens as tokens33 } from "@kjun-ui/tokens";
+import { tokens as tokens34 } from "@kjun-ui/tokens";
 
 // packages/native/src/collapse.tsx
-import { tokens as tokens31 } from "@kjun-ui/tokens";
+import { tokens as tokens32 } from "@kjun-ui/tokens";
 import { useLayoutEffect as useLayoutEffect10, useRef as useRef24, useState as useState24 } from "react";
 import { Animated as Animated14, View as View27 } from "react-native";
 import { jsx as jsx35 } from "react/jsx-runtime";
@@ -5969,7 +6069,7 @@ function Collapse({ open, children }) {
       finish();
     } else {
       setSettled(false);
-      Animated14.timing(value, { toValue: target, duration: tokens31.motion.collapse, easing: motionOut, useNativeDriver: false }).start(({ finished }) => {
+      Animated14.timing(value, { toValue: target, duration: tokens32.motion.collapse, easing: motionOut, useNativeDriver: false }).start(({ finished }) => {
         if (finished) finish();
       });
     }
@@ -6043,7 +6143,7 @@ import {
 import { Animated as Animated16, View as View29, useWindowDimensions as useWindowDimensions5, Platform as Platform22 } from "react-native";
 
 // packages/native/src/tabs.tsx
-import { tokens as tokens32 } from "@kjun-ui/tokens";
+import { tokens as tokens33 } from "@kjun-ui/tokens";
 import { Children as Children4, createContext as createContext19, isValidElement as isValidElement7, useContext as useContext15, useCallback as useCallback5, useLayoutEffect as useLayoutEffect11, useRef as useRef26, useId as useId6, useState as useState26 } from "react";
 import { Animated as Animated15, Platform as Platform21, ScrollView as ScrollView5, View as View28 } from "react-native";
 
@@ -6083,14 +6183,14 @@ function KjunTabs({
     if (!onTabMenu || !tabs.some((tab) => tab.name === pressedMenu.current && !tab.disabled)) pressedMenu.current = null;
   }, [tabs, onTabMenu]);
   const panelNames = panes.filter((child) => child.type === KjunTabPane).map((child) => child.props.name);
-  const geometry2 = tokens32.extensions.tabs;
+  const geometry2 = tokens33.extensions.tabs;
   const underline = variant === "underline";
   const [hoveredTab, setHoveredTab] = useState26(null);
   const singleLine = Platform21.OS === "web" ? { whiteSpace: "nowrap" } : {};
   const paddingX = !underline ? geometry2.pillsPaddingX : density === "compact" ? geometry2.compactPaddingX : geometry2.paddingX;
   const height = density === "compact" ? geometry2.compactHeight : geometry2.height;
-  const ringRoom = tokens32.states.focus.width + tokens32.states.focus.offset;
-  const slop = Math.max(0, (tokens32.native.minimumTouchTarget - height) / 2);
+  const ringRoom = tokens33.states.focus.width + tokens33.states.focus.offset;
+  const slop = Math.max(0, (tokens33.native.minimumTouchTarget - height) / 2);
   const roomX = underline ? ringRoom : 0, roomY = Math.max(underline ? ringRoom : 0, slop);
   const selectedTab = tabs.find((tab) => tab.name === value);
   const selection = useButtonGroupMotion(selectedTab ? { ...selectedTab, value: selectedTab.name } : void 0);
@@ -6149,7 +6249,7 @@ function KjunTabs({
                 transform: [{ translateX: selection.x }],
                 borderRadius: underline ? geometry2.indicatorHeight / 2 : geometry2.radius,
                 backgroundColor: variant === "underline" ? colors.brand : colors.active,
-                opacity: (selectedTab == null ? void 0 : selectedTab.disabled) ? tokens32.states.opacity.disabled : 1
+                opacity: (selectedTab == null ? void 0 : selectedTab.disabled) ? tokens33.states.opacity.disabled : 1
               }
             }
           ),
@@ -6209,7 +6309,7 @@ function KjunTabs({
                   borderRadius: geometry2.radius,
                   // Pills answer hover with the hover surface, like ButtonGroup and Web.
                   backgroundColor: !underline && !active && !tab.disabled && hoveredTab === tab.name ? colors.hover : void 0,
-                  opacity: tab.disabled ? tokens32.states.opacity.disabled : 1
+                  opacity: tab.disabled ? tokens33.states.opacity.disabled : 1
                 },
                 children: [
                   !!tab.icon && /* @__PURE__ */ jsx36(
@@ -6304,7 +6404,7 @@ function KjunAccordion({
         View29,
         {
           style: {
-            borderRadius: tokens33.extensions.accordion.radius,
+            borderRadius: tokens34.extensions.accordion.radius,
             overflow: "hidden",
             backgroundColor: tone === "muted" ? colors.secondary : colors.surface
           },
@@ -6322,8 +6422,8 @@ function KjunAccordionItem({
   children
 }) {
   const { colors } = useKjunStyles(), group = useContext16(AccordionContext), id = "kjun-" + useId7(), [own, setOwn] = useState27(defaultOpen), open = group ? group.opened.has(id) : own;
-  const rotation = useMotionValue(open ? 1 : 0, tokens33.motion.collapse, void 0, void 0, true);
-  const geometry2 = tokens33.extensions.accordion;
+  const rotation = useMotionValue(open ? 1 : 0, tokens34.motion.collapse, void 0, void 0, true);
+  const geometry2 = tokens34.extensions.accordion;
   const [hovered, setHovered] = useState27(false);
   const wrapping = Platform22.OS === "web" ? { wordBreak: "keep-all", overflowWrap: "anywhere" } : {};
   useEffect20(() => {
@@ -6336,7 +6436,7 @@ function KjunAccordionItem({
         nativeID: id + "-heading",
         accessibilityRole: "button",
         focusRingInset: true,
-        focusRingRadius: tokens33.extensions.accordion.radius,
+        focusRingRadius: tokens34.extensions.accordion.radius,
         accessibilityLabel: title,
         accessibilityState: { expanded: open, disabled },
         disabled,
@@ -6352,7 +6452,7 @@ function KjunAccordionItem({
           paddingVertical: geometry2.headerPaddingY,
           paddingHorizontal: geometry2.paddingX,
           backgroundColor: !disabled && (pressed || hovered) ? colors.hover : void 0,
-          opacity: disabled ? tokens33.states.opacity.disabled : 1
+          opacity: disabled ? tokens34.states.opacity.disabled : 1
         }),
         children: [
           /* @__PURE__ */ jsx37(View29, { style: { flex: 1, minWidth: 0 }, children: content(header || title, { ...typeStyle("control"), ...wrapping }) }),
@@ -6387,11 +6487,11 @@ function KjunBreadcrumb({
         flexDirection: "row",
         alignItems: "center",
         flexWrap: "wrap",
-        gap: tokens33.dimension.value8
+        gap: tokens34.dimension.value8
       },
       children: items2.map((item, i) => {
-        const label = /* @__PURE__ */ jsxs22(View29, { style: { flexDirection: "row", alignItems: "center", gap: tokens33.dimension.value4 }, children: [
-          !!item.icon && /* @__PURE__ */ jsx37(KjunIcon, { name: item.icon, size: tokens33.extensions.breadcrumb.iconSize, color: colors.textSecondary }),
+        const label = /* @__PURE__ */ jsxs22(View29, { style: { flexDirection: "row", alignItems: "center", gap: tokens34.dimension.value4 }, children: [
+          !!item.icon && /* @__PURE__ */ jsx37(KjunIcon, { name: item.icon, size: tokens34.extensions.breadcrumb.iconSize, color: colors.textSecondary }),
           /* @__PURE__ */ jsx37(
             KText,
             {
@@ -6408,7 +6508,7 @@ function KjunBreadcrumb({
             KjunIcon,
             {
               name: "chevron-right",
-              size: tokens33.extensions.breadcrumb.separatorSize,
+              size: tokens34.extensions.breadcrumb.separatorSize,
               color: colors.textTertiary
             }
           ),
@@ -6418,7 +6518,7 @@ function KjunBreadcrumb({
             {
               accessibilityRole: "link",
               onPress: () => onNavigate == null ? void 0 : onNavigate(item),
-              style: { minHeight: tokens33.native.minimumTouchTarget, justifyContent: "center" },
+              style: { minHeight: tokens34.native.minimumTouchTarget, justifyContent: "center" },
               children: label
             }
           ) : label
@@ -6447,7 +6547,7 @@ function KjunPagination({
   const m = useKjunMessages();
   const { colors } = useKjunStyles(), window2 = useWindowDimensions5(), current = Math.max(1, Math.min(totalPages, (_a = currentPage != null ? currentPage : page) != null ? _a : 1));
   if (totalPages <= 1 && !showSizeSelector && !(showInfo && totalRows > 0)) return null;
-  const compact = window2.width < tokens33.responsive.pagination;
+  const compact = window2.width < tokens34.responsive.pagination;
   const change = (v) => {
     if (v < 1 || v > totalPages || v === current) return;
     onPageChange == null ? void 0 : onPageChange(v);
@@ -6463,12 +6563,12 @@ function KjunPagination({
   ]);
   const pages = [...visible].sort((a, b) => a - b).flatMap((v, i, all) => i && v - all[i - 1] > 1 ? ["...", v] : [v]);
   const pageButtonStyle = {
-    width: Math.max(tokens33.extensions.pagination.itemSize, tokens33.native.minimumTouchTarget),
-    height: Math.max(tokens33.extensions.pagination.itemSize, tokens33.native.minimumTouchTarget),
-    borderRadius: tokens33.extensions.pagination.radius,
+    width: Math.max(tokens34.extensions.pagination.itemSize, tokens34.native.minimumTouchTarget),
+    height: Math.max(tokens34.extensions.pagination.itemSize, tokens34.native.minimumTouchTarget),
+    borderRadius: tokens34.extensions.pagination.radius,
     paddingHorizontal: 0
   };
-  const arrowSize = (_b = Object.keys(tokens33.button.iconSizes).find((size) => tokens33.button.iconSizes[size] === tokens33.extensions.pagination.iconSize)) != null ? _b : "sm";
+  const arrowSize = (_b = Object.keys(tokens34.button.iconSizes).find((size) => tokens34.button.iconSizes[size] === tokens34.extensions.pagination.iconSize)) != null ? _b : "sm";
   const button = (target, label, icon) => /* @__PURE__ */ jsx37(
     KjunButton,
     {
@@ -6489,9 +6589,9 @@ function KjunPagination({
         flexDirection: compact ? "column" : "row",
         alignItems: compact ? "stretch" : "center",
         justifyContent: "space-between",
-        gap: tokens33.extensions.pagination.gap,
-        padding: tokens33.extensions.pagination.padding,
-        borderTopWidth: tokens33.border.defaultWidth,
+        gap: tokens34.extensions.pagination.gap,
+        padding: tokens34.extensions.pagination.padding,
+        borderTopWidth: tokens34.border.defaultWidth,
         borderTopColor: colors.border
       },
       children: [
@@ -6502,11 +6602,11 @@ function KjunPagination({
             style: {
               flexDirection: "row",
               alignItems: "center",
-              gap: tokens33.extensions.pagination.itemGap,
+              gap: tokens34.extensions.pagination.itemGap,
               flexWrap: "wrap"
             },
             children: [
-              showSizeSelector && /* @__PURE__ */ jsx37(View29, { style: { minWidth: tokens33.extensions.pagination.selectorMinimumWidth }, children: /* @__PURE__ */ jsx37(
+              showSizeSelector && /* @__PURE__ */ jsx37(View29, { style: { minWidth: tokens34.extensions.pagination.selectorMinimumWidth }, children: /* @__PURE__ */ jsx37(
                 KjunSelect,
                 {
                   size: "sm",
@@ -6523,10 +6623,10 @@ function KjunPagination({
                   }
                 }
               ) }),
-              totalPages > 1 && /* @__PURE__ */ jsxs22(View29, { style: { flexDirection: "row", alignItems: "center", gap: tokens33.extensions.pagination.itemGap, marginLeft: compact ? "auto" : void 0 }, children: [
+              totalPages > 1 && /* @__PURE__ */ jsxs22(View29, { style: { flexDirection: "row", alignItems: "center", gap: tokens34.extensions.pagination.itemGap, marginLeft: compact ? "auto" : void 0 }, children: [
                 !compact && showFirstLast && button(1, m.firstPage, "chevrons-left"),
                 button(current - 1, m.previousPage, "chevron-left"),
-                compact ? /* @__PURE__ */ jsxs22(KText, { style: { paddingHorizontal: tokens33.extensions.pagination.labelPaddingX, color: colors.text, fontVariant: ["tabular-nums"] }, children: [
+                compact ? /* @__PURE__ */ jsxs22(KText, { style: { paddingHorizontal: tokens34.extensions.pagination.labelPaddingX, color: colors.text, fontVariant: ["tabular-nums"] }, children: [
                   /* @__PURE__ */ jsx37(KText, { style: { fontWeight: typeStyle("control").fontWeight }, children: current }),
                   " / ",
                   totalPages
@@ -6556,7 +6656,7 @@ function KjunPagination({
 }
 
 // packages/native/src/actions.tsx
-import { tokens as tokens34 } from "@kjun-ui/tokens";
+import { tokens as tokens35 } from "@kjun-ui/tokens";
 import { useContext as useContext17, useEffect as useEffect21, useRef as useRef27, useState as useState28 } from "react";
 import { Platform as Platform23, ScrollView as ScrollView7, View as View30 } from "react-native";
 import { jsx as jsx38, jsxs as jsxs23 } from "react/jsx-runtime";
@@ -6577,7 +6677,7 @@ function KjunIconToggle({
 }) {
   const { colors } = useKjunStyles();
   const navigation = useContext17(TopNavigationContext);
-  const box = navigation ? navigation.controlSize : size === "xs" ? tokens34.extensions.iconToggle.compactSize : tokens34.extensions.iconToggle.sizes[size];
+  const box = navigation ? navigation.controlSize : size === "xs" ? tokens35.extensions.iconToggle.compactSize : tokens35.extensions.iconToggle.sizes[size];
   return /* @__PURE__ */ jsx38(KjunTooltip, { content: disabled || loading ? "" : tooltip != null ? tooltip : ariaLabel, placement: tooltipPlacement, delay: tooltipDelay, children: /* @__PURE__ */ jsx38(
     AccessiblePressable,
     {
@@ -6603,24 +6703,24 @@ function KjunIconToggle({
         ...Platform23.OS === "web" ? { pointerEvents: "auto" } : {},
         // The touch target stays 44pt; the visible square follows the icon-toggle scale.
         alignSelf: "flex-start",
-        minWidth: Math.max(tokens34.native.minimumTouchTarget, box),
-        minHeight: Math.max(tokens34.native.minimumTouchTarget, box),
+        minWidth: Math.max(tokens35.native.minimumTouchTarget, box),
+        minHeight: Math.max(tokens35.native.minimumTouchTarget, box),
         alignItems: "center",
         justifyContent: "center",
         ...navigation ? { width: navigation.controlSize, height: navigation.controlSize, flexShrink: 0 } : {},
-        borderRadius: tokens34.extensions.iconToggle.radii[size],
+        borderRadius: tokens35.extensions.iconToggle.radii[size],
         // Loading blocks presses but stays legible; only disabled dims.
-        opacity: disabled ? tokens34.states.opacity.disabled : 1,
+        opacity: disabled ? tokens35.states.opacity.disabled : 1,
         transform: [{ scale: pressed ? 0.94 : 1 }]
       }),
       children: ({ pressed, hovered }) => {
         var _a;
-        return /* @__PURE__ */ jsx38(View30, { style: { width: box, height: box, alignItems: "center", justifyContent: "center", borderRadius: tokens34.extensions.iconToggle.radii[size], backgroundColor: !disabled && !loading && (pressed || hovered) ? colors.hover : "transparent" }, children: loading ? navigation ? /* @__PURE__ */ jsx38(KjunIcon, { name: "loader-2", spin: true, size: navigation.iconSize }) : /* @__PURE__ */ jsx38(KjunSpinner, { size: "sm" }) : /* @__PURE__ */ jsx38(
+        return /* @__PURE__ */ jsx38(View30, { style: { width: box, height: box, alignItems: "center", justifyContent: "center", borderRadius: tokens35.extensions.iconToggle.radii[size], backgroundColor: !disabled && !loading && (pressed || hovered) ? colors.hover : "transparent" }, children: loading ? navigation ? /* @__PURE__ */ jsx38(KjunIcon, { name: "loader-2", spin: true, size: navigation.iconSize }) : /* @__PURE__ */ jsx38(KjunSpinner, { size: "sm" }) : /* @__PURE__ */ jsx38(
           KjunIcon,
           {
             name: active ? activeIcon : inactiveIcon || activeIcon,
             filled: active,
-            size: (_a = navigation == null ? void 0 : navigation.iconSize) != null ? _a : tokens34.button.iconSizes[size],
+            size: (_a = navigation == null ? void 0 : navigation.iconSize) != null ? _a : tokens35.button.iconSizes[size],
             color: active ? activeColor != null ? activeColor : colors.brand : hovered && !disabled && !loading ? colors.textSecondary : inactiveColor != null ? inactiveColor : colors.textTertiary
           }
         ) });
@@ -6681,24 +6781,24 @@ function KjunCopyButton({
       },
       style: ({ pressed }) => ({
         alignSelf: "flex-start",
-        minWidth: tokens34.native.minimumTouchTarget,
-        minHeight: tokens34.native.minimumTouchTarget,
+        minWidth: tokens35.native.minimumTouchTarget,
+        minHeight: tokens35.native.minimumTouchTarget,
         alignItems: "center",
         justifyContent: "center",
         flexDirection: "row",
-        gap: tokens34.dimension.value6,
-        paddingHorizontal: { xs: tokens34.dimension.value2, sm: tokens34.dimension.value8, md: tokens34.dimension.value12 }[size],
-        paddingVertical: { xs: tokens34.dimension.value2, sm: tokens34.dimension.value4, md: tokens34.dimension.value6 }[size],
-        borderRadius: tokens34.radius.radius6,
+        gap: tokens35.dimension.value6,
+        paddingHorizontal: { xs: tokens35.dimension.value2, sm: tokens35.dimension.value8, md: tokens35.dimension.value12 }[size],
+        paddingVertical: { xs: tokens35.dimension.value2, sm: tokens35.dimension.value4, md: tokens35.dimension.value6 }[size],
+        borderRadius: tokens35.radius.radius6,
         backgroundColor: pressed && !inline ? colors.hover : void 0,
-        opacity: disabled ? tokens34.states.opacity.disabled : 1
+        opacity: disabled ? tokens35.states.opacity.disabled : 1
       }),
       children: [
         /* @__PURE__ */ jsx38(
           KjunIcon,
           {
             name: copied ? "check" : "copy",
-            size: tokens34.button.iconSizes[size],
+            size: tokens35.button.iconSizes[size],
             color: copied ? colors.success : colors.textSecondary
           }
         ),
@@ -6773,12 +6873,12 @@ function KjunExternalLink({
       accessibilityRole: "link",
       accessibilityLabel: name ? name + m.newWindow : void 0,
       onPress: () => openUrl(url),
-      style: { alignSelf: "flex-start", minHeight: tokens34.native.minimumTouchTarget, justifyContent: "center" },
+      style: { alignSelf: "flex-start", minHeight: tokens35.native.minimumTouchTarget, justifyContent: "center" },
       children: mode === "text" ? (
         // Like Web, text links show the new-window cue after the text.
-        /* @__PURE__ */ jsxs23(View30, { style: { flexDirection: "row", alignItems: "center", gap: tokens34.dimension.value4 }, children: [
+        /* @__PURE__ */ jsxs23(View30, { style: { flexDirection: "row", alignItems: "center", gap: tokens35.dimension.value4 }, children: [
           body,
-          /* @__PURE__ */ jsx38(KjunIcon, { name: "external-link", size: tokens34.iconSizes.small, color: colors.text })
+          /* @__PURE__ */ jsx38(KjunIcon, { name: "external-link", size: tokens35.iconSizes.small, color: colors.text })
         ] })
       ) : body
     }
@@ -6798,7 +6898,7 @@ function KjunScrollFade({ children }) {
 
 // packages/native/src/data-state.tsx
 import {
-  tokens as tokens35,
+  tokens as tokens36,
   advanceQueryDisplay,
   initialQueryDisplay,
   queryDisplayStatus
@@ -6861,7 +6961,7 @@ function KjunDataState({
   emptyText != null ? emptyText : emptyText = m.noData;
   loadingText != null ? loadingText : loadingText = m.loadingEllipsis;
   retryText != null ? retryText : retryText = m.retry;
-  const state = useQueryDisplay(query), blockingError = query.error && !(state.usesQueryState && state.hasCurrentResult), visibleRefreshError = refreshError || (state.usesQueryState && state.hasCurrentResult ? query.error : null), concealed = state.initialLoading || !!blockingError || empty, padding = tokens35.extensions.state.padding[size], revealed = useLoadingReveal(state.initialLoading, loadingDelay);
+  const state = useQueryDisplay(query), blockingError = query.error && !(state.usesQueryState && state.hasCurrentResult), visibleRefreshError = refreshError || (state.usesQueryState && state.hasCurrentResult ? query.error : null), concealed = state.initialLoading || !!blockingError || empty, padding = tokens36.extensions.state.padding[size], revealed = useLoadingReveal(state.initialLoading, loadingDelay);
   const { colors } = useKjunStyles();
   return /* @__PURE__ */ jsxs24(
     View31,
@@ -6876,13 +6976,13 @@ function KjunDataState({
             style: {
               alignSelf: "flex-end",
               maxWidth: "100%",
-              marginBottom: tokens35.dimension.value12,
+              marginBottom: tokens36.dimension.value12,
               flexDirection: "row",
               alignItems: "center",
-              gap: tokens35.dimension.value6,
-              paddingVertical: tokens35.dimension.value4,
-              paddingHorizontal: tokens35.dimension.value8,
-              borderRadius: tokens35.radius.radius12,
+              gap: tokens36.dimension.value6,
+              paddingVertical: tokens36.dimension.value4,
+              paddingHorizontal: tokens36.dimension.value8,
+              borderRadius: tokens36.radius.radius12,
               backgroundColor: colors.surface
             },
             children: [
@@ -6898,7 +6998,7 @@ function KjunDataState({
             "aria-hidden": revealed ? void 0 : true,
             importantForAccessibility: revealed ? void 0 : "no-hide-descendants",
             style: { paddingVertical: loadingPadding === "none" ? 0 : padding, opacity: revealed ? void 0 : 0 },
-            children: loadingContent || (skeleton ? /* @__PURE__ */ jsx39(View31, { style: { gap: tokens35.dimension.value12 }, children: Array.from({ length: skeletonCount }, (_, i) => /* @__PURE__ */ jsx39(KjunSkeleton, { type: skeletonType }, i)) }) : /* @__PURE__ */ jsxs24(View31, { style: { alignItems: "center", gap: tokens35.dimension.value12 }, children: [
+            children: loadingContent || (skeleton ? /* @__PURE__ */ jsx39(View31, { style: { gap: tokens36.dimension.value12 }, children: Array.from({ length: skeletonCount }, (_, i) => /* @__PURE__ */ jsx39(KjunSkeleton, { type: skeletonType }, i)) }) : /* @__PURE__ */ jsxs24(View31, { style: { alignItems: "center", gap: tokens36.dimension.value12 }, children: [
               /* @__PURE__ */ jsx39(KjunSpinner, { size: "md" }),
               /* @__PURE__ */ jsx39(KText, { style: { ...typeStyle("body"), color: colors.textSecondary, textAlign: "center", maxWidth: "100%" }, children: loadingText })
             ] }))
@@ -6917,12 +7017,12 @@ function KjunDataState({
               right: 0,
               opacity: 0,
               ...Platform24.OS === "web" ? { visibility: "hidden" } : {}
-            } : { opacity: query.loading && !state.usesQueryState ? tokens35.states.opacity.pending : 1 },
+            } : { opacity: query.loading && !state.usesQueryState ? tokens36.states.opacity.pending : 1 },
             children: content(children)
           },
           "content"
         ),
-        visibleRefreshError && !state.initialLoading && /* @__PURE__ */ jsx39(DataStateContentContext.Provider, { value: "message", children: /* @__PURE__ */ jsx39(View31, { style: { marginTop: tokens35.dimension.value12 }, children: /* @__PURE__ */ jsx39(KjunAlert, { type: "warning", size: "sm", actions: onRetry && /* @__PURE__ */ jsx39(KjunButton, { variant: "secondary", onPress: onRetry, children: retryText }), children: m.refreshError(String(visibleRefreshError)) }) }) })
+        visibleRefreshError && !state.initialLoading && /* @__PURE__ */ jsx39(DataStateContentContext.Provider, { value: "message", children: /* @__PURE__ */ jsx39(View31, { style: { marginTop: tokens36.dimension.value12 }, children: /* @__PURE__ */ jsx39(KjunAlert, { type: "warning", size: "sm", actions: onRetry && /* @__PURE__ */ jsx39(KjunButton, { variant: "secondary", onPress: onRetry, children: retryText }), children: m.refreshError(String(visibleRefreshError)) }) }) })
       ]
     }
   );
@@ -6930,7 +7030,7 @@ function KjunDataState({
 function BoundaryDescription() {
   const m = useKjunMessages();
   const { colors } = useKjunStyles();
-  return /* @__PURE__ */ jsx39(KText, { style: { ...typeStyle({ ...tokens35.typography.caption, fontSizePx: tokens35.extensions.state.descriptionSize }), color: colors.textSecondary, textAlign: "center" }, children: m.retryHint });
+  return /* @__PURE__ */ jsx39(KText, { style: { ...typeStyle({ ...tokens36.typography.caption, fontSizePx: tokens36.extensions.state.descriptionSize }), color: colors.textSecondary, textAlign: "center" }, children: m.retryHint });
 }
 var KjunErrorBoundary = class extends Component {
   constructor() {
@@ -6950,13 +7050,13 @@ var KjunErrorBoundary = class extends Component {
       {
         style: {
           alignItems: "center",
-          paddingVertical: tokens35.dimension.value64,
-          paddingHorizontal: tokens35.dimension.value24,
-          gap: tokens35.dimension.value16
+          paddingVertical: tokens36.dimension.value64,
+          paddingHorizontal: tokens36.dimension.value24,
+          gap: tokens36.dimension.value16
         },
         children: [
-          /* @__PURE__ */ jsxs24(View31, { style: { gap: tokens35.dimension.value8, alignItems: "center" }, children: [
-            /* @__PURE__ */ jsx39(KText, { style: { ...typeStyle({ ...tokens35.typography.sectionTitle, fontSizePx: tokens35.extensions.state.titleSize }), textAlign: "center" }, children: this.props.fallbackMessage || this.context.messages.somethingWentWrong }),
+          /* @__PURE__ */ jsxs24(View31, { style: { gap: tokens36.dimension.value8, alignItems: "center" }, children: [
+            /* @__PURE__ */ jsx39(KText, { style: { ...typeStyle({ ...tokens36.typography.sectionTitle, fontSizePx: tokens36.extensions.state.titleSize }), textAlign: "center" }, children: this.props.fallbackMessage || this.context.messages.somethingWentWrong }),
             /* @__PURE__ */ jsx39(BoundaryDescription, {})
           ] }),
           /* @__PURE__ */ jsx39(
@@ -6979,7 +7079,7 @@ var KjunErrorBoundary = class extends Component {
 KjunErrorBoundary.contextType = KjunMessageContext;
 
 // packages/native/src/skeletons.tsx
-import { tokens as tokens39 } from "@kjun-ui/tokens";
+import { tokens as tokens40 } from "@kjun-ui/tokens";
 import { useEffect as useEffect23, useRef as useRef28, useState as useState32 } from "react";
 import { Animated as Animated17, Platform as Platform25, View as View33, useWindowDimensions as useWindowDimensions6 } from "react-native";
 import Svg5, { Path as Path4 } from "react-native-svg";
@@ -7003,12 +7103,12 @@ function chartSkeletonKind(kind) {
 }
 
 // packages/native/src/market-skeleton.tsx
-import { tokens as tokens38 } from "@kjun-ui/tokens";
+import { tokens as tokens39 } from "@kjun-ui/tokens";
 import { ScrollView as ScrollView8, View as View32 } from "react-native";
 
 // shared/package-runtime/market-layout.ts
-import { tokens as tokens36 } from "@kjun-ui/tokens";
-var marketGeometry = tokens36.extensions.marketTable;
+import { tokens as tokens37 } from "@kjun-ui/tokens";
+var marketGeometry = tokens37.extensions.marketTable;
 var isMarketIdentity = (key) => ["stock_name", "name", "symbol"].includes(key || "");
 var normalizeMarketColumns = (columns) => columns.map((column) => typeof column === "string" ? { key: column, label: column } : column);
 var defaultWidth = (column) => isMarketIdentity(column.key) ? marketGeometry.identityWidth : marketGeometry.columnWidth;
@@ -7026,33 +7126,33 @@ function nativeMarketLayout(columns, showActions, containerWidth) {
 }
 
 // packages/native/src/market-layout.ts
-import { tokens as tokens37 } from "@kjun-ui/tokens";
+import { tokens as tokens38 } from "@kjun-ui/tokens";
 import { useState as useState31 } from "react";
 function useMarketLayout(columns, showActions) {
   const [containerWidth, setContainerWidth] = useState31(0);
   const onLayout = (event) => setContainerWidth(event.nativeEvent.layout.width);
   return { ...nativeMarketLayout(columns, showActions, containerWidth), onLayout };
 }
-var marketHeaderStyle = { minHeight: marketGeometry.headerHeight, flexDirection: "row", borderBottomWidth: tokens37.border.defaultWidth };
-var marketRowStyle = { minHeight: marketGeometry.rowHeight, flexDirection: "row", borderBottomWidth: tokens37.border.defaultWidth };
+var marketHeaderStyle = { minHeight: marketGeometry.headerHeight, flexDirection: "row", borderBottomWidth: tokens38.border.defaultWidth };
+var marketRowStyle = { minHeight: marketGeometry.rowHeight, flexDirection: "row", borderBottomWidth: tokens38.border.defaultWidth };
 
 // packages/native/src/market-skeleton.tsx
 import { jsx as jsx40, jsxs as jsxs25 } from "react/jsx-runtime";
 function KjunMarketTableSkeleton({ columns = [], rows = 8, showActions = false }) {
   const { colors } = useKjunStyles();
   const cols = normalizeMarketColumns(columns), layout = useMarketLayout(cols, showActions);
-  const actions = { width: marketGeometry.actionsWidth, paddingVertical: tokens38.dimension.value12, paddingHorizontal: tokens38.dimension.value4, justifyContent: "center", alignItems: "center" };
+  const actions = { width: marketGeometry.actionsWidth, paddingVertical: tokens39.dimension.value12, paddingHorizontal: tokens39.dimension.value4, justifyContent: "center", alignItems: "center" };
   return /* @__PURE__ */ jsx40(ScrollView8, { horizontal: true, onLayout: layout.onLayout, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", children: /* @__PURE__ */ jsxs25(View32, { style: { width: layout.width }, children: [
     /* @__PURE__ */ jsxs25(View32, { style: { ...marketHeaderStyle, borderBottomColor: colors.border }, children: [
-      showActions && /* @__PURE__ */ jsx40(View32, { style: actions, children: /* @__PURE__ */ jsx40(KjunSkeleton, { type: "block", width: tokens38.extensions.marketTable.actionSkeletonWidth, height: tokens38.extensions.marketTable.headerSkeletonHeight }) }),
-      cols.map((col, i) => /* @__PURE__ */ jsx40(View32, { style: { width: layout.widths[i], padding: tokens38.dimension.value12, justifyContent: "center" }, children: /* @__PURE__ */ jsx40(KText, { style: { ...typeStyle("meta"), color: colors.textTertiary, textAlign: col.align }, children: col.label }) }, col.key || i))
+      showActions && /* @__PURE__ */ jsx40(View32, { style: actions, children: /* @__PURE__ */ jsx40(KjunSkeleton, { type: "block", width: tokens39.extensions.marketTable.actionSkeletonWidth, height: tokens39.extensions.marketTable.headerSkeletonHeight }) }),
+      cols.map((col, i) => /* @__PURE__ */ jsx40(View32, { style: { width: layout.widths[i], padding: tokens39.dimension.value12, justifyContent: "center" }, children: /* @__PURE__ */ jsx40(KText, { style: { ...typeStyle("meta"), color: colors.textTertiary, textAlign: col.align }, children: col.label }) }, col.key || i))
     ] }),
     Array.from({ length: Math.max(0, rows) }, (_, row) => /* @__PURE__ */ jsxs25(View32, { style: { ...marketRowStyle, borderBottomColor: colors.border }, children: [
-      showActions && /* @__PURE__ */ jsx40(View32, { style: actions, children: /* @__PURE__ */ jsx40(KjunSkeleton, { type: "block", width: tokens38.extensions.marketTable.actionSkeletonWidth, height: tokens38.extensions.financial.priceSkeletonHeight }) }),
-      cols.map((col, i) => /* @__PURE__ */ jsx40(View32, { style: { width: layout.widths[i], paddingVertical: tokens38.dimension.value14, paddingHorizontal: tokens38.dimension.value12, justifyContent: "center", alignItems: isMarketIdentity(col.key) ? void 0 : col.align === "right" ? "flex-end" : col.align === "center" ? "center" : "flex-start" }, children: isMarketIdentity(col.key) ? /* @__PURE__ */ jsxs25(View32, { style: { gap: tokens38.dimension.value2 }, children: [
-        /* @__PURE__ */ jsx40(View32, { style: { height: tokens38.typography.body.lineHeightPx, justifyContent: "center" }, children: /* @__PURE__ */ jsx40(KjunSkeleton, { type: "block", width: "80%", height: tokens38.extensions.skeleton.lineHeights.md }) }),
-        /* @__PURE__ */ jsx40(View32, { style: { height: tokens38.typography.caption.lineHeightPx, justifyContent: "center" }, children: /* @__PURE__ */ jsx40(KjunSkeleton, { type: "block", width: "60%", height: tokens38.extensions.skeleton.lineHeights.sm }) })
-      ] }) : /* @__PURE__ */ jsx40(KjunSkeleton, { type: "block", width: tokens38.extensions.financial.priceSkeletonWidth, height: tokens38.extensions.financial.priceSkeletonHeight }) }, col.key || i))
+      showActions && /* @__PURE__ */ jsx40(View32, { style: actions, children: /* @__PURE__ */ jsx40(KjunSkeleton, { type: "block", width: tokens39.extensions.marketTable.actionSkeletonWidth, height: tokens39.extensions.financial.priceSkeletonHeight }) }),
+      cols.map((col, i) => /* @__PURE__ */ jsx40(View32, { style: { width: layout.widths[i], paddingVertical: tokens39.dimension.value14, paddingHorizontal: tokens39.dimension.value12, justifyContent: "center", alignItems: isMarketIdentity(col.key) ? void 0 : col.align === "right" ? "flex-end" : col.align === "center" ? "center" : "flex-start" }, children: isMarketIdentity(col.key) ? /* @__PURE__ */ jsxs25(View32, { style: { gap: tokens39.dimension.value2 }, children: [
+        /* @__PURE__ */ jsx40(View32, { style: { height: tokens39.typography.body.lineHeightPx, justifyContent: "center" }, children: /* @__PURE__ */ jsx40(KjunSkeleton, { type: "block", width: "80%", height: tokens39.extensions.skeleton.lineHeights.md }) }),
+        /* @__PURE__ */ jsx40(View32, { style: { height: tokens39.typography.caption.lineHeightPx, justifyContent: "center" }, children: /* @__PURE__ */ jsx40(KjunSkeleton, { type: "block", width: "60%", height: tokens39.extensions.skeleton.lineHeights.sm }) })
+      ] }) : /* @__PURE__ */ jsx40(KjunSkeleton, { type: "block", width: tokens39.extensions.financial.priceSkeletonWidth, height: tokens39.extensions.financial.priceSkeletonHeight }) }, col.key || i))
     ] }, row))
   ] }) });
 }
@@ -7063,11 +7163,11 @@ function KjunListSkeleton({
   rows = 8,
   variant = "market",
   avatar = true,
-  avatarSize = tokens39.extensions.skeleton.listAvatarSize,
+  avatarSize = tokens40.extensions.skeleton.listAvatarSize,
   quote = true
 }) {
   const { colors } = useKjunStyles();
-  const market = variant === "market", narrow = useWindowDimensions6().width < tokens39.responsive.market;
+  const market = variant === "market", narrow = useWindowDimensions6().width < tokens40.responsive.market;
   const slots = market ? [typeStyle(narrow ? "input" : "label").lineHeight, typeStyle(narrow ? "body" : "caption").lineHeight] : null;
   const slot = (index, child) => slots ? /* @__PURE__ */ jsx41(View33, { style: { height: slots[index], justifyContent: "center" }, children: child }) : child;
   return /* @__PURE__ */ jsx41(
@@ -7081,29 +7181,29 @@ function KjunListSkeleton({
           style: {
             flexDirection: "row",
             alignItems: "center",
-            gap: tokens39.extensions.skeleton.gap,
-            minHeight: market ? narrow ? tokens39.extensions.marketList.minimumHeight : void 0 : tokens39.extensions.skeleton.listHeights[variant],
-            paddingVertical: market ? narrow ? tokens39.dimension.value14 : tokens39.dimension.value16 : tokens39.extensions.skeleton.list[variant].paddingY,
-            paddingHorizontal: market ? narrow ? tokens39.dimension.value20 : tokens39.dimension.value16 : tokens39.extensions.skeleton.list[variant].paddingX,
-            borderBottomWidth: tokens39.border.defaultWidth,
+            gap: tokens40.extensions.skeleton.gap,
+            minHeight: market ? narrow ? tokens40.extensions.marketList.minimumHeight : void 0 : tokens40.extensions.skeleton.listHeights[variant],
+            paddingVertical: market ? narrow ? tokens40.dimension.value14 : tokens40.dimension.value16 : tokens40.extensions.skeleton.list[variant].paddingY,
+            paddingHorizontal: market ? narrow ? tokens40.dimension.value20 : tokens40.dimension.value16 : tokens40.extensions.skeleton.list[variant].paddingX,
+            borderBottomWidth: tokens40.border.defaultWidth,
             borderBottomColor: colors.border
           },
           children: [
             avatar && /* @__PURE__ */ jsx41(KjunSkeleton, { type: "avatar", width: avatarSize, height: avatarSize }),
-            /* @__PURE__ */ jsxs26(View33, { style: { flex: 1, minWidth: 0, gap: market ? tokens39.dimension.value2 : tokens39.extensions.skeleton.detailGap }, children: [
+            /* @__PURE__ */ jsxs26(View33, { style: { flex: 1, minWidth: 0, gap: market ? tokens40.dimension.value2 : tokens40.extensions.skeleton.detailGap }, children: [
               slot(0, /* @__PURE__ */ jsx41(
                 KjunSkeleton,
                 {
                   type: "block",
-                  height: tokens39.extensions.skeleton.lineHeights.md,
+                  height: tokens40.extensions.skeleton.lineHeights.md,
                   width: i % 2 ? "80%" : "65%"
                 }
               )),
-              slot(1, /* @__PURE__ */ jsx41(KjunSkeleton, { type: "block", height: tokens39.extensions.skeleton.lineHeights.sm, width: "50%" }))
+              slot(1, /* @__PURE__ */ jsx41(KjunSkeleton, { type: "block", height: tokens40.extensions.skeleton.lineHeights.sm, width: "50%" }))
             ] }),
-            quote && /* @__PURE__ */ jsxs26(View33, { style: { alignItems: "flex-end", gap: market ? tokens39.dimension.value2 : tokens39.extensions.skeleton.detailGap }, children: [
-              slot(0, /* @__PURE__ */ jsx41(KjunSkeleton, { type: "block", height: tokens39.extensions.skeleton.quoteHeight, width: tokens39.extensions.skeleton.quoteWidth })),
-              slot(1, /* @__PURE__ */ jsx41(KjunSkeleton, { type: "block", height: tokens39.extensions.skeleton.lineHeights.sm, width: tokens39.extensions.skeleton.detailWidth }))
+            quote && /* @__PURE__ */ jsxs26(View33, { style: { alignItems: "flex-end", gap: market ? tokens40.dimension.value2 : tokens40.extensions.skeleton.detailGap }, children: [
+              slot(0, /* @__PURE__ */ jsx41(KjunSkeleton, { type: "block", height: tokens40.extensions.skeleton.quoteHeight, width: tokens40.extensions.skeleton.quoteWidth })),
+              slot(1, /* @__PURE__ */ jsx41(KjunSkeleton, { type: "block", height: tokens40.extensions.skeleton.lineHeights.sm, width: tokens40.extensions.skeleton.detailWidth }))
             ] })
           ]
         },
@@ -7120,7 +7220,7 @@ function KjunFormSkeleton({
 }) {
   const { colors } = useKjunStyles();
   const window2 = useWindowDimensions6();
-  const twoColumns = columns === 2 && window2.width >= tokens39.responsive.formColumns;
+  const twoColumns = columns === 2 && window2.width >= tokens40.responsive.formColumns;
   return /* @__PURE__ */ jsx41(
     View33,
     {
@@ -7129,13 +7229,13 @@ function KjunFormSkeleton({
       style: {
         flexDirection: twoColumns ? "row" : "column",
         flexWrap: twoColumns ? "wrap" : "nowrap",
-        gap: tokens39.extensions.skeleton.formGap
+        gap: tokens40.extensions.skeleton.formGap
       },
       children: fields.map((field, i) => /* @__PURE__ */ jsxs26(
         View33,
         {
           style: {
-            gap: tokens39.extensions.skeleton.fieldGap,
+            gap: tokens40.extensions.skeleton.fieldGap,
             minWidth: 0,
             flexBasis: twoColumns ? "45%" : void 0,
             flexGrow: 1
@@ -7143,13 +7243,13 @@ function KjunFormSkeleton({
           children: [
             field ? /* @__PURE__ */ jsx41(KText, { style: { color: colors.text, ...typeStyle("label") }, children: typeof field === "string" ? field : field.label }) : (
               // The bar sits in a label-line slot so the field starts where the real input will.
-              /* @__PURE__ */ jsx41(View33, { style: { height: typeStyle("label").lineHeight, justifyContent: "center" }, children: /* @__PURE__ */ jsx41(KjunSkeleton, { type: "block", height: tokens39.extensions.skeleton.formLabelHeight, width: tokens39.extensions.skeleton.formLabelWidth }) })
+              /* @__PURE__ */ jsx41(View33, { style: { height: typeStyle("label").lineHeight, justifyContent: "center" }, children: /* @__PURE__ */ jsx41(KjunSkeleton, { type: "block", height: tokens40.extensions.skeleton.formLabelHeight, width: tokens40.extensions.skeleton.formLabelWidth }) })
             ),
-            /* @__PURE__ */ jsx41(View33, { style: { borderRadius: tokens39.input[size].radius, overflow: "hidden" }, children: /* @__PURE__ */ jsx41(
+            /* @__PURE__ */ jsx41(View33, { style: { borderRadius: tokens40.input[size].radius, overflow: "hidden" }, children: /* @__PURE__ */ jsx41(
               KjunSkeleton,
               {
                 type: "block",
-                height: typeof field === "object" && field.height != null ? field.height : multiline ? tokens39.input[size].lineHeight * 3 + tokens39.input[size].textareaPaddingY * 2 + 2 * tokens39.border.controlWidth : tokens39.input[size].height
+                height: typeof field === "object" && field.height != null ? field.height : multiline ? tokens40.input[size].lineHeight * 3 + tokens40.input[size].textareaPaddingY * 2 + 2 * tokens40.border.controlWidth : tokens40.input[size].height
               }
             ) })
           ]
@@ -7162,7 +7262,7 @@ function KjunFormSkeleton({
 var chartPart = (name) => Platform25.OS === "web" ? { dataSet: { kjunChartPart: name } } : {};
 function KjunChartSkeleton({
   kind: requestedKind = "frame",
-  height = tokens39.extensions.chartSkeleton.height,
+  height = tokens40.extensions.chartSkeleton.height,
   loadingText,
   skeleton = true,
   loadingDelay = 0,
@@ -7171,13 +7271,13 @@ function KjunChartSkeleton({
 }) {
   const m = useKjunMessages();
   loadingText != null ? loadingText : loadingText = m.chartLoading;
-  const kind = chartSkeletonKind(requestedKind), { colors } = useKjunStyles(), reduced = useReducedMotion(), opacity = useRef28(new Animated17.Value(1)).current, revealed = useLoadingReveal(true, loadingDelay), [measured, setMeasured] = useState32(0), thickness = tokens39.extensions.chartSkeleton.donutThickness, boxHeight = typeof height === "number" ? height : measured, hole = boxHeight > 0 ? chartDonutHole(boxHeight, thickness) : void 0, rowCount = chartSkeletonCount(rows), columnCount = chartSkeletonCount(columns), status = revealed && loadingText ? "status" : void 0, hidden = { "aria-hidden": true, importantForAccessibility: "no-hide-descendants" };
+  const kind = chartSkeletonKind(requestedKind), { colors } = useKjunStyles(), reduced = useReducedMotion(), opacity = useRef28(new Animated17.Value(1)).current, revealed = useLoadingReveal(true, loadingDelay), [measured, setMeasured] = useState32(0), thickness = tokens40.extensions.chartSkeleton.donutThickness, boxHeight = typeof height === "number" ? height : measured, hole = boxHeight > 0 ? chartDonutHole(boxHeight, thickness) : void 0, rowCount = chartSkeletonCount(rows), columnCount = chartSkeletonCount(columns), status = revealed && loadingText ? "status" : void 0, hidden = { "aria-hidden": true, importantForAccessibility: "no-hide-descendants" };
   useEffect23(() => {
     if (reduced || !skeleton) return;
     const loop = Animated17.loop(
       Animated17.sequence([
-        Animated17.timing(opacity, { toValue: 0.55, duration: tokens39.motion.shimmer / 2, useNativeDriver: true }),
-        Animated17.timing(opacity, { toValue: 1, duration: tokens39.motion.shimmer / 2, useNativeDriver: true })
+        Animated17.timing(opacity, { toValue: 0.55, duration: tokens40.motion.shimmer / 2, useNativeDriver: true }),
+        Animated17.timing(opacity, { toValue: 1, duration: tokens40.motion.shimmer / 2, useNativeDriver: true })
       ])
     );
     loop.start();
@@ -7194,7 +7294,7 @@ function KjunChartSkeleton({
       "aria-hidden": revealed ? void 0 : true,
       importantForAccessibility: revealed ? void 0 : "no-hide-descendants",
       ...Platform25.OS === "web" ? { dataSet: { kjunChartKind: kind, skeleton: skeleton ? void 0 : "false" } } : {},
-      children: !skeleton ? /* @__PURE__ */ jsxs26(View33, { ...chartPart("loading"), role: status, style: { alignItems: "center", gap: tokens39.dimension.value12 }, children: [
+      children: !skeleton ? /* @__PURE__ */ jsxs26(View33, { ...chartPart("loading"), role: status, style: { alignItems: "center", gap: tokens40.dimension.value12 }, children: [
         /* @__PURE__ */ jsx41(View33, { ...hidden, children: /* @__PURE__ */ jsx41(KjunSpinner, { size: "md" }) }),
         !!loadingText && /* @__PURE__ */ jsx41(KText, { style: { ...typeStyle("body"), color: colors.textSecondary, textAlign: "center", maxWidth: "100%" }, children: loadingText })
       ] }) : /* @__PURE__ */ jsxs26(Fragment12, { children: [
@@ -7203,21 +7303,21 @@ function KjunChartSkeleton({
           {
             ...chartPart("donut"),
             ...hidden,
-            style: { height: `${chartDonutRatio * 100}%`, aspectRatio: 1, borderWidth: thickness, borderColor: colors.skeleton, borderRadius: tokens39.radius.radius9999 }
+            style: { height: `${chartDonutRatio * 100}%`, aspectRatio: 1, borderWidth: thickness, borderColor: colors.skeleton, borderRadius: tokens40.radius.radius9999 }
           }
-        ) : kind === "matrix" ? /* @__PURE__ */ jsx41(View33, { ...chartPart("matrix"), ...hidden, style: { alignSelf: "stretch", flex: 1, gap: tokens39.dimension.value4 }, children: Array.from({ length: rowCount }, (_, row) => /* @__PURE__ */ jsx41(View33, { style: { flex: 1, flexDirection: "row", gap: tokens39.dimension.value4 }, children: Array.from({ length: columnCount }, (_2, column) => /* @__PURE__ */ jsx41(
+        ) : kind === "matrix" ? /* @__PURE__ */ jsx41(View33, { ...chartPart("matrix"), ...hidden, style: { alignSelf: "stretch", flex: 1, gap: tokens40.dimension.value4 }, children: Array.from({ length: rowCount }, (_, row) => /* @__PURE__ */ jsx41(View33, { style: { flex: 1, flexDirection: "row", gap: tokens40.dimension.value4 }, children: Array.from({ length: columnCount }, (_2, column) => /* @__PURE__ */ jsx41(
           View33,
           {
             ...chartPart("cell"),
             style: {
               flex: 1,
-              borderRadius: tokens39.extensions.skeleton.lineRadius,
+              borderRadius: tokens40.extensions.skeleton.lineRadius,
               backgroundColor: colors.skeleton,
-              opacity: chartMatrixMuted(row, column) ? tokens39.states.opacity.pending : 1
+              opacity: chartMatrixMuted(row, column) ? tokens40.states.opacity.pending : 1
             }
           },
           column
-        )) }, row)) }) : /* @__PURE__ */ jsx41(View33, { ...chartPart("plot"), ...hidden, style: { alignSelf: "stretch", flex: 1 }, children: /* @__PURE__ */ jsx41(Svg5, { viewBox: chartFrameViewBox, preserveAspectRatio: "none", width: "100%", height: "100%", children: /* @__PURE__ */ jsx41(Path4, { d: chartFramePath, fill: "none", stroke: colors.chartGrid, strokeWidth: tokens39.border.defaultWidth, vectorEffect: "non-scaling-stroke" }) }) }),
+        )) }, row)) }) : /* @__PURE__ */ jsx41(View33, { ...chartPart("plot"), ...hidden, style: { alignSelf: "stretch", flex: 1 }, children: /* @__PURE__ */ jsx41(Svg5, { viewBox: chartFrameViewBox, preserveAspectRatio: "none", width: "100%", height: "100%", children: /* @__PURE__ */ jsx41(Path4, { d: chartFramePath, fill: "none", stroke: colors.chartGrid, strokeWidth: tokens40.border.defaultWidth, vectorEffect: "non-scaling-stroke" }) }) }),
         !!loadingText && /* @__PURE__ */ jsx41(
           View33,
           {
@@ -7231,10 +7331,10 @@ function KjunChartSkeleton({
               {
                 style: {
                   ...typeStyle("body"),
-                  paddingHorizontal: tokens39.dimension.value12,
-                  paddingVertical: tokens39.dimension.value4,
-                  borderRadius: tokens39.radius.radius6,
-                  borderWidth: kind === "donut" ? 0 : tokens39.border.defaultWidth,
+                  paddingHorizontal: tokens40.dimension.value12,
+                  paddingVertical: tokens40.dimension.value4,
+                  borderRadius: tokens40.radius.radius6,
+                  borderWidth: kind === "donut" ? 0 : tokens40.border.defaultWidth,
                   borderColor: colors.chartGrid,
                   backgroundColor: colors.surface,
                   color: colors.textSecondary,
@@ -7252,7 +7352,7 @@ function KjunChartSkeleton({
 }
 
 // packages/native/src/financial-display.tsx
-import { deviationLevel, tokens as tokens42 } from "@kjun-ui/tokens";
+import { deviationLevel, tokens as tokens43 } from "@kjun-ui/tokens";
 import { useId as useId8 } from "react";
 import {
   View as View35
@@ -7267,13 +7367,13 @@ import Svg6, {
 } from "react-native-svg";
 
 // packages/native/src/number-display.tsx
-import { tokens as tokens41 } from "@kjun-ui/tokens";
+import { tokens as tokens42 } from "@kjun-ui/tokens";
 
 // shared/package-runtime/use-number-motion.ts
 import { useLayoutEffect as useLayoutEffect12, useRef as useRef29, useState as useState33 } from "react";
 
 // shared/package-runtime/number-motion.ts
-import { tokens as tokens40 } from "@kjun-ui/tokens";
+import { tokens as tokens41 } from "@kjun-ui/tokens";
 function createNumberMotion(apply) {
   let frame = 0, revision = 0, current = 0;
   let previous;
@@ -7304,7 +7404,7 @@ function createNumberMotion(apply) {
       if (from === target) return;
       const tick = (now) => {
         if (version !== revision) return;
-        const progress = Math.min(1, Math.max(0, (now - started) / tokens40.motion.number));
+        const progress = Math.min(1, Math.max(0, (now - started) / tokens41.motion.number));
         show(progress === 1 ? target : from + (target - from) * (1 - Math.pow(1 - progress, 3)));
         if (progress < 1) frame = requestAnimationFrame(tick);
       };
@@ -7393,7 +7493,7 @@ function KjunFreshness({
     KjunTooltip,
     {
       content: (source === "close" ? scope.messages.noRealtimeQuote : scope.messages.realtimeDelayed) + (fetchedAt ? " \xB7 " + ((formatter == null ? void 0 : formatter(fetchedAt)) || formatRelativeTime(fetchedAt, void 0, scope)) : ""),
-      children: /* @__PURE__ */ jsx42(AccessiblePressable, { accessibilityLabel: label, focusRingRadius: tokens41.extensions.badge.radius, children: /* @__PURE__ */ jsx42(KjunBadge, { variant: "warning", size: "xs", children: label }) })
+      children: /* @__PURE__ */ jsx42(AccessiblePressable, { accessibilityLabel: label, focusRingRadius: tokens42.extensions.badge.radius, children: /* @__PURE__ */ jsx42(KjunBadge, { variant: "warning", size: "xs", children: label }) })
     }
   ) : null;
 }
@@ -7407,11 +7507,11 @@ function KjunPriceCell({
   fromPrevious = true
 }) {
   const { colors } = useKjunStyles(), quoteType = useContext18(MarketQuoteTypeContext);
-  return value == null ? /* @__PURE__ */ jsx42(KjunSkeleton, { type: "block", height: tokens41.extensions.financial.priceSkeletonHeight, width: tokens41.extensions.financial.priceSkeletonWidth }) : /* @__PURE__ */ jsxs27(View34, { style: { flexDirection: "row", alignItems: "center", gap: tokens41.extensions.financial.affixGap }, children: [
+  return value == null ? /* @__PURE__ */ jsx42(KjunSkeleton, { type: "block", height: tokens42.extensions.financial.priceSkeletonHeight, width: tokens42.extensions.financial.priceSkeletonWidth }) : /* @__PURE__ */ jsxs27(View34, { style: { flexDirection: "row", alignItems: "center", gap: tokens42.extensions.financial.affixGap }, children: [
     /* @__PURE__ */ jsx42(
       View34,
       {
-        style: quoteType ? void 0 : { paddingVertical: tokens41.extensions.financial.pillPaddingY, paddingHorizontal: tokens41.extensions.financial.pillPaddingX, borderRadius: tokens41.radius.radius9999 },
+        style: quoteType ? void 0 : { paddingVertical: tokens42.extensions.financial.pillPaddingY, paddingHorizontal: tokens42.extensions.financial.pillPaddingX, borderRadius: tokens42.radius.radius9999 },
         children: /* @__PURE__ */ jsx42(
           KjunAnimatedNumber,
           {
@@ -7450,14 +7550,14 @@ function KjunSignedValue({
         flexDirection: "row",
         alignItems: "center",
         alignSelf: "flex-start",
-        gap: tokens41.extensions.financial.affixGap,
-        paddingVertical: tone === "pill" ? tokens41.extensions.financial.pillPaddingY : 0,
-        paddingHorizontal: tone === "pill" ? tokens41.extensions.financial.pillPaddingX : 0,
-        borderRadius: tokens41.extensions.financial.pillRadius,
+        gap: tokens42.extensions.financial.affixGap,
+        paddingVertical: tone === "pill" ? tokens42.extensions.financial.pillPaddingY : 0,
+        paddingHorizontal: tone === "pill" ? tokens42.extensions.financial.pillPaddingX : 0,
+        borderRadius: tokens42.extensions.financial.pillRadius,
         backgroundColor: tone === "pill" && !stale && !loading && n !== null ? domainColor(domainColors, role + "Bg") : void 0
       },
       children: [
-        loading ? /* @__PURE__ */ jsx42(KjunSkeleton, { type: "block", width: tokens41.extensions.financial.signedSkeletonWidth, height: tokens41.extensions.financial.signedSkeletonHeight }) : /* @__PURE__ */ jsx42(
+        loading ? /* @__PURE__ */ jsx42(KjunSkeleton, { type: "block", width: tokens42.extensions.financial.signedSkeletonWidth, height: tokens42.extensions.financial.signedSkeletonHeight }) : /* @__PURE__ */ jsx42(
           KText,
           {
             style: {
@@ -7479,7 +7579,7 @@ function KjunSignedValue({
 
 // packages/native/src/financial-display.tsx
 import { Fragment as Fragment13, jsx as jsx43, jsxs as jsxs28 } from "react/jsx-runtime";
-var deviationFill = { neutral: 1, low: tokens42.states.opacity.deviationLow, medium: tokens42.states.opacity.deviationMedium, strong: tokens42.states.opacity.deviationStrong };
+var deviationFill = { neutral: 1, low: tokens43.states.opacity.deviationLow, medium: tokens43.states.opacity.deviationMedium, strong: tokens43.states.opacity.deviationStrong };
 function KjunDeviation({
   value,
   variant = "pill",
@@ -7500,7 +7600,7 @@ function KjunDeviation({
           flexDirection: "row",
           alignItems: "center",
           justifyContent: "flex-end",
-          gap: tokens42.extensions.financial.badgeGap
+          gap: tokens43.extensions.financial.badgeGap
         },
         children: [
           /* @__PURE__ */ jsx43(
@@ -7519,22 +7619,22 @@ function KjunDeviation({
               }, children: label })
             }
           ),
-          !signal && /* @__PURE__ */ jsx43(View35, { style: { width: tokens42.extensions.financial.warningIconSize, flexShrink: 0 } }),
+          !signal && /* @__PURE__ */ jsx43(View35, { style: { width: tokens43.extensions.financial.warningIconSize, flexShrink: 0 } }),
           signal && /* @__PURE__ */ jsx43(Fragment13, { children: /* @__PURE__ */ jsx43(View35, { style: { alignSelf: "center" }, children: /* @__PURE__ */ jsx43(KjunTooltip, { content: m.deviationWarning(signalThreshold), children: /* @__PURE__ */ jsx43(
             AccessiblePressable,
             {
               accessibilityRole: "image",
               accessibilityLabel: m.arbitrage,
               focusRingInset: true,
-              focusRingRadius: tokens42.radius.radius4,
+              focusRingRadius: tokens43.radius.radius4,
               style: {
-                width: tokens42.extensions.financial.warningTargetSize,
-                height: tokens42.extensions.financial.warningTargetSize,
-                margin: (tokens42.extensions.financial.warningIconSize - tokens42.extensions.financial.warningTargetSize) / 2,
+                width: tokens43.extensions.financial.warningTargetSize,
+                height: tokens43.extensions.financial.warningTargetSize,
+                margin: (tokens43.extensions.financial.warningIconSize - tokens43.extensions.financial.warningTargetSize) / 2,
                 alignItems: "center",
                 justifyContent: "center"
               },
-              children: /* @__PURE__ */ jsx43(KjunIcon, { name: "alert-triangle", size: tokens42.extensions.financial.warningIconSize, color: colors.warning })
+              children: /* @__PURE__ */ jsx43(KjunIcon, { name: "alert-triangle", size: tokens43.extensions.financial.warningIconSize, color: colors.warning })
             }
           ) }) }) })
         ]
@@ -7546,9 +7646,9 @@ function KjunDeviation({
       style: {
         alignSelf: "flex-start",
         position: "relative",
-        borderRadius: tokens42.extensions.financial.cellRadius,
-        paddingVertical: variant === "pill" ? tokens42.extensions.financial.pillPaddingY : 0,
-        paddingHorizontal: variant === "pill" ? tokens42.extensions.financial.pillPaddingX : 0
+        borderRadius: tokens43.extensions.financial.cellRadius,
+        paddingVertical: variant === "pill" ? tokens43.extensions.financial.pillPaddingY : 0,
+        paddingHorizontal: variant === "pill" ? tokens43.extensions.financial.pillPaddingX : 0
       },
       children: [
         variant === "pill" && /* @__PURE__ */ jsx43(
@@ -7558,7 +7658,7 @@ function KjunDeviation({
             style: {
               position: "absolute",
               inset: 0,
-              borderRadius: tokens42.extensions.financial.cellRadius,
+              borderRadius: tokens43.extensions.financial.cellRadius,
               backgroundColor: neutral ? colors.secondary : color,
               opacity: deviationFill[level]
             }
@@ -7599,9 +7699,9 @@ function KjunHeatmapCell({
       style: {
         position: "relative",
         alignSelf: "flex-start",
-        paddingVertical: tokens42.extensions.financial.pillPaddingY,
-        paddingHorizontal: tokens42.extensions.financial.pillPaddingX,
-        borderRadius: tokens42.extensions.financial.cellRadius
+        paddingVertical: tokens43.extensions.financial.pillPaddingY,
+        paddingHorizontal: tokens43.extensions.financial.pillPaddingX,
+        borderRadius: tokens43.extensions.financial.cellRadius
       },
       children: [
         /* @__PURE__ */ jsx43(
@@ -7611,10 +7711,10 @@ function KjunHeatmapCell({
             style: {
               position: "absolute",
               inset: 0,
-              borderRadius: tokens42.extensions.financial.cellRadius,
+              borderRadius: tokens43.extensions.financial.cellRadius,
               // A zero cell keeps its shape on the neutral fill; any other value starts from a visible minimum.
               backgroundColor: magnitude ? background : colors.secondary,
-              opacity: magnitude ? tokens42.states.opacity.heatMinimum + (tokens42.states.opacity.heatMaximum - tokens42.states.opacity.heatMinimum) * magnitude : 1
+              opacity: magnitude ? tokens43.states.opacity.heatMinimum + (tokens43.states.opacity.heatMaximum - tokens43.states.opacity.heatMinimum) * magnitude : 1
             }
           }
         ),
@@ -7632,7 +7732,7 @@ function KjunProgressCell({
   showLabel = true,
   color = "auto",
   customColor,
-  height = tokens42.extensions.financial.progressHeight
+  height = tokens43.extensions.financial.progressHeight
 }) {
   const { colors, numericFontFamily, fontFamily } = useKjunStyles(), percent = max > 0 && Number.isFinite(value) ? Math.min(100, Math.max(0, value / max * 100)) : 0, role = color === "auto" ? percent < 30 ? "danger" : percent < 70 ? "warning" : "success" : color;
   return /* @__PURE__ */ jsxs28(
@@ -7641,8 +7741,8 @@ function KjunProgressCell({
       style: {
         flexDirection: "row",
         alignItems: "center",
-        gap: tokens42.extensions.financial.progressGap,
-        minWidth: tokens42.extensions.financial.progressMinimumWidth
+        gap: tokens43.extensions.financial.progressGap,
+        minWidth: tokens43.extensions.financial.progressMinimumWidth
       },
       children: [
         /* @__PURE__ */ jsx43(
@@ -7652,7 +7752,7 @@ function KjunProgressCell({
               height,
               flex: 1,
               backgroundColor: colors.tertiary,
-              borderRadius: tokens42.extensions.financial.progressRadius,
+              borderRadius: tokens43.extensions.financial.progressRadius,
               overflow: "hidden"
             },
             children: /* @__PURE__ */ jsx43(
@@ -7661,7 +7761,7 @@ function KjunProgressCell({
                 style: {
                   width: `${percent}%`,
                   height: "100%",
-                  borderRadius: tokens42.extensions.financial.progressRadius,
+                  borderRadius: tokens43.extensions.financial.progressRadius,
                   backgroundColor: color === "custom" ? customColor : colors[role]
                 }
               }
@@ -7674,7 +7774,7 @@ function KjunProgressCell({
             style: {
               ...typeStyle("caption"),
               color: colors.textSecondary,
-              minWidth: tokens42.extensions.financial.progressLabelWidth,
+              minWidth: tokens43.extensions.financial.progressLabelWidth,
               textAlign: "right",
               fontFamily: numericFontFamily || fontFamily,
               fontVariant: ["tabular-nums"]
@@ -7695,7 +7795,7 @@ function KjunCollectionMark({
   size = "md"
 }) {
   const { colors, domainColors } = useKjunStyles();
-  const box = tokens42.extensions.financial.markSizes[size], glyph = kind === "interest" ? tokens42.extensions.financial.heartMarkSizes[size] : box;
+  const box = tokens43.extensions.financial.markSizes[size], glyph = kind === "interest" ? tokens43.extensions.financial.heartMarkSizes[size] : box;
   return /* @__PURE__ */ jsx43(View35, { style: { width: box, height: box, alignItems: "center", justifyContent: "center", overflow: "visible" }, children: /* @__PURE__ */ jsx43(
     KjunIcon,
     {
@@ -7727,8 +7827,8 @@ function KjunExecutionStatusBadge({
 }
 function KjunSparkline({
   data = [],
-  width = tokens42.extensions.financial.sparklineWidth,
-  height = tokens42.extensions.financial.sparklineHeight,
+  width = tokens43.extensions.financial.sparklineWidth,
+  height = tokens43.extensions.financial.sparklineHeight,
   color,
   semantic = "price",
   fill = true,
@@ -7919,7 +8019,7 @@ function tableCellValue(props, column, row, index) {
 }
 
 // packages/native/src/table-toolbar.tsx
-import { tokens as tokens43 } from "@kjun-ui/tokens";
+import { tokens as tokens44 } from "@kjun-ui/tokens";
 import { View as View36 } from "react-native";
 import { Fragment as Fragment14, jsx as jsx44, jsxs as jsxs29 } from "react/jsx-runtime";
 function TableToolbar({
@@ -7939,12 +8039,12 @@ function TableToolbar({
   const toolbarStyle = {
     flexDirection: "row",
     alignItems: "center",
-    gap: tokens43.dimension.value8,
+    gap: tokens44.dimension.value8,
     flexWrap: "wrap",
-    paddingVertical: tokens43.dimension.value8,
-    paddingHorizontal: tokens43.dimension.value12,
+    paddingVertical: tokens44.dimension.value8,
+    paddingHorizontal: tokens44.dimension.value12,
     backgroundColor: colors.secondary,
-    borderBottomWidth: tokens43.border.defaultWidth,
+    borderBottomWidth: tokens44.border.defaultWidth,
     borderBottomColor: colors.border
   };
   return /* @__PURE__ */ jsxs29(Fragment14, { children: [
@@ -7972,7 +8072,7 @@ function TableToolbar({
     ),
     (searchable || toolbar) && // Like Web: the search toolbar sits on the surface so the filled search field stands out from it.
     /* @__PURE__ */ jsxs29(View36, { style: { ...toolbarStyle, backgroundColor: colors.surface }, children: [
-      searchable && /* @__PURE__ */ jsx44(View36, { style: { width: tokens43.table.searchWidth, maxWidth: "100%" }, children: /* @__PURE__ */ jsx44(
+      searchable && /* @__PURE__ */ jsx44(View36, { style: { width: tokens44.table.searchWidth, maxWidth: "100%" }, children: /* @__PURE__ */ jsx44(
         KjunInput,
         {
           size: "sm",
@@ -7990,7 +8090,7 @@ function TableToolbar({
 }
 
 // packages/native/src/table-grid.tsx
-import { tokens as tokens44 } from "@kjun-ui/tokens";
+import { tokens as tokens45 } from "@kjun-ui/tokens";
 import { Fragment as Fragment15, useId as useId9, useState as useState36 } from "react";
 import Svg7, { Defs as Defs3, LinearGradient as LinearGradient3, Rect as Rect3, Stop as Stop3 } from "react-native-svg";
 import { ScrollView as ScrollView9, View as View37 } from "react-native";
@@ -7998,7 +8098,7 @@ import { jsx as jsx45, jsxs as jsxs30 } from "react/jsx-runtime";
 function TableGrid({ initialLoading, skeletonRows, skeletonHidden, state, onRowClick, selectable, checkbox, cell, expandable, expand, renderExpand, emptyContent, emptyText, visible, maxHeight, stickyHeader, sortable, compact, striped, hoverable }) {
   const m = useKjunMessages();
   const { colors } = useKjunStyles();
-  const geometry2 = tokens44.table;
+  const geometry2 = tokens45.table;
   const [scroll, setScroll] = useState36({ viewport: 0, x: 0 }), fadeId = "kjun-table-fade-" + useId9().replace(/[^a-z0-9]/gi, "");
   const cellPadding = geometry2.cellPadding[compact ? "compact" : "regular"];
   const width = (col) => typeof col.width === "number" ? col.width : typeof col.width === "string" && /^\d+(px)?$/.test(col.width) ? parseFloat(col.width) : geometry2.columnWidth;
@@ -8031,7 +8131,7 @@ function TableGrid({ initialLoading, skeletonRows, skeletonHidden, state, onRowC
                   style: {
                     flexDirection: "row",
                     backgroundColor: colors.tableHeaderBg,
-                    borderBottomWidth: tokens44.border.defaultWidth,
+                    borderBottomWidth: tokens45.border.defaultWidth,
                     borderBottomColor: colors.border
                   },
                   children: [
@@ -8055,13 +8155,13 @@ function TableGrid({ initialLoading, skeletonRows, skeletonHidden, state, onRowC
                         onPress: () => state.sortColumn(col),
                         style: {
                           width: width(col),
-                          minHeight: tokens44.native.minimumTouchTarget,
+                          minHeight: tokens45.native.minimumTouchTarget,
                           paddingVertical: geometry2.headerPadding.y,
                           paddingHorizontal: geometry2.headerPadding.x,
                           flexDirection: "row",
                           alignItems: "center",
                           justifyContent: col.align === "right" ? "flex-end" : col.align === "center" ? "center" : "flex-start",
-                          gap: tokens44.dimension.value4
+                          gap: tokens45.dimension.value4
                         },
                         children: [
                           /* @__PURE__ */ jsx45(
@@ -8078,7 +8178,7 @@ function TableGrid({ initialLoading, skeletonRows, skeletonHidden, state, onRowC
                             KjunIcon,
                             {
                               name: state.sort.order === "asc" ? "sort-ascending" : "sort-descending",
-                              size: tokens44.table.sortIconSize,
+                              size: tokens45.table.sortIconSize,
                               color: colors.text
                             }
                           )
@@ -8105,7 +8205,7 @@ function TableGrid({ initialLoading, skeletonRows, skeletonHidden, state, onRowC
                       {
                         type: "block",
                         height: geometry2.skeletonHeight,
-                        width: col.key === "actions" ? tokens44.table.actionColumnWidth : "75%"
+                        width: col.key === "actions" ? tokens45.table.actionColumnWidth : "75%"
                       }
                     )
                   },
@@ -8121,7 +8221,7 @@ function TableGrid({ initialLoading, skeletonRows, skeletonHidden, state, onRowC
                     onPress: () => onRowClick == null ? void 0 : onRowClick(row, i),
                     style: ({ pressed }) => ({
                       flexDirection: "row",
-                      borderBottomWidth: tokens44.border.defaultWidth,
+                      borderBottomWidth: tokens45.border.defaultWidth,
                       borderBottomColor: colors.border,
                       backgroundColor: pressed && hoverable ? colors.tableRowHover : striped && i % 2 ? colors.secondary : void 0
                     }),
@@ -8181,7 +8281,7 @@ function TableGrid({ initialLoading, skeletonRows, skeletonHidden, state, onRowC
         )
       }
     ),
-    fade && /* @__PURE__ */ jsx45(View37, { pointerEvents: "none", style: { position: "absolute", top: 0, right: 0, bottom: 0, width: tokens44.extensions.scrollFade.width }, children: /* @__PURE__ */ jsxs30(Svg7, { width: "100%", height: "100%", children: [
+    fade && /* @__PURE__ */ jsx45(View37, { pointerEvents: "none", style: { position: "absolute", top: 0, right: 0, bottom: 0, width: tokens45.extensions.scrollFade.width }, children: /* @__PURE__ */ jsxs30(Svg7, { width: "100%", height: "100%", children: [
       /* @__PURE__ */ jsx45(Defs3, { children: /* @__PURE__ */ jsxs30(LinearGradient3, { id: fadeId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
         /* @__PURE__ */ jsx45(Stop3, { offset: "0", stopColor: colors.surface, stopOpacity: 0 }),
         /* @__PURE__ */ jsx45(Stop3, { offset: "1", stopColor: colors.surface, stopOpacity: 1 })
@@ -8192,14 +8292,14 @@ function TableGrid({ initialLoading, skeletonRows, skeletonHidden, state, onRowC
 }
 
 // packages/native/src/table-view.tsx
-import { tokens as tokens46 } from "@kjun-ui/tokens";
+import { tokens as tokens47 } from "@kjun-ui/tokens";
 import {
   View as View39,
   useWindowDimensions as useWindowDimensions7
 } from "react-native";
 
 // packages/native/src/table-cards.tsx
-import { tokens as tokens45 } from "@kjun-ui/tokens";
+import { tokens as tokens46 } from "@kjun-ui/tokens";
 import {
   View as View38
 } from "react-native";
@@ -8225,7 +8325,7 @@ function TableCards({
   return /* @__PURE__ */ jsxs31(
     View38,
     {
-      style: { gap: tokens45.extensions.tableCard.gap, padding: tokens45.extensions.tableCard.listPadding, opacity: skeletonHidden ? 0 : void 0 },
+      style: { gap: tokens46.extensions.tableCard.gap, padding: tokens46.extensions.tableCard.listPadding, opacity: skeletonHidden ? 0 : void 0 },
       "aria-hidden": skeletonHidden || void 0,
       children: [
         initialLoading ? Array.from({ length: skeletonRows }, (_, i) => /* @__PURE__ */ jsx46(KjunSkeleton, { type: "card" }, i)) : state.rows.map((row, i) => /* @__PURE__ */ jsxs31(
@@ -8234,10 +8334,10 @@ function TableCards({
             accessible: false,
             onPress: () => onRowClick == null ? void 0 : onRowClick(row, i),
             style: ({ pressed }) => ({
-              padding: tokens45.extensions.tableCard.padding,
-              borderWidth: tokens45.border.defaultWidth,
+              padding: tokens46.extensions.tableCard.padding,
+              borderWidth: tokens46.border.defaultWidth,
               borderColor: colors.border,
-              borderRadius: tokens45.extensions.tableCard.radius,
+              borderRadius: tokens46.extensions.tableCard.radius,
               backgroundColor: pressed ? colors.hover : colors.background
             }),
             children: [
@@ -8247,8 +8347,8 @@ function TableCards({
                   style: {
                     flexDirection: "row",
                     alignItems: "center",
-                    gap: tokens45.extensions.tableCard.gap,
-                    marginBottom: tokens45.dimension.value8
+                    gap: tokens46.extensions.tableCard.gap,
+                    marginBottom: tokens46.dimension.value8
                   },
                   children: [
                     /* @__PURE__ */ jsxs31(
@@ -8258,7 +8358,7 @@ function TableCards({
                           flexDirection: "row",
                           flex: 1,
                           alignItems: "center",
-                          gap: tokens45.extensions.tableCard.gap,
+                          gap: tokens46.extensions.tableCard.gap,
                           minWidth: 0
                         },
                         children: [
@@ -8267,8 +8367,8 @@ function TableCards({
                         ]
                       }
                     ),
-                    badges.length ? /* @__PURE__ */ jsx46(View38, { style: { flexDirection: "row", gap: tokens45.extensions.tableCard.fieldGap }, children: badges.map((col) => /* @__PURE__ */ jsx46(View38, { children: cell(col, row, i) }, col.key)) }) : subtitle ? cell(subtitle, row, i) : null,
-                    inline.length > 0 && /* @__PURE__ */ jsx46(View38, { style: { flexDirection: "row", gap: tokens45.extensions.tableCard.fieldGap }, children: inline.map((col) => /* @__PURE__ */ jsx46(View38, { children: cell(col, row, i) }, col.key)) })
+                    badges.length ? /* @__PURE__ */ jsx46(View38, { style: { flexDirection: "row", gap: tokens46.extensions.tableCard.fieldGap }, children: badges.map((col) => /* @__PURE__ */ jsx46(View38, { children: cell(col, row, i) }, col.key)) }) : subtitle ? cell(subtitle, row, i) : null,
+                    inline.length > 0 && /* @__PURE__ */ jsx46(View38, { style: { flexDirection: "row", gap: tokens46.extensions.tableCard.fieldGap }, children: inline.map((col) => /* @__PURE__ */ jsx46(View38, { children: cell(col, row, i) }, col.key)) })
                   ]
                 }
               ),
@@ -8278,10 +8378,10 @@ function TableCards({
                   View38,
                   {
                     style: {
-                      borderTopWidth: index ? tokens45.border.defaultWidth : 0,
+                      borderTopWidth: index ? tokens46.border.defaultWidth : 0,
                       borderTopColor: colors.border,
-                      paddingTop: index ? tokens45.dimension.value12 : 0,
-                      marginTop: index ? tokens45.dimension.value12 : 0
+                      paddingTop: index ? tokens46.dimension.value12 : 0,
+                      marginTop: index ? tokens46.dimension.value12 : 0
                     },
                     children: [
                       !!section.label && /* @__PURE__ */ jsx46(
@@ -8290,7 +8390,7 @@ function TableCards({
                           style: {
                             ...typeStyle("controlSmall"),
                             color: colors.textTertiary,
-                            marginBottom: tokens45.dimension.value6
+                            marginBottom: tokens46.dimension.value6
                           },
                           children: section.label
                         }
@@ -8301,7 +8401,7 @@ function TableCards({
                           style: {
                             flexDirection: "row",
                             flexWrap: "wrap",
-                            gap: section.layout === "metrics" ? tokens45.extensions.tableCard.gap : tokens45.extensions.tableCard.metricGap
+                            gap: section.layout === "metrics" ? tokens46.extensions.tableCard.gap : tokens46.extensions.tableCard.metricGap
                           },
                           children: cols.map((col) => /* @__PURE__ */ jsxs31(
                             View38,
@@ -8310,7 +8410,7 @@ function TableCards({
                                 flexBasis: col.fullWidthInCard || section.layout === "stack" ? "100%" : section.layout === "metrics" ? "30%" : "47%",
                                 flexGrow: 1,
                                 minWidth: 0,
-                                gap: tokens45.extensions.tableCard.valueGap
+                                gap: tokens46.extensions.tableCard.valueGap
                               },
                               children: [
                                 /* @__PURE__ */ jsx46(
@@ -8341,10 +8441,10 @@ function TableCards({
                 View38,
                 {
                   style: {
-                    borderTopWidth: tokens45.border.defaultWidth,
+                    borderTopWidth: tokens46.border.defaultWidth,
                     borderTopColor: colors.border,
-                    paddingTop: tokens45.dimension.value8,
-                    marginTop: tokens45.dimension.value4
+                    paddingTop: tokens46.dimension.value8,
+                    marginTop: tokens46.dimension.value4
                   },
                   children: content(renderExpand == null ? void 0 : renderExpand(row, i))
                 }
@@ -8353,10 +8453,10 @@ function TableCards({
                 View38,
                 {
                   style: {
-                    borderTopWidth: tokens45.border.defaultWidth,
+                    borderTopWidth: tokens46.border.defaultWidth,
                     borderTopColor: colors.border,
-                    paddingTop: tokens45.dimension.value8,
-                    marginTop: tokens45.dimension.value8,
+                    paddingTop: tokens46.dimension.value8,
+                    marginTop: tokens46.dimension.value8,
                     alignItems: "flex-end"
                   },
                   children: /* @__PURE__ */ jsx46(View38, { style: { alignSelf: "flex-end" }, children: cell(actions, row, i) })
@@ -8366,7 +8466,7 @@ function TableCards({
           },
           state.key(row, i)
         )),
-        !initialLoading && !state.rows.length && /* @__PURE__ */ jsx46(View38, { style: { padding: tokens45.extensions.tableCard.emptyPadding, alignItems: "center" }, children: content(emptyContent || emptyText, {
+        !initialLoading && !state.rows.length && /* @__PURE__ */ jsx46(View38, { style: { padding: tokens46.extensions.tableCard.emptyPadding, alignItems: "center" }, children: content(emptyContent || emptyText, {
           color: colors.textTertiary
         }) })
       ]
@@ -8403,7 +8503,7 @@ function KjunTable(props) {
     onRowClick,
     onRetry
   } = props;
-  const { colors, domainColors } = useKjunStyles(), state = useTableModel2(props), query = useQueryDisplay(props), revealed = useLoadingReveal(query.initialLoading, skeleton ? loadingDelay : 0), mobile = useWindowDimensions7().width < tokens46.table.mobileBreakpoint;
+  const { colors, domainColors } = useKjunStyles(), state = useTableModel2(props), query = useQueryDisplay(props), revealed = useLoadingReveal(query.initialLoading, skeleton ? loadingDelay : 0), mobile = useWindowDimensions7().width < tokens47.table.mobileBreakpoint;
   const layout = tablePresentation(props, mobile);
   const { card, visible } = layout;
   const cell = (col, row, index, role) => {
@@ -8415,9 +8515,9 @@ function KjunTable(props) {
         {
           style: {
             alignSelf: "flex-start",
-            paddingVertical: tokens46.dimension.value2,
-            paddingHorizontal: tokens46.dimension.value8,
-            borderRadius: tokens46.radius.radius4,
+            paddingVertical: tokens47.dimension.value2,
+            paddingHorizontal: tokens47.dimension.value8,
+            borderRadius: tokens47.radius.radius4,
             backgroundColor: role2 ? domainColor(domainColors, role2 + "Bg") : void 0
           },
           children: content(body, {
@@ -8520,7 +8620,7 @@ function KpiNumberLine({ prefix, suffix, prefixGap, suffixGap, style, unitStyle,
 }
 
 // packages/native/src/kpi-hero.tsx
-import { tokens as tokens47 } from "@kjun-ui/tokens";
+import { tokens as tokens48 } from "@kjun-ui/tokens";
 import {
   View as View41,
   useWindowDimensions as useWindowDimensions8
@@ -8553,8 +8653,8 @@ function KjunKpiHero(props) {
     deltaFormatter,
     renderSecondary
   } = props;
-  const { colors, domainColors, numericFontFamily, fontFamily } = useKjunStyles(), windowWidth = useWindowDimensions8().width, mobile = windowWidth <= tokens47.responsive.kpiHero, small = size === "sm", numberRole = small ? "displaySm" : mobile ? "displayMd" : "displayLg", font = typeStyle(numberRole).fontSize, unitStyle = typeStyle(small ? "numberSm" : mobile ? "numberMd" : "numberLg");
-  const geometry2 = tokens47.extensions.kpiHero;
+  const { colors, domainColors, numericFontFamily, fontFamily } = useKjunStyles(), windowWidth = useWindowDimensions8().width, mobile = windowWidth <= tokens48.responsive.kpiHero, small = size === "sm", numberRole = small ? "displaySm" : mobile ? "displayMd" : "displayLg", font = typeStyle(numberRole).fontSize, unitStyle = typeStyle(small ? "numberSm" : mobile ? "numberMd" : "numberLg");
+  const geometry2 = tokens48.extensions.kpiHero;
   const spec = small ? geometry2.sm : mobile ? geometry2.mobile : geometry2.md;
   const numeric2 = {
     fontFamily: numericFontFamily || fontFamily,
@@ -8566,7 +8666,7 @@ function KjunKpiHero(props) {
   );
   const delta = (v, kind, style) => {
     if (deltaFormatter) return /* @__PURE__ */ jsx49(KText, { style, children: deltaFormatter(v, kind) });
-    const sign = v > 0 ? "+" : v < 0 ? "\u2212" : "", gap = tokens47.extensions.financial.affixGap, number = new Intl.NumberFormat(void 0, {
+    const sign = v > 0 ? "+" : v < 0 ? "\u2212" : "", gap = tokens48.extensions.financial.affixGap, number = new Intl.NumberFormat(void 0, {
       minimumFractionDigits: kind === "absolute" ? decimals : 1,
       maximumFractionDigits: kind === "absolute" ? decimals : 1
     }).format(Math.abs(v));
@@ -8669,11 +8769,11 @@ function KjunKpiHero(props) {
               gap: small && mobile ? geometry2.smallMobileGap : spec.secondaryGap,
               marginTop: spec.secondaryMargin,
               paddingTop: spec.secondaryPadding,
-              borderTopWidth: tokens47.border.defaultWidth,
+              borderTopWidth: tokens48.border.defaultWidth,
               borderTopColor: colors.border
             },
             children: secondary.map((item, i) => {
-              const columns = mobile && !small && windowWidth <= tokens47.responsive.kpiHeroSecondary && secondary.length >= 3 ? 2 : 0;
+              const columns = mobile && !small && windowWidth <= tokens48.responsive.kpiHeroSecondary && secondary.length >= 3 ? 2 : 0;
               const first = columns ? i % columns === 0 : i === 0;
               const last = columns ? i % columns === columns - 1 || i === secondary.length - 1 : i === secondary.length - 1;
               return /* @__PURE__ */ jsxs34(
@@ -8684,7 +8784,7 @@ function KjunKpiHero(props) {
                     minWidth: 0,
                     paddingLeft: first ? 0 : geometry2.itemPadding,
                     paddingRight: last ? 0 : geometry2.itemPadding,
-                    borderLeftWidth: first ? 0 : tokens47.border.defaultWidth,
+                    borderLeftWidth: first ? 0 : tokens48.border.defaultWidth,
                     borderLeftColor: colors.border
                   } : { minWidth: 0, maxWidth: "100%", flexShrink: 1 },
                   children: [
@@ -8749,7 +8849,7 @@ function KjunKpiHero(props) {
 }
 
 // packages/native/src/kpi-row.tsx
-import { tokens as tokens48 } from "@kjun-ui/tokens";
+import { tokens as tokens49 } from "@kjun-ui/tokens";
 import { useState as useState37 } from "react";
 import {
   View as View42,
@@ -8765,8 +8865,8 @@ function KjunKpiRow({
   onItemClick,
   renderValue
 }) {
-  const { colors, domainColors, numericFontFamily, fontFamily } = useKjunStyles(), mobile = useWindowDimensions9().width <= tokens48.responsive.kpiRow, small = size === "sm", summary = mobileSummary && mobile && !small;
-  const geometry2 = tokens48.extensions.kpiRow;
+  const { colors, domainColors, numericFontFamily, fontFamily } = useKjunStyles(), mobile = useWindowDimensions9().width <= tokens49.responsive.kpiRow, small = size === "sm", summary = mobileSummary && mobile && !small;
+  const geometry2 = tokens49.extensions.kpiRow;
   const spec = small ? geometry2.sm : mobile ? geometry2.mobile : geometry2.md;
   const [width, setWidth] = useState37(0);
   const paddingX = summary ? geometry2.summary.paddingX : spec.paddingX;
@@ -8845,8 +8945,8 @@ function KjunKpiRow({
               minWidth: 0,
               paddingVertical: summary ? 0 : small && mobile ? geometry2.smallMobile.itemPaddingY : spec.itemPaddingY,
               paddingHorizontal: summary ? 0 : small && mobile ? geometry2.smallMobile.itemPaddingX : spec.itemPaddingX,
-              borderLeftWidth: summary ? 0 : mobile && !small ? i % 2 && !full ? tokens48.border.defaultWidth : 0 : i ? tokens48.border.defaultWidth : 0,
-              borderTopWidth: mobile && !small && !summary && i >= 2 ? tokens48.border.defaultWidth : 0,
+              borderLeftWidth: summary ? 0 : mobile && !small ? i % 2 && !full ? tokens49.border.defaultWidth : 0 : i ? tokens49.border.defaultWidth : 0,
+              borderTopWidth: mobile && !small && !summary && i >= 2 ? tokens49.border.defaultWidth : 0,
               borderColor: colors.border,
               borderRadius: item.clickable ? geometry2.itemRadius : 0,
               flexDirection: sub ? "row" : "column",
@@ -8889,7 +8989,7 @@ function KjunKpiRow({
                           summary && seg.label && /* @__PURE__ */ jsx50(
                             KText,
                             {
-                              style: { ...typeStyle("caption"), marginRight: sub ? tokens48.dimension.value4 : 0, color: colors.textTertiary },
+                              style: { ...typeStyle("caption"), marginRight: sub ? tokens49.dimension.value4 : 0, color: colors.textTertiary },
                               children: seg.label
                             }
                           ),
@@ -8983,7 +9083,7 @@ function KjunKpiRow({
 }
 
 // packages/native/src/market-cards.tsx
-import { tokens as tokens50 } from "@kjun-ui/tokens";
+import { tokens as tokens51 } from "@kjun-ui/tokens";
 import { ScrollView as ScrollView10, View as View44 } from "react-native";
 
 // shared/package-runtime/market-cards.ts
@@ -9049,7 +9149,7 @@ function useMarketCards(props) {
 }
 
 // packages/native/src/market-parts.tsx
-import { tokens as tokens49 } from "@kjun-ui/tokens";
+import { tokens as tokens50 } from "@kjun-ui/tokens";
 import { View as View43, useWindowDimensions as useWindowDimensions10 } from "react-native";
 import { Fragment as Fragment17, jsx as jsx51, jsxs as jsxs36 } from "react/jsx-runtime";
 function MarketIdentity({
@@ -9059,7 +9159,7 @@ function MarketIdentity({
   compact = false
 }) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
-  const { colors } = useKjunStyles(), mobile = useWindowDimensions10().width < tokens49.responsive.market && !table && !compact, label = (_c = (_a = props.primaryLabel) == null ? void 0 : _a.call(props, row)) != null ? _c : String((_b = getValue(row, "name")) != null ? _b : ""), meta = ((_d = props.subMeta) == null ? void 0 : _d.call(props, row)) || "", id = getValue(row, props.rowKey || "id");
+  const { colors } = useKjunStyles(), mobile = useWindowDimensions10().width < tokens50.responsive.market && !table && !compact, label = (_c = (_a = props.primaryLabel) == null ? void 0 : _a.call(props, row)) != null ? _c : String((_b = getValue(row, "name")) != null ? _b : ""), meta = ((_d = props.subMeta) == null ? void 0 : _d.call(props, row)) || "", id = getValue(row, props.rowKey || "id");
   const body = /* @__PURE__ */ jsxs36(Fragment17, { children: [
     (_e = props.renderNamePrefix) == null ? void 0 : _e.call(props, row),
     /* @__PURE__ */ jsxs36(View43, { style: { flex: 1, minWidth: 0 }, children: [
@@ -9069,7 +9169,7 @@ function MarketIdentity({
           style: {
             flexDirection: "row",
             alignItems: "center",
-            gap: tokens49.dimension.value4,
+            gap: tokens50.dimension.value4,
             minWidth: 0
           },
           children: [
@@ -9091,7 +9191,7 @@ function MarketIdentity({
           ]
         }
       ),
-      (meta || props.renderSubMeta) && /* @__PURE__ */ jsx51(View43, { style: { marginTop: tokens49.dimension.value2 }, children: ((_i = props.renderSubMeta) == null ? void 0 : _i.call(props, row)) || /* @__PURE__ */ jsx51(
+      (meta || props.renderSubMeta) && /* @__PURE__ */ jsx51(View43, { style: { marginTop: tokens50.dimension.value2 }, children: ((_i = props.renderSubMeta) == null ? void 0 : _i.call(props, row)) || /* @__PURE__ */ jsx51(
         KText,
         {
           numberOfLines: 1,
@@ -9153,9 +9253,9 @@ function MarketFooter({
           flexWrap: "wrap",
           alignItems: "center",
           justifyContent: "space-between",
-          gap: tokens49.dimension.value8,
-          paddingVertical: tokens49.dimension.value12,
-          paddingHorizontal: tokens49.dimension.value16
+          gap: tokens50.dimension.value8,
+          paddingVertical: tokens50.dimension.value12,
+          paddingHorizontal: tokens50.dimension.value16
         },
         children: [
           /* @__PURE__ */ jsx51(KText, { style: { ...typeStyle("caption"), color: colors.textTertiary }, children: calculatedAt ? m.lastUpdated + (((_a = props.formatDate) == null ? void 0 : _a.call(props, calculatedAt)) || calculatedAt) : footerNote }),
@@ -9201,9 +9301,9 @@ function KjunMarketCards(props) {
         showsHorizontalScrollIndicator: false,
         contentContainerStyle: {
           flexDirection: "row",
-          gap: tokens50.dimension.value8,
-          paddingVertical: tokens50.dimension.value10,
-          paddingHorizontal: tokens50.dimension.value16
+          gap: tokens51.dimension.value8,
+          paddingVertical: tokens51.dimension.value10,
+          paddingHorizontal: tokens51.dimension.value16
         },
         children: state.pills.map((pill) => /* @__PURE__ */ jsxs37(
           AccessiblePressable,
@@ -9212,14 +9312,14 @@ function KjunMarketCards(props) {
             accessibilityLabel: pill.label,
             accessibilityState: { selected: state.key === pill.key },
             onPress: () => state.select(pill.key),
-            hitSlop: { top: (tokens50.native.minimumTouchTarget - typeStyle("label").lineHeight - 2 * tokens50.dimension.value8) / 2, bottom: (tokens50.native.minimumTouchTarget - typeStyle("label").lineHeight - 2 * tokens50.dimension.value8) / 2 },
+            hitSlop: { top: (tokens51.native.minimumTouchTarget - typeStyle("label").lineHeight - 2 * tokens51.dimension.value8) / 2, bottom: (tokens51.native.minimumTouchTarget - typeStyle("label").lineHeight - 2 * tokens51.dimension.value8) / 2 },
             style: {
               flexDirection: "row",
               alignItems: "center",
-              gap: tokens50.dimension.value4,
-              paddingVertical: tokens50.dimension.value8,
-              paddingHorizontal: tokens50.dimension.value16,
-              borderRadius: tokens50.radius.radius9999,
+              gap: tokens51.dimension.value4,
+              paddingVertical: tokens51.dimension.value8,
+              paddingHorizontal: tokens51.dimension.value16,
+              borderRadius: tokens51.radius.radius9999,
               backgroundColor: state.key === pill.key ? colors.brand : colors.secondary
             },
             children: [
@@ -9255,7 +9355,7 @@ function KjunMarketCards(props) {
           loadingContent: props.skeleton === false ? void 0 : /* @__PURE__ */ jsx52(KjunListSkeleton, { variant: "compact" }),
           emptyContent: /* @__PURE__ */ jsx52(KjunEmpty, { text: emptyMessage, description: emptySubMessage }),
           children: /* @__PURE__ */ jsxs37(View44, { children: [
-            state.pill && /* @__PURE__ */ jsx52(KText, { style: { textAlign: "right", paddingHorizontal: tokens50.dimension.value16, paddingVertical: tokens50.dimension.value8, ...typeStyle("caption"), color: colors.textSecondary }, children: state.pill.label }),
+            state.pill && /* @__PURE__ */ jsx52(KText, { style: { textAlign: "right", paddingHorizontal: tokens51.dimension.value16, paddingVertical: tokens51.dimension.value8, ...typeStyle("caption"), color: colors.textSecondary }, children: state.pill.label }),
             rows.map((row, i) => {
               var _a, _b, _c;
               return /* @__PURE__ */ jsxs37(
@@ -9270,22 +9370,22 @@ function KjunMarketCards(props) {
                     flexDirection: "row",
                     alignItems: "center",
                     justifyContent: "space-between",
-                    paddingVertical: tokens50.dimension.value10,
-                    paddingHorizontal: tokens50.dimension.value16,
-                    borderBottomWidth: tokens50.border.defaultWidth,
+                    paddingVertical: tokens51.dimension.value10,
+                    paddingHorizontal: tokens51.dimension.value16,
+                    borderBottomWidth: tokens51.border.defaultWidth,
                     borderBottomColor: colors.border,
                     backgroundColor: pressed ? colors.hover : void 0
                   }),
                   children: [
                     /* @__PURE__ */ jsx52(MarketIdentity, { row, props, compact: true }),
-                    /* @__PURE__ */ jsx52(View44, { style: { marginLeft: tokens50.dimension.value12, alignItems: "flex-end" }, children: ((_b = state.pill) == null ? void 0 : _b.format) === "sparkline" ? /* @__PURE__ */ jsx52(
+                    /* @__PURE__ */ jsx52(View44, { style: { marginLeft: tokens51.dimension.value12, alignItems: "flex-end" }, children: ((_b = state.pill) == null ? void 0 : _b.format) === "sparkline" ? /* @__PURE__ */ jsx52(
                       KjunSparkline,
                       {
                         data: getValue(row, state.key) || [],
-                        width: tokens50.extensions.marketTable.sparklineWidth,
-                        height: tokens50.extensions.marketTable.sparklineHeight
+                        width: tokens51.extensions.marketTable.sparklineWidth,
+                        height: tokens51.extensions.marketTable.sparklineHeight
                       }
-                    ) : state.pill ? /* @__PURE__ */ jsx52(Fragment18, { children: metricLoading(row, state.key) ? /* @__PURE__ */ jsx52(KjunSkeleton, { type: "block", height: tokens50.extensions.marketTable.valueSkeletonHeight, width: tokens50.extensions.marketTable.valueSkeletonWidth }) : isChange && getValue(row, state.key) != null ? /* @__PURE__ */ jsx52(
+                    ) : state.pill ? /* @__PURE__ */ jsx52(Fragment18, { children: metricLoading(row, state.key) ? /* @__PURE__ */ jsx52(KjunSkeleton, { type: "block", height: tokens51.extensions.marketTable.valueSkeletonHeight, width: tokens51.extensions.marketTable.valueSkeletonWidth }) : isChange && getValue(row, state.key) != null ? /* @__PURE__ */ jsx52(
                       KjunSignedValue,
                       {
                         value: finiteNumber(getValue(row, state.key)),
@@ -9293,14 +9393,14 @@ function KjunMarketCards(props) {
                         stale: !!getValue(row, "stale"),
                         tone: "pill"
                       }
-                    ) : isPrice && getValue(row, state.key) == null ? /* @__PURE__ */ jsx52(KjunSkeleton, { type: "block", height: tokens50.extensions.financial.priceSkeletonHeight, width: tokens50.extensions.financial.priceSkeletonWidth }) : /* @__PURE__ */ jsxs37(
+                    ) : isPrice && getValue(row, state.key) == null ? /* @__PURE__ */ jsx52(KjunSkeleton, { type: "block", height: tokens51.extensions.financial.priceSkeletonHeight, width: tokens51.extensions.financial.priceSkeletonWidth }) : /* @__PURE__ */ jsxs37(
                       View44,
                       {
                         style: {
                           flexDirection: "row",
                           alignItems: "center",
                           justifyContent: "flex-end",
-                          gap: tokens50.dimension.value4
+                          gap: tokens51.dimension.value4
                         },
                         children: [
                           (_c = props.renderMetricPrefix) == null ? void 0 : _c.call(
@@ -9337,7 +9437,7 @@ function KjunMarketCards(props) {
 }
 
 // packages/native/src/market-list.tsx
-import { tokens as tokens51 } from "@kjun-ui/tokens";
+import { tokens as tokens52 } from "@kjun-ui/tokens";
 import { View as View45, useWindowDimensions as useWindowDimensions11 } from "react-native";
 import { jsx as jsx53, jsxs as jsxs38 } from "react/jsx-runtime";
 var changeWeight = { fontWeight: typeStyle("label").fontWeight };
@@ -9355,7 +9455,7 @@ function KjunMarketSimpleList(props) {
     closingPrice = false,
     emptyMessage = m.noItems,
     emptySubMessage = ""
-  } = props, { colors } = useKjunStyles(), mobile = useWindowDimensions11().width < tokens51.responsive.market;
+  } = props, { colors } = useKjunStyles(), mobile = useWindowDimensions11().width < tokens52.responsive.market;
   return /* @__PURE__ */ jsxs38(View45, { children: [
     /* @__PURE__ */ jsx53(
       KjunDataState,
@@ -9381,11 +9481,11 @@ function KjunMarketSimpleList(props) {
                 flexDirection: "row",
                 alignItems: "center",
                 justifyContent: "space-between",
-                paddingVertical: mobile ? tokens51.dimension.value14 : tokens51.dimension.value16,
-                paddingHorizontal: mobile ? tokens51.dimension.value20 : tokens51.dimension.value16,
+                paddingVertical: mobile ? tokens52.dimension.value14 : tokens52.dimension.value16,
+                paddingHorizontal: mobile ? tokens52.dimension.value20 : tokens52.dimension.value16,
                 // Like Web, the minimum height belongs to the narrow layout only.
-                minHeight: mobile ? tokens51.extensions.marketList.minimumHeight : void 0,
-                borderBottomWidth: tokens51.border.defaultWidth,
+                minHeight: mobile ? tokens52.extensions.marketList.minimumHeight : void 0,
+                borderBottomWidth: tokens52.border.defaultWidth,
                 borderBottomColor: colors.border,
                 backgroundColor: pressed ? colors.hover : void 0
               }),
@@ -9395,8 +9495,8 @@ function KjunMarketSimpleList(props) {
                   View45,
                   {
                     style: {
-                      marginLeft: tokens51.dimension.value12,
-                      minWidth: mobile ? tokens51.extensions.marketList.mobileQuoteMinimumWidth : void 0,
+                      marginLeft: tokens52.dimension.value12,
+                      minWidth: mobile ? tokens52.extensions.marketList.mobileQuoteMinimumWidth : void 0,
                       maxWidth: "50%",
                       alignItems: "flex-end"
                     },
@@ -9418,8 +9518,8 @@ function KjunMarketSimpleList(props) {
                             flexWrap: "wrap",
                             alignItems: "center",
                             justifyContent: "flex-end",
-                            gap: tokens51.dimension.value6,
-                            marginTop: tokens51.dimension.value2
+                            gap: tokens52.dimension.value6,
+                            marginTop: tokens52.dimension.value2
                           },
                           children: [
                             price !== null && ((_b = props.renderPricePrefix) == null ? void 0 : _b.call(props, row)),
@@ -9431,7 +9531,7 @@ function KjunMarketSimpleList(props) {
                                 fetchedAt
                               }
                             )),
-                            changeLoading(row) ? /* @__PURE__ */ jsx53(KjunSkeleton, { type: "block", height: tokens51.extensions.marketList.changeSkeletonHeight, width: tokens51.extensions.marketList.changeSkeletonWidth }) : change !== null ? /* @__PURE__ */ jsx53(
+                            changeLoading(row) ? /* @__PURE__ */ jsx53(KjunSkeleton, { type: "block", height: tokens52.extensions.marketList.changeSkeletonHeight, width: tokens52.extensions.marketList.changeSkeletonWidth }) : change !== null ? /* @__PURE__ */ jsx53(
                               KjunSignedValue,
                               {
                                 value: change,
@@ -9465,7 +9565,7 @@ function KjunMarketSimpleList(props) {
 }
 
 // packages/native/src/market-panel.tsx
-import { tokens as tokens52 } from "@kjun-ui/tokens";
+import { tokens as tokens53 } from "@kjun-ui/tokens";
 import { View as View46 } from "react-native";
 import { jsx as jsx54, jsxs as jsxs39 } from "react/jsx-runtime";
 function KjunMarketListPanel({
@@ -9479,8 +9579,8 @@ function KjunMarketListPanel({
       View46,
       {
         style: {
-          marginTop: tokens52.dimension.value16,
-          borderTopWidth: tokens52.border.defaultWidth,
+          marginTop: tokens53.dimension.value16,
+          borderTopWidth: tokens53.border.defaultWidth,
           borderTopColor: colors.border
         },
         children
@@ -9490,7 +9590,7 @@ function KjunMarketListPanel({
 }
 
 // packages/native/src/market-table.tsx
-import { tokens as tokens53 } from "@kjun-ui/tokens";
+import { tokens as tokens54 } from "@kjun-ui/tokens";
 import { useId as useId10, useState as useState39 } from "react";
 import { ScrollView as ScrollView11, View as View47 } from "react-native";
 import Svg8, { Defs as Defs4, LinearGradient as LinearGradient4, Rect as Rect4, Stop as Stop4 } from "react-native-svg";
@@ -9518,7 +9618,7 @@ function KjunMarketTable(props) {
   const render = (row, col) => {
     const value = getValue(row, col.key), stale = !!getValue(row, "stale");
     if (cellLoading(row, col))
-      return /* @__PURE__ */ jsx55(KjunSkeleton, { type: "block", height: tokens53.extensions.marketTable.valueSkeletonHeight, width: tokens53.extensions.marketTable.valueSkeletonWidth });
+      return /* @__PURE__ */ jsx55(KjunSkeleton, { type: "block", height: tokens54.extensions.marketTable.valueSkeletonHeight, width: tokens54.extensions.marketTable.valueSkeletonWidth });
     if (renderCell) return content(renderCell(row, col));
     if (["stock_name", "name", "symbol"].includes(col.key))
       return /* @__PURE__ */ jsx55(MarketIdentity, { row, props, table: true });
@@ -9527,8 +9627,8 @@ function KjunMarketTable(props) {
         KjunSparkline,
         {
           data: Array.isArray(value) ? value : [],
-          width: tokens53.extensions.marketTable.sparklineWidth,
-          height: tokens53.extensions.marketTable.sparklineHeight
+          width: tokens54.extensions.marketTable.sparklineWidth,
+          height: tokens54.extensions.marketTable.sparklineHeight
         }
       );
     if (col.type === "price")
@@ -9586,7 +9686,7 @@ function KjunMarketTable(props) {
       onLayout: layout.onLayout,
       style: {
         backgroundColor: embedded ? void 0 : colors.surface,
-        borderRadius: embedded ? 0 : tokens53.radius.radius12
+        borderRadius: embedded ? 0 : tokens54.radius.radius12
       },
       children: [
         /* @__PURE__ */ jsx55(
@@ -9626,13 +9726,13 @@ function KjunMarketTable(props) {
                             {
                               style: {
                                 width: marketGeometry.actionsWidth,
-                                paddingVertical: tokens53.dimension.value12,
-                                paddingHorizontal: tokens53.dimension.value4,
+                                paddingVertical: tokens54.dimension.value12,
+                                paddingHorizontal: tokens54.dimension.value4,
                                 flexDirection: "row",
                                 alignItems: "center",
                                 justifyContent: "center"
                               },
-                              children: ["interest", "favorite"].map((kind) => /* @__PURE__ */ jsx55(View47, { style: { width: Math.max(tokens53.native.minimumTouchTarget, tokens53.extensions.iconToggle.sizes.xs), alignItems: "center" }, children: /* @__PURE__ */ jsx55(KjunCollectionMark, { kind, size: "md" }) }, kind))
+                              children: ["interest", "favorite"].map((kind) => /* @__PURE__ */ jsx55(View47, { style: { width: Math.max(tokens54.native.minimumTouchTarget, tokens54.extensions.iconToggle.sizes.xs), alignItems: "center" }, children: /* @__PURE__ */ jsx55(KjunCollectionMark, { kind, size: "md" }) }, kind))
                             }
                           ),
                           columns.map((col, columnIndex) => /* @__PURE__ */ jsxs40(
@@ -9647,11 +9747,11 @@ function KjunMarketTable(props) {
                               },
                               style: {
                                 width: layout.widths[columnIndex],
-                                padding: tokens53.dimension.value12,
+                                padding: tokens54.dimension.value12,
                                 flexDirection: "row",
                                 alignItems: "center",
                                 justifyContent: col.align === "right" ? "flex-end" : col.align === "center" ? "center" : "flex-start",
-                                gap: tokens53.dimension.value4
+                                gap: tokens54.dimension.value4
                               },
                               children: [
                                 /* @__PURE__ */ jsx55(
@@ -9668,7 +9768,7 @@ function KjunMarketTable(props) {
                                   KjunIcon,
                                   {
                                     name: sortKey === col.key ? sortOrder === "asc" ? "sort-ascending" : "sort-descending" : "arrows-sort",
-                                    size: tokens53.extensions.marketTable.sortIconSize,
+                                    size: tokens54.extensions.marketTable.sortIconSize,
                                     color: sortKey === col.key ? colors.brand : colors.textTertiary
                                   }
                                 )
@@ -9703,8 +9803,8 @@ function KjunMarketTable(props) {
                               {
                                 style: {
                                   width: marketGeometry.actionsWidth,
-                                  paddingVertical: tokens53.dimension.value12,
-                                  paddingHorizontal: tokens53.dimension.value4,
+                                  paddingVertical: tokens54.dimension.value12,
+                                  paddingHorizontal: tokens54.dimension.value4,
                                   flexDirection: "row",
                                   alignItems: "center",
                                   justifyContent: "center"
@@ -9748,8 +9848,8 @@ function KjunMarketTable(props) {
                               {
                                 style: {
                                   width: layout.widths[columnIndex],
-                                  paddingVertical: tokens53.dimension.value14,
-                                  paddingHorizontal: tokens53.dimension.value12,
+                                  paddingVertical: tokens54.dimension.value14,
+                                  paddingHorizontal: tokens54.dimension.value12,
                                   justifyContent: "center",
                                   alignItems: col.align === "right" ? "flex-end" : col.align === "center" ? "center" : void 0
                                 },
@@ -9775,7 +9875,7 @@ function KjunMarketTable(props) {
                   ] })
                 }
               ),
-              layout.width - scroll.viewport - scroll.x > 1 && /* @__PURE__ */ jsx55(View47, { pointerEvents: "none", style: { position: "absolute", top: 0, right: 0, bottom: 0, width: tokens53.extensions.scrollFade.width }, children: /* @__PURE__ */ jsxs40(Svg8, { width: "100%", height: "100%", children: [
+              layout.width - scroll.viewport - scroll.x > 1 && /* @__PURE__ */ jsx55(View47, { pointerEvents: "none", style: { position: "absolute", top: 0, right: 0, bottom: 0, width: tokens54.extensions.scrollFade.width }, children: /* @__PURE__ */ jsxs40(Svg8, { width: "100%", height: "100%", children: [
                 /* @__PURE__ */ jsx55(Defs4, { children: /* @__PURE__ */ jsxs40(LinearGradient4, { id: fadeId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
                   /* @__PURE__ */ jsx55(Stop4, { offset: "0", stopColor: colors.surface, stopOpacity: 0 }),
                   /* @__PURE__ */ jsx55(Stop4, { offset: "1", stopColor: colors.surface, stopOpacity: 1 })
@@ -9792,50 +9892,61 @@ function KjunMarketTable(props) {
 }
 
 // packages/native/src/list.tsx
-import { tokens as tokens54 } from "@kjun-ui/tokens";
+import { tokens as tokens55 } from "@kjun-ui/tokens";
 import { Children as Children5, createContext as createContext22, useContext as useContext19 } from "react";
 import { View as View48, Platform as Platform26 } from "react-native";
 import { Fragment as Fragment19, jsx as jsx56, jsxs as jsxs41 } from "react/jsx-runtime";
 var ListRowContext = createContext22({ divider: true, compact: false });
-function KjunListRow({ title, description, leading, trailing, actions, href, disabled = false, onPress }) {
+function KjunListRow({ title, description, leading, trailing, actions, href, disabled = false, destructive = false, chevron = false, onPress }) {
   const { colors } = useKjunStyles(), { divider, compact } = useContext19(ListRowContext);
   const parts = /* @__PURE__ */ jsxs41(Fragment19, { children: [
     hasContent(leading) && /* @__PURE__ */ jsx56(View48, { children: content(leading) }),
     /* @__PURE__ */ jsxs41(View48, { style: { flex: 1, minWidth: 0 }, children: [
-      /* @__PURE__ */ jsx56(KText, { style: { ...typeStyle("label") }, children: title }),
-      !!description && /* @__PURE__ */ jsx56(KText, { style: { marginTop: tokens54.extensions.list.descriptionGap, color: colors.textSecondary, ...typeStyle("caption") }, children: description })
+      /* @__PURE__ */ jsx56(KText, { style: { ...typeStyle("label"), ...destructive ? { color: colors.danger } : {} }, children: title }),
+      !!description && /* @__PURE__ */ jsx56(KText, { style: { marginTop: tokens55.extensions.list.descriptionGap, color: colors.textSecondary, ...typeStyle("caption") }, children: description })
     ] }),
-    hasContent(trailing) && /* @__PURE__ */ jsx56(View48, { style: { maxWidth: "35%" }, children: content(trailing) })
+    hasContent(trailing) && /* @__PURE__ */ jsx56(View48, { style: { maxWidth: "35%" }, children: content(trailing) }),
+    chevron && /* @__PURE__ */ jsx56(View48, { accessible: false, importantForAccessibility: "no-hide-descendants", accessibilityElementsHidden: true, children: /* @__PURE__ */ jsx56(KjunIcon, { name: "chevron-right", size: tokens55.iconSizes.default, color: colors.textTertiary }) })
   ] });
-  const style = { flex: 1, minWidth: 0, minHeight: compact ? tokens54.extensions.list.compactMinimumHeight : tokens54.extensions.list.minimumHeight, flexDirection: "row", alignItems: "center", gap: tokens54.extensions.list.gap, padding: tokens54.extensions.list.padding, ...compact ? { paddingVertical: tokens54.extensions.list.compactPaddingY } : {} };
-  return /* @__PURE__ */ jsxs41(View48, { role: "listitem", style: { flexDirection: "row", alignItems: "center", gap: tokens54.extensions.list.gap, borderBottomWidth: divider ? tokens54.border.defaultWidth : 0, borderBottomColor: colors.divider }, children: [
-    onPress || href ? /* @__PURE__ */ jsx56(AccessiblePressable, { ...Platform26.OS === "web" && href && !disabled ? { href } : {}, accessibilityRole: href ? "link" : "button", accessibilityLabel: title + (description ? ", " + description : ""), disabled, accessibilityState: { disabled }, onPress, style: ({ pressed }) => ({ ...style, opacity: disabled ? tokens54.states.opacity.disabled : 1, backgroundColor: pressed ? colors.hover : "transparent" }), children: parts }) : /* @__PURE__ */ jsx56(View48, { style, children: parts }),
-    hasContent(actions) && /* @__PURE__ */ jsx56(View48, { pointerEvents: disabled ? "none" : "auto", ...disabled && Platform26.OS === "web" ? { inert: true } : {}, style: { maxWidth: "45%", flexDirection: "row", flexWrap: "wrap", gap: tokens54.extensions.list.actionsGap, paddingRight: tokens54.extensions.list.actionsPadding, opacity: disabled ? tokens54.states.opacity.disabled : 1 }, children: content(actions) })
+  const style = { flex: 1, minWidth: 0, minHeight: compact ? tokens55.extensions.list.compactMinimumHeight : tokens55.extensions.list.minimumHeight, flexDirection: "row", alignItems: "center", gap: tokens55.extensions.list.gap, padding: tokens55.extensions.list.padding, ...compact ? { paddingVertical: tokens55.extensions.list.compactPaddingY } : {} };
+  return /* @__PURE__ */ jsxs41(View48, { role: "listitem", style: { flexDirection: "row", alignItems: "center", gap: tokens55.extensions.list.gap, borderBottomWidth: divider ? tokens55.border.defaultWidth : 0, borderBottomColor: colors.divider }, children: [
+    onPress || href ? /* @__PURE__ */ jsx56(AccessiblePressable, { ...Platform26.OS === "web" && href && !disabled ? { href } : {}, accessibilityRole: href ? "link" : "button", accessibilityLabel: title + (description ? ", " + description : ""), disabled, accessibilityState: { disabled }, onPress, style: ({ pressed }) => ({ ...style, opacity: disabled ? tokens55.states.opacity.disabled : 1, backgroundColor: pressed ? colors.hover : "transparent" }), children: parts }) : /* @__PURE__ */ jsx56(View48, { style, children: parts }),
+    hasContent(actions) && /* @__PURE__ */ jsx56(View48, { pointerEvents: disabled ? "none" : "auto", ...disabled && Platform26.OS === "web" ? { inert: true } : {}, style: { maxWidth: "45%", flexDirection: "row", flexWrap: "wrap", gap: tokens55.extensions.list.actionsGap, paddingRight: tokens55.extensions.list.actionsPadding, opacity: disabled ? tokens55.states.opacity.disabled : 1 }, children: content(actions) })
   ] });
 }
-function KjunListSection({ title, description, actions, children, ariaLabel, divider = true, density = "default" }) {
+function KjunListSection({ title, description, actions, children, ariaLabel, surface = true, divider = true, density = "default" }) {
   const { colors } = useKjunStyles();
-  return /* @__PURE__ */ jsxs41(View48, { style: { minWidth: 0, backgroundColor: colors.surface }, children: [
-    !!(title || description || actions) && /* @__PURE__ */ jsxs41(View48, { style: { flexDirection: "row", alignItems: "center", gap: tokens54.extensions.list.gap, padding: tokens54.extensions.list.padding }, children: [
+  return /* @__PURE__ */ jsxs41(View48, { style: { minWidth: 0, backgroundColor: surface ? colors.surface : "transparent" }, children: [
+    !!(title || description || actions) && /* @__PURE__ */ jsxs41(View48, { style: { flexDirection: "row", alignItems: "center", gap: tokens55.extensions.list.gap, padding: tokens55.extensions.list.padding }, children: [
       /* @__PURE__ */ jsxs41(View48, { style: { flex: 1 }, children: [
         !!title && /* @__PURE__ */ jsx56(KText, { accessibilityRole: "header", style: { ...typeStyle("cardTitle") }, children: title }),
-        !!description && /* @__PURE__ */ jsx56(KText, { style: { marginTop: tokens54.extensions.list.descriptionGap, color: colors.textSecondary, ...typeStyle("caption") }, children: description })
+        !!description && /* @__PURE__ */ jsx56(KText, { style: { marginTop: tokens55.extensions.list.descriptionGap, color: colors.textSecondary, ...typeStyle("caption") }, children: description })
       ] }),
       content(actions)
     ] }),
     /* @__PURE__ */ jsx56(View48, { role: "list", accessibilityLabel: ariaLabel || title, children: Children5.toArray(children).map((row, i, rows) => /* @__PURE__ */ jsx56(ListRowContext.Provider, { value: { divider: divider && i < rows.length - 1, compact: density === "compact" }, children: row }, i)) })
   ] });
 }
+function KjunListItem({ children }) {
+  const { colors } = useKjunStyles(), { divider, compact } = useContext19(ListRowContext);
+  return /* @__PURE__ */ jsx56(View48, { role: "listitem", style: {
+    padding: tokens55.extensions.list.padding,
+    ...compact ? { paddingVertical: tokens55.extensions.list.compactPaddingY } : {},
+    borderBottomWidth: divider ? tokens55.border.defaultWidth : 0,
+    borderBottomColor: colors.divider,
+    minWidth: 0
+  }, children: content(children) });
+}
 
 // packages/native/src/app-navigation.tsx
-import { tokens as tokens55 } from "@kjun-ui/tokens";
+import { tokens as tokens56 } from "@kjun-ui/tokens";
 import { Children as Children6, Fragment as Fragment20, isValidElement as isValidElement8, useState as useState40 } from "react";
 import { View as View49, Platform as Platform27 } from "react-native";
 import { jsx as jsx57, jsxs as jsxs42 } from "react/jsx-runtime";
 function KjunTopNavigation({ title, description, leading, actions, safeAreaTop = 0 }) {
   const { colors } = useKjunStyles();
-  const geometry2 = tokens55.extensions.topNavigation;
-  const titleInset = Math.max(0, (geometry2.controlSize - tokens55.typography.sectionTitle.lineHeightPx) / 2);
+  const geometry2 = tokens56.extensions.topNavigation;
+  const titleInset = Math.max(0, (geometry2.controlSize - tokens56.typography.sectionTitle.lineHeightPx) / 2);
   const wrapping = Platform27.OS === "web" ? { wordBreak: "keep-all", overflowWrap: "anywhere" } : {};
   const edgeInset = (geometry2.controlSize - geometry2.iconSize) / 2;
   const [iconEdges, setIconEdges] = useState40({ leading: false, trailing: false });
@@ -9859,13 +9970,13 @@ function KjunBottomNavigation({ items: items2, value, ariaLabel, safeAreaBottom
   const m = useKjunMessages();
   ariaLabel != null ? ariaLabel : ariaLabel = m.mainNavigation;
   const { colors } = useKjunStyles();
-  const geometry2 = tokens55.extensions.bottomNavigation;
+  const geometry2 = tokens56.extensions.bottomNavigation;
   const hasIcons = items2.some((item) => item.icon);
   if (keyboardVisible && hideOnKeyboard) return null;
   return /* @__PURE__ */ jsx57(View49, { role: "navigation", accessibilityLabel: ariaLabel, style: { flexShrink: 0, flexDirection: "row", backgroundColor: colors.surface, paddingBottom: Math.max(0, safeAreaBottom) }, children: items2.map((item) => {
     const selected = item.key === value;
     const ink = selected ? colors.brand : colors.textSecondary;
-    const ring = tokens55.border.controlWidth;
+    const ring = tokens56.border.controlWidth;
     const badge = item.badge != null && /* @__PURE__ */ jsx57(View49, { pointerEvents: "none", "aria-hidden": true, style: {
       position: "absolute",
       top: -geometry2.badgeOffset - ring,
@@ -9900,7 +10011,7 @@ function KjunBottomNavigation({ items: items2, value, ariaLabel, safeAreaBottom
           gap: geometry2.itemGap,
           paddingHorizontal: geometry2.itemPaddingX,
           paddingVertical: geometry2.itemPaddingY,
-          opacity: item.disabled ? tokens55.states.opacity.disabled : 1
+          opacity: item.disabled ? tokens56.states.opacity.disabled : 1
         },
         children: [
           hasIcons && /* @__PURE__ */ jsxs42(View49, { style: { width: geometry2.iconSize, height: geometry2.iconSize, flexShrink: 0 }, children: [
@@ -9921,8 +10032,8 @@ function KjunBottomNavigation({ items: items2, value, ariaLabel, safeAreaBottom
 function KjunBottomActionBar({ description, children, safeAreaBottom = 0, keyboardVisible = false, hideOnKeyboard = false }) {
   const { colors } = useKjunStyles();
   const [width, setWidth] = useState40(0);
-  const geometry2 = tokens55.extensions.navigation;
-  const wide = width >= tokens55.responsive.bottomAction + geometry2.padding * 2;
+  const geometry2 = tokens56.extensions.navigation;
+  const wide = width >= tokens56.responsive.bottomAction + geometry2.padding * 2;
   const wrapping = Platform27.OS === "web" ? { wordBreak: "keep-all", overflowWrap: "anywhere" } : {};
   if (keyboardVisible && hideOnKeyboard) return null;
   return /* @__PURE__ */ jsx57(BottomActionBarContext.Provider, { value: !wide, children: /* @__PURE__ */ jsxs42(View49, { onLayout: (event) => setWidth(event.nativeEvent.layout.width), style: {
@@ -9942,52 +10053,53 @@ function KjunBottomActionBar({ description, children, safeAreaBottom = 0, keyboa
 }
 
 // packages/native/src/media.tsx
-import { useRef as useRef33, useState as useState41 } from "react";
+import { createContext as createContext23, useContext as useContext20, useRef as useRef33, useState as useState41 } from "react";
 import { Image, View as View50 } from "react-native";
-import { tokens as tokens56 } from "@kjun-ui/tokens";
+import { tokens as tokens57 } from "@kjun-ui/tokens";
 import { jsx as jsx58 } from "react/jsx-runtime";
+var ImageBackgroundContext = createContext23(void 0);
 function KjunImage({ src, source, alt, decorative = false, aspectRatio = 1, fit = "cover", fallback: fallback2, onLoad, onError }) {
-  const { colors } = useKjunStyles();
+  const { colors } = useKjunStyles(), background = useContext20(ImageBackgroundContext);
   const request = JSON.stringify(source != null ? source : src), current = useRef33({ request, version: 0 });
   if (current.current.request !== request) current.current = { request, version: current.current.version + 1 };
   const version = current.current.version;
   const [failed, setFailed] = useState41(null);
   const missing = !source && !src;
-  return /* @__PURE__ */ jsx58(View50, { accessibilityElementsHidden: decorative, importantForAccessibility: decorative ? "no-hide-descendants" : "auto", "aria-hidden": decorative || void 0, style: { width: "100%", aspectRatio: aspectRatio > 0 ? aspectRatio : 1, overflow: "hidden", backgroundColor: colors.secondary }, children: !missing && failed !== version ? /* @__PURE__ */ jsx58(Image, { source: source != null ? source : { uri: src }, accessible: !decorative, accessibilityLabel: decorative ? void 0 : alt, resizeMode: fit, style: { position: "absolute", inset: 0, width: "100%", height: "100%" }, onLoad: () => {
+  return /* @__PURE__ */ jsx58(View50, { accessibilityElementsHidden: decorative, importantForAccessibility: decorative ? "no-hide-descendants" : "auto", "aria-hidden": decorative || void 0, style: { width: "100%", aspectRatio: aspectRatio > 0 ? aspectRatio : 1, overflow: "hidden", backgroundColor: background != null ? background : colors.secondary }, children: !missing && failed !== version ? /* @__PURE__ */ jsx58(Image, { source: source != null ? source : { uri: src }, accessible: !decorative, accessibilityLabel: decorative ? void 0 : alt, resizeMode: fit, style: { position: "absolute", inset: 0, width: "100%", height: "100%" }, onLoad: () => {
     if (version === current.current.version) onLoad == null ? void 0 : onLoad();
   }, onError: () => {
     if (version === current.current.version) {
       setFailed(version);
       onError == null ? void 0 : onError();
     }
-  } }, version) : /* @__PURE__ */ jsx58(View50, { accessible: !decorative, accessibilityRole: "image", accessibilityLabel: decorative ? void 0 : alt, "aria-hidden": decorative || void 0, style: { flex: 1, alignItems: "center", justifyContent: "center" }, children: content(fallback2 != null ? fallback2 : /* @__PURE__ */ jsx58(KjunIcon, { name: "image", size: tokens56.extensions.image.fallbackIconSize, color: colors.textSecondary }), { color: colors.textSecondary, fontWeight: typeStyle("control").fontWeight, textAlign: "center" }) }) });
+  } }, version) : /* @__PURE__ */ jsx58(View50, { accessible: !decorative, accessibilityRole: "image", accessibilityLabel: decorative ? void 0 : alt, "aria-hidden": decorative || void 0, style: { flex: 1, alignItems: "center", justifyContent: "center" }, children: content(fallback2 != null ? fallback2 : /* @__PURE__ */ jsx58(KjunIcon, { name: "image", size: tokens57.extensions.image.fallbackIconSize, color: colors.textSecondary }), { color: colors.textSecondary, fontWeight: typeStyle("control").fontWeight, textAlign: "center" }) }) });
 }
-function KjunAvatar({ src, source, name = "", alt, decorative = false, size = "md", shape = "circle", fallback: fallback2, onLoad, onError }) {
+function KjunAvatar({ src, source, name = "", alt, decorative = false, size = "md", shape = "circle", color, textColor, fallback: fallback2, onLoad, onError }) {
   const m = useKjunMessages();
   const { colors } = useKjunStyles(), initial = Array.from(name.trim())[0];
-  return /* @__PURE__ */ jsx58(View50, { style: { width: tokens56.extensions.avatar[size], height: tokens56.extensions.avatar[size], borderRadius: shape === "circle" ? tokens56.radius.radius9999 : tokens56.radius.radius8, overflow: "hidden", flexShrink: 0 }, children: /* @__PURE__ */ jsx58(KjunImage, { src, source, alt: alt || name || m.user, decorative, fallback: fallback2 != null ? fallback2 : initial ? /* @__PURE__ */ jsx58(KText, { style: { ...typeStyle(size === "sm" ? "control" : size === "lg" ? "sectionTitle" : "input"), fontWeight: typeStyle("control").fontWeight, color: colors.textSecondary }, children: initial.toLocaleUpperCase() }) : /* @__PURE__ */ jsx58(KjunIcon, { name: "user", size: tokens56.extensions.avatar.fallbackIconSizes[size] }), onLoad, onError }) });
+  return /* @__PURE__ */ jsx58(View50, { style: { width: tokens57.extensions.avatar[size], height: tokens57.extensions.avatar[size], borderRadius: shape === "circle" ? tokens57.radius.radius9999 : tokens57.radius.radius8, overflow: "hidden", flexShrink: 0 }, children: /* @__PURE__ */ jsx58(ImageBackgroundContext.Provider, { value: color, children: /* @__PURE__ */ jsx58(KjunImage, { src, source, alt: alt || name || m.user, decorative, fallback: fallback2 != null ? fallback2 : initial ? /* @__PURE__ */ jsx58(KText, { style: { ...typeStyle(size === "sm" ? "control" : size === "lg" ? "sectionTitle" : "input"), fontWeight: typeStyle("control").fontWeight, color: textColor != null ? textColor : colors.textSecondary }, children: initial.toLocaleUpperCase() }) : /* @__PURE__ */ jsx58(KjunIcon, { name: "user", size: tokens57.extensions.avatar.fallbackIconSizes[size], color: textColor }), onLoad, onError }) }) });
 }
 
 // packages/native/src/chip.tsx
 import { View as View51 } from "react-native";
-import { tokens as tokens57 } from "@kjun-ui/tokens";
+import { tokens as tokens58 } from "@kjun-ui/tokens";
 import { jsx as jsx59, jsxs as jsxs43 } from "react/jsx-runtime";
 function KjunChip({ label, icon, removable = false, disabled = false, size = "md", removeLabel, onRemove }) {
   const m = useKjunMessages();
   const { colors } = useKjunStyles();
-  return /* @__PURE__ */ jsxs43(View51, { style: { alignSelf: "flex-start", maxWidth: "100%", minWidth: 0, flexShrink: 1, flexDirection: "row", alignItems: "center", gap: tokens57.extensions.chip.gap, minHeight: removable ? tokens57.extensions.chip.nativeRemoveSize : tokens57.extensions.chip[size], paddingVertical: removable ? 0 : tokens57.extensions.chip.paddingY, paddingLeft: tokens57.extensions.chip.paddingX, paddingRight: removable ? 0 : tokens57.extensions.chip.paddingX, borderRadius: tokens57.extensions.chip.radius, backgroundColor: colors.secondary, opacity: disabled ? tokens57.states.opacity.disabled : 1 }, children: [
-    !!icon && /* @__PURE__ */ jsx59(KjunIcon, { name: icon, size: tokens57.extensions.chip.iconSizes[size] }),
-    /* @__PURE__ */ jsx59(KText, { style: { ...typeStyle(tokens57.extensions.chip.typography[size]), flexShrink: 1, minWidth: 0 }, children: label }),
-    removable && /* @__PURE__ */ jsx59(AccessiblePressable, { accessibilityRole: "button", accessibilityLabel: removeLabel || m.remove(label), disabled, accessibilityState: { disabled }, onPress: onRemove, style: { width: tokens57.extensions.chip.nativeRemoveSize, height: tokens57.extensions.chip.nativeRemoveSize, borderRadius: tokens57.extensions.chip.radius, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx59(KjunIcon, { name: "x", size: tokens57.extensions.chip.removeIconSizes[size] }) })
+  return /* @__PURE__ */ jsxs43(View51, { style: { alignSelf: "flex-start", maxWidth: "100%", minWidth: 0, flexShrink: 1, flexDirection: "row", alignItems: "center", gap: tokens58.extensions.chip.gap, minHeight: removable ? tokens58.extensions.chip.nativeRemoveSize : tokens58.extensions.chip[size], paddingVertical: removable ? 0 : tokens58.extensions.chip.paddingY, paddingLeft: tokens58.extensions.chip.paddingX, paddingRight: removable ? 0 : tokens58.extensions.chip.paddingX, borderRadius: tokens58.extensions.chip.radius, backgroundColor: colors.secondary, opacity: disabled ? tokens58.states.opacity.disabled : 1 }, children: [
+    !!icon && /* @__PURE__ */ jsx59(KjunIcon, { name: icon, size: tokens58.extensions.chip.iconSizes[size] }),
+    /* @__PURE__ */ jsx59(KText, { style: { ...typeStyle(tokens58.extensions.chip.typography[size]), flexShrink: 1, minWidth: 0 }, children: label }),
+    removable && /* @__PURE__ */ jsx59(AccessiblePressable, { accessibilityRole: "button", accessibilityLabel: removeLabel || m.remove(label), disabled, accessibilityState: { disabled }, onPress: onRemove, style: { width: tokens58.extensions.chip.nativeRemoveSize, height: tokens58.extensions.chip.nativeRemoveSize, borderRadius: tokens58.extensions.chip.radius, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx59(KjunIcon, { name: "x", size: tokens58.extensions.chip.removeIconSizes[size] }) })
   ] });
 }
 
 // packages/native/src/fab.tsx
-import { tokens as tokens58 } from "@kjun-ui/tokens";
+import { tokens as tokens59 } from "@kjun-ui/tokens";
 import { jsx as jsx60 } from "react/jsx-runtime";
 function KjunFab({ icon, ariaLabel, disabled = false, safeAreaBottom = 0, offsetBottom = 0, onPress }) {
   const { colors } = useKjunStyles();
-  const { size, inset, iconSize } = tokens58.extensions.fab;
+  const { size, inset, iconSize } = tokens59.extensions.fab;
   return /* @__PURE__ */ jsx60(
     AccessiblePressable,
     {
@@ -10000,15 +10112,15 @@ function KjunFab({ icon, ariaLabel, disabled = false, safeAreaBottom = 0, offset
         position: "absolute",
         right: inset,
         bottom: inset + Math.max(0, safeAreaBottom) + Math.max(0, offsetBottom),
-        zIndex: tokens58.layers.page.navigation,
+        zIndex: tokens59.layers.page.navigation,
         width: size,
         height: size,
         borderRadius: size / 2,
         alignItems: "center",
         justifyContent: "center",
         backgroundColor: pressed ? colors.brandActive : colors.brand,
-        opacity: disabled ? tokens58.states.opacity.disabled : 1,
-        boxShadow: shadowLayers(tokens58.elevation.floating, colors)
+        opacity: disabled ? tokens59.states.opacity.disabled : 1,
+        boxShadow: shadowLayers(tokens59.elevation.floating, colors)
       }),
       children: /* @__PURE__ */ jsx60(KjunIcon, { name: icon, size: iconSize, color: colors.onBrand })
     }
@@ -10018,10 +10130,10 @@ function KjunFab({ icon, ariaLabel, disabled = false, safeAreaBottom = 0, offset
 // packages/native/src/range-input.tsx
 import { useEffect as useEffect27, useMemo as useMemo3, useRef as useRef34, useState as useState42 } from "react";
 import { PanResponder, Platform as Platform28, Pressable as Pressable3, View as View52 } from "react-native";
-import { tokens as tokens59, createSliderDomain, sliderKey } from "@kjun-ui/tokens";
+import { tokens as tokens60, createSliderDomain, sliderKey } from "@kjun-ui/tokens";
 import { jsx as jsx61, jsxs as jsxs44 } from "react/jsx-runtime";
-var geometry = tokens59.extensions.slider;
-var targetSize = tokens59.native.minimumTouchTarget;
+var geometry = tokens60.extensions.slider;
+var targetSize = tokens60.native.minimumTouchTarget;
 var trackFocus = { tabIndex: -1 };
 function RangeInput({
   value,
@@ -10121,10 +10233,10 @@ function RangeInput({
     View52,
     {
       style: {
-        minWidth: tokens59.extensions.slider.minimumWidth,
+        minWidth: tokens60.extensions.slider.minimumWidth,
         width: "100%",
-        gap: tokens59.dimension.value4,
-        opacity: blocked ? tokens59.states.opacity.disabled : 1
+        gap: tokens60.dimension.value4,
+        opacity: blocked ? tokens60.states.opacity.disabled : 1
       },
       children: [
         /* @__PURE__ */ jsxs44(
@@ -10134,7 +10246,7 @@ function RangeInput({
               flexDirection: "row",
               alignItems: "baseline",
               justifyContent: "space-between",
-              gap: tokens59.dimension.value12,
+              gap: tokens60.dimension.value12,
               minWidth: 0
             },
             children: [
@@ -10195,7 +10307,7 @@ function RangeInput({
                     {
                       style: {
                         height: geometry.track,
-                        borderRadius: tokens59.radius.radius9999,
+                        borderRadius: tokens60.radius.radius9999,
                         backgroundColor: colors.border
                       }
                     }
@@ -10210,7 +10322,7 @@ function RangeInput({
                     position: "absolute",
                     top: (targetSize - geometry.track) / 2,
                     height: geometry.track,
-                    borderRadius: tokens59.radius.radius9999,
+                    borderRadius: tokens60.radius.radius9999,
                     left: pct(values.length === 2 ? percent(values[0]) : 0),
                     width: pct(
                       percent(values[values.length - 1]) - (values.length === 2 ? percent(values[0]) : 0)
@@ -10286,14 +10398,14 @@ function RangeInput({
                       style: {
                         width: geometry.thumb,
                         height: geometry.thumb,
-                        borderRadius: tokens59.radius.radius9999,
-                        borderWidth: tokens59.border.controlWidth,
+                        borderRadius: tokens60.radius.radius9999,
+                        borderWidth: tokens60.border.controlWidth,
                         borderColor: !blocked && dragging === index ? colors.brandActive : !blocked && hovered === index ? colors.brandHover : colors.brand,
                         backgroundColor: colors.surface,
                         ...Platform28.OS === "web" && !blocked && focused === index ? {
                           outlineStyle: "solid",
-                          outlineWidth: tokens59.states.focus.width,
-                          outlineOffset: tokens59.states.focus.choiceOffset,
+                          outlineWidth: tokens60.states.focus.width,
+                          outlineOffset: tokens60.states.focus.choiceOffset,
                           outlineColor: colors.focusRing
                         } : {}
                       }
@@ -10319,7 +10431,7 @@ function KjunRangeSlider(props) {
 // packages/native/src/quantity-stepper.tsx
 import { useEffect as useEffect28, useRef as useRef35, useState as useState43 } from "react";
 import { Platform as Platform29, View as View53 } from "react-native";
-import { createNumberDomain, quantityKeyAction, tokens as tokens60 } from "@kjun-ui/tokens";
+import { createNumberDomain, quantityKeyAction, tokens as tokens61 } from "@kjun-ui/tokens";
 
 // shared/package-runtime/component-icons.ts
 import minus from "@kjun-ui/icons/icons/minus";
@@ -10333,9 +10445,9 @@ function KjunQuantityStepper({ value, min = 0, max, step = 1, precision = 0, dis
   const field = useKjunField();
   const invalid = error || !!(field == null ? void 0 : field.error);
   const labelledBy = !ariaLabel && (field == null ? void 0 : field.label) && !field.labelHidden ? field.id + "-label" : void 0;
-  const geometry2 = tokens60.extensions.compound;
-  const buttonStyle = { width: tokens60.input[size].height, paddingHorizontal: 0 };
-  const outer = tokens60.input[size].radius;
+  const geometry2 = tokens61.extensions.compound;
+  const buttonStyle = { width: tokens61.input[size].height, paddingHorizontal: 0 };
+  const outer = tokens61.input[size].radius;
   const decreaseStyle = { ...buttonStyle, borderRadius: 0, borderTopLeftRadius: outer, borderBottomLeftRadius: outer };
   const increaseStyle = { ...buttonStyle, borderRadius: 0, borderTopRightRadius: outer, borderBottomRightRadius: outer };
   const domain = createNumberDomain({ min, max, step, precision }), valid = domain.valid && domain.accepts(value), blocked = disabled || !valid;
@@ -10423,12 +10535,12 @@ function KjunQuantityStepper({ value, min = 0, max, step = 1, precision = 0, dis
       input.removeEventListener("compositionend", end);
     };
   }, []);
-  const surfaceBox = { position: "absolute", left: 0, right: 0, top: "50%", height: tokens60.input[size].height, marginTop: -tokens60.input[size].height / 2, borderRadius: surface.spec.radius };
+  const surfaceBox = { position: "absolute", left: 0, right: 0, top: "50%", height: tokens61.input[size].height, marginTop: -tokens61.input[size].height / 2, borderRadius: surface.spec.radius };
   const hug = Platform29.OS === "web" && !block ? { width: "fit-content" } : {};
   return /* @__PURE__ */ jsx62(IconFallbacks, { icons: componentIcons, children: /* @__PURE__ */ jsxs45(View53, { style: { flexDirection: "row", alignItems: "center", alignSelf: block ? "stretch" : "flex-start", maxWidth: "100%", borderRadius: surface.spec.radius, ...hug }, children: [
     /* @__PURE__ */ jsx62(View53, { pointerEvents: "none", "aria-hidden": true, style: { ...surfaceBox, backgroundColor: colors.inputBg } }),
     /* @__PURE__ */ jsx62(CompoundTarget, { square: true, children: /* @__PURE__ */ jsx62(KjunButton, { size, style: decreaseStyle, variant: "ghost", ariaLabel: m.decreaseQuantity, disabled: blocked || value <= min, onPress: () => move(-1), prefixIcon: "minus" }) }),
-    /* @__PURE__ */ jsx62(View53, { style: { flex: block ? 1 : void 0, width: block ? void 0 : geometry2.valueWidth, minWidth: 0, minHeight: finePointer() ? void 0 : tokens60.native.minimumTouchTarget, justifyContent: "center" }, ...fieldTarget(() => {
+    /* @__PURE__ */ jsx62(View53, { style: { flex: block ? 1 : void 0, width: block ? void 0 : geometry2.valueWidth, minWidth: 0, minHeight: finePointer() ? void 0 : tokens61.native.minimumTouchTarget, justifyContent: "center" }, ...fieldTarget(() => {
       var _a;
       return (_a = inputRef.current) == null ? void 0 : _a.focus();
     }, blocked), children: /* @__PURE__ */ jsx62(
@@ -10457,23 +10569,23 @@ function KjunQuantityStepper({ value, min = 0, max, step = 1, precision = 0, dis
         },
         onSubmitEditing: Platform29.OS === "web" ? void 0 : commit,
         ...Platform29.OS === "web" ? { "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, "aria-labelledby": labelledBy, "aria-describedby": field == null ? void 0 : field.describedBy, "aria-invalid": invalid || void 0, "aria-required": (field == null ? void 0 : field.required) || void 0 } : { onKeyPress: key },
-        style: { width: "100%", minWidth: 0, ...surface.style, borderRadius: 0, borderTopColor: "transparent", borderBottomColor: "transparent", borderLeftColor: "transparent", borderRightColor: "transparent", backgroundColor: !blocked && (surface.active || surface.hovered) ? colors.hover : "transparent", outlineWidth: 0, color: surface.ink, fontFamily, ...inputTypeStyle(size), textAlign: "center", paddingHorizontal: surface.spec.padding - tokens60.border.controlWidth, paddingVertical: 0 }
+        style: { width: "100%", minWidth: 0, ...surface.style, borderRadius: 0, borderTopColor: "transparent", borderBottomColor: "transparent", borderLeftColor: "transparent", borderRightColor: "transparent", backgroundColor: !blocked && (surface.active || surface.hovered) ? colors.hover : "transparent", outlineWidth: 0, color: surface.ink, fontFamily, ...inputTypeStyle(size), textAlign: "center", paddingHorizontal: surface.spec.padding - tokens61.border.controlWidth, paddingVertical: 0 }
       }
     ) }),
     /* @__PURE__ */ jsx62(CompoundTarget, { square: true, children: /* @__PURE__ */ jsx62(KjunButton, { size, style: increaseStyle, variant: "ghost", ariaLabel: m.increaseQuantity, disabled: blocked || max !== void 0 && value >= max, onPress: () => move(1), prefixIcon: "plus" }) }),
-    (invalid || surface.active) && /* @__PURE__ */ jsx62(View53, { pointerEvents: "none", "aria-hidden": true, style: { ...surfaceBox, borderWidth: invalid ? tokens60.border.controlWidth : tokens60.states.focus.width, borderColor: invalid ? colors.danger : colors.focusRing } })
+    (invalid || surface.active) && /* @__PURE__ */ jsx62(View53, { pointerEvents: "none", "aria-hidden": true, style: { ...surfaceBox, borderWidth: invalid ? tokens61.border.controlWidth : tokens61.states.focus.width, borderColor: invalid ? colors.danger : colors.focusRing } })
   ] }) });
 }
 
 // packages/native/src/time-picker.tsx
 import { Fragment as Fragment21, useEffect as useEffect29, useId as useId11, useMemo as useMemo4, useRef as useRef36, useState as useState44 } from "react";
 import { View as View54 } from "react-native";
-import { createTimeDomain, tokens as tokens61 } from "@kjun-ui/tokens";
+import { createTimeDomain, tokens as tokens62 } from "@kjun-ui/tokens";
 import { jsx as jsx63, jsxs as jsxs46 } from "react/jsx-runtime";
 function KjunTimePicker({ value, precision = "minute", min, max, minuteStep = 1, secondStep = 1, disabled = false, error = false, clearable = true, size = "md", ariaLabel, onValueChange, onChangeCommit }) {
   const m = useKjunMessages();
   ariaLabel != null ? ariaLabel : ariaLabel = m.time;
-  const geometry2 = tokens61.extensions.timePicker, spec = tokens61.input[size];
+  const geometry2 = tokens62.extensions.timePicker, spec = tokens62.input[size];
   const { colors } = useKjunStyles();
   const first = useRef36(null);
   const [focused, setFocused] = useState44(false), [opened, setOpened] = useState44(null);
@@ -10497,12 +10609,12 @@ function KjunTimePicker({ value, precision = "minute", min, max, minuteStep = 1,
         if (typeof next === "number") change(domain.select(value, index, next));
       }, onOpenChange: (open) => setOpened(open ? index : null), ariaLabel: ((field == null ? void 0 : field.label) || ariaLabel) + " " + label, placeholder: label, disabled: disabled || !valid, error, size, clearable: false, searchable: false }) }) }) })
     ] }, label)) }),
-    clearable && value !== null && /* @__PURE__ */ jsx63(View54, { style: { marginVertical: Math.min(0, (spec.height - tokens61.native.minimumTouchTarget) / 2) }, children: /* @__PURE__ */ jsx63(FieldClear, { size, label: m.clearValue(ariaLabel), disabled: disabled || !valid, onPress: () => {
+    clearable && value !== null && /* @__PURE__ */ jsx63(View54, { style: { marginVertical: Math.min(0, (spec.height - tokens62.native.minimumTouchTarget) / 2) }, children: /* @__PURE__ */ jsx63(FieldClear, { size, label: m.clearValue(ariaLabel), disabled: disabled || !valid, onPress: () => {
       var _a;
       change(null);
       (_a = first.current) == null ? void 0 : _a.focus();
     } }) }),
-    !!(error || !!(field == null ? void 0 : field.error) || focused || opened !== null) && /* @__PURE__ */ jsx63(View54, { pointerEvents: "none", "aria-hidden": true, style: { position: "absolute", inset: 0, borderRadius: spec.radius, borderWidth: error || !!(field == null ? void 0 : field.error) ? tokens61.border.controlWidth : tokens61.states.focus.width, borderColor: error || (field == null ? void 0 : field.error) ? colors.danger : colors.focusRing } })
+    !!(error || !!(field == null ? void 0 : field.error) || focused || opened !== null) && /* @__PURE__ */ jsx63(View54, { pointerEvents: "none", "aria-hidden": true, style: { position: "absolute", inset: 0, borderRadius: spec.radius, borderWidth: error || !!(field == null ? void 0 : field.error) ? tokens62.border.controlWidth : tokens62.states.focus.width, borderColor: error || (field == null ? void 0 : field.error) ? colors.danger : colors.focusRing } })
   ] });
 }
 export {
@@ -10551,6 +10663,7 @@ export {
   KjunInput,
   KjunKpiHero,
   KjunKpiRow,
+  KjunListItem,
   KjunListRow,
   KjunListSection,
   KjunListSkeleton,
@@ -10590,6 +10703,7 @@ export {
   KjunTimePicker,
   KjunTooltip,
   KjunTopNavigation,
+  createKjunFeedback,
   kjunMessagesEn,
   kjunMessagesKo,
   useKjunFeedback,