lookbook 1.2.1 → 1.4.5

data/app/controllers/lookbook/pages_controller.rb

@@ -9,9 +9,9 @@ module Lookbook
     end
 
     def index
-      landing = Lookbook.pages.find(&:landing) || Lookbook.pages.first
+      landing = Lookbook.pages.find(&:landing?) || Lookbook.pages.first
       if landing.present?
-        redirect_to lookbook_page_path landing.lookup_path
+        redirect_to lookbook_page_path(landing.path)
       else
         show_404
       end
@@ -20,21 +20,15 @@ module Lookbook
     def show
       @page = @pages.find_by_path(params[:path])
       if @page
-        @next_page = @pages.find_next(@page)
-        @previous_page = @pages.find_previous(@page)
-        if @page.errors.any?
+        @next_page = @pages.next(@page)
+        @previous_page = @pages.previous(@page)
+        begin
+          @page_content = page_controller.render_page(@page)
+          @title = @page.title
+        rescue => exception
           render_in_layout "lookbook/error",
             layout: "lookbook/page",
-            error: @page.errors.first
-        else
-          begin
-            @page_content = page_controller.render_page(@page)
-            @title = @page.title
-          rescue => exception
-            render_in_layout "lookbook/error",
-              layout: "lookbook/page",
-              error: Lookbook::Error.new(exception, file_path: @page.full_path, source_code: @page.content)
-          end
+            error: Lookbook::Error.new(exception, file_path: @page.file_path, source_code: @page.content)
         end
       else
         show_404

data/app/controllers/lookbook/previews_controller.rb

@@ -1,19 +1,16 @@
 module Lookbook
   class PreviewsController < ApplicationController
-    layout "lookbook/inspector"
+    include TargetableConcern
+    include WithPreviewControllerConcern
 
+    layout "lookbook/inspector"
     helper Lookbook::PreviewHelper
 
     def self.controller_path
       "lookbook/previews"
     end
 
-    before_action :lookup_entities, only: [:preview, :show]
-    before_action :set_title
-    before_action :set_display_options
-    before_action :set_params
-
-    def preview
+    def show
       if @target
         begin
           opts = {layout: @preview.layout}
@@ -31,208 +28,5 @@ module Lookbook
         show_404 layout: "lookbook/standalone"
       end
     end
