bits-lab 0.0.0-stage → 0.1.0

package/dist/StickyReveal.js

@@ -0,0 +1,181 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-sticky-reveal";
+const CSS = `
+.bl-sreveal-wrap { container-type: inline-size; width: 100%; }
+.bl-sreveal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--bl-gap); color: var(--bl-ink); font-family: var(--bl-font); }
+.bl-sreveal[data-side="left"] .bl-sreveal__media { order: -1; }
+.bl-sreveal__text { display: flex; flex-direction: column; }
+.bl-sreveal__section { min-height: var(--bl-section); display: flex; flex-direction: column; justify-content: center; padding: 24px 0; opacity: 0.35; transition: opacity 400ms; }
+.bl-sreveal__section[data-active] { opacity: 1; }
+.bl-sreveal__index { color: var(--bl-accent); font-size: 12px; letter-spacing: 0.12em; margin-bottom: 10px; font-family: var(--bl-font-label); }
+.bl-sreveal__title { margin: 0 0 12px; font-size: var(--bl-title-size); font-weight: 700; line-height: 1.25; font-family: var(--bl-font-title); }
+.bl-sreveal__body { margin: 0; color: var(--bl-muted); line-height: 1.6; }
+.bl-sreveal__inline { display: none; }
+.bl-sreveal__media { position: relative; }
+.bl-sreveal__sticky { position: sticky; top: var(--bl-top); height: var(--bl-stage); }
+.bl-sreveal__frame { position: relative; height: 100%; overflow: hidden; border-radius: var(--bl-radius); background: var(--bl-stage-bg); box-shadow: inset 0 0 0 1px var(--bl-line); }
+.bl-sreveal__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 600ms ease, transform 800ms cubic-bezier(.2,.8,.2,1), clip-path 700ms cubic-bezier(.7,0,.2,1); }
+.bl-sreveal__slide > img, .bl-sreveal__slide > video, .bl-sreveal__inline > img, .bl-sreveal__inline > video { display: block; width: 100%; height: 100%; object-fit: cover; }
+.bl-sreveal__slide[data-active] { opacity: 1; transform: none; }
+.bl-sreveal[data-effect="zoom"] .bl-sreveal__slide { transform: scale(1.12); }
+.bl-sreveal[data-effect="slide"] .bl-sreveal__slide { opacity: 1; clip-path: inset(100% 0 0 0); }
+.bl-sreveal[data-effect="slide"] .bl-sreveal__slide[data-before] { clip-path: inset(0 0 0 0); }
+.bl-sreveal[data-effect="slide"] .bl-sreveal__slide[data-active] { clip-path: inset(0 0 0 0); z-index: 1; }
+.bl-sreveal__dots { position: absolute; right: 14px; top: 50%; z-index: 2; display: grid; gap: 8px; transform: translateY(-50%); }
+.bl-sreveal__dot { width: 8px; height: 8px; border-radius: var(--bl-dot-radius); background: rgba(255,255,255,0.35); transition: background-color 200ms, transform 200ms; }
+.bl-sreveal__dot[data-active] { background: var(--bl-accent); transform: scale(1.4); }
+@container (max-width: 640px) {
+  .bl-sreveal { grid-template-columns: minmax(0, 1fr); }
+  .bl-sreveal__media { display: none; }
+  .bl-sreveal__section { min-height: 0; opacity: 1; padding: 20px 0 28px; }
+  .bl-sreveal__inline { display: block; aspect-ratio: 4 / 3; margin-bottom: 16px; overflow: hidden; border-radius: var(--bl-radius); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .bl-sreveal__slide, .bl-sreveal__section { transition: none; }
+  .bl-sreveal[data-effect] .bl-sreveal__slide { transform: none; clip-path: none; }
+  .bl-sreveal[data-effect] .bl-sreveal__slide:not([data-active]) { 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);
+  }, []);
+}
+function scrollParent(node) {
+  for (let el = node?.parentElement; el; el = el.parentElement) {
+    if (/(auto|scroll|overlay)/.test(getComputedStyle(el).overflowY) && el.scrollHeight > el.clientHeight) return el;
+  }
+  return window;
+}
+function StickyReveal({
+  sections = [],
+  effect = "fade",
+  mediaSide = "right",
+  sectionHeight = "80vh",
+  stageHeight = "70vh",
+  stickyTop = "15vh",
+  activeLine = 0.5,
+  onChange,
+  showDots = true,
+  gap = 48,
+  radius = 16,
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  accentColor = "#ffcd75",
+  stageColor = "#1a1c2c",
+  lineColor = "rgba(255,255,255,0.08)",
+  titleSize = 26,
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  titleFontFamily,
+  labelFontFamily,
+  className = "",
+  style
+}) {
+  useStyles();
+  const rootRef = useRef(null);
+  const sectionRefs = useRef([]);
+  const [active, setActive] = useState(0);
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  useEffect(() => {
+    const scroller = scrollParent(rootRef.current);
+    let frame = 0;
+    let current = -1;
+    const update = () => {
+      frame = 0;
+      const viewTop = scroller === window ? 0 : scroller.getBoundingClientRect().top;
+      const viewHeight = scroller === window ? window.innerHeight : scroller.clientHeight;
+      const line = viewTop + viewHeight * activeLine;
+      let next = 0;
+      sectionRefs.current.forEach((node, index) => {
+        if (node && node.getBoundingClientRect().top <= line) next = index;
+      });
+      if (next !== current) {
+        current = next;
+        setActive(next);
+        onChangeRef.current?.(next);
+      }
+    };
+    const schedule = () => {
+      if (!frame) frame = requestAnimationFrame(update);
+    };
+    update();
+    scroller.addEventListener("scroll", schedule, { passive: true });
+    window.addEventListener("resize", schedule);
+    return () => {
+      cancelAnimationFrame(frame);
+      scroller.removeEventListener("scroll", schedule);
+      window.removeEventListener("resize", schedule);
+    };
+  }, [activeLine, sections.length]);
+  return /* @__PURE__ */ jsx("div", { className: `bl-sreveal-wrap ${className}`, style, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className: "bl-sreveal",
+      "data-effect": effect,
+      "data-side": mediaSide,
+      style: {
+        "--bl-gap": `${gap}px`,
+        "--bl-section": sectionHeight,
+        "--bl-stage": stageHeight,
+        "--bl-top": stickyTop,
+        "--bl-radius": `${radius}px`,
+        "--bl-dot-radius": radius ? "50%" : "0",
+        "--bl-ink": textColor,
+        "--bl-muted": mutedColor,
+        "--bl-accent": accentColor,
+        "--bl-stage-bg": stageColor,
+        "--bl-line": lineColor,
+        "--bl-title-size": `${titleSize}px`,
+        "--bl-font": fontFamily,
+        "--bl-font-title": titleFontFamily ?? fontFamily,
+        "--bl-font-label": labelFontFamily ?? fontFamily
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "bl-sreveal__text", children: sections.map((section, index) => /* @__PURE__ */ jsxs(
+          "section",
+          {
+            ref: (node) => {
+              sectionRefs.current[index] = node;
+            },
+            className: "bl-sreveal__section",
+            "data-active": index === active ? "" : void 0,
+            children: [
+              section.media && /* @__PURE__ */ jsx("div", { className: "bl-sreveal__inline", "aria-hidden": "true", children: section.media }),
+              /* @__PURE__ */ jsxs("div", { className: "bl-sreveal__index", children: [
+                String(index + 1).padStart(2, "0"),
+                " / ",
+                String(sections.length).padStart(2, "0")
+              ] }),
+              section.title && /* @__PURE__ */ jsx("h3", { className: "bl-sreveal__title", children: section.title }),
+              typeof section.body === "string" ? /* @__PURE__ */ jsx("p", { className: "bl-sreveal__body", children: section.body }) : section.body
+            ]
+          },
+          section.id ?? index
+        )) }),
+        /* @__PURE__ */ jsx("div", { className: "bl-sreveal__media", "aria-hidden": "true", children: /* @__PURE__ */ jsx("div", { className: "bl-sreveal__sticky", children: /* @__PURE__ */ jsxs("div", { className: "bl-sreveal__frame", children: [
+          sections.map((section, index) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "bl-sreveal__slide",
+              "data-active": index === active ? "" : void 0,
+              "data-before": index < active ? "" : void 0,
+              children: section.media
+            },
+            section.id ?? index
+          )),
+          showDots && sections.length > 1 && /* @__PURE__ */ jsx("div", { className: "bl-sreveal__dots", children: sections.map((section, index) => /* @__PURE__ */ jsx("span", { className: "bl-sreveal__dot", "data-active": index === active ? "" : void 0 }, section.id ?? index)) })
+        ] }) }) })
+      ]
+    }
+  ) });
+}
+export {
+  StickyReveal as default
+};

package/dist/StoryViewer.d.ts

@@ -0,0 +1,36 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface StorySlide {
+    /** An image or video URL. */
+    src?: string;
+    type?: 'image' | 'video';
+    /** Any content instead of src. */
+    content?: ReactNode;
+    alt?: string;
+    caption?: ReactNode;
+    /** Overrides the default slide time (videos use their own length). */
+    duration?: number;
+    style?: CSSProperties;
+}
+export interface StoryViewerProps {
+    slides?: StorySlide[];
+    author?: string;
+    avatar?: ReactNode;
+    timestamp?: string;
+    /** Default slide time in ms. */
+    duration?: number;
+    loop?: boolean;
+    startAt?: number;
+    onChange?: (index: number) => void;
+    onEnd?: () => void;
+    /** Press length (ms) that counts as hold-to-pause rather than a tap. */
+    holdDelay?: number;
+    width?: number;
+    radius?: number;
+    backgroundColor?: string;
+    accentColor?: string;
+    fontFamily?: string;
+    label?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function StoryViewer({ slides, author, avatar, timestamp, duration, loop, startAt, onChange, onEnd, holdDelay, width, radius, backgroundColor, accentColor, fontFamily, label, className, style }: StoryViewerProps): import("react").JSX.Element;

package/dist/StoryViewer.js

@@ -0,0 +1,175 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-story-viewer";
+const CSS = `
+.bl-story { position: relative; width: var(--bl-w); max-width: 100%; aspect-ratio: 9 / 16; overflow: hidden; border-radius: var(--bl-radius); background: var(--bl-bg); color: #fff; font-family: var(--bl-font); user-select: none; -webkit-user-select: none; touch-action: manipulation; outline: none; }
+.bl-story:focus-visible { box-shadow: 0 0 0 3px var(--bl-accent); }
+.bl-story__slide { position: absolute; inset: 0; display: grid; place-items: center; animation: bl-story-in 260ms ease both; }
+.bl-story__slide > img, .bl-story__slide > video { width: 100%; height: 100%; object-fit: cover; }
+.bl-story__shade { position: absolute; inset: 0 0 auto; height: 120px; background: linear-gradient(rgba(0,0,0,0.55), transparent); pointer-events: none; }
+.bl-story__bars { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 2; display: flex; gap: 4px; }
+.bl-story__bar { flex: 1; height: 3px; overflow: hidden; border-radius: 3px; background: rgba(255,255,255,0.35); }
+.bl-story__bar i { display: block; height: 100%; width: 100%; background: #fff; transform-origin: left; transform: scaleX(var(--p, 0)); }
+.bl-story__head { position: absolute; top: 22px; left: 12px; right: 12px; z-index: 2; display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
+.bl-story__avatar { display: grid; place-items: center; width: 32px; height: 32px; overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 2px #fff; }
+.bl-story__avatar img { width: 100%; height: 100%; object-fit: cover; }
+.bl-story__time { color: rgba(255,255,255,0.75); font-weight: 400; }
+.bl-story__pause { margin-left: auto; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: rgba(0,0,0,0.25); color: #fff; cursor: pointer; }
+.bl-story__pause:focus-visible { outline: 2px solid #fff; }
+.bl-story__caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 40px 16px 18px; background: linear-gradient(transparent, rgba(0,0,0,0.65)); font-size: 15px; line-height: 1.45; text-shadow: 0 1px 3px rgba(0,0,0,0.5); pointer-events: none; }
+.bl-story__zones { position: absolute; inset: 0; z-index: 1; display: grid; grid-template-columns: 1fr 2fr; }
+.bl-story__zones > span { cursor: pointer; }
+.bl-story[data-held] .bl-story__head, .bl-story[data-held] .bl-story__bars, .bl-story[data-held] .bl-story__caption { opacity: 0; transition: opacity 200ms; }
+.bl-story__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+@keyframes bl-story-in { from { opacity: 0.4; transform: scale(1.02); } }
+@media (prefers-reduced-motion: reduce) { .bl-story__slide { 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 StoryViewer({
+  slides = [],
+  author,
+  avatar,
+  timestamp,
+  duration = 5e3,
+  loop = false,
+  startAt = 0,
+  onChange,
+  onEnd,
+  holdDelay = 180,
+  width = 320,
+  radius = 20,
+  backgroundColor = "#0b0b14",
+  accentColor = "#73eff7",
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  label = "Story",
+  className = "",
+  style
+}) {
+  useStyles();
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const [index, setIndex] = useState(startAt);
+  const [paused, setPaused] = useState(false);
+  const [held, setHeld] = useState(false);
+  const [ended, setEnded] = useState(false);
+  const barsRef = useRef(null);
+  const videoRef = useRef(null);
+  const progress = useRef(0);
+  const holdTimer = useRef(0);
+  const holding = useRef(false);
+  const indexRef = useRef(index);
+  indexRef.current = index;
+  const slide = slides[index];
+  const total = slides.length;
+  const go = (next) => {
+    if (next < 0) next = 0;
+    if (next >= total) {
+      if (loop) next = 0;
+      else {
+        setEnded(true);
+        onEnd?.();
+        return;
+      }
+    }
+    progress.current = 0;
+    indexRef.current = next;
+    setEnded(false);
+    setIndex(next);
+    onChange?.(next);
+  };
+  useEffect(() => {
+    const bars = barsRef.current?.children;
+    if (!bars) return void 0;
+    [...bars].forEach((bar2, i) => bar2.firstElementChild?.style.setProperty("--p", i < index ? "1" : i > index ? "0" : String(progress.current)));
+    if (ended) return void 0;
+    const bar = bars[index]?.firstElementChild;
+    const length = slide?.duration ?? duration;
+    let frame = 0;
+    let last = performance.now();
+    const tick = (now) => {
+      const dt = now - last;
+      last = now;
+      const video = videoRef.current;
+      if (!paused && !held && !document.hidden) {
+        progress.current = video && video.duration ? video.currentTime / video.duration : Math.min(1, progress.current + dt / length);
+      }
+      bar?.style.setProperty("--p", String(progress.current));
+      if (progress.current >= 1) go(index + 1);
+      else frame = requestAnimationFrame(tick);
+    };
+    frame = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(frame);
+  }, [index, paused, held, ended, duration, total]);
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    if (paused || held) video.pause();
+    else video.play?.().catch(() => {
+    });
+  }, [paused, held, index]);
+  const onPointerDown = () => {
+    clearTimeout(holdTimer.current);
+    holding.current = false;
+    holdTimer.current = setTimeout(() => {
+      holding.current = true;
+      setHeld(true);
+    }, holdDelay);
+  };
+  const onPointerUp = (direction) => {
+    clearTimeout(holdTimer.current);
+    if (holding.current) {
+      holding.current = false;
+      setHeld(false);
+      return;
+    }
+    go(indexRef.current + direction);
+  };
+  const onKeyDown = (event) => {
+    if (event.key === "ArrowRight") go(indexRef.current + 1);
+    else if (event.key === "ArrowLeft") go(indexRef.current - 1);
+    else if (event.key === " ") setPaused((p) => !p);
+    else return;
+    event.preventDefault();
+  };
+  useEffect(() => () => clearTimeout(holdTimer.current), []);
+  const media = slide?.src ? slide.type === "video" || /\.(mp4|webm|mov)$/i.test(slide.src) ? /* @__PURE__ */ jsx("video", { ref: videoRef, src: slide.src, muted: true, playsInline: true, autoPlay: true, "aria-label": slide.alt ?? "" }) : /* @__PURE__ */ jsx("img", { src: slide.src, alt: slide.alt ?? "", draggable: false, style: slide.style }) : slide?.content;
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: `bl-story ${className}`,
+      "aria-roledescription": "story",
+      "aria-label": author ? `${label} by ${author}` : label,
+      tabIndex: 0,
+      onKeyDown,
+      "data-held": held || void 0,
+      style: { "--bl-w": `${width}px`, "--bl-radius": `${radius}px`, "--bl-bg": backgroundColor, "--bl-accent": accentColor, "--bl-font": fontFamily, ...style },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "bl-story__slide", children: media }, index),
+        /* @__PURE__ */ jsx("div", { className: "bl-story__shade", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("div", { ref: barsRef, className: "bl-story__bars", "aria-hidden": "true", children: slides.map((_, i) => /* @__PURE__ */ jsx("span", { className: "bl-story__bar", children: /* @__PURE__ */ jsx("i", {}) }, i)) }),
+        /* @__PURE__ */ jsxs("div", { className: "bl-story__zones", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx("span", { onPointerDown, onPointerUp: () => onPointerUp(-1), onPointerLeave: () => holding.current && onPointerUp(0) }),
+          /* @__PURE__ */ jsx("span", { onPointerDown, onPointerUp: () => onPointerUp(1), onPointerLeave: () => holding.current && onPointerUp(0) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "bl-story__head", children: [
+          avatar && /* @__PURE__ */ jsx("span", { className: "bl-story__avatar", "aria-hidden": "true", children: typeof avatar === "string" ? /* @__PURE__ */ jsx("img", { src: avatar, alt: "" }) : avatar }),
+          author && /* @__PURE__ */ jsx("span", { children: author }),
+          timestamp && /* @__PURE__ */ jsx("span", { className: "bl-story__time", children: timestamp }),
+          /* @__PURE__ */ jsx("button", { type: "button", className: "bl-story__pause", "aria-label": paused ? "Play story" : "Pause story", onClick: () => setPaused((p) => !p), children: /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "currentColor", "aria-hidden": "true", children: paused ? /* @__PURE__ */ jsx("path", { d: "M3 1.5v9l7.5-4.5z" }) : /* @__PURE__ */ jsx("path", { d: "M2.5 1.5h2.5v9H2.5zM7 1.5h2.5v9H7z" }) }) })
+        ] }),
+        slide?.caption && /* @__PURE__ */ jsx("div", { className: "bl-story__caption", children: slide.caption }),
+        /* @__PURE__ */ jsx("p", { className: "bl-story__sr", "aria-live": "polite", id: `${uid}-status`, children: ended ? "End of story." : `Slide ${index + 1} of ${total}${slide?.alt ? `: ${slide.alt}` : ""}${slide?.caption && typeof slide.caption === "string" ? `. ${slide.caption}` : ""}` })
+      ]
+    }
+  );
+}
+export {
+  StoryViewer as default
+};

package/dist/StreamingText.d.ts

@@ -0,0 +1,29 @@
+import { type CSSProperties } from 'react';
+export interface StreamingTextProps {
+    /** Full text to stream word by word at `speed`. */
+    text?: string;
+    /** A real token stream; chunks appear as they arrive. */
+    stream?: AsyncIterable<string>;
+    /** Characters per second when streaming `text`. */
+    speed?: number;
+    /** Render the markdown subset. */
+    markdown?: boolean;
+    showCursor?: boolean;
+    /** Fade-in length of new chunks, in ms. */
+    fadeDuration?: number;
+    /** How many recent chunks are still fading. */
+    tail?: number;
+    onDone?: () => void;
+    fontSize?: number;
+    textColor?: string;
+    mutedColor?: string;
+    lineColor?: string;
+    codeBackground?: string;
+    accentColor?: string;
+    cursorColor?: string;
+    fontFamily?: string;
+    monoFontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function StreamingText({ text, stream, speed, markdown, showCursor, fadeDuration, tail, onDone, fontSize, textColor, mutedColor, lineColor, codeBackground, accentColor, cursorColor, fontFamily, monoFontFamily, className, style }: StreamingTextProps): import("react").JSX.Element;