@the-portland-company/shell 0.96.1 → 0.97.0

package/dist/app-chrome.cjs

@@ -4,9 +4,9 @@
 var react = require('react');
 var clsx = require('clsx');
 var fi = require('react-icons/fi');
-var reactDom = require('react-dom');
-var jsxRuntime = require('react/jsx-runtime');
+require('react-dom');
 var lu = require('react-icons/lu');
+var jsxRuntime = require('react/jsx-runtime');
 var devnotes = require('@the-portland-company/devnotes');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -575,7 +575,6 @@ var SETTINGS_APP_ORIGIN = "https://settings.politogyvrm.com";
 var CORE_BILLING_PATH = "/organization-settings/subscription-billing";
 var CORE_BILLING_URL = `${SETTINGS_APP_ORIGIN}${CORE_BILLING_PATH}`;
 var QUARANTINED_CONTACTS_URL = `https://contacts.politogyvrm.com/duplicates`;
-var SPECS_ORIGIN = "https://specs.politogyvrm.com";
 function withOrgParam(url, orgId) {
   if (!orgId) return url;
   return `${url}${url.includes("?") ? "&" : "?"}org=${orgId}`;
@@ -653,16 +652,6 @@ function TopBarPanelArrow() {
     }
   );
 }
-function TopBarWidgetSlot({
-  title,
-  description,
-  children
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "topbar-widget-slot group/tbtip relative inline-flex", children: [
-    children,
-    /* @__PURE__ */ jsxRuntime.jsx(TopBarTooltip, { title, description })
-  ] });
-}
 var THEME_OPTIONS = [
   { value: "light", label: "Light" }
 ];
@@ -946,23 +935,6 @@ function BellOffGlyph({ size = 14, className }) {
     /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "1", y1: "1", x2: "23", y2: "23" })
   ] });
 }
-function LifeBuoyGlyph({ size = TOPBAR_GLYPH_SIZE, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className, "aria-hidden": true, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
-    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "4" }),
-    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4.93", y1: "4.93", x2: "9.17", y2: "9.17" }),
-    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "14.83", y1: "14.83", x2: "19.07", y2: "19.07" }),
-    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "14.83", y1: "9.17", x2: "19.07", y2: "4.93" }),
-    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4.93", y1: "19.07", x2: "9.17", y2: "14.83" })
-  ] });
-}
-function LayoutGlyph({ size = TOPBAR_GLYPH_SIZE, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className, "aria-hidden": true, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
-    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "9", x2: "21", y2: "9" }),
-    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "9", y1: "21", x2: "9", y2: "9" })
-  ] });
-}
 function PlusGlyph({ size = 14, className }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", className, "aria-hidden": true, children: [
     /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
@@ -1596,586 +1568,39 @@ function NotificationsAction({ orgId }) {
     ] })
   );
 }
