@puckeditor/cli 0.24.0-canary.301a0304

package/dist/docs/api-reference/puck-api.md

@@ -0,0 +1,278 @@
+# PuckApi
+
+`PuckApi` exposes Puck's internals to enable extension and modification to Puck's core behavior. It can be accessed by the [`usePuck`](/docs/api-reference/functions/use-puck) and [`useGetPuck`](/docs/api-reference/functions/use-get-puck) hooks.
+
+> **Note:** `PuckApi` can currently only be accessed through
+> [composition](/docs/extending-puck/composition), [UI
+> overrides](/docs/extending-puck/ui-overrides) or [custom
+> fields](/docs/extending-puck/custom-fields).
+
+## Params
+
+| Param                                                             | Example                                            | Type                                                           |
+| ----------------------------------------------------------------- | -------------------------------------------------- | -------------------------------------------------------------- |
+| [`appState`](#appstate)                                           | `{ data: {}, ui: {} }`                             | [AppState](/docs/api-reference/data-model/app-state)           |
+| [`dictionary`](#dictionary)                                       | `{ "header-publish": "Publish" }`                  | [Dictionary](/docs/api-reference/dictionary)                   |
+| [`dispatch`](#dispatchaction)                                     | `(action: PuckAction) => void`                     | Function                                                       |
+| [`getItemBySelector`](#getitembyselectorselector)                 | `() => ({ type: "Heading", props: {} })`           | Function                                                       |
+| [`getItemById`](#getitembyidid)                                   | `() => ({ type: "Heading", props: {} })`           | Function                                                       |
+| [`getSelectorForId`](#getselectorforidid)                         | `() => ({ index: 0, zone: 'Flex-123:children'  })` | Function                                                       |
+| [`getPermissions`](#getpermissionsparams)                         | `() => ({ delete: true  })`                        | Function                                                       |
+| [`history`](#history)                                             | `{}`                                               | Object                                                         |
+| [`refreshPermissions`](#refreshpermissionsparams)                 | `() => void`                                       | Function                                                       |
+| [`resolveDataById`](#resolvedatabyidid-trigger)                   | `() => void`                                       | Function                                                       |
+| [`resolveDataBySelector`](#resolvedatabyselectorselector-trigger) | `() => void`                                       | Function                                                       |
+| [`selectedItem`](#selecteditem)                                   | `{ type: "Heading", props: {id: "my-heading"} }`   | [ComponentData](/docs/api-reference/data-model/data#content-1) |
+
+### `appState`
+
+The current [application state](/docs/api-reference/data-model/app-state) for this Puck instance.
+
+```tsx
+console.log(appState.data);
+// { content: [], root: {}, zones: {} }
+```
+
+### `dictionary`
+
+The [`dictionary`](/docs/api-reference/dictionary) object passed to [`<Puck>`](/docs/api-reference/components/puck#dictionary).
+
+### `dispatch(action)`
+
+Execute an [action](/docs/api-reference/actions) to mutate the Puck [application state](/docs/api-reference/data-model/app-state).
+
+```tsx
+dispatch({
+  type: "setUi",
+  ui: {
+    leftSideBarVisible: false,
+  },
+});
+```
+
+### `getItemBySelector(selector)`
+
+Get an item's [`ComponentData`](/docs/api-reference/data-model/component-data) by its [selector](/docs/api-reference/data-model/item-selector).
+
+```tsx
+getItemBySelector({
+  index: 0,
+  zone: "Flex-123:children", // The "children" slot field in the component with id "Flex-123"
+});
+// { type: "HeadingBlock", props: {} }
+```
+
+### `getItemById(id)`
+
+Get an item's [`ComponentData`](/docs/api-reference/data-model/component-data) by its component id.
+
+```tsx
+getItemById("HeadingBlock-123");
+// { type: "HeadingBlock", props: {} }
+```
+
+### `getParentById(id)`
+
+Get an item's parent [`ComponentData`](/docs/api-reference/data-model/component-data) using the child component's ID.
+
+### `getSelectorForId(id)`
+
+Get an item's [selector](/docs/api-reference/data-model/app-state#uiitemselector) by its component id.
+
+```tsx
+getSelectorForId("HeadingBlock-123");
+// { index: 0, zone: "Flex-123:children" }
+```
+
+### `getPermissions(params)`
+
+Get global, component or resolved dynamic [permissions](/docs/api-reference/permissions).
+
+```tsx
+getPermissions();
+// { delete: true, edit: true }
+```
+
+#### Params
+
+| Param  | Example                                           | Type    |
+| ------ | ------------------------------------------------- | ------- |
+| `item` | `{ type: "HeadingBlock", props: { id: "1234" } }` | Object  |
+| `root` | `false`                                           | Boolean |
+| `type` | `"HeadingBlock"`                                  | String  |
+
+##### `item`
+
+Specify `item` to retrieve the permissions for a given component instance, resolving any dynamic permissions for that component, as set by the [`resolvePermissions` parameter](/docs/api-reference/configuration/component-config#resolvepermissionsdata-params).
+
+```tsx
+getPermissions({
+  item: { type: "HeadingBlock", props: { id: "Heading-1234" } }, // Get resolved permissions for Heading-1234
+});
+// { delete: false }
+```
+
+The `getPermissions` function will be redefined when after resolving dynamic permissions, so it's generally required to wrap it in a `useEffect` hook:
+
+```tsx
+const [myPermissions, setMyPermissions] = useState(getPermissions());
+
+useEffect(() => {
+  setMyPermissions(getPermissions());
+}, [getPermissions]);
+```
+
+##### `root`
+
+Specify `root` to retrieve the permissions for the `root`, as set by the [`permissions` parameter](/docs/api-reference/configuration/component-config#permissions).
+
+```tsx
+getPermissions({ root: true });
+// { delete: false }
+```
+
+##### `type`
+
+Specify `type` to retrieve the permissions for a given component type, as set by the [`permissions` parameter](/docs/api-reference/configuration/component-config#permissions).
+
+```tsx
+getPermissions({ type: "HeadingBlock" });
+// { delete: false }
+```
+
+### `history`
+
+The `history` API provides programmatic access to the undo/redo [AppState](/docs/api-reference/data-model/app-state) history.
+
+| Param                                 | Example                             | Type                           |
+| ------------------------------------- | ----------------------------------- | ------------------------------ |
+| [`back`](#historyback)                | `() => void`                        | Function                       |
+| [`forward`](#historyforward)          | `() => void`                        | Function                       |
+| [`hasPast`](#historyhaspast)          | `true`                              | Boolean                        |
+| [`hasFuture`](#historyhasfuture)      | `false`                             | Boolean                        |
+| [`histories`](#historyhistories)      | `[{ id: 'abc123', data: {} }]`      | [History](#history-params)\[\] |
+| [`index`](#historyindex)              | `5`                                 | Number                         |
+| [`setHistories`](#sethistories)       | `setHistories: (histories) => void` | Function                       |
+| [`setHistoryIndex`](#sethistoryindex) | `setHistoryIndex: (index) => void`  | Function                       |
+
+#### `history.back()`
+
+A function to move the app state back through the [histories](#historyhistories).
+
+#### `history.forward()`
+
+A function to move the app state forward through the [histories](#historyhistories).
+
+#### `history.hasPast`
+
+A boolean describing whether or not the present app state has past history items.
+
+#### `history.hasFuture`
+
+A boolean describing whether or not the present app state has future history items.
+
+#### `history.histories`
+
+An array describing the recorded history as `History` objects.
+
+##### `History` params
+
+| Param   | Example  | Type                                                 |
+| ------- | -------- | ---------------------------------------------------- |
+| `state` | `{}`     | [AppState](/docs/api-reference/data-model/app-state) |
+| `id`    | `abc123` | String                                               |
+
+###### `state`
+
+The [app state](/docs/api-reference/data-model/app-state) payload for this history entry.
+
+###### `id`
+
+An optional ID for this history entry.
+
+#### `history.index`
+
+The index of the currently selected history in [`history.histories`](#historyhistories)
+
+#### `setHistories`
+
+A function to set the history state.
+
+```tsx
+setHistories([]); // clears all history
+```
+
+#### `setHistoryIndex`
+
+A function to set current history index.
+
+```tsx
+setHistoryIndex(2);
+```
+
+### `refreshPermissions(params)`
+
+Force the permissions to refresh, running all [`resolvePermissions` functions](/docs/api-reference/configuration/component-config#resolvepermissionsdata-params) and skipping the cache.
+
+```tsx
+resolvePermissions(); // Refresh all permissions
+```
+
+#### Params
+
+| Param  | Example                                           | Type    |
+| ------ | ------------------------------------------------- | ------- |
+| `item` | `{ type: "HeadingBlock", props: { id: "1234" } }` | Object  |
+| `root` | `false`                                           | Boolean |
+| `type` | `"HeadingBlock"`                                  | String  |
+
+##### `item`
+
+Specify `item` to refresh the permissions for a given component instance only.
+
+```tsx
+refreshPermissions({
+  item: { type: "HeadingBlock", props: { id: "Heading-1234" } }, // Force refresh the resolved permissions for Heading-1234
+});
+```
+
+##### `root`
+
+Specify `root` to refresh the permissions for the `root` only.
+
+```tsx
+refreshPermissions({ root: true });
+```
+
+##### `type`
+
+Specify `type` to refresh the permissions for all components of a given component type.
+
+```tsx
+refreshPermissions({ type: "HeadingBlock" });
+```
+
+### `resolveDataById(id, trigger)`
+
+Runs a component's [`resolveData`](/docs/api-reference/configuration/component-config#resolvedatadata-params) by id for a given [trigger](/docs/api-reference/configuration/component-config#paramstrigger).
+
+```tsx
+resolveDataById("Heading-1234", "replace");
+```
+
+### `resolveDataBySelector(selector, trigger)`
+
+Runs a component's [`resolveData`](/docs/api-reference/configuration/component-config#resolvedatadata-params) by selector for a given [trigger](/docs/api-reference/configuration/component-config#paramstrigger).
+
+```tsx
+resolveDataBySelector({ zone: "Flex-1234:items", index: 0 }, "insert");
+```
+
+### `selectedItem`
+
+The currently selected item, as defined by `appState.ui.itemSelector`.
+
+```tsx
+console.log(selectedItem);
+// { type: "Heading", props: {id: "my-heading"} }
+```

package/dist/docs/api-reference/theming/action-bar.md

@@ -0,0 +1,32 @@
+# Action bar
+
+Use the following CSS properties for theming the action bar shown when selecting a component.
+
+```css
+.Container {
+  --puck-actionbar-color-bg: darkgreen;
+  --puck-actionbar-color-action-hover: white;
+  --puck-actionbar-radius: 999px;
+}
+```
+
+## CSS properties
+
+Defaults shown as `var(--puck-...)` reference [global tokens](/docs/api-reference/theming/global). See [computed values](/docs/api-reference/theming/computed-values#action-bar) for the values they resolve to.
+
+| Token                                      | Default                                        | Description                   |
+| ------------------------------------------ | ---------------------------------------------- | ----------------------------- |
+| `--puck-actionbar-color-bg`                | `var(--puck-color-surface-inverse)`            | Background color              |
+| `--puck-actionbar-color-text`              | `var(--puck-color-text-inverse)`               | Label and action text color   |
+| `--puck-actionbar-opacity-text`            | `var(--puck-opacity-text-inverse)`             | Label and action text opacity |
+| `--puck-actionbar-color-separator`         | `var(--puck-color-border-inverse)`             | Group separator color         |
+| `--puck-actionbar-color-action-hover`      | `var(--puck-color-interactive-inverse-hover)`  | Action color on hover         |
+| `--puck-actionbar-color-action-active`     | `var(--puck-color-interactive-inverse-active)` | Action color when active      |
+| `--puck-actionbar-color-action-disabled`   | `var(--puck-color-text-inverse)`               | Disabled action color         |
+| `--puck-actionbar-opacity-action-disabled` | `0.54`                                         | Disabled action opacity       |
+| `--puck-actionbar-space-y`                 | `var(--puck-space-1)`                          | Vertical padding              |
+| `--puck-actionbar-space-x`                 | `0`                                            | Horizontal padding            |
+| `--puck-actionbar-radius`                  | `var(--puck-radius-l)`                         | Border radius                 |
+| `--puck-actionbar-font-size`               | `var(--puck-font-size-xxxs)`                   | Label font size               |
+| `--puck-actionbar-action-space`            | `6px`                                          | Action button padding         |
+| `--puck-actionbar-action-size`             | `var(--puck-icon-size-s)`                      | Action icon size              |

package/dist/docs/api-reference/theming/button.md

@@ -0,0 +1,65 @@
+# Button
+
+Use the following CSS properties for theming Puck's buttons, such as the Publish button.
+
+```css
+.Container {
+  --puck-button-radius: 9999px;
+  --puck-button-primary-color-bg: #6d28d9;
+  --puck-button-primary-color-bg-hover: #5b21b6;
+}
+```
+
+## CSS properties
+
+Defaults shown as `var(--puck-...)` reference [global tokens](/docs/api-reference/theming/global). See [computed values](/docs/api-reference/theming/computed-values#button) for the values they resolve to.
+
+| Token                  | Default                | Description   |
+| ---------------------- | ---------------------- | ------------- |
+| `--puck-button-radius` | `var(--puck-radius-m)` | Border radius |
+
+### Sizes
+
+**Medium size (`--puck-button-medium-*`)**
+
+| Token                              | Default                                                        | Description        |
+| ---------------------------------- | -------------------------------------------------------------- | ------------------ |
+| `--puck-button-medium-space-y`     | `calc(var(--puck-space-2) - var(--puck-border-width-regular))` | Vertical padding   |
+| `--puck-button-medium-space-x`     | `calc(20px - var(--puck-border-width-regular))`                | Horizontal padding |
+| `--puck-button-medium-font-weight` | `var(--puck-font-weight-regular)`                              | Label font weight  |
+| `--puck-button-medium-font-size`   | `var(--puck-font-size-xxs)`                                    | Label font size    |
+
+**Large size (`--puck-button-large-*`)**
+
+| Token                             | Default                                                        | Description        |
+| --------------------------------- | -------------------------------------------------------------- | ------------------ |
+| `--puck-button-large-space-y`     | `calc(var(--puck-space-3) - var(--puck-border-width-regular))` | Vertical padding   |
+| `--puck-button-large-space-x`     | `calc(20px - var(--puck-border-width-regular))`                | Horizontal padding |
+| `--puck-button-large-font-weight` | `var(--puck-font-weight-regular)`                              | Label font weight  |
+| `--puck-button-large-font-size`   | `var(--puck-font-size-xxs)`                                    | Label font size    |
+
+### Variants
+
+**Primary variant (`--puck-button-primary-*`)**
+
+| Token                                       | Default                                | Description            |
+| ------------------------------------------- | -------------------------------------- | ---------------------- |
+| `--puck-button-primary-color-bg`            | `var(--puck-color-interactive)`        | Background             |
+| `--puck-button-primary-color-bg-hover`      | `var(--puck-color-interactive-hover)`  | Background on hover    |
+| `--puck-button-primary-color-bg-active`     | `var(--puck-color-interactive-active)` | Background when active |
+| `--puck-button-primary-color-text`          | `var(--puck-color-text-inverse)`       | Text color             |
+| `--puck-button-primary-color-border`        | `transparent`                          | Border color           |
+| `--puck-button-primary-color-bg-disabled`   | `var(--puck-color-bg-disabled)`        | Disabled background    |
+| `--puck-button-primary-color-text-disabled` | `var(--puck-color-text-disabled)`      | Disabled text color    |
+
+**Secondary variant (`--puck-button-secondary-*`)**
+
+| Token                                         | Default                              | Description            |
+| --------------------------------------------- | ------------------------------------ | ---------------------- |
+| `--puck-button-secondary-color-bg`            | `transparent`                        | Background             |
+| `--puck-button-secondary-color-bg-hover`      | `var(--puck-color-interactive-soft)` | Background on hover    |
+| `--puck-button-secondary-color-bg-active`     | `var(--puck-color-interactive-soft)` | Background when active |
+| `--puck-button-secondary-color-text`          | `currentColor`                       | Text color             |
+| `--puck-button-secondary-color-border`        | `currentColor`                       | Border color           |
+| `--puck-button-secondary-color-bg-disabled`   | `var(--puck-color-bg-disabled)`      | Disabled background    |
+| `--puck-button-secondary-color-text-disabled` | `var(--puck-color-text-disabled)`    | Disabled text color    |

package/dist/docs/api-reference/theming/canvas.md

@@ -0,0 +1,20 @@
+# Canvas
+
+Use the following CSS properties for theming the canvas.
+
+```css
+.Container {
+  --puck-canvas-color-bg: #f4f4f8;
+  --puck-canvas-preview-color-bg: #ffffff;
+}
+```
+
+## CSS properties
+
+Defaults shown as `var(--puck-...)` reference [global tokens](/docs/api-reference/theming/global). See [computed values](/docs/api-reference/theming/computed-values#canvas) for the values they resolve to.
+
+| Token                            | Default                           | Description                        |
+| -------------------------------- | --------------------------------- | ---------------------------------- |
+| `--puck-canvas-color-text`       | `var(--puck-color-text)`          | Canvas text color                  |
+| `--puck-canvas-color-bg`         | `var(--puck-color-surface-muted)` | Canvas frame (gutter) background   |
+| `--puck-canvas-preview-color-bg` | `var(--puck-color-surface)`       | Background behind the page preview |

package/dist/docs/api-reference/theming/computed-values.md

@@ -0,0 +1,194 @@
+# Component computed values
+
+These tables document the default computed value each component token resolves to with the default global theme tokens.
+
+## Action bar
+
+| Token                                      | Computed default value |
+| ------------------------------------------ | ---------------------- |
+| `--puck-actionbar-color-bg`                | #181818 |
+| `--puck-actionbar-color-text`              | #ffffff |
+| `--puck-actionbar-opacity-text`            | `0.75`                 |
+| `--puck-actionbar-color-separator`         | #767676 |
+| `--puck-actionbar-color-action-hover`      | #6499cf |
+| `--puck-actionbar-color-action-active`     | #88b0da |
+| `--puck-actionbar-color-action-disabled`   | #ffffff |
+| `--puck-actionbar-opacity-action-disabled` | `0.54`                 |
+| `--puck-actionbar-space-y`                 | `4px`                  |
+| `--puck-actionbar-space-x`                 | `0`                    |
+| `--puck-actionbar-radius`                  | `8px`                  |
+| `--puck-actionbar-font-size`               | `0.75rem` (`12px`)     |
+| `--puck-actionbar-action-space`            | `6px`                  |
+| `--puck-actionbar-action-size`             | `16px`                 |
+
+## Button
+
+| Token                                         | Computed default value      |
+| --------------------------------------------- | --------------------------- |
+| `--puck-button-radius`                        | `4px`                       |
+| `--puck-button-medium-space-y`                | `calc(8px - 1px)` (`7px`)   |
+| `--puck-button-medium-space-x`                | `calc(20px - 1px)` (`19px`) |
+| `--puck-button-medium-font-weight`            | `400`                       |
+| `--puck-button-medium-font-size`              | `0.875rem` (`14px`)         |
+| `--puck-button-large-space-y`                 | `calc(12px - 1px)` (`11px`) |
+| `--puck-button-large-space-x`                 | `calc(20px - 1px)` (`19px`) |
+| `--puck-button-large-font-weight`             | `400`                       |
+| `--puck-button-large-font-size`               | `0.875rem` (`14px`)         |
+| `--puck-button-primary-color-bg`              | #0158ad      |
+| `--puck-button-primary-color-bg-hover`        | #014292      |
+| `--puck-button-primary-color-bg-active`       | #002c77      |
+| `--puck-button-primary-color-text`            | #ffffff      |
+| `--puck-button-primary-color-border`          | `transparent`               |
+| `--puck-button-primary-color-bg-disabled`     | #ababab      |
+| `--puck-button-primary-color-text-disabled`   | #404040      |
+| `--puck-button-secondary-color-bg`            | `transparent`               |
+| `--puck-button-secondary-color-bg-hover`      | #f3f6fb      |
+| `--puck-button-secondary-color-bg-active`     | #f3f6fb      |
+| `--puck-button-secondary-color-text`          | `currentColor`              |
+| `--puck-button-secondary-color-border`        | `currentColor`              |
+| `--puck-button-secondary-color-bg-disabled`   | #ababab      |
+| `--puck-button-secondary-color-text-disabled` | #404040      |
+
+## Canvas
+
+| Token                            | Computed default value |
+| -------------------------------- | ---------------------- |
+| `--puck-canvas-color-text`       | #000000 |
+| `--puck-canvas-color-bg`         | #f5f5f5 |
+| `--puck-canvas-preview-color-bg` | #ffffff |
+
+## Drawer
+
+| Token                                     | Computed default value |
+| ----------------------------------------- | ---------------------- |
+| `--puck-drawer-space`                     | `16px`                 |
+| `--puck-drawer-category-color-text`       | #767676 |
+| `--puck-drawer-category-color-bg-hover`   | #f3f6fb |
+| `--puck-drawer-category-color-text-hover` | #0158ad |
+| `--puck-drawer-category-color-bg-active`  | #e7eef7 |
+| `--puck-drawer-category-font-size`        | `0.75rem` (`12px`)     |
+| `--puck-drawer-category-space`            | `8px`                  |
+| `--puck-drawer-item-color-bg`             | #ffffff |
+| `--puck-drawer-item-color-text`           | #000000 |
+| `--puck-drawer-item-color-border`         | #dcdcdc |
+| `--puck-drawer-item-border-width`         | `1px`                  |
+| `--puck-drawer-item-color-bg-hover`       | #f7faff |
+| `--puck-drawer-item-color-text-hover`     | #0158ad |
+| `--puck-drawer-item-radius`               | `4px`                  |
+| `--puck-drawer-item-font-size`            | `0.875rem` (`14px`)    |
+| `--puck-drawer-item-space`                | `12px`                 |
+
+## Fields
+
+| Token                                        | Computed default value      |
+| -------------------------------------------- | --------------------------- |
+| `--puck-field-color-surface`                 | #ffffff      |
+| `--puck-field-color-bg`                      | #ffffff      |
+| `--puck-field-color-bg-hover`                | #f7faff      |
+| `--puck-field-color-bg-active`               | #f3f6fb      |
+| `--puck-field-color-text`                    | #000000      |
+| `--puck-field-color-text-hover`              | #000000      |
+| `--puck-field-color-text-active`             | #0158ad      |
+| `--puck-field-color-border`                  | #dcdcdc      |
+| `--puck-field-color-border-hover`            | #767676      |
+| `--puck-field-color-border-focus`            | #3479be      |
+| `--puck-field-color-border-dragging`         | #abc7e5      |
+| `--puck-field-color-bg-disabled`             | #f5f5f5      |
+| `--puck-field-color-border-disabled`         | #dcdcdc      |
+| `--puck-field-color-text-disabled`           | #5a5a5a      |
+| `--puck-field-border-width`                  | `1px`                       |
+| `--puck-field-radius`                        | `4px`                       |
+| `--puck-field-font-size`                     | `0.875rem` (`14px`)         |
+| `--puck-field-space-x`                       | `calc(16px - 1px)` (`15px`) |
+| `--puck-field-space-y`                       | `12px`                      |
+| `--puck-field-space-surface-x`               | `calc(16px - 1px)` (`15px`) |
+| `--puck-field-space-surface-y`               | `16px`                      |
+| `--puck-field-label-color-text`              | #5a5a5a      |
+| `--puck-field-label-space-y`                 | `12px`                      |
+| `--puck-field-label-font-size`               | `0.875rem` (`14px`)         |
+| `--puck-field-label-font-weight`             | `600`                       |
+| `--puck-field-label-color-icon`              | #ababab      |
+| `--puck-field-array-add-color-icon`          | #0158ad      |
+| `--puck-field-richtext-menu-color-bg`        | #fafafa      |
+| `--puck-field-richtext-menu-color-separator` | #efefef      |
+| `--puck-field-richtext-menu-space-x`         | `6px`                       |
+| `--puck-field-richtext-menu-space-y`         | `6px`                       |
+| `--puck-field-external-detach-color-bg`      | #fafafa      |
+| `--puck-field-external-detach-color-text`    | #767676      |
+
+## Header
+
+| Token                      | Computed default value |
+| -------------------------- | ---------------------- |
+| `--puck-header-color-bg`   | #ffffff |
+| `--puck-header-color-text` | #000000 |
+
+## Icon button
+
+| Token                                   | Computed default value |
+| --------------------------------------- | ---------------------- |
+| `--puck-iconbutton-radius`              | `4px`                  |
+| `--puck-iconbutton-space`               | `4px`                  |
+| `--puck-iconbutton-color-bg`            | `transparent`          |
+| `--puck-iconbutton-color-bg-hover`      | #efefef |
+| `--puck-iconbutton-color-bg-active`     | #f3f6fb |
+| `--puck-iconbutton-color-icon`          | `currentColor`         |
+| `--puck-iconbutton-color-icon-hover`    | #0158ad |
+| `--puck-iconbutton-color-icon-active`   | #0158ad |
+| `--puck-iconbutton-color-icon-disabled` | #ababab |
+
+## Outline
+
+| Token                                  | Computed default value                                                                             |
+| -------------------------------------- | -------------------------------------------------------------------------------------------------- |
+| `--puck-outline-color-bg-hover`        | #f3f6fb                                                                             |
+| `--puck-outline-color-bg-selected`     | #e7eef7                                                                             |
+| `--puck-outline-color-text`            | #5a5a5a                                                                             |
+| `--puck-outline-color-text-hover`      | #0158ad                                                                             |
+| `--puck-outline-color-text-helper`     | #ababab                                                                             |
+| `--puck-outline-color-icon`            | #ababab                                                                             |
+| `--puck-outline-color-border-hover`    | #e7eef7                                                                             |
+| `--puck-outline-color-border-selected` | #abc7e5                                                                             |
+| `--puck-outline-color-drop-indicator`  | #6499cf                                                                             |
+| `--puck-outline-space-indent`          | `12px`                                                                                             |
+| `--puck-outline-border-width`          | `1px`                                                                                              |
+| `--puck-outline-radius`                | `4px`                                                                                              |
+| `--puck-outline-font-size`             | `0.75rem` (`12px`)                                                                                 |
+| `--puck-outline-font-family`           | `ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace` |
+| `--puck-outline-icon-size`             | `14px`                                                                                             |
+| `--puck-outline-action-size`           | `16px`                                                                                             |
+| `--puck-outline-zone-color-text`       | #767676                                                                             |
+| `--puck-outline-zone-font-size`        | `calc(0.75rem * 0.9)` (`10.8px`)                                                                   |
+
+## Plugin bar
+
+| Token                                  | Computed default value |
+| -------------------------------------- | ---------------------- |
+| `--puck-pluginbar-color-bg`            | #fafafa |
+| `--puck-pluginbar-color-bg-hover`      | #f3f6fb |
+| `--puck-pluginbar-color-text`          | #5a5a5a |
+| `--puck-pluginbar-color-text-hover`    | #0158ad |
+| `--puck-pluginbar-color-text-selected` | #0158ad |
+| `--puck-pluginbar-font-size`           | `0.75rem` (`12px`)     |
+
+## Sidebar
+
+| Token                           | Computed default value |
+| ------------------------------- | ---------------------- |
+| `--puck-sidebar-left-color-bg`  | #fafafa |
+| `--puck-sidebar-right-color-bg` | #ffffff |
+
+## Slot
+
+| Token                                         | Computed default value                                      |
+| --------------------------------------------- | ----------------------------------------------------------- |
+| `--puck-slot-color-bg`                        | color-mix(in srgb, #cfdff0 30%, transparent) |
+| `--puck-slot-color-border`                    | #abc7e5                                      |
+| `--puck-slot-border-width`                    | `2px`                                                       |
+| `--puck-slot-border-style`                    | `dashed`                                                    |
+| `--puck-slot-component-color-overlay`         | color-mix(in srgb, #cfdff0 30%, transparent) |
+| `--puck-slot-component-color-overlay-border`  | #abc7e5                                      |
+| `--puck-slot-component-border-width`          | `2px`                                                       |
+| `--puck-slot-component-color-border-selected` | #abc7e5                                      |
+| `--puck-slot-component-color-placeholder`     | #6499cf                                      |
+| `--puck-slot-component-color-border-dragging` | #cfdff0                                      |

package/dist/docs/api-reference/theming/drawer.md

@@ -0,0 +1,34 @@
+# Drawer
+
+Use the following CSS properties for theming the component drawer, including its category headers and draggable items.
+
+```css
+.Container {
+  --puck-drawer-item-color-bg: #1e1e2e;
+  --puck-drawer-item-color-text: #cdd6f4;
+  --puck-drawer-item-radius: 12px;
+}
+```
+
+## CSS properties
+
+Defaults shown as `var(--puck-...)` reference [global tokens](/docs/api-reference/theming/global). See [computed values](/docs/api-reference/theming/computed-values#drawer) for the values they resolve to.
+
+| Token                                     | Default                                    | Description                          |
+| ----------------------------------------- | ------------------------------------------ | ------------------------------------ |
+| `--puck-drawer-space`                     | `var(--puck-space-4)`                      | Drawer padding                       |
+| `--puck-drawer-category-color-text`       | `var(--puck-color-text-muted)`             | Category header text color           |
+| `--puck-drawer-category-color-bg-hover`   | `var(--puck-color-interactive-soft)`       | Category header background on hover  |
+| `--puck-drawer-category-color-text-hover` | `var(--puck-color-interactive)`            | Category header text color on hover  |
+| `--puck-drawer-category-color-bg-active`  | `var(--puck-color-interactive-subtle)`     | Category header background on active |
+| `--puck-drawer-category-font-size`        | `var(--puck-font-size-xxxs)`               | Category header font size            |
+| `--puck-drawer-category-space`            | `var(--puck-space-2)`                      | Category header padding              |
+| `--puck-drawer-item-color-bg`             | `var(--puck-color-surface)`                | Item background color                |
+| `--puck-drawer-item-color-text`           | `var(--puck-color-text)`                   | Item text color                      |
+| `--puck-drawer-item-color-border`         | `var(--puck-color-border)`                 | Item border color                    |
+| `--puck-drawer-item-border-width`         | `var(--puck-border-width-regular)`         | Item border width                    |
+| `--puck-drawer-item-color-bg-hover`       | `var(--puck-color-interactive-soft-hover)` | Item background on hover             |
+| `--puck-drawer-item-color-text-hover`     | `var(--puck-color-interactive)`            | Item text color on hover             |
+| `--puck-drawer-item-radius`               | `var(--puck-radius-m)`                     | Item border radius                   |
+| `--puck-drawer-item-font-size`            | `var(--puck-font-size-xxs)`                | Item font size                       |
+| `--puck-drawer-item-space`                | `var(--puck-space-3)`                      | Item padding                         |