bits-lab 0.0.0-stage → 0.1.2

package/dist/TagInput.js

@@ -0,0 +1,284 @@
+'use client';
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-tag-input";
+const CSS = `
+.bl-tags { position: relative; width: 100%; max-width: var(--bl-w); font-family: var(--bl-font); color: var(--bl-ink); }
+.bl-tags__label { display: block; margin-bottom: 6px; color: var(--bl-muted); font-size: 13px; font-weight: 600; }
+.bl-tags__field { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 44px; padding: 6px 8px; box-sizing: border-box; border-radius: var(--bl-radius); background: var(--bl-bg); box-shadow: inset 0 0 0 1px var(--bl-line); cursor: text; transition: box-shadow 150ms; }
+.bl-tags__field:focus-within { box-shadow: inset 0 0 0 2px var(--bl-accent); }
+.bl-tags__field[data-invalid] { box-shadow: inset 0 0 0 2px var(--bl-error); }
+.bl-tags__list { display: contents; margin: 0; padding: 0; list-style: none; }
+.bl-tags__chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 4px 4px 4px 10px; border-radius: 999px; background: var(--bl-chip); color: var(--bl-ink); font-size: 13px; font-weight: 600; animation: bl-tags-in 340ms cubic-bezier(.3,1.6,.5,1) both; }
+.bl-tags__chip[data-selected] { box-shadow: 0 0 0 2px var(--bl-accent); }
+.bl-tags__chip[data-leaving] { animation: bl-tags-out 180ms ease-in forwards; }
+.bl-tags__chip[data-shake] { animation: bl-tags-shake 360ms ease; }
+.bl-tags__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.bl-tags__x { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--bl-muted); cursor: pointer; }
+.bl-tags__x:hover { background: rgba(255,255,255,0.12); color: var(--bl-ink); }
+.bl-tags__x:focus-visible { outline: 2px solid var(--bl-accent); }
+.bl-tags__input { flex: 1 0 80px; min-width: 80px; height: 30px; padding: 0 4px; border: 0; background: transparent; color: inherit; font: inherit; font-size: 14px; outline: none; }
+.bl-tags__input::placeholder { color: var(--bl-dim); }
+.bl-tags__menu { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; max-height: 220px; margin: 0; padding: 5px; overflow-y: auto; border-radius: var(--bl-radius); background: var(--bl-bg); box-shadow: 0 0 0 1px var(--bl-line), 0 18px 40px -18px rgba(0,0,0,0.85); list-style: none; animation: bl-tags-menu 160ms ease-out; }
+.bl-tags__option { padding: 8px 10px; border-radius: calc(var(--bl-radius) * 0.6); font-size: 14px; cursor: pointer; }
+.bl-tags__option[aria-selected="true"] { background: var(--bl-chip); }
+.bl-tags__option mark { background: none; color: var(--bl-accent); font-weight: 700; }
+.bl-tags__hint { min-height: 1.3em; margin: 6px 0 0; color: var(--bl-dim); font-size: 12px; }
+.bl-tags__hint[data-error] { color: var(--bl-error); }
+.bl-tags__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+@keyframes bl-tags-in { from { transform: scale(0.4); opacity: 0; } }
+@keyframes bl-tags-out { to { transform: scale(0.4); opacity: 0; } }
+@keyframes bl-tags-shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
+@keyframes bl-tags-menu { from { opacity: 0; transform: translateY(-4px); } }
+@media (prefers-reduced-motion: reduce) { .bl-tags__chip, .bl-tags__chip[data-shake], .bl-tags__menu { animation: none; } .bl-tags__chip[data-leaving] { animation: bl-tags-fade 120ms forwards; } }
+@keyframes bl-tags-fade { to { opacity: 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);
+  }, []);
+}
+const SPLIT = /[,;\n\t]+/;
+function TagInput({
+  value,
+  defaultValue = [],
+  onValueChange,
+  suggestions = [],
+  allowCustom = true,
+  max = Infinity,
+  validate,
+  label = "Tags",
+  placeholder = "Add a tag\u2026",
+  hint = "Enter or comma to add. Paste a list to add many.",
+  width = 520,
+  backgroundColor = "#1a1c2c",
+  chipColor = "#333c57",
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  dimColor = "#566c86",
+  lineColor = "#333c57",
+  accentColor = "#73eff7",
+  errorColor = "#ef7d57",
+  radius = 12,
+  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 tags = value ?? inner;
+  const tagsRef = useRef(tags);
+  tagsRef.current = tags;
+  const [text, setText] = useState("");
+  const [open, setOpen] = useState(false);
+  const [highlight, setHighlight] = useState(0);
+  const [selected, setSelected] = useState(-1);
+  const [leaving, setLeaving] = useState([]);
+  const [shake, setShake] = useState(null);
+  const [error, setError] = useState("");
+  const [announce, setAnnounce] = useState("");
+  const inputRef = useRef(null);
+  const commit = (next) => {
+    if (value === void 0) setInner(next);
+    onValueChange?.(next);
+  };
+  const query = text.trim().toLowerCase();
+  const matches = suggestions.filter((s) => !tags.some((t) => t.toLowerCase() === s.toLowerCase()) && (!query || s.toLowerCase().includes(query))).slice(0, 8);
+  const showMenu = open && matches.length > 0 && (query.length > 0 || suggestions.length > 0);
+  const add = (raw) => {
+    const next = [...tags];
+    const added = [];
+    let problem = "";
+    for (const piece of raw) {
+      const tag = piece.trim();
+      if (!tag) continue;
+      const twin = next.findIndex((t) => t.toLowerCase() === tag.toLowerCase());
+      if (twin >= 0) {
+        setShake(next[twin]);
+        problem = `"${tag}" is already added.`;
+        continue;
+      }
+      if (!allowCustom && !suggestions.some((s) => s.toLowerCase() === tag.toLowerCase())) {
+        problem = `"${tag}" isn't one of the options.`;
+        continue;
+      }
+      const verdict = validate?.(tag);
+      if (verdict === false || typeof verdict === "string") {
+        problem = typeof verdict === "string" ? verdict : `"${tag}" isn't allowed.`;
+        continue;
+      }
+      if (next.length >= max) {
+        problem = `You can add up to ${max}.`;
+        break;
+      }
+      const canonical = suggestions.find((s) => s.toLowerCase() === tag.toLowerCase()) ?? tag;
+      next.push(canonical);
+      added.push(canonical);
+    }
+    if (added.length) {
+      commit(next);
+      setAnnounce(`Added ${added.join(", ")}. ${next.length} tags.`);
+    }
+    setError(problem);
+    if (problem && !added.length) setAnnounce(problem);
+    return added.length > 0;
+  };
+  const remove = (index) => {
+    const tag = tags[index];
+    if (tag === void 0) return;
+    setSelected(-1);
+    setLeaving((list) => [...list, tag]);
+    setTimeout(() => {
+      setLeaving((list) => list.filter((t) => t !== tag));
+      const next = tagsRef.current.filter((t) => t !== tag);
+      tagsRef.current = next;
+      commit(next);
+    }, window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ? 120 : 180);
+    setAnnounce(`Removed ${tag}.`);
+    setError("");
+    inputRef.current?.focus();
+  };
+  const onKeyDown = (event) => {
+    if (event.key === "ArrowDown" && matches.length) {
+      event.preventDefault();
+      setOpen(true);
+      setHighlight((h) => showMenu ? (h + 1) % matches.length : 0);
+    } else if (event.key === "ArrowUp" && showMenu) {
+      event.preventDefault();
+      setHighlight((h) => (h - 1 + matches.length) % matches.length);
+    } else if (event.key === "Enter" || event.key === ",") {
+      if (event.key === "Enter" && showMenu && matches[highlight]) {
+        event.preventDefault();
+        if (add([matches[highlight]])) setText("");
+        setHighlight(0);
+        return;
+      }
+      if (text.trim()) {
+        event.preventDefault();
+        if (add([text])) setText("");
+      } else if (event.key === ",") event.preventDefault();
+    } else if (event.key === "Escape") {
+      setOpen(false);
+      setSelected(-1);
+    } else if (event.key === "Backspace" && !text) {
+      if (selected >= 0) remove(selected);
+      else if (tags.length) setSelected(tags.length - 1);
+    } else if (event.key === "ArrowLeft" && !text && tags.length) {
+      setSelected((s) => s < 0 ? tags.length - 1 : Math.max(0, s - 1));
+    } else if (event.key === "ArrowRight" && selected >= 0) {
+      setSelected((s) => s >= tags.length - 1 ? -1 : s + 1);
+    } else {
+      setSelected(-1);
+    }
+  };
+  const onPaste = (event) => {
+    const pasted = event.clipboardData.getData("text");
+    if (!SPLIT.test(pasted)) return;
+    event.preventDefault();
+    add(pasted.split(SPLIT));
+  };
+  const mark = (option) => {
+    if (!query) return option;
+    const at = option.toLowerCase().indexOf(query);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      option.slice(0, at),
+      /* @__PURE__ */ jsx("mark", { children: option.slice(at, at + query.length) }),
+      option.slice(at + query.length)
+    ] });
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `bl-tags ${className}`,
+      style: {
+        "--bl-w": `${width}px`,
+        "--bl-bg": backgroundColor,
+        "--bl-chip": chipColor,
+        "--bl-ink": textColor,
+        "--bl-muted": mutedColor,
+        "--bl-dim": dimColor,
+        "--bl-line": lineColor,
+        "--bl-accent": accentColor,
+        "--bl-error": errorColor,
+        "--bl-radius": `${radius}px`,
+        "--bl-font": fontFamily,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx("label", { className: "bl-tags__label", htmlFor: `${uid}-input`, children: label }),
+        /* @__PURE__ */ jsxs("div", { className: "bl-tags__field", "data-invalid": error ? "" : void 0, onClick: () => inputRef.current?.focus(), children: [
+          /* @__PURE__ */ jsx("ul", { className: "bl-tags__list", "aria-label": `${label}: ${tags.length} selected`, children: tags.map((tag, i) => /* @__PURE__ */ jsxs(
+            "li",
+            {
+              className: "bl-tags__chip",
+              "data-selected": i === selected || void 0,
+              "data-leaving": leaving.includes(tag) || void 0,
+              "data-shake": shake === tag || void 0,
+              onAnimationEnd: () => shake === tag && setShake(null),
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "bl-tags__text", children: tag }),
+                /* @__PURE__ */ jsx("button", { type: "button", className: "bl-tags__x", "aria-label": `Remove ${tag}`, onClick: () => remove(i), children: /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M2 2l6 6M8 2 2 8" }) }) })
+              ]
+            },
+            tag
+          )) }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              id: `${uid}-input`,
+              className: "bl-tags__input",
+              role: "combobox",
+              "aria-expanded": showMenu,
+              "aria-controls": `${uid}-menu`,
+              "aria-autocomplete": "list",
+              "aria-activedescendant": showMenu ? `${uid}-opt-${highlight}` : void 0,
+              "aria-describedby": `${uid}-hint`,
+              "aria-invalid": error ? true : void 0,
+              value: text,
+              placeholder: tags.length >= max ? "" : placeholder,
+              onChange: (event) => {
+                setText(event.target.value);
+                setOpen(true);
+                setHighlight(0);
+                setError("");
+              },
+              onFocus: () => setOpen(true),
+              onBlur: () => {
+                setOpen(false);
+                setSelected(-1);
+              },
+              onKeyDown,
+              onPaste
+            }
+          )
+        ] }),
+        showMenu && /* @__PURE__ */ jsx("ul", { id: `${uid}-menu`, className: "bl-tags__menu", role: "listbox", "aria-label": `${label} suggestions`, children: matches.map((option, i) => /* @__PURE__ */ jsx(
+          "li",
+          {
+            id: `${uid}-opt-${i}`,
+            role: "option",
+            "aria-selected": i === highlight,
+            className: "bl-tags__option",
+            onPointerEnter: () => setHighlight(i),
+            onPointerDown: (event) => {
+              event.preventDefault();
+              if (add([option])) setText("");
+            },
+            children: mark(option)
+          },
+          option
+        )) }),
+        /* @__PURE__ */ jsx("p", { id: `${uid}-hint`, className: "bl-tags__hint", "data-error": error ? "" : void 0, children: error || hint }),
+        /* @__PURE__ */ jsx("span", { className: "bl-tags__sr", "aria-live": "polite", children: announce })
+      ]
+    }
+  );
+}
+export {
+  TagInput as default
+};