-
-    def show
-      if @target
-        begin
-          @main_panels = main_panels
-          @drawer_panels = drawer_panels
-        rescue => exception
-          render_in_layout "lookbook/error", layout: "lookbook/inspector", error: prettify_error(exception)
-        end
-      else
-        show_404
-      end
-    end
-
-    def show_legacy
-      Lookbook.logger.warn("Legacy URL path detected. These paths are deprecated and will be removed in a future version")
-      redirect_to lookbook_inspect_path params[:path]
-    end
-
-    private
-
-    def lookup_entities
-      @target = Lookbook.previews.find_example(params[:path])
-      if @target.present?
-        @preview = @target.preview
-        if params[:path] == @preview&.lookup_path
-          redirect_to lookbook_inspect_path "#{params[:path]}/#{@preview.default_example.name}"
-        end
-      else
-        @preview = Lookbook.previews.find(params[:path])
-        if @preview.present?
-          first_example = @preview.examples.first
-          redirect_to lookbook_inspect_path(first_example.lookup_path) if first_example
-        else
-          @preview = Lookbook.previews.find(path_segments.slice(0, path_segments.size - 1).join("/"))
-        end
-      end
-    end
-
-    def show_404(layout: nil)
-      locals = if @preview
-        {
-          message: "Example not found",
-          description: "The '#{@preview.label}' preview does not have an example named '#{path_segments.last}'."
-        }
-      else
-        {
-          message: "Not found",
-          description: "Looked for '#{params[:path]}'.<br>The preview may have been renamed or deleted."
-        }
-      end
-      render_in_layout "lookbook/404", layout: layout, **locals
-    end
-
-    def target_examples
-      @target.type == :group ? @target.examples : [@target]
-    end
-
-    def set_title
-      @title = @target.present? ? [@target&.label, @preview&.label].compact.join(" :: ") : "Not found"
-    end
-
-    def set_display_options
-      @dynamic_display_options = []
-      @static_display_options = []
-
-      if @target.present?
-        opts = @target.display_options
-        @dynamic_display_options = opts.select { _2.is_a?(Array) || _2.is_a?(Hash) }
-        @static_display_options = opts.except(*@dynamic_display_options.keys)
-
-        if params[:_display]
-          display_params = SearchParamParser.call(params[:_display])
-          display_params.each do |name, value|
-            if @dynamic_display_options.key?(name)
-              cookies["lookbook-display-#{name}"] = value
-            end
-          end
-        end
-
-        @dynamic_display_options.each do |name, opts|
-          choices = opts.is_a?(Hash) ? opts[:choices].to_a : opts
-          @static_display_options[name] ||= cookies.fetch("lookbook-display-#{name}", choices.first)
-        end
-
-        unless params[:_display]
-          display_params = @dynamic_display_options.map do |name, opts|
-            [name, @static_display_options[name]]
-          end.to_h
-          request.query_parameters[:_display] = SearchParamBuilder.call(display_params)
-        end
-      end
-    end
-
-    def set_params
-      if @target
-        # cast known params to type
-        @target.params.each do |param|
-          if preview_controller.params.key?(param[:name])
-            preview_controller.params[param[:name]] = Lookbook::Params.cast(preview_controller.params[param[:name]], param[:value_type])
-          end
-        end
-        # set display and data params
-        preview_controller.params.merge!({
-          lookbook: {
-            display: @static_display_options,
-            data: Lookbook.data
-          }
-        })
-      end
-    end
-
-    def preview_params
-      preview_controller.params.permit!
-      preview_controller.params.to_h.select do |key, value|
-        !!@target.params.find { |param| param[:name] == key }
-      end
-    end
-
-    def inspector_data
-      return @inspector_data if @inspector_data.present?
-
-      context_data = {
-        preview_params: preview_params,
-        path: params[:path]
-      }
-
-      preview = @preview
-      examples = target_examples.map do |example|
-        render_args = @preview.render_args(example.name, params: preview_controller.params)
-        has_template = render_args[:template] != "view_components/preview"
-        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 })
-        example
-      end
-
-      target = @target.type == :group ? @target : examples.find { |e| e.lookup_path == @target.lookup_path }
-
-      preview.define_singleton_method(:params, proc {
-        target.params
-      })
-
-      @inspector_data ||= Lookbook::Store.new({
-        context: context_data,
-        preview: preview,
-        examples: examples,
-        example: examples.first,
-        target: target,
-        data: Lookbook.data,
-        app: Lookbook
-      })
-    end
-
-    def main_panels
-      Engine.panels.in_group(:main).map do |config|
-        PanelStore.resolve_config(config, inspector_data)
-      end
-    end
-
-    def drawer_panels
-      Engine.panels.in_group(:drawer).map do |config|
-        PanelStore.resolve_config(config, inspector_data)
-      end
-    end
-
-    def preview_controller
-      return @preview_controller if @preview_controller
-      controller = Lookbook::Engine.preview_controller.new
-      controller.request = request
-      controller.response = response
-      @preview_controller ||= controller
-    end
-
-    def prettify_error(exception)
-      error_params = if exception.is_a?(ViewComponent::PreviewTemplateError)
-        {
-          file_path: @preview&.full_path,
-          line_number: 0,
-          source_code: @target&.source
-        }
-      elsif exception.is_a?(ActionView::Template::Error) & exception.message.include?("implements a reserved method")
-        message_parts = exception.message.split("\n").first.split
-        component_class = message_parts.first.constantize
-        naughty_method = message_parts.last.delete("#").delete("`").delete(".")
-        method = component_class.instance_method(naughty_method.to_sym)
-        if method
-          {
-            file_path: method.source_location.first,
-            line_number: method.source_location[1]
-          }
-        end
-      end
-      Lookbook::Error.new(exception, **(error_params || {}))
-    end
-
-    def path_segments
-      params[:path].split("/")
-    end
   end
 end

