@farcaster/snap 2.0.0 → 2.0.1

package/dist/ui/catalog.d.ts

@@ -10,11 +10,15 @@ export declare const snapJsonRenderCatalog: import("@json-render/core").Catalog<
         root: import("@json-render/core").SchemaType<"string", unknown>;
         elements: import("@json-render/core").SchemaType<"record", import("@json-render/core").SchemaType<"object", {
             type: import("@json-render/core").SchemaType<"ref", string>;
-            props: import("@json-render/core").SchemaType<"propsOf", string>;
+            props: {
+                optional: true;
+                kind: "propsOf";
+                inner?: string;
+            };
             children: {
                 optional: true;
                 kind: "array";
-                inner?: import("@json-render/core").SchemaType<"string", unknown> | undefined;
+                inner?: import("@json-render/core").SchemaType<"string", unknown>;
             };
         }>>;
     }>;
@@ -37,6 +41,10 @@ export declare const snapJsonRenderCatalog: import("@json-render/core").Catalog<
         badge: {
             props: z.ZodObject<{
                 label: z.ZodString;
+                variant: z.ZodOptional<z.ZodEnum<{
+                    default: "default";
+                    outline: "outline";
+                }>>;
                 color: z.ZodOptional<z.ZodEnum<{
                     gray: "gray";
                     blue: "blue";
@@ -49,18 +57,18 @@ export declare const snapJsonRenderCatalog: import("@json-render/core").Catalog<
                     accent: "accent";
                 }>>;
                 icon: z.ZodOptional<z.ZodEnum<{
-                    check: "check";
-                    repeat: "repeat";
                     "arrow-right": "arrow-right";
                     "arrow-left": "arrow-left";
                     "external-link": "external-link";
                     "chevron-right": "chevron-right";
+                    check: "check";
                     x: "x";
                     "alert-triangle": "alert-triangle";
                     info: "info";
                     clock: "clock";
                     heart: "heart";
                     "message-circle": "message-circle";
+                    repeat: "repeat";
                     share: "share";
                     user: "user";
                     users: "users";
@@ -90,24 +98,22 @@ export declare const snapJsonRenderCatalog: import("@json-render/core").Catalog<
             props: z.ZodObject<{
                 label: z.ZodString;
                 variant: z.ZodOptional<z.ZodEnum<{
-                    default: "default";
                     secondary: "secondary";
-                    outline: "outline";
-                    ghost: "ghost";
+                    primary: "primary";
                 }>>;
                 icon: z.ZodOptional<z.ZodEnum<{
-                    check: "check";
-                    repeat: "repeat";
                     "arrow-right": "arrow-right";
                     "arrow-left": "arrow-left";
                     "external-link": "external-link";
                     "chevron-right": "chevron-right";
+                    check: "check";
                     x: "x";
                     "alert-triangle": "alert-triangle";
                     info: "info";
                     clock: "clock";
                     heart: "heart";
                     "message-circle": "message-circle";
+                    repeat: "repeat";
                     share: "share";
                     user: "user";
                     users: "users";
@@ -179,8 +185,6 @@ export declare const snapJsonRenderCatalog: import("@json-render/core").Catalog<
                 description: z.ZodOptional<z.ZodString>;
                 variant: z.ZodOptional<z.ZodEnum<{
                     default: "default";
-                    outline: "outline";
-                    muted: "muted";
                 }>>;
             }, z.core.$strip>;
             description: string;
@@ -201,18 +205,18 @@ export declare const snapJsonRenderCatalog: import("@json-render/core").Catalog<
         icon: {
             props: z.ZodObject<{
                 name: z.ZodEnum<{
-                    check: "check";
-                    repeat: "repeat";
                     "arrow-right": "arrow-right";
                     "arrow-left": "arrow-left";
                     "external-link": "external-link";
                     "chevron-right": "chevron-right";
+                    check: "check";
                     x: "x";
                     "alert-triangle": "alert-triangle";
                     info: "info";
                     clock: "clock";
                     heart: "heart";
                     "message-circle": "message-circle";
+                    repeat: "repeat";
                     share: "share";
                     user: "user";
                     users: "users";
@@ -260,7 +264,6 @@ export declare const snapJsonRenderCatalog: import("@json-render/core").Catalog<
                     "1:1": "1:1";
                     "16:9": "16:9";
                     "4:3": "4:3";
-                    "3:4": "3:4";
                     "9:16": "9:16";
                 }>;
                 alt: z.ZodOptional<z.ZodString>;
@@ -292,6 +295,7 @@ export declare const snapJsonRenderCatalog: import("@json-render/core").Catalog<
                 step: z.ZodOptional<z.ZodNumber>;
                 defaultValue: z.ZodOptional<z.ZodNumber>;
                 label: z.ZodOptional<z.ZodString>;
+                showValue: z.ZodOptional<z.ZodBoolean>;
             }, z.core.$strip>;
             description: string;
         };
@@ -323,11 +327,9 @@ export declare const snapJsonRenderCatalog: import("@json-render/core").Catalog<
                 size: z.ZodOptional<z.ZodEnum<{
                     sm: "sm";
                     md: "md";
-                    lg: "lg";
                 }>>;
                 weight: z.ZodOptional<z.ZodEnum<{
                     bold: "bold";
-                    medium: "medium";
                     normal: "normal";
                 }>>;
                 align: z.ZodOptional<z.ZodEnum<{
@@ -338,6 +340,72 @@ 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";
+                }>>;
+                rowHeight: z.ZodOptional<z.ZodNumber>;
+                select: z.ZodOptional<z.ZodEnum<{
+                    multiple: "multiple";
+                    off: "off";
+                    single: "single";
+                }>>;
+            }, z.core.$strip>;
+            description: string;
+        };
     };
     actions: {
         submit: {
@@ -352,6 +420,12 @@ export declare const snapJsonRenderCatalog: import("@json-render/core").Catalog<
                 target: z.ZodString;
             }, z.core.$strip>;
         };
+        open_snap: {
+            description: string;
+            params: z.ZodObject<{
+                target: z.ZodString;
+            }, z.core.$strip>;
+        };
         open_mini_app: {
             description: string;
             params: z.ZodObject<{

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()),
 });
