@farcaster/snap 1.18.0 → 1.20.0

package/src/react-native/theme.tsx

@@ -21,27 +21,27 @@ export type SnapNativeColors = {
 const DEFAULT_LIGHT: SnapNativeColors = {
   bg: "#dfe3e8",
   surface: "#ffffff",
-  text: "#111111",
-  textSecondary: "#6b7280",
-  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)",
+  text: "rgba(0,0,0,0.9)",
+  textSecondary: "rgba(0,0,0,0.5)",
+  border: "rgba(0,0,0,0.1)",
+  inputBg: "rgba(0,0,0,0.06)",
+  muted: "rgba(0,0,0,0.08)",
+  mutedSubtle: "rgba(0,0,0,0.04)",
+  mutedHover: "rgba(0,0,0,0.12)",
+  mutedSelected: "rgba(0,0,0,0.16)",
 };
 
 const DEFAULT_DARK: SnapNativeColors = {
   bg: "#111318",
   surface: "#1a1d24",
-  text: "#fafafa",
-  textSecondary: "#a1a1aa",
-  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)",
+  text: "rgba(255,255,255,0.9)",
+  textSecondary: "rgba(255,255,255,0.5)",
+  border: "rgba(255,255,255,0.1)",
+  inputBg: "rgba(255,255,255,0.04)",
+  muted: "rgba(255,255,255,0.06)",
+  mutedSubtle: "rgba(255,255,255,0.03)",
+  mutedHover: "rgba(255,255,255,0.08)",
+  mutedSelected: "rgba(255,255,255,0.12)",
 };
 
 // ─── Context ──────────────────────────────────────────

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

@@ -1,9 +1,12 @@
-import { View, Text, StyleSheet } from "react-native";
+import { useEffect, useState } from "react";
+import { View, Text, StyleSheet, Pressable } from "react-native";
 import { SnapThemeProvider, useSnapTheme, type SnapNativeColors } from "../theme";
 import { SnapViewCoreInner } from "../snap-view-core";
 import type { SnapPage, SnapActionHandlers } from "../types";
 
