@plantops/ui 0.1.0

package/dist/index.js

@@ -0,0 +1,51 @@
+/**
+ * `@plantops/ui` — the shared React presentation layer for every PlantOps
+ * console (Doc 08 §2).
+ *
+ * Ant Design 6 supplies the components; this library supplies the *product*:
+ * the design tokens, the theme built from them, the shell every console renders
+ * inside, the icon-key registry Doc 05 §7 requires, and the handful of patterns
+ * that must not be reinvented per screen — page headers, list tables bound to
+ * the pagination envelope, status tags, and the four not-showing-data states.
+ *
+ * ## The rule that keeps it reusable
+ *
+ * Nothing here calls the IAM. The library depends on `@plantops/contracts` for
+ * types and on nothing else in the workspace — enforced by the `scope:ui`
+ * boundary in the root ESLint config — so a component takes data and callbacks
+ * and returns markup. The stateful half (a client, tokens, grants, navigation
+ * fetching) lives in `@plantops/web-kit`, which depends on this.
+ *
+ * That split is what makes the gatepass and visitor consoles cheap: they mount
+ * the same `<PlantOpsThemeProvider>` and `<AppShell>`, render the same
+ * `<NavMenu>` from their own `/iam/navigation` response, and inherit the
+ * product's appearance without inheriting the IAM's screens.
+ *
+ * ```tsx
+ * <PlantOpsThemeProvider>
+ *   <AppShell brand={<Brand product="Gatepass" />} nav={<NavMenu … />}>
+ *     <PageHeader title="Passes" />
+ *     <DataTable result={page} columns={columns} rowKey={(r) => r.id} />
+ *   </AppShell>
+ * </PlantOpsThemeProvider>
+ * ```
+ */
+export * from './data/data-table';
+export * from './data/scope-tree';
+export * from './data/scope-tree-select';
+export * from './data/status-tag';
+export * from './feedback/error-copy';
+export * from './feedback/page-header';
+export * from './feedback/state-panels';
+export * from './forms/auth-layout';
+export * from './forms/credentials-form';
+export * from './icons/icon-registry';
+export * from './layout/app-shell';
+export * from './layout/brand';
+export * from './layout/nav-menu';
+export * from './layout/nav-tree';
+export * from './layout/user-menu';
+export * from './theme/color-mode';
+export * from './theme/theme';
+export * from './theme/theme-provider';
+export * from './theme/tokens';

package/dist/layout/app-shell.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+export interface AppShellProps {
+    /** Usually a `<Brand>`. Rendered at the top of the sidebar. */
+    brand?: React.ReactNode;
+    /** Usually a `<NavMenu>`. Receives the collapsed state via `renderNav`. */
+    nav?: React.ReactNode;
+    /** Use instead of `nav` when the menu needs to know it is collapsed. */
+    renderNav?: (state: {
+        collapsed: boolean;
+    }) => React.ReactNode;
+    /** Pinned to the bottom of the sidebar — a version string, a support link. */
+    navFooter?: React.ReactNode;
+    /** Left of the header, after the collapse toggle — breadcrumbs, a title. */
+    headerLeft?: React.ReactNode;
+    /** Right of the header — usually a `<UserMenu>`. */
+    headerRight?: React.ReactNode;
+    children: React.ReactNode;
+    /** Controlled collapse. Omit to let the shell manage it. */
+    collapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+}
+export declare function AppShell({ brand, nav, renderNav, navFooter, headerLeft, headerRight, children, collapsed, onCollapsedChange, }: AppShellProps): React.ReactElement;
+//# sourceMappingURL=app-shell.d.ts.map

package/dist/layout/app-shell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../src/layout/app-shell.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,WAAW,aAAa;IAC5B,+DAA+D;IAC/D,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,2EAA2E;IAC3E,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,wEAAwE;IACxE,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,SAAS,EAAE,OAAO,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IAC/D,8EAA8E;IAC9E,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,4EAA4E;IAC5E,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,oDAAoD;IACpD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,4DAA4D;IAC5D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,GAAG,EACH,SAAS,EACT,SAAS,EACT,UAAU,EACV,WAAW,EACX,QAAQ,EACR,SAAS,EACT,iBAAiB,GAClB,EAAE,aAAa,GAAG,KAAK,CAAC,YAAY,CA+GpC"}

