lookbook 1.0.0.beta.5 → 1.0.0.beta.8

data/app/assets/lookbook/css/tooltip.css

@@ -4,23 +4,23 @@
 .tippy-box[data-theme~="tooltip"] {
   @apply text-xs opacity-90;
 
-  background-color: var(--lookbook-tooltip);
+  background-color: var(--lookbook-tooltip-bg);
   color: var(--lookbook-tooltip-text);
 
   &[data-placement^="top"] > .tippy-arrow::before {
-    border-top-color: var(--lookbook-tooltip);
+    border-top-color: var(--lookbook-tooltip-bg);
   }
 
   &[data-placement^="bottom"] > .tippy-arrow::before {
-    border-bottom-color: var(--lookbook-tooltip);
+    border-bottom-color: var(--lookbook-tooltip-bg);
   }
 
   &[data-placement^="left"] > .tippy-arrow::before {
-    border-left-color: var(--lookbook-tooltip);
+    border-left-color: var(--lookbook-tooltip-bg);
   }
 
   &[data-placement^="right"] > .tippy-arrow::before {
-    border-right-color: var(--lookbook-tooltip);
+    border-right-color: var(--lookbook-tooltip-bg);
   }
 }
 

data/app/components/lookbook/base_component.rb

@@ -12,7 +12,6 @@ module Lookbook
       merged_classes = class_names(attrs[:class], @html_attrs[:class])
       merged_attrs = @html_attrs.except(:class).deep_merge(attrs.except(:class))
 
