pixelize-design-library 2.4.2-beta.57 → 2.4.2-beta.59

package/dist/Components/NavLauncher/PinToggle.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = PinToggle;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const revealStyles_1 = require("./revealStyles");
+const STAR = "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z";
+function Star({ filled, size }) {
+    return ((0, jsx_runtime_1.jsx)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: filled ? "currentColor" : "none", stroke: "currentColor", strokeWidth: 1.7, strokeLinejoin: "round", "aria-hidden": true, children: (0, jsx_runtime_1.jsx)("path", { d: STAR }) }));
+}
+/** Star toggle: outline when unpinned, filled in the accent when pinned; appears on row hover or focus and never follows the row link. */
+function PinToggle({ isPinned, label, onToggle, title, size = 13, tabIndex }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": label, "aria-pressed": isPinned, title: title !== null && title !== void 0 ? title : label, icon: (0, jsx_runtime_1.jsx)(Star, { filled: isPinned, size: size }), variant: "ghost", minW: "22px", w: "22px", h: "22px", borderRadius: "md", tabIndex: tabIndex, color: isPinned ? colors.accentText : colors.textMuted, opacity: 0, transition: (0, motion_1.transitionFor)(["opacity", "background-color"]), sx: (0, revealStyles_1.revealStyles)(colors), onClick: (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            onToggle();
+        } }));
+}

package/dist/Components/NavLauncher/launcherParts.d.ts

