@thelol3882/sapar 0.0.0-stage → 0.3.0

package/package.json

@@ -1,6 +1,150 @@
 {
   "name": "@thelol3882/sapar",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.3.0",
+  "description": "Sapar: headless product tours and a What's New feed for React, Next.js and Expo, with an in-memory or HTTP source.",
+  "keywords": [
+    "product-tour",
+    "onboarding",
+    "walkthrough",
+    "whats-new",
+    "announcements",
+    "react",
+    "nextjs",
+    "expo",
+    "react-native",
+    "headless"
+  ],
+  "license": "MIT",
+  "author": "Dias Shabarov",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/thelol3882/sapar.git"
+  },
+  "homepage": "https://github.com/thelol3882/sapar#readme",
+  "bugs": {
+    "url": "https://github.com/thelol3882/sapar/issues"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "templates",
+    "!templates/**/*.test.*"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/core/index.d.ts",
+      "import": "./dist/core/index.js"
+    },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react/index.js"
+    },
+    "./web": {
+      "types": "./dist/web/index.d.ts",
+      "import": "./dist/web/index.js"
+    },
+    "./next": {
+      "types": "./dist/next/index.d.ts",
+      "import": "./dist/next/index.js"
+    },
+    "./rtk": {
+      "types": "./dist/rtk/index.d.ts",
+      "import": "./dist/rtk/index.js"
+    },
+    "./expo": {
+      "types": "./dist/expo/index.d.ts",
+      "import": "./dist/expo/index.js"
+    },
+    "./expo-router": {
+      "types": "./dist/expo-router/index.d.ts",
+      "import": "./dist/expo-router/index.js"
+    }
+  },
+  "dependencies": {
+    "@floating-ui/react-dom": "^2.1.6"
+  },
+  "peerDependencies": {
+    "@react-native-async-storage/async-storage": ">=2 <4",
+    "@reduxjs/toolkit": ">=2",
+    "next": ">=15",
+    "react": ">=18.3",
+    "react-dom": ">=18.3",
+    "react-redux": ">=9",
+    "react-native": ">=0.79",
+    "react-native-svg": ">=15",
+    "expo-router": ">=5",
+    "@mantine/core": ">=7",
+    "typescript": ">=5"
+  },
+  "peerDependenciesMeta": {
+    "@react-native-async-storage/async-storage": {
+      "optional": true
+    },
+    "@reduxjs/toolkit": {
+      "optional": true
+    },
+    "next": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    },
+    "react-redux": {
+      "optional": true
+    },
+    "react-native": {
+      "optional": true
+    },
+    "react-native-svg": {
+      "optional": true
+    },
+    "expo-router": {
+      "optional": true
+    },
+    "@mantine/core": {
+      "optional": true
+    },
+    "typescript": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@mantine/core": "^9.8.0",
+    "@mantine/hooks": "^9.8.0",
+    "@react-native-async-storage/async-storage": "^3.1.1",
+    "@reduxjs/toolkit": "^2.11.1",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.0.4",
+    "async-storage-v2": "npm:@react-native-async-storage/async-storage@2.2.0",
+    "expo-router": "^58.0.30",
+    "jsdom": "^29.1.1",
+    "next": "^16.2.6",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
+    "react-native": "^0.88.1",
+    "react-native-svg": "^15.16.1",
+    "react-redux": "^9.2.0",
+    "tsup": "^8.5.0",
+    "typescript": "^5.9.3",
+    "vitest": "^4.1.5"
+  },
+  "bin": {
+    "sapar": "./dist/cli/index.js"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "rm -rf dist && tsup",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit"
+  }
 }

package/templates/expo/AnnouncementModal.tsx

