lookbook 1.5.2 → 2.3.7

data/app/views/lookbook/errors/default.html.erb

@@ -0,0 +1,40 @@
+<div class="bg-red-50 h-[calc(100vh_-_40px)] w-full overflow-y-auto">
+  <div>
+    <header class="px-8 py-6">
+      <h2 class="text-xl font-bold text-red-700"><%= @error.type %></h2>
+    </header>
+
+    <div class="px-8 py-6 mb-8 border-t border-b border-red-200 bg-red-100 text-base leading-relaxed">
+      <pre class="whitespace-pre-wrap font-ui leading-tight text-red-900"><%= @error.message %></pre>
+    </div>
+
+    <% if @error.file_path %>
+      <div class="text-sm mx-8 mb-3 font-mono">
+        <span><%= @error.relative_file_path %></span>
+        <% if @error.line_number %>
+          <span>[line <strong><%= @error.line_number %></strong>]</span>
+        <% end %>
+      </div>
+
+      <div class="px-8">
+        <%= lookbook_render :file_source,
+          file_path: @error.file_path,
+          highlight_lines: [@error.line_number],
+          lines_around_highlight: 5,
+          source: @error.source,
+          class: "border border-red-200" %>
+      </div>
+    <% end %>
+
+    <h3 class="font-bold mb-2 px-8 py-2 mt-8">Full stack trace:</h3>
+    <div class="text-xs font-mono w-full overflow-auto">
+      <div class="px-8 pb-10 text-gray-400 leading-relaxed whitespace-nowrap">
+        <% @error.backtrace.each do |line| %>
+          <div class="hover:text-gray-900 transition-colors duration-100">
+            <%= line %>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  </div>
+</div>

data/app/views/lookbook/errors/not_found.html.erb

@@ -0,0 +1,10 @@
+<%= render "lookbook/partials/blank_slate" do %>
+  <%= lookbook_render :message,
+      id: "not-found-message",
+      title: @error.message,
+      icon: :file_x,
+      icon_position: :right,
+      theme: :error do %>
+      <%= @error.detail || "It may have been moved or deleted." %>
+    <% end %>
+<% end %>

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