@@ -0,0 +1,93 @@
+import { type ElementType, type KeyboardEvent, type MouseEvent, type ReactNode } from "react";
+import type { AppOption } from "../AppSwitcher/AppSwitcherProps";
+import type { LauncherLabels, LauncherModule, LauncherScreen } from "./NavLauncherProps";
+export declare const ITEM_SELECTOR = "[data-launcher-item]";
+export declare const isPlainClick: (event: MouseEvent) => boolean;
+export type LinkCtx = {
+    linkAs: ElementType;
+    onPlainClick: (event: MouseEvent) => void;
+};
+export declare const useRowHover: () => {
+    bg: string;
+    _hover: {
+        bg: string;
+    };
+    _focusWithin: {
+        bg: string;
+    };
+};
+type BadgeProps = {
+    value?: number | string;
+    size?: "row" | "tile";
+};
+export declare function CountBadge({ value, size }: BadgeProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function NewTag({ label }: {
+    label: string;
+}): import("react/jsx-runtime").JSX.Element;
+type SectionHeaderProps = {
+    label: string;
+    meta?: string;
+    isDecorative?: boolean;
+    isRail?: boolean;
+    hasCount?: boolean;
+};
+export declare function SectionHeader({ label, meta, isDecorative, isRail, hasCount, }: SectionHeaderProps): import("react/jsx-runtime").JSX.Element;
+type RowIconProps = {
+    icon?: ElementType;
+    size: number;
+    stroke?: number;
+    mt?: string;
+};
+export declare function RowIcon({ icon: Icon, size, stroke, mt }: RowIconProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Highlight({ text, query }: {
+    text: string;
+    query: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function RowActions({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function RowTip({ text }: {
+    text: string;
+}): import("react/jsx-runtime").JSX.Element;
+type ModuleRowProps = {
+    module: LauncherModule;
+    keyScreens: LauncherScreen[];
+    isPinned: boolean;
+    onTogglePin?: () => void;
+    pinId: string;
+    labels: LauncherLabels;
+    link: LinkCtx;
+};
+export declare function ModuleRow({ module, keyScreens, isPinned, onTogglePin, pinId, labels, link, }: ModuleRowProps): import("react/jsx-runtime").JSX.Element;
+type RailRowProps = {
+    screen: LauncherScreen;
+    module: LauncherModule;
+    link: LinkCtx;
+    isStrong?: boolean;
+    trailing?: ReactNode;
+    pinId?: string;
+};
+export declare function RailRow({ screen, module, link, isStrong, trailing, pinId, }: RailRowProps): import("react/jsx-runtime").JSX.Element;
+type PinTextButtonProps = {
+    label: string;
+    text: string;
+    onToggle: () => void;
+};
+export declare function PinTextButton({ label, text, onToggle }: PinTextButtonProps): import("react/jsx-runtime").JSX.Element;
+type PinnedTileProps = {
+    screen: LauncherScreen;
+    module: LauncherModule;
+    link: LinkCtx;
+    labels: LauncherLabels;
+    onTogglePin?: () => void;
+};
+export declare function PinnedTile({ screen, module, link, labels, onTogglePin, }: PinnedTileProps): import("react/jsx-runtime").JSX.Element;
+type AppsSectionProps = {
+    apps: readonly AppOption[];
+    hues: readonly string[];
+    currentAppId?: string;
+    heading: string;
+    onSelect: (app: AppOption, event: MouseEvent | KeyboardEvent) => void;
+};
+export declare function AppsSection({ apps, hues, currentAppId, heading, onSelect, }: AppsSectionProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Components/NavLauncher/launcherParts.js

@@ -0,0 +1,130 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRowHover = exports.isPlainClick = exports.ITEM_SELECTOR = void 0;
+exports.CountBadge = CountBadge;
+exports.NewTag = NewTag;
+exports.SectionHeader = SectionHeader;
+exports.RowIcon = RowIcon;
+exports.Highlight = Highlight;
+exports.RowActions = RowActions;
+exports.RowTip = RowTip;
+exports.ModuleRow = ModuleRow;
+exports.RailRow = RailRow;
+exports.PinTextButton = PinTextButton;
+exports.PinnedTile = PinnedTile;
+exports.AppsSection = AppsSection;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const react_2 = require("react");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
+const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const AppMark_1 = __importDefault(require("../AppSwitcher/AppMark"));
+const match_1 = require("./match");
+const NewTabLink_1 = __importDefault(require("./NewTabLink"));
+const PinToggle_1 = __importDefault(require("./PinToggle"));
+const revealStyles_1 = require("./revealStyles");
+exports.ITEM_SELECTOR = "[data-launcher-item]";
+const isPlainClick = (event) => event.button === 0 &&
+    !event.metaKey &&
+    !event.ctrlKey &&
+    !event.shiftKey &&
+    !event.altKey;
+exports.isPlainClick = isPlainClick;
+const useRowHover = () => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const hover = (0, rowStates_1.listRowBackgrounds)(colors).active;
+    return { bg: hover, _hover: { bg: hover }, _focusWithin: { bg: hover } };
+};
+exports.useRowHover = useRowHover;
+function CountBadge({ value, size = "row" }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    if (value === undefined || value === 0 || value === "")
+        return null;
+    const fill = (0, filledSurface_1.resolveFilledSurface)(colors.primary, colors);
+    const isRow = size === "row";
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", flexShrink: 0, minW: isRow ? "20px" : undefined, h: isRow ? "18px" : "17px", px: "6px", mr: isRow ? "2px" : 0, borderRadius: "full", bg: fill.fill, color: fill.color, fontSize: isRow ? "10.5px" : "10px", fontWeight: 700, display: "inline-flex", alignItems: "center", justifyContent: "center", sx: { fontVariantNumeric: "tabular-nums" }, children: value }));
+}
+function NewTag({ label }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", flexShrink: 0, fontSize: "10px", fontWeight: 600, letterSpacing: "0.02em", color: colors.accentText, opacity: 0.85, children: label }));
+}
+function SectionHeader({ label, meta, isDecorative = false, isRail = false, hasCount = true, }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "baseline", gap: "6px", px: isRail ? "4px" : "8px", pb: "5px", mb: hasCount ? 0 : "2px", borderBottomWidth: "1px", borderColor: colors.boxborder[200], "aria-hidden": isDecorative || undefined, children: [(0, jsx_runtime_1.jsx)(react_1.Heading, { as: isDecorative ? "div" : "h2", m: 0, fontSize: "12.5px", fontWeight: 600, letterSpacing: "-0.003em", color: colors.text[900], children: label }), meta ? ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "11.5px", color: colors.textMuted, sx: { fontVariantNumeric: "tabular-nums" }, children: meta })) : null] }));
+}
+function RowIcon({ icon: Icon, size, stroke = 1.75, mt }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    if (!Icon)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: colors.textMuted, display: "inline-flex", flexShrink: 0, mt: mt, transition: (0, motion_1.transitionFor)(["color"]), _groupHover: { color: colors.accentText }, _groupFocusWithin: { color: colors.accentText }, sx: { "[data-reveal=true] &": { color: colors.accentText } }, children: (0, jsx_runtime_1.jsx)(Icon, { size: size, strokeWidth: stroke, "aria-hidden": true }) }));
+}
+function Highlight({ text, query }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, match_1.highlightSegments)(text, query).map((segment, i) => segment.isMatch ? ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "mark", bg: colors.primary.opacity[24], color: "inherit", borderRadius: "3px", px: "1px", children: segment.text }, i)) : ((0, jsx_runtime_1.jsx)(react_2.Fragment, { children: segment.text }, i))) }));
+}
+function RowActions({ children }) {
+    return ((0, jsx_runtime_1.jsx)(react_1.Flex, { position: "absolute", top: "7px", right: "4px", h: "19px", align: "center", gap: "2px", zIndex: 1, children: children }));
+}
+function RowTip({ text }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { role: "tooltip", position: "absolute", right: "20px", top: "-26px", zIndex: 2, px: "8px", py: "3px", borderRadius: "6px", fontSize: "11px", fontWeight: 600, whiteSpace: "nowrap", bg: colors.text[900], color: colors.surfaceRaised, visibility: "hidden", pointerEvents: "none", _groupHover: { visibility: "visible" }, children: text }));
+}
+function ModuleRow({ module, keyScreens, isPinned, onTogglePin, pinId, labels, link, }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const hover = (0, exports.useRowHover)();
+    const ring = (0, focusRing_styles_1.focusVisibleStyles)(colors);
+    const base = typeof module.badge === "number" || module.badge ? 24 : 0;
+    const open = base + (onTogglePin ? 46 : 24);
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { "data-group": true, "data-nav-cell": true, position: "relative", align: "flex-start", gap: "10px", minH: "34px", pl: "8px", pr: "4px", pt: "7px", pb: "5px", borderRadius: "8px", transition: (0, motion_1.transitionFor)(["background-color"]), _hover: hover._hover, _focusWithin: hover._focusWithin, children: [(0, jsx_runtime_1.jsx)(RowIcon, { icon: module.icon, size: 16, mt: "2px" }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", flex: 1, minW: 0, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "6px", h: "19px", minW: 0, pr: `${base}px`, _groupHover: { pr: `${open}px` }, _groupFocusWithin: { pr: `${open}px` }, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { as: link.linkAs, href: module.href, "data-launcher-item": true, "data-pin-id": onTogglePin ? pinId : undefined, title: module.label, onClick: link.onPlainClick, minW: 0, fontSize: "13.5px", fontWeight: 500, color: colors.text[900], noOfLines: 1, borderRadius: "sm", sx: ring, children: module.label }), module.isNew ? (0, jsx_runtime_1.jsx)(NewTag, { label: labels.newBadge }) : null] }), keyScreens.length ? ((0, jsx_runtime_1.jsx)(react_1.Box, { role: "group", "aria-label": `${module.label} ${labels.screens}`, fontSize: "11.5px", lineHeight: "15px", color: colors.textMuted, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", children: keyScreens.map((screen, i) => ((0, jsx_runtime_1.jsxs)(react_2.Fragment, { children: [i > 0 ? ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", "aria-hidden": true, mx: "5px", opacity: 0.7, children: "\u00B7" })) : null, (0, jsx_runtime_1.jsx)(react_1.Box, { as: link.linkAs, href: screen.href, "data-launcher-item": true, title: `${screen.label} — ${module.label}`, onClick: link.onPlainClick, color: "inherit", borderRadius: "sm", _hover: {
+                                        textDecoration: "underline",
+                                        textUnderlineOffset: "2px",
+                                    }, sx: ring, children: screen.label })] }, screen.id))) })) : null] }), (0, jsx_runtime_1.jsxs)(RowActions, { children: [(0, jsx_runtime_1.jsx)(CountBadge, { value: module.badge }), onTogglePin ? ((0, jsx_runtime_1.jsx)(PinToggle_1.default, { isPinned: isPinned, label: isPinned ? labels.unpin(module.label) : labels.pin(module.label), title: "", onToggle: onTogglePin })) : null, (0, jsx_runtime_1.jsx)(NewTabLink_1.default, { href: module.href, label: labels.openInNewTab(module.label), linkAs: link.linkAs })] }), onTogglePin ? ((0, jsx_runtime_1.jsx)(RowTip, { text: isPinned ? labels.unpinTip : labels.pinTip })) : null] }));
+}
+function RailRow({ screen, module, link, isStrong = false, trailing, pinId, }) {
+    var _a;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const hover = (0, exports.useRowHover)();
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { "data-group": true, align: "center", gap: "10px", h: "32px", pl: "8px", pr: "4px", borderRadius: "8px", transition: (0, motion_1.transitionFor)(["background-color"]), _hover: hover._hover, _focusWithin: hover._focusWithin, children: [(0, jsx_runtime_1.jsx)(RowIcon, { icon: (_a = screen.icon) !== null && _a !== void 0 ? _a : module.icon, size: 15 }), (0, jsx_runtime_1.jsx)(react_1.Box, { as: link.linkAs, href: screen.href, "data-launcher-item": true, "data-pin-id": pinId, onClick: link.onPlainClick, flex: 1, minW: 0, fontSize: "13px", fontWeight: isStrong ? 500 : 400, color: colors.text[900], noOfLines: 1, borderRadius: "sm", sx: (0, focusRing_styles_1.focusVisibleStyles)(colors), children: screen.label }), trailing] }));
+}
+function PinTextButton({ label, text, onToggle }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", "aria-label": label, flexShrink: 0, h: "22px", px: "7px", display: "inline-flex", alignItems: "center", gap: "4px", borderRadius: "6px", borderWidth: "1px", borderColor: colors.boxborder[200], bg: colors.surfaceRaised, color: colors.text[700], fontSize: "11px", fontWeight: 600, cursor: "pointer", opacity: 0, transition: (0, motion_1.transitionFor)(["opacity", "background-color"]), sx: { ...(0, revealStyles_1.revealStyles)(colors), "@media (hover: none)": { opacity: 1 } }, onClick: (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            onToggle();
+        }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 11, strokeWidth: 2, "aria-hidden": true }), text] }));
+}
+function PinnedTile({ screen, module, link, labels, onTogglePin, }) {
+    var _a;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const Icon = (_a = screen.icon) !== null && _a !== void 0 ? _a : module.icon;
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { "data-group": true, align: "center", gap: "8px", h: "36px", pl: "9px", pr: "4px", borderRadius: "9px", borderWidth: "1px", borderColor: colors.boxborder[200], bg: colors.surfaceRaised, title: screen.label, transition: (0, motion_1.transitionFor)(["border-color"]), _hover: { borderColor: colors.gray[300] }, children: [Icon ? ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", display: "inline-flex", flexShrink: 0, color: colors.accentText, children: (0, jsx_runtime_1.jsx)(Icon, { size: 15, strokeWidth: 1.8, "aria-hidden": true }) })) : null, (0, jsx_runtime_1.jsx)(react_1.Box, { as: link.linkAs, href: screen.href, "data-launcher-item": true, "data-pin-id": onTogglePin ? screen.id : undefined, onClick: link.onPlainClick, flex: 1, minW: 0, fontSize: "13px", fontWeight: 500, color: colors.text[900], noOfLines: 1, borderRadius: "sm", sx: (0, focusRing_styles_1.focusVisibleStyles)(colors), children: screen.label }), (0, jsx_runtime_1.jsx)(CountBadge, { value: screen.badge, size: "tile" }), onTogglePin ? ((0, jsx_runtime_1.jsx)(react_1.Box, { flexShrink: 0, w: "0", overflow: "hidden", transition: (0, motion_1.transitionFor)(["width"]), _groupHover: { w: "22px" }, _groupFocusWithin: { w: "22px" }, children: (0, jsx_runtime_1.jsx)(PinToggle_1.default, { isPinned: true, size: 12, label: labels.unpin(screen.label), title: labels.unpinTip, onToggle: onTogglePin }) })) : null] }));
+}
+function AppsSection({ apps, hues, currentAppId, heading, onSelect, }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const rows = (0, rowStates_1.listRowBackgrounds)(colors);
+    const ring = (0, focusRing_styles_1.focusVisibleStyles)(colors);
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { children: [(0, jsx_runtime_1.jsx)(SectionHeader, { label: heading, isRail: true, hasCount: false }), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "ul", listStyleType: "none", m: 0, p: 0, "aria-label": heading, children: apps.map((app, index) => {
+                    var _a;
+                    const isCurrent = app.id === currentAppId;
+                    const interactive = !isCurrent && !app.locked;
+                    return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "li", children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { as: interactive ? "a" : "div", ...(interactive
+                                ? {
+                                    href: app.url,
+                                    target: "_blank",
+                                    rel: "noopener noreferrer",
+                                    "data-launcher-item": true,
+                                    onClick: (event) => onSelect(app, event),
+                                }
+                                : {}), "aria-current": isCurrent ? "true" : undefined, title: app.locked
+                                ? ((_a = app.lockedReason) !== null && _a !== void 0 ? _a : `${app.name} is not available on your plan`)
+                                : undefined, "data-app-locked": app.locked ? "true" : undefined, align: "center", gap: 3, minH: "44px", px: 2, py: 1, borderRadius: "8px", textDecoration: "none", cursor: interactive ? "pointer" : "default", bg: isCurrent ? rows.selected : "transparent", transition: (0, motion_1.transitionFor)(["background-color"]), _hover: interactive ? { bg: rows.active } : undefined, sx: ring, children: [(0, jsx_runtime_1.jsx)(AppMark_1.default, { app: app, hue: hues[index], boxSize: "28px", iconSize: 15, muted: app.locked }), (0, jsx_runtime_1.jsx)(react_1.Text, { flex: 1, minW: 0, fontSize: "sm", fontWeight: "medium", noOfLines: 1, color: app.locked ? colors.textMuted : colors.text[900], children: app.name }), app.locked ? ((0, jsx_runtime_1.jsx)(react_1.Box, { as: lucide_react_1.Lock, size: 14, color: colors.textMuted, flexShrink: 0, "aria-hidden": true })) : null] }) }, app.id || app.name));
+                }) })] }));
+}

