@farcaster/snap 1.10.0 → 1.13.0

package/dist/constants.d.ts

@@ -1,3 +1,11 @@
 export declare const SPEC_VERSION: "1.0";
 export declare const MEDIA_TYPE: "application/vnd.farcaster.snap+json";
 export declare const EFFECT_VALUES: readonly ["confetti"];
+export declare const POST_GRID_TAP_KEY: "grid_tap";
+export declare const GRID_MIN_COLS = 2;
+export declare const GRID_MAX_COLS = 32;
+export declare const GRID_MIN_ROWS = 2;
+export declare const GRID_MAX_ROWS = 16;
+export declare const GRID_GAP_VALUES: readonly ["none", "sm", "md", "lg"];
+export declare const BAR_CHART_MAX_BARS = 6;
+export declare const BAR_CHART_LABEL_MAX_CHARS = 40;

package/dist/constants.js

@@ -1,3 +1,13 @@
 export const SPEC_VERSION = "1.0";
 export const MEDIA_TYPE = "application/vnd.farcaster.snap+json";
 export const EFFECT_VALUES = ["confetti"];
+// ─── Pixel grid ────────────────────────────────────────
+export const POST_GRID_TAP_KEY = "grid_tap";
+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"];
+// ─── Bar chart ─────────────────────────────────────────
+export const BAR_CHART_MAX_BARS = 6;
+export const BAR_CHART_LABEL_MAX_CHARS = 40;

package/dist/index.d.ts

@@ -1,6 +1,5 @@
 export type { Spec as SnapSpec, UIElement as SnapUIElement, } from "@json-render/core";
-export { SPEC_VERSION, MEDIA_TYPE, EFFECT_VALUES } from "./constants.js";
+export { SPEC_VERSION, MEDIA_TYPE, EFFECT_VALUES, POST_GRID_TAP_KEY, } from "./constants.js";
 export { DEFAULT_THEME_ACCENT, PALETTE_COLOR, PALETTE_COLOR_ACCENT, PALETTE_COLOR_VALUES, PALETTE_LIGHT_HEX, PALETTE_DARK_HEX, type PaletteColor, } from "./colors.js";
 export { ACTION_TYPE_GET, ACTION_TYPE_POST, snapResponseSchema, payloadSchema, type SnapAction, type SnapContext, type SnapResponse, type SnapHandlerResult, type SnapElementInput, type SnapSpecInput, type SnapFunction, type SnapPayload, } from "./schemas.js";
 export { validateSnapResponse, type ValidationResult } from "./validator.js";
-export { type Middleware, useMiddleware } from "./middleware.js";

package/dist/index.js

@@ -1,5 +1,4 @@
-export { SPEC_VERSION, MEDIA_TYPE, EFFECT_VALUES } from "./constants.js";
+export { SPEC_VERSION, MEDIA_TYPE, EFFECT_VALUES, POST_GRID_TAP_KEY, } from "./constants.js";
 export { DEFAULT_THEME_ACCENT, PALETTE_COLOR, PALETTE_COLOR_ACCENT, PALETTE_COLOR_VALUES, PALETTE_LIGHT_HEX, PALETTE_DARK_HEX, } from "./colors.js";
 export { ACTION_TYPE_GET, ACTION_TYPE_POST, snapResponseSchema, payloadSchema, } from "./schemas.js";
 export { validateSnapResponse } from "./validator.js";
-export { useMiddleware } from "./middleware.js";

package/dist/react/catalog-renderer.js

@@ -15,6 +15,8 @@ import { SnapStack } from "./components/stack.js";
 import { SnapSwitch } from "./components/switch.js";
 import { SnapText } from "./components/text.js";
 import { SnapToggleGroup } from "./components/toggle-group.js";
