@the-portland-company/shell 0.97.0 → 0.98.0

package/dist/{chunk-BMR5WAWH.js → chunk-Q5DTPY5N.js}

@@ -47,6 +47,29 @@ function useBrandAssets() {
   }, []);
   return assets;
 }
+function useBrandAsset(kind) {
+  const [url, setUrl] = useState(null);
+  useEffect(() => {
+    let done = false;
+    const read = () => {
+      if (done) return;
+      const next = readBrandAsset(kind);
+      setUrl((prev) => prev === next ? prev : next);
+    };
+    const links = Array.from(
+      document.querySelectorAll('link[rel="stylesheet"][href*="api/tokens"]')
+    );
+    links.forEach((l) => l.addEventListener("load", read));
+    const timers = RETRY_MS.map((ms) => window.setTimeout(read, ms));
+    read();
+    return () => {
+      done = true;
+      links.forEach((l) => l.removeEventListener("load", read));
+      timers.forEach((t) => window.clearTimeout(t));
+    };
+  }, [kind]);
+  return url;
+}
 
 // src/lib/brandFavicon.ts
 var BRAND_FAVICON_LINK_ID = "politogy-brand-favicon";
@@ -106,6 +129,6 @@ function BrandFavicon() {
   return null;
 }
 
-export { BRAND_APPLE_ICON_LINK_ID, BRAND_FAVICON_LINK_ID, BrandFavicon, applyBrandFavicon, useBrandAssets, watchBrandFavicon };
-//# sourceMappingURL=chunk-BMR5WAWH.js.map
-//# sourceMappingURL=chunk-BMR5WAWH.js.map
+export { BRAND_APPLE_ICON_LINK_ID, BRAND_FAVICON_LINK_ID, BrandFavicon, applyBrandFavicon, useBrandAsset, useBrandAssets, watchBrandFavicon };
+//# sourceMappingURL=chunk-Q5DTPY5N.js.map
+//# sourceMappingURL=chunk-Q5DTPY5N.js.map

