@farcaster/snap 1.8.0 → 1.9.0

package/dist/react/components/action-button.js

@@ -5,14 +5,12 @@ import { cn } from "@neynar/ui/utils";
 import { useSnapAccentScopeStyle } from "../hooks/use-snap-accent.js";
 import { ICON_MAP } from "./icon.js";
 const VARIANT_MAP = {
-    default: "default",
+    primary: "default",
     secondary: "secondary",
-    outline: "outline",
-    ghost: "ghost",
 };
 export function SnapActionButton({ element: { props }, emit, }) {
     const label = String(props.label ?? "Action");
-    const variant = VARIANT_MAP[String(props.variant ?? "default")] ?? "default";
+    const variant = VARIANT_MAP[String(props.variant ?? "secondary")] ?? "secondary";
     const iconName = props.icon ? String(props.icon) : undefined;
     const accentStyle = useSnapAccentScopeStyle();
     const Icon = iconName ? ICON_MAP[iconName] : undefined;

package/dist/react/components/badge.js

@@ -5,14 +5,13 @@ import { useSnapAccentScopeStyle } from "../hooks/use-snap-accent.js";
 import { ICON_MAP } from "./icon.js";
 export function SnapBadge({ element: { props }, }) {
     const content = String(props.label ?? "");
+    const variant = String(props.variant ?? "default");
     const color = props.color ? String(props.color) : undefined;
     const iconName = props.icon ? String(props.icon) : undefined;
     const accentStyle = useSnapAccentScopeStyle();
     const isAccent = !color || color === "accent";
     const Icon = iconName ? ICON_MAP[iconName] : undefined;
-    return (_jsx("span", { style: isAccent ? accentStyle : undefined, children: _jsxs(Badge, { variant: isAccent ? "default" : "outline", className: "gap-1", 
-            // TODO: fix outline badge border color in @neynar/ui — too bright in dark mode
-            style: !isAccent
+    return (_jsx("span", { style: isAccent ? accentStyle : undefined, children: _jsxs(Badge, { variant: variant, className: "gap-1", style: variant === "outline" && !isAccent
                 ? { borderColor: `var(--snap-color-${color})`, color: `var(--snap-color-${color})` }
                 : undefined, children: [Icon && _jsx(Icon, { size: 12 }), content] }) }));
 }

package/dist/react/components/item.js

@@ -5,5 +5,5 @@ export function SnapItem({ element: { props }, children, }) {
     const title = String(props.title ?? "");
     const description = props.description ? String(props.description) : undefined;
     const variant = props.variant ?? "default";
-    return (_jsxs(Item, { variant: variant, className: `flex-1 py-1.5 px-2.5 ${variant === "muted" ? "!bg-border/20" : ""}`, children: [_jsxs(ItemContent, { className: "gap-0.5", children: [_jsx(ItemTitle, { children: title }), description && _jsx(ItemDescription, { className: "mt-0", children: description })] }), children && _jsx(ItemActions, { children: children })] }));
+    return (_jsxs(Item, { variant: variant, className: "flex-1 py-1.5 px-2.5", children: [_jsxs(ItemContent, { className: "gap-0.5", children: [_jsx(ItemTitle, { children: title }), description && _jsx(ItemDescription, { className: "mt-0", children: description })] }), children && _jsx(ItemActions, { children: children })] }));
 }

package/dist/react/components/text.js

@@ -1,14 +1,12 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Text, Title } from "@neynar/ui/typography";
+import { Text } from "@neynar/ui/typography";
 const SIZE_MAP = {
-    lg: { component: "title", textSize: undefined, order: 3 },
-    md: { component: "text", textSize: "base", order: undefined },
-    sm: { component: "text", textSize: "sm", order: undefined },
+    md: { component: "text", textSize: "base" },
+    sm: { component: "text", textSize: "sm" },
 };
 const WEIGHT_MAP = {
     bold: "bold",
-    medium: "medium",
     normal: "normal",
 };
 export function SnapText({ element: { props }, }) {
@@ -17,9 +15,5 @@ export function SnapText({ element: { props }, }) {
     const weight = props.weight ? String(props.weight) : undefined;
     const align = props.align ?? undefined;
     const config = SIZE_MAP[size] ?? SIZE_MAP.md;
-    const alignClass = align === "center" ? "text-center" : align === "right" ? "text-right" : "";
-    if (config.component === "title") {
-        return (_jsx(Title, { order: config.order, weight: weight ?? "bold", className: `flex-1 ${alignClass}`, children: content }));
-    }
     return (_jsx(Text, { size: config.textSize, weight: weight, align: align, className: "flex-1", children: content }));
 }

package/dist/react-native/components/snap-action-button.js

@@ -4,34 +4,28 @@ import { useSnapPalette } from "../use-snap-palette.js";
 import { useSnapTheme } from "../theme.js";
 import { ICON_MAP } from "./snap-icon.js";
 const VARIANT_MAP = {
-    default: "default",
+    primary: "primary",
     secondary: "secondary",
-    outline: "outline",
-    ghost: "ghost",
 };
 export function SnapActionButton({ element: { props }, emit, }) {
     const { accentHex } = useSnapPalette();
     const { colors } = useSnapTheme();
     const label = String(props.label ?? "Action");
-    const variant = VARIANT_MAP[String(props.variant ?? "default")] ?? "default";
+    const variant = VARIANT_MAP[String(props.variant ?? "secondary")] ?? "secondary";
     const iconName = props.icon ? String(props.icon) : undefined;
     const variantStyle = (() => {
         switch (variant) {
-            case "default":
+            case "primary":
                 return { backgroundColor: accentHex };
             case "secondary":
                 return { backgroundColor: "transparent", borderWidth: 1.5, borderColor: accentHex };
-            case "outline":
-                return { backgroundColor: "rgba(255,255,255,0.04)", borderWidth: 1, borderColor: colors.border };
-            case "ghost":
-                return { backgroundColor: "transparent" };
         }
     })();
-    const textColor = variant === "default" ? "#fff" : variant === "secondary" ? accentHex : colors.text;
-    const iconColor = variant === "default" ? "#fff" : variant === "secondary" ? accentHex : colors.text;
+    const textColor = variant === "primary" ? "#fff" : accentHex;
+    const iconColor = variant === "primary" ? "#fff" : accentHex;
     return (_jsx(View, { style: styles.outer, children: _jsxs(Pressable, { style: ({ pressed }) => [
                 styles.btn,
-                variant === "default" ? styles.btnDefault : styles.btnOther,
+                variant === "primary" ? styles.btnDefault : styles.btnOther,
                 variantStyle,
                 pressed && styles.pressed,
             ], onPress: () => {

package/dist/react-native/components/snap-badge.js

@@ -5,19 +5,21 @@ import { ICON_MAP } from "./snap-icon.js";
 export function SnapBadge({ element: { props }, }) {
     const { accentHex, hex } = useSnapPalette();
     const label = String(props.label ?? "");
+    const variant = String(props.variant ?? "default");
     const color = props.color ? String(props.color) : undefined;
     const iconName = props.icon ? String(props.icon) : undefined;
     const isAccent = !color || color === "accent";
     const resolvedColor = isAccent ? accentHex : hex(color);
+    const isFilled = variant === "default";
     const Icon = iconName ? ICON_MAP[iconName] : undefined;
     return (_jsxs(View, { style: [
             styles.badge,
-            isAccent
+            isFilled
                 ? { backgroundColor: resolvedColor, borderColor: resolvedColor }
                 : { borderColor: resolvedColor },
-        ], children: [Icon && (_jsx(Icon, { size: 12, color: isAccent ? "#fff" : resolvedColor })), _jsx(Text, { style: [
+        ], children: [Icon && (_jsx(Icon, { size: 12, color: isFilled ? "#fff" : resolvedColor })), _jsx(Text, { style: [
                     styles.label,
-                    { color: isAccent ? "#fff" : resolvedColor },
+                    { color: isFilled ? "#fff" : resolvedColor },
                 ], children: label })] }));
 }
 const styles = StyleSheet.create({

package/dist/react-native/components/snap-item.js

@@ -8,11 +8,7 @@ export function SnapItem({ element: { props }, children, }) {
         ? String(props.description)
         : undefined;
     const variant = String(props.variant ?? "default");
-    const containerVariant = variant === "outline"
-        ? { borderWidth: 1, borderColor: colors.border + "80", borderRadius: 8, padding: 10 }
-        : variant === "muted"
-            ? { backgroundColor: "rgba(255,255,255,0.04)", borderRadius: 8, padding: 10 }
-            : { paddingVertical: 8, paddingHorizontal: 10 };
+    const containerVariant = { paddingVertical: 8, paddingHorizontal: 10 };
     return (_jsxs(View, { style: [styles.container, containerVariant], children: [_jsxs(View, { style: styles.content, children: [_jsx(Text, { style: [styles.title, { color: colors.text }], children: title }), description ? (_jsx(Text, { style: [styles.description, { color: colors.textSecondary }], children: description })) : null] }), children ? (_jsx(View, { style: styles.actions, children: _jsx(View, { style: { flex: 0 }, children: children }) })) : null] }));
 }
 const styles = StyleSheet.create({

package/dist/react-native/components/snap-text.js

@@ -2,13 +2,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { StyleSheet, Text, View } from "react-native";
 import { useSnapTheme } from "../theme.js";
 const SIZE_STYLES = {
-    lg: { fontSize: 20, fontWeight: "700" },
     md: { fontSize: 16, lineHeight: 24 },
     sm: { fontSize: 13 },
 };
 const WEIGHT_MAP = {
     bold: "700",
-    medium: "500",
     normal: "400",
 };
 export function SnapText({ element: { props }, }) {

package/dist/ui/badge.d.ts

@@ -1,7 +1,12 @@
 import { z } from "zod";
+export declare const BADGE_VARIANTS: readonly ["default", "outline"];
 export declare const BADGE_MAX_LABEL_CHARS = 30;
 export declare const badgeProps: z.ZodObject<{
     label: z.ZodString;
+    variant: z.ZodOptional<z.ZodEnum<{
+        default: "default";
+        outline: "outline";
+    }>>;
     color: z.ZodOptional<z.ZodEnum<{
         gray: "gray";
         blue: "blue";

package/dist/ui/badge.js

@@ -1,9 +1,11 @@
 import { z } from "zod";
 import { PROGRESS_COLOR_VALUES } from "../colors.js";
 import { ICON_NAMES } from "./icon.js";
+export const BADGE_VARIANTS = ["default", "outline"];
 export const BADGE_MAX_LABEL_CHARS = 30;
 export const badgeProps = z.object({
     label: z.string().min(1).max(BADGE_MAX_LABEL_CHARS),
+    variant: z.enum(BADGE_VARIANTS).optional(),
     color: z.enum(PROGRESS_COLOR_VALUES).optional(),
     icon: z.enum(ICON_NAMES).optional(),
 });

package/dist/ui/button.d.ts

@@ -1,13 +1,11 @@
 import { z } from "zod";
-export declare const BUTTON_VARIANTS: readonly ["default", "secondary", "outline", "ghost"];
+export declare const BUTTON_VARIANTS: readonly ["secondary", "primary"];
 export declare const BUTTON_MAX_LABEL_CHARS = 30;
 export declare const buttonProps: 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<{
         "arrow-right": "arrow-right";

package/dist/ui/button.js

@@ -1,6 +1,6 @@
 import { z } from "zod";
 import { ICON_NAMES } from "./icon.js";
-export const BUTTON_VARIANTS = ["default", "secondary", "outline", "ghost"];
+export const BUTTON_VARIANTS = ["secondary", "primary"];
 export const BUTTON_MAX_LABEL_CHARS = 30;
 export const buttonProps = z.object({
     label: z.string().min(1).max(BUTTON_MAX_LABEL_CHARS),

package/dist/ui/catalog.d.ts

@@ -37,6 +37,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";
@@ -90,10 +94,8 @@ 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<{
                     "arrow-right": "arrow-right";
@@ -179,8 +181,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;
@@ -260,7 +260,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>;
@@ -323,11 +322,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<{

package/dist/ui/catalog.js

@@ -28,7 +28,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 +80,7 @@ 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.",
         },
     },
     actions: {

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/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/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/llms.txt

@@ -0,0 +1,172 @@
+# @farcaster/snap
+
+> TypeScript SDK for building Farcaster Snaps — interactive feed cards driven by server-returned JSON. Provides schema validation, component catalog, React + React Native renderers, and server utilities.
+
+## SnapResponse Format
+
+Every snap handler returns a `SnapResponse`:
+
+```json
+{
+  "version": "1.0",
+  "theme": { "accent": "purple" },
+  "effects": ["confetti"],
+  "ui": {
+    "root": "page",
+    "elements": {
+      "page": { "type": "stack", "props": {}, "children": ["title", "btn"] },
+      "title": { "type": "text", "props": { "content": "Hello", "weight": "bold" } },
+      "btn": {
+        "type": "button",
+        "props": { "label": "Go", "variant": "primary" },
+        "on": { "press": { "action": "submit", "params": { "target": "https://example.com/" } } }
+      }
+    }
+  }
+}
+```
+
+Top-level fields: `version` (required, `"1.0"`), `theme` (optional, `{ accent: PaletteColor }`), `effects` (optional, `["confetti"]`), `ui` (required).
+
+`ui.root` is the ID of the root element. `ui.elements` is a flat map of element ID to element definition.
+
+## Components (14 total)
+
+### Display Components
+
+**badge** — Inline label with optional icon.
+- `label` (string, required, max 30)
+- `variant` (optional): `"default"` (filled) | `"outline"` (bordered). Default: `"default"`
+- `color` (optional): PaletteColor. Default: `"accent"`
+- `icon` (optional): IconName
+
+**button** — Action trigger. Bind via `on.press`.
+- `label` (string, required, max 30)
+- `variant` (optional): `"primary"` (filled accent) | `"secondary"` (bordered). Default: `"secondary"`
+- `icon` (optional): IconName
+
+**icon** — Standalone Lucide icon.
+- `name` (IconName, required)
+- `color` (optional): PaletteColor. Default: `"accent"`
+- `size` (optional): `"sm"` (16px) | `"md"` (20px). Default: `"md"`
+
+**image** — HTTPS image with fixed aspect ratio.
+- `url` (string, required)
+- `aspect` (required): `"1:1"` | `"16:9"` | `"4:3"` | `"9:16"`
+- `alt` (string, optional)
+
+**item** — Content row with title and right-side actions slot.
+- `title` (string, required, max 100)
+- `description` (string, optional, max 160)
+- `variant` (optional): `"default"`. Default: `"default"`
+- Children render in the actions slot (right side)
+
+**progress** — Horizontal progress bar.
+- `value` (number, required, 0 to max)
+- `max` (number, required, > 0)
+- `label` (string, optional, max 60)
+
+**separator** — Visual divider.
+- `orientation` (optional): `"horizontal"` | `"vertical"`. Default: `"horizontal"`
+
+**text** — Text block.
+- `content` (string, required, max 320)
+- `size` (optional): `"md"` (body) | `"sm"` (caption). Default: `"md"`
+- `weight` (optional): `"bold"` | `"normal"`. Default: `"normal"`
+- `align` (optional): `"left"` | `"center"` | `"right"`. Default: `"left"`
+
+### Container Components
+
+**stack** — Layout container.
+- `direction` (optional): `"vertical"` | `"horizontal"`. Default: `"vertical"`
+- `gap` (optional): `"none"` | `"sm"` | `"md"` | `"lg"`. Default: `"md"`
+- `justify` (optional): `"start"` | `"center"` | `"end"` | `"between"` | `"around"`
+- Children are element IDs
+
+**item_group** — Groups item children.
+- `border` (boolean, optional)
+- `separator` (boolean, optional)
+- `gap` (optional): `"none"` | `"sm"` | `"md"` | `"lg"`
+- Children must be item elements
+
+### Field Components
+
+Field values are sent in POST `inputs[name]` when a `submit` action fires.
+
+**input** — Text or number input.
+- `name` (string, required)
+- `type` (optional): `"text"` | `"number"`. Default: `"text"`
+- `label` (string, optional, max 60)
+- `placeholder` (string, optional, max 60)
+- `defaultValue` (string, optional)
+- `maxLength` (number, optional, 1-280)
+- POST value: string
+
+**slider** — Numeric range.
+- `name` (string, required)
+- `min` (number, required)
+- `max` (number, required, >= min)
+- `step` (number, optional, > 0. Default: 1)
+- `defaultValue` (number, optional, between min and max)
+- `label` (string, optional, max 60)
+- POST value: number
+
+**switch** — Boolean toggle.
+- `name` (string, required)
+- `label` (string, optional, max 60)
+- `defaultChecked` (boolean, optional)
+- POST value: boolean
+
+**toggle_group** — Single or multi-select choice group.
+- `name` (string, required)
+- `options` (string[], required, 2-6 items, each max 30 chars)
+- `multiple` (boolean, optional)
+- `orientation` (optional): `"horizontal"` | `"vertical"`. Default: `"horizontal"`
+- `defaultValue` (string | string[], optional)
+- `variant` (optional): `"default"` | `"outline"`. Default: `"default"`
+- `label` (string, optional, max 60)
+- POST value: string (single) or string[] (multiple)
+
+## Actions (9 types)
+
+Bound to buttons via `on.press`:
+
+| Action | Params | Description |
+|--------|--------|-------------|
+| `submit` | `target` (URL) | POST to server, get next page |
+| `open_url` | `target` (URL) | Open in system browser |
+| `open_mini_app` | `target` (URL) | Open as Farcaster mini app |
+| `view_cast` | `hash` (string) | Navigate to a cast |
+| `view_profile` | `fid` (number) | Navigate to a profile |
+| `compose_cast` | `text?`, `channelKey?`, `embeds?` | Open cast composer |
+| `view_token` | `token` (CAIP-19) | View token in wallet |
+| `send_token` | `token`, `amount?`, `recipientFid?`, `recipientAddress?` | Send token flow |
+| `swap_token` | `sellToken?`, `buyToken?` | Swap token flow |
+
+## Icon Names (34)
+
+`arrow-right`, `arrow-left`, `external-link`, `chevron-right`, `check`, `x`, `alert-triangle`, `info`, `clock`, `heart`, `message-circle`, `repeat`, `share`, `user`, `users`, `star`, `trophy`, `zap`, `flame`, `gift`, `image`, `play`, `pause`, `wallet`, `coins`, `plus`, `minus`, `refresh-cw`, `bookmark`, `thumbs-up`, `thumbs-down`, `trending-up`, `trending-down`
+
+## Color Palette
+
+`gray`, `blue`, `red`, `amber`, `green`, `teal`, `purple`, `pink`
+
+Plus the special value `"accent"` which references `theme.accent`.
+
+## Package Exports
+
+```ts
+import { snapJsonRenderCatalog } from "@farcaster/snap/ui";
+import { parseRequest, verifyJFSRequestBody } from "@farcaster/snap/server";
+import { createInMemoryDataStore } from "@farcaster/snap";
+```
+
+- `@farcaster/snap` — schemas, types, validation, data store
+- `@farcaster/snap/ui` — json-render catalog, component schemas
+- `@farcaster/snap/server` — request parsing, JFS verification
+- `@farcaster/snap-hono` — Hono adapter (`registerSnapHandler`)
+- `@farcaster/snap-turso` — Turso data store middleware
+
+## Full Documentation
+
+https://docs.farcaster.xyz/snap

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farcaster/snap",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "description": "Farcaster Snaps 🫰",
   "repository": {
     "type": "git",
@@ -109,7 +109,8 @@
   },
   "files": [
     "dist",
-    "src"
+    "src",
+    "llms.txt"
   ],
   "publishConfig": {
     "access": "public"

package/src/react/components/action-button.tsx

@@ -5,11 +5,9 @@ import { cn } from "@neynar/ui/utils";
 import { useSnapAccentScopeStyle } from "../hooks/use-snap-accent";
 import { ICON_MAP } from "./icon";
 
-const VARIANT_MAP: Record<string, "default" | "outline" | "ghost" | "secondary"> = {
-  default: "default",
+const VARIANT_MAP: Record<string, "default" | "secondary"> = {
+  primary: "default",
   secondary: "secondary",
-  outline: "outline",
-  ghost: "ghost",
 };
 
 export function SnapActionButton({
@@ -20,7 +18,7 @@ export function SnapActionButton({
   emit: (name: string) => void;
 }) {
   const label = String(props.label ?? "Action");
-  const variant = VARIANT_MAP[String(props.variant ?? "default")] ?? "default";
+  const variant = VARIANT_MAP[String(props.variant ?? "secondary")] ?? "secondary";
   const iconName = props.icon ? String(props.icon) : undefined;
   const accentStyle = useSnapAccentScopeStyle();
 

package/src/react/components/badge.tsx

@@ -10,6 +10,7 @@ export function SnapBadge({
   element: { props: Record<string, unknown> };
 }) {
   const content = String(props.label ?? "");
+  const variant = String(props.variant ?? "default") as "default" | "outline";
   const color = props.color ? String(props.color) : undefined;
   const iconName = props.icon ? String(props.icon) : undefined;
   const accentStyle = useSnapAccentScopeStyle();
@@ -20,11 +21,10 @@ export function SnapBadge({
   return (
     <span style={isAccent ? accentStyle : undefined}>
       <Badge
-        variant={isAccent ? "default" : "outline"}
+        variant={variant}
         className="gap-1"
-        // TODO: fix outline badge border color in @neynar/ui — too bright in dark mode
         style={
-          !isAccent
+          variant === "outline" && !isAccent
             ? { borderColor: `var(--snap-color-${color})`, color: `var(--snap-color-${color})` }
             : undefined
         }

package/src/react/components/item.tsx

@@ -19,10 +19,10 @@ export function SnapItem({
   const title = String(props.title ?? "");
   const description = props.description ? String(props.description) : undefined;
   const variant =
-    (props.variant as "default" | "outline" | "muted") ?? "default";
+    (props.variant as "default") ?? "default";
 
   return (
-    <Item variant={variant} className={`flex-1 py-1.5 px-2.5 ${variant === "muted" ? "!bg-border/20" : ""}`}>
+    <Item variant={variant} className="flex-1 py-1.5 px-2.5">
       <ItemContent className="gap-0.5">
         <ItemTitle>{title}</ItemTitle>
         {description && <ItemDescription className="mt-0">{description}</ItemDescription>}

package/src/react/components/text.tsx

@@ -1,16 +1,14 @@
 "use client";
 
-import { Text, Title } from "@neynar/ui/typography";
+import { Text } from "@neynar/ui/typography";
 
 const SIZE_MAP = {
-  lg: { component: "title", textSize: undefined, order: 3 },
-  md: { component: "text", textSize: "base" as const, order: undefined },
-  sm: { component: "text", textSize: "sm" as const, order: undefined },
+  md: { component: "text", textSize: "base" as const },
+  sm: { component: "text", textSize: "sm" as const },
 } as const;
 
 const WEIGHT_MAP = {
   bold: "bold",
-  medium: "medium",
   normal: "normal",
 } as const;
 
@@ -20,21 +18,11 @@ export function SnapText({
   element: { props: Record<string, unknown> };
 }) {
   const content = String(props.content ?? "");
-  const size = String(props.size ?? "md") as "lg" | "md" | "sm";
-  const weight = props.weight ? String(props.weight) as "bold" | "medium" | "normal" : undefined;
+  const size = String(props.size ?? "md") as "md" | "sm";
+  const weight = props.weight ? String(props.weight) as "bold" | "normal" : undefined;
   const align = (props.align as "left" | "center" | "right") ?? undefined;
   const config = SIZE_MAP[size] ?? SIZE_MAP.md;
 
-  const alignClass = align === "center" ? "text-center" : align === "right" ? "text-right" : "";
-
-  if (config.component === "title") {
-    return (
-      <Title order={config.order} weight={weight ?? "bold"} className={`flex-1 ${alignClass}`}>
-        {content}
-      </Title>
-    );
-  }
-
   return (
     <Text size={config.textSize} weight={weight} align={align} className="flex-1">
       {content}

package/src/react-native/components/snap-action-button.tsx

@@ -6,11 +6,9 @@ import { useSnapPalette } from "../use-snap-palette";
 import { useSnapTheme } from "../theme";
 import { ICON_MAP } from "./snap-icon";
 
-const VARIANT_MAP: Record<string, "default" | "secondary" | "outline" | "ghost"> = {
-  default: "default",
+const VARIANT_MAP: Record<string, "primary" | "secondary"> = {
+  primary: "primary",
   secondary: "secondary",
-  outline: "outline",
-  ghost: "ghost",
 };
 
 export function SnapActionButton({
@@ -20,31 +18,27 @@ export function SnapActionButton({
   const { accentHex } = useSnapPalette();
   const { colors } = useSnapTheme();
   const label = String(props.label ?? "Action");
-  const variant = VARIANT_MAP[String(props.variant ?? "default")] ?? "default";
+  const variant = VARIANT_MAP[String(props.variant ?? "secondary")] ?? "secondary";
   const iconName = props.icon ? String(props.icon) : undefined;
 
   const variantStyle = (() => {
     switch (variant) {
-      case "default":
+      case "primary":
         return { backgroundColor: accentHex };
       case "secondary":
         return { backgroundColor: "transparent", borderWidth: 1.5, borderColor: accentHex };
-      case "outline":
-        return { backgroundColor: "rgba(255,255,255,0.04)", borderWidth: 1, borderColor: colors.border };
-      case "ghost":
-        return { backgroundColor: "transparent" };
     }
   })();
 
-  const textColor = variant === "default" ? "#fff" : variant === "secondary" ? accentHex : colors.text;
-  const iconColor = variant === "default" ? "#fff" : variant === "secondary" ? accentHex : colors.text;
+  const textColor = variant === "primary" ? "#fff" : accentHex;
+  const iconColor = variant === "primary" ? "#fff" : accentHex;
 
   return (
     <View style={styles.outer}>
       <Pressable
         style={({ pressed }) => [
           styles.btn,
-          variant === "default" ? styles.btnDefault : styles.btnOther,
+          variant === "primary" ? styles.btnDefault : styles.btnOther,
           variantStyle,
           pressed && styles.pressed,
         ]}

package/src/react-native/components/snap-badge.tsx

@@ -8,10 +8,12 @@ export function SnapBadge({
 }: ComponentRenderProps<Record<string, unknown>>) {
   const { accentHex, hex } = useSnapPalette();
   const label = String(props.label ?? "");
+  const variant = String(props.variant ?? "default");
   const color = props.color ? String(props.color) : undefined;
   const iconName = props.icon ? String(props.icon) : undefined;
   const isAccent = !color || color === "accent";
   const resolvedColor = isAccent ? accentHex : hex(color);
+  const isFilled = variant === "default";
 
   const Icon = iconName ? ICON_MAP[iconName] : undefined;
 
@@ -19,18 +21,18 @@ export function SnapBadge({
     <View
       style={[
         styles.badge,
-        isAccent
+        isFilled
           ? { backgroundColor: resolvedColor, borderColor: resolvedColor }
           : { borderColor: resolvedColor },
       ]}
     >
       {Icon && (
-        <Icon size={12} color={isAccent ? "#fff" : resolvedColor} />
+        <Icon size={12} color={isFilled ? "#fff" : resolvedColor} />
       )}
       <Text
         style={[
           styles.label,
-          { color: isAccent ? "#fff" : resolvedColor },
+          { color: isFilled ? "#fff" : resolvedColor },
         ]}
       >
         {label}

package/src/react-native/components/snap-item.tsx

@@ -14,12 +14,7 @@ export function SnapItem({
     : undefined;
   const variant = String(props.variant ?? "default");
 
-  const containerVariant =
-    variant === "outline"
-      ? { borderWidth: 1, borderColor: colors.border + "80", borderRadius: 8, padding: 10 }
-      : variant === "muted"
-        ? { backgroundColor: "rgba(255,255,255,0.04)", borderRadius: 8, padding: 10 }
-        : { paddingVertical: 8, paddingHorizontal: 10 };
+  const containerVariant = { paddingVertical: 8, paddingHorizontal: 10 };
 
   return (
     <View style={[styles.container, containerVariant]}>

package/src/react-native/components/snap-text.tsx

@@ -3,14 +3,12 @@ import { StyleSheet, Text, View } from "react-native";
 import { useSnapTheme } from "../theme";
 
 const SIZE_STYLES: Record<string, { fontSize: number; lineHeight?: number; fontWeight?: "400" | "500" | "600" | "700" }> = {
-  lg: { fontSize: 20, fontWeight: "700" },
   md: { fontSize: 16, lineHeight: 24 },
   sm: { fontSize: 13 },
 };
 
 const WEIGHT_MAP: Record<string, "400" | "500" | "600" | "700"> = {
   bold: "700",
-  medium: "500",
   normal: "400",
 };
 

package/src/ui/badge.ts

@@ -2,10 +2,12 @@ import { z } from "zod";
 import { PROGRESS_COLOR_VALUES } from "../colors.js";
 import { ICON_NAMES } from "./icon.js";
 
+export const BADGE_VARIANTS = ["default", "outline"] as const;
 export const BADGE_MAX_LABEL_CHARS = 30;
 
 export const badgeProps = z.object({
   label: z.string().min(1).max(BADGE_MAX_LABEL_CHARS),
+  variant: z.enum(BADGE_VARIANTS).optional(),
   color: z.enum(PROGRESS_COLOR_VALUES).optional(),
   icon: z.enum(ICON_NAMES).optional(),
 });

package/src/ui/button.ts

@@ -1,7 +1,7 @@
 import { z } from "zod";
 import { ICON_NAMES } from "./icon.js";
 
-export const BUTTON_VARIANTS = ["default", "secondary", "outline", "ghost"] as const;
+export const BUTTON_VARIANTS = ["secondary", "primary"] as const;
 export const BUTTON_MAX_LABEL_CHARS = 30;
 
 export const buttonProps = z.object({

package/src/ui/catalog.ts

@@ -31,7 +31,7 @@ export const snapJsonRenderCatalog = defineCatalog(snapJsonRenderSchema, {
     badge: {
       props: badgeProps,
       description:
-        "Inline label — variant: default | secondary | destructive | outline.",
+        "Inline label — variant: default (filled) or outline (bordered). Optional color and icon.",
     },
     button: {
       props: buttonProps,
@@ -95,7 +95,7 @@ export const snapJsonRenderCatalog = defineCatalog(snapJsonRenderSchema, {
     text: {
       props: textProps,
       description:
-        "Text block — size: lg (heading), md (body, default), sm (caption). Optional weight and align.",
+        "Text block — size: md (body, default), sm (caption). Optional weight and align.",
     },
   },
   actions: {

package/src/ui/image.ts

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

package/src/ui/item.ts

@@ -1,6 +1,6 @@
 import { z } from "zod";
 
-export const ITEM_VARIANTS = ["default", "outline", "muted"] as const;
+export const ITEM_VARIANTS = ["default"] as const;
 export const ITEM_MAX_TITLE_CHARS = 100;
 export const ITEM_MAX_DESCRIPTION_CHARS = 160;
 

package/src/ui/text.ts

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