### Install dependencies

Source: https://github.com/lookbook-hq/lookbook/blob/main/CONTRIBUTING.md

Commands to install necessary Ruby and JavaScript dependencies for development.

```bash
bundle install
```

```bash
bundle exec rspec
```

```bash
bundle exec appraisal install
```

```bash
npm install
```

```bash
npm install -g parcel
```

--------------------------------

### Start Bridgetown Development Server

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/README.md

Use this command to start the Bridgetown development server for Lookbook.

```shell
bin/bridgetown start
```

--------------------------------

### Install Dependencies with Bundler

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_extend/contributing.md

Use this command to install project dependencies. Ensure you have Bundler installed.

```bash
bundle install
```

--------------------------------

### ViewComponent Preview Class Example

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/components/view_component.md

This is an example of a ViewComponent preview class that extends `ViewComponent::Preview`. Lookbook automatically recognizes and renders these previews.

```ruby
class ExampleComponentPreview < ViewComponent::Preview
  def with_default_title
    render(ExampleComponent.new(title: "Example component default"))
  end
end
```

--------------------------------

### Enable alphabetical sorting for examples

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/previews/navigation.md

Set the sort_examples configuration option to true in your application configuration to sort preview examples alphabetically.

```rb
# config/application.rb
config.lookbook.sort_examples = true
```

--------------------------------

### Annotated Preview File Example

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/previews/annotations.md

This example demonstrates how to use various annotations like @label, @display, @param, and @hidden within a Lookbook preview class to control rendering and navigation.

```ruby
# @label Basic Button
# @display bg_color "#fff"
class ButtonComponentPreview < Lookbook::Preview

  # Primary button
  # ?-------------
  # This is the button style you should use for most things.
  #
  # @label Primary
  def default
    render ButtonComponent.new do
      "Click me"
    end
  end

  # Button with icon
  # ?-------------
  # This example uses dynamic preview parameters
  # which can be edited live in the Lookbook UI
  #
  # @param text
  # @param icon select [heart, cog, alert]
  def icon(text: "Spread the love", icon: "heart")
    render ButtonComponent.new(icon: icon) do
      text
    end
  end

  # Inverted button
  # ?-------------
  # For light-on-dark screens
  #
  # @display bg_color "#000"
  def secondary
    render ButtonComponent.new(style: :inverted) do
      "Click me"
    end
  end

  # Unicorn button
  # ?-------------
  # This button style is still a **work in progress**
  # and so has been hidden from the navigation.
  #
  # @hidden
  def unicorn
    render ButtonComponent.new do
      "Click me"
    end
  end

  # @!group More examples

  def short_text
    render ButtonComponent.new do
      "Go"
    end
  end

  def long_text
    render ButtonComponent.new do
      "Click here to do this thing because it's the best way to do it"
    end
  end

  def emoji_text
    render ButtonComponent.new do
      "👀📗"
    end
  end

  # @!endgroup
end
```

--------------------------------

### Example URL for Dynamic Parameters

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/previews/index.md

Demonstrates how to construct a URL to pass a specific value for a dynamic parameter to a preview scenario.

```text
/lookbook/inspect/example/with_dynamic_title?title=Custom+title
```

--------------------------------

### Configure Tab Frontmatter

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/pages/index.md

Examples of setting tab labels and ordering priority using frontmatter.

```yaml
---
label: Website
---

Tab page content here...
```

```yaml
---
label: Website
priority: 1
---

Tab page content here...
```

--------------------------------

### Notes Panel Content Example

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/previews/annotations.md

This example illustrates how regular comment text, not starting with a tag, is rendered as Markdown in the Notes panel for a preview.

```ruby
class ProfileCardComponentPreview < Lookbook::Preview 

  # Profile Card
  # ?-------------
  # Use the default profile card component whenever you need to represent a user.
  #
  # All this text will be included in the Notes panel for this preview.
  def default
  end
end
```

--------------------------------

### Order Pages and Directories

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/pages/index.md

Example of using numeric prefixes to control the navigation order of pages and directories.

```text
test/components/docs/
  ├── 01_overview.md.erb
  ├── 02_implementation_notes/
  │   ├── 01_slots.md.erb
  │   └── 02_html_attributes.md.erb
  └── 03_helpful_examples/
      ├── 01_basic_components.md.erb
      └── 02_complex_components.md.erb
```

--------------------------------

### GET /previews.json

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/json_endpoints.md

Retrieves a list of all previews and their associated scenarios in JSON format.

```APIDOC
## GET /previews.json

### Description
This endpoint returns a JSON array containing all previews and their scenarios. Each preview object includes its name and a list of scenarios, where each scenario has a name and an inspect path.

### Method
GET

### Endpoint
/previews.json

### Response
#### Success Response (200)
- **Array** - A list of preview objects.
  - **name** (string) - The name of the preview.
  - **scenarios** (Array) - A list of scenarios for the preview.
    - **name** (string) - The name of the scenario.
    - **inspect_path** (string) - The path to inspect the scenario.

#### Response Example
```json
[
  {
    "name": "annotated",
    "scenarios":
      [
        {
          "name": "default",
          "inspect_path": "/lookbook/inspect/foo/bar/annotated/default"
        }
      ]
  }
]
```
```

--------------------------------

### Panel View Partial Example

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_extend/panels/index.md

This is an example of a view partial for a custom inspector panel. It displays information about the current preview, its file path, and the number of scenarios.