package/dist/chunk-Q5DTPY5N.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/brandAssets.ts","../src/lib/brandFavicon.ts"],"names":["RETRY_MS","useEffect"],"mappings":";;;AAmBO,SAAS,YAAY,KAAA,EAAiD;AAC3E,EAAA,IAAI,CAAC,OAAO,OAAO,IAAA;AACnB,EAAA,MAAM,CAAA,GAAI,gCAAA,CAAiC,IAAA,CAAK,KAAA,CAAM,MAAM,CAAA;AAC5D,EAAA,MAAM,GAAA,GAAM,CAAA,GAAI,CAAC,CAAA,EAAG,IAAA,EAAK;AACzB,EAAA,OAAO,GAAA,IAAO,cAAA,CAAe,IAAA,CAAK,GAAG,IAAI,GAAA,GAAM,IAAA;AACjD;AAGO,SAAS,eAAe,IAAA,EAAqC;AAClE,EAAA,IAAI,OAAO,QAAA,KAAa,WAAA,EAAa,OAAO,IAAA;AAC5C,EAAA,IAAI;AACF,IAAA,OAAO,WAAA;AAAA,MACL,MAAA,CAAO,iBAAiB,QAAA,CAAS,eAAe,EAAE,gBAAA,CAAiB,CAAA,QAAA,EAAW,IAAI,CAAA,CAAE;AAAA,KACtF;AAAA,EACF,CAAA,CAAA,MAAQ;AACN,IAAA,OAAO,IAAA;AAAA,EACT;AACF;AASA,IAAM,KAAA,GAAqB,EAAE,cAAA,EAAgB,IAAA,EAAM,YAAY,IAAA,EAAK;AAKpE,IAAM,QAAA,GAAW,CAAC,CAAA,EAAG,GAAA,EAAK,KAAM,GAAI,CAAA;AAO7B,SAAS,cAAA,GAA8B;AAC5C,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,SAAsB,KAAK,CAAA;AACvD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,IAAA,GAAO,KAAA;AACX,IAAA,MAAM,OAAO,MAAM;AACjB,MAAA,IAAI,IAAA,EAAM;AACV,MAAA,MAAM,IAAA,GAAO;AAAA,QACX,cAAA,EAAgB,eAAe,iBAAiB,CAAA;AAAA,QAChD,UAAA,EAAY,eAAe,aAAa;AAAA,OAC1C;AACA,MAAA,SAAA;AAAA,QAAU,CAAC,IAAA,KACT,IAAA,CAAK,cAAA,KAAmB,IAAA,CAAK,kBAAkB,IAAA,CAAK,UAAA,KAAe,IAAA,CAAK,UAAA,GACpE,IAAA,GACA;AAAA,OACN;AAAA,IACF,CAAA;AACA,IAAA,MAAM,QAAQ,KAAA,CAAM,IAAA;AAAA,MAClB,QAAA,CAAS,iBAAkC,4CAA4C;AAAA,KACzF;AACA,IAAA,KAAA,CAAM,QAAQ,CAAC,CAAA,KAAM,EAAE,gBAAA,CAAiB,MAAA,EAAQ,IAAI,CAAC,CAAA;AACrD,IAAA,MAAM,MAAA,GAAS,SAAS,GAAA,CAAI,CAAC,OAAO,MAAA,CAAO,UAAA,CAAW,IAAA,EAAM,EAAE,CAAC,CAAA;AAC/D,IAAA,IAAA,EAAK;AACL,IAAA,OAAO,MAAM;AACX,MAAA,IAAA,GAAO,IAAA;AACP,MAAA,KAAA,CAAM,QAAQ,CAAC,CAAA,KAAM,EAAE,mBAAA,CAAoB,MAAA,EAAQ,IAAI,CAAC,CAAA;AACxD,MAAA,MAAA,CAAO,QAAQ,CAAC,CAAA,KAAM,MAAA,CAAO,YAAA,CAAa,CAAC,CAAC,CAAA;AAAA,IAC9C,CAAA;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AACL,EAAA,OAAO,MAAA;AACT;AAOO,SAAS,cAAc,IAAA,EAAqC;AACjE,EAAA,MAAM,CAAC,GAAA,EAAK,MAAM,CAAA,GAAI,SAAwB,IAAI,CAAA;AAClD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,IAAA,GAAO,KAAA;AACX,IAAA,MAAM,OAAO,MAAM;AACjB,MAAA,IAAI,IAAA,EAAM;AACV,MAAA,MAAM,IAAA,GAAO,eAAe,IAAI,CAAA;AAChC,MAAA,MAAA,CAAO,CAAC,IAAA,KAAU,IAAA,KAAS,IAAA,GAAO,OAAO,IAAK,CAAA;AAAA,IAChD,CAAA;AACA,IAAA,MAAM,QAAQ,KAAA,CAAM,IAAA;AAAA,MAClB,QAAA,CAAS,iBAAkC,4CAA4C;AAAA,KACzF;AACA,IAAA,KAAA,CAAM,QAAQ,CAAC,CAAA,KAAM,EAAE,gBAAA,CAAiB,MAAA,EAAQ,IAAI,CAAC,CAAA;AACrD,IAAA,MAAM,MAAA,GAAS,SAAS,GAAA,CAAI,CAAC,OAAO,MAAA,CAAO,UAAA,CAAW,IAAA,EAAM,EAAE,CAAC,CAAA;AAC/D,IAAA,IAAA,EAAK;AACL,IAAA,OAAO,MAAM;AACX,MAAA,IAAA,GAAO,IAAA;AACP,MAAA,KAAA,CAAM,QAAQ,CAAC,CAAA,KAAM,EAAE,mBAAA,CAAoB,MAAA,EAAQ,IAAI,CAAC,CAAA;AACxD,MAAA,MAAA,CAAO,QAAQ,CAAC,CAAA,KAAM,MAAA,CAAO,YAAA,CAAa,CAAC,CAAC,CAAA;AAAA,IAC9C,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,IAAI,CAAC,CAAA;AACT,EAAA,OAAO,GAAA;AACT;;;AC7FO,IAAM,qBAAA,GAAwB;AAC9B,IAAM,wBAAA,GAA2B;AAExC,SAAS,UAAA,CAAW,EAAA,EAAY,GAAA,EAAa,IAAA,EAAoB;AAC/D,EAAA,IAAI,IAAA,GAAO,QAAA,CAAS,cAAA,CAAe,EAAE,CAAA;AACrC,EAAA,IAAI,CAAC,IAAA,EAAM;AACT,IAAA,IAAA,GAAO,QAAA,CAAS,cAAc,MAAM,CAAA;AACpC,IAAA,IAAA,CAAK,EAAA,GAAK,EAAA;AACV,IAAA,IAAA,CAAK,GAAA,GAAM,GAAA;AAAA,EACb;AACA,EAAA,IAAI,KAAK,YAAA,CAAa,MAAM,CAAA,KAAM,IAAA,OAAW,IAAA,GAAO,IAAA;AAGpD,EAAA,MAAM,KAAA,GAAQ,QAAA,CAAS,IAAA,CAAK,gBAAA,CAAiB,CAAA,WAAA,EAAc,GAAA,CAAI,KAAA,CAAM,GAAG,CAAA,CAAE,CAAC,CAAC,CAAA,EAAA,CAAI,CAAA;AAChF,EAAA,IAAI,KAAA,CAAM,MAAM,MAAA,GAAS,CAAC,MAAM,IAAA,EAAM,QAAA,CAAS,IAAA,CAAK,WAAA,CAAY,IAAI,CAAA;AACtE;AAOO,SAAS,iBAAA,GAA6B;AAC3C,EAAA,IAAI,OAAO,QAAA,KAAa,WAAA,EAAa,OAAO,KAAA;AAC5C,EAAA,MAAM,OAAA,GAAU,eAAe,SAAS,CAAA;AACxC,EAAA,IAAI,CAAC,SAAS,OAAO,KAAA;AACrB,EAAA,UAAA,CAAW,qBAAA,EAAuB,QAAQ,OAAO,CAAA;AACjD,EAAA,MAAM,KAAA,GAAQ,eAAe,YAAY,CAAA;AACzC,EAAA,IAAI,KAAA,EAAO,UAAA,CAAW,wBAAA,EAA0B,kBAAA,EAAoB,KAAK,CAAA;AACzE,EAAA,OAAO,IAAA;AACT;AAIA,IAAMA,SAAAA,GAAW,CAAC,CAAA,EAAG,GAAA,EAAK,KAAM,GAAI,CAAA;AAO7B,SAAS,iBAAA,GAAgC;AAC9C,EAAA,IAAI,OAAO,QAAA,KAAa,WAAA,EAAa,OAAO,MAAM;AAAA,EAAC,CAAA;AACnD,EAAA,IAAI,IAAA,GAAO,KAAA;AACX,EAAA,MAAM,QAAQ,MAAM;AAClB,IAAA,IAAI,CAAC,MAAM,iBAAA,EAAkB;AAAA,EAC/B,CAAA;AAEA,EAAA,MAAM,MAAA,uBAAa,GAAA,EAAqB;AACxC,EAAA,MAAM,SAAS,MAAM;AACnB,IAAA,QAAA,CACG,gBAAA,CAAkC,4CAA4C,CAAA,CAC9E,OAAA,CAAQ,CAAC,CAAA,KAAM;AACd,MAAA,IAAI,MAAA,CAAO,GAAA,CAAI,CAAC,CAAA,EAAG;AACnB,MAAA,MAAA,CAAO,IAAI,CAAC,CAAA;AACZ,MAAA,CAAA,CAAE,gBAAA,CAAiB,QAAQ,KAAK,CAAA;AAAA,IAClC,CAAC,CAAA;AAAA,EACL,CAAA;AACA,EAAA,MAAA,EAAO;AACP,EAAA,MAAM,MAAA,GAASA,UAAS,GAAA,CAAI,CAAC,OAAO,MAAA,CAAO,UAAA,CAAW,KAAA,EAAO,EAAE,CAAC,CAAA;AAChE,EAAA,MAAM,WACJ,OAAO,gBAAA,KAAqB,cACxB,IAAA,GACA,IAAI,iBAAiB,MAAM;AACzB,IAAA,MAAA,EAAO;AACP,IAAA,KAAA,EAAM;AAAA,EACR,CAAC,CAAA;AACP,EAAA,QAAA,EAAU,QAAQ,QAAA,CAAS,IAAA,EAAM,EAAE,SAAA,EAAW,MAAM,CAAA;AACpD,EAAA,OAAO,MAAM;AACX,IAAA,IAAA,GAAO,IAAA;AACP,IAAA,MAAA,CAAO,QAAQ,CAAC,CAAA,KAAM,EAAE,mBAAA,CAAoB,MAAA,EAAQ,KAAK,CAAC,CAAA;AAC1D,IAAA,MAAA,CAAO,QAAQ,CAAC,CAAA,KAAM,MAAA,CAAO,YAAA,CAAa,CAAC,CAAC,CAAA;AAC5C,IAAA,QAAA,EAAU,UAAA,EAAW;AAAA,EACvB,CAAA;AACF;AAGO,SAAS,YAAA,GAAqB;AACnC,EAAAC,SAAAA,CAAU,MAAM,iBAAA,EAAkB,EAAG,EAAE,CAAA;AACvC,EAAA,OAAO,IAAA;AACT","file":"chunk-Q5DTPY5N.js","sourcesContent":["// Brand assets — logo URLs read at RUNTIME from the Brand token sheet.\n//\n// Brand guideline \"Logo standard: use the uploaded Brand assets as-is\": apps\n// (and the shell) never bundle their own copy of a logo; they read the URLs\n// from the Brand `assets` group. `/api/tokens?format=css` emits each set asset\n// as `--asset-<kebab>: url(\"…\")` on `:root`, and every app already loads that\n// sheet at runtime (see ../runtime-tokens.ts), so the rail logo is resolved\n// from the same live sheet as every other chrome value — a Brand upload swaps\n// the logo in every app without a deploy, and there is nothing to fall back to\n// that could drift.\n\n'use client'\n\nimport { useEffect, useState } from 'react'\n\n/** Brand `assets` keys the chrome renders, by their `--asset-<kebab>` name. */\nexport type BrandAssetKind = 'logo-horizontal' | 'logo-square' | 'favicon' | 'apple-icon' | 'verified-icon'\n\n/** `url(\"https://…\")` / `url(https://…)` → the bare https URL, else null. */\nexport function parseCssUrl(value: string | null | undefined): string | null {\n  if (!value) return null\n  const m = /^url\\(\\s*(['\"]?)(.*?)\\1\\s*\\)$/i.exec(value.trim())\n  const url = m?.[2]?.trim()\n  return url && /^https:\\/\\//i.test(url) ? url : null\n}\n\n/** One Brand asset URL from the live token sheet, or null while it is unset. */\nexport function readBrandAsset(kind: BrandAssetKind): string | null {\n  if (typeof document === 'undefined') return null\n  try {\n    return parseCssUrl(\n      window.getComputedStyle(document.documentElement).getPropertyValue(`--asset-${kind}`),\n    )\n  } catch {\n    return null\n  }\n}\n\nexport type BrandAssets = {\n  /** `assets.logoHorizontal` — the all-white lockup at the top of the rail. */\n  logoHorizontal: string | null\n  /** `assets.logoSquare` — the all-white vrm tile on the collapsed rail. */\n  logoSquare: string | null\n}\n\nconst EMPTY: BrandAssets = { logoHorizontal: null, logoSquare: null }\n\n// The token sheet is a <link> the app appends at startup, so it may still be\n// in flight on first paint. Re-read when it loads, and a few times after, to\n// cover a link that is inserted after this effect ran.\nconst RETRY_MS = [0, 250, 1000, 3000]\n\n/**\n * The Brand logo URLs, resolved after mount (null on the server and until the\n * runtime token sheet has loaded). Callers reserve the logo's box and draw\n * nothing while a value is null — never a stand-in image.\n */\nexport function useBrandAssets(): BrandAssets {\n  const [assets, setAssets] = useState<BrandAssets>(EMPTY)\n  useEffect(() => {\n    let done = false\n    const read = () => {\n      if (done) return\n      const next = {\n        logoHorizontal: readBrandAsset('logo-horizontal'),\n        logoSquare: readBrandAsset('logo-square'),\n      }\n      setAssets((prev) =>\n        prev.logoHorizontal === next.logoHorizontal && prev.logoSquare === next.logoSquare\n          ? prev\n          : next,\n      )\n    }\n    const links = Array.from(\n      document.querySelectorAll<HTMLLinkElement>('link[rel=\"stylesheet\"][href*=\"api/tokens\"]'),\n    )\n    links.forEach((l) => l.addEventListener('load', read))\n    const timers = RETRY_MS.map((ms) => window.setTimeout(read, ms))\n    read()\n    return () => {\n      done = true\n      links.forEach((l) => l.removeEventListener('load', read))\n      timers.forEach((t) => window.clearTimeout(t))\n    }\n  }, [])\n  return assets\n}\n\n/**\n * One Brand asset URL, resolved after mount the same way as the rail logos\n * (null on the server and until the runtime token sheet has loaded). Used by\n * the VRM Verified badge for `assets.verifiedIcon` (`--asset-verified-icon`).\n */\nexport function useBrandAsset(kind: BrandAssetKind): string | null {\n  const [url, setUrl] = useState<string | null>(null)\n  useEffect(() => {\n    let done = false\n    const read = () => {\n      if (done) return\n      const next = readBrandAsset(kind)\n      setUrl((prev) => (prev === next ? prev : next))\n    }\n    const links = Array.from(\n      document.querySelectorAll<HTMLLinkElement>('link[rel=\"stylesheet\"][href*=\"api/tokens\"]'),\n    )\n    links.forEach((l) => l.addEventListener('load', read))\n    const timers = RETRY_MS.map((ms) => window.setTimeout(read, ms))\n    read()\n    return () => {\n      done = true\n      links.forEach((l) => l.removeEventListener('load', read))\n      timers.forEach((t) => window.clearTimeout(t))\n    }\n  }, [kind])\n  return url\n}\n","// Browser-tab icon — Brand `assets.favicon` read at RUNTIME from the Brand\n// token sheet, the same way the rail logo is (./brandAssets).\n//\n// `politogyAppIcons()` (../app-icons) resolves the icon on the SERVER from\n// specs.politogyvrm.com/api/icons/<app>. In production that request comes from\n// a Worker, not a browser, and Cloudflare's bot check answers it with a\n// challenge page, so the metadata comes back with no icon and the tab shows the\n// browser default (or an app's leftover Next.js `favicon.ico` triangle). The\n// token sheet, by contrast, is loaded by the BROWSER in every app, and emits\n// `--asset-favicon` / `--asset-apple-icon` from Brand `assets.*`. Reading those\n// gives every app the Brand's VRM tile with no static file in any repo (Global\n// Rules → App Icons) and no extra request.\n//\n// The link carries a fixed id and is kept the LAST icon link in <head>, so a\n// stale icon from metadata or an old static file never wins over the Brand's.\n\n'use client'\n\nimport { useEffect } from 'react'\n\nimport { readBrandAsset } from './brandAssets'\n\nexport const BRAND_FAVICON_LINK_ID = 'politogy-brand-favicon'\nexport const BRAND_APPLE_ICON_LINK_ID = 'politogy-brand-apple-icon'\n\nfunction upsertLink(id: string, rel: string, href: string): void {\n  let link = document.getElementById(id) as HTMLLinkElement | null\n  if (!link) {\n    link = document.createElement('link')\n    link.id = id\n    link.rel = rel\n  }\n  if (link.getAttribute('href') !== href) link.href = href\n  // Last icon link in <head> wins. Re-appending an already-last node is a no-op\n  // for the browser, so only move it when something was added after it.\n  const icons = document.head.querySelectorAll(`link[rel~=\"${rel.split(' ')[0]}\"]`)\n  if (icons[icons.length - 1] !== link) document.head.appendChild(link)\n}\n\n/**\n * Point the tab icon (and the iOS home-screen icon) at the Brand's uploaded\n * assets. Returns true once the favicon was set; false while the token sheet\n * has not defined `--asset-favicon` yet. Never draws a stand-in.\n */\nexport function applyBrandFavicon(): boolean {\n  if (typeof document === 'undefined') return false\n  const favicon = readBrandAsset('favicon')\n  if (!favicon) return false\n  upsertLink(BRAND_FAVICON_LINK_ID, 'icon', favicon)\n  const apple = readBrandAsset('apple-icon')\n  if (apple) upsertLink(BRAND_APPLE_ICON_LINK_ID, 'apple-touch-icon', apple)\n  return true\n}\n\n// The token sheet is a <link> the app appends at startup, so it may still be in\n// flight on first paint. Re-read when it loads and a few times after.\nconst RETRY_MS = [0, 250, 1000, 3000]\n\n/**\n * Apply the Brand favicon now and keep it applied: on token sheet load, on a\n * few retries, and whenever <head> changes (a client navigation can re-insert\n * metadata icon links after ours). Returns a cleanup function.\n */\nexport function watchBrandFavicon(): () => void {\n  if (typeof document === 'undefined') return () => {}\n  let done = false\n  const apply = () => {\n    if (!done) applyBrandFavicon()\n  }\n  // A token sheet inserted after mount is picked up by the observer below.\n  const sheets = new Set<HTMLLinkElement>()\n  const listen = () => {\n    document\n      .querySelectorAll<HTMLLinkElement>('link[rel=\"stylesheet\"][href*=\"api/tokens\"]')\n      .forEach((l) => {\n        if (sheets.has(l)) return\n        sheets.add(l)\n        l.addEventListener('load', apply)\n      })\n  }\n  listen()\n  const timers = RETRY_MS.map((ms) => window.setTimeout(apply, ms))\n  const observer =\n    typeof MutationObserver === 'undefined'\n      ? null\n      : new MutationObserver(() => {\n          listen()\n          apply()\n        })\n  observer?.observe(document.head, { childList: true })\n  return () => {\n    done = true\n    sheets.forEach((l) => l.removeEventListener('load', apply))\n    timers.forEach((t) => window.clearTimeout(t))\n    observer?.disconnect()\n  }\n}\n\n/** Renders nothing; sets the Brand favicon after mount. PolitogyAppFrame renders it. */\nexport function BrandFavicon(): null {\n  useEffect(() => watchBrandFavicon(), [])\n  return null\n}\n"]}

