bits-lab 0.0.0-stage → 0.1.0

package/dist/PinCard.js

@@ -0,0 +1,84 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useInsertionEffect } from "react";
+const STYLE_ID = "bl-pin-card";
+const CSS = `
+.bl-pin { position: relative; display: grid; justify-items: center; width: var(--bl-w); max-width: 100%; padding-top: 56px; perspective: 1000px; color: var(--bl-ink); font-family: var(--bl-font); text-decoration: none; outline: none; }
+.bl-pin__label { position: absolute; top: 0; left: 50%; z-index: 3; padding: 5px 12px; border-radius: 999px; background: var(--bl-label-bg); box-shadow: 0 0 0 1px var(--bl-line); color: var(--bl-ink); font-size: 13px; font-weight: 600; white-space: nowrap; opacity: 0; transform: translate(-50%, 10px); transition: opacity 200ms, transform 300ms cubic-bezier(.3,1.4,.5,1); }
+.bl-pin__card { position: relative; z-index: 2; width: 100%; border-radius: var(--bl-radius); background: var(--bl-bg); box-shadow: 0 0 0 1px var(--bl-line), 0 18px 40px -20px rgba(0,0,0,0.7); transform-origin: 50% 100%; transition: transform 600ms cubic-bezier(.2,.9,.25,1), box-shadow 400ms; overflow: hidden; }
+.bl-pin__ground { position: relative; width: 100%; height: 96px; margin-top: -40px; transform: rotateX(70deg); transform-style: preserve-3d; pointer-events: none; }
+.bl-pin__ring { position: absolute; left: 50%; top: 50%; width: 140px; height: 140px; margin: -70px 0 0 -70px; border-radius: 50%; background: radial-gradient(color-mix(in srgb, var(--bl-accent) 40%, transparent), transparent 65%); opacity: 0; transition: opacity 300ms; }
+.bl-pin__ring::before, .bl-pin__ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 2px var(--bl-accent); opacity: 0; }
+.bl-pin__beam { position: absolute; left: 50%; bottom: 46px; z-index: 1; width: 2px; height: 0; margin-left: -1px; background: linear-gradient(transparent, var(--bl-accent)); transition: height 500ms cubic-bezier(.2,.9,.25,1); pointer-events: none; }
+.bl-pin__beam::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--bl-accent); box-shadow: 0 0 12px 3px var(--bl-accent); }
+.bl-pin:is(:hover, :focus-visible, :focus-within) .bl-pin__card { transform: translateY(-14px) rotateX(38deg) scale(0.86); box-shadow: 0 0 0 1px var(--bl-accent), 0 40px 60px -30px rgba(0,0,0,0.9); }
+.bl-pin:is(:hover, :focus-visible, :focus-within) .bl-pin__label { opacity: 1; transform: translate(-50%, 0); }
+.bl-pin:is(:hover, :focus-visible, :focus-within) .bl-pin__beam { height: 90px; }
+.bl-pin:is(:hover, :focus-visible, :focus-within) .bl-pin__ring { opacity: 1; }
+.bl-pin:is(:hover, :focus-visible, :focus-within) .bl-pin__ring::before { animation: bl-pin-pulse 2s ease-out infinite; }
+.bl-pin:is(:hover, :focus-visible, :focus-within) .bl-pin__ring::after { animation: bl-pin-pulse 2s ease-out 1s infinite; }
+.bl-pin:focus-visible .bl-pin__label { box-shadow: 0 0 0 2px var(--bl-accent); }
+@keyframes bl-pin-pulse { from { transform: scale(0.2); opacity: 1; } to { transform: scale(1); opacity: 0; } }
+@media (prefers-reduced-motion: reduce) {
+  .bl-pin__card, .bl-pin__beam, .bl-pin__label { transition: opacity 150ms; }
+  .bl-pin:is(:hover, :focus-visible, :focus-within) .bl-pin__card { transform: none; }
+  .bl-pin__ring::before, .bl-pin__ring::after { 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 PinCard({
+  children,
+  title,
+  href,
+  target,
+  width = 300,
+  radius = 16,
+  backgroundColor = "#1a1c2c",
+  labelColor = "#0b0b14",
+  textColor = "#f4f4f4",
+  lineColor = "#333c57",
+  accentColor = "#73eff7",
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  className = "",
+  style
+}) {
+  useStyles();
+  const Tag = href ? "a" : "div";
+  return /* @__PURE__ */ jsxs(
+    Tag,
+    {
+      className: `bl-pin ${className}`,
+      href,
+      target,
+      rel: target === "_blank" ? "noopener noreferrer" : void 0,
+      tabIndex: href ? void 0 : 0,
+      style: {
+        "--bl-w": `${width}px`,
+        "--bl-radius": `${radius}px`,
+        "--bl-bg": backgroundColor,
+        "--bl-label-bg": labelColor,
+        "--bl-ink": textColor,
+        "--bl-line": lineColor,
+        "--bl-accent": accentColor,
+        "--bl-font": fontFamily,
+        ...style
+      },
+      children: [
+        title && /* @__PURE__ */ jsx("span", { className: "bl-pin__label", children: title }),
+        /* @__PURE__ */ jsx("div", { className: "bl-pin__card", children }),
+        /* @__PURE__ */ jsx("span", { className: "bl-pin__beam", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: "bl-pin__ground", "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { className: "bl-pin__ring" }) })
+      ]
+    }
+  );
+}
+export {
+  PinCard as default
+};

package/dist/PixelAvatar.d.ts

@@ -0,0 +1,33 @@
+import { type CSSProperties } from 'react';
+export type AvatarVariant = 'creature' | 'identicon';
+export interface AvatarGrid {
+    /** 10×10 colors, row by row; null cells are empty. */
+    grid: (string | null)[][];
+    /** [x, y] cells that form the eyes (empty for identicons). */
+    eyes: [number, number][];
+    body: string;
+    shade: string;
+    backdrop: string;
+}
+export interface PixelAvatarProps {
+    /** Any string; the same seed always draws the same avatar. */
+    seed?: string | number;
+    /** Rendered size in px. */
+    size?: number;
+    variant?: AvatarVariant;
+    shape?: 'rounded' | 'square' | 'circle';
+    /** true for a seeded backdrop, a color of your own, or false for none. */
+    background?: boolean | string;
+    /** Idle blink, offset per seed. */
+    blink?: boolean;
+    /** Accessible name; defaults to "Avatar for {seed}". */
+    title?: string;
+    /** Hide from assistive tech (when a name sits next to it). */
+    decorative?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function avatarGrid(seed: string | number, variant?: AvatarVariant): AvatarGrid;
+declare function PixelAvatar({ seed, size, variant, shape, background, blink, title, decorative, className, style }: PixelAvatarProps): import("react").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof PixelAvatar>;
+export default _default;

package/dist/PixelAvatar.js

@@ -0,0 +1,144 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useId, useInsertionEffect, useMemo } from "react";
+const STYLE_ID = "bl-pixel-avatar";
+const CSS = `
+.bl-ava { display: inline-block; flex: 0 0 auto; vertical-align: middle; }
+.bl-ava__eyes { transform-box: fill-box; transform-origin: center; animation: bl-ava-blink 5s steps(1) infinite; animation-delay: var(--bl-blink-delay, 0s); }
+@keyframes bl-ava-blink { 0%, 95%, 100% { transform: none; } 96%, 98% { transform: scaleY(0.2); } }
+@media (prefers-reduced-motion: reduce) { .bl-ava__eyes { 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 hash(text) {
+  let h1 = 3735928559;
+  let h2 = 1103547991;
+  for (let i = 0; i < text.length; i++) {
+    const c = text.charCodeAt(i);
+    h1 = Math.imul(h1 ^ c, 2654435761);
+    h2 = Math.imul(h2 ^ c, 1597334677);
+  }
+  h1 = Math.imul(h1 ^ h1 >>> 16, 2246822507) ^ Math.imul(h2 ^ h2 >>> 13, 3266489909);
+  return h1 >>> 0;
+}
+function random(seed) {
+  let a = seed;
+  return () => {
+    a = a + 1831565813 | 0;
+    let t = Math.imul(a ^ a >>> 15, 1 | a);
+    t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+const PALETTES = [
+  ["#b13e53", "#5d275d"],
+  ["#ef7d57", "#b13e53"],
+  ["#ffcd75", "#ef7d57"],
+  ["#a7f070", "#38b764"],
+  ["#38b764", "#257179"],
+  ["#73eff7", "#41a6f6"],
+  ["#41a6f6", "#3b5dc9"],
+  ["#94b0c2", "#566c86"]
+];
+const BACKDROPS = ["#333c57", "#29366f", "#5d275d", "#257179", "#1a1c2c"];
+const INK = "#0b0b14";
+const WHITE = "#f4f4f4";
+const G = 10;
+function avatarGrid(seed, variant = "creature") {
+  const rand = random(hash(String(seed)));
+  const [body, shade] = PALETTES[Math.floor(rand() * PALETTES.length)];
+  const backdrop = BACKDROPS[Math.floor(rand() * BACKDROPS.length)];
+  const cells = Array.from({ length: G }, () => Array(G).fill(0));
+  const eyes = [];
+  if (variant === "identicon") {
+    for (let y = 1; y < G - 1; y++) for (let x = 1; x < G / 2; x++) cells[y][x] = rand() < 0.5 ? 1 : 0;
+  } else {
+    for (let y = 1; y < G - 1; y++) {
+      for (let x = 1; x < G / 2; x++) {
+        const towardCenter = (x - 1) / (G / 2 - 2);
+        const towardMiddle = 1 - Math.abs((y - 4.5) / 4.5);
+        cells[y][x] = rand() < 0.12 + 0.8 * Math.min(1, towardCenter * 0.7 + towardMiddle * 0.6) ? 1 : 0;
+      }
+    }
+    for (let y = 3; y <= 6; y++) cells[y][3] = cells[y][4] = 1;
+  }
+  for (let y = 0; y < G; y++) for (let x = 0; x < G / 2; x++) cells[y][G - 1 - x] = cells[y][x];
+  const grid = cells.map((row, y) => row.map((on) => on ? variant !== "identicon" && y >= 7 ? shade : body : null));
+  if (variant !== "identicon") {
+    const outline = (x, y) => [[1, 0], [-1, 0], [0, 1], [0, -1]].some(([dx, dy]) => cells[y + dy]?.[x + dx]);
+    for (let y = 0; y < G; y++) for (let x = 0; x < G; x++) if (!cells[y][x] && outline(x, y)) grid[y][x] = INK;
+    const ey = 3 + Math.floor(rand() * 2);
+    const ex = rand() < 0.5 ? 3 : 2;
+    for (const x of [ex, G - 1 - ex]) {
+      grid[ey][x] = WHITE;
+      grid[ey + 1][x] = INK;
+      eyes.push([x, ey], [x, ey + 1]);
+    }
+    if (rand() < 0.6) grid[ey + 3][4] = grid[ey + 3][5] = INK;
+  }
+  return { grid, eyes, body, shade, backdrop };
+}
+function PixelAvatar({ seed = "bits", size = 64, variant = "creature", shape = "rounded", background = true, blink = false, title, decorative = false, className = "", style }) {
+  useStyles();
+  const clip = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const { grid, eyes, backdrop } = useMemo(() => avatarGrid(seed, variant), [seed, variant]);
+  const eyeSet = new Set(eyes.map(([x, y]) => `${x},${y}`));
+  const body = [];
+  const eyeRects = [];
+  grid.forEach((row, y) => {
+    let x = 0;
+    while (x < G) {
+      const color = row[x];
+      if (!color) {
+        x++;
+        continue;
+      }
+      if (eyeSet.has(`${x},${y}`)) {
+        eyeRects.push(/* @__PURE__ */ jsx("rect", { x, y, width: 1, height: 1, fill: color }, `e${x}-${y}`));
+        x++;
+        continue;
+      }
+      let run = 1;
+      while (x + run < G && row[x + run] === color && !eyeSet.has(`${x + run},${y}`)) run++;
+      body.push(/* @__PURE__ */ jsx("rect", { x, y, width: run, height: 1, fill: color }, `${x}-${y}`));
+      x += run;
+    }
+  });
+  const fill = background === true ? backdrop : background || "none";
+  const radius = shape === "circle" ? 6 : shape === "rounded" ? 2 : 0;
+  const delay = `${-(hash(String(seed)) % 5e3) / 1e3}s`;
+  const label = title ?? `Avatar for ${seed}`;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: `bl-ava ${className}`,
+      viewBox: "-1 -1 12 12",
+      width: size,
+      height: size,
+      shapeRendering: "crispEdges",
+      role: decorative ? void 0 : "img",
+      "aria-label": decorative ? void 0 : label,
+      "aria-hidden": decorative || void 0,
+      style: { "--bl-blink-delay": delay, ...style },
+      children: [
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: `${clip}-shape`, children: /* @__PURE__ */ jsx("rect", { x: -1, y: -1, width: 12, height: 12, rx: radius }) }) }),
+        /* @__PURE__ */ jsxs("g", { clipPath: `url(#${clip}-shape)`, children: [
+          /* @__PURE__ */ jsx("rect", { x: -1, y: -1, width: 12, height: 12, fill }),
+          body,
+          /* @__PURE__ */ jsx("g", { className: blink && eyeRects.length ? "bl-ava__eyes" : void 0, children: eyeRects })
+        ] })
+      ]
+    }
+  );
+}
+var stdin_default = memo(PixelAvatar);
+export {
+  avatarGrid,
+  stdin_default as default
+};

