lookbook 0.4.8 → 0.5.0

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

@@ -0,0 +1,50 @@
+import tippy from "tippy.js";
+
+export default function tabs() {
+  return {
+    width: 0,
+    tabsWidth: 0,
+    init() {
+      const ro = new ResizeObserver((entries) => {
+        this.width = Math.round(entries[0].contentRect.width);
+      });
+      ro.observe(this.$refs.tabs);
+      this.dropdown = tippy(this.$refs.toggle, {
+        allowHTML: true,
+        interactive: true,
+        trigger: "click",
+        placement: "bottom-end",
+        theme: "menu",
+        content: this.$refs.dropdown,
+      });
+    },
+    get tabs() {
+      return Array.from(this.$refs.tabs.querySelectorAll(":scope > a"));
+    },
+    get visibleTabCount() {
+      let cumulativeWidth = 0;
+      for (let i = 0; i < this.tabs.length; i++) {
+        const el = this.tabs[i];
+        const margin = parseInt(
+          window
+            .getComputedStyle(el)
+            .getPropertyValue("margin-left")
+            .replace("px", ""),
+          10
+        );
+        cumulativeWidth += el.clientWidth + margin;
+        if (cumulativeWidth > this.width) {
+          this.tabsWidth = cumulativeWidth - el.clientWidth;
+          return i;
+        }
+      }
+      return this.tabs.length;
+    },
+    get hiddenTabs() {
+      return this.tabs.slice(this.visibleTabCount, -1);
+    },
+    hideDropdown() {
+      this.dropdown.hide();
+    },
+  };
+}

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

