@farcaster/snap 1.5.1 → 2.0.0

package/dist/ui/slider.js

@@ -1,11 +1,40 @@
 import { z } from "zod";
-export const sliderProps = z.object({
+export const SLIDER_MAX_LABEL_CHARS = 60;
+export const SLIDER_DEFAULT_STEP = 1;
+export const SLIDER_STEP_ALIGN_EPS = 1e-6;
+export const sliderProps = z
+    .object({
     name: z.string().min(1),
     min: z.number(),
     max: z.number(),
     step: z.number().optional(),
-    value: z.number().optional(),
-    label: z.string().optional(),
-    minLabel: z.string().optional(),
-    maxLabel: z.string().optional(),
+    defaultValue: z.number().optional(),
+    label: z.string().max(SLIDER_MAX_LABEL_CHARS).optional(),
+})
+    .superRefine((val, ctx) => {
+    if (val.min > val.max) {
+        ctx.addIssue({
+            code: "custom",
+            message: `slider min (${val.min}) must be <= max (${val.max})`,
+            path: ["min"],
+        });
+        return;
+    }
+    if (val.step !== undefined && (val.step <= 0 || !Number.isFinite(val.step))) {
+        ctx.addIssue({
+            code: "custom",
+            message: "slider step must be a finite number > 0",
+            path: ["step"],
+        });
+        return;
+    }
+    if (val.defaultValue !== undefined) {
+        if (val.defaultValue < val.min || val.defaultValue > val.max) {
+            ctx.addIssue({
+                code: "custom",
+                message: `slider defaultValue (${val.defaultValue}) must be between min (${val.min}) and max (${val.max})`,
+                path: ["defaultValue"],
+            });
+        }
+    }
 });

package/dist/ui/stack.d.ts

@@ -1,3 +1,24 @@
 import { z } from "zod";
-export declare const stackProps: z.ZodObject<{}, z.core.$strip>;
+export declare const STACK_DIRECTIONS: readonly ["vertical", "horizontal"];
+export declare const STACK_GAPS: readonly ["none", "sm", "md", "lg"];
+export declare const STACK_JUSTIFY: readonly ["start", "center", "end", "between", "around"];
+export declare const stackProps: z.ZodObject<{
+    direction: z.ZodOptional<z.ZodEnum<{
+        horizontal: "horizontal";
+        vertical: "vertical";
+    }>>;
+    gap: z.ZodOptional<z.ZodEnum<{
+        sm: "sm";
+        md: "md";
+        none: "none";
+        lg: "lg";
+    }>>;
+    justify: z.ZodOptional<z.ZodEnum<{
+        start: "start";
+        center: "center";
+        end: "end";
+        between: "between";
+        around: "around";
+    }>>;
+}, z.core.$strip>;
 export type StackProps = z.infer<typeof stackProps>;

package/dist/ui/stack.js

@@ -1,2 +1,9 @@
 import { z } from "zod";
-export const stackProps = z.object({});
+export const STACK_DIRECTIONS = ["vertical", "horizontal"];
+export const STACK_GAPS = ["none", "sm", "md", "lg"];
+export const STACK_JUSTIFY = ["start", "center", "end", "between", "around"];
+export const stackProps = z.object({
+    direction: z.enum(STACK_DIRECTIONS).optional(),
+    gap: z.enum(STACK_GAPS).optional(),
+    justify: z.enum(STACK_JUSTIFY).optional(),
+});

package/dist/ui/switch.d.ts

@@ -0,0 +1,8 @@
+import { z } from "zod";
+export declare const SWITCH_MAX_LABEL_CHARS = 60;
+export declare const switchProps: z.ZodObject<{
+    name: z.ZodString;
+    label: z.ZodOptional<z.ZodString>;
+    defaultChecked: z.ZodOptional<z.ZodBoolean>;
+}, z.core.$strip>;
+export type SwitchProps = z.infer<typeof switchProps>;

package/dist/ui/switch.js

@@ -0,0 +1,7 @@
+import { z } from "zod";
+export const SWITCH_MAX_LABEL_CHARS = 60;
+export const switchProps = z.object({
+    name: z.string().min(1),
+    label: z.string().max(SWITCH_MAX_LABEL_CHARS).optional(),
+    defaultChecked: z.boolean().optional(),
+});

package/dist/ui/text.d.ts

@@ -1,15 +1,23 @@
 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_ALIGNS: readonly ["left", "center", "right"];
+export declare const TEXT_MAX_CONTENT_CHARS = 320;
 export declare const textProps: z.ZodObject<{
-    style: z.ZodEnum<{
-        title: "title";
-        body: "body";
-        caption: "caption";
-        label: "label";
-    }>;
     content: z.ZodString;
+    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<{
-        left: "left";
         center: "center";
+        left: "left";
         right: "right";
     }>>;
 }, z.core.$strip>;

package/dist/ui/text.js

@@ -1,7 +1,11 @@
 import { z } from "zod";
-import { TEXT_ALIGN_VALUES, TEXT_STYLE_VALUES } from "../constants.js";
+export const TEXT_SIZES = ["lg", "md", "sm"];
+export const TEXT_WEIGHTS = ["bold", "medium", "normal"];
+export const TEXT_ALIGNS = ["left", "center", "right"];
+export const TEXT_MAX_CONTENT_CHARS = 320;
 export const textProps = z.object({
-    style: z.enum(TEXT_STYLE_VALUES),
-    content: z.string(),
-    align: z.enum(TEXT_ALIGN_VALUES).optional(),
+    content: z.string().min(1).max(TEXT_MAX_CONTENT_CHARS),
+    size: z.enum(TEXT_SIZES).optional(),
+    weight: z.enum(TEXT_WEIGHTS).optional(),
+    align: z.enum(TEXT_ALIGNS).optional(),
 });

package/dist/ui/toggle-group.d.ts

@@ -0,0 +1,23 @@
+import { z } from "zod";
+export declare const TOGGLE_GROUP_VARIANTS: readonly ["default", "outline"];
+export declare const TOGGLE_GROUP_ORIENTATIONS: readonly ["horizontal", "vertical"];
+export declare const TOGGLE_GROUP_MIN_OPTIONS = 2;
+export declare const TOGGLE_GROUP_MAX_OPTIONS = 6;
+export declare const TOGGLE_GROUP_MAX_OPTION_CHARS = 30;
+export declare const TOGGLE_GROUP_MAX_LABEL_CHARS = 60;
+export declare const toggleGroupProps: z.ZodObject<{
+    name: z.ZodString;
+    label: z.ZodOptional<z.ZodString>;
+    multiple: z.ZodOptional<z.ZodBoolean>;
+    orientation: z.ZodOptional<z.ZodEnum<{
+        horizontal: "horizontal";
+        vertical: "vertical";
+    }>>;
+    defaultValue: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>>;
+    options: z.ZodArray<z.ZodString>;
+    variant: z.ZodOptional<z.ZodEnum<{
+        default: "default";
+        outline: "outline";
+    }>>;
+}, z.core.$strip>;
+export type ToggleGroupProps = z.infer<typeof toggleGroupProps>;

package/dist/ui/toggle-group.js

@@ -0,0 +1,19 @@
+import { z } from "zod";
+export const TOGGLE_GROUP_VARIANTS = ["default", "outline"];
+export const TOGGLE_GROUP_ORIENTATIONS = ["horizontal", "vertical"];
+export const TOGGLE_GROUP_MIN_OPTIONS = 2;
+export const TOGGLE_GROUP_MAX_OPTIONS = 6;
+export const TOGGLE_GROUP_MAX_OPTION_CHARS = 30;
+export const TOGGLE_GROUP_MAX_LABEL_CHARS = 60;
+export const toggleGroupProps = z.object({
+    name: z.string().min(1),
+    label: z.string().max(TOGGLE_GROUP_MAX_LABEL_CHARS).optional(),
+    multiple: z.boolean().optional(),
+    orientation: z.enum(TOGGLE_GROUP_ORIENTATIONS).optional(),
+    defaultValue: z.union([z.string(), z.array(z.string())]).optional(),
+    options: z
+        .array(z.string().min(1).max(TOGGLE_GROUP_MAX_OPTION_CHARS))
+        .min(TOGGLE_GROUP_MIN_OPTIONS)
+        .max(TOGGLE_GROUP_MAX_OPTIONS),
+    variant: z.enum(TOGGLE_GROUP_VARIANTS).optional(),
+});

package/dist/validator.d.ts

@@ -3,5 +3,9 @@ export type ValidationResult = {
     valid: boolean;
     issues: z.core.$ZodIssue[];
 };
+/**
+ * Validates a snap response against the schema.
+ * Element-level prop validation is handled by the json-render catalog.
+ * This validates the snap envelope (version, theme, effects, spec shape).
+ */
 export declare function validateSnapResponse(json: unknown): ValidationResult;
-export declare function validateFirstPageResponse(json: unknown): ValidationResult;

package/dist/validator.js

@@ -1,121 +1,9 @@
-import { BUTTON_GROUP_STYLE, DEFAULT_BUTTON_LAYOUT, ELEMENT_TYPE, LIMITS, SPACER_SIZE, TEXT_STYLE, } from "./constants.js";
-import { firstPageResponseSchema, snapResponseSchema, } from "./schemas.js";
-/** Not in SPEC — rough px used only for {@link measureHeightBudget}. */
-const PAGE_HEIGHT_HEURISTIC = {
-    baseChromePx: 32,
-    elementGapPx: 12,
-    buttonRowPx: 48,
-};
-function estimateElementHeight(el) {
-    switch (el.type) {
-        case ELEMENT_TYPE.text: {
-            const style = el.style;
-            if (style === TEXT_STYLE.title)
-                return 48;
-            if (style === TEXT_STYLE.body)
-                return 80;
-            if (style === TEXT_STYLE.caption)
-                return 36;
-            if (style === TEXT_STYLE.label)
-                return 24;
-            return 48;
-        }
-        case ELEMENT_TYPE.image:
-            return 180;
-        case ELEMENT_TYPE.grid:
-            return 180;
-        case ELEMENT_TYPE.progress:
-            return 32;
-        case ELEMENT_TYPE.list: {
-            const items = el.items;
-            const n = Array.isArray(items) ? items.length : 0;
-            return Math.min(n, LIMITS.maxListItems) * 30;
-        }
-        case ELEMENT_TYPE.slider:
-            return 56;
-        case ELEMENT_TYPE.button_group: {
-            const options = Array.isArray(el.options) ? el.options : [];
-            const style = el.style ??
-                (options.length <= 3
-                    ? BUTTON_GROUP_STYLE.row
-                    : BUTTON_GROUP_STYLE.stack);
-            if (style === BUTTON_GROUP_STYLE.row)
-                return PAGE_HEIGHT_HEURISTIC.buttonRowPx;
-            if (style === BUTTON_GROUP_STYLE.grid) {
-                return (Math.ceil(options.length / 2) * PAGE_HEIGHT_HEURISTIC.buttonRowPx);
-            }
-            return options.length * PAGE_HEIGHT_HEURISTIC.buttonRowPx;
-        }
-        case ELEMENT_TYPE.text_input:
-            return 44;
-        case ELEMENT_TYPE.toggle:
-            return 40;
-        case ELEMENT_TYPE.divider:
-            return 16;
-        case ELEMENT_TYPE.spacer: {
-            const size = el.size ?? SPACER_SIZE.medium;
-            if (size === SPACER_SIZE.small)
-                return 8;
-            if (size === SPACER_SIZE.large)
-                return 24;
-            return 16;
-        }
-        case ELEMENT_TYPE.bar_chart:
-            return 140; // fixed: 120px bars + 20px labels
-        case ELEMENT_TYPE.group: {
-            let maxH = 0;
-            for (const child of el.children) {
-                const h = estimateElementHeight(child);
-                if (h > maxH)
-                    maxH = h;
-            }
-            return maxH || 56;
-        }
-        default: {
-            const _exhaustive = el;
-            return _exhaustive;
-        }
-    }
-}
-function estimateButtonsHeight(buttons, buttonLayout) {
-    const rowPx = PAGE_HEIGHT_HEURISTIC.buttonRowPx;
-    if (buttons.length === 0)
-        return 0;
-    if (buttonLayout === BUTTON_GROUP_STYLE.row)
-        return rowPx;
-    if (buttonLayout === BUTTON_GROUP_STYLE.grid) {
-        return Math.ceil(buttons.length / 2) * rowPx;
-    }
-    return buttons.length * rowPx;
-}
-function measureHeightBudget(elements, buttons, buttonLayout) {
-    let totalHeight = PAGE_HEIGHT_HEURISTIC.baseChromePx;
-    for (const el of elements) {
-        totalHeight += estimateElementHeight(el);
-    }
-    if (elements.length > 1) {
-        totalHeight += (elements.length - 1) * PAGE_HEIGHT_HEURISTIC.elementGapPx;
-    }
-    totalHeight += estimateButtonsHeight(buttons, buttonLayout);
-    return totalHeight;
-}
-function heightBudgetValidationError(elements, buttons, buttonLayout) {
-    const totalHeight = measureHeightBudget(elements, buttons, buttonLayout);
-    if (totalHeight <= LIMITS.maxEstimatedPageHeightPx) {
-        return null;
-    }
-    return {
-        code: "custom",
-        message: `estimated page height is ~${totalHeight}px, which exceeds the ${LIMITS.maxEstimatedPageHeightPx}px feed card limit (expected max ~${LIMITS.maxEstimatedPageHeightPx}px). Reduce elements or buttons to fit.`,
-        path: ["page"],
-    };
-}
-function heightBudgetValidationErrorForRoot(root) {
-    const layout = typeof root.page.button_layout === "string"
-        ? root.page.button_layout
-        : DEFAULT_BUTTON_LAYOUT;
-    return heightBudgetValidationError(root.page.elements.children, root.page.buttons ?? [], layout);
-}
+import { snapResponseSchema } from "./schemas.js";
+/**
+ * Validates a snap response against the schema.
+ * Element-level prop validation is handled by the json-render catalog.
+ * This validates the snap envelope (version, theme, effects, spec shape).
+ */
 export function validateSnapResponse(json) {
     const parsed = snapResponseSchema.safeParse(json);
     if (!parsed.success) {
@@ -124,23 +12,5 @@ export function validateSnapResponse(json) {
             issues: parsed.error.issues,
         };
     }
-    const heightErr = heightBudgetValidationErrorForRoot(parsed.data);
-    if (heightErr) {
-        return { valid: false, issues: [heightErr] };
-    }
-    return { valid: true, issues: [] };
-}
-export function validateFirstPageResponse(json) {
-    const parsed = firstPageResponseSchema.safeParse(json);
-    if (!parsed.success) {
-        return {
-            valid: false,
-            issues: parsed.error.issues,
-        };
-    }
-    const heightErr = heightBudgetValidationErrorForRoot(parsed.data);
-    if (heightErr) {
-        return { valid: false, issues: [heightErr] };
-    }
     return { valid: true, issues: [] };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farcaster/snap",
-  "version": "1.5.1",
+  "version": "2.0.0",
   "description": "Farcaster Snaps 🫰",
   "repository": {
     "type": "git",
@@ -26,80 +26,80 @@
       "import": "./dist/ui/index.js",
       "default": "./dist/ui/index.js"
     },
-    "./ui/text": {
-      "types": "./dist/ui/text.d.ts",
-      "import": "./dist/ui/text.js",
-      "default": "./dist/ui/text.js"
+    "./ui/badge": {
+      "types": "./dist/ui/badge.d.ts",
+      "import": "./dist/ui/badge.js",
+      "default": "./dist/ui/badge.js"
+    },
+    "./ui/button": {
+      "types": "./dist/ui/button.d.ts",
+      "import": "./dist/ui/button.js",
+      "default": "./dist/ui/button.js"
+    },
+    "./ui/icon": {
+      "types": "./dist/ui/icon.d.ts",
+      "import": "./dist/ui/icon.js",
+      "default": "./dist/ui/icon.js"
     },
     "./ui/image": {
       "types": "./dist/ui/image.d.ts",
       "import": "./dist/ui/image.js",
       "default": "./dist/ui/image.js"
     },
-    "./ui/divider": {
-      "types": "./dist/ui/divider.d.ts",
-      "import": "./dist/ui/divider.js",
-      "default": "./dist/ui/divider.js"
+    "./ui/input": {
+      "types": "./dist/ui/input.d.ts",
+      "import": "./dist/ui/input.js",
+      "default": "./dist/ui/input.js"
+    },
+    "./ui/item": {
+      "types": "./dist/ui/item.d.ts",
+      "import": "./dist/ui/item.js",
+      "default": "./dist/ui/item.js"
     },
-    "./ui/spacer": {
-      "types": "./dist/ui/spacer.d.ts",
-      "import": "./dist/ui/spacer.js",
-      "default": "./dist/ui/spacer.js"
+    "./ui/item-group": {
+      "types": "./dist/ui/item-group.d.ts",
+      "import": "./dist/ui/item-group.js",
+      "default": "./dist/ui/item-group.js"
     },
     "./ui/progress": {
       "types": "./dist/ui/progress.d.ts",
       "import": "./dist/ui/progress.js",
       "default": "./dist/ui/progress.js"
     },
-    "./ui/list": {
-      "types": "./dist/ui/list.d.ts",
-      "import": "./dist/ui/list.js",
-      "default": "./dist/ui/list.js"
-    },
-    "./ui/grid": {
-      "types": "./dist/ui/grid.d.ts",
-      "import": "./dist/ui/grid.js",
-      "default": "./dist/ui/grid.js"
-    },
-    "./ui/text-input": {
-      "types": "./dist/ui/text-input.d.ts",
-      "import": "./dist/ui/text-input.js",
-      "default": "./dist/ui/text-input.js"
+    "./ui/separator": {
+      "types": "./dist/ui/separator.d.ts",
+      "import": "./dist/ui/separator.js",
+      "default": "./dist/ui/separator.js"
     },
     "./ui/slider": {
       "types": "./dist/ui/slider.d.ts",
       "import": "./dist/ui/slider.js",
       "default": "./dist/ui/slider.js"
     },
-    "./ui/button-group": {
-      "types": "./dist/ui/button-group.d.ts",
-      "import": "./dist/ui/button-group.js",
-      "default": "./dist/ui/button-group.js"
-    },
-    "./ui/toggle": {
-      "types": "./dist/ui/toggle.d.ts",
-      "import": "./dist/ui/toggle.js",
-      "default": "./dist/ui/toggle.js"
-    },
-    "./ui/bar-chart": {
-      "types": "./dist/ui/bar-chart.d.ts",
-      "import": "./dist/ui/bar-chart.js",
-      "default": "./dist/ui/bar-chart.js"
-    },
-    "./ui/group": {
-      "types": "./dist/ui/group.d.ts",
-      "import": "./dist/ui/group.js",
-      "default": "./dist/ui/group.js"
-    },
     "./ui/stack": {
       "types": "./dist/ui/stack.d.ts",
       "import": "./dist/ui/stack.js",
       "default": "./dist/ui/stack.js"
     },
-    "./ui/button": {
-      "types": "./dist/ui/button.d.ts",
-      "import": "./dist/ui/button.js",
-      "default": "./dist/ui/button.js"
+    "./ui/switch": {
+      "types": "./dist/ui/switch.d.ts",
+      "import": "./dist/ui/switch.js",
+      "default": "./dist/ui/switch.js"
+    },
+    "./ui/text": {
+      "types": "./dist/ui/text.d.ts",
+      "import": "./dist/ui/text.js",
+      "default": "./dist/ui/text.js"
+    },
+    "./ui/toggle-group": {
+      "types": "./dist/ui/toggle-group.d.ts",
+      "import": "./dist/ui/toggle-group.js",
+      "default": "./dist/ui/toggle-group.js"
+    },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react/index.js",
+      "default": "./dist/react/index.js"
     }
   },
   "files": [
@@ -116,10 +116,30 @@
     "viem": "^2.21.0"
   },
   "peerDependencies": {
-    "zod": "^4.0.0"
+    "zod": "^4.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "@json-render/react": "*",
+    "@neynar/ui": "*",
+    "lucide-react": "*"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "@json-render/react": {
+      "optional": true
+    },
+    "@neynar/ui": {
+      "optional": true
+    },
+    "lucide-react": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@types/node": "^25.5.0",
+    "@types/react": "^19.0.0",
+    "react": "^19.0.0",
     "tsc-alias": "^1.8.16",
     "tsx": "^4.0.0",
     "typescript": "^5.4.0",