@fragments-sdk/cli 0.7.2 → 0.7.4

package/src/core/discovery.ts

@@ -62,9 +62,15 @@ export async function discoverFragmentFiles(
   config: FragmentsConfig,
   configDir: string
 ): Promise<DiscoveredFile[]> {
+  const defaultExcludes = [
+    '**/*.test.stories.*',
+    '**/*.stories.test.*',
+    '**/*.test.story.*',
+    '**/*.story.test.*',
+  ];
   const files = await fg(config.include, {
     cwd: configDir,
-    ignore: config.exclude ?? [],
+    ignore: [...defaultExcludes, ...(config.exclude ?? [])],
     absolute: false,
   });
 

package/src/core/token-parser.ts

@@ -12,6 +12,8 @@ export interface ParsedToken {
   name: string;
   /** Raw value from the declaration (e.g., "#{$fui-space-4}" or "16px") */
   value?: string;
+  /** Resolved value after SCSS variable substitution (e.g., "16px") */
+  resolvedValue?: string;
   /** Category inferred from SCSS comment or naming convention */
   category: string;
   /** Description from inline comment, if any */
@@ -137,12 +139,90 @@ function normalizeCategory(comment: string): string {
   return mappings[text] ?? text.replace(/\s+/g, '-');
 }
 
+/**
+ * Extract SCSS variable declarations ($name: value;) from file content.
+ * Returns a map of variable name → value.
+ */
+function extractScssVariables(content: string): Map<string, string> {
+  const vars = new Map<string, string>();
+  // Match: $var-name: value; (handles multi-word values, stops at semicolon)
+  const scssVarRegex = /^\s*(\$[\w-]+)\s*:\s*(.+?)\s*(?:!default\s*)?;/gm;
+
+  let match: RegExpExecArray | null;
+  while ((match = scssVarRegex.exec(content)) !== null) {
+    const name = match[1];
+    const value = match[2].replace(/\s*\/\/.*$/, '').trim();
+    // Only store the first occurrence (canonical definition)
+    if (!vars.has(name)) {
+      vars.set(name, value);
+    }
+  }
+
+  return vars;
+}
+
+/**
+ * Resolve SCSS interpolations and variable references in a token value.
+ *
+ * Handles:
+ * - `#{$var}` → looks up $var in scssVars map
+ * - `$var` standalone → looks up in scssVars map
+ * - `var(--other-token, fallback)` → returns fallback if provided
+ * - Recursive resolution up to 5 levels deep
+ */
+function resolveTokenValue(
+  rawValue: string,
+  scssVars: Map<string, string>,
+  cssVarValues: Map<string, string>,
+  depth = 0
+): string {
+  if (depth > 5) return rawValue; // Prevent infinite recursion
+
+  let resolved = rawValue;
+
+  // Resolve #{$var} interpolations
+  resolved = resolved.replace(/#\{(\$[\w-]+)\}/g, (_, varName) => {
+    const val = scssVars.get(varName);
+    return val !== undefined
+      ? resolveTokenValue(val, scssVars, cssVarValues, depth + 1)
+      : `#{${varName}}`;
+  });
+
+  // Resolve standalone $var references (not inside #{})
+  resolved = resolved.replace(/(?<![#\{])(\$[\w-]+)/g, (_, varName) => {
+    const val = scssVars.get(varName);
+    return val !== undefined
+      ? resolveTokenValue(val, scssVars, cssVarValues, depth + 1)
+      : varName;
+  });
+
+  // Resolve var(--token, fallback) — use the referenced token value or fallback
+  resolved = resolved.replace(
+    /var\((--[\w-]+)(?:\s*,\s*(.+?))?\)/g,
+    (original, tokenName, fallback) => {
+      const tokenVal = cssVarValues.get(tokenName);
+      if (tokenVal !== undefined) {
+        return resolveTokenValue(tokenVal, scssVars, cssVarValues, depth + 1);
+      }
+      if (fallback) {
+        return resolveTokenValue(fallback.trim(), scssVars, cssVarValues, depth + 1);
+      }
+      return original;
+    }
+  );
+
+  return resolved;
+}
+
 /**
  * Parse a SCSS or CSS file and extract CSS custom property declarations.
  *
  * Handles two grouping strategies:
  * 1. Comment-based: Uses `// Category` comments above groups of declarations
  * 2. Naming-based: Falls back to inferring category from variable name patterns
+ *
+ * Also resolves SCSS variable interpolations (e.g., `#{$fui-space-4}` → `16px`)
+ * when the SCSS variable definitions are found in the same file content.
  */
 export function parseTokenFile(content: string, filePath: string): TokenParseOutput {
   const lines = content.split('\n');
@@ -151,6 +231,9 @@ export function parseTokenFile(content: string, filePath: string): TokenParseOut
   let currentCategory = 'other';
   let hasCommentCategories = false;
 
+  // First pass: extract SCSS variable declarations for resolution
+  const scssVars = extractScssVariables(content);
+
   // Regex for CSS custom property declarations
   // Matches: --name: value; (with optional SCSS interpolation)
   // Captures both the variable name and its value
@@ -199,6 +282,25 @@ export function parseTokenFile(content: string, filePath: string): TokenParseOut
     }
   }
 
+  // Second pass: build a CSS custom property → raw value map for cross-references
+  const cssVarValues = new Map<string, string>();
+  for (const token of tokens) {
+    if (token.value) {
+      cssVarValues.set(token.name, token.value);
+    }
+  }
+
+  // Third pass: resolve SCSS interpolations and var() references
+  for (const token of tokens) {
+    if (token.value) {
+      const resolved = resolveTokenValue(token.value, scssVars, cssVarValues);
+      // Only set resolvedValue if it's different from raw and doesn't still contain unresolved refs
+      if (resolved !== token.value && !resolved.includes('#{') && !resolved.includes('$')) {
+        token.resolvedValue = resolved;
+      }
+    }
+  }
+
   // Group by category
   const categories: Record<string, ParsedToken[]> = {};
   for (const token of tokens) {

package/src/core/token-resolver.ts

@@ -0,0 +1,155 @@
+/**
+ * Token Resolver — resolves unresolved SCSS token values using actual sass compilation.
+ *
+ * The regex-based resolver in token-parser.ts cannot handle SCSS module namespaces,
+ * functions (color.scale, math.div), or map lookups. This module provides a fallback
+ * that compiles the actual SCSS sources to extract computed CSS custom property values.
+ *
+ * Used at build time only — no runtime sass dependency in the MCP server.
+ */
+
+import { resolve, dirname, basename } from 'node:path';
+import { existsSync, readdirSync } from 'node:fs';
+
+/**
+ * Round fractional RGB channel values produced by Sass color math.
+ *
+ * Sass functions like color.scale() and color.adjust() can produce
+ * fractional values like rgb(217.8, 217.8, 217.8). This normalizes
+ * them to clean integers: rgb(218, 218, 218).
+ *
+ * Alpha channels in rgba() are preserved as-is (they're legitimately fractional).
+ */
+function roundRgbValues(value: string): string {
+  return value
+    .replace(
+      /rgb\(([^)]+)\)/g,
+      (_full, inner: string) => {
+        const parts = inner.split(',').map(p => p.trim());
+        const rounded = parts.map(p => {
+          const num = parseFloat(p);
+          return isNaN(num) ? p : String(Math.round(num));
+        });
+        return `rgb(${rounded.join(', ')})`;
+      },
+    )
+    .replace(
+      /rgba\(([^)]+)\)/g,
+      (_full, inner: string) => {
+        const parts = inner.split(',').map(p => p.trim());
+        // Round RGB channels (first 3), preserve alpha as-is
+        const rounded = parts.map((p, i) => {
+          if (i >= 3) return p; // alpha channel — don't round
+          const num = parseFloat(p);
+          return isNaN(num) ? p : String(Math.round(num));
+        });
+        return `rgba(${rounded.join(', ')})`;
+      },
+    );
+}
+
+/**
+ * Resolve unresolved SCSS token values by compiling the project's token SCSS.
+ *
+ * Generates a temporary SCSS string that imports the project's _variables.scss
+ * and includes the fui-css-variables mixin, then compiles it with sass to extract
+ * the actual computed values for all CSS custom properties.
+ *
+ * @param unresolvedTokens - Tokens with values containing #{} or $ that need resolution
+ * @param tokensDir - Absolute path to the directory containing _variables.scss
+ * @returns Map of token name → resolved CSS value (only for tokens that were unresolved)
+ */
+export async function resolveTokensWithSass(
+  unresolvedTokens: Array<{ name: string; value: string }>,
+  tokensDir: string,
+): Promise<Map<string, string>> {
+  const resolvedMap = new Map<string, string>();
+
+  // Filter to only tokens that actually need resolution
+  const needsResolution = unresolvedTokens.filter(
+    t => t.value.includes('#{') || t.value.includes('$'),
+  );
+
+  if (needsResolution.length === 0) {
+    return resolvedMap;
+  }
+
+  try {
+    // Dynamic import so sass is only loaded when needed (build-time only)
+    const sass = await import('sass');
+
+    // Find the _variables.scss file and determine the mixin name
+    const variablesPath = findVariablesFile(tokensDir);
+    if (!variablesPath) {
+      return resolvedMap;
+    }
+
+    // Determine the module name for @use (filename without _ prefix and .scss suffix)
+    const fileName = basename(variablesPath);
+    const moduleName = fileName.replace(/^_/, '').replace(/\.scss$/, '');
+
+    // Generate a SCSS string that imports the variables and includes the mixin
+    const scssSource = `
+@use '${moduleName}' as vars;
+:root { @include vars.fui-css-variables; }
+`;
+
+    // Compile the SCSS with the tokens directory as a load path
+    const compiled = sass.compileString(scssSource, {
+      loadPaths: [tokensDir, dirname(tokensDir)],
+      style: 'expanded',
+      // Suppress sass deprecation warnings during build
+      logger: { warn() {}, debug() {} } as never,
+    });
+
+    // Parse the compiled CSS for --fui-* custom property declarations
+    const cssVarRegex = /(--[\w-]+)\s*:\s*([^;]+)/g;
+    let match: RegExpExecArray | null;
+    const allResolved = new Map<string, string>();
+
+    while ((match = cssVarRegex.exec(compiled.css)) !== null) {
+      allResolved.set(match[1], roundRgbValues(match[2].trim()));
+    }
+
+    // Only return values for the tokens that were originally unresolved
+    for (const token of needsResolution) {
+      const value = allResolved.get(token.name);
+      if (value !== undefined) {
+        resolvedMap.set(token.name, value);
+      }
+    }
+  } catch {
+    // Sass compilation failure is non-fatal — fall back to regex-resolved values
+  }
+
+  return resolvedMap;
+}
+
+/**
+ * Find the _variables.scss file in the tokens directory.
+ */
+function findVariablesFile(tokensDir: string): string | null {
+  const candidates = ['_variables.scss', 'variables.scss'];
+  for (const name of candidates) {
+    const path = resolve(tokensDir, name);
+    if (existsSync(path)) {
+      return path;
+    }
+  }
+
+  // Fallback: look for any SCSS file containing 'css-variables' mixin
+  try {
+    const files = readdirSync(tokensDir).filter(f => f.endsWith('.scss'));
+    for (const file of files) {
+      const path = resolve(tokensDir, file);
+      // We just need to find it exists; the @use import will handle the rest
+      if (file.includes('variables') || file.includes('tokens')) {
+        return path;
+      }
+    }
+  } catch {
+    // Directory read failure
+  }
+
+  return null;
+}

