@cube-dev/ui-kit 0.165.0 → 0.167.0

package/docs/components/navigation/Pagination.md

@@ -1,71 +1,40 @@
 # Pagination
 
-Pagination is the control for moving through a paged collection. It renders a
-bounded run of page buttons, optional first/last jumps, an optional page-size
-selector, and an optional item-range summary.
+Pagination is the control for moving through a paged collection. It renders a bounded run of page buttons, optional first/last jumps, an optional page-size selector, and an optional item-range summary.
 
-It is a pure control: it owns no data. Client-side slicing lives in the
-companion `usePagination` hook, and `ItemTable` composes the two.
+It is a pure control: it owns no data. Client-side slicing lives in the companion `usePagination` hook, and `ItemTable` composes the two.
 
 ## When to Use
 
-- Paging through a list, table, or grid where the user needs to jump around
-  rather than scroll.
-- Cursor pagination with an unknown total — supply `hasNextPage` and omit
-  `total`/`totalPages`, and the control degrades to prev/next.
+- Paging through a list, table, or grid where the user needs to jump around rather than scroll.
+- Cursor pagination with an unknown total — supply `hasNextPage` and omit `total`/`totalPages`, and the control degrades to prev/next.
 - Anywhere you need a page-size selector wired to the same state.
 
-Prefer infinite scroll when the collection is a feed the user skims, and
-pagination when they need stable, addressable positions.
+Prefer infinite scroll when the collection is a feed the user skims, and pagination when they need stable, addressable positions.
 
 ## Component
 
 ### Properties
 
-- **`page`** `number` — Controlled current page, 1-based. Pair with
-  `onPageChange`.
-- **`defaultPage`** `number` (default: `1`) — Initial page for uncontrolled
-  usage.
-- **`onPageChange`** `(page: number) => void` — Never fires with a page outside
-  `1…totalPages` when the total is known.
-- **`total`** `number` — Total items across all pages. Preferred over
-  `totalPages`; it also powers the range summary and the `select` type's range
-  labels.
-- **`totalPages`** `number` — Total pages. Only needed when the item count is
-  genuinely unavailable. Wins over the value derived from `total` + `pageSize`.
+- **`page`** `number` — Controlled current page, 1-based. Pair with `onPageChange`.
+- **`defaultPage`** `number` (default: `1`) — Initial page for uncontrolled usage.
+- **`onPageChange`** `(page: number) => void` — Never fires with a page outside `1…totalPages` when the total is known.
+- **`total`** `number` — Total items across all pages. Preferred over `totalPages`; it also powers the range summary and the `select` type's range labels.
+- **`totalPages`** `number` — Total pages. Only needed when the item count is genuinely unavailable. Wins over the value derived from `total` + `pageSize`.
 - **`pageSize`** `number` — Controlled page size.
-- **`defaultPageSize`** `number` (default: `50`) — Initial page size for
-  uncontrolled usage.
-- **`onPageSizeChange`** `(pageSize: number) => void` — Changing the size also
-  resets to page 1, because the old page index no longer refers to the same
-  items.
-- **`pageSizeOptions`** `number[]` — Supplying this **and** `onPageSizeChange`
-  renders the size selector.
-- **`type`** `'numbers' | 'select' | 'compact'` (default: `'numbers'`) — How the
-  page control is rendered. `numbers` is the default because it is the only mode
-  whose rendered element count is independent of the page count; `select`
-  materializes one entry per page, so above a safety cap the component falls
-  back to `compact` on its own.
-- **`siblingCount`** `number` (default: `1`) — Page buttons either side of the
-  current page.
-- **`boundaryCount`** `number` (default: `1`) — Page buttons pinned at each end.
-  Together with `siblingCount` this bounds the rendered count at
-  `boundaryCount * 2 + siblingCount * 2 + 3`.
+- **`defaultPageSize`** `number` (default: `50`) — Initial page size for uncontrolled usage.
+- **`onPageSizeChange`** `(pageSize: number) => void` — Changing the size also resets to page 1, because the old page index no longer refers to the same items.
+- **`pageSizeOptions`** `number[]` — Supplying this **and** `onPageSizeChange` renders the size selector.
+- **`type`** `'numbers' | 'select' | 'compact'` (default: `'numbers'`) — How the page control is rendered. `numbers` is the default because it is the only mode whose rendered element count is independent of the page count; `select` materializes one entry per page, so above a safety cap the component falls back to `compact` on its own.
+- **`siblingCount`** `number` (default: `1`) — Page buttons either side of the current page.
+- **`boundaryCount`** `number` (default: `1`) — Page buttons pinned at each end. Together with `siblingCount` this bounds the rendered count at `boundaryCount * 2 + siblingCount * 2 + 3`.
 - **`size`** `'small' | 'medium'` (default: `'small'`) — Control size.
 - **`isDisabled`** `boolean` — Disable every control.