package/dist/layout/app-shell.js

@@ -0,0 +1,84 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The console frame: sidebar, header, content.
+ *
+ * Every authenticated screen in every PlantOps console renders inside one of
+ * these. It owns the chrome — the collapse state, the fixed header, the
+ * scrolling content region — and nothing else: what goes in the sidebar is a
+ * `nav` node, what goes in the header's right side is `headerRight`. That keeps
+ * the frame free of any knowledge of navigation, permissions or identity, which
+ * is what lets the gatepass and visitor consoles reuse it without inheriting
+ * the IAM's ideas about menus.
+ *
+ * ## Layout mechanics worth knowing
+ *
+ * The sidebar is `position: fixed` and the content region carries a matching
+ * inline offset. The alternative — a flex row with an overflowing child — makes
+ * the *page* scroll, which detaches the header from the viewport and puts the
+ * table header out of reach on a long user list. Fixed chrome plus one
+ * scrolling region is the behaviour an admin console needs.
+ */
+import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
+import { Button, Grid, Layout } from 'antd';
+import * as React from 'react';
+import { layout as layoutTokens, navSurface, spacing } from '../theme/tokens';
+const { Header, Sider, Content } = Layout;
+export function AppShell({ brand, nav, renderNav, navFooter, headerLeft, headerRight, children, collapsed, onCollapsedChange, }) {
+    const screens = Grid.useBreakpoint();
+    const [selfCollapsed, setSelfCollapsed] = React.useState(false);
+    const isControlled = collapsed !== undefined;
+    const effectiveCollapsed = isControlled ? collapsed : selfCollapsed;
+    const setCollapsed = React.useCallback((next) => {
+        if (!isControlled)
+            setSelfCollapsed(next);
+        onCollapsedChange?.(next);
+    }, [isControlled, onCollapsedChange]);
+    // Below `lg` there is not enough width for a 248px rail and a usable table,
+    // so the sidebar collapses to icons. Deliberately not a drawer: an operator
+    // switching between Users and Access all morning should not have to open a
+    // panel each time.
+    const isNarrow = screens.lg === false;
+    React.useEffect(() => {
+        if (isNarrow)
+            setCollapsed(true);
+    }, [isNarrow, setCollapsed]);
+    const siderWidth = effectiveCollapsed
+        ? layoutTokens.sidebarCollapsedWidth
+        : layoutTokens.sidebarWidth;
+    return (_jsxs(Layout, { style: { minHeight: '100vh' }, children: [_jsxs(Sider, { collapsible: true, collapsed: effectiveCollapsed, onCollapse: setCollapsed, trigger: null, width: layoutTokens.sidebarWidth, collapsedWidth: layoutTokens.sidebarCollapsedWidth, style: {
+                    position: 'fixed',
+                    insetBlock: 0,
+                    insetInlineStart: 0,
+                    zIndex: 20,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    borderInlineEnd: `1px solid ${navSurface.border}`,
+                }, children: [brand, _jsx("div", { style: {
+                            flex: 1,
+                            minHeight: 0,
+                            overflowY: 'auto',
+                            overflowX: 'hidden',
+                            paddingBlock: spacing.xs,
+                        }, children: renderNav === undefined ? nav : renderNav({ collapsed: effectiveCollapsed }) }), navFooter !== undefined && (_jsx("div", { style: {
+                            padding: spacing.sm,
+                            borderBlockStart: `1px solid ${navSurface.border}`,
+                            color: navSurface.text,
+                            fontSize: 12,
+                        }, children: navFooter }))] }), _jsxs(Layout, { style: {
+                    marginInlineStart: siderWidth,
+                    transition: 'margin-inline-start 0.2s',
+                }, children: [_jsxs(Header, { style: {
+                            position: 'sticky',
+                            top: 0,
+                            zIndex: 10,
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: spacing.md,
+                            borderBlockEnd: '1px solid var(--ant-color-border-secondary)',
+                        }, children: [_jsx(Button, { type: "text", "aria-label": effectiveCollapsed ? 'Expand navigation' : 'Collapse navigation', icon: effectiveCollapsed ? _jsx(MenuUnfoldOutlined, {}) : _jsx(MenuFoldOutlined, {}), onClick: () => setCollapsed(!effectiveCollapsed) }), _jsx("div", { style: { flex: 1, minWidth: 0 }, children: headerLeft }), headerRight] }), _jsx(Content, { style: {
+                            padding: spacing.lg,
+                            maxWidth: layoutTokens.contentMaxWidth,
+                            width: '100%',
+                        }, children: children })] })] }));
+}

