lookbook 2.0.5 → 2.3.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 304dad1bd141e24633de2a2ac09887d4ccc64b354adfe99c064364b1243871ec
-  data.tar.gz: 89854b30eb17b5923ae5b44f5b7efd3c6a71b58d755196c3710d2274ca73e691
+  metadata.gz: 405d72080cde8a24acd7efe2bf64d80d9593165c6049a925034765409f201d42
+  data.tar.gz: 20000a294067bd90090d8aad03a9f2a90fc7dedc0c40887637abec9ee61af6a9
 SHA512:
-  metadata.gz: 6dae592f9af122d60314e043632b784110b5625e33340aff2b04833b343be4b48c04533c78ed557a7f8a09fad219fbf5cd9087e678cfb64d434bf6a9f6f23c1b
-  data.tar.gz: 7451044704c8f68d8b2dc17bed7729b43424c08fed2ff4895a22d78fd64de1ec21831db1d6d7f2a9b8c220a7d51d7b22a513fe4baf9997288a4bb92cb90bb73f
+  metadata.gz: 96edf5d365de28f60a82db23c201103d469ced0e137794410ad63445b64d6420a3dd25a923b5a4f7b4b5af674c8271fe698a15a4ba6c4aeeb22bf5ca3023df18
+  data.tar.gz: bd14f9e41744e8a0af85acff86d1c325a4f85553bac89f01955eae7d80b6cb378ada7c763591e5ec057eb4b903a2998c5eaf9af839a855845f3b125bb198aa73

data/README.md

@@ -7,17 +7,21 @@
 <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>
 
 ---
 
 <div align="center">
-Lookbook combines a powerful <strong>component browser</strong> and <strong>preview system</strong> with an <strong>integrated documentation engine</strong> to help teams build robust, modular, maintainable user interfaces. <a href="https://lookbook.build"><strong>Learn more &rarr;</strong></a>
+Lookbook combines a powerful <strong>component browser</strong> and <strong>preview system</strong> with an <strong>integrated documentation engine</strong> to help teams build robust, modular, maintainable user interfaces.<br><br>
+It's compatible with <a href="https://viewcomponent.org/">ViewComponent</a>, <a href="https://www.phlex.fun/">Phlex</a>, ActionView partials and more.
+<br><br>
+<a href="https://lookbook.build"><strong>Read the docs &rarr;</strong></a>
 
 </div>
 
