@farcaster/snap 1.10.0 → 1.13.0

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

@@ -2,7 +2,12 @@ export type {
   Spec as SnapSpec,
   UIElement as SnapUIElement,
 } from "@json-render/core";
-export { SPEC_VERSION, MEDIA_TYPE, EFFECT_VALUES } from "./constants";
+export {
+  SPEC_VERSION,
+  MEDIA_TYPE,
+  EFFECT_VALUES,
+  POST_GRID_TAP_KEY,
+} from "./constants";
 export {
   DEFAULT_THEME_ACCENT,
   PALETTE_COLOR,
@@ -27,4 +32,3 @@ export {
   type SnapPayload,
 } from "./schemas";
 export { validateSnapResponse, type ValidationResult } from "./validator";
-export { type Middleware, useMiddleware } from "./middleware";

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 },
+});

package/src/ui/bar-chart.ts

@@ -0,0 +1,38 @@
+import { z } from "zod";
+import { BAR_CHART_COLOR_VALUES, PALETTE_COLOR_VALUES } from "../colors.js";
+import {
+  BAR_CHART_MAX_BARS,
+  BAR_CHART_LABEL_MAX_CHARS,
+} from "../constants.js";
+
+export const barChartProps = z
+  .object({
+    bars: z
+      .array(
+        z.object({
+          label: z.string().min(1).max(BAR_CHART_LABEL_MAX_CHARS),
+          value: z.number().nonnegative(),
+          color: z.enum(PALETTE_COLOR_VALUES).optional(),
+        }),
+      )
+      .min(1)
+      .max(BAR_CHART_MAX_BARS),
+    max: z.number().nonnegative().optional(),
+    color: z.enum(BAR_CHART_COLOR_VALUES).optional(),
+  })
+  .superRefine((val, ctx) => {
+    if (val.max !== undefined) {
+      for (let i = 0; i < val.bars.length; i++) {
+        const bar = val.bars[i]!;
+        if (bar.value > val.max) {
+          ctx.addIssue({
+            code: "custom",
+            message: `bar value (${bar.value}) exceeds chart max (${val.max})`,
+            path: ["bars", i, "value"],
+          });
+        }
+      }
+    }
+  });
+
+export type BarChartProps = z.infer<typeof barChartProps>;

package/src/ui/catalog.ts

@@ -15,6 +15,8 @@ import { separatorProps } from "./separator.js";
 import { sliderProps } from "./slider.js";
 import { stackProps } from "./stack.js";
 import { textProps } from "./text.js";
+import { barChartProps } from "./bar-chart.js";
+import { cellGridProps } from "./cell-grid.js";
 
 const snapClientParams = z.object({
   client_action: z.record(z.string(), z.unknown()),
@@ -97,6 +99,16 @@ export const snapJsonRenderCatalog = defineCatalog(snapJsonRenderSchema, {
       description:
         "Text block — size: md (body, default), sm (caption). Optional weight and align.",
     },
+    bar_chart: {
+      props: barChartProps,
+      description:
+        "Horizontal bar chart — 1–6 bars with label, value, and optional per-bar color. Optional max and default color.",
+    },
+    cell_grid: {
+      props: cellGridProps,
+      description:
+        "Cell grid — sparse colored cells on a rows×cols grid. Optional gap and selection mode (taps write to inputs[name]).",
+    },
   },
   actions: {
     submit: {

package/src/ui/cell-grid.ts

@@ -0,0 +1,48 @@
+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"],
+        });
+      }
+    }
+  });
+
+export type CellGridProps = z.infer<typeof cellGridProps>;

package/src/ui/index.ts

@@ -42,3 +42,9 @@ 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/middleware.d.ts

@@ -1,3 +0,0 @@
-import { SnapFunction } from "./schemas.js";
-export type Middleware = (fn: SnapFunction) => SnapFunction;
-export declare function useMiddleware(fn: SnapFunction, middleware: Middleware[]): SnapFunction;

package/dist/middleware.js

@@ -1,3 +0,0 @@
-export function useMiddleware(fn, middleware) {
-    return middleware.reduce((acc, middleware) => middleware(acc), fn);
-}

package/src/middleware.ts

@@ -1,7 +0,0 @@
-import { SnapFunction } from "./schemas";
-
-export type Middleware = (fn: SnapFunction) => SnapFunction;
-
-export function useMiddleware(fn: SnapFunction, middleware: Middleware[]) {
-  return middleware.reduce((acc, middleware) => middleware(acc), fn);
-}