RubyGems - lookbook - Versions diffs - 0.9.1 → 1.0.0.beta.0 - Mend

lookbook 0.9.1 → 1.0.0.beta.0

Files changed (206) hide show

checksums.yaml +4 -4
data/README.md +43 -859
data/app/assets/lookbook/css/lookbook.css +55 -0
data/app/assets/lookbook/css/themes/blue.css +42 -0
data/app/assets/lookbook/css/themes/indigo.css +42 -0
data/app/assets/lookbook/css/themes/zinc.css +42 -0
data/app/assets/lookbook/css/{tooltip_theme.css → tooltip.css} +14 -8
data/app/assets/lookbook/js/app.js +64 -63
data/app/assets/lookbook/js/components/clipboard.js +47 -0
data/app/assets/lookbook/js/components/tooltip.js +30 -0
data/app/assets/lookbook/js/config.js +7 -4
data/app/assets/lookbook/js/helpers/build.js +22 -0
data/app/assets/lookbook/js/helpers/dom.js +45 -0
data/app/assets/lookbook/js/helpers/layout.js +21 -0
data/app/assets/lookbook/js/helpers/request.js +16 -0
data/app/assets/lookbook/js/helpers/string.js +11 -0
data/app/assets/lookbook/js/lib/socket.js +4 -3
data/app/assets/lookbook/js/lib/tippy.js +8 -0
data/app/assets/lookbook/js/lookbook.js +61 -0
data/app/assets/lookbook/js/plugins/logger.js +39 -0
data/app/assets/lookbook/js/stores/filter.js +2 -2
data/app/assets/lookbook/js/stores/inspector.js +22 -16
data/app/assets/lookbook/js/stores/layout.js +101 -5
data/app/assets/lookbook/js/stores/nav.js +17 -16
data/app/assets/lookbook/js/stores/pages.js +4 -2
data/app/assets/lookbook/js/stores/settings.js +7 -0
data/app/assets/lookbook/js/stores/workbench.js +29 -0
data/app/components/lookbook/button/component.html.erb +28 -0
data/app/components/lookbook/button/component.js +55 -0
data/app/components/lookbook/button/component.rb +39 -0
data/app/components/lookbook/button_group/component.html.erb +3 -0
data/app/components/lookbook/button_group/component.rb +18 -0
data/app/components/lookbook/code/component.css +57 -0
data/app/components/lookbook/code/component.html.erb +10 -0
data/app/components/lookbook/code/component.js +3 -0
data/app/components/lookbook/code/component.rb +56 -0
data/app/components/lookbook/code/highlight_github_light.css +217 -0
data/app/components/lookbook/component.rb +41 -0
data/app/components/lookbook/copy_button/component.html.erb +11 -0
data/app/components/lookbook/copy_button/component.js +16 -0
data/app/components/lookbook/copy_button/component.rb +23 -0
data/app/components/lookbook/dimensions_display/component.html.erb +10 -0
data/app/components/lookbook/dimensions_display/component.js +30 -0
data/app/components/lookbook/dimensions_display/component.rb +18 -0
data/app/components/lookbook/embed/component.html.erb +50 -0
data/app/components/lookbook/embed/component.js +39 -0
data/app/components/lookbook/embed/component.rb +22 -0
data/app/components/lookbook/filter/component.html.erb +17 -0
data/app/components/lookbook/filter/component.js +21 -0
data/app/components/lookbook/filter/component.rb +15 -0
data/app/components/lookbook/header/component.html.erb +79 -0
data/app/components/lookbook/header/component.rb +9 -0
data/app/components/lookbook/icon/component.css +11 -0
data/app/components/lookbook/icon/component.html.erb +5 -0
data/app/components/lookbook/icon/component.js +5 -0
data/app/components/lookbook/icon/component.rb +23 -0
data/app/components/lookbook/nav/component.html.erb +33 -0
data/app/components/lookbook/nav/component.js +52 -0
data/app/components/lookbook/nav/component.rb +37 -0
data/app/components/lookbook/nav/item/component.html.erb +23 -0
data/app/components/lookbook/nav/item/component.js +66 -0
data/app/components/lookbook/nav/item/component.rb +84 -0
data/app/components/lookbook/params_editor/component.html.erb +3 -0
data/app/components/lookbook/params_editor/component.js +12 -0
data/app/components/lookbook/params_editor/component.rb +11 -0
data/app/components/lookbook/params_editor/field/component.html.erb +50 -0
data/app/components/lookbook/params_editor/field/component.js +36 -0
data/app/components/lookbook/params_editor/field/component.rb +41 -0
data/app/components/lookbook/prose/component.css +12 -0
data/app/components/lookbook/prose/component.html.erb +3 -0
data/app/components/lookbook/prose/component.rb +26 -0
data/app/components/lookbook/split_layout/component.html.erb +13 -0
data/app/components/lookbook/split_layout/component.js +151 -0
data/app/components/lookbook/split_layout/component.rb +11 -0
data/app/components/lookbook/tabbed_content/component.html.erb +5 -0
data/app/components/lookbook/tabbed_content/component.js +21 -0
data/app/components/lookbook/tabbed_content/component.rb +20 -0
data/app/components/lookbook/tabbed_content/section/component.html.erb +8 -0
data/app/components/lookbook/tabbed_content/section/component.rb +9 -0
data/app/components/lookbook/tabs/component.css +8 -0
data/app/components/lookbook/tabs/component.html.erb +14 -0
data/app/components/lookbook/tabs/component.js +107 -0
data/app/components/lookbook/tabs/component.rb +30 -0
data/app/components/lookbook/tabs/dropdown_tab/component.html.erb +14 -0
data/app/components/lookbook/tabs/dropdown_tab/component.rb +16 -0
data/app/components/lookbook/tabs/tab/component.html.erb +18 -0
data/app/components/lookbook/tabs/tab/component.rb +16 -0
data/app/components/lookbook/tag_component.rb +29 -0
data/app/components/lookbook/toolbar/component.css +16 -0
data/app/components/lookbook/toolbar/component.html.erb +5 -0
data/app/components/lookbook/toolbar/component.rb +26 -0
data/app/components/lookbook/viewport/component.css +11 -0
data/app/components/lookbook/viewport/component.html.erb +57 -0
data/app/{assets/lookbook/js/components/preview-window.js → components/lookbook/viewport/component.js} +57 -14
data/app/components/lookbook/viewport/component.rb +21 -0
data/app/controllers/lookbook/application_controller.rb +16 -5
data/app/controllers/lookbook/pages_controller.rb +18 -10
data/app/controllers/lookbook/previews_controller.rb +62 -25
data/app/helpers/lookbook/application_helper.rb +7 -3
data/app/helpers/lookbook/component_helper.rb +22 -10
data/app/helpers/lookbook/output_helper.rb +8 -4
data/app/helpers/lookbook/page_helper.rb +13 -21
data/app/views/layouts/lookbook/application.html.erb +76 -28
data/app/views/layouts/lookbook/inspector.html.erb +7 -0
data/app/views/layouts/lookbook/page.html.erb +53 -0
data/app/views/layouts/lookbook/shell.html.erb +64 -0
data/app/views/layouts/lookbook/skeleton.html.erb +27 -10
data/app/views/layouts/lookbook/standalone.html.erb +5 -0
data/app/views/lookbook/404.html.erb +15 -0
data/app/views/lookbook/error.html.erb +34 -34
data/app/views/lookbook/index.html.erb +11 -6
data/app/views/lookbook/pages/show.html.erb +29 -93
data/app/views/{layouts/lookbook → lookbook}/preview.html.erb +3 -5
data/app/views/lookbook/previews/panels/_notes.html.erb +19 -25
data/app/views/lookbook/previews/panels/_output.html.erb +7 -18
data/app/views/lookbook/previews/panels/_params.html.erb +13 -15
data/app/views/lookbook/previews/panels/_preview.html.erb +6 -52
data/app/views/lookbook/previews/panels/_source.html.erb +7 -16
data/app/views/lookbook/previews/show.html.erb +130 -24
data/config/routes.rb +7 -7
data/lib/lookbook/code_formatter.rb +37 -13
data/lib/lookbook/collection.rb +19 -16
data/lib/lookbook/config.rb +125 -0
data/lib/lookbook/engine.rb +66 -59
data/lib/lookbook/entity.rb +47 -0
data/lib/lookbook/error.rb +1 -2
data/lib/lookbook/features.rb +1 -1
data/lib/lookbook/markdown.rb +3 -4
data/lib/lookbook/page.rb +26 -43
data/lib/lookbook/page_collection.rb +8 -0
data/lib/lookbook/params.rb +14 -3
data/lib/lookbook/preview.rb +16 -7
data/lib/lookbook/preview_collection.rb +8 -0
data/lib/lookbook/preview_controller.rb +6 -2
data/lib/lookbook/preview_example.rb +5 -6
data/lib/lookbook/preview_group.rb +4 -9
data/lib/lookbook/{code_inspector.rb → source_inspector.rb} +2 -2
data/lib/lookbook/theme.rb +22 -0
data/lib/lookbook/utils.rb +11 -3
data/lib/lookbook/version.rb +1 -1
data/lib/lookbook.rb +4 -1
data/lib/tasks/lookbook_tasks.rake +12 -0
data/public/lookbook-assets/css/app.css +2340 -1
data/public/lookbook-assets/css/app.css.map +11 -1
data/public/lookbook-assets/css/lookbook.css +3040 -0
data/public/lookbook-assets/css/lookbook.css.map +1 -0
data/public/lookbook-assets/css/themes/blue.css +44 -0
data/public/lookbook-assets/css/themes/blue.css.map +1 -0
data/public/lookbook-assets/css/themes/indigo.css +44 -0
data/public/lookbook-assets/css/themes/indigo.css.map +1 -0
data/public/lookbook-assets/css/themes/zinc.css +44 -0
data/public/lookbook-assets/css/themes/zinc.css.map +1 -0
data/public/lookbook-assets/js/app.js +10861 -1
data/public/lookbook-assets/js/app.js.map +2571 -1
data/public/lookbook-assets/js/embed.js +895 -1
data/public/lookbook-assets/js/embed.js.map +1 -1
data/public/lookbook-assets/js/lookbook.js +13529 -0
data/public/lookbook-assets/js/lookbook.js.map +1 -0
metadata +128 -116
data/app/assets/lookbook/css/app.css +0 -161
data/app/assets/lookbook/css/code_theme.css +0 -214
data/app/assets/lookbook/js/components/app.js +0 -55
data/app/assets/lookbook/js/components/code.js +0 -5
data/app/assets/lookbook/js/components/copy.js +0 -20
data/app/assets/lookbook/js/components/embed.js +0 -89
data/app/assets/lookbook/js/components/filter.js +0 -35
data/app/assets/lookbook/js/components/inspector.js +0 -66
data/app/assets/lookbook/js/components/nav-group.js +0 -47
data/app/assets/lookbook/js/components/nav-item.js +0 -29
data/app/assets/lookbook/js/components/nav.js +0 -28
data/app/assets/lookbook/js/components/page-tabs.js +0 -9
data/app/assets/lookbook/js/components/page.js +0 -25
data/app/assets/lookbook/js/components/param.js +0 -34
data/app/assets/lookbook/js/components/sidebar.js +0 -18
data/app/assets/lookbook/js/components/sizes.js +0 -16
data/app/assets/lookbook/js/components/splitter.js +0 -25
data/app/assets/lookbook/js/components/tabs.js +0 -52
data/app/assets/lookbook/js/lib/split.js +0 -15
data/app/assets/lookbook/js/stores/sidebar.js +0 -26
data/app/views/layouts/lookbook/basic.html.erb +0 -7
data/app/views/lookbook/components/_branding.html.erb +0 -8
data/app/views/lookbook/components/_code.html.erb +0 -17
data/app/views/lookbook/components/_copy_button.html.erb +0 -11
data/app/views/lookbook/components/_drawer.html.erb +0 -112
data/app/views/lookbook/components/_embed.html.erb +0 -39
data/app/views/lookbook/components/_errors.html.erb +0 -13
data/app/views/lookbook/components/_filter.html.erb +0 -18
data/app/views/lookbook/components/_header.html.erb +0 -6
data/app/views/lookbook/components/_icon.html.erb +0 -5
data/app/views/lookbook/components/_nav.html.erb +0 -16
data/app/views/lookbook/components/_nav_collection.html.erb +0 -5
data/app/views/lookbook/components/_nav_group.html.erb +0 -14
data/app/views/lookbook/components/_nav_item.html.erb +0 -24
data/app/views/lookbook/components/_nav_page.html.erb +0 -22
data/app/views/lookbook/components/_nav_preview.html.erb +0 -13
data/app/views/lookbook/components/_not_found.html.erb +0 -11
data/app/views/lookbook/components/_param.html.erb +0 -21
data/app/views/lookbook/components/_preview.html.erb +0 -77
data/app/views/lookbook/components/_sidebar.html.erb +0 -69
data/app/views/lookbook/pages/not_found.html.erb +0 -15
data/app/views/lookbook/previews/error.html.erb +0 -1
data/app/views/lookbook/previews/inputs/_select.html.erb +0 -7
data/app/views/lookbook/previews/inputs/_text.html.erb +0 -8
data/app/views/lookbook/previews/inputs/_textarea.html.erb +0 -8
data/app/views/lookbook/previews/inputs/_toggle.html.erb +0 -13
data/app/views/lookbook/previews/not_found.html.erb +0 -23

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