data/app/helpers/lookbook/application_helper.rb

@@ -18,7 +18,7 @@ module Lookbook
     end
 
     def landing_path
-      landing = Lookbook.pages.find(&:landing) || Lookbook.pages.first
+      landing = Lookbook.pages.find(&:landing?) || Lookbook.pages.first
       if landing.present?
         lookbook_page_path landing.lookup_path
       else
@@ -27,7 +27,7 @@ module Lookbook
     end
 
     def generate_id(*args)
-      args.map { |args| args.delete_prefix("/").tr("&?=/_\-", "-") }.join("-")
+      args.map { |args| args.delete_prefix("/").tr("&?=/_-", "-") }.join("-")
     end
   end
 end

data/app/helpers/lookbook/output_helper.rb

@@ -1,15 +1,15 @@
 module Lookbook
   module OutputHelper
     def markdown(text = nil, &block)
-      Lookbook::Markdown.render(block ? capture(&block) : text)
+      MarkdownRenderer.call(block ? capture(&block) : text, Lookbook.config.markdown_options)
     end
 
-    def highlight(source, **opts)
-      Lookbook::CodeFormatter.highlight(source, **opts)
+    def highlight(*args, **opts)
+      CodeHighlighter.call(*args, **opts)
     end
 
-    def beautify(source, **opts)
-      Lookbook::CodeFormatter.beautify(source, **opts)
+    def beautify(*args, **opts)
+      CodeBeautifier.call(*args, **opts)
     end
 
     def pretty_json(obj)

data/app/helpers/lookbook/page_helper.rb

@@ -3,7 +3,7 @@ module Lookbook
     include Utils
 
     def page_path(id)
-      page = id.is_a?(Page) ? id : Lookbook.pages.find(id)
+      page = id.is_a?(Page) ? id : Lookbook.pages.find_by_id(id)
       if page.present?
         lookbook_page_path page.lookup_path
       else
@@ -16,10 +16,13 @@ module Lookbook
 
       @embed_counter ||= 0
 
-      preview_lookup = args.first.is_a?(Symbol) ? args.first : preview_class_path(args.first)
-      preview = Lookbook.previews.find(preview_lookup)
-      example = args[1] ? preview&.example(args[1]) : preview&.default_example
+      preview = if args.first.is_a?(Symbol)
+        Lookbook.previews.find_by_path(args.first)
+      else
+        Lookbook.previews.find_by_preview_class(args.first)
+      end
 
+      example = args[1] ? preview&.example(args[1]) : preview&.default_example
       embed_id = "#{url_for}/embed/#{example.lookup_path}".delete_prefix("/").tr("/", "-")
 
       lookbook_render :embed,

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

@@ -1,5 +1,6 @@
 <% 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| %>
@@ -12,50 +13,50 @@
         }",
         "@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| %>
 
