@buoy-gg/assets 7.0.28 → 7.0.30

package/src/components/AssetsHeader.tsx

@@ -1,75 +0,0 @@
-/**
- * AssetsHeader — shared ModalHeader wiring, matching the Images/Console
- * header pattern. List mode shows inventory totals plus the shared
- * ToolbarCopyButton (full markdown report); detail mode shows back
- * navigation and the single-asset report.
- */
-
-import {
-  ModalHeader,
-  ToolbarClearButton,
-  ToolbarCopyButton,
-} from "@buoy-gg/shared-ui";
-import { formatBytes } from "../format";
-import type { AssetsStats } from "../types";
-
-interface AssetsHeaderProps {
-  stats: AssetsStats;
-  /** Size measurement in progress — suppress the (partial) byte total. */
-  measuring: boolean;
-  detailOpen: boolean;
-  detailIndex?: number;
-  detailTotal?: number;
-  onCloseDetail: () => void;
-  onClear: () => void;
-  getReport: () => string;
-  onBack?: () => void;
-}
-
-export function AssetsHeader({
-  stats,
-  measuring,
-  detailOpen,
-  detailIndex = -1,
-  detailTotal = 0,
-  onCloseDetail,
-  onClear,
-  getReport,
-  onBack,
-}: AssetsHeaderProps) {
-  if (detailOpen) {
-    const counter =
-      detailIndex >= 0 && detailTotal > 0
-        ? `${detailIndex + 1} of ${detailTotal}`
-        : undefined;
-    return (
-      <ModalHeader>
-        <ModalHeader.Navigation onBack={onCloseDetail} />
-        <ModalHeader.Content title="Asset detail" subtitle={counter} />
-        <ModalHeader.Actions>
-          <ToolbarCopyButton value={getReport} />
-        </ModalHeader.Actions>
-      </ModalHeader>
-    );
-  }
-
-  const subtitleParts = [`${stats.total} assets`];
-  // A mid-measure byte total reads as nonsense ("653 B+") — wait it out.
-  if (stats.totalBytes > 0 && !measuring) {
-    const partial = stats.measuredCount < stats.total ? "+" : "";
-    subtitleParts.push(`${formatBytes(stats.totalBytes)}${partial}`);
-  }
-  if (stats.neverLoaded > 0) subtitleParts.push(`${stats.neverLoaded} never loaded`);
-  if (stats.fontFamilies > 0) subtitleParts.push(`${stats.fontFamilies} fonts`);
-
-  return (
-    <ModalHeader>
-      {onBack ? <ModalHeader.Navigation onBack={onBack} /> : null}
-      <ModalHeader.Content title="Assets" subtitle={subtitleParts.join(" · ")} />
-      <ModalHeader.Actions>
-        <ToolbarCopyButton value={getReport} />
-        <ToolbarClearButton onPress={onClear} />
-      </ModalHeader.Actions>
-    </ModalHeader>
-  );
-}

package/src/components/AssetsIcon.tsx