-function composeSupportMessage(input) {
-  const ctx = [`Page: ${input.pageTitle || "Unknown"}`, `URL: ${input.url}`];
-  if (input.orgName) ctx.push(`Org: ${input.orgName}`);
-  const reply = [input.replyEmail?.trim(), input.replyPhone?.trim()].filter(Boolean).join(" / ");
-  if (reply) ctx.push(`Reply-to: ${reply}`);
-  return `${input.note.trim()}
-
----
-${ctx.join("\n")}`;
-}
-function SupportAction({
-  orgId,
-  orgs: knownOrgs
-} = {}) {
-  const { fetchJson } = useNavChrome("SupportAction");
-  const { me, loaded } = useChromeMe();
-  const { orgs: fetchedOrgs } = useChromeOrgs({ enabled: !knownOrgs });
-  const orgs = knownOrgs ?? fetchedOrgs;
-  const [open, setOpen] = react.useState(false);
-  const [message, setMessage] = react.useState("");
-  const [email, setEmail] = react.useState("");
-  const [phone, setPhone] = react.useState("");
-  const [showEmailError, setShowEmailError] = react.useState(false);
-  const [state, setState] = react.useState("idle");
-  const meEmail = me?.email ?? null;
-  const mePhone = me?.phone ?? null;
-  const missingEmail = loaded && !meEmail;
-  const missingPhone = loaded && !mePhone;
-  const activeOrg = (orgId ? orgs?.find((o) => o.id === orgId) : null) ?? (orgs && orgs.length === 1 ? orgs[0] : null);
-  const orgName = activeOrg?.name ?? null;
-  const close = react.useCallback(() => {
-    setOpen(false);
-    setState("idle");
-    setMessage("");
-    setShowEmailError(false);
-  }, []);
-  react.useEffect(() => {
-    if (!open) return;
-    setEmail(meEmail ?? "");
-    setPhone(mePhone ?? "");
-    setShowEmailError(false);
-  }, [open, meEmail, mePhone]);
-  react.useEffect(() => {
-    if (!open) return;
-    const onKey = (e) => {
-      if (e.key === "Escape") close();
-    };
-    document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
-  }, [open, close]);
-  const submit = async () => {
-    if (!message.trim() || state === "sending") return;
-    const resolvedEmail = (missingEmail ? email : meEmail ?? "").trim();
-    const resolvedPhone = (missingPhone ? phone : mePhone ?? "").trim();
-    if (missingEmail && !resolvedEmail) {
-      setShowEmailError(true);
-      return;
-    }
-    setShowEmailError(false);
-    const collectedContact = missingEmail || missingPhone;
-    const fullMessage = composeSupportMessage({
-      note: message,
-      pageTitle: typeof document !== "undefined" ? document.title : "",
-      url: typeof window !== "undefined" ? window.location.href : "",
-      orgName,
-      replyEmail: collectedContact ? resolvedEmail : void 0,
-      replyPhone: collectedContact ? resolvedPhone : void 0
-    });
-    setState("sending");
-    try {
-      await fetchJson("support", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ message: fullMessage })
-      });
-      setState("sent");
-    } catch {
-      setState("error");
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
-      {
-        type: "button",
-        "aria-label": "Support",
-        className: topBarIconButtonClass(),
-        onClick: () => setOpen(true),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(SlotGlyph, { slot: "support", fallback: LifeBuoyGlyph }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            TopBarTooltip,
-            {
-              title: "Support",
-              description: "Send a support request to the Politogy team."
-            }
-          )
-        ]
-      }
-    ),
-    open && typeof document !== "undefined" ? reactDom.createPortal(
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: "fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4",
-          role: "dialog",
-          "aria-modal": "true",
-          "aria-label": "Support request",
-          onMouseDown: (e) => {
-            if (e.target === e.currentTarget) close();
-          },
-          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full max-w-md rounded-2xl border border-[color:var(--line)] bg-[color:var(--panel-elevated)] p-6 shadow-[var(--shadow-soft)]", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-bold tracking-[-0.01em] text-[color:var(--foreground)]", children: "Contact Support" }),
-            state === "sent" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-3 text-sm text-[color:var(--muted)]", children: "Your request was sent. The team will reply by email." }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-5 flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: close,
-                  className: "rounded-full bg-[color:var(--color-accent-bg-safe,var(--color-accent))] px-4 py-2 text-sm font-semibold text-[#FFFFFF] hover:opacity-90",
-                  children: "Done"
-                }
-              ) })
-            ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-[color:var(--muted)]", children: "Describe the problem or question. Your account details ride along automatically." }),
-              missingEmail ? /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "mt-4 block", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-1 block text-xs font-semibold text-[color:var(--foreground)]", children: "Your email" }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "input",
-                  {
-                    type: "email",
-                    value: email,
-                    onChange: (e) => setEmail(e.target.value),
-                    placeholder: "you@example.com",
-                    className: "w-full rounded-lg border border-[color:var(--line)] bg-[color:var(--panel)] px-3 py-2 text-sm text-[color:var(--foreground)] placeholder:text-[color:var(--muted)] focus:outline-none focus:ring-2 focus:ring-[color:var(--color-accent)]"
-                  }
-                ),
-                showEmailError ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-1 block text-xs text-[color:var(--chrome-danger)]", children: "Enter an email so support can reply." }) : null
-              ] }) : null,
-              missingPhone ? /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "mt-3 block", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-1 block text-xs font-semibold text-[color:var(--foreground)]", children: "Your phone \u2014 optional" }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "input",
-                  {
-                    type: "tel",
-                    value: phone,
-                    onChange: (e) => setPhone(e.target.value),
-                    placeholder: "(503) 555-1212",
-                    className: "w-full rounded-lg border border-[color:var(--line)] bg-[color:var(--panel)] px-3 py-2 text-sm text-[color:var(--foreground)] placeholder:text-[color:var(--muted)] focus:outline-none focus:ring-2 focus:ring-[color:var(--color-accent)]"
-                  }
-                )
-              ] }) : null,
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "textarea",
-                {
-                  value: message,
-                  onChange: (e) => setMessage(e.target.value),
-                  rows: 5,
-                  placeholder: "How can we help?",
-                  className: "mt-4 w-full resize-y rounded-lg border border-[color:var(--line)] bg-[color:var(--panel)] px-3 py-2 text-sm text-[color:var(--foreground)] placeholder:text-[color:var(--muted)] focus:outline-none focus:ring-2 focus:ring-[color:var(--color-accent)]"
-                }
-              ),
-              state === "error" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-[color:var(--chrome-danger)]", children: "Sending failed \u2014 try again." }) : null,
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex justify-end gap-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: close,
-                    className: "rounded-full border border-[color:var(--line)] px-4 py-2 text-sm font-semibold text-[color:var(--foreground)] hover:bg-[color:var(--panel)]",
-                    children: "Cancel"
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: submit,
-                    disabled: !message.trim() || state === "sending",
-                    className: "rounded-full bg-[color:var(--color-accent-bg-safe,var(--color-accent))] px-4 py-2 text-sm font-semibold text-[#FFFFFF] transition hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50",
-                    children: state === "sending" ? "Sending\u2026" : "Send request"
-                  }
-                )
-              ] })
-            ] })
-          ] })
-        }
-      ),
-      document.body
-    ) : null
+var NAV_DISPLAY_OPTIONS = [
+  { value: "menu", label: "Sub Menu" },
+  { value: "tabs", label: "Tabs Only" },
+  { value: "both", label: "Both" }
+];
+function TopBarLinkAction({ label, description, href, icon: Icon }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("a", { href, "aria-label": label, className: topBarIconButtonClass(), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: TOPBAR_GLYPH_SIZE, className: "text-current" }),
+    /* @__PURE__ */ jsxRuntime.jsx(TopBarTooltip, { title: label, description })
   ] });
 }