```erb
<div class="lookbook-panel">
  <h2>Some information</h2>
  <ul>
    <li>You are looking at the '<%%= preview.label %>' preview</li>
    <li>The preview file path is: '<%%= preview.full_path %>'<li>
    <li>There are <%%= scenarios.size %> scenarios in this preview<li>
  </ul>
</div>
```

--------------------------------

### Define Page Directory Structure

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/pages/index.md

Example directory structure for organizing documentation pages within the project.

```text
test/components/docs/
  ├── overview.md.erb
  ├── best_practices.md.erb
  └── branding/
      ├── logos.md.erb
      └── themes.md.erb
```

--------------------------------

### Default Preview Template

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/previews/index.md

An example of a default template file for a 'default' scenario, showing how to render a component within an HTML structure.

```erb
<!-- test/components/previews/cell_component_preview/default.html.erb -->
<table class="table">
  <tbody>
    <tr>
      <%%= render CellComponent.new %>
    </tr>
  </tbody>
</div>
```

--------------------------------

### Create Multiple Groups Within a Preview Class

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/previews/groups.md

This example illustrates how to define multiple distinct groups of scenarios within a single preview class. Each scenario can only belong to one group, and any scenarios not tagged with `@!group` will appear individually.

```ruby
class ExampleComponentPreview < ViewComponent::Preview
  # @!group First Group

  def first_scenario
    # ...
  end 

  def second_scenario
    # ...
  end 

  # @!endgroup

  # @!group Second Group

  def third_scenario
    # ...
  end 

  def fourth_scenario
    # ...
  end 

  # @!endgroup

  def not_in_a_group
    # ...
  end 
end
```

--------------------------------

### Create a Markdown Page with Frontmatter

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/pages/index.md

Example of a markdown page file using YAML frontmatter and ERB syntax.

```markdown
---
title: An example page
label: Nice example
---

This is an example page. If it has a `.md.erb` file extension its
contents will be run through a Markdown parser/renderer before display.

Fenced code blocks are fully supported and will be highlighted appropriately.

ERB can be used in here.
The template will be rendered **before** being parsed as Markdown.

You can can access data about the page using the `@page` variable.
The title of this page is "<%%= @page.title %>".
```

--------------------------------

### Set Up Appraisal for Gemset Testing

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_extend/contributing.md

Appraisal is used to test Lookbook against different versions of its dependencies. Run this command after installing gems.

```bash
bundle exec appraisal install
```

--------------------------------

### Param Tag Format and Options

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/previews/params.md

Understand the format of the `@param` tag, which includes the parameter name, input type, an optional description, and optional options for customization. This example shows how to define parameters for a ButtonComponent.

```ruby
@param <name> <input_type> <description?> <opts?>
```

```ruby
class ButtonComponentPreview < ViewComponent::Preview
  # @param arrow toggle
  # @param theme select { choices: [primary, secondary, danger] }
  # @param content text "The text to display in the button"
  def default(content: 'Click me', theme: 'primary', arrow: true)
    render Elements::ButtonComponent.new(theme: theme, arrow: arrow) do
      content
    end
  end
end
```

--------------------------------

### Example Standalone Preview Layout Template

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/previews/layouts.md

This ERB template demonstrates a standalone preview layout. It utilizes display variables for dynamic background color and max-width, allowing per-preview customization.

```erb
<!DOCTYPE html>
<html style="background-color: <%%= params.dig(:lookbook, :display, :bg_color) || "white" %>">
<head>
  <title>Component Preview</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <%%= stylesheet_pack_tag 'application', media: 'all' %>
  <%%= javascript_pack_tag 'application' %>
</head>
<body style="padding: 20px">
  <div style="
    margin-left: auto;
    margin-right: auto;
    max-width: <%%= params.dig(:lookbook, :display, :max_width) || "100%" %>
  ">
    <%%= yield %> <!-- rendered preview will be injected here -->
  </div>
</body>
</html>
```

--------------------------------

### Render a select input template

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_extend/inputs/templates.md

Example of a system-provided select param input template using standard Rails form helpers.

```erb
<%%= select_tag(name,
  options_for_select(choices || [], value),
  **input_options,
  "x-model": "value"
) %>
```

--------------------------------

### Supply Dynamic Params via URL

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/previews/params.md

Provide values for dynamic parameters by appending them to the preview URL as query parameters. This example demonstrates how to set a custom title for the `with_dynamic_title` preview.

```http
/lookbook/inspect/example/with_dynamic_title?title=Custom+title
```

--------------------------------

### Group Scenarios Using @!group Tags

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/previews/groups.md

This example demonstrates grouping the 'small', 'medium', and 'big' scenarios for the HeaderComponent using `@!group Sizes` and `@!endgroup` tags. Only the 'long_text' scenario remains ungrouped, resulting in a single preview for the size variations and a separate preview for the long text.

```ruby
class HeaderComponentPreview < ViewComponent::Preview
  # @!group Sizes
  
  def small
    render HeaderComponent.new(size: 20) do
      "Small header"
    end
  end 
  
  def medium
    render :HeaderComponent.new(size: 30) do
      "Medium header"
    end
  end
  
  def big
    render HeaderComponent.new(size: 44) do
      "Big header"
    end
  end

  # @!endgroup
  
  def long_text
    render HeaderComponent.new do
      "This is a header with some long text within it that keeps on going on"
    end
  end
end
```

