@agimon-ai/po-native-components 0.0.0-alpha.3 → 0.0.0-alpha.30

package/dist/components/Dialog.mjs

@@ -4,19 +4,19 @@ import { Button } from "./Button.mjs";
 import { CloseIcon } from "../icons/icons.mjs";
 import { useControllable } from "../lib/useControllable.mjs";
 import { View } from "react-native-unistyles/components/native/View";
-import { withAlpha } from "@agimon-ai/po-web-components/nativeTheme";
+import { Text } from "react-native-unistyles/components/native/Text";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { Easing, Modal, Platform } from "react-native";
-import { Text } from "react-native-unistyles/components/native/Text";
+import { Animated } from "react-native-unistyles/components/native/Animated";
+import { withAlpha } from "@agimon-ai/po-web-components/nativeTheme";
 import { createContext, useContext, useEffect, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Pressable } from "react-native-unistyles/components/native/Pressable";
-import { Animated } from "react-native-unistyles/components/native/Animated";
 
 //#region src/components/Dialog.tsx
-/** `bg-doom-deep/70`. */
+/** `bg-po-deep/70`. */
 const BACKDROP_ALPHA_PERCENT = 70;
-/** `animate-doom-pop` starts the card slightly small and grows it into place. */
+/** `animate-po-pop` starts the card slightly small and grows it into place. */
 const POP_FROM_SCALE = .96;
 /** `max-w-[calc(100vw-24px)]`: 12pt clear of each screen edge. */
 const SCREEN_MARGIN = 12;

package/dist/components/Dialog.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.mjs","names":["withAlpha","createContext","ReactNode","useContext","useEffect","useRef","Easing","Modal","Platform","StyleProp","TextProps","ViewProps","ViewStyle","StyleSheet","useUnistyles","CloseIcon","fontOf","useControllable","wrapText","Button","ButtonProps","BACKDROP_ALPHA_PERCENT","POP_FROM_SCALE","SCREEN_MARGIN","DialogWidth","DialogState","open","setOpen","DialogContext","undefined","DialogProps","defaultOpen","onOpenChange","children","Dialog","current","DialogTrigger","onPress","props","event","DialogClose","DialogContentProps","width","style","closeLabel","DialogContent","theme","progress","Animated","Value","x1","y1","x2","y2","motion","easing","setValue","timing","toValue","duration","pop","bezier","useNativeDriver","OS","start","_styles","styles","useVariants","root","backdrop","backgroundColor","colors","deep","card","opacity","transform","scale","interpolate","inputRange","outputRange","DialogPartProps","Omit","DialogHeaderProps","dismissible","DialogHeader","header","DialogTitle","title","DialogDescription","description","DialogBody","body","DialogFooterVariant","DialogFooterProps","variant","DialogFooter","_styles2","footer","hint","create","flex","alignItems","justifyContent","padding","position","top","right","bottom","left","maxHeight","overflow","borderRadius","lg","borderWidth","borderColor","border","panel","variants","sm","maxWidth","md","uni__dependencies","flexDirection","gap","spacing","minWidth","borderBottomWidth","borderBottomColor","flexShrink","color","hi","fontFamily","sans","fontSize","xl","lineHeight","letterSpacing","fontWeight","semibold","dim","lineHeightRelaxed","plain","bar","flexWrap","minHeight","borderTopWidth","borderTopColor","paddingHorizontal","paddingVertical","faint"],"sources":["../../src/components/Dialog.tsx"],"sourcesContent":["import { withAlpha } from '@agimon-ai/po-web-components/nativeTheme';\nimport { createContext, type ReactNode, useContext, useEffect, useRef } from 'react';\nimport {\n  Animated,\n  Easing,\n  Modal,\n  Platform,\n  Pressable,\n  type StyleProp,\n  Text,\n  type TextProps,\n  View,\n  type ViewProps,\n  type ViewStyle,\n} from 'react-native';\nimport { StyleSheet, useUnistyles } from 'react-native-unistyles';\n\nimport { CloseIcon } from '../icons/icons';\nimport { fontOf } from '../lib/fonts';\nimport { useControllable } from '../lib/useControllable';\nimport { wrapText } from '../lib/wrapText';\nimport { Button, type ButtonProps } from './Button';\n\n/*\n * The web Dialog as a centred card in an RN Modal: the native shape for a\n * question that blocks, such as a destructive confirmation. Android back and\n * a backdrop tap close it, as Escape and an outside click do on the web.\n */\n\n/** `bg-doom-deep/70`. */\nconst BACKDROP_ALPHA_PERCENT = 70;\n/** `animate-doom-pop` starts the card slightly small and grows it into place. */\nconst POP_FROM_SCALE = 0.96;\n/** `max-w-[calc(100vw-24px)]`: 12pt clear of each screen edge. */\nconst SCREEN_MARGIN = 12;\n\nexport type DialogWidth = 'sm' | 'md' | 'lg';\n\ninterface DialogState {\n  open: boolean;\n  setOpen: (open: boolean) => void;\n}\n\nconst DialogContext = createContext<DialogState>({ open: false, setOpen: () => undefined });\n\nexport interface DialogProps {\n  /** Controlled mode; pair with onOpenChange. Omit it and the dialog keeps its own state. */\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  children?: ReactNode;\n}\n\nexport function Dialog({ open, defaultOpen = false, onOpenChange, children }: DialogProps) {\n  const [current, setOpen] = useControllable(open, defaultOpen, onOpenChange);\n  return <DialogContext.Provider value={{ open: current, setOpen }}>{children}</DialogContext.Provider>;\n}\n\n/** A Button that opens the enclosing dialog. */\nexport function DialogTrigger({ onPress, ...props }: ButtonProps) {\n  const { setOpen } = useContext(DialogContext);\n  return (\n    <Button\n      onPress={(event) => {\n        onPress?.(event);\n        setOpen(true);\n      }}\n      {...props}\n    />\n  );\n}\n\n/** A Button that closes the enclosing dialog. */\nexport function DialogClose({ onPress, ...props }: ButtonProps) {\n  const { setOpen } = useContext(DialogContext);\n  return (\n    <Button\n      onPress={(event) => {\n        onPress?.(event);\n        setOpen(false);\n      }}\n      {...props}\n    />\n  );\n}\n\nexport interface DialogContentProps {\n  /** Width preset; `style` may still override. */\n  width?: DialogWidth;\n  /** Applied to the card, after the preset. */\n  style?: StyleProp<ViewStyle>;\n  /** What the backdrop announces as its close action. */\n  closeLabel?: string;\n  children?: ReactNode;\n}\n\nexport function DialogContent({ width = 'md', style, closeLabel = 'close', children }: DialogContentProps) {\n  const { open, setOpen } = useContext(DialogContext);\n  const { theme } = useUnistyles();\n  const progress = useRef(new Animated.Value(0)).current;\n  const [x1, y1, x2, y2] = theme.motion.easing;\n  useEffect(() => {\n    if (!open) return;\n    progress.setValue(0);\n    Animated.timing(progress, {\n      toValue: 1,\n      duration: theme.motion.pop,\n      easing: Easing.bezier(x1, y1, x2, y2),\n      useNativeDriver: Platform.OS !== 'web',\n    }).start();\n  }, [open, progress, theme.motion.pop, x1, y1, x2, y2]);\n  styles.useVariants({ width });\n  return (\n    <Modal visible={open} transparent animationType=\"fade\" statusBarTranslucent onRequestClose={() => setOpen(false)}>\n      <View style={styles.root}>\n        <Pressable\n          accessibilityRole=\"button\"\n          accessibilityLabel={closeLabel}\n          onPress={() => setOpen(false)}\n          // Alpha mixes are computed in render from useUnistyles(), not in StyleSheet.create: on web Unistyles hands\n          // the stylesheet CSS variables, which withAlpha cannot read.\n          style={[styles.backdrop, { backgroundColor: withAlpha(theme.colors.deep, BACKDROP_ALPHA_PERCENT) }]}\n        />\n        <Animated.View\n          accessibilityViewIsModal\n          style={[\n            styles.card,\n            style,\n            {\n              opacity: progress,\n              transform: [{ scale: progress.interpolate({ inputRange: [0, 1], outputRange: [POP_FROM_SCALE, 1] }) }],\n            },\n          ]}\n        >\n          {children}\n        </Animated.View>\n      </View>\n    </Modal>\n  );\n}\n\nexport interface DialogPartProps extends Omit<ViewProps, 'children' | 'style'> {\n  children?: ReactNode;\n  style?: StyleProp<ViewStyle>;\n}\n\nexport interface DialogHeaderProps extends DialogPartProps {\n  /**\n   * Show the close control at the right of the strip. Off by default, as on\n   * the web: Android back and a backdrop tap already close every dialog.\n   */\n  dismissible?: boolean;\n  /** What the close control announces. */\n  closeLabel?: string;\n}\n\nexport function DialogHeader({\n  dismissible = false,\n  closeLabel = 'close',\n  style,\n  children,\n  ...props\n}: DialogHeaderProps) {\n  const { setOpen } = useContext(DialogContext);\n  return (\n    <View style={[styles.header, style]} {...props}>\n      {children}\n      {dismissible ? (\n        <Button variant=\"ghost\" size=\"icon\" accessibilityLabel={closeLabel} onPress={() => setOpen(false)}>\n          <CloseIcon size={12} color=\"faint\" />\n        </Button>\n      ) : null}\n    </View>\n  );\n}\n\nexport function DialogTitle({ style, ...props }: TextProps) {\n  return <Text accessibilityRole=\"header\" style={[styles.title, style]} {...props} />;\n}\n\nexport function DialogDescription({ style, ...props }: TextProps) {\n  return <Text style={[styles.description, style]} {...props} />;\n}\n\nexport function DialogBody({ style, children, ...props }: DialogPartProps) {\n  return (\n    <View style={[styles.body, style]} {...props}>\n      {wrapText(children, styles.description)}\n    </View>\n  );\n}\n\nexport type DialogFooterVariant = 'plain' | 'bar';\n\nexport interface DialogFooterProps extends DialogPartProps {\n  /** `plain`: buttons alone, inside the body's padding. `bar`: the recessed full-width strip with a hint at the left. */\n  variant?: DialogFooterVariant;\n}\n\nexport function DialogFooter({ variant = 'plain', style, children, ...props }: DialogFooterProps) {\n  styles.useVariants({ footer: variant });\n  return (\n    <View style={[styles.footer, style]} {...props}>\n      {wrapText(children, styles.hint)}\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create((theme) => ({\n  root: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: SCREEN_MARGIN },\n  backdrop: { position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 },\n  card: {\n    width: '100%',\n    maxHeight: '100%',\n    overflow: 'hidden',\n    borderRadius: theme.borderRadius.lg,\n    borderWidth: 1,\n    borderColor: theme.colors.border,\n    backgroundColor: theme.colors.panel,\n    variants: {\n      width: {\n        sm: { maxWidth: 360 },\n        md: { maxWidth: 480 },\n        lg: { maxWidth: 620 },\n      },\n    },\n  },\n  header: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    gap: theme.spacing(3),\n    minWidth: 0,\n    borderBottomWidth: 1,\n    borderBottomColor: theme.colors.border,\n    padding: theme.spacing(3),\n  },\n  title: {\n    flexShrink: 1,\n    color: theme.colors.hi,\n    fontFamily: fontOf(theme.fontFamily.sans),\n    fontSize: theme.fontSize.xl,\n    lineHeight: theme.lineHeight.xl,\n    letterSpacing: theme.letterSpacing.xl,\n    fontWeight: theme.fontWeight.semibold,\n  },\n  description: {\n    color: theme.colors.dim,\n    fontFamily: fontOf(theme.fontFamily.sans),\n    fontSize: theme.fontSize.sm,\n    lineHeight: theme.lineHeightRelaxed.sm,\n  },\n  body: { gap: theme.spacing(3), padding: theme.spacing(3) },\n  footer: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    gap: theme.spacing(2),\n    variants: {\n      footer: {\n        plain: { justifyContent: 'flex-end' },\n        bar: {\n          flexWrap: 'wrap',\n          justifyContent: 'space-between',\n          minHeight: 34,\n          borderTopWidth: 1,\n          borderTopColor: theme.colors['border-soft'],\n          backgroundColor: theme.colors.deep,\n          paddingHorizontal: theme.spacing(3),\n          paddingVertical: theme.spacing(1.5),\n        },\n      },\n    },\n  },\n  hint: {\n    color: theme.colors.faint,\n    fontFamily: fontOf(theme.fontFamily.sans),\n    fontSize: theme.fontSize['2xs'],\n    lineHeight: theme.lineHeight['2xs'],\n  },\n}));\n"],"mappings":"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"}
+{"version":3,"file":"Dialog.mjs","names":["withAlpha","createContext","ReactNode","useContext","useEffect","useRef","Easing","Modal","Platform","StyleProp","TextProps","ViewProps","ViewStyle","StyleSheet","useUnistyles","CloseIcon","fontOf","useControllable","wrapText","Button","ButtonProps","BACKDROP_ALPHA_PERCENT","POP_FROM_SCALE","SCREEN_MARGIN","DialogWidth","DialogState","open","setOpen","DialogContext","undefined","DialogProps","defaultOpen","onOpenChange","children","Dialog","current","DialogTrigger","onPress","props","event","DialogClose","DialogContentProps","width","style","closeLabel","DialogContent","theme","progress","Animated","Value","x1","y1","x2","y2","motion","easing","setValue","timing","toValue","duration","pop","bezier","useNativeDriver","OS","start","_styles","styles","useVariants","root","backdrop","backgroundColor","colors","deep","card","opacity","transform","scale","interpolate","inputRange","outputRange","DialogPartProps","Omit","DialogHeaderProps","dismissible","DialogHeader","header","DialogTitle","title","DialogDescription","description","DialogBody","body","DialogFooterVariant","DialogFooterProps","variant","DialogFooter","_styles2","footer","hint","create","flex","alignItems","justifyContent","padding","position","top","right","bottom","left","maxHeight","overflow","borderRadius","lg","borderWidth","borderColor","border","panel","variants","sm","maxWidth","md","uni__dependencies","flexDirection","gap","spacing","minWidth","borderBottomWidth","borderBottomColor","flexShrink","color","hi","fontFamily","sans","fontSize","xl","lineHeight","letterSpacing","fontWeight","semibold","dim","lineHeightRelaxed","plain","bar","flexWrap","minHeight","borderTopWidth","borderTopColor","paddingHorizontal","paddingVertical","faint"],"sources":["../../src/components/Dialog.tsx"],"sourcesContent":["import { withAlpha } from '@agimon-ai/po-web-components/nativeTheme';\nimport { createContext, type ReactNode, useContext, useEffect, useRef } from 'react';\nimport {\n  Animated,\n  Easing,\n  Modal,\n  Platform,\n  Pressable,\n  type StyleProp,\n  Text,\n  type TextProps,\n  View,\n  type ViewProps,\n  type ViewStyle,\n} from 'react-native';\nimport { StyleSheet, useUnistyles } from 'react-native-unistyles';\n\nimport { CloseIcon } from '../icons/icons';\nimport { fontOf } from '../lib/fonts';\nimport { useControllable } from '../lib/useControllable';\nimport { wrapText } from '../lib/wrapText';\nimport { Button, type ButtonProps } from './Button';\n\n/*\n * The web Dialog as a centred card in an RN Modal: the native shape for a\n * question that blocks, such as a destructive confirmation. Android back and\n * a backdrop tap close it, as Escape and an outside click do on the web.\n */\n\n/** `bg-po-deep/70`. */\nconst BACKDROP_ALPHA_PERCENT = 70;\n/** `animate-po-pop` starts the card slightly small and grows it into place. */\nconst POP_FROM_SCALE = 0.96;\n/** `max-w-[calc(100vw-24px)]`: 12pt clear of each screen edge. */\nconst SCREEN_MARGIN = 12;\n\nexport type DialogWidth = 'sm' | 'md' | 'lg';\n\ninterface DialogState {\n  open: boolean;\n  setOpen: (open: boolean) => void;\n}\n\nconst DialogContext = createContext<DialogState>({ open: false, setOpen: () => undefined });\n\nexport interface DialogProps {\n  /** Controlled mode; pair with onOpenChange. Omit it and the dialog keeps its own state. */\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  children?: ReactNode;\n}\n\nexport function Dialog({ open, defaultOpen = false, onOpenChange, children }: DialogProps) {\n  const [current, setOpen] = useControllable(open, defaultOpen, onOpenChange);\n  return <DialogContext.Provider value={{ open: current, setOpen }}>{children}</DialogContext.Provider>;\n}\n\n/** A Button that opens the enclosing dialog. */\nexport function DialogTrigger({ onPress, ...props }: ButtonProps) {\n  const { setOpen } = useContext(DialogContext);\n  return (\n    <Button\n      onPress={(event) => {\n        onPress?.(event);\n        setOpen(true);\n      }}\n      {...props}\n    />\n  );\n}\n\n/** A Button that closes the enclosing dialog. */\nexport function DialogClose({ onPress, ...props }: ButtonProps) {\n  const { setOpen } = useContext(DialogContext);\n  return (\n    <Button\n      onPress={(event) => {\n        onPress?.(event);\n        setOpen(false);\n      }}\n      {...props}\n    />\n  );\n}\n\nexport interface DialogContentProps {\n  /** Width preset; `style` may still override. */\n  width?: DialogWidth;\n  /** Applied to the card, after the preset. */\n  style?: StyleProp<ViewStyle>;\n  /** What the backdrop announces as its close action. */\n  closeLabel?: string;\n  children?: ReactNode;\n}\n\nexport function DialogContent({ width = 'md', style, closeLabel = 'close', children }: DialogContentProps) {\n  const { open, setOpen } = useContext(DialogContext);\n  const { theme } = useUnistyles();\n  const progress = useRef(new Animated.Value(0)).current;\n  const [x1, y1, x2, y2] = theme.motion.easing;\n  useEffect(() => {\n    if (!open) return;\n    progress.setValue(0);\n    Animated.timing(progress, {\n      toValue: 1,\n      duration: theme.motion.pop,\n      easing: Easing.bezier(x1, y1, x2, y2),\n      useNativeDriver: Platform.OS !== 'web',\n    }).start();\n  }, [open, progress, theme.motion.pop, x1, y1, x2, y2]);\n  styles.useVariants({ width });\n  return (\n    <Modal visible={open} transparent animationType=\"fade\" statusBarTranslucent onRequestClose={() => setOpen(false)}>\n      <View style={styles.root}>\n        <Pressable\n          accessibilityRole=\"button\"\n          accessibilityLabel={closeLabel}\n          onPress={() => setOpen(false)}\n          // Alpha mixes are computed in render from useUnistyles(), not in StyleSheet.create: on web Unistyles hands\n          // the stylesheet CSS variables, which withAlpha cannot read.\n          style={[styles.backdrop, { backgroundColor: withAlpha(theme.colors.deep, BACKDROP_ALPHA_PERCENT) }]}\n        />\n        <Animated.View\n          accessibilityViewIsModal\n          style={[\n            styles.card,\n            style,\n            {\n              opacity: progress,\n              transform: [{ scale: progress.interpolate({ inputRange: [0, 1], outputRange: [POP_FROM_SCALE, 1] }) }],\n            },\n          ]}\n        >\n          {children}\n        </Animated.View>\n      </View>\n    </Modal>\n  );\n}\n\nexport interface DialogPartProps extends Omit<ViewProps, 'children' | 'style'> {\n  children?: ReactNode;\n  style?: StyleProp<ViewStyle>;\n}\n\nexport interface DialogHeaderProps extends DialogPartProps {\n  /**\n   * Show the close control at the right of the strip. Off by default, as on\n   * the web: Android back and a backdrop tap already close every dialog.\n   */\n  dismissible?: boolean;\n  /** What the close control announces. */\n  closeLabel?: string;\n}\n\nexport function DialogHeader({\n  dismissible = false,\n  closeLabel = 'close',\n  style,\n  children,\n  ...props\n}: DialogHeaderProps) {\n  const { setOpen } = useContext(DialogContext);\n  return (\n    <View style={[styles.header, style]} {...props}>\n      {children}\n      {dismissible ? (\n        <Button variant=\"ghost\" size=\"icon\" accessibilityLabel={closeLabel} onPress={() => setOpen(false)}>\n          <CloseIcon size={12} color=\"faint\" />\n        </Button>\n      ) : null}\n    </View>\n  );\n}\n\nexport function DialogTitle({ style, ...props }: TextProps) {\n  return <Text accessibilityRole=\"header\" style={[styles.title, style]} {...props} />;\n}\n\nexport function DialogDescription({ style, ...props }: TextProps) {\n  return <Text style={[styles.description, style]} {...props} />;\n}\n\nexport function DialogBody({ style, children, ...props }: DialogPartProps) {\n  return (\n    <View style={[styles.body, style]} {...props}>\n      {wrapText(children, styles.description)}\n    </View>\n  );\n}\n\nexport type DialogFooterVariant = 'plain' | 'bar';\n\nexport interface DialogFooterProps extends DialogPartProps {\n  /** `plain`: buttons alone, inside the body's padding. `bar`: the recessed full-width strip with a hint at the left. */\n  variant?: DialogFooterVariant;\n}\n\nexport function DialogFooter({ variant = 'plain', style, children, ...props }: DialogFooterProps) {\n  styles.useVariants({ footer: variant });\n  return (\n    <View style={[styles.footer, style]} {...props}>\n      {wrapText(children, styles.hint)}\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create((theme) => ({\n  root: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: SCREEN_MARGIN },\n  backdrop: { position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 },\n  card: {\n    width: '100%',\n    maxHeight: '100%',\n    overflow: 'hidden',\n    borderRadius: theme.borderRadius.lg,\n    borderWidth: 1,\n    borderColor: theme.colors.border,\n    backgroundColor: theme.colors.panel,\n    variants: {\n      width: {\n        sm: { maxWidth: 360 },\n        md: { maxWidth: 480 },\n        lg: { maxWidth: 620 },\n      },\n    },\n  },\n  header: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    gap: theme.spacing(3),\n    minWidth: 0,\n    borderBottomWidth: 1,\n    borderBottomColor: theme.colors.border,\n    padding: theme.spacing(3),\n  },\n  title: {\n    flexShrink: 1,\n    color: theme.colors.hi,\n    fontFamily: fontOf(theme.fontFamily.sans),\n    fontSize: theme.fontSize.xl,\n    lineHeight: theme.lineHeight.xl,\n    letterSpacing: theme.letterSpacing.xl,\n    fontWeight: theme.fontWeight.semibold,\n  },\n  description: {\n    color: theme.colors.dim,\n    fontFamily: fontOf(theme.fontFamily.sans),\n    fontSize: theme.fontSize.sm,\n    lineHeight: theme.lineHeightRelaxed.sm,\n  },\n  body: { gap: theme.spacing(3), padding: theme.spacing(3) },\n  footer: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    gap: theme.spacing(2),\n    variants: {\n      footer: {\n        plain: { justifyContent: 'flex-end' },\n        bar: {\n          flexWrap: 'wrap',\n          justifyContent: 'space-between',\n          minHeight: 34,\n          borderTopWidth: 1,\n          borderTopColor: theme.colors['border-soft'],\n          backgroundColor: theme.colors.deep,\n          paddingHorizontal: theme.spacing(3),\n          paddingVertical: theme.spacing(1.5),\n        },\n      },\n    },\n  },\n  hint: {\n    color: theme.colors.faint,\n    fontFamily: fontOf(theme.fontFamily.sans),\n    fontSize: theme.fontSize['2xs'],\n    lineHeight: theme.lineHeight['2xs'],\n  },\n}));\n"],"mappings":"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"}

