pixelize-design-library 2.4.2-beta.63 → 2.4.2-beta.65

package/CHANGELOG.md

@@ -18,6 +18,31 @@ next major.
 
 ### Added
 
+- **`WorkspaceTray` is usable over an open modal.** It is portalled above the modal layer, labelled as a live region
+  (so Chakra's modal aria-hidden skips it) and outside the focus trap, so a window minimised over a wizard can be
+  restored without closing the wizard. New props: `placement` (`"bottom-end"` | `"bottom-start"`), `offset`,
+  `closeLabel(item)`, `dirtyLabel`, `label`; `WorkspaceTrayItem` gains `isDirty` (unsaved dot) and `subtitle`.
+  `WorkspaceWindow` gains `labels` ({minimize, close, openFullPage}) and `finalFocusRef`.
+  The tray now renders in a portal, so a test that queries inside its render container must query `document.body`.
+- **`WorkspaceTray` `renderItem` receives the built-in pill** as a third argument, `renderItem(item, api, pill)`: the pill
+  already carries the unsaved dot, subtitle and close button, so a consumer can return it or wrap it (in
+  `WorkspaceTrayPreview` for a hover preview, say) instead of rebuilding it. Two-argument callbacks and the default
+  pill are unchanged.
+- **`FormDrawer` `isSubmitDisabled`**: disables the primary button and makes the form ignore Enter and any other submit,
+  so `onSubmit` never fires, not even from `requestSubmit()` or a dispatched submit event (the drawer is a real
+  `<form>`; the button alone does not guard those). Unlike `isSubmitting` it shows no spinner, and Cancel and every
+  close path stay live. Omitted, nothing changes.
+- **`WizardDialog` `chrome="inline"`** (default `"modal"`): draws the wizard (title, stepper, step, review, footer) in place
+  with no Modal, for a host that is already the dialog, such as a `WorkspaceWindow`: no overlay, focus trap, close X,
+  Esc-to-close or `role="dialog"`. It renders nothing while `isOpen` is false, ignores `size`, and Cancel still calls
+  `onClose`. It reuses the same flow as the modal (`useWizardFlow`, `validate`, `finishDisabled`, `finishBlockedReason`,
+  `stepId`); test ids are `wizard-inline` / `${data-testid}-inline`. `Wizard` does not take the prop.
+- **`optionRowFill(rows, isActive)`** and **`optionRowCursorSx(rows)`** are exported from the package root: the one
+  fill an option row paints (the cursor's), and its `:hover`/`:focus` form for roving-focus lists.
+- **`accentTextOnPlanes(scale, planes)`** is exported from the package root: the first accent rung clearing AA on every
+  plane in the list, for chrome that can land on the canvas, a card or an overlay.
+- **`ruleOn(colors, plane)`** and **`MOTION_PRESS_SCALE`** are exported from the package root. `ruleOn` draws a divider at the
+  in-card weight on any plane (`cardRule` is `ruleOn` on `background[50]`); the press scale was only reachable by deep import.
 - **`Card variant="elevated"`**: borderless, `background[50]` lifted by `shadows.card`; declares a 0 border width so it
   never inherits an outline parent's rule.
 - **`bandOn`, `recessOn`, `cardRule`**: plane-step helpers that return the input unchanged in light and a visible step
@@ -83,6 +108,53 @@ next major.
   document-wide `prefers-reduced-motion` rule; `pz-motion-keep` (`MOTION_KEEP_CLASS`) opts an element out.
   The default is unchanged. `CustomThemeProps` gains `zIndices.popoverNested` and the two font sizes, so
   code that hand-builds a full `CustomThemeProps` needs those keys.
+- **`LauncherSearchEngine.matches` and `.createMatcher`**: the boolean form of the engine for table and list filters.
+  `matches(query, ...texts)` is true when every query word hits some text (same folding, typo tolerance and `synonyms`
+  option as `search`, no ranking); `createMatcher(query)` compiles the query once for a loop over rows, and an empty query
+  matches every row. `LauncherMatcher` is exported as a type.
+- **`LauncherSearchEngine` searches Hindi and Tamil by written letter**: Latin accents, the Devanagari nukta and
+  zero-width joiners are ignored, chandrabindu folds into anusvara, and every other combining mark stays part of its
+  letter, so a bare vowel sign never matches ("का" does not find "कमाई"). Typo length and distance count letters
+  ("कम्मचारी" finds "कर्मचारी"), and a Tamil word ending in ம் also finds titles that drop it ("நேரம்" finds "நேர அட்டவணை").
+  `editDistance` accepts arrays of letters. Latin results are unchanged. `engine/conformance.fixture.json` is the
+  behaviour contract shared with HRMS mobile search, asserted by `engine/conformance.test.ts`.
+- **`NavLauncher` spotlight search** (all additive; an app passing none of these renders as before):
+  - `searchMode="spotlight"` ranks every row by relevance (exact > prefix > word > word-prefix >
+    initialism > substring > typo > subsequence, label > keyword > context), tolerates typos
+    (Damerau-Levenshtein 1 from 4 letters, 2 from 8), folds case and accents, expands `synonyms`
+    both ways, boosts `pinnedIds` / `frequentIds` / `recentIds`, and shows the best row first as a
+    **Top hit** card naming the keyword or fact that matched. Groups collapse to `groupLimit` rows
+    (default 5 in spotlight, unlimited in classic) behind a "Show N more" option.
+  - `scopes` + `activeScope` / `onScopeChange`: filter chips in the header row beside the field
+    (their own row below `md`), always shown so they say what can be searched; while typing each
+    chip shows its live match count and is named "People, 3 results". One Tab stop (radiogroup,
+    roving tabindex, arrows / Home / End); the strip scrolls sideways behind an edge fade with a
+    mouse page arrow and keeps the selected chip in view, so the field never drops below 15rem (or a
+    third of a wide row). "All" is prepended, `screens`
+    and `actions` are built in and `LauncherResultGroup.scope` (default its `id`) places any other
+    group. A chip other than All / Screens picked with an empty field lists that scope's items as
+    passed, with the facts pane; `LauncherScope.placeholder` narrows the field's placeholder.
+  - `quickActions`: up to 5 pill buttons at the top of the menu while the query is empty and the
+    scope is All.
+  - `LauncherSearchItem.facts` (`{ label, value, copyable? }`): a right preview pane at `lg`+ for the
+    highlighted row with Copy buttons (blocked clipboard selects the value instead), docked under the
+    list below `lg`. `answers` (items with `answer: { label, value, hint? }`) render as direct-answer
+    cards above every result; Enter copies an answer that has no `run` / `href`.
+  - `LauncherResultGroup.matchLocally`: the launcher filters and ranks a static group itself.
+  - `LauncherSearchEngine` — the framework-free engine behind it (`createIndex`, `search`,
+    `searchDocuments`, `highlightRanges`, `usageBoosts`, `foldText`, `tokenize`, `editDistance`; options
+    `synonyms`, `boosts`, `fuzzy`, `relativeCutoff`, `limit`) for any other list or palette; `highlightSegments` now exported, with an opt-in `{ fuzzy, synonyms }`.
+  - New optional `LauncherLabels` keys: `topHit`, `matchedOn`, `answers`, `hintCopy`, `scopes`,
+    `scopeAll`, `scopeChanged`, `scopeCount`, `scopeEmpty`, `quickActions`, `showMore`, `preview`,
+    `copy`, `copied`, `copySelected`.
+  - The dialog is now always named `labels.title`; the search value and `headerActions` no longer
+    join its accessible name.
+  - Types `LauncherFact`, `LauncherAnswer`, `LauncherScope`, `LauncherSearchMode`, `HighlightOptions`,
+    `LauncherSearch*` / `LauncherSynonyms` / `LauncherMatchKind` / `LauncherTokenMatch`.
+- `CopyButton` `onCopyError` — fires when the clipboard is missing or denied, instead of failing silently.
+- `Drawer` `aria-label` / `aria-labelledby` — name the dialog instead of its whole header (a header
+  holding a field or buttons otherwise becomes the name); `contentProps["aria-labelledby"]` never
+  worked.
 - **HRMS library requests** — a navigation launcher, key caps, a merge-field `Editor`, a wizard and
   smaller gaps found by the HRMS migration:
   - `NavLauncher` — full-height navigation launcher (browse modules, pins, Frequent, Recent, search
@@ -248,8 +320,9 @@ next major.
   library; bring your own.
 
 - **Dark mode.** `PixelizeThemeProvider` (defaults to `system`), `useThemeMode`, `ThemeSwitcher`.
-  Dark palettes are derived per brand from that brand's own light palette, so brand hue carries
-  through. `withTheme` stays light-only, so existing apps are visually unchanged — dark is opt-in.
+  Dark palettes are derived per brand from that brand's own light palette: surfaces are hue-neutral,
+  and the brand hue carries through on the accent, ink, rules and rail. `withTheme` stays light-only,
+  so existing apps are visually unchanged — dark is opt-in.
 - **`MediaViewer`** — a full-screen viewer for images, video, audio, PDF, Office documents, text
   and archives, with a filmstrip, keyboard navigation and per-kind fallbacks. `index` is optional:
   omit it and the viewer owns navigation itself.
@@ -381,6 +454,45 @@ next major.
 
 ### Changed (visual)
 
+- **Dark surfaces are hue-neutral on every brand.** The canvas, card, overlay, named `backgroundColor` ladder,
+  `background[50-900]` and `table.hover` no longer take a brand tint (`SURFACE_SAT` 14 to 0): all 9 brands share
+  canvas `#121212`, card `#212121` (1.163:1 over the canvas) and overlay `#2c2c2c` (1.153:1 over the card), so
+  switching brand no longer recolours the app background. The brand hue stays on the accent, ink, rules and the
+  sidebar rail. Light palettes are byte-identical to before (SHA-256 of all 9 resolved light palettes). Muted dark
+  text re-derives against the neutral surfaces and shifts a few hex values on lavender, rosewood, slate and zinc
+  (lavender `#9f92aa` to `#a498ae`); every muted token still passes the same AA gate. `planes: "flat"` keeps its
+  meaning (card = canvas) on the same canvas.
+- **`Table` loading state.** With `isLoading` and no rows, each row now draws one skeleton per column (a checkbox
+  placeholder in the checkbox column, blank spacer cells) with the variant's row rule, instead of one bar spanning the
+  table. If `columns` is still empty while loading, the header shows four placeholder cells and a disabled select-all
+  instead of a lone checkbox stretched across the row. The select-all checkbox is disabled while `isLoading`.
+- **`Table` defaults to `variant="studio"`.** Every `Table` rendered without `variant` (or with `variant={undefined}`)
+  now draws studio: flat small-caps header, one row rule, the select slot resting on the row number, status as a pill.
+  Keep the old look with `variant="classic"`. Measured 2026-10-14: crm-frontend has 38 `<Table>` call sites, none
+  passing `variant` (all 38 change); account-frontend 8 of 18 change (the other 10 already pass `"studio"`); hrms,
+  tickets and lfour render `Table` only through an `AppTable` wrapper that already defaults to studio (0 change).
+- **Option rows fill only under the cursor; selection is the trailing check and weight 500.** `Select`, `SearchSelect`,
+  `SelectSearch`, `CompactSelect` and `OrgSwitcher` no longer fill the selected row: the selected fill sat 1.00-1.02:1
+  from the hover fill on all 18 brand x mode palettes, so the two read as one state. `SelectSearch`/`CompactSelect` no
+  longer fill row 0 on open beside the hovered row. `Dropdown` items keep `text[700]` under the cursor instead of turning
+  `accentText`. `SearchSelect` rows sit inset (`mx`, rounded) with the check at the trailing edge and no hairline
+  between rows. Text on every row state measures 7.69:1 or more (selected 12.43-19.90:1).
+- **Chakra `Menu` items use option-row ink:** `text[700]` instead of `text[900]`; a checked `MenuItemOption` is weight
+  500 with an `accentText` check, matching `Select`.
+- **Dark `Button` `outline`/`ghost`/`link` ink is chosen against the canvas, the card and the overlay.** It cleared AA
+  on the canvas only, so in a dialog or popover it fell to 4.06-4.50:1 in 24 scheme x brand combos (lavender outline
+  4.46:1, rosewood 4.10:1); now AA on all three planes (lavender 6.28:1, rosewood 5.57:1). Light mode is unchanged
+  (0 light combos move); 62 dark combos step lighter (emerald primary `#0f9d8a` -> `#14e3c7`).
+- **Dark rules and pressed solids (owner review before release).** In dark only: the `NavigationBar` header rule and
+  leading divider, the `KanbanBoard` column edge, header rule and count pill, the filled `TextInput` (a visible band off
+  the card) and the Kanban drag-over column's dashed border (`focusRing.ring`, 3.1:1 or more instead of 1.7-2.7:1)
+  now read at the in-card rule weight instead of 1.03-1.16:1. Solid `hover`/`active` fills never fall below 1.5:1 against
+  the canvas (a pressed warning solid reached 1.00:1) and never flip the label colour, so zinc dark's pressed primary stays
+  light with dark ink instead of dropping to `#52525b`. `ScrollToTop`, `FilePreview`, `ProfilePhotoViewer`, the Table
+  clear-filters badge, Chakra `Badge`/`Radio` and the Table status pills now pass the canvas to `solidFillRung`: zinc dark
+  primary and every brand's dark gray solid move from `#52525b`/`#525252` (2.4:1) to `#e4e4e7`/`#a3a3a3` with dark ink.
+  Light mode and every other dark colour keep their fill; error/warning/info pressed fills in dark are lighter than before
+  and hover and press now share one rung.
 - **Elevation follows Pebble, per mode.** `shadows.sm`/`base`/`md`/`lg` are the Pebble card-press/
   card/float/dialog stacks, with new `card`, `float`, `dialog` and `sheet` role keys. Light shadows are
   softer and wider; dark mode gets its own heavier black ramp, so overlays cast a visible shadow on a
@@ -418,11 +530,10 @@ next major.
   2px on hover; the shadow still deepens.
 - **`Button` (solid, outline, ghost) and `IconButton` scale to 0.98 while pressed** (`MOTION_PRESS_SCALE`).
   Never when disabled or loading, nor under `prefers-reduced-motion`.
-- **Dark planes carry the brand hue and separate by lift.** The dark canvas takes a faint brand tint and cards
-  (`background[50]`) sit one step (1.16:1) above it, with overlays (`surfaceRaised`) one step (1.15:1) above
-  the card; every filled mark keeps 3:1 on all three. Light mode is unchanged. A brand opts out with
-  `buildDarkPalette(light, { planes: "flat" })`. `meadow` and `rosewood` dark `accentText` move one rung
-  lighter so they clear AA on selected list rows.
+- **Dark planes separate by lift.** Cards (`background[50]`) sit one step (1.16:1) above the canvas, with
+  overlays (`surfaceRaised`) one step (1.15:1) above the card; every filled mark keeps 3:1 on all three. Light
+  mode is unchanged. A brand opts out of the lift with `buildDarkPalette(light, { planes: "flat" })`. `meadow`
+  and `rosewood` dark `accentText` move one rung lighter so they clear AA on selected list rows.
 - **`zinc`:** muted text in light mode is `#515157` (was `#27272a`, 14.9:1), settled under a new 8:1 muted
   ceiling; zinc's dark card is no longer darker than its canvas.
 - **A brand's primary never reads as danger.** `radiant`'s danger colour (`red` and `semantic.error`) is
@@ -444,6 +555,10 @@ next major.
 
 ### Fixed
 
+- **`WorkspaceTrayPreview`** reports `onOpenChange(false)` only after the card actually opened (it used to fire when
+  the pointer left before the open delay).
+- **`FileUploader`** revokes the blob URL of an image the moment it is removed, and of images it rejects (over the total
+  size or past `maxFiles`); those URLs were created and never freed. Surviving URLs stay yours to revoke.
 - **`Table` settings sheet** fades in place instead of dropping in when the user prefers reduced motion.
 - **`SearchSelect`**: the Select All and Add New rows are reachable from the keyboard. Arrow keys, Home and End walk
   Select All, then the options, then Add New, and Enter runs them. Both are now `role="option"` rows, so a test that
@@ -491,6 +606,8 @@ next major.
 - **`FileUpload` no longer leaks a blob URL per image thumbnail per render.** Each file gets one URL,
   revoked when the file is removed or the component unmounts.
 - **`Table` column search shows the current search when reopened**, instead of stale text.
+- **`NavLauncher` search rows shorten the `· keyword` hint before the label**, so a long keyword list
+  no longer cuts "Apply for leave" down to "Apply…".
 - **`NavigationBar` right cluster no longer overflows onto the avatar at phone widths.** The title
   truncates first (overflow-only tooltip when it is a string); the `moreIcon` cluster can shrink, while
   the sidebar toggle, back button and avatar menu never do. (HRMS, beta.60 launcher trigger overflow)
@@ -744,7 +861,12 @@ Nothing is removed yet — each of these still ships its full implementation.
 - `CustomModulesTableLabels.loading` — never rendered; the loading state shows skeleton bars only.
 - `WorkspaceWindow` `onMedium` and `onMaximize` — never called; the window has no such controls.
 - `NavLauncher` `openShortcutHint` and `LauncherLabels.hintOpenMenu` — no longer rendered (the launcher
-  is already open when its footer shows); bind the open chord in the app only.
+  is already open when its footer shows); bind the open chord in the app only. `hintOpenMenu` is now
+  optional, so a full `LauncherLabels` object type-checks without it.
+- `searchLauncher` — legacy flat search (one Screens group); `NavLauncher` never calls it. Classic mode
+  runs `searchLauncherSections`, which matches a screen on its own label and keywords only ("leave
+  balance" finds nothing unless one screen's keywords carry both words); `searchMode="spotlight"`
+  ranks and also matches a screen on its module and section.
 - `SelectV2` — use `Select` with `native={false}`; it is already a thin wrapper over it.
 - `SearchSelect`, `SelectSearch` are **no longer `@deprecated`.** Both now say "prefer `Select`
   for new work" instead: `@deprecated` claimed a migration that loses real capabilities

package/COMPONENT-GOTCHAS.md

@@ -342,7 +342,6 @@ rows per page does not reset `page` either. Reset it yourself, in `onPageSizeCha
 
 ### Four components with a behaviour their props do not hint at
 
-- `WorkspaceTrayPreview` `onOpenChange(false)` also fires when the pointer leaves before the card ever opened; track your own open state from `true`.
 - `Notification`'s countdown is computed when its dates change and never ticks; remount or change a date to refresh it. Overdue labels read "overdue by N hours ago".
 - `NoteTextArea` checks `maxNoteWordCount` against the title only until the note is next edited, so a long title can be saved; `handleCancel` always receives `false`.
 - `VerifyEmailOtp` fields set `autocomplete="off"`, so browser or OS one-time-code autofill never offers the code.
@@ -548,6 +547,19 @@ use `bandOn(fill, surface)` for a header strip, hover or selection tint, `recess
 or off cell, `cardRule(colors)` for a rule inside a card and `raisedRule(colors)` for a rule inside an overlay.
 All four return the old value unchanged in light mode.
 
+### A Chakra `ModalHeader` inside a coloured box keeps its own ink
+
+The theme gives `ModalHeader` `color: colors.header[900]` and a bottom rule. Wrapping it in a
+`Box bgGradient=… color={ink}` does not recolour it: the header paints `header[900]` itself, so the
+title is dark navy on a blue/purple gradient (3.11–4.11:1 in light across the 9 brands, against
+4.62:1 for the gradient's own ink). Icons and badges inside it that read `currentColor` follow the
+header, not the box.
+
+**Apply:** put the ink on the header itself — `<ModalHeader color={resolved.ink} borderBottomWidth={0}>`
+with `resolved = resolveGradient(stops, colors.white, colors.black)` — or use `LimitReachedModal`.
+For an accent icon on the gradient, use `resolved.ink` unless the accent clears 3:1 on both
+`resolved.from` and `resolved.to`; a theme `yellow[300]` drops to 2.61:1 in dark.
+
 ### `Drawer` / `Modal` / `ProfileCard` drop any child that isn't a named slot — use `portalChildren`
 
 All three match children by exact type (`child.type === XHeader/XBody/XFooter`) and render only
@@ -574,7 +586,8 @@ It sets `noValidate`: validate in `onSubmit` and pass messages via `errors`. Err
 fires only after a submit; if validation is async, set `isSubmitting` synchronously in `onSubmit` so
 focus waits for the result, otherwise errors that arrive later are not focused. The footer submit
 button is tied to the form with the `form` attribute — Enter-to-submit works in browsers, but
-jsdom / user-event does not simulate it, so use `fireEvent.submit(form)` in tests.
+jsdom / user-event only simulates it for a form with exactly one text field, so use
+`fireEvent.submit(form)` in tests. `isSubmitDisabled` swallows both: `onSubmit` is not called while it is true.
 
 ### `QueryStateBoundary` evaluates JSX `children` even while loading
 
@@ -700,13 +713,13 @@ whose defaults arrive asynchronously doesn't open already red.
 ### A wrapper presetting a prop must destructure with a default, not rely on JSX prop order
 
 Wrapping a library component to preset a prop (e.g. `Table`'s `variant`) as
-`<Table variant="studio" {...props} />` silently reverts to the library's own default the moment a
+`<Table variant="classic" {...props} />` silently reverts to the library's own default the moment a
 caller passes `variant={undefined}` — a later spread always wins in JSX, even with `undefined`,
 and the library component resolves that `undefined` via its own default parameter.
 
 **Apply:**
 ```tsx
-const AppTable = ({ variant = 'studio', ...props }: TableProps) => <Table variant={variant} {...props} />;
+const AppTable = ({ variant = 'classic', ...props }: TableProps) => <Table variant={variant} {...props} />;
 ```
 Applies to any library prop with a default value, not just `Table`'s `variant`.
 
@@ -1280,7 +1293,9 @@ remount, wrap `<Editor>` itself in a keyed parent, not via `Editor`'s own `key`
 
 `validate` runs on Continue, on Finish, and again for every step on Finish. Passing `stepId` controls
 the visible step only: stages past the furthest valid step stay disabled. Esc, close, Back and Cancel
-are disabled while `isFinishing`.
+are disabled while `isFinishing`. With `chrome="inline"` there is no Modal at all: no focus trap, no Esc,
+no close X and no `role="dialog"` (the host window supplies them), `size` is ignored, and nothing renders
+while `isOpen` is false; Cancel still calls `onClose`, so the host must close itself there.
 
 ### `PageHeader` actions wrap by default
 
@@ -1401,8 +1416,9 @@ the `Search` listeners see it — otherwise the first mounted `Search` takes Ctr
 - **Esc is handled by the launcher, not the Drawer** (`closeOnEsc` is off): it clears a non-empty
   query and keeps focus in the field, and closes only when the query is empty. The keydown is stopped inside
   the launcher, so a consumer `Escape` listener on `document` never sees it.
-- **`headerActions` text joins the dialog's accessible name** (header content becomes part of it,
-  as the search value already does: "Menu leave"). Use icon-only buttons with an `aria-label`.
+- **The dialog's accessible name is always `labels.title`** (a hidden heading, through `Drawer`'s
+  `aria-labelledby`); the search value, scope chips and `headerActions` no longer join it. A consumer
+  test asserting the old "Menu leave" style name must assert `labels.title` instead.
 - **The result count is `aria-hidden`; the announcement is a separate visually hidden `aria-live="polite"`
   node, deliberately not `role="status"`**, so `getByRole("status")` still matches only the no-results
   message and the loading skeleton.
@@ -1417,6 +1433,7 @@ the `Search` listeners see it — otherwise the first mounted `Search` takes Ctr
   a consumer that annotates a *full* `LauncherLabels` object fails to compile.
 - **`openShortcutHint` and `labels.hintOpenMenu` are deprecated no-ops:** the open chord is no longer
   shown in the footer. Drop them; the footer's hints are arrows, ENTER, ⌘ ENTER, ⌘ + click, P, ESC.
+  Both are optional, so a full `LauncherLabels` object needs no `Omit<LauncherLabels, "hintOpenMenu">`.
 - **`apps` is data-driven.** Gate by plan by changing the array or setting `locked` / `lockedReason`;
   keep `id`s stable (hues and `key` derive from them), and pass `color` on an app whose mark must not
   shift when siblings are added or removed. Locked rows are not links, not focusable, `aria-disabled`,
@@ -1429,6 +1446,34 @@ the `Search` listeners see it — otherwise the first mounted `Search` takes Ctr
   stylesheet.
 - **A search row without `href` (an action with `run`) cannot open in a new tab:** any click, with or
   without Cmd/Ctrl, runs it and closes the launcher, same as Enter.
+- **Spotlight search is opt-in (`searchMode="spotlight"`).** Without it matching, ranking and row
+  order are exactly as before; `scopes`, `quickActions`, `answers`, `facts` and `groupLimit` work in
+  both modes. Facts are searchable in spotlight only.
+- **Two search models, and classic never matches a screen on its module.** Classic (the default) runs
+  `searchLauncherSections`: registry order, no ranking, and every query word must appear in one row's
+  own label or keywords. "leave balance" therefore finds nothing unless one screen's keywords carry
+  both words. Spotlight ranks and also matches a screen on its module and section labels, so the same
+  query finds Leave › Balances. The exported `searchLauncher` (one flat Screens group) is legacy and
+  `@deprecated`; the component never calls it.
+- **Scope chips live in the header row and are always shown** (their own header row below `md`);
+  while a query is active each chip's name carries its count ("People, 3 results"), so a test that
+  types first must match `getByRole("radio", { name: /^People/ })`, not the bare label.
+- **Picking a chip other than All or Screens with an empty field lists that scope** exactly as
+  passed: its `actions` or `extraResults` groups, so a remote group with nothing loaded yet shows
+  `labels.scopeEmpty`. Load the scope's items when `onScopeChange` fires if it should list them.
+- **Quick actions show only under All with an empty query, as the first block of the menu** (not
+  while `isLoading`); only the first 5 render.
+- **Closing resets the scope to "all"** and calls `onScopeChange("all")`; a controlled `activeScope`
+  must apply it, like `onQueryChange("")`.
+- **`facts` swap the Quick access rail for a Preview pane at `lg`** whenever any visible result has
+  facts; below `lg` the active result's facts dock under the list. Copy buttons are never inside an
+  `option` or the listbox (axe `nested-interactive`, `aria-required-children`).
+- **An answer without `run` or `href` copies `answer.value` on Enter/click**; answers show in the
+  All scope only.
+- **`extraResults` groups are not filtered** unless `matchLocally: true`; remote rows the query does not
+  match stay listed (score 0) and can never be the Top hit.
+- **`LauncherSearchEngine` searches what it is given.** It has no React, DOM or network; build the
+  index with `createIndex` once per data change, not per keystroke.
 - **`LauncherTrigger` does not bind its shortcut**; `shortcut={null}` removes the hint and
   `aria-keyshortcuts`. An explicit `aria-label` hides the visible label from assistive tech, so keep
   the visible text inside the label (WCAG 2.5.3). `display="icon"` has no visible text: the label is
@@ -1843,6 +1888,17 @@ from `optionRowDescriptionInk(theme.colors)` (exported from the package root) ra
 `theme.colors.textMuted`. It is a no-op in light mode. The row's main label is
 `optionRowInk(theme.colors, isSelected)` with `optionRowWeight(isSelected)` — never brand ink.
 
+### A custom option list must not fill the selected row
+
+`listRowBackgrounds(colors).selected` and `.active` sit within 1.02:1 of each other on every brand
+and mode, so a list that fills both the selected row and the hovered row shows two identical fills
+and the user cannot tell which one is chosen. Library option lists paint one fill — the cursor's —
+and mark selection with `optionRowWeight` plus a trailing `Check` in `colors.accentText`.
+
+**Apply:** `bg={optionRowFill(listRowBackgrounds(colors), isActive)}` for an index-driven list, or
+`{...optionRowCursorSx(listRowBackgrounds(colors))}` for rows that take DOM focus; both are exported
+from the package root. Text is `optionRowInk(colors, isSelected)`, unchanged on hover.
+
 ### `Table`'s node column `label` needs `labelText` unless its text is plain children
 
 `columns[].label` accepts a node (an icon, a tooltip trigger) as well as a string or number. Every

package/DESIGN-GUIDE.md

@@ -77,6 +77,7 @@ stay light in dark mode.
 | 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`. 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 |
+| Option row in a dropdown/menu/select | `optionRowFill` / `optionRowCursorSx` (fill = cursor only) + `optionRowInk` + a trailing `Check` for the selected row — never a selected fill |
 | 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) |
 
@@ -151,7 +152,7 @@ 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 |
+| Multi-step flow (send, import, onboard) with validated Continue and a review step | `WizardDialog` (`Wizard` inline; `chrome="inline"` inside a `WorkspaceWindow` or other host that is already the dialog) — 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`) |
@@ -202,6 +203,10 @@ scrim `Box`. `Loading` is the older API and stays on the heavier house scrim by
   `headerActions` for the app's own icon button (help, customise) with an `aria-label`.
 - Show the suite's apps with `appsVisibility="always"` and drive plan gating by editing `apps` /
   `locked`.
+- For Spotlight-style search pass `searchMode="spotlight"` plus `synonyms` for the app's jargon
+  (`pf`, `wfh`), `scopes` for its entity groups, up to 5 `quickActions`, copyable `facts` on reference
+  items and `answers` for one-line lookups. Reuse `LauncherSearchEngine` for any other in-app search
+  instead of writing a matcher.
 - Show shortcut hints with `KbdShortcut`, never a hand-styled `<kbd>`.
 
 ## 7. Every page has four states
@@ -259,8 +264,8 @@ not shipped in this package). Start from the closest one:
 | 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` |
+| 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`, Classic / Spotlight toggle, synonyms, scopes, quick actions, company facts with Copy, answers |
+| Wizard / multi-step dialog | `wizard.tsx` (`/examples/wizard`) | `WizardDialog`, inline `Wizard` and `WizardDialog chrome="inline"` in a `WorkspaceWindow`: 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 |
 

package/dist/Components/Button/Button.styles.js

@@ -24,7 +24,12 @@ const controlSize = (size) => {
     return { h: height, minW: height, fontSize, px: paddingX };
 };
 // NOTE: [500] alone measures ~4.2 on a dark canvas — resolved per-mode so outline/ghost/link text stays readable.
-const onCanvasText = (theme, colorScheme) => (0, accentText_1.accentTextOnCanvas)(theme.colors[colorScheme], theme.colors.backgroundColor.main);
+// NOTE: a bare button sits on the canvas, a card or an overlay; dark overlays are the hardest plane.
+const onCanvasText = (theme, colorScheme) => (0, accentText_1.accentTextOnPlanes)(theme.colors[colorScheme], [
+    theme.colors.backgroundColor.main,
+    theme.colors.background[50],
+    theme.colors.surfaceRaised,
+]);
 // NOTE: [50] alone measured ~1.04 (invisible) in both modes — gray borrows the row-state steps.
 const onCanvasHoverBg = (theme, colorScheme, step) => {
     const scale = theme.colors[colorScheme];
@@ -36,7 +41,7 @@ const onCanvasHoverBg = (theme, colorScheme, step) => {
     return step === 16 ? rows.active : rows.selectedActive;
 };
 const swatch = (theme, colorScheme) => theme.colors[colorScheme];
-const buttonSolidRung = (theme, colorScheme) => (0, filledSurface_1.solidFillRung)(swatch(theme, colorScheme), theme.colors.white);
+const buttonSolidRung = (theme, colorScheme) => (0, filledSurface_1.solidFillRung)(swatch(theme, colorScheme), theme.colors.white, theme.colors.backgroundColor.main);
 const darkerFill = (theme, colorScheme, step) => {
     const scale = swatch(theme, colorScheme);
     const rung = (0, filledSurface_1.darkerFillRung)(scale, theme.colors.backgroundColor.main, theme.colors.white, step);

package/dist/Components/CopyButton/CopyButton.d.ts

@@ -16,8 +16,10 @@ export interface CopyButtonProps {
     iconSize?: number;
     /** Only affects the default "icon" variant's IconButton — "button" and "menu-item" ignore it. */
     size?: "xs" | "sm" | "md";
-    /** Fires only if the clipboard write resolves — a denied/insecure-context failure is swallowed silently. */
+    /** Fires only if the clipboard write resolves. */
     onCopy?: (value: string) => void;
+    /** Fires when the clipboard is missing or denied, instead of failing silently. */
+    onCopyError?: (value: string) => void;
 }
 /** Copies `value` to the clipboard in 3 layouts (icon/button/menu-item) — not a full share/export action. */
 declare const CopyButton: React.FC<CopyButtonProps>;

package/dist/Components/CopyButton/CopyButton.js

@@ -15,7 +15,7 @@ const primitives_1 = require("../../Theme/tokens/primitives");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
 /** Copies `value` to the clipboard in 3 layouts (icon/button/menu-item) — not a full share/export action. */
-const CopyButton = ({ value, variant = "icon", label = "Copy", copiedLabel = "Copied!", tooltip = "Copy", feedbackDuration = 1500, iconSize = 16, size = "sm", onCopy, }) => {
+const CopyButton = ({ value, variant = "icon", label = "Copy", copiedLabel = "Copied!", tooltip = "Copy", feedbackDuration = 1500, iconSize = 16, size = "sm", onCopy, onCopyError, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const [copied, setCopied] = (0, react_1.useState)(false);
     const timer = (0, react_1.useRef)();
@@ -30,7 +30,7 @@ const CopyButton = ({ value, variant = "icon", label = "Copy", copiedLabel = "Co
             timer.current = setTimeout(() => setCopied(false), feedbackDuration);
         }
         catch {
-            /* clipboard unavailable — silently ignore */
+            onCopyError === null || onCopyError === void 0 ? void 0 : onCopyError(value);
         }
     };
     // NOTE: primary[500] fails AA as canvas ink in 5/7 brands (dark) — accentTextOnCanvas steps to a clearing rung.

package/dist/Components/Drawer/Drawer.d.ts

@@ -3,4 +3,4 @@ import { DrawerProps, DrawerHeaderSlotProps, DrawerBodySlotProps, DrawerFooterSl
 export declare const DrawerHeader: React.FC<DrawerHeaderSlotProps>;
 export declare const DrawerBody: React.FC<DrawerBodySlotProps>;
 export declare const DrawerFooter: React.FC<DrawerFooterSlotProps>;
-export default function Drawer({ isOpen, onClose, placement, size, id, variant, vaiant, initialFocusRef, finalFocusRef, closeOnOverlayClick, closeOnEsc, contentProps, hideCloseButton, portalChildren, children, }: DrawerProps): import("react/jsx-runtime").JSX.Element;
+export default function Drawer({ isOpen, onClose, placement, size, id, variant, vaiant, initialFocusRef, finalFocusRef, closeOnOverlayClick, closeOnEsc, contentProps, hideCloseButton, portalChildren, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, }: DrawerProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Drawer/Drawer.js

@@ -9,6 +9,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
+const dialogNaming_1 = require("../Modal/dialogNaming");
 const warnDroppedSlotChildren_1 = require("../Modal/warnDroppedSlotChildren");
 const react_2 = require("@chakra-ui/react");
 const DrawerHeader = ({ children }) => {
@@ -39,12 +40,15 @@ const findSlot = (children, slot) => {
     }
     return undefined;
 };
-function Drawer({ isOpen, onClose, placement = "right", size = "xl", id, variant, vaiant, initialFocusRef, finalFocusRef, closeOnOverlayClick, closeOnEsc, contentProps, hideCloseButton, portalChildren, children, }) {
+function DialogContent({ label, labelledBy, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(dialogNaming_1.DialogNaming, { label: label, labelledBy: labelledBy, children: (0, jsx_runtime_1.jsx)(react_2.DrawerContent, { ...props }) }));
+}
+function Drawer({ isOpen, onClose, placement = "right", size = "xl", id, variant, vaiant, initialFocusRef, finalFocusRef, closeOnOverlayClick, closeOnEsc, contentProps, hideCloseButton, portalChildren, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, }) {
     var _a, _b;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const headerSlot = findSlot(children, exports.DrawerHeader);
     const bodySlot = findSlot(children, exports.DrawerBody);
     const footerSlot = findSlot(children, exports.DrawerFooter);
     (0, warnDroppedSlotChildren_1.warnDroppedSlotChildren)("Drawer", children, [exports.DrawerHeader, exports.DrawerBody, exports.DrawerFooter]);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Drawer, { isOpen: isOpen, placement: placement, onClose: onClose, size: size, variant: (_a = variant !== null && variant !== void 0 ? variant : vaiant) !== null && _a !== void 0 ? _a : "solid", id: id, initialFocusRef: initialFocusRef, finalFocusRef: finalFocusRef, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, children: [(0, jsx_runtime_1.jsx)(react_2.DrawerOverlay, {}), (0, jsx_runtime_1.jsxs)(react_2.DrawerContent, { ...contentProps, children: [!hideCloseButton && (0, jsx_runtime_1.jsx)(react_2.DrawerCloseButton, {}), headerSlot && ((0, jsx_runtime_1.jsx)(react_2.DrawerHeader, { borderBottomWidth: "1px", borderColor: (0, surfaceRaised_1.raisedRule)(colors), ...headerSlot.props, children: headerSlot })), (0, jsx_runtime_1.jsx)(react_2.DrawerBody, { ...((_b = bodySlot === null || bodySlot === void 0 ? void 0 : bodySlot.props) !== null && _b !== void 0 ? _b : {}), children: bodySlot }), footerSlot && ((0, jsx_runtime_1.jsx)(react_2.DrawerFooter, { borderTopWidth: "1px", borderColor: (0, surfaceRaised_1.raisedRule)(colors), ...footerSlot.props, children: footerSlot })), portalChildren] })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Drawer, { isOpen: isOpen, placement: placement, onClose: onClose, size: size, variant: (_a = variant !== null && variant !== void 0 ? variant : vaiant) !== null && _a !== void 0 ? _a : "solid", id: id, initialFocusRef: initialFocusRef, finalFocusRef: finalFocusRef, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, children: [(0, jsx_runtime_1.jsx)(react_2.DrawerOverlay, {}), (0, jsx_runtime_1.jsxs)(DialogContent, { ...contentProps, label: ariaLabel, labelledBy: ariaLabelledBy, children: [!hideCloseButton && (0, jsx_runtime_1.jsx)(react_2.DrawerCloseButton, {}), headerSlot && ((0, jsx_runtime_1.jsx)(react_2.DrawerHeader, { borderBottomWidth: "1px", borderColor: (0, surfaceRaised_1.raisedRule)(colors), ...headerSlot.props, children: headerSlot })), (0, jsx_runtime_1.jsx)(react_2.DrawerBody, { ...((_b = bodySlot === null || bodySlot === void 0 ? void 0 : bodySlot.props) !== null && _b !== void 0 ? _b : {}), children: bodySlot }), footerSlot && ((0, jsx_runtime_1.jsx)(react_2.DrawerFooter, { borderTopWidth: "1px", borderColor: (0, surfaceRaised_1.raisedRule)(colors), ...footerSlot.props, children: footerSlot })), portalChildren] })] }));
 }

package/dist/Components/Drawer/DrawerProps.d.ts

@@ -14,6 +14,10 @@ export type DrawerProps = Pick<ChakraDrawerProps, "isOpen" | "onClose" | "placem
     hideCloseButton?: boolean;
     /** Rendered inside the drawer's dialog after the slots (so live regions stay announced); nested dialogs portal out and keep focus here. Unmounts with the drawer. */
     portalChildren?: React.ReactNode;
+    /** Names the dialog instead of the whole header, for a header that holds fields or buttons. */
+    "aria-label"?: string;
+    /** Id of the element that names the dialog, e.g. a heading inside the header; wins over `aria-label`. */
+    "aria-labelledby"?: string;
 };
 /** Chakra style props (padding, borderBottom, gap, sx, ...) spread onto the rendered DrawerHeader; omit to keep theme defaults. Chakra's Drawer reuses Modal's header part internally. */
 export type DrawerHeaderSlotProps = ModalHeaderProps;

package/dist/Components/Dropdown/DropDown.js

@@ -8,6 +8,7 @@ const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
 const scrollbar_1 = require("../../Theme/tokens/builders/scrollbar");
 const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
+const optionRowInk_1 = require("../Select/optionRowInk");
 const useExclusiveOverlay_1 = require("../../Hooks/useExclusiveOverlay");
 const lucide_react_1 = require("lucide-react");
 const rafThrottle_1 = require("../../Utils/rafThrottle");
@@ -248,16 +249,8 @@ const Dropdown = (0, react_1.forwardRef)(({ dropDownButtonStyle, ButtonText, opt
                 }, role: "menuitem", tabIndex: index === activeIndex ? 0 : -1, onClick: () => {
                     handleListItemClick(option.id, option.label);
                     focusTrigger();
-                }, onKeyDown: (e) => handleItemKeyDown(e, option.id, option.label), mx: rowSpec.mx, px: rowSpec.px, py: rowSpec.py, minH: rowSpec.minH, borderRadius: optionRowSizes_1.OPTION_ROW_RADIUS, display: "flex", alignItems: "center", gap: rowSpec.gap, fontSize: rowSpec.fontSize, cursor: "pointer", color: theme.colors.text[700], transition: ROW_TRANSITION, _hover: {
+                }, onKeyDown: (e) => handleItemKeyDown(e, option.id, option.label), mx: rowSpec.mx, px: rowSpec.px, py: rowSpec.py, minH: rowSpec.minH, borderRadius: optionRowSizes_1.OPTION_ROW_RADIUS, display: "flex", alignItems: "center", gap: rowSpec.gap, fontSize: rowSpec.fontSize, cursor: "pointer", color: (0, optionRowInk_1.optionRowInk)(theme.colors, false), transition: ROW_TRANSITION, _hover: { bg: hoverTint }, _focus: { bg: hoverTint, outline: "none" }, _focusVisible: {
                     bg: hoverTint,
-                    color: theme.colors.accentText,
-                }, _focus: {
-                    bg: hoverTint,
-                    color: theme.colors.accentText,
-                    outline: "none",
-                }, _focusVisible: {
-                    bg: hoverTint,
-                    color: theme.colors.accentText,
                     boxShadow: `inset 0 0 0 2px ${theme.colors.focusRing.ring}`,
                 }, borderBottom: divider
                     ? `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${(0, surfaceRaised_1.raisedRule)(theme.colors)}`

package/dist/Components/FilePreview/FilePreview.js

@@ -49,6 +49,7 @@ const downloadFile = async (fileUrl, fileName) => {
 /** Modal previewer inferring image/pdf/video/other from the extension — for an always-inline PDF-only panel use PdfViewer. */
 const FilePreview = ({ isOpen, onClose, fileUrl, fileName, fileType, hideDownload = false, size = "xl", }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const downloadFill = (0, filledSurface_1.resolveFilledSurface)(theme.colors.primary, theme.colors);
     const [zoom, setZoom] = (0, react_1.useState)(1);
     const [rotation, setRotation] = (0, react_1.useState)(0);
     const kind = fileType || inferKind(fileUrl, fileName);
@@ -70,7 +71,7 @@ const FilePreview = ({ isOpen, onClose, fileUrl, fileName, fileType, hideDownloa
         if (kind === "video") {
             return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "video", src: fileUrl, controls: true, width: "100%", borderRadius: "lg" }));
         }
-        return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", align: "center", justify: "center", py: 12, gap: 3, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.FileQuestion, { size: 48, color: theme.colors.textMuted }), (0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.textMuted, fontSize: "sm", children: "Preview isn't available for this file type." }), !hideDownload && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", align: "center", gap: 2, px: 4, py: 2, borderRadius: "lg", bg: theme.colors.primary[(0, filledSurface_1.solidFillRung)(theme.colors.primary, theme.colors.white)], color: (0, filledSurface_1.labelOnFill)(theme.colors.primary[(0, filledSurface_1.solidFillRung)(theme.colors.primary, theme.colors.white)], theme.colors.white, theme.colors.black), fontSize: "sm", fontWeight: 500, onClick: () => downloadFile(fileUrl, fileName), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 16 }), " Download file"] }))] }));
+        return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", align: "center", justify: "center", py: 12, gap: 3, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.FileQuestion, { size: 48, color: theme.colors.textMuted }), (0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.textMuted, fontSize: "sm", children: "Preview isn't available for this file type." }), !hideDownload && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", align: "center", gap: 2, px: 4, py: 2, borderRadius: "lg", bg: downloadFill.fill, color: downloadFill.color, fontSize: "sm", fontWeight: 500, onClick: () => downloadFile(fileUrl, fileName), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 16 }), " Download file"] }))] }));
     };
     return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: handleClose, size: size, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { ...(0, overlay_styles_1.overlayScrimStyles)(theme.colors) }), (0, jsx_runtime_1.jsxs)(MotionContent, { bg: theme.colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", initial: { opacity: 0, scale: 0.96, y: 8 }, animate: { opacity: 1, scale: 1, y: 0 }, transition: { duration: 0.2, ease: "easeOut" }, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", px: 4, py: 3, borderBottom: "1px solid", borderColor: theme.colors.boxborder[200], children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: fileName || "File", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: 600, maxW: "60%", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileName || "Preview" }) }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, children: [kind === "image" && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Zoom out", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Zoom out", size: "sm", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Minus, { size: 16 }), onClick: () => setZoom((z) => Math.max(0.25, z - 0.25)) }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Zoom in", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Zoom in", size: "sm", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16 }), onClick: () => setZoom((z) => Math.min(4, z + 0.25)) }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Rotate", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Rotate", size: "sm", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.RotateCw, { size: 16 }), onClick: () => setRotation((r) => (r + 90) % 360) }) })] })), !hideDownload && ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Download", placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Download", size: "sm", variant: "ghost", color: theme.colors.semanticText.success, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 18 }), onClick: () => downloadFile(fileUrl, fileName) }) })), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, { position: "static" })] })] }), (0, jsx_runtime_1.jsx)(react_2.ModalBody, { p: 5, children: renderBody() })] })] }));
 };