package/dist/PixelButton.d.ts

@@ -0,0 +1,20 @@
+import { type ButtonHTMLAttributes, type MouseEvent, type ReactNode, type Ref } from 'react';
+export type PixelButtonVariant = 'primary' | 'secondary' | 'success' | 'warning' | 'info';
+export interface PixelButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {
+    /** Preset face and text colors. */
+    variant?: PixelButtonVariant;
+    size?: 'sm' | 'md' | 'lg';
+    /** Custom face color; overrides the variant. */
+    color?: string;
+    /** Custom label color; overrides the variant. */
+    textColor?: string;
+    /** Shown before the label. */
+    icon?: ReactNode;
+    /** Shows loading pips, sets aria-busy and ignores clicks. */
+    loading?: boolean;
+    fontFamily?: string;
+    /** Like onClick, but skipped while loading. */
+    onPress?: (event: MouseEvent<HTMLButtonElement>) => void;
+    ref?: Ref<HTMLButtonElement>;
+}
+export default function PixelButton({ children, variant, size, color, textColor, icon, loading, disabled, fontFamily, type, className, style, onPress, onClick, ref, ...rest }: PixelButtonProps): import("react").JSX.Element;

package/dist/PixelButton.js

@@ -0,0 +1,128 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useInsertionEffect } from "react";
+const STYLE_ID = "bl-pixel-button";
+const CSS = `
+.bl-pxbtn {
+  --bl-face: #b13e53; --bl-text: #f4f4f4; --bl-ink: #0b0b14; --bl-px: 4px;
+  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
+  margin: var(--bl-px); border: 0; cursor: pointer; user-select: none;
+  background: var(--bl-face); color: var(--bl-text);
+  font-family: var(--bl-font, "Press Start 2P", ui-monospace, monospace); text-transform: uppercase; line-height: 1;
+  box-shadow:
+    0 calc(var(--bl-px) * -1) 0 0 var(--bl-ink), 0 var(--bl-px) 0 0 var(--bl-ink),
+    calc(var(--bl-px) * -1) 0 0 0 var(--bl-ink), var(--bl-px) 0 0 0 var(--bl-ink),
+    inset calc(var(--bl-px) * -1) calc(var(--bl-px) * -1) 0 0 rgba(11, 11, 20, 0.28),
+    inset var(--bl-px) var(--bl-px) 0 0 rgba(255, 255, 255, 0.32),
+    var(--bl-px) calc(var(--bl-px) * 2) 0 0 rgba(11, 11, 20, 0.5);
+  transition: transform 60ms steps(1), filter 60ms steps(1);
+}
+.bl-pxbtn:hover:not(:disabled) { filter: brightness(1.12); }
+.bl-pxbtn:active:not(:disabled), .bl-pxbtn[data-pressed] {
+  transform: translateY(var(--bl-px));
+  box-shadow:
+    0 calc(var(--bl-px) * -1) 0 0 var(--bl-ink), 0 var(--bl-px) 0 0 var(--bl-ink),
+    calc(var(--bl-px) * -1) 0 0 0 var(--bl-ink), var(--bl-px) 0 0 0 var(--bl-ink),
+    inset var(--bl-px) var(--bl-px) 0 0 rgba(11, 11, 20, 0.3);
+}
+.bl-pxbtn:focus-visible { outline: var(--bl-px) solid #41a6f6; outline-offset: calc(var(--bl-px) * 2); }
+.bl-pxbtn[data-size="sm"] { padding: 8px 12px; font-size: 8px; --bl-px: 3px; }
+.bl-pxbtn[data-size="md"] { padding: 12px 18px; font-size: 11px; }
+.bl-pxbtn[data-size="lg"] { padding: 16px 26px; font-size: 14px; --bl-px: 5px; }
+.bl-pxbtn:disabled { cursor: not-allowed; filter: grayscale(0.85) brightness(0.8); }
+.bl-pxbtn:disabled::after {
+  content: ""; position: absolute; inset: 0; pointer-events: none;
+  background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(11, 11, 20, 0.35) 6px 8px);
+}
+.bl-pxbtn__label { position: relative; }
+.bl-pxbtn[data-loading] .bl-pxbtn__label { visibility: hidden; }
+.bl-pxbtn__pips { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; }
+.bl-pxbtn__pips i { width: 6px; height: 6px; background: currentColor; animation: bl-pxbtn-pip 0.9s steps(1) infinite; }
+.bl-pxbtn__pips i:nth-child(2) { animation-delay: 0.3s; }
+.bl-pxbtn__pips i:nth-child(3) { animation-delay: 0.6s; }
+@keyframes bl-pxbtn-pip { 0%, 100% { opacity: 0.25; } 33% { opacity: 1; } }
+@media (prefers-reduced-motion: reduce) {
+  .bl-pxbtn { transition: none; }
+  .bl-pxbtn__pips i { animation: none; opacity: 0.8; }
+}
+`;
+function useStyles() {
+  useInsertionEffect(() => {
+    if (typeof document === "undefined") return;
+    const existing = document.getElementById(STYLE_ID);
+    if (existing) {
+      existing.textContent = CSS;
+      return;
+    }
+    const style = document.createElement("style");
+    style.id = STYLE_ID;
+    style.textContent = CSS;
+    document.head.appendChild(style);
+  }, []);
+}
+const VARIANTS = {
+  primary: { face: "#b13e53", text: "#f4f4f4" },
+  secondary: { face: "#94b0c2", text: "#0b0b14" },
+  success: { face: "#38b764", text: "#0b0b14" },
+  warning: { face: "#ffcd75", text: "#0b0b14" },
+  info: { face: "#41a6f6", text: "#0b0b14" }
+};
+function PixelButton({
+  children,
+  variant = "primary",
+  size = "md",
+  color,
+  textColor,
+  icon,
+  loading = false,
+  disabled = false,
+  fontFamily,
+  type = "button",
+  className = "",
+  style,
+  onPress,
+  onClick,
+  ref,
+  ...rest
+}) {
+  useStyles();
+  const palette = VARIANTS[variant] ?? VARIANTS.primary;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      type,
+      className: `bl-pxbtn ${className}`,
+      "data-size": size,
+      "data-loading": loading || void 0,
+      disabled,
+      "aria-busy": loading || void 0,
+      onClick: (event) => {
+        if (loading) return;
+        onClick?.(event);
+        onPress?.(event);
+      },
+      style: {
+        "--bl-face": color ?? palette.face,
+        "--bl-text": textColor ?? palette.text,
+        ...fontFamily ? { "--bl-font": fontFamily } : null,
+        ...style
+      },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "bl-pxbtn__label", style: { display: "inline-flex", alignItems: "center", gap: 10 }, children: [
+          icon,
+          children
+        ] }),
+        loading && /* @__PURE__ */ jsxs("span", { className: "bl-pxbtn__pips", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx("i", {}),
+          /* @__PURE__ */ jsx("i", {}),
+          /* @__PURE__ */ jsx("i", {})
+        ] })
+      ]
+    }
+  );
+}
+export {
+  PixelButton as default
+};

