bits-lab 0.0.0-stage → 0.1.2

package/dist/HotbarDock.js

@@ -0,0 +1,148 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-hotbar-dock";
+const CSS = `
+.bl-hotbar { display: inline-flex; align-items: flex-end; gap: var(--bl-gap); padding: var(--bl-pad); border-radius: var(--bl-radius); background: var(--bl-bg); box-shadow: 0 0 0 3px var(--bl-line), 0 12px 28px -14px rgba(0,0,0,0.85); font-family: var(--bl-font); }
+.bl-hotbar__slot { --m: 1; position: relative; display: grid; place-items: center; width: var(--bl-slot); height: var(--bl-slot); padding: 0; border: 0; border-radius: 6px; background: var(--bl-slot-bg); color: var(--bl-ink); box-shadow: inset 0 0 0 2px rgba(0,0,0,0.35); cursor: pointer; transform: scale(var(--m)); transform-origin: 50% 100%; margin: 0 calc((var(--m) - 1) * var(--bl-slot) / 2); transition: transform 90ms linear, margin 90ms linear; }
+.bl-hotbar__slot:hover { background: var(--bl-hover); }
+.bl-hotbar__slot:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 3px; }
+.bl-hotbar__slot[aria-pressed="true"] { background: var(--bl-hover); box-shadow: inset 0 0 0 2px rgba(0,0,0,0.35), 0 0 0 3px var(--bl-select), 0 0 0 5px rgba(0,0,0,0.6); }
+.bl-hotbar__icon { display: grid; place-items: center; width: 70%; height: 70%; pointer-events: none; }
+.bl-hotbar__icon > img, .bl-hotbar__icon > svg { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
+.bl-hotbar__key { position: absolute; top: 2px; left: 4px; color: var(--bl-muted); font-size: 9px; line-height: 1; pointer-events: none; }
+.bl-hotbar__count { position: absolute; right: 3px; bottom: 2px; color: var(--bl-ink); font-size: 11px; font-weight: 700; line-height: 1; text-shadow: 1px 1px 0 #000; pointer-events: none; }
+.bl-hotbar__tip { position: absolute; bottom: calc(100% + 8px); left: 50%; padding: 4px 8px; border-radius: 6px; background: var(--bl-tip); color: var(--bl-ink); font-size: 12px; white-space: nowrap; transform: translateX(-50%) scale(calc(1 / var(--m))); transform-origin: 50% 100%; opacity: 0; pointer-events: none; transition: opacity 120ms steps(2); }
+.bl-hotbar__slot:hover .bl-hotbar__tip, .bl-hotbar__slot:focus-visible .bl-hotbar__tip { opacity: 1; }
+@media (prefers-reduced-motion: reduce) { .bl-hotbar__slot { transition: none; } }
+`;
+function useStyles() {
+  useInsertionEffect(() => {
+    if (typeof document === "undefined") return;
+    const style = document.getElementById(STYLE_ID) ?? Object.assign(document.createElement("style"), { id: STYLE_ID });
+    style.textContent = CSS;
+    if (!style.isConnected) document.head.appendChild(style);
+  }, []);
+}
+function HotbarDock({
+  items = [],
+  value,
+  defaultValue,
+  onChange,
+  magnify = 1.5,
+  range = 110,
+  hotkeys = true,
+  wheel = true,
+  label = "Hotbar",
+  slotSize = 52,
+  gap = 6,
+  padding = 8,
+  radius = 10,
+  backgroundColor = "#1a1c2c",
+  slotColor = "#333c57",
+  hoverColor = "#3d4766",
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  lineColor = "#0b0b14",
+  selectColor = "#f4f4f4",
+  accentColor = "#73eff7",
+  tooltipColor = "#0b0b14",
+  fontFamily = "inherit",
+  className = "",
+  style
+}) {
+  useStyles();
+  const [inner, setInner] = useState(defaultValue ?? items[0]?.id);
+  const selected = value ?? inner;
+  const barRef = useRef(null);
+  const [focusIndex, setFocusIndex] = useState(() => Math.max(0, items.findIndex((item) => item.id === (value ?? defaultValue ?? items[0]?.id))));
+  const pick = (id) => {
+    if (id === selected) return;
+    if (value === void 0) setInner(id);
+    onChange?.(id, items.find((item) => item.id === id));
+  };
+  const pickRef = useRef(pick);
+  pickRef.current = pick;
+  useEffect(() => {
+    if (!hotkeys) return void 0;
+    const onKey = (event) => {
+      const t = event.target;
+      if (event.metaKey || event.ctrlKey || event.altKey || t.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(t.tagName)) return;
+      const n = Number(event.key);
+      if (n >= 1 && n <= Math.min(9, items.length)) pickRef.current(items[n - 1].id);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [hotkeys, items]);
+  useEffect(() => {
+    const bar = barRef.current;
+    const slots = () => [...bar.querySelectorAll(".bl-hotbar__slot")];
+    const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    const onMove = (event) => {
+      if (reduced) return;
+      slots().forEach((slot) => {
+        const r = slot.getBoundingClientRect();
+        const d = Math.abs(event.clientX - (r.left + r.width / 2));
+        const k = Math.max(0, 1 - d / range);
+        slot.style.setProperty("--m", (1 + (magnify - 1) * k * k * (3 - 2 * k)).toFixed(3));
+      });
+    };
+    const onLeave = () => slots().forEach((slot) => slot.style.setProperty("--m", "1"));
+    const onWheel = (event) => {
+      if (!wheel || !items.length) return;
+      event.preventDefault();
+      const step = Math.sign(event.deltaY || event.deltaX);
+      const at = Math.max(0, items.findIndex((item) => item.id === selected));
+      pickRef.current(items[(at + step + items.length) % items.length].id);
+    };
+    bar.addEventListener("pointermove", onMove);
+    bar.addEventListener("pointerleave", onLeave);
+    bar.addEventListener("wheel", onWheel, { passive: false });
+    return () => {
+      bar.removeEventListener("pointermove", onMove);
+      bar.removeEventListener("pointerleave", onLeave);
+      bar.removeEventListener("wheel", onWheel);
+    };
+  }, [magnify, range, wheel, items, selected]);
+  const onKeyDown = (event) => {
+    const moves = { ArrowRight: 1, ArrowLeft: -1, Home: -1e9, End: 1e9 };
+    if (moves[event.key] === void 0) return;
+    event.preventDefault();
+    const next = Math.max(0, Math.min(items.length - 1, focusIndex + moves[event.key]));
+    setFocusIndex(next);
+    barRef.current.querySelectorAll(".bl-hotbar__slot")[next]?.focus();
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: barRef,
+      className: `bl-hotbar ${className}`,
+      role: "toolbar",
+      "aria-label": label,
+      onKeyDown,
+      style: { "--bl-slot": `${slotSize}px`, "--bl-gap": `${gap}px`, "--bl-pad": `${padding}px`, "--bl-radius": `${radius}px`, "--bl-bg": backgroundColor, "--bl-slot-bg": slotColor, "--bl-hover": hoverColor, "--bl-ink": textColor, "--bl-muted": mutedColor, "--bl-line": lineColor, "--bl-select": selectColor, "--bl-accent": accentColor, "--bl-tip": tooltipColor, "--bl-font": fontFamily, ...style },
+      children: items.map((item, i) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "bl-hotbar__slot",
+          "aria-pressed": item.id === selected,
+          "aria-label": `${item.label}${item.count != null ? `, ${item.count}` : ""}${hotkeys && i < 9 ? ` (key ${i + 1})` : ""}`,
+          tabIndex: i === focusIndex ? 0 : -1,
+          onFocus: () => setFocusIndex(i),
+          onClick: () => pick(item.id),
+          children: [
+            hotkeys && i < 9 && /* @__PURE__ */ jsx("span", { className: "bl-hotbar__key", "aria-hidden": "true", children: i + 1 }),
+            /* @__PURE__ */ jsx("span", { className: "bl-hotbar__icon", "aria-hidden": "true", children: item.icon }),
+            item.count != null && /* @__PURE__ */ jsx("span", { className: "bl-hotbar__count", "aria-hidden": "true", children: item.count }),
+            /* @__PURE__ */ jsx("span", { className: "bl-hotbar__tip", "aria-hidden": "true", children: item.label })
+          ]
+        },
+        item.id
+      ))
+    }
+  );
+}
+export {
+  HotbarDock as default
+};