package/dist/Components/NavLauncher/match.d.ts

@@ -0,0 +1,53 @@
+import type { LauncherIcon, LauncherResultGroup, LauncherSearchItem, LauncherSection } from "./NavLauncherProps";
+export type LauncherResult = {
+    id: string;
+    label: string;
+    context?: string;
+    icon?: LauncherIcon;
+    hint?: string;
+    badge?: number | string;
+    href?: string;
+    run?: () => void;
+    screenId?: string;
+    /** Set on `searchLauncherSections` rows: a module row or one of its screens. */
+    kind?: "module" | "screen";
+    /** Keyword that matched a module or screen whose own name did not. */
+    keywordHint?: string;
+    isNew?: boolean;
+};
+export type LauncherResultView = {
+    id: string;
+    label: string;
+    items: LauncherResult[];
+};
+export declare function flattenScreens(sections: readonly LauncherSection[]): LauncherResult[];
+export declare function searchLauncher(input: {
+    query: string;
+    sections: readonly LauncherSection[];
+    actions?: readonly LauncherSearchItem[];
+    extraResults?: readonly LauncherResultGroup[];
+    screensLabel: string;
+    actionsLabel: string;
+}): LauncherResultView[];
+export type LauncherSectionResult = {
+    id: string;
+    label: string;
+    items: LauncherResult[];
+};
+/** Search that keeps the sections: per section, matching modules, each followed by its matching screens. */
+export declare function searchLauncherSections(input: {
+    query: string;
+    sections: readonly LauncherSection[];
+    actions?: readonly LauncherSearchItem[];
+    extraResults?: readonly LauncherResultGroup[];
+    actionsLabel: string;
+}): {
+    sections: LauncherSectionResult[];
+    groups: LauncherResultView[];
+};
+export type HighlightSegment = {
+    text: string;
+    isMatch: boolean;
+};
+/** Splits `text` so every case-insensitive occurrence of a query token is its own matched segment. */
+export declare function highlightSegments(text: string, query: string): HighlightSegment[];

