lookbook 0.5.0.beta.0 → 0.5.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 95624cc7d6d6e9389e87c3b13c6f4980f0be8ae2f13ac81757a9ed7acbaf554d
-  data.tar.gz: e8e8c6787b96e23fc3d71bc3b47c4a9253ef8a607f8f41c292c52e2ecc99549d
+  metadata.gz: e7d08534bdd08e8ec3807fb35c3b8a0a97fecb0b2a4e866174a6b496c6eae82c
+  data.tar.gz: dc7cffa78d20043283268eab5d7817c280281a08b73b52fb73a3591d8fb4a357
 SHA512:
-  metadata.gz: 5ac7b680d183349e374b1a2368b2839fa9c9ec8790f53cbf76a97171c0da7375cf6599d2e4936e2fcb1a0dca685aae9d37cfd54672e68ef0e935086af43b60bc
-  data.tar.gz: 03bee3f6b73191fc5bcfd5afed389fee54b3ec41ce31827ddedf647dc17f68740db1314f6f4a0c78d7dfe4960851d9cce12e23e6598970b74d8ec428f258db88
+  metadata.gz: f2f1365fea4478385905b1700595e3bcde6eb477b2486e37555ecdc035982e7c7e390e92145f0d5c715794423680ec3df420b8bb8f8c5c3104d4e82585d97e29
+  data.tar.gz: 62556f502dd2afaabc8c25f6b0887c9175f8ee4c32a8eb4515b3063bc77a25220d076d99cc71878c1550056d752c599adf208f92b948c6f3d89d89fd85b1e670

data/README.md

