bits-lab 0.0.0-stage → 0.1.2

package/dist/CodeShowcase.js

@@ -0,0 +1,307 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-code-showcase";
+const CSS = `
+.bl-code { width: 100%; max-width: var(--bl-w); margin: 0 auto; overflow: hidden; border-radius: var(--bl-radius); background: var(--bl-bg); color: var(--bl-ink); box-shadow: 0 0 0 1px var(--bl-line), 0 24px 60px -28px rgba(0,0,0,0.8); font-family: var(--bl-ui-font); }
+.bl-code__bar { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 0 10px 0 14px; background: var(--bl-bar); box-shadow: inset 0 -1px 0 var(--bl-line); }
+.bl-code__lights { display: flex; gap: 6px; }
+.bl-code__lights i { width: 10px; height: 10px; border-radius: 50%; background: var(--bl-line); }
+.bl-code__tabs { display: flex; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
+.bl-code__tab { position: relative; flex: 0 0 auto; padding: 11px 12px; border: 0; background: transparent; color: var(--bl-muted); font: inherit; font-size: 13px; cursor: pointer; }
+.bl-code__tab:hover { color: var(--bl-ink); }
+.bl-code__tab[aria-selected="true"] { color: var(--bl-ink); }
+.bl-code__tab::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; border-radius: 2px; background: var(--bl-accent); transform: scaleX(0); transition: transform 240ms cubic-bezier(.2,.9,.25,1); }
+.bl-code__tab[aria-selected="true"]::after { transform: scaleX(1); }
+.bl-code__tab:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: -4px; border-radius: 6px; }
+.bl-code__tab[data-progress]::before { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; background: color-mix(in srgb, var(--bl-accent) 35%, transparent); transform-origin: left; animation: bl-code-progress var(--bl-auto) linear both; }
+.bl-code[data-hold] .bl-code__tab[data-progress]::before { animation-play-state: paused; }
+.bl-code__copy { flex: 0 0 auto; padding: 5px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--bl-muted); font: inherit; font-size: 12px; cursor: pointer; }
+.bl-code__copy:hover { background: var(--bl-line); color: var(--bl-ink); }
+.bl-code__copy:focus-visible { outline: 2px solid var(--bl-accent); }
+.bl-code__pre { margin: 0; padding: 14px 0; overflow-x: auto; font-family: var(--bl-font); font-size: var(--bl-size); line-height: var(--bl-lh); tab-size: 2; }
+.bl-code__code { display: block; min-width: max-content; }
+.bl-code__line { display: grid; grid-template-columns: 3.2em 1.4em auto; height: var(--bl-lh); overflow: hidden; white-space: pre; padding-right: 18px; }
+.bl-code__num { color: var(--bl-dim); text-align: right; user-select: none; -webkit-user-select: none; }
+.bl-code__sign { color: var(--bl-dim); text-align: center; user-select: none; -webkit-user-select: none; }
+.bl-code__line[data-mark="add"] { background: color-mix(in srgb, var(--bl-add) 14%, transparent); }
+.bl-code__line[data-mark="add"] .bl-code__sign { color: var(--bl-add); }
+.bl-code__line[data-mark="del"] { background: color-mix(in srgb, var(--bl-del) 14%, transparent); }
+.bl-code__line[data-mark="del"] .bl-code__sign { color: var(--bl-del); }
+.bl-code__line[data-mark="del"] .bl-code__text { opacity: 0.7; }
+.bl-code__line[data-focus] { background: color-mix(in srgb, var(--bl-accent) 10%, transparent); box-shadow: inset 2px 0 0 var(--bl-accent); }
+.bl-code[data-reveal="wait"] .bl-code__line { opacity: 0; }
+.bl-code[data-reveal="run"] .bl-code__line { animation: bl-code-reveal 380ms cubic-bezier(.2,.9,.25,1) both; animation-delay: calc(var(--i) * var(--bl-stagger)); }
+.bl-code__line[data-state="out"] { animation: bl-code-out var(--bl-out) cubic-bezier(.4,0,.2,1) both; }
+.bl-code__line[data-state="in"] { animation: bl-code-in var(--bl-in) cubic-bezier(.2,.9,.25,1) var(--bl-out) both; }
+.bl-code .t-k { color: var(--bl-keyword); }
+.bl-code .t-s { color: var(--bl-string); }
+.bl-code .t-c { color: var(--bl-dim); font-style: italic; }
+.bl-code .t-n { color: var(--bl-number); }
+.bl-code .t-t { color: var(--bl-tag); }
+.bl-code .t-f { color: var(--bl-fn); }
+.bl-code__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+@keyframes bl-code-reveal { from { opacity: 0; transform: translateY(6px); } }
+@keyframes bl-code-out { to { height: 0; opacity: 0; transform: translateX(-10px); } }
+@keyframes bl-code-in { from { height: 0; opacity: 0; transform: translateX(10px); } }
+@keyframes bl-code-progress { from { transform: scaleX(0); } }
+@media (prefers-reduced-motion: reduce) {
+  .bl-code[data-reveal] .bl-code__line, .bl-code__line[data-state] { animation: none; opacity: 1; }
+  .bl-code__tab::after { 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 TOKENS = /(\/\/.*$|#.*$)|("(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|`(?:\\.|[^`\\])*`)|(<\/?[A-Za-z][\w.-]*|\/?>)|\b(import|from|export|default|const|let|var|function|return|if|else|for|while|await|async|new|class|extends|type|interface|as|of|in|true|false|null|undefined|this)\b|\b(\d+(?:\.\d+)?)\b|\b([A-Za-z_$][\w$]*)(?=\()/gm;
+const CLASSES = ["t-c", "t-s", "t-t", "t-k", "t-n", "t-f"];
+function highlight(line) {
+  const out = [];
+  let last = 0;
+  for (const match of line.matchAll(TOKENS)) {
+    const index = match.index ?? 0;
+    if (index > last) out.push(line.slice(last, index));
+    const group = match.slice(1).findIndex(Boolean);
+    out.push(
+      /* @__PURE__ */ jsx("span", { className: CLASSES[group], children: match[0] }, index)
+    );
+    last = index + match[0].length;
+  }
+  if (last < line.length) out.push(line.slice(last));
+  return out;
+}
+function diffLines(a, b) {
+  const dp = Array.from({ length: a.length + 1 }, () => new Uint16Array(b.length + 1));
+  for (let i2 = a.length - 1; i2 >= 0; i2--) {
+    for (let j2 = b.length - 1; j2 >= 0; j2--) dp[i2][j2] = a[i2] === b[j2] ? dp[i2 + 1][j2 + 1] + 1 : Math.max(dp[i2 + 1][j2], dp[i2][j2 + 1]);
+  }
+  const ops = [];
+  let i = 0;
+  let j = 0;
+  while (i < a.length && j < b.length) {
+    if (a[i] === b[j]) ops.push({ type: "keep", from: i++, to: j++ });
+    else if (dp[i + 1][j] >= dp[i][j + 1]) ops.push({ type: "del", from: i++, to: -1 });
+    else ops.push({ type: "add", from: -1, to: j++ });
+  }
+  while (i < a.length) ops.push({ type: "del", from: i++, to: -1 });
+  while (j < b.length) ops.push({ type: "add", from: -1, to: j++ });
+  return ops;
+}
+const splitCode = (code) => code.replace(/\n$/, "").split("\n");
+function CodeShowcase({
+  files = [],
+  defaultFile = 0,
+  file: controlled,
+  onFileChange,
+  autoPlay = 0,
+  reveal = true,
+  stagger = 45,
+  morphDuration = 260,
+  showChrome = true,
+  showLineNumbers = true,
+  copyable = true,
+  width = 720,
+  fontSize = 14,
+  backgroundColor = "#0b0b14",
+  barColor = "#1a1c2c",
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  dimColor = "#566c86",
+  lineColor = "#333c57",
+  accentColor = "#73eff7",
+  keywordColor = "#ef7d57",
+  stringColor = "#a7f070",
+  numberColor = "#ffcd75",
+  tagColor = "#41a6f6",
+  functionColor = "#73eff7",
+  addColor = "#38b764",
+  removeColor = "#b13e53",
+  radius = 12,
+  fontFamily = "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+  uiFontFamily = "ui-sans-serif, system-ui, sans-serif",
+  label = "Code example",
+  className = "",
+  style
+}) {
+  useStyles();
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const [inner, setInner] = useState(defaultFile);
+  const active = Math.min(files.length - 1, Math.max(0, controlled ?? inner));
+  const nextKey = useRef(0);
+  const keyed = (code) => splitCode(code).map((text) => ({ key: nextKey.current++, text, state: "idle" }));
+  const [rows, setRows] = useState(() => files[active] ? keyed(files[active].code) : []);
+  const [revealState, setRevealState] = useState(reveal ? "wait" : "done");
+  const [hold, setHold] = useState(false);
+  const [auto, setAuto] = useState(autoPlay > 0);
+  const [copied, setCopied] = useState(false);
+  const rootRef = useRef(null);
+  const tabRefs = useRef([]);
+  const shown = useRef(active);
+  const rowsRef = useRef(rows);
+  rowsRef.current = rows;
+  const select = (index, fromUser = true) => {
+    if (fromUser) setAuto(false);
+    if (controlled === void 0) setInner(index);
+    onFileChange?.(index);
+  };
+  useEffect(() => {
+    if (shown.current === active || !files[active]) return void 0;
+    shown.current = active;
+    const target = splitCode(files[active].code);
+    const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    const live = rowsRef.current.filter((row) => row.state !== "out");
+    const merged = diffLines(live.map((row) => row.text), target).map(
+      (op) => op.type === "keep" ? { ...live[op.from], state: "idle" } : op.type === "del" ? { ...live[op.from], state: "out" } : { key: nextKey.current++, text: target[op.to], state: "in" }
+    );
+    const settled = merged.filter((row) => row.state !== "out").map((row) => ({ ...row, state: "idle" }));
+    setRows(reduced ? settled : merged);
+    if (reduced) return void 0;
+    const timer = setTimeout(() => setRows(settled), morphDuration * 2 + 40);
+    return () => clearTimeout(timer);
+  }, [active, files]);
+  useEffect(() => {
+    if (revealState !== "wait") return void 0;
+    const io = new IntersectionObserver(([entry]) => {
+      if (!entry.isIntersecting) return;
+      io.disconnect();
+      setRevealState("run");
+    }, { threshold: 0.3 });
+    io.observe(rootRef.current);
+    return () => io.disconnect();
+  }, [revealState]);
+  useEffect(() => {
+    if (revealState !== "run") return void 0;
+    const timer = setTimeout(() => setRevealState("done"), rows.length * stagger + 400);
+    return () => clearTimeout(timer);
+  }, [revealState]);
+  useEffect(() => {
+    if (!auto || hold || autoPlay <= 0 || files.length < 2 || revealState === "wait") return void 0;
+    const timer = setTimeout(() => select((active + 1) % files.length, false), autoPlay);
+    return () => clearTimeout(timer);
+  }, [auto, hold, autoPlay, active, files.length, revealState]);
+  const onTabKey = (event, index) => {
+    const keys = { ArrowRight: index + 1, ArrowLeft: index - 1, Home: 0, End: files.length - 1 };
+    if (!(event.key in keys)) return;
+    event.preventDefault();
+    const next = (keys[event.key] + files.length) % files.length;
+    select(next);
+    tabRefs.current[next]?.focus();
+  };
+  const file = files[active];
+  const copy = async () => {
+    if (!file) return;
+    const text = file.diff ? splitCode(file.code).filter((line) => !line.startsWith("-")).map((line) => line.replace(/^[+ ]/, "")).join("\n") : file.code;
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1600);
+    } catch {
+      setCopied(false);
+    }
+  };
+  const focusLines = new Set(file?.highlight ?? []);
+  let number = 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className: `bl-code ${className}`,
+      "data-reveal": revealState === "done" ? void 0 : revealState,
+      "data-hold": hold || void 0,
+      onPointerEnter: () => setHold(true),
+      onPointerLeave: () => setHold(false),
+      onFocus: () => setHold(true),
+      onBlur: (event) => {
+        if (!event.currentTarget.contains(event.relatedTarget)) setHold(false);
+      },
+      style: {
+        "--bl-w": `${width}px`,
+        "--bl-size": `${fontSize}px`,
+        "--bl-lh": "1.7em",
+        "--bl-stagger": `${stagger}ms`,
+        "--bl-out": `${morphDuration}ms`,
+        "--bl-in": `${morphDuration}ms`,
+        "--bl-auto": `${autoPlay}ms`,
+        "--bl-radius": `${radius}px`,
+        "--bl-bg": backgroundColor,
+        "--bl-bar": barColor,
+        "--bl-ink": textColor,
+        "--bl-muted": mutedColor,
+        "--bl-dim": dimColor,
+        "--bl-line": lineColor,
+        "--bl-accent": accentColor,
+        "--bl-keyword": keywordColor,
+        "--bl-string": stringColor,
+        "--bl-number": numberColor,
+        "--bl-tag": tagColor,
+        "--bl-fn": functionColor,
+        "--bl-add": addColor,
+        "--bl-del": removeColor,
+        "--bl-font": fontFamily,
+        "--bl-ui-font": uiFontFamily,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "bl-code__bar", children: [
+          showChrome && /* @__PURE__ */ jsxs("span", { className: "bl-code__lights", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx("i", {}),
+            /* @__PURE__ */ jsx("i", {}),
+            /* @__PURE__ */ jsx("i", {})
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "bl-code__tabs", role: "tablist", "aria-label": label, children: files.map((f, i) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              ref: (node) => {
+                tabRefs.current[i] = node;
+              },
+              type: "button",
+              role: "tab",
+              id: `${uid}-tab-${i}`,
+              className: "bl-code__tab",
+              "aria-selected": i === active,
+              "aria-controls": `${uid}-panel`,
+              tabIndex: i === active ? 0 : -1,
+              "data-progress": auto && autoPlay > 0 && files.length > 1 && i === active && revealState !== "wait" || void 0,
+              onClick: () => select(i),
+              onKeyDown: (event) => onTabKey(event, i),
+              children: f.name
+            },
+            f.name
+          )) }),
+          copyable && /* @__PURE__ */ jsx("button", { type: "button", className: "bl-code__copy", onClick: copy, children: copied ? "Copied" : "Copy" }),
+          /* @__PURE__ */ jsx("span", { className: "bl-code__sr", "aria-live": "polite", children: copied ? "Code copied to clipboard" : "" })
+        ] }),
+        /* @__PURE__ */ jsx("pre", { className: "bl-code__pre", id: `${uid}-panel`, role: "tabpanel", "aria-labelledby": `${uid}-tab-${active}`, tabIndex: 0, children: /* @__PURE__ */ jsx("code", { className: "bl-code__code", children: rows.map((row, i) => {
+          const mark = file?.diff ? row.text.startsWith("+") ? "add" : row.text.startsWith("-") ? "del" : null : null;
+          const text = file?.diff ? row.text.replace(/^[+\- ]/, "") : row.text;
+          if (row.state !== "out") number++;
+          return /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: "bl-code__line",
+              "data-state": row.state === "idle" ? void 0 : row.state,
+              "data-mark": mark ?? void 0,
+              "data-focus": row.state !== "out" && focusLines.has(number) || void 0,
+              style: { "--i": i },
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "bl-code__num", "aria-hidden": "true", children: showLineNumbers && row.state !== "out" ? number : "" }),
+                /* @__PURE__ */ jsx("span", { className: "bl-code__sign", "aria-hidden": "true", children: mark === "add" ? "+" : mark === "del" ? "\u2212" : "" }),
+                /* @__PURE__ */ jsx("span", { className: "bl-code__text", children: highlight(text) }),
+                "\n"
+              ]
+            },
+            row.key
+          );
+        }) }) })
+      ]
+    }
+  );
+}
+export {
+  CodeShowcase as default
+};