-- **`hasNextPage`** `boolean` — Keeps "next" enabled when the total is unknown.
-  Ignored once `total` or `totalPages` is supplied — a known total is always
-  authoritative.
-- **`isCompact`** `boolean` (default: `false`) — Hide the first/last jump
-  buttons.
-- **`summary`** `boolean | ((info: CubeTablePageInfo) => ReactNode)` (default:
-  `false`) — `true` renders the localized `1–50 of 1,204`, with numbers
-  formatted for the active locale. Pass a function for full control.
-- **`labelFormatter`** `(info: CubeTablePageInfo) => ReactNode` — Labels the
-  entries of `type="select"`. Receives the page info with `page` set to the
-  entry being labelled.
-- **`ariaLabel`** `string` — Labels the `<nav>` landmark. Defaults to the
-  localized "Pagination".
+- **`hasNextPage`** `boolean` — Keeps "next" enabled when the total is unknown. Ignored once `total` or `totalPages` is supplied — a known total is always authoritative.
+- **`isCompact`** `boolean` (default: `false`) — Hide the first/last jump buttons.
+- **`summary`** `boolean | ((info: CubeTablePageInfo) => ReactNode)` (default: `false`) — `true` renders the localized `1–50 of 1,204`, with numbers formatted for the active locale. Pass a function for full control.
+- **`labelFormatter`** `(info: CubeTablePageInfo) => ReactNode` — Labels the entries of `type="select"`. Receives the page info with `page` set to the entry being labelled.
+- **`ariaLabel`** `string` — Labels the `<nav>` landmark. Defaults to the localized "Pagination".
 
 #### `CubeTablePageInfo`
 
@@ -112,9 +81,9 @@ These properties allow direct style application without using the `styles` prop:
 
 ### Modifiers
 
-| Modifier | Type | Description |
-| -------- | ---- | ----------- |
-| `size` | `'small' \| 'medium'` | Control size |
+| Modifier | Type                  | Description  |
+| -------- | --------------------- | ------------ |
+| `size`   | `'small' \| 'medium'` | Control size |
 
 ## Examples
 
@@ -204,34 +173,26 @@ Every control is a real `<button>`, so there is nothing bespoke to learn.
 
 ### Screen Reader Support
 
-- The root is a `<nav>` landmark labelled "Pagination" (override with
-  `ariaLabel`).
+- The root is a `<nav>` landmark labelled "Pagination" (override with `ariaLabel`).
 - The current page button carries `aria-current="page"`.
-- Every button has an explicit `aria-label` — "Page 3", "Next page", and so on
-  — so an icon-only button is never announced as unlabelled.
+- Every button has an explicit `aria-label` — "Page 3", "Next page", and so on — so an icon-only button is never announced as unlabelled.
 - The `…` gap is `aria-hidden`; it conveys nothing a screen reader user needs.
 
 ### ARIA Properties
 
-| Property | Applied to |
-| -------- | ---------- |
-| `aria-label` | The `<nav>` and every button |
-| `aria-current="page"` | The current page button |
-| `aria-hidden="true"` | The `…` gap |
+| Property              | Applied to                   |
+| --------------------- | ---------------------------- |
+| `aria-label`          | The `<nav>` and every button |
+| `aria-current="page"` | The current page button      |
+| `aria-hidden="true"`  | The `…` gap                  |
 
 ## Best Practices
 
