@blurrow/ui 0.2.0 → 0.2.1

package/dist/Checkbox.js

@@ -0,0 +1,84 @@
+"use client";
+
+// ../../components/ui/Checkbox.tsx
+import { useState, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Checkbox({
+  checked,
+  defaultChecked = false,
+  onChange,
+  label,
+  description,
+  disabled = false,
+  indeterminate = false,
+  className = ""
+}) {
+  const [internal, setInternal] = useState(defaultChecked);
+  const uid = useId();
+  const isChecked = checked !== void 0 ? checked : internal;
+  const toggle = () => {
+    if (disabled) return;
+    const next = !isChecked;
+    setInternal(next);
+    onChange?.(next);
+  };
+  const active = isChecked || indeterminate;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: [
+        "flex items-center justify-between gap-4 select-none",
+        disabled ? "opacity-40 pointer-events-none" : "cursor-pointer group/checkbox",
+        className
+      ].join(" "),
+      onClick: toggle,
+      children: [
+        (label || description) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 min-w-0", children: [
+          label && /* @__PURE__ */ jsx("span", { id: `${uid}-label`, className: "text-[13px] font-medium text-ink leading-snug", children: label }),
+          description && /* @__PURE__ */ jsx("span", { id: `${uid}-desc`, className: "text-[12px] text-ink-muted leading-relaxed", children: description })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            role: "checkbox",
+            "aria-checked": indeterminate ? "mixed" : isChecked,
+            "aria-labelledby": label ? `${uid}-label` : void 0,
+            "aria-describedby": description ? `${uid}-desc` : void 0,
+            disabled,
+            className: [
+              "shrink-0 w-[22px] h-[22px] rounded-[7px] flex items-center justify-center cursor-pointer text-ink-inverse",
+              "transition-[box-shadow,transform,scale] duration-200 ease-out active:scale-90",
+              "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink",
+              // an empty box answers the pointer like any other field
+              active ? "" : "group-hover/checkbox:[box-shadow:var(--field-shadow-hover)]"
+            ].join(" "),
+            style: {
+              background: active ? "var(--face-inverse)" : "var(--field)",
+              boxShadow: active ? "var(--face-inverse-shadow)" : "var(--field-shadow)"
+            },
+            children: active && (indeterminate ? /* @__PURE__ */ jsx("span", { className: "animate-checkbox-in", children: /* @__PURE__ */ jsx("svg", { width: "10", height: "2", viewBox: "0 0 10 2", fill: "none", children: /* @__PURE__ */ jsx("rect", { width: "10", height: "2", rx: "1", fill: "currentColor" }) }) }) : (
+              /* The mark is pressed into the face: it takes the inverse ink, so it
+                 reads on the dark face in light mode and the pale one in dark */
+              /* @__PURE__ */ jsx("svg", { width: "13", height: "10", viewBox: "0 0 13 10", fill: "none", style: { filter: "drop-shadow(var(--emboss-inverse))" }, children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M1.5 5l3.5 3.5L11.5 1",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  className: "animate-draw-check"
+                }
+              ) })
+            ))
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  Checkbox
+};
+//# sourceMappingURL=Checkbox.js.map

