@fragments-sdk/cli 0.10.1 → 0.12.1

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

@@ -1,137 +0,0 @@
-'use client';
-
-import type { ReactNode } from 'react';
-import { CodeBlock, Tabs } from '@fragments-sdk/ui';
-import styles from './VariantPreviewCard.module.scss';
-
-/** Detect auto-generated descriptions like "Alternative Layout variant" or "Default ActionMenu" */
-function isGenericVariantDescription(name: string, description: string): boolean {
-  const lower = description.toLowerCase().trim();
-  const nameLower = name.toLowerCase().trim();
-  return (
-    lower === `${nameLower} variant` ||
-    lower === `default ${nameLower}` ||
-    lower === nameLower ||
-    // "Default SomeComponent" — "Default" followed by a PascalCase component name
-    /^default [a-z][a-z0-9]*$/i.test(description.trim())
-  );
-}
-
-export interface VariantPreviewCardProps {
-  name: string;
-  description?: string;
-  code?: string;
-  children: ReactNode;
-  isLoading?: boolean;
-  error?: string | null;
-  defaultTab?: 'preview' | 'code';
-  highlight?: boolean;
-  id?: string;
-  headerActions?: ReactNode;
-  className?: string;
-}
-
-export function VariantPreviewCard({
-  name,
-  description,
-  code,
-  children,
-  isLoading,
-  error,
-  defaultTab = 'preview',
-  highlight,
-  id,
-  headerActions,
-  className,
-}: VariantPreviewCardProps) {
-  const cardClassName = [
-    styles.card,
-    highlight && styles.highlighted,
-    className,
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-  // Use defaultTab as a signal: when 'preview' is requested, a preview IS expected
-  // even if children/isLoading haven't arrived yet (async hook still settling).
-  // Always use tabbed layout so code stays hidden in its tab.
-  const hasPreview = !!children || !!isLoading || defaultTab === 'preview';
-  const hasCode = typeof code === 'string' && code.length > 0;
-
-  // No preview, code only — render without tabs
-  if (!hasPreview && hasCode) {
-    return (
-      <div className={cardClassName} id={id}>
-        <div className={styles.header}>
-          <div className={styles.headerContent}>
-            <h3 className={styles.title}>{name}</h3>
-            {description && !isGenericVariantDescription(name, description) && <p className={styles.description}>{description}</p>}
-          </div>
-          {headerActions && <div className={styles.headerActions}>{headerActions}</div>}
-        </div>
-        <div className={styles.codePanel}>
-          <CodeBlock code={code} language="tsx" />
-        </div>
-      </div>
-    );
-  }
-
-  // No code — render preview only, no tabs
-  if (!hasCode) {
-    return (
-      <div className={cardClassName} id={id}>
-        <div className={styles.header}>
-          <div className={styles.headerContent}>
-            <h3 className={styles.title}>{name}</h3>
-            {description && !isGenericVariantDescription(name, description) && <p className={styles.description}>{description}</p>}
-          </div>
-          {headerActions && <div className={styles.headerActions}>{headerActions}</div>}
-        </div>
-        <div className={styles.previewPanel}>
-          {isLoading ? (
-            <div className={styles.placeholder}>Loading preview...</div>
-          ) : error ? (
-            <div className={styles.placeholder}>Preview error: {error}</div>
-          ) : (
-            children
-          )}
-        </div>
-      </div>
-    );
-  }
-
-  // Both preview and code — render with tabs
-  return (
-    <div className={cardClassName} id={id}>
-      <Tabs defaultValue={defaultTab}>
-        <div className={styles.header}>
-          <div className={styles.headerContent}>
-            <h3 className={styles.title}>{name}</h3>
-            {description && !isGenericVariantDescription(name, description) && <p className={styles.description}>{description}</p>}
-          </div>
-          <div className={styles.headerActions}>
-            {headerActions}
-            <Tabs.List variant="pills">
-              <Tabs.Tab value="preview">Preview</Tabs.Tab>
-              <Tabs.Tab value="code">Code</Tabs.Tab>
-            </Tabs.List>
-          </div>
-        </div>
-
-        <Tabs.Panel value="preview" className={styles.previewPanel}>
-          {isLoading ? (
-            <div className={styles.placeholder}>Loading preview...</div>
-          ) : error ? (
-            <div className={styles.placeholder}>Preview error: {error}</div>
-          ) : (
-            children
-          )}
-        </Tabs.Panel>
-
-        <Tabs.Panel value="code" className={styles.codePanel}>
-          <CodeBlock code={code} language="tsx" />
-        </Tabs.Panel>
-      </Tabs>
-    </div>
-  );
-}

package/src/viewer/vendor/shared/src/docs-data/index.ts

@@ -1,32 +0,0 @@
-/**
- * Docs data — single source of truth for content shared across
- * READMEs, docs pages, and MCP tool descriptions.
- *
- * Follows the same pattern as `cli-commands/index.ts`.
- */
-
-export {
-  NEUTRAL_PALETTES,
-  DENSITY_PRESETS,
-  RADIUS_STYLES,
-  SEED_DEFAULTS,
-  type PaletteDef,
-  type DensityDef,
-  type RadiusDef,
-} from './palettes.js';
-
-export {
-  SCSS_SETUP_MINIMAL,
-  SCSS_SETUP_FULL,
-  USE_THEME_EXAMPLE,
-  USE_THEME_RETURN_SHAPE,
-  PROVIDER_SETUP_EXAMPLE,
-  MIXIN_IMPORT,
-  STYLES_IMPORT_JS,
-  STYLES_IMPORT_SCSS,
-} from './setup-examples.js';
-
-export {
-  MCP_CONFIGS,
-  type McpConfigDef,
-} from './mcp-configs.js';

package/src/viewer/vendor/shared/src/docs-data/mcp-configs.ts

@@ -1,72 +0,0 @@
-/**
- * MCP server configuration examples per AI tool.
- *
- * Single source of truth for all READMEs and docs pages
- * that show how to configure the Fragments MCP server.
- */
-
-export interface McpConfigDef {
-  /** AI tool name (e.g., "Claude Code", "Cursor") */
-  tool: string;
-  /** Config file path */
-  filePath: string;
-  /** JSON config string (with comment header) */
-  config: string;
-}
-
-const npxArgs = `["-y", "@fragments-sdk/mcp@latest"]`;
-
-export const MCP_CONFIGS: McpConfigDef[] = [
-  {
-    tool: 'Claude Code',
-    filePath: '.mcp.json',
-    config: `// .mcp.json (project root)
-{
-  "mcpServers": {
-    "fragments": {
-      "command": "npx",
-      "args": ${npxArgs}
-    }
-  }
-}`,
-  },
-  {
-    tool: 'Cursor',
-    filePath: '.cursor/mcp.json',
-    config: `// .cursor/mcp.json
-{
-  "mcpServers": {
-    "fragments": {
-      "command": "npx",
-      "args": ${npxArgs}
-    }
-  }
-}`,
-  },
-  {
-    tool: 'VS Code',
-    filePath: '.vscode/mcp.json',
-    config: `// .vscode/mcp.json
-{
-  "servers": {
-    "fragments": {
-      "command": "npx",
-      "args": ${npxArgs}
-    }
-  }
-}`,
-  },
-  {
-    tool: 'Windsurf',
-    filePath: '~/.codeium/windsurf/mcp_config.json',
-    config: `// ~/.codeium/windsurf/mcp_config.json
-{
-  "mcpServers": {
-    "fragments": {
-      "command": "npx",
-      "args": ${npxArgs}
-    }
-  }
-}`,
-  },
-];

package/src/viewer/vendor/shared/src/docs-data/palettes.ts

@@ -1,75 +0,0 @@
-/**
- * Design token seed definitions — single source of truth.
- *
- * Values must match libs/ui/src/tokens/_seeds.scss exactly.
- * READMEs, docs pages, and MCP tool descriptions are generated from these.
- */
-
-// ---------------------------------------------------------------------------
-// Types
-// ---------------------------------------------------------------------------
-
-export interface PaletteDef {
-  name: string;
-  description: string;
-}
-
-export interface DensityDef {
-  readonly name: string;
-  readonly baseUnit: string;
-  readonly description: string;
-}
-
-export interface RadiusDef {
-  readonly name: string;
-  readonly description: string;
-}
-
-// ---------------------------------------------------------------------------
-// Neutral Palettes (must match _seeds.scss:27)
-// ---------------------------------------------------------------------------
-
-export const NEUTRAL_PALETTES: PaletteDef[] = [
-  { name: 'stone', description: 'Cool gray neutrals (balanced, professional) — default' },
-  { name: 'ice', description: 'Cool blue-tinted grays (crisp, technical)' },
-  { name: 'earth', description: 'Warm brown-tinted grays (natural, grounded)' },
-  { name: 'sand', description: 'Warm tan-tinted grays (organic, approachable)' },
-  { name: 'fire', description: 'Warm red-tinted grays (bold, energetic)' },
-];
-
-// ---------------------------------------------------------------------------
-// Density Presets (must match _seeds.scss:32)
-// ---------------------------------------------------------------------------
-
-export const DENSITY_PRESETS: readonly DensityDef[] = [
-  { name: 'compact', baseUnit: '6px', description: 'Tighter spacing, smaller elements' },
-  { name: 'default', baseUnit: '7px', description: 'Balanced, standard appearance' },
-  { name: 'relaxed', baseUnit: '8px', description: 'More spacious layout' },
-] as const;
-
-// ---------------------------------------------------------------------------
-// Radius Styles (must match _seeds.scss:37)
-// ---------------------------------------------------------------------------
-
-export const RADIUS_STYLES: readonly RadiusDef[] = [
-  { name: 'sharp', description: 'No rounding (technical, precise)' },
-  { name: 'subtle', description: 'Minimal rounding (modern minimal)' },
-  { name: 'default', description: 'Balanced rounding' },
-  { name: 'rounded', description: 'More prominent (friendly)' },
-  { name: 'pill', description: 'Maximum rounding (playful, soft)' },
-] as const;
-
-// ---------------------------------------------------------------------------
-// Seed Defaults (must match _seeds.scss)
-// ---------------------------------------------------------------------------
-
-export const SEED_DEFAULTS = {
-  brand: '#18181b',
-  neutral: 'stone',
-  density: 'default',
-  radiusStyle: 'default',
-  danger: '#ef4444',
-  success: '#22c55e',
-  warning: '#f59e0b',
-  info: '#3b82f6',
-} as const;

package/src/viewer/vendor/shared/src/docs-data/setup-examples.ts

@@ -1,55 +0,0 @@
-/**
- * Correct code examples for setup documentation.
- *
- * These are the canonical snippets used across READMEs and docs pages.
- * If you change a pattern here, all generated docs update automatically.
- */
-
-// ---------------------------------------------------------------------------
-// SCSS Setup
-// ---------------------------------------------------------------------------
-
-/** Minimal SCSS setup — @use with() syntax, not standalone variables */
-export const SCSS_SETUP_MINIMAL = `@use '@fragments-sdk/ui/styles' with (
-  $fui-brand: #0066ff
-);`;
-
-/** Full SCSS setup with all seeds */
-export const SCSS_SETUP_FULL = `@use '@fragments-sdk/ui/styles' with (
-  $fui-brand: #0066ff,
-  $fui-neutral: "ice",
-  $fui-density: "compact",
-  $fui-radius-style: "rounded"
-);`;
-
-// ---------------------------------------------------------------------------
-// Theme API
-// ---------------------------------------------------------------------------
-
-/** Correct useTheme() API — mode/setMode, NOT theme/setTheme */
-export const USE_THEME_EXAMPLE = `const { mode, setMode } = useTheme();`;
-
-/** Full useTheme return shape */
-export const USE_THEME_RETURN_SHAPE = `interface UseThemeReturn {
-  mode: ThemeMode;
-  setMode: (mode: ThemeMode) => void;
-  resolvedMode: 'light' | 'dark';
-  systemPreference: 'light' | 'dark';
-  toggleMode: () => void;
-}`;
-
-/** Canonical ThemeProvider prop — defaultMode, NOT defaultTheme */
-export const PROVIDER_SETUP_EXAMPLE = `<ThemeProvider defaultMode="system">`;
-
-// ---------------------------------------------------------------------------
-// Import Paths
-// ---------------------------------------------------------------------------
-
-/** Correct mixin import path (NOT /tokens) */
-export const MIXIN_IMPORT = `@use '@fragments-sdk/ui/mixins' as *;`;
-
-/** Correct styles import — JS side */
-export const STYLES_IMPORT_JS = `import '@fragments-sdk/ui/styles';`;
-
-/** Correct styles import — SCSS side */
-export const STYLES_IMPORT_SCSS = `@use '@fragments-sdk/ui/styles'`;

package/src/viewer/vendor/shared/src/docs-layout.scss

@@ -1,28 +0,0 @@
-.shared-docs-main-content {
-  width: 100%;
-}
-
-.shared-docs-search-container {
-  position: relative;
-  width: 100%;
-  max-width: 240px;
-}
-
-.shared-docs-search-results {
-  position: absolute;
-  top: calc(100% + 4px);
-  left: 0;
-  right: 0;
-  z-index: 100;
-}
-
-.shared-docs-search-result-label {
-  flex: 1;
-  font-weight: var(--fui-font-weight-medium);
-}
-
-.shared-docs-search-result-section {
-  font-size: var(--fui-font-size-xs);
-  color: var(--fui-text-tertiary);
-  margin-left: auto;
-}

package/src/viewer/vendor/shared/src/docs-layout.scss.d.ts

@@ -1,2 +0,0 @@
-declare const styles: string;
-export default styles;

package/src/viewer/vendor/shared/src/index.ts

@@ -1,34 +0,0 @@
-'use client';
-
-import './docs-layout.scss';
-
-export { DocsPageShell } from './DocsPageShell';
-export { DocsSidebarNav } from './DocsSidebarNav';
-export { DocsSearchCommand } from './DocsSearchCommand';
-export { DocsHeaderBar } from './DocsHeaderBar';
-export {
-  DocsPageAsideHost,
-  DocsPageAsidePortal,
-  DocsPageAsideProvider,
-  useDocsPageAside,
-} from './DocsPageAsideHost';
-
-export type {
-  NavItem,
-  NavSection,
-  SearchItem,
-  DocsNavLinkRenderProps,
-  DocsNavLinkRenderer,
-  HeaderNavEntry,
-  HeaderNavLink,
-  HeaderNavDropdown,
-} from './types';
-export { isDropdown } from './types';
-
-export { VariantPreviewCard } from './VariantPreviewCard';
-export type { VariantPreviewCardProps } from './VariantPreviewCard';
-
-export { PropsTable } from './PropsTable';
-export { ComponentDocContent } from './ComponentDocContent';
-export type { ComponentDocContentProps } from './ComponentDocContent';
-export type { DocProp } from './types';

package/src/viewer/vendor/shared/src/types.ts

@@ -1,53 +0,0 @@
-import type { ReactElement } from 'react';
-
-export interface NavItem {
-  label: string;
-  href: string;
-}
-
-export interface NavSection {
-  title: string;
-  items: NavItem[];
-  collapsible?: boolean;
-  defaultOpen?: boolean;
-}
-
-export interface SearchItem extends NavItem {
-  section: string;
-}
-
-export interface DocsNavLinkRenderProps {
-  href: string;
-  label: string;
-  onClick?: () => void;
-}
-
-export type DocsNavLinkRenderer = (props: DocsNavLinkRenderProps) => ReactElement;
-
-export interface HeaderNavLink {
-  label: string;
-  href: string;
-}
-
-export interface HeaderNavDropdown {
-  label: string;
-  items: NavItem[];
-}
-
-export type HeaderNavEntry = HeaderNavLink | HeaderNavDropdown;
-
-export function isDropdown(entry: HeaderNavEntry): entry is HeaderNavDropdown {
-  return 'items' in entry;
-}
-
-/**
- * Prop documentation type for shared PropsTable / ComponentDocContent.
- * Intentionally simple — consumers map their richer types into this shape.
- */
-export interface DocProp {
-  type: string;
-  description: string;
-  required?: boolean;
-  default?: unknown;
-  values?: string[];
-}

package/src/viewer/webmcp/__tests__/analytics.test.ts

@@ -1,108 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { ToolAnalyticsCollector } from '../analytics.js';
-import type { ToolCallEvent } from '@fragments-sdk/webmcp';
-
-function createEvent(overrides: Partial<ToolCallEvent> = {}): ToolCallEvent {
-  return {
-    toolName: 'fragments_discover',
-    input: {},
-    output: {},
-    error: null,
-    durationMs: 50,
-    timestamp: Date.now(),
-    ...overrides,
-  };
-}
-
-describe('ToolAnalyticsCollector', () => {
-  it('records events and computes summary', () => {
-    const collector = new ToolAnalyticsCollector();
-    collector.record(createEvent({ toolName: 'fragments_discover', durationMs: 10 }));
-    collector.record(createEvent({ toolName: 'fragments_discover', durationMs: 20 }));
-    collector.record(createEvent({ toolName: 'fragments_inspect', durationMs: 30 }));
-
-    const summary = collector.toSummary();
-    expect(summary.totalCalls).toBe(3);
-    expect(summary.uniqueTools).toBe(2);
-    expect(summary.toolStats.fragments_discover.callCount).toBe(2);
-    expect(summary.toolStats.fragments_discover.avgDuration).toBe(15);
-    expect(summary.toolStats.fragments_inspect.callCount).toBe(1);
-  });
-
-  it('tracks error rate', () => {
-    const collector = new ToolAnalyticsCollector();
-    collector.record(createEvent({ error: null }));
-    collector.record(createEvent({ error: 'fail' }));
-
-    const summary = collector.toSummary();
-    expect(summary.errorRate).toBe(0.5);
-  });
-
-  it('detects common flows', () => {
-    const collector = new ToolAnalyticsCollector();
-    const base = Date.now();
-
-    // Create a repeated flow: discover -> inspect -> discover -> inspect
-    collector.record(createEvent({ toolName: 'fragments_discover', timestamp: base }));
-    collector.record(createEvent({ toolName: 'fragments_inspect', timestamp: base + 100 }));
-    collector.record(createEvent({ toolName: 'fragments_discover', timestamp: base + 200 }));
-    collector.record(createEvent({ toolName: 'fragments_inspect', timestamp: base + 300 }));
-
-    const summary = collector.toSummary();
-    expect(summary.commonFlows.length).toBeGreaterThan(0);
-    expect(summary.commonFlows[0].sequence).toEqual(['fragments_discover', 'fragments_inspect']);
-    expect(summary.commonFlows[0].count).toBe(2);
-  });
-
-  it('splits sessions on 30s gap', () => {
-    const collector = new ToolAnalyticsCollector();
-    const base = Date.now();
-
-    collector.record(createEvent({ toolName: 'a', timestamp: base }));
-    collector.record(createEvent({ toolName: 'b', timestamp: base + 100 }));
-    // 31s gap
-    collector.record(createEvent({ toolName: 'a', timestamp: base + 31_100 }));
-    collector.record(createEvent({ toolName: 'b', timestamp: base + 31_200 }));
-
-    const summary = collector.toSummary();
-    // "a -> b" appears in both sessions
-    const abFlow = summary.commonFlows.find(f =>
-      f.sequence[0] === 'a' && f.sequence[1] === 'b'
-    );
-    expect(abFlow).toBeDefined();
-    expect(abFlow!.count).toBe(2);
-  });
-
-  it('computes percentiles', () => {
-    const collector = new ToolAnalyticsCollector();
-    for (let i = 1; i <= 100; i++) {
-      collector.record(createEvent({ durationMs: i }));
-    }
-
-    const summary = collector.toSummary();
-    const stat = summary.toolStats.fragments_discover;
-    expect(stat.p50).toBeGreaterThanOrEqual(49);
-    expect(stat.p50).toBeLessThanOrEqual(51);
-    expect(stat.p95).toBeGreaterThanOrEqual(94);
-    expect(stat.p95).toBeLessThanOrEqual(96);
-  });
-
-  it('produces PostHog properties', () => {
-    const collector = new ToolAnalyticsCollector();
-    collector.record(createEvent());
-
-    const props = collector.toPostHogProperties();
-    expect(props.webmcp_total_calls).toBe(1);
-    expect(props.webmcp_unique_tools).toBe(1);
-    expect(typeof props.webmcp_tool_breakdown).toBe('string');
-  });
-
-  it('resets state', () => {
-    const collector = new ToolAnalyticsCollector();
-    collector.record(createEvent());
-    collector.reset();
-
-    const summary = collector.toSummary();
-    expect(summary.totalCalls).toBe(0);
-  });
-});