bits-lab 0.0.0-stage → 0.1.0

package/dist/ProximityType.d.ts

@@ -0,0 +1,26 @@
+import { type CSSProperties, type ElementType } from 'react';
+export interface ProximityTypeProps {
+    text?: string;
+    as?: ElementType;
+    /** How far the pointer reaches, in px. */
+    radius?: number;
+    falloff?: 'smooth' | 'linear' | 'sharp';
+    minWeight?: number;
+    maxWeight?: number;
+    /** Width axis range in % (needs a font with wdth, e.g. Roboto Flex). */
+    minWidth?: number;
+    maxWidth?: number;
+    /** Raise near letters by up to this many px. */
+    lift?: number;
+    /** How far near letters shift toward the accent (0–1). */
+    tint?: number;
+    /** How quickly letters follow, 0–1 (1 is instant). */
+    ease?: number;
+    fontSize?: number | string;
+    textColor?: string;
+    accentColor?: string;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function ProximityType({ text, as: Tag, radius, falloff, minWeight, maxWeight, minWidth, maxWidth, lift, tint, ease, fontSize, textColor, accentColor, fontFamily, className, style }: ProximityTypeProps): import("react").JSX.Element;

package/dist/ProximityType.js

@@ -0,0 +1,135 @@
+'use client';
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useInsertionEffect, useRef } from "react";
+const STYLE_ID = "bl-proximity-type";
+const CSS = `
+.bl-prox { margin: 0; font-family: var(--bl-font); font-size: var(--bl-size); line-height: 1.1; color: var(--bl-ink); touch-action: pan-y; }
+.bl-prox__word { display: inline-block; white-space: nowrap; }
+.bl-prox__ch { --k: 0; display: inline-block; white-space: pre; font-weight: calc(var(--bl-wmin) + var(--k) * (var(--bl-wmax) - var(--bl-wmin))); font-stretch: calc(var(--bl-dmin) + var(--k) * (var(--bl-dmax) - var(--bl-dmin))); color: color-mix(in srgb, var(--bl-accent) calc(var(--k) * var(--bl-tint)), var(--bl-ink)); transform: translateY(calc(var(--k) * var(--bl-lift) * -1)); transform-origin: 50% 100%; }
+`;
+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 ProximityType({
+  text = "",
+  as: Tag = "p",
+  radius = 160,
+  falloff = "smooth",
+  minWeight = 300,
+  maxWeight = 900,
+  minWidth = 100,
+  maxWidth = 100,
+  lift = 0,
+  tint = 0,
+  ease = 0.2,
+  fontSize = 56,
+  textColor = "#f4f4f4",
+  accentColor = "#73eff7",
+  fontFamily = '"Roboto Flex", ui-sans-serif, system-ui, sans-serif',
+  className = "",
+  style
+}) {
+  useStyles();
+  const rootRef = useRef(null);
+  useEffect(() => {
+    const root = rootRef.current;
+    if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return void 0;
+    const letters = [...root.querySelectorAll(".bl-prox__ch")];
+    const level = letters.map(() => 0);
+    let centres = [];
+    const pointer = { x: -1e4, y: -1e4 };
+    let raf = 0;
+    const measure = () => {
+      centres = letters.map((node) => {
+        const r = node.getBoundingClientRect();
+        const k = Number(node.style.getPropertyValue("--k")) || 0;
+        return { x: r.left + r.width / 2 + window.scrollX, y: r.top + r.height / 2 + window.scrollY + k * lift };
+      });
+    };
+    const shape = (t) => falloff === "linear" ? t : falloff === "sharp" ? t * t * t : t * t * (3 - 2 * t);
+    const tick = () => {
+      let moving = false;
+      letters.forEach((node, i) => {
+        const c = centres[i];
+        const d = Math.hypot(c.x - pointer.x, c.y - pointer.y);
+        const goal = d < radius ? shape(1 - d / radius) : 0;
+        level[i] += (goal - level[i]) * ease;
+        if (Math.abs(goal - level[i]) > 2e-3) moving = true;
+        else level[i] = goal;
+        node.style.setProperty("--k", level[i].toFixed(3));
+      });
+      raf = moving ? requestAnimationFrame(tick) : 0;
+    };
+    const wake = () => {
+      if (!raf) raf = requestAnimationFrame(tick);
+    };
+    const onMove = (event) => {
+      if (!centres.length) measure();
+      pointer.x = event.clientX + window.scrollX;
+      pointer.y = event.clientY + window.scrollY;
+      wake();
+    };
+    const onLeave = () => {
+      pointer.x = -1e4;
+      pointer.y = -1e4;
+      wake();
+    };
+    const onLayout = () => {
+      centres = [];
+    };
+    let listening = false;
+    const listen = (on) => {
+      if (on === listening) return;
+      listening = on;
+      if (on) {
+        window.addEventListener("pointermove", onMove, { passive: true });
+        document.documentElement.addEventListener("pointerleave", onLeave);
+      } else {
+        window.removeEventListener("pointermove", onMove);
+        document.documentElement.removeEventListener("pointerleave", onLeave);
+      }
+    };
+    const observer = new IntersectionObserver(([entry]) => {
+      listen(entry.isIntersecting);
+      if (!entry.isIntersecting) onLeave();
+    });
+    observer.observe(root);
+    const resize = new ResizeObserver(onLayout);
+    resize.observe(root);
+    window.addEventListener("scroll", onLayout, { passive: true, capture: true });
+    document.fonts?.ready.then(onLayout);
+    return () => {
+      cancelAnimationFrame(raf);
+      listen(false);
+      observer.disconnect();
+      resize.disconnect();
+      window.removeEventListener("scroll", onLayout, { capture: true });
+      letters.forEach((node) => node.style.removeProperty("--k"));
+    };
+  }, [text, radius, falloff, lift, ease]);
+  let index = 0;
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ref: rootRef,
+      className: `bl-prox ${className}`,
+      style: { "--bl-size": typeof fontSize === "number" ? `${fontSize}px` : fontSize, "--bl-wmin": minWeight, "--bl-wmax": maxWeight, "--bl-dmin": `${minWidth}%`, "--bl-dmax": `${maxWidth}%`, "--bl-lift": `${lift}px`, "--bl-tint": `${tint * 100}%`, "--bl-ink": textColor, "--bl-accent": accentColor, "--bl-font": fontFamily, ...style },
+      children: text.split(/(\s+)/).map((part, w) => {
+        if (!part) return null;
+        if (/^\s+$/.test(part)) return " ";
+        return (
+          // Letters of a word stay together so lines only break between words.
+          /* @__PURE__ */ jsx("span", { className: "bl-prox__word", children: [...part].map((ch) => /* @__PURE__ */ jsx("span", { className: "bl-prox__ch", children: ch }, index++)) }, w)
+        );
+      })
+    }
+  );
+}
+export {
+  ProximityType as default
+};

