lookbook 0.4.5 → 0.5.0.beta.0

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: lookbook
 version: !ruby/object:Gem::Version
-  version: 0.4.5
+  version: 0.5.0.beta.0
 platform: ruby
 authors:
 - Mark Perkins
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-11-27 00:00:00.000000000 Z
+date: 2021-12-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -190,52 +190,63 @@ files:
 - app/assets/lookbook/css/code_theme.css
 - app/assets/lookbook/css/tooltip_theme.css
 - app/assets/lookbook/js/app.js
-- app/assets/lookbook/js/nav.js
-- app/assets/lookbook/js/nav/leaf.js
-- app/assets/lookbook/js/nav/node.js
-- app/assets/lookbook/js/page.js
-- app/assets/lookbook/js/utils/clipboard.js
-- app/assets/lookbook/js/utils/morph.js
-- app/assets/lookbook/js/utils/reloader.js
-- app/assets/lookbook/js/utils/screen.js
-- app/assets/lookbook/js/utils/size_observer.js
-- app/assets/lookbook/js/utils/split.js
-- app/assets/lookbook/js/workbench.js
-- app/assets/lookbook/js/workbench/inspector.js
-- app/assets/lookbook/js/workbench/param.js
-- app/assets/lookbook/js/workbench/preview.js
+- app/assets/lookbook/js/components/copy.js
+- app/assets/lookbook/js/components/filter.js
+- app/assets/lookbook/js/components/inspector.js
+- app/assets/lookbook/js/components/nav-group.js
+- app/assets/lookbook/js/components/nav-item.js
+- app/assets/lookbook/js/components/nav.js
+- app/assets/lookbook/js/components/page.js
+- app/assets/lookbook/js/components/param.js
+- app/assets/lookbook/js/components/preview-window.js
+- app/assets/lookbook/js/components/sidebar.js
+- app/assets/lookbook/js/components/sizes.js
+- app/assets/lookbook/js/components/splitter.js
+- app/assets/lookbook/js/components/tabs.js
+- app/assets/lookbook/js/config.js
+- app/assets/lookbook/js/lib/socket.js
+- app/assets/lookbook/js/lib/split.js
+- app/assets/lookbook/js/lib/utils.js
+- app/assets/lookbook/js/stores/filter.js
+- app/assets/lookbook/js/stores/inspector.js
+- app/assets/lookbook/js/stores/layout.js
+- app/assets/lookbook/js/stores/nav.js
+- app/assets/lookbook/js/stores/sidebar.js
 - app/channels/lookbook/connection.rb
 - app/channels/lookbook/reload_channel.rb
 - app/controllers/lookbook/app_controller.rb
 - app/helpers/lookbook/application_helper.rb
 - app/helpers/lookbook/preview_helper.rb
-- app/views/lookbook/app/error.html.erb
-- app/views/lookbook/app/index.html.erb
-- app/views/lookbook/app/not_found.html.erb
-- app/views/lookbook/app/show.html.erb
-- app/views/lookbook/layouts/app.html.erb
-- app/views/lookbook/nav/_collection.html.erb
-- app/views/lookbook/nav/_leaf.html.erb
-- app/views/lookbook/nav/_node.html.erb
-- app/views/lookbook/nav/_preview.html.erb
-- app/views/lookbook/preview/group.html.erb
-- app/views/lookbook/shared/_clipboard.html.erb
-- app/views/lookbook/shared/_header.html.erb
-- app/views/lookbook/shared/_sidebar.html.erb
-- app/views/lookbook/shared/_workbench.html.erb
-- app/views/lookbook/workbench/_header.html.erb
-- app/views/lookbook/workbench/_inspector.html.erb
-- app/views/lookbook/workbench/_preview.html.erb
-- app/views/lookbook/workbench/inspector/_code.html.erb
-- app/views/lookbook/workbench/inspector/_notes.html.erb
-- app/views/lookbook/workbench/inspector/_params.html.erb
-- app/views/lookbook/workbench/inspector/_plain.html.erb
-- app/views/lookbook/workbench/inspector/params/_select.html.erb
-- app/views/lookbook/workbench/inspector/params/_text.html.erb
-- app/views/lookbook/workbench/inspector/params/_textarea.html.erb
-- app/views/lookbook/workbench/inspector/params/_toggle.html.erb
+- app/views/layouts/lookbook/app.html.erb
+- app/views/layouts/lookbook/preview.html.erb
+- app/views/lookbook/components/_code.html.erb
+- app/views/lookbook/components/_copy.html.erb
+- app/views/lookbook/components/_drawer.html.erb
+- app/views/lookbook/components/_filter.html.erb
+- app/views/lookbook/components/_header.html.erb
+- app/views/lookbook/components/_icon.html.erb
+- app/views/lookbook/components/_nav.html.erb
+- app/views/lookbook/components/_nav_collection.html.erb
+- app/views/lookbook/components/_nav_group.html.erb
+- app/views/lookbook/components/_nav_item.html.erb
+- app/views/lookbook/components/_nav_preview.html.erb
+- app/views/lookbook/components/_param.html.erb
+- app/views/lookbook/components/_preview.html.erb
+- app/views/lookbook/error.html.erb
+- app/views/lookbook/index.html.erb
+- app/views/lookbook/inputs/_select.html.erb
+- app/views/lookbook/inputs/_text.html.erb
+- app/views/lookbook/inputs/_textarea.html.erb
+- app/views/lookbook/inputs/_toggle.html.erb
+- app/views/lookbook/not_found.html.erb
+- app/views/lookbook/panels/_notes.html.erb
+- app/views/lookbook/panels/_output.html.erb
+- app/views/lookbook/panels/_params.html.erb
+- app/views/lookbook/panels/_source.html.erb
+- app/views/lookbook/show.html.erb
 - config/routes.rb
 - lib/lookbook.rb
