@psnext/design-system 2.5.0 → 2.7.0

package/DESIGN.md

@@ -370,6 +370,11 @@ translucent+blurred with no border, and needs a textured layer behind it
 - **Exports**: Collapsible, CollapsibleTrigger, CollapsibleContent
 - **Notes**: Radix Collapsible passthrough (controlled/uncontrolled via `open`/`defaultOpen`); no styling applied.
 
+### Combobox
+- **Exports**: Combobox, ComboboxTrigger, ComboboxContent, ComboboxInput, ComboboxList, ComboboxEmpty, ComboboxGroup, ComboboxItem, ComboboxSeparator
+- **Custom props**: Combobox `value`/`defaultValue`/`onValueChange` + `open`/`defaultOpen`/`onOpenChange` (controlled or uncontrolled, closes on select), `modal` (forwarded to the Popover root); ComboboxTrigger `label` (muted `label:` prefix), `placeholder`, `children` (display override for e.g. an initially-selected label); ComboboxContent forwards cmdk `filter`/`shouldFilter`/`loop`; ComboboxItem `value` (required, reported on select), `keywords` (search terms; defaults to item text).
+- **Notes**: Searchable single-select dropdown (shadcn combobox recipe) on `Popover`+`Command`, styled like the Header project picker (pill trigger, bordered search above the list, check on the chosen row). Search matches item text, not `value`. The trigger shows the chosen item's label once items have mounted; for an initially-selected value pass the label as trigger `children`. Inside a modal `Dialog`, pass `modal` on the Combobox root — the dropdown portals outside the dialog, and without it the dialog's scroll lock blocks wheel/trackpad scrolling in the list (scrollbar dragging still works, so the bug is easy to miss).
+
 ### Command
 - **Exports**: Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator
 - **Custom props**: CommandDialog `title`/`description` (sr-only a11y strings), `showCloseButton` (default `true`).
@@ -584,8 +589,8 @@ variant with paint classes (SKILL.md → "Never re-skin a variant").
 - **Notes**: Radix Menubar; content self-portals; auto-indents plain items when checkbox/radio items present.
 
 ### Mosaic
