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

package/dist/chunk-WS56BL3D.js

@@ -0,0 +1 @@
+

package/dist/chunk-WSW6ZFAQ.js

@@ -0,0 +1,98 @@
+import { useResolvedMotion } from './chunk-6N33LFQA.js';
+import * as React from 'react';
+import { Animated, Easing, Text } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function StreamFade({ children, inline = false, style }) {
+  const theme = useLoamTheme();
+  const opacity = React.useRef(new Animated.Value(0)).current;
+  React.useEffect(() => {
+    Animated.timing(opacity, {
+      toValue: 1,
+      duration: theme.motion.enter.duration,
+      easing: Easing.bezier(...theme.motion.enter.easing),
+      useNativeDriver: true
+    }).start();
+  }, [opacity, theme]);
+  const Comp = inline ? Animated.Text : Animated.View;
+  return /* @__PURE__ */ jsx(Comp, { style: [{ opacity }, style], children });
+}
+function Caret() {
+  const theme = useLoamTheme();
+  const opacity = React.useRef(new Animated.Value(1)).current;
+  const blink = theme.duration[500];
+  React.useEffect(() => {
+    const loop = Animated.loop(
+      Animated.sequence([
+        // A hard on/off blink: hold, then flip in ~1ms. Half lit, half dark.
+        // The hold is the 500ms duration step, so the cycle is a round second.
+        Animated.timing(opacity, {
+          toValue: 0,
+          duration: 1,
+          delay: blink,
+          useNativeDriver: true
+        }),
+        Animated.timing(opacity, {
+          toValue: 1,
+          duration: 1,
+          delay: blink,
+          useNativeDriver: true
+        })
+      ])
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [opacity, blink]);
+  return /* @__PURE__ */ jsx(
+    Animated.Text,
+    {
+      "aria-hidden": true,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants",
+      style: { opacity },
+      children: "\u258D"
+    }
+  );
+}
+function StreamingText({
+  text,
+  children,
+  streaming = false,
+  motion = "full",
+  style
+}) {
+  const { styles } = useStyles(sheet);
+  const resolved = useResolvedMotion(motion);
+  const animate = resolved === "full";
+  const content = text ?? (typeof children === "string" ? children : void 0);
+  const prevRef = React.useRef("");
+  React.useEffect(() => {
+    if (content !== void 0) prevRef.current = content;
+  });
+  const rootStyle = [styles.root, style];
+  if (!animate || content === void 0) {
+    return /* @__PURE__ */ jsx(Text, { style: rootStyle, "aria-busy": streaming || void 0, children: content ?? children });
+  }
+  const prev = prevRef.current;
+  const settled = prev && content.startsWith(prev) ? prev : "";
+  const tail = content.slice(settled.length);
+  return /* @__PURE__ */ jsxs(Text, { style: rootStyle, "aria-busy": streaming || void 0, children: [
+    settled,
+    tail ? /* @__PURE__ */ jsx(StreamFade, { inline: true, children: tail }, settled.length) : null,
+    streaming ? /* @__PURE__ */ jsx(Caret, {}) : null
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  // Body copy at full ink — AA on the surface in both modes; the transient fade
+  // never leaves it dimmed, so the accessible text is always full-contrast.
+  root: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.body.fontSize,
+    lineHeight: theme.type.body.lineHeight,
+    letterSpacing: theme.type.body.letterSpacing,
+    color: theme.color.text
+  }
+}));
+
+export { Caret, StreamFade, StreamingText };

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 };