lookbook 0.5.0.beta.2 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7838a877b435b1952e1eed9163cad4f21fa44b2578d9114430bfc1d262b15c23
-  data.tar.gz: 4f8512d21d07f2b93164706569f0a28483f6b43e60446f19857411b4e66ac6ee
+  metadata.gz: 0bf7750f26cce0e0b6517443da61e75a2d954b50c4882637a21fdac8b7d9c520
+  data.tar.gz: bb81e6a5cbb6db75b62591d6c233c1f1831db92e04045eafd372ae60264cc9fc
 SHA512:
-  metadata.gz: bf6f6045ce9ea8d5bca9932bfb3538e0e5c307b856cdbc0a209520be5112bed281f623cc879af59e51216f1d284aa2de08ed6ef1b483f794ea74c434a150bb13
-  data.tar.gz: 4b2d545082ea784bc1122a51c947b0d5391cc829e895adfe224107591acdb68fabb23e8d21fe8be1f1d6acf405e774130dad1e1ba9676470a5bea9240f82cd34
+  metadata.gz: a569c06a48d6b30b8f328f25ad1eecfa474427d61dbf5a91395c780593329bb4424fdec52cb71d332dd229edc3d2031d9a9af84e864a4e906dcfcd7d387ea953
+  data.tar.gz: 1316810b7e32c5fda3ebd96b0d23566654f0a274fdaa730ae0ac50d5eaa03d0ed093ab412f504b1b0176cb37ecb26258d27f4aac081b6bce13bc754b6555c62d

data/README.md

