@fragments-sdk/cli 0.7.14 → 0.7.16

package/src/viewer/hooks/useA11yService.ts

@@ -8,10 +8,8 @@
  */
 
 import { useCallback, useEffect, useRef, useState } from 'react';
-import type { Result } from 'axe-core';
 import type {
   A11yServiceConfig,
-  SerializedViolation,
   ComponentScanState,
   ScanStatus,
 } from '../types/a11y.js';
@@ -22,6 +20,7 @@ import {
   isComponentStale,
   getA11ySummary,
 } from './useA11yCache.js';
+import { runAxeScan, type ScanResult } from '../webmcp/scan-utils.js';
 
 // Default configuration
 const DEFAULT_CONFIG: A11yServiceConfig = {
@@ -54,139 +53,6 @@ const serviceState: A11yServiceState = {
   componentStates: new Map(),
 };
 
-// Cache the axe-core module
-let axeModule: typeof import('axe-core') | null = null;
-
-export interface ScanResult {
-  violations: SerializedViolation[];
-  passes: number;
-  incomplete: number;
-  counts: {
-    critical: number;
-    serious: number;
-    moderate: number;
-    minor: number;
-  };
-}
-
-/**
- * Convert axe-core Result to SerializedViolation
- */
-function serializeViolation(result: Result): SerializedViolation {
-  return {
-    id: result.id,
-    impact: result.impact || null,
-    description: result.description,
-    help: result.help,
-    helpUrl: result.helpUrl,
-    tags: result.tags,
-    nodes: result.nodes.map(node => ({
-      html: node.html,
-      target: node.target as string[],
-      failureSummary: node.failureSummary,
-      any: node.any?.map(check => ({
-        id: check.id,
-        data: check.data,
-        relatedNodes: check.relatedNodes?.map(rn => ({
-          html: rn.html,
-          target: rn.target as string[],
-        })),
-        impact: check.impact,
-        message: check.message,
-      })),
-      all: node.all?.map(check => ({
-        id: check.id,
-        data: check.data,
-        relatedNodes: check.relatedNodes?.map(rn => ({
-          html: rn.html,
-          target: rn.target as string[],
-        })),
-        impact: check.impact,
-        message: check.message,
-      })),
-      none: node.none?.map(check => ({
-        id: check.id,
-        data: check.data,
-        relatedNodes: check.relatedNodes?.map(rn => ({
-          html: rn.html,
-          target: rn.target as string[],
-        })),
-        impact: check.impact,
-        message: check.message,
-      })),
-    })),
-  };
-}
-
-/**
- * Run axe-core scan on a target element
- */
-async function runAxeScan(targetSelector: string): Promise<ScanResult | null> {
-  // Load axe-core if not cached
-  if (!axeModule) {
-    axeModule = await import('axe-core');
-  }
-  // Handle both ESM default export and CommonJS module
-  const axe = (axeModule as { default?: typeof import('axe-core') }).default || axeModule;
-
-  const target = document.querySelector(targetSelector);
-  if (!target) {
-    console.warn(`[A11y] Target element not found: ${targetSelector}`);
-    return null;
-  }
-
-  // Configure axe-core
-  axe.configure({
-    rules: [
-      { id: 'color-contrast', enabled: true },
-      { id: 'image-alt', enabled: true },
-      { id: 'button-name', enabled: true },
-      { id: 'link-name', enabled: true },
-      { id: 'label', enabled: true },
-      { id: 'aria-valid-attr', enabled: true },
-      { id: 'aria-valid-attr-value', enabled: true },
-    ],
-  });
-
-  // Run the scan
-  const results = await axe.run(target as HTMLElement, {
-    resultTypes: ['violations', 'passes', 'incomplete', 'inapplicable'],
-  });
-
-  // Count violations by severity
-  const counts = {
-    critical: 0,
-    serious: 0,
-    moderate: 0,
-    minor: 0,
-  };
-
-  for (const violation of results.violations) {
-    switch (violation.impact) {
-      case 'critical':
-        counts.critical++;
-        break;
-      case 'serious':
-        counts.serious++;
-        break;
-      case 'moderate':
-        counts.moderate++;
-        break;
-      case 'minor':
-      default:
-        counts.minor++;
-        break;
-    }
-  }
-
-  return {
-    violations: results.violations.map(serializeViolation),
-    passes: results.passes.length,
-    incomplete: results.incomplete.length,
-    counts,
-  };
-}
-
 /**
  * Process the scan queue
  */

package/src/viewer/hooks/useCompiledFragments.ts

@@ -0,0 +1,42 @@
+import { useState, useEffect } from "react";
+import type { CompiledFragmentsFile } from "@fragments-sdk/context/types";
+
+interface UseCompiledFragmentsResult {
+  data: CompiledFragmentsFile | null;
+  loading: boolean;
+  error: string | null;
+}
+
+export function useCompiledFragments(): UseCompiledFragmentsResult {
+  const [data, setData] = useState<CompiledFragmentsFile | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    fetch("/fragments/compiled.json")
+      .then((res) => {
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        return res.json();
+      })
+      .then((json) => {
+        if (!cancelled) {
+          setData(json as CompiledFragmentsFile);
+          setLoading(false);
+        }
+      })
+      .catch((err) => {
+        if (!cancelled) {
+          setError(err instanceof Error ? err.message : String(err));
+          setLoading(false);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  return { data, loading, error };
+}

package/src/viewer/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Fragments</title>
-    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='2' y='6' width='12' height='12' rx='2' fill='%234f46e5'/%3E%3Crect x='18' y='6' width='12' height='5' rx='1.5' fill='%236366f1'/%3E%3Crect x='18' y='14' width='8' height='4' rx='1' fill='%23a5b4fc'/%3E%3Crect x='2' y='22' width='28' height='4' rx='1' fill='%23e0e7ff'/%3E%3C/svg%3E" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link

package/src/viewer/server.ts

@@ -32,6 +32,8 @@ const packagesRoot = resolve(cliPackageRoot, "..");
 const localUiLibRoot = resolve(packagesRoot, "../libs/ui/src");
 const localSharedLibRoot = resolve(packagesRoot, "../libs/shared/src");
 const vendoredSharedLibRoot = resolve(viewerRoot, "vendor/shared/src");
+const localWebMCPRoot = resolve(packagesRoot, "webmcp/src");
+const localContextRoot = resolve(packagesRoot, "context/src");
 
 /**
  * Resolve the @fragments/ui alias to the correct path.
@@ -57,6 +59,44 @@ function resolveUiLib(nodeModulesDir: string): string {
   return localUiLibRoot;
 }
 
+/**
+ * Resolve @fragments-sdk/webmcp to monorepo source or installed package.
+ */
+function resolveWebMCPLib(nodeModulesDir: string): string {
+  const localIndex = join(localWebMCPRoot, "index.ts");
+  if (existsSync(localIndex)) {
+    return localWebMCPRoot;
+  }
+  const installedSrc = join(nodeModulesDir, "@fragments-sdk/webmcp/src/index.ts");
+  if (existsSync(installedSrc)) {
+    return resolve(dirname(installedSrc));
+  }
+  const installedDist = join(nodeModulesDir, "@fragments-sdk/webmcp");
+  if (existsSync(installedDist)) {
+    return installedDist;
+  }
+  return localWebMCPRoot;
+}
+
+/**
+ * Resolve @fragments-sdk/context to monorepo source or installed package.
+ */
+function resolveContextLib(nodeModulesDir: string): string {
+  const localIndex = join(localContextRoot, "index.ts");
+  if (existsSync(localIndex)) {
+    return localContextRoot;
+  }
+  const installedSrc = join(nodeModulesDir, "@fragments-sdk/context/src/index.ts");
+  if (existsSync(installedSrc)) {
+    return resolve(dirname(installedSrc));
+  }
+  const installedDist = join(nodeModulesDir, "@fragments-sdk/context");
+  if (existsSync(installedDist)) {
+    return installedDist;
+  }
+  return localContextRoot;
+}
+
 /**
  * Resolve the @fragments-sdk/shared alias to either monorepo source
  * or vendored viewer fallback for npm installs.
@@ -211,6 +251,8 @@ export async function createDevServer(
   const nodeModulesPath = findNodeModules(projectRoot);
   const uiLibRoot = resolveUiLib(nodeModulesPath);
   const sharedLibRoot = resolveSharedLib();
+  const webmcpLibRoot = resolveWebMCPLib(nodeModulesPath);
+  const contextLibRoot = resolveContextLib(nodeModulesPath);
   console.log(`📁 Using node_modules: ${nodeModulesPath}`);
 
   // Collect installed package roots so Vite can serve files from node_modules
@@ -230,6 +272,7 @@ export async function createDevServer(
   const fragmentsConfig: InlineConfig = {
     configFile: false, // Don't load config again
     root: projectRoot, // Run from PROJECT root
+    publicDir: resolve(viewerRoot, "public"), // Serve static assets (favicon) from viewer
     base: "/",
 
     server: {
@@ -237,7 +280,7 @@ export async function createDevServer(
       open: open ? "/fragments/" : false,
       fs: {
         // Allow serving files from viewer package, project, shared libs, and node_modules root
-        allow: [viewerRoot, uiLibRoot, sharedLibRoot, projectRoot, configDir, dirname(nodeModulesPath), ...installedPkgRoots],
+        allow: [viewerRoot, uiLibRoot, sharedLibRoot, webmcpLibRoot, contextLibRoot, projectRoot, configDir, dirname(nodeModulesPath), ...installedPkgRoots],
       },
     },
 
@@ -256,8 +299,13 @@ export async function createDevServer(
       }),
     ],
 
-    // CSS configuration
-    css: {},
+    // CSS configuration — preserve original hyphenated class names in CSS modules
+    // Vite 6 defaults to camelCaseOnly, but our components use styles['gap-sm'] etc.
+    css: {
+      modules: {
+        localsConvention: 'camelCase',
+      },
+    },
 
     optimizeDeps: {
       // Include common dependencies for faster startup
@@ -273,6 +321,14 @@ export async function createDevServer(
         "@fragments-sdk/ui": uiLibRoot,
         // Resolve @fragments-sdk/shared to monorepo source or vendored fallback
         "@fragments-sdk/shared": sharedLibRoot,
+        // Resolve @fragments-sdk/webmcp subpaths to monorepo source or installed package
+        "@fragments-sdk/webmcp/react": join(webmcpLibRoot, "react/index.ts"),
+        "@fragments-sdk/webmcp/fragments": join(webmcpLibRoot, "fragments/index.ts"),
+        "@fragments-sdk/webmcp": webmcpLibRoot,
+        // Resolve @fragments-sdk/context subpaths to monorepo source or installed package
+        "@fragments-sdk/context/types": join(contextLibRoot, "types/index.ts"),
+        "@fragments-sdk/context/mcp-tools": join(contextLibRoot, "mcp-tools/index.ts"),
+        "@fragments-sdk/context": contextLibRoot,
         // Resolve @fragments-sdk/cli/core to the CLI's own core source
         "@fragments-sdk/cli/core": resolve(cliPackageRoot, "src/core/index.ts"),
         // Ensure ALL react imports resolve to project's node_modules

package/src/viewer/vendor/shared/src/DocsHeaderBar.tsx

@@ -85,7 +85,26 @@ export function DocsHeaderBar({
 
         <NavigationMenu.Viewport />
 
+        <NavigationMenu.MobileBrand>{brand}</NavigationMenu.MobileBrand>
+
         <NavigationMenu.MobileContent>
+          {/* Render all headerNav items in the mobile drawer */}
+          <NavigationMenu.MobileSection>
+            {headerNav.map((entry) =>
+              isDropdown(entry) ? (
+                entry.items.map((child) => (
+                  <NavigationMenu.Link key={child.href} href={child.href} asChild>
+                    {renderLink({ href: child.href, label: child.label })}
+                  </NavigationMenu.Link>
+                ))
+              ) : (
+                <NavigationMenu.Link key={entry.href} href={entry.href} asChild>
+                  {renderLink({ href: entry.href, label: entry.label })}
+                </NavigationMenu.Link>
+              )
+            )}
+          </NavigationMenu.MobileSection>
+
           {mobileSections.map((section) => (
             <NavigationMenu.MobileSection key={section.title} label={section.title}>
               {section.items.map((item) => (

package/src/viewer/vendor/shared/src/DocsPageAsideHost.tsx

@@ -52,7 +52,7 @@ export function useDocsPageAside() {
 export function DocsPageAsidePortal({ children, width = '320px' }: { children: React.ReactNode; width?: string }) {
   const { setAsideVisible, setAsideWidth, asideContainer } = useDocsPageAside();
 
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     setAsideVisible(true);
     setAsideWidth(width);
 

package/src/viewer/vendor/shared/src/DocsSearchCommand.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { Input, Listbox } from '@fragments-sdk/ui';
-import { useEffect, useMemo, useRef, useState, type KeyboardEvent as ReactKeyboardEvent } from 'react';
+import { Command, Dialog, Button, Text, Stack } from '@fragments-sdk/ui';
+import { useEffect, useMemo, useState, useCallback } from 'react';
 import type { SearchItem } from './types';
 
 interface DocsSearchCommandProps {
@@ -14,121 +14,86 @@ interface DocsSearchCommandProps {
 export function DocsSearchCommand({
   searchItems,
   onSelect,
-  placeholder = 'Search...',
-  maxResults = 8,
+  placeholder = 'Search docs...',
+  maxResults = 9999,
 }: DocsSearchCommandProps) {
-  const [query, setQuery] = useState('');
-  const [isOpen, setIsOpen] = useState(false);
-  const [selectedIndex, setSelectedIndex] = useState(0);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  const results = useMemo(() => {
-    if (!query.trim()) return [];
-    const lowerQuery = query.toLowerCase();
-    return searchItems
-      .filter((item) => item.label.toLowerCase().includes(lowerQuery) || item.section.toLowerCase().includes(lowerQuery))
-      .slice(0, maxResults);
-  }, [maxResults, query, searchItems]);
-
-  useEffect(() => {
-    setSelectedIndex(0);
-  }, [results]);
+  const [open, setOpen] = useState(false);
 
+  // Cmd+K / Ctrl+K to open
   useEffect(() => {
-    const handleGlobalKeyDown = (event: KeyboardEvent) => {
+    const handleKeyDown = (event: KeyboardEvent) => {
       if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
         event.preventDefault();
-        inputRef.current?.focus();
-        setIsOpen(true);
-      }
-    };
-
-    document.addEventListener('keydown', handleGlobalKeyDown);
-    return () => document.removeEventListener('keydown', handleGlobalKeyDown);
-  }, []);
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
-        setIsOpen(false);
+        setOpen((prev) => !prev);
       }
     };
 
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
   }, []);
 
-  const handleSelect = (item: SearchItem) => {
-    onSelect(item);
-    setIsOpen(false);
-    setQuery('');
-  };
-
-  const handleKeyDown = (event: ReactKeyboardEvent) => {
-    if (!isOpen || results.length === 0) return;
-
-    switch (event.key) {
-      case 'ArrowDown':
-        event.preventDefault();
-        setSelectedIndex((prev) => (prev + 1) % results.length);
-        break;
-      case 'ArrowUp':
-        event.preventDefault();
-        setSelectedIndex((prev) => (prev - 1 + results.length) % results.length);
-        break;
-      case 'Enter':
-        event.preventDefault();
-        if (results[selectedIndex]) {
-          handleSelect(results[selectedIndex]);
-          inputRef.current?.blur();
-        }
-        break;
-      case 'Escape':
-        setIsOpen(false);
-        inputRef.current?.blur();
-        break;
-      default:
-        break;
+  // Group items by section
+  const grouped = useMemo(() => {
+    const map = new Map<string, SearchItem[]>();
+    for (const item of searchItems) {
+      const section = item.section || 'Navigation';
+      if (!map.has(section)) map.set(section, []);
+      map.get(section)!.push(item);
     }
-  };
+    return map;
+  }, [searchItems]);
+
+  const handleSelect = useCallback(
+    (item: SearchItem) => {
+      setOpen(false);
+      onSelect(item);
+    },
+    [onSelect],
+  );
 
   return (
-    <div ref={containerRef} className="shared-docs-search-container">
-      <Input
-        ref={inputRef}
-        placeholder={placeholder}
-        aria-label="Search"
-        value={query}
-        onChange={(value) => {
-          setQuery(value);
-          setIsOpen(true);
-        }}
-        onFocus={() => setIsOpen(true)}
-        onKeyDown={handleKeyDown}
-        shortcut="⌘K"
+    <>
+      <Button
+        variant="secondary"
         size="sm"
-      />
-      {isOpen && results.length > 0 && (
-        <Listbox aria-label="Search results" className="shared-docs-search-results">
-          {results.map((item, index) => (
-            <Listbox.Item
-              key={`${item.section}:${item.href}`}
-              selected={index === selectedIndex}
-              onClick={() => handleSelect(item)}
-              onMouseEnter={() => setSelectedIndex(index)}
-            >
-              <span className="shared-docs-search-result-label">{item.label}</span>
-              <span className="shared-docs-search-result-section">{item.section}</span>
-            </Listbox.Item>
-          ))}
-        </Listbox>
-      )}
-      {isOpen && query.trim() && results.length === 0 && (
-        <Listbox aria-label="Search results" className="shared-docs-search-results">
-          <Listbox.Empty>No results found</Listbox.Empty>
-        </Listbox>
-      )}
-    </div>
+        onClick={() => setOpen(true)}
+        aria-label="Search documentation"
+        style={{ minWidth: 160, justifyContent: 'space-between' }}
+      >
+        <Text size="sm" color="secondary">Search...</Text>
+        <Text size="xs" color="secondary" font="mono">⌘K</Text>
+      </Button>
+
+      <Dialog open={open} onOpenChange={setOpen}>
+        <Dialog.Content size="sm" style={{ padding: 0, overflow: 'hidden' }}>
+          <Command
+            filter={(value, search) => {
+              if (value.toLowerCase().includes(search.toLowerCase())) return 1;
+              return 0;
+            }}
+          >
+            <Command.Input placeholder={placeholder} />
+            <Command.List>
+              <Command.Empty>No results found.</Command.Empty>
+              {[...grouped.entries()].map(([section, items]) => (
+                <Command.Group key={section} heading={section}>
+                  {items.slice(0, maxResults).map((item) => (
+                    <Command.Item
+                      key={`${item.section}:${item.href}`}
+                      value={`${item.label} ${item.section}`}
+                      onItemSelect={() => handleSelect(item)}
+                    >
+                      <Stack direction="row" align="center" justify="between" style={{ width: '100%' }}>
+                        <Text size="sm">{item.label}</Text>
+                      </Stack>
+                    </Command.Item>
+                  ))}
+                </Command.Group>
+              ))}
+            </Command.List>
+          </Command>
+        </Dialog.Content>
+      </Dialog>
+    </>
   );
 }