@thewhatmatters/wmds 0.2.0

package/docs/patterns/sites-pitchkit-insights-and-kit--creator-insights-loading.tsx

@@ -0,0 +1,1006 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — creator Insights (loading)
+// Storybook: Sites/PitchKit/Insights and kit → Pattern — creator Insights (loading) (?path=/story/sites-pitchkit-insights-and-kit--creator-insights-loading)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { useLayoutEffect, useRef, useState, type CSSProperties } from "react";
+import {
+  AlertDialog,
+  Avatar,
+  Badge,
+  Button,
+  ButtonIcon,
+  Card,
+  Chart,
+  Chip,
+  Dialog,
+  Dropdown,
+  MoreMenu,
+  PageHeader,
+  SegmentedControl,
+  Skeleton,
+  Stat,
+  TextLink,
+  Toaster,
+  cardSubtitleClasses,
+  cardTitleClasses,
+  chartSeriesConfigFromKeys,
+  toast,
+  type ChartCartesianPoint,
+  type ChartRankedBarItem,
+} from "@thewhatmatters/wmds";
+import { EyeOff } from "lucide-react";
+
+const reachConfig = chartSeriesConfigFromKeys([
+  { key: "typical", label: "Typical reach" },
+  { key: "reach", label: "Daily reach" },
+]);
+
+const compactNumber = new Intl.NumberFormat("en", {
+  notation: "compact",
+  maximumFractionDigits: 1,
+});
+
+const proofSkeletonCount = 6;
+const audienceSkeletonSections = [
+  { titleWidth: 72, bars: [100, 82, 64] },
+  { titleWidth: 56, bars: [92, 74, 58] },
+  { titleWidth: 40, bars: [88, 70, 52] },
+  { titleWidth: 60, bars: [96, 68, 44] },
+];
+
+
+function copyShareKitUrl(handle: string) {
+  const path = `/k/${handle}`;
+  void navigator.clipboard.writeText(path);
+  toast.add({
+    title: "Kit URL copied",
+    description: path,
+    tone: "success",
+  });
+}
+
+function AccountSettingsDialog({
+  identity,
+  open,
+  onOpenChange,
+}: {
+  identity: PitchKitCreatorIdentity;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <Dialog.Content size="md" title="Account settings">
+        <div className="flex w-full min-w-0 flex-col gap-4">
+          <Card variant="outlined" shape="rounded" bodyTerminal className="col-span-full">
+            <Card.Header
+              start={<h2 className={cardTitleClasses}>Connected Instagram</h2>}
+              end={
+                identity.connected ? (
+                  <Badge variant="success" emphasis="muted" size="sm">
+                    Connected
+                  </Badge>
+                ) : null
+              }
+            />
+            <Card.Body>
+              <div className="flex min-w-0 flex-col gap-4 px-3.5 py-[16px]">
+                <CreatorIdentityStrip
+                  identity={identity}
+                  nameAs="p"
+                  showProfessionalChip
+                />
+                {identity.lastSyncedLabel != null ? (
+                  <p className="type-supporting text-muted text-muted">
+                    Last synced {identity.lastSyncedLabel}
+                  </p>
+                ) : null}
+              </div>
+            </Card.Body>
+          </Card>
+        </div>
+      </Dialog.Content>
+    </Dialog>
+  );
+}
+
+function OwnerAccountMenu({ identity }: { identity: PitchKitCreatorIdentity }) {
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const [deleteOpen, setDeleteOpen] = useState(false);
+
+  function handleAction(actionId: string) {
+    setMenuOpen(false);
+    if (actionId === "settings") {
+      setSettingsOpen(true);
+      return;
+    }
+    if (actionId === "share") {
+      copyShareKitUrl(identity.handle);
+      return;
+    }
+    if (actionId === "delete") {
+      setDeleteOpen(true);
+    }
+  }
+
+  return (
+    <>
+      <div className="relative">
+        <Button
+          type="button"
+          role="ghost"
+          size="sm"
+          aria-label="My account"
+          aria-haspopup="menu"
+          aria-expanded={menuOpen}
+          className="size-9 min-h-9 gap-0 px-0 py-0 focus-visible:ring-offset-0"
+          onClick={() => setMenuOpen((open) => !open)}
+        >
+          <Avatar
+            name={identity.displayName ?? identity.handle}
+            src={identity.profilePictureUrl}
+            size="md"
+          />
+        </Button>
+        {menuOpen ? (
+          <Dropdown.Menu
+            role="menu"
+            aria-label="My account"
+            className="absolute end-0 top-full mt-1 min-w-56"
+          >
+            <li role="presentation">
+              <p className="type-supporting font-medium uppercase tracking-wider text-muted px-3.5 py-2">My account</p>
+            </li>
+            <li role="presentation">
+              <Dropdown.Item role="menuitem" truncate={false} onClick={() => handleAction("settings")}>
+                Account settings
+              </Dropdown.Item>
+            </li>
+            <li role="presentation">
+              <Dropdown.Item role="menuitem" truncate={false} onClick={() => handleAction("share")}>
+                Share kit
+              </Dropdown.Item>
+            </li>
+            <li role="separator" className="mx-1.5 my-0.5 border-0 border-t border-border" />
+            <li role="presentation">
+              <Dropdown.Item role="menuitem" truncate={false} onClick={() => handleAction("signout")}>
+                Sign out
+              </Dropdown.Item>
+            </li>
+            <li role="presentation">
+              <Dropdown.Item role="menuitem" truncate={false} onClick={() => handleAction("disconnect")}>
+                Disconnect
+              </Dropdown.Item>
+            </li>
+            <li role="presentation">
+              <Dropdown.Item role="menuitem" truncate={false} onClick={() => handleAction("delete")}>Delete</Dropdown.Item>
+            </li>
+          </Dropdown.Menu>
+        ) : null}
+      </div>
+      <AccountSettingsDialog
+        identity={identity}
+        open={settingsOpen}
+        onOpenChange={setSettingsOpen}
+      />
+      <AlertDialog
+        open={deleteOpen}
+        onOpenChange={setDeleteOpen}
+        title="Delete your Pitchkit account?"
+        description="This permanently deletes your kit, stored media copies, and connection. Your Instagram account is not deleted. This cannot be undone."
+        cancelLabel="Cancel"
+        confirmLabel="Delete account"
+        confirmRole="destructive"
+        onConfirm={() => setDeleteOpen(false)}
+      />
+    </>
+  );
+}
+
+function PitchKitPageFooter() {
+  return (
+    <div className="band pb-6 pt-10">
+      <footer className="col-span-full flex items-center justify-center gap-4">
+        <TextLink href="/privacy">Privacy</TextLink>
+        <TextLink href="mailto:hello@whatmatters.com">Support</TextLink>
+      </footer>
+    </div>
+  );
+}
+
+
+
+export interface PitchKitCreatorIdentity {
+  displayName?: string;
+  /** Without the @ — shown as @handle, shared as /k/[handle]. */
+  handle: string;
+  profilePictureUrl?: string;
+  followersCount?: number;
+  professionalAccount?: "Business" | "Creator";
+  connected?: boolean;
+  lastSyncedLabel?: string;
+}
+
+function CreatorIdentityStrip({
+  identity,
+  nameAs = "h1",
+  showProfessionalChip = false,
+}: {
+  identity: PitchKitCreatorIdentity;
+  nameAs?: "h1" | "p";
+  showProfessionalChip?: boolean;
+}) {
+  const NameTag = nameAs;
+  const avatarName = identity.displayName ?? identity.handle;
+  const handleLabel = `@${identity.handle}`;
+  const followerLabel =
+    identity.followersCount == null
+      ? null
+      : `${compactNumber.format(identity.followersCount)} followers`;
+  const meta = [handleLabel, followerLabel].filter(Boolean).join(" · ");
+  const showTitleRow =
+    identity.displayName != null ||
+    (showProfessionalChip && identity.professionalAccount != null);
+
+  return (
+    <div className="flex flex-wrap items-center gap-4">
+      <Avatar
+        name={avatarName}
+        src={identity.profilePictureUrl}
+        size="lg"
+      />
+      <div className="flex min-w-0 flex-col gap-1">
+        {showTitleRow ? (
+          <div className="flex flex-wrap items-center gap-2">
+            {identity.displayName != null ? (
+              <NameTag className="type-heading-2 text-fg">
+                {identity.displayName}
+              </NameTag>
+            ) : null}
+            {showProfessionalChip && identity.professionalAccount != null ? (
+              <Chip readOnly size="sm">
+                {identity.professionalAccount}
+              </Chip>
+            ) : null}
+          </div>
+        ) : null}
+        <p className="type-body text-fg text-muted">{meta}</p>
+      </div>
+    </div>
+  );
+}
+
+
+export interface PitchKitPost {
+  id: string;
+  publishedAt: string;
+  imageUrl: string;
+  imageAlt: string;
+  saves: number;
+  reach: number;
+  likes: number;
+  comments: number;
+}
+
+export interface PitchKitContact {
+  email: string;
+  websiteHref: string;
+  websiteLabel: string;
+  location: string;
+}
+
+/** "insufficient" when the 30-day reach series cannot be plotted. */
+export type PitchKitReachState = "resolved" | "insufficient";
+
+export interface PitchKitPageData {
+  identity: PitchKitCreatorIdentity;
+  intro: string;
+  posts: PitchKitPost[];
+  contact: PitchKitContact;
+  brands: PitchKitPastBrand[];
+  countries: ChartRankedBarItem[];
+  reachData: ChartCartesianPoint[];
+}
+
+
+export interface PitchKitPastBrand {
+  id: string;
+  name: string;
+  /** Curated mark key — missing or unknown keys use a letter Avatar. */
+  logo_key?: string;
+  result_label?: string;
+}
+
+const PITCHKIT_BRAND_RESULT_MAX = 24;
+const PITCHKIT_BRAND_LOGO_LETTER = "letter";
+
+const pitchKitBrandLogoKeys = [
+  "nike", "adidas", "apple", "google", "meta", "amazon", "spotify", "netflix",
+  "sephora", "glossier", "nordstrom", "target", "walmart", "starbucks",
+  "coca-cola", "pepsi", "samsung", "microsoft", "adobe", "shopify",
+  "uber", "airbnb", "disney", "lululemon", "reebok", "puma",
+  "dior", "chanel", "bmw", "ford", "chase", "visa",
+];
+
+const pastBrandLogoKeySet = new Set(pitchKitBrandLogoKeys);
+
+function resolvePastBrandLogoKey(logoKey: string | null | undefined) {
+  if (logoKey == null || logoKey === "" || logoKey === PITCHKIT_BRAND_LOGO_LETTER) {
+    return undefined;
+  }
+  return pastBrandLogoKeySet.has(logoKey) ? logoKey : undefined;
+}
+
+function pastBrandLogoMonogram(logoKey: string) {
+  const parts = logoKey.split("-");
+  if (parts.length > 1) {
+    return parts.map((part) => part.charAt(0).toUpperCase()).join("").slice(0, 2);
+  }
+  return logoKey.slice(0, 1).toUpperCase();
+}
+
+function normalizePastBrandResult(value: string | null | undefined) {
+  const trimmed = value?.trim() ?? "";
+  if (trimmed.length === 0) return undefined;
+  return trimmed.slice(0, PITCHKIT_BRAND_RESULT_MAX);
+}
+
+function BrandMark({ name, logoKey }: { name: string; logoKey?: string }) {
+  const resolved = resolvePastBrandLogoKey(logoKey);
+  if (resolved == null) {
+    return <Avatar name={name} size="sm" />;
+  }
+
+  return (
+    <span className="flex size-6 shrink-0 items-center justify-center rounded-full bg-fg type-supporting text-muted font-medium uppercase leading-none text-bg" role="img" aria-label={name}>
+      <span aria-hidden>{pastBrandLogoMonogram(resolved)}</span>
+    </span>
+  );
+}
+
+function BrandResultChip({ label }: { label?: string }) {
+  const result = normalizePastBrandResult(label);
+  if (result == null) return null;
+  return <Chip readOnly size="sm">{result}</Chip>;
+}
+
+function BrandLockup({ brand }: { brand: PitchKitPastBrand }) {
+  return (
+    <div className="flex min-w-0 items-center gap-3">
+      <BrandMark name={brand.name} logoKey={brand.logo_key} />
+      <h3 className="type-label text-fg">{brand.name}</h3>
+      <BrandResultChip label={brand.result_label} />
+    </div>
+  );
+}
+
+function PastBrandCard({ brand, className }: { brand: PitchKitPastBrand; className: string }) {
+  return (
+    <Card variant="outlined" shape="rounded" className={className}>
+      <Card.Header start={<BrandLockup brand={brand} />} />
+    </Card>
+  );
+}
+
+function PastBrandsRail({ brands }: { brands: readonly PitchKitPastBrand[] }) {
+  const hostRef = useRef<HTMLDivElement>(null);
+  const measureRef = useRef<HTMLUListElement>(null);
+  const [overflows, setOverflows] = useState(false);
+  const [reduceMotion, setReduceMotion] = useState(false);
+
+  useLayoutEffect(() => {
+    const media = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const updateMotion = () => setReduceMotion(media.matches);
+    updateMotion();
+    media.addEventListener("change", updateMotion);
+    return () => media.removeEventListener("change", updateMotion);
+  }, []);
+
+  useLayoutEffect(() => {
+    const host = hostRef.current;
+    const measure = measureRef.current;
+    if (host == null || measure == null) return;
+
+    const update = () => {
+      setOverflows(measure.scrollWidth > host.clientWidth + 1);
+    };
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(host);
+    observer.observe(measure);
+    return () => observer.disconnect();
+  }, [brands]);
+
+  const duration = Math.max(16, brands.length * 4);
+  const showMarquee = overflows && !reduceMotion;
+
+  return (
+    <div
+      ref={hostRef}
+      className="relative col-span-full min-w-0"
+      data-overflow={showMarquee ? "true" : "false"}
+    >
+      <ul ref={measureRef} className="pointer-events-none invisible absolute flex w-max items-center gap-3" aria-hidden>
+        {brands.map((brand) => (
+          <li key={`${brand.id}-measure`}>
+            <PastBrandCard brand={brand} className="w-max max-w-full shrink-0" />
+          </li>
+        ))}
+      </ul>
+      {reduceMotion ? (
+        <ul className="flex min-w-0 flex-wrap items-center gap-3" aria-label="Past brands">
+          {brands.map((brand) => (
+            <li key={brand.id}>
+              <PastBrandCard brand={brand} className="w-max max-w-full shrink-0" />
+            </li>
+          ))}
+        </ul>
+      ) : showMarquee ? (
+        <>
+          <ul className="sr-only" aria-label="Past brands">
+            {brands.map((brand) => {
+              const result = normalizePastBrandResult(brand.result_label);
+              return (
+                <li key={brand.id}>
+                  {result == null ? brand.name : `${brand.name}, ${result}`}
+                </li>
+              );
+            })}
+          </ul>
+          <div className="group overflow-hidden" aria-hidden>
+            <div
+              className="marquee-track flex w-max items-center"
+              style={{ "--marquee-duration": `${duration}s` } as CSSProperties}
+            >
+              <ul className="flex min-w-0 items-center gap-3">
+                {brands.map((brand) => (
+                  <li key={`${brand.id}-loop-a`}>
+                    <PastBrandCard brand={brand} className="w-max max-w-full shrink-0" />
+                  </li>
+                ))}
+              </ul>
+              <ul className="flex min-w-0 items-center gap-3">
+                {brands.map((brand) => (
+                  <li key={`${brand.id}-loop-b`}>
+                    <PastBrandCard brand={brand} className="w-max max-w-full shrink-0" />
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
+        </>
+      ) : (
+        <ul className="flex min-w-0 items-center gap-3" aria-label="Past brands">
+          {brands.map((brand) => (
+            <li key={brand.id}>
+              <PastBrandCard brand={brand} className="w-max max-w-full shrink-0" />
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+export function PublicPastBrands({ brands }: { brands: readonly PitchKitPastBrand[] }) {
+  if (brands.length === 0) return null;
+
+  return (
+    <section className="band min-w-0 gap-y-4">
+      <div className="col-span-full flex flex-wrap items-end justify-between gap-3">
+        <h2 className={cardTitleClasses}>Past brands</h2>
+      </div>
+      <PastBrandsRail brands={brands} />
+    </section>
+  );
+}
+
+
+interface OwnerPitchKitProps extends PitchKitPageData {
+  reachState?: PitchKitReachState;
+}
+
+function pitchKitIntroIsEmpty(intro: string) {
+  return intro.trim().length === 0;
+}
+
+function PublicIntro({ intro }: { intro: string }) {
+  if (pitchKitIntroIsEmpty(intro)) return null;
+  return <p className="type-body text-fg text-fg">{intro}</p>;
+}
+
+function OwnerReachCard({
+  reachState,
+  reachData,
+}: {
+  reachState: PitchKitReachState;
+  reachData: ChartCartesianPoint[];
+}) {
+  return (
+    <Card
+      variant="outlined"
+      shape="rounded"
+      bodyTerminal
+      className="col-span-full min-w-0"
+    >
+      <Card.Header
+        start={
+          <>
+            <h2 className={cardTitleClasses}>Reach over 30 days</h2>
+            <p className={cardSubtitleClasses}>
+              Typical performance with unusual spikes left visible.
+            </p>
+          </>
+        }
+        end={
+          <Badge variant="neutral" emphasis="muted" size="sm">
+            Graph data
+          </Badge>
+        }
+      />
+      <Card.Body>
+        {reachState === "insufficient" ? (
+          <div
+            className="flex min-w-0 flex-col gap-4 bg-body px-3.5 py-4 rounded-[var(--radius-card-body)] items-center justify-center text-center"
+            style={{ minHeight: 220 }}
+          >
+            <div className="flex max-w-lg flex-col gap-2 items-center text-center">
+              <Badge variant="neutral" emphasis="muted">No data</Badge>
+              <h3 className="type-heading-2 text-fg">No reach data yet</h3>
+              <p className="type-body text-fg text-muted">
+                Connect more Instagram activity to plot the last 30 days.
+              </p>
+            </div>
+          </div>
+        ) : (
+          <div className="flex min-w-0 flex-col gap-4 bg-body px-3.5 py-4 rounded-[var(--radius-card-body)]">
+            <Chart.Cartesian
+              data={reachData}
+              config={reachConfig}
+              periodKind="month"
+              minHeight={220}
+              aria-label="Daily and typical Instagram reach over the last 30 days"
+            />
+            <Chart.Legend config={reachConfig} />
+          </div>
+        )}
+      </Card.Body>
+    </Card>
+  );
+}
+
+function OwnerCountries({ countries }: { countries: ChartRankedBarItem[] }) {
+  const topCountries = countries.slice(0, 3);
+  if (topCountries.length === 0) return null;
+
+  return (
+    <Card
+      variant="outlined"
+      shape="rounded"
+      bodyTerminal
+      className="col-span-full min-w-0"
+    >
+      <Card.Header
+        start={
+          <>
+            <h2 className={cardTitleClasses}>Top countries</h2>
+            <p className={cardSubtitleClasses}>
+              Top 3 from Instagram Insights.
+            </p>
+          </>
+        }
+      />
+      <Card.Body>
+        <div className="flex min-w-0 flex-col gap-4 bg-body px-3.5 py-4 rounded-[var(--radius-card-body)]">
+          <Chart.RankedBars
+            aria-label="Audience by country"
+            items={topCountries}
+            animate="initial"
+          />
+        </div>
+      </Card.Body>
+    </Card>
+  );
+}
+
+function OwnerPitchKit({
+  identity,
+  intro,
+  posts,
+  contact,
+  brands,
+  countries,
+  reachData,
+  reachState = "resolved",
+}: OwnerPitchKitProps) {
+  const [visiblePosts, setVisiblePosts] = useState(posts);
+  const [postNotice, setPostNotice] = useState<string | null>(null);
+  const [pendingHidePostId, setPendingHidePostId] = useState<string | null>(null);
+  const engagementRate = reachState === "resolved" ? "5.8%" : null;
+  const typicalReach = reachState === "resolved" ? "9.3K" : "—";
+
+  function handlePostAction(postId: string, actionId: string) {
+    if (actionId === "hide") {
+      setPendingHidePostId(postId);
+    }
+  }
+
+  function hidePendingPost() {
+    const hiddenPost = visiblePosts.find((post) => post.id === pendingHidePostId);
+    if (!hiddenPost) return;
+
+    setVisiblePosts((current) =>
+      current.filter((post) => post.id !== hiddenPost.id),
+    );
+    setPostNotice("Post hidden from the shareable kit.");
+    setPendingHidePostId(null);
+    toast.add({
+      title: "Post hidden from kit",
+      description: "It no longer appears in the shareable PitchKit.",
+      duration: 6000,
+      action: {
+        label: "Undo",
+        onClick: () => {
+          setVisiblePosts((current) =>
+            current.some((post) => post.id === hiddenPost.id)
+              ? current
+              : [...current, hiddenPost],
+          );
+          setPostNotice("Post restored to the shareable kit.");
+        },
+      },
+    });
+  }
+
+  return (
+    <>
+      <section className="col-span-full">
+        <PageHeader variant="page" title="Your Pitchkit" />
+        <div className="flex max-w-2xl flex-col gap-1">
+          <p className="type-body text-fg text-muted">Edit what brands see</p>
+        </div>
+      </section>
+
+      <section className="col-span-full border-b border-border pb-6">
+        <div className="flex min-w-0 flex-col gap-3">
+          <CreatorIdentityStrip
+            identity={identity}
+            nameAs="h1"
+            showProfessionalChip
+          />
+          <PublicIntro intro={intro} />
+        </div>
+      </section>
+
+      <div
+        role="group"
+        aria-label="Instagram performance summary"
+        className="band gap-y-4"
+      >
+        <Stat className="col-span-2 md:col-span-4 lg:col-span-3" label="Followers" value="84.2K" />
+        {engagementRate != null ? (
+          <Stat className="col-span-2 md:col-span-4 lg:col-span-3" label="Engagement rate" value={engagementRate} />
+        ) : null}
+        <Stat className="col-span-2 md:col-span-4 lg:col-span-3" label="Typical reach" value={typicalReach} />
+        <Stat className="col-span-2 md:col-span-4 lg:col-span-3" label="Typical saves" value="6.1K" />
+      </div>
+
+      <div className="band min-w-0 gap-y-6 [align-items:stretch]">
+        <OwnerReachCard reachState={reachState} reachData={reachData} />
+        <OwnerCountries countries={countries} />
+      </div>
+
+      <section className="band min-w-0 gap-y-4">
+        <div className="col-span-full flex flex-wrap items-end justify-between gap-3">
+          <div>
+            <h2 className={cardTitleClasses}>Selected posts</h2>
+            <p className="type-body text-fg text-muted">
+              {postNotice ?? "Proof from the current Instagram set."}
+            </p>
+          </div>
+        </div>
+        <div className="band col-span-full min-w-0 gap-y-4">
+          {visiblePosts.map((post, index) => (
+            <Card key={post.id} variant="outlined" shape="rounded" className="col-span-full min-w-0 md:col-span-4 lg:col-span-4">
+              <Card.Header
+                end={
+                  <MoreMenu
+                    aria-label={`Manage selected post ${index + 1}`}
+                    size="xs"
+                    items={[
+                      {
+                        id: "hide",
+                        label: "Hide from kit",
+                        start: (
+                          <ButtonIcon size="sm">
+                            <EyeOff />
+                          </ButtonIcon>
+                        ),
+                      },
+                    ]}
+                    onAction={(actionId) => handlePostAction(post.id, actionId)}
+                  />
+                }
+              />
+              <Card.Body>
+                <img
+                  className="aspect-[4/3] w-full bg-body object-cover rounded-[var(--radius-card-body)]"
+                  src={post.imageUrl}
+                  alt={post.imageAlt}
+                />
+              </Card.Body>
+              <Card.Footer>
+                <div className="grid w-full grid-cols-2 gap-3">
+                  {[
+                    ["Likes", post.likes],
+                    ["Comments", post.comments],
+                  ].map(([label, value]) => (
+                    <span key={label} className="flex min-w-0 flex-col gap-1">
+                      <span className="type-supporting font-medium uppercase tracking-wider text-muted text-muted">{label}</span>
+                      <span className="font-mono text-sm tabular-nums text-fg">
+                        {compactNumber.format(value as number)}
+                      </span>
+                    </span>
+                  ))}
+                </div>
+              </Card.Footer>
+            </Card>
+          ))}
+        </div>
+      </section>
+
+      <section className="band min-w-0 gap-y-4">
+        <div className="col-span-full flex flex-wrap items-end justify-between gap-3">
+          <div>
+            <h2 className={cardTitleClasses}>Contact</h2>
+            <p className="type-body text-fg text-muted">
+              Creator-entered details for brand outreach.
+            </p>
+          </div>
+        </div>
+        <Card variant="outlined" padding="md" shape="rounded" className="col-span-full">
+          <div className="flex flex-col gap-3">
+            <div className="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between sm:gap-3">
+              <span className="type-supporting font-medium uppercase tracking-wider text-muted text-muted">Email</span>
+              <TextLink href={`mailto:${contact.email}`}>{contact.email}</TextLink>
+            </div>
+            <div className="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between sm:gap-3">
+              <span className="type-supporting font-medium uppercase tracking-wider text-muted text-muted">Website</span>
+              <TextLink href={contact.websiteHref} external>{contact.websiteLabel}</TextLink>
+            </div>
+            <div className="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between sm:gap-3">
+              <span className="type-supporting font-medium uppercase tracking-wider text-muted text-muted">Location</span>
+              <span className="type-body text-fg text-muted">{contact.location}</span>
+            </div>
+          </div>
+        </Card>
+      </section>
+
+      <PublicPastBrands brands={brands} />
+      <AlertDialog
+        open={pendingHidePostId != null}
+        onOpenChange={(open) => {
+          if (!open) setPendingHidePostId(null);
+        }}
+        title="Hide this post from PitchKit?"
+        description="It will no longer appear in the shareable PitchKit. You can add it back later."
+        cancelLabel="Keep post"
+        confirmLabel="Hide from kit"
+        onConfirm={hidePendingPost}
+      />
+    </>
+  );
+}
+
+
+interface PitchKitInsightsLoadingPageProps extends Omit<PitchKitPageData, "posts"> {
+  /** Selected posts on the PitchKit tab. */
+  kitPosts: PitchKitPost[];
+}
+
+export function PitchKitInsightsLoadingPage({
+  contact,
+  brands,
+  identity,
+  kitPosts,
+  intro,
+  countries,
+  reachData,
+}: PitchKitInsightsLoadingPageProps) {
+  const [view, setView] = useState("insights");
+
+  return (
+    <main className="grid-page min-h-screen bg-body [--grid-column-gap:8px] [--grid-max:1140px] [padding-bottom:44px]">
+
+      <div className="band pb-4">
+        <header className="col-span-full grid grid-cols-[1fr_auto_1fr] items-center gap-3">
+          <span className="type-heading-4 text-fg text-fg">PitchKit</span>
+          <SegmentedControl
+            aria-label="PitchKit primary navigation"
+            size="sm"
+            value={view}
+            onValueChange={setView}
+          >
+            <SegmentedControl.Item value="insights">Insights</SegmentedControl.Item>
+            <SegmentedControl.Item value="pitchkit">PitchKit</SegmentedControl.Item>
+          </SegmentedControl>
+          <span className="justify-self-end">
+            <OwnerAccountMenu identity={identity} />
+          </span>
+        </header>
+      </div>
+
+      <div className="band pt-6 sm:pt-8">
+        <div className="band min-w-0 gap-y-6 sm:gap-y-8">
+          {view === "pitchkit" ? (
+            <OwnerPitchKit identity={identity} intro={intro} posts={kitPosts} contact={contact} brands={brands} countries={countries} reachData={reachData} />
+          ) : (
+            <>
+              <section className="col-span-full">
+                <PageHeader variant="page" title="Insights" />
+                <div className="flex max-w-2xl flex-col gap-2">
+                  <Skeleton width={280} height={16} radius="inner" index={20} />
+                  <Skeleton width={220} height={12} radius="inner" index={21} />
+                </div>
+              </section>
+
+              <div className="band gap-y-2">
+                <div
+                  role="group"
+                  aria-label="Loading Instagram performance summary"
+                  className="band gap-y-4"
+                >
+                  <Stat className="col-span-2 md:col-span-4 lg:col-span-3" label="Followers" value="" loading />
+                  <Stat className="col-span-2 md:col-span-4 lg:col-span-3" label="Engagement rate" value="" loading />
+                  <Stat className="col-span-2 md:col-span-4 lg:col-span-3" label="Typical reach" value="" loading />
+                  <Stat className="col-span-2 md:col-span-4 lg:col-span-3" label="Saves" value="" loading />
+                </div>
+
+                <div className="band min-w-0 gap-y-6 [align-items:stretch]">
+                  <Card
+                    variant="outlined"
+                    shape="rounded"
+                    bodyTerminal
+                    className="col-span-full min-w-0 lg:col-span-6"
+                    aria-busy="true"
+                    aria-label="Loading reach over 30 days"
+                  >
+                    <Card.Header
+                      start={
+                        <div className="flex flex-col gap-1">
+                          <Skeleton width={168} height={18} radius="inner" index={0} />
+                          <Skeleton width={240} height={14} radius="inner" index={1} />
+                        </div>
+                      }
+                      end={<Skeleton width={88} height={28} radius="full" index={2} />}
+                    />
+                    <Card.Body>
+                      <div className="flex min-w-0 flex-col gap-4 bg-body px-3.5 py-4 rounded-[var(--radius-card-body)]">
+                        <Skeleton
+                          width="100%"
+                          height={344}
+                          radius="element"
+                          index={3}
+                        />
+                        <div className="flex flex-wrap gap-4">
+                          <Skeleton width={112} height={12} radius="inner" index={4} />
+                          <Skeleton width={96} height={12} radius="inner" index={5} />
+                        </div>
+                      </div>
+                    </Card.Body>
+                  </Card>
+
+                  <Card
+                    variant="outlined"
+                    shape="rounded"
+                    bodyTerminal
+                    className="col-span-full min-w-0 lg:col-span-6"
+                    aria-busy="true"
+                    aria-label="Loading audience fit"
+                  >
+                    <Card.Header
+                      start={
+                        <div className="flex flex-col gap-1">
+                          <Skeleton width={120} height={18} radius="inner" index={6} />
+                          <Skeleton width={188} height={14} radius="inner" index={7} />
+                        </div>
+                      }
+                    />
+                    <Card.Body>
+                      <div className="grid min-w-0 gap-y-6 bg-body px-3.5 py-4 [column-gap:var(--grid-column-gap)] sm:grid-cols-2 rounded-[var(--radius-card-body)]">
+                        {audienceSkeletonSections.map((section, sectionIndex) => (
+                          <section
+                            key={section.titleWidth}
+                            className="flex min-w-0 flex-col gap-3"
+                          >
+                            <Skeleton
+                              width={section.titleWidth}
+                              height={12}
+                              radius="inner"
+                              index={8 + sectionIndex}
+                            />
+                            <div className="flex min-w-0 flex-col gap-2">
+                              {section.bars.map((width, barIndex) => (
+                                <Skeleton
+                                  key={`${section.titleWidth}-${width}`}
+                                  width={`${width}%`}
+                                  height={16}
+                                  radius="inner"
+                                  index={12 + sectionIndex * 3 + barIndex}
+                                />
+                              ))}
+                            </div>
+                          </section>
+                        ))}
+                      </div>
+                    </Card.Body>
+                  </Card>
+                </div>
+              </div>
+
+              <section
+                className="band min-w-0 gap-y-4"
+                aria-busy="true"
+                aria-label="Loading recent proof"
+              >
+                <div className="col-span-full flex flex-wrap items-end justify-between gap-3">
+                  <div className="flex max-w-2xl flex-col gap-2">
+                    <Skeleton width={132} height={18} radius="inner" index={22} />
+                    <Skeleton width={196} height={14} radius="inner" index={23} />
+                  </div>
+                </div>
+                <div className="band col-span-full min-w-0 gap-y-4">
+                  {Array.from({ length: proofSkeletonCount }, (_, index) => {
+                    const base = 24 + index * 8;
+                    return (
+                      <Card
+                        key={index}
+                        variant="outlined"
+                        shape="rounded"
+                        className="col-span-full min-w-0 md:col-span-4 lg:col-span-4"
+                        aria-hidden
+                      >
+                        <Card.Header
+                          start={
+                            <span className="flex items-center gap-2">
+                              <Skeleton width={28} height={20} radius="full" index={base} />
+                              <Skeleton width={48} height={14} radius="inner" index={base + 1} />
+                            </span>
+                          }
+                        />
+                        <Card.Body>
+                          <div className="aspect-[4/3] w-full bg-body object-cover rounded-[var(--radius-card-body)]">
+                            <Skeleton
+                              width="100%"
+                              height="100%"
+                              radius="element"
+                              className="h-full w-full"
+                              index={base + 2}
+                            />
+                          </div>
+                        </Card.Body>
+                        <Card.Footer>
+                          <div className="grid w-full grid-cols-3 gap-3">
+                            {[0, 1, 2].map((metric) => (
+                              <span key={metric} className="flex min-w-0 flex-col gap-1">
+                                <Skeleton width={40} height={10} radius="inner" index={base + 3 + metric} />
+                                <Skeleton width={56} height={16} radius="inner" index={base + 6 + metric} />
+                              </span>
+                            ))}
+                          </div>
+                        </Card.Footer>
+                      </Card>
+                    );
+                  })}
+                </div>
+              </section>
+            </>
+          )}
+        </div>
+      </div>
+      <PitchKitPageFooter />
+      <Toaster position="bottom-right" />
+    </main>
+  );
+}