@fragments-sdk/cli 0.2.2

package/src/viewer/components/CommandPalette.tsx

@@ -0,0 +1,336 @@
+/**
+ * Command Palette - Cmd+K Quick Switcher
+ *
+ * A keyboard-driven command palette for:
+ * - Quick navigation to components
+ * - Fuzzy search across all components and variants
+ * - Keyboard navigation (arrows, enter, escape)
+ */
+
+import { useState, useEffect, useRef, useMemo, useCallback } from "react";
+import clsx from "clsx";
+import type { SegmentDefinition } from "../../core/index.js";
+import { SearchIcon, ChevronRightIcon } from "./Icons.js";
+
+interface CommandPaletteProps {
+  /** Whether the palette is open */
+  isOpen: boolean;
+  /** Callback to close the palette */
+  onClose: () => void;
+  /** All available segments */
+  segments: Array<{ path: string; segment: SegmentDefinition }>;
+  /** Callback when a component is selected */
+  onSelectComponent: (path: string) => void;
+  /** Callback when a variant is selected */
+  onSelectVariant: (path: string, variantIndex: number) => void;
+}
+
+interface SearchResult {
+  type: "component" | "variant";
+  path: string;
+  componentName: string;
+  variantName?: string;
+  variantIndex?: number;
+  category: string;
+  score: number;
+}
+
+export function CommandPalette({
+  isOpen,
+  onClose,
+  segments,
+  onSelectComponent,
+  onSelectVariant,
+}: CommandPaletteProps) {
+  const [query, setQuery] = useState("");
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  // Build search results with fuzzy matching
+  const results = useMemo(() => {
+    const allResults: SearchResult[] = [];
+
+    for (const { path, segment } of segments) {
+      const componentName = segment.meta.name;
+      const category = segment.meta.category;
+
+      // Add component result
+      allResults.push({
+        type: "component",
+        path,
+        componentName,
+        category,
+        score: 0,
+      });
+
+      // Add variant results
+      if (segment.variants) {
+        for (let i = 0; i < segment.variants.length; i++) {
+          const variant = segment.variants[i];
+          allResults.push({
+            type: "variant",
+            path,
+            componentName,
+            variantName: variant.name,
+            variantIndex: i,
+            category,
+            score: 0,
+          });
+        }
+      }
+    }
+
+    if (!query.trim()) {
+      // No query - show all components sorted alphabetically
+      return allResults
+        .filter((r) => r.type === "component")
+        .sort((a, b) => a.componentName.localeCompare(b.componentName))
+        .slice(0, 20);
+    }
+
+    // Fuzzy match and score results
+    const lowerQuery = query.toLowerCase();
+    const scored = allResults
+      .map((result) => {
+        const searchText = result.variantName
+          ? `${result.componentName} ${result.variantName}`
+          : result.componentName;
+        const score = fuzzyScore(searchText.toLowerCase(), lowerQuery);
+        return { ...result, score };
+      })
+      .filter((r) => r.score > 0)
+      .sort((a, b) => b.score - a.score)
+      .slice(0, 20);
+
+    return scored;
+  }, [segments, query]);
+
+  // Reset selection when results change
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [results]);
+
+  // Focus input when opened
+  useEffect(() => {
+    if (isOpen) {
+      setQuery("");
+      setSelectedIndex(0);
+      setTimeout(() => inputRef.current?.focus(), 0);
+    }
+  }, [isOpen]);
+
+  // Scroll selected item into view
+  useEffect(() => {
+    if (listRef.current && results.length > 0) {
+      const selectedEl = listRef.current.children[selectedIndex] as HTMLElement;
+      if (selectedEl) {
+        selectedEl.scrollIntoView({ block: "nearest" });
+      }
+    }
+  }, [selectedIndex, results.length]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          setSelectedIndex((i) => Math.min(i + 1, results.length - 1));
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          setSelectedIndex((i) => Math.max(i - 1, 0));
+          break;
+        case "Enter":
+          e.preventDefault();
+          if (results[selectedIndex]) {
+            handleSelect(results[selectedIndex]);
+          }
+          break;
+        case "Escape":
+          e.preventDefault();
+          onClose();
+          break;
+      }
+    },
+    [results, selectedIndex, onClose]
+  );
+
+  const handleSelect = (result: SearchResult) => {
+    if (result.type === "variant" && result.variantIndex !== undefined) {
+      onSelectVariant(result.path, result.variantIndex);
+    } else {
+      onSelectComponent(result.path);
+    }
+    onClose();
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-start justify-center pt-[15vh]">
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 bg-black/50 backdrop-blur-sm"
+        onClick={onClose}
+      />
+
+      {/* Palette */}
+      <div
+        className="relative w-full max-w-xl bg-[--bg-primary] rounded-xl shadow-2xl border border-[--border] overflow-hidden"
+        onKeyDown={handleKeyDown}
+      >
+        {/* Search input */}
+        <div className="flex items-center px-4 py-3 border-b-2 border-blue-500">
+          <SearchIcon className="w-5 h-5 text-blue-500 mr-3" />
+          <input
+            ref={inputRef}
+            type="text"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Search components and variants..."
+            className="flex-1 bg-transparent text-primary placeholder-tertiary text-base focus:outline-none"
+          />
+          <kbd className="hidden sm:inline-flex items-center gap-1 px-2 py-0.5 text-xs text-tertiary bg-[--bg-secondary] rounded border border-[--border]">
+            esc
+          </kbd>
+        </div>
+
+        {/* Results */}
+        <div
+          ref={listRef}
+          className="max-h-80 overflow-y-auto py-2"
+        >
+          {results.length === 0 ? (
+            <div className="px-4 py-8 text-center text-tertiary">
+              {query ? (
+                <>No results for "{query}"</>
+              ) : (
+                <>Start typing to search...</>
+              )}
+            </div>
+          ) : (
+            results.map((result, index) => (
+              <button
+                key={`${result.path}-${result.variantName || "component"}`}
+                onClick={() => handleSelect(result)}
+                className={clsx(
+                  "w-full px-4 py-2 flex items-center gap-3 text-left transition-colors",
+                  index === selectedIndex
+                    ? "bg-blue-500/10 text-primary"
+                    : "text-secondary hover:bg-[--bg-hover]"
+                )}
+              >
+                {/* Icon/Badge */}
+                <div
+                  className={clsx(
+                    "flex-shrink-0 w-8 h-8 rounded-lg flex items-center justify-center text-xs font-medium",
+                    result.type === "component"
+                      ? "bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300"
+                      : "bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300"
+                  )}
+                >
+                  {result.type === "component" ? "C" : "V"}
+                </div>
+
+                {/* Content */}
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2">
+                    <span className="font-medium truncate">
+                      {result.componentName}
+                    </span>
+                    {result.variantName && (
+                      <>
+                        <ChevronRightIcon className="w-3 h-3 text-tertiary flex-shrink-0" />
+                        <span className="text-secondary truncate">
+                          {result.variantName}
+                        </span>
+                      </>
+                    )}
+                  </div>
+                  <div className="text-xs text-tertiary truncate">
+                    {result.category}
+                  </div>
+                </div>
+
+                {/* Keyboard hint for selected */}
+                {index === selectedIndex && (
+                  <kbd className="hidden sm:inline-flex items-center px-1.5 py-0.5 text-[10px] text-tertiary bg-[--bg-secondary] rounded border border-[--border]">
+                    enter
+                  </kbd>
+                )}
+              </button>
+            ))
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="px-4 py-2 border-t border-[--border] flex items-center justify-between text-xs text-tertiary">
+          <div className="flex items-center gap-3">
+            <span className="flex items-center gap-1">
+              <kbd className="px-1.5 py-0.5 bg-[--bg-secondary] rounded border border-[--border]">↑</kbd>
+              <kbd className="px-1.5 py-0.5 bg-[--bg-secondary] rounded border border-[--border]">↓</kbd>
+              to navigate
+            </span>
+            <span className="flex items-center gap-1">
+              <kbd className="px-1.5 py-0.5 bg-[--bg-secondary] rounded border border-[--border]">↵</kbd>
+              to select
+            </span>
+          </div>
+          <span>
+            {results.length} result{results.length !== 1 ? "s" : ""}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Simple fuzzy matching score
+ * Returns 0 for no match, higher values for better matches
+ */
+function fuzzyScore(text: string, query: string): number {
+  if (!query) return 1;
+
+  let score = 0;
+  let queryIndex = 0;
+  let consecutiveBonus = 0;
+  let lastMatchIndex = -2;
+
+  for (let i = 0; i < text.length && queryIndex < query.length; i++) {
+    if (text[i] === query[queryIndex]) {
+      score += 1;
+
+      // Bonus for consecutive matches
+      if (i === lastMatchIndex + 1) {
+        consecutiveBonus += 2;
+        score += consecutiveBonus;
+      } else {
+        consecutiveBonus = 0;
+      }
+
+      // Bonus for matching at word start
+      if (i === 0 || text[i - 1] === " " || text[i - 1] === "-" || text[i - 1] === "_") {
+        score += 3;
+      }
+
+      lastMatchIndex = i;
+      queryIndex++;
+    }
+  }
+
+  // Only return score if all query characters were found
+  if (queryIndex < query.length) return 0;
+
+  // Bonus for shorter results (more relevant)
+  score += Math.max(0, 20 - text.length);
+
+  // Bonus for exact match
+  if (text === query) score += 50;
+
+  // Bonus for starts with
+  if (text.startsWith(query)) score += 30;
+
+  return score;
+}