--------------------------------

### Identify Template Errors

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/troubleshooting.md

Example of the error message triggered by incompatible link_to helpers in preview layouts.

```text
No route matches {:action=>"preview", :controller=>"lookbook/previews", :path=>"path_to/current_component"}
```

--------------------------------

### Tag Usage Example

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/previews/annotations.md

This snippet shows how to apply @display and @param tags to a method, along with a @label tag to the class, to control preview rendering and parameter definition.

```ruby
# @label Basic Button
class ButtonComponentPreview < Lookbook::Preview
  # @display bg_color red
  # @param icon select [heart, cog, alert]
  def icon(icon: "heart")
    render ButtonComponent.new(icon: icon) do
      "Spread the love"
    end
  end
end
```

--------------------------------

### Define Dynamic Params in Preview Class

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/previews/params.md

Set dynamic values from URL parameters by defining them as arguments in your preview class. This example shows how to define a dynamic title for an ExampleComponent.

```ruby
class ExampleComponentPreview < Lookbook::Preview
  def with_dynamic_title(title: "Example component default")
    render(ExampleComponent.new(title: title))
  end
end
```

--------------------------------

### Define a Custom Label for a Scenario Group

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/previews/groups.md

This snippet shows how to assign a custom label, 'Some Nice Examples', to a group of scenarios using the `@!group <label>` syntax. If no label is provided, the name of the first scenario in the group is used.

```ruby
class ExampleComponentPreview < ViewComponent::Preview
  # @!group Some Nice Examples

  def first_scenario
    # ...
  end 

  def second_scenario
    # ...
  end 

  # @!endgroup
end
```

--------------------------------

### Use Color Scales for Theming

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/ui/theming.md

Supply base and accent color scales to Lookbook for integrated theming. This example defines an emerald color scheme by overriding individual shade variables.

```ruby
# Emerald colour scheme (https://tailwindcss.com/docs/customizing-colors#:~:text=%2314532d-,Emerald,-50)
config.lookbook.ui_theme_overrides = {
  accent_50: "#ecfdf5",
  accent_100: "#d1fae5",
  accent_200: "#a7f3d0",
  accent_300: "#6ee7b7",
  accent_400: "#34d399",
  accent_500: "#10b981",
  accent_600: "#059669",
  accent_700: "#047857",
  accent_800: "#065f46",
  accent_900: "#064e3b",
}
```

--------------------------------

### Override UI Theme Colors

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/ui/theming.md

Customise specific UI elements by overriding color variables using the `ui_theme_overrides` config option. This example sets the header background to hotpink and navigation icon stroke to rebeccapurple.

```ruby
config.lookbook.ui_theme_overrides = {
  header_bg: "#ff69b4", # hotpink
  nav_icon_stroke: "rebeccapurple"
}
```

--------------------------------

### Configure Editable Preview Params with @param

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/previews/params.md

Use the `@param` tag to generate form controls for method arguments, allowing users to edit preview parameters directly within the Lookbook UI. This example configures an editable text field for the `text` argument.

```ruby
class HeaderComponentPreview < ViewComponent::Preview
  # @param text
  def default(text: "Some header text")
    render Elements::HeaderComponent.new do
      text
    end
  end
end
```

--------------------------------

### Add Panel with Options

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_extend/panels/index.md

Demonstrates adding a panel with various options including label, hotkey, copy content, and local variables. Options can be static values or lambda functions.

```ruby
Lookbook.add_panel(:info, "path/to/view_partial", {
  label: "New Panel",
  hotkey: "ctrl.n",
  copy: "Content to be copied",
  locals: {
    last_updated: '2022-03-02'
  }
})
```

--------------------------------

### Configuring Preview Controller

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/previews/index.md

Extend previews to add authentication, authorization, before actions, etc., by configuring the preview controller.

```ruby
config.lookbook.preview_controller = "MyPreviewController"
```

--------------------------------

### Add Optional Dependencies for Live UI Updates

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/installation.md

Include the `listen` and `actioncable` gems in your `Gemfile`'s `:development` group to enable live UI updates in Lookbook. These are optional; without them, manual UI refreshes are required.

```ruby
group :development do
  gem "listen"
  gem "actioncable"
end
```

--------------------------------

### Equivalent Data Setting Syntaxes

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_extend/other/data.md

Demonstrates equivalent ways to set a property on the Lookbook data object using dot notation, symbol hash key, or string hash key.

```ruby
# All the following statements are equivalent:
Lookbook.data.company_name = "My Company"
Lookbook.data[:company_name] = "My Company"
Lookbook.data["company_name"] = "My Company"
```

--------------------------------

### ViewComponent Preview Controller Configuration

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/previews/index.md

If using ViewComponent, set the controller option via `view_component.previews.controller`.

```ruby
config.view_component.previews.controller = "MyPreviewController"
```

--------------------------------

### Lifecycle Hooks Overview

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_extend/other/hooks.md

Documentation regarding the available lifecycle hooks in Lookbook and how to register callbacks.

```APIDOC
## Lifecycle Hooks

### Description
Lifecycle hooks allow for triggering actions outside of Lookbook. Callbacks are registered during the Lookbook installation configuration.

### Usage
All hook callback blocks receive the `Lookbook` application object as the first argument. Some hooks may provide additional arguments depending on the specific lifecycle event.

### Registration
Callbacks are registered via the Lookbook configuration block:

```ruby
Lookbook.configure do |config|
  config.before_render do |lookbook|
    # Logic here
  end