-- Do: pass `total` rather than `totalPages` when you know the item count — the
-  summary and range labels both need it.
-- Do: use `type="numbers"` (the default) for anything that can grow. It is the
-  only mode whose cost does not scale with the page count.
-- Do: reset to page 1 whenever the underlying query changes (a new search term,
-  a new filter). A stale page index against a smaller result set shows an empty
-  page.
-- Don't: render `type="select"` over a large page count. It builds one
-  collection item per page.
-- Don't: pass both `hasNextPage` and a known total and expect the former to win
-  — it doesn't.
+- Do: pass `total` rather than `totalPages` when you know the item count — the summary and range labels both need it.
+- Do: use `type="numbers"` (the default) for anything that can grow. It is the only mode whose cost does not scale with the page count.
+- Do: reset to page 1 whenever the underlying query changes (a new search term, a new filter). A stale page index against a smaller result set shows an empty page.
+- Don't: render `type="select"` over a large page count. It builds one collection item per page.
+- Don't: pass both `hasNextPage` and a known total and expect the former to win — it doesn't.
 
 ## Suggested Improvements
 

package/docs/components/navigation/Tabs.md

@@ -142,9 +142,7 @@ DOM order is always "bar then panels" — visual order is controlled internally
 
 #### Vertical tabs across types
 
-`narrow` only makes sense for a horizontal strip (it collapses horizontal
-label padding for a denser row). When `placement` is `'left'` or `'right'`,
-`type="narrow"` is coerced to `type="default"`.
+`narrow` only makes sense for a horizontal strip (it collapses horizontal label padding for a denser row). When `placement` is `'left'` or `'right'`, `type="narrow"` is coerced to `type="default"`.
 
 ## Compound Components
 
@@ -744,9 +742,7 @@ Override per-tab/panel:
 
 ### Optimized Lazy Rendering with `renderPanel`
 
-For tabs with expensive content, use the `renderPanel` prop for optimized lazy rendering.
-This prevents content from being evaluated on every parent render - only the active tab's
-content is computed, while inactive tabs use cached content.
+For tabs with expensive content, use the `renderPanel` prop for optimized lazy rendering. This prevents content from being evaluated on every parent render - only the active tab's content is computed, while inactive tabs use cached content.
 
 ```jsx
 <Tabs
@@ -833,15 +829,7 @@ Tabs work seamlessly inside Layout components. When placed in a `Layout` or `Lay
 
 ### Inside a Board (spring-loaded switching)
 
-When `Tabs` is rendered inside a [`Board`](../layout/Board.md), tab
-switching becomes spring-loaded automatically: while a Board widget is being
-dragged, hovering a tab header for a moment opens that tab, so a widget can be
-dropped into it or moved between tabs. This requires no configuration - `Tabs`
-detects the active Board drag and, for its duration, keeps panels mounted so the
-tab a widget is dragged out of (and the board owning the in-flight gesture) is
-not unmounted mid-drag. Spring-loading works with mouse and pen; touch drags
-capture the pointer and do not trigger it. Outside a `Board` this behavior is
-inert.
+When `Tabs` is rendered inside a [`Board`](../layout/Board.md), tab switching becomes spring-loaded automatically: while a Board widget is being dragged, hovering a tab header for a moment opens that tab, so a widget can be dropped into it or moved between tabs. This requires no configuration - `Tabs` detects the active Board drag and, for its duration, keeps panels mounted so the tab a widget is dragged out of (and the board owning the in-flight gesture) is not unmounted mid-drag. Spring-loading works with mouse and pen; touch drags capture the pointer and do not trigger it. Outside a `Board` this behavior is inert.
 
 ## Accessibility
 

package/docs/components/other/Calendar.md

@@ -1,22 +1,14 @@
 # Calendar
 
