@farcaster/snap 2.5.1 → 2.6.0

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

@@ -1,10 +1,15 @@
 "use client";
 
 import { useState } from "react";
+import { useStateStore } from "@json-render/react";
 import { ExternalLink } from "lucide-react";
 import { Button } from "@neynar/ui/button";
 import { cn } from "@neynar/ui/utils";
 import { useSnapColors } from "../hooks/use-snap-colors";
+import {
+  getPaginatorAction,
+  runPaginatorAction,
+} from "../../ui/paginator-state";
 import { useSnapStackDirection } from "../stack-direction-context";
 import { ICON_MAP } from "./icon";
 
@@ -36,6 +41,8 @@ export function SnapActionButton({
   const iconName = props.icon ? String(props.icon) : undefined;
   const colors = useSnapColors();
   const [hovered, setHovered] = useState(false);
+  const stateStore = useStateStore();
+  const paginatorAction = getPaginatorAction(element.on);
 
   const Icon = iconName ? ICON_MAP[iconName] : undefined;
   const showExternalIcon = isExternalLinkAction(element.on);
@@ -75,9 +82,13 @@ export function SnapActionButton({
       <Button
         type="button"
         variant={isPrimary ? "default" : "secondary"}
-        className={cn("w-full gap-2")}
+        className={cn("h-8 w-full gap-2 px-3 text-sm")}
         style={style}
-        onClick={() => emit("press")}
+        onClick={() => {
+          if (!runPaginatorAction(stateStore, paginatorAction)) {
+            emit("press");
+          }
+        }}
         onPointerEnter={() => setHovered(true)}
         onPointerLeave={() => setHovered(false)}
       >

package/src/react/components/cell-grid.tsx

@@ -5,6 +5,10 @@ import { useStateStore } from "@json-render/react";
 import { cn } from "@neynar/ui/utils";
 import { POST_GRID_TAP_KEY, readableTextOnHex } from "@farcaster/snap";
 import { useSnapColors } from "../hooks/use-snap-colors";
+import {
+  getPaginatorAction,
+  runPaginatorAction,
+} from "../../ui/paginator-state";
 
 export function SnapCellGrid({
   element: { props, on },
@@ -13,8 +17,10 @@ export function SnapCellGrid({
   element: { props: Record<string, unknown>; on?: Record<string, unknown> };
   emit: (name: string) => void;
 }) {
-  const { get, set } = useStateStore();
+  const stateStore = useStateStore();
+  const { get, set } = stateStore;
   const colors = useSnapColors();
+  const paginatorAction = getPaginatorAction(on);
   const cols = Number(props.cols ?? 2);
   const rows = Number(props.rows ?? 2);
   const select = String(props.select ?? "off");
@@ -28,6 +34,13 @@ export function SnapCellGrid({
   const gapPx = gapMap[gap] ?? 1;
   const rowHeight = typeof props.rowHeight === "number" ? props.rowHeight : 28;
   const squareCells = props.cellAspectRatio === "square";
+  const maxWidthKey = typeof props.maxWidth === "string" ? props.maxWidth : undefined;
+  const maxWidthMap: Record<string, number | undefined> = {
+    sm: 160,
+    md: 220,
+    lg: undefined,
+  };
+  const maxWidth = maxWidthKey ? maxWidthMap[maxWidthKey] : undefined;
 
   const name = props.name ? String(props.name) : POST_GRID_TAP_KEY;
   const tapPath = `/inputs/${name}`;
@@ -75,7 +88,12 @@ export function SnapCellGrid({
     } else {
       set(tapPath, wire);
     }
-    if (hasPressAction) emit("press");
+    if (
+      hasPressAction &&
+      !runPaginatorAction(stateStore, paginatorAction)
+    ) {
+      emit("press");
+    }
   };
 
   /** Cells without a palette `color` — subtle fill so empty slots read as tiles. */
@@ -138,6 +156,8 @@ export function SnapCellGrid({
       style={{
         display: "grid",
         width: "100%",
+        maxWidth,
+        marginInline: maxWidth ? "auto" : undefined,
         gridTemplateColumns: `repeat(${cols}, 1fr)`,
         gap: gapPx,
         padding: 4,

package/src/react/components/image.tsx

@@ -17,6 +17,9 @@ export function SnapImage({
 }) {
   const url = String(props.url ?? "");
   const alt = String(props.alt ?? "");
+  const title = props.title ? String(props.title) : "";
+  const subtitle = props.subtitle ? String(props.subtitle) : "";
+  const hasOverlay = title.length > 0 || subtitle.length > 0;
   const ratio = aspectToRatio(String(props.aspect ?? "1:1"));
   const stackDir = useSnapStackDirection();
   const inHorizontalStack = stackDir === "horizontal";
@@ -35,6 +38,20 @@ export function SnapImage({
         alt={alt}
         className="absolute inset-0 size-full object-cover"
       />
+      {hasOverlay && (
+        <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/75 via-black/35 to-transparent p-3 pt-8 text-white">
+          {title && (
+            <div className="truncate text-sm font-semibold leading-5">
+              {title}
+            </div>
+          )}
+          {subtitle && (
+            <div className="truncate text-xs font-medium leading-4 text-white/85">
+              {subtitle}
+            </div>
+          )}
+        </div>
+      )}
     </AspectRatio>
   );
 }

package/src/react/components/paginator.tsx

@@ -0,0 +1,208 @@
+"use client";
+
+import {
+  Children,
+  type CSSProperties,
+  type ReactNode,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import { useStateStore } from "@json-render/react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { cn } from "@neynar/ui/utils";
+import { useSnapColors } from "../hooks/use-snap-colors";
+import {
+  clampPaginatorPage,
+  pageFromValue,
+  SNAP_PAGINATOR_PAGE_COUNT_PATH,
+  SNAP_PAGINATOR_PAGE_PATH,
+} from "../../ui/paginator-state";
+
+function clampInitialPage(value: unknown, pageCount: number): number {
+  if (typeof value !== "number" || !Number.isInteger(value)) return 0;
+  return Math.min(Math.max(value, 0), Math.max(pageCount - 1, 0));
+}
+
+export function SnapPaginator({
+  element: { props },
+  children,
+}: {
+  element: { props: Record<string, unknown> };
+  children?: ReactNode;
+}) {
+  const pages = useMemo(
+    () => Children.toArray(children),
+    [children],
+  );
+  const colors = useSnapColors();
+  const { get, set } = useStateStore();
+  const initialPage = clampInitialPage(props.initialPage, pages.length);
+  const page = clampPaginatorPage(
+    pageFromValue(get(SNAP_PAGINATOR_PAGE_PATH), initialPage),
+    pages.length,
+  );
+  const activePage = Math.min(page, Math.max(pages.length - 1, 0));
+  const showControls = props.showControls !== false && pages.length > 1;
+  const showIndicators = props.showIndicators !== false && pages.length > 1;
+  const controlsPosition = props.controlsPosition === "top" ? "top" : "bottom";
+  const transition =
+    props.transition === "fade" ||
+    props.transition === "scale" ||
+    props.transition === "none"
+      ? props.transition
+      : "slide";
+  const showControlBar = showControls || showIndicators;
+  const [transitionDirection, setTransitionDirection] =
+    useState<"next" | "previous">("next");
+
+  const canGoPrev = activePage > 0;
+  const canGoNext = activePage < pages.length - 1;
+  const goToPage = (targetPage: number) => {
+    const nextPage = clampPaginatorPage(targetPage, pages.length);
+    if (nextPage !== activePage) {
+      setTransitionDirection(nextPage > activePage ? "next" : "previous");
+    }
+    set(SNAP_PAGINATOR_PAGE_PATH, nextPage);
+  };
+  const goPrev = () => goToPage(activePage - 1);
+  const goNext = () => goToPage(activePage + 1);
+
+  useEffect(() => {
+    if (pages.length === 0) return;
+    const nextPage = clampPaginatorPage(
+      pageFromValue(get(SNAP_PAGINATOR_PAGE_PATH), initialPage),
+      pages.length,
+    );
+    if (get(SNAP_PAGINATOR_PAGE_PATH) !== nextPage) {
+      set(SNAP_PAGINATOR_PAGE_PATH, nextPage);
+    }
+    if (get(SNAP_PAGINATOR_PAGE_COUNT_PATH) !== pages.length) {
+      set(SNAP_PAGINATOR_PAGE_COUNT_PATH, pages.length);
+    }
+  }, [get, initialPage, pages.length, set]);
+
+  if (pages.length === 0) return null;
+
+  const pageAnimation =
+    transition === "none"
+      ? undefined
+      : transition === "fade"
+        ? "snapPaginatorFade 180ms ease-out"
+        : transition === "scale"
+          ? "snapPaginatorScale 240ms cubic-bezier(0.16, 1, 0.3, 1)"
+          : "snapPaginatorSlide 260ms cubic-bezier(0.16, 1, 0.3, 1)";
+
+  const controlBar = showControlBar ? (
+    <div className="flex min-h-7 w-full items-center justify-between gap-2">
+      {showControls ? (
+        <button
+          type="button"
+          aria-label="Previous page"
+          disabled={!canGoPrev}
+          onClick={goPrev}
+          className={cn(
+            "inline-flex size-7 items-center justify-center rounded-md border text-sm transition-opacity",
+            canGoPrev ? "cursor-pointer opacity-100" : "cursor-default opacity-35",
+          )}
+          style={{
+            borderColor: colors.border,
+            backgroundColor: colors.muted,
+            color: colors.text,
+          }}
+        >
+          <ChevronLeft size={15} />
+        </button>
+      ) : (
+        <span />
+      )}
+
+      {showIndicators ? (
+        <div className="flex flex-1 items-center justify-center gap-1.5">
+          {pages.map((_, index) => {
+            const current = index === activePage;
+            return (
+              <span
+                key={index}
+                aria-label={`Page ${index + 1}${current ? ", current" : ""}`}
+                className={cn(
+                  "block rounded-full",
+                  current ? "size-2.5" : "size-2",
+                )}
+                style={{
+                  backgroundColor: current
+                    ? colors.accent
+                    : colors.mode === "dark"
+                    ? "rgba(255,255,255,0.5)"
+                    : "rgba(0,0,0,0.28)",
+                  boxShadow: current
+                    ? `0 0 0 2px ${colors.mode === "dark" ? "rgba(255,255,255,0.18)" : "rgba(0,0,0,0.12)"}`
+                    : undefined,
+                }}
+              />
+            );
+          })}
+        </div>
+      ) : (
+        <span className="flex-1" />
+      )}
+
+      {showControls ? (
+        <button
+          type="button"
+          aria-label="Next page"
+          disabled={!canGoNext}
+          onClick={goNext}
+          className={cn(
+            "inline-flex size-7 items-center justify-center rounded-md border text-sm transition-opacity",
+            canGoNext ? "cursor-pointer opacity-100" : "cursor-default opacity-35",
+          )}
+          style={{
+            borderColor: colors.border,
+            backgroundColor: colors.muted,
+            color: colors.text,
+          }}
+        >
+          <ChevronRight size={15} />
+        </button>
+      ) : (
+        <span />
+      )}
+    </div>
+  ) : null;
+
+  return (
+    <div className="flex w-full min-w-0 flex-col gap-2">
+      {controlsPosition === "top" ? controlBar : null}
+      <div
+        key={activePage}
+        data-snap-paginator-page
+        className="w-full min-w-0"
+        style={{
+          "--snap-paginator-x": transitionDirection === "previous" ? "-22px" : "22px",
+          animation: pageAnimation,
+        } as CSSProperties}
+      >
+        {pages[activePage]}
+      </div>
+      {controlsPosition === "bottom" ? controlBar : null}
+      <style>{`
+        @keyframes snapPaginatorSlide {
+          from { opacity: 0.35; transform: translateX(var(--snap-paginator-x, 22px)) scale(0.985); }
+          to { opacity: 1; transform: translateX(0) scale(1); }
+        }
+        @keyframes snapPaginatorFade {
+          from { opacity: 0.2; }
+          to { opacity: 1; }
+        }
+        @keyframes snapPaginatorScale {
+          from { opacity: 0.25; transform: scale(0.94); }
+          to { opacity: 1; transform: scale(1); }
+        }
+        @media (prefers-reduced-motion: reduce) {
+          [data-snap-paginator-page] { animation: none !important; }
+        }
+      `}</style>
+    </div>
+  );
+}

package/src/react/components/stack.tsx

@@ -13,18 +13,18 @@ import {
   useSnapStackDirection,
 } from "../stack-direction-context";
 
-const VGAP: Record<string, string> = {
-  none: "gap-0",
-  sm: "gap-1",
-  md: "gap-4",
-  lg: "gap-6",
+const VGAP: Record<string, number> = {
+  none: 0,
+  sm: 4,
+  md: 16,
+  lg: 24,
 };
 
-const HGAP: Record<string, string> = {
-  none: "gap-0",
-  sm: "gap-1",
-  md: "gap-2",
-  lg: "gap-4",
+const HGAP: Record<string, number> = {
+  none: 0,
+  sm: 4,
+  md: 8,
+  lg: 16,
 };
 
 const JUSTIFY_FLEX: Record<string, string> = {
@@ -100,7 +100,7 @@ export function SnapStack({
       : isHorizontal
       ? defaultHorizontalGapSize(horizontalChildCount)
       : "md";
-  const gap = isHorizontal
+  const gapPx = isHorizontal
     ? (HGAP[gapKey] ?? HGAP.md!)
     : (VGAP[gapKey] ?? VGAP.md!);
   const columnGridClass =
@@ -125,13 +125,15 @@ export function SnapStack({
   /** 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
+  const layoutStyle: CSSProperties = {
+    gap: gapPx,
+    ...(explicitEqualWidth && equalWidthColumnCount !== undefined
       ? {
           display: "grid",
           gridTemplateColumns: `repeat(${equalWidthColumnCount}, minmax(0, 1fr))`,
         }
-      : undefined;
+      : {}),
+  };
 
   return (
     <SnapStackDirectionProvider
@@ -142,11 +144,11 @@ export function SnapStack({
           rootWidthClass,
           isHorizontal
             ? explicitEqualWidth && columnGridClass
-                ? cn(columnGridClass, gap)
-                : cn(horizontalFlexClasses, gap, justifyBlockGrid ? justifyFlex : undefined)
-            : cn("flex min-w-0 w-full flex-col", gap, justifyFlex),
+                ? columnGridClass
+                : cn(horizontalFlexClasses, justifyBlockGrid ? justifyFlex : undefined)
+            : cn("flex min-w-0 w-full flex-col", justifyFlex),
         )}
-        style={equalWidthStyle}
+        style={layoutStyle}
       >
         {children}
       </div>

package/src/react/components/text.tsx

@@ -4,6 +4,7 @@ import { Text } from "@neynar/ui/typography";
 import { cn } from "@neynar/ui/utils";
 import { useSnapColors } from "../hooks/use-snap-colors";
 import { useSnapStackDirection } from "../stack-direction-context";
+import { useSnapVersion } from "../snap-version-context";
 
 const SIZE_MAP = {
   md: { textSize: "base" as const },
@@ -22,7 +23,14 @@ export function SnapText({
   const config = SIZE_MAP[size] ?? SIZE_MAP.md;
   const colors = useSnapColors();
   const stackDir = useSnapStackDirection();
+  const snapVersion = useSnapVersion();
   const inHorizontalStack = stackDir === "horizontal";
+  const maxLines =
+    typeof props.maxLines === "number"
+      ? props.maxLines
+      : snapVersion === "2.0"
+        ? 1
+        : undefined;
 
   return (
     <Text
@@ -40,7 +48,18 @@ export function SnapText({
          */
         inHorizontalStack ? "min-w-0 shrink" : "min-w-0",
       )}
-      style={{ color: colors.text }}
+      style={{
+        color: colors.text,
+        lineHeight: size === "sm" ? 1.35 : 1.4,
+        ...(maxLines
+          ? {
+              display: "-webkit-box",
+              WebkitBoxOrient: "vertical",
+              WebkitLineClamp: maxLines,
+              overflow: "hidden",
+            }
+          : {}),
+      }}
     >
       {content}
     </Text>

package/src/react/snap-version-context.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import { createContext, useContext } from "react";
+import type { SpecVersion } from "../constants.js";
+
+const SnapVersionContext = createContext<SpecVersion>("1.0");
+
+export const SnapVersionProvider = SnapVersionContext.Provider;
+
+export function useSnapVersion(): SpecVersion {
+  return useContext(SnapVersionContext);
+}

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

@@ -4,6 +4,7 @@ import type { Spec } from "@json-render/core";
 import { snapJsonRenderCatalog } from "../ui/index.js";
 import { SnapCatalogView } from "./catalog-renderer";
 import { SnapPreviewAccentProvider } from "./accent-context";
+import { SnapVersionProvider } from "./snap-version-context";
 import { resolveSnapPaletteHex } from "./lib/resolve-palette-hex";
 import { snapPreviewPrimaryCssProperties } from "./lib/preview-primary-css";
 import {
@@ -21,8 +22,13 @@ import type { JsonValue, SnapActionHandlers, SnapPage } from "./index";
 
 export function applyStatePaths(
   model: Record<string, unknown>,
-  changes: { path: string; value: unknown }[] | Record<string, unknown>,
+  changes:
+    | { path: string; value: unknown }[]
+    | Record<string, unknown>
+    | null
+    | undefined,
 ): void {
+  if (!changes) return;
   const entries = Array.isArray(changes)
     ? changes.map((c) => [c.path, c.value] as const)
     : Object.entries(changes);
@@ -53,6 +59,30 @@ export function applyStatePaths(
   }
 }
 
+function withDefaultElementProps(spec: Spec): Spec {
+  if (!spec || typeof spec !== "object" || !("elements" in spec)) return spec;
+  const elements = spec.elements as unknown as Record<
+    string,
+    Record<string, unknown>
+  >;
+  if (!elements || typeof elements !== "object") return spec;
+
+  let changed = false;
+  const nextElements: Record<string, Record<string, unknown>> = {};
+  for (const [id, element] of Object.entries(elements)) {
+    if (element.props !== undefined) {
+      nextElements[id] = element;
+      continue;
+    }
+    changed = true;
+    nextElements[id] = { ...element, props: {} };
+  }
+
+  return changed
+    ? ({ ...spec, elements: nextElements } as unknown as Spec)
+    : spec;
+}
+
 const CONFETTI_COLORS = [
   "#907AA9",
   "#EC4899",
@@ -330,7 +360,7 @@ export function SnapViewCore({
    */
   loadingOverlay?: ReactNode;
 }) {
-  const spec = snap.ui;
+  const spec = useMemo(() => withDefaultElementProps(snap.ui), [snap.ui]);
   const initialState = useMemo(() => spec.state ?? { inputs: {} }, [spec]);
 
   const stateRef = useRef<Record<string, unknown>>(initialState);
@@ -465,16 +495,18 @@ export function SnapViewCore({
           pageAccent={snap.theme?.accent}
           appearance={appearance}
         >
-          <SnapCatalogView
-            key={pageKey}
-            spec={spec}
-            state={initialState}
-            loading={false}
-            onStateChange={(changes) => {
-              applyStatePaths(stateRef.current, changes);
-            }}
-            onAction={handleAction}
-          />
+          <SnapVersionProvider value={snap.version === "2.0" ? "2.0" : "1.0"}>
+            <SnapCatalogView
+              key={pageKey}
+              spec={spec}
+              state={initialState}
+              loading={false}
+              onStateChange={(changes) => {
+                applyStatePaths(stateRef.current, changes);
+              }}
+              onAction={handleAction}
+            />
+          </SnapVersionProvider>
         </SnapPreviewAccentProvider>
       </div>
     </div>

package/src/react-native/catalog-renderer.tsx

@@ -7,6 +7,7 @@ import { SnapImage } from "./components/snap-image";
 import { SnapInput } from "./components/snap-input";
 import { SnapItem } from "./components/snap-item";
 import { SnapItemGroup } from "./components/snap-item-group";
+import { SnapPaginator } from "./components/snap-paginator";
 import { SnapProgress } from "./components/snap-progress";
 import { SnapSeparator } from "./components/snap-separator";
 import { SnapSlider } from "./components/snap-slider";
@@ -29,6 +30,7 @@ export const SnapCatalogView = createRenderer(snapJsonRenderCatalog, {
   input: SnapInput,
   item: SnapItem,
   item_group: SnapItemGroup,
+  paginator: SnapPaginator,
   progress: SnapProgress,
   separator: SnapSeparator,
   slider: SnapSlider,

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

@@ -1,10 +1,15 @@
 declare const __DEV__: boolean;
 
 import type { ComponentRenderProps } from "@json-render/react-native";
+import { useStateStore } from "@json-render/react-native";
 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 {
+  getPaginatorAction,
+  runPaginatorAction,
+} from "../../ui/paginator-state";
 import { useSnapStackDirection } from "../stack-direction-context";
 import { ICON_MAP } from "./snap-icon";
 
@@ -37,6 +42,8 @@ export function SnapActionButton({
 
   const on = (element as unknown as { on?: Record<string, unknown> }).on;
   const showExternalIcon = isExternalLinkAction(on);
+  const stateStore = useStateStore();
+  const paginatorAction = getPaginatorAction(on);
 
   return (
     <View style={inHorizontalStack ? styles.outerHorizontal : styles.outer}>
@@ -50,6 +57,7 @@ export function SnapActionButton({
           pressed && styles.pressed,
         ]}
         onPress={() => {
+          if (runPaginatorAction(stateStore, paginatorAction)) return;
           void (async () => {
             try {
               await emit("press");
@@ -100,10 +108,10 @@ const styles = StyleSheet.create({
     gap: 8,
   },
   btnDefault: {
-    paddingVertical: 10,
+    paddingVertical: 8,
   },
   btnOther: {
-    paddingVertical: 8,
+    paddingVertical: 6,
   },
   pressed: { opacity: 0.88 },
 });

package/src/react-native/components/snap-cell-grid.tsx

@@ -4,6 +4,10 @@ import { useStateStore } from "@json-render/react-native";
 import { useSnapPalette } from "../use-snap-palette";
 import { useSnapTheme } from "../theme";
 import { POST_GRID_TAP_KEY, readableTextOnHex } from "@farcaster/snap";
+import {
+  getPaginatorAction,
+  runPaginatorAction,
+} from "../../ui/paginator-state";
 
 export function SnapCellGrid({
   element,
@@ -13,12 +17,21 @@ export function SnapCellGrid({
   const on = (element as unknown as { on?: Record<string, unknown> }).on;
   const { hex, appearance } = useSnapPalette();
   const { colors } = useSnapTheme();
-  const { get, set } = useStateStore();
+  const stateStore = useStateStore();
+  const { get, set } = stateStore;
+  const paginatorAction = getPaginatorAction(on);
   const cols = Number(props.cols ?? 2);
   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 maxWidthKey = typeof props.maxWidth === "string" ? props.maxWidth : undefined;
+  const maxWidthMap: Record<string, number | undefined> = {
+    sm: 160,
+    md: 220,
+    lg: undefined,
+  };
+  const maxWidth = maxWidthKey ? maxWidthMap[maxWidthKey] : undefined;
   const gap = String(props.gap ?? "sm");
   const gapMap: Record<string, number> = { none: 0, sm: 1, md: 2, lg: 4 };
   const gapPx = gapMap[gap] ?? 1;
@@ -75,7 +88,12 @@ export function SnapCellGrid({
     } else {
       set(tapPath, wire);
     }
-    if (hasPressAction) emit("press");
+    if (
+      hasPressAction &&
+      !runPaginatorAction(stateStore, paginatorAction)
+    ) {
+      emit("press");
+    }
   };
 
   const ringOuter = appearance === "dark" ? "#fff" : "#000";
@@ -168,6 +186,8 @@ export function SnapCellGrid({
       style={[
         styles.wrap,
         {
+          maxWidth,
+          alignSelf: maxWidth ? "center" : undefined,
           gap: gapPx,
           backgroundColor: colors.muted,
           padding: 4,