@blurrow/ui 0.0.0-stage → 0.2.0

package/dist/registry/CodeBlock.tsx

@@ -0,0 +1,202 @@
+"use client";
+
+import React, { useState, useCallback, useMemo, useRef } from "react";
+
+interface CodeBlockProps {
+  code: string;
+  language?: string;
+  showLineNumbers?: boolean;
+  title?: string;
+  className?: string;
+}
+
+const KEYWORDS = 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",
+]);
+
+const 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)/;
+
+const TOKEN_STYLES: Record<string, string> = {
+  keyword: "text-violet-600",
+  string:  "text-emerald-700",
+  comment: "text-neutral-400 italic",
+  tag:     "text-sky-700",
+  number:  "text-amber-700",
+};
+
+function classifyToken(val: string): string {
+  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: string): { type: string; value: string }[] {
+  const tokens: { type: string; value: string }[] = [];
+  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;
+}
+
+const HIGHLIGHTABLE = new Set(["js", "jsx", "ts", "tsx", "javascript", "typescript"]);
+
+export function CodeBlock({
+  code,
+  language,
+  showLineNumbers = false,
+  title,
+  className = "",
+}: CodeBlockProps) {
+  const [copied, setCopied] = useState(false);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const handleCopy = useCallback(() => {
+    navigator.clipboard.writeText(code).then(() => {
+      setCopied(true);
+      if (timer.current) clearTimeout(timer.current);
+      timer.current = setTimeout(() => setCopied(false), 2000);
+    });
+  }, [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.  */
+    <figure
+      className={["rounded-[18px] p-1.5 pt-0 m-0", className].filter(Boolean).join(" ")}
+      style={{ background: "var(--panel-bezel)", boxShadow: "var(--panel-shadow)" }}
+    >
+      <figcaption className="flex items-center justify-between gap-3 pl-3 pr-0.5 h-10">
+        <div className="flex items-center gap-2 min-w-0">
+          {title && (
+            <span className="text-[12px] font-medium text-neutral-700 truncate">{title}</span>
+          )}
+          {language && (
+            <span
+              className="text-[11px] font-semibold text-neutral-500 lowercase px-1.5 py-0.5 rounded-[5px]"
+              style={{ background: "var(--well)", boxShadow: "var(--well-shadow)" }}
+            >
+              {language}
+            </span>
+          )}
+        </div>
+        {/* Both labels share one grid cell, so the key is always as wide as
+            the longer one and never jumps. Swapping rolls the old label up
+            and out of a small window while the new one rolls in beneath
+            it; the check draws itself as it arrives.                    */}
+        <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-neutral-900"
+          style={{
+            background: "var(--face-light)",
+            boxShadow: "var(--face-light-shadow)",
+            color: copied ? "#047857" : undefined,
+          }}
+        >
+          <span className="grid overflow-hidden text-neutral-600" style={{ color: "inherit" }}>
+            <span
+              aria-hidden
+              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",
+              }}
+            >
+              <svg width="12" height="12" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+                <rect x="9" y="9" width="13" height="13" rx="2" />
+                <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" />
+              </svg>
+              copy
+            </span>
+            <span
+              aria-hidden
+              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",
+              }}
+            >
+              <svg width="12" height="12" fill="none" stroke="currentColor" strokeWidth="2.25" viewBox="0 0 24 24">
+                <path
+                  key={String(copied)}
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M5 13l4 4L19 7"
+                  pathLength={15}
+                  className={copied ? "animate-draw-check" : ""}
+                />
+              </svg>
+              copied
+            </span>
+          </span>
+        </button>
+        <span aria-live="polite" className="sr-only">{copied ? "copied to clipboard" : ""}</span>
+      </figcaption>
+      <div
+        className="bg-white rounded-[13px] overflow-x-auto scroll-thin"
+        style={{ boxShadow: "var(--panel-face-shadow)" }}
+      >
+        <pre className="py-4 px-4 text-[13px] leading-[1.7] font-mono text-neutral-800">
+          <code>
+            {lines.map((line, i) => (
+              <div key={i} className="flex">
+                {showLineNumbers && (
+                  <span aria-hidden className="select-none w-8 shrink-0 text-right pr-4 text-neutral-300 tabular-nums">
+                    {i + 1}
+                  </span>
+                )}
+                <span className="flex-1">
+                  {tokenized && tokenized[i].length
+                    ? tokenized[i].map((tok, j) => (
+                        <span key={j} className={TOKEN_STYLES[tok.type] || ""}>
+                          {tok.value}
+                        </span>
+                      ))
+                    : (line || "\n")}
+                </span>
+              </div>
+            ))}
+          </code>
+        </pre>
+      </div>
+    </figure>
+  );
+}