package/dist/Components/NavLauncher/match.js

@@ -0,0 +1,178 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.flattenScreens = flattenScreens;
+exports.searchLauncher = searchLauncher;
+exports.searchLauncherSections = searchLauncherSections;
+exports.highlightSegments = highlightSegments;
+const normalize = (text) => text.toLocaleLowerCase().normalize("NFKD");
+function score(label, haystack, tokens) {
+    if (!tokens.every((t) => haystack.includes(t)))
+        return null;
+    const l = normalize(label);
+    const q = tokens.join(" ");
+    if (l === q)
+        return 0;
+    if (l.startsWith(q))
+        return 1;
+    if (l.split(/\s+/).some((w) => w.startsWith(tokens[0])))
+        return 2;
+    return l.includes(tokens[0]) ? 3 : 4;
+}
+function rank(rows, text, tokens) {
+    return rows
+        .map((row, index) => ({
+        row,
+        index,
+        s: score(row.label, normalize(text(row)), tokens),
+    }))
+        .filter((r) => r.s !== null)
+        .sort((a, b) => a.s - b.s || a.index - b.index)
+        .map((r) => r.row);
+}
+function flattenScreens(sections) {
+    var _a, _b, _c;
+    const seen = new Set();
+    const out = [];
+    for (const section of sections) {
+        for (const module of section.modules) {
+            for (const screen of module.screens) {
+                if (seen.has(screen.id))
+                    continue;
+                seen.add(screen.id);
+                out.push({
+                    id: `screen:${screen.id}`,
+                    screenId: screen.id,
+                    label: screen.label,
+                    context: screen.label === module.label ? section.label : module.label,
+                    icon: (_a = screen.icon) !== null && _a !== void 0 ? _a : module.icon,
+                    badge: screen.badge,
+                    href: screen.href,
+                    keywords: [module.label, ...((_b = module.keywords) !== null && _b !== void 0 ? _b : []), ...((_c = screen.keywords) !== null && _c !== void 0 ? _c : [])].join(" "),
+                });
+            }
+        }
+    }
+    return out;
+}
+function searchLauncher(input) {
+    var _a, _b;
+    const tokens = normalize(input.query).split(/\s+/).filter(Boolean);
+    if (tokens.length === 0)
+        return [];
+    const screens = flattenScreens(input.sections);
+    const actions = rank(((_a = input.actions) !== null && _a !== void 0 ? _a : []).map((a) => ({ ...a, id: `action:${a.id}` })), (a) => { var _a, _b; return `${a.label} ${(_a = a.context) !== null && _a !== void 0 ? _a : ""} ${(_b = a.keywords) !== null && _b !== void 0 ? _b : ""}`; }, tokens);
+    const groups = [
+        { id: "actions", label: input.actionsLabel, items: actions },
+        {
+            id: "screens",
+            label: input.screensLabel,
+            items: rank(screens, (s) => { var _a; return `${s.label} ${(_a = s.context) !== null && _a !== void 0 ? _a : ""} ${s.keywords}`; }, tokens),
+        },
+        ...((_b = input.extraResults) !== null && _b !== void 0 ? _b : []).map((g) => ({
+            id: g.id,
+            label: g.label,
+            items: g.items.map((i) => ({ ...i, id: `${g.id}:${i.id}` })),
+        })),
+    ];
+    return groups.filter((g) => g.items.length > 0);
+}
+function matchNameOrKeyword(label, keywords, tokens) {
+    const name = normalize(label);
+    if (tokens.every((t) => name.includes(t)))
+        return {};
+    const terms = keywords.map(normalize);
+    const all = `${name} ${terms.join(" ")}`;
+    if (!tokens.every((t) => all.includes(t)))
+        return null;
+    const hit = keywords.find((_, i) => tokens.some((t) => terms[i].includes(t)));
+    return { keyword: hit !== null && hit !== void 0 ? hit : keywords[0] };
+}
+/** Search that keeps the sections: per section, matching modules, each followed by its matching screens. */
+function searchLauncherSections(input) {
+    var _a, _b, _c, _d, _e, _f;
+    const tokens = normalize(input.query).split(/\s+/).filter(Boolean);
+    if (tokens.length === 0)
+        return { sections: [], groups: [] };
+    const seen = new Set();
+    const sections = [];
+    for (const section of input.sections) {
+        const items = [];
+        for (const module of section.modules) {
+            const moduleHit = matchNameOrKeyword(module.label, (_a = module.keywords) !== null && _a !== void 0 ? _a : [], tokens);
+            if (moduleHit) {
+                items.push({
+                    id: `module:${module.id}`,
+                    kind: "module",
+                    label: module.label,
+                    keywordHint: moduleHit.keyword,
+                    icon: module.icon,
+                    badge: module.badge,
+                    isNew: module.isNew,
+                    href: module.href,
+                    screenId: (_b = module.screens[0]) === null || _b === void 0 ? void 0 : _b.id,
+                });
+            }
+            for (const screen of module.screens) {
+                if (screen.label === module.label || seen.has(screen.id))
+                    continue;
+                if (!matchNameOrKeyword(screen.label, (_c = screen.keywords) !== null && _c !== void 0 ? _c : [], tokens))
+                    continue;
+                seen.add(screen.id);
+                items.push({
+                    id: `screen:${screen.id}`,
+                    kind: "screen",
+                    label: screen.label,
+                    context: module.label,
+                    icon: (_d = screen.icon) !== null && _d !== void 0 ? _d : module.icon,
+                    badge: screen.badge,
+                    href: screen.href,
+                });
+            }
+        }
+        if (items.length > 0)
+            sections.push({ id: section.id, label: section.label, items });
+    }
+    const actions = rank(((_e = input.actions) !== null && _e !== void 0 ? _e : []).map((a) => ({ ...a, id: `action:${a.id}` })), (a) => { var _a, _b; return `${a.label} ${(_a = a.context) !== null && _a !== void 0 ? _a : ""} ${(_b = a.keywords) !== null && _b !== void 0 ? _b : ""}`; }, tokens);
+    const groups = [
+        { id: "actions", label: input.actionsLabel, items: actions },
+        ...((_f = input.extraResults) !== null && _f !== void 0 ? _f : []).map((g) => ({
+            id: g.id,
+            label: g.label,
+            items: g.items.map((i) => ({ ...i, id: `${g.id}:${i.id}` })),
+        })),
+    ].filter((g) => g.items.length > 0);
+    return { sections, groups };
+}
+/** Splits `text` so every case-insensitive occurrence of a query token is its own matched segment. */
+function highlightSegments(text, query) {
+    const lower = text.toLocaleLowerCase();
+    const tokens = query.toLocaleLowerCase().split(/\s+/).filter(Boolean);
+    if (tokens.length === 0 || lower.length !== text.length)
+        return [{ text, isMatch: false }];
+    const ranges = [];
+    for (const token of tokens) {
+        for (let at = lower.indexOf(token); at !== -1; at = lower.indexOf(token, at + token.length)) {
+            ranges.push([at, at + token.length]);
+        }
+    }
+    ranges.sort((a, b) => a[0] - b[0]);
+    const merged = [];
+    for (const range of ranges) {
+        const last = merged[merged.length - 1];
+        if (last && range[0] <= last[1])
+            last[1] = Math.max(last[1], range[1]);
+        else
+            merged.push([...range]);
+    }
+    const out = [];
+    let cursor = 0;
+    for (const [start, end] of merged) {
+        if (start > cursor)
+            out.push({ text: text.slice(cursor, start), isMatch: false });
+        out.push({ text: text.slice(start, end), isMatch: true });
+        cursor = end;
+    }
+    if (cursor < text.length)
+        out.push({ text: text.slice(cursor), isMatch: false });
+    return out.length ? out : [{ text, isMatch: false }];
+}

