pixelize-design-library 2.4.2-beta.58 → 2.4.2-beta.60

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";

package/dist/Components/PdfViewer/PdfViewer.d.ts

@@ -1,15 +1,32 @@
 import React from "react";
+/** Visible strings; every key falls back to its English default. */
+export type PdfViewerLabels = Partial<{
+    open: string;
+    download: string;
+    unsupported: string;
+    failed: string;
+}>;
 export interface PdfViewerProps {
-    /** Rendered via a native browser <embed> — no fallback UI if the browser can't show PDFs inline. */
-    pdfUrl: string;
-    /** File name shown in the toolbar. */
+    /** URL of the PDF, rendered via a native browser <embed>; pass exactly one of `pdfUrl` / `getBlob`. */
+    pdfUrl?: string;
+    /** Source as a blob getter instead of a URL — for authed files; the viewer makes and revokes the object URL. */
+    getBlob?: () => Promise<Blob>;
+    /** File name shown in the toolbar and used as the download name. */
     fileName?: string;
     /** Height of the embed. */
     height?: string;
-    /** Show the toolbar (name + open + download). */
+    /** Show the toolbar (name + open + download); set false when the caller renders its own file actions. */
     showToolbar?: boolean;
     /** Border radius of the frame. */
     borderRadius?: string;
+    /** What shows when inline PDF is unsupported or loading failed. Default: message + Open + Download. */
+    fallback?: React.ReactNode;
+    /** Fires when the embed loads; in blob mode, when the file bytes are ready (<embed> has no reliable load event). */
+    onLoad?: () => void;
+    /** Fires when `getBlob` rejects or an on-demand Open/Download fetch fails. */
+    onError?: (error: unknown) => void;
+    labels?: PdfViewerLabels;
+    "data-testid"?: string;
 }
 /** Always-inline PDF embed panel (never a modal) — for a modal previewer of images/video/other too, use FilePreview. */
 declare const PdfViewer: React.FC<PdfViewerProps>;

package/dist/Components/PdfViewer/PdfViewer.js

@@ -4,18 +4,139 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("@chakra-ui/react");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
+const Button_1 = __importDefault(require("../Button/Button"));
+const Skeletons_1 = __importDefault(require("../Skeletons/Skeletons"));
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
+const DEFAULT_LABELS = {
+    open: "Open in new tab",
+    download: "Download",
+    unsupported: "This browser can't display PDFs inline. Open or download the file instead.",
+    failed: "The document could not be loaded.",
+};
+const canEmbedPdf = () => typeof navigator === "undefined" || navigator.pdfViewerEnabled !== false;
+const asPdf = (blob) => (blob.type ? blob : new Blob([blob], { type: "application/pdf" }));
 /** Always-inline PDF embed panel (never a modal) — for a modal previewer of images/video/other too, use FilePreview. */
-const PdfViewer = ({ pdfUrl, fileName = "Document.pdf", height = "480px", showToolbar = true, borderRadius = "xl", }) => {
+const PdfViewer = ({ pdfUrl, getBlob, fileName = "Document.pdf", height = "480px", showToolbar = true, borderRadius = "xl", fallback, onLoad, onError, labels, "data-testid": testId, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const text = { ...DEFAULT_LABELS, ...labels };
     const toolbarSurface = theme.colors.background[50];
     const iconHoverInk = (0, accentText_1.accentTextOnCanvas)(theme.colors.primary, toolbarSurface);
     const iconHoverBg = (0, rowStates_1.listRowBackgrounds)(theme.colors).active;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { border: "1px solid", borderColor: theme.colors.gray[200], borderRadius: borderRadius, overflow: "hidden", bg: theme.colors.background[50], children: [showToolbar && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", justify: "space-between", px: 4, py: 2.5, borderBottom: "1px solid", borderColor: theme.colors.gray[100], bg: theme.colors.background[50], children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, minW: 0, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.FileText, { size: 18, color: theme.colors.accentText }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", fontWeight: 500, color: theme.colors.gray[700], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileName })] }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 1, children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Open in new tab", placement: "top", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "a", href: pdfUrl, target: "_blank", rel: "noopener noreferrer", "aria-label": `Open ${fileName} in a new tab`, p: 2, borderRadius: "lg", color: theme.colors.gray[600], _hover: { bg: iconHoverBg, color: iconHoverInk }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 16 }) }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Download", placement: "top", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "a", href: pdfUrl, download: fileName, "aria-label": `Download ${fileName}`, p: 2, borderRadius: "lg", color: theme.colors.gray[600], _hover: { bg: iconHoverBg, color: iconHoverInk }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 16 }) }) })] })] })), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "embed", src: pdfUrl, type: "application/pdf", width: "100%", height: height, display: "block" })] }));
