@farcaster/snap 2.6.1 → 2.6.3

package/dist/react/components/image.js

@@ -18,5 +18,10 @@ export function SnapImage({ element: { props }, }) {
     const ratio = aspectToRatio(String(props.aspect ?? "1:1"));
     const stackDir = useSnapStackDirection();
     const inHorizontalStack = stackDir === "horizontal";
-    return (_jsxs(AspectRatio, { ratio: ratio, className: cn("relative overflow-hidden rounded-lg", inHorizontalStack ? "min-w-0 flex-1 basis-0" : "w-full"), children: [_jsx("img", { src: url, alt: alt, className: "absolute inset-0 size-full object-cover" }), hasOverlay && (_jsxs("div", { className: "absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/75 via-black/35 to-transparent p-3 pt-8 text-white", children: [title && (_jsx("div", { className: "truncate text-sm font-semibold leading-5", children: title })), subtitle && (_jsx("div", { className: "truncate text-xs font-medium leading-4 text-white/85", children: subtitle }))] }))] }));
+    return (_jsxs(AspectRatio, { ratio: ratio, className: cn("relative overflow-hidden rounded-lg", inHorizontalStack ? "min-w-0 flex-1 basis-0" : "w-full"), children: [_jsx("img", { src: url, alt: alt, className: "absolute inset-0 size-full object-cover" }), hasOverlay && (_jsxs("div", { className: "absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/70 via-black/35 to-transparent p-3 pt-10 text-white", children: [title && (_jsx("div", { className: "truncate text-sm font-semibold leading-5", style: {
+                            textShadow: "0 1px 2px rgba(0,0,0,0.95), 0 0 3px rgba(0,0,0,0.9)",
+                            WebkitTextStroke: "0.25px rgba(0,0,0,0.75)",
+                        }, children: title })), subtitle && (_jsx("div", { className: "truncate text-xs font-medium leading-4 text-white/90", style: {
+                            textShadow: "0 1px 2px rgba(0,0,0,0.95), 0 0 3px rgba(0,0,0,0.9)",
+                        }, children: subtitle }))] }))] }));
 }

package/dist/react/components/item-group.js

