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

package/DESIGN-GUIDE.md

@@ -29,7 +29,7 @@ Calm, dense, professional SaaS admin — Linear/Stripe-dashboard, not a landing
 | Page padding | `px={{ base: 4, md: 6 }} py={{ base: 4, md: 5 }}` |
 | Between page sections | `gap={5}` (a `Flex direction="column"`) |
 | Between cards in a grid | `gap={4}` |
-| Inside a card | `Card`'s own padding — don't add more; `bodyProps={{ p: 0 }}` for edge-to-edge content |
+| Inside a card | `Card`'s own padding — don't add more; `padding="none"` (or `"2xs"`/`"xs"` for dense) instead of `sx={{ p }}`, `bodyProps={{ p: 0 }}` for edge-to-edge content |
 | Between form fields | `gap={4}` vertical, `gap={3}` side by side |
 | Inline clusters (tags, meta, icon + text) | `gap={1.5}`–`gap={2}` |
 | Page header → content | the section gap (`gap={5}`) — no extra margin |
@@ -41,11 +41,11 @@ Borders are the one px value: `borderWidth="1px"`. Fixed widths (side panel, lis
 
 | Role | Props |
 | --- | --- |
-| Page title + subtitle | `PageHeader` (`lg`/600 h1, `sm` muted subtitle) — don't hand-build it |
+| Page title + subtitle | `PageHeader` (18px/600 h1 by default, `sm` muted subtitle; `titleSize="xl"` for a top-level page) — don't hand-build it |
 | Section / card title | `Heading as="h2" fontSize="md" fontWeight={600} color={colors.header[900]}`, in `Card`'s `header` prop |
 | Body | `Text fontSize="sm" color={colors.text[800]}` |
 | Label / meta / helper | `Text fontSize="xs" color={colors.textMuted}` |
-| KPI tile | `StatCard` — pass `trend` and `goodDirection`; the delta is green when the change is *good* (a shorter sales cycle is green) |
+| KPI tile | `StatCard` — pass `trend` and `goodDirection`; the delta is green when the change is *good* (a shorter sales cycle is green); `iconTone` tints the icon chip (unset = brand primary) |
 | Numbers in tables/columns | `sx={{ fontVariantNumeric: "tabular-nums" }}` so digits align; `Table` columns take `align: "end"` |
 | Overline (rare) | `fontSize="xs" fontWeight={600} textTransform="uppercase" letterSpacing="0.06em"` |
 
@@ -69,7 +69,7 @@ stay light in dark mode.
 | Secondary text, icons | `colors.textMuted` |
 | Brand-colored text/link | `colors.accentText` — never `primary[500]` |
 | Status text/icon | `colors.semanticText.success \| error \| warning \| info` |
-| Status chip | `<Tag label="Won" colorScheme="green" />` (subtle, `sm` by default) — never a painted `Box`. Tone → `colorScheme`: success `green`, warning `orange`, error `red`, info `blue`, neutral `gray` |
+| Status chip | `<Tag label="Won" colorScheme="green" />` (subtle, `sm` by default) — never a painted `Box`. Tone → `colorScheme`: success `green`, warning `orange`, error `red`, info `blue`, neutral `gray`. Quiet rows: `<Tag tone="success" display="dot" label=… />`; map an app's status vocabulary once with `<StatusTag status map label display />` |
 | Selectable list row (inbox, picker) | `listRowBackgrounds(colors)` for hover/selected + `sx={focusVisibleStyles(colors)}`; pad the list `p={2}` so the ring isn't clipped |
 | Any filled surface you paint | `resolveFilledSurface(colors.<scale>, colors)` → `{ fill, color }` |
 | Icon tint chip, avatar tint | `bg={colors.primary.opacity[8]}` + `color={colors.accentText}` (`opacity` exists on `primary`/`secondary`/`tertiary` only) |
@@ -139,17 +139,27 @@ the row title is the label: `<Text as="label" htmlFor={id}>` pointing at the fie
 ```
 
 `PageHeader` also takes `breadcrumbs`, `leading` (avatar), `titleAddon` (status `Tag`), `meta` (icon
-row) and `tabs` — a record page's whole header. KPI rows are a `SimpleGrid` of `StatCard`s; card
+row) and `tabs` — a record page's whole header. Actions wrap under the title on their own when they do
+not fit (`actionsLayout="auto"`), so don't hand-build a stacked variant. KPI rows are a `SimpleGrid` of `StatCard`s; card
 sections are `Card` with the title in `header`.
 
 | Pattern | Component — don't hand-build it |
 | --- | --- |
+| Multi-step flow (send, import, onboard) with validated Continue and a review step | `WizardDialog` (`Wizard` inline) — don't hand-roll Back / Continue / Finish around `StageProgress`; each step's `validate` returns its error messages, future steps stay locked until valid, each step's `summary` drives the review |
+| Rich-text template with `${field}` placeholders | `Editor mergeFields={…}` — not a `Select` + caret tracking + dialog beside it; use its `label` / `helperText` / `errorMessage` |
+| A PDF behind auth, shown inline | `PdfViewer getBlob={…}` — the toolbar's Open / Download then work with the token, so don't add your own buttons |
 | Toolbar: search · filters · active-filter chips · count · actions | `FilterBar` (`search`, children, `activeFilters` + `onRemoveFilter`/`onClearAll`, `summary`, `actions`) |
 | Read-only label/value grid (record details, key facts) | `DescriptionList` (`items`, `columns`, `layout="inline"` for a side panel, `copyable`, `isLoading`) |
 | Settings row (title + description left, control right) | `SettingRow` inside a `SettingsSection` (`isDanger` for the danger zone, `action` for a header-right button) |
 | A person: avatar + name (+ role/email, presence, remove) | `PersonChip` (`orientation="vertical"` for a stacked profile block) |
 | An avatar on its own, or a stack of them | `Avatar` / `AvatarGroup` — never pick the fill, it is derived from `name` |
 | Unsaved-changes bar | `SaveBar isOpen={isDirty} onSave onDiscard isSaving` |
+| Create / edit a record in a side panel | `FormDrawer` (`sections`, `errors`, `isDirty`, `isSubmitting`) — don't hand-assemble Drawer + footer + discard confirm. A nested confirm dialog in any `Drawer` / `Modal` goes in `portalChildren` |
+| Detail or sub-table under a table row | `Table renderRowDetail` (+ optional `expandedRows`) — don't put an Accordion outside the Table |
+| Tabs that navigate between routes | `Tabs items=[{ id, label, href }] linkAs={RouterLink} value={currentId}` — never hand-build `Box as={Link}` tabs |
+| Completion / capacity ring | `CircularProgress` (`ProgressBar` stays for linear) |
+| Per-day activity (leave, tasks, shifts) | `CalendarGrid` with `events` mapped from your data — don't hand-roll a month grid |
+| Voice note capture | `AudioRecorder`; `MediaAudioPlayer` for playback |
 | Previewing an attachment (image, video, audio, PDF, Office, text, archive) | `MediaViewer` (`items`, `isOpen`, `onClose`) — omit `index` and it owns navigation itself |
 | Notification tray | `NotificationBell` (badge, needs `aria-label`) opening a `NotificationPanel` (zones, filters, all four states) |
 | Confirm that needs the name typed to arm it | `ConfirmDialog confirmationText="delete-me"` — `onConfirm` does **not** close; call `onClose` yourself |
@@ -160,12 +170,33 @@ sections are `Card` with the title in `header`.
 scrim `Box`. `Loading` is the older API and stays on the heavier house scrim by default; pass
 `variant="dim"` to route it through `Backdrop`, or just use `Backdrop` directly.
 
+### Navigation shell
+
+`SideBar` is the rail, `NavigationBar` the top bar, `NavLauncher` the full-height "go anywhere" panel.
+**The app owns the registry, permissions and persistence**; the library owns the look and the keyboard.
+
+- Keep one registry (modules → screens) and derive the rail, the launcher and route guards from it.
+  Filter by permission *before* passing `sections` to `NavLauncher`; use `isLoading` while access is
+  unknown, `linkAs` for the router link, and `extraResults` + `isSearching` for remote (entity) results.
+- Open the launcher with `<NavigationBar leading={<LauncherTrigger onClick isOpen />} />` — never inside
+  `navigationBarText.text`. Neither component binds the chord: the app owns the `mod+k` listener
+  (capture phase) and passes `shortcut={false}` to any page `Search`.
+- Pins live in the app (server or local). Pass them to `NavLauncher` (`pinnedIds`, `onTogglePin`) *and*
+  to `SideBar pinnedItems` + `onUnpin` so the rail shows what the launcher pinned. Persist collapse with
+  `useSidebarPrefs`, and pass `autoCollapse={false}` if the app, not the rail, decides.
+- Replacing a 9-dot app switcher in a nav bar: `<LauncherTrigger display="icon" />` (36px) in `moreIcon`;
+  keep the chip variant (`leading`) where there is room.
+- Show the suite's apps with `appsVisibility="always"` and drive plan gating by editing `apps` /
+  `locked`.
+- Show shortcut hints with `KbdShortcut`, never a hand-styled `<kbd>`.
+
 ## 7. Every page has four states
 
 Design all four, not just the happy path.
 
-`QueryStateBoundary` picks one per content region (loading > error > empty > data). Pass `children`
-as a function when it reads data that may still be undefined.
+`QueryStateBoundary` picks one per content region (loading > no access > error > empty > data). Pass
+`children` as a function when it reads data that may still be undefined. `isForbidden` shows the
+no-access panel between loading and error; `hasData` keeps content on screen during a refetch.
 
 | State | Render |
 | --- | --- |
@@ -208,11 +239,14 @@ not shipped in this package). Start from the closest one:
 | Screen you're building | Reference | Shows |
 | --- | --- | --- |
 | Dashboard / overview | `dashboard.tsx` | `StatCard` row, chart `Card`, stage list with `ProgressBar`, task list, `QueryStateBoundary` |
-| List of records | `records.tsx` | saved views, `FilterBar`, `Table` (`isGlobalSearch={false}`, `Tag` cells), bulk actions, `AlertDialog tone="danger"`, create `Drawer` |
+| List of records | `records.tsx` | saved views, `FilterBar`, `Table` (`isGlobalSearch={false}`, `Tag` cells, row selection), `BulkSelectionBar` (count, facts, ranked actions, clear), `AlertDialog tone="danger"`, create `Drawer` |
 | One record | `recordDetail.tsx` | `PageHeader` with breadcrumbs/avatar/meta, `Tabs` (declarative `items` with `count` badges), `DescriptionList` (grid + inline side panel), `Timeline` (per-event `icon`/`description`), `ErrorState` + back |
-| Settings / long form | `settings.tsx` | section nav, `SettingsSection` + `SettingRow`, `SaveBar`, danger zone |
+| Settings / long form | `settings.tsx` | `SectionRail` (rail from `lg`, `Select` below, dirty dots), `SettingsSection` + `SettingRow`, `SaveBar`, danger zone |
 | Board | `pipeline.tsx` | `KanbanBoard` with custom cards and column totals (`height`/`maxH` to size it) |
 | Inbox / master–detail | `inbox.tsx` | selectable list rows, conversation pane, composer, mobile list↔detail |
+| App launcher (browse, pins, recents, search with actions) | `launcher.tsx` (`/examples/launcher`) | `NavLauncher` + `LauncherTrigger` in `NavigationBar leading`, app-owned registry and permission filter, pinned / frequent / recent ids, `linkAs`, remote results via `extraResults`, `isLoading`, `SideBar pinnedItems` |
+| Wizard / multi-step dialog | `wizard.tsx` (`/examples/wizard`) | `WizardDialog` and inline `Wizard`: per-step `validate` messages, locked future steps, error summary, `summary`-driven review, `isFinishing` |
+| Template editor with merge fields | `templateEditor.tsx` (`/examples/template-editor`) | `Editor mergeFields`: grouped Insert field, chips, unknown-field error chips and `onUnknownTokens`, Make dynamic, side preview, label / helper / error |
 | Shop front (home → listing → product → bag → checkout → order) | `storefront/` | `ProductCard` grid / rail / quick-add, `ProductDetails` + `StickyBuyBar`, `CartItem`, `OrderSummary`, `CouponField`, address/payment groups, `OrderStatusTimeline`, `BagBar`; mobile frame + desktop |
 
 ## 10. Shop screens (e-commerce)

package/dist/Components/AppSwitcher/AppSwitcher.js

@@ -32,6 +32,9 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+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("react");
@@ -43,6 +46,7 @@ const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
 const useExclusiveOverlay_1 = require("../../Hooks/useExclusiveOverlay");
+const Kbd_1 = __importDefault(require("../Kbd/Kbd"));
 const AppMark_1 = __importStar(require("./AppMark"));
 const AppSwitcherProps_1 = require("./AppSwitcherProps");
 const useAppSwitcherShortcut_1 = require("./useAppSwitcherShortcut");
@@ -225,7 +229,7 @@ const AppSwitcher = ({ apps, currentAppId, onSelect, onOpenChange, isSearchable,
                             return;
                         }
                         handlePanelKeyDown(e);
-                    }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Grip, { size: s.icon + 1 }) }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { w: width, maxW: "calc(100vw - 1.5rem)", textAlign: "start", onKeyDown: handlePanelKeyDown, bg: theme.colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}`, _focus: { outline: "none", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}` }, children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { p: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, px: 3, pt: 3, pb: showSearch ? 2 : 1, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "0.6875rem", fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: theme.colors.textMuted, children: HEADING }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1" }), hint && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "kbd", fontSize: "0.6875rem", fontFamily: "inherit", color: theme.colors.textMuted, border: "1px solid", borderRadius: "full", px: 1.5, py: 0.5, children: hint }))] }), showSearch && ((0, jsx_runtime_1.jsx)(react_2.Box, { px: 3, pb: 2, children: (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: "sm", children: [(0, jsx_runtime_1.jsx)(react_2.InputLeftElement, { pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, color: theme.colors.textMuted }) }), (0, jsx_runtime_1.jsx)(react_2.Input, { ref: searchRef, value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Search apps", borderRadius: "lg", "aria-label": "Search apps", onKeyDown: (e) => {
+                    }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Grip, { size: s.icon + 1 }) }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { w: width, maxW: "calc(100vw - 1.5rem)", textAlign: "start", onKeyDown: handlePanelKeyDown, bg: theme.colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}`, _focus: { outline: "none", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}` }, children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { p: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, px: 3, pt: 3, pb: showSearch ? 2 : 1, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "0.6875rem", fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: theme.colors.textMuted, children: HEADING }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1" }), hint && (0, jsx_runtime_1.jsx)(Kbd_1.default, { size: "xs", children: hint })] }), showSearch && ((0, jsx_runtime_1.jsx)(react_2.Box, { px: 3, pb: 2, children: (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: "sm", children: [(0, jsx_runtime_1.jsx)(react_2.InputLeftElement, { pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, color: theme.colors.textMuted }) }), (0, jsx_runtime_1.jsx)(react_2.Input, { ref: searchRef, value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Search apps", borderRadius: "lg", "aria-label": "Search apps", onKeyDown: (e) => {
                                             if (e.key === "ArrowDown" && visible.length > 0) {
                                                 e.preventDefault();
                                                 focusItem(0);

package/dist/Components/AppSwitcher/AppSwitcherProps.d.ts

@@ -52,6 +52,8 @@ export declare const filterApps: (apps: AppOption[], query: string) => AppOption
 export type ShortcutEvent = Pick<KeyboardEvent, "key" | "altKey" | "ctrlKey" | "metaKey" | "shiftKey">;
 /** "mod" is Cmd on Apple platforms and Ctrl everywhere else. */
 export declare const matchesShortcut: (event: ShortcutEvent, shortcut: string, isApple?: boolean) => boolean;
+/** One label per key in a chord, so a named key such as `enter` stays a single cap. */
+export declare const shortcutKeys: (shortcut: string, isApple?: boolean) => string[];
 export declare const formatShortcut: (shortcut: string, isApple?: boolean) => string;
 /** Input to `buildSuiteApps`: an `AppOption` keyed by its subdomain label, with `url` optional since it can be derived. */
 export interface SuiteAppSource extends Omit<AppOption, "url"> {

package/dist/Components/AppSwitcher/AppSwitcherProps.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.buildSuiteApps = exports.formatShortcut = exports.matchesShortcut = exports.filterApps = exports.appInitials = void 0;
+exports.buildSuiteApps = exports.formatShortcut = exports.shortcutKeys = exports.matchesShortcut = exports.filterApps = exports.appInitials = void 0;
 const NON_WORD = /[^\p{L}\p{N}]+/u;
 /** Up to two initials, so a mark stays legible without an icon. */
 const appInitials = (name) => {
@@ -48,12 +48,15 @@ const matchesShortcut = (event, shortcut, isApple = typeof navigator !== "undefi
 exports.matchesShortcut = matchesShortcut;
 const APPLE_SYMBOLS = { mod: "⌘", cmd: "⌘", meta: "⌘", ctrl: "⌃", shift: "⇧", alt: "⌥" };
 const OTHER_LABELS = { mod: "Ctrl", cmd: "Win", meta: "Win", ctrl: "Ctrl", shift: "Shift", alt: "Alt" };
-const formatShortcut = (shortcut, isApple = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform)) => {
+const isAppleNow = () => typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform);
+/** One label per key in a chord, so a named key such as `enter` stays a single cap. */
+const shortcutKeys = (shortcut, isApple = isAppleNow()) => {
     const parts = shortcut.toLowerCase().split("+").map((p) => p.trim()).filter(Boolean);
     const table = isApple ? APPLE_SYMBOLS : OTHER_LABELS;
-    const rendered = parts.map((p, i) => { var _a; return i === parts.length - 1 ? p.toUpperCase() : ((_a = table[p]) !== null && _a !== void 0 ? _a : p.toUpperCase()); });
-    return isApple ? rendered.join("") : rendered.join("+");
+    return parts.map((p, i) => { var _a; return (i === parts.length - 1 ? p.toUpperCase() : ((_a = table[p]) !== null && _a !== void 0 ? _a : p.toUpperCase())); });
 };
+exports.shortcutKeys = shortcutKeys;
+const formatShortcut = (shortcut, isApple = isAppleNow()) => (0, exports.shortcutKeys)(shortcut, isApple).join(isApple ? "" : "+");
 exports.formatShortcut = formatShortcut;
 /**
  * Derives every app's origin from the host the consumer is already served on, so one deployment

package/dist/Components/AudioRecorder/AudioRecorder.d.ts

@@ -0,0 +1,8 @@
+import type { AudioRecorderProps } from "./AudioRecorderProps";
+export declare const formatElapsed: (ms: number) => string;
+export declare const recordingFileName: (mime: string, now: number) => {
+    type: string;
+    name: string;
+};
+declare const AudioRecorder: ({ onRecorded, maxDurationSec, isDisabled, labels }: AudioRecorderProps) => import("react/jsx-runtime").JSX.Element;
+export default AudioRecorder;

package/dist/Components/AudioRecorder/AudioRecorder.js

@@ -0,0 +1,169 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.recordingFileName = exports.formatElapsed = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const Button_1 = __importDefault(require("../Button/Button"));
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const DEFAULT_LABELS = {
+    start: "Start recording",
+    stop: "Stop recording",
+    recording: "Recording",
+    recorded: "Recorded",
+    permissionDenied: "Microphone access was denied. Allow it in your browser settings and try again.",
+    unsupported: "Audio recording is not supported in this browser.",
+};
+const PREFERRED_MIME = "audio/webm";
+const TICK_MS = 250;
+const EXTENSIONS = {
+    "audio/webm": "webm",
+    "audio/wav": "wav",
+    "audio/wave": "wav",
+    "audio/x-wav": "wav",
+    "audio/ogg": "ogg",
+    "audio/mp4": "m4a",
+    "audio/mpeg": "mp3",
+};
+const formatElapsed = (ms) => {
+    const total = Math.floor(ms / 1000);
+    return `${String(Math.floor(total / 60)).padStart(2, "0")}:${String(total % 60).padStart(2, "0")}`;
+};
+exports.formatElapsed = formatElapsed;
+const recordingFileName = (mime, now) => {
+    var _a, _b;
+    const type = mime.split(";")[0].trim().toLowerCase() || PREFERRED_MIME;
+    return { type, name: `recording-${now}.${(_a = EXTENSIONS[type]) !== null && _a !== void 0 ? _a : (((_b = type.split("/")[1]) === null || _b === void 0 ? void 0 : _b.replace(/^x-/, "")) || "webm")}` };
+};
+exports.recordingFileName = recordingFileName;
+const isSupported = () => { var _a; return typeof navigator !== "undefined" && !!((_a = navigator.mediaDevices) === null || _a === void 0 ? void 0 : _a.getUserMedia) && typeof MediaRecorder !== "undefined"; };
+const AudioRecorder = ({ onRecorded, maxDurationSec, isDisabled = false, labels }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const text = { ...DEFAULT_LABELS, ...labels };
+    const [status, setStatus] = (0, react_1.useState)("idle");
+    const [elapsedMs, setElapsedMs] = (0, react_1.useState)(0);
+    const [announcement, setAnnouncement] = (0, react_1.useState)("");
+    const recorderRef = (0, react_1.useRef)(null);
+    const streamRef = (0, react_1.useRef)(null);
+    const chunksRef = (0, react_1.useRef)([]);
+    const timerRef = (0, react_1.useRef)(null);
+    const startedAtRef = (0, react_1.useRef)(0);
+    const mountedRef = (0, react_1.useRef)(true);
+    const startingRef = (0, react_1.useRef)(false);
+    const onRecordedRef = (0, react_1.useRef)(onRecorded);
+    const textRef = (0, react_1.useRef)(text);
+    onRecordedRef.current = onRecorded;
+    textRef.current = text;
+    const release = (0, react_1.useCallback)(() => {
+        var _a;
+        if (timerRef.current !== null)
+            clearInterval(timerRef.current);
+        timerRef.current = null;
+        (_a = streamRef.current) === null || _a === void 0 ? void 0 : _a.getTracks().forEach((track) => track.stop());
+        streamRef.current = null;
+        recorderRef.current = null;
+    }, []);
+    (0, react_1.useEffect)(() => {
+        mountedRef.current = true;
+        if (!isSupported())
+            setStatus("unsupported");
+        return () => {
+            mountedRef.current = false;
+            const recorder = recorderRef.current;
+            if (recorder) {
+                recorder.ondataavailable = null;
+                recorder.onstop = null;
+                recorder.onerror = null;
+                if (recorder.state !== "inactive") {
+                    try {
+                        recorder.stop();
+                    }
+                    catch {
+                        // NOTE: a recorder the browser already tore down throws on stop.
+                    }
+                }
+            }
+            release();
+        };
+    }, [release]);
+    const stop = (0, react_1.useCallback)(() => {
+        const recorder = recorderRef.current;
+        if (recorder && recorder.state !== "inactive")
+            recorder.stop();
+    }, []);
+    const start = (0, react_1.useCallback)(async () => {
+        var _a, _b;
+        if (startingRef.current)
+            return;
+        if (!isSupported()) {
+            setStatus("unsupported");
+            return;
+        }
+        startingRef.current = true;
+        try {
+            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+            if (!mountedRef.current) {
+                stream.getTracks().forEach((track) => track.stop());
+                return;
+            }
+            streamRef.current = stream;
+            chunksRef.current = [];
+            const useWebm = (_b = (_a = MediaRecorder.isTypeSupported) === null || _a === void 0 ? void 0 : _a.call(MediaRecorder, PREFERRED_MIME)) !== null && _b !== void 0 ? _b : false;
+            const recorder = new MediaRecorder(stream, useWebm ? { mimeType: PREFERRED_MIME } : undefined);
+            recorderRef.current = recorder;
+            recorder.ondataavailable = (event) => {
+                if (event.data.size > 0)
+                    chunksRef.current.push(event.data);
+            };
+            recorder.onerror = () => {
+                release();
+                setStatus("idle");
+            };
+            recorder.onstop = () => {
+                const duration = Date.now() - startedAtRef.current;
+                const { type, name } = (0, exports.recordingFileName)(recorder.mimeType || PREFERRED_MIME, Date.now());
+                const file = new File(chunksRef.current, name, { type });
+                release();
+                setStatus("idle");
+                setElapsedMs(duration);
+                setAnnouncement(`${textRef.current.recorded} ${(0, exports.formatElapsed)(duration)}`);
+                if (file.size > 0)
+                    onRecordedRef.current(file);
+            };
+            recorder.start();
+            startedAtRef.current = Date.now();
+            setElapsedMs(0);
+            setStatus("recording");
+            setAnnouncement(textRef.current.recording);
+            timerRef.current = setInterval(() => {
+                const elapsed = Date.now() - startedAtRef.current;
+                if (maxDurationSec !== undefined && elapsed >= maxDurationSec * 1000) {
+                    setElapsedMs(maxDurationSec * 1000);
+                    stop();
+                    return;
+                }
+                setElapsedMs(elapsed);
+            }, TICK_MS);
+        }
+        catch (error) {
+            release();
+            if (!mountedRef.current)
+                return;
+            const name = error === null || error === void 0 ? void 0 : error.name;
+            setStatus(name === "NotFoundError" ? "unsupported" : "denied");
+        }
+        finally {
+            startingRef.current = false;
+        }
+    }, [maxDurationSec, release, stop]);
+    const isRecording = status === "recording";
+    const blocked = status === "unsupported";
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 3, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: isRecording ? text.stop : text.start, size: "sm", colorScheme: isRecording ? "red" : undefined, variant: isRecording ? "solid" : "outline", "aria-pressed": isRecording, isDisabled: isRecording ? false : isDisabled || blocked, onClick: isRecording ? stop : () => void start() }), isRecording ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { "data-testid": "audio-recorder-dot", boxSize: "0.5rem", borderRadius: "full", bg: colors.semanticText.error, "aria-hidden": true, sx: {
+                                    "@media (prefers-reduced-motion: no-preference)": { animation: "audio-recorder-pulse 1.2s ease-in-out infinite" },
+                                    "@keyframes audio-recorder-pulse": { "0%, 100%": { opacity: 1 }, "50%": { opacity: 0.35 } },
+                                } }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", role: "timer", fontSize: "0.875rem", color: colors.header[900], sx: { fontVariantNumeric: "tabular-nums" }, children: (0, exports.formatElapsed)(elapsedMs) })] })) : null] }), (0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { role: "status", "aria-live": "polite", children: announcement }), status === "denied" || status === "unsupported" ? ((0, jsx_runtime_1.jsx)(react_2.Text, { role: "alert", mt: 1, fontSize: "0.75rem", color: colors.semanticText.error, children: status === "denied" ? text.permissionDenied : text.unsupported })) : null] }));
+};
+exports.default = AudioRecorder;

package/dist/Components/AudioRecorder/AudioRecorderProps.d.ts

@@ -0,0 +1,20 @@
+/** Visible text and announcements; every key falls back to English. */
+export type AudioRecorderLabels = {
+    start: string;
+    stop: string;
+    recording: string;
+    /** Announced when a recording finishes, followed by its duration. */
+    recorded: string;
+    permissionDenied: string;
+    unsupported: string;
+};
+/** Props for the microphone recorder: one toggle button, a timer, and a `File` on stop. */
+export interface AudioRecorderProps {
+    /** Receives the finished recording; never called for an empty one or after unmount. */
+    onRecorded: (file: File) => void;
+    /** Stops the recording by itself after this many seconds. No limit when omitted. */
+    maxDurationSec?: number;
+    /** Blocks Start only; a recording already in progress can always be stopped. */
+    isDisabled?: boolean;
+    labels?: Partial<AudioRecorderLabels>;
+}

package/dist/Components/AudioRecorder/AudioRecorderProps.js

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

package/dist/Components/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,2 +1,2 @@
 import { BreadcrumbsProps } from "./BreadcrumbsProps";
-export default function Breadcrumbs({ spacing, separator, fontWeight, fontSize, isCurrentPage, handleClick, items, }: BreadcrumbsProps): import("react/jsx-runtime").JSX.Element;
+export default function Breadcrumbs({ spacing, separator, fontWeight, fontSize, isCurrentPage, handleClick, items, overflow, maxItems, labels, "data-testid": testId, }: BreadcrumbsProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Breadcrumbs/Breadcrumbs.js

@@ -4,19 +4,42 @@ exports.default = Breadcrumbs;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const breadcrumbInk_1 = require("./breadcrumbInk");
-function Breadcrumbs({ spacing, separator, fontWeight, fontSize, isCurrentPage, handleClick, items, }) {
+const DEFAULT_MAX_ITEMS = 3;
+const MIN_MAX_ITEMS = 2;
+const OVERFLOW_SX = {
+    nowrap: undefined,
+    wrap: { "& ol": { flexWrap: "wrap", rowGap: "4px" }, "& li": { maxWidth: "100%" } },
+    truncate: { "& ol": { flexWrap: "nowrap" }, "& li": { minWidth: 0 } },
+};
+const collapse = (entries, maxItems) => {
+    const keep = Math.max(MIN_MAX_ITEMS, Math.floor(maxItems));
+    if (entries.length <= keep)
+        return { head: entries, hidden: [], tail: [] };
+    return { head: entries.slice(0, 1), hidden: entries.slice(1, entries.length - (keep - 1)), tail: entries.slice(entries.length - (keep - 1)) };
+};
+function Breadcrumbs({ spacing, separator, fontWeight, fontSize, isCurrentPage, handleClick, items, overflow = "nowrap", maxItems = DEFAULT_MAX_ITEMS, labels, "data-testid": testId, }) {
     const theme = (0, react_1.useTheme)();
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const ink = (0, breadcrumbInk_1.breadcrumbInk)(colors);
     const effectiveSeparator = separator !== null && separator !== void 0 ? separator : ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: ink.separator, children: "/" }));
-    return ((0, jsx_runtime_1.jsx)(react_1.Breadcrumb, { spacing: spacing, separator: effectiveSeparator, fontWeight: fontWeight, fontSize: fontSize, fontFamily: theme.fonts.body, children: items.map((item, index) => {
-            const isLast = isCurrentPage && index === items.length - 1;
-            return ((0, jsx_runtime_1.jsx)(react_1.BreadcrumbItem, { isCurrentPage: isLast, children: (0, jsx_runtime_1.jsx)(react_1.BreadcrumbLink, { href: item.path, color: isLast ? ink.current : ink.link, fontWeight: isLast ? 600 : fontWeight, sx: {
-                        "&:hover, &:active": { textDecoration: "none", color: isLast ? ink.current : ink.linkHover },
-                    }, onClick: (event) => {
-                        event.preventDefault();
-                        handleClick(item.path);
-                    }, children: item.label }) }, index));
-        }) }));
+    const clip = overflow !== "nowrap";
+    const clipProps = clip ? { noOfLines: 1 } : {};
+    const renderCrumb = ({ crumb, index }) => {
+        const isLast = Boolean(isCurrentPage) && index === items.length - 1;
+        const color = isLast ? ink.current : ink.link;
+        const common = { ...clipProps, title: clip ? crumb.label : undefined, color, fontWeight: isLast ? 600 : fontWeight };
+        return ((0, jsx_runtime_1.jsx)(react_1.BreadcrumbItem, { isCurrentPage: isLast, children: crumb.path === undefined ? ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", "aria-current": isLast ? "page" : undefined, ...common, children: crumb.label })) : ((0, jsx_runtime_1.jsx)(react_1.BreadcrumbLink, { href: crumb.path, ...common, sx: { "&:hover, &:active": { textDecoration: "none", color: isLast ? ink.current : ink.linkHover } }, onClick: (event) => {
+                    event.preventDefault();
+                    handleClick(crumb.path);
+                }, children: crumb.label })) }, index));
+    };
+    const renderMenu = (hidden) => {
+        var _a;
+        return ((0, jsx_runtime_1.jsx)(react_1.BreadcrumbItem, { sx: { flexShrink: 0 }, children: (0, jsx_runtime_1.jsxs)(react_1.Menu, { isLazy: true, placement: "bottom-start", children: [(0, jsx_runtime_1.jsx)(react_1.MenuButton, { type: "button", "aria-label": ((_a = labels === null || labels === void 0 ? void 0 : labels.showMore) !== null && _a !== void 0 ? _a : ((n) => `Show ${n} more`))(hidden.length), color: ink.link, borderRadius: "md", px: 1, _hover: { color: ink.linkHover }, sx: (0, focusRing_styles_1.focusVisibleStyles)(colors), children: "\u2026" }), (0, jsx_runtime_1.jsx)(react_1.MenuList, { children: hidden.map(({ crumb, index }) => ((0, jsx_runtime_1.jsx)(react_1.MenuItem, { isDisabled: crumb.path === undefined, onClick: () => crumb.path !== undefined && handleClick(crumb.path), children: crumb.label }, index))) })] }) }, "overflow"));
+    };
+    const entries = items.map((crumb, index) => ({ crumb, index }));
+    const { head, hidden, tail } = overflow === "truncate" ? collapse(entries, maxItems) : { head: entries, hidden: [], tail: [] };
+    return ((0, jsx_runtime_1.jsxs)(react_1.Breadcrumb, { spacing: spacing, separator: effectiveSeparator, fontWeight: fontWeight, fontSize: fontSize, fontFamily: theme.fonts.body, sx: OVERFLOW_SX[overflow], "data-testid": testId, children: [head.map(renderCrumb), hidden.length > 0 && renderMenu(hidden), tail.map(renderCrumb)] }));
 }

package/dist/Components/Breadcrumbs/BreadcrumbsProps.d.ts

@@ -4,11 +4,25 @@ export type BreadcrumbsProps = Pick<BreadcrumbProps, "spacing" | "separator" | "
     isCurrentPage?: boolean;
     /** Accepted but never read by Breadcrumbs — has no effect at all. */
     isLastChild?: boolean;
+    /** Called with a crumb's path; never called for a label-only crumb (no `path`). */
     handleClick: (path: string) => void;
     items: BreadcrumbItem[];
+    /** "wrap" flows crumbs onto new lines; "truncate" keeps one line and folds middle crumbs into a "…" menu. Default "nowrap". */
+    overflow?: "nowrap" | "wrap" | "truncate";
+    /** With overflow "truncate": most crumbs shown (first plus the last `maxItems - 1`); the rest go in the menu. Default 3, minimum 2. */
+    maxItems?: number;
+    /** Visible-string overrides; `showMore` is the collapsed menu button's aria-label. */
+    labels?: BreadcrumbsLabels;
+    "data-testid"?: string;
 };
-/** One crumb: `label` is the visible text, `path` is passed to both the link's href and `handleClick`. */
+/** Visible strings, each with an English default. */
+export type BreadcrumbsLabels = {
+    /** Default: `Show ${count} more`. */
+    showMore?: (count: number) => string;
+};
+/** One crumb: `label` is the visible text; `path` goes to the link's href and `handleClick`. */
 export type BreadcrumbItem = {
-    path: string;
+    /** Omit for a label-only crumb: rendered as text, not a link, never passed to `handleClick`. */
+    path?: string;
     label: string;
 };

package/dist/Components/BulkSelectionBar/BulkSelectionBar.d.ts

@@ -0,0 +1,3 @@
+import type { BulkSelectionBarProps } from "./BulkSelectionBarProps";
+declare const BulkSelectionBar: ({ selectedCount, facts, actions, onClearSelection, clearLabel, countLabel, placement, "aria-label": ariaLabel, "data-testid": testId, }: BulkSelectionBarProps) => import("react/jsx-runtime").JSX.Element | null;
+export default BulkSelectionBar;

package/dist/Components/BulkSelectionBar/BulkSelectionBar.js

@@ -0,0 +1,43 @@
+"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("react");
+const react_2 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const Button_1 = __importDefault(require("../Button/Button"));
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const FACT_SEPARATOR = " · ";
+const VARIANT_BY_TONE = {
+    default: "outline",
+    primary: "solid",
+    danger: "outline",
+};
+const SCHEME_BY_TONE = {
+    default: "gray",
+    primary: "primary",
+    danger: "red",
+};
+const TOUCH_SX = { "@media (pointer: coarse)": { minHeight: "44px", minWidth: "44px" } };
+const BulkSelectionBar = ({ selectedCount, facts, actions, onClearSelection, clearLabel = "Clear selection", countLabel, placement = "sticky", "aria-label": ariaLabel = "Selection actions", "data-testid": testId = "bulk-selection-bar", }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const isActive = selectedCount > 0;
+    const summary = countLabel !== null && countLabel !== void 0 ? countLabel : `${selectedCount} selected`;
+    const [announcement, setAnnouncement] = (0, react_1.useState)("");
+    (0, react_1.useEffect)(() => {
+        setAnnouncement(isActive ? summary : "");
+    }, [isActive, summary]);
+    if (!isActive)
+        return null;
+    const resolvedFacts = (facts !== null && facts !== void 0 ? facts : []).filter(Boolean);
+    const isSticky = placement === "sticky";
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { role: "region", "aria-label": ariaLabel, "data-testid": testId, align: "center", gap: 3, wrap: "wrap", px: 4, py: 2, w: "100%", borderRadius: "lg", borderWidth: "1px", borderColor: colors.boxborder[200], bg: colors.surfaceRaised, position: isSticky ? "sticky" : "relative", bottom: isSticky ? 0 : undefined, zIndex: isSticky ? 2 : undefined, children: [(0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { role: "status", "aria-live": "polite", "data-testid": "bulk-selection-announcement", children: announcement }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "baseline", gap: 1, flex: "1", minW: "180px", wrap: "wrap", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: 600, color: colors.text[800], "data-testid": "bulk-selection-count", children: summary }), resolvedFacts.length ? ((0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: colors.textMuted, "data-testid": "bulk-selection-facts", children: [FACT_SEPARATOR, resolvedFacts.join(FACT_SEPARATOR)] })) : null] }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, wrap: "wrap", children: [actions.map((action) => {
+                        var _a;
+                        const tone = (_a = action.tone) !== null && _a !== void 0 ? _a : "default";
+                        const Icon = action.icon;
+                        return ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: VARIANT_BY_TONE[tone], colorScheme: SCHEME_BY_TONE[tone], onClick: action.onClick, isDisabled: action.isDisabled, isLoading: action.isLoading, loadingText: action.label, leftIcon: Icon ? (0, jsx_runtime_1.jsx)(Icon, { size: 16, "aria-hidden": "true" }) : undefined, sx: TOUCH_SX, "data-testid": `bulk-action-${action.id}`, "data-tone": tone, children: action.label }, action.id));
+                    }), (0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: onClearSelection, leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16, "aria-hidden": "true" }), sx: TOUCH_SX, "data-testid": "bulk-selection-clear", children: clearLabel }) })] })] }));
+};
+exports.default = BulkSelectionBar;

package/dist/Components/BulkSelectionBar/BulkSelectionBarProps.d.ts

@@ -0,0 +1,35 @@
+import type { ElementType } from "react";
+/** Emphasis of a bulk action: "primary" is the affirmative one, "danger" the destructive one, "default" the rest. */
+export type BulkActionTone = "default" | "primary" | "danger";
+/** One button in the bar; actions render in array order. */
+export interface BulkAction {
+    /** Stable key; also the suffix of the button's `data-testid` (`bulk-action-<id>`). */
+    id: string;
+    label: string;
+    onClick: () => void;
+    /** Defaults to "default". */
+    tone?: BulkActionTone;
+    /** Icon component (e.g. a lucide icon); rendered at 16px, decorative. */
+    icon?: ElementType;
+    isDisabled?: boolean;
+    /** Spinner on this action; the label stays as the loading text. */
+    isLoading?: boolean;
+}
+/** Props for the selection bar shown while table rows are selected; it renders nothing at zero. */
+export interface BulkSelectionBarProps {
+    /** Rows selected; the bar renders nothing at 0 and announces each change politely. */
+    selectedCount: number;
+    /** Short claims true of the whole selection, e.g. ["all leave", "no clashes"]; joined after the count with " · ". */
+    facts?: string[];
+    actions: BulkAction[];
+    onClearSelection: () => void;
+    /** Clear button text; defaults to "Clear selection". */
+    clearLabel?: string;
+    /** Replaces the default "{n} selected" text, and what is announced. */
+    countLabel?: string;
+    /** "sticky" (default) pins to the bottom of the nearest scroll container; "inline" stays in flow. */
+    placement?: "inline" | "sticky";
+    /** Accessible name of the region; defaults to "Selection actions". */
+    "aria-label"?: string;
+    "data-testid"?: string;
+}

package/dist/Components/BulkSelectionBar/BulkSelectionBarProps.js

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

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

@@ -0,0 +1,2 @@
+export { default as BulkSelectionBar } from "./BulkSelectionBar";
+export type { BulkAction, BulkActionTone, BulkSelectionBarProps } from "./BulkSelectionBarProps";

package/dist/Components/BulkSelectionBar/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.BulkSelectionBar = void 0;
+var BulkSelectionBar_1 = require("./BulkSelectionBar");
+Object.defineProperty(exports, "BulkSelectionBar", { enumerable: true, get: function () { return __importDefault(BulkSelectionBar_1).default; } });

package/dist/Components/CalendarGrid/CalendarGrid.d.ts

@@ -0,0 +1,3 @@
+import type { CalendarGridProps } from "./CalendarGridProps";
+declare const CalendarGrid: ({ view, date, events, onViewChange, onDateChange, onEventClick, renderDayCell, weekStartsOn, locale, isLoading, labels, }: CalendarGridProps) => import("react/jsx-runtime").JSX.Element;
+export default CalendarGrid;