@fragments-sdk/cli 0.7.11 → 0.7.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fragments-sdk/cli",
-  "version": "0.7.11",
+  "version": "0.7.12",
   "license": "FSL-1.1-MIT",
   "description": "CLI, MCP server, and dev tools for Fragments design system",
   "author": "Conan McNicholl",

package/src/viewer/components/App.tsx

@@ -270,11 +270,6 @@ export function App({ fragments }: AppProps) {
     }
   }, [copyUrl, success, uiActions]);
 
-  const focusSearchInput = useCallback(() => {
-    searchInputRef.current?.focus();
-    searchInputRef.current?.select();
-  }, []);
-
   // Sorted fragment paths for keyboard navigation
   const sortedFragmentPaths = useMemo(() => {
     return [...fragments]
@@ -328,7 +323,7 @@ export function App({ fragments }: AppProps) {
       toggleResponsive: () => uiActions.setMultiViewport(!uiState.showMultiViewport),
       copyLink: handleCopyLink,
       showHelp: uiActions.toggleShortcutsHelp,
-      openSearch: focusSearchInput,
+      openSearch: () => uiActions.setCommandPalette(true),
       escape: () => {
         if (document.activeElement === searchInputRef.current) {
           if (searchQuery) {
@@ -614,7 +609,6 @@ function HeaderSearch({ value, onChange, inputRef }: HeaderSearchProps) {
         placeholder="Search components"
         aria-label="Search components"
         size="sm"
-        shortcut="⌘K"
         style={{ width: '240px' }}
       />
     </Header.Search>
@@ -723,11 +717,12 @@ function PreviewAside({
               </a>
               {variants.map((variant, index) => {
                 const active = index === focusedVariantIndex;
+                const anchorId = getVariantSectionId(fragment.meta.name, variant.name);
 
                 return (
                   <a
                     key={variant.name}
-                    href="#preview-canvas"
+                    href={`#${anchorId}`}
                     style={getLinkStyle(active)}
                     onClick={(event) => {
                       event.preventDefault();

package/src/viewer/components/CommandPalette.tsx

@@ -336,10 +336,16 @@ export function CommandPalette({
 function fuzzyScore(text: string, query: string): number {
   if (!query) return 1;
 
+  // Require substring match for short queries to avoid scattered single-char noise
+  if (query.length <= 3 && !text.includes(query)) {
+    return 0;
+  }
+
   let score = 0;
   let queryIndex = 0;
   let consecutiveBonus = 0;
   let lastMatchIndex = -2;
+  let maxGap = 0;
 
   for (let i = 0; i < text.length && queryIndex < query.length; i++) {
     if (text[i] === query[queryIndex]) {
@@ -351,6 +357,11 @@ function fuzzyScore(text: string, query: string): number {
         score += consecutiveBonus;
       } else {
         consecutiveBonus = 0;
+        // Track max gap between matches
+        if (lastMatchIndex >= 0) {
+          const gap = i - lastMatchIndex;
+          if (gap > maxGap) maxGap = gap;
+        }
       }
 
       // Bonus for matching at word start
@@ -366,6 +377,11 @@ function fuzzyScore(text: string, query: string): number {
   // Only return score if all query characters were found
   if (queryIndex < query.length) return 0;
 
+  // Penalize large gaps between matched characters
+  if (maxGap > 5) {
+    score -= maxGap;
+  }
+
   // Bonus for shorter results (more relevant)
   score += Math.max(0, 20 - text.length);
 
@@ -375,5 +391,5 @@ function fuzzyScore(text: string, query: string): number {
   // Bonus for starts with
   if (text.startsWith(query)) score += 30;
 
-  return score;
+  return Math.max(score, 0) || 0;
 }

package/src/viewer/components/IsolatedPreviewFrame.tsx

@@ -162,91 +162,88 @@ export const IsolatedPreviewFrame = memo(function IsolatedPreviewFrame({
       onMouseLeave={() => setIsHovered(false)}
     >
       {/* Skeleton loading overlay (initial load) */}
-      <div
-        style={{
-          position: 'absolute',
-          inset: 0,
-          zIndex: 10,
-          transition: 'opacity 150ms',
-          opacity: showSkeleton ? 1 : 0,
-          pointerEvents: showSkeleton ? 'auto' : 'none',
-          background: 'rgba(255, 255, 255, 0.95)',
-        }}
-      >
-        <PreviewSkeleton />
-      </div>
+      {showSkeleton && (
+        <div
+          style={{
+            position: 'absolute',
+            inset: 0,
+            zIndex: 10,
+            background: 'var(--bg-primary, rgba(255, 255, 255, 0.95))',
+          }}
+        >
+          <PreviewSkeleton />
+        </div>
+      )}
 
       {/* Spinner overlay (subsequent renders) */}
-      <div
-        style={{
-          position: 'absolute',
-          inset: 0,
-          zIndex: 10,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          transition: 'opacity 150ms',
-          opacity: showSpinner ? 1 : 0,
-          pointerEvents: showSpinner ? 'auto' : 'none',
-          background: 'rgba(255, 255, 255, 0.8)',
-        }}
-      >
-        <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: '#6b7280', fontSize: 14 }}>
-          <LoadingSpinner />
-          <span>Rendering...</span>
+      {showSpinner && (
+        <div
+          style={{
+            position: 'absolute',
+            inset: 0,
+            zIndex: 10,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            background: 'color-mix(in srgb, var(--bg-primary, white) 80%, transparent)',
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'var(--text-tertiary, #6b7280)', fontSize: 14 }}>
+            <LoadingSpinner />
+            <span>Rendering...</span>
+          </div>
         </div>
-      </div>
+      )}
 
       {/* Error overlay */}
-      <div
-        style={{
-          position: 'absolute',
-          inset: 0,
-          zIndex: 10,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          padding: '16px',
-          transition: 'opacity 150ms',
-          opacity: frameError && !isLoading ? 1 : 0,
-          pointerEvents: frameError && !isLoading ? 'auto' : 'none',
-          background: 'rgba(254, 242, 242, 0.95)',
-        }}
-      >
+      {frameError && !isLoading && (
         <div
           style={{
-            background: 'white',
-            border: '1px solid #fecaca',
-            borderRadius: 8,
-            padding: 16,
-            maxWidth: 400,
+            position: 'absolute',
+            inset: 0,
+            zIndex: 10,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: '16px',
+            background: 'rgba(254, 242, 242, 0.95)',
           }}
         >
-          <div style={{ color: '#dc2626', fontWeight: 500, marginBottom: 8 }}>
-            Preview Error
-          </div>
-          <div style={{ color: '#991b1b', fontSize: 13, marginBottom: retryCount < MAX_RETRIES ? 12 : 0 }}>
-            {frameError}
+          <div
+            style={{
+              background: 'white',
+              border: '1px solid #fecaca',
+              borderRadius: 8,
+              padding: 16,
+              maxWidth: 400,
+            }}
+          >
+            <div style={{ color: '#dc2626', fontWeight: 500, marginBottom: 8 }}>
+              Preview Error
+            </div>
+            <div style={{ color: '#991b1b', fontSize: 13, marginBottom: retryCount < MAX_RETRIES ? 12 : 0 }}>
+              {frameError}
+            </div>
+            {retryCount < MAX_RETRIES && (
+              <button
+                onClick={handleRetry}
+                style={{
+                  padding: '6px 12px',
+                  fontSize: 13,
+                  fontWeight: 500,
+                  color: 'white',
+                  background: '#dc2626',
+                  border: 'none',
+                  borderRadius: 6,
+                  cursor: 'pointer',
+                }}
+              >
+                Retry ({MAX_RETRIES - retryCount} remaining)
+              </button>
+            )}
           </div>
-          {retryCount < MAX_RETRIES && (
-            <button
-              onClick={handleRetry}
-              style={{
-                padding: '6px 12px',
-                fontSize: 13,
-                fontWeight: 500,
-                color: 'white',
-                background: '#dc2626',
-                border: 'none',
-                borderRadius: 6,
-                cursor: 'pointer',
-              }}
-            >
-              Retry ({MAX_RETRIES - retryCount} remaining)
-            </button>
-          )}
         </div>
-      </div>
+      )}
 
       {/* The iframe */}
       <iframe

package/src/viewer/components/LeftSidebar.tsx

@@ -14,16 +14,26 @@ function fuzzyMatch(text: string, pattern: string): FuzzyMatch | null {
   const textLower = text.toLowerCase();
   const patternLower = pattern.toLowerCase();
 
+  // Require substring match for short queries (<=3 chars) to avoid scattered single-char noise
+  if (patternLower.length <= 3 && !textLower.includes(patternLower)) {
+    return null;
+  }
+
   const indices: number[] = [];
   let patternIdx = 0;
   let score = 0;
   let consecutiveBonus = 0;
+  let maxGap = 0;
 
   for (let i = 0; i < textLower.length && patternIdx < patternLower.length; i++) {
     if (textLower[i] === patternLower[patternIdx]) {
       indices.push(i);
-      if (indices.length > 1 && indices[indices.length - 2] === i - 1) {
-        consecutiveBonus += 5;
+      if (indices.length > 1) {
+        const gap = i - indices[indices.length - 2];
+        if (gap === 1) {
+          consecutiveBonus += 5;
+        }
+        if (gap > maxGap) maxGap = gap;
       }
       if (i === 0 || text[i - 1] === ' ' || text[i - 1] === '-' || text[i - 1] === '_') {
         score += 10;
@@ -36,9 +46,19 @@ function fuzzyMatch(text: string, pattern: string): FuzzyMatch | null {
     return null;
   }
 
+  // Penalize large gaps between matched characters
+  if (maxGap > 5) {
+    score -= maxGap * 2;
+  }
+
   score += consecutiveBonus;
   score += (patternLower.length / textLower.length) * 20;
 
+  // Reject very low scores (scattered single-char matches)
+  if (score <= 0 && patternLower.length > 1) {
+    return null;
+  }
+
   return { score, indices };
 }
 
@@ -364,7 +384,7 @@ export function LeftSidebar({ fragments, activeFragment, searchQuery, onSelect,
       <Sidebar.Footer>
         <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
           <Text size="xs" color="tertiary">
-            {isFilterActive ? `${flatItems.length} / ${fragments.length}` : fragments.length} components
+            {isFilterActive || searchResults ? `${flatItems.length} of ${fragments.length}` : fragments.length} components
           </Text>
           <Sidebar.CollapseToggle />
         </div>

package/src/viewer/hooks/useKeyboardShortcuts.ts

@@ -262,7 +262,7 @@ export const SHORTCUTS = [
   { keys: ["p"], description: "Toggle addons panel" },
   { keys: ["m"], description: "Matrix view" },
   { keys: ["v"], description: "Responsive view" },
-  { keys: ["/", "⌘K"], description: "Search" },
+  { keys: ["/", "⌘K"], description: "Command palette" },
   { keys: ["?"], description: "Show shortcuts" },
   { keys: ["Esc"], description: "Close / Clear" },
 ];