@nulib/clover 0.0.0-stage → 4.0.0-beta.0

package/dist/ui/Tip.mjs

@@ -0,0 +1,196 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import { useCloverTranslation } from "../i18n/useCloverTranslation.mjs";
+const SHORTCUTS = {
+  zoomIn: { keys: "Plus", glyph: "+" },
+  zoomOut: { keys: "-", glyph: "−" },
+  reset: { keys: "0", glyph: "0" },
+  rotateRight: { keys: "R", glyph: "R" },
+  rotateLeft: { keys: "Shift+R", glyph: "⇧R" },
+  play: { keys: "K Space", glyph: "K" },
+  mute: { keys: "M", glyph: "M" }
+};
+const SHORTCUT_KEYS = /* @__PURE__ */ new Set([
+  "+",
+  "=",
+  "-",
+  "_",
+  "0",
+  "r",
+  "R",
+  "k",
+  "K",
+  "m",
+  "M",
+  "j",
+  "J",
+  "l",
+  "L"
+]);
+function Tip({
+  label,
+  lang,
+  shortcut,
+  scrolls = false,
+  image
+}) {
+  const { t } = useCloverTranslation();
+  const ref = useRef(null);
+  const text = shortcut ? t("controlShortcut", { label, shortcut: shortcut.glyph }) : label;
+  useTips();
+  useEffect(() => {
+    const tip = ref.current;
+    if (tip && isShown(tip)) keepInside(tip);
+  }, [text]);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref,
+      className: "clover-tip",
+      "aria-hidden": "true",
+      lang,
+      ...scrolls && {
+        tabIndex: -1,
+        onMouseDown: (event) => {
+          var _a;
+          event.preventDefault();
+          (_a = event.currentTarget.parentElement) == null ? void 0 : _a.focus({ preventScroll: true });
+        }
+      },
+      children: [
+        image && /* @__PURE__ */ jsx(
+          "img",
+          {
+            className: "clover-tip-image",
+            src: image,
+            alt: "",
+            loading: "lazy",
+            onLoad: () => {
+              const tip = ref.current;
+              if (tip && isShown(tip)) keepInside(tip);
+            }
+          }
+        ),
+        text
+      ]
+    }
+  );
+}
+function placeTip(event) {
+  const control = event.target instanceof Element && controlOf(event.target);
+  const tip = control && tipOf(control);
+  if (tip) keepInside(tip);
+}
+function tipOf(control) {
+  return Array.from(control.children).find(
+    (child) => child.classList.contains("clover-tip")
+  );
+}
+function controlOf(element) {
+  const holder = element.matches("input") ? element.parentElement : null;
+  return holder && tipOf(holder) ? holder : element;
+}
+function isShown(tip) {
+  var _a;
+  try {
+    return Boolean(
+      (_a = tip.parentElement) == null ? void 0 : _a.matches(
+        ":hover, :focus-visible, :has(> input:focus-visible)"
+      )
+    );
+  } catch {
+    return false;
+  }
+}
+function keepInside(tip) {
+  const control = tip.parentElement;
+  if (!control) return;
+  tip.style.removeProperty("--clover-tip-room");
+  tip.style.removeProperty("--clover-tip-shift");
+  const bounds = clipOf(control);
+  const clear = parseFloat(getComputedStyle(tip).paddingLeft) || 0;
+  const start = bounds.left + clear;
+  const end = bounds.right - clear;
+  const own = control.getBoundingClientRect();
+  let box = tip.getBoundingClientRect();
+  const room = box.right <= own.left ? box.right - start : box.left >= own.right ? end - box.left : end - start;
+  if (box.width > room) {
+    tip.style.setProperty("--clover-tip-room", `${Math.max(room, 0)}px`);
+    box = tip.getBoundingClientRect();
+  }
+  const shift = box.left < start ? start - box.left : box.right > end ? end - box.right : 0;
+  if (shift) tip.style.setProperty("--clover-tip-shift", `${shift}px`);
+}
+function clipOf(element) {
+  let left = 0;
+  let right = document.documentElement.clientWidth || window.innerWidth;
+  for (let node = element.parentElement; node && node !== document.documentElement; node = node.parentElement) {
+    const { display, overflow, overflowX } = getComputedStyle(node);
+    if (display === "inline" || display === "contents") continue;
+    const across = overflowX || overflow;
+    if (!across || across === "visible") continue;
+    const rect = node.getBoundingClientRect();
+    left = Math.max(left, rect.left + node.clientLeft);
+    right = Math.min(right, rect.left + node.clientLeft + node.clientWidth);
+  }
+  return { left, right };
+}
+let listening = 0;
+function hideTips(event) {
+  if (event.key !== "Escape") return;
+  const shown = /* @__PURE__ */ new Set();
+  document.querySelectorAll(":hover > .clover-tip").forEach((tip) => tip.parentElement && shown.add(tip.parentElement));
+  const focused = document.activeElement;
+  const control = focused && controlOf(focused);
+  if (control && tipOf(control)) shown.add(control);
+  shown.forEach(
+    (control2) => hideUntilBack(control2, "tipHidden", ["pointerenter", "focusout"])
+  );
+}
+function hideUntilBack(element, key, back) {
+  element.dataset[key] = "";
+  const show = () => {
+    delete element.dataset[key];
+    back.forEach((type) => element.removeEventListener(type, show));
+  };
+  back.forEach((type) => element.addEventListener(type, show));
+}
+function useTips() {
+  useEffect(() => {
+    if (listening++ === 0) {
+      document.addEventListener("keydown", hideTips, true);
+      document.addEventListener("pointerenter", placeTip, true);
+      document.addEventListener("focus", placeTip, true);
+    }
+    return () => {
+      if (--listening) return;
+      document.removeEventListener("keydown", hideTips, true);
+      document.removeEventListener("pointerenter", placeTip, true);
+      document.removeEventListener("focus", placeTip, true);
+    };
+  }, []);
+}
+function forwardShortcut(event, viewport) {
+  const target = event.target;
+  if (!viewport || target === viewport || viewport.contains(target)) return;
+  if (!SHORTCUT_KEYS.has(event.key)) return;
+  if (event.altKey || event.metaKey || event.ctrlKey) return;
+  if (target.closest("input, select, textarea, [contenteditable]")) return;
+  event.preventDefault();
+  viewport.dispatchEvent(
+    new KeyboardEvent("keydown", {
+      key: event.key,
+      shiftKey: event.shiftKey,
+      bubbles: true,
+      cancelable: true
+    })
+  );
+}
+export {
+  SHORTCUTS,
+  SHORTCUT_KEYS,
+  Tip,
+  forwardShortcut,
+  hideUntilBack
+};

