lookbook 1.5.1 → 2.0.0.beta.0

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

@@ -1,82 +1,107 @@
-<% content_for :shell do %>
-  <% if @previews.any? || @pages.any? %>
-    
-    <%= lookbook_render :split_layout,
-      alpine_data: "$store.layout.main",
-      ":class": "$store.layout.mobile && '!block'" do |layout| %>
+<% content_for :body do %>
+  <div
+    id="app"
+    x-data="app"
+    x-cloak
+    @popstate.window="handleNavigation"
+    @click.document="hijax"
+    @navigation:start="closeMobileSidebar"
+    class="w-screen h-screen grid grid-rows-[40px_1fr] relative">
 
-      <% layout.with_pane id: "app-sidebar", class: "flex flex-col bg-lookbook-sidebar-bg relative translate-x-0",
-        ":class": "{
-          'transition': $store.layout.mobile,
-          'translate-x-full': $store.layout.mobile && sidebarHidden,
-          '!absolute right-0 bottom-0 top-[40px] h-[calc(100%_-_40px)] w-full max-w-[420px] z-50 border-l border-lookbook-divider': $store.layout.mobile
-        }",
-        "@click.outside": "closeMobileSidebar",
-        cloak: true do %>
-        <% cache do %>
-          <%= lookbook_render :split_layout,
-            alpine_data: "$store.layout.#{@pages.any? && @previews.any? ? "sidebar" : "singleSectionSidebar"}",
-            style: "height: calc(100vh - 2.5rem);" do |layout| %>
+    <%= render "lookbook/partials/user_styles" %>
 
-            <% if @previews.any? %>
-              <% layout.with_pane class: "overflow-hidden" do %>
-                <%= lookbook_render :nav,
-                  id: "previews-nav",
-                  tree: @previews.to_tree,
-                  alpine_data: "$store.nav.previews" do |nav| %>
-                  <%= nav.with_toolbar do |toolbar| %>
-                    <% toolbar.with_section padded: true do %>
-                      <h4 class="pt-1">Previews</h4>
-                    <% end %>
-                    <% toolbar.with_section align: :right, padded: false do %>
-                      <%= lookbook_render :button_group, size: :xs do |group| %>
-                        <% group.with_button icon: :minus_square,
-                          tooltip: "Collapse all",
-                          "@click": "closeAll" %>
+    <%= lookbook_render :header, id: "app-header", debug_menu: @config.debug_menu do |header| %>
+      <% header.branding { @config.project_name } %>
+    <% end %>
+
+    <% if @previews.any? || @pages.any? %>
+      
+      <%= lookbook_render :split_layout,
+        alpine_data: "$store.layout.main",
+        ":class": "$store.layout.mobile && '!block'" do |layout| %>
+
+        <% layout.with_pane id: "app-sidebar", class: "flex flex-col bg-lookbook-sidebar-bg relative translate-x-0",
+          ":class": "{
+            'transition': $store.layout.mobile,
+            'translate-x-full': $store.layout.mobile && sidebarHidden,
+            '!absolute right-0 bottom-0 top-[40px] h-[calc(100%_-_40px)] w-full max-w-[420px] z-50 border-l border-lookbook-divider': $store.layout.mobile
+          }",
+          "@click.outside": "closeMobileSidebar",
+          cloak: true do %>
+
+          <% cache do %>
+
+            <%= lookbook_render :split_layout,
+              alpine_data: "$store.layout.#{@pages.any? && @previews.any? ? "sidebar" : "singleSectionSidebar"}",
+              style: "height: calc(100vh - 2.5rem);" do |layout| %>
+
+              <% if @previews.any? %>
+                <% layout.with_pane class: "overflow-hidden" do %>
+                  <%= lookbook_render :nav,
+                    id: "previews-nav",
+                    tree: @previews.to_tree,
+                    alpine_data: "$store.nav.previews" do |nav| %>
+                    <%= nav.with_toolbar do |toolbar| %>
+                      <% toolbar.with_section padded: true do %>
+                        <h4 class="pt-1">Previews</h4>
+                      <% end %>
+                      <% toolbar.with_section align: :right, padded: false do %>
+                        <%= lookbook_render :button_group, size: :xs do |group| %>
+                          <% group.with_button icon: :minus_square,
+                            tooltip: "Collapse all",
+                            "@click": "closeAll" %>
+                        <% end %>
                       <% end %>
                     <% end %>