-        <%= 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.pane class: "overflow-hidden" do %>
-              <%= lookbook_render :nav,
-                id: "previews-nav",
-                collection: @previews,
-                alpine_data: "$store.nav.previews",
-                collapse_singles: true do |nav| %>
-                <%= nav.toolbar do |toolbar| %>
-                  <% toolbar.section padded: true do %>
-                    <h4 class="pt-1">Previews</h4>
-                  <% end %>
-                  <% toolbar.section align: :right, padded: false do %>
-                    <%= lookbook_render :button_group, size: :xs do |group| %>
-                      <% group.button icon: :minus_square,
-                        tooltip: "Collapse all",
-                        "@click": "closeAll" %>
+            <% if @previews.any? %>
+              <% layout.pane class: "overflow-hidden" do %>
+                <%= lookbook_render :nav,
+                  id: "previews-nav",
+                  tree: @previews.to_tree,
+                  alpine_data: "$store.nav.previews" do |nav| %>
+                  <%= nav.toolbar do |toolbar| %>
+                    <% toolbar.section padded: true do %>
+                      <h4 class="pt-1">Previews</h4>
+                    <% end %>
+                    <% toolbar.section align: :right, padded: false do %>
+                      <%= lookbook_render :button_group, size: :xs do |group| %>
+                        <% group.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.filter store: "$store.nav.previews.filter", placeholder: "Filter previews by name&hellip;" %>
               <% end %>
             <% end %>
-          <% end %>
 
-          <% if @pages.any? %>
-            <% layout.pane class: "overflow-hidden" do %>
-              <%= lookbook_render :nav,
-                id: "pages-nav",
-                collection: @pages,
-                alpine_data: "$store.nav.pages" do |nav| %>
-                <%= nav.toolbar do |toolbar| %>
-                  <% toolbar.section padded: true do %>
-                    <h4 class="pt-1">Pages</h4>
-                  <% end %>
-                  <% toolbar.section align: :right, padded: false do %>
-                    <%= lookbook_render :button_group, size: :xs do |group| %>
-                      <% group.button icon: :minus_square,
-                        tooltip: "Collapse all",
-                        "@click": "closeAll" %>
+            <% if @pages.any? %>
+              <% layout.pane class: "overflow-hidden" do %>
+                <%= lookbook_render :nav,
+                  id: "pages-nav",
+                  tree: @pages.to_tree,
+                  alpine_data: "$store.nav.pages" do |nav| %>
+                  <%= nav.toolbar do |toolbar| %>
+                    <% toolbar.section padded: true do %>
+                      <h4 class="pt-1">Pages</h4>
+                    <% end %>
+                    <% toolbar.section align: :right, padded: false do %>
+                      <%= lookbook_render :button_group, size: :xs do |group| %>
+                        <% group.button icon: :minus_square,
+                          tooltip: "Collapse all",
+                          "@click": "closeAll" %>
+                      <% end %>
                     <% end %>
                   <% end %>
                 <% end %>
@@ -69,6 +70,7 @@
         <%= 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 %>
@@ -77,4 +79,4 @@
   <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>
 <% end %>
 
-<%= render template: "layouts/lookbook/shell" %>
+<%= render template: "layouts/lookbook/shell" %>

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

@@ -16,7 +16,7 @@
               size: :lg,
               icon: :chevron_left,
               tooltip: "Previous page",
-              href: lookbook_page_path(@previous_page.lookup_path),
+              href: lookbook_page_path(@previous_page.path),
               class: "pr-0.5 bg-transparent" %>
           <% else %>
             <%= lookbook_render :button,
@@ -31,7 +31,7 @@
               size: :lg,
               icon: :chevron_right,
               tooltip: "Next page",
-              href: lookbook_page_path(@next_page.lookup_path),
+              href: lookbook_page_path(@next_page.path),
               class: "pl-0.5 bg-transparent" %>
           <% else %>
             <%= lookbook_render :button,

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

@@ -2,6 +2,7 @@
   <div
     id="app"
     x-data="app"
+    x-cloak
     @popstate.window="handleNavigation"
     @click.document="hijax"
     @navigation:start="closeMobileSidebar"
@@ -13,8 +14,8 @@
       </style>
     <% end %>
 
-    <%= lookbook_render :header, id: "app-header", debug_menu: config.debug_menu do |header| %>
-      <% header.branding { config.project_name } %>
+    <%= lookbook_render :header, id: "app-header", debug_menu: @config.debug_menu do |header| %>
+      <% header.branding { @config.project_name } %>
     <% end %>
 
     <%= content_for?(:shell) ? yield(:shell) : yield %>

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

