@blukavantui/community 0.0.0-stage → 1.1.0

package/src/runtime/collection-layout.js

@@ -0,0 +1,269 @@
+// ../blu-grid/docs/scripts/modules/qr-encoder.js
+import { global } from "./kernel.js";
+
+// ../blu-grid/docs/scripts/modules/common.js
+import { global as global2, runtime, state, register } from "./kernel.js";
+
+// ../blu-grid/docs/scripts/modules/rich.js
+import { global as global3, runtime as runtime2, state as state2, register as register2 } from "./kernel.js";
+var shared = /* @__PURE__ */ state2("rich", () => ({ instances: /* @__PURE__ */ new Map(), serial: 0 }));
+function el(tag, cls, value) {
+  var n = document.createElement(tag);
+  if (cls) n.className = cls;
+  if (value !== void 0) n.textContent = value;
+  return n;
+}
+function attr(n, k, v) {
+  n.setAttribute(k, String(v));
+  return n;
+}
+function num(v, d, min, max) {
+  v = v === void 0 ? d : Number(v);
+  return Number.isFinite(v) ? Math.min(max, Math.max(min, v)) : d;
+}
+function choice(v, values, d) {
+  return values.indexOf(v) >= 0 ? v : d;
+}
+function report(s, e) {
+  var message = e ? e.message || String(e) : "";
+  s.error.textContent = message;
+  s.error.hidden = !message;
+  if (message && message !== s.lastError) {
+    s.lastError = message;
+    if (s.events.Error) try {
+      s.events.Error(message);
+    } catch (_) {
+    }
+  }
+}
+function slot(s, name, target) {
+  var n = s.slots[name];
+  if (n && n.parentElement !== target) target.append(n);
+  return n;
+}
+function destroy(key) {
+  var s = shared.instances.get(key);
+  if (!s || s.destroying) return;
+  s.destroying = true;
+  if (s.beforeDestroy) s.beforeDestroy();
+  s.dead = true;
+  s.cleanup.forEach(function(f) {
+    f();
+  });
+  if (s.pause) s.pause();
+  if (s.modal) runtime2.Modal.destroy(s.uid + "-modal");
+  if (s.observer) s.observer.disconnect();
+  if (s.resize) s.resize.disconnect();
+  if (s.frame) cancelAnimationFrame(s.frame);
+  Object.keys(s.slots).forEach(function(k) {
+    s.host.append(s.slots[k]);
+  });
+  s.root.remove();
+  if (s.modal) s.modal.remove();
+  if (s.host._bluRichOwner === key) delete s.host._bluRichOwner;
+  shared.instances.delete(key);
+}
+function define(kind, slug, init, update) {
+  return { sync: function(id, options, events, key) {
+    var host = document.getElementById(id);
+    if (!host) return "Component host was not found.";
+    key = key || id;
+    var s = shared.instances.get(key);
+    if (s && (s.host !== host || s.kind !== kind)) {
+      destroy(key);
+      s = null;
+    }
+    if (host._bluRichOwner && host._bluRichOwner !== key) destroy(host._bluRichOwner);
+    if (!s) {
+      s = { host, key, kind, uid: "blu-rich-" + ++shared.serial, cleanup: [], slots: {}, events: {}, options: {} };
+      Array.from(host.children).forEach(function(n) {
+        var match = n.className && String(n.className).match(/blu-common-slot--(\w+)/);
+        if (match) s.slots[match[1]] = n;
+      });
+      s.root = el("div", "blu-rich blu-" + slug);
+      s.body = el("div", "blu-rich-body");
+      s.error = attr(el("p", "blu-rich-error"), "role", "alert");
+      s.error.hidden = true;
+      s.root.append(s.body, s.error);
+      host.append(s.root);
+      shared.instances.set(key, s);
+      s.fresh = true;
+    }
+    host._bluRichOwner = key;
+    s.options = options || {};
+    s.events = events || {};
+    var preview = host.nextElementSibling;
+    if (preview && preview.classList.contains("blu-component-preview")) preview.hidden = true;
+    if (s.options.AccessibleLabel) {
+      attr(s.root, "aria-label", s.options.AccessibleLabel);
+      attr(s.root, "role", "group");
+    } else {
+      s.root.removeAttribute("aria-label");
+      s.root.removeAttribute("role");
+    }
+    try {
+      if (s.fresh) {
+        init(s);
+        s.fresh = false;
+      }
+      update(s);
+      report(s, null);
+      return "";
+    } catch (e) {
+      report(s, e);
+      return e.message || String(e);
+    }
+  }, destroy };
+}
+function contentItems(root) {
+  var result = [];
+  var only = root.children.length === 1 ? root.firstElementChild : null;
+  if (only && !only.matches(".blu-rich,[data-block],.OSBlockWidget") && (!only.id || root.hasAttribute("data-container") && root.id.endsWith("ContentArea") && only.id === root.id.slice(0, -4)) && only.children.length) {
+    only.classList.add("blu-rich-bridge");
+    root = only;
+  }
+  function visit(n) {
+    Array.from(n.children).forEach(function(c) {
+      if (c.classList.contains("list") || c.classList.contains("list-item") || c.hasAttribute("data-list") || c.hasAttribute("data-container") && c.children.length === 1 && !c.querySelector(".blu-rich")) {
+        c.classList.add("blu-rich-bridge");
+        visit(c);
+      } else if (c.classList.contains("OSBlockWidget") && c.children.length === 1 && c.firstElementChild && c.firstElementChild.hasAttribute("data-list")) {
+        c.classList.add("blu-rich-bridge");
+        visit(c);
+      } else result.push(c);
+    });
+  }
+  visit(root);
+  return result;
+}
+function observeContent(s, draw) {
+  s.content = slot(s, "content", s.body);
+  if (!s.content) throw Error("Content slot is required.");
+  s.observer = new MutationObserver(function(changes) {
+    if (changes.some(function(c) {
+      return c.type === "childList";
+    })) {
+      if (s.frame) cancelAnimationFrame(s.frame);
+      s.frame = requestAnimationFrame(draw);
+    }
+  });
+  s.observer.observe(s.content, { childList: true, subtree: true });
+  s.resize = new ResizeObserver(function() {
+    if (s.frame) cancelAnimationFrame(s.frame);
+    s.frame = requestAnimationFrame(draw);
+  });
+  s.resize.observe(s.content);
+}
+function cancelCollectionMotion(s) {
+  s.collectionAnimations.forEach(function(animation) {
+    animation.cancel();
+  });
+  s.collectionAnimations.clear();
+}
+function drawCollection(s) {
+  if (s.dead) return;
+  var o = s.options, items = contentItems(s.content), variant = choice(o.Variant, ["Grid", "Staggered", "Masonry"], "Grid");
+  (s.items || []).forEach(function(n) {
+    if (items.indexOf(n) < 0) {
+      n.classList.remove("blu-collection-layout__item");
+      n.style.gridRowEnd = "";
+      var animation = s.collectionAnimations.get(n);
+      if (animation) {
+        animation.cancel();
+        s.collectionAnimations.delete(n);
+      }
+    }
+  });
+  s.items = items;
+  var width = s.content.clientWidth, gap = num(o.Gap, 24, 0, 64), cols = Math.min(num(o.Columns, 3, 1, 6), Math.max(1, Math.floor((width + gap) / (num(o.MinItemWidth, 240, 120, 800) + gap))));
+  s.content.classList.add("blu-collection-layout__items");
+  s.content.style.setProperty("--blu-collection-columns", cols);
+  s.content.style.setProperty("--blu-collection-gap", gap + "px");
+  attr(s.root, "data-variant", variant.toLowerCase());
+  items.forEach(function(n, index) {
+    n.classList.add("blu-collection-layout__item");
+    n.style.setProperty("--blu-stagger", cols > 1 && index % cols === 1 ? "40px" : "0px");
+    n.style.gridRowEnd = "";
+  });
+  if (variant === "Masonry") {
+    s.content.style.gridAutoRows = "4px";
+    var spans = items.map(function(n) {
+      var child = n.firstElementChild || n;
+      return Math.max(1, Math.ceil((child.getBoundingClientRect().height + gap) / (4 + gap)));
+    });
+    items.forEach(function(n, index) {
+      n.style.gridRowEnd = "span " + spans[index];
+    });
+  } else s.content.style.gridAutoRows = "";
+  var previous = s.collectionPositions, next = /* @__PURE__ */ new Map(), changed = false;
+  items.forEach(function(n) {
+    var box = { x: n.offsetLeft, y: n.offsetTop, width: n.offsetWidth, height: n.offsetHeight, parent: n.offsetParent };
+    next.set(n, box);
+    var old = previous.get(n);
+    if (!old || old.x !== box.x || old.y !== box.y || old.width !== box.width || old.height !== box.height) changed = true;
+  });
+  var animate = width > 0 && variant === "Masonry" && s.collectionVariant === "Masonry" && o.AnimateResize !== false && !(s.collectionMotion && s.collectionMotion.matches);
+  if (!animate) cancelCollectionMotion(s);
+  else if (changed) {
+    var moving = /* @__PURE__ */ new Map();
+    s.collectionAnimations.forEach(function(animation, n) {
+      moving.set(n, n.getBoundingClientRect());
+    });
+    cancelCollectionMotion(s);
+    var offsets = /* @__PURE__ */ new Map();
+    moving.forEach(function(visual, n) {
+      var settled = n.getBoundingClientRect();
+      offsets.set(n, { x: visual.left - settled.left, y: visual.top - settled.top });
+    });
+    items.forEach(function(n) {
+      var old = previous.get(n), box = next.get(n), offset = offsets.get(n) || { x: 0, y: 0 };
+      if (!old || !old.width || !box.width || old.parent !== box.parent || typeof n.animate !== "function") return;
+      var x = old.x + offset.x - box.x, y = old.y + offset.y - box.y;
+      if (Math.abs(x) < 0.5 && Math.abs(y) < 0.5) return;
+      var transform = getComputedStyle(n).transform, base = transform === "none" ? "" : transform;
+      var animation = n.animate([{ transform: "translate(" + x + "px," + y + "px) " + base }, { transform: base || "none" }], { duration: 240, easing: "cubic-bezier(.2,.7,.2,1)" });
+      s.collectionAnimations.set(n, animation);
+      animation.onfinish = function() {
+        if (s.collectionAnimations.get(n) === animation) s.collectionAnimations.delete(n);
+      };
+    });
+  }
+  s.collectionPositions = width > 0 ? next : /* @__PURE__ */ new Map();
+  s.collectionVariant = variant;
+}
+function installCollectionLayout() {
+  return register2("CollectionLayout", () => define("CollectionLayout", "collection-layout", function(s) {
+    s.collectionAnimations = /* @__PURE__ */ new Map();
+    s.collectionPositions = /* @__PURE__ */ new Map();
+    s.collectionMotion = global3.matchMedia ? global3.matchMedia("(prefers-reduced-motion: reduce)") : null;
+    var motionChanged = function() {
+      if (s.collectionMotion.matches) cancelCollectionMotion(s);
+    };
+    if (s.collectionMotion) {
+      if (s.collectionMotion.addEventListener) s.collectionMotion.addEventListener("change", motionChanged);
+      else s.collectionMotion.addListener(motionChanged);
+    }
+    observeContent(s, function() {
+      drawCollection(s);
+    });
+    var loaded = function() {
+      if (s.frame) cancelAnimationFrame(s.frame);
+      s.frame = requestAnimationFrame(function() {
+        drawCollection(s);
+      });
+    };
+    s.content.addEventListener("load", loaded, true);
+    s.cleanup.push(function() {
+      cancelCollectionMotion(s);
+      s.collectionPositions.clear();
+      s.content.removeEventListener("load", loaded, true);
+      if (s.collectionMotion) {
+        if (s.collectionMotion.removeEventListener) s.collectionMotion.removeEventListener("change", motionChanged);
+        else s.collectionMotion.removeListener(motionChanged);
+      }
+    });
+  }, drawCollection));
+}
+export {
+  installCollectionLayout
+};