package/dist/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/Checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useState, useId } from \"react\";\n\ninterface CheckboxProps {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  onChange?: (checked: boolean) => void;\n  label?: string;\n  description?: string;\n  disabled?: boolean;\n  indeterminate?: boolean;\n  className?: string;\n}\n\nexport function Checkbox({\n  checked,\n  defaultChecked = false,\n  onChange,\n  label,\n  description,\n  disabled = false,\n  indeterminate = false,\n  className = \"\",\n}: CheckboxProps) {\n  const [internal, setInternal] = useState(defaultChecked);\n  const uid = useId();\n  const isChecked = checked !== undefined ? checked : internal;\n\n  const toggle = () => {\n    if (disabled) return;\n    const next = !isChecked;\n    setInternal(next);\n    onChange?.(next);\n  };\n\n  const active = isChecked || indeterminate;\n\n  return (\n    <div\n      className={[\n        \"flex items-center justify-between gap-4 select-none\",\n        disabled ? \"opacity-40 pointer-events-none\" : \"cursor-pointer group/checkbox\",\n        className,\n      ].join(\" \")}\n      onClick={toggle}\n    >\n      {(label || description) && (\n        <div className=\"flex flex-col gap-0.5 min-w-0\">\n          {label && (\n            <span id={`${uid}-label`} className=\"text-[13px] font-medium text-ink leading-snug\">{label}</span>\n          )}\n          {description && (\n            <span id={`${uid}-desc`} className=\"text-[12px] text-ink-muted leading-relaxed\">{description}</span>\n          )}\n        </div>\n      )}\n\n      {/* Clicks bubble to the row, so the control itself has no onClick */}\n      <button\n        type=\"button\"\n        role=\"checkbox\"\n        aria-checked={indeterminate ? \"mixed\" : isChecked}\n        aria-labelledby={label ? `${uid}-label` : undefined}\n        aria-describedby={description ? `${uid}-desc` : undefined}\n        disabled={disabled}\n        className={[\n          \"shrink-0 w-[22px] h-[22px] rounded-[7px] flex items-center justify-center cursor-pointer text-ink-inverse\",\n          \"transition-[box-shadow,transform,scale] duration-200 ease-out active:scale-90\",\n          \"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink\",\n          // an empty box answers the pointer like any other field\n          active ? \"\" : \"group-hover/checkbox:[box-shadow:var(--field-shadow-hover)]\",\n        ].join(\" \")}\n        style={{\n          background: active ? \"var(--face-inverse)\" : \"var(--field)\",\n          boxShadow: active ? \"var(--face-inverse-shadow)\" : \"var(--field-shadow)\",\n        }}\n      >\n        {active && (\n          indeterminate ? (\n            <span className=\"animate-checkbox-in\">\n              <svg width=\"10\" height=\"2\" viewBox=\"0 0 10 2\" fill=\"none\">\n                <rect width=\"10\" height=\"2\" rx=\"1\" fill=\"currentColor\" />\n              </svg>\n            </span>\n          ) : (\n            /* The mark is pressed into the face: it takes the inverse ink, so it\n               reads on the dark face in light mode and the pale one in dark */\n            <svg width=\"13\" height=\"10\" viewBox=\"0 0 13 10\" fill=\"none\" style={{ filter: \"drop-shadow(var(--emboss-inverse))\" }}>\n              <path\n                d=\"M1.5 5l3.5 3.5L11.5 1\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                className=\"animate-draw-check\"\n              />\n            </svg>\n          )\n        )}\n      </button>\n    </div>\n  );\n}\n"],"mappings":";;;AAEA,SAAgB,UAAU,aAAa;AA8C/B,SAEI,KAFJ;AAjCD,SAAS,SAAS;AAAA,EACvB;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,YAAY;AACd,GAAkB;AAChB,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,cAAc;AACvD,QAAM,MAAM,MAAM;AAClB,QAAM,YAAY,YAAY,SAAY,UAAU;AAEpD,QAAM,SAAS,MAAM;AACnB,QAAI,SAAU;AACd,UAAM,OAAO,CAAC;AACd,gBAAY,IAAI;AAChB,eAAW,IAAI;AAAA,EACjB;AAEA,QAAM,SAAS,aAAa;AAE5B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,WAAW,mCAAmC;AAAA,QAC9C;AAAA,MACF,EAAE,KAAK,GAAG;AAAA,MACV,SAAS;AAAA,MAEP;AAAA,kBAAS,gBACT,qBAAC,SAAI,WAAU,iCACZ;AAAA,mBACC,oBAAC,UAAK,IAAI,GAAG,GAAG,UAAU,WAAU,iDAAiD,iBAAM;AAAA,UAE5F,eACC,oBAAC,UAAK,IAAI,GAAG,GAAG,SAAS,WAAU,8CAA8C,uBAAY;AAAA,WAEjG;AAAA,QAIF;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,MAAK;AAAA,YACL,gBAAc,gBAAgB,UAAU;AAAA,YACxC,mBAAiB,QAAQ,GAAG,GAAG,WAAW;AAAA,YAC1C,oBAAkB,cAAc,GAAG,GAAG,UAAU;AAAA,YAChD;AAAA,YACA,WAAW;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA;AAAA,cAEA,SAAS,KAAK;AAAA,YAChB,EAAE,KAAK,GAAG;AAAA,YACV,OAAO;AAAA,cACL,YAAY,SAAS,wBAAwB;AAAA,cAC7C,WAAW,SAAS,+BAA+B;AAAA,YACrD;AAAA,YAEC,qBACC,gBACE,oBAAC,UAAK,WAAU,uBACd,8BAAC,SAAI,OAAM,MAAK,QAAO,KAAI,SAAQ,YAAW,MAAK,QACjD,8BAAC,UAAK,OAAM,MAAK,QAAO,KAAI,IAAG,KAAI,MAAK,gBAAe,GACzD,GACF;AAAA;AAAA;AAAA,cAIA,oBAAC,SAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,OAAO,EAAE,QAAQ,qCAAqC,GAChH;AAAA,gBAAC;AAAA;AAAA,kBACC,GAAE;AAAA,kBACF,QAAO;AAAA,kBACP,aAAY;AAAA,kBACZ,eAAc;AAAA,kBACd,gBAAe;AAAA,kBACf,WAAU;AAAA;AAAA,cACZ,GACF;AAAA;AAAA;AAAA,QAGN;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/CloseButton.d.ts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface CloseButtonProps {
+    onClick?: () => void;
+    label?: string;
+    size?: "sm" | "md";
+    tone?: "light" | "dark";
+    className?: string;
+}
+declare function CloseButton({ onClick, label, size, tone, className, }: CloseButtonProps): react_jsx_runtime.JSX.Element;
+
+export { CloseButton };

