@farcaster/snap 2.1.1 → 2.2.0

package/dist/colors.d.ts

@@ -24,6 +24,16 @@ export declare const PALETTE_COLOR_ACCENT: "accent";
 export declare const DEFAULT_THEME_ACCENT: "purple";
 export declare const PALETTE_COLOR_VALUES: readonly ["gray", "blue", "red", "amber", "green", "teal", "purple", "pink"];
 export type PaletteColor = (typeof PALETTE_COLOR_VALUES)[number];
+export declare function isSnapHexColorString(s: string): boolean;
+/**
+ * Resolve a snap color token for inline styles: `accent`, palette names, or
+ * literal `#rrggbb`. Unknown values fall back to `accentHex` (same as legacy
+ * `colorHex` behavior for non-hex strings).
+ */
+export declare function resolveSnapColorHex(color: string | undefined, opts: {
+    accentHex: string;
+    appearance: "light" | "dark";
+}): string;
 /** Light-mode hex for each palette color (emulator / reference client). */
 export declare const PALETTE_LIGHT_HEX: Record<PaletteColor, string>;
 /** Dark-mode hex for each palette color (reference). */

package/dist/colors.js

@@ -32,6 +32,28 @@ export const PALETTE_COLOR_VALUES = [
     PALETTE_COLOR.purple,
     PALETTE_COLOR.pink,
 ];
