bits-lab 0.0.0-stage → 0.1.2

package/dist/ChatBubbles.js

@@ -0,0 +1,198 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useInsertionEffect, useLayoutEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-chat";
+const CSS = `
+.bl-chat { display: flex; flex-direction: column; gap: 2px; height: var(--bl-h); overflow-y: auto; padding: 16px 14px; border-radius: var(--bl-radius); background: var(--bl-bg); color: var(--bl-ink); font-family: var(--bl-font); font-size: 15px; scrollbar-width: thin; overscroll-behavior: contain; }
+.bl-chat__row { position: relative; display: flex; align-items: flex-end; gap: 8px; max-width: 100%; }
+.bl-chat__row[data-from="me"] { flex-direction: row-reverse; }
+.bl-chat__row[data-last] { margin-bottom: 10px; }
+.bl-chat__avatar { flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; overflow: hidden; border-radius: 50%; background: var(--bl-them); font-size: 13px; font-weight: 700; }
+.bl-chat__avatar[data-hidden] { visibility: hidden; }
+.bl-chat__stack { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: min(78%, 480px); }
+.bl-chat__row[data-from="me"] .bl-chat__stack { align-items: flex-end; }
+.bl-chat__author { margin: 0 0 3px 12px; color: var(--bl-muted); font-size: 12px; }
+.bl-chat__bubble { position: relative; padding: 9px 13px; border-radius: 18px; background: var(--bl-them); color: var(--bl-them-ink); line-height: 1.45; overflow-wrap: anywhere; outline: none; transform-origin: bottom left; }
+.bl-chat__row[data-from="me"] .bl-chat__bubble { background: var(--bl-me); color: var(--bl-me-ink); transform-origin: bottom right; }
+.bl-chat__row[data-from="them"]:not([data-first]) .bl-chat__bubble { border-top-left-radius: 6px; }
+.bl-chat__row[data-from="them"]:not([data-last]) .bl-chat__bubble { border-bottom-left-radius: 6px; }
+.bl-chat__row[data-from="me"]:not([data-first]) .bl-chat__bubble { border-top-right-radius: 6px; }
+.bl-chat__row[data-from="me"]:not([data-last]) .bl-chat__bubble { border-bottom-right-radius: 6px; }
+.bl-chat__row[data-from="them"][data-last] .bl-chat__bubble { border-bottom-left-radius: 4px; }
+.bl-chat__row[data-from="me"][data-last] .bl-chat__bubble { border-bottom-right-radius: 4px; }
+.bl-chat__bubble:focus-visible { box-shadow: 0 0 0 2px var(--bl-accent); }
+.bl-chat__bubble[data-new] { animation: bl-chat-in 520ms cubic-bezier(.2,1.5,.4,1) both; }
+.bl-chat__time { margin: 3px 6px 0; color: var(--bl-muted); font-size: 11px; }
+.bl-chat__react-btn { position: absolute; top: 50%; display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--bl-chip); color: var(--bl-muted); cursor: pointer; opacity: 0; transform: translateY(-50%); transition: opacity 150ms; }
+.bl-chat__row[data-from="them"] .bl-chat__react-btn { right: -36px; }
+.bl-chat__row[data-from="me"] .bl-chat__react-btn { left: -36px; }
+.bl-chat__bubble-wrap { position: relative; }
+.bl-chat__bubble-wrap:hover .bl-chat__react-btn, .bl-chat__bubble-wrap:focus-within .bl-chat__react-btn { opacity: 1; }
+.bl-chat__react-btn:focus-visible { outline: 2px solid var(--bl-accent); }
+.bl-chat__picker { position: absolute; bottom: calc(100% + 6px); z-index: 3; display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--bl-picker); box-shadow: 0 0 0 1px var(--bl-line), 0 10px 24px -10px rgba(0,0,0,0.7); animation: bl-chat-pop 220ms cubic-bezier(.2,1.5,.4,1); }
+.bl-chat__row[data-from="them"] .bl-chat__picker { left: 0; }
+.bl-chat__row[data-from="me"] .bl-chat__picker { right: 0; }
+.bl-chat__picker button { width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; font-size: 19px; cursor: pointer; transition: transform 150ms; }
+.bl-chat__picker button:hover, .bl-chat__picker button:focus-visible { transform: scale(1.25); background: var(--bl-chip); outline: none; }
+.bl-chat__picker button[aria-pressed="true"] { background: var(--bl-chip); }
+.bl-chat__reactions { display: flex; gap: 4px; margin: -6px 8px 0; position: relative; z-index: 1; }
+.bl-chat__reaction { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 999px; background: var(--bl-picker); box-shadow: 0 0 0 2px var(--bl-bg); font-size: 13px; animation: bl-chat-pop 300ms cubic-bezier(.2,1.6,.4,1); }
+.bl-chat__typing { display: inline-flex; gap: 4px; padding: 13px 14px; border-radius: 18px 18px 18px 4px; background: var(--bl-them); }
+.bl-chat__typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--bl-muted); animation: bl-chat-dot 1.2s ease-in-out infinite; }
+.bl-chat__typing i:nth-child(2) { animation-delay: 0.15s; }
+.bl-chat__typing i:nth-child(3) { animation-delay: 0.3s; }
+.bl-chat__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+@keyframes bl-chat-in { from { opacity: 0; transform: scale(0.5) translateY(12px); } }
+@keyframes bl-chat-pop { from { opacity: 0; transform: scale(0.4); } }
+@keyframes bl-chat-dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-5px); opacity: 1; } }
+@media (prefers-reduced-motion: reduce) { .bl-chat__bubble[data-new], .bl-chat__picker, .bl-chat__reaction { animation: none; } .bl-chat__typing i { animation: none; opacity: 0.8; } }
+`;
+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 DEFAULT_REACTIONS = ["\u2764\uFE0F", "\u{1F602}", "\u{1F44D}", "\u{1F62E}", "\u{1F622}"];
+const REACTION_NAMES = { "\u2764\uFE0F": "heart", "\u{1F602}": "laughing", "\u{1F44D}": "thumbs up", "\u{1F62E}": "surprised", "\u{1F622}": "sad" };
+function ChatBubbles({
+  messages = [],
+  typing = false,
+  typingName,
+  reactions = DEFAULT_REACTIONS,
+  onReact,
+  height = 420,
+  radius = 18,
+  label = "Conversation",
+  backgroundColor = "#11131c",
+  meColor = "#3987e5",
+  meTextColor = "#ffffff",
+  themColor = "#29366f",
+  themTextColor = "#f4f4f4",
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  chipColor = "rgba(255,255,255,0.1)",
+  pickerColor = "#1f2335",
+  lineColor = "rgba(255,255,255,0.1)",
+  accentColor = "#73eff7",
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  className = "",
+  style
+}) {
+  useStyles();
+  const ref = useRef(null);
+  const seen = useRef(null);
+  const [picker, setPicker] = useState(null);
+  const [mine, setMine] = useState({});
+  const pinned = useRef(true);
+  if (seen.current === null) seen.current = new Set(messages.map((m) => m.id));
+  const fresh = new Set(messages.filter((m) => !seen.current.has(m.id)).map((m) => m.id));
+  useEffect(() => {
+    messages.forEach((m) => seen.current.add(m.id));
+  });
+  useLayoutEffect(() => {
+    const node = ref.current;
+    if (node && pinned.current) node.scrollTop = node.scrollHeight;
+  }, [messages.length, typing]);
+  useEffect(() => {
+    if (picker === null) return void 0;
+    const close = (event) => {
+      if (!event.target.closest?.(".bl-chat__picker, .bl-chat__react-btn")) setPicker(null);
+    };
+    const onKey = (event) => event.key === "Escape" && setPicker(null);
+    document.addEventListener("pointerdown", close);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("pointerdown", close);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [picker]);
+  const toggleReaction = (id, emoji) => {
+    const current = mine[id] ?? [];
+    const on = current.includes(emoji);
+    setMine({ ...mine, [id]: on ? current.filter((e) => e !== emoji) : [...current, emoji] });
+    onReact?.(id, emoji, !on);
+    setPicker(null);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: `bl-chat ${className}`,
+      role: "log",
+      "aria-live": "polite",
+      "aria-label": label,
+      onScroll: (event) => {
+        const node = event.currentTarget;
+        pinned.current = node.scrollHeight - node.scrollTop - node.clientHeight < 40;
+      },
+      style: {
+        "--bl-h": typeof height === "number" ? `${height}px` : height,
+        "--bl-radius": `${radius}px`,
+        "--bl-bg": backgroundColor,
+        "--bl-me": meColor,
+        "--bl-me-ink": meTextColor,
+        "--bl-them": themColor,
+        "--bl-them-ink": themTextColor,
+        "--bl-ink": textColor,
+        "--bl-muted": mutedColor,
+        "--bl-chip": chipColor,
+        "--bl-picker": pickerColor,
+        "--bl-line": lineColor,
+        "--bl-accent": accentColor,
+        "--bl-font": fontFamily,
+        ...style
+      },
+      children: [
+        messages.map((message, i) => {
+          const from = message.from === "me" ? "me" : "them";
+          const prev = messages[i - 1];
+          const next = messages[i + 1];
+          const first = !prev || prev.from === "me" !== (from === "me") || prev.author !== message.author;
+          const last = !next || next.from === "me" !== (from === "me") || next.author !== message.author;
+          const all = [.../* @__PURE__ */ new Set([...message.reactions ?? [], ...mine[message.id] ?? []])];
+          return /* @__PURE__ */ jsxs("div", { className: "bl-chat__row", "data-from": from, "data-first": first || void 0, "data-last": last || void 0, children: [
+            from === "them" && /* @__PURE__ */ jsx("span", { className: "bl-chat__avatar", "data-hidden": !last || void 0, "aria-hidden": "true", children: message.avatar ?? (message.author ?? "?").slice(0, 1).toUpperCase() }),
+            /* @__PURE__ */ jsxs("div", { className: "bl-chat__stack", children: [
+              first && from === "them" && message.author && /* @__PURE__ */ jsx("p", { className: "bl-chat__author", children: message.author }),
+              /* @__PURE__ */ jsxs("div", { className: "bl-chat__bubble-wrap", children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "bl-chat__bubble",
+                    "data-new": fresh.has(message.id) || void 0,
+                    tabIndex: 0,
+                    onDoubleClick: () => toggleReaction(message.id, reactions[0]),
+                    "aria-label": `${from === "me" ? "You" : message.author ?? "Them"}: ${typeof message.text === "string" ? message.text : ""}${message.time ? `, ${message.time}` : ""}`,
+                    children: message.text
+                  }
+                ),
+                reactions.length > 0 && /* @__PURE__ */ jsx("button", { type: "button", className: "bl-chat__react-btn", "aria-label": "Add reaction", "aria-expanded": picker === message.id, onClick: () => setPicker(picker === message.id ? null : message.id), children: /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", "aria-hidden": "true", children: [
+                  /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "6.2" }),
+                  /* @__PURE__ */ jsx("path", { d: "M5.5 9.5c.6.9 1.5 1.4 2.5 1.4s1.9-.5 2.5-1.4M6 6.3h.01M10 6.3h.01" })
+                ] }) }),
+                picker === message.id && /* @__PURE__ */ jsx("div", { className: "bl-chat__picker", role: "group", "aria-label": "Reactions", children: reactions.map((emoji) => /* @__PURE__ */ jsx("button", { type: "button", "aria-label": REACTION_NAMES[emoji] ?? emoji, "aria-pressed": (mine[message.id] ?? []).includes(emoji), onClick: () => toggleReaction(message.id, emoji), children: emoji }, emoji)) })
+              ] }),
+              all.length > 0 && /* @__PURE__ */ jsx("div", { className: "bl-chat__reactions", "aria-label": `Reactions: ${all.map((e) => REACTION_NAMES[e] ?? e).join(", ")}`, children: all.map((emoji) => /* @__PURE__ */ jsx("span", { className: "bl-chat__reaction", "aria-hidden": "true", children: emoji }, emoji)) }),
+              last && message.time && /* @__PURE__ */ jsx("span", { className: "bl-chat__time", children: message.time })
+            ] })
+          ] }, message.id);
+        }),
+        typing && /* @__PURE__ */ jsxs("div", { className: "bl-chat__row", "data-from": "them", "data-first": true, "data-last": true, children: [
+          /* @__PURE__ */ jsx("span", { className: "bl-chat__avatar", "aria-hidden": "true", children: (typingName ?? "?").slice(0, 1).toUpperCase() }),
+          /* @__PURE__ */ jsxs("span", { className: "bl-chat__typing", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx("i", {}),
+            /* @__PURE__ */ jsx("i", {}),
+            /* @__PURE__ */ jsx("i", {})
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "bl-chat__sr", children: `${typingName ?? "Someone"} is typing` })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  ChatBubbles as default
+};

package/dist/ChiptuneKit.d.ts

@@ -0,0 +1,158 @@
+import { type ReactNode, type CSSProperties } from 'react';
+export interface ChipRecipe {
+    /** Oscillator shape, or "noise" for a pure noise burst. */
+    wave?: OscillatorType | 'noise';
+    /** Start pitch, in Hz. */
+    from?: number;
+    /** End pitch, in Hz (slides from `from`). */
+    to?: number;
+    /** Length of each note, in seconds. */
+    duration: number;
+    /** Number of notes in an arpeggio. */
+    notes?: number;
+    /** Semitones between arpeggio notes. */
+    interval?: number;
+    /** Time between notes, in seconds. */
+    gap?: number;
+    /** Mix of noise layered under the tone (0–1). */
+    noise?: number;
+    volume?: number;
+}
+export declare const CHIPS: {
+    select: {
+        wave: "square";
+        from: number;
+        to: number;
+        duration: number;
+        volume: number;
+    };
+    confirm: {
+        wave: "square";
+        from: number;
+        to: number;
+        duration: number;
+        notes: number;
+        interval: number;
+        gap: number;
+        volume: number;
+    };
+    cancel: {
+        wave: "square";
+        from: number;
+        to: number;
+        duration: number;
+        notes: number;
+        interval: number;
+        gap: number;
+        volume: number;
+    };
+    blip: {
+        wave: "square";
+        from: number;
+        to: number;
+        duration: number;
+        volume: number;
+    };
+    coin: {
+        wave: "square";
+        from: number;
+        to: number;
+        duration: number;
+        notes: number;
+        interval: number;
+        gap: number;
+        volume: number;
+    };
+    jump: {
+        wave: "square";
+        from: number;
+        to: number;
+        duration: number;
+        volume: number;
+    };
+    powerUp: {
+        wave: "square";
+        from: number;
+        to: number;
+        duration: number;
+        notes: number;
+        interval: number;
+        gap: number;
+        volume: number;
+    };
+    levelUp: {
+        wave: "triangle";
+        from: number;
+        to: number;
+        duration: number;
+        notes: number;
+        interval: number;
+        gap: number;
+        volume: number;
+    };
+    hit: {
+        wave: "sawtooth";
+        from: number;
+        to: number;
+        duration: number;
+        noise: number;
+        volume: number;
+    };
+    error: {
+        wave: "sawtooth";
+        from: number;
+        to: number;
+        duration: number;
+        notes: number;
+        interval: number;
+        gap: number;
+        volume: number;
+    };
+    explosion: {
+        wave: "noise";
+        duration: number;
+        volume: number;
+    };
+};
+export type ChipName = keyof typeof CHIPS;
+export interface PlayOptions {
+    /** Multiplier on the recipe's own volume (0–1). */
+    volume?: number;
+}
+export declare function playChip(sound: ChipName | ChipRecipe, { volume }?: PlayOptions): void;
+export interface ChiptuneControls {
+    muted: boolean;
+    volume: number;
+    /** Play a preset or custom recipe (silent while muted). */
+    play: (sound: ChipName | ChipRecipe, options?: PlayOptions) => void;
+    setMuted: (muted: boolean) => void;
+    toggleMuted: () => void;
+    /** 0–1. */
+    setVolume: (volume: number) => void;
+}
+export interface ChiptuneProviderProps {
+    children?: ReactNode;
+    defaultMuted?: boolean;
+    defaultVolume?: number;
+    /** Remember mute and volume in localStorage. */
+    persist?: boolean;
+}
+export declare function ChiptuneProvider({ children, defaultMuted, defaultVolume, persist }: ChiptuneProviderProps): import("react").JSX.Element;
+export declare function useChiptune(): ChiptuneControls;
+export interface MuteToggleProps {
+    /** Icon size, in px. */
+    size?: number;
+    color?: string;
+    background?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function MuteToggle({ size, color, background, className, style }: MuteToggleProps): import("react").JSX.Element;
+export interface ChiptuneKitProps {
+    /** Which presets to show. */
+    sounds?: ChipName[];
+    volume?: number;
+    columns?: number;
+    accentColor?: string;
+}
+export default function ChiptuneKit({ sounds, volume, columns, accentColor }: ChiptuneKitProps): import("react").JSX.Element;

package/dist/ChiptuneKit.js

@@ -0,0 +1,207 @@
+'use client';
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+const CHIPS = {
+  select: { wave: "square", from: 1320, to: 1320, duration: 0.05, volume: 0.25 },
+  confirm: { wave: "square", from: 660, to: 660, duration: 0.07, notes: 2, interval: 7, gap: 0.06, volume: 0.25 },
+  cancel: { wave: "square", from: 520, to: 520, duration: 0.07, notes: 2, interval: -5, gap: 0.06, volume: 0.25 },
+  blip: { wave: "square", from: 880, to: 880, duration: 0.025, volume: 0.12 },
+  coin: { wave: "square", from: 988, to: 988, duration: 0.1, notes: 2, interval: 5, gap: 0.07, volume: 0.28 },
+  jump: { wave: "square", from: 300, to: 900, duration: 0.16, volume: 0.28 },
+  powerUp: { wave: "square", from: 330, to: 660, duration: 0.09, notes: 4, interval: 4, gap: 0.06, volume: 0.22 },
+  levelUp: { wave: "triangle", from: 523, to: 523, duration: 0.16, notes: 4, interval: 4, gap: 0.1, volume: 0.45 },
+  hit: { wave: "sawtooth", from: 400, to: 120, duration: 0.14, noise: 0.3, volume: 0.35 },
+  error: { wave: "sawtooth", from: 220, to: 150, duration: 0.16, notes: 2, interval: -1, gap: 0.12, volume: 0.3 },
+  explosion: { wave: "noise", duration: 0.55, volume: 0.7 }
+};
+const STORAGE_KEY = "bl-chiptune";
+let context = null;
+let globalMuted = false;
+let globalVolume = 1;
+function audio() {
+  if (typeof window === "undefined") return null;
+  if (!context) {
+    const Ctx = window.AudioContext || window.webkitAudioContext;
+    if (!Ctx) return null;
+    context = new Ctx();
+  }
+  if (context.state === "suspended") context.resume();
+  return context;
+}
+function noiseBuffer(ctx, seconds) {
+  const buffer = ctx.createBuffer(1, Math.ceil(ctx.sampleRate * seconds), ctx.sampleRate);
+  const data = buffer.getChannelData(0);
+  for (let i = 0; i < data.length; i++) data[i] = Math.random() * 2 - 1;
+  return buffer;
+}
+function playChip(sound, { volume = 1 } = {}) {
+  if (globalMuted) return;
+  const recipe = typeof sound === "string" ? CHIPS[sound] : sound;
+  const ctx = recipe && audio();
+  if (!ctx) return;
+  const master = ctx.createGain();
+  master.gain.value = (recipe.volume ?? 0.3) * volume * globalVolume;
+  master.connect(ctx.destination);
+  const notes = recipe.notes ?? 1;
+  for (let i = 0; i < notes; i++) {
+    const start = ctx.currentTime + i * (recipe.gap ?? 0.08);
+    const end = start + recipe.duration;
+    const ratio = 2 ** (i * (recipe.interval ?? 0) / 12);
+    const envelope = ctx.createGain();
+    envelope.gain.setValueAtTime(1e-4, start);
+    envelope.gain.exponentialRampToValueAtTime(1, start + 4e-3);
+    envelope.gain.exponentialRampToValueAtTime(1e-4, end);
+    envelope.connect(master);
+    if (recipe.wave === "noise" || recipe.noise) {
+      const source = ctx.createBufferSource();
+      source.buffer = noiseBuffer(ctx, recipe.duration + 0.05);
+      const level = ctx.createGain();
+      level.gain.value = recipe.wave === "noise" ? 1 : recipe.noise;
+      source.connect(level).connect(envelope);
+      source.start(start);
+      source.stop(end + 0.02);
+    }
+    if (recipe.wave !== "noise") {
+      const osc = ctx.createOscillator();
+      osc.type = recipe.wave ?? "square";
+      osc.frequency.setValueAtTime(recipe.from * ratio, start);
+      osc.frequency.exponentialRampToValueAtTime(Math.max(20, (recipe.to ?? recipe.from) * ratio), end);
+      osc.connect(envelope);
+      osc.start(start);
+      osc.stop(end + 0.02);
+    }
+  }
+}
+const ChiptuneContext = createContext(null);
+function readStored() {
+  try {
+    return JSON.parse(localStorage.getItem(STORAGE_KEY)) ?? {};
+  } catch {
+    return {};
+  }
+}
+function ChiptuneProvider({ children, defaultMuted = false, defaultVolume = 1, persist = true }) {
+  const [state, setState] = useState(() => ({ muted: defaultMuted, volume: defaultVolume, ...persist ? readStored() : null }));
+  useEffect(() => {
+    globalMuted = state.muted;
+    globalVolume = state.volume;
+    if (!persist) return;
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+    } catch {
+    }
+  }, [state, persist]);
+  const value = useMemo(
+    () => ({
+      ...state,
+      play: (sound, options) => playChip(sound, options),
+      setMuted: (muted) => setState((prev) => ({ ...prev, muted })),
+      toggleMuted: () => setState((prev) => ({ ...prev, muted: !prev.muted })),
+      setVolume: (volume) => setState((prev) => ({ ...prev, volume: Math.min(1, Math.max(0, volume)) }))
+    }),
+    [state]
+  );
+  return /* @__PURE__ */ jsx(ChiptuneContext.Provider, { value, children });
+}
+function useChiptune() {
+  const shared = useContext(ChiptuneContext);
+  const [localMuted, setLocalMuted] = useState(false);
+  const play = useCallback((sound, options) => !localMuted && playChip(sound, options), [localMuted]);
+  return shared ?? {
+    muted: localMuted,
+    volume: 1,
+    play,
+    setMuted: setLocalMuted,
+    toggleMuted: () => setLocalMuted((muted) => !muted),
+    setVolume: () => {
+    }
+  };
+}
+function MuteToggle({ size = 32, color = "#f4f4f4", background = "#333c57", className = "", style }) {
+  const { muted, toggleMuted } = useChiptune();
+  const px = size / 16;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className,
+      onClick: toggleMuted,
+      "aria-pressed": muted,
+      "aria-label": muted ? "Unmute sound effects" : "Mute sound effects",
+      title: muted ? "Sound off" : "Sound on",
+      style: {
+        display: "grid",
+        placeItems: "center",
+        width: size + 12,
+        height: size + 12,
+        border: 0,
+        background,
+        color,
+        cursor: "pointer",
+        boxShadow: `0 -${px * 2}px 0 0 #0b0b14, 0 ${px * 2}px 0 0 #0b0b14, -${px * 2}px 0 0 0 #0b0b14, ${px * 2}px 0 0 0 #0b0b14`,
+        ...style
+      },
+      children: /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 16 16", shapeRendering: "crispEdges", "aria-hidden": "true", fill: "currentColor", children: [
+        /* @__PURE__ */ jsx("rect", { x: "2", y: "6", width: "3", height: "4" }),
+        /* @__PURE__ */ jsx("rect", { x: "5", y: "5", width: "1", height: "6" }),
+        /* @__PURE__ */ jsx("rect", { x: "6", y: "4", width: "1", height: "8" }),
+        /* @__PURE__ */ jsx("rect", { x: "7", y: "3", width: "1", height: "10" }),
+        muted ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("rect", { x: "10", y: "5", width: "1", height: "1" }),
+          /* @__PURE__ */ jsx("rect", { x: "11", y: "6", width: "1", height: "1" }),
+          /* @__PURE__ */ jsx("rect", { x: "12", y: "7", width: "1", height: "2" }),
+          /* @__PURE__ */ jsx("rect", { x: "11", y: "9", width: "1", height: "1" }),
+          /* @__PURE__ */ jsx("rect", { x: "10", y: "10", width: "1", height: "1" }),
+          /* @__PURE__ */ jsx("rect", { x: "13", y: "6", width: "1", height: "1" }),
+          /* @__PURE__ */ jsx("rect", { x: "14", y: "5", width: "1", height: "1" }),
+          /* @__PURE__ */ jsx("rect", { x: "13", y: "9", width: "1", height: "1" }),
+          /* @__PURE__ */ jsx("rect", { x: "14", y: "10", width: "1", height: "1" })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("rect", { x: "10", y: "6", width: "1", height: "4" }),
+          /* @__PURE__ */ jsx("rect", { x: "12", y: "4", width: "1", height: "8" }),
+          /* @__PURE__ */ jsx("rect", { x: "14", y: "2", width: "1", height: "12" })
+        ] })
+      ] })
+    }
+  );
+}
+function ChiptuneKit({ sounds = Object.keys(CHIPS), volume = 1, columns = 4, accentColor = "#ffcd75" }) {
+  const { play } = useChiptune();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "aria-label": "Chiptune sounds",
+      style: { display: "grid", gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`, gap: 12, width: "min(560px, 100%)" },
+      children: sounds.map((name) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => play(name, { volume }),
+          style: {
+            padding: "14px 8px",
+            border: "3px solid #0b0b14",
+            background: "#1a1c2c",
+            color: accentColor,
+            font: '9px/1.2 "Press Start 2P", ui-monospace, monospace',
+            textTransform: "uppercase",
+            cursor: "pointer"
+          },
+          children: [
+            "\u266A ",
+            name
+          ]
+        },
+        name
+      ))
+    }
+  );
+}
+export {
+  CHIPS,
+  ChiptuneProvider,
+  MuteToggle,
+  ChiptuneKit as default,
+  playChip,
+  useChiptune
+};

package/dist/CipherCard.d.ts

@@ -0,0 +1,22 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface CipherCardProps {
+    /** Content on the center badge. */
+    children?: ReactNode;
+    charset?: string;
+    /** How many characters fill the card. */
+    density?: number;
+    /** Reveal radius around the pointer, in px. */
+    spotlight?: number;
+    width?: number;
+    aspectRatio?: string;
+    radius?: number;
+    gradient?: string;
+    backgroundColor?: string;
+    textColor?: string;
+    charColor?: string;
+    lineColor?: string;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function CipherCard({ children, charset, density, spotlight, width, aspectRatio, radius, gradient, backgroundColor, textColor, charColor, lineColor, fontFamily, className, style }: CipherCardProps): import("react").JSX.Element;