@@ -0,0 +1,102 @@
+// After copying, change these imports to '@thelol3882/sapar/...'
+import { Image, Linking, Modal, Pressable, StyleSheet, Text, useColorScheme, View } from 'react-native';
+import { useAnnouncementInterruption, useWhatsNew } from '../../src/react';
+
+export interface AnnouncementModalLabels {
+    acknowledge: string;
+    takeTour: string;
+}
+
+const DEFAULT_LABELS: AnnouncementModalLabels = {
+    acknowledge: 'Got it',
+    takeTour: 'Take the tour',
+};
+
+// Replace these with your design tokens.
+const palette = {
+    light: { surface: '#ffffff', text: '#171717', muted: '#525252', accent: '#4f46e5', onAccent: '#ffffff', pressed: '#f5f5f5', backdrop: 'rgba(0, 0, 0, 0.5)' },
+    dark: { surface: '#171717', text: '#f5f5f5', muted: '#d4d4d4', accent: '#818cf8', onAccent: '#ffffff', pressed: '#262626', backdrop: 'rgba(0, 0, 0, 0.5)' },
+};
+
+export type TourColors = Record<keyof (typeof palette)['light'], string>;
+
+function useColors(overrides: Partial<TourColors> | undefined): TourColors {
+    return { ...palette[useColorScheme() === 'dark' ? 'dark' : 'light'], ...overrides };
+}
+
+const styles = StyleSheet.create({
+    root: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: 16 },
+    backdrop: StyleSheet.absoluteFill,
+    card: { width: '100%', maxWidth: 448, gap: 12, padding: 24, borderRadius: 12 },
+    image: { width: '100%', height: 160, borderRadius: 8 },
+    title: { fontSize: 18, fontWeight: '600' },
+    body: { fontSize: 14, lineHeight: 20 },
+    link: { fontSize: 14, fontWeight: '500' },
+    actions: { flexDirection: 'row', justifyContent: 'flex-end', gap: 8, paddingTop: 8 },
+    button: { paddingHorizontal: 12, paddingVertical: 8, borderRadius: 8 },
+    buttonLabel: { fontSize: 14, fontWeight: '500' },
+});
+
+export interface AnnouncementModalProps {
+    labels?: Partial<AnnouncementModalLabels>;
+    /** Overrides the palette of the current colour scheme. */
+    colors?: Partial<TourColors>;
+}
+
+export function AnnouncementModal({ labels, colors: colorOverrides }: AnnouncementModalProps) {
+    const text = { ...DEFAULT_LABELS, ...labels };
+    const colors = useColors(colorOverrides);
+    const { announcement, dismiss, acknowledge } = useAnnouncementInterruption();
+    const { recordClick, startTour } = useWhatsNew();
+
+    if (!announcement) return null;
+    const { key, tourKey, cta } = announcement;
+
+    async function takeTour(key: string): Promise<void> {
+        await acknowledge();
+        await startTour(key);
+    }
+
+    function openCta(url: string): void {
+        recordClick(key);
+        void Linking.openURL(url);
+    }
+
+    return (
+        <Modal visible transparent animationType="fade" onRequestClose={() => void dismiss()}>
+            <View style={styles.root} accessibilityViewIsModal>
+                <Pressable accessible={false} style={[styles.backdrop, { backgroundColor: colors.backdrop }]} onPress={() => void dismiss()} />
+                <View role="dialog" style={[styles.card, { backgroundColor: colors.surface }]}>
+                    {announcement.imageUrl && <Image source={{ uri: announcement.imageUrl }} style={styles.image} />}
+                    <Text role="heading" style={[styles.title, { color: colors.text }]}>
+                        {announcement.title}
+                    </Text>
+                    <Text style={[styles.body, { color: colors.muted }]}>{announcement.body}</Text>
+                    {cta && (
+                        <Pressable role="link" onPress={() => openCta(cta.url)}>
+                            <Text style={[styles.link, { color: colors.accent }]}>{cta.label}</Text>
+                        </Pressable>
+                    )}
+                    <View style={styles.actions}>
+                        {tourKey && (
+                            <Pressable
+                                role="button"
+                                onPress={() => void takeTour(tourKey)}
+                                style={({ pressed }) => [styles.button, pressed && { backgroundColor: colors.pressed }]}
+                            >
+                                <Text style={[styles.buttonLabel, { color: colors.text }]}>{text.takeTour}</Text>
+                            </Pressable>
+                        )}
+                        <Pressable
+                            role="button"
+                            onPress={() => void acknowledge()}
+                            style={[styles.button, { backgroundColor: colors.accent }]}
+                        >
+                            <Text style={[styles.buttonLabel, { color: colors.onAccent }]}>{text.acknowledge}</Text>
+                        </Pressable>
+                    </View>
+                </View>
+            </View>
+        </Modal>
+    );
+}