@@ -1,25 +1,40 @@
-<div id="landing" class="flex flex-col items-center justify-center h-full w-full">
-  <div class="text-center" id="landing-<%= @previews.any? ? "with" : "no" %>-content">
-  <% if @config.project_name.downcase == "lookbook" %>
-    <div class="flex justify-center pb-4">
-      <svg class="flex-none mx-auto w-[140px]" viewBox="0 0 275 36">
-        <g fill-rule="nonzero" fill="none">
-          <path d="M4.536 35c-1.408 0-2.504-.392-3.288-1.176-.784-.784-1.176-1.88-1.176-3.288V5.576c0-1.44.384-2.544 1.152-3.312.768-.768 1.856-1.152 3.264-1.152 1.44 0 2.536.384 3.288 1.152.752.768 1.128 1.872 1.128 3.312v22.08h11.712c1.216 0 2.152.312 2.808.936.656.624.984 1.528.984 2.712 0 1.184-.328 2.096-.984 2.736-.656.64-1.592.96-2.808.96H4.536ZM42.066.632c3.425 0 6.425.72 9 2.16 2.577 1.44 4.585 3.464 6.025 6.072 1.44 2.608 2.16 5.672 2.16 9.192 0 2.624-.408 5.008-1.224 7.152-.816 2.144-1.984 3.992-3.504 5.544-1.52 1.552-3.336 2.736-5.448 3.552-2.112.816-4.448 1.224-7.008 1.224-3.424 0-6.432-.728-9.024-2.184-2.592-1.456-4.6-3.496-6.024-6.12-1.424-2.624-2.136-5.68-2.136-9.168 0-2.624.408-5.008 1.224-7.152.816-2.144 1.984-3.984 3.504-5.52 1.52-1.536 3.336-2.712 5.448-3.528C37.17 1.04 39.507.632 42.067.632Zm0 7.392c-1.663 0-3.095.392-4.295 1.176-1.2.784-2.12 1.92-2.76 3.408-.64 1.488-.96 3.304-.96 5.448 0 3.168.704 5.64 2.112 7.416 1.408 1.776 3.376 2.664 5.904 2.664 1.696 0 3.136-.4 4.32-1.2 1.07-.723 1.917-1.733 2.543-3.031-.39-1.314-.934-2.855-2.087-5.286-.07-.147-.07-.233 0-.38l2.187-5.84a8.262 8.262 0 0 0-1.06-1.735c-1.407-1.76-3.375-2.64-5.903-2.64ZM80.27.632c3.424 0 6.424.72 9 2.16 2.576 1.44 4.584 3.464 6.024 6.072 1.44 2.608 2.16 5.672 2.16 9.192 0 2.624-.408 5.008-1.224 7.152-.816 2.144-1.984 3.992-3.504 5.544-1.52 1.552-3.336 2.736-5.448 3.552-2.112.816-4.448 1.224-7.008 1.224-3.424 0-6.432-.728-9.024-2.184-2.592-1.456-4.6-3.496-6.024-6.12-1.424-2.624-2.136-5.68-2.136-9.168 0-2.624.408-5.008 1.224-7.152.816-2.144 1.984-3.984 3.504-5.52 1.52-1.536 3.336-2.712 5.448-3.528C75.373 1.04 77.71.632 80.27.632Zm0 7.392c-1.664 0-3.096.392-4.296 1.176-1.2.784-2.12 1.92-2.76 3.408-.64 1.488-.96 3.304-.96 5.448 0 3.168.704 5.64 2.112 7.416 1.408 1.776 3.376 2.664 5.904 2.664 1.696 0 3.136-.4 4.32-1.2.999-.675 1.804-1.6 2.416-2.775-.395-1.37-.933-2.95-2.162-5.542-.07-.147-.07-.233 0-.38l2.276-6.08a8.166 8.166 0 0 0-.946-1.495c-1.408-1.76-3.376-2.64-5.904-2.64Zm26.299 27.408c-1.408 0-2.496-.392-3.264-1.176-.768-.784-1.152-1.88-1.152-3.288V5.192c0-1.472.384-2.584 1.152-3.336.768-.752 1.856-1.128 3.264-1.128 1.44 0 2.536.376 3.288 1.128.752.752 1.128 1.864 1.128 3.336v10.464h.096l11.664-12.864a7.705 7.705 0 0 1 1.944-1.512c.688-.368 1.464-.552 2.328-.552 1.344 0 2.312.344 2.904 1.032.592.688.864 1.488.816 2.4-.048.912-.424 1.752-1.128 2.52l-11.616 12.336v-3.6l12.192 13.776c.832.928 1.248 1.88 1.248 2.856s-.328 1.784-.984 2.424c-.656.64-1.624.96-2.904.96-1.088 0-1.96-.216-2.616-.648-.656-.432-1.368-1.08-2.136-1.944L111.08 19.736h-.096v11.232c0 1.408-.368 2.504-1.104 3.288-.736.784-1.84 1.176-3.312 1.176Z" fill="#919191"/>
-          <path d="M140.403 35c-1.504 0-2.648-.392-3.432-1.176-.784-.784-1.176-1.912-1.176-3.384V5.72c0-1.472.392-2.6 1.176-3.384.784-.784 1.928-1.176 3.432-1.176h11.712c2.432 0 4.504.36 6.216 1.08 1.712.72 3.016 1.736 3.912 3.048.896 1.312 1.344 2.848 1.344 4.608 0 1.984-.568 3.68-1.704 5.088-1.136 1.408-2.68 2.368-4.632 2.88v-.768c2.304.416 4.088 1.344 5.352 2.784 1.264 1.44 1.896 3.28 1.896 5.52 0 2.976-1.064 5.32-3.192 7.032-2.128 1.712-5.032 2.568-8.712 2.568h-12.192Zm3.84-6.48h7.152c1.632 0 2.824-.312 3.576-.936.752-.624 1.128-1.56 1.128-2.808 0-1.248-.376-2.176-1.128-2.784-.752-.608-1.944-.912-3.576-.912h-7.152v7.44Zm0-13.92h6.288c1.6 0 2.776-.288 3.528-.864.752-.576 1.128-1.456 1.128-2.64 0-1.184-.376-2.056-1.128-2.616-.752-.56-1.928-.84-3.528-.84h-6.288v6.96Zm41.034 20.928c-3.424 0-6.432-.728-9.024-2.184-2.592-1.456-4.6-3.496-6.024-6.12-1.424-2.624-2.136-5.68-2.136-9.168 0-2.624.408-5.008 1.224-7.152.816-2.144 1.984-3.984 3.504-5.52 1.52-1.536 3.336-2.712 5.448-3.528 2.112-.816 4.448-1.224 7.008-1.224 3.424 0 6.424.72 9 2.16 2.576 1.44 4.584 3.464 6.024 6.072 1.44 2.608 2.16 5.672 2.16 9.192 0 2.624-.408 5.008-1.224 7.152-.816 2.144-1.984 3.992-3.504 5.544-1.52 1.552-3.336 2.736-5.448 3.552-2.112.816-4.448 1.224-7.008 1.224Zm0-7.392c1.696 0 3.136-.4 4.32-1.2 1.184-.8 2.096-1.952 2.736-3.456.64-1.504.96-3.312.96-5.424 0-3.168-.704-5.632-2.112-7.392-1.408-1.76-3.376-2.64-5.904-2.64-1.664 0-3.096.392-4.296 1.176-1.2.784-2.12 1.92-2.76 3.408-.64 1.488-.96 3.304-.96 5.448 0 3.168.704 5.64 2.112 7.416 1.408 1.776 3.376 2.664 5.904 2.664Zm38.203 7.392c-3.424 0-6.432-.728-9.024-2.184-2.592-1.456-4.6-3.496-6.024-6.12-1.424-2.624-2.136-5.68-2.136-9.168 0-2.624.408-5.008 1.224-7.152.816-2.144 1.984-3.984 3.504-5.52 1.52-1.536 3.336-2.712 5.448-3.528 2.112-.816 4.448-1.224 7.008-1.224 3.424 0 6.424.72 9 2.16 2.576 1.44 4.584 3.464 6.024 6.072 1.44 2.608 2.16 5.672 2.16 9.192 0 2.624-.408 5.008-1.224 7.152-.816 2.144-1.984 3.992-3.504 5.544-1.52 1.552-3.336 2.736-5.448 3.552-2.112.816-4.448 1.224-7.008 1.224Zm0-7.392c1.696 0 3.136-.4 4.32-1.2 1.184-.8 2.096-1.952 2.736-3.456.64-1.504.96-3.312.96-5.424 0-3.168-.704-5.632-2.112-7.392-1.408-1.76-3.376-2.64-5.904-2.64-1.664 0-3.096.392-4.296 1.176-1.2.784-2.12 1.92-2.76 3.408-.64 1.488-.96 3.304-.96 5.448 0 3.168.704 5.64 2.112 7.416 1.408 1.776 3.376 2.664 5.904 2.664Zm26.299 7.296c-1.408 0-2.496-.392-3.264-1.176-.768-.784-1.152-1.88-1.152-3.288V5.192c0-1.472.384-2.584 1.152-3.336.768-.752 1.856-1.128 3.264-1.128 1.44 0 2.536.376 3.288 1.128.752.752 1.128 1.864 1.128 3.336v10.464h.096l11.664-12.864a7.705 7.705 0 0 1 1.944-1.512c.688-.368 1.464-.552 2.328-.552 1.344 0 2.312.344 2.904 1.032.592.688.864 1.488.816 2.4-.048.912-.424 1.752-1.128 2.52l-11.616 12.336v-3.6l12.192 13.776c.832.928 1.248 1.88 1.248 2.856s-.328 1.784-.984 2.424c-.656.64-1.624.96-2.904.96-1.088 0-1.96-.216-2.616-.648-.656-.432-1.368-1.08-2.136-1.944L254.29 19.736h-.096v11.232c0 1.408-.368 2.504-1.104 3.288-.736.784-1.84 1.176-3.312 1.176Z" fill="#ABABAB"/>
-        </g>
-      </svg>
-    </div>
-  <% elsif @config.project_name != false %>
-    <h5 class="text-base text-lookbook-blank-slate-title truncate uppercase font-black tracking-wide mb-2">
-      <%= @config.project_name %>
-    </h5>
+<% 
+sidebar_panels_config = @config.preview_inspector.sidebar_panels.map(&:to_sym)
+%>
+
+<%= render "lookbook/partials/blank_slate" do %>
+  <% if @blank_slate %>
+    <%= lookbook_render :message,
+      id: "welcome-message",
+      title: "Welcome to your Lookbook!",
+      icon: :logo do %>
+      <p>
+        There isn't much to see yet<% if sidebar_panels_config.any? %>, but<% end %>
+        <% if sidebar_panels_config.include?(:previews) %>
+          <%= link_to "component previews",
+            "#{@config.links.docs}/guide/previews",
+            target: "_blank"
+          %>  
+        <% end %>
+        <% if sidebar_panels_config.many? %>and<% end %>
+        <% if sidebar_panels_config.include?(:pages) %>
+          <%= link_to "content pages",
+            "#{@config.links.docs}/guide/pages",
+            target: "_blank"
+          %>
+        <% end %>
+        <% if sidebar_panels_config.any? %>
+          will show up here as soon as they are added.
+        <% end %>
+      </p>
+    <% end %>
+  <% else %>
+    <%= lookbook_render :message,
+      id: "get-started-message",
+      title: @config.project_name,
+      icon: :inspect,
+      icon_position: :right do %>
+      <p>Select a preview from the nav to get started.</p>
+    <% end %>
   <% end %>
