@buoy-gg/assets 7.0.16

package/src/components/AssetDetail.tsx

@@ -0,0 +1,207 @@
+/**
+ * AssetDetail — full metadata for one asset: preview, identity, dimensions,
+ * per-scale sizes, resolution info, and which audit findings apply.
+ *
+ * Image previews render through the numeric registry id (works in every
+ * environment); fonts render a pangram with fontFamily set to the asset name
+ * — a best-effort guess (family ≠ filename for many fonts) that falls back
+ * to the system font silently when it misses.
+ */
+
+import { Image, ScrollView, StyleSheet, Text, View } from "react-native";
+import { macOSColors } from "@buoy-gg/shared-ui";
+import { displaySource } from "../capture/measure";
+import { formatBytes, formatDimensions, formatScales } from "../format";
+import { estDecodedBytes } from "../store/assetStore";
+import type { AssetRecord, AssetsInsights } from "../types";
+
+interface AssetDetailProps {
+  record: AssetRecord;
+  insights: AssetsInsights;
+}
+
+function Row({ label, value }: { label: string; value: string }) {
+  return (
+    <View style={styles.kvRow}>
+      <Text style={styles.kvLabel}>{label}</Text>
+      <Text style={styles.kvValue} selectable>
+        {value}
+      </Text>
+    </View>
+  );
+}
+
+function Preview({ record }: { record: AssetRecord }) {
+  if (record.kind === "image") {
+    const source = displaySource(record);
+    if (source == null) return null;
+    return (
+      <View style={styles.previewBox}>
+        <Image
+          testID="buoy-internal-assets-preview"
+          source={source}
+          style={styles.previewImage}
+          resizeMode="contain"
+        />
+      </View>
+    );
+  }
+  if (record.kind === "font") {
+    return (
+      <View style={styles.previewBox}>
+        <Text style={[styles.fontPreview, { fontFamily: record.name }]}>
+          The quick brown fox jumps over the lazy dog 0123456789
+        </Text>
+      </View>
+    );
+  }
+  return null;
+}
+
+export function AssetDetail({ record, insights }: AssetDetailProps) {
+  const findings: string[] = [];
+  if (insights.neverLoaded.includes(record.id)) {
+    findings.push("Never loaded — shipped in the bundle but no code required it");
+  }
+  if (insights.scaleGaps.includes(record.id)) {
+    findings.push("Scale gap — no variant covers this device's pixel ratio");
+  }
+  if (insights.webpCandidates.includes(record.id)) {
+    findings.push("WebP candidate — large png/jpeg, converting typically saves 20–40%");
+  }
+  const duplicate = insights.duplicates.find((d) => d.ids.includes(record.id));
+  if (duplicate) {
+    findings.push(
+      `Duplicate content — identical bytes shipped ${duplicate.ids.length} times`
+    );
+  }
+  if (insights.overDecode.includes(record.id)) {
+    findings.push(
+      "Decodes larger than 2× this entire screen — resize the source, no view can need this many pixels"
+    );
+  }
+  if (insights.heavyGifs.includes(record.id)) {
+    findings.push(
+      "Heavy GIF — every frame decodes into memory; a video or Lottie is typically ~90% smaller"
+    );
+  }
+  if (insights.heavyFonts.includes(record.id)) {
+    findings.push(
+      "Heavy font — likely an unsubset icon font; subsetting to used glyphs usually saves most of it"
+    );
+  }
+  if (insights.scaleAnomalies.includes(record.id)) {
+    findings.push(
+      "Scale anomaly — a higher-resolution variant is smaller in bytes than a lower one; check the exports"
+    );
+  }
+
+  const estimate = estDecodedBytes(record);
+
+  return (
+    <ScrollView style={styles.scroll} contentContainerStyle={styles.content}>
+      <Preview record={record} />
+
+      {findings.length > 0 ? (
+        <View style={styles.findings}>
+          {findings.map((finding) => (
+            <Text key={finding} style={styles.findingText}>
+              {finding}
+            </Text>
+          ))}
+        </View>
+      ) : null}
+
+      <Row label="Name" value={`${record.name}.${record.type}`} />
+      <Row label="Kind" value={record.kind} />
+      <Row
+        label="Status"
+        value={record.loaded ? "Loaded (registered at runtime)" : "In bundle, never loaded"}
+      />
+      {record.kind === "image" ? (
+        <Row label="Dimensions" value={`${formatDimensions(record)} (logical)`} />
+      ) : null}
+      {record.kind === "image" && record.scales.length ? (
+        <Row label="Scales" value={formatScales(record.scales)} />
+      ) : null}
+
+      {record.sizesByScale
+        ? Object.entries(record.sizesByScale).map(([scale, bytes]) => (
+            <Row key={scale} label={`Size @${scale}x`} value={formatBytes(bytes)} />
+          ))
+        : null}
+      {record.sizeBytes != null && record.sizeSource === "measured" ? (
+        <Row label="Total size" value={formatBytes(record.sizeBytes)} />
+      ) : null}
+      {estimate > 0 ? (
+        <Row label="Decoded memory" value={`~${formatBytes(estimate)} (RGBA)`} />
+      ) : null}
+
+      {record.registryId != null ? (
+        <Row label="Registry id" value={String(record.registryId)} />
+      ) : null}
+      {record.hash ? <Row label="Hash" value={record.hash} /> : null}
+      {record.httpServerLocation ? (
+        <Row label="Location" value={record.httpServerLocation} />
+      ) : null}
+      {record.fileSystemLocation ? (
+        <Row label="Source dir" value={record.fileSystemLocation} />
+      ) : null}
+      {record.resolvedUri ? <Row label="Resolved URI" value={record.resolvedUri} /> : null}
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  scroll: {
+    flex: 1,
+  },
+  content: {
+    padding: 12,
+    gap: 8,
+  },
+  previewBox: {
+    borderRadius: 8,
+    backgroundColor: macOSColors.background.input,
+    padding: 12,
+    alignItems: "center",
+    justifyContent: "center",
+    minHeight: 96,
+  },
+  previewImage: {
+    width: "100%",
+    height: 140,
+  },
+  fontPreview: {
+    color: macOSColors.text.primary,
+    fontSize: 16,
+    textAlign: "center",
+  },
+  findings: {
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default,
+    backgroundColor: macOSColors.background.card,
+    padding: 10,
+    gap: 6,
+  },
+  findingText: {
+    color: macOSColors.text.secondary,
+    fontSize: 11,
+    lineHeight: 15,
+  },
+  kvRow: {
+    gap: 2,
+  },
+  kvLabel: {
+    color: macOSColors.text.muted,
+    fontSize: 9,
+    fontWeight: "700",
+    letterSpacing: 0.5,
+    textTransform: "uppercase",
+  },
+  kvValue: {
+    color: macOSColors.text.primary,
+    fontSize: 12,
+  },
+});

