@farcaster/snap 2.4.0 → 2.5.0

package/dist/button-orientation-utils.d.ts

@@ -0,0 +1,3 @@
+export type ButtonContentOrientation = "horizontal" | "vertical";
+export declare function getButtonContentOrientation(labels: readonly string[]): ButtonContentOrientation;
+export declare function shouldUseHorizontalButtonContent(labels: readonly string[]): boolean;

package/dist/button-orientation-utils.js

@@ -0,0 +1,25 @@
+const MAX_HORIZONTAL_TOTAL_LENGTH = {
+    2: 20,
+    3: 15,
+    4: 11,
+    5: 8,
+};
+function displayLength(label) {
+    return Array.from(label.trim().replace(/\s+/g, " ")).length;
+}
+export function getButtonContentOrientation(labels) {
+    const lengths = labels
+        .map((label) => displayLength(label))
+        .filter((length) => length > 0);
+    const count = lengths.length;
+    if (count <= 1)
+        return "horizontal";
+    const maxTotalLength = MAX_HORIZONTAL_TOTAL_LENGTH[count] ?? 0;
+    if (maxTotalLength === 0)
+        return "vertical";
+    const totalLength = lengths.reduce((sum, length) => sum + length, 0);
+    return totalLength <= maxTotalLength ? "horizontal" : "vertical";
+}
+export function shouldUseHorizontalButtonContent(labels) {
+    return getButtonContentOrientation(labels) === "horizontal";
+}

package/dist/constants.d.ts

@@ -12,6 +12,7 @@ export declare const GRID_MAX_COLS = 32;
 export declare const GRID_MIN_ROWS = 2;
 export declare const GRID_MAX_ROWS = 16;
 export declare const GRID_GAP_VALUES: readonly ["none", "sm", "md", "lg"];
+export declare const GRID_CELL_ASPECT_RATIO_VALUES: readonly ["auto", "square"];
 export declare const MAX_ELEMENTS = 64;
 export declare const MAX_ROOT_CHILDREN = 7;
 export declare const MAX_CHILDREN = 6;

package/dist/constants.js

@@ -15,6 +15,7 @@ export const GRID_MAX_COLS = 32;
 export const GRID_MIN_ROWS = 2;
 export const GRID_MAX_ROWS = 16;
 export const GRID_GAP_VALUES = ["none", "sm", "md", "lg"];
+export const GRID_CELL_ASPECT_RATIO_VALUES = ["auto", "square"];
 // ─── Snap structural limits ───────────────────────────
 export const MAX_ELEMENTS = 64;
 export const MAX_ROOT_CHILDREN = 7;

package/dist/react/components/action-button.js

@@ -44,11 +44,11 @@ export function SnapActionButton({ element, emit, }) {
     };
     return (
     /**
-     * In a horizontal stack, `flex-1` lets the wrapper share row width with peers.
-     * In a vertical stack, `flex-1` would silently grow the button to fill column
-     * height (1/N distribution when siblings also flex-grow); stick to `w-full`.
+     * In a horizontal stack, `flex-auto` lets the row fill available width while
+     * preserving content-proportional button widths. In a vertical stack, flex
+     * growth would silently stretch button height; stick to `w-full`.
      */
     _jsx("div", { className: inHorizontalStack
-            ? "w-full min-w-0 flex-1"
-            : "w-full min-w-0", children: _jsxs(Button, { type: "button", variant: isPrimary ? "default" : "secondary", className: cn("w-full gap-2"), style: style, onClick: () => emit("press"), onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), children: [Icon && _jsx(Icon, { size: 16 }), label, showExternalIcon && (_jsx(ExternalLink, { size: 14, style: { opacity: 0.6 } }))] }) }));
+            ? "min-w-0 flex-auto"
+            : "w-full min-w-0", style: inHorizontalStack ? { flex: "1 1 auto" } : undefined, children: _jsxs(Button, { type: "button", variant: isPrimary ? "default" : "secondary", className: cn("w-full gap-2"), style: style, onClick: () => emit("press"), onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), children: [Icon && _jsx(Icon, { size: 16 }), label, showExternalIcon && (_jsx(ExternalLink, { size: 14, style: { opacity: 0.6 } }))] }) }));
 }

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