end
```
```

--------------------------------

### Type Casting with @param Options (Symbol)

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/previews/params.md

Achieves the same Symbol type casting for the 'theme' parameter as the previous example, but uses the 'value_type' option within the @param tag.

```ruby
# @param theme select { choices: [primary, secondary, danger], value_type: "Symbol" }
def default(theme: :primary)
  render Elements::ButtonComponent.new(theme: theme) do
    'Click me'
  end
end
```

--------------------------------

### Rendering Phlex Views in Previews

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/previews/index.md

Render Phlex views by passing an instance of the required view class to the `render` call.

```ruby
# test/components/previews/card_view_preview.rb
class CardViewPreview < Lookbook::Preview
  def default
    render CardView.new(title: "Welcome!")
  end

  def with_block_content
    render CardView.new do
      tag.em "Wecome via block content"
    end
  end
end
```

--------------------------------

### Override Display Option in Preview

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/previews/display.md

Override a dynamic display option for a specific preview example using the @display tag in Ruby. This value is not persisted across other previews.

```ruby
class FooComponentPreview < ViewComponent::Preview
  # @display theme light
  def default
  end
end

```

--------------------------------

### Defining Component Scenarios

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/previews/index.md

Illustrates how to define multiple scenarios within a preview class. Each public method represents a distinct scenario that Lookbook will render.

```ruby
# test/components/previews/button_component_preview.rb
class ButtonComponentPreview < Lookbook::Preview
  def standard
    render ButtonComponent.new(text: "Click me")
  end

  def with_icon
    render ButtonComponent.new(text: "Launch spaceship", icon: "rocket")
  end

  private

  # Private methods are ignored and will not show up in the navigation
  def not_a_scenario
    # ...
  end
end
```

--------------------------------

### Custom Input Template - ERB

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_extend/inputs/index.md

Define the HTML structure for your custom input type in an ERB template. This example creates a URL input with a fixed 'https://' prefix.

```erb
<div>
  <strong>https://</strong>
  <%%= text_field_tag(name, value,
    **input_options,
    type: "url",
    "x-model": "value"
  ) %>
</div>
```

--------------------------------

### Rendering ViewComponents in Previews

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/previews/index.md

Render ViewComponents by supplying an instance of the target component class to the `render` call.

```ruby
# test/components/previews/heading_component_preview.rb
class HeadingComponentPreview < ViewComponent::Preview
  def default
    render HeadingComponent.new(text: "This is a heading")
  end

  def with_block_content
    render HeadingComponent.new do
      tag.strong "This is a heading"
    end
  end
end
```

--------------------------------

### Render a Partial in a Preview

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/components/partials.md

Use the `render` method within a preview class to render a partial. The path should be relative to the `views` directory root.

```ruby
# test/components/previews/article_preview.rb
class ArticlePreview < Lookbook::Preview
  def default
    render "elements/article"
  end

  def with_args
    render "elements/article", title: "This is the title" do
      "This is the body"
    end
  end
end
```

--------------------------------

### Override Specific Color Variable After Scale

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/ui/theming.md

After defining a color scale, you can still override individual color variables. This example sets the header background to red while keeping the emerald accent scale.

```ruby
config.lookbook.ui_theme_overrides = {
  accent_50: "#ecfdf5",
  # ... other color scale colors ...

  header_bg: "red" # and then override a specific color variable
}
```

--------------------------------

### Render Phlex Views in Previews

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/components/phlex.md

Use the `render` method within a Lookbook preview class to display Phlex views. Supports rendering with arguments and block content.

```ruby
class ArticleViewPreview < Lookbook::Preview
  def default
    render Views::Article.new
  end

  def with_args
    render Views::Article.new(title: "This is a title") do
      "This is the body"
    end
  end
end
```

--------------------------------

### Pass Initial Parameter Values to Embed

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/sharing/embeds.md

Set initial values for preview parameters using attributes in the format `param-<param-name>="<param-value>"`.

```html
<lookbook-embed param-text="Some custom button text" ...>

```

```html
<lookbook-embed
  app="<%= links.demo %>"
  preview="Elements::ButtonComponentPreview"
  param-text="Some custom button text">
</lookbook-embed>
```

--------------------------------

### Render an Entire Template in a Preview

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/components/partials.md

Render an entire view template by using the `template:` argument with the `render` method. The path is relative to the `views` directory root.

```ruby
# test/components/previews/page_preview.rb
class PagePreview < Lookbook::Preview
  def default
    render template: "pages/show"
  end

  def with_locals
    render template: "pages/show", locals: { title: "The Title" }
  end
end
```

--------------------------------

### Define a Custom '@keywords' Tag in Lookbook

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_extend/tags/index.md

Implement custom parsing for a '@keywords' tag to handle comma-separated values. This example splits the tag body, strips whitespace, and stores the keywords as an array on the `tag` object.

```ruby
Lookbook.add_tag(:keywords) do |tag|
  tag.keywords = tag.tag_body.split(",").map(&:strip)
end
```

--------------------------------

### Use tag options

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_extend/tags/index.md

Provide optional configuration via an inline YAML hash and access it via the tag object.

```ruby
# @design figma https://share.figma.com/my-org/button-component { status: wip }
```

