lookbook 0.2.4 → 0.3.0.beta.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (63) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +81 -0
  3. data/app/assets/lookbook/css/app.css +28 -0
  4. data/app/assets/lookbook/js/app.js +49 -24
  5. data/app/assets/lookbook/js/nav/leaf.js +20 -0
  6. data/app/assets/lookbook/js/nav/node.js +31 -0
  7. data/app/assets/lookbook/js/nav.js +36 -0
  8. data/app/assets/lookbook/js/page.js +33 -0
  9. data/app/assets/lookbook/js/utils/clipboard.js +13 -0
  10. data/app/assets/lookbook/js/utils/morph.js +16 -0
  11. data/app/assets/lookbook/js/{reloader.js → utils/reloader.js} +0 -0
  12. data/app/assets/lookbook/js/utils/screen.js +44 -0
  13. data/app/assets/lookbook/js/{size_observer.js → utils/size_observer.js} +1 -1
  14. data/app/assets/lookbook/js/{split.js → utils/split.js} +4 -4
  15. data/app/assets/lookbook/js/workbench/inspector.js +11 -0
  16. data/app/assets/lookbook/js/workbench/preview.js +39 -0
  17. data/app/assets/lookbook/js/workbench.js +14 -0
  18. data/app/controllers/lookbook/{browser_controller.rb → app_controller.rb} +58 -31
  19. data/app/helpers/lookbook/application_helper.rb +1 -1
  20. data/app/views/lookbook/_sidebar.html.erb +45 -0
  21. data/app/views/lookbook/_workbench.html.erb +12 -0
  22. data/app/views/lookbook/{browser → app}/error.html.erb +0 -0
  23. data/app/views/lookbook/app/index.html.erb +11 -0
  24. data/app/views/lookbook/{browser → app}/not_found.html.erb +1 -1
  25. data/app/views/lookbook/app/show.html.erb +1 -0
  26. data/app/views/lookbook/layouts/app.html.erb +17 -27
  27. data/app/views/lookbook/layouts/group.html.erb +6 -0
  28. data/app/views/lookbook/nav/_collection.html.erb +5 -0
  29. data/app/views/lookbook/nav/_node.html.erb +19 -0
  30. data/app/views/lookbook/nav/_preview.html.erb +29 -0
  31. data/app/views/lookbook/shared/_clipboard.html.erb +11 -0
  32. data/app/views/lookbook/shared/_header.html.erb +8 -0
  33. data/app/views/lookbook/workbench/_header.html.erb +37 -0
  34. data/app/views/lookbook/workbench/_inspector.html.erb +32 -0
  35. data/app/views/lookbook/workbench/_preview.html.erb +24 -0
  36. data/app/views/lookbook/workbench/inspector/_code.html.erb +3 -0
  37. data/app/views/lookbook/workbench/inspector/_notes.html.erb +24 -0
  38. data/app/views/lookbook/{partials → workbench}/inspector/_plain.html.erb +0 -0
  39. data/config/routes.rb +3 -3
  40. data/lib/lookbook/preview.rb +25 -3
  41. data/lib/lookbook/preview_controller.rb +6 -1
  42. data/lib/lookbook/preview_example.rb +3 -2
  43. data/lib/lookbook/preview_group.rb +37 -0
  44. data/lib/lookbook/taggable.rb +5 -1
  45. data/lib/lookbook/version.rb +1 -1
  46. data/lib/lookbook.rb +1 -0
  47. data/lib/tasks/lookbook_tasks.rake +1 -1
  48. data/public/lookbook-assets/app.css +258 -102
  49. data/public/lookbook-assets/app.js +964 -95
  50. data/{app/views/lookbook/partials/_icon_sprite.html.erb → public/lookbook-assets/feather-sprite.svg} +1 -1
  51. metadata +52 -24
  52. data/app/assets/lookbook/js/preview.js +0 -76
  53. data/app/views/lookbook/browser/index.html.erb +0 -8
  54. data/app/views/lookbook/browser/show.html.erb +0 -33
  55. data/app/views/lookbook/partials/_preview.html.erb +0 -18
  56. data/app/views/lookbook/partials/_sidebar.html.erb +0 -21
  57. data/app/views/lookbook/partials/inspector/_code.html.erb +0 -1
  58. data/app/views/lookbook/partials/inspector/_inspector.html.erb +0 -43
  59. data/app/views/lookbook/partials/inspector/_prose.html.erb +0 -3
  60. data/app/views/lookbook/partials/nav/_collection.html.erb +0 -17
  61. data/app/views/lookbook/partials/nav/_label.html.erb +0 -13
  62. data/app/views/lookbook/partials/nav/_nav.html.erb +0 -27
  63. data/app/views/lookbook/partials/nav/_preview.html.erb +0 -48
@@ -20,7 +20,10 @@
20
20
  return a;
21
21
  };
22
22
  var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