+
 ---
 
 [![Lookbook UI](.github/assets/lookbook_ui.png)](http://lookbook.build/)
@@ -28,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
 
@@ -57,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/base_component.rb

@@ -1,6 +1,6 @@
 module Lookbook
   class BaseComponent < ViewComponent::Base
-    include Lookbook::Engine.routes.url_helpers
+    send(:include, Lookbook::Engine.routes.url_helpers) # YARD parsing workaround: https://github.com/lsegal/yard/issues/546
     include Lookbook::UiElementsHelper
     include Lookbook::ClassNamesHelper if Engine.runtime_context.rails_older_than?("6.1.0")
 

data/app/components/lookbook/embed/inspector/component.html.erb

@@ -9,7 +9,7 @@
       <h3 class="flex items-center space-x-1">
         <strong class="text-lookbook-embed-title"><%= target.preview.label %></strong>
         <% if scenarios.many? %>
-          <%= select_tag("target", options_for_select(scenario_select_options, helpers.lookbook_embed_path(target.path)), "x-model": "targetPath", class: "!ml-2 compact") %>
+          <%= select_tag("target", options_for_select(scenario_select_options, helpers.lookbook_embed_path(target.lookup_path)), "x-model": "targetPath", class: "!ml-2 compact") %>
         <% else %>
           <span>(<%= target.label %>) </span>
         <% end %>
@@ -31,13 +31,13 @@
         <%= lookbook_render :button_group do |group| %>
           <% if display_action?(:inspect) %>
             <% group.with_button icon: :eye,
-              href: helpers.lookbook_inspect_url(target.path, params),
+              href: helpers.lookbook_inspect_url(target.lookup_path, params),
               tooltip: "View in Inspector",
               target: "_top" %>
           <% end %>
           <% if display_action?(:open) %>
             <% group.with_button icon: :external_link,
-              href: helpers.lookbook_preview_url(target.path, params),
+              href: helpers.lookbook_preview_url(target.lookup_path, params),
               tooltip: "Open in new window",
               target: "_blank" %>
           <% end %>
@@ -57,7 +57,7 @@
       x-ref="viewportWrapper"> 
       <%= lookbook_render :viewport,
         iframe_id: "#{id}-viewport",
-        src: helpers.lookbook_preview_path(target.path, request.query_parameters.merge(lookbook_timestamp: Time.now, lookbook_embed: true)),
+        src: helpers.lookbook_preview_path(target.lookup_path, request.query_parameters.merge(lookbook_timestamp: Time.now, lookbook_embed: true)),
         alpine_data: "store",
         resize_height: false,
         class: "mb-[-2px] transition-[height] duration-150",
@@ -82,6 +82,21 @@
             <% end %>
           <% end %>
         <% end %>
+
+         <% toolbar.with_section align: :right,  class: "flex-none relative z-10" do %>
+          <%= lookbook_render :button_group do |group| %>
+            <%= panels.select { |p| !p.disabled && p.copy }.each do |panel| %>
+              <% group.with_button id: "copy-panel-contents-button-#{panel.name}",
+                icon: :copy,
+                tooltip: "Copy panel contents",
+                copy: !!panel.copy,
+                "x-show": "store.activeTab === '#{panel.name}'",
+                cloak: true do %>
+                <%= panel.copy ? panel.copy : "" %>
+                <% end %>
+            <% end %>  
+          <% end %>
+        <% end %>
       <% end %>
 
       <div class="bg-lookbook-drawer-bg">      

data/app/components/lookbook/embed/inspector/component.rb

@@ -40,7 +40,7 @@ module Lookbook
     end
 
     def scenario_select_options
-      scenarios.map { |scenario| [scenario.label, helpers.lookbook_embed_path(scenario.path)] }
+      scenarios.map { |scenario| [scenario.label, helpers.lookbook_embed_path(scenario.lookup_path)] }
     end
 
     def display_option_controls?

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

@@ -29,11 +29,12 @@
         <% if @debug_menu %>
           <% group.with_button id: "debug-menu-button",
             icon: :help_circle,
+            tooltip: "Debug info",
             class: "!text-lookbook-header-text", "x-show": "!loading" do |button| %>
             <% 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) %>
@@ -50,8 +51,8 @@
           "x-show": "$store.layout.mobile && !sidebarHidden",
           "x-on:keydown.esc.window": "closeMobileSidebar",
           class: "!text-lookbook-header-text" %>
-      <% end %>    
+      <% end %>
     <% end %>
   <% end %>
-  
-<% end %>
+
+<% end %>

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/tag_component.rb

@@ -20,7 +20,14 @@ module Lookbook
     end
 
     def self.escape_attribute_key
-      @escape_attribute_key ||= (Gem::Version.new(Rails.version) < Gem::Version.new("6.1.5.1")) ? :escape_attributes : :escape
+      @escape_attribute_key ||= (
+        (
+          Gem::Version.new(Rails.version) < Gem::Version.new("5.2.7.1")
+        ) || (
+          Gem::Version.new(Rails.version) >= Gem::Version.new("6") &&
+          Gem::Version.new(Rails.version) < Gem::Version.new("6.1.5.1")
+        )
+      ) ? :escape_attributes : :escape
     end
   end
 end

data/app/controllers/lookbook/application_controller.rb

@@ -48,7 +48,8 @@ module Lookbook
       @config = Lookbook.config
       @engine = Lookbook.engine
       @embed = !!params[:lookbook_embed]
-      @blank_slate = Engine.pages.none? && Engine.previews.none?
+      @sidebar_panels = sidebar_panels
+      @blank_slate = @sidebar_panels.none?
     end
 
     def raise_not_found(message = "Page not found")
@@ -56,6 +57,8 @@ module Lookbook
     end
 
     def handle_error(err)
+      raise err if Lookbook.config.preview_disable_error_handling
+
       @error = err.is_a?(Lookbook::Error) ? err : Lookbook::Error.new(original: err)
       @status_code = get_status_code(err)
 
@@ -71,6 +74,13 @@ module Lookbook
 
     private
 
