lookbook 0.2.1 → 0.3.0.beta.0

data/app/assets/lookbook/js/{split.js → utils/split.js}

@@ -1,7 +1,7 @@
 import Split from "split-grid";
 
 export default function (props) {
-  const app = Alpine.store("app");
+  const page = Alpine.store("page");
   return {
     init() {
       Split({
@@ -11,14 +11,14 @@ export default function (props) {
         minSize: props.minSize,
         writeStyle() {},
         onDrag(dir, track, style) {
-          splits = style.split(" ").map((num) => parseInt(num));
+          const splits = style.split(" ").map((num) => parseInt(num));
           props.onDrag(splits);
         },
         onDragStart() {
-          app.reflowing = true;
+          page.reflowing = true;
         },
         onDragEnd() {
-          app.reflowing = false;
+          page.reflowing = false;
         },
       });
     },

data/app/assets/lookbook/js/workbench/inspector.js

@@ -0,0 +1,11 @@
+export default function inspector() {
+  const inspector = Alpine.store("inspector");
+  return {
+    switchTo(id) {
+      inspector.active = id;
+    },
+    active(id) {
+      return inspector.active === id;
+    },
+  };
+}

data/app/assets/lookbook/js/workbench/preview.js

@@ -0,0 +1,39 @@
+export default function preview() {
+  const app = Alpine.store("page");
+  const preview = Alpine.store("preview");
+  return {
+    init() {
+      this.root = this.$el;
+    },
+    onResize(e) {
+      const size =
+        this.resizeStartSize - (this.resizeStartPosition - e.pageX) * 2;
+      const parentSize = this.root.parentElement.clientWidth;
+      const percentSize = (Math.round(size) / parentSize) * 100;
+      const minWidth = (300 / parentSize) * 100;
+      preview.width = `${Math.min(Math.max(percentSize, minWidth), 100)}%`;
+    },
+    onResizeStart(e) {
+      app.reflowing = true;
+      this.onResize = this.onResize.bind(this);
+      this.onResizeEnd = this.onResizeEnd.bind(this);
+      this.resizeStartPosition = e.pageX;
+      this.resizeStartSize = this.root.clientWidth;
+      window.addEventListener("pointermove", this.onResize);
+      window.addEventListener("pointerup", this.onResizeEnd);
+    },
+    onResizeEnd() {
+      window.removeEventListener("pointermove", this.onResize);
+      window.removeEventListener("pointerup", this.onResizeEnd);
+      app.reflowing = false;
+    },
+    toggleFullWidth() {
+      if (preview.width === "100%" && preview.lastWidth) {
+        preview.width = preview.lastWidth;
+      } else {
+        preview.lastWidth = preview.width;
+        preview.width = "100%";
+      }
+    },
+  };
+}

data/app/assets/lookbook/js/workbench.js

@@ -0,0 +1,14 @@
+export default function workbench() {
+  const inspector = Alpine.store("inspector");
+  return {
+    previewViewportHeight: 0,
+    previewViewportWidth: 0,
+    splitProps: {
+      direction: "vertical",
+      minSize: 200,
+      onDrag(splits) {
+        inspector.height = splits[2];
+      },
+    },
+  };
+}

data/app/controllers/lookbook/{browser_controller.rb → app_controller.rb}

@@ -1,5 +1,7 @@
+require "htmlbeautifier"
+
 module Lookbook
-  class BrowserController < ActionController::Base
+  class AppController < ActionController::Base
     EXCEPTIONS = [ViewComponent::PreviewTemplateError, ViewComponent::ComponentError, ViewComponent::TemplateError, ActionView::Template::Error]
 
     protect_from_forgery with: :exception
@@ -11,43 +13,40 @@ module Lookbook
     before_action :find_preview, only: [:preview, :show]
     before_action :find_example, only: [:preview, :show]
     before_action :assign_nav, only: [:index, :show]
-
-    def index
-    end
+    before_action :initialize_inspector, only: [:show]
 
     def preview
       if @example
-        render html: preview_output
+        render html: rendered_example
       else
-        render "browser/not_found"
+        render "app/not_found"
       end
     end
 
     def show
       if @example
         begin
-          @preview_srcdoc = preview_output.gsub("\"", "&quot;")
-          @render_args = @preview.render_args(@example.name, params: preview_controller.params.permit!)
-          @render_output = preview_controller.render_component_to_string(@preview, @example_name)
-          @render_output_lang = Lookbook::Lang.find(:html)
-          if using_preview_template?
-            @source = @example.method_source
-            @source_lang = @example.source_lang
-          else
-            @source = @example.template_source(@render_args[:template])
-            @source_lang = @example.template_lang(@render_args[:template])
+          @rendered_example = rendered_example.gsub("\"", "&quot;")
+          (@example.type == :group ? @example.examples : [@example]).each do |example|
+            include_example_data(example)
           end
           assign_inspector
         rescue *EXCEPTIONS
-          render "browser/error"
+          render "app/error"
         end
       else
-        render "browser/not_found"
+        render "app/not_found"
       end
     end
 
     private
 
+    def initialize_inspector
+      @source = []
+      @output = []
+      @notes = []
+    end
+
     def find_preview
       candidates = []
       params[:path].to_s.scan(%r{/|$}) { candidates << $` }
@@ -66,12 +65,39 @@ module Lookbook
       end
     end
 
-    def using_preview_template?
-      @render_args[:template] == "view_components/preview"
+    def include_example_data(example)
+      content = HtmlBeautifier.beautify(preview_controller.render_example_to_string(@preview, example.name))
+      @output << {
+        label: "<!-- #{example.label} -->",
+        content: content,
+        lang: Lookbook::Lang.find(:html)
+      }
+      render_args = @preview.render_args(example.name, params: preview_controller.params.permit!)
+      has_template = render_args[:template] != "view_components/preview"
+      @source << {
+        label: has_template ? "<!-- #{example.label} -->" : "\# #{example.label}",
+        content: has_template ? example.template_source(render_args[:template]) : example.method_source,
+        lang: has_template ? example.template_lang(render_args[:template]) : example.source_lang
+      }
+      if example.notes.present?
+        @notes << {
+          label: example.label,
+          content: example.notes
+        }
+      end
     end
 
-    def preview_output
-      @preview_output ||= if @preview
+    def rendered_example
+      if @example.type == :group
+        rendered = @example.examples.map do |example|
+          {
+            label: example.label,
+            content: preview_controller.render_example_to_string(@preview, example.name)
+          }
+        end
+        joined = render_to_string "layouts/group", locals: {items: rendered}, layout: nil
+        preview_controller.render_in_layout_to_string(joined, @preview.lookbook_layout)
+      else
         preview_controller.request.params[:path] = "#{@preview.preview_name}/#{@example.name}".chomp("/")
         preview_controller.process(:previews)
       end
@@ -82,23 +108,24 @@ module Lookbook
         panes: {
           source: {
             label: "Source",
-            content: @source || "",
             template: "code",
-            lang: @source_lang,
-            clipboard: @source
+            hotkey: "s",
+            items: @source,
+            clipboard: @source.map { |s| @source.many? ? "#{s[:label]}\n#{s[:content]}" : s[:content] }.join("\n\n")
           },
           output: {
             label: "Output",
-            content: @render_output || "",
             template: "code",
-            lang: @render_output_lang,
-            clipboard: @render_output
+            hotkey: "o",
+            items: @output,
+            clipboard: @output.map { |o| @output.many? ? "#{o[:label]}\n#{o[:content]}" : o[:content] }.join("\n\n")
           },
           notes: {
             label: "Notes",
-            content: @example.notes.presence || "<em class='opacity-50'>No notes provided.</em>",
-            template: "prose",
-            disabled: @example.notes.blank?
+            template: "notes",
+            hotkey: "n",
+            items: @notes,
+            disabled: @notes.none?
           }
         }
       }

data/app/helpers/lookbook/application_helper.rb

@@ -18,7 +18,7 @@ module Lookbook
     end
 
     def nav_padding_style(depth)
-      "padding-left: calc((#{depth} * 12px) + 0.5rem);"
+      "padding-left: calc((#{depth - 1} * 12px) + 0.5rem);"
     end
   end
 end

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

@@ -0,0 +1,45 @@
+<div id="sidebar" class="h-full" x-data="nav" @document:updated.window="updateNav" @navigate.window="navigate">
+  <div class="bg-white h-10 border-b border-gray-300 flex items-center relative">
+    <button class="flex-none ml-4 " x-show="!$screen('md')" @click="$dispatch('sidebar:toggle')" x-cloak>
+      <svg class="feather w-5 h-5 hover:text-indigo-500 transition">
+        <use xlink:href="/lookbook-assets/feather-sprite.svg#x" />
+      </svg>
+    </button>
+    <input
+      type="text"
+      class="text-sm px-4 h-10 w-full border-0 bg-transparent focus:outline-none outline-none focus:ring-0"
+      placeholder="Filter previews&hellip;"
+      x-ref="filter"
+      x-model="$store.nav.filter"
+      x-effect="if (sidebarOpenMobile) focusFilter()"
+      @keyup.stop="if ($event.key === 'Escape') $store.nav.filtering ? clearFilter() : unfocusFilter()"
+      @keyup.f.document="focusFilter"
+    >
+    <button class="text-gray-400 hover:text-indigo-500 focus:ring-0 focus:outline-none absolute top-1/2 right-2 transform -translate-y-1/2" @click="clearFilter">
+      <svg class="feather w-3 h-3">
+        <use xlink:href="/lookbook-assets/feather-sprite.svg#x" />
+      </svg>
+    </button>
+  </div>
+  <div class="relative overflow-y-auto w-full" style="height: calc(100% - 40px)">
+    <div x-ref="shim">
+      <nav id="nav" class="select-none" x-data="navNode" @nav:updated.window="filter" x-init="$watch('$store.nav.filterText', () => filter()); $nextTick(() => filter());">
+        <% if @nav.items.any? %>
+          <ul x-ref="items">
+            <% @nav.items.each do |item| %>
+              <%= render "./nav/#{item.type.to_s}", node: item %>
+            <% end %>
+          </ul>
+          <div class="p-4 text-center" x-show="hidden" x-cloak>
+            <em class="text-gray-400">No matching previews found.</em>
+          </div>
+        <% else %>
+          <div class="p-4">
+            <h4 class="text-gray-500 mb-1">No previews found.</h4>
+            <p class="text-gray-400 text-xs">Have you set your <a class="underline" href="https://viewcomponent.org/api.html#preview_paths">preview paths</a> config correctly?</p>
+          </div>
+        <% end %>
+      </nav>
+    </div>
+  </div>   
+</div>

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

@@ -0,0 +1,12 @@
+<div id="workbench" class="bg-gray-50 h-full min-h-fill flex flex-col" x-data="workbench">
+  <%= render "./workbench/header" %>
+  <div class="md:grid flex-grow" :style="`grid-template-rows: 1fr 1px ${$store.inspector.height}px`">
+    <%= render "./workbench/preview" %>
+    <div class="w-full gutter border-t border-gray-300 relative" x-data="split(splitProps)" x-show="$screen('md')">
+      <div class="h-[11px] w-full bg-transparent hover:bg-indigo-100 hover:bg-opacity-20 transition absolute left-0 right-0 transform -translate-y-1/2 cursor-[row-resize]"></div>
+    </div>
+    <% if @inspector %>
+      <%= render "./workbench/inspector", **@inspector %>
+    <% end %>
+  </div>  
+</div>

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

@@ -0,0 +1,11 @@
+<div class="flex flex-col h-full min-h-fill w-full">
+  <%= render "./shared/header" %>
+  <div class="flex flex-col items-center justify-center h-full min-h-fill">
+    <div class="p-4 text-center">
+      <svg class="feather w-10 h-10 text-gray-300 mx-auto">
+        <use xlink:href="/lookbook-assets/feather-sprite.svg#layers" />
+      </svg>
+      <h5 class="mt-4 text-gray-400 text-base">Select a preview to get started</h5>
+    </div>
+  </div>
+</div>

data/app/views/lookbook/{browser → app}/not_found.html.erb

@@ -1,7 +1,7 @@
 <div class="bg-white flex flex-col items-center justify-center h-screen w-full">
   <div class="p-4 text-center">
     <svg class="feather w-10 h-10 text-red-300 mx-auto">
-      <use xlink:href="#alert-triangle" />
+      <use xlink:href="/lookbook-assets/feather-sprite.svg#alert-triangle" />
     </svg>
     <div class="mt-3 text-gray-700 max-w-xs">
       <% if @preview %>

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

@@ -0,0 +1 @@
+<%= render "./workbench" %>

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

@@ -1,49 +1,41 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="h-fill min-h-fill">
 <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">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
 
   <link href="/lookbook-assets/app.css" rel="stylesheet">
   <link rel="icon" href="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>">
 
-  <script>
-    window.SOCKET_PATH = "/lookbook/cable"
-  </script>
+  <% if config.auto_refresh %>
+    <script>
+      window.SOCKET_PATH = "/lookbook/cable";
+    </script>
+  <% end %>
   <script src="/lookbook-assets/app.js" defer></script>
 
   <title><%= [@example&.label, @preview&.label, "Lookbook"].compact.join(" :: ") %></title>
 </head>
-<body class="text-gray-800 font-sans text-sm antialiased">
+<body class="text-gray-800 font-sans text-sm antialiased h-fill min-h-fill overflow-hidden">
   <div
-    class="grid h-screen w-screen max-w-full overflow-hidden"
+    x-data="page"
+    x-effect="updateTitle"
+    @refresh.document="fetchHTML().then(doc => $dispatch('document:updated', {doc}))" 
+    @popstate.window="fetchHTML().then(doc => { $dispatch('document:loaded', {doc}); sidebarOpenMobile = false})"
+    @sidebar:toggle.window="sidebarOpenMobile = !sidebarOpenMobile"
     :style="`grid-template-columns: ${$store.nav.width}px 1px 1fr;`"
-    x-data="{
-      doc: document,
-      location: window.location.pathname,
-      update(eventName){
-        return fetch(document.location).then(async response => {
-          if (!response.ok) return location.reload();
-          const html = await response.text();
-          this.doc = (new DOMParser()).parseFromString(html, 'text/html');
-          $dispatch(eventName, {doc: this.doc})
-        });
-      }
-    }"
-    x-effect="document.title = doc.title; location = window.location.pathname"
-    @refresh.document="update('document:updated')"
-    @popstate.window="update('document:loaded')">
-    <%= render "partials/sidebar" %>
-    <div class="h-screen gutter border-r border-gray-300 relative" x-data="split({minSize: 200, onDrag: (splits) => { $store.nav.width = Math.min(splits[0], 500) }})">
-      <div class="w-[9px] h-full bg-transparent hover:bg-indigo-100 hover:bg-opacity-20 transition absolute top-0 bottom-0 transform -translate-x-1/2 cursor-[col-resize] z-10"></div>
+    class="md:grid w-screen w-fill h-full min-h-fill"
+  >
+    <div class="h-full min-h-fill bg-gray-100 overflow-hidden" x-show="$screen('md') || sidebarOpenMobile" x-cloak>
+      <%= render "./sidebar" %>
     </div>
-    <div id="main" class="h-screen overflow-hidden w-full" x-effect="$el.innerHTML = doc.getElementById('main').innerHTML">
-      <%= yield %>
+    <div x-data="split(splitProps)" class="h-fill gutter border-r border-gray-300 relative" x-show="$screen('md')" x-cloak>
+      <div class="w-[9px] h-full min-h-fill bg-transparent hover:bg-indigo-100 hover:bg-opacity-20 transition absolute top-0 bottom-0 transform -translate-x-1/2 cursor-[col-resize] z-10"></div>
     </div>
-  </div>
-  <div class="hidden">
-    <%= render "partials/icon_sprite" %>
+    <main id="main" x-effect="render" class="h-fill overflow-hidden w-full" x-show="!$screen('md') || !sidebarOpenMobile" x-cloak>
+      <%= yield %>
+    </main>
   </div>
 </body>
 </html>

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

@@ -0,0 +1,6 @@
+<% items.each do |item| %>
+  <div class="lookbook-example" style="margin-bottom: 30px;">
+    <h6 class="lookbook-example-label" style="color: #999; font-size: 14px; margin-bottom: 10px;"><%= item[:label] %></h6>
+    <%= item[:content] %>
+  </div>
+<% end %>

data/app/views/lookbook/nav/_collection.html.erb

@@ -0,0 +1,5 @@
+<%= render "./nav/node", node: node do %>
+  <% node.items.each do |item| %>
+    <%= render "./nav/#{item.type.to_s}", node: item %>
+  <% end %> 
+<% end %>

data/app/views/lookbook/nav/_node.html.erb

@@ -0,0 +1,19 @@
+<li id="<%= node.id %>" x-data="navNode" <% if node.hierarchy_depth == 1 %> class="py-1 border-b border-gray-300 cursor-pointer"<% end %> :class="{hidden}" x-cloak>
+  <div @click="toggle" style="<%= nav_padding_style(node.hierarchy_depth) %>">
+    <div class="flex items-center cursor-pointer pr-3 py-[5px]">
+      <svg class="feather w-3 h-3 mr-1 text-gray-500 flex-none">
+        <use xlink:href="/lookbook-assets/feather-sprite.svg#chevron-down" x-show="open" x-cloak />
+        <use xlink:href="/lookbook-assets/feather-sprite.svg#chevron-right" x-show="!open()" x-cloak />
+      </svg>
+      <svg class="feather h-3.5 w-3.5 mr-1.5 flex-none text-indigo-500">
+        <use xlink:href="/lookbook-assets/feather-sprite.svg#<%= node.type == :preview ? 'layers' : 'folder' %>" />
+      </svg>
+      <div class="truncate whitespace-nowrap text-left <%= "font-bold" if node.type == :preview %>">
+        <%= node.label %>
+      </div>
+    </div>
+  </div>
+  <ul x-ref="items" x-show="open" x-cloak>
+    <%= yield %>
+  </ul>
+</li>

data/app/views/lookbook/nav/_preview.html.erb

@@ -0,0 +1,29 @@
+<%= render "./nav/node", node: node do %>
+  <% node.get_examples.each do |example| %>
+    <% path = show_path example.path %>
+    <li x-data="navLeaf" :class="{hidden}" x-init="matchers = <%= example.matchers.to_json %>; path = '<%= path %>'; setActive()" @popstate.window="setActive">
+      <a href="<%= path %>"
+        class="pr-3 py-[5px] flex items-center w-full group transition hover:bg-gray-200 hover:bg-opacity-50"
+        style="<%= nav_padding_style(example.hierarchy_depth + 1) %>"
+        :class="{'!bg-indigo-100':active}"
+        @click.stop.prevent="navigate"
+      >
+        <div class="relative w-3.5 h-3.5 mr-1.5" :class="active ? 'text-gray-900' : 'text-indigo-500'"> 
+          <svg class="feather flex-none group-hover:text-indigo-800 transition <% if example.type == :group %> absolute top-[-2px] left-[-2px] w-3 h-3<% else %>w-3.5 h-3.5<% end %>">
+            <use xlink:href="/lookbook-assets/feather-sprite.svg#eye" />
+          </svg>
+          <% if example.type == :group %>
+            <svg class="feather w-3 h-3 flex-none group-hover:text-indigo-800 transition absolute top-[4px] left-[4px]">
+              <use xlink:href="/lookbook-assets/feather-sprite.svg#eye" />
+            </svg>
+          <% end %>
+        </div>
+        <div class="truncate whitespace-nowrap">
+          <%= example.label %>
+        </div>
+      </a>
+    </li>
+  <% end %>
+<% end %>
+
+    

data/app/views/lookbook/shared/_clipboard.html.erb

@@ -0,0 +1,11 @@
+<button
+  class="p-1.5 border-b border-l border-gray-200 hover:border-gray-300 rounded-bl-md bg-white absolute top-0 right-0 text-gray-400 hover:text-indigo-500 transition"
+  x-data="clipboard"
+  x-tooltip.theme.lookbook="done ? 'copied!' : 'copy to clipboard'"
+  @click="save"
+  data-tippy-placement="left">
+  <svg class="feather h-4 w-4 ">
+    <use x-bind:href="`/lookbook-assets/feather-sprite.svg#${done ? 'check' : 'clipboard'}`" />
+  </svg>
+  <div class="hidden" x-init="content = $el.innerText"><%== yield %></div>
+</button>

data/app/views/lookbook/shared/_header.html.erb

@@ -0,0 +1,8 @@
+<header class="py-2 px-4 w-full flex-none bg-white border-b border-gray-300 flex items-center h-10">
+  <button class="flex-none mr-3" x-show="!$screen('md')" @click="$dispatch('sidebar:toggle')">
+    <svg class="feather w-5 h-5 hover:text-indigo-500 transition">
+      <use xlink:href="/lookbook-assets/feather-sprite.svg#menu" />
+    </svg>
+  </button>
+  <%= yield %>
+</header>

data/app/views/lookbook/workbench/_header.html.erb

@@ -0,0 +1,37 @@
+<%= render "./shared/header" do %>
+  <div class="flex items-center">
+    <div class="flex items-center space-x-1">
+      <strong class="whitespace-nowrap truncate"><%= @preview.label %></strong>
+      <span>/</span>
+      <span class="whitespace-nowrap truncate"><%= @example.label %></span>
+    </div>
+  </div>
+  <div class="flex text-xs ml-auto font-monospace text-gray-700 space-x-1" x-show="$screen('md')">
+    <span x-text="`${previewViewportWidth}px`"></span>
+    <span class="text-gray-500">x</span>
+    <span x-text="`${previewViewportHeight}px`"></span>
+  </div>
+  <div class="flex items-center ml-auto md:ml-3 md:pl-3 space-x-3 md:border-l border-gray-300 text-gray-400">
+    <a
+      href="<%= url_for %>"
+      class="block transition hover:text-indigo-800"
+      x-tooltip.theme.lookbook="`Refresh preview`"
+      @click.prevent.stop="$dispatch('navigate')"
+      data-hotkey="r"
+    >
+      <svg class="feather w-4 h-4">
+        <use xlink:href="/lookbook-assets/feather-sprite.svg#refresh-cw" />
+      </svg>
+    </a>
+      <a
+      href="<%= preview_path %>"
+      class="block transition hover:text-indigo-800" target="_blank"
+      x-tooltip.theme.lookbook="`Open in new window`"
+      data-hotkey="w"
+    >
+      <svg class="feather w-4 h-4">
+        <use xlink:href="/lookbook-assets/feather-sprite.svg#external-link" />
+      </svg>
+    </a>
+  </div>
+<% end %>

data/app/views/lookbook/workbench/_inspector.html.erb

@@ -0,0 +1,32 @@
+<div id="inspector" class="bg-white w-full overflow-hidden flex flex-col" x-data="inspector" x-show="$screen('md')">
+   <div class="px-4 border-b border-gray-200 flex items-center flex-none select-none">
+    <nav class="-mb-px flex space-x-8 cursor-auto">
+      <% panes.each do |key, props| %>
+        <a
+          href="#<%= key %>"
+          class="whitespace-nowrap py-2 px-1 border-b-2 cursor-pointer <%= "!text-gray-300" if props[:disabled] %>"
+          :class="{
+            'border-indigo-400': active('<%= key %>'),
+            'border-transparent text-gray-500 hover:text-gray-700': !active('<%= key %>')
+          }"
+          @click.stop.prevent="switchTo('<%= key %>')"
+          <% if props[:hotkey] %>data-hotkey="<%= props[:hotkey] %>"<% end %>
+        >
+          <%== props[:label] %>
+        </a>
+      <% end %>
+    </nav>
+  </div>
+  <div class="flex-auto overflow-auto bg-gray-50">
+    <% panes.each do |key, props| %>
+      <div class="flex flex-col h-full relative" x-show="active('<%= key %>')" x-cloak>
+        <% if props[:clipboard].present? %>
+          <%= render "./shared/clipboard" do %><%= h props[:clipboard].strip %><% end %>
+        <% end %>
+        <div class="flex flex-col h-full overflow-auto">
+          <%= render "./workbench/inspector/#{props[:template]}", key: key, **props %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>

data/app/views/lookbook/workbench/_preview.html.erb

@@ -0,0 +1,24 @@
+<div id="preview" class="h-full min-h-fill md:h-auto md:min-h-0 flex w-full bg-gray-50">
+  <div class="relative mx-auto bg-white" x-data="preview" :style="`width: ${$screen('md') ? $store.preview.width : '100%'}`">
+    <iframe seamless
+      class="absolute h-full inset-0 w-full border-l border-gray-300 md:pr-4 md:-mx-px"
+      src="<%= url_for lookbook.preview_path %>"
+      <% if config.preview_srcdoc %>srcdoc="<%== @rendered_example %>"<% end %>
+      frameborder="0"
+      x-data="sizeObserver"
+      x-effect="previewViewportWidth = observedWidth; previewViewportHeight = observedHeight;"
+    ></iframe>
+    <div class="absolute opacity-0 inset-0 pointer-events-none" :class="{ 'pointer-events-none': !$store.page.reflowing }"></div>
+    <div
+      class="border-l border-r border-gray-300 bg-white hover:bg-indigo-100 hover:bg-opacity-20 transition absolute right-0 inset-y-0 flex items-center w-4 cursor-[col-resize] select-none"
+      style="touch-action: none"
+      @pointerdown="onResizeStart"
+      @dblclick="toggleFullWidth"
+      x-show="$screen('md')"
+    >
+      <svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
+        <path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
+      </svg>
+    </div>
+  </div>
+</div>

data/app/views/lookbook/workbench/inspector/_code.html.erb

@@ -0,0 +1,3 @@
+<pre class="h-full"><code class="h-full p-4 block highlight font-monospace" style="background-image: none"><% items.each do |item| %><%== highlight( "#{items.many? ? item[:label] + "\n" : ""}#{item[:content].strip}", item[:lang][:name]) %>
+
+<% end %></code></pre>

data/app/views/lookbook/workbench/inspector/_notes.html.erb

@@ -0,0 +1,24 @@
+<div class="text-gray-600">
+  <% if items.many? %>
+    <div class="divide-y divide-gray-300">
+      <% items.each do |item| %>
+        <div class="px-4 pt-10 pb-8 relative">
+          <div class="prose prose-sm">
+            <%= markdown(item[:content]) %>
+          </div>
+          <h6 class="text-[11px] text-gray-600 inline-block px-2 py-0.25 bg-gray-100 border border-t-0 border-gray-300 absolute top-0 left-4 rounded-b">
+            <%= item[:label] %>
+          </h6>
+        </div>
+      <% end %>
+    </div>
+  <% else %>
+    <div class="p-4 prose prose-sm">
+      <% if items.any? %>
+        <%= markdown(items[0][:content]) %>
+      <% else %>
+        <em class='opacity-50'>No notes provided.</em>
+      <% end %>
+    </div>
+  <% end %>
+</div>

data/config/routes.rb

@@ -1,8 +1,10 @@
 Lookbook::Engine.routes.draw do
-  mount Lookbook::Engine.websocket => Lookbook::Engine.cable.mount_path
+  if Lookbook.config.auto_refresh
+    mount Lookbook::Engine.websocket => Lookbook::Engine.cable.mount_path
+  end
 
-  root to: "browser#index", as: :home
+  root to: "app#index", as: :home
 
-  get "/preview/*path", to: "browser#preview", as: :preview
-  get "/*path", to: "browser#show", as: :show
+  get "/preview/*path", to: "app#preview", as: :preview
+  get "/*path", to: "app#show", as: :show
 end