package/dist/InkText.d.ts

@@ -0,0 +1,27 @@
+import { type CSSProperties, type ElementType, type ReactNode } from 'react';
+export interface InkTextProps {
+    /** The text (or pass children). */
+    text?: string;
+    children?: ReactNode;
+    as?: ElementType;
+    /** A sweeping glint, flowing colours, a hollow stroke that floods on hover, or a panning picture. */
+    fill?: 'shimmer' | 'gradient' | 'outline' | 'image';
+    /** Gradient colours. */
+    colors?: string[];
+    /** Hard 8-bit bands instead of a smooth blend. */
+    stepped?: boolean;
+    /** Shimmer base, and the outline colour. */
+    baseColor?: string;
+    glintColor?: string;
+    /** Picture for the image fill. */
+    image?: string;
+    pixelated?: boolean;
+    strokeWidth?: number;
+    /** Keep the outline flooded. */
+    filled?: boolean;
+    /** Seconds per shimmer, flow or pan cycle. */
+    speed?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function InkText({ text, children, as: Tag, fill, colors, stepped, baseColor, glintColor, image, pixelated, strokeWidth, filled, speed, className, style }: InkTextProps): import("react").JSX.Element;

package/dist/InkText.js

@@ -0,0 +1,65 @@
+'use client';
+import { jsx } from "react/jsx-runtime";
+import { useInsertionEffect } from "react";
+const STYLE_ID = "bl-ink-text";
+const CSS = `
+@property --bl-ink-level { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
+.bl-ink { margin: 0; color: transparent; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-repeat: no-repeat; }
+.bl-ink[data-fill="shimmer"] { background-image: linear-gradient(100deg, var(--bl-base) 0 40%, var(--bl-glint) 50%, var(--bl-base) 60% 100%); background-size: 250% 100%; animation: bl-ink-sweep var(--bl-speed) linear infinite; }
+.bl-ink[data-fill="gradient"] { background-image: linear-gradient(90deg, var(--bl-stops)); background-size: 300% 100%; background-repeat: repeat; animation: bl-ink-flow var(--bl-speed) linear infinite; }
+.bl-ink[data-fill="outline"] { --bl-ink-level: 0%; background-image: linear-gradient(to top, var(--bl-base) var(--bl-ink-level), transparent var(--bl-ink-level)); -webkit-text-stroke: var(--bl-stroke) var(--bl-base); transition: --bl-ink-level 600ms cubic-bezier(.3,.8,.3,1); }
+.bl-ink[data-fill="outline"]:hover, .bl-ink[data-fill="outline"]:focus-visible, .bl-ink[data-fill="outline"][data-filled] { --bl-ink-level: 100%; }
+.bl-ink[data-fill="image"] { background-image: var(--bl-image); background-size: cover; background-position: 0% 50%; animation: bl-ink-pan var(--bl-speed) ease-in-out infinite alternate; }
+.bl-ink[data-fill="image"][data-pixelated] { image-rendering: pixelated; }
+@keyframes bl-ink-sweep { from { background-position: 100% 0; } to { background-position: -50% 0; } }
+@keyframes bl-ink-flow { from { background-position: 0% 0; } to { background-position: 150% 0; } }
+@keyframes bl-ink-pan { to { background-position: 100% 50%; } }
+@media (prefers-reduced-motion: reduce) { .bl-ink { animation: none !important; transition: none !important; } .bl-ink[data-fill="shimmer"] { background-position: 50% 0; } }
+`;
+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 gradientStops(colors, stepped) {
+  const list = [...colors, colors[0]];
+  if (!stepped) return list.join(", ");
+  const share = 100 / list.length;
+  return list.map((c, i) => `${c} ${(i * share).toFixed(2)}% ${((i + 1) * share).toFixed(2)}%`).join(", ");
+}
+function InkText({
+  text,
+  children,
+  as: Tag = "span",
+  fill = "shimmer",
+  colors = ["#ef7d57", "#ffcd75", "#a7f070", "#73eff7", "#41a6f6", "#b13e53"],
+  stepped = true,
+  baseColor = "#94b0c2",
+  glintColor = "#f4f4f4",
+  image,
+  pixelated = true,
+  strokeWidth = 1.5,
+  filled = false,
+  speed = 3,
+  className = "",
+  style
+}) {
+  useStyles();
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      className: `bl-ink ${className}`,
+      "data-fill": fill,
+      "data-filled": filled || void 0,
+      "data-pixelated": pixelated || void 0,
+      style: { "--bl-base": baseColor, "--bl-glint": glintColor, "--bl-stops": gradientStops(colors, stepped), "--bl-image": image ? `url("${image}")` : "none", "--bl-stroke": `${strokeWidth}px`, "--bl-speed": `${speed}s`, ...style },
+      children: text ?? children
+    }
+  );
+}
+export {
+  InkText as default
+};