package/dist/layout/brand.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export interface BrandProps {
+    /** The console's name — "IAM", "Gatepass". Hidden when collapsed. */
+    product?: string;
+    /** Icon-only, for the collapsed rail. */
+    collapsed?: boolean;
+    onClick?: () => void;
+}
+export declare function Brand({ product, collapsed, onClick, }: BrandProps): React.ReactElement;
+//# sourceMappingURL=brand.d.ts.map

package/dist/layout/brand.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"brand.d.ts","sourceRoot":"","sources":["../../src/layout/brand.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,UAAU;IACzB,qEAAqE;IACrE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yCAAyC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAyBD,wBAAgB,KAAK,CAAC,EACpB,OAAO,EACP,SAAiB,EACjB,OAAO,GACR,EAAE,UAAU,GAAG,KAAK,CAAC,YAAY,CAoDjC"}

package/dist/layout/brand.js

@@ -0,0 +1,48 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * The product mark at the top of the sidebar.
+ *
+ * A component rather than an `<img>` because every console in this monorepo
+ * shows the *same* PlantOps mark with a *different* word beside it — "IAM",
+ * "Gatepass", "Visitor" — and the thing that must not drift between them is the
+ * mark, not the word. Passing `product` keeps the drift impossible.
+ *
+ * The mark is inline SVG: a shared library that fetches an image from a path
+ * only some of its consumers serve is a broken logo waiting for the first
+ * deployment that does not copy the asset.
+ */
+import { Typography } from 'antd';
+import { navSurface, palette, spacing } from '../theme/tokens';
+/**
+ * The mark: three stacked bars narrowing upward inside a rounded square — a
+ * process vessel read from the side, which is as close to "plant operations"
+ * as an 20px glyph gets without becoming a picture of a factory.
+ */
+function Mark({ size = 28 }) {
+    return (_jsxs("svg", { width: size, height: size, viewBox: "0 0 32 32", role: "img", "aria-label": "PlantOps", focusable: "false", children: [_jsx("rect", { width: "32", height: "32", rx: "8", fill: palette.primary }), _jsx("rect", { x: "8", y: "8", width: "16", height: "4", rx: "2", fill: "#FFFFFF" }), _jsx("rect", { x: "10", y: "14", width: "12", height: "4", rx: "2", fill: "#FFFFFF", opacity: "0.8" }), _jsx("rect", { x: "12", y: "20", width: "8", height: "4", rx: "2", fill: "#FFFFFF", opacity: "0.6" })] }));
+}
+export function Brand({ product, collapsed = false, onClick, }) {
+    const content = (_jsxs(_Fragment, { children: [_jsx(Mark, {}), !collapsed && (_jsxs("span", { style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    lineHeight: 1.15,
+                    minWidth: 0,
+                }, children: [_jsx(Typography.Text, { strong: true, style: { color: navSurface.textSelected, fontSize: 15 }, children: "PlantOps" }), product !== undefined && (_jsx(Typography.Text, { style: { color: navSurface.text, fontSize: 11, letterSpacing: 0.6 }, children: product.toUpperCase() }))] }))] }));
+    const style = {
+        display: 'flex',
+        alignItems: 'center',
+        gap: spacing.sm,
+        height: 56,
+        padding: `0 ${collapsed ? spacing.md : spacing.lg}px`,
+        background: 'transparent',
+        border: 'none',
+        width: '100%',
+        cursor: onClick === undefined ? 'default' : 'pointer',
+        overflow: 'hidden',
+    };
+    if (onClick === undefined) {
+        return _jsx("div", { style: style, children: content });
+    }
+    return (_jsx("button", { type: "button", onClick: onClick, style: style, children: content }));
+}

