pixelize-design-library 2.4.2-beta.64 → 2.4.2-beta.66

package/DESIGN-GUIDE.md

@@ -52,11 +52,31 @@ Borders are the one px value: `borderWidth="1px"`. Fixed widths (side panel, lis
 | 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); `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"` |
+| Numbers in tables/columns | `sx={NUMERIC_TEXT}` (root export, tabular figures) so digits align; `Table` columns take `align: "end"` |
+| Code, ids, shortcuts | `fontFamily="mono"` (a real monospace stack); shortcut hints are `KbdShortcut`, never a hand-styled `<kbd>` |
+| Overline (rare) | `textStyle="overline"` |
 
-Chakra size keys only (`xs sm md lg xl 2xl`) — never `fontSize="14px"`, never below `xs`.
-Weights: 400 body, 500 labels, 600 titles, 700 KPI numbers only.
+**`textStyle` sets size, line height, weight and tracking in one prop.** Prefer it to hand-picking
+the four: `<Text textStyle="label">`. The ramp (`TEXT_STYLES`, also a root export):
+
+| `textStyle` | Use |
+| --- | --- |
+| `title` · `heading` · `subheading` | page / section / card titles (24 · 20 · 16px) |
+| `body` | running text (14px) |
+| `ui` · `label` | control and form text (13px, weight 500 · 600) |
+| `caption` | helper and meta text (12px) |
+| `overline` | small-caps eyebrow (11px, uppercase) |
+
+Chakra size keys only (`xs-minus xs xs-plus sm md lg xl 2xl`) — never `fontSize="14px"`.
+`xs-plus` (13px) is the control size; `xs-minus` (11px) is for chips, counts, keyboard hints and
+overlines only; nothing is smaller. Weights: 400 body, 500 labels, 600 titles, 700 KPI numbers only.
+
+**Radius and elevation come from the role, not the scale step.** `RADIUS_ROLE` (root export) names
+the radius a surface plays: `control`, `field`, `tooltip` and `media` 8px · `option` 6px · `card`,
+`float`, `dialog` and `sheet` 12px · `chip` full. Anchored popups (`Menu`, `Popover`, `Select`,
+`Dropdown`) all take the 12px radius, and `Menu` and `Popover` the `md` (float) shadow, so a panel
+you build yourself takes `borderRadius={RADIUS_ROLE.float}` and `boxShadow="md"`. A resting card is
+`shadows.card`; heavier shadows belong to floating things only.
 
 ## 4. Color — pick by role
 
@@ -91,8 +111,9 @@ stay light in dark mode.
 | Must stand out (a status that needs attention) | `variant="solid"` |
 | Dense list, table cell, or an already-colored surface | `variant="outline"` — no fill to compete with the surface |
 
-`secondary` and `tertiary` render as the same hex on most brands (see `COMPONENT-GOTCHAS.md`) —
-don't lean on that pair to distinguish two categories; reach for a utility scheme instead.
+`secondary` and `tertiary` are two distinct accents on every brand except `zinc`, which is
+near-grey and has almost no hue to turn (see `COMPONENT-GOTCHAS.md`) — on `zinc`, reach for a
+utility scheme to tell two categories apart.
 
 ## 5. Controls — two scales, `sm` by default
 
@@ -152,9 +173,10 @@ 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 |
+| Data grid | `Table` — defaults to `variant="studio"` (flat small-caps header, one row rule, the select slot resting on the row number, status as a pill). Pass `variant="classic"` for the banded header and per-column rules; don't restyle the header or rows by hand |
 | 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) |
@@ -177,6 +199,23 @@ 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.
 
+### Parts you reach for through their parent
+
+These are root exports, but each belongs to a parent component; start from the parent unless a row
+here says otherwise.
+
+| Part | Belongs to | Use it for |
+| --- | --- | --- |
+| `DrawerHeader` · `DrawerBody` · `DrawerFooter` | `Drawer` | the only children a `Drawer` renders; style props go straight on each slot. For a create / edit form use `FormDrawer` instead |
+| `ProfileCardHeader` · `ProfileCardBody` · `ProfileCardFooter` | `ProfileCard` | the only children a `ProfileCard` renders; any other sibling is dropped |
+| `StageItem` | `StageProgress` | one chevron, bar or pill stage; `StageProgress` renders it, so don't lay stages out by hand |
+| `FilePreviewTrigger` | `FilePreview` | a thumbnail button that opens one file in a modal; for several attachments use `MediaViewer` |
+| `MediaScrubber` · `MediaStatusPanel` · `MediaDocumentStage` | `MediaViewer` | building a custom media UI: a `role="slider"` seek bar (`onSeek`), the no-preview / error panel (`tone="warning"` for errors), and the document stage driven by a `resolveDocument` you supply |
+| `LazyWrapper` | `React.lazy` | a `Suspense` boundary with the themed spinner; pass `fallback` to replace it |
+| `ScrollbarBox` | any scrolling region | a themed scroll container; give it an `aria-label`, because it is a keyboard stop while it scrolls |
+| `AppearanceSettings` | a settings page | the theme, colour-mode and font-size controls in one panel; brand and font size are controlled, the colour-mode switch reads the theme context |
+| `ApexPolarChart` | `ApexPieChart` | independent magnitudes as wedges of equal angle and varying radius; values that add to a whole belong in `ApexPieChart` |
+
 ### Navigation shell
 
 `SideBar` is the rail, `NavigationBar` the top bar, `NavLauncher` the full-height "go anywhere" panel.
@@ -203,6 +242,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
@@ -232,7 +275,8 @@ hides its primary; when only one section is empty on a populated page, that sect
   `Menu`…) come from `pixelize-design-library` too. Anything the library owns a component for
   (`Tabs`, `Accordion`, `Modal`, `Card`, `Select`, `TextInput`, `Skeletons`…) has no Chakra
   passthrough at all — the owned component is the only one.