package/dist/ui/bringIntoView.mjs

@@ -0,0 +1,27 @@
+"use client";
+function scrollerOf(node) {
+  for (let at = node.parentElement; at && at !== document.body; at = at.parentElement) {
+    if (/auto|scroll/.test(getComputedStyle(at).overflowY)) return at;
+  }
+  return null;
+}
+function bringIntoView(target, where) {
+  var _a;
+  const scroller = scrollerOf(target);
+  if (!scroller) return;
+  const style = getComputedStyle(target);
+  const above = parseFloat(style.scrollMarginTop) || 0;
+  const below = parseFloat(style.scrollMarginBottom) || 0;
+  const box = target.getBoundingClientRect();
+  const port = scroller.getBoundingClientRect();
+  const top = box.top - port.top - above;
+  const bottom = box.bottom - port.bottom + below;
+  const by = where === "start" || top < 0 ? top : bottom > 0 ? Math.min(bottom, top) : 0;
+  if (Math.abs(by) < 1) return;
+  const still = (_a = window.matchMedia) == null ? void 0 : _a.call(window, "(prefers-reduced-motion: reduce)").matches;
+  scroller.scrollBy({ top: by, behavior: still ? "auto" : "smooth" });
+}
+export {
+  bringIntoView,
+  scrollerOf
+};