package/src/runtime/command-palette.d.ts

@@ -0,0 +1 @@
+export function installCommandPalette(): any;

package/src/runtime/command-palette.js

@@ -0,0 +1,302 @@
+// ../blu-grid/docs/scripts/modules/interactive.js
+import { global, runtime, state, register } from "./kernel.js";
+var shared = /* @__PURE__ */ state("interactive", () => ({ instances: /* @__PURE__ */ new Map(), nextId: 0 }));
+function el(tag, cls, text) {
+  var x = document.createElement(tag);
+  if (cls) x.className = cls;
+  if (text !== void 0) x.textContent = text;
+  return x;
+}
+function attr(x, name, value) {
+  x.setAttribute(name, String(value));
+  return x;
+}
+function clear(x) {
+  while (x.firstChild) x.removeChild(x.firstChild);
+}
+function button(text, fn, cls, disabled) {
+  var b = el("button", "blu-control " + (cls || ""), text);
+  b.type = "button";
+  b.disabled = !!disabled;
+  b.addEventListener("click", fn);
+  return b;
+}
+function input(type, value, label, fn) {
+  var x = el("input", "blu-input");
+  x.type = type;
+  x.value = value === void 0 ? "" : String(value);
+  attr(x, "aria-label", label);
+  if (fn) x.addEventListener("change", function() {
+    fn(x.value);
+  });
+  return x;
+}
+function array(s, label) {
+  var x = typeof s === "string" ? JSON.parse(s || "[]") : s;
+  if (!Array.isArray(x)) throw new Error(label + " must be a JSON array.");
+  return x;
+}
+function unique(list, label) {
+  var map = /* @__PURE__ */ new Map();
+  if (list.length > 2e3) throw new Error(label + " supports up to 2,000 local items.");
+  list.forEach(function(x) {
+    if (!x || typeof x.Key !== "string" || !x.Key.trim() || typeof x.Label !== "string" || !x.Label.trim()) throw new Error(label + ": every item needs a Key and Label.");
+    if (map.has(x.Key)) throw new Error("Duplicate key: " + x.Key);
+    map.set(x.Key, x);
+  });
+  return map;
+}
+function emit(s, name) {
+  if (s.disposed || !s.events[name]) return;
+  var args = Array.prototype.slice.call(arguments, 2);
+  try {
+    Promise.resolve(s.events[name].apply(null, args)).catch(function(e) {
+      if (name !== "Error") emit(s, "Error", e.message || String(e));
+    });
+  } catch (e) {
+    if (name !== "Error") emit(s, "Error", e.message || String(e));
+  }
+}
+function error(s, message) {
+  s.error.textContent = message;
+  s.error.hidden = !message;
+  if (message) emit(s, "Error", message);
+}
+function shell(s, cls) {
+  s.root = el("div", cls);
+  s.error = attr(el("div", "blu-component-error"), "role", "alert");
+  s.error.hidden = true;
+  clear(s.host);
+  s.host.appendChild(s.root);
+  s.host.appendChild(s.error);
+}
+function listen(s, target, name, fn, capture) {
+  target.addEventListener(name, fn, capture);
+  s.cleanup.push(function() {
+    target.removeEventListener(name, fn, capture);
+  });
+}
+function begin(hostId, kind, options, events, ownerKey) {
+  var mapKey = ownerKey || hostId;
+  var host = document.getElementById(hostId);
+  if (!host) throw new Error(kind + " host was not found.");
+  var old = shared.instances.get(mapKey);
+  if (old && (old.kind !== kind || old.host !== host)) destroy(mapKey);
+  var s = shared.instances.get(mapKey);
+  if (!s) {
+    s = { host, id: hostId, key: mapKey, uid: "blu-interactive-" + ++shared.nextId, kind, cleanup: [], options: {}, events: events || {}, disposed: false };
+    shared.instances.set(mapKey, s);
+  }
+  host._bluOwnerKey = mapKey;
+  s.events = events || s.events;
+  return s;
+}
+function destroy(hostId) {
+  var s = shared.instances.get(hostId);
+  if (!s) return;
+  s.disposed = true;
+  if (s.dispose) s.dispose();
+  s.cleanup.forEach(function(f) {
+    f();
+  });
+  if (s.host._bluOwnerKey === s.key) {
+    clear(s.host);
+    delete s.host._bluOwnerKey;
+  }
+  shared.instances.delete(hostId);
+}
+function api(kind, update) {
+  return Object.freeze({ sync: function(id, options, events, ownerKey) {
+    var mapKey = ownerKey || id;
+    var s = begin(id, kind, options, events, ownerKey);
+    try {
+      update(s, options);
+      return "";
+    } catch (e) {
+      destroy(mapKey);
+      s = begin(id, kind, options, events, ownerKey);
+      shell(s, "blu-interactive");
+      error(s, e.message);
+      return e.message;
+    }
+  }, destroy: function(key) {
+    var s = shared.instances.get(key);
+    if (s && s.kind === kind) destroy(key);
+  } });
+}
+function paletteOpen(s, open) {
+  if (s.options.IsDisabled) open = false;
+  if (open === s.open) return;
+  s.open = open;
+  s.lastOpen = open;
+  if (open) {
+    s.returnFocus = document.activeElement;
+    s.dialog.showModal();
+    s.search.value = "";
+    renderCommands(s);
+    s.search.focus();
+  } else {
+    s.dialog.close();
+    if (s.returnFocus && s.returnFocus.isConnected) s.returnFocus.focus();
+  }
+  emit(s, "OpenChanged", open);
+}
+function chooseCommand(s, item) {
+  if (!item || item.IsDisabled || s.options.IsDisabled) return;
+  paletteOpen(s, false);
+  emit(s, "Command", item.Key);
+}
+function renderCommands(s) {
+  var q = s.search.value.trim().toLocaleLowerCase();
+  s.results = s.items.filter(function(x) {
+    return (x.Label + " " + (x.Description || "") + " " + (x.Keywords || "") + " " + (x.Group || "")).toLocaleLowerCase().indexOf(q) >= 0;
+  }).slice(0, 100);
+  clear(s.list);
+  var group = "", enabled = [];
+  s.results.forEach(function(x, i) {
+    if (x.Group && x.Group !== group) {
+      group = x.Group;
+      var heading = el("li", "blu-command__group", group);
+      attr(heading, "role", "presentation");
+      s.list.appendChild(heading);
+    }
+    var row = el("li", "blu-command__option");
+    row.id = s.uid + "-command-" + i;
+    attr(row, "role", "option");
+    attr(row, "aria-disabled", !!x.IsDisabled);
+    row.dataset.index = i;
+    var copy = el("span", "blu-command__copy");
+    copy.appendChild(el("strong", "", x.Label));
+    if (x.Description) copy.appendChild(el("small", "", x.Description));
+    row.appendChild(copy);
+    if (x.Shortcut) row.appendChild(el("kbd", "", x.Shortcut));
+    row.addEventListener("click", function() {
+      chooseCommand(s, x);
+    });
+    s.list.appendChild(row);
+    if (!x.IsDisabled) enabled.push(i);
+  });
+  s.enabled = enabled;
+  s.active = enabled.length ? enabled[0] : -1;
+  if (!s.results.length) s.list.appendChild(attr(el("li", "blu-interactive__empty", s.options.EmptyText || "No commands found."), "role", "presentation"));
+  s.count.textContent = s.results.length + " commands";
+  paletteActive(s);
+}
+function paletteActive(s) {
+  Array.from(s.list.querySelectorAll('[role="option"]')).forEach(function(x) {
+    attr(x, "aria-selected", Number(x.dataset.index) === s.active);
+  });
+  var row = s.list.querySelector('[data-index="' + s.active + '"]');
+  if (row) {
+    attr(s.search, "aria-activedescendant", row.id);
+    row.scrollIntoView({ block: "nearest" });
+  } else s.search.removeAttribute("aria-activedescendant");
+}
+function updatePalette(s, o) {
+  var items = array(o.CommandsJson, "Commands");
+  unique(items, "Commands");
+  s.items = items;
+  s.options = o;
+  if (!s.ready) {
+    shell(s, "blu-command");
+    s.open = false;
+    s.trigger = button(o.TriggerLabel || "Open command palette", function() {
+      paletteOpen(s, true);
+    });
+    s.root.appendChild(s.trigger);
+    s.dialog = el("dialog", "blu-command__dialog");
+    attr(s.dialog, "aria-label", o.AccessibleLabel || "Command palette");
+    s.search = input("search", "", "Search commands");
+    s.search.placeholder = "Search commands, pages, and actions\u2026";
+    attr(s.search, "role", "combobox");
+    attr(s.search, "aria-autocomplete", "list");
+    attr(s.search, "aria-expanded", true);
+    attr(s.search, "aria-controls", s.uid + "-commands");
+    s.dialog.appendChild(s.search);
+    s.list = attr(el("ul", "blu-command__list"), "role", "listbox");
+    s.list.id = s.uid + "-commands";
+    attr(s.list, "aria-label", "Commands");
+    s.dialog.appendChild(s.list);
+    var footer = el("div", "blu-command__footer");
+    s.count = attr(el("span"), "aria-live", "polite");
+    footer.appendChild(s.count);
+    footer.appendChild(el("span", "", "\u2191 \u2193 Navigate   \u21B5 Select   Esc Close"));
+    footer.appendChild(button("Close", function() {
+      paletteOpen(s, false);
+    }, "blu-control--quiet"));
+    s.dialog.appendChild(footer);
+    s.root.appendChild(s.dialog);
+    listen(s, s.search, "input", function() {
+      renderCommands(s);
+    });
+    listen(s, s.dialog, "cancel", function(e) {
+      e.preventDefault();
+      paletteOpen(s, false);
+    });
+    listen(s, s.dialog, "keydown", function(e) {
+      if (e.key !== "Tab") return;
+      var items2 = Array.from(s.dialog.querySelectorAll('button:not(:disabled),input:not(:disabled),select:not(:disabled),a[href],[tabindex="0"]')).filter(function(n) {
+        return n.getClientRects().length;
+      });
+      var first = items2[0], last = items2[items2.length - 1];
+      if (e.shiftKey && document.activeElement === first) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    });
+    listen(s, s.dialog, "click", function(e) {
+      if (e.target === s.dialog) {
+        var r = s.dialog.getBoundingClientRect();
+        if (e.clientX < r.left || e.clientX > r.right || e.clientY < r.top || e.clientY > r.bottom) paletteOpen(s, false);
+      }
+    });
+    listen(s, s.search, "keydown", function(e) {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        chooseCommand(s, s.results[s.active]);
+        return;
+      }
+      var i = s.enabled.indexOf(s.active);
+      if (e.key === "ArrowDown") i = (i + 1) % s.enabled.length;
+      else if (e.key === "ArrowUp") i = (i - 1 + s.enabled.length) % s.enabled.length;
+      else if (e.key === "Home") i = 0;
+      else if (e.key === "End") i = s.enabled.length - 1;
+      else return;
+      e.preventDefault();
+      s.active = s.enabled[i] === void 0 ? -1 : s.enabled[i];
+      paletteActive(s);
+    });
+    listen(s, document, "keydown", function(e) {
+      if (!s.options.EnableShortcut || s.options.IsDisabled || !s.host.getClientRects().length || e.repeat) return;
+      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "k") {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+        paletteOpen(s, !s.open);
+      }
+    }, true);
+    s.dispose = function() {
+      if (s.open) {
+        s.dialog.close();
+        if (s.returnFocus && s.returnFocus.isConnected) s.returnFocus.focus();
+      }
+    };
+    s.ready = true;
+  }
+  s.trigger.textContent = o.TriggerLabel || "Open command palette";
+  s.trigger.hidden = o.ShowTrigger === false;
+  s.trigger.disabled = !!o.IsDisabled;
+  attr(s.dialog, "aria-label", o.AccessibleLabel || "Command palette");
+  renderCommands(s);
+  if (o.IsDisabled) paletteOpen(s, false);
+  else if (o.IsOpen !== s.lastOpen) paletteOpen(s, !!o.IsOpen);
+  error(s, "");
+}
+function installCommandPalette() {
+  return register("CommandPalette", () => api("CommandPalette", updatePalette));
+}
+export {
+  installCommandPalette
+};

package/src/runtime/content-carousel.d.ts

@@ -0,0 +1 @@
+export function installContentCarousel(): any;