```erb
<a href="<%%= tag.design_file_url %>">
  <%%= tag.tool_name %>
  <%% if tag.opts.status == "wip" %>
    <strong>IN PROGRESS</strong>
  <%% end %>
</a>
```

--------------------------------

### Passing Dynamic Parameters to Scenarios

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/previews/index.md

Shows how to define a scenario that accepts dynamic parameters, allowing values to be passed via URL parameters or set interactively within the Lookbook UI.

```ruby
# test/components/previews/example_component_preview.rb
class ExampleComponentPreview < Lookbook::Preview
  def with_dynamic_title(title: "Example component default")
    render(ExampleComponent.new(title: title))
  end
end
```

--------------------------------

### Namespacing Previews in Subdirectories

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/previews/index.md

Organize preview files into folders. The class namespace must reflect the relative path to the preview class.

```ruby
# test/components/previews/elements/buttons/primary_button_component_preview.rb
class Elements::Buttons::PrimaryButtonComponentPreview < Lookbook::Preview
  def default
    render PrimaryButtonComponent.new(text: "Click me")
  end
end
```

--------------------------------

### Preview Class with Default Scenario

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/previews/index.md

A basic preview class that includes a 'default' scenario, intended to be rendered with a corresponding template file.

```ruby
# test/components/previews/cell_component_preview.rb
class CellComponentPreview < Lookbook::Preview
  def default
  end
end
```

--------------------------------

### Rendering Partials in Previews

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/previews/index.md

Render template partials by identifying them by their path. Local variables can be supplied as keyword arguments.

```ruby
# test/components/previews/button_partial_preview.rb
class ButtonPartialPreview < Lookbook::Preview
  def default
    # Will attempt to render the file `app/views/elements/_button.html.erb`
    render "elements/button"
  end

  def with_local_vars
    # Local variables can be supplied as keyword arguments:
    render "elements/button", text: "Click me", icon: true
  end

  def with_block_content
    # Any block content supplied can be yielded in the partial
    render "elements/button" do
      tag.em "Click me please"
    end
  end
end
```

--------------------------------

### Configure Preview Layout

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/previews/layouts.md

Methods for setting the layout for individual preview classes or globally across the application.

```APIDOC
## Configure Preview Layout

### Description
Sets the layout used for rendering component previews. It is recommended to use a standalone layout to avoid affecting the main application.

### Configuration Options
- **Individual Class**: Use the `layout` method within the preview class.
- **Global Configuration**: Use `config.lookbook.preview_layout` in your Rails configuration.
- **ViewComponent Integration**: Use `config.view_component.previews.default_layout` if using ViewComponent.

### Request Example
```rb
# Individual class configuration
class ExampleComponentPreview < Lookbook::Preview
  layout "admin"
end

# Global configuration
config.lookbook.preview_layout = "component_preview"
```
```

--------------------------------

### Define dynamic display options

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/previews/display.md

Configure dynamic options in the application config to allow on-the-fly switching in the Lookbook UI.

```ruby
# config/application.rb
config.lookbook.preview_display_options = {
  bg_color: '#fff', # default bg_color value
  theme: ["light", "dark"], # dynamic 'theme' display option
  lang: [
    ["English", "en"],
    ["French", "fr"]
  ]
}
```

--------------------------------

### Basic Preview Class Structure

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/previews/index.md

Defines a basic preview class that extends Lookbook::Preview. This serves as a template for organizing component scenarios.

```ruby
# test/components/previews/button_component_preview.rb
class ButtonComponentPreview < Lookbook::Preview
  # scenarios defined here
end
```

--------------------------------

### Configure Phlex View Paths

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/components/phlex.md

Add custom Phlex view directories to Lookbook's component paths if they are not in the default `app/views`.

```ruby
config.lookbook.component_paths << "path/to/phlex/views"
```

--------------------------------

### Preview Class with Custom Template Location

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/previews/index.md

Shows how to specify a custom location for a preview's template file by passing the 'template' argument.

```ruby
# test/components/previews/cell_component_preview.rb
class CellComponentPreview < Lookbook::Preview
  def default

```

--------------------------------

### Basic Lookbook Embed Configuration

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/sharing/embeds.md

Use the `app` and `preview` attributes for a basic embed. The `app` attribute is optional if the embed is on the same domain and Lookbook is at the default path.

```html
<lookbook-embed
  app="<%= links.demo %>"
  preview="Feedback::AlertComponentPreview">
</lookbook-embed>
```

--------------------------------

### Dynamic Options via Method Reference

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/previews/params.md

Generates select options dynamically by referencing a private method within the preview class that returns a hash of options.

```ruby
# @param theme select :method_that_returns_options
```

```ruby
class ButtonComponent::Preview < ViewComponent::Preview
  # @param theme select :theme_options
  def button(theme: :danger)
    # ...
  end

  private

  def theme_options
    {
      choices: %i[primary secondary danger],
      include_blank: true
    }
  end
end
```

--------------------------------

### Annotate a preview class

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_extend/tags/index.md

Use the registered tag in a preview class or scenario method.

```ruby
# @design figma https://share.figma.com/my-org/button-component
class ButtonComponentPreview < Lookbook::Preview
  def default
    render ButtonComponent.new do
      "Click me"
    end
  end
end
```

--------------------------------

### Set Global Preview Layout

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/previews/layouts.md