-`Calendar` renders a month grid for picking a single date. `RangeCalendar` picks
-a contiguous range, and `PeriodCalendar` picks a whole month, quarter or year.
-All three are the panels behind the date fields — [DatePicker](../fields/DatePicker.md),
-DateRangePicker and the
-[period pickers](../fields/PeriodPicker.md) — and they are built on
-React Aria's `useCalendar` / `useRangeCalendar`.
+`Calendar` renders a month grid for picking a single date. `RangeCalendar` picks a contiguous range, and `PeriodCalendar` picks a whole month, quarter or year. All three are the panels behind the date fields — [DatePicker](../fields/DatePicker.md), DateRangePicker and the [period pickers](../fields/PeriodPicker.md) — and they are built on React Aria's `useCalendar` / `useRangeCalendar`.
 
-The header title is the navigation: the month and the year are buttons that open
-a month list and a year list, so reaching a date two years out takes two clicks
-instead of twenty-four.
+The header title is the navigation: the month and the year are buttons that open a month list and a year list, so reaching a date two years out takes two clicks instead of twenty-four.
 
 ## When to Use
 
 - Embedding a calendar directly in a page or panel rather than behind a field
 - Building a custom date input that needs the same grid and states
-- Otherwise, prefer the date fields — they add the text input, label, validation
-  and popover for you
+- Otherwise, prefer the date fields — they add the text input, label, validation and popover for you
 
 ## Component
 
@@ -40,14 +32,13 @@ instead of twenty-four.
 
 #### RangeCalendar
 
-Accepts React Aria's `AriaRangeCalendarProps` (a `{ start, end }` value) plus
-**`hasMonthYearNavigation`**.
+Accepts React Aria's `AriaRangeCalendarProps` (a `{ start, end }` value) plus **`hasMonthYearNavigation`**.
 
 #### PeriodCalendar
 
 - **`picker`** `'month' | 'quarter' | 'year'` — Which period the panel selects
 - **`value`** `DateValue | null` — The selected period, represented by its start date
-- **`minValue`** / **`maxValue`** `DateValue | null` — Range limits; a period is disabled only when *all* of it falls outside
+- **`minValue`** / **`maxValue`** `DateValue | null` — Range limits; a period is disabled only when _all_ of it falls outside
 - **`isDateUnavailable`** `(date: DateValue) => boolean` — Called with the period's start date
 - **`isDisabled`** `boolean`
 - **`autoFocus`** `boolean` — Moves focus into the grid on mount
@@ -61,16 +52,16 @@ Supports [Base properties](../../BaseProperties.md)
 
 Day cells and period cells share one set of modifiers:
 
-| Modifier      | Type      | Description                                          |
-| ------------- | --------- | ---------------------------------------------------- |
-| `selected`    | `boolean` | The cell is part of the current selection            |
-| `current`     | `boolean` | The cell contains today                              |
-| `outside`     | `boolean` | The cell belongs to an adjacent month or decade      |
-| `rangeHover`  | `boolean` | The whole row is highlighted (week mode)             |
-| `pressed`     | `boolean` | The cell is being pressed                            |
-| `focused`     | `boolean` | The cell holds keyboard focus                        |
-| `disabled`    | `boolean` | The cell is outside `minValue` / `maxValue`          |
-| `unavailable` | `boolean` | `isDateUnavailable` returned `true` for the cell     |
+| Modifier      | Type      | Description                                      |
+| ------------- | --------- | ------------------------------------------------ |
+| `selected`    | `boolean` | The cell is part of the current selection        |
+| `current`     | `boolean` | The cell contains today                          |
+| `outside`     | `boolean` | The cell belongs to an adjacent month or decade  |
+| `rangeHover`  | `boolean` | The whole row is highlighted (week mode)         |
+| `pressed`     | `boolean` | The cell is being pressed                        |
+| `focused`     | `boolean` | The cell holds keyboard focus                    |
+| `disabled`    | `boolean` | The cell is outside `minValue` / `maxValue`      |
+| `unavailable` | `boolean` | `isDateUnavailable` returned `true` for the cell |
 
 ## Examples
 
@@ -93,8 +84,7 @@ import { parseDate } from '@internationalized/date';
 
 ### Limited Range
 