-
       render Lookbook::TagComponent.new(tag: tag,
         name: component_name,
         **merged_attrs,

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

@@ -1,9 +1,9 @@
 <%= render_component_tag tag_name,
   href: @href,
   class: [
-    "block text-lookbook-button-text focus:outline-none focus-visible:outline-none #{padding}",
+    "block text-lookbook-icon-button-stroke focus:outline-none focus-visible:outline-none #{padding}",
     {
-      "hover:text-lookbook-button-text-hover": !@disabled,
+      "hover:text-lookbook-icon-button-stroke-hover": !@disabled,
       "cursor-[not-allowed] opacity-50": @disabled
     }
   ],

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

@@ -7,13 +7,13 @@
         <%= @example.preview.label %> (<%= @example.label %>)
       </h3>
     <% end %>
-      <% toolbar.section align: :right, divide: :left do %>
-        <%= render_component :button_group do |group| %>
+    <% toolbar.section align: :right, divide: :left do %>
+      <%= render_component :button_group do |group| %>
         <% group.button icon: :eye,
-          href: helpers.lookbook_inspect_path(@example.path, @params),
+          href: lookbook_inspect_path(@example.path, @params),
           tooltip: "View in Inspector" %>
         <% group.button icon: :external_link,
-          href: helpers.lookbook_inspect_path(@example.path, @params),
+          href: lookbook_inspect_path(@example.path, @params),
           tooltip: "Open in new window",
           target: "_blank" %>
       <% end %>
@@ -28,7 +28,7 @@
     @viewport:resize-complete="resizeIframe"
     @tabs:change.window="resizeIframe"> 
     <%= render_component :viewport,
-      src: helpers.lookbook_preview_path(@example.path, @params.merge(lookbook_embed: true)),
+      src: lookbook_preview_path(@example.path, @params.merge(lookbook_embed: true)),
       alpine_data: "store",
       resize_height: false,
       max_height: @max_height,

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

@@ -11,6 +11,14 @@ module Lookbook
 
     protected
 
+    def lookbook_inspect_path(*args)
+      Lookbook::Engine.routes.url_helpers.lookbook_inspect_path(*args)
+    end
+
+    def lookbook_preview_path(*args)
+      Lookbook::Engine.routes.url_helpers.lookbook_preview_path(*args)
+    end
+
     def alpine_data
       [@id.to_json, "$store.pages.embeds"].join(",")
     end

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

@@ -10,7 +10,7 @@
     @keydown.esc.stop="clear"
     @keydown.f.stop.prevent.window="focus"
     @keydown.stop>
-    <button class="text-lookbook-button-text hover:text-lookbook-button-text-hover focus:ring-0 focus:outline-none absolute top-1/2 right-3 -translate-y-1/2" @click="clear" :class="{hidden: !active}">
+    <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" @click="clear" :class="{hidden: !active}">
       <%= icon  :x, size: 3 %>
     </button>
 </div>

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

@@ -1,5 +1,5 @@
 <%= render_component_tag :header do %>
-  <%= render_component :toolbar, class: "!bg-lookbook-header !text-lookbook-header-text !border-lookbook-header-border" do |toolbar| %>
+  <%= render_component :toolbar, class: "!bg-lookbook-header-bg !text-lookbook-header-text !border-lookbook-header-border" do |toolbar| %>
     <% toolbar.section padded: true do %>
       <% if branding.present? %>
         <a

data/app/components/lookbook/inspector_panel/component.css

@@ -0,0 +1,5 @@
+@layer components {
+  .lookbook-panel {
+    @apply p-4 min-h-full;
+  }
+}

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

@@ -0,0 +1,6 @@
+<%= render_component_tag :div, class: "h-full" do %>
+  <% if panel_styles %>
+    <% content_for :panel_css do %><%= panel_styles %><% end %>
+  <% end %>
+  <%= panel_html %>
+<% end %>

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

@@ -0,0 +1,36 @@
+require "css_parser"
+
+module Lookbook
+  class InspectorPanel::Component < Lookbook::BaseComponent
+    attr_reader :panel_styles, :panel_html, :id
+
+    def initialize(id:, name:, system: false, **html_attrs)
+      @id = id
+      @name = name
+      @system = system
+      @panel_html = nil
+      @panel_styles = nil
+      super(**html_attrs)
+    end
+
+    def before_render
+      if @system == false
+        panel_dom = ::Nokogiri::HTML.fragment(content)
+        style_tags = panel_dom.css("style")
+        if style_tags.any?
+          css_parser = ::CssParser::Parser.new
+          @panel_styles = ""
+          style_tags.each do |style_tag|
+            css_parser.load_string! style_tag.text
+            css_parser.each_selector do |selector, declarations, specificity|
+              @panel_styles += "##{id} #{selector} { #{declarations} }\n"
+            end
+            style_tag.unlink
+          end
+          @panel_html = panel_dom.to_html.html_safe
+        end
+      end
+      @panel_html ||= content
+    end
+  end
+end

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

@@ -4,8 +4,7 @@ module Lookbook
     renders_one :toolbar, Lookbook::Toolbar::Component
 
     def initialize(
-      id: nil,
-      collection:,
+      collection:, id: nil,
       collapse_singles: false,
       **attrs
     )

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

@@ -16,7 +16,7 @@
         size: 3,
         class: "mr-1 text-lookbook-nav-toggle absolute -left-4",
         "x-effect": "iconName = open ? 'chevron-down' : 'chevron-right'" if children? %>
-      <%= icon nav_icon, size: 3.5, class: "mr-1.5 text-lookbook-nav-icon" %>
+      <%= icon nav_icon, size: 3.5, class: "mr-1.5 text-lookbook-nav-icon-stroke" %>
       <span><%= label %></span>
     </div>
   <% end %>

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

@@ -31,7 +31,8 @@ module Lookbook
     protected
 
     def alpine_data
-      "{name: '#{@name}', value: #{value.to_json}}"
+      escaped_value = value.is_a?(String) ? helpers.j(value) : value
+      "{name: '#{@name}', value: '#{escaped_value}'}"
     end
 
     def alpine_component

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

@@ -1,3 +1,3 @@
-<%= render_component_tag class: "prose #{size_class} text-lookbook-prose-text bg-lookbook-prose prose-a:text-lookbook-prose-link" do %>
+<%= render_component_tag class: "prose #{size_class} text-lookbook-prose-text bg-lookbook-prose-bg prose-a:text-lookbook-prose-link" do %>
   <%== rendered_content %>
 <% end %>

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

@@ -3,7 +3,7 @@ module Lookbook
     renders_many :panels, ->(**attrs) do
       @panel_counter += 1
       attrs[:name] ||= "tab-#{@panel_counter}"
-      Lookbook::TabPanels::Panel::Component.new **attrs
+      Lookbook::TabPanels::Panel::Component.new(**attrs)
     end
 
     def initialize(**html_attrs)

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

@@ -1,8 +1,8 @@
 module Lookbook
   class TabPanels::Panel::Component < Lookbook::BaseComponent
     def initialize(name:, id: nil, **html_attrs)
-      @name = name 
-      @id = "#{id || "panel-#{name}"}"
+      @name = name
+      @id = (id || "panel-#{name}").to_s
       super(**html_attrs)
     end
   end

data/app/components/lookbook/tabs/dropdown_tab/component.html.erb

@@ -8,7 +8,7 @@
     }
   ],
   ":class": "{