package/dist/components/Dot.d.mts

@@ -1,5 +1,5 @@
-import { DotTone } from "@agimon-ai/po-web-components/nativeTheme";
 import { StyleProp, ViewStyle } from "react-native";
+import { DotTone } from "@agimon-ai/po-web-components/nativeTheme";
 //#region src/components/Dot.d.ts
 type DotTone$1 = DotTone;
 export type DotSize = 'xs' | 'sm' | 'md' | 'lg';

package/dist/components/Dot.mjs

@@ -1,11 +1,11 @@
-import { withAlpha } from "@agimon-ai/po-web-components/nativeTheme";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { Animated } from "react-native-unistyles/components/native/Animated";
+import { withAlpha } from "@agimon-ai/po-web-components/nativeTheme";
 import { useEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
-import { Animated } from "react-native-unistyles/components/native/Animated";
 
 //#region src/components/Dot.tsx
-/** `bg-doom-faint/40`: a thing that exists but is not live. */
+/** `bg-po-faint/40`: a thing that exists but is not live. */
 const MUTED_ALPHA_PERCENT = 40;
 /** Tailwind's `animate-pulse`: a 2s cycle down to half opacity and back. */
 const PULSE_HALF_CYCLE_MS = 1e3;

package/dist/components/Dot.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Dot.mjs","names":["DotTone","Tone","withAlpha","useEffect","useRef","StyleProp","ViewStyle","StyleSheet","useUnistyles","DotSize","MUTED_ALPHA_PERCENT","PULSE_HALF_CYCLE_MS","PULSE_LOW_OPACITY","DotProps","tone","size","pulse","style","Dot","theme","_styles","styles","useVariants","opacity","Animated","Value","current","setValue","undefined","loop","sequence","timing","toValue","duration","useNativeDriver","start","stop","dot","backgroundColor","colors","faint","create","flexShrink","borderRadius","full","variants","neutral","muted","blue","green","yellow","red","magenta","violet","cyan","orange","teal","xs","width","spacing","height","sm","md","lg","uni__dependencies"],"sources":["../../src/components/Dot.tsx"],"sourcesContent":["import { type DotTone as Tone, withAlpha } from '@agimon-ai/po-web-components/nativeTheme';\nimport { useEffect, useRef } from 'react';\nimport { Animated, type StyleProp, type ViewStyle } from 'react-native';\nimport { StyleSheet, useUnistyles } from 'react-native-unistyles';\n\nexport type DotTone = Tone;\nexport type DotSize = 'xs' | 'sm' | 'md' | 'lg';\n\n/** `bg-doom-faint/40`: a thing that exists but is not live. */\nconst MUTED_ALPHA_PERCENT = 40;\n/** Tailwind's `animate-pulse`: a 2s cycle down to half opacity and back. */\nconst PULSE_HALF_CYCLE_MS = 1000;\nconst PULSE_LOW_OPACITY = 0.5;\n\nexport interface DotProps {\n  tone?: DotTone;\n  size?: DotSize;\n  /** Something is live: the dot breathes. */\n  pulse?: boolean;\n  style?: StyleProp<ViewStyle>;\n}\n\n/** The status dot: a colour and, while something is live, a pulse. Hidden from screen readers. */\nexport function Dot({ tone = 'neutral', size = 'sm', pulse = false, style }: DotProps) {\n  const { theme } = useUnistyles();\n  styles.useVariants({ tone, size });\n  const opacity = useRef(new Animated.Value(1)).current;\n  useEffect(() => {\n    if (!pulse) {\n      opacity.setValue(1);\n      return undefined;\n    }\n    const loop = Animated.loop(\n      Animated.sequence([\n        Animated.timing(opacity, { toValue: PULSE_LOW_OPACITY, duration: PULSE_HALF_CYCLE_MS, useNativeDriver: true }),\n        Animated.timing(opacity, { toValue: 1, duration: PULSE_HALF_CYCLE_MS, useNativeDriver: true }),\n      ]),\n    );\n    loop.start();\n    return () => loop.stop();\n  }, [pulse, opacity]);\n  return (\n    <Animated.View\n      accessible={false}\n      importantForAccessibility=\"no-hide-descendants\"\n      accessibilityElementsHidden\n      style={[\n        styles.dot,\n        // Alpha mixes are computed in render from useUnistyles(), not in StyleSheet.create: on web Unistyles hands\n        // the stylesheet CSS variables, which withAlpha cannot read.\n        tone === 'muted' && { backgroundColor: withAlpha(theme.colors.faint, MUTED_ALPHA_PERCENT) },\n        { opacity },\n        style,\n      ]}\n    />\n  );\n}\n\nconst styles = StyleSheet.create((theme) => ({\n  dot: {\n    flexShrink: 0,\n    borderRadius: theme.borderRadius.full,\n    variants: {\n      tone: {\n        neutral: { backgroundColor: theme.colors.faint },\n        muted: {},\n        blue: { backgroundColor: theme.colors.blue },\n        green: { backgroundColor: theme.colors.green },\n        yellow: { backgroundColor: theme.colors.yellow },\n        red: { backgroundColor: theme.colors.red },\n        magenta: { backgroundColor: theme.colors.magenta },\n        violet: { backgroundColor: theme.colors.violet },\n        cyan: { backgroundColor: theme.colors.cyan },\n        orange: { backgroundColor: theme.colors.orange },\n        teal: { backgroundColor: theme.colors.teal },\n      },\n      size: {\n        xs: { width: theme.spacing(1), height: theme.spacing(1) },\n        sm: { width: theme.spacing(1.5), height: theme.spacing(1.5) },\n        md: { width: theme.spacing(2), height: theme.spacing(2) },\n        lg: { width: theme.spacing(2.5), height: theme.spacing(2.5) },\n      },\n    },\n  },\n}));\n"],"mappings":";;;;;;;;AASA,MAAMU,sBAAsB;;AAE5B,MAAMC,sBAAsB;AAC5B,MAAMC,oBAAoB;;AAW1B,SAAgBM,IAAI,EAAEJ,OAAO,WAAWC,OAAO,MAAMC,QAAQ,OAAOC,SAAmB;CACrF,MAAM,EAAEE,UAAUX,aAAa;CAAE,MAAAY,UAAAC;CAAA;EAAA,MAAAA,SAAAD,QAAAE,YACd;GAAER;GAAMC;EAAK,CAAC;EACjC,MAAMQ,UAAUnB,OAAO,IAAIoB,SAASC,MAAM,CAAC,CAAC,CAAC,CAACC;EAC9CvB,gBAAgB;GACd,IAAI,CAACa,OAAO;IACVO,QAAQI,SAAS,CAAC;IAClB;GACF;GACA,MAAME,OAAOL,SAASK,KACpBL,SAASM,SAAS,CAChBN,SAASO,OAAOR,SAAS;IAAES,SAASpB;IAAmBqB,UAAUtB;IAAqBuB,iBAAiB;GAAK,CAAC,GAC7GV,SAASO,OAAOR,SAAS;IAAES,SAAS;IAAGC,UAAUtB;IAAqBuB,iBAAiB;GAAK,CAAC,CAAC,CAC/F,CACH;GACAL,KAAKM,MAAM;GACX,aAAaN,KAAKO,KAAK;EACzB,GAAG,CAACpB,OAAOO,OAAO,CAAC;EACnB,OACE,oBAAC,SAAS,MAAV;GACE,YAAY;GACZ,2BAA0B;GAC1B;GACA,OAAO;IACLF,OAAOgB;IAGPvB,SAAS,WAAW,EAAEwB,iBAAiBpC,UAAUiB,MAAMoB,OAAOC,OAAO9B,mBAAmB,EAAE;IAC1F,EAAEa,QAAQ;IACVN;GAAK;EACL;CAEJ;AACJ;AAEA,MAAMI,SAASd,WAAWkC,QAAQtB,WAAW,EAC3CkB,KAAK;CACHK,YAAY;CACZC,cAAcxB,MAAMwB,aAAaC;CACjCC,UAAU;EACR/B,MAAM;GACJgC,SAAS,EAAER,iBAAiBnB,MAAMoB,OAAOC,MAAM;GAC/CO,OAAO,CAAC;GACRC,MAAM,EAAEV,iBAAiBnB,MAAMoB,OAAOS,KAAK;GAC3CC,OAAO,EAAEX,iBAAiBnB,MAAMoB,OAAOU,MAAM;GAC7CC,QAAQ,EAAEZ,iBAAiBnB,MAAMoB,OAAOW,OAAO;GAC/CC,KAAK,EAAEb,iBAAiBnB,MAAMoB,OAAOY,IAAI;GACzCC,SAAS,EAAEd,iBAAiBnB,MAAMoB,OAAOa,QAAQ;GACjDC,QAAQ,EAAEf,iBAAiBnB,MAAMoB,OAAOc,OAAO;GAC/CC,MAAM,EAAEhB,iBAAiBnB,MAAMoB,OAAOe,KAAK;GAC3CC,QAAQ,EAAEjB,iBAAiBnB,MAAMoB,OAAOgB,OAAO;GAC/CC,MAAM,EAAElB,iBAAiBnB,MAAMoB,OAAOiB,KAAK;EAC7C;EACAzC,MAAM;GACJ0C,IAAI;IAAEC,OAAOvC,MAAMwC,QAAQ,CAAC;IAAGC,QAAQzC,MAAMwC,QAAQ,CAAC;GAAE;GACxDE,IAAI;IAAEH,OAAOvC,MAAMwC,QAAQ,GAAG;IAAGC,QAAQzC,MAAMwC,QAAQ,GAAG;GAAE;GAC5DG,IAAI;IAAEJ,OAAOvC,MAAMwC,QAAQ,CAAC;IAAGC,QAAQzC,MAAMwC,QAAQ,CAAC;GAAE;GACxDI,IAAI;IAAEL,OAAOvC,MAAMwC,QAAQ,GAAG;IAAGC,QAAQzC,MAAMwC,QAAQ,GAAG;GAAE;EAC9D;CACF;CAACK,mBAAA,CAAA,GAAA,CAAA;AACH,EACF,EAAE"}
+{"version":3,"file":"Dot.mjs","names":["DotTone","Tone","withAlpha","useEffect","useRef","StyleProp","ViewStyle","StyleSheet","useUnistyles","DotSize","MUTED_ALPHA_PERCENT","PULSE_HALF_CYCLE_MS","PULSE_LOW_OPACITY","DotProps","tone","size","pulse","style","Dot","theme","_styles","styles","useVariants","opacity","Animated","Value","current","setValue","undefined","loop","sequence","timing","toValue","duration","useNativeDriver","start","stop","dot","backgroundColor","colors","faint","create","flexShrink","borderRadius","full","variants","neutral","muted","blue","green","yellow","red","magenta","violet","cyan","orange","teal","xs","width","spacing","height","sm","md","lg","uni__dependencies"],"sources":["../../src/components/Dot.tsx"],"sourcesContent":["import { type DotTone as Tone, withAlpha } from '@agimon-ai/po-web-components/nativeTheme';\nimport { useEffect, useRef } from 'react';\nimport { Animated, type StyleProp, type ViewStyle } from 'react-native';\nimport { StyleSheet, useUnistyles } from 'react-native-unistyles';\n\nexport type DotTone = Tone;\nexport type DotSize = 'xs' | 'sm' | 'md' | 'lg';\n\n/** `bg-po-faint/40`: a thing that exists but is not live. */\nconst MUTED_ALPHA_PERCENT = 40;\n/** Tailwind's `animate-pulse`: a 2s cycle down to half opacity and back. */\nconst PULSE_HALF_CYCLE_MS = 1000;\nconst PULSE_LOW_OPACITY = 0.5;\n\nexport interface DotProps {\n  tone?: DotTone;\n  size?: DotSize;\n  /** Something is live: the dot breathes. */\n  pulse?: boolean;\n  style?: StyleProp<ViewStyle>;\n}\n\n/** The status dot: a colour and, while something is live, a pulse. Hidden from screen readers. */\nexport function Dot({ tone = 'neutral', size = 'sm', pulse = false, style }: DotProps) {\n  const { theme } = useUnistyles();\n  styles.useVariants({ tone, size });\n  const opacity = useRef(new Animated.Value(1)).current;\n  useEffect(() => {\n    if (!pulse) {\n      opacity.setValue(1);\n      return undefined;\n    }\n    const loop = Animated.loop(\n      Animated.sequence([\n        Animated.timing(opacity, { toValue: PULSE_LOW_OPACITY, duration: PULSE_HALF_CYCLE_MS, useNativeDriver: true }),\n        Animated.timing(opacity, { toValue: 1, duration: PULSE_HALF_CYCLE_MS, useNativeDriver: true }),\n      ]),\n    );\n    loop.start();\n    return () => loop.stop();\n  }, [pulse, opacity]);\n  return (\n    <Animated.View\n      accessible={false}\n      importantForAccessibility=\"no-hide-descendants\"\n      accessibilityElementsHidden\n      style={[\n        styles.dot,\n        // Alpha mixes are computed in render from useUnistyles(), not in StyleSheet.create: on web Unistyles hands\n        // the stylesheet CSS variables, which withAlpha cannot read.\n        tone === 'muted' && { backgroundColor: withAlpha(theme.colors.faint, MUTED_ALPHA_PERCENT) },\n        { opacity },\n        style,\n      ]}\n    />\n  );\n}\n\nconst styles = StyleSheet.create((theme) => ({\n  dot: {\n    flexShrink: 0,\n    borderRadius: theme.borderRadius.full,\n    variants: {\n      tone: {\n        neutral: { backgroundColor: theme.colors.faint },\n        muted: {},\n        blue: { backgroundColor: theme.colors.blue },\n        green: { backgroundColor: theme.colors.green },\n        yellow: { backgroundColor: theme.colors.yellow },\n        red: { backgroundColor: theme.colors.red },\n        magenta: { backgroundColor: theme.colors.magenta },\n        violet: { backgroundColor: theme.colors.violet },\n        cyan: { backgroundColor: theme.colors.cyan },\n        orange: { backgroundColor: theme.colors.orange },\n        teal: { backgroundColor: theme.colors.teal },\n      },\n      size: {\n        xs: { width: theme.spacing(1), height: theme.spacing(1) },\n        sm: { width: theme.spacing(1.5), height: theme.spacing(1.5) },\n        md: { width: theme.spacing(2), height: theme.spacing(2) },\n        lg: { width: theme.spacing(2.5), height: theme.spacing(2.5) },\n      },\n    },\n  },\n}));\n"],"mappings":";;;;;;;;AASA,MAAMU,sBAAsB;;AAE5B,MAAMC,sBAAsB;AAC5B,MAAMC,oBAAoB;;AAW1B,SAAgBM,IAAI,EAAEJ,OAAO,WAAWC,OAAO,MAAMC,QAAQ,OAAOC,SAAmB;CACrF,MAAM,EAAEE,UAAUX,aAAa;CAAE,MAAAY,UAAAC;CAAA;EAAA,MAAAA,SAAAD,QAAAE,YACd;GAAER;GAAMC;EAAK,CAAC;EACjC,MAAMQ,UAAUnB,OAAO,IAAIoB,SAASC,MAAM,CAAC,CAAC,CAAC,CAACC;EAC9CvB,gBAAgB;GACd,IAAI,CAACa,OAAO;IACVO,QAAQI,SAAS,CAAC;IAClB;GACF;GACA,MAAME,OAAOL,SAASK,KACpBL,SAASM,SAAS,CAChBN,SAASO,OAAOR,SAAS;IAAES,SAASpB;IAAmBqB,UAAUtB;IAAqBuB,iBAAiB;GAAK,CAAC,GAC7GV,SAASO,OAAOR,SAAS;IAAES,SAAS;IAAGC,UAAUtB;IAAqBuB,iBAAiB;GAAK,CAAC,CAAC,CAC/F,CACH;GACAL,KAAKM,MAAM;GACX,aAAaN,KAAKO,KAAK;EACzB,GAAG,CAACpB,OAAOO,OAAO,CAAC;EACnB,OACE,oBAAC,SAAS,MAAV;GACE,YAAY;GACZ,2BAA0B;GAC1B;GACA,OAAO;IACLF,OAAOgB;IAGPvB,SAAS,WAAW,EAAEwB,iBAAiBpC,UAAUiB,MAAMoB,OAAOC,OAAO9B,mBAAmB,EAAE;IAC1F,EAAEa,QAAQ;IACVN;GAAK;EACL;CAEJ;AACJ;AAEA,MAAMI,SAASd,WAAWkC,QAAQtB,WAAW,EAC3CkB,KAAK;CACHK,YAAY;CACZC,cAAcxB,MAAMwB,aAAaC;CACjCC,UAAU;EACR/B,MAAM;GACJgC,SAAS,EAAER,iBAAiBnB,MAAMoB,OAAOC,MAAM;GAC/CO,OAAO,CAAC;GACRC,MAAM,EAAEV,iBAAiBnB,MAAMoB,OAAOS,KAAK;GAC3CC,OAAO,EAAEX,iBAAiBnB,MAAMoB,OAAOU,MAAM;GAC7CC,QAAQ,EAAEZ,iBAAiBnB,MAAMoB,OAAOW,OAAO;GAC/CC,KAAK,EAAEb,iBAAiBnB,MAAMoB,OAAOY,IAAI;GACzCC,SAAS,EAAEd,iBAAiBnB,MAAMoB,OAAOa,QAAQ;GACjDC,QAAQ,EAAEf,iBAAiBnB,MAAMoB,OAAOc,OAAO;GAC/CC,MAAM,EAAEhB,iBAAiBnB,MAAMoB,OAAOe,KAAK;GAC3CC,QAAQ,EAAEjB,iBAAiBnB,MAAMoB,OAAOgB,OAAO;GAC/CC,MAAM,EAAElB,iBAAiBnB,MAAMoB,OAAOiB,KAAK;EAC7C;EACAzC,MAAM;GACJ0C,IAAI;IAAEC,OAAOvC,MAAMwC,QAAQ,CAAC;IAAGC,QAAQzC,MAAMwC,QAAQ,CAAC;GAAE;GACxDE,IAAI;IAAEH,OAAOvC,MAAMwC,QAAQ,GAAG;IAAGC,QAAQzC,MAAMwC,QAAQ,GAAG;GAAE;GAC5DG,IAAI;IAAEJ,OAAOvC,MAAMwC,QAAQ,CAAC;IAAGC,QAAQzC,MAAMwC,QAAQ,CAAC;GAAE;GACxDI,IAAI;IAAEL,OAAOvC,MAAMwC,QAAQ,GAAG;IAAGC,QAAQzC,MAAMwC,QAAQ,GAAG;GAAE;EAC9D;CACF;CAACK,mBAAA,CAAA,GAAA,CAAA;AACH,EACF,EAAE"}

package/dist/components/DropdownMenu.mjs

@@ -6,8 +6,8 @@ import { CheckIcon } from "../icons/icons.mjs";
 import { useControllable } from "../lib/useControllable.mjs";
 import { SheetFrame } from "./SheetFrame.mjs";
 import { View } from "react-native-unistyles/components/native/View";
-import { StyleSheet } from "react-native-unistyles";
 import { Text } from "react-native-unistyles/components/native/Text";
+import { StyleSheet } from "react-native-unistyles";
 import { createContext, useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Pressable } from "react-native-unistyles/components/native/Pressable";

package/dist/components/HashlineLines.d.mts

@@ -0,0 +1,13 @@
+import { PresentedLine } from "@agimon-ai/po-web-components/text";
+import { ViewProps } from "react-native";
+//#region src/components/HashlineLines.d.ts
+export interface HashlineLinesProps extends Omit<ViewProps, 'children'> {
+  lines: readonly PresentedLine[];
+  /** Width of the line-number column, in characters, from `hashlineBody`. */
+  gutter: number;
+  /** The file a body of bare anchored lines came from, for highlighting. */
+  path?: string | undefined;
+}
+export declare function HashlineLines({ lines, gutter, path, style, ...props }: HashlineLinesProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=HashlineLines.d.mts.map

package/dist/components/HashlineLines.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HashlineLines.d.mts","names":[],"sources":["../../src/components/HashlineLines.tsx"],"mappings":";;;iBA0BiB,2BAA2B,KAAK;EAC/C,gBAAgB;;EAEhB;;EAEA;;wBAsCc,gBAAgB,OAAO,QAAQ,MAAM,UAAU,SAAS,qCAAkB,IAAA"}

package/dist/components/HashlineLines.mjs

@@ -0,0 +1,137 @@
+import { fontOf } from "../lib/fonts.mjs";
+import { SyntaxLine } from "./SyntaxLine.mjs";
+import { detectGrammar, hashlineGroups, hashlineGroupsKey, highlightToLines } from "@agimon-ai/po-web-components/text";
+import { View } from "react-native-unistyles/components/native/View";
+import { Text } from "react-native-unistyles/components/native/Text";
+import { StyleSheet } from "react-native-unistyles";
+import { useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/HashlineLines.tsx
+const NO_SPANS = /* @__PURE__ */ new Map();
+/** Spans per presented-line index, kept with the body they belong to, as the web's hook. */
+function useHashlineSpans(lines, path) {
+	const groups = useMemo(() => hashlineGroups(lines, path), [lines, path]);
+	const key = hashlineGroupsKey(groups);
+	const [done, setDone] = useState();
+	useEffect(() => {
+		let live = true;
+		const next = /* @__PURE__ */ new Map();
+		const work = groups.map(async (group) => {
+			const grammar = detectGrammar({
+				path: group.path,
+				text: group.text
+			});
+			if (grammar === void 0) return;
+			const highlighted = await highlightToLines(group.text, grammar);
+			if (highlighted === void 0) return;
+			for (const [offset, index] of group.indices.entries()) {
+				const line = highlighted[offset];
+				if (line !== void 0) next.set(index, line);
+			}
+		});
+		Promise.allSettled(work).then(() => {
+			if (live && next.size > 0) setDone({
+				key,
+				spans: next
+			});
+		});
+		return () => {
+			live = false;
+		};
+	}, [key]);
+	return done?.key === key ? done.spans : NO_SPANS;
+}
+function HashlineLines({ lines, gutter, path, style, ...props }) {
+	const spans = useHashlineSpans(lines, path);
+	return /* @__PURE__ */ jsx(View, {
+		style,
+		...props,
+		children: lines.map((line, index) => {
+			if (line.type === "file") return /* @__PURE__ */ jsx(Text, {
+				numberOfLines: 1,
+				style: [
+					styles.mono,
+					styles.faint,
+					index > 0 && styles.fileGap
+				],
+				children: line.path
+			}, index);
+			if (line.type === "plain") return /* @__PURE__ */ jsx(Text, {
+				selectable: true,
+				style: [styles.mono, styles.dim],
+				children: line.text
+			}, index);
+			const { value } = line;
+			const match = value.marker === "match";
+			return /* @__PURE__ */ jsxs(View, {
+				style: styles.row,
+				children: [
+					value.marker !== void 0 ? /* @__PURE__ */ jsx(Text, {
+						style: [styles.mono, match ? styles.marker : styles.faint],
+						children: match ? ">>" : "  "
+					}) : null,
+					/* @__PURE__ */ jsx(Text, {
+						style: [styles.mono, styles.faint],
+						children: String(value.line).padStart(gutter)
+					}),
+					/* @__PURE__ */ jsx(SyntaxLine, {
+						selectable: true,
+						spans: spans.get(index),
+						text: value.content,
+						style: [
+							styles.mono,
+							styles.content,
+							match ? styles.hi : styles.text
+						]
+					})
+				]
+			}, index);
+		})
+	});
+}
+const styles = StyleSheet.create((theme) => ({
+	row: {
+		flexDirection: "row",
+		gap: theme.spacing(2),
+		uni__dependencies: [0]
+	},
+	fileGap: {
+		marginTop: theme.spacing(1),
+		uni__dependencies: [0]
+	},
+	mono: {
+		fontFamily: fontOf(theme.fontFamily.mono),
+		fontSize: theme.fontSize.sm,
+		lineHeight: theme.lineHeightRelaxed.sm,
+		uni__dependencies: [0]
+	},
+	content: {
+		flex: 1,
+		minWidth: 0
+	},
+	marker: {
+		color: theme.colors.blue,
+		uni__dependencies: [0]
+	},
+	faint: {
+		color: theme.colors.faint,
+		uni__dependencies: [0]
+	},
+	dim: {
+		color: theme.colors.dim,
+		uni__dependencies: [0]
+	},
+	text: {
+		color: theme.colors.text,
+		uni__dependencies: [0]
+	},
+	hi: {
+		color: theme.colors.hi,
+		uni__dependencies: [0]
+	}
+}));
+
+//#endregion
+export { HashlineLines };
+//# sourceMappingURL=HashlineLines.mjs.map

package/dist/components/HashlineLines.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"HashlineLines.mjs","names":["detectGrammar","hashlineGroups","hashlineGroupsKey","highlightToLines","PresentedLine","SyntaxSpan","useEffect","useMemo","useState","ViewProps","StyleSheet","fontOf","SyntaxLine","HashlineLinesProps","Omit","lines","gutter","path","NO_SPANS","ReadonlyMap","Map","useHashlineSpans","groups","key","done","setDone","spans","live","next","work","map","group","grammar","text","undefined","highlighted","offset","index","indices","entries","line","set","Promise","allSettled","then","size","HashlineLines","style","props","type","styles","mono","faint","fileGap","dim","value","match","marker","row","String","padStart","get","content","hi","create","theme","flexDirection","gap","spacing","uni__dependencies","marginTop","fontFamily","fontSize","sm","lineHeight","lineHeightRelaxed","flex","minWidth","color","colors","blue"],"sources":["../../src/components/HashlineLines.tsx"],"sourcesContent":["import {\n  detectGrammar,\n  hashlineGroups,\n  hashlineGroupsKey,\n  highlightToLines,\n  type PresentedLine,\n  type SyntaxSpan,\n} from '@agimon-ai/po-web-components/text';\nimport { useEffect, useMemo, useState } from 'react';\nimport { Text, View, type ViewProps } from 'react-native';\nimport { StyleSheet } from 'react-native-unistyles';\n\nimport { fontOf } from '../lib/fonts';\nimport { SyntaxLine } from './SyntaxLine';\n\n/*\n * The anchored body shared by hashline results, as the web's HashlineLines: a\n * file heading per group, a right-aligned line-number gutter, and a `>>`\n * marker on grep matches. Mono type makes a padded number the gutter, so the\n * column needs no measuring.\n *\n * The anchored lines are coloured with the web's grammars and palette when the\n * body names a file, or when `path` names one. Colour arrives late and never\n * blocks the text: an unhighlighted body is the same body without the colours.\n */\n\nexport interface HashlineLinesProps extends Omit<ViewProps, 'children'> {\n  lines: readonly PresentedLine[];\n  /** Width of the line-number column, in characters, from `hashlineBody`. */\n  gutter: number;\n  /** The file a body of bare anchored lines came from, for highlighting. */\n  path?: string | undefined;\n}\n\nconst NO_SPANS: ReadonlyMap<number, readonly SyntaxSpan[]> = new Map();\n\n/** Spans per presented-line index, kept with the body they belong to, as the web's hook. */\nfunction useHashlineSpans(lines: readonly PresentedLine[], path: string | undefined) {\n  const groups = useMemo(() => hashlineGroups(lines, path), [lines, path]);\n  const key = hashlineGroupsKey(groups);\n  const [done, setDone] = useState<{ key: string; spans: ReadonlyMap<number, readonly SyntaxSpan[]> }>();\n\n  useEffect(() => {\n    let live = true;\n    const next = new Map<number, readonly SyntaxSpan[]>();\n    const work = groups.map(async (group) => {\n      const grammar = detectGrammar({ path: group.path, text: group.text });\n      if (grammar === undefined) return;\n      const highlighted = await highlightToLines(group.text, grammar);\n      if (highlighted === undefined) return;\n      for (const [offset, index] of group.indices.entries()) {\n        const line = highlighted[offset];\n        if (line !== undefined) next.set(index, line);\n      }\n    });\n    // A grammar that fails to load leaves its run plain: colour is decoration.\n    void Promise.allSettled(work).then(() => {\n      if (live && next.size > 0) setDone({ key, spans: next });\n    });\n    return () => {\n      live = false;\n    };\n    // The groups are rebuilt with the lines; their key is what actually changes.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [key]);\n\n  return done?.key === key ? done.spans : NO_SPANS;\n}\n\nexport function HashlineLines({ lines, gutter, path, style, ...props }: HashlineLinesProps) {\n  const spans = useHashlineSpans(lines, path);\n  return (\n    <View style={style} {...props}>\n      {lines.map((line, index) => {\n        if (line.type === 'file') {\n          return (\n            <Text key={index} numberOfLines={1} style={[styles.mono, styles.faint, index > 0 && styles.fileGap]}>\n              {line.path}\n            </Text>\n          );\n        }\n        if (line.type === 'plain') {\n          return (\n            <Text key={index} selectable style={[styles.mono, styles.dim]}>\n              {line.text}\n            </Text>\n          );\n        }\n        const { value } = line;\n        const match = value.marker === 'match';\n        return (\n          <View key={index} style={styles.row}>\n            {value.marker !== undefined ? (\n              <Text style={[styles.mono, match ? styles.marker : styles.faint]}>{match ? '>>' : '  '}</Text>\n            ) : null}\n            <Text style={[styles.mono, styles.faint]}>{String(value.line).padStart(gutter)}</Text>\n            <SyntaxLine\n              selectable\n              spans={spans.get(index)}\n              text={value.content}\n              style={[styles.mono, styles.content, match ? styles.hi : styles.text]}\n            />\n          </View>\n        );\n      })}\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create((theme) => ({\n  row: { flexDirection: 'row', gap: theme.spacing(2) },\n  fileGap: { marginTop: theme.spacing(1) },\n  mono: {\n    fontFamily: fontOf(theme.fontFamily.mono),\n    fontSize: theme.fontSize.sm,\n    lineHeight: theme.lineHeightRelaxed.sm,\n  },\n  content: { flex: 1, minWidth: 0 },\n  marker: { color: theme.colors.blue },\n  faint: { color: theme.colors.faint },\n  dim: { color: theme.colors.dim },\n  text: { color: theme.colors.text },\n  hi: { color: theme.colors.hi },\n}));\n"],"mappings":"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"}

package/dist/components/Input.mjs

@@ -1,14 +1,14 @@
 import { fontOf } from "../lib/fonts.mjs";
 import { useInsideSheet } from "../lib/insideSheet.mjs";
-import { withAlpha } from "@agimon-ai/po-web-components/nativeTheme";
 import { StyleSheet, useUnistyles, withUnistyles } from "react-native-unistyles";
+import { withAlpha } from "@agimon-ai/po-web-components/nativeTheme";
 import { useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { BottomSheetTextInput } from "@gorhom/bottom-sheet";
 import { TextInput } from "react-native-unistyles/components/native/TextInput";
 
 //#region src/components/Input.tsx
-/** `focus:border-doom-green/60`. */
+/** `focus:border-po-green/60`. */
 const FOCUS_EDGE_ALPHA_PERCENT = 60;
 const DISABLED_OPACITY = .5;
 const ThemedSheetTextInput = withUnistyles(BottomSheetTextInput);

package/dist/components/Input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Input.mjs","names":["withAlpha","BottomSheetTextInput","useState","TextInputProps","StyleSheet","useUnistyles","withUnistyles","fontOf","useInsideSheet","FieldVariant","FieldSize","FOCUS_EDGE_ALPHA_PERCENT","DISABLED_OPACITY","ThemedSheetTextInput","InputProps","Omit","variant","size","invalid","disabled","Input","style","onFocus","onBlur","accessibilityState","props","theme","focused","setFocused","Field","TextInput","_styles","styles","useVariants","undefined","colors","faint","green","event","field","borderColor","create","minWidth","minHeight","color","hi","fontFamily","sans","variants","default","borderRadius","DEFAULT","borderWidth","border","backgroundColor","deep","bare","padding","xs","paddingHorizontal","spacing","paddingVertical","fontSize","sm","md","base","lg","compoundVariants","uni__dependencies","red","opacity"],"sources":["../../src/components/Input.tsx"],"sourcesContent":["import { withAlpha } from '@agimon-ai/po-web-components/nativeTheme';\nimport { BottomSheetTextInput } from '@gorhom/bottom-sheet';\nimport { useState } from 'react';\nimport { TextInput, type TextInputProps } from 'react-native';\nimport { StyleSheet, useUnistyles, withUnistyles } from 'react-native-unistyles';\n\nimport { fontOf } from '../lib/fonts';\nimport { useInsideSheet } from '../lib/insideSheet';\n\nexport type FieldVariant = 'default' | 'bare';\nexport type FieldSize = 'xs' | 'sm' | 'md' | 'lg';\n\n/** `focus:border-doom-green/60`. */\nconst FOCUS_EDGE_ALPHA_PERCENT = 60;\nconst DISABLED_OPACITY = 0.5;\n\nconst ThemedSheetTextInput = withUnistyles(BottomSheetTextInput);\nexport interface InputProps extends Omit<TextInputProps, 'editable'> {\n  variant?: FieldVariant;\n  /** The same rungs Button names, so a field and the button beside it line up. */\n  size?: FieldSize;\n  /** The value is wrong: red edge and red text, as `aria-invalid` on the web. */\n  invalid?: boolean;\n  disabled?: boolean;\n}\n\n/**\n * The one text field: deep well, quiet border, jade edge and cursor on focus,\n * red edge when invalid. Inside a Sheet it becomes the sheet's own input.\n */\nexport function Input({\n  variant = 'default',\n  size = 'md',\n  invalid = false,\n  disabled = false,\n  style,\n  onFocus,\n  onBlur,\n  accessibilityState,\n  ...props\n}: InputProps) {\n  const { theme } = useUnistyles();\n  const [focused, setFocused] = useState(false);\n  // Inside a Sheet the field must be the sheet's own input, so the sheet rises with the keyboard.\n  const Field = useInsideSheet() ? ThemedSheetTextInput : TextInput;\n  // Unistyles reserves a variant named `default` as the fallback for an unset variant.\n  styles.useVariants({ variant: variant === 'bare' ? 'bare' : undefined, size });\n  return (\n    <Field\n      autoCorrect={false}\n      spellCheck={false}\n      placeholderTextColor={theme.colors.faint}\n      selectionColor={theme.colors.green}\n      cursorColor={theme.colors.green}\n      editable={!disabled}\n      accessibilityState={{ ...accessibilityState, disabled }}\n      onFocus={(event) => {\n        setFocused(true);\n        onFocus?.(event);\n      }}\n      onBlur={(event) => {\n        setFocused(false);\n        onBlur?.(event);\n      }}\n      style={[\n        styles.field,\n        // Alpha mixes are computed in render from useUnistyles(), not in StyleSheet.create: on web Unistyles hands\n        // the stylesheet CSS variables, which withAlpha cannot read.\n        focused && variant === 'default' && { borderColor: withAlpha(theme.colors.green, FOCUS_EDGE_ALPHA_PERCENT) },\n        invalid && styles.invalid,\n        disabled && styles.disabled,\n        style,\n      ]}\n      {...props}\n    />\n  );\n}\n\nconst styles = StyleSheet.create((theme) => ({\n  field: {\n    minWidth: 0,\n    minHeight: 44,\n    color: theme.colors.hi,\n    fontFamily: fontOf(theme.fontFamily.sans),\n    variants: {\n      variant: {\n        default: {\n          borderRadius: theme.borderRadius.DEFAULT,\n          borderWidth: 1,\n          borderColor: theme.colors.border,\n          backgroundColor: theme.colors.deep,\n        },\n        /** No well: a composer or a search that draws its own surface keeps the type and drops the box. */\n        bare: { borderWidth: 0, backgroundColor: 'transparent', padding: 0 },\n      },\n      size: {\n        xs: {\n          paddingHorizontal: theme.spacing(1.5),\n          paddingVertical: theme.spacing(0.5),\n          fontSize: theme.fontSize.sm,\n        },\n        sm: {\n          paddingHorizontal: theme.spacing(2),\n          paddingVertical: theme.spacing(1),\n          fontSize: theme.fontSize.sm,\n        },\n        md: {\n          paddingHorizontal: theme.spacing(2.5),\n          paddingVertical: theme.spacing(1.5),\n          fontSize: theme.fontSize.base,\n        },\n        lg: {\n          paddingHorizontal: theme.spacing(3),\n          paddingVertical: theme.spacing(1.5),\n          fontSize: theme.fontSize.base,\n        },\n      },\n    },\n    compoundVariants: [{ variant: 'bare', styles: { padding: 0, paddingHorizontal: 0, paddingVertical: 0 } }],\n  },\n  invalid: { borderColor: theme.colors['edge-red'], color: theme.colors.red },\n  disabled: { opacity: DISABLED_OPACITY },\n}));\n"],"mappings":";;;;;;;;;;;AAaA,MAAMW,2BAA2B;AACjC,MAAMC,mBAAmB;AAEzB,MAAMC,uBAAuBP,cAAcL,oBAAoB;;;;;AAc/D,SAAgBmB,MAAM,EACpBJ,UAAU,WACVC,OAAO,MACPC,UAAU,OACVC,WAAW,OACXE,OACAC,SACAC,QACAC,oBACA,GAAGC,SACU;CACb,MAAM,EAAEC,UAAUrB,aAAa;CAC/B,MAAM,CAACsB,SAASC,cAAc1B,SAAS,KAAK;CAE5C,MAAM2B,QAAQrB,eAAe,IAAIK,uBAAuBiB;CACxD,MAAAC,UAAAC;CAAA;EAAA,MAAAA,SAAAD,QAAAE,YACmB;GAAEjB,SAASA,YAAY,SAAS,SAASkB;GAAWjB;EAAK,CAAC;EAC7E,OACE,oBAAC,OAAD;GACE,aAAa;GACb,YAAY;GACZ,sBAAsBS,MAAMS,OAAOC;GACnC,gBAAgBV,MAAMS,OAAOE;GAC7B,aAAaX,MAAMS,OAAOE;GAC1B,UAAU,CAAClB;GACX,oBAAoB;IAAE,GAAGK;IAAoBL;GAAS;GACtD,UAAUmB,UAAU;IAClBV,WAAW,IAAI;IACfN,UAAUgB,KAAK;GACjB;GACA,SAASA,UAAU;IACjBV,WAAW,KAAK;IAChBL,SAASe,KAAK;GAChB;GACA,OAAO;IACLN,OAAOO;IAGPZ,WAAWX,YAAY,aAAa,EAAEwB,aAAaxC,UAAU0B,MAAMS,OAAOE,OAAO1B,wBAAwB,EAAE;IAC3GO,WAAWc,OAAOd;IAClBC,YAAYa,OAAOb;IACnBE;GAAK;GAEP,GAAII;EAAM;CAEZ;AACJ;AAEA,MAAMO,SAAS5B,WAAWqC,QAAQf,WAAW;CAC3Ca,OAAO;EACLG,UAAU;EACVC,WAAW;EACXC,OAAOlB,MAAMS,OAAOU;EACpBC,YAAYvC,OAAOmB,MAAMoB,WAAWC,IAAI;EACxCC,UAAU;GACRhC,SAAS;IACPiC,SAAS;KACPC,cAAcxB,MAAMwB,aAAaC;KACjCC,aAAa;KACbZ,aAAad,MAAMS,OAAOkB;KAC1BC,iBAAiB5B,MAAMS,OAAOoB;IAChC;;IAEAC,MAAM;KAAEJ,aAAa;KAAGE,iBAAiB;KAAeG,SAAS;IAAE;GACrE;GACAxC,MAAM;IACJyC,IAAI;KACFC,mBAAmBjC,MAAMkC,QAAQ,GAAG;KACpCC,iBAAiBnC,MAAMkC,QAAQ,EAAG;KAClCE,UAAUpC,MAAMoC,SAASC;IAC3B;IACAA,IAAI;KACFJ,mBAAmBjC,MAAMkC,QAAQ,CAAC;KAClCC,iBAAiBnC,MAAMkC,QAAQ,CAAC;KAChCE,UAAUpC,MAAMoC,SAASC;IAC3B;IACAC,IAAI;KACFL,mBAAmBjC,MAAMkC,QAAQ,GAAG;KACpCC,iBAAiBnC,MAAMkC,QAAQ,GAAG;KAClCE,UAAUpC,MAAMoC,SAASG;IAC3B;IACAC,IAAI;KACFP,mBAAmBjC,MAAMkC,QAAQ,CAAC;KAClCC,iBAAiBnC,MAAMkC,QAAQ,GAAG;KAClCE,UAAUpC,MAAMoC,SAASG;IAC3B;GACF;EACF;EACAE,kBAAkB,CAAC;GAAEnD,SAAS;GAAQgB,QAAQ;IAAEyB,SAAS;IAAGE,mBAAmB;IAAGE,iBAAiB;GAAE;EAAE,CAAC;EAACO,mBAAA,CAAA,GAAA,CAAA;CAC3G;CACAlD,SAAS;EAAEsB,aAAad,MAAMS,OAAO;EAAaS,OAAOlB,MAAMS,OAAOkC;EAAGD,mBAAA,CAAA,CAAA;CAAC;CAC1EjD,UAAU,EAAEmD,SAAS1D,iBAAiB;AACxC,EAAE"}
+{"version":3,"file":"Input.mjs","names":["withAlpha","BottomSheetTextInput","useState","TextInputProps","StyleSheet","useUnistyles","withUnistyles","fontOf","useInsideSheet","FieldVariant","FieldSize","FOCUS_EDGE_ALPHA_PERCENT","DISABLED_OPACITY","ThemedSheetTextInput","InputProps","Omit","variant","size","invalid","disabled","Input","style","onFocus","onBlur","accessibilityState","props","theme","focused","setFocused","Field","TextInput","_styles","styles","useVariants","undefined","colors","faint","green","event","field","borderColor","create","minWidth","minHeight","color","hi","fontFamily","sans","variants","default","borderRadius","DEFAULT","borderWidth","border","backgroundColor","deep","bare","padding","xs","paddingHorizontal","spacing","paddingVertical","fontSize","sm","md","base","lg","compoundVariants","uni__dependencies","red","opacity"],"sources":["../../src/components/Input.tsx"],"sourcesContent":["import { withAlpha } from '@agimon-ai/po-web-components/nativeTheme';\nimport { BottomSheetTextInput } from '@gorhom/bottom-sheet';\nimport { useState } from 'react';\nimport { TextInput, type TextInputProps } from 'react-native';\nimport { StyleSheet, useUnistyles, withUnistyles } from 'react-native-unistyles';\n\nimport { fontOf } from '../lib/fonts';\nimport { useInsideSheet } from '../lib/insideSheet';\n\nexport type FieldVariant = 'default' | 'bare';\nexport type FieldSize = 'xs' | 'sm' | 'md' | 'lg';\n\n/** `focus:border-po-green/60`. */\nconst FOCUS_EDGE_ALPHA_PERCENT = 60;\nconst DISABLED_OPACITY = 0.5;\n\nconst ThemedSheetTextInput = withUnistyles(BottomSheetTextInput);\nexport interface InputProps extends Omit<TextInputProps, 'editable'> {\n  variant?: FieldVariant;\n  /** The same rungs Button names, so a field and the button beside it line up. */\n  size?: FieldSize;\n  /** The value is wrong: red edge and red text, as `aria-invalid` on the web. */\n  invalid?: boolean;\n  disabled?: boolean;\n}\n\n/**\n * The one text field: deep well, quiet border, jade edge and cursor on focus,\n * red edge when invalid. Inside a Sheet it becomes the sheet's own input.\n */\nexport function Input({\n  variant = 'default',\n  size = 'md',\n  invalid = false,\n  disabled = false,\n  style,\n  onFocus,\n  onBlur,\n  accessibilityState,\n  ...props\n}: InputProps) {\n  const { theme } = useUnistyles();\n  const [focused, setFocused] = useState(false);\n  // Inside a Sheet the field must be the sheet's own input, so the sheet rises with the keyboard.\n  const Field = useInsideSheet() ? ThemedSheetTextInput : TextInput;\n  // Unistyles reserves a variant named `default` as the fallback for an unset variant.\n  styles.useVariants({ variant: variant === 'bare' ? 'bare' : undefined, size });\n  return (\n    <Field\n      autoCorrect={false}\n      spellCheck={false}\n      placeholderTextColor={theme.colors.faint}\n      selectionColor={theme.colors.green}\n      cursorColor={theme.colors.green}\n      editable={!disabled}\n      accessibilityState={{ ...accessibilityState, disabled }}\n      onFocus={(event) => {\n        setFocused(true);\n        onFocus?.(event);\n      }}\n      onBlur={(event) => {\n        setFocused(false);\n        onBlur?.(event);\n      }}\n      style={[\n        styles.field,\n        // Alpha mixes are computed in render from useUnistyles(), not in StyleSheet.create: on web Unistyles hands\n        // the stylesheet CSS variables, which withAlpha cannot read.\n        focused && variant === 'default' && { borderColor: withAlpha(theme.colors.green, FOCUS_EDGE_ALPHA_PERCENT) },\n        invalid && styles.invalid,\n        disabled && styles.disabled,\n        style,\n      ]}\n      {...props}\n    />\n  );\n}\n\nconst styles = StyleSheet.create((theme) => ({\n  field: {\n    minWidth: 0,\n    minHeight: 44,\n    color: theme.colors.hi,\n    fontFamily: fontOf(theme.fontFamily.sans),\n    variants: {\n      variant: {\n        default: {\n          borderRadius: theme.borderRadius.DEFAULT,\n          borderWidth: 1,\n          borderColor: theme.colors.border,\n          backgroundColor: theme.colors.deep,\n        },\n        /** No well: a composer or a search that draws its own surface keeps the type and drops the box. */\n        bare: { borderWidth: 0, backgroundColor: 'transparent', padding: 0 },\n      },\n      size: {\n        xs: {\n          paddingHorizontal: theme.spacing(1.5),\n          paddingVertical: theme.spacing(0.5),\n          fontSize: theme.fontSize.sm,\n        },\n        sm: {\n          paddingHorizontal: theme.spacing(2),\n          paddingVertical: theme.spacing(1),\n          fontSize: theme.fontSize.sm,\n        },\n        md: {\n          paddingHorizontal: theme.spacing(2.5),\n          paddingVertical: theme.spacing(1.5),\n          fontSize: theme.fontSize.base,\n        },\n        lg: {\n          paddingHorizontal: theme.spacing(3),\n          paddingVertical: theme.spacing(1.5),\n          fontSize: theme.fontSize.base,\n        },\n      },\n    },\n    compoundVariants: [{ variant: 'bare', styles: { padding: 0, paddingHorizontal: 0, paddingVertical: 0 } }],\n  },\n  invalid: { borderColor: theme.colors['edge-red'], color: theme.colors.red },\n  disabled: { opacity: DISABLED_OPACITY },\n}));\n"],"mappings":";;;;;;;;;;;AAaA,MAAMW,2BAA2B;AACjC,MAAMC,mBAAmB;AAEzB,MAAMC,uBAAuBP,cAAcL,oBAAoB;;;;;AAc/D,SAAgBmB,MAAM,EACpBJ,UAAU,WACVC,OAAO,MACPC,UAAU,OACVC,WAAW,OACXE,OACAC,SACAC,QACAC,oBACA,GAAGC,SACU;CACb,MAAM,EAAEC,UAAUrB,aAAa;CAC/B,MAAM,CAACsB,SAASC,cAAc1B,SAAS,KAAK;CAE5C,MAAM2B,QAAQrB,eAAe,IAAIK,uBAAuBiB;CACxD,MAAAC,UAAAC;CAAA;EAAA,MAAAA,SAAAD,QAAAE,YACmB;GAAEjB,SAASA,YAAY,SAAS,SAASkB;GAAWjB;EAAK,CAAC;EAC7E,OACE,oBAAC,OAAD;GACE,aAAa;GACb,YAAY;GACZ,sBAAsBS,MAAMS,OAAOC;GACnC,gBAAgBV,MAAMS,OAAOE;GAC7B,aAAaX,MAAMS,OAAOE;GAC1B,UAAU,CAAClB;GACX,oBAAoB;IAAE,GAAGK;IAAoBL;GAAS;GACtD,UAAUmB,UAAU;IAClBV,WAAW,IAAI;IACfN,UAAUgB,KAAK;GACjB;GACA,SAASA,UAAU;IACjBV,WAAW,KAAK;IAChBL,SAASe,KAAK;GAChB;GACA,OAAO;IACLN,OAAOO;IAGPZ,WAAWX,YAAY,aAAa,EAAEwB,aAAaxC,UAAU0B,MAAMS,OAAOE,OAAO1B,wBAAwB,EAAE;IAC3GO,WAAWc,OAAOd;IAClBC,YAAYa,OAAOb;IACnBE;GAAK;GAEP,GAAII;EAAM;CAEZ;AACJ;AAEA,MAAMO,SAAS5B,WAAWqC,QAAQf,WAAW;CAC3Ca,OAAO;EACLG,UAAU;EACVC,WAAW;EACXC,OAAOlB,MAAMS,OAAOU;EACpBC,YAAYvC,OAAOmB,MAAMoB,WAAWC,IAAI;EACxCC,UAAU;GACRhC,SAAS;IACPiC,SAAS;KACPC,cAAcxB,MAAMwB,aAAaC;KACjCC,aAAa;KACbZ,aAAad,MAAMS,OAAOkB;KAC1BC,iBAAiB5B,MAAMS,OAAOoB;IAChC;;IAEAC,MAAM;KAAEJ,aAAa;KAAGE,iBAAiB;KAAeG,SAAS;IAAE;GACrE;GACAxC,MAAM;IACJyC,IAAI;KACFC,mBAAmBjC,MAAMkC,QAAQ,GAAG;KACpCC,iBAAiBnC,MAAMkC,QAAQ,EAAG;KAClCE,UAAUpC,MAAMoC,SAASC;IAC3B;IACAA,IAAI;KACFJ,mBAAmBjC,MAAMkC,QAAQ,CAAC;KAClCC,iBAAiBnC,MAAMkC,QAAQ,CAAC;KAChCE,UAAUpC,MAAMoC,SAASC;IAC3B;IACAC,IAAI;KACFL,mBAAmBjC,MAAMkC,QAAQ,GAAG;KACpCC,iBAAiBnC,MAAMkC,QAAQ,GAAG;KAClCE,UAAUpC,MAAMoC,SAASG;IAC3B;IACAC,IAAI;KACFP,mBAAmBjC,MAAMkC,QAAQ,CAAC;KAClCC,iBAAiBnC,MAAMkC,QAAQ,GAAG;KAClCE,UAAUpC,MAAMoC,SAASG;IAC3B;GACF;EACF;EACAE,kBAAkB,CAAC;GAAEnD,SAAS;GAAQgB,QAAQ;IAAEyB,SAAS;IAAGE,mBAAmB;IAAGE,iBAAiB;GAAE;EAAE,CAAC;EAACO,mBAAA,CAAA,GAAA,CAAA;CAC3G;CACAlD,SAAS;EAAEsB,aAAad,MAAMS,OAAO;EAAaS,OAAOlB,MAAMS,OAAOkC;EAAGD,mBAAA,CAAA,CAAA;CAAC;CAC1EjD,UAAU,EAAEmD,SAAS1D,iBAAiB;AACxC,EAAE"}

package/dist/components/Label.mjs

@@ -1,6 +1,6 @@
 import { fontOf } from "../lib/fonts.mjs";
-import { StyleSheet } from "react-native-unistyles";
 import { Text } from "react-native-unistyles/components/native/Text";
+import { StyleSheet } from "react-native-unistyles";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/Label.tsx

package/dist/components/List.mjs

@@ -1,9 +1,9 @@
 import { fontOf } from "../lib/fonts.mjs";
 import { ChevronRightIcon } from "../icons/icons.mjs";
 import { View } from "react-native-unistyles/components/native/View";
+import { Text } from "react-native-unistyles/components/native/Text";
 import { StyleSheet } from "react-native-unistyles";
 import { Platform } from "react-native";
-import { Text } from "react-native-unistyles/components/native/Text";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Pressable } from "react-native-unistyles/components/native/Pressable";
 import { FlashList } from "@shopify/flash-list";

package/dist/components/Markdown.d.mts

@@ -5,11 +5,18 @@
  * contract as the web Markdown's handler.
  */
 export type FileLinkHandler = (text: string, explicit?: boolean) => (() => void) | undefined;
+/** Loads a relative image path from the host; the same contract as the web Markdown's `loadImage`. */
+export type MarkdownImageLoader = (path: string) => Promise<{
+  url: string;
+  dispose(): void;
+}>;
 export interface MarkdownProps {
   text: string;
   onFileLink?: FileLinkHandler;
+  /** Loads relative image paths; without it they show as unavailable. */
+  loadImage?: MarkdownImageLoader;
 }
 /** Markdown in Po's shared presentation, parsed by the package's own small parser. */
-export declare function Markdown({ text, onFileLink }: MarkdownProps): import("react").JSX.Element;
+export declare function Markdown({ text, onFileLink, loadImage }: MarkdownProps): import("react").JSX.Element;
 //#endregion
 //# sourceMappingURL=Markdown.d.mts.map

package/dist/components/Markdown.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Markdown.d.mts","names":[],"sources":["../../src/components/Markdown.tsx"],"mappings":";;;;;;YAqBY,mBAAmB,cAAc;iBAgH5B;EACf;EACA,aAAa;;;wBAIC,WAAW,MAAM,cAAc,gCAAa,IAAA"}
+{"version":3,"file":"Markdown.d.mts","names":[],"sources":["../../src/components/Markdown.tsx"],"mappings":";;;;;;YAoBY,mBAAmB,cAAc;;YAMjC,uBAAuB,iBAAiB;EAAU;EAAa;;iBA0O1D;EACf;EACA,aAAa;;EAEb,YAAY;;;wBAIE,WAAW,MAAM,YAAY,aAAa,gCAAa,IAAA"}