-Months and years that fall entirely outside `minValue` / `maxValue` are disabled
-in the month and year lists too, and the navigation arrows stop at the edge.
+Months and years that fall entirely outside `minValue` / `maxValue` are disabled in the month and year lists too, and the navigation arrows stop at the edge.
 
 ```jsx
 <Calendar
@@ -153,32 +143,25 @@ Month and year lists:
 ### Screen Reader Support
 
 - Each panel is a `grid`, labelled `Months` / `Quarters` / `Years`
-- The visible month and year are the calendar's `heading`, and their buttons are
-  the controls that open the lists
+- The visible month and year are the calendar's `heading`, and their buttons are the controls that open the lists
 - Cells expose `aria-selected`; out-of-range periods are `disabled`
 
 ## Best Practices
 
-1. **Do**: bound the calendar when the domain is bounded — the month and year
-   lists disable everything out of range, which is far clearer than letting the
-   user land somewhere unselectable.
+1. **Do**: bound the calendar when the domain is bounded — the month and year lists disable everything out of range, which is far clearer than letting the user land somewhere unselectable.
 
    ```jsx
    <Calendar minValue={today(getLocalTimeZone())} />
    ```
 
-2. **Don't**: reach for `PeriodCalendar` to pick a day. Its value is always the
-   *start* of a period, never an exact date.
+2. **Don't**: reach for `PeriodCalendar` to pick a day. Its value is always the _start_ of a period, never an exact date.
 
-3. **Accessibility**: always give a standalone calendar an `aria-label` — inside
-   a field the label comes from the field.
+3. **Accessibility**: always give a standalone calendar an `aria-label` — inside a field the label comes from the field.
 
 ## Suggested Improvements
 
-- Range calendars paint every day in the range the same way; distinct start/end
-  caps would read better for long ranges.
-- Multi-month (`visibleDuration`) layouts are not implemented; the header falls
-  back to a plain title when a range spans more than one month.
+- Range calendars paint every day in the range the same way; distinct start/end caps would read better for long ranges.
+- Multi-month (`visibleDuration`) layouts are not implemented; the header falls back to a plain title when a range spans more than one month.
 
 ## Related Components
 

package/docs/components/other/CubeLogo.md

@@ -47,7 +47,7 @@ That means the swap costs no re-render, is correct during SSR and before hydrati
 
 ### Pinning a scheme
 
-`@dark` is a *state*, and it is resolved against the **document**. Where the background is known but the document scheme does not describe it, pass `scheme` to pin one mark:
+`@dark` is a _state_, and it is resolved against the **document**. Where the background is known but the document scheme does not describe it, pass `scheme` to pin one mark:
 
 ```jsx
 {/* A fixed-dark panel inside a light app */}

package/docs/components/overlays/Dialog.md

@@ -36,6 +36,7 @@ Supports [Base properties](../../BaseProperties.md)
 Customizes the root element of the dialog.
 
 **Sub-elements:**
+
 - `Dialog` - The main dialog container
 - `Content` - The content area wrapper
 - `Header` - The header section wrapper
@@ -161,6 +162,7 @@ The `mods` property accepts the following modifiers you can override:
 ## Best Practices
 
 1. **Do**: Provide clear titles and actionable buttons
+
    ```jsx
    <Dialog>
      <Header>
@@ -177,6 +179,7 @@ The `mods` property accepts the following modifiers you can override:
    ```
 
 2. **Don't**: Use dialogs for trivial notifications
+
    ```jsx
    {/* Avoid using dialogs for simple success messages */}
    <Dialog>

package/docs/components/overlays/DialogContainer.md

@@ -172,6 +172,7 @@ function ConditionalDialog() {
 ## Best Practices
 
 1. **Do**: Use DialogContainer for dialogs without specific triggers
+
    ```jsx
    <DialogContainer isOpen={showErrorDialog} onDismiss={clearError}>
      <Dialog>