@@ -1,28 +1,45 @@
 <!DOCTYPE html>
-<html lang="en" class="h-screen">
+<html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
-  <link href="/lookbook-assets/css/app.css?v=<%= Lookbook::VERSION %>" rel="stylesheet">
+  <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>
+      <%== @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>" %>">
   <% end %>
-  <% if Lookbook::Engine.websocket %>
-    <script>
-      window.SOCKET_PATH = "<%= Lookbook::Engine.websocket_mount_path %>";
-    </script>
-  <% end %>
-  <script src="/lookbook-assets/js/app.js?v=<%= Lookbook.version %>" defer></script>
+  <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 %>";
+    <% end %>
+  </script>
+  <script src="/lookbook-assets/js/lookbook.js?v=<%= Lookbook::VERSION %>" defer></script>
   <% if params[:lookbook_embed] %>
-    <script src="/lookbook-assets/js/embed.js?v=<%= Lookbook.version %>" defer></script>
+    <script src="/lookbook-assets/js/embed.js?v=<%= Lookbook::VERSION %>" defer></script>
   <% end %>
   <title><%= [@title, config.project_name || "Lookbook"].compact.join(" :: ") %></title>
 </head>
-<body class="text-gray-800 font-sans text-sm antialiased overflow-hidden">
+<body>
   <%= yield :body %>
