@farcaster/snap 2.0.3 → 2.1.1

package/src/react-native/v2/snap-view.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 import { useEffect, useMemo, useState } from "react";
-import { Platform, StyleSheet, Text, View } from "react-native";
+import { Platform, Pressable, StyleSheet, Text, View } from "react-native";
 import { SnapThemeProvider, useSnapTheme, type SnapNativeColors } from "../theme";
 import {
   SnapLoadingOverlay,
@@ -17,6 +17,7 @@ import type { SnapPage, SnapActionHandlers } from "../types";
 
 const SNAP_MAX_HEIGHT = 500;
 const SNAP_WARNING_HEIGHT = 700;
+const SHOW_MORE_OVERHANG = 14;
 
 // ─── Validation fallback ─────────────────────────────
 
@@ -156,6 +157,15 @@ function SnapCardV2Inner({
   const { colors, mode } = useSnapTheme();
   const accentHex = resolveAccentHex(snap.theme?.accent, mode);
   const [contentHeight, setContentHeight] = useState(0);
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  useEffect(() => {
+    setIsExpanded(false);
+    setContentHeight(0);
+  }, [snap]);
+
+  const isExpandable = !showOverflowWarning && contentHeight > SNAP_MAX_HEIGHT + 1;
+  const isClipped = isExpandable && !isExpanded;
 
   const content = (
     <SnapViewV2Inner
@@ -171,52 +181,117 @@ function SnapCardV2Inner({
   if (plain) {
     return (
       <>
-        {content}
+        <View style={isClipped ? { maxHeight: SNAP_MAX_HEIGHT, overflow: "hidden" } : undefined}>
+          <View
+            collapsable={false}
+            onLayout={(e) => {
+              const nextHeight = Math.round(e.nativeEvent.layout.height);
+              setContentHeight((current) =>
+                isClipped
+                  ? Math.max(current, nextHeight)
+                  : current === nextHeight
+                    ? current
+                    : nextHeight,
+              );
+            }}
+          >
+            {content}
+          </View>
+        </View>
         {loading
           ? loadingOverlay === undefined
             ? <SnapLoadingOverlay appearance={mode} accentHex={accentHex} />
             : loadingOverlay
           : null}
+        {isExpandable ? (
+          <View style={[cardStyles.expandRow, cardStyles.expandRowPlain]}>
+            <Pressable
+              style={({ pressed }) => [
+                cardStyles.expandButton,
+                {
+                  backgroundColor: pressed ? colors.mutedHover : colors.muted,
+                },
+              ]}
+              onPress={() => setIsExpanded((value) => !value)}
+            >
+              <Text style={[cardStyles.expandButtonText, { color: colors.text }]}>
+                {isExpanded ? "Show less" : "Show more"}
+              </Text>
+            </Pressable>
+          </View>
+        ) : null}
       </>
     );
   }
 
   const overflowAmount = showOverflowWarning ? contentHeight - SNAP_MAX_HEIGHT : 0;
+  const isDark = mode === "dark";
+  const pillBg = isDark ? "rgba(40,40,40,0.92)" : "rgba(255,255,255,0.92)";
+  const pillBgPressed = isDark ? "rgba(60,60,60,0.95)" : "rgba(240,240,240,0.95)";
 
   return (
-    <>
-      <View
-        style={{
-          borderRadius,
-          borderWidth: 1,
-          borderColor: colors.border,
-          backgroundColor: colors.surface,
-          maxHeight: showOverflowWarning ? undefined : SNAP_MAX_HEIGHT,
-          overflow: "hidden",
-          minHeight: 120,
-        }}
-      >
+    <View style={{ paddingBottom: isExpandable ? SHOW_MORE_OVERHANG : 0 }}>
+      <View style={{ position: "relative" }}>
         <View
-          collapsable={false}
-          onLayout={(e) => setContentHeight(Math.round(e.nativeEvent.layout.height))}
-          style={{ paddingHorizontal: 16, paddingVertical: 16 }}
+          style={{
+            borderRadius,
+            borderWidth: 1,
+            borderColor: colors.border,
+            backgroundColor: colors.surface,
+            maxHeight: showOverflowWarning ? undefined : isClipped ? SNAP_MAX_HEIGHT : undefined,
+            overflow: "hidden",
+            minHeight: 120,
+          }}
         >
-          {content}
-        </View>
-        {showOverflowWarning && contentHeight > SNAP_MAX_HEIGHT && (
-          <View style={{ position: "absolute", top: SNAP_MAX_HEIGHT, left: 0, right: 0, height: overflowAmount, zIndex: 10, pointerEvents: "none" }}>
-            <View style={{ height: 1, borderTopWidth: 1, borderStyle: "dashed", borderColor: "rgba(255,100,100,0.6)" }} />
-            <View style={{ position: "absolute", top: -10, right: 4, backgroundColor: "rgba(0,0,0,0.7)", paddingHorizontal: 4, paddingVertical: 1, borderRadius: 3 }}>
-              <Text style={{ fontSize: 10, color: "rgba(255,100,100,0.7)", fontFamily: Platform.select({ ios: "Menlo", default: "monospace" }) }}>{SNAP_MAX_HEIGHT}px</Text>
+          <View
+            collapsable={false}
+            onLayout={(e) => {
+              const nextHeight = Math.round(e.nativeEvent.layout.height);
+              setContentHeight((current) =>
+                isClipped
+                  ? Math.max(current, nextHeight)
+                  : current === nextHeight
+                    ? current
+                    : nextHeight,
+              );
+            }}
+            style={{ paddingHorizontal: 16, paddingVertical: 16 }}
+          >
+            {content}
+          </View>
+          {showOverflowWarning && contentHeight > SNAP_MAX_HEIGHT && (
+            <View style={{ position: "absolute", top: SNAP_MAX_HEIGHT, left: 0, right: 0, height: overflowAmount, zIndex: 10, pointerEvents: "none" }}>
+              <View style={{ height: 1, borderTopWidth: 1, borderStyle: "dashed", borderColor: "rgba(255,100,100,0.6)" }} />
+              <View style={{ position: "absolute", top: -10, right: 4, backgroundColor: "rgba(0,0,0,0.7)", paddingHorizontal: 4, paddingVertical: 1, borderRadius: 3 }}>
+                <Text style={{ fontSize: 10, color: "rgba(255,100,100,0.7)", fontFamily: Platform.select({ ios: "Menlo", default: "monospace" }) }}>{SNAP_MAX_HEIGHT}px</Text>
+              </View>
+              <View style={{ flex: 1, backgroundColor: "rgba(255,50,50,0.15)" }} />
             </View>
-            <View style={{ flex: 1, backgroundColor: "rgba(255,50,50,0.15)" }} />
+          )}
+          {loading
+            ? loadingOverlay === undefined
+              ? <SnapLoadingOverlay appearance={mode} accentHex={accentHex} />
+              : loadingOverlay
+            : null}
+        </View>
+        {isExpandable ? (
+          <View pointerEvents="box-none" style={cardStyles.expandFloat}>
+            <Pressable
+              style={({ pressed }) => [
+                cardStyles.expandButton,
+                {
+                  backgroundColor: pressed ? pillBgPressed : pillBg,
+                  borderColor: colors.border,
+                },
+              ]}
+              onPress={() => setIsExpanded((value) => !value)}
+            >
+              <Text style={[cardStyles.expandButtonText, { color: colors.text }]}>
+                {isExpanded ? "Show less" : "Show more"}
+              </Text>
+            </Pressable>
           </View>
-        )}
-        {loading
-          ? loadingOverlay === undefined
-            ? <SnapLoadingOverlay appearance={mode} accentHex={accentHex} />
-            : loadingOverlay
-          : null}
+        ) : null}
       </View>
       {actionError && (
         <Text
@@ -233,7 +308,7 @@ function SnapCardV2Inner({
           {actionError}
         </Text>
       )}
-    </>
+    </View>
   );
 }
 
@@ -289,6 +364,33 @@ const cardStyles = StyleSheet.create({
   card: { borderWidth: 1, minHeight: 120, overflow: "hidden" },
   body: { paddingHorizontal: 16, paddingVertical: 16 },
   actionError: { paddingHorizontal: 12, paddingVertical: 8, fontSize: 13 },
+  expandFloat: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: -14,
+    height: 28,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  expandRowPlain: {
+    paddingTop: 8,
+    alignItems: "center",
+  },
+  expandButton: {
+    minWidth: 92,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 9999,
+    borderWidth: 1,
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+  },
+  expandButtonText: {
+    fontSize: 12,
+    lineHeight: 16,
+    fontWeight: "600",
+  },
   warningOverlay: {
     position: "absolute",
     top: SNAP_MAX_HEIGHT,

package/src/ui/catalog.ts

@@ -107,7 +107,7 @@ export const snapJsonRenderCatalog = defineCatalog(snapJsonRenderSchema, {
     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]).",
+        "Cell grid — sparse colored cells on a rows×cols grid. Two interaction modes: leave select 'off' and bind on.press to fire an action per cell press (inputs[name] is the pressed 'row,col' before the action runs); or set select 'single'/'multiple' for press-to-select with a visual ring (no auto-fire — pair with a separate submit button). on.press is ignored when select is on.",
     },
   },
   actions: {

package/src/validator.ts

@@ -1,6 +1,12 @@
 import { z } from "zod";
 import { snapResponseSchema } from "./schemas";
-import { MAX_CHILDREN, MAX_DEPTH, MAX_ELEMENTS, MAX_ROOT_CHILDREN, SPEC_VERSION_1 } from "./constants";
+import {
+  MAX_CHILDREN,
+  MAX_DEPTH,
+  MAX_ELEMENTS,
+  MAX_ROOT_CHILDREN,
+  SPEC_VERSION_1,
+} from "./constants";
 import { snapJsonRenderCatalog } from "./ui/catalog.js";
 
 export type ValidationResult = {
@@ -18,9 +24,6 @@ const URL_TARGET_ACTIONS = new Set([
   "open_mini_app",
 ]);
 
-/** Image file extensions allowed in image URLs. */
-const ALLOWED_IMAGE_EXTENSIONS = new Set(["jpg", "jpeg", "png", "gif", "webp"]);
-
 /**
  * Returns true if the URL is a loopback address (localhost dev exception).
  */
@@ -48,34 +51,6 @@ function validateUrl(raw: string): string | null {
   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: string): string | null {
-  const urlError = validateUrl(raw);
-  if (urlError) return urlError;
-
-  let url: 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 ────────────────────────────────
 
 /**
@@ -118,9 +93,10 @@ type ElementShape = {
  * - Children per element ≤ MAX_CHILDREN
  * - Nesting depth ≤ MAX_DEPTH
  */
-function validateStructure(
-  ui: { root: string; elements: Record<string, unknown> },
-): z.core.$ZodIssue[] {
+function validateStructure(ui: {
+  root: string;
+  elements: Record<string, unknown>;
+}): z.core.$ZodIssue[] {
   const issues: z.core.$ZodIssue[] = [];
   const elements = ui.elements as Record<string, ElementShape>;
 
@@ -173,19 +149,17 @@ function validateStructure(
 
 /**
  * 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
+ * - image.url: must use HTTPS (or HTTP on loopback for dev)
+ * - action target URLs (submit, open_url, open_snap, open_mini_app): must use HTTPS (or HTTP on loopback for dev)
  */
-function validateUrls(
-  elements: Record<string, unknown>,
-): z.core.$ZodIssue[] {
+function validateUrls(elements: Record<string, unknown>): z.core.$ZodIssue[] {
   const issues: z.core.$ZodIssue[] = [];
   const els = elements as Record<string, ElementShape>;
 
   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);
+      const error = validateUrl(el.props.url);
       if (error) {
         issues.push({
           code: "custom",
@@ -242,11 +216,13 @@ export function validateSnapResponse(json: unknown): ValidationResult {
   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"],
-      }],
+      issues: [
+        {
+          code: "custom",
+          message: `ui.root "${ui.root}" does not exist in ui.elements`,
+          path: ["ui", "root"],
+        },
+      ],
     };
   }