package/dist/layout/nav-menu.d.ts

@@ -0,0 +1,30 @@
+/**
+ * The sidebar menu — a pure render of `GET /iam/navigation` (Doc 05 §7).
+ *
+ * The component holds no route table, no permission check and no idea which
+ * console it is in. It is handed a tree and a pathname and produces an antd
+ * `Menu`; if a node is in the tree the subject may see it, because the server
+ * already pruned everything they may not (Doc 05 §3). That is the whole
+ * contract, and it is what makes one component serve the platform console, the
+ * client console, and the gatepass and visitor consoles that follow.
+ *
+ * Navigation is a callback rather than a `next/link`: this library stays free
+ * of a router so that a console built on something other than the Next app
+ * router — or a Storybook page, or a test — can mount it unchanged.
+ */
+import type { NavNodeDTO } from '@plantops/contracts';
+import * as React from 'react';
+export interface NavMenuProps {
+    /** The `tree` field of the navigation response, rendered as-is. */
+    tree: readonly NavNodeDTO[];
+    /** Current location, for selection and sub-menu expansion. */
+    pathname: string;
+    /** Called with a node's `route` when the user picks a row. */
+    onNavigate: (route: string) => void;
+    /** Dark in both colour modes — see `tokens.ts`. */
+    theme?: 'dark' | 'light';
+    /** Collapsed rail: antd renders icons only and pops sub-menus out. */
+    collapsed?: boolean;
+}
+export declare function NavMenu({ tree, pathname, onNavigate, theme, collapsed, }: NavMenuProps): React.ReactElement;
+//# sourceMappingURL=nav-menu.d.ts.map

package/dist/layout/nav-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-menu.d.ts","sourceRoot":"","sources":["../../src/layout/nav-menu.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEtD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,YAAY;IAC3B,mEAAmE;IACnE,IAAI,EAAE,SAAS,UAAU,EAAE,CAAC;IAC5B,8DAA8D;IAC9D,QAAQ,EAAE,MAAM,CAAC;IACjB,8DAA8D;IAC9D,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,sEAAsE;IACtE,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AA8BD,wBAAgB,OAAO,CAAC,EACtB,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,KAAc,EACd,SAAiB,GAClB,EAAE,YAAY,GAAG,KAAK,CAAC,YAAY,CAoEnC"}

package/dist/layout/nav-menu.js

@@ -0,0 +1,75 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Menu } from 'antd';
+import * as React from 'react';
+import { NavIcon } from '../icons/icon-registry';
+import { navSelectionForPath } from './nav-tree';
+/**
+ * Builds antd's item tree, keyed by node id.
+ *
+ * Ids rather than the catalog `key` because the cross-application shell
+ * (Doc 05 §4, `GET /iam/navigation` with no `applicationId`) concatenates trees
+ * from several applications, and catalog keys are only unique *within* an
+ * application — two apps may each legitimately have a `settings` node.
+ */
+function toMenuItems(nodes) {
+    return nodes.map((node) => {
+        const icon = node.icon === null || node.icon === undefined ? undefined : (_jsx(NavIcon, { iconKey: node.icon }));
+        if (node.children.length > 0) {
+            return {
+                key: node.id,
+                icon,
+                label: node.label,
+                children: toMenuItems(node.children),
+            };
+        }
+        return { key: node.id, icon, label: node.label };
+    });
+}
+export function NavMenu({ tree, pathname, onNavigate, theme = 'dark', collapsed = false, }) {
+    const items = React.useMemo(() => toMenuItems(tree), [tree]);
+    const selection = React.useMemo(() => navSelectionForPath(tree, pathname), [tree, pathname]);
+    /**
+     * Which sub-menus are open.
+     *
+     * Seeded from the location and then owned by the user: re-deriving it on
+     * every render would slam a sub-menu shut the moment someone opened it to
+     * look at a sibling section. It *is* re-seeded when the location changes, so
+     * that a deep link or a back-button navigation reveals its own row.
+     */
+    const [openKeys, setOpenKeys] = React.useState(selection.openKeys);
+    // Keyed on the *derived* open keys rather than on the pathname alone. The
+    // tree arrives asynchronously, so a deep link into a sub-menu renders once
+    // with an empty tree — and a pathname-keyed seed would conclude it had
+    // already seeded for that URL and leave the sub-menu shut around the
+    // highlighted row.
+    const seedKey = `${pathname}|${selection.openKeys.join(',')}`;
+    const seededFor = React.useRef(seedKey);
+    if (seededFor.current !== seedKey) {
+        seededFor.current = seedKey;
+        // Union, not replacement: navigating within an open section should not
+        // collapse the other sections the user deliberately opened.
+        const merged = [...new Set([...openKeys, ...selection.openKeys])];
+        if (merged.length !== openKeys.length)
+            setOpenKeys(merged);
+    }
+    const routeById = React.useMemo(() => {
+        const map = new Map();
+        const walk = (nodes) => {
+            for (const node of nodes) {
+                if (typeof node.route === 'string' && node.route.trim() !== '') {
+                    map.set(node.id, node.route);
+                }
+                walk(node.children);
+            }
+        };
+        walk(tree);
+        return map;
+    }, [tree]);
+    const handleClick = React.useCallback(({ key }) => {
+        const route = routeById.get(String(key));
+        if (route !== undefined)
+            onNavigate(route);
+    }, [routeById, onNavigate]);
+    return (_jsx(Menu, { mode: "inline", theme: theme, items: items, selectedKeys: selection.selectedKeys, ...(collapsed ? {} : { openKeys, onOpenChange: (keys) => setOpenKeys(keys) }), onClick: handleClick, inlineIndent: 16, style: { borderInlineEnd: 'none', background: 'transparent' } }));
+}

package/dist/layout/nav-tree.d.ts

@@ -0,0 +1,67 @@
+/**
+ * Pure functions over the `NavNodeDTO` tree `GET /iam/navigation` returns.
+ *
+ * Separated from `nav-menu.tsx` so the interesting logic — which menu row is
+ * "current" for a given URL — is testable without rendering antd, and reusable
+ * by anything else that needs to reason about the menu: a breadcrumb, a
+ * command palette, a redirect that has to land somewhere the user can actually
+ * see.
+ *
+ * Nothing here knows a route literal. Every answer is derived from the tree the
+ * server sent (Doc 05 §7: the console "renders the returned tree directly — it
+ * does not maintain its own menu constants"), which is what lets a platform
+ * admin add a menu tonight and have it highlight correctly tomorrow with no
+ * deploy.
+ */
+import type { NavNodeDTO } from '@plantops/contracts';
+/** One routable node, with the path of container ids that leads to it. */
+export interface NavRouteEntry {
+    node: NavNodeDTO;
+    route: string;
+    /** Ids of the ancestors, outermost first — the sub-menus to open. */
+    ancestorIds: string[];
+}
+/**
+ * Every routable node in the tree, depth-first in display order.
+ *
+ * Containers are skipped: Doc 05 §3 calls a node with children a container and
+ * gives it no route, and a menu whose parent is clickable would make "open the
+ * sub-menu" and "go somewhere" the same gesture.
+ */
+export declare function flattenNavRoutes(tree: readonly NavNodeDTO[]): NavRouteEntry[];
+/**
+ * Where to send a user who has arrived at the application root.
+ *
+ * The first routable node in menu order, which for a pruned tree is the first
+ * screen this particular subject may see — so a platform admin and a gate
+ * supervisor land in different places from the same `/` without either being
+ * hardcoded. `null` when the subject's menu is empty, which the caller must
+ * handle: a subject with no grants exists (Doc 05 §3) and needs an explanation,
+ * not a redirect loop.
+ */
+export declare function firstNavRoute(tree: readonly NavNodeDTO[]): string | null;
+/**
+ * The node a URL belongs to: the longest route that prefixes it.
+ *
+ * Prefix rather than equality because a detail screen is not in the menu.
+ * `/admin/users/8f2c…` has to light up *Users*, and it does so by matching
+ * `/admin/users`. The "longest" part is what keeps `/admin/users/by-role` — a
+ * menu row in its own right — from being swallowed by its shorter sibling.
+ *
+ * The `/` boundary is required: without it `/admin/users-archive` would match
+ * `/admin/users`, and the wrong row would highlight on a screen the menu does
+ * not contain.
+ */
+export declare function findNavRouteForPath(tree: readonly NavNodeDTO[], pathname: string): NavRouteEntry | null;
+/** What antd's `Menu` needs to render the current location. */
+export interface NavSelection {
+    /** Ids of selected rows — at most one, but antd takes an array. */
+    selectedKeys: string[];
+    /** Ids of the sub-menus that must be open for the selection to be visible. */
+    openKeys: string[];
+}
+/** {@link findNavRouteForPath}, in the shape antd's `Menu` consumes. */
+export declare function navSelectionForPath(tree: readonly NavNodeDTO[], pathname: string): NavSelection;
+/** Ids of every container node — the full set of expandable sub-menus. */
+export declare function navContainerIds(tree: readonly NavNodeDTO[]): string[];
+//# sourceMappingURL=nav-tree.d.ts.map

package/dist/layout/nav-tree.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nav-tree.d.ts","sourceRoot":"","sources":["../../src/layout/nav-tree.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEtD,0EAA0E;AAC1E,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,WAAW,EAAE,MAAM,EAAE,CAAC;CACvB;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,SAAS,UAAU,EAAE,GAAG,aAAa,EAAE,CAiB7E;AAED;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,SAAS,UAAU,EAAE,GAAG,MAAM,GAAG,IAAI,CAExE;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,SAAS,UAAU,EAAE,EAC3B,QAAQ,EAAE,MAAM,GACf,aAAa,GAAG,IAAI,CAatB;AAED,+DAA+D;AAC/D,MAAM,WAAW,YAAY;IAC3B,mEAAmE;IACnE,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,8EAA8E;IAC9E,QAAQ,EAAE,MAAM,EAAE,CAAC;CACpB;AAED,wEAAwE;AACxE,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,SAAS,UAAU,EAAE,EAC3B,QAAQ,EAAE,MAAM,GACf,YAAY,CAId;AAED,0EAA0E;AAC1E,wBAAgB,eAAe,CAAC,IAAI,EAAE,SAAS,UAAU,EAAE,GAAG,MAAM,EAAE,CAYrE"}

package/dist/layout/nav-tree.js

@@ -0,0 +1,101 @@
+/**
+ * Pure functions over the `NavNodeDTO` tree `GET /iam/navigation` returns.
+ *
+ * Separated from `nav-menu.tsx` so the interesting logic — which menu row is
+ * "current" for a given URL — is testable without rendering antd, and reusable
+ * by anything else that needs to reason about the menu: a breadcrumb, a
+ * command palette, a redirect that has to land somewhere the user can actually
+ * see.
+ *
+ * Nothing here knows a route literal. Every answer is derived from the tree the
+ * server sent (Doc 05 §7: the console "renders the returned tree directly — it
+ * does not maintain its own menu constants"), which is what lets a platform
+ * admin add a menu tonight and have it highlight correctly tomorrow with no
+ * deploy.
+ */
+/**
+ * Every routable node in the tree, depth-first in display order.
+ *
+ * Containers are skipped: Doc 05 §3 calls a node with children a container and
+ * gives it no route, and a menu whose parent is clickable would make "open the
+ * sub-menu" and "go somewhere" the same gesture.
+ */
+export function flattenNavRoutes(tree) {
+    const entries = [];
+    const walk = (nodes, ancestorIds) => {
+        for (const node of nodes) {
+            const route = typeof node.route === 'string' ? node.route.trim() : '';
+            if (route !== '') {
+                entries.push({ node, route, ancestorIds });
+            }
+            if (node.children.length > 0) {
+                walk(node.children, [...ancestorIds, node.id]);
+            }
+        }
+    };
+    walk(tree, []);
+    return entries;
+}
+/**
+ * Where to send a user who has arrived at the application root.
+ *
+ * The first routable node in menu order, which for a pruned tree is the first
+ * screen this particular subject may see — so a platform admin and a gate
+ * supervisor land in different places from the same `/` without either being
+ * hardcoded. `null` when the subject's menu is empty, which the caller must
+ * handle: a subject with no grants exists (Doc 05 §3) and needs an explanation,
+ * not a redirect loop.
+ */
+export function firstNavRoute(tree) {
+    return flattenNavRoutes(tree)[0]?.route ?? null;
+}
+/**
+ * The node a URL belongs to: the longest route that prefixes it.
+ *
+ * Prefix rather than equality because a detail screen is not in the menu.
+ * `/admin/users/8f2c…` has to light up *Users*, and it does so by matching
+ * `/admin/users`. The "longest" part is what keeps `/admin/users/by-role` — a
+ * menu row in its own right — from being swallowed by its shorter sibling.
+ *
+ * The `/` boundary is required: without it `/admin/users-archive` would match
+ * `/admin/users`, and the wrong row would highlight on a screen the menu does
+ * not contain.
+ */
+export function findNavRouteForPath(tree, pathname) {
+    const path = normalizePath(pathname);
+    let best = null;
+    for (const entry of flattenNavRoutes(tree)) {
+        const route = normalizePath(entry.route);
+        const matches = path === route || path.startsWith(`${route}/`);
+        if (matches && (best === null || route.length > normalizePath(best.route).length)) {
+            best = entry;
+        }
+    }
+    return best;
+}
+/** {@link findNavRouteForPath}, in the shape antd's `Menu` consumes. */
+export function navSelectionForPath(tree, pathname) {
+    const match = findNavRouteForPath(tree, pathname);
+    if (match === null)
+        return { selectedKeys: [], openKeys: [] };
+    return { selectedKeys: [match.node.id], openKeys: match.ancestorIds };
+}
+/** Ids of every container node — the full set of expandable sub-menus. */
+export function navContainerIds(tree) {
+    const ids = [];
+    const walk = (nodes) => {
+        for (const node of nodes) {
+            if (node.children.length > 0) {
+                ids.push(node.id);
+                walk(node.children);
+            }
+        }
+    };
+    walk(tree);
+    return ids;
+}
+/** Trailing slashes off, empty becomes `/`. Comparisons need one spelling. */
+function normalizePath(value) {
+    const trimmed = value.trim().replace(/\/+$/, '');
+    return trimmed === '' ? '/' : trimmed;
+}

package/dist/layout/user-menu.d.ts

@@ -0,0 +1,20 @@
+import { type MenuProps } from 'antd';
+import * as React from 'react';
+export interface UserMenuProps {
+    /** Display name, falling back to the email when a user has no name yet. */
+    name: string;
+    /** The tenant's name or slug. */
+    tenant?: string | null;
+    /** Secondary line in the dropdown — normally the email. */
+    subtitle?: string | null;
+    onLogout: () => void;
+    /** Colour-mode toggle. Omit to hide the row. */
+    colorMode?: {
+        mode: 'light' | 'dark';
+        onToggle: () => void;
+    };
+    /** Rows inserted above the sign-out row. */
+    extraItems?: MenuProps['items'];
+}
+export declare function UserMenu({ name, tenant, subtitle, onLogout, colorMode, extraItems, }: UserMenuProps): React.ReactElement;
+//# sourceMappingURL=user-menu.d.ts.map

