@the-portland-company/shell 0.28.2 → 0.30.0

package/dist/native.d.cts

@@ -3,6 +3,10 @@ import { ReactNode, ComponentType, CSSProperties } from 'react';
 import { T as TopBarIconSlot } from './topbarIconSlot-FunwEKO9.cjs';
 import { ThemePreference as ThemePreference$1 } from './theme-preference.cjs';
 
+type NavIconLike = ComponentType<{
+    size?: number;
+    className?: string;
+}>;
 declare function topBarIconButtonClass(tone?: 'default' | 'warning' | 'danger'): string;
 /** The shared count badge — one definition, used by every slot. */
 declare function TopBarCountBadge({ count }: {
@@ -117,6 +121,29 @@ declare function useChromeOrgs(): {
     loading: boolean;
     error: boolean;
 };
+/**
+ * A top-bar popover: the shared circular trigger + a right-aligned panel.
+ * Closes on outside click / Escape. Purely presentational.
+ *
+ * EXPORTED so an app with a richer panel than the stock actions can render it
+ * inside the SHARED chrome — same 32px trigger, same tooltip, same badge, same
+ * panel surface and arrow — instead of hand-rolling a trigger and drifting.
+ * This is the enabling step for folding VRM's Fuel breakdown, import-progress,
+ * alerts and reply-feed panels into the shared cluster one at a time, without
+ * dropping capability (shell-nav-handoff §4; UI-Platform forbids migrating an
+ * app to a rendering that loses an element it already ships).
+ */
+declare function TopBarPopover({ label, description, slot, fallbackIcon, badge, tone, onOpen, children, panelClassName, }: {
+    label: string;
+    description?: string;
+    slot?: TopBarIconSlot;
+    fallbackIcon: NavIconLike;
+    badge?: number;
+    tone?: 'default' | 'warning' | 'danger';
+    onOpen?: () => void;
+    children: ReactNode;
+    panelClassName?: string;
+}): react_jsx_runtime.JSX.Element;
 declare function FuelAction({ orgId }: {
     orgId: string | null;
 }): react_jsx_runtime.JSX.Element;
@@ -491,4 +518,4 @@ type NavAppShellProps = {
 };
 declare function NavAppShell({ sidebar, topBar, betaBanner, contentWrapper, children, }: NavAppShellProps): react_jsx_runtime.JSX.Element;
 
-export { type ChromeMe, type ChromeNotificationAlert, type ChromeNotificationReply, type ChromeNotificationsPayload, type ChromeOrgSummary, type CommunicationsFuelStatus, FuelAction, type FuelChannelStatus, NavAppShell, type NavAppShellProps, NavBetaBanner, type NavBetaBannerProps, type NavBrand, type NavBreadcrumb, type NavChromeFetcher, NavChromeProvider, NavDisplayAction, type NavDisplayMode, type NavFooter, type NavFooterLink, type NavIcon, type NavItem, type NavLinkComponent, type NavLinkProps, type NavLinkedAccount, type NavMode, type NavModeOption, type NavOrg, type NavOrgOption, type NavRoleBadge, NavSidebar, type NavSidebarProps, type NavTab, NavTabStrip, type NavTabStripProps, NavThemeControl, NavTopBar, type NavTopBarAction, type NavTopBarProps, type NavUser, type NavUserMenu, NotificationsAction, type StandardNavIconKey, type StandardNavOptions, SupportAction, type ThemePreference, TopBarCountBadge, TopBarPanelArrow, TopBarTooltip, TopBarWidgetSlot, envChipClasses, isNavItemActive, standardPolitogyNav, topBarIconButtonClass, useChromeMe, useChromeOrgs, useNavChromeFetcher, useThemePreference };
+export { type ChromeMe, type ChromeNotificationAlert, type ChromeNotificationReply, type ChromeNotificationsPayload, type ChromeOrgSummary, type CommunicationsFuelStatus, FuelAction, type FuelChannelStatus, NavAppShell, type NavAppShellProps, NavBetaBanner, type NavBetaBannerProps, type NavBrand, type NavBreadcrumb, type NavChromeFetcher, NavChromeProvider, NavDisplayAction, type NavDisplayMode, type NavFooter, type NavFooterLink, type NavIcon, type NavItem, type NavLinkComponent, type NavLinkProps, type NavLinkedAccount, type NavMode, type NavModeOption, type NavOrg, type NavOrgOption, type NavRoleBadge, NavSidebar, type NavSidebarProps, type NavTab, NavTabStrip, type NavTabStripProps, NavThemeControl, NavTopBar, type NavTopBarAction, type NavTopBarProps, type NavUser, type NavUserMenu, NotificationsAction, type StandardNavIconKey, type StandardNavOptions, SupportAction, type ThemePreference, TopBarCountBadge, TopBarPanelArrow, TopBarPopover, TopBarTooltip, TopBarWidgetSlot, envChipClasses, isNavItemActive, standardPolitogyNav, topBarIconButtonClass, useChromeMe, useChromeOrgs, useNavChromeFetcher, useThemePreference };

package/dist/native.d.ts

@@ -3,6 +3,10 @@ import { ReactNode, ComponentType, CSSProperties } from 'react';
 import { T as TopBarIconSlot } from './topbarIconSlot-FunwEKO9.js';
 import { ThemePreference as ThemePreference$1 } from './theme-preference.js';
 
+type NavIconLike = ComponentType<{
+    size?: number;
+    className?: string;
+}>;
 declare function topBarIconButtonClass(tone?: 'default' | 'warning' | 'danger'): string;
 /** The shared count badge — one definition, used by every slot. */
 declare function TopBarCountBadge({ count }: {
@@ -117,6 +121,29 @@ declare function useChromeOrgs(): {
     loading: boolean;
     error: boolean;
 };
+/**
+ * A top-bar popover: the shared circular trigger + a right-aligned panel.
+ * Closes on outside click / Escape. Purely presentational.
+ *
+ * EXPORTED so an app with a richer panel than the stock actions can render it
+ * inside the SHARED chrome — same 32px trigger, same tooltip, same badge, same
+ * panel surface and arrow — instead of hand-rolling a trigger and drifting.
+ * This is the enabling step for folding VRM's Fuel breakdown, import-progress,
+ * alerts and reply-feed panels into the shared cluster one at a time, without
+ * dropping capability (shell-nav-handoff §4; UI-Platform forbids migrating an
+ * app to a rendering that loses an element it already ships).
+ */
+declare function TopBarPopover({ label, description, slot, fallbackIcon, badge, tone, onOpen, children, panelClassName, }: {
+    label: string;
+    description?: string;
+    slot?: TopBarIconSlot;
+    fallbackIcon: NavIconLike;
+    badge?: number;
+    tone?: 'default' | 'warning' | 'danger';
+    onOpen?: () => void;
+    children: ReactNode;
+    panelClassName?: string;
+}): react_jsx_runtime.JSX.Element;
 declare function FuelAction({ orgId }: {
     orgId: string | null;
 }): react_jsx_runtime.JSX.Element;
@@ -491,4 +518,4 @@ type NavAppShellProps = {
 };
 declare function NavAppShell({ sidebar, topBar, betaBanner, contentWrapper, children, }: NavAppShellProps): react_jsx_runtime.JSX.Element;
 
-export { type ChromeMe, type ChromeNotificationAlert, type ChromeNotificationReply, type ChromeNotificationsPayload, type ChromeOrgSummary, type CommunicationsFuelStatus, FuelAction, type FuelChannelStatus, NavAppShell, type NavAppShellProps, NavBetaBanner, type NavBetaBannerProps, type NavBrand, type NavBreadcrumb, type NavChromeFetcher, NavChromeProvider, NavDisplayAction, type NavDisplayMode, type NavFooter, type NavFooterLink, type NavIcon, type NavItem, type NavLinkComponent, type NavLinkProps, type NavLinkedAccount, type NavMode, type NavModeOption, type NavOrg, type NavOrgOption, type NavRoleBadge, NavSidebar, type NavSidebarProps, type NavTab, NavTabStrip, type NavTabStripProps, NavThemeControl, NavTopBar, type NavTopBarAction, type NavTopBarProps, type NavUser, type NavUserMenu, NotificationsAction, type StandardNavIconKey, type StandardNavOptions, SupportAction, type ThemePreference, TopBarCountBadge, TopBarPanelArrow, TopBarTooltip, TopBarWidgetSlot, envChipClasses, isNavItemActive, standardPolitogyNav, topBarIconButtonClass, useChromeMe, useChromeOrgs, useNavChromeFetcher, useThemePreference };
+export { type ChromeMe, type ChromeNotificationAlert, type ChromeNotificationReply, type ChromeNotificationsPayload, type ChromeOrgSummary, type CommunicationsFuelStatus, FuelAction, type FuelChannelStatus, NavAppShell, type NavAppShellProps, NavBetaBanner, type NavBetaBannerProps, type NavBrand, type NavBreadcrumb, type NavChromeFetcher, NavChromeProvider, NavDisplayAction, type NavDisplayMode, type NavFooter, type NavFooterLink, type NavIcon, type NavItem, type NavLinkComponent, type NavLinkProps, type NavLinkedAccount, type NavMode, type NavModeOption, type NavOrg, type NavOrgOption, type NavRoleBadge, NavSidebar, type NavSidebarProps, type NavTab, NavTabStrip, type NavTabStripProps, NavThemeControl, NavTopBar, type NavTopBarAction, type NavTopBarProps, type NavUser, type NavUserMenu, NotificationsAction, type StandardNavIconKey, type StandardNavOptions, SupportAction, type ThemePreference, TopBarCountBadge, TopBarPanelArrow, TopBarPopover, TopBarTooltip, TopBarWidgetSlot, envChipClasses, isNavItemActive, standardPolitogyNav, topBarIconButtonClass, useChromeMe, useChromeOrgs, useNavChromeFetcher, useThemePreference };

package/dist/native.js

@@ -1,5 +1,5 @@
 "use client";
-export { FuelAction, NavAppShell, NavBetaBanner, NavChromeProvider, NavDisplayAction, NavSidebar, NavTabStrip, NavThemeControl, NavTopBar, NotificationsAction, SupportAction, TopBarCountBadge, TopBarPanelArrow, TopBarTooltip, TopBarWidgetSlot, envChipClasses, isNavItemActive, standardPolitogyNav, topBarIconButtonClass, useChromeMe, useChromeOrgs, useNavChromeFetcher, useThemePreference } from './chunk-I3DWBWY6.js';
+export { FuelAction, NavAppShell, NavBetaBanner, NavChromeProvider, NavDisplayAction, NavSidebar, NavTabStrip, NavThemeControl, NavTopBar, NotificationsAction, SupportAction, TopBarCountBadge, TopBarPanelArrow, TopBarPopover, TopBarTooltip, TopBarWidgetSlot, envChipClasses, isNavItemActive, standardPolitogyNav, topBarIconButtonClass, useChromeMe, useChromeOrgs, useNavChromeFetcher, useThemePreference } from './chunk-QL5BWYN5.js';
 import './chunk-NV6WHTEZ.js';
 import './chunk-LL7RCJQN.js';
 //# sourceMappingURL=native.js.map

package/dist/runtime-tokens.cjs

@@ -0,0 +1,19 @@
+'use strict';
+
+// src/runtime-tokens.ts
+var SPECS_TOKENS_HREF = "https://specs.politogyvrm.com/api/tokens?format=css";
+function ensureRuntimeBrandTokens(href = SPECS_TOKENS_HREF) {
+  if (typeof document === "undefined") return;
+  const existing = document.querySelector(
+    `link[rel="stylesheet"][href*="api/tokens"]`
+  );
+  const link = existing ?? document.createElement("link");
+  link.rel = "stylesheet";
+  if (!existing) link.href = href;
+  document.head.appendChild(link);
+}
+
+exports.SPECS_TOKENS_HREF = SPECS_TOKENS_HREF;
+exports.ensureRuntimeBrandTokens = ensureRuntimeBrandTokens;
+//# sourceMappingURL=runtime-tokens.cjs.map
+//# sourceMappingURL=runtime-tokens.cjs.map

package/dist/runtime-tokens.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/runtime-tokens.ts"],"names":[],"mappings":";;;AAaO,IAAM,iBAAA,GACX;AAEK,SAAS,wBAAA,CAAyB,OAAe,iBAAA,EAAyB;AAC/E,EAAA,IAAI,OAAO,aAAa,WAAA,EAAa;AACrC,EAAA,MAAM,WAAW,QAAA,CAAS,aAAA;AAAA,IACxB,CAAA,0CAAA;AAAA,GACF;AACA,EAAA,MAAM,IAAA,GAAO,QAAA,IAAY,QAAA,CAAS,aAAA,CAAc,MAAM,CAAA;AACtD,EAAA,IAAA,CAAK,GAAA,GAAM,YAAA;AACX,EAAA,IAAI,CAAC,QAAA,EAAU,IAAA,CAAK,IAAA,GAAO,IAAA;AAG3B,EAAA,QAAA,CAAS,IAAA,CAAK,YAAY,IAAI,CAAA;AAChC","file":"runtime-tokens.cjs","sourcesContent":["// Runtime Brand tokens — the loader every app shares.\n//\n// Global-Rules (\"Consume Brand tokens at RUNTIME, never baked in at build time\")\n// requires each app to load specs.politogyvrm.com/api/tokens?format=css so a\n// Brand edit goes live without a redeploy. A static <link> in <head> is not\n// enough on its own: the app's own bundled chrome.css can be injected AFTER it\n// and win the cascade, which is exactly what happened on VRM — it linked the\n// runtime sheet yet still resolved --color-accent from the build-time snapshot.\n//\n// Appending the link to the END of <head> at startup makes the runtime sheet the\n// last stylesheet, so the live Brand values win every time. Idempotent: an\n// existing runtime link is MOVED to the end rather than duplicated.\n\nexport const SPECS_TOKENS_HREF =\n  'https://specs.politogyvrm.com/api/tokens?format=css'\n\nexport function ensureRuntimeBrandTokens(href: string = SPECS_TOKENS_HREF): void {\n  if (typeof document === 'undefined') return\n  const existing = document.querySelector<HTMLLinkElement>(\n    `link[rel=\"stylesheet\"][href*=\"api/tokens\"]`,\n  )\n  const link = existing ?? document.createElement('link')\n  link.rel = 'stylesheet'\n  if (!existing) link.href = href\n  // Re-appending an already-present node moves it; the browser does not refetch\n  // (and the response is ETag + max-age=60 cached regardless).\n  document.head.appendChild(link)\n}\n"]}

package/dist/runtime-tokens.d.cts

@@ -0,0 +1,4 @@
+declare const SPECS_TOKENS_HREF = "https://specs.politogyvrm.com/api/tokens?format=css";
+declare function ensureRuntimeBrandTokens(href?: string): void;
+
+export { SPECS_TOKENS_HREF, ensureRuntimeBrandTokens };

package/dist/runtime-tokens.d.ts

@@ -0,0 +1,4 @@
+declare const SPECS_TOKENS_HREF = "https://specs.politogyvrm.com/api/tokens?format=css";
+declare function ensureRuntimeBrandTokens(href?: string): void;
+
+export { SPECS_TOKENS_HREF, ensureRuntimeBrandTokens };

package/dist/runtime-tokens.js

@@ -0,0 +1,16 @@
+// src/runtime-tokens.ts
+var SPECS_TOKENS_HREF = "https://specs.politogyvrm.com/api/tokens?format=css";
+function ensureRuntimeBrandTokens(href = SPECS_TOKENS_HREF) {
+  if (typeof document === "undefined") return;
+  const existing = document.querySelector(
+    `link[rel="stylesheet"][href*="api/tokens"]`
+  );
+  const link = existing ?? document.createElement("link");
+  link.rel = "stylesheet";
+  if (!existing) link.href = href;
+  document.head.appendChild(link);
+}
+
+export { SPECS_TOKENS_HREF, ensureRuntimeBrandTokens };
+//# sourceMappingURL=runtime-tokens.js.map
+//# sourceMappingURL=runtime-tokens.js.map

package/dist/runtime-tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/runtime-tokens.ts"],"names":[],"mappings":";AAaO,IAAM,iBAAA,GACX;AAEK,SAAS,wBAAA,CAAyB,OAAe,iBAAA,EAAyB;AAC/E,EAAA,IAAI,OAAO,aAAa,WAAA,EAAa;AACrC,EAAA,MAAM,WAAW,QAAA,CAAS,aAAA;AAAA,IACxB,CAAA,0CAAA;AAAA,GACF;AACA,EAAA,MAAM,IAAA,GAAO,QAAA,IAAY,QAAA,CAAS,aAAA,CAAc,MAAM,CAAA;AACtD,EAAA,IAAA,CAAK,GAAA,GAAM,YAAA;AACX,EAAA,IAAI,CAAC,QAAA,EAAU,IAAA,CAAK,IAAA,GAAO,IAAA;AAG3B,EAAA,QAAA,CAAS,IAAA,CAAK,YAAY,IAAI,CAAA;AAChC","file":"runtime-tokens.js","sourcesContent":["// Runtime Brand tokens — the loader every app shares.\n//\n// Global-Rules (\"Consume Brand tokens at RUNTIME, never baked in at build time\")\n// requires each app to load specs.politogyvrm.com/api/tokens?format=css so a\n// Brand edit goes live without a redeploy. A static <link> in <head> is not\n// enough on its own: the app's own bundled chrome.css can be injected AFTER it\n// and win the cascade, which is exactly what happened on VRM — it linked the\n// runtime sheet yet still resolved --color-accent from the build-time snapshot.\n//\n// Appending the link to the END of <head> at startup makes the runtime sheet the\n// last stylesheet, so the live Brand values win every time. Idempotent: an\n// existing runtime link is MOVED to the end rather than duplicated.\n\nexport const SPECS_TOKENS_HREF =\n  'https://specs.politogyvrm.com/api/tokens?format=css'\n\nexport function ensureRuntimeBrandTokens(href: string = SPECS_TOKENS_HREF): void {\n  if (typeof document === 'undefined') return\n  const existing = document.querySelector<HTMLLinkElement>(\n    `link[rel=\"stylesheet\"][href*=\"api/tokens\"]`,\n  )\n  const link = existing ?? document.createElement('link')\n  link.rel = 'stylesheet'\n  if (!existing) link.href = href\n  // Re-appending an already-present node moves it; the browser does not refetch\n  // (and the response is ETag + max-age=60 cached regardless).\n  document.head.appendChild(link)\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@the-portland-company/shell",
-  "version": "0.28.2",
+  "version": "0.30.0",
   "description": "Shared chrome (header, sidebar, footer, theme, auth) for politogy apps. Drop into any Vite SPA to inherit the politogy look and signed-in user.",
   "license": "UNLICENSED",
   "private": false,
@@ -45,6 +45,11 @@
       "types": "./dist/app-icons.d.ts",
       "import": "./dist/app-icons.js",
       "require": "./dist/app-icons.cjs"
+    },
+    "./runtime-tokens": {
+      "types": "./dist/runtime-tokens.d.ts",
+      "import": "./dist/runtime-tokens.js",
+      "require": "./dist/runtime-tokens.cjs"
     }
   },
   "files": [