lookbook 1.0.0.beta.3 → 1.0.0.beta.6

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

@@ -10,11 +10,13 @@ module Lookbook
 
     def render_component_tag(tag = :div, **attrs, &block)
       merged_classes = class_names(attrs[:class], @html_attrs[:class])
-      merge_attrs = @html_attrs.except(:class).deep_merge(attrs.except(:class))
+      merged_attrs = @html_attrs.except(:class).deep_merge(attrs.except(:class))
+
+
       render Lookbook::TagComponent.new(tag: tag,
         name: component_name,
-        **merge_attrs,
-        x_data: prepare_alpine_data(attrs[:x_data]),
+        **merged_attrs,
+        "x-data": prepare_alpine_data(merged_attrs[:"x-data"]),
         class: merged_classes), &block
     end
 
@@ -31,7 +33,7 @@ module Lookbook
     end
 
     def prepare_alpine_data(x_data = nil)
-      alpine_component_name = x_data || @html_attrs&.dig(:x_data) || alpine_component
+      alpine_component_name = x_data || @html_attrs&.dig(:"x-data") || alpine_component
       if alpine_component_name.present?
         args = Array.wrap(alpine_data)
         args.any? ? "#{alpine_component_name}(#{safe_join(args).gsub(""", "'").tr("\"", "'")})" : alpine_component_name

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/copy_button/component.html.erb

@@ -1,10 +1,10 @@
 <%= render_component :button,
   name: "copy-button",
   **@button_attrs,
-  x_data: prepare_alpine_data,
+  "x-data": prepare_alpine_data,
   "@click.prevent": "copyToClipboard" do |button| %>
-  <% button.icon name: @icon, size: icon_size, x_show: "!copied", cloak: true %>
-  <%= icon  :check, size: icon_size, class: "text-green-500", x_show: "copied", cloak: true  %>
+  <% button.icon name: @icon, size: icon_size, "x-show": "!copied", cloak: true %>
+  <%= icon  :check, size: icon_size, class: "text-green-500", "x-show": "copied", cloak: true  %>
   <% if content %>
     <div x-ref="copyTarget" class="hidden"><%== content %></div>
   <% end %>

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

@@ -1,41 +1,41 @@
 <% if @example.present? %>
-  <%= render_component_tag class: "not-prose border-b border-lookbook-divider rounded-sm overflow-hidden", "@navigation:start.window": "cleanup" do %>
+<%= render_component_tag class: "not-prose border-b border-lookbook-divider rounded-sm overflow-hidden", "@navigation:start.window": "cleanup" do %>
 
-    <%= render_component :toolbar, class: "border border-b-0 border-lookbook-divider" do |toolbar| %>
-      <% toolbar.section padded: true do %>
-        <h3>
-          <%= @example.preview.label %> (<%= @example.label %>)
-        </h3>
-      <% end %>
-        <% 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),
-            tooltip: "View in Inspector" %>
-          <% group.button icon: :external_link,
-            href: helpers.lookbook_inspect_path(@example.path, @params),
-            tooltip: "Open in new window",
-            target: "_blank" %>
-        <% end %>
+  <%= render_component :toolbar, class: "border border-b-0 border-lookbook-divider" do |toolbar| %>
+    <% toolbar.section padded: true do %>
+      <h3>
+        <%= @example.preview.label %> (<%= @example.label %>)
+      </h3>
+    <% end %>
+    <% toolbar.section align: :right, divide: :left do %>
+      <%= render_component :button_group do |group| %>
+        <% group.button icon: :eye,
+          href: lookbook_inspect_path(@example.path, @params),
+          tooltip: "View in Inspector" %>
+        <% group.button icon: :external_link,
+          href: lookbook_inspect_path(@example.path, @params),
+          tooltip: "Open in new window",
+          target: "_blank" %>
       <% end %>
     <% end %>
+  <% end %>
 
