@farcaster/snap 1.9.0 → 1.13.0

package/src/schemas.ts

@@ -1,14 +1,7 @@
 import { z } from "zod";
 import type { Spec } from "@json-render/core";
-import {
-  EFFECT_VALUES,
-  SPEC_VERSION,
-} from "./constants";
-import {
-  DEFAULT_THEME_ACCENT,
-  PALETTE_COLOR_VALUES,
-} from "./colors";
-import { type SnapDataStore } from "./dataStore";
+import { EFFECT_VALUES, SPEC_VERSION } from "./constants";
+import { DEFAULT_THEME_ACCENT, PALETTE_COLOR_VALUES } from "./colors";
 
 // ─── Theme ─────────────────────────────────────────────
 
@@ -43,7 +36,41 @@ export const snapResponseSchema = z
   .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;
+};
 
 // ─── POST payload ──────────────────────────────────────
 
@@ -92,7 +119,6 @@ export type SnapAction = z.infer<typeof snapActionSchema>;
 export type SnapContext = {
   action: SnapAction;
   request: Request;
-  data: SnapDataStore;
 };
 
 export type SnapFunction = (ctx: SnapContext) => Promise<SnapHandlerResult>;

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/dataStore.d.ts

@@ -1,9 +0,0 @@
-export type DataStoreValue = string | number | boolean | null | DataStoreValue[] | {
-    [key: string]: DataStoreValue;
-};
-export type SnapDataStore = {
-    get(key: string): Promise<DataStoreValue | null>;
-    set(key: string, value: DataStoreValue): Promise<void>;
-};
-export declare function createDefaultDataStore(): SnapDataStore;
-export declare function createInMemoryDataStore(): SnapDataStore;

package/dist/dataStore.js

@@ -1,22 +0,0 @@
-export function createDefaultDataStore() {
-    const err = new Error("Data store is not configured. Use withTursoServerless() from @farcaster/snap-turso or provide a data store implementation.");
-    return {
-        get(_key) {
-            return Promise.reject(err);
-        },
-        set(_key, _value) {
-            return Promise.reject(err);
-        },
-    };
-}
-export function createInMemoryDataStore() {
-    const data = new Map();
-    return {
-        async get(key) {
-            return data.get(key) ?? null;
-        },
-        async set(key, value) {
-            data.set(key, value);
-        },
-    };
-}

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/dataStore.ts

@@ -1,38 +0,0 @@
-export type DataStoreValue =
-  | string
-  | number
-  | boolean
-  | null
-  | DataStoreValue[]
-  | { [key: string]: DataStoreValue };
-
-export type SnapDataStore = {
-  get(key: string): Promise<DataStoreValue | null>;
-  set(key: string, value: DataStoreValue): Promise<void>;
-};
-
-export function createDefaultDataStore(): SnapDataStore {
-  const err = new Error(
-    "Data store is not configured. Use withTursoServerless() from @farcaster/snap-turso or provide a data store implementation.",
-  );
-  return {
-    get(_key: string): Promise<never> {
-      return Promise.reject(err);
-    },
-    set(_key: string, _value: DataStoreValue): Promise<never> {
-      return Promise.reject(err);
-    },
-  };
-}
-
-export function createInMemoryDataStore(): SnapDataStore {
-  const data = new Map<string, DataStoreValue>();
-  return {
-    async get(key: string): Promise<DataStoreValue | null> {
-      return data.get(key) ?? null;
-    },
-    async set(key: string, value: DataStoreValue): Promise<void> {
-      data.set(key, value);
-    },
-  };
-}

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