---

## PlaygroundConfigurator
Interactive playground configurator for component documentation.
Renders a live preview, control panel for props, and generated code block.

**Import:** `import { PlaygroundConfigurator } from '@urbicon-ui/docs';`

### Examples
```svelte
<PlaygroundConfigurator
  componentName="Button"
  controls={controls}
  values={values}
>
  {#snippet children(vals)}
    <Button {...vals}>Click me</Button>
  {/snippet}
</PlaygroundConfigurator>
```

### Api
| Prop | Type | Required | Default | Description |
| --- | --- | :---: | --- | --- |
| children | `Snippet<[Record<string, any>]>` | yes |  | Render snippet receiving the current values map. The argument is typed loosely (`Record<string, any>`) so consumers can spread it onto child components without type-asserting each variant key — the trade-off is that direct property access inside the snippet is also `any`. Use the `values` prop type for typed access.  The `any` here is a pragmatic exception to the project-wide ban: it enables docs-page playgrounds (`<Component {...values} />`) to compile without forcing every consumer to mirror the full prop union locally. |
| controls | `ControlDefinition[]` | yes |  | Control definitions that drive the props panel (dropdown, toggle, text, etc.). |
| values | `TValues` | yes |  | Current control values. Supports `bind:values` for two-way binding. |
| ...HTMLAttributes<HTMLElement> | `HTMLAttributes` | no |  | HTML attributes (excluding: 'children') |
| ...PlaygroundConfiguratorVariantProps | `VariantProps` | no |  | Styling variants from PlaygroundConfiguratorVariantProps |
| class | `string` | no |  | Extra CSS classes merged onto the root element. |
| codeGenerator | `(values: TValues) => string` | no |  | Custom code generator. Falls back to auto-generated Svelte tag syntax. |
| componentName | `string` | no |  | Component name used in the auto-generated code output. |
| onValuesChange | `(values: TValues) => void` | no |  | Fires after any control value changes with the full values map. |
| propDocs | `Record<string, string>` | no |  | Hand-written prop descriptions (from JSDoc). Shown as tooltip behind an info icon. |
| showHeader | `boolean` | no |  | Show the title/subtitle header above the playground. |
| size | `'sm' | 'md' | 'lg'` | no |  | Controls the density of the playground layout – padding, grid columns, and text size. |
| slotClasses | `Partial<Record<'root' | 'header' | 'title' | 'subtitle' | 'container' | 'preview' | 'previewContent' | 'controlsPanel' | 'controlsHeader' | 'controlsGrid' | 'controlItem' | 'controlLabel' | 'controlControl' | 'controlControlCompact' | 'controlHint' | 'actionsBar' | 'helpToggle' | 'codePanel' | 'codeToolbar' | 'codeDisplay', string>>` | no |  | Per-slot class overrides for internal elements. |
| subtitle | `string` | no |  | Descriptive text below the title. |
| title | `string` | no |  | Heading text above the playground panel. |
| unstyled | `boolean` | no |  | Strip all default tv() styles from internal slots. |
| variantKeys | `string[]` | no |  | Prop names originating from tailwind-variants. Shown with a "V" indicator. |

Inherited from:
- Omit<PlaygroundConfiguratorVariantProps, 'size'> (omit-pattern)
- Omit<HTMLAttributes<HTMLElement>, 'children'> (omit-pattern)

### Slots (slotClasses keys)
`root`, `header`, `title`, `subtitle`, `container`, `preview`, `previewContent`, `controlsPanel`, `controlsHeader`, `controlsGrid`, `controlItem`, `controlLabel`, `controlControl`, `controlControlCompact`, `controlHint`, `actionsBar`, `helpToggle`, `codePanel`, `codeToolbar`, `codeDisplay`