@farcaster/snap 2.3.1 → 2.5.0

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

@@ -14,6 +14,7 @@ export function SnapCellGrid({ element, emit, }) {
     const rows = Number(props.rows ?? 2);
     const cells = Array.isArray(props.cells) ? props.cells : [];
     const rowHeight = typeof props.rowHeight === "number" ? props.rowHeight : 28;
+    const squareCells = props.cellAspectRatio === "square";
     const gap = String(props.gap ?? "sm");
     const gapMap = { none: 0, sm: 1, md: 2, lg: 4 };
     const gapPx = gapMap[gap] ?? 1;
@@ -80,15 +81,36 @@ export function SnapCellGrid({ element, emit, }) {
             const textColor = bgHex ? readableTextOnHex(bgHex) : colors.text;
             const cellContent = cell?.content ? (_jsx(Text, { style: [styles.cellText, { color: textColor }], 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: [
+            const cellView = selected ? (_jsx(View, { style: [
+                    styles.cell,
+                    squareCells ? styles.squareCell : { height: rowHeight },
+                    { borderWidth: 1, borderColor: ringOuter, borderRadius: 4 },
+                ], children: _jsx(View, { style: [
                         styles.innerCell,
-                        { backgroundColor: bg, borderWidth: 1, borderColor: ringInner, borderRadius: 3 },
-                    ], children: cellContent }) })) : (_jsx(View, { style: [styles.cell, { height: rowHeight, backgroundColor: bg }], children: cellContent }));
+                        {
+                            backgroundColor: bg,
+                            borderWidth: 1,
+                            borderColor: ringInner,
+                            borderRadius: 3,
+                        },
+                    ], children: cellContent }) })) : (_jsx(View, { style: [
+                    styles.cell,
+                    squareCells ? styles.squareCell : { height: rowHeight },
+                    { backgroundColor: bg },
+                ], children: cellContent }));
             rowCells.push(interactive ? (_jsx(Pressable, { onPress: () => handleTap(r, c), style: styles.cellWrap, children: cellView }, `${r}-${c}`)) : (_jsx(View, { style: styles.cellWrap, children: cellView }, `${r}-${c}`)));
         }
         rowEls.push(_jsx(View, { style: [styles.gridRow, { gap: gapPx }], children: rowCells }, r));
     }