+  <% if Rails.env.development? %>
+    <div id="debug-data" class="hidden" x-cloak>
+      <%= pretty_json(Lookbook.debug_data) %>
+    </div>
+  <% end %>
 </body>
 </html>

data/app/views/layouts/lookbook/standalone.html.erb ADDED Viewed

@@ -0,0 +1,5 @@
+<%= content_for :body do %>
+  <%= yield %>
+<% end %>
+<%= render template: "layouts/lookbook/skeleton" %>

data/app/views/lookbook/404.html.erb ADDED Viewed

@@ -0,0 +1,15 @@
+<div class="bg-white flex flex-col items-center justify-center h-screen w-full">
+  <div class="px-4 text-center max-w-sm">
+    <%= render_component :icon, name: :alert_triangle, size: 10, class: "text-red-300 mx-auto" %>
+    <div class="mt-3">
+      <h5 class="text-base">
+        <%== message %>
+      </h5>
+      <% if defined?(description) %>
+        <p class="mt-2 opacity-50 text-sm">
+          <%== description %>
+        </p>
+      <% end %>
+    </div>
+  </div>
+</div>

data/app/views/lookbook/error.html.erb CHANGED Viewed

@@ -1,46 +1,46 @@
 <%
 error = error.is_a?(Lookbook::Error) ? error : Lookbook::Error.new(error)
 @title = error.title