package/dist/registry/CommandPalette.tsx

@@ -0,0 +1,349 @@
+"use client";
+
+import React, {
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  useMemo,
+  useCallback,
+  useId,
+} from "react";
+import { Kbd } from "./Kbd";
+import { useModalBehavior } from "./useModalBehavior";
+
+interface CommandItem {
+  key: string;
+  label: string;
+  description?: string;
+  icon?: React.ReactNode;
+  shortcut?: string;
+  onSelect?: () => void;
+}
+
+interface CommandSection {
+  title: string;
+  items: CommandItem[];
+}
+
+interface CommandPaletteProps {
+  open: boolean;
+  onClose: () => void;
+  sections: CommandSection[];
+  placeholder?: string;
+  className?: string;
+}
+
+const CLOSE_MS = 240;
+
+export function CommandPalette({
+  open,
+  onClose,
+  sections,
+  placeholder = "search commands…",
+  className = "",
+}: CommandPaletteProps) {
+  const [mounted, setMounted] = useState(false);
+  const [visible, setVisible] = useState(false);
+  const [query, setQuery] = useState("");
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+  const uid = useId();
+
+  // Filter sections based on query
+  const filtered = useMemo(() => {
+    const q = query.toLowerCase().trim();
+    if (!q) return sections;
+    return sections
+      .map((section) => ({
+        ...section,
+        items: section.items.filter(
+          (item) =>
+            item.label.toLowerCase().includes(q) ||
+            item.description?.toLowerCase().includes(q),
+        ),
+      }))
+      .filter((section) => section.items.length > 0);
+  }, [sections, query]);
+
+  // Flat list of all visible items for keyboard nav
+  const flatItems = useMemo(
+    () => filtered.flatMap((s) => s.items),
+    [filtered],
+  );
+
+  // Mount / unmount lifecycle (matches Modal pattern)
+  useEffect(() => {
+    if (open) {
+      setMounted(true);
+      setQuery("");
+      setActiveIndex(0);
+      return;
+    }
+    if (mounted) {
+      setVisible(false);
+      const t = setTimeout(() => setMounted(false), CLOSE_MS);
+      return () => clearTimeout(t);
+    }
+  }, [open, mounted]);
+
+  // Enter animation (matches Modal pattern)
+  useLayoutEffect(() => {
+    if (!mounted || !open || visible) return;
+
+    const el = dialogRef.current;
+    if (el) {
+      void el.getBoundingClientRect();
+    }
+
+    const id = requestAnimationFrame(() => {
+      setVisible(true);
+    });
+    return () => cancelAnimationFrame(id);
+  }, [mounted, open, visible]);
+
+  // Reset active index when filter changes
+  useEffect(() => {
+    setActiveIndex(0);
+  }, [query]);
+
+  // Scroll active item into view
+  useEffect(() => {
+    if (!listRef.current) return;
+    const activeEl = listRef.current.querySelector(
+      `[data-command-index="${activeIndex}"]`,
+    );
+    if (activeEl) {
+      activeEl.scrollIntoView({ block: "nearest" });
+    }
+  }, [activeIndex]);
+
+  // Handle selection
+  const handleSelect = useCallback(
+    (item: CommandItem) => {
+      item.onSelect?.();
+      onClose();
+    },
+    [onClose],
+  );
+
+  // Keyboard navigation
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          setActiveIndex((i) => (i + 1 >= flatItems.length ? 0 : i + 1));
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          setActiveIndex((i) =>
+            i - 1 < 0 ? Math.max(flatItems.length - 1, 0) : i - 1,
+          );
+          break;
+        case "Enter":
+          e.preventDefault();
+          if (flatItems[activeIndex]) {
+            handleSelect(flatItems[activeIndex]);
+          }
+          break;
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, onClose, flatItems, activeIndex, handleSelect]);
+
+  // Escape, focus trap + restore, scroll lock
+  useModalBehavior({ open, ready: visible, ref: dialogRef, onClose, initialFocus: inputRef });
+
+  if (!mounted) return null;
+
+  let itemIndex = 0;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-start justify-center pt-[min(20vh,140px)] px-4">
+      {/* Backdrop */}
+      <div
+        className={[
+          "absolute inset-0 backdrop-blur-[6px]",
+          "transition-opacity ease-out",
+          visible ? "opacity-100 duration-300" : "opacity-0 duration-200",
+        ].join(" ")}
+        style={{ background: "var(--scrim)" }}
+        aria-hidden
+        onClick={onClose}
+      />
+
+      {/* Palette panel */}
+      <div
+        ref={dialogRef}
+        role="dialog"
+        aria-modal="true"
+        aria-label="Command palette"
+        className={[
+          "relative z-10 w-full max-w-lg rounded-[20px] p-1.5 overflow-hidden",
+          "transition-[opacity,transform,scale,translate] ease-[var(--ease-spring)]",
+          visible
+            ? "opacity-100 scale-100 translate-y-0 duration-300"
+            : "opacity-0 scale-[0.94] translate-y-3 duration-200",
+          className,
+        ]
+          .filter(Boolean)
+          .join(" ")}
+        style={{ background: "var(--panel-bezel)", boxShadow: "var(--modal-shadow)" }}
+      >
+        <div
+          className="bg-white rounded-[14px] overflow-hidden"
+          style={{ boxShadow: "var(--panel-face-shadow)" }}
+        >
+          {/* Search input */}
+          <div className="flex items-center gap-3 px-4 py-3.5">
+            <svg
+              className="shrink-0 text-neutral-400"
+              width="14"
+              height="14"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.75"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M21 21l-4.35-4.35M11 19a8 8 0 100-16 8 8 0 000 16z"
+              />
+            </svg>
+            <input
+              ref={inputRef}
+              type="text"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder={placeholder}
+              role="combobox"
+              aria-expanded="true"
+              aria-controls={`${uid}-list`}
+              aria-activedescendant={flatItems[activeIndex] ? `${uid}-item-${activeIndex}` : undefined}
+              aria-autocomplete="list"
+              className="flex-1 min-w-0 text-[14.5px] font-medium text-neutral-900 placeholder:text-neutral-400 placeholder:font-normal bg-transparent border-none outline-none"
+            />
+            <Kbd className="shrink-0">esc</Kbd>
+          </div>
+
+          {/* Separator */}
+          <div className="border-b border-neutral-100" />
+
+          {/* Results */}
+          <div
+            ref={listRef}
+            id={`${uid}-list`}
+            role="listbox"
+            className="max-h-[340px] overflow-y-auto scroll-thin py-2 px-2"
+          >
+            {filtered.length === 0 ? (
+              <div className="py-10 flex flex-col items-center gap-1 text-center">
+                <p className="text-[13px] font-medium text-neutral-700">
+                  nothing for &ldquo;{query}&rdquo;
+                </p>
+                <p className="text-[12px] text-neutral-400">try a shorter or different word.</p>
+              </div>
+            ) : (
+              filtered.map((section, si) => (
+                <div key={section.title} role="group" aria-label={section.title} className={si > 0 ? "mt-3" : ""}>
+                  <div aria-hidden className="px-3 py-1.5 text-[11.5px] font-medium text-neutral-400 lowercase select-none">
+                    {section.title}
+                  </div>
+                  <div className="flex flex-col gap-0.5">
+                    {section.items.map((item) => {
+                      const currentIndex = itemIndex++;
+                      const isActive = currentIndex === activeIndex;
+                      return (
+                        <div
+                          key={item.key}
+                          id={`${uid}-item-${currentIndex}`}
+                          role="option"
+                          aria-selected={isActive}
+                          data-command-index={currentIndex}
+                          onClick={() => handleSelect(item)}
+                          onMouseMove={() => setActiveIndex(currentIndex)}
+                          className={[
+                            "group/cmd flex items-center gap-3 w-full text-left px-3 py-2 rounded-[10px] cursor-pointer",
+                            "transition-[background,box-shadow] duration-100",
+                            isActive ? "bg-neutral-50" : "",
+                          ].join(" ")}
+                          style={{ boxShadow: isActive ? "var(--panel-face-shadow)" : undefined }}
+                        >
+                          {item.icon && (
+                            <span
+                              className={[
+                                "shrink-0 w-7 h-7 rounded-[8px] flex items-center justify-center transition-colors duration-100",
+                                isActive ? "text-neutral-900" : "text-neutral-500",
+                              ].join(" ")}
+                              style={{ background: "var(--face-light)", boxShadow: "var(--face-light-shadow)" }}
+                            >
+                              {item.icon}
+                            </span>
+                          )}
+                          <div className="flex-1 min-w-0 flex flex-col">
+                            <span className="text-[13px] font-medium text-neutral-900 truncate">
+                              {item.label}
+                            </span>
+                            {item.description && (
+                              <span className="text-[12px] text-neutral-500 truncate">
+                                {item.description}
+                              </span>
+                            )}
+                          </div>
+                          {item.shortcut && <Kbd className="shrink-0">{item.shortcut}</Kbd>}
+                          {!item.shortcut && (
+                            <svg
+                              aria-hidden
+                              width="12"
+                              height="12"
+                              fill="none"
+                              stroke="currentColor"
+                              strokeWidth="2"
+                              viewBox="0 0 24 24"
+                              className={[
+                                "shrink-0 text-neutral-400 transition-all duration-150",
+                                isActive ? "opacity-100 translate-x-0" : "opacity-0 -translate-x-1",
+                              ].join(" ")}
+                            >
+                              <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+                            </svg>
+                          )}
+                        </div>
+                      );
+                    })}
+                  </div>
+                </div>
+              ))
+            )}
+          </div>
+
+          {/* Key hints — teach the palette while it's open */}
+          <div
+            className="flex items-center gap-4 px-4 py-2.5 border-t border-neutral-100 text-[11.5px] text-neutral-500 select-none"
+            style={{ background: "linear-gradient(180deg, #fcfcfc 0%, #f8f8f8 100%)" }}
+          >
+            <span className="inline-flex items-center gap-1.5">
+              <Kbd>↑</Kbd>
+              <Kbd>↓</Kbd>
+              Navigate
+            </span>
+            <span className="inline-flex items-center gap-1.5">
+              <Kbd>↵</Kbd>
+              Open
+            </span>
+            <span className="ml-auto tabular-nums text-neutral-400">
+              {flatItems.length} {flatItems.length === 1 ? "result" : "results"}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/dist/registry/DataList.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+
+interface DataListItem {
+  label: string;
+  value: React.ReactNode;
+}
+
+interface DataListProps {
+  items: DataListItem[];
+  columns?: 1 | 2;
+  className?: string;
+}
+
+export function DataList({ items, columns = 1, className = "" }: DataListProps) {
+  return (
+    <div
+      className={["rounded-[18px] p-1.5", className].filter(Boolean).join(" ")}
+      style={{ background: "var(--panel-bezel)", boxShadow: "var(--panel-shadow)" }}
+    >
+      <dl
+        className={[
+          // 1px gaps over a hairline-coloured face draw the grid lines, so
+          // borders never double up whatever the item count
+          "grid gap-px bg-neutral-900/[0.05] rounded-[13px] overflow-hidden",
+          columns === 2 ? "grid-cols-1 sm:grid-cols-2" : "grid-cols-1",
+        ].join(" ")}
+        style={{ boxShadow: "var(--panel-face-shadow)" }}
+      >
+        {items.map((item, i) => (
+          <div
+            key={i}
+            className={[
+              "flex flex-col gap-1.5 px-5 py-4 bg-white",
+              // An odd last cell in two columns spans the row instead of leaving a hole
+              columns === 2 && items.length % 2 === 1 && i === items.length - 1 ? "sm:col-span-2" : "",
+            ].join(" ")}
+          >
+            <dt className="text-[12px] text-neutral-500">
+              {item.label}
+            </dt>
+            <dd className="min-h-6 flex items-center text-[14px] font-medium text-neutral-900 tracking-[-0.01em] tabular-nums">
+              {item.value}
+            </dd>
+          </div>
+        ))}
+      </dl>
+    </div>
+  );
+}