@farcaster/snap 2.3.1 → 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

@@ -5,13 +5,14 @@ export declare const SUPPORTED_SPEC_VERSIONS: readonly ["1.0", "2.0"];
 export type SpecVersion = (typeof SUPPORTED_SPEC_VERSIONS)[number];
 export declare const SNAP_PAYLOAD_HEADER: "X-Snap-Payload";
 export declare const MEDIA_TYPE: "application/vnd.farcaster.snap+json";
-export declare const EFFECT_VALUES: readonly ["confetti"];
+export declare const EFFECT_VALUES: readonly ["confetti", "fireworks"];
 export declare const POST_GRID_TAP_KEY: "grid_tap";
 export declare const GRID_MIN_COLS = 2;
 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

@@ -7,7 +7,7 @@ export const SUPPORTED_SPEC_VERSIONS = [
 ];
 export const SNAP_PAYLOAD_HEADER = "X-Snap-Payload";
 export const MEDIA_TYPE = "application/vnd.farcaster.snap+json";
-export const EFFECT_VALUES = ["confetti"];
+export const EFFECT_VALUES = ["confetti", "fireworks"];
 // ─── Pixel grid ────────────────────────────────────────
 export const POST_GRID_TAP_KEY = "grid_tap";
 export const GRID_MIN_COLS = 2;
@@ -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/snap-view-core.js

@@ -47,33 +47,119 @@ const CONFETTI_COLORS = [
     "#EF4444",
     "#06B6D4",
 ];
