@farcaster/snap 1.10.0 → 1.14.0

package/llms.txt

@@ -30,7 +30,7 @@ Top-level fields: `version` (required, `"1.0"`), `theme` (optional, `{ accent: P
 
 `ui.root` is the ID of the root element. `ui.elements` is a flat map of element ID to element definition.
 
-## Components (14 total)
+## Components (16 total)
 
 ### Display Components
 
@@ -75,6 +75,21 @@ Top-level fields: `version` (required, `"1.0"`), `theme` (optional, `{ accent: P
 - `weight` (optional): `"bold"` | `"normal"`. Default: `"normal"`
 - `align` (optional): `"left"` | `"center"` | `"right"`. Default: `"left"`
 
+### Data Components
+
+**bar_chart** — Horizontal bar chart with labeled bars.
+- `bars` (array, required, 1–6 items): each `{ label: string (max 40), value: number (≥0), color?: PaletteColor }`
+- `max` (number, optional, ≥0): ceiling value; defaults to max bar value
+- `color` (optional): PaletteColor. Default bar color. Default: `"accent"`
+
+**cell_grid** — Colored cell grid, optionally interactive.
+- `name` (string, optional): POST inputs key. Default: `"grid_tap"`
+- `cols` (number, required, 2–32)
+- `rows` (number, required, 2–16)
+- `cells` (array, required): sparse list of `{ row, col, color?: PaletteColor, content?: string }`
+- `gap` (optional): `"none"` (0px) | `"sm"` (1px) | `"md"` (2px) | `"lg"` (4px). Default: `"sm"`
+- `select` (optional): `"off"` | `"single"` | `"multiple"`. Default: `"off"`. Taps write to `inputs[name]`
+
 ### Container Components
 
 **stack** — Layout container.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farcaster/snap",
-  "version": "1.10.0",
+  "version": "1.14.0",
   "description": "Farcaster Snaps 🫰",
   "repository": {
     "type": "git",

package/src/constants.ts

@@ -3,3 +3,15 @@ export const SPEC_VERSION = "1.0" as const;
 export const MEDIA_TYPE = "application/vnd.farcaster.snap+json" as const;
 
 export const EFFECT_VALUES = ["confetti"] as const;
+
+// ─── Pixel grid ────────────────────────────────────────
+export const POST_GRID_TAP_KEY = "grid_tap" as const;
+export const GRID_MIN_COLS = 2;
+export const GRID_MAX_COLS = 32;
+export const GRID_MIN_ROWS = 2;
+export const GRID_MAX_ROWS = 16;
+export const GRID_GAP_VALUES = ["none", "sm", "md", "lg"] as const;
+
+// ─── Bar chart ─────────────────────────────────────────
+export const BAR_CHART_MAX_BARS = 6;
+export const BAR_CHART_LABEL_MAX_CHARS = 40;

package/src/index.ts

@@ -2,7 +2,12 @@ export type {
   Spec as SnapSpec,
   UIElement as SnapUIElement,
 } from "@json-render/core";
-export { SPEC_VERSION, MEDIA_TYPE, EFFECT_VALUES } from "./constants";
+export {
+  SPEC_VERSION,
+  MEDIA_TYPE,
+  EFFECT_VALUES,
+  POST_GRID_TAP_KEY,
+} from "./constants";
 export {
   DEFAULT_THEME_ACCENT,
   PALETTE_COLOR,
@@ -27,4 +32,3 @@ export {
   type SnapPayload,
 } from "./schemas";
 export { validateSnapResponse, type ValidationResult } from "./validator";
-export { type Middleware, useMiddleware } from "./middleware";

package/src/react/catalog-renderer.tsx

@@ -16,6 +16,8 @@ import { SnapStack } from "./components/stack";
 import { SnapSwitch } from "./components/switch";
 import { SnapText } from "./components/text";
 import { SnapToggleGroup } from "./components/toggle-group";
+import { SnapBarChart } from "./components/bar-chart";
+import { SnapCellGrid } from "./components/cell-grid";
 
 /**
  * Maps snap json-render catalog types to React components.
@@ -36,4 +38,6 @@ export const SnapCatalogView = createRenderer(snapJsonRenderCatalog, {
   switch: SnapSwitch,
   text: SnapText,
   toggle_group: SnapToggleGroup,
+  bar_chart: SnapBarChart,
+  cell_grid: SnapCellGrid,
 });

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

@@ -1,15 +1,11 @@
 "use client";
 
+import { useState } from "react";
 import { Button } from "@neynar/ui/button";
 import { cn } from "@neynar/ui/utils";
-import { useSnapAccentScopeStyle } from "../hooks/use-snap-accent";
+import { useSnapColors } from "../hooks/use-snap-colors";
 import { ICON_MAP } from "./icon";
 
-const VARIANT_MAP: Record<string, "default" | "secondary"> = {
-  primary: "default",
-  secondary: "secondary",
-};
-
 export function SnapActionButton({
   element: { props },
   emit,
@@ -18,25 +14,36 @@ export function SnapActionButton({
   emit: (name: string) => void;
 }) {
   const label = String(props.label ?? "Action");
-  const variant = VARIANT_MAP[String(props.variant ?? "secondary")] ?? "secondary";
+  const variant = String(props.variant ?? "secondary");
+  const isPrimary = variant === "primary";
   const iconName = props.icon ? String(props.icon) : undefined;
-  const accentStyle = useSnapAccentScopeStyle();
+  const colors = useSnapColors();
+  const [hovered, setHovered] = useState(false);
 
   const Icon = iconName ? ICON_MAP[iconName] : undefined;
 
+  const style = isPrimary
+    ? {
+        backgroundColor: hovered ? colors.accentHover : colors.accent,
+        color: colors.accentFg,
+        borderColor: "transparent",
+      }
+    : {
+        backgroundColor: hovered ? `color-mix(in srgb, ${colors.accent} 15%, transparent)` : colors.muted,
+        color: colors.text,
+        borderColor: "transparent",
+      };
+
   return (
-    <div className="w-full min-w-0 flex-1" style={accentStyle}>
+    <div className="w-full min-w-0 flex-1">
       <Button
         type="button"
-        variant={variant}
-        className={cn(
-          "w-full gap-2",
-          variant === "default" &&
-            "hover:!bg-[var(--snap-action-primary-hover)]",
-          variant !== "default" &&
-            "hover:!bg-[var(--snap-action-outline-hover)]",
-        )}
+        variant={isPrimary ? "default" : "secondary"}
+        className={cn("w-full gap-2")}
+        style={style}
         onClick={() => emit("press")}
+        onPointerEnter={() => setHovered(true)}
+        onPointerLeave={() => setHovered(false)}
       >
         {Icon && <Icon size={16} />}
         {label}

package/src/react/components/badge.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Badge } from "@neynar/ui/badge";
-import { useSnapAccentScopeStyle } from "../hooks/use-snap-accent";
+import { useSnapColors, pickForegroundForBg } from "../hooks/use-snap-colors";
 import { ICON_MAP } from "./icon";
 
 export function SnapBadge({
@@ -13,25 +13,22 @@ export function SnapBadge({
   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();
+  const colors = useSnapColors();
+
+  const badgeColor = colors.colorHex(color);
+  const badgeFg = variant === "default" ? pickForegroundForBg(badgeColor) : badgeColor;
 
-  const isAccent = !color || color === "accent";
   const Icon = iconName ? ICON_MAP[iconName] : undefined;
 
+  const style =
+    variant === "outline"
+      ? { borderColor: badgeColor, color: badgeColor, backgroundColor: "transparent" }
+      : { backgroundColor: badgeColor, color: badgeFg, borderColor: "transparent" };
+
   return (
-    <span style={isAccent ? accentStyle : undefined}>
-      <Badge
-        variant={variant}
-        className="gap-1"
-        style={
-          variant === "outline" && !isAccent
-            ? { borderColor: `var(--snap-color-${color})`, color: `var(--snap-color-${color})` }
-            : undefined
-        }
-      >
-        {Icon && <Icon size={12} />}
-        {content}
-      </Badge>
-    </span>
+    <Badge variant={variant} className="gap-1" style={style}>
+      {Icon && <Icon size={12} />}
+      {content}
+    </Badge>
   );
 }

package/src/react/components/bar-chart.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { useSnapColors } from "../hooks/use-snap-colors";
+
+export function SnapBarChart({
+  element: { props },
+}: {
+  element: { props: Record<string, unknown> };
+}) {
+  const colors = useSnapColors();
+  const bars = Array.isArray(props.bars) ? props.bars : [];
+  const chartColor = props.color ? String(props.color) : undefined;
+  const maxVal =
+    props.max != null
+      ? Number(props.max)
+      : Math.max(
+          ...bars.map((b: { value?: number }) => Number(b.value ?? 0)),
+          1,
+        );
+
+  function barFill(bar: { color?: string }): string {
+    if (bar.color) return colors.colorHex(bar.color);
+    return colors.colorHex(chartColor);
+  }
+
+  return (
+    <div className="flex w-full flex-col gap-2">
+      {bars.map(
+        (
+          bar: { label?: string; value?: number; color?: string },
+          i: number,
+        ) => {
+          const value = Number(bar.value ?? 0);
+          const pct = maxVal > 0 ? Math.min(100, (value / maxVal) * 100) : 0;
+          const fill = barFill(bar);
+          return (
+            <div key={i} className="flex w-full items-center gap-2">
+              <span
+                className="w-20 shrink-0 truncate text-right text-xs"
+                style={{ color: colors.textMuted }}
+              >
+                {String(bar.label ?? "")}
+              </span>
+              <div
+                className="h-2.5 flex-1 overflow-hidden rounded-full"
+                style={{ backgroundColor: colors.muted }}
+              >
+                <div
+                  className="h-full rounded-full transition-all"
+                  style={{
+                    width: `${pct}%`,
+                    minWidth: pct > 0 ? 4 : 0,
+                    backgroundColor: fill,
+                  }}
+                />
+              </div>
+              <span
+                className="w-8 shrink-0 text-xs tabular-nums"
+                style={{ color: colors.textMuted }}
+              >
+                {value}
+              </span>
+            </div>
+          );
+        },
+      )}
+    </div>
+  );
+}

package/src/react/components/cell-grid.tsx

@@ -0,0 +1,124 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { useStateStore } from "@json-render/react";
+import { cn } from "@neynar/ui/utils";
+import { POST_GRID_TAP_KEY } from "@farcaster/snap";
+import { useSnapColors } from "../hooks/use-snap-colors";
+
+export function SnapCellGrid({
+  element: { props },
+}: {
+  element: { props: Record<string, unknown> };
+}) {
+  const { get, set } = useStateStore();
+  const colors = useSnapColors();
+  const cols = Number(props.cols ?? 2);
+  const rows = Number(props.rows ?? 2);
+  const select = String(props.select ?? "off");
+  const interactive = select !== "off";
+  const isMultiple = select === "multiple";
+  const cells = Array.isArray(props.cells) ? props.cells : [];
+  const gap = String(props.gap ?? "sm");
+  const gapMap: Record<string, number> = { none: 0, sm: 1, md: 2, lg: 4 };
+  const gapPx = gapMap[gap] ?? 1;
+
+  const name = props.name ? String(props.name) : POST_GRID_TAP_KEY;
+  const tapPath = `/inputs/${name}`;
+  const tapRaw = get(tapPath);
+
+  // Parse selection — single mode: "row,col" string; multi mode: "row,col|row,col|..." string
+  const selectedSet = new Set<string>();
+  if (typeof tapRaw === "string" && tapRaw.length > 0) {
+    for (const part of tapRaw.split("|")) {
+      if (part.includes(",")) selectedSet.add(part);
+    }
+  }
+
+  const isSelected = (r: number, c: number) => selectedSet.has(`${r},${c}`);
+
+  const handleTap = (r: number, c: number) => {
+    const key = `${r},${c}`;
+    if (isMultiple) {
+      const next = new Set(selectedSet);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      set(tapPath, [...next].join("|"));
+    } else {
+      set(tapPath, key);
+    }
+  };
+
+  const cellMap = new Map<string, { color?: string; content?: string }>();
+  for (const c of cells) {
+    cellMap.set(`${Number(c.row)},${Number(c.col)}`, {
+      color: c.color as string | undefined,
+      content: c.content != null ? String(c.content) : undefined,
+    });
+  }
+
+  const cellEls: ReactNode[] = [];
+  for (let r = 0; r < rows; r++) {
+    for (let c = 0; c < cols; c++) {
+      const cell = cellMap.get(`${r},${c}`);
+      const selected = interactive && isSelected(r, c);
+      const bg = cell?.color ? colors.colorHex(cell.color) : "transparent";
+
+      cellEls.push(
+        <div
+          key={`${r}-${c}`}
+          role={interactive ? "button" : undefined}
+          tabIndex={interactive ? 0 : undefined}
+          onClick={interactive ? () => handleTap(r, c) : undefined}
+          onKeyDown={
+            interactive
+              ? (e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    handleTap(r, c);
+                  }
+                }
+              : undefined
+          }
+          className={cn(
+            "flex min-h-7 items-center justify-center rounded text-xs font-semibold",
+            interactive ? "cursor-pointer select-none" : "cursor-default",
+          )}
+          style={{
+            background: bg,
+            // Two-layer ring: 1px white/black inner + 2px accent outer
+            boxShadow: selected
+              ? `inset 0 0 0 1px ${colors.mode === "dark" ? "#000" : "#fff"}, inset 0 0 0 2px ${colors.mode === "dark" ? "#fff" : "#000"}`
+              : undefined,
+          }}
+        >
+          {cell?.content ?? ""}
+        </div>,
+      );
+    }
+  }
+
+  const selectionLabel = interactive && selectedSet.size > 0
+    ? `inputs.${name}: ${[...selectedSet].join(isMultiple ? " | " : "")}`
+    : null;
+
+  return (
+    <div>
+      <div
+        className="grid w-full rounded-lg p-1"
+        style={{
+          gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
+          gap: gapPx,
+          backgroundColor: colors.muted,
+        }}
+      >
+        {cellEls}
+      </div>
+      {selectionLabel && (
+        <div className="mt-1.5 truncate text-xs font-mono" style={{ color: colors.textMuted }}>
+          {selectionLabel}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/react/components/icon.tsx

@@ -36,7 +36,7 @@ import {
   TrendingDown,
   type LucideIcon,
 } from "lucide-react";
-import { useSnapAccentScopeStyle } from "../hooks/use-snap-accent";
+import { useSnapColors } from "../hooks/use-snap-colors";
 
 export const ICON_MAP: Record<string, LucideIcon> = {
   "arrow-right": ArrowRight,
@@ -87,29 +87,16 @@ export function SnapIcon({
   const name = String(props.name ?? "info");
   const size = SIZE_PX[String(props.size ?? "md")] ?? 20;
   const color = props.color ? String(props.color) : undefined;
-  const accentStyle = useSnapAccentScopeStyle();
+  const colors = useSnapColors();
 
   const Icon = ICON_MAP[name];
   if (!Icon) return null;
 
-  const isAccent = !color || color === "accent";
+  const iconColor = colors.colorHex(color);
 
   return (
-    <span
-      style={{
-        display: "inline-flex",
-        alignItems: "center",
-        ...(isAccent ? accentStyle : {}),
-      }}
-    >
-      <Icon
-        size={size}
-        style={
-          isAccent
-            ? { color: "var(--snap-accent, currentColor)" }
-            : { color: `var(--snap-color-${color}, currentColor)` }
-        }
-      />
+    <span style={{ display: "inline-flex", alignItems: "center" }}>
+      <Icon size={size} style={{ color: iconColor }} />
     </span>
   );
 }

package/src/react/components/input.tsx

@@ -4,32 +4,43 @@ import { useId } from "react";
 import { useStateStore } from "@json-render/react";
 import { Input } from "@neynar/ui/input";
 import { Label } from "@neynar/ui/label";
+import { useSnapColors } from "../hooks/use-snap-colors";
 
 export function SnapInput({
   element: { props },
 }: {
   element: { props: Record<string, unknown> };
 }) {
-  const id = useId();
   const { get, set } = useStateStore();
+  const colors = useSnapColors();
   const name = String(props.name ?? "input");
-  const path = `/inputs/${name}`;
+  const type = String(props.type ?? "text");
   const label = props.label ? String(props.label) : undefined;
   const placeholder = props.placeholder ? String(props.placeholder) : undefined;
-  const maxLength =
-    typeof props.maxLength === "number" ? props.maxLength : undefined;
-  const raw = get(path);
-  const value = typeof raw === "string" ? raw : "";
+  const maxLength = props.maxLength ? Number(props.maxLength) : undefined;
+  const path = `/inputs/${name}`;
+  const value = (get(path) as string) ?? (props.defaultValue != null ? String(props.defaultValue) : "");
+  const id = useId();
 
   return (
     <div className="w-full space-y-1.5">
-      {label && <Label htmlFor={id}>{label}</Label>}
+      {label && (
+        <Label htmlFor={id} style={{ color: colors.text }}>
+          {label}
+        </Label>
+      )}
       <Input
         id={id}
-        value={value}
-        onChange={(e) => set(path, e.target.value)}
+        type={type === "number" ? "number" : "text"}
         placeholder={placeholder}
         maxLength={maxLength}
+        value={value}
+        onChange={(e) => set(path, e.target.value)}
+        style={{
+          backgroundColor: colors.inputBg,
+          borderColor: colors.inputBorder,
+          color: colors.text,
+        }}
       />
     </div>
   );

package/src/react/components/item-group.tsx

@@ -2,6 +2,7 @@
 
 import { Children, type ReactNode, Fragment } from "react";
 import { cn } from "@neynar/ui/utils";
+import { useSnapColors } from "../hooks/use-snap-colors";
 
 const GAP_MAP: Record<string, string> = {
   none: "gap-0",
@@ -21,6 +22,7 @@ export function SnapItemGroup({
   const separator = Boolean(props.separator);
   const gap = GAP_MAP[String(props.gap ?? "sm")] ?? "gap-1";
   const items = Children.toArray(children);
+  const colors = useSnapColors();
 
   return (
     <div
@@ -29,11 +31,12 @@ export function SnapItemGroup({
         border && "rounded-lg border",
         gap,
       )}
+      style={border ? { borderColor: colors.border } : undefined}
     >
       {items.map((child, i) => (
         <Fragment key={i}>
           {separator && i > 0 && (
-            <div className="h-px bg-border" />
+            <div className="h-px" style={{ backgroundColor: colors.border }} />
           )}
           {child}
         </Fragment>

package/src/react/components/item.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import type { ReactNode } from "react";
 import {
   Item,
   ItemContent,
@@ -8,26 +7,30 @@ import {
   ItemDescription,
   ItemActions,
 } from "@neynar/ui/item";
+import { useSnapColors } from "../hooks/use-snap-colors";
 
 export function SnapItem({
-  element: { props },
+  element: { props, children: childIds },
   children,
 }: {
-  element: { props: Record<string, unknown> };
-  children?: ReactNode;
+  element: { props: Record<string, unknown>; children?: string[] };
+  children?: React.ReactNode;
 }) {
   const title = String(props.title ?? "");
   const description = props.description ? String(props.description) : undefined;
-  const variant =
-    (props.variant as "default") ?? "default";
+  const colors = useSnapColors();
 
   return (
-    <Item variant={variant} className="flex-1 py-1.5 px-2.5">
+    <Item className="flex-1 py-1.5 px-2.5">
       <ItemContent className="gap-0.5">
-        <ItemTitle>{title}</ItemTitle>
-        {description && <ItemDescription className="mt-0">{description}</ItemDescription>}
+        <ItemTitle style={{ color: colors.text }}>{title}</ItemTitle>
+        {description && (
+          <ItemDescription className="mt-0" style={{ color: colors.textMuted }}>
+            {description}
+          </ItemDescription>
+        )}
       </ItemContent>
-      {children && <ItemActions>{children}</ItemActions>}
+      {childIds && childIds.length > 0 && <ItemActions>{children}</ItemActions>}
     </Item>
   );
 }

package/src/react/components/progress.tsx

@@ -1,27 +1,32 @@
 "use client";
 
-import { useSnapAccentScopeStyle } from "../hooks/use-snap-accent";
+import { useSnapColors } from "../hooks/use-snap-colors";
 
 export function SnapProgress({
   element: { props },
 }: {
   element: { props: Record<string, unknown> };
 }) {
-  const accentStyle = useSnapAccentScopeStyle();
+  const colors = useSnapColors();
   const value = Number(props.value ?? 0);
   const max = Math.max(1, Number(props.max ?? 100));
   const percent = Math.min(100, Math.max(0, (value / max) * 100));
   const label = props.label ? String(props.label) : null;
 
   return (
-    <div className="flex w-full flex-1 flex-col gap-1" style={accentStyle}>
+    <div className="flex w-full flex-1 flex-col gap-1">
       {label && (
-        <span className="text-muted-foreground text-xs">{label}</span>
+        <span className="text-xs" style={{ color: colors.textMuted }}>
+          {label}
+        </span>
       )}
-      <div className="bg-muted h-2.5 w-full overflow-hidden rounded-full">
+      <div
+        className="h-2.5 w-full overflow-hidden rounded-full"
+        style={{ backgroundColor: colors.muted }}
+      >
         <div
-          className="h-full rounded-full bg-primary transition-all"
-          style={{ width: `${percent}%` }}
+          className="h-full rounded-full transition-all"
+          style={{ width: `${percent}%`, backgroundColor: colors.accent }}
         />
       </div>
     </div>

package/src/react/components/separator.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Separator } from "@neynar/ui/separator";
+import { useSnapColors } from "../hooks/use-snap-colors";
 
 export function SnapSeparator({
   element: { props },
@@ -9,6 +10,12 @@ export function SnapSeparator({
 }) {
   const orientation =
     (props.orientation as "horizontal" | "vertical") ?? "horizontal";
+  const colors = useSnapColors();
 
-  return <Separator orientation={orientation} />;
+  return (
+    <Separator
+      orientation={orientation}
+      style={{ backgroundColor: colors.border }}
+    />
+  );
 }