package/dist/CloseButton.js

@@ -0,0 +1,63 @@
+"use client";
+
+// ../../components/ui/CloseButton.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var sizes = {
+  sm: { box: "w-6 h-6 rounded-[7px]", icon: 9 },
+  md: { box: "w-7 h-7 rounded-[8px]", icon: 10 }
+};
+function CloseButton({
+  onClick,
+  label = "Close",
+  size = "md",
+  tone = "light",
+  className = ""
+}) {
+  const dark = tone === "dark";
+  const s = sizes[size];
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      "aria-label": label,
+      className: [
+        "group/close relative shrink-0 flex items-center justify-center cursor-pointer",
+        "transition-[color,background,scale] duration-150 active:scale-95",
+        "focus-visible:outline-2 focus-visible:outline-offset-2",
+        dark ? "text-white/45 hover:text-white focus-visible:outline-white" : "text-ink-faint hover:text-ink focus-visible:outline-ink",
+        s.box,
+        className
+      ].join(" "),
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: [
+              "absolute inset-0 rounded-[inherit] opacity-0 group-hover/close:opacity-100 transition-opacity duration-150",
+              dark ? "[background:var(--tile-dark)] [box-shadow:var(--tile-dark-shadow)]" : "[background:var(--face)] [box-shadow:var(--face-shadow)]"
+            ].join(" ")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "relative",
+            width: s.icon,
+            height: s.icon,
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2.5",
+            viewBox: "0 0 24 24",
+            children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  CloseButton
+};
+//# sourceMappingURL=CloseButton.js.map