package/dist/InlineEdit.d.ts

@@ -0,0 +1,30 @@
+import { type CSSProperties } from 'react';
+export interface InlineEditProps {
+    value?: string;
+    defaultValue?: string;
+    /** Return a promise to show "Saving…"; throw (or reject) with a message to keep editing. */
+    onSave?: (value: string) => void | Promise<unknown>;
+    /** Return a message to block the save. */
+    validate?: (value: string) => string | null | undefined;
+    placeholder?: string;
+    /** Accessible name of the field. */
+    label?: string;
+    /** Clicking away saves; false cancels instead. */
+    saveOnBlur?: boolean;
+    maxLength?: number;
+    minWidth?: number;
+    fontSize?: number;
+    radius?: number;
+    textColor?: string;
+    mutedColor?: string;
+    hoverColor?: string;
+    fieldColor?: string;
+    chipColor?: string;
+    accentColor?: string;
+    onAccentColor?: string;
+    errorColor?: string;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function InlineEdit({ value: controlled, defaultValue, onSave, validate, placeholder, label, saveOnBlur, maxLength, minWidth, fontSize, radius, textColor, mutedColor, hoverColor, fieldColor, chipColor, accentColor, onAccentColor, errorColor, fontFamily, className, style }: InlineEditProps): import("react").JSX.Element;

package/dist/InlineEdit.js

@@ -0,0 +1,198 @@
+'use client';
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useInsertionEffect, useLayoutEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-inline-edit";
+const CSS = `
+.bl-ie { position: relative; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; font-family: var(--bl-font); font-size: var(--bl-size); color: var(--bl-ink); vertical-align: middle; }
+.bl-ie__box { position: relative; box-sizing: border-box; width: var(--bl-box-w); max-width: 100%; min-width: var(--bl-min-w); transition: width 200ms cubic-bezier(.3,1.2,.5,1); }
+.bl-ie__display { display: flex; align-items: center; gap: 8px; box-sizing: border-box; width: 100%; padding: 6px 10px; border: 0; border-radius: var(--bl-radius); background: transparent; color: inherit; font: inherit; text-align: left; cursor: text; transition: background-color 150ms; }
+.bl-ie__display:hover { background: var(--bl-hover); }
+.bl-ie__display:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 1px; }
+.bl-ie__text { overflow: hidden; white-space: pre; text-overflow: ellipsis; }
+.bl-ie__text[data-empty] { color: var(--bl-muted); font-style: italic; }
+.bl-ie__pencil { flex: none; display: grid; color: var(--bl-muted); opacity: 0; transition: opacity 150ms; }
+.bl-ie__display:hover .bl-ie__pencil, .bl-ie__display:focus-visible .bl-ie__pencil { opacity: 1; }
+.bl-ie__input { display: block; box-sizing: border-box; width: 100%; margin: 0; padding: 6px 10px; border: 0; border-radius: var(--bl-radius); background: var(--bl-field); color: inherit; font: inherit; box-shadow: inset 0 0 0 2px var(--bl-accent); outline: none; }
+.bl-ie[data-invalid] .bl-ie__input { box-shadow: inset 0 0 0 2px var(--bl-error); animation: bl-ie-shake 320ms; }
+.bl-ie[data-busy] .bl-ie__input { opacity: 0.7; }
+.bl-ie__btn { display: grid; place-items: center; flex: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: var(--bl-chip); color: var(--bl-ink); cursor: pointer; animation: bl-ie-pop 260ms cubic-bezier(.3,1.6,.5,1) both; }
+.bl-ie__btn + .bl-ie__btn { animation-delay: 50ms; }
+.bl-ie__btn:hover { background: var(--bl-hover); }
+.bl-ie__btn:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 1px; }
+.bl-ie__btn[data-save] { background: var(--bl-accent); color: var(--bl-on-accent); }
+.bl-ie__btn:disabled { cursor: progress; opacity: 0.6; }
+.bl-ie__msg { position: absolute; top: calc(100% + 4px); left: 0; font-size: 12px; white-space: nowrap; color: var(--bl-muted); }
+.bl-ie__msg[data-error] { color: var(--bl-error); }
+.bl-ie__measure { position: absolute; top: 0; left: 0; visibility: hidden; padding: 0 10px; white-space: pre; pointer-events: none; }
+.bl-ie__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+@keyframes bl-ie-pop { from { opacity: 0; transform: scale(0.4); } }
+@keyframes bl-ie-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
+@media (prefers-reduced-motion: reduce) { .bl-ie__box { transition: none; } .bl-ie__btn, .bl-ie[data-invalid] .bl-ie__input { 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 InlineEdit({
+  value: controlled,
+  defaultValue = "",
+  onSave,
+  validate,
+  placeholder = "Click to edit",
+  label = "Text",
+  saveOnBlur = true,
+  maxLength,
+  minWidth = 60,
+  fontSize = 16,
+  radius = 8,
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  hoverColor = "rgba(255,255,255,0.07)",
+  fieldColor = "#0b0b14",
+  chipColor = "#333c57",
+  accentColor = "#73eff7",
+  onAccentColor = "#0b0b14",
+  errorColor = "#ef7d57",
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  className = "",
+  style
+}) {
+  useStyles();
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const [inner, setInner] = useState(defaultValue);
+  const value = controlled ?? inner;
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(value);
+  const [error, setError] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [announce, setAnnounce] = useState("");
+  const [boxWidth, setBoxWidth] = useState(null);
+  const inputRef = useRef(null);
+  const displayRef = useRef(null);
+  const measureRef = useRef(null);
+  const rootRef = useRef(null);
+  const refocus = useRef(false);
+  const shown = editing ? draft : value;
+  useLayoutEffect(() => {
+    const width = measureRef.current.getBoundingClientRect().width;
+    setBoxWidth(Math.ceil(width + (editing ? 4 : 24)));
+  }, [shown, placeholder, editing, fontSize, fontFamily]);
+  useEffect(() => {
+    if (editing) {
+      inputRef.current?.focus();
+      inputRef.current?.select();
+    } else if (refocus.current) {
+      refocus.current = false;
+      displayRef.current?.focus();
+    }
+  }, [editing]);
+  const start = () => {
+    setDraft(value);
+    setError("");
+    setEditing(true);
+  };
+  const cancel = (focusBack = true) => {
+    refocus.current = focusBack;
+    setEditing(false);
+    setError("");
+  };
+  const save = async (focusBack = true) => {
+    if (busy) return;
+    const next = draft;
+    if (next === value) {
+      cancel(focusBack);
+      return;
+    }
+    const problem = validate?.(next);
+    if (problem) {
+      setError(problem);
+      setAnnounce(problem);
+      inputRef.current?.focus();
+      return;
+    }
+    try {
+      const result = onSave?.(next);
+      if (result && typeof result.then === "function") {
+        setBusy(true);
+        setAnnounce("Saving\u2026");
+        await result;
+      }
+      if (controlled === void 0) setInner(next);
+      setBusy(false);
+      refocus.current = focusBack;
+      setEditing(false);
+      setError("");
+      setAnnounce(`${label} saved: ${next || "empty"}.`);
+    } catch (err) {
+      setBusy(false);
+      const message = err?.message || "Couldn't save. Try again.";
+      setError(message);
+      setAnnounce(message);
+      inputRef.current?.focus();
+    }
+  };
+  const onBlur = (event) => {
+    if (rootRef.current.contains(event.relatedTarget)) return;
+    if (saveOnBlur) save(false);
+    else cancel(false);
+  };
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref: rootRef,
+      className: `bl-ie ${className}`,
+      "data-invalid": error || void 0,
+      "data-busy": busy || void 0,
+      style: { "--bl-size": `${fontSize}px`, "--bl-radius": `${radius}px`, "--bl-min-w": `${minWidth}px`, "--bl-box-w": boxWidth ? `${boxWidth}px` : "auto", "--bl-ink": textColor, "--bl-muted": mutedColor, "--bl-hover": hoverColor, "--bl-field": fieldColor, "--bl-chip": chipColor, "--bl-accent": accentColor, "--bl-on-accent": onAccentColor, "--bl-error": errorColor, "--bl-font": fontFamily, ...style },
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "bl-ie__box", children: [
+          editing ? /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              className: "bl-ie__input",
+              value: draft,
+              maxLength,
+              placeholder,
+              "aria-label": label,
+              "aria-invalid": error ? true : void 0,
+              "aria-describedby": error ? `${uid}-msg` : void 0,
+              readOnly: busy,
+              onChange: (event) => {
+                setDraft(event.target.value);
+                if (error) setError("");
+              },
+              onKeyDown: (event) => {
+                if (event.key === "Enter") {
+                  event.preventDefault();
+                  save();
+                } else if (event.key === "Escape") {
+                  event.preventDefault();
+                  cancel();
+                }
+              },
+              onBlur
+            }
+          ) : /* @__PURE__ */ jsxs("button", { ref: displayRef, type: "button", className: "bl-ie__display", "aria-label": `Edit ${label}: ${value || "empty"}`, onClick: start, children: [
+            /* @__PURE__ */ jsx("span", { className: "bl-ie__text", "data-empty": value ? void 0 : "", children: value || placeholder }),
+            /* @__PURE__ */ jsx("span", { className: "bl-ie__pencil", "aria-hidden": "true", children: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M2 12l.6-2.8L9.8 2 12 4.2 4.8 11.4z" }) }) })
+          ] }),
+          /* @__PURE__ */ jsx("span", { ref: measureRef, className: "bl-ie__measure", "aria-hidden": "true", children: shown || placeholder })
+        ] }),
+        editing && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("button", { type: "button", className: "bl-ie__btn", "data-save": "", "aria-label": "Save", disabled: busy, onClick: () => save(), onBlur, children: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M2.5 7.5l3 3 6-7" }) }) }),
+          /* @__PURE__ */ jsx("button", { type: "button", className: "bl-ie__btn", "aria-label": "Cancel", disabled: busy, onClick: () => cancel(), onBlur, children: /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M2 2l8 8M10 2 2 10" }) }) })
+        ] }),
+        (error || busy) && /* @__PURE__ */ jsx("span", { id: `${uid}-msg`, className: "bl-ie__msg", "data-error": error ? "" : void 0, children: error || "Saving\u2026" }),
+        /* @__PURE__ */ jsx("span", { className: "bl-ie__sr", "aria-live": "polite", children: announce })
+      ]
+    }
+  );
+}
+export {
+  InlineEdit as default
+};

package/dist/InteractiveGrid.d.ts

@@ -0,0 +1,25 @@
+import { type CSSProperties } from 'react';
+export interface InteractiveGridProps {
+    /** Cell pitch in px. */
+    cellSize?: number;
+    /** Gap (grid line) between cells in px. */
+    gap?: number;
+    /** The ramp a lit cell cools through as it fades, hottest first. */
+    colors?: string[];
+    cellColor?: string;
+    /** Grid-line colour. */
+    backgroundColor?: string;
+    /** Fade time in ms. */
+    trail?: number;
+    /** Cells lit around the pointer (radius). */
+    brush?: number;
+    /** A click sends a ring across the grid. */
+    ripple?: boolean;
+    /** Ripple speed in cells per second. */
+    rippleSpeed?: number;
+    /** A wandering trail while nobody is pointing. */
+    autopilot?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function InteractiveGrid({ cellSize, gap, colors, cellColor, backgroundColor, trail, brush, ripple, rippleSpeed, autopilot, className, style }: InteractiveGridProps): import("react").JSX.Element;