@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/chunk-3A56MIAN.js

@@ -0,0 +1,599 @@
+import { getClipboard } from './chunk-TTQ24HQX.js';
+import { EmptyState } from './chunk-QJMMM4RC.js';
+import { Chip } from './chunk-7NGMUVNU.js';
+import { Alert } from './chunk-Z7I4ZSO6.js';
+import { Sheet } from './chunk-B7JZ3N5G.js';
+import { Button } from './chunk-5DTKORLI.js';
+import { Text as Text$1 } from './chunk-L4D5LHCH.js';
+import { Skeleton } from './chunk-YJ5PXOX3.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import { useResolvedMotion } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+import { Pressable, Text, View, ScrollView } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var DEFAULT_LABELS = {
+  title: "Transcript",
+  find: "Find in transcript",
+  follow: "Follow",
+  download: "Download transcript",
+  copy: "Copy",
+  jumpTo: (time) => `Jump to ${time}`,
+  seek: (time) => `Play from ${time}`,
+  lowConfidence: "Low confidence",
+  listeningTitle: "Listening for speech",
+  listeningDescription: "Words appear here as they are recognised.",
+  emptyTitle: "No transcript yet",
+  errorTitle: "Transcription paused.",
+  retry: "Retry",
+  loading: "Loading transcript"
+};
+function formatTranscriptTime(seconds) {
+  const total = Math.max(0, Math.floor(seconds));
+  const h = Math.floor(total / 3600);
+  const m = Math.floor(total % 3600 / 60);
+  const sec = String(total % 60).padStart(2, "0");
+  return h > 0 ? `${h}:${String(m).padStart(2, "0")}:${sec}` : `${m}:${sec}`;
+}
+var initials = (name) => {
+  const parts = name.trim().split(/\s+/);
+  const numbered = /(\d+)$/.exec(name);
+  if (numbered && parts.length <= 2 && /^speaker$/i.test(parts[0] ?? "")) return numbered[1] ?? "";
+  return parts.slice(0, 2).map((p) => p[0]?.toUpperCase() ?? "").join("");
+};
+var isBracketed = (text) => /^\[.*\]$/.test(text.replace(/[.,;:!?]+$/, ""));
+var wordsOf = (s) => s.words ?? (s.text ? s.text.split(/\s+/).filter(Boolean).map((text) => ({ text })) : []);
+var normalise = (w) => w.toLowerCase().replace(/[^\p{L}\p{N}']+/gu, "");
+function TranscriptRow({
+  start,
+  speaker,
+  words,
+  status = "final",
+  active = false,
+  currentWord,
+  showSpeaker,
+  marks,
+  confidenceThreshold = 0.6,
+  onSeek,
+  onCopy,
+  labels: labelsProp,
+  style,
+  testID
+}) {
+  const theme = useLoamTheme();
+  const { styles: s } = useStyles(sheet);
+  const labels = useLabels("transcript", DEFAULT_LABELS, labelsProp);
+  const android = isAndroidIdiom(theme);
+  const provisional = status === "provisional";
+  const time = formatTranscriptTime(start);
+  const text = words.map((w) => w.text).join(" ");
+  const speakerLine = (showSpeaker ?? Boolean(speaker)) && speaker;
+  const copy = () => {
+    if (onCopy) onCopy(text);
+    else void getClipboard()?.writeText(text);
+  };
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      testID,
+      onPress: onSeek ? () => onSeek(start) : void 0,
+      onLongPress: copy,
+      focusable: false,
+      accessibilityState: { selected: active },
+      accessibilityActions: [{ name: "copy", label: labels.copy }],
+      onAccessibilityAction: (e) => {
+        if (e.nativeEvent.actionName === "copy") copy();
+      },
+      style: ({ pressed }) => [
+        s.row,
+        { minHeight: theme.space[android ? 48 : 44] },
+        active ? s.active : pressed ? s.pressed : null,
+        style
+      ],
+      children: [
+        /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            onPress: onSeek ? () => onSeek(start) : void 0,
+            accessibilityRole: "button",
+            accessibilityLabel: labels.seek(time),
+            hitSlop: 8,
+            style: s.timeSlot,
+            children: /* @__PURE__ */ jsx(Text, { style: [s.time, active && s.timeActive], children: time })
+          }
+        ),
+        /* @__PURE__ */ jsxs(View, { style: s.content, children: [
+          speakerLine ? /* @__PURE__ */ jsxs(View, { testID: "transcript-speaker", style: s.speaker, children: [
+            /* @__PURE__ */ jsx(View, { style: [s.avatar, speaker.unknown && s.avatarUnknown], children: /* @__PURE__ */ jsx(Text, { style: s.avatarText, children: initials(speaker.name) }) }),
+            /* @__PURE__ */ jsx(Text$1, { variant: "subheadline", style: s.name, numberOfLines: 1, children: speaker.name })
+          ] }) : null,
+          /* @__PURE__ */ jsx(Text$1, { variant: "body", style: provisional ? s.provisionalText : s.text, children: words.map((w, i) => {
+            const mark = marks?.[i];
+            const low = w.confidence !== void 0 && w.confidence < confidenceThreshold;
+            return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+              i > 0 ? " " : null,
+              /* @__PURE__ */ jsx(
+                Text,
+                {
+                  testID: mark ? `transcript-mark-${mark}` : low ? "transcript-low" : void 0,
+                  accessibilityLabel: low ? `${w.text}, ${labels.lowConfidence}` : void 0,
+                  style: [
+                    isBracketed(w.text) && s.bracketed,
+                    low && s.low,
+                    i === currentWord && s.current,
+                    mark && s.mark,
+                    mark === "current" && s.markCurrent
+                  ],
+                  children: w.text
+                }
+              )
+            ] }, i);
+          }) }),
+          provisional ? /* @__PURE__ */ jsx(View, { testID: "transcript-provisional", style: s.dots, children: [1, 0.6, 0.3].map((o) => /* @__PURE__ */ jsx(View, { style: [s.dot, { opacity: o }] }, o)) }) : null
+        ] })
+      ]
+    }
+  );
+}
+function TranscriptPanel({
+  segments,
+  currentTime,
+  follow: followProp,
+  defaultFollow = true,
+  onFollowChange,
+  onSeek,
+  query,
+  queryIndex = 0,
+  onFind,
+  onDownload,
+  loading = false,
+  motion = "full",
+  error,
+  onRetry,
+  live = false,
+  title,
+  confidenceThreshold,
+  onCopy,
+  labels: labelsProp,
+  style,
+  testID
+}) {
+  const theme = useLoamTheme();
+  const { styles: s } = useStyles(sheet);
+  const labels = useLabels("transcript", DEFAULT_LABELS, labelsProp);
+  const [followState, setFollowState] = React.useState(defaultFollow);
+  const follow = followProp ?? followState;
+  const setFollow = (next) => {
+    if (followProp === void 0) setFollowState(next);
+    onFollowChange?.(next);
+  };
+  const rows = React.useMemo(
+    () => error ? segments.filter((seg) => (seg.status ?? "final") === "final") : segments,
+    [segments, error]
+  );
+  const activeIndex = React.useMemo(() => {
+    if (currentTime === void 0) return -1;
+    let found = -1;
+    rows.forEach((seg, i) => {
+      const end = seg.end ?? rows[i + 1]?.start ?? Infinity;
+      if (currentTime >= seg.start && currentTime < end) found = i;
+    });
+    return found;
+  }, [rows, currentTime]);
+  const marks = React.useMemo(() => {
+    const needle = query ? normalise(query) : "";
+    const out = {};
+    if (!needle) return out;
+    let n = 0;
+    for (const seg of rows) {
+      wordsOf(seg).forEach((w, i) => {
+        if (!normalise(w.text).includes(needle)) return;
+        (out[seg.id] ??= {})[i] = n === queryIndex ? "current" : "match";
+        n += 1;
+      });
+    }
+    return out;
+  }, [rows, query, queryIndex]);
+  const level = useResolvedMotion(motion, "transcript");
+  const scroll = React.useRef(null);
+  const offsets = React.useRef({});
+  const reveal = React.useCallback(
+    (id) => {
+      if (id === void 0) return;
+      const y = offsets.current[id];
+      if (y !== void 0)
+        scroll.current?.scrollTo({ y: Math.max(0, y - 6), animated: level === "full" });
+    },
+    [level]
+  );
+  const activeId = rows[activeIndex]?.id;
+  React.useEffect(() => {
+    if (follow) reveal(activeId);
+  }, [follow, activeId, reveal]);
+  const currentMatchId = Object.keys(marks).find(
+    (id) => Object.values(marks[id] ?? {}).includes("current")
+  );
+  React.useEffect(() => {
+    reveal(currentMatchId);
+  }, [currentMatchId, reveal]);
+  const [showSkeleton, setShowSkeleton] = React.useState(false);
+  React.useEffect(() => {
+    if (!loading) {
+      setShowSkeleton(false);
+      return void 0;
+    }
+    const id = setTimeout(() => setShowSkeleton(true), 300);
+    return () => clearTimeout(id);
+  }, [loading]);
+  let body;
+  if (loading) {
+    body = showSkeleton ? /* @__PURE__ */ jsx(
+      View,
+      {
+        testID: "transcript-skeleton",
+        role: "status",
+        accessibilityLabel: labels.loading,
+        style: s.skeleton,
+        children: [0, 1, 2].map((i) => /* @__PURE__ */ jsxs(View, { style: s.skeletonRow, children: [
+          /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: 32, decorative: true, motion }),
+          /* @__PURE__ */ jsxs(View, { style: s.content, children: [
+            /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: 120, decorative: true, motion }),
+            /* @__PURE__ */ jsx(Skeleton, { variant: "text", decorative: true, motion })
+          ] })
+        ] }, i))
+      }
+    ) : null;
+  } else if (rows.length === 0 && !error) {
+    body = /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        layout: "inline",
+        variant: live ? "empty" : "no-results",
+        icon: live ? "mic" : "file-text",
+        title: live ? labels.listeningTitle : labels.emptyTitle,
+        description: live ? labels.listeningDescription : void 0
+      }
+    );
+  } else {
+    body = rows.map((seg, i) => {
+      const words = wordsOf(seg);
+      const active = i === activeIndex;
+      let currentWord;
+      if (active && currentTime !== void 0) {
+        words.forEach((w, wi) => {
+          if (w.start !== void 0 && w.start <= currentTime) currentWord = wi;
+        });
+      }
+      return /* @__PURE__ */ jsx(
+        View,
+        {
+          onLayout: (e) => {
+            offsets.current[seg.id] = e.nativeEvent.layout.y;
+          },
+          children: /* @__PURE__ */ jsx(
+            TranscriptRow,
+            {
+              testID: active ? "transcript-row-active" : void 0,
+              start: seg.start,
+              speaker: seg.speaker,
+              words,
+              status: seg.status,
+              active,
+              currentWord,
+              showSpeaker: Boolean(seg.speaker) && seg.speaker?.id !== rows[i - 1]?.speaker?.id,
+              marks: marks[seg.id],
+              confidenceThreshold,
+              onSeek,
+              onCopy,
+              labels: labelsProp
+            }
+          )
+        },
+        seg.id
+      );
+    });
+  }
+  const jumpTime = rows[activeIndex]?.start;
+  return /* @__PURE__ */ jsxs(View, { testID, style: [s.panel, style], children: [
+    /* @__PURE__ */ jsxs(View, { style: s.header, children: [
+      /* @__PURE__ */ jsx(Text$1, { variant: "headline", style: s.title, numberOfLines: 1, children: title ?? labels.title }),
+      onFind ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          leadingIcon: "search",
+          accessibilityLabel: labels.find,
+          onPress: onFind
+        }
+      ) : null,
+      isAndroidIdiom(theme) ? /* @__PURE__ */ jsx(Chip, { variant: "filter", size: "sm", selected: follow, onSelectedChange: setFollow, children: labels.follow }) : /* @__PURE__ */ jsxs(
+        Pressable,
+        {
+          accessibilityRole: "switch",
+          accessibilityState: { checked: follow },
+          "aria-checked": follow,
+          accessibilityLabel: labels.follow,
+          onPress: () => setFollow(!follow),
+          style: ({ pressed }) => [s.follow, follow ? s.followOn : pressed ? s.pressed : null],
+          children: [
+            follow ? /* @__PURE__ */ jsx(Icon, { name: "check", size: 14, color: theme.color.accentStrong }) : null,
+            /* @__PURE__ */ jsx(Text, { style: s.followText, children: labels.follow })
+          ]
+        }
+      ),
+      onDownload ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          leadingIcon: "download",
+          accessibilityLabel: labels.download,
+          onPress: onDownload
+        }
+      ) : null
+    ] }),
+    error ? /* @__PURE__ */ jsx(View, { style: s.alert, children: /* @__PURE__ */ jsx(
+      Alert,
+      {
+        size: "compact",
+        tone: "danger",
+        title: labels.errorTitle,
+        description: error,
+        action: onRetry ? /* @__PURE__ */ jsx(Button, { variant: "outline", size: "xs", onPress: onRetry, children: labels.retry }) : void 0
+      }
+    ) }) : null,
+    /* @__PURE__ */ jsxs(View, { style: s.bodyWrap, children: [
+      /* @__PURE__ */ jsx(
+        ScrollView,
+        {
+          ref: scroll,
+          testID: "transcript-body",
+          contentContainerStyle: s.body,
+          onScrollBeginDrag: () => {
+            if (follow) setFollow(false);
+          },
+          children: body
+        }
+      ),
+      !follow && jumpTime !== void 0 ? /* @__PURE__ */ jsx(View, { pointerEvents: "box-none", style: s.jumpWrap, children: /* @__PURE__ */ jsxs(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: labels.jumpTo(formatTranscriptTime(jumpTime)),
+          onPress: () => {
+            setFollow(true);
+            reveal(activeId);
+          },
+          style: ({ pressed }) => [s.jump, pressed && s.pressed],
+          children: [
+            /* @__PURE__ */ jsx(Icon, { name: "arrow-down", size: 14, color: theme.color.text }),
+            /* @__PURE__ */ jsx(Text, { style: s.jumpText, children: labels.jumpTo(formatTranscriptTime(jumpTime)) })
+          ]
+        }
+      ) }) : null
+    ] })
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  panel: {
+    flex: 1,
+    overflow: "hidden",
+    borderRadius: theme.radius[16],
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface
+  },
+  header: {
+    height: theme.space[44],
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[2],
+    paddingStart: theme.space.s4,
+    paddingEnd: theme.space[6],
+    borderBottomWidth: theme.borderWidth.base,
+    borderBottomColor: theme.color.border
+  },
+  title: { flex: 1, color: theme.color.text },
+  follow: {
+    height: theme.ctl.sm,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[4],
+    paddingHorizontal: theme.space[10],
+    borderRadius: theme.radius[8]
+  },
+  followOn: { backgroundColor: theme.state.selected },
+  followText: {
+    fontSize: theme.fontSize[13],
+    fontWeight: theme.fontWeight.semibold,
+    color: theme.color.text
+  },
+  alert: { paddingHorizontal: theme.space[6], paddingTop: theme.space[6] },
+  bodyWrap: { flex: 1 },
+  body: { padding: theme.space[6], gap: theme.space[2] },
+  row: {
+    flexDirection: "row",
+    gap: theme.space[12],
+    paddingHorizontal: theme.space[10],
+    paddingVertical: theme.space[8],
+    borderRadius: theme.radius[8]
+  },
+  active: { backgroundColor: theme.state.selected },
+  pressed: { backgroundColor: theme.state.pressed },
+  timeSlot: { width: theme.space[48], paddingTop: theme.space[3] },
+  time: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.fontSize[12],
+    color: theme.color.text2,
+    fontVariant: ["tabular-nums"]
+  },
+  timeActive: { fontWeight: theme.fontWeight.semibold, color: theme.color.accentStrong },
+  content: { flex: 1, minWidth: 0, gap: theme.space[4] },
+  speaker: {
+    height: theme.space[20],
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[8]
+  },
+  avatar: {
+    width: theme.space[20],
+    height: theme.space[20],
+    borderRadius: theme.radius.full,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: theme.color.surface3
+  },
+  avatarUnknown: {
+    backgroundColor: "transparent",
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.borderStrong
+  },
+  avatarText: {
+    fontSize: theme.fontSize[10],
+    fontWeight: theme.fontWeight.semibold,
+    color: theme.color.text2
+  },
+  name: { fontWeight: theme.fontWeight.semibold, color: theme.color.text },
+  text: { color: theme.color.text },
+  provisionalText: { color: theme.color.text2 },
+  bracketed: { color: theme.color.text2 },
+  low: {
+    textDecorationLine: "underline",
+    textDecorationStyle: "dotted",
+    textDecorationColor: theme.color.text3
+  },
+  current: { textDecorationLine: "underline", textDecorationColor: theme.color.accentStrong },
+  // loam-contrast-ignore — inline search-match highlight on text; a Text span cannot carry a border.
+  mark: { backgroundColor: theme.color.accentSoft, color: theme.color.accentOnSoft },
+  markCurrent: { backgroundColor: theme.color.accent, color: theme.color.accentInk },
+  dots: { flexDirection: "row", gap: theme.space[3], paddingTop: theme.space[2] },
+  dot: {
+    width: theme.space[4],
+    height: theme.space[4],
+    borderRadius: theme.radius[2],
+    backgroundColor: theme.color.text2
+  },
+  skeleton: { padding: theme.space[6], gap: theme.space[12] },
+  skeletonRow: { flexDirection: "row", gap: theme.space[12], paddingHorizontal: theme.space[10] },
+  jumpWrap: {
+    // In flow beneath the list, not over it: the pill never covers a row.
+    paddingVertical: theme.space[8],
+    alignItems: "center"
+  },
+  jump: {
+    height: theme.ctl.sm,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[6],
+    paddingHorizontal: theme.space[12],
+    borderRadius: theme.radius.full,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.borderStrong,
+    backgroundColor: theme.color.surface,
+    ...theme.shadow.md
+  },
+  jumpText: {
+    fontSize: theme.fontSize[13],
+    fontWeight: theme.fontWeight.semibold,
+    color: theme.color.text
+  }
+}));
+var SLOT_LABELS = { title: "Transcript" };
+function TranscriptSlot({
+  transcript,
+  currentTime,
+  onSeek,
+  open: openProp,
+  onOpenChange,
+  orientation = "horizontal",
+  align = "start"
+}) {
+  const { styles: s } = useStyles(sheet2);
+  const theme = useLoamTheme();
+  const [own, setOwn] = React.useState(false);
+  const open = openProp ?? own;
+  const setOpen = (next) => {
+    if (openProp === void 0) setOwn(next);
+    onOpenChange?.(next);
+  };
+  const { labels: labelsProp, style, ...panel } = transcript;
+  const labels = useLabels("transcript", SLOT_LABELS, labelsProp);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: labels.title,
+        onPress: () => setOpen(true),
+        style: [s.row, orientation === "vertical" && s.rowVertical],
+        children: [
+          /* @__PURE__ */ jsx(Icon, { name: "captions", size: theme.icon.md, color: theme.color.text2 }),
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: [
+                s.label,
+                (align === "center" || orientation === "vertical") && { textAlign: "center" },
+                orientation === "vertical" && s.labelVertical
+              ],
+              children: labels.title
+            }
+          ),
+          orientation === "vertical" ? null : /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: theme.icon.md, color: theme.color.text2 })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Sheet,
+      {
+        open,
+        onOpenChange: setOpen,
+        title: labels.title,
+        detents: ["half", "full"],
+        initialDetent: "half",
+        children: /* @__PURE__ */ jsx(View, { style: s.body, children: /* @__PURE__ */ jsx(
+          TranscriptPanel,
+          {
+            ...panel,
+            labels: labelsProp,
+            currentTime,
+            onSeek,
+            style: [s.panel, style]
+          }
+        ) })
+      }
+    )
+  ] });
+}
+var sheet2 = createStyleSheet((theme) => ({
+  row: {
+    minHeight: theme.ctl.lg,
+    paddingHorizontal: theme.space[14],
+    borderRadius: theme.radius.lg,
+    backgroundColor: theme.color.surface3,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[10]
+  },
+  rowVertical: {
+    flexDirection: "column",
+    justifyContent: "center",
+    paddingVertical: theme.space[14],
+    gap: theme.space[6]
+  },
+  labelVertical: { flex: 0 },
+  label: {
+    flex: 1,
+    color: theme.color.text,
+    fontSize: theme.fontSize[15],
+    fontWeight: theme.fontWeight.semibold
+  },
+  body: { flex: 1, minHeight: 320 },
+  panel: { flex: 1 }
+}));
+
+export { TranscriptPanel, TranscriptRow, TranscriptSlot };