bits-lab 0.0.0-stage → 0.1.2

package/dist/Confetti.js

@@ -0,0 +1,176 @@
+'use client';
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+const PRESETS = {
+  burst: { count: 90, spread: 70, angle: 90, velocity: 42, gravity: 1, decay: 0.92, ticks: 220 },
+  cannon: { count: 120, spread: 30, angle: 70, velocity: 58, gravity: 1, decay: 0.93, ticks: 260 },
+  fireworks: { count: 140, spread: 360, angle: 90, velocity: 34, gravity: 0.6, decay: 0.91, ticks: 200 },
+  fountain: { count: 70, spread: 24, angle: 90, velocity: 52, gravity: 1.1, decay: 0.94, ticks: 260 },
+  rain: { count: 160, spread: 0, angle: 270, velocity: 4, gravity: 0.35, decay: 0.99, ticks: 400, fromTop: true }
+};
+const DEFAULT_COLORS = ["#ef7d57", "#ffcd75", "#a7f070", "#38b764", "#41a6f6", "#73eff7", "#b13e53", "#f4f4f4"];
+let canvas = null;
+let ctx = null;
+let particles = [];
+const pool = [];
+let frame = 0;
+let dpr = 1;
+const imageCache = /* @__PURE__ */ new Map();
+function ensureCanvas(zIndex) {
+  if (canvas?.isConnected) return;
+  canvas = document.createElement("canvas");
+  canvas.setAttribute("aria-hidden", "true");
+  Object.assign(canvas.style, { position: "fixed", inset: "0", width: "100vw", height: "100vh", pointerEvents: "none", zIndex: String(zIndex) });
+  document.body.appendChild(canvas);
+  ctx = canvas.getContext("2d");
+  resize();
+  window.addEventListener("resize", resize);
+}
+function resize() {
+  if (!canvas) return;
+  dpr = Math.min(2, window.devicePixelRatio || 1);
+  canvas.width = Math.round(window.innerWidth * dpr);
+  canvas.height = Math.round(window.innerHeight * dpr);
+}
+function loadImage(src) {
+  if (typeof src !== "string") return src;
+  if (!imageCache.has(src)) {
+    const image = new Image();
+    image.src = src;
+    imageCache.set(src, image);
+  }
+  return imageCache.get(src);
+}
+const isImageSource = (value) => typeof value === "object" || /^(\/|\.|https?:|data:image)/.test(value);
+function step() {
+  frame = 0;
+  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+  ctx.clearRect(0, 0, canvas.width / dpr, canvas.height / dpr);
+  let alive = 0;
+  for (let i = 0; i < particles.length; i++) {
+    const p = particles[i];
+    p.tick++;
+    p.vx *= p.decay;
+    p.vy *= p.decay;
+    p.vy += p.gravity;
+    p.x += p.vx + Math.cos(p.wobble) * p.drift;
+    p.y += p.vy;
+    p.wobble += p.wobbleSpeed;
+    p.tilt += p.tiltSpeed;
+    const life = 1 - p.tick / p.ticks;
+    if (life <= 0 || p.y > window.innerHeight + 60) {
+      pool.push(p);
+      continue;
+    }
+    particles[alive++] = p;
+    ctx.save();
+    ctx.globalAlpha = Math.min(1, life * 2.2);
+    ctx.translate(p.x, p.y);
+    ctx.rotate(p.rotation + p.tilt);
+    ctx.scale(1, Math.abs(Math.cos(p.wobble)) * 0.8 + 0.2);
+    const s = p.size;
+    if (p.kind === "image") {
+      if (p.image.complete && p.image.naturalWidth) {
+        ctx.imageSmoothingEnabled = !p.pixelated;
+        ctx.drawImage(p.image, -s, -s, s * 2, s * 2);
+      }
+    } else if (p.kind === "text") {
+      ctx.font = `${s * 2}px system-ui, "Apple Color Emoji", "Segoe UI Emoji", sans-serif`;
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      ctx.fillText(p.text, 0, 0);
+    } else {
+      ctx.fillStyle = p.color;
+      if (p.kind === "circle") {
+        ctx.beginPath();
+        ctx.arc(0, 0, s * 0.6, 0, Math.PI * 2);
+        ctx.fill();
+      } else if (p.kind === "strip") ctx.fillRect(-s * 0.3, -s, s * 0.6, s * 2);
+      else ctx.fillRect(-s * 0.6, -s * 0.6, s * 1.2, s * 1.2);
+    }
+    ctx.restore();
+  }
+  particles.length = alive;
+  if (alive) frame = requestAnimationFrame(step);
+  else ctx.clearRect(0, 0, canvas.width, canvas.height);
+}
+function originPoint(origin) {
+  if (!origin) return { x: window.innerWidth / 2, y: window.innerHeight * 0.6 };
+  if (typeof Element !== "undefined" && origin instanceof Element) {
+    const r = origin.getBoundingClientRect();
+    return { x: r.left + r.width / 2, y: r.top + r.height / 2 };
+  }
+  const x = origin.x <= 1 ? origin.x * window.innerWidth : origin.x;
+  const y = origin.y <= 1 ? origin.y * window.innerHeight : origin.y;
+  return { x, y };
+}
+function confetti(options = {}) {
+  if (typeof window === "undefined") return;
+  if (!options.force && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return;
+  const o = { ...PRESETS[options.preset ?? "burst"], ...options };
+  const { count, spread, angle, velocity, gravity, decay, ticks, colors = DEFAULT_COLORS, shapes = ["square", "strip", "circle"], size = 7, scalar = 1, zIndex = 2e3, pixelated = true } = o;
+  ensureCanvas(zIndex);
+  const from = originPoint(o.origin);
+  const kinds = shapes.map((shape) => shape === "square" || shape === "circle" || shape === "strip" ? { kind: shape } : isImageSource(shape) ? { kind: "image", image: loadImage(shape) } : { kind: "text", text: shape });
+  for (let i = 0; i < count; i++) {
+    const p = pool.pop() ?? {};
+    const kind = kinds[Math.floor(Math.random() * kinds.length)];
+    const a = (angle + (Math.random() - 0.5) * spread) * Math.PI / 180;
+    const speed = velocity * (0.5 + Math.random() * 0.5) * scalar * 0.35;
+    Object.assign(p, {
+      ...kind,
+      x: o.fromTop ? Math.random() * window.innerWidth : from.x,
+      y: o.fromTop ? -20 - Math.random() * window.innerHeight * 0.4 : from.y,
+      vx: Math.cos(a) * speed,
+      vy: -Math.sin(a) * speed,
+      gravity: gravity * 0.32 * scalar,
+      decay,
+      drift: (o.drift ?? 0) + (Math.random() - 0.5) * 0.6,
+      wobble: Math.random() * Math.PI * 2,
+      wobbleSpeed: 0.05 + Math.random() * 0.1,
+      rotation: Math.random() * Math.PI * 2,
+      tilt: 0,
+      tiltSpeed: (Math.random() - 0.5) * 0.2,
+      size: size * scalar * (0.7 + Math.random() * 0.6) * (kind.kind === "image" || kind.kind === "text" ? 1.6 : 1),
+      color: colors[Math.floor(Math.random() * colors.length)],
+      tick: 0,
+      ticks: ticks * (0.8 + Math.random() * 0.4),
+      pixelated
+    });
+    particles.push(p);
+  }
+  if (!frame) frame = requestAnimationFrame(step);
+}
+confetti.reset = () => {
+  cancelAnimationFrame(frame);
+  frame = 0;
+  pool.push(...particles);
+  particles = [];
+  if (ctx) ctx.clearRect(0, 0, canvas.width, canvas.height);
+};
+function Confetti({ children, trigger = "click", disabled = false, className = "", style, ...options }) {
+  const ref = useRef(null);
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+  useEffect(() => {
+    if (trigger === "mount" && !disabled) confetti({ origin: ref.current, ...optionsRef.current });
+  }, [trigger, disabled]);
+  const fire = () => {
+    if (!disabled) confetti({ origin: ref.current, ...optionsRef.current });
+  };
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      className,
+      style: { display: "inline-block", ...style },
+      onClick: trigger === "click" ? fire : void 0,
+      onPointerEnter: trigger === "hover" ? fire : void 0,
+      children
+    }
+  );
+}
+export {
+  confetti,
+  Confetti as default
+};

