@buoy-gg/console 7.0.29 → 7.0.30

package/package.json

@@ -1,19 +1,18 @@
 {
   "name": "@buoy-gg/console",
-  "version": "7.0.29",
+  "version": "7.0.30",
   "description": "Chrome DevTools-style console for React Native — captures every console.* on device, even in release builds. Part of Buoy devtools.",
-  "main": "lib/commonjs/index",
-  "module": "lib/module/index",
+  "main": "lib/commonjs/index.js",
+  "module": "lib/module/index.js",
   "types": "lib/typescript/index.d.ts",
-  "react-native": "src/index.tsx",
+  "react-native": "lib/module/index.js",
   "source": "src/index.tsx",
   "files": [
-    "src",
     "lib"
   ],
   "sideEffects": false,
   "dependencies": {
-    "@buoy-gg/shared-ui": "^7.0.29"
+    "@buoy-gg/shared-ui": "^7.0.30"
   },
   "peerDependencies": {
     "react": "*",

package/src/components/ConsoleIcon.tsx

@@ -1,9 +0,0 @@
-/**
- * ConsoleIcon — re-exported from the Buoy Icon Format.
- *
- * The artwork lives in shared/icons/console.json and is generated into
- * @buoy-gg/floating-tools-core, so React Native, the desktop dashboard and
- * Flutter all render the same drawing. Edit the JSON, then `pnpm icons`.
- */
-
-export { ConsoleIcon, CONSOLE_ICON_COLOR } from "@buoy-gg/shared-ui";

package/src/components/ConsoleLogList.tsx

@@ -1,135 +0,0 @@
-import React from "react";
-import {
-  View,
-  Text,
-  FlatList,
-  TouchableOpacity,
-  StyleSheet,
-  type ListRenderItem,
-} from "react-native";
-import { useConsoleLogs } from "../hooks/useConsoleLogs";
-import { night } from "@buoy-gg/shared-ui";
-import { clearEntries, type ConsoleLogEntry, type ConsoleLevel } from "../store/consoleLogStore";
-
-const LEVEL_COLOR: Record<ConsoleLevel, string> = {
-  verbose: "#9b9b9b",
-  info: night.color.text,
-  warning: "#e2c08d",
-  error: "#f48771",
-};
-
-function formatTime(ts: number): string {
-  const d = new Date(ts);
-  const pad = (n: number, len = 2) => String(n).padStart(len, "0");
-  return `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}.${pad(
-    d.getMilliseconds(),
-    3
-  )}`;
-}
-
-/**
- * Basic console log list — a flat, newest-last stream of captured entries.
- * This is the proof-of-concept view; it will be replaced by a 1:1 port of
- * Chrome DevTools' console once capture is verified.
- */
-export function ConsoleLogList() {
-  const { logs } = useConsoleLogs();
-
-  const renderItem: ListRenderItem<ConsoleLogEntry> = ({ item }) => (
-    <View style={styles.row}>
-      <Text style={styles.time}>{formatTime(item.timestamp)}</Text>
-      <Text style={[styles.level, { color: LEVEL_COLOR[item.level] }]}>
-        {item.level.toUpperCase()}
-      </Text>
-      <Text style={[styles.message, { color: LEVEL_COLOR[item.level] }]} numberOfLines={3}>
-        {item.message}
-      </Text>
-    </View>
-  );
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.header}>
-        <Text style={styles.headerTitle}>Console ({logs.length})</Text>
-        <TouchableOpacity onPress={() => clearEntries()} style={styles.clearButton}>
-          <Text style={styles.clearText}>Clear</Text>
-        </TouchableOpacity>
-      </View>
-      <FlatList
-        data={logs}
-        keyExtractor={(item) => String(item.id)}
-        renderItem={renderItem}
-        ListEmptyComponent={
-          <Text style={styles.empty}>No console logs captured yet.</Text>
-        }
-        contentContainerStyle={logs.length === 0 ? styles.emptyContainer : undefined}
-      />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    // Transparent so the night sheet's star field shows through.
-    backgroundColor: "transparent",
-  },
-  header: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: night.color.border,
-  },
-  headerTitle: {
-    color: night.color.text,
-    fontSize: 13,
-    fontWeight: "600",
-  },
-  clearButton: {
-    paddingHorizontal: 10,
-    paddingVertical: 4,
-    borderRadius: 4,
-    backgroundColor: night.color.surfaceElevated,
-  },
-  clearText: {
-    color: night.color.text,
-    fontSize: 12,
-  },
-  row: {
-    flexDirection: "row",
-    paddingHorizontal: 12,
-    paddingVertical: 4,
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: night.color.separator,
-    gap: 8,
-  },
-  time: {
-    color: night.color.textTertiary,
-    fontSize: 11,
-    fontVariant: ["tabular-nums"],
-    minWidth: 86,
-  },
-  level: {
-    fontSize: 11,
-    fontWeight: "700",
-    minWidth: 44,
-  },
-  message: {
-    flex: 1,
-    fontSize: 12,
-    fontFamily: "monospace",
-  },
-  empty: {
-    color: night.color.textTertiary,
-    fontSize: 13,
-    textAlign: "center",
-  },
-  emptyContainer: {
-    flexGrow: 1,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-});

