@farcaster/snap 2.1.1 → 2.1.2

package/src/stack-horizontal-utils.ts

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

package/src/ui/catalog.ts

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

package/src/ui/stack.ts

@@ -8,6 +8,14 @@ export const stackProps = z.object({
   direction: z.enum(STACK_DIRECTIONS).optional(),
   gap: z.enum(STACK_GAPS).optional(),
   justify: z.enum(STACK_JUSTIFY).optional(),
+  /** Horizontal stacks only: fixed column grid (`2`–`6`). Prefer omitting this when children are stacks — they flex as row peers automatically. */
+  columns: z.union([
+    z.literal(2),
+    z.literal(3),
+    z.literal(4),
+    z.literal(5),
+    z.literal(6),
+  ]).optional(),
 });
 
 export type StackProps = z.infer<typeof stackProps>;