-disable_header ||= false
 %>
-<%= component "header" unless disable_header %>
-<div class="h-full w-full bg-red-50 flex flex-col border-red-300" id="error-<%= Time.now %>">
-  <header class="mx-8  pt-8 mb-8 flex-none">
-    <h2 class="text-xl font-bold text-red-700"><%= error.title %></h2>
-  </header>
-  <div class="flex-none px-8 py-6 mb-8 border-t border-b border-red-200 bg-red-100 text-base font-mono leading-relaxed">
-    <pre class="whitespace-pre-wrap font-sans leading-tight text-red-900"><%= error.message %></pre>
-  </div>
+<div class="flex flex-col h-screen">
+  <div class="h-full bg-red-50 overflow-y-auto">
+    <header class="mx-8 py-6">
+      <h2 class="text-xl font-bold text-red-700"><%= error.title %></h2>
+    </header>
-  <% if error.file_name %>
-    <div class="text-gray-800 text-sm mx-8 mb-2 font-mono flex-none <%= "pl-2" if error.source_code %>">
-      <span><%= error.file_name %></span>
-      <% if error.line_number %>
-        <span>[line <strong><%= error.line_number %></strong>]</span>
-      <% end %>
+    <div class="flex-none px-8 py-6 mb-8 border-t border-b border-red-200 bg-red-100 text-base font-mono leading-relaxed">
+      <pre class="whitespace-pre-wrap font-sans leading-tight text-red-900"><%= error.message %></pre>
     </div>