-- Reaching for `SelectV2`, `SearchSelect`, `SelectSearch` in new work — all `@deprecated`.
+- Reaching for `SelectV2` (`@deprecated`), `SearchSelect` or `SelectSearch` (not deprecated, but not the
+  preferred picker) in new work.
   One picker now: `Select` (`native={false}` for the themed, searchable, multi popup).
   `Dropdown` is the exception — it is an action menu, not a picker, and is not replaced.
 - A card inside a card; a border on a content `Card` (it is borderless by default), or any resting
@@ -260,8 +304,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/README.md

@@ -45,14 +45,17 @@ tracks Chakra 2.8.
 
 Two dist-tags are published: `latest` (stable) and `beta` (the active feature line).
 
-**On a `beta` version, pin the exact version — never a caret range.** `^2.4.2-beta.43` is
-satisfied by the stable `2.4.2` the moment it publishes, so a routine `npm install` silently
+**On a `beta` version, pin the exact version — never a caret range.** `^X.Y.Z-beta.N` is
+satisfied by the stable `X.Y.Z` as soon as it exists, so a routine `npm install` silently
 swaps a newer prerelease for an older stable build with no warning.
 
 ```json
-"pixelize-design-library": "2.4.2-beta.43"
+"pixelize-design-library": "X.Y.Z-beta.N"
 ```
 
+`X.Y.Z-beta.N` is whatever `npm view pixelize-design-library dist-tags` prints as `beta`.
+`npm install pixelize-design-library@beta` saves a caret range, so add `--save-exact`.
+
 What changed in each release, and what is staged to break in the next major:
 [CHANGELOG.md](CHANGELOG.md).
 
@@ -158,6 +161,9 @@ Full rules for app developers and AI assistants: [`src/Theme/THEME-CONTRACT.md`]
 ### Editor
 - **Editor** - Rich text editor component
 
