bits-lab 0.0.0-stage → 0.1.2

package/dist/InteractiveGrid.js

@@ -0,0 +1,194 @@
+'use client';
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+function rgb(hex) {
+  const v = hex.replace("#", "");
+  const full = v.length === 3 ? v.replace(/./g, (c) => c + c) : v.slice(0, 6);
+  const n = parseInt(full, 16);
+  return [n >> 16 & 255, n >> 8 & 255, n & 255];
+}
+function InteractiveGrid({
+  cellSize = 28,
+  gap = 2,
+  colors = ["#73eff7", "#41a6f6", "#3b5dc9", "#29366f"],
+  cellColor = "#1f2236",
+  backgroundColor = "#14151f",
+  trail = 700,
+  brush = 0,
+  ripple = true,
+  rippleSpeed = 24,
+  autopilot = true,
+  className = "",
+  style
+}) {
+  const wrapRef = useRef(null);
+  const canvasRef = useRef(null);
+  useEffect(() => {
+    const wrap = wrapRef.current;
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext("2d");
+    const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    const ramp = colors.map(rgb);
+    const base = rgb(cellColor);
+    let cols = 0;
+    let rows = 0;
+    let dpr = 1;
+    let heat = new Float32Array(0);
+    let frame = 0;
+    let visible = true;
+    let last = performance.now();
+    let pointer = null;
+    let lastActive = -Infinity;
+    let ripples = [];
+    let pilotT = Math.random() * 100;
+    let pilotCell = null;
+    const light = (c, r) => {
+      for (let y = r - brush; y <= r + brush; y++) {
+        for (let x = c - brush; x <= c + brush; x++) {
+          if (x < 0 || y < 0 || x >= cols || y >= rows) continue;
+          if (brush && (x - c) ** 2 + (y - r) ** 2 > (brush + 0.5) ** 2) continue;
+          heat[y * cols + x] = 1;
+        }
+      }
+    };
+    const stroke = (from, to) => {
+      let [x0, y0] = from ?? to;
+      const [x1, y1] = to;
+      const dx = Math.abs(x1 - x0);
+      const dy = -Math.abs(y1 - y0);
+      const sx = x0 < x1 ? 1 : -1;
+      const sy = y0 < y1 ? 1 : -1;
+      let err = dx + dy;
+      for (let n = 0; n < 512; n++) {
+        light(x0, y0);
+        if (x0 === x1 && y0 === y1) break;
+        const e2 = 2 * err;
+        if (e2 >= dy) {
+          err += dy;
+          x0 += sx;
+        }
+        if (e2 <= dx) {
+          err += dx;
+          y0 += sy;
+        }
+      }
+    };
+    const layout = () => {
+      dpr = Math.min(2, window.devicePixelRatio || 1);
+      canvas.width = Math.round(wrap.clientWidth * dpr);
+      canvas.height = Math.round(wrap.clientHeight * dpr);
+      cols = Math.max(1, Math.ceil(wrap.clientWidth / cellSize));
+      rows = Math.max(1, Math.ceil(wrap.clientHeight / cellSize));
+      heat = new Float32Array(cols * rows);
+      pointer = null;
+      draw();
+    };
+    const draw = () => {
+      const cell = cellSize * dpr;
+      const inset = gap * dpr;
+      ctx.fillStyle = backgroundColor;
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+      for (let r = 0; r < rows; r++) {
+        for (let c = 0; c < cols; c++) {
+          let h = heat[r * cols + c];
+          for (const rp of ripples) {
+            const ring = 1 - Math.abs(Math.hypot(c - rp.x, r - rp.y) - rp.r) / 1.5;
+            if (ring > 0) h = Math.max(h, ring * (1 - rp.r / rp.max));
+          }
+          if (h <= 0) {
+            ctx.fillStyle = cellColor;
+          } else {
+            const pos = (1 - h) * (ramp.length - 1);
+            const i = Math.max(0, Math.min(ramp.length - 2, Math.floor(pos)));
+            const t = ramp.length > 1 ? pos - i : 0;
+            const a = ramp[i];
+            const b = ramp[Math.min(ramp.length - 1, i + 1)];
+            const alpha = Math.min(1, h * 1.4);
+            const mix = (k) => Math.round(base[k] + (a[k] + (b[k] - a[k]) * t - base[k]) * alpha);
+            ctx.fillStyle = `rgb(${mix(0)},${mix(1)},${mix(2)})`;
+          }
+          ctx.fillRect(c * cell + inset / 2, r * cell + inset / 2, cell - inset, cell - inset);
+        }
+      }
+    };
+    const tick = (now) => {
+      frame = 0;
+      const dt = Math.min(0.1, (now - last) / 1e3);
+      last = now;
+      const fade = reduced ? 1 : dt * 1e3 / trail;
+      let hot = false;
+      for (let i = 0; i < heat.length; i++) {
+        if (heat[i] > 0) {
+          heat[i] = Math.max(0, heat[i] - fade);
+          hot = true;
+        }
+      }
+      ripples = ripples.filter((rp) => {
+        rp.r += rippleSpeed * dt;
+        return rp.r < rp.max;
+      });
+      if (autopilot && !reduced && now - lastActive > 2e3) {
+        pilotT += dt * 0.6;
+        const cell = [Math.round(((Math.sin(pilotT * 1.3) + Math.sin(pilotT * 0.7 + 1)) / 4 + 0.5) * (cols - 1)), Math.round(((Math.cos(pilotT * 0.9) + Math.sin(pilotT * 1.7)) / 4 + 0.5) * (rows - 1))];
+        stroke(pilotCell, cell);
+        pilotCell = cell;
+        hot = true;
+      } else pilotCell = null;
+      draw();
+      if (visible && (hot || ripples.length)) frame = requestAnimationFrame(tick);
+    };
+    const wake = () => {
+      if (frame || !visible) return;
+      last = performance.now();
+      frame = requestAnimationFrame(tick);
+    };
+    const cellAt = (event) => {
+      const rect = wrap.getBoundingClientRect();
+      const x = event.clientX - rect.left;
+      const y = event.clientY - rect.top;
+      if (x < 0 || y < 0 || x >= rect.width || y >= rect.height) return null;
+      return [Math.floor(x / cellSize), Math.floor(y / cellSize)];
+    };
+    const onMove = (event) => {
+      const cell = cellAt(event);
+      if (!cell) {
+        pointer = null;
+        return;
+      }
+      lastActive = performance.now();
+      if (reduced) heat.fill(0);
+      stroke(reduced ? null : pointer, cell);
+      pointer = cell;
+      if (reduced) draw();
+      else wake();
+    };
+    const onDown = (event) => {
+      if (!ripple || reduced) return;
+      const cell = cellAt(event);
+      if (!cell) return;
+      ripples.push({ x: cell[0], y: cell[1], r: 0, max: Math.hypot(cols, rows) * 0.8 });
+      wake();
+    };
+    const resize = new ResizeObserver(layout);
+    resize.observe(wrap);
+    const io = new IntersectionObserver(([entry]) => {
+      visible = entry.isIntersecting;
+      if (visible && autopilot && !reduced) wake();
+    });
+    io.observe(wrap);
+    window.addEventListener("pointermove", onMove, { passive: true });
+    window.addEventListener("pointerdown", onDown, { passive: true });
+    layout();
+    return () => {
+      cancelAnimationFrame(frame);
+      resize.disconnect();
+      io.disconnect();
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerdown", onDown);
+    };
+  }, [cellSize, gap, colors.join(), cellColor, backgroundColor, trail, brush, ripple, rippleSpeed, autopilot]);
+  return /* @__PURE__ */ jsx("div", { ref: wrapRef, className, "aria-hidden": "true", style: { position: "relative", width: "100%", height: "100%", overflow: "hidden", ...style }, children: /* @__PURE__ */ jsx("canvas", { ref: canvasRef, style: { position: "absolute", inset: 0, width: "100%", height: "100%" } }) });
+}
+export {
+  InteractiveGrid as default
+};

