@gogitcms/design-system 0.15.0-next.3

package/src/components/MediaBrowser.tsx

@@ -0,0 +1,766 @@
+import React from "react";
+import { View, Pressable, FlatList, ActivityIndicator, TextInput, ScrollView } from "react-native";
+import { useTheme } from "../ThemeProvider";
+import { Text } from "./Text";
+import { Icon } from "./Icon";
+import { IconButton } from "./Button";
+import { MediaPreview, MediaChip, fileName } from "./MediaPreview";
+import { useMediaApi } from "./MediaField";
+import {
+  MediaAsset,
+  MediaCondition,
+  MediaFacets,
+  MediaKind,
+  formatBytes,
+  kindIcon,
+} from "../media";
+
+// The Media browser: the pane that replaces the entry list + document editor
+// when a media set is selected in the sidebar.
+//
+// It owns its own querying rather than taking rows as props, because its filter
+// state (facets, search, paging) is view state the host has no reason to model —
+// unlike document selection, which is bound to a URL.
+
+const PAGE_SIZE = 60;
+
+export type MediaBrowserProps = {
+  // The media set being browsed, from the nav key.
+  set: string;
+  // Display name for the header.
+  label?: string;
+  variant?: "desktop" | "mobile";
+};
+
+// FacetState is the panel's working selection. Kept as plain sets/strings and
+// converted to MediaConditions on the way out, so the panel never has to think
+// about operators.
+type FacetState = {
+  extensions: string[];
+  mimeTypes: string[];
+  kinds: string[];
+  minSize: string;
+  maxSize: string;
+};
+
+const EMPTY_FACETS: FacetState = { extensions: [], mimeTypes: [], kinds: [], minSize: "", maxSize: "" };
+
+function facetsActive(f: FacetState): boolean {
+  return (
+    f.extensions.length > 0 ||
+    f.mimeTypes.length > 0 ||
+    f.kinds.length > 0 ||
+    f.minSize.trim() !== "" ||
+    f.maxSize.trim() !== ""
+  );
+}
+
+// conditionsFrom turns the panel's selection into the server's filter language.
+// Multi-select facets become a single `in` (an OR within the facet); different
+// facets AND together — the behaviour people expect from faceted search.
+export function conditionsFrom(f: FacetState): MediaCondition[] {
+  const out: MediaCondition[] = [];
+  if (f.extensions.length) out.push({ field: "extension", op: "in", values: f.extensions });
+  if (f.mimeTypes.length) out.push({ field: "mimeType", op: "in", values: f.mimeTypes });
+  if (f.kinds.length) out.push({ field: "kind", op: "in", values: f.kinds });
+  // Size is entered in KB because bytes are unreadable at a glance; the server
+  // filters in bytes.
+  const min = parseKB(f.minSize);
+  if (min != null) out.push({ field: "size", op: "gte", value: String(min) });
+  const max = parseKB(f.maxSize);
+  if (max != null) out.push({ field: "size", op: "lte", value: String(max) });
+  return out;
+}
+
+function parseKB(v: string): number | null {
+  const n = Number(v.trim());
+  if (!v.trim() || !Number.isFinite(n) || n < 0) return null;
+  return Math.round(n * 1024);
+}
+
+export function MediaBrowser({ set, label, variant = "desktop" }: MediaBrowserProps) {
+  const t = useTheme();
+  const api = useMediaApi();
+  const isDesktop = variant === "desktop";
+
+  const [view, setView] = React.useState<"grid" | "list">("grid");
+  const [search, setSearch] = React.useState("");
+  const [applied, setApplied] = React.useState<FacetState>(EMPTY_FACETS);
+  const [draft, setDraft] = React.useState<FacetState>(EMPTY_FACETS);
+  const [panelOpen, setPanelOpen] = React.useState(false);
+  const [facets, setFacets] = React.useState<MediaFacets | null>(null);
+
+  const [items, setItems] = React.useState<MediaAsset[]>([]);
+  const [total, setTotal] = React.useState<number | null>(null);
+  const [loading, setLoading] = React.useState(false);
+  const [loadingMore, setLoadingMore] = React.useState(false);
+  const [exhausted, setExhausted] = React.useState(false);
+  const [selected, setSelected] = React.useState<MediaAsset | null>(null);
+
+  // Switching sets is a different library: reset everything view-related rather
+  // than carrying one set's filters onto another where they may match nothing.
+  React.useEffect(() => {
+    setSearch("");
+    setApplied(EMPTY_FACETS);
+    setDraft(EMPTY_FACETS);
+    setSelected(null);
+    setPanelOpen(false);
+  }, [set]);
+
+  React.useEffect(() => {
+    if (!api?.facets) return;
+    let cancelled = false;
+    api
+      .facets(set)
+      .then((f) => {
+        if (!cancelled) setFacets(f);
+      })
+      .catch(() => {
+        // No facets is a degraded panel, not a broken browser — search still works.
+        if (!cancelled) setFacets(null);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [api, set]);
+
+  const conditions = React.useMemo(() => conditionsFrom(applied), [applied]);
+  // Serialized so the effect below re-runs on value changes rather than on every
+  // new array identity.
+  const conditionsKey = JSON.stringify(conditions);
+
+  // First page (and every re-query when the filters change), debounced so typing
+  // in the search box doesn't fire a request per keystroke.
+  React.useEffect(() => {
+    if (!api) return;
+    let cancelled = false;
+    setLoading(true);
+    const timer = setTimeout(() => {
+      const params = { set, search: search.trim() || undefined, filters: conditions, limit: PAGE_SIZE, offset: 0 };
+      Promise.all([api.list(params), api.count ? api.count(params) : Promise.resolve(null)])
+        .then(([rows, n]) => {
+          if (cancelled) return;
+          setItems(rows);
+          setTotal(n);
+          setExhausted(rows.length < PAGE_SIZE);
+        })
+        .catch(() => {
+          if (cancelled) return;
+          setItems([]);
+          setTotal(null);
+          setExhausted(true);
+        })
+        .finally(() => {
+          if (!cancelled) setLoading(false);
+        });
+    }, 250);
+    return () => {
+      cancelled = true;
+      clearTimeout(timer);
+    };
+  }, [api, set, search, conditionsKey]);
+
+  const loadMore = () => {
+    if (!api || loading || loadingMore || exhausted) return;
+    setLoadingMore(true);
+    api
+      .list({ set, search: search.trim() || undefined, filters: conditions, limit: PAGE_SIZE, offset: items.length })
+      .then((rows) => {
+        setItems((prev) => [...prev, ...rows]);
+        setExhausted(rows.length < PAGE_SIZE);
+      })
+      .catch(() => setExhausted(true))
+      .finally(() => setLoadingMore(false));
+  };
+
+  const clearAll = () => {
+    setSearch("");
+    setApplied(EMPTY_FACETS);
+    setDraft(EMPTY_FACETS);
+  };
+
+  const filtered = facetsActive(applied) || search.trim() !== "";
+  const countLabel =
+    total == null
+      ? `${items.length}${exhausted ? "" : "+"}`
+      : filtered && facets
+        ? `${total} of ${facets.total}`
+        : `${total}`;
+
+  if (!api) {
+    return (
+      <EmptyPane
+        icon="image"
+        title="Media is unavailable"
+        detail="This server has no object store configured, so there is nothing to browse."
+      />
+    );
+  }
+
+  return (
+    <View style={{ flex: 1, minWidth: 0, flexDirection: "row" }}>
+      <View style={{ flex: 1, minWidth: 0 }}>
+        {/* header: title, count, search, view toggle, filter toggle */}
+        <View
+          style={{
+            gap: t.space(3),
+            paddingHorizontal: t.space(4),
+            paddingVertical: t.space(3),
+            borderBottomWidth: 1,
+            borderBottomColor: t.color.borderSubtle,
+          }}
+        >
+          <View style={{ flexDirection: "row", alignItems: "center", gap: t.space(3) }}>
+            <Text variant="h3" style={{ flex: 1 }} numberOfLines={1}>
+              {label || set}
+            </Text>
+            <Text variant="xs" color="tertiary" testID="media-count">
+              {`${countLabel} files`}
+            </Text>
+            <ViewToggle view={view} onChange={setView} />
+            {api.facets ? (
+              <IconButton
+                name="filter"
+                size="sm"
+                label="Filter media"
+                onPress={() => {
+                  setDraft(applied);
+                  setPanelOpen((v) => !v);
+                }}
+                testID="media-filter-toggle"
+              />
+            ) : null}
+          </View>
+
+          <TextInput
+            value={search}
+            onChangeText={setSearch}
+            placeholder="Search by file name or folder"
+            placeholderTextColor={t.color.textTertiary}
+            testID="media-search"
+            // @ts-expect-error react-native-web accepts outlineStyle
+            style={{
+              height: t.control.md,
+              paddingHorizontal: t.space(3),
+              borderWidth: 1,
+              borderColor: t.color.borderDefault,
+              borderRadius: t.radius.md,
+              backgroundColor: t.color.surfaceRaised,
+              color: t.color.textPrimary,
+              fontSize: 13,
+              outlineStyle: "none",
+            }}
+          />
+
+          {filtered ? (
+            <Pressable onPress={clearAll} testID="media-clear-filters" style={{ alignSelf: "flex-start" }}>
+              <Text variant="xs" color="tertiary">Clear filters</Text>
+            </Pressable>
+          ) : null}
+        </View>
+
+        {panelOpen && facets ? (
+          <FacetPanel
+            facets={facets}
+            draft={draft}
+            onChange={setDraft}
+            onApply={() => {
+              setApplied(draft);
+              setPanelOpen(false);
+            }}
+            onReset={() => setDraft(EMPTY_FACETS)}
+          />
+        ) : null}
+
+        {loading ? (
+          <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
+            <ActivityIndicator size="small" color={t.color.textTertiary} />
+          </View>
+        ) : items.length === 0 ? (
+          <EmptyPane
+            icon={filtered ? "search" : "image"}
+            title={filtered ? "Nothing matches those filters" : "This set has no files yet"}
+            detail={
+              filtered
+                ? "Try widening the search or clearing a facet."
+                : "Files land here when they are imported from the repository."
+            }
+          />
+        ) : view === "grid" ? (
+          <MediaGrid
+            items={items}
+            selectedId={selected?.id ?? null}
+            onSelect={setSelected}
+            onEndReached={loadMore}
+            loadingMore={loadingMore}
+          />
+        ) : (
+          <MediaList
+            items={items}
+            selectedId={selected?.id ?? null}
+            onSelect={setSelected}
+            onEndReached={loadMore}
+            loadingMore={loadingMore}
+          />
+        )}
+      </View>
+
+      {/* Detail: a side pane on desktop, an overlay sheet on mobile. */}
+      {selected ? (
+        isDesktop ? (
+          <View
+            style={{
+              width: 320,
+              borderLeftWidth: 1,
+              borderLeftColor: t.color.borderSubtle,
+              backgroundColor: t.color.surfacePage,
+            }}
+          >
+            <MediaDetail media={selected} onClose={() => setSelected(null)} />
+          </View>
+        ) : (
+          <View
+            style={{
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              backgroundColor: t.color.surfacePage,
+            }}
+          >
+            <MediaDetail media={selected} onClose={() => setSelected(null)} />
+          </View>
+        )
+      ) : null}
+    </View>
+  );
+}
+
+// ---- results ---------------------------------------------------------------
+
+// numColumns is fixed rather than measured: FlatList requires a stable column
+// count, and re-keying the list on every resize would reset the scroll position.
+const GRID_COLUMNS = 4;
+
+function MediaGrid({
+  items,
+  selectedId,
+  onSelect,
+  onEndReached,
+  loadingMore,
+}: {
+  items: MediaAsset[];
+  selectedId: string | null;
+  onSelect: (m: MediaAsset) => void;
+  onEndReached: () => void;
+  loadingMore: boolean;
+}) {
+  const t = useTheme();
+  return (
+    <FlatList
+      testID="media-grid"
+      data={items}
+      keyExtractor={(m) => m.id}
+      numColumns={GRID_COLUMNS}
+      onEndReached={onEndReached}
+      onEndReachedThreshold={0.5}
+      contentContainerStyle={{ padding: t.space(3), gap: t.space(3) }}
+      columnWrapperStyle={{ gap: t.space(3) }}
+      ListFooterComponent={loadingMore ? <ListSpinner /> : null}
+      renderItem={({ item }) => (
+        <Pressable
+          onPress={() => onSelect(item)}
+          testID={`media-tile-${item.id}`}
+          style={{
+            flex: 1 / GRID_COLUMNS,
+            borderWidth: 1,
+            borderColor: item.id === selectedId ? t.color.borderActive : t.color.borderSubtle,
+            borderRadius: t.radius.md,
+            backgroundColor: t.color.surfaceRaised,
+            overflow: "hidden",
+          }}
+        >
+          <View
+            style={{
+              height: 96,
+              alignItems: "center",
+              justifyContent: "center",
+              backgroundColor: t.color.surfaceSunken,
+            }}
+          >
+            {item.kind === "image" || item.kind === "svg" ? (
+              <MediaPreview media={item} maxHeight={96} />
+            ) : (
+              <Icon name={kindIcon(item.kind)} size={24} color={t.color.textSecondary} />
+            )}
+          </View>
+          <View style={{ padding: t.space(2), gap: 2 }}>
+            <Text variant="xs" numberOfLines={1}>{fileName(item.repoPath)}</Text>
+            <Text variant="xs" color="tertiary" numberOfLines={1}>
+              {[item.extension.toUpperCase(), formatBytes(item.size)].filter(Boolean).join(" · ")}
+            </Text>
+          </View>
+        </Pressable>
+      )}
+    />
+  );
+}
+
+function MediaList({
+  items,
+  selectedId,
+  onSelect,
+  onEndReached,
+  loadingMore,
+}: {
+  items: MediaAsset[];
+  selectedId: string | null;
+  onSelect: (m: MediaAsset) => void;
+  onEndReached: () => void;
+  loadingMore: boolean;
+}) {
+  const t = useTheme();
+  return (
+    <FlatList
+      testID="media-list"
+      data={items}
+      keyExtractor={(m) => m.id}
+      onEndReached={onEndReached}
+      onEndReachedThreshold={0.5}
+      contentContainerStyle={{ padding: t.space(3), gap: t.space(2) }}
+      ListFooterComponent={loadingMore ? <ListSpinner /> : null}
+      renderItem={({ item }) => (
+        <Pressable
+          onPress={() => onSelect(item)}
+          testID={`media-row-${item.id}`}
+          style={{
+            flexDirection: "row",
+            alignItems: "center",
+            gap: t.space(3),
+            padding: t.space(2),
+            borderWidth: 1,
+            borderColor: item.id === selectedId ? t.color.borderActive : t.color.borderSubtle,
+            borderRadius: t.radius.md,
+            backgroundColor: t.color.surfaceRaised,
+          }}
+        >
+          <View
+            style={{
+              width: 40,
+              height: 40,
+              borderRadius: t.radius.sm,
+              alignItems: "center",
+              justifyContent: "center",
+              backgroundColor: t.color.surfaceSunken,
+              overflow: "hidden",
+            }}
+          >
+            {item.kind === "image" || item.kind === "svg" ? (
+              <MediaPreview media={item} maxHeight={40} />
+            ) : (
+              <Icon name={kindIcon(item.kind)} size={18} color={t.color.textSecondary} />
+            )}
+          </View>
+          <View style={{ flex: 1, minWidth: 0 }}>
+            <Text variant="body" numberOfLines={1}>{fileName(item.repoPath)}</Text>
+            <Text variant="xs" color="tertiary" numberOfLines={1}>{item.repoPath}</Text>
+          </View>
+          <Text variant="xs" color="tertiary">{item.mimeType}</Text>
+          <Text variant="xs" color="tertiary">{formatBytes(item.size)}</Text>
+        </Pressable>
+      )}
+    />
+  );
+}
+
+function ListSpinner() {
+  const t = useTheme();
+  return (
+    <View style={{ padding: t.space(4), alignItems: "center" }}>
+      <ActivityIndicator size="small" color={t.color.textTertiary} />
+    </View>
+  );
+}
+
+// ---- detail ----------------------------------------------------------------
+
+function MediaDetail({ media, onClose }: { media: MediaAsset; onClose: () => void }) {
+  const t = useTheme();
+  const rows: [string, string][] = [
+    ["Path", media.repoPath],
+    ["Type", media.mimeType],
+    ["Size", formatBytes(media.size)],
+    ...(media.width && media.height ? ([["Dimensions", `${media.width} × ${media.height}`]] as [string, string][]) : []),
+    ...(media.publicPath ? ([["Public path", media.publicPath]] as [string, string][]) : []),
+    ...(media.cdnPath ? ([["CDN", media.cdnPath]] as [string, string][]) : []),
+  ];
+  return (
+    <View style={{ flex: 1 }}>
+      <View
+        style={{
+          flexDirection: "row",
+          alignItems: "center",
+          gap: t.space(2),
+          padding: t.space(3),
+          borderBottomWidth: 1,
+          borderBottomColor: t.color.borderSubtle,
+        }}
+      >
+        <Text variant="body" style={{ flex: 1 }} numberOfLines={1}>{fileName(media.repoPath)}</Text>
+        <IconButton name="x" size="sm" label="Close details" onPress={onClose} testID="media-detail-close" />
+      </View>
+      <ScrollView contentContainerStyle={{ padding: t.space(3), gap: t.space(3) }}>
+        <MediaPreview media={media} />
+        {media.pending ? (
+          <View
+            style={{
+              padding: t.space(2),
+              borderRadius: t.radius.md,
+              backgroundColor: t.color.surfaceActive,
+            }}
+          >
+            <Text variant="xs" color="tertiary">
+              Uploaded but not in git yet — the next export commits it to the repository.
+            </Text>
+          </View>
+        ) : null}
+        <View style={{ gap: t.space(2) }}>
+          {rows.map(([k, v]) => (
+            <View key={k} style={{ gap: 2 }}>
+              <Text variant="label" color="tertiary">{k}</Text>
+              <Text variant="monoSm">{v}</Text>
+            </View>
+          ))}
+        </View>
+      </ScrollView>
+    </View>
+  );
+}
+
+// ---- controls --------------------------------------------------------------
+
+function ViewToggle({ view, onChange }: { view: "grid" | "list"; onChange: (v: "grid" | "list") => void }) {
+  const t = useTheme();
+  const btn = (which: "grid" | "list", icon: "grid" | "rows") => (
+    <Pressable
+      onPress={() => onChange(which)}
+      testID={`media-view-${which}`}
+      accessibilityLabel={which === "grid" ? "Grid view" : "List view"}
+      style={{
+        width: t.control.sm,
+        height: t.control.sm,
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: t.radius.sm,
+        backgroundColor: view === which ? t.color.surfaceActive : "transparent",
+      }}
+    >
+      <Icon name={icon} size={16} color={view === which ? t.color.textPrimary : t.color.textSecondary} />
+    </Pressable>
+  );
+  return (
+    <View
+      style={{
+        flexDirection: "row",
+        borderWidth: 1,
+        borderColor: t.color.borderDefault,
+        borderRadius: t.radius.md,
+        padding: 1,
+      }}
+    >
+      {btn("grid", "grid")}
+      {btn("list", "rows")}
+    </View>
+  );
+}
+
+function FacetPanel({
+  facets,
+  draft,
+  onChange,
+  onApply,
+  onReset,
+}: {
+  facets: MediaFacets;
+  draft: FacetState;
+  onChange: (f: FacetState) => void;
+  onApply: () => void;
+  onReset: () => void;
+}) {
+  const t = useTheme();
+  const toggle = (key: "extensions" | "mimeTypes" | "kinds", value: string) => {
+    const cur = draft[key];
+    onChange({ ...draft, [key]: cur.includes(value) ? cur.filter((v) => v !== value) : [...cur, value] });
+  };
+
+  return (
+    <ScrollView
+      testID="media-facets"
+      style={{ maxHeight: 320, borderBottomWidth: 1, borderBottomColor: t.color.borderSubtle }}
+      contentContainerStyle={{ padding: t.space(4), gap: t.space(4) }}
+    >
+      <FacetGroup
+        title="Kind"
+        values={facets.kinds}
+        selected={draft.kinds}
+        onToggle={(v) => toggle("kinds", v)}
+        testIDPrefix="facet-kind"
+      />
+      <FacetGroup
+        title="Extension"
+        values={facets.extensions}
+        selected={draft.extensions}
+        onToggle={(v) => toggle("extensions", v)}
+        testIDPrefix="facet-ext"
+      />
+      <FacetGroup
+        title="Mime type"
+        values={facets.mimeTypes}
+        selected={draft.mimeTypes}
+        onToggle={(v) => toggle("mimeTypes", v)}
+        testIDPrefix="facet-mime"
+      />
+
+      <View style={{ gap: t.space(2) }}>
+        <Text variant="label" color="tertiary">
+          {`Size (KB) · this set holds ${formatBytes(facets.minSize)}–${formatBytes(facets.maxSize)}`}
+        </Text>
+        <View style={{ flexDirection: "row", gap: t.space(2) }}>
+          <SizeInput
+            value={draft.minSize}
+            onChange={(v) => onChange({ ...draft, minSize: v })}
+            placeholder="Min"
+            testID="facet-size-min"
+          />
+          <SizeInput
+            value={draft.maxSize}
+            onChange={(v) => onChange({ ...draft, maxSize: v })}
+            placeholder="Max"
+            testID="facet-size-max"
+          />
+        </View>
+      </View>
+
+      <View style={{ flexDirection: "row", gap: t.space(2) }}>
+        <Pressable
+          onPress={onApply}
+          testID="media-facets-apply"
+          style={{
+            paddingHorizontal: t.space(4),
+            height: t.control.sm,
+            justifyContent: "center",
+            borderRadius: t.radius.md,
+            backgroundColor: t.color.surfaceInverted,
+          }}
+        >
+          <Text variant="xs" color="inverted">Apply filters</Text>
+        </Pressable>
+        <Pressable
+          onPress={onReset}
+          testID="media-facets-reset"
+          style={{ paddingHorizontal: t.space(3), height: t.control.sm, justifyContent: "center" }}
+        >
+          <Text variant="xs" color="tertiary">Reset</Text>
+        </Pressable>
+      </View>
+    </ScrollView>
+  );
+}
+
+function FacetGroup({
+  title,
+  values,
+  selected,
+  onToggle,
+  testIDPrefix,
+}: {
+  title: string;
+  values: { value: string; count: number }[];
+  selected: string[];
+  onToggle: (v: string) => void;
+  testIDPrefix: string;
+}) {
+  const t = useTheme();
+  if (values.length === 0) return null;
+  return (
+    <View style={{ gap: t.space(2) }}>
+      <Text variant="label" color="tertiary">{title}</Text>
+      <View style={{ flexDirection: "row", flexWrap: "wrap", gap: t.space(2) }}>
+        {values.map((v) => {
+          const on = selected.includes(v.value);
+          return (
+            <Pressable
+              key={v.value}
+              onPress={() => onToggle(v.value)}
+              testID={`${testIDPrefix}-${v.value}`}
+              style={{
+                paddingHorizontal: t.space(3),
+                height: t.control.sm,
+                justifyContent: "center",
+                borderRadius: t.radius.pill,
+                borderWidth: 1,
+                borderColor: on ? t.color.borderActive : t.color.borderDefault,
+                backgroundColor: on ? t.color.surfaceActive : "transparent",
+              }}
+            >
+              <Text variant="xs">{`${v.value} (${v.count})`}</Text>
+            </Pressable>
+          );
+        })}
+      </View>
+    </View>
+  );
+}
+
+function SizeInput({
+  value,
+  onChange,
+  placeholder,
+  testID,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  placeholder: string;
+  testID: string;
+}) {
+  const t = useTheme();
+  return (
+    <TextInput
+      value={value}
+      onChangeText={onChange}
+      placeholder={placeholder}
+      placeholderTextColor={t.color.textTertiary}
+      keyboardType="numeric"
+      testID={testID}
+      // @ts-expect-error react-native-web accepts outlineStyle
+      style={{
+        flex: 1,
+        height: t.control.sm,
+        paddingHorizontal: t.space(3),
+        borderWidth: 1,
+        borderColor: t.color.borderDefault,
+        borderRadius: t.radius.md,
+        backgroundColor: t.color.surfaceRaised,
+        color: t.color.textPrimary,
+        fontSize: 13,
+        outlineStyle: "none",
+      }}
+    />
+  );
+}
+
+function EmptyPane({ icon, title, detail }: { icon: "image" | "search"; title: string; detail: string }) {
+  const t = useTheme();
+  return (
+    <View style={{ flex: 1, alignItems: "center", justifyContent: "center", padding: t.space(6), gap: t.space(2) }}>
+      <Icon name={icon} size={24} color={t.color.textTertiary} />
+      <Text variant="body" color="tertiary">{title}</Text>
+      <Text variant="xs" color="tertiary" align="center">{detail}</Text>
+    </View>
+  );
+}
+
+// Re-exported so a host can render the same chip outside the browser.
+export { MediaChip };
+export type { MediaKind };