@farcaster/snap 1.5.1 → 2.0.0

package/src/ui/toggle-group.ts

@@ -0,0 +1,23 @@
+import { z } from "zod";
+
+export const TOGGLE_GROUP_VARIANTS = ["default", "outline"] as const;
+export const TOGGLE_GROUP_ORIENTATIONS = ["horizontal", "vertical"] as const;
+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(),
+});
+
+export type ToggleGroupProps = z.infer<typeof toggleGroupProps>;

package/src/validator.ts

@@ -1,163 +1,16 @@
 import { z } from "zod";
-import {
-  BUTTON_GROUP_STYLE,
-  DEFAULT_BUTTON_LAYOUT,
-  ELEMENT_TYPE,
-  LIMITS,
-  SPACER_SIZE,
-  TEXT_STYLE,
-} from "./constants";
-import {
-  firstPageResponseSchema,
-  snapResponseSchema,
-  type Button,
-  type Element,
-} from "./schemas";
-
-type SnapRoot = z.infer<typeof snapResponseSchema>;
+import { snapResponseSchema } from "./schemas";
 
 export type ValidationResult = {
   valid: boolean;
   issues: z.core.$ZodIssue[];
 };
 
-/** Not in SPEC — rough px used only for {@link measureHeightBudget}. */
-const PAGE_HEIGHT_HEURISTIC = {
-  baseChromePx: 32,
-  elementGapPx: 12,
-  buttonRowPx: 48,
-} as const;
-
-function estimateElementHeight(el: Element): number {
-  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: never = el;
-      return _exhaustive;
-    }
-  }
-}
-
-function estimateButtonsHeight(
-  buttons: readonly Button[],
-  buttonLayout: string,
-): number {
-  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: readonly Element[],
-  buttons: readonly Button[],
-  buttonLayout: string,
-): number {
-  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: readonly Element[],
-  buttons: readonly Button[],
-  buttonLayout: string,
-): z.core.$ZodIssue | null {
-  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: SnapRoot,
-): z.core.$ZodIssue | null {
-  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,
-  );
-}
-
+/**
+ * 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: unknown): ValidationResult {
   const parsed = snapResponseSchema.safeParse(json);
   if (!parsed.success) {
@@ -166,28 +19,5 @@ export function validateSnapResponse(json: unknown): ValidationResult {
       issues: parsed.error.issues,
     };
   }
-
-  const heightErr = heightBudgetValidationErrorForRoot(parsed.data);
-  if (heightErr) {
-    return { valid: false, issues: [heightErr] };
-  }
-
-  return { valid: true, issues: [] };
-}
-
-export function validateFirstPageResponse(json: unknown): ValidationResult {
-  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/dist/ui/bar-chart.d.ts

@@ -1,30 +0,0 @@
-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

@@ -1,15 +0,0 @@
-import { z } from "zod";
-import { LIMITS } from "../constants.js";
-import { BAR_CHART_COLOR_VALUES, PALETTE_COLOR_VALUES } from "../colors.js";
-export const barChartProps = z.object({
-    bars: z
-        .array(z.object({
-        label: z.string(),
-        value: z.number().nonnegative(),
-        color: z.enum(PALETTE_COLOR_VALUES).optional(),
-    }))
-        .min(1)
-        .max(LIMITS.maxBarChartBars),
-    max: z.number().nonnegative().optional(),
-    color: z.enum(BAR_CHART_COLOR_VALUES).optional(),
-});

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

@@ -1,19 +0,0 @@
-import { z } from "zod";
-export declare const buttonGroupProps: z.ZodPipe<z.ZodObject<{
-    name: z.ZodString;
-    options: z.ZodArray<z.ZodString>;
-    style: z.ZodOptional<z.ZodEnum<{
-        row: "row";
-        stack: "stack";
-        grid: "grid";
-    }>>;
-}, z.core.$strip>, z.ZodTransform<{
-    style: "row" | "stack" | "grid";
-    name: string;
-    options: string[];
-}, {
-    name: string;
-    options: string[];
-    style?: "row" | "stack" | "grid" | undefined;
-}>>;
-export type ButtonGroupProps = z.infer<typeof buttonGroupProps>;

package/dist/ui/button-group.js

@@ -1,18 +0,0 @@
-import { z } from "zod";
-import { BUTTON_GROUP_STYLE, BUTTON_GROUP_STYLE_VALUES, LIMITS, } from "../constants.js";
-export const buttonGroupProps = z
-    .object({
-    name: z.string().min(1),
-    options: z
-        .array(z.string().max(LIMITS.maxButtonGroupOptionChars))
-        .min(LIMITS.minButtonGroupOptions)
-        .max(LIMITS.maxButtonGroupOptions),
-    style: z.enum(BUTTON_GROUP_STYLE_VALUES).optional(),
-})
-    .transform((val) => ({
-    ...val,
-    style: val.style ??
-        (val.options.length <= 3
-            ? BUTTON_GROUP_STYLE.row
-            : BUTTON_GROUP_STYLE.stack),
-}));

package/dist/ui/divider.d.ts

@@ -1,3 +0,0 @@
-import { z } from "zod";
-export declare const dividerProps: z.ZodObject<{}, z.core.$strip>;
-export type DividerProps = z.infer<typeof dividerProps>;

package/dist/ui/divider.js

@@ -1,2 +0,0 @@
-import { z } from "zod";
-export const dividerProps = z.object({});

package/dist/ui/grid.d.ts

@@ -1,22 +0,0 @@
-import { z } from "zod";
-export declare const gridProps: z.ZodObject<{
-    cols: z.ZodNumber;
-    rows: z.ZodNumber;
-    cells: z.ZodArray<z.ZodObject<{
-        row: z.ZodNumber;
-        col: z.ZodNumber;
-        color: z.ZodOptional<z.ZodString>;
-        content: z.ZodOptional<z.ZodString>;
-    }, z.core.$strip>>;
-    cellSize: z.ZodOptional<z.ZodEnum<{
-        auto: "auto";
-        square: "square";
-    }>>;
-    gap: z.ZodOptional<z.ZodEnum<{
-        small: "small";
-        medium: "medium";
-        none: "none";
-    }>>;
-    interactive: z.ZodOptional<z.ZodBoolean>;
-}, z.core.$strip>;
-export type GridProps = z.infer<typeof gridProps>;

package/dist/ui/grid.js

@@ -1,16 +0,0 @@
-import { z } from "zod";
-import { GRID_CELL_SIZE_VALUES, GRID_GAP_VALUES, HEX_COLOR_6_RE, LIMITS, } from "../constants.js";
-const gridCellZ = z.object({
-    row: z.number().int().nonnegative(),
-    col: z.number().int().nonnegative(),
-    color: z.string().regex(HEX_COLOR_6_RE).optional(),
-    content: z.string().optional(),
-});
-export const gridProps = z.object({
-    cols: z.number().int().min(LIMITS.minGridCols).max(LIMITS.maxGridCols),
-    rows: z.number().int().min(LIMITS.minGridRows).max(LIMITS.maxGridRows),
-    cells: z.array(gridCellZ),
-    cellSize: z.enum(GRID_CELL_SIZE_VALUES).optional(),
-    gap: z.enum(GRID_GAP_VALUES).optional(),
-    interactive: z.boolean().optional(),
-});

package/dist/ui/group.d.ts

@@ -1,7 +0,0 @@
-import { z } from "zod";
-export declare const groupProps: z.ZodObject<{
-    layout: z.ZodEnum<{
-        row: "row";
-    }>;
-}, z.core.$strip>;
-export type GroupProps = z.infer<typeof groupProps>;

package/dist/ui/group.js

@@ -1,5 +0,0 @@
-import { z } from "zod";
-import { GROUP_LAYOUT_VALUES } from "../constants.js";
-export const groupProps = z.object({
-    layout: z.enum(GROUP_LAYOUT_VALUES),
-});

package/dist/ui/list.d.ts

@@ -1,13 +0,0 @@
-import { z } from "zod";
-export declare const listProps: z.ZodObject<{
-    style: z.ZodOptional<z.ZodEnum<{
-        ordered: "ordered";
-        unordered: "unordered";
-        plain: "plain";
-    }>>;
-    items: z.ZodArray<z.ZodObject<{
-        content: z.ZodString;
-        trailing: z.ZodOptional<z.ZodString>;
-    }, z.core.$strip>>;
-}, z.core.$strip>;
-export type ListProps = z.infer<typeof listProps>;

package/dist/ui/list.js

@@ -1,13 +0,0 @@
-import { z } from "zod";
-import { LIMITS, LIST_STYLE_VALUES } from "../constants.js";
-const listItemZ = z.object({
-    content: z.string(),
-    trailing: z.string().optional(),
-});
-export const listProps = z.object({
-    style: z.enum(LIST_STYLE_VALUES).optional(),
-    items: z
-        .array(listItemZ)
-        .min(LIMITS.minListItems)
-        .max(LIMITS.maxListItems),
-});

package/dist/ui/spacer.d.ts

@@ -1,9 +0,0 @@
-import { z } from "zod";
-export declare const spacerProps: z.ZodObject<{
-    size: z.ZodDefault<z.ZodEnum<{
-        small: "small";
-        medium: "medium";
-        large: "large";
-    }>>;
-}, z.core.$strip>;
-export type SpacerProps = z.infer<typeof spacerProps>;

package/dist/ui/spacer.js

@@ -1,5 +0,0 @@
-import { z } from "zod";
-import { SPACER_SIZE, SPACER_SIZE_VALUES } from "../constants.js";
-export const spacerProps = z.object({
-    size: z.enum(SPACER_SIZE_VALUES).default(SPACER_SIZE.medium),
-});

package/dist/ui/text-input.d.ts

@@ -1,7 +0,0 @@
-import { z } from "zod";
-export declare const textInputProps: z.ZodObject<{
-    name: z.ZodString;
-    placeholder: z.ZodOptional<z.ZodString>;
-    maxLength: z.ZodOptional<z.ZodNumber>;
-}, z.core.$strip>;
-export type TextInputProps = z.infer<typeof textInputProps>;

package/dist/ui/text-input.js

@@ -1,12 +0,0 @@
-import { z } from "zod";
-import { LIMITS } from "../constants.js";
-export const textInputProps = z.object({
-    name: z.string().min(1),
-    placeholder: z.string().optional(),
-    maxLength: z
-        .number()
-        .int()
-        .positive()
-        .max(LIMITS.maxTextInputChars)
-        .optional(),
-});

package/dist/ui/toggle.d.ts

@@ -1,7 +0,0 @@
-import { z } from "zod";
-export declare const toggleProps: z.ZodObject<{
-    name: z.ZodString;
-    label: z.ZodString;
-    value: z.ZodDefault<z.ZodBoolean>;
-}, z.core.$strip>;
-export type ToggleProps = z.infer<typeof toggleProps>;

package/dist/ui/toggle.js

@@ -1,6 +0,0 @@
-import { z } from "zod";
-export const toggleProps = z.object({
-    name: z.string().min(1),
-    label: z.string(),
-    value: z.boolean().default(false),
-});

package/src/ui/bar-chart.ts

@@ -1,20 +0,0 @@
-import { z } from "zod";
-import { LIMITS } from "../constants.js";
-import { BAR_CHART_COLOR_VALUES, PALETTE_COLOR_VALUES } from "../colors.js";
-
-export const barChartProps = z.object({
-  bars: z
-    .array(
-      z.object({
-        label: z.string(),
-        value: z.number().nonnegative(),
-        color: z.enum(PALETTE_COLOR_VALUES).optional(),
-      }),
-    )
-    .min(1)
-    .max(LIMITS.maxBarChartBars),
-  max: z.number().nonnegative().optional(),
-  color: z.enum(BAR_CHART_COLOR_VALUES).optional(),
-});
-
-export type BarChartProps = z.infer<typeof barChartProps>;

package/src/ui/button-group.ts

@@ -1,26 +0,0 @@
-import { z } from "zod";
-import {
-  BUTTON_GROUP_STYLE,
-  BUTTON_GROUP_STYLE_VALUES,
-  LIMITS,
-} from "../constants.js";
-
-export const buttonGroupProps = z
-  .object({
-    name: z.string().min(1),
-    options: z
-      .array(z.string().max(LIMITS.maxButtonGroupOptionChars))
-      .min(LIMITS.minButtonGroupOptions)
-      .max(LIMITS.maxButtonGroupOptions),
-    style: z.enum(BUTTON_GROUP_STYLE_VALUES).optional(),
-  })
-  .transform((val) => ({
-    ...val,
-    style:
-      val.style ??
-      (val.options.length <= 3
-        ? BUTTON_GROUP_STYLE.row
-        : BUTTON_GROUP_STYLE.stack),
-  }));
-
-export type ButtonGroupProps = z.infer<typeof buttonGroupProps>;

package/src/ui/divider.ts

@@ -1,5 +0,0 @@
-import { z } from "zod";
-
-export const dividerProps = z.object({});
-
-export type DividerProps = z.infer<typeof dividerProps>;

package/src/ui/grid.ts

@@ -1,25 +0,0 @@
-import { z } from "zod";
-import {
-  GRID_CELL_SIZE_VALUES,
-  GRID_GAP_VALUES,
-  HEX_COLOR_6_RE,
-  LIMITS,
-} from "../constants.js";
-
-const gridCellZ = z.object({
-  row: z.number().int().nonnegative(),
-  col: z.number().int().nonnegative(),
-  color: z.string().regex(HEX_COLOR_6_RE).optional(),
-  content: z.string().optional(),
-});
-
-export const gridProps = z.object({
-  cols: z.number().int().min(LIMITS.minGridCols).max(LIMITS.maxGridCols),
-  rows: z.number().int().min(LIMITS.minGridRows).max(LIMITS.maxGridRows),
-  cells: z.array(gridCellZ),
-  cellSize: z.enum(GRID_CELL_SIZE_VALUES).optional(),
-  gap: z.enum(GRID_GAP_VALUES).optional(),
-  interactive: z.boolean().optional(),
-});
-
-export type GridProps = z.infer<typeof gridProps>;

package/src/ui/group.ts

@@ -1,8 +0,0 @@
-import { z } from "zod";
-import { GROUP_LAYOUT_VALUES } from "../constants.js";
-
-export const groupProps = z.object({
-  layout: z.enum(GROUP_LAYOUT_VALUES),
-});
-
-export type GroupProps = z.infer<typeof groupProps>;

package/src/ui/list.ts

@@ -1,17 +0,0 @@
-import { z } from "zod";
-import { LIMITS, LIST_STYLE_VALUES } from "../constants.js";
-
-const listItemZ = z.object({
-  content: z.string(),
-  trailing: z.string().optional(),
-});
-
-export const listProps = z.object({
-  style: z.enum(LIST_STYLE_VALUES).optional(),
-  items: z
-    .array(listItemZ)
-    .min(LIMITS.minListItems)
-    .max(LIMITS.maxListItems),
-});
-
-export type ListProps = z.infer<typeof listProps>;

package/src/ui/spacer.ts

@@ -1,8 +0,0 @@
-import { z } from "zod";
-import { SPACER_SIZE, SPACER_SIZE_VALUES } from "../constants.js";
-
-export const spacerProps = z.object({
-  size: z.enum(SPACER_SIZE_VALUES).default(SPACER_SIZE.medium),
-});
-
-export type SpacerProps = z.infer<typeof spacerProps>;

package/src/ui/text-input.ts

@@ -1,15 +0,0 @@
-import { z } from "zod";
-import { LIMITS } from "../constants.js";
-
-export const textInputProps = z.object({
-  name: z.string().min(1),
-  placeholder: z.string().optional(),
-  maxLength: z
-    .number()
-    .int()
-    .positive()
-    .max(LIMITS.maxTextInputChars)
-    .optional(),
-});
-
-export type TextInputProps = z.infer<typeof textInputProps>;

package/src/ui/toggle.ts

@@ -1,9 +0,0 @@
-import { z } from "zod";
-
-export const toggleProps = z.object({
-  name: z.string().min(1),
-  label: z.string(),
-  value: z.boolean().default(false),
-});
-
-export type ToggleProps = z.infer<typeof toggleProps>;