pixelize-design-library 3.0.1-beta.1 → 3.1.0

package/dist/Components/KanbanBoard/KanbanBoardProps.d.ts

@@ -1,106 +1,160 @@
 import type { ReactNode } from "react";
 import { OptionProp } from "../Select/SelectProps";
-/** Index allows extra scalar fields; known string fields are explicit so they do not widen to `() => ReactNode`. */
+/** Extra string keys render as label:value rows on the card; number values (also allowed here) are silently never shown. */
 export type Account = {
+    /** Used as the React key and the dnd draggableId — must be unique and stable across renders. */
     id: string;
+    /** Fully replaces AccountCard for this card — onDelete/onOpen/isDeletable and expand/collapse never apply when set. */
     customNode?: () => ReactNode;
+    /** Excluded from the generic row list; shown as separate description text, only when expanded. */
     details?: string;
+    /** No special rendering — just another label:value row like any extra string key. */
     name?: string;
+    /** Same generic row treatment as `name` — not validated or used for an avatar. */
     email?: string;
+    /** Same generic row treatment as `name`/`email` — plain string, not a number. */
     rating?: string;
     [key: string]: string | number | null | undefined | (() => ReactNode);
 };
+/** One Kanban column: id, title, accent color, and its `Account` items. */
 export type ColumnType = {
+    /** Not read by the board; the key in the `data` record is the column's identity for drag and callbacks. */
     id: string;
+    /** Column header text; also used in the reorder-handle and delete-all aria-labels. */
     title: string;
+    /** Falls back to `colors.primary[500]` when omitted — used for the accent dot/border. */
     color: string;
+    /** Cards in display order; a drag reorders them in the board's internal state. */
     items: Account[];
-    /**
-     * Column-level slot (e.g. totals). Shown below the title when expanded, and in the collapsed narrow rail (rotated).
-     */
+    /** Column-level slot (e.g. totals); shown below the title expanded, and rotated in the collapsed rail. */
     customNode?: () => ReactNode;
 };
 /** Fired after a column rail is collapsed or expanded via the board UI. */
 export type ColumnCollapseChangePayload = {
+    /** Key of the toggled column in the `data` record. */
     colId: string;
     /** True when the column is in the narrow collapsed rail. */
     collapsed: boolean;
     /** Full collapsed map for all columns (same shape as `collapsedColumns` initial prop). */
     collapsedColumns: Record<string, boolean>;
 };
