@farcaster/snap 1.9.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,7 +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 type { Spec as SnapSpec, UIElement as SnapUIElement, } from "@json-render/core";
+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 SnapFunction, type SnapPayload, } from "./schemas.js";
-export { validateSnapResponse, type ValidationResult, } from "./validator.js";
-export { type DataStoreValue, type SnapDataStore, createDefaultDataStore, createInMemoryDataStore, } from "./dataStore.js";
-export { type Middleware, useMiddleware } from "./middleware.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";

package/dist/index.js

@@ -1,6 +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 { createDefaultDataStore, createInMemoryDataStore, } from "./dataStore.js";
-export { useMiddleware } from "./middleware.js";
+export { validateSnapResponse } from "./validator.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/schemas.d.ts

@@ -1,6 +1,16 @@
 import { z } from "zod";
 import type { Spec } from "@json-render/core";
-import { type SnapDataStore } from "./dataStore.js";
+import { SPEC_VERSION } from "./constants.js";
+declare const themeAccentSchema: z.ZodEnum<{
+    gray: "gray";
+    blue: "blue";
+    red: "red";
+    amber: "amber";
+    green: "green";
+    teal: "teal";
+    purple: "purple";
+    pink: "pink";
+}>;
 export declare const snapResponseSchema: z.ZodObject<{
     version: z.ZodLiteral<"1.0">;
     theme: z.ZodDefault<z.ZodOptional<z.ZodObject<{
@@ -21,7 +31,40 @@ export declare const snapResponseSchema: z.ZodObject<{
     ui: z.ZodCustom<Spec, Spec>;
 }, z.core.$strict>;
 export type SnapResponse = z.infer<typeof snapResponseSchema>;
-export type SnapHandlerResult = z.input<typeof snapResponseSchema>;
+/**
+ * Permissive element input type for snap handler authors.
+ * Allows dynamic element construction without requiring exact UIElement types.
+ */
+export type SnapElementInput = {
+    type: string;
+    props?: Record<string, unknown>;
+    children?: string[];
+    on?: Record<string, unknown>;
+    [key: string]: unknown;
+};
+/**
+ * Permissive input type for the `ui` field in snap handler return values.
+ * Accepts dynamically-built element maps (e.g. `Record<string, SnapElementInput>`)
+ * without requiring exact UIElement types.
+ */
+export type SnapSpecInput = {
+    root: string;
+    elements: Record<string, SnapElementInput>;
+    state?: Record<string, unknown>;
+};
+/**
+ * Return type for snap handler functions.
+ * Uses permissive input types so handlers can build elements dynamically
+ * without type casts. Runtime validation via the Zod schema still catches invalid shapes.
+ */
+export type SnapHandlerResult = {
+    version: typeof SPEC_VERSION;
+    theme?: {
+        accent?: z.input<typeof themeAccentSchema>;
+    };
+    effects?: z.input<typeof snapResponseSchema>["effects"];
+    ui: SnapSpecInput;
+};
 export declare const payloadSchema: z.ZodObject<{
     fid: z.ZodNumber;
     inputs: z.ZodDefault<z.ZodRecord<z.ZodString, z.ZodUnion<readonly [z.ZodString, z.ZodNumber, z.ZodBoolean, z.ZodArray<z.ZodString>]>>>;
@@ -56,7 +99,6 @@ export type SnapAction = z.infer<typeof snapActionSchema>;
 export type SnapContext = {
     action: SnapAction;
     request: Request;
-    data: SnapDataStore;
 };
 export type SnapFunction = (ctx: SnapContext) => Promise<SnapHandlerResult>;
 export {};

package/dist/schemas.js

@@ -1,6 +1,6 @@
 import { z } from "zod";
-import { EFFECT_VALUES, SPEC_VERSION, } from "./constants.js";
-import { DEFAULT_THEME_ACCENT, PALETTE_COLOR_VALUES, } from "./colors.js";
+import { EFFECT_VALUES, SPEC_VERSION } from "./constants.js";
+import { DEFAULT_THEME_ACCENT, PALETTE_COLOR_VALUES } from "./colors.js";
 // ─── Theme ─────────────────────────────────────────────
 const themeAccentSchema = z.enum(PALETTE_COLOR_VALUES, {
     message: `accent must be a palette color: ${PALETTE_COLOR_VALUES.join(", ")}`,

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>;