+                    <% nav.filter store: "$store.nav.previews.filter", placeholder: "Filter previews by name&hellip;" %>
                   <% end %>
-                  <% nav.with_filter store: "$store.nav.previews.filter", placeholder: "Filter previews by name&hellip;" %>
                 <% end %>
               <% end %>
-            <% end %>
 
-            <% if @pages.any? %>
-              <% layout.with_pane class: "overflow-hidden" do %>
-                <%= lookbook_render :nav,
-                  id: "pages-nav",
-                  tree: @pages.to_tree,
-                  alpine_data: "$store.nav.pages" do |nav| %>
-                  <%= nav.with_toolbar do |toolbar| %>
-                    <% toolbar.with_section padded: true do %>
-                      <h4 class="pt-1">Pages</h4>
-                    <% end %>
-                    <% toolbar.with_section align: :right, padded: false do %>
-                      <%= lookbook_render :button_group, size: :xs do |group| %>
-                        <% group.with_button icon: :minus_square,
-                          tooltip: "Collapse all",
-                          "@click": "closeAll" %>
+              <% if @pages.any? %>
+                <% layout.with_pane class: "overflow-hidden" do %>
+                  <%= lookbook_render :nav,
+                    id: "pages-nav",
+                    tree: @pages.to_tree,
+                    alpine_data: "$store.nav.pages" do |nav| %>
+                    <%= nav.with_toolbar do |toolbar| %>
+                      <% toolbar.with_section padded: true do %>
+                        <h4 class="pt-1">Pages</h4>
+                      <% end %>
+                      <% toolbar.with_section align: :right, padded: false do %>
+                        <%= lookbook_render :button_group, size: :xs do |group| %>
+                          <% group.with_button icon: :minus_square,
+                            tooltip: "Collapse all",
+                            "@click": "closeAll" %>
+                        <% end %>
                       <% end %>
                     <% end %>
                   <% end %>
                 <% end %>
               <% end %>
             <% end %>
+
           <% end %>
         <% end %>
-      <% end %>
 
-      <% layout.with_pane id: "app-main", class: "overflow-hidden h-full", ":class": "$store.layout.mobile && 'w-screen'" do %>
-        <%= content_for?(:main) ? yield(:main) : yield %>
+        <% layout.with_pane id: "app-main", class: "overflow-hidden h-full", ":class": "$store.layout.mobile && 'w-screen'" do %>
+          <%= content_for?(:main) ? yield(:main) : yield %>
+        <% end %>
       <% end %>
+    <% else %>
+      <div id="app-main" class="w-screen h-full overflow-hidden">
+        <%= content_for?(:main) ? yield(:main) : yield %>
+      </div>
     <% end %>
     
-  <% else %>
-    <div id="app-main" class="w-screen h-full overflow-hidden">
-      <%= content_for?(:main) ? yield(:main) : yield %>
-    </div>
-  <% end %>
-  <div class="absolute opacity-0 bg-black inset-0 top-[39px] z-[-1] transition-opacity" :class="($store.layout.mobile && !sidebarHidden) && '!opacity-30 !z-40'" data-cloak></div>
+    <div class="absolute opacity-0 bg-black inset-0 top-[39px] z-[-1] transition-opacity" :class="($store.layout.mobile && !sidebarHidden) && '!opacity-30 !z-40'" data-cloak></div>
+
+    <% if content_for? :dropdowns %>
+      <div class="hidden">
+        <%= content_for :dropdowns -%>
+      </div>
+    <% end %>
+  </div>
 <% end %>
 
-<%= render template: "layouts/lookbook/shell" %>
+<%= render template: "layouts/lookbook/skeleton" %>

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