-    'border-lookbook-tabs-highlight': isSelected($el),
+    'border-lookbook-tabs-border-active': isSelected($el),
     'border-transparent text-lookbook-tabs-text hover:text-lookbook-tabs-text-hover': !isSelected($el),
     'hidden': visibleTabsCount >= #{@position}
   }",

data/app/components/lookbook/tabs/tab/component.html.erb

@@ -9,7 +9,7 @@
     }
   ],
   ":class": "{
-    'border-lookbook-tabs-highlight': isSelected($el),
+    'border-lookbook-tabs-border-active': isSelected($el),
     'border-transparent text-lookbook-tabs-text hover:text-lookbook-tabs-text-hover': !isSelected($el),
     '!text-lookbook-tabs-text-disabled': isDisabled($el),
     'invisible pointer-events-none relative z-[-1]': visibleTabsCount < #{@position}

data/app/components/lookbook/tag_component.rb

@@ -18,7 +18,7 @@ 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("6.1.5.1") ? :escape_attributes : :escape
     end
   end
 end

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

@@ -1,4 +1,4 @@
-<%= render_component_tag class: "h-10 border-b border-lookbook-divider w-full flex items-center text-sm flex-none bg-lookbook-toolbar" do %>
+<%= render_component_tag class: "h-10 border-b border-lookbook-divider w-full flex items-center text-sm flex-none bg-lookbook-toolbar-bg" do %>
   <div class="toolbar-sections flex items-stretch w-full">
     <%= safe_join(sections) %>
   </div>

data/app/components/lookbook/viewport/component.css

@@ -5,7 +5,7 @@
 
     .resize-handle {
       @apply flex items-center justify-center h-full w-full border-lookbook-divider bg-lookbook-viewport-handle hover:bg-indigo-100 hover:bg-opacity-20;
-      @apply text-lookbook-viewport-handle-icon hover:text-lookbook-viewport-handle-icon-hover transition select-none touch-none;
+      @apply text-lookbook-viewport-handle-icon-stroke hover:text-lookbook-viewport-handle-icon-stroke-hover transition select-none touch-none;
     }
   }
 }

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

@@ -34,7 +34,7 @@
         <% end %>
         <% if @resize_height %>
           <div
-            class="resize-handle border-b border-l border-lookbook-divider cursor-[col-resize] <%= "border-r" unless @resize_width %>"
+            class="resize-handle border-b border-l border-lookbook-divider cursor-[row-resize] <%= "border-r" unless @resize_width %>"
             @pointerdown="onResizeHeightStart"
             @dblclick="toggleFullHeight">
             <svg class="h-4 w-4 pointer-events-none rotate-90" fill="currentColor" viewBox="0 0 24 24" >

data/app/controllers/lookbook/application_controller.rb

@@ -24,7 +24,7 @@ module Lookbook
     protected
 
     def generate_theme_overrides
-      @theme_overrides ||= Lookbook::Theme.new(Lookbook.config.ui_theme_overrides).to_css
+      @theme_overrides ||= Lookbook.theme.to_css
     end
 
     def feature_enabled?(feature)

data/app/controllers/lookbook/pages_controller.rb

@@ -2,6 +2,7 @@ module Lookbook
   class PagesController < ApplicationController
     layout "lookbook/page"
     helper_method :page_controller
