@the-portland-company/shell 0.94.0 → 0.96.0

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+## 0.96.0
+
+One shared "⋯" row menu for list rows (Ben 2026-10-26: Email's broadcast menu stuck open, and on the last row Archive and Delete were cut off by the table frame).
+
+- **New `RowMenu`** (root and `/native`): the trigger button plus a panel rendered in a portal on `<body>` with fixed positioning, so a table wrapper or card with `overflow: hidden/auto` never clips it. It opens below the trigger, right-aligned, and flips above when it does not fit below. It closes on an outside click, on Escape (focus back on the trigger), after a `role="menuitem"` is chosen, when another row's menu opens, and on page scroll or resize. Arrow keys, Home and End move between items. Clicks on the trigger and in the panel do not bubble to the row (React carries portal events to ancestors), so a clickable row does not open too. Clicks on anything that is not a menu item (an inline form expanding in the panel) keep it open; the close after a choice waits a tick so a submit button's form still submits. Pass `triggerClassName` / `panelClassName` to use an app's own classes instead of the default token look.
+- **New `RowMenuItem`**: a plain button item (`onSelect`, `disabled`, `danger`).
+- Also exported: `rowMenuPosition()` (the placement math) and the `RowMenuPlacement` type.
+- Tests: `__tests__/rowMenu.test.tsx`.
+
+## 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,
       {