@@ -0,0 +1,16 @@
+<% content_for :body do %>
+  <div
+    id="app"
+    x-data="app"
+    x-cloak
+    @popstate.window="handleNavigation"
+    @click.document="hijax"
+    class="overflow-hidden">
+    
+    <%= render "lookbook/partials/user_styles" %>
+
+    <%= content_for?(:main) ? yield(:main) : yield %>
+  </div>
+<% end %>
+
+<%= render template: "layouts/lookbook/skeleton" %>

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

@@ -15,7 +15,7 @@
     <% end %>
 
     <%= lookbook_render :header, id: "app-header", debug_menu: @config.debug_menu do |header| %>
-      <% header.with_branding { @config.project_name } %>
+      <% header.branding { @config.project_name } %>
     <% end %>
 
     <%= content_for?(:shell) ? yield(:shell) : yield %>

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

@@ -5,8 +5,8 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
 
-  <link href="<%= asset_path("/css/lookbook.css") %>" rel="stylesheet">
-  <link href="<%= asset_path("/css/themes/#{@config.ui_theme}.css") %>" rel="stylesheet">
+  <link href="<%= lookbook_asset_path("/css/lookbook.css") %>" rel="stylesheet">
+  <link href="<%= lookbook_asset_path("/css/themes/#{@config.ui_theme}.css") %>" rel="stylesheet">
 
   <%- if @theme_overrides.present? %>
     <style media="all">
@@ -17,11 +17,11 @@
   <% if @config.ui_favicon == true %>
     <link
       rel="icon"
-      href="data:image/svg+xml,%3Csvg width='96' height='84' viewBox='0 0 96 84' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath d='M96 0v84H0V0h96Z'/%3E%3C/clipPath%3E%3CclipPath id='b'%3E%3Cpath d='M71.897 0a1.5 1.5 0 0 1 1.31.769l22.605 40.5a1.5 1.5 0 0 1 0 1.462l-22.605 40.5a1.5 1.5 0 0 1-1.31.769H49.481a1 1 0 0 1-.873-1.487L70.812 42.73a1.5 1.5 0 0 0 0-1.462L48.608 1.487A1 1 0 0 1 49.481 0ZM24.655.564l22.72 40.705a1.5 1.5 0 0 1 0 1.462l-22.72 40.705a1 1 0 0 1-1.746 0L.19 42.73a1.5 1.5 0 0 1 0-1.462L22.91.564a1 1 0 0 1 1.746 0Z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23a)'%3E%3Cg clip-path='url(%23b)'%3E%3Cpath fill='<%= url_encode theme.favicon_dark_mode %>' d='M0 0h96v84H0V0z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"
+      href="data:image/svg+xml,%3Csvg width='96' height='84' viewBox='0 0 96 84' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath d='M96 0v84H0V0h96Z'/%3E%3C/clipPath%3E%3CclipPath id='b'%3E%3Cpath d='M71.897 0a1.5 1.5 0 0 1 1.31.769l22.605 40.5a1.5 1.5 0 0 1 0 1.462l-22.605 40.5a1.5 1.5 0 0 1-1.31.769H49.481a1 1 0 0 1-.873-1.487L70.812 42.73a1.5 1.5 0 0 0 0-1.462L48.608 1.487A1 1 0 0 1 49.481 0ZM24.655.564l22.72 40.705a1.5 1.5 0 0 1 0 1.462l-22.72 40.705a1 1 0 0 1-1.746 0L.19 42.73a1.5 1.5 0 0 1 0-1.462L22.91.564a1 1 0 0 1 1.746 0Z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23a)'%3E%3Cg clip-path='url(%23b)'%3E%3Cpath fill='<%= url_encode @theme.favicon_dark_mode %>' d='M0 0h96v84H0V0z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"
       media="(prefers-color-scheme: dark)">
     <link
       rel="icon"