package/src/components/ConsoleModal.tsx

@@ -1,48 +0,0 @@
-/**
- * ConsoleModal
- *
- * Bottom-sheet wrapper for the console, rendered by FloatingDevTools when the
- * Console tool is opened. The controls live in the shared ModalHeader
- * (`customContent`) — matching Network/Events — and the body is the log list.
- */
-
-import { JsModal } from "@buoy-gg/shared-ui";
-import type { ModalState } from "@buoy-gg/shared-ui";
-import { useConsoleController } from "../devtools/useConsoleController";
-import { ConsoleHeader } from "../devtools/ConsoleHeader";
-import { ConsoleBody } from "../devtools/ConsoleBody";
-
-interface ConsoleModalProps {
-  visible: boolean;
-  onClose: () => void;
-  onBack?: () => void;
-  onMinimize?: (modalState: ModalState) => void;
-  persistenceKey?: string;
-}
-
-export function ConsoleModal({
-  visible,
-  onClose,
-  onBack,
-  onMinimize,
-  persistenceKey,
-}: ConsoleModalProps) {
-  const c = useConsoleController();
-  return (
-    <JsModal
-      visible={visible}
-      onClose={onClose}
-      onMinimize={onMinimize}
-      persistenceKey={persistenceKey}
-      header={{
-        showToggleButton: true,
-        customContent: <ConsoleHeader c={c} onBack={onBack} />,
-      }}
-      enablePersistence
-      initialMode="bottomSheet"
-      disableScrollWrapper
-    >
-      <ConsoleBody c={c} />
-    </JsModal>
-  );
-}

package/src/components/ConsoleRoot.tsx

@@ -1,25 +0,0 @@
-import { useEffect } from "react";
-import {
-  installConsoleCapture,
-  initConsolePersistence,
-} from "../store/consoleLogStore";
-
-/**
- * Mount once near the app root to start capturing console output immediately,
- * so logs emitted before the Console tool is opened are retained.
- *
- * Also restores a preserved buffer (or clears any stale one) before capture
- * starts, so the session honors the "Preserve log" setting from the first log.
- *
- * @example
- * ```tsx
- * <ConsoleRoot />
- * ```
- */
-export function ConsoleRoot(): null {
-  useEffect(() => {
-    // Restore/clear the persisted buffer first, then start capturing.
-    void initConsolePersistence().finally(() => installConsoleCapture());
-  }, []);
-  return null;
-}

package/src/devtools/ConsoleBody.tsx