+    def sidebar_panels
+      panels_config = Lookbook.config.preview_inspector.sidebar_panels.map(&:to_sym)
+      panels_config.select do |panel|
+        (panel == :pages && Engine.pages.any?) || (panel == :previews && Engine.previews.any?)
+      end
+    end
+
     def get_status_code(err)
       if err.respond_to?(:status)
         err.status

data/app/controllers/lookbook/embeds_controller.rb

@@ -1,5 +1,5 @@
 module Lookbook
-  class EmbedsController < ApplicationController
+  class EmbedsController < Lookbook::ApplicationController
     include ActionView::Helpers::SanitizeHelper
     include TargetableConcern
     include WithPreviewControllerConcern
@@ -21,7 +21,7 @@ module Lookbook
       if props.preview.present?
         preview = Engine.previews.find_by_preview_class(props.preview)
         if preview.present?
-          props.scenarios ||= (props.scenario || "")
+          props.scenarios ||= props.scenario || ""
           scenario = preview.scenario(Array(props.scenarios).first)
 
           boolean_options = ["display_option_controls"]
@@ -53,7 +53,7 @@ module Lookbook
           embed_params[:_options] = SearchParamEncoder.call(options)
           embed_params.symbolize_keys!
 
-          return redirect_to lookbook_embed_url(scenario ? scenario.path : preview.path, embed_params)
+          return redirect_to lookbook_embed_url(scenario ? scenario.lookup_path : preview.lookup_path, embed_params)
         end
       end
 
@@ -65,7 +65,7 @@ module Lookbook
       unless @target
         @target = @scenario_choices.first || @preview&.default_scenario
         if @target
-          redirect_to lookbook_embed_path(@target.path, req_params)
+          redirect_to lookbook_embed_path(@target.lookup_path, req_params)
         else
           raise_not_found("Preview not found")
         end

data/app/controllers/lookbook/inspector_controller.rb

@@ -1,5 +1,5 @@
 module Lookbook
-  class InspectorController < ApplicationController
+  class InspectorController < Lookbook::ApplicationController
     include TargetableConcern
     include WithPanelsConcern
     include WithPreviewControllerConcern

data/app/controllers/lookbook/page_controller.rb

@@ -15,7 +15,7 @@ module Lookbook
       @next_page = @pages.next(@page)
       @previous_page = @pages.previous(@page)
 
-      content = ActionViewAnnotationsHandler.call(disable_annotations: true) do
+      content = ActionViewConfigHandler.call do
         render_to_string inline: @page.content, locals: {
           page: @page,
           next_page: @next_page,

data/app/controllers/lookbook/pages_controller.rb

@@ -1,5 +1,5 @@
 module Lookbook
-  class PagesController < ApplicationController
+  class PagesController < Lookbook::ApplicationController
     helper_method :page_controller
 
     def self.controller_path

data/app/controllers/lookbook/previews_controller.rb

@@ -1,5 +1,5 @@
 module Lookbook
-  class PreviewsController < ApplicationController
+  class PreviewsController < Lookbook::ApplicationController
     include TargetableConcern
     include WithPreviewControllerConcern
 
@@ -68,7 +68,7 @@ module Lookbook
 
     def permit_framing
       headers["X-Frame-Options"] = Lookbook.config.preview_embeds.policy if embedded?
-      headers["X-Frame-Options"] = "SAMEORIGIN" if headers["X-Frame-Options"] == "DENY"
+      headers["X-Frame-Options"] = "SAMEORIGIN" if headers["X-Frame-Options"]&.upcase == "DENY"
     end
   end
 end

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,79 +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 %>
 
-    <% if @previews.any? || @pages.any? %>
-      
-      <%= 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 %>
 
-          <%= lookbook_render :split_layout,
-            alpine_data: "$store.layout.#{@pages.any? && @previews.any? ? "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| %>
 
-            <% 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"><%= @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 %>
+                        <% if @config.preview_nav_filter %>
+                          <% nav.with_filter store: "$store.nav.previews.filter", placeholder: "Filter previews by name&hellip;" %>
+                        <% end %>
                       <% end %>
                     <% end %>
                   <% 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"><%= @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 %>
+                        <% if @config.page_nav_filter %>
+                          <% nav.with_filter store: "$store.nav.pages.filter", placeholder: "Filter pages by name&hellip;" %>  
+                        <% end %>
                       <% end %>
                     <% end %>
                   <% end %>
@@ -81,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" %>