package/src/migrate/detect.ts

@@ -164,6 +164,10 @@ export async function discoverStoryFiles(
       "**/dist/**",
       "**/build/**",
       "**/.storybook/**",
+      "**/*.test.stories.*",
+      "**/*.stories.test.*",
+      "**/*.test.story.*",
+      "**/*.story.test.*",
     ],
   });
 

package/src/service/__tests__/patch-generator.test.ts

@@ -72,8 +72,8 @@ describe("patch-generator", () => {
 
       const result = generateTokenPatches("Button", styleDiffs, registry);
 
-      // All values are already tokens
-      expect(result.summary).toContain("compliance");
+      // All values are already tokens — message confirms compliant status
+      expect(result.summary).toContain("token-compliant");
     });
 
     it("identifies unfixable values without matching tokens", () => {

package/src/service/patch-generator.ts

@@ -85,9 +85,16 @@ export function generateTokenPatches(
   const summary = registry.calculateUsageSummary(styleDiffs, theme);
 
   if (summary.hardcodedProperties.length === 0) {
+    // No hardcoded values → either fully compliant or no styles were analyzed
+    let message: string;
+    if (summary.totalProperties === 0) {
+      message = `No style properties analyzed for ${componentName}. Ensure the component renders visible styles.`;
+    } else {
+      message = `${componentName} is fully token-compliant — no hardcoded values found.`;
+    }
     return {
       patches: [],
-      summary: `No hardcoded values found in ${componentName}. Token compliance is at ${summary.compliancePercent}%.`,
+      summary: message,
       fixableCount: 0,
       unfixableCount: 0,
     };

package/src/viewer/components/App.tsx

@@ -28,11 +28,19 @@ import { useAllFigmaUrls } from "./FigmaEmbed.js";
 import { ActionCapture } from "./ActionCapture.js";
 
 // Fragments UI
-import { Header, Stack, Text, Separator, Tooltip, Button, EmptyState, Box, Alert, ScrollArea, Input } from "@fragments/ui";
+import { Header, Stack, Text, Separator, Tooltip, Button, EmptyState, Box, Alert, ScrollArea, Input, ThemeToggle } from "@fragments/ui";
 
 // Icons
 import { EmptyIcon, ExternalLinkIcon, FigmaIcon, CompareIcon, CheckIcon, LinkIcon, GridIcon, DevicesIcon } from "./Icons.js";
 
+function GitHubIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+    </svg>
+  );
+}
+
 // Hooks
 import { useAppState } from "../hooks/useAppState.js";
 import { useViewSettings } from "../hooks/useViewSettings.js";
@@ -475,13 +483,14 @@ function HeaderSearch({ value, onChange, inputRef }: HeaderSearchProps) {
         aria-label="Search components"
         size="sm"
         shortcut="⌘K"
-        style={{ width: '220px' }}
+        style={{ width: '240px' }}
       />
     </Header.Search>
   );
 }
 
 function ViewerHeader({ showHealth, searchQuery, onSearchChange, searchInputRef }: ViewerHeaderProps) {
+  const { setTheme, resolvedTheme } = useTheme();
   return (
     <Header aria-label="Fragments viewer header">
       <Header.Trigger />
@@ -493,6 +502,32 @@ function ViewerHeader({ showHealth, searchQuery, onSearchChange, searchInputRef
       </Header.Brand>
       <HeaderSearch value={searchQuery} onChange={onSearchChange} inputRef={searchInputRef} />
       <Header.Spacer />
+      <Header.Actions>
+        <ThemeToggle
+          size="sm"
+          value={resolvedTheme}
+          onValueChange={(value) => setTheme(value)}
+          aria-label={`Theme: ${resolvedTheme}`}
+        />
+        <a
+          href="https://github.com/ConanMcN/fragments"
+          target="_blank"
+          rel="noopener noreferrer"
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: '32px',
+            height: '32px',
+            borderRadius: 'var(--radius-md, 6px)',
+            color: 'var(--text-secondary)',
+            transition: 'background-color 150ms ease, color 150ms ease',
+          }}
+          aria-label="View on GitHub"
+        >
+          <GitHubIcon />
+        </a>
+      </Header.Actions>
     </Header>
   );
 }
@@ -510,6 +545,7 @@ function TopToolbar({
   onSearchChange,
   searchInputRef,
 }: TopToolbarProps) {
+  const { setTheme, resolvedTheme } = useTheme();
   return (
     <Header aria-label="Component preview toolbar">
       <Header.Trigger />
@@ -595,6 +631,31 @@ function TopToolbar({
             </Tooltip>
           </>
         )}
+        <Separator orientation="vertical" style={{ height: '16px' }} />
+        <ThemeToggle
+          size="sm"
+          value={resolvedTheme}
+          onValueChange={(value) => setTheme(value)}
+          aria-label={`Theme: ${resolvedTheme}`}
+        />
+        <a
+          href="https://github.com/ConanMcN/fragments"
+          target="_blank"
+          rel="noopener noreferrer"
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: '32px',
+            height: '32px',
+            borderRadius: 'var(--radius-md, 6px)',
+            color: 'var(--text-secondary)',
+            transition: 'background-color 150ms ease, color 150ms ease',
+          }}
+          aria-label="View on GitHub"
+        >
+          <GitHubIcon />
+        </a>
       </Header.Actions>
     </Header>
   );

