@buoy-gg/ask-buoy 7.0.33 → 7.0.34

package/lib/module/blocks/MediaBlocks.js

@@ -1,135 +1 @@
-"use strict";
-
-/**
- * Image grid — two columns up to six, a snapping horizontal carousel beyond
- * that. Tap a tile to see it full-width in place; tap again to shrink. Alt
- * text is required by the schema and read by VoiceOver.
- */
-import { useState } from "react";
-import { Image, Pressable, ScrollView, StyleSheet, Text, useWindowDimensions, View } from "react-native";
-import { night } from "@buoy-gg/shared-ui";
-import { CAPS } from "@buoy-gg/agent-core";
-import { Card, More } from "./primitives";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function ImageGrid({
-  block
-}) {
-  const [open, setOpen] = useState(null);
-  const {
-    width
-  } = useWindowDimensions();
-  const images = block.images.slice(0, CAPS.gridMax);
-  const carousel = images.length > CAPS.gridImages;
-  const tile = Math.min(150, Math.floor((width - 2 * night.gutter - 24 - 8) / 2));
-  const Tile = ({
-    img,
-    i
-  }) => /*#__PURE__*/_jsxs(Pressable, {
-    testID: `buoy-block-image-${i}`,
-    accessibilityRole: "imagebutton",
-    accessibilityLabel: img.alt,
-    onPress: () => setOpen(open === i ? null : i),
-    style: [styles.tile, {
-      width: tile
-    }, carousel && styles.tileCarousel],
-    children: [/*#__PURE__*/_jsx(Image, {
-      source: {
-        uri: img.url
-      },
-      style: [styles.image, {
-        width: tile,
-        height: tile
-      }],
-      resizeMode: "cover",
-      accessibilityLabel: img.alt
-    }), /*#__PURE__*/_jsx(Text, {
-      style: styles.caption,
-      numberOfLines: 1,
-      children: img.caption ?? img.alt
-    })]
-  }, `${img.url}-${i}`);
-  return /*#__PURE__*/_jsxs(Card, {
-    title: block.title,
-    source: block.source,
-    testID: `buoy-block-imagegrid-${block.id}`,
-    children: [open !== null && images[open] ? /*#__PURE__*/_jsxs(Pressable, {
-      onPress: () => setOpen(null),
-      style: styles.hero,
-      accessibilityRole: "button",
-      accessibilityLabel: `Close ${images[open].alt}`,
-      children: [/*#__PURE__*/_jsx(Image, {
-        source: {
-          uri: images[open].url
-        },
-        style: styles.heroImage,
-        resizeMode: "contain",
-        accessibilityLabel: images[open].alt
-      }), /*#__PURE__*/_jsx(Text, {
-        style: styles.heroCaption,
-        children: images[open].caption ?? images[open].alt
-      })]
-    }) : null, carousel ? /*#__PURE__*/_jsx(ScrollView, {
-      horizontal: true,
-      showsHorizontalScrollIndicator: false,
-      snapToInterval: tile + 8,
-      decelerationRate: "fast",
-      contentContainerStyle: styles.carousel,
-      children: images.map((img, i) => /*#__PURE__*/_jsx(Tile, {
-        img: img,
-        i: i
-      }, i))
-    }) : /*#__PURE__*/_jsx(View, {
-      style: styles.grid,
-      children: images.map((img, i) => /*#__PURE__*/_jsx(Tile, {
-        img: img,
-        i: i
-      }, i))
-    }), /*#__PURE__*/_jsx(More, {
-      shown: images.length,
-      total: block.total
-    })]
-  });
-}
-const styles = StyleSheet.create({
-  grid: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    gap: 8,
-    padding: 12
-  },
-  carousel: {
-    gap: 8,
-    paddingHorizontal: 12,
-    paddingVertical: 12
-  },
-  tile: {
-    gap: 4
-  },
-  tileCarousel: {},
-  image: {
-    borderRadius: night.radius.row,
-    backgroundColor: night.color.fill
-  },
-  caption: {
-    color: night.color.textSecondary,
-    fontSize: night.font.micro
-  },
-  hero: {
-    alignItems: "center",
-    padding: 12,
-    gap: 6,
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: night.color.separator
-  },
-  heroImage: {
-    width: "100%",
-    height: 240,
-    borderRadius: night.radius.row,
-    backgroundColor: night.color.fill
-  },
-  heroCaption: {
-    color: night.color.text,
-    fontSize: night.font.caption
-  }
-});
-//# sourceMappingURL=MediaBlocks.js.map
+"use strict";import{useState}from"react";import{Image,Pressable,ScrollView,StyleSheet,Text,useWindowDimensions,View}from"react-native";import{night}from"@buoy-gg/shared-ui";import{CAPS}from"@buoy-gg/agent-core";import{Card,More}from"./primitives";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export function ImageGrid({block:e}){const[t,i]=useState(null),{width:o}=useWindowDimensions(),r=e.images.slice(0,CAPS.gridMax),s=r.length>CAPS.gridImages,l=Math.min(150,Math.floor((o-2*night.gutter-24-8)/2)),a=({img:e,i:o})=>_jsxs(Pressable,{testID:`buoy-block-image-${o}`,accessibilityRole:"imagebutton",accessibilityLabel:e.alt,onPress:()=>i(t===o?null:o),style:[styles.tile,{width:l},s&&styles.tileCarousel],children:[_jsx(Image,{source:{uri:e.url},style:[styles.image,{width:l,height:l}],resizeMode:"cover",accessibilityLabel:e.alt}),_jsx(Text,{style:styles.caption,numberOfLines:1,children:e.caption??e.alt})]},`${e.url}-${o}`);return _jsxs(Card,{title:e.title,source:e.source,testID:`buoy-block-imagegrid-${e.id}`,children:[null!==t&&r[t]?_jsxs(Pressable,{onPress:()=>i(null),style:styles.hero,accessibilityRole:"button",accessibilityLabel:`Close ${r[t].alt}`,children:[_jsx(Image,{source:{uri:r[t].url},style:styles.heroImage,resizeMode:"contain",accessibilityLabel:r[t].alt}),_jsx(Text,{style:styles.heroCaption,children:r[t].caption??r[t].alt})]}):null,s?_jsx(ScrollView,{horizontal:!0,showsHorizontalScrollIndicator:!1,snapToInterval:l+8,decelerationRate:"fast",contentContainerStyle:styles.carousel,children:r.map((e,t)=>_jsx(a,{img:e,i:t},t))}):_jsx(View,{style:styles.grid,children:r.map((e,t)=>_jsx(a,{img:e,i:t},t))}),_jsx(More,{shown:r.length,total:e.total})]})}const styles=StyleSheet.create({grid:{flexDirection:"row",flexWrap:"wrap",gap:8,padding:12},carousel:{gap:8,paddingHorizontal:12,paddingVertical:12},tile:{gap:4},tileCarousel:{},image:{borderRadius:night.radius.row,backgroundColor:night.color.fill},caption:{color:night.color.textSecondary,fontSize:night.font.micro},hero:{alignItems:"center",padding:12,gap:6,borderBottomWidth:StyleSheet.hairlineWidth,borderBottomColor:night.color.separator},heroImage:{width:"100%",height:240,borderRadius:night.radius.row,backgroundColor:night.color.fill},heroCaption:{color:night.color.text,fontSize:night.font.caption}});