+The lists above are the common components. Every export, including the helpers, hooks and tokens, is
+in the [Exports index](#exports-index).
+
 ## Usage Examples
 
 ### Basic Button Usage
@@ -379,6 +385,34 @@ transpiled by your bundler rather than imported by bare Node. In Next.js:
 module.exports = { transpilePackages: ['pixelize-design-library'] };
 ```
 
+## Exports index
+
+Every value the package root exports, so an export is never invisible to a developer or an LLM that
+only has this package. For how to use a component see [DESIGN-GUIDE.md](./DESIGN-GUIDE.md) and
+[COMPONENT-GOTCHAS.md](./COMPONENT-GOTCHAS.md); props are documented in the `*Props` types. This
+block is generated: after adding or removing an export run
+`UPDATE_README_EXPORTS=1 npx jest src/readmeExportsIndex.test.ts --coverage=false`.
+
+<!-- exports-index:start -->
+
+**Components and primitives (256)**
+
+`Accordian`, `Accordion`, `AddressCard`, `AddressCardGroup`, `Alert`, `AlertDescription`, `AlertDialog`, `AlertIcon`, `AlertTitle`, `ApexAreaChart`, `ApexBarChart`, `ApexLineChart`, `ApexPieChart`, `ApexPolarChart`, `ApexRadialChart`, `AppSwitcher`, `AppearanceSettings`, `AudioRecorder`, `Avatar`, `AvatarGroup`, `Backdrop`, `Badge`, `BagBar`, `Box`, `Breadcrumbs`, `BulkSelectionBar`, `Button`, `ButtonGroupIcon`, `CalendarGrid`, `Card`, `CartItem`, `Center`, `ChakraProvider`, `Checkbox`, `ChoiceCard`, `ChoiceCardGroup`, `CircularProgress`, `Collapse`, `ConfirmDialog`, `ContactForm`, `Container`, `CopyButton`, `CouponField`, `CustomModulesTable`, `DatePicker`, `DescriptionList`, `DetailSections`, `Divider`, `Drawer`, `DrawerBody`, `DrawerFooter`, `DrawerHeader`, `Dropdown`, `Editor`, `EmptyState`, `ErrorState`, `FeedbackForm`, `FieldMessage`, `FieldSelectModal`, `FilePreview`, `FilePreviewTrigger`, `FileUpload`, `FileUploader`, `FilterBar`, `FilterSidebar`, `FilteredEmptyState`, `Flex`, `FormControl`, `FormDrawer`, `FormErrorMessage`, `FormField`, `FormHelperText`, `FormLabel`, `FormWrapper`, `Grid`, `GridItem`, `Header`, `HeaderActions`, `Heading`, `Hide`, `Icon`, `IconButton`, `Image`, `InputSwitch`, `InputTextArea`, `KanbanActions`, `KanbanBoard`, `Kbd`, `KbdShortcut`, `LauncherSearchEngine`, `LauncherTrigger`, `LazyWrapper`, `LimitReachedModal`, `Link`, `List`, `ListIcon`, `ListItem`, `Loading`, `MediaAudioPlayer`, `MediaDocumentStage`, `MediaGallery`, `MediaImageViewer`, `MediaLightbox`, `MediaScrubber`, `MediaStatusPanel`, `MediaVideoPlayer`, `MediaViewer`, `Menu`, `MenuButton`, `MenuDivider`, `MenuGroup`, `MenuItem`, `MenuItemOption`, `MenuList`, `MenuOptionGroup`, `Modal`, `ModalBody`, `ModalFooter`, `ModalHeader`, `MoreItems`, `MultiSelect`, `NavLauncher`, `NavigationBar`, `NewTabLink`, `NoteTextArea`, `Notification`, `NotificationBell`, `NotificationItem`, `NotificationList`, `NotificationPanel`, `NumberInput`, `OffersList`, `OptionChip`, `OrderStatusTimeline`, `OrderSummary`, `OrderedList`, `OrgSwitcher`, `OrganizationDetails`, `OverflowToolTip`, `PageHeader`, `Pagination`, `PaymentCard`, `PaymentOption`, `PaymentOptionGroup`, `PdfViewer`, `PersonChip`, `PhoneNumberInput`, `PinInput`, `PinToggle`, `PincodeChecker`, `PixelizeThemeProvider`, `PlanBadge`, `PlanPill`, `Popover`, `PopoverArrow`, `PopoverBody`, `PopoverCloseButton`, `PopoverContent`, `PopoverFooter`, `PopoverHeader`, `PopoverTrigger`, `Portal`, `PriceBlock`, `ProductBadges`, `ProductCard`, `ProductCardGrid`, `ProductCardSkeleton`, `ProductDetails`, `ProfileCard`, `ProfileCardBody`, `ProfileCardFooter`, `ProfileCardHeader`, `ProfilePhotoViewer`, `ProgressBar`, `QuantityStepper`, `QueryStateBoundary`, `QuickAddSheet`, `RadioButton`, `RadioButtonGroup`, `RangeSlider`, `Rating`, `Reorder`, `ReviewList`, `ReviewSummary`, `RolesPermission`, `SaveBar`, `ScrollToTop`, `ScrollbarBox`, `Search`, `SearchSelect`, `SectionRail`, `SegmentedControl`, `Select`, `SelectSearch`, `SelectV2`, `SettingRow`, `SettingsSection`, `Show`, `SideBar`, `SignInActivityTable`, `SimpleGrid`, `Skeletons`, `SkipLink`, `Slider`, `Spacer`, `SpecTable`, `Spinner`, `Stack`, `StageItem`, `StageProgress`, `StatCard`, `StatusTag`, `StickyBuyBar`, `StockStatus`, `Switch`, `Tab`, `TabList`, `TabPanel`, `TabPanels`, `Table`, `TableContainer`, `TableRoot`, `TableToggle`, `Tabs`, `Tag`, `TagInput`, `Tbody`, `Td`, `Text`, `TextInput`, `Tfoot`, `Th`, `Thead`, `ThemeSwitcher`, `ThemesList`, `TimePicker`, `Timeline`, `Toaster`, `ToggleSwitch`, `ToolTip`, `Tr`, `TrustBadges`, `UnorderedList`, `UpgradeButton`, `UserDetails`, `VariantSelector`, `VerifyEmailOtp`, `VisuallyHidden`, `WishlistToggle`, `Wizard`, `WizardDialog`, `WorkspaceTray`, `WorkspaceTrayPreview`, `WorkspaceWindow`, `Wrap`, `WrapItem`
+
+**Hooks (18)**
+
+`useAnchoredPanelHeight`, `useAppSwitcherShortcut`, `useBreakpointValue`, `useChartTheme`, `useCustomTheme`, `useDebouncedCallback`, `useDebouncedValue`, `useDisclosure`, `useFieldIds`, `useFileViewer`, `useFontSizeSync`, `useIsTruncated`, `useMediaQuery`, `usePrefersReducedMotion`, `useSidebarPrefs`, `useThemeMode`, `useToaster`, `useToken`
+
+**Constants (45)**
+
+`AA_NON_TEXT`, `AA_NORMAL_TEXT`, `ACCENT_GRADIENT`, `AVATAR_SEEDS`, `BORDER_WIDTHS`, `CALENDAR_DAY_CLASS`, `CATEGORICAL_SERIES`, `CONTROL_SIZES`, `CONTROL_SIZE_NAMES`, `DARK_CANVAS_LUMINANCE`, `DAY_STATE_KEYS`, `DEFAULT_CONTROL_SIZE`, `DEFAULT_DATE_FALLBACK`, `DEFAULT_FONT_SIZE`, `DISABLED_OPACITY`, `EMAIL_REGEX`, `FOCUS_HALO_WIDTH`, `FOCUS_RING_WIDTH`, `FOCUS_VISIBLE_OVER_STATE`, `FONT_SIZE_OPTIONS`, `LOW_STOCK_THRESHOLD`, `MAX_ZOOM`, `MIN_ZOOM`, `MOTION_BEZIER`, `MOTION_EASE`, `MOTION_EASE_IN`, `MOTION_EASE_OUT`, `MOTION_KEEP_CLASS`, `MOTION_LOOP_MS`, `MOTION_MS`, `MOTION_PRESS_SCALE`, `NUMERIC_TEXT`, `OVERLAY_BLUR`, `PIXELIZE_SUITE`, `PLAYBACK_SPEEDS`, `RADIUS_ROLE`, `RAISED_OVERLAY`, `REDUCED_MOTION_QUERY`, `SCRIM_OPACITY`, `SCROLLBAR_WIDTH`, `SEEK_STEP_SECONDS`, `STATUS_INK`, `TEXT_STYLES`, `TONES`, `ZOOM_STEP`
+
+**Helpers and tokens (185)**
+
+`HStack`, `VStack`, `accentTextOnCanvas`, `accentTextOnPlanes`, `appInitials`, `avatarFillFor`, `avatarScaleKeyFor`, `bandOn`, `brandThemes`, `buildDarkPalette`, `buildFileItems`, `buildFocusRing`, `buildMediaItems`, `buildSuiteApps`, `buildSurfaceRaised`, `cardRule`, `chartAxisLabelColor`, `chartInk`, `chartMode`, `chipBorder`, `chipFill`, `chipHtml`, `chipify`, `clearChunkReloadGuard`, `compositeOver`, `contrastRatio`, `controlSizeStyles`, `countMedia`, `createAccountHandoff`, `createEnumLabelResolver`, `darkPalettes`, `darkerFillRung`, `debounce`, `default`, `defaultMediaAudioPlayerLabels`, `defaultMediaDocumentStageLabels`, `defaultMediaGalleryLabels`, `defaultMediaImageViewerLabels`, `defaultMediaLightboxLabels`, `defaultMediaVideoPlayerLabels`, `defaultMediaViewerLabels`, `defaultPaginationLabels`, `defaultValidationMessages`, `describeDayStates`, `discountAmount`, `discountPercent`, `downloadBlob`, `extendTheme`, `extractTokens`, `fieldControlStyles`, `fieldLabelStyles`, `fieldMessageStyles`, `fieldSurfaces`, `fieldToken`, `fileKind`, `filterApps`, `findVariant`, `firstAvailableSelection`, `firstInvalidStep`, `flattenScreens`, `focusRingShadow`, `focusVisibleRing`, `focusVisibleStyles`, `formatCount`, `formatDate`, `formatDateRange`, `formatDateTime`, `formatPlanElapsed`, `formatPlanExpiry`, `formatPlanRemaining`, `formatPrice`, `formatRelativeTime`, `formatShortcut`, `getApiErrorMessage`, `getApiErrorStatus`, `getCategoricalSeriesColors`, `getDefaultSeriesColors`, `globalScrollbarStyles`, `gradientCss`, `groupConsecutive`, `hexToHsl`, `hexToRgb`, `hexToRgba`, `highlightSegments`, `hslToHex`, `hslToRgb`, `humanize`, `initialsFor`, `inkSafeGradient`, `inkSafeGradientToken`, `installPreloadErrorReload`, `isAllowedReturnUrl`, `isChunkLoadError`, `isControlSize`, `isDarkCanvas`, `isDayStateKey`, `isFontSize`, `isOptionAvailable`, `isTone`, `labelOnFill`, `labelOnSeries`, `lazyWithRetry`, `liftToContrast`, `lightPalettes`, `listRowBackgrounds`, `matchesShortcut`, `meetsBodyText`, `mergeRefs`, `mix`, `motionTransition`, `onFilled`, `onGradient`, `optionRowCursorSx`, `optionRowDescriptionInk`, `optionRowFill`, `optionRowInk`, `optionRowWeight`, `overlayScrim`, `overlayScrimStyles`, `palettes`, `pickAccentText`, `placeholderInk`, `placeholderInkOn`, `planPreview`, `priceRange`, `rafThrottle`, `raisedRule`, `recessOn`, `reducedMotionSx`, `relativeLuminance`, `remainingStock`, `resolveAvatarColorway`, `resolveAvatarFill`, `resolveDayStateVisual`, `resolveFilledSurface`, `resolveFontSize`, `resolveGradient`, `resolveMediaUrl`, `resolvePlanBadge`, `resolveReturnUrl`, `resolveSoftTone`, `resolveStatusTone`, `resolveSuiteApps`, `rgbToHex`, `rgbToHsl`, `ruleOn`, `safeFileName`, `scrollbarStyles`, `searchLauncher`, `searchLauncherSections`, `sectionizeByDay`, `selectionComplete`, `serializeChips`, `setRef`, `settleBetween`, `shadowsFor`, `solidFillRung`, `splitMonthsAndDays`, `statusGradient`, `stockState`, `themeNames`, `toCsv`, `toWords`, `toneInk`, `toneScale`, `toneToColorScheme`, `toneToSemantic`, `tooltipSurface`, `transitionFor`, `unitPrice`, `unknownTokens`, `validateEmail`, `validateFile`, `validateFileSize`, `validateFileType`, `validatePassword`, `validatePositiveNumber`, `validateRequired`, `validateVideoFile`, `validateVideoFileType`, `validateYoutubeUrl`, `withFocusRing`, `withLightness`, `withOutlineRung`, `wizardTransition`
+
+<!-- exports-index:end -->
+
 ## Demo app
 
 `npm start` runs a local component explorer on `http://localhost:5173` — every exported

package/dist/Components/Accordion/Accordion.js

@@ -9,6 +9,7 @@ const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
 const motion_2 = require("../../Theme/chakra/motion");
 const accordionColors_1 = require("./accordionColors");
+const HEADER_ACTION_RIGHT = "3.25rem";
 /** Chakra Accordion wrapper for header/content pairs; FilterSidebar composes this directly for its collapsible filter sections. */
 const Accordion = ({ allowMultiple, allowToggle, index, onChange, reduceMotion, items, ...rest }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
@@ -21,14 +22,16 @@ const Accordion = ({ allowMultiple, allowToggle, index, onChange, reduceMotion,
     return ((0, jsx_runtime_1.jsx)(react_2.Accordion, { allowMultiple: allowMultiple, allowToggle: allowToggle, index: index, onChange: onChange, reduceMotion: reduceMotion, ...rest, children: items.map((item, idx) => {
             var _a;
             return ((0, jsx_runtime_1.jsx)(react_2.AccordionItem, { border: "1px solid", borderColor: border, borderRadius: "xl", bg: colors.background[50], boxShadow: "none", mb: 3, overflow: "hidden", _last: { mb: 0 }, ...item.itemProps, sx: (_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.itemStyle, children: ({ isExpanded }) => {
-                    var _a, _b, _c;
-                    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", { children: (0, jsx_runtime_1.jsxs)(react_2.AccordionButton, { px: 4, py: 3, gap: 3, fontSize: "sm", fontWeight: 600, color: headingColor, bg: isExpanded ? expandedBg : "transparent", transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: isExpanded ? expandedBg : softHover }, _focusVisible: focusRing, ...item.buttonProps, sx: {
-                                        ...(0, motion_2.reducedMotionSx)(),
-                                        ...(_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.buttonStyle,
-                                        "&:hover": {
-                                            ...(_b = item.customStyles) === null || _b === void 0 ? void 0 : _b.hoverbuttonStyle,
-                                        },
-                                    }, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", flex: "1", textAlign: "left", children: item.header }), (0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "1.5rem", flexShrink: 0, borderRadius: "lg", color: isExpanded ? colors.accentText : colors.textMuted, bg: isExpanded ? colors.primary.opacity[16] : "transparent", transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)", transition: (0, motion_1.transitionFor)(["transform", "color", "background-color"], "base"), sx: (0, motion_2.reducedMotionSx)(), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16 }) })] }) }), (0, jsx_runtime_1.jsx)(react_2.AccordionPanel, { px: 4, pt: 1, pb: 4, fontSize: "sm", lineHeight: "1.5", color: bodyColor, ...item.panelProps, sx: (_c = item.customStyles) === null || _c === void 0 ? void 0 : _c.panelStyle, children: item.content })] }));
+                    var _a, _b, _c, _d, _e;
+                    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { as: "h2", position: item.headerAction ? "relative" : undefined, sx: item.headerAction
+                                    ? { "&:hover > button": { background: isExpanded ? expandedBg : softHover, ...(_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.hoverbuttonStyle } }
+                                    : undefined, children: [(0, jsx_runtime_1.jsxs)(react_2.AccordionButton, { px: 4, py: 3, gap: 3, fontSize: "sm", fontWeight: 600, color: headingColor, bg: isExpanded ? expandedBg : "transparent", transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: isExpanded ? expandedBg : softHover }, _focusVisible: focusRing, ...item.buttonProps, sx: {
+                                            ...(0, motion_2.reducedMotionSx)(),
+                                            ...(_b = item.customStyles) === null || _b === void 0 ? void 0 : _b.buttonStyle,
+                                            "&:hover": {
+                                                ...(_c = item.customStyles) === null || _c === void 0 ? void 0 : _c.hoverbuttonStyle,
+                                            },
+                                        }, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", flex: "1", textAlign: "left", children: item.header }), (0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "1.5rem", flexShrink: 0, borderRadius: "lg", color: isExpanded ? colors.accentText : colors.textMuted, bg: isExpanded ? colors.primary.opacity[16] : "transparent", transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)", transition: (0, motion_1.transitionFor)(["transform", "color", "background-color"], "base"), sx: (0, motion_2.reducedMotionSx)(), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16 }) })] }), item.headerAction && ((0, jsx_runtime_1.jsx)(react_2.Flex, { position: "absolute", top: "50%", right: HEADER_ACTION_RIGHT, transform: "translateY(-50%)", align: "center", sx: (_d = item.customStyles) === null || _d === void 0 ? void 0 : _d.headerActionStyle, children: item.headerAction }))] }), (0, jsx_runtime_1.jsx)(react_2.AccordionPanel, { px: 4, pt: 1, pb: 4, fontSize: "sm", lineHeight: "1.5", color: bodyColor, ...item.panelProps, sx: (_e = item.customStyles) === null || _e === void 0 ? void 0 : _e.panelStyle, children: item.content })] }));
                 } }, idx));
         }) }));
 };

