@btndprojects/loam-ui-native 0.0.0-stage → 0.1.0

package/dist/chunk-XNUVB5OL.js

@@ -0,0 +1,375 @@
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React from 'react';
+import { View, Pressable, Text, TextInput, ScrollView } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var LOG_LEVELS = ["debug", "info", "warn", "error"];
+function levelMeta(theme, level) {
+  switch (level) {
+    case "error":
+      return {
+        icon: "alert-circle",
+        label: "Error",
+        short: "ERR",
+        bg: theme.color.dangerSoft,
+        fg: theme.color.dangerOnSoft,
+        edge: theme.edge.danger
+      };
+    case "warn":
+      return {
+        icon: "alert-triangle",
+        label: "Warning",
+        short: "WARN",
+        bg: theme.color.warnSoft,
+        fg: theme.color.warnOnSoft,
+        edge: theme.edge.warn
+      };
+    case "info":
+      return {
+        icon: "info",
+        label: "Info",
+        short: "INFO",
+        bg: theme.color.infoSoft,
+        fg: theme.color.infoOnSoft,
+        edge: theme.edge.info
+      };
+    case "debug":
+      return {
+        icon: "code",
+        label: "Debug",
+        short: "DBG",
+        bg: theme.color.surface3,
+        // Primary ink on the neutral soft tint: `text3` is only ~4.2:1 on
+        // surface-3, short of AA; primary `text` clears it (>12:1 both modes).
+        fg: theme.color.text,
+        edge: theme.edge.neutral
+      };
+  }
+}
+var BOTTOM_THRESHOLD = 8;
+function renderText(text, query, markStyle) {
+  if (!query) return text;
+  const needle = query.toLowerCase();
+  const hay = text.toLowerCase();
+  let from = hay.indexOf(needle);
+  if (from === -1) return text;
+  const out = [];
+  let cursor = 0;
+  let key = 0;
+  while (from !== -1) {
+    if (from > cursor) out.push(text.slice(cursor, from));
+    out.push(
+      /* @__PURE__ */ jsx(Text, { style: markStyle, children: text.slice(from, from + needle.length) }, key++)
+    );
+    cursor = from + needle.length;
+    from = hay.indexOf(needle, cursor);
+  }
+  if (cursor < text.length) out.push(text.slice(cursor));
+  return out;
+}
+function formatLogTime(time) {
+  if (time == null) return "";
+  const d = time instanceof Date ? time : typeof time === "number" ? new Date(time) : null;
+  if (!d) return String(time);
+  const hh = String(d.getHours()).padStart(2, "0");
+  const mm = String(d.getMinutes()).padStart(2, "0");
+  const ss = String(d.getSeconds()).padStart(2, "0");
+  return `${hh}:${mm}:${ss}`;
+}
+function LogViewer({
+  lines,
+  follow = true,
+  levelFilter,
+  onLevelFilterChange,
+  search,
+  onSearchChange,
+  wrap = false,
+  maxHeight = 320,
+  showTimestamps = false,
+  maxLines = 2e3,
+  label = "Log output",
+  liveRegion = "none",
+  testID,
+  motion: _motion = "full"
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet);
+  const scrollRef = React.useRef(null);
+  const filterControlled = levelFilter !== void 0;
+  const [internalFilter, setInternalFilter] = React.useState([...LOG_LEVELS]);
+  const activeFilter = filterControlled ? levelFilter : internalFilter;
+  const searchControlled = search !== void 0;
+  const [internalSearch, setInternalSearch] = React.useState("");
+  const activeSearch = searchControlled ? search : internalSearch;
+  const [paused, setPaused] = React.useState(false);
+  const toggleLevel = (level) => {
+    const next = activeFilter.includes(level) ? activeFilter.filter((l) => l !== level) : [...activeFilter, level];
+    onLevelFilterChange?.(next);
+    if (!filterControlled) setInternalFilter(next);
+  };
+  const setSearch = (value) => {
+    onSearchChange?.(value);
+    if (!searchControlled) setInternalSearch(value);
+  };
+  const filtered = React.useMemo(
+    () => lines.filter((line) => line.level == null || activeFilter.includes(line.level)),
+    [lines, activeFilter]
+  );
+  const hiddenCount = Math.max(0, filtered.length - maxLines);
+  const visible = hiddenCount > 0 ? filtered.slice(filtered.length - maxLines) : filtered;
+  const onScroll = (e) => {
+    const { contentOffset, contentSize, layoutMeasurement } = e.nativeEvent;
+    const distance = contentSize.height - contentOffset.y - layoutMeasurement.height;
+    setPaused(distance > BOTTOM_THRESHOLD);
+  };
+  const onContentSizeChange = () => {
+    if (follow && !paused) scrollRef.current?.scrollToEnd({ animated: false });
+  };
+  const jumpToLatest = () => {
+    scrollRef.current?.scrollToEnd({ animated: false });
+    setPaused(false);
+  };
+  const markStyle = { backgroundColor: theme.color.accentSoft, color: theme.color.accentOnSoft };
+  const showJump = follow && paused;
+  const tapSlop = Math.max(0, (theme.tapMin - theme.ctl.md) / 2);
+  const renderLines = () => /* @__PURE__ */ jsx(View, { style: wrap ? styles.linesStretch : void 0, children: visible.map((line) => {
+    const meta = line.level ? levelMeta(theme, line.level) : null;
+    return /* @__PURE__ */ jsxs(View, { style: styles.line, children: [
+      showTimestamps ? /* @__PURE__ */ jsx(Text, { style: styles.time, children: formatLogTime(line.time) }) : null,
+      meta ? /* @__PURE__ */ jsxs(
+        View,
+        {
+          style: [styles.badge, { backgroundColor: meta.bg, borderColor: meta.edge }],
+          accessibilityLabel: meta.label,
+          children: [
+            /* @__PURE__ */ jsx(Icon, { name: meta.icon, size: theme.icon.xs, color: meta.fg }),
+            /* @__PURE__ */ jsx(Text, { style: [styles.badgeLabel, { color: meta.fg }], children: meta.short })
+          ]
+        }
+      ) : null,
+      /* @__PURE__ */ jsx(Text, { style: [styles.lineText, wrap ? styles.lineTextWrap : null], children: renderText(line.text, activeSearch, markStyle) })
+    ] }, line.id);
+  }) });
+  return /* @__PURE__ */ jsxs(View, { style: styles.root, children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.toolbar, children: [
+      /* @__PURE__ */ jsx(View, { style: styles.filterGroup, role: "group", accessibilityLabel: "Filter by level", children: LOG_LEVELS.map((level) => {
+        const meta = levelMeta(theme, level);
+        const on = activeFilter.includes(level);
+        return /* @__PURE__ */ jsxs(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: meta.label,
+            accessibilityState: { selected: on },
+            onPress: () => toggleLevel(level),
+            hitSlop: { top: tapSlop, bottom: tapSlop },
+            style: ({ pressed }) => [
+              styles.chip,
+              on ? { backgroundColor: meta.bg, borderColor: meta.edge } : { backgroundColor: theme.color.surface2, borderColor: theme.color.border },
+              pressed && { backgroundColor: theme.state.pressed }
+            ],
+            children: [
+              /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  name: meta.icon,
+                  size: theme.icon.sm,
+                  color: on ? meta.fg : theme.color.text
+                }
+              ),
+              /* @__PURE__ */ jsx(Text, { style: [styles.chipLabel, { color: on ? meta.fg : theme.color.text }], children: meta.label })
+            ]
+          },
+          level
+        );
+      }) }),
+      /* @__PURE__ */ jsxs(View, { style: styles.searchWrap, children: [
+        /* @__PURE__ */ jsx(Icon, { name: "search", size: theme.icon.sm, color: theme.color.text3 }),
+        /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            value: activeSearch,
+            onChangeText: setSearch,
+            accessibilityLabel: "Search log",
+            placeholder: "Search log\u2026",
+            placeholderTextColor: theme.color.text3,
+            style: styles.searchInput
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(View, { style: styles.surfaceWrap, children: [
+      /* @__PURE__ */ jsxs(
+        ScrollView,
+        {
+          ref: scrollRef,
+          testID,
+          role: "log",
+          focusable: true,
+          accessibilityLabel: label,
+          accessibilityLiveRegion: liveRegion,
+          onScroll,
+          onContentSizeChange,
+          scrollEventThrottle: 16,
+          style: [styles.surface, { maxHeight }],
+          contentContainerStyle: styles.surfaceContent,
+          children: [
+            hiddenCount > 0 ? /* @__PURE__ */ jsx(View, { style: styles.notice, accessibilityRole: "text", children: /* @__PURE__ */ jsxs(Text, { style: styles.noticeText, children: [
+              hiddenCount.toLocaleString(),
+              " earlier line",
+              hiddenCount === 1 ? "" : "s",
+              " hidden \u2014 showing the latest ",
+              maxLines.toLocaleString(),
+              "."
+            ] }) }) : null,
+            visible.length === 0 ? /* @__PURE__ */ jsx(Text, { style: styles.empty, children: "No log lines." }) : wrap ? renderLines() : (
+              // No-wrap: a horizontal ScrollView lets wide lines scroll sideways
+              // rather than soft-wrapping. Vertical follow stays on the outer view.
+              /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: true, focusable: true, children: renderLines() })
+            )
+          ]
+        }
+      ),
+      showJump ? /* @__PURE__ */ jsxs(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: "Jump to latest",
+          onPress: jumpToLatest,
+          style: ({ pressed }) => [styles.jump, pressed && { opacity: theme.state.pressedOpacity }],
+          children: [
+            /* @__PURE__ */ jsx(Icon, { name: "arrow-down", size: theme.icon.sm, color: theme.color.accentInk }),
+            /* @__PURE__ */ jsx(Text, { style: styles.jumpLabel, children: "Jump to latest" })
+          ]
+        }
+      ) : null
+    ] })
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  root: { gap: theme.space.s2, alignSelf: "stretch" },
+  toolbar: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: theme.space.s2
+  },
+  filterGroup: { flexDirection: "row", flexWrap: "wrap", gap: theme.space.s1 },
+  chip: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s1,
+    height: theme.ctl.md,
+    paddingHorizontal: theme.space.s2,
+    borderRadius: theme.radius.sm,
+    borderWidth: theme.borderWidth.base
+  },
+  chipLabel: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    fontWeight: theme.fontWeight.semibold
+  },
+  searchWrap: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s2,
+    flexGrow: 1,
+    flexBasis: theme.space[140],
+    height: theme.ctl.md,
+    paddingHorizontal: theme.space.s2,
+    borderRadius: theme.radius.sm,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface2
+  },
+  searchInput: {
+    flex: 1,
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.footnote.fontSize,
+    color: theme.color.text,
+    paddingVertical: 0
+  },
+  surfaceWrap: { position: "relative" },
+  surface: {
+    borderRadius: theme.radius.lg,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.code.bg
+  },
+  surfaceContent: { paddingVertical: theme.space.s1 },
+  linesStretch: { alignSelf: "stretch" },
+  notice: {
+    borderBottomWidth: theme.borderWidth.base,
+    borderBottomColor: theme.color.border,
+    backgroundColor: theme.color.surface2,
+    paddingHorizontal: theme.space.s3,
+    paddingVertical: theme.space.s1
+  },
+  noticeText: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.caption1.fontSize,
+    color: theme.color.text2
+  },
+  empty: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.footnote.fontSize,
+    color: theme.code.com,
+    paddingHorizontal: theme.space.s3,
+    paddingVertical: theme.space.s2
+  },
+  line: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: theme.space.s2,
+    paddingHorizontal: theme.space.s3
+  },
+  time: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.code.lineH,
+    color: theme.code.com
+  },
+  badge: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[3],
+    borderRadius: theme.radius.xs,
+    borderWidth: theme.borderWidth.base,
+    paddingHorizontal: theme.space.s1,
+    marginTop: theme.space[1]
+  },
+  badgeLabel: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.caption1.fontSize,
+    fontWeight: theme.fontWeight.bold
+  },
+  lineText: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.code.lineH,
+    color: theme.code.fg
+  },
+  lineTextWrap: { flex: 1, flexShrink: 1 },
+  jump: {
+    position: "absolute",
+    bottom: theme.space.s3,
+    end: theme.space.s3,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s1,
+    height: theme.ctl.md,
+    paddingHorizontal: theme.space.s3,
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.accent,
+    ...theme.shadow.md
+  },
+  jumpLabel: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    fontWeight: theme.fontWeight.bold,
+    color: theme.color.accentInk
+  }
+}));
+
+export { LOG_LEVELS, LogViewer };