package/dist/ColorDial.d.ts

@@ -0,0 +1,42 @@
+import { type CSSProperties } from 'react';
+declare global {
+    interface Window {
+        EyeDropper: new () => {
+            open: () => Promise<{
+                sRGBHex: string;
+            }>;
+        };
+    }
+}
+export type RGB = [number, number, number];
+export interface HSV {
+    h: number;
+    s: number;
+    v: number;
+}
+export interface ColorDialProps {
+    /** Hex color; always emitted as #rrggbb. */
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (hex: string) => void;
+    swatches?: string[];
+    size?: number;
+    ringWidth?: number;
+    /** Show the screen eyedropper where supported. */
+    eyedropper?: boolean;
+    label?: string;
+    backgroundColor?: string;
+    fieldColor?: string;
+    textColor?: string;
+    mutedColor?: string;
+    lineColor?: string;
+    accentColor?: string;
+    errorColor?: string;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function parseHex(text: string): RGB | null;
+export declare function hsvToRgb(h: number, s: number, v: number): RGB;
+export declare function rgbToHsv([r, g, b]: number[]): HSV;
+export default function ColorDial({ value, defaultValue, onValueChange, swatches, size, ringWidth, eyedropper, label, backgroundColor, fieldColor, textColor, mutedColor, lineColor, accentColor, errorColor, fontFamily, className, style }: ColorDialProps): import("react").JSX.Element;

package/dist/ColorDial.js

@@ -0,0 +1,288 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-color-dial";
+const CSS = `
+.bl-dial { display: grid; justify-items: center; gap: 14px; width: min(var(--bl-size), 100%); font-family: var(--bl-font); color: var(--bl-ink); }
+.bl-dial__wheel { position: relative; width: 100%; aspect-ratio: 1; touch-action: none; user-select: none; -webkit-user-select: none; }
+.bl-dial__ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--bl-ring) - 1px), #000 calc(100% - var(--bl-ring))); mask: radial-gradient(farthest-side, transparent calc(100% - var(--bl-ring) - 1px), #000 calc(100% - var(--bl-ring))); cursor: crosshair; }
+.bl-dial__square { position: absolute; left: 50%; top: 50%; width: var(--bl-sq); height: var(--bl-sq); border-radius: 8px; background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent), hsl(var(--bl-h) 100% 50%); transform: translate(-50%, -50%); cursor: crosshair; }
+.bl-dial__thumb { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--bl-thumb); box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(0,0,0,0.35), 0 4px 10px rgba(0,0,0,0.4); outline: none; transition: transform 140ms cubic-bezier(.3,1.6,.5,1); }
+.bl-dial__thumb:focus-visible { transform: scale(1.25); box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--bl-accent); }
+.bl-dial[data-dragging] .bl-dial__thumb[data-active] { transform: scale(1.25); }
+.bl-dial__row { display: flex; align-items: center; gap: 8px; width: 100%; }
+.bl-dial__preview { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; background: var(--bl-thumb); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15); }
+.bl-dial__hex { flex: 1; min-width: 0; height: 36px; padding: 0 10px; box-sizing: border-box; border: 0; border-radius: 10px; background: var(--bl-field); color: inherit; font: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; text-transform: uppercase; box-shadow: inset 0 0 0 1px var(--bl-line); outline: none; }
+.bl-dial__hex:focus { box-shadow: inset 0 0 0 2px var(--bl-accent); }
+.bl-dial__hex[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--bl-error); }
+.bl-dial__btn { flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px; background: var(--bl-field); color: var(--bl-muted); cursor: pointer; box-shadow: inset 0 0 0 1px var(--bl-line); }
+.bl-dial__btn:hover { color: var(--bl-ink); }
+.bl-dial__btn:focus-visible, .bl-dial__swatch:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 2px; }
+.bl-dial__swatches { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
+.bl-dial__swatch { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 7px; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15); transition: transform 160ms cubic-bezier(.3,1.6,.5,1); }
+.bl-dial__swatch:hover { transform: scale(1.15); }
+.bl-dial__swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bl-bg), 0 0 0 4px var(--bl-ink); }
+@media (prefers-reduced-motion: reduce) { .bl-dial__thumb, .bl-dial__swatch { 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 parseHex(text) {
+  const m = String(text).trim().replace(/^#/, "").match(/^([0-9a-f]{3}|[0-9a-f]{6})$/i);
+  if (!m) return null;
+  const full = m[1].length === 3 ? m[1].replace(/./g, (c) => c + c) : m[1];
+  const n = parseInt(full, 16);
+  return [n >> 16 & 255, n >> 8 & 255, n & 255];
+}
+const toHex = ([r, g, b]) => `#${[r, g, b].map((c) => Math.round(c).toString(16).padStart(2, "0")).join("")}`;
+function hsvToRgb(h, s, v) {
+  const f = (n) => {
+    const k = (n + h / 60) % 6;
+    return v * (1 - s * Math.max(0, Math.min(k, 4 - k, 1)));
+  };
+  return [f(5) * 255, f(3) * 255, f(1) * 255];
+}
+function rgbToHsv([r, g, b]) {
+  const [rn, gn, bn] = [r / 255, g / 255, b / 255];
+  const max = Math.max(rn, gn, bn);
+  const d = max - Math.min(rn, gn, bn);
+  let h = 0;
+  if (d) h = max === rn ? (gn - bn) / d % 6 : max === gn ? (bn - rn) / d + 2 : (rn - gn) / d + 4;
+  return { h: (h * 60 + 360) % 360, s: max ? d / max : 0, v: max };
+}
+const DEFAULT_SWATCHES = ["#1a1c2c", "#5d275d", "#b13e53", "#ef7d57", "#ffcd75", "#a7f070", "#38b764", "#257179", "#29366f", "#3b5dc9", "#41a6f6", "#73eff7", "#f4f4f4", "#94b0c2", "#566c86", "#333c57"];
+function ColorDial({
+  value,
+  defaultValue = "#73eff7",
+  onValueChange,
+  swatches = DEFAULT_SWATCHES,
+  size = 240,
+  ringWidth = 22,
+  eyedropper = true,
+  label = "Color",
+  backgroundColor = "#1a1c2c",
+  fieldColor = "#0b0b14",
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  lineColor = "#333c57",
+  accentColor = "#73eff7",
+  errorColor = "#ef7d57",
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  className = "",
+  style
+}) {
+  useStyles();
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const [inner, setInner] = useState(defaultValue);
+  const hex = (value ?? inner).toLowerCase();
+  const [hsv, setHsv] = useState(() => rgbToHsv(parseHex(hex) ?? [0, 0, 0]));
+  const [draft, setDraft] = useState(hex);
+  const [dragging, setDragging] = useState(null);
+  const [canSample, setCanSample] = useState(false);
+  const wheelRef = useRef(null);
+  const lastEmitted = useRef(hex);
+  useEffect(() => setCanSample(eyedropper && typeof window !== "undefined" && "EyeDropper" in window), [eyedropper]);
+  useEffect(() => {
+    setDraft(hex);
+    if (hex === lastEmitted.current) return;
+    const rgb = parseHex(hex);
+    if (!rgb) return;
+    const next = rgbToHsv(rgb);
+    setHsv((current) => ({ h: next.s === 0 || next.v === 0 ? current.h : next.h, s: next.s, v: next.v }));
+    lastEmitted.current = hex;
+  }, [hex]);
+  const emit = (next) => {
+    setHsv(next);
+    const out = toHex(hsvToRgb(next.h, next.s, next.v));
+    lastEmitted.current = out;
+    if (value === void 0) setInner(out);
+    onValueChange?.(out);
+  };
+  const emitRgb = (rgb) => {
+    const next = rgbToHsv(rgb);
+    emit({ h: next.s === 0 || next.v === 0 ? hsv.h : next.h, s: next.s, v: next.v });
+  };
+  const ringFrac = ringWidth / size;
+  const innerR = 0.5 - ringFrac;
+  const sq = Math.SQRT2 * innerR - 0.06;
+  const fromPointer = (event, mode) => {
+    const rect = wheelRef.current.getBoundingClientRect();
+    const x = (event.clientX - rect.left) / rect.width - 0.5;
+    const y = (event.clientY - rect.top) / rect.height - 0.5;
+    if (mode === "ring") {
+      const h = (Math.atan2(y, x) * 180 / Math.PI + 90 + 360) % 360;
+      emit({ ...hsv, h });
+    } else {
+      const s = Math.max(0, Math.min(1, (x + sq / 2) / sq));
+      const v = Math.max(0, Math.min(1, 1 - (y + sq / 2) / sq));
+      emit({ ...hsv, s, v });
+    }
+  };
+  const onPointerDown = (event) => {
+    const rect = wheelRef.current.getBoundingClientRect();
+    const x = (event.clientX - rect.left) / rect.width - 0.5;
+    const y = (event.clientY - rect.top) / rect.height - 0.5;
+    const r = Math.hypot(x, y);
+    const mode = r >= innerR - 0.01 && r <= 0.5 ? "ring" : Math.abs(x) <= sq / 2 && Math.abs(y) <= sq / 2 ? "square" : null;
+    if (!mode) return;
+    event.preventDefault();
+    try {
+      event.currentTarget.setPointerCapture(event.pointerId);
+    } catch {
+    }
+    setDragging(mode);
+    fromPointer(event, mode);
+    wheelRef.current.querySelector(`[data-part="${mode}"]`)?.focus({ preventScroll: true });
+  };
+  const onRingKey = (event) => {
+    const step = event.shiftKey ? 10 : 1;
+    const delta = { ArrowRight: step, ArrowUp: step, ArrowLeft: -step, ArrowDown: -step }[event.key];
+    if (delta === void 0 && event.key !== "Home" && event.key !== "End") return;
+    event.preventDefault();
+    const h = event.key === "Home" ? 0 : event.key === "End" ? 359 : (hsv.h + delta + 360) % 360;
+    emit({ ...hsv, h });
+  };
+  const onSquareKey = (event) => {
+    const step = event.shiftKey ? 0.1 : 0.01;
+    const moves = { ArrowRight: ["s", step], ArrowLeft: ["s", -step], ArrowUp: ["v", step], ArrowDown: ["v", -step] };
+    const move = moves[event.key];
+    if (!move) return;
+    event.preventDefault();
+    const [axis, delta] = move;
+    emit({ ...hsv, [axis]: Math.max(0, Math.min(1, hsv[axis] + delta)) });
+  };
+  const commitDraft = () => {
+    const rgb = parseHex(draft);
+    if (rgb) emitRgb(rgb);
+  };
+  const sample = async () => {
+    try {
+      const result = await new window.EyeDropper().open();
+      const rgb = parseHex(result.sRGBHex);
+      if (rgb) emitRgb(rgb);
+    } catch {
+    }
+  };
+  const angle = (hsv.h - 90) * Math.PI / 180;
+  const ringR = 0.5 - ringFrac / 2;
+  const valid = !!parseHex(draft);
+  const pct = (n) => Math.round(n * 100);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `bl-dial ${className}`,
+      role: "group",
+      "aria-label": label,
+      "data-dragging": dragging || void 0,
+      style: {
+        "--bl-size": `${size}px`,
+        "--bl-ring": `${ringWidth}px`,
+        "--bl-sq": `${sq * 100}%`,
+        "--bl-h": hsv.h,
+        "--bl-thumb": hex,
+        "--bl-bg": backgroundColor,
+        "--bl-field": fieldColor,
+        "--bl-ink": textColor,
+        "--bl-muted": mutedColor,
+        "--bl-line": lineColor,
+        "--bl-accent": accentColor,
+        "--bl-error": errorColor,
+        "--bl-font": fontFamily,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: wheelRef,
+            className: "bl-dial__wheel",
+            onPointerDown,
+            onPointerMove: (event) => dragging && fromPointer(event, dragging),
+            onPointerUp: () => setDragging(null),
+            onPointerCancel: () => setDragging(null),
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "bl-dial__ring", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx("div", { className: "bl-dial__square", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "bl-dial__thumb",
+                  "data-part": "ring",
+                  "data-active": dragging === "ring" || void 0,
+                  role: "slider",
+                  tabIndex: 0,
+                  "aria-label": "Hue",
+                  "aria-valuemin": 0,
+                  "aria-valuemax": 359,
+                  "aria-valuenow": Math.round(hsv.h),
+                  "aria-valuetext": `Hue ${Math.round(hsv.h)} degrees`,
+                  onKeyDown: onRingKey,
+                  style: { left: `${(0.5 + Math.cos(angle) * ringR) * 100}%`, top: `${(0.5 + Math.sin(angle) * ringR) * 100}%`, background: `hsl(${hsv.h} 100% 50%)` }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "bl-dial__thumb",
+                  "data-part": "square",
+                  "data-active": dragging === "square" || void 0,
+                  role: "slider",
+                  tabIndex: 0,
+                  "aria-label": "Saturation and brightness",
+                  "aria-valuemin": 0,
+                  "aria-valuemax": 100,
+                  "aria-valuenow": pct(hsv.s),
+                  "aria-valuetext": `Saturation ${pct(hsv.s)}%, brightness ${pct(hsv.v)}%`,
+                  onKeyDown: onSquareKey,
+                  style: { left: `${(0.5 - sq / 2 + hsv.s * sq) * 100}%`, top: `${(0.5 - sq / 2 + (1 - hsv.v) * sq) * 100}%` }
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "bl-dial__row", children: [
+          /* @__PURE__ */ jsx("span", { className: "bl-dial__preview", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              className: "bl-dial__hex",
+              "aria-label": `${label} hex code`,
+              "aria-invalid": !valid,
+              spellCheck: false,
+              value: draft,
+              onChange: (event) => setDraft(event.target.value),
+              onBlur: commitDraft,
+              onKeyDown: (event) => event.key === "Enter" && commitDraft()
+            }
+          ),
+          canSample && /* @__PURE__ */ jsx("button", { type: "button", className: "bl-dial__btn", "aria-label": "Pick a color from the screen", onClick: sample, children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "m9.5 3.5 3 3M11 2a1.4 1.4 0 0 1 2 0l1 1a1.4 1.4 0 0 1 0 2l-1.5 1.5-3-3zM8.5 4.5 2.8 10.2 2 14l3.8-.8 5.7-5.7" }) }) })
+        ] }),
+        swatches.length > 0 && /* @__PURE__ */ jsx("ul", { className: "bl-dial__swatches", "aria-label": "Swatches", id: `${uid}-swatches`, children: swatches.map((swatch) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "bl-dial__swatch",
+            "aria-label": swatch,
+            "aria-pressed": swatch.toLowerCase() === hex,
+            style: { background: swatch },
+            onClick: () => {
+              const rgb = parseHex(swatch);
+              if (rgb) emitRgb(rgb);
+            }
+          }
+        ) }, swatch)) })
+      ]
+    }
+  );
+}
+export {
+  ColorDial as default,
+  hsvToRgb,
+  parseHex,
+  rgbToHsv
+};