package/dist/ui/controlGlyphs.mjs

@@ -0,0 +1,120 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+const ZoomIn = () => {
+  return /* @__PURE__ */ jsx(
+    "path",
+    {
+      strokeLinecap: "round",
+      strokeMiterlimit: "10",
+      strokeWidth: "45",
+      d: "M256 112v288M400 256H112"
+    }
+  );
+};
+const ZoomOut = () => {
+  return /* @__PURE__ */ jsx(
+    "path",
+    {
+      strokeLinecap: "round",
+      strokeMiterlimit: "10",
+      strokeWidth: "45",
+      d: "M400 256H112"
+    }
+  );
+};
+const ZoomFullScreen = () => {
+  return /* @__PURE__ */ jsx(
+    "path",
+    {
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "32",
+      d: "M432 320v112H320M421.8 421.77L304 304M80 192V80h112M90.2 90.23L208 208M320 80h112v112M421.77 90.2L304 208M192 432H80V320M90.23 421.8L208 304"
+    }
+  );
+};
+const ZoomExitFullScreen = () => {
+  return /* @__PURE__ */ jsx(
+    "path",
+    {
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "32",
+      d: "M304 416v-112h112M405.77 405.77L304 304M208 96v112H96M106.23 106.23L208 208M416 208H304V96M405.77 106.23L304 208M96 304h112v112M106.23 405.77L208 304"
+    }
+  );
+};
+const Reset = () => {
+  return /* @__PURE__ */ jsx("path", { d: "M448 440a16 16 0 01-12.61-6.15c-22.86-29.27-44.07-51.86-73.32-67C335 352.88 301 345.59 256 344.23V424a16 16 0 01-27 11.57l-176-168a16 16 0 010-23.14l176-168A16 16 0 01256 88v80.36c74.14 3.41 129.38 30.91 164.35 81.87C449.32 292.44 464 350.9 464 424a16 16 0 01-16 16z" });
+};
+const Rotate = () => {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        fill: "none",
+        strokeLinecap: "round",
+        strokeMiterlimit: "10",
+        strokeWidth: "45",
+        d: "M400 148l-21.12-24.57A191.43 191.43 0 00240 64C134 64 48 150 48 256s86 192 192 192a192.09 192.09 0 00181.07-128"
+      }
+    ),
+    /* @__PURE__ */ jsx("path", { d: "M464 97.42V208a16 16 0 01-16 16H337.42c-14.26 0-21.4-17.23-11.32-27.31L436.69 86.1C446.77 76 464 83.16 464 97.42z" })
+  ] });
+};
+const Choice = () => {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        fill: "none",
+        strokeLinecap: "round",
+        strokeWidth: "64",
+        d: "M112 144h0M112 256h0M112 368h0"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        fill: "none",
+        strokeLinecap: "round",
+        strokeWidth: "40",
+        d: "M208 144h208M208 256h208M208 368h208"
+      }
+    )
+  ] });
+};
+const ControlIcon = ({
+  children,
+  label
+}) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 512 512",
+    fill: "currentColor",
+    stroke: "currentColor",
+    focusable: "false",
+    "aria-hidden": "true",
+    role: "presentation",
+    "data-testid": "clover-canvas-button-svg",
+    "data-label": label,
+    children
+  }
+);
+export {
+  Choice,
+  ControlIcon,
+  Reset,
+  Rotate,
+  ZoomExitFullScreen,
+  ZoomFullScreen,
+  ZoomIn,
+  ZoomOut
+};

package/dist/ui/heading.mjs

@@ -0,0 +1,19 @@
+"use client";
+function headingTag(level) {
+  const whole = Math.max(1, Math.round(level));
+  return whole <= 6 ? `h${whole}` : null;
+}
+const titleTag = (level, fallback = "p") => headingTag(level) ?? fallback;
+function titled(level, id, fallback = "p") {
+  const tag = headingTag(level);
+  return tag ? { as: tag, title: {}, group: {} } : {
+    as: fallback,
+    title: { id },
+    group: { role: "group", "aria-labelledby": id }
+  };
+}
+export {
+  headingTag,
+  titleTag,
+  titled
+};