-- **Exports**: Mosaic, MosaicWindow, MosaicProps (type), MosaicWindowProps (type), and tree types re-exported from Mosaic.utils: MosaicNode, MosaicParent, MosaicKey, MosaicDirection, MosaicPath, DropZone
-- **Custom props**: `value` / `defaultValue` — the pane tree, controlled or uncontrolled (`MosaicNode<T>` = leaf id `T` or `{ direction: "row" | "column", first, second, splitPercentage? }`); `onChange` — fires with the updated tree after resize/split/remove/drag (no strict veto); `renderTile` — renders a leaf's content (required); `renderTitle` — pane toolbar title (default `String(id)`); `renderControls` — extra toolbar actions after split/remove; `createNode` — id factory for toolbar splits (required); `dragToRearrange` (default `true`); `dropZoneFraction` — edge-zone fraction 0–1 (default `0.25`); `minPaneSizePercentage` (default `10`); `emptyPlaceholder` — rendered when every pane is removed; `renamable` (default `false`) — pencil button + double-click title to rename a pane in place; `paneNames` / `defaultPaneNames` / `onPaneNamesChange` — custom pane names keyed by leaf id, controlled or uncontrolled.
+- **Exports**: Mosaic, MosaicWindow, MosaicProps (type), MosaicToolbarVisibility (type), MosaicWindowProps (type), and tree types re-exported from Mosaic.utils: MosaicNode, MosaicParent, MosaicInputNode, MosaicInputParent, MosaicLeafObject, MosaicKey, MosaicDirection, MosaicPath, DropZone
+- **Custom props**: `value` / `defaultValue` — the pane tree, controlled or uncontrolled (`MosaicNode<T>` = leaf id `T` or `{ direction: "row" | "column", first, second, splitPercentage? }`; leaves in `value`/`defaultValue` may also be `{ id }` objects (`MosaicInputNode<T>`), mixed freely with bare ids — extra keys are ignored, normalized to bare ids on the way in, and `onChange` always emits bare-id trees; `first`/`second` may also be blank — `null`/`undefined` or omitted in the input tree, normalized to `null` (what `onChange` emits) — for an intentionally blank slot: space kept per `splitPercentage`, divider still resizes it, but no pane chrome renders and drags/splits can't target it); `onChange` — fires with the updated tree after resize/split/remove/drag (no strict veto); `renderTile` — renders a leaf's content (required); `renderTitle` — pane toolbar title (default `String(id)`); `renderControls` — extra toolbar actions after split/remove; `createNode` — id factory for toolbar splits (required); `dragToRearrange` (default `true`); `dropZoneFraction` — edge-zone fraction 0–1 (default `0.25`); `minPaneSizePercentage` (default `10`); `toolbarVisibility` (default `"always"`) — `"always" | "autohide" | "hidden"`: autohide overlays the toolbar on the pane content and fades it in on pane hover or keyboard focus; hidden removes toolbars entirely (drag/split/remove/rename unavailable — drive layout via the controlled `value`; divider resizing works in every mode); `emptyPlaceholder` — rendered when every pane is removed; `renamable` (default `false`) — pencil button + double-click title to rename a pane in place; `paneNames` / `defaultPaneNames` / `onPaneNamesChange` — custom pane names keyed by leaf id, controlled or uncontrolled.
 - **Notes**: Recursive tiling layout (react-mosaic-style) built on the DS Resizable panels: panes split into rows/columns, resize via draggable dividers, and rearrange by dragging a pane's title bar onto another pane's edge (splits there) or center (swaps). Every drag outcome is also reachable via each pane's keyboard-operable toolbar split/remove buttons. `useMosaic` is intentionally not exported — `MosaicWindow` is the supported extension point.
 
 ### NativeSelect

package/SKILL.md

@@ -18,7 +18,7 @@ demonstrably can't produce the design:
 1. **Pattern first**: does a pattern (`patterns/Header`, `DataTable`, `Footer`,
    `SectionCard`, `SectionHeading`, `MediaObject`) or layout (`Container`, `Stack`,
    `TwoColumn`, `MultiColumn`, `PageBackground`) already solve it? Use it.
-2. **Primitive second**: compose from `primitives/*` (67 of them — check the catalog
+2. **Primitive second**: compose from `primitives/*` (68 of them — check the catalog
    in DESIGN.md §6 before writing anything custom).
 3. **Stock rendering**: render the chosen component with its variants/props as
    designed. Pick the variant from its "Choosing a variant" table in DESIGN.md

package/dist/Header.cjs

@@ -3,11 +3,11 @@ const require_cn = require("./cn.cjs");
 const require_Icon = require("./Icon.cjs");
 const require_primitives_Button_index = require("./primitives/Button/index.cjs");
 const require_primitives_Avatar_index = require("./primitives/Avatar/index.cjs");
+const require_primitives_Input_index = require("./primitives/Input/index.cjs");
+const require_primitives_Popover_index = require("./primitives/Popover/index.cjs");
 const require_primitives_Credits_index = require("./primitives/Credits/index.cjs");
 const require_primitives_DropdownMenu_index = require("./primitives/DropdownMenu/index.cjs");
-const require_primitives_Input_index = require("./primitives/Input/index.cjs");
 const require_Logo = require("./Logo.cjs");
-const require_primitives_Popover_index = require("./primitives/Popover/index.cjs");
 const require_primitives_Skeleton_index = require("./primitives/Skeleton/index.cjs");
 const require_primitives_ThemeProvider_index = require("./primitives/ThemeProvider/index.cjs");
 let react = require("react");

package/dist/Header.js

@@ -2,11 +2,11 @@ import { t as cn } from "./cn.js";
 import { t as Icon } from "./Icon.js";
 import { Button } from "./primitives/Button/index.js";
 import { Avatar, AvatarFallback } from "./primitives/Avatar/index.js";
+import { Input } from "./primitives/Input/index.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./primitives/Popover/index.js";
 import { Credits } from "./primitives/Credits/index.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "./primitives/DropdownMenu/index.js";
-import { Input } from "./primitives/Input/index.js";
 import { t as Logo } from "./Logo.js";
-import { Popover, PopoverContent, PopoverTrigger } from "./primitives/Popover/index.js";
 import { Skeleton } from "./primitives/Skeleton/index.js";
 import { useTheme } from "./primitives/ThemeProvider/index.js";
 import * as React from "react";