@farcaster/snap 1.10.0 → 1.14.0

package/src/react-native/components/snap-toggle-group.tsx

@@ -1,14 +1,12 @@
 import type { ComponentRenderProps } from "@json-render/react-native";
 import { useStateStore } from "@json-render/react-native";
 import { Pressable, StyleSheet, Text, View } from "react-native";
-import { useSnapPalette } from "../use-snap-palette";
 import { useSnapTheme } from "../theme";
 
 export function SnapToggleGroup({
   element: { props },
 }: ComponentRenderProps<Record<string, unknown>>) {
   const { get, set } = useStateStore();
-  const { accentHex } = useSnapPalette();
   const { colors } = useSnapTheme();
   const name = String(props.name ?? "toggle_group");
   const path = `/inputs/${name}`;
@@ -59,7 +57,7 @@ export function SnapToggleGroup({
       <View
         style={[
           styles.group,
-          { backgroundColor: colors.border + "33" },
+          { backgroundColor: colors.muted },
           isVertical ? styles.groupVertical : styles.groupHorizontal,
         ]}
       >
@@ -70,8 +68,13 @@ export function SnapToggleGroup({
               key={index}
               style={({ pressed }) => [
                 styles.option,
-                isSelected && { backgroundColor: accentHex },
-                pressed && styles.pressed,
+                {
+                  backgroundColor: isSelected
+                    ? colors.mutedSelected
+                    : pressed
+                      ? colors.mutedHover
+                      : colors.mutedSubtle,
+                },
                 !isVertical && styles.optionHorizontal,
               ]}
               onPress={() => handlePress(opt)}
@@ -80,7 +83,6 @@ export function SnapToggleGroup({
                 style={[
                   styles.optionText,
                   { color: colors.text },
-                  isSelected && styles.optionTextSelected,
                 ]}
               >
                 {opt}
@@ -117,12 +119,8 @@ const styles = StyleSheet.create({
   optionHorizontal: {
     flex: 1,
   },
-  pressed: { opacity: 0.88 },
   optionText: {
     fontSize: 13,
     fontWeight: "500",
   },
-  optionTextSelected: {
-    color: "#fff",
-  },
 });

package/src/react-native/theme.tsx

@@ -10,6 +10,12 @@ export type SnapNativeColors = {
   border: string;
   inputBg: string;
   muted: string;
+  /** Subtle tint for toggle button resting state */
+  mutedSubtle: string;
+  /** Slightly stronger tint for hover/press state */
+  mutedHover: string;
+  /** Stronger tint for selected state (toggle group) */
+  mutedSelected: string;
 };
 
 const DEFAULT_LIGHT: SnapNativeColors = {
@@ -17,9 +23,12 @@ const DEFAULT_LIGHT: SnapNativeColors = {
   surface: "#ffffff",
   text: "#111111",
   textSecondary: "#6b7280",
-  border: "#d1d5db",
-  inputBg: "#ffffff",
-  muted: "#f9fafb",
+  border: "#E5E7EB",
+  inputBg: "rgba(0,0,0,0.12)",
+  muted: "rgba(0,0,0,0.12)",
+  mutedSubtle: "rgba(0,0,0,0.06)",
+  mutedHover: "rgba(0,0,0,0.10)",
+  mutedSelected: "rgba(0,0,0,0.18)",
 };
 
 const DEFAULT_DARK: SnapNativeColors = {
@@ -27,9 +36,12 @@ const DEFAULT_DARK: SnapNativeColors = {
   surface: "#1a1d24",
   text: "#fafafa",
   textSecondary: "#a1a1aa",
-  border: "#374151",
-  inputBg: "#1a1d24",
-  muted: "#27272a",
+  border: "#2D2D44",
+  inputBg: "rgba(255,255,255,0.03)",
+  muted: "rgba(255,255,255,0.03)",
+  mutedSubtle: "rgba(255,255,255,0.02)",
+  mutedHover: "rgba(255,255,255,0.04)",
+  mutedSelected: "rgba(255,255,255,0.10)",
 };
 
 // ─── Context ──────────────────────────────────────────

package/src/ui/bar-chart.ts

@@ -0,0 +1,38 @@
+import { z } from "zod";
+import { BAR_CHART_COLOR_VALUES, PALETTE_COLOR_VALUES } from "../colors.js";
+import {
+  BAR_CHART_MAX_BARS,
+  BAR_CHART_LABEL_MAX_CHARS,
+} from "../constants.js";
+
+export const barChartProps = z
+  .object({
+    bars: z
+      .array(
+        z.object({
+          label: z.string().min(1).max(BAR_CHART_LABEL_MAX_CHARS),
+          value: z.number().nonnegative(),
+          color: z.enum(PALETTE_COLOR_VALUES).optional(),
+        }),
+      )
+      .min(1)
+      .max(BAR_CHART_MAX_BARS),
+    max: z.number().nonnegative().optional(),
+    color: z.enum(BAR_CHART_COLOR_VALUES).optional(),
+  })
+  .superRefine((val, ctx) => {
+    if (val.max !== undefined) {
+      for (let i = 0; i < val.bars.length; i++) {
+        const bar = val.bars[i]!;
+        if (bar.value > val.max) {
+          ctx.addIssue({
+            code: "custom",
+            message: `bar value (${bar.value}) exceeds chart max (${val.max})`,
+            path: ["bars", i, "value"],
+          });
+        }
+      }
+    }
+  });
+
+export type BarChartProps = z.infer<typeof barChartProps>;

package/src/ui/catalog.ts

@@ -15,6 +15,8 @@ import { separatorProps } from "./separator.js";
 import { sliderProps } from "./slider.js";
 import { stackProps } from "./stack.js";
 import { textProps } from "./text.js";
+import { barChartProps } from "./bar-chart.js";
+import { cellGridProps } from "./cell-grid.js";
 
 const snapClientParams = z.object({
   client_action: z.record(z.string(), z.unknown()),
@@ -97,6 +99,16 @@ export const snapJsonRenderCatalog = defineCatalog(snapJsonRenderSchema, {
       description:
         "Text block — size: md (body, default), sm (caption). Optional weight and align.",
     },
+    bar_chart: {
+      props: barChartProps,
+      description:
+        "Horizontal bar chart — 1–6 bars with label, value, and optional per-bar color. Optional max and default color.",
+    },
+    cell_grid: {
+      props: cellGridProps,
+      description:
+        "Cell grid — sparse colored cells on a rows×cols grid. Optional gap and selection mode (taps write to inputs[name]).",
+    },
   },
   actions: {
     submit: {

package/src/ui/cell-grid.ts

@@ -0,0 +1,48 @@
+import { z } from "zod";
+import { PALETTE_COLOR_VALUES } from "../colors.js";
+import {
+  GRID_MIN_COLS,
+  GRID_MAX_COLS,
+  GRID_MIN_ROWS,
+  GRID_MAX_ROWS,
+  GRID_GAP_VALUES,
+} from "../constants.js";
+
+const cellGridCellSchema = z.object({
+  row: z.number().int().nonnegative(),
+  col: z.number().int().nonnegative(),
+  color: z.enum(PALETTE_COLOR_VALUES).optional(),
+  content: z.string().optional(),
+});
+
+export const cellGridProps = z
+  .object({
+    name: z.string().min(1).optional(),
+    cols: z.number().int().min(GRID_MIN_COLS).max(GRID_MAX_COLS),
+    rows: z.number().int().min(GRID_MIN_ROWS).max(GRID_MAX_ROWS),
+    cells: z.array(cellGridCellSchema),
+    gap: z.enum(GRID_GAP_VALUES).optional(),
+    select: z.enum(["off", "single", "multiple"]).optional(),
+  })
+  .superRefine((val, ctx) => {
+    const { cols, rows, cells } = val;
+    for (let i = 0; i < cells.length; i++) {
+      const c = cells[i]!;
+      if (c.row < 0 || c.row >= rows) {
+        ctx.addIssue({
+          code: "custom",
+          message: `cell_grid cell row ${c.row} out of bounds (0–${rows - 1})`,
+          path: ["cells", i, "row"],
+        });
+      }
+      if (c.col < 0 || c.col >= cols) {
+        ctx.addIssue({
+          code: "custom",
+          message: `cell_grid cell col ${c.col} out of bounds (0–${cols - 1})`,
+          path: ["cells", i, "col"],
+        });
+      }
+    }
+  });
+
+export type CellGridProps = z.infer<typeof cellGridProps>;

package/src/ui/index.ts

@@ -42,3 +42,9 @@ export type { StackProps } from "./stack.js";
 
 export { textProps } from "./text.js";
 export type { TextProps } from "./text.js";
+
+export { barChartProps } from "./bar-chart.js";
+export type { BarChartProps } from "./bar-chart.js";
+
+export { cellGridProps } from "./cell-grid.js";
+export type { CellGridProps } from "./cell-grid.js";

package/dist/middleware.d.ts

@@ -1,3 +0,0 @@
-import { SnapFunction } from "./schemas.js";
-export type Middleware = (fn: SnapFunction) => SnapFunction;
-export declare function useMiddleware(fn: SnapFunction, middleware: Middleware[]): SnapFunction;

package/dist/middleware.js

@@ -1,3 +0,0 @@
-export function useMiddleware(fn, middleware) {
-    return middleware.reduce((acc, middleware) => middleware(acc), fn);
-}

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

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

@@ -1,32 +0,0 @@
-"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/src/middleware.ts

@@ -1,7 +0,0 @@
-import { SnapFunction } from "./schemas";
-
-export type Middleware = (fn: SnapFunction) => SnapFunction;
-
-export function useMiddleware(fn: SnapFunction, middleware: Middleware[]) {
-  return middleware.reduce((acc, middleware) => middleware(acc), fn);
-}

package/src/react/hooks/use-snap-accent.ts

@@ -1,45 +0,0 @@
-"use client";
-
-import { useMemo, type CSSProperties } from "react";
-import { useStateStore } from "@json-render/react";
-import type { PaletteColor } from "@farcaster/snap";
-import { PALETTE_DARK_HEX, PALETTE_LIGHT_HEX } from "@farcaster/snap";
-import { useColorMode } from "@neynar/ui/color-mode";
-import { resolveSnapPaletteHex } from "../lib/resolve-palette-hex";
-import { snapPreviewPrimaryCssProperties } from "../lib/preview-primary-css";
-import { useSnapPreviewPageAccent } from "../accent-context";
-
-/**
- * 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(): CSSProperties {
-  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(): {
-  hex: (name: string) => string;
-  map: Record<PaletteColor, string>;
-  theme: "light" | "dark";
-} {
-  const { mode } = useColorMode();
-  const map = mode === "dark" ? PALETTE_DARK_HEX : PALETTE_LIGHT_HEX;
-  const hex = (name: string) => resolveSnapPaletteHex(name, mode);
-  return { hex, map, theme: mode };
-}