+- lib/lookbook/code_formatter.rb
 - lib/lookbook/collection.rb
 - lib/lookbook/engine.rb
 - lib/lookbook/features.rb
@@ -250,9 +261,11 @@ files:
 - lib/lookbook/taggable.rb
 - lib/lookbook/version.rb
 - lib/tasks/lookbook_tasks.rake
-- public/lookbook-assets/app.css
-- public/lookbook-assets/app.js
+- public/lookbook-assets/css/app.css
+- public/lookbook-assets/css/app.css.map
 - public/lookbook-assets/feather-sprite.svg
+- public/lookbook-assets/js/app.js
+- public/lookbook-assets/js/app.js.map
 homepage: https://github.com/allmarkedup/lookbook
 licenses:
 - MIT
@@ -268,9 +281,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
 rubygems_version: 3.2.22
 signing_key:

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

@@ -1,20 +0,0 @@
-export default function navLeaf() {
-  return {
-    path: null,
-    matchers: [],
-    active: false,
-    hidden: false,
-    setActive() {
-      this.active = this.path === window.location.pathname;
-    },
-    filter() {
-      if (this.$store.nav.filtering) {
-        const text = this.$store.nav.filterText;
-        const matched = this.matchers.map((m) => m.includes(text));
-        this.hidden = !matched.filter((m) => m).length;
-      } else {
-        this.hidden = false;
-      }
-    },
-  };
-}

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

@@ -1,38 +0,0 @@
-import morph from "./utils/morph";
-
-export default function () {
-  return {
-    clearFilter() {
-      this.$store.nav.filter = "";
-    },
-    init() {
-      this.$watch("$store.nav.filter", (value) => {
-        const nav = this.$store.nav;
-        nav.filterText = value.replace(/\s/g, "").toLowerCase();
-        nav.filtering = nav.filterText.length > 0;
-      });
-    },
-    updateNav(event) {
-      const nav = document.getElementById("nav");
-      nav.style.height = `${this.$refs.shim.offsetHeight}px`;
-      morph(nav, event.detail.doc.getElementById("nav"));
-      Promise.resolve().then(() => {
-        this.$refs.shim.style.height = "auto";
-        this.$dispatch("nav:updated");
-      });
-    },
-    navigate(path) {
-      this.navigateTo(path instanceof Event ? path.currentTarget.href : path);
-    },
-    focusFilter($event) {
-      if ($event.target.tagName === "INPUT") {
-        return;
-      }
-      this.currentFocus = this.$refs.filter;
-      setTimeout(() => this.$refs.filter.focus(), 0);
-    },
-    unfocusFilter() {
-      this.$refs.filter.blur();
-    },
-  };
-}

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