+import { SnapBarChart } from "./components/bar-chart.js";
+import { SnapCellGrid } from "./components/cell-grid.js";
 /**
  * Maps snap json-render catalog types to React components.
  * Keys match the snap wire-format `type` strings exactly.
@@ -34,4 +36,6 @@ export const SnapCatalogView = createRenderer(snapJsonRenderCatalog, {
     switch: SnapSwitch,
     text: SnapText,
     toggle_group: SnapToggleGroup,
+    bar_chart: SnapBarChart,
+    cell_grid: SnapCellGrid,
 });

package/dist/react/components/bar-chart.d.ts

@@ -0,0 +1,5 @@
+export declare function SnapBarChart({ element: { props }, }: {
+    element: {
+        props: Record<string, unknown>;
+    };
+}): import("react/jsx-runtime").JSX.Element;

package/dist/react/components/bar-chart.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PALETTE_LIGHT_HEX } from "@farcaster/snap";
+import { useSnapAccentScopeStyle } from "../hooks/use-snap-accent.js";
+export function SnapBarChart({ element: { props }, }) {
+    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) => Number(b.value ?? 0)), 1);
+    function barColor(bar) {
+        if (bar.color && bar.color in PALETTE_LIGHT_HEX) {
+            return `var(--snap-color-${bar.color}, ${PALETTE_LIGHT_HEX[bar.color]})`;
+        }
+        if (chartColor !== "accent" && chartColor in PALETTE_LIGHT_HEX) {
+            return `var(--snap-color-${chartColor}, ${PALETTE_LIGHT_HEX[chartColor]})`;
+        }
+        return "var(--primary)";
+    }
+    return (_jsx("div", { className: "flex w-full flex-col gap-2", style: accentStyle, children: bars.map((bar, i) => {
+            const value = Number(bar.value ?? 0);
+            const pct = maxVal > 0 ? Math.min(100, (value / maxVal) * 100) : 0;
+            const fill = barColor(bar);
+            return (_jsxs("div", { className: "flex w-full items-center gap-2", children: [_jsx("span", { className: "text-muted-foreground w-20 shrink-0 truncate text-right text-xs", children: String(bar.label ?? "") }), _jsx("div", { className: "bg-muted h-2.5 flex-1 overflow-hidden rounded-full", children: _jsx("div", { className: "h-full rounded-full transition-all", style: {
+                                width: `${pct}%`,
+                                minWidth: pct > 0 ? 4 : 0,
+                                background: fill,
+                            } }) }), _jsx("span", { className: "text-muted-foreground w-8 shrink-0 text-xs tabular-nums", children: value })] }, i));
+        }) }));
+}

package/dist/react/components/cell-grid.d.ts

@@ -0,0 +1,5 @@
+export declare function SnapCellGrid({ element: { props }, }: {
+    element: {
+        props: Record<string, unknown>;
+    };
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,86 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useStateStore } from "@json-render/react";
+import { cn } from "@neynar/ui/utils";
+import { POST_GRID_TAP_KEY, PALETTE_LIGHT_HEX } from "@farcaster/snap";
+import { useSnapAccentScopeStyle } from "../hooks/use-snap-accent.js";
+import { useColorMode } from "@neynar/ui/color-mode";
+export function SnapCellGrid({ element: { props }, }) {
+    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 = { 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();
+    if (typeof tapRaw === "string" && tapRaw.length > 0) {
+        for (const part of tapRaw.split("|")) {
+            if (part.includes(","))
+                selectedSet.add(part);
+        }
+    }
+    const isSelected = (r, c) => selectedSet.has(`${r},${c}`);
+    const handleTap = (r, c) => {
+        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();
+    for (const c of cells) {
+        cellMap.set(`${Number(c.row)},${Number(c.col)}`, {
+            color: c.color,
+            content: c.content != null ? String(c.content) : undefined,
+        });
+    }
+    const ringColor = appearance === "dark" ? "#fff" : "#000";
+    const cellEls = [];
+    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]})`
+                : "transparent";
+            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 === " ") {
+                            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,
+                }, children: cell?.content ?? "" }, `${r}-${c}`));
+        }
+    }
+    const selectionLabel = interactive && selectedSet.size > 0
+        ? `inputs.${name}: ${[...selectedSet].join(isMultiple ? " | " : "")}`
+        : null;
+    return (_jsxs("div", { style: accentStyle, children: [_jsx("div", { className: "grid w-full", style: {
+                    gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
+                    gap: gapPx,
+                }, children: cellEls }), selectionLabel && (_jsx("div", { className: "text-muted-foreground mt-1.5 truncate text-xs font-mono", children: selectionLabel }))] }));
+}

package/dist/react-native/catalog-renderer.js

@@ -14,6 +14,8 @@ import { SnapStack } from "./components/snap-stack.js";
 import { SnapSwitch } from "./components/snap-switch.js";
 import { SnapText } from "./components/snap-text.js";
 import { SnapToggleGroup } from "./components/snap-toggle-group.js";
+import { SnapBarChart } from "./components/snap-bar-chart.js";
+import { SnapCellGrid } from "./components/snap-cell-grid.js";
 /**
  * Maps snap json-render catalog types to React Native primitives.
  * Keys match the snap wire-format `type` strings exactly (snake_case).
@@ -33,4 +35,6 @@ export const SnapCatalogView = createRenderer(snapJsonRenderCatalog, {
     switch: SnapSwitch,
     text: SnapText,
     toggle_group: SnapToggleGroup,
+    bar_chart: SnapBarChart,
+    cell_grid: SnapCellGrid,
 });

package/dist/react-native/components/snap-bar-chart.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentRenderProps } from "@json-render/react-native";
+export declare function SnapBarChart({ element: { props }, }: ComponentRenderProps<Record<string, unknown>>): import("react").JSX.Element;

package/dist/react-native/components/snap-bar-chart.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StyleSheet, Text, View } from "react-native";
+import { useSnapPalette } from "../use-snap-palette.js";
+import { useSnapTheme } from "../theme.js";
+export function SnapBarChart({ element: { props }, }) {
+    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) => Number(b.value ?? 0)), 1);
+    function barFill(bar) {
+        if (bar.color)
+            return hex(bar.color);
+        if (chartColor !== "accent")
+            return hex(chartColor);
+        return accentHex;
+    }
+    return (_jsx(View, { style: styles.wrap, children: bars.map((bar, i) => {
+            const value = Number(bar.value ?? 0);
+            const pct = maxVal > 0 ? Math.min(100, (value / maxVal) * 100) : 0;
+            return (_jsxs(View, { style: styles.row, children: [_jsx(Text, { style: [styles.label, { color: colors.textSecondary }], numberOfLines: 1, children: String(bar.label ?? "") }), _jsx(View, { style: [styles.track, { backgroundColor: colors.muted }], children: _jsx(View, { style: [
+                                styles.fill,
+                                {
+                                    width: `${pct}%`,
+                                    backgroundColor: barFill(bar),
+                                },
+                            ] }) }), _jsx(Text, { style: [styles.value, { color: colors.textSecondary }], children: value })] }, i));
+        }) }));
+}
+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/dist/react-native/components/snap-cell-grid.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentRenderProps } from "@json-render/react-native";
+export declare function SnapCellGrid({ element: { props }, }: ComponentRenderProps<Record<string, unknown>>): import("react").JSX.Element;

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

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StyleSheet, Text, View, Pressable } from "react-native";
+import { useStateStore } from "@json-render/react-native";
+import { useSnapPalette } from "../use-snap-palette.js";
+import { useSnapTheme } from "../theme.js";
+import { POST_GRID_TAP_KEY } from "@farcaster/snap";
+export function SnapCellGrid({ element: { props }, }) {
+    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 = { 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();
+    if (typeof tapRaw === "string" && tapRaw.length > 0) {
+        for (const part of tapRaw.split("|")) {
+            if (part.includes(","))
+                selectedSet.add(part);
+        }
+    }
+    const isSelected = (r, c) => selectedSet.has(`${r},${c}`);
+    const handleTap = (r, c) => {
+        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();
+    for (const c of cells) {
+        cellMap.set(`${Number(c.row)},${Number(c.col)}`, {
+            color: c.color,
+            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 ? (_jsx(Text, { style: [styles.cellText, { color: colors.textPrimary }], children: cell.content })) : null;
+            // Two-tone ring: outer View with contrasting border, inner View with inverse border
+            const cellView = selected ? (_jsx(View, { style: [styles.cell, { borderWidth: 1, borderColor: ringOuter, borderRadius: 4 }], children: _jsx(View, { style: [
+                        styles.innerCell,
+                        { backgroundColor: bg, borderWidth: 1, borderColor: ringInner, borderRadius: 3 },
+                    ], children: cellContent }) })) : (_jsx(View, { style: [styles.cell, { backgroundColor: bg }], children: cellContent }));
+            rowCells.push(interactive ? (_jsx(Pressable, { onPress: () => handleTap(r, c), style: styles.cellWrap, children: cellView }, `${r}-${c}`)) : (_jsx(View, { style: styles.cellWrap, children: cellView }, `${r}-${c}`)));
+        }
+        rowEls.push(_jsx(View, { style: [styles.gridRow, { gap: gapPx }], children: rowCells }, r));
+    }
+    const selectionLabel = interactive && selectedSet.size > 0
+        ? `inputs.${name}: ${[...selectedSet].join(isMultiple ? " | " : "")}`
+        : null;
+    return (_jsxs(View, { style: [styles.wrap, { gap: gapPx }], children: [rowEls, selectionLabel ? (_jsx(Text, { style: [styles.selectionText, { color: colors.textSecondary }], children: selectionLabel })) : null] }));
+}
+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/dist/ui/bar-chart.d.ts

@@ -0,0 +1,30 @@
+import { z } from "zod";
+export declare const barChartProps: z.ZodObject<{
+    bars: z.ZodArray<z.ZodObject<{
+        label: z.ZodString;
+        value: z.ZodNumber;
+        color: z.ZodOptional<z.ZodEnum<{
+            gray: "gray";
+            blue: "blue";
+            red: "red";
+            amber: "amber";
+            green: "green";
+            teal: "teal";
+            purple: "purple";
+            pink: "pink";
+        }>>;
+    }, z.core.$strip>>;
+    max: z.ZodOptional<z.ZodNumber>;
+    color: z.ZodOptional<z.ZodEnum<{
+        gray: "gray";
+        blue: "blue";
+        red: "red";
+        amber: "amber";
+        green: "green";
+        teal: "teal";
+        purple: "purple";
+        pink: "pink";
+        accent: "accent";
+    }>>;
+}, z.core.$strip>;
+export type BarChartProps = z.infer<typeof barChartProps>;

package/dist/ui/bar-chart.js

@@ -0,0 +1,30 @@
+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"],
+                });
+            }
+        }
+    }
+});

package/dist/ui/catalog.d.ts

@@ -335,6 +335,71 @@ export declare const snapJsonRenderCatalog: import("@json-render/core").Catalog<
             }, z.core.$strip>;
             description: string;
         };
+        bar_chart: {
+            props: z.ZodObject<{
+                bars: z.ZodArray<z.ZodObject<{
+                    label: z.ZodString;
+                    value: z.ZodNumber;
+                    color: z.ZodOptional<z.ZodEnum<{
+                        gray: "gray";
+                        blue: "blue";
+                        red: "red";
+                        amber: "amber";
+                        green: "green";
+                        teal: "teal";
+                        purple: "purple";
+                        pink: "pink";
+                    }>>;
+                }, z.core.$strip>>;
+                max: z.ZodOptional<z.ZodNumber>;
+                color: z.ZodOptional<z.ZodEnum<{
+                    gray: "gray";
+                    blue: "blue";
+                    red: "red";
+                    amber: "amber";
+                    green: "green";
+                    teal: "teal";
+                    purple: "purple";
+                    pink: "pink";
+                    accent: "accent";
+                }>>;
+            }, z.core.$strip>;
+            description: string;
+        };
+        cell_grid: {
+            props: z.ZodObject<{
+                name: z.ZodOptional<z.ZodString>;
+                cols: z.ZodNumber;
+                rows: z.ZodNumber;
+                cells: z.ZodArray<z.ZodObject<{
+                    row: z.ZodNumber;
+                    col: z.ZodNumber;
+                    color: z.ZodOptional<z.ZodEnum<{
+                        gray: "gray";
+                        blue: "blue";
+                        red: "red";
+                        amber: "amber";
+                        green: "green";
+                        teal: "teal";
+                        purple: "purple";
+                        pink: "pink";
+                    }>>;
+                    content: z.ZodOptional<z.ZodString>;
+                }, z.core.$strip>>;
+                gap: z.ZodOptional<z.ZodEnum<{
+                    sm: "sm";
+                    md: "md";
+                    none: "none";
+                    lg: "lg";
+                }>>;
+                select: z.ZodOptional<z.ZodEnum<{
+                    multiple: "multiple";
+                    off: "off";
+                    single: "single";
+                }>>;
+            }, z.core.$strip>;
+            description: string;
+        };
     };
     actions: {
         submit: {

package/dist/ui/catalog.js

@@ -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()),
 });
@@ -82,6 +84,14 @@ export const snapJsonRenderCatalog = defineCatalog(snapJsonRenderSchema, {
             props: textProps,
             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/dist/ui/cell-grid.d.ts

@@ -0,0 +1,33 @@
+import { z } from "zod";
+export declare const cellGridProps: z.ZodObject<{
+    name: z.ZodOptional<z.ZodString>;
+    cols: z.ZodNumber;
+    rows: z.ZodNumber;
+    cells: z.ZodArray<z.ZodObject<{
+        row: z.ZodNumber;
+        col: z.ZodNumber;
+        color: z.ZodOptional<z.ZodEnum<{
+            gray: "gray";
+            blue: "blue";
+            red: "red";
+            amber: "amber";
+            green: "green";
+            teal: "teal";
+            purple: "purple";
+            pink: "pink";
+        }>>;
+        content: z.ZodOptional<z.ZodString>;
+    }, z.core.$strip>>;
+    gap: z.ZodOptional<z.ZodEnum<{
+        sm: "sm";
+        md: "md";
+        none: "none";
+        lg: "lg";
+    }>>;
+    select: z.ZodOptional<z.ZodEnum<{
+        multiple: "multiple";
+        off: "off";
+        single: "single";
+    }>>;
+}, z.core.$strip>;
+export type CellGridProps = z.infer<typeof cellGridProps>;

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.

package/package.json

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