+/** Payload of `onDrag` — the moved card, its source/target column ids and indexes, and the next column map. */
+export type KanbanDragPayload = {
+    /** Source column id (its key in the `data` record). */
+    from: string;
+    /** Destination column id; equals `from` when reordered within one column. */
+    to: string;
+    /** The dragged card. */
+    item: Account;
+    /** Next column map with the move already applied, keyed by column id. */
+    columns: Record<string, ColumnType>;
+    /** Zero-based index of the card in the source column before the move. */
+    fromIndex: number;
+    /** Zero-based index of the card in the destination column after the move. */
+    toIndex: number;
+};
+/** Board permission gates; every flag defaults to true when omitted. */
+export type KanbanPermissions = {
+    /** Also gates the `kanbanEdit` button and card drag; column-reorder drag ignores this. */
+    isEditable?: boolean;
+    /** Also gates the `kanbanCreate` button. */
+    isCreatable?: boolean;
+    /** Also hides the column-delete trash icon on column-header hover, not just per-card delete. */
+    isDeletable?: boolean;
+    /** false returns null for the whole board — nothing renders, not even header actions. */
+    isViewable?: boolean;
+};
+/** Props for KanbanBoard — keyed columns (`data`) of draggable `Account` cards. */
 export type KanbanBoardProps = {
+    /** Base columns; `customColumns` below is merged on top, not into, this. */
     data: Record<string, ColumnType>;
+    /** Merged on top of `data` — a matching column id in both silently overwrites the `data` entry, not merges its fields. */
     customColumns?: Record<string, ColumnType>;
+    /** `isVisible` renders an inline dashed column when others exist, or a centered empty-state overlay when there are none. */
     customizeColumn?: {
         isVisible?: boolean;
+        /** Defaults to "Add column". */
         buttonText?: string;
+        /** Fires from both the inline dashed column and the empty-board overlay variant. */
         onAddColumn?: () => void;
     };
+    /** Never fires for a `customNode` card — it owns its own delete UI, and is not gated by `permissions.isDeletable`. */
     onDelete?: (account: Account) => void;
+    /** Same `customNode` exemption as `onDelete`; unlike delete, `onOpen` has no permission gate at all. */
     onOpen?: (account: Account) => void;
+    /** Receives the deleted column's item ids, not the column's own id — the column identity itself is not passed. */
     onColumnDelete?: (colId: (string | number)[]) => void;
-    onDrag?: ({ from, to, item, columns, fromIndex, toIndex, }: {
-        from: string;
-        to: string;
-        item: Account;
-        columns: Record<string, ColumnType>;
-        fromIndex: number;
-        toIndex: number;
-    }) => void;
+    /** Fires after `columns` state already updated internally — a notification, not a gate; it cannot veto or revert the move. */
+    onDrag?: (payload: KanbanDragPayload) => void;
+    /** Also true (skeletons show) whenever `preferences.baseurl` is set and its own fetch is still loading. */
     isLoading?: boolean;
+    /** Header filter select; renders only when `isSelect` is true. */
     kanbanSelect?: {
+        /** Gates the whole select — unlike `kanbanEdit`/`kanbanCreate`, never checked against `permissions`. */
         isSelect?: boolean;
         options?: OptionProp[];
+        /** Never fires with undefined — picking the placeholder row again fires nothing. */
         onSelectChange?: (option?: OptionProp) => void;
         selectPlaceholderText?: string;
+        /** Defaults to `"12.5rem"` when omitted. */
         width?: string;
+        /** Controlled value passed straight to the underlying Select. */
         value?: string;
+        /** False renders the themed popup, which looks identical on Windows and macOS; a native select's list is OS-drawn. */
+        native?: boolean;
     };
+    /** Button shows only when this `isEditable` AND `permissions.isEditable` (default true) both allow it. */
     kanbanEdit?: {
         isEditable?: boolean;
         onEdit?: () => void;
+        /** Defaults to "Edit Layout". */
         label?: string;
     };
+    /** Same `permissions.isCreatable` AND-gate as `kanbanEdit`. */
     kanbanCreate?: {
         isCreatable?: boolean;
         onCreate?: () => void;
+        /** Defaults to "Create New". */
         label?: string;
     };
+    /** Renders cards via a virtualized react-window list; omitted, it auto-enables above 30 cards in that column — true/false always overrides. */
     virtualization?: boolean;
-    permissions?: {
-        isEditable?: boolean;
-        isCreatable?: boolean;
-        isDeletable?: boolean;
-        isViewable?: boolean;
-    };
+    /** Gates edit, create, delete and view actions; each flag defaults to true when omitted. */
+    permissions?: KanbanPermissions;
+    /** Per-column empty state for columns with no items. */
     noItems?: {
+        /** Also requires the column to have zero items — evaluated per column, not board-wide. */
         isVisible?: boolean;
+        /** Defaults to "No items in this column". */
         text?: string;
+        /** Defaults to "Add Item"; hidden entirely when `isEmptyTextOnly` is true. */
         buttonText?: string;
+        /** Receives the empty column the button was clicked in. */
         onClick?: (column: ColumnType) => void;
+        /** When true, the button never renders — only the text line shows. */
         isEmptyTextOnly?: boolean;
     };
     /** When true, columns can collapse to a narrow horizontal rail (full height). */
     enableColumnCollapse?: boolean;
-    /**
-     * Initial collapsed state keyed by column id (`data` / `customColumns` object keys).
-     * Merged on mount; when `preferences.url` is set, server `json.collapsedColumns` overrides these keys after load.
-     */
+    /** Seeds collapsed state once on mount only — later prop changes are ignored unless `preferences.baseurl` is set to sync from saved prefs. */
     collapsedColumns?: Record<string, boolean>;
     /** Called when the user collapses or expands a column (after internal state updates). */
     onColumnCollapseChange?: (payload: ColumnCollapseChangePayload) => void;
-    /** When true, columns can be reordered via the header grip handle. */
+    /** Column drag ignores `permissions.isEditable` — reordering stays possible even when item drag is permission-locked. */
     enableColumnReorder?: boolean;
     /** Called after column order changes (same shape as `data` keys order). */
     onColumnReorder?: (columns: Record<string, ColumnType>) => void;
-    /**
-     * Optional user-preferences API (same shape as `Table` `preferences`).
-     * When `url` is set, column collapse state is loaded from and saved to `json.collapsedColumns`
-     * (record of column id → collapsed).
-     */
+    /** Board height (CSS length, e.g. `"100%"` to fill a sized parent); columns fill it. Defaults to the viewport minus 100px, min 500px. */
+    height?: string | number;
+    /** Caps the board height; columns shrink to fit. */
+    maxH?: string | number;
+    /** Same shape as Table's `preferences`; collapse state loads/saves to `json.collapsedColumns` only when `baseurl` is set. */
     preferences?: {
+        /** Must be non-empty to activate preferences loading/saving at all. */
         baseurl: string;
+        /** Sent verbatim as the `Authorization` header — include any `Bearer ` prefix yourself. */
         token: string;
+        /** The load fetch re-runs only when `baseurl` changes — changing key/name/page/orgId alone never refetches. */
         key?: string;
         name?: string;
         page?: string;

package/dist/Components/KanbanBoard/MeasuredItem.d.ts

@@ -4,5 +4,6 @@ type MeasuredItemProps = {
     setSize: (index: number, size: number) => void;
     children: React.ReactNode;
 };
+/** Wraps one virtualized row to report its rendered height to KanbanBoard's row-size cache; not exported, virtualization-only. */
 declare const MeasuredItem: React.FC<MeasuredItemProps>;
 export default MeasuredItem;

package/dist/Components/KanbanBoard/MeasuredItem.js

@@ -1,76 +1,49 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var MeasuredItem = function (_a) {
-    var index = _a.index, setSize = _a.setSize, children = _a.children;
-    var ref = (0, react_1.useRef)(null);
-    var prevHeight = (0, react_1.useRef)(null);
-    var measure = function () {
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const sharedResizeObserver_1 = require("../../Hooks/sharedResizeObserver");
+/** Wraps one virtualized row to report its rendered height to KanbanBoard's row-size cache; not exported, virtualization-only. */
+const MeasuredItem = ({ index, setSize, children, }) => {
+    const ref = (0, react_1.useRef)(null);
+    const prevHeight = (0, react_1.useRef)(null);
+    // Stable ref to the latest setSize so we don't tear down the ResizeObserver on every render.
+    const setSizeRef = (0, react_1.useRef)(setSize);
+    setSizeRef.current = setSize;
+    const indexRef = (0, react_1.useRef)(index);
+    indexRef.current = index;
+    const measure = () => {
         if (ref.current) {
-            var height = Math.round(ref.current.getBoundingClientRect().height);
-            if (prevHeight.current !== height) {
+            // offsetHeight is the integer border-box layout height — more reliable than getBoundingClientRect for our purposes.
+            const height = ref.current.offsetHeight;
+            if (height > 0 && prevHeight.current !== height) {
                 prevHeight.current = height;
-                setSize(index, height);
+                setSizeRef.current(indexRef.current, height);
             }
         }
     };
-    (0, react_1.useLayoutEffect)(function () {
-        var element = ref.current; // ✅ Capture the current ref value
-        // Initial measure
+    (0, react_1.useLayoutEffect)(() => {
+        const element = ref.current;
         measure();
-        var ro;
-        if (typeof ResizeObserver !== "undefined" && element) {
-            ro = new ResizeObserver(function () {
-                measure();
-            });
-            ro.observe(element);
-        }
-        else {
-            // Fallback for browsers without ResizeObserver
+        // A second measure after paint catches any layout that finishes after the synchronous tick (font loads, async CSS, etc).
+        const raf = requestAnimationFrame(measure);
+        const unobserve = typeof ResizeObserver !== "undefined" && element ? (0, sharedResizeObserver_1.observeResize)(element, measure) : undefined;
+        if (!unobserve)
             window.addEventListener("resize", measure);
-        }
-        return function () {
-            // ✅ Use captured element instead of ref.current
-            if (ro && element)
-                ro.unobserve(element);
-            if (!ro)
+        return () => {
+            cancelAnimationFrame(raf);
+            if (unobserve)
+                unobserve();
+            else
                 window.removeEventListener("resize", measure);
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [index, setSize]);
-    return react_1.default.createElement("div", { ref: ref }, children);
+    }, []);
+    // If index changes for the same DOM node (item shuffled), re-report the cached size under the new index.
+    (0, react_1.useEffect)(() => {
+        if (prevHeight.current != null) {
+            setSizeRef.current(indexRef.current, prevHeight.current);
+        }
+    }, [index]);
+    return (0, jsx_runtime_1.jsx)("div", { ref: ref, children: children });
 };
 exports.default = MeasuredItem;

package/dist/Components/KanbanBoard/boardStore.d.ts

@@ -0,0 +1,8 @@
+export type BoardStore<T> = {
+    get: () => T;
+    set: (next: T) => void;
+    subscribe: (listener: () => void) => () => void;
+};
+/** Board-local state that only the components selecting a changed slice re-render for. */
+export declare const createBoardStore: <T>(initial: T) => BoardStore<T>;
+export declare const useBoardStore: <T, S>(store: BoardStore<T>, select: (value: T) => S) => S;

package/dist/Components/KanbanBoard/boardStore.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBoardStore = exports.createBoardStore = void 0;
+const react_1 = require("react");
+/** Board-local state that only the components selecting a changed slice re-render for. */
+const createBoardStore = (initial) => {
+    let value = initial;
+    const listeners = new Set();
+    return {
+        get: () => value,
+        set: (next) => {
+            if (Object.is(next, value))
+                return;
+            value = next;
+            listeners.forEach((listener) => listener());
+        },
+        subscribe: (listener) => {
+            listeners.add(listener);
+            return () => {
+                listeners.delete(listener);
+            };
+        },
+    };
+};
+exports.createBoardStore = createBoardStore;
+const useBoardStore = (store, select) => (0, react_1.useSyncExternalStore)(store.subscribe, () => select(store.get()));
+exports.useBoardStore = useBoardStore;

package/dist/Components/KanbanBoard/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./KanbanBoard";
+export type { Account, ColumnType, ColumnCollapseChangePayload, KanbanBoardProps, KanbanDragPayload, KanbanPermissions, } from "./KanbanBoardProps";

package/dist/Components/KanbanBoard/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var KanbanBoard_1 = require("./KanbanBoard");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(KanbanBoard_1).default; } });

package/dist/Components/Kbd/Kbd.d.ts

@@ -0,0 +1,7 @@
+import type { KbdProps, KbdShortcutProps } from "./KbdProps";
+export declare const detectApple: () => boolean;
+/** One keyboard key cap; decorative hint rows should wrap it in `aria-hidden`. */
+declare const Kbd: ({ children, size, "data-testid": testId }: KbdProps) => import("react/jsx-runtime").JSX.Element;
+/** Renders a chord such as `mod+k` as one `Kbd` per key, announced as a single spoken label. */
+export declare const KbdShortcut: ({ shortcut, size, isApple, "data-testid": testId }: KbdShortcutProps) => import("react/jsx-runtime").JSX.Element;
+export default Kbd;

package/dist/Components/Kbd/Kbd.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KbdShortcut = exports.detectApple = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const AppSwitcherProps_1 = require("../AppSwitcher/AppSwitcherProps");
+const HEIGHT = { xs: "1rem", sm: "1.25rem" };
+const SPOKEN = {
+    mod: "Command",
+    cmd: "Command",
+    ctrl: "Control",
+    alt: "Option",
+    shift: "Shift",
+    enter: "Enter",
+    esc: "Escape",
+};
+const detectApple = () => typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform);
+exports.detectApple = detectApple;
+/** One keyboard key cap; decorative hint rows should wrap it in `aria-hidden`. */
+const Kbd = ({ children, size = "sm", "data-testid": testId }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "kbd", "data-testid": testId, display: "inline-flex", alignItems: "center", justifyContent: "center", minW: HEIGHT[size], h: HEIGHT[size], px: 1.5, fontFamily: "inherit", fontSize: "xs-minus", fontWeight: 600, lineHeight: 1, whiteSpace: "nowrap", borderWidth: "1px", borderColor: colors.boxborder[200], borderRadius: "base", bg: colors.backgroundColor.subtle, color: colors.textMuted, children: children }));
+};
+/** Renders a chord such as `mod+k` as one `Kbd` per key, announced as a single spoken label. */
+const KbdShortcut = ({ shortcut, size, isApple, "data-testid": testId }) => {
+    const parts = shortcut.split("+").map((p) => p.trim()).filter(Boolean);
+    const apple = isApple !== null && isApple !== void 0 ? isApple : (0, exports.detectApple)();
+    const spoken = parts.map((p) => { var _a; return (_a = SPOKEN[p.toLowerCase()]) !== null && _a !== void 0 ? _a : p.toUpperCase(); }).join(" ");
+    const keys = (0, AppSwitcherProps_1.shortcutKeys)(shortcut, apple);
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", display: "inline-flex", gap: 1, role: "img", "aria-label": spoken, "data-testid": testId, children: keys.map((key, i) => ((0, jsx_runtime_1.jsx)(Kbd, { size: size, children: key }, `${key}-${i}`))) }));
+};
+exports.KbdShortcut = KbdShortcut;
+exports.default = Kbd;

package/dist/Components/Kbd/KbdProps.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+/** Props for a single keyboard key cap. */
+export interface KbdProps {
+    /** Key glyph or word shown on the cap. */
+    children: ReactNode;
+    /** `sm` is 20px tall (default); `xs` is 16px. */
+    size?: "xs" | "sm";
+    /** Test id on the `<kbd>` element. */
+    "data-testid"?: string;
+}
+/** Props for a key chord such as `mod+k`, rendered as one `Kbd` per key. */
+export interface KbdShortcutProps {
+    /** Chord in `AppSwitcher` notation, e.g. `mod+shift+k`. */
+    shortcut: string;
+    /** Cap size of every key; same scale as `Kbd`. */
+    size?: KbdProps["size"];
+    /** Forces Apple glyphs (⌘ ⇧) or Ctrl/Shift words; defaults to platform detection. */
+    isApple?: boolean;
+    /** Test id on the wrapper that carries the spoken chord label. */
+    "data-testid"?: string;
+}

package/dist/Components/Kbd/KbdProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/LauncherTrigger/LauncherTrigger.d.ts

@@ -0,0 +1,5 @@
+import type { LauncherTriggerProps } from "./LauncherTriggerProps";
+export declare const keyShortcutsFor: (shortcut: string) => string;
+/** Chip or icon button that opens an app-owned launcher; shows the shortcut hint but binds no key. */
+declare const LauncherTrigger: ({ onClick, isOpen, label, shortcut, icon: Icon, display, "aria-label": ariaLabel, "data-testid": testId, }: LauncherTriggerProps) => import("react/jsx-runtime").JSX.Element;
+export default LauncherTrigger;

package/dist/Components/LauncherTrigger/LauncherTrigger.js

@@ -0,0 +1,49 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.keyShortcutsFor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const motion_1 = require("../../Theme/chakra/motion");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const motion_2 = require("../../Theme/tokens/primitives/motion");
+const useMatchMedia_1 = require("../../Hooks/useMatchMedia");
+const Kbd_1 = require("../Kbd/Kbd");
+const AppSwitcherProps_1 = require("../AppSwitcher/AppSwitcherProps");
+const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
+const MD_QUERY = "(min-width: 48em)";
+const KEY_NAMES = {
+    mod: ["Meta", "Control"],
+    cmd: ["Meta"],
+    ctrl: ["Control"],
+    alt: ["Alt"],
+    shift: ["Shift"],
+    esc: ["Escape"],
+};
+const keyShortcutsFor = (shortcut) => {
+    const options = shortcut
+        .split("+")
+        .map((p) => p.trim())
+        .filter(Boolean)
+        .map((p) => { var _a; return (_a = KEY_NAMES[p.toLowerCase()]) !== null && _a !== void 0 ? _a : [p.length === 1 ? p.toUpperCase() : p]; });
+    const variants = Math.max(1, ...options.map((o) => o.length));
+    const chords = Array.from({ length: variants }, (_, v) => options.map((o) => o[Math.min(v, o.length - 1)]).join("+"));
+    return Array.from(new Set(chords)).join(" ");
+};
+exports.keyShortcutsFor = keyShortcutsFor;
+/** Chip or icon button that opens an app-owned launcher; shows the shortcut hint but binds no key. */
+const LauncherTrigger = ({ onClick, isOpen, label = "Menu", shortcut = "mod+k", icon: Icon = lucide_react_1.Compass, display = "chip", "aria-label": ariaLabel, "data-testid": testId, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const showHint = (0, useMatchMedia_1.useMatchMedia)(MD_QUERY, true);
+    const ring = (0, focusRing_styles_1.focusVisibleRing)(colors);
+    const hint = shortcut ? (0, AppSwitcherProps_1.formatShortcut)(shortcut, (0, Kbd_1.detectApple)()) : "";
+    if (display === "icon") {
+        return ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: hint ? `${label} (${hint})` : label, placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", "data-testid": testId, onClick: onClick, "aria-haspopup": "dialog", "aria-expanded": isOpen, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : label, "aria-keyshortcuts": shortcut ? (0, exports.keyShortcutsFor)(shortcut) : undefined, display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, w: "36px", h: "36px", borderRadius: "10px", borderWidth: "1px", borderColor: colors.primary[100], bg: colors.primary[50], color: colors.accentText, cursor: "pointer", transition: (0, motion_2.transitionFor)(["background-color", "border-color", "box-shadow"]), _hover: { borderColor: colors.primary[300] }, sx: { _focusVisible: ring, [focusRing_styles_1.FOCUS_VISIBLE_OVER_STATE]: ring, ...(0, motion_1.reducedMotionSx)() }, children: (0, jsx_runtime_1.jsx)(Icon, { size: 17, "aria-hidden": "true" }) }) }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", "data-testid": testId, onClick: onClick, "aria-haspopup": "dialog", "aria-expanded": isOpen, "aria-label": ariaLabel, "aria-keyshortcuts": shortcut ? (0, exports.keyShortcutsFor)(shortcut) : undefined, display: "inline-flex", alignItems: "center", gap: 2, flexShrink: 0, h: "2.25rem", pl: "0.625rem", pr: "0.375rem", borderRadius: "10px", borderWidth: "1px", borderColor: colors.primary[100], bg: colors.primary[50], color: colors.accentText, fontSize: "0.84375rem", fontWeight: 600, lineHeight: 1, cursor: "pointer", transition: (0, motion_2.transitionFor)(["background-color", "border-color", "box-shadow"]), _hover: { borderColor: colors.primary[300] }, sx: { _focusVisible: ring, [focusRing_styles_1.FOCUS_VISIBLE_OVER_STATE]: ring, ...(0, motion_1.reducedMotionSx)() }, children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { as: "span", display: "inline-flex", alignItems: "center", gap: 2, "aria-hidden": ariaLabel ? true : undefined, children: [(0, jsx_runtime_1.jsx)(Icon, { size: 17, "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("span", { children: label })] }), hint && showHint && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "kbd", "aria-hidden": "true", fontFamily: "inherit", fontSize: "0.6875rem", fontWeight: 600, lineHeight: "normal", px: "6px", py: "2px", borderRadius: "md", borderWidth: "1px", borderColor: colors.primary[100], bg: colors.surfaceRaised, children: hint }))] }));
+};
+exports.default = LauncherTrigger;

package/dist/Components/LauncherTrigger/LauncherTriggerProps.d.ts

@@ -0,0 +1,19 @@
+import type { ElementType } from "react";
+/** Props for the chip that opens an app-owned launcher; it renders the trigger only and binds no shortcut. */
+export interface LauncherTriggerProps {
+    /** Fires when the trigger is activated; toggle your launcher's open state here. */
+    onClick: () => void;
+    /** Whether the launcher is open; drives `aria-expanded`. */
+    isOpen: boolean;
+    /** Visible text. Default "Menu". */
+    label?: string;
+    /** Chord in `AppSwitcher` notation shown as a hint above `md` and exposed as `aria-keyshortcuts`; `null` hides both. Default "mod+k". */
+    shortcut?: string | null;
+    /** Component rendered at 17px before the label. Default lucide `Compass`. */
+    icon?: ElementType;
+    /** `"chip"` shows icon, label and chord hint; `"icon"` is a 36px square whose label is the accessible name and tooltip. Default "chip". */
+    display?: "chip" | "icon";
+    /** Overrides the accessible name; the visible label and hint then become `aria-hidden`. */
+    "aria-label"?: string;
+    "data-testid"?: string;
+}

package/dist/Components/LauncherTrigger/LauncherTriggerProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/LazyWrapper/LazyWrapper.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+/** Suspense boundary around lazy children, with a themed spinner by default. */
+export interface LazyWrapperProps {
+    children: React.ReactNode;
+    /** Replaces the spinner, `null` included (renders nothing); `minHeight` then has no effect. */
+    fallback?: React.ReactNode;
+    /** Sizes only the built-in spinner — ignored once a custom `fallback` is passed. */
+    minHeight?: string;
+}
+/** Suspense boundary + themed spinner only — wrap an already-lazy() child; a non-lazy child never suspends. */
+declare const LazyWrapper: React.FC<LazyWrapperProps>;
+export default LazyWrapper;

package/dist/Components/LazyWrapper/LazyWrapper.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const DefaultFallback = ({ minHeight }) => {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "center", minHeight: minHeight, width: "100%", p: "2rem", children: (0, jsx_runtime_1.jsx)(react_2.Spinner, { thickness: "3px", speed: "0.65s", size: "lg", emptyColor: theme.colors.gray[100], color: theme.colors.accentText }) }));
+};
+/** Suspense boundary + themed spinner only — wrap an already-lazy() child; a non-lazy child never suspends. */
+const LazyWrapper = ({ children, fallback, minHeight = "400px", }) => ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: fallback === undefined ? (0, jsx_runtime_1.jsx)(DefaultFallback, { minHeight: minHeight }) : fallback, children: children }));
+exports.default = LazyWrapper;

package/dist/Components/LimitReachedModal/LimitReachedModal.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { LimitReachedModalProps } from "./LimitReachedModalProps";
+/** Controlled plan-limit modal: kind-specific title and message, optional usage line and feature list, upgrade CTA only for billing managers. */
+declare const LimitReachedModal: React.FC<LimitReachedModalProps>;
+export default LimitReachedModal;

package/dist/Components/LimitReachedModal/LimitReachedModal.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": 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 Button_1 = __importDefault(require("../Button/Button"));
+const UpgradeButton_1 = __importDefault(require("../UpgradeButton/UpgradeButton"));
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const gradientInk_1 = require("../../Theme/tokens/builders/gradientInk");
+const limitReachedCopy_1 = require("./limitReachedCopy");
+const KIND_ICON = {
+    record: lucide_react_1.Crown,
+    automation: lucide_react_1.Crown,
+    custom_modules: lucide_react_1.Crown,
+    user: lucide_react_1.Users,
+    projects: lucide_react_1.Crown,
+    tickets: lucide_react_1.Crown,
+};
+/** Controlled plan-limit modal: kind-specific title and message, optional usage line and feature list, upgrade CTA only for billing managers. */
+const LimitReachedModal = ({ isOpen, onClose, kind, limit = null, used = null, canManageBilling, onUpgrade, title, message, features, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const copy = (0, limitReachedCopy_1.resolveLimitCopy)(kind, canManageBilling);
+    const usage = (0, limitReachedCopy_1.formatLimitUsage)(kind, used, limit);
+    const KindIcon = KIND_ICON[kind];
+    // Header banner uses the brand gradient so it reads correctly across all 9 brands.
+    const gradient = (0, gradientInk_1.resolveGradient)(colors.gradient, colors.white, colors.black);
+    const ink = gradient.ink;
+    return ((0, jsx_runtime_1.jsxs)(react_1.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, size: "lg", motionPreset: "slideInBottom", children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, {}), (0, jsx_runtime_1.jsxs)(react_1.ModalContent, { overflow: "hidden", boxShadow: "2xl", mx: 4, children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { bgGradient: `linear(to-r, ${gradient.from}, ${gradient.to})`, color: ink, children: [(0, jsx_runtime_1.jsx)(react_1.ModalHeader, { color: "inherit", borderBottomWidth: 0, children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Icon, { as: KindIcon, boxSize: "24px", mr: "12px" }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "xl", fontWeight: 700, children: title !== null && title !== void 0 ? title : copy.title })] }) }), (0, jsx_runtime_1.jsx)(react_1.ModalCloseButton, { "aria-label": "Dismiss", color: ink, _hover: { opacity: 0.7 } })] }), (0, jsx_runtime_1.jsxs)(react_1.ModalBody, { py: 6, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { textAlign: "center", fontSize: "md", fontWeight: 600, color: colors.text[700], children: message !== null && message !== void 0 ? message : copy.message }), usage && ((0, jsx_runtime_1.jsx)(react_1.Text, { textAlign: "center", fontSize: "sm", color: colors.textMuted, mt: 2, children: usage })), features && features.length > 0 && ((0, jsx_runtime_1.jsx)(react_1.List, { spacing: 2, mt: 5, children: features.map((feature) => ((0, jsx_runtime_1.jsxs)(react_1.ListItem, { display: "flex", alignItems: "center", fontSize: "sm", color: colors.text[600], children: [(0, jsx_runtime_1.jsx)(react_1.ListIcon, { as: lucide_react_1.CheckCircle, color: colors.semanticText.success }), feature] }, feature))) }))] }), (0, jsx_runtime_1.jsx)(react_1.ModalFooter, { children: (0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 3, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: canManageBilling ? "Maybe later" : "Close", variant: "outline", colorScheme: "gray", size: "md", onClick: onClose }), canManageBilling && ((0, jsx_runtime_1.jsx)(UpgradeButton_1.default, { label: "Upgrade plan", size: "md", onClick: () => onUpgrade === null || onUpgrade === void 0 ? void 0 : onUpgrade() }))] }) })] })] }));
+};
+exports.default = LimitReachedModal;

