@farcaster/snap 1.5.1 → 2.0.0

package/dist/react/components/separator.d.ts

@@ -0,0 +1,5 @@
+export declare function SnapSeparator({ element: { props }, }: {
+    element: {
+        props: Record<string, unknown>;
+    };
+}): import("react/jsx-runtime").JSX.Element;

package/dist/react/components/separator.js

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Separator } from "@neynar/ui/separator";
+export function SnapSeparator({ element: { props }, }) {
+    const orientation = props.orientation ?? "horizontal";
+    return _jsx(Separator, { orientation: orientation });
+}

package/dist/react/components/slider.d.ts

@@ -0,0 +1,5 @@
+export declare function SnapSlider({ element: { props }, }: {
+    element: {
+        props: Record<string, unknown>;
+    };
+}): import("react/jsx-runtime").JSX.Element;

package/dist/react/components/slider.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useStateStore } from "@json-render/react";
+import { Label } from "@neynar/ui/label";
+import { useSnapAccentScopeStyle } from "../hooks/use-snap-accent.js";
+// TODO: switch back to @neynar/ui/slider once Base UI fixes the inline
+// <script> tag that triggers a React console warning on client render.
+export function SnapSlider({ element: { props }, }) {
+    const { get, set } = useStateStore();
+    const accentStyle = useSnapAccentScopeStyle();
+    const name = String(props.name ?? "slider");
+    const path = `/inputs/${name}`;
+    const label = props.label ? String(props.label) : undefined;
+    const min = Number(props.min ?? 0);
+    const max = Number(props.max ?? 100);
+    const step = props.step != null ? Number(props.step) : 1;
+    const fallback = props.defaultValue != null ? Number(props.defaultValue) : (min + max) / 2;
+    const raw = get(path);
+    const value = raw === undefined || raw === null ? fallback : Number(raw);
+    return (_jsxs("div", { className: "flex w-full flex-col gap-1.5", style: accentStyle, children: [label && _jsx(Label, { children: label }), _jsx("input", { type: "range", min: min, max: max, step: step, value: value, onChange: (e) => set(path, Number(e.target.value)), className: "w-full h-2.5 rounded-full appearance-none bg-muted cursor-pointer", style: { accentColor: "var(--primary)" } })] }));
+}

package/dist/react/components/stack.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+export declare function SnapStack({ element: { props }, children, }: {
+    element: {
+        props: Record<string, unknown>;
+    };
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/react/components/stack.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@neynar/ui/utils";
+const VGAP = {
+    none: "gap-0",
+    sm: "gap-2",
+    md: "gap-4",
+    lg: "gap-6",
+};
+const HGAP = {
+    none: "gap-0",
+    sm: "gap-1",
+    md: "gap-2",
+    lg: "gap-3",
+};
+const JUSTIFY = {
+    start: "justify-start",
+    center: "justify-center",
+    end: "justify-end",
+    between: "justify-between",
+    around: "justify-around",
+};
+export function SnapStack({ element: { props }, children, }) {
+    const direction = String(props.direction ?? "vertical");
+    const gapKey = String(props.gap ?? "md");
+    const isHorizontal = direction === "horizontal";
+    const gap = isHorizontal
+        ? (HGAP[gapKey] ?? "gap-2")
+        : (VGAP[gapKey] ?? "gap-4");
+    const justify = props.justify ? JUSTIFY[String(props.justify)] : undefined;
+    return (_jsx("div", { className: cn("flex w-full", isHorizontal ? "flex-row items-center flex-wrap" : "flex-col", gap, justify), children: children }));
+}

package/dist/react/components/switch.d.ts

@@ -0,0 +1,5 @@
+export declare function SnapSwitch({ element: { props }, }: {
+    element: {
+        props: Record<string, unknown>;
+    };
+}): import("react/jsx-runtime").JSX.Element;

package/dist/react/components/switch.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { useStateStore } from "@json-render/react";
+import { Label } from "@neynar/ui/label";
+import { Switch } from "@neynar/ui/switch";
+import { useColorMode } from "@neynar/ui/color-mode";
+import { cn } from "@neynar/ui/utils";
+import { useSnapAccentScopeStyle } from "../hooks/use-snap-accent.js";
+export function SnapSwitch({ element: { props }, }) {
+    const id = useId();
+    const { get, set } = useStateStore();
+    const { mode } = useColorMode();
+    const accentStyle = useSnapAccentScopeStyle();
+    const name = String(props.name ?? "switch");
+    const path = `/inputs/${name}`;
+    const label = props.label ? String(props.label) : undefined;
+    const fallback = Boolean(props.defaultChecked ?? false);
+    const raw = get(path);
+    const checked = raw === undefined || raw === null ? fallback : Boolean(raw);
+    return (_jsxs("div", { className: "flex items-center justify-between gap-3", children: [label && (_jsx(Label, { htmlFor: id, className: "text-foreground font-normal", children: label })), _jsx(Switch, { id: id, checked: checked, onCheckedChange: (v) => set(path, v), style: accentStyle, className: cn(mode === "light" &&
+                    "data-unchecked:!bg-border data-unchecked:!border-(--input-border)") })] }));
+}

package/dist/react/components/text.d.ts

@@ -0,0 +1,5 @@
+export declare function SnapText({ element: { props }, }: {
+    element: {
+        props: Record<string, unknown>;
+    };
+}): import("react/jsx-runtime").JSX.Element;

package/dist/react/components/text.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text, Title } 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 },
+};
+const WEIGHT_MAP = {
+    bold: "bold",
+    medium: "medium",
+    normal: "normal",
+};
+export function SnapText({ element: { props }, }) {
+    const content = String(props.content ?? "");
+    const size = String(props.size ?? "md");
+    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/components/toggle-group.d.ts

@@ -0,0 +1,5 @@
+export declare function SnapToggleGroup({ element: { props }, }: {
+    element: {
+        props: Record<string, unknown>;
+    };
+}): import("react/jsx-runtime").JSX.Element;

package/dist/react/components/toggle-group.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useStateStore } from "@json-render/react";
+import { Label } from "@neynar/ui/label";
+import { cn } from "@neynar/ui/utils";
+import { useSnapAccentScopeStyle } from "../hooks/use-snap-accent.js";
+export function SnapToggleGroup({ element: { props }, }) {
+    const { get, set } = useStateStore();
+    const accentStyle = useSnapAccentScopeStyle();
+    const name = String(props.name ?? "toggle_group");
+    const path = `/inputs/${name}`;
+    const label = props.label ? String(props.label) : undefined;
+    const isMultiple = Boolean(props.multiple);
+    const orientation = String(props.orientation ?? "horizontal");
+    const options = Array.isArray(props.options)
+        ? props.options
+        : [];
+    const raw = get(path);
+    const defaultValue = props.defaultValue;
+    const selected = (() => {
+        if (raw !== undefined && raw !== null) {
+            return isMultiple
+                ? Array.isArray(raw) ? raw : []
+                : typeof raw === "string" ? [raw] : [];
+        }
+        if (defaultValue !== undefined) {
+            return Array.isArray(defaultValue) ? defaultValue : [String(defaultValue)];
+        }
+        return [];
+    })();
+    const toggle = (opt) => {
+        if (isMultiple) {
+            const current = Array.isArray(raw) ? raw : [];
+            if (current.includes(opt)) {
+                set(path, current.filter((v) => v !== opt));
+            }
+            else {
+                set(path, [...current, opt]);
+            }
+        }
+        else {
+            set(path, opt);
+        }
+    };
+    const isVertical = orientation === "vertical";
+    return (_jsxs("div", { className: "w-full space-y-1.5", style: accentStyle, children: [label && _jsx(Label, { children: label }), _jsx("div", { className: cn("flex gap-1 rounded-lg bg-border/20 p-1", isVertical ? "flex-col" : "flex-row"), children: options.map((opt) => {
+                    const isSelected = selected.includes(opt);
+                    return (_jsx("button", { type: "button", onClick: () => toggle(opt), className: cn("rounded-md px-3 py-2 text-sm font-medium transition-colors", isVertical ? "w-full" : "flex-1", isSelected
+                            ? "bg-primary text-primary-foreground"
+                            : "text-foreground hover:bg-border/30"), children: opt }, opt));
+                }) })] }));
+}