package/dist/ui/languageCode.mjs

@@ -0,0 +1,8 @@
+"use client";
+function languageCode(tag) {
+  if (!tag || tag === "none") return void 0;
+  return tag.toUpperCase();
+}
+export {
+  languageCode
+};

package/dist/ui/mediaIcons.mjs

@@ -0,0 +1,104 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ZoomExitFullScreen, ZoomFullScreen } from "./controlGlyphs.mjs";
+const svgProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  // Their own size, so they never fill a button without the stylesheet.
+  width: 16,
+  height: 16,
+  viewBox: "0 0 512 512",
+  "aria-hidden": true,
+  focusable: false
+};
+const PlayIcon = () => /* @__PURE__ */ jsx("svg", { ...svgProps, children: /* @__PURE__ */ jsx("path", { d: "M133 440a35.37 35.37 0 01-17.5-4.67c-12-6.8-19.46-20-19.46-34.33V111c0-14.37 7.46-27.53 19.46-34.33a35.13 35.13 0 0135.77.45l247.85 148.36a36 36 0 010 61.11L151.23 435a35.5 35.5 0 01-18.23 5z" }) });
+const PauseIcon = () => /* @__PURE__ */ jsx("svg", { ...svgProps, children: /* @__PURE__ */ jsx("path", { d: "M224 432h-80V80h80zm144 0h-80V80h80z" }) });
+const VolumeHighIcon = () => /* @__PURE__ */ jsxs("svg", { ...svgProps, children: [
+  /* @__PURE__ */ jsx("path", { d: "M232 416a23.88 23.88 0 01-14.2-4.68 8.27 8.27 0 01-.66-.51L125.76 336H56a24 24 0 01-24-24V200a24 24 0 0124-24h69.75l91.37-74.81a8.27 8.27 0 01.66-.51A24 24 0 01256 120v272a24 24 0 01-24 24z" }),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M320 336a16 16 0 01-14.29-23.16c8.34-16.63 12.29-34.5 12.29-56.84s-3.95-40.21-12.29-56.84a16 16 0 0128.58-14.32C345.06 205.86 350 228.13 350 256s-4.94 50.14-15.71 71.16A16 16 0 01320 336zM368 384a16 16 0 01-13.87-24C373.85 325.75 384 292.28 384 256c0-36.28-10.15-69.75-29.87-104a16 16 0 0127.74-16C404.19 174.71 416 214.17 416 256s-11.81 81.29-34.13 120A16 16 0 01368 384z",
+      fillOpacity: "0.85"
+    }
+  )
+] });
+const VolumeMutedIcon = () => /* @__PURE__ */ jsxs("svg", { ...svgProps, children: [
+  /* @__PURE__ */ jsx("path", { d: "M232 416a23.88 23.88 0 01-14.2-4.68 8.27 8.27 0 01-.66-.51L125.76 336H56a24 24 0 01-24-24V200a24 24 0 0124-24h69.75l91.37-74.81a8.27 8.27 0 01.66-.51A24 24 0 01256 120v272a24 24 0 01-24 24z" }),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M320 196l128 120M448 196L320 316",
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeWidth: "32"
+    }
+  )
+] });
+const CaptionsIcon = ({ on = false }) => /* @__PURE__ */ jsxs("svg", { ...svgProps, "data-on": on || void 0, className: "clover-captions-icon", children: [
+  on ? (
+    // Filled: the outlined card's outer edge, so the two are one size. No `stroke`,
+    // which the transport's glyph rules read as an outline (`Transport.css`).
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: "22",
+        y: "86",
+        width: "468",
+        height: "340",
+        rx: "74",
+        fill: "currentColor"
+      }
+    )
+  ) : /* @__PURE__ */ jsx(
+    "rect",
+    {
+      x: "40",
+      y: "104",
+      width: "432",
+      height: "304",
+      rx: "56",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "36"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      className: "clover-captions-icon-letters",
+      d: "M228 216a48 48 0 1 0 0 80M356 216a48 48 0 1 0 0 80",
+      fill: "none",
+      stroke: on ? "var(--clover-color-control, #1a1d1e)" : "currentColor",
+      strokeLinecap: "round",
+      strokeWidth: "36"
+    }
+  )
+] });
+const ChaptersIcon = () => /* @__PURE__ */ jsxs("svg", { ...svgProps, children: [
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M160 144h288M160 256h288M160 368h288",
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeWidth: "32"
+    }
+  ),
+  /* @__PURE__ */ jsx("circle", { cx: "80", cy: "144", r: "20" }),
+  /* @__PURE__ */ jsx("circle", { cx: "80", cy: "256", r: "20" }),
+  /* @__PURE__ */ jsx("circle", { cx: "80", cy: "368", r: "20" })
+] });
+const FullScreenIcon = () => /* @__PURE__ */ jsx("svg", { ...svgProps, children: /* @__PURE__ */ jsx(ZoomFullScreen, {}) });
+const ExitFullScreenIcon = () => /* @__PURE__ */ jsx("svg", { ...svgProps, children: /* @__PURE__ */ jsx(ZoomExitFullScreen, {}) });
+export {
+  CaptionsIcon,
+  ChaptersIcon,
+  ExitFullScreenIcon,
+  FullScreenIcon,
+  PauseIcon,
+  PlayIcon,
+  VolumeHighIcon,
+  VolumeMutedIcon
+};