@@ -19,6 +19,7 @@ export function SnapCellGrid({ element: { props, on }, emit, }) {
     const gapMap = { none: 0, sm: 1, md: 2, lg: 4 };
     const gapPx = gapMap[gap] ?? 1;
     const rowHeight = typeof props.rowHeight === "number" ? props.rowHeight : 28;
+    const squareCells = props.cellAspectRatio === "square";
     const name = props.name ? String(props.name) : POST_GRID_TAP_KEY;
     const tapPath = `/inputs/${name}`;
     const tapRaw = get(tapPath);
@@ -63,7 +64,9 @@ export function SnapCellGrid({ element: { props, on }, emit, }) {
             emit("press");
     };
     /** 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 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++) {
@@ -80,7 +83,8 @@ export function SnapCellGrid({ element: { props, on }, emit, }) {
                         }
                     }
                     : undefined, className: cn("flex items-center justify-center rounded text-xs font-semibold", interactive ? "cursor-pointer select-none" : "cursor-default"), style: {
-                    height: rowHeight,
+                    height: squareCells ? undefined : rowHeight,
+                    aspectRatio: squareCells ? "1 / 1" : undefined,
                     background: bg,
                     color: textColor,
                     boxShadow: selected

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

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, Fragment } from "react";
 import { cn } from "@neynar/ui/utils";
 import { useSnapColors } from "../hooks/use-snap-colors.js";
+import { SnapItemGroupBorderProvider } from "./item-layout-context.js";
 const GAP_MAP = {
     none: "gap-0",
     sm: "gap-1",
@@ -15,5 +16,5 @@ export function SnapItemGroup({ element: { props }, children, }) {
     const gap = GAP_MAP[String(props.gap ?? "sm")] ?? "gap-1";
     const items = Children.toArray(children);
     const colors = useSnapColors();
-    return (_jsx("div", { className: cn("flex flex-col", border && "rounded-lg border", gap), style: border ? { borderColor: colors.border } : undefined, children: items.map((child, i) => (_jsxs(Fragment, { children: [separator && i > 0 && (_jsx("div", { className: "h-px", style: { backgroundColor: colors.border } })), child] }, i))) }));
+    return (_jsx(SnapItemGroupBorderProvider, { value: border, children: _jsx("div", { className: cn("flex flex-col", border && "rounded-lg border", gap), style: border ? { borderColor: colors.border } : undefined, children: items.map((child, i) => (_jsxs(Fragment, { children: [separator && i > 0 && (_jsx("div", { className: "h-px", style: { backgroundColor: colors.border } })), child] }, i))) }) }));
 }

package/dist/react/components/item-layout-context.d.ts

@@ -0,0 +1,2 @@
+export declare const SnapItemGroupBorderProvider: import("react").Provider<boolean>;
+export declare function useSnapItemGroupHasBorder(): boolean;

package/dist/react/components/item-layout-context.js

@@ -0,0 +1,7 @@
+"use client";
+import { createContext, useContext } from "react";
+const SnapItemGroupBorderContext = createContext(false);
+export const SnapItemGroupBorderProvider = SnapItemGroupBorderContext.Provider;
+export function useSnapItemGroupHasBorder() {
+    return useContext(SnapItemGroupBorderContext);
+}

package/dist/react/components/item.js

@@ -1,15 +1,52 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Item, ItemContent, ItemTitle, ItemDescription, ItemActions, } from "@neynar/ui/item";
+import { Item, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemMedia, } from "@neynar/ui/item";
 import { cn } from "@neynar/ui/utils";
 import { useSnapColors } from "../hooks/use-snap-colors.js";
 import { useSnapStackDirection } from "../stack-direction-context.js";
+import { ICON_MAP } from "./icon.js";
+import { useSnapItemGroupHasBorder } from "./item-layout-context.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: childIds }, children, }) {
     const title = String(props.title ?? "");
     const description = props.description ? String(props.description) : undefined;
+    const media = parseItemMedia(props.media);
     const colors = useSnapColors();
+    const inBorderedGroup = useSnapItemGroupHasBorder();
     const inHorizontalStack = useSnapStackDirection() === "horizontal";
-    return (_jsxs(Item, { className: cn("py-1.5 px-2.5", 
+    const MediaIcon = media?.variant === "icon" ? ICON_MAP[media.name] : undefined;
+    return (_jsxs(Item, { className: cn("gap-2 py-1.5", inBorderedGroup ? "px-2" : "px-0", 
         /** Horizontal: share width with peers. Vertical: don't fill column height. */
-        inHorizontalStack && "flex-1"), children: [_jsxs(ItemContent, { className: "gap-0.5", children: [_jsx(ItemTitle, { style: { color: colors.text }, children: title }), description && (_jsx(ItemDescription, { className: "mt-0", style: { color: colors.textMuted }, children: description }))] }), childIds && childIds.length > 0 && _jsx(ItemActions, { children: children })] }));
+        inHorizontalStack && "flex-1"), style: {
+            columnGap: 8,
+            paddingInline: inBorderedGroup ? 8 : 0,
+        }, children: [media?.variant === "icon" && MediaIcon && (_jsx(ItemMedia, { variant: "icon", className: "self-center translate-y-0", style: { alignSelf: "center", transform: "none" }, children: _jsx(MediaIcon, { size: 20, style: { color: colors.colorHex(media.color) } }) })), media?.variant === "image" && (_jsx(ItemMedia, { variant: "image", className: "self-center translate-y-0", style: {
+                    alignSelf: "center",
+                    borderRadius: media.round ? "9999px" : undefined,
+                    transform: "none",
+                }, children: _jsx("img", { src: media.url, alt: media.alt ?? "", className: "size-full object-cover" }) })), _jsxs(ItemContent, { className: "gap-0", children: [_jsx(ItemTitle, { style: { color: colors.text }, children: title }), description && (_jsx(ItemDescription, { className: "mt-0 text-xs leading-snug", style: {
+                            color: colors.textMuted,
+                            fontSize: 12,
+                            lineHeight: "16px",
+                        }, children: description }))] }), childIds && childIds.length > 0 && (_jsx(ItemActions, { className: "gap-1.5 self-center", style: { alignSelf: "center", columnGap: 6 }, children: children }))] }));
 }

