@the-portland-company/shell 0.94.0 → 0.95.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## 0.95.0
+
+Every app's browser tab shows the Brand's VRM tile (Brand `assets.favicon`; Reference/UI-Platform conformance: "Favicons resolve from Brand `assets.favicon`, not static files").
+
+- **New `BrandFavicon`** (root and `/native`), rendered by `PolitogyAppFrame`, so every app on the frame inherits it with no code change. After mount it reads `--asset-favicon` and `--asset-apple-icon` from the runtime token sheet (`/api/tokens?format=css`, already loaded by the browser in every app) and sets `<link rel="icon">` and `<link rel="apple-touch-icon">`. The link is kept the last icon link in `<head>`, so a stale metadata icon or a leftover static file never wins. Draws nothing until the sheet defines the asset.
+- Why: `politogyAppIcons()` resolves icons on the server, and in production Cloudflare's bot check answers the Worker's request to `specs.politogyvrm.com/api/icons/<app>` with a challenge, so the metadata had no icon and tabs showed the browser default or an app's leftover Next.js `favicon.ico` triangle.
+- **`politogyAppIcons()` fallback:** when the API can't be reached or has no favicon, it now returns `SPECS_FAVICON_URL` (`https://specs.politogyvrm.com/api/favicon`, Specs' public 302 to Brand `assets.favicon`; `?kind=apple` for the iOS icon) instead of no entries. The icon link is in the server HTML, so the browser never asks for `/favicon.ico` and never flashes a blank tab. Exported: `SPECS_FAVICON_URL`.
+- Also exported: `applyBrandFavicon()`, `watchBrandFavicon()`, `BRAND_FAVICON_LINK_ID`, `BRAND_APPLE_ICON_LINK_ID`, for apps outside the frame.
+- **New subpath `@the-portland-company/shell/brand-favicon`** (client entry, React only): import `BrandFavicon` from it in a root layout to cover pages that do not render the frame (public forms, surveys, polls), without pulling in `./native`.
+- Apps should delete any `app/favicon.ico` or `app/icon.svg` they still carry.
+- Tests: `__tests__/brandFavicon.test.tsx`.
+
 ## 0.94.0
 
 One shared look for the three "no AI Credits" states (VRM-Admin/Pricing-and-Metering §8.6 and §8.10.3; Ben's go on the AI metering plan, 2026-10-24).

package/dist/app-chrome.cjs

@@ -2176,6 +2176,110 @@ var NAV_DISPLAY_OPTIONS = [
   { value: "tabs", label: "Tabs Only" },
   { value: "both", label: "Both" }
 ];
+function parseCssUrl(value) {
+  if (!value) return null;
+  const m = /^url\(\s*(['"]?)(.*?)\1\s*\)$/i.exec(value.trim());
+  const url = m?.[2]?.trim();
+  return url && /^https:\/\//i.test(url) ? url : null;
+}
+function readBrandAsset(kind) {
+  if (typeof document === "undefined") return null;
+  try {
+    return parseCssUrl(
+      window.getComputedStyle(document.documentElement).getPropertyValue(`--asset-${kind}`)
+    );
+  } catch {
+    return null;
+  }
+}
+var EMPTY = { logoHorizontal: null, logoSquare: null };
+var RETRY_MS = [0, 250, 1e3, 3e3];
+function useBrandAssets() {
+  const [assets, setAssets] = react.useState(EMPTY);
+  react.useEffect(() => {
+    let done = false;
+    const read = () => {
+      if (done) return;
+      const next = {
+        logoHorizontal: readBrandAsset("logo-horizontal"),
+        logoSquare: readBrandAsset("logo-square")
+      };
+      setAssets(
+        (prev) => prev.logoHorizontal === next.logoHorizontal && prev.logoSquare === next.logoSquare ? 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));
+    };
+  }, []);
+  return assets;
+}
+
+// src/lib/brandFavicon.ts
+var BRAND_FAVICON_LINK_ID = "politogy-brand-favicon";
+var BRAND_APPLE_ICON_LINK_ID = "politogy-brand-apple-icon";
+function upsertLink(id, rel, href) {
+  let link = document.getElementById(id);
+  if (!link) {
+    link = document.createElement("link");
+    link.id = id;
+    link.rel = rel;
+  }
+  if (link.getAttribute("href") !== href) link.href = href;
+  const icons = document.head.querySelectorAll(`link[rel~="${rel.split(" ")[0]}"]`);
+  if (icons[icons.length - 1] !== link) document.head.appendChild(link);
+}
+function applyBrandFavicon() {
+  if (typeof document === "undefined") return false;
+  const favicon = readBrandAsset("favicon");
+  if (!favicon) return false;
+  upsertLink(BRAND_FAVICON_LINK_ID, "icon", favicon);
+  const apple = readBrandAsset("apple-icon");
+  if (apple) upsertLink(BRAND_APPLE_ICON_LINK_ID, "apple-touch-icon", apple);
+  return true;
+}
+var RETRY_MS2 = [0, 250, 1e3, 3e3];
+function watchBrandFavicon() {
+  if (typeof document === "undefined") return () => {
+  };
+  let done = false;
+  const apply = () => {
+    if (!done) applyBrandFavicon();
+  };
+  const sheets = /* @__PURE__ */ new Set();
+  const listen = () => {
+    document.querySelectorAll('link[rel="stylesheet"][href*="api/tokens"]').forEach((l) => {
+      if (sheets.has(l)) return;
+      sheets.add(l);
+      l.addEventListener("load", apply);
+    });
+  };
+  listen();
+  const timers = RETRY_MS2.map((ms) => window.setTimeout(apply, ms));
+  const observer = typeof MutationObserver === "undefined" ? null : new MutationObserver(() => {
+    listen();
+    apply();
+  });
+  observer?.observe(document.head, { childList: true });
+  return () => {
+    done = true;
+    sheets.forEach((l) => l.removeEventListener("load", apply));
+    timers.forEach((t) => window.clearTimeout(t));
+    observer?.disconnect();
+  };
+}
+function BrandFavicon() {
+  react.useEffect(() => watchBrandFavicon(), []);
+  return null;
+}
 var standardNavIcons = {
   home: lu.LuHouse,
   users: lu.LuUsers,
@@ -4610,52 +4714,6 @@ function writeUrlState(current, patch) {
   }
   return buildSearch(state);
 }
-function parseCssUrl(value) {
-  if (!value) return null;
-  const m = /^url\(\s*(['"]?)(.*?)\1\s*\)$/i.exec(value.trim());
-  const url = m?.[2]?.trim();
-  return url && /^https:\/\//i.test(url) ? url : null;
-}
-function readBrandAsset(kind) {
-  if (typeof document === "undefined") return null;
-  try {
-    return parseCssUrl(
-      window.getComputedStyle(document.documentElement).getPropertyValue(`--asset-${kind}`)
-    );
-  } catch {
-    return null;
-  }
-}
-var EMPTY = { logoHorizontal: null, logoSquare: null };
-var RETRY_MS = [0, 250, 1e3, 3e3];
-function useBrandAssets() {
-  const [assets, setAssets] = react.useState(EMPTY);
-  react.useEffect(() => {
-    let done = false;
-    const read = () => {
-      if (done) return;
-      const next = {
-        logoHorizontal: readBrandAsset("logo-horizontal"),
-        logoSquare: readBrandAsset("logo-square")
-      };
-      setAssets(
-        (prev) => prev.logoHorizontal === next.logoHorizontal && prev.logoSquare === next.logoSquare ? 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));
-    };
-  }, []);
-  return assets;
-}
 var CORE_APP = "vrm";
 var DEFAULT_SIGN_OUT_URL = "/auth/signout";
 var POLITOGY_APPS = {
@@ -4970,6 +5028,7 @@ function FrameBody({
   );
   const breadcrumbs = core ? core.page?.breadcrumbs : grants?.includes("breadcrumbs") ? granted("breadcrumbs") : derivedBreadcrumbs;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(BrandFavicon, {}),
     /* @__PURE__ */ jsxRuntime.jsx(
       LoadingScreen,
       {