package/src/components/AssetRow.tsx

@@ -0,0 +1,243 @@
+/**
+ * AssetRow — one bundled asset as a family-style card (matching the network
+ * tool's rows): rounded card, colored accent edge per kind, thumbnail, name,
+ * quiet metadata, bold right-aligned size, and finding badges ONLY when a
+ * finding exists. A thin proportional bar along the card bottom makes the
+ * heavy assets feel heavy at a glance.
+ *
+ * Thumbnails render through the NUMERIC registry id when available — that
+ * routes through resolveAssetSource natively, so it works in dev, iOS
+ * release (file://) and Android release (bare resource id) alike. They carry
+ * the buoy-internal testID so the images tool never records our own UI.
+ */
+
+import { Image, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { macOSColors } from "@buoy-gg/shared-ui";
+import { displaySource } from "../capture/measure";
+import {
+  formatDimensions,
+  formatScales,
+  formatSize,
+  KIND_COLORS,
+  KIND_LABELS,
+} from "../format";
+import { estDecodedBytes } from "../store/assetStore";
+import type { AssetRecord } from "../types";
+
+/** Which audit findings apply to this record (drives the row badges). */
+export interface AssetRowFlags {
+  scaleGap: boolean;
+  scaleAnomaly: boolean;
+  duplicate: boolean;
+  webp: boolean;
+  oversize: boolean;
+  heavy: boolean;
+}
+
+interface AssetRowProps {
+  record: AssetRecord;
+  flags: AssetRowFlags;
+  /** This record's size relative to the largest in the list (0–1). */
+  sizeFraction: number;
+  onPress: (id: number) => void;
+}
+
+function Badge({ label, color }: { label: string; color?: string }) {
+  // Quiet chip: legibility from light-gray text on a neutral fill. Only the
+  // serious tiers (red) and WEBP (blue) carry a small dot; the rest are plain.
+  return (
+    <View style={styles.badgePill}>
+      {color ? <View style={[styles.badgeDot, { backgroundColor: color }]} /> : null}
+      <Text style={styles.badgePillText}>{label}</Text>
+    </View>
+  );
+}
+
+export function AssetRow({ record, flags, sizeFraction, onPress }: AssetRowProps) {
+  const accent = KIND_COLORS[record.kind];
+  const thumbSource = record.kind === "image" ? displaySource(record) : null;
+
+  const badges: Array<{ label: string; color?: string }> = [];
+  if (!record.loaded) badges.push({ label: "UNUSED" });
+  if (flags.oversize) badges.push({ label: "OVERSIZE", color: macOSColors.semantic.error });
+  if (flags.duplicate) badges.push({ label: "DUP" });
+  if (flags.heavy) badges.push({ label: "HEAVY" });
+  if (flags.scaleAnomaly) badges.push({ label: "BAD SCALE", color: macOSColors.semantic.error });
+  else if (flags.scaleGap) badges.push({ label: "LOW-RES" });
+  if (flags.webp) badges.push({ label: "WEBP", color: macOSColors.semantic.info });
+
+  return (
+    <TouchableOpacity
+      style={styles.card}
+      testID={`buoy-asset-row-${record.id}`}
+      onPress={() => onPress(record.id)}
+      activeOpacity={0.7}
+    >
+      <View style={styles.body}>
+        <View style={styles.thumbBox}>
+          {thumbSource != null ? (
+            <Image
+              testID="buoy-internal-assets-thumb"
+              source={thumbSource}
+              style={styles.thumb}
+              resizeMode="contain"
+            />
+          ) : (
+            <Text style={[styles.thumbFallback, { color: accent }]}>
+              {KIND_LABELS[record.kind]}
+            </Text>
+          )}
+        </View>
+
+        <View style={styles.main}>
+          <Text style={styles.name} numberOfLines={1}>
+            {record.name}
+            <Text style={styles.ext}>.{record.type}</Text>
+          </Text>
+          <View style={styles.metaRow}>
+            {record.kind === "image" && record.width != null ? (
+              <Text style={styles.meta}>{formatDimensions(record)}</Text>
+            ) : null}
+            {/* Scale variants only mean something for images. */}
+            {record.kind === "image" && record.scales.length ? (
+              <Text style={styles.meta}>{formatScales(record.scales)}</Text>
+            ) : null}
+          </View>
+        </View>
+
+        <View style={styles.right}>
+          <Text style={styles.size}>
+            {formatSize(record, estDecodedBytes(record))}
+          </Text>
+          {badges.length ? (
+            <View style={styles.badgeRow}>
+              {badges.slice(0, 3).map((b) => (
+                <Badge key={b.label} label={b.label} color={b.color} />
+              ))}
+            </View>
+          ) : null}
+        </View>
+      </View>
+
+      {sizeFraction > 0 ? (
+        <View style={styles.sizeTrack}>
+          <View
+            style={[
+              styles.sizeFill,
+              {
+                backgroundColor: accent,
+                width: `${Math.max(2, Math.round(sizeFraction * 100))}%`,
+              },
+            ]}
+          />
+        </View>
+      ) : null}
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    marginHorizontal: 10,
+    marginTop: 6,
+    borderRadius: 10,
+    backgroundColor: macOSColors.background.card,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default,
+    overflow: "hidden",
+  },
+  body: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    gap: 10,
+  },
+  thumbBox: {
+    width: 40,
+    height: 40,
+    borderRadius: 8,
+    // Light plate so dark glyph assets stay visible on the dark card.
+    backgroundColor: "rgba(255,255,255,0.10)",
+    borderWidth: 1,
+    borderColor: macOSColors.border.default,
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden",
+  },
+  thumb: {
+    width: 34,
+    height: 34,
+  },
+  thumbFallback: {
+    fontSize: 9,
+    fontWeight: "700",
+    letterSpacing: 0.5,
+  },
+  main: {
+    flex: 1,
+    gap: 3,
+  },
+  name: {
+    color: macOSColors.text.primary,
+    fontSize: 12,
+    fontWeight: "600",
+  },
+  ext: {
+    color: macOSColors.text.muted,
+    fontWeight: "400",
+  },
+  metaRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+  },
+  meta: {
+    color: macOSColors.text.secondary,
+    fontSize: 10,
+    fontVariant: ["tabular-nums"],
+  },
+  right: {
+    alignItems: "flex-end",
+    gap: 4,
+  },
+  size: {
+    color: macOSColors.text.primary,
+    fontSize: 12,
+    fontWeight: "700",
+    fontVariant: ["tabular-nums"],
+  },
+  badgeRow: {
+    flexDirection: "row",
+    gap: 4,
+  },
+  badgePill: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    backgroundColor: "rgba(255,255,255,0.06)",
+    borderRadius: 4,
+    paddingHorizontal: 6,
+    paddingVertical: 2.5,
+  },
+  badgeDot: {
+    width: 5,
+    height: 5,
+    borderRadius: 2.5,
+  },
+  badgePillText: {
+    color: macOSColors.text.secondary,
+    fontSize: 9,
+    fontWeight: "600",
+    letterSpacing: 0.3,
+  },
+  sizeTrack: {
+    height: 2,
+    backgroundColor: "transparent",
+  },
+  sizeFill: {
+    height: 2,
+    opacity: 0.45,
+    borderTopRightRadius: 2,
+  },
+});