@@ -6,7 +6,7 @@
   <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="<%= asset_path("/css/themes/#{@config.ui_theme}.css") %>" rel="stylesheet">
 
   <%- if @theme_overrides.present? %>
     <style media="all">
@@ -14,7 +14,7 @@
     </style>
   <% end %>
 
-  <% if config.ui_favicon == true %>
+  <% 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"
@@ -26,10 +26,10 @@
   <% end %>
 
   <script>
-    window.LOG_LEVEL = <%= Lookbook::Engine.log_level %>;
-    window.APP_NAME = "<%= Lookbook::Engine.app_name %>";
-    <% if Lookbook::Engine.websocket %>
-    window.SOCKET_PATH = "<%= Lookbook::Engine.websocket_mount_path %>";
+    window.LOG_LEVEL = <%= @config.log_level %>;
+    window.APP_NAME = "<%= @engine.app_name %>";
+    <% if @engine.websocket.mounted? %>
+    window.SOCKET_PATH = "<%= @engine.websocket.full_mount_path %>";
     <% end %>
   </script>
   
@@ -38,7 +38,7 @@
     <script src="<%= asset_path("/js/embed.js") %>" defer></script>
   <% end %>
   
-  <title><%= [@title, config.project_name || "Lookbook"].compact.join(" :: ") %></title>
+  <title><%= [@title, @config.project_name || "Lookbook"].compact.join(" :: ") %></title>
 </head>
 <body>
   <%= yield :body %>

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

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

data/app/views/lookbook/{previews → inspector}/inputs/_toggle.html.erb

@@ -3,18 +3,18 @@ button_classes = [
   "relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full
     cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2
     focus:ring-offset-2 focus:ring-input-border-focus",
-  value == true ? "bg-lookbook-input-toggle-active" : "bg-lookbook-input-toggle"
+  value == "true" ? "bg-lookbook-input-toggle-active" : "bg-lookbook-input-toggle"
 ]
 span_classes = [
   "pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow ring-0 transition ease-in-out duration-200",
-  value == true ? "translate-x-5" : "translate-x-0"
+  value == "true" ? "translate-x-5" : "translate-x-0"
 ]
 %>
 
-<%= button_tag **input_options,
+<%= tag.button **input_options,
   class: class_names(button_classes),
   role: "switch",
   type: "button",
-  "@click.stop": "value = !value" do %>
+  "@click.stop": "value = value == 'true' ? 'false' : 'true'", escape: false do %>
   <%= tag.span "aria-hidden": true, class: class_names(span_classes) %>
-<% end %>
+<% end %>

data/app/views/lookbook/{previews → inspector}/panels/_notes.html.erb

@@ -2,7 +2,7 @@
 <% if items.many? %>
   <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">
+      <div class="p-4 relative">
         <h6 class="italic font-mono mb-4 opacity-40">
           # <%= item.label %>
         </h6>
@@ -11,7 +11,7 @@
     <% end %>
   </div>
 <% else %>
-  <div class="px-4 py-6 bg-lookbook-prose-bg w-full h-full">
+  <div class="p-4 w-full h-full 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/inspector/panels/_params.html.erb

@@ -0,0 +1,15 @@
+<% if @params.none? %>
+  <div class="p-4 w-full h-full bg-lookbook-prose-bg" id="params-editor-blank-slate">
+    <%= lookbook_render :prose do %>
+      <em class='opacity-50'>No params configured.</em>
+    <% end %>
+  </div>
+<% else %>
+  <div class="p-4 w-full h-full overflow-x-hidden" id="params-editor-<%= @target.id %>">
+    <%= lookbook_render "params/editor" do |editor| %>
+      <% @params.each do |param| %>
+        <% editor.field param: param %>
+      <% end %>
+    <% end %>
+  </div>
+<% end %>