lookbook 2.3.0 → 2.3.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '0277029efee9bfc07832f5bc2ea7d1a57063a81e2e2986978c93abca8750fbe2'
-  data.tar.gz: c03b8c178645b7dba6572d37711cb4664ea4175fa56430acd595a369069d54c9
+  metadata.gz: c1cd08282fd3abb0cb21cebd971a24d255839e0137abb7bea4e58770655b7329
+  data.tar.gz: 3c976d7cd1b69e72c667b7ffdd059b89a1c13cd6d69386650b88a3bb05d3d315
 SHA512:
-  metadata.gz: c34fbd701d1f7818dea444b9ad899b7dce012968a0cc0038dd197bf0e70ea2af105c2d299e3ac21302f9276d0dde162b56cfebb8f45ba4e7eb9c1ab1455c4555
-  data.tar.gz: 50613e6f04c758f5c93fa4ff659a0a0a4c1a903e80d167a3c1aead2f6e5af7278549b260255405c077fe1f35ba920fc050fdfdb0dab4d37ce7df18658f6ace47
+  metadata.gz: ff9c90f7415fc2ba4d2441e2d348bebe4ad2bb2395437cec315ad78af9687f00164d583ad1add293309bc04fe3b99e24da1ba727576ad58d334c16a457f190ee
+  data.tar.gz: 823fcbef26329719ada1600a8a0e15432edbf951232a1fde11f14f78d7bd758188e237159fb8192e8a4ff013a9dde4ced5d987de326fde06a0b98cd84dc705ab

data/README.md

@@ -7,7 +7,7 @@
 <p><strong><a href="https://lookbook.build">Documentation</a> &nbsp;|&nbsp; <a href="http://demo.lookbook.build/lookbook">Demo site</a></strong></p>
 
 <p><a href="https://rubygems.org/gems/lookbook"><img src="https://img.shields.io/gem/v/lookbook" alt="Gem version"></a>
-<a href="https://github.com/ViewComponent/lookbook/actions/workflows/ci.yml"><img src="https://github.com/ViewComponent/lookbook/actions/workflows/ci.yml/badge.svg" alt="CI status"></a></p>
+<a href="https://github.com/lookbook-hq/lookbook/actions/workflows/ci.yml"><img src="https://github.com/lookbook-hq/lookbook/actions/workflows/ci.yml/badge.svg" alt="CI status"></a></p>
 
 </div>
 