+    helper Lookbook::PageHelper
 
     def self.controller_path
       "lookbook/pages"

data/app/controllers/lookbook/previews_controller.rb

@@ -47,6 +47,16 @@ module Lookbook
       redirect_to lookbook_inspect_path params[:path]
     end
 
+    # Namespaced preview helpers
+
+    def lookbook_display(key, fallback = nil)
+      params.dig(:lookbook, :display, key.to_sym) || fallback
+    end
+
+    def lookbook_data(key, fallback = nil)
+      Lookbook.data.get(key, fallback)
+    end
+
     private
 
     def lookup_entities
@@ -98,10 +108,11 @@ module Lookbook
             preview_controller.params[param[:name]] = Lookbook::Params.cast(preview_controller.params[param[:name]], param[:type])
           end
         end
-        # set display params
+        # set display and data params
         preview_controller.params.merge!({
           lookbook: {
-            display: @example.display_params
+            display: @example.display_params,
+            data: Lookbook.data
           }
         })
       end
@@ -119,7 +130,7 @@ module Lookbook
 
       context_data = {
         preview_params: preview_params,
-        path: params[:path],
+        path: params[:path]
       }
 
       example = @example
@@ -134,7 +145,7 @@ module Lookbook
         output = preview_controller.process(:render_example_to_string, @preview, example.name)
         source = has_template ? example.template_source(render_args[:template]) : example.method_source
         source_lang = has_template ? example.template_lang(render_args[:template]) : example.lang
-        
+
         example.define_singleton_method(:output, proc { output })
         example.define_singleton_method(:source, proc { source })
         example.define_singleton_method(:source_lang, proc { source_lang })
@@ -145,7 +156,8 @@ module Lookbook
         context: context_data,
         preview: preview,
         examples: examples,
-        components: preview.components,
+        example: example,
+        data: Lookbook.data,
         app: Lookbook
       })
     end
@@ -158,21 +170,21 @@ module Lookbook
 
         callable_data = {
           name: name.to_s,
-          index_position: (@panels.select { |p| p.pane == config.pane }.size + 1),
+          index_position: (@panels.count { |p| p.pane == config.pane } + 1),
           **inspector_data
         }
 
         resolved_config = config_with_defaults.transform_values do |value|
-          value.class == Proc ? value.call(Lookbook::Store.new(callable_data)) : value
+          value.instance_of?(Proc) ? value.call(Lookbook::Store.new(callable_data)) : value
         end
         resolved_config[:name] = name.to_s
-        
+
         @panels << Lookbook::Store.new(resolved_config, deep: false)
       end
 
       @panels = @panels.select(&:show).sort_by { |p| [p.position, p.label] }
     end
-   
+
     def main_panels
       panels.select { |panel| panel.pane == :main }
     end

data/app/helpers/lookbook/application_helper.rb

@@ -4,6 +4,15 @@ module Lookbook
       Lookbook::Engine.config.lookbook
     end
 
+    def theme
+      Lookbook.theme
+    end
+
+    def asset_path(file, version: true)
+      path = "/lookbook-assets/#{file}".gsub("//", "/")
+      version ? "#{path}?v=#{Lookbook::VERSION}" : path
+    end
+
     def feature_enabled?(name)
       Lookbook::Features.enabled?(name)
     end
@@ -20,11 +29,5 @@ module Lookbook
     def generate_id(*args)
       args.map { |args| args.delete_prefix("/").tr("&?=/_\-", "-") }.join("-")
     end
-
-    def append_styles(&block)
-      content_for :styles do
-        capture(&block)
-      end
-    end
   end
 end

data/app/helpers/lookbook/preview_helper.rb

@@ -1,7 +1,6 @@
 module Lookbook
   module PreviewHelper
-    def lookbook_display(key, fallback = nil)
-      params.dig(:lookbook, :display, key.to_sym) || fallback
-    end
+    # Left intentionally empty.
+    # Included for backwards compatability.
   end
 end

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

