@farcaster/snap 2.3.1 → 2.5.0

package/src/react/components/item.tsx

@@ -6,10 +6,50 @@ import {
   ItemTitle,
   ItemDescription,
   ItemActions,
+  ItemMedia,
 } from "@neynar/ui/item";
 import { cn } from "@neynar/ui/utils";
 import { useSnapColors } from "../hooks/use-snap-colors";
 import { useSnapStackDirection } from "../stack-direction-context";
+import { ICON_MAP } from "./icon";
+import { useSnapItemGroupHasBorder } from "./item-layout-context";
+
+type ItemMediaConfig =
+  | {
+      variant: "icon";
+      name: string;
+      color?: string;
+    }
+  | {
+      variant: "image";
+      url: string;
+      alt?: string;
+      round?: boolean;
+    };
+
+function parseItemMedia(value: unknown): ItemMediaConfig | undefined {
+  if (!value || typeof value !== "object") return undefined;
+
+  const media = value as Record<string, unknown>;
+  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 },
@@ -20,26 +60,79 @@ export function SnapItem({
 }) {
   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";
+  const MediaIcon =
+    media?.variant === "icon" ? ICON_MAP[media.name] : undefined;
 
   return (
     <Item
       className={cn(
-        "py-1.5 px-2.5",
+        "gap-2 py-1.5",
+        inBorderedGroup ? "px-2" : "px-0",
         /** Horizontal: share width with peers. Vertical: don't fill column height. */
         inHorizontalStack && "flex-1",
       )}
+      style={{
+        columnGap: 8,
+        paddingInline: inBorderedGroup ? 8 : 0,
+      }}
     >
-      <ItemContent className="gap-0.5">
+      {media?.variant === "icon" && MediaIcon && (
+        <ItemMedia
+          variant="icon"
+          className="self-center translate-y-0"
+          style={{ alignSelf: "center", transform: "none" }}
+        >
+          <MediaIcon
+            size={20}
+            style={{ color: colors.colorHex(media.color) }}
+          />
+        </ItemMedia>
+      )}
+      {media?.variant === "image" && (
+        <ItemMedia
+          variant="image"
+          className="self-center translate-y-0"
+          style={{
+            alignSelf: "center",
+            borderRadius: media.round ? "9999px" : undefined,
+            transform: "none",
+          }}
+        >
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src={media.url}
+            alt={media.alt ?? ""}
+            className="size-full object-cover"
+          />
+        </ItemMedia>
+      )}
+      <ItemContent className="gap-0">
         <ItemTitle style={{ color: colors.text }}>{title}</ItemTitle>
         {description && (
-          <ItemDescription className="mt-0" style={{ color: colors.textMuted }}>
+          <ItemDescription
+            className="mt-0 text-xs leading-snug"
+            style={{
+              color: colors.textMuted,
+              fontSize: 12,
+              lineHeight: "16px",
+            }}
+          >
             {description}
           </ItemDescription>
         )}
       </ItemContent>
-      {childIds && childIds.length > 0 && <ItemActions>{children}</ItemActions>}
+      {childIds && childIds.length > 0 && (
+        <ItemActions
+          className="gap-1.5 self-center"
+          style={{ alignSelf: "center", columnGap: 6 }}
+        >
+          {children}
+        </ItemActions>
+      )}
     </Item>
   );
 }

package/src/react/components/stack.tsx

@@ -1,11 +1,12 @@
 "use client";
 