package/dist/react/components/stack.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "@neynar/ui/utils";
-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: "gap-0",
-    sm: "gap-2",
+    sm: "gap-1",
     md: "gap-4",
     lg: "gap-6",
 };
@@ -22,52 +22,60 @@ const JUSTIFY_FLEX = {
     between: "justify-between",
     around: "justify-around",
 };
-/** Equal columns for explicit `columns` prop and for all-button horizontal rows. */
+/** Equal-width cell count for explicit `equalWidth` / `columns` props. */
 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",
+    1: "auto-rows-auto items-stretch [&>*]:min-w-0 [&>*]:w-full",
+    2: "auto-rows-auto items-stretch [&>*]:min-w-0 [&>*]:w-full",
+    3: "auto-rows-auto items-stretch [&>*]:min-w-0 [&>*]:w-full",
+    4: "auto-rows-auto items-stretch [&>*]:min-w-0 [&>*]:w-full",
+    5: "auto-rows-auto items-stretch [&>*]:min-w-0 [&>*]:w-full",
+    6: "auto-rows-auto items-stretch [&>*]:min-w-0 [&>*]:w-full",
 };
 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 isHorizontal = direction === "horizontal";
     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 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 explicitGap = typeof props.gap === "string" && props.gap in (isHorizontal ? HGAP : VGAP);
     const gapKey = explicitGap
         ? String(props.gap)
-        : isHorizontal
-            ? defaultHorizontalGapSize(horizontalColumnCount)
-            : "md";
+        : allChildrenAreButtons
+            ? "sm"
+            : isHorizontal
+                ? defaultHorizontalGapSize(horizontalChildCount)
+                : "md";
     const gap = isHorizontal
         ? (HGAP[gapKey] ?? HGAP.md)
         : (VGAP[gapKey] ?? VGAP.md);