package/dist/react/hooks/use-snap-accent.d.ts

@@ -0,0 +1,13 @@
+import { type CSSProperties } from "react";
+import type { PaletteColor } from "@farcaster/snap";
+/**
+ * CSS variables so Neynar controls (`bg-primary`, `data-checked:bg-primary`, etc.)
+ * use the snap `theme.accent` inside json-render catalog components.
+ */
+export declare function useSnapAccentScopeStyle(): CSSProperties;
+/** Active snap palette table for the current docs shell theme. */
+export declare function useSnapPalette(): {
+    hex: (name: string) => string;
+    map: Record<PaletteColor, string>;
+    theme: "light" | "dark";
+};

package/dist/react/hooks/use-snap-accent.js

@@ -0,0 +1,32 @@
+"use client";
+import { useMemo } from "react";
+import { useStateStore } from "@json-render/react";
+import { PALETTE_DARK_HEX, PALETTE_LIGHT_HEX } from "@farcaster/snap";
+import { useColorMode } from "@neynar/ui/color-mode";
+import { resolveSnapPaletteHex } from "../lib/resolve-palette-hex.js";
+import { snapPreviewPrimaryCssProperties } from "../lib/preview-primary-css.js";
+import { useSnapPreviewPageAccent } from "../accent-context.js";
+/**
+ * CSS variables so Neynar controls (`bg-primary`, `data-checked:bg-primary`, etc.)
+ * use the snap `theme.accent` inside json-render catalog components.
+ */
+export function useSnapAccentScopeStyle() {
+    const { get } = useStateStore();
+    const { mode } = useColorMode();
+    const pageAccent = useSnapPreviewPageAccent();
+    const fromState = get("/theme/accent");
+    const accentRaw = (typeof pageAccent === "string" && pageAccent.length > 0
+        ? pageAccent
+        : fromState) ?? undefined;
+    const accentName = typeof accentRaw === "string" && accentRaw.length > 0
+        ? accentRaw
+        : "purple";
+    return useMemo(() => snapPreviewPrimaryCssProperties(accentName, mode), [accentName, mode]);
+}
+/** Active snap palette table for the current docs shell theme. */
+export function useSnapPalette() {
+    const { mode } = useColorMode();
+    const map = mode === "dark" ? PALETTE_DARK_HEX : PALETTE_LIGHT_HEX;
+    const hex = (name) => resolveSnapPaletteHex(name, mode);
+    return { hex, map, theme: mode };
+}

package/dist/react/index.d.ts

@@ -0,0 +1,47 @@
+import type { Spec } from "@json-render/core";
+export type JsonValue = string | number | boolean | null | JsonValue[] | {
+    [key: string]: JsonValue;
+};
+export type SnapPage = {
+    version: string;
+    theme?: {
+        accent?: string;
+    };
+    effects?: string[];
+    ui: Spec;
+};
+export type SnapActionHandlers = {
+    submit: (target: string, inputs: Record<string, JsonValue>) => void;
+    open_url: (target: string) => void;
+    open_mini_app: (target: string) => void;
+    view_cast: (params: {
+        hash: string;
+    }) => void;
+    view_profile: (params: {
+        fid: number;
+    }) => void;
+    compose_cast: (params: {
+        text?: string;
+        channelKey?: string;
+        embeds?: string[];
+    }) => void;
+    view_token: (params: {
+        token: string;
+    }) => void;
+    send_token: (params: {
+        token: string;
+        amount?: string;
+        recipientFid?: number;
+        recipientAddress?: string;
+    }) => void;
+    swap_token: (params: {
+        sellToken?: string;
+        buyToken?: string;
+    }) => void;
+};
+export declare function SnapView({ snap, handlers, loading, appearance, }: {
+    snap: SnapPage;
+    handlers: SnapActionHandlers;
+    loading?: boolean;
+    appearance?: "light" | "dark";
+}): import("react/jsx-runtime").JSX.Element;

