@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-ZVJCWXAL.js

@@ -0,0 +1,541 @@
+import { Button } from './chunk-5DTKORLI.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import * as React from 'react';
+import { View, Pressable, Text, TextInput, ScrollView, ActivityIndicator } 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, labels, level) {
+  switch (level) {
+    case "error":
+      return {
+        icon: "alert-circle",
+        label: labels.levels.error,
+        short: labels.levelsShort.error,
+        bg: theme.color.dangerSoft,
+        fg: theme.color.dangerOnSoft,
+        edge: theme.edge.danger
+      };
+    case "warn":
+      return {
+        icon: "alert-triangle",
+        label: labels.levels.warn,
+        short: labels.levelsShort.warn,
+        bg: theme.color.warnSoft,
+        fg: theme.color.warnOnSoft,
+        edge: theme.edge.warn
+      };
+    case "info":
+      return {
+        icon: "info",
+        label: labels.levels.info,
+        short: labels.levelsShort.info,
+        bg: theme.color.infoSoft,
+        fg: theme.color.infoOnSoft,
+        edge: theme.edge.info
+      };
+    case "debug":
+      return {
+        icon: "code",
+        label: labels.levels.debug,
+        short: labels.levelsShort.debug,
+        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;
+var DEFAULT_LABELS = {
+  levels: { error: "Error", warn: "Warning", info: "Info", debug: "Debug" },
+  levelsShort: { error: "ERR", warn: "WARN", info: "INFO", debug: "DBG" },
+  levelCodes: { error: "ERR", warn: "WRN", info: "INF", debug: "DBG" },
+  hiddenLines: (hidden) => `${hidden.toLocaleString()} earlier ${hidden === 1 ? "line" : "lines"} hidden`,
+  levelPrefix: (level) => `${level}: `,
+  announcement: (level, text) => `${level}: ${text}`,
+  filterByLevel: "Filter by level",
+  region: "Log output",
+  search: "Search log",
+  searchPlaceholder: "Search log\u2026",
+  invalidPattern: "Invalid pattern",
+  noMatches: "No matches",
+  matchCount: (current, total) => `${current} of ${total}`,
+  searchOptions: "Search options",
+  matchCase: "Match case",
+  regex: "Regular expression",
+  filterMode: "Show only matching lines",
+  filterModeGlyph: "Filter",
+  timeFormats: { absolute: "Local", relative: "Relative", utc: "UTC" },
+  timeFormat: (format) => `Timestamp format: ${format}`,
+  timeFormatTitle: "Cycle timestamp format",
+  secondsAgo: (n) => `${n}s ago`,
+  minutesAgo: (n) => `${n}m ago`,
+  hoursAgo: (n) => `${n}h ago`,
+  daysAgo: (n) => `${n}d ago`,
+  copied: "Copied",
+  copyLine: "Copy line",
+  copyLines: (count) => `Copy ${count} lines`,
+  lineNumber: (n) => `Line ${n}`,
+  collapseJson: "Collapse JSON",
+  expandJson: "Expand JSON",
+  truncated: (hidden, shown) => `${hidden.toLocaleString()} earlier ${hidden === 1 ? "line" : "lines"} hidden \u2014 showing the latest ${shown.toLocaleString()}.`,
+  noLevelMatch: "No lines match the selected levels.",
+  showAllLevels: "Show all levels",
+  empty: "No log lines.",
+  jumpToLatest: "Jump to latest",
+  error: "The log stream failed.",
+  loading: "Loading log"
+};
+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,
+  labels: labelsProp,
+  follow = true,
+  levelFilter,
+  onLevelFilterChange,
+  search,
+  onSearchChange,
+  wrap = false,
+  maxHeight = 320,
+  showTimestamps = false,
+  maxLines = 2e3,
+  label: labelOverride,
+  liveRegion = "none",
+  testID,
+  size = "md",
+  readOnly = false,
+  disabled = false,
+  loading = false,
+  error,
+  motion: _motion = "full",
+  chipStyle = "level",
+  levelBadge = "glyph",
+  toolbarDensity = "comfortable",
+  searchSize = "lg",
+  hiddenLines = 0
+}) {
+  const labels = useLabels("logViewer", DEFAULT_LABELS, labelsProp);
+  const label = labelOverride ?? labels.region;
+  const theme = useLoamTheme("log-viewer");
+  const { styles } = useStyles(sheet);
+  const android = isAndroidIdiom(theme);
+  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 locked = disabled || readOnly;
+  const errorText = error === true ? labels.error : error || void 0;
+  const lineFont = size === "sm" ? theme.fontSize[12] : size === "lg" ? theme.fontSize[14] : theme.type.footnote.fontSize;
+  const lineType = {
+    fontSize: lineFont,
+    lineHeight: Math.round(theme.code.lineH * lineFont / theme.type.footnote.fontSize)
+  };
+  const toggleLevel = (level) => {
+    if (locked) return;
+    const next = activeFilter.includes(level) ? activeFilter.filter((l) => l !== level) : [...activeFilter, level];
+    onLevelFilterChange?.(next);
+    if (!filterControlled) setInternalFilter(next);
+  };
+  const showAllLevels = () => {
+    if (locked) return;
+    const all = [...LOG_LEVELS];
+    onLevelFilterChange?.(all);
+    if (!filterControlled) setInternalFilter(all);
+  };
+  const setSearch = (value) => {
+    if (locked) return;
+    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.sm) / 2);
+  const renderLines = () => /* @__PURE__ */ jsx(View, { style: wrap ? styles.linesStretch : void 0, children: visible.map((line) => {
+    const meta = line.level ? levelMeta(theme, labels, line.level) : null;
+    return /* @__PURE__ */ jsxs(View, { style: styles.line, children: [
+      showTimestamps ? /* @__PURE__ */ jsx(Text, { style: styles.time, children: formatLogTime(line.time) }) : null,
+      meta && levelBadge === "code" ? /* @__PURE__ */ jsx(
+        Text,
+        {
+          style: [styles.badgeLabel, styles.badgeCode, { color: meta.fg }],
+          accessibilityLabel: meta.label,
+          children: labels.levelCodes[line.level]
+        }
+      ) : 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, lineType, 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, disabled ? styles.disabled : null], children: [
+      /* @__PURE__ */ jsx(View, { style: styles.filterGroup, role: "group", accessibilityLabel: labels.filterByLevel, children: LOG_LEVELS.filter((l) => !(toolbarDensity === "compact" && l === "debug")).map(
+        (level) => {
+          const meta = levelMeta(theme, labels, level);
+          const on = activeFilter.includes(level);
+          return /* @__PURE__ */ jsxs(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityLabel: meta.label,
+              accessibilityState: { selected: on, disabled: locked },
+              disabled,
+              onPress: () => toggleLevel(level),
+              hitSlop: { top: tapSlop, bottom: tapSlop },
+              style: ({ pressed }) => [
+                styles.chip,
+                // Android: the level filters are the Chip sm pill.
+                android ? { borderRadius: theme.radius.full } : null,
+                on && chipStyle === "neutral" ? { backgroundColor: theme.color.surface3, borderColor: theme.edge.neutral } : on ? { backgroundColor: meta.bg, borderColor: meta.edge } : {
+                  backgroundColor: theme.color.surface2,
+                  borderColor: theme.color.border
+                },
+                pressed && { backgroundColor: theme.state.pressed }
+              ],
+              children: [
+                chipStyle === "neutral" ? on ? /* @__PURE__ */ jsx(Icon, { name: "check", size: theme.icon.sm, color: theme.color.text }) : null : /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    name: meta.icon,
+                    size: theme.icon.sm,
+                    color: on ? meta.fg : theme.color.text
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    style: [
+                      styles.chipLabel,
+                      android ? styles.chipLabelAndroid : null,
+                      { color: on && chipStyle === "level" ? meta.fg : theme.color.text }
+                    ],
+                    children: meta.label
+                  }
+                )
+              ]
+            },
+            level
+          );
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(
+        View,
+        {
+          style: [
+            styles.searchWrap,
+            {
+              height: theme.ctl[searchSize],
+              paddingHorizontal: theme.ctl.px[searchSize],
+              borderRadius: theme.ctl.r[searchSize]
+            }
+          ],
+          children: [
+            /* @__PURE__ */ jsx(Icon, { name: "search", size: theme.icon.sm, color: theme.color.text3 }),
+            /* @__PURE__ */ jsx(
+              TextInput,
+              {
+                value: activeSearch,
+                onChangeText: setSearch,
+                accessibilityLabel: labels.search,
+                editable: !locked,
+                "aria-disabled": disabled || void 0,
+                placeholder: labels.searchPlaceholder,
+                placeholderTextColor: theme.color.text3,
+                style: [styles.searchInput, { fontSize: theme.fontSize[android ? 16 : 17] }]
+              }
+            )
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(View, { style: styles.surfaceWrap, children: [
+      /* @__PURE__ */ jsxs(
+        ScrollView,
+        {
+          ref: scrollRef,
+          testID,
+          role: "log",
+          focusable: true,
+          accessibilityLabel: label,
+          accessibilityLiveRegion: liveRegion,
+          "aria-busy": loading || void 0,
+          "aria-invalid": errorText ? true : void 0,
+          onScroll,
+          onContentSizeChange,
+          scrollEventThrottle: 16,
+          style: [
+            styles.surface,
+            { maxHeight },
+            errorText ? { borderColor: theme.color.danger } : null
+          ],
+          contentContainerStyle: styles.surfaceContent,
+          children: [
+            hiddenLines > 0 ? /* @__PURE__ */ jsx(View, { style: styles.notice, accessibilityRole: "text", children: /* @__PURE__ */ jsx(Text, { style: styles.noticeText, children: labels.hiddenLines(hiddenLines) }) }) : null,
+            hiddenCount > 0 ? /* @__PURE__ */ jsx(View, { style: styles.notice, accessibilityRole: "text", children: /* @__PURE__ */ jsx(Text, { style: styles.noticeText, children: labels.truncated(hiddenCount, maxLines) }) }) : null,
+            visible.length === 0 ? lines.length > 0 ? (
+              // Lines exist but the level filter hides every one: say so and
+              // offer the one-step way back.
+              /* @__PURE__ */ jsxs(View, { style: styles.emptyRow, children: [
+                /* @__PURE__ */ jsx(Text, { style: styles.empty, children: labels.noLevelMatch }),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    accessibilityLabel: labels.showAllLevels,
+                    onPress: showAllLevels,
+                    children: labels.showAllLevels
+                  }
+                )
+              ] })
+            ) : /* @__PURE__ */ jsx(Text, { style: styles.empty, children: labels.empty }) : 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() })
+            ),
+            loading ? /* @__PURE__ */ jsx(View, { style: styles.loadingRow, testID: "log-viewer-loading", children: /* @__PURE__ */ jsx(
+              ActivityIndicator,
+              {
+                size: "small",
+                color: theme.color.text3,
+                accessibilityLabel: labels.loading
+              }
+            ) }) : null
+          ]
+        }
+      ),
+      showJump ? /* @__PURE__ */ jsx(View, { pointerEvents: "box-none", style: styles.jumpAnchor, children: /* @__PURE__ */ jsxs(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: labels.jumpToLatest,
+          onPress: jumpToLatest,
+          hitSlop: tapSlop,
+          style: ({ pressed }) => [
+            styles.jump,
+            pressed && { opacity: theme.state.pressedOpacity }
+          ],
+          children: [
+            /* @__PURE__ */ jsx(Icon, { name: "arrow-down", size: theme.icon.sm, color: theme.color.surface }),
+            /* @__PURE__ */ jsx(Text, { style: styles.jumpLabel, children: labels.jumpToLatest })
+          ]
+        }
+      ) }) : null
+    ] }),
+    errorText ? /* @__PURE__ */ jsxs(View, { style: styles.errorRow, role: "alert", children: [
+      /* @__PURE__ */ jsx(Icon, { name: "alert-circle", size: theme.icon.sm, color: theme.color.danger }),
+      /* @__PURE__ */ jsx(Text, { style: styles.errorText, children: errorText })
+    ] }) : 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.sm,
+    paddingHorizontal: theme.ctl.px.sm,
+    borderRadius: theme.radius.sm,
+    borderWidth: theme.borderWidth.base
+  },
+  chipLabel: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    fontWeight: theme.fontWeight.semibold
+  },
+  chipLabelAndroid: { fontSize: theme.fontSize[14], fontWeight: theme.fontWeight.medium },
+  searchWrap: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s2,
+    flexGrow: 1,
+    flexBasis: theme.space[140],
+    // Search is Input lg 44 on both phones.
+    height: theme.ctl.lg,
+    paddingHorizontal: theme.ctl.px.lg,
+    borderRadius: theme.ctl.r.lg,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface2
+  },
+  searchInput: {
+    flex: 1,
+    fontFamily: theme.font.sans,
+    color: theme.color.text,
+    paddingVertical: 0
+  },
+  disabled: { opacity: theme.state.disabledOpacity },
+  loadingRow: {
+    alignItems: "flex-start",
+    paddingHorizontal: theme.space.s3,
+    paddingVertical: theme.space.s1
+  },
+  errorRow: { flexDirection: "row", alignItems: "center", gap: theme.space.s1 },
+  errorText: {
+    flex: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    color: theme.color.danger
+  },
+  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
+  },
+  emptyRow: { flexDirection: "row", flexWrap: "wrap", alignItems: "center" },
+  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
+  },
+  badgeCode: { marginTop: theme.space[1] },
+  lineText: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.code.lineH,
+    color: theme.code.fg
+  },
+  lineTextWrap: { flex: 1, flexShrink: 1 },
+  jumpAnchor: {
+    position: "absolute",
+    bottom: theme.space.s3,
+    left: 0,
+    right: 0,
+    alignItems: "center"
+  },
+  // The Timeline jump pill: chip sm 30, 13 / 600, px 12, inverse ink, sh-md.
+  jump: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s1,
+    height: theme.ctl.sm,
+    paddingHorizontal: theme.space.s3,
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.text,
+    ...theme.shadow.md
+  },
+  jumpLabel: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[13],
+    fontWeight: theme.fontWeight.semibold,
+    letterSpacing: theme.type.footnote.letterSpacing,
+    color: theme.color.surface
+  }
+}));
+
+export { LOG_LEVELS, LogViewer };