@@ -32,9 +32,9 @@ Lookbook is implemented as an isolated [Rails Engine](https://guides.rubyonrails
 
 This repository contains:
 
-* The Lookbook source code ([`/app`](https://github.com/ViewComponent/lookbook/tree/main/app), [`/lib`](https://github.com/ViewComponent/lookbook/tree/main/lib), [`/config`](https://github.com/ViewComponent/lookbook/tree/main/config), etc)
-* The Lookbook [documentation site](#docs-site) source code and content ([`/docs`](https://github.com/ViewComponent/lookbook/tree/main/docs)).
-* A [test suite](#testing) with a 'runable' dummy app ([`/spec`](https://github.com/ViewComponent/lookbook/tree/main/spec)).
+* The Lookbook source code ([`/app`](https://github.com/lookbook-hq/lookbook/tree/main/app), [`/lib`](https://github.com/lookbook-hq/lookbook/tree/main/lib), [`/config`](https://github.com/lookbook-hq/lookbook/tree/main/config), etc)
+* The Lookbook [documentation site](#docs-site) source code and content ([`/docs`](https://github.com/lookbook-hq/lookbook/tree/main/docs)).
+* A [test suite](#testing) with a 'runable' dummy app ([`/spec`](https://github.com/lookbook-hq/lookbook/tree/main/spec)).
 
 ### Documentation site
 
@@ -49,9 +49,9 @@ To preview changes locally you can run a development version of the docs site:
 
 ### Testing
 
-Lookbook uses [RSpec](https://relishapp.com/rspec) for testing.
+Lookbook uses [RSpec](https://relishapp.com/rspec). [Appraisal](https://github.com/thoughtbot/appraisal) is used to run tests against different Ruby and Rails versions.
 
-Tests can be run using the `rake spec` or `bundle exec rspec` commands.
+Tests can be run using the `bundle exec appraisal rspec` command.
 
 The dummy app that the tests are being run against can be viewed by running the `bin/dummy` command and then browsing to http://localhost:9292/lookbook
 
@@ -61,22 +61,22 @@ Lookbook uses [Release It!](https://github.com/release-it/release-it) to automat
 
 Running `npm run release` will start the process of publishing a new release and walks though all the steps from picking a version number to publishing the updated gem.
 
-Publishing a release requires write permissions for this repository (ViewComponent/lookbook) and 2FA publish permissions for Lookbook on RubyGems.
+Publishing a release requires write permissions for this repository (lookbook-hq/lookbook) and 2FA publish permissions for Lookbook on RubyGems.
 
 ## Contributing
 
 Lookbook is an un-funded open source project and contributions of all types and sizes are most welcome!
 
-Please take the time to read over the [Contributing](./CONTRIBUTING.md) guide before making your first contribution and if anything isn't clear then [start a discussion](https://github.com/ViewComponent/lookbook/discussions) and we will do our best to help you out.
+Please take the time to read over the [Contributing](./CONTRIBUTING.md) guide before making your first contribution and if anything isn't clear then [start a discussion](https://github.com/lookbook-hq/lookbook/discussions) and we will do our best to help you out.
 
 ## Contributors 
 
 Lookbook was created by [Mark Perkins](https://github.com/allmarkedup) and continues to grow
-&amp; improve thanks to the ideas, suggestions and hard work of all of [these excellent humans](https://github.com/ViewComponent/lookbook/graphs/contributors):
+&amp; improve thanks to the ideas, suggestions and hard work of all of [these excellent humans](https://github.com/lookbook-hq/lookbook/graphs/contributors):
 <br>
 <br>
-<a href="https://github.com/ViewComponent/lookbook/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=ViewComponent/lookbook&columns=14" width="800" />
+<a href="https://github.com/lookbook-hq/lookbook/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=lookbook-hq/lookbook&columns=14" width="800" />
 </a>
 
 ## License

data/app/components/lookbook/button/component.html.erb

@@ -2,7 +2,7 @@
   id: id,
   icon: icon,
   **button_attrs,
-  "x-on:keydown.esc.stop": "hideDropdown",
+  "x-on:keydown.esc.stop.document": "hideDropdown",
   "x-on:navigation:complete.window": "updateDropdown") do %>
   <%= content %>
 <% end %>

data/app/components/lookbook/button/component.js

@@ -6,7 +6,12 @@ export default function buttonComponent() {
   let dropdown = null;
 
   return {
+    updateAfterNavigate: true,
+
     init() {
+      this.updateAfterNavigate =
+        this.$el.dataset.updateAfterNavigate !== "false";
+
       if (this.$refs.tooltip) {
         tooltip = initTooltip(this, {
           target: this.$refs.icon,
@@ -51,9 +56,11 @@ export default function buttonComponent() {
     updateDropdown() {
       if (dropdown) {
         dropdown.hide();
-        this.$nextTick(() => {
-          dropdown.setContent(this.dropdownContent);
-        });
+        if (this.updateAfterNavigate) {
+          this.$nextTick(() => {
+            dropdown.setContent(this.dropdownContent);
+          });
+        }
       }
     },
 

data/app/components/lookbook/display_options/editor/component.html.erb

@@ -1,6 +1,6 @@
 <%= render_component_tag class: "px-2" do %>
   <% if fields.many? %>
-    <%= lookbook_render :button, id: "display-options-dropdown-button", icon: :settings, tooltip: "Display options" do |button| %>
+    <%= lookbook_render :button, id: "display-options-dropdown-button", icon: :settings, tooltip: "Display options", data: {update_after_navigate: false} do |button| %>
       <% button.with_dropdown do %>
         <div class="p-3 space-y-3">
           <%= safe_join(fields) %>

data/app/components/lookbook/filter/component.html.erb

@@ -11,7 +11,7 @@
       x-on:keydown.f.window="if (!($event.shiftKey || $event.metaKey || $event.ctrlKey || $event.altKey)) { focus(); $event.preventDefault(); $event.stopPropagation(); }"
       x-on:keydown.stop>
       <button class="text-lookbook-icon-button-stroke hover:text-lookbook-icon-button-stroke-hover focus:ring-0 focus:outline-none absolute top-1/2 right-3 -translate-y-1/2" x-on:click="clear" x-bind:class="{hidden: !active}">
-        <%= icon  :x, size: 3 %>
+        <%= icon  :x, size: 4 %>
       </button>
   </div>
-<% end %>
+<% end %>

data/app/components/lookbook/header/component.html.erb

@@ -34,7 +34,7 @@
             <% menu = lookbook_render :debug_menu,
               version: Lookbook::VERSION,
               docs_url: "https://lookbook.build/guide",
-              repo_url: "https://github.com/ViewComponent/lookbook" do %>
+              repo_url: "https://github.com/lookbook-hq/lookbook" do %>
               <%= debug_data %>
             <% end %>
             <% button.with_dropdown.with_content(menu) %>

data/app/components/lookbook/icon/component.html.erb

@@ -1,3 +1,5 @@
 <%= render_component_tag :i, style: "height: #{size_rems}; width: #{size_rems}; #{@html_attrs[:style]}", class: "icon-stroke-#{stroke}" do %>
-  <%= svg %>
-<% end %>
+  <svg>
+    <use href="/lookbook-assets/img/lucide-sprite.svg#<%= @icon_name %>"></use>
+  </svg>
+<% end %>

data/app/components/lookbook/icon/component.rb

@@ -14,21 +14,5 @@ module Lookbook
     def size_rems
       "#{@size * 0.25}rem"
     end
-
-    def svg
-      ICON_CACHE[@icon_name] ||= read_svg
-    end
-
-    def read_svg
-      File.read(svg_path).html_safe
-    rescue
-      if Rails.env.development? || Rails.env.test?
-        raise "`#{@icon_name}` is not a valid icon name"
-      end
-    end
-
-    def svg_path
-      Lookbook::Engine.root.join("assets/icons/#{@icon_name}.svg")
-    end
   end
 end

data/app/components/lookbook/nav/entity/component.html.erb

@@ -2,7 +2,10 @@
   id: id,
   key: "#{id}-entity-#{type}",
   class: "list-none",
+  "x-init": "$nextTick(() => checkActive())",
   "x-show": "!filteredOut",
+  "@navigation:complete.window": "checkActive",
+  # "x-effect": "active = ($refs.link && (window.location.pathname === $refs.link.getAttribute('href')))",
   data: { "entity-type": type.to_s.tr("_","-") },
   cloak: true do %>
   <%= lookbook_tag href.present? ? :a : :button,

data/app/components/lookbook/nav/item/component.js

@@ -6,20 +6,12 @@ export default function navItemComponent({ id, matchers }) {
   return {
     filteredOut: false,
 
+    active: false,
+
     get open() {
       return this.isCollection && this.isOpen(id);
     },
 
-    get active() {
-      if (this.$refs.link) {
-        return (
-          this.location &&
-          this.location.pathname === this.$refs.link.getAttribute("href")
-        );
-      }
-      return false;
-    },
-
     get children() {
       return this.$refs.items ? Array.from(this.$refs.items.children) : [];
     },
@@ -28,6 +20,12 @@ export default function navItemComponent({ id, matchers }) {
       return !this.$refs.link;
     },
 
+    checkActive() {
+      this.active =
+        this.$refs.link &&
+        window.location.pathname === this.$refs.link.getAttribute("href");
+    },
+
     toggle() {
       this.toggleOpen(id);
     },

data/app/components/lookbook/params/editor/component.rb

@@ -9,7 +9,7 @@ module Lookbook
       def initialize(**html_attrs)
         @field_count = -1
         @@input_styles = {}
-        super(**html_attrs)
+        super
       end
 
       def before_render

data/app/components/lookbook/params/field/component.rb

@@ -14,7 +14,7 @@ module Lookbook
         styles, html = StylesExtractor.call(render_input)
         Editor::Component.add_styles(param.input, styles)
 
-        escaped_value = json_escape(param.value.to_s).gsub("\n", '\n')
+        escaped_value = html_escape(json_escape(param.value.to_s).gsub("\n", '\n'))
         wrapper_attrs = {
           data: {"param-input": param.input},
           "x-data": "paramsInputComponent({name: \"#{param.name}\", value: \"#{escaped_value}\"})"

data/app/components/lookbook/tab_panels/component.rb

@@ -8,7 +8,7 @@ module Lookbook
 
     def initialize(**html_attrs)
       @panel_counter = 0
-      super(**html_attrs)
+      super
     end
 
     protected

data/app/controllers/lookbook/previews_controller.rb

@@ -39,13 +39,17 @@ module Lookbook
     def show
       raise_not_found("Preview not found") unless @target
 
-      @preview_html = preview_controller.process(
-        :render_in_layout_to_string,
-        "lookbook/previews/group",
-        inspector_data,
-        layout: @preview.layout,
-        append_html: (iframe_content_scripts if embedded?)
-      )
+      @preview_html = if Lookbook.config.preview_single_pass_rendering && !inspector_data.scenarios.many?
+        inspector_data.scenarios.first.output + (iframe_content_scripts if embedded?)
+      else
+        preview_controller.process(
+          :render_in_layout_to_string,
+          "lookbook/previews/group",
+          inspector_data,
+          layout: @preview.layout,
+          append_html: (iframe_content_scripts if embedded?)
+        )
+      end
     end
 
     private

data/app/helpers/lookbook/application_helper.rb

@@ -13,5 +13,15 @@ module Lookbook
         lookbook_home_path
       end
     end
+
+    # Requests
+
+    def request_frame
+      request.headers["X-Lookbook-Frame"] || "root"
+    end
+
+    def frame_request?
+      request.headers["X-Lookbook-Frame"].present?
+    end
   end
 end

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

@@ -1,88 +1,90 @@
 <% content_for :body do %>
-  <div
-    id="app"
-    x-data="app"
-    x-cloak
-    x-on:popstate.window="handleNavigation"
-    x-on:click.document="hijax"
-    x-on:navigation:start="closeMobileSidebar"
-    x-on:dom:update-complete.window="Lookbook.initEmbeds()"
-    class="w-screen h-screen grid grid-rows-[40px_1fr] relative">
+  <% if request_frame == "root" %>
+    <div
+      id="app"
+      x-data="app"
+      x-cloak
+      x-on:popstate.window="handleNavigation"
+      x-on:click.document="hijax"
+      x-on:navigation:start="closeMobileSidebar"
+      x-on:dom:update-complete.window="Lookbook.initEmbeds()"
+      class="w-screen h-screen grid grid-rows-[40px_1fr] relative">
 
-    <%= render "lookbook/partials/user_styles" %>
+      <%= render "lookbook/partials/user_styles" %>
 
-    <%= lookbook_render :header,
-      id: "app-header",
-      debug_menu: @config.debug_menu,
-      project_name: @config.project_name,
-      project_logo: @config.project_logo %>
+      <%= lookbook_render :header,
+        id: "app-header",
+        debug_menu: @config.debug_menu,
+        project_name: @config.project_name,
+        project_logo: @config.project_logo %>
 
-    <% unless @blank_slate %>
-      
-      <%= lookbook_render :split_layout,
-        alpine_data: "$store.layout.main",
-        ":class": "$store.layout.mobile && '!block'" do |layout| %>
+      <% unless @blank_slate %>
+        
+        <%= 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-[1001] border-l border-lookbook-divider': $store.layout.mobile
-          }",
-          "x-on:click.outside": "closeMobileSidebar",
-          cloak: true do %>
+          <% 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-[1001] border-l border-lookbook-divider': $store.layout.mobile
+            }",
+            "x-on:click.outside": "closeMobileSidebar",
+            cloak: true do %>
 
-          <% if @sidebar_panels.any? %>  
-            <%= lookbook_render :split_layout,
-              alpine_data: "$store.layout.#{@sidebar_panels.many? ? "sidebar" : "singleSectionSidebar"}",
-              style: "height: calc(100vh - 2.5rem);" do |layout| %>
+            <% if @sidebar_panels.any? %>  
+              <%= lookbook_render :split_layout,
+                alpine_data: "$store.layout.#{@sidebar_panels.many? ? "sidebar" : "singleSectionSidebar"}",
+                style: "height: calc(100vh - 2.5rem);" do |layout| %>
 
-              <% @sidebar_panels.each do |panel| %>
-                <% if panel == :previews && @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"><%= @config.preview_collection_label %></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",
-                              "x-on:click": "closeAll" %>
+                <% @sidebar_panels.each do |panel| %>
+                  <% if panel == :previews && @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"><%= @config.preview_collection_label %></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",
+                                "x-on:click": "closeAll" %>
+                            <% end %>
                           <% end %>
                         <% end %>
-                      <% end %>
-                      <% if @config.preview_nav_filter %>
-                        <% nav.with_filter store: "$store.nav.previews.filter", placeholder: "Filter previews by name&hellip;" %>
+                        <% if @config.preview_nav_filter %>
+                          <% nav.with_filter store: "$store.nav.previews.filter", placeholder: "Filter previews by name&hellip;" %>
+                        <% end %>
                       <% end %>
                     <% end %>
                   <% end %>
-                <% end %>
 
-                <% if panel == :pages && @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"><%= @config.page_collection_label %></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",
-                              "x-on:click": "closeAll" %>
+                  <% if panel == :pages && @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"><%= @config.page_collection_label %></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",
+                                "x-on:click": "closeAll" %>
+                            <% end %>
                           <% end %>
                         <% end %>
-                      <% end %>
-                      <% if @config.page_nav_filter %>
-                        <% nav.with_filter store: "$store.nav.pages.filter", placeholder: "Filter pages by name&hellip;" %>  
+                        <% if @config.page_nav_filter %>
+                          <% nav.with_filter store: "$store.nav.pages.filter", placeholder: "Filter pages by name&hellip;" %>  
+                        <% end %>
                       <% end %>
                     <% end %>
                   <% end %>
@@ -90,26 +92,35 @@
               <% 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" x-bind:class="($store.layout.mobile && !sidebarHidden) && '!opacity-30 !z-[1000]'" data-cloak></div>
+      
+      <div class="absolute opacity-0 bg-black inset-0 top-[39px] z-[-1] transition-opacity" x-bind:class="($store.layout.mobile && !sidebarHidden) && '!opacity-30 !z-[1000]'" data-cloak></div>
+
+      <% if content_for? :dropdowns %>
+        <div class="hidden">
+          <%= content_for :dropdowns -%>
+        </div>
+      <% end %>
+    </div>
+  <% elsif request_frame == "main" %>
+    <div id="app-main">
+      <%= content_for?(:main) ? yield(:main) : yield %>
+    </div>
+  <% end %>
+<% end %>
 
-    <% if content_for? :dropdowns %>
-      <div class="hidden">
-        <%= content_for :dropdowns -%>
-      </div>
-    <% end %>
-  </div>
+<% if frame_request? %>
+  <%= yield :body %>
+<% else %>
+  <%= render template: "layouts/lookbook/skeleton" %>
 <% end %>
 
-<%= render template: "layouts/lookbook/skeleton" %>

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

@@ -1,22 +1,34 @@
 <% content_for :body do %>
-  <div
-    id="app"
-    x-data="app"
-    x-cloak
-    x-on:popstate.window="handleNavigation"
-    x-on:click.document="hijax"
-    class="overflow-hidden">
-    
-    <%= render "lookbook/partials/user_styles" %>
+  <% if request_frame == "root" %>
+    <div
+      id="app"
+      x-data="app"
+      x-cloak
+      x-on:popstate.window="handleNavigation"
+      x-on:click.document="hijax"
+      class="overflow-hidden">
+      
+      <%= render "lookbook/partials/user_styles" %>
 
-    <%= content_for?(:main) ? yield(:main) : yield %>
-  </div>
-
-  <% if content_for? :dropdowns %>
-    <div class="hidden">
-      <%= content_for :dropdowns -%>
+      <div id="app-main" class="contents">
+        <%= content_for?(:main) ? yield(:main) : yield %>
+      </div>
     </div>
-  <% end %>
+
+    <% if content_for? :dropdowns %>
+      <div class="hidden">
+        <%= content_for :dropdowns -%>
+      </div>
+    <% end %>
+  <% elsif request_frame == "main" %>
+    <div id="app-main">
+      <%= content_for?(:main) ? yield(:main) : yield %>
+    </div>    
+  <% end %>    
 <% end %>
 
-<%= render template: "layouts/lookbook/skeleton" %>
+<% if frame_request? %>
+  <%= yield :body %>
+<% else %>
+  <%= render template: "layouts/lookbook/skeleton" %>
+<% end %>

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

@@ -5,6 +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">
 
+  <%= csrf_meta_tags %>
+
   <link href="<%= lookbook_asset_path("/css/lookbook.css") %>" rel="stylesheet">
   <link href="<%= lookbook_asset_path("/css/themes/#{@config.ui_theme}.css") %>" rel="stylesheet">
 

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

@@ -11,7 +11,7 @@
     <% end %>
   </div>
 <% else %>
-  <div class="p-4 w-full h-full bg-lookbook-prose-bg">
+  <div class="p-4 w-full min-h-full h-max bg-lookbook-prose-bg">
     <%= lookbook_render :prose do %>
       <%== items.any? ? items.first.notes : "<em class='opacity-50'>No notes provided.</em>" %>
     <% end %>

data/app/views/lookbook/previews/preview.html.erb

@@ -1,6 +1,10 @@
 <% if @render_args[:component] %>
   <% if defined?(Phlex::SGML) && @render_args[:component].is_a?(Phlex::SGML) %>
-    <%= raw(@render_args[:component].call(view_context: self, &@render_args[:block])) %>
+    <% if defined?(Phlex::VERSION) && Gem::Version.new(Phlex::VERSION) >= Gem::Version.new("2.0.0") %>
+      <%= raw(@render_args[:component].call(context: { rails_view_context: self }, &@render_args[:block])) %>
+    <% else %>
+      <%= raw(@render_args[:component].call(view_context: self, &@render_args[:block])) %>
+    <% end %>
   <% else %>
     <%= render(@render_args[:component], @render_args[:args], &@render_args[:block]) %>
   <% end %>

data/assets/js/app.js

@@ -43,7 +43,9 @@ export default function app() {
       this.debug("Navigating to ", window.location.pathname);
       this.$dispatch("navigation:start");
       this.location = window.location;
-      await this.updateDOM();
+      await this.updateDOM("#app-main", {
+        headers: { "X-Lookbook-Frame": "main" },
+      });
       this.$dispatch("navigation:complete");
     },
 
@@ -65,16 +67,17 @@ export default function app() {
       }
     },
 
-    async updateDOM() {
+    async updateDOM(rootSelector = `#${this.$root.id}`, options = {}) {
       this.debug("Starting DOM update");
       this.$dispatch("dom:update-start");
       this.requestStart();
       try {
         const { fragment, title } = await fetchHTML(
           window.location,
-          `#${this.$root.id}`
+          rootSelector,
+          options
         );
-        morph(this.$root, fragment);
+        morph(document.querySelector(rootSelector), fragment);
         document.title = title;
         this.requestEnd();
         this.$dispatch("dom:update-complete");