package/dist/TallyUp.d.ts

@@ -0,0 +1,38 @@
+import { type CSSProperties } from 'react';
+export interface TallyUpProps {
+    /** Where the count ends. */
+    value?: number;
+    /** The bar fills toward this; defaults to value. */
+    goal?: number;
+    start?: number;
+    /** In ms. */
+    duration?: number;
+    /** A smooth ease-out, or an arcade count in chunky steps. */
+    curve?: 'ease' | 'steps';
+    steps?: number;
+    /** Pixel blocks in the bar. */
+    blocks?: number;
+    /** Notches that flash as the count passes them. */
+    milestones?: number[];
+    trigger?: 'view' | 'mount';
+    locale?: string;
+    format?: Intl.NumberFormatOptions;
+    unit?: string;
+    caption?: string;
+    /** Show "of {goal}" under the bar (when goal is set). */
+    showGoal?: boolean;
+    onReach?: (value: number) => void;
+    width?: number;
+    fontSize?: number;
+    barHeight?: number;
+    gap?: number;
+    textColor?: string;
+    mutedColor?: string;
+    trackColor?: string;
+    fillColor?: string;
+    accentColor?: string;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function TallyUp({ value, goal, start, duration, curve, steps, blocks, milestones, trigger, locale, format, unit, caption, showGoal, onReach, width, fontSize, barHeight, gap, textColor, mutedColor, trackColor, fillColor, accentColor, fontFamily, className, style }: TallyUpProps): import("react").JSX.Element;

package/dist/TallyUp.js

@@ -0,0 +1,157 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-tally-up";
+const CSS = `
+.bl-tally { display: grid; gap: 10px; width: 100%; max-width: var(--bl-w); font-family: var(--bl-font); color: var(--bl-ink); }
+.bl-tally__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
+.bl-tally__caption { color: var(--bl-muted); font-size: 14px; }
+.bl-tally__figure { display: inline-flex; align-items: baseline; gap: 6px; font-size: var(--bl-size); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
+.bl-tally__figure[data-bump] { animation: bl-tally-bump 160ms steps(2); }
+.bl-tally__unit { color: var(--bl-muted); font-size: 0.45em; font-weight: 600; }
+.bl-tally__bar { position: relative; display: grid; grid-template-columns: repeat(var(--bl-blocks), minmax(0, 1fr)); gap: var(--bl-gap); height: var(--bl-bar-h); }
+.bl-tally__block { background: var(--bl-track); transition: background-color 120ms steps(1); }
+.bl-tally__block[data-on] { background: var(--bl-fill); box-shadow: inset 0 -3px 0 rgba(0,0,0,0.25); }
+.bl-tally__bar[data-done] .bl-tally__block[data-on] { animation: bl-tally-flash 600ms steps(3); }
+.bl-tally__notch { position: absolute; top: -5px; bottom: -5px; left: var(--x); width: 2px; margin-left: -1px; background: var(--bl-muted); opacity: 0.6; }
+.bl-tally__notch[data-passed] { background: var(--bl-accent); opacity: 1; animation: bl-tally-notch 500ms steps(4); }
+.bl-tally__goal { color: var(--bl-muted); font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
+.bl-tally__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+@keyframes bl-tally-bump { 50% { transform: translateY(-3px); } }
+@keyframes bl-tally-flash { 33% { background: var(--bl-accent); } }
+@keyframes bl-tally-notch { 50% { transform: scaleY(1.6); } }
+@media (prefers-reduced-motion: reduce) { .bl-tally__figure[data-bump], .bl-tally__bar[data-done] .bl-tally__block[data-on], .bl-tally__notch[data-passed] { animation: none; } .bl-tally__block { 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 TallyUp({
+  value = 0,
+  goal,
+  start = 0,
+  duration = 1600,
+  curve = "ease",
+  steps = 12,
+  blocks = 20,
+  milestones = [],
+  trigger = "view",
+  locale,
+  format,
+  unit = "",
+  caption = "",
+  showGoal = true,
+  onReach,
+  width = 420,
+  fontSize = 48,
+  barHeight = 14,
+  gap = 3,
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  trackColor = "#262b44",
+  fillColor = "#38b764",
+  accentColor = "#ffcd75",
+  fontFamily = "inherit",
+  className = "",
+  style
+}) {
+  useStyles();
+  const rootRef = useRef(null);
+  const figureRef = useRef(null);
+  const reachRef = useRef(onReach);
+  reachRef.current = onReach;
+  const [shown, setShown] = useState(start);
+  const [done, setDone] = useState(false);
+  const target = goal ?? value;
+  const fmt = new Intl.NumberFormat(locale, format);
+  useEffect(() => {
+    const root = rootRef.current;
+    const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    let raf = 0;
+    let begun = 0;
+    let lastStep = -1;
+    setDone(false);
+    const finish = () => {
+      setShown(value);
+      setDone(true);
+      reachRef.current?.(value);
+    };
+    const tick = (now) => {
+      if (!begun) begun = now;
+      const t = Math.min(1, (now - begun) / duration);
+      let k;
+      if (curve === "steps") {
+        const step = Math.min(steps, Math.floor(t * steps + 1e-9));
+        k = step / steps;
+        if (step !== lastStep) {
+          lastStep = step;
+          const figure = figureRef.current;
+          if (figure && step > 0) {
+            delete figure.dataset.bump;
+            void figure.offsetWidth;
+            figure.dataset.bump = "";
+          }
+        }
+      } else k = 1 - Math.pow(1 - t, 3);
+      setShown(start + (value - start) * k);
+      if (t < 1) raf = requestAnimationFrame(tick);
+      else finish();
+    };
+    const run = () => {
+      if (reduced) finish();
+      else raf = requestAnimationFrame(tick);
+    };
+    if (trigger === "mount") {
+      run();
+      return () => cancelAnimationFrame(raf);
+    }
+    const observer = new IntersectionObserver(([entry]) => {
+      if (!entry.isIntersecting) return;
+      observer.disconnect();
+      run();
+    }, { threshold: 0.4 });
+    observer.observe(root);
+    return () => {
+      observer.disconnect();
+      cancelAnimationFrame(raf);
+    };
+  }, [value, start, duration, curve, steps, trigger]);
+  const decimals = format?.maximumFractionDigits ?? format?.minimumFractionDigits ?? 0;
+  const display = fmt.format(Number(shown.toFixed(decimals)));
+  const share = target ? Math.max(0, Math.min(1, shown / target)) : 0;
+  const lit = Math.round(share * blocks);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className: `bl-tally ${className}`,
+      style: { "--bl-w": `${width}px`, "--bl-size": `${fontSize}px`, "--bl-bar-h": `${barHeight}px`, "--bl-gap": `${gap}px`, "--bl-blocks": blocks, "--bl-ink": textColor, "--bl-muted": mutedColor, "--bl-track": trackColor, "--bl-fill": fillColor, "--bl-accent": accentColor, "--bl-font": fontFamily, ...style },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "bl-tally__head", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsxs("span", { ref: figureRef, className: "bl-tally__figure", children: [
+            display,
+            unit && /* @__PURE__ */ jsx("span", { className: "bl-tally__unit", children: unit })
+          ] }),
+          caption && /* @__PURE__ */ jsx("span", { className: "bl-tally__caption", children: caption })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "bl-tally__bar", "data-done": done || void 0, "aria-hidden": "true", children: [
+          Array.from({ length: blocks }, (_, i) => /* @__PURE__ */ jsx("span", { className: "bl-tally__block", "data-on": i < lit || void 0 }, i)),
+          target > 0 && milestones.filter((m) => m > 0 && m < target).map((m) => /* @__PURE__ */ jsx("span", { className: "bl-tally__notch", "data-passed": shown >= m || void 0, style: { "--x": `${m / target * 100}%` } }, m))
+        ] }),
+        showGoal && goal != null && /* @__PURE__ */ jsxs("span", { className: "bl-tally__goal", "aria-hidden": "true", children: [
+          "of ",
+          fmt.format(goal),
+          unit && ` ${unit}`
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "bl-tally__sr", role: "status", children: done ? `${caption ? `${caption}: ` : ""}${fmt.format(value)}${unit ? ` ${unit}` : ""}${goal != null ? ` of ${fmt.format(goal)}` : ""}` : "" })
+      ]
+    }
+  );
+}
+export {
+  TallyUp as default
+};

package/dist/TerminalDemo.d.ts

@@ -0,0 +1,63 @@
+import { type CSSProperties } from 'react';
+/** One step of the scripted session. `after` is the pause after the step, in ms. */
+export type TerminalStep = {
+    type: 'command';
+    text: string;
+    prompt?: string; /** Pause before typing starts, in ms. */
+    delay?: number;
+    after?: number;
+} | {
+    type: 'output' | 'success' | 'error' | 'info';
+    text: string;
+    after?: number;
+} | {
+    type: 'spinner';
+    text: string;
+    duration?: number; /** Text shown when the spinner resolves. */
+    done?: string; /** Resolve as an error instead of success. */
+    failed?: boolean;
+    after?: number;
+} | {
+    type: 'pause';
+    duration?: number;
+    after?: number;
+};
+export interface TerminalDemoProps {
+    /** The session, in order. */
+    script?: TerminalStep[];
+    /** Window title. */
+    title?: string;
+    /** Prompt symbol (each command can override it). */
+    prompt?: string;
+    /** Average ms per typed character (with jitter). */
+    typingSpeed?: number;
+    /** Default gap after each step, in ms. */
+    lineDelay?: number;
+    /** Replay forever. When not looping, a Replay button appears at the end. */
+    loop?: boolean;
+    /** Pause before looping, in ms. */
+    loopDelay?: number;
+    /** Wait until a third of the terminal is visible. */
+    startOnView?: boolean;
+    /** Show the Replay button. */
+    showControls?: boolean;
+    /** Max width, in px. */
+    width?: number;
+    /** Body height, in px. */
+    height?: number;
+    radius?: number;
+    fontSize?: number;
+    fontFamily?: string;
+    background?: string;
+    barColor?: string;
+    lineColor?: string;
+    textColor?: string;
+    mutedColor?: string;
+    promptColor?: string;
+    successColor?: string;
+    errorColor?: string;
+    infoColor?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function TerminalDemo({ script, title, prompt, typingSpeed, lineDelay, loop, loopDelay, startOnView, showControls, width, height, radius, fontSize, fontFamily, background, barColor, lineColor, textColor, mutedColor, promptColor, successColor, errorColor, infoColor, className, style }: TerminalDemoProps): import("react").JSX.Element;