package/dist/Components/FileUploader/FileUploader.js

@@ -10,6 +10,7 @@ const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const fieldStyles_1 = require("../Common/fieldStyles");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const revokePreviews = (files) => files.forEach((f) => f.previewUrl && URL.revokeObjectURL(f.previewUrl));
 /** Self-contained widget; onFilesChange returns {id,name,size,previewUrl} metadata, never real File objects — cannot be used to upload bytes. */
 const FileUploader = ({ maxFiles = 10, maxTotalSize = 20, onFilesChange, acceptTypes = ["jpeg", "jpg", "png"], }) => {
     const { showToast } = (0, Toaster_1.useToaster)();
@@ -38,7 +39,9 @@ const FileUploader = ({ maxFiles = 10, maxTotalSize = 20, onFilesChange, acceptT
         }));
         const combinedFiles = [...uploadedFiles, ...newFiles].slice(0, maxFiles);
         const totalSizeBytes = combinedFiles.reduce((acc, f) => acc + f.size, 0);
+        revokePreviews(newFiles.filter((f) => !combinedFiles.includes(f)));
         if (totalSizeBytes > maxTotalBytes) {
+            revokePreviews(newFiles);
             showToast({
                 title: `Total file size exceeds ${maxTotalSize} MB limit.`,
                 duration: 3000,
@@ -68,6 +71,7 @@ const FileUploader = ({ maxFiles = 10, maxTotalSize = 20, onFilesChange, acceptT
     const handleDragLeave = () => setIsDragOver(false);
     const removeFile = (id) => {
         const filtered = uploadedFiles.filter((f) => f.id !== id);
+        revokePreviews(uploadedFiles.filter((f) => f.id === id));
         setUploadedFiles(filtered);
         onFilesChange === null || onFilesChange === void 0 ? void 0 : onFilesChange(filtered);
     };

package/dist/Components/FileUploader/FileUploaderProps.d.ts

@@ -18,6 +18,6 @@ export type FileUploaderProps = {
     maxTotalSize?: number;
     /** Extensions without dots, default jpeg/jpg/png; filters the picker only, drops are never checked. */
     acceptTypes?: string[];
-    /** Whole list after each add or remove; revoke each image's previewUrl blob yourself. */
+    /** Whole list after each add or remove; the uploader revokes the blob of a removed or rejected image; revoke the rest yourself when done. */
     onFilesChange?: (files: UploadedFile[]) => void;
 };

package/dist/Components/FormDrawer/FormDrawer.d.ts

@@ -1,2 +1,2 @@
 import type { FormDrawerProps } from "./FormDrawerProps";
-export default function FormDrawer({ isOpen, onClose, title, description, sections, errors, isDirty, onSubmit, isSubmitting, submitLabel, cancelLabel, secondaryAction, size, labels, "data-testid": testId, }: FormDrawerProps): import("react/jsx-runtime").JSX.Element;
+export default function FormDrawer({ isOpen, onClose, title, description, sections, errors, isDirty, onSubmit, isSubmitting, isSubmitDisabled, submitLabel, cancelLabel, secondaryAction, size, labels, "data-testid": testId, }: FormDrawerProps): import("react/jsx-runtime").JSX.Element;