package/dist/layout/user-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"user-menu.d.ts","sourceRoot":"","sources":["../../src/layout/user-menu.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAgC,KAAK,SAAS,EAAE,MAAM,MAAM,CAAC;AACpE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,aAAa;IAC5B,2EAA2E;IAC3E,IAAI,EAAE,MAAM,CAAC;IACb,iCAAiC;IACjC,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,gDAAgD;IAChD,SAAS,CAAC,EAAE;QAAE,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IAC7D,4CAA4C;IAC5C,UAAU,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;CACjC;AAaD,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,UAAU,GACX,EAAE,aAAa,GAAG,KAAK,CAAC,YAAY,CAgFpC"}

package/dist/layout/user-menu.js

@@ -0,0 +1,75 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The signed-in subject, and what they can do about it.
+ *
+ * The header's right-hand control: who am I, which tenant am I in, log out.
+ * `tenant` is shown rather than tucked away because the same email can exist in
+ * two clients (Doc 06 §8 — "same email creatable under two different clients"),
+ * so "which PlantOps am I looking at" is a question the interface has to answer
+ * without being asked.
+ *
+ * Extra rows go in `extraItems` — "My sessions" arrives with the session
+ * screen, "Change password" with the profile screen — so this component never
+ * grows a prop per feature.
+ */
+import { LogoutOutlined, MoonOutlined, SunOutlined, UserOutlined } from '@ant-design/icons';
+import { Avatar, Dropdown, Typography } from 'antd';
+import { spacing } from '../theme/tokens';
+/** Two initials from a display name — "Priya Nair" → "PN", "ops@x" → "OP". */
+function initialsOf(name) {
+    const words = name.trim().split(/\s+/).filter((word) => word !== '');
+    const first = words.at(0) ?? '';
+    const last = words.at(-1) ?? '';
+    if (first === '')
+        return '?';
+    if (words.length === 1)
+        return first.slice(0, 2).toUpperCase();
+    return `${first.slice(0, 1)}${last.slice(0, 1)}`.toUpperCase();
+}
+export function UserMenu({ name, tenant, subtitle, onLogout, colorMode, extraItems, }) {
+    const items = [
+        {
+            key: 'identity',
+            type: 'group',
+            label: (_jsxs("span", { style: { display: 'block', padding: `${spacing.xxs}px 0` }, children: [_jsx(Typography.Text, { strong: true, style: { display: 'block' }, children: name }), subtitle != null && subtitle !== '' && (_jsx(Typography.Text, { type: "secondary", style: { fontSize: 12 }, children: subtitle }))] })),
+        },
+        { type: 'divider' },
+        ...(extraItems ?? []),
+        ...(colorMode === undefined
+            ? []
+            : [
+                {
+                    key: 'color-mode',
+                    icon: colorMode.mode === 'dark' ? _jsx(SunOutlined, {}) : _jsx(MoonOutlined, {}),
+                    label: colorMode.mode === 'dark' ? 'Light appearance' : 'Dark appearance',
+                    onClick: colorMode.onToggle,
+                },
+            ]),
+        { type: 'divider' },
+        {
+            key: 'logout',
+            icon: _jsx(LogoutOutlined, {}),
+            label: 'Sign out',
+            danger: true,
+            onClick: onLogout,
+        },
+    ];
+    return (_jsx(Dropdown, { menu: { items }, trigger: ['click'], placement: "bottomRight", children: _jsxs("button", { type: "button", style: {
+                display: 'flex',
+                alignItems: 'center',
+                gap: spacing.xs,
+                background: 'transparent',
+                border: 'none',
+                cursor: 'pointer',
+                padding: `${spacing.xxs}px ${spacing.xs}px`,
+                borderRadius: 6,
+                color: 'inherit',
+            }, children: [_jsx(Avatar, { size: 30, style: { background: 'var(--ant-color-primary)' }, children: name === '' ? _jsx(UserOutlined, {}) : initialsOf(name) }), _jsxs("span", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'flex-start',
+                        lineHeight: 1.2,
+                        maxWidth: 180,
+                    }, children: [_jsx(Typography.Text, { style: { fontSize: 13 }, ellipsis: true, children: name }), tenant != null && tenant !== '' && (_jsx(Typography.Text, { type: "secondary", style: { fontSize: 11 }, ellipsis: true, children: tenant }))] })] }) }));
+}