Configure the `preview_layout` option in your application's configuration to set a default layout for all previews. This ensures consistency across your preview environment.

```ruby
config.lookbook.preview_layout = "component_preview"
```

--------------------------------

### Set Individual Preview Layout

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/previews/layouts.md

Use the `layout` option within a preview class to assign a specific layout. This is useful for previews that require a unique presentation.

```ruby
class ExampleComponentPreview < Lookbook::Preview
  layout "admin"
  # ...
end
```

--------------------------------

### Configure Global Page Options

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/pages/frontmatter.md

Set default page options in the application configuration file. These values are merged with page-level frontmatter.

```ruby
# config/application.rb
config.lookbook.page_options = {
  footer: false,
  data: {
    brand_colors: {
      red: '#ff0000'
    }
  }
}
```

--------------------------------

### Dynamic Panel Options with Lambdas

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_extend/panels/index.md

Shows how to use lambda functions for panel options like `disabled`. Lambdas receive a `data` object containing preview and scenario information, allowing for dynamic behavior.

```ruby
{
  # Customise the panel tab label:
  label: "Params",
  # Disable the tab if no params are set for the current preview:
  disabled: ->(data) { data.context.params.none? }
}
```

--------------------------------

### Format of the @display tag

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/previews/display.md

The syntax for applying display tags in your preview files.

```ruby
@display <key> <value>
```

--------------------------------

### Apply .lookbook-panel Class to Content

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_extend/panels/templates.md

Ensure your panel's content is within an element that has the '.lookbook-panel' class applied to match system panel padding and styles.

```html
<div class="lookbook-panel">
  <!-- your panel content here -->
</div>
```

--------------------------------

### Set Custom Project Logo

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/ui/branding.md

Provide an alternative logo as an SVG string using the `project_logo` config option. Ensure the SVG has a `viewBox` and no width/height attributes for proper scaling.

```ruby
config.lookbook.project_logo = "<svg>...</svg>"
```

```ruby
config.lookbook.project_logo = "<svg stroke='currentColor'>...</svg>"
```

```ruby
config.lookbook.project_logo = "<svg viewBox='0 0 32 32'>...</svg>"
```

--------------------------------

### Configure default display options

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/previews/display.md

Set global default values for display options in the application configuration.

```ruby
# config/application.rb
config.lookbook.preview_display_options = {
  bg_color: '#fff',
  max_width: '100%'
}
```

--------------------------------

### Set UI Theme

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/ui/theming.md

Use the `ui_theme` config option to select a base theme for your Lookbook instance. The default is 'indigo'.

```ruby
config.lookbook.ui_theme = "blue"
```

--------------------------------

### Configure navigation section labels

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/ui/navigation.md

Use these configuration options to rename the default 'Previews' and 'Pages' section headers in the sidebar.

```ruby
config.lookbook.preview_collection_label = "Components" # defaults to "Previews"
```

```ruby
config.lookbook.page_collection_label = "Docs" # defaults to "Pages"
```

--------------------------------

### Add a Custom Inspector Panel

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_extend/panels/index.md

Use `Lookbook.add_panel` to introduce a new custom panel. Specify the panel's identifier, the view partial to render, and optional configuration like its label.

```ruby
Lookbook.add_panel(:info, "panels/info", {
  label: "Extra Info"
})
```

--------------------------------

### Release commands

Source: https://github.com/lookbook-hq/lookbook/blob/main/CONTRIBUTING.md

Commands used to trigger the release process.

```bash
npm run release:dry-run
```

```bash
npm run release
```

--------------------------------

### Lookbook JSON Endpoint Data Structure

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/json_endpoints.md

The `/previews.json` endpoint returns an array of preview objects, each containing its name and a list of scenarios. Scenarios include their name and an inspect path.

```json
[{
  "name" => "annotated",
  "scenarios" =>
    [
      {
        "name" => "default",
        "inspect_path" => "/lookbook/inspect/foo/bar/annotated/default"
      }
    ]
}]
```

--------------------------------

### Configure Inspector Drawer Panels

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/ui/inspector.md

Define the order and visibility of panels in the inspector drawer using the drawer_panels configuration option.

```ruby
config.lookbook.preview_inspector.drawer_panels = [:source, :notes, :params]
```

```ruby
# show the notes panel first, then all others.
config.lookbook.preview_inspector.drawer_panels = [:notes, "*"]
```

--------------------------------

### Lookbook Configuration Overview

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/config.md

This section outlines the structure of the Lookbook configuration options, which are organized into logical groups for easier management.

```APIDOC
## Lookbook Configuration Reference

### Description
Lookbook provides various configuration options to customize its behavior. These options are categorized into groups to facilitate easier access and management.

### Configuration Structure
- **Groups**: Options are organized into logical groups (e.g., UI, Data, Integration).
- **Options**: Each option includes a name, description, and default value.

### Usage
Configuration is typically defined within the project's configuration files using Ruby syntax.
```

--------------------------------

### Configure scenario sorting

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/ui/navigation.md

Enable alphabetical sorting for scenarios within the navigation instead of the default definition order.

```ruby
config.lookbook.preview_sort_scenarios = true
```

--------------------------------

### Embed a preview using HTML

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/pages/embedding.md

Use the <lookbook-embed> element to insert a preview into a page. Attributes define the preview class, scenario, and visible inspector panels.