-    <div
-      x-show="tab === 'preview'"
-      @viewport:loaded="loadResizer"
-      @dom:update-complete="loadResizer"
-      @viewport:resize-progress="resizeIframe"
-      @viewport:resize-complete="resizeIframe"
-      @tabs:change.window="resizeIframe"> 
-      <%= render_component :viewport,
-        src: helpers.lookbook_preview_path(@example.path, @params.merge(lookbook_embed: true)),
-        alpine_data: "store",
-        resize_height: false,
-        max_height: @max_height,
-        class: "mb-[-2px]" %>
-    </div>
+  <div
+    x-show="tab === 'preview'"
+    @viewport:loaded="loadResizer"
+    @dom:update-complete="loadResizer"
+    @viewport:resize-progress="resizeIframe"
+    @viewport:resize-complete="resizeIframe"
+    @tabs:change.window="resizeIframe"> 
+    <%= render_component :viewport,
+      src: lookbook_preview_path(@example.path, @params.merge(lookbook_embed: true)),
+      alpine_data: "store",
+      resize_height: false,
+      max_height: @max_height,
+      class: "mb-[-2px]" %>
+  </div>
 
-  <% end %>
+<% end %>
 <% else %>
 <%= render_component_tag class: "bg-white flex flex-col items-center justify-center border-2 border-dashed border-gray-200 p-6 rounded-md not-prose" do %>
   <div class="px-4 text-center">
@@ -47,5 +47,5 @@
       </p>
     </div>
   </div>
-  <% end %>
+<% end %>
 <% end %>

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
@@ -12,7 +12,7 @@
 
     <% toolbar.section padded: false, align: :right, class: "flex items-center" do %>
       <%= render_component :button_group do |group| %>
-        <% if Rails.env.development? %>
+        <% if @debug_menu %>
           <% group.button icon: :help_circle, class: "opacity-50 hover:opacity-100 transition !text-lookbook-header-text" do |button| %>
             <% button.dropdown do %>
               <%= tag.div class: "divide-y divide-lookbook-divider min-w-[180px]" do %>
@@ -60,11 +60,11 @@
         <% end %>
         <% group.button icon: :menu,
           "@click.stop": "toggleSidebar",
-          x_show: "$store.layout.mobile && sidebarHidden",
+          "x-show": "$store.layout.mobile && sidebarHidden",
           class: "!text-lookbook-header-text" %>
         <% group.button icon: :x,
           "@click.stop": "toggleSidebar",
-          x_show: "$store.layout.mobile && !sidebarHidden",
+          "x-show": "$store.layout.mobile && !sidebarHidden",
           "@keydown.esc.window": "closeMobileSidebar",
           class: "!text-lookbook-header-text" %>
       <% end %>    

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

@@ -2,6 +2,11 @@ module Lookbook
   class Header::Component < Lookbook::BaseComponent
     renders_one :branding
 
+    def initialize(debug_menu: false, **html_attrs)
+      @debug_menu = debug_menu
+      super(**html_attrs)
+    end
+
     def landing_path
       helpers.landing_path if defined? helpers.landing_path
     end

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

@@ -0,0 +1,4 @@
+<% if panel_styles %>
+  <% content_for :panel_css do %><%= panel_styles %><% end %>
+<% end %>
+<%= panel_html %>

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.html.erb

@@ -1,12 +1,8 @@
 <%= render_component_tag class: "flex flex-col overflow-hidden h-full",
   "@filter:change.stop": "filter($event.detail.text)" do %>
   
-  <% if label.present? %>
-    <%= render_component :toolbar do |toolbar| %>
-      <% toolbar.section padded: true do %>
-        <h4 class="pt-1"><%= label %></h4>
-      <% end %>
-    <% end %>
+  <% if toolbar %>
+    <%= toolbar %>
   <% end %>
 
   <% if filter && items.any? %>
@@ -21,11 +17,11 @@
         <%= safe_join(items) %>
       </ul>
       <div class="p-4 text-center" x-show="empty" x-cloak>