package/dist/ui/useClusterReach.mjs

@@ -0,0 +1,50 @@
+"use client";
+import { useLayoutEffect } from "react";
+const BELOW_MIN = 112;
+const BESIDE_MIN = 128;
+function useClusterReach(cluster) {
+  useLayoutEffect(() => {
+    const canvas = cluster == null ? void 0 : cluster.closest(".clover-canvas");
+    if (!cluster || !canvas) return;
+    const write = (gone = false) => {
+      let start = cluster.offsetWidth;
+      let bottom = 0;
+      for (const control of gone ? [] : Array.from(cluster.children)) {
+        if (!(control instanceof HTMLElement) || !control.offsetParent)
+          continue;
+        start = Math.min(start, control.offsetLeft);
+        bottom = Math.max(bottom, control.offsetTop + control.offsetHeight);
+      }
+      const reach = { width: cluster.offsetWidth - start, height: bottom };
+      for (const [name, value] of Object.entries(reach)) {
+        const property = `--clover-canvas-controls-${name}`;
+        if (bottom) canvas.style.setProperty(property, `${value}px`);
+        else canvas.style.removeProperty(property);
+      }
+      const inset = cluster.offsetTop;
+      const transport = canvas.querySelector(
+        ":scope > .clover-canvas-media > .clover-canvas-transport"
+      );
+      const below = canvas.clientHeight - 2 * inset - reach.height - ((transport == null ? void 0 : transport.offsetHeight) ?? 0);
+      const beside = cluster.offsetLeft + start - inset;
+      if (bottom && below < BELOW_MIN && beside >= BESIDE_MIN)
+        canvas.dataset.popups = "beside";
+      else delete canvas.dataset.popups;
+    };
+    write();
+    const resize = new ResizeObserver(() => write());
+    resize.observe(cluster);
+    resize.observe(canvas);
+    const mutation = new MutationObserver(() => write());
+    mutation.observe(cluster, { childList: true });
+    mutation.observe(canvas, { childList: true });
+    return () => {
+      resize.disconnect();
+      mutation.disconnect();
+      write(true);
+    };
+  }, [cluster]);
+}
+export {
+  useClusterReach
+};

package/dist/ui/useContainerName.mjs

