bits-lab 0.0.0-stage → 0.1.2

package/dist/LightboxGallery.js

@@ -0,0 +1,327 @@
+'use client';
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useInsertionEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+const STYLE_ID = "bl-lightbox";
+const CSS = `
+.bl-lb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--bl-thumb), 100%), 1fr)); gap: var(--bl-gap); width: 100%; margin: 0; padding: 0; list-style: none; }
+.bl-lb-thumb { display: block; width: 100%; aspect-ratio: var(--bl-ratio); padding: 0; overflow: hidden; border: 0; border-radius: var(--bl-radius); background: var(--bl-surface); cursor: zoom-in; }
+.bl-lb-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 300ms cubic-bezier(.2,.9,.25,1); }
+.bl-lb-thumb:hover img { transform: scale(1.05); }
+.bl-lb-thumb:focus-visible { outline: 3px solid var(--bl-accent); outline-offset: 2px; }
+.bl-lb-thumb[data-hidden] img { visibility: hidden; }
+.bl-lb { position: fixed; inset: 0; z-index: 2000; display: grid; grid-template-rows: auto 1fr auto; color: #fff; font-family: var(--bl-font); }
+.bl-lb__backdrop { position: absolute; inset: 0; background: var(--bl-backdrop); animation: bl-lb-fade 240ms ease both; }
+.bl-lb[data-closing] .bl-lb__backdrop { animation: bl-lb-fade 220ms ease reverse both; }
+.bl-lb__bar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; font-size: 14px; }
+.bl-lb__count { color: rgba(255,255,255,0.75); font-variant-numeric: tabular-nums; }
+.bl-lb__tools { display: flex; gap: 6px; }
+.bl-lb__btn { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,0.12); color: #fff; cursor: pointer; }
+.bl-lb__btn:hover { background: rgba(255,255,255,0.22); }
+.bl-lb__btn:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 2px; }
+.bl-lb__btn:disabled { opacity: 0.3; cursor: default; }
+.bl-lb__stage { position: relative; z-index: 1; display: grid; place-items: center; min-height: 0; overflow: hidden; touch-action: none; cursor: grab; }
+.bl-lb__stage[data-zoomed] { cursor: move; }
+.bl-lb__img { max-width: 92vw; max-height: 100%; object-fit: contain; border-radius: 6px; user-select: none; -webkit-user-drag: none; will-change: transform; }
+.bl-lb__img[data-settle] { transition: transform 260ms cubic-bezier(.2,.9,.25,1); }
+.bl-lb__nav { position: absolute; top: 50%; z-index: 2; transform: translateY(-50%); }
+.bl-lb__nav[data-side="prev"] { left: 12px; }
+.bl-lb__nav[data-side="next"] { right: 12px; }
+.bl-lb__caption { position: relative; z-index: 2; min-height: 1.5em; padding: 12px 16px 18px; color: rgba(255,255,255,0.85); font-size: 14px; text-align: center; }
+.bl-lb__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+@keyframes bl-lb-fade { from { opacity: 0; } }
+@media (max-width: 640px) { .bl-lb__nav { display: none; } }
+@media (prefers-reduced-motion: reduce) { .bl-lb__img[data-settle], .bl-lb-thumb img { transition: none; } }
+`;
+function useStyles() {
+  useInsertionEffect(() => {
+    if (typeof document === "undefined") return;
+    const style = document.getElementById(STYLE_ID) ?? Object.assign(document.createElement("style"), { id: STYLE_ID });
+    style.textContent = CSS;
+    if (!style.isConnected) document.head.appendChild(style);
+  }, []);
+}
+const MAX_ZOOM = 4;
+const reducedMotion = () => !!window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+const Icon = ({ d }) => /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d }) });
+function LightboxGallery({
+  images = [],
+  thumbSize = 160,
+  gap = 10,
+  aspectRatio = "1",
+  radius = 10,
+  imageStyle,
+  label = "Gallery",
+  backdropColor = "rgba(8,8,16,0.92)",
+  surfaceColor = "#1a1c2c",
+  accentColor = "#73eff7",
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  className = "",
+  style
+}) {
+  useStyles();
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const [open, setOpen] = useState(null);
+  const [closing, setClosing] = useState(false);
+  const [view, setView] = useState({ scale: 1, x: 0, y: 0, dx: 0 });
+  const [settle, setSettle] = useState(false);
+  const thumbRefs = useRef([]);
+  const imgRef = useRef(null);
+  const dialogRef = useRef(null);
+  const pointers = useRef(/* @__PURE__ */ new Map());
+  const gesture = useRef(null);
+  const dragged = useRef(false);
+  const flip = useRef(false);
+  const image = open != null ? images[open] : null;
+  const zoomed = view.scale > 1.01;
+  const reset = () => setView({ scale: 1, x: 0, y: 0, dx: 0 });
+  const show = (index) => {
+    flip.current = true;
+    setClosing(false);
+    reset();
+    setOpen(index);
+  };
+  const go = (step) => {
+    if (open == null) return;
+    const next = open + step;
+    if (next < 0 || next >= images.length) return;
+    flip.current = false;
+    setSettle(false);
+    reset();
+    setOpen(next);
+  };
+  const close = () => {
+    if (open == null || closing) return;
+    const img = imgRef.current;
+    const thumb = thumbRefs.current[open];
+    setClosing(true);
+    const finish = () => {
+      setOpen(null);
+      setClosing(false);
+      thumb?.focus({ preventScroll: true });
+    };
+    if (!img || !thumb || reducedMotion()) {
+      finish();
+      return;
+    }
+    const from = img.getBoundingClientRect();
+    const to = thumb.getBoundingClientRect();
+    const s = to.width / from.width;
+    img.animate([{ transform: img.style.transform || "none" }, { transform: `translate(${to.left + to.width / 2 - (from.left + from.width / 2)}px, ${to.top + to.height / 2 - (from.top + from.height / 2)}px) scale(${s})` }], {
+      duration: 260,
+      easing: "cubic-bezier(.4,0,.2,1)",
+      fill: "forwards"
+    }).finished.catch(() => null).then(finish);
+  };
+  useLayoutEffect(() => {
+    if (open == null || !flip.current) return;
+    flip.current = false;
+    const img = imgRef.current;
+    const thumb = thumbRefs.current[open];
+    if (!img || !thumb || reducedMotion()) return;
+    const run = () => {
+      const to = img.getBoundingClientRect();
+      const from = thumb.getBoundingClientRect();
+      if (!to.width) return;
+      const s = from.width / to.width;
+      img.animate([{ transform: `translate(${from.left + from.width / 2 - (to.left + to.width / 2)}px, ${from.top + from.height / 2 - (to.top + to.height / 2)}px) scale(${s})` }, { transform: "none" }], { duration: 320, easing: "cubic-bezier(.2,.9,.25,1)" });
+    };
+    if (img.complete) run();
+    else img.addEventListener("load", run, { once: true });
+  }, [open]);
+  useEffect(() => {
+    if (open == null) return void 0;
+    const { body } = document;
+    const previous = body.style.overflow;
+    body.style.overflow = "hidden";
+    dialogRef.current?.querySelector("[data-close]")?.focus({ preventScroll: true });
+    const onKey = (event) => {
+      if (event.key === "Escape") close();
+      else if (event.key === "ArrowRight") go(1);
+      else if (event.key === "ArrowLeft") go(-1);
+      else if (event.key === "+" || event.key === "=") zoomBy(1.5);
+      else if (event.key === "-") zoomBy(1 / 1.5);
+      else if (event.key === "0") reset();
+      else if (event.key === "Tab") {
+        const items = [...dialogRef.current.querySelectorAll("button:not(:disabled)")];
+        const first = items[0];
+        const last = items[items.length - 1];
+        if (event.shiftKey && document.activeElement === first) {
+          event.preventDefault();
+          last.focus();
+        } else if (!event.shiftKey && document.activeElement === last) {
+          event.preventDefault();
+          first.focus();
+        }
+        return;
+      } else return;
+      event.preventDefault();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => {
+      body.style.overflow = previous;
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open, closing]);
+  const bound = (next) => {
+    const img = imgRef.current;
+    if (!img || next.scale <= 1) return { ...next, scale: Math.max(1, next.scale), x: 0, y: 0 };
+    const maxX = img.offsetWidth * (next.scale - 1) / 2;
+    const maxY = img.offsetHeight * (next.scale - 1) / 2;
+    return { ...next, x: Math.max(-maxX, Math.min(maxX, next.x)), y: Math.max(-maxY, Math.min(maxY, next.y)) };
+  };
+  const zoomBy = (factor, cx, cy) => {
+    setSettle(true);
+    setView((v) => {
+      const scale = Math.max(1, Math.min(MAX_ZOOM, v.scale * factor));
+      const rect = imgRef.current?.getBoundingClientRect();
+      if (!rect || cx == null) return bound({ ...v, scale, dx: 0 });
+      const ox = cx - (rect.left + rect.width / 2);
+      const oy = cy - (rect.top + rect.height / 2);
+      const k = scale / v.scale;
+      return bound({ scale, x: v.x * k - ox * (k - 1), y: v.y * k - oy * (k - 1), dx: 0 });
+    });
+  };
+  const onPointerDown = (event) => {
+    if (event.button !== 0 && event.pointerType === "mouse") return;
+    try {
+      event.currentTarget.setPointerCapture(event.pointerId);
+    } catch {
+    }
+    pointers.current.set(event.pointerId, { x: event.clientX, y: event.clientY });
+    dragged.current = false;
+    setSettle(false);
+    if (pointers.current.size === 2) {
+      const [a, b] = [...pointers.current.values()];
+      gesture.current = { kind: "pinch", dist: Math.hypot(a.x - b.x, a.y - b.y), scale: view.scale };
+    } else {
+      gesture.current = { kind: zoomed ? "pan" : "swipe", x: event.clientX, y: event.clientY, vx: view.x, vy: view.y };
+    }
+  };
+  const onPointerMove = (event) => {
+    if (!pointers.current.has(event.pointerId)) return;
+    pointers.current.set(event.pointerId, { x: event.clientX, y: event.clientY });
+    const g = gesture.current;
+    if (!g) return;
+    if (g.kind !== "pinch" && Math.hypot(event.clientX - g.x, event.clientY - g.y) > 6) dragged.current = true;
+    if (g.kind === "pinch" && pointers.current.size >= 2) {
+      const [a, b] = [...pointers.current.values()];
+      const scale = Math.max(1, Math.min(MAX_ZOOM, g.scale * Math.hypot(a.x - b.x, a.y - b.y) / g.dist));
+      setView((v) => bound({ ...v, scale }));
+    } else if (g.kind === "pan") {
+      setView((v) => bound({ ...v, x: g.vx + event.clientX - g.x, y: g.vy + event.clientY - g.y }));
+    } else if (g.kind === "swipe") {
+      setView((v) => ({ ...v, dx: event.clientX - g.x }));
+    }
+  };
+  const onPointerUp = (event) => {
+    pointers.current.delete(event.pointerId);
+    const g = gesture.current;
+    if (pointers.current.size) return;
+    gesture.current = null;
+    if (g?.kind === "swipe") {
+      const dx = event.clientX - g.x;
+      const atEdge = dx > 0 && open === 0 || dx < 0 && open === images.length - 1;
+      if (Math.abs(dx) > 70 && !atEdge) go(dx < 0 ? 1 : -1);
+      else {
+        setSettle(true);
+        setView((v) => ({ ...v, dx: 0 }));
+      }
+    }
+  };
+  const onWheel = (event) => {
+    event.preventDefault();
+    zoomBy(Math.exp(-event.deltaY * 25e-4), event.clientX, event.clientY);
+  };
+  const stageRef = useRef(null);
+  useEffect(() => {
+    const node = stageRef.current;
+    if (!node) return void 0;
+    node.addEventListener("wheel", onWheel, { passive: false });
+    return () => node.removeEventListener("wheel", onWheel);
+  });
+  useEffect(() => {
+    if (open == null) return;
+    [open - 1, open + 1].forEach((i) => {
+      if (images[i]) new Image().src = images[i].src;
+    });
+  }, [open, images]);
+  const vars = { "--bl-thumb": `${thumbSize}px`, "--bl-gap": `${gap}px`, "--bl-ratio": aspectRatio, "--bl-radius": `${radius}px`, "--bl-backdrop": backdropColor, "--bl-surface": surfaceColor, "--bl-accent": accentColor, "--bl-font": fontFamily };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("ul", { className: `bl-lb-grid ${className}`, "aria-label": label, style: { ...vars, ...style }, children: images.map((img, i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: (node) => {
+          thumbRefs.current[i] = node;
+        },
+        type: "button",
+        className: "bl-lb-thumb",
+        "data-hidden": open === i && !reducedMotion() || void 0,
+        "aria-label": `Open ${img.alt || `image ${i + 1}`}`,
+        onClick: () => show(i),
+        children: /* @__PURE__ */ jsx("img", { src: img.thumb ?? img.src, alt: "", loading: "lazy", style: imageStyle })
+      }
+    ) }, img.src)) }),
+    image && createPortal(
+      /* @__PURE__ */ jsxs("div", { ref: dialogRef, className: "bl-lb", role: "dialog", "aria-modal": "true", "aria-label": `${label} viewer`, "data-closing": closing || void 0, style: vars, children: [
+        /* @__PURE__ */ jsx("div", { className: "bl-lb__backdrop", onClick: close, "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxs("div", { className: "bl-lb__bar", children: [
+          /* @__PURE__ */ jsxs("span", { className: "bl-lb__count", "aria-hidden": "true", children: [
+            open + 1,
+            " / ",
+            images.length
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "bl-lb__tools", children: [
+            /* @__PURE__ */ jsx("button", { type: "button", className: "bl-lb__btn", "aria-label": "Zoom out", disabled: !zoomed, onClick: () => zoomBy(1 / 1.5), children: /* @__PURE__ */ jsx(Icon, { d: "M3 8h10" }) }),
+            /* @__PURE__ */ jsx("button", { type: "button", className: "bl-lb__btn", "aria-label": "Zoom in", disabled: view.scale >= MAX_ZOOM, onClick: () => zoomBy(1.5), children: /* @__PURE__ */ jsx(Icon, { d: "M3 8h10M8 3v10" }) }),
+            /* @__PURE__ */ jsx("button", { type: "button", className: "bl-lb__btn", "data-close": "", "aria-label": "Close", onClick: close, children: /* @__PURE__ */ jsx(Icon, { d: "m3.5 3.5 9 9M12.5 3.5l-9 9" }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: stageRef,
+            className: "bl-lb__stage",
+            "data-zoomed": zoomed || void 0,
+            onPointerDown,
+            onPointerMove,
+            onPointerUp,
+            onPointerCancel: onPointerUp,
+            onDoubleClick: (event) => {
+              if (zoomed) {
+                setSettle(true);
+                reset();
+              } else zoomBy(2.5, event.clientX, event.clientY);
+            },
+            onClick: (event) => {
+              if (event.target === event.currentTarget && !zoomed && !dragged.current) close();
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "img",
+                {
+                  ref: imgRef,
+                  className: "bl-lb__img",
+                  "data-settle": settle || void 0,
+                  src: image.src,
+                  alt: image.alt ?? "",
+                  draggable: false,
+                  style: { ...imageStyle, transform: `translate(${view.x + view.dx}px, ${view.y}px) scale(${view.scale})` }
+                },
+                open
+              ),
+              /* @__PURE__ */ jsx("button", { type: "button", className: "bl-lb__btn bl-lb__nav", "data-side": "prev", "aria-label": "Previous image", disabled: open === 0, onClick: () => go(-1), children: /* @__PURE__ */ jsx(Icon, { d: "M10 3 5 8l5 5" }) }),
+              /* @__PURE__ */ jsx("button", { type: "button", className: "bl-lb__btn bl-lb__nav", "data-side": "next", "aria-label": "Next image", disabled: open === images.length - 1, onClick: () => go(1), children: /* @__PURE__ */ jsx(Icon, { d: "m6 3 5 5-5 5" }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "bl-lb__caption", children: image.caption }),
+        /* @__PURE__ */ jsx("p", { className: "bl-lb__sr", "aria-live": "polite", id: `${uid}-status`, children: `Image ${open + 1} of ${images.length}${image.alt ? `: ${image.alt}` : ""}` })
+      ] }),
+      document.body
+    )
+  ] });
+}
+export {
+  LightboxGallery as default
+};

package/dist/LinkPeek.d.ts

@@ -0,0 +1,36 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface LinkPreview {
+    title?: string;
+    description?: string;
+    image?: string;
+    imageStyle?: CSSProperties;
+    /** Defaults to the link's hostname. */
+    site?: string;
+}
+export interface LinkPeekProps {
+    href: string;
+    children?: ReactNode;
+    /** The card content, when you already have it. */
+    preview?: LinkPreview;
+    /** Fetches the preview on first open; results are cached per href. */
+    load?: (href: string) => Promise<LinkPreview> | LinkPreview;
+    /** Hover delay in ms (focus shows at once). */
+    delay?: number;
+    width?: number;
+    imageHeight?: number;
+    /** Lean toward the pointer, in degrees. */
+    tilt?: number;
+    target?: string;
+    rel?: string;
+    backgroundColor?: string;
+    textColor?: string;
+    mutedColor?: string;
+    lineColor?: string;
+    accentColor?: string;
+    linkColor?: string;
+    radius?: number;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function LinkPeek({ href, children, preview, load, delay, width, imageHeight, tilt, target, rel, backgroundColor, textColor, mutedColor, lineColor, accentColor, linkColor, radius, fontFamily, className, style }: LinkPeekProps): import("react").JSX.Element;

package/dist/LinkPeek.js

@@ -0,0 +1,194 @@
+'use client';
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useInsertionEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+const STYLE_ID = "bl-link-peek";
+const CSS = `
+.bl-peek-link { color: var(--bl-link, inherit); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
+.bl-peek-link:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 2px; border-radius: 2px; }
+.bl-peek { position: fixed; top: 0; left: 0; z-index: 1700; width: var(--bl-w); pointer-events: none; font-family: var(--bl-font); }
+.bl-peek__card { overflow: hidden; border-radius: var(--bl-radius); background: var(--bl-bg); color: var(--bl-ink); box-shadow: 0 0 0 1px var(--bl-line), 0 24px 50px -20px rgba(0,0,0,0.8); transform-origin: var(--bl-origin); animation: bl-peek-in 320ms cubic-bezier(.3,1.4,.5,1) backwards; transform: rotate(var(--bl-tilt, 0deg)); transition: transform 200ms ease-out; }
+.bl-peek[data-closing] .bl-peek__card { animation: bl-peek-out 140ms ease-in both; }
+.bl-peek__image { display: block; width: 100%; height: var(--bl-img-h); object-fit: cover; background: var(--bl-line); }
+.bl-peek__body { display: grid; gap: 4px; padding: 12px 14px 14px; }
+.bl-peek__site { color: var(--bl-accent); font-size: 12px; font-weight: 600; }
+.bl-peek__title { font-size: 15px; font-weight: 700; line-height: 1.3; }
+.bl-peek__desc { color: var(--bl-muted); font-size: 13px; line-height: 1.45; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
+.bl-peek__shimmer { background: linear-gradient(90deg, var(--bl-line) 0 40%, color-mix(in srgb, var(--bl-line) 60%, var(--bl-ink)) 50%, var(--bl-line) 60% 100%); background-size: 300% 100%; animation: bl-peek-shimmer 1.2s linear infinite; border-radius: 4px; }
+.bl-peek__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+@keyframes bl-peek-in { from { opacity: 0; transform: translateY(var(--bl-from)) scale(0.92) rotate(0deg); } }
+@keyframes bl-peek-out { to { opacity: 0; transform: translateY(var(--bl-from)) scale(0.96); } }
+@keyframes bl-peek-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
+@media (prefers-reduced-motion: reduce) { .bl-peek__card { animation-name: bl-peek-fade; transition: none; transform: none; } .bl-peek[data-closing] .bl-peek__card { animation-name: bl-peek-fade-out; } .bl-peek__shimmer { animation: none; } }
+@keyframes bl-peek-fade { from { opacity: 0; } }
+@keyframes bl-peek-fade-out { to { opacity: 0; } }
+`;
+function useStyles() {
+  useInsertionEffect(() => {
+    if (typeof document === "undefined") return;
+    const style = document.getElementById(STYLE_ID) ?? Object.assign(document.createElement("style"), { id: STYLE_ID });
+    style.textContent = CSS;
+    if (!style.isConnected) document.head.appendChild(style);
+  }, []);
+}
+const cache = /* @__PURE__ */ new Map();
+const siteOf = (href) => {
+  try {
+    return new URL(href, window.location.href).hostname.replace(/^www\./, "");
+  } catch {
+    return href;
+  }
+};
+function LinkPeek({
+  href,
+  children,
+  preview,
+  load,
+  delay = 350,
+  width = 280,
+  imageHeight = 140,
+  tilt = 4,
+  target,
+  rel,
+  backgroundColor = "#1a1c2c",
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  lineColor = "#333c57",
+  accentColor = "#73eff7",
+  linkColor,
+  radius = 12,
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  className = "",
+  style
+}) {
+  useStyles();
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const linkRef = useRef(null);
+  const cardRef = useRef(null);
+  const timer = useRef(0);
+  const [phase, setPhase] = useState("closed");
+  const [data, setData] = useState(preview ?? cache.get(href) ?? null);
+  const [placement, setPlacement] = useState({ x: 0, y: 0, below: false });
+  useEffect(() => setData(preview ?? cache.get(href) ?? null), [preview, href]);
+  useEffect(() => {
+    if (phase !== "open" || data || !load) return void 0;
+    let alive = true;
+    Promise.resolve(load(href)).then((result) => {
+      cache.set(href, result);
+      if (alive) setData(result);
+    }).catch(() => alive && setData({ title: siteOf(href), description: "Preview unavailable." }));
+    return () => {
+      alive = false;
+    };
+  }, [phase, data, load, href]);
+  const show = (wait) => {
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => setPhase("open"), wait);
+  };
+  const hide = (wait) => {
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => setPhase((p) => p === "open" ? "closing" : p), wait);
+  };
+  useEffect(() => () => clearTimeout(timer.current), []);
+  useLayoutEffect(() => {
+    if (phase !== "open") return void 0;
+    const place = () => {
+      const link = linkRef.current?.getBoundingClientRect();
+      const card = cardRef.current;
+      if (!link || !card) return;
+      const h = card.offsetHeight;
+      const below = link.top - h - 12 < 8;
+      const x = Math.max(8, Math.min(window.innerWidth - width - 8, link.left + link.width / 2 - width / 2));
+      const y = below ? link.bottom + 10 : link.top - h - 10;
+      setPlacement({ x, y, below });
+    };
+    place();
+    window.addEventListener("scroll", place, true);
+    window.addEventListener("resize", place);
+    const resize = new ResizeObserver(place);
+    if (cardRef.current) resize.observe(cardRef.current);
+    return () => {
+      window.removeEventListener("scroll", place, true);
+      window.removeEventListener("resize", place);
+      resize.disconnect();
+    };
+  }, [phase, width]);
+  useEffect(() => {
+    if (phase !== "open") return void 0;
+    const onKey = (event) => {
+      if (event.key === "Escape") setPhase("closing");
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [phase]);
+  const onMove = (event) => {
+    if (phase !== "open" || !cardRef.current) return;
+    const rect = linkRef.current.getBoundingClientRect();
+    const offset = (event.clientX - (rect.left + rect.width / 2)) / Math.max(40, rect.width / 2);
+    cardRef.current.style.setProperty("--bl-tilt", `${(Math.max(-1, Math.min(1, offset)) * tilt).toFixed(2)}deg`);
+  };
+  const site = data?.site ?? siteOf(href);
+  const vars = {
+    "--bl-w": `${width}px`,
+    "--bl-img-h": `${imageHeight}px`,
+    "--bl-bg": backgroundColor,
+    "--bl-ink": textColor,
+    "--bl-muted": mutedColor,
+    "--bl-line": lineColor,
+    "--bl-accent": accentColor,
+    "--bl-link": linkColor,
+    "--bl-radius": `${radius}px`,
+    "--bl-font": fontFamily
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "a",
+      {
+        ref: linkRef,
+        href,
+        target,
+        rel: rel ?? (target === "_blank" ? "noopener noreferrer" : void 0),
+        className: `bl-peek-link ${className}`,
+        "aria-describedby": phase === "open" && data ? `${uid}-desc` : void 0,
+        style: { ...vars, ...style },
+        onPointerEnter: (event) => event.pointerType === "mouse" && show(delay),
+        onPointerMove: onMove,
+        onPointerLeave: () => hide(120),
+        onFocus: () => show(0),
+        onBlur: () => hide(0),
+        children
+      }
+    ),
+    phase !== "closed" && createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "bl-peek",
+          "data-closing": phase === "closing" || void 0,
+          "aria-hidden": "true",
+          style: { ...vars, transform: `translate(${placement.x}px, ${placement.y}px)`, "--bl-from": placement.below ? "-8px" : "8px", "--bl-origin": placement.below ? "top center" : "bottom center" },
+          children: /* @__PURE__ */ jsx("div", { ref: cardRef, className: "bl-peek__card", onAnimationEnd: () => phase === "closing" && setPhase("closed"), children: data ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            data.image && /* @__PURE__ */ jsx("img", { className: "bl-peek__image", src: data.image, alt: "", style: data.imageStyle }),
+            /* @__PURE__ */ jsxs("div", { className: "bl-peek__body", children: [
+              /* @__PURE__ */ jsx("span", { className: "bl-peek__site", children: site }),
+              /* @__PURE__ */ jsx("span", { className: "bl-peek__title", children: data.title }),
+              data.description && /* @__PURE__ */ jsx("span", { className: "bl-peek__desc", children: data.description })
+            ] })
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: "bl-peek__image bl-peek__shimmer", style: { borderRadius: 0 } }),
+            /* @__PURE__ */ jsxs("div", { className: "bl-peek__body", children: [
+              /* @__PURE__ */ jsx("span", { className: "bl-peek__shimmer", style: { height: 12, width: "40%" } }),
+              /* @__PURE__ */ jsx("span", { className: "bl-peek__shimmer", style: { height: 16, width: "80%" } }),
+              /* @__PURE__ */ jsx("span", { className: "bl-peek__shimmer", style: { height: 12, width: "95%" } })
+            ] })
+          ] }) })
+        }
+      ),
+      document.body
+    ),
+    data && /* @__PURE__ */ jsx("span", { id: `${uid}-desc`, className: "bl-peek__sr", children: `Preview: ${data.title ?? site}. ${data.description ?? ""}` })
+  ] });
+}
+export {
+  LinkPeek as default
+};