package/dist/InventoryGrid.d.ts

@@ -0,0 +1,45 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export type Rarity = 'common' | 'uncommon' | 'rare' | 'epic' | 'legendary';
+export interface InventoryItem {
+    /** Items with the same id stack. */
+    id: string;
+    name: string;
+    icon?: ReactNode;
+    count?: number;
+    rarity?: Rarity;
+    /** Shown in the tooltip. */
+    description?: ReactNode;
+}
+export type InventorySlot = InventoryItem | null;
+export type MoveAction = 'moved' | 'merged' | 'swapped';
+export interface InventoryGridProps {
+    /** Slots, left to right; null is an empty slot. */
+    items?: InventorySlot[];
+    columns?: number;
+    /** Slot size, in px (shrinks to fit narrow containers). */
+    slotSize?: number;
+    /** Same-id items merge up to this count; the rest stays behind. */
+    maxStack?: number;
+    panelColor?: string;
+    slotColor?: string;
+    hoverColor?: string;
+    /** Highlight for the held item. */
+    accentColor?: string;
+    /** Accessible name of the grid. */
+    label?: string;
+    fontFamily?: string;
+    /** Called after every move. */
+    onChange?: (slots: InventorySlot[], move: {
+        from: number;
+        to: number;
+        action: MoveAction;
+    }) => void;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare const RARITY_COLORS: Record<Rarity, string>;
+export declare function moveItem(slots: InventorySlot[], from: number, to: number, maxStack?: number): {
+    slots: InventorySlot[];
+    action: MoveAction | null;
+};
+export default function InventoryGrid({ items, columns, slotSize, maxStack, panelColor, slotColor, hoverColor, accentColor, label, fontFamily, onChange, className, style }: InventoryGridProps): import("react").JSX.Element;

package/dist/InventoryGrid.js

@@ -0,0 +1,272 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-inventory";
+const CSS = `
+.bl-inv { position: relative; display: inline-grid; max-width: 100%; gap: 6px; padding: 12px; background: var(--bl-panel); font-family: var(--bl-font, "Press Start 2P", ui-monospace, monospace);
+  grid-template-columns: repeat(var(--bl-cols), var(--bl-fit)); touch-action: none;
+  box-shadow: 0 -4px 0 0 #0b0b14, 0 4px 0 0 #0b0b14, -4px 0 0 0 #0b0b14, 4px 0 0 0 #0b0b14, 8px 8px 0 4px rgba(11,11,20,0.4); }
+.bl-inv__slot { position: relative; display: grid; place-items: center; width: var(--bl-fit); height: var(--bl-fit); padding: 0; border: 0; background: var(--bl-slot-bg); cursor: grab;
+  box-shadow: inset 3px 3px 0 0 rgba(0,0,0,0.45), inset -3px -3px 0 0 rgba(255,255,255,0.08), inset 0 0 0 3px var(--bl-rarity, transparent); }
+.bl-inv__slot[data-empty] { cursor: default; }
+.bl-inv__slot:focus-visible { outline: 3px solid #f4f4f4; outline-offset: 1px; z-index: 1; }
+.bl-inv__slot[data-over] { background: var(--bl-hover); }
+.bl-inv__slot[data-source] > .bl-inv__item { opacity: 0.25; }
+.bl-inv__slot[data-held] { box-shadow: inset 0 0 0 3px var(--bl-accent); animation: bl-inv-held 0.6s steps(2) infinite; }
+.bl-inv__slot[data-landed] > .bl-inv__item { animation: bl-inv-pop 260ms steps(4); }
+.bl-inv__slot[data-rarity="legendary"]::after { content: ""; position: absolute; inset: 3px; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255,205,117,0.35) 50%, transparent 65%); background-size: 250% 100%; animation: bl-inv-shine 2.4s steps(12) infinite; }
+.bl-inv__item { display: grid; place-items: center; width: 78%; height: 78%; pointer-events: none; }
+.bl-inv__item > * { max-width: 100%; max-height: 100%; }
+.bl-inv__count { position: absolute; right: 4px; bottom: 3px; color: #f4f4f4; font-size: 10px; line-height: 1; text-shadow: 2px 2px 0 #0b0b14; pointer-events: none; }
+.bl-inv__ghost { position: fixed; z-index: 9999; display: grid; place-items: center; width: var(--bl-fit); height: var(--bl-fit); pointer-events: none; transform: translate(-50%, -50%) scale(1.15); filter: drop-shadow(4px 4px 0 rgba(11,11,20,0.55)); }
+.bl-inv__tip { position: absolute; z-index: 2; min-width: 180px; max-width: 240px; padding: 10px 12px; background: #0b0b14; color: #f4f4f4; pointer-events: none;
+  box-shadow: 0 0 0 3px var(--bl-tip-border, #5d275d); transform: translate(-50%, calc(-100% - 10px)); }
+.bl-inv__tip-name { margin: 0 0 6px; font-size: 10px; line-height: 1.4; color: var(--bl-tip-color, #f4f4f4); text-transform: uppercase; }
+.bl-inv__tip-meta { margin: 0 0 6px; font-size: 8px; color: #94b0c2; text-transform: uppercase; }
+.bl-inv__tip-desc { margin: 0; font: 13px/1.35 var(--bl-body, ui-monospace, monospace); color: #94b0c2; }
+.bl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+@keyframes bl-inv-pop { 0% { transform: scale(0.6); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }
+@keyframes bl-inv-held { 50% { box-shadow: inset 0 0 0 3px transparent; } }
+@keyframes bl-inv-shine { from { background-position: 150% 0; } to { background-position: -150% 0; } }
+@media (prefers-reduced-motion: reduce) {
+  .bl-inv__slot[data-held], .bl-inv__slot[data-landed] > .bl-inv__item, .bl-inv__slot[data-rarity="legendary"]::after { 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);
+  }, []);
+}
+const RARITY_COLORS = { common: "#94b0c2", uncommon: "#38b764", rare: "#41a6f6", epic: "#c447a6", legendary: "#ffcd75" };
+const describe = (item) => item ? `${item.name}${item.count > 1 ? ` \xD7${item.count}` : ""}${item.rarity ? `, ${item.rarity}` : ""}` : "empty";
+function moveItem(slots, from, to, maxStack = 64) {
+  const next = [...slots];
+  const source = next[from];
+  const target = next[to];
+  if (!source || from === to) return { slots, action: null };
+  if (!target) {
+    next[to] = source;
+    next[from] = null;
+    return { slots: next, action: "moved" };
+  }
+  if (target.id === source.id && (target.count ?? 1) < maxStack) {
+    const total = (target.count ?? 1) + (source.count ?? 1);
+    next[to] = { ...target, count: Math.min(maxStack, total) };
+    next[from] = total > maxStack ? { ...source, count: total - maxStack } : null;
+    return { slots: next, action: "merged" };
+  }
+  next[to] = source;
+  next[from] = target;
+  return { slots: next, action: "swapped" };
+}
+function InventoryGrid({
+  items = [],
+  columns = 6,
+  slotSize = 64,
+  maxStack = 64,
+  panelColor = "#333c57",
+  slotColor = "#1a1c2c",
+  hoverColor = "#29366f",
+  accentColor = "#ffcd75",
+  label = "Inventory",
+  fontFamily,
+  onChange,
+  className = "",
+  style
+}) {
+  useStyles();
+  const [slots, setSlots] = useState(items);
+  const [focus, setFocus] = useState(0);
+  const [held, setHeld] = useState(null);
+  const [drag, setDrag] = useState(null);
+  const [over, setOver] = useState(null);
+  const [landed, setLanded] = useState({ index: null, key: 0 });
+  const [hover, setHover] = useState(null);
+  const [announcement, setAnnouncement] = useState("");
+  const gridRef = useRef(null);
+  const slotRefs = useRef([]);
+  useEffect(() => setSlots(items), [items]);
+  const [fit, setFit] = useState(slotSize);
+  useEffect(() => {
+    const parent = gridRef.current?.parentElement;
+    if (!parent) return void 0;
+    const measure = () => {
+      const available = parent.clientWidth - 24 - 8 - (columns - 1) * 6;
+      setFit(Math.max(28, Math.min(slotSize, Math.floor(available / columns))));
+    };
+    const observer = new ResizeObserver(measure);
+    observer.observe(parent);
+    measure();
+    return () => observer.disconnect();
+  }, [slotSize, columns]);
+  const commit = useCallback(
+    (from, to) => {
+      const { slots: next, action } = moveItem(slots, from, to, maxStack);
+      if (!action) return;
+      setSlots(next);
+      setLanded((current) => ({ index: to, key: current.key + 1 }));
+      setAnnouncement(`${slots[from]?.name} ${action} to slot ${to + 1}.`);
+      onChange?.(next, { from, to, action });
+    },
+    [slots, maxStack, onChange]
+  );
+  const focusSlot = (index) => {
+    setFocus(index);
+    slotRefs.current[index]?.focus();
+  };
+  const onKeyDown = (event, index) => {
+    const moves = { ArrowRight: 1, ArrowLeft: -1, ArrowDown: columns, ArrowUp: -columns };
+    if (moves[event.key] !== void 0) {
+      event.preventDefault();
+      const next = index + moves[event.key];
+      if (next >= 0 && next < slots.length) focusSlot(next);
+      return;
+    }
+    if (event.key === "Home" || event.key === "End") {
+      event.preventDefault();
+      focusSlot(event.key === "Home" ? 0 : slots.length - 1);
+      return;
+    }
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      if (held === null) {
+        if (!slots[index]) return;
+        setHeld(index);
+        setAnnouncement(`Picked up ${describe(slots[index])}. Move with arrow keys, press Enter to drop.`);
+      } else {
+        commit(held, index);
+        if (held === index) setAnnouncement("Put back.");
+        setHeld(null);
+      }
+      return;
+    }
+    if (event.key === "Escape" && held !== null) {
+      setHeld(null);
+      setAnnouncement("Cancelled.");
+    }
+  };
+  const onPointerDown = (event, index) => {
+    if (!slots[index] || event.button > 0) return;
+    const startX = event.clientX;
+    const startY = event.clientY;
+    const el = event.currentTarget;
+    el.setPointerCapture(event.pointerId);
+    let dragging = false;
+    const slotAt = (x, y) => {
+      const target = document.elementFromPoint(x, y)?.closest("[data-slot-index]");
+      return target && gridRef.current?.contains(target) ? Number(target.dataset.slotIndex) : null;
+    };
+    const move = (e) => {
+      if (!dragging && Math.hypot(e.clientX - startX, e.clientY - startY) < 5) return;
+      dragging = true;
+      setDrag({ index, x: e.clientX, y: e.clientY });
+      setOver(slotAt(e.clientX, e.clientY));
+      setHover(null);
+    };
+    const up = (e) => {
+      el.removeEventListener("pointermove", move);
+      el.removeEventListener("pointerup", up);
+      el.removeEventListener("pointercancel", up);
+      if (dragging) {
+        const to = e.type === "pointerup" ? slotAt(e.clientX, e.clientY) : null;
+        if (to !== null) commit(index, to);
+      }
+      setDrag(null);
+      setOver(null);
+    };
+    el.addEventListener("pointermove", move);
+    el.addEventListener("pointerup", up);
+    el.addEventListener("pointercancel", up);
+  };
+  const tipItem = hover !== null && !drag ? slots[hover] : null;
+  const tipEl = hover !== null ? slotRefs.current[hover] : null;
+  const gridRect = gridRef.current?.getBoundingClientRect();
+  const tipRect = tipEl?.getBoundingClientRect();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: gridRef,
+      role: "grid",
+      "aria-label": label,
+      className: `bl-inv ${className}`,
+      style: {
+        "--bl-cols": columns,
+        "--bl-fit": `${fit}px`,
+        "--bl-panel": panelColor,
+        "--bl-slot-bg": slotColor,
+        "--bl-hover": hoverColor,
+        "--bl-accent": accentColor,
+        ...fontFamily ? { "--bl-font": fontFamily } : null,
+        ...style
+      },
+      children: [
+        slots.map((item, index) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref: (el) => {
+              slotRefs.current[index] = el;
+            },
+            type: "button",
+            role: "gridcell",
+            className: "bl-inv__slot",
+            "data-slot-index": index,
+            "data-empty": !item || void 0,
+            "data-rarity": item?.rarity,
+            "data-over": drag && over === index || void 0,
+            "data-source": drag?.index === index || void 0,
+            "data-held": held === index || void 0,
+            "data-landed": landed.index === index ? landed.key : void 0,
+            tabIndex: focus === index ? 0 : -1,
+            "aria-label": `Slot ${index + 1}: ${describe(item)}`,
+            style: { "--bl-rarity": item?.rarity ? RARITY_COLORS[item.rarity] : void 0 },
+            onFocus: () => {
+              setFocus(index);
+              setHover(index);
+            },
+            onBlur: () => setHover((current) => current === index ? null : current),
+            onPointerEnter: () => setHover(index),
+            onPointerLeave: () => setHover((current) => current === index ? null : current),
+            onPointerDown: (event) => onPointerDown(event, index),
+            onKeyDown: (event) => onKeyDown(event, index),
+            children: [
+              item && /* @__PURE__ */ jsx("span", { className: "bl-inv__item", children: item.icon }, landed.index === index ? landed.key : "item"),
+              item?.count > 1 && /* @__PURE__ */ jsx("span", { className: "bl-inv__count", children: item.count })
+            ]
+          },
+          index
+        )),
+        tipItem && tipRect && gridRect && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "bl-inv__tip",
+            role: "tooltip",
+            style: {
+              left: tipRect.left - gridRect.left + tipRect.width / 2,
+              top: tipRect.top - gridRect.top,
+              "--bl-tip-color": RARITY_COLORS[tipItem.rarity] ?? "#f4f4f4",
+              "--bl-tip-border": RARITY_COLORS[tipItem.rarity] ?? "#5d275d"
+            },
+            children: [
+              /* @__PURE__ */ jsx("p", { className: "bl-inv__tip-name", children: tipItem.name }),
+              /* @__PURE__ */ jsxs("p", { className: "bl-inv__tip-meta", children: [
+                tipItem.rarity ?? "common",
+                tipItem.count > 1 ? ` \xB7 \xD7${tipItem.count}` : ""
+              ] }),
+              tipItem.description && /* @__PURE__ */ jsx("p", { className: "bl-inv__tip-desc", children: tipItem.description })
+            ]
+          }
+        ),
+        drag && slots[drag.index] && /* @__PURE__ */ jsx("div", { className: "bl-inv__ghost", style: { left: drag.x, top: drag.y }, "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { className: "bl-inv__item", children: slots[drag.index].icon }) }),
+        /* @__PURE__ */ jsx("span", { className: "bl-sr", "aria-live": "assertive", children: announcement })
+      ]
+    }
+  );
+}
+export {
+  RARITY_COLORS,
+  InventoryGrid as default,
+  moveItem
+};

package/dist/JellyBlob.d.ts

@@ -0,0 +1,30 @@
+import { type ButtonHTMLAttributes, type CSSProperties, type MouseEvent as ReactMouseEvent, type ReactNode } from 'react';
+export interface JellyBlobProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'type' | 'children' | 'style' | 'color'> {
+    children?: ReactNode;
+    onClick?: (event: ReactMouseEvent<HTMLButtonElement>) => void;
+    /** The resting pill, in px. */
+    width?: number;
+    height?: number;
+    /** Springs around the outline; more is smoother. */
+    points?: number;
+    /** How far the edge reaches toward the pointer, in px. */
+    bulge?: number;
+    /** How flat a press makes it, in px. */
+    squash?: number;
+    stiffness?: number;
+    damping?: number;
+    /** Gentle breathing at rest (paused off-screen). */
+    idle?: boolean;
+    color?: string;
+    pressedColor?: string;
+    textColor?: string;
+    /** Focus ring. */
+    accentColor?: string;
+    fontSize?: number;
+    fontFamily?: string;
+    type?: 'button' | 'submit' | 'reset';
+    disabled?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function JellyBlob({ children, onClick, width, height, points, bulge, squash, stiffness, damping, idle, color, pressedColor, textColor, accentColor, fontSize, fontFamily, type, disabled, className, style, ...rest }: JellyBlobProps): import("react").JSX.Element;