@salilvnair/dui 1.0.12 → 1.0.13

package/README.md

@@ -2,7 +2,7 @@
 
 # @salilvnair/dui
 
-**Daakia UI** — a React 19 + TypeScript component library of **238 components**,
+**Daakia UI** — a React 19 + TypeScript component library of **281 components**,
 every colour a CSS variable, and a Monaco-backed editor you only pay for if you
 use it.
 
@@ -18,7 +18,7 @@ use it.
 
 </div>
 
-![DUI — 238 components, a live playground, live retheming, light and dark](https://raw.githubusercontent.com/salilvnair/dui/main/media/dui-showcase.gif)
+![DUI — 281 components, a live playground, live retheming, light and dark](https://raw.githubusercontent.com/salilvnair/dui/main/media/dui-showcase.gif)
 
 <sub>Ninety seconds of it. The full walkthrough is
 [here as an mp4](https://raw.githubusercontent.com/salilvnair/dui/main/media/dui-showcase.mp4),
@@ -109,7 +109,7 @@ or accent colour for the whole tree.
 
 ### A playground on every component
 
-Every one of the 238 components opens on an editable JSX snippet with a live
+Every one of the 281 components opens on an editable JSX snippet with a live
 preview under it. Change a prop, see it, copy the line out.
 
 ![Editing the JSX for ButtonView and the preview updating live](https://raw.githubusercontent.com/salilvnair/dui/main/media/sections/playground.gif)
@@ -196,7 +196,7 @@ tooltips, action sheets, a spotlight tour.
 
 ![EditorView with Monaco, and the plain-text fallback beside it](https://raw.githubusercontent.com/salilvnair/dui/main/media/sections/editor.gif)
 
-**All 238 of them, searchable** — the showcase's sidebar is the fastest way to
+**All 281 of them, searchable** — the showcase's sidebar is the fastest way to
 find the component you half-remember.
 
 ![Searching the sidebar for "table", then for "picker"](https://raw.githubusercontent.com/salilvnair/dui/main/media/sections/catalog.gif)
@@ -209,17 +209,24 @@ find the component you half-remember.
 
 <!-- Generated by `npm run catalog` from media/components.dark.json — do not edit by hand. -->
 
-**238 components** across 18 groups.
+**281 components** across 18 groups.
 Every name links to that component running in the live demo; every group opens to a
 contact sheet and a table of what is in it.
 
 <details>
-<summary><b>Inputs</b> (16)</summary>
+<summary><b>Inputs</b> (23)</summary>
 
-![Inputs — TextInputView, SelectInputView, SelectTextInputView, TagInputView, CheckboxView, ToggleSwitchView, ThemeCardSelectorView, EditorView, DebugEditorView, SearchInputView, DurationInputView, HighlightedInputView, KeyValueTableView, MergedInputView, PickerView, SegmentedControlView](https://raw.githubusercontent.com/salilvnair/dui/main/media/sheets/inputs.png)
+![Inputs — KeyValueTableRowView, DiffEditorView, MarkdownEditorView, MultilineInputView, InlineEditTextView, SearchFieldView, FilterInputView, TextInputView, SelectInputView, SelectTextInputView, TagInputView, CheckboxView, ToggleSwitchView, ThemeCardSelectorView, EditorView, DebugEditorView, SearchInputView, DurationInputView, HighlightedInputView, KeyValueTableView, MergedInputView, PickerView, SegmentedControlView](https://raw.githubusercontent.com/salilvnair/dui/main/media/sheets/inputs.png)
 
 | Component | What it is |
 | --- | --- |
+| [`KeyValueTableRowView`](https://salilvnair.com/framework/dui/#/keyvaluerow) | The row KeyValueTableView is built from, exported on its own — and HiddenKeyValueItemView, the same pair when it cann… |
+| [`DiffEditorView`](https://salilvnair.com/framework/dui/#/diffeditor) | The diff twin of EditorView — a line diff out of the box, upgrading itself to Monaco the moment a consumer opts in. |
+| [`MarkdownEditorView`](https://salilvnair.com/framework/dui/#/markdowneditor) | A rich editor over one Markdown document — rich text and raw source over the same value, and dialogs the host cannot… |
+| [`MultilineInputView`](https://salilvnair.com/framework/dui/#/multilineinput) | The textarea wearing the same clothes as the rest of the input family — same heights, border and focus ring. |
+| [`InlineEditTextView`](https://salilvnair.com/framework/dui/#/inlineedittext) | A field that does not look like one — reads as text until double-clicked, and its onSave may be async. |
+| [`SearchFieldView`](https://salilvnair.com/framework/dui/#/searchfield) | The filter box's sibling that runs something — Enter acts, and it offers what you searched before. |
+| [`FilterInputView`](https://salilvnair.com/framework/dui/#/filterinput) | The box above a list that narrows it — acts on every keystroke, and keeps saying it is a filter rather than a search. |
 | [`TextInputView`](https://salilvnair.com/framework/dui/#/textinput) | Standard text input — sizes match ButtonView and SelectInputView exactly. |
 | [`SelectInputView`](https://salilvnair.com/framework/dui/#/selectinput) | Portal dropdown with keyboard nav — replaces all StyledDropdown usages. |
 | [`SelectTextInputView`](https://salilvnair.com/framework/dui/#/selecttextinput) | Combined method selector + URL input in one bordered pill — URL bar pattern. |
@@ -240,12 +247,14 @@ contact sheet and a table of what is in it.
 </details>
 
 <details>
-<summary><b>Date & Time</b> (5)</summary>
+<summary><b>Date & Time</b> (7)</summary>
 
-![Date & Time — CalendarView, DateInputView, DateRangePickerView, TimeWheelView, CountdownRingView](https://raw.githubusercontent.com/salilvnair/dui/main/media/sheets/date-time.png)
+![Date & Time — TimeZoneSelectView, DateTimeInputView, CalendarView, DateInputView, DateRangePickerView, TimeWheelView, CountdownRingView](https://raw.githubusercontent.com/salilvnair/dui/main/media/sheets/date-time.png)
 
 | Component | What it is |
 | --- | --- |
+| [`TimeZoneSelectView`](https://salilvnair.com/framework/dui/#/timezoneselect) | Every zone the platform knows, searchable — from the platform rather than a bundled table, so it does not go stale. |
+| [`DateTimeInputView`](https://salilvnair.com/framework/dui/#/datetimeinput) | A date and a time in one field, returning one ISO string — with null as a real state rather than an empty one. |
 | [`CalendarView`](https://salilvnair.com/framework/dui/#/calendar) | Month grid calendar — single / range / multi select, min/max bounds, animated month transitions. |
 | [`DateInputView`](https://salilvnair.com/framework/dui/#/dateinput) | Text field trigger + CalendarView popover — the standard date field pattern. |
 | [`DateRangePickerView`](https://salilvnair.com/framework/dui/#/daterangepicker) | Range calendar + quick presets (Today / Last 7 days / Last 30 days / This month). |
@@ -255,12 +264,14 @@ contact sheet and a table of what is in it.
 </details>
 
 <details>
-<summary><b>Form & Selection</b> (14)</summary>
+<summary><b>Form & Selection</b> (16)</summary>
 
-![Form & Selection — RadioGroupView, RadioCardView, RatingView, OtpInputView, PhoneInputView, ColorPickerView, IconPickerView, EmojiPickerView, FileDropzoneView, AvatarUploadView, MaskedInputView, TransferListView, StepperInputView, SwitchGroupView](https://raw.githubusercontent.com/salilvnair/dui/main/media/sheets/form-selection.png)
+![Form & Selection — SwatchPickerView, TogglePillView, RadioGroupView, RadioCardView, RatingView, OtpInputView, PhoneInputView, ColorPickerView, IconPickerView, EmojiPickerView, FileDropzoneView, AvatarUploadView, MaskedInputView, TransferListView, StepperInputView, SwitchGroupView](https://raw.githubusercontent.com/salilvnair/dui/main/media/sheets/form-selection.png)
 
 | Component | What it is |
 | --- | --- |
+| [`SwatchPickerView`](https://salilvnair.com/framework/dui/#/swatchpicker) | Choosing between things identified by colour. |
+| [`TogglePillView`](https://salilvnair.com/framework/dui/#/togglepill) | A chip that is a control — the pill above a list that switches one facet on and off, with an optional count inside it. |
 | [`RadioGroupView`](https://salilvnair.com/framework/dui/#/radiogroup) | Radio list with optional descriptions — vertical or horizontal layout. |
 | [`RadioCardView`](https://salilvnair.com/framework/dui/#/radiocard) | Big selectable cards — plan pickers, mode selectors — grid layout via `columns`. |
 | [`RatingView`](https://salilvnair.com/framework/dui/#/rating) | Star or heart rating input — half-step precision, hover preview, read-only mode. |
@@ -279,12 +290,16 @@ contact sheet and a table of what is in it.
 </details>
 
 <details>
-<summary><b>Feedback & Status</b> (10)</summary>
+<summary><b>Feedback & Status</b> (14)</summary>
 
-![Feedback & Status — SnackbarView, BannerView, ProgressRingView, ProgressBarView, SkeletonView, NotificationBadgeView, AvatarView, AvatarGroupView, PresenceDotView, ConfettiBurstView](https://raw.githubusercontent.com/salilvnair/dui/main/media/sheets/feedback-status.png)
+![Feedback & Status — TableSkeletonView, LoadingStateView, InfoView, CalloutView, SnackbarView, BannerView, ProgressRingView, ProgressBarView, SkeletonView, NotificationBadgeView, AvatarView, AvatarGroupView, PresenceDotView, ConfettiBurstView](https://raw.githubusercontent.com/salilvnair/dui/main/media/sheets/feedback-status.png)
 
 | Component | What it is |
 | --- | --- |
+| [`TableSkeletonView`](https://salilvnair.com/framework/dui/#/tableskeleton) | The placeholder a table shows while its rows load — declared with the same column widths, so nothing jumps when the d… |
+| [`LoadingStateView`](https://salilvnair.com/framework/dui/#/loadingstate) | The screen shown while something is fetched — the subject drawn large, and a component that says so itself once the w… |
+| [`InfoView`](https://salilvnair.com/framework/dui/#/infoview) | An explanatory block for settings and empty states — what this is, and where on disk it lives, with paths as pills ra… |
+| [`CalloutView`](https://salilvnair.com/framework/dui/#/callout) | The titled block that interrupts a page to say something the reader needs — info, tip, warning, danger. |
 | [`SnackbarView`](https://salilvnair.com/framework/dui/#/snackbar) | Single-line bottom bar + action, auto-dismiss timer pauses on hover — distinct from the stacked-corner ToastView. |
 | [`BannerView`](https://salilvnair.com/framework/dui/#/banner) | Persistent dismissible top strip — info / success / warning / danger variants. |
 | [`ProgressRingView`](https://salilvnair.com/framework/dui/#/progressring) | Circular determinate/indeterminate progress — distinct from GaugeView (metric gauge). |
@@ -299,12 +314,16 @@ contact sheet and a table of what is in it.
 </details>
 
 <details>
-<summary><b>Buttons</b> (4)</summary>
+<summary><b>Buttons</b> (8)</summary>
 
-![Buttons — ButtonView, IconButtonView, DropDownButtonView, AIButtonView](https://raw.githubusercontent.com/salilvnair/dui/main/media/sheets/buttons.png)
+![Buttons — ThemeToggleView, SegmentedView, SplitButtonView, ActionButtonView, ButtonView, IconButtonView, DropDownButtonView, AIButtonView](https://raw.githubusercontent.com/salilvnair/dui/main/media/sheets/buttons.png)
 
 | Component | What it is |
 | --- | --- |
+| [`ThemeToggleView`](https://salilvnair.com/framework/dui/#/themetoggle) | One button, two states — the sun and the moon tinted independently, for a header with no room for three segments. |
+| [`SegmentedView`](https://salilvnair.com/framework/dui/#/segmented) | The flat cousin of SegmentedControlView — no track, no sliding indicator, for switching a view rather than operating… |
+| [`SplitButtonView`](https://salilvnair.com/framework/dui/#/splitbutton) | A default action and its close relatives in one control — Save, with Save As and Export behind the chevron. |
+| [`ActionButtonView`](https://salilvnair.com/framework/dui/#/actionbutton) | The toolbar button — quieter than ButtonView, louder than IconButtonView, and sized on the same scale as both. |
 | [`ButtonView`](https://salilvnair.com/framework/dui/#/button) | Standard button — primary / secondary / ghost / danger — all sizes. |
 | [`IconButtonView`](https://salilvnair.com/framework/dui/#/iconbutton) | Square icon-only buttons — ghost / filled — toggle support — all sizes. |
 | [`DropDownButtonView`](https://salilvnair.com/framework/dui/#/dropdownbutton) | Split button — primary action + chevron dropdown — Save as, Export as, etc. |
@@ -313,12 +332,14 @@ contact sheet and a table of what is in it.
 </details>
 
 <details>
-<summary><b>Navigation</b> (9)</summary>
+<summary><b>Navigation</b> (11)</summary>
 
-![Navigation — TabView, TabBarView, ContextMenuView, SideNavView, SettingsNavView, BreadcrumbView, PaginationView, DockView, FabView](https://raw.githubusercontent.com/salilvnair/dui/main/media/sheets/navigation.png)
+![Navigation — UnderlineTabsView, PilledTabView, TabView, TabBarView, ContextMenuView, SideNavView, SettingsNavView, BreadcrumbView, PaginationView, DockView, FabView](https://raw.githubusercontent.com/salilvnair/dui/main/media/sheets/navigation.png)
 
 | Component | What it is |
 | --- | --- |
+| [`UnderlineTabsView`](https://salilvnair.com/framework/dui/#/underlinetabs) | The page-level tab row — active marked by a rule rather than a box, with counts beside the labels. |
+| [`PilledTabView`](https://salilvnair.com/framework/dui/#/pilledtab) | A compact tab row for inside a panel — a filled pill marks the active one, rounded or fully pilled. |
 | [`TabView`](https://salilvnair.com/framework/dui/#/tabs) | pill · underline variants — sliding indicator, badges, dots — all with accentColor. |
 | [`TabBarView`](https://salilvnair.com/framework/dui/#/tabbar) | Editor-style protocol tab bar — store-free, drag-free, scroll arrows, dirty dot. |
 | [`ContextMenuView`](https://salilvnair.com/framework/dui/#/contextmenu) | Recursive context menu with submenus — portal rendered — collection tree style. |
@@ -332,13 +353,20 @@ contact sheet and a table of what is in it.
 </details>
 
 <details>
-<summary><b>Display</b> (19)</summary>
+<summary><b>Display</b> (26)</summary>
 
-![Display — ChipView, StatusIndicatorView, LoaderView, EmptyStateView, ColoredTextView, StatsCardView, DottedCardView, DataTableView, CodeBlockView, PromptCardView, PromptLibraryView, StageCheck/Spin/Pulse, HudView, JsonTreeView, ExpandableLogEntryView, CopyButtonView, MarkdownView, FormDataTableView, YamlKeyChip](https://raw.githubusercontent.com/salilvnair/dui/main/media/sheets/display.png)
+![Display — LineDiffView, SetupOptionView, PriorityMarkView, GroupHeaderView, TerminalBlockView, CommandChipView, ChipView, BadgeChipView, StatusIndicatorView, LoaderView, EmptyStateView, ColoredTextView, StatsCardView, DottedCardView, DataTableView, CodeBlockView, PromptCardView, PromptLibraryView, StageCheck/Spin/Pulse, HudView, JsonTreeView, ExpandableLogEntryView, CopyButtonView, MarkdownView, FormDataTableView, YamlKeyChip](https://raw.githubusercontent.com/salilvnair/dui/main/media/sheets/display.png)
 
 | Component | What it is |
 | --- | --- |
+| [`LineDiffView`](https://salilvnair.com/framework/dui/#/linediff) | Two texts side by side with the changed lines marked — and no Monaco anywhere near it. |
+| [`SetupOptionView`](https://salilvnair.com/framework/dui/#/setupoption) | One card per route to getting installed — winget, Homebrew, apt — turning a wall of platform instructions into a list… |
+| [`PriorityMarkView`](https://salilvnair.com/framework/dui/#/prioritymark) | The priority marker on an issue row — the ring is the signal, the word is a courtesy that a dense table can drop. |
+| [`GroupHeaderView`](https://salilvnair.com/framework/dui/#/groupheader) | The row above a group in a grouped list or a board column — set as a label, not a heading, so eight of them do not re… |
+| [`TerminalBlockView`](https://salilvnair.com/framework/dui/#/terminalblock) | Commands and their output on a terminal ground — a terminal, whether it holds what you type or what came back. |
+| [`CommandChipView`](https://salilvnair.com/framework/dui/#/commandchip) | A command rendered inline that copies itself when clicked — for the places a reader is about to retype something they… |
 | [`ChipView`](https://salilvnair.com/framework/dui/#/chips) | Colored badge chips for methods, protocols, status codes, filter tags. |
+| [`BadgeChipView`](https://salilvnair.com/framework/dui/#/badgechip) | The pill that labels a thing — fifty skins, chosen by `variant` or set for the whole product by DuiProvider. |
 | [`StatusIndicatorView`](https://salilvnair.com/framework/dui/#/statusindicator) | Connection status dot — idle · connecting · connected · disconnected · error. |
 | [`LoaderView`](https://salilvnair.com/framework/dui/#/loader) | Loading states — spinner · dots · skeleton · pulse · progress-bar. |
 | [`EmptyStateView`](https://salilvnair.com/framework/dui/#/emptystate) | Empty state placeholder with icon, title, message, and optional CTA button. |
@@ -361,12 +389,14 @@ contact sheet and a table of what is in it.
 </details>
 
 <details>
-<summary><b>Overlays</b> (9)</summary>
+<summary><b>Overlays</b> (11)</summary>
 
-![Overlays — ModalView, InfoPopupView, ToastView, PopoverView, TooltipView, DrawerView, ActionSheetView, BottomSheetView, SpotlightTourView](https://raw.githubusercontent.com/salilvnair/dui/main/media/sheets/overlays.png)
+![Overlays — SheetView, CommandPaletteView, ModalView, InfoPopupView, ToastView, PopoverView, TooltipView, DrawerView, ActionSheetView, BottomSheetView, SpotlightTourView](https://raw.githubusercontent.com/salilvnair/dui/main/media/sheets/overlays.png)
 
 | Component | What it is |
 | --- | --- |
+| [`SheetView`](https://salilvnair.com/framework/dui/#/sheet) | A panel that slides in from any edge — for content that is a sidebar on a wide screen and a bottom sheet on a narrow… |
+| [`CommandPaletteView`](https://salilvnair.com/framework/dui/#/commandpalette) | The Ctrl+K box. |
 | [`ModalView`](https://salilvnair.com/framework/dui/#/modal) | Configurable modal — sm/md/lg/xl — never closes on backdrop click. |
 | [`InfoPopupView`](https://salilvnair.com/framework/dui/#/infopopup) | Help popup anchored near a ? |
 | [`ToastView`](https://salilvnair.com/framework/dui/#/toast) | Toast notification stack — success · error · warning · info — auto-dismiss. |
@@ -380,12 +410,14 @@ contact sheet and a table of what is in it.
 </details>
 
 <details>
-<summary><b>Layout</b> (22)</summary>
+<summary><b>Layout</b> (24)</summary>
 
-![Layout — ResizablePanelView, SplitPanelView, BottomPanelView, FeatureCategoryView, CollapsibleSectionView, SpacerView, FolderView, DebugView, HeroView, LevelView, MediaObjectView, TileGridView, PanelListView, NavbarView, AffixView, AnchorView, StickyHeaderView, AspectRatioView, MasonryGridView, ScrollAreaView, BackToTopView, WatermarkView](https://raw.githubusercontent.com/salilvnair/dui/main/media/sheets/layout.png)
+![Layout — InspectorPanelView, FanStackView, ResizablePanelView, SplitPanelView, BottomPanelView, FeatureCategoryView, CollapsibleSectionView, SpacerView, FolderView, DebugView, HeroView, LevelView, MediaObjectView, TileGridView, PanelListView, NavbarView, AffixView, AnchorView, StickyHeaderView, AspectRatioView, MasonryGridView, ScrollAreaView, BackToTopView, WatermarkView](https://raw.githubusercontent.com/salilvnair/dui/main/media/sheets/layout.png)
 
 | Component | What it is |
 | --- | --- |
+| [`InspectorPanelView`](https://salilvnair.com/framework/dui/#/inspectorpanel) | The detail panel beside a list — an overlay on a narrow screen and a permanent third column on a wide one, from one p… |
+| [`FanStackView`](https://salilvnair.com/framework/dui/#/fanstack) | A small set of actions that spring out of a floating anchor — straight up, or swept into an arc. |
 | [`ResizablePanelView`](https://salilvnair.com/framework/dui/#/resizablepanel) | Single-pane panel with bottom-edge drag handle to resize height — no store dependency. |
 | [`SplitPanelView`](https://salilvnair.com/framework/dui/#/splitpanel) | Split-pane container — horizontal or vertical — drag pill, double-click to reset. |
 | [`BottomPanelView`](https://salilvnair.com/framework/dui/#/bottompanel) | DevTools-style resizable bottom panel with tab bar and collapse toggle. |
@@ -412,12 +444,14 @@ contact sheet and a table of what is in it.
 </details>
 
 <details>
-<summary><b>Data & Enterprise</b> (14)</summary>
+<summary><b>Data & Enterprise</b> (16)</summary>
 
-![Data & Enterprise — DescriptionsView, StatisticView, ResultView, CascaderView, ComboBoxView, ListView, VirtualizedListView, StickyTableHeaderView, TablePaginationView, FilterBarView, SortableHeaderView, EditableCellView, DataGridToolbarView, ColumnVisibilityMenuView](https://raw.githubusercontent.com/salilvnair/dui/main/media/sheets/data-enterprise.png)
+![Data & Enterprise — IssueCardView, FindingCardView, DescriptionsView, StatisticView, ResultView, CascaderView, ComboBoxView, ListView, VirtualizedListView, StickyTableHeaderView, TablePaginationView, FilterBarView, SortableHeaderView, EditableCellView, DataGridToolbarView, ColumnVisibilityMenuView](https://raw.githubusercontent.com/salilvnair/dui/main/media/sheets/data-enterprise.png)
 
 | Component | What it is |
 | --- | --- |
+| [`IssueCardView`](https://salilvnair.com/framework/dui/#/issuecard) | The card a tracker board is built from — everything but the title is a slot, with a matching skeleton so the board ne… |
+| [`FindingCardView`](https://salilvnair.com/framework/dui/#/findingcard) | One finding from an analysis — with remediation kept apart from the detail, because what was found and what to do are… |
 | [`DescriptionsView`](https://salilvnair.com/framework/dui/#/descriptions) | Read-only label/value grid for entity detail views. |
 | [`StatisticView`](https://salilvnair.com/framework/dui/#/statistic) | Inline animated big-number stat with prefix/suffix. |
 | [`ResultView`](https://salilvnair.com/framework/dui/#/result) | Full-page outcome state — success / error / 404 / 403 / warning / info. |
@@ -436,12 +470,14 @@ contact sheet and a table of what is in it.
 </details>
 
 <details>
-<summary><b>Advanced Selection</b> (13)</summary>
+<summary><b>Advanced Selection</b> (15)</summary>
 
-![Advanced Selection — KbdView, WizardStepperView, AccordionGroupView, SegmentedProgressBarView, ChecklistView, PriorityPickerView, TagCloudView, RangeSliderView, VoteWidgetView, LikeButtonView, BookmarkButtonView, FollowButtonView, ShortcutRecorderView](https://raw.githubusercontent.com/salilvnair/dui/main/media/sheets/advanced-selection.png)
+![Advanced Selection — SortableView, RearrangeView, KbdView, WizardStepperView, AccordionGroupView, SegmentedProgressBarView, ChecklistView, PriorityPickerView, TagCloudView, RangeSliderView, VoteWidgetView, LikeButtonView, BookmarkButtonView, FollowButtonView, ShortcutRecorderView](https://raw.githubusercontent.com/salilvnair/dui/main/media/sheets/advanced-selection.png)
 
 | Component | What it is |
 | --- | --- |
+| [`SortableView`](https://salilvnair.com/framework/dui/#/sortable) | Reordering for rows you draw yourself — it supplies the handle, the drop indicator and the indices, nothing else. |
+| [`RearrangeView`](https://salilvnair.com/framework/dui/#/rearrange) | The column-picker shape — which fields to show and in what order, both questions in one list. |
 | [`KbdView`](https://salilvnair.com/framework/dui/#/kbd) | Hotkey hint chip, composes multiple keys with a "+" separator. |
 | [`WizardStepperView`](https://salilvnair.com/framework/dui/#/wizardstepper) | Multi-step form wizard progress header. |
 | [`AccordionGroupView`](https://salilvnair.com/framework/dui/#/accordiongroup) | Managed single/multi-open accordion group, built on CollapsibleSectionView. |
@@ -517,12 +553,14 @@ contact sheet and a table of what is in it.
 </details>
 
 <details>
-<summary><b>Media & Files</b> (12)</summary>
+<summary><b>Media & Files</b> (14)</summary>
 
-![Media & Files — ImageGalleryView, ImageCropperView, VideoPlayerView, AudioWaveformView, AudioPlayerView, PdfViewerView, FileIconView, FileListView, DragHandleView, SignaturePadView, BarcodeView, ImageZoomView](https://raw.githubusercontent.com/salilvnair/dui/main/media/sheets/media-files.png)
+![Media & Files — PathBreadcrumbView, FileBrowserView, ImageGalleryView, ImageCropperView, VideoPlayerView, AudioWaveformView, AudioPlayerView, PdfViewerView, FileIconView, FileListView, DragHandleView, SignaturePadView, BarcodeView, ImageZoomView](https://raw.githubusercontent.com/salilvnair/dui/main/media/sheets/media-files.png)
 
 | Component | What it is |
 | --- | --- |
+| [`PathBreadcrumbView`](https://salilvnair.com/framework/dui/#/pathbreadcrumb) | The path bar above a file listing — every segment a link back, and a double-click turns the whole thing into a text box. |
+| [`FileBrowserView`](https://salilvnair.com/framework/dui/#/filebrowser) | A directory listing — files, folders and symlinks, with selection and arrival as two separate states in two separate… |
 | [`ImageGalleryView`](https://salilvnair.com/framework/dui/#/imagegallery) | Grid gallery with a click-to-open lightbox — prev/next navigation, Escape to close. |
 | [`ImageCropperView`](https://salilvnair.com/framework/dui/#/imagecropper) | Drag-crop + zoom image editor — fixed crop frame, pannable/zoomable image. |
 | [`VideoPlayerView`](https://salilvnair.com/framework/dui/#/videoplayer) | Custom video controls wrapper — play/pause, seek, volume. |
@@ -539,12 +577,17 @@ contact sheet and a table of what is in it.
 </details>
 
 <details>
-<summary><b>Data Display & Wow</b> (15)</summary>
+<summary><b>Data Display & Wow</b> (20)</summary>
 
-![Data Display & Wow — TimelineView, ActivityFeedView, KanbanBoardView, SparklineView, HeatmapCalendarView, ComparisonSliderView, CarouselView, QRCodeView, StatTrendCardView, PricingCardView, TestimonialCardView, RatingBreakdownView, TreeSelectView, RichTextToolbarView, MentionInputView](https://raw.githubusercontent.com/salilvnair/dui/main/media/sheets/data-display-wow.png)
+![Data Display & Wow — SwimlaneChartView, LaneChartView, FlameGraphView, SunburstView, DonutView, TimelineView, ActivityFeedView, KanbanBoardView, SparklineView, HeatmapCalendarView, ComparisonSliderView, CarouselView, QRCodeView, StatTrendCardView, PricingCardView, TestimonialCardView, RatingBreakdownView, TreeSelectView, RichTextToolbarView, MentionInputView](https://raw.githubusercontent.com/salilvnair/dui/main/media/sheets/data-display-wow.png)
 
 | Component | What it is |
 | --- | --- |
+| [`SwimlaneChartView`](https://salilvnair.com/framework/dui/#/swimlanechart) | What each of several things was doing over a period — threads by state, pods by phase — each stretch coloured by the… |
+| [`LaneChartView`](https://salilvnair.com/framework/dui/#/lanechart) | Several metrics over the same period, each in its own lane with its own scale — so a small signal is not flattened by… |
+| [`FlameGraphView`](https://salilvnair.com/framework/dui/#/flamegraph) | The profiler flame graph — a frame is as wide as it is expensive, and clicking one makes it the new root. |
+| [`SunburstView`](https://salilvnair.com/framework/dui/#/sunburst) | Where a total went, one level at a time — a ring per level, drawn outward. |
+| [`DonutView`](https://salilvnair.com/framework/dui/#/donut) | A share-of-total ring, with maxSlices to roll the unreadable tail into one named remainder. |
 | [`TimelineView`](https://salilvnair.com/framework/dui/#/timeline) | Event trail with icon nodes — vertical (default) or horizontal. |
 | [`ActivityFeedView`](https://salilvnair.com/framework/dui/#/activityfeed) | Chronological activity feed, entries grouped by day. |
 | [`KanbanBoardView`](https://salilvnair.com/framework/dui/#/kanbanboard) | Draggable columns + cards board, native HTML5 drag-and-drop. |
@@ -804,7 +847,7 @@ the scripts that make it live in `scripts/`.
 
 | Command | What it does |
 | --- | --- |
-| `npm run shots` | Photographs all 238 components into `media/components/` and writes `media/components.dark.json` |
+| `npm run shots` | Photographs all 281 components into `media/components/` and writes `media/components.dark.json` |
 | `npm run shots:light` | The same on the light ground (gitignored — an intermediate for the light sheets) |
 | `npm run sheets` | One contact sheet per group into `media/sheets/` — what the catalog above embeds |
 | `npm run catalog` | Rewrites the catalog block in this README from the manifest |
@@ -823,7 +866,7 @@ Two rules the scripts enforce, both learned the hard way:
 
 - **The component list comes from the app, not from the script.** The showcase
   publishes its sidebar as `window.__DUI_SHOWCASE__`; a hand-maintained copy of
-  238 ids goes stale silently, and the failure mode is a new component that
+  281 ids goes stale silently, and the failure mode is a new component that
   simply never gets photographed.
 - **No unverified footage survives.** Every video segment asserts something is
   on screen before its clip is kept. A step that quietly did nothing still