@farcaster/snap 2.0.0 → 2.0.2

package/dist/validator.js

@@ -1,8 +1,182 @@
 import { snapResponseSchema } from "./schemas.js";
+import { MAX_CHILDREN, MAX_DEPTH, MAX_ELEMENTS, MAX_ROOT_CHILDREN, SPEC_VERSION_1 } from "./constants.js";
+import { snapJsonRenderCatalog } from "./ui/catalog.js";
+// ─── Helpers ──────────────────────────────────────────
+/** Actions whose `params.target` must be a valid URL. */
+const URL_TARGET_ACTIONS = new Set([
+    "submit",
+    "open_url",
+    "open_snap",
+    "open_mini_app",
+]);
+/** Image file extensions allowed in image URLs. */
+const ALLOWED_IMAGE_EXTENSIONS = new Set(["jpg", "jpeg", "png", "gif", "webp"]);
 /**
- * Validates a snap response against the schema.
+ * Returns true if the URL is a loopback address (localhost dev exception).
+ */
+function isLoopback(url) {
+    const host = url.hostname;
+    return host === "localhost" || host === "127.0.0.1" || host === "::1" || host === "[::1]";
+}
+/**
+ * Validate a URL string: must be HTTPS (or HTTP on loopback for dev).
+ * Returns an error message or null if valid.
+ */
+function validateUrl(raw) {
+    let url;
+    try {
+        url = new URL(raw);
+    }
+    catch {
+        return `Invalid URL: "${raw}"`;
+    }
+    if (url.protocol === "https:")
+        return null;
+    if (url.protocol === "http:" && isLoopback(url))
+        return null;
+    if (url.protocol === "javascript:")
+        return `javascript: URIs are not allowed`;
+    return `URL must use HTTPS (got ${url.protocol.replace(":", "")}): "${raw}"`;
+}
+/**
+ * Validate an image URL: must pass URL validation + have an allowed extension.
+ */
+function validateImageUrl(raw) {
+    const urlError = validateUrl(raw);
+    if (urlError)
+        return urlError;
+    let url;
+    try {
+        url = new URL(raw);
+    }
+    catch {
+        return null; // already caught above
+    }
+    const pathname = url.pathname;
+    const lastDot = pathname.lastIndexOf(".");
+    if (lastDot === -1) {
+        return `Image URL must end with a supported extension (${[...ALLOWED_IMAGE_EXTENSIONS].join(", ")}): "${raw}"`;
+    }
+    const ext = pathname.slice(lastDot + 1).toLowerCase();
+    if (!ALLOWED_IMAGE_EXTENSIONS.has(ext)) {
+        return `Image URL has unsupported extension ".${ext}" (allowed: ${[...ALLOWED_IMAGE_EXTENSIONS].join(", ")}): "${raw}"`;
+    }
+    return null;
+}
+// ─── Depth measurement ────────────────────────────────
+/**
+ * Walk the element tree from `root` and return the max depth reached.
+ * Avoids infinite loops by tracking visited element ids.
+ */
+function measureDepth(elements, id, visited = new Set()) {
+    if (visited.has(id))
+        return 0;
+    visited.add(id);
+    const el = elements[id];
+    if (!el?.children?.length)
+        return 1;
+    let max = 0;
+    for (const childId of el.children) {
+        max = Math.max(max, measureDepth(elements, childId, visited));
+    }
+    return 1 + max;
+}
+// ─── Structural validation ────────────────────────────
+/**
+ * Validate structural constraints on the snap UI tree:
+ * - root must reference an existing element
+ * - Total element count ≤ MAX_ELEMENTS
+ * - Children per element ≤ MAX_CHILDREN
+ * - Nesting depth ≤ MAX_DEPTH
+ */
+function validateStructure(ui) {
+    const issues = [];
+    const elements = ui.elements;
+    const elementCount = Object.keys(elements).length;
+    if (elementCount > MAX_ELEMENTS) {
+        issues.push({
+            code: "custom",
+            message: `Snap exceeds maximum of ${MAX_ELEMENTS} elements (found ${elementCount})`,
+            path: ["ui", "elements"],
+        });
+    }
+    // Root element has a stricter children limit
+    const rootEl = elements[ui.root];
+    if (rootEl?.children && rootEl.children.length > MAX_ROOT_CHILDREN) {
+        issues.push({
+            code: "custom",
+            message: `Root element "${ui.root}" exceeds maximum of ${MAX_ROOT_CHILDREN} children (found ${rootEl.children.length})`,
+            path: ["ui", "elements", ui.root, "children"],
+        });
+    }
+    for (const [id, el] of Object.entries(elements)) {
+        if (id === ui.root)
+            continue; // already checked above
+        if (el.children && el.children.length > MAX_CHILDREN) {
+            issues.push({
+                code: "custom",
+                message: `Element "${id}" exceeds maximum of ${MAX_CHILDREN} children (found ${el.children.length})`,
+                path: ["ui", "elements", id, "children"],
+            });
+        }
+    }
+    const depth = measureDepth(elements, ui.root);
+    if (depth > MAX_DEPTH) {
+        issues.push({
+            code: "custom",
+            message: `Snap exceeds maximum nesting depth of ${MAX_DEPTH} (found ${depth})`,
+            path: ["ui", "root"],
+        });
+    }
+    return issues;
+}
+// ─── URL validation ───────────────────────────────────
+/**
+ * Validate all URLs in the snap:
+ * - image.url: must be HTTPS with allowed extension
+ * - action target URLs (submit, open_url, open_snap, open_mini_app): must be HTTPS
+ */
+function validateUrls(elements) {
+    const issues = [];
+    const els = elements;
+    for (const [id, el] of Object.entries(els)) {
+        // Validate image URLs
+        if (el.type === "image" && typeof el.props?.url === "string") {
+            const error = validateImageUrl(el.props.url);
+            if (error) {
+                issues.push({
+                    code: "custom",
+                    message: error,
+                    path: ["ui", "elements", id, "props", "url"],
+                });
+            }
+        }
+        // Validate action target URLs
+        if (el.on) {
+            for (const [event, binding] of Object.entries(el.on)) {
+                if (binding &&
+                    URL_TARGET_ACTIONS.has(binding.action ?? "") &&
+                    typeof binding.params?.target === "string") {
+                    const error = validateUrl(binding.params.target);
+                    if (error) {
+                        issues.push({
+                            code: "custom",
+                            message: error,
+                            path: ["ui", "elements", id, "on", event, "params", "target"],
+                        });
+                    }
+                }
+            }
+        }
+    }
+    return issues;
+}
+// ─── Public API ───────────────────────────────────────
+/**
+ * Validates a snap response against the schema, structural constraints, and URL rules.
  * Element-level prop validation is handled by the json-render catalog.
- * This validates the snap envelope (version, theme, effects, spec shape).
+ * This validates the snap envelope (version, theme, effects, spec shape)
+ * and enforces structural limits (element count, children, depth) and URL validation.
  */
 export function validateSnapResponse(json) {
     const parsed = snapResponseSchema.safeParse(json);
@@ -12,5 +186,32 @@ export function validateSnapResponse(json) {
             issues: parsed.error.issues,
         };
     }