package/dist/CloseButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/CloseButton.tsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\n\ninterface CloseButtonProps {\n  onClick?: () => void;\n  label?: string;\n  size?: \"sm\" | \"md\";\n  tone?: \"light\" | \"dark\";\n  className?: string;\n}\n\nconst sizes = {\n  sm: { box: \"w-6 h-6 rounded-[7px]\", icon: 9 },\n  md: { box: \"w-7 h-7 rounded-[8px]\", icon: 10 },\n};\n\n/* Quiet until hovered, then it rises into a raised face like every other\n   pressable thing — so it reads as a control, not decoration.            */\nexport function CloseButton({\n  onClick,\n  label = \"Close\",\n  size = \"md\",\n  tone = \"light\",\n  className = \"\",\n}: CloseButtonProps) {\n  const dark = tone === \"dark\";\n  const s = sizes[size];\n\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      aria-label={label}\n      className={[\n        \"group/close relative shrink-0 flex items-center justify-center cursor-pointer\",\n        \"transition-[color,background,scale] duration-150 active:scale-95\",\n        \"focus-visible:outline-2 focus-visible:outline-offset-2\",\n        dark\n          ? \"text-white/45 hover:text-white focus-visible:outline-white\"\n          : \"text-ink-faint hover:text-ink focus-visible:outline-ink\",\n        s.box,\n        className,\n      ].join(\" \")}\n    >\n      <span\n        aria-hidden\n        className={[\n          \"absolute inset-0 rounded-[inherit] opacity-0 group-hover/close:opacity-100 transition-opacity duration-150\",\n          dark\n            ? \"[background:var(--tile-dark)] [box-shadow:var(--tile-dark-shadow)]\"\n            : \"[background:var(--face)] [box-shadow:var(--face-shadow)]\",\n        ].join(\" \")}\n      />\n      <svg\n        className=\"relative\"\n        width={s.icon}\n        height={s.icon}\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2.5\"\n        viewBox=\"0 0 24 24\"\n      >\n        <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n      </svg>\n    </button>\n  );\n}\n"],"mappings":";;;AA8BI,SAeE,KAfF;AAlBJ,IAAM,QAAQ;AAAA,EACZ,IAAI,EAAE,KAAK,yBAAyB,MAAM,EAAE;AAAA,EAC5C,IAAI,EAAE,KAAK,yBAAyB,MAAM,GAAG;AAC/C;AAIO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,OAAO;AAAA,EACP,YAAY;AACd,GAAqB;AACnB,QAAM,OAAO,SAAS;AACtB,QAAM,IAAI,MAAM,IAAI;AAEpB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA,cAAY;AAAA,MACZ,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA,OACI,+DACA;AAAA,QACJ,EAAE;AAAA,QACF;AAAA,MACF,EAAE,KAAK,GAAG;AAAA,MAEV;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,eAAW;AAAA,YACX,WAAW;AAAA,cACT;AAAA,cACA,OACI,uEACA;AAAA,YACN,EAAE,KAAK,GAAG;AAAA;AAAA,QACZ;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE;AAAA,YACT,QAAQ,EAAE;AAAA,YACV,MAAK;AAAA,YACL,QAAO;AAAA,YACP,aAAY;AAAA,YACZ,SAAQ;AAAA,YAER,8BAAC,UAAK,eAAc,SAAQ,gBAAe,SAAQ,GAAE,wBAAuB;AAAA;AAAA,QAC9E;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/CodeBlock.d.ts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface CodeBlockProps {
+    code: string;
+    language?: string;
+    showLineNumbers?: boolean;
+    title?: string;
+    className?: string;
+}
+declare function CodeBlock({ code, language, showLineNumbers, title, className, }: CodeBlockProps): react_jsx_runtime.JSX.Element;
+
+export { CodeBlock };

package/dist/CodeBlock.js