```html
<lookbook-embed
  preview="Feedback::BlankSlateComponentPreview"
  scenario="default"
  panels="params,source,output">
</lookbook-embed>
```

--------------------------------

### Configure navigation section order

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/ui/navigation.md

Define the sequence of top-level sections in the sidebar using the sidebar_panels configuration.

```ruby
# Display pages before previews in the sidebar
config.lookbook.preview_inspector.sidebar_panels = [:pages, :previews]
```

--------------------------------

### File Options Import (JSON)

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/previews/params.md

Imports options for a select input from a JSON file. Paths are resolved relative to the application root by default, or relative to the preview file if prefixed with './' or '../'.

```ruby
# @param theme select ./theme-select-data.json
```

```ruby
# @param theme select ../data/theme-select-data.json
```

--------------------------------

### Configure embed access policy

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/sharing/embeds.md

Set the preview_embeds.policy to ALLOWALL in your application configuration to enable external domain access.

```ruby
# config/application.rb
config.lookbook.preview_embeds.policy = "ALLOWALL"
```

--------------------------------

### Embed a preview using the Ruby helper

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/pages/embedding.md

The embed helper provides a Ruby-based alternative for rendering previews. It accepts the preview class and scenario method as arguments.

```erb
<%= embed Feedback::BlankSlateComponentPreview, :default %>
```

--------------------------------

### Parameter Options Configuration

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/previews/params.md

Methods for customizing field display using options, including inline, dynamic, and file-based loading.

```APIDOC
## Parameter Options

### Description
Options provide a way to customize the display of each field. They can be provided inline, dynamically via Ruby methods/statements, or loaded from external files.

### Options Reference
- **label** (String) - Custom label text.
- **description** (String) - Short description of the parameter usage.
- **hint** (String) - Hint text for the input.

### Examples
- **Inline**: `@param theme select { choices: [primary, secondary] }`
- **Dynamic Method**: `@param theme select :method_name`
- **File**: `@param theme select ./path/to/data.yml`
```

--------------------------------

### Render Tags Reference Section

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/tags.md

Uses a block-based rendering pattern to iterate over site tag data and generate documentation entries.

```erb
<%= render section do |s| %>
  <% s.with_block_prose do %>
    The following tags are available for [annotating preview classes](<%= guide_url :previews_annotations %>):
  <% end %>

  <% s.with_block_method_list do |list| %>
    <% site.data.tags.each do |tag| %>
      <% id = tag[:name].tr("@","") %>
      <% add_toc_entry({label: tag[:name], id: id, level: 2 }) %>
      <% list.with_item_method(
        **(tag.symbolize_keys),
        wrap_args: false,
        signature_call: tag[:name],
        id: id,
        example_lang: :rb
      ) %>
    <% end %>
  <% end %>
<% end %>
```

--------------------------------

### Configure default embed options

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/sharing/embeds.md

Set default panels and actions for preview embeds in your Rails application configuration.

```rb
# config/application.rb
config.lookbook.preview_embeds.panels = ["notes", "source"]
config.lookbook.preview_embeds.actions = ["inspect"]
```

--------------------------------

### Accessing Parameters in Previews

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/previews/index.md

Values from parameters can be accessed through locals within the preview template.

```ruby
class CellComponentPreview < Lookbook::Preview
  def default(title: "Default title", subtitle: "A subtitle")
    render_with_template(locals: {
      title: title,
      subtitle: subtitle
    })
  end
end
```

--------------------------------

### File Options Import (YAML)

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/previews/params.md

Imports options for a select input from a YAML file. Paths are resolved relative to the application root by default, or relative to the preview file if prefixed with './' or '../'.

```ruby
# @param theme select data/theme-select-data.yml
```

```yaml
# data/theme-select-data.yml
choices:
  - primary
  - secondary
  - danger
```

--------------------------------

### RenderableEntity Overview

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_api/renderable_entity.md

Details regarding the RenderableEntity subject and its associated metadata.

```APIDOC
## RenderableEntity

### Description
The RenderableEntity represents a core component within the Lookbook project, identified by the subject 'renderable_entity'.

### Entity Details
- **ID**: renderable-entity
- **Label**: RenderableEntity
- **Subject**: renderable_entity
```

--------------------------------

### Set ViewComponent Default Preview Layout

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/previews/layouts.md

If using ViewComponent, set the `view_component.previews.default_layout` config option instead of Lookbook's global option. Lookbook respects this setting for ViewComponent previews.

```ruby
config.view_component.previews.default_layout = "component_preview"
```

--------------------------------

### Tag structure syntax

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_extend/tags/index.md

General syntax for defining and using tags with arguments.

```ruby
@tag_name <tag_body>
```

```ruby
@tag_name <arg_1> <arg_2> ... <arg_x> <opts?>
```

```ruby
@param rating select { choices: [Bad, Good, Average] }
```

--------------------------------

### Mount Lookbook engine in routes

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/sharing/production.md

Remove environment-specific checks in routes.rb to allow the Lookbook engine to mount in production.

```ruby
# config/routes.rb
Rails.application.routes.draw do
  # if Rails.env.development? <-- remove
    mount Lookbook::Engine, at: "/lookbook"
  # end <-- remove
end
```

--------------------------------

### Set Custom Project Name

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/ui/branding.md

Use the `project_name` config option to set a custom name for your project. This name appears in the header.

```ruby
config.lookbook.project_name = "GlobalCorp Components"
```

--------------------------------