package/dist/QuestDialog.d.ts

@@ -0,0 +1,50 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface DialogueChoice {
+    label: string;
+    /** Passed to onChoice; defaults to the label. */
+    value?: string;
+}
+export interface DialogueLine {
+    /** Name shown in the tab above the box. */
+    speaker?: string;
+    text: string;
+    /** Image or sprite shown at the left of the box. */
+    portrait?: ReactNode;
+    /** Choices shown once the line finishes typing. */
+    choices?: DialogueChoice[];
+}
+export interface QuestDialogProps {
+    /** The conversation, in order. */
+    lines?: DialogueLine[];
+    /** Characters per second. */
+    speed?: number;
+    /** Max width, in px. */
+    width?: number;
+    fontSize?: number;
+    /** Minimum text lines the box reserves. */
+    minLines?: number;
+    portraitSize?: number;
+    boxColor?: string;
+    borderColor?: string;
+    textColor?: string;
+    nameColor?: string;
+    nameBackground?: string;
+    accentColor?: string;
+    /** Font for the name tab and choices. */
+    fontFamily?: string;
+    /** Font for the dialogue text. */
+    bodyFont?: string;
+    /** Start over after the last line. */
+    loop?: boolean;
+    /** Called for each typed (non-space) character, e.g. to play a blip. */
+    onChar?: (char: string) => void;
+    /** Called with the new line index after advancing. */
+    onAdvance?: (index: number) => void;
+    /** Called with the chosen value and its index. */
+    onChoice?: (value: string, index: number) => void;
+    /** Called after the last line. */
+    onComplete?: () => void;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function QuestDialog({ lines, speed, width, fontSize, minLines, portraitSize, boxColor, borderColor, textColor, nameColor, nameBackground, accentColor, fontFamily, bodyFont, loop, onChar, onAdvance, onChoice, onComplete, className, style }: QuestDialogProps): import("react").JSX.Element;

package/dist/QuestDialog.js

@@ -0,0 +1,204 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-quest-dialog";
+const CSS = `
+.bl-quest { position: relative; width: min(var(--bl-width), 100%); margin: 4px; padding: 22px 22px 20px; background: var(--bl-box); color: var(--bl-text); cursor: pointer; user-select: none;
+  box-shadow: 0 -4px 0 0 var(--bl-border), 0 4px 0 0 var(--bl-border), -4px 0 0 0 var(--bl-border), 4px 0 0 0 var(--bl-border), inset 0 0 0 4px #0b0b14, 8px 8px 0 4px rgba(11,11,20,0.45); }
+.bl-quest:focus-visible { outline: 4px solid #41a6f6; outline-offset: 8px; }
+.bl-quest__name { position: absolute; top: -16px; left: 18px; padding: 6px 10px; background: var(--bl-name-bg); color: var(--bl-name); font: 10px/1 var(--bl-font, "Press Start 2P", ui-monospace, monospace); text-transform: uppercase;
+  box-shadow: 0 -3px 0 0 #0b0b14, 0 3px 0 0 #0b0b14, -3px 0 0 0 #0b0b14, 3px 0 0 0 #0b0b14; }
+.bl-quest__body { display: flex; gap: 18px; align-items: flex-start; }
+.bl-quest__portrait { flex: none; display: grid; place-items: center; width: var(--bl-portrait); height: var(--bl-portrait); background: #0b0b14; box-shadow: inset 0 0 0 3px var(--bl-border); overflow: hidden; }
+.bl-quest__text { flex: 1; min-height: calc(var(--bl-lines) * 1.6em); margin: 4px 0 0; font: var(--bl-size)/1.6 var(--bl-body, var(--bl-font, "Press Start 2P", ui-monospace, monospace)); white-space: pre-wrap; overflow-wrap: anywhere; }
+.bl-quest__ghost { visibility: hidden; }
+.bl-quest__next { position: absolute; right: 16px; bottom: 8px; color: var(--bl-accent); font: 12px/1 monospace; animation: bl-quest-bob 0.7s steps(2) infinite; }
+.bl-quest__choices { display: grid; gap: 8px; margin: 14px 0 0; padding: 0 0 0 calc(var(--bl-portrait-gap)); list-style: none; }
+.bl-quest__choice { display: flex; gap: 10px; width: 100%; padding: 6px 8px; border: 0; background: none; color: var(--bl-text); font: var(--bl-size)/1.3 var(--bl-body, var(--bl-font, "Press Start 2P", ui-monospace, monospace)); text-align: left; cursor: pointer; }
+.bl-quest__choice::before { content: "\u25BA"; visibility: hidden; color: var(--bl-accent); }
+.bl-quest__choice[data-active]::before { visibility: visible; animation: bl-quest-blink 0.8s steps(1) infinite; }
+.bl-quest__choice[data-active] { color: var(--bl-accent); }
+.bl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+@keyframes bl-quest-bob { 50% { transform: translateY(4px); } }
+@keyframes bl-quest-blink { 50% { opacity: 0; } }
+@media (prefers-reduced-motion: reduce) { .bl-quest__next, .bl-quest__choice[data-active]::before { 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 useReducedMotion() {
+  const [reduced, setReduced] = useState(false);
+  useEffect(() => {
+    const query = window.matchMedia?.("(prefers-reduced-motion: reduce)");
+    if (!query) return void 0;
+    setReduced(query.matches);
+    const onChange = (event) => setReduced(event.matches);
+    query.addEventListener("change", onChange);
+    return () => query.removeEventListener("change", onChange);
+  }, []);
+  return reduced;
+}
+const DEFAULT_LINES = [
+  { speaker: "Old Miner", text: "Ah, a new face! These tunnels run deeper than anyone remembers." },
+  { speaker: "Old Miner", text: "Legend says a diamond the size of your fist waits at the bottom... Will you go?", choices: [{ label: "I'm in. Hand me a pickaxe.", value: "yes" }, { label: "Maybe after lunch.", value: "no" }] }
+];
+const PAUSES = { ".": 8, "!": 8, "?": 8, ",": 4, ";": 4, ":": 4, "\u2014": 4 };
+function QuestDialog({
+  lines = DEFAULT_LINES,
+  speed = 40,
+  width = 620,
+  fontSize = 13,
+  minLines = 3,
+  portraitSize = 72,
+  boxColor = "#1a1c2c",
+  borderColor = "#f4f4f4",
+  textColor = "#f4f4f4",
+  nameColor = "#0b0b14",
+  nameBackground = "#ffcd75",
+  accentColor = "#ffcd75",
+  fontFamily,
+  bodyFont,
+  loop = false,
+  onChar,
+  onAdvance,
+  onChoice,
+  onComplete,
+  className = "",
+  style
+}) {
+  useStyles();
+  const reduced = useReducedMotion();
+  const uid = useId();
+  const [index, setIndex] = useState(0);
+  const [shown, setShown] = useState(0);
+  const [active, setActive] = useState(0);
+  const [finished, setFinished] = useState(false);
+  const callbacks = useRef({ onChar });
+  callbacks.current = { onChar };
+  const line = lines[Math.min(index, lines.length - 1)] ?? { text: "" };
+  const text = line.text ?? "";
+  const typing = shown < text.length;
+  const last = index >= lines.length - 1;
+  const choices = !typing && line.choices?.length ? line.choices : null;
+  useEffect(() => {
+    setShown(reduced ? text.length : 0);
+    setActive(0);
+  }, [index, text, reduced]);
+  useEffect(() => {
+    if (!typing || reduced) return void 0;
+    const char = text[shown];
+    const delay = 1e3 / Math.max(1, speed) * (PAUSES[text[shown - 1]] ?? 1);
+    const timer = setTimeout(() => {
+      setShown((count) => count + 1);
+      if (char && char.trim()) callbacks.current.onChar?.(char);
+    }, delay);
+    return () => clearTimeout(timer);
+  }, [typing, shown, text, speed, reduced]);
+  const advance = useCallback(() => {
+    if (finished) return;
+    if (typing) {
+      setShown(text.length);
+      return;
+    }
+    if (choices) return;
+    if (last) {
+      onComplete?.();
+      if (loop) setIndex(0);
+      else setFinished(true);
+      return;
+    }
+    setIndex((current) => current + 1);
+    onAdvance?.(index + 1);
+  }, [finished, typing, text.length, choices, last, loop, onComplete, onAdvance, index]);
+  const choose = useCallback(
+    (choiceIndex) => {
+      const choice = choices?.[choiceIndex];
+      if (!choice) return;
+      onChoice?.(choice.value ?? choice.label, choiceIndex);
+      if (last) {
+        onComplete?.();
+        if (loop) setIndex(0);
+        else setFinished(true);
+      } else setIndex((current) => current + 1);
+    },
+    [choices, onChoice, last, loop, onComplete]
+  );
+  const onKeyDown = (event) => {
+    if (choices && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+      event.preventDefault();
+      setActive((current) => (current + (event.key === "ArrowDown" ? 1 : -1) + choices.length) % choices.length);
+      return;
+    }
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      if (choices) choose(active);
+      else advance();
+    }
+  };
+  const portrait = line.portrait;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `bl-quest ${className}`,
+      role: "group",
+      "aria-roledescription": "dialogue",
+      "aria-label": line.speaker ? `${line.speaker} says` : "Dialogue",
+      tabIndex: 0,
+      onClick: () => !choices && advance(),
+      onKeyDown,
+      style: {
+        "--bl-width": `${width}px`,
+        "--bl-box": boxColor,
+        "--bl-border": borderColor,
+        "--bl-text": textColor,
+        "--bl-name": nameColor,
+        "--bl-name-bg": nameBackground,
+        "--bl-accent": accentColor,
+        "--bl-size": `${fontSize}px`,
+        "--bl-lines": minLines,
+        "--bl-portrait": `${portraitSize}px`,
+        "--bl-portrait-gap": portrait ? `${portraitSize + 18}px` : "0px",
+        ...fontFamily ? { "--bl-font": fontFamily } : null,
+        ...bodyFont ? { "--bl-body": bodyFont } : null,
+        ...style
+      },
+      children: [
+        line.speaker && /* @__PURE__ */ jsx("span", { className: "bl-quest__name", children: line.speaker }),
+        /* @__PURE__ */ jsxs("div", { className: "bl-quest__body", children: [
+          portrait && /* @__PURE__ */ jsx("div", { className: "bl-quest__portrait", "aria-hidden": "true", children: portrait }),
+          /* @__PURE__ */ jsxs("p", { className: "bl-quest__text", "aria-hidden": "true", children: [
+            text.slice(0, shown),
+            /* @__PURE__ */ jsx("span", { className: "bl-quest__ghost", children: text.slice(shown) })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "bl-sr", "aria-live": "polite", children: text })
+        ] }),
+        choices && /* @__PURE__ */ jsx("ul", { className: "bl-quest__choices", role: "listbox", "aria-label": "Choices", "aria-activedescendant": `${uid}-choice-${active}`, children: choices.map((choice, choiceIndex) => /* @__PURE__ */ jsx("li", { role: "presentation", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            id: `${uid}-choice-${choiceIndex}`,
+            type: "button",
+            role: "option",
+            "aria-selected": choiceIndex === active,
+            className: "bl-quest__choice",
+            "data-active": choiceIndex === active || void 0,
+            onMouseEnter: () => setActive(choiceIndex),
+            onClick: (event) => {
+              event.stopPropagation();
+              choose(choiceIndex);
+            },
+            children: choice.label
+          }
+        ) }, choice.label)) }),
+        !typing && !choices && !finished && /* @__PURE__ */ jsx("span", { className: "bl-quest__next", "aria-hidden": "true", children: last ? "\u25A0" : "\u25BC" })
+      ]
+    }
+  );
+}
+export {
+  QuestDialog as default
+};

package/dist/QuestLog.d.ts

@@ -0,0 +1,39 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface Quest {
+    id: string;
+    title: string;
+    description?: ReactNode;
+    /** XP paid into the bar when done. */
+    xp?: number;
+    /** Quest ids that must be done first; locked until then. */
+    requires?: string[];
+}
+export interface QuestLogProps {
+    quests?: Quest[];
+    /** Controlled list of done quest ids. */
+    completed?: string[];
+    defaultCompleted?: string[];
+    onCompletedChange?: (completed: string[]) => void;
+    /** Fires when a quest is ticked (hook up a sound or analytics). */
+    onQuestComplete?: (quest: Quest) => void;
+    /** Unticking also unticks quests that depend on it. */
+    allowUndo?: boolean;
+    title?: string;
+    finishedMessage?: string;
+    /** Max width in px. */
+    width?: number;
+    backgroundColor?: string;
+    rowColor?: string;
+    hoverColor?: string;
+    textColor?: string;
+    mutedColor?: string;
+    lineColor?: string;
+    trackColor?: string;
+    accentColor?: string;
+    doneColor?: string;
+    fontFamily?: string;
+    titleFontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function QuestLog({ quests, completed, defaultCompleted, onCompletedChange, onQuestComplete, allowUndo, title, finishedMessage, width, backgroundColor, rowColor, hoverColor, textColor, mutedColor, lineColor, trackColor, accentColor, doneColor, fontFamily, titleFontFamily, className, style }: QuestLogProps): import("react").JSX.Element;

package/dist/QuestLog.js

@@ -0,0 +1,214 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-quest-log";
+const CSS = `
+.bl-ql { position: relative; width: 100%; max-width: var(--bl-w); padding: 18px; box-sizing: border-box; background: var(--bl-bg); color: var(--bl-ink); font-family: var(--bl-font); box-shadow: 0 0 0 3px var(--bl-line), 6px 6px 0 3px rgba(0,0,0,0.45); }
+.bl-ql__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
+.bl-ql__title { margin: 0; font-family: var(--bl-title-font); font-size: 13px; font-weight: 400; color: var(--bl-accent); letter-spacing: 0.04em; }
+.bl-ql__xp { color: var(--bl-muted); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.bl-ql__bar { position: relative; height: 12px; margin-bottom: 16px; background: var(--bl-track); box-shadow: inset 0 0 0 2px rgba(0,0,0,0.35); }
+.bl-ql__fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--bl-p) * 100%); background: repeating-linear-gradient(90deg, var(--bl-accent) 0 8px, color-mix(in srgb, var(--bl-accent) 75%, #000) 8px 10px); transition: width 600ms steps(12); }
+.bl-ql__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
+.bl-ql__quest { position: relative; display: grid; grid-template-columns: 22px 1fr auto; align-items: start; gap: 12px; padding: 10px 12px; background: var(--bl-row); cursor: pointer; }
+.bl-ql__quest:hover { background: var(--bl-hover); }
+.bl-ql__quest[data-state="locked"] { cursor: not-allowed; opacity: 0.55; }
+.bl-ql__quest[data-state="done"] .bl-ql__name { color: var(--bl-muted); text-decoration: line-through; text-decoration-thickness: 2px; }
+.bl-ql__quest[data-flash] { animation: bl-ql-flash 600ms steps(4); }
+.bl-ql__input { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; }
+.bl-ql__box { position: relative; width: 22px; height: 22px; background: var(--bl-track); box-shadow: inset 0 0 0 3px var(--bl-line); color: var(--bl-muted); }
+.bl-ql__input:focus-visible ~ .bl-ql__box { outline: 3px solid var(--bl-accent); outline-offset: 2px; }
+.bl-ql__quest[data-state="done"] .bl-ql__box { color: var(--bl-bg); background: var(--bl-done); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--bl-done) 60%, #000); }
+.bl-ql__box svg { position: absolute; inset: 3px; width: 16px; height: 16px; }
+.bl-ql__mark { position: absolute; inset: 0; display: grid; place-items: center; color: var(--bl-accent); font-family: var(--bl-title-font); font-size: 11px; animation: bl-ql-bob 1.2s steps(2) infinite; }
+.bl-ql__body { display: grid; gap: 3px; min-width: 0; }
+.bl-ql__name { font-size: 15px; font-weight: 600; line-height: 1.3; }
+.bl-ql__desc { color: var(--bl-muted); font-size: 13px; line-height: 1.4; }
+.bl-ql__reward { position: relative; padding: 3px 7px; background: var(--bl-track); color: var(--bl-accent); font-family: var(--bl-title-font); font-size: 9px; line-height: 1.4; white-space: nowrap; }
+.bl-ql__quest[data-state="done"] .bl-ql__reward { background: var(--bl-accent); color: var(--bl-bg); }
+.bl-ql__pop { position: absolute; right: 0; bottom: 100%; color: var(--bl-accent); font-family: var(--bl-title-font); font-size: 10px; white-space: nowrap; text-shadow: 2px 2px 0 rgba(0,0,0,0.6); pointer-events: none; animation: bl-ql-pop 1000ms steps(10) forwards; }
+.bl-ql__banner { position: relative; margin-top: 14px; padding: 12px; background: var(--bl-accent); color: var(--bl-bg); font-family: var(--bl-title-font); font-size: 11px; line-height: 1.5; text-align: center; animation: bl-ql-banner 500ms cubic-bezier(.3,1.5,.5,1) both; }
+.bl-ql__spark { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; background: var(--c); animation: bl-ql-spark 900ms cubic-bezier(.2,.8,.3,1) forwards; }
+.bl-ql__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+@keyframes bl-ql-flash { 25%, 75% { background: color-mix(in srgb, var(--bl-done) 35%, var(--bl-row)); } }
+@keyframes bl-ql-bob { 50% { transform: translateY(-3px); } }
+@keyframes bl-ql-pop { from { transform: translateY(6px); opacity: 0; } 15% { opacity: 1; } to { transform: translateY(-26px); opacity: 0; } }
+@keyframes bl-ql-banner { from { transform: scale(0.6); opacity: 0; } }
+@keyframes bl-ql-spark { from { transform: translate(-50%, -50%); opacity: 1; } to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))); opacity: 0; } }
+@media (prefers-reduced-motion: reduce) {
+  .bl-ql__fill { transition: none; }
+  .bl-ql__quest[data-flash], .bl-ql__mark, .bl-ql__banner, .bl-ql__spark { animation: none; }
+  .bl-ql__spark { display: 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 SPARK_COLORS = ["#ffcd75", "#ef7d57", "#a7f070", "#73eff7", "#f4f4f4", "#b13e53"];
+const SPARKS = Array.from({ length: 14 }, (_, i) => {
+  const angle = i / 14 * Math.PI * 2;
+  const dist = 60 + i % 3 * 24;
+  return { dx: `${Math.round(Math.cos(angle) * dist * 1.6)}px`, dy: `${Math.round(Math.sin(angle) * dist * 0.7)}px`, c: SPARK_COLORS[i % SPARK_COLORS.length] };
+});
+function QuestLog({
+  quests = [],
+  completed,
+  defaultCompleted = [],
+  onCompletedChange,
+  onQuestComplete,
+  allowUndo = true,
+  title = "Quest log",
+  finishedMessage = "All quests complete!",
+  width = 520,
+  backgroundColor = "#1a1c2c",
+  rowColor = "#262b44",
+  hoverColor = "#2e3552",
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  lineColor = "#333c57",
+  trackColor = "#0b0b14",
+  accentColor = "#ffcd75",
+  doneColor = "#38b764",
+  fontFamily = '"Pixelify Sans", ui-sans-serif, system-ui, sans-serif',
+  titleFontFamily = '"Press Start 2P", ui-monospace, monospace',
+  className = "",
+  style
+}) {
+  useStyles();
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const [inner, setInner] = useState(defaultCompleted);
+  const done = completed ?? inner;
+  const [flash, setFlash] = useState(null);
+  const [pops, setPops] = useState([]);
+  const [announce, setAnnounce] = useState("");
+  const popId = useRef(0);
+  const byId = Object.fromEntries(quests.map((q) => [q.id, q]));
+  const isLocked = (quest) => (quest.requires ?? []).some((id) => !done.includes(id));
+  const earned = quests.reduce((sum, q) => sum + (done.includes(q.id) ? q.xp ?? 0 : 0), 0);
+  const totalXp = quests.reduce((sum, q) => sum + (q.xp ?? 0), 0);
+  const allDone = quests.length > 0 && quests.every((q) => done.includes(q.id));
+  const commit = (next) => {
+    if (completed === void 0) setInner(next);
+    onCompletedChange?.(next);
+  };
+  const toggle = (quest) => {
+    if (isLocked(quest)) return;
+    if (done.includes(quest.id)) {
+      if (!allowUndo) return;
+      const removed = /* @__PURE__ */ new Set([quest.id]);
+      let grew = true;
+      while (grew) {
+        grew = false;
+        for (const q of quests) {
+          if (!removed.has(q.id) && (q.requires ?? []).some((id) => removed.has(id))) {
+            removed.add(q.id);
+            grew = true;
+          }
+        }
+      }
+      commit(done.filter((id) => !removed.has(id)));
+      setAnnounce(`${quest.title} marked not done.`);
+      return;
+    }
+    const next = [...done, quest.id];
+    commit(next);
+    onQuestComplete?.(quest);
+    setFlash(quest.id);
+    popId.current += 1;
+    setPops((list) => [...list, { id: popId.current, quest: quest.id, xp: quest.xp ?? 0 }]);
+    const finishing = quests.every((q) => next.includes(q.id));
+    setAnnounce(`Quest complete: ${quest.title}.${quest.xp ? ` Plus ${quest.xp} XP.` : ""}${finishing ? ` ${finishedMessage}` : ""}`);
+  };
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: `bl-ql ${className}`,
+      "aria-labelledby": `${uid}-title`,
+      style: {
+        "--bl-w": `${width}px`,
+        "--bl-bg": backgroundColor,
+        "--bl-row": rowColor,
+        "--bl-hover": hoverColor,
+        "--bl-ink": textColor,
+        "--bl-muted": mutedColor,
+        "--bl-line": lineColor,
+        "--bl-track": trackColor,
+        "--bl-accent": accentColor,
+        "--bl-done": doneColor,
+        "--bl-p": totalXp ? earned / totalXp : 0,
+        "--bl-font": fontFamily,
+        "--bl-title-font": titleFontFamily,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "bl-ql__head", children: [
+          /* @__PURE__ */ jsx("h3", { id: `${uid}-title`, className: "bl-ql__title", children: title }),
+          /* @__PURE__ */ jsxs("span", { className: "bl-ql__xp", children: [
+            earned,
+            " / ",
+            totalXp,
+            " XP"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "bl-ql__bar", role: "progressbar", "aria-label": "Experience", "aria-valuemin": 0, "aria-valuemax": totalXp, "aria-valuenow": earned, children: /* @__PURE__ */ jsx("div", { className: "bl-ql__fill" }) }),
+        /* @__PURE__ */ jsx("ul", { className: "bl-ql__list", children: quests.map((quest) => {
+          const locked = isLocked(quest);
+          const complete = done.includes(quest.id);
+          const state = complete ? "done" : locked ? "locked" : "active";
+          const needs = (quest.requires ?? []).filter((id) => !done.includes(id)).map((id) => byId[id]?.title ?? id);
+          const descId = `${uid}-${quest.id}-desc`;
+          return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("label", { className: "bl-ql__quest", "data-state": state, "data-flash": flash === quest.id || void 0, onAnimationEnd: (event) => event.target === event.currentTarget && setFlash(null), children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "checkbox",
+                className: "bl-ql__input",
+                checked: complete,
+                disabled: locked || complete && !allowUndo,
+                "aria-describedby": descId,
+                onChange: () => toggle(quest)
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: "bl-ql__box", "aria-hidden": "true", children: [
+              complete && /* @__PURE__ */ jsx("svg", { viewBox: "0 0 8 8", shapeRendering: "crispEdges", children: /* @__PURE__ */ jsx("path", { d: "M1 4 3 6 7 2", fill: "none", stroke: "currentColor", strokeWidth: "1.6" }) }),
+              state === "active" && /* @__PURE__ */ jsx("span", { className: "bl-ql__mark", children: "!" }),
+              locked && /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 8 8", shapeRendering: "crispEdges", fill: "currentColor", children: [
+                /* @__PURE__ */ jsx("rect", { x: 2, y: 1, width: 4, height: 1 }),
+                /* @__PURE__ */ jsx("rect", { x: 1, y: 2, width: 1, height: 2 }),
+                /* @__PURE__ */ jsx("rect", { x: 6, y: 2, width: 1, height: 2 }),
+                /* @__PURE__ */ jsx("rect", { x: 1, y: 4, width: 6, height: 4 })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "bl-ql__body", children: [
+              /* @__PURE__ */ jsx("span", { className: "bl-ql__name", children: quest.title }),
+              /* @__PURE__ */ jsx("span", { id: descId, className: "bl-ql__desc", children: locked ? `Locked. Requires: ${needs.join(", ")}.` : quest.description })
+            ] }),
+            quest.xp ? /* @__PURE__ */ jsxs("span", { className: "bl-ql__reward", "aria-label": `${quest.xp} XP`, children: [
+              "+",
+              quest.xp,
+              " XP",
+              pops.filter((pop) => pop.quest === quest.id).map((pop) => /* @__PURE__ */ jsxs("span", { className: "bl-ql__pop", "aria-hidden": "true", onAnimationEnd: () => setPops((list) => list.filter((p) => p.id !== pop.id)), children: [
+                "+",
+                pop.xp,
+                " XP"
+              ] }, pop.id))
+            ] }) : /* @__PURE__ */ jsx("span", {})
+          ] }) }, quest.id);
+        }) }),
+        allDone && /* @__PURE__ */ jsxs("div", { className: "bl-ql__banner", "aria-hidden": "true", children: [
+          finishedMessage,
+          SPARKS.map((spark, i) => /* @__PURE__ */ jsx("i", { className: "bl-ql__spark", style: { "--dx": spark.dx, "--dy": spark.dy, "--c": spark.c } }, i))
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "bl-ql__sr", "aria-live": "polite", children: announce })
+      ]
+    }
+  );
+}
+export {
+  QuestLog as default
+};