-import type { ReactNode } from "react";
+import type { CSSProperties, ReactNode } from "react";
 import { cn } from "@neynar/ui/utils";
 import {
+  childrenShouldUseHorizontalButtonLayout,
+  childrenAreAllButtons,
   countRenderableChildren,
   defaultHorizontalGapSize,
-  horizontalChildrenAreAllButtons,
 } from "../../stack-horizontal-utils.js";
 import {
   SnapStackDirectionProvider,
@@ -14,7 +15,7 @@ import {
 
 const VGAP: Record<string, string> = {
   none: "gap-0",
-  sm: "gap-2",
+  sm: "gap-1",
   md: "gap-4",
   lg: "gap-6",
 };
@@ -34,14 +35,14 @@ const JUSTIFY_FLEX: Record<string, string> = {
   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: Record<number, string> = {
-  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({
@@ -52,17 +53,21 @@ export function SnapStack({
   children?: ReactNode;
 }) {
   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 &&
@@ -71,29 +76,36 @@ export function SnapStack({
       ? 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)
+    : 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]
+    explicitEqualWidth && equalWidthColumnCount !== undefined
+      ? COLUMN_GRID_CLASS[equalWidthColumnCount]
       : undefined;
 
   /**
@@ -108,11 +120,18 @@ export function SnapStack({
 
   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: CSSProperties | undefined =
+    explicitEqualWidth && equalWidthColumnCount !== undefined
+      ? {
+          display: "grid",
+          gridTemplateColumns: `repeat(${equalWidthColumnCount}, minmax(0, 1fr))`,
+        }
+      : undefined;
 
   return (
     <SnapStackDirectionProvider
@@ -122,20 +141,12 @@ export function SnapStack({
         className={cn(
           rootWidthClass,
           isHorizontal
-            ? buttonRowGrid &&
-                buttonRowCount >= 1 &&
-                buttonRowCount <= 6 &&
-                COLUMN_GRID_CLASS[buttonRowCount]
-              ? cn(
-                  COLUMN_GRID_CLASS[buttonRowCount]!,
-                  gap,
-                  "[&>*]:w-full",
-                )
-              : explicitColumnGrid && columnGridClass
+            ? 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}
       </div>

package/src/react/components/toggle-group.tsx

@@ -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";
 
 export function SnapToggleGroup({
@@ -17,7 +18,6 @@ export function SnapToggleGroup({
   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 as string[])
     : [];
@@ -50,7 +50,7 @@ export function SnapToggleGroup({
     }
   };
 
-  const isVertical = orientation === "vertical";
+  const isVertical = !shouldUseHorizontalButtonContent(options);
   const [hoveredIdx, setHoveredIdx] = useState<number | null>(null);
 
   return (
@@ -68,14 +68,16 @@ export function SnapToggleGroup({
           const isHovered = hoveredIdx === i && !isSelected;
           return (
             <button
-              key={opt}
+              key={`${opt}-${i}`}
               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",
+                isVertical
+                  ? "w-full"
+                  : "flex-auto whitespace-nowrap",
               )}
               style={{
                 transition: "background-color 0.15s, color 0.15s",

package/src/react/snap-view-core.tsx

@@ -63,18 +63,106 @@ const CONFETTI_COLORS = [
   "#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,
+      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 (
+    <div
+      style={{
+        position: "absolute",
+        inset: 0,
+        overflow: "hidden",
+        pointerEvents: "none",
+        zIndex: 20,
+      }}
+    >
+      {pieces.map(
+        ({ id, left, delay, duration, color, size, rotation, isCircle, driftX, driftMid }) => (
+          <div
+            key={id}
+            style={
+              {
+                position: "absolute",
+                left: `${left}%`,
+                top: -20,
+                width: size,
+                height: isCircle ? size : size * 0.5,
+                backgroundColor: color,
+                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`,
+              } as CSSProperties
+            }
+          />
+        ),
+      )}
+      <style>{`@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))}
+      }`}</style>
+    </div>
+  );
+}
+
+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,
+          };
+        }),
       })),
     [],
   );
@@ -89,25 +177,57 @@ function ConfettiOverlay() {
         zIndex: 20,
       }}
     >
-      {pieces.map(({ id, left, delay, duration, color, size, rotation }) => (
-        <div
-          key={id}
-          style={{
-            position: "absolute",
-            left: `${left}%`,
-            top: -20,
-            width: size,
-            height: size * 0.6,
-            backgroundColor: color,
-            borderRadius: 2,
-            transform: `rotate(${rotation}deg)`,
-            animation: `confettiFall ${duration}s ease-in ${delay}s forwards`,
-          }}
-        />
+      {bursts.map(({ id: bid, x, y, delay, particles }) => (
+        <div key={bid}>
+          <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 }) => (
+            <div
+              key={pid}
+              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`,
+                } as CSSProperties
+              }
+            />
+          ))}
+        </div>
       ))}
-      <style>{`@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)}}`}</style>
+      <style>{`
+        @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)}
+        }
+      `}</style>
     </div>
   );
 }
@@ -240,10 +360,13 @@ export function SnapViewCore({
   }, [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";
 
@@ -326,6 +449,7 @@ export function SnapViewCore({
   return (
     <div style={{ position: "relative", width: "100%" }}>
       {showConfetti && <ConfettiOverlay key={confettiKey} />}
+      {showFireworks && <FireworksOverlay key={fireworksKey} />}
       {loadingOverlay === undefined ? (
         <SnapLoadingOverlay
           appearance={appearance}

package/src/react-native/components/item-layout-context.tsx

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

package/src/react-native/components/snap-action-button.tsx

@@ -5,6 +5,7 @@ import { Pressable, StyleSheet, Text, View } from "react-native";
 import { ExternalLink } from "lucide-react-native";
 import { useSnapPalette } from "../use-snap-palette";
 import { useSnapTheme } from "../theme";
+import { useSnapStackDirection } from "../stack-direction-context";
 import { ICON_MAP } from "./snap-icon";
 
 function isExternalLinkAction(
@@ -32,12 +33,13 @@ export function SnapActionButton({
 
   const textColor = isPrimary ? "#fff" : colors.text;
   const iconColor = isPrimary ? "#fff" : colors.text;
+  const inHorizontalStack = useSnapStackDirection() === "horizontal";
 
   const on = (element as unknown as { on?: Record<string, unknown> }).on;
   const showExternalIcon = isExternalLinkAction(on);
 
   return (
-    <View style={styles.outer}>
+    <View style={inHorizontalStack ? styles.outerHorizontal : styles.outer}>
       <Pressable
         style={({ pressed }) => [
           styles.btn,
@@ -77,7 +79,18 @@ export function SnapActionButton({
 }
 
 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/src/react-native/components/snap-cell-grid.tsx

@@ -18,6 +18,7 @@ export function SnapCellGrid({
   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: Record<string, number> = { none: 0, sm: 1, md: 2, lg: 4 };
   const gapPx = gapMap[gap] ?? 1;
@@ -101,18 +102,35 @@ export function SnapCellGrid({
 
       // Two-tone ring: outer View with contrasting border, inner View with inverse border
       const cellView = selected ? (
-        <View style={[styles.cell, { height: rowHeight, borderWidth: 1, borderColor: ringOuter, borderRadius: 4 }]}>
+        <View
+          style={[
+            styles.cell,
+            squareCells ? styles.squareCell : { height: rowHeight },
+            { borderWidth: 1, borderColor: ringOuter, borderRadius: 4 },
+          ]}
+        >
           <View
             style={[
               styles.innerCell,
-              { backgroundColor: bg, borderWidth: 1, borderColor: ringInner, borderRadius: 3 },
+              {
+                backgroundColor: bg,
+                borderWidth: 1,
+                borderColor: ringInner,
+                borderRadius: 3,
+              },
             ]}
           >
             {cellContent}
           </View>
         </View>
       ) : (
-        <View style={[styles.cell, { height: rowHeight, backgroundColor: bg }]}>
+        <View
+          style={[
+            styles.cell,
+            squareCells ? styles.squareCell : { height: rowHeight },
+            { backgroundColor: bg },
+          ]}
+        >
           {cellContent}
         </View>
       );
@@ -141,7 +159,17 @@ export function SnapCellGrid({
   }
 
   return (
-    <View style={[styles.wrap, { gap: gapPx, backgroundColor: colors.muted, padding: 4, borderRadius: 8 }]}>
+    <View
+      style={[
+        styles.wrap,
+        {
+          gap: gapPx,
+          backgroundColor: colors.muted,
+          padding: 4,
+          borderRadius: 8,
+        },
+      ]}
+    >
       {rowEls}
     </View>
   );
@@ -156,6 +184,10 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
   },
+  squareCell: {
+    aspectRatio: 1,
+    width: "100%",
+  },
   innerCell: {
     width: "100%",
     height: "100%",