@kerfjs/ui 5.0.0-beta.10 → 5.0.0-beta.101

package/dist/chunk-OZ6X76G5.js

@@ -0,0 +1,547 @@
+// src/wiring/wire-scroll-dividers.ts
+var EDGES = ["t", "r", "b", "l"];
+var FACING = { t: "b", r: "l", b: "t", l: "r" };
+var TARGET_EDGES = {
+  t: "top",
+  r: "right",
+  b: "bottom",
+  l: "left"
+};
+var SCROLL_OVERFLOW = "data-scroll-overflow";
+var SCROLL_DIVIDER = "data-scroll-divider";
+var HEADER_OVERLAY = "data-header-overlay";
+var CLEARANCE_BLOCK_START = "--kui-scroll-clearance-block-start";
+var SCROLLBAR_INLINE_SIZE = "--kui-pane-scrollbar-inline-size";
+var OVERLAY_PANE = '.kui-pane[data-header-presentation="overlay"]:not([data-chrome-placement="auto"])';
+var THRESHOLD = 1;
+var SCROLL_EDGE_PROGRESS = "--kui-scroll-edge-progress";
+var SCROLL_EDGE_DISTANCE = "data-scroll-edge-distance";
+var DEFAULT_SCROLL_EDGE_DISTANCE = 60;
+var quoted = (value) => `"${value.replaceAll("\\", "\\\\").replaceAll('"', '\\"')}"`;
+function within(root, selector) {
+  const found = [...root.querySelectorAll(selector)];
+  if (root.nodeType === 1 && root.matches(selector))
+    found.unshift(root);
+  return found;
+}
+var directChild = (parent, selector) => [...parent.children].find(
+  (child) => child.matches(selector)
+);
+var PANE_CHROME = {
+  t: ".kui-pane__header, .kui-pane__toolbar",
+  b: ".kui-pane__footer"
+};
+var NAV_STACK_CHROME = {
+  t: ".kui-nav-stack__chrome:not([data-nav-chrome-copy])",
+  b: ".kui-nav-stack__bottom:not([data-nav-chrome-copy])"
+};
+function activeView(stack) {
+  const viewport = directChild(stack, ".kui-nav-stack__viewport");
+  if (!viewport) return void 0;
+  return [...viewport.children].filter(
+    (child) => child.matches(
+      '.kui-nav-stack__view[data-nav-active="true"]:not([data-nav-exiting="true"])'
+    )
+  ).at(-1);
+}
+function activeScene(scaffold) {
+  const scenes = directChild(scaffold, ".kui-tab-scaffold__scenes");
+  return scenes ? directChild(scenes, '.kui-tab-scaffold__scene[data-active="true"]') : void 0;
+}
+function regionScrollers(region, edge) {
+  const found = [];
+  let current = region;
+  while (current) {
+    found.push(current);
+    if (current.children.length !== 1) break;
+    const child = current.children[0];
+    if (child.matches(".kui-pane")) {
+      current = directChild(child, PANE_CHROME[edge]) ? void 0 : directChild(child, ".kui-pane__content");
+      if (current) found.push(current);
+      break;
+    }
+    if (child.matches(".kui-nav-stack"))
+      current = directChild(child, NAV_STACK_CHROME[edge]) ? void 0 : activeView(child);
+    else if (child.matches(".kui-tab-scaffold") && edge === "t")
+      current = activeScene(child);
+    else current = void 0;
+  }
+  return found;
+}
+var sides = (edges) => EDGES.filter((edge) => edges.has(edge)).join("");
+function measure(scroller) {
+  const edges = /* @__PURE__ */ new Set();
+  const maxY = scroller.scrollHeight - scroller.clientHeight;
+  if (maxY > THRESHOLD) {
+    if (scroller.scrollTop > THRESHOLD) edges.add("t");
+    if (maxY - scroller.scrollTop > THRESHOLD) edges.add("b");
+  }
+  const maxX = scroller.scrollWidth - scroller.clientWidth;
+  if (maxX > THRESHOLD) {
+    const view = scroller.ownerDocument.defaultView;
+    const rtl = view?.getComputedStyle(scroller).direction === "rtl";
+    const left = rtl ? maxX + scroller.scrollLeft : scroller.scrollLeft;
+    if (left > THRESHOLD) edges.add("l");
+    if (maxX - left > THRESHOLD) edges.add("r");
+  }
+  return sides(edges);
+}
+var CONTROLLERS = /* @__PURE__ */ new WeakMap();
+function write(element, name, value) {
+  if (element.getAttribute(name) === (value || null)) return;
+  if (name === SCROLL_OVERFLOW) {
+    if (value) element.setAttribute(SCROLL_OVERFLOW, value);
+    else element.removeAttribute(SCROLL_OVERFLOW);
+  } else if (value) element.setAttribute(SCROLL_DIVIDER, value);
+  else element.removeAttribute(SCROLL_DIVIDER);
+}
+function wireScrollDividers(root, { targets = [] } = {}) {
+  const ownerDocument = root.nodeType === 9 ? root : root.ownerDocument;
+  let register = CONTROLLERS.get(ownerDocument);
+  if (!register) {
+    register = createController(ownerDocument);
+    CONTROLLERS.set(ownerDocument, register);
+  }
+  return register({ root, targets });
+}
+var STRUCTURAL_CLASSES = [
+  "kui-pane",
+  "kui-pane__content",
+  "kui-pane__header",
+  "kui-pane__toolbar",
+  "kui-pane__footer",
+  "kui-nav-stack",
+  "kui-nav-stack__viewport",
+  "kui-nav-stack__view",
+  "kui-nav-stack__chrome",
+  "kui-nav-stack__bottom",
+  "kui-tab-scaffold",
+  "kui-tab-scaffold__scenes",
+  "kui-tab-scaffold__scene",
+  "kui-tab-scaffold__bar"
+];
+var STRUCTURAL_SELECTOR = [
+  ...STRUCTURAL_CLASSES.map((name) => `.${name}`),
+  "[data-kui-tab-list]"
+].join(", ");
+var hasStructuralClass = (value) => !!value && value.split(/\s+/).some((token) => STRUCTURAL_CLASSES.includes(token));
+function createController(ownerDocument) {
+  const view = ownerDocument.defaultView;
+  let disposed = false;
+  const registrations = /* @__PURE__ */ new Set();
+  const listenedRoots = /* @__PURE__ */ new Set();
+  let pairings = [];
+  const overflow = /* @__PURE__ */ new Map();
+  const written = /* @__PURE__ */ new Map();
+  const faded = /* @__PURE__ */ new Set();
+  let overlays = /* @__PURE__ */ new Map();
+  const headerSizes = /* @__PURE__ */ new Map();
+  const scrollbarSizes = /* @__PURE__ */ new Map();
+  const published = /* @__PURE__ */ new Set();
+  const byId = (root, id) => {
+    if (!id) return void 0;
+    const [match] = within(root, `[id=${quoted(id)}]`);
+    return match;
+  };
+  const collect = () => {
+    const found = [];
+    for (const { root, targets } of registrations) {
+      for (const pane of within(root, ".kui-pane")) {
+        const scroller = directChild(pane, ".kui-pane__content");
+        const header = directChild(pane, PANE_CHROME.t);
+        const footer = directChild(pane, PANE_CHROME.b);
+        if (scroller && (header || footer))
+          found.push({ scroller, chrome: { t: header, b: footer } });
+      }
+      const pairRegion = (region, edge, chrome) => {
+        if (!region || !chrome) return;
+        for (const scroller of regionScrollers(region, edge))
+          found.push({ scroller, chrome: { [edge]: chrome } });
+      };
+      for (const stack of within(root, ".kui-nav-stack")) {
+        const view2 = activeView(stack);
+        for (const edge of ["t", "b"])
+          pairRegion(view2, edge, directChild(stack, NAV_STACK_CHROME[edge]));
+      }
+      for (const scaffold of within(root, ".kui-tab-scaffold"))
+        pairRegion(
+          activeScene(scaffold),
+          "b",
+          directChild(scaffold, ".kui-tab-scaffold__bar")
+        );
+      for (const strip of within(root, "[data-kui-tab-list]"))
+        found.push({ scroller: strip, chrome: {} });
+      for (const target of targets) {
+        const scroller = byId(root, target.scroller);
+        if (!scroller) continue;
+        const chrome = {};
+        for (const edge of EDGES)
+          chrome[edge] = byId(root, target[TARGET_EDGES[edge]]);
+        found.push({ scroller, chrome });
+      }
+    }
+    return found;
+  };
+  const collectOverlays = () => {
+    const found = /* @__PURE__ */ new Map();
+    for (const { root } of registrations)
+      for (const pane of within(root, OVERLAY_PANE)) {
+        const header = directChild(pane, PANE_CHROME.t);
+        if (header) found.set(header, pane);
+      }
+    return found;
+  };
+  const measureScrollbars = () => {
+    let changed = false;
+    for (const [header, pane] of overlays) {
+      const scroller = directChild(pane, ".kui-pane__content");
+      let size = 0;
+      if (scroller) {
+        const style = scroller.ownerDocument.defaultView.getComputedStyle(scroller);
+        size = Math.max(
+          0,
+          scroller.offsetWidth - scroller.clientWidth - (Number.parseFloat(style.borderLeftWidth) || 0) - (Number.parseFloat(style.borderRightWidth) || 0)
+        );
+      }
+      if (scrollbarSizes.get(header) === size) continue;
+      scrollbarSizes.set(header, size);
+      changed = true;
+    }
+    return changed;
+  };
+  const overlayObserver = view?.MutationObserver ? new view.MutationObserver(() => {
+    if (!disposed) publish();
+  }) : void 0;
+  const publish = () => {
+    const current = /* @__PURE__ */ new Map();
+    for (const [header, pane] of overlays) {
+      const size = headerSizes.get(header);
+      const scrollbar = scrollbarSizes.get(header);
+      if (size !== void 0)
+        current.set(pane, [`${size}px`, scrollbar ? `${scrollbar}px` : ""]);
+    }
+    overlayObserver?.disconnect();
+    for (const pane of published)
+      if (!current.has(pane)) {
+        pane.style.removeProperty(CLEARANCE_BLOCK_START);
+        pane.style.removeProperty(SCROLLBAR_INLINE_SIZE);
+        if (!pane.getAttribute("style")) pane.removeAttribute("style");
+        pane.removeAttribute(HEADER_OVERLAY);
+      }
+    published.clear();
+    for (const [pane, [value, scrollbar]] of current) {
+      if (pane.style.getPropertyValue(CLEARANCE_BLOCK_START) !== value)
+        pane.style.setProperty(CLEARANCE_BLOCK_START, value);
+      if (pane.style.getPropertyValue(SCROLLBAR_INLINE_SIZE) !== scrollbar) {
+        if (scrollbar) pane.style.setProperty(SCROLLBAR_INLINE_SIZE, scrollbar);
+        else pane.style.removeProperty(SCROLLBAR_INLINE_SIZE);
+      }
+      if (pane.getAttribute(HEADER_OVERLAY) !== "measured")
+        pane.setAttribute(HEADER_OVERLAY, "measured");
+      published.add(pane);
+      overlayObserver?.observe(pane, {
+        attributes: true,
+        attributeFilter: ["style", HEADER_OVERLAY]
+      });
+    }
+  };
+  const fadeEdges = (only) => {
+    const current = /* @__PURE__ */ new Set();
+    for (const { scroller, chrome } of pairings)
+      for (const edge of ["t", "b"]) {
+        const element = chrome[edge];
+        const owner = element?.parentElement;
+        if (!element || !owner?.hasAttribute("data-scroll-edge")) continue;
+        current.add(element);
+        if (only && scroller !== only) continue;
+        const distance = Number(owner.getAttribute(SCROLL_EDGE_DISTANCE)) || DEFAULT_SCROLL_EDGE_DISTANCE;
+        const travelled = edge === "t" ? scroller.scrollTop : scroller.scrollHeight - scroller.clientHeight - scroller.scrollTop;
+        const value = String(
+          Math.round(Math.min(1, Math.max(0, travelled / distance)) * 1e3) / 1e3
+        );
+        if (element.style.getPropertyValue(SCROLL_EDGE_PROGRESS) !== value)
+          element.style.setProperty(SCROLL_EDGE_PROGRESS, value);
+      }
+    if (only) return;
+    for (const element of faded)
+      if (!current.has(element)) {
+        element.style.removeProperty(SCROLL_EDGE_PROGRESS);
+        if (!element.getAttribute("style")) element.removeAttribute("style");
+      }
+    faded.clear();
+    for (const element of current) faded.add(element);
+  };
+  const apply = () => {
+    const current = /* @__PURE__ */ new Map();
+    const dividers = /* @__PURE__ */ new Map();
+    for (const { scroller, chrome } of pairings) {
+      const edges = overflow.get(scroller);
+      (current.get(scroller) ?? current.set(scroller, /* @__PURE__ */ new Map()).get(scroller)).set(SCROLL_OVERFLOW, edges);
+      for (const edge of EDGES) {
+        const element = chrome[edge];
+        if (!element) continue;
+        const shown = dividers.get(element) ?? /* @__PURE__ */ new Set();
+        dividers.set(element, shown);
+        if (edges.includes(edge)) shown.add(FACING[edge]);
+      }
+    }
+    for (const [element, shown] of dividers)
+      (current.get(element) ?? current.set(element, /* @__PURE__ */ new Map()).get(element)).set(SCROLL_DIVIDER, sides(shown));
+    for (const [element, values] of written)
+      for (const name of values.keys())
+        if (!current.get(element)?.has(name)) write(element, name, "");
+    written.clear();
+    for (const [element, values] of current) {
+      written.set(element, values);
+      for (const [name, value] of values) write(element, name, value);
+    }
+    fadeEdges();
+  };
+  const observed = /* @__PURE__ */ new Map();
+  let probe;
+  let probePending = false;
+  const resizeObserver = view?.ResizeObserver ? new view.ResizeObserver((entries) => {
+    if (disposed) return;
+    const scrollers = new Set(pairings.map(({ scroller }) => scroller));
+    let headerResized = false;
+    let scrollersResized = false;
+    for (const entry of entries) {
+      const { target } = entry;
+      if (overlays.has(target)) {
+        headerSizes.set(
+          target,
+          entry.borderBoxSize?.[0]?.blockSize ?? target.getBoundingClientRect().height
+        );
+        headerResized = true;
+        continue;
+      }
+      scrollersResized = true;
+      if (target === probe) {
+        probePending = false;
+        for (const scroller2 of overflow.keys())
+          overflow.set(scroller2, measure(scroller2));
+        continue;
+      }
+      const scroller = scrollers.has(target) ? target : target.parentElement;
+      if (scroller && scrollers.has(scroller))
+        overflow.set(scroller, measure(scroller));
+    }
+    if (scrollersResized && measureScrollbars()) headerResized = true;
+    apply();
+    if (headerResized) publish();
+  }) : void 0;
+  const observeSizes = () => {
+    if (!resizeObserver) return;
+    const wanted = /* @__PURE__ */ new Map();
+    for (const { scroller } of pairings) {
+      wanted.set(scroller, false);
+      for (const child of scroller.children) wanted.set(child, false);
+    }
+    for (const header of overlays.keys()) wanted.set(header, true);
+    for (const element of observed.keys())
+      if (!wanted.has(element)) {
+        resizeObserver.unobserve(element);
+        observed.delete(element);
+      }
+    for (const [element, borderBox] of wanted)
+      if (observed.get(element) !== borderBox) {
+        resizeObserver.observe(
+          element,
+          borderBox ? { box: "border-box" } : void 0
+        );
+        observed.set(element, borderBox);
+      }
+  };
+  const refresh = (afterLayout = false) => {
+    const deferred = afterLayout && resizeObserver !== void 0;
+    const previous = deferred ? new Map(overflow) : void 0;
+    pairings = collect();
+    overflow.clear();
+    for (const { scroller } of pairings)
+      overflow.set(
+        scroller,
+        previous ? previous.get(scroller) ?? "" : measure(scroller)
+      );
+    overlays = collectOverlays();
+    for (const sizes of [headerSizes, scrollbarSizes])
+      for (const header of sizes.keys())
+        if (!overlays.has(header)) sizes.delete(header);
+    if (!deferred) {
+      for (const header of overlays.keys())
+        if (!headerSizes.has(header))
+          headerSizes.set(header, header.getBoundingClientRect().height);
+    }
+    if (!deferred) measureScrollbars();
+    observeSizes();
+    apply();
+    publish();
+    if (deferred) scheduleRemeasure();
+  };
+  const remeasure = () => {
+    let changed = false;
+    for (const scroller of overflow.keys()) {
+      const edges = measure(scroller);
+      if (edges === overflow.get(scroller)) continue;
+      overflow.set(scroller, edges);
+      changed = true;
+    }
+    if (changed) apply();
+    if (measureScrollbars()) publish();
+  };
+  let remeasureFrame;
+  const scheduleRemeasure = () => {
+    if (resizeObserver) {
+      if (probePending) return;
+      probePending = true;
+      if (!probe) {
+        probe = ownerDocument.createElement("div");
+        probe.setAttribute("aria-hidden", "true");
+        probe.style.cssText = "position:fixed;top:0;left:0;width:0;height:0;overflow:hidden;visibility:hidden;pointer-events:none;contain:strict";
+        resizeObserver.observe(probe);
+      }
+      if (!probe.isConnected) ownerDocument.documentElement.append(probe);
+      probe.style.width = probe.style.width === "1px" ? "0px" : "1px";
+      return;
+    }
+    if (remeasureFrame !== void 0 || !view?.requestAnimationFrame) return;
+    remeasureFrame = view.requestAnimationFrame(() => {
+      remeasureFrame = void 0;
+      remeasure();
+    });
+  };
+  const onScroll = (event) => {
+    const scroller = event.target;
+    if (!overflow.has(scroller)) return;
+    fadeEdges(scroller);
+    const edges = measure(scroller);
+    if (edges === overflow.get(scroller)) return;
+    overflow.set(scroller, edges);
+    apply();
+  };
+  const mutationObserver = view?.MutationObserver ? new view.MutationObserver((records) => {
+    if (disposed) return;
+    const ids = targetIds();
+    const selector = [
+      STRUCTURAL_SELECTOR,
+      ...[...ids].map((id) => `[id=${quoted(id)}]`)
+    ].join(", ");
+    if (records.some((record) => changesPairings(record, ids, selector)))
+      refresh(true);
+    else {
+      if (records.some(
+        ({ attributeName }) => attributeName === SCROLL_OVERFLOW || attributeName === SCROLL_DIVIDER
+      ))
+        apply();
+      if (records.some(
+        ({ attributeName }) => attributeName !== SCROLL_OVERFLOW && attributeName !== SCROLL_DIVIDER
+      ))
+        scheduleRemeasure();
+    }
+  }) : void 0;
+  const targetIds = () => {
+    const ids = /* @__PURE__ */ new Set();
+    for (const { targets } of registrations)
+      for (const target of targets) {
+        ids.add(target.scroller);
+        for (const edge of EDGES) {
+          const id = target[TARGET_EDGES[edge]];
+          if (id) ids.add(id);
+        }
+      }
+    return ids;
+  };
+  const holds = (node, selector) => node.nodeType === 1 && (node.matches(selector) || !!node.querySelector(selector));
+  const changesPairings = ({
+    type,
+    target,
+    attributeName,
+    oldValue,
+    addedNodes,
+    removedNodes
+  }, ids, selector) => {
+    if (type === "attributes" && (attributeName === SCROLL_OVERFLOW || attributeName === SCROLL_DIVIDER))
+      return false;
+    if (target.nodeType === 1 && target.matches(selector))
+      return true;
+    if (type === "attributes")
+      return attributeName === "class" ? hasStructuralClass(oldValue) : attributeName === "id" && oldValue !== null && ids.has(oldValue);
+    for (const node of [...addedNodes, ...removedNodes])
+      if (holds(node, selector)) return true;
+    return false;
+  };
+  const syncRoots = () => {
+    const roots = new Set([...registrations].map(({ root }) => root));
+    for (const root of listenedRoots)
+      if (!roots.has(root)) {
+        root.removeEventListener("scroll", onScroll, { capture: true });
+        listenedRoots.delete(root);
+      }
+    for (const root of roots)
+      if (!listenedRoots.has(root)) {
+        root.addEventListener("scroll", onScroll, {
+          capture: true,
+          passive: true
+        });
+        listenedRoots.add(root);
+      }
+    mutationObserver?.disconnect();
+    for (const root of roots)
+      mutationObserver?.observe(root, {
+        subtree: true,
+        childList: true,
+        attributes: true,
+        // Old values tell a class or id that stopped being structural.
+        attributeOldValue: true,
+        // The shown NavStack view and TabNavigator scene change by attribute,
+        // and a Pane's header presentation by its attributes.
+        attributeFilter: [
+          "data-header-presentation",
+          "data-chrome-placement",
+          SCROLL_OVERFLOW,
+          SCROLL_DIVIDER,
+          "id",
+          "class",
+          "data-nav-active",
+          "data-nav-exiting",
+          "data-active"
+        ]
+      });
+  };
+  return (registration) => {
+    registrations.add(registration);
+    syncRoots();
+    refresh();
+    return () => {
+      if (!registrations.delete(registration)) return;
+      syncRoots();
+      if (registrations.size) refresh();
+      else {
+        disposed = true;
+        if (remeasureFrame !== void 0)
+          view?.cancelAnimationFrame(remeasureFrame);
+        remeasureFrame = void 0;
+        resizeObserver?.disconnect();
+        probe?.remove();
+        probe = void 0;
+        probePending = false;
+        for (const [element, values] of written)
+          for (const name of values.keys()) write(element, name, "");
+        written.clear();
+        overlays.clear();
+        headerSizes.clear();
+        scrollbarSizes.clear();
+        publish();
+        overlayObserver?.disconnect();
+        overflow.clear();
+        observed.clear();
+        pairings = [];
+        fadeEdges();
+        CONTROLLERS.delete(ownerDocument);
+      }
+    };
+  };
+}
+
+export { wireScrollDividers };
+
+//# sourceMappingURL=chunk-OZ6X76G5.js.map