@@ -13,7 +13,9 @@ const GAP_MAP = {
 export function SnapItemGroup({ element: { props }, children, }) {
     const border = Boolean(props.border);
     const separator = Boolean(props.separator);
-    const gap = GAP_MAP[String(props.gap ?? "sm")] ?? "gap-1";
+    const explicitGap = typeof props.gap === "string" ? String(props.gap) : undefined;
+    const defaultGap = border || separator ? "sm" : "none";
+    const gap = GAP_MAP[explicitGap ?? defaultGap] ?? GAP_MAP[defaultGap];
     const items = Children.toArray(children);
     const colors = useSnapColors();
     return (_jsx(SnapItemGroupBorderProvider, { value: border, children: _jsx("div", { className: cn("flex flex-col", border && "rounded-lg border", gap), style: border ? { borderColor: colors.border } : undefined, children: items.map((child, i) => (_jsxs(Fragment, { children: [separator && i > 0 && (_jsx("div", { className: "h-px", style: { backgroundColor: colors.border } })), child] }, i))) }) }));

package/dist/react/components/item.js

@@ -44,7 +44,7 @@ export function SnapItem({ element: { props, children: childIds }, children, })
                     alignSelf: "center",
                     borderRadius: media.round ? "9999px" : undefined,
                     transform: "none",
-                }, children: _jsx("img", { src: media.url, alt: media.alt ?? "", className: "size-full object-cover" }) })), _jsxs(ItemContent, { className: "gap-0", children: [_jsx(ItemTitle, { style: { color: colors.text }, children: title }), description && (_jsx(ItemDescription, { className: "mt-0 text-xs leading-snug", style: {
+                }, children: _jsx("img", { src: media.url, alt: media.alt ?? "", className: "size-full object-cover" }) })), _jsxs(ItemContent, { className: "gap-0", children: [_jsx(ItemTitle, { style: { color: colors.text, fontSize: 14, lineHeight: "19px" }, children: title }), description && (_jsx(ItemDescription, { className: "mt-0 text-xs leading-snug", style: {
                             color: colors.textMuted,
                             fontSize: 12,
                             lineHeight: "16px",

package/dist/react/components/text.js

@@ -11,7 +11,9 @@ const SIZE_MAP = {
 export function SnapText({ element: { props }, }) {
     const content = String(props.content ?? "");
     const size = String(props.size ?? "md");
-    const weight = props.weight ? String(props.weight) : undefined;
+    const weight = props.weight
+        ? String(props.weight)
+        : undefined;
     const align = props.align ?? undefined;
     const config = SIZE_MAP[size] ?? SIZE_MAP.md;
     const colors = useSnapColors();
@@ -29,6 +31,7 @@ export function SnapText({ element: { props }, }) {
          */
         inHorizontalStack ? "min-w-0 shrink" : "min-w-0"), style: {
             color: colors.text,
+            fontSize: size === "md" ? 15 : undefined,
             lineHeight: size === "sm" ? 1.35 : 1.4,
             ...(maxLines
                 ? {

package/dist/react-native/components/snap-image.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Image } from "expo-image";
+import { useCallback, useState } from "react";
 import { StyleSheet, Text, View } from "react-native";
 import { useSnapStackDirection } from "../stack-direction-context.js";
 function aspectToRatio(aspect) {
@@ -17,11 +18,17 @@ export function SnapImage({ element: { props }, }) {
     const ratio = aspectToRatio(String(props.aspect ?? "1:1"));
     const stackDir = useSnapStackDirection();
     const inHorizontalStack = stackDir === "horizontal";
-    return (_jsxs(View, { style: [
+    const [frameWidth, setFrameWidth] = useState(0);
+    const measuredHeight = frameWidth > 0 ? frameWidth / ratio : undefined;
+    const handleLayout = useCallback((event) => {
+        const nextWidth = Math.round(event.nativeEvent.layout.width);
+        setFrameWidth((currentWidth) => currentWidth !== nextWidth ? nextWidth : currentWidth);
+    }, []);
+    return (_jsxs(View, { onLayout: handleLayout, style: [
             styles.frame,
             inHorizontalStack ? styles.frameInHorizontalRow : styles.frameFullWidth,
-            { aspectRatio: ratio },
-        ], children: [_jsx(Image, { source: { uri: url }, style: StyleSheet.absoluteFill, contentFit: "cover", accessibilityLabel: alt || undefined }), hasOverlay ? (_jsxs(View, { style: styles.overlay, children: [title ? (_jsx(Text, { numberOfLines: 1, style: styles.title, children: title })) : null, subtitle ? (_jsx(Text, { numberOfLines: 1, style: styles.subtitle, children: subtitle })) : null] })) : null] }));
+            measuredHeight ? { height: measuredHeight } : { aspectRatio: ratio },
+        ], children: [_jsx(Image, { source: { uri: url }, style: StyleSheet.absoluteFill, contentFit: "cover", accessibilityLabel: alt || undefined }), hasOverlay ? (_jsx(View, { style: styles.overlay, pointerEvents: "none", children: _jsxs(View, { style: styles.overlayContent, children: [title ? (_jsx(Text, { numberOfLines: 1, style: styles.title, children: title })) : null, subtitle ? (_jsx(Text, { numberOfLines: 1, style: styles.subtitle, children: subtitle })) : null] }) })) : null] }));
 }
 const styles = StyleSheet.create({
     frame: {
@@ -41,21 +48,33 @@ const styles = StyleSheet.create({
         left: 0,
         right: 0,
         bottom: 0,
-        paddingHorizontal: 12,
-        paddingTop: 24,
-        paddingBottom: 10,
-        backgroundColor: "rgba(0, 0, 0, 0.48)",
+        paddingHorizontal: 3,
+        paddingBottom: 3,
+    },
+    overlayContent: {
+        alignSelf: "flex-start",
+        maxWidth: "100%",
+        borderRadius: 5,
+        paddingHorizontal: 5,
+        paddingVertical: 3,
+        backgroundColor: "rgba(0, 0, 0, 0.22)",
     },
     title: {
         color: "#fff",
         fontSize: 14,
         lineHeight: 18,
         fontWeight: "700",
+        textShadowColor: "#000",
+        textShadowOffset: { width: 1.25, height: 1.25 },
+        textShadowRadius: 1,
     },
     subtitle: {
-        color: "rgba(255, 255, 255, 0.85)",
+        color: "#fff",
         fontSize: 12,
         lineHeight: 16,
         fontWeight: "500",
+        textShadowColor: "#000",
+        textShadowOffset: { width: 1.25, height: 1.25 },
+        textShadowRadius: 1,
     },
 });

package/dist/react-native/components/snap-item-group.js

@@ -13,7 +13,9 @@ export function SnapItemGroup({ element: { props }, children, }) {
     const { colors } = useSnapTheme();
     const border = Boolean(props.border);
     const separator = Boolean(props.separator);
-    const gap = GAP_MAP[String(props.gap ?? "sm")] ?? 4;
+    const explicitGap = typeof props.gap === "string" ? String(props.gap) : undefined;
+    const defaultGap = border || separator ? "sm" : "none";
+    const gap = GAP_MAP[explicitGap ?? defaultGap] ?? GAP_MAP[defaultGap];
     const items = Children.toArray(children);
     return (_jsx(SnapItemGroupBorderProvider, { value: border, children: _jsx(View, { style: [
                 styles.group,

package/dist/react-native/components/snap-item.js

@@ -74,8 +74,8 @@ const styles = StyleSheet.create({
         borderRadius: 9999,
     },
     title: {
-        fontSize: 15,
-        lineHeight: 20,
+        fontSize: 14,
+        lineHeight: 19,
         fontWeight: "500",
     },
     description: {

package/dist/react-native/components/snap-text.js

@@ -3,7 +3,7 @@ import { StyleSheet, Text, View } from "react-native";
 import { useSnapStackDirection } from "../stack-direction-context.js";
 import { useSnapTheme } from "../theme.js";
 const SIZE_STYLES = {
-    md: { fontSize: 16, lineHeight: 22 },
+    md: { fontSize: 15, lineHeight: 21 },
     sm: { fontSize: 13, lineHeight: 16 },
 };
 const WEIGHT_MAP = {

package/package.json

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

package/src/react/components/image.tsx

@@ -29,7 +29,7 @@ export function SnapImage({
       ratio={ratio}
       className={cn(
         "relative overflow-hidden rounded-lg",
-        inHorizontalStack ? "min-w-0 flex-1 basis-0" : "w-full",
+        inHorizontalStack ? "min-w-0 flex-1 basis-0" : "w-full"
       )}
     >
       {/* eslint-disable-next-line @next/next/no-img-element */}
@@ -39,14 +39,27 @@ export function SnapImage({
         className="absolute inset-0 size-full object-cover"
       />
       {hasOverlay && (
-        <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/75 via-black/35 to-transparent p-3 pt-8 text-white">
+        <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/70 via-black/35 to-transparent p-3 pt-10 text-white">
           {title && (
-            <div className="truncate text-sm font-semibold leading-5">
+            <div
+              className="truncate text-sm font-semibold leading-5"
+              style={{
+                textShadow:
+                  "0 1px 2px rgba(0,0,0,0.95), 0 0 3px rgba(0,0,0,0.9)",
+                WebkitTextStroke: "0.25px rgba(0,0,0,0.75)",
+              }}
+            >
               {title}
             </div>
           )}
           {subtitle && (
-            <div className="truncate text-xs font-medium leading-4 text-white/85">
+            <div
+              className="truncate text-xs font-medium leading-4 text-white/90"
+              style={{
+                textShadow:
+                  "0 1px 2px rgba(0,0,0,0.95), 0 0 3px rgba(0,0,0,0.9)",
+              }}
+            >
               {subtitle}
             </div>
           )}

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

@@ -21,7 +21,10 @@ export function SnapItemGroup({
 }) {
   const border = Boolean(props.border);
   const separator = Boolean(props.separator);
-  const gap = GAP_MAP[String(props.gap ?? "sm")] ?? "gap-1";
+  const explicitGap =
+    typeof props.gap === "string" ? String(props.gap) : undefined;
+  const defaultGap = border || separator ? "sm" : "none";
+  const gap = GAP_MAP[explicitGap ?? defaultGap] ?? GAP_MAP[defaultGap]!;
   const items = Children.toArray(children);
   const colors = useSnapColors();
 

package/src/react/components/item.tsx

@@ -73,7 +73,7 @@ export function SnapItem({
         "gap-2 py-1.5",
         inBorderedGroup ? "px-2" : "px-0",
         /** Horizontal: share width with peers. Vertical: don't fill column height. */
-        inHorizontalStack && "flex-1",
+        inHorizontalStack && "flex-1"
       )}
       style={{
         columnGap: 8,
@@ -111,7 +111,11 @@ export function SnapItem({
         </ItemMedia>
       )}
       <ItemContent className="gap-0">
-        <ItemTitle style={{ color: colors.text }}>{title}</ItemTitle>
+        <ItemTitle
+          style={{ color: colors.text, fontSize: 14, lineHeight: "19px" }}
+        >
+          {title}
+        </ItemTitle>
         {description && (
           <ItemDescription
             className="mt-0 text-xs leading-snug"

package/src/react/components/text.tsx

@@ -17,13 +17,16 @@ export function SnapText({
 }) {
   const content = String(props.content ?? "");
   const size = String(props.size ?? "md") as "md" | "sm";
-  const weight = props.weight ? String(props.weight) as "bold" | "normal" : undefined;
+  const weight = props.weight
+    ? (String(props.weight) as "bold" | "normal")
+    : undefined;
   const align = (props.align as "left" | "center" | "right") ?? undefined;
   const config = SIZE_MAP[size] ?? SIZE_MAP.md;
   const colors = useSnapColors();
   const stackDir = useSnapStackDirection();
   const inHorizontalStack = stackDir === "horizontal";
-  const maxLines = typeof props.maxLines === "number" ? props.maxLines : undefined;
+  const maxLines =
+    typeof props.maxLines === "number" ? props.maxLines : undefined;
 
   return (
     <Text
@@ -39,10 +42,11 @@ export function SnapText({
          * column's height, distributing siblings when the row is taller than its
          * content (e.g. text next to a tall image).
          */
-        inHorizontalStack ? "min-w-0 shrink" : "min-w-0",
+        inHorizontalStack ? "min-w-0 shrink" : "min-w-0"
       )}
       style={{
         color: colors.text,
+        fontSize: size === "md" ? 15 : undefined,
         lineHeight: size === "sm" ? 1.35 : 1.4,
         ...(maxLines
           ? {

package/src/react-native/components/snap-image.tsx

@@ -1,5 +1,7 @@
 import type { ComponentRenderProps } from "@json-render/react-native";
 import { Image } from "expo-image";
+import { useCallback, useState } from "react";
+import type { ViewProps } from "react-native";
 import { StyleSheet, Text, View } from "react-native";
 import { useSnapStackDirection } from "../stack-direction-context";
 
@@ -20,13 +22,22 @@ export function SnapImage({
   const ratio = aspectToRatio(String(props.aspect ?? "1:1"));
   const stackDir = useSnapStackDirection();
   const inHorizontalStack = stackDir === "horizontal";
+  const [frameWidth, setFrameWidth] = useState(0);
+  const measuredHeight = frameWidth > 0 ? frameWidth / ratio : undefined;
+  const handleLayout = useCallback<NonNullable<ViewProps["onLayout"]>>((event) => {
+    const nextWidth = Math.round(event.nativeEvent.layout.width);
+    setFrameWidth((currentWidth) =>
+      currentWidth !== nextWidth ? nextWidth : currentWidth,
+    );
+  }, []);
 
   return (
     <View
+      onLayout={handleLayout}
       style={[
         styles.frame,
         inHorizontalStack ? styles.frameInHorizontalRow : styles.frameFullWidth,
-        { aspectRatio: ratio },
+        measuredHeight ? { height: measuredHeight } : { aspectRatio: ratio },
       ]}
     >
       <Image
@@ -36,17 +47,19 @@ export function SnapImage({
         accessibilityLabel={alt || undefined}
       />
       {hasOverlay ? (
-        <View style={styles.overlay}>
-          {title ? (
-            <Text numberOfLines={1} style={styles.title}>
-              {title}
-            </Text>
-          ) : null}
-          {subtitle ? (
-            <Text numberOfLines={1} style={styles.subtitle}>
-              {subtitle}
-            </Text>
-          ) : null}
+        <View style={styles.overlay} pointerEvents="none">
+          <View style={styles.overlayContent}>
+            {title ? (
+              <Text numberOfLines={1} style={styles.title}>
+                {title}
+              </Text>
+            ) : null}
+            {subtitle ? (
+              <Text numberOfLines={1} style={styles.subtitle}>
+                {subtitle}
+              </Text>
+            ) : null}
+          </View>
         </View>
       ) : null}
     </View>
@@ -71,21 +84,33 @@ const styles = StyleSheet.create({
     left: 0,
     right: 0,
     bottom: 0,
-    paddingHorizontal: 12,
-    paddingTop: 24,
-    paddingBottom: 10,
-    backgroundColor: "rgba(0, 0, 0, 0.48)",
+    paddingHorizontal: 3,
+    paddingBottom: 3,
+  },
+  overlayContent: {
+    alignSelf: "flex-start",
+    maxWidth: "100%",
+    borderRadius: 5,
+    paddingHorizontal: 5,
+    paddingVertical: 3,
+    backgroundColor: "rgba(0, 0, 0, 0.22)",
   },
   title: {
     color: "#fff",
     fontSize: 14,
     lineHeight: 18,
     fontWeight: "700",
+    textShadowColor: "#000",
+    textShadowOffset: { width: 1.25, height: 1.25 },
+    textShadowRadius: 1,
   },
   subtitle: {
-    color: "rgba(255, 255, 255, 0.85)",
+    color: "#fff",
     fontSize: 12,
     lineHeight: 16,
     fontWeight: "500",
+    textShadowColor: "#000",
+    textShadowOffset: { width: 1.25, height: 1.25 },
+    textShadowRadius: 1,
   },
 });

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

@@ -18,7 +18,10 @@ export function SnapItemGroup({
   const { colors } = useSnapTheme();
   const border = Boolean(props.border);
   const separator = Boolean(props.separator);
-  const gap = GAP_MAP[String(props.gap ?? "sm")] ?? 4;
+  const explicitGap =
+    typeof props.gap === "string" ? String(props.gap) : undefined;
+  const defaultGap = border || separator ? "sm" : "none";
+  const gap = GAP_MAP[explicitGap ?? defaultGap] ?? GAP_MAP[defaultGap]!;
   const items = Children.toArray(children);
 
   return (

package/src/react-native/components/snap-item.tsx

@@ -135,8 +135,8 @@ const styles = StyleSheet.create({
     borderRadius: 9999,
   },
   title: {
-    fontSize: 15,
-    lineHeight: 20,
+    fontSize: 14,
+    lineHeight: 19,
     fontWeight: "500",
   },
   description: {

package/src/react-native/components/snap-text.tsx

@@ -3,8 +3,15 @@ import { StyleSheet, Text, View } from "react-native";
 import { useSnapStackDirection } from "../stack-direction-context";
 import { useSnapTheme } from "../theme";
 
-const SIZE_STYLES: Record<string, { fontSize: number; lineHeight?: number; fontWeight?: "400" | "500" | "600" | "700" }> = {
-  md: { fontSize: 16, lineHeight: 22 },
+const SIZE_STYLES: Record<
+  string,
+  {
+    fontSize: number;
+    lineHeight?: number;
+    fontWeight?: "400" | "500" | "600" | "700";
+  }
+> = {
+  md: { fontSize: 15, lineHeight: 21 },
   sm: { fontSize: 13, lineHeight: 16 },
 };
 
@@ -20,13 +27,16 @@ export function SnapText({
   const content = String(props.content ?? "");
   const size = String(props.size ?? "md");
   const weight = props.weight ? String(props.weight) : undefined;
-  const align = (props.align as "left" | "center" | "right" | undefined) ?? undefined;
+  const align =
+    (props.align as "left" | "center" | "right" | undefined) ?? undefined;
 
   const sizeStyle = SIZE_STYLES[size] ?? SIZE_STYLES.md;
   const resolvedWeight = weight ? WEIGHT_MAP[weight] : sizeStyle?.fontWeight;
-  const textAlign = align === "center" ? "center" : align === "right" ? "right" : "left";
+  const textAlign =
+    align === "center" ? "center" : align === "right" ? "right" : "left";
   const inHorizontalStack = useSnapStackDirection() === "horizontal";
-  const maxLines = typeof props.maxLines === "number" ? props.maxLines : undefined;
+  const maxLines =
+    typeof props.maxLines === "number" ? props.maxLines : undefined;
 
   return (
     <View style={inHorizontalStack ? styles.wrapRow : styles.wrapCol}>