package/dist/LogoOrbit.d.ts

@@ -0,0 +1,37 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface OrbitLogo {
+    id?: string;
+    /** Names the logo on hover and for screen readers. */
+    label: string;
+    icon: ReactNode;
+}
+export interface LogoOrbitProps {
+    logos?: OrbitLogo[];
+    /** Your brand mark in the middle. */
+    center?: ReactNode;
+    rings?: number;
+    /** Max box size in px; it scales down to its container. */
+    size?: number;
+    /** Inner ring radius as a percentage of the box width. */
+    innerRadius?: number;
+    /** Distance between rings, as a percentage of the box width. */
+    ringGap?: number;
+    itemSize?: number;
+    centerSize?: number;
+    /** Seconds per turn for the inner ring. */
+    duration?: number;
+    pauseOnHover?: boolean;
+    showTracks?: boolean;
+    label?: string;
+    backgroundColor?: string;
+    itemColor?: string;
+    centerColor?: string;
+    lineColor?: string;
+    accentColor?: string;
+    textColor?: string;
+    itemRadius?: number;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function LogoOrbit({ logos, center, rings, size, innerRadius, ringGap, itemSize, centerSize, duration, pauseOnHover, showTracks, label, backgroundColor, itemColor, centerColor, lineColor, accentColor, textColor, itemRadius, fontFamily, className, style }: LogoOrbitProps): import("react").JSX.Element;