@@ -0,0 +1,19 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useUniqueId } from "./useUniqueId.mjs";
+import { langWithin } from "../i18n/config.mjs";
+import { useCloverTranslation } from "../i18n/useCloverTranslation.mjs";
+function useContainerName(text, lang, named = false, hostLanguage) {
+  const id = useUniqueId();
+  const { hostLanguage: host } = useCloverTranslation(void 0, hostLanguage);
+  if (named) return { props: {}, node: null };
+  const other = langWithin(lang, host);
+  if (other === void 0) return { props: { "aria-label": text }, node: null };
+  return {
+    props: { "aria-labelledby": id },
+    node: /* @__PURE__ */ jsx("span", { hidden: true, id, lang: other, children: text })
+  };
+}
+export {
+  useContainerName
+};

package/dist/ui/useOneOpen.mjs

@@ -0,0 +1,22 @@
+"use client";
+import { useRef, useEffect } from "react";
+import { useUniqueId } from "./useUniqueId.mjs";
+const opened = /* @__PURE__ */ new Map();
+function useOneOpen(open, close) {
+  const id = useUniqueId();
+  const latest = useRef(close);
+  latest.current = close;
+  useEffect(() => open ? join(id, latest) : void 0, [open, id]);
+}
+function join(id, close) {
+  for (const [other, closeOther] of [...opened]) {
+    if (other !== id) closeOther.current();
+  }
+  opened.set(id, close);
+  return () => {
+    opened.delete(id);
+  };
+}
+export {
+  useOneOpen
+};

package/dist/ui/useRovingFocus.mjs

@@ -0,0 +1,64 @@
+"use client";
+import { useState, useRef, useEffect, useCallback } from "react";
+function useRovingFocus(count, selected, {
+  orientation = "both",
+  rtl = false,
+  onActivate,
+  onMove
+} = {}) {
+  const [focused, setFocused] = useState(Math.max(0, selected));
+  const elements = useRef([]);
+  const activate = useRef(onActivate);
+  activate.current = onActivate;
+  const move = useRef(onMove);
+  move.current = onMove;
+  useEffect(() => {
+    if (selected >= 0) setFocused(selected);
+  }, [selected]);
+  const clamped = Math.min(focused, Math.max(0, count - 1));
+  const focusAt = useCallback((index) => {
+    var _a;
+    setFocused(index);
+    (_a = elements.current[index]) == null ? void 0 : _a.focus();
+  }, []);
+  const onKeyDown = useCallback(
+    (event, index) => {
+      var _a, _b;
+      const forward = rtl ? "ArrowLeft" : "ArrowRight";
+      const backward = rtl ? "ArrowRight" : "ArrowLeft";
+      const horizontal = orientation !== "vertical";
+      const vertical = orientation !== "horizontal";
+      let next = null;
+      if (horizontal && event.key === forward || vertical && event.key === "ArrowDown") {
+        next = Math.min(count - 1, index + 1);
+      } else if (horizontal && event.key === backward || vertical && event.key === "ArrowUp") {
+        next = Math.max(0, index - 1);
+      } else if (event.key === "Home") {
+        next = 0;
+      } else if (event.key === "End") {
+        next = count - 1;
+      } else if (event.key === "Enter" || event.key === " ") {
+        (_a = activate.current) == null ? void 0 : _a.call(activate, index, event);
+        event.preventDefault();
+        return;
+      }
+      if (next === null) return;
+      event.preventDefault();
+      focusAt(next);
+      if (next !== index) (_b = move.current) == null ? void 0 : _b.call(move, next, event);
+    },
+    [count, orientation, rtl, focusAt]
+  );
+  const itemProps = (index) => ({
+    ref: (element) => {
+      elements.current[index] = element;
+    },
+    tabIndex: index === clamped ? 0 : -1,
+    onKeyDown: (event) => onKeyDown(event, index),
+    onFocus: () => setFocused(index)
+  });
+  return { focused: clamped, itemProps };
+}
+export {
+  useRovingFocus
+};