@andesine/ui 0.4.0

package/dist/solid/client/index.js

@@ -0,0 +1,1354 @@
+import { template as _$template } from "solid-js/web";
+import { use as _$use } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { getNextElement as _$getNextElement } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
+import { spread as _$spread } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+var _tmpl$ = _$template(`<nav aria-label=Documentation>`),
+  _tmpl$2 = _$template(`<ul>`),
+  _tmpl$3 = _$template(`<li>`),
+  _tmpl$4 = _$template(`<a>`),
+  _tmpl$5 = _$template(`<button type=button>`),
+  _tmpl$6 = _$template(`<div>`),
+  _tmpl$7 = _$template(`<nav aria-label="On this page">`),
+  _tmpl$8 = _$template(`<details>`),
+  _tmpl$9 = _$template(`<summary>`),
+  _tmpl$0 = _$template(`<nav aria-label=Breadcrumbs>`),
+  _tmpl$1 = _$template(`<ol>`),
+  _tmpl$10 = _$template(`<span>`),
+  _tmpl$11 = _$template(`<span aria-hidden=true>`),
+  _tmpl$12 = _$template(`<nav aria-label=Pages>`);
+import { createContext, createEffect, createSignal, createUniqueId, on, onCleanup, onMount, splitProps, useContext } from "solid-js";
+import { isServer } from "solid-js/web";
+import { Tabs as Tabs$1 } from "@ark-ui/solid/tabs";
+const readSession = key => {
+  try {
+    return JSON.parse(sessionStorage.getItem(key) ?? "null") ?? void 0;
+  } catch {
+    return;
+  }
+};
+const writeSession = (key, value) => {
+  try {
+    sessionStorage.setItem(key, JSON.stringify(value));
+  } catch {}
+};
+const syncEvent$1 = "andesine:navigation-tree";
+const getActiveGroups = items => {
+  return items.flatMap(item => {
+    return item.children?.length && item.active ? [item.id, ...getActiveGroups(item.children)] : [];
+  });
+};
+const getDefaultGroups = (items, depth) => {
+  return depth > 0 ? items.flatMap(item => {
+    return item.children?.length ? [item.id, ...getDefaultGroups(item.children, depth - 1)] : [];
+  }) : [];
+};
+const getInitialGroups = options => {
+  const items = options.items();
+  const saved = !isServer && options.storageKey ? readSession(options.storageKey) : void 0;
+  const base = Array.isArray(saved) ? saved.map(String) : getDefaultGroups(items, options.defaultDepth ?? 0);
+  return new Set([...base, ...getActiveGroups(items)]);
+};
+const createNavigationTree = options => {
+  const [expanded, setExpanded] = createSignal(getInitialGroups(options));
+  const save = ids => {
+    if (!options.storageKey) return;
+    writeSession(options.storageKey, [...ids]);
+    window.dispatchEvent(new CustomEvent(syncEvent$1, {
+      detail: {
+        key: options.storageKey,
+        ids: [...ids]
+      }
+    }));
+  };
+  onMount(() => {
+    if (!options.storageKey) return;
+    const sync = event => {
+      const {
+        key,
+        ids
+      } = event.detail;
+      if (key === options.storageKey) setExpanded(new Set(ids));
+    };
+    writeSession(options.storageKey, [...expanded()]);
+    window.addEventListener(syncEvent$1, sync);
+    onCleanup(() => window.removeEventListener(syncEvent$1, sync));
+  });
+  return {
+    isExpanded: id => expanded().has(id),
+    setExpanded: (id, open) => {
+      const ids = new Set(expanded());
+      if (open) ids.add(id);else ids.delete(id);
+      setExpanded(ids);
+      save(ids);
+    }
+  };
+};
+const TreeContext = createContext();
+const ItemContext = createContext();
+const useTree = () => {
+  const tree = useContext(TreeContext);
+  if (!tree) throw new Error("NavigationTree parts must be inside NavigationTree.Root.");
+  return tree;
+};
+const useItem = () => {
+  const item = useContext(ItemContext);
+  if (!item) throw new Error("NavigationTree item parts must be inside NavigationTree.Item.");
+  return item;
+};
+const Root$5 = props => {
+  const [local, rest] = splitProps(props, ["items", "storageKey", "defaultDepth"]);
+  const tree = createNavigationTree({
+    items: () => local.items,
+    storageKey: local.storageKey,
+    defaultDepth: local.defaultDepth
+  });
+  return _$createComponent(TreeContext.Provider, {
+    value: tree,
+    get children() {
+      var _el$ = _$getNextElement(_tmpl$);
+      _$spread(_el$, _$mergeProps(rest, {
+        "data-scope": "navigation-tree",
+        "data-part": "root",
+        get ["data-storage-key"]() {
+          return local.storageKey;
+        }
+      }), false, false);
+      _$runHydrationEvents();
+      return _el$;
+    }
+  });
+};
+const List$2 = props => {
+  return (() => {
+    var _el$2 = _$getNextElement(_tmpl$2);
+    _$spread(_el$2, _$mergeProps(props, {
+      "data-scope": "navigation-tree",
+      "data-part": "list"
+    }), false, false);
+    _$runHydrationEvents();
+    return _el$2;
+  })();
+};
+const Item$2 = props => {
+  const [local, rest] = splitProps(props, ["item"]);
+  const tree = useTree();
+  const contentID = createUniqueId();
+  const isGroup = () => Boolean(local.item.children?.length);
+  return _$createComponent(ItemContext.Provider, {
+    get value() {
+      return {
+        item: local.item,
+        contentID
+      };
+    },
+    get children() {
+      var _el$3 = _$getNextElement(_tmpl$3);
+      _$spread(_el$3, _$mergeProps(rest, {
+        "data-scope": "navigation-tree",
+        "data-part": "item",
+        get ["data-id"]() {
+          return local.item.id;
+        },
+        get ["data-current"]() {
+          return local.item.current || void 0;
+        },
+        get ["data-active"]() {
+          return local.item.active || void 0;
+        },
+        get ["data-state"]() {
+          return _$memo(() => !!isGroup())() ? tree.isExpanded(local.item.id) ? "open" : "closed" : void 0;
+        }
+      }), false, false);
+      _$runHydrationEvents();
+      return _el$3;
+    }
+  });
+};
+const Link$3 = props => {
+  const {
+    item
+  } = useItem();
+  return (() => {
+    var _el$4 = _$getNextElement(_tmpl$4);
+    _$spread(_el$4, _$mergeProps({
+      get href() {
+        return item.href;
+      },
+      get ["aria-current"]() {
+        return item.current ? "page" : void 0;
+      }
+    }, props, {
+      "data-scope": "navigation-tree",
+      "data-part": "link"
+    }), false, false);
+    _$runHydrationEvents();
+    return _el$4;
+  })();
+};
+const GroupTrigger = props => {
+  const tree = useTree();
+  const {
+    item,
+    contentID
+  } = useItem();
+  const expanded = () => tree.isExpanded(item.id);
+  return (() => {
+    var _el$5 = _$getNextElement(_tmpl$5);
+    _$spread(_el$5, _$mergeProps(props, {
+      get ["aria-expanded"]() {
+        return expanded();
+      },
+      "aria-controls": contentID,
+      "data-scope": "navigation-tree",
+      "data-part": "group-trigger",
+      get ["data-state"]() {
+        return expanded() ? "open" : "closed";
+      },
+      "onClick": () => tree.setExpanded(item.id, !expanded())
+    }), false, false);
+    _$runHydrationEvents();
+    return _el$5;
+  })();
+};
+const GroupContent = props => {
+  const tree = useTree();
+  const {
+    item,
+    contentID
+  } = useItem();
+  const expanded = () => tree.isExpanded(item.id);
+  return (() => {
+    var _el$6 = _$getNextElement(_tmpl$6);
+    _$spread(_el$6, _$mergeProps(props, {
+      "id": contentID,
+      get hidden() {
+        return !expanded();
+      },
+      "data-scope": "navigation-tree",
+      "data-part": "group-content",
+      get ["data-state"]() {
+        return expanded() ? "open" : "closed";
+      }
+    }), false, false);
+    _$runHydrationEvents();
+    return _el$6;
+  })();
+};
+const NavigationTree = {
+  Root: Root$5,
+  List: List$2,
+  Item: Item$2,
+  Link: Link$3,
+  GroupTrigger,
+  GroupContent
+};
+const focusableSelector = "a[href], button, input, select, textarea, summary, [tabindex]";
+const focusTarget = target => {
+  const temporary = !target.matches(focusableSelector);
+  if (temporary) target.setAttribute("tabindex", "-1");
+  target.focus({
+    preventScroll: true
+  });
+  if (temporary) target.addEventListener("blur", () => target.removeAttribute("tabindex"), {
+    once: true
+  });
+};
+const getFocusable = root => {
+  return Array.from(root.querySelectorAll(focusableSelector)).filter(element => {
+    return element.tabIndex >= 0 && !element.matches(":disabled, [aria-disabled='true']") && !element.closest("[inert], [hidden]") && element.getClientRects().length > 0;
+  });
+};
+const getScrollOffset = () => {
+  return parseFloat(getComputedStyle(document.documentElement).scrollPaddingTop) || 0;
+};
+const scrollIntoContainer = (container, element, margin = 8) => {
+  const bounds = container.getBoundingClientRect();
+  const target = element.getBoundingClientRect();
+  if (target.top < bounds.top + margin) container.scrollTop += target.top - bounds.top - margin;
+  if (target.bottom > bounds.bottom - margin) container.scrollTop += target.bottom - bounds.bottom + margin;
+};
+const scrollKeys = new Set(["ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End", " "]);
+const intentEvents = ["wheel", "touchmove", "keydown", "pointerdown"];
+const createTableOfContents = options => {
+  const [activeID, setActiveID] = createSignal(options.headingIDs()[0]);
+  const [visibleIDs, setVisibleIDs] = createSignal([]);
+  let locked = false;
+  let userScroll = false;
+  onMount(() => {
+    let headings = [];
+    let frame = 0;
+    const update = () => {
+      const offset = getScrollOffset() + 1;
+      const atBottom = window.scrollY > 0 && window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - 2;
+      const tops = headings.map(heading => heading.getBoundingClientRect().top);
+      const passed = headings.filter((_, index) => tops[index] <= offset);
+      const visible = headings.filter((heading, index) => {
+        const end = tops[index + 1] ?? heading.parentElement.getBoundingClientRect().bottom;
+        return tops[index] < window.innerHeight && end > offset;
+      });
+      frame = 0;
+      setVisibleIDs(visible.map(heading => heading.id));
+      if (locked) return;
+      setActiveID((atBottom ? headings.at(-1) : passed.at(-1) ?? headings[0])?.id);
+    };
+    const schedule = () => {
+      frame ||= requestAnimationFrame(update);
+    };
+    const onIntent = event => {
+      if (!(event instanceof KeyboardEvent) || scrollKeys.has(event.key)) userScroll = true;
+    };
+    const onScroll = () => {
+      if (userScroll) locked = false;
+      userScroll = false;
+      schedule();
+    };
+    const observer = new ResizeObserver(schedule);
+    createEffect(() => {
+      headings = options.headingIDs().flatMap(id => document.getElementById(id) ?? []);
+      schedule();
+    });
+    observer.observe(document.body);
+    intentEvents.forEach(name => window.addEventListener(name, onIntent, {
+      passive: true
+    }));
+    window.addEventListener("scroll", onScroll, {
+      passive: true
+    });
+    window.addEventListener("hashchange", schedule);
+    onCleanup(() => {
+      cancelAnimationFrame(frame);
+      observer.disconnect();
+      intentEvents.forEach(name => window.removeEventListener(name, onIntent));
+      window.removeEventListener("scroll", onScroll);
+      window.removeEventListener("hashchange", schedule);
+    });
+  });
+  return {
+    activeID,
+    visibleIDs,
+    select: id => {
+      locked = true;
+      userScroll = false;
+      setActiveID(id);
+    }
+  };
+};
+const Context = createContext();
+const useTableOfContents = () => {
+  const state = useContext(Context);
+  if (!state) throw new Error("TableOfContents parts must be inside TableOfContents.Root.");
+  return state;
+};
+const Root$4 = props => {
+  const [local, rest] = splitProps(props, ["headingIDs"]);
+  const state = createTableOfContents({
+    headingIDs: () => local.headingIDs
+  });
+  return _$createComponent(Context.Provider, {
+    value: state,
+    get children() {
+      var _el$7 = _$getNextElement(_tmpl$7);
+      _$spread(_el$7, _$mergeProps(rest, {
+        "data-scope": "table-of-contents",
+        "data-part": "root"
+      }), false, false);
+      _$runHydrationEvents();
+      return _el$7;
+    }
+  });
+};
+const List$1 = props => {
+  return (() => {
+    var _el$8 = _$getNextElement(_tmpl$2);
+    _$spread(_el$8, _$mergeProps(props, {
+      "data-scope": "table-of-contents",
+      "data-part": "list"
+    }), false, false);
+    _$runHydrationEvents();
+    return _el$8;
+  })();
+};
+const Item$1 = props => {
+  return (() => {
+    var _el$9 = _$getNextElement(_tmpl$3);
+    _$spread(_el$9, _$mergeProps(props, {
+      "data-scope": "table-of-contents",
+      "data-part": "item"
+    }), false, false);
+    _$runHydrationEvents();
+    return _el$9;
+  })();
+};
+const Link$2 = props => {
+  const [local, rest] = splitProps(props, ["headingID"]);
+  const state = useTableOfContents();
+  const onClick = event => {
+    if (!(event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey)) return;
+    state.select(local.headingID);
+    requestAnimationFrame(() => {
+      const heading = document.getElementById(local.headingID);
+      if (heading) focusTarget(heading);
+    });
+  };
+  return (() => {
+    var _el$0 = _$getNextElement(_tmpl$4);
+    _$spread(_el$0, _$mergeProps(rest, {
+      get href() {
+        return `#${encodeURIComponent(local.headingID)}`;
+      },
+      get ["aria-current"]() {
+        return state.activeID() === local.headingID ? "location" : void 0;
+      },
+      get ["data-visible"]() {
+        return state.visibleIDs().includes(local.headingID) || void 0;
+      },
+      "data-scope": "table-of-contents",
+      "data-part": "link",
+      "onClick": onClick
+    }), false, false);
+    _$runHydrationEvents();
+    return _el$0;
+  })();
+};
+const TableOfContents = {
+  Root: Root$4,
+  List: List$1,
+  Item: Item$1,
+  Link: Link$2
+};
+const createTableOfContentsGuide = options => {
+  const [shape, setShape] = createSignal();
+  const [stroke, setStroke] = createSignal();
+  const links = new Map();
+  const inset = options.inset ?? 6;
+  const radius = options.radius ?? 8;
+  const edgePoints = options.edgePoints ?? 16;
+  let track;
+  let marker;
+  onMount(() => {
+    let frame = 0;
+    const measure = () => {
+      const bounds = track?.getBoundingClientRect();
+      const segments = options.ids().flatMap(id => {
+        const rect = links.get(id)?.getBoundingClientRect();
+        const x = options.position(id);
+        return rect && bounds ? [{
+          id,
+          x,
+          top: rect.top - bounds.top,
+          bottom: rect.bottom - bounds.top
+        }] : [];
+      });
+      const highlighted = segments.filter(segment => {
+        return options.highlightedIDs().includes(segment.id);
+      });
+      const first = highlighted[0];
+      const last = highlighted.at(-1);
+      const width = bounds?.width ?? 0;
+      const path = segments.map((segment, index) => {
+        const previous = segments[index - 1];
+        const line = `L ${segment.x} ${segment.bottom - inset}`;
+        if (!previous) return `M ${segment.x} ${segment.top + inset} ${line}`;
+        if (previous.x === segment.x) return line;
+        const middle = (previous.bottom + segment.top) / 2;
+        return `C ${previous.x} ${middle} ${segment.x} ${middle} ${segment.x} ${segment.top + inset} ${line}`;
+      }).join(" ");
+      frame = 0;
+      setShape(segments.length ? {
+        path,
+        width,
+        range: first && last && {
+          top: first.top,
+          height: last.bottom - first.top
+        }
+      } : void 0);
+    };
+    const schedule = () => {
+      frame ||= requestAnimationFrame(measure);
+    };
+    const observer = new ResizeObserver(schedule);
+    createEffect(() => {
+      options.highlightedIDs();
+      schedule();
+    });
+    if (track) observer.observe(track);
+    onCleanup(() => {
+      cancelAnimationFrame(frame);
+      observer.disconnect();
+    });
+  });
+  createEffect(() => {
+    const current = shape();
+    if (!current || !marker) return setStroke(void 0);
+    marker.setAttribute("d", current.path);
+    const total = marker.getTotalLength();
+    const lengthAt = y => {
+      let low = 0;
+      let high = total;
+      for (let step = 0; step < 20; step += 1) {
+        const middle = (low + high) / 2;
+        if (marker.getPointAtLength(middle).y < y) low = middle;else high = middle;
+      }
+      return (low + high) / 2;
+    };
+    if (!current.range) return setStroke({
+      ...current,
+      offset: 0,
+      length: 0,
+      total
+    });
+    const {
+      top,
+      height
+    } = current.range;
+    const bottom = top + height;
+    const r = Math.min(radius, height / 2);
+    const xAt = y => marker.getPointAtLength(lengthAt(y)).x;
+    const edge = Array.from({
+      length: edgePoints
+    }, (_, index) => {
+      const y = bottom - r - (height - 2 * r) * index / (edgePoints - 1);
+      return `L ${xAt(y)} ${y}`;
+    });
+    const [xTop, xBottom] = [xAt(top + r), xAt(bottom - r)];
+    const backdrop = [`M ${xTop + r} ${top} L ${current.width - r} ${top}`, `Q ${current.width} ${top} ${current.width} ${top + r} L ${current.width} ${bottom - r}`, `Q ${current.width} ${bottom} ${current.width - r} ${bottom} L ${xBottom + r} ${bottom}`, `Q ${xBottom} ${bottom} ${xBottom} ${bottom - r}`, ...edge, `Q ${xTop} ${top} ${xTop + r} ${top} Z`].join(" ");
+    const start = lengthAt(top + inset);
+    const end = lengthAt(bottom - inset);
+    setStroke({
+      ...current,
+      offset: -start,
+      length: end - start,
+      total,
+      backdrop
+    });
+  });
+  createEffect(() => {
+    const viewport = options.viewport?.();
+    const first = links.get(options.highlightedIDs()[0] ?? "");
+    if (viewport && first) scrollIntoContainer(viewport, first, 12);
+  });
+  return {
+    stroke,
+    trackRef: element => track = element,
+    linkRef: (id, element) => links.set(id, element),
+    pathRef: element => marker = element
+  };
+};
+const enhanceMobileNavigation = (root, options = {}) => {
+  const trigger = root.querySelector(":scope > summary");
+  const content = root.querySelector(":scope > :not(summary)");
+  const media = options.mediaQuery ? window.matchMedia(options.mediaQuery) : void 0;
+  const inertElements = new Map();
+  let opened = false;
+  let previousOverflow = "";
+  if (!trigger || !content) throw new Error("Mobile navigation needs a summary and content.");
+  const setModal = modal => {
+    if (!modal) {
+      inertElements.forEach((inert, element) => element.inert = inert);
+      inertElements.clear();
+      document.body.style.overflow = previousOverflow;
+      return;
+    }
+    for (let branch = root; branch.parentElement; branch = branch.parentElement) for (const sibling of branch.parentElement.children) {
+      if (sibling === branch || !(sibling instanceof HTMLElement)) continue;
+      inertElements.set(sibling, sibling.inert);
+      sibling.inert = true;
+    }
+    previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+  };
+  const sync = () => {
+    const open = root.open && (media?.matches ?? true);
+    if (root.open && !open) root.open = false;
+    if (opened === open) return;
+    opened = open;
+    setModal(open);
+    if (open) (getFocusable(content)[0] ?? trigger).focus({
+      preventScroll: true
+    });
+    options.onOpenChange?.(open);
+  };
+  const close = () => {
+    root.open = false;
+    sync();
+  };
+  const onToggle = event => {
+    if (event.target !== root) return;
+    const hadFocus = content.contains(document.activeElement);
+    sync();
+    if (!opened && hadFocus) trigger.focus({
+      preventScroll: true
+    });
+  };
+  const onKeyDown = event => {
+    if (!opened || event.defaultPrevented) return;
+    if (event.key === "Escape") {
+      event.preventDefault();
+      close();
+      trigger.focus({
+        preventScroll: true
+      });
+    }
+    if (event.key !== "Tab") return;
+    const items = [trigger, ...getFocusable(content)];
+    const edge = event.shiftKey ? items[0] : items.at(-1);
+    if (document.activeElement !== edge) return;
+    event.preventDefault();
+    (event.shiftKey ? items.at(-1) : items[0])?.focus();
+  };
+  const onClick = event => {
+    const link = event.target.closest("a[href]");
+    const isPlainClick = event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey;
+    if (!(opened && isPlainClick && link !== null && content.contains(link))) return;
+    const url = new URL(link.href);
+    const samePage = url.origin === location.origin && url.pathname === location.pathname;
+    close();
+    if (samePage) requestAnimationFrame(() => {
+      const target = url.hash && document.getElementById(decodeURIComponent(url.hash.slice(1))) || options.navigationTarget?.();
+      if (target) focusTarget(target);else trigger.focus({
+        preventScroll: true
+      });
+    });
+  };
+  root.addEventListener("toggle", onToggle);
+  root.addEventListener("keydown", onKeyDown);
+  root.addEventListener("click", onClick);
+  media?.addEventListener("change", sync);
+  sync();
+  return () => {
+    root.removeEventListener("toggle", onToggle);
+    root.removeEventListener("keydown", onKeyDown);
+    root.removeEventListener("click", onClick);
+    media?.removeEventListener("change", sync);
+    if (opened) setModal(false);
+  };
+};
+const Root$3 = props => {
+  const [local, rest] = splitProps(props, ["mediaQuery", "navigationTarget", "onOpenChange"]);
+  let root;
+  onMount(() => onCleanup(enhanceMobileNavigation(root, local)));
+  return (() => {
+    var _el$1 = _$getNextElement(_tmpl$8);
+    var _ref$ = root;
+    typeof _ref$ === "function" ? _$use(_ref$, _el$1) : root = _el$1;
+    _$spread(_el$1, _$mergeProps(rest, {
+      "data-scope": "mobile-navigation",
+      "data-part": "root"
+    }), false, false);
+    _$runHydrationEvents();
+    return _el$1;
+  })();
+};
+const Trigger = props => {
+  return (() => {
+    var _el$10 = _$getNextElement(_tmpl$9);
+    _$spread(_el$10, _$mergeProps(props, {
+      "data-scope": "mobile-navigation",
+      "data-part": "trigger"
+    }), false, false);
+    _$runHydrationEvents();
+    return _el$10;
+  })();
+};
+const Content = props => {
+  return (() => {
+    var _el$11 = _$getNextElement(_tmpl$6);
+    _$spread(_el$11, _$mergeProps(props, {
+      "data-scope": "mobile-navigation",
+      "data-part": "content"
+    }), false, false);
+    _$runHydrationEvents();
+    return _el$11;
+  })();
+};
+const MobileNavigation = {
+  Root: Root$3,
+  Trigger,
+  Content
+};
+const Root$2 = props => {
+  return (() => {
+    var _el$12 = _$getNextElement(_tmpl$0);
+    _$spread(_el$12, _$mergeProps(props, {
+      "data-scope": "breadcrumbs",
+      "data-part": "root"
+    }), false, false);
+    _$runHydrationEvents();
+    return _el$12;
+  })();
+};
+const List = props => {
+  return (() => {
+    var _el$13 = _$getNextElement(_tmpl$1);
+    _$spread(_el$13, _$mergeProps(props, {
+      "data-scope": "breadcrumbs",
+      "data-part": "list"
+    }), false, false);
+    _$runHydrationEvents();
+    return _el$13;
+  })();
+};
+const Item = props => {
+  return (() => {
+    var _el$14 = _$getNextElement(_tmpl$3);
+    _$spread(_el$14, _$mergeProps(props, {
+      "data-scope": "breadcrumbs",
+      "data-part": "item"
+    }), false, false);
+    _$runHydrationEvents();
+    return _el$14;
+  })();
+};
+const Link$1 = props => {
+  return (() => {
+    var _el$15 = _$getNextElement(_tmpl$4);
+    _$spread(_el$15, _$mergeProps(props, {
+      "data-scope": "breadcrumbs",
+      "data-part": "link"
+    }), false, false);
+    _$runHydrationEvents();
+    return _el$15;
+  })();
+};
+const Label = props => {
+  return (() => {
+    var _el$16 = _$getNextElement(_tmpl$10);
+    _$spread(_el$16, _$mergeProps(props, {
+      "data-scope": "breadcrumbs",
+      "data-part": "label"
+    }), false, false);
+    _$runHydrationEvents();
+    return _el$16;
+  })();
+};
+const Separator = props => {
+  return (() => {
+    var _el$17 = _$getNextElement(_tmpl$11);
+    _$spread(_el$17, _$mergeProps(props, {
+      "data-scope": "breadcrumbs",
+      "data-part": "separator"
+    }), false, false);
+    _$runHydrationEvents();
+    return _el$17;
+  })();
+};
+const Breadcrumbs = {
+  Root: Root$2,
+  List,
+  Item,
+  Link: Link$1,
+  Label,
+  Separator
+};
+const Root$1 = props => {
+  return (() => {
+    var _el$18 = _$getNextElement(_tmpl$12);
+    _$spread(_el$18, _$mergeProps(props, {
+      "data-scope": "pagination",
+      "data-part": "root"
+    }), false, false);
+    _$runHydrationEvents();
+    return _el$18;
+  })();
+};
+const Link = props => {
+  const [local, rest] = splitProps(props, ["direction"]);
+  return (() => {
+    var _el$19 = _$getNextElement(_tmpl$4);
+    _$spread(_el$19, _$mergeProps(rest, {
+      get rel() {
+        return local.direction === "previous" ? "prev" : "next";
+      },
+      "data-scope": "pagination",
+      "data-part": "link",
+      get ["data-direction"]() {
+        return local.direction;
+      }
+    }), false, false);
+    _$runHydrationEvents();
+    return _el$19;
+  })();
+};
+const Pagination = {
+  Root: Root$1,
+  Link
+};
+const syncEvent = "andesine:tabs";
+const Root = props => {
+  const [local, rest] = splitProps(props, ["values", "defaultValue", "syncKey", "onValueChange"]);
+  const [value, setValue] = createSignal(local.defaultValue ?? local.values[0] ?? "");
+  const storageKey = () => `andesine-tabs:${local.syncKey}`;
+  const select = next => {
+    if (typeof next === "string" && local.values.includes(next)) setValue(next);
+  };
+  onMount(() => {
+    if (!local.syncKey) return;
+    const sync = event => {
+      const {
+        key,
+        value
+      } = event.detail;
+      if (key === local.syncKey) select(value);
+    };
+    select(readSession(storageKey()));
+    window.addEventListener(syncEvent, sync);
+    onCleanup(() => window.removeEventListener(syncEvent, sync));
+  });
+  return _$createComponent(Tabs$1.Root, _$mergeProps(rest, {
+    get value() {
+      return value();
+    },
+    onValueChange: details => {
+      setValue(details.value);
+      local.onValueChange?.(details);
+      if (!local.syncKey) return;
+      writeSession(storageKey(), details.value);
+      window.dispatchEvent(new CustomEvent(syncEvent, {
+        detail: {
+          key: local.syncKey,
+          value: details.value
+        }
+      }));
+    }
+  }));
+};
+const Tabs = {
+  Root,
+  List: Tabs$1.List,
+  Trigger: Tabs$1.Trigger,
+  Content: Tabs$1.Content,
+  Indicator: Tabs$1.Indicator
+};
+const createClipboard = (timeout = 2e3) => {
+  const [status, setStatus] = createSignal();
+  let timer;
+  onCleanup(() => clearTimeout(timer));
+  return {
+    status,
+    copy: async text => {
+      clearTimeout(timer);
+      try {
+        if (typeof text !== "string" && typeof ClipboardItem !== "undefined") {
+          const blob = text.then(value => new Blob([value], {
+            type: "text/plain"
+          }));
+          await navigator.clipboard.write([new ClipboardItem({
+            "text/plain": blob
+          })]);
+        } else await navigator.clipboard.writeText(await text);
+        setStatus(true);
+      } catch {
+        setStatus(false);
+      }
+      timer = setTimeout(() => setStatus(void 0), timeout);
+    }
+  };
+};
+const createSearch = options => {
+  const [query, setQueryValue] = createSignal("");
+  const [results, setResults] = createSignal();
+  const [status, setStatus] = createSignal("idle");
+  const [error, setError] = createSignal();
+  let timer;
+  let controller;
+  const cancel = () => {
+    clearTimeout(timer);
+    controller?.abort();
+    controller = void 0;
+    if (status() === "loading") setStatus(results() ? "done" : "idle");
+  };
+  const run = async value => {
+    const current = new AbortController();
+    controller = current;
+    try {
+      const found = await options.search(value, current.signal);
+      if (controller !== current) return;
+      setResults(() => found);
+      setStatus("done");
+    } catch (reason) {
+      if (controller !== current || current.signal.aborted) return;
+      setError(reason);
+      setStatus("error");
+    }
+  };
+  onCleanup(cancel);
+  return {
+    query,
+    results,
+    status,
+    error,
+    cancel,
+    setQuery: value => {
+      cancel();
+      setQueryValue(value);
+      if (!value.trim()) {
+        setResults(void 0);
+        setStatus("idle");
+        return;
+      }
+      setStatus("loading");
+      timer = setTimeout(() => run(value.trim()), options.delay ?? 200);
+    }
+  };
+};
+const createListNavigation = options => {
+  const [active, setActive] = createSignal(0);
+  const moves = {
+    ArrowDown: (index, count) => (index + 1) % count,
+    ArrowUp: (index, count) => (index - 1 + count) % count,
+    Home: () => 0,
+    End: (_, count) => count - 1
+  };
+  return {
+    active,
+    setActive,
+    onKeyDown: event => {
+      const count = options.count();
+      const move = moves[event.key];
+      if (!count || event.isComposing) return;
+      if (event.key === "Enter") {
+        event.preventDefault();
+        options.onSelect(Math.min(active(), count - 1));
+      }
+      if (!move) return;
+      event.preventDefault();
+      setActive(move(Math.min(active(), count - 1), count));
+    }
+  };
+};
+const createAnswer = options => {
+  const [turns, setTurns] = createSignal([]);
+  let controller;
+  const pending = () => turns().at(-1)?.status === "loading";
+  const updateLast = (current, turn) => {
+    if (controller !== current) return;
+    setTurns(list => [...list.slice(0, -1), {
+      ...list.at(-1),
+      ...turn
+    }]);
+  };
+  const cancel = () => {
+    controller?.abort();
+    controller = void 0;
+    if (pending()) setTurns(list => list.slice(0, -1));
+  };
+  const run = async question => {
+    const current = new AbortController();
+    cancel();
+    controller = current;
+    const history = turns().filter(turn => turn.status === "done");
+    setTurns([...history, {
+      question,
+      status: "loading"
+    }]);
+    try {
+      const answer = await options.ask(question, history, current.signal, partial => {
+        return updateLast(current, {
+          answer: partial
+        });
+      });
+      updateLast(current, {
+        answer,
+        status: "done"
+      });
+    } catch (error) {
+      if (current.signal.aborted) return;
+      updateLast(current, {
+        status: "error",
+        error
+      });
+    } finally {
+      if (controller === current) controller = void 0;
+    }
+  };
+  onCleanup(cancel);
+  return {
+    turns,
+    pending,
+    cancel,
+    ask: question => {
+      run(question).catch(() => {});
+    },
+    reset: () => {
+      cancel();
+      setTurns([]);
+    }
+  };
+};
+const isApplePlatform = () => {
+  return typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.userAgent);
+};
+const createSearchPalette = options => {
+  const [open, setOpen] = createSignal(false);
+  const [isApple, setIsApple] = createSignal(true);
+  const [input, setInput] = createSignal();
+  const search = createSearch({
+    search: options.search,
+    delay: options.delay ?? 250
+  });
+  const answer = options.ask && createAnswer({
+    ask: options.ask
+  });
+  const items = () => {
+    const results = search.results();
+    return results === void 0 ? [] : options.items(results);
+  };
+  const canAsk = () => Boolean(answer && search.query().trim());
+  const showingAnswer = () => {
+    return !search.query().trim() && Boolean(answer && answer.turns().length);
+  };
+  const openItem = item => {
+    setOpen(false);
+    window.location.assign(item.href);
+  };
+  const askQuery = () => {
+    const question = search.query().trim();
+    if (!question || !answer) return;
+    follow = true;
+    answer.ask(question);
+    search.setQuery("");
+  };
+  const navigation = createListNavigation({
+    count: () => search.status() === "loading" ? 0 : items().length + (canAsk() ? 1 : 0),
+    onSelect: index => {
+      const item = items()[index];
+      if (item) openItem(item);else askQuery();
+    }
+  });
+  let results;
+  let resumeSearch = false;
+  let follow = true;
+  createEffect(() => {
+    search.results();
+    navigation.setActive(0);
+  });
+  createEffect(on(open, isOpen => {
+    if (isOpen) {
+      if (resumeSearch) search.setQuery(search.query());
+      resumeSearch = false;
+      return;
+    }
+    resumeSearch = search.status() === "loading";
+    search.cancel();
+    answer?.cancel();
+  }));
+  createEffect(() => {
+    answer?.turns();
+    if (follow && results) queueMicrotask(() => results.scrollTo({
+      top: results.scrollHeight
+    }));
+  });
+  onMount(() => {
+    const url = new URL(window.location.href);
+    const param = options.queryParam ?? "q";
+    const query = url.searchParams.get(param)?.trim();
+    const onShortcut = event => {
+      if (!(event.key.toLowerCase() === "k" && (event.metaKey || event.ctrlKey))) return;
+      event.preventDefault();
+      setOpen(true);
+    };
+    const onClick = event => {
+      if (event.target.closest(options.triggerSelector ?? "[data-search-trigger]")) setOpen(true);
+    };
+    setIsApple(isApplePlatform());
+    if (query) {
+      url.searchParams.delete(param);
+      window.history.replaceState(window.history.state, "", url);
+      search.setQuery(query.slice(0, options.maxLength ?? 500));
+      setOpen(true);
+    }
+    document.addEventListener("keydown", onShortcut);
+    document.addEventListener("click", onClick);
+    onCleanup(() => {
+      document.removeEventListener("keydown", onShortcut);
+      document.removeEventListener("click", onClick);
+    });
+  });
+  return {
+    open,
+    setOpen,
+    search,
+    answer,
+    items,
+    canAsk,
+    showingAnswer,
+    navigation,
+    isApple,
+    askQuery,
+    openItem,
+    input,
+    inputRef: setInput,
+    resultsRef: element => {
+      results = element;
+      element.addEventListener("scroll", () => {
+        follow = element.scrollHeight - element.scrollTop - element.clientHeight < 48;
+      });
+    },
+    onInputKeyDown: event => {
+      const isTouch = window.matchMedia("(hover: none) and (pointer: coarse)").matches;
+      if (event.key === "Enter" && isTouch) {
+        event.preventDefault();
+        input()?.blur();
+        return;
+      }
+      if (showingAnswer()) return;
+      navigation.onKeyDown(event);
+      queueMicrotask(() => {
+        results?.querySelector(`[data-search-result="${navigation.active()}"]`)?.scrollIntoView({
+          block: "nearest"
+        });
+      });
+    }
+  };
+};
+const escapeRegExp = value => value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+const getMatchTerms = query => {
+  const phrase = query.trim().toLowerCase();
+  if (!phrase) return [];
+  return [...new Set([phrase, ...phrase.split(/\s+/).filter(term => term.length >= 2)])].sort((a, b) => b.length - a.length);
+};
+const matchesQuery = (text, query) => {
+  return getMatchTerms(query).some(term => text.toLowerCase().includes(term));
+};
+const splitMatches = (text, query) => {
+  const terms = getMatchTerms(query);
+  if (!terms.length) return [{
+    text,
+    match: false
+  }];
+  return text.split(new RegExp(`(${terms.map(escapeRegExp).join("|")})`, "giu")).filter(Boolean).map(part => ({
+    text: part,
+    match: terms.includes(part.toLowerCase())
+  }));
+};
+const getMatchPreview = (text, query, options = {}) => {
+  const lower = text.toLowerCase();
+  const matches = getMatchTerms(query).map(term => lower.indexOf(term)).filter(index => index >= 0);
+  const start = matches.length ? Math.max(Math.min(...matches) - (options.prefix ?? 24), 0) : 0;
+  const end = Math.min(start + (options.length ?? 180), text.length);
+  return `${start > 0 ? "…" : ""}${text.slice(start, end).trim()}${end < text.length ? "…" : ""}`;
+};
+const createPageActions = options => {
+  const [item, setItem] = createSignal("link");
+  const clipboard = createClipboard(options.timeout);
+  let markdown;
+  const loadMarkdown = () => {
+    markdown ??= fetch(options.markdown).then(response => {
+      if (!response.ok) throw new Error(`Markdown request failed (${response.status}).`);
+      return response.text();
+    });
+    markdown.catch(() => markdown = void 0);
+    return markdown;
+  };
+  const result = () => {
+    const success = clipboard.status();
+    return success === void 0 ? void 0 : {
+      item: item(),
+      success
+    };
+  };
+  return {
+    result,
+    copyLink: () => {
+      setItem("link");
+      return clipboard.copy(window.location.href);
+    },
+    copyMarkdown: () => {
+      setItem("markdown");
+      return clipboard.copy(loadMarkdown());
+    }
+  };
+};
+const createScrollMemory = options => {
+  onMount(() => {
+    const container = options.container();
+    const current = options.current?.();
+    if (!container) return;
+    const save = () => writeSession(options.key, container.scrollTop);
+    container.scrollTop = Number(readSession(options.key)) || 0;
+    if (current) scrollIntoContainer(container, current);
+    container.addEventListener("scroll", save, {
+      passive: true
+    });
+    onCleanup(() => container.removeEventListener("scroll", save));
+  });
+};
+const createScrollEdges = () => {
+  const [start, setStart] = createSignal(false);
+  const [end, setEnd] = createSignal(false);
+  onMount(() => {
+    const root = document.documentElement;
+    const update = () => {
+      setStart(root.scrollTop > 0);
+      setEnd(root.scrollHeight - root.clientHeight - root.scrollTop >= 10);
+    };
+    const observer = new ResizeObserver(update);
+    observer.observe(document.body);
+    window.addEventListener("scroll", update, {
+      passive: true
+    });
+    update();
+    onCleanup(() => {
+      observer.disconnect();
+      window.removeEventListener("scroll", update);
+    });
+  });
+  return {
+    start,
+    end
+  };
+};
+const createPageScrollbar = (options = {}) => {
+  const [metrics, setMetrics] = createSignal();
+  const [scrolling, setScrolling] = createSignal(false);
+  const [near, setNear] = createSignal(false);
+  const [dragging, setDragging] = createSignal(false);
+  const inset = options.inset ?? 4;
+  const interactive = () => near() || dragging();
+  let dragStart = 0;
+  let scrollStart = 0;
+  const scrollTo = top => window.scrollTo({
+    top,
+    behavior: "instant"
+  });
+  const stopDragging = () => {
+    setDragging(false);
+  };
+  onMount(() => {
+    const edgeZone = options.edgeZone ?? 16;
+    const minThumbHeight = options.minThumbHeight ?? 24;
+    let frame = 0;
+    let timer;
+    const measure = () => {
+      const root = document.documentElement;
+      const viewport = window.innerHeight;
+      const maximum = root.scrollHeight - viewport;
+      const locked = getComputedStyle(document.body).overflow === "hidden";
+      const track = viewport - inset * 2;
+      const height = Math.max(minThumbHeight, track * viewport / root.scrollHeight);
+      frame = 0;
+      setMetrics(maximum > 0 && !locked ? {
+        top: inset + window.scrollY / maximum * (track - height),
+        height,
+        ratio: maximum / (track - height)
+      } : void 0);
+    };
+    const schedule = () => {
+      frame ||= requestAnimationFrame(measure);
+    };
+    const onScroll = () => {
+      schedule();
+      setScrolling(true);
+      clearTimeout(timer);
+      timer = setTimeout(() => setScrolling(false), options.hideDelay ?? 1e3);
+    };
+    const onPointerMove = event => {
+      setNear(event.pointerType === "mouse" && event.clientX >= window.innerWidth - edgeZone);
+    };
+    const observer = new ResizeObserver(schedule);
+    const styleObserver = new MutationObserver(schedule);
+    observer.observe(document.body);
+    styleObserver.observe(document.body, {
+      attributes: true,
+      attributeFilter: ["style"]
+    });
+    window.addEventListener("scroll", onScroll, {
+      passive: true
+    });
+    window.addEventListener("resize", schedule);
+    window.addEventListener("pointermove", onPointerMove, {
+      passive: true
+    });
+    measure();
+    onCleanup(() => {
+      cancelAnimationFrame(frame);
+      clearTimeout(timer);
+      observer.disconnect();
+      styleObserver.disconnect();
+      window.removeEventListener("scroll", onScroll);
+      window.removeEventListener("resize", schedule);
+      window.removeEventListener("pointermove", onPointerMove);
+    });
+  });
+  return {
+    thumb: () => {
+      const current = metrics();
+      return current && {
+        top: current.top,
+        height: current.height
+      };
+    },
+    visible: () => Boolean(metrics() && (scrolling() || interactive())),
+    interactive,
+    onTrackPointerDown: event => {
+      const current = metrics();
+      if (event.button !== 0 || !current) return;
+      scrollTo((event.clientY - inset - current.height / 2) * current.ratio);
+    },
+    thumbHandlers: {
+      onPointerDown: event => {
+        if (event.button !== 0) return;
+        event.preventDefault();
+        event.stopPropagation();
+        event.currentTarget.setPointerCapture(event.pointerId);
+        dragStart = event.clientY;
+        scrollStart = window.scrollY;
+        setDragging(true);
+      },
+      onPointerMove: event => {
+        const current = metrics();
+        if (dragging() && current) scrollTo(scrollStart + (event.clientY - dragStart) * current.ratio);
+      },
+      onPointerUp: stopDragging,
+      onPointerCancel: stopDragging,
+      onLostPointerCapture: stopDragging
+    }
+  };
+};
+const createTabIndicator = options => {
+  const [position, setPosition] = createSignal();
+  const tabs = new Map();
+  let root;
+  let scroll;
+  onMount(() => {
+    let frame = 0;
+    const measure = () => {
+      const rootBounds = root?.getBoundingClientRect();
+      const tabBounds = tabs.get(options.current())?.getBoundingClientRect();
+      frame = 0;
+      setPosition(rootBounds && tabBounds && {
+        left: tabBounds.left - rootBounds.left,
+        width: tabBounds.width
+      });
+    };
+    const schedule = () => {
+      frame ||= requestAnimationFrame(measure);
+    };
+    const observer = new ResizeObserver(schedule);
+    tabs.get(options.current())?.scrollIntoView({
+      block: "nearest",
+      inline: "nearest"
+    });
+    if (root) observer.observe(root);
+    scroll?.addEventListener("scroll", schedule, {
+      passive: true
+    });
+    schedule();
+    onCleanup(() => {
+      cancelAnimationFrame(frame);
+      observer.disconnect();
+      scroll?.removeEventListener("scroll", schedule);
+    });
+  });
+  return {
+    position,
+    rootRef: element => root = element,
+    scrollRef: element => scroll = element,
+    tabRef: (index, element) => tabs.set(index, element)
+  };
+};
+export { Breadcrumbs, MobileNavigation, NavigationTree, Pagination, TableOfContents, Tabs, createAnswer, createClipboard, createListNavigation, createNavigationTree, createPageActions, createPageScrollbar, createScrollEdges, createScrollMemory, createSearch, createSearchPalette, createTabIndicator, createTableOfContents, createTableOfContentsGuide, enhanceMobileNavigation, getMatchPreview, getMatchTerms, matchesQuery, splitMatches, useTableOfContents };