+    const supported = canEmbedPdf();
+    const isBlobMode = Boolean(getBlob);
+    const getBlobRef = (0, react_1.useRef)(getBlob);
+    const onLoadRef = (0, react_1.useRef)(onLoad);
+    const onErrorRef = (0, react_1.useRef)(onError);
+    getBlobRef.current = getBlob;
+    onLoadRef.current = onLoad;
+    onErrorRef.current = onError;
+    const [status, setStatus] = (0, react_1.useState)(isBlobMode && supported ? "loading" : "idle");
+    const [objectUrl, setObjectUrl] = (0, react_1.useState)(null);
+    const tempUrls = (0, react_1.useRef)([]);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (!isBlobMode || !supported)
+            return undefined;
+        let cancelled = false;
+        let created = null;
+        setStatus("loading");
+        setObjectUrl(null);
+        (_a = getBlobRef.current) === null || _a === void 0 ? void 0 : _a.call(getBlobRef).then((blob) => {
+            var _a;
+            if (cancelled)
+                return;
+            created = URL.createObjectURL(asPdf(blob));
+            setObjectUrl(created);
+            setStatus("ready");
+            (_a = onLoadRef.current) === null || _a === void 0 ? void 0 : _a.call(onLoadRef);
+        }, (error) => {
+            var _a;
+            if (cancelled)
+                return;
+            setStatus("error");
+            (_a = onErrorRef.current) === null || _a === void 0 ? void 0 : _a.call(onErrorRef, error);
+        });
+        return () => {
+            cancelled = true;
+            if (created)
+                URL.revokeObjectURL(created);
+        };
+    }, [isBlobMode, supported]);
+    (0, react_1.useEffect)(() => () => {
+        tempUrls.current.forEach((url) => URL.revokeObjectURL(url));
+        tempUrls.current = [];
+    }, []);
+    const makeTempUrl = (0, react_1.useCallback)((blob) => {
+        const url = URL.createObjectURL(asPdf(blob));
+        tempUrls.current.push(url);
+        return url;
+    }, []);
+    const openBlob = () => {
+        var _a;
+        if (objectUrl) {
+            window.open(objectUrl, "_blank", "noopener");
+            return;
+        }
+        const tab = window.open("", "_blank");
+        (_a = getBlobRef.current) === null || _a === void 0 ? void 0 : _a.call(getBlobRef).then((blob) => {
+            const url = makeTempUrl(blob);
+            if (tab)
+                tab.location.href = url;
+            else
+                window.location.assign(url);
+        }, (error) => {
+            var _a;
+            tab === null || tab === void 0 ? void 0 : tab.close();
+            (_a = onErrorRef.current) === null || _a === void 0 ? void 0 : _a.call(onErrorRef, error);
+        });
+    };
+    const downloadBlob = () => {
+        var _a;
+        (_a = getBlobRef.current) === null || _a === void 0 ? void 0 : _a.call(getBlobRef).then((blob) => {
+            const link = document.createElement("a");
+            link.href = makeTempUrl(blob);
+            link.download = fileName;
+            document.body.appendChild(link);
+            link.click();
+            link.remove();
+        }, (error) => { var _a; return (_a = onErrorRef.current) === null || _a === void 0 ? void 0 : _a.call(onErrorRef, error); });
+    };
+    const toolbarLabel = (kind) => {
+        if (labels === null || labels === void 0 ? void 0 : labels[kind])
+            return `${labels[kind]} ${fileName}`;
+        return kind === "open" ? `Open ${fileName} in a new tab` : `Download ${fileName}`;
+    };
+    const actionStyle = {
+        p: 2,
+        borderRadius: "lg",
+        color: theme.colors.gray[600],
+        _hover: { bg: iconHoverBg, color: iconHoverInk },
+    };
+    const openAction = isBlobMode ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", onClick: openBlob, "aria-label": toolbarLabel("open"), ...actionStyle, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 16, "aria-hidden": "true" }) })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "a", href: pdfUrl, target: "_blank", rel: "noopener noreferrer", "aria-label": toolbarLabel("open"), ...actionStyle, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 16, "aria-hidden": "true" }) }));
+    const downloadAction = isBlobMode && !objectUrl ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", onClick: downloadBlob, "aria-label": toolbarLabel("download"), ...actionStyle, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 16, "aria-hidden": "true" }) })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "a", href: objectUrl !== null && objectUrl !== void 0 ? objectUrl : pdfUrl, download: fileName, "aria-label": toolbarLabel("download"), ...actionStyle, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 16, "aria-hidden": "true" }) }));
+    const showFallback = !supported || status === "error";
+    const isLoading = isBlobMode && supported && status === "loading";
+    const renderFallback = () => {
+        if (fallback !== undefined)
+            return fallback;
+        return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", align: "flex-start", gap: 3, p: 4, "data-testid": "pdf-fallback", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { role: "status", fontSize: "sm", color: theme.colors.textMuted, children: supported ? text.failed : text.unsupported }), !showToolbar && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 2, wrap: "wrap", children: [(0, jsx_runtime_1.jsx)(Button_1.default, { variant: "outline", colorScheme: "gray", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 16, "aria-hidden": "true" }), label: text.open, onClick: isBlobMode ? openBlob : () => window.open(pdfUrl, "_blank", "noopener"), "data-testid": "pdf-open" }), (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "outline", colorScheme: "gray", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 16, "aria-hidden": "true" }), label: text.download, onClick: isBlobMode ? downloadBlob : directDownload(pdfUrl, fileName), "data-testid": "pdf-download" })] }))] }));
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { border: "1px solid", borderColor: theme.colors.gray[200], borderRadius: borderRadius, overflow: "hidden", bg: theme.colors.background[50], "data-testid": testId, children: [showToolbar && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", px: 4, py: 2.5, borderBottom: "1px solid", borderColor: theme.colors.gray[100], bg: theme.colors.background[50], children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, minW: 0, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.FileText, { size: 18, color: theme.colors.accentText, "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: 500, color: theme.colors.gray[700], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileName })] }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: text.open, placement: "top", children: openAction }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: text.download, placement: "top", children: downloadAction })] })] })), showFallback ? (renderFallback()) : isLoading ? ((0, jsx_runtime_1.jsx)(react_2.Box, { "aria-busy": "true", "data-testid": "pdf-loading", children: (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: height, width: "100%", borderRadius: "0" }) })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "embed", src: objectUrl !== null && objectUrl !== void 0 ? objectUrl : pdfUrl, type: "application/pdf", title: fileName, onLoad: isBlobMode ? undefined : () => { var _a; return (_a = onLoadRef.current) === null || _a === void 0 ? void 0 : _a.call(onLoadRef); }, width: "100%", height: height, display: "block" }))] }));
+};
+const directDownload = (url, fileName) => () => {
+    if (!url)
+        return;
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = fileName;
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
 };
 exports.default = PdfViewer;

