@farcaster/snap 1.14.0 → 1.15.1

package/dist/react/accent-context.d.ts

@@ -1,6 +1,8 @@
 import { type ReactNode } from "react";
-export declare function SnapPreviewAccentProvider({ pageAccent, children, }: {
+export declare function SnapPreviewAccentProvider({ pageAccent, appearance, children, }: {
     pageAccent: string | undefined;
+    appearance?: "light" | "dark";
     children: ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function useSnapPreviewPageAccent(): string | undefined;
+export declare function useSnapAppearance(): "light" | "dark";

package/dist/react/accent-context.js

@@ -1,10 +1,13 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
-const SnapPreviewAccentContext = createContext(null);
-export function SnapPreviewAccentProvider({ pageAccent, children, }) {
-    return (_jsx(SnapPreviewAccentContext.Provider, { value: { pageAccent }, children: children }));
+const SnapPreviewContext = createContext(null);
+export function SnapPreviewAccentProvider({ pageAccent, appearance = "dark", children, }) {
+    return (_jsx(SnapPreviewContext.Provider, { value: { pageAccent, appearance }, children: children }));
 }
 export function useSnapPreviewPageAccent() {
-    return useContext(SnapPreviewAccentContext)?.pageAccent;
+    return useContext(SnapPreviewContext)?.pageAccent;
+}
+export function useSnapAppearance() {
+    return useContext(SnapPreviewContext)?.appearance ?? "dark";
 }

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

@@ -16,6 +16,7 @@ export function SnapCellGrid({ element: { props }, }) {
     const gap = String(props.gap ?? "sm");
     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 name = props.name ? String(props.name) : POST_GRID_TAP_KEY;
     const tapPath = `/inputs/${name}`;
     const tapRaw = get(tapPath);
@@ -62,9 +63,9 @@ export function SnapCellGrid({ element: { props }, }) {
                             handleTap(r, c);
                         }
                     }
-                    : undefined, className: cn("flex min-h-7 items-center justify-center rounded text-xs font-semibold", interactive ? "cursor-pointer select-none" : "cursor-default"), style: {
+                    : undefined, className: cn("flex items-center justify-center rounded text-xs font-semibold", interactive ? "cursor-pointer select-none" : "cursor-default"), style: {
+                    height: rowHeight,
                     background: bg,
-                    // Two-layer ring: 1px white/black inner + 2px accent outer
                     boxShadow: selected
                         ? `inset 0 0 0 1px ${colors.mode === "dark" ? "#000" : "#fff"}, inset 0 0 0 2px ${colors.mode === "dark" ? "#fff" : "#000"}`
                         : undefined,
@@ -74,9 +75,13 @@ export function SnapCellGrid({ element: { props }, }) {
     const selectionLabel = interactive && selectedSet.size > 0
         ? `inputs.${name}: ${[...selectedSet].join(isMultiple ? " | " : "")}`
         : null;
-    return (_jsxs("div", { children: [_jsx("div", { className: "grid w-full rounded-lg p-1", style: {
-                    gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
+    return (_jsxs("div", { children: [_jsx("div", { style: {
+                    display: "grid",
+                    width: "100%",
+                    gridTemplateColumns: `repeat(${cols}, 1fr)`,
                     gap: gapPx,
+                    padding: 4,
+                    borderRadius: 8,
                     backgroundColor: colors.muted,
                 }, children: cellEls }), selectionLabel && (_jsx("div", { className: "mt-1.5 truncate text-xs font-mono", style: { color: colors.textMuted }, children: selectionLabel }))] }));
 }

package/dist/react/hooks/use-snap-colors.js

@@ -1,9 +1,8 @@
 "use client";
 import { useMemo } from "react";
 import { useStateStore } from "@json-render/react";
-import { useColorMode } from "@neynar/ui/color-mode";
 import { resolveSnapPaletteHex } from "../lib/resolve-palette-hex.js";
-import { useSnapPreviewPageAccent } from "../accent-context.js";
+import { useSnapPreviewPageAccent, useSnapAppearance } from "../accent-context.js";
 import { PALETTE_DARK_HEX, PALETTE_LIGHT_HEX } from "@farcaster/snap";
 /** Readable foreground color (black or white) for a given hex background. */
 export function pickForegroundForBg(hex) {
@@ -69,7 +68,7 @@ function buildSnapColors(accentName, mode) {
  */
 export function useSnapColors() {
     const { get } = useStateStore();
-    const { mode } = useColorMode();
+    const mode = useSnapAppearance();
     const pageAccent = useSnapPreviewPageAccent();
     const fromState = get("/theme/accent");
     const accentRaw = (typeof pageAccent === "string" && pageAccent.length > 0

package/dist/react/index.js

@@ -174,7 +174,7 @@ export function SnapView({ snap, handlers, loading = false, appearance = "dark",
                 break;
         }
     }, [handlers]);
-    return (_jsxs("div", { style: { position: "relative", width: "100%" }, children: [showConfetti && _jsx(ConfettiOverlay, {}), loading && (_jsx("div", { style: {
+    return (_jsxs("div", { style: { position: "relative", width: "100%" }, children: [showConfetti && _jsx(ConfettiOverlay, {}), _jsx("div", { style: {
                     position: "absolute",
                     inset: 0,
                     display: "flex",
@@ -182,10 +182,13 @@ export function SnapView({ snap, handlers, loading = false, appearance = "dark",
                     justifyContent: "center",
                     zIndex: 10,
                     fontSize: 14,
-                    color: "var(--text-muted)",
-                    background: "var(--bg-primary, rgba(0,0,0,0.6))",
-                    backdropFilter: "blur(4px)",
-                }, children: "Loading..." })), _jsx("div", { style: previewSurfaceStyle, children: _jsx(SnapPreviewAccentProvider, { pageAccent: snap.theme?.accent, children: _jsx(SnapCatalogView, { spec: spec, state: initialState, loading: false, onStateChange: (changes) => {
+                    color: appearance === "dark" ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.4)",
+                    background: appearance === "dark" ? "rgba(0,0,0,0.3)" : "rgba(255,255,255,0.5)",
+                    backdropFilter: loading ? "blur(8px)" : "blur(0px)",
+                    opacity: loading ? 1 : 0,
+                    pointerEvents: loading ? "auto" : "none",
+                    transition: "opacity 0.3s ease, backdrop-filter 0.3s ease",
+                }, children: "Loading..." }), _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/index.js

@@ -133,7 +133,7 @@ function SnapViewInner({ snap, handlers, loading = false, }) {
     return (_jsxs(View, { style: styles.container, children: [loading && (_jsx(View, { style: [
                     styles.overlay,
                     {
-                        backgroundColor: mode === "dark" ? "rgba(0,0,0,0.6)" : "rgba(255,255,255,0.75)",
+                        backgroundColor: mode === "dark" ? "rgba(0,0,0,0.3)" : "rgba(255,255,255,0.5)",
                     },
                 ], children: _jsx(ActivityIndicator, { size: "large", color: accentHex }) })), _jsx(SnapCatalogView, { spec: spec, state: initialState, loading: false, onStateChange: (changes) => {
                     applyStatePaths(stateRef.current, changes);

package/dist/ui/catalog.d.ts

@@ -392,6 +392,7 @@ export declare const snapJsonRenderCatalog: import("@json-render/core").Catalog<
                     none: "none";
                     lg: "lg";
                 }>>;
+                rowHeight: z.ZodOptional<z.ZodNumber>;
                 select: z.ZodOptional<z.ZodEnum<{
                     multiple: "multiple";
                     off: "off";

package/dist/ui/cell-grid.d.ts

@@ -24,6 +24,7 @@ export declare const cellGridProps: z.ZodObject<{
         none: "none";
         lg: "lg";
     }>>;
+    rowHeight: z.ZodOptional<z.ZodNumber>;
     select: z.ZodOptional<z.ZodEnum<{
         multiple: "multiple";
         off: "off";

package/dist/ui/cell-grid.js

@@ -14,6 +14,7 @@ export const cellGridProps = z
     rows: z.number().int().min(GRID_MIN_ROWS).max(GRID_MAX_ROWS),
     cells: z.array(cellGridCellSchema),
     gap: z.enum(GRID_GAP_VALUES).optional(),
+    rowHeight: z.number().int().min(8).max(64).optional(),
     select: z.enum(["off", "single", "multiple"]).optional(),
 })
     .superRefine((val, ctx) => {

package/llms.txt

@@ -88,6 +88,7 @@ Top-level fields: `version` (required, `"1.0"`), `theme` (optional, `{ accent: P
 - `rows` (number, required, 2–16)
 - `cells` (array, required): sparse list of `{ row, col, color?: PaletteColor, content?: string }`
 - `gap` (optional): `"none"` (0px) | `"sm"` (1px) | `"md"` (2px) | `"lg"` (4px). Default: `"sm"`
+- `rowHeight` (number, optional, 8–64): pixel height per row. Default: 28. Grid height = rows × rowHeight
 - `select` (optional): `"off"` | `"single"` | `"multiple"`. Default: `"off"`. Taps write to `inputs[name]`
 
 ### Container Components

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farcaster/snap",
-  "version": "1.14.0",
+  "version": "1.15.1",
   "description": "Farcaster Snaps 🫰",
   "repository": {
     "type": "git",

package/src/react/accent-context.tsx

@@ -2,28 +2,35 @@
 
 import { createContext, useContext, type ReactNode } from "react";
 
-type SnapPreviewAccentContextValue = {
+type SnapPreviewContextValue = {
   /** From loaded snap `page.theme.accent` (undefined if the snap omits it). */
   pageAccent: string | undefined;
+  /** Light/dark appearance passed from SnapView. */
+  appearance: "light" | "dark";
 };
 
-const SnapPreviewAccentContext =
-  createContext<SnapPreviewAccentContextValue | null>(null);
+const SnapPreviewContext = createContext<SnapPreviewContextValue | null>(null);
 
 export function SnapPreviewAccentProvider({
   pageAccent,
+  appearance = "dark",
   children,
 }: {
   pageAccent: string | undefined;
+  appearance?: "light" | "dark";
   children: ReactNode;
 }) {
   return (
-    <SnapPreviewAccentContext.Provider value={{ pageAccent }}>
+    <SnapPreviewContext.Provider value={{ pageAccent, appearance }}>
       {children}
-    </SnapPreviewAccentContext.Provider>
+    </SnapPreviewContext.Provider>
   );
 }
 
 export function useSnapPreviewPageAccent(): string | undefined {
-  return useContext(SnapPreviewAccentContext)?.pageAccent;
+  return useContext(SnapPreviewContext)?.pageAccent;
+}
+
+export function useSnapAppearance(): "light" | "dark" {
+  return useContext(SnapPreviewContext)?.appearance ?? "dark";
 }

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

@@ -22,6 +22,7 @@ export function SnapCellGrid({
   const gap = String(props.gap ?? "sm");
   const gapMap: Record<string, number> = { none: 0, sm: 1, md: 2, lg: 4 };
   const gapPx = gapMap[gap] ?? 1;
+  const rowHeight = typeof props.rowHeight === "number" ? props.rowHeight : 28;
 
   const name = props.name ? String(props.name) : POST_GRID_TAP_KEY;
   const tapPath = `/inputs/${name}`;
@@ -81,12 +82,12 @@ export function SnapCellGrid({
               : undefined
           }
           className={cn(
-            "flex min-h-7 items-center justify-center rounded text-xs font-semibold",
+            "flex items-center justify-center rounded text-xs font-semibold",
             interactive ? "cursor-pointer select-none" : "cursor-default",
           )}
           style={{
+            height: rowHeight,
             background: bg,
-            // Two-layer ring: 1px white/black inner + 2px accent outer
             boxShadow: selected
               ? `inset 0 0 0 1px ${colors.mode === "dark" ? "#000" : "#fff"}, inset 0 0 0 2px ${colors.mode === "dark" ? "#fff" : "#000"}`
               : undefined,
@@ -105,10 +106,13 @@ export function SnapCellGrid({
   return (
     <div>
       <div
-        className="grid w-full rounded-lg p-1"
         style={{
-          gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
+          display: "grid",
+          width: "100%",
+          gridTemplateColumns: `repeat(${cols}, 1fr)`,
           gap: gapPx,
+          padding: 4,
+          borderRadius: 8,
           backgroundColor: colors.muted,
         }}
       >

package/src/react/hooks/use-snap-colors.ts

@@ -2,9 +2,8 @@
 
 import { useMemo } from "react";
 import { useStateStore } from "@json-render/react";
-import { useColorMode } from "@neynar/ui/color-mode";
 import { resolveSnapPaletteHex } from "../lib/resolve-palette-hex";
-import { useSnapPreviewPageAccent } from "../accent-context";
+import { useSnapPreviewPageAccent, useSnapAppearance } from "../accent-context";
 import type { PaletteColor } from "@farcaster/snap";
 import { PALETTE_DARK_HEX, PALETTE_LIGHT_HEX } from "@farcaster/snap";
 
@@ -113,7 +112,7 @@ function buildSnapColors(
  */
 export function useSnapColors(): SnapColors {
   const { get } = useStateStore();
-  const { mode } = useColorMode();
+  const mode = useSnapAppearance();
   const pageAccent = useSnapPreviewPageAccent();
   const fromState = get("/theme/accent");
   const accentRaw =

package/src/react/index.tsx

@@ -283,27 +283,28 @@ export function SnapView({
   return (
     <div style={{ position: "relative", width: "100%" }}>
       {showConfetti && <ConfettiOverlay />}
-      {loading && (
-        <div
-          style={{
-            position: "absolute",
-            inset: 0,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            zIndex: 10,
-            fontSize: 14,
-            color: "var(--text-muted)",
-            background: "var(--bg-primary, rgba(0,0,0,0.6))",
-            backdropFilter: "blur(4px)",
-          }}
-        >
-          Loading...
-        </div>
-      )}
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          zIndex: 10,
+          fontSize: 14,
+          color: appearance === "dark" ? "rgba(255,255,255,0.5)" : "rgba(0,0,0,0.4)",
+          background: appearance === "dark" ? "rgba(0,0,0,0.3)" : "rgba(255,255,255,0.5)",
+          backdropFilter: loading ? "blur(8px)" : "blur(0px)",
+          opacity: loading ? 1 : 0,
+          pointerEvents: loading ? "auto" : "none",
+          transition: "opacity 0.3s ease, backdrop-filter 0.3s ease",
+        }}
+      >
+        Loading...
+      </div>
 
       <div style={previewSurfaceStyle}>
-        <SnapPreviewAccentProvider pageAccent={snap.theme?.accent}>
+        <SnapPreviewAccentProvider pageAccent={snap.theme?.accent} appearance={appearance}>
           <SnapCatalogView
             key={pageKey}
             spec={spec}

package/src/react-native/index.tsx

@@ -213,7 +213,7 @@ function SnapViewInner({
             styles.overlay,
             {
               backgroundColor:
-                mode === "dark" ? "rgba(0,0,0,0.6)" : "rgba(255,255,255,0.75)",
+                mode === "dark" ? "rgba(0,0,0,0.3)" : "rgba(255,255,255,0.5)",
             },
           ]}
         >

package/src/ui/cell-grid.ts

@@ -22,6 +22,7 @@ export const cellGridProps = z
     rows: z.number().int().min(GRID_MIN_ROWS).max(GRID_MAX_ROWS),
     cells: z.array(cellGridCellSchema),
     gap: z.enum(GRID_GAP_VALUES).optional(),
+    rowHeight: z.number().int().min(8).max(64).optional(),
     select: z.enum(["off", "single", "multiple"]).optional(),
   })
   .superRefine((val, ctx) => {