package/src/viewer/components/Layout.tsx

@@ -13,7 +13,7 @@ export function Layout({ leftSidebar, header, children }: LayoutProps) {
       <AppShell.Header>
         {header}
       </AppShell.Header>
-      <AppShell.Sidebar width="256px" collapsible="icon">
+      <AppShell.Sidebar width="260px" collapsible="icon">
         {leftSidebar}
       </AppShell.Sidebar>
       <AppShell.Main padding="none">

package/src/viewer/components/LeftSidebar.tsx

@@ -1,8 +1,8 @@
 import { useState, useMemo, useRef, useEffect, useCallback } from 'react';
 import type { FragmentDefinition } from '../../core/index.js';
 import { BRAND } from '../../core/index.js';
-import { useTheme } from './ThemeProvider.js';
-import { Sidebar, useSidebar, Badge, Text, ThemeToggle } from '@fragments/ui';
+
+import { Sidebar, useSidebar, Text, FragmentsLogo } from '@fragments/ui';
 
 // Fuzzy matching utility
 interface FuzzyMatch {
@@ -129,7 +129,6 @@ interface LeftSidebarProps {
 
 export function LeftSidebar({ fragments, activeFragment, searchQuery, onSelect, showHealth, onHealthClick }: LeftSidebarProps) {
   const [focusedIndex, setFocusedIndex] = useState(-1);
-  const { setTheme, resolvedTheme } = useTheme();
   const { isMobile, setOpen } = useSidebar();
   const navRef = useRef<HTMLDivElement>(null);
 
@@ -158,37 +157,19 @@ export function LeftSidebar({ fragments, activeFragment, searchQuery, onSelect,
     return map;
   }, [searchResults]);
 
-  const grouped = useMemo(() => {
-    const source = searchResults
-      ? searchResults.map(r => r.item)
-      : fragments;
-
-    const groups: Record<string, typeof fragments> = {};
-    for (const item of source) {
-      // Skip invalid fragments
-      if (!item.fragment?.meta) continue;
-      const category = item.fragment.meta.category || 'uncategorized';
-      if (!groups[category]) groups[category] = [];
-      groups[category].push(item);
-    }
-    return groups;
-  }, [fragments, searchResults]);
-
+  // Flat alphabetical list (search results sorted by relevance, otherwise alphabetical)
   const flatItems = useMemo(() => {
-    const items: Array<{ path: string; fragment: FragmentDefinition }> = [];
-    const sortedEntries = Object.entries(grouped).sort(([a], [b]) =>
-      a.toLowerCase().localeCompare(b.toLowerCase())
-    );
-    for (const [, categoryItems] of sortedEntries) {
-      const sorted = [...categoryItems]
-        .filter(item => item.fragment?.meta?.name)
-        .sort((a, b) =>
-          a.fragment.meta.name.toLowerCase().localeCompare(b.fragment.meta.name.toLowerCase())
-        );
-      items.push(...sorted);
+    if (searchResults) {
+      return searchResults
+        .map(r => r.item)
+        .filter(item => item.fragment?.meta?.name);
     }
-    return items;
-  }, [grouped]);
+    return [...fragments]
+      .filter(item => item.fragment?.meta?.name)
+      .sort((a, b) =>
+        a.fragment.meta.name.toLowerCase().localeCompare(b.fragment.meta.name.toLowerCase())
+      );
+  }, [fragments, searchResults]);
 
   const keyboardItems = useMemo(() => {
     const componentItems = flatItems.map((item) => ({ type: 'component' as const, path: item.path }));
@@ -257,25 +238,16 @@ export function LeftSidebar({ fragments, activeFragment, searchQuery, onSelect,
     return () => document.removeEventListener('keydown', handleKeyDown);
   }, [handleKeyDown]);
 
-  const sortedEntries = Object.entries(grouped).sort(([a], [b]) =>
-    a.toLowerCase().localeCompare(b.toLowerCase())
-  );
-
   return (
     <>
       {/* Header */}
       <Sidebar.Header>
         <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
-          <Text size="sm" weight="medium">{BRAND.name}</Text>
-          <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
-            <ThemeToggle
-              size="sm"
-              value={resolvedTheme}
-              onValueChange={(value) => setTheme(value)}
-              aria-label={`Theme: ${resolvedTheme}`}
-            />
-            <Sidebar.CollapseToggle />
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+            <FragmentsLogo size={20} />
+            <Text size="sm" weight="semibold">{BRAND.name}</Text>
           </div>
+          <Sidebar.CollapseToggle />
         </div>
       </Sidebar.Header>
 
@@ -283,7 +255,7 @@ export function LeftSidebar({ fragments, activeFragment, searchQuery, onSelect,
       <div ref={navRef} style={{ flex: 1, minHeight: 0, display: 'flex', overflow: 'hidden' }}>
         <Sidebar.Nav aria-label="Components">
           {onHealthClick && (
-            <Sidebar.Section>
+            <Sidebar.Section label="Overview">
               <Sidebar.Item
                 active={!!showHealth}
                 onClick={handleHealthClick}
@@ -293,36 +265,22 @@ export function LeftSidebar({ fragments, activeFragment, searchQuery, onSelect,
             </Sidebar.Section>
           )}
 
-          {sortedEntries.map(([category, items]) => {
-            const sortedItems = [...items]
-              .filter(item => item.fragment?.meta?.name)
-              .sort((a, b) =>
-                a.fragment.meta.name.toLowerCase().localeCompare(b.fragment.meta.name.toLowerCase())
-              );
-
-            return (
-              <Sidebar.Section key={category} label={category}>
-                {sortedItems.map((item) => {
-                  const nameIndices = highlightMap.get(item.path) || [];
-
-                  return (
-                    <Sidebar.Item
-                      key={item.path}
-                      active={activeFragment === item.path}
-                      onClick={() => handleSelect(item.path)}
-                    >
-                      <HighlightedText
-                        text={item.fragment.meta.name}
-                        indices={nameIndices}
-                      />
-                    </Sidebar.Item>
-                  );
-                })}
-              </Sidebar.Section>
-            );
-          })}
-
-          {Object.keys(grouped).length === 0 && (
+          <Sidebar.Section label="Components">
+            {flatItems.map((item) => (
+              <Sidebar.Item
+                key={item.path}
+                active={activeFragment === item.path}
+                onClick={() => handleSelect(item.path)}
+              >
+                <HighlightedText
+                  text={item.fragment.meta.name}
+                  indices={highlightMap.get(item.path) || []}
+                />
+              </Sidebar.Item>
+            ))}
+          </Sidebar.Section>
+
+          {flatItems.length === 0 && (
             <div style={{ padding: '8px 32px', textAlign: 'center' }}>
               <Text size="sm" color="tertiary">No results</Text>
             </div>
@@ -332,7 +290,7 @@ export function LeftSidebar({ fragments, activeFragment, searchQuery, onSelect,
 
       {/* Footer */}
       <Sidebar.Footer>
-        <Badge size="sm">{fragments.length} components</Badge>
+        <Text size="xs" color="tertiary">{fragments.length} components</Text>
       </Sidebar.Footer>
     </>
   );

package/src/viewer/preview-frame.html

@@ -13,7 +13,7 @@
       html, body {
         margin: 0;
         padding: 0;
-        font-family: var(--fui-font-sans, 'Geist Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+        font-family: var(--fui-font-sans, Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
         width: 100%;