@kortix/ui 0.0.0-stage → 0.14.4

package/dist/internal/account-hub/account-settings-sidebar.js

@@ -0,0 +1,169 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useTranslations } from '../../i18n/index.js';
+/**
+ * The settings sidebar — the 300px left column of the account hub modal.
+ *
+ * Top to bottom: a round back button, the account switcher (a pill with the
+ * current account's name; it opens a menu of every account the caller
+ * belongs to) and the collapse control; then the current
+ * account's sections under their group labels (General, Access, Billing);
+ * then a footer of two full-width rows, Docs and Help, in the same row
+ * dialect as the nav.
+ * A person's own settings are not listed here; they live at
+ * `/settings/<tab>`, outside this shell.
+ *
+ * Which sections the current account lists is `useAccountHubSection`'s
+ * verdict, the same batched probe the body reads, so a nav item and its pane
+ * can never disagree about whether this caller may open it.
+ */
+import { BookOpenIcon, CaretLeftIcon, CaretUpDownIcon, CheckIcon, LifebuoyIcon, QuestionIcon, } from '@phosphor-icons/react';
+import { Suspense, useMemo } from 'react';
+import { Button } from '../../primitives/button.js';
+import { backPillClass } from '../../primitives/back-pill.js';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuTrigger, } from '../../primitives/dropdown-menu.js';
+import Hint from '../../primitives/hint.js';
+import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarTrigger, useSidebar, } from '../../primitives/sidebar.js';
+import { Skeleton } from '../../primitives/skeleton.js';
+import { useAccountsList } from '../hooks/account/use-accounts-list.js';
+import { ACCOUNT_HUB_TRANSLATION_KEYS } from '../../i18n/ui-catalog/account-hub-translation-keys.generated.js';
+import { localizeUiCatalog } from '../../i18n/ui-catalog/localize-ui-catalog.js';
+import { closeAccountPanel, hubTarget } from '../stores/account-panel-store.js';
+import { HubLink, useAccountPanelId } from './account-hub-location.js';
+import { localizedAccountNavGroups } from './sections.js';
+import { useAccountHubSection } from './use-account-hub-access.js';
+import { useAccountMembers } from './use-account-members.js';
+import { CountBadge } from '../../primitives/count-badge.js';
+/**
+ * One row dialect for every entry. Ink text on a translucent selected fill;
+ * the glyph is muted until the row is the current one. No hover transition:
+ * a sidebar row is hit tens of times a day and the highlight must not lag
+ * the pointer.
+ */
+// The project sidebar's nav-row type: medium label, icon in the label colour
+// (bold from IconProvider). Rows rest at 75% and the active one is full ink.
+const ROW_CLASS = 'text-sidebar-foreground/75 font-medium hover:bg-hover hover:text-sidebar-foreground data-[active=true]:bg-active data-[active=true]:text-sidebar-foreground';
+// Reference destinations, read in a new tab so the settings you were editing
+// stay put. Same two targets the user menu's Help group lists first.
+const FOOTER_LINKS = [
+    { label: 'Docs', href: '/docs', icon: BookOpenIcon },
+    { label: 'Support', href: '/support', icon: QuestionIcon },
+];
+function NavRow({ entry }) {
+    const { isMobile, setOpenMobile } = useSidebar();
+    const Glyph = entry.icon;
+    return (_jsx(SidebarMenuItem, { children: _jsx(SidebarMenuButton, { asChild: true, isActive: entry.active, className: ROW_CLASS, children: _jsxs(HubLink, { to: entry.to, "aria-current": entry.active ? 'page' : undefined, onClick: () => {
+                    // The mobile sidebar is a sheet over the page; a pick closes it.
+                    if (isMobile)
+                        setOpenMobile(false);
+                }, className: "gap-2 px-2.5 py-1 font-medium transition-none has-[>svg]:px-2.5", children: [Glyph ? _jsx(Glyph, { className: "size-4 shrink-0" }) : null, _jsx("span", { className: "min-w-0 flex-1 truncate", children: entry.label }), entry.trailing] }) }) }));
+}
+function GroupLabel({ children }) {
+    return (_jsx(SidebarGroupLabel, { className: "text-muted-foreground h-8 px-2.5 text-xs font-medium", children: children }));
+}
+function NavSkeleton() {
+    // The loaded nav's shape: three labelled groups of icon + label rows.
+    return (_jsx("div", { className: "space-y-4 px-2", "aria-hidden": true, children: NAV_SKELETON_GROUPS.map((rows, g) => (_jsxs("div", { className: "space-y-1", children: [_jsx(Skeleton, { className: "mx-2.5 my-2 h-3 w-14 rounded-sm" }), rows.map((width, i) => (_jsxs("div", { className: "flex h-8 items-center gap-2 px-2.5", children: [_jsx(Skeleton, { className: "size-4 shrink-0 rounded-sm" }), _jsx(Skeleton, { className: `h-3.5 rounded-sm ${width}` })] }, i)))] }, g))) }));
+}
+/** General, Access and Billing, with label widths that vary like real names. */
+const NAV_SKELETON_GROUPS = [
+    ['w-16', 'w-20', 'w-8', 'w-16'],
+    ['w-20', 'w-16', 'w-16', 'w-12', 'w-16', 'w-20'],
+    ['w-10', 'w-12'],
+];
+/**
+ * The nav body. Reads `?tab=` through `useSearchParams`, so it renders under a
+ * `Suspense` boundary — see `AccountSettingsSidebar`.
+ */
+function SettingsNav() {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const navGroups = localizedAccountNavGroups(tI18nComplete);
+    // From `?accountId=`, the only place it lives. `useParams()` would be
+    // meaningless: this sidebar renders over some other route.
+    const accountId = useAccountPanelId();
+    const { sectionVisible, activeSection } = useAccountHubSection(accountId);
+    const membersQuery = useAccountMembers(accountId);
+    // The count of the people this caller sees: the whole directory with
+    // `member.read`, else only the caller. Hidden while loading.
+    const memberCount = membersQuery.isLoading ? null : (membersQuery.data ?? []).length;
+    // The account list (no account picked) has no sections: the switcher above
+    // and the list in the body are the whole page.
+    if (!accountId)
+        return null;
+    const sectionGroups = navGroups
+        .map((group) => ({
+        // The plumbing group has no name in `NAV_GROUPS`; in the sidebar it
+        // reads as "General" so every group carries a label.
+        label: group.label ?? tI18nComplete.raw('textc910d474dcd7'),
+        // Help sits in the footer beside Docs and Support: reference, not a setting.
+        items: group.items.filter((item) => sectionVisible[item.id]).filter((item) => item.id !== 'help'),
+    }))
+        .filter((group) => group.items.length > 0);
+    const sectionEntry = (item) => ({
+        key: `section:${item.id}`,
+        label: item.label,
+        to: hubTarget(accountId, { tab: item.id }),
+        icon: item.icon,
+        active: item.id === activeSection,
+        trailing: item.id === 'members' && memberCount !== null ? (_jsx(CountBadge, { count: memberCount, className: "ml-auto" })) : undefined,
+    });
+    return (_jsx(_Fragment, { children: sectionGroups.map((group) => (_jsxs(SidebarGroup, { className: "px-2 py-0 pb-3", children: [_jsx(GroupLabel, { children: group.label }), _jsx(SidebarMenu, { "aria-label": group.label, children: group.items.map((item) => (_jsx(NavRow, { entry: sectionEntry(item) }, item.id))) })] }, group.label))) }));
+}
+/**
+ * The account switcher, top-left after the back button. A ghost pill with
+ * the current account's name, the back pill's shape without its chevron. The
+ * menu lists every account the caller belongs to, a check on the current one;
+ * a pick opens that account's hub at its default section.
+ */
+function AccountSwitcher() {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const accountId = useAccountPanelId();
+    const accountsQuery = useAccountsList();
+    const accounts = useMemo(() => {
+        const list = accountsQuery.data ?? [];
+        return [...list].sort((a, b) => (a.name || '').localeCompare(b.name || ''));
+    }, [accountsQuery.data]);
+    const accountsLabel = tI18nComplete.raw('text8a7c8b67fe8b');
+    const current = accounts.find((account) => account.account_id === accountId);
+    const label = current ? current.name || 'Account' : accountsLabel;
+    if (accountsQuery.isLoading)
+        return _jsx(Skeleton, { className: "h-7 w-28 rounded-full" });
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "secondary", size: "xs", className: backPillClass('max-w-48 min-w-0 has-[>svg]:pr-2 has-[>svg]:pl-3 max-sm:size-auto max-sm:has-[>svg]:px-2.5'), children: [_jsx("span", { className: "min-w-0 truncate", children: label }), _jsx(CaretUpDownIcon, { "aria-hidden": true, className: "text-muted-foreground size-3.5 shrink-0" })] }) }), _jsxs(DropdownMenuContent, { align: "start", className: "w-80", children: [_jsx(DropdownMenuLabel, { className: "text-muted-foreground mb-1 text-xs font-medium", children: accountsLabel }), accountsQuery.isError ? (_jsx("p", { className: "text-muted-foreground px-2 py-1.5 text-xs", children: tI18nComplete.raw('textb170e6a477b8') })) : (accounts.map((account) => {
+                        const selected = account.account_id === accountId;
+                        return (_jsx(DropdownMenuItem, { asChild: true, children: _jsxs(HubLink, { to: hubTarget(account.account_id), "aria-current": selected ? 'page' : undefined, children: [_jsx("span", { className: "min-w-0 flex-1 truncate", children: account.name || 'Account' }), selected ? _jsx(CheckIcon, { "aria-hidden": true, className: "size-4 shrink-0" }) : null] }) }, account.account_id));
+                    }))] })] }));
+}
+/**
+ * The one way out, top-left.
+ *
+ * It closes, it does not navigate: the page you came from is still mounted
+ * underneath, and `closeAccountPanel` pops the single history entry the modal
+ * pushed — so you land exactly where you were, at the scroll position you
+ * left. Same effect as Escape.
+ */
+function BackToApp({ label }) {
+    return (_jsx(Hint, { label: label, side: "bottom", children: _jsx(Button, { variant: "secondary", size: "icon", "aria-label": label, className: "shrink-0 rounded-full", onClick: () => closeAccountPanel(), children: _jsx(CaretLeftIcon, { "aria-hidden": true, className: "size-3.5" }) }) }));
+}
+/** The account's Help pane, listed in the footer above Docs and Support. */
+function HelpRow({ label }) {
+    const accountId = useAccountPanelId();
+    const { activeSection } = useAccountHubSection(accountId);
+    if (!accountId)
+        return null;
+    return (_jsx(NavRow, { entry: {
+            key: 'section:help',
+            label,
+            to: hubTarget(accountId, { tab: 'help' }),
+            icon: LifebuoyIcon,
+            active: activeSection === 'help',
+        } }));
+}
+export function AccountSettingsSidebar() {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const footerLinks = localizeUiCatalog(FOOTER_LINKS, tI18nComplete, ACCOUNT_HUB_TRANSLATION_KEYS);
+    return (
+    // `--surface` is this shell's pane color, one rung off canvas. The child
+    // variant is required: `className` lands on the positioning container,
+    // while the box that paints `bg-background` is `sidebar-inner` inside it.
+    _jsxs(Sidebar, { collapsible: "offcanvas", variant: "sidebar", className: "bg-surface [&>[data-slot=sidebar-inner]]:bg-surface", children: [_jsx(SidebarHeader, { className: "gap-0 px-2 pt-0 pb-0", children: _jsxs("div", { className: "kx-titlebar-row kx-titlebar-band-height kx-overlay-sidebar-titlebar flex h-11 items-center justify-between gap-1 py-2 pr-0.5", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-0.5", children: [_jsx(BackToApp, { label: tI18nComplete.raw('texta6989680b352') }), _jsx(Suspense, { fallback: _jsx(Skeleton, { className: "h-7 w-28 rounded-full" }), children: _jsx(AccountSwitcher, {}) })] }), _jsx("div", { className: "flex shrink-0 items-center gap-px", children: _jsx(Hint, { label: tI18nComplete.raw('textd1db29ebc76d'), side: "bottom", children: _jsx(SidebarTrigger, { className: "text-muted-foreground" }) }) })] }) }), _jsx(SidebarContent, { className: "gap-0 bg-inherit", children: _jsx(Suspense, { fallback: _jsx(NavSkeleton, {}), children: _jsx(SettingsNav, {}) }) }), _jsx(SidebarFooter, { className: "p-2", children: _jsxs(SidebarMenu, { children: [_jsx(Suspense, { fallback: null, children: _jsx(HelpRow, { label: tI18nComplete.raw('textb79cac926e0b') }) }), footerLinks.map((link) => (_jsx(SidebarMenuItem, { children: _jsx(SidebarMenuButton, { asChild: true, className: ROW_CLASS, children: _jsxs("a", { href: link.href, target: "_blank", rel: "noreferrer", children: [_jsx(link.icon, { className: "size-4 shrink-0" }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: link.label })] }) }) }, link.href)))] }) })] }));
+}

package/dist/internal/account-hub/hub-sheet.d.ts

@@ -0,0 +1,39 @@
+/** @internal Kortix apps only. No semver: it may change in any release. */
+/**
+ * The account hub's one split sheet. Any pane can open a form beside itself —
+ * Members "Invite", API "New token" and "Register app", project "Grant
+ * access" — and the pane narrows to make room instead of a modal covering it.
+ *
+ * Mounted once by `AccountSettingsShell` around the content column, so the
+ * sheet is a sibling column of the whole pane, not a child of its scroll.
+ *
+ * ```tsx
+ * const sheet = useAccountHubSheet();
+ * sheet.open({ title: 'New token', body: <TokenForm onDone={sheet.close} /> });
+ * ```
+ *
+ * `body` renders inside `SplitSheetBody` (it scrolls), `footer` inside
+ * `SplitSheetFooter` (it stays put). The content is a snapshot: call `open`
+ * again to replace it. A form that keeps its own state across body and
+ * footer (`AccessDialog`) goes in `body` alone and draws its own sticky
+ * footer: it reads `useInAccountHubSheetBody()`.
+ */
+import { type ReactNode } from 'react';
+export interface AccountHubSheetContent {
+    title: ReactNode;
+    description?: ReactNode;
+    body: ReactNode;
+    footer?: ReactNode;
+}
+export interface AccountHubSheet {
+    open: (content: AccountHubSheetContent) => void;
+    close: () => void;
+}
+/** True inside the hub sheet's body: a form there draws the sheet layout, not a modal. */
+export declare function useInAccountHubSheetBody(): boolean;
+/** Opens and closes the hub's split sheet. Throws outside the hub shell. */
+export declare function useAccountHubSheet(): AccountHubSheet;
+/** Wraps the hub's content column. Its parent must have a bounded height. */
+export declare function AccountHubSheetProvider({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/internal/account-hub/hub-sheet.js

@@ -0,0 +1,46 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The account hub's one split sheet. Any pane can open a form beside itself —
+ * Members "Invite", API "New token" and "Register app", project "Grant
+ * access" — and the pane narrows to make room instead of a modal covering it.
+ *
+ * Mounted once by `AccountSettingsShell` around the content column, so the
+ * sheet is a sibling column of the whole pane, not a child of its scroll.
+ *
+ * ```tsx
+ * const sheet = useAccountHubSheet();
+ * sheet.open({ title: 'New token', body: <TokenForm onDone={sheet.close} /> });
+ * ```
+ *
+ * `body` renders inside `SplitSheetBody` (it scrolls), `footer` inside
+ * `SplitSheetFooter` (it stays put). The content is a snapshot: call `open`
+ * again to replace it. A form that keeps its own state across body and
+ * footer (`AccessDialog`) goes in `body` alone and draws its own sticky
+ * footer: it reads `useInAccountHubSheetBody()`.
+ */
+import { createContext, useCallback, useContext, useMemo, useState } from 'react';
+import { SplitSheet, SplitSheetBody, SplitSheetContent, SplitSheetDescription, SplitSheetFooter, SplitSheetHeader, SplitSheetMain, SplitSheetTitle, } from '../../primitives/split-sheet.js';
+const AccountHubSheetContext = createContext(null);
+const SheetBodyContext = createContext(false);
+/** True inside the hub sheet's body: a form there draws the sheet layout, not a modal. */
+export function useInAccountHubSheetBody() {
+    return useContext(SheetBodyContext);
+}
+/** Opens and closes the hub's split sheet. Throws outside the hub shell. */
+export function useAccountHubSheet() {
+    const sheet = useContext(AccountHubSheetContext);
+    if (!sheet)
+        throw new Error('useAccountHubSheet must be used inside AccountHubSheetProvider.');
+    return sheet;
+}
+/** Wraps the hub's content column. Its parent must have a bounded height. */
+export function AccountHubSheetProvider({ children }) {
+    const [content, setContent] = useState(null);
+    const close = useCallback(() => setContent(null), []);
+    const sheet = useMemo(() => ({ open: setContent, close }), [close]);
+    return (_jsx(AccountHubSheetContext.Provider, { value: sheet, children: _jsxs(SplitSheet, { open: content !== null, onOpenChange: (next) => {
+                if (!next)
+                    close();
+            }, size: "md", children: [_jsx(SplitSheetMain, { children: children }), content ? (_jsxs(SplitSheetContent, { children: [_jsxs(SplitSheetHeader, { children: [_jsx(SplitSheetTitle, { children: content.title }), content.description ? (_jsx(SplitSheetDescription, { children: content.description })) : null] }), _jsx(SplitSheetBody, { children: _jsx(SheetBodyContext.Provider, { value: true, children: content.body }) }), content.footer ? _jsx(SplitSheetFooter, { children: content.footer }) : null] })) : null] }) }));
+}

package/dist/internal/account-hub/sections.d.ts

@@ -0,0 +1,95 @@
+/** @internal Kortix apps only. No semver: it may change in any release. */
+import type { UiTranslator } from '../../i18n/index.js';
+/**
+ * The account hub's section catalog — the ONE list of what the hub can show,
+ * and what each section is called. A section id is the `?accountTab=` value.
+ *
+ * Shared by the hub body (`account-hub-content.tsx`, which renders the pane)
+ * and the settings shell (`account-settings-shell.tsx`, which renders the
+ * sidebar nav and the breadcrumb). Nothing here fetches — it is names, icons,
+ * and order.
+ */
+import { type HubTarget } from '../stores/account-panel-store.js';
+import type { Icon } from '@phosphor-icons/react';
+export declare const VALID_TABS: readonly ["members", "git", "tokens", "settings", "branding", "billing", "transactions", "groups", "access-projects", "roles", "identity", "audit", "help"];
+export type AccountSection = (typeof VALID_TABS)[number];
+export interface AccountNavItem {
+    id: AccountSection;
+    label: string;
+    icon: Icon;
+}
+export interface AccountNavGroup {
+    /**
+     * The group's name. Carried as the list's `aria-label` — the sidebar draws
+     * the groups apart with a gap, not a heading, so a screen reader still gets
+     * the word a sighted reader infers from the whitespace.
+     */
+    label?: string;
+    items: readonly AccountNavItem[];
+}
+export declare const NAV_GROUPS: readonly AccountNavGroup[];
+export declare const PANE_META: Partial<Record<AccountSection, {
+    title: string;
+    description: string;
+}>>;
+export declare function localizedAccountNavGroups(tI18nComplete: UiTranslator): readonly AccountNavGroup[];
+export declare function localizedAccountPaneMeta(tI18nComplete: UiTranslator): Partial<Record<"git" | "members" | "identity" | "tokens" | "billing" | "groups" | "roles" | "help" | "settings" | "branding" | "transactions" | "audit" | "access-projects", {
+    title: string;
+    description: string;
+}>>;
+/**
+ * How wide a section's column is. The default is the page container
+ * (`max-w-2xl`); list-shaped panes — a members table, an audit log — need the
+ * next step up, and the usage ledger needs the room a table with seven
+ * columns takes.
+ */
+/** `fluid`: the whole pane, Linear's members table — no centred column. */
+export type AccountPaneWidth = 'default' | 'wide' | 'full' | 'fluid';
+export declare function paneWidth(section: AccountSection): AccountPaneWidth;
+/**
+ * `?tab=` → section, or `null` for anything that is not one. Legacy callers
+ * pass `tab=overview` — the limits/wallet/spend panels now live at the top of
+ * the Billing tab, so fold it. `usage` aliases the existing transactions pane.
+ */
+export declare function parseAccountSection(raw: string | null | undefined): AccountSection | null;
+export declare function sectionLabel(section: AccountSection, tI18nComplete?: UiTranslator): string;
+export interface HubCrumb {
+    label: string;
+    /** Absent on the last crumb — where you are is not a link. */
+    to?: HubTarget;
+    /** The account crumb before its record has loaded: render a placeholder, not "Account". */
+    pending?: boolean;
+    /**
+     * The account crumb. Desktop shows `Settings / <account> / <section>`;
+     * below `md` the bar is too narrow for three, so this one is hidden and
+     * the row reads `Settings / <section>` — the sheet sidebar names the account.
+     */
+    kind?: 'account';
+}
+export interface HubCrumbInput {
+    /** `undefined` is the account list. */
+    accountId: string | undefined;
+    activeSection: AccountSection;
+    /** `sso` | `scim` while a guided wizard has taken over the Identity pane. */
+    setup?: string | null;
+    accountName?: string | null;
+    /** `?member=` while a member's access panel replaces the Members list. */
+    memberId?: string | null;
+    /** That member's label, once the member list has loaded. */
+    memberName?: string | null;
+    /** `?project=` while a project's access panel replaces the Projects list. */
+    projectId?: string | null;
+    /** That project's name, once it has loaded. */
+    projectName?: string | null;
+}
+/**
+ * The breadcrumb for wherever the hub currently is:
+ * `Settings / <account name> / <where you are>`.
+ *
+ * Pure, and takes no URL at all — the hub has no URL of its own, only a
+ * `?accountId=` on the page it floats over. Its whole input is the resolved
+ * account, its name, the active section, and whether a setup wizard is on top
+ * of that section. Each crumb names a `HubTarget`, which `HubLink` turns into
+ * a real href for whatever page the modal is open on.
+ */
+export declare function accountHubCrumbs(input: HubCrumbInput, tI18nComplete: UiTranslator): HubCrumb[];

package/dist/internal/account-hub/sections.js

@@ -0,0 +1,232 @@
+import { ACCOUNT_HUB_TRANSLATION_KEYS } from '../../i18n/ui-catalog/account-hub-translation-keys.generated.js';
+import { localizeUiCatalog } from '../../i18n/ui-catalog/localize-ui-catalog.js';
+import { REMAINING_UI_TRANSLATION_KEYS } from '../../i18n/ui-catalog/remaining-ui-translation-keys.generated.js';
+/**
+ * The account hub's section catalog — the ONE list of what the hub can show,
+ * and what each section is called. A section id is the `?accountTab=` value.
+ *
+ * Shared by the hub body (`account-hub-content.tsx`, which renders the pane)
+ * and the settings shell (`account-settings-shell.tsx`, which renders the
+ * sidebar nav and the breadcrumb). Nothing here fetches — it is names, icons,
+ * and order.
+ */
+import { hubTarget } from '../stores/account-panel-store.js';
+import { CoinsIcon, CreditCardIcon, FingerprintIcon, FolderOpenIcon, GearSixIcon, GitBranchIcon, KeyIcon, NetworkIcon, PaintBrushIcon, QuestionIcon, ScrollIcon, ShieldIcon, UsersIcon, } from '@phosphor-icons/react';
+export const VALID_TABS = [
+    'members',
+    'git',
+    'tokens',
+    'settings',
+    'branding',
+    'billing',
+    'transactions',
+    'groups',
+    'access-projects',
+    'roles',
+    'identity',
+    'audit',
+    'help',
+];
+// Three groups. The unlabeled plumbing group (Settings/Git/Tokens —
+// name, security, repo, machine tokens) leads: "who am I and how is this
+// account configured" comes before "who else is in it" (Marko's call,
+// 2026-08-18 — was Access-first; moved Settings ahead of it). Everything
+// access-control-shaped lives in one "Access" cluster right after — Members /
+// Groups / Projects / Roles / Identity / Audit log / Help are all
+// facets of the same concern (who's in the account, what pools they're in,
+// what those pools can do, where they can do it, how they signed in, and what
+// happened) — deliberately not split into a separate "Enterprise" heading
+// (Marko's call, 2026-08-18: Identity/Audit are access control too, plan-gating
+// doesn't change what category they're in). Billing is unchanged.
+//
+// There is no "Agents" item: an agent is a project RESOURCE, not a principal,
+// so agent access is the Agents field on a project grant (`AccessDialog`), not
+// a tab of its own. Help closes the group — it is the old
+// `PermissionsHelpPopover`, promoted to a linkable pane.
+export const NAV_GROUPS = [
+    {
+        items: [
+            { id: 'settings', label: 'Settings', icon: GearSixIcon },
+            // Organization branding (Enterprise): the account's own logo, icon,
+            // favicon (light + dark), and product name for every member. Sits with
+            // the other "how is this account configured" items, not under Access.
+            { id: 'branding', label: 'Branding', icon: PaintBrushIcon },
+            { id: 'git', label: 'Git', icon: GitBranchIcon },
+            // "API keys" (Marko, 2026-09-03): the account's service-account keys, as
+            // opposed to a person's own keys under Preferences › Personal access
+            // keys. The id stays `tokens` — it is the `?tab=` segment.
+            { id: 'tokens', label: 'API keys', icon: KeyIcon },
+        ],
+    },
+    {
+        label: 'Access',
+        items: [
+            { id: 'members', label: 'Members', icon: UsersIcon },
+            { id: 'groups', label: 'Groups', icon: NetworkIcon },
+            { id: 'access-projects', label: 'Projects', icon: FolderOpenIcon },
+            { id: 'roles', label: 'Roles', icon: ShieldIcon },
+            { id: 'identity', label: 'Identity', icon: FingerprintIcon },
+            { id: 'audit', label: 'Audit log', icon: ScrollIcon },
+            { id: 'help', label: 'Help', icon: QuestionIcon },
+        ],
+    },
+    {
+        label: 'Billing',
+        items: [
+            { id: 'billing', label: 'Plan', icon: CreditCardIcon },
+            { id: 'transactions', label: 'Usage', icon: CoinsIcon },
+        ],
+    },
+];
+// Header block for sections whose content doesn't carry its own title.
+export const PANE_META = {
+    git: { title: 'Git', description: '' },
+    members: { title: 'Members', description: 'People with access to this account.' },
+    billing: { title: 'Plan', description: 'Plan, wallet, and spend for this account.' },
+    transactions: {
+        title: 'Usage',
+        description: 'Kortix charges and credit ledger for this account.',
+    },
+    tokens: {
+        title: 'API keys',
+        // Machine identities only. A person's own API keys moved to their own
+        // settings on 2026-08-18 (`/settings/tokens`).
+        description: 'Service account API keys for CI and automations, and the rules they follow.',
+    },
+    identity: {
+        title: 'Identity',
+        description: 'Bring members in from your identity provider.',
+    },
+    audit: {
+        title: 'Audit log',
+        description: "Read access to the account's own audit trail.",
+    },
+    roles: {
+        title: 'Roles',
+        description: 'Built-in and custom roles. Assign them from Members and Projects.',
+    },
+    help: {
+        title: 'Help',
+        description: 'How access works in this account.',
+    },
+    settings: { title: 'Settings', description: 'Name and security for this account.' },
+    branding: {
+        title: 'Branding',
+        description: 'Your logo, icon, favicon, and product name for everyone in this account.',
+    },
+};
+const ACCOUNT_SECTION_TRANSLATION_KEYS = {
+    ...ACCOUNT_HUB_TRANSLATION_KEYS,
+    ...REMAINING_UI_TRANSLATION_KEYS,
+};
+export function localizedAccountNavGroups(tI18nComplete) {
+    return localizeUiCatalog(NAV_GROUPS, tI18nComplete, ACCOUNT_SECTION_TRANSLATION_KEYS);
+}
+export function localizedAccountPaneMeta(tI18nComplete) {
+    return localizeUiCatalog(PANE_META, tI18nComplete, ACCOUNT_SECTION_TRANSLATION_KEYS);
+}
+const WIDE_SECTIONS = [
+    'groups',
+    'access-projects',
+    'roles',
+    'identity',
+    'help',
+    'audit',
+    'billing',
+];
+const PANE_WIDTH = {
+    members: 'fluid',
+    ...Object.fromEntries(WIDE_SECTIONS.map((section) => [section, 'wide'])),
+    transactions: 'full',
+};
+export function paneWidth(section) {
+    return PANE_WIDTH[section] ?? 'default';
+}
+/**
+ * `?tab=` → section, or `null` for anything that is not one. Legacy callers
+ * pass `tab=overview` — the limits/wallet/spend panels now live at the top of
+ * the Billing tab, so fold it. `usage` aliases the existing transactions pane.
+ */
+export function parseAccountSection(raw) {
+    const value = raw === 'overview' ? 'billing' : raw === 'usage' ? 'transactions' : raw;
+    return value && VALID_TABS.includes(value)
+        ? value
+        : null;
+}
+export function sectionLabel(section, tI18nComplete) {
+    const groups = tI18nComplete ? localizedAccountNavGroups(tI18nComplete) : NAV_GROUPS;
+    for (const group of groups) {
+        const item = group.items.find((entry) => entry.id === section);
+        if (item)
+            return item.label;
+    }
+    return section;
+}
+/**
+ * The breadcrumb for wherever the hub currently is:
+ * `Settings / <account name> / <where you are>`.
+ *
+ * Pure, and takes no URL at all — the hub has no URL of its own, only a
+ * `?accountId=` on the page it floats over. Its whole input is the resolved
+ * account, its name, the active section, and whether a setup wizard is on top
+ * of that section. Each crumb names a `HubTarget`, which `HubLink` turns into
+ * a real href for whatever page the modal is open on.
+ */
+export function accountHubCrumbs(input, tI18nComplete) {
+    const { accountId, activeSection, setup, accountName, memberId, memberName, projectId, projectName } = input;
+    // The root crumb goes to the account LIST — the hub with no account chosen.
+    const root = { label: tI18nComplete.raw('text74a883a037bc'), to: hubTarget(null) };
+    if (!accountId)
+        return [root, { label: tI18nComplete.raw('text8a7c8b67fe8b') }];
+    const account = accountName
+        ? { label: accountName, to: hubTarget(accountId), kind: 'account' }
+        : {
+            label: tI18nComplete.raw('text7e1b0d5641f2'),
+            to: hubTarget(accountId),
+            pending: true,
+            kind: 'account',
+        };
+    // A guided wizard sits ON a section, so it gets a fourth crumb and the third
+    // links back to the section's own pane.
+    if (setup === 'sso' || setup === 'scim') {
+        return [
+            root,
+            account,
+            {
+                label: tI18nComplete.raw('text999f23fcd7be'),
+                to: hubTarget(accountId, { tab: 'identity' }),
+            },
+            {
+                label: setup === 'sso'
+                    ? tI18nComplete.raw('text196534a6c8ac')
+                    : tI18nComplete.raw('textea1cf924a71b'),
+            },
+        ];
+    }
+    // A member's panel sits ON Members, so it gets a fourth crumb and the
+    // third links back to the list — the panel itself has no back link.
+    if (activeSection === 'members' && memberId) {
+        return [
+            root,
+            account,
+            {
+                label: sectionLabel('members', tI18nComplete),
+                to: hubTarget(accountId, { tab: 'members' }),
+            },
+            memberName ? { label: memberName } : { label: memberId, pending: true },
+        ];
+    }
+    // Same for a project's access panel: Projects / <project>.
+    if (activeSection === 'access-projects' && projectId) {
+        return [
+            root,
+            account,
+            {
+                label: sectionLabel('access-projects', tI18nComplete),
+                to: hubTarget(accountId, { tab: 'access-projects' }),
+            },
+            projectName ? { label: projectName } : { label: projectId, pending: true },
+        ];
+    }
+    return [root, account, { label: sectionLabel(activeSection, tI18nComplete) }];
+}

package/dist/internal/account-hub/use-account-detail.d.ts

@@ -0,0 +1,2 @@
+/** @internal Kortix apps only. No semver: it may change in any release. */
+export declare function useAccountDetail(accountId: string | undefined): import("@tanstack/react-query").UseQueryResult<import("@kortix/sdk").AccountDetail, Error>;

package/dist/internal/account-hub/use-account-detail.js

@@ -0,0 +1,20 @@
+'use client';
+/**
+ * The account record, read once and shared by the hub page and the settings
+ * shell's breadcrumb (which names the account in its middle crumb). One key,
+ * one fetcher, one `staleTime` — `branding-tab.tsx` and
+ * `member-access-panel.tsx` invalidate this same key after a rename, so both
+ * readers refresh together.
+ */
+import { getAccount } from '@kortix/sdk';
+import { useQuery } from '@tanstack/react-query';
+import { useUiViewerId } from '../../providers/ui-provider.js';
+export function useAccountDetail(accountId) {
+    const viewerId = useUiViewerId();
+    return useQuery({
+        queryKey: ['account', accountId],
+        queryFn: () => getAccount(accountId),
+        enabled: !!viewerId && !!accountId,
+        staleTime: 30_000,
+    });
+}