@@ -28,7 +28,7 @@ Lookbook uses [RDoc/Yard-style comment tags](#annotating-preview-files) to exten
 - Auto-updating UI when component or preview files are updated _(Rails v6.0+ only)_
 - Use comment tag annotations for granular customisation of the preview experience
 - Fully compatible with standard the ViewComponent preview system
-- [**Experimental**] In-browser live editable preview parameters (similar to Storybook Controls/Knobs)
+- In-browser live-editable preview parameters (similar to basic Storybook Controls/Knobs)
 
 ## Lookbook demo
 
@@ -63,10 +63,16 @@ end
 
 The `at` property determines the root URL that the Lookbook UI will be served at.
 
-> If you would like to expose the Lookbook UI in production as well as in development, just remove the `if Rails.env.development?` condition from around the mount statement.
-
 Then you can start your app as normal and navigate to `http://localhost:3000/lookbook` (or whatever mount path you specified) to view your component previews in the Lookbook UI.
 
+#### Mounting in Production
+
+If you would like to expose the Lookbook UI in production as well as in development
+
+1. Remove the `if Rails.env.development?` condition from around the mount statement in `routes.rb`
+2. Add `config.view_component.show_previews = true` to `config/environments/production.rb`
+
+
 ## Usage
 
 You don't need to do anything special to see your ViewComponent previews and examples in Lookbook - just create them as normal and they'll automatically appear in the Lookbook UI. Preview templates, custom layouts and even bespoke [preview controllers](https://viewcomponent.org/guide/previews.html#configuring-preview-controller) should all work as you would expect.
@@ -96,7 +102,7 @@ class ButtonComponentPreview < ViewComponent::Preview
   # Button with icon
   # ----------------
   # This example uses dynamic preview parameters
-  # which can be edited live in the Lookbook UI 
+  # which can be edited live in the Lookbook UI
   #
   # @param text
   # @param icon select [heart, cog, alert]
@@ -161,7 +167,7 @@ The following Lookbook-specific tags are available for use:
 * [`@display`](#display-tag)
 * [`@!group ... @!endgroup`](#group-tag)
 * [`@hidden`](#hidden-tag)
-* [`@param`](#param-tag) [⚠️ **experimental!** - requires [feature opt-in](#experimental-features) ⚠️]
+* [`@param`](#param-tag)
 
 <h3 id="label-tag">🏷 @label</h3>
 
@@ -311,9 +317,7 @@ class FooComponentPreview < ViewComponent::Preview
 end
 ```
 
-<h3 id="param-tag"> 🚧 @param (experimental)</h3>
-
-> ⚠️ This feature is currently flagged as an **experimental** feature which requires [feature opt-in](#experimental-features) to use. Its API and implementation may change in the future.
+<h3 id="param-tag">@param</h3>
 
 The `@param` tag provides the ability to specify **editable preview parameters** which can be changed in the Lookbook UI in order to customise the rendered output on the fly, much like the [Controls (knobs) addon](https://storybook.js.org/addons/@storybook/addon-controls) for Storybook.
 
@@ -326,7 +330,7 @@ The `@param` tag takes the following format:
 ```
 
 - `<name>` - name of the dynamic preview param
-- `<input_type>` - input field type to generate in the UI 
+- `<input_type>` - input field type to generate in the UI
 - `<opts?>` - YAML-encoded field options, used for some field types
 
 #### Input types
@@ -357,7 +361,7 @@ The following **input field types** are available for use:
 @param <name> select <options>
 ```
 
-`<options>` should be a [YAML array](https://yaml.org/YAML_for_ruby.html#simple_inline_array) of options which must be formatted in the same style as the input for Rails' [`options_for_select`](https://apidock.com/rails/v6.0.0/ActionView/Helpers/FormOptionsHelper/options_for_select) helper: 
+`<options>` should be a [YAML array](https://yaml.org/YAML_for_ruby.html#simple_inline_array) of options which must be formatted in the same style as the input for Rails' [`options_for_select`](https://apidock.com/rails/v6.0.0/ActionView/Helpers/FormOptionsHelper/options_for_select) helper:
 
 ```ruby
 # Basic options:
@@ -437,7 +441,7 @@ The following structured types are also available but should be considered **exp
 
 ```ruby
 class ButtonComponentPreview < ViewComponent::Preview
-  
+
   # The params defined below will be editable in the UI:
   #
   # @param content text
@@ -496,6 +500,17 @@ If you wish to add additional paths to listen for changes in, you can use the `l
 config.lookbook.listen_paths << Rails.root.join('app/other/directory')
 ```
 
+### Custom favicon
+
+If you want to change the favicon used by the Lookbook UI, you can provide a path to your own (or a data-uri string) using the `ui_favicon` option:
+
+```ruby
+config.lookbook.ui_favicon = "/path/to/my/favicon.png" 
+```
+
+> To disable the favicon entirely, set the value to `false`.
+
+
 <h3 id="experimental-features">Experimental features opt-in</h3>
 
 Some features may occasionally be released behind a 'experimental' feature flag while they are being tested and refined, to allow people to try them out and provide feedback.
@@ -510,10 +525,6 @@ To opt into individual experimental features, include the name of the feature in
 config.lookbook.experimental_features = ["feature_name"]
 ```
 
-The current experimental features that can be opted into are:
-
-- `params`: Live-editable, dynamic preview parameters ([read more](#param-tag)). Include `"params"` in the `experimental_features` config option to opt in. 
-
 #### Opting into all experimental features (not recommended!)
 
 If you want to live life on the bleeding-edge you can opt-in to all current **and future** experimental features (usual caveats apply):
@@ -529,9 +540,10 @@ Lookbook provides a few keyboard shortcuts to help you quickly move around the U
 
 - `f` - move focus to the nav filter box
 - `Esc` [when focus is in nav filter box] - Clear contents if text is present, or return focus to the UI if the box is already empty
-- `s` - Switch to Source tab in the inspector
-- `o` - Switch to Output tab in the inspector
-- `n` - Switch to Notes tab in the inspector
+- `s` - Switch to Source tab in the drawer
+- `n` - Switch to Notes tab in the drawer
+- `v` - Switch to the rendered preview
+- `o` - Switch to the code preview
 - `r` - Refresh the preview (useful if using something like Faker to generate randomised data for the preview)
 - `w` - Open the standalone rendered preview in a new window
 

data/app/assets/lookbook/js/components/copy.js

@@ -1,7 +1,9 @@
-export default function copy(id) {
+export default function copy() {
   return {
     get content() {
-      const target = document.getElementById(id);
+      const target = document.getElementById(
+        this.$root.getAttribute("data-target")
+      );
       return (target ? target.innerHTML : "").trim();
     },
     done: false,

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

@@ -32,15 +32,23 @@ export default function inspector() {
     get drawerHidden() {
       return this.$store.inspector.drawer.hidden;
     },
-    isActivePanel(panel) {
-      return this.$store.inspector.drawer.active == panel;
+    get maxDrawerHeight() {
+      return Math.round(this.height * 0.7);
     },
-    switchPanel(panel) {
-      this.$store.inspector.drawer.active = panel;
+    get maxDrawerWidth() {
+      return Math.round(this.width * 0.7);
     },
-    toggleView() {
-      this.$store.inspector.preview.view =
-        this.view === "html" ? "preview" : "html";
+    isActiveDrawerPanel(panel) {
+      return this.$store.inspector.drawer.panel === panel;
+    },
+    switchDrawerPanel(panel) {
+      this.$store.inspector.drawer.panel = panel;
+    },
+    isActivePreviewPanel(panel) {
+      return this.$store.inspector.preview.panel === panel;
+    },
+    switchPreviewPanel(panel) {
+      this.$store.inspector.preview.panel = panel;
     },
     toggleOrientation() {
       this.$store.inspector.drawer.orientation =

data/app/assets/lookbook/js/config.js

@@ -9,12 +9,13 @@ export default {
     drawer: {
       orientation: "horizontal",
       defaultPanel: "source",
-      defaultHeight: 200,
+      defaultHeight: 300,
       defaultWidth: 500,
       minWidth: 350,
+      minHeight: 200,
     },
     preview: {
-      view: "preview",
+      defaultPanel: "preview",
     },
   },
 };

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

@@ -6,16 +6,17 @@ export default function createInspectorStore(Alpine) {
     drawer: {
       hidden: Alpine.$persist(false).as("drawer-hidden"),
       orientation: Alpine.$persist(drawer.orientation).as("drawer-orientation"),
-      active: Alpine.$persist(drawer.defaultPanel).as("drawer-active"),
+      panel: Alpine.$persist(drawer.defaultPanel).as("drawer-panel"),
       height: Alpine.$persist(drawer.defaultHeight).as("drawer-height"),
       width: Alpine.$persist(drawer.defaultWidth).as("drawer-width"),
       minWidth: drawer.minWidth,
+      minHeight: drawer.minHeight,
       visibleTabCount: Infinity,
     },
     preview: {
       width: Alpine.$persist("100%").as("preview-width"),
       height: Alpine.$persist("100%").as("preview-height"),
-      view: Alpine.$persist(preview.view).as("preview-view"),
+      panel: Alpine.$persist(preview.defaultPanel).as("preview-panel"),
       lastWidth: null,
       lastHeight: null,
       resizing: false,

data/app/controllers/lookbook/app_controller.rb

@@ -27,10 +27,8 @@ module Lookbook
         begin
           set_params
           @examples = examples_data
-          @preview_srcdoc = if Lookbook.config.preview_srcdoc
-            render_examples(examples_data).gsub("\"", """)
-          end
-          @panels = panels.filter { |name, panel| panel[:show] }
+          @drawer_panels = drawer_panels.filter { |name, panel| panel[:show] }
+          @preview_panels = preview_panels.filter { |name, panel| panel[:show] }
         rescue *EXCEPTIONS
           render "error"
         end
@@ -119,23 +117,37 @@ module Lookbook
       @nav
     end
 
-    def panels
+    def preview_panels
       {
-        source: {
-          label: "Source",
-          template: "lookbook/panels/source",
-          hotkey: "s",
+        preview: {
+          label: "Preview",
+          template: "lookbook/panels/preview",
+          srcdoc: Lookbook.config.preview_srcdoc ? render_examples(examples_data).gsub("\"", """) : nil,
+          hotkey: "v",
           show: true,
           disabled: false,
-          copy: true
+          copy: false
         },
         output: {
-          label: "Output",
+          label: "HTML",
           template: "lookbook/panels/output",
           hotkey: "o",
           show: true,
           disabled: false,
           copy: true
+        }
+      }
+    end
+
+    def drawer_panels
+      {
+        source: {
+          label: "Source",
+          template: "lookbook/panels/source",
+          hotkey: "s",
+          show: true,
+          disabled: false,
+          copy: true
         },
         notes: {
           label: "Notes",

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

@@ -6,7 +6,9 @@
   <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 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>">
+  <% 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 config.auto_refresh %>
     <script>

data/app/views/lookbook/components/_drawer.html.erb

@@ -1,10 +1,10 @@
 <div id="drawer" class="bg-white w-full h-full flex flex-col min-w-0">
-  <div class="px-4 border-b border-gray-200 select-none flex-none" x-show="!drawerHidden">
-    <div class="-mb-px flex cursor-auto relative">
+  <div class="pl-4 border-b border-gray-300 select-none flex-none" x-show="!drawerHidden">
+    <div class="flex cursor-auto relative">
       <div
         id="inspector-tabs-<%= example.id %>"
         x-data="tabs"
-        class="min-w-0"
+        class="min-w-0 -mb-px"
         x-effect="$store.inspector.drawer.visibleTabCount = visibleTabCount"
       >
         <nav x-ref="tabs" class="flex h-10 space-x-8 flex-grow pr-8">
@@ -14,11 +14,11 @@
               href="#inspector-panel-<%= key %>"
               class="whitespace-nowrap pt-2.5 pb-1.5 px-1 border-b-2 cursor-pointer <%= "!text-gray-300" if props[:disabled] %>"
               :class="{
-                'border-indigo-400': isActivePanel('<%= key %>'),
-                'border-transparent text-gray-500 hover:text-gray-700': !isActivePanel('<%= key %>'),
+                'border-indigo-400': isActiveDrawerPanel('<%= key %>'),
+                'border-transparent text-gray-500 hover:text-gray-700': !isActiveDrawerPanel('<%= key %>'),
                 'invisible': (<%= i %> > visibleTabCount)
               }"
-              @click.stop.prevent="switchPanel('<%= key %>')"
+              @click.stop.prevent="switchDrawerPanel('<%= key %>')"
               <% if props[:hotkey] %>data-hotkey="<%= props[:hotkey] %>"<% end %>
             >
               <%== props[:label] %>
@@ -41,14 +41,13 @@
               <template id="inspector-dropdown-tab-<%= key %>-<%= example.id %>" x-if="<%= i %> > $store.inspector.drawer.visibleTabCount">
                 <div :class="{'border-t border-gray-300': (<%= i %> > $store.inspector.drawer.visibleTabCount + 1)}">
                   <a
-                    
                     href="#inspector-panel-<%= key %>"
                     class="block whitespace-nowrap py-2 px-4 border-l-2 cursor-pointer <%= "!text-gray-300" if props[:disabled] %>"
                     :class="{
-                      'border-indigo-400': $store.inspector.drawer.active === '<%= key %>',
-                      'border-transparent text-gray-500 hover:text-gray-700': $store.inspector.drawer.active !== '<%= key %>',
+                      'border-indigo-400': $store.inspector.drawer.panel === '<%= key %>',
+                      'border-transparent text-gray-500 hover:text-gray-700': $store.inspector.drawer.panel !== '<%= key %>',
                     }"
-                    @click.stop.prevent=" hideDropdown(); switchPanel('<%= key %>')"
+                    @click.stop.prevent=" hideDropdown(); switchDrawerPanel('<%= key %>')"
                   >
                     <%== props[:label] %>
                   </a>
@@ -58,31 +57,35 @@
           </div>
         </nav>
       </div>
-      <div class="flex items-center ml-auto pl-8 space-x-3">
-        <% panels.each do |key, props| %>
-          <div
-            ref="<%= "inspector-panel-#{example.id}-#{key}-copy" %>"
-            class="flex items-center"
-            :class="{'pointer-events-none opacity-30': <%= !props[:copy].present? %>}"
-            x-show="isActivePanel('<%= key %>')"
-          >
-            <button
-              class="text-gray-400 transition"
-              x-data="copy('<%= "inspector-panel-#{example.id}-#{key}-clipboard" %>')"
-              x-tooltip.theme.lookbook="done ? 'copied!' : 'copy to clipboard'"
-              @click="save"
-              :class="{
-                '!text-green-600 hover:text-green-600': done,
-                'hover:text-indigo-500': !done}"
+      <div class="flex items-center bg-white border-l border-gray-200 ml-auto space-x-3 px-3">
+        <div>
+          <% panels.each do |key, props| %>
+            <div
+              ref="<%= "inspector-panel-#{example.id}-#{key}-copy" %>"
+              class="flex items-center"
+              :class="{'pointer-events-none opacity-30': <%= !props[:copy].present? %>}"
+              x-show="isActiveDrawerPanel('<%= key %>')"
               x-cloak
-              <% unless props[:copy].present? %>disabled<% end %>
             >
-              <%= icon "${done ? 'check' : 'clipboard'}", size: 4 %>
-            </button>
-          </div>
-        <% end %>
+              <button
+                data-target="<%= "inspector-panel-#{example.id}-#{key}-clipboard" %>"
+                class="text-gray-400 transition"
+                x-data="copy"
+                x-tooltip.theme.lookbook="done ? 'copied!' : 'copy to clipboard'"
+                @click="save"
+                :class="{
+                  '!text-green-600 hover:text-green-600': done,
+                  'hover:text-indigo-500': !done}"
+                x-cloak
+                <% unless props[:copy].present? %>disabled<% end %>
+              >
+                <%= icon "${done ? 'check' : 'clipboard'}", size: 4 %>
+              </button>
+            </div>
+          <% end %>
+        </div>
         <button
-          x-tooltip.theme.lookbook="`switch orientation`"
+          x-tooltip.theme.lookbook="`${horizontal ? 'pin drawer on right' : 'pin drawer on bottom'}`"
           @click="toggleOrientation"
           :class="{'pointer-events-none opacity-30': !canBeVertical}"
         > 
@@ -91,10 +94,10 @@
             class: "scale-[-1] text-gray-400 hover:text-indigo-800" %>
         </button>
         <button
-          x-tooltip.theme.lookbook="`close drawer`"
+          x-tooltip.theme.lookbook="`hide drawer`"
           @click="toggleDrawer"
         > 
-          <%= icon "x",
+          <%= icon "x-circle",
             size: 4,
             class: "text-gray-400 hover:text-indigo-800" %>
         </button>
@@ -105,7 +108,7 @@
     <% panels.each do |key, props| %>
       <div
         class="h-full w-full absolute inset-0"
-        x-show="$store.inspector.drawer.active === '<%= key %>'"
+        x-show="isActiveDrawerPanel('<%= key %>')"
         x-cloak
       >
         <div id="inspector-panel-<%= example.id %>-<%= key %>" class="h-full">

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

@@ -1,5 +1,5 @@
-<header class="py-2 px-4 w-full flex-none bg-white border-b border-gray-300 flex items-center h-10 select-none  min-w-0">
-  <button class="flex-none mr-3" x-show="!$store.layout.desktop" @click="$store.sidebar.toggle">
+<header class="pl-4 w-full flex-none bg-white border-b border-gray-300 flex items-center h-10 select-none min-w-0">
+  <button class="flex-none mr-6" x-show="!$store.layout.desktop" @click="$store.sidebar.toggle">
     <svg class="feather w-5 h-5 hover:text-indigo-500 transition">
       <use xlink:href="/lookbook-assets/feather-sprite.svg#menu" />
     </svg>

data/app/views/lookbook/components/_nav_preview.html.erb

@@ -6,6 +6,8 @@
     <% end %>
   <% end %>
 <% else %>
-  <% example = examples.first %>
-  <%= component "nav_item", item: example, depth: example.hierarchy_depth, label: node.label, display: :node %>
+  <% if examples.any? %>
+    <% example = examples.first %>
+    <%= component "nav_item", item: example, depth: example.hierarchy_depth, label: node.label, display: :node %>
+  <% end %>
 <% end %>

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

@@ -1,52 +1,71 @@
-<div id="preview" class="h-auto 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) %>"
-        <% if config.preview_srcdoc %>srcdoc="<%== srcdoc %>"<% end %>
-        frameborder="0"
-        x-data="sizes"
-        x-effect="preview.width = width; preview.height = height;"
-      ></iframe>
-
+<div id="preview" class="grid grid-rows-[40px_1fr]">
+  <%= component "header" do %>
+    <div
+      id="preview-tabs-<%= @example.id %>" class="min-w-0 -mb-px">
+      <nav class="flex h-10 space-x-8 flex-grow pr-8">
+      <% panels.each do |key, props| %>
+          <a
+            id="preview-tab-<%= key %>-<%= @example.id %>"
+            href="#preview-panel-<%= key %>"
+            class="whitespace-nowrap pt-2.5 pb-1.5 px-1 border-b-2 cursor-pointer"
+            :class="{
+              'border-indigo-400': isActivePreviewPanel('<%= key %>'),
+              'border-transparent text-gray-500 hover:text-gray-700': !isActivePreviewPanel('<%= key %>'),
+            }"
+            @click.stop.prevent="switchPreviewPanel('<%= key %>')"
+            <% if props[:hotkey] %>data-hotkey="<%= props[:hotkey] %>"<% end %>
+          >
+            <%== props[:label] %>
+          </a>
+        <% end %>
+      </nav>
+    </div>
+    <div class="flex items-stretch h-full ml-auto space-x-3">
       <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>
+        class="flex items-center text-xs font-monospace text-gray-700 space-x-1 opacity-50 hover:opacity-100 transition"
+        :class="{'opacity-100': $store.inspector.preview.resizing}"
+        x-show="isActivePreviewPanel('preview')">
+        <span x-text="`${preview.width}px`"></span>
+        <span class="text-gray-500">x</span>
+        <span x-text="`${preview.height}px`"></span>
       </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 class="flex items-center bg-white border-l border-gray-200 space-x-3 text-gray-400 divide-x divide-gray-300 px-3">
+        <div class="flex items-center space-x-3">
+          <button
+            x-tooltip.theme.lookbook="`Refresh preview`"
+            @click.prevent.stop="refresh"
+            data-hotkey="r"
+          >
+            <%= icon "refresh-cw", size: 4, class: "hover:text-indigo-800" %>
+          </button>
+          <a
+            href="<%= preview_path %>"
+            target="_blank"
+            x-tooltip.theme.lookbook="`Open in new window`"
+            data-hotkey="w"
+          >
+            <%= icon "external-link", size: 4, class: "hover:text-indigo-800" %>
+          </a>
+          <button
+            x-tooltip.theme.lookbook="`${drawerHidden ? 'show' : 'hide'} drawer`"
+            @click="toggleDrawer"
+             x-show="drawerHidden"
+            data-hotkey="i"
+          > 
+            <%= icon "${horizontal ? 'credit-card' : 'sidebar'}", size: 4, class: "hover:text-indigo-800 scale-[-1]" %>
+          </button>
+        </div>
+        
       </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>
-
+  <% end %>
+  <div class="bg-white relative flex-grow">
+    <% panels.each do |key, props| %>
+      <div class="h-full w-full absolute inset-0" x-show="isActivePreviewPanel('<%= key %>')" x-cloak>
+        <div id="preview-panel-<%= example.id %>-<%= key %>" class="h-full">
+          <%= render props[:template], key: key, examples: examples, **props %>
+        </div>
+      </div>
+    <% end %>
   </div>
 </div>

data/app/views/lookbook/panels/_output.html.erb

@@ -1,4 +1,4 @@
-<div class="p-4 h-full bg-gray-50 overflow-auto" data-morph-strategy="replace">
+<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| -%>

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

@@ -0,0 +1,52 @@
+<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) %>"
+        <% 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>