@@ -1,38 +0,0 @@
-import morph from "./utils/morph";
-
-export default function page() {
-  const store = Alpine.store("page");
-  return {
-    ready: false,
-    sidebarOpenMobile: false,
-    init() {
-      this.$nextTick(() => (this.ready = true));
-    },
-    splitProps: {
-      minSize: 200,
-      onDrag(splits) {
-        Alpine.store("nav").width = Math.min(splits[0], 500);
-      },
-    },
-    async fetchHTML() {
-      const response = await fetch(window.document.location);
-      if (!response.ok) return window.location.reload();
-      const html = await response.text();
-      store.doc = new DOMParser().parseFromString(html, "text/html");
-      return store.doc;
-    },
-    updateTitle() {
-      document.title = store.doc.title;
-    },
-    render() {
-      if (this.ready) {
-        morph(this.$el, store.doc.getElementById(this.$el.id));
-        this.$dispatch("document:patched");
-      }
-    },
-    navigateTo(path) {
-      history.pushState({}, null, path);
-      this.$dispatch("popstate");
-    },
-  };
-}

data/app/assets/lookbook/js/utils/clipboard.js

@@ -1,13 +0,0 @@
-export default function clipboard() {
-  return {
-    content: null,
-    done: false,
-    save() {
-      this.$clipboard(this.content);
-      this.done = true;
-      setTimeout(() => {
-        this.done = false;
-      }, 1000);
-    },
-  };
-}

data/app/assets/lookbook/js/utils/morph.js

@@ -1,19 +0,0 @@
-import morph from "morphdom";
-
-export default function (from, to, opts = {}) {
-  morph(from, to, {
-    onBeforeElUpdated: function (fromEl, toEl) {
-      if (fromEl._x_dataStack) {
-        Alpine.clone(fromEl, toEl);
-      }
-      if (fromEl.isEqualNode(toEl)) {
-        return false;
-      }
-      if (fromEl.hasAttribute("skip-morph")) {
-        return false;
-      }
-      return true;
-    },
-    ...opts,
-  });
-}

data/app/assets/lookbook/js/utils/screen.js

@@ -1,44 +0,0 @@
-// Adapted from: https://github.com/alpine-collective/toolkit
-
-export default function (Alpine) {
-  // Create reactive data context
-  let data = Alpine.reactive({ screensize: window.innerWidth });
-
-  // Configuration
-  const defaultBreakpoints = {
-    xs: 0,
-    sm: 640,
-    md: 768,
-    lg: 1024,
-    xl: 1280,
-    "2xl": 1536,
-  };
-
-  const breakpoints =
-    window.AlpineMagicHelpersConfig &&
-    window.AlpineMagicHelpersConfig.breakpoints
-      ? window.AlpineMagicHelpersConfig.breakpoints
-      : defaultBreakpoints;
-
-  window.addEventListener("resize", () => {
-    data.screensize = window.innerWidth;
-  });
-
-  Alpine.magic("screen", () => (breakpoint) => {
-    let width = data.screensize;
-
-    if (Number.isInteger(breakpoint)) return breakpoint <= width;
-
-    // Check if breakpoint exists
-    if (breakpoints[breakpoint] === undefined) {
-      throw Error(
-        "Undefined $screen property: " +
-          breakpoint +
-          ". Supported properties: " +
-          Object.keys(breakpoints).join(", ")
-      );
-    }
-
-    return breakpoints[breakpoint] <= width;
-  });
-}

data/app/assets/lookbook/js/utils/size_observer.js

@@ -1,16 +0,0 @@
-export default function sizeObserver() {
-  return {
-    observedWidth: 0,
-    observedHeight: 0,
-    init() {
-      const ro = new ResizeObserver((entries) => {
-        const rect = entries[0].contentRect;
-        this.observedWidth = Math.round(rect.width);
-        this.observedHeight = Math.round(rect.height);
-      });
-      ro.observe(this.$el);
-      this.observedWidth = Math.round(this.$el.clientWidth);
-      this.observedHeight = Math.round(this.$el.clientHeight);
-    },
-  };
-}

data/app/assets/lookbook/js/utils/split.js

@@ -1,26 +0,0 @@
-import Split from "split-grid";
-
-export default function (props) {
-  const page = Alpine.store("page");
-  return {
-    init() {
-      Split({
-        [`${props.direction === "vertical" ? "row" : "column"}Gutters`]: [
-          { track: 1, element: this.$el },
-        ],
-        minSize: props.minSize,
-        writeStyle() {},
-        onDrag(dir, track, style) {
-          const splits = style.split(" ").map((num) => parseInt(num));
-          props.onDrag(splits);
-        },
-        onDragStart() {
-          page.reflowing = true;
-        },
-        onDragEnd() {
-          page.reflowing = false;
-        },
-      });
-    },
-  };
-}

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

@@ -1,11 +0,0 @@
-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/param.js