+/** Strict `#rrggbb` literal used by cell_grid (and clients that accept hex). */
+const SNAP_HEX_6 = /^#[0-9a-fA-F]{6}$/;
+export function isSnapHexColorString(s) {
+    return SNAP_HEX_6.test(s.trim());
+}
+/**
+ * Resolve a snap color token for inline styles: `accent`, palette names, or
+ * literal `#rrggbb`. Unknown values fall back to `accentHex` (same as legacy
+ * `colorHex` behavior for non-hex strings).
+ */
+export function resolveSnapColorHex(color, opts) {
+    if (!color || color === PALETTE_COLOR_ACCENT)
+        return opts.accentHex;
+    const trimmed = color.trim();
+    if (isSnapHexColorString(trimmed))
+        return trimmed;
+    const map = opts.appearance === "dark" ? PALETTE_DARK_HEX : PALETTE_LIGHT_HEX;
+    if (Object.hasOwn(map, trimmed)) {
+        return map[trimmed];
+    }
+    return opts.accentHex;
+}
 /** Light-mode hex for each palette color (emulator / reference client). */
 export const PALETTE_LIGHT_HEX = {
     gray: "#6E6A86",

package/dist/constants.d.ts

@@ -3,6 +3,7 @@ export declare const SPEC_VERSION_2: "2.0";
 export declare const SPEC_VERSION: "2.0";
 export declare const SUPPORTED_SPEC_VERSIONS: readonly ["1.0", "2.0"];
 export type SpecVersion = (typeof SUPPORTED_SPEC_VERSIONS)[number];
+export declare const SNAP_PAYLOAD_HEADER: "X-Snap-Payload";
 export declare const MEDIA_TYPE: "application/vnd.farcaster.snap+json";
 export declare const EFFECT_VALUES: readonly ["confetti"];
 export declare const POST_GRID_TAP_KEY: "grid_tap";
@@ -14,6 +15,7 @@ export declare const GRID_GAP_VALUES: readonly ["none", "sm", "md", "lg"];
 export declare const MAX_ELEMENTS = 64;
 export declare const MAX_ROOT_CHILDREN = 7;
 export declare const MAX_CHILDREN = 6;
-export declare const MAX_DEPTH = 4;
+/** Enough depth for side-by-side columns that contain labeled horizontal icon rows (pair → column → row → icon). */
+export declare const MAX_DEPTH = 5;
 export declare const BAR_CHART_MAX_BARS = 6;
 export declare const BAR_CHART_LABEL_MAX_CHARS = 40;

package/dist/constants.js

@@ -1,7 +1,11 @@
 export const SPEC_VERSION_1 = "1.0";
 export const SPEC_VERSION_2 = "2.0";
 export const SPEC_VERSION = SPEC_VERSION_2;
-export const SUPPORTED_SPEC_VERSIONS = [SPEC_VERSION_1, SPEC_VERSION_2];
+export const SUPPORTED_SPEC_VERSIONS = [
+    SPEC_VERSION_1,
+    SPEC_VERSION_2,
+];
+export const SNAP_PAYLOAD_HEADER = "X-Snap-Payload";
 export const MEDIA_TYPE = "application/vnd.farcaster.snap+json";
 export const EFFECT_VALUES = ["confetti"];
 // ─── Pixel grid ────────────────────────────────────────
@@ -15,7 +19,8 @@ export const GRID_GAP_VALUES = ["none", "sm", "md", "lg"];
 export const MAX_ELEMENTS = 64;
 export const MAX_ROOT_CHILDREN = 7;
 export const MAX_CHILDREN = 6;
-export const MAX_DEPTH = 4;
+/** Enough depth for side-by-side columns that contain labeled horizontal icon rows (pair → column → row → icon). */
+export const MAX_DEPTH = 5;
 // ─── Bar chart ─────────────────────────────────────────
 export const BAR_CHART_MAX_BARS = 6;
 export const BAR_CHART_LABEL_MAX_CHARS = 40;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export type { Spec as SnapSpec, UIElement as SnapUIElement, } from "@json-render/core";
-export { SPEC_VERSION, SPEC_VERSION_1, SPEC_VERSION_2, SUPPORTED_SPEC_VERSIONS, type SpecVersion, MEDIA_TYPE, EFFECT_VALUES, POST_GRID_TAP_KEY, MAX_ELEMENTS, MAX_ROOT_CHILDREN, MAX_CHILDREN, MAX_DEPTH, } from "./constants.js";
-export { DEFAULT_THEME_ACCENT, PALETTE_COLOR, PALETTE_COLOR_ACCENT, PALETTE_COLOR_VALUES, PALETTE_LIGHT_HEX, PALETTE_DARK_HEX, type PaletteColor, } from "./colors.js";
-export { ACTION_TYPE_GET, ACTION_TYPE_POST, snapResponseSchema, payloadSchema, type SnapAction, type SnapContext, type SnapResponse, type SnapHandlerResult, type SnapElementInput, type SnapSpecInput, type SnapFunction, type SnapPayload, } from "./schemas.js";
+export { SPEC_VERSION, SPEC_VERSION_1, SPEC_VERSION_2, SUPPORTED_SPEC_VERSIONS, type SpecVersion, SNAP_PAYLOAD_HEADER, MEDIA_TYPE, EFFECT_VALUES, POST_GRID_TAP_KEY, MAX_ELEMENTS, MAX_ROOT_CHILDREN, MAX_CHILDREN, MAX_DEPTH, } from "./constants.js";
+export { DEFAULT_THEME_ACCENT, PALETTE_COLOR, PALETTE_COLOR_ACCENT, PALETTE_COLOR_VALUES, PALETTE_LIGHT_HEX, PALETTE_DARK_HEX, isSnapHexColorString, resolveSnapColorHex, type PaletteColor, } from "./colors.js";
+export { ACTION_TYPE_GET, ACTION_TYPE_POST, snapResponseSchema, payloadSchema, getPayloadSchema, type SnapAction, type SnapGetAction, type SnapContext, type SnapResponse, type SnapHandlerResult, type SnapElementInput, type SnapSpecInput, type SnapFunction, type SnapPayload, type SnapGetPayload, } from "./schemas.js";
 export { validateSnapResponse, type ValidationResult } from "./validator.js";

package/dist/index.js

@@ -1,4 +1,4 @@
-export { SPEC_VERSION, SPEC_VERSION_1, SPEC_VERSION_2, SUPPORTED_SPEC_VERSIONS, MEDIA_TYPE, EFFECT_VALUES, POST_GRID_TAP_KEY, MAX_ELEMENTS, MAX_ROOT_CHILDREN, MAX_CHILDREN, MAX_DEPTH, } from "./constants.js";
-export { DEFAULT_THEME_ACCENT, PALETTE_COLOR, PALETTE_COLOR_ACCENT, PALETTE_COLOR_VALUES, PALETTE_LIGHT_HEX, PALETTE_DARK_HEX, } from "./colors.js";
-export { ACTION_TYPE_GET, ACTION_TYPE_POST, snapResponseSchema, payloadSchema, } from "./schemas.js";
+export { SPEC_VERSION, SPEC_VERSION_1, SPEC_VERSION_2, SUPPORTED_SPEC_VERSIONS, SNAP_PAYLOAD_HEADER, MEDIA_TYPE, EFFECT_VALUES, POST_GRID_TAP_KEY, MAX_ELEMENTS, MAX_ROOT_CHILDREN, MAX_CHILDREN, MAX_DEPTH, } from "./constants.js";
+export { DEFAULT_THEME_ACCENT, PALETTE_COLOR, PALETTE_COLOR_ACCENT, PALETTE_COLOR_VALUES, PALETTE_LIGHT_HEX, PALETTE_DARK_HEX, isSnapHexColorString, resolveSnapColorHex, } from "./colors.js";
+export { ACTION_TYPE_GET, ACTION_TYPE_POST, snapResponseSchema, payloadSchema, getPayloadSchema, } from "./schemas.js";
 export { validateSnapResponse } from "./validator.js";

package/dist/react/components/cell-grid.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useStateStore } from "@json-render/react";
 import { cn } from "@neynar/ui/utils";
 import { POST_GRID_TAP_KEY } from "@farcaster/snap";