-    <div class="opacity-60">
-      <% if @previews.any? %>
-        <p>Select a preview from the nav to get started.</p>
-      <% else %>
-        <p><a class="underline" href="https://lookbook.build/guide/previews" target="_blank">Create a preview</a> to get started.</p>
-      <% end %>
-    </div>
-  </div>
-</div>
+<% end %>

data/app/views/lookbook/inspector/inputs/_color.html.erb

@@ -1,5 +1,6 @@
 <%= text_field_tag(name, value,
   **input_options,
   type: "color",
-  "x-model.throttle.300ms": "value"
+  "x-on:change.stop": "",
+  "x-on:blur": "value = $el.value",
 ) %>

data/app/views/lookbook/inspector/inputs/_text_two_step.html.erb

@@ -0,0 +1,19 @@
+<div x-data="{changed: false, applyChange(){ this.value = this.$refs.input.value; this.changed = false; }}">
+
+  <div x-on:change.stop="changed = ($event.target.value !== value)" class="flex items-center gap-2">
+    <%= text_field_tag(name, value,
+      **input_options,
+      type: input,
+      class: "flex-grow",
+      "x-ref": "input",
+      "x-on:keydown.enter.stop": "applyChange"
+    ) %>
+
+    <%= lookbook_render :button,
+      icon: :check,
+      tooltip: "Apply changes",
+      class: "flex-none !bg-lookbook-button-bg hover:!bg-lookbook-button-bg-hover rounded-md !text-lookbook-button-text",
+      "x-show": "changed",
+      "x-on:click": "applyChange" %>
+  </div>
+</div>

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

