bits-lab 0.0.0-stage → 0.1.0

package/dist/DateRange.d.ts

@@ -0,0 +1,45 @@
+import { type CSSProperties } from 'react';
+export interface DateRangeValue {
+    start: Date | null;
+    end: Date | null;
+}
+export interface DatePreset {
+    label: string;
+    range: () => {
+        start: Date;
+        end: Date;
+    };
+}
+export interface DateRangeProps {
+    value?: DateRangeValue;
+    defaultValue?: DateRangeValue;
+    onValueChange?: (range: DateRangeValue) => void;
+    presets?: DatePreset[];
+    /** Months side by side (one on narrow screens). */
+    months?: number;
+    minDate?: Date;
+    maxDate?: Date;
+    /** 0 = Sunday, 1 = Monday. */
+    weekStartsOn?: number;
+    /** Intl locale for month and weekday names. */
+    locale?: string;
+    label?: string;
+    cellSize?: number;
+    /** Container width (px) below which one month shows. */
+    narrowAt?: number;
+    backgroundColor?: string;
+    textColor?: string;
+    mutedColor?: string;
+    dimColor?: string;
+    hoverColor?: string;
+    lineColor?: string;
+    accentColor?: string;
+    onAccentColor?: string;
+    bandColor?: string;
+    radius?: number;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare const DEFAULT_PRESETS: DatePreset[];
+export default function DateRange({ value, defaultValue, onValueChange, presets, months, minDate, maxDate, weekStartsOn, locale, label, cellSize, narrowAt, backgroundColor, textColor, mutedColor, dimColor, hoverColor, lineColor, accentColor, onAccentColor, bandColor, radius, fontFamily, className, style }: DateRangeProps): import("react").JSX.Element;

package/dist/DateRange.js

@@ -0,0 +1,327 @@
+'use client';
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useInsertionEffect, useLayoutEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-date-range";
+const CSS = `
+.bl-dr { display: flex; gap: 18px; width: fit-content; max-width: 100%; box-sizing: border-box; padding: 16px; border-radius: var(--bl-radius); background: var(--bl-bg); color: var(--bl-ink); font-family: var(--bl-font); box-shadow: 0 0 0 1px var(--bl-line), 0 24px 50px -28px rgba(0,0,0,0.85); }
+.bl-dr[data-narrow] { flex-direction: column; }
+.bl-dr__presets { display: flex; flex-direction: column; gap: 2px; min-width: 130px; padding-right: 16px; box-shadow: 1px 0 0 var(--bl-line); }
+.bl-dr[data-narrow] .bl-dr__presets { flex-direction: row; flex-wrap: wrap; min-width: 0; padding: 0 0 12px; box-shadow: 0 1px 0 var(--bl-line); }
+.bl-dr__preset { padding: 7px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--bl-muted); font: inherit; font-size: 13px; text-align: left; white-space: nowrap; cursor: pointer; }
+.bl-dr__preset:hover, .bl-dr__preset[aria-pressed="true"] { background: var(--bl-hover); color: var(--bl-ink); }
+.bl-dr__preset:focus-visible, .bl-dr__nav:focus-visible, .bl-dr__clear:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 1px; }
+.bl-dr__main { min-width: 0; }
+.bl-dr__head { position: relative; display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
+.bl-dr__nav { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--bl-muted); cursor: pointer; }
+.bl-dr__nav:hover { background: var(--bl-hover); color: var(--bl-ink); }
+.bl-dr__months { display: flex; gap: 24px; }
+.bl-dr__month { flex: 0 0 auto; animation: bl-dr-slide 320ms cubic-bezier(.2,.9,.25,1) both; }
+.bl-dr__title { height: 32px; margin: -42px 0 10px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; pointer-events: none; }
+.bl-dr__grid { border-collapse: collapse; }
+.bl-dr__grid th { width: var(--bl-cell); height: 28px; padding: 0; color: var(--bl-dim); font-size: 11px; font-weight: 600; text-transform: uppercase; }
+.bl-dr__grid td { position: relative; width: var(--bl-cell); height: var(--bl-cell); padding: 0; text-align: center; }
+.bl-dr__grid td[data-band]::before { content: ""; position: absolute; inset: 3px 0; background: var(--bl-band); }
+.bl-dr__grid td[data-band="start"]::before { left: 50%; }
+.bl-dr__grid td[data-band="end"]::before { right: 50%; }
+.bl-dr__grid td[data-band="solo"]::before { display: none; }
+.bl-dr__grid td[data-preview]::before { background: color-mix(in srgb, var(--bl-band) 55%, transparent); }
+.bl-dr__day { position: relative; z-index: 1; width: calc(var(--bl-cell) - 4px); height: calc(var(--bl-cell) - 4px); padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color 120ms, transform 160ms cubic-bezier(.3,1.6,.5,1); }
+.bl-dr__day:hover:not(:disabled) { background: var(--bl-hover); }
+.bl-dr__day[data-today] { box-shadow: inset 0 0 0 1px var(--bl-dim); }
+.bl-dr__day[data-edge] { background: var(--bl-accent); color: var(--bl-on-accent); font-weight: 700; animation: bl-dr-pop 300ms cubic-bezier(.3,1.6,.5,1); }
+.bl-dr__day:disabled { color: var(--bl-dim); opacity: 0.4; cursor: not-allowed; text-decoration: line-through; }
+.bl-dr__day:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 1px; }
+.bl-dr__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 12px; box-shadow: 0 -1px 0 var(--bl-line); font-size: 13px; }
+.bl-dr__summary { color: var(--bl-muted); }
+.bl-dr__summary b { color: var(--bl-ink); }
+.bl-dr__clear { padding: 6px 10px; border: 0; border-radius: 8px; background: var(--bl-hover); color: var(--bl-ink); font: inherit; font-size: 13px; cursor: pointer; }
+.bl-dr__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+@keyframes bl-dr-slide { from { opacity: 0; transform: translateX(calc(var(--bl-dir) * 28px)); } }
+@keyframes bl-dr-pop { 40% { transform: scale(1.15); } }
+@media (prefers-reduced-motion: reduce) { .bl-dr__month, .bl-dr__day[data-edge] { animation: none; } .bl-dr__day { 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);
+  }, []);
+}
+const day = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
+const addDays = (d, n) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
+const addMonths = (d, n) => {
+  const target = new Date(d.getFullYear(), d.getMonth() + n, 1);
+  const last = new Date(target.getFullYear(), target.getMonth() + 1, 0).getDate();
+  return new Date(target.getFullYear(), target.getMonth(), Math.min(d.getDate(), last));
+};
+const same = (a, b) => !!a && !!b && a.getTime() === b.getTime();
+const keyOf = (d) => `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`;
+const DEFAULT_PRESETS = [
+  { label: "Today", range: () => ({ start: day(/* @__PURE__ */ new Date()), end: day(/* @__PURE__ */ new Date()) }) },
+  { label: "Last 7 days", range: () => ({ start: addDays(day(/* @__PURE__ */ new Date()), -6), end: day(/* @__PURE__ */ new Date()) }) },
+  { label: "Last 30 days", range: () => ({ start: addDays(day(/* @__PURE__ */ new Date()), -29), end: day(/* @__PURE__ */ new Date()) }) },
+  {
+    label: "This month",
+    range: () => {
+      const now = /* @__PURE__ */ new Date();
+      return { start: new Date(now.getFullYear(), now.getMonth(), 1), end: new Date(now.getFullYear(), now.getMonth() + 1, 0) };
+    }
+  },
+  {
+    label: "Next weekend",
+    range: () => {
+      const today = day(/* @__PURE__ */ new Date());
+      const saturday = addDays(today, (6 - today.getDay() + 7) % 7 || 7);
+      return { start: saturday, end: addDays(saturday, 1) };
+    }
+  }
+];
+function DateRange({
+  value,
+  defaultValue,
+  onValueChange,
+  presets = DEFAULT_PRESETS,
+  months = 2,
+  minDate,
+  maxDate,
+  weekStartsOn = 1,
+  locale,
+  label = "Choose dates",
+  cellSize = 38,
+  narrowAt = 620,
+  backgroundColor = "#1a1c2c",
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  dimColor = "#566c86",
+  hoverColor = "rgba(255,255,255,0.07)",
+  lineColor = "#333c57",
+  accentColor = "#73eff7",
+  onAccentColor = "#0b0b14",
+  bandColor = "rgba(115,239,247,0.16)",
+  radius = 16,
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  className = "",
+  style
+}) {
+  useStyles();
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const today = day(/* @__PURE__ */ new Date());
+  const [inner, setInner] = useState(defaultValue ?? { start: null, end: null });
+  const range = value ?? inner;
+  const start = range.start ? day(range.start) : null;
+  const end = range.end ? day(range.end) : null;
+  const [view, setView] = useState(() => new Date((start ?? today).getFullYear(), (start ?? today).getMonth(), 1));
+  const [dir, setDir] = useState(0);
+  const [focused, setFocused] = useState(start ?? today);
+  const [hover, setHover] = useState(null);
+  const [narrow, setNarrow] = useState(false);
+  const [room, setRoom] = useState(Infinity);
+  const [announce, setAnnounce] = useState("");
+  const rootRef = useRef(null);
+  const gridRef = useRef(null);
+  const keyboard = useRef(false);
+  const shown = narrow ? 1 : months;
+  const min = minDate ? day(minDate) : null;
+  const max = maxDate ? day(maxDate) : null;
+  const fmt = (d, opts) => new Intl.DateTimeFormat(locale, opts).format(d);
+  const long = (d) => fmt(d, { weekday: "long", month: "long", day: "numeric", year: "numeric" });
+  const short = (d) => fmt(d, { month: "short", day: "numeric", year: d.getFullYear() === today.getFullYear() ? void 0 : "numeric" });
+  const disabled = (d) => min && d < min || max && d > max;
+  useLayoutEffect(() => {
+    const node = rootRef.current;
+    const measure = () => {
+      const parent = node.parentElement;
+      const pad = parent ? parseFloat(getComputedStyle(parent).paddingLeft) + parseFloat(getComputedStyle(parent).paddingRight) : 0;
+      const width = parent ? parent.clientWidth - pad : 9999;
+      setNarrow(width < narrowAt);
+      setRoom(width);
+    };
+    measure();
+    const resize = new ResizeObserver(measure);
+    if (node.parentElement) resize.observe(node.parentElement);
+    return () => resize.disconnect();
+  }, [narrowAt]);
+  const commit = (next) => {
+    if (value === void 0) setInner(next);
+    onValueChange?.(next);
+  };
+  const goMonth = (target, direction) => {
+    setDir(direction);
+    setView(new Date(target.getFullYear(), target.getMonth(), 1));
+  };
+  const reveal = (d) => {
+    const first = view;
+    const lastShown = addMonths(view, shown - 1);
+    if (d < first) goMonth(d, -1);
+    else if (d > new Date(lastShown.getFullYear(), lastShown.getMonth() + 1, 0)) goMonth(addMonths(d, -(shown - 1)), 1);
+  };
+  const pick = (d) => {
+    if (disabled(d)) return;
+    if (!start || end) {
+      commit({ start: d, end: null });
+      setAnnounce(`Start date ${long(d)}. Now choose the end date.`);
+    } else {
+      const [a, b] = d < start ? [d, start] : [start, d];
+      commit({ start: a, end: b });
+      const nights2 = Math.round((b.getTime() - a.getTime()) / 864e5) + 1;
+      setAnnounce(`Selected ${long(a)} to ${long(b)}, ${nights2} ${nights2 === 1 ? "day" : "days"}.`);
+    }
+    setFocused(d);
+    setHover(null);
+  };
+  const onKeyDown = (event) => {
+    const moves = {
+      ArrowLeft: () => addDays(focused, -1),
+      ArrowRight: () => addDays(focused, 1),
+      ArrowUp: () => addDays(focused, -7),
+      ArrowDown: () => addDays(focused, 7),
+      Home: () => addDays(focused, -((focused.getDay() - weekStartsOn + 7) % 7)),
+      End: () => addDays(focused, 6 - (focused.getDay() - weekStartsOn + 7) % 7),
+      PageUp: () => addMonths(focused, event.shiftKey ? -12 : -1),
+      PageDown: () => addMonths(focused, event.shiftKey ? 12 : 1)
+    };
+    if (!moves[event.key]) return;
+    event.preventDefault();
+    const next = moves[event.key]();
+    keyboard.current = true;
+    setFocused(next);
+    reveal(next);
+    if (start && !end) setHover(next);
+  };
+  useEffect(() => {
+    if (!keyboard.current) return;
+    keyboard.current = false;
+    gridRef.current?.querySelector(`[data-key="${keyOf(focused)}"]`)?.focus();
+  }, [focused, view]);
+  const applyPreset = (preset) => {
+    const next = preset.range();
+    commit({ start: day(next.start), end: day(next.end) });
+    setFocused(day(next.start));
+    const target = day(next.start);
+    if (target.getFullYear() !== view.getFullYear() || target.getMonth() !== view.getMonth()) goMonth(target, target < view ? -1 : 1);
+    setAnnounce(`${preset.label}: ${long(day(next.start))} to ${long(day(next.end))}.`);
+  };
+  const bandOf = (d) => {
+    const previewEnd = start && !end ? hover : null;
+    const a = start;
+    const b = end ?? previewEnd;
+    if (!a || !b) return { band: start && same(d, start) ? "solo" : null, preview: false };
+    const [lo, hi] = a <= b ? [a, b] : [b, a];
+    if (d < lo || d > hi) return { band: null, preview: false };
+    const band = same(lo, hi) ? "solo" : same(d, lo) ? "start" : same(d, hi) ? "end" : "mid";
+    return { band, preview: !end };
+  };
+  const weekdays = Array.from({ length: 7 }, (_, i) => {
+    const d = new Date(2024, 0, 7 + (i + weekStartsOn) % 7);
+    return { short: fmt(d, { weekday: "narrow" }), long: fmt(d, { weekday: "long" }) };
+  });
+  const renderMonth = (offset) => {
+    const first = addMonths(view, offset);
+    const lead = (first.getDay() - weekStartsOn + 7) % 7;
+    const daysIn = new Date(first.getFullYear(), first.getMonth() + 1, 0).getDate();
+    const cells = Array.from({ length: 42 }, (_, i) => i < lead || i >= lead + daysIn ? null : new Date(first.getFullYear(), first.getMonth(), i - lead + 1));
+    const title = fmt(first, { month: "long", year: "numeric" });
+    return /* @__PURE__ */ jsxs("div", { className: "bl-dr__month", style: { "--bl-dir": dir }, children: [
+      /* @__PURE__ */ jsx("div", { className: "bl-dr__title", id: `${uid}-m${offset}`, "aria-hidden": "true", children: title }),
+      /* @__PURE__ */ jsxs("table", { className: "bl-dr__grid", role: "grid", "aria-label": title, children: [
+        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: weekdays.map((w) => /* @__PURE__ */ jsx("th", { scope: "col", abbr: w.long, children: w.short }, w.long)) }) }),
+        /* @__PURE__ */ jsx("tbody", { children: Array.from({ length: 6 }, (_, row) => /* @__PURE__ */ jsx("tr", { children: cells.slice(row * 7, row * 7 + 7).map((d, col) => {
+          if (!d) return /* @__PURE__ */ jsx("td", {}, col);
+          const { band, preview } = bandOf(d);
+          const edge = same(d, start) || same(d, end) || preview && same(d, hover);
+          const state = same(d, start) && same(d, end) ? ", selected" : same(d, start) ? ", start date" : same(d, end) ? ", end date" : band && !preview ? ", in range" : "";
+          return /* @__PURE__ */ jsx("td", { "data-band": band ?? void 0, "data-preview": band && preview || void 0, "aria-selected": !!band && !preview, children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "bl-dr__day",
+              "data-key": keyOf(d),
+              "data-today": same(d, today) || void 0,
+              "data-edge": edge || void 0,
+              tabIndex: same(d, focused) ? 0 : -1,
+              disabled: !!disabled(d),
+              "aria-label": `${long(d)}${same(d, today) ? ", today" : ""}${state}`,
+              onClick: () => pick(d),
+              onPointerEnter: () => start && !end && setHover(d),
+              onFocus: () => setFocused(d),
+              children: d.getDate()
+            }
+          ) }, col);
+        }) }, row)) })
+      ] })
+    ] }, `${first.getFullYear()}-${first.getMonth()}`);
+  };
+  const nights = start && end ? Math.round((end.getTime() - start.getTime()) / 864e5) + 1 : 0;
+  const cell = narrow ? Math.max(28, Math.min(cellSize, Math.floor((room - 32) / 7))) : cellSize;
+  const activePreset = presets.findIndex((p) => {
+    const r = p.range();
+    return same(day(r.start), start) && same(day(r.end), end);
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className: `bl-dr ${className}`,
+      role: "group",
+      "aria-label": label,
+      "data-narrow": narrow || void 0,
+      style: {
+        "--bl-cell": `${cell}px`,
+        "--bl-bg": backgroundColor,
+        "--bl-ink": textColor,
+        "--bl-muted": mutedColor,
+        "--bl-dim": dimColor,
+        "--bl-hover": hoverColor,
+        "--bl-line": lineColor,
+        "--bl-accent": accentColor,
+        "--bl-on-accent": onAccentColor,
+        "--bl-band": bandColor,
+        "--bl-radius": `${radius}px`,
+        "--bl-font": fontFamily,
+        ...style
+      },
+      children: [
+        presets.length > 0 && /* @__PURE__ */ jsx("div", { className: "bl-dr__presets", role: "group", "aria-label": "Presets", children: presets.map((preset, i) => /* @__PURE__ */ jsx("button", { type: "button", className: "bl-dr__preset", "aria-pressed": i === activePreset, onClick: () => applyPreset(preset), children: preset.label }, preset.label)) }),
+        /* @__PURE__ */ jsxs("div", { className: "bl-dr__main", children: [
+          /* @__PURE__ */ jsxs("div", { className: "bl-dr__head", children: [
+            /* @__PURE__ */ jsx("button", { type: "button", className: "bl-dr__nav", "aria-label": "Previous month", onClick: () => goMonth(addMonths(view, -1), -1), children: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M8.5 3 4.5 7l4 4" }) }) }),
+            /* @__PURE__ */ jsx("button", { type: "button", className: "bl-dr__nav", "aria-label": "Next month", onClick: () => goMonth(addMonths(view, 1), 1), children: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M5.5 3 9.5 7l-4 4" }) }) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { ref: gridRef, className: "bl-dr__months", onKeyDown, onPointerLeave: () => setHover(null), children: Array.from({ length: shown }, (_, i) => renderMonth(i)) }),
+          /* @__PURE__ */ jsxs("div", { className: "bl-dr__foot", children: [
+            /* @__PURE__ */ jsx("span", { className: "bl-dr__summary", children: start && end ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("b", { children: short(start) }),
+              " \u2013 ",
+              /* @__PURE__ */ jsx("b", { children: short(end) }),
+              " \xB7 ",
+              nights,
+              " ",
+              nights === 1 ? "day" : "days"
+            ] }) : start ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("b", { children: short(start) }),
+              " \u2013 pick an end date"
+            ] }) : "Pick a start date" }),
+            start && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "bl-dr__clear",
+                onClick: () => {
+                  commit({ start: null, end: null });
+                  setAnnounce("Dates cleared.");
+                },
+                children: "Clear"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "bl-dr__sr", "aria-live": "polite", children: announce })
+      ]
+    }
+  );
+}
+export {
+  DEFAULT_PRESETS,
+  DateRange as default
+};

package/dist/DeviceFrame.d.ts

@@ -0,0 +1,30 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export type DeviceType = 'phone' | 'tablet' | 'laptop' | 'browser' | 'watch';
+export type DeviceFinish = 'graphite' | 'silver' | 'midnight' | 'gold';
+export interface DeviceFrameProps {
+    device?: DeviceType;
+    /** Fills the screen: an image, video or live UI. */
+    children?: ReactNode;
+    /** Frame width in px (never wider than its parent). Defaults per device. */
+    width?: number;
+    /** Preset body finish. */
+    finish?: DeviceFinish;
+    /** Custom body color; overrides the finish. */
+    bodyColor?: string;
+    /** Tablet only: rotate to 4:3. */
+    landscape?: boolean;
+    /** Browser frame address bar text. */
+    url?: string;
+    browserTheme?: 'light' | 'dark';
+    /** Browser page aspect ratio, e.g. "16 / 10". */
+    aspectRatio?: string;
+    /** Resting 3D tilt, in degrees. */
+    tilt?: number;
+    /** Ease the tilt toward the pointer (off under reduced motion). */
+    interactiveTilt?: boolean;
+    /** Accessible name; makes the frame a labelled figure. */
+    label?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function DeviceFrame({ device, children, width, finish, bodyColor, landscape, url, browserTheme, aspectRatio, tilt, interactiveTilt, label, className, style }: DeviceFrameProps): import("react").JSX.Element;

package/dist/DeviceFrame.js

@@ -0,0 +1,145 @@
+'use client';
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useInsertionEffect, useRef } from "react";
+const STYLE_ID = "bl-device-frame";
+const CSS = `
+.bl-dev { --bl-body: #1f2230; --bl-edge: #3a3f55; --bl-shine: rgba(255,255,255,0.14); position: relative; display: inline-block; width: var(--bl-w); max-width: 100%; transform-style: preserve-3d; transition: transform 500ms cubic-bezier(.2,.8,.2,1); }
+.bl-dev__shell { position: relative; background: var(--bl-body); box-shadow: inset 0 0 0 2px var(--bl-edge), inset 0 0 0 4px rgba(0,0,0,0.35), 0 30px 60px -20px rgba(0,0,0,0.6), 0 12px 24px -12px rgba(0,0,0,0.5); }
+.bl-dev__shell::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(135deg, var(--bl-shine), transparent 40%); }
+.bl-dev__screen { position: relative; overflow: hidden; background: #000; isolation: isolate; }
+.bl-dev__screen > * { display: block; width: 100%; height: 100%; object-fit: cover; }
+
+.bl-dev[data-device="phone"] .bl-dev__shell { aspect-ratio: 9 / 19; border-radius: 15% / 7%; padding: 4.5%; }
+.bl-dev[data-device="phone"] .bl-dev__screen { height: 100%; border-radius: 11% / 5.2%; }
+.bl-dev[data-device="phone"] .bl-dev__notch { position: absolute; z-index: 2; top: 2.2%; left: 50%; width: 30%; height: 3.2%; transform: translateX(-50%); border-radius: 999px; background: #000; }
+.bl-dev[data-device="phone"] .bl-dev__btn { position: absolute; width: 1.6%; border-radius: 2px; background: var(--bl-edge); }
+
+.bl-dev[data-device="tablet"] .bl-dev__shell { aspect-ratio: 3 / 4; border-radius: 6%; padding: 4%; }
+.bl-dev[data-device="tablet"] .bl-dev__screen { height: 100%; border-radius: 2.5%; }
+.bl-dev[data-device="tablet"][data-landscape] .bl-dev__shell { aspect-ratio: 4 / 3; }
+
+.bl-dev[data-device="laptop"] .bl-dev__lid { position: relative; margin: 0 7%; padding: 2.4% 2.4% 3.2%; border-radius: 3% 3% 0 0 / 4.5% 4.5% 0 0; background: var(--bl-body); box-shadow: inset 0 0 0 2px var(--bl-edge); }
+.bl-dev[data-device="laptop"] .bl-dev__screen { aspect-ratio: 16 / 10; border-radius: 0.6%; }
+.bl-dev[data-device="laptop"] .bl-dev__cam { position: absolute; top: 0.9%; left: 50%; width: 0.8%; aspect-ratio: 1; border-radius: 50%; background: #0b0b14; transform: translateX(-50%); }
+.bl-dev[data-device="laptop"] .bl-dev__base { position: relative; height: 0; padding-bottom: 3.6%; border-radius: 0 0 40% 40% / 0 0 100% 100%; background: linear-gradient(to bottom, var(--bl-edge), var(--bl-body)); box-shadow: 0 24px 40px -18px rgba(0,0,0,0.65); }
+.bl-dev[data-device="laptop"] .bl-dev__base::before { content: ""; position: absolute; top: 0; left: 50%; width: 16%; height: 30%; border-radius: 0 0 10px 10px; background: rgba(0,0,0,0.3); transform: translateX(-50%); }
+
+.bl-dev[data-device="browser"] .bl-dev__shell { border-radius: 12px; padding: 0; overflow: hidden; background: var(--bl-chrome); box-shadow: 0 0 0 1px rgba(0,0,0,0.25), 0 30px 60px -24px rgba(0,0,0,0.55); }
+.bl-dev[data-device="browser"] .bl-dev__shell::after { display: none; }
+.bl-dev__bar { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px; background: var(--bl-chrome); border-bottom: 1px solid var(--bl-chrome-line); }
+.bl-dev__lights { display: flex; gap: 7px; }
+.bl-dev__lights i { width: 11px; height: 11px; border-radius: 50%; }
+.bl-dev__url { flex: 1; max-width: 60%; margin: 0 auto; padding: 5px 12px; border-radius: 7px; background: var(--bl-url); color: var(--bl-url-text); font: 500 12px/1.2 ui-sans-serif, system-ui, sans-serif; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.bl-dev[data-device="browser"] .bl-dev__screen { aspect-ratio: var(--bl-ratio, 16 / 10); background: var(--bl-page); }
+
+.bl-dev[data-device="watch"] .bl-dev__shell { aspect-ratio: 4 / 5; border-radius: 26%; padding: 8%; }
+.bl-dev[data-device="watch"] .bl-dev__screen { height: 100%; border-radius: 22%; }
+.bl-dev[data-device="watch"] .bl-dev__crown { position: absolute; top: 28%; right: -3.5%; width: 5%; height: 16%; border-radius: 3px; background: var(--bl-edge); }
+
+@media (prefers-reduced-motion: reduce) { .bl-dev { 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);
+  }, []);
+}
+const FINISHES = {
+  graphite: { body: "#1f2230", edge: "#3a3f55" },
+  silver: { body: "#d9dde4", edge: "#b4bac6" },
+  midnight: { body: "#141a33", edge: "#2b3566" },
+  gold: { body: "#e8d3ae", edge: "#c9ad7e" }
+};
+const BROWSER_THEMES = {
+  light: { chrome: "#eceef2", line: "#d8dbe2", url: "#ffffff", urlText: "#5b6170", page: "#ffffff" },
+  dark: { chrome: "#22252f", line: "#151720", url: "#151720", urlText: "#9aa2b4", page: "#0e1016" }
+};
+const DEFAULT_WIDTHS = { phone: 300, tablet: 420, laptop: 720, browser: 760, watch: 200 };
+function DeviceFrame({
+  device = "phone",
+  children,
+  width,
+  finish = "graphite",
+  bodyColor,
+  landscape = false,
+  url = "bitslab.dev",
+  browserTheme = "dark",
+  aspectRatio,
+  tilt = 0,
+  interactiveTilt = false,
+  label,
+  className = "",
+  style
+}) {
+  useStyles();
+  const ref = useRef(null);
+  const colors = FINISHES[finish] ?? FINISHES.graphite;
+  const chrome = BROWSER_THEMES[browserTheme] ?? BROWSER_THEMES.dark;
+  const baseTransform = tilt ? `perspective(1600px) rotateX(${tilt * 0.5}deg) rotateY(${-tilt}deg)` : "none";
+  const onPointerMove = (event) => {
+    if (!interactiveTilt || window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return;
+    const rect = ref.current.getBoundingClientRect();
+    const x = (event.clientX - rect.left) / rect.width - 0.5;
+    const y = (event.clientY - rect.top) / rect.height - 0.5;
+    ref.current.style.transform = `perspective(1600px) rotateX(${-y * 10}deg) rotateY(${x * 14}deg)`;
+  };
+  const onPointerLeave = () => {
+    if (ref.current) ref.current.style.transform = baseTransform;
+  };
+  const screen = /* @__PURE__ */ jsx("div", { className: "bl-dev__screen", children });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: `bl-dev ${className}`,
+      "data-device": device,
+      "data-landscape": landscape || void 0,
+      role: label ? "figure" : void 0,
+      "aria-label": label,
+      onPointerMove,
+      onPointerLeave,
+      style: {
+        "--bl-w": `${width ?? DEFAULT_WIDTHS[device] ?? 320}px`,
+        "--bl-body": bodyColor ?? colors.body,
+        "--bl-edge": colors.edge,
+        "--bl-chrome": chrome.chrome,
+        "--bl-chrome-line": chrome.line,
+        "--bl-url": chrome.url,
+        "--bl-url-text": chrome.urlText,
+        "--bl-page": chrome.page,
+        ...aspectRatio ? { "--bl-ratio": aspectRatio } : null,
+        transform: baseTransform,
+        ...style
+      },
+      children: device === "laptop" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "bl-dev__lid", children: [
+          /* @__PURE__ */ jsx("span", { className: "bl-dev__cam", "aria-hidden": "true" }),
+          screen
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "bl-dev__base", "aria-hidden": "true" })
+      ] }) : /* @__PURE__ */ jsxs("div", { className: "bl-dev__shell", children: [
+        device === "browser" && /* @__PURE__ */ jsxs("div", { className: "bl-dev__bar", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsxs("span", { className: "bl-dev__lights", children: [
+            /* @__PURE__ */ jsx("i", { style: { background: "#ff5f57" } }),
+            /* @__PURE__ */ jsx("i", { style: { background: "#febc2e" } }),
+            /* @__PURE__ */ jsx("i", { style: { background: "#28c840" } })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "bl-dev__url", children: url })
+        ] }),
+        device === "phone" && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "bl-dev__notch", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { className: "bl-dev__btn", style: { left: "-1%", top: "18%", height: "6%" }, "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { className: "bl-dev__btn", style: { left: "-1%", top: "27%", height: "9%" }, "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { className: "bl-dev__btn", style: { right: "-1%", top: "24%", height: "12%" }, "aria-hidden": "true" })
+        ] }),
+        device === "watch" && /* @__PURE__ */ jsx("span", { className: "bl-dev__crown", "aria-hidden": "true" }),
+        screen
+      ] })
+    }
+  );
+}
+export {
+  DeviceFrame as default
+};