@@ -1,228 +0,0 @@
-/**
- * ConsoleBody — the modal body. Renders the virtualized log list, or (when a
- * header action selected it) a back-navigable Log levels / Console settings
- * sub-view, mirroring how Network swaps its body to a filter sub-view.
- */
-
-import React, { useCallback, useRef, useSyncExternalStore } from "react";
-import {
-  View,
-  Text,
-  FlatList,
-  TouchableOpacity,
-  ScrollView,
-  StyleSheet,
-  type ListRenderItem,
-} from "react-native";
-import { night, Check } from "@buoy-gg/shared-ui";
-import { consoleTheme } from "./theme";
-import { ConsoleMessageRow } from "./ConsoleMessageRow";
-import type { DisplayRow } from "./useConsoleMessages";
-import {
-  ALL_LEVELS,
-  DEFAULT_LEVELS,
-  LEVEL_LABEL,
-  LEVEL_ORDER,
-  type LevelsMask,
-} from "./consoleFilter";
-import {
-  getPreserveLog,
-  setPreserveLog,
-  subscribePreserveLog,
-} from "../store/consoleLogStore";
-import type { ConsoleController } from "./useConsoleController";
-
-export function ConsoleBody({ c }: { c: ConsoleController }) {
-  if (c.view === "filters") return <FiltersView c={c} />;
-  return <ConsoleList c={c} />;
-}
-
-// ─── Log list ────────────────────────────────────────────────────────────────
-
-function ConsoleList({ c }: { c: ConsoleController }) {
-  const listRef = useRef<FlatList<DisplayRow>>(null);
-  const stickToBottom = useRef(true);
-
-  const renderItem: ListRenderItem<DisplayRow> = useCallback(
-    ({ item }) => (
-      <ConsoleMessageRow
-        row={item}
-        showTimestamps={c.showTimestamps}
-        onToggleGroup={c.onToggleGroup}
-        onToggleCluster={c.onToggleCluster}
-      />
-    ),
-    [c.showTimestamps, c.onToggleGroup, c.onToggleCluster]
-  );
-
-  return (
-    <FlatList
-      ref={listRef}
-      data={c.rows}
-      keyExtractor={(item) => item.key}
-      renderItem={renderItem}
-      style={styles.list}
-      initialNumToRender={30}
-      maxToRenderPerBatch={30}
-      windowSize={21}
-      removeClippedSubviews
-      onContentSizeChange={() => {
-        if (stickToBottom.current) listRef.current?.scrollToEnd({ animated: false });
-      }}
-      onScroll={(e) => {
-        const { contentOffset, contentSize, layoutMeasurement } = e.nativeEvent;
-        const distanceFromBottom =
-          contentSize.height - (contentOffset.y + layoutMeasurement.height);
-        stickToBottom.current = distanceFromBottom < 40;
-      }}
-      scrollEventThrottle={100}
-    />
-  );
-}
-
-// ─── Sub-views ───────────────────────────────────────────────────────────────
-
-function CheckRow({
-  on,
-  label,
-  subtext,
-  onPress,
-}: {
-  on: boolean;
-  label: string;
-  subtext?: string;
-  onPress: () => void;
-}) {
-  return (
-    <TouchableOpacity style={styles.row} onPress={onPress} activeOpacity={0.7}>
-      <View style={[styles.checkbox, on && styles.checkboxOn]}>
-        {on ? <Check size={12} color={night.color.onAccent} strokeWidth={3} /> : null}
-      </View>
-      <View style={styles.rowTextCol}>
-        <Text style={styles.rowLabel}>{label}</Text>
-        {subtext ? <Text style={styles.rowSubtext}>{subtext}</Text> : null}
-      </View>
-    </TouchableOpacity>
-  );
-}
-
-function SectionLabel({ text }: { text: string }) {
-  return <Text style={styles.sectionLabel}>{text}</Text>;
-}
-
-function FiltersView({ c }: { c: ConsoleController }) {
-  const preserveLog = useSyncExternalStore(subscribePreserveLog, getPreserveLog, getPreserveLog);
-  const toggle = (level: keyof LevelsMask) =>
-    c.setLevelsMask({ ...c.levelsMask, [level]: !c.levelsMask[level] });
-
-  return (
-    <ScrollView style={styles.subView} contentContainerStyle={styles.subViewContent}>
-      <SectionLabel text="Log levels" />
-      <TouchableOpacity
-        style={styles.presetRow}
-        onPress={() => c.setLevelsMask({ ...DEFAULT_LEVELS })}
-      >
-        <Text style={styles.presetText}>Default (hide verbose)</Text>
-      </TouchableOpacity>
-      <TouchableOpacity style={styles.presetRow} onPress={() => c.setLevelsMask({ ...ALL_LEVELS })}>
-        <Text style={styles.presetText}>All levels</Text>
-      </TouchableOpacity>
-      {LEVEL_ORDER.map((level) => (
-        <CheckRow
-          key={level}
-          on={c.levelsMask[level]}
-          label={LEVEL_LABEL[level]}
-          onPress={() => toggle(level)}
-        />
-      ))}
-
-      <View style={styles.divider} />
-
-      <SectionLabel text="Settings" />
-      <CheckRow
-        on={c.showTimestamps}
-        label="Show timestamps"
-        onPress={() => c.setShowTimestamps((s) => !s)}
-      />
-      <CheckRow
-        on={preserveLog}
-        label="Preserve log"
-        subtext="Do not clear log on reload"
-        onPress={() => setPreserveLog(!preserveLog)}
-      />
-    </ScrollView>
-  );
-}
-
-const styles = StyleSheet.create({
-  list: {
-    flex: 1,
-    // Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).
-    backgroundColor: "transparent",
-  },
-  subView: {
-    flex: 1,
-    // Transparent so the night sheet's star field shows through.
-    backgroundColor: "transparent",
-  },
-  subViewContent: {
-    padding: 12,
-  },
-  sectionLabel: {
-    color: night.color.textTertiary,
-    fontSize: 11,
-    textTransform: "uppercase",
-    letterSpacing: 0.5,
-    marginTop: 4,
-    marginBottom: 4,
-    paddingHorizontal: 8,
-  },
-  presetRow: {
-    paddingVertical: 10,
-    paddingHorizontal: 8,
-  },
-  presetText: {
-    color: night.color.accent,
-    fontSize: 14,
-    fontWeight: "600",
-  },
-  divider: {
-    height: StyleSheet.hairlineWidth,
-    backgroundColor: night.color.border,
-    marginVertical: 6,
-  },
-  row: {
-    flexDirection: "row",
-    alignItems: "center",
-    paddingVertical: 10,
-    paddingHorizontal: 8,
-    gap: 12,
-  },
-  rowTextCol: {
-    flexDirection: "column",
-    flex: 1,
-  },
-  rowLabel: {
-    color: night.color.text,
-    fontSize: 14,
-  },
-  rowSubtext: {
-    color: night.color.textTertiary,
-    fontSize: 12,
-    marginTop: 1,
-  },
-  checkbox: {
-    width: 18,
-    height: 18,
-    borderRadius: 4,
-    borderWidth: 1,
-    borderColor: night.color.fillTertiary,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  // Solid accent (not accentSoft) so the onAccent check glyph stays legible.
-  checkboxOn: {
-    backgroundColor: night.color.accent,
-    borderColor: night.color.accent,
-  },
-});

package/src/devtools/ConsoleHeader.tsx

@@ -1,149 +0,0 @@
-/**
- * ConsoleHeader — the Console tool's header, built from the shared ModalHeader
- * pattern so it matches Network/Events 1:1. Controls live here: the
- * Timeline/Grouped TabSelector (or the search field when active), plus action
- * icons for search, level filter, clear, and settings. Tapping the level/filter
- * or settings icon swaps the body to a back-navigable sub-view.
- */
-
-import React from "react";
-import { View, TextInput, TouchableOpacity, StyleSheet } from "react-native";
-import {
-  ModalHeader,
-  TabSelector,
-  night,
-  Search,
-  Filter,
-  Trash2,
-  X,
-} from "@buoy-gg/shared-ui";
-import type { ConsoleController } from "./useConsoleController";
-import type { LayoutMode } from "./useConsoleMessages";
-
-const LAYOUT_TABS = [
-  { key: "chrono", label: "Timeline" },
-  { key: "cluster", label: "Grouped" },
-];
-
-interface ConsoleHeaderProps {
-  c: ConsoleController;
-  /** App-stack back (from the floating menu's AppHost), list view only. */
-  onBack?: () => void;
-}
-
-export function ConsoleHeader({ c, onBack }: ConsoleHeaderProps) {
-  // Filters sub-view: a back chevron returns to the list.
-  if (c.view === "filters") {
-    return (
-      <ModalHeader>
-        <ModalHeader.Navigation onBack={() => c.setView("list")} />
-        <ModalHeader.Content title="Filters" />
-      </ModalHeader>
-    );
-  }
-
-  const hasRows = c.rows.length > 0;
-
-  return (
-    <ModalHeader>
-      {onBack ? <ModalHeader.Navigation onBack={onBack} /> : null}
-      <ModalHeader.Content title="" noMargin>
-        {c.searchActive ? (
-          <View style={styles.searchContainer}>
-            <Search size={14} color={night.color.textSecondary} />
-            <TextInput
-              style={styles.searchInput}
-              placeholder="Filter logs…  /regex/  -exclude"
-              placeholderTextColor={night.color.placeholder}
-              value={c.query}
-              onChangeText={c.setQuery}
-              autoCapitalize="none"
-              autoCorrect={false}
-              returnKeyType="search"
-              onSubmitEditing={() => c.setSearchActive(false)}
-            />
-            {c.query.length > 0 ? (
-              <TouchableOpacity onPress={() => c.setQuery("")} style={styles.searchClear}>
-                <X size={14} color={night.color.textSecondary} />
-              </TouchableOpacity>
-            ) : null}
-          </View>
-        ) : (
-          <TabSelector
-            tabs={LAYOUT_TABS}
-            activeTab={c.layoutMode}
-            onTabChange={(key) => c.setLayoutMode(key as LayoutMode)}
-          />
-        )}
-      </ModalHeader.Content>
-
-      <ModalHeader.Actions>
-        <TouchableOpacity
-          onPress={() => c.setSearchActive((a) => !a)}
-          style={[styles.actionBtn, c.searchActive && styles.actionBtnActive]}
-          accessibilityLabel="Search logs"
-        >
-          <Search size={14} color={c.searchActive ? night.color.accent : night.color.textSecondary} />
-        </TouchableOpacity>
-
-        <TouchableOpacity
-          onPress={() => c.setView("filters")}
-          style={[styles.actionBtn, c.isLevelCustom && styles.actionBtnActive]}
-          accessibilityLabel="Filters"
-        >
-          <Filter size={14} color={c.isLevelCustom ? night.color.accent : night.color.textSecondary} />
-        </TouchableOpacity>
-
-        <TouchableOpacity
-          onPress={c.clear}
-          disabled={!hasRows}
-          style={[styles.actionBtn, !hasRows && styles.actionBtnDisabled]}
-          accessibilityLabel="Clear console"
-        >
-          <Trash2 size={14} color={hasRows ? night.color.textSecondary : night.color.textTertiary} />
-        </TouchableOpacity>
-      </ModalHeader.Actions>
-    </ModalHeader>
-  );
-}
-
-const styles = StyleSheet.create({
-  actionBtn: {
-    width: 32,
-    height: 32,
-    borderRadius: 8,
-    backgroundColor: night.color.buttonSurface,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  actionBtnActive: {
-    backgroundColor: night.color.accentSoft,
-    borderColor: night.color.accentBorderStrong,
-  },
-  actionBtnDisabled: {
-    opacity: 0.55,
-  },
-  searchContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: night.color.surfaceElevated,
-    borderRadius: night.radius.row,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    paddingHorizontal: 12,
-    paddingVertical: 5,
-  },
-  searchInput: {
-    flex: 1,
-    color: night.color.text,
-    fontSize: 13,
-    marginLeft: 6,
-    paddingVertical: 2,
-  },
-  searchClear: {
-    marginLeft: 6,
-    padding: 4,
-  },
-});