-    const explicitColumnGrid = isHorizontal && columns !== undefined && !buttonRowGrid;
-    const columnGridClass = explicitColumnGrid && columns !== undefined
-        ? COLUMN_GRID_CLASS[columns]
+    const columnGridClass = explicitEqualWidth && equalWidthColumnCount !== undefined
+        ? COLUMN_GRID_CLASS[equalWidthColumnCount]
         : undefined;
     /**
      * Row peers under a horizontal stack must shrink and share width (`flex-1` + `min-w-0`).
@@ -79,17 +87,18 @@ export function SnapStack({ element: { props }, children, }) {
         ? "min-w-0 flex-1 basis-0 max-w-full"
         : "w-full min-w-0";
     const justifyBlockGrid = justifyFlex &&
-        (!isHorizontal || (!buttonRowGrid && !explicitColumnGrid));
+        (!isHorizontal || !explicitEqualWidth);
     /** 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";
+    const equalWidthStyle = explicitEqualWidth && equalWidthColumnCount !== undefined
+        ? {
+            display: "grid",
+            gridTemplateColumns: `repeat(${equalWidthColumnCount}, minmax(0, 1fr))`,
+        }
+        : undefined;
     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 }) }));
+                ? explicitEqualWidth && columnGridClass
+                    ? cn(columnGridClass, gap)
+                    : cn(horizontalFlexClasses, gap, justifyBlockGrid ? justifyFlex : undefined)
+                : cn("flex min-w-0 w-full flex-col", gap, justifyFlex)), style: equalWidthStyle, children: children }) }));
 }

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

@@ -4,6 +4,7 @@ import { useState } from "react";
 import { useStateStore } from "@json-render/react";
 import { Label } from "@neynar/ui/label";
 import { cn } from "@neynar/ui/utils";
+import { shouldUseHorizontalButtonContent } from "../../button-orientation-utils.js";
 import { useSnapColors } from "../hooks/use-snap-colors.js";
 export function SnapToggleGroup({ element: { props }, }) {
     const { get, set } = useStateStore();
@@ -12,7 +13,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
         : [];
@@ -43,12 +43,14 @@ export function SnapToggleGroup({ element: { props }, }) {
             set(path, opt);
         }
     };
-    const isVertical = orientation === "vertical";
+    const isVertical = !shouldUseHorizontalButtonContent(options);
     const [hoveredIdx, setHoveredIdx] = useState(null);
     return (_jsxs("div", { className: "w-full space-y-1.5", children: [label && _jsx(Label, { style: { color: colors.text }, children: label }), _jsx("div", { className: cn("flex gap-1 rounded-lg p-1", isVertical ? "flex-col" : "flex-row"), style: { backgroundColor: colors.muted }, children: options.map((opt, i) => {
                     const isSelected = selected.includes(opt);
                     const isHovered = hoveredIdx === i && !isSelected;
-                    return (_jsx("button", { type: "button", onClick: () => toggle(opt), onPointerEnter: () => setHoveredIdx(i), onPointerLeave: () => setHoveredIdx(null), className: cn("rounded-md px-3 py-2 text-sm font-medium transition-colors", isVertical ? "w-full" : "flex-1"), style: {
+                    return (_jsx("button", { type: "button", onClick: () => toggle(opt), onPointerEnter: () => setHoveredIdx(i), onPointerLeave: () => setHoveredIdx(null), className: cn("rounded-md px-3 py-2 text-sm font-medium transition-colors", isVertical
+                            ? "w-full"
+                            : "flex-auto whitespace-nowrap"), style: {
                             transition: "background-color 0.15s, color 0.15s",
                             ...(isSelected
                                 ? {
@@ -61,6 +63,6 @@ export function SnapToggleGroup({ element: { props }, }) {
                                         ? (colors.mode === "dark" ? "rgba(255,255,255,0.04)" : "rgba(0,0,0,0.04)")
                                         : (colors.mode === "dark" ? "rgba(255,255,255,0.02)" : "rgba(0,0,0,0.02)"),
                                 }),
-                        }, children: opt }, opt));
+                        }, children: opt }, `${opt}-${i}`));
                 }) })] }));
 }

package/dist/react-native/components/item-layout-context.d.ts

@@ -0,0 +1,2 @@
+export declare const SnapItemGroupBorderProvider: any;
+export declare function useSnapItemGroupHasBorder(): any;

package/dist/react-native/components/item-layout-context.js

@@ -0,0 +1,6 @@
+import { createContext, useContext } from "react";
+const SnapItemGroupBorderContext = createContext(false);
+export const SnapItemGroupBorderProvider = SnapItemGroupBorderContext.Provider;
+export function useSnapItemGroupHasBorder() {
+    return useContext(SnapItemGroupBorderContext);
+}

package/dist/react-native/components/snap-action-button.js

@@ -3,6 +3,7 @@ import { Pressable, StyleSheet, Text, View } from "react-native";
 import { ExternalLink } from "lucide-react-native";
 import { useSnapPalette } from "../use-snap-palette.js";
 import { useSnapTheme } from "../theme.js";
+import { useSnapStackDirection } from "../stack-direction-context.js";
 import { ICON_MAP } from "./snap-icon.js";
 function isExternalLinkAction(on) {
     if (!on)
@@ -22,9 +23,10 @@ export function SnapActionButton({ element, emit, }) {
     const iconName = props.icon ? String(props.icon) : undefined;
     const textColor = isPrimary ? "#fff" : colors.text;
     const iconColor = isPrimary ? "#fff" : colors.text;
+    const inHorizontalStack = useSnapStackDirection() === "horizontal";
     const on = element.on;
     const showExternalIcon = isExternalLinkAction(on);
-    return (_jsx(View, { style: styles.outer, children: _jsxs(Pressable, { style: ({ pressed }) => [
+    return (_jsx(View, { style: inHorizontalStack ? styles.outerHorizontal : styles.outer, children: _jsxs(Pressable, { style: ({ pressed }) => [
                 styles.btn,
                 isPrimary ? styles.btnDefault : styles.btnOther,
                 isPrimary
@@ -50,7 +52,18 @@ export function SnapActionButton({ element, emit, }) {
                     : null, _jsx(Text, { style: { color: textColor, fontSize: 14, lineHeight: 18, fontWeight: "600" }, children: label }), showExternalIcon ? (_jsx(ExternalLink, { size: 14, color: iconColor, style: { opacity: 0.6 } })) : null] }) }));
 }
 const styles = StyleSheet.create({
-    outer: { minWidth: 0 },
+    outer: {
+        width: "100%",
+        minWidth: 0,
+        alignSelf: "stretch",
+    },
+    outerHorizontal: {
+        flexGrow: 1,
+        flexShrink: 1,
+        flexBasis: "auto",
+        minWidth: 0,
+        alignSelf: "stretch",
+    },
     btn: {
         paddingHorizontal: 16,
         borderRadius: 10,

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,