@buoy-gg/assets 7.0.28 → 7.0.30

package/src/capture/registry.ts

@@ -1,137 +0,0 @@
-/**
- * Runtime access to @react-native/assets-registry.
- *
- * Asset ids are contiguous 1..N (`assets.push` return value), so a plain
- * getAssetByID walk enumerates every asset registered so far — including
- * everything registered BEFORE this tool was evaluated. That's why, unlike
- * the images tool, there is no "must be the first import" requirement here:
- * the walk backfills whatever the patch missed.
- *
- * registerAsset is patched (plain non-frozen CommonJS export, looked up at
- * call time by Metro's generated asset modules) purely for LIVE updates as
- * lazily-required assets register later.
- */
-
-import { upsertRecord, assetKey } from "../store/assetStore";
-import type { AssetRecord } from "../types";
-
-/** Runtime shape of a registry entry (fileSystemLocation/files are stripped by Metro). */
-export interface PackagerAsset {
-  __packager_asset: boolean;
-  httpServerLocation: string;
-  width?: number | null;
-  height?: number | null;
-  scales: number[];
-  hash: string;
-  name: string;
-  type: string;
-}
-
-interface RegistryModule {
-  registerAsset: (asset: PackagerAsset) => number;
-  getAssetByID: (assetId: number) => PackagerAsset | undefined;
-}
-
-let cachedRegistry: RegistryModule | null | undefined;
-
-export function getRegistryModule(): RegistryModule | null {
-  if (cachedRegistry !== undefined) return cachedRegistry;
-  let mod: RegistryModule | null = null;
-  try {
-    mod = require("@react-native/assets-registry/registry");
-  } catch {
-    // Old RN layouts (< 0.72) don't ship @react-native/assets-registry as a
-    // resolvable package — the registry only exists at this deep path. RN's
-    // deep-import deprecation warning fires when this executes, but it only
-    // executes on those old layouts, where there is no other way in.
-    try {
-      mod = require("react-native/Libraries/Image/AssetRegistry");
-    } catch {
-      mod = null;
-    }
-  }
-  cachedRegistry =
-    mod && typeof mod.getAssetByID === "function" ? mod : null;
-  return cachedRegistry;
-}
-
-/** resolveAssetSource(id) → this environment's URI (dev URL / file:// / res id). */
-export function resolveRegistryAsset(
-  registryId: number
-): { uri: string; scale: number } | null {
-  try {
-    const { Image } = require("react-native");
-    const resolved = Image.resolveAssetSource(registryId);
-    if (resolved && typeof resolved.uri === "string") {
-      return { uri: resolved.uri, scale: resolved.scale ?? 1 };
-    }
-  } catch {
-    // resolution is enrichment — never let it break the walk
-  }
-  return null;
-}
-
-export function upsertFromPackagerAsset(
-  registryId: number,
-  asset: PackagerAsset
-): AssetRecord {
-  const resolved = resolveRegistryAsset(registryId);
-  return upsertRecord({
-    key: assetKey(asset.httpServerLocation, asset.name, asset.type),
-    name: asset.name,
-    type: asset.type,
-    origin: "registry",
-    registryId,
-    hash: asset.hash,
-    httpServerLocation: asset.httpServerLocation,
-    width: asset.width ?? undefined,
-    height: asset.height ?? undefined,
-    scales: asset.scales,
-    resolvedUri: resolved?.uri,
-    resolvedScale: resolved?.scale,
-    loaded: true,
-  });
-}
-
-/** Enumerate every asset registered so far. Returns the highest id seen. */
-export function walkRegistry(): number {
-  const registry = getRegistryModule();
-  if (!registry) return 0;
-  let id = 0;
-  for (;;) {
-    const asset = registry.getAssetByID(id + 1);
-    if (!asset) break;
-    id++;
-    upsertFromPackagerAsset(id, asset);
-  }
-  return id;
-}
-
-const PATCH_MARKER = "__buoyAssetsPatched";
-
-/**
- * Wrap registerAsset so future registrations stream in live. Safe to call
- * more than once (marker guard); the walk covers anything registered before.
- */
-export function patchRegisterAsset(): boolean {
-  const registry = getRegistryModule();
-  if (!registry) return false;
-  const original = registry.registerAsset;
-  if ((original as unknown as Record<string, unknown>)[PATCH_MARKER]) return true;
-  const wrapped = (asset: PackagerAsset): number => {
-    const id = original.call(registry, asset);
-    try {
-      upsertFromPackagerAsset(id, asset);
-    } catch {
-      // never break app asset registration
-    }
-    return id;
-  };
-  (wrapped as unknown as Record<string, unknown>)[PATCH_MARKER] = true;
-  try {
-    registry.registerAsset = wrapped;
-  } catch {
-    return false;
-  }
-  return true;
-}

package/src/components/AssetDetail.tsx

@@ -1,207 +0,0 @@
-/**
- * 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 { night } 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: night.color.bg,
-    padding: 12,
-    alignItems: "center",
-    justifyContent: "center",
-    minHeight: 96,
-  },
-  previewImage: {
-    width: "100%",
-    height: 140,
-  },
-  fontPreview: {
-    color: night.color.text,
-    fontSize: 16,
-    textAlign: "center",
-  },
-  findings: {
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    backgroundColor: night.color.surface,
-    padding: 10,
-    gap: 6,
-  },
-  findingText: {
-    color: night.color.textSecondary,
-    fontSize: 11,
-    lineHeight: 15,
-  },
-  kvRow: {
-    gap: 2,
-  },
-  kvLabel: {
-    color: night.color.textTertiary,
-    fontSize: 9,
-    fontWeight: "700",
-    letterSpacing: 0.5,
-    textTransform: "uppercase",
-  },
-  kvValue: {
-    color: night.color.text,
-    fontSize: 12,
-  },
-});

package/src/components/AssetRow.tsx

@@ -1,243 +0,0 @@
-/**
- * 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, night } 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: night.color.surface,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    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: night.color.border,
-    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: night.color.text,
-    fontSize: 12,
-    fontWeight: "600",
-  },
-  ext: {
-    color: night.color.textTertiary,
-    fontWeight: "400",
-  },
-  metaRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-  },
-  meta: {
-    color: night.color.textSecondary,
-    fontSize: 10,
-    fontVariant: ["tabular-nums"],
-  },
-  right: {
-    alignItems: "flex-end",
-    gap: 4,
-  },
-  size: {
-    color: night.color.text,
-    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: night.color.textSecondary,
-    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

@@ -1,99 +0,0 @@
-/**
- * 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 { night } 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: night.color.textSecondary },
-  ];
-  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 : night.color.textSecondary },
-              ]}
-            >
-              {chip.label}
-            </Text>
-          </TouchableOpacity>
-        );
-      })}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  bar: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    gap: 6,
-    paddingHorizontal: 10,
-    paddingVertical: 8,
-  },
-  chip: {
-    borderWidth: 1,
-    borderColor: night.color.border,
-    backgroundColor: night.color.surface,
-    borderRadius: 999,
-    paddingHorizontal: 10,
-    paddingVertical: 5,
-  },
-  chipText: {
-    fontSize: 10,
-    fontWeight: "700",
-    letterSpacing: 0.4,
-    lineHeight: 13,
-  },
-});