@fragments-sdk/cli 0.8.1 → 0.9.0

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

@@ -0,0 +1,72 @@
+/**
+ * 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

@@ -0,0 +1,75 @@
+/**
+ * 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

@@ -0,0 +1,55 @@
+/**
+ * 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'`;