@@ -54,12 +54,14 @@ export function SnapCellGrid({ element: { props, on }, emit, }) {
             content: c.content != null ? String(c.content) : undefined,
         });
     }
+    /** Cells without a palette `color` — subtle fill so empty slots read as tiles. */
+    const emptyCellBg = colors.mode === "dark" ? "rgba(255, 255, 255, 0.05)" : "rgba(0, 0, 0, 0.05)";
     const cellEls = [];
     for (let r = 0; r < rows; r++) {
         for (let c = 0; c < cols; c++) {
             const cell = cellMap.get(`${r},${c}`);
             const selected = interactive && isSelected(r, c);
-            const bg = cell?.color ? colors.colorHex(cell.color) : "transparent";
+            const bg = cell?.color ? colors.colorHex(cell.color) : emptyCellBg;
             cellEls.push(_jsx("div", { role: interactive ? "button" : undefined, tabIndex: interactive ? 0 : undefined, onClick: interactive ? () => handleTap(r, c) : undefined, onKeyDown: interactive
                     ? (e) => {
                         if (e.key === "Enter" || e.key === " ") {
@@ -76,16 +78,13 @@ export function SnapCellGrid({ element: { props, on }, emit, }) {
                 }, children: cell?.content ?? "" }, `${r}-${c}`));
         }
     }
-    const selectionLabel = isSelectable && selectedSet.size > 0
-        ? `inputs.${name}: ${[...selectedSet].join(isMultiple ? " | " : "")}`
-        : null;
-    return (_jsxs("div", { children: [_jsx("div", { style: {
-                    display: "grid",
-                    width: "100%",
-                    gridTemplateColumns: `repeat(${cols}, 1fr)`,
-                    gap: gapPx,
-                    padding: 4,
-                    borderRadius: 8,
-                    backgroundColor: colors.muted,
-                }, children: cellEls }), selectionLabel && (_jsx("div", { className: "mt-1.5 truncate text-xs font-mono", style: { color: colors.textMuted }, children: selectionLabel }))] }));
+    return (_jsx("div", { style: {
+            display: "grid",
+            width: "100%",
+            gridTemplateColumns: `repeat(${cols}, 1fr)`,
+            gap: gapPx,
+            padding: 4,
+            borderRadius: 8,
+            backgroundColor: colors.muted,
+        }, children: cellEls }));
 }

package/dist/react/components/image.js

@@ -1,6 +1,8 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { AspectRatio } from "@neynar/ui/aspect-ratio";
+import { cn } from "@neynar/ui/utils";
+import { useSnapStackDirection } from "../stack-direction-context.js";
 function aspectToRatio(aspect) {
     const [w, h] = aspect.split(":").map(Number);
     if (!w || !h)
@@ -11,5 +13,7 @@ export function SnapImage({ element: { props }, }) {
     const url = String(props.url ?? "");
     const alt = String(props.alt ?? "");
     const ratio = aspectToRatio(String(props.aspect ?? "1:1"));
-    return (_jsx(AspectRatio, { ratio: ratio, className: "relative w-full flex-1 overflow-hidden rounded-lg", children: _jsx("img", { src: url, alt: alt, className: "absolute inset-0 size-full object-cover" }) }));
+    const stackDir = useSnapStackDirection();
+    const inHorizontalStack = stackDir === "horizontal";
+    return (_jsx(AspectRatio, { ratio: ratio, className: cn("relative overflow-hidden rounded-lg", inHorizontalStack ? "min-w-0 flex-1 basis-0" : "w-full"), children: _jsx("img", { src: url, alt: alt, className: "absolute inset-0 size-full object-cover" }) }));
 }

package/dist/react/components/stack.js

@@ -1,6 +1,8 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "@neynar/ui/utils";
+import { countRenderableChildren, horizontalChildrenAreAllButtons, } from "../../stack-horizontal-utils.js";
+import { SnapStackDirectionProvider, useSnapStackDirection, } from "../stack-direction-context.js";
 const VGAP = {
     none: "gap-0",
     sm: "gap-2",
@@ -13,20 +15,68 @@ const HGAP = {
     md: "gap-2",
     lg: "gap-3",
 };
-const JUSTIFY = {
+const JUSTIFY_FLEX = {
     start: "justify-start",
     center: "justify-center",
     end: "justify-end",
     between: "justify-between",
     around: "justify-around",
 };
+/** Equal columns for explicit `columns` prop and for all-button horizontal rows. */
+const COLUMN_GRID_CLASS = {
+    1: "grid grid-cols-1 auto-rows-auto items-stretch [&>*]:min-w-0",
+    2: "grid grid-cols-2 auto-rows-auto items-stretch [&>*]:min-w-0",
+    3: "grid grid-cols-3 auto-rows-auto items-stretch [&>*]:min-w-0",
+    4: "grid grid-cols-4 auto-rows-auto items-stretch [&>*]:min-w-0",
+    5: "grid grid-cols-5 auto-rows-auto items-stretch [&>*]:min-w-0",
+    6: "grid grid-cols-6 auto-rows-auto items-stretch [&>*]:min-w-0",
+};
 export function SnapStack({ element: { props }, children, }) {
+    const parentDirection = useSnapStackDirection();
     const direction = String(props.direction ?? "vertical");
     const gapKey = String(props.gap ?? "md");
     const isHorizontal = direction === "horizontal";
     const gap = isHorizontal
         ? (HGAP[gapKey] ?? "gap-2")
         : (VGAP[gapKey] ?? "gap-4");
-    const justify = props.justify ? JUSTIFY[String(props.justify)] : undefined;
-    return (_jsx("div", { className: cn("flex w-full", isHorizontal ? "flex-row items-center flex-wrap" : "flex-col", gap, justify), children: children }));
+    const justifyKey = props.justify ? String(props.justify) : undefined;
+    const justifyFlex = justifyKey ? JUSTIFY_FLEX[justifyKey] : undefined;
+    const buttonRowGrid = isHorizontal && horizontalChildrenAreAllButtons(children);
+    const buttonRowCount = buttonRowGrid
+        ? countRenderableChildren(children)
+        : 0;
+    const columnsRaw = props.columns;
+    const columns = typeof columnsRaw === "number" &&
+        columnsRaw >= 2 &&
+        columnsRaw <= 6 &&
+        Number.isInteger(columnsRaw)
+        ? columnsRaw
+        : undefined;
+    const explicitColumnGrid = isHorizontal && columns !== undefined && !buttonRowGrid;
+    const columnGridClass = explicitColumnGrid && columns !== undefined
+        ? COLUMN_GRID_CLASS[columns]
+        : undefined;
+    /**
+     * Row peers under a horizontal stack must shrink and share width (`flex-1` + `min-w-0`).
+     * Avoid `w-full` here: it resolves to 100% of the flex/grid container and fights peer sizing,
+     * so each column stacks on its own wrapped row instead of sitting side-by-side.
+     */
+    const isRowChild = parentDirection === "horizontal";
+    const rootWidthClass = isRowChild
+        ? "min-w-0 flex-1 basis-0 max-w-full"
+        : "w-full min-w-0";
+    const justifyBlockGrid = justifyFlex &&
+        (!isHorizontal || (!buttonRowGrid && !explicitColumnGrid));
+    /** Single flex row (nowrap): peers stay side-by-side and shrink via min-w-0 / flex-1 on nested stacks. */
+    const horizontalFlexClasses = "flex min-w-0 flex-row flex-nowrap items-stretch [&>*]:min-w-0";
+    return (_jsx(SnapStackDirectionProvider, { direction: isHorizontal ? "horizontal" : "vertical", children: _jsx("div", { className: cn(rootWidthClass, isHorizontal
+                ? buttonRowGrid &&
+                    buttonRowCount >= 1 &&
+                    buttonRowCount <= 6 &&
+                    COLUMN_GRID_CLASS[buttonRowCount]
+                    ? cn(COLUMN_GRID_CLASS[buttonRowCount], gap, "[&>*]:w-full")
+                    : explicitColumnGrid && columnGridClass
+                        ? cn(columnGridClass, gap)
+                        : cn(horizontalFlexClasses, gap, justifyBlockGrid ? justifyFlex : undefined)
+                : cn("flex min-w-0 w-full flex-col", gap, justifyFlex)), children: children }) }));
 }

package/dist/react/components/text.js

@@ -1,7 +1,9 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Text } from "@neynar/ui/typography";
+import { cn } from "@neynar/ui/utils";
 import { useSnapColors } from "../hooks/use-snap-colors.js";
+import { useSnapStackDirection } from "../stack-direction-context.js";
 const SIZE_MAP = {
     md: { textSize: "base" },
     sm: { textSize: "sm" },
@@ -13,5 +15,9 @@ export function SnapText({ element: { props }, }) {
     const align = props.align ?? undefined;
     const config = SIZE_MAP[size] ?? SIZE_MAP.md;
     const colors = useSnapColors();
-    return (_jsx(Text, { size: config.textSize, weight: weight, align: align, className: "flex-1", style: { color: colors.text }, children: content }));
+    const stackDir = useSnapStackDirection();
+    const inHorizontalStack = stackDir === "horizontal";
+    return (_jsx(Text, { size: config.textSize, weight: weight, align: align, className: cn(
+        /** Row peers hug content like RN `wrapRow`; avoid `flex-1` stretching peers across the row. */
+        inHorizontalStack ? "min-w-0 shrink" : "flex-1"), style: { color: colors.text }, children: content }));
 }

package/dist/react/hooks/use-snap-colors.js

@@ -3,7 +3,7 @@ import { useMemo } from "react";
 import { useStateStore } from "@json-render/react";
 import { resolveSnapPaletteHex } from "../lib/resolve-palette-hex.js";
 import { useSnapPreviewPageAccent, useSnapAppearance } from "../accent-context.js";
-import { PALETTE_DARK_HEX, PALETTE_LIGHT_HEX } from "@farcaster/snap";
+import { resolveSnapColorHex } from "@farcaster/snap";
 /** Readable foreground color (black or white) for a given hex background. */
 export function pickForegroundForBg(hex) {
     const h = hex.replace(/^#/, "");
@@ -37,19 +37,12 @@ function buildSnapColors(accentName, mode) {
     const accent = resolveSnapPaletteHex(accentName, mode);
     const accentFg = pickForegroundForBg(accent);
     const neutrals = mode === "dark" ? NEUTRAL_DARK : NEUTRAL_LIGHT;
-    const paletteMap = mode === "dark" ? PALETTE_DARK_HEX : PALETTE_LIGHT_HEX;
     const accentHover = mode === "light"
         ? `color-mix(in srgb, ${accent} 82%, #000000)`
         : `color-mix(in srgb, ${accent} 78%, #ffffff)`;
     const outlineHover = `color-mix(in srgb, ${accent} 14%, ${neutrals.surface})`;
     const paletteHex = (name) => resolveSnapPaletteHex(name, mode);
-    const colorHex = (name) => {
-        if (!name || name === "accent")
-            return accent;
-        if (Object.hasOwn(paletteMap, name))
-            return paletteMap[name];
-        return accent;
-    };
+    const colorHex = (name) => resolveSnapColorHex(name, { accentHex: accent, appearance: mode });
     return {
         accent,
         accentFg,

package/dist/react/stack-direction-context.d.ts

@@ -0,0 +1,7 @@
+import { type ReactNode } from "react";
+export type SnapStackDirection = "vertical" | "horizontal";
+export declare function SnapStackDirectionProvider({ direction, children, }: {
+    direction: SnapStackDirection;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useSnapStackDirection(): SnapStackDirection | undefined;

package/dist/react/stack-direction-context.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const SnapStackDirectionContext = createContext(undefined);
+export function SnapStackDirectionProvider({ direction, children, }) {
+    return (_jsx(SnapStackDirectionContext.Provider, { value: direction, children: children }));
+}
+export function useSnapStackDirection() {
+    return useContext(SnapStackDirectionContext);
+}

package/dist/react-native/components/snap-cell-grid.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { StyleSheet, Text, View, Pressable } from "react-native";
 import { useStateStore } from "@json-render/react-native";
 import { useSnapPalette } from "../use-snap-palette.js";
@@ -58,13 +58,15 @@ export function SnapCellGrid({ element, emit, }) {
     }
     const ringOuter = appearance === "dark" ? "#fff" : "#000";
     const ringInner = appearance === "dark" ? "#000" : "#fff";
+    /** Cells without a palette `color` — subtle fill so empty slots read as tiles. */
+    const emptyCellBg = appearance === "dark" ? "rgba(255, 255, 255, 0.05)" : "rgba(0, 0, 0, 0.05)";
     const rowEls = [];
     for (let r = 0; r < rows; r++) {
         const rowCells = [];
         for (let c = 0; c < cols; c++) {
             const cell = cellMap.get(`${r},${c}`);
             const selected = interactive && isSelected(r, c);
-            const bg = cell?.color ? hex(cell.color) : "transparent";
+            const bg = cell?.color ? hex(cell.color) : emptyCellBg;
             const cellContent = cell?.content ? (_jsx(Text, { style: [styles.cellText, { color: colors.textPrimary }], children: cell.content })) : null;
             // Two-tone ring: outer View with contrasting border, inner View with inverse border
             const cellView = selected ? (_jsx(View, { style: [styles.cell, { height: rowHeight, borderWidth: 1, borderColor: ringOuter, borderRadius: 4 }], children: _jsx(View, { style: [
@@ -75,10 +77,7 @@ export function SnapCellGrid({ element, emit, }) {
         }
         rowEls.push(_jsx(View, { style: [styles.gridRow, { gap: gapPx }], children: rowCells }, r));
     }
-    const selectionLabel = isSelectable && selectedSet.size > 0
-        ? `inputs.${name}: ${[...selectedSet].join(isMultiple ? " | " : "")}`
-        : null;
-    return (_jsxs(View, { style: [styles.wrap, { gap: gapPx, backgroundColor: colors.muted, padding: 4, borderRadius: 8 }], children: [rowEls, selectionLabel ? (_jsx(Text, { style: [styles.selectionText, { color: colors.textSecondary }], children: selectionLabel })) : null] }));
+    return (_jsx(View, { style: [styles.wrap, { gap: gapPx, backgroundColor: colors.muted, padding: 4, borderRadius: 8 }], children: rowEls }));
 }
 const styles = StyleSheet.create({
     wrap: { width: "100%" },
@@ -96,5 +95,4 @@ const styles = StyleSheet.create({
         justifyContent: "center",
     },
     cellText: { fontSize: 12, lineHeight: 16, fontWeight: "600" },
-    selectionText: { fontSize: 11, fontFamily: "monospace", marginTop: 6 },
 });

package/dist/react-native/components/snap-image.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Image } from "expo-image";
 import { StyleSheet, View } from "react-native";
+import { useSnapStackDirection } from "../stack-direction-context.js";
 function aspectToRatio(aspect) {
     const [w, h] = aspect.split(":").map(Number);
     if (!w || !h)
@@ -11,13 +12,25 @@ export function SnapImage({ element: { props }, }) {
     const url = String(props.url ?? "");
     const alt = String(props.alt ?? "");
     const ratio = aspectToRatio(String(props.aspect ?? "1:1"));
-    return (_jsx(View, { style: [styles.frame, { aspectRatio: ratio }], children: _jsx(Image, { source: { uri: url }, style: StyleSheet.absoluteFill, contentFit: "cover", accessibilityLabel: alt || undefined }) }));
+    const stackDir = useSnapStackDirection();
+    const inHorizontalStack = stackDir === "horizontal";
+    return (_jsx(View, { style: [
+            styles.frame,
+            inHorizontalStack ? styles.frameInHorizontalRow : styles.frameFullWidth,
+            { aspectRatio: ratio },
+        ], children: _jsx(Image, { source: { uri: url }, style: StyleSheet.absoluteFill, contentFit: "cover", accessibilityLabel: alt || undefined }) }));
 }
 const styles = StyleSheet.create({
     frame: {
-        width: "100%",
         borderRadius: 8,
         overflow: "hidden",
         backgroundColor: "#f3f4f6",
     },
+    frameFullWidth: {
+        width: "100%",
+    },
+    frameInHorizontalRow: {
+        flex: 1,
+        minWidth: 0,
+    },
 });

package/dist/react-native/components/snap-item.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { StyleSheet, Text, View } from "react-native";
+import { useSnapStackDirection } from "../stack-direction-context.js";
 import { useSnapTheme } from "../theme.js";
 export function SnapItem({ element: { props }, children, }) {
     const { colors } = useSnapTheme();
@@ -7,15 +8,24 @@ export function SnapItem({ element: { props }, children, }) {
     const description = props.description
         ? String(props.description)
         : undefined;
-    const variant = String(props.variant ?? "default");
+    /** Match web `Item className="flex-1"`: row peers must share width or title/description collapse. */
+    const rowPeer = useSnapStackDirection() === "horizontal";
     const containerVariant = { paddingVertical: 6, paddingHorizontal: 10 };
-    return (_jsxs(View, { style: [styles.container, containerVariant], children: [_jsxs(View, { style: styles.content, children: [title ? _jsx(Text, { style: [styles.title, { color: colors.text }], children: title }) : null, description ? (_jsx(Text, { style: [styles.description, { color: colors.textSecondary }], children: description })) : null] }), children ? (_jsx(View, { style: styles.actions, children: _jsx(View, { style: { flex: 0 }, children: children }) })) : null] }));
+    return (_jsxs(View, { style: [
+            styles.container,
+            containerVariant,
+            rowPeer && styles.rowPeer,
+        ], children: [_jsxs(View, { style: styles.content, children: [title ? _jsx(Text, { style: [styles.title, { color: colors.text }], children: title }) : null, description ? (_jsx(Text, { style: [styles.description, { color: colors.textSecondary }], children: description })) : null] }), children ? (_jsx(View, { style: styles.actions, children: _jsx(View, { style: { flex: 0 }, children: children }) })) : null] }));
 }
 const styles = StyleSheet.create({
     container: {
         flexDirection: "row",
         alignItems: "center",
     },
+    rowPeer: {
+        flex: 1,
+        minWidth: 0,
+    },
     content: {
         flex: 1,
     },

package/dist/react-native/components/snap-progress.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { StyleSheet, Text, View } from "react-native";
+import { useSnapStackDirection } from "../stack-direction-context.js";
 import { useSnapPalette } from "../use-snap-palette.js";
 import { useSnapTheme } from "../theme.js";
 export function SnapProgress({ element: { props }, }) {
@@ -9,10 +10,15 @@ export function SnapProgress({ element: { props }, }) {
     const max = Math.max(1, Number(props.max ?? 100));
     const percent = Math.min(100, Math.max(0, (value / max) * 100));
     const label = props.label != null ? String(props.label) : null;
-    return (_jsxs(View, { style: styles.wrap, children: [label ? (_jsx(Text, { style: [styles.label, { color: colors.textSecondary }], children: label })) : null, _jsx(View, { style: [styles.track, { backgroundColor: colors.muted }], children: _jsx(View, { style: [styles.fill, { width: `${percent}%`, backgroundColor: accentHex }] }) })] }));
+    const inHorizontalStack = useSnapStackDirection() === "horizontal";
+    return (_jsxs(View, { style: [styles.wrap, inHorizontalStack ? styles.wrapRowPeer : styles.wrapCol], children: [label ? (_jsx(Text, { style: [styles.label, { color: colors.textSecondary }], children: label })) : null, _jsx(View, { style: [styles.track, { backgroundColor: colors.muted }], children: _jsx(View, { style: [styles.fill, { width: `${percent}%`, backgroundColor: accentHex }] }) })] }));
 }
 const styles = StyleSheet.create({
-    wrap: { width: "100%", gap: 4 },
+    wrap: { gap: 4 },
+    /** Vertical stacks: span card width (matches web `w-full`). */
+    wrapCol: { width: "100%" },
+    /** Horizontal row peers: share space; `width: 100%` each overflows the row. */
+    wrapRowPeer: { flex: 1, minWidth: 0 },
     label: { fontSize: 13, lineHeight: 18 },
     track: {
         height: 10,

package/dist/react-native/components/snap-stack.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentRenderProps } from "@json-render/react-native";
-import type { ReactNode } from "react";
+import { type ReactNode } from "react";
 export declare function SnapStack({ element: { props }, children, }: ComponentRenderProps<Record<string, unknown>> & {
     children?: ReactNode;
 }): import("react").JSX.Element;

package/dist/react-native/components/snap-stack.js

@@ -1,5 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Children } from "react";
 import { StyleSheet, View } from "react-native";
+import { countRenderableChildren, horizontalChildrenAreAllButtons, } from "../../stack-horizontal-utils.js";
+import { SnapStackDirectionProvider, useSnapStackDirection, } from "../stack-direction-context.js";
 const VGAP = {
     none: 0,
     sm: 8,
@@ -19,7 +22,13 @@ const JUSTIFY = {
     between: "space-between",
     around: "space-around",
 };
+/** Equal-width cells for explicit `columns` and all-button horizontal rows. */
+function wrapEqualColumnCells(children) {
+    const cells = Children.toArray(children).filter((c) => c != null && c !== false);
+    return cells.map((child, i) => (_jsx(View, { style: styles.equalColumnCell, children: child }, i)));
+}
 export function SnapStack({ element: { props }, children, }) {
+    const parentDirection = useSnapStackDirection();
     const direction = String(props.direction ?? "vertical");
     const rawGap = props.gap;
     const isHorizontal = direction === "horizontal";
@@ -29,21 +38,87 @@ export function SnapStack({ element: { props }, children, }) {
         : typeof rawGap === "string" && rawGap in gapMap
             ? gapMap[rawGap]
             : isHorizontal ? HGAP.md : VGAP.md;
-    const justify = props.justify ? JUSTIFY[String(props.justify)] : undefined;
-    return (_jsx(View, { style: [
-            styles.stack,
-            isHorizontal ? styles.horizontal : undefined,
-            { gap },
-            justify ? { justifyContent: justify } : undefined,
-        ], children: children }));
+    const buttonRowGrid = isHorizontal && horizontalChildrenAreAllButtons(children);
+    const buttonRowCount = buttonRowGrid
+        ? countRenderableChildren(children)
+        : 0;
+    const columnsRaw = props.columns;
+    const columns = typeof columnsRaw === "number" &&
+        columnsRaw >= 2 &&
+        columnsRaw <= 6 &&
+        Number.isInteger(columnsRaw)
+        ? columnsRaw
+        : undefined;
+    const explicitColumnGrid = isHorizontal && columns !== undefined && !buttonRowGrid;
+    const justify = props.justify &&
+        (!isHorizontal || (!buttonRowGrid && !explicitColumnGrid))
+        ? JUSTIFY[String(props.justify)]
+        : undefined;
+    const isRowChild = parentDirection === "horizontal";
+    const packedHorizontal = isHorizontal &&
+        ((buttonRowGrid &&
+            buttonRowCount >= 1 &&
+            buttonRowCount <= 6) ||
+            explicitColumnGrid);
+    let horizontalBody = children;
+    if (isHorizontal &&
+        buttonRowGrid &&
+        buttonRowCount >= 1 &&
+        buttonRowCount <= 6) {
+        horizontalBody = wrapEqualColumnCells(children);
+    }
+    else if (isHorizontal && explicitColumnGrid && columns !== undefined) {
+        horizontalBody = wrapEqualColumnCells(children);
+    }
+    return (_jsx(SnapStackDirectionProvider, { direction: isHorizontal ? "horizontal" : "vertical", children: _jsx(View, { style: [
+                isRowChild ? styles.stackRowChild : styles.stack,
+                isHorizontal
+                    ? packedHorizontal
+                        ? styles.horizontalPacked
+                        : styles.horizontalDefault
+                    : styles.verticalStack,
+                { gap },
+                justify ? { justifyContent: justify } : undefined,
+            ], children: horizontalBody }) }));
 }
 const styles = StyleSheet.create({
     stack: {
         width: "100%",
+        minWidth: 0,
+    },
+    verticalStack: {
+        width: "100%",
+        minWidth: 0,
     },
-    horizontal: {
+    /** Nested stack inside a horizontal row — share width with siblings (matches web flex peers). */
+    stackRowChild: {
+        flexGrow: 1,
+        flexShrink: 1,
+        flexBasis: 0,
+        minWidth: 0,
+        maxWidth: "100%",
+        alignSelf: "stretch",
+    },
+    /** Default horizontal row: single line, equal-height peers. */
+    horizontalDefault: {
         flexDirection: "row",
-        alignItems: "center",
-        flexWrap: "wrap",
+        alignItems: "stretch",
+        flexWrap: "nowrap",
+        width: "100%",
+        minWidth: 0,
+    },
+    /** Single row for packed equal-width cells (button grids & explicit columns). */
+    horizontalPacked: {
+        flexDirection: "row",
+        flexWrap: "nowrap",
+        alignItems: "stretch",
+        width: "100%",
+        minWidth: 0,
+    },
+    equalColumnCell: {
+        flexGrow: 1,
+        flexShrink: 1,
+        flexBasis: 0,
+        minWidth: 0,
     },
 });

package/dist/react-native/components/snap-text.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { StyleSheet, Text, View } from "react-native";
+import { useSnapStackDirection } from "../stack-direction-context.js";
 import { useSnapTheme } from "../theme.js";
 const SIZE_STYLES = {
     md: { fontSize: 16, lineHeight: 24 },
@@ -18,7 +19,8 @@ export function SnapText({ element: { props }, }) {
     const sizeStyle = SIZE_STYLES[size] ?? SIZE_STYLES.md;
     const resolvedWeight = weight ? WEIGHT_MAP[weight] : sizeStyle?.fontWeight;
     const textAlign = align === "center" ? "center" : align === "right" ? "right" : "left";
-    return (_jsx(View, { style: styles.wrap, children: _jsx(Text, { style: [
+    const inHorizontalStack = useSnapStackDirection() === "horizontal";
+    return (_jsx(View, { style: inHorizontalStack ? styles.wrapRow : styles.wrapCol, children: _jsx(Text, { style: [
                 styles.base,
                 {
                     color: colors.text,
@@ -30,6 +32,9 @@ export function SnapText({ element: { props }, }) {
             ], children: content }) }));
 }
 const styles = StyleSheet.create({
-    wrap: { width: "100%" },
+    /** Full width for vertical stacks (alignment / wrapping). */
+    wrapCol: { width: "100%" },
+    /** Row peers: hug content; avoid width 100% fighting nowrap horizontal rows. */
+    wrapRow: { flexShrink: 1, minWidth: 0 },
     base: {},
 });

package/dist/react-native/stack-direction-context.d.ts

@@ -0,0 +1,7 @@
+import { type ReactNode } from "react";
+export type SnapStackDirection = "vertical" | "horizontal";
+export declare function SnapStackDirectionProvider({ direction, children, }: {
+    direction: SnapStackDirection;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useSnapStackDirection(): SnapStackDirection | undefined;