-// ─── SnapViewV1 (no validation, no height limits) ────
+const SNAP_MAX_HEIGHT = 500;
+
+// ─── SnapViewV1 (no validation) ──────────────────────
 
 export function SnapViewV1Inner({
   snap,
@@ -39,7 +42,7 @@ export function SnapViewV1({
   );
 }
 
-// ─── SnapCardV1 (card frame, no height limits) ───────
+// ─── SnapCardV1 (card frame with expandable clipping) ──
 
 function SnapCardV1Inner({
   snap,
@@ -48,6 +51,7 @@ function SnapCardV1Inner({
   borderRadius,
   actionError,
   appearance,
+  plain,
 }: {
   snap: SnapPage;
   handlers: SnapActionHandlers;
@@ -55,25 +59,87 @@ function SnapCardV1Inner({
   borderRadius: number;
   actionError?: string | null;
   appearance: "light" | "dark";
+  plain: boolean;
 }) {
   const { colors } = useSnapTheme();
+  const [contentHeight, setContentHeight] = useState(0);
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  useEffect(() => {
+    setIsExpanded(false);
+    setContentHeight(0);
+  }, [snap]);
+
+  const isExpandable = contentHeight > SNAP_MAX_HEIGHT + 1;
+  const isClipped = isExpandable && !isExpanded;
 
   return (
     <>
       <View style={cardStyles.frameRing}>
         <View
           style={[
-            cardStyles.card,
-            {
+            plain ? undefined : cardStyles.card,
+            plain ? undefined : {
               borderRadius,
               borderColor: colors.border,
               backgroundColor: colors.surface,
             },
           ]}
         >
-          <View style={cardStyles.body}>
-            <SnapViewV1Inner snap={snap} handlers={handlers} loading={loading} />
+          <View
+            style={isClipped ? { maxHeight: SNAP_MAX_HEIGHT, overflow: "hidden" } : undefined}
+          >
+            <View
+              collapsable={false}
+              onLayout={(event) => {
+                const nextHeight = Math.round(event.nativeEvent.layout.height);
+                setContentHeight((currentHeight) =>
+                  isClipped
+                    ? Math.max(currentHeight, nextHeight)
+                    : currentHeight === nextHeight
+                      ? currentHeight
+                      : nextHeight,
+                );
+              }}
+              style={plain ? undefined : cardStyles.body}
+            >
+              <SnapViewV1Inner
+                snap={snap}
+                handlers={handlers}
+                loading={loading}
+              />
+            </View>
           </View>
+          {isExpandable ? (
+            <View
+              style={[
+                cardStyles.expandRow,
+                plain
+                  ? cardStyles.expandRowPlain
+                  : { borderTopColor: colors.border },
+              ]}
+            >
+              <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}
         </View>
       </View>
       {actionError && (
@@ -103,6 +169,7 @@ export function SnapCardV1({
   colors,
   borderRadius = 16,
   actionError,
+  plain = false,
 }: {
   snap: SnapPage;
   handlers: SnapActionHandlers;
@@ -111,6 +178,7 @@ export function SnapCardV1({
   colors?: Partial<SnapNativeColors>;
   borderRadius?: number;
   actionError?: string | null;
+  plain?: boolean;
 }) {
   return (
     <SnapThemeProvider appearance={appearance} colors={colors}>
@@ -121,6 +189,7 @@ export function SnapCardV1({
         borderRadius={borderRadius}
         actionError={actionError}
         appearance={appearance}
+        plain={plain}
       />
     </SnapThemeProvider>
   );
@@ -130,5 +199,31 @@ const cardStyles = StyleSheet.create({
   frameRing: { alignSelf: "stretch" },
   card: { overflow: "hidden", borderWidth: 1, minHeight: 120 },
   body: { paddingHorizontal: 16, paddingVertical: 16 },
+  expandRow: {
+    alignItems: "center",
+    paddingHorizontal: 16,
+    paddingTop: 10,
+    paddingBottom: 12,
+    borderTopWidth: StyleSheet.hairlineWidth,
+  },
+  expandRowPlain: {
+    paddingHorizontal: 0,
+    paddingTop: 8,
+    paddingBottom: 0,
+    borderTopWidth: 0,
+  },
+  expandButton: {
+    minWidth: 92,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 9999,
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+  },
+  expandButtonText: {
+    fontSize: 13,
+    lineHeight: 18,
+    fontWeight: "600",
+  },
   actionError: { paddingHorizontal: 12, paddingVertical: 8, fontSize: 13 },
 });

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

@@ -123,6 +123,7 @@ function SnapCardV2Inner({
   validationErrorFallback,
   actionError,
   appearance,
+  plain,
 }: {
   snap: SnapPage;
   handlers: SnapActionHandlers;
@@ -133,54 +134,62 @@ function SnapCardV2Inner({
   validationErrorFallback?: ReactNode;
   actionError?: string | null;
   appearance: "light" | "dark";
+  plain: boolean;
 }) {
   const { colors } = useSnapTheme();
-  const maxHeight = showOverflowWarning ? SNAP_WARNING_HEIGHT : SNAP_MAX_HEIGHT;
+  const clipHeight = showOverflowWarning ? undefined : SNAP_MAX_HEIGHT;
+
+  const content = (
+    <SnapViewV2Inner
+      snap={snap}
+      handlers={handlers}
+      loading={loading}
+      onValidationError={onValidationError}
+      validationErrorFallback={validationErrorFallback}
+    />
+  );
+
+  if (plain) {
+    return content;
+  }
 
   return (
     <>
-      <View style={cardStyles.frameRing}>
-        <View
-          style={[
-            cardStyles.card,
-            {
-              borderRadius,
-              maxHeight,
-              borderColor: colors.border,
-              backgroundColor: colors.surface,
-            },
-          ]}
-        >
-          <View style={cardStyles.body}>
-            <SnapViewV2Inner
-              snap={snap}
-              handlers={handlers}
-              loading={loading}
-              onValidationError={onValidationError}
-              validationErrorFallback={validationErrorFallback}
-            />
-          </View>
-          {showOverflowWarning && (
-            <View style={cardStyles.warningOverlay}>
-              <View style={cardStyles.warningLine} />
-              <View style={cardStyles.warningLabel}>
-                <Text style={cardStyles.warningLabelText}>{SNAP_MAX_HEIGHT}px</Text>
-              </View>
-            </View>
-          )}
+      <View
+        style={{
+          borderRadius,
+          borderWidth: 1,
+          borderColor: colors.border,
+          backgroundColor: colors.surface,
+          maxHeight: clipHeight,
+          overflow: "hidden",
+          minHeight: 120,
+        }}
+      >
+        <View style={{ paddingHorizontal: 16, paddingVertical: 16 }}>
+          {content}
         </View>
+        {showOverflowWarning && (
+          <View style={{ position: "absolute", top: SNAP_MAX_HEIGHT, left: 0, right: 0, bottom: 0, 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>
       {actionError && (
         <Text
-          style={[
-            cardStyles.actionError,
-            {
-              color:
-                appearance === "dark"
-                  ? "rgba(255,100,100,0.9)"
-                  : "rgba(200,0,0,0.8)",
-            },
-          ]}
+          style={{
+            paddingHorizontal: 12,
+            paddingVertical: 8,
+            fontSize: 13,
+            color:
+              appearance === "dark"
+                ? "rgba(255,100,100,0.9)"
+                : "rgba(200,0,0,0.8)",
+          }}
         >
           {actionError}
         </Text>
@@ -200,6 +209,7 @@ export function SnapCardV2({
   onValidationError,
   validationErrorFallback,
   actionError,
+  plain = false,
 }: {
   snap: SnapPage;
   handlers: SnapActionHandlers;
@@ -211,6 +221,7 @@ export function SnapCardV2({
   onValidationError?: (result: ValidationResult) => void;
   validationErrorFallback?: ReactNode;
   actionError?: string | null;
+  plain?: boolean;
 }) {
   return (
     <SnapThemeProvider appearance={appearance} colors={colors}>
@@ -224,6 +235,7 @@ export function SnapCardV2({
         validationErrorFallback={validationErrorFallback}
         actionError={actionError}
         appearance={appearance}
+        plain={plain}
       />
     </SnapThemeProvider>
   );
@@ -231,7 +243,7 @@ export function SnapCardV2({
 
 const cardStyles = StyleSheet.create({
   frameRing: { alignSelf: "stretch" },
-  card: { overflow: "hidden", borderWidth: 1, minHeight: 120 },
+  card: { borderWidth: 1, minHeight: 120, overflow: "hidden" },
   body: { paddingHorizontal: 16, paddingVertical: 16 },
   actionError: { paddingHorizontal: 12, paddingVertical: 8, fontSize: 13 },
   warningOverlay: {

package/src/ui/catalog.ts

@@ -117,10 +117,9 @@ export const snapJsonRenderCatalog = defineCatalog(snapJsonRenderSchema, {
       params: z.object({ target: z.string() }),
     },
     open_url: {
-      description: "Open target snap or external URL.",
+      description: "Open URL in browser.",
       params: z.object({
         target: z.string(),
-        isSnap: z.boolean().optional(),
       }),
     },
     open_mini_app: {

package/src/ui/slider.ts

@@ -12,6 +12,8 @@ export const sliderProps = z
     step: z.number().optional(),
     defaultValue: z.number().optional(),
     label: z.string().max(SLIDER_MAX_LABEL_CHARS).optional(),
+    /** When true, display the current value next to the label. */
+    showValue: z.boolean().optional(),
   })
   .superRefine((val, ctx) => {
     if (val.min > val.max) {