@@ -0,0 +1,221 @@
+"use client";
+
+// ../../components/ui/CodeBlock.tsx
+import { useState, useCallback, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var KEYWORDS = /* @__PURE__ */ new Set([
+  "import",
+  "from",
+  "export",
+  "default",
+  "function",
+  "return",
+  "const",
+  "let",
+  "var",
+  "if",
+  "else",
+  "for",
+  "while",
+  "do",
+  "class",
+  "extends",
+  "new",
+  "typeof",
+  "instanceof",
+  "null",
+  "undefined",
+  "true",
+  "false",
+  "async",
+  "await",
+  "try",
+  "catch",
+  "throw",
+  "finally",
+  "interface",
+  "type",
+  "enum",
+  "as",
+  "in",
+  "of",
+  "switch",
+  "case",
+  "break",
+  "continue",
+  "void",
+  "never",
+  "any",
+  "string",
+  "number",
+  "boolean",
+  "public",
+  "private",
+  "protected",
+  "static",
+  "abstract",
+  "readonly"
+]);
+var TOKEN_RE = /(\/\/.*$|"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'|`(?:[^`\\]|\\.)*`|<\/?\s*[A-Z][a-zA-Z0-9.]*|<\/?\s*[a-z][a-zA-Z0-9-]*|=>|\b\d+(?:\.\d+)?\b|\b[a-zA-Z_$][a-zA-Z0-9_$]*\b)/;
+var TOKEN_STYLES = {
+  keyword: "text-code-keyword",
+  string: "text-code-string",
+  comment: "text-ink-faint italic",
+  tag: "text-code-tag",
+  number: "text-code-number"
+};
+function classifyToken(val) {
+  if (val.startsWith("//")) return "comment";
+  if (val[0] === '"' || val[0] === "'" || val[0] === "`") return "string";
+  if (val[0] === "<") return "tag";
+  if (val === "=>") return "keyword";
+  if (/^\d/.test(val)) return "number";
+  if (KEYWORDS.has(val)) return "keyword";
+  return "plain";
+}
+function tokenizeLine(line) {
+  const tokens = [];
+  const re = new RegExp(TOKEN_RE.source, "g");
+  let lastIndex = 0;
+  let match;
+  while ((match = re.exec(line)) !== null) {
+    if (match.index > lastIndex) {
+      tokens.push({ type: "plain", value: line.slice(lastIndex, match.index) });
+    }
+    tokens.push({ type: classifyToken(match[0]), value: match[0] });
+    lastIndex = re.lastIndex;
+  }
+  if (lastIndex < line.length) {
+    tokens.push({ type: "plain", value: line.slice(lastIndex) });
+  }
+  return tokens;
+}
+var HIGHLIGHTABLE = /* @__PURE__ */ new Set(["js", "jsx", "ts", "tsx", "javascript", "typescript"]);
+function CodeBlock({
+  code,
+  language,
+  showLineNumbers = false,
+  title,
+  className = ""
+}) {
+  const [copied, setCopied] = useState(false);
+  const timer = useRef(null);
+  const handleCopy = useCallback(() => {
+    navigator.clipboard.writeText(code).then(() => {
+      setCopied(true);
+      if (timer.current) clearTimeout(timer.current);
+      timer.current = setTimeout(() => setCopied(false), 2e3);
+    });
+  }, [code]);
+  const highlight = language ? HIGHLIGHTABLE.has(language.toLowerCase()) : false;
+  const lines = useMemo(() => code.split("\n"), [code]);
+  const tokenized = useMemo(
+    () => highlight ? lines.map((line) => tokenizeLine(line)) : null,
+    [lines, highlight]
+  );
+  return (
+    /* The header lives in the bezel and the code sits on the raised face,
+       so the filename reads as a label on the object, not part of it.  */
+    /* @__PURE__ */ jsxs(
+      "figure",
+      {
+        className: ["rounded-[18px] p-1.5 pt-0 m-0", className].filter(Boolean).join(" "),
+        style: { background: "var(--panel-bezel)", boxShadow: "var(--panel-shadow)" },
+        children: [
+          /* @__PURE__ */ jsxs("figcaption", { className: "flex items-center justify-between gap-3 pl-3 pr-0.5 h-10", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
+              title && /* @__PURE__ */ jsx("span", { className: "text-[12px] font-medium text-ink-label truncate", children: title }),
+              language && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "text-[11px] font-semibold text-ink-muted lowercase px-1.5 py-0.5 rounded-[5px]",
+                  style: { background: "var(--well)", boxShadow: "var(--well-shadow)" },
+                  children: language
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleCopy,
+                "aria-label": copied ? "copied to clipboard" : "copy code",
+                className: "inline-flex items-center h-7 px-2.5 rounded-[8px] text-[11.5px] font-medium cursor-pointer transition-[color,transform,scale] duration-150 active:scale-95 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink",
+                style: {
+                  background: "var(--face)",
+                  boxShadow: "var(--face-shadow)",
+                  color: copied ? "var(--success-strong)" : void 0
+                },
+                children: /* @__PURE__ */ jsxs("span", { className: "grid overflow-hidden text-ink-body", style: { color: "inherit" }, children: [
+                  /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      "aria-hidden": true,
+                      className: "[grid-area:1/1] inline-flex items-center justify-center gap-1.5",
+                      style: {
+                        transform: copied ? "translateY(-110%)" : "none",
+                        opacity: copied ? 0 : 1,
+                        filter: copied ? "blur(2px)" : "none",
+                        transition: "transform 320ms var(--ease-out-soft), opacity 220ms ease, filter 220ms ease"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: [
+                          /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }),
+                          /* @__PURE__ */ jsx("path", { d: "M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" })
+                        ] }),
+                        "copy"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      "aria-hidden": true,
+                      className: "[grid-area:1/1] inline-flex items-center justify-center gap-1.5",
+                      style: {
+                        transform: copied ? "none" : "translateY(110%)",
+                        opacity: copied ? 1 : 0,
+                        filter: copied ? "none" : "blur(2px)",
+                        transition: "transform 380ms var(--ease-spring), opacity 220ms ease, filter 220ms ease"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx("svg", { width: "12", height: "12", fill: "none", stroke: "currentColor", strokeWidth: "2.25", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
+                          "path",
+                          {
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round",
+                            d: "M5 13l4 4L19 7",
+                            pathLength: 15,
+                            className: copied ? "animate-draw-check" : ""
+                          },
+                          String(copied)
+                        ) }),
+                        "copied"
+                      ]
+                    }
+                  )
+                ] })
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "sr-only", children: copied ? "copied to clipboard" : "" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "bg-panel-face rounded-[13px] overflow-x-auto scroll-thin",
+              style: { boxShadow: "var(--panel-face-shadow)" },
+              children: /* @__PURE__ */ jsx("pre", { className: "py-4 px-4 text-[13px] leading-[1.7] font-mono text-ink-soft", children: /* @__PURE__ */ jsx("code", { children: lines.map((line, i) => /* @__PURE__ */ jsxs("div", { className: "flex", children: [
+                showLineNumbers && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "select-none w-8 shrink-0 text-right pr-4 text-ink-ghost tabular-nums", children: i + 1 }),
+                /* @__PURE__ */ jsx("span", { className: "flex-1", children: tokenized && tokenized[i].length ? tokenized[i].map((tok, j) => /* @__PURE__ */ jsx("span", { className: TOKEN_STYLES[tok.type] || "", children: tok.value }, j)) : line || "\n" })
+              ] }, i)) }) })
+            }
+          )
+        ]
+      }
+    )
+  );
+}
+export {
+  CodeBlock
+};
+//# sourceMappingURL=CodeBlock.js.map