@@ -186,6 +187,7 @@ function ConditionalDialog() {
    ```
 
 2. **Don't**: Use DialogContainer when DialogTrigger is more appropriate
+
    ```jsx
    {/* Prefer DialogTrigger when you have a specific trigger */}
    <DialogContainer isOpen={buttonPressed}>

package/docs/components/overlays/DialogForm.md

@@ -188,7 +188,7 @@ When you need custom action buttons, use `noActions` prop and the render functio
     <>
       <Input.Text name="field1" label="Field 1" />
       <Input.Text name="field2" label="Field 2" />
-      
+
       <ButtonGroup>
         <SubmitButton>Save</SubmitButton>
         <Button onPress={() => {
@@ -263,22 +263,26 @@ See [Dialog Accessibility](./Dialog.md#accessibility) and [Form Accessibility](.
 ## Best Practices
 
 1. **Use useDialogContainer for programmatic control**: Preferred method for better state management
+
    ```jsx
    const dialog = useDialogContainer(MyFormDialog);
    dialog.open({ initialData, onSubmit: handleSubmit });
    ```
 
 2. **Provide clear titles**: Always set a descriptive `title` for context
+
    ```jsx
    <DialogForm title="Edit User Profile" onSubmit={save}>
    ```
 
 3. **Use danger theme for destructive actions**: Apply `danger` for delete/remove operations
+
    ```jsx
    <DialogForm title="Delete Item" danger submitProps={{ label: 'Delete' }}>
    ```
 
 4. **Customize button labels**: Make action buttons specific to the task
+
    ```jsx
    <DialogForm
      title="Create Project"
@@ -288,6 +292,7 @@ See [Dialog Accessibility](./Dialog.md#accessibility) and [Form Accessibility](.
    ```
 
 5. **Handle submission errors**: Implement `onSubmitFailed` for error handling
+
    ```jsx
    <DialogForm
      onSubmit={save}
@@ -307,4 +312,3 @@ See [Dialog Accessibility](./Dialog.md#accessibility) and [Form Accessibility](.
 - [Form](../form/Form.md) - Form component with validation
 - [DialogTrigger](./DialogTrigger.md) - Alternative: manages dialog open/close state
 - [AlertDialog](./AlertDialog.md) - For simple confirmations without forms
-

package/docs/components/overlays/DialogTrigger.md

@@ -36,7 +36,7 @@ DialogTrigger serves as a wrapper around a Dialog and its associated trigger, li
 - **`targetRef`** — The ref of the element the Dialog should visually attach itself to
 - **`styles`** — The style map for the overlay
 - **`shouldCloseOnInteractOutside`** — Function to determine if overlay should close on outside interaction
-- **`shouldRestoreFocus`** `boolean` (default: `true`) — Whether focus returns to the trigger when the dialog closes. Only needed for a surface that claims focus *later* than the restore (async load, entry animation); an action that focuses the surface it opens is already left alone — see [Focus Management](#best-practices)
+- **`shouldRestoreFocus`** `boolean` (default: `true`) — Whether focus returns to the trigger when the dialog closes. Only needed for a surface that claims focus _later_ than the restore (async load, entry animation); an action that focuses the surface it opens is already left alone — see [Focus Management](#best-practices)
 
 ### Base Properties
 
@@ -172,6 +172,7 @@ function ControlledDialog() {
 ## Best Practices
 
 1. **Do**: Provide clear trigger labels
+
    ```jsx
    <DialogTrigger>
      <Button>Edit Profile</Button>
@@ -180,6 +181,7 @@ function ControlledDialog() {
    ```
 
 2. **Don't**: Use vague trigger text
+
    ```jsx
    <DialogTrigger>
      <Button>Click</Button>
@@ -187,7 +189,7 @@ function ControlledDialog() {
    </DialogTrigger>
    ```
 
-3. **Focus Management**: Closing the dialog returns focus to the trigger, unless the action that closed it already moved focus somewhere else — an action that opens a panel or another dialog just focuses that surface, and the trigger leaves it alone. A single `focus()` from a mount effect is enough; no retry loop is needed. Reach for `shouldRestoreFocus={false}` only when the opened surface claims focus *later* than the restore (after an async load or an entry animation), where the trigger would otherwise take focus first and flash.
+3. **Focus Management**: Closing the dialog returns focus to the trigger, unless the action that closed it already moved focus somewhere else — an action that opens a panel or another dialog just focuses that surface, and the trigger leaves it alone. A single `focus()` from a mount effect is enough; no retry loop is needed. Reach for `shouldRestoreFocus={false}` only when the opened surface claims focus _later_ than the restore (after an async load or an entry animation), where the trigger would otherwise take focus first and flash.
 4. **Mobile Considerations**: Use appropriate mobile types for better UX
 5. **Dismissible**: Make modal dialogs dismissible unless absolutely necessary
 

package/docs/components/overlays/Notifications.md

@@ -25,6 +25,7 @@ Supports [Base properties](../../BaseProperties.md)
 Customizes the root element of the notification.
 
 **Sub-elements:**
+
 - `Description` - The description text area below the title
 
 ## Variants
@@ -321,6 +322,7 @@ Collapse is disabled when notifications are present, since notifications require
 ## Best Practices
 
 1. **Do**: Use notifications for action-oriented messages
+
    ```jsx
    notify({
      theme: 'success',
@@ -334,16 +336,19 @@ Collapse is disabled when notifications are present, since notifications require
    ```
 
 2. **Don't**: Use notifications for simple messages without actions — use Toast instead
+
    ```jsx
    // Use toast.success('Copied to clipboard') instead
    ```
 
 3. **Do**: Provide explicit `id` for persistent and stored notifications
+
    ```jsx
    notify({ id: 'deploy:123', persistent: true, ... });
    ```
 
 4. **Do**: Place the dismiss action last for consistent right-side positioning
+
    ```jsx
    notify({
      actions: (
@@ -356,6 +361,7 @@ Collapse is disabled when notifications are present, since notifications require
    ```
 
 5. **Do**: When using `isDismissable: false`, always provide actions — the user needs a way to interact
+
    ```jsx
    // isDismissable: false hides the default "Dismiss" button and Escape key,
    // but actions with closeOnPress (default true) still close the notification.
@@ -372,6 +378,7 @@ Collapse is disabled when notifications are present, since notifications require
    ```
 
 6. **Do**: Return `false` from `onPress` to keep the notification when the user cancels a confirmation flow
+
    ```jsx
    <Notification.Action
      onPress={async () => {

package/docs/components/overlays/Toast.md

@@ -30,6 +30,7 @@ Supports [Base properties](../../BaseProperties.md)
 Customizes the root element of the toast. The toast uses the `Item` component with `type="card"` internally.
 
 **Sub-elements:**
+
 - `Label` - Primary content text
 - `Description` - Secondary content text
 - `Icon` - Icon container
@@ -112,17 +113,20 @@ type ProgressToastEmpty = null | undefined | false | {};
 The hook requires a loading cycle (`isLoading: true`) before any toast becomes visible. If the initial state is not loading, no toast is shown until `isLoading: true` is passed. The hook handles three main scenarios:
 
 **1. Loading State** (`isLoading: true`) — triggers initial appearance
+
 - Toast appears immediately and persists until `isLoading` becomes `false`
 - No auto-dismiss timer while loading
 - This is the only state that can trigger the initial appearance of the toast
 
 **2. Result State** (`isLoading: false` with content)
+
 - Only shown after a prior loading state — ignored if loading was never seen
 - When transitioning from loading to not loading, the toast updates to show the result
 - Result toast auto-dismisses after 3 seconds
 - Theme-based icons are automatically applied (success checkmark, danger X, etc.)
 
 **3. Dismissed** (empty value, no argument, or no title when not loading)
+
 - Pass `null`, `undefined`, `false`, `{}`, or call with no argument to immediately remove any existing toast
 - Also resets the loading gate, so the next toast cycle requires `isLoading: true` again
 - Useful for conditional rendering or cleanup
@@ -132,7 +136,7 @@ The hook requires a loading cycle (`isLoading: true`) before any toast becomes v
 ```jsx
 function SaveButton() {
   const [status, setStatus] = useState('idle');
-  
+
   useProgressToast(
     status === 'saving'
       ? { isLoading: true, title: 'Saving...' }
@@ -142,7 +146,7 @@ function SaveButton() {
           ? { isLoading: false, title: 'Failed to save', theme: 'danger' }
           : null // idle state - no toast
   );
-  
+
   return <Button onPress={() => setStatus('saving')}>Save</Button>;
 }
 ```
@@ -152,7 +156,7 @@ function SaveButton() {
 ```jsx
 function DataLoader() {
   const { data, isLoading, error } = useQuery('data');
-  
+
   useProgressToast(
     isLoading
       ? { isLoading: true, title: 'Loading data...' }
@@ -160,7 +164,7 @@ function DataLoader() {
         ? { isLoading: false, title: 'Error', description: error.message, theme: 'danger' }
         : { isLoading: false, title: 'Data loaded', theme: 'success' }
   );
-  
+
   return <div>{/* content */}</div>;
 }
 ```
@@ -172,8 +176,8 @@ Pass an empty value to prevent the toast from showing or to immediately remove a
 ```jsx
 // Only show toast when needed
 useProgressToast(
-  shouldShowProgress 
-    ? { isLoading: true, title: 'Processing...' } 
+  shouldShowProgress
+    ? { isLoading: true, title: 'Processing...' }
     : null
 );
 
@@ -202,7 +206,7 @@ useProgressToast({
 
 For component-based usage, use `<Toast.Progress>`:
 
-```jsx
+````jsx
 <Toast.Progress
   {...(isLoading
     ? { isLoading: true, title: 'Saving...' }
@@ -271,7 +275,7 @@ Maximum 3 toasts are visible at once. When the limit is exceeded, the oldest toa
 
    ```jsx
    toast.success('Changes saved');
-   ```
+````
 
 2. **Don't**: Use overly long or technical messages
 

package/docs/components/overlays/Tooltip.md

@@ -59,6 +59,7 @@ Supports [Base properties](../../BaseProperties.md)
 Customizes the root element of the tooltip.
 
 **Sub-elements:**
+
 - None
 
 ### Style Properties
@@ -138,6 +139,16 @@ Control where the tooltip appears relative to its trigger:
 </TooltipProvider>
 ```
 
+### Long Content
+
+The tooltip is capped at `36x` wide (or the viewport minus `4x`, whichever is smaller) and wraps its content to stay inside that cap. Runs with no spaces — URLs, tokens, identifiers, error strings — are broken mid-word rather than allowed to overflow the bubble.
+
+```jsx
+<TooltipProvider title="https://cubecloud.example.com/deployments/12345/schema/files/model/cubes/very_long_cube_name.yml">
+  <Button>Hover me</Button>
+</TooltipProvider>
+```
+
 ### Light Theme
 
 Use the light theme for tooltips on dark backgrounds:
@@ -244,6 +255,7 @@ Show tooltip only on focus, not on hover:
 ### Best Practices
 
 1. **Keep it brief** - Tooltips should contain concise, supplementary information
+
    ```jsx
    {/* Good */}
    <TooltipProvider title="Save changes">
@@ -257,6 +269,7 @@ Show tooltip only on focus, not on hover:
    ```
 
 2. **Don't hide critical information** - Never put essential information only in a tooltip
+
    ```jsx
    {/* Good - tooltip adds context */}
    <TooltipProvider title="Permanently delete this item">
@@ -270,6 +283,7 @@ Show tooltip only on focus, not on hover:
    ```
 
 3. **Use appropriate delays** - Default delay (250ms) works for most cases
+
    ```jsx
    {/* Good - default delay */}
    <TooltipProvider title="Info">
@@ -283,6 +297,7 @@ Show tooltip only on focus, not on hover:
    ```
 
 4. **Choose the right pattern** - Use function pattern only when necessary
+
    ```jsx
    {/* Good - standard pattern for active elements */}
    <TooltipProvider title="Click me">
@@ -305,6 +320,7 @@ Show tooltip only on focus, not on hover:
    ```
 
 5. **Provide meaningful context** - Ensure tooltip text is descriptive
+
    ```jsx
    {/* Good */}
    <TooltipProvider title="Export as CSV">