package/dist/react/index.js

@@ -0,0 +1,191 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { snapJsonRenderCatalog } from "../ui/index.js";
+import { SnapCatalogView } from "./catalog-renderer.js";
+import { SnapPreviewAccentProvider } from "./accent-context.js";
+import { resolveSnapPaletteHex } from "./lib/resolve-palette-hex.js";
+import { snapPreviewPrimaryCssProperties } from "./lib/preview-primary-css.js";
+import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
+// ─── Internal helpers ──────────────────────────────────
+function applyStatePaths(model, changes) {
+    const entries = Array.isArray(changes)
+        ? changes.map((c) => [c.path, c.value])
+        : Object.entries(changes);
+    for (const [path, value] of entries) {
+        const trimmed = path.startsWith("/") ? path : `/${path}`;
+        const parts = trimmed.split("/").filter(Boolean);
+        if (parts.length < 2)
+            continue;
+        const [top, ...rest] = parts;
+        if (top === "inputs") {
+            if (typeof model.inputs !== "object" || model.inputs === null) {
+                model.inputs = {};
+            }
+            const inputs = model.inputs;
+            if (rest.length === 1) {
+                inputs[rest[0]] = value;
+            }
+            continue;
+        }
+        if (top === "theme") {
+            if (typeof model.theme !== "object" || model.theme === null) {
+                model.theme = {};
+            }
+            const theme = model.theme;
+            if (rest.length === 1) {
+                theme[rest[0]] = value;
+            }
+        }
+    }
+}
+const CONFETTI_COLORS = [
+    "#8B5CF6",
+    "#EC4899",
+    "#3B82F6",
+    "#10B981",
+    "#F59E0B",
+    "#EF4444",
+    "#06B6D4",
+];
+function ConfettiOverlay() {
+    const pieces = useMemo(() => Array.from({ length: 80 }, (_, i) => ({
+        id: i,
+        left: Math.random() * 100,
+        delay: Math.random() * 1.2,
+        duration: 2.5 + Math.random() * 2,
+        color: CONFETTI_COLORS[Math.floor(Math.random() * CONFETTI_COLORS.length)],
+        size: 6 + Math.random() * 8,
+        rotation: Math.random() * 360,
+    })), []);
+    return (_jsxs("div", { style: {
+            position: "absolute",
+            inset: 0,
+            overflow: "hidden",
+            pointerEvents: "none",
+            zIndex: 20,
+        }, children: [pieces.map(({ id, left, delay, duration, color, size, rotation }) => (_jsx("div", { style: {
+                    position: "absolute",
+                    left: `${left}%`,
+                    top: -20,
+                    width: size,
+                    height: size * 0.6,
+                    backgroundColor: color,
+                    borderRadius: 2,
+                    transform: `rotate(${rotation}deg)`,
+                    animation: `confettiFall ${duration}s ease-in ${delay}s forwards`,
+                } }, id))), _jsx("style", { children: `@keyframes confettiFall{0%{top:-20px;opacity:1;transform:rotate(0deg) translateX(0)}50%{opacity:1}100%{top:110%;opacity:0;transform:rotate(720deg) translateX(${Math.random() > 0.5 ? "" : "-"}40px)}}` })] }));
+}
+const PALETTE = [
+    "gray",
+    "blue",
+    "red",
+    "amber",
+    "green",
+    "teal",
+    "purple",
+    "pink",
+];
+// ─── SnapView ──────────────────────────────────────────
+export function SnapView({ snap, handlers, loading = false, appearance = "dark", }) {
+    const spec = snap.ui;
+    const initialState = useMemo(() => spec.state ?? { inputs: {} }, [spec]);
+    const stateRef = useRef(initialState);
+    useEffect(() => {
+        stateRef.current = {
+            inputs: {
+                ...(initialState.inputs ?? {}),
+            },
+            theme: {
+                ...(initialState.theme ?? {}),
+            },
+        };
+    }, [initialState]);
+    useEffect(() => {
+        const result = snapJsonRenderCatalog.validate(spec);
+        if (!result.success) {
+            // eslint-disable-next-line no-console
+            console.warn("[SnapView] catalog validation issues:", result.error);
+        }
+    }, [spec]);
+    const [pageKey, setPageKey] = useState(0);
+    useEffect(() => {
+        setPageKey((k) => k + 1);
+    }, [spec]);
+    const showConfetti = snap.effects?.includes("confetti");
+    const previewSurfaceStyle = useMemo(() => {
+        const vars = {};
+        for (const c of PALETTE)
+            vars[`--snap-color-${c}`] = resolveSnapPaletteHex(c, appearance);
+        return {
+            ...snapPreviewPrimaryCssProperties(snap.theme?.accent ?? "purple", appearance),
+            ...vars,
+        };
+    }, [snap.theme?.accent, appearance]);
+    const handleAction = useCallback((name, params) => {
+        const inputs = (stateRef.current.inputs ?? {});
+        const p = (params ?? {});
+        switch (name) {
+            case "submit":
+                handlers.submit(String(p.target ?? ""), inputs);
+                break;
+            case "open_url":
+                handlers.open_url(String(p.target ?? ""));
+                break;
+            case "open_mini_app":
+                handlers.open_mini_app(String(p.target ?? ""));
+                break;
+            case "view_cast":
+                handlers.view_cast({ hash: String(p.hash ?? "") });
+                break;
+            case "view_profile":
+                handlers.view_profile({ fid: Number(p.fid ?? 0) });
+                break;
+            case "compose_cast":
+                handlers.compose_cast({
+                    text: p.text ? String(p.text) : undefined,
+                    channelKey: p.channelKey ? String(p.channelKey) : undefined,
+                    embeds: Array.isArray(p.embeds)
+                        ? p.embeds
+                        : undefined,
+                });
+                break;
+            case "view_token":
+                handlers.view_token({ token: String(p.token ?? "") });
+                break;
+            case "send_token":
+                handlers.send_token({
+                    token: String(p.token ?? ""),
+                    amount: p.amount ? String(p.amount) : undefined,
+                    recipientFid: p.recipientFid
+                        ? Number(p.recipientFid)
+                        : undefined,
+                    recipientAddress: p.recipientAddress
+                        ? String(p.recipientAddress)
+                        : undefined,
+                });
+                break;
+            case "swap_token":
+                handlers.swap_token({
+                    sellToken: p.sellToken ? String(p.sellToken) : undefined,
+                    buyToken: p.buyToken ? String(p.buyToken) : undefined,
+                });
+                break;
+            default:
+                break;
+        }
+    }, [handlers]);
+    return (_jsxs("div", { style: { position: "relative", width: "100%" }, children: [showConfetti && _jsx(ConfettiOverlay, {}), loading && (_jsx("div", { style: {
+                    position: "absolute",
+                    inset: 0,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    zIndex: 10,
+                    fontSize: 14,
+                    color: "var(--text-muted)",
+                    background: "var(--bg-primary, rgba(0,0,0,0.6))",
+                    backdropFilter: "blur(4px)",
+                }, children: "Loading..." })), _jsx("div", { style: previewSurfaceStyle, children: _jsx(SnapPreviewAccentProvider, { pageAccent: snap.theme?.accent, children: _jsx(SnapCatalogView, { spec: spec, state: initialState, loading: false, onStateChange: (changes) => {
+                            applyStatePaths(stateRef.current, changes);
+                        }, onAction: handleAction }, pageKey) }) })] }));
+}