package/dist/Components/Accordion/AccordionProps.d.ts

@@ -6,11 +6,15 @@ export type AccordionProps = ChakraAccordionProps & {
         content: React.ReactNode;
         /** Spread after the built-in style props (incl. `_hover`) — `bg`/`_hover` here replace, not merge, the expanded/hover highlight. */
         buttonProps?: AccordionButtonProps;
+        /** A control over the header's trailing edge, beside the button (a button inside a button is invalid); the header hover stays lit while the pointer is on it. Reserve its width in `header`. */
+        headerAction?: React.ReactNode;
         panelProps?: AccordionPanelProps;
         itemProps?: AccordionItemProps;
         customStyles?: {
             buttonStyle?: React.CSSProperties;
             hoverbuttonStyle?: React.CSSProperties;
+            /** Overrides the action's default `right` (button padding + chevron slot); set it when `buttonStyle` changes the button padding. */
+            headerActionStyle?: React.CSSProperties;
             panelStyle?: React.CSSProperties;
             itemStyle?: React.CSSProperties;
         };

package/dist/Components/Accordion/accordionColors.js

@@ -25,7 +25,6 @@ exports.getAccordionHoverColors = getAccordionHoverColors;
 const accordionFocusRing = (colors) => ({
     outline: "2px solid transparent",
     outlineOffset: "-2px",
-    boxShadow: `inset 0 0 0 ${focusRing_styles_1.FOCUS_RING_WIDTH - focusRing_styles_1.FOCUS_HALO_WIDTH}px ${colors.focusRing.ring}, ` +
-        `inset 0 0 0 ${focusRing_styles_1.FOCUS_RING_WIDTH}px ${colors.focusRing.halo}`,
+    boxShadow: (0, focusRing_styles_1.insetFocusRingShadow)(colors),
 });
 exports.accordionFocusRing = accordionFocusRing;

package/dist/Components/Apexcharts/ApexLineChart/ApexLineChart.js

@@ -97,6 +97,7 @@ const ApexLineChart = ({ data, labels, title, height, width, lineColors, titlePo
             zoom: { enabled: !isSmall },
             toolbar: { show: showToolbar },
         }),
+        theme: { mode: (0, chartColorsFromTheme_1.chartMode)(palette) },
         stroke: { curve: "smooth", width: 2, lineCap: "round" },
         colors: resolvedLineColors,
         xaxis: {

package/dist/Components/Apexcharts/ApexLineChart/ApexLineChartProps.d.ts

@@ -1,6 +1,6 @@
 /** Renders exactly one line from `data`; not a substitute for ApexBarChart/ApexPieChart when comparing multiple series side by side. */
 export type ApexLineChartProps = {
-    /** "realtime" doesn't animate your data — after mount it overwrites the series with Math.random() values every second instead. */
+    /** @deprecated "realtime" does not animate your data: it appends Math.random() values every second. Removed in the next major. */
     variant?: LineChartVariant;
     /** Read only at mount — later prop updates are silently ignored unless this component remounts (new `key`). */
     data: number[];
@@ -32,5 +32,5 @@ export type ApexLineChartProps = {
     };
     toolbarBreakpointPct?: number;
 };
-/** Chart mode: "basic" plots `data` as given; "realtime" instead free-runs on random values — see `variant` below. */
+/** Chart mode: "basic" plots `data` as given; "realtime" instead free-runs on random values — see `variant`. */
 export type LineChartVariant = "basic" | "realtime";

package/dist/Components/Apexcharts/ApexPieChart/ApexPieChart.d.ts

@@ -1,4 +1,4 @@
 import { ApexPieChartProps } from "./ApexPieChartProps";
 /** Pie/donut chart wrapper around react-apexcharts, themed via chartColorsFromTheme + chartBase. */
-declare const ApexPieChart: ({ data, labels, title, height, width, donutColors, chartColor, titlePosition, titleStyle, legendPosition, legendStyle, variant, showDataLabels, minLabelPercent, surfaceColor, donutSize, totalLabel, labelPlacement, }: ApexPieChartProps) => import("react/jsx-runtime").JSX.Element;
+declare const ApexPieChart: ({ data, labels, title, height, width, donutColors, chartColor, titlePosition, titleStyle, legendPosition, legendStyle, variant, showDataLabels, minLabelPercent, surfaceColor, donutSize, totalLabel, labelPlacement, images, }: ApexPieChartProps) => import("react/jsx-runtime").JSX.Element;
 export default ApexPieChart;

package/dist/Components/Apexcharts/ApexPieChart/ApexPieChart.js

@@ -10,6 +10,7 @@ const chartColorsFromTheme_1 = require("../../../Theme/tokens/builders/chartColo
 const chartBase_1 = require("../chartBase");
 const LazyReactApexChart_1 = __importDefault(require("../LazyReactApexChart"));
 const ApexChartFallback_1 = __importDefault(require("../ApexChartFallback"));
+const pieImageTexture_1 = require("./pieImageTexture");
 const getValidLegendPosition = (position) => {
     const validPositions = ["left", "right", "top", "bottom"];
     if (validPositions.includes(position)) {
@@ -19,7 +20,7 @@ const getValidLegendPosition = (position) => {
     return "bottom";
 };
 /** Pie/donut chart wrapper around react-apexcharts, themed via chartColorsFromTheme + chartBase. */
-const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutColors, chartColor, titlePosition = "center", titleStyle, legendPosition = "bottom", legendStyle, variant = "pie", showDataLabels = true, minLabelPercent = 8, surfaceColor, donutSize = "68%", totalLabel = "Total", labelPlacement = "auto", }) => {
+const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutColors, chartColor, titlePosition = "center", titleStyle, legendPosition = "bottom", legendStyle, variant = "pie", showDataLabels = true, minLabelPercent = 8, surfaceColor, donutSize = "68%", totalLabel = "Total", labelPlacement = "auto", images, }) => {
     var _a;
     const { colors: palette } = (0, useCustomTheme_1.useCustomTheme)();
     const ink = (0, chartColorsFromTheme_1.chartInk)(palette);
@@ -36,6 +37,7 @@ const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutCol
             ? "outside"
             : "none"
         : labelPlacement;
+    const sliceCount = data.length;
     const labelsOn = showDataLabels && placement !== "none";
     const outside = placement === "outside";
     const validLegendPosition = getValidLegendPosition(legendPosition);
@@ -92,10 +94,7 @@ const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutCol
                     fill: {
                         type: "image",
                         image: {
-                            src: [
-                                "https://i.imgur.com/UM3mrju.jpg",
-                                "https://i.imgur.com/NpPOqQq.jpg",
-                            ],
+                            src: images !== null && images !== void 0 ? images : Array.from({ length: sliceCount }, (_, i) => (0, pieImageTexture_1.pieImageTexture)(seriesColors[i % seriesColors.length], gap)),
                         },
                     },
                 };
@@ -185,6 +184,8 @@ const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutCol
         totalLabel,
         ink.muted,
         ink.text,
+        images,
+        sliceCount,
     ]);
     return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(ApexChartFallback_1.default, { height: height, width: width }), children: (0, jsx_runtime_1.jsx)(LazyReactApexChart_1.default, { options: options, series: data, type: (_a = options.chart) === null || _a === void 0 ? void 0 : _a.type, height: height, width: width }) }) }));
 };