-  <% end %>
-  <% if error.source_code %>
-  <div class="prose max-w-full mx-8">
-      <%= code error.file_lang, highlight_lines: [error.source_code[:highlighted_line]],
-        line_numbers: true,
-        start_line: error.source_code[:start_line],
-        strip: false,
-        class: "py-4 !max-w-full !border-red-200 !mt-1" do %><%= h(error.source_code[:code]) %><% end %>
-  </div>
-  <% end %>
+    <% if error.file_name %>
+      <div class="text-sm mx-8 mb-2 font-mono">
+        <span><%= error.file_name %></span>
+        <% if error.line_number %>
+          <span>[line <strong><%= error.line_number %></strong>]</span>
+        <% end %>
+      </div>
+    <% end %>
+    <% if error.source_code %>
+      <div class="mx-8 border border-red-200 max-w-screen-lg">
+        <%= render_component :code,
+          language: error.file_lang,
+          highlight_lines: [error.source_code[:highlighted_line]],
+          start_line: error.source_code[:start_line],
+          line_numbers: true do %><%= h(error.source_code[:code]) %><% end %>
+      </div>
+    <% end %>
-  <h3 class="font-bold mb-4 px-8 mt-8 flex-none">Full stack trace</h3>
-  <div class="text-xs font-mono flex-grow h-full overflow-hidden">
-    <div class="h-full overflow-auto px-8 pb-10 text-gray-400 leading-relaxed">
-      <% error.backtrace.each do |line| %>
-        <div class="hover:text-gray-900 transition-colors duration-100">
-          <%= line %>
-        </div>
-      <% end %>
+    <h3 class="font-bold mb-2 px-8 py-2 mt-8 sticky top-0 bg-red-50">Full stack trace:</h3>
+    <div class="text-xs font-mono">
+      <div class="px-8 pb-10 text-gray-400 leading-relaxed">
+        <% error.backtrace.each do |line| %>
+          <div class="hover:text-gray-900 transition-colors duration-100">
+            <%= line %>
+          </div>
+        <% end %>
+      </div>
     </div>
   </div>
 </div>

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

@@ -1,9 +1,14 @@
-<div class="flex flex-col h-full w-full">
-  <%= component "header" %>
+<div id="welcome-message" class="flex flex-col h-full w-full">
   <div class="flex flex-col items-center justify-center h-full">
-    <div class="p-4 text-center">
-      <%= icon "layers", size: 10, class: "text-gray-300 mx-auto" %>
-      <h5 class="mt-4 text-gray-400 text-base">Select a preview to get started</h5>
+    <div class="p-4 text-center mx-auto">
+      <%= render_component :icon, name: :layers, size: 10, class: "opacity-30 mx-auto" %>
+      <div class="mt-6 text-base opacity-40">
+        <% if Lookbook.previews.any? %>
+          <h5>Select a preview to get started</h5>
+        <% else %>
+          <p>Create a <a href="https://viewcomponent.org/guide/previews.html" target="_blank">preview file</a> to get started.</p>
+      <% end %>
+      </div>
     </div>
   </div>
-</div>
+</div>

data/app/views/lookbook/pages/show.html.erb CHANGED Viewed

@@ -1,97 +1,33 @@
-<div
-  id="page"
-  class="grid grid-rows-[40px_1fr] bg-gray-50 h-full"
-  x-data="page"
-  @click="checkForNavigation"
-  @page:changed.window="scrollToTop">
-  <%= component "header" do %>
-    <div id="page-banner-<%= @page.id %>" class="flex items-center ml-auto pr-2">
-      <% if @previous_page %>
-        <a ref="header-previous-page"
-          href="<%= page_path @previous_page.lookup_path %>"
-          x-tooltip.theme.lookbook="`Previous page`"
-          class="flex-none p-1">
-          <%= icon "chevron-left", size: 4, class: "hover:text-indigo-800" %>
-        </a>
-      <% else %>
-        <span ref="header-previous-page" class="flex-none p-1">
-          <%= icon "chevron-left", size: 4, class: "opacity-20" %>
-        </span>
-      <% end %>
+<div class="px-4 md:px-10 pt-8 md:pt-10 overflow-auto scroll-smooth w-full max-h-full pb-12" x-ref="scroller">
+  <div class="w-full max-w-3xl mx-auto h-full flex flex-col">
+    <% if @page.header? %>
+      <header class="mb-8 prose max-w-none flex-none">
+        <h1><%= @page.title %></h1>
+      </header>
+    <% end %>
-      <% if @next_page %>
-        <a ref="header-next-page"
-          href="<%= page_path @next_page.lookup_path %>"
-          x-tooltip.theme.lookbook="`Next page`"
-          class="flex-none p-1">
-            <%= icon "chevron-right", size: 4, class: "hover:text-indigo-800" %>
+    <%= render_component :prose, markdown: false, class: "max-w-none flex-none" do %>
+      <%= @page_content %>
+    <% end %>
+    <% if @page.footer? && @pages.many? %>
+      <footer class="flex items-center justify-between border-t border-gray-300 mt-12 pt-8 pb-10 ">
+        <% if @previous_page %>
+          <a href="<%= page_path @previous_page.lookup_path %>"
+            class="flex items-center flex-none">
+            <%= render_component :icon, name: :arrow_left, size: 4, class: "hover:text-indigo-800" %>
+            <span class="ml-2 underline"><%= @previous_page.title %></span>
           </a>