+    const ui = parsed.data.ui;
+    // Root reference check applies to all versions
+    if (!(ui.root in ui.elements)) {
+        return {
+            valid: false,
+            issues: [{
+                    code: "custom",
+                    message: `ui.root "${ui.root}" does not exist in ui.elements`,
+                    path: ["ui", "root"],
+                }],
+        };
+    }
+    // Structural limits and URL validation only apply to v2+ snaps
+    if (parsed.data.version !== SPEC_VERSION_1) {
+        const structuralIssues = validateStructure(ui);
+        if (structuralIssues.length > 0) {
+            return { valid: false, issues: structuralIssues };
+        }
+        const urlIssues = validateUrls(ui.elements);
+        if (urlIssues.length > 0) {
+            return { valid: false, issues: urlIssues };
+        }
+        const catalogResult = snapJsonRenderCatalog.validate(ui);
+        if (!catalogResult.success) {
+            return { valid: false, issues: catalogResult.error?.issues ?? [] };
+        }
+    }
     return { valid: true, issues: [] };
 }

package/llms.txt

@@ -0,0 +1,199 @@
+# @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": "2.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"` or `"2.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.
+
+## Structural Constraints
+
+| Constraint | Limit |
+|------------|-------|
+| Total elements | Max **64** in `ui.elements` |
+| Root children | Max **7** children on the root element |
+| Children per element | Max **6** per non-root container (`stack`, `item_group`) |
+| Nesting depth | Max **4** levels from root to deepest leaf |
+
+## Components (16 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"`
+
+### 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"`
+- `rowHeight` (number, optional, 8–64): pixel height per row. Default: 28. Grid height = rows × rowHeight
+- `select` (optional): `"off"` | `"single"` | `"multiple"`. Default: `"off"`. Taps write to `inputs[name]`
+
+### 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)
+- `showValue` (boolean, optional): display the current value next to the label
+- 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 (10 types)
+
+Bound to buttons via `on.press`:
+
+| Action | Params | Description |
+|--------|--------|-------------|
+| `submit` | `target` (URL) | POST to server, get next page |
+| `open_url` | `target` (URL) | Open external URL in browser |
+| `open_snap` | `target` (URL) | Open a snap URL inline |
+| `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 { withTursoServerless, createInMemoryDataStore } from "@farcaster/snap-turso";
+```
+
+- `@farcaster/snap` — schemas, types, validation
+- `@farcaster/snap/ui` — json-render catalog, component schemas
+- `@farcaster/snap/server` — request parsing, JFS verification
+- `@farcaster/snap-hono` — Hono adapter (`registerSnapHandler`)
+- `@farcaster/snap-turso` — `withTursoServerless`, `DataStore` / `DataStoreValue`, in-memory and Turso helpers
+
+## Full Documentation
+
+https://docs.farcaster.xyz/snap

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farcaster/snap",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "Farcaster Snaps 🫰",
   "repository": {
     "type": "git",
@@ -100,11 +100,17 @@
       "types": "./dist/react/index.d.ts",
       "import": "./dist/react/index.js",
       "default": "./dist/react/index.js"
+    },
+    "./react-native": {
+      "types": "./dist/react-native/index.d.ts",
+      "import": "./dist/react-native/index.js",
+      "default": "./dist/react-native/index.js"
     }
   },
   "files": [
     "dist",
-    "src"
+    "src",
+    "llms.txt"
   ],
   "publishConfig": {
     "access": "public"
@@ -147,7 +153,7 @@
     "zod": "^4.0.0"
   },
   "scripts": {
-    "build": "tsc && tsc-alias --resolve-full-paths --resolve-full-extension .js",
+    "build": "tsc && (tsc -p tsconfig.react-native.json || true) && tsc-alias --resolve-full-paths --resolve-full-extension .js",
     "clean": "rm -rf dist",
     "test": "vitest run",
     "typecheck": "tsc --noEmit"

package/src/colors.ts

@@ -3,12 +3,12 @@
  * it to a hex value appropriate for its current light/dark mode.
  *
  * Light-mode hex values (used by emulator):
- *   gray=#8F8F8F  blue=#006BFF  red=#FC0036  amber=#FFAE00
- *   green=#28A948  teal=#00AC96  purple=#8B5CF6  pink=#F32782
+ *   gray=#6E6A86  blue=#286983  red=#B4637A  amber=#EA9D34
+ *   green=#3E8F8F  teal=#56949F  purple=#907AA9  pink=#D7827E
  *
  * Dark-mode hex values (for reference; client-owned):
- *   gray=#8F8F8F  blue=#006FFE  red=#F13342  amber=#FFAE00
- *   green=#00AC3A  teal=#00AA96  purple=#A78BFA  pink=#F12B82
+ *   gray=#908CAA  blue=#9CCFD8  red=#EB6F92  amber=#F6C177
+ *   green=#56D4A4  teal=#3E8FB0  purple=#C4A7E7  pink=#EBBCBA
  */
 export const PALETTE_COLOR = {
   gray: "gray",
@@ -40,26 +40,26 @@ export type PaletteColor = (typeof PALETTE_COLOR_VALUES)[number];
 
 /** Light-mode hex for each palette color (emulator / reference client). */
 export const PALETTE_LIGHT_HEX: Record<PaletteColor, string> = {
-  gray: "#8F8F8F",
-  blue: "#006BFF",
-  red: "#FC0036",
-  amber: "#FFAE00",
-  green: "#28A948",
-  teal: "#00AC96",
-  purple: "#8B5CF6",
-  pink: "#F32782",
+  gray: "#6E6A86",
+  blue: "#286983",
+  red: "#B4637A",
+  amber: "#EA9D34",
+  green: "#3E8F8F",
+  teal: "#56949F",
+  purple: "#907AA9",
+  pink: "#D7827E",
 };
 
 /** Dark-mode hex for each palette color (reference). */
 export const PALETTE_DARK_HEX: Record<PaletteColor, string> = {
-  gray: "#8F8F8F",
-  blue: "#006FFE",
-  red: "#F13342",
-  amber: "#FFAE00",
-  green: "#00AC3A",
-  teal: "#00AA96",
-  purple: "#A78BFA",
-  pink: "#F12B82",
+  gray: "#908CAA",
+  blue: "#9CCFD8",
+  red: "#EB6F92",
+  amber: "#F6C177",
+  green: "#56D4A4",
+  teal: "#3E8FB0",
+  purple: "#C4A7E7",
+  pink: "#EBBCBA",
 };
 
 export const PROGRESS_COLOR_VALUES = [

package/src/constants.ts

@@ -1,5 +1,27 @@
-export const SPEC_VERSION = "1.0" as const;
+export const SPEC_VERSION_1 = "1.0" as const;
+export const SPEC_VERSION_2 = "2.0" as const;
+export const SPEC_VERSION = SPEC_VERSION_2;
+export const SUPPORTED_SPEC_VERSIONS = [SPEC_VERSION_1, SPEC_VERSION_2] as const;
+export type SpecVersion = (typeof SUPPORTED_SPEC_VERSIONS)[number];
 
 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;
+
+// ─── Snap structural limits ───────────────────────────
+export const MAX_ELEMENTS = 64;
+export const MAX_ROOT_CHILDREN = 7;
+export const MAX_CHILDREN = 6;
+export const MAX_DEPTH = 4;
+
+// ─── Bar chart ─────────────────────────────────────────
+export const BAR_CHART_MAX_BARS = 6;
+export const BAR_CHART_LABEL_MAX_CHARS = 40;

package/src/index.ts

@@ -1,8 +1,20 @@
-export type { Spec as SnapSpec, UIElement as SnapUIElement } from "@json-render/core";
+export type {
+  Spec as SnapSpec,
+  UIElement as SnapUIElement,
+} from "@json-render/core";
 export {
   SPEC_VERSION,
+  SPEC_VERSION_1,
+  SPEC_VERSION_2,
+  SUPPORTED_SPEC_VERSIONS,
+  type SpecVersion,
   MEDIA_TYPE,
   EFFECT_VALUES,
+  POST_GRID_TAP_KEY,
+  MAX_ELEMENTS,
+  MAX_ROOT_CHILDREN,
+  MAX_CHILDREN,
+  MAX_DEPTH,
 } from "./constants";
 export {
   DEFAULT_THEME_ACCENT,
@@ -22,18 +34,9 @@ export {
   type SnapContext,
   type SnapResponse,
   type SnapHandlerResult,
+  type SnapElementInput,
+  type SnapSpecInput,
   type SnapFunction,
   type SnapPayload,
 } from "./schemas";
-export {
-  validateSnapResponse,
-  type ValidationResult,
-} from "./validator";
-export {
-  type DataStoreValue,
-  type SnapDataStore,
-  type SnapDataStoreOperations,
-  createDefaultDataStore,
-  createInMemoryDataStore,
-} from "./dataStore";
-export { type Middleware, useMiddleware } from "./middleware";
+export { validateSnapResponse, type ValidationResult } from "./validator";

package/src/react/accent-context.tsx

@@ -2,28 +2,35 @@
 
 import { createContext, useContext, type ReactNode } from "react";
 
-type SnapPreviewAccentContextValue = {
+type SnapPreviewContextValue = {
   /** From loaded snap `page.theme.accent` (undefined if the snap omits it). */
   pageAccent: string | undefined;
+  /** Light/dark appearance passed from SnapCard. */
+  appearance: "light" | "dark";
 };
 
-const SnapPreviewAccentContext =
-  createContext<SnapPreviewAccentContextValue | null>(null);
+const SnapPreviewContext = createContext<SnapPreviewContextValue | null>(null);
 
 export function SnapPreviewAccentProvider({
   pageAccent,
+  appearance = "dark",
   children,
 }: {
   pageAccent: string | undefined;
+  appearance?: "light" | "dark";
   children: ReactNode;
 }) {
   return (
-    <SnapPreviewAccentContext.Provider value={{ pageAccent }}>
+    <SnapPreviewContext.Provider value={{ pageAccent, appearance }}>
       {children}
-    </SnapPreviewAccentContext.Provider>
+    </SnapPreviewContext.Provider>
   );
 }
 
 export function useSnapPreviewPageAccent(): string | undefined {
-  return useContext(SnapPreviewAccentContext)?.pageAccent;
+  return useContext(SnapPreviewContext)?.pageAccent;
+}
+
+export function useSnapAppearance(): "light" | "dark" {
+  return useContext(SnapPreviewContext)?.appearance ?? "dark";
 }

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,
 });