-var SPEC_OVERLAY_ACCESS_CACHE_KEY = "politogy_spec_overlay_access";
-function readSpecOverlayAccessCache() {
-  if (typeof window === "undefined") return null;
-  try {
-    const raw = window.sessionStorage.getItem(SPEC_OVERLAY_ACCESS_CACHE_KEY);
-    if (!raw) return null;
-    const parsed = JSON.parse(raw);
-    if (typeof parsed?.allowed === "boolean") return parsed;
-  } catch {
-  }
-  return null;
-}
-function writeSpecOverlayAccessCache(access) {
-  if (typeof window === "undefined") return;
-  try {
-    window.sessionStorage.setItem(SPEC_OVERLAY_ACCESS_CACHE_KEY, JSON.stringify(access));
-  } catch {
-  }
-}
-var locationChangeListeners = /* @__PURE__ */ new Set();
-var historyPatched = false;
-function ensureHistoryPatched() {
-  if (historyPatched || typeof window === "undefined") return;
-  historyPatched = true;
-  const notify = () => locationChangeListeners.forEach((fn) => fn());
-  const originalPushState = window.history.pushState.bind(window.history);
-  const originalReplaceState = window.history.replaceState.bind(window.history);
-  window.history.pushState = (...args) => {
-    originalPushState(...args);
-    notify();
-  };
-  window.history.replaceState = (...args) => {
-    originalReplaceState(...args);
-    notify();
-  };
-  window.addEventListener("popstate", notify);
-}
-function useLocationHref() {
-  const [href, setHref] = react.useState(
-    () => typeof window === "undefined" ? "" : window.location.href
-  );
-  react.useEffect(() => {
-    ensureHistoryPatched();
-    const onChange = () => setHref(window.location.href);
-    locationChangeListeners.add(onChange);
-    return () => {
-      locationChangeListeners.delete(onChange);
-    };
-  }, []);
-  return href;
-}
-function specOverlayFetchJson(path) {
-  return fetch(`${SPECS_ORIGIN}${path}`, { credentials: "include", signal: AbortSignal.timeout(1e4) }).then((res) => {
-    if (!res.ok) throw new Error(`spec overlay ${path}: ${res.status}`);
-    return res.json();
-  });
-}
-function isAutomatedCaptureSession() {
-  return typeof navigator !== "undefined" && navigator.webdriver === true;
-}
-function currentChromeTheme() {
-  const root = document.documentElement;
-  if (root.classList.contains("dark") || root.getAttribute("data-theme") === "dark") return "dark";
-  if (root.classList.contains("light") || root.getAttribute("data-theme") === "light") return "light";
-  return "light";
-}
-var SPEC_OVERLAY_ROOT_ATTR = "data-spec-overlay-root";
-async function captureMyView(status, orgId, orgName) {
-  const { domToCanvas } = await import('modern-screenshot');
-  const w = window.innerWidth;
-  const h = window.innerHeight;
-  const theme = currentChromeTheme();
-  const bg = getComputedStyle(document.body).backgroundColor || (theme === "dark" ? "#0b0b0c" : "#ffffff");
-  const full = await domToCanvas(document.body, {
-    width: w,
-    height: h,
-    scale: 1,
-    backgroundColor: bg,
-    // Cross-origin images that refuse CORS render blank instead of failing.
-    fetch: { requestInit: { mode: "cors", credentials: "omit" }, placeholderImage: "" },
-    // Drop the Spec drawer and everything fixed (sidebar, toasts, popovers):
-    // the design is the page body only, so chrome would only add noise.
-    filter: (node) => !(node instanceof Element) || !node.hasAttribute(SPEC_OVERLAY_ROOT_ATTR) && getComputedStyle(node).position !== "fixed",
-    style: { transform: `translate(${-window.scrollX}px, ${-window.scrollY}px)` }
-  });
-  const el = (status.live_selector ? document.querySelector(status.live_selector) : null) ?? document.querySelector("[data-shell-content]");
-  let region = { x: 0, y: 0, width: w, height: h };
-  if (el) {
-    const r = el.getBoundingClientRect();
-    const x = Math.max(0, Math.round(r.left));
-    const y = Math.max(0, Math.round(r.top));
-    region = { x, y, width: Math.min(w - x, Math.round(r.width)), height: Math.min(h - y, Math.round(r.height)) };
-  }
-  const out = document.createElement("canvas");
-  out.width = region.width;
-  out.height = region.height;
-  const ctx = out.getContext("2d");
-  if (!ctx) throw new Error("page raster failed");
-  ctx.drawImage(full, region.x, region.y, region.width, region.height, 0, 0, region.width, region.height);
-  const blob = await new Promise((resolve) => out.toBlob(resolve, "image/png"));
-  if (!blob) throw new Error("page raster failed");
-  const form = new FormData();
-  form.append("image", blob, "live.png");
-  form.append(
-    "meta",
-    JSON.stringify({ url: window.location.href, theme, org_id: orgId ?? null, org_name: orgName ?? null, crop: null })
+function OrganizationSettingsAction({ href }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TopBarLinkAction,
+    {
+      label: "Organization settings",
+      description: "Users, Brand Kit, modes and billing for this organization.",
+      href,
+      icon: lu.LuSettings
+    }
   );
-  const res = await fetch(status.capture_url ?? `${SPECS_ORIGIN}/api/overlay/capture`, {
-    method: "POST",
-    credentials: "include",
-    headers: { "X-Spec-Capture": "1" },
-    body: form,
-    signal: AbortSignal.timeout(1e4)
-  });
-  if (!res.ok) throw new Error(`capture ${res.status}: ${(await res.text()).slice(0, 160)}`);
 }
-function SpecCaptureLoading() {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-spec-capture-loading": "", role: "status", "aria-live": "polite", className: "flex-1 overflow-hidden px-4 py-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 flex items-center gap-3 text-sm text-[color:var(--foreground)]", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "span",
-        {
-          "aria-hidden": "true",
-          className: "inline-block h-5 w-5 animate-spin rounded-full border-2 border-[color:var(--line)] border-t-[color:var(--color-accent)] motion-reduce:animate-none"
-        }
-      ),
-      "Capturing your view and comparing\u2026"
-    ] }),
-    ["Live \u2014 your view", "Diff"].map((label) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-1 text-xs font-semibold uppercase tracking-wide text-[color:var(--muted)]", children: label }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": "true", className: "h-40 w-full animate-pulse rounded border border-[color:var(--line)] bg-[color:var(--panel)] motion-reduce:animate-none" })
-    ] }, label))
-  ] });
-}
-function specOverlayStatusPath() {
-  return `/api/overlay/status?url=${encodeURIComponent(window.location.href)}&theme=${currentChromeTheme()}`;
-}
-function SpecOverlayAction({ orgId, orgName } = {}) {
-  const [access, setAccess] = react.useState(() => readSpecOverlayAccessCache());
-  const [status, setStatus] = react.useState(null);
-  const [open, setOpen] = react.useState(false);
-  const [capture, setCapture] = react.useState({ state: "idle" });
-  const [frameKey, setFrameKey] = react.useState(0);
-  const [copied, setCopied] = react.useState("idle");
-  const href = useLocationHref();
-  const automated = isAutomatedCaptureSession();
-  react.useEffect(() => {
-    if (access || automated) return;
-    let cancelled = false;
-    specOverlayFetchJson("/api/overlay/access").then((data) => {
-      if (cancelled) return;
-      const next = data && typeof data.allowed === "boolean" ? data : { allowed: false };
-      setAccess(next);
-      writeSpecOverlayAccessCache(next);
-    }).catch(() => {
-      if (cancelled) return;
-      const next = { allowed: false };
-      setAccess(next);
-      writeSpecOverlayAccessCache(next);
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [access]);
-  react.useEffect(() => {
-    if (automated || !access?.allowed || typeof window === "undefined") return;
-    const timer = window.setTimeout(() => {
-      specOverlayFetchJson(specOverlayStatusPath()).then((data) => setStatus(data)).catch(() => setStatus(null));
-    }, 300);
-    return () => window.clearTimeout(timer);
-  }, [access?.allowed, href, orgId]);
-  const captureRun = react.useRef(0);
-  const accessRef = react.useRef(access);
-  accessRef.current = access;
-  const runCapture = async (s) => {
-    const run = ++captureRun.current;
-    const before = s.live_source === "viewer" ? s.finished_at : null;
-    setCapture({ state: "busy" });
-    try {
-      await new Promise((r) => setTimeout(r, 150));
-      await captureMyView(s, orgId, orgName);
-      for (let i = 0; i < 45; i++) {
-        await new Promise((r) => setTimeout(r, 3e3));
-        if (run !== captureRun.current) return;
-        if (!accessRef.current?.allowed) {
-          setCapture({ state: "idle" });
-          return;
-        }
-        const next = await specOverlayFetchJson(specOverlayStatusPath()).catch(() => null);
-        if (next && next.matched && next.live_source === "viewer" && next.finished_at !== before) {
-          setStatus(next);
-          setFrameKey((k) => k + 1);
-          setCapture({ state: "idle" });
-          return;
-        }
-      }
-      setCapture({ state: "error", message: "Compare did not finish in 2 min." });
-    } catch (e) {
-      if (run === captureRun.current) setCapture({ state: "error", message: e instanceof Error ? e.message : String(e) });
+function MyProfileAction({ href }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TopBarLinkAction,
+    {
+      label: "My profile",
+      description: "Your photo, organizations, security and notifications.",
+      href,
+      icon: lu.LuCircleUser
     }
-  };
-  react.useEffect(() => {
-    if (automated || !open || !status || !status.matched) return;
-    void runCapture(status);
-    return () => {
-      captureRun.current++;
-    };
-  }, [open, status && status.matched ? status.target_id : null]);
-  if (automated || !access?.allowed) return null;
-  const hasScore = status && status.matched && typeof status.mismatch_pct === "number";
-  const badgeLabel = hasScore ? `${Math.round(status.mismatch_pct)}%` : status ? "\u2014" : void 0;
-  const badgeTone = hasScore ? status && status.matched && status.passed ? "default" : "danger" : "default";
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
-      {
-        type: "button",
-        "aria-label": "Spec",
-        "aria-expanded": open,
-        className: topBarIconButtonClass(badgeTone),
-        onClick: () => setOpen(true),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(LayoutGlyph, { size: TOPBAR_GLYPH_SIZE, className: "text-current" }),
-          badgeLabel ? /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: [
-                "absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-normal leading-none text-[#FFFFFF]",
-                hasScore ? status && status.matched && status.passed ? "bg-[color:var(--chrome-success,#2f855a)]" : "bg-[color:var(--chrome-danger)]" : "bg-[color:var(--muted)]"
-              ].join(" "),
-              children: badgeLabel
-            }
-          ) : null,
-          !open ? /* @__PURE__ */ jsxRuntime.jsx(
-            TopBarTooltip,
-            {
-              title: "Spec",
-              description: "Spec design + visual regression for this page."
-            }
-          ) : null
-        ]
-      }
-    ),
-    open && typeof document !== "undefined" ? reactDom.createPortal(
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: "fixed inset-0 z-50 flex justify-end bg-black/40",
-          ...{ [SPEC_OVERLAY_ROOT_ATTR]: "" },
-          role: "dialog",
-          "aria-modal": "true",
-          "aria-label": "Spec overlay",
-          onMouseDown: (e) => {
-            if (e.target === e.currentTarget) setOpen(false);
-          },
-          onKeyDown: (e) => {
-            if (e.key === "Escape") setOpen(false);
-          },
-          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full w-full max-w-[480px] flex-col border-l border-[color:var(--line)] bg-[color:var(--panel-elevated)] shadow-[var(--shadow-soft)]", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-[color:var(--line)] px-4 py-3", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("h2", { className: "truncate text-sm font-bold tracking-[-0.01em] text-[color:var(--foreground)]", children: [
-                "Spec",
-                status && status.matched ? `: ${status.spec_title}` : ""
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  type: "button",
-                  "aria-label": "Close",
-                  onClick: () => setOpen(false),
-                  className: "rounded-full p-1 text-[color:var(--muted)] hover:bg-[color:var(--panel)] hover:text-[color:var(--foreground)]",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(CloseGlyph, { size: 16 })
-                }
-              )
-            ] }),
-            status && status.matched ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 border-b border-[color:var(--line)] px-4 py-2 text-xs font-semibold", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "a",
-                  {
-                    href: status.spec_url,
-                    target: "_blank",
-                    rel: "noreferrer",
-                    className: "text-[color:var(--color-accent-fg,var(--color-accent))] hover:underline",
-                    children: "Open spec \u2197"
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "a",
-                  {
-                    href: status.compare_url,
-                    target: "_blank",
-                    rel: "noreferrer",
-                    className: "text-[color:var(--color-accent-fg,var(--color-accent))] hover:underline",
-                    children: "Compare tab \u2197"
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    type: "button",
-                    disabled: capture.state === "busy",
-                    onClick: () => void runCapture(status),
-                    className: "ml-auto rounded-md border border-[color:var(--line)] px-2 py-1 text-[color:var(--foreground)] hover:bg-[color:var(--panel)] disabled:opacity-60",
-                    title: "Your view is captured when the drawer opens. Recapture after changing the page.",
-                    children: capture.state === "busy" ? "Capturing\u2026" : "Recapture"
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    type: "button",
-                    "data-spec-copy-prompt": "",
-                    disabled: capture.state === "busy" || !status.prompt,
-                    onClick: () => {
-                      const text = status.prompt;
-                      if (!text) return;
-                      navigator.clipboard.writeText(text).then(() => setCopied("copied")).catch(() => setCopied("failed")).finally(() => window.setTimeout(() => setCopied("idle"), 2e3));
-                    },
-                    className: "rounded-md border border-[color:var(--line)] px-2 py-1 text-[color:var(--foreground)] hover:bg-[color:var(--panel)] disabled:opacity-60",
-                    title: "Copy a repair prompt for an AI agent: spec, score, image links, top mismatched regions and instructions.",
-                    children: copied === "copied" ? "Copied \u2713" : copied === "failed" ? "Copy failed" : "Copy prompt"
-                  }
-                )
-              ] }),
-              status.live_size && status.design_size && capture.state !== "busy" ? /* @__PURE__ */ jsxRuntime.jsxs(
-                "p",
-                {
-                  "data-spec-sizes": "",
-                  className: [
-                    "border-b border-[color:var(--line)] px-4 py-1.5 text-xs",
-                    status.live_size.width === status.design_size.width && status.live_size.height === status.design_size.height ? "text-[color:var(--muted)]" : "font-semibold text-[color:var(--chrome-danger)]"
-                  ].join(" "),
-                  children: [
-                    "Live ",
-                    status.live_size.width,
-                    "\xD7",
-                    status.live_size.height,
-                    " \xB7 Design ",
-                    status.design_size.width,
-                    "\xD7",
-                    status.design_size.height,
-                    status.live_size.width === status.design_size.width && status.live_size.height === status.design_size.height ? " \xB7 sizes match" : " \xB7 SIZE MISMATCH"
-                  ]
-                }
-              ) : null,
-              capture.state === "error" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "border-b border-[color:var(--line)] px-4 py-2 text-xs text-[color:var(--chrome-danger)]", children: capture.message }) : null,
-              capture.state === "busy" ? /* @__PURE__ */ jsxRuntime.jsx(SpecCaptureLoading, {}) : /* @__PURE__ */ jsxRuntime.jsx(
-                "iframe",
-                {
-                  src: status.overlay_url,
-                  title: "Spec overlay",
-                  className: "h-full w-full flex-1 border-0"
-                },
-                frameKey
-              )
-            ] }) : status && !status.matched ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 text-sm text-[color:var(--muted)]", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("p", { children: "No compare target covers this page." }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "a",
-                {
-                  href: status.search_url,
-                  target: "_blank",
-                  rel: "noreferrer",
-                  className: "mt-2 inline-block font-semibold text-[color:var(--color-accent-fg,var(--color-accent))] hover:underline",
-                  children: "Search specs \u2197"
-                }
-              )
-            ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsx(ValueSkeleton, { className: "h-4 w-full" }) })
-          ] })
-        }
-      ),
-      document.body
-    ) : null
-  ] });
-}
-function CloseGlyph({ size = 16, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", className, "aria-hidden": true, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-  ] });
+  );
 }