@@ -3,12 +3,19 @@ export default {
   sidebar: {
     defaultWidth: 280,
     minWidth: 200,
-    maxWidth: 500,
+    maxWidth: 350,
   },
   inspector: {
-    tabs: {
-      default: "source",
-      defaultHeight: 200,
+    drawer: {
+      orientation: "horizontal",
+      defaultPanel: "source",
+      defaultHeight: 300,
+      defaultWidth: 500,
+      minWidth: 350,
+      minHeight: 200,
+    },
+    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

@@ -1,17 +1,25 @@
 import config from "../config";
 
 export default function createInspectorStore(Alpine) {
-  const { tabs } = config.inspector;
+  const { drawer, preview } = config.inspector;
   return {
-    panels: {
-      active: Alpine.$persist(tabs.default).as("inspector-panel-active"),
-      height: Alpine.$persist(tabs.defaultHeight).as("inspector-height"),
+    drawer: {
+      hidden: Alpine.$persist(false).as("drawer-hidden"),
+      orientation: Alpine.$persist(drawer.orientation).as("drawer-orientation"),
+      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"),
-      source: Alpine.$persist(false).as("preview-source"),
+      panel: Alpine.$persist(preview.defaultPanel).as("preview-panel"),
       lastWidth: null,
+      lastHeight: null,
+      resizing: false,
     },
   };
 }

data/app/controllers/lookbook/app_controller.rb

@@ -27,8 +27,8 @@ module Lookbook
         begin
           set_params
           @examples = examples_data
-          @preview_srcdoc = render_examples(examples_data).gsub("\"", """)
-          @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
@@ -117,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>
@@ -44,9 +46,13 @@
       x-effect="$store.sidebar.width = Math.min(splits[0] || $store.sidebar.width, $store.sidebar.maxWidth)"
       x-cloak
     >
-      <div class="w-[9px] h-full bg-transparent hover:bg-indigo-100 hover:bg-opacity-20 transition absolute top-0 bottom-0 transform -translate-x-1/2 cursor-[col-resize] z-10"></div>
+      <div class="w-[9px] h-full bg-transparent hover:bg-indigo-100 hover:bg-opacity-20 transition absolute top-0 bottom-0 -translate-x-1/2 cursor-[col-resize] z-10"></div>
     </div>
-    <main id="main" class="h-full overflow-hidden w-full" x-show="$store.layout.desktop || !$store.sidebar.open" x-cloak>
+    <main
+      id="main"
+      class="h-full overflow-hidden w-full"
+      x-show="$store.layout.desktop || !$store.sidebar.open" x-cloak
+    >
       <%= yield %>
     </main>
   </div>

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

@@ -0,0 +1,124 @@
+<div id="drawer" class="bg-white w-full h-full flex flex-col min-w-0">
+  <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 -mb-px"
+        x-effect="$store.inspector.drawer.visibleTabCount = visibleTabCount"
+      >
+        <nav x-ref="tabs" class="flex h-10 space-x-8 flex-grow pr-8">
+          <% panels.each.with_index(1) do |(key,props),i| %>
+            <a
+              id="inspector-tab-<%= key %>-<%= example.id %>"
+              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': isActiveDrawerPanel('<%= key %>'),
+                'border-transparent text-gray-500 hover:text-gray-700': !isActiveDrawerPanel('<%= key %>'),
+                'invisible': (<%= i %> > visibleTabCount)
+              }"
+              @click.stop.prevent="switchDrawerPanel('<%= key %>')"
+              <% if props[:hotkey] %>data-hotkey="<%= props[:hotkey] %>"<% end %>
+            >
+              <%== props[:label] %>
+            </a>
+          <% end %>
+          <div
+            x-ref="toggle"
+            x-show="visibleTabCount !== tabs.length"
+            class="flex-none absolute top-[9px]"
+            :style="`left: ${tabsWidth - 48}px`"
+          >
+            <button class="py-1 px-2 text-gray-500 hover:text-indigo-800">
+              <%= icon "chevrons-right", size: 3.5 %> 
+            </button>
+          </div>
+        </nav>
+        <nav class="hidden">
+          <div x-ref="dropdown" class="min-w-[120px]">
+            <% panels.each.with_index(1) do |(key,props),i| %>
+              <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.panel === '<%= key %>',
+                      'border-transparent text-gray-500 hover:text-gray-700': $store.inspector.drawer.panel !== '<%= key %>',
+                    }"
+                    @click.stop.prevent=" hideDropdown(); switchDrawerPanel('<%= key %>')"
+                  >
+                    <%== props[:label] %>
+                  </a>
+                </div>
+              </template>
+            <% end %>
+          </div>
+        </nav>
+      </div>
+      <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
+            >
+              <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="`${horizontal ? 'pin drawer on right' : 'pin drawer on bottom'}`"
+          @click="toggleOrientation"
+          :class="{'pointer-events-none opacity-30': !canBeVertical}"
+        > 
+          <%= icon "${horizontal ? 'sidebar' : 'credit-card'}",
+            size: 4,
+            class: "scale-[-1] text-gray-400 hover:text-indigo-800" %>
+        </button>
+        <button
+          x-tooltip.theme.lookbook="`hide drawer`"
+          @click="toggleDrawer"
+        > 
+          <%= icon "x-circle",
+            size: 4,
+            class: "text-gray-400 hover:text-indigo-800" %>
+        </button>
+      </div>
+    </div>
+  </div>
+  <div class="bg-white relative flex-grow">
+    <% panels.each do |key, props| %>
+      <div
+        class="h-full w-full absolute inset-0"
+        x-show="isActiveDrawerPanel('<%= key %>')"
+        x-cloak
+      >
+        <div id="inspector-panel-<%= example.id %>-<%= key %>" class="h-full">
+          <%= render props[:template],
+            key: key,
+            examples: examples,
+            clipboard_id: "inspector-panel-#{example.id}-#{key}-clipboard",
+            **props %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>

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

@@ -9,7 +9,7 @@
     @keyup.stop="checkEsc"
     @keyup.f.document="focus"
   >
-  <button class="text-gray-400 hover:text-indigo-500 focus:ring-0 focus:outline-none absolute top-1/2 right-2 transform -translate-y-1/2" @click="clear">
+  <button class="text-gray-400 hover:text-indigo-500 focus:ring-0 focus:outline-none absolute top-1/2 right-2 -translate-y-1/2" @click="clear">
     <%= icon "x", size: 3, class: "hover:text-indigo-500" %>
   </button>
 </div>

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">
-  <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.html.erb

@@ -1,6 +1,6 @@
 <nav id="nav" x-data="nav" @popstate.window="setActive">
   <% if items.any? %>
-    <ul x-ref="items" class="divide-y divide-gray-300">
+    <ul x-ref="items">
       <% items.each do |node| %>
         <%= component "nav_#{node.type}", node: node %>
       <% end %>

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

@@ -1,17 +1,14 @@
-<li id="nav-group-<%= node.id %>" class="<%= classes %>" x-data="navGroup" :class="{hidden}" x-cloak>
-  <div @click="toggle" class="nav-toggle py-[5px]" style="padding-left: calc((<%= node.hierarchy_depth - 1 %> * 12px) + 0.5rem);">
-    <%= icon "${open ? 'chevron-down' : 'chevron-right'}", size: 3, class: "mr-1 text-gray-500" %>
-    <%= icon node.type == :preview ? "layers" : "folder", size: 3.5, class: "mr-1.5 text-indigo-500" %>
-    <div class="nav-label <%= "font-bold" if node.type == :preview %>" <% if node.type == :preview %> @click.stop="toggle(); navigateToFirstChild()"<% end %>>
-      <%= node.label %>
+<li key="<%= node.id %>" class="<%= classes %>">
+  <div id="nav-group-<%= node.id %>" x-data="navGroup" :class="{hidden}" x-cloak>
+    <div @click="toggle" class="nav-toggle py-[5px]" style="padding-left: calc((<%= node.hierarchy_depth - 1 %> * 12px) + 0.5rem);">
+      <%= icon "${open ? 'chevron-down' : 'chevron-right'}", size: 3, class: "mr-1 text-gray-500" %>
+      <%= icon node.type == :preview ? "layers" : "folder", size: 3.5, class: "mr-1.5 text-indigo-500" %>
+      <div class="nav-label <%= "font-bold" if node.type == :preview %>" <% if node.type == :preview %> @click.stop="toggle(); navigateToFirstChild()"<% end %>>
+        <%= node.label %>
+      </div>
     </div>
+    <ul x-ref="items" x-show="open" x-cloak>
+      <%= yield %>
+    </ul>
   </div>
-  <ul
-    x-ref="items"
-    x-show="open"
-    id="nav-group-<%= node.id %>-children-<%= node.type == :preview ? node.get_examples.reject(&:hidden?).size : node.items.size %> %>"
-    x-cloak
-  >
-    <%= yield %>
-  </ul>
 </li>

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

@@ -3,19 +3,21 @@ path = show_path item.path
 display ||= :item
 label ||= item.label
 %>
-<li id="nav-item-<%= item.id %>" x-data="navItem(<%= item.matchers.to_json %>)" :class="{hidden}" data-path="<%= path %>" x-cloak>
-  <a href="<%= path %>"
-    class="nav-link pr-3 py-[5px] flex items-center w-full group transition hover:bg-gray-200 hover:bg-opacity-50"
-    style="padding-left: calc((<%= depth - 1 %> * 12px) + 0.5rem);"
-    x-ref="link"
-    :class="{'!bg-indigo-100':active}"
-    @click.stop.prevent="navigate"
-  >
-    <div class="relative w-3.5 h-3.5 mr-1.5 <%= "ml-[3px]" if display == :node %> " :class="active ? 'text-gray-900' : 'text-indigo-500'">
-      <%= icon display == :node ? "layers" : "eye", size: 3.5, class: "group-hover:text-indigo-800" %>
-    </div>
-    <div class="truncate whitespace-nowrap select-none <%= "font-bold" if display == :node %>">
-      <%= label %>
-    </div>
-  </a>
+<li key="<%= item.id %>">
+  <div id="nav-item-<%= item.id %>" x-data="navItem(<%= item.matchers.to_json %>)" :class="{hidden}" data-path="<%= path %>" x-cloak>
+    <a href="<%= path %>"
+      class="nav-link pr-3 py-[5px] flex items-center w-full group transition hover:bg-gray-200 hover:bg-opacity-50"
+      style="padding-left: calc((<%= depth - 1 %> * 12px) + 0.5rem);"
+      x-ref="link"
+      :class="{'!bg-indigo-100':active}"
+      @click.stop.prevent="navigate"
+    >
+      <div class="relative w-3.5 h-3.5 mr-1.5 <%= "ml-[3px]" if display == :node %> " :class="active ? 'text-gray-900' : 'text-indigo-500'">
+        <%= icon display == :node ? "layers" : "eye", size: 3.5, class: "group-hover:text-indigo-800" %>
+      </div>
+      <div class="truncate whitespace-nowrap select-none <%= "font-bold" if display == :node %>">
+        <%= label %>
+      </div>
+    </a>
+  </div>
 </li>

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

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

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

@@ -1,24 +1,71 @@
-<div id="preview" class="h-full md:h-auto md:min-h-0 w-full bg-gray-50">
-  <div class="relative mx-auto bg-white h-full w-full" x-data="previewWindow" :style="`width: ${$store.layout.desktop ? $store.inspector.preview.width : '100%'}`" x-show="!showSource">
-    <iframe seamless
-      class="absolute h-full inset-0 w-full border-l border-gray-300 md:pr-4 md:-mx-px"
-      src="<%= url_for lookbook.preview_path %>"
-      srcdoc="<%== srcdoc %>"
-      frameborder="0"
-      x-data="sizes"
-      x-effect="preview.width = width; preview.height = height;"
-    ></iframe>
-    <div class="absolute opacity-0 inset-0 pointer-events-none" :class="{ 'pointer-events-none': !$store.layout.reflowing }"></div>
+<div id="preview" class="grid grid-rows-[40px_1fr]">
+  <%= component "header" do %>
     <div
-      class="border-l border-r border-gray-300 bg-white hover:bg-indigo-100 hover:bg-opacity-20 transition absolute right-0 inset-y-0 flex items-center w-4 cursor-[col-resize] select-none"
-      style="touch-action: none"
-      @pointerdown="onResizeStart"
-      @dblclick="toggleFullWidth"
-      x-show="$store.layout.desktop"
-    >
-      <svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
-        <path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
-      </svg>
+      id="preview-tabs-<%= @example.id %>" class="min-w-0 -mb-px">
+      <nav class="flex h-10 space-x-8 flex-grow pr-8">
+      <% panels.each do |key, props| %>
+          <a
+            id="preview-tab-<%= key %>-<%= @example.id %>"
+            href="#preview-panel-<%= key %>"
+            class="whitespace-nowrap pt-2.5 pb-1.5 px-1 border-b-2 cursor-pointer"
+            :class="{
+              'border-indigo-400': isActivePreviewPanel('<%= key %>'),
+              'border-transparent text-gray-500 hover:text-gray-700': !isActivePreviewPanel('<%= key %>'),
+            }"
+            @click.stop.prevent="switchPreviewPanel('<%= key %>')"
+            <% if props[:hotkey] %>data-hotkey="<%= props[:hotkey] %>"<% end %>
+          >
+            <%== props[:label] %>
+          </a>
+        <% end %>
+      </nav>
     </div>
+    <div class="flex items-stretch h-full ml-auto space-x-3">
+      <div
+        class="flex items-center text-xs font-monospace text-gray-700 space-x-1 opacity-50 hover:opacity-100 transition"
+        :class="{'opacity-100': $store.inspector.preview.resizing}"
+        x-show="isActivePreviewPanel('preview')">
+        <span x-text="`${preview.width}px`"></span>
+        <span class="text-gray-500">x</span>
+        <span x-text="`${preview.height}px`"></span>
+      </div>
+      <div class="flex items-center bg-white border-l border-gray-200 space-x-3 text-gray-400 divide-x divide-gray-300 px-3">
+        <div class="flex items-center space-x-3">
+          <button
+            x-tooltip.theme.lookbook="`Refresh preview`"
+            @click.prevent.stop="refresh"
+            data-hotkey="r"
+          >
+            <%= icon "refresh-cw", size: 4, class: "hover:text-indigo-800" %>
+          </button>
+          <a
+            href="<%= preview_path %>"
+            target="_blank"
+            x-tooltip.theme.lookbook="`Open in new window`"
+            data-hotkey="w"
+          >
+            <%= icon "external-link", size: 4, class: "hover:text-indigo-800" %>
+          </a>
+          <button
+            x-tooltip.theme.lookbook="`${drawerHidden ? 'show' : 'hide'} drawer`"
+            @click="toggleDrawer"
+             x-show="drawerHidden"
+            data-hotkey="i"
+          > 
+            <%= icon "${horizontal ? 'credit-card' : 'sidebar'}", size: 4, class: "hover:text-indigo-800 scale-[-1]" %>
+          </button>
+        </div>
+        
+      </div>
+    </div>
+  <% end %>
+  <div class="bg-white relative flex-grow">
+    <% panels.each do |key, props| %>
+      <div class="h-full w-full absolute inset-0" x-show="isActivePreviewPanel('<%= key %>')" x-cloak>
+        <div id="preview-panel-<%= example.id %>-<%= key %>" class="h-full">
+          <%= render props[:template], key: key, examples: examples, **props %>
+        </div>
+      </div>
+    <% end %>
   </div>
 </div>

data/app/views/lookbook/inputs/_select.html.erb

@@ -1,8 +1,7 @@
 <select
   name="<%= name %>"
-  id="<%= id %>"
   class="form-input"
-  @change.stop="update($el.name, $el.value)"
-  x-ref="input">
+  x-model="value"
+  x-data="param('<%= name %>', '<%= value %>')">
   <%= options_for_select(options, value) %>
 </select>

data/app/views/lookbook/inputs/_text.html.erb

@@ -1,8 +1,8 @@
 <input
-  id="<%= id %>"
   class="form-input"
   type="<%= input_type %>"
   name="<%= name %>"
   value="<%= value %>"
-  @keyup.stop.debounce.400="if (validate()) update($el.name, $el.value)"
-  x-ref="input">
+  x-data="param('<%= name %>', '<%= value %>', {debounce: 300})"
+  x-model="value"
+  @keyup.stop>

data/app/views/lookbook/inputs/_textarea.html.erb

@@ -1,8 +1,8 @@
 <textarea
-  id="<%= id %>"
   class="form-input"
   name="<%= name %>"
   rows="4"
-  @keyup.stop.debounce.300="update($el.name, $el.value)"
-  x-ref="input"
+  @keyup.stop
+  x-model="value"
+  x-data="param('<%= name %>', '<%= value %>', {debounce: 300})"
 ><%= value %></textarea>

data/app/views/lookbook/inputs/_toggle.html.erb

@@ -1,13 +1,13 @@
-<div id="<%= id %>" x-init="checked = <%= value == true || value == "true" ? "true" : "false" %>" x-ref="input">
+<div x-data="param('<%= name %>', <%= value %>)" data-morph-strategy="replace">
   <button type="button"
     class="relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-400"
-    :class="{'bg-indigo-500': checked, 'bg-gray-300': !checked}"
+    :class="{'bg-indigo-500': value, 'bg-gray-300': !value}"
     role="switch"
-    @click.stop="checked = !checked; update('<%= name %>', checked)">
+    @click.stop="value = !value;">
     <span
       aria-hidden="true"
-      class="pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
-      :class="{'translate-x-5': checked, 'translate-x-0': !checked}"
+      class="pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow ring-0 transition ease-in-out duration-200"
+      :class="{'translate-x-5': value, 'translate-x-0': !value}"
     ></span>
   </button>
 </div>

data/app/views/lookbook/panels/_notes.html.erb

@@ -1,5 +1,5 @@
 <% items = examples.filter { |example| example[:notes].present? } %>
-<div class="text-gray-600 bg-gray-50 flex-grow min-h-full">
+<div class="text-gray-600 bg-gray-50 h-full overflow-auto" data-morph-strategy="replace">
   <% if items.many? %>
     <div class="divide-y divide-dashed divide-gray-300">
       <% items.each do |item| %>