@ahrowe/ui 0.16.7 → 0.16.8

package/dist/mcp.js

@@ -53,17 +53,23 @@ server.registerTool("search_components", {
 	inputSchema: { query: z.string().describe("Use-case description or keyword, e.g. \"form input\", \"loading spinner\", \"drag and drop\"") }
 }, async ({ query }) => {
 	const terms = query.toLowerCase().split(/\s+/);
-	const results = docs.filter((doc) => {
+	const matches = docs.map((doc) => {
 		const haystack = `${doc.name} ${doc.description} ${doc.content}`.toLowerCase();
-		return terms.every((term) => haystack.includes(term));
-	});
-	if (results.length === 0) return { content: [{
+		return {
+			doc,
+			matchCount: terms.filter((term) => haystack.includes(term)).length
+		};
+	}).filter(({ matchCount }) => matchCount > 0);
+	if (matches.length === 0) return { content: [{
 		type: "text",
 		text: `No components matched "${query}". Try broader terms.`
 	}] };
+	const fullMatches = matches.filter(({ matchCount }) => matchCount === terms.length);
+	const partialMatches = matches.filter(({ matchCount }) => matchCount < terms.length).sort((a, b) => b.matchCount - a.matchCount);
+	const formatLine = ({ doc }) => `**${doc.name}** — ${doc.description}`;
 	return { content: [{
 		type: "text",
-		text: results.map((d) => `**${d.name}** — ${d.description}`).join("\n")
+		text: [fullMatches.length > 0 && fullMatches.map(formatLine).join("\n"), partialMatches.length > 0 && `Partial matches:\n${partialMatches.map(formatLine).join("\n")}`].filter(Boolean).join("\n\n")
 	}] };
 });
 var transport = new StdioServerTransport();

package/docs/Accordion.md

@@ -2,6 +2,8 @@
 
 **When to use:** Collapsible sections for progressive disclosure — FAQs, settings panels, long-form content that users expand on demand.
 
+**Keywords:** collapse, dropdown panel
+
 **Import:** `import { Accordion } from '@ahrowe/ui'`
 
 **Style variants:** `AccordionStyleType.Default` | `AccordionStyleType.Primary` | `AccordionStyleType.Plain`

package/docs/ActionButtons.md

@@ -2,6 +2,8 @@
 
 **When to use:** Standardised Submit / Cancel button pair for forms, dialogs, and drawer footers. Keeps spacing and loading states consistent.
 
+**Keywords:** confirm, form footer
+
 **Import:** `import { ActionButtons } from '@ahrowe/ui'`
 
 ```tsx

package/docs/ActionIcon.md

@@ -2,6 +2,8 @@
 
 **When to use:** Clickable icon button without a label — toolbar actions, table row actions, icon-only controls.
 
+**Keywords:** toolbar button
+
 **Import:** `import { ActionIcon } from '@ahrowe/ui'`
 
 **Requires:** `@fortawesome/free-solid-svg-icons` peer dependency.

package/docs/Alert.md

@@ -2,6 +2,8 @@
 
 **When to use:** A persistent inline status message, used for form-level errors, page/section banners, empty-config warnings, and "here's what changed" notices. Unlike `Toast`, it isn't portaled or auto-dismissed, and it stays in the page's normal flow for as long as its consumer renders it. Use `Toast` instead for a transient, corner-anchored notification.
 
+**Keywords:** warning box
+
 **Import:** `import { Alert, AlertStyleType } from '@ahrowe/ui'`
 
 **Style variants:** `AlertStyleType.Default` | `AlertStyleType.Info` | `AlertStyleType.Success` | `AlertStyleType.Warn` | `AlertStyleType.Error`

package/docs/AnimatedLogo.md

@@ -2,6 +2,8 @@
 
 **When to use:** A self-drawing SVG mark for splash/loading screens, empty states, or anywhere a brand or icon mark should feel alive rather than static. The outline traces in first, then the interior fills, holds, and (when looping) retracts for a seamless replay.
 
+**Keywords:** svg animation, brand mark, logo animation
+
 **Import:** `import { AnimatedLogo } from '@ahrowe/ui'`
 
 ```tsx

package/docs/AnimatedText.md

@@ -2,6 +2,8 @@
 
 **When to use:** Decorative text entrance or emphasis effect, for hero headlines, empty-state messages, "premium"/"new" callouts, loading/decoding states. Not for body copy that needs to stay readable while animating in bulk; keep it to short strings.
 
+**Keywords:** text animation, text effect, hero text
+
 **Import:** `import { AnimatedText, AnimatedTextVariant, AnimatedTextUnit } from '@ahrowe/ui'`
 
 **Style variants:** `AnimatedTextVariant.RiseUp` (default) | `AnimatedTextVariant.BlurIn` | `AnimatedTextVariant.Bounce` | `AnimatedTextVariant.Typewriter` | `AnimatedTextVariant.Scramble` | `AnimatedTextVariant.Glitch` | `AnimatedTextVariant.Wave` | `AnimatedTextVariant.Shine` | `AnimatedTextVariant.Highlight`

package/docs/Avatar.md

@@ -2,6 +2,8 @@
 
 **When to use:** User or entity image — profile pictures, comment authors, member lists. Falls back to initials (derived from `name`) or an icon when there's no image, or the image fails to load. Use `AvatarGroup` to stack several with overlap and a `+N` overflow indicator.
 
+**Keywords:** user icon, photo
+
 **Import:** `import { Avatar, AvatarGroup } from '@ahrowe/ui'`
 
 **Theming:** shape defaults to `var(--default-border-radius)`. Set `--avatar-radius` (per `Avatar`/`AvatarGroup` via `style`, or theme-wide via `ThemeProvider`'s `variables`) to override it — `'50%'` for fully circular avatars is the most common case. See [ThemeProvider.md](ThemeProvider.md).

package/docs/Badge.md

@@ -2,6 +2,8 @@
 
 **When to use:** Small count or status indicator — unread counts, notification dots, "new" markers. Use standalone, or wrap an icon/avatar/button to overlay the badge on one of its corners.
 
+**Keywords:** pill
+
 **Import:** `import { Badge, BadgeStyleType, BadgePosition } from '@ahrowe/ui'`
 
 **Style variants:** `BadgeStyleType.Default` | `BadgeStyleType.Primary` (default) | `BadgeStyleType.Success` | `BadgeStyleType.Info` | `BadgeStyleType.Warn` | `BadgeStyleType.Error`

package/docs/BodyEnd.md

@@ -2,6 +2,8 @@
 
 **When to use:** Renders children via a React portal into a `#bodyEnd` DOM node. Use for modals, toasts, tooltips, or any UI that must escape the stacking context of its parent.
 
+**Keywords:** teleport
+
 **Import:** `import { BodyEnd } from '@ahrowe/ui'`
 
 **Setup required:** Add `<div id="bodyEnd"></div>` inside your topmost `ThemeProvider` (usually as the last child) so portalled content inherits the theme's CSS variables.

package/docs/Breadcrumb.md

@@ -2,6 +2,8 @@
 
 **When to use:** A trail showing the current page's position within a hierarchy, with links back to each ancestor, such as a file browser path, a category/subcategory drill-down, or a multi-level settings page. The last item is always rendered as the current page and isn't clickable.
 
+**Keywords:** navigation path
+
 **Import:** `import { Breadcrumb } from '@ahrowe/ui'`
 **Types:** `import type { BreadcrumbItem, BreadcrumbProps } from '@ahrowe/ui'`
 

package/docs/Button.md

@@ -2,6 +2,8 @@
 
 **When to use:** Primary interactive action trigger. Supports loading state, icon, multiple visual styles and sizes.
 
+**Keywords:** cta, action button
+
 **Import:** `import { Button, ButtonStyleType, ButtonSize, ButtonType } from '@ahrowe/ui'`
 
 ```tsx

package/docs/ButtonGroup.md

@@ -2,6 +2,8 @@
 
 **When to use:** Joins a row (or column) of buttons into a single seamless control, merging their borders and rounding only the outer corners. Use for a segmented toggle ("Day / Week / Month"), an icon toolbar (bold/italic/underline), or any set of related actions that should read as one control rather than separate buttons. Purely a layout wrapper, no interaction logic of its own, so any button-like children work, not just `Button`.
 
+**Keywords:** segmented control
+
 **Import:** `import { ButtonGroup, ButtonGroupOrientation } from '@ahrowe/ui'`
 
 **Orientation:** `ButtonGroupOrientation.Horizontal` (default) | `ButtonGroupOrientation.Vertical`

package/docs/Card.md

@@ -2,6 +2,8 @@
 
 **When to use:** Surface container for grouping related content — list items, profile cards, dashboard tiles, product listings.
 
+**Keywords:** panel, box
+
 **Import:** `import { Card, CardStyleType, CardHeader, CardMedia, CardContent, CardActions } from '@ahrowe/ui'`
 
 **Style variants:** `CardStyleType.Elevated` (default) | `CardStyleType.Outlined` | `CardStyleType.Filled`

package/docs/Carousel.md

@@ -2,6 +2,8 @@
 
 **When to use:** A slide track for stepping through a set of items one at a time, with arrows, dots, and drag/swipe support, plus optional autoplay. Slides are plain children, so any content works (images, cards, mixed content), not just a fixed image-gallery shape.
 
+**Keywords:** slider, slideshow
+
 **Import:** `import { Carousel } from '@ahrowe/ui'`
 **Types:** `import type { CarouselProps } from '@ahrowe/ui'`
 

package/docs/Checkbox.md

@@ -2,6 +2,8 @@
 
 **When to use:** Boolean toggle input — settings, multi-select lists, accept terms, feature flags.
 
+**Keywords:** tick box
+
 **Import:** `import { Checkbox } from '@ahrowe/ui'`
 
 ```tsx

package/docs/Chip.md

@@ -2,6 +2,8 @@
 
 **When to use:** Compact tag, label, or filter token — selected items, applied filters, category badges, user avatars with remove.
 
+**Keywords:** pill
+
 **Import:** `import { Chip, ChipContainer, ChipStyleType } from '@ahrowe/ui'`
 
 **Style variants:** `ChipStyleType.Default` (default) | `ChipStyleType.Primary` | `ChipStyleType.Info` | `ChipStyleType.Warn` | `ChipStyleType.Error`

package/docs/ColorPicker.md

@@ -2,6 +2,8 @@
 
 **When to use:** Hex colour selection — theme editors, annotation tools, customisation panels.
 
+**Keywords:** color swatch, palette, hex picker
+
 **Import:** `import { ColorPicker } from '@ahrowe/ui'`
 
 ```tsx

package/docs/ConfigProvider.md

@@ -2,6 +2,8 @@
 
 **When to use:** Set global **default props** for library components once, near the root of your app, instead of repeating the same prop on every instance. If your app always wants floating labels, set `Input.alwaysFloatLabel` here and every `Input` picks it up.
 
+**Keywords:** global defaults
+
 **Import:** `import { ConfigProvider } from '@ahrowe/ui'`
 **Types:** `import type { ComponentDefaults, ConfigProviderProps } from '@ahrowe/ui'`
 

package/docs/ConfirmModal.md

@@ -2,6 +2,8 @@
 
 **When to use:** Confirmation dialog before destructive or irreversible actions — delete, archive, send, overwrite.
 
+**Keywords:** are you sure
+
 **Import:** `import { ConfirmModal } from '@ahrowe/ui'`
 
 **Requires:** `<div id="bodyEnd"></div>` in your HTML (renders via portal).

package/docs/DatePicker.md

@@ -2,6 +2,8 @@
 
 **When to use:** Date selection input — booking forms, birth date fields, date range pickers, deadline selectors. Renders as a text input with a floating label by default; can also be inline or modal.
 
+**Keywords:** calendar picker
+
 **Import:** `import { DatePicker } from '@ahrowe/ui'`
 
 ```tsx

package/docs/Drawer.md

@@ -2,6 +2,8 @@
 
 **When to use:** Inline horizontal panel that collapses and expands by animating its width — side panels, navigation rails, detail/filter panes that slide open beside the main content. Unlike `Modal`, it lives in the normal layout flow (no portal, no backdrop) and pushes/sits beside its siblings.
 
+**Keywords:** collapsible panel
+
 **Import:** `import { Drawer } from '@ahrowe/ui'`
 
 The drawer animates between a **closed** width (default `0`) and an **open** width (default the content's natural width). Its children stay mounted the whole time — when closed they're simply clipped (`overflow-x: hidden`), so state and scroll position are preserved across toggles.

package/docs/DropZone.md

@@ -2,6 +2,8 @@
 
 **When to use:** Drag-and-drop file upload area, optionally click-to-open the native picker. Filters by type / size / count, reads files as raw `File`, base64, or text, and reports rejections. Stateless — it hands accepted files to a callback; you own the file state.
 
+**Keywords:** drag and drop upload
+
 **Import:** `import { DropZone, DropZoneReturnType, DropZoneStatus } from '@ahrowe/ui'`
 **Types:** `import type { DropZoneProps, LoadedFile, DropZoneRejection, DropZoneRenderState } from '@ahrowe/ui'`
 

package/docs/Dropdown.md

@@ -2,6 +2,8 @@
 
 **When to use:** Single-value selection from a list — country pickers, status selectors, category filters, any select-style input.
 
+**Keywords:** combobox
+
 **Import:** `import { Dropdown } from '@ahrowe/ui'`  
 **Types:** `import type { DropdownItem, DropdownProps } from '@ahrowe/ui'`
 

package/docs/EmptyState.md

@@ -2,6 +2,8 @@
 
 **When to use:** Placeholder shown when a list, table, or search result has no items — empty inboxes, no search matches, freshly-created sections.
 
+**Keywords:** no results, blank state
+
 **Import:** `import { EmptyState } from '@ahrowe/ui'`
 
 **Requires:** `@fortawesome/free-solid-svg-icons` peer dependency if using an icon.

package/docs/ErrorBoundary.md

@@ -2,6 +2,8 @@
 
 **When to use:** Wrap any subtree whose render errors shouldn't take down the rest of the app — a widget, a route, a third-party embed, a list row. It catches JavaScript errors thrown while rendering descendants (via React's `getDerivedStateFromError` / `componentDidCatch`) and swaps in a fallback UI instead of unmounting the whole tree. Only errors thrown during rendering, in lifecycle methods, or in constructors of the tree below it are caught — event handlers, async code, and errors in the boundary itself are not, same as any React error boundary.
 
+**Keywords:** crash handler, error catching
+
 **Import:** `import { ErrorBoundary } from '@ahrowe/ui'`
 
 ```tsx

package/docs/Fab.md

@@ -2,6 +2,8 @@
 
 **When to use:** Floating action button — primary screen action (create, add, compose), optionally with a speed-dial sub-menu.
 
+**Keywords:** compose button
+
 **Import:** `import { Fab } from '@ahrowe/ui'`
 
 ```tsx

package/docs/Flip.md

@@ -2,6 +2,8 @@
 
 **When to use:** Flip a front/back pair of content 180°, like a physical playing card. Works completely standalone (it establishes its own `perspective`), or nested inside `Tilt` (with `perspective="none"`, since `Tilt` already establishes one) for a flippable, tilting card. Use it for a reveal-the-back interaction, a card in a hand of cards, or any two-sided toggle that should feel like a physical flip rather than a cross-fade.
 
+**Keywords:** flip card, reveal back, card flip
+
 **Import:** `import { Flip } from '@ahrowe/ui'`
 **Types:** `import type { FlipProps, FlipHandle } from '@ahrowe/ui'`
 

package/docs/FloatingMenu.md

@@ -2,6 +2,8 @@
 
 **When to use:** Contextual popover triggered by any element — action menus, dropdowns with custom content, "more options" menus, date pickers, colour swatches.
 
+**Keywords:** context menu, dropdown menu
+
 **Import:** `import { FloatingMenu } from '@ahrowe/ui'`
 
 ```tsx

package/docs/FormValidator.md

@@ -2,6 +2,8 @@
 
 **When to use:** Track and validate a single form field's value, dirty/touched state, and errors. Pass the instance to any form-connected component (`Input`, `NumberInput`, `Dropdown`, `Checkbox`, `DatePicker`, `IconPicker`, `InputDropdown`, `Textarea`) via its `formValidator` prop — the component then reads the value and surfaces validation errors automatically. For multi-field forms with submit handling, use `FormValidatorGroup` instead.
 
+**Keywords:** form field validation, field validator
+
 **Import:** `import { FormValidator, Validators, useFormValidator } from '@ahrowe/ui'`
 **Types:** `import type { ValidatorFunction, ValidationError } from '@ahrowe/ui'`
 

package/docs/FormValidatorGroup.md

@@ -2,6 +2,8 @@
 
 **When to use:** Manage a whole form — multiple fields, a single submit handler, validate-on-submit, dirty/touched tracking across the form, and mapping server-side errors back onto the right fields. Build it from a map of named `FormValidator` instances. For a single field, use `FormValidator` on its own.
 
+**Keywords:** form submission, whole form validation
+
 **Import:** `import { useFormValidatorGroup, FormValidatorGroup, FormValidator, Validators } from '@ahrowe/ui'`
 **Types:** `import type { FormValidatorGroupOptions, InferGroupValues, MergedValues } from '@ahrowe/ui'`
 

package/docs/Icon.md

@@ -2,6 +2,8 @@
 
 **When to use:** Custom SVG icon set built into the library. Currently only contains the `can` (trash/delete) icon. For most icon needs, use FontAwesome directly via `@fortawesome/react-fontawesome`.
 
+**Keywords:** delete icon, trash icon
+
 **Import:** `import { Icon } from '@ahrowe/ui'`
 
 ```tsx

package/docs/IconPicker.md

@@ -2,6 +2,8 @@
 
 **When to use:** Pick one item from a visual icon/image grid — category selectors, emoji-style pickers, avatar selectors, anything where each option is best represented by an icon or image rather than text alone.
 
+**Keywords:** emoji picker, image grid picker
+
 **Import:** `import { IconPicker } from '@ahrowe/ui'`  
 **Types:** `import type { IconPickerItem, IconPickerProps } from '@ahrowe/ui'`
 

package/docs/IdleManager.md

@@ -2,6 +2,8 @@
 
 **When to use:** Detects user inactivity — auto-logout, session timeout warnings, auto-save triggers, pausing background processes.
 
+**Keywords:** auto logout, inactivity timer
+
 **Import:** `import { IdleManager } from '@ahrowe/ui'`
 
 ```tsx

package/docs/InfiniteBlock.md

@@ -2,6 +2,8 @@
 
 **When to use:** Infinite scroll container — load more items as the user scrolls to the bottom. Use for paginated lists, feeds, search results.
 
+**Keywords:** pagination
+
 **Import:** `import { InfiniteBlock } from '@ahrowe/ui'`
 
 ```tsx

package/docs/Input.md

@@ -2,6 +2,8 @@
 
 **When to use:** Text input with floating label, validation state, and type variants. The primary form input for text, email, password, phone, search, and multiline content.
 
+**Keywords:** text field, form field, text box
+
 **Import:** `import { Input, InputType } from '@ahrowe/ui'`
 
 ```tsx

package/docs/InputDropdown.md

@@ -2,6 +2,8 @@
 
 **When to use:** Combobox-style input — the user can type to filter and also pick from a dropdown list. Use over `Dropdown` when free-text entry or search-to-filter behaviour is needed.
 
+**Keywords:** autocomplete, typeahead
+
 **Import:** `import { InputDropdown } from '@ahrowe/ui'`  
 **Types:** `import type { InputDropdownItem, InputDropdownProps } from '@ahrowe/ui'`
 

package/docs/InteractableDiv.md

@@ -2,6 +2,8 @@
 
 **When to use:** Accessible `<div>` that behaves like a button — click and keyboard (Enter/Space) events, with proper ARIA semantics. Use when you need a custom-styled clickable container that isn't a `<button>`.
 
+**Keywords:** custom button div
+
 **Import:** `import { InteractableDiv } from '@ahrowe/ui'`
 
 ```tsx

package/docs/KanbanBoard.md

@@ -2,6 +2,8 @@
 
 **When to use:** Drag-and-drop board with columns — task management, workflow stages, status boards (e.g. Todo / In Progress / Done).
 
+**Keywords:** task board, trello-style board
+
 **Import:** `import { KanbanBoard, KanbanColumn } from '@ahrowe/ui'`  
 **Types:** `import type { KanbanBoardProps, KanbanColumnDef } from '@ahrowe/ui'`
 

package/docs/KlipyPicker.md

@@ -2,6 +2,8 @@
 
 **When to use:** GIF picker backed by the Klipy API — chat reactions, message composers, content authoring tools. Renders inline by default; pass `isModal` to open inside a `Modal`.
 
+**Keywords:** gif search, meme picker
+
 **Import:** `import { KlipyPicker } from '@ahrowe/ui'`
 
 **Requires:** `<div id="bodyEnd"></div>` in your HTML when `isModal` is used (Modal renders via portal). A Klipy API token — the component ships with a default key, but supply your own `token` prop for production use.

package/docs/Modal.md

@@ -2,6 +2,8 @@
 
 **When to use:** Full overlay dialog — forms, detail views, confirmations, wizards that need to block the rest of the UI.
 
+**Keywords:** popup
+
 **Import:** `import { Modal } from '@ahrowe/ui'`
 
 **Requires:** `<div id="bodyEnd"></div>` in your HTML (renders via portal).

package/docs/NumberInput.md

@@ -2,6 +2,8 @@
 
 **When to use:** Numeric input with formatting — prices, quantities, percentages, phone numbers with separators. Wraps `react-number-format` with the same floating-label style as `Input`.
 
+**Keywords:** currency input, quantity field, numeric field
+
 **Import:** `import { NumberInput } from '@ahrowe/ui'`
 
 ```tsx

package/docs/OptionPicker.md

@@ -2,6 +2,8 @@
 
 **When to use:** Segmented control for picking exactly one option from a small set — view modes, sort directions, simple tab-like switches. Use over `Dropdown` when there are 2-4 options and all should be visible at once.
 
+**Keywords:** toggle group, tab switch
+
 **Import:** `import { OptionPicker } from '@ahrowe/ui'`
 **Types:** `import type { Option, OptionPickerProps } from '@ahrowe/ui'`
 

package/docs/Overscroll.md

@@ -2,6 +2,8 @@
 
 **When to use:** Mobile-style collapsing header that shrinks as the user scrolls — profile pages, detail screens, anywhere a large hero area should yield space to content on scroll.
 
+**Keywords:** parallax header, sticky shrink header
+
 **Import:** `import { Overscroll } from '@ahrowe/ui'`
 
 ```tsx

package/docs/Popover.md

@@ -2,6 +2,8 @@
 
 **When to use:** A floating panel anchored to a trigger — profile cards, quick forms, action menus, help panels, filter dropdowns. Reach for `Tooltip` for plain text hints, `FloatingMenu` for a menu that mirrors the trigger width; use `Popover` when you need free content on any side with an arrow.
 
+**Keywords:** hover card, info panel
+
 **Import:** `import { Popover } from '@ahrowe/ui'`
 
 ```tsx

package/docs/ProgressBar.md

@@ -2,6 +2,8 @@
 
 **When to use:** Visual progress indicator — file uploads, multi-step completion, storage usage, stacked stats (e.g. budget breakdown).
 
+**Keywords:** progress meter, loading bar
+
 **Import:** `import { ProgressBar } from '@ahrowe/ui'`
 
 ```tsx

package/docs/RadioGroup.md

@@ -2,6 +2,8 @@
 
 **When to use:** Single-choice selection from a small, always-visible set of options — plan pickers, shipping methods, yes/no/maybe, settings with 2–5 mutually exclusive choices. Prefer `Dropdown` when the list is long, and `OptionPicker` for a compact segmented control.
 
+**Keywords:** radio buttons
+
 **Import:** `import { RadioGroup, RadioGroupOrientation } from '@ahrowe/ui'`
 **Types:** `import type { RadioOption, RadioGroupProps, RadioValue } from '@ahrowe/ui'`
 

package/docs/RevealLens.md

@@ -2,6 +2,8 @@
 
 **When to use:** A two-layer reveal/magnifier effect — an `overlay` covers a `background` by default, and moving the pointer over the component uncovers the `background` in an area around the cursor. `background`/`overlay` are plain `ReactNode`s, so either can be an image, a solid colour block, or any other component (even an animated one) — swap two images on hover, reveal a crisp image over a blurred version, or magnify any custom content.
 
+**Keywords:** image compare, before after
+
 **Import:** `import { RevealLens } from '@ahrowe/ui'`
 
 ```tsx

package/docs/Ripple.md

@@ -2,6 +2,8 @@
 
 **When to use:** Material-style ink ripple effect on any interactive element — buttons, list items, cards, tiles.
 
+**Keywords:** material ripple, click ripple effect
+
 **Import:** `import { Ripple } from '@ahrowe/ui'`
 
 ```tsx

package/docs/RoomDrawer.md

@@ -2,6 +2,8 @@
 
 **When to use:** Interactive SVG canvas for sketching floor plans — draw rooms as rectangles or polygons, place doors on walls, drag/reshape rooms. Use for venue layouts, seating plans, simple architectural mockups.
 
+**Keywords:** floor plan editor, venue layout editor
+
 **Import:** `import { RoomDrawer } from '@ahrowe/ui'`
 **Types:** `import type { RoomDrawerProps, Tool, Point, RoomData, DoorData } from '@ahrowe/ui'`
 

package/docs/RoomViewer.md

@@ -2,6 +2,8 @@
 
 **When to use:** Display read-only SVG floor plans with a floor selector — venue maps, seating layouts, building directories. Pair with `RoomDrawer` when you also need editing capability.
 
+**Keywords:** floor plan viewer
+
 **Import:** `import { RoomViewer } from '@ahrowe/ui'`  
 **Types:** `import type { RoomViewerFloor, RoomViewerProps } from '@ahrowe/ui'`
 

package/docs/SearchInput.md

@@ -2,6 +2,8 @@
 
 **When to use:** Search field with built-in debouncing and an optional result count line — list filters, search-as-you-type pages. Wraps `Input` (`InputType.Search`) and handles the debounce timer for you.
 
+**Keywords:** text search, search text field, search box
+
 **Import:** `import { SearchInput } from '@ahrowe/ui'`
 
 ```tsx

package/docs/SectionHeader.md

@@ -2,6 +2,8 @@
 
 **When to use:** A reusable heading block for the top of a page, panel, card, or any section — a title with an optional subtitle, a leading icon or thumbnail, and a trailing actions area. Use it wherever you'd otherwise hand-roll a `<h2>` + subtitle + buttons row. Inside a `Card`, the card-scoped `CardHeader` remains available; `SectionHeader` is the standalone, fully slot-customisable version.
 
+**Keywords:** page header, panel title
+
 **Import:** `import { SectionHeader, SectionHeaderSize } from '@ahrowe/ui'`
 **Types:** `import type { SectionHeaderProps, SectionHeaderAction } from '@ahrowe/ui'`
 

package/docs/Skeleton.md

@@ -2,6 +2,8 @@
 
 **When to use:** Content-shaped loading placeholder, shown while real content is being fetched — more polished than a spinner for content-heavy pages (lists, cards, profile headers). Pick the `variant` that matches the shape of what's loading.
 
+**Keywords:** shimmer placeholder, content placeholder
+
 **Import:** `import { Skeleton, SkeletonVariant, SkeletonAnimation } from '@ahrowe/ui'`
 
 **Style variants:** `SkeletonVariant.Text` (default) | `SkeletonVariant.Circle` | `SkeletonVariant.Rectangular`

package/docs/Slider.md

@@ -2,6 +2,8 @@
 
 **When to use:** Let the user pick a number from a continuous or stepped range by dragging a thumb: volume, brightness, price ranges, zoom, quality presets. For free numeric entry use `NumberInput`; for a few discrete options use `OptionPicker` or `RadioGroup`.
 
+**Keywords:** range slider, volume control
+
 **Import:** `import { Slider } from '@ahrowe/ui'`
 **Types:** `import type { SliderProps, SliderMark } from '@ahrowe/ui'`
 

package/docs/SplitButton.md

@@ -2,6 +2,8 @@
 
 **When to use:** A primary action button with a small attached dropdown for closely related secondary actions, e.g. "Save ▾" opening "Save as draft" / "Save and close". Built from `Button`, `ButtonGroup`, and `FloatingMenu` internally, rather than a mechanism of its own.
 
+**Keywords:** dropdown button, button with menu
+
 **Import:** `import { SplitButton } from '@ahrowe/ui'`
 **Types:** `import type { SplitButtonAction, SplitButtonProps } from '@ahrowe/ui'`
 

package/docs/Stepper.md

@@ -2,6 +2,8 @@
 
 **When to use:** Step progress indicator for multi-step forms, onboarding flows, and checkout wizards. Shows completed, current, and upcoming steps, and (vertically) can expand a collapsible body under the active step.
 
+**Keywords:** wizard steps, progress steps
+
 **Import:** `import { Stepper } from '@ahrowe/ui'`
 **Types:** `import type { StepperStep, StepperProps } from '@ahrowe/ui'`
 

package/docs/Sticky.md

@@ -2,6 +2,8 @@
 
 **When to use:** Pin a piece of content to the top of the viewport once the page scrolls past it — section headers, toolbars, filter bars, table headers. The content sticks while its original position is above the fold and releases the moment that position scrolls back into view. A placeholder preserves the original space, so nothing below jumps when it detaches.
 
+**Keywords:** sticky header, pinned toolbar
+
 **Import:** `import { Sticky } from '@ahrowe/ui'`
 
 ```tsx

package/docs/Switch.md

@@ -2,6 +2,8 @@
 
 **When to use:** Sliding boolean toggle — settings panels, feature flags, preference lists. Same shape as `Checkbox` but visually a track + thumb; prefer `Switch` when the effect is immediate (e.g. enabling a setting) and `Checkbox` for selections inside a form that gets submitted.
 
+**Keywords:** toggle switch, on off switch
+
 **Import:** `import { Switch } from '@ahrowe/ui'`
 
 ```tsx

package/docs/TabHeader.md

@@ -2,6 +2,8 @@
 
 **When to use:** A horizontal row of tabs to switch between sibling views or sections — settings panels, dashboards, detail pages. Each tab carries an icon plus an optional title and subtitle.
 
+**Keywords:** tabs navigation, tab bar
+
 **Import:** `import { TabHeader } from '@ahrowe/ui'`
 
 **Mobile behaviour:** On narrow screens (≤ 640px) only the active tab keeps its title and subtitle; every other tab collapses to just its icon.

package/docs/Textarea.md

@@ -2,6 +2,8 @@
 
 **When to use:** Multiline text input — comments, descriptions, notes, code snippets, long-form content. Same API as `Input` but pre-configured for multiline.
 
+**Keywords:** multiline field, comment box, text area
+
 **Import:** `import { Textarea } from '@ahrowe/ui'`
 
 ```tsx

package/docs/ThemeProvider.md

@@ -2,6 +2,8 @@
 
 **When to use:** Required wrapper for the entire component library. Injects all CSS custom properties as inline styles so every component inside can use theme variables. Place it at or near the root of your app.
 
+**Keywords:** theming, dark mode
+
 **Import:** `import { ThemeProvider } from '@ahrowe/ui'`  
 **Types:** `import type { Theme, ThemeVariables } from '@ahrowe/ui'`
 

package/docs/Tilt.md

@@ -2,6 +2,8 @@
 
 **When to use:** Wrap content that should tilt toward the cursor in 3D. Pointer position drives a `rotateX`/`rotateY` tilt that flattens out near the center and ramps up (with an eased, non-linear curve) toward the edges. Use it for clean UI polish, like a row of pricing/plan cards that each tilt independently on hover, or as a low-level primitive for custom animation, like a hand of cards that all react to one shared cursor. Compose with `Flip` for a card that both tilts and flips.
 
+**Keywords:** hover tilt effect, parallax card
+
 **Import:** `import { Tilt, TiltGroup } from '@ahrowe/ui'`
 **Types:** `import type { TiltProps, TiltHandle, TiltGroupProps } from '@ahrowe/ui'`
 

package/docs/TimeInput.md

@@ -2,6 +2,8 @@
 
 **When to use:** Time-of-day selection — appointment times, opening hours, shift starts, reminders. Built on top of `Input`: the user can **type** the time directly (`1430` → `14:30`) or pick it on a **Material-style clock dial**. Renders as a text input with a floating label by default; can also be inline or modal, mirroring `DatePicker`.
 
+**Keywords:** time picker, clock input
+
 **Import:** `import { TimeInput } from '@ahrowe/ui'`
 
 The value is a `"HH:MM"` 24-hour string (e.g. `"09:30"`) everywhere — also when `use24Hour={false}` is set (that flag only changes the dial UI, not the stored value).

package/docs/Timeline.md

@@ -2,6 +2,8 @@
 
 **When to use:** A vertical list of dated events, connected by a line, for audit logs, activity feeds, order status history, and deploy logs. Each entry can carry a title, timestamp, description, an icon or status colour, and arbitrary extra content.
 
+**Keywords:** history log
+
 **Import:** `import { Timeline, TimelineAlignment, TimelineItemStatus } from '@ahrowe/ui'`
 **Types:** `import type { TimelineItem, TimelineProps } from '@ahrowe/ui'`
 

package/docs/Toast.md

@@ -2,6 +2,8 @@
 
 **When to use:** Non-blocking notifications — save confirmations, error alerts, info messages, warnings. Toasts appear in a corner of the screen and auto-dismiss after a configurable duration.
 
+**Keywords:** snackbar, notification popup
+
 **Import:** `import { ToastProvider, showToast } from '@ahrowe/ui'`  
 **Types:** `import type { ToastOptions, ToastType, ToastPosition } from '@ahrowe/ui'`
 

package/docs/Tooltip.md

@@ -2,6 +2,8 @@
 
 **When to use:** Contextual help, info icons, field explanations, error pointers.
 
+**Keywords:** hint, help text, info bubble
+
 **Import:** `import { Tooltip } from '@ahrowe/ui'`
 
 ```tsx

package/docs/VirtualList.md

@@ -2,6 +2,8 @@
 
 **When to use:** Efficiently render large lists or tables — thousands of rows rendered with a virtualised scroll window so only visible rows are in the DOM. Supports column definitions, row selection, multi-select, column visibility toggling, and infinite scroll.
 
+**Keywords:** data table, virtualized table
+
 **Import:** `import { VirtualList } from '@ahrowe/ui'`  
 **Types:** `import type { VirtualListProps, VirtualListColumn, VirtualListHandle } from '@ahrowe/ui'`
 

package/docs/Wizard.md

@@ -2,6 +2,8 @@
 
 **When to use:** Animated step container for multi-step forms and flows. Handles slide transitions between steps. Pair with `Stepper` for a progress indicator.
 
+**Keywords:** step flow
+
 **Import:** `import { Wizard } from '@ahrowe/ui'`
 
 ```tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ahrowe/ui",
-  "version": "0.16.7",
+  "version": "0.16.8",
   "publishConfig": {
     "access": "public"
   },