@@ -4,7 +4,7 @@
       alpine_data: "$store.layout.main",
       ":class": "$store.layout.mobile && '!block'" do |layout| %>
 
-      <% layout.pane id: "app-sidebar", class: "flex flex-col bg-lookbook-sidebar relative translate-x-0",
+      <% layout.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,

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

@@ -4,11 +4,11 @@
     x-data="{}"
     @navigation:complete.window="$refs.scroller.scrollTop = 0">
   
-    <div class="h-full bg-lookbook-page relative">
+    <div class="h-full bg-lookbook-page-bg relative">
       <% unless @error %>
         
         <div class="absolute top-0 right-0 pt-1 pr-0 pl-1 pb-1 rounded-bl-md">
-          <div class="bg-lookbook-page opacity-90 absolute inset-0 w-full h-full z-0"></div>
+          <div class="bg-lookbook-page-bg opacity-90 absolute inset-0 w-full h-full z-0"></div>
           <div class="relative z-10 flex items-center">
           
           <% if @previous_page %>

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

@@ -7,6 +7,12 @@
     @navigation:start="closeMobileSidebar"
     class="w-screen h-screen grid grid-rows-[40px_1fr] relative">
 
+    <% if content_for? :panel_css %>
+      <style media="all" id="panel-styles">
+        <%= content_for :panel_css -%>
+      </style>
+    <% end %>
+
     <%= render_component :header, id: "app-header", debug_menu: config.debug_menu do |header| %>
       <% header.branding { config.project_name } %>
     <% end %>

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

@@ -5,22 +5,24 @@
   <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="/lookbook-assets/css/lookbook.css?v=<%= Lookbook::VERSION %>" rel="stylesheet">
-  <link href="/lookbook-assets/css/themes/<%= config.ui_theme %>.css?v=<%= Lookbook::VERSION %>" rel="stylesheet">
-  <% if @theme_overrides.present? %>
-    <style media="all">
-      <%== @theme_overrides %>
-    </style>
-  <% end %>
+  <link href="<%= asset_path("/css/lookbook.css") %>" rel="stylesheet">
+  <link href="<%= asset_path("/css/themes/#{config.ui_theme}.css") %>" rel="stylesheet">
 
-  <% if content_for? :styles %>
+  <%- if @theme_overrides.present? %>
     <style media="all">
-      <%= content_for :styles %>
+      <%== @theme_overrides %>
     </style>
   <% end %>
 
-  <% if config.ui_favicon != false %>
-    <link rel="icon" href="<%= config.ui_favicon || "data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>👀</text></svg>" %>">
+  <% 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"
+      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"
+      media="(prefers-color-scheme: light)">
   <% end %>
 
   <script>
@@ -31,15 +33,14 @@
     <% end %>
   </script>
   
-  <script src="/lookbook-assets/js/lookbook.js?v=<%= Lookbook::VERSION %>" defer></script>
+  <script src="<%= asset_path("/js/lookbook.js") %>" defer></script>
   <% if params[:lookbook_embed] %>
-    <script src="/lookbook-assets/js/embed.js?v=<%= Lookbook::VERSION %>" defer></script>
+    <script src="<%= asset_path("/js/embed.js") %>" defer></script>
   <% end %>
   
   <title><%= [@title, config.project_name || "Lookbook"].compact.join(" :: ") %></title>
 </head>
 <body>
-  
   <%= yield :body %>
   
   <% if Rails.env.development? %>

data/app/views/lookbook/previews/panels/_content.html.erb

@@ -1,4 +1,4 @@
-<div class="p-4 bg-lookbook-prose h-full">
+<div class="p-4 bg-lookbook-prose-bg h-full">
   <% if panel.content.present? %>
     <%= render_component :prose, markdown: true do %>
       <%== panel.content %>

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

@@ -1,6 +1,6 @@
 <% items = examples.select { |example| example.notes.present? } %>
 <% if items.many? %>
-  <div class="divide-y divide-dashed divide-lookbook-divider bg-lookbook-prose h-full w-full">
+  <div class="divide-y divide-dashed divide-lookbook-divider bg-lookbook-prose-bg h-full w-full">
     <% items.each do |item| %>
       <div class="px-4 py-6 relative">
         <h6 class="italic font-mono mb-4 opacity-40">
