bits-lab 0.0.0-stage → 0.1.0

package/dist/StreamingText.js

@@ -0,0 +1,271 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, useEffect, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-streaming-text";
+const CSS = `
+.bl-stream { color: var(--bl-ink); font-family: var(--bl-font); font-size: var(--bl-size); line-height: 1.65; overflow-wrap: anywhere; }
+.bl-stream > :first-child { margin-top: 0; }
+.bl-stream > :last-child { margin-bottom: 0; }
+.bl-stream p { margin: 0 0 0.8em; }
+.bl-stream h1, .bl-stream h2, .bl-stream h3 { margin: 1em 0 0.45em; font-weight: 700; line-height: 1.3; }
+.bl-stream h1 { font-size: 1.45em; } .bl-stream h2 { font-size: 1.25em; } .bl-stream h3 { font-size: 1.08em; }
+.bl-stream ul, .bl-stream ol { margin: 0 0 0.8em; padding-left: 1.4em; }
+.bl-stream ul { list-style: disc; } .bl-stream ol { list-style: decimal; }
+.bl-stream li { margin: 0.2em 0; }
+.bl-stream blockquote { margin: 0 0 0.8em; padding-left: 0.9em; border-left: 3px solid var(--bl-line); color: var(--bl-muted); }
+.bl-stream code { padding: 0.1em 0.35em; border-radius: 5px; background: var(--bl-code-bg); font-family: var(--bl-mono); font-size: 0.9em; }
+.bl-stream pre { margin: 0 0 0.8em; padding: 12px 14px; overflow-x: auto; border-radius: 10px; background: var(--bl-code-bg); }
+.bl-stream pre code { padding: 0; background: none; font-size: 0.86em; line-height: 1.55; white-space: pre; }
+.bl-stream a { color: var(--bl-accent); text-decoration: underline; text-underline-offset: 2px; }
+.bl-stream__fresh { animation: bl-stream-in var(--bl-fade) ease both; }
+.bl-stream__cursor { display: inline-block; width: 0.55em; height: 1.1em; margin-left: 2px; vertical-align: text-bottom; border-radius: 2px; background: var(--bl-cursor); animation: bl-stream-blink 1s steps(1) infinite; }
+.bl-stream__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+@keyframes bl-stream-in { from { opacity: 0; filter: blur(3px); } }
+@keyframes bl-stream-blink { 50% { opacity: 0; } }
+@media (prefers-reduced-motion: reduce) { .bl-stream__fresh { animation: none; } .bl-stream__cursor { 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 parseInline(src, base) {
+  const nodes = [];
+  let i = 0;
+  let textStart = 0;
+  const flush = (end) => {
+    if (end > textStart) nodes.push({ type: "text", text: src.slice(textStart, end), start: base + textStart });
+  };
+  while (i < src.length) {
+    const rest = src.slice(i);
+    let match = null;
+    if (rest.startsWith("**")) {
+      const close = src.indexOf("**", i + 2);
+      match = { type: "strong", open: 2, inner: close < 0 ? src.slice(i + 2) : src.slice(i + 2, close), end: close < 0 ? src.length : close + 2 };
+    } else if (rest[0] === "`") {
+      const close = src.indexOf("`", i + 1);
+      match = { type: "code", open: 1, inner: close < 0 ? src.slice(i + 1) : src.slice(i + 1, close), end: close < 0 ? src.length : close + 1 };
+    } else if (rest[0] === "*" && rest[1] !== " " && rest[1] !== void 0) {
+      const close = src.indexOf("*", i + 1);
+      match = { type: "em", open: 1, inner: close < 0 ? src.slice(i + 1) : src.slice(i + 1, close), end: close < 0 ? src.length : close + 1 };
+    } else if (rest[0] === "[") {
+      const link = /^\[([^\]]*)\]\(([^)\s]*)\)/.exec(rest);
+      if (link) match = { type: "link", open: 1, inner: link[1], href: link[2], end: i + link[0].length };
+    }
+    if (!match) {
+      i++;
+      continue;
+    }
+    flush(i);
+    const innerBase = base + i + match.open;
+    nodes.push(
+      match.type === "code" ? { type: "code", children: [{ type: "text", text: match.inner, start: innerBase }] } : { type: match.type, href: match.href, children: parseInline(match.inner, innerBase) }
+    );
+    i = match.end;
+    textStart = i;
+  }
+  flush(src.length);
+  return nodes;
+}
+function parseBlocks(src) {
+  const blocks = [];
+  const lines = src.split("\n");
+  let offset = 0;
+  let i = 0;
+  const lineStart = [];
+  for (const line of lines) {
+    lineStart.push(offset);
+    offset += line.length + 1;
+  }
+  while (i < lines.length) {
+    const line = lines[i];
+    const start = lineStart[i];
+    if (!line.trim()) {
+      i++;
+      continue;
+    }
+    if (line.startsWith("```")) {
+      const body = [];
+      const bodyStart = start + line.length + 1;
+      i++;
+      while (i < lines.length && !lines[i].startsWith("```")) body.push(lines[i++]);
+      i++;
+      blocks.push({ type: "pre", children: [{ type: "text", text: body.join("\n"), start: bodyStart }] });
+      continue;
+    }
+    const heading = /^(#{1,3})\s+/.exec(line);
+    if (heading) {
+      blocks.push({ type: `h${heading[1].length}`, children: parseInline(line.slice(heading[0].length), start + heading[0].length) });
+      i++;
+      continue;
+    }
+    const listItem = /^(\s*)([-*]|\d+\.)\s+/;
+    if (listItem.test(line)) {
+      const ordered = /\d/.test(listItem.exec(line)[2]);
+      const items = [];
+      while (i < lines.length && listItem.test(lines[i])) {
+        const m = listItem.exec(lines[i]);
+        items.push({ type: "li", children: parseInline(lines[i].slice(m[0].length), lineStart[i] + m[0].length) });
+        i++;
+      }
+      blocks.push({ type: ordered ? "ol" : "ul", children: items });
+      continue;
+    }
+    if (line.startsWith(">")) {
+      const marker = /^>\s?/.exec(line)[0];
+      blocks.push({ type: "blockquote", children: parseInline(line.slice(marker.length), start + marker.length) });
+      i++;
+      continue;
+    }
+    const parts = [];
+    while (i < lines.length && lines[i].trim() && !/^(```|#{1,3}\s|>|\s*([-*]|\d+\.)\s)/.test(lines[i])) {
+      parts.push(...parts.length ? [{ type: "text", text: " ", start: lineStart[i] - 1 }] : [], ...parseInline(lines[i], lineStart[i]));
+      i++;
+    }
+    blocks.push({ type: "p", children: parts });
+  }
+  return blocks;
+}
+const SAFE_HREF = /^(https?:|mailto:|\/|#)/i;
+function StreamingText({
+  text = "",
+  stream,
+  speed = 60,
+  markdown = true,
+  showCursor = true,
+  fadeDuration = 420,
+  tail = 6,
+  onDone,
+  fontSize = 16,
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  lineColor = "rgba(255,255,255,0.2)",
+  codeBackground = "rgba(255,255,255,0.07)",
+  accentColor = "#73eff7",
+  cursorColor = "#73eff7",
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  monoFontFamily = "ui-monospace, SFMono-Regular, Menlo, monospace",
+  className = "",
+  style
+}) {
+  useStyles();
+  const [full, setFull] = useState(stream ? "" : text);
+  const [shown, setShown] = useState(0);
+  const [chunks, setChunks] = useState([]);
+  const [sourceDone, setSourceDone] = useState(!stream);
+  const onDoneRef = useRef(onDone);
+  onDoneRef.current = onDone;
+  useEffect(() => {
+    if (!stream) {
+      setFull(text);
+      setShown(0);
+      setChunks([]);
+      setSourceDone(true);
+      return void 0;
+    }
+    let cancelled = false;
+    setFull("");
+    setShown(0);
+    setChunks([]);
+    setSourceDone(false);
+    (async () => {
+      for await (const piece of stream) {
+        if (cancelled) return;
+        setFull((prev) => prev + piece);
+      }
+      if (!cancelled) setSourceDone(true);
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [stream, text]);
+  useEffect(() => {
+    if (shown >= full.length) return void 0;
+    const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    const nextBreak = full.slice(shown).search(/\s\S/);
+    const end = stream || reduced ? full.length : nextBreak < 0 ? full.length : shown + nextBreak + 1;
+    const delay = stream ? 16 : Math.max(8, (end - shown) / Math.max(1, speed) * 1e3);
+    const timer = setTimeout(() => {
+      setChunks((prev) => [...prev.slice(-(tail - 1)), shown]);
+      setShown(end);
+    }, delay);
+    return () => clearTimeout(timer);
+  }, [shown, full, speed, stream, tail]);
+  const done = sourceDone && shown >= full.length;
+  useEffect(() => {
+    if (done && full) onDoneRef.current?.();
+  }, [done, full]);
+  const visible = full.slice(0, shown);
+  const fadeFrom = chunks[0] ?? Infinity;
+  const renderText = (node, key) => {
+    const end = node.start + node.text.length;
+    if (end <= fadeFrom) return /* @__PURE__ */ jsx(Fragment, { children: node.text }, key);
+    const cuts = [node.start, ...chunks.filter((c) => c > node.start && c < end), end];
+    return cuts.slice(0, -1).map((from, j) => {
+      const piece = node.text.slice(from - node.start, cuts[j + 1] - node.start);
+      return from >= fadeFrom ? /* @__PURE__ */ jsx("span", { className: "bl-stream__fresh", children: piece }, `${key}-${from}`) : /* @__PURE__ */ jsx(Fragment, { children: piece }, `${key}-${from}`);
+    });
+  };
+  const renderNodes = (nodes) => nodes.map((node, i) => {
+    if (node.type === "text") return renderText(node, `t${node.start}-${i}`);
+    const children = renderNodes(node.children);
+    if (node.type === "strong") return /* @__PURE__ */ jsx("strong", { children }, i);
+    if (node.type === "em") return /* @__PURE__ */ jsx("em", { children }, i);
+    if (node.type === "code") return /* @__PURE__ */ jsx("code", { children }, i);
+    if (node.type === "link") return SAFE_HREF.test(node.href ?? "") ? /* @__PURE__ */ jsx("a", { href: node.href, children }, i) : /* @__PURE__ */ jsx("span", { children }, i);
+    return /* @__PURE__ */ jsx(Fragment, { children }, i);
+  });
+  const cursor = showCursor && !done ? /* @__PURE__ */ jsx("span", { className: "bl-stream__cursor", "aria-hidden": "true" }) : null;
+  const blocks = markdown ? parseBlocks(visible) : [{ type: "p", children: [{ type: "text", text: visible, start: 0 }] }];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `bl-stream ${className}`,
+      "aria-busy": !done,
+      style: {
+        "--bl-size": `${fontSize}px`,
+        "--bl-ink": textColor,
+        "--bl-muted": mutedColor,
+        "--bl-line": lineColor,
+        "--bl-code-bg": codeBackground,
+        "--bl-accent": accentColor,
+        "--bl-cursor": cursorColor,
+        "--bl-fade": `${fadeDuration}ms`,
+        "--bl-font": fontFamily,
+        "--bl-mono": monoFontFamily,
+        ...style
+      },
+      children: [
+        blocks.map((block, i) => {
+          const last = i === blocks.length - 1;
+          const inner = renderNodes(block.children);
+          if (block.type === "pre")
+            return /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsxs("code", { children: [
+              inner,
+              last && cursor
+            ] }) }, i);
+          if (block.type === "ul" || block.type === "ol") {
+            const List = block.type;
+            return /* @__PURE__ */ jsx(List, { children: block.children.map((item, j) => /* @__PURE__ */ jsxs("li", { children: [
+              renderNodes(item.children),
+              last && j === block.children.length - 1 && cursor
+            ] }, j)) }, i);
+          }
+          const Tag = block.type;
+          return /* @__PURE__ */ jsxs(Tag, { children: [
+            inner,
+            last && cursor
+          ] }, i);
+        }),
+        !blocks.length && cursor,
+        /* @__PURE__ */ jsx("span", { className: "bl-stream__sr", role: "status", children: done && full ? "Response complete." : "" })
+      ]
+    }
+  );
+}
+export {
+  StreamingText as default
+};

package/dist/SuggestionChips.d.ts

@@ -0,0 +1,32 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface Suggestion {
+    /** Text handed to onPick. */
+    text: string;
+    /** What the chip shows (defaults to text). */
+    label?: ReactNode;
+    icon?: ReactNode;
+}
+export interface SuggestionChipsProps {
+    /** The pool to deal from. */
+    suggestions?: (string | Suggestion)[];
+    /** How many show at once. */
+    count?: number;
+    onPick?: (text: string, item: Suggestion) => void;
+    moreLabel?: string;
+    align?: 'center' | 'start';
+    /** Entrance delay per chip in ms. */
+    stagger?: number;
+    /** Accessible name of the list. */
+    label?: string;
+    chipColor?: string;
+    hoverColor?: string;
+    textColor?: string;
+    mutedColor?: string;
+    lineColor?: string;
+    accentColor?: string;
+    radius?: number;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function SuggestionChips({ suggestions, count, onPick, moreLabel, align, stagger, label, chipColor, hoverColor, textColor, mutedColor, lineColor, accentColor, radius, fontFamily, className, style }: SuggestionChipsProps): import("react").JSX.Element;

package/dist/SuggestionChips.js

@@ -0,0 +1,96 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useInsertionEffect, useState } from "react";
+const STYLE_ID = "bl-suggestion-chips";
+const CSS = `
+.bl-chips { display: grid; justify-items: var(--bl-align); gap: 12px; width: 100%; font-family: var(--bl-font); }
+.bl-chips__list { display: flex; flex-wrap: wrap; justify-content: var(--bl-justify); gap: 8px; margin: 0; padding: 0; list-style: none; }
+.bl-chips__chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 9px 14px; border: 0; border-radius: var(--bl-radius); background: var(--bl-chip); color: var(--bl-ink); font: inherit; font-size: 14px; line-height: 1.35; text-align: left; cursor: pointer; box-shadow: 0 0 0 1px var(--bl-line); animation: bl-chips-in 420ms cubic-bezier(.3,1.4,.5,1) both; animation-delay: calc(var(--i) * var(--bl-stagger)); transition: background-color 150ms, box-shadow 150ms, transform 150ms; }
+.bl-chips__chip:hover { background: var(--bl-hover); box-shadow: 0 0 0 1px var(--bl-accent); transform: translateY(-1px); }
+.bl-chips__chip:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 2px; }
+.bl-chips__list[data-leaving] .bl-chips__chip { animation: bl-chips-out 180ms ease-in both; animation-delay: calc(var(--i) * 30ms); pointer-events: none; }
+.bl-chips__icon { flex: 0 0 auto; display: grid; place-items: center; }
+.bl-chips__more { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 0; border-radius: 999px; background: transparent; color: var(--bl-muted); font: inherit; font-size: 13px; cursor: pointer; }
+.bl-chips__more:hover { color: var(--bl-ink); }
+.bl-chips__more:focus-visible { outline: 2px solid var(--bl-accent); }
+.bl-chips__more svg { transition: transform 400ms cubic-bezier(.3,1.4,.5,1); }
+.bl-chips__more:active svg { transform: rotate(-180deg); }
+.bl-chips__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+@keyframes bl-chips-in { from { opacity: 0; transform: translateY(10px) scale(0.92); } }
+@keyframes bl-chips-out { to { opacity: 0; transform: translateY(-6px) scale(0.95); } }
+@media (prefers-reduced-motion: reduce) { .bl-chips__chip, .bl-chips__list[data-leaving] .bl-chips__chip { animation: none; } }
+`;
+function useStyles() {
+  useInsertionEffect(() => {
+    if (typeof document === "undefined") return;
+    const style = document.getElementById(STYLE_ID) ?? Object.assign(document.createElement("style"), { id: STYLE_ID });
+    style.textContent = CSS;
+    if (!style.isConnected) document.head.appendChild(style);
+  }, []);
+}
+const asItem = (s) => typeof s === "string" ? { text: s } : s;
+function deal(pool, count, avoid = []) {
+  const fresh = pool.filter((item) => !avoid.includes(asItem(item).text));
+  const source = fresh.length >= count ? fresh : pool;
+  const shuffled = [...source];
+  for (let i = shuffled.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
+  }
+  return shuffled.slice(0, count).map(asItem);
+}
+function SuggestionChips({
+  suggestions = [],
+  count = 4,
+  onPick,
+  moreLabel = "More ideas",
+  align = "center",
+  stagger = 60,
+  label = "Suggestions",
+  chipColor = "#262b44",
+  hoverColor = "#2e3552",
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  lineColor = "#333c57",
+  accentColor = "#73eff7",
+  radius = 999,
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  className = "",
+  style
+}) {
+  useStyles();
+  const [shown, setShown] = useState(() => suggestions.slice(0, count).map(asItem));
+  const [round, setRound] = useState(0);
+  const [leaving, setLeaving] = useState(false);
+  const [announce, setAnnounce] = useState("");
+  const shuffle = () => {
+    if (leaving) return;
+    const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    const next = deal(suggestions, count, shown.map((s) => s.text));
+    const swap = () => {
+      setShown(next);
+      setRound((r) => r + 1);
+      setLeaving(false);
+      setAnnounce(`New suggestions: ${next.map((s) => s.text).join("; ")}`);
+    };
+    if (reduced) swap();
+    else {
+      setLeaving(true);
+      setTimeout(swap, 180 + shown.length * 30);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `bl-chips ${className}`, style: { "--bl-align": align === "start" ? "start" : "center", "--bl-justify": align === "start" ? "flex-start" : "center", "--bl-stagger": `${stagger}ms`, "--bl-chip": chipColor, "--bl-hover": hoverColor, "--bl-ink": textColor, "--bl-muted": mutedColor, "--bl-line": lineColor, "--bl-accent": accentColor, "--bl-radius": `${radius}px`, "--bl-font": fontFamily, ...style }, children: [
+    /* @__PURE__ */ jsx("ul", { className: "bl-chips__list", "aria-label": label, "data-leaving": leaving || void 0, children: shown.map((item, i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", { type: "button", className: "bl-chips__chip", style: { "--i": i }, onClick: () => onPick?.(item.text, item), children: [
+      item.icon && /* @__PURE__ */ jsx("span", { className: "bl-chips__icon", "aria-hidden": "true", children: item.icon }),
+      item.label ?? item.text
+    ] }) }, `${round}-${item.text}`)) }),
+    suggestions.length > count && /* @__PURE__ */ jsxs("button", { type: "button", className: "bl-chips__more", onClick: shuffle, children: [
+      /* @__PURE__ */ jsx("svg", { width: "13", height: "13", viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M11.5 5.5A5 5 0 0 0 2.6 4.4M2.5 8.5a5 5 0 0 0 8.9 1.1M2.5 2v2.5H5M11.5 12V9.5H9" }) }),
+      moreLabel
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "bl-chips__sr", "aria-live": "polite", children: announce })
+  ] });
+}
+export {
+  SuggestionChips as default
+};

package/dist/SwipeActions.d.ts

@@ -0,0 +1,30 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface SwipeAction {
+    label: string;
+    icon?: ReactNode;
+    /** Background colour of the action. */
+    color?: string;
+    onSelect?: () => void;
+}
+export interface SwipeActionsProps {
+    children?: ReactNode;
+    /** Revealed by swiping right; the first fires on a full swipe. */
+    leftActions?: SwipeAction[];
+    /** Revealed by swiping left; the first fires on a full swipe. */
+    rightActions?: SwipeAction[];
+    /** Swiping past 60% fires the first action and slides the row away. */
+    fullSwipe?: boolean;
+    actionWidth?: number;
+    /** Name of the keyboard actions menu. */
+    label?: string;
+    radius?: number;
+    backgroundColor?: string;
+    underColor?: string;
+    textColor?: string;
+    mutedColor?: string;
+    accentColor?: string;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function SwipeActions({ children, leftActions, rightActions, fullSwipe, actionWidth, label, radius, backgroundColor, underColor, textColor, mutedColor, accentColor, fontFamily, className, style }: SwipeActionsProps): import("react").JSX.Element;

package/dist/SwipeActions.js

@@ -0,0 +1,141 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-swipe-actions";
+const CSS = `
+.bl-swipe { position: relative; overflow: hidden; border-radius: var(--bl-radius); background: var(--bl-under); font-family: var(--bl-font); color: var(--bl-ink); touch-action: pan-y; }
+.bl-swipe[data-gone] { animation: bl-swipe-collapse 260ms 200ms ease forwards; }
+.bl-swipe__side { position: absolute; top: 0; bottom: 0; display: flex; }
+.bl-swipe__side[data-side="left"] { left: 0; }
+.bl-swipe__side[data-side="right"] { right: 0; flex-direction: row-reverse; }
+.bl-swipe__action { display: grid; place-items: center; align-content: center; gap: 4px; width: var(--bl-action); padding: 0 6px; border: 0; background: var(--tone, #333c57); color: #fff; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
+.bl-swipe__action:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: -4px; }
+.bl-swipe__row { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; background: var(--bl-bg); transform: translateX(var(--x)); transition: transform 320ms cubic-bezier(.3,1.2,.5,1); cursor: grab; user-select: none; }
+.bl-swipe[data-dragging] .bl-swipe__row { transition: none; cursor: grabbing; }
+.bl-swipe[data-gone] .bl-swipe__row { transition: transform 240ms ease-in; }
+.bl-swipe__content { flex: 1; min-width: 0; }
+.bl-swipe__menu { flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin-right: 8px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--bl-muted); cursor: pointer; opacity: 0; }
+.bl-swipe:hover .bl-swipe__menu { opacity: 0.7; }
+.bl-swipe__menu:focus-visible, .bl-swipe__menu[aria-expanded="true"] { opacity: 1; outline: 2px solid var(--bl-accent); }
+.bl-swipe__list { position: absolute; z-index: 2; top: 50%; right: 48px; display: flex; gap: 6px; transform: translateY(-50%); }
+.bl-swipe__list .bl-swipe__action { width: auto; height: 32px; padding: 0 12px; border-radius: 8px; }
+@keyframes bl-swipe-collapse { to { height: 0; opacity: 0; } }
+@media (prefers-reduced-motion: reduce) { .bl-swipe__row, .bl-swipe[data-gone] .bl-swipe__row { transition: none; } .bl-swipe[data-gone] { animation: none; 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);
+  }, []);
+}
+function SwipeActions({
+  children,
+  leftActions = [],
+  rightActions = [],
+  fullSwipe = true,
+  actionWidth = 76,
+  label = "Actions",
+  radius = 12,
+  backgroundColor = "#262b44",
+  underColor = "#1a1c2c",
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  accentColor = "#73eff7",
+  fontFamily = "inherit",
+  className = "",
+  style
+}) {
+  useStyles();
+  const rootRef = useRef(null);
+  const [x, setX] = useState(0);
+  const [dragging, setDragging] = useState(false);
+  const [gone, setGone] = useState(false);
+  const [menu, setMenu] = useState(false);
+  const drag = useRef(null);
+  const leftW = leftActions.length * actionWidth;
+  const rightW = rightActions.length * actionWidth;
+  const fire = (action, slideOff) => {
+    if (slideOff) {
+      const w = rootRef.current?.offsetWidth ?? 400;
+      setX(Math.sign(x || (action === leftActions[0] ? 1 : -1)) * w);
+      setGone(true);
+    } else setX(0);
+    setMenu(false);
+    action.onSelect?.();
+  };
+  useEffect(() => {
+    if (!menu) return void 0;
+    const close = (event) => {
+      if (!rootRef.current?.contains(event.target)) setMenu(false);
+    };
+    document.addEventListener("pointerdown", close);
+    return () => document.removeEventListener("pointerdown", close);
+  }, [menu]);
+  const onPointerDown = (event) => {
+    if (event.button > 0 || gone || event.target.closest("button")) return;
+    drag.current = { start: event.clientX, from: x, moved: false };
+  };
+  const onPointerMove = (event) => {
+    const d = drag.current;
+    if (!d) return;
+    const dx = event.clientX - d.start;
+    if (!d.moved && Math.abs(dx) > 6) {
+      d.moved = true;
+      setDragging(true);
+      event.currentTarget.setPointerCapture?.(event.pointerId);
+    }
+    if (!d.moved) return;
+    const w = rootRef.current.offsetWidth;
+    const max = leftActions.length ? fullSwipe ? w : leftW : 0;
+    const min = rightActions.length ? -(fullSwipe ? w : rightW) : 0;
+    let next = d.from + dx;
+    if (next > leftW && !fullSwipe) next = leftW + (next - leftW) * 0.25;
+    if (next < -rightW && !fullSwipe) next = -rightW + (next + rightW) * 0.25;
+    setX(Math.max(min, Math.min(max, next)));
+  };
+  const onPointerUp = () => {
+    const d = drag.current;
+    drag.current = null;
+    if (!d?.moved) return;
+    setDragging(false);
+    const w = rootRef.current.offsetWidth;
+    if (fullSwipe && x > w * 0.6 && leftActions[0]) fire(leftActions[0], true);
+    else if (fullSwipe && x < -w * 0.6 && rightActions[0]) fire(rightActions[0], true);
+    else if (x > leftW / 2 && leftW) setX(leftW);
+    else if (x < -rightW / 2 && rightW) setX(-rightW);
+    else setX(0);
+  };
+  const all = [...leftActions, ...rightActions];
+  const actionButton = (action, i, tab) => /* @__PURE__ */ jsxs("button", { type: "button", className: "bl-swipe__action", tabIndex: tab, style: { "--tone": action.color }, onClick: () => fire(action, false), children: [
+    action.icon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: action.icon }),
+    action.label
+  ] }, `${action.label}-${i}`);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className: `bl-swipe ${className}`,
+      "data-dragging": dragging || void 0,
+      "data-gone": gone || void 0,
+      style: { "--x": `${x}px`, "--bl-action": `${actionWidth}px`, "--bl-radius": `${radius}px`, "--bl-bg": backgroundColor, "--bl-under": underColor, "--bl-ink": textColor, "--bl-muted": mutedColor, "--bl-accent": accentColor, "--bl-font": fontFamily, ...style },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "bl-swipe__side", "data-side": "left", "aria-hidden": "true", children: leftActions.map((a, i) => actionButton(a, i, -1)) }),
+        /* @__PURE__ */ jsx("div", { className: "bl-swipe__side", "data-side": "right", "aria-hidden": "true", children: rightActions.map((a, i) => actionButton(a, i, -1)) }),
+        /* @__PURE__ */ jsxs("div", { className: "bl-swipe__row", onPointerDown, onPointerMove, onPointerUp, onPointerCancel: onPointerUp, children: [
+          /* @__PURE__ */ jsx("div", { className: "bl-swipe__content", children }),
+          all.length > 0 && /* @__PURE__ */ jsx("button", { type: "button", className: "bl-swipe__menu", "aria-expanded": menu, "aria-label": label, onClick: () => setMenu((m) => !m), children: /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx("rect", { x: "2", y: "7", width: "3", height: "3" }),
+            /* @__PURE__ */ jsx("rect", { x: "7", y: "7", width: "3", height: "3" }),
+            /* @__PURE__ */ jsx("rect", { x: "12", y: "7", width: "3", height: "3" })
+          ] }) })
+        ] }),
+        menu && /* @__PURE__ */ jsx("div", { className: "bl-swipe__list", role: "group", "aria-label": label, children: all.map((a, i) => actionButton(a, i, 0)) })
+      ]
+    }
+  );
+}
+export {
+  SwipeActions as default
+};

package/dist/TagInput.d.ts

@@ -0,0 +1,30 @@
+import { type CSSProperties } from 'react';
+export interface TagInputProps {
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (tags: string[]) => void;
+    /** Autocomplete options. */
+    suggestions?: string[];
+    /** Allow tags that aren't in suggestions. */
+    allowCustom?: boolean;
+    max?: number;
+    /** Return false or a message to reject a tag. */
+    validate?: (tag: string) => boolean | string | void;
+    label?: string;
+    placeholder?: string;
+    hint?: string;
+    width?: number;
+    backgroundColor?: string;
+    chipColor?: string;
+    textColor?: string;
+    mutedColor?: string;
+    dimColor?: string;
+    lineColor?: string;
+    accentColor?: string;
+    errorColor?: string;
+    radius?: number;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function TagInput({ value, defaultValue, onValueChange, suggestions, allowCustom, max, validate, label, placeholder, hint, width, backgroundColor, chipColor, textColor, mutedColor, dimColor, lineColor, accentColor, errorColor, radius, fontFamily, className, style }: TagInputProps): import("react").JSX.Element;