package/dist/CodeBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/CodeBlock.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useState, useCallback, useMemo, useRef } from \"react\";\n\ninterface CodeBlockProps {\n  code: string;\n  language?: string;\n  showLineNumbers?: boolean;\n  title?: string;\n  className?: string;\n}\n\nconst KEYWORDS = new Set([\n  \"import\", \"from\", \"export\", \"default\", \"function\", \"return\",\n  \"const\", \"let\", \"var\", \"if\", \"else\", \"for\", \"while\", \"do\",\n  \"class\", \"extends\", \"new\", \"typeof\", \"instanceof\",\n  \"null\", \"undefined\", \"true\", \"false\",\n  \"async\", \"await\", \"try\", \"catch\", \"throw\", \"finally\",\n  \"interface\", \"type\", \"enum\", \"as\", \"in\", \"of\",\n  \"switch\", \"case\", \"break\", \"continue\",\n  \"void\", \"never\", \"any\", \"string\", \"number\", \"boolean\",\n  \"public\", \"private\", \"protected\", \"static\", \"abstract\", \"readonly\",\n]);\n\nconst TOKEN_RE = /(\\/\\/.*$|\"(?:[^\"\\\\]|\\\\.)*\"|'(?:[^'\\\\]|\\\\.)*'|`(?:[^`\\\\]|\\\\.)*`|<\\/?\\s*[A-Z][a-zA-Z0-9.]*|<\\/?\\s*[a-z][a-zA-Z0-9-]*|=>|\\b\\d+(?:\\.\\d+)?\\b|\\b[a-zA-Z_$][a-zA-Z0-9_$]*\\b)/;\n\nconst TOKEN_STYLES: Record<string, string> = {\n  keyword: \"text-code-keyword\",\n  string:  \"text-code-string\",\n  comment: \"text-ink-faint italic\",\n  tag:     \"text-code-tag\",\n  number:  \"text-code-number\",\n};\n\nfunction classifyToken(val: string): string {\n  if (val.startsWith(\"//\")) return \"comment\";\n  if (val[0] === '\"' || val[0] === \"'\" || val[0] === \"`\") return \"string\";\n  if (val[0] === \"<\") return \"tag\";\n  if (val === \"=>\") return \"keyword\";\n  if (/^\\d/.test(val)) return \"number\";\n  if (KEYWORDS.has(val)) return \"keyword\";\n  return \"plain\";\n}\n\nfunction tokenizeLine(line: string): { type: string; value: string }[] {\n  const tokens: { type: string; value: string }[] = [];\n  const re = new RegExp(TOKEN_RE.source, \"g\");\n  let lastIndex = 0;\n  let match;\n\n  while ((match = re.exec(line)) !== null) {\n    if (match.index > lastIndex) {\n      tokens.push({ type: \"plain\", value: line.slice(lastIndex, match.index) });\n    }\n    tokens.push({ type: classifyToken(match[0]), value: match[0] });\n    lastIndex = re.lastIndex;\n  }\n\n  if (lastIndex < line.length) {\n    tokens.push({ type: \"plain\", value: line.slice(lastIndex) });\n  }\n\n  return tokens;\n}\n\nconst HIGHLIGHTABLE = new Set([\"js\", \"jsx\", \"ts\", \"tsx\", \"javascript\", \"typescript\"]);\n\nexport function CodeBlock({\n  code,\n  language,\n  showLineNumbers = false,\n  title,\n  className = \"\",\n}: CodeBlockProps) {\n  const [copied, setCopied] = useState(false);\n  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const handleCopy = useCallback(() => {\n    navigator.clipboard.writeText(code).then(() => {\n      setCopied(true);\n      if (timer.current) clearTimeout(timer.current);\n      timer.current = setTimeout(() => setCopied(false), 2000);\n    });\n  }, [code]);\n\n  const highlight = language ? HIGHLIGHTABLE.has(language.toLowerCase()) : false;\n\n  const lines = useMemo(() => code.split(\"\\n\"), [code]);\n  const tokenized = useMemo(\n    () => (highlight ? lines.map((line) => tokenizeLine(line)) : null),\n    [lines, highlight],\n  );\n\n  return (\n    /* The header lives in the bezel and the code sits on the raised face,\n       so the filename reads as a label on the object, not part of it.  */\n    <figure\n      className={[\"rounded-[18px] p-1.5 pt-0 m-0\", className].filter(Boolean).join(\" \")}\n      style={{ background: \"var(--panel-bezel)\", boxShadow: \"var(--panel-shadow)\" }}\n    >\n      <figcaption className=\"flex items-center justify-between gap-3 pl-3 pr-0.5 h-10\">\n        <div className=\"flex items-center gap-2 min-w-0\">\n          {title && (\n            <span className=\"text-[12px] font-medium text-ink-label truncate\">{title}</span>\n          )}\n          {language && (\n            <span\n              className=\"text-[11px] font-semibold text-ink-muted lowercase px-1.5 py-0.5 rounded-[5px]\"\n              style={{ background: \"var(--well)\", boxShadow: \"var(--well-shadow)\" }}\n            >\n              {language}\n            </span>\n          )}\n        </div>\n        {/* Both labels share one grid cell, so the key is always as wide as\n            the longer one and never jumps. Swapping rolls the old label up\n            and out of a small window while the new one rolls in beneath\n            it; the check draws itself as it arrives.                    */}\n        <button\n          type=\"button\"\n          onClick={handleCopy}\n          aria-label={copied ? \"copied to clipboard\" : \"copy code\"}\n          className=\"inline-flex items-center h-7 px-2.5 rounded-[8px] text-[11.5px] font-medium cursor-pointer transition-[color,transform,scale] duration-150 active:scale-95 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink\"\n          style={{\n            background: \"var(--face)\",\n            boxShadow: \"var(--face-shadow)\",\n            color: copied ? \"var(--success-strong)\" : undefined,\n          }}\n        >\n          <span className=\"grid overflow-hidden text-ink-body\" style={{ color: \"inherit\" }}>\n            <span\n              aria-hidden\n              className=\"[grid-area:1/1] inline-flex items-center justify-center gap-1.5\"\n              style={{\n                transform: copied ? \"translateY(-110%)\" : \"none\",\n                opacity: copied ? 0 : 1,\n                filter: copied ? \"blur(2px)\" : \"none\",\n                transition: \"transform 320ms var(--ease-out-soft), opacity 220ms ease, filter 220ms ease\",\n              }}\n            >\n              <svg width=\"12\" height=\"12\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" viewBox=\"0 0 24 24\">\n                <rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" />\n                <path d=\"M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1\" />\n              </svg>\n              copy\n            </span>\n            <span\n              aria-hidden\n              className=\"[grid-area:1/1] inline-flex items-center justify-center gap-1.5\"\n              style={{\n                transform: copied ? \"none\" : \"translateY(110%)\",\n                opacity: copied ? 1 : 0,\n                filter: copied ? \"none\" : \"blur(2px)\",\n                transition: \"transform 380ms var(--ease-spring), opacity 220ms ease, filter 220ms ease\",\n              }}\n            >\n              <svg width=\"12\" height=\"12\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.25\" viewBox=\"0 0 24 24\">\n                <path\n                  key={String(copied)}\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  d=\"M5 13l4 4L19 7\"\n                  pathLength={15}\n                  className={copied ? \"animate-draw-check\" : \"\"}\n                />\n              </svg>\n              copied\n            </span>\n          </span>\n        </button>\n        <span aria-live=\"polite\" className=\"sr-only\">{copied ? \"copied to clipboard\" : \"\"}</span>\n      </figcaption>\n      <div\n        className=\"bg-panel-face rounded-[13px] overflow-x-auto scroll-thin\"\n        style={{ boxShadow: \"var(--panel-face-shadow)\" }}\n      >\n        <pre className=\"py-4 px-4 text-[13px] leading-[1.7] font-mono text-ink-soft\">\n          <code>\n            {lines.map((line, i) => (\n              <div key={i} className=\"flex\">\n                {showLineNumbers && (\n                  <span aria-hidden className=\"select-none w-8 shrink-0 text-right pr-4 text-ink-ghost tabular-nums\">\n                    {i + 1}\n                  </span>\n                )}\n                <span className=\"flex-1\">\n                  {tokenized && tokenized[i].length\n                    ? tokenized[i].map((tok, j) => (\n                        <span key={j} className={TOKEN_STYLES[tok.type] || \"\"}>\n                          {tok.value}\n                        </span>\n                      ))\n                    : (line || \"\\n\")}\n                </span>\n              </div>\n            ))}\n          </code>\n        </pre>\n      </div>\n    </figure>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/ColorPicker.d.ts

@@ -0,0 +1,24 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/** Accepts #rgb, #rrggbb, with or without the hash. Returns #rrggbb or null */
+declare function normalizeHex(input: string): string | null;
+interface ColorPickerProps {
+    /** A hex colour, like "#2563eb" */
+    value?: string;
+    defaultValue?: string;
+    onChange?: (hex: string) => void;
+    label?: string;
+    hint?: string;
+    /** Preset colours under the picker; pass [] to hide them */
+    swatches?: string[];
+    /** Render the panel straight onto the page instead of behind a field */
+    inline?: boolean;
+    /** Submit the colour with a form */
+    name?: string;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    className?: string;
+}
+declare function ColorPicker({ value, defaultValue, onChange, label, hint, swatches, inline, name, disabled, fullWidth, className, }: ColorPickerProps): react_jsx_runtime.JSX.Element;
+
+export { ColorPicker, normalizeHex };