-var NAV_DISPLAY_OPTIONS = [
-  { value: "menu", label: "Sub Menu" },
-  { 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());
@@ -2455,13 +1880,14 @@ function standardPolitogyNav(opts) {
     });
   };
   const accountRows = () => [
-    { kind: "section", label: "Account" },
+    { kind: "section", label: "Account", railHidden: true },
     // My Profile moved to the Politogy ID account app (auth.politogyvrm.com)
     // with the retirement of app.politogyvrm.com.
-    { label: "My profile", icon: icon("circleUser"), href: withOrg(`${AUTH_ORIGIN}my-profile`) },
+    { label: "My profile", icon: icon("circleUser"), href: withOrg(`${AUTH_ORIGIN}my-profile`), railHidden: true },
     {
       label: "Organization settings",
       icon: icon("settings"),
+      railHidden: true,
       // Organization settings moved to the standalone Settings app
       // (settings.politogyvrm.com, Specs/Organization-Settings v12).
       href: withOrg(`${SETTINGS_ORIGIN}organization-settings`),
@@ -2985,6 +2411,8 @@ function NavSidebar({
                   ] }) : null,
                   filterOrgs(org.organizations, orgFilter).map((o) => {
                     const selected = o.id === org.id;
+                    const iconSrc = resolveOrgLogoUrl(o.iconUrl);
+                    const logoSrc = iconSrc ? void 0 : resolveOrgLogoUrl(o.logoUrl);
                     return /* @__PURE__ */ jsxRuntime.jsxs(
                       "button",
                       {
@@ -3003,12 +2431,13 @@ function NavSidebar({
                           /* @__PURE__ */ jsxRuntime.jsx(
                             "span",
                             {
-                              style: { backgroundColor: o.brandColor || ORG_PILL_DEFAULT },
-                              className: "flex h-6 w-6 shrink-0 items-center justify-center overflow-hidden rounded-full text-[10px] font-bold text-[#FFFFFF]",
-                              children: resolveOrgLogoUrl(o.logoUrl) ? /* @__PURE__ */ jsxRuntime.jsx(
+                              "data-org-option-mark": iconSrc ? "icon" : logoSrc ? "logo" : "initials",
+                              style: iconSrc ? void 0 : { backgroundColor: o.brandColor || ORG_PILL_DEFAULT },
+                              className: `flex h-6 w-6 shrink-0 items-center justify-center overflow-hidden text-[10px] font-bold text-[#FFFFFF] ${iconSrc ? "rounded-[4px] bg-[#FFFFFF]" : "rounded-full"}`,
+                              children: iconSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: iconSrc, alt: "", className: "max-h-full max-w-full object-contain" }) : logoSrc ? /* @__PURE__ */ jsxRuntime.jsx(
                                 "img",
                                 {
-                                  src: resolveOrgLogoUrl(o.logoUrl),
+                                  src: logoSrc,
                                   alt: "",
                                   className: "h-full w-full object-cover"
                                 }
@@ -3105,7 +2534,7 @@ function NavSidebar({
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col overflow-y-auto px-[10px] py-3", children: /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: "flex flex-col gap-0.5", children: [
             nav.groupLabel ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: `${NAV_EYEBROW_CLASS} px-2 pb-1.5 pt-1 ${rc("max-md:hidden")}`, children: nav.groupLabel }) : null,
-            nav.items.map((item, idx) => {
+            nav.items.filter((item) => !item.railHidden).map((item, idx) => {
               if (item.kind === "section") {
                 return /* @__PURE__ */ jsxRuntime.jsx(
                   NavSectionRow,
@@ -5072,6 +4501,7 @@ function FrameBody({
             name: activeCoreOrg.name,
             id: activeCoreOrg.id,
             logoUrl: activeCoreOrg.logoUrl,
+            iconUrl: activeCoreOrg.iconUrl ?? null,
             brandColor: activeCoreOrg.brandColor,
             organizations: coreOrgs,
             onSwitch: chrome?.setOrgId
@@ -5175,6 +4605,7 @@ function TokenChromeStateProvider({
       id: o.id,
       name: o.name,
       logoUrl: o.logoUrl,
+      iconUrl: o.iconUrl ?? null,
       brandColor: o.brandColor,
       role: o.role,
       rawRole: o.rawRole ?? null
@@ -5435,6 +4866,7 @@ function ChromeStateProvider({
           id: o.id,
           name: o.name,
           logoUrl: o.logoUrl,
+          iconUrl: o.iconUrl ?? null,
           brandColor: o.brandColor,
           role: o.role,
           rawRole: o.rawRole ?? null
@@ -5452,6 +4884,7 @@ function ChromeStateProvider({
         id: o.id,
         name: o.name,
         logoUrl: o.logoUrl,
+        iconUrl: o.iconUrl ?? null,
         brandColor: o.brandColor,
         role: o.role,
         rawRole: o.rawRole ?? null
@@ -5644,26 +5077,15 @@ function ChromeTopBarActions() {
   const state = useChromeState();
   if (!state) return null;
   const settledOrgId = state.orgsLoading ? null : state.orgId;
+  const tail = orgIdTail(state.orgId);
+  const orgQuery = tail ? `?${ORG_ID_QUERY_PARAM}=${tail}` : "";
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      TopBarWidgetSlot,
-      {
-        title: "DevNotes",
-        description: "Capture bugs and notes, filed straight to Forge.",
-        children: /* @__PURE__ */ jsxRuntime.jsx(ChromeDevNotesMenu, {})
-      }
-    ),
     /* @__PURE__ */ jsxRuntime.jsx(FuelAction, { orgId: settledOrgId }),
-    /* @__PURE__ */ jsxRuntime.jsx(SpecOverlayAction, { orgId: state.orgId, orgName: state.orgs.find((o) => o.id === state.orgId)?.name ?? null }),
     /* @__PURE__ */ jsxRuntime.jsx(NotificationsAction, { orgId: settledOrgId }),
-    /* @__PURE__ */ jsxRuntime.jsx(SupportAction, { orgId: state.orgId, orgs: state.orgs.length ? state.orgs : void 0 })
+    /* @__PURE__ */ jsxRuntime.jsx(OrganizationSettingsAction, { href: `${settingsBaseUrl()}/organization-settings${orgQuery}` }),
+    /* @__PURE__ */ jsxRuntime.jsx(MyProfileAction, { href: `${authBaseUrl()}/my-profile${orgQuery}` })
   ] });
 }
-function ChromeDevNotesMenu() {
-  const { ready, openTasks, activate } = react.useContext(DevNotesTasksContext);
-  if (!ready) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "contents" }, onPointerDownCapture: activate, onFocusCapture: activate, onKeyDownCapture: activate, children: /* @__PURE__ */ jsxRuntime.jsx(devnotes.DevNotesMenu, { position: "top-right", icon: lu.LuNotebookPen, onViewTasks: openTasks }) });
-}
 function useIsSuperAdmin() {
   const state = useChromeState();
   return (state?.orgs ?? []).some((o) => /super/i.test(o.rawRole ?? ""));
@@ -5713,11 +5135,13 @@ function useChromeUserMenu({
     organizationSettingsHref: `${settings}/organization-settings${orgSuffix}`,
     roles: (state?.orgs ?? []).filter((o) => o.rawRole || o.role).map((o) => ({ role: o.rawRole ?? o.role, orgName: o.name })),
     accounts: [{ id: userId, name: userName, email, avatarUrl: null, active: true }],
-    addAccountHref: `${auth}/my-profile#accounts`,
+    addAccountHref: `${auth}/my-profile#accounts`
     // No theme control: the product is light only (Reference/UI-Platform
     // "Theme — light only"; shell 0.73.0 stopped applying dark). The account
     // menu rendered an "Appearance" radio with one option until 0.77.0.
-    navDisplay: state ? { value: state.navDisplay, onChange: state.setNavDisplay } : void 0
+    // Ben 2026-11-04: no Navigation display option in the account menu. The
+    // preference itself (state.navDisplay, its storage and the frame's use of
+    // it) is unchanged; only the menu control is gone.
   };
 }
 var MODE_DEFS = [