+const FIREWORK_COLORS = [
+    "#FFD700",
+    "#FF6B6B",
+    "#4ECDC4",
+    "#C4A7E7",
+    "#F6C177",
+    "#EBBCBA",
+    "#9CCFD8",
+    "#fff",
+];
 function ConfettiOverlay() {
-    const pieces = useMemo(() => Array.from({ length: 80 }, (_, i) => ({
-        id: i,
-        left: Math.random() * 100,
-        delay: Math.random() * 1.2,
-        duration: 2.5 + Math.random() * 2,
-        color: CONFETTI_COLORS[Math.floor(Math.random() * CONFETTI_COLORS.length)],
-        size: 6 + Math.random() * 8,
-        rotation: Math.random() * 360,
-    })), []);
+    const pieces = useMemo(() => Array.from({ length: 80 }, (_, i) => {
+        const driftX = (Math.random() - 0.5) * 120;
+        return {
+            id: i,
+            left: Math.random() * 100,
+            delay: Math.random() * 1.2,
+            duration: 2.8 + Math.random() * 1.8,
+            color: CONFETTI_COLORS[Math.floor(Math.random() * CONFETTI_COLORS.length)],
+            size: 6 + Math.random() * 8,
+            rotation: Math.random() * 360,
+            isCircle: Math.random() > 0.6,
+            driftX,
+            driftMid: -driftX * 0.4,
+        };
+    }), []);
     return (_jsxs("div", { style: {
             position: "absolute",
             inset: 0,
             overflow: "hidden",
             pointerEvents: "none",
             zIndex: 20,
-        }, children: [pieces.map(({ id, left, delay, duration, color, size, rotation }) => (_jsx("div", { style: {
+        }, children: [pieces.map(({ id, left, delay, duration, color, size, rotation, isCircle, driftX, driftMid }) => (_jsx("div", { style: {
                     position: "absolute",
                     left: `${left}%`,
                     top: -20,
                     width: size,
-                    height: size * 0.6,
+                    height: isCircle ? size : size * 0.5,
                     backgroundColor: color,
-                    borderRadius: 2,
-                    transform: `rotate(${rotation}deg)`,
-                    animation: `confettiFall ${duration}s ease-in ${delay}s forwards`,
-                } }, id))), _jsx("style", { children: `@keyframes confettiFall{0%{top:-20px;opacity:1;transform:rotate(0deg) translateX(0)}50%{opacity:1}100%{top:110%;opacity:0;transform:rotate(720deg) translateX(${Math.random() > 0.5 ? "" : "-"}40px)}}` })] }));
+                    borderRadius: isCircle ? "50%" : 2,
+                    transform: `rotateZ(${rotation}deg)`,
+                    animation: `confettiFall ${duration}s cubic-bezier(0.25,0,0.75,1) ${delay}s forwards`,
+                    "--dx": `${driftX}px`,
+                    "--dm": `${driftMid}px`,
+                } }, id))), _jsx("style", { children: `@keyframes confettiFall{
+        0%  {top:-20px;opacity:1;transform:rotateZ(0deg) rotateY(0deg) translateX(0)}
+        20% {transform:rotateZ(144deg) rotateY(60deg) translateX(var(--dm))}
+        40% {transform:rotateZ(288deg) rotateY(120deg) translateX(0)}
+        60% {opacity:1;transform:rotateZ(432deg) rotateY(200deg) translateX(calc(-1 * var(--dm)))}
+        80% {transform:rotateZ(576deg) rotateY(280deg) translateX(var(--dx))}
+        100%{top:110%;opacity:0;transform:rotateZ(720deg) rotateY(360deg) translateX(var(--dx))}
+      }` })] }));
+}
+function FireworksOverlay() {
+    const bursts = useMemo(() => Array.from({ length: 5 }, (_, b) => ({
+        id: b,
+        x: 15 + Math.random() * 70,
+        y: 10 + Math.random() * 50,
+        delay: b * 0.5 + Math.random() * 0.2,
+        particles: Array.from({ length: 24 }, (_, p) => {
+            const angle = (p / 24) * 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,
+            };
+        }),
+    })), []);
+    return (_jsxs("div", { style: {
+            position: "absolute",
+            inset: 0,
+            overflow: "hidden",
+            pointerEvents: "none",
+            zIndex: 20,
+        }, children: [bursts.map(({ id: bid, x, y, delay, particles }) => (_jsxs("div", { children: [_jsx("div", { style: {
+                            position: "absolute",
+                            left: `${x}%`,
+                            top: `${y}%`,
+                            width: 12,
+                            height: 12,
+                            borderRadius: "50%",
+                            backgroundColor: "#fff",
+                            transform: "translate(-50%,-50%)",
+                            animation: `fwFlash 0.4s ease-out ${delay}s both`,
+                            opacity: 0,
+                        } }), particles.map(({ id: pid, vx, vy, color, size }) => (_jsx("div", { style: {
+                            position: "absolute",
+                            left: `${x}%`,
+                            top: `${y}%`,
+                            width: size,
+                            height: size,
+                            borderRadius: "50%",
+                            backgroundColor: color,
+                            transform: "translate(-50%,-50%)",
+                            animation: `fwBurst 1s cubic-bezier(0.2,0,0.8,1) ${delay}s forwards`,
+                            opacity: 0,
+                            "--vx": `${vx}px`,
+                            "--vy": `${vy}px`,
+                        } }, pid)))] }, bid))), _jsx("style", { children: `
+        @keyframes fwFlash{
+          0%  {opacity:0;transform:translate(-50%,-50%) scale(0)}
+          25% {opacity:1;transform:translate(-50%,-50%) scale(2.5)}
+          100%{opacity:0;transform:translate(-50%,-50%) scale(5)}
+        }
+        @keyframes fwBurst{
+          0%  {opacity:1;transform:translate(-50%,-50%) translate(0,0) scale(1)}
+          65% {opacity:1}
+          100%{opacity:0;transform:translate(-50%,-50%) translate(var(--vx),var(--vy)) scale(0)}
+        }
+      ` })] }));
 }
 export function SnapLoadingOverlay({ appearance, accentHex, active, }) {
     const isDark = appearance === "dark";
@@ -156,11 +242,15 @@ export function SnapViewCore({ snap, handlers, loading = false, appearance = "da
         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 accentName = snap.theme?.accent ?? "purple";
     const accentHex = useMemo(() => resolveSnapPaletteHex(accentName, appearance), [accentName, appearance]);
     const previewSurfaceStyle = useMemo(() => {
@@ -226,7 +316,7 @@ export function SnapViewCore({ snap, handlers, loading = false, appearance = "da
                 break;
         }
     }, [handlers]);
-    return (_jsxs("div", { style: { position: "relative", width: "100%" }, children: [showConfetti && _jsx(ConfettiOverlay, {}, confettiKey), loadingOverlay === undefined ? (_jsx(SnapLoadingOverlay, { appearance: appearance, accentHex: accentHex, active: loading })) : loading ? (_jsx(_Fragment, { children: loadingOverlay })) : null, _jsx("div", { style: previewSurfaceStyle, children: _jsx(SnapPreviewAccentProvider, { pageAccent: snap.theme?.accent, appearance: appearance, children: _jsx(SnapCatalogView, { spec: spec, state: initialState, loading: false, onStateChange: (changes) => {
+    return (_jsxs("div", { style: { position: "relative", width: "100%" }, children: [showConfetti && _jsx(ConfettiOverlay, {}, confettiKey), showFireworks && _jsx(FireworksOverlay, {}, fireworksKey), loadingOverlay === undefined ? (_jsx(SnapLoadingOverlay, { appearance: appearance, accentHex: accentHex, active: loading })) : loading ? (_jsx(_Fragment, { children: loadingOverlay })) : null, _jsx("div", { style: previewSurfaceStyle, children: _jsx(SnapPreviewAccentProvider, { pageAccent: snap.theme?.accent, appearance: appearance, children: _jsx(SnapCatalogView, { spec: spec, state: initialState, loading: false, onStateChange: (changes) => {
                             applyStatePaths(stateRef.current, changes);
                         }, onAction: handleAction }, pageKey) }) })] }));
 }

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,