@puckeditor/cli 0.24.0-canary.301a0304

package/dist/docs/api-reference/overrides/preview.md

@@ -0,0 +1,19 @@
+# preview
+
+Override the drag-and-drop preview.
+
+```tsx
+const overrides = {
+  preview: ({ children }) => <div>{children}</div>,
+};
+```
+
+## Props
+
+| Prop                    | Example   | Type      |
+| ----------------------- | --------- | --------- |
+| [`children`](#children) | `<div />` | ReactNode |
+
+### `children`
+
+The default node for the preview.

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

@@ -0,0 +1,19 @@
+# puck
+
+Override the Puck children. This is the equivalent of passing in [`children`](/docs/api-reference/components/puck#children) to the [`<Puck>`](/docs/api-reference/components/puck) component.
+
+```tsx
+const overrides = {
+  puck: ({ children }) => <div>{children}</div>,
+};
+```
+
+## Props
+
+| Prop                    | Example   | Type      |
+| ----------------------- | --------- | --------- |
+| [`children`](#children) | `<div />` | ReactNode |
+
+### `children`
+
+The default node for the [`<Puck>`](/docs/api-reference/components/puck) children.

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

@@ -0,0 +1,28 @@
+# Overrides
+
+> **Note:** The overrides API is highly experimental and is likely to experience breaking
+> changes.
+
+An object describing render functions to override the default Puck interface.
+
+```tsx
+const overrides = {
+  header: () => <header>My header</header>,
+};
+```
+
+## Available overrides
+
+- [`actionBar`](/docs/api-reference/overrides/action-bar): Override the action bar.
+- [`componentOverlay`](/docs/api-reference/overrides/component-overlay): Override the overlay shown on hover or selection of a component.
+- [`drawer`](/docs/api-reference/overrides/drawer): Override the component drawer.
+- [`drawerItem`](/docs/api-reference/overrides/drawer-item): Override an item within the component drawer.
+- [`fields`](/docs/api-reference/overrides/fields): Override the fields wrapper.
+- [`fieldLabel`](/docs/api-reference/overrides/field-label): Override the [field labels](/docs/api-reference/configuration/field-label).
+- [`fieldTypes`](/docs/api-reference/overrides/field-types): Override each [field type](/docs/api-reference/fields).
+- [`header`](/docs/api-reference/overrides/header): Override the header.
+- [`headerActions`](/docs/api-reference/overrides/header-actions): Override the header actions. Return a fragment so your items appear inline.
+- [`iframe`](/docs/api-reference/overrides/iframe): Override the root of the iframe. Useful for injecting styles.
+- [`outline`](/docs/api-reference/overrides/outline): Override the outline.
+- [`preview`](/docs/api-reference/overrides/preview): Override the drag-and-drop preview.
+- [`puck`](/docs/api-reference/overrides/puck): Override the Puck children. This is the equivalent of passing in [`children`](/docs/api-reference/components/puck#children) to the [`<Puck>`](/docs/api-reference/components/puck) component.

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

@@ -0,0 +1,55 @@
+# Permissions
+
+Permissions enable the [toggling of Puck features](/docs/integrating-puck/feature-toggling). There are three types of permissions:
+
+1. **Global permissions** are shared across the entire Puck application. Controlled via the `permissions` prop on the `<Puck>` component.
+2. **Component permissions** allow feature control across for all instances of a given component type. Controlled by the `permissions` component config API.
+3. **Dynamic permissions** enable control after each data change, and are ideal for per-instance component permissions. Controlled by the `resolvePermissions` component config API.
+
+## APIs
+
+### Setting permissions
+
+1. Global [`permissions` prop](/docs/api-reference/components/puck#permissions)
+2. Component [`permissions` parameter](/docs/api-reference/configuration/component-config#permissions)
+3. Component [`resolvePermissions` parameter](/docs/api-reference/configuration/component-config#resolvepermissionsdata-params)
+
+### Extending permissions
+
+1. `getPermissions`
+2. `refreshPermissions`
+
+## Supported permissions
+
+| Param                     | Example           | Type    | Default     | Status |
+| ------------------------- | ----------------- | ------- | ----------- | ------ |
+| [`delete`](#delete)       | `delete: true`    | Boolean | `true`      | -      |
+| [`drag`](#drag)           | `drag: true`      | Boolean | `true`      | -      |
+| [`duplicate`](#duplicate) | `duplicate: true` | Boolean | `true`      | -      |
+| [`edit`](#edit)           | `edit: true`      | Boolean | `true`      | -      |
+| [`insert`](#insert)       | `insert: true`    | Boolean | `true`      | -      |
+| [`...custom`](#custom)    | `myPerm: true`    | Boolean | `undefined` | -      |
+
+### `delete`
+
+Enable deletion of components.
+
+### `drag`
+
+Enable component dragging. Disabling this will lock the component in place, but other components can still be dragged around it.
+
+### `duplicate`
+
+Enable duplication of components.
+
+### `edit`
+
+Enable field editing. This is the same as setting `readOnly` to `true` for all fields.
+
+### `insert`
+
+Enable insertion of new components. Disabling this will disable the component list items.
+
+### `...custom`
+
+Custom permissions enable you to control your own functionality when [extending Puck](/docs/extending-puck/composition).

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

@@ -0,0 +1,112 @@
+# Plugin
+
+A plugin is an extension that enhances the capabilities of Puck.
+
+```tsx
+import { Puck } from "@puckeditor/core";
+
+const MyPlugin = {
+  name: "my-plugin", // Globally unique name
+  label: "My plugin", // Plugin rail label
+  icon: <svg />, // Icon for plugin rail
+  render: () => <div>My plugin</div>, // UI for plugin panel
+};
+
+export function Editor() {
+  return (
+    <Puck
+      // ...
+      plugins={[MyPlugin]}
+    />
+  );
+}
+```
+
+## Params
+
+| Prop                                      | Example                                    | Type                                                    | Status |
+| ----------------------------------------- | ------------------------------------------ | ------------------------------------------------------- | ------ |
+| [`icon`](#icon)                           | `icon: <Heading1 />`                       | ReactNode                                               | -      |
+| [`label`](#label)                         | `label: "Audit"`                           | String                                                  | -      |
+| [`fieldTransforms`](#fieldtransforms)     | `fieldTransforms: { text: () => <div /> }` | [FieldTransforms](/docs/api-reference/field-transforms) | -      |
+| [`mobilePanelHeight`](#mobilepanelheight) | `mobilePanelHeight: "min-content"`         | `"toggle" \| "min-content"`                             | -      |
+| [`name`](#name)                           | `name: "audit"`                            | String                                                  | -      |
+| [`render`](#render)                       | `render: () => <div />`                    | `() => ReactElement`                                    | -      |
+| [`overrides`](#overrides)                 | `overrides: { fields: () => <div /> }`     | [Overrides](/docs/api-reference/overrides)              | -      |
+
+## Optional params
+
+### `icon`
+
+React node displayed alongside `label` in the plugin rail.
+
+```tsx
+const MyPlugin = {
+  icon: <MyIcon />,
+};
+```
+
+Puck uses [Lucide icons](https://lucide.dev/icons/). You can use [lucide-react](https://lucide.dev/guide/packages/lucide-react) to choose a similar icon, if desired.
+
+### `label`
+
+Human-readable label shown in the plugin rail. Falls back to `name`.
+
+```tsx
+const MyPlugin = {
+  label: "My plugin", // Human-readable label
+};
+```
+
+### `fieldTransforms`
+
+Transform the value of a field before rendering in the editor. Implements the [Field Transforms API](/docs/api-reference/field-transforms).
+
+```tsx
+const MyPlugin = {
+  fieldTransforms: {
+    // Make all props powered by "text" field pink in the editor
+    text: ({ value }) => <span style={{ color: "hotpink" }}>{value}</span>,
+  },
+};
+```
+
+### `mobilePanelHeight`
+
+Controls how the plugin panel behaves on mobile screens.
+
+- `"toggle"` (default): show a smaller plugin panel with a maximize button to expand it.
+- `"min-content"`: size the panel to the height of its content.
+
+### `name`
+
+A globally unique name for the plugin. When `render` is provided, `name` is required for the plugin to appear within the plugin rail. The currently open plugin is tracked in [`ui.plugin.current`](/docs/api-reference/data-model/app-state#uiplugincurrent).
+
+```tsx
+const MyPlugin = {
+  name: "my-plugin", // Globally unique identifier
+};
+```
+
+### `overrides`
+
+Override the render functions for specific portions of the Puck UI. Implements the [`overrides` API](/docs/api-reference/overrides).
+
+```tsx
+const MyPlugin = {
+  overrides: {
+    // Make all drawer items pink
+    drawerItem: ({ name }) => <div style={{ color: "hotpink" }}>{name}</div>,
+  },
+};
+```
+
+### `render`
+
+Render function for the plugin panel, shown when the plugin is selected in the plugin rail.
+
+```tsx
+const MyPlugin = {
+  render: () => <div>My plugin</div>,
+};
+```

package/dist/docs/api-reference/plugins/blocks-plugin.md

@@ -0,0 +1,57 @@
+# blocksPlugin
+
+Show the component drawer for dragging new components onto the canvas.
+
+```tsx
+import { Puck, blocksPlugin } from "@puckeditor/core";
+
+const blocks = blocksPlugin();
+
+export function Editor() {
+  return <Puck plugins={[blocks]} />;
+}
+```
+
+**This plugin is included by default.** Explicitly including it allows you to reorder plugins in the plugin rail.
+
+## Params
+
+| Param             | Example           | Type      | Status |
+| ----------------- | ----------------- | --------- | ------ |
+| [`icon`](#icon)   | `icon: <Box />`   | ReactNode | -      |
+| [`label`](#label) | `label: "Blocks"` | String    | -      |
+
+## Optional params
+
+### `icon`
+
+React node displayed alongside `label` in the plugin rail. Defaults to a hammer icon.
+
+```tsx
+import { Puck, blocksPlugin } from "@puckeditor/core";
+import { Box } from "lucide-react";
+
+const blocks = blocksPlugin({
+  icon: <Box />,
+});
+
+export function Editor() {
+  return <Puck plugins={[blocks]} />;
+}
+```
+
+### `label`
+
+Label shown in the plugin rail. Defaults to `"Blocks"`.
+
+```tsx
+import { Puck, blocksPlugin } from "@puckeditor/core";
+
+const blocks = blocksPlugin({
+  label: "Components",
+});
+
+export function Editor() {
+  return <Puck plugins={[blocks]} />;
+}
+```

package/dist/docs/api-reference/plugins/fields-plugin.md

@@ -0,0 +1,68 @@
+# fieldsPlugin
+
+Show the fields for the currently selected component. On desktop, the fields will appear in the right-hand sidebar. On mobile, they will appear in the plugin rail.
+
+```tsx
+import { Puck, fieldsPlugin } from "@puckeditor/core";
+
+const fields = fieldsPlugin();
+
+export function Editor() {
+  return <Puck plugins={[fields]} />;
+}
+```
+
+**This plugin is included by default.** Explicitly including it allows you to reorder plugins in the plugin rail, and configure behavior.
+
+## Params
+
+| Param                               | Example                  | Type              | Status |
+| ----------------------------------- | ------------------------ | ----------------- | ------ |
+| [`desktopSideBar`](#desktopsidebar) | `desktopSideBar: "left"` | "left" \| "right" | -      |
+| [`icon`](#icon)                     | `icon: <FormInput />`    | ReactNode         | -      |
+| [`label`](#label)                   | `label: "Fields"`        | String            | -      |
+
+## Optional params
+
+### `desktopSideBar`
+
+Display the plugin in the left or right sidebar on desktop. This field is `"right"` by default.
+
+```tsx
+const fields = fieldsPlugin({
+  desktopSideBar: "left",
+});
+```
+
+### `icon`
+
+React node displayed alongside `label` in the plugin rail. Defaults to a form input icon.
+
+```tsx
+import { Puck, fieldsPlugin } from "@puckeditor/core";
+import { Form } from "lucide-react";
+
+const fields = fieldsPlugin({
+  icon: <Form />,
+});
+
+export function Editor() {
+  return <Puck plugins={[fields]} />;
+}
+```
+
+### `label`
+
+Label shown in the plugin rail. Defaults to `"Fields"`.
+
+```tsx
+import { Puck, fieldsPlugin } from "@puckeditor/core";
+
+const fields = fieldsPlugin({
+  label: "Properties",
+});
+
+export function Editor() {
+  return <Puck plugins={[fields]} />;
+}
+```

package/dist/docs/api-reference/plugins/legacy-side-bar-plugin.md

@@ -0,0 +1,54 @@
+# legacySideBarPlugin
+
+Hide the plugin rail and show a single sidebar with stacked "Components" and "Outline" sections. This will not affect mobile behavior.
+
+```tsx
+import { Puck, legacySideBarPlugin } from "@puckeditor/core";
+
+const legacySideBar = legacySideBarPlugin();
+
+export function Editor() {
+  return <Puck plugins={[legacySideBar]} />;
+}
+```
+
+## Params
+
+| Param                                 | Example                         | Type   | Status |
+| ------------------------------------- | ------------------------------- | ------ | ------ |
+| [`componentsLabel`](#componentslabel) | `componentsLabel: "Components"` | String | -      |
+| [`outlineLabel`](#outlinelabel)       | `outlineLabel: "Outline"`       | String | -      |
+
+## Optional params
+
+### `componentsLabel`
+
+Title shown above the component drawer section. Defaults to `"Components"`.
+
+```tsx
+import { Puck, legacySideBarPlugin } from "@puckeditor/core";
+
+const legacySideBar = legacySideBarPlugin({
+  componentsLabel: "Components",
+});
+
+export function Editor() {
+  return <Puck plugins={[legacySideBar]} />;
+}
+```
+
+### `outlineLabel`
+
+Title shown above the outline section. Defaults to `"Outline"`.
+
+```tsx
+import { Puck, legacySideBarPlugin } from "@puckeditor/core";
+
+const legacySideBar = legacySideBarPlugin({
+  outlineLabel: "Layers",
+});
+
+export function Editor() {
+  return <Puck plugins={[legacySideBar]} />;
+}
+```

package/dist/docs/api-reference/plugins/outline-plugin.md

@@ -0,0 +1,57 @@
+# outlinePlugin
+
+Show an outline of the components currently on the canvas.
+
+```tsx
+import { Puck, outlinePlugin } from "@puckeditor/core";
+
+const outline = outlinePlugin();
+
+export function Editor() {
+  return <Puck plugins={[outline]} />;
+}
+```
+
+**This plugin is included by default.** Explicitly including it allows you to change the order in the plugin rail.
+
+## Params
+
+| Param             | Example            | Type      | Status |
+| ----------------- | ------------------ | --------- | ------ |
+| [`icon`](#icon)   | `icon: <Layers />` | ReactNode | -      |
+| [`label`](#label) | `label: "Outline"` | String    | -      |
+
+## Optional params
+
+### `icon`
+
+React node displayed alongside `label` in the plugin rail. Defaults to a layers icon.
+
+```tsx
+import { Puck, outlinePlugin } from "@puckeditor/core";
+import { ListTree } from "lucide-react";
+
+const outline = outlinePlugin({
+  icon: <ListTree />,
+});
+
+export function Editor() {
+  return <Puck plugins={[outline]} />;
+}
+```
+
+### `label`
+
+Label shown in the plugin rail. Defaults to `"Outline"`.
+
+```tsx
+import { Puck, outlinePlugin } from "@puckeditor/core";
+
+const outline = outlinePlugin({
+  label: "Layers",
+});
+
+export function Editor() {
+  return <Puck plugins={[outline]} />;
+}
+```