bits-lab 0.0.0-stage → 0.1.0

package/dist/DropZone.js

@@ -0,0 +1,304 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-dropzone";
+const CSS = `
+.bl-drop { display: grid; gap: 14px; width: 100%; max-width: var(--bl-w); font-family: var(--bl-font); color: var(--bl-ink); }
+.bl-drop__zone { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: center; cursor: pointer; perspective: 800px; }
+.bl-drop__zone:focus-visible { outline: none; }
+.bl-drop__zone:focus-visible .bl-drop__card { border-color: var(--bl-accent); box-shadow: 0 0 0 4px var(--bl-ring); }
+.bl-drop__card { display: grid; justify-items: center; gap: 10px; padding: 34px 20px; border-radius: var(--bl-radius); background: var(--bl-bg); border: 1.5px dashed var(--bl-line); transform: translate(var(--bl-mx, 0px), var(--bl-my, 0px)) rotateX(var(--bl-rx, 0deg)) rotateY(var(--bl-ry, 0deg)); transition: transform 220ms cubic-bezier(.2,.9,.25,1), box-shadow 200ms, border-color 200ms, background-color 200ms; }
+.bl-drop[data-dragging] .bl-drop__card { background: var(--bl-over); border-color: var(--bl-accent); border-style: solid; box-shadow: 0 18px 40px -18px var(--bl-accent); transition-duration: 120ms; }
+.bl-drop__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--bl-chip); color: var(--bl-accent); transition: transform 300ms cubic-bezier(.2,.9,.25,1.4); }
+.bl-drop[data-dragging] .bl-drop__icon { transform: translateY(-6px) scale(1.12); }
+.bl-drop__title { margin: 0; font-weight: 700; font-size: 16px; }
+.bl-drop__hint { margin: 0; color: var(--bl-muted); font-size: 13px; }
+.bl-drop__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
+.bl-drop__file { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: calc(var(--bl-radius) * 0.7); background: var(--bl-bg); box-shadow: inset 0 0 0 1px var(--bl-line); animation: bl-drop-in 260ms cubic-bezier(.2,.9,.25,1); }
+.bl-drop__thumb { display: grid; place-items: center; width: 44px; height: 44px; overflow: hidden; border-radius: 8px; background: var(--bl-chip); color: var(--bl-accent); font-size: 10px; font-weight: 800; text-transform: uppercase; }
+.bl-drop__thumb img { width: 100%; height: 100%; object-fit: cover; }
+.bl-drop__name { overflow: hidden; font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
+.bl-drop__meta { margin-top: 2px; color: var(--bl-muted); font-size: 12px; }
+.bl-drop__file[data-status="error"] .bl-drop__meta { color: var(--bl-error); }
+.bl-drop__file[data-status="done"] .bl-drop__meta { color: var(--bl-success); }
+.bl-drop__bar { height: 4px; margin-top: 6px; border-radius: 2px; background: var(--bl-chip); overflow: hidden; }
+.bl-drop__fill { height: 100%; border-radius: 2px; background: var(--bl-accent); transform-origin: left; transition: transform 200ms linear, background-color 200ms; }
+.bl-drop__file[data-status="done"] .bl-drop__fill { background: var(--bl-success); }
+.bl-drop__file[data-status="error"] .bl-drop__fill { background: var(--bl-error); }
+.bl-drop__remove { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--bl-muted); cursor: pointer; }
+.bl-drop__remove:hover { background: var(--bl-chip); color: var(--bl-ink); }
+.bl-drop__remove:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 1px; }
+.bl-drop__rejects { margin: 0; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--bl-error) 14%, transparent); color: var(--bl-error); font-size: 13px; list-style: none; }
+.bl-drop__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+@keyframes bl-drop-in { from { opacity: 0; transform: translateY(-6px); } }
+@media (prefers-reduced-motion: reduce) { .bl-drop__card, .bl-drop__icon, .bl-drop__fill { transition: none; transform: none !important; } .bl-drop__file { animation: 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);
+  }, []);
+}
+function formatBytes(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  const units = ["KB", "MB", "GB"];
+  let value = bytes / 1024;
+  let unit = 0;
+  while (value >= 1024 && unit < units.length - 1) {
+    value /= 1024;
+    unit++;
+  }
+  return `${value < 10 ? value.toFixed(1) : Math.round(value)} ${units[unit]}`;
+}
+function accepts(file, accept) {
+  if (!accept) return true;
+  const name = file.name.toLowerCase();
+  const type = (file.type || "").toLowerCase();
+  return accept.split(",").map((rule) => rule.trim().toLowerCase()).filter(Boolean).some((rule) => rule.startsWith(".") ? name.endsWith(rule) : rule.endsWith("/*") ? type.startsWith(rule.slice(0, -1)) : type === rule);
+}
+const extension = (name) => name.includes(".") ? name.split(".").pop().slice(0, 4) : "file";
+let nextId = 1;
+function DropZone({
+  accept,
+  multiple = true,
+  maxFiles = 10,
+  maxSize,
+  upload,
+  onFilesChange,
+  onReject,
+  title = "Drop files here",
+  hint,
+  disabled = false,
+  magnetic = true,
+  width = 520,
+  radius = 16,
+  backgroundColor = "#1a1c2c",
+  overColor = "#202a4a",
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  lineColor = "rgba(255,255,255,0.22)",
+  chipColor = "rgba(255,255,255,0.07)",
+  accentColor = "#73eff7",
+  successColor = "#38b764",
+  errorColor = "#ef7d57",
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  className = "",
+  style
+}) {
+  useStyles();
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const inputRef = useRef(null);
+  const cardRef = useRef(null);
+  const depth = useRef(0);
+  const controllers = useRef(/* @__PURE__ */ new Map());
+  const [files, setFiles] = useState([]);
+  const [rejected, setRejected] = useState([]);
+  const [dragging, setDragging] = useState(false);
+  const [announcement, setAnnouncement] = useState("");
+  const filesRef = useRef(files);
+  filesRef.current = files;
+  const patch = (id, change) => setFiles((prev) => prev.map((f) => f.id === id ? { ...f, ...change } : f));
+  useEffect(() => {
+    onFilesChange?.(files);
+  }, [files]);
+  useEffect(
+    () => () => {
+      filesRef.current.forEach((f) => f.preview && URL.revokeObjectURL(f.preview));
+      controllers.current.forEach((controller) => controller.abort());
+    },
+    []
+  );
+  const start = (entry) => {
+    if (!upload) {
+      patch(entry.id, { status: "done", progress: 1 });
+      return;
+    }
+    const controller = new AbortController();
+    controllers.current.set(entry.id, controller);
+    const onProgress = (fraction) => patch(entry.id, { progress: Math.max(0, Math.min(1, fraction)) });
+    Promise.resolve().then(() => upload(entry.file, { onProgress, signal: controller.signal })).then(
+      () => {
+        if (controller.signal.aborted) return;
+        patch(entry.id, { status: "done", progress: 1 });
+        setAnnouncement(`${entry.name} uploaded.`);
+      },
+      (error) => {
+        if (controller.signal.aborted) return;
+        patch(entry.id, { status: "error", error: error?.message ?? "Upload failed" });
+        setAnnouncement(`${entry.name} failed to upload.`);
+      }
+    ).finally(() => controllers.current.delete(entry.id));
+  };
+  const addFiles = (list) => {
+    const incoming = Array.from(list ?? []);
+    const room = Math.max(0, (multiple ? maxFiles : 1) - filesRef.current.length);
+    const accepted = [];
+    const rejects = [];
+    for (const file of incoming) {
+      if (!accepts(file, accept)) rejects.push({ file, reason: "File type not allowed" });
+      else if (maxSize && file.size > maxSize) rejects.push({ file, reason: `Larger than ${formatBytes(maxSize)}` });
+      else if (accepted.length >= room) rejects.push({ file, reason: multiple ? `Limit of ${maxFiles} files` : "Only one file allowed" });
+      else accepted.push(file);
+    }
+    const entries = accepted.map((file) => ({
+      id: nextId++,
+      file,
+      name: file.name,
+      size: file.size,
+      type: file.type,
+      preview: file.type.startsWith("image/") ? URL.createObjectURL(file) : null,
+      progress: 0,
+      status: upload ? "uploading" : "done",
+      error: null
+    }));
+    setRejected(rejects);
+    if (rejects.length) onReject?.(rejects);
+    if (entries.length) {
+      setFiles((prev) => [...prev, ...entries]);
+      entries.forEach(start);
+    }
+    setAnnouncement(
+      [entries.length ? `${entries.length} file${entries.length === 1 ? "" : "s"} added.` : "", rejects.length ? `${rejects.length} rejected.` : ""].filter(Boolean).join(" ")
+    );
+  };
+  const remove = (id) => {
+    const entry = filesRef.current.find((f) => f.id === id);
+    controllers.current.get(id)?.abort();
+    controllers.current.delete(id);
+    if (entry?.preview) URL.revokeObjectURL(entry.preview);
+    setFiles((prev) => prev.filter((f) => f.id !== id));
+    if (entry) setAnnouncement(`${entry.name} removed.`);
+  };
+  const lean = (event) => {
+    const card = cardRef.current;
+    if (!magnetic || !card || window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return;
+    const rect = card.getBoundingClientRect();
+    const x = (event.clientX - rect.left) / rect.width - 0.5;
+    const y = (event.clientY - rect.top) / rect.height - 0.5;
+    card.style.setProperty("--bl-mx", `${x * 14}px`);
+    card.style.setProperty("--bl-my", `${y * 10}px`);
+    card.style.setProperty("--bl-rx", `${-y * 6}deg`);
+    card.style.setProperty("--bl-ry", `${x * 8}deg`);
+  };
+  const settle = () => {
+    for (const name of ["--bl-mx", "--bl-my", "--bl-rx", "--bl-ry"]) cardRef.current?.style.removeProperty(name);
+  };
+  const hasFiles = (event) => Array.from(event.dataTransfer?.types ?? []).includes("Files");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `bl-drop ${className}`,
+      "data-dragging": dragging || void 0,
+      style: {
+        "--bl-w": `${width}px`,
+        "--bl-radius": `${radius}px`,
+        "--bl-bg": backgroundColor,
+        "--bl-over": overColor,
+        "--bl-ink": textColor,
+        "--bl-muted": mutedColor,
+        "--bl-line": lineColor,
+        "--bl-chip": chipColor,
+        "--bl-accent": accentColor,
+        "--bl-ring": `color-mix(in srgb, ${accentColor} 22%, transparent)`,
+        "--bl-success": successColor,
+        "--bl-error": errorColor,
+        "--bl-font": fontFamily,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "bl-drop__zone",
+            disabled,
+            "aria-describedby": `${uid}-hint`,
+            onClick: () => inputRef.current?.click(),
+            onDragEnter: (event) => {
+              if (!hasFiles(event) || disabled) return;
+              event.preventDefault();
+              depth.current += 1;
+              setDragging(true);
+            },
+            onDragOver: (event) => {
+              if (!hasFiles(event) || disabled) return;
+              event.preventDefault();
+              event.dataTransfer.dropEffect = "copy";
+              lean(event);
+            },
+            onDragLeave: () => {
+              depth.current = Math.max(0, depth.current - 1);
+              if (!depth.current) {
+                setDragging(false);
+                settle();
+              }
+            },
+            onDrop: (event) => {
+              event.preventDefault();
+              depth.current = 0;
+              setDragging(false);
+              settle();
+              if (!disabled) addFiles(event.dataTransfer.files);
+            },
+            children: /* @__PURE__ */ jsxs("span", { ref: cardRef, className: "bl-drop__card", children: [
+              /* @__PURE__ */ jsx("span", { className: "bl-drop__icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M12 16V4M7 9l5-5 5 5M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3" }) }) }),
+              /* @__PURE__ */ jsx("span", { className: "bl-drop__title", children: dragging ? "Release to add" : title }),
+              /* @__PURE__ */ jsx("span", { id: `${uid}-hint`, className: "bl-drop__hint", children: hint ?? [`Click or press Enter to browse`, accept && `\xB7 ${accept}`, maxSize && `\xB7 up to ${formatBytes(maxSize)}`].filter(Boolean).join(" ") })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "file",
+            hidden: true,
+            accept,
+            multiple,
+            onChange: (event) => {
+              addFiles(event.target.files);
+              event.target.value = "";
+            }
+          }
+        ),
+        rejected.length > 0 && /* @__PURE__ */ jsx("ul", { className: "bl-drop__rejects", children: rejected.map(({ file, reason }, i) => /* @__PURE__ */ jsxs("li", { children: [
+          file.name,
+          ": ",
+          reason
+        ] }, `${file.name}-${i}`)) }),
+        files.length > 0 && /* @__PURE__ */ jsx("ul", { className: "bl-drop__list", "aria-label": "Files", children: files.map((entry) => /* @__PURE__ */ jsxs("li", { className: "bl-drop__file", "data-status": entry.status, children: [
+          /* @__PURE__ */ jsx("span", { className: "bl-drop__thumb", "aria-hidden": "true", children: entry.preview ? /* @__PURE__ */ jsx("img", { src: entry.preview, alt: "" }) : extension(entry.name) }),
+          /* @__PURE__ */ jsxs("span", { style: { minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx("span", { className: "bl-drop__name", style: { display: "block" }, children: entry.name }),
+            /* @__PURE__ */ jsxs("span", { className: "bl-drop__meta", style: { display: "block" }, children: [
+              formatBytes(entry.size),
+              " \xB7 ",
+              entry.status === "uploading" ? `${Math.round(entry.progress * 100)}%` : entry.status === "done" ? "Done" : entry.error
+            ] }),
+            upload && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "bl-drop__bar",
+                style: { display: "block" },
+                role: "progressbar",
+                "aria-label": `${entry.name} upload`,
+                "aria-valuemin": 0,
+                "aria-valuemax": 100,
+                "aria-valuenow": Math.round(entry.progress * 100),
+                children: /* @__PURE__ */ jsx("span", { className: "bl-drop__fill", style: { display: "block", transform: `scaleX(${entry.progress})` } })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("button", { type: "button", className: "bl-drop__remove", "aria-label": `Remove ${entry.name}`, onClick: () => remove(entry.id), children: /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M2 2l8 8M10 2 2 10" }) }) })
+        ] }, entry.id)) }),
+        /* @__PURE__ */ jsx("span", { className: "bl-drop__sr", "aria-live": "polite", children: announcement })
+      ]
+    }
+  );
+}
+export {
+  DropZone as default,
+  formatBytes
+};

package/dist/DynamicIsland.d.ts

@@ -0,0 +1,32 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface IslandView {
+    /** Width of the island in this view, in px. */
+    width: number;
+    /** Height of the island in this view, in px. */
+    height: number;
+    /** Corner radius; defaults to a pill (half the height, capped at 44). */
+    radius?: number;
+    /** Announced politely to screen readers when this view appears. */
+    label?: string;
+    content?: ReactNode;
+}
+export interface DynamicIslandProps {
+    /** Every state the island can take. */
+    views?: Record<string, IslandView>;
+    /** The current view's key. Change it and the island morphs. */
+    view?: string;
+    /** Makes the island pressable (Enter/Space too). Leave it off when the view has its own buttons. */
+    onPress?: (view: string) => void;
+    /** Morph length, in ms. */
+    duration?: number;
+    /** Overshoot: 0 is a plain ease-out, 1 is very springy. */
+    bounce?: number;
+    backgroundColor?: string;
+    textColor?: string;
+    lineColor?: string;
+    accentColor?: string;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function DynamicIsland({ views, view, onPress, duration, bounce, backgroundColor, textColor, lineColor, accentColor, fontFamily, className, style }: DynamicIslandProps): import("react").JSX.Element;

package/dist/DynamicIsland.js

@@ -0,0 +1,92 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-dynamic-island";
+const CSS = `
+.bl-island { position: relative; display: block; margin: 0 auto; overflow: hidden; width: var(--bl-w); height: var(--bl-h); max-width: 100%; border-radius: var(--bl-r); background: var(--bl-bg); color: var(--bl-ink); font-family: var(--bl-font); box-shadow: 0 0 0 1px var(--bl-line), 0 12px 30px -12px rgba(0,0,0,0.6); transition: width var(--bl-dur) var(--bl-ease), height var(--bl-dur) var(--bl-ease), border-radius var(--bl-dur) var(--bl-ease); }
+[role="button"].bl-island { cursor: pointer; }
+.bl-island:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 3px; }
+.bl-island__layer { position: absolute; inset: 0; display: flex; align-items: center; transition: opacity calc(var(--bl-dur) * 0.6) ease, filter calc(var(--bl-dur) * 0.6) ease, transform var(--bl-dur) var(--bl-ease); }
+.bl-island__layer[data-state="in"] { animation: bl-island-in calc(var(--bl-dur) * 0.75) ease calc(var(--bl-dur) * 0.15) both; }
+@keyframes bl-island-in { from { opacity: 0; filter: blur(6px); transform: scale(0.92); } }
+.bl-island__layer[data-state="out"] { opacity: 0; filter: blur(6px); transform: scale(1.04); pointer-events: none; }
+.bl-island__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+@media (prefers-reduced-motion: reduce) { .bl-island, .bl-island__layer { transition: none !important; animation: none !important; } }
+`;
+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 DynamicIsland({
+  views = {},
+  view = "idle",
+  onPress,
+  duration = 520,
+  bounce = 0.35,
+  backgroundColor = "#000000",
+  textColor = "#f4f4f4",
+  lineColor = "rgba(255,255,255,0.08)",
+  accentColor = "#73eff7",
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  className = "",
+  style
+}) {
+  useStyles();
+  const current = views[view] ?? { width: 126, height: 36 };
+  const [layers, setLayers] = useState(() => [{ key: view, state: "in" }]);
+  const timer = useRef(0);
+  useEffect(() => {
+    setLayers((prev) => {
+      if (prev.some((layer) => layer.key === view && layer.state === "in")) return prev;
+      return [...prev.filter((layer) => layer.key !== view).map((layer) => ({ ...layer, state: "out" })), { key: view, state: "in" }];
+    });
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => setLayers((prev) => prev.filter((layer) => layer.state !== "out")), duration);
+  }, [view, duration]);
+  useEffect(() => () => clearTimeout(timer.current), []);
+  const radius = current.radius ?? Math.min(current.height / 2, 44);
+  const ease = `cubic-bezier(.3, ${(1 + bounce * 1.2).toFixed(2)}, .5, 1)`;
+  return (
+    // Always a div, so switching onPress on and off never remounts it mid-animation.
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `bl-island ${className}`,
+        role: onPress ? "button" : void 0,
+        tabIndex: onPress ? 0 : void 0,
+        onClick: onPress ? () => onPress(view) : void 0,
+        onKeyDown: onPress ? (event) => {
+          if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            onPress(view);
+          }
+        } : void 0,
+        "aria-label": onPress ? current.label ?? view : void 0,
+        style: {
+          "--bl-w": `${current.width}px`,
+          "--bl-h": `${current.height}px`,
+          "--bl-r": `${radius}px`,
+          "--bl-dur": `${duration}ms`,
+          "--bl-ease": ease,
+          "--bl-bg": backgroundColor,
+          "--bl-ink": textColor,
+          "--bl-line": lineColor,
+          "--bl-accent": accentColor,
+          "--bl-font": fontFamily,
+          ...style
+        },
+        children: [
+          layers.map((layer) => /* @__PURE__ */ jsx("span", { className: "bl-island__layer", "data-state": layer.state, "aria-hidden": layer.state === "out" || void 0, inert: layer.state === "out" ? true : void 0, children: views[layer.key]?.content }, layer.key)),
+          /* @__PURE__ */ jsx("span", { className: "bl-island__sr", role: "status", "aria-live": "polite", children: current.label ?? "" })
+        ]
+      }
+    )
+  );
+}
+export {
+  DynamicIsland as default
+};

package/dist/EdgeFX.d.ts

@@ -0,0 +1,27 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface EdgeFXProps {
+    /** The card inside the frame. */
+    children?: ReactNode;
+    /** Marching pixel dashes, a band circling the frame, a pointer-following light, or a flash across the surface. */
+    mode?: 'ants' | 'energy' | 'glow' | 'glare';
+    /** Hover also lights it while focus is inside. */
+    active?: 'always' | 'hover';
+    /** Edge thickness in px. */
+    width?: number;
+    radius?: number;
+    /** Dash length for ants, in px. */
+    dash?: number;
+    /** Cycle speed multiplier. */
+    speed?: number;
+    /** How far from the card the glow notices the pointer, in px. */
+    reach?: number;
+    color?: string;
+    secondColor?: string;
+    /** The resting edge. */
+    lineColor?: string;
+    backgroundColor?: string;
+    glareColor?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function EdgeFX({ children, mode, active, width, radius, dash, speed, reach, color, secondColor, lineColor, backgroundColor, glareColor, className, style }: EdgeFXProps): import("react").JSX.Element;

package/dist/EdgeFX.js

@@ -0,0 +1,98 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useInsertionEffect, useRef } from "react";
+const STYLE_ID = "bl-edge-fx";
+const CSS = `
+@property --bl-edge-turn { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
+.bl-edge { --bl-on: 1; position: relative; display: block; box-sizing: border-box; padding: var(--bl-w); border-radius: var(--bl-radius); background: var(--bl-line); isolation: isolate; }
+.bl-edge__body { position: relative; z-index: 1; height: 100%; overflow: hidden; border-radius: calc(var(--bl-radius) - var(--bl-w)); background: var(--bl-bg); }
+.bl-edge__ring { position: absolute; inset: 0; z-index: 0; border-radius: inherit; opacity: var(--bl-on); transition: opacity 200ms steps(3); pointer-events: none; }
+.bl-edge[data-active="hover"] { --bl-on: 0; }
+.bl-edge[data-active="hover"]:hover, .bl-edge[data-active="hover"]:focus-within { --bl-on: 1; }
+.bl-edge[data-mode="ants"] .bl-edge__ring { background:
+  linear-gradient(90deg, var(--bl-a) 50%, var(--bl-b) 0) 0 0 / var(--bl-dash) var(--bl-w) repeat-x,
+  linear-gradient(90deg, var(--bl-a) 50%, var(--bl-b) 0) 0 100% / var(--bl-dash) var(--bl-w) repeat-x,
+  linear-gradient(0deg, var(--bl-a) 50%, var(--bl-b) 0) 0 0 / var(--bl-w) var(--bl-dash) repeat-y,
+  linear-gradient(0deg, var(--bl-a) 50%, var(--bl-b) 0) 100% 0 / var(--bl-w) var(--bl-dash) repeat-y;
+  animation: bl-edge-march var(--bl-speed) steps(4) infinite; }
+.bl-edge[data-mode="energy"] .bl-edge__ring { background: conic-gradient(from var(--bl-edge-turn), transparent 0 55%, var(--bl-b) 70%, var(--bl-a) 80%, transparent 92%); animation: bl-edge-spin var(--bl-speed) steps(36) infinite; }
+.bl-edge[data-mode="glow"] .bl-edge__ring { background: radial-gradient(circle var(--bl-reach) at var(--bl-x, 50%) var(--bl-y, -40%), var(--bl-a), var(--bl-b) 45%, transparent 75%); }
+.bl-edge[data-mode="glow"][data-active="hover"] { --bl-on: 0; }
+.bl-edge[data-mode="glow"][data-lit] { --bl-on: 1; }
+.bl-edge__glare { position: absolute; inset: 0; z-index: 2; border-radius: inherit; overflow: hidden; pointer-events: none; }
+.bl-edge__glare::before { content: ""; position: absolute; top: -50%; bottom: -50%; left: 0; width: 40%; background: linear-gradient(100deg, transparent, var(--bl-glare), transparent); transform: translateX(-150%) skewX(-12deg); }
+.bl-edge[data-mode="glare"]:hover .bl-edge__glare::before, .bl-edge[data-mode="glare"]:focus-within .bl-edge__glare::before, .bl-edge[data-mode="glare"][data-active="always"] .bl-edge__glare::before { animation: bl-edge-glare var(--bl-speed) steps(12) infinite; }
+@keyframes bl-edge-march { to { background-position: var(--bl-dash) 0, calc(var(--bl-dash) * -1) 100%, 0 calc(var(--bl-dash) * -1), 100% var(--bl-dash); } }
+@keyframes bl-edge-spin { to { --bl-edge-turn: 360deg; } }
+@keyframes bl-edge-glare { 0% { transform: translateX(-150%) skewX(-12deg); } 60%, 100% { transform: translateX(350%) skewX(-12deg); } }
+@media (prefers-reduced-motion: reduce) { .bl-edge .bl-edge__ring, .bl-edge .bl-edge__glare::before { animation: none !important; 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);
+  }, []);
+}
+function EdgeFX({
+  children,
+  mode = "ants",
+  active = "always",
+  width = 3,
+  radius = 14,
+  dash = 12,
+  speed = 0.8,
+  reach = 160,
+  color = "#73eff7",
+  secondColor = "#41a6f6",
+  lineColor = "#333c57",
+  backgroundColor = "#1a1c2c",
+  glareColor = "rgba(244,244,244,0.22)",
+  className = "",
+  style
+}) {
+  useStyles();
+  const rootRef = useRef(null);
+  useEffect(() => {
+    if (mode !== "glow") return void 0;
+    const root = rootRef.current;
+    let raf = 0;
+    const onMove = (event) => {
+      if (raf) return;
+      raf = requestAnimationFrame(() => {
+        raf = 0;
+        const r = root.getBoundingClientRect();
+        const x = event.clientX - r.left;
+        const y = event.clientY - r.top;
+        const near = x > -reach && y > -reach && x < r.width + reach && y < r.height + reach;
+        root.style.setProperty("--bl-x", `${x.toFixed(0)}px`);
+        root.style.setProperty("--bl-y", `${y.toFixed(0)}px`);
+        root.toggleAttribute("data-lit", near);
+      });
+    };
+    window.addEventListener("pointermove", onMove, { passive: true });
+    return () => {
+      cancelAnimationFrame(raf);
+      window.removeEventListener("pointermove", onMove);
+    };
+  }, [mode, reach]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className: `bl-edge ${className}`,
+      "data-mode": mode,
+      "data-active": active,
+      style: { "--bl-w": `${width}px`, "--bl-radius": `${radius}px`, "--bl-dash": `${dash}px`, "--bl-speed": `${speed * (mode === "energy" ? 4 : mode === "glare" ? 3 : 1)}s`, "--bl-reach": `${reach}px`, "--bl-a": color, "--bl-b": mode === "ants" ? lineColor : secondColor, "--bl-line": lineColor, "--bl-bg": backgroundColor, "--bl-glare": glareColor, ...style },
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "bl-edge__ring", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("div", { className: "bl-edge__body", children }),
+        mode === "glare" && /* @__PURE__ */ jsx("span", { className: "bl-edge__glare", "aria-hidden": "true" })
+      ]
+    }
+  );
+}
+export {
+  EdgeFX as default
+};

package/dist/ElasticString.d.ts

@@ -0,0 +1,22 @@
+import { type CSSProperties } from 'react';
+export interface ElasticStringProps {
+    /** How many strings. */
+    strings?: number;
+    height?: number;
+    /** Fixed spacing between strings in px (default: spread evenly). */
+    gap?: number;
+    thickness?: number;
+    /** Colours, cycled per string. */
+    colors?: string[];
+    /** How close (px) the pointer must come to catch a string. */
+    grab?: number;
+    /** How far (px) a string bends before it slips free. */
+    maxPull?: number;
+    stiffness?: number;
+    damping?: number;
+    /** Called on release with the string index and a 0–1 strength. */
+    onPluck?: (index: number, strength: number) => void;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function ElasticString({ strings, height, gap, thickness, colors, grab, maxPull, stiffness, damping, onPluck, className, style }: ElasticStringProps): import("react").JSX.Element;