### Mount Lookbook Engine in routes.rb

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/installation.md

Mount the Lookbook engine in your `config/routes.rb` file within a development environment check. This makes the Lookbook UI accessible at the specified path.

```ruby
Rails.application.routes.draw do
  if Rails.env.development?
    mount Lookbook::Engine, at: "/lookbook"
  end
end
```

--------------------------------

### Remove a Panel

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_extend/panels/index.md

Use `Lookbook.remove_panel` to completely remove a system panel. Consider using `preview_inspector.drawer_panels` for hiding panels instead.

```ruby
Lookbook.remove_panel(:notes)
```

--------------------------------

### Fix link_to Helper Compatibility

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/troubleshooting.md

Demonstrates which link_to helper formats are supported and which are incompatible within Lookbook preview layouts.

```erb
<%%= link_to "Click here", "/foo/bar" %>  ✅ works
<%%= link_to "Click here", edit_thing_path(@thing.id) %>  ✅ works
<%%= link_to "Click here", locale: :en %>  ❌ doesn't work
<%%= link_to "Click here", controller: "demo", action: "index" %>  ❌ doesn't work
```

--------------------------------

### Add Action Buttons to Embed

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/sharing/embeds.md

Include action buttons in the embed header by specifying their names in a comma-separated list using the `actions` attribute.

```html
<lookbook-embed actions="open" ...>

```

```html
<lookbook-embed
  app="<%= links.demo %>"
  preview="Feedback::AlertComponentPreview"
  actions="open">
</lookbook-embed>
```

--------------------------------

### Lookbook.add_panel

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_extend/panels/index.md

Registers a new custom inspector panel in the Lookbook preview interface.

```APIDOC
## Lookbook.add_panel

### Description
Adds a new custom inspector panel to the Lookbook preview interface.

### Parameters
- **name** (Symbol) - Required - The unique identifier for the panel.
- **partial** (String) - Required - The path to the partial template for the panel content.
- **options** (Hash) - Optional - Configuration options including label, hotkey, copy, and locals.
```

--------------------------------

### Configure inspector panels for an embed

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/pages/embedding.md

Specify an array of panel names to control which inspector panels are displayed alongside the preview.

```erb
<%= embed Feedback::BlankSlateComponentPreview, :default, panels: ["source", "notes"] %>
```

--------------------------------

### Template Helpers

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/pages/variables.md

Documentation regarding the helper methods provided for use within Lookbook page templates.

```APIDOC
## Template Helpers

### Description
Lookbook provides a set of helper methods accessible within page templates to facilitate dynamic content rendering.

### Helpers
- Refer to the `page_helper` module documentation for a complete list of available methods.
```

--------------------------------

### Render HTML List with Icons

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/whats_new.md

This Ruby code snippet renders an unordered list with icons, iterating over resource data to display goals. It uses `icon` and `markdownify` helpers for rendering.

```ruby
<ul class="space-y-4 pl-4">
  <% resource.data.goals.each do |goal| %>
    <li class="flex items-start">
      <div class="flex-none mr-3">
        <%= icon goal["icon"].to_sym, class: "mt-1 text-gray-600" %>
      </div>
      <div>
        <%= markdownify goal.text %>
      </div>
    </li>
  <% end %>
</ul>
```

--------------------------------

### Access display parameters in preview layout

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/previews/display.md

Retrieve display parameters within your preview layout using the params hash.

```html
<!DOCTYPE html>
<html style="background-color: <%%= params.dig(:lookbook, :display, :bg_color) %>">
  <head>
    <title>Preview Layout</title>
  </head>
  <body>
    <div style="max-width: <%%= params.dig(:lookbook, :display, :max_width) || '100%' %>">
      <%% if params.dig(:lookbook, :display, :wrapper) == true %>
      <div class="wrapper"><%%= yield %></div>
      <%% else %> <%%= yield %> <%% end %>
    </div>
  </body>
</html>
```

--------------------------------

### Define Tabbed Page Files

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/pages/index.md

File naming convention for creating tabbed content on a main page.

```text
test/components/docs/
  ├── 01_avatar.md.erb
  ├── 01_avatar[design].md.erb
  ├── 01_avatar[mobile].md.erb
  ├── 01_avatar[web].md.erb
```

--------------------------------

### Pass parameters to an embedded preview

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_guide/pages/embedding.md

Supply a hash of parameters to the embed helper to customize the rendered preview state.

```erb
<%= embed Feedback::BlankSlateComponentPreview, :default, params: {
  icon: "plus",
  text: "Add new"
} %>
```

--------------------------------

### PreviewEntity API

Source: https://github.com/lookbook-hq/lookbook/blob/main/docs/src/_api/preview_entity.md

This section covers the PreviewEntity API, which is related to the 'preview_entity' subject.

```APIDOC
## PreviewEntity API

### Description
This API endpoint allows for previewing entities. It is associated with the 'preview_entity' subject within the lookbook-hq/lookbook project.

### Method
GET

### Endpoint
/lookbook-hq/lookbook/preview_entity

### Parameters
#### Query Parameters
- **id** (string) - Required - The unique identifier for the entity to preview.

### Response
#### Success Response (200)
- **entity_data** (object) - Contains the preview data for the requested entity.

#### Response Example
```json
{
  "entity_data": {
    "name": "Sample Entity",
    "description": "This is a sample entity for preview."
  }
}
```
```