-      <% else %>
-        <span ref="header-next-page" class="flex-none p-1">
-          <%= icon "chevron-right", size: 4, class: "opacity-20" %>
-        </span>
-      <% end %>
-    </div>
-  <% end %>
-  <div class="px-4 md:px-10 w-full pt-8 md:pt-12 overflow-auto pb-10 scroll-smooth" x-ref="scroller">
-    <div class="w-full max-w-3xl mx-auto text-gray-600">
-      <% if @page.header? %>
-        <header id="page-header-<%= @page.id %>" class="mb-10 prose max-w-none">
-          <h1><%= @page.title %></h1>
-        </header>
-      <% end %>
-      <div id="page-main-<%= @page.id %>" data-morph-strategy="replace">
-        <div class="prose max-w-none prose-a:text-indigo-900">
-          <%= @page_content %>
+        <% end %>
-          <% if @page.tabs.any? %>
-            <div
-              id="page-tabs"
-              x-data="pageTabs"
-              x-init="active = '<%= @page.tabs.first.tab %>'"
-              class="">
-              <nav class="flex border-b border-gray-300">
-                <% @page.tabs.each do |tab| %>
-                  <button
-                    class="px-5 py-2 font-bold border-b-2 hover:border-gray-500"
-                    :class="active === '<%= tab.tab %>' ? '!border-gray-500 !cursor-default' : 'border-gray-50'"
-                    x-on:click="changeTab('<%= tab.tab %>');$dispatch('tab-switch')">
-                    <%= tab.label %>
-                  </button>
-                <% end %>
-              </nav>
-              <% @page.tabs.each do |tab| %>
-                <div id="tab-<%= tab.tab %>" x-show="active === '<%= tab.tab %>'">
-                  <%= page_controller.render_page(tab) %>
-                </div>
-              <% end %>
-            </div>
-          <% end %>
-        </div>
-      </div>
-      <% if @page.footer? %>
-        <footer id="page-footer-<%= @page.id %>" class="flex items-center justify-between border-t border-gray-300 mt-12 pt-8">
-          <% if @previous_page %>
-            <a ref="footer-previous-page"
-              href="<%= page_path @previous_page.lookup_path %>"
-              class="flex items-center flex-none">
-              <%= icon "arrow-left", size: 4, class: "hover:text-indigo-800" %>
-              <span class="ml-2 underline"><%= @previous_page.title %></span>
-            </a>
-          <% end %>
-          <% if @next_page %>
-            <a ref="footer-next-page"
-              href="<%= page_path @next_page.lookup_path %>"
-              class="flex items-center flex-none ml-auto">
-              <span class="mr-2 underline"><%= @next_page.title %></span>
-              <%= icon "arrow-right", size: 4, class: "hover:text-indigo-800" %>
-            </a>
-          <% end %>
-        </footer>
-      <% end %>
-    </div>
+        <% if @next_page %>
+          <a href="<%= page_path @next_page.lookup_path %>"
+            class="flex items-center flex-none ml-auto">
+            <span class="mr-2 underline"><%= @next_page.title %></span>
+            <%= render_component :icon, name: :arrow_right, size: 4, class: "hover:text-indigo-800" %>
+          </a>
+        <% end %>
+      </footer>
+    <% end %>
   </div>
-</div>
+</div>

data/app/views/{layouts/lookbook → lookbook}/preview.html.erb RENAMED Viewed

@@ -1,4 +1,5 @@
 <% if examples.many? %>
