@xforge-dev/forge-kit 0.21.0 → 0.22.1

package/dist/app-switcher.js

@@ -11,7 +11,7 @@ export function AppSwitcher({ current, account, syncError, showAccount = true, c
     const currentApp = FORGE_APPS.find((a) => a.id === current);
     const liveUrl = useCurrentUrl(currentApp?.url ?? accountUrl('/'));
     const next = currentUrl ?? liveUrl;
-    return (_jsxs(Menu.Root, { children: [_jsxs(Menu.Trigger, { className: "flex items-center gap-2 rounded-md px-2 py-1 font-semibold hover:bg-accent focus-visible:outline-2 focus-visible:outline-ring", children: [_jsx(ForgeLogo, { brand: currentApp?.id ?? 'xforge', variant: "icon", className: "h-8", alt: "" }), _jsx("span", { children: currentApp?.name ?? 'xForge' }), _jsx(ChevronDown, { className: "h-4 w-4 text-muted-foreground" }), syncError && (_jsx("span", { role: "img", "aria-label": "Not synced", title: "Not synced", className: "h-2 w-2 rounded-full bg-destructive" }))] }), _jsx(Menu.Portal, { children: _jsxs(Menu.Content, { align: "start", sideOffset: 6, className: "z-50 w-72 rounded-md border bg-popover p-1 text-popover-foreground shadow-md", children: [_jsxs(Menu.Label, { className: "flex items-center gap-2 px-2 py-1.5 text-xs font-medium text-muted-foreground", children: [_jsx(ForgeLogo, { brand: "xforge", variant: "icon", className: "h-4", alt: "" }), "xForge apps"] }), FORGE_APPS.map((app) => {
+    return (_jsxs(Menu.Root, { children: [_jsxs(Menu.Trigger, { className: "flex items-center gap-2 rounded-md px-2 py-1 font-semibold hover:bg-accent focus-visible:outline-2 focus-visible:outline-ring", children: [_jsx(ForgeLogo, { brand: currentApp?.id ?? 'xforge', variant: "icon", className: "h-8", alt: "" }), _jsx("span", { className: "max-[440px]:sr-only", children: currentApp?.name ?? 'xForge' }), _jsx(ChevronDown, { className: "h-4 w-4 text-muted-foreground" }), syncError && (_jsx("span", { role: "img", "aria-label": "Not synced", title: "Not synced", className: "h-2 w-2 rounded-full bg-destructive" }))] }), _jsx(Menu.Portal, { children: _jsxs(Menu.Content, { align: "start", sideOffset: 6, className: "z-50 w-72 rounded-md border bg-popover p-1 text-popover-foreground shadow-md", children: [_jsxs(Menu.Label, { className: "flex items-center gap-2 px-2 py-1.5 text-xs font-medium text-muted-foreground", children: [_jsx(ForgeLogo, { brand: "xforge", variant: "icon", className: "h-4", alt: "" }), "xForge apps"] }), FORGE_APPS.map((app) => {
                             const isCurrent = app.id === current;
                             const disabled = app.status === 'soon';
                             return (_jsx(Menu.Item, { asChild: true, disabled: disabled, children: _jsxs("a", { href: disabled ? undefined : app.url, "aria-current": isCurrent ? 'page' : undefined, className: item, children: [_jsx(ForgeLogo, { brand: app.id, variant: "icon", className: "h-9 shrink-0", alt: "" }), _jsxs("span", { className: "flex-1", children: [_jsx("span", { className: "block font-medium", children: app.name }), _jsx("span", { className: "block text-xs text-muted-foreground", children: disabled ? 'Coming soon' : app.description })] }), isCurrent && _jsx(Check, { className: "h-4 w-4" })] }) }, app.id));

package/dist/forge-header.d.ts

@@ -4,9 +4,10 @@ import { type ForgeAppId } from './apps.js';
 import type { ForgeAccount } from './use-forge-user.js';
 export type ForgeNavLink = {
     href: string;
-    label: string;
+    /** Usually text; a node for a link that needs emphasis inside its label (e.g. a footnote link). */
+    label: ReactNode;
     icon?: LucideIcon;
-    /** Full-colour art (e.g. a game icon) in place of `icon`: drawn in a 20px box and left untinted. */
+    /** Full-colour art (e.g. a game icon) in place of `icon`: drawn in the icon box (24px in menus) and left untinted. */
     media?: ReactNode;
     active?: boolean;
     description?: string;
@@ -37,6 +38,8 @@ export type ForgeHeaderProps = {
     syncError?: boolean;
     /** Page links and groups of them: inline (groups as menus) on desktop, in the account panel on mobile. */
     nav?: ForgeNavItem[];
+    /** False keeps `nav` out of the account panel, for an app that draws its own mobile navigation. Defaults to true. */
+    panelNav?: boolean;
     /** Header buttons shown left of the avatar. */
     actions?: ReactNode;
     /** Shown in the panel under the username, supporter badge and Discord name (e.g. time zone). */
@@ -58,7 +61,7 @@ export type ForgeHeaderProps = {
  * The header every xForge app shares: app switcher, page links, app buttons,
  * and an avatar that opens the account panel with the theme settings.
  */
-export declare function ForgeHeader({ current, account, syncError, nav, actions, accountDetails, guestDetails, accountActions, panel, onBeforeSignOut, containerClassName, currentUrl, }: ForgeHeaderProps): import("react").JSX.Element;
+export declare function ForgeHeader({ current, account, syncError, nav, panelNav, actions, accountDetails, guestDetails, accountActions, panel, onBeforeSignOut, containerClassName, currentUrl, }: ForgeHeaderProps): import("react").JSX.Element;
 export declare function ForgeAvatar({ account, className }: {
     account: ForgeAccount | null;
     className?: string;

package/dist/forge-header.js

@@ -4,7 +4,7 @@ import * as Dialog from '@radix-ui/react-dialog';
 import * as Menu from '@radix-ui/react-dropdown-menu';
 import Link from 'next/link.js';
 import { useState } from 'react';
-import { Check, ChevronDown, ExternalLink, LogIn, LogOut, Moon, RefreshCw, Sun, UserRound, X } from 'lucide-react';
+import { ChevronDown, ExternalLink, LogIn, LogOut, Moon, RefreshCw, Sun, UserRound, X } from 'lucide-react';
 import { accountUrl } from './account-url.js';
 import { AppSwitcher } from './app-switcher.js';
 import { FORGE_APPS } from './apps.js';
@@ -20,6 +20,15 @@ function LinkLead({ icon: Icon, media, tint }) {
         return _jsx("span", { "aria-hidden": true, className: "flex size-5 shrink-0 items-center justify-center", children: media });
     return Icon ? _jsx(Icon, { "aria-hidden": true, className: `mt-0.5 h-4 w-4 shrink-0 ${tint ? 'text-muted-foreground' : ''}` }) : null;
 }
+/**
+ * A menu link's lead: one 24px box for both kinds, so labels line up. Art fills it untinted; a line icon sits at 18px
+ * in the muted colour.
+ */
+function MenuLead({ icon: Icon, media }) {
+    if (!media && !Icon)
+        return null;
+    return (_jsx("span", { "aria-hidden": true, className: "flex size-6 shrink-0 items-center justify-center", children: media ?? (Icon && _jsx(Icon, { strokeWidth: 2, className: "size-[18px] text-muted-foreground" })) }));
+}
 export const isNavGroup = (item) => 'sections' in item;
 const navPill = (active) => active
     ? 'rounded-lg bg-primary-tint px-3 py-1.5 text-sm font-semibold text-primary-text'
@@ -28,15 +37,17 @@ const navPill = (active) => active
  * The header every xForge app shares: app switcher, page links, app buttons,
  * and an avatar that opens the account panel with the theme settings.
  */
-export function ForgeHeader({ current, account, syncError, nav = [], actions, accountDetails, guestDetails, accountActions, panel, onBeforeSignOut, containerClassName = 'max-w-6xl', currentUrl, }) {
+export function ForgeHeader({ current, account, syncError, nav = [], panelNav = true, actions, accountDetails, guestDetails, accountActions, panel, onBeforeSignOut, containerClassName = 'max-w-6xl', currentUrl, }) {
     const [open, setOpen] = useState(false);
-    return (_jsx("header", { className: "sticky top-0 z-40 w-full border-b bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/80", children: _jsxs("div", { className: `mx-auto flex h-14 w-full items-center gap-2 px-4 sm:gap-4 ${containerClassName}`, children: [_jsx(AppSwitcher, { current: current, account: account, showAccount: false, currentUrl: currentUrl }), _jsx("nav", { className: "hidden flex-1 items-center gap-1 sm:flex", children: nav.map((item) => isNavGroup(item) ? (_jsx(NavMenu, { group: item }, item.label)) : (_jsx(Link, { href: item.href, "aria-current": item.active ? 'page' : undefined, className: navPill(item.active), children: item.label }, item.href))) }), _jsx("div", { className: "flex-1 sm:hidden" }), actions && _jsx("div", { className: "flex items-center gap-2", children: actions }), _jsxs(Dialog.Root, { open: open, onOpenChange: setOpen, children: [_jsxs(Dialog.Trigger, { "aria-label": "Account and settings", className: "relative shrink-0 rounded-full focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", children: [_jsx(ForgeAvatar, { account: account, className: "h-8 w-8" }), syncError && (_jsx("span", { role: "img", "aria-label": "Not synced", title: "Not synced", className: "absolute -right-0.5 -top-0.5 h-2.5 w-2.5 rounded-full border-2 border-background bg-destructive" }))] }), _jsxs(Dialog.Portal, { children: [_jsx(Dialog.Overlay, { className: "fixed inset-0 z-50 bg-black/60" }), _jsx(Dialog.Content, { className: "fixed inset-y-0 right-0 z-50 flex w-[88vw] max-w-sm flex-col border-l bg-background text-foreground shadow-lg outline-hidden", children: _jsx(AccountPanel, { current: current, account: account, syncError: syncError, nav: nav, accountDetails: accountDetails, guestDetails: guestDetails, accountActions: accountActions, panel: panel, onBeforeSignOut: onBeforeSignOut, currentUrl: currentUrl }) })] })] })] }) }));
+    return (_jsx("header", { className: "sticky top-0 z-40 w-full border-b bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/80", children: _jsxs("div", { className: `mx-auto flex h-14 w-full items-center gap-2 px-4 sm:gap-4 ${containerClassName}`, children: [_jsx(AppSwitcher, { current: current, account: account, showAccount: false, currentUrl: currentUrl }), _jsx("nav", { className: "hidden flex-1 items-center gap-1 sm:flex", children: nav.map((item) => isNavGroup(item) ? (_jsx(NavMenu, { group: item }, item.label)) : (_jsx(Link, { href: item.href, "aria-current": item.active ? 'page' : undefined, className: navPill(item.active), children: item.label }, item.href))) }), _jsx("div", { className: "flex-1 sm:hidden" }), actions && _jsx("div", { className: "flex items-center gap-2", children: actions }), _jsxs(Dialog.Root, { open: open, onOpenChange: setOpen, children: [_jsxs(Dialog.Trigger, { "aria-label": "Account and settings", className: "relative shrink-0 rounded-full focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", children: [_jsx(ForgeAvatar, { account: account, className: "h-8 w-8" }), syncError && (_jsx("span", { role: "img", "aria-label": "Not synced", title: "Not synced", className: "absolute -right-0.5 -top-0.5 h-2.5 w-2.5 rounded-full border-2 border-background bg-destructive" }))] }), _jsxs(Dialog.Portal, { children: [_jsx(Dialog.Overlay, { className: "fixed inset-0 z-50 bg-black/60" }), _jsx(Dialog.Content, { className: "fixed inset-y-0 right-0 z-50 flex w-[88vw] max-w-sm flex-col border-l bg-background text-foreground shadow-lg outline-hidden", children: _jsx(AccountPanel, { current: current, account: account, syncError: syncError, nav: panelNav ? nav : [], accountDetails: accountDetails, guestDetails: guestDetails, accountActions: accountActions, panel: panel, onBeforeSignOut: onBeforeSignOut, currentUrl: currentUrl }) })] })] })] }) }));
 }
-const menuItem = 'flex cursor-pointer select-none items-start gap-3 rounded-sm px-2 py-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground';
+const menuItem = 'flex cursor-pointer select-none items-center gap-3 rounded-sm px-2 py-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground';
+/** The page on screen: the hover fill plus a 2px accent bar down its left edge. */
+const menuActive = 'bg-accent shadow-[inset_2px_0_0_var(--primary)]';
 /** A nav group on desktop: a pill that opens its links, sections split by a seam. */
 function NavMenu({ group }) {
     const sections = group.sections.filter((s) => s.items.length > 0);
-    return (_jsxs(Menu.Root, { modal: false, children: [_jsxs(Menu.Trigger, { className: `group flex items-center gap-1 ${navPill(group.active)} focus-visible:outline-2 focus-visible:outline-ring`, children: [group.label, _jsx(ChevronDown, { "aria-hidden": true, className: "h-3.5 w-3.5 opacity-70 transition-transform duration-200 group-data-[state=open]:rotate-180" })] }), _jsx(Menu.Portal, { children: _jsx(Menu.Content, { align: "start", sideOffset: 6, className: "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] w-64 overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md", children: sections.map((section, i) => (_jsxs(Menu.Group, { children: [i > 0 && _jsx(Menu.Separator, { className: "-mx-1 my-1 h-px bg-border" }), section.title && (_jsx(Menu.Label, { className: "px-2 pb-1 pt-1.5 text-xs font-medium text-muted-foreground", children: section.title })), _jsx("div", { className: section.rail ? 'ml-3.5 mr-2 border-l-2 pl-1' : undefined, children: section.items.map(({ href, label, icon, media, active, description }) => (_jsx(Menu.Item, { asChild: true, children: _jsxs(Link, { href: href, "aria-current": active ? 'page' : undefined, className: `${menuItem} ${active ? 'bg-accent font-medium' : ''} ${section.rail ? `relative ${active ? railMark : ''}` : ''}`, children: [_jsx(LinkLead, { icon: icon, media: media, tint: true }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block", children: label }), description && _jsx("span", { className: "block text-xs text-muted-foreground", children: description })] }), active && _jsx(Check, { "aria-hidden": true, className: "mt-0.5 h-4 w-4 shrink-0" })] }) }, href))) })] }, section.key ?? i))) }) })] }));
+    return (_jsxs(Menu.Root, { modal: false, children: [_jsxs(Menu.Trigger, { className: `group flex items-center gap-1 ${navPill(group.active)} focus-visible:outline-2 focus-visible:outline-ring`, children: [group.label, _jsx(ChevronDown, { "aria-hidden": true, className: "h-3.5 w-3.5 opacity-70 transition-transform duration-200 group-data-[state=open]:rotate-180" })] }), _jsx(Menu.Portal, { children: _jsx(Menu.Content, { align: "start", sideOffset: 6, className: "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] w-72 overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md", children: sections.map((section, i) => (_jsxs(Menu.Group, { children: [i > 0 && _jsx(Menu.Separator, { className: "-mx-1 my-1 h-px bg-border" }), section.title && (_jsx(Menu.Label, { className: "px-2 pb-1 pt-1.5 text-xs font-medium text-muted-foreground", children: section.title })), _jsx("div", { className: section.rail ? 'ml-3.5 mr-2 border-l-2 pl-1' : undefined, children: section.items.map(({ href, label, icon, media, active, description }) => (_jsx(Menu.Item, { asChild: true, children: _jsxs(Link, { href: href, "aria-current": active ? 'page' : undefined, className: `${menuItem} ${active ? menuActive : ''}`, children: [_jsx(MenuLead, { icon: icon, media: media }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block font-semibold", children: label }), description && _jsx("span", { className: "block text-xs text-muted-foreground", children: description })] })] }) }, href))) })] }, section.key ?? i))) }) })] }));
 }
 function initials(name) {
     return name.slice(0, 2).toUpperCase();

package/dist/support-button.js

@@ -39,5 +39,5 @@ export function ForgeSupporterBadge({ tier }) {
 }
 /** Header heart button that opens the "show your support" dialog every xForge app shares. */
 export function ForgeSupportButton({ children }) {
-    return (_jsxs(Dialog.Root, { children: [_jsx(Dialog.Trigger, { "aria-label": "Support the project", className: "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md transition-colors hover:bg-accent focus-visible:outline-2 focus-visible:outline-ring", children: _jsx(Heart, { className: "h-4 w-4 text-destructive motion-safe:animate-forge-heartbeat" }) }), _jsxs(Dialog.Portal, { children: [_jsx(Dialog.Overlay, { className: "fixed inset-0 z-50 bg-black/60" }), _jsxs(Dialog.Content, { className: "fixed left-1/2 top-1/2 z-50 max-h-[90svh] w-[calc(100%-2rem)] max-w-md -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-xl border bg-background p-6 text-foreground shadow-lg outline-hidden", children: [_jsx(Dialog.Close, { "aria-label": "Close", className: "absolute right-4 top-4 rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-2 focus-visible:outline-ring", children: _jsx(X, { className: "h-4 w-4" }) }), _jsx(Dialog.Title, { className: "text-center text-2xl font-semibold", children: "Looking to show your support?" }), _jsxs("div", { className: "space-y-6 py-4 text-center text-muted-foreground", children: [_jsx(Dialog.Description, { children: "This is a free, fan-made project. If you found it useful and want to support development, you can do so below." }), _jsx("a", { href: BUY_ME_A_COFFEE_URL, target: "_blank", rel: "noopener noreferrer", className: "inline-block", children: _jsx("img", { src: BUY_ME_A_COFFEE_BUTTON, alt: "Buy Me A Coffee", width: 145, height: 40, className: "mx-auto h-10 w-auto" }) }), _jsxs("div", { className: "space-y-2 border-t pt-4", children: [_jsx("p", { className: "text-xs font-medium uppercase tracking-wide text-foreground", children: "Supporter Badges" }), _jsx("p", { className: "text-xs", children: "Donate and reach out \u2014 I'll assign your badge manually." }), _jsx("div", { className: "flex flex-col gap-2 pt-1", children: FORGE_SPONSOR_TIERS.map(({ Icon, label, threshold, className }) => (_jsxs("div", { className: `flex items-center justify-between rounded-lg border px-3 py-2 ${className}`, children: [_jsxs("span", { className: "flex items-center gap-1.5 text-sm font-medium", children: [_jsx(Icon, { className: "h-3.5 w-3.5 shrink-0" }), label] }), _jsx("span", { className: "text-xs font-semibold opacity-80", children: threshold })] }, label))) })] }), children] })] })] })] }));
+    return (_jsxs(Dialog.Root, { children: [_jsx(Dialog.Trigger, { "aria-label": "Support the project", title: "Support the project", className: "group inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-destructive focus-visible:outline-2 focus-visible:outline-ring data-[state=open]:text-destructive", children: _jsx(Heart, { "aria-hidden": true, className: "h-4 w-4 motion-safe:group-hover:animate-forge-heartbeat" }) }), _jsxs(Dialog.Portal, { children: [_jsx(Dialog.Overlay, { className: "fixed inset-0 z-50 bg-black/60" }), _jsxs(Dialog.Content, { className: "fixed left-1/2 top-1/2 z-50 max-h-[90svh] w-[calc(100%-2rem)] max-w-md -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-xl border bg-background p-6 text-foreground shadow-lg outline-hidden", children: [_jsx(Dialog.Close, { "aria-label": "Close", className: "absolute right-4 top-4 rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-2 focus-visible:outline-ring", children: _jsx(X, { className: "h-4 w-4" }) }), _jsx(Dialog.Title, { className: "text-center text-2xl font-semibold", children: "Looking to show your support?" }), _jsxs("div", { className: "space-y-6 py-4 text-center text-muted-foreground", children: [_jsx(Dialog.Description, { children: "This is a free, fan-made project. If you found it useful and want to support development, you can do so below." }), _jsx("a", { href: BUY_ME_A_COFFEE_URL, target: "_blank", rel: "noopener noreferrer", className: "inline-block", children: _jsx("img", { src: BUY_ME_A_COFFEE_BUTTON, alt: "Buy Me A Coffee", width: 145, height: 40, className: "mx-auto h-10 w-auto" }) }), _jsxs("div", { className: "space-y-2 border-t pt-4", children: [_jsx("p", { className: "text-xs font-medium uppercase tracking-wide text-foreground", children: "Supporter Badges" }), _jsx("p", { className: "text-xs", children: "Donate and reach out \u2014 I'll assign your badge manually." }), _jsx("div", { className: "flex flex-col gap-2 pt-1", children: FORGE_SPONSOR_TIERS.map(({ Icon, label, threshold, className }) => (_jsxs("div", { className: `flex items-center justify-between rounded-lg border px-3 py-2 ${className}`, children: [_jsxs("span", { className: "flex items-center gap-1.5 text-sm font-medium", children: [_jsx(Icon, { className: "h-3.5 w-3.5 shrink-0" }), label] }), _jsx("span", { className: "text-xs font-semibold opacity-80", children: threshold })] }, label))) })] }), children] })] })] })] }));
 }

package/dist/theme-provider.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { DEFAULT_THEME, THEME_COLOR_KEY, THEME_MODE_KEY, THEME_SYNC_KEY, isColorTheme, isThemeMode, parseThemeCookie, themeCookie, } from './theme.js';
+import { DEFAULT_THEME, hostThemeCookieExpiry, THEME_COLOR_KEY, THEME_MODE_KEY, THEME_SYNC_KEY, isColorTheme, isThemeMode, parseThemeCookie, writeThemeCookie, } from './theme.js';
 const Context = createContext(undefined);
 function safeStorage() {
     try {
@@ -39,7 +39,7 @@ export function storeForgeTheme(theme) {
     storage?.setItem(THEME_MODE_KEY, theme.mode);
     storage?.setItem(THEME_COLOR_KEY, theme.color);
     if (readSync(storage))
-        document.cookie = themeCookie(theme);
+        writeThemeCookie(theme);
 }
 function apply(theme) {
     const root = document.documentElement;
@@ -66,7 +66,7 @@ export function ForgeThemeProvider({ children, onChange }) {
         setThemeState(next);
         apply(next);
         if (share && readSync(storage))
-            document.cookie = themeCookie(next);
+            writeThemeCookie(next);
         if (!same(local, next)) {
             storage?.setItem(THEME_MODE_KEY, next.mode);
             storage?.setItem(THEME_COLOR_KEY, next.color);
@@ -79,6 +79,10 @@ export function ForgeThemeProvider({ children, onChange }) {
         const storage = safeStorage();
         setSyncState(readSync(storage));
         const adopt = () => {
+            // A stale host-only copy would shadow the shared cookie: drop it before reading.
+            const expiry = hostThemeCookieExpiry();
+            if (expiry)
+                document.cookie = expiry;
             const next = resolveTheme(storage, document.cookie);
             // The first app visited seeds the shared theme for the others.
             const seed = readSync(storage) && !parseThemeCookie(document.cookie);
@@ -114,7 +118,7 @@ export function ForgeThemeProvider({ children, onChange }) {
         setSyncState(sync);
         // Turning sync on shares this app's current theme rather than jumping to another app's.
         if (sync)
-            document.cookie = themeCookie(current.current);
+            writeThemeCookie(current.current);
     }, []);
     const value = useMemo(() => ({ theme: theme.mode, setTheme, colorTheme: theme.color, setColorTheme, syncTheme, setSyncTheme }), [theme, setTheme, setColorTheme, syncTheme, setSyncTheme]);
     return _jsx(Context.Provider, { value: value, children: children });

package/dist/theme.d.ts

@@ -67,6 +67,14 @@ export declare function isColorTheme(value: unknown): value is ForgeColorTheme;
 export declare function parseThemeCookie(cookie: string): ForgeTheme | null;
 /** The `document.cookie` assignment that stores `theme` for every Forge app. */
 export declare function themeCookie(theme: ForgeTheme, domain?: string): string;
+/**
+ * The `document.cookie` assignment that deletes a host-only theme cookie, or null where the theme cookie is host-only
+ * anyway (no shared domain). A host-only copy left over from before the shared domain was set sorts ahead of the
+ * shared cookie, so it would win every read and a new pick would never stick.
+ */
+export declare function hostThemeCookieExpiry(domain?: string): string | null;
+/** Writes the shared theme cookie, dropping any stale host-only copy first. */
+export declare function writeThemeCookie(theme: ForgeTheme, domain?: string): void;
 /**
  * Inline `<head>` script that applies the theme before first paint: the shared
  * cookie when this app syncs, otherwise localStorage. Keep in step with

package/dist/theme.js

@@ -53,6 +53,21 @@ export function themeCookie(theme, domain) {
         .filter(Boolean)
         .join('; ');
 }
+/**
+ * The `document.cookie` assignment that deletes a host-only theme cookie, or null where the theme cookie is host-only
+ * anyway (no shared domain). A host-only copy left over from before the shared domain was set sorts ahead of the
+ * shared cookie, so it would win every read and a new pick would never stick.
+ */
+export function hostThemeCookieExpiry(domain) {
+    return forgeCookieOptions(domain).domain ? `${THEME_COOKIE}=; Path=/; Max-Age=0` : null;
+}
+/** Writes the shared theme cookie, dropping any stale host-only copy first. */
+export function writeThemeCookie(theme, domain) {
+    const expiry = hostThemeCookieExpiry(domain);
+    if (expiry)
+        document.cookie = expiry;
+    document.cookie = themeCookie(theme, domain);
+}
 /**
  * Inline `<head>` script that applies the theme before first paint: the shared
  * cookie when this app syncs, otherwise localStorage. Keep in step with

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xforge-dev/forge-kit",
-  "version": "0.21.0",
+  "version": "0.22.1",
   "description": "Shared auth, app registry and UI for xForge apps",
   "license": "MIT",
   "repository": {