@@ -28,7 +30,7 @@ export const snapJsonRenderCatalog = defineCatalog(snapJsonRenderSchema, {
     components: {
         badge: {
             props: badgeProps,
-            description: "Inline label — variant: default | secondary | destructive | outline.",
+            description: "Inline label — variant: default (filled) or outline (bordered). Optional color and icon.",
         },
         button: {
             props: buttonProps,
@@ -80,7 +82,15 @@ export const snapJsonRenderCatalog = defineCatalog(snapJsonRenderSchema, {
         },
         text: {
             props: textProps,
-            description: "Text block — size: lg (heading), md (body, default), sm (caption). Optional weight and align.",
+            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: {
@@ -89,7 +99,11 @@ export const snapJsonRenderCatalog = defineCatalog(snapJsonRenderSchema, {
             params: z.object({ target: z.string() }),
         },
         open_url: {
-            description: "Open target URL in the system browser.",
+            description: "Open external URL in browser.",
+            params: z.object({ target: z.string() }),
+        },
+        open_snap: {
+            description: "Open a snap URL inline. The client renders the target as a snap rather than opening a browser.",
             params: z.object({ target: z.string() }),
         },
         open_mini_app: {

package/dist/ui/cell-grid.d.ts

@@ -0,0 +1,34 @@
+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";
+    }>>;
+    rowHeight: z.ZodOptional<z.ZodNumber>;
+    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,39 @@
+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(),
+    rowHeight: z.number().int().min(8).max(64).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/icon.d.ts

@@ -3,18 +3,18 @@ export declare const ICON_NAMES: readonly ["arrow-right", "arrow-left", "externa
 export declare const ICON_SIZES: readonly ["sm", "md"];
 export declare const iconProps: z.ZodObject<{
     name: z.ZodEnum<{
-        check: "check";
-        repeat: "repeat";
         "arrow-right": "arrow-right";
         "arrow-left": "arrow-left";
         "external-link": "external-link";
         "chevron-right": "chevron-right";
+        check: "check";
         x: "x";
         "alert-triangle": "alert-triangle";
         info: "info";
         clock: "clock";
         heart: "heart";
         "message-circle": "message-circle";
+        repeat: "repeat";
         share: "share";
         user: "user";
         users: "users";

package/dist/ui/image.d.ts

@@ -1,12 +1,11 @@
 import { z } from "zod";
-export declare const IMAGE_ASPECTS: readonly ["1:1", "16:9", "4:3", "3:4", "9:16"];
+export declare const IMAGE_ASPECTS: readonly ["1:1", "16:9", "4:3", "9:16"];
 export declare const imageProps: z.ZodObject<{
     url: z.ZodString;
     aspect: z.ZodEnum<{
         "1:1": "1:1";
         "16:9": "16:9";
         "4:3": "4:3";
-        "3:4": "3:4";
         "9:16": "9:16";
     }>;
     alt: z.ZodOptional<z.ZodString>;

package/dist/ui/image.js

@@ -1,5 +1,5 @@
 import { z } from "zod";
-export const IMAGE_ASPECTS = ["1:1", "16:9", "4:3", "3:4", "9:16"];
+export const IMAGE_ASPECTS = ["1:1", "16:9", "4:3", "9:16"];
 export const imageProps = z.object({
     url: z.string(),
     aspect: z.enum(IMAGE_ASPECTS),

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/dist/ui/item.d.ts

@@ -1,5 +1,5 @@
 import { z } from "zod";
-export declare const ITEM_VARIANTS: readonly ["default", "outline", "muted"];
+export declare const ITEM_VARIANTS: readonly ["default"];
 export declare const ITEM_MAX_TITLE_CHARS = 100;
 export declare const ITEM_MAX_DESCRIPTION_CHARS = 160;
 export declare const itemProps: z.ZodObject<{
@@ -7,8 +7,6 @@ export declare const itemProps: z.ZodObject<{
     description: z.ZodOptional<z.ZodString>;
     variant: z.ZodOptional<z.ZodEnum<{
         default: "default";
-        outline: "outline";
-        muted: "muted";
     }>>;
 }, z.core.$strip>;
 export type ItemProps = z.infer<typeof itemProps>;

package/dist/ui/item.js

@@ -1,5 +1,5 @@
 import { z } from "zod";
-export const ITEM_VARIANTS = ["default", "outline", "muted"];
+export const ITEM_VARIANTS = ["default"];
 export const ITEM_MAX_TITLE_CHARS = 100;
 export const ITEM_MAX_DESCRIPTION_CHARS = 160;
 export const itemProps = z.object({

package/dist/ui/schema.d.ts

@@ -7,11 +7,15 @@ export declare const snapJsonRenderSchema: import("@json-render/core").Schema<{
         root: import("@json-render/core").SchemaType<"string", unknown>;
         elements: import("@json-render/core").SchemaType<"record", import("@json-render/core").SchemaType<"object", {
             type: import("@json-render/core").SchemaType<"ref", string>;
-            props: import("@json-render/core").SchemaType<"propsOf", string>;
+            props: {
+                optional: true;
+                kind: "propsOf";
+                inner?: string;
+            };
             children: {
                 optional: true;
                 kind: "array";
-                inner?: import("@json-render/core").SchemaType<"string", unknown> | undefined;
+                inner?: import("@json-render/core").SchemaType<"string", unknown>;
             };
         }>>;
     }>;

package/dist/ui/schema.js

@@ -8,7 +8,7 @@ export const snapJsonRenderSchema = defineSchema((s) => ({
         root: s.string(),
         elements: s.record(s.object({
             type: s.ref("catalog.components"),
-            props: s.propsOf("catalog.components"),
+            props: { ...s.propsOf("catalog.components"), optional: true },
             children: { ...s.array(s.string()), optional: true },
         })),
     }),
@@ -25,7 +25,7 @@ export const snapJsonRenderSchema = defineSchema((s) => ({
 }), {
     defaultRules: [
         "You are generating auxiliary UI for a Farcaster Snap. Prefer components matching snap element types (Item, Badge, ButtonGroup, Input, Switch, ToggleGroup, Slider, Progress, Image, Separator).",
-        "Snap pages use a Stack root with at most 6 body children and 1 media element (Image); keep generated trees small.",
+        "Snap structural limits: max 64 elements, max 7 children on root, max 6 children per non-root container, max 4 levels of nesting. Keep generated trees small.",
         "Bottom-of-card snap buttons are Button components; use actions post / link / mini_app / sdk per SPEC.md.",
     ],
 });

package/dist/ui/slider.d.ts

@@ -9,5 +9,6 @@ export declare const sliderProps: z.ZodObject<{
     step: z.ZodOptional<z.ZodNumber>;
     defaultValue: z.ZodOptional<z.ZodNumber>;
     label: z.ZodOptional<z.ZodString>;
+    showValue: z.ZodOptional<z.ZodBoolean>;
 }, z.core.$strip>;
 export type SliderProps = z.infer<typeof sliderProps>;

package/dist/ui/slider.js

@@ -10,6 +10,8 @@ export const sliderProps = z
     step: z.number().optional(),
     defaultValue: z.number().optional(),
     label: z.string().max(SLIDER_MAX_LABEL_CHARS).optional(),
+    /** When true, display the current value next to the label. */
+    showValue: z.boolean().optional(),
 })
     .superRefine((val, ctx) => {
     if (val.min > val.max) {

package/dist/ui/text.d.ts

@@ -1,6 +1,6 @@
 import { z } from "zod";
-export declare const TEXT_SIZES: readonly ["lg", "md", "sm"];
-export declare const TEXT_WEIGHTS: readonly ["bold", "medium", "normal"];
+export declare const TEXT_SIZES: readonly ["md", "sm"];
+export declare const TEXT_WEIGHTS: readonly ["bold", "normal"];
 export declare const TEXT_ALIGNS: readonly ["left", "center", "right"];
 export declare const TEXT_MAX_CONTENT_CHARS = 320;
 export declare const textProps: z.ZodObject<{
@@ -8,11 +8,9 @@ export declare const textProps: z.ZodObject<{
     size: z.ZodOptional<z.ZodEnum<{
         sm: "sm";
         md: "md";
-        lg: "lg";
     }>>;
     weight: z.ZodOptional<z.ZodEnum<{
         bold: "bold";
-        medium: "medium";
         normal: "normal";
     }>>;
     align: z.ZodOptional<z.ZodEnum<{

package/dist/ui/text.js

@@ -1,6 +1,6 @@
 import { z } from "zod";
-export const TEXT_SIZES = ["lg", "md", "sm"];
-export const TEXT_WEIGHTS = ["bold", "medium", "normal"];
+export const TEXT_SIZES = ["md", "sm"];
+export const TEXT_WEIGHTS = ["bold", "normal"];
 export const TEXT_ALIGNS = ["left", "center", "right"];
 export const TEXT_MAX_CONTENT_CHARS = 320;
 export const textProps = z.object({

package/dist/validator.d.ts

@@ -4,8 +4,9 @@ export type ValidationResult = {
     issues: z.core.$ZodIssue[];
 };
 /**
- * Validates a snap response against the schema.
+ * Validates a snap response against the schema, structural constraints, and URL rules.
  * Element-level prop validation is handled by the json-render catalog.
- * This validates the snap envelope (version, theme, effects, spec shape).
+ * This validates the snap envelope (version, theme, effects, spec shape)
+ * and enforces structural limits (element count, children, depth) and URL validation.
  */
 export declare function validateSnapResponse(json: unknown): ValidationResult;