-        <h4 class="opacity-50 italic">No matching <%= label.downcase %>.</h4>
+        <h4 class="opacity-50 italic">No matching results.</h4>
       </div>
     <% else %>
       <div class="p-4 text-center">
-        <h4 class="opacity-50 italic">No <%= label.downcase %> available.</h4>
+        <h4 class="opacity-50 italic">Nothing here yet.</h4>
       </div>
     <% end %>
   </div>

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

@@ -1,28 +1,26 @@
 module Lookbook
   class Nav::Component < Lookbook::BaseComponent
     renders_one :filter, Lookbook::Filter::Component
+    renders_one :toolbar, Lookbook::Toolbar::Component
 
     def initialize(
+      id: nil,
       collection:,
-      label: nil,
       collapse_singles: false,
       **attrs
     )
+      @id = id.presence || "#{collection.id}-nav"
       @collection = collection.as_tree
-      @label = label
       @item_args = {
         collapse_singles: collapse_singles
       }
-      super(**attrs)
-    end
-
-    def label
-      @label || @collection.label
+      super(**attrs, id: id)
     end
 
     def items
       @collection.non_empty_items.map do |item|
         render Lookbook::Nav::Item::Component.new item,
+          nav_id: @id,
           depth: 1,
           **@item_args
       end

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

@@ -1,16 +1,22 @@
-<%= render_component_tag :li, id: @item.id, class: "list-none", "x-show": "!filteredOut", cloak: true do %>
-  
+<%= render_component_tag :li,
+  id: id,
+  class: "list-none",
+  "x-show": "!filteredOut",
+  data: {
+    "entity-type": item.type
+  },
+  cloak: true do %>
   <%= render_tag href.present? ? :a : :div,
     href: href,
     class: "flex items-center py-1 select-none cursor-pointer text-lookbook-nav-text hover:bg-lookbook-nav-item-hover",
     style: "padding-left: #{left_pad}px",
-    x_bind: "bindings.#{href.present? ? "link" : "toggle"}" do %>
+    "x-bind": "bindings.#{href.present? ? "link" : "toggle"}" do %>
     <div class="relative flex items-center">
-      <%= icon  nil,
+      <%= icon nil,
         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(@item), size: 3.5, class: "mr-1.5 text-lookbook-nav-icon" %>
+        "x-effect": "iconName = open ? 'chevron-down' : 'chevron-right'" if children? %>
+      <%= icon nav_icon, size: 3.5, class: "mr-1.5 text-lookbook-nav-icon-stroke" %>
       <span><%= label %></span>
     </div>
   <% end %>

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

@@ -14,16 +14,22 @@ module Lookbook
 
     def initialize(
       item,
+      nav_id:,
       depth: 1,
       collapse_singles: false,
       **html_attrs
     )
+      @nav_id = nav_id
       @item = item
       @depth = depth
       @collapse_singles = collapse_singles
       super(**html_attrs)
     end
 
+    def id
+      "#{@nav_id}-#{@item.id}"
+    end
+
     def left_pad
       ((@depth - 1) * 12) + 24
     end
@@ -40,6 +46,7 @@ module Lookbook
       @children ||= if collection? && !collapsed?
         item.non_empty_items.map do |item|
           render Lookbook::Nav::Item::Component.new item,
+            nav_id: @nav_id,
             depth: (@depth + 1),
             collapse_singles: @collapse_singles
         end
@@ -52,8 +59,8 @@ module Lookbook
       collapsed? ? @item.first : @item
     end
 
-    def nav_icon(entity)
-      ICONS[entity.type] || :file
+    def nav_icon
+      ICONS[@item.type] || :file
     end
 
     def collection?

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

@@ -1,4 +1,4 @@
- <%= render_component_tag x_data: "{ activeTab: null }" do %>
+ <%= render_component_tag "x-data": "{ activeTab: null }" do %>
   <div class="flex w-full border-b border-lookbook-divider mb-6">
     <%= render_component :tabs, theme: :page do |t| %>
       <% @tabs.each do |props| %>

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/split_layout/component.html.erb