@@ -11,7 +11,7 @@
     <% end %>
   </div>
 <% else %>
-  <div class="p-4 bg-lookbook-prose w-full h-full">
+  <div class="px-4 py-6 bg-lookbook-prose-bg w-full h-full">
     <%= render_component :prose do %>
       <%== items.any? ? items.first.notes : "<em class='opacity-50'>No notes provided.</em>" %>
     <% end %>

data/app/views/lookbook/previews/panels/_params.html.erb

@@ -1,5 +1,5 @@
 <% if preview.params.none? %>
-  <div class="p-4 w-full h-full bg-lookbook-prose">
+  <div class="p-4 w-full h-full bg-lookbook-prose-bg">
     <%= render_component :prose do %>
       <em class='opacity-50'>No params configured.</em>
     <% end %>

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

@@ -38,7 +38,7 @@
             "@click.stop": "startSpin(); $dispatch('viewport:reload'); stopSpin(500);" %>
 
           <% group.button icon: :external_link,
-            href: lookbook_preview_path(@example.lookup_path),
+            href: lookbook_preview_path(@example.lookup_path, request.query_parameters),
             tooltip: "Open preview in new window",
             target: "_blank" %>
 
@@ -55,7 +55,7 @@
     <div class="h-full relative overflow-auto">
       <%= render_component :tab_panels, alpine_data: "$store.inspector.main" do |tabs| %>
         <% @main_panels.each do |panel| %>
-          <% tabs.panel id: panel.id, name: panel.name, class: [panel.panel_classes, { "p-4": panel.padded, "prose": panel.prose }] do %>
+          <% tabs.panel id: panel.id, name: panel.name, class: panel.panel_classes do %>
             <%= render panel.partial, **@inspector_data, panel: panel, **panel.locals %>
           <% end %>
         <% end %>
@@ -63,7 +63,7 @@
     </div>
   <% end %>
 
-  <%= layout.pane class: "flex flex-col h-full overflow-hidden bg-lookbook-drawer",
+  <%= layout.pane class: "flex flex-col h-full overflow-hidden bg-lookbook-drawer-bg",
     "x-show": "!$store.inspector.drawer.hidden && #{@drawer_panels.any?}" do %>
 
     <%= render_component :toolbar do |toolbar| %>
@@ -123,8 +123,10 @@
     <div class="h-full overflow-auto">
       <%= render_component :tab_panels, alpine_data: "$store.inspector.drawer" do |tabs| %>
         <% @drawer_panels.each do |panel| %>
-          <% tabs.panel id: panel.id, name: panel.name, class: [panel.panel_classes, { "p-4": panel.padded, "prose": panel.prose }]  do %>
-            <%= render panel.partial, **@inspector_data, panel: panel, **panel.locals %>
+          <% tabs.panel id: panel.id, name: panel.name, class: panel.panel_classes  do %>
+            <%= render_component :inspector_panel, **panel.slice(:id, :name, :system) do %>
+              <%= render panel.partial, **@inspector_data, panel: panel, **panel.locals %>
+            <% end %>
           <% end %>
         <% end %>
       <% end %>

data/lib/lookbook/code_formatter.rb

@@ -1,6 +1,6 @@
 require "rouge"
 require "htmlbeautifier"
-require 'htmlentities'
+require "htmlentities"
 
 module Lookbook
   module CodeFormatter

data/lib/lookbook/collection.rb

@@ -10,7 +10,7 @@ module Lookbook
         items = path
         path = ""
       end
-      
+
       @path = path.delete_prefix("/").delete_suffix("/")
       super(@path)
 

data/lib/lookbook/component.rb

@@ -1,13 +1,12 @@
 module Lookbook
   class Component < Entity
-
     attr_accessor :name
 
     def initialize(name)
       @name = name
       super(path)
     end
-    
+
     def path
       name.underscore
     end
@@ -28,4 +27,4 @@ module Lookbook
       template_path.present?
     end
   end
-end
+end