package/dist/Components/NavLauncher/revealStyles.d.ts

@@ -0,0 +1,4 @@
+import type { SystemStyleObject } from "@chakra-ui/react";
+import type { PaletteProps } from "../../Theme/tokens/types";
+/** Shows a row affordance on row hover, row focus-within or its own keyboard focus, and always on touch. */
+export declare const revealStyles: (colors: PaletteProps) => SystemStyleObject;

package/dist/Components/NavLauncher/revealStyles.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.revealStyles = void 0;
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const motion_1 = require("../../Theme/chakra/motion");
+/** Shows a row affordance on row hover, row focus-within or its own keyboard focus, and always on touch. */
+const revealStyles = (colors) => {
+    const ring = (0, focusRing_styles_1.focusVisibleStyles)(colors);
+    return {
+        ...ring,
+        _focusVisible: { ...ring._focusVisible, opacity: 1 },
+        _groupHover: { opacity: 1 },
+        _groupFocusWithin: { opacity: 1 },
+        "[data-reveal=true] &": { opacity: 1 },
+        "@media (hover: none)": { opacity: 1 },
+        ...(0, motion_1.reducedMotionSx)(),
+    };
+};
+exports.revealStyles = revealStyles;

package/dist/Components/NavigationBar/NavigationBar.d.ts