@@ -28,7 +28,7 @@ Lookbook uses [RDoc/Yard-style comment tags](#annotating-preview-files) to exten
 - Auto-updating UI when component or preview files are updated _(Rails v6.0+ only)_
 - Use comment tag annotations for granular customisation of the preview experience
 - Fully compatible with standard the ViewComponent preview system
-- [**Experimental**] In-browser live editable preview parameters (similar to Storybook Controls/Knobs)
+- In-browser live-editable preview parameters (similar to basic Storybook Controls/Knobs)
 
 ## Lookbook demo
 
@@ -63,10 +63,16 @@ end
 
 The `at` property determines the root URL that the Lookbook UI will be served at.
 
-> If you would like to expose the Lookbook UI in production as well as in development, just remove the `if Rails.env.development?` condition from around the mount statement.
-
 Then you can start your app as normal and navigate to `http://localhost:3000/lookbook` (or whatever mount path you specified) to view your component previews in the Lookbook UI.
 
+#### Mounting in Production
+
+If you would like to expose the Lookbook UI in production as well as in development
+
+1. Remove the `if Rails.env.development?` condition from around the mount statement in `routes.rb`
+2. Add `config.view_component.show_previews = true` to `config/environments/production.rb`
+
+
 ## Usage
 
 You don't need to do anything special to see your ViewComponent previews and examples in Lookbook - just create them as normal and they'll automatically appear in the Lookbook UI. Preview templates, custom layouts and even bespoke [preview controllers](https://viewcomponent.org/guide/previews.html#configuring-preview-controller) should all work as you would expect.
@@ -96,7 +102,7 @@ class ButtonComponentPreview < ViewComponent::Preview
   # Button with icon
   # ----------------
   # This example uses dynamic preview parameters
-  # which can be edited live in the Lookbook UI 
+  # which can be edited live in the Lookbook UI
   #
   # @param text
   # @param icon select [heart, cog, alert]
@@ -161,7 +167,7 @@ The following Lookbook-specific tags are available for use:
 * [`@display`](#display-tag)
 * [`@!group ... @!endgroup`](#group-tag)
 * [`@hidden`](#hidden-tag)
-* [`@param`](#param-tag) [⚠️ **experimental!** - requires [feature opt-in](#experimental-features) ⚠️]
+* [`@param`](#param-tag)
 
 <h3 id="label-tag">🏷 @label</h3>
 
@@ -311,9 +317,7 @@ class FooComponentPreview < ViewComponent::Preview
 end
 ```
 
-<h3 id="param-tag"> 🚧 @param (experimental)</h3>
-
-> ⚠️ This feature is currently flagged as an **experimental** feature which requires [feature opt-in](#experimental-features) to use. Its API and implementation may change in the future.
+<h3 id="param-tag">@param</h3>
 
 The `@param` tag provides the ability to specify **editable preview parameters** which can be changed in the Lookbook UI in order to customise the rendered output on the fly, much like the [Controls (knobs) addon](https://storybook.js.org/addons/@storybook/addon-controls) for Storybook.
 
@@ -326,7 +330,7 @@ The `@param` tag takes the following format:
 ```
 
 - `<name>` - name of the dynamic preview param
-- `<input_type>` - input field type to generate in the UI 
+- `<input_type>` - input field type to generate in the UI
 - `<opts?>` - YAML-encoded field options, used for some field types
 
 #### Input types
@@ -357,7 +361,7 @@ The following **input field types** are available for use:
 @param <name> select <options>
 ```
 
-`<options>` should be a [YAML array](https://yaml.org/YAML_for_ruby.html#simple_inline_array) of options which must be formatted in the same style as the input for Rails' [`options_for_select`](https://apidock.com/rails/v6.0.0/ActionView/Helpers/FormOptionsHelper/options_for_select) helper: 
+`<options>` should be a [YAML array](https://yaml.org/YAML_for_ruby.html#simple_inline_array) of options which must be formatted in the same style as the input for Rails' [`options_for_select`](https://apidock.com/rails/v6.0.0/ActionView/Helpers/FormOptionsHelper/options_for_select) helper:
 
 ```ruby
 # Basic options:
@@ -437,7 +441,7 @@ The following structured types are also available but should be considered **exp
 
 ```ruby
 class ButtonComponentPreview < ViewComponent::Preview
-  
+
   # The params defined below will be editable in the UI:
   #
   # @param content text
@@ -470,8 +474,6 @@ class ProfileCardComponentPreview < ViewComponent::Preview
 end
 ```
 
-<img src=".github/assets/preview_example_notes.png" width="400">
-
 ## Configuration
 
 Lookbook will use the ViewComponent [configuration](https://viewcomponent.org/api.html#configuration) for your project to find and render your previews so you generally you won't need to configure anything separately.
@@ -496,6 +498,17 @@ If you wish to add additional paths to listen for changes in, you can use the `l
 config.lookbook.listen_paths << Rails.root.join('app/other/directory')
 ```
 
+### Custom favicon
+
+If you want to change the favicon used by the Lookbook UI, you can provide a path to your own (or a data-uri string) using the `ui_favicon` option:
+
+```ruby
+config.lookbook.ui_favicon = "/path/to/my/favicon.png" 
+```
+
+> To disable the favicon entirely, set the value to `false`.
+
+
 <h3 id="experimental-features">Experimental features opt-in</h3>
 
 Some features may occasionally be released behind a 'experimental' feature flag while they are being tested and refined, to allow people to try them out and provide feedback.
@@ -510,10 +523,6 @@ To opt into individual experimental features, include the name of the feature in
 config.lookbook.experimental_features = ["feature_name"]
 ```
 
-The current experimental features that can be opted into are:
-
-- `params`: Live-editable, dynamic preview parameters ([read more](#param-tag)). Include `"params"` in the `experimental_features` config option to opt in. 
-
 #### Opting into all experimental features (not recommended!)
 
 If you want to live life on the bleeding-edge you can opt-in to all current **and future** experimental features (usual caveats apply):
@@ -529,9 +538,10 @@ Lookbook provides a few keyboard shortcuts to help you quickly move around the U
 
 - `f` - move focus to the nav filter box
 - `Esc` [when focus is in nav filter box] - Clear contents if text is present, or return focus to the UI if the box is already empty
-- `s` - Switch to Source tab in the inspector
-- `o` - Switch to Output tab in the inspector
-- `n` - Switch to Notes tab in the inspector
+- `s` - Switch to Source tab in the drawer
+- `n` - Switch to Notes tab in the drawer
+- `v` - Switch to the rendered preview
+- `o` - Switch to the code preview
 - `r` - Refresh the preview (useful if using something like Faker to generate randomised data for the preview)
 - `w` - Open the standalone rendered preview in a new window
 

data/app/assets/lookbook/css/app.css

@@ -76,7 +76,10 @@
 
   .code pre {
     @apply block;
-    /* @apply whitespace-pre-wrap; */
+  }
+
+  .code.wrapped pre {
+    @apply whitespace-pre-wrap;
   }
 
   .code .line {

data/app/assets/lookbook/js/app.js

@@ -15,6 +15,7 @@ import navGroup from "./components/nav-group";
 import splitter from "./components/splitter";
 import tabs from "./components/tabs";
 import copy from "./components/copy";
+import code from "./components/code";
 import sizes from "./components/sizes";
 
 import initFilterStore from "./stores/filter";
@@ -43,6 +44,7 @@ Alpine.data("page", page);
 Alpine.data("splitter", splitter);
 Alpine.data("previewWindow", previewWindow);
 Alpine.data("copy", copy);
+Alpine.data("code", code);
 Alpine.data("inspector", inspector);
 Alpine.data("filter", filter);
 Alpine.data("param", param);

data/app/assets/lookbook/js/components/code.js

@@ -0,0 +1,5 @@
+export default function code() {
+  return {
+    wrap: false,
+  };
+}

data/app/assets/lookbook/js/components/copy.js

@@ -1,7 +1,9 @@
-export default function copy(id) {
+export default function copy() {
   return {
     get content() {
-      const target = document.getElementById(id);
+      const target = document.getElementById(
+        this.$root.getAttribute("data-target")
+      );
       return (target ? target.innerHTML : "").trim();
     },
     done: false,

data/app/assets/lookbook/js/components/inspector.js

@@ -32,15 +32,23 @@ export default function inspector() {
     get drawerHidden() {
       return this.$store.inspector.drawer.hidden;
     },
-    isActivePanel(panel) {
-      return this.$store.inspector.drawer.active == panel;
+    get maxDrawerHeight() {
+      return Math.round(this.height * 0.7);
     },
-    switchPanel(panel) {
-      this.$store.inspector.drawer.active = panel;
+    get maxDrawerWidth() {
+      return Math.round(this.width * 0.7);
     },
-    toggleView() {
-      this.$store.inspector.preview.view =
-        this.view === "html" ? "preview" : "html";
+    isActiveDrawerPanel(panel) {
+      return this.$store.inspector.drawer.panel === panel;
+    },
+    switchDrawerPanel(panel) {
+      this.$store.inspector.drawer.panel = panel;
+    },
+    isActivePreviewPanel(panel) {
+      return this.$store.inspector.preview.panel === panel;
+    },
+    switchPreviewPanel(panel) {
+      this.$store.inspector.preview.panel = panel;
     },
     toggleOrientation() {
       this.$store.inspector.drawer.orientation =

data/app/assets/lookbook/js/components/page.js

@@ -26,7 +26,9 @@ export default function page() {
       const response = await fetch(window.document.location);
       if (!response.ok) return window.location.reload();
       const html = await response.text();
-      this.morph(new DOMParser().parseFromString(html, "text/html"));
+      const newDoc = new DOMParser().parseFromString(html, "text/html");
+      this.morph(newDoc);
+      document.title = newDoc.title;
     },
     setLocation(loc) {
       const path = loc instanceof Event ? loc.currentTarget.href : loc;

data/app/assets/lookbook/js/components/param.js

@@ -1,23 +1,25 @@
 import debounce from "debounce";
 
-export default function param(name, value) {
+export default function param(name, value, opts = {}) {
   return {
     name,
     value,
+    updating: false,
     init() {
-      this.$watch(
-        "value",
-        debounce(() => {
-          if (this.validate()) {
-            this.update();
-          }
-        }, 300)
-      );
+      if (opts.debounce) {
+        this.$watch(
+          "value",
+          debounce(() => this.updateIfValid(), opts.debounce)
+        );
+      } else {
+        this.$watch("value", () => this.updateIfValid());
+      }
     },
     setFocus() {
-      if (this.$refs.input) {
-        setTimeout(() => this.$refs.input.focus(), 0);
-      }
+      setTimeout(() => this.$root.focus(), 0);
+    },
+    updateIfValid() {
+      if (this.validate()) this.update();
     },
     update() {
       const searchParams = new URLSearchParams(window.location.search);
@@ -26,7 +28,7 @@ export default function param(name, value) {
       this.setLocation(`${path}?${searchParams.toString()}`);
     },
     validate() {
-      return this.$el.reportValidity ? this.$el.reportValidity() : true;
+      return this.$root.reportValidity ? this.$root.reportValidity() : true;
     },
   };
 }

data/app/assets/lookbook/js/config.js

@@ -9,12 +9,13 @@ export default {
     drawer: {
       orientation: "horizontal",
       defaultPanel: "source",
-      defaultHeight: 200,
+      defaultHeight: 300,
       defaultWidth: 500,
       minWidth: 350,
+      minHeight: 200,
     },
     preview: {
-      view: "preview",
+      defaultPanel: "preview",
     },
   },
 };

data/app/assets/lookbook/js/lib/socket.js

@@ -10,7 +10,7 @@ export default function socket(endpoint) {
         received: debounce((data) => {
           console.log("Lookbook files changed");
           callback(data);
-        }, 300),
+        }, 200),
         connected() {
           console.log("Lookbook websocket connected");
         },

data/app/assets/lookbook/js/stores/inspector.js

@@ -6,16 +6,17 @@ export default function createInspectorStore(Alpine) {
     drawer: {
       hidden: Alpine.$persist(false).as("drawer-hidden"),
       orientation: Alpine.$persist(drawer.orientation).as("drawer-orientation"),
-      active: Alpine.$persist(drawer.defaultPanel).as("drawer-active"),
+      panel: Alpine.$persist(drawer.defaultPanel).as("drawer-panel"),
       height: Alpine.$persist(drawer.defaultHeight).as("drawer-height"),
       width: Alpine.$persist(drawer.defaultWidth).as("drawer-width"),
       minWidth: drawer.minWidth,
+      minHeight: drawer.minHeight,
       visibleTabCount: Infinity,
     },
     preview: {
       width: Alpine.$persist("100%").as("preview-width"),
       height: Alpine.$persist("100%").as("preview-height"),
-      view: Alpine.$persist(preview.view).as("preview-view"),
+      panel: Alpine.$persist(preview.defaultPanel).as("preview-panel"),
       lastWidth: null,
       lastHeight: null,
       resizing: false,

data/app/controllers/lookbook/app_controller.rb

@@ -27,10 +27,8 @@ module Lookbook
         begin
           set_params
           @examples = examples_data
-          @preview_srcdoc = if Lookbook.config.preview_srcdoc
-            render_examples(examples_data).gsub("\"", """)
-          end
-          @panels = panels.filter { |name, panel| panel[:show] }
+          @drawer_panels = drawer_panels.filter { |name, panel| panel[:show] }
+          @preview_panels = preview_panels.filter { |name, panel| panel[:show] }
         rescue *EXCEPTIONS
           render "error"
         end
@@ -119,23 +117,37 @@ module Lookbook
       @nav
     end
 
-    def panels
+    def preview_panels
       {
-        source: {
-          label: "Source",
-          template: "lookbook/panels/source",
-          hotkey: "s",
+        preview: {
+          label: "Preview",
+          template: "lookbook/panels/preview",
+          srcdoc: Lookbook.config.preview_srcdoc ? render_examples(examples_data).gsub("\"", """) : nil,
+          hotkey: "v",
           show: true,
           disabled: false,
-          copy: true
+          copy: false
         },
         output: {
-          label: "Output",
+          label: "HTML",
           template: "lookbook/panels/output",
           hotkey: "o",
           show: true,
           disabled: false,
           copy: true
+        }
+      }
+    end
+
+    def drawer_panels
+      {
+        source: {
+          label: "Source",
+          template: "lookbook/panels/source",
+          hotkey: "s",
+          show: true,
+          disabled: false,
+          copy: true
         },
         notes: {
           label: "Notes",

data/app/views/layouts/lookbook/app.html.erb

@@ -6,7 +6,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
 
   <link href="/lookbook-assets/css/app.css?v=<%= Lookbook::VERSION %>" rel="stylesheet">
-  <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>👀</text></svg>">
+  <% if config.ui_favicon != false %>
+    <link rel="icon" href="<%= config.ui_favicon || "data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>👀</text></svg>" %>">
+  <% end %>
 
   <% if config.auto_refresh %>
     <script>

data/app/views/lookbook/components/_code.html.erb

@@ -1,8 +1,13 @@
 <%
 line_numbers ||= false
 language ||= "html"
+wrap ||= nil;
 %>
 <% code = capture do %><%= yield %><% end %>
-<div class="code <%= "numbered" if line_numbers %> <%= classes %>">
+<div class="code <%= "numbered" if line_numbers %> <%= classes %>"
+  x-data="code"
+  :class="{'wrapped': wrap}"
+  <% if wrap.present? %>x-effect="wrap = <%= wrap %>"<% end %>
+>
   <pre><code class="highlight"><%= highlight(code.strip, language, line_numbers: line_numbers) %></code></pre>
 </div>

data/app/views/lookbook/components/_drawer.html.erb

@@ -1,10 +1,10 @@
 <div id="drawer" class="bg-white w-full h-full flex flex-col min-w-0">
-  <div class="px-4 border-b border-gray-200 select-none flex-none" x-show="!drawerHidden">
-    <div class="-mb-px flex cursor-auto relative">
+  <div class="pl-4 border-b border-gray-300 select-none flex-none" x-show="!drawerHidden">
+    <div class="flex cursor-auto relative">
       <div
         id="inspector-tabs-<%= example.id %>"
         x-data="tabs"
-        class="min-w-0"
+        class="min-w-0 -mb-px"
         x-effect="$store.inspector.drawer.visibleTabCount = visibleTabCount"
       >
         <nav x-ref="tabs" class="flex h-10 space-x-8 flex-grow pr-8">
@@ -14,11 +14,11 @@
               href="#inspector-panel-<%= key %>"
               class="whitespace-nowrap pt-2.5 pb-1.5 px-1 border-b-2 cursor-pointer <%= "!text-gray-300" if props[:disabled] %>"
               :class="{
-                'border-indigo-400': isActivePanel('<%= key %>'),
-                'border-transparent text-gray-500 hover:text-gray-700': !isActivePanel('<%= key %>'),
+                'border-indigo-400': isActiveDrawerPanel('<%= key %>'),
+                'border-transparent text-gray-500 hover:text-gray-700': !isActiveDrawerPanel('<%= key %>'),
                 'invisible': (<%= i %> > visibleTabCount)
               }"
-              @click.stop.prevent="switchPanel('<%= key %>')"
+              @click.stop.prevent="switchDrawerPanel('<%= key %>')"
               <% if props[:hotkey] %>data-hotkey="<%= props[:hotkey] %>"<% end %>
             >
               <%== props[:label] %>
@@ -41,14 +41,13 @@
               <template id="inspector-dropdown-tab-<%= key %>-<%= example.id %>" x-if="<%= i %> > $store.inspector.drawer.visibleTabCount">
                 <div :class="{'border-t border-gray-300': (<%= i %> > $store.inspector.drawer.visibleTabCount + 1)}">
                   <a
-                    
                     href="#inspector-panel-<%= key %>"
                     class="block whitespace-nowrap py-2 px-4 border-l-2 cursor-pointer <%= "!text-gray-300" if props[:disabled] %>"
                     :class="{
-                      'border-indigo-400': $store.inspector.drawer.active === '<%= key %>',
-                      'border-transparent text-gray-500 hover:text-gray-700': $store.inspector.drawer.active !== '<%= key %>',
+                      'border-indigo-400': $store.inspector.drawer.panel === '<%= key %>',
+                      'border-transparent text-gray-500 hover:text-gray-700': $store.inspector.drawer.panel !== '<%= key %>',
                     }"
-                    @click.stop.prevent=" hideDropdown(); switchPanel('<%= key %>')"
+                    @click.stop.prevent=" hideDropdown(); switchDrawerPanel('<%= key %>')"
                   >
                     <%== props[:label] %>
                   </a>
@@ -58,31 +57,35 @@
           </div>
         </nav>
       </div>
-      <div class="flex items-center ml-auto pl-8 space-x-3">
-        <% panels.each do |key, props| %>
-          <div
-            ref="<%= "inspector-panel-#{example.id}-#{key}-copy" %>"
-            class="flex items-center"
-            :class="{'pointer-events-none opacity-30': <%= !props[:copy].present? %>}"
-            x-show="isActivePanel('<%= key %>')"
-          >
-            <button
-              class="text-gray-400 transition"
-              x-data="copy('<%= "inspector-panel-#{example.id}-#{key}-clipboard" %>')"
-              x-tooltip.theme.lookbook="done ? 'copied!' : 'copy to clipboard'"
-              @click="save"
-              :class="{
-                '!text-green-600 hover:text-green-600': done,
-                'hover:text-indigo-500': !done}"
+      <div class="flex items-center bg-white border-l border-gray-200 ml-auto space-x-3 px-3">
+        <div>
+          <% panels.each do |key, props| %>
+            <div
+              ref="<%= "inspector-panel-#{example.id}-#{key}-copy" %>"
+              class="flex items-center"
+              :class="{'pointer-events-none opacity-30': <%= !props[:copy].present? %>}"
+              x-show="isActiveDrawerPanel('<%= key %>')"
               x-cloak
-              <% unless props[:copy].present? %>disabled<% end %>
             >
-              <%= icon "${done ? 'check' : 'clipboard'}", size: 4 %>
-            </button>
-          </div>
-        <% end %>
+              <button
+                data-target="<%= "inspector-panel-#{example.id}-#{key}-clipboard" %>"
+                class="text-gray-400 transition"
+                x-data="copy"
+                x-tooltip.theme.lookbook="done ? 'copied!' : 'copy to clipboard'"
+                @click="save"
+                :class="{
+                  '!text-green-600 hover:text-green-600': done,
+                  'hover:text-indigo-500': !done}"
+                x-cloak
+                <% unless props[:copy].present? %>disabled<% end %>
+              >
+                <%= icon "${done ? 'check' : 'clipboard'}", size: 4 %>
+              </button>
+            </div>
+          <% end %>
+        </div>
         <button
-          x-tooltip.theme.lookbook="`switch orientation`"
+          x-tooltip.theme.lookbook="`${horizontal ? 'pin drawer on right' : 'pin drawer on bottom'}`"
           @click="toggleOrientation"
           :class="{'pointer-events-none opacity-30': !canBeVertical}"
         > 
@@ -91,10 +94,10 @@
             class: "scale-[-1] text-gray-400 hover:text-indigo-800" %>
         </button>
         <button
-          x-tooltip.theme.lookbook="`close drawer`"
+          x-tooltip.theme.lookbook="`hide drawer`"
           @click="toggleDrawer"
         > 
-          <%= icon "x",
+          <%= icon "x-circle",
             size: 4,
             class: "text-gray-400 hover:text-indigo-800" %>
         </button>
@@ -105,7 +108,7 @@
     <% panels.each do |key, props| %>
       <div
         class="h-full w-full absolute inset-0"
-        x-show="$store.inspector.drawer.active === '<%= key %>'"
+        x-show="isActiveDrawerPanel('<%= key %>')"
         x-cloak
       >
         <div id="inspector-panel-<%= example.id %>-<%= key %>" class="h-full">

data/app/views/lookbook/components/_header.html.erb

@@ -1,5 +1,5 @@
-<header class="py-2 px-4 w-full flex-none bg-white border-b border-gray-300 flex items-center h-10 select-none  min-w-0">
-  <button class="flex-none mr-3" x-show="!$store.layout.desktop" @click="$store.sidebar.toggle">
+<header class="pl-4 w-full flex-none bg-white border-b border-gray-300 flex items-center h-10 select-none min-w-0">
+  <button class="flex-none mr-6" x-show="!$store.layout.desktop" @click="$store.sidebar.toggle">
     <svg class="feather w-5 h-5 hover:text-indigo-500 transition">
       <use xlink:href="/lookbook-assets/feather-sprite.svg#menu" />
     </svg>

data/app/views/lookbook/components/_nav_preview.html.erb

@@ -6,6 +6,8 @@
     <% end %>
   <% end %>
 <% else %>
-  <% example = examples.first %>
-  <%= component "nav_item", item: example, depth: example.hierarchy_depth, label: node.label, display: :node %>
+  <% if examples.any? %>
+    <% example = examples.first %>
+    <%= component "nav_item", item: example, depth: example.hierarchy_depth, label: node.label, display: :node %>
+  <% end %>
 <% end %>

data/app/views/lookbook/components/_param.html.erb

@@ -2,10 +2,8 @@
 value = params.key?(param[:name]) ? params[param[:name]] : param[:default]
 %>
 <div
-  id="<%= @example.id %>-param-<%= param[:name] %>-input"
+  ref="<%= @example.id %>-param-<%= param[:name] %>-input"
   class="px-4 py-3"
-  x-data="param('<%= param[:name] %>', <%= value.to_json %>)"
-  <% if i == 0 %>x-effect="if ($store.inspector.drawer.active === 'params') setFocus()"<% end %>
 >
   <div class="flex items-start max-w-[800px]">
     <div class="flex-none py-2" :style="`width: ${horizontal ? '200' : '120' }px`">
@@ -16,8 +14,7 @@ value = params.key?(param[:name]) ? params[param[:name]] : param[:default]
     <div class="flex-grow">
       <%= render "lookbook/inputs/#{param[:input]}",
         **param,
-        value: value,
-        id: "#{@example.id}-param-#{param[:name]}-input"
+        value: value
       %>
     </div>
   </div>