@kjun-ui/native 0.6.1 → 0.7.0

package/dist/index.cjs

@@ -6082,12 +6082,27 @@ function KjunScrollFade({ children }) {
 
 // packages/native/src/data-state.tsx
 var import_tokens35 = require("@kjun-ui/tokens");
-var import_react50 = require("react");
+var import_react51 = require("react");
 var import_react_native40 = require("react-native");
+
+// shared/package-runtime/use-loading-reveal.ts
+var import_react50 = require("react");
+function useLoadingReveal(active, delay = 0) {
+  const [revealed, setRevealed] = (0, import_react50.useState)(false);
+  (0, import_react50.useEffect)(() => {
+    setRevealed(false);
+    if (!active || delay <= 0) return;
+    const timer = setTimeout(() => setRevealed(true), delay);
+    return () => clearTimeout(timer);
+  }, [active, delay]);
+  return delay <= 0 || revealed;
+}
+
+// packages/native/src/data-state.tsx
 var import_jsx_runtime37 = require("react/jsx-runtime");
 function useQueryDisplay(props) {
   var _a;
-  const [state, setState] = (0, import_react50.useState)(() => (0, import_tokens35.initialQueryDisplay)(props));
+  const [state, setState] = (0, import_react51.useState)(() => (0, import_tokens35.initialQueryDisplay)(props));
   let next = state;
   if (state.queryKey !== ((_a = props.queryKey) != null ? _a : null) || state.resultKey !== props.resultKey || state.loading !== !!props.loading) {
     next = (0, import_tokens35.advanceQueryDisplay)(state, props);
@@ -6106,6 +6121,7 @@ function KjunDataState({
   emptyIcon,
   emptyActionText,
   loadingText = "\uB85C\uB529 \uC911...",
+  loadingDelay = 0,
   retryText = "\uB2E4\uC2DC \uC2DC\uB3C4",
   size = "md",
   skeleton = false,
@@ -6119,7 +6135,7 @@ function KjunDataState({
   onEmptyAction,
   ...query
 }) {
-  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 = import_tokens35.tokens.extensions.state.padding[size];
+  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 = import_tokens35.tokens.extensions.state.padding[size], revealed = useLoadingReveal(state.initialLoading, loadingDelay);
   const { colors } = useKjunStyles();
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
     import_react_native40.View,
@@ -6152,8 +6168,10 @@ function KjunDataState({
         state.initialLoading ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           import_react_native40.View,
           {
-            accessibilityLabel: loadingText,
-            style: { paddingVertical: loadingPadding === "none" ? 0 : padding },
+            accessibilityLabel: revealed ? loadingText : void 0,
+            "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__ */ (0, import_jsx_runtime37.jsx)(import_react_native40.View, { style: { gap: import_tokens35.tokens.dimension.value12 }, children: Array.from({ length: skeletonCount }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(KjunSkeleton, { type: skeletonType }, i)) }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_react_native40.View, { style: { alignItems: "center", gap: import_tokens35.tokens.dimension.value12 }, children: [
               /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(KjunSpinner, { size: "md" }),
               /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(KText, { style: { ...typeStyle("body"), color: colors.textSecondary, textAlign: "center", maxWidth: "100%" }, children: loadingText })
@@ -6187,7 +6205,7 @@ function BoundaryDescription() {
   const { colors } = useKjunStyles();
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(KText, { style: { ...typeStyle({ ...import_tokens35.tokens.typography.caption, fontSizePx: import_tokens35.tokens.extensions.state.descriptionSize }), color: colors.textSecondary, textAlign: "center" }, children: "\uB2E4\uC2DC \uC2DC\uB3C4\uD558\uBA74 \uBB38\uC81C\uAC00 \uD574\uACB0\uB420 \uC218 \uC788\uC2B5\uB2C8\uB2E4." });
 }
-var KjunErrorBoundary = class extends import_react50.Component {
+var KjunErrorBoundary = class extends import_react51.Component {
   constructor() {
     super(...arguments);
     this.state = { error: false };
@@ -6234,7 +6252,7 @@ var KjunErrorBoundary = class extends import_react50.Component {
 
 // packages/native/src/skeletons.tsx
 var import_tokens39 = require("@kjun-ui/tokens");
-var import_react52 = require("react");
+var import_react53 = require("react");
 var import_react_native42 = require("react-native");
 var import_react_native_svg5 = __toESM(require("react-native-svg"), 1);
 
@@ -6263,9 +6281,9 @@ function nativeMarketLayout(columns, showActions, containerWidth) {
 
 // packages/native/src/market-layout.ts
 var import_tokens37 = require("@kjun-ui/tokens");
-var import_react51 = require("react");
+var import_react52 = require("react");
 function useMarketLayout(columns, showActions) {
-  const [containerWidth, setContainerWidth] = (0, import_react51.useState)(0);
+  const [containerWidth, setContainerWidth] = (0, import_react52.useState)(0);
   const onLayout = (event) => setContainerWidth(event.nativeEvent.layout.width);
   return { ...nativeMarketLayout(columns, showActions, containerWidth), onLayout };
 }
@@ -6400,8 +6418,8 @@ function KjunChartSkeleton({
   kind = "line",
   height = import_tokens39.tokens.extensions.chartSkeleton.height
 }) {
-  const { colors } = useKjunStyles(), reduced = useReducedMotion(), opacity = (0, import_react52.useRef)(new import_react_native42.Animated.Value(1)).current;
-  (0, import_react52.useEffect)(() => {
+  const { colors } = useKjunStyles(), reduced = useReducedMotion(), opacity = (0, import_react53.useRef)(new import_react_native42.Animated.Value(1)).current;
+  (0, import_react53.useEffect)(() => {
     if (reduced) return;
     const loop = import_react_native42.Animated.loop(
       import_react_native42.Animated.sequence([
@@ -6481,7 +6499,7 @@ function KjunChartSkeleton({
                   opacity: (row + col + 2) % 3 === 0 ? 0.55 : 1
                 },
                 col
-              )) }, row)) : (kind === "bar" || kind === "candle") && [60, 100, 85, 140, 110, 165, 180].map((h, i) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_react52.Fragment, { children: [
+              )) }, row)) : (kind === "bar" || kind === "candle") && [60, 100, 85, 140, 110, 165, 180].map((h, i) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_react53.Fragment, { children: [
                 kind === "candle" && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
                   import_react_native_svg5.Path,
                   {
@@ -6514,7 +6532,7 @@ function KjunChartSkeleton({
 
 // packages/native/src/financial-display.tsx
 var import_tokens42 = require("@kjun-ui/tokens");
-var import_react55 = require("react");
+var import_react56 = require("react");
 var import_react_native44 = require("react-native");
 var import_react_native_svg6 = __toESM(require("react-native-svg"), 1);
 
@@ -6522,7 +6540,7 @@ var import_react_native_svg6 = __toESM(require("react-native-svg"), 1);
 var import_tokens41 = require("@kjun-ui/tokens");
 
 // shared/package-runtime/use-number-motion.ts
-var import_react53 = require("react");
+var import_react54 = require("react");
 
 // shared/package-runtime/number-motion.ts
 var import_tokens40 = require("@kjun-ui/tokens");
@@ -6568,14 +6586,14 @@ function createNumberMotion(apply) {
 
 // shared/package-runtime/use-number-motion.ts
 function useNumberMotion(value, animated, fromPrevious, reduced) {
-  const [display, setDisplay] = (0, import_react53.useState)(typeof value === "string" || fromPrevious || !animated || reduced ? value : 0);
-  const motion = (0, import_react53.useRef)(null);
+  const [display, setDisplay] = (0, import_react54.useState)(typeof value === "string" || fromPrevious || !animated || reduced ? value : 0);
+  const motion = (0, import_react54.useRef)(null);
   if (!motion.current) motion.current = createNumberMotion(setDisplay);
-  (0, import_react53.useLayoutEffect)(() => {
+  (0, import_react54.useLayoutEffect)(() => {
     if (!motion.current) motion.current = createNumberMotion(setDisplay);
     motion.current.update(value, animated, fromPrevious, reduced);
   }, [value, animated, fromPrevious, reduced]);
-  (0, import_react53.useLayoutEffect)(() => () => {
+  (0, import_react54.useLayoutEffect)(() => () => {
     var _a;
     (_a = motion.current) == null ? void 0 : _a.cancel();
     motion.current = null;
@@ -6584,7 +6602,7 @@ function useNumberMotion(value, animated, fromPrevious, reduced) {
 }
 
 // packages/native/src/number-display.tsx
-var import_react54 = require("react");
+var import_react55 = require("react");
 var import_react_native43 = require("react-native");
 
 // shared/package-runtime/relative-time.ts
@@ -6618,7 +6636,7 @@ var format = (value, decimals = 0) => new Intl.NumberFormat(void 0, {
 function useCountUp(value, animated, fromPrevious) {
   return useNumberMotion(value, animated, fromPrevious, useReducedMotion());
 }
-var MarketQuoteTypeContext = (0, import_react54.createContext)(null);
+var MarketQuoteTypeContext = (0, import_react55.createContext)(null);
 function KjunAnimatedNumber({
   value,
   decimals = 0,
@@ -6678,7 +6696,7 @@ function KjunPriceCell({
   fetchedAt,
   fromPrevious = true
 }) {
-  const { colors } = useKjunStyles(), quoteType = (0, import_react54.useContext)(MarketQuoteTypeContext);
+  const { colors } = useKjunStyles(), quoteType = (0, import_react55.useContext)(MarketQuoteTypeContext);
   return value == null ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(KjunSkeleton, { type: "block", height: import_tokens41.tokens.extensions.financial.priceSkeletonHeight, width: import_tokens41.tokens.extensions.financial.priceSkeletonWidth }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react_native43.View, { style: { flexDirection: "row", alignItems: "center", gap: import_tokens41.tokens.extensions.financial.affixGap }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       import_react_native43.View,
@@ -6712,7 +6730,7 @@ function KjunSignedValue({
   showFreshness = true,
   formatter
 }) {
-  const { colors, domainColors, numericFontFamily, fontFamily } = useKjunStyles(), quoteType = (0, import_react54.useContext)(MarketQuoteTypeContext), n = finiteNumber(value), role = n === null || n === 0 ? "priceNeutral" : n > 0 ? "priceUp" : "priceDown", color = loading || n === null ? colors.textSecondary : stale ? colors.textTertiary : domainColor(domainColors, role);
+  const { colors, domainColors, numericFontFamily, fontFamily } = useKjunStyles(), quoteType = (0, import_react55.useContext)(MarketQuoteTypeContext), n = finiteNumber(value), role = n === null || n === 0 ? "priceNeutral" : n > 0 ? "priceUp" : "priceDown", color = loading || n === null ? colors.textSecondary : stale ? colors.textTertiary : domainColor(domainColors, role);
   const display = n === null ? "\u2014" : formatter ? formatter(n) : prefix + (showSign && n > 0 ? "+" : "") + format(kind === "percent" && !isRaw ? n * 100 : n, decimals) + (kind === "percent" ? "%" : "") + suffix;
   return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
     import_react_native43.View,
@@ -6751,6 +6769,7 @@ function KjunSignedValue({
 
 // packages/native/src/financial-display.tsx
 var import_jsx_runtime41 = require("react/jsx-runtime");
+var deviationFill = { neutral: 1, low: import_tokens42.tokens.states.opacity.deviationLow, medium: import_tokens42.tokens.states.opacity.deviationMedium, strong: import_tokens42.tokens.states.opacity.deviationStrong };
 function KjunDeviation({
   value,
   variant = "pill",
@@ -6761,7 +6780,7 @@ function KjunDeviation({
   const { colors, domainColors, numericFontFamily, fontFamily } = useKjunStyles(), n = finiteNumber(value);
   if (n === null)
     return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(KText, { style: { color: colors.textDisabled }, children: "-" });
-  const abs = Math.abs(n), signal = abs >= signalThreshold, neutral = abs < 0.1, color = neutral ? colors.textSecondary : domainColor(domainColors, n > 0 ? "priceUp" : "priceDown"), label = formatter ? formatter(n) : (n > 0 ? "+" : "") + format(n, decimals) + "%";
+  const abs = Math.abs(n), signal = abs >= signalThreshold, level = (0, import_tokens42.deviationLevel)(n), neutral = level === "neutral", color = neutral ? colors.textSecondary : domainColor(domainColors, n > 0 ? "priceUp" : "priceDown"), label = formatter ? formatter(n) : (n > 0 ? "+" : "") + format(n, decimals) + "%";
   if (variant === "badge")
     return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
       import_react_native44.View,
@@ -6830,7 +6849,7 @@ function KjunDeviation({
               inset: 0,
               borderRadius: import_tokens42.tokens.extensions.financial.cellRadius,
               backgroundColor: neutral ? colors.secondary : color,
-              opacity: neutral ? 1 : abs < 0.5 ? 0.08 : abs < 1 ? 0.14 : 0.22
+              opacity: deviationFill[level]
             }
           }
         ),
@@ -6843,7 +6862,7 @@ function KjunDeviation({
               fontVariant: ["tabular-nums"],
               ...typeStyle("body"),
               // Like Web: control weight, stronger once the deviation reaches 1%.
-              fontWeight: abs >= 1 ? typeStyle("numberLg").fontWeight : typeStyle("control").fontWeight
+              fontWeight: level === "strong" ? typeStyle("numberLg").fontWeight : typeStyle("control").fontWeight
             },
             children: label
           }
@@ -7005,7 +7024,7 @@ function KjunSparkline({
   stretch = false,
   ariaLabel
 }) {
-  const { colors, domainColors } = useKjunStyles(), id = "kjun-" + (0, import_react55.useId)().replace(/:/g, ""), values = data.filter(Number.isFinite), min = Math.min(...values), max = Math.max(...values), range = max - min || 1, points = values.map(
+  const { colors, domainColors } = useKjunStyles(), id = "kjun-" + (0, import_react56.useId)().replace(/:/g, ""), values = data.filter(Number.isFinite), min = Math.min(...values), max = Math.max(...values), range = max - min || 1, points = values.map(
     (v, i) => `${2 + i / Math.max(1, values.length - 1) * (width - 4)},${2 + height - 4 - (v - min) / range * (height - 4)}`
   ).join(" "), change = values.length > 1 ? values[values.length - 1] - values[0] : 0, line = color || (change === 0 ? colors.textTertiary : semantic === "status" ? change > 0 ? colors.success : colors.danger : domainColor(domainColors, change > 0 ? "priceUp" : "priceDown"));
   return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
@@ -7051,7 +7070,7 @@ function KjunSparkline({
 
 // shared/package-runtime/table.ts
 var import_tokens43 = require("@kjun-ui/tokens");
-var import_react56 = require("react");
+var import_react57 = require("react");
 
 // shared/package-runtime/table-model.ts
 function getValue(row, key) {
@@ -7095,11 +7114,11 @@ function useTableModel(props) {
     expandSingle = false,
     onExpandedRowsChange
   } = props;
-  const [internalSort, setSort] = (0, import_react56.useState)({
+  const [internalSort, setSort] = (0, import_react57.useState)({
     key: "",
     order: "asc"
-  }), [internalExpanded, setExpanded] = (0, import_react56.useState)([]), [search, setSearch] = (0, import_react56.useState)(""), timer = (0, import_react56.useRef)(void 0);
-  (0, import_react56.useEffect)(() => () => clearTimeout(timer.current), []);
+  }), [internalExpanded, setExpanded] = (0, import_react57.useState)([]), [search, setSearch] = (0, import_react57.useState)(""), timer = (0, import_react57.useRef)(void 0);
+  (0, import_react57.useEffect)(() => () => clearTimeout(timer.current), []);
   const sort = props.sort === void 0 ? internalSort : (_a = props.sort) != null ? _a : { key: "", order: "asc" };
   const rows = sortTableRows(data, sort, { sortable, sortMode });
   const key = (row, index = 0) => tableRowKey(row, rowKey, index);
@@ -7253,19 +7272,19 @@ function TableToolbar({
 
 // packages/native/src/table-grid.tsx
 var import_tokens45 = require("@kjun-ui/tokens");
-var import_react57 = require("react");
+var import_react58 = require("react");
 var import_react_native_svg7 = __toESM(require("react-native-svg"), 1);
 var import_react_native46 = require("react-native");
 var import_jsx_runtime43 = require("react/jsx-runtime");
-function TableGrid({ initialLoading, skeletonRows, state, onRowClick, selectable, checkbox, cell, expandable, expand, renderExpand, emptyContent, emptyText, visible, maxHeight, stickyHeader, sortable, compact, striped, hoverable }) {
+function TableGrid({ initialLoading, skeletonRows, skeletonHidden, state, onRowClick, selectable, checkbox, cell, expandable, expand, renderExpand, emptyContent, emptyText, visible, maxHeight, stickyHeader, sortable, compact, striped, hoverable }) {
   const { colors } = useKjunStyles();
   const geometry2 = import_tokens45.tokens.table;
-  const [scroll, setScroll] = (0, import_react57.useState)({ viewport: 0, x: 0 }), fadeId = "kjun-table-fade-" + (0, import_react57.useId)().replace(/[^a-z0-9]/gi, "");
+  const [scroll, setScroll] = (0, import_react58.useState)({ viewport: 0, x: 0 }), fadeId = "kjun-table-fade-" + (0, import_react58.useId)().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;
   const totalWidth = visible.reduce((sum, col) => sum + width(col), 0) + (selectable ? geometry2.actionColumnWidth : 0) + (expandable ? geometry2.actionColumnWidth : 0);
   const fade = totalWidth - scroll.viewport - scroll.x > 1;
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_react_native46.View, { style: { position: "relative", minWidth: 0 }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_react_native46.View, { style: { position: "relative", minWidth: 0, opacity: skeletonHidden ? 0 : void 0 }, "aria-hidden": skeletonHidden || void 0, children: [
     /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       import_react_native46.ScrollView,
       {
@@ -7374,7 +7393,7 @@ function TableGrid({ initialLoading, skeletonRows, state, onRowClick, selectable
                 ))
               ] }, i)) : !state.rows.length ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_native46.View, { style: { paddingVertical: geometry2.emptyPadding.y, paddingHorizontal: geometry2.emptyPadding.x, alignItems: "center" }, children: content(emptyContent || emptyText, {
                 color: colors.textSecondary
-              }) }) : state.rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_react57.Fragment, { children: [
+              }) }) : state.rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_react58.Fragment, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
                   AccessiblePressable,
                   {
@@ -7463,6 +7482,7 @@ var import_jsx_runtime44 = require("react/jsx-runtime");
 function TableCards({
   initialLoading,
   skeletonRows,
+  skeletonHidden,
   state,
   onRowClick,
   selectable,
@@ -7477,149 +7497,156 @@ function TableCards({
 }) {
   const { colors } = useKjunStyles();
   const { title, subtitle, badges, inline, sections, actions, columnsForSection } = layout;
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react_native47.View, { style: { gap: import_tokens46.tokens.extensions.tableCard.gap, padding: import_tokens46.tokens.extensions.tableCard.listPadding }, children: [
-    initialLoading ? Array.from({ length: skeletonRows }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(KjunSkeleton, { type: "card" }, i)) : state.rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
-      AccessiblePressable,
-      {
-        accessible: false,
-        onPress: () => onRowClick == null ? void 0 : onRowClick(row, i),
-        style: ({ pressed }) => ({
-          padding: import_tokens46.tokens.extensions.tableCard.padding,
-          borderWidth: import_tokens46.tokens.border.defaultWidth,
-          borderColor: colors.border,
-          borderRadius: import_tokens46.tokens.extensions.tableCard.radius,
-          backgroundColor: pressed ? colors.hover : colors.background
-        }),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
-            import_react_native47.View,
-            {
-              style: {
-                flexDirection: "row",
-                alignItems: "center",
-                gap: import_tokens46.tokens.extensions.tableCard.gap,
-                marginBottom: import_tokens46.tokens.dimension.value8
-              },
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+    import_react_native47.View,
+    {
+      style: { gap: import_tokens46.tokens.extensions.tableCard.gap, padding: import_tokens46.tokens.extensions.tableCard.listPadding, opacity: skeletonHidden ? 0 : void 0 },
+      "aria-hidden": skeletonHidden || void 0,
+      children: [
+        initialLoading ? Array.from({ length: skeletonRows }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(KjunSkeleton, { type: "card" }, i)) : state.rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+          AccessiblePressable,
+          {
+            accessible: false,
+            onPress: () => onRowClick == null ? void 0 : onRowClick(row, i),
+            style: ({ pressed }) => ({
+              padding: import_tokens46.tokens.extensions.tableCard.padding,
+              borderWidth: import_tokens46.tokens.border.defaultWidth,
+              borderColor: colors.border,
+              borderRadius: import_tokens46.tokens.extensions.tableCard.radius,
+              backgroundColor: pressed ? colors.hover : colors.background
+            }),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+                import_react_native47.View,
+                {
+                  style: {
+                    flexDirection: "row",
+                    alignItems: "center",
+                    gap: import_tokens46.tokens.extensions.tableCard.gap,
+                    marginBottom: import_tokens46.tokens.dimension.value8
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+                      import_react_native47.View,
+                      {
+                        style: {
+                          flexDirection: "row",
+                          flex: 1,
+                          alignItems: "center",
+                          gap: import_tokens46.tokens.extensions.tableCard.gap,
+                          minWidth: 0
+                        },
+                        children: [
+                          selectable && checkbox(row, i),
+                          title && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_native47.View, { style: { flex: 1, minWidth: 0 }, children: cell(title, row, i, "title") })
+                        ]
+                      }
+                    ),
+                    badges.length ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_native47.View, { style: { flexDirection: "row", gap: import_tokens46.tokens.extensions.tableCard.fieldGap }, children: badges.map((col) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_native47.View, { children: cell(col, row, i) }, col.key)) }) : subtitle ? cell(subtitle, row, i) : null,
+                    inline.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_native47.View, { style: { flexDirection: "row", gap: import_tokens46.tokens.extensions.tableCard.fieldGap }, children: inline.map((col) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_native47.View, { children: cell(col, row, i) }, col.key)) })
+                  ]
+                }
+              ),
+              sections.map((section, index) => {
+                const cols = columnsForSection(row, section);
+                return cols.length ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
                   import_react_native47.View,
                   {
                     style: {
-                      flexDirection: "row",
-                      flex: 1,
-                      alignItems: "center",
-                      gap: import_tokens46.tokens.extensions.tableCard.gap,
-                      minWidth: 0
+                      borderTopWidth: index ? import_tokens46.tokens.border.defaultWidth : 0,
+                      borderTopColor: colors.border,
+                      paddingTop: index ? import_tokens46.tokens.dimension.value12 : 0,
+                      marginTop: index ? import_tokens46.tokens.dimension.value12 : 0
                     },
                     children: [
-                      selectable && checkbox(row, i),
-                      title && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_native47.View, { style: { flex: 1, minWidth: 0 }, children: cell(title, row, i, "title") })
-                    ]
-                  }
-                ),
-                badges.length ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_native47.View, { style: { flexDirection: "row", gap: import_tokens46.tokens.extensions.tableCard.fieldGap }, children: badges.map((col) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_native47.View, { children: cell(col, row, i) }, col.key)) }) : subtitle ? cell(subtitle, row, i) : null,
-                inline.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_native47.View, { style: { flexDirection: "row", gap: import_tokens46.tokens.extensions.tableCard.fieldGap }, children: inline.map((col) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_native47.View, { children: cell(col, row, i) }, col.key)) })
-              ]
-            }
-          ),
-          sections.map((section, index) => {
-            const cols = columnsForSection(row, section);
-            return cols.length ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
-              import_react_native47.View,
-              {
-                style: {
-                  borderTopWidth: index ? import_tokens46.tokens.border.defaultWidth : 0,
-                  borderTopColor: colors.border,
-                  paddingTop: index ? import_tokens46.tokens.dimension.value12 : 0,
-                  marginTop: index ? import_tokens46.tokens.dimension.value12 : 0
-                },
-                children: [
-                  section.label && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-                    KText,
-                    {
-                      style: {
-                        ...typeStyle("controlSmall"),
-                        color: colors.textTertiary,
-                        marginBottom: import_tokens46.tokens.dimension.value6
-                      },
-                      children: section.label
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-                    import_react_native47.View,
-                    {
-                      style: {
-                        flexDirection: "row",
-                        flexWrap: "wrap",
-                        gap: section.layout === "metrics" ? import_tokens46.tokens.extensions.tableCard.gap : import_tokens46.tokens.extensions.tableCard.metricGap
-                      },
-                      children: cols.map((col) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+                      section.label && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                        KText,
+                        {
+                          style: {
+                            ...typeStyle("controlSmall"),
+                            color: colors.textTertiary,
+                            marginBottom: import_tokens46.tokens.dimension.value6
+                          },
+                          children: section.label
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
                         import_react_native47.View,
                         {
                           style: {
-                            flexBasis: col.fullWidthInCard || section.layout === "stack" ? "100%" : section.layout === "metrics" ? "30%" : "47%",
-                            flexGrow: 1,
-                            minWidth: 0,
-                            gap: import_tokens46.tokens.extensions.tableCard.valueGap
+                            flexDirection: "row",
+                            flexWrap: "wrap",
+                            gap: section.layout === "metrics" ? import_tokens46.tokens.extensions.tableCard.gap : import_tokens46.tokens.extensions.tableCard.metricGap
                           },
-                          children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-                              KText,
-                              {
-                                style: {
-                                  ...typeStyle("meta"),
-                                  color: colors.textTertiary,
-                                  textAlign: section.labelAlign
-                                },
-                                children: col.label
-                              }
-                            ),
-                            cell(col, row, i)
-                          ]
-                        },
-                        col.key
-                      ))
-                    }
-                  )
-                ]
-              },
-              section.key || index
-            ) : null;
-          }),
-          expandable && expand(row, i),
-          expandable && state.expanded.includes(state.key(row, i)) && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-            import_react_native47.View,
-            {
-              style: {
-                borderTopWidth: import_tokens46.tokens.border.defaultWidth,
-                borderTopColor: colors.border,
-                paddingTop: import_tokens46.tokens.dimension.value8,
-                marginTop: import_tokens46.tokens.dimension.value4
-              },
-              children: content(renderExpand == null ? void 0 : renderExpand(row, i))
-            }
-          ),
-          actions && !actions.inlineInCard && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-            import_react_native47.View,
-            {
-              style: {
-                borderTopWidth: import_tokens46.tokens.border.defaultWidth,
-                borderTopColor: colors.border,
-                paddingTop: import_tokens46.tokens.dimension.value8,
-                marginTop: import_tokens46.tokens.dimension.value8,
-                alignItems: "flex-end"
-              },
-              children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_native47.View, { style: { alignSelf: "flex-end" }, children: cell(actions, row, i) })
-            }
-          )
-        ]
-      },
-      state.key(row, i)
-    )),
-    !initialLoading && !state.rows.length && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_native47.View, { style: { padding: import_tokens46.tokens.extensions.tableCard.emptyPadding, alignItems: "center" }, children: content(emptyContent || emptyText, {
-      color: colors.textTertiary
-    }) })
-  ] });
+                          children: cols.map((col) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+                            import_react_native47.View,
+                            {
+                              style: {
+                                flexBasis: col.fullWidthInCard || section.layout === "stack" ? "100%" : section.layout === "metrics" ? "30%" : "47%",
+                                flexGrow: 1,
+                                minWidth: 0,
+                                gap: import_tokens46.tokens.extensions.tableCard.valueGap
+                              },
+                              children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                                  KText,
+                                  {
+                                    style: {
+                                      ...typeStyle("meta"),
+                                      color: colors.textTertiary,
+                                      textAlign: section.labelAlign
+                                    },
+                                    children: col.label
+                                  }
+                                ),
+                                cell(col, row, i)
+                              ]
+                            },
+                            col.key
+                          ))
+                        }
+                      )
+                    ]
+                  },
+                  section.key || index
+                ) : null;
+              }),
+              expandable && expand(row, i),
+              expandable && state.expanded.includes(state.key(row, i)) && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                import_react_native47.View,
+                {
+                  style: {
+                    borderTopWidth: import_tokens46.tokens.border.defaultWidth,
+                    borderTopColor: colors.border,
+                    paddingTop: import_tokens46.tokens.dimension.value8,
+                    marginTop: import_tokens46.tokens.dimension.value4
+                  },
+                  children: content(renderExpand == null ? void 0 : renderExpand(row, i))
+                }
+              ),
+              actions && !actions.inlineInCard && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+                import_react_native47.View,
+                {
+                  style: {
+                    borderTopWidth: import_tokens46.tokens.border.defaultWidth,
+                    borderTopColor: colors.border,
+                    paddingTop: import_tokens46.tokens.dimension.value8,
+                    marginTop: import_tokens46.tokens.dimension.value8,
+                    alignItems: "flex-end"
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_native47.View, { style: { alignSelf: "flex-end" }, children: cell(actions, row, i) })
+                }
+              )
+            ]
+          },
+          state.key(row, i)
+        )),
+        !initialLoading && !state.rows.length && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_native47.View, { style: { padding: import_tokens46.tokens.extensions.tableCard.emptyPadding, alignItems: "center" }, children: content(emptyContent || emptyText, {
+          color: colors.textTertiary
+        }) })
+      ]
+    }
+  );
 }
 
 // packages/native/src/table-view.tsx
@@ -7627,6 +7654,9 @@ var import_jsx_runtime45 = require("react/jsx-runtime");
 function KjunTable(props) {
   const {
     skeletonRows = 8,
+    skeleton = true,
+    loadingText = "\uB85C\uB529 \uC911...",
+    loadingDelay = 0,
     emptyText = "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4",
     hoverable = true,
     searchable = false,
@@ -7647,7 +7677,7 @@ function KjunTable(props) {
     onRowClick,
     onRetry
   } = props;
-  const { colors, domainColors } = useKjunStyles(), state = useTableModel2(props), query = useQueryDisplay(props), mobile = (0, import_react_native48.useWindowDimensions)().width < import_tokens47.tokens.table.mobileBreakpoint;
+  const { colors, domainColors } = useKjunStyles(), state = useTableModel2(props), query = useQueryDisplay(props), revealed = useLoadingReveal(query.initialLoading, skeleton ? loadingDelay : 0), mobile = (0, import_react_native48.useWindowDimensions)().width < import_tokens47.tokens.table.mobileBreakpoint;
   const layout = tablePresentation(props, mobile);
   const { card, visible } = layout;
   const cell = (col, row, index, role) => {
@@ -7726,8 +7756,11 @@ function KjunTable(props) {
             refreshing: query.queryRefreshing,
             loadingPadding: "none",
             onRetry,
+            loading: skeleton ? void 0 : props.loading,
+            loadingText,
+            loadingDelay: skeleton ? 0 : loadingDelay,
             children: [
-              card ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TableCards, { ...{ initialLoading: query.initialLoading, skeletonRows, state, onRowClick, selectable, checkbox, cell, expandable, expand, renderExpand, emptyContent, emptyText, layout } }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TableGrid, { ...{ initialLoading: query.initialLoading, skeletonRows, state, onRowClick, selectable, checkbox, cell, expandable, expand, renderExpand, emptyContent, emptyText, visible, maxHeight, stickyHeader, compact, striped, hoverable }, sortable: props.sortable }),
+              card ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TableCards, { ...{ initialLoading: query.initialLoading, skeletonRows, skeletonHidden: query.initialLoading && !revealed, state, onRowClick, selectable, checkbox, cell, expandable, expand, renderExpand, emptyContent, emptyText, layout } }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TableGrid, { ...{ initialLoading: query.initialLoading, skeletonRows, skeletonHidden: query.initialLoading && !revealed, state, onRowClick, selectable, checkbox, cell, expandable, expand, renderExpand, emptyContent, emptyText, visible, maxHeight, stickyHeader, compact, striped, hoverable }, sortable: props.sortable }),
               pagination && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
                 KjunPagination,
                 {
@@ -7785,12 +7818,13 @@ function KjunKpiHero(props) {
     secondary = [],
     animated = true,
     size = "md",
+    surface = "card",
     aside,
     formatter,
     deltaFormatter,
     renderSecondary
   } = props;
-  const { colors, domainColors, numericFontFamily, fontFamily } = useKjunStyles(), mobile = (0, import_react_native50.useWindowDimensions)().width <= import_tokens48.tokens.responsive.kpiHero, small = size === "sm", numberRole = small ? "displaySm" : mobile ? "displayMd" : "displayLg", font = typeStyle(numberRole).fontSize, unitStyle = typeStyle(small ? "numberSm" : mobile ? "numberMd" : "numberLg");
+  const { colors, domainColors, numericFontFamily, fontFamily } = useKjunStyles(), windowWidth = (0, import_react_native50.useWindowDimensions)().width, mobile = windowWidth <= import_tokens48.tokens.responsive.kpiHero, small = size === "sm", numberRole = small ? "displaySm" : mobile ? "displayMd" : "displayLg", font = typeStyle(numberRole).fontSize, unitStyle = typeStyle(small ? "numberSm" : mobile ? "numberMd" : "numberLg");
   const geometry2 = import_tokens48.tokens.extensions.kpiHero;
   const spec = small ? geometry2.sm : mobile ? geometry2.mobile : geometry2.md;
   const numeric = {
@@ -7820,10 +7854,13 @@ function KjunKpiHero(props) {
     {
       accessibilityState: { busy: loading },
       style: {
-        paddingVertical: spec.paddingY,
-        paddingHorizontal: spec.paddingX,
-        backgroundColor: colors.surface,
-        borderRadius: geometry2.radius
+        // surface="none" sits inside the app's own card or list, so it drops its own card box.
+        ...surface === "none" ? {} : {
+          paddingVertical: spec.paddingY,
+          paddingHorizontal: spec.paddingX,
+          backgroundColor: colors.surface,
+          borderRadius: geometry2.radius
+        }
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
@@ -7906,70 +7943,75 @@ function KjunKpiHero(props) {
               borderTopWidth: import_tokens48.tokens.border.defaultWidth,
               borderTopColor: colors.border
             },
-            children: secondary.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
-              import_react_native50.View,
-              {
-                style: mobile && !small ? {
-                  flex: 1,
-                  minWidth: 0,
-                  paddingLeft: i ? geometry2.itemPadding : 0,
-                  paddingRight: i === secondary.length - 1 ? 0 : geometry2.itemPadding,
-                  borderLeftWidth: i ? import_tokens48.tokens.border.defaultWidth : 0,
-                  borderLeftColor: colors.border
-                } : { minWidth: 0, maxWidth: "100%", flexShrink: 1 },
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-                    KText,
-                    {
-                      style: {
-                        color: colors.textTertiary,
-                        ...typeStyle("caption"),
-                        marginBottom: spec.secondaryLabelGap
-                      },
-                      children: item.label
-                    }
-                  ),
-                  loading ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-                    KjunSkeleton,
-                    {
-                      type: "block",
-                      height: typeStyle("numberMd").lineHeight,
-                      width: geometry2.secondarySkeletonWidth
-                    }
-                  ) : (renderSecondary == null ? void 0 : renderSecondary(item, i)) || /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-                    KpiNumberLine,
-                    {
-                      prefix: item.prefix,
-                      suffix: item.suffix,
-                      prefixGap: geometry2.secondaryAffixGap,
-                      suffixGap: geometry2.secondaryAffixGap,
-                      unitStyle: typeStyle("caption"),
-                      style: { ...numeric, ...typeStyle("numberMd"), color: item.valueColor || (item.semantic === "price" && Number(item.value) !== 0 ? direction(Number(item.value)) : colors.text) },
-                      children: kpiFormat(item)
-                    }
-                  ),
-                  item.desc && (loading ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-                    KjunSkeleton,
-                    {
-                      type: "block",
-                      width: geometry2.descriptionSkeletonWidth,
-                      height: typeStyle("caption").lineHeight
-                    }
-                  ) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-                    KText,
-                    {
-                      style: {
-                        ...typeStyle("caption"),
-                        marginTop: small ? geometry2.sm.descriptionGap : geometry2.md.descriptionGap,
-                        color: item.descColor || colors.textTertiary
-                      },
-                      children: item.desc
-                    }
-                  ))
-                ]
-              },
-              i
-            ))
+            children: secondary.map((item, i) => {
+              const columns = mobile && !small && windowWidth <= import_tokens48.tokens.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__ */ (0, import_jsx_runtime47.jsxs)(
+                import_react_native50.View,
+                {
+                  style: mobile && !small ? {
+                    ...columns ? { width: `${100 / columns}%`, marginTop: i >= columns ? spec.secondaryPadding : 0 } : { flex: 1 },
+                    minWidth: 0,
+                    paddingLeft: first ? 0 : geometry2.itemPadding,
+                    paddingRight: last ? 0 : geometry2.itemPadding,
+                    borderLeftWidth: first ? 0 : import_tokens48.tokens.border.defaultWidth,
+                    borderLeftColor: colors.border
+                  } : { minWidth: 0, maxWidth: "100%", flexShrink: 1 },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                      KText,
+                      {
+                        style: {
+                          color: colors.textTertiary,
+                          ...typeStyle("caption"),
+                          marginBottom: spec.secondaryLabelGap
+                        },
+                        children: item.label
+                      }
+                    ),
+                    loading ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                      KjunSkeleton,
+                      {
+                        type: "block",
+                        height: typeStyle("numberMd").lineHeight,
+                        width: geometry2.secondarySkeletonWidth
+                      }
+                    ) : (renderSecondary == null ? void 0 : renderSecondary(item, i)) || /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                      KpiNumberLine,
+                      {
+                        prefix: item.prefix,
+                        suffix: item.suffix,
+                        prefixGap: geometry2.secondaryAffixGap,
+                        suffixGap: geometry2.secondaryAffixGap,
+                        unitStyle: typeStyle("caption"),
+                        style: { ...numeric, ...typeStyle("numberMd"), color: item.valueColor || (item.semantic === "price" && Number(item.value) !== 0 ? direction(Number(item.value)) : colors.text) },
+                        children: kpiFormat(item)
+                      }
+                    ),
+                    item.desc && (loading ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                      KjunSkeleton,
+                      {
+                        type: "block",
+                        width: geometry2.descriptionSkeletonWidth,
+                        height: typeStyle("caption").lineHeight
+                      }
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                      KText,
+                      {
+                        style: {
+                          ...typeStyle("caption"),
+                          marginTop: small ? geometry2.sm.descriptionGap : geometry2.md.descriptionGap,
+                          color: item.descColor || colors.textTertiary
+                        },
+                        children: item.desc
+                      }
+                    ))
+                  ]
+                },
+                i
+              );
+            })
           }
         )
       ]
@@ -7979,13 +8021,14 @@ function KjunKpiHero(props) {
 
 // packages/native/src/kpi-row.tsx
 var import_tokens49 = require("@kjun-ui/tokens");
-var import_react58 = require("react");
+var import_react59 = require("react");
 var import_react_native51 = require("react-native");
 var import_jsx_runtime48 = require("react/jsx-runtime");
 function KjunKpiRow({
   loading = false,
   items,
   size = "md",
+  surface = "card",
   mobileSummary = true,
   onItemClick,
   renderValue
@@ -7993,7 +8036,7 @@ function KjunKpiRow({
   const { colors, domainColors, numericFontFamily, fontFamily } = useKjunStyles(), mobile = (0, import_react_native51.useWindowDimensions)().width <= import_tokens49.tokens.responsive.kpiRow, small = size === "sm", summary = mobileSummary && mobile && !small;
   const geometry2 = import_tokens49.tokens.extensions.kpiRow;
   const spec = small ? geometry2.sm : mobile ? geometry2.mobile : geometry2.md;
-  const [width, setWidth] = (0, import_react58.useState)(0);
+  const [width, setWidth] = (0, import_react59.useState)(0);
   const paddingX = summary ? geometry2.summary.paddingX : spec.paddingX;
   const gapX = summary ? geometry2.summary.gapX : 0;
   const explicit = items.some(
@@ -8034,10 +8077,13 @@ function KjunKpiRow({
       style: {
         flexDirection: "row",
         flexWrap: mobile ? "wrap" : "nowrap",
-        paddingVertical: summary ? geometry2.summary.paddingY : spec.paddingY,
-        paddingHorizontal: paddingX,
-        borderRadius: geometry2.radius,
-        backgroundColor: colors.surface,
+        // surface="none" sits inside the app's own card or list, so it drops its own card box.
+        ...surface === "none" ? {} : {
+          paddingVertical: summary ? geometry2.summary.paddingY : spec.paddingY,
+          paddingHorizontal: paddingX,
+          borderRadius: geometry2.radius,
+          backgroundColor: colors.surface
+        },
         rowGap: summary ? geometry2.summary.gapY : 0,
         columnGap: gapX
       },
@@ -8209,7 +8255,7 @@ var import_tokens51 = require("@kjun-ui/tokens");
 var import_react_native53 = require("react-native");
 
 // shared/package-runtime/market-cards.ts
-var import_react59 = require("react");
+var import_react60 = require("react");
 function useMarketCardsModel(props, persistence) {
   const {
     columns,
@@ -8225,8 +8271,8 @@ function useMarketCardsModel(props, persistence) {
     sortKey: c.sortable ? metricConfig[c.key].sortKey : null,
     isDefaultSort: c.defaultSort
   }));
-  const [key, setKey] = (0, import_react59.useState)(""), restoreSignature = JSON.stringify([storageNamespace, pills]);
-  const mounted = (0, import_react59.useRef)("");
+  const [key, setKey] = (0, import_react60.useState)(""), restoreSignature = JSON.stringify([storageNamespace, pills]);
+  const mounted = (0, import_react60.useRef)("");
   const save = (key2) => {
     var _a;
     try {
@@ -8234,7 +8280,7 @@ function useMarketCardsModel(props, persistence) {
     } catch (e) {
     }
   };
-  (0, import_react59.useEffect)(() => {
+  (0, import_react60.useEffect)(() => {
     var _a, _b;
     if (mounted.current === restoreSignature) return;
     mounted.current = restoreSignature;
@@ -8476,7 +8522,7 @@ function KjunMarketCards(props) {
           ...props,
           loadingPadding: "none",
           empty: !rows.length,
-          loadingContent: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(KjunListSkeleton, { variant: "compact" }),
+          loadingContent: props.skeleton === false ? void 0 : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(KjunListSkeleton, { variant: "compact" }),
           emptyContent: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(KjunEmpty, { text: emptyMessage, description: emptySubMessage }),
           children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_react_native53.View, { children: [
             state.pill && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(KText, { style: { textAlign: "right", paddingHorizontal: import_tokens51.tokens.dimension.value16, paddingVertical: import_tokens51.tokens.dimension.value8, ...typeStyle("caption"), color: colors.textSecondary }, children: state.pill.label }),
@@ -8587,7 +8633,7 @@ function KjunMarketSimpleList(props) {
         loadingPadding: "none",
         empty: !rows.length,
         emptyText: emptyMessage,
-        loadingContent: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(KjunListSkeleton, {}),
+        loadingContent: props.skeleton === false ? void 0 : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(KjunListSkeleton, {}),
         emptyContent: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(KjunEmpty, { text: emptyMessage, description: emptySubMessage }),
         children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react_native54.View, { children: rows.map((row, i) => {
           var _a, _b;
@@ -8714,7 +8760,7 @@ function KjunMarketListPanel({
 
 // packages/native/src/market-table.tsx
 var import_tokens54 = require("@kjun-ui/tokens");
-var import_react60 = require("react");
+var import_react61 = require("react");
 var import_react_native56 = require("react-native");
 var import_react_native_svg8 = __toESM(require("react-native-svg"), 1);
 var import_jsx_runtime53 = require("react/jsx-runtime");
@@ -8800,7 +8846,7 @@ function KjunMarketTable(props) {
     );
   };
   const layout = useMarketLayout(columns, showActions);
-  const [scroll, setScroll] = (0, import_react60.useState)({ viewport: 0, x: 0 }), fadeId = "kjun-market-fade-" + (0, import_react60.useId)().replace(/[^a-z0-9]/gi, "");
+  const [scroll, setScroll] = (0, import_react61.useState)({ viewport: 0, x: 0 }), fadeId = "kjun-market-fade-" + (0, import_react61.useId)().replace(/[^a-z0-9]/gi, "");
   const tableQuote = { price: {}, change: { fontWeight: typeStyle("body").fontWeight } };
   return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
     import_react_native56.View,
@@ -8818,7 +8864,7 @@ function KjunMarketTable(props) {
             loadingPadding: "none",
             empty: !rows.length,
             emptyText: emptyMessage,
-            loadingContent: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(KjunMarketTableSkeleton, { columns, showActions }),
+            loadingContent: props.skeleton === false ? void 0 : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(KjunMarketTableSkeleton, { columns, showActions }),
             emptyContent: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(KjunEmpty, { text: emptyMessage, description: emptySubMessage }),
             children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(MarketQuoteTypeContext.Provider, { value: tableQuote, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_react_native56.View, { style: { position: "relative", minWidth: 0 }, children: [
               /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
@@ -9023,12 +9069,12 @@ function KjunMarketTable(props) {
 
 // packages/native/src/list.tsx
 var import_tokens55 = require("@kjun-ui/tokens");
-var import_react61 = require("react");
+var import_react62 = require("react");
 var import_react_native57 = require("react-native");
 var import_jsx_runtime54 = require("react/jsx-runtime");
-var LastListRow = (0, import_react61.createContext)(false);
+var LastListRow = (0, import_react62.createContext)(false);
 function KjunListRow({ title, description, leading, trailing, actions, href, disabled = false, onPress }) {
-  const { colors } = useKjunStyles(), last = (0, import_react61.useContext)(LastListRow);
+  const { colors } = useKjunStyles(), last = (0, import_react62.useContext)(LastListRow);
   const parts = /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
     leading && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react_native57.View, { children: content(leading) }),
     /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_react_native57.View, { style: { flex: 1, minWidth: 0 }, children: [
@@ -9053,13 +9099,13 @@ function KjunListSection({ title, description, actions, children, ariaLabel }) {
       ] }),
       content(actions)
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react_native57.View, { role: "list", accessibilityLabel: ariaLabel || title, children: import_react61.Children.toArray(children).map((row, i, rows) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(LastListRow.Provider, { value: i === rows.length - 1, children: row }, i)) })
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react_native57.View, { role: "list", accessibilityLabel: ariaLabel || title, children: import_react62.Children.toArray(children).map((row, i, rows) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(LastListRow.Provider, { value: i === rows.length - 1, children: row }, i)) })
   ] });
 }
 
 // packages/native/src/app-navigation.tsx
 var import_tokens56 = require("@kjun-ui/tokens");
-var import_react62 = require("react");
+var import_react63 = require("react");
 var import_react_native58 = require("react-native");
 var import_jsx_runtime55 = require("react/jsx-runtime");
 function KjunTopNavigation({ title, description, leading, actions, safeAreaTop = 0 }) {
@@ -9068,13 +9114,13 @@ function KjunTopNavigation({ title, description, leading, actions, safeAreaTop =
   const titleInset = Math.max(0, (geometry2.controlSize - import_tokens56.tokens.typography.sectionTitle.lineHeightPx) / 2);
   const wrapping = import_react_native58.Platform.OS === "web" ? { wordBreak: "keep-all", overflowWrap: "anywhere" } : {};
   const edgeInset = (geometry2.controlSize - geometry2.iconSize) / 2;
-  const [iconEdges, setIconEdges] = (0, import_react62.useState)({ leading: false, trailing: false });
+  const [iconEdges, setIconEdges] = (0, import_react63.useState)({ leading: false, trailing: false });
   const square = (key) => (event) => {
     const { width, height } = event.nativeEvent.layout;
     const next = Math.abs(width - height) < 1 && Math.abs(height - geometry2.controlSize) < 1;
     setIconEdges((current) => current[key] === next ? current : { ...current, [key]: next });
   };
-  const flatten = (node) => import_react62.Children.toArray(node).flatMap((child) => (0, import_react62.isValidElement)(child) && child.type === import_react62.Fragment ? flatten(child.props.children) : [child]);
+  const flatten = (node) => import_react63.Children.toArray(node).flatMap((child) => (0, import_react63.isValidElement)(child) && child.type === import_react63.Fragment ? flatten(child.props.children) : [child]);
   const actionList = flatten(actions);
   return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(TopNavigationContext.Provider, { value: geometry2, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react_native58.View, { style: { flexShrink: 0, paddingTop: Math.max(0, safeAreaTop), backgroundColor: colors.surface }, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_react_native58.View, { style: { minHeight: geometry2.minimumHeight, flexDirection: "row", flexWrap: "wrap", alignItems: "flex-start", gap: geometry2.gap, paddingVertical: geometry2.paddingY, paddingHorizontal: geometry2.paddingX }, children: [
     leading && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(TopNavigationContext.Provider, { value: { ...geometry2, slot: "leading" }, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react_native58.View, { onLayout: square("leading"), style: { minHeight: geometry2.controlSize, minWidth: 0, maxWidth: "40%", flexShrink: 1, justifyContent: "center", marginLeft: iconEdges.leading ? -edgeInset : 0 }, children: content(leading) }) }),
@@ -9148,7 +9194,7 @@ function KjunBottomNavigation({ items, value, ariaLabel = "\uC8FC\uC694 \uD0D0\u
 }
 function KjunBottomActionBar({ description, children, safeAreaBottom = 0, keyboardVisible = false, hideOnKeyboard = false }) {
   const { colors } = useKjunStyles();
-  const [width, setWidth] = (0, import_react62.useState)(0);
+  const [width, setWidth] = (0, import_react63.useState)(0);
   const geometry2 = import_tokens56.tokens.extensions.navigation;
   const wide = width >= import_tokens56.tokens.responsive.bottomAction + geometry2.padding * 2;
   const wrapping = import_react_native58.Platform.OS === "web" ? { wordBreak: "keep-all", overflowWrap: "anywhere" } : {};
@@ -9170,16 +9216,16 @@ function KjunBottomActionBar({ description, children, safeAreaBottom = 0, keyboa
 }
 
 // packages/native/src/media.tsx
-var import_react63 = require("react");
+var import_react64 = require("react");
 var import_react_native59 = require("react-native");
 var import_tokens57 = require("@kjun-ui/tokens");
 var import_jsx_runtime56 = require("react/jsx-runtime");
 function KjunImage({ src, source, alt, decorative = false, aspectRatio = 1, fit = "cover", fallback: fallback2, onLoad, onError }) {
   const { colors } = useKjunStyles();
-  const request = JSON.stringify(source != null ? source : src), current = (0, import_react63.useRef)({ request, version: 0 });
+  const request = JSON.stringify(source != null ? source : src), current = (0, import_react64.useRef)({ request, version: 0 });
   if (current.current.request !== request) current.current = { request, version: current.current.version + 1 };
   const version = current.current.version;
-  const [failed, setFailed] = (0, import_react63.useState)(null);
+  const [failed, setFailed] = (0, import_react64.useState)(null);
   const missing = !source && !src;
   return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react_native59.View, { 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__ */ (0, import_jsx_runtime56.jsx)(import_react_native59.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();
@@ -9209,7 +9255,7 @@ function KjunChip({ label, icon, removable = false, disabled = false, size = "md
 }
 
 // packages/native/src/range-input.tsx
-var import_react64 = require("react");
+var import_react65 = require("react");
 var import_react_native61 = require("react-native");
 var import_tokens59 = require("@kjun-ui/tokens");
 var import_jsx_runtime58 = require("react/jsx-runtime");
@@ -9233,18 +9279,18 @@ function RangeInput({
   const valid = domain.valid && (!Array.isArray(value) || value.length === 2) && values.every(domain.accepts) && (values.length === 1 || values[0] <= values[1]);
   const blocked = disabled || !valid;
   const effectiveMax = valid ? domain.snap(max) : min;
-  const [hovered, setHovered] = (0, import_react64.useState)(null);
-  const [dragging, setDragging] = (0, import_react64.useState)(null);
-  const [focused, setFocused] = (0, import_react64.useState)(null);
-  const track = (0, import_react64.useRef)(null), measured = (0, import_react64.useRef)({ x: 0, width: 1 }), selected = (0, import_react64.useRef)(0), dirty = (0, import_react64.useRef)(false);
-  const latest = (0, import_react64.useRef)(values);
+  const [hovered, setHovered] = (0, import_react65.useState)(null);
+  const [dragging, setDragging] = (0, import_react65.useState)(null);
+  const [focused, setFocused] = (0, import_react65.useState)(null);
+  const track = (0, import_react65.useRef)(null), measured = (0, import_react65.useRef)({ x: 0, width: 1 }), selected = (0, import_react65.useRef)(0), dirty = (0, import_react65.useRef)(false);
+  const latest = (0, import_react65.useRef)(values);
   latest.current = values;
-  const callbacks = (0, import_react64.useRef)({ onValueChange, onChangeCommit });
+  const callbacks = (0, import_react65.useRef)({ onValueChange, onChangeCommit });
   callbacks.current = { onValueChange, onChangeCommit };
-  (0, import_react64.useEffect)(() => {
+  (0, import_react65.useEffect)(() => {
     if (!valid) console.warn("KJUN Slider: \uBC94\uC704\xB7step\xB7\uAC12\uC744 \uD655\uC778\uD558\uC138\uC694.");
   }, [valid]);
-  (0, import_react64.useEffect)(() => {
+  (0, import_react65.useEffect)(() => {
     if (blocked) {
       setDragging(null);
       setHovered(null);
@@ -9284,7 +9330,7 @@ function RangeInput({
       measured.current = { x: pageX, width: Math.max(1, width) };
     });
   };
-  const responder = (0, import_react64.useMemo)(
+  const responder = (0, import_react65.useMemo)(
     () => import_react_native61.PanResponder.create({
       onStartShouldSetPanResponderCapture: () => !disabled && valid,
       onMoveShouldSetPanResponderCapture: (_event, gesture) => !disabled && valid && Math.abs(gesture.dx) > 3 && Math.abs(gesture.dx) > Math.abs(gesture.dy),
@@ -9509,7 +9555,7 @@ function KjunRangeSlider(props) {
 }
 
 // packages/native/src/quantity-stepper.tsx
-var import_react65 = require("react");
+var import_react66 = require("react");
 var import_react_native62 = require("react-native");
 var import_tokens60 = require("@kjun-ui/tokens");
 
@@ -9531,16 +9577,16 @@ function KjunQuantityStepper({ value, min = 0, max, step = 1, precision = 0, dis
   const increaseStyle = { ...buttonStyle, borderRadius: 0, borderTopRightRadius: outer, borderBottomRightRadius: outer };
   const domain = (0, import_tokens60.createNumberDomain)({ min, max, step, precision }), valid = domain.valid && domain.accepts(value), blocked = disabled || !valid;
   const surface = useFieldSurface(size, { disabled: blocked, invalid });
-  const [draft, setDraft] = (0, import_react65.useState)(String(value));
-  const inputRef = (0, import_react65.useRef)(null);
-  const composing = (0, import_react65.useRef)(false), dirty = (0, import_react65.useRef)(false), accepted = (0, import_react65.useRef)(value);
-  const cancelledEscape = (0, import_react65.useRef)(false);
-  (0, import_react65.useEffect)(() => {
+  const [draft, setDraft] = (0, import_react66.useState)(String(value));
+  const inputRef = (0, import_react66.useRef)(null);
+  const composing = (0, import_react66.useRef)(false), dirty = (0, import_react66.useRef)(false), accepted = (0, import_react66.useRef)(value);
+  const cancelledEscape = (0, import_react66.useRef)(false);
+  (0, import_react66.useEffect)(() => {
     setDraft(String(value));
     accepted.current = value;
     dirty.current = false;
   }, [value, precision, min, max, step]);
-  (0, import_react65.useEffect)(() => {
+  (0, import_react66.useEffect)(() => {
     if (!valid) console.warn("KJUN QuantityStepper: \uBC94\uC704\xB7step\xB7\uC815\uBC00\uB3C4\xB7\uAC12\uC744 \uD655\uC778\uD558\uC138\uC694.");
   }, [valid]);
   const emit = (next) => {
@@ -9577,7 +9623,7 @@ function KjunQuantityStepper({ value, min = 0, max, step = 1, precision = 0, dis
     } else if (action === "commit") commit();
     else move(action === "increment" ? 1 : -1);
   };
-  const handlers = (0, import_react65.useRef)({ key, edit: (text) => {
+  const handlers = (0, import_react66.useRef)({ key, edit: (text) => {
     dirty.current = true;
     setDraft(text);
   } });
@@ -9585,7 +9631,7 @@ function KjunQuantityStepper({ value, min = 0, max, step = 1, precision = 0, dis
     dirty.current = true;
     setDraft(text);
   } };
-  (0, import_react65.useEffect)(() => {
+  (0, import_react66.useEffect)(() => {
     if (import_react_native62.Platform.OS !== "web") return;
     const input = inputRef.current;
     const keydown = (event) => handlers.current.key(event);
@@ -9657,19 +9703,19 @@ function KjunQuantityStepper({ value, min = 0, max, step = 1, precision = 0, dis
 }
 
 // packages/native/src/time-picker.tsx
-var import_react66 = require("react");
+var import_react67 = require("react");
 var import_react_native63 = require("react-native");
 var import_tokens61 = require("@kjun-ui/tokens");
 var import_jsx_runtime60 = require("react/jsx-runtime");
 function KjunTimePicker({ value, precision = "minute", min, max, minuteStep = 1, secondStep = 1, disabled = false, error = false, clearable = true, size = "md", ariaLabel = "\uC2DC\uAC04", onValueChange, onChangeCommit }) {
   const geometry2 = import_tokens61.tokens.extensions.timePicker, spec = import_tokens61.tokens.input[size];
   const { colors } = useKjunStyles();
-  const first = (0, import_react66.useRef)(null);
-  const [focused, setFocused] = (0, import_react66.useState)(false), [opened, setOpened] = (0, import_react66.useState)(null);
-  const field = useKjunField(), uid = (0, import_react66.useId)();
+  const first = (0, import_react67.useRef)(null);
+  const [focused, setFocused] = (0, import_react67.useState)(false), [opened, setOpened] = (0, import_react67.useState)(null);
+  const field = useKjunField(), uid = (0, import_react67.useId)();
   const fieldId = (field == null ? void 0 : field.id) || `kjun-time-${uid}`;
-  const domain = (0, import_react66.useMemo)(() => (0, import_tokens61.createTimeDomain)({ precision, min, max, minuteStep, secondStep }), [precision, min, max, minuteStep, secondStep]), valid = domain.valid && domain.accepts(value);
-  (0, import_react66.useEffect)(() => {
+  const domain = (0, import_react67.useMemo)(() => (0, import_tokens61.createTimeDomain)({ precision, min, max, minuteStep, secondStep }), [precision, min, max, minuteStep, secondStep]), valid = domain.valid && domain.accepts(value);
+  (0, import_react67.useEffect)(() => {
     if (!valid) console.warn("KJUN TimePicker: \uC2DC\uAC01 \uBC94\uC704\xB7\uAC04\uACA9\xB7\uAC12\uC744 \uD655\uC778\uD558\uC138\uC694.");
   }, [valid]);
   const change = (next) => {
@@ -9680,7 +9726,7 @@ function KjunTimePicker({ value, precision = "minute", min, max, minuteStep = 1,
   };
   const time = value === null ? null : domain.parse(value);
   return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_react_native63.View, { accessibilityLabel: ariaLabel, style: { flexDirection: "row", alignItems: "center", maxWidth: "100%", minWidth: 0, backgroundColor: colors.inputBg, borderRadius: spec.radius }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react_native63.View, { style: { flex: 1, flexDirection: "row", alignItems: "center", minWidth: 0 }, children: ["\uC2DC", "\uBD84", "\uCD08"].slice(0, precision === "second" ? 3 : 2).map((label, index) => /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_react66.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react_native63.View, { style: { flex: 1, flexDirection: "row", alignItems: "center", minWidth: 0 }, children: ["\uC2DC", "\uBD84", "\uCD08"].slice(0, precision === "second" ? 3 : 2).map((label, index) => /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_react67.Fragment, { children: [
       index > 0 && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(KText, { "aria-hidden": true, style: { ...inputTypeStyle(size), width: geometry2.separatorWidth, textAlign: "center", color: disabled || !valid ? colors.textDisabled : colors.textSecondary }, children: ":" }),
       /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(FieldContext.Provider, { value: { ...field, id: index === 0 ? fieldId : `${fieldId}-${index}` }, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(CompoundControlContext.Provider, { value: { size, focusRef: index === 0 ? first : void 0, onFocusChange: setFocused, leading: index === 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react_native63.View, { style: { flexShrink: 0, minWidth: geometry2.segmentMinimumWidth }, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(KjunSelect, { value: time === null ? null : domain.part(time, index), options: domain.options(value, index).map((n) => ({ value: n, label: String(n).padStart(2, "0") })), onValueChange: (next) => {
         if (typeof next === "number") change(domain.select(value, index, next));