-    return (_jsx(View, { style: [styles.wrap, { gap: gapPx, backgroundColor: colors.muted, padding: 4, borderRadius: 8 }], children: rowEls }));
+    return (_jsx(View, { style: [
+            styles.wrap,
+            {
+                gap: gapPx,
+                backgroundColor: colors.muted,
+                padding: 4,
+                borderRadius: 8,
+            },
+        ], children: rowEls }));
 }
 const styles = StyleSheet.create({
     wrap: { width: "100%" },
@@ -99,6 +121,10 @@ const styles = StyleSheet.create({
         alignItems: "center",
         justifyContent: "center",
     },
+    squareCell: {
+        aspectRatio: 1,
+        width: "100%",
+    },
     innerCell: {
         width: "100%",
         height: "100%",

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

@@ -2,18 +2,28 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, Fragment } from "react";
 import { StyleSheet, View } from "react-native";
 import { useSnapTheme } from "../theme.js";
-const GAP_MAP = { none: 0, sm: 4, md: 8, lg: 12 };
+import { SnapItemGroupBorderProvider } from "./item-layout-context.js";
+const GAP_MAP = {
+    none: 0,
+    sm: 4,
+    md: 8,
+    lg: 12,
+};
 export function SnapItemGroup({ element: { props }, children, }) {
     const { colors } = useSnapTheme();
     const border = Boolean(props.border);
     const separator = Boolean(props.separator);
     const gap = GAP_MAP[String(props.gap ?? "sm")] ?? 4;
     const items = Children.toArray(children);
-    return (_jsx(View, { style: [
-            styles.group,
-            border && { borderWidth: 1, borderColor: colors.border, borderRadius: 12 },
-            { gap },
-        ], children: items.map((child, i) => (_jsxs(Fragment, { children: [separator && i > 0 && (_jsx(View, { style: { height: 1, backgroundColor: colors.border + "80" } })), child] }, i))) }));
+    return (_jsx(SnapItemGroupBorderProvider, { value: border, children: _jsx(View, { style: [
+                styles.group,
+                border && {
+                    borderWidth: 1,
+                    borderColor: colors.border,
+                    borderRadius: 12,
+                },
+                { gap },
+            ], children: items.map((child, i) => (_jsxs(Fragment, { children: [separator && i > 0 && (_jsx(View, { style: { height: 1, backgroundColor: colors.border + "80" } })), child] }, i))) }) }));
 }
 const styles = StyleSheet.create({
     group: {

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

@@ -1,21 +1,51 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Image } from "expo-image";
 import { StyleSheet, Text, View } from "react-native";
 import { useSnapStackDirection } from "../stack-direction-context.js";
 import { useSnapTheme } from "../theme.js";
+import { useSnapPalette } from "../use-snap-palette.js";
+import { useSnapItemGroupHasBorder } from "./item-layout-context.js";
+import { ICON_MAP } from "./snap-icon.js";
+function parseItemMedia(value) {
+    if (!value || typeof value !== "object")
+        return undefined;
+    const media = value;
+    if (media.variant === "icon" && typeof media.name === "string") {
+        return {
+            variant: "icon",
+            name: media.name,
+            color: typeof media.color === "string" ? media.color : undefined,
+        };
+    }
+    if (media.variant === "image" && typeof media.url === "string") {
+        return {
+            variant: "image",
+            url: media.url,
+            alt: typeof media.alt === "string" ? media.alt : undefined,
+            round: typeof media.round === "boolean" ? media.round : undefined,
+        };
+    }
+    return undefined;
+}
 export function SnapItem({ element: { props }, children, }) {
     const { colors } = useSnapTheme();
+    const { accentHex, hex } = useSnapPalette();
     const title = String(props.title ?? "");
-    const description = props.description
-        ? String(props.description)
-        : undefined;
+    const description = props.description ? String(props.description) : undefined;
+    const media = parseItemMedia(props.media);
+    const inBorderedGroup = useSnapItemGroupHasBorder();
     /** 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,
-            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 MediaIcon = media?.variant === "icon" ? ICON_MAP[media.name] : undefined;
+    const mediaColor = media?.variant === "icon" && media.color && media.color !== "accent"
+        ? hex(media.color)
+        : accentHex;
+    const containerVariant = {
+        paddingVertical: 6,
+        paddingHorizontal: inBorderedGroup ? 8 : 0,
+        columnGap: 8,
+    };
+    return (_jsxs(View, { style: [styles.container, containerVariant, rowPeer && styles.rowPeer], children: [media?.variant === "icon" && MediaIcon ? (_jsx(View, { style: styles.iconMedia, children: _jsx(MediaIcon, { size: 20, color: mediaColor }) })) : null, media?.variant === "image" ? (_jsx(View, { style: [styles.imageMedia, media.round && styles.roundImage], children: _jsx(Image, { source: { uri: media.url }, style: StyleSheet.absoluteFill, contentFit: "cover", accessibilityLabel: media.alt || undefined }) })) : null, _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: {
@@ -29,19 +59,32 @@ const styles = StyleSheet.create({
     content: {
         flex: 1,
     },
+    iconMedia: {
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    imageMedia: {
+        width: 40,
+        height: 40,
+        borderRadius: 6,
+        overflow: "hidden",
+        backgroundColor: "#f3f4f6",
+    },
+    roundImage: {
+        borderRadius: 9999,
+    },
     title: {
         fontSize: 15,
         lineHeight: 20,
         fontWeight: "500",
     },
     description: {
-        fontSize: 13,
-        lineHeight: 18,
-        marginTop: 1,
+        fontSize: 12,
+        lineHeight: 16,
     },
     actions: {
         marginLeft: "auto",
-        paddingLeft: 12,
+        paddingLeft: 8,
         flexDirection: "row",
         alignItems: "center",
         flexShrink: 0,

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

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Children } from "react";
 import { StyleSheet, View } from "react-native";
-import { countRenderableChildren, defaultHorizontalGapSize, horizontalChildrenAreAllButtons, } from "../../stack-horizontal-utils.js";
+import { childrenShouldUseHorizontalButtonLayout, childrenAreAllButtons, countRenderableChildren, defaultHorizontalGapSize, } from "../../stack-horizontal-utils.js";
 import { SnapStackDirectionProvider, useSnapStackDirection, } from "../stack-direction-context.js";
 const VGAP = {
     none: 0,
-    sm: 8,
+    sm: 4,
     md: 16,
     lg: 24,
 };
@@ -22,62 +22,60 @@ const JUSTIFY = {
     between: "space-between",
     around: "space-around",
 };
-/** Equal-width cells for explicit `columns` and all-button horizontal rows. */
+/** Equal-width cells for explicit `equalWidth` / `columns` props. */
 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 buttonContentUsesHorizontal = childrenShouldUseHorizontalButtonLayout(children);
+    const direction = buttonContentUsesHorizontal === undefined
+        ? String(props.direction ?? "vertical")
+        : buttonContentUsesHorizontal
+            ? "horizontal"
+            : "vertical";
     const rawGap = props.gap;
     const isHorizontal = direction === "horizontal";
     const gapMap = isHorizontal ? HGAP : VGAP;
-    const buttonRowGrid = isHorizontal && horizontalChildrenAreAllButtons(children);
-    const buttonRowCount = buttonRowGrid
-        ? countRenderableChildren(children)
-        : 0;
+    const allChildrenAreButtons = childrenAreAllButtons(children);
     const columnsRaw = props.columns;
+    const equalWidth = props.equalWidth === true;
     const columns = typeof columnsRaw === "number" &&
         columnsRaw >= 2 &&
         columnsRaw <= 6 &&
         Number.isInteger(columnsRaw)
         ? columnsRaw
         : undefined;
-    // Horizontal default depends on column count: 2→lg, 3→md, 4+→sm. Vertical stays md.
-    // Count comes from explicit `columns`, then button-row inference, else direct children
-    // count (any horizontal stack is N columns wide regardless of child types).
-    const horizontalColumnCount = isHorizontal
-        ? (columns ??
-            (buttonRowGrid ? buttonRowCount : undefined) ??
-            countRenderableChildren(children))
+    const equalWidthColumnCount = columns ?? (equalWidth ? countRenderableChildren(children) : undefined);
+    const explicitEqualWidth = isHorizontal &&
+        equalWidthColumnCount !== undefined &&
+        equalWidthColumnCount >= 1 &&
+        equalWidthColumnCount <= 6;
+    // Button-only stacks always default to sm; mixed horizontal stacks scale by child count.
+    // Vertical non-button stacks default to md.
+    const horizontalChildCount = isHorizontal
+        ? (explicitEqualWidth
+            ? equalWidthColumnCount
+            : countRenderableChildren(children))
         : undefined;
     const gap = typeof rawGap === "number"
         ? rawGap
         : typeof rawGap === "string" && rawGap in gapMap
             ? gapMap[rawGap]
-            : isHorizontal
-                ? gapMap[defaultHorizontalGapSize(horizontalColumnCount)]
-                : VGAP.md;
-    const explicitColumnGrid = isHorizontal && columns !== undefined && !buttonRowGrid;
+            : allChildrenAreButtons
+                ? gapMap.sm
+                : isHorizontal
+                    ? gapMap[defaultHorizontalGapSize(horizontalChildCount)]
+                    : VGAP.md;
     const justify = props.justify &&
-        (!isHorizontal || (!buttonRowGrid && !explicitColumnGrid))
+        (!isHorizontal || !explicitEqualWidth)
         ? JUSTIFY[String(props.justify)]
         : undefined;
     const isRowChild = parentDirection === "horizontal";
-    const packedHorizontal = isHorizontal &&
-        ((buttonRowGrid &&
-            buttonRowCount >= 1 &&
-            buttonRowCount <= 6) ||
-            explicitColumnGrid);
+    const packedHorizontal = isHorizontal && explicitEqualWidth;
     let horizontalBody = children;
-    if (isHorizontal &&
-        buttonRowGrid &&
-        buttonRowCount >= 1 &&
-        buttonRowCount <= 6) {
-        horizontalBody = wrapEqualColumnCells(children);
-    }
-    else if (isHorizontal && explicitColumnGrid && columns !== undefined) {
+    if (isHorizontal && explicitEqualWidth) {
         horizontalBody = wrapEqualColumnCells(children);
     }
     return (_jsx(SnapStackDirectionProvider, { direction: isHorizontal ? "horizontal" : "vertical", children: _jsx(View, { style: [
@@ -117,7 +115,7 @@ const styles = StyleSheet.create({
         width: "100%",
         minWidth: 0,
     },
-    /** Single row for packed equal-width cells (button grids & explicit columns). */
+    /** Single row for packed equal-width cells from explicit equal-width layout. */
     horizontalPacked: {
         flexDirection: "row",
         flexWrap: "nowrap",
@@ -130,5 +128,6 @@ const styles = StyleSheet.create({
         flexShrink: 1,
         flexBasis: 0,
         minWidth: 0,
+        alignSelf: "stretch",
     },
 });

package/dist/react-native/components/snap-toggle-group.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useStateStore } from "@json-render/react-native";
 import { Pressable, StyleSheet, Text, View } from "react-native";
+import { shouldUseHorizontalButtonContent } from "../../button-orientation-utils.js";
 import { useSnapTheme } from "../theme.js";
 export function SnapToggleGroup({ element: { props }, }) {
     const { get, set } = useStateStore();
@@ -9,7 +10,6 @@ export function SnapToggleGroup({ element: { props }, }) {
     const path = `/inputs/${name}`;
     const label = props.label ? String(props.label) : undefined;
     const isMultiple = Boolean(props.multiple);
-    const orientation = String(props.orientation ?? "horizontal");
     const options = Array.isArray(props.options)
         ? props.options
         : [];
@@ -32,7 +32,7 @@ export function SnapToggleGroup({ element: { props }, }) {
         }
         return [];
     })();
-    const isVertical = orientation === "vertical";
+    const isVertical = !shouldUseHorizontalButtonContent(options);
     const handlePress = (opt) => {
         if (isMultiple) {
             const next = selected.includes(opt)
@@ -64,7 +64,7 @@ export function SnapToggleGroup({ element: { props }, }) {
                         ], onPress: () => handlePress(opt), children: _jsx(Text, { style: [
                                 styles.optionText,
                                 { color: colors.text },
-                            ], children: opt }) }, index));
+                            ], children: opt }) }, `${opt}-${index}`));
                 }) })] }));
 }
 const styles = StyleSheet.create({
@@ -89,7 +89,8 @@ const styles = StyleSheet.create({
         justifyContent: "center",
     },
     optionHorizontal: {
-        flex: 1,
+        flexGrow: 1,
+        flexShrink: 1,
     },
     optionText: {
         fontSize: 13,

package/dist/react-native/fireworks-overlay.d.ts

@@ -0,0 +1 @@
+export declare function FireworksOverlay(): import("react").JSX.Element;

package/dist/react-native/fireworks-overlay.js

@@ -0,0 +1,125 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Animated, StyleSheet, View, useWindowDimensions } from "react-native";
+const FIREWORK_COLORS = [
+    "#FFD700",
+    "#FF6B6B",
+    "#4ECDC4",
+    "#C4A7E7",
+    "#F6C177",
+    "#EBBCBA",
+    "#9CCFD8",
+    "#fff",
+];
+const BURST_COUNT = 5;
+const PARTICLE_COUNT = 24;
+function FireworkBurst({ burst }) {
+    const flashAnim = useRef(new Animated.Value(0)).current;
+    const burstAnim = useRef(new Animated.Value(0)).current;
+    useEffect(() => {
+        const composite = Animated.parallel([
+            Animated.timing(flashAnim, {
+                toValue: 1,
+                duration: 400,
+                useNativeDriver: true,
+            }),
+            Animated.timing(burstAnim, {
+                toValue: 1,
+                duration: 1000,
+                useNativeDriver: true,
+            }),
+        ]);
+        composite.start();
+        return () => composite.stop();
+    }, [flashAnim, burstAnim]);
+    const flashOpacity = flashAnim.interpolate({
+        inputRange: [0, 0.25, 1],
+        outputRange: [0, 1, 0],
+    });
+    const flashScale = flashAnim.interpolate({
+        inputRange: [0, 0.25, 1],
+        outputRange: [0, 2.5, 5],
+    });
+    return (_jsxs(_Fragment, { children: [_jsx(Animated.View, { style: [
+                    styles.flash,
+                    {
+                        left: burst.x - 6,
+                        top: burst.y - 6,
+                        opacity: flashOpacity,
+                        transform: [{ scale: flashScale }],
+                    },
+                ] }), burst.particles.map((p) => {
+                const opacity = burstAnim.interpolate({
+                    inputRange: [0, 0.65, 1],
+                    outputRange: [1, 1, 0],
+                });
+                const translateX = burstAnim.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [0, p.vx],
+                });
+                const translateY = burstAnim.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [0, p.vy],
+                });
+                const scale = burstAnim.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [1, 0],
+                });
+                return (_jsx(Animated.View, { style: [
+                        styles.particle,
+                        {
+                            left: burst.x - p.size / 2,
+                            top: burst.y - p.size / 2,
+                            width: p.size,
+                            height: p.size,
+                            backgroundColor: p.color,
+                            opacity,
+                            transform: [{ translateX }, { translateY }, { scale }],
+                        },
+                    ] }, p.id));
+            })] }));
+}
+export function FireworksOverlay() {
+    const { width, height } = useWindowDimensions();
+    const bursts = useMemo(() => Array.from({ length: BURST_COUNT }, (_, b) => ({
+        id: b,
+        x: (0.15 + Math.random() * 0.7) * width,
+        y: (0.1 + Math.random() * 0.5) * height,
+        delay: b * 500 + Math.random() * 200,
+        particles: Array.from({ length: PARTICLE_COUNT }, (_, p) => {
+            const angle = (p / PARTICLE_COUNT) * Math.PI * 2 + (Math.random() - 0.5) * 0.2;
+            const dist = 55 + Math.random() * 60;
+            return {
+                id: p,
+                vx: Math.cos(angle) * dist,
+                vy: Math.sin(angle) * dist,
+                color: FIREWORK_COLORS[Math.floor(Math.random() * FIREWORK_COLORS.length)],
+                size: 3 + Math.random() * 3,
+            };
+        }),
+    })), 
+    // stable on mount
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    const [mountedBursts, setMountedBursts] = useState([]);
+    useEffect(() => {
+        const timers = bursts.map((burst, b) => setTimeout(() => {
+            setMountedBursts((prev) => [...prev, b]);
+        }, burst.delay));
+        return () => timers.forEach(clearTimeout);
+    }, [bursts]);
+    return (_jsx(View, { style: StyleSheet.absoluteFill, pointerEvents: "none", children: mountedBursts.map((b) => (_jsx(FireworkBurst, { burst: bursts[b] }, b))) }));
+}
+const styles = StyleSheet.create({
+    flash: {
+        position: "absolute",
+        width: 12,
+        height: 12,
+        borderRadius: 6,
+        backgroundColor: "#fff",
+    },
+    particle: {
+        position: "absolute",
+        borderRadius: 999,
+    },
+});

package/dist/react-native/snap-view-core.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { snapJsonRenderCatalog } from "@farcaster/snap/ui";
 import { SnapCatalogView } from "./catalog-renderer.js";
 import { ConfettiOverlay } from "./confetti-overlay.js";
+import { FireworksOverlay } from "./fireworks-overlay.js";
 import { useSnapTheme } from "./theme.js";
 import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
 import { ActivityIndicator, StyleSheet, View } from "react-native";
@@ -81,11 +82,15 @@ export function SnapViewCoreInner({ snap, handlers, loading = false, loadingOver
         setPageKey((k) => k + 1);
     }, [spec]);
     const showConfetti = snap.effects?.includes("confetti") ?? false;
+    const showFireworks = snap.effects?.includes("fireworks") ?? false;
     const [confettiKey, setConfettiKey] = useState(0);
+    const [fireworksKey, setFireworksKey] = useState(0);
     useEffect(() => {
         if (showConfetti)
             setConfettiKey((k) => k + 1);
-    }, [showConfetti, snap]);
+        if (showFireworks)
+            setFireworksKey((k) => k + 1);
+    }, [showConfetti, showFireworks, snap]);
     const handlersRef = useRef(handlers);
     handlersRef.current = handlers;
     const handleAction = useCallback((name, params) => {
@@ -147,7 +152,7 @@ export function SnapViewCoreInner({ snap, handlers, loading = false, loadingOver
                     : loadingOverlay
                 : null, _jsx(SnapCatalogView, { spec: spec, state: initialState, loading: false, onStateChange: (changes) => {
                     applyStatePaths(stateRef.current, changes);
-                }, onAction: handleAction }, pageKey), showConfetti && _jsx(ConfettiOverlay, {}, confettiKey)] }));
+                }, onAction: handleAction }, pageKey), showConfetti && _jsx(ConfettiOverlay, {}, confettiKey), showFireworks && _jsx(FireworksOverlay, {}, fireworksKey)] }));
 }
 export function SnapLoadingOverlay({ appearance, accentHex, }) {
     return (_jsx(View, { style: [

package/dist/schemas.d.ts

@@ -30,6 +30,7 @@ export declare const snapResponseSchema: z.ZodObject<{
     }, z.core.$strict>>>;
     effects: z.ZodOptional<z.ZodArray<z.ZodEnum<{
         confetti: "confetti";
+        fireworks: "fireworks";
     }>>>;
     ui: z.ZodCustom<Spec, Spec>;
 }, z.core.$strict>;

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

@@ -1,10 +1,12 @@
 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 childrenAreAllButtons(children: ReactNode): boolean;
+export declare function getButtonChildLabels(children: ReactNode): string[] | undefined;
+export declare function childrenShouldUseHorizontalButtonLayout(children: ReactNode): boolean | undefined;
+/** Direct snap catalog children under a stack (used for horizontal gap defaults). */
 export declare function countRenderableChildren(children: ReactNode): number;
 /**
- * Default horizontal stack gap as a t-shirt size, chosen by column count:
- * 2 cols → lg, 3 cols → md, 4+ cols → sm. Unknown count falls back to md.
+ * Default horizontal stack gap as a t-shirt size, chosen by direct child count:
+ * 2 children → lg, 3 children → md, 4+ children → sm. Unknown count falls back to md.
  * Tighter gaps for denser layouts; authors can always override via the `gap` prop.
  */
-export declare function defaultHorizontalGapSize(columnCount: number | undefined): "sm" | "md" | "lg";
+export declare function defaultHorizontalGapSize(childCount: number | undefined): "sm" | "md" | "lg";

package/dist/stack-horizontal-utils.js

@@ -1,4 +1,5 @@
 import { Children, isValidElement } from "react";
+import { shouldUseHorizontalButtonContent } from "./button-orientation-utils.js";
 /**
  * True when every rendered child comes from a catalog `button` element.
  * json-render passes `{ element: { type, props, ... } }` into each catalog component.
@@ -10,34 +11,43 @@ function isRenderableChild(c) {
         return false;
     return true;
 }
-export function horizontalChildrenAreAllButtons(children) {
+export function childrenAreAllButtons(children) {
+    return getButtonChildLabels(children) !== undefined;
+}
+export function getButtonChildLabels(children) {
     const items = Children.toArray(children).filter(isRenderableChild);
     if (items.length === 0)
-        return false;
+        return undefined;
+    const labels = [];
     for (const child of items) {
         if (!isValidElement(child))
-            return false;
-        const typ = child.props.element?.type;
-        if (typ !== "button")
-            return false;
+            return undefined;
+        const element = child.props.element;
+        if (element?.type !== "button")
+            return undefined;
+        labels.push(String(element.props?.label ?? ""));
     }
-    return true;
+    return labels;
+}
+export function childrenShouldUseHorizontalButtonLayout(children) {
+    const labels = getButtonChildLabels(children);
+    return labels ? shouldUseHorizontalButtonContent(labels) : undefined;
 }
-/** Direct snap catalog children under a stack (used for all-button grid column count). */
+/** Direct snap catalog children under a stack (used for horizontal gap defaults). */
 export function countRenderableChildren(children) {
     return Children.toArray(children).filter(isRenderableChild).length;
 }
 /**
- * Default horizontal stack gap as a t-shirt size, chosen by column count:
- * 2 cols → lg, 3 cols → md, 4+ cols → sm. Unknown count falls back to md.
+ * Default horizontal stack gap as a t-shirt size, chosen by direct child count:
+ * 2 children → lg, 3 children → md, 4+ children → sm. Unknown count falls back to md.
  * Tighter gaps for denser layouts; authors can always override via the `gap` prop.
  */
-export function defaultHorizontalGapSize(columnCount) {
-    if (columnCount === undefined)
+export function defaultHorizontalGapSize(childCount) {
+    if (childCount === undefined)
         return "md";
-    if (columnCount <= 2)
+    if (childCount <= 2)
         return "lg";
-    if (columnCount === 3)
+    if (childCount === 3)
         return "md";
     return "sm";
 }