package/dist/PixelExplode.d.ts

@@ -0,0 +1,31 @@
+import { type CSSProperties, type ReactNode, type Ref } from 'react';
+export type ExplodeDirection = 'right' | 'left' | 'up' | 'down' | 'center';
+export interface PixelExplodeHandle {
+    explode: () => void;
+    reassemble: () => void;
+}
+export interface PixelExplodeProps {
+    children?: ReactNode;
+    /** Controlled: true explodes, false reassembles. */
+    exploded?: boolean;
+    /** Tile size in px. */
+    pieceSize?: number;
+    /** Large elements use bigger tiles to stay under this count. */
+    maxPieces?: number;
+    /** Flight time in ms. */
+    duration?: number;
+    spread?: number;
+    gravity?: number;
+    /** The direction the disintegration sweeps. */
+    direction?: ExplodeDirection;
+    /** Choppy 8-bit motion instead of smooth. */
+    stepped?: boolean;
+    onExploded?: () => void;
+    onReassembled?: () => void;
+    /** CSS display of the wrapper. */
+    display?: CSSProperties['display'];
+    ref?: Ref<PixelExplodeHandle>;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function PixelExplode({ children, exploded, pieceSize, maxPieces, duration, spread, gravity, direction, stepped, onExploded, onReassembled, display, ref, className, style }: PixelExplodeProps): import("react").JSX.Element;

package/dist/PixelExplode.js

@@ -0,0 +1,164 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useImperativeHandle, useRef } from "react";
+function prefersReduced() {
+  return window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+}
+function PixelExplode({
+  children,
+  exploded,
+  pieceSize = 8,
+  maxPieces = 500,
+  duration = 900,
+  spread = 1,
+  gravity = 1,
+  direction = "right",
+  stepped = true,
+  onExploded,
+  onReassembled,
+  display = "inline-block",
+  ref,
+  className = "",
+  style
+}) {
+  const contentRef = useRef(null);
+  const layerRef = useRef(null);
+  const animations = useRef([]);
+  const state = useRef(exploded ? "gone" : "whole");
+  const callbacks = useRef({ onExploded, onReassembled });
+  callbacks.current = { onExploded, onReassembled };
+  const options = useRef(null);
+  options.current = { pieceSize, maxPieces, duration, spread, gravity, direction, stepped };
+  const clear = () => {
+    animations.current.forEach((animation) => animation.cancel());
+    animations.current = [];
+    layerRef.current?.replaceChildren();
+  };
+  const setHidden = (hidden) => {
+    const content = contentRef.current;
+    if (!content) return;
+    content.style.visibility = hidden ? "hidden" : "";
+    content.inert = hidden;
+  };
+  const build = (reverse) => {
+    const content = contentRef.current;
+    const layer = layerRef.current;
+    if (!content || !layer) return Promise.resolve();
+    clear();
+    const o = options.current;
+    const width = content.offsetWidth;
+    const height = content.offsetHeight;
+    if (!width || !height) return Promise.resolve();
+    const size = Math.max(o.pieceSize, Math.ceil(Math.sqrt(width * height / o.maxPieces)));
+    const source = content.cloneNode(true);
+    source.removeAttribute("id");
+    source.querySelectorAll("[id]").forEach((node) => node.removeAttribute("id"));
+    source.style.visibility = "visible";
+    source.style.width = `${width}px`;
+    source.style.height = `${height}px`;
+    source.style.margin = "0";
+    const cols = Math.ceil(width / size);
+    const rows = Math.ceil(height / size);
+    const fragment = document.createDocumentFragment();
+    const pending = [];
+    for (let r = 0; r < rows; r++) {
+      for (let c = 0; c < cols; c++) {
+        const tile = document.createElement("div");
+        tile.style.cssText = `position:absolute;left:${c * size}px;top:${r * size}px;width:${size}px;height:${size}px;overflow:hidden;will-change:transform,opacity;`;
+        const copy = source.cloneNode(true);
+        copy.style.position = "absolute";
+        copy.style.left = `${-c * size}px`;
+        copy.style.top = `${-r * size}px`;
+        tile.appendChild(copy);
+        fragment.appendChild(tile);
+        const along = o.direction === "left" ? 1 - c / cols : o.direction === "up" ? 1 - r / rows : o.direction === "down" ? r / rows : o.direction === "center" ? Math.hypot(c / cols - 0.5, r / rows - 0.5) * 1.4 : c / cols;
+        const delay = along * o.duration * 0.6 + Math.random() * o.duration * 0.15;
+        const angle = (Math.random() - 0.5) * Math.PI * 0.9 - Math.PI / 2;
+        const distance = (40 + Math.random() * 90) * o.spread;
+        const dx = Math.cos(angle) * distance * 0.7 + (o.direction === "left" ? -1 : o.direction === "right" ? 1 : 0) * distance * 0.6;
+        const dy = Math.sin(angle) * distance;
+        const fall = 60 * o.gravity;
+        const spin = (Math.random() - 0.5) * 180;
+        const keyframes = [
+          { transform: "translate(0, 0) rotate(0deg) scale(1)", opacity: 1 },
+          { transform: `translate(${dx * 0.55}px, ${dy * 0.55}px) rotate(${spin * 0.5}deg) scale(0.9)`, opacity: 1, offset: 0.45 },
+          { transform: `translate(${dx}px, ${dy + fall}px) rotate(${spin}deg) scale(0.4)`, opacity: 0 }
+        ];
+        const animation = tile.animate(keyframes, {
+          duration: o.duration * (0.7 + Math.random() * 0.5),
+          delay: reverse ? 0 : delay,
+          endDelay: reverse ? delay : 0,
+          easing: o.stepped ? "steps(10)" : "cubic-bezier(.3,.6,.5,1)",
+          fill: "both"
+        });
+        if (reverse) animation.reverse();
+        animations.current.push(animation);
+        pending.push(animation.finished.catch(() => null));
+      }
+    }
+    layer.appendChild(fragment);
+    return Promise.all(pending);
+  };
+  const explode = () => {
+    if (state.current === "gone" || state.current === "leaving") return;
+    state.current = "leaving";
+    if (prefersReduced()) {
+      const fade = contentRef.current?.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 200 });
+      (fade?.finished ?? Promise.resolve()).catch(() => null).then(() => {
+        if (state.current !== "leaving") return;
+        setHidden(true);
+        state.current = "gone";
+        callbacks.current.onExploded?.();
+      });
+      return;
+    }
+    const run = build(false);
+    setHidden(true);
+    run.then(() => {
+      if (state.current !== "leaving") return;
+      clear();
+      state.current = "gone";
+      callbacks.current.onExploded?.();
+    });
+  };
+  const reassemble = () => {
+    if (state.current === "whole" || state.current === "returning") return;
+    state.current = "returning";
+    if (prefersReduced()) {
+      clear();
+      setHidden(false);
+      contentRef.current?.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 200 });
+      state.current = "whole";
+      callbacks.current.onReassembled?.();
+      return;
+    }
+    const run = build(true);
+    run.then(() => {
+      if (state.current !== "returning") return;
+      clear();
+      setHidden(false);
+      state.current = "whole";
+      callbacks.current.onReassembled?.();
+    });
+  };
+  useImperativeHandle(ref, () => ({ explode, reassemble }));
+  const first = useRef(true);
+  useEffect(() => {
+    if (first.current) {
+      first.current = false;
+      if (exploded) setHidden(true);
+      return;
+    }
+    if (exploded === void 0) return;
+    if (exploded) explode();
+    else reassemble();
+  }, [exploded]);
+  useEffect(() => () => animations.current.forEach((animation) => animation.cancel()), []);
+  return /* @__PURE__ */ jsxs("div", { className, style: { position: "relative", display, ...style }, children: [
+    /* @__PURE__ */ jsx("div", { ref: contentRef, children }),
+    /* @__PURE__ */ jsx("div", { ref: layerRef, "aria-hidden": "true", style: { position: "absolute", inset: 0, pointerEvents: "none", overflow: "visible" } })
+  ] });
+}
+export {
+  PixelExplode as default
+};

