@farcaster/snap 2.5.0 → 2.5.1

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

@@ -27,6 +27,7 @@ export function SnapCellGrid({ element: { props, on }, emit, }) {
     for (const c of cells) {
         cellMap.set(`${Number(c.row)},${Number(c.col)}`, {
             color: c.color,
+            textColor: c.textColor,
             content: c.content != null ? String(c.content) : undefined,
             value: typeof c.value === "string" ? c.value : undefined,
         });
@@ -74,7 +75,11 @@ export function SnapCellGrid({ element: { props, on }, emit, }) {
             const selected = interactive && isSelected(r, c);
             const bgHex = cell?.color ? colors.colorHex(cell.color) : null;
             const bg = bgHex ?? emptyCellBg;
-            const textColor = bgHex ? readableTextOnHex(bgHex) : colors.text;
+            const textColor = cell?.textColor
+                ? colors.colorHex(cell.textColor)
+                : bgHex
+                    ? readableTextOnHex(bgHex)
+                    : colors.text;
             cellEls.push(_jsx("div", { role: interactive ? "button" : undefined, tabIndex: interactive ? 0 : undefined, onClick: interactive ? () => handleTap(r, c) : undefined, onKeyDown: interactive
                     ? (e) => {
                         if (e.key === "Enter" || e.key === " ") {

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

@@ -30,6 +30,7 @@ export function SnapCellGrid({ element, emit, }) {
     for (const c of cells) {
         cellMap.set(`${Number(c.row)},${Number(c.col)}`, {
             color: c.color,
+            textColor: c.textColor,
             content: c.content != null ? String(c.content) : undefined,
             value: typeof c.value === "string" ? c.value : undefined,
         });
@@ -78,7 +79,11 @@ export function SnapCellGrid({ element, emit, }) {
             const selected = interactive && isSelected(r, c);
             const bgHex = cell?.color ? hex(cell.color) : null;
             const bg = bgHex ?? emptyCellBg;
-            const textColor = bgHex ? readableTextOnHex(bgHex) : colors.text;
+            const textColor = cell?.textColor
+                ? hex(cell.textColor)
+                : bgHex
+                    ? readableTextOnHex(bgHex)
+                    : colors.text;
             const cellContent = cell?.content ? (_jsx(Text, { style: [styles.cellText, { color: textColor }], children: cell.content })) : null;
             // Two-tone ring: outer View with contrasting border, inner View with inverse border
             const cellView = selected ? (_jsx(View, { style: [

package/dist/ui/catalog.d.ts

@@ -445,6 +445,16 @@ export declare const snapJsonRenderCatalog: import("@json-render/core").Catalog<
                         purple: "purple";
                         pink: "pink";
                     }>, z.ZodString]>>>;
+                    textColor: z.ZodOptional<z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodUnion<readonly [z.ZodEnum<{
+                        gray: "gray";
+                        blue: "blue";
+                        red: "red";
+                        amber: "amber";
+                        green: "green";
+                        teal: "teal";
+                        purple: "purple";
+                        pink: "pink";
+                    }>, z.ZodString]>>>;
                     content: z.ZodOptional<z.ZodString>;
                     value: z.ZodOptional<z.ZodString>;
                 }, z.core.$strip>>;

package/dist/ui/catalog.js

@@ -90,7 +90,7 @@ export const snapJsonRenderCatalog = defineCatalog(snapJsonRenderSchema, {
         },
         cell_grid: {
             props: cellGridProps,
-            description: "Cell grid — sparse colored cells on a rows×cols grid. Cell color is a palette name or literal #rrggbb hex (hex ignores page accent). Two interaction modes: leave select 'off' and bind on.press to fire an action per cell press (inputs[name] is the pressed 'row,col' before the action runs); or set select 'single'/'multiple' for press-to-select with a visual ring (no auto-fire — pair with a separate submit button). on.press is ignored when select is on.",
+            description: "Cell grid — sparse colored cells on a rows×cols grid. Cell color and textColor are palette names or literal #rrggbb hex values (hex ignores page accent); textColor overrides the default auto-contrast text color. Two interaction modes: leave select 'off' and bind on.press to fire an action per cell press (inputs[name] is the pressed 'row,col' before the action runs); or set select 'single'/'multiple' for press-to-select with a visual ring (no auto-fire — pair with a separate submit button). on.press is ignored when select is on.",
         },
     },
     actions: {

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

@@ -16,6 +16,16 @@ export declare const cellGridProps: z.ZodObject<{
             purple: "purple";
             pink: "pink";
         }>, z.ZodString]>>>;
+        textColor: z.ZodOptional<z.ZodPipe<z.ZodTransform<unknown, unknown>, z.ZodUnion<readonly [z.ZodEnum<{
+            gray: "gray";
+            blue: "blue";
+            red: "red";
+            amber: "amber";
+            green: "green";
+            teal: "teal";
+            purple: "purple";
+            pink: "pink";
+        }>, z.ZodString]>>>;
         content: z.ZodOptional<z.ZodString>;
         value: z.ZodOptional<z.ZodString>;
     }, z.core.$strip>>;

package/dist/ui/cell-grid.js

@@ -2,16 +2,17 @@ import { z } from "zod";
 import { isSnapHexColorString, PALETTE_COLOR_VALUES } from "../colors.js";
 import { GRID_MIN_COLS, GRID_MAX_COLS, GRID_MIN_ROWS, GRID_MAX_ROWS, GRID_GAP_VALUES, GRID_CELL_ASPECT_RATIO_VALUES, } from "../constants.js";
 /** Palette name or `#rrggbb`; input is trimmed so palette and hex rules match runtime resolvers. */
-const cellGridCellColorSchema = z.preprocess((v) => (typeof v === "string" ? v.trim() : v), z.union([
+const cellGridCellColorSchema = (field) => z.preprocess((v) => (typeof v === "string" ? v.trim() : v), z.union([
     z.enum(PALETTE_COLOR_VALUES),
     z.string().refine(isSnapHexColorString, {
-        message: "cell_grid cell hex color must be #rrggbb",
+        message: `cell_grid cell ${field} hex must be #rrggbb`,
     }),
 ]));
 const cellGridCellSchema = z.object({
     row: z.number().int().nonnegative(),
     col: z.number().int().nonnegative(),
-    color: cellGridCellColorSchema.optional(),
+    color: cellGridCellColorSchema("color").optional(),
+    textColor: cellGridCellColorSchema("textColor").optional(),
     content: z.string().optional(),
     value: z.string().min(1).max(30).optional(),
 });

package/package.json

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

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

@@ -35,11 +35,12 @@ export function SnapCellGrid({
 
   const cellMap = new Map<
     string,
-    { color?: string; content?: string; value?: string }
+    { color?: string; textColor?: string; content?: string; value?: string }
   >();
   for (const c of cells) {
     cellMap.set(`${Number(c.row)},${Number(c.col)}`, {
       color: c.color as string | undefined,
+      textColor: c.textColor as string | undefined,
       content: c.content != null ? String(c.content) : undefined,
       value: typeof c.value === "string" ? c.value : undefined,
     });
@@ -90,7 +91,11 @@ export function SnapCellGrid({
       const selected = interactive && isSelected(r, c);
       const bgHex = cell?.color ? colors.colorHex(cell.color) : null;
       const bg = bgHex ?? emptyCellBg;
-      const textColor = bgHex ? readableTextOnHex(bgHex) : colors.text;
+      const textColor = cell?.textColor
+        ? colors.colorHex(cell.textColor)
+        : bgHex
+          ? readableTextOnHex(bgHex)
+          : colors.text;
 
       cellEls.push(
         <div

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

@@ -35,11 +35,12 @@ export function SnapCellGrid({
 
   const cellMap = new Map<
     string,
-    { color?: string; content?: string; value?: string }
+    { color?: string; textColor?: string; content?: string; value?: string }
   >();
   for (const c of cells) {
     cellMap.set(`${Number(c.row)},${Number(c.col)}`, {
       color: c.color as string | undefined,
+      textColor: c.textColor as string | undefined,
       content: c.content != null ? String(c.content) : undefined,
       value: typeof c.value === "string" ? c.value : undefined,
     });
@@ -92,7 +93,11 @@ export function SnapCellGrid({
       const selected = interactive && isSelected(r, c);
       const bgHex = cell?.color ? hex(cell.color) : null;
       const bg = bgHex ?? emptyCellBg;
-      const textColor = bgHex ? readableTextOnHex(bgHex) : colors.text;
+      const textColor = cell?.textColor
+        ? hex(cell.textColor)
+        : bgHex
+          ? readableTextOnHex(bgHex)
+          : colors.text;
 
       const cellContent = cell?.content ? (
         <Text style={[styles.cellText, { color: textColor }]}>

package/src/ui/README.md

@@ -41,7 +41,7 @@ Some elements accept a `color` prop:
 
 - `progress` — color name or `"accent"`
 - `bar_chart` — color name or `"accent"` at chart level; color name only per-bar
-- `grid` cells — `#rrggbb` hex
+- `grid` cell fill/text colors — `#rrggbb` hex
 
 When `color` is `"accent"` (or omitted), the element uses the accent color. When it is a specific color name or hex value, that color is **explicit** and independent of `page.theme.accent`.
 

package/src/ui/catalog.ts

@@ -107,7 +107,7 @@ export const snapJsonRenderCatalog = defineCatalog(snapJsonRenderSchema, {
     cell_grid: {
       props: cellGridProps,
       description:
-        "Cell grid — sparse colored cells on a rows×cols grid. Cell color is a palette name or literal #rrggbb hex (hex ignores page accent). Two interaction modes: leave select 'off' and bind on.press to fire an action per cell press (inputs[name] is the pressed 'row,col' before the action runs); or set select 'single'/'multiple' for press-to-select with a visual ring (no auto-fire — pair with a separate submit button). on.press is ignored when select is on.",
+        "Cell grid — sparse colored cells on a rows×cols grid. Cell color and textColor are palette names or literal #rrggbb hex values (hex ignores page accent); textColor overrides the default auto-contrast text color. Two interaction modes: leave select 'off' and bind on.press to fire an action per cell press (inputs[name] is the pressed 'row,col' before the action runs); or set select 'single'/'multiple' for press-to-select with a visual ring (no auto-fire — pair with a separate submit button). on.press is ignored when select is on.",
     },
   },
   actions: {

package/src/ui/cell-grid.ts

@@ -10,12 +10,12 @@ import {
 } from "../constants.js";
 
 /** Palette name or `#rrggbb`; input is trimmed so palette and hex rules match runtime resolvers. */
-const cellGridCellColorSchema = z.preprocess(
+const cellGridCellColorSchema = (field: "color" | "textColor") => z.preprocess(
   (v) => (typeof v === "string" ? v.trim() : v),
   z.union([
     z.enum(PALETTE_COLOR_VALUES),
     z.string().refine(isSnapHexColorString, {
-      message: "cell_grid cell hex color must be #rrggbb",
+      message: `cell_grid cell ${field} hex must be #rrggbb`,
     }),
   ]),
 );
@@ -23,7 +23,8 @@ const cellGridCellColorSchema = z.preprocess(
 const cellGridCellSchema = z.object({
   row: z.number().int().nonnegative(),
   col: z.number().int().nonnegative(),
-  color: cellGridCellColorSchema.optional(),
+  color: cellGridCellColorSchema("color").optional(),
+  textColor: cellGridCellColorSchema("textColor").optional(),
   content: z.string().optional(),
   value: z.string().min(1).max(30).optional(),
 });