package/dist/react/lib/preview-primary-css.d.ts

@@ -0,0 +1,6 @@
+import type { CSSProperties } from "react";
+/**
+ * Overrides Neynar / Tailwind theme tokens so `bg-primary`, `border-primary`, etc.
+ * use the snap spec accent inside the preview subtree.
+ */
+export declare function snapPreviewPrimaryCssProperties(accentName: string, appearance: "light" | "dark"): CSSProperties;

package/dist/react/lib/preview-primary-css.js

@@ -0,0 +1,43 @@
+import { resolveSnapPaletteHex } from "./resolve-palette-hex.js";
+/** Readable on-primary text for hex backgrounds (e.g. amber vs purple). */
+function pickForegroundForBg(hex) {
+    const h = hex.replace(/^#/, "");
+    if (h.length !== 6)
+        return "#ffffff";
+    const r = Number.parseInt(h.slice(0, 2), 16);
+    const g = Number.parseInt(h.slice(2, 4), 16);
+    const b = Number.parseInt(h.slice(4, 6), 16);
+    const yiq = (r * 299 + g * 587 + b * 114) / 1000;
+    return yiq >= 180 ? "#0a0a0a" : "#ffffff";
+}
+/** Match `globals.css` `--snap-card-bg` so hover tints sit on the preview card. */
+const SNAP_CARD_BG = {
+    light: "#ffffff",
+    dark: "#23262f",
+};
+function snapActionPrimaryHover(hex, appearance) {
+    return appearance === "light"
+        ? `color-mix(in srgb, ${hex} 82%, #000000)`
+        : `color-mix(in srgb, ${hex} 78%, #ffffff)`;
+}
+function snapActionOutlineHover(hex, appearance) {
+    const card = SNAP_CARD_BG[appearance];
+    return `color-mix(in srgb, ${hex} 14%, ${card})`;
+}
+/**
+ * Overrides Neynar / Tailwind theme tokens so `bg-primary`, `border-primary`, etc.
+ * use the snap spec accent inside the preview subtree.
+ */
+export function snapPreviewPrimaryCssProperties(accentName, appearance) {
+    const hex = resolveSnapPaletteHex(accentName, appearance);
+    const fg = pickForegroundForBg(hex);
+    return {
+        "--primary": hex,
+        "--primary-foreground": fg,
+        "--ring": hex,
+        "--color-primary": hex,
+        "--color-primary-foreground": fg,
+        "--snap-action-primary-hover": snapActionPrimaryHover(hex, appearance),
+        "--snap-action-outline-hover": snapActionOutlineHover(hex, appearance),
+    };
+}

package/dist/react/lib/resolve-palette-hex.d.ts

@@ -0,0 +1,2 @@
+/** Resolve a snap palette color name to hex for the current shell appearance. */
+export declare function resolveSnapPaletteHex(name: string, appearance: "light" | "dark"): string;

package/dist/react/lib/resolve-palette-hex.js

@@ -0,0 +1,10 @@
+import { PALETTE_DARK_HEX, PALETTE_LIGHT_HEX, } from "@farcaster/snap";
+/** Resolve a snap palette color name to hex for the current shell appearance. */
+export function resolveSnapPaletteHex(name, appearance) {
+    const map = appearance === "dark" ? PALETTE_DARK_HEX : PALETTE_LIGHT_HEX;
+    if (Object.hasOwn(map, name) &&
+        typeof map[name] === "string") {
+        return map[name];
+    }
+    return map.purple;
+}