@@ -1,2 +1,2 @@
 import { NavbarProps } from "./NavigationBarProps";
-export default function NavBar({ userAvathar, userName, userRole, navMenu, moreIcon, handleNavOnClick, handleLogout, logoutText, navigationBarText, sideBarToggole, onSideBarToggole, forceSideBarToggle, onSideBarPeek, }: NavbarProps): import("react/jsx-runtime").JSX.Element;
+export default function NavBar({ userAvathar, userName, userRole, navMenu, moreIcon, handleNavOnClick, handleLogout, logoutText, navigationBarText, sideBarToggole, onSideBarToggole, forceSideBarToggle, onSideBarPeek, leading, }: NavbarProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/NavigationBar/NavigationBar.js

@@ -16,7 +16,7 @@ const PersonChip_1 = __importDefault(require("../PersonChip/PersonChip"));
 const lucide_react_1 = require("lucide-react");
 // Roomy enough to hover without aiming: the glyph is only 1.25rem.
 const SIDEBAR_TOGGLE_HIT = "2.5rem";
-function NavBar({ userAvathar, userName, userRole, navMenu, moreIcon, handleNavOnClick, handleLogout, logoutText, navigationBarText, sideBarToggole, onSideBarToggole, forceSideBarToggle = false, onSideBarPeek, }) {
+function NavBar({ userAvathar, userName, userRole, navMenu, moreIcon, handleNavOnClick, handleLogout, logoutText, navigationBarText, sideBarToggole, onSideBarToggole, forceSideBarToggle = false, onSideBarPeek, leading, }) {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const rowBackgrounds = (0, rowStates_1.listRowBackgrounds)(theme.colors);
     const menuHoverBg = rowBackgrounds.active;
@@ -52,7 +52,7 @@ function NavBar({ userAvathar, userName, userRole, navMenu, moreIcon, handleNavO
         _focus: { bg: menuHoverBg },
         _active: { bg: rowBackgrounds.selectedActive },
     };
-    return ((0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.backgroundColor.light, px: 4, borderBottom: "1px solid", borderColor: theme.colors.boxborder[200], children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { h: 16, alignItems: "center", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", gap: 1.5, alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", onClick: () => onSideBarToggole === null || onSideBarToggole === void 0 ? void 0 : onSideBarToggole(), onMouseEnter: onSideBarPeek, onFocus: onSideBarPeek, "aria-label": sideBarToggole ? "Close navigation menu" : "Open navigation menu", "aria-expanded": !!sideBarToggole, ...iconButtonStyle, display: forceSideBarToggle ? "flex" : { base: "flex", lg: "none" }, w: SIDEBAR_TOGGLE_HIT, h: SIDEBAR_TOGGLE_HIT, children: sideBarToggole ? ((0, jsx_runtime_1.jsx)(lucide_react_1.PanelLeftClose, { size: "1.25rem" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.PanelRightClose, { size: "1.25rem" })) }), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) && ((0, jsx_runtime_1.jsx)(react_1.Box, { ...iconButtonStyle, as: "button", type: "button", "aria-label": "Go back", display: "flex", onClick: () => { var _a; return (_a = navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) === null || _a === void 0 ? void 0 : _a.call(navigationBarText); }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.CircleArrowLeft, { size: "1.25rem", color: theme.colors.text[500] }) })), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text) && ((0, jsx_runtime_1.jsx)(react_1.Text, { color: (0, accentText_1.accentTextOnCanvas)(theme.colors.secondary, theme.colors.backgroundColor.light), fontSize: "1.25rem", fontWeight: 600, fontFamily: "open-sans, sans-serif", letterSpacing: "-0.013rem", children: navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text }))] }), (0, jsx_runtime_1.jsx)(react_1.Flex, { minW: 0, flexShrink: 1, children: (0, jsx_runtime_1.jsxs)(react_1.Stack, { direction: "row", alignItems: "center", spacing: 4, minW: 0, children: [moreIcon && ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", minW: 0, children: moreIcon })), (0, jsx_runtime_1.jsxs)(react_1.Menu, { children: [(0, jsx_runtime_1.jsx)(react_1.MenuButton, { as: react_1.Button, rounded: "full", variant: "link", cursor: "pointer", minW: 0, flexShrink: 0, children: (0, jsx_runtime_1.jsx)(Avatar_1.default, { size: "sm", name: userName, src: userAvathar }) }), (0, jsx_runtime_1.jsx)(react_1.MenuList, { alignItems: "center", zIndex: 5, p: 0, py: "0.375rem", 
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.backgroundColor.light, px: 4, borderBottom: "1px solid", borderColor: theme.colors.boxborder[200], children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { h: 16, alignItems: "center", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", gap: 1.5, alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", onClick: () => onSideBarToggole === null || onSideBarToggole === void 0 ? void 0 : onSideBarToggole(), onMouseEnter: onSideBarPeek, onFocus: onSideBarPeek, "aria-label": sideBarToggole ? "Close navigation menu" : "Open navigation menu", "aria-expanded": !!sideBarToggole, ...iconButtonStyle, display: forceSideBarToggle ? "flex" : { base: "flex", lg: "none" }, w: SIDEBAR_TOGGLE_HIT, h: SIDEBAR_TOGGLE_HIT, children: sideBarToggole ? ((0, jsx_runtime_1.jsx)(lucide_react_1.PanelLeftClose, { size: "1.25rem" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.PanelRightClose, { size: "1.25rem" })) }), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) && ((0, jsx_runtime_1.jsx)(react_1.Box, { ...iconButtonStyle, as: "button", type: "button", "aria-label": "Go back", display: "flex", onClick: () => { var _a; return (_a = navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) === null || _a === void 0 ? void 0 : _a.call(navigationBarText); }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.CircleArrowLeft, { size: "1.25rem", color: theme.colors.text[500] }) })), leading && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [leading, (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", "aria-hidden": "true", mx: 2, w: "1px", h: "1.625rem", bg: theme.colors.boxborder[200] })] })), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text) && ((0, jsx_runtime_1.jsx)(react_1.Text, { color: (0, accentText_1.accentTextOnCanvas)(theme.colors.secondary, theme.colors.backgroundColor.light), fontSize: "1.25rem", fontWeight: 600, fontFamily: "open-sans, sans-serif", letterSpacing: "-0.013rem", children: navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text }))] }), (0, jsx_runtime_1.jsx)(react_1.Flex, { minW: 0, flexShrink: 1, children: (0, jsx_runtime_1.jsxs)(react_1.Stack, { direction: "row", alignItems: "center", spacing: 4, minW: 0, children: [moreIcon && ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", minW: 0, children: moreIcon })), (0, jsx_runtime_1.jsxs)(react_1.Menu, { children: [(0, jsx_runtime_1.jsx)(react_1.MenuButton, { as: react_1.Button, rounded: "full", variant: "link", cursor: "pointer", minW: 0, flexShrink: 0, children: (0, jsx_runtime_1.jsx)(Avatar_1.default, { size: "sm", name: userName, src: userAvathar }) }), (0, jsx_runtime_1.jsx)(react_1.MenuList, { alignItems: "center", zIndex: 5, p: 0, py: "0.375rem", 
                                         // Without a cap one long title stretches the whole dropdown; titles truncate instead.
                                         maxW: "18rem", bg: theme.colors.surfaceRaised, 
                                         // NOTE: Chakra's MenuItem inherits --menu-bg hardcoded to #fff via dead _dark — set it or items stay white.

package/dist/Components/NavigationBar/NavigationBarProps.d.ts

@@ -28,6 +28,8 @@ export type NavbarProps = {
      * same state the SideBar's `peekOpen` reads; it closes itself when the pointer leaves.
      */
     onSideBarPeek?: () => void;
+    /** Rendered between the sidebar toggle/back button and the title, outside the title element, followed by a 1px divider. */
+    leading?: ReactNode;
 };
 /** One navMenu entry (id/title/url/icon) — unrelated to Chakra's own MenuProps despite the shared name. */
 export type MenuProps = {

package/dist/Components/PageHeader/PageHeader.d.ts

@@ -1,4 +1,4 @@
 import type { PageHeaderProps } from "./PageHeaderProps";
 /** Page header: h1 title, muted subtitle, right-aligned actions that wrap under on narrow screens. */
-declare const PageHeader: ({ title, subtitle, actions, breadcrumbs, leading, titleAddon, meta, tabs, "data-testid": testId, }: PageHeaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const PageHeader: ({ title, subtitle, actions, breadcrumbs, leading, titleAddon, meta, tabs, titleSize, actionsLayout, "data-testid": testId, }: PageHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export default PageHeader;

package/dist/Components/PageHeader/PageHeader.js

@@ -3,9 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const TITLE_STYLES = {
+    md: { fontSize: "lg", fontWeight: 600, letterSpacing: "-0.01em" },
+    lg: { fontSize: "2xl", fontWeight: 700, letterSpacing: "-0.02em", lineHeight: 1.2 },
+    xl: { fontSize: { base: "2xl", md: "3xl" }, fontWeight: 700, letterSpacing: "-0.025em", lineHeight: 1.2 },
+};
 /** Page header: h1 title, muted subtitle, right-aligned actions that wrap under on narrow screens. */
-const PageHeader = ({ title, subtitle, actions, breadcrumbs, leading, titleAddon, meta, tabs, "data-testid": testId, }) => {
+const PageHeader = ({ title, subtitle, actions, breadcrumbs, leading, titleAddon, meta, tabs, titleSize = "md", actionsLayout = "auto", "data-testid": testId, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", gap: 3, "data-testid": testId, children: [breadcrumbs && ((0, jsx_runtime_1.jsx)(react_1.Box, { fontSize: "sm", color: colors.textMuted, sx: { "[aria-current=page]": { color: colors.text[800] } }, children: breadcrumbs })), (0, jsx_runtime_1.jsxs)(react_1.Flex, { justify: "space-between", align: { base: "flex-start", md: "center" }, direction: { base: "column", md: "row" }, gap: 3, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { gap: 3, align: "center", minW: 0, children: [leading && (0, jsx_runtime_1.jsx)(react_1.Box, { flexShrink: 0, children: leading }), (0, jsx_runtime_1.jsxs)(react_1.Box, { minW: 0, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, wrap: "wrap", children: [(0, jsx_runtime_1.jsx)(react_1.Heading, { as: "h1", fontSize: "lg", fontWeight: 600, letterSpacing: "-0.01em", color: colors.header[900], children: title }), titleAddon] }), subtitle && ((0, jsx_runtime_1.jsx)(react_1.Text, { mt: 0.5, fontSize: "sm", color: colors.textMuted, children: subtitle })), meta && ((0, jsx_runtime_1.jsx)(react_1.Flex, { mt: 1, columnGap: 4, rowGap: 1, wrap: "wrap", align: "center", fontSize: "xs", color: colors.textMuted, children: meta }))] })] }), actions && ((0, jsx_runtime_1.jsx)(react_1.Flex, { gap: 2, wrap: "wrap", align: "center", flexShrink: 0, children: actions }))] }), tabs && (0, jsx_runtime_1.jsx)(react_1.Box, { children: tabs })] }));
+    const wraps = actionsLayout === "auto";
+    const stacked = actionsLayout === "stacked";
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", gap: 3, "data-testid": testId, children: [breadcrumbs && ((0, jsx_runtime_1.jsx)(react_1.Box, { fontSize: "sm", color: colors.textMuted, sx: { "[aria-current=page]": { color: colors.text[800] } }, children: breadcrumbs })), (0, jsx_runtime_1.jsxs)(react_1.Flex, { justify: "space-between", align: stacked ? "flex-start" : { base: "flex-start", md: "center" }, direction: stacked ? "column" : { base: "column", md: "row" }, wrap: wraps ? "wrap" : "nowrap", gap: 3, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { gap: 3, align: "center", minW: 0, flex: wraps ? { base: "0 1 auto", md: "1 1 16rem" } : undefined, children: [leading && (0, jsx_runtime_1.jsx)(react_1.Box, { flexShrink: 0, children: leading }), (0, jsx_runtime_1.jsxs)(react_1.Box, { minW: 0, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, wrap: "wrap", children: [(0, jsx_runtime_1.jsx)(react_1.Heading, { as: "h1", ...TITLE_STYLES[titleSize], color: colors.header[900], children: title }), titleAddon] }), subtitle && ((0, jsx_runtime_1.jsx)(react_1.Text, { mt: 0.5, fontSize: "sm", color: colors.textMuted, children: subtitle })), meta && ((0, jsx_runtime_1.jsx)(react_1.Flex, { mt: 1, columnGap: 4, rowGap: 1, wrap: "wrap", align: "center", fontSize: "xs", color: colors.textMuted, children: meta }))] })] }), actions && ((0, jsx_runtime_1.jsx)(react_1.Flex, { gap: 2, wrap: "wrap", align: "center", flexShrink: wraps ? undefined : 0, children: actions }))] }), tabs && (0, jsx_runtime_1.jsx)(react_1.Box, { children: tabs })] }));
 };
 exports.default = PageHeader;

package/dist/Components/PageHeader/PageHeaderProps.d.ts

@@ -16,5 +16,13 @@ export interface PageHeaderProps {
     meta?: ReactNode;
     /** Rendered full-width below the whole header, e.g. a Tabs list. */
     tabs?: ReactNode;
+    /** "md" = 18px/600 (default); "lg" = 24px/700; "xl" = 24px, 30px from `md`, 700, tighter tracking. */
+    titleSize?: PageHeaderTitleSize;
+    /** "auto" (default) wraps actions below the title whenever they don't fit beside it; "stacked" always stacks; "inline" never wraps from `md` up. */
+    actionsLayout?: PageHeaderActionsLayout;
     "data-testid"?: string;
 }
+/** Title ramp step. */
+export type PageHeaderTitleSize = "md" | "lg" | "xl";
+/** How the actions row sits against the title block. */
+export type PageHeaderActionsLayout = "auto" | "stacked" | "inline";