app/assets/lookbook/js/app.js in lookbook-0.2.4 vs app/assets/lookbook/js/app.js in lookbook-0.3.0.beta.0

@@ -1,49 +1,74 @@
+import { install } from "@github/hotkey";
 import Alpine from "alpinejs";
 import Fern from "@ryangjchandler/fern";
-import Tooltip from "@ryangjchandler/alpine-tooltip";
-import Clipboard from "@ryangjchandler/alpine-clipboard";
-import split from "./split";
-import preview from "./preview";
-import observeSize from "./size_observer";
-import reloader from "./reloader";
+import AlpineTooltip from "@ryangjchandler/alpine-tooltip";
+import AlpineClipboard from "@ryangjchandler/alpine-clipboard";
+import Screen from "./utils/screen";
+import split from "./utils/split";
+import page from "./page";
+import workbench from "./workbench";
+import preview from "./workbench/preview";
+import inspector from "./workbench/inspector";
+import nav from "./nav";
+import navNode from "./nav/node";
+import navLeaf from "./nav/leaf";
+import sizeObserver from "./utils/size_observer";
+import reloader from "./utils/reloader";
+import clipboard from "./utils/clipboard";
 
+window.Alpine = Alpine;
+
 // Plugins
 
 Alpine.plugin(Fern);
-Alpine.plugin(Tooltip);
-Alpine.plugin(Clipboard);
+Alpine.plugin(AlpineTooltip);
+Alpine.plugin(AlpineClipboard);
+Alpine.plugin(Screen);
 
-// Data
-
-Alpine.data("preview", preview);
-Alpine.data("sizeObserver", observeSize);
-Alpine.data("split", split);
-
 // Stores
 
-Alpine.store("app", { reflowing: false });
+Alpine.store("page", {
+  reflowing: false,
+  doc: window.document,
+});
+
 Alpine.persistedStore("nav", {
   width: 280,
   filter: "",
   open: {},
-  scrollTop: 0,
-  shouldDisplay(previewName) {
-    const cleanFilter = this.filter.replace(/\s/g, "");
-    return (
-      cleanFilter === "" || previewName.includes(cleanFilter.toLowerCase())
-    );
-  },
 });
-Alpine.persistedStore("preview", {});
+
 Alpine.persistedStore("inspector", {
   height: 200,
   active: "source",
 });
 
+Alpine.persistedStore("preview", {
+  width: "100%",
+});
+
+// Components & utils
+
+Alpine.data("page", page);
+Alpine.data("nav", nav);
+Alpine.data("navNode", navNode);
+Alpine.data("navLeaf", navLeaf);
+Alpine.data("workbench", workbench);
+Alpine.data("preview", preview);
+Alpine.data("inspector", inspector);
+Alpine.data("clipboard", clipboard);
+Alpine.data("sizeObserver", sizeObserver);
+Alpine.data("split", split);
+
 // Init
 
-window.Alpine = Alpine;
+for (const el of document.querySelectorAll("[data-hotkey]")) {
+  install(el);
+}
+
 if (window.SOCKET_PATH) {
   reloader(window.SOCKET_PATH).start();
 }
+
+window.Alpine = Alpine;
 Alpine.start();