@@ -1,19 +0,0 @@
-export default function param() {
-  return {
-    focused: false,
-    setFocus() {
-      if (this.focused && this.$el.focus) {
-        this.$el.focus();
-      }
-    },
-    update(name, value) {
-      const searchParams = new URLSearchParams(window.location.search);
-      searchParams.set(name, value);
-      const path = location.href.replace(location.search, "");
-      this.navigateTo(`${path}?${searchParams.toString()}`);
-    },
-    validate() {
-      return this.$el.reportValidity ? this.$el.reportValidity() : true;
-    },
-  };
-}

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

@@ -1,39 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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/views/lookbook/app/index.html.erb

@@ -1,11 +0,0 @@
-<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/app/show.html.erb

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

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

@@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" class="h-screen">
-<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/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>">
-
-  <% if config.auto_refresh %>
-    <script>
-      window.SOCKET_PATH = "<%= Lookbook::Engine.websocket_mount_path %>";
-    </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 h-screen overflow-hidden">
-  <div
-    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;`"
-    class="md:grid w-screen h-screen"
-  >
-    <div class="h-full bg-gray-100 overflow-hidden" x-show="$screen('md') || sidebarOpenMobile" x-cloak>
-      <%= render "shared/sidebar" %>
-    </div>
-    <div x-data="split(splitProps)" class="h-full gutter border-r border-gray-300 relative" x-show="$screen('md')" x-cloak>
-      <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>
-    </div>
-    <main id="main" x-effect="render" class="h-full overflow-hidden w-full" x-show="!$screen('md') || !sidebarOpenMobile" x-cloak>
-      <%= yield %>
-    </main>
-  </div>
-</body>
-</html>

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

@@ -1,5 +0,0 @@
-<%= 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/_leaf.html.erb

@@ -1,22 +0,0 @@
-<%
-path = show_path leaf.path
-display ||= :leaf
-label ||= leaf.label
-%>
-<li x-data="navLeaf" :class="{hidden}" x-init="matchers = <%= leaf.matchers.to_json %>; path = '<%= path %>'; setActive()" @popstate.window="setActive">
-  <a href="<%= path %>"
-    class="nav-link pr-3 py-[5px] flex items-center w-full group transition hover:bg-gray-200 hover:bg-opacity-50"
-    style="<%= nav_padding_style(depth) %>"
-    :class="{'!bg-indigo-100':active}"
-    @click.stop.prevent="navigate"
-  >
-    <div class="relative w-3.5 h-3.5 mr-1.5 <%= "ml-[3px]" if display == :node %> " :class="active ? 'text-gray-900' : 'text-indigo-500'">
-      <svg class="feather flex-none group-hover:text-indigo-800 transition w-3.5 h-3.5">
-        <use xlink:href="/lookbook-assets/feather-sprite.svg#<%= display == :node ? "layers" : "eye" %>" />
-      </svg>
-    </div>
-    <div class="truncate whitespace-nowrap <%= "font-bold" if display == :node %>">
-      <%= label %>
-    </div>
-  </a>
-</li>

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

@@ -1,19 +0,0 @@
-<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) %>" class="hover:bg-gray-200 hover:bg-opacity-50">
-    <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 w-full whitespace-nowrap text-left <%= "font-bold" if node.type == :preview %>" @click.stop="toggle(); navigateToFirstChild();">
-        <%= 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

@@ -1,11 +0,0 @@
-<% examples = node.get_examples.reject(&:hidden?) %>
-<% if examples.many? %>
-  <%= render "nav/node", node: node, path: show_path(examples.first.path) do %>
-    <% examples.each do |example| %>
-      <%= render "nav/leaf", leaf: example, depth: example.hierarchy_depth + 1 %>
-    <% end %>
-  <% end %>
-<% else %>
-  <% example = examples.first %>
-  <%= render "nav/leaf", leaf: example, depth: example.hierarchy_depth, label: node.label, display: :node %>
-<% end %>

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

@@ -1,8 +0,0 @@
-<% examples.each do |example| %>
-  <div style="margin-bottom: 30px;">
-    <h6 style="color: #999; font-family: sans-serif; font-size: 14px; margin-top: 0; margin-bottom: 10px;">
-      <%= example[:label] %>
-    </h6>
-    <%= example[:html] %>
-  </div>
-<% end %>

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

@@ -1,11 +0,0 @@
-<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/_sidebar.html.erb

@@ -1,45 +0,0 @@
-<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>