package/dist/ConnectBeams.d.ts

@@ -0,0 +1,39 @@
+import { type CSSProperties, type RefObject } from 'react';
+export interface Beam {
+    from: RefObject<Element | null>;
+    to: RefObject<Element | null>;
+    /** Run the pulse from `to` back to `from`. */
+    reverse?: boolean;
+    /** Overrides the shared curvature for this beam. */
+    curvature?: number;
+    /** Pulse loop length for this beam, in seconds. */
+    duration?: number;
+    /** Animation delay, in seconds (negative starts mid-loop). */
+    delay?: number;
+    /** Track color for this beam. */
+    color?: string;
+    pulseColor?: string;
+    pulseColorEnd?: string;
+}
+export interface ConnectBeamsProps {
+    /** Positioned parent that holds the nodes; the SVG overlay fills it. */
+    containerRef: RefObject<Element | null>;
+    beams?: Beam[];
+    /** Static track color. */
+    color?: string;
+    pulseColor?: string;
+    pulseColorEnd?: string;
+    /** Stroke width, in px. */
+    width?: number;
+    /** Bend perpendicular to the beam; negative bends the other way. */
+    curvature?: number;
+    /** Pulse loop length, in seconds. */
+    duration?: number;
+    /** Pulse length as a share of the beam (0–1). */
+    pulseLength?: number;
+    /** How far inside the node edge beams attach, in px. */
+    edgeInset?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function ConnectBeams({ containerRef, beams, color, pulseColor, pulseColorEnd, width, curvature, duration, pulseLength, edgeInset, className, style }: ConnectBeamsProps): import("react").JSX.Element;

package/dist/ConnectBeams.js

@@ -0,0 +1,132 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useInsertionEffect, useState } from "react";
+const STYLE_ID = "bl-connect-beams";
+const CSS = `
+.bl-beams { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0; }
+.bl-beams__pulse { animation: bl-beam-pulse var(--bl-dur) linear infinite; }
+@keyframes bl-beam-pulse { from { stroke-dashoffset: var(--bl-from); } to { stroke-dashoffset: var(--bl-to); } }
+@media (prefers-reduced-motion: reduce) { .bl-beams__pulse { animation: none; stroke-dasharray: none; opacity: 0.6; } }
+`;
+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);
+  }, []);
+}
+function edgePoint(rect, toward, inset) {
+  const cx = rect.x + rect.width / 2;
+  const cy = rect.y + rect.height / 2;
+  const dx = toward[0] - cx;
+  const dy = toward[1] - cy;
+  if (!dx && !dy) return [cx, cy];
+  const sx = Math.abs(dx) ? (rect.width / 2 - inset) / Math.abs(dx) : Infinity;
+  const sy = Math.abs(dy) ? (rect.height / 2 - inset) / Math.abs(dy) : Infinity;
+  const s = Math.min(sx, sy);
+  return [cx + dx * s, cy + dy * s];
+}
+function ConnectBeams({
+  containerRef,
+  beams = [],
+  color = "#3b5dc9",
+  pulseColor = "#73eff7",
+  pulseColorEnd = "#a7f070",
+  width = 2,
+  curvature = 0.25,
+  duration = 3,
+  pulseLength = 0.22,
+  edgeInset = 4,
+  className = "",
+  style
+}) {
+  useStyles();
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const [paths, setPaths] = useState([]);
+  const [box, setBox] = useState({ width: 0, height: 0 });
+  useEffect(() => {
+    const container = containerRef?.current;
+    if (!container) return;
+    let frame = 0;
+    const measure = () => {
+      frame = 0;
+      const base = container.getBoundingClientRect();
+      setBox((prev) => prev.width === base.width && prev.height === base.height ? prev : { width: base.width, height: base.height });
+      const next = beams.map((beam) => {
+        const a = beam.from?.current;
+        const b = beam.to?.current;
+        if (!a || !b) return null;
+        const ra = a.getBoundingClientRect();
+        const rb = b.getBoundingClientRect();
+        const local = (r) => ({ x: r.left - base.left, y: r.top - base.top, width: r.width, height: r.height });
+        const la = local(ra);
+        const lb = local(rb);
+        const ca = [la.x + la.width / 2, la.y + la.height / 2];
+        const cb = [lb.x + lb.width / 2, lb.y + lb.height / 2];
+        const [x1, y1] = edgePoint(la, cb, edgeInset);
+        const [x2, y2] = edgePoint(lb, ca, edgeInset);
+        const bend = beam.curvature ?? curvature;
+        const mx = (x1 + x2) / 2 - (y2 - y1) * bend;
+        const my = (y1 + y2) / 2 + (x2 - x1) * bend;
+        return { d: `M${x1.toFixed(1)} ${y1.toFixed(1)}Q${mx.toFixed(1)} ${my.toFixed(1)} ${x2.toFixed(1)} ${y2.toFixed(1)}`, x1, y1, x2, y2 };
+      });
+      setPaths((prev) => JSON.stringify(prev) === JSON.stringify(next) ? prev : next);
+    };
+    const schedule = () => {
+      if (!frame) frame = requestAnimationFrame(measure);
+    };
+    const observer = new ResizeObserver(schedule);
+    observer.observe(container);
+    beams.forEach((beam) => {
+      if (beam.from?.current) observer.observe(beam.from.current);
+      if (beam.to?.current) observer.observe(beam.to.current);
+    });
+    window.addEventListener("resize", schedule);
+    measure();
+    return () => {
+      cancelAnimationFrame(frame);
+      observer.disconnect();
+      window.removeEventListener("resize", schedule);
+    };
+  }, [containerRef, beams, curvature, edgeInset]);
+  return /* @__PURE__ */ jsxs("svg", { className: `bl-beams ${className}`, width: box.width, height: box.height, viewBox: `0 0 ${box.width || 1} ${box.height || 1}`, "aria-hidden": "true", style, children: [
+    /* @__PURE__ */ jsx("defs", { children: paths.map(
+      (path, index) => path ? /* @__PURE__ */ jsxs("linearGradient", { id: `${uid}-g${index}`, gradientUnits: "userSpaceOnUse", x1: path.x1, y1: path.y1, x2: path.x2, y2: path.y2, children: [
+        /* @__PURE__ */ jsx("stop", { offset: "0", stopColor: beams[index].pulseColor ?? pulseColor }),
+        /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: beams[index].pulseColorEnd ?? pulseColorEnd })
+      ] }, index) : null
+    ) }),
+    paths.map((path, index) => {
+      if (!path) return null;
+      const beam = beams[index];
+      const reverse = beam.reverse;
+      const dur = beam.duration ?? duration;
+      return /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("path", { d: path.d, fill: "none", stroke: beam.color ?? color, strokeWidth: width, strokeOpacity: "0.35", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            className: "bl-beams__pulse",
+            d: path.d,
+            fill: "none",
+            pathLength: "1",
+            stroke: `url(#${uid}-g${index})`,
+            strokeWidth: width + 0.5,
+            strokeLinecap: "round",
+            strokeDasharray: `${pulseLength} ${1 + pulseLength}`,
+            style: {
+              "--bl-dur": `${dur}s`,
+              "--bl-from": reverse ? -1 : pulseLength,
+              "--bl-to": reverse ? pulseLength : -1,
+              animationDelay: `${beam.delay ?? -index * 0.6}s`
+            }
+          }
+        )
+      ] }, index);
+    })
+  ] });
+}
+export {
+  ConnectBeams as default
+};