@@ -1,9 +0,0 @@
-/**
- * AssetsIcon — re-exported from the Buoy Icon Format.
- *
- * The artwork lives in shared/icons/assets.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 { AssetsIcon, ASSETS_ICON_COLOR } from "@buoy-gg/shared-ui";

package/src/components/AssetsListControls.tsx

@@ -1,101 +0,0 @@
-/**
- * AssetsListControls — one compact row: name search, sort cycle (SIZE →
- * NAME → TYPE), and — when no baseline exists yet — the BASE button that
- * saves one. Once a baseline exists the BaselineBar takes over the diff UI,
- * so this row never wastes space on a hint sentence.
- */
-
-import { StyleSheet, Text, TextInput, TouchableOpacity, View } from "react-native";
-import { night } from "@buoy-gg/shared-ui";
-import { saveBaseline } from "../store/baseline";
-
-export type AssetSort = "size" | "name" | "type";
-
-const NEXT_SORT: Record<AssetSort, AssetSort> = {
-  size: "name",
-  name: "type",
-  type: "size",
-};
-
-interface AssetsListControlsProps {
-  query: string;
-  onQueryChange: (query: string) => void;
-  sort: AssetSort;
-  onSortChange: (sort: AssetSort) => void;
-  /** Show the save-baseline button (no baseline saved yet). */
-  showBaselineButton: boolean;
-}
-
-export function AssetsListControls({
-  query,
-  onQueryChange,
-  sort,
-  onSortChange,
-  showBaselineButton,
-}: AssetsListControlsProps) {
-  return (
-    <View style={styles.row}>
-      <TextInput
-        style={styles.input}
-        value={query}
-        onChangeText={onQueryChange}
-        placeholder="Search assets…"
-        placeholderTextColor={night.color.placeholder}
-        autoCapitalize="none"
-        autoCorrect={false}
-        testID="buoy-assets-search"
-      />
-      <TouchableOpacity
-        style={styles.button}
-        onPress={() => onSortChange(NEXT_SORT[sort])}
-        testID="buoy-assets-sort"
-      >
-        <Text style={styles.buttonText}>↓ {sort.toUpperCase()}</Text>
-      </TouchableOpacity>
-      {showBaselineButton ? (
-        <TouchableOpacity
-          style={styles.button}
-          onPress={() => void saveBaseline()}
-          testID="buoy-assets-save-baseline"
-        >
-          <Text style={styles.buttonText}>BASE</Text>
-        </TouchableOpacity>
-      ) : null}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  row: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    paddingHorizontal: 10,
-    paddingBottom: 8,
-  },
-  input: {
-    flex: 1,
-    backgroundColor: night.color.surfaceElevated,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    borderRadius: 8,
-    paddingHorizontal: 10,
-    paddingVertical: 6,
-    color: night.color.text,
-    fontSize: 12,
-  },
-  button: {
-    backgroundColor: night.color.surface,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    borderRadius: 8,
-    paddingHorizontal: 10,
-    paddingVertical: 7,
-  },
-  buttonText: {
-    color: night.color.textSecondary,
-    fontSize: 10,
-    fontWeight: "700",
-    letterSpacing: 0.5,
-  },
-});

package/src/components/AssetsModal.tsx