package/dist/Components/LimitReachedModal/LimitReachedModalProps.d.ts

@@ -0,0 +1,25 @@
+/** Which plan limit was hit; selects the modal's icon and copy via `resolveLimitCopy`. */
+export type LimitKind = "record" | "automation" | "custom_modules" | "user" | "projects" | "tickets";
+/** Fully controlled (isOpen/onClose only, no internal useDisclosure/autoOpen); closed prop list — modal size is fixed at "lg", not configurable. */
+export interface LimitReachedModalProps {
+    /** Controlled visibility; the modal renders nothing while false. */
+    isOpen: boolean;
+    /** Called by the X button, Esc, overlay click and the Maybe later or Close button. */
+    onClose: () => void;
+    /** Picks the icon, default title and default message; `user` gets a users icon, the rest a crown. */
+    kind: LimitKind;
+    /** Inline usage line needs BOTH limit and used — either alone silently renders nothing. */
+    limit?: number | null;
+    /** Amount already consumed; shown with `limit` as "X of Y <unit> used". */
+    used?: number | null;
+    /** false hides the upgrade CTA and swaps in "contact your administrator" copy. */
+    canManageBilling: boolean;
+    /** Clicking the CTA calls only this — it does not also call onClose. Close the modal yourself if upgrading should dismiss it. */
+    onUpgrade?: () => void;
+    /** Overrides the kind's default heading. */
+    title?: string;
+    /** Overrides the default body text, which also differs by `canManageBilling`. */
+    message?: string;
+    /** Optional check-marked bullets listed under the message, e.g. what the next plan unlocks. */
+    features?: string[];
+}

package/dist/Components/LimitReachedModal/LimitReachedModalProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });