@farcaster/snap 1.10.0 → 1.14.0

package/dist/react/hooks/use-snap-colors.js

@@ -0,0 +1,82 @@
+"use client";
+import { useMemo } from "react";
+import { useStateStore } from "@json-render/react";
+import { useColorMode } from "@neynar/ui/color-mode";
+import { resolveSnapPaletteHex } from "../lib/resolve-palette-hex.js";
+import { useSnapPreviewPageAccent } from "../accent-context.js";
+import { PALETTE_DARK_HEX, PALETTE_LIGHT_HEX } from "@farcaster/snap";
+/** Readable foreground color (black or white) for a given hex background. */
+export function pickForegroundForBg(hex) {
+    const h = hex.replace(/^#/, "");
+    if (h.length !== 6)
+        return "#ffffff";
+    const r = Number.parseInt(h.slice(0, 2), 16);
+    const g = Number.parseInt(h.slice(2, 4), 16);
+    const b = Number.parseInt(h.slice(4, 6), 16);
+    const yiq = (r * 299 + g * 587 + b * 114) / 1000;
+    return yiq >= 180 ? "#0a0a0a" : "#ffffff";
+}
+const NEUTRAL_LIGHT = {
+    text: "#111111",
+    textMuted: "#6B7280",
+    border: "#E5E7EB",
+    muted: "rgba(0,0,0,0.06)",
+    surface: "#ffffff",
+    inputBorder: "#E5E7EB",
+    inputBg: "rgba(0,0,0,0.06)",
+};
+const NEUTRAL_DARK = {
+    text: "#FAFAFA",
+    textMuted: "#A1A1AA",
+    border: "#2D2D44",
+    muted: "rgba(255,255,255,0.03)",
+    surface: "#23262f",
+    inputBorder: "#3F3F46",
+    inputBg: "rgba(255,255,255,0.03)",
+};
+function buildSnapColors(accentName, mode) {
+    const accent = resolveSnapPaletteHex(accentName, mode);
+    const accentFg = pickForegroundForBg(accent);
+    const neutrals = mode === "dark" ? NEUTRAL_DARK : NEUTRAL_LIGHT;
+    const paletteMap = mode === "dark" ? PALETTE_DARK_HEX : PALETTE_LIGHT_HEX;
+    const accentHover = mode === "light"
+        ? `color-mix(in srgb, ${accent} 82%, #000000)`
+        : `color-mix(in srgb, ${accent} 78%, #ffffff)`;
+    const outlineHover = `color-mix(in srgb, ${accent} 14%, ${neutrals.surface})`;
+    const paletteHex = (name) => resolveSnapPaletteHex(name, mode);
+    const colorHex = (name) => {
+        if (!name || name === "accent")
+            return accent;
+        if (Object.hasOwn(paletteMap, name))
+            return paletteMap[name];
+        return accent;
+    };
+    return {
+        accent,
+        accentFg,
+        accentHover,
+        outlineHover,
+        ...neutrals,
+        mode,
+        paletteHex,
+        colorHex,
+    };
+}
+/**
+ * Returns fully resolved color values for snap components.
+ * All colors are concrete hex values (or color-mix expressions for hover states)
+ * so they can be used as inline styles, independent of host app CSS.
+ */
+export function useSnapColors() {
+    const { get } = useStateStore();
+    const { mode } = useColorMode();
+    const pageAccent = useSnapPreviewPageAccent();
+    const fromState = get("/theme/accent");
+    const accentRaw = (typeof pageAccent === "string" && pageAccent.length > 0
+        ? pageAccent
+        : fromState) ?? undefined;
+    const accentName = typeof accentRaw === "string" && accentRaw.length > 0
+        ? accentRaw
+        : "purple";
+    return useMemo(() => buildSnapColors(accentName, mode), [accentName, mode]);
+}

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-action-button.js

@@ -3,30 +3,21 @@ import { Pressable, StyleSheet, Text, View } from "react-native";
 import { useSnapPalette } from "../use-snap-palette.js";
 import { useSnapTheme } from "../theme.js";
 import { ICON_MAP } from "./snap-icon.js";
-const VARIANT_MAP = {
-    primary: "primary",
-    secondary: "secondary",
-};
 export function SnapActionButton({ element: { props }, emit, }) {
     const { accentHex } = useSnapPalette();
     const { colors } = useSnapTheme();
     const label = String(props.label ?? "Action");
-    const variant = VARIANT_MAP[String(props.variant ?? "secondary")] ?? "secondary";
+    const variant = String(props.variant ?? "secondary");
+    const isPrimary = variant === "primary";
     const iconName = props.icon ? String(props.icon) : undefined;
-    const variantStyle = (() => {
-        switch (variant) {
-            case "primary":
-                return { backgroundColor: accentHex };
-            case "secondary":
-                return { backgroundColor: "transparent", borderWidth: 1.5, borderColor: accentHex };
-        }
-    })();
-    const textColor = variant === "primary" ? "#fff" : accentHex;
-    const iconColor = variant === "primary" ? "#fff" : accentHex;
+    const textColor = isPrimary ? "#fff" : colors.text;
+    const iconColor = isPrimary ? "#fff" : colors.text;
     return (_jsx(View, { style: styles.outer, children: _jsxs(Pressable, { style: ({ pressed }) => [
                 styles.btn,
-                variant === "primary" ? styles.btnDefault : styles.btnOther,
-                variantStyle,
+                isPrimary ? styles.btnDefault : styles.btnOther,
+                isPrimary
+                    ? { backgroundColor: pressed ? accentHex + "DD" : accentHex }
+                    : { backgroundColor: pressed ? colors.mutedHover : colors.muted },
                 pressed && styles.pressed,
             ], onPress: () => {
                 void (async () => {
@@ -35,7 +26,6 @@ export function SnapActionButton({ element: { props }, emit, }) {
                     }
                     catch (err) {
                         if (typeof __DEV__ !== "undefined" && __DEV__) {
-                            // eslint-disable-next-line no-console
                             console.error("[snap] action failed", err);
                         }
                     }

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, backgroundColor: colors.muted, padding: 4, borderRadius: 8 }], 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/react-native/components/snap-switch.js

@@ -13,7 +13,7 @@ export function SnapSwitch({ element: { props }, }) {
     const fallback = Boolean(props.defaultChecked ?? false);
     const raw = get(path);
     const checked = raw === undefined || raw === null ? fallback : Boolean(raw);
-    return (_jsxs(View, { style: styles.row, children: [label ? _jsx(Text, { style: [styles.label, { color: colors.text }], children: label }) : null, _jsx(Switch, { value: checked, onValueChange: (v) => set(path, v), trackColor: { false: colors.border, true: accentHex }, thumbColor: "#fff" })] }));
+    return (_jsxs(View, { style: styles.row, children: [label ? _jsx(Text, { style: [styles.label, { color: colors.text }], children: label }) : null, _jsx(Switch, { value: checked, onValueChange: (v) => set(path, v), trackColor: { false: colors.muted, true: accentHex }, thumbColor: "#fff" })] }));
 }
 const styles = StyleSheet.create({
     row: {

package/dist/react-native/components/snap-toggle-group.js

@@ -1,11 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useStateStore } from "@json-render/react-native";
 import { Pressable, StyleSheet, Text, View } from "react-native";
-import { useSnapPalette } from "../use-snap-palette.js";
 import { useSnapTheme } from "../theme.js";
 export function SnapToggleGroup({ element: { props }, }) {
     const { get, set } = useStateStore();
-    const { accentHex } = useSnapPalette();
     const { colors } = useSnapTheme();
     const name = String(props.name ?? "toggle_group");
     const path = `/inputs/${name}`;
@@ -49,19 +47,23 @@ export function SnapToggleGroup({ element: { props }, }) {
     };
     return (_jsxs(View, { style: styles.wrap, children: [label ? _jsx(Text, { style: [styles.label, { color: colors.text }], children: label }) : null, _jsx(View, { style: [
                     styles.group,
-                    { backgroundColor: colors.border + "33" },
+                    { backgroundColor: colors.muted },
                     isVertical ? styles.groupVertical : styles.groupHorizontal,
                 ], children: options.map((opt, index) => {
                     const isSelected = selected.includes(opt);
                     return (_jsx(Pressable, { style: ({ pressed }) => [
                             styles.option,
-                            isSelected && { backgroundColor: accentHex },
-                            pressed && styles.pressed,
+                            {
+                                backgroundColor: isSelected
+                                    ? colors.mutedSelected
+                                    : pressed
+                                        ? colors.mutedHover
+                                        : colors.mutedSubtle,
+                            },
                             !isVertical && styles.optionHorizontal,
                         ], onPress: () => handlePress(opt), children: _jsx(Text, { style: [
                                 styles.optionText,
                                 { color: colors.text },
-                                isSelected && styles.optionTextSelected,
                             ], children: opt }) }, index));
                 }) })] }));
 }
@@ -89,12 +91,8 @@ const styles = StyleSheet.create({
     optionHorizontal: {
         flex: 1,
     },
-    pressed: { opacity: 0.88 },
     optionText: {
         fontSize: 13,
         fontWeight: "500",
     },
-    optionTextSelected: {
-        color: "#fff",
-    },
 });

package/dist/react-native/theme.d.ts

@@ -7,6 +7,12 @@ export type SnapNativeColors = {
     border: string;
     inputBg: string;
     muted: string;
+    /** Subtle tint for toggle button resting state */
+    mutedSubtle: string;
+    /** Slightly stronger tint for hover/press state */
+    mutedHover: string;
+    /** Stronger tint for selected state (toggle group) */
+    mutedSelected: string;
 };
 interface SnapThemeValue {
     mode: "light" | "dark";

package/dist/react-native/theme.js

@@ -5,18 +5,24 @@ const DEFAULT_LIGHT = {
     surface: "#ffffff",
     text: "#111111",
     textSecondary: "#6b7280",
-    border: "#d1d5db",
-    inputBg: "#ffffff",
-    muted: "#f9fafb",
+    border: "#E5E7EB",
+    inputBg: "rgba(0,0,0,0.12)",
+    muted: "rgba(0,0,0,0.12)",
+    mutedSubtle: "rgba(0,0,0,0.06)",
+    mutedHover: "rgba(0,0,0,0.10)",
+    mutedSelected: "rgba(0,0,0,0.18)",
 };
 const DEFAULT_DARK = {
     bg: "#111318",
     surface: "#1a1d24",
     text: "#fafafa",
     textSecondary: "#a1a1aa",
-    border: "#374151",
-    inputBg: "#1a1d24",
-    muted: "#27272a",
+    border: "#2D2D44",
+    inputBg: "rgba(255,255,255,0.03)",
+    muted: "rgba(255,255,255,0.03)",
+    mutedSubtle: "rgba(255,255,255,0.02)",
+    mutedHover: "rgba(255,255,255,0.04)",
+    mutedSelected: "rgba(255,255,255,0.10)",
 };
 const SnapThemeContext = createContext({
     mode: "dark",

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