package/dist/PixelLoader.d.ts

@@ -0,0 +1,32 @@
+import { type CSSProperties } from 'react';
+export interface PixelLoaderProps {
+    /** 0–100. Leave undefined to simulate a load. */
+    progress?: number;
+    label?: string;
+    /** Title shown when progress reaches 100. */
+    doneLabel?: string;
+    /** Rotating tips under the bar; empty to hide. */
+    tips?: string[];
+    /** Time per tip, in ms. */
+    tipInterval?: number;
+    /** Number of chunks in the bar. */
+    chunks?: number;
+    /** Max width, in px. */
+    width?: number;
+    accentColor?: string;
+    frameColor?: string;
+    textColor?: string;
+    mutedColor?: string;
+    /** Rough length of a simulated load, in ms. */
+    simulateDuration?: number;
+    /** Restart a simulated load after COMPLETE. */
+    loop?: boolean;
+    /** Show the percent and chunk count. */
+    showPercent?: boolean;
+    fontFamily?: string;
+    /** Called when progress reaches 100. */
+    onComplete?: () => void;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function PixelLoader({ progress, label, doneLabel, tips, tipInterval, chunks, width, accentColor, frameColor, textColor, mutedColor, simulateDuration, loop, showPercent, fontFamily, onComplete, className, style }: PixelLoaderProps): import("react").JSX.Element;