@@ -1,4 +1,4 @@
-<%= render_component_tag class: "grid h-full w-full", x_bind: "bindings.root", x_effect: "initSplit" do %>
+<%= render_component_tag class: "grid h-full w-full", "x-bind": "bindings.root", "x-effect": "initSplit" do %>
   <% panes.each.with_index(1) do |pane, i| %>
     <%= pane %>
     <% if i < panes.size %>

data/app/components/lookbook/tab_panels/panel/component.html.erb

@@ -1,7 +1,7 @@
 <%= render_component_tag :section,
   id: @id,
-  x_ref: @name,
-  x_cloak: true,
+  "x-ref": @name,
+  cloak: true,
   class: "h-full",
   ":class": "{ hidden: !isActive($el) }" do %>
     <%== content %>

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

@@ -9,8 +9,8 @@
     <%= safe_join(tabs) %>
   </div>
   <div x-ref="dropdownTrigger" class="absolute" x-show="hasHiddenTabs" :style="{left: `${triggerLeft}px`}">
-    <%= render_component :button, icon: :chevrons_right, x_show: "visibleTabsCount > 0" %>
-    <%= render_component :button, icon: :menu, class: "-ml-3", x_show: "visibleTabsCount === 0" %>
+    <%= render_component :button, icon: :chevrons_right, "x-show": "visibleTabsCount > 0" %>
+    <%= render_component :button, icon: :menu, class: "-ml-3", "x-show": "visibleTabsCount === 0" %>
   </div>
   <div class="hidden">
     <div x-ref="tabsDropdown" data-cloak>

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

@@ -1,5 +1,5 @@
 <%= render_component_tag :button,
-  x_ref: @name,
+  "x-ref": @name,
   class: [
     "whitespace-nowrap px-4 border-l-2 cursor-pointer block w-full text-left",
     {
@@ -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

@@ -1,6 +1,6 @@
 <%= render_component_tag :button,
   id: @id,
-  x_ref: @name,
+  "x-ref": @name,
   class: [
     "whitespace-nowrap cursor-pointer pt-2.5 pb-1.5 border-b-2",
     {
@@ -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

@@ -4,26 +4,21 @@ module Lookbook
 
     def initialize(tag: :div, name: nil, cloak: false, **html_attrs)
       @tag = tag
-      html_attrs[:class] = class_names(html_attrs[:class]) if html_attrs[:class]
       html_attrs[:data] ||= {}
       html_attrs[:data][:component] = name if name.present?
-      html_attrs[:x_cloak] = true if cloak == true
-      @html_attrs = convert_attrs(html_attrs)
+      html_attrs["x-cloak"] = true if cloak == true
+      html_attrs[self.class.escape_attribute_key] = false
+      @html_attrs = html_attrs
     end
 
     def call
-      @html_attrs[Rails.version.to_f < 7.0 ? :escape_attributes : :escape] = false
       tag.public_send(@tag, **@html_attrs) do
         content
       end
     end
 
-    protected
-
-    def convert_attrs(html_attrs)
-      html_attrs.map do |name, value|
-        [name.to_s.tr("_", "-"), value]
-      end.to_h
+    def self.escape_attribute_key
+      @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

@@ -17,7 +17,7 @@ module Lookbook
       if landing.present?
         redirect_to lookbook_page_path(landing.lookup_path)
       else
-        render "lookbook/index", layout: Lookbook.previews.any? ? "lookbook/application" : "lookbook/shell"
+        render "lookbook/index"
       end
     end
 

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
@@ -145,7 +156,8 @@ module Lookbook
         context: context_data,
         preview: preview,
         examples: examples,
-        components: preview.components,
+        example: example,
+        data: Lookbook.data,
         app: Lookbook
       })
     end

data/app/helpers/lookbook/application_helper.rb

@@ -20,11 +20,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