package/dist/DiffReveal.d.ts

@@ -0,0 +1,36 @@
+import { type CSSProperties, type ElementType } from 'react';
+export interface DiffOp {
+    type: 'same' | 'ins' | 'del';
+    text: string;
+}
+export interface DiffRevealProps {
+    before?: string;
+    after?: string;
+    /** Play when scrolled into view. */
+    autoPlay?: boolean;
+    /** Share that must be visible to play. */
+    threshold?: number;
+    /** Change to restart. */
+    replayKey?: string | number;
+    /** Typing speed of insertions. */
+    charsPerSecond?: number;
+    /** How long a deletion shows struck through, in ms. */
+    strikeDuration?: number;
+    /** Gap between deletions in ms. */
+    stagger?: number;
+    /** Play/replay, speed and the word count. */
+    showControls?: boolean;
+    onDone?: () => void;
+    as?: ElementType;
+    fontSize?: number;
+    textColor?: string;
+    mutedColor?: string;
+    chipColor?: string;
+    insertColor?: string;
+    deleteColor?: string;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function diffWords(before: string, after: string): DiffOp[];
+export default function DiffReveal({ before, after, autoPlay, threshold, replayKey, charsPerSecond, strikeDuration, stagger, showControls, onDone, as, fontSize, textColor, mutedColor, chipColor, insertColor, deleteColor, fontFamily, className, style }: DiffRevealProps): import("react").JSX.Element;