package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewer.js

@@ -13,6 +13,11 @@ const color_1 = require("../../Theme/tokens/builders/color");
 function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth = "100px", imageAlt = "Profile Photo", imageObjectFit = "cover", imageBorderRadius = "full", editIconSize = "sm", editIconPositionRight = "0px", editIconPositionBottom = "0px", isRound = true, boxStyle, isEditable = false, isView = false, style, handleIsView, fallbackText, revealOnHover = true, }) {
     var _a, _b, _c, _d, _e;
     const [photo, setPhoto] = (0, react_1.useState)(photoUrl);
+    const [syncedUrl, setSyncedUrl] = (0, react_1.useState)(photoUrl);
+    if (photoUrl !== syncedUrl) {
+        setSyncedUrl(photoUrl);
+        setPhoto(photoUrl);
+    }
     const fileInputRef = (0, react_1.useRef)(null);
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const c = theme.colors;

package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewerProps.d.ts

@@ -1,6 +1,6 @@
 /** isEditable and isView are independent — both true shows edit and view actions side by side. */
 export type ProfilePhotoViewerProps = {
-    /** Seeds state on mount only — a later change to this prop is not re-synced; remount (key={photoUrl}) to update. */
+    /** Source of the displayed image; a changed value replaces it, discarding a locally picked preview. */
     photoUrl: string;
     /** Receives the raw File (not a URL, despite the param name) — fires only when isEditable and a file is picked. */
     onPhotoChange: (photoUrl: File) => void;

package/dist/Components/QueryState/QueryStateBoundary.d.ts

@@ -1,4 +1,4 @@
 import type { QueryStateBoundaryProps } from "./QueryStateProps";
-/** Renders one of loading / error / empty / children for a content region; agnostic of the fetching library. */
-declare const QueryStateBoundary: ({ isLoading, error, isEmpty, loadingFallback, emptyFallback, empty, errorTitle, errorDescription, onRetry, isRetrying, minH, children, }: QueryStateBoundaryProps) => import("react/jsx-runtime").JSX.Element;
+/** Renders one of loading / forbidden / error / empty / children for a content region; agnostic of the fetching library. */
+declare const QueryStateBoundary: ({ isLoading, isForbidden, forbidden, hasData, error, isEmpty, loadingFallback, emptyFallback, empty, errorTitle, errorDescription, onRetry, isRetrying, minH, children, }: QueryStateBoundaryProps) => import("react/jsx-runtime").JSX.Element;
 export default QueryStateBoundary;

package/dist/Components/QueryState/QueryStateBoundary.js

@@ -5,15 +5,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
 const EmptyState_1 = __importDefault(require("../EmptyState/EmptyState"));
 const Skeletons_1 = __importDefault(require("../Skeletons/Skeletons"));
 const ErrorState_1 = __importDefault(require("./ErrorState"));
 const DefaultLoading = () => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { role: "status", direction: "column", gap: 4, w: "100%", py: 2, children: [(0, jsx_runtime_1.jsx)(react_1.VisuallyHidden, { children: "Loading" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 4, width: "40%" }), Array.from({ length: 4 }, (_, i) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", gap: 2, children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 2.5, width: "100%" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 2.5, width: "70%" })] }, i)))] }));
 const hasError = (error) => error !== undefined && error !== null && error !== false;
-/** Renders one of loading / error / empty / children for a content region; agnostic of the fetching library. */
-const QueryStateBoundary = ({ isLoading = false, error, isEmpty = false, loadingFallback, emptyFallback, empty, errorTitle, errorDescription, onRetry, isRetrying, minH = "24rem", children, }) => {
-    if (isLoading)
+/** Renders one of loading / forbidden / error / empty / children for a content region; agnostic of the fetching library. */
+const QueryStateBoundary = ({ isLoading = false, isForbidden = false, forbidden, hasData = false, error, isEmpty = false, loadingFallback, emptyFallback, empty, errorTitle, errorDescription, onRetry, isRetrying, minH = "24rem", children, }) => {
+    var _a, _b, _c;
+    if (isLoading && !hasData)
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: loadingFallback !== null && loadingFallback !== void 0 ? loadingFallback : (0, jsx_runtime_1.jsx)(DefaultLoading, {}) });
+    const forbiddenNow = typeof isForbidden === "function" ? hasError(error) && isForbidden(error) : isForbidden;
+    if (forbiddenNow) {
+        return ((0, jsx_runtime_1.jsx)(react_1.Box, { role: "status", w: "100%", children: (0, jsx_runtime_1.jsx)(EmptyState_1.default, { colorScheme: "gray", icon: (_a = forbidden === null || forbidden === void 0 ? void 0 : forbidden.icon) !== null && _a !== void 0 ? _a : lucide_react_1.Lock, title: (_b = forbidden === null || forbidden === void 0 ? void 0 : forbidden.title) !== null && _b !== void 0 ? _b : "You don't have access", description: (_c = forbidden === null || forbidden === void 0 ? void 0 : forbidden.description) !== null && _c !== void 0 ? _c : "Ask an administrator to give you access to view this.", action: forbidden === null || forbidden === void 0 ? void 0 : forbidden.action, minH: minH }) }));
+    }
     if (hasError(error)) {
         const description = typeof errorDescription === "function" ? errorDescription(error) : errorDescription;
         return ((0, jsx_runtime_1.jsx)(ErrorState_1.default, { title: errorTitle, description: description, onRetry: onRetry, isRetrying: isRetrying, minH: minH }));

package/dist/Components/QueryState/QueryStateProps.d.ts

@@ -20,10 +20,27 @@ export interface ErrorStateProps {
     size?: EmptyStateProps["size"];
     minH?: EmptyStateProps["minH"];
 }
-/** Picks loading → error → empty → children; `children` may be a function so data is read only when ready. */
+/** Copy for the no-access panel; each field falls back to a generic default. */
+export interface QueryStateForbiddenProps {
+    /** Defaults to "You don't have access". */
+    title?: string;
+    /** Defaults to a line asking the reader to request access. */
+    description?: string;
+    /** Defaults to a lock icon. */
+    icon?: ElementType;
+    /** Node(s) under the description, e.g. a "Request access" button. */
+    action?: ReactNode;
+}
+/** Picks loading → forbidden → error → empty → children; `children` may be a function so data is read only when ready. */
 export interface QueryStateBoundaryProps {
-    /** Checked first — wins over error and empty. */
+    /** Checked first — wins over forbidden, error and empty — unless `hasData` is true. */
     isLoading?: boolean;
+    /** Shown after loading, before error (e.g. HTTP 403); a function is only called when `error` is set. */
+    isForbidden?: boolean | ((error: unknown) => boolean);
+    /** Copy and action for the no-access panel (`role="status"`, never error-tinted). */
+    forbidden?: QueryStateForbiddenProps;
+    /** True keeps children on screen during a refetch instead of the loading state. Default false. */
+    hasData?: boolean;
     /** Anything except undefined, null or false shows the error state — so 0 and "" count. */
     error?: unknown;
     /** Checked only after loading and error are ruled out. */