+  <%# Render a group of examples %>
   <% examples.each do |example| %>
     <div style="all: unset; margin-bottom: 30px; display: block;">
       <h6 style="all: unset; display: block; color: #999; font-family: sans-serif; font-size: 14px; margin-top: 0; margin-bottom: 10px;">
@@ -8,9 +9,6 @@
     </div>
   <% end %>
 <% else %>
+  <%# Render a single example %>
   <%= examples.first[:html] %>
-<% end %>
-<% if params[:lookbook_embed] == "true" %>
-  <script src="/lookbook-assets/js/embed.js?v=<%= Lookbook.version %>" defer></script>
-<% end %>
+<% end %>

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

@@ -1,25 +1,19 @@
-<% items = examples.select { |example| example[:notes].present? } %>
-<div class="text-gray-600 bg-gray-50 h-full overflow-auto" data-morph-strategy="replace">
-  <% if items.many? %>
-    <div class="divide-y divide-dashed divide-gray-300">
-      <% items.each do |item| %>
-        <div class="px-4 pt-3 pb-6 relative">
-          <h6 class="text-[11px] text-gray-500 italic inline-block uppercase tracking-wide mb-4">
-            <%= item[:label] %>
-          </h6>
-          <div class="prose prose-sm prose-a:text-indigo-900">
-            <%= markdown(item[:notes]) %>
-          </div>
-        </div>
-      <% end %>
-    </div>
-  <% else %>
-    <div class="p-4 prose prose-sm prose-a:text-indigo-900">
-      <% if items.any? %>
-        <%= markdown(items.first[:notes]) %>
-      <% else %>
-        <em class='opacity-50'>No notes provided.</em>
-      <% end %>
-    </div>
-  <% end %>
-</div>
+<% items = rendered_examples.filter { |example| example[:notes].present? } %>
+<% if items.many? %>
+  <div class="divide-y divide-dashed divide-lookbook-divider bg-lookbook-prose h-full w-full">
+    <% items.each do |item| %>
+      <div class="px-4 py-6 relative">
+        <h6 class="italic font-mono mb-4 opacity-40">
+          # <%= item[:label] %>
+        </h6>
+        <%= render_component :prose, content: item[:notes] %>
+      </div>
+    <% end %>
+  </div>
+<% else %>
+  <div class="p-4 py-4 bg-lookbook-prose w-full h-full">
+    <%= render_component :prose do %>
+      <%== items.any? ? items.first[:notes] : "<em class='opacity-50'>No notes provided.</em>" %>
+    <% end %>
+  </div>
+<% end %>

data/app/views/lookbook/previews/panels/_output.html.erb CHANGED Viewed

@@ -1,18 +1,7 @@
-<div class="p-4 h-full bg-white overflow-auto" data-morph-strategy="replace">
-  <%= component "code", wrap: "vertical" do -%>
-    <% if examples.many? %>
-      <% examples.each do |example| -%>
-        <%== "\n<!-- #{example[:label]} -->\n#{beautify(example[:html])}" %>
-      <% end %>
-    <% else -%>
-      <%== beautify(examples.first[:html]) %>
-    <% end %>
-  <% end %>
-  <% if defined?(clipboard_id) %>
-    <template id="<%= clipboard_id %>">
-      <% examples.each do |example| -%>
-        <%== beautify(example[:html]) %>
-      <%- end %>
-    </template>
-  <% end %>
-</div>
+<%= render_component :code, line_numbers: true, full_height: true do -%>
+  <% if rendered_examples.many? -%>
+    <% rendered_examples.each do |example| -%><%== "<!-- #{example[:label]} -->\n#{beautify(example[:html])}\n\n" -%><% end %>
+  <%- else -%>
+    <%== beautify(rendered_examples.first[:html]) -%>
+  <%- end %>
+<% end %>

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

@@ -1,17 +1,15 @@
-<div class="bg-gray-50 h-full overflow-auto">
-  <% if @example.type == :group %>
-    <div class="p-4 prose prose-sm">
-      <em class='opacity-50'>Params are not yet supported for grouped examples.</em>
-    </div>
-  <% elsif @example.params.none? %>
-    <div class="p-4 prose prose-sm">
+<% if @example.params.none? %>
+  <div class="p-4 w-full h-full bg-lookbook-prose">
+    <%= render_component :prose do %>
       <em class='opacity-50'>No params configured.</em>