package/dist/chunk-XOSCY2CW.js

@@ -0,0 +1,242 @@
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React from 'react';
+import { View, ScrollView, Pressable, Text, Modal, Animated, Easing } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var DOT = {
+  /** Width of the active dot. */
+  activeWidth: 16,
+  /** Width of an inactive dot. */
+  idleWidth: 5
+};
+function Dot({ active }) {
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme();
+  const progress = React.useRef(new Animated.Value(active ? 1 : 0)).current;
+  React.useEffect(() => {
+    Animated.timing(progress, {
+      toValue: active ? 1 : 0,
+      duration: theme.duration.base,
+      easing: Easing.bezier(...theme.easing.base),
+      useNativeDriver: false
+    }).start();
+  }, [active, progress, theme.duration.base, theme.easing.base]);
+  return /* @__PURE__ */ jsx(
+    Animated.View,
+    {
+      style: [
+        styles.dot,
+        {
+          width: progress.interpolate({
+            inputRange: [0, 1],
+            outputRange: [DOT.idleWidth, DOT.activeWidth]
+          }),
+          // The carousel sits on imagery, so the dots use the mode-invariant
+          // media ink rather than a surface token: an indicator that inverted
+          // with the mode would vanish over a bright photo. The idle dot is the
+          // 0.38 alpha stop — the same value the system dims a disabled control
+          // to. Both were `#ffffff` / `rgba(255,255,255,0.4)` literals in the
+          // module constant above, which is why they could not follow a theme.
+          backgroundColor: progress.interpolate({
+            inputRange: [0, 1],
+            outputRange: [theme.white.a10, theme.media.ink]
+          })
+        }
+      ]
+    }
+  );
+}
+function Gallery({
+  items,
+  columns = 3,
+  lightbox = true,
+  onSelect
+}) {
+  const { styles } = useStyles(sheet);
+  const [openIndex, setOpenIndex] = React.useState(null);
+  const open = (i) => {
+    onSelect?.(i);
+    if (lightbox) setOpenIndex(i);
+  };
+  return /* @__PURE__ */ jsxs(View, { style: styles.galleryRoot, children: [
+    /* @__PURE__ */ jsx(ScrollView, { contentContainerStyle: styles.grid, children: items.map((item, i) => /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "imagebutton",
+        accessibilityLabel: item.alt || `Item ${i + 1}`,
+        onPress: () => open(i),
+        style: [styles.tile, { width: `${100 / columns}%` }],
+        children: /* @__PURE__ */ jsxs(View, { style: styles.tileInner, children: [
+          item.render ? item.render() : /* @__PURE__ */ jsx(Text, { style: styles.tileIndex, children: i + 1 }),
+          item.duration ? /* @__PURE__ */ jsx(View, { style: styles.durationBadge, children: /* @__PURE__ */ jsx(Text, { style: styles.durationText, children: item.duration }) }) : null
+        ] })
+      },
+      item.id
+    )) }),
+    openIndex != null ? /* @__PURE__ */ jsx(
+      GalleryLightbox,
+      {
+        items,
+        index: openIndex,
+        onIndexChange: setOpenIndex,
+        onClose: () => setOpenIndex(null)
+      }
+    ) : null
+  ] });
+}
+function GalleryLightbox({
+  items,
+  index,
+  onIndexChange,
+  onClose
+}) {
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme();
+  const item = items[index];
+  const count = items.length;
+  if (!item) return null;
+  const go = (delta) => onIndexChange((index + delta + count) % count);
+  return /* @__PURE__ */ jsx(Modal, { visible: true, transparent: true, animationType: "fade", onRequestClose: onClose, children: /* @__PURE__ */ jsxs(View, { style: styles.lightbox, children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.lightboxBar, children: [
+      /* @__PURE__ */ jsxs(Text, { style: styles.counter, children: [
+        index + 1,
+        " / ",
+        count
+      ] }),
+      /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: "Close",
+          onPress: onClose,
+          style: styles.lightboxAction,
+          children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.icon.md, color: theme.media.ink })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(View, { style: styles.lightboxStage, children: [
+      /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: "Previous image",
+          onPress: () => go(-1),
+          style: styles.lightboxNav,
+          children: /* @__PURE__ */ jsx(Icon, { name: "chevron-left", size: theme.icon.lg, color: theme.media.ink })
+        }
+      ),
+      /* @__PURE__ */ jsx(View, { style: [styles.lightboxImage, { aspectRatio: item.aspectRatio ?? 0.8 }], children: item.render ? item.render() : /* @__PURE__ */ jsxs(Text, { style: styles.lightboxImageLabel, children: [
+        "Image ",
+        index + 1,
+        " \xB7 ",
+        item.aspectRatio ?? 0.8
+      ] }) }),
+      /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: "Next image",
+          onPress: () => go(1),
+          style: styles.lightboxNav,
+          children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: theme.icon.lg, color: theme.media.ink })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(View, { style: styles.dots, accessibilityElementsHidden: true, importantForAccessibility: "no", children: items.map((it, i) => /* @__PURE__ */ jsx(Dot, { active: i === index }, it.id)) })
+  ] }) });
+}
+var sheet = createStyleSheet((theme) => ({
+  galleryRoot: { flex: 1 },
+  grid: { flexDirection: "row", flexWrap: "wrap", padding: theme.space[2] },
+  tile: { padding: theme.space[2] },
+  tileInner: {
+    aspectRatio: 1,
+    backgroundColor: theme.color.surface3,
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden"
+  },
+  tileIndex: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.caption2.fontSize,
+    color: theme.color.text3
+  },
+  durationBadge: {
+    position: "absolute",
+    right: theme.space[4],
+    bottom: theme.space[4],
+    borderRadius: theme.radius.sm,
+    paddingHorizontal: theme.space[4],
+    paddingVertical: theme.space[1],
+    backgroundColor: theme.black.a12
+  },
+  durationText: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.fontSize[10],
+    color: theme.media.ink
+  },
+  // Not `color.scrim`: a lightbox backdrop sits on imagery rather than on a
+  // token surface, and it is deliberately far heavier than a modal's scrim. The
+  // alpha ramp's top stop is cut at 0.92 for exactly this surface, so the value
+  // is a token now rather than the raw literal the doc leaves it as.
+  lightbox: { flex: 1, backgroundColor: theme.black.a14 },
+  lightboxBar: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: theme.space.s4,
+    paddingVertical: theme.space[14]
+  },
+  counter: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.caption2.fontSize,
+    color: theme.media.ink,
+    opacity: theme.opacity[88]
+  },
+  lightboxAction: {
+    width: theme.tapMin,
+    height: theme.tapMin,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  lightboxStage: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: theme.space[12]
+  },
+  lightboxNav: {
+    width: theme.tapMin,
+    height: theme.tapMin,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  lightboxImage: {
+    flex: 1,
+    borderRadius: theme.radius.md,
+    backgroundColor: theme.color.surface3,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  lightboxImageLabel: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.caption2.fontSize,
+    // Uppercase wants the caps tracking step, which is a ratio — multiply it by
+    // the size rather than restating the product as a bare 1.2.
+    letterSpacing: theme.type.caption2.fontSize * theme.tracking.caps,
+    textTransform: "uppercase",
+    color: theme.color.text3
+  },
+  dots: {
+    flexDirection: "row",
+    justifyContent: "center",
+    gap: DOT.idleWidth,
+    paddingVertical: theme.space.s4
+  },
+  // Width and background are animated per-dot; see {@link Dot}.
+  dot: { height: DOT.idleWidth, borderRadius: theme.radius.full }
+}));
+
+export { Gallery, GalleryLightbox };