package/dist/ContextOrb.d.ts

@@ -0,0 +1,34 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface OrbItem {
+    label: string;
+    icon?: ReactNode;
+    onSelect?: () => void;
+    disabled?: boolean;
+    danger?: boolean;
+}
+export interface ContextOrbProps {
+    /** Actions, clockwise from the top. */
+    items?: OrbItem[];
+    /** The area that opens the menu. */
+    children?: ReactNode;
+    onSelect?: (item: OrbItem, index: number) => void;
+    radius?: number;
+    itemSize?: number;
+    hubSize?: number;
+    /** Pointer distance before aiming starts, in px. */
+    deadZone?: number;
+    /** Touch hold time in ms. */
+    longPress?: number;
+    label?: string;
+    /** Hub text before an action is aimed at. */
+    hint?: string;
+    backgroundColor?: string;
+    textColor?: string;
+    lineColor?: string;
+    accentColor?: string;
+    dangerColor?: string;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function ContextOrb({ items, children, onSelect, radius, itemSize, hubSize, deadZone, longPress, label, hint, backgroundColor, textColor, lineColor, accentColor, dangerColor, fontFamily, className, style }: ContextOrbProps): import("react").JSX.Element;

package/dist/ContextOrb.js

@@ -0,0 +1,269 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useInsertionEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+const STYLE_ID = "bl-context-orb";
+const CSS = `
+.bl-corb-area { position: relative; outline: none; -webkit-touch-callout: none; }
+.bl-corb-area:focus-visible { outline: 2px dashed var(--bl-accent); outline-offset: 4px; }
+.bl-corb { position: fixed; z-index: 1800; width: 0; height: 0; font-family: var(--bl-font); }
+.bl-corb__hub { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: var(--bl-hub); height: var(--bl-hub); margin: calc(var(--bl-hub) / -2) 0 0 calc(var(--bl-hub) / -2); border-radius: 50%; background: var(--bl-bg); color: var(--bl-ink); box-shadow: 0 0 0 1px var(--bl-line), 0 0 0 calc(var(--bl-radius) + var(--bl-item) / 2 + 10px) color-mix(in srgb, var(--bl-bg) 55%, transparent); font-size: 11px; font-weight: 600; text-align: center; line-height: 1.2; padding: 6px; box-sizing: border-box; animation: bl-corb-hub 260ms cubic-bezier(.3,1.4,.5,1) both; }
+.bl-corb__item { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: var(--bl-item); height: var(--bl-item); margin: calc(var(--bl-item) / -2) 0 0 calc(var(--bl-item) / -2); padding: 0; border: 0; border-radius: 50%; background: var(--bl-bg); color: var(--bl-ink); box-shadow: 0 0 0 1px var(--bl-line), 0 10px 24px -10px rgba(0,0,0,0.8); cursor: pointer; transform: translate(var(--x), var(--y)); animation: bl-corb-item 380ms cubic-bezier(.3,1.5,.5,1) both; animation-delay: calc(var(--i) * 25ms); transition: box-shadow 120ms, scale 160ms cubic-bezier(.3,1.6,.5,1); }
+.bl-corb__item > * { pointer-events: none; }
+.bl-corb__item[data-active] { scale: 1.18; box-shadow: 0 0 0 2px var(--bl-accent), 0 10px 24px -10px rgba(0,0,0,0.8); }
+.bl-corb__item[data-danger][data-active] { box-shadow: 0 0 0 2px var(--bl-danger), 0 10px 24px -10px rgba(0,0,0,0.8); }
+.bl-corb__item:disabled { opacity: 0.35; cursor: not-allowed; }
+.bl-corb__item:focus-visible { outline: none; }
+.bl-corb[data-closing] .bl-corb__item, .bl-corb[data-closing] .bl-corb__hub { animation: bl-corb-out 140ms ease-in both; }
+@keyframes bl-corb-hub { from { transform: scale(0.3); opacity: 0; } }
+@keyframes bl-corb-item { from { transform: translate(0, 0) scale(0.2); opacity: 0; } }
+@keyframes bl-corb-out { to { opacity: 0; scale: 0.6; } }
+@media (prefers-reduced-motion: reduce) { .bl-corb__item, .bl-corb__hub { animation: bl-corb-fade 120ms both; transition: none; } }
+@keyframes bl-corb-fade { from { 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);
+  }, []);
+}
+function ContextOrb({
+  items = [],
+  children,
+  onSelect,
+  radius = 78,
+  itemSize = 48,
+  hubSize = 64,
+  deadZone = 26,
+  longPress = 450,
+  label = "Actions",
+  hint = "Pick an action",
+  backgroundColor = "#1a1c2c",
+  textColor = "#f4f4f4",
+  lineColor = "#333c57",
+  accentColor = "#73eff7",
+  dangerColor = "#ef7d57",
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  className = "",
+  style
+}) {
+  useStyles();
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const areaRef = useRef(null);
+  const [menu, setMenu] = useState(null);
+  const [active, setActive] = useState(-1);
+  const gesture = useRef({ held: false, moved: false, x: 0, y: 0, keyboard: false });
+  const pressTimer = useRef(0);
+  const closeTimer = useRef(0);
+  const itemRefs = useRef([]);
+  const activeRef = useRef(active);
+  activeRef.current = active;
+  const angleOf = (i) => -Math.PI / 2 + i / items.length * Math.PI * 2;
+  const open = (x, y, { held = false, keyboard = false } = {}) => {
+    const reach = radius + itemSize / 2 + 8;
+    const cx = Math.max(reach, Math.min(window.innerWidth - reach, x));
+    const cy = Math.max(reach, Math.min(window.innerHeight - reach, y));
+    clearTimeout(closeTimer.current);
+    gesture.current = { held, moved: false, x: cx, y: cy, keyboard };
+    setActive(keyboard ? items.findIndex((item) => !item.disabled) : -1);
+    setMenu({ x: cx, y: cy, closing: false });
+  };
+  const close = (refocus = false) => {
+    setMenu((current2) => current2 ? { ...current2, closing: true } : null);
+    clearTimeout(closeTimer.current);
+    closeTimer.current = setTimeout(() => setMenu(null), 160);
+    if (refocus) areaRef.current?.focus({ preventScroll: true });
+  };
+  const choose = (index) => {
+    const item = items[index];
+    if (!item || item.disabled) return;
+    item.onSelect?.();
+    onSelect?.(item, index);
+    close(gesture.current.keyboard);
+  };
+  const aim = (clientX, clientY) => {
+    const { x, y } = gesture.current;
+    const dx = clientX - x;
+    const dy = clientY - y;
+    if (Math.hypot(dx, dy) < deadZone) return -1;
+    const angle = Math.atan2(dy, dx);
+    let best = -1;
+    let bestGap = Infinity;
+    items.forEach((item, i) => {
+      if (item.disabled) return;
+      const gap = Math.abs(Math.atan2(Math.sin(angle - angleOf(i)), Math.cos(angle - angleOf(i))));
+      if (gap < bestGap) {
+        bestGap = gap;
+        best = i;
+      }
+    });
+    return best;
+  };
+  useEffect(() => {
+    if (!menu || menu.closing) return void 0;
+    const onMove = (event) => {
+      const index = aim(event.clientX, event.clientY);
+      if (index >= 0) gesture.current.moved = true;
+      setActive(index);
+    };
+    const onUp = (event) => {
+      if (gesture.current.held && gesture.current.moved) {
+        const index = aim(event.clientX, event.clientY);
+        if (index >= 0) choose(index);
+        else close();
+      }
+      gesture.current.held = false;
+    };
+    const onDown = (event) => {
+      if (event.target.closest?.(".bl-corb")) gesture.current.held = false;
+      else close();
+    };
+    const onKey = (event) => {
+      const step = event.key === "ArrowRight" || event.key === "ArrowDown" ? 1 : event.key === "ArrowLeft" || event.key === "ArrowUp" ? -1 : 0;
+      if (step) {
+        event.preventDefault();
+        gesture.current.keyboard = true;
+        setActive((current2) => {
+          let next = current2;
+          for (let n = 0; n < items.length; n++) {
+            next = (next + step + items.length) % items.length;
+            if (!items[next].disabled) return next;
+          }
+          return current2;
+        });
+      } else if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        if (activeRef.current >= 0) choose(activeRef.current);
+      } else if (event.key === "Escape" || event.key === "Tab") {
+        event.preventDefault();
+        close(true);
+      }
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+    window.addEventListener("pointerdown", onDown, true);
+    window.addEventListener("keydown", onKey);
+    const dismiss = () => close();
+    window.addEventListener("scroll", dismiss, { passive: true, capture: true });
+    window.addEventListener("blur", dismiss);
+    return () => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      window.removeEventListener("pointerdown", onDown, true);
+      window.removeEventListener("keydown", onKey);
+      window.removeEventListener("scroll", dismiss, { capture: true });
+      window.removeEventListener("blur", dismiss);
+    };
+  }, [menu, items]);
+  useEffect(() => {
+    if (menu && !menu.closing && gesture.current.keyboard && active >= 0) itemRefs.current[active]?.focus({ preventScroll: true });
+  }, [menu, active]);
+  const onContextMenu = (event) => {
+    event.preventDefault();
+    clearTimeout(pressTimer.current);
+    open(event.clientX, event.clientY, { held: event.button === 2 || event.nativeEvent.pointerType === "touch" });
+  };
+  const onPointerDown = (event) => {
+    if (event.pointerType !== "touch") return;
+    const { clientX, clientY } = event;
+    clearTimeout(pressTimer.current);
+    pressTimer.current = setTimeout(() => open(clientX, clientY, { held: true }), longPress);
+    const cancel = (move) => {
+      if (!move || Math.hypot(move.clientX - clientX, move.clientY - clientY) > 10) {
+        clearTimeout(pressTimer.current);
+        window.removeEventListener("pointermove", cancel);
+        window.removeEventListener("pointerup", cancel);
+      }
+    };
+    window.addEventListener("pointermove", cancel);
+    window.addEventListener("pointerup", () => cancel(null), { once: true });
+  };
+  const onKeyDown = (event) => {
+    if (event.key === "ContextMenu" || event.key === "F10" && event.shiftKey) {
+      event.preventDefault();
+      const rect = areaRef.current.getBoundingClientRect();
+      open(rect.left + rect.width / 2, rect.top + rect.height / 2, { keyboard: true });
+    }
+  };
+  useEffect(
+    () => () => {
+      clearTimeout(pressTimer.current);
+      clearTimeout(closeTimer.current);
+    },
+    []
+  );
+  const current = items[active];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: areaRef,
+      className: `bl-corb-area ${className}`,
+      tabIndex: 0,
+      "aria-haspopup": "menu",
+      "aria-expanded": !!menu && !menu.closing,
+      "aria-keyshortcuts": "Shift+F10",
+      onContextMenu,
+      onPointerDown,
+      onKeyDown,
+      style: { "--bl-accent": accentColor, ...style },
+      children: [
+        children,
+        menu && createPortal(
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "bl-corb",
+              "data-closing": menu.closing || void 0,
+              style: {
+                left: menu.x,
+                top: menu.y,
+                "--bl-item": `${itemSize}px`,
+                "--bl-hub": `${hubSize}px`,
+                "--bl-radius": `${radius}px`,
+                "--bl-bg": backgroundColor,
+                "--bl-ink": textColor,
+                "--bl-line": lineColor,
+                "--bl-accent": accentColor,
+                "--bl-danger": dangerColor,
+                "--bl-font": fontFamily
+              },
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "bl-corb__hub", "aria-hidden": "true", children: current ? current.label : hint }),
+                /* @__PURE__ */ jsx("div", { role: "menu", "aria-label": label, id: `${uid}-menu`, children: items.map((item, i) => {
+                  const a = angleOf(i);
+                  return /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      ref: (node) => {
+                        itemRefs.current[i] = node;
+                      },
+                      type: "button",
+                      role: "menuitem",
+                      className: "bl-corb__item",
+                      tabIndex: i === active ? 0 : -1,
+                      "aria-label": item.label,
+                      disabled: item.disabled,
+                      "data-active": i === active || void 0,
+                      "data-danger": item.danger || void 0,
+                      style: { "--x": `${(Math.cos(a) * radius).toFixed(1)}px`, "--y": `${(Math.sin(a) * radius).toFixed(1)}px`, "--i": i },
+                      onPointerEnter: () => setActive(i),
+                      onClick: () => choose(i),
+                      children: item.icon ?? item.label.slice(0, 1)
+                    },
+                    item.label
+                  );
+                }) })
+              ]
+            }
+          ),
+          document.body
+        )
+      ]
+    }
+  );
+}
+export {
+  ContextOrb as default
+};

package/dist/ContourLines.d.ts

@@ -0,0 +1,20 @@
+import { type CSSProperties } from 'react';
+export interface ContourLinesProps {
+    /** How many contours. */
+    levels?: number;
+    /** A brighter index line every this many contours. */
+    major?: number;
+    scale?: number;
+    speed?: number;
+    pixelSize?: number;
+    /** Alternate the colour between contours, like an atlas. */
+    tint?: boolean;
+    /** The pointer raises a hill. */
+    pointer?: boolean;
+    lineColor?: string;
+    majorColor?: string;
+    bandColors?: string[];
+    className?: string;
+    style?: CSSProperties;
+}
+export default function ContourLines({ levels, major, scale, speed, pixelSize, tint, pointer, lineColor, majorColor, bandColors, className, style }: ContourLinesProps): import("react").JSX.Element;