-    </div>
-  <% else %>
-    <div class="py-3">
-      <% @example.params.each_with_index do |param, i| %>
-        <%= component "param", param: param, i: i %>
+    <% end %>
+  </div>
+<% else %>
+  <div class="py-3 h-full">
+    <%= render_component :params_editor do |editor| %>
+      <% @example.params.each do |param| %>
+        <% editor.field **param, value: params[param[:name]] %>
       <% end %>
-    </div>
-  <% end %>
-</div>
+    <% end %>
+  </div>
+<% end %>

data/app/views/lookbook/previews/panels/_preview.html.erb CHANGED Viewed

@@ -1,52 +1,6 @@
-<div id="preview-window" class="h-full min-h-0 w-full checked-bg">
-  <div
-    class="mx-auto h-full w-full"
-    :style="`max-width: ${maxWidth}; max-height: ${maxHeight};`"
-    x-data="previewWindow"
-  >
-    <div class="grid bg-white relative grid-cols-[1fr_17px] grid-rows-[1fr_17px] -inset-px" style="width: calc(100% + 2px); height: calc(100% + 2px)">
-      <iframe seamless
-        class="h-full w-full border border-gray-300"
-         :class="{ 'pointer-events-none': $store.layout.reflowing }"
-        src="<%= lookbook_preview_path(request.query_parameters.merge(lookbook_timestamp: Time.now)) %>"
-        <% if config.preview_srcdoc %>srcdoc="<%== srcdoc %>"<% end %>
-        frameborder="0"
-        x-data="sizes"
-        x-effect="preview.width = width; preview.height = height;"
-      ></iframe>
-      <div
-        class="resize-handle border-r border-t cursor-[col-resize]"
-        @pointerdown="onResizeWidthStart"
-        @dblclick="toggleFullWidth"
-      >
-        <svg class="h-4 w-4 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
-          <path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
-        </svg>
-      </div>
-      <div
-        class="resize-handle border-b border-l cursor-[col-resize]"
-        @pointerdown="onResizeHeightStart"
-        @dblclick="toggleFullHeight"
-      >
-        <svg class="h-4 w-4 pointer-events-none rotate-90" fill="currentColor" viewBox="0 0 24 24" >
-          <path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
-        </svg>
-      </div>
-      <div
-        class="resize-handle border-r border-b cursor-[nwse-resize]"
-        @pointerdown="onResizeStart"
-        @dblclick="toggleFullSize"
-      >
-        <svg class="h-3.5 w-3.5 pointer-events-none rotate-45 relative -top-px -left-px" fill="currentColor" viewBox="0 0 24 24" >
-          <path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
-        </svg>
-      </div>
-    </div>
-  </div>
-</div>
+<%= render_component :viewport,
+  src: lookbook.preview_path(request.query_parameters.merge(lookbook_timestamp: Time.now)),
+  alpine_data: "$store.inspector.preview",
+  class: "-inset-px relative",
+  style: "width: calc(100% + 2px); height: calc(100% + 2px)"
+  %>

data/app/views/lookbook/previews/panels/_source.html.erb CHANGED Viewed

@@ -1,20 +1,11 @@
-<div class="p-4 h-full overflow-auto bg-gray-50 space-y-6" data-morph-strategy="replace">
-  <% if examples.many? %>
-    <% examples.each do |example| %>
-      <%= component "code", language: example[:source_lang][:name], wrap: "vertical" do -%>
-        <%== "#{sprintf example[:source_lang][:comment], example[:label]}\n#{example[:source]}" %>
-      <% end %>
+<div class="h-full">
+  <% if rendered_examples.many? %>
+    <%= render_component :code, language: rendered_examples.first[:source_lang][:name], line_numbers: true, full_height: true do -%>
+<%- rendered_examples.each.with_index(1) do |example, i| -%>
+<%== "#{sprintf example[:source_lang][:comment], example[:label]}\n#{example[:source]}\n#{"\n" if i < rendered_examples.size}" %><% end %>
     <% end %>
   <% else %>
-    <%= component "code", language: examples.first[:source_lang][:name] do -%>
-      <%== examples.first[:source] %>
-    <% end %>
-  <% end %>
-  <% if defined?(clipboard_id) %>
-    <template id="<%= clipboard_id %>">
-      <% examples.each do |example| -%>
-        <%== example[:source] %>
-      <%- end %>
-    </template>
+    <% example = rendered_examples.first %>
+    <%= render_component :code, language: example[:source_lang][:name], line_numbers: true, full_height: true do %><%== example[:source] %><% end %>
   <% end %>
 </div>