package/dist/{chunk-VAQNZD37.js → chunk-WOOBPM4V.js}

@@ -1,4 +1,5 @@
 import { readThemeCookie, THEME_STORAGE_KEY, isThemePreference, applyThemePreference, readPendingThemeChoice, writeThemeCookie, clearPendingThemeChoice, markThemeChoicePending } from './chunk-BHRVZPZ7.js';
+import { useBrandAsset } from './chunk-Q5DTPY5N.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createContext, useState, useRef, useCallback, useEffect, useLayoutEffect, useContext, useMemo, useSyncExternalStore } from 'react';
 import { createPortal } from 'react-dom';
@@ -344,6 +345,90 @@ function RowMenuItem({
     }
   );
 }
+var VRM_VERIFIED_TOOLTIP = "Politogy has confirmed this is a real, registered voter.";
+var VRM_TIER_LABELS = {
+  verified: "VRM Verified",
+  identified: "Identified",
+  anonymous: "Anonymous",
+  stale: "Stale",
+  inactive: "Inactive"
+};
+var TIER_TOOLTIPS = {
+  verified: VRM_VERIFIED_TOOLTIP,
+  identified: "Identified: we know who this is, but Politogy has not verified them.",
+  anonymous: "Anonymous: nothing identifying has been captured yet.",
+  stale: "Stale: was VRM Verified, but the proof is more than 12 months old.",
+  inactive: "Inactive: the voter file marks this registration inactive or canceled."
+};
+var DOT_FALLBACK = {
+  identified: "#a855f7",
+  anonymous: "var(--color-graphite, #2b2b2b)",
+  stale: "#eab308",
+  inactive: "var(--muted, #8a8a8a)"
+};
+function VrmVerifiedBadge({ tier, size, showLabel = true, className, style }) {
+  const icon = useBrandAsset("verified-icon");
+  const known = tier && tier in VRM_TIER_LABELS ? tier : null;
+  const label = known ? VRM_TIER_LABELS[known] : "Not yet computed";
+  const title = known ? TIER_TOOLTIPS[known] : "The VRM Verified tier has not been worked out yet.";
+  const iconSize = size ?? 16;
+  const dotSize = size ?? 8;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-vrm-tier": known ?? "none",
+      title,
+      "aria-label": showLabel ? void 0 : label,
+      role: showLabel ? void 0 : "img",
+      className,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 6,
+        borderRadius: 9999,
+        border: "1px solid var(--line, #e5e5e5)",
+        padding: "2px 10px",
+        fontSize: 12,
+        fontWeight: 600,
+        lineHeight: 1.4,
+        whiteSpace: "nowrap",
+        ...style
+      },
+      children: [
+        known === "verified" ? (
+          // The box is reserved while the Brand sheet loads; nothing stands in.
+          /* @__PURE__ */ jsx("span", { "aria-hidden": true, style: { display: "inline-block", width: iconSize, height: iconSize, flexShrink: 0 }, children: icon ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: icon,
+              alt: "",
+              width: iconSize,
+              height: iconSize,
+              draggable: false,
+              "data-testid": "vrm-verified-icon",
+              style: { display: "block", width: iconSize, height: iconSize }
+            }
+          ) : null })
+        ) : /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            style: {
+              display: "inline-block",
+              width: dotSize,
+              height: dotSize,
+              borderRadius: 9999,
+              flexShrink: 0,
+              background: known ? `var(--vrm-tier-${known}, ${DOT_FALLBACK[known]})` : "transparent",
+              border: known ? void 0 : "1px dashed var(--muted, #8a8a8a)"
+            }
+          }
+        ),
+        showLabel ? /* @__PURE__ */ jsx("span", { children: label }) : null
+      ]
+    }
+  );
+}
 function FormColumn({ children, className }) {
   return /* @__PURE__ */ jsx("div", { "data-shell-form-column": "", className: clsx2("w-full max-w-[960px]", className), children });
 }
