@farcaster/snap 2.1.0 → 2.1.2

package/dist/constants.d.ts

@@ -14,6 +14,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

@@ -15,7 +15,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/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/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/v2/snap-view.js

@@ -6,6 +6,7 @@ import { SnapViewCore, SnapLoadingOverlay } from "../snap-view-core.js";
 import { resolveSnapPaletteHex } from "../lib/resolve-palette-hex.js";
 const SNAP_MAX_HEIGHT = 500;
 const SNAP_WARNING_HEIGHT = 700;
+const SHOW_MORE_OVERHANG = 14;
 // ─── Default validation error fallback ────────────────
 function SnapValidationFallback({ appearance, message, }) {
     const isDark = appearance === "dark";
@@ -83,7 +84,9 @@ export function SnapCardV2({ snap, handlers, loading = false, appearance = "dark
     }, [isExpandable]);
     const isClipped = !showOverflowWarning && isExpandable && !isExpanded;
     const containerMaxHeight = showOverflowWarning ? SNAP_WARNING_HEIGHT : undefined;
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
+    return (_jsxs("div", { style: {
+            paddingBottom: !showOverflowWarning && isExpandable ? SHOW_MORE_OVERHANG : 0,
+        }, children: [_jsxs("div", { style: {
                     position: "relative",
                     width: "100%",
                     maxWidth,

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;

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

@@ -0,0 +1,9 @@
+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/v2/snap-view.js

@@ -7,6 +7,7 @@ import { validateSnapResponse, } from "@farcaster/snap";
 // ─── Constants ───────────────────────────────────────
 const SNAP_MAX_HEIGHT = 500;
 const SNAP_WARNING_HEIGHT = 700;
+const SHOW_MORE_OVERHANG = 14;
 // ─── Validation fallback ─────────────────────────────
 function SnapValidationFallback({ message }) {
     const { colors } = useSnapTheme();
@@ -85,7 +86,7 @@ function SnapCardV2Inner({ snap, handlers, loading, borderRadius, showOverflowWa
     const isDark = mode === "dark";
     const pillBg = isDark ? "rgba(40,40,40,0.92)" : "rgba(255,255,255,0.92)";
     const pillBgPressed = isDark ? "rgba(60,60,60,0.95)" : "rgba(240,240,240,0.95)";
-    return (_jsxs(_Fragment, { children: [_jsxs(View, { style: { position: "relative" }, children: [_jsxs(View, { style: {
+    return (_jsxs(View, { style: { paddingBottom: isExpandable ? SHOW_MORE_OVERHANG : 0 }, children: [_jsxs(View, { style: { position: "relative" }, children: [_jsxs(View, { style: {
                             borderRadius,
                             borderWidth: 1,
                             borderColor: colors.border,

package/dist/stack-horizontal-utils.d.ts

@@ -0,0 +1,4 @@
+import { type ReactNode } from "react";
+export declare function horizontalChildrenAreAllButtons(children: ReactNode): boolean;
+/** Direct snap catalog children under a stack (used for all-button grid column count). */
+export declare function countRenderableChildren(children: ReactNode): number;

package/dist/stack-horizontal-utils.js

@@ -0,0 +1,29 @@
+import { Children, isValidElement } from "react";
+/**
+ * True when every rendered child comes from a catalog `button` element.
+ * json-render passes `{ element: { type, props, ... } }` into each catalog component.
+ */
+function isRenderableChild(c) {
+    if (c == null)
+        return false;
+    if (typeof c === "boolean")
+        return false;
+    return true;
+}
+export function horizontalChildrenAreAllButtons(children) {
+    const items = Children.toArray(children).filter(isRenderableChild);
+    if (items.length === 0)
+        return false;
+    for (const child of items) {
+        if (!isValidElement(child))
+            return false;
+        const typ = child.props.element?.type;
+        if (typ !== "button")
+            return false;
+    }
+    return true;
+}
+/** Direct snap catalog children under a stack (used for all-button grid column count). */
+export function countRenderableChildren(children) {
+    return Children.toArray(children).filter(isRenderableChild).length;
+}

package/dist/ui/catalog.d.ts

@@ -318,6 +318,7 @@ export declare const snapJsonRenderCatalog: import("@json-render/core").Catalog<
                     between: "between";
                     around: "around";
                 }>>;
+                columns: z.ZodOptional<z.ZodUnion<readonly [z.ZodLiteral<2>, z.ZodLiteral<3>, z.ZodLiteral<4>, z.ZodLiteral<5>, z.ZodLiteral<6>]>>;
             }, z.core.$strip>;
             description: string;
         };

package/dist/ui/catalog.js

@@ -78,7 +78,7 @@ export const snapJsonRenderCatalog = defineCatalog(snapJsonRenderSchema, {
         },
         stack: {
             props: stackProps,
-            description: "Layout container — direction: vertical (default) | horizontal. Children are element ids in order.",
+            description: "Layout container — direction: vertical (default) | horizontal. Children are element ids in order. Horizontal stacks use a single flex row so peers stay side-by-side and shrink with min-width 0. Nested stacks participate as flexible row peers. All-button horizontal stacks use an equal N-column grid where N is the number of buttons (1–6). Optional `columns` (`2`–`6`) forces an explicit equal grid for mixed children.",
         },
         text: {
             props: textProps,

package/dist/ui/stack.d.ts

@@ -20,5 +20,6 @@ export declare const stackProps: z.ZodObject<{
         between: "between";
         around: "around";
     }>>;
+    columns: z.ZodOptional<z.ZodUnion<readonly [z.ZodLiteral<2>, z.ZodLiteral<3>, z.ZodLiteral<4>, z.ZodLiteral<5>, z.ZodLiteral<6>]>>;
 }, z.core.$strip>;
 export type StackProps = z.infer<typeof stackProps>;