@farcaster/snap 2.4.0 → 2.5.1

package/src/ui/index.ts

@@ -16,8 +16,8 @@ export type { ToggleGroupProps } from "./toggle-group.js";
 export { inputProps } from "./input.js";
 export type { InputProps } from "./input.js";
 
-export { itemProps } from "./item.js";
-export type { ItemProps } from "./item.js";
+export { itemProps, itemMediaProps } from "./item.js";
+export type { ItemMediaProps, ItemProps } from "./item.js";
 
 export { itemGroupProps } from "./item-group.js";
 export type { ItemGroupProps } from "./item-group.js";

package/src/ui/item.ts

@@ -1,13 +1,43 @@
 import { z } from "zod";
+import { PROGRESS_COLOR_VALUES } from "../colors.js";
+import { ICON_NAMES } from "./icon.js";
 
 export const ITEM_VARIANTS = ["default"] as const;
+export const ITEM_MEDIA_VARIANTS = ["icon", "image"] as const;
 export const ITEM_MAX_TITLE_CHARS = 100;
 export const ITEM_MAX_DESCRIPTION_CHARS = 160;
+export const ITEM_MAX_MEDIA_ALT_CHARS = 120;
 
-export const itemProps = z.object({
-  title: z.string().min(1).max(ITEM_MAX_TITLE_CHARS),
-  description: z.string().max(ITEM_MAX_DESCRIPTION_CHARS).optional(),
-  variant: z.enum(ITEM_VARIANTS).optional(),
-});
+const itemIconMediaProps = z
+  .object({
+    variant: z.literal("icon"),
+    name: z.enum(ICON_NAMES),
+    color: z.enum(PROGRESS_COLOR_VALUES).optional(),
+  })
+  .strict();
+
+const itemImageMediaProps = z
+  .object({
+    variant: z.literal("image"),
+    url: z.string(),
+    alt: z.string().max(ITEM_MAX_MEDIA_ALT_CHARS).optional(),
+    round: z.boolean().optional(),
+  })
+  .strict();
+
+export const itemMediaProps = z.discriminatedUnion("variant", [
+  itemIconMediaProps,
+  itemImageMediaProps,
+]);
+
+export const itemProps = z
+  .object({
+    title: z.string().min(1).max(ITEM_MAX_TITLE_CHARS),
+    description: z.string().max(ITEM_MAX_DESCRIPTION_CHARS).optional(),
+    variant: z.enum(ITEM_VARIANTS).optional(),
+    media: itemMediaProps.optional(),
+  })
+  .strict();
 
 export type ItemProps = z.infer<typeof itemProps>;
+export type ItemMediaProps = z.infer<typeof itemMediaProps>;

package/src/ui/stack.ts

@@ -8,7 +8,9 @@ export const stackProps = z.object({
   direction: z.enum(STACK_DIRECTIONS).optional(),
   gap: z.enum(STACK_GAPS).optional(),
   justify: z.enum(STACK_JUSTIFY).optional(),
-  /** Horizontal stacks only: fixed column grid (`2`–`6`). Prefer omitting this when children are stacks — they flex as row peers automatically. */
+  /** Horizontal stacks only: make direct children equal width. */
+  equalWidth: z.boolean().optional(),
+  /** Horizontal stacks only: legacy fixed equal-width column count (`2`–`6`). Prefer `equalWidth`. */
   columns: z.union([
     z.literal(2),
     z.literal(3),

package/src/validator.ts

@@ -29,7 +29,12 @@ const URL_TARGET_ACTIONS = new Set([
  */
 function isLoopback(url: URL): boolean {
   const host = url.hostname;
-  return host === "localhost" || host === "127.0.0.1" || host === "::1" || host === "[::1]";
+  return (
+    host === "localhost" ||
+    host === "127.0.0.1" ||
+    host === "::1" ||
+    host === "[::1]"
+  );
 }
 
 /**
@@ -84,6 +89,11 @@ type ElementShape = {
   on?: Record<string, { action?: string; params?: Record<string, unknown> }>;
 };
 
+type ItemMediaShape = {
+  variant?: string;
+  url?: unknown;
+};
+
 // ─── Structural validation ────────────────────────────
 
 /**
@@ -169,6 +179,24 @@ function validateUrls(elements: Record<string, unknown>): z.core.$ZodIssue[] {
       }
     }
 
+    if (
+      el.type === "item" &&
+      el.props?.media &&
+      typeof el.props.media === "object"
+    ) {
+      const media = el.props.media as ItemMediaShape;
+      if (media.variant === "image" && typeof media.url === "string") {
+        const error = validateUrl(media.url);
+        if (error) {
+          issues.push({
+            code: "custom",
+            message: error,
+            path: ["ui", "elements", id, "props", "media", "url"],
+          });
+        }
+      }
+    }
+
     // Validate action target URLs
     if (el.on) {
       for (const [event, binding] of Object.entries(el.on)) {