@@ -15,6 +15,6 @@ span_classes = [
   class: class_names(button_classes),
   role: "switch",
   type: "button",
-  "@click.stop": "value = value == 'true' ? 'false' : 'true'", escape: false do %>
+  "x-on:click.stop": "value = value == 'true' ? 'false' : 'true'", escape: false do %>
   <%= tag.span "aria-hidden": true, class: class_names(span_classes) %>
 <% end %>

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

@@ -1,4 +1,4 @@
-<% items = examples.select { |example| example.notes.present? } %>
+<% items = scenarios.select { |scenario| scenario.notes.present? } %>
 <% if items.many? %>
   <div class="divide-y divide-dashed divide-lookbook-divider bg-lookbook-prose-bg h-full w-full">
     <% items.each do |item| %>

data/app/views/lookbook/inspector/panels/_output.html.erb

@@ -1,7 +1,7 @@
 <%= lookbook_render :code, line_numbers: true, full_height: true do -%>
-  <% if examples.many? -%>
-    <% examples.each do |example| -%><%== "<!-- #{example.label} -->\n#{beautify(example.output)}\n\n" -%><% end %>
+  <% if scenarios.many? -%>
+    <% scenarios.each do |scenario| -%><%== "<!-- #{scenario.label} -->\n#{scenario.beautified_output}\n\n" -%><% end %>
   <%- else -%>
-    <%== beautify(examples.first.output) -%>
+    <%== scenarios.first.beautified_output -%>
   <%- end %>
 <% end %>

data/app/views/lookbook/inspector/panels/_preview.html.erb

@@ -1,5 +1,6 @@
 <div class="overflow-hidden h-full w-full">
   <%= lookbook_render :viewport,
+    key: (lookbook_preview_path(request.query_parameters).force_encoding('UTF-8').parameterize unless Rails.env.test?),
     iframe_id: "preview-iframe",
     src: lookbook_preview_path(request.query_parameters.merge(lookbook_timestamp: Time.now)),
     alpine_data: "$store.inspector.main",

data/app/views/lookbook/inspector/panels/_source.html.erb

@@ -1,11 +1,11 @@
 <div class="h-full">
-  <% if examples.many? %>
-    <%= lookbook_render :code, language: examples.first.source_lang[:name], line_numbers: true, full_height: true do -%>
-<%- examples.each.with_index(1) do |example, i| -%>
-<%== "#{sprintf example.source_lang[:comment], example.label}\n#{example.source}\n#{"\n" if i < examples.size}" %><% end %>
+  <% if scenarios.many? %>
+    <%= lookbook_render :code, language: scenarios.first.source_lang[:name], line_numbers: true, full_height: true do -%>
+<%- scenarios.each.with_index(1) do |scenario, i| -%>
+<%== "#{sprintf scenario.source_lang[:comment], scenario.label}\n#{scenario.source}\n#{"\n" if i < scenarios.size}" %><% end %>
     <% end %>
   <% else %>
-    <% example = examples.first %>
-    <%= lookbook_render :code, language: example.source_lang[:name], line_numbers: true, full_height: true do %><%== example.source %><% end %>
+    <% scenario = scenarios.first %>
+    <%= lookbook_render :code, language: scenario.source_lang[:name], line_numbers: true, full_height: true do %><%== scenario.source %><% end %>
   <% end %>
 </div>

data/app/views/lookbook/inspector/show.html.erb

@@ -1,150 +1,169 @@
-<%= lookbook_render :split_layout,
-  alpine_data: "$store.layout.inspector",
-  ":class": "($store.inspector.drawer.hidden || #{@drawer_panels.none?}) && '!grid-rows-[1fr] !grid-cols-[1fr]'",
-  data: {
-    "preview-target": @target.id
-  } do |layout| %>
-
-  <%= layout.with_pane class: "flex flex-col h-full overflow-hidden",
-    "x-effect": "forceOrientation = (layoutWidth < $store.inspector.minVerticalSplitWidth) ? 'horizontal' : null" do %>
-  
-    <%= lookbook_render :toolbar, id: "main-toolbar" do |toolbar| %>
-      <% toolbar.with_section ":class": "layoutResizing && 'overflow-hidden'" do %>
-        <%= lookbook_render :tabs, alpine_data: "$store.inspector.main", id: "inspector-tabs-main" do |tabs| %>
-          <%= @main_panels.each do |panel| %>
-            <% tabs.with_tab name: panel.name,
-              label: panel.label,
-              hotkey: panel.hotkey,
-              disabled: panel.disabled %>
+<main class="h-[calc(100vh_-_2.5rem)]">
+  <%= lookbook_render :split_layout,
+    id: "inspector",
+    alpine_data: "$store.layout.inspector",
+    ":class": "($store.inspector.drawer.hidden || #{@drawer_panels.none?}) && '!grid-rows-[1fr] !grid-cols-[1fr]'",
+    data: {
+      "preview-target": @target.id
+    } do |layout| %>
+
+    <%= layout.with_pane class: "flex flex-col h-full overflow-hidden",
+      "x-effect": "forceOrientation = (layoutWidth < $store.inspector.minVerticalSplitWidth) ? 'horizontal' : null" do %>
+    
+      <%= lookbook_render :toolbar, id: "main-toolbar" do |toolbar| %>
+        <% toolbar.with_section ":class": "layoutResizing && 'overflow-hidden'" do %>
+          <%= lookbook_render :tabs, alpine_data: "$store.inspector.main", id: "inspector-tabs-main" do |tabs| %>
+            <%= @main_panels.each do |panel| %>
+              <% tabs.with_tab name: panel.name,
+                label: panel.label,
+                hotkey: panel.hotkey,
+                disabled: panel.disabled %>
+            <% end %>
           <% end %>
         <% end %>
-      <% end %>
 
-      <% toolbar.with_section align: :right, class: "flex-none" do %>
-        <% if @dynamic_display_options.any? %>
-          <%= lookbook_render "display_options/editor" do |editor| %>
-            <% @dynamic_display_options.each do |key, opts| %>
-              <% editor.with_field name: key, opts: opts, value: @static_display_options[key] %>
+        <% toolbar.with_section align: :right, class: "flex-none" do %>
+          <% if @dynamic_display_options.any? %>
+            <%= lookbook_render "display_options/editor" do |editor| %>
+              <% @dynamic_display_options.each do |key, opts| %>
+                <% editor.with_field name: key, opts: opts, value: @static_display_options[key] %>
+              <% end %>
             <% end %>
           <% end %>
         <% end %>
-      <% end %>
-
-      <% toolbar.with_section divide: :left, class: "flex-none relative z-10" do %>
-        <%= lookbook_render :button_group do |group| %>
-          <% group.with_button icon: :link,
-            tooltip: "Copy preview URL",
-            copy: true do %>
-            <%= lookbook_inspect_url(@target.lookup_path, request.query_parameters) %>
-          <% end %>
 
-          <% if @pages.any? %>
-            <% group.with_button icon: :code,
-              tooltip: "Copy page embed code",
+        <% toolbar.with_section divide: :left, class: "flex-none relative z-10" do %>
+          <%= lookbook_render :button_group do |group| %>
+            <% if @engine.preview_embeds_allowed? %>
+              <%= group.with_button id: "embed-generator-dropdown-button", icon: :code_2, tooltip: "Get embed code" do |button| %>
+                <% button.with_dropdown.with_content(lookbook_render :embed_code_dropdown,
+                  pages: @pages,
+                  preview: @preview,
+                  target: @target,
+                  params: request.query_parameters,
+                  policy: @config.preview_embeds.policy
+                ) %>
+              <% end %>
+            <% end %>
+            <% group.with_button id: "copy-preview-url-button",
+              icon: :link,
+              tooltip: "Copy preview URL",
               copy: true do %>
-                &lt;%= embed <%= @preview.preview_class_name %>, :<%= @target.name %>, params: <%= request.query_parameters.deep_symbolize_keys.to_s %> %&gt;
+              <%= lookbook_inspect_url(@target.lookup_path, request.query_parameters) %>
             <% end %>
+            
+            <% group.with_button id: "refresh-preview-button",
+              icon: :refresh_cw,
+              tooltip: "Refresh preview",
+              "x-on:click.stop": "startSpin(); $dispatch('viewport:reload'); stopSpin(500);" %>
+
+            <% group.with_button id: "open-preview-button",
+              icon: :external_link,
+              href: lookbook_preview_path(@target.lookup_path, request.query_parameters),
+              tooltip: "Open preview in new window",
+              target: "_blank" %>
+
+            <% group.with_button id: "show-vertical-drawer-button",
+              icon: "sidebar",
+              tooltip: "Show drawer",
+              "x-on:click": "$store.inspector.drawer.hidden = false",
+              class: "rotate-180",
+              "x-show": "$store.inspector.drawer.hidden && vertical",
+              cloak: true %>
+
+            <% group.with_button id: "show-bottom-drawer-button",
+              icon: "credit-card",
+              tooltip: "Show drawer",
+              "x-on:click": "$store.inspector.drawer.hidden = false",
+              class: "rotate-180",
+              "x-show": "$store.inspector.drawer.hidden && !vertical",
+              cloak: true %>
           <% end %>
-          
-          <% group.with_button icon: :refresh_cw,
-            tooltip: "Refresh preview",
-            "@click.stop": "startSpin(); $dispatch('viewport:reload'); stopSpin(500);" %>
-
-          <% group.with_button icon: :external_link,
-            href: lookbook_preview_path(@target.lookup_path, request.query_parameters),
-            tooltip: "Open preview in new window",
-            target: "_blank" %>
-
-          <% group.with_button icon: "vertical ? 'sidebar' : 'credit-card'",
-            tooltip: "Show drawer",
-            "@click": "$store.inspector.drawer.hidden = false",
-            class: "rotate-180",
-            "x-show": "$store.inspector.drawer.hidden",
-            cloak: true %>
         <% end %>
       <% end %>
-    <% end %>
 
-    <div class="h-full relative overflow-auto">
-      <%= lookbook_render :tab_panels, alpine_data: "$store.inspector.main", id: "inspector-panels-main" do |tabs| %>
-        <% @main_panels.each do |panel| %>
-          <% tabs.with_panel name: panel.name do %>
-            <%= lookbook_render :inspector_panel, name: panel.name do %>
-              <%= render panel.partial, **@inspector_data, panel: panel, **panel.locals %>
+      <div class="h-full relative overflow-auto">
+        <%= lookbook_render :tab_panels, alpine_data: "$store.inspector.main", id: "inspector-panels-main" do |tabs| %>
+          <% @main_panels.each do |panel| %>
+            <% tabs.with_panel name: panel.name do %>
+              <%= lookbook_render :inspector_panel, name: panel.name do %>
+                <%= render panel.partial, **@inspector_data, panel: panel, **panel.locals %>
+              <% end %>
             <% end %>
           <% end %>
         <% end %>
-      <% end %>
-    </div>
-  <% end %>
-
-  <%= layout.with_pane class: "flex flex-col h-full overflow-hidden bg-lookbook-drawer-bg",
-    "x-show": "!$store.inspector.drawer.hidden && #{@drawer_panels.any?}" do %>
+      </div>
+    <% end %>
 
-    <%= lookbook_render :toolbar, id: "drawer-toolbar" do |toolbar| %>
-      <% toolbar.with_section ":class": "layoutResizing && 'overflow-hidden'" do %>
-        <%= lookbook_render :tabs, alpine_data: "$store.inspector.drawer", id: "inspector-tabs-drawer" do |tabs| %>
-          <%= @drawer_panels.each do |panel| %>
-            <% tabs.with_tab name: panel.name,
-              label: panel.label,
-              hotkey: panel.hotkey,
-              disabled: panel.disabled %>
+    <%= layout.with_pane class: "flex flex-col h-full overflow-hidden bg-lookbook-drawer-bg",
+      "x-show": "!$store.inspector.drawer.hidden && #{@drawer_panels.any?}" do %>
+
+      <%= lookbook_render :toolbar, id: "drawer-toolbar" do |toolbar| %>
+        <% toolbar.with_section ":class": "layoutResizing && 'overflow-hidden'" do %>
+          <%= lookbook_render :tabs, alpine_data: "$store.inspector.drawer", id: "inspector-tabs-drawer" do |tabs| %>
+            <%= @drawer_panels.each do |panel| %>
+              <% tabs.with_tab name: panel.name,
+                label: panel.label,
+                hotkey: panel.hotkey,
+                disabled: panel.disabled %>
+            <% end %>
           <% end %>
         <% end %>
-      <% end %>
 
-      <% toolbar.with_section align: :right,  class: "flex-none relative z-10" do %>
-        <%= lookbook_render :button_group do |group| %>
-          <%= @drawer_panels.select { |p| !p.disabled && p.copy }.each do |panel| %>
-            <% group.with_button icon: :copy,
-              tooltip: "Copy panel contents",
-              copy: !!panel.copy,
-              "x-show": "$store.inspector.drawer.activeTab === '#{panel.name}'",
-              cloak: true do %>
-              <%= panel.copy ? panel.copy : "" %>
-              <% end %>
-          <% end %>  
+        <% toolbar.with_section align: :right,  class: "flex-none relative z-10" do %>
+          <%= lookbook_render :button_group do |group| %>
+            <%= @drawer_panels.select { |p| !p.disabled && p.copy }.each do |panel| %>
+              <% group.with_button id: "copy-panel-contents-button",
+                icon: :copy,
+                tooltip: "Copy panel contents",
+                copy: !!panel.copy,
+                "x-show": "$store.inspector.drawer.activeTab === '#{panel.name}'",
+                cloak: true do %>
+                <%= panel.copy ? panel.copy : "" %>
+                <% end %>
+            <% end %>  
+          <% end %>
         <% end %>
-      <% end %>
-
-      <% toolbar.with_section divide: :left, class: "flex-none relative z-10" do %>
-        <%= lookbook_render :button_group do |group| %>
-
-          <% group.with_button icon: :corner_up_right,
-            tooltip: "Move drawer to right",
-            "@click": "switchOrientation",
-            "x-show": "horizontal && layoutWidth > $store.inspector.minVerticalSplitWidth",
-            cloak: true %>
 
-          <% group.with_button icon: :corner_up_right,
-            "x-show": "horizontal && layoutWidth <= $store.inspector.minVerticalSplitWidth",
-            disabled: true,
-            cloak: true %>
-
-          <% group.with_button icon: :corner_left_down,
-            tooltip: "Move drawer to bottom",
-            "@click": "switchOrientation",
-            "x-show": "vertical",
-            cloak: true %>
-
-          <% group.with_button icon: :x_circle,
-            tooltip: "Hide drawer",
-            "@click": "$store.inspector.drawer.hidden = true",
-            cloak: true %>
+        <% toolbar.with_section divide: :left, class: "flex-none relative z-10" do %>
+          <%= lookbook_render :button_group do |group| %>
+
+            <% group.with_button id: "drawer-to-right-button",
+              icon: :sidebar_open,
+              tooltip: "Pin drawer on right",
+              "x-on:click": "switchOrientation",
+              "x-show": "horizontal",
+              ":class": "{'pointer-events-none opacity-50 !cursor-not-allowed': horizontal && layoutWidth <= $store.inspector.minVerticalSplitWidth}",
+              cloak: true %>
+
+            <% group.with_button id: "drawer-to-bottom-button",
+              icon: :sidebar_open,
+              tooltip: "Pin drawer on bottom",
+              "x-on:click": "switchOrientation",
+              "x-show": "vertical",
+              class: "rotate-90",
+              cloak: true %>
+
+            <% group.with_button id: "hide-drawer-button",
+              icon: :x_circle,
+              tooltip: "Hide drawer",
+              "x-on:click": "$store.inspector.drawer.hidden = true",
+              cloak: true %>
+          <% end %>
         <% end %>
-      <% end %>
-    <% end %> 
-
-    <div class="h-full overflow-auto">
-      <%= lookbook_render :tab_panels, alpine_data: "$store.inspector.drawer", id: "inspector-panels-drawer" do |tabs| %>
-        <% @drawer_panels.each do |panel| %>
-          <% tabs.with_panel name: panel.name do %>
-            <%= lookbook_render :inspector_panel, name: panel.name do %>
-              <%= render panel.partial, **@inspector_data, panel: panel, **panel.locals %>
+      <% end %> 
+
+      <div class="h-full overflow-auto">
+        <%= lookbook_render :tab_panels, alpine_data: "$store.inspector.drawer", id: "inspector-panels-drawer" do |tabs| %>
+          <% @drawer_panels.each do |panel| %>
+            <% tabs.with_panel name: panel.name do %>
+              <%= lookbook_render :inspector_panel, name: panel.name do %>
+                <%= render panel.partial, **@inspector_data, panel: panel, **panel.locals %>
+              <% end %>
             <% end %>
           <% end %>
         <% end %>
-      <% end %>
-    </div>
+      </div>
+    <% end %>
   <% end %>
-<% end %>
+</main>