@@ -1,370 +0,0 @@
-/**
- * AssetsModal — bottom-sheet wrapper rendered by FloatingDevTools when the
- * Assets tool is opened. Inventory list (largest first) → tap for detail.
- * Opening triggers a full rescan (registry walk + Metro graph + size
- * measurement); merely installing the package never hits the network.
- */
-
-import { useEffect, useState } from "react";
-import { FlatList, StyleSheet, Text, View } from "react-native";
-import { EventStepperFooter, JsModal, macOSColors, night } from "@buoy-gg/shared-ui";
-import type { ModalState } from "@buoy-gg/shared-ui";
-import { getScanStatus, installAssetCapture, rescan } from "../capture/install";
-import { formatAssetMarkdown, formatInventoryMarkdown } from "../export";
-import { useAssetRecords } from "../hooks/useAssetRecords";
-import { remoteAssetsDispatch } from "../remote";
-import { clearRecords, estDecodedBytes, getRecord } from "../store/assetStore";
-import { getDiff, loadBaseline } from "../store/baseline";
-import { AssetDetail } from "./AssetDetail";
-import { AssetRow } from "./AssetRow";
-import { AssetsFilterBar, type AssetFilter } from "./AssetsFilterBar";
-import { AssetsHeader } from "./AssetsHeader";
-import { AssetsListControls, type AssetSort } from "./AssetsListControls";
-import { BaselineBar } from "./BaselineBar";
-import type { AssetRecord } from "../types";
-
-interface AssetsModalProps {
-  visible: boolean;
-  onClose: () => void;
-  onBack?: () => void;
-  onMinimize?: (modalState: ModalState) => void;
-  persistenceKey?: string;
-  /** Render as a plain header-bar + body stack instead of a JsModal (desktop). */
-  inline?: boolean;
-}
-
-function ScanNotice() {
-  const status = getScanStatus();
-  const notices: string[] = [];
-  if (!status.registryAvailable) {
-    notices.push(
-      "Asset registry unavailable — this environment doesn't expose @react-native/assets-registry."
-    );
-  } else if (!status.graphSupported && status.graphError) {
-    notices.push(
-      "No Metro dev server — showing runtime-registered assets only. The full bundle inventory and byte sizes need a dev build."
-    );
-  }
-  if (status.measuring) notices.push("Measuring sizes from the dev server…");
-  if (notices.length === 0) return null;
-  return (
-    <View style={styles.notice}>
-      {notices.map((n) => (
-        <Text key={n} style={styles.noticeText}>
-          {n}
-        </Text>
-      ))}
-    </View>
-  );
-}
-
-function FontFamilies() {
-  const families = getScanStatus().fontFamilies;
-  if (!families.length) return null;
-  return (
-    <View style={styles.fontsBox}>
-      <Text style={styles.fontsTitle}>LOADED FONT FAMILIES ({families.length})</Text>
-      <View style={styles.fontsWrap}>
-        {families.map((family) => (
-          <Text key={family} style={styles.fontChip}>
-            {family}
-          </Text>
-        ))}
-      </View>
-    </View>
-  );
-}
-
-function EmptyState() {
-  return (
-    <View style={styles.empty}>
-      <Text style={styles.emptyTitle}>No assets found yet</Text>
-      <Text style={styles.emptyText}>
-        Every bundled asset — images, fonts, video, audio — appears here with
-        sizes, scale coverage, and never-loaded detection. Try Rescan after
-        navigating around the app.
-      </Text>
-    </View>
-  );
-}
-
-/** Largest first — measured bytes, falling back to decoded estimate. */
-function bySizeDesc(a: AssetRecord, b: AssetRecord): number {
-  return (b.sizeBytes ?? estDecodedBytes(b)) - (a.sizeBytes ?? estDecodedBytes(a));
-}
-
-const COMPARATORS: Record<AssetSort, (a: AssetRecord, b: AssetRecord) => number> = {
-  size: bySizeDesc,
-  name: (a, b) => a.name.localeCompare(b.name) || a.type.localeCompare(b.type),
-  type: (a, b) => a.type.localeCompare(b.type) || bySizeDesc(a, b),
-};
-
-export function AssetsModal({
-  visible,
-  onClose,
-  onBack,
-  onMinimize,
-  persistenceKey,
-  inline = false,
-}: AssetsModalProps) {
-  // Safety net: the index import normally installed this already.
-  installAssetCapture();
-
-  const { records, stats, insights } = useAssetRecords();
-  const [selectedId, setSelectedId] = useState<number | null>(null);
-  const [filter, setFilter] = useState<AssetFilter>("all");
-  const [query, setQuery] = useState("");
-  const [sort, setSort] = useState<AssetSort>("size");
-  const selected = selectedId != null ? getRecord(selectedId) : undefined;
-
-  // Full scan on open — locally on device, forwarded on dashboard mirrors.
-  // The baseline load is async and re-renders through the store emit.
-  useEffect(() => {
-    if (!visible) return;
-    void loadBaseline();
-    const remote = remoteAssetsDispatch();
-    if (remote) {
-      remote("rescan").catch(() => {});
-    } else {
-      void rescan();
-    }
-  }, [visible]);
-
-  const sorted = [...records].sort(COMPARATORS[sort]);
-  const trimmedQuery = query.trim().toLowerCase();
-  const filtered = sorted.filter((r) => {
-    if (filter === "unused" && r.loaded) return false;
-    if (filter !== "all" && filter !== "unused" && r.kind !== filter) return false;
-    if (trimmedQuery && !`${r.name}.${r.type}`.toLowerCase().includes(trimmedQuery)) {
-      return false;
-    }
-    return true;
-  });
-
-  const selectedIndex = selected
-    ? filtered.findIndex((r) => r.id === selected.id)
-    : -1;
-  const stepTo = (index: number) => {
-    const target = filtered[index];
-    if (target) setSelectedId(target.id);
-  };
-
-  // Set lookups so each row's badge checks are O(1).
-  const flagSets = {
-    scaleGaps: new Set(insights.scaleGaps),
-    scaleAnomalies: new Set(insights.scaleAnomalies),
-    duplicates: new Set(insights.duplicates.flatMap((d) => d.ids)),
-    webpCandidates: new Set(insights.webpCandidates),
-    overDecode: new Set(insights.overDecode),
-    heavy: new Set([...insights.heavyGifs, ...insights.heavyFonts]),
-  };
-
-  const diff = getDiff();
-
-  // The proportional size bar is relative to the largest asset in view.
-  let maxBytes = 0;
-  for (const r of filtered) {
-    const bytes = r.sizeBytes ?? estDecodedBytes(r);
-    if (bytes > maxBytes) maxBytes = bytes;
-  }
-
-  const getReport = () =>
-    selected
-      ? formatAssetMarkdown(selected)
-      : formatInventoryMarkdown(sorted, stats, insights, getScanStatus(), getDiff());
-
-  const headerContent = (
-    <AssetsHeader
-      stats={stats}
-      measuring={getScanStatus().measuring}
-      detailOpen={selected != null}
-      detailIndex={selectedIndex}
-      detailTotal={filtered.length}
-      onCloseDetail={() => setSelectedId(null)}
-      onClear={clearRecords}
-      getReport={getReport}
-      onBack={onBack}
-    />
-  );
-
-  const body = selected ? (
-    <View style={styles.detailContainer}>
-      <AssetDetail record={selected} insights={insights} />
-      {/* Same stepper the network tool uses — steps through the FILTERED
-          list, so search/kind filters re-scope prev/next in place. */}
-      {selectedIndex >= 0 ? (
-        <EventStepperFooter
-          currentIndex={selectedIndex}
-          totalItems={filtered.length}
-          itemLabel="Asset"
-          onPrevious={() => stepTo(selectedIndex - 1)}
-          onNext={() => stepTo(selectedIndex + 1)}
-        />
-      ) : null}
-    </View>
-  ) : (
-    <View style={styles.listContainer}>
-      <AssetsFilterBar stats={stats} filter={filter} onChange={setFilter} />
-      <AssetsListControls
-        query={query}
-        onQueryChange={setQuery}
-        sort={sort}
-        onSortChange={setSort}
-        showBaselineButton={diff == null}
-      />
-      <BaselineBar diff={diff} />
-      <ScanNotice />
-      {filter === "font" ? <FontFamilies /> : null}
-      <FlatList
-        data={filtered}
-        keyExtractor={(item: AssetRecord) => String(item.id)}
-        contentContainerStyle={styles.listContent}
-        renderItem={({ item }) => (
-          <AssetRow
-            record={item}
-            flags={{
-              scaleGap: flagSets.scaleGaps.has(item.id),
-              scaleAnomaly: flagSets.scaleAnomalies.has(item.id),
-              duplicate: flagSets.duplicates.has(item.id),
-              webp: flagSets.webpCandidates.has(item.id),
-              oversize: flagSets.overDecode.has(item.id),
-              heavy: flagSets.heavy.has(item.id),
-            }}
-            sizeFraction={
-              maxBytes > 0
-                ? (item.sizeBytes ?? estDecodedBytes(item)) / maxBytes
-                : 0
-            }
-            // Guarded: programmatic invocations (automation) can call this
-            // with an event object instead of an id.
-            onPress={(id) => setSelectedId(typeof id === "number" ? id : null)}
-          />
-        )}
-        ListEmptyComponent={<EmptyState />}
-      />
-    </View>
-  );
-
-  // The ONLY difference between phone and desktop is which shell the header
-  // and body go in (same pattern as ImagesModal).
-  if (inline) {
-    return (
-      <View style={styles.inlineRoot}>
-        <View style={styles.inlineHeader}>{headerContent}</View>
-        {body}
-      </View>
-    );
-  }
-
-  return (
-    <JsModal
-      visible={visible}
-      onClose={onClose}
-      onMinimize={onMinimize}
-      persistenceKey={persistenceKey}
-      header={{
-        showToggleButton: true,
-        customContent: headerContent,
-      }}
-      enablePersistence
-      initialMode="bottomSheet"
-      disableScrollWrapper
-    >
-      {body}
-    </JsModal>
-  );
-}
-
-/**
- * The same Assets tool rendered INLINE for hosts that place tools in a panel
- * rather than a modal (the desktop dashboard). One implementation only.
- */
-export function AssetsToolView(
-  props: Omit<AssetsModalProps, "visible" | "onClose" | "inline"> = {}
-) {
-  return <AssetsModal {...props} inline visible onClose={() => {}} />;
-}
-
-const styles = StyleSheet.create({
-  inlineRoot: {
-    flex: 1,
-    minHeight: 0,
-    // Transparent so the desktop workbench's hoisted sky (one field spanning
-    // sidebar + panel) shows through — the shell paints its base beneath it.
-    backgroundColor: "transparent",
-  },
-  inlineHeader: {
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    borderBottomWidth: 1,
-    borderBottomColor: macOSColors.border.default,
-    backgroundColor: macOSColors.background.card,
-  },
-  listContainer: {
-    flex: 1,
-  },
-  listContent: {
-    paddingBottom: 16,
-  },
-  detailContainer: {
-    flex: 1,
-  },
-  notice: {
-    marginHorizontal: 10,
-    marginBottom: 8,
-    padding: 10,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    backgroundColor: night.color.surface,
-    gap: 4,
-  },
-  noticeText: {
-    color: night.color.textSecondary,
-    fontSize: 11,
-  },
-  fontsBox: {
-    marginHorizontal: 10,
-    marginTop: 8,
-    padding: 10,
-    borderRadius: 8,
-    backgroundColor: night.color.surface,
-    gap: 6,
-  },
-  fontsTitle: {
-    color: night.color.textTertiary,
-    fontSize: 9,
-    fontWeight: "700",
-    letterSpacing: 0.5,
-  },
-  fontsWrap: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    gap: 6,
-  },
-  fontChip: {
-    color: night.color.textSecondary,
-    fontSize: 10,
-    backgroundColor: night.color.bg,
-    borderRadius: 999,
-    paddingHorizontal: 8,
-    paddingVertical: 3,
-    overflow: "hidden",
-  },
-  empty: {
-    alignItems: "center",
-    padding: 32,
-    gap: 8,
-  },
-  emptyTitle: {
-    color: night.color.text,
-    fontSize: 13,
-    fontWeight: "600",
-  },
-  emptyText: {
-    color: night.color.textSecondary,
-    fontSize: 11,
-    textAlign: "center",
-    lineHeight: 16,
-  },
-});