package/dist/Components/Apexcharts/ApexPieChart/ApexPieChartProps.d.ts

@@ -26,6 +26,8 @@ export type ApexPieChartProps = {
     donutSize?: string;
     totalLabel?: string;
     labelPlacement?: "auto" | "inside" | "outside" | "none";
+    /** Only for `variant="pie-with-image"`: one image source per slice (the first repeats past the end). Omitted, each slice gets a themed striped texture in its own colour. */
+    images?: string[];
     legendStyle?: {
         colors?: string | string[];
         useSeriesColors?: boolean;
@@ -36,5 +38,5 @@ export type ApexPieChartProps = {
         markerOffsetY?: number;
     };
 };
-/** Visual preset for the pie/donut fill; "pie-with-image" is fixed to two placeholder images, not configurable via props. */
+/** Visual preset for the pie/donut fill; "pie-with-image" fills slices from the `images` prop, or from inline striped textures when it is omitted. */
 export type DonutPieVariant = "pie" | "donut" | "update-donut" | "monochrome-pie" | "gradient-donut" | "semi-donut" | "donut-with-pattern" | "pie-with-image";

package/dist/Components/Apexcharts/ApexPieChart/pieImageTexture.d.ts

@@ -0,0 +1,2 @@
+/** A diagonal-stripe SVG data URI: `color` ground with translucent `stripe` bands, no network. */
+export declare function pieImageTexture(color: string, stripe: string): string;

package/dist/Components/Apexcharts/ApexPieChart/pieImageTexture.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pieImageTexture = pieImageTexture;
+const SIZE = 400;
+/** A diagonal-stripe SVG data URI: `color` ground with translucent `stripe` bands, no network. */
+function pieImageTexture(color, stripe) {
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${SIZE}" height="${SIZE}" viewBox="0 0 ${SIZE} ${SIZE}">` +
+        `<defs><pattern id="s" width="24" height="24" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">` +
+        `<rect width="10" height="24" fill="${stripe}" fill-opacity="0.28"/></pattern></defs>` +
+        `<rect width="${SIZE}" height="${SIZE}" fill="${color}"/>` +
+        `<rect width="${SIZE}" height="${SIZE}" fill="url(#s)"/></svg>`;
+    return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
+}

package/dist/Components/AppSwitcher/AppSwitcher.js

@@ -50,6 +50,9 @@ const Kbd_1 = __importDefault(require("../Kbd/Kbd"));
 const AppMark_1 = __importStar(require("./AppMark"));
 const AppSwitcherProps_1 = require("./AppSwitcherProps");
 const useAppSwitcherShortcut_1 = require("./useAppSwitcherShortcut");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const BACKGROUND_BORDER_COLOR_TRANSITION = (0, motion_1.transitionFor)(["background", "border-color"]);
+const BACKGROUND_TRANSITION = (0, motion_1.transitionFor)(["background"]);
 const COLUMNS = 2;
 const HEADING = "Your apps";
 const s = { trigger: "36px", mark: "32px", icon: 17, name: "0.875rem", sub: "0.75rem", row: "52px" };
@@ -220,7 +223,7 @@ const AppSwitcher = ({ apps, currentAppId, onSelect, onOpenChange, isSearchable,
     const currentSub = (0, outlineRung_1.liftToContrast)(theme.colors.textMuted, currentBg, accentText_1.AA_NORMAL_TEXT);
     const width = panelWidth !== null && panelWidth !== void 0 ? panelWidth : "28rem";
     const hint = shortcut && showShortcutHint ? (0, AppSwitcherProps_1.formatShortcut)(shortcut) : null;
-    return ((0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: isOpen, onOpen: () => setOpen(true), onClose: () => { setOpen(false); setQuery(""); }, placement: "bottom-end", initialFocusRef: showSearch ? searchRef : undefined, isLazy: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.Flex, { ref: triggerRef, as: "button", type: "button", "aria-label": ariaLabel, align: "center", justify: "center", boxSize: s.trigger, borderRadius: "lg", border: "1px solid", borderColor: isOpen ? theme.colors.boxborder[500] : theme.colors.boxborder[200], bg: isOpen ? theme.colors.backgroundColor.tertiary : "transparent", color: isOpen ? theme.colors.text[900] : theme.colors.textMuted, cursor: "pointer", transition: "background 0.15s ease, border-color 0.15s ease", _hover: { bg: rowHoverBg, color: theme.colors.text[900] }, onKeyDown: (e) => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: isOpen, onOpen: () => setOpen(true), onClose: () => { setOpen(false); setQuery(""); }, placement: "bottom-end", initialFocusRef: showSearch ? searchRef : undefined, isLazy: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.Flex, { ref: triggerRef, as: "button", type: "button", "aria-label": ariaLabel, align: "center", justify: "center", boxSize: s.trigger, borderRadius: "lg", border: "1px solid", borderColor: isOpen ? theme.colors.boxborder[500] : theme.colors.boxborder[200], bg: isOpen ? theme.colors.backgroundColor.tertiary : "transparent", color: isOpen ? theme.colors.text[900] : theme.colors.textMuted, cursor: "pointer", transition: BACKGROUND_BORDER_COLOR_TRANSITION, _hover: { bg: rowHoverBg, color: theme.colors.text[900] }, onKeyDown: (e) => {
                         if (!isOpen) {
                             if (e.key === "ArrowDown") {
                                 e.preventDefault();
@@ -229,7 +232,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: "xs-minus", 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) => {
+                    }, 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: "float", _focus: { outline: "none", boxShadow: "float" }, 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: "xs-minus", 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);
@@ -267,7 +270,7 @@ const AppSwitcher = ({ apps, currentAppId, onSelect, onOpenChange, isSearchable,
                                                     borderEndStartRadius: "lg",
                                                     bg: currentBar,
                                                 }
-                                                : undefined, transition: "background 0.12s ease", _hover: interactive ? { bg: rowHoverBg } : undefined, onClick: (e) => handleSelect(app, e), onKeyDown: (e) => handleItemKeyDown(e, app), children: [(0, jsx_runtime_1.jsx)(AppMark_1.default, { app: app, hue: hues[apps.indexOf(app)], boxSize: s.mark, iconSize: s.icon, muted: app.locked }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1.5, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.name, fontWeight: 600, color: app.locked
+                                                : undefined, transition: BACKGROUND_TRANSITION, _hover: interactive ? { bg: rowHoverBg } : undefined, onClick: (e) => handleSelect(app, e), onKeyDown: (e) => handleItemKeyDown(e, app), children: [(0, jsx_runtime_1.jsx)(AppMark_1.default, { app: app, hue: hues[apps.indexOf(app)], boxSize: s.mark, iconSize: s.icon, muted: app.locked }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1.5, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.name, fontWeight: 600, color: app.locked
                                                                         ? theme.colors.textMuted
                                                                         : isCurrent
                                                                             ? currentName

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

@@ -64,9 +64,11 @@ export interface SuiteAppSource extends Omit<AppOption, "url"> {
 export interface SuiteUrlOptions {
     baseUrl: string;
     baseSubdomain: string;
+    /** Opt-in for hosts with no `baseSubdomain` label (plain `localhost`): other apps derive from this labelled URL instead of throwing, and the app owning `baseSubdomain` keeps `baseUrl`. */
+    devFallbackBaseUrl?: string;
 }
 /**
  * Derives every app's origin from the host the consumer is already served on, so one deployment
  * variable keeps dev, test and prod in step. An app may still carry its own `url`, which wins.
  */
-export declare const buildSuiteApps: (apps: SuiteAppSource[], { baseUrl, baseSubdomain }: SuiteUrlOptions) => AppOption[];
+export declare const buildSuiteApps: (apps: SuiteAppSource[], { baseUrl, baseSubdomain, devFallbackBaseUrl }: SuiteUrlOptions) => AppOption[];

package/dist/Components/AppSwitcher/AppSwitcherProps.js

@@ -58,30 +58,37 @@ const shortcutKeys = (shortcut, isApple = isAppleNow()) => {
 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
- * variable keeps dev, test and prod in step. An app may still carry its own `url`, which wins.
- */
-const buildSuiteApps = (apps, { baseUrl, baseSubdomain }) => {
-    let base;
+const parseAbsolute = (option, raw) => {
     try {
-        base = new URL(baseUrl.trim());
+        return new URL(raw.trim());
     }
     catch {
-        throw new Error(`[AppSwitcher] buildSuiteApps: baseUrl ${JSON.stringify(baseUrl)} is not an absolute URL.`);
+        throw new Error(`[AppSwitcher] buildSuiteApps: ${option} ${JSON.stringify(raw)} is not an absolute URL.`);
     }
-    const labels = base.hostname.split(".");
+};
+/**
+ * Derives every app's origin from the host the consumer is already served on, so one deployment
+ * variable keeps dev, test and prod in step. An app may still carry its own `url`, which wins.
+ */
+const buildSuiteApps = (apps, { baseUrl, baseSubdomain, devFallbackBaseUrl }) => {
+    const base = parseAbsolute("baseUrl", baseUrl);
+    const hostHasLabel = base.hostname.split(".").includes(baseSubdomain);
+    const useFallback = !hostHasLabel && devFallbackBaseUrl !== undefined;
+    const source = useFallback ? parseAbsolute("devFallbackBaseUrl", devFallbackBaseUrl) : base;
+    const labels = source.hostname.split(".");
     const at = labels.indexOf(baseSubdomain);
     return apps.map(({ subdomain, url, ...app }) => {
         if (url)
             return { ...app, url: url.trim() };
+        if (useFallback && subdomain === baseSubdomain)
+            return { ...app, url: base.origin };
         // Without the label there is nothing to swap, and every app would silently share one origin.
         if (at === -1) {
             throw new Error(`[AppSwitcher] buildSuiteApps: ${JSON.stringify(baseSubdomain)} is not a label in ` +
-                `"${base.hostname}", so ${JSON.stringify(app.name)} has no derivable url. ` +
+                `"${source.hostname}", so ${JSON.stringify(app.name)} has no derivable url. ` +
                 `Give that app an explicit url, or pass a baseUrl that contains the label.`);
         }
-        const next = new URL(base.toString());
+        const next = new URL(source.toString());
         next.hostname = labels.map((l, i) => (i === at ? subdomain : l)).join(".");
         return { ...app, url: next.origin };
     });

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

@@ -0,0 +1,24 @@
+import { type AppOption, type SuiteAppSource, type SuiteUrlOptions } from "./AppSwitcherProps";
+/** Every app in the Pixelize suite. */
+export type SuiteAppId = "crm" | "account" | "tickets" | "billing" | "hrms" | "social";
+/** One catalogue entry: switcher copy plus whether the app is hidden from production lists. */
+export interface PixelizeSuiteApp extends SuiteAppSource {
+    id: SuiteAppId;
+    /** Hidden from production lists (except as the current app) until a deployment overrides it to false. */
+    preRelease?: boolean;
+}
+/** The default Pixelize app list; `resolveSuiteApps` `overrides` change a single app without forking it. */
+export declare const PIXELIZE_SUITE: readonly PixelizeSuiteApp[];
+/** Options for `resolveSuiteApps`; the URL fields are `buildSuiteApps`'s. */
+export interface ResolveSuiteAppsOptions extends SuiteUrlOptions {
+    /** The app this UI runs inside; always listed, even while pre-release. */
+    currentAppId: SuiteAppId;
+    /** Production drops pre-release apps so customers are never linked to a dead host. */
+    isProduction: boolean;
+    /** Explicit origin per app (e.g. Account's own deployment variable); wins over derivation. An undefined value falls back to derivation. */
+    urls?: Partial<Record<SuiteAppId, string>>;
+    /** Per-app changes to the catalogue entry, e.g. `{ hrms: { preRelease: false } }` once it ships. */
+    overrides?: Partial<Record<SuiteAppId, Partial<Omit<PixelizeSuiteApp, "id">>>>;
+}
+/** The catalogue as a ready `AppSwitcher` list: pre-release filtering, per-app `urls` and `overrides`, then `buildSuiteApps`. */
+export declare const resolveSuiteApps: ({ currentAppId, isProduction, urls, overrides, ...urlOptions }: ResolveSuiteAppsOptions) => AppOption[];

package/dist/Components/AppSwitcher/pixelizeSuite.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveSuiteApps = exports.PIXELIZE_SUITE = void 0;
+const lucide_react_1 = require("lucide-react");
+const AppSwitcherProps_1 = require("./AppSwitcherProps");
+/** The default Pixelize app list; `resolveSuiteApps` `overrides` change a single app without forking it. */
+exports.PIXELIZE_SUITE = [
+    {
+        id: "crm",
+        subdomain: "crm",
+        name: "CRM",
+        description: "Leads, deals and pipeline",
+        icon: lucide_react_1.LayoutGrid,
+        keywords: ["leads", "deals", "pipeline", "contacts", "sales"],
+    },
+    {
+        id: "account",
+        subdomain: "account",
+        name: "Account",
+        description: "Organization and members",
+        icon: lucide_react_1.Building2,
+        keywords: ["organization", "members", "roles", "settings", "profile"],
+    },
+    {
+        id: "tickets",
+        subdomain: "tickets",
+        name: "Tickets",
+        description: "Support requests and queues",
+        icon: lucide_react_1.Headphones,
+        keywords: ["support", "helpdesk", "issues", "sla"],
+    },
+    {
+        id: "billing",
+        subdomain: "billing",
+        name: "Billing",
+        description: "Invoices and plans",
+        icon: lucide_react_1.Receipt,
+        keywords: ["invoices", "plans", "payments", "subscription"],
+        preRelease: true,
+    },
+    {
+        id: "hrms",
+        subdomain: "hrms",
+        name: "HRMS",
+        description: "People, leave and payroll",
+        icon: lucide_react_1.Users,
+        keywords: ["people", "employees", "leave", "attendance", "payroll"],
+        preRelease: true,
+    },
+    {
+        id: "social",
+        subdomain: "social",
+        name: "Social",
+        description: "Campaigns and inbox",
+        icon: lucide_react_1.Megaphone,
+        keywords: ["campaigns", "posts", "inbox", "marketing"],
+        preRelease: true,
+    },
+];
+/** The catalogue as a ready `AppSwitcher` list: pre-release filtering, per-app `urls` and `overrides`, then `buildSuiteApps`. */
+const resolveSuiteApps = ({ currentAppId, isProduction, urls, overrides, ...urlOptions }) => {
+    const sources = exports.PIXELIZE_SUITE.flatMap((entry) => {
+        const { preRelease, ...app } = { ...entry, ...overrides === null || overrides === void 0 ? void 0 : overrides[entry.id] };
+        if (isProduction && preRelease && app.id !== currentAppId)
+            return [];
+        const url = urls === null || urls === void 0 ? void 0 : urls[app.id];
+        return [url ? { ...app, url } : app];
+    });
+    return (0, AppSwitcherProps_1.buildSuiteApps)(sources, urlOptions);
+};
+exports.resolveSuiteApps = resolveSuiteApps;