@farcaster/snap 1.9.0 → 1.13.0

package/dist/ui/cell-grid.js

@@ -0,0 +1,38 @@
+import { z } from "zod";
+import { PALETTE_COLOR_VALUES } from "../colors.js";
+import { GRID_MIN_COLS, GRID_MAX_COLS, GRID_MIN_ROWS, GRID_MAX_ROWS, GRID_GAP_VALUES, } from "../constants.js";
+const cellGridCellSchema = z.object({
+    row: z.number().int().nonnegative(),
+    col: z.number().int().nonnegative(),
+    color: z.enum(PALETTE_COLOR_VALUES).optional(),
+    content: z.string().optional(),
+});
+export const cellGridProps = z
+    .object({
+    name: z.string().min(1).optional(),
+    cols: z.number().int().min(GRID_MIN_COLS).max(GRID_MAX_COLS),
+    rows: z.number().int().min(GRID_MIN_ROWS).max(GRID_MAX_ROWS),
+    cells: z.array(cellGridCellSchema),
+    gap: z.enum(GRID_GAP_VALUES).optional(),
+    select: z.enum(["off", "single", "multiple"]).optional(),
+})
+    .superRefine((val, ctx) => {
+    const { cols, rows, cells } = val;
+    for (let i = 0; i < cells.length; i++) {
+        const c = cells[i];
+        if (c.row < 0 || c.row >= rows) {
+            ctx.addIssue({
+                code: "custom",
+                message: `cell_grid cell row ${c.row} out of bounds (0–${rows - 1})`,
+                path: ["cells", i, "row"],
+            });
+        }
+        if (c.col < 0 || c.col >= cols) {
+            ctx.addIssue({
+                code: "custom",
+                message: `cell_grid cell col ${c.col} out of bounds (0–${cols - 1})`,
+                path: ["cells", i, "col"],
+            });
+        }
+    }
+});

package/dist/ui/index.d.ts

@@ -28,3 +28,7 @@ export { stackProps } from "./stack.js";
 export type { StackProps } from "./stack.js";
 export { textProps } from "./text.js";
 export type { TextProps } from "./text.js";
+export { barChartProps } from "./bar-chart.js";
+export type { BarChartProps } from "./bar-chart.js";
+export { cellGridProps } from "./cell-grid.js";
+export type { CellGridProps } from "./cell-grid.js";

package/dist/ui/index.js

@@ -14,3 +14,5 @@ export { separatorProps } from "./separator.js";
 export { sliderProps } from "./slider.js";
 export { stackProps } from "./stack.js";
 export { textProps } from "./text.js";
+export { barChartProps } from "./bar-chart.js";
+export { cellGridProps } from "./cell-grid.js";

package/llms.txt

@@ -30,7 +30,7 @@ Top-level fields: `version` (required, `"1.0"`), `theme` (optional, `{ accent: P
 
 `ui.root` is the ID of the root element. `ui.elements` is a flat map of element ID to element definition.
 
-## Components (14 total)
+## Components (16 total)
 
 ### Display Components
 
@@ -75,6 +75,21 @@ Top-level fields: `version` (required, `"1.0"`), `theme` (optional, `{ accent: P
 - `weight` (optional): `"bold"` | `"normal"`. Default: `"normal"`
 - `align` (optional): `"left"` | `"center"` | `"right"`. Default: `"left"`
 
+### Data Components
+
+**bar_chart** — Horizontal bar chart with labeled bars.
+- `bars` (array, required, 1–6 items): each `{ label: string (max 40), value: number (≥0), color?: PaletteColor }`
+- `max` (number, optional, ≥0): ceiling value; defaults to max bar value
+- `color` (optional): PaletteColor. Default bar color. Default: `"accent"`
+
+**cell_grid** — Colored cell grid, optionally interactive.
+- `name` (string, optional): POST inputs key. Default: `"grid_tap"`
+- `cols` (number, required, 2–32)
+- `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"`
+- `select` (optional): `"off"` | `"single"` | `"multiple"`. Default: `"off"`. Taps write to `inputs[name]`
+
 ### Container Components
 
 **stack** — Layout container.
@@ -158,14 +173,14 @@ Plus the special value `"accent"` which references `theme.accent`.
 ```ts
 import { snapJsonRenderCatalog } from "@farcaster/snap/ui";
 import { parseRequest, verifyJFSRequestBody } from "@farcaster/snap/server";
-import { createInMemoryDataStore } from "@farcaster/snap";
+import { withTursoServerless, createInMemoryDataStore } from "@farcaster/snap-turso";
 ```
 
-- `@farcaster/snap` — schemas, types, validation, data store
+- `@farcaster/snap` — schemas, types, validation
 - `@farcaster/snap/ui` — json-render catalog, component schemas
 - `@farcaster/snap/server` — request parsing, JFS verification
 - `@farcaster/snap-hono` — Hono adapter (`registerSnapHandler`)
-- `@farcaster/snap-turso` — Turso data store middleware
+- `@farcaster/snap-turso` — `withTursoServerless`, `DataStore` / `DataStoreValue`, in-memory and Turso helpers
 
 ## Full Documentation
 

package/package.json

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

package/src/constants.ts

@@ -3,3 +3,15 @@ export const SPEC_VERSION = "1.0" as const;
 export const MEDIA_TYPE = "application/vnd.farcaster.snap+json" as const;
 
 export const EFFECT_VALUES = ["confetti"] as const;
+
+// ─── Pixel grid ────────────────────────────────────────
+export const POST_GRID_TAP_KEY = "grid_tap" as const;
+export const GRID_MIN_COLS = 2;
+export const GRID_MAX_COLS = 32;
+export const GRID_MIN_ROWS = 2;
+export const GRID_MAX_ROWS = 16;
+export const GRID_GAP_VALUES = ["none", "sm", "md", "lg"] as const;
+
+// ─── Bar chart ─────────────────────────────────────────
+export const BAR_CHART_MAX_BARS = 6;
+export const BAR_CHART_LABEL_MAX_CHARS = 40;

package/src/index.ts

@@ -1,8 +1,12 @@
-export type { Spec as SnapSpec, UIElement as SnapUIElement } from "@json-render/core";
+export type {
+  Spec as SnapSpec,
+  UIElement as SnapUIElement,
+} from "@json-render/core";
 export {
   SPEC_VERSION,
   MEDIA_TYPE,
   EFFECT_VALUES,
+  POST_GRID_TAP_KEY,
 } from "./constants";
 export {
   DEFAULT_THEME_ACCENT,
@@ -22,17 +26,9 @@ export {
   type SnapContext,
   type SnapResponse,
   type SnapHandlerResult,
+  type SnapElementInput,
+  type SnapSpecInput,
   type SnapFunction,
   type SnapPayload,
 } from "./schemas";
-export {
-  validateSnapResponse,
-  type ValidationResult,
-} from "./validator";
-export {
-  type DataStoreValue,
-  type SnapDataStore,
-  createDefaultDataStore,
-  createInMemoryDataStore,
-} from "./dataStore";
-export { type Middleware, useMiddleware } from "./middleware";
+export { validateSnapResponse, type ValidationResult } from "./validator";

package/src/react/catalog-renderer.tsx

@@ -16,6 +16,8 @@ import { SnapStack } from "./components/stack";
 import { SnapSwitch } from "./components/switch";
 import { SnapText } from "./components/text";
 import { SnapToggleGroup } from "./components/toggle-group";
+import { SnapBarChart } from "./components/bar-chart";
+import { SnapCellGrid } from "./components/cell-grid";
 
 /**
  * Maps snap json-render catalog types to React components.
@@ -36,4 +38,6 @@ export const SnapCatalogView = createRenderer(snapJsonRenderCatalog, {
   switch: SnapSwitch,
   text: SnapText,
   toggle_group: SnapToggleGroup,
+  bar_chart: SnapBarChart,
+  cell_grid: SnapCellGrid,
 });

package/src/react/components/bar-chart.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import type { PaletteColor } from "@farcaster/snap";
+import { PALETTE_LIGHT_HEX } from "@farcaster/snap";
+import { useSnapAccentScopeStyle } from "../hooks/use-snap-accent";
+
+export function SnapBarChart({
+  element: { props },
+}: {
+  element: { props: Record<string, unknown> };
+}) {
+  const accentStyle = useSnapAccentScopeStyle();
+  const bars = Array.isArray(props.bars) ? props.bars : [];
+  const chartColor = String(props.color ?? "accent");
+  const maxVal =
+    props.max != null
+      ? Number(props.max)
+      : Math.max(
+          ...bars.map((b: { value?: number }) => Number(b.value ?? 0)),
+          1,
+        );
+
+  function barColor(bar: { color?: string }): string {
+    if (bar.color && bar.color in PALETTE_LIGHT_HEX) {
+      return `var(--snap-color-${bar.color}, ${PALETTE_LIGHT_HEX[bar.color as PaletteColor]})`;
+    }
+    if (chartColor !== "accent" && chartColor in PALETTE_LIGHT_HEX) {
+      return `var(--snap-color-${chartColor}, ${PALETTE_LIGHT_HEX[chartColor as PaletteColor]})`;
+    }
+    return "var(--primary)";
+  }
+
+  return (
+    <div className="flex w-full flex-col gap-2" style={accentStyle}>
+      {bars.map(
+        (
+          bar: { label?: string; value?: number; color?: string },
+          i: number,
+        ) => {
+          const value = Number(bar.value ?? 0);
+          const pct = maxVal > 0 ? Math.min(100, (value / maxVal) * 100) : 0;
+          const fill = barColor(bar);
+          return (
+            <div key={i} className="flex w-full items-center gap-2">
+              <span className="text-muted-foreground w-20 shrink-0 truncate text-right text-xs">
+                {String(bar.label ?? "")}
+              </span>
+              <div className="bg-muted h-2.5 flex-1 overflow-hidden rounded-full">
+                <div
+                  className="h-full rounded-full transition-all"
+                  style={{
+                    width: `${pct}%`,
+                    minWidth: pct > 0 ? 4 : 0,
+                    background: fill,
+                  }}
+                />
+              </div>
+              <span className="text-muted-foreground w-8 shrink-0 text-xs tabular-nums">
+                {value}
+              </span>
+            </div>
+          );
+        },
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,131 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { useStateStore } from "@json-render/react";
+import { cn } from "@neynar/ui/utils";
+import { POST_GRID_TAP_KEY, PALETTE_LIGHT_HEX } from "@farcaster/snap";
+import type { PaletteColor } from "@farcaster/snap";
+import { useSnapAccentScopeStyle } from "../hooks/use-snap-accent";
+import { useColorMode } from "@neynar/ui/color-mode";
+
+export function SnapCellGrid({
+  element: { props },
+}: {
+  element: { props: Record<string, unknown> };
+}) {
+  const { get, set } = useStateStore();
+  const accentStyle = useSnapAccentScopeStyle();
+  const { mode: appearance } = useColorMode();
+  const cols = Number(props.cols ?? 2);
+  const rows = Number(props.rows ?? 2);
+  const select = String(props.select ?? "off");
+  const interactive = select !== "off";
+  const isMultiple = select === "multiple";
+  const cells = Array.isArray(props.cells) ? props.cells : [];
+  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 name = props.name ? String(props.name) : POST_GRID_TAP_KEY;
+  const tapPath = `/inputs/${name}`;
+  const tapRaw = get(tapPath);
+
+  // Parse selection — single mode: "row,col" string; multi mode: "row,col|row,col|..." string
+  const selectedSet = new Set<string>();
+  if (typeof tapRaw === "string" && tapRaw.length > 0) {
+    for (const part of tapRaw.split("|")) {
+      if (part.includes(",")) selectedSet.add(part);
+    }
+  }
+
+  const isSelected = (r: number, c: number) => selectedSet.has(`${r},${c}`);
+
+  const handleTap = (r: number, c: number) => {
+    const key = `${r},${c}`;
+    if (isMultiple) {
+      const next = new Set(selectedSet);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      set(tapPath, [...next].join("|"));
+    } else {
+      set(tapPath, key);
+    }
+  };
+
+  const cellMap = new Map<string, { color?: string; content?: string }>();
+  for (const c of cells) {
+    cellMap.set(`${Number(c.row)},${Number(c.col)}`, {
+      color: c.color as string | undefined,
+      content: c.content != null ? String(c.content) : undefined,
+    });
+  }
+
+  const ringColor = appearance === "dark" ? "#fff" : "#000";
+
+  const cellEls: ReactNode[] = [];
+  for (let r = 0; r < rows; r++) {
+    for (let c = 0; c < cols; c++) {
+      const cell = cellMap.get(`${r},${c}`);
+      const selected = interactive && isSelected(r, c);
+      const bg =
+        cell?.color && cell.color in PALETTE_LIGHT_HEX
+          ? `var(--snap-color-${cell.color}, ${PALETTE_LIGHT_HEX[cell.color as PaletteColor]})`
+          : "transparent";
+
+      cellEls.push(
+        <div
+          key={`${r}-${c}`}
+          role={interactive ? "button" : undefined}
+          tabIndex={interactive ? 0 : undefined}
+          onClick={interactive ? () => handleTap(r, c) : undefined}
+          onKeyDown={
+            interactive
+              ? (e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    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={{
+            background: bg,
+            // Two-layer ring: 1px white/black inner + 2px accent outer
+            boxShadow: selected
+              ? `inset 0 0 0 1px ${appearance === "dark" ? "#000" : "#fff"}, inset 0 0 0 2px ${appearance === "dark" ? "#fff" : "#000"}`
+              : undefined,
+          }}
+        >
+          {cell?.content ?? ""}
+        </div>,
+      );
+    }
+  }
+
+  const selectionLabel = interactive && selectedSet.size > 0
+    ? `inputs.${name}: ${[...selectedSet].join(isMultiple ? " | " : "")}`
+    : null;
+
+  return (
+    <div style={accentStyle}>
+      <div
+        className="grid w-full"
+        style={{
+          gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
+          gap: gapPx,
+        }}
+      >
+        {cellEls}
+      </div>
+      {selectionLabel && (
+        <div className="text-muted-foreground mt-1.5 truncate text-xs font-mono">
+          {selectionLabel}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -14,6 +14,8 @@ import { SnapStack } from "./components/snap-stack";
 import { SnapSwitch } from "./components/snap-switch";
 import { SnapText } from "./components/snap-text";
 import { SnapToggleGroup } from "./components/snap-toggle-group";
+import { SnapBarChart } from "./components/snap-bar-chart";
+import { SnapCellGrid } from "./components/snap-cell-grid";
 
 /**
  * Maps snap json-render catalog types to React Native primitives.
@@ -34,4 +36,6 @@ export const SnapCatalogView = createRenderer(snapJsonRenderCatalog, {
   switch: SnapSwitch,
   text: SnapText,
   toggle_group: SnapToggleGroup,
+  bar_chart: SnapBarChart,
+  cell_grid: SnapCellGrid,
 });

package/src/react-native/components/snap-bar-chart.tsx

@@ -0,0 +1,73 @@
+import type { ComponentRenderProps } from "@json-render/react-native";
+import { StyleSheet, Text, View } from "react-native";
+import { useSnapPalette } from "../use-snap-palette";
+import { useSnapTheme } from "../theme";
+
+export function SnapBarChart({
+  element: { props },
+}: ComponentRenderProps<Record<string, unknown>>) {
+  const { accentHex, hex } = useSnapPalette();
+  const { colors } = useSnapTheme();
+  const bars = Array.isArray(props.bars) ? props.bars : [];
+  const chartColor = String(props.color ?? "accent");
+  const maxVal =
+    props.max != null
+      ? Number(props.max)
+      : Math.max(
+          ...bars.map((b: { value?: number }) => Number(b.value ?? 0)),
+          1,
+        );
+
+  function barFill(bar: { color?: string }): string {
+    if (bar.color) return hex(bar.color);
+    if (chartColor !== "accent") return hex(chartColor);
+    return accentHex;
+  }
+
+  return (
+    <View style={styles.wrap}>
+      {bars.map(
+        (
+          bar: { label?: string; value?: number; color?: string },
+          i: number,
+        ) => {
+          const value = Number(bar.value ?? 0);
+          const pct = maxVal > 0 ? Math.min(100, (value / maxVal) * 100) : 0;
+          return (
+            <View key={i} style={styles.row}>
+              <Text
+                style={[styles.label, { color: colors.textSecondary }]}
+                numberOfLines={1}
+              >
+                {String(bar.label ?? "")}
+              </Text>
+              <View style={[styles.track, { backgroundColor: colors.muted }]}>
+                <View
+                  style={[
+                    styles.fill,
+                    {
+                      width: `${pct}%`,
+                      backgroundColor: barFill(bar),
+                    },
+                  ]}
+                />
+              </View>
+              <Text style={[styles.value, { color: colors.textSecondary }]}>
+                {value}
+              </Text>
+            </View>
+          );
+        },
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrap: { flex: 1, width: "100%", gap: 8 },
+  row: { flexDirection: "row", alignItems: "center", gap: 8 },
+  label: { width: 80, fontSize: 12, textAlign: "right" },
+  track: { flex: 1, height: 10, borderRadius: 9999, overflow: "hidden" },
+  fill: { height: "100%", borderRadius: 9999 },
+  value: { width: 32, fontSize: 12, fontVariant: ["tabular-nums"] },
+});

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

@@ -0,0 +1,152 @@
+import type { ComponentRenderProps } from "@json-render/react-native";
+import { StyleSheet, Text, View, Pressable } from "react-native";
+import { useStateStore } from "@json-render/react-native";
+import { useSnapPalette } from "../use-snap-palette";
+import { useSnapTheme } from "../theme";
+import { POST_GRID_TAP_KEY } from "@farcaster/snap";
+
+export function SnapCellGrid({
+  element: { props },
+}: ComponentRenderProps<Record<string, unknown>>) {
+  const { hex, appearance } = useSnapPalette();
+  const { colors } = useSnapTheme();
+  const { get, set } = useStateStore();
+  const cols = Number(props.cols ?? 2);
+  const rows = Number(props.rows ?? 2);
+  const cells = Array.isArray(props.cells) ? props.cells : [];
+  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 select = String(props.select ?? "off");
+  const interactive = select !== "off";
+  const isMultiple = select === "multiple";
+
+  const name = props.name ? String(props.name) : POST_GRID_TAP_KEY;
+  const tapPath = `/inputs/${name}`;
+  const tapRaw = get(tapPath);
+
+  const selectedSet = new Set<string>();
+  if (typeof tapRaw === "string" && tapRaw.length > 0) {
+    for (const part of tapRaw.split("|")) {
+      if (part.includes(",")) selectedSet.add(part);
+    }
+  }
+
+  const isSelected = (r: number, c: number) => selectedSet.has(`${r},${c}`);
+
+  const handleTap = (r: number, c: number) => {
+    const key = `${r},${c}`;
+    if (isMultiple) {
+      const next = new Set(selectedSet);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      set(tapPath, [...next].join("|"));
+    } else {
+      set(tapPath, key);
+    }
+  };
+
+  const cellMap = new Map<string, { color?: string; content?: string }>();
+  for (const c of cells) {
+    cellMap.set(`${Number(c.row)},${Number(c.col)}`, {
+      color: c.color as string | undefined,
+      content: c.content != null ? String(c.content) : undefined,
+    });
+  }
+
+  const ringOuter = appearance === "dark" ? "#fff" : "#000";
+  const ringInner = appearance === "dark" ? "#000" : "#fff";
+
+  const rowEls = [];
+  for (let r = 0; r < rows; r++) {
+    const rowCells = [];
+    for (let c = 0; c < cols; c++) {
+      const cell = cellMap.get(`${r},${c}`);
+      const selected = interactive && isSelected(r, c);
+      const bg = cell?.color ? hex(cell.color) : "transparent";
+
+      const cellContent = cell?.content ? (
+        <Text style={[styles.cellText, { color: colors.textPrimary }]}>
+          {cell.content}
+        </Text>
+      ) : null;
+
+      // Two-tone ring: outer View with contrasting border, inner View with inverse border
+      const cellView = selected ? (
+        <View style={[styles.cell, { borderWidth: 1, borderColor: ringOuter, borderRadius: 4 }]}>
+          <View
+            style={[
+              styles.innerCell,
+              { backgroundColor: bg, borderWidth: 1, borderColor: ringInner, borderRadius: 3 },
+            ]}
+          >
+            {cellContent}
+          </View>
+        </View>
+      ) : (
+        <View style={[styles.cell, { backgroundColor: bg }]}>
+          {cellContent}
+        </View>
+      );
+
+      rowCells.push(
+        interactive ? (
+          <Pressable
+            key={`${r}-${c}`}
+            onPress={() => handleTap(r, c)}
+            style={styles.cellWrap}
+          >
+            {cellView}
+          </Pressable>
+        ) : (
+          <View key={`${r}-${c}`} style={styles.cellWrap}>
+            {cellView}
+          </View>
+        ),
+      );
+    }
+    rowEls.push(
+      <View key={r} style={[styles.gridRow, { gap: gapPx }]}>
+        {rowCells}
+      </View>,
+    );
+  }
+
+  const selectionLabel = interactive && selectedSet.size > 0
+    ? `inputs.${name}: ${[...selectedSet].join(isMultiple ? " | " : "")}`
+    : null;
+
+  return (
+    <View style={[styles.wrap, { gap: gapPx }]}>
+      {rowEls}
+      {selectionLabel ? (
+        <Text style={[styles.selectionText, { color: colors.textSecondary }]}>
+          {selectionLabel}
+        </Text>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrap: { width: "100%" },
+  gridRow: { flexDirection: "row" },
+  cellWrap: { flex: 1 },
+  cell: {
+    flex: 1,
+    minHeight: 28,
+    borderRadius: 4,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  innerCell: {
+    flex: 1,
+    width: "100%",
+    minHeight: 26,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  cellText: { fontSize: 12, fontWeight: "600" },
+  selectionText: { fontSize: 11, fontFamily: "monospace", marginTop: 6 },
+});