package/templates/expo/TourCard.tsx

@@ -0,0 +1,112 @@
+// After copying, change these imports to '@thelol3882/sapar/...'
+import { StyleSheet, useColorScheme, useWindowDimensions, View } from 'react-native';
+import { TourOverlay, TourStep, type TourPopoverProps } from '../../src/expo';
+import type { StepAnnouncement, StepCount } from '../../src/react';
+
+export interface TourCardLabels {
+    next: string;
+    back: string;
+    skip: string;
+    done: string;
+    close: string;
+    progress: ({ position, total }: StepCount) => string;
+    announceStep: ({ position, total, title }: StepAnnouncement) => string;
+}
+
+const DEFAULT_LABELS: TourCardLabels = {
+    next: 'Next',
+    back: 'Back',
+    skip: 'Skip tour',
+    done: 'Done',
+    close: 'Close tour',
+    progress: ({ position, total }) => `${position} / ${total}`,
+    announceStep: ({ position, total, title }) => `Step ${position} of ${total}: ${title}`,
+};
+
+// Replace these with your design tokens.
+const palette = {
+    light: { surface: '#ffffff', border: '#e5e5e5', text: '#171717', muted: '#525252', accent: '#4f46e5', onAccent: '#ffffff', pressed: '#f5f5f5' },
+    dark: { surface: '#171717', border: '#404040', text: '#f5f5f5', muted: '#d4d4d4', accent: '#6366f1', onAccent: '#ffffff', pressed: '#262626' },
+};
+
+export type TourColors = Record<keyof (typeof palette)['light'], string>;
+
+function useColors(overrides: Partial<TourColors> | undefined): TourColors {
+    return { ...palette[useColorScheme() === 'dark' ? 'dark' : 'light'], ...overrides };
+}
+
+const CARD_WIDTH = 320;
+const CARD_MARGIN = 16;
+
+const styles = StyleSheet.create({
+    card: { alignSelf: 'center', padding: 16, borderRadius: 12, borderWidth: StyleSheet.hairlineWidth },
+    header: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
+    progress: { fontSize: 12, fontWeight: '500' },
+    closeLabel: { fontSize: 20, lineHeight: 24 },
+    title: { marginTop: 8, fontSize: 16, fontWeight: '600' },
+    body: { marginTop: 4, fontSize: 14, lineHeight: 20 },
+    footer: { marginTop: 16, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
+    actions: { flexDirection: 'row', alignItems: 'center', gap: 8 },
+    button: { paddingHorizontal: 12, paddingVertical: 8, borderRadius: 8 },
+    buttonLabel: { fontSize: 14, fontWeight: '500' },
+});
+
+export interface TourCardProps extends Pick<TourPopoverProps, 'insets' | 'presentation'> {
+    labels?: Partial<TourCardLabels>;
+    /** Overrides the palette of the current colour scheme. */
+    colors?: Partial<TourColors>;
+}
+
+export function TourCard({ labels, colors: colorOverrides, insets, presentation }: TourCardProps) {
+    const text = { ...DEFAULT_LABELS, ...labels };
+    const colors = useColors(colorOverrides);
+    const { width } = useWindowDimensions();
+
+    const secondary = ({ pressed }: { pressed: boolean }) => [styles.button, pressed && { backgroundColor: colors.pressed }];
+    const secondaryLabel = [styles.buttonLabel, { color: colors.muted }];
+
+    return (
+        <TourOverlay insets={insets} presentation={presentation}>
+            <TourStep.Root
+                announceStep={text.announceStep}
+                style={[
+                    styles.card,
+                    {
+                        width: Math.min(CARD_WIDTH, width - CARD_MARGIN * 2),
+                        backgroundColor: colors.surface,
+                        borderColor: colors.border,
+                    },
+                ]}
+            >
+                <View style={styles.header}>
+                    <TourStep.Progress style={[styles.progress, { color: colors.muted }]}>
+                        {text.progress}
+                    </TourStep.Progress>
+                    <TourStep.Close
+                        accessibilityLabel={text.close}
+                        style={secondary}
+                        textStyle={[styles.closeLabel, { color: colors.muted }]}
+                    />
+                </View>
+                <TourStep.Title style={[styles.title, { color: colors.text }]} />
+                <TourStep.Body style={[styles.body, { color: colors.muted }]} />
+                <View style={styles.footer}>
+                    <TourStep.Skip style={secondary} textStyle={secondaryLabel}>
+                        {text.skip}
+                    </TourStep.Skip>
+                    <View style={styles.actions}>
+                        <TourStep.Back style={secondary} textStyle={secondaryLabel}>
+                            {text.back}
+                        </TourStep.Back>
+                        <TourStep.Next
+                            nextLabel={text.next}
+                            doneLabel={text.done}
+                            style={[styles.button, { backgroundColor: colors.accent }]}
+                            textStyle={[styles.buttonLabel, { color: colors.onAccent }]}
+                        />
+                    </View>
+                </View>
+            </TourStep.Root>
+        </TourOverlay>
+    );
+}

package/templates/expo/WhatsNewButton.tsx

@@ -0,0 +1,87 @@
+// After copying, change these imports to '@thelol3882/sapar/...'
+import { useState } from 'react';
+import { Pressable, StyleSheet, Text, useColorScheme, View, type StyleProp, type ViewStyle } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+import { useWhatsNew } from '../../src/react';
+import { WhatsNewPanel, type WhatsNewPanelProps } from './WhatsNewPanel';
+
+export interface WhatsNewButtonProps extends Pick<WhatsNewPanelProps, 'labels' | 'locale' | 'formatDate'> {
+    style?: StyleProp<ViewStyle>;
+    /** Accessible name; the unread count is appended. */
+    label?: string;
+    /** Overrides the palette of the current colour scheme. */
+    colors?: Partial<TourColors>;
+    /** Overrides the palette of the panel the button opens. */
+    panelColors?: WhatsNewPanelProps['colors'];
+}
+
+// Replace these with your design tokens.
+const palette = {
+    light: { icon: '#525252', pressed: '#f5f5f5', badge: '#ef4444', onBadge: '#ffffff' },
+    dark: { icon: '#d4d4d4', pressed: '#262626', badge: '#ef4444', onBadge: '#ffffff' },
+};
+
+export type TourColors = Record<keyof (typeof palette)['light'], string>;
+
+function useColors(overrides: Partial<TourColors> | undefined): TourColors {
+    return { ...palette[useColorScheme() === 'dark' ? 'dark' : 'light'], ...overrides };
+}
+
+const SPARKLE_PATH =
+    'M9.9 15.5a2 2 0 0 0-1.4-1.4l-6.1-1.6a.5.5 0 0 1 0-1l6.1-1.6a2 2 0 0 0 1.4-1.4l1.6-6.1a.5.5 0 0 1 1 0l1.6 6.1a2 2 0 0 0 1.4 1.4l6.1 1.6a.5.5 0 0 1 0 1l-6.1 1.6a2 2 0 0 0-1.4 1.4l-1.6 6.1a.5.5 0 0 1-1 0zM20 3v4M22 5h-4M4 17v2M5 18H3';
+
+const styles = StyleSheet.create({
+    button: { padding: 8, borderRadius: 999 },
+    badge: {
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        minWidth: 16,
+        paddingHorizontal: 4,
+        borderRadius: 999,
+        alignItems: 'center',
+    },
+    badgeLabel: { fontSize: 10, fontWeight: '600', lineHeight: 16 },
+});
+
+export function WhatsNewButton({
+    style,
+    label = "What's new",
+    labels,
+    locale,
+    formatDate,
+    colors: colorOverrides,
+    panelColors,
+}: WhatsNewButtonProps) {
+    const [open, setOpen] = useState(false);
+    const { unreadCount } = useWhatsNew();
+    const colors = useColors(colorOverrides);
+
+    return (
+        <>
+            <Pressable
+                role="button"
+                accessibilityLabel={unreadCount > 0 ? `${label} (${unreadCount})` : label}
+                onPress={() => setOpen(true)}
+                style={({ pressed }) => [styles.button, pressed && { backgroundColor: colors.pressed }, style]}
+            >
+                <Svg width={20} height={20} viewBox="0 0 24 24" fill="none" accessibilityElementsHidden>
+                    <Path d={SPARKLE_PATH} stroke={colors.icon} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
+                </Svg>
+                {unreadCount > 0 && (
+                    <View style={[styles.badge, { backgroundColor: colors.badge }]}>
+                        <Text style={[styles.badgeLabel, { color: colors.onBadge }]}>{unreadCount}</Text>
+                    </View>
+                )}
+            </Pressable>
+            <WhatsNewPanel
+                open={open}
+                onClose={() => setOpen(false)}
+                labels={labels}
+                locale={locale}
+                formatDate={formatDate}
+                colors={panelColors}
+            />
+        </>
+    );
+}

package/templates/expo/WhatsNewPanel.tsx

@@ -0,0 +1,167 @@
+// After copying, change these imports to '@thelol3882/sapar/...'
+import { FlatList, Image, Linking, Modal, Pressable, StyleSheet, Text, useColorScheme, View } from 'react-native';
+import { useWhatsNewPanel, type WhatsNewPanelItem } from '../../src/react';
+
+export interface WhatsNewPanelLabels {
+    title: string;
+    empty: string;
+    close: string;
+    takeTour: string;
+    new: string;
+}
+
+const DEFAULT_LABELS: WhatsNewPanelLabels = {
+    title: "What's new",
+    empty: 'Nothing new yet.',
+    close: 'Close',
+    takeTour: 'Take the tour',
+    new: 'New',
+};
+
+export interface WhatsNewPanelProps {
+    open: boolean;
+    onClose: () => void;
+    labels?: Partial<WhatsNewPanelLabels>;
+    /** BCP 47 tag for the default date format. Defaults to the device locale. */
+    locale?: string;
+    /** Replaces the default date format; the template then never uses `Intl`. */
+    formatDate?: (isoDate: string) => string;
+    /** Overrides the palette of the current colour scheme. */
+    colors?: Partial<TourColors>;
+}
+
+// Replace these with your design tokens.
+const palette = {
+    light: { surface: '#ffffff', border: '#e5e5e5', text: '#171717', muted: '#525252', accent: '#4f46e5', onAccent: '#ffffff' },
+    dark: { surface: '#171717', border: '#404040', text: '#f5f5f5', muted: '#d4d4d4', accent: '#818cf8', onAccent: '#ffffff' },
+};
+
+export type TourColors = Record<keyof (typeof palette)['light'], string>;
+
+function useColors(overrides: Partial<TourColors> | undefined): TourColors {
+    return { ...palette[useColorScheme() === 'dark' ? 'dark' : 'light'], ...overrides };
+}
+
+const styles = StyleSheet.create({
+    header: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', padding: 20, borderBottomWidth: StyleSheet.hairlineWidth },
+    heading: { fontSize: 16, fontWeight: '600' },
+    closeLabel: { paddingHorizontal: 8, fontSize: 24, lineHeight: 28 },
+    list: { padding: 20, gap: 24 },
+    entry: { gap: 8, paddingBottom: 24, borderBottomWidth: StyleSheet.hairlineWidth },
+    entryHeader: { flexDirection: 'row', alignItems: 'center', gap: 8 },
+    entryTitle: { fontSize: 14, fontWeight: '600' },
+    newBadge: { paddingHorizontal: 8, borderRadius: 999 },
+    newBadgeLabel: { fontSize: 10, fontWeight: '600', lineHeight: 16, textTransform: 'uppercase' },
+    date: { fontSize: 12 },
+    image: { width: '100%', height: 160, borderRadius: 8 },
+    body: { fontSize: 14, lineHeight: 20 },
+    actions: { flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center', gap: 12 },
+    tourButton: { paddingHorizontal: 12, paddingVertical: 8, borderRadius: 8 },
+    tourButtonLabel: { fontSize: 14, fontWeight: '500' },
+    link: { fontSize: 14, fontWeight: '500' },
+    empty: { fontSize: 14 },
+});
+
+function formatDateWithIntl(isoDate: string, locale: string | undefined): string {
+    return new Intl.DateTimeFormat(locale, { dateStyle: 'medium' }).format(new Date(isoDate));
+}
+
+function Entry({
+    item,
+    labels,
+    colors,
+    formatDate,
+    onCtaClick,
+    onTakeTour,
+}: {
+    item: WhatsNewPanelItem;
+    labels: WhatsNewPanelLabels;
+    colors: TourColors;
+    formatDate: (isoDate: string) => string;
+    onCtaClick: (key: string) => void;
+    onTakeTour: (tourKey: string) => void;
+}) {
+    const { tourKey, cta } = item;
+
+    function openCta(url: string): void {
+        onCtaClick(item.key);
+        void Linking.openURL(url);
+    }
+
+    return (
+        <View style={[styles.entry, { borderColor: colors.border }]}>
+            <View style={styles.entryHeader}>
+                <Text role="heading" style={[styles.entryTitle, { color: colors.text }]}>
+                    {item.title}
+                </Text>
+                {item.isNew && (
+                    <View style={[styles.newBadge, { backgroundColor: colors.accent }]}>
+                        <Text style={[styles.newBadgeLabel, { color: colors.onAccent }]}>{labels.new}</Text>
+                    </View>
+                )}
+            </View>
+            {item.publishedAt && <Text style={[styles.date, { color: colors.muted }]}>{formatDate(item.publishedAt)}</Text>}
+            {item.imageUrl && <Image source={{ uri: item.imageUrl }} style={styles.image} />}
+            <Text style={[styles.body, { color: colors.muted }]}>{item.body}</Text>
+            <View style={styles.actions}>
+                {tourKey && (
+                    <Pressable
+                        role="button"
+                        onPress={() => onTakeTour(tourKey)}
+                        style={[styles.tourButton, { backgroundColor: colors.accent }]}
+                    >
+                        <Text style={[styles.tourButtonLabel, { color: colors.onAccent }]}>{labels.takeTour}</Text>
+                    </Pressable>
+                )}
+                {cta && (
+                    <Pressable role="link" onPress={() => openCta(cta.url)}>
+                        <Text style={[styles.link, { color: colors.accent }]}>{cta.label}</Text>
+                    </Pressable>
+                )}
+            </View>
+        </View>
+    );
+}
+
+export function WhatsNewPanel({ open, onClose, labels, locale, formatDate, colors: colorOverrides }: WhatsNewPanelProps) {
+    const text = { ...DEFAULT_LABELS, ...labels };
+    const colors = useColors(colorOverrides);
+    const { items, recordClick, startTour } = useWhatsNewPanel(open);
+    const format = formatDate ?? ((isoDate: string) => formatDateWithIntl(isoDate, locale));
+
+    function takeTour(tourKey: string): void {
+        onClose();
+        void startTour(tourKey);
+    }
+
+    return (
+        <Modal visible={open} animationType="slide" presentationStyle="pageSheet" onRequestClose={onClose}>
+            <View style={{ flex: 1, backgroundColor: colors.surface }}>
+                <View style={[styles.header, { borderColor: colors.border }]}>
+                    <Text role="heading" style={[styles.heading, { color: colors.text }]}>
+                        {text.title}
+                    </Text>
+                    <Pressable role="button" accessibilityLabel={text.close} onPress={onClose}>
+                        <Text style={[styles.closeLabel, { color: colors.muted }]}>×</Text>
+                    </Pressable>
+                </View>
+                <FlatList
+                    data={items}
+                    keyExtractor={(item) => item.key}
+                    contentContainerStyle={styles.list}
+                    ListEmptyComponent={<Text style={[styles.empty, { color: colors.muted }]}>{text.empty}</Text>}
+                    renderItem={({ item }) => (
+                        <Entry
+                            item={item}
+                            labels={text}
+                            colors={colors}
+                            formatDate={format}
+                            onCtaClick={recordClick}
+                            onTakeTour={takeTour}
+                        />
+                    )}
+                />
+            </View>
+        </Modal>
+    );
+}