package/src/components/BaselineBar.tsx

@@ -1,98 +0,0 @@
-/**
- * BaselineBar — save/compare-against-baseline controls.
- *
- * No baseline: one "SAVE BASELINE" button. With a baseline: the diff summary
- * ("+3 new · 1 removed · +1.2 MB since 2h ago") plus UPDATE and ✕ (clear).
- * Growth renders in warning color, shrinkage in success — that's the whole
- * point of the feature.
- */
-
-import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
-import { macOSColors, night } from "@buoy-gg/shared-ui";
-import { formatBytes } from "../format";
-import { clearBaseline, saveBaseline } from "../store/baseline";
-import type { AssetsDiff } from "../types";
-
-function formatAge(savedAt: number): string {
-  const minutes = Math.max(1, Math.round((Date.now() - savedAt) / 60000));
-  if (minutes < 60) return `${minutes}m ago`;
-  const hours = Math.round(minutes / 60);
-  if (hours < 48) return `${hours}h ago`;
-  return `${Math.round(hours / 24)}d ago`;
-}
-
-export function BaselineBar({ diff }: { diff: AssetsDiff | null }) {
-  // No baseline → no bar; the BASE button in AssetsListControls creates one.
-  if (!diff) return null;
-
-  const parts: string[] = [];
-  if (diff.added.length) parts.push(`+${diff.added.length} new`);
-  if (diff.removed.length) parts.push(`${diff.removed.length} removed`);
-  if (diff.grown.length) parts.push(`${diff.grown.length} grew`);
-  const net =
-    diff.netBytes != null && Math.abs(diff.netBytes) >= 1024
-      ? `${diff.netBytes > 0 ? "+" : "−"}${formatBytes(Math.abs(diff.netBytes))}`
-      : null;
-  const changed = parts.length > 0 || net != null;
-  const netColor =
-    diff.netBytes != null && diff.netBytes > 0
-      ? macOSColors.semantic.warning
-      : macOSColors.semantic.success;
-
-  return (
-    <View style={styles.bar}>
-      <Text style={styles.summary} numberOfLines={1}>
-        {changed ? parts.join(" · ") : "No changes"}
-        {net ? " · " : ""}
-        {net ? <Text style={{ color: netColor }}>{net}</Text> : null}
-        <Text style={styles.age}>  vs {formatAge(diff.baselineSavedAt)}</Text>
-      </Text>
-      <TouchableOpacity style={styles.button} onPress={() => void saveBaseline()}>
-        <Text style={styles.buttonText}>UPDATE</Text>
-      </TouchableOpacity>
-      <TouchableOpacity style={styles.button} onPress={() => void clearBaseline()}>
-        <Text style={styles.buttonText}>✕</Text>
-      </TouchableOpacity>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  bar: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    marginHorizontal: 10,
-    marginBottom: 8,
-    paddingHorizontal: 10,
-    paddingVertical: 6,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    borderRadius: 8,
-    backgroundColor: night.color.surface,
-  },
-  summary: {
-    flex: 1,
-    color: night.color.textSecondary,
-    fontSize: 10,
-    fontWeight: "600",
-  },
-  age: {
-    color: night.color.textTertiary,
-    fontWeight: "400",
-  },
-  button: {
-    backgroundColor: night.color.surfaceElevated,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    borderRadius: 6,
-    paddingHorizontal: 8,
-    paddingVertical: 5,
-  },
-  buttonText: {
-    color: night.color.textSecondary,
-    fontSize: 9,
-    fontWeight: "700",
-    letterSpacing: 0.5,
-  },
-});