package/src/components/AssetsFilterBar.tsx

@@ -0,0 +1,99 @@
+/**
+ * AssetsFilterBar — kind filter pills with counts, styled like the network
+ * tool's bordered pills: outlined, kind-accent-colored when active. Wrapping
+ * row, not a horizontal ScrollView (same height-measurement pitfall the
+ * images tool documents).
+ */
+
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { macOSColors } from "@buoy-gg/shared-ui";
+import { KIND_COLORS, KIND_LABELS } from "../format";
+import type { AssetKind, AssetsStats } from "../types";
+
+export type AssetFilter = "all" | "unused" | AssetKind;
+
+interface AssetsFilterBarProps {
+  stats: AssetsStats;
+  filter: AssetFilter;
+  onChange: (filter: AssetFilter) => void;
+}
+
+export function AssetsFilterBar({ stats, filter, onChange }: AssetsFilterBarProps) {
+  const chips: Array<{ key: AssetFilter; label: string; accent: string }> = [
+    { key: "all", label: `ALL ${stats.total}`, accent: macOSColors.text.secondary },
+  ];
+  for (const kind of Object.keys(stats.byKind) as AssetKind[]) {
+    const entry = stats.byKind[kind];
+    if (entry.count > 0) {
+      chips.push({
+        key: kind,
+        label: `${KIND_LABELS[kind]} ${entry.count}`,
+        accent: KIND_COLORS[kind],
+      });
+    }
+  }
+  if (stats.neverLoaded > 0) {
+    // Amber, not semantic.warning — the bright yellow reads as an alarm.
+    chips.push({
+      key: "unused",
+      label: `UNUSED ${stats.neverLoaded}`,
+      accent: "#FF9F1C",
+    });
+  }
+  if (chips.length <= 1) return null;
+
+  return (
+    <View style={styles.bar}>
+      {chips.map((chip) => {
+        const active = chip.key === filter;
+        return (
+          <TouchableOpacity
+            key={chip.key}
+            style={[
+              styles.chip,
+              active && {
+                borderColor: chip.accent,
+                backgroundColor: `${chip.accent}1A`,
+              },
+            ]}
+            // Tapping the active chip again untoggles back to ALL.
+            onPress={() => onChange(active ? "all" : chip.key)}
+          >
+            <Text
+              style={[
+                styles.chipText,
+                { color: active ? chip.accent : macOSColors.text.secondary },
+              ]}
+            >
+              {chip.label}
+            </Text>
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  bar: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 6,
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+  },
+  chip: {
+    borderWidth: 1,
+    borderColor: macOSColors.border.default,
+    backgroundColor: macOSColors.background.card,
+    borderRadius: 999,
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+  },
+  chipText: {
+    fontSize: 10,
+    fontWeight: "700",
+    letterSpacing: 0.4,
+    lineHeight: 13,
+  },
+});

package/src/components/AssetsHeader.tsx

@@ -0,0 +1,75 @@
+/**
+ * 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

@@ -0,0 +1,9 @@
+/**
+ * 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";