23
- var __commonJS = (cb, mod) => function __require() {
23
+ var __require = typeof require !== "undefined" ? require : (x) => {
24
+ throw new Error('Dynamic require of "' + x + '" is not supported');
25
+ };
26
+ var __commonJS = (cb, mod) => function __require2() {
24
27
  return mod || (0, cb[Object.keys(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
25
28
  };
26
29
  var __reExport = (target, module, desc) => {
@@ -631,6 +634,138 @@
631
634
  }
632
635
  });
633
636
 
637
+ // node_modules/@github/hotkey/dist/index.js
638
+ var Leaf = class {
639
+ constructor(trie) {
640
+ this.children = [];
641
+ this.parent = trie;
642
+ }
643
+ delete(value) {
644
+ const index2 = this.children.indexOf(value);
645
+ if (index2 === -1)
646
+ return false;
647
+ this.children = this.children.slice(0, index2).concat(this.children.slice(index2 + 1));
648
+ if (this.children.length === 0) {
649
+ this.parent.delete(this);
650
+ }
651
+ return true;
652
+ }
653
+ add(value) {
654
+ this.children.push(value);
655
+ return this;
656
+ }
657
+ };
658
+ var RadixTrie = class {
659
+ constructor(trie) {
660
+ this.parent = null;
661
+ this.children = {};
662
+ this.parent = trie || null;
663
+ }
664
+ get(edge) {
665
+ return this.children[edge];
666
+ }
667
+ insert(edges) {
668
+ let currentNode = this;
669
+ for (let i = 0; i < edges.length; i += 1) {
670
+ const edge = edges[i];
671
+ let nextNode = currentNode.get(edge);
672
+ if (i === edges.length - 1) {
673
+ if (nextNode instanceof RadixTrie) {
674
+ currentNode.delete(nextNode);
675
+ nextNode = null;
676
+ }
677
+ if (!nextNode) {
678
+ nextNode = new Leaf(currentNode);
679
+ currentNode.children[edge] = nextNode;
680
+ }
681
+ return nextNode;
682
+ } else {
683
+ if (nextNode instanceof Leaf)
684
+ nextNode = null;
685
+ if (!nextNode) {
686
+ nextNode = new RadixTrie(currentNode);
687
+ currentNode.children[edge] = nextNode;
688
+ }
689
+ }
690
+ currentNode = nextNode;
691
+ }
692
+ return currentNode;
693
+ }
694
+ delete(node) {
695
+ for (const edge in this.children) {
696
+ const currentNode = this.children[edge];
697
+ if (currentNode === node) {
698
+ const success = delete this.children[edge];
699
+ if (Object.keys(this.children).length === 0 && this.parent) {
700
+ this.parent.delete(this);
701
+ }
702
+ return success;
703
+ }
704
+ }
705
+ return false;
706
+ }
707
+ };
708
+ function isFormField(element) {
709
+ if (!(element instanceof HTMLElement)) {
710
+ return false;
711
+ }
712
+ const name = element.nodeName.toLowerCase();
713
+ const type = (element.getAttribute("type") || "").toLowerCase();
714
+ return name === "select" || name === "textarea" || name === "input" && type !== "submit" && type !== "reset" && type !== "checkbox" && type !== "radio" || element.isContentEditable;
715
+ }
716
+ function fireDeterminedAction(el) {
717
+ if (isFormField(el)) {
718
+ el.focus();
719
+ } else {
720
+ el.click();
721
+ }
722
+ }
723
+ function expandHotkeyToEdges(hotkey2) {
724
+ return hotkey2.split(",").map((edge) => edge.split(" "));
725
+ }
726
+ function hotkey(event) {
727
+ const elideShift = event.code.startsWith("Key") && event.shiftKey && event.key.toUpperCase() === event.key;
728
+ return `${event.ctrlKey ? "Control+" : ""}${event.altKey ? "Alt+" : ""}${event.metaKey ? "Meta+" : ""}${event.shiftKey && !elideShift ? "Shift+" : ""}${event.key}`;
729
+ }
730
+ var hotkeyRadixTrie = new RadixTrie();
731
+ var elementsLeaves = new WeakMap();
732
+ var currentTriePosition = hotkeyRadixTrie;
733
+ var resetTriePositionTimer = null;
734
+ function resetTriePosition() {
735
+ resetTriePositionTimer = null;
736
+ currentTriePosition = hotkeyRadixTrie;
737
+ }
738
+ function keyDownHandler(event) {
739
+ if (event.defaultPrevented)
740
+ return;
741
+ if (event.target instanceof Node && isFormField(event.target))
742
+ return;
743
+ if (resetTriePositionTimer != null) {
744
+ window.clearTimeout(resetTriePositionTimer);
745
+ }
746
+ resetTriePositionTimer = window.setTimeout(resetTriePosition, 1500);
747
+ const newTriePosition = currentTriePosition.get(hotkey(event));
748
+ if (!newTriePosition) {
749
+ resetTriePosition();
750
+ return;
751
+ }
752
+ currentTriePosition = newTriePosition;
753
+ if (newTriePosition instanceof Leaf) {
754
+ fireDeterminedAction(newTriePosition.children[newTriePosition.children.length - 1]);
755
+ event.preventDefault();
756
+ resetTriePosition();
757
+ return;
758
+ }
759
+ }
760
+ function install(element, hotkey2) {
761
+ if (Object.keys(hotkeyRadixTrie.children).length === 0) {
762
+ document.addEventListener("keydown", keyDownHandler);
763
+ }
764
+ const hotkeys = expandHotkeyToEdges(hotkey2 || element.getAttribute("data-hotkey") || "");
765
+ const leaves = hotkeys.map((h) => hotkeyRadixTrie.insert(h).add(element));
766
+ elementsLeaves.set(element, leaves);
767
+ }
768
+
634
769
  // node_modules/alpinejs/dist/module.esm.js
635
770
  var __create2 = Object.create;
636
771
  var __defProp2 = Object.defineProperty;
@@ -691,7 +826,7 @@
691
826
  };
692
827
  var GLOBALS_WHITE_LISTED = "Infinity,undefined,NaN,isFinite,isNaN,parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,BigInt";
693
828
  var isGloballyWhitelisted = /* @__PURE__ */ makeMap(GLOBALS_WHITE_LISTED);
694
- var range = 2;
829
+ var range2 = 2;
695
830
  function generateCodeFrame(source, start2 = 0, end = source.length) {
696
831
  const lines = source.split(/\r?\n/);
697
832
  let count = 0;
@@ -699,7 +834,7 @@
699
834
  for (let i = 0; i < lines.length; i++) {
700
835
  count += lines[i].length + 1;
701
836
  if (count >= start2) {
702
- for (let j = i - range; j <= i + range || end > count; j++) {
837
+ for (let j = i - range2; j <= i + range2 || end > count; j++) {
703
838
  if (j < 0 || j >= lines.length)
704
839
  continue;
705
840
  const line = j + 1;
@@ -2087,7 +2222,7 @@
2087
2222
  function closestDataStack(node) {
2088
2223
  if (node._x_dataStack)
2089
2224
  return node._x_dataStack;
2090
- if (node instanceof ShadowRoot) {
2225
+ if (typeof ShadowRoot === "function" && node instanceof ShadowRoot) {
2091
2226
  return closestDataStack(node.host);
2092
2227
  }
2093
2228
  if (!node.parentNode) {
@@ -2293,6 +2428,9 @@ Expression: "${expression}"
2293
2428
  return getDirectiveHandler(el, directive2);
2294
2429
  });
2295
2430
  }
2431
+ function attributesOnly(attributes) {
2432
+ return Array.from(attributes).map(toTransformedAttributes()).filter((attr) => !outNonAlpineAttributes(attr));
2433
+ }
2296
2434
  var isDeferringHandlers = false;
2297
2435
  var directiveHandlerStacks = new Map();
2298
2436
  var currentHandlerStackKey = Symbol();
@@ -2314,9 +2452,9 @@ Expression: "${expression}"
2314
2452
  stopDeferring();
2315
2453
  }
2316
2454
  function getDirectiveHandler(el, directive2) {
2317
- let noop = () => {
2455
+ let noop2 = () => {
2318
2456
  };
2319
- let handler3 = directiveHandlers[directive2.type] || noop;
2457
+ let handler3 = directiveHandlers[directive2.type] || noop2;
2320
2458
  let cleanups = [];
2321
2459
  let cleanup2 = (callback) => cleanups.push(callback);
2322
2460
  let [effect3, cleanupEffect] = elementBoundEffect(el);
@@ -2346,7 +2484,8 @@ Expression: "${expression}"
2346
2484
  return { name, value };
2347
2485
  };
2348
2486
  var into = (i) => i;
2349
- function toTransformedAttributes(callback) {
2487
+ function toTransformedAttributes(callback = () => {
2488
+ }) {
2350
2489
  return ({ name, value }) => {
2351
2490
  let { name: newName, value: newValue } = attributeTransformers.reduce((carry, transform) => {
2352
2491
  return transform(carry);
@@ -2426,7 +2565,7 @@ Expression: "${expression}"
2426
2565
  isHolding = true;
2427
2566
  }
2428
2567
  function walk(el, callback) {
2429
- if (el instanceof ShadowRoot) {
2568
+ if (typeof ShadowRoot === "function" && el instanceof ShadowRoot) {
2430
2569
  Array.from(el.children).forEach((el2) => walk(el2, callback));
2431
2570
  return;
2432
2571
  }
@@ -2454,7 +2593,7 @@ Expression: "${expression}"
2454
2593
  onAttributesAdded((el, attrs) => {
2455
2594
  directives(el, attrs).forEach((handle) => handle());
2456
2595
  });
2457
- let outNestedComponents = (el) => !closestRoot(el.parentElement);
2596
+ let outNestedComponents = (el) => !closestRoot(el.parentElement, true);
2458
2597
  Array.from(document.querySelectorAll(allSelectors())).filter(outNestedComponents).forEach((el) => {
2459
2598
  initTree(el);
2460
2599
  });
@@ -2474,14 +2613,15 @@ Expression: "${expression}"
2474
2613
  function addInitSelector(selectorCallback) {
2475
2614
  initSelectorCallbacks.push(selectorCallback);
2476
2615
  }
2477
- function closestRoot(el) {
2616
+ function closestRoot(el, includeInitSelectors = false) {
2478
2617
  if (!el)
2479
2618
  return;
2480
- if (rootSelectors().some((selector) => el.matches(selector)))
2619
+ const selectors = includeInitSelectors ? allSelectors() : rootSelectors();
2620
+ if (selectors.some((selector) => el.matches(selector)))
2481
2621
  return el;
2482
2622
  if (!el.parentElement)
2483
2623
  return;
2484
- return closestRoot(el.parentElement);
2624
+ return closestRoot(el.parentElement, includeInitSelectors);
2485
2625
  }
2486
2626
  function isRoot(el) {
2487
2627
  return rootSelectors().some((selector) => el.matches(selector));
@@ -2497,6 +2637,29 @@ Expression: "${expression}"
2497
2637
  function destroyTree(root) {
2498
2638
  walk(root, (el) => cleanupAttributes(el));
2499
2639
  }
2640
+ function debounce(func, wait) {
2641
+ var timeout;
2642
+ return function() {
2643
+ var context = this, args = arguments;
2644
+ var later = function() {
2645
+ timeout = null;
2646
+ func.apply(context, args);
2647
+ };
2648
+ clearTimeout(timeout);
2649
+ timeout = setTimeout(later, wait);
2650
+ };
2651
+ }
2652
+ function throttle(func, limit) {
2653
+ let inThrottle;
2654
+ return function() {
2655
+ let context = this, args = arguments;
2656
+ if (!inThrottle) {
2657
+ func.apply(context, args);
2658
+ inThrottle = true;
2659
+ setTimeout(() => inThrottle = false, limit);
2660
+ }
2661
+ };
2662
+ }
2500
2663
  function plugin(callback) {
2501
2664
  callback(alpine_default);
2502
2665
  }
@@ -2583,7 +2746,7 @@ Expression: "${expression}"
2583
2746
  get raw() {
2584
2747
  return raw;
2585
2748
  },
2586
- version: "3.2.4",
2749
+ version: "3.4.0",
2587
2750
  disableEffectScheduling,
2588
2751
  setReactivityEngine,
2589
2752
  addRootSelector,
@@ -2594,6 +2757,8 @@ Expression: "${expression}"
2594
2757
  interceptor,
2595
2758
  mutateDom,
2596
2759
  directive,
2760
+ throttle,
2761
+ debounce,
2597
2762
  evaluate,
2598
2763
  initTree,
2599
2764
  nextTick,
@@ -2628,7 +2793,23 @@ Expression: "${expression}"
2628
2793
  }));
2629
2794
  });
2630
2795
  magic("store", getStores);
2631
- magic("refs", (el) => closestRoot(el)._x_refs || {});
2796
+ magic("root", (el) => closestRoot(el));
2797
+ magic("refs", (el) => {
2798
+ if (el._x_refs_proxy)
2799
+ return el._x_refs_proxy;
2800
+ el._x_refs_proxy = mergeProxies(getArrayOfRefObject(el));
2801
+ return el._x_refs_proxy;
2802
+ });
2803
+ function getArrayOfRefObject(el) {
2804
+ let refObjects = [];
2805
+ let currentEl = el;
2806
+ while (currentEl) {
2807
+ if (currentEl._x_refs)
2808
+ refObjects.push(currentEl._x_refs);
2809
+ currentEl = currentEl.parentNode;
2810
+ }
2811
+ return refObjects;
2812
+ }
2632
2813
  magic("el", (el) => el);
2633
2814
  function setClasses(el, value) {
2634
2815
  if (Array.isArray(value)) {
@@ -2836,7 +3017,9 @@ Expression: "${expression}"
2836
3017
  };
2837
3018
  }
2838
3019
  window.Element.prototype._x_toggleAndCascadeWithTransitions = function(el, value, show, hide) {
2839
- let clickAwayCompatibleShow = () => requestAnimationFrame(show);
3020
+ let clickAwayCompatibleShow = () => {
3021
+ document.visibilityState === "visible" ? requestAnimationFrame(show) : setTimeout(show);
3022
+ };
2840
3023
  if (value) {
2841
3024
  el._x_transition ? el._x_transition.in(show) : clickAwayCompatibleShow();
2842
3025
  return;
@@ -3116,7 +3299,7 @@ Expression: "${expression}"
3116
3299
  return booleanAttributes.includes(attrName);
3117
3300
  }
3118
3301
  function attributeShouldntBePreservedIfFalsy(name) {
3119
- return !["aria-pressed", "aria-checked"].includes(name);
3302
+ return !["aria-pressed", "aria-checked", "aria-expanded"].includes(name);
3120
3303
  }
3121
3304
  function on(el, event, modifiers, callback) {
3122
3305
  let listenerTarget = el;
@@ -3168,12 +3351,12 @@ Expression: "${expression}"
3168
3351
  if (modifiers.includes("debounce")) {
3169
3352
  let nextModifier = modifiers[modifiers.indexOf("debounce") + 1] || "invalid-wait";
3170
3353
  let wait = isNumeric(nextModifier.split("ms")[0]) ? Number(nextModifier.split("ms")[0]) : 250;
3171
- handler3 = debounce(handler3, wait, this);
3354
+ handler3 = debounce(handler3, wait);
3172
3355
  }
3173
3356
  if (modifiers.includes("throttle")) {
3174
3357
  let nextModifier = modifiers[modifiers.indexOf("throttle") + 1] || "invalid-wait";
3175
3358
  let wait = isNumeric(nextModifier.split("ms")[0]) ? Number(nextModifier.split("ms")[0]) : 250;
3176
- handler3 = throttle(handler3, wait, this);
3359
+ handler3 = throttle(handler3, wait);
3177
3360
  }
3178
3361
  if (modifiers.includes("once")) {
3179
3362
  handler3 = wrapHandler(handler3, (next, e) => {
@@ -3192,29 +3375,6 @@ Expression: "${expression}"
3192
3375
  function camelCase2(subject) {
3193
3376
  return subject.toLowerCase().replace(/-(\w)/g, (match, char) => char.toUpperCase());
3194
3377
  }
3195
- function debounce(func, wait) {
3196
- var timeout;
3197
- return function() {
3198
- var context = this, args = arguments;
3199
- var later = function() {
3200
- timeout = null;
3201
- func.apply(context, args);
3202
- };
3203
- clearTimeout(timeout);
3204
- timeout = setTimeout(later, wait);
3205
- };
3206
- }
3207
- function throttle(func, limit) {
3208
- let inThrottle;
3209
- return function() {
3210
- let context = this, args = arguments;
3211
- if (!inThrottle) {
3212
- func.apply(context, args);
3213
- inThrottle = true;
3214
- setTimeout(() => inThrottle = false, limit);
3215
- }
3216
- };
3217
- }
3218
3378
  function isNumeric(subject) {
3219
3379
  return !Array.isArray(subject) && !isNaN(subject);
3220
3380
  }
@@ -3266,7 +3426,9 @@ Expression: "${expression}"
3266
3426
  up: "arrow-up",
3267
3427
  down: "arrow-down",
3268
3428
  left: "arrow-left",
3269
- right: "arrow-right"
3429
+ right: "arrow-right",
3430
+ period: ".",
3431
+ equal: "="
3270
3432
  };
3271
3433
  modifierToKeyMap[key] = key;
3272
3434
  return Object.keys(modifierToKeyMap).map((modifier) => {
@@ -3347,7 +3509,12 @@ Expression: "${expression}"
3347
3509
  }
3348
3510
  directive("cloak", (el) => queueMicrotask(() => mutateDom(() => el.removeAttribute(prefix("cloak")))));
3349
3511
  addInitSelector(() => `[${prefix("init")}]`);
3350
- directive("init", skipDuringClone((el, { expression }) => evaluate(el, expression, {}, false)));
3512
+ directive("init", skipDuringClone((el, { expression }) => {
3513
+ if (typeof expression === "string") {
3514
+ return !!expression.trim() && evaluate(el, expression, {}, false);
3515
+ }
3516
+ return evaluate(el, expression, {}, false);
3517
+ }));
3351
3518
  directive("text", (el, { expression }, { effect: effect3, evaluateLater: evaluateLater2 }) => {
3352
3519
  let evaluate2 = evaluateLater2(expression);
3353
3520
  effect3(() => {
@@ -3387,6 +3554,12 @@ Expression: "${expression}"
3387
3554
  cleanupRunners.pop()();
3388
3555
  getBindings((bindings) => {
3389
3556
  let attributes = Object.entries(bindings).map(([name, value]) => ({ name, value }));
3557
+ attributesOnly(attributes).forEach(({ name, value }, index2) => {
3558
+ attributes[index2] = {
3559
+ name: `x-bind:${name}`,
3560
+ value: `"${value}"`
3561
+ };
3562
+ });
3390
3563
  directives(el, attributes, original).map((handle) => {
3391
3564
  cleanupRunners.push(handle.runCleanups);
3392
3565
  handle();
@@ -3586,6 +3759,11 @@ Expression: "${expression}"
3586
3759
  names.forEach((name, i) => {
3587
3760
  scopeVariables[name] = item[i];
3588
3761
  });
3762
+ } else if (/^\{.*\}$/.test(iteratorNames.item) && !Array.isArray(item) && typeof item === "object") {
3763
+ let names = iteratorNames.item.replace("{", "").replace("}", "").split(",").map((i) => i.trim());
3764
+ names.forEach((name) => {
3765
+ scopeVariables[name] = item[name];
3766
+ });
3589
3767
  } else {
3590
3768
  scopeVariables[iteratorNames.item] = item;
3591
3769
  }
@@ -5791,18 +5969,18 @@ Expression: "${expression}"
5791
5969
  didTouchMove = false;
5792
5970
  }
5793
5971
  function addDocumentPress() {
5794
- var doc = getDocument();
5795
- doc.addEventListener("mousedown", onDocumentPress, true);
5796
- doc.addEventListener("touchend", onDocumentPress, TOUCH_OPTIONS);
5797
- doc.addEventListener("touchstart", onTouchStart, TOUCH_OPTIONS);
5798
- doc.addEventListener("touchmove", onTouchMove, TOUCH_OPTIONS);
5972
+ var doc2 = getDocument();
5973
+ doc2.addEventListener("mousedown", onDocumentPress, true);
5974
+ doc2.addEventListener("touchend", onDocumentPress, TOUCH_OPTIONS);
5975
+ doc2.addEventListener("touchstart", onTouchStart, TOUCH_OPTIONS);
5976
+ doc2.addEventListener("touchmove", onTouchMove, TOUCH_OPTIONS);
5799
5977
  }
5800
5978
  function removeDocumentPress() {
5801
- var doc = getDocument();
5802
- doc.removeEventListener("mousedown", onDocumentPress, true);
5803
- doc.removeEventListener("touchend", onDocumentPress, TOUCH_OPTIONS);
5804
- doc.removeEventListener("touchstart", onTouchStart, TOUCH_OPTIONS);
5805
- doc.removeEventListener("touchmove", onTouchMove, TOUCH_OPTIONS);
5979
+ var doc2 = getDocument();
5980
+ doc2.removeEventListener("mousedown", onDocumentPress, true);
5981
+ doc2.removeEventListener("touchend", onDocumentPress, TOUCH_OPTIONS);
5982
+ doc2.removeEventListener("touchstart", onTouchStart, TOUCH_OPTIONS);
5983
+ doc2.removeEventListener("touchmove", onTouchMove, TOUCH_OPTIONS);
5806
5984
  }
5807
5985
  function onTransitionedOut(duration, callback) {
5808
5986
  onTransitionEnd(duration, function() {
@@ -6697,18 +6875,18 @@ Expression: "${expression}"
6697
6875
  clientY
6698
6876
  };
6699
6877
  }
6700
- function addMouseCoordsListener(doc) {
6701
- doc.addEventListener("mousemove", storeMouseCoords);
6878
+ function addMouseCoordsListener(doc2) {
6879
+ doc2.addEventListener("mousemove", storeMouseCoords);
6702
6880
  }
6703
- function removeMouseCoordsListener(doc) {
6704
- doc.removeEventListener("mousemove", storeMouseCoords);
6881
+ function removeMouseCoordsListener(doc2) {
6882
+ doc2.removeEventListener("mousemove", storeMouseCoords);
6705
6883
  }
6706
6884
  var followCursor2 = {
6707
6885
  name: "followCursor",
6708
6886
  defaultValue: false,
6709
6887
  fn: function fn(instance) {
6710
6888
  var reference = instance.reference;
6711
- var doc = getOwnerDocument(instance.props.triggerTarget || reference);
6889
+ var doc2 = getOwnerDocument(instance.props.triggerTarget || reference);
6712
6890
  var isInternalUpdate = false;
6713
6891
  var wasFocusEvent = false;
6714
6892
  var isUnmounted = true;
@@ -6717,10 +6895,10 @@ Expression: "${expression}"
6717
6895
  return instance.props.followCursor === "initial" && instance.state.isVisible;
6718
6896
  }
6719
6897
  function addListener() {
6720
- doc.addEventListener("mousemove", onMouseMove);
6898
+ doc2.addEventListener("mousemove", onMouseMove);
6721
6899
  }
6722
6900
  function removeListener() {
6723
- doc.removeEventListener("mousemove", onMouseMove);
6901
+ doc2.removeEventListener("mousemove", onMouseMove);
6724
6902
  }
6725
6903
  function unsetGetReferenceClientRect() {
6726
6904
  isInternalUpdate = true;
@@ -6766,9 +6944,9 @@ Expression: "${expression}"
6766
6944
  if (instance.props.followCursor) {
6767
6945
  activeInstances.push({
6768
6946
  instance,
6769
- doc
6947
+ doc: doc2
6770
6948
  });
6771
- addMouseCoordsListener(doc);
6949
+ addMouseCoordsListener(doc2);
6772
6950
  }
6773
6951
  }
6774
6952
  function destroy3() {
@@ -6776,9 +6954,9 @@ Expression: "${expression}"
6776
6954
  return data2.instance !== instance;
6777
6955
  });
6778
6956
  if (activeInstances.filter(function(data2) {
6779
- return data2.doc === doc;
6957
+ return data2.doc === doc2;
6780
6958
  }).length === 0) {
6781
- removeMouseCoordsListener(doc);
6959
+ removeMouseCoordsListener(doc2);
6782
6960
  }
6783
6961
  }
6784
6962
  return {
@@ -7098,6 +7276,32 @@ Expression: "${expression}"
7098
7276
  });
7099
7277
  }
7100
7278
 
7279
+ // app/assets/lookbook/js/utils/screen.js
7280
+ function screen_default(Alpine3) {
7281
+ let data2 = Alpine3.reactive({ screensize: window.innerWidth });
7282
+ const defaultBreakpoints = {
7283
+ xs: 0,
7284
+ sm: 640,
7285
+ md: 768,
7286
+ lg: 1024,
7287
+ xl: 1280,
7288
+ "2xl": 1536
7289
+ };
7290
+ const breakpoints = window.AlpineMagicHelpersConfig && window.AlpineMagicHelpersConfig.breakpoints ? window.AlpineMagicHelpersConfig.breakpoints : defaultBreakpoints;
7291
+ window.addEventListener("resize", () => {
7292
+ data2.screensize = window.innerWidth;
7293
+ });
7294
+ Alpine3.magic("screen", () => (breakpoint) => {
7295
+ let width = data2.screensize;
7296
+ if (Number.isInteger(breakpoint))
7297
+ return breakpoint <= width;
7298
+ if (breakpoints[breakpoint] === void 0) {
7299
+ throw Error("Undefined $screen property: " + breakpoint + ". Supported properties: " + Object.keys(breakpoints).join(", "));
7300
+ }
7301
+ return breakpoints[breakpoint] <= width;
7302
+ });
7303
+ }
7304
+
7101
7305
  // node_modules/split-grid/dist/split-grid.mjs
7102
7306
  var numeric = function(value, unit) {
7103
7307
  return Number(value.slice(0, -1 * unit.length));
@@ -7575,9 +7779,9 @@ Expression: "${expression}"
7575
7779
  }
7576
7780
  var split_grid_default = index;
7577
7781
 
7578
- // app/assets/lookbook/js/split.js
7782
+ // app/assets/lookbook/js/utils/split.js
7579
7783
  function split_default(props) {
7580
- const app = Alpine.store("app");
7784
+ const page2 = Alpine.store("page");
7581
7785
  return {
7582
7786
  init() {
7583
7787
  split_grid_default({
@@ -7588,23 +7792,562 @@ Expression: "${expression}"
7588
7792
  writeStyle() {
7589
7793
  },
7590
7794
  onDrag(dir, track, style) {
7591
- splits = style.split(" ").map((num) => parseInt(num));
7795
+ const splits = style.split(" ").map((num) => parseInt(num));
7592
7796
  props.onDrag(splits);
7593
7797
  },
7594
7798
  onDragStart() {
7595
- app.reflowing = true;
7799
+ page2.reflowing = true;
7596
7800
  },
7597
7801
  onDragEnd() {
7598
- app.reflowing = false;
7802
+ page2.reflowing = false;
7599
7803
  }
7600
7804
  });
7601
7805
  }
7602
7806
  };
7603
7807
  }
7604
7808
 
7605
- // app/assets/lookbook/js/preview.js
7809
+ // node_modules/morphdom/dist/morphdom-esm.js
7810
+ var DOCUMENT_FRAGMENT_NODE = 11;
7811
+ function morphAttrs(fromNode, toNode) {
7812
+ var toNodeAttrs = toNode.attributes;
7813
+ var attr;
7814
+ var attrName;
7815
+ var attrNamespaceURI;
7816
+ var attrValue;
7817
+ var fromValue;
7818
+ if (toNode.nodeType === DOCUMENT_FRAGMENT_NODE || fromNode.nodeType === DOCUMENT_FRAGMENT_NODE) {
7819
+ return;
7820
+ }
7821
+ for (var i = toNodeAttrs.length - 1; i >= 0; i--) {
7822
+ attr = toNodeAttrs[i];
7823
+ attrName = attr.name;
7824
+ attrNamespaceURI = attr.namespaceURI;
7825
+ attrValue = attr.value;
7826
+ if (attrNamespaceURI) {
7827
+ attrName = attr.localName || attrName;
7828
+ fromValue = fromNode.getAttributeNS(attrNamespaceURI, attrName);
7829
+ if (fromValue !== attrValue) {
7830
+ if (attr.prefix === "xmlns") {
7831
+ attrName = attr.name;
7832
+ }
7833
+ fromNode.setAttributeNS(attrNamespaceURI, attrName, attrValue);
7834
+ }
7835
+ } else {
7836
+ fromValue = fromNode.getAttribute(attrName);
7837
+ if (fromValue !== attrValue) {
7838
+ fromNode.setAttribute(attrName, attrValue);
7839
+ }
7840
+ }
7841
+ }
7842
+ var fromNodeAttrs = fromNode.attributes;
7843
+ for (var d = fromNodeAttrs.length - 1; d >= 0; d--) {
7844
+ attr = fromNodeAttrs[d];
7845
+ attrName = attr.name;
7846
+ attrNamespaceURI = attr.namespaceURI;
7847
+ if (attrNamespaceURI) {
7848
+ attrName = attr.localName || attrName;
7849
+ if (!toNode.hasAttributeNS(attrNamespaceURI, attrName)) {
7850
+ fromNode.removeAttributeNS(attrNamespaceURI, attrName);
7851
+ }
7852
+ } else {
7853
+ if (!toNode.hasAttribute(attrName)) {
7854
+ fromNode.removeAttribute(attrName);
7855
+ }
7856
+ }
7857
+ }
7858
+ }
7859
+ var range;
7860
+ var NS_XHTML = "http://www.w3.org/1999/xhtml";
7861
+ var doc = typeof document === "undefined" ? void 0 : document;
7862
+ var HAS_TEMPLATE_SUPPORT = !!doc && "content" in doc.createElement("template");
7863
+ var HAS_RANGE_SUPPORT = !!doc && doc.createRange && "createContextualFragment" in doc.createRange();
7864
+ function createFragmentFromTemplate(str) {
7865
+ var template = doc.createElement("template");
7866
+ template.innerHTML = str;
7867
+ return template.content.childNodes[0];
7868
+ }
7869
+ function createFragmentFromRange(str) {
7870
+ if (!range) {
7871
+ range = doc.createRange();
7872
+ range.selectNode(doc.body);
7873
+ }
7874
+ var fragment = range.createContextualFragment(str);
7875
+ return fragment.childNodes[0];
7876
+ }
7877
+ function createFragmentFromWrap(str) {
7878
+ var fragment = doc.createElement("body");
7879
+ fragment.innerHTML = str;
7880
+ return fragment.childNodes[0];
7881
+ }
7882
+ function toElement(str) {
7883
+ str = str.trim();
7884
+ if (HAS_TEMPLATE_SUPPORT) {
7885
+ return createFragmentFromTemplate(str);
7886
+ } else if (HAS_RANGE_SUPPORT) {
7887
+ return createFragmentFromRange(str);
7888
+ }
7889
+ return createFragmentFromWrap(str);
7890
+ }
7891
+ function compareNodeNames(fromEl, toEl) {
7892
+ var fromNodeName = fromEl.nodeName;
7893
+ var toNodeName = toEl.nodeName;
7894
+ var fromCodeStart, toCodeStart;
7895
+ if (fromNodeName === toNodeName) {
7896
+ return true;
7897
+ }
7898
+ fromCodeStart = fromNodeName.charCodeAt(0);
7899
+ toCodeStart = toNodeName.charCodeAt(0);
7900
+ if (fromCodeStart <= 90 && toCodeStart >= 97) {
7901
+ return fromNodeName === toNodeName.toUpperCase();
7902
+ } else if (toCodeStart <= 90 && fromCodeStart >= 97) {
7903
+ return toNodeName === fromNodeName.toUpperCase();
7904
+ } else {
7905
+ return false;
7906
+ }
7907
+ }
7908
+ function createElementNS(name, namespaceURI) {
7909
+ return !namespaceURI || namespaceURI === NS_XHTML ? doc.createElement(name) : doc.createElementNS(namespaceURI, name);
7910
+ }
7911
+ function moveChildren(fromEl, toEl) {
7912
+ var curChild = fromEl.firstChild;
7913
+ while (curChild) {
7914
+ var nextChild = curChild.nextSibling;
7915
+ toEl.appendChild(curChild);
7916
+ curChild = nextChild;
7917
+ }
7918
+ return toEl;
7919
+ }
7920
+ function syncBooleanAttrProp(fromEl, toEl, name) {
7921
+ if (fromEl[name] !== toEl[name]) {
7922
+ fromEl[name] = toEl[name];
7923
+ if (fromEl[name]) {
7924
+ fromEl.setAttribute(name, "");
7925
+ } else {
7926
+ fromEl.removeAttribute(name);
7927
+ }
7928
+ }
7929
+ }
7930
+ var specialElHandlers = {
7931
+ OPTION: function(fromEl, toEl) {
7932
+ var parentNode = fromEl.parentNode;
7933
+ if (parentNode) {
7934
+ var parentName = parentNode.nodeName.toUpperCase();
7935
+ if (parentName === "OPTGROUP") {
7936
+ parentNode = parentNode.parentNode;
7937
+ parentName = parentNode && parentNode.nodeName.toUpperCase();
7938
+ }
7939
+ if (parentName === "SELECT" && !parentNode.hasAttribute("multiple")) {
7940
+ if (fromEl.hasAttribute("selected") && !toEl.selected) {
7941
+ fromEl.setAttribute("selected", "selected");
7942
+ fromEl.removeAttribute("selected");
7943
+ }
7944
+ parentNode.selectedIndex = -1;
7945
+ }
7946
+ }
7947
+ syncBooleanAttrProp(fromEl, toEl, "selected");
7948
+ },
7949
+ INPUT: function(fromEl, toEl) {
7950
+ syncBooleanAttrProp(fromEl, toEl, "checked");
7951
+ syncBooleanAttrProp(fromEl, toEl, "disabled");
7952
+ if (fromEl.value !== toEl.value) {
7953
+ fromEl.value = toEl.value;
7954
+ }
7955
+ if (!toEl.hasAttribute("value")) {
7956
+ fromEl.removeAttribute("value");
7957
+ }
7958
+ },
7959
+ TEXTAREA: function(fromEl, toEl) {
7960
+ var newValue = toEl.value;
7961
+ if (fromEl.value !== newValue) {
7962
+ fromEl.value = newValue;
7963
+ }
7964
+ var firstChild = fromEl.firstChild;
7965
+ if (firstChild) {
7966
+ var oldValue = firstChild.nodeValue;
7967
+ if (oldValue == newValue || !newValue && oldValue == fromEl.placeholder) {
7968
+ return;
7969
+ }
7970
+ firstChild.nodeValue = newValue;
7971
+ }
7972
+ },
7973
+ SELECT: function(fromEl, toEl) {
7974
+ if (!toEl.hasAttribute("multiple")) {
7975
+ var selectedIndex = -1;
7976
+ var i = 0;
7977
+ var curChild = fromEl.firstChild;
7978
+ var optgroup;
7979
+ var nodeName;
7980
+ while (curChild) {
7981
+ nodeName = curChild.nodeName && curChild.nodeName.toUpperCase();
7982
+ if (nodeName === "OPTGROUP") {
7983
+ optgroup = curChild;
7984
+ curChild = optgroup.firstChild;
7985
+ } else {
7986
+ if (nodeName === "OPTION") {
7987
+ if (curChild.hasAttribute("selected")) {
7988
+ selectedIndex = i;
7989
+ break;
7990
+ }
7991
+ i++;
7992
+ }
7993
+ curChild = curChild.nextSibling;
7994
+ if (!curChild && optgroup) {
7995
+ curChild = optgroup.nextSibling;
7996
+ optgroup = null;
7997
+ }
7998
+ }
7999
+ }
8000
+ fromEl.selectedIndex = selectedIndex;
8001
+ }
8002
+ }
8003
+ };
8004
+ var ELEMENT_NODE = 1;
8005
+ var DOCUMENT_FRAGMENT_NODE$1 = 11;
8006
+ var TEXT_NODE = 3;
8007
+ var COMMENT_NODE = 8;
8008
+ function noop() {
8009
+ }
8010
+ function defaultGetNodeKey(node) {
8011
+ if (node) {
8012
+ return node.getAttribute && node.getAttribute("id") || node.id;
8013
+ }
8014
+ }
8015
+ function morphdomFactory(morphAttrs2) {
8016
+ return function morphdom2(fromNode, toNode, options) {
8017
+ if (!options) {
8018
+ options = {};
8019
+ }
8020
+ if (typeof toNode === "string") {
8021
+ if (fromNode.nodeName === "#document" || fromNode.nodeName === "HTML" || fromNode.nodeName === "BODY") {
8022
+ var toNodeHtml = toNode;
8023
+ toNode = doc.createElement("html");
8024
+ toNode.innerHTML = toNodeHtml;
8025
+ } else {
8026
+ toNode = toElement(toNode);
8027
+ }
8028
+ }
8029
+ var getNodeKey = options.getNodeKey || defaultGetNodeKey;
8030
+ var onBeforeNodeAdded = options.onBeforeNodeAdded || noop;
8031
+ var onNodeAdded = options.onNodeAdded || noop;
8032
+ var onBeforeElUpdated = options.onBeforeElUpdated || noop;
8033
+ var onElUpdated = options.onElUpdated || noop;
8034
+ var onBeforeNodeDiscarded = options.onBeforeNodeDiscarded || noop;
8035
+ var onNodeDiscarded = options.onNodeDiscarded || noop;
8036
+ var onBeforeElChildrenUpdated = options.onBeforeElChildrenUpdated || noop;
8037
+ var childrenOnly = options.childrenOnly === true;
8038
+ var fromNodesLookup = Object.create(null);
8039
+ var keyedRemovalList = [];
8040
+ function addKeyedRemoval(key) {
8041
+ keyedRemovalList.push(key);
8042
+ }
8043
+ function walkDiscardedChildNodes(node, skipKeyedNodes) {
8044
+ if (node.nodeType === ELEMENT_NODE) {
8045
+ var curChild = node.firstChild;
8046
+ while (curChild) {
8047
+ var key = void 0;
8048
+ if (skipKeyedNodes && (key = getNodeKey(curChild))) {
8049
+ addKeyedRemoval(key);
8050
+ } else {
8051
+ onNodeDiscarded(curChild);
8052
+ if (curChild.firstChild) {
8053
+ walkDiscardedChildNodes(curChild, skipKeyedNodes);
8054
+ }
8055
+ }
8056
+ curChild = curChild.nextSibling;
8057
+ }
8058
+ }
8059
+ }
8060
+ function removeNode(node, parentNode, skipKeyedNodes) {
8061
+ if (onBeforeNodeDiscarded(node) === false) {
8062
+ return;
8063
+ }
8064
+ if (parentNode) {
8065
+ parentNode.removeChild(node);
8066
+ }
8067
+ onNodeDiscarded(node);
8068
+ walkDiscardedChildNodes(node, skipKeyedNodes);
8069
+ }
8070
+ function indexTree(node) {
8071
+ if (node.nodeType === ELEMENT_NODE || node.nodeType === DOCUMENT_FRAGMENT_NODE$1) {
8072
+ var curChild = node.firstChild;
8073
+ while (curChild) {
8074
+ var key = getNodeKey(curChild);
8075
+ if (key) {
8076
+ fromNodesLookup[key] = curChild;
8077
+ }
8078
+ indexTree(curChild);
8079
+ curChild = curChild.nextSibling;
8080
+ }
8081
+ }
8082
+ }
8083
+ indexTree(fromNode);
8084
+ function handleNodeAdded(el) {
8085
+ onNodeAdded(el);
8086
+ var curChild = el.firstChild;
8087
+ while (curChild) {
8088
+ var nextSibling = curChild.nextSibling;
8089
+ var key = getNodeKey(curChild);
8090
+ if (key) {
8091
+ var unmatchedFromEl = fromNodesLookup[key];
8092
+ if (unmatchedFromEl && compareNodeNames(curChild, unmatchedFromEl)) {
8093
+ curChild.parentNode.replaceChild(unmatchedFromEl, curChild);
8094
+ morphEl(unmatchedFromEl, curChild);
8095
+ } else {
8096
+ handleNodeAdded(curChild);
8097
+ }
8098
+ } else {
8099
+ handleNodeAdded(curChild);
8100
+ }
8101
+ curChild = nextSibling;
8102
+ }
8103
+ }
8104
+ function cleanupFromEl(fromEl, curFromNodeChild, curFromNodeKey) {
8105
+ while (curFromNodeChild) {
8106
+ var fromNextSibling = curFromNodeChild.nextSibling;
8107
+ if (curFromNodeKey = getNodeKey(curFromNodeChild)) {
8108
+ addKeyedRemoval(curFromNodeKey);
8109
+ } else {
8110
+ removeNode(curFromNodeChild, fromEl, true);
8111
+ }
8112
+ curFromNodeChild = fromNextSibling;
8113
+ }
8114
+ }
8115
+ function morphEl(fromEl, toEl, childrenOnly2) {
8116
+ var toElKey = getNodeKey(toEl);
8117
+ if (toElKey) {
8118
+ delete fromNodesLookup[toElKey];
8119
+ }
8120
+ if (!childrenOnly2) {
8121
+ if (onBeforeElUpdated(fromEl, toEl) === false) {
8122
+ return;
8123
+ }
8124
+ morphAttrs2(fromEl, toEl);
8125
+ onElUpdated(fromEl);
8126
+ if (onBeforeElChildrenUpdated(fromEl, toEl) === false) {
8127
+ return;
8128
+ }
8129
+ }
8130
+ if (fromEl.nodeName !== "TEXTAREA") {
8131
+ morphChildren(fromEl, toEl);
8132
+ } else {
8133
+ specialElHandlers.TEXTAREA(fromEl, toEl);
8134
+ }
8135
+ }
8136
+ function morphChildren(fromEl, toEl) {
8137
+ var curToNodeChild = toEl.firstChild;
8138
+ var curFromNodeChild = fromEl.firstChild;
8139
+ var curToNodeKey;
8140
+ var curFromNodeKey;
8141
+ var fromNextSibling;
8142
+ var toNextSibling;
8143
+ var matchingFromEl;
8144
+ outer:
8145
+ while (curToNodeChild) {
8146
+ toNextSibling = curToNodeChild.nextSibling;
8147
+ curToNodeKey = getNodeKey(curToNodeChild);
8148
+ while (curFromNodeChild) {
8149
+ fromNextSibling = curFromNodeChild.nextSibling;
8150
+ if (curToNodeChild.isSameNode && curToNodeChild.isSameNode(curFromNodeChild)) {
8151
+ curToNodeChild = toNextSibling;
8152
+ curFromNodeChild = fromNextSibling;
8153
+ continue outer;
8154
+ }
8155
+ curFromNodeKey = getNodeKey(curFromNodeChild);
8156
+ var curFromNodeType = curFromNodeChild.nodeType;
8157
+ var isCompatible = void 0;
8158
+ if (curFromNodeType === curToNodeChild.nodeType) {
8159
+ if (curFromNodeType === ELEMENT_NODE) {
8160
+ if (curToNodeKey) {
8161
+ if (curToNodeKey !== curFromNodeKey) {
8162
+ if (matchingFromEl = fromNodesLookup[curToNodeKey]) {
8163
+ if (fromNextSibling === matchingFromEl) {
8164
+ isCompatible = false;
8165
+ } else {
8166
+ fromEl.insertBefore(matchingFromEl, curFromNodeChild);
8167
+ if (curFromNodeKey) {
8168
+ addKeyedRemoval(curFromNodeKey);
8169
+ } else {
8170
+ removeNode(curFromNodeChild, fromEl, true);
8171
+ }
8172
+ curFromNodeChild = matchingFromEl;
8173
+ }
8174
+ } else {
8175
+ isCompatible = false;
8176
+ }
8177
+ }
8178
+ } else if (curFromNodeKey) {
8179
+ isCompatible = false;
8180
+ }
8181
+ isCompatible = isCompatible !== false && compareNodeNames(curFromNodeChild, curToNodeChild);
8182
+ if (isCompatible) {
8183
+ morphEl(curFromNodeChild, curToNodeChild);
8184
+ }
8185
+ } else if (curFromNodeType === TEXT_NODE || curFromNodeType == COMMENT_NODE) {
8186
+ isCompatible = true;
8187
+ if (curFromNodeChild.nodeValue !== curToNodeChild.nodeValue) {
8188
+ curFromNodeChild.nodeValue = curToNodeChild.nodeValue;
8189
+ }
8190
+ }
8191
+ }
8192
+ if (isCompatible) {
8193
+ curToNodeChild = toNextSibling;
8194
+ curFromNodeChild = fromNextSibling;
8195
+ continue outer;
8196
+ }
8197
+ if (curFromNodeKey) {
8198
+ addKeyedRemoval(curFromNodeKey);
8199
+ } else {
8200
+ removeNode(curFromNodeChild, fromEl, true);
8201
+ }
8202
+ curFromNodeChild = fromNextSibling;
8203
+ }
8204
+ if (curToNodeKey && (matchingFromEl = fromNodesLookup[curToNodeKey]) && compareNodeNames(matchingFromEl, curToNodeChild)) {
8205
+ fromEl.appendChild(matchingFromEl);
8206
+ morphEl(matchingFromEl, curToNodeChild);
8207
+ } else {
8208
+ var onBeforeNodeAddedResult = onBeforeNodeAdded(curToNodeChild);
8209
+ if (onBeforeNodeAddedResult !== false) {
8210
+ if (onBeforeNodeAddedResult) {
8211
+ curToNodeChild = onBeforeNodeAddedResult;
8212
+ }
8213
+ if (curToNodeChild.actualize) {
8214
+ curToNodeChild = curToNodeChild.actualize(fromEl.ownerDocument || doc);
8215
+ }
8216
+ fromEl.appendChild(curToNodeChild);
8217
+ handleNodeAdded(curToNodeChild);
8218
+ }
8219
+ }
8220
+ curToNodeChild = toNextSibling;
8221
+ curFromNodeChild = fromNextSibling;
8222
+ }
8223
+ cleanupFromEl(fromEl, curFromNodeChild, curFromNodeKey);
8224
+ var specialElHandler = specialElHandlers[fromEl.nodeName];
8225
+ if (specialElHandler) {
8226
+ specialElHandler(fromEl, toEl);
8227
+ }
8228
+ }
8229
+ var morphedNode = fromNode;
8230
+ var morphedNodeType = morphedNode.nodeType;
8231
+ var toNodeType = toNode.nodeType;
8232
+ if (!childrenOnly) {
8233
+ if (morphedNodeType === ELEMENT_NODE) {
8234
+ if (toNodeType === ELEMENT_NODE) {
8235
+ if (!compareNodeNames(fromNode, toNode)) {
8236
+ onNodeDiscarded(fromNode);
8237
+ morphedNode = moveChildren(fromNode, createElementNS(toNode.nodeName, toNode.namespaceURI));
8238
+ }
8239
+ } else {
8240
+ morphedNode = toNode;
8241
+ }
8242
+ } else if (morphedNodeType === TEXT_NODE || morphedNodeType === COMMENT_NODE) {
8243
+ if (toNodeType === morphedNodeType) {
8244
+ if (morphedNode.nodeValue !== toNode.nodeValue) {
8245
+ morphedNode.nodeValue = toNode.nodeValue;
8246
+ }
8247
+ return morphedNode;
8248
+ } else {
8249
+ morphedNode = toNode;
8250
+ }
8251
+ }
8252
+ }
8253
+ if (morphedNode === toNode) {
8254
+ onNodeDiscarded(fromNode);
8255
+ } else {
8256
+ if (toNode.isSameNode && toNode.isSameNode(morphedNode)) {
8257
+ return;
8258
+ }
8259
+ morphEl(morphedNode, toNode, childrenOnly);
8260
+ if (keyedRemovalList) {
8261
+ for (var i = 0, len = keyedRemovalList.length; i < len; i++) {
8262
+ var elToRemove = fromNodesLookup[keyedRemovalList[i]];
8263
+ if (elToRemove) {
8264
+ removeNode(elToRemove, elToRemove.parentNode, false);
8265
+ }
8266
+ }
8267
+ }
8268
+ }
8269
+ if (!childrenOnly && morphedNode !== fromNode && fromNode.parentNode) {
8270
+ if (morphedNode.actualize) {
8271
+ morphedNode = morphedNode.actualize(fromNode.ownerDocument || doc);
8272
+ }
8273
+ fromNode.parentNode.replaceChild(morphedNode, fromNode);
8274
+ }
8275
+ return morphedNode;
8276
+ };
8277
+ }
8278
+ var morphdom = morphdomFactory(morphAttrs);
8279
+ var morphdom_esm_default = morphdom;
8280
+
8281
+ // app/assets/lookbook/js/utils/morph.js
8282
+ function morph_default(from, to, opts = {}) {
8283
+ morphdom_esm_default(from, to, __spreadValues({
8284
+ onBeforeElUpdated: function(fromEl, toEl) {
8285
+ if (fromEl._x_dataStack) {
8286
+ Alpine.clone(fromEl, toEl);
8287
+ }
8288
+ if (fromEl.isEqualNode(toEl)) {
8289
+ return false;
8290
+ }
8291
+ return true;
8292
+ }
8293
+ }, opts));
8294
+ }
8295
+
8296
+ // app/assets/lookbook/js/page.js
8297
+ function page() {
8298
+ const store2 = Alpine.store("page");
8299
+ return {
8300
+ ready: false,
8301
+ sidebarOpenMobile: false,
8302
+ init() {
8303
+ this.$nextTick(() => this.ready = true);
8304
+ },
8305
+ splitProps: {
8306
+ minSize: 200,
8307
+ onDrag(splits) {
8308
+ Alpine.store("nav").width = Math.min(splits[0], 500);
8309
+ }
8310
+ },
8311
+ fetchHTML() {
8312
+ return __async(this, null, function* () {
8313
+ const response = yield fetch(window.document.location);
8314
+ if (!response.ok)
8315
+ return window.location.reload();
8316
+ const html = yield response.text();
8317
+ store2.doc = new DOMParser().parseFromString(html, "text/html");
8318
+ return store2.doc;
8319
+ });
8320
+ },
8321
+ updateTitle() {
8322
+ document.title = store2.doc.title;
8323
+ },
8324
+ render() {
8325
+ if (this.ready) {
8326
+ morph_default(this.$el, store2.doc.getElementById(this.$el.id));
8327
+ }
8328
+ }
8329
+ };
8330
+ }
8331
+
8332
+ // app/assets/lookbook/js/workbench.js
8333
+ function workbench() {
8334
+ const inspector2 = Alpine.store("inspector");
8335
+ return {
8336
+ previewViewportHeight: 0,
8337
+ previewViewportWidth: 0,
8338
+ splitProps: {
8339
+ direction: "vertical",
8340
+ minSize: 200,
8341
+ onDrag(splits) {
8342
+ inspector2.height = splits[2];
8343
+ }
8344
+ }
8345
+ };
8346
+ }
8347
+
8348
+ // app/assets/lookbook/js/workbench/preview.js
7606
8349
  function preview() {
7607
- const app = Alpine.store("app");
8350
+ const app = Alpine.store("page");
7608
8351
  const preview2 = Alpine.store("preview");
7609
8352
  return {
7610
8353
  init() {
@@ -7626,27 +8369,126 @@ Expression: "${expression}"
7626
8369
  window.addEventListener("pointermove", this.onResize);
7627
8370
  window.addEventListener("pointerup", this.onResizeEnd);
7628
8371
  },
7629
- onResizeEnd(e) {
8372
+ onResizeEnd() {
7630
8373
  window.removeEventListener("pointermove", this.onResize);
7631
8374
  window.removeEventListener("pointerup", this.onResizeEnd);
7632
8375
  app.reflowing = false;
7633
8376
  },
7634
- handle: {
7635
- ["@pointerdown"]: "onResizeStart",
7636
- ["@dblclick"]() {
7637
- if (preview2.width === "100%" && preview2.lastWidth) {
7638
- preview2.width = preview2.lastWidth;
7639
- } else {
7640
- preview2.lastWidth = preview2.width;
7641
- preview2.width = "100%";
8377
+ toggleFullWidth() {
8378
+ if (preview2.width === "100%" && preview2.lastWidth) {
8379
+ preview2.width = preview2.lastWidth;
8380
+ } else {
8381
+ preview2.lastWidth = preview2.width;
8382
+ preview2.width = "100%";
8383
+ }
8384
+ }
8385
+ };
8386
+ }
8387
+
8388
+ // app/assets/lookbook/js/workbench/inspector.js
8389
+ function inspector() {
8390
+ const inspector2 = Alpine.store("inspector");
8391
+ return {
8392
+ switchTo(id) {
8393
+ inspector2.active = id;
8394
+ },
8395
+ active(id) {
8396
+ return inspector2.active === id;
8397
+ }
8398
+ };
8399
+ }
8400
+
8401
+ // app/assets/lookbook/js/nav.js
8402
+ function nav_default() {
8403
+ return {
8404
+ clearFilter() {
8405
+ this.$store.nav.filter = "";
8406
+ },
8407
+ init() {
8408
+ this.$watch("$store.nav.filter", (value) => {
8409
+ const nav = this.$store.nav;
8410
+ nav.filterText = value.replace(/\s/g, "").toLowerCase();
8411
+ nav.filtering = nav.filterText.length > 0;
8412
+ });
8413
+ },
8414
+ updateNav(event) {
8415
+ const nav = document.getElementById("nav");
8416
+ nav.style.height = `${this.$refs.shim.offsetHeight}px`;
8417
+ morph_default(nav, event.detail.doc.getElementById("nav"));
8418
+ Promise.resolve().then(() => {
8419
+ this.$refs.shim.style.height = "auto";
8420
+ this.$dispatch("nav:updated");
8421
+ });
8422
+ },
8423
+ navigate($event) {
8424
+ history.pushState({}, null, $event.currentTarget.href);
8425
+ this.$dispatch("popstate");
8426
+ },
8427
+ focusFilter() {
8428
+ this.currentFocus = this.$refs.filter;
8429
+ setTimeout(() => this.$refs.filter.focus(), 0);
8430
+ },
8431
+ unfocusFilter() {
8432
+ this.$refs.filter.blur();
8433
+ }
8434
+ };
8435
+ }
8436
+
8437
+ // app/assets/lookbook/js/nav/node.js
8438
+ function navNode() {
8439
+ return {
8440
+ id: null,
8441
+ hidden: true,
8442
+ children: [],
8443
+ init() {
8444
+ this.id = this.$el.id;
8445
+ },
8446
+ open() {
8447
+ return this.$store.nav.open[this.id];
8448
+ },
8449
+ getChildren() {
8450
+ return this.$refs.items ? Array.from(this.$refs.items.querySelectorAll(":scope > li")) : [];
8451
+ },
8452
+ filter() {
8453
+ this.hidden = true;
8454
+ this.getChildren().forEach((child) => {
8455
+ const data2 = child._x_dataStack[0];
8456
+ data2.filter();
8457
+ if (!data2.hidden) {
8458
+ this.hidden = false;
7642
8459
  }
8460
+ });
8461
+ },
8462
+ toggle() {
8463
+ this.$store.nav.open[this.id] = !this.$store.nav.open[this.id];
8464
+ }
8465
+ };
8466
+ }
8467
+
8468
+ // app/assets/lookbook/js/nav/leaf.js
8469
+ function navLeaf() {
8470
+ return {
8471
+ path: null,
8472
+ matchers: [],
8473
+ active: false,
8474
+ hidden: false,
8475
+ setActive() {
8476
+ this.active = this.path === window.location.pathname;
8477
+ },
8478
+ filter() {
8479
+ if (this.$store.nav.filtering) {
8480
+ const text = this.$store.nav.filterText;
8481
+ const matched = this.matchers.map((m) => m.includes(text));
8482
+ this.hidden = !matched.filter((m) => m).length;
8483
+ } else {
8484
+ this.hidden = false;
7643
8485
  }
7644
8486
  }
7645
8487
  };
7646
8488
  }
7647
8489
 
7648
- // app/assets/lookbook/js/size_observer.js
7649
- function size_observer_default() {
8490
+ // app/assets/lookbook/js/utils/size_observer.js
8491
+ function sizeObserver() {
7650
8492
  return {
7651
8493
  observedWidth: 0,
7652
8494
  observedHeight: 0,
@@ -7663,7 +8505,7 @@ Expression: "${expression}"
7663
8505
  };
7664
8506
  }
7665
8507
 
7666
- // app/assets/lookbook/js/reloader.js
8508
+ // app/assets/lookbook/js/utils/reloader.js
7667
8509
  var import_actioncable = __toModule(require_action_cable());
7668
8510
  var import_debounce = __toModule(require_debounce());
7669
8511
  function reloader_default(endpoint) {
@@ -7690,32 +8532,59 @@ Expression: "${expression}"
7690
8532
  };
7691
8533
  }
7692
8534
 
8535
+ // app/assets/lookbook/js/utils/clipboard.js
8536
+ function clipboard() {
8537
+ return {
8538
+ content: null,
8539
+ done: false,
8540
+ save() {
8541
+ this.$clipboard(this.content);
8542
+ this.done = true;
8543
+ setTimeout(() => {
8544
+ this.done = false;
8545
+ }, 1e3);
8546
+ }
8547
+ };
8548
+ }
8549
+
7693
8550
  // app/assets/lookbook/js/app.js
8551
+ window.Alpine = module_default;
7694
8552
  module_default.plugin(module_default2);
7695
8553
  module_default.plugin(module_default3);
7696
8554
  module_default.plugin(src_default4);
7697
- module_default.data("preview", preview);
7698
- module_default.data("sizeObserver", size_observer_default);
7699
- module_default.data("split", split_default);
7700
- module_default.store("app", { reflowing: false });
8555
+ module_default.plugin(screen_default);
8556
+ module_default.store("page", {
8557
+ reflowing: false,
8558
+ doc: window.document
8559
+ });
7701
8560
  module_default.persistedStore("nav", {
7702
8561
  width: 280,
7703
8562
  filter: "",
7704
- open: {},
7705
- scrollTop: 0,
7706
- shouldDisplay(previewName) {
7707
- const cleanFilter = this.filter.replace(/\s/g, "");
7708
- return cleanFilter === "" || previewName.includes(cleanFilter.toLowerCase());
7709
- }
8563
+ open: {}
7710
8564
  });
7711
- module_default.persistedStore("preview", {});
7712
8565
  module_default.persistedStore("inspector", {
7713
8566
  height: 200,
7714
8567
  active: "source"
7715
8568
  });
7716
- window.Alpine = module_default;
8569
+ module_default.persistedStore("preview", {
8570
+ width: "100%"
8571
+ });
8572
+ module_default.data("page", page);
8573
+ module_default.data("nav", nav_default);
8574
+ module_default.data("navNode", navNode);
8575
+ module_default.data("navLeaf", navLeaf);
8576
+ module_default.data("workbench", workbench);
8577
+ module_default.data("preview", preview);
8578
+ module_default.data("inspector", inspector);
8579
+ module_default.data("clipboard", clipboard);
8580
+ module_default.data("sizeObserver", sizeObserver);
8581
+ module_default.data("split", split_default);
8582
+ for (const el of document.querySelectorAll("[data-hotkey]")) {
8583
+ install(el);
8584
+ }
7717
8585
  if (window.SOCKET_PATH) {
7718
8586
  reloader_default(window.SOCKET_PATH).start();
7719
8587
  }
8588
+ window.Alpine = module_default;
7720
8589
  module_default.start();
7721
8590
  })();