-      href="data:image/svg+xml,%3Csvg width='96' height='84' viewBox='0 0 96 84' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath d='M96 0v84H0V0h96Z'/%3E%3C/clipPath%3E%3CclipPath id='b'%3E%3Cpath d='M71.897 0a1.5 1.5 0 0 1 1.31.769l22.605 40.5a1.5 1.5 0 0 1 0 1.462l-22.605 40.5a1.5 1.5 0 0 1-1.31.769H49.481a1 1 0 0 1-.873-1.487L70.812 42.73a1.5 1.5 0 0 0 0-1.462L48.608 1.487A1 1 0 0 1 49.481 0ZM24.655.564l22.72 40.705a1.5 1.5 0 0 1 0 1.462l-22.72 40.705a1 1 0 0 1-1.746 0L.19 42.73a1.5 1.5 0 0 1 0-1.462L22.91.564a1 1 0 0 1 1.746 0Z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23a)'%3E%3Cg clip-path='url(%23b)'%3E%3Cpath fill='<%= url_encode theme.favicon_light_mode %>' d='M0 0h96v84H0V0z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"
+      href="data:image/svg+xml,%3Csvg width='96' height='84' viewBox='0 0 96 84' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath d='M96 0v84H0V0h96Z'/%3E%3C/clipPath%3E%3CclipPath id='b'%3E%3Cpath d='M71.897 0a1.5 1.5 0 0 1 1.31.769l22.605 40.5a1.5 1.5 0 0 1 0 1.462l-22.605 40.5a1.5 1.5 0 0 1-1.31.769H49.481a1 1 0 0 1-.873-1.487L70.812 42.73a1.5 1.5 0 0 0 0-1.462L48.608 1.487A1 1 0 0 1 49.481 0ZM24.655.564l22.72 40.705a1.5 1.5 0 0 1 0 1.462l-22.72 40.705a1 1 0 0 1-1.746 0L.19 42.73a1.5 1.5 0 0 1 0-1.462L22.91.564a1 1 0 0 1 1.746 0Z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23a)'%3E%3Cg clip-path='url(%23b)'%3E%3Cpath fill='<%= url_encode @theme.favicon_light_mode %>' d='M0 0h96v84H0V0z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"
       media="(prefers-color-scheme: light)">
   <% end %>
 
@@ -32,15 +32,20 @@
     window.SOCKET_PATH = "<%= @engine.websocket.full_mount_path %>";
     <% end %>
   </script>
+
+  <script src="<%= lookbook_asset_path("/js/index.js") %>" defer></script>  
   
-  <script src="<%= asset_path("/js/lookbook.js") %>" defer></script>
-  <% if params[:lookbook_embed] %>
-    <script src="<%= asset_path("/js/embed.js") %>" defer></script>
+  <% if @embed %>
+    <%= render "lookbook/partials/iframe_content_scripts" %>
+  <% else %>
+    <script src="<%= lookbook_asset_path("/js/lookbook.js") %>" defer></script>
   <% end %>
   
+  <%= content_for :scripts %>
+  
   <title><%= [@title, @config.project_name || "Lookbook"].compact.join(" :: ") %></title>
 </head>
 <body>
-  <%= yield :body %>
+  <%= content_for?(:body) ? yield(:body) : yield %>
 </body>
 </html>

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

@@ -0,0 +1,12 @@
+<%= lookbook_render "embed/inspector",
+  target: @target,
+  scenarios: @scenario_choices,
+  panels: @panels,
+  actions: @actions,
+  options: @options,
+  context: {
+    data: @inspector_data,
+    params: @passed_params,
+    dynamic_display_options: @dynamic_display_options,
+    static_display_options: @static_display_options
+  } %>

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.output}\n\n" -%><% end %>
   <%- else -%>
-    <%== beautify(examples.first.output) -%>
+    <%== scenarios.first.output -%>
   <%- end %>
 <% end %>

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,157 @@
-<%= 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,
+    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| %>
+            <%= 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
+              ) %>
+            <% 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",
+              "@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-drawer-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 %>
-          
-          <% 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",
+              "@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",
+              "@click": "switchOrientation",
+              "x-show": "vertical",
+              class: "rotate-90",
+              cloak: true %>
+
+            <% group.with_button id: "hide-drawer-button",
+              icon: :x_circle,
+              tooltip: "Hide drawer",
+              "@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>