@@ -609,19 +694,26 @@ function TopBarCountBadge({ count }) {
 }
 function TopBarTooltip({
   title,
-  description
+  description,
+  align = "center"
 }) {
+  const bodyPosition = align === "end" ? "right-0" : "left-1/2 -translate-x-1/2";
+  const arrowPosition = align === "end" ? "" : "left-1/2 -translate-x-1/2";
+  const arrowStyle = align === "end" ? { right: "calc(var(--topbar-icon-button-size, 34px) / 2 - 5px)" } : void 0;
   return /* @__PURE__ */ jsxs(
     "span",
     {
       role: "tooltip",
-      className: "pointer-events-none absolute left-1/2 top-full z-50 mt-2 hidden w-max max-w-56 -translate-x-1/2 flex-col rounded-lg border border-[color:var(--app-btn-tooltip-bg,#2F3136)] bg-[color:var(--app-btn-tooltip-bg,#2F3136)] px-3 py-2 text-left shadow-[var(--shadow-soft)] group-hover/tbtip:flex group-focus-visible/tbtip:flex",
+      "data-tooltip-align": align,
+      className: `pointer-events-none absolute ${bodyPosition} top-full z-50 mt-2 hidden w-max max-w-56 flex-col rounded-lg border border-[color:var(--app-btn-tooltip-bg,#2F3136)] bg-[color:var(--app-btn-tooltip-bg,#2F3136)] px-3 py-2 text-left shadow-[var(--shadow-soft)] group-hover/tbtip:flex group-focus-visible/tbtip:flex`,
       children: [
         /* @__PURE__ */ jsx(
           "span",
           {
             "aria-hidden": true,
-            className: "absolute -top-[5px] left-1/2 h-2.5 w-2.5 -translate-x-1/2 rotate-45 border-l border-t border-[color:var(--app-btn-tooltip-bg,#2F3136)] bg-[color:var(--app-btn-tooltip-bg,#2F3136)]"
+            "data-tooltip-arrow": true,
+            style: arrowStyle,
+            className: `absolute -top-[5px] ${arrowPosition} h-2.5 w-2.5 rotate-45 border-l border-t border-[color:var(--app-btn-tooltip-bg,#2F3136)] bg-[color:var(--app-btn-tooltip-bg,#2F3136)]`
           }
         ),
         /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-[color:var(--app-btn-tooltip-fg,#FFFFFF)]", children: title }),
@@ -2294,7 +2386,7 @@ function useThemePreference() {
 function TopBarLinkAction({ label, description, href, icon: Icon }) {
   return /* @__PURE__ */ jsxs("a", { href, "aria-label": label, className: topBarIconButtonClass(), children: [
     /* @__PURE__ */ jsx(Icon, { size: TOPBAR_GLYPH_SIZE, className: "text-current" }),
-    /* @__PURE__ */ jsx(TopBarTooltip, { title: label, description })
+    /* @__PURE__ */ jsx(TopBarTooltip, { title: label, description, align: "end" })
   ] });
 }
 function OrganizationSettingsAction({ href }) {
@@ -2726,6 +2818,6 @@ function BreadcrumbBarView({
   );
 }
 
-export { AI_CREDITS_STATE_TITLES, AiCreditsState, BreadcrumbBarView, CORE_APP_ORIGIN, CORE_BILLING_PATH, CREDIT_TYPE_LABELS, CREDIT_TYPE_ORDER, Card, CreditsAction, FormColumn, FuelAction, HeaderTabBar, KNOWN_TAB_GLYPHS, MyProfileAction, NAV_DISPLAY_OPTIONS, NavChromeProvider, NavDisplayAction, NavThemeControl, NotificationsAction, OrganizationSettingsAction, PageHeaderView, RowMenu, RowMenuItem, SPECS_ORIGIN, SpecOverlayAction, SpeculationRulesScript, SupportAction, TOPBAR_GLYPH_SIZE, TopBarCountBadge, TopBarLinkAction, TopBarPanelArrow, TopBarPopover, TopBarTooltip, TopBarWidgetSlot, aiCreditsWalletUrl, buildNavSpeculationRules, buildSpeculationRules, collectSiblingAppUrls, createCommsNotificationsAdapter, creditGaugeRatio, creditStateWord, creditTooltipLine, creditsAriaLabel, creditsIconState, emptyNotificationsFeed, normalizeNotificationsFeed, resolveBrandGlyph, resolveOrgLogoUrl, resolveTabGlyph, rowMenuPosition, topBarIconButtonClass, useChromeMe, useChromeOrgs, useNavChromeDedupedFetch, useNavChromeFetcher, useThemePreference, useTopBarIconSlotGlyph, warnDeprecated };
-//# sourceMappingURL=chunk-VAQNZD37.js.map
-//# sourceMappingURL=chunk-VAQNZD37.js.map
+export { AI_CREDITS_STATE_TITLES, AiCreditsState, BreadcrumbBarView, CORE_APP_ORIGIN, CORE_BILLING_PATH, CREDIT_TYPE_LABELS, CREDIT_TYPE_ORDER, Card, CreditsAction, FormColumn, FuelAction, HeaderTabBar, KNOWN_TAB_GLYPHS, MyProfileAction, NAV_DISPLAY_OPTIONS, NavChromeProvider, NavDisplayAction, NavThemeControl, NotificationsAction, OrganizationSettingsAction, PageHeaderView, RowMenu, RowMenuItem, SPECS_ORIGIN, SpecOverlayAction, SpeculationRulesScript, SupportAction, TOPBAR_GLYPH_SIZE, TopBarCountBadge, TopBarLinkAction, TopBarPanelArrow, TopBarPopover, TopBarTooltip, TopBarWidgetSlot, VRM_TIER_LABELS, VRM_VERIFIED_TOOLTIP, VrmVerifiedBadge, aiCreditsWalletUrl, buildNavSpeculationRules, buildSpeculationRules, collectSiblingAppUrls, createCommsNotificationsAdapter, creditGaugeRatio, creditStateWord, creditTooltipLine, creditsAriaLabel, creditsIconState, emptyNotificationsFeed, normalizeNotificationsFeed, resolveBrandGlyph, resolveOrgLogoUrl, resolveTabGlyph, rowMenuPosition, topBarIconButtonClass, useChromeMe, useChromeOrgs, useNavChromeDedupedFetch, useNavChromeFetcher, useThemePreference, useTopBarIconSlotGlyph, warnDeprecated };
+//# sourceMappingURL=chunk-WOOBPM4V.js.map
+//# sourceMappingURL=chunk-WOOBPM4V.js.map