lookbook 0.4.8 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7a4c7c01727ccbd4cc232198f9bcc33236f0fa90618d10944b78b1858d750fe2
-  data.tar.gz: a7615d2ca70fad9bb2b05670f0bc120245b14137b18e9673b5d5fb73bd6c9bce
+  metadata.gz: 0bf7750f26cce0e0b6517443da61e75a2d954b50c4882637a21fdac8b7d9c520
+  data.tar.gz: bb81e6a5cbb6db75b62591d6c233c1f1831db92e04045eafd372ae60264cc9fc
 SHA512:
-  metadata.gz: 89ae1a5899bfd6bd848ea8bebc895d85b0d88a9b4d66914f52ddf04de24a7d566b0deeb0239e51d857afac2f4e1d2706aab77098191419d2b6e0c52df946b4b1
-  data.tar.gz: 48729571a609a5505095f11d69b4ddb53735eeb4a6f26b83ec326a8f86ad346b17c7b66087efbd87a0002737ec000efbeefbba1acf56560d87be1a667b3d24d3
+  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.
@@ -79,7 +85,7 @@ Lookbook parses [Yard-style comment tags](https://rubydoc.info/gems/yard/file/do
 
 ```ruby
 # @label Basic Button
-# @display bg_color #fff
+# @display bg_color "#fff"
 class ButtonComponentPreview < ViewComponent::Preview
 
   # Primary button
@@ -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]
@@ -110,7 +116,7 @@ class ButtonComponentPreview < ViewComponent::Preview
   # ---------------
   # For light-on-dark screens
   #
-  # @display bg_color #000
+  # @display bg_color "#000"
   def secondary
     render ButtonComponent.new(style: :inverted) do
       "Click me"
@@ -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>
 
@@ -188,7 +194,7 @@ end
 The `@display` tag lets you pass custom parameters to your preview layout so that the component preview can be customised on a per-example basis.
 
 ```ruby
-# @display bg_color #eee
+# @display bg_color "#eee"
 class FooComponentPreview < ViewComponent::Preview
 
   # @display max_width 500px
@@ -207,6 +213,8 @@ The `@display` tag can be applied at the preview (class) or at the example (meth
 - `<key>` must be a valid Ruby hash key name, without quotes or spaces
 - `<value>` will be parsed using the [Ruby YAML parser](https://yaml.org/YAML_for_ruby.html) to resolve the value
 
+> Note: Ruby YAML does not (generally) require quoting of string values. However in some cases it _is_ required due to the presence of [indicator characters](https://yaml.org/YAML_for_ruby.html#indicators_in_strings) (such as `#`, `:` etc) - hence why the hex color code in the example above is surrounded by quotes. It's perfectly ok to quote all string values if you prefer.
+
 These display parameters can then be accessed via the `params` hash in your preview layout using `params[:lookbook][:display][<key>]`:
 
 ```html
@@ -309,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.
 
@@ -324,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
@@ -355,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:
@@ -435,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
@@ -494,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.
@@ -508,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):
@@ -527,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/css/app.css

@@ -2,6 +2,7 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 @import "tippy.js/dist/tippy";
+@import "tippy.js/dist/border";
 @import "code_theme";
 @import "tooltip_theme";
 
@@ -57,8 +58,8 @@
 }
 
 @layer components {
-  #nav > ul > li {
-    @apply py-1;
+  #nav > ul > li > div {
+    @apply py-1 border-b border-gray-300;
   }
 
   .nav-toggle {
@@ -77,8 +78,12 @@
     @apply block;
   }
 
+  .code.wrapped pre {
+    @apply whitespace-pre-wrap;
+  }
+
   .code .line {
-    @apply flex items-center leading-relaxed;
+    @apply leading-relaxed;
   }
 
   .code.numbered {
@@ -87,35 +92,41 @@
 
   .code.numbered:before {
     content: "";
-    left: calc(2.7em + 8px);
+    left: 2.7em;
     @apply absolute top-0 bottom-0 border-r border-gray-200;
   }
 
+  .code.numbered .line {
+    padding-left: calc(2.7em + 8px);
+    @apply relative;
+  }
+
   .code .line-number {
+    display: inline-block;
     width: calc(2.7em + 8px);
     padding-top: 3px;
     padding-bottom: 3px;
     padding-right: 8px;
     margin-right: 16px;
-    @apply font-mono text-right text-gray-400 flex-none text-xs;
+    @apply font-mono text-right text-gray-400 flex-none text-xs absolute left-0;
   }
 
   .code .line-content {
     @apply flex-none pr-4;
   }
 
-  /* .code .line:before {
-    content: counter(line);
-    width: calc(3em + 8px);
-    padding-top: 2px;
-    padding-bottom: 2px;
-    padding-right: 8px;
-    @apply font-mono inline-block text-right mr-4 text-gray-400 border-r border-gray-200;
-  } */
+  .resize-handle {
+    @apply flex items-center justify-center h-full w-full border-gray-300 bg-white hover:bg-indigo-100 hover:bg-opacity-20 text-gray-400 hover:text-gray-700 transition select-none touch-none;
+  }
 }
 
 @layer utilities {
   .form-input {
     @apply border-gray-300 text-gray-700 focus:ring-indigo-300 focus:border-indigo-300 rounded-sm text-sm w-full;
   }
+
+  .checked-bg {
+    background-color: #ffffff;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%23f3f3f3' fill-opacity='1'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
+  }
 }

data/app/assets/lookbook/css/tooltip_theme.css

@@ -4,13 +4,41 @@
   &[data-placement^="top"] > .tippy-arrow::before {
     border-top-color: theme("colors.indigo.500");
   }
+
   &[data-placement^="bottom"] > .tippy-arrow::before {
     border-bottom-color: theme("colors.indigo.500");
   }
+
   &[data-placement^="left"] > .tippy-arrow::before {
     border-left-color: theme("colors.indigo.500");
   }
+
   &[data-placement^="right"] > .tippy-arrow::before {
     border-right-color: theme("colors.indigo.500");
   }
 }
+
+.tippy-box[data-theme~="menu"] {
+  border: 1px solid theme("colors.gray.300");
+  @apply bg-white text-gray-600 shadow-md rounded;
+
+  & > .tippy-content {
+    padding: 0;
+  }
+
+  &[data-placement^="top"] > .tippy-arrow::before {
+    border-top-color: white;
+  }
+
+  &[data-placement^="bottom"] > .tippy-arrow::before {
+    border-bottom-color: white;
+  }
+
+  &[data-placement^="left"] > .tippy-arrow::before {
+    border-left-color: white;
+  }
+
+  &[data-placement^="right"] > .tippy-arrow::before {
+    border-right-color: white;
+  }
+}

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

@@ -13,7 +13,9 @@ import nav from "./components/nav";
 import navItem from "./components/nav-item";
 import navGroup from "./components/nav-group";
 import splitter from "./components/splitter";
+import tabs from "./components/tabs";
 import copy from "./components/copy";
+import code from "./components/code";
 import sizes from "./components/sizes";
 
 import initFilterStore from "./stores/filter";
@@ -42,11 +44,13 @@ Alpine.data("page", page);
 Alpine.data("splitter", splitter);
 Alpine.data("previewWindow", previewWindow);
 Alpine.data("copy", copy);
+Alpine.data("code", code);
 Alpine.data("inspector", inspector);
 Alpine.data("filter", filter);
 Alpine.data("param", param);
 Alpine.data("sizes", sizes);
 Alpine.data("nav", nav);
+Alpine.data("tabs", tabs);
 Alpine.data("navItem", navItem);
 Alpine.data("navGroup", navGroup);
 

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

@@ -0,0 +1,5 @@
+export default function code() {
+  return {
+    wrap: false,
+  };
+}

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/filter.js

@@ -12,7 +12,7 @@ export default function filter() {
       this.$store.filter.raw = "";
     },
     focus($event) {
-      if ($event.target.tagName === "INPUT") {
+      if ($event && $event.target.tagName === "INPUT") {
         return;
       }
       setTimeout(() => this.$refs.input.focus(), 0);

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

@@ -1,17 +1,62 @@
+import sizeObserver from "./sizes";
+
 export default function inspector() {
   return {
-    isActivePanel(panel) {
-      return this.$store.inspector.panels.active == panel;
+    width: 0,
+    height: 0,
+    init() {
+      const ro = new ResizeObserver((entries) => {
+        const rect = entries[0].contentRect;
+        this.width = Math.round(rect.width);
+        this.height = Math.round(rect.height);
+      });
+      ro.observe(this.$el);
+      this.width = Math.round(this.$el.clientWidth);
+      this.height = Math.round(this.$el.clientHeight);
     },
-    switchPanel(panel) {
-      this.$store.inspector.panels.active = panel;
+    get orientation() {
+      return this.$store.inspector.drawer.orientation;
     },
-    get showSource() {
-      return this.$store.inspector.preview.source;
+    get view() {
+      return this.$store.inspector.preview.view;
     },
-    toggleSource() {
-      this.$store.inspector.preview.source =
-        !this.$store.inspector.preview.source;
+    get horizontal() {
+      return this.canBeVertical ? this.orientation === "horizontal" : true;
+    },
+    get vertical() {
+      return !this.horizontal;
+    },
+    get canBeVertical() {
+      return this.width > 800;
+    },
+    get drawerHidden() {
+      return this.$store.inspector.drawer.hidden;
+    },
+    get maxDrawerHeight() {
+      return Math.round(this.height * 0.7);
+    },
+    get maxDrawerWidth() {
+      return Math.round(this.width * 0.7);
+    },
+    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 =
+        this.orientation === "horizontal" ? "vertical" : "horizontal";
+    },
+    toggleDrawer() {
+      this.$store.inspector.drawer.hidden =
+        !this.$store.inspector.drawer.hidden;
     },
     preview: {
       width: null,

data/app/assets/lookbook/js/components/nav-group.js

@@ -15,7 +15,7 @@ export default function navGroup() {
     },
     getChildren() {
       return this.$refs.items
-        ? Array.from(this.$refs.items.querySelectorAll(":scope > li"))
+        ? Array.from(this.$refs.items.querySelectorAll(":scope > li > div"))
         : [];
     },
     navigateToFirstChild() {

data/app/assets/lookbook/js/components/nav-item.js

@@ -15,6 +15,7 @@ export default function navItem(matchers) {
       this.$store.sidebar.open = false;
     },
     filter(text) {
+      this.hidden = false;
       if (text.length) {
         const matched = matchers.map((m) => m.includes(text));
         this.hidden = !matched.filter((m) => m).length;

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

@@ -22,7 +22,7 @@ export default function nav() {
     },
     getChildren() {
       return this.$refs.items
-        ? Array.from(this.$refs.items.querySelectorAll(":scope > li"))
+        ? Array.from(this.$refs.items.querySelectorAll(":scope > li > div"))
         : [];
     },
     setActive() {

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

@@ -1,5 +1,21 @@
 import createSocket from "../lib/socket";
 
+const morphOpts = {
+  key(el) {
+    return el.getAttribute("key") ? el.getAttribute("key") : el.id;
+  },
+  updating(el, toEl, childrenOnly, skip) {
+    if (
+      el.getAttribute &&
+      el.getAttribute("data-morph-strategy") === "replace"
+    ) {
+      el.innerHTML = toEl.innerHTML;
+      return skip();
+    }
+  },
+  lookahead: true,
+};
+
 export default function page() {
   return {
     init() {
@@ -22,11 +38,7 @@ export default function page() {
     },
     morph(dom) {
       const pageHtml = dom.getElementById(this.$root.id).outerHTML;
-      Alpine.morph(this.$root, pageHtml, {
-        key(el) {
-          return el.getAttribute("key") ? el.getAttribute("key") : el.id;
-        },
-      });
+      Alpine.morph(this.$root, pageHtml, morphOpts);
       this.$dispatch("page:morphed");
     },
   };

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

@@ -1,18 +1,34 @@
-export default function param() {
+import debounce from "debounce";
+
+export default function param(name, value, opts = {}) {
   return {
-    setFocus() {
-      if (this.$refs.input) {
-        setTimeout(() => this.$refs.input.focus(), 0);
+    name,
+    value,
+    updating: false,
+    init() {
+      if (opts.debounce) {
+        this.$watch(
+          "value",
+          debounce(() => this.updateIfValid(), opts.debounce)
+        );
+      } else {
+        this.$watch("value", () => this.updateIfValid());
       }
     },
-    update(name, value) {
+    setFocus() {
+      setTimeout(() => this.$root.focus(), 0);
+    },
+    updateIfValid() {
+      if (this.validate()) this.update();
+    },
+    update() {
       const searchParams = new URLSearchParams(window.location.search);
-      searchParams.set(name, value);
+      searchParams.set(this.name, this.value);
       const path = location.href.replace(location.search, "");
       this.setLocation(`${path}?${searchParams.toString()}`);
     },
     validate() {
-      return this.$el.reportValidity ? this.$el.reportValidity() : true;
+      return this.$root.reportValidity ? this.$root.reportValidity() : true;
     },
   };
 }

data/app/assets/lookbook/js/components/preview-window.js

@@ -1,37 +1,106 @@
 export default function preview() {
   return {
-    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;
-      this.$store.inspector.preview.width = `${Math.min(
-        Math.max(percentSize, minWidth),
-        100
-      )}%`;
+    get store() {
+      return this.$store.inspector.preview;
     },
-    onResizeStart(e) {
+    get maxWidth() {
+      return this.store.width === "100%" ? "100%" : `${this.store.width}px`;
+    },
+    get maxHeight() {
+      return this.store.height === "100%" ? "100%" : `${this.store.height}px`;
+    },
+    get parentWidth() {
+      return Math.round(this.$root.parentElement.clientWidth);
+    },
+    get parentHeight() {
+      return Math.round(this.$root.parentElement.clientHeight);
+    },
+    start() {
       this.$store.layout.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);
+      this.store.resizing = true;
+    },
+    end() {
       this.$store.layout.reflowing = false;
+      this.store.resizing = false;
+    },
+    onResizeStart(e) {
+      this.onResizeWidthStart(e);
+      this.onResizeHeightStart(e);
+    },
+    toggleFullSize() {
+      const { height, width } = this.store;
+      if (height === "100%" && width === "100%") {
+        this.toggleFullHeight();
+        this.toggleFullWidth();
+      } else {
+        if (height !== "100%") this.toggleFullHeight();
+        if (width !== "100%") this.toggleFullWidth();
+      }
+    },
+    onResizeWidth(e) {
+      const width =
+        this.resizeStartWidth - (this.resizeStartPositionX - e.pageX) * 2;
+      const boundedWidth = Math.min(
+        Math.max(Math.round(width), 200),
+        this.parentWidth
+      );
+      this.store.width =
+        boundedWidth === this.parentWidth ? "100%" : boundedWidth;
+    },
+    onResizeWidthStart(e) {
+      this.start();
+      this.onResizeWidth = this.onResizeWidth.bind(this);
+      this.onResizeWidthEnd = this.onResizeWidthEnd.bind(this);
+      this.resizeStartPositionX = e.pageX;
+      this.resizeStartWidth = this.$root.clientWidth;
+      window.addEventListener("pointermove", this.onResizeWidth);
+      window.addEventListener("pointerup", this.onResizeWidthEnd);
+    },
+    onResizeWidthEnd() {
+      window.removeEventListener("pointermove", this.onResizeWidth);
+      window.removeEventListener("pointerup", this.onResizeWidthEnd);
+      this.end();
     },
     toggleFullWidth() {
-      const preview = this.$store.inspector.preview;
-      if (preview.width === "100%" && preview.lastWidth) {
-        preview.width = preview.lastWidth;
+      const { width, lastWidth } = this.store;
+      if (width === "100%" && lastWidth) {
+        this.store.width = lastWidth;
+      } else {
+        this.store.lastWidth = width;
+        this.store.width = "100%";
+      }
+    },
+    onResizeHeight(e) {
+      const height =
+        this.resizeStartHeight - (this.resizeStartPositionY - e.pageY);
+      const boundedHeight = Math.min(
+        Math.max(Math.round(height), 200),
+        this.parentHeight
+      );
+      this.$store.inspector.preview.height =
+        boundedHeight === this.parentHeight ? "100%" : boundedHeight;
+    },
+    onResizeHeightStart(e) {
+      this.start();
+      this.onResizeHeight = this.onResizeHeight.bind(this);
+      this.onResizeHeightEnd = this.onResizeHeightEnd.bind(this);
+      this.resizeStartPositionY = e.pageY;
+      this.resizeStartHeight = this.$root.clientHeight;
+      window.addEventListener("pointermove", this.onResizeHeight);
+      window.addEventListener("pointerup", this.onResizeHeightEnd);
+    },
+    onResizeHeightEnd() {
+      window.removeEventListener("pointermove", this.onResizeHeight);
+      window.removeEventListener("pointerup", this.onResizeHeightEnd);
+      this.end();
+    },
+    toggleFullHeight() {
+      const { height, lastHeight } = this.store;
+      if (height === "100%" && lastHeight) {
+        this.store.height = lastHeight;
       } else {
-        preview.lastWidth = preview.width;
-        preview.width = "100%";
+        this.store.lastHeight = height;
+        this.store.height = "100%";
       }
     },
   };