@fragments-sdk/cli 0.8.1 → 0.9.1

package/dist/{tokens-NIXSZRX7.js.map → tokens-2EXPCVP3.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/commands/tokens.ts"],"sourcesContent":["/**\n * CLI Tokens Command\n *\n * Discover and list design tokens from CSS/SCSS files.\n *\n * Usage:\n *   fragments tokens              # List all tokens\n *   fragments tokens --json       # Output as JSON\n *   fragments tokens --categories # Group by category\n *   fragments tokens --theme dark # Filter by theme\n */\n\nimport pc from \"picocolors\";\nimport { BRAND } from \"../core/index.js\";\nimport type { DesignToken, TokenCategory, TokenConfig } from \"../core/index.js\";\nimport { loadConfig } from \"../core/node.js\";\nimport { parseTokenFiles, createTokenRegistry } from \"../service/index.js\";\n\nexport interface TokensCommandOptions {\n  config?: string;\n  json?: boolean;\n  categories?: boolean;\n  theme?: string;\n  category?: string;\n  verbose?: boolean;\n}\n\nexport interface TokensCommandResult {\n  success: boolean;\n  tokenCount: number;\n  errors: string[];\n}\n\n/**\n * Run the tokens command\n */\nexport async function tokens(\n  options: TokensCommandOptions\n): Promise<TokensCommandResult> {\n  const errors: string[] = [];\n\n  try {\n    console.log(pc.cyan(`\\n${BRAND.name} Token Discovery\\n`));\n\n    // Load config\n    const { config, configDir } = await loadConfig(options.config);\n\n    // Check for token configuration\n    if (!config.tokens || !config.tokens.include || config.tokens.include.length === 0) {\n      console.log(pc.yellow(\"No token configuration found.\\n\"));\n      console.log(pc.dim(\"Add 'tokens' config to fragments.config.ts:\"));\n      console.log(pc.dim(`\n  tokens: {\n    include: ['src/styles/theme.scss', 'src/styles/variables.css'],\n    themeSelectors: {\n      ':root': 'default',\n      '[data-theme=\"dark\"]': 'dark',\n    },\n  },\n`));\n      return { success: false, tokenCount: 0, errors: [\"No token configuration\"] };\n    }\n\n    console.log(pc.dim(`Scanning files: ${config.tokens.include.join(\", \")}\\n`));\n\n    // Parse token files\n    const parseResult = await parseTokenFiles(config.tokens, configDir);\n\n    if (parseResult.errors.length > 0) {\n      console.log(pc.yellow(\"Parse errors:\"));\n      for (const err of parseResult.errors) {\n        console.log(pc.red(`  ${err.file}: ${err.message}`));\n        errors.push(`${err.file}: ${err.message}`);\n      }\n      console.log();\n    }\n\n    if (parseResult.warnings.length > 0 && options.verbose) {\n      console.log(pc.yellow(\"Warnings:\"));\n      for (const warning of parseResult.warnings) {\n        console.log(pc.dim(`  ${warning}`));\n      }\n      console.log();\n    }\n\n    let tokens = parseResult.tokens;\n\n    // Filter by theme if specified\n    if (options.theme) {\n      tokens = tokens.filter(\n        (t) => t.theme === options.theme || t.theme === \"default\"\n      );\n    }\n\n    // Filter by category if specified\n    if (options.category) {\n      tokens = tokens.filter((t) => t.category === options.category);\n    }\n\n    if (tokens.length === 0) {\n      console.log(pc.yellow(\"No tokens found.\\n\"));\n      console.log(pc.dim(\"Make sure your CSS files contain CSS custom properties (--token-name: value;)\"));\n      return { success: true, tokenCount: 0, errors };\n    }\n\n    // Output based on format\n    if (options.json) {\n      outputJson(tokens, parseResult.parseTimeMs);\n    } else if (options.categories) {\n      outputByCategory(tokens, parseResult.parseTimeMs);\n    } else {\n      outputList(tokens, parseResult.parseTimeMs, options.verbose);\n    }\n\n    return { success: true, tokenCount: tokens.length, errors };\n  } catch (error) {\n    const message = error instanceof Error ? error.message : \"Unknown error\";\n    console.error(pc.red(\"Error:\"), message);\n    errors.push(message);\n    return { success: false, tokenCount: 0, errors };\n  }\n}\n\n/**\n * Output tokens as JSON\n */\nfunction outputJson(tokens: DesignToken[], parseTimeMs: number): void {\n  const output = {\n    tokens,\n    meta: {\n      totalTokens: tokens.length,\n      parseTimeMs,\n      discoveredAt: new Date().toISOString(),\n    },\n  };\n\n  console.log(JSON.stringify(output, null, 2));\n}\n\n/**\n * Output tokens grouped by category\n */\nfunction outputByCategory(tokens: DesignToken[], parseTimeMs: number): void {\n  // Group by category\n  const byCategory = new Map<TokenCategory, DesignToken[]>();\n\n  for (const token of tokens) {\n    const list = byCategory.get(token.category) || [];\n    list.push(token);\n    byCategory.set(token.category, list);\n  }\n\n  // Sort categories alphabetically\n  const categories = Array.from(byCategory.keys()).sort();\n\n  for (const category of categories) {\n    const categoryTokens = byCategory.get(category) || [];\n    console.log(pc.bold(`${category} (${categoryTokens.length})`));\n    console.log(pc.dim(\"─\".repeat(40)));\n\n    for (const token of categoryTokens.slice(0, 10)) {\n      const levelLabel = token.level === 1 ? \"base\" : token.level === 2 ? \"semantic\" : \"component\";\n      console.log(`  ${pc.cyan(token.name)}`);\n      console.log(`    ${pc.dim(\"Value:\")} ${token.resolvedValue}`);\n      console.log(`    ${pc.dim(\"Level:\")} ${levelLabel} ${pc.dim(`(${token.theme})`)}`);\n    }\n\n    if (categoryTokens.length > 10) {\n      console.log(pc.dim(`  ... and ${categoryTokens.length - 10} more`));\n    }\n    console.log();\n  }\n\n  // Summary\n  console.log(pc.dim(\"─\".repeat(40)));\n  console.log(pc.green(`✓ Found ${tokens.length} token(s) in ${categories.length} categories`));\n  console.log(pc.dim(`  Parsed in ${parseTimeMs.toFixed(1)}ms\\n`));\n}\n\n/**\n * Output tokens as a simple list\n */\nfunction outputList(tokens: DesignToken[], parseTimeMs: number, verbose?: boolean): void {\n  // Group by theme first\n  const byTheme = new Map<string, DesignToken[]>();\n\n  for (const token of tokens) {\n    const list = byTheme.get(token.theme) || [];\n    list.push(token);\n    byTheme.set(token.theme, list);\n  }\n\n  const themes = Array.from(byTheme.keys()).sort();\n\n  for (const theme of themes) {\n    const themeTokens = byTheme.get(theme) || [];\n\n    if (themes.length > 1) {\n      console.log(pc.bold(`Theme: ${theme} (${themeTokens.length} tokens)`));\n      console.log(pc.dim(\"─\".repeat(50)));\n    }\n\n    // Sort tokens by name\n    themeTokens.sort((a, b) => a.name.localeCompare(b.name));\n\n    // Table header\n    console.log(\n      pc.dim(\n        `${\"Token Name\".padEnd(32)} ${\"Value\".padEnd(20)} ${\"Category\".padEnd(12)}`\n      )\n    );\n    console.log(pc.dim(\"─\".repeat(70)));\n\n    const displayTokens = verbose ? themeTokens : themeTokens.slice(0, 30);\n\n    for (const token of displayTokens) {\n      const name = token.name.length > 30 ? token.name.slice(0, 27) + \"...\" : token.name;\n      const value = token.resolvedValue.length > 18 ? token.resolvedValue.slice(0, 15) + \"...\" : token.resolvedValue;\n\n      console.log(\n        `${pc.cyan(name.padEnd(32))} ${value.padEnd(20)} ${pc.dim(token.category.padEnd(12))}`\n      );\n    }\n\n    if (!verbose && themeTokens.length > 30) {\n      console.log(pc.dim(`\\n  ... and ${themeTokens.length - 30} more (use --verbose to show all)`));\n    }\n\n    console.log();\n  }\n\n  // Summary\n  console.log(pc.dim(\"─\".repeat(50)));\n  console.log(pc.green(`✓ Found ${tokens.length} token(s)`));\n\n  // Category breakdown\n  const categoryCounts: Record<string, number> = {};\n  for (const token of tokens) {\n    categoryCounts[token.category] = (categoryCounts[token.category] || 0) + 1;\n  }\n\n  const breakdown = Object.entries(categoryCounts)\n    .sort((a, b) => b[1] - a[1])\n    .map(([cat, count]) => `${cat}: ${count}`)\n    .join(\", \");\n\n  console.log(pc.dim(`  ${breakdown}`));\n  console.log(pc.dim(`  Parsed in ${parseTimeMs.toFixed(1)}ms\\n`));\n}\n\nexport default tokens;\n"],"mappings":"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","names":["tokens"]}
+{"version":3,"sources":["../src/commands/tokens.ts"],"sourcesContent":["/**\n * CLI Tokens Command\n *\n * Discover and list design tokens from CSS/SCSS files.\n *\n * Usage:\n *   fragments tokens              # List all tokens\n *   fragments tokens --json       # Output as JSON\n *   fragments tokens --categories # Group by category\n *   fragments tokens --theme dark # Filter by theme\n */\n\nimport pc from \"picocolors\";\nimport { BRAND } from \"../core/index.js\";\nimport type { DesignToken, TokenCategory, TokenConfig } from \"../core/index.js\";\nimport { loadConfig } from \"../core/node.js\";\nimport { parseTokenFiles, createTokenRegistry } from \"../service/index.js\";\n\nexport interface TokensCommandOptions {\n  config?: string;\n  json?: boolean;\n  categories?: boolean;\n  theme?: string;\n  category?: string;\n  verbose?: boolean;\n}\n\nexport interface TokensCommandResult {\n  success: boolean;\n  tokenCount: number;\n  errors: string[];\n}\n\n/**\n * Run the tokens command\n */\nexport async function tokens(\n  options: TokensCommandOptions\n): Promise<TokensCommandResult> {\n  const errors: string[] = [];\n\n  try {\n    console.log(pc.cyan(`\\n${BRAND.name} Token Discovery\\n`));\n\n    // Load config\n    const { config, configDir } = await loadConfig(options.config);\n\n    // Check for token configuration\n    if (!config.tokens || !config.tokens.include || config.tokens.include.length === 0) {\n      console.log(pc.yellow(\"No token configuration found.\\n\"));\n      console.log(pc.dim(\"Add 'tokens' config to fragments.config.ts:\"));\n      console.log(pc.dim(`\n  tokens: {\n    include: ['src/styles/theme.scss', 'src/styles/variables.css'],\n    themeSelectors: {\n      ':root': 'default',\n      '[data-theme=\"dark\"]': 'dark',\n    },\n  },\n`));\n      return { success: false, tokenCount: 0, errors: [\"No token configuration\"] };\n    }\n\n    console.log(pc.dim(`Scanning files: ${config.tokens.include.join(\", \")}\\n`));\n\n    // Parse token files\n    const parseResult = await parseTokenFiles(config.tokens, configDir);\n\n    if (parseResult.errors.length > 0) {\n      console.log(pc.yellow(\"Parse errors:\"));\n      for (const err of parseResult.errors) {\n        console.log(pc.red(`  ${err.file}: ${err.message}`));\n        errors.push(`${err.file}: ${err.message}`);\n      }\n      console.log();\n    }\n\n    if (parseResult.warnings.length > 0 && options.verbose) {\n      console.log(pc.yellow(\"Warnings:\"));\n      for (const warning of parseResult.warnings) {\n        console.log(pc.dim(`  ${warning}`));\n      }\n      console.log();\n    }\n\n    let tokens = parseResult.tokens;\n\n    // Filter by theme if specified\n    if (options.theme) {\n      tokens = tokens.filter(\n        (t) => t.theme === options.theme || t.theme === \"default\"\n      );\n    }\n\n    // Filter by category if specified\n    if (options.category) {\n      tokens = tokens.filter((t) => t.category === options.category);\n    }\n\n    if (tokens.length === 0) {\n      console.log(pc.yellow(\"No tokens found.\\n\"));\n      console.log(pc.dim(\"Make sure your CSS files contain CSS custom properties (--token-name: value;)\"));\n      return { success: true, tokenCount: 0, errors };\n    }\n\n    // Output based on format\n    if (options.json) {\n      outputJson(tokens, parseResult.parseTimeMs);\n    } else if (options.categories) {\n      outputByCategory(tokens, parseResult.parseTimeMs);\n    } else {\n      outputList(tokens, parseResult.parseTimeMs, options.verbose);\n    }\n\n    return { success: true, tokenCount: tokens.length, errors };\n  } catch (error) {\n    const message = error instanceof Error ? error.message : \"Unknown error\";\n    console.error(pc.red(\"Error:\"), message);\n    errors.push(message);\n    return { success: false, tokenCount: 0, errors };\n  }\n}\n\n/**\n * Output tokens as JSON\n */\nfunction outputJson(tokens: DesignToken[], parseTimeMs: number): void {\n  const output = {\n    tokens,\n    meta: {\n      totalTokens: tokens.length,\n      parseTimeMs,\n      discoveredAt: new Date().toISOString(),\n    },\n  };\n\n  console.log(JSON.stringify(output, null, 2));\n}\n\n/**\n * Output tokens grouped by category\n */\nfunction outputByCategory(tokens: DesignToken[], parseTimeMs: number): void {\n  // Group by category\n  const byCategory = new Map<TokenCategory, DesignToken[]>();\n\n  for (const token of tokens) {\n    const list = byCategory.get(token.category) || [];\n    list.push(token);\n    byCategory.set(token.category, list);\n  }\n\n  // Sort categories alphabetically\n  const categories = Array.from(byCategory.keys()).sort();\n\n  for (const category of categories) {\n    const categoryTokens = byCategory.get(category) || [];\n    console.log(pc.bold(`${category} (${categoryTokens.length})`));\n    console.log(pc.dim(\"─\".repeat(40)));\n\n    for (const token of categoryTokens.slice(0, 10)) {\n      const levelLabel = token.level === 1 ? \"base\" : token.level === 2 ? \"semantic\" : \"component\";\n      console.log(`  ${pc.cyan(token.name)}`);\n      console.log(`    ${pc.dim(\"Value:\")} ${token.resolvedValue}`);\n      console.log(`    ${pc.dim(\"Level:\")} ${levelLabel} ${pc.dim(`(${token.theme})`)}`);\n    }\n\n    if (categoryTokens.length > 10) {\n      console.log(pc.dim(`  ... and ${categoryTokens.length - 10} more`));\n    }\n    console.log();\n  }\n\n  // Summary\n  console.log(pc.dim(\"─\".repeat(40)));\n  console.log(pc.green(`✓ Found ${tokens.length} token(s) in ${categories.length} categories`));\n  console.log(pc.dim(`  Parsed in ${parseTimeMs.toFixed(1)}ms\\n`));\n}\n\n/**\n * Output tokens as a simple list\n */\nfunction outputList(tokens: DesignToken[], parseTimeMs: number, verbose?: boolean): void {\n  // Group by theme first\n  const byTheme = new Map<string, DesignToken[]>();\n\n  for (const token of tokens) {\n    const list = byTheme.get(token.theme) || [];\n    list.push(token);\n    byTheme.set(token.theme, list);\n  }\n\n  const themes = Array.from(byTheme.keys()).sort();\n\n  for (const theme of themes) {\n    const themeTokens = byTheme.get(theme) || [];\n\n    if (themes.length > 1) {\n      console.log(pc.bold(`Theme: ${theme} (${themeTokens.length} tokens)`));\n      console.log(pc.dim(\"─\".repeat(50)));\n    }\n\n    // Sort tokens by name\n    themeTokens.sort((a, b) => a.name.localeCompare(b.name));\n\n    // Table header\n    console.log(\n      pc.dim(\n        `${\"Token Name\".padEnd(32)} ${\"Value\".padEnd(20)} ${\"Category\".padEnd(12)}`\n      )\n    );\n    console.log(pc.dim(\"─\".repeat(70)));\n\n    const displayTokens = verbose ? themeTokens : themeTokens.slice(0, 30);\n\n    for (const token of displayTokens) {\n      const name = token.name.length > 30 ? token.name.slice(0, 27) + \"...\" : token.name;\n      const value = token.resolvedValue.length > 18 ? token.resolvedValue.slice(0, 15) + \"...\" : token.resolvedValue;\n\n      console.log(\n        `${pc.cyan(name.padEnd(32))} ${value.padEnd(20)} ${pc.dim(token.category.padEnd(12))}`\n      );\n    }\n\n    if (!verbose && themeTokens.length > 30) {\n      console.log(pc.dim(`\\n  ... and ${themeTokens.length - 30} more (use --verbose to show all)`));\n    }\n\n    console.log();\n  }\n\n  // Summary\n  console.log(pc.dim(\"─\".repeat(50)));\n  console.log(pc.green(`✓ Found ${tokens.length} token(s)`));\n\n  // Category breakdown\n  const categoryCounts: Record<string, number> = {};\n  for (const token of tokens) {\n    categoryCounts[token.category] = (categoryCounts[token.category] || 0) + 1;\n  }\n\n  const breakdown = Object.entries(categoryCounts)\n    .sort((a, b) => b[1] - a[1])\n    .map(([cat, count]) => `${cat}: ${count}`)\n    .join(\", \");\n\n  console.log(pc.dim(`  ${breakdown}`));\n  console.log(pc.dim(`  Parsed in ${parseTimeMs.toFixed(1)}ms\\n`));\n}\n\nexport default tokens;\n"],"mappings":"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","names":["tokens"]}

package/dist/{viewer-HZK4BSDK.js → viewer-RFA2KVBG.js}

@@ -5,15 +5,16 @@ import {
   generatePreviewModule,
   loadConfig,
   parseFragmentFile
-} from "./chunk-CJEGT3WD.js";
+} from "./chunk-BW3ZATBW.js";
 import {
   discoverFragmentFiles,
   discoverInstalledFragments
 } from "./chunk-AWYCDRPG.js";
 import {
   generateContext
-} from "./chunk-NGIMCIK2.js";
-import "./chunk-GOVI6COW.js";
+} from "./chunk-GF6OVPIN.js";
+import "./chunk-NVSPGSKB.js";
+import "./chunk-EZYXYWNF.js";
 import {
   BRAND
 } from "./chunk-EKLMXTWU.js";
@@ -28,6 +29,7 @@ import {
 import react from "@vitejs/plugin-react";
 import { resolve as resolve2, dirname as dirname2, join } from "path";
 import { existsSync, realpathSync } from "fs";
+import { readFile as readFile2 } from "fs/promises";
 import { fileURLToPath as fileURLToPath2 } from "url";
 
 // src/viewer/vite-plugin.ts
@@ -361,7 +363,7 @@ var sharedRenderPool = null;
 var browserPoolModule = null;
 async function getSharedRenderPool() {
   if (!browserPoolModule) {
-    browserPoolModule = await import("./service-A5GIGGGK.js");
+    browserPoolModule = await import("./service-XP2EAJXD.js");
   }
   if (!sharedRenderPool) {
     sharedRenderPool = new browserPoolModule.BrowserPool({
@@ -604,7 +606,7 @@ function fragmentsPlugin(options) {
             const address = _server.httpServer?.address();
             const port = typeof address === "object" && address ? address.port : 6006;
             const renderViewport = viewport || { width: 800, height: 600 };
-            const { FigmaClient, bufferToBase64Url } = await import("./service-A5GIGGGK.js");
+            const { FigmaClient, bufferToBase64Url } = await import("./service-XP2EAJXD.js");
             const figmaClient = new FigmaClient({
               accessToken: figmaToken
             });
@@ -695,7 +697,7 @@ function fragmentsPlugin(options) {
               );
               return;
             }
-            const { FigmaClient } = await import("./service-A5GIGGGK.js");
+            const { FigmaClient } = await import("./service-XP2EAJXD.js");
             const figmaClient = new FigmaClient({ accessToken: figmaToken });
             const { fileKey, nodeId } = figmaClient.parseUrl(figmaUrl);
             const figmaDesignProps = await figmaClient.getNodeProperties(
@@ -736,7 +738,7 @@ function fragmentsPlugin(options) {
               }));
               return;
             }
-            const { getSharedTokenRegistry } = await import("./service-A5GIGGGK.js");
+            const { getSharedTokenRegistry } = await import("./service-XP2EAJXD.js");
             const registry = getSharedTokenRegistry();
             if (!registry.isInitialized()) {
               await registry.initialize(config.tokens, projectRoot);
@@ -796,7 +798,7 @@ function fragmentsPlugin(options) {
               }));
               return;
             }
-            const { getSharedTokenRegistry } = await import("./service-A5GIGGGK.js");
+            const { getSharedTokenRegistry } = await import("./service-XP2EAJXD.js");
             const registry = getSharedTokenRegistry();
             if (!registry.isInitialized()) {
               await registry.initialize(config.tokens, projectRoot);
@@ -858,7 +860,7 @@ function fragmentsPlugin(options) {
               res.end(JSON.stringify({ error: "Could not resolve fragment file path" }));
               return;
             }
-            const { getSharedTokenRegistry } = await import("./service-A5GIGGGK.js");
+            const { getSharedTokenRegistry } = await import("./service-XP2EAJXD.js");
             const registry = getSharedTokenRegistry();
             if (!registry.isInitialized()) {
               await registry.initialize(config.tokens, projectRoot);
@@ -1073,7 +1075,7 @@ function fragmentsPlugin(options) {
             const {
               getSharedTokenRegistry,
               generateTokenPatches
-            } = await import("./service-A5GIGGGK.js");
+            } = await import("./service-XP2EAJXD.js");
             const registry = getSharedTokenRegistry();
             if (!registry.isInitialized()) {
               await registry.initialize(config.tokens, projectRoot);
@@ -1370,7 +1372,7 @@ function fragmentsPlugin(options) {
     // Load virtual modules
     load(id) {
       if (id === VIRTUAL_FRAGMENTS_RESOLVED) {
-        return generateFragmentsModule(fragmentFiles, config, previewConfigPath);
+        return generateFragmentsModule(fragmentFiles, config, previewConfigPath, projectRoot);
       }
       if (id === VIRTUAL_VIEWER_ENTRY_RESOLVED) {
         return generateViewerEntry();
@@ -1455,6 +1457,14 @@ function extractComponentName(filePath) {
   const match = filePath.match(/([^/\\]+)\.(fragment|stories)\.(tsx?|jsx?)$/);
   return match ? match[1] : filePath.split("/").pop() || filePath;
 }
+async function readProjectPackageName(root) {
+  try {
+    const pkgJson = JSON.parse(await readFile(resolve(root, "package.json"), "utf-8"));
+    return pkgJson.name || null;
+  } catch {
+    return null;
+  }
+}
 async function extractDependenciesFromSource(absolutePath) {
   try {
     const source = await readFile(absolutePath, "utf-8");
@@ -1471,7 +1481,7 @@ async function extractDependenciesFromSource(absolutePath) {
     return [];
   }
 }
-async function generateFragmentsModule(fragmentFiles, config, previewConfigPath) {
+async function generateFragmentsModule(fragmentFiles, config, previewConfigPath, projectRoot) {
   const authoredVariantCodeCache = /* @__PURE__ */ new Map();
   async function loadAuthoredVariantCode(fragmentFilePath) {
     if (authoredVariantCodeCache.has(fragmentFilePath)) {
@@ -1494,6 +1504,9 @@ async function generateFragmentsModule(fragmentFiles, config, previewConfigPath)
       return {};
     }
   }
+  const storyOnlyFiles = fragmentFiles.filter((f) => isStoryFile(f.relativePath));
+  const { detectSubComponentPaths: _detectSubs } = await import("./storyFilters-3LUYAFZF.js");
+  const subComponentMap = _detectSubs(storyOnlyFiles);
   const filesByBasePath = /* @__PURE__ */ new Map();
   for (const file of fragmentFiles) {
     const basePath = getBaseComponentPath(file.relativePath);
@@ -1517,11 +1530,14 @@ async function generateFragmentsModule(fragmentFiles, config, previewConfigPath)
       const componentName = extractComponentName(primaryFile.relativePath);
       const fragmentSource = files.fragmentFile || primaryFile;
       const dependencies = await extractDependenciesFromSource(fragmentSource.absolutePath);
+      const parentComponent = isStory ? subComponentMap.get(primaryFile.relativePath) : void 0;
       return `  {
     path: "${primaryFile.relativePath}",
     isStory: ${isStory},
     componentName: ${JSON.stringify(componentName)},
     dependencies: ${JSON.stringify(dependencies)},
+    isSubComponent: ${!!parentComponent},
+    parentComponent: ${parentComponent ? JSON.stringify(parentComponent) : "null"},
     loader: () => import("${primaryFile.absolutePath}"),
     metadataLoader: ${metadataPath ? `() => import("${metadataPath}")` : "null"},
     authoredVariantCode: ${JSON.stringify(authoredVariantCode)}
@@ -1541,10 +1557,14 @@ setPreviewConfig({
   loaders: previewConfig.loaders,
 });
 ` : "";
+  const storybookFilterConfig = JSON.stringify(config.storybook ?? {});
   return `
-import { storyModuleToFragment, setPreviewConfig } from "@fragments-sdk/cli/core";
+import { storyModuleToFragment, setPreviewConfig, checkStoryExclusion, isForceIncluded, isConfigExcluded } from "@fragments-sdk/cli/core";
 ${previewImport}
 ${previewSetup}
+// Storybook filter config (deep-merged with defaults at build time)
+const storybookFilterConfig = ${storybookFilterConfig};
+
 // Lazy fragment loaders (supports both .fragment.tsx and .stories.tsx)
 const fragmentLoaders = [
 ${loaders}
@@ -1607,8 +1627,24 @@ function mergeAuthoredVariantCode(fragment, authoredVariantCode) {
   return fragment;
 }
 
+// Diagnostics: track exclusions for FRAGMENTS_DEBUG
+const exclusionLog = [];
+
+/**
+ * Try to load a paired .fragment.tsx file as fallback when a story is excluded.
+ * Returns the fragment if available, null otherwise.
+ */
+async function tryFallbackFragment(loader) {
+  if (!loader.metadataLoader) return null;
+  try {
+    const mod = await loader.metadataLoader();
+    return mod?.default ? { path: loader.path, fragment: mod.default } : null;
+  } catch { return null; }
+}
+
 // Load all fragments (for initial render)
 // Gracefully handles individual failures - one bad story won't break all fragments
+// Applies smart filtering for Storybook stories (SVG icons, deprecated, test stories, sub-components)
 export async function loadAllFragments() {
   const results = await Promise.all(
     fragmentLoaders.map(async (loader) => {
@@ -1618,6 +1654,30 @@ export async function loadAllFragments() {
           return cached ? { path: loader.path, fragment: cached } : null;
         }
 
+        // --- Pre-load filtering (config-level and sub-component checks) ---
+        if (loader.isStory) {
+          // Force-include bypasses all filters
+          if (!isForceIncluded(loader.componentName, storybookFilterConfig)) {
+            // Config explicit exclude
+            if (isConfigExcluded(loader.componentName, storybookFilterConfig)) {
+              exclusionLog.push({ component: loader.componentName, reason: 'config-excluded', detail: 'Matches storybook.exclude pattern', path: loader.path });
+              const fallback = await tryFallbackFragment(loader);
+              if (fallback) return fallback;
+              loadedFragments.set(loader.path, null);
+              return null;
+            }
+
+            // Sub-component check (directory-based, computed at build time)
+            if (loader.isSubComponent && storybookFilterConfig.excludeSubComponents !== false) {
+              exclusionLog.push({ component: loader.componentName, reason: 'sub-component', detail: 'Sub-component of ' + loader.parentComponent, path: loader.path });
+              const fallback = await tryFallbackFragment(loader);
+              if (fallback) return fallback;
+              loadedFragments.set(loader.path, null);
+              return null;
+            }
+          }
+        }
+
         const module = await loader.loader();
 
         // Convert story modules to fragments at runtime
@@ -1629,6 +1689,29 @@ export async function loadAllFragments() {
             loadedFragments.set(loader.path, null);
             return null;
           }
+
+          // --- Post-load filtering (needs loaded module data) ---
+          if (!isForceIncluded(loader.componentName, storybookFilterConfig)) {
+            const meta = module.default || {};
+            const exclusion = checkStoryExclusion({
+              storybookTitle: meta.title,
+              componentName: fragment.meta?.name || loader.componentName,
+              componentDisplayName: meta.component?.displayName,
+              componentFunctionName: meta.component?.name,
+              tags: meta.tags,
+              variantCount: fragment.variants?.length || 0,
+              filePath: loader.path,
+              config: storybookFilterConfig,
+            });
+
+            if (exclusion.excluded) {
+              exclusionLog.push({ component: fragment.meta?.name || loader.componentName, reason: exclusion.reason, detail: exclusion.detail, path: loader.path });
+              const fallback = await tryFallbackFragment(loader);
+              if (fallback) return fallback;
+              loadedFragments.set(loader.path, null);
+              return null;
+            }
+          }
         } else {
           fragment = module.default;
         }
@@ -1670,6 +1753,15 @@ export async function loadAllFragments() {
       }
     })
   );
+
+  // Log exclusions in debug mode
+  if (exclusionLog.length > 0) {
+    console.log("[Fragments] Filtered " + exclusionLog.length + " component(s)");
+    if (typeof process !== 'undefined' && process.env?.FRAGMENTS_DEBUG) {
+      console.table(exclusionLog);
+    }
+  }
+
   // Filter out nulls (fragments that had no component)
   return results.filter(r => r !== null);
 }
@@ -1718,9 +1810,12 @@ export async function loadFragment(path) {
 let fragments = [];
 const fragmentsPromise = loadAllFragments().then(s => { fragments = s; return s; });
 
-export { fragments, fragmentsPromise };
+export { fragments, fragmentsPromise, exclusionLog };
 export const config = ${JSON.stringify(config)};
 
+// Auto-detect consumer package name from package.json
+export const projectPackageName = ${JSON.stringify(await readProjectPackageName(projectRoot))};
+
 // HMR support
 if (import.meta.hot) {
   import.meta.hot.accept();
@@ -2088,7 +2183,7 @@ async function loadFullFragmentForCompare(_server, _fragmentFiles, componentName
   }
 }
 async function compareImages(image1Base64, image2Base64, threshold) {
-  const { DiffEngine, base64UrlToBuffer, bufferToBase64Url } = await import("./service-A5GIGGGK.js");
+  const { DiffEngine, base64UrlToBuffer, bufferToBase64Url } = await import("./service-XP2EAJXD.js");
   const { PNG } = await import("pngjs");
   const buffer1 = base64UrlToBuffer(image1Base64);
   const buffer2 = base64UrlToBuffer(image2Base64);
@@ -2308,6 +2403,100 @@ export function useSyncExternalStoreWithSelector(subscribe, getSnapshot, getServ
     }
   };
 }
+function optionalPeerDepsPlugin(uiLibRoot) {
+  const optionalDeps = [
+    "@tanstack/react-table",
+    "shiki",
+    "recharts",
+    "react-day-picker",
+    "date-fns",
+    "react-colorful",
+    "react-markdown",
+    "remark-gfm",
+    "@tiptap/react",
+    "@tiptap/starter-kit",
+    "@tiptap/extension-link"
+  ];
+  let resolvedUiRoot;
+  try {
+    resolvedUiRoot = realpathSync(uiLibRoot);
+  } catch {
+    resolvedUiRoot = uiLibRoot;
+  }
+  const availableDeps = /* @__PURE__ */ new Set();
+  for (const dep of optionalDeps) {
+    const depPath = join(uiLibRoot, "..", "node_modules", ...dep.split("/"));
+    if (existsSync(depPath)) availableDeps.add(dep);
+  }
+  return {
+    name: "fragments:optional-peer-deps",
+    enforce: "pre",
+    transform(code, id) {
+      let resolvedId;
+      try {
+        resolvedId = realpathSync(id);
+      } catch {
+        resolvedId = id;
+      }
+      if (!resolvedId.startsWith(resolvedUiRoot)) return;
+      if (!id.endsWith(".tsx") && !id.endsWith(".ts")) return;
+      if (!code.includes("require(")) return;
+      let transformed = code;
+      const imports = [];
+      let counter = 0;
+      for (const dep of availableDeps) {
+        const escapedDep = dep.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+        const regex = new RegExp(`require\\(['"]${escapedDep}['"]\\)`, "g");
+        if (regex.test(code)) {
+          const varName = `__fui_dep_${counter++}`;
+          imports.push(`import * as ${varName} from '${dep}';`);
+          regex.lastIndex = 0;
+          transformed = transformed.replace(regex, varName);
+        }
+      }
+      if (imports.length > 0) {
+        transformed = imports.join("\n") + "\n" + transformed;
+        return { code: transformed, map: null };
+      }
+    }
+  };
+}
+async function detectTsconfigPaths(projectRoot) {
+  const aliases = {};
+  const tsconfigPath = join(projectRoot, "tsconfig.json");
+  if (!existsSync(tsconfigPath)) return aliases;
+  try {
+    const content = await readFile2(tsconfigPath, "utf-8");
+    const cleaned = content.replace(/\/\/.*$/gm, "").replace(/\/\*[\s\S]*?\*\//g, "");
+    const tsconfig = JSON.parse(cleaned);
+    const paths = tsconfig?.compilerOptions?.paths;
+    const baseUrl = tsconfig?.compilerOptions?.baseUrl || ".";
+    if (paths) {
+      for (const [alias, targets] of Object.entries(paths)) {
+        const target = targets[0];
+        if (target) {
+          const cleanAlias = alias.replace("/*", "");
+          const cleanTarget = target.replace("/*", "");
+          aliases[cleanAlias] = resolve2(projectRoot, baseUrl, cleanTarget);
+        }
+      }
+    }
+  } catch {
+  }
+  return aliases;
+}
+async function detectStorybookAliases(projectRoot) {
+  const aliases = {};
+  const assetsDir = resolve2(projectRoot, "assets");
+  const fontsDir = resolve2(projectRoot, "assets/fonts");
+  if (existsSync(fontsDir)) {
+    aliases["/fonts"] = fontsDir;
+  }
+  if (existsSync(assetsDir)) {
+    aliases["/assets"] = assetsDir;
+  }
+  return aliases;
+}
 async function createDevServer(options = {}) {
   const startTime = performance.now();
   const {
@@ -2346,7 +2535,19 @@ async function createDevServer(options = {}) {
   const sharedLibRoot = resolveSharedLib();
   const webmcpLibRoot = resolveWebMCPLib(nodeModulesPath);
   const contextLibRoot = resolveContextLib(nodeModulesPath);
+  const isWebMCPSource = existsSync(join(webmcpLibRoot, "react/index.ts"));
+  const isContextSource = existsSync(join(contextLibRoot, "types/index.ts"));
   console.log(`\u{1F4C1} Using node_modules: ${nodeModulesPath}`);
+  const tsconfigAliases = await detectTsconfigPaths(projectRoot);
+  const storybookAliases = await detectStorybookAliases(projectRoot);
+  const storybookDir = resolve2(projectRoot, ".storybook");
+  const hasStorybookDir = existsSync(storybookDir);
+  if (Object.keys(tsconfigAliases).length > 0) {
+    console.log(`\u{1F4CE} Detected ${Object.keys(tsconfigAliases).length} tsconfig path alias(es)`);
+  }
+  if (hasStorybookDir) {
+    console.log(`\u{1F4D8} Detected .storybook directory`);
+  }
   const installedPkgRoots = [...new Set(
     installedFiles.map((f) => {
       const idx = f.absolutePath.indexOf("/node_modules/");
@@ -2368,8 +2569,19 @@ async function createDevServer(options = {}) {
       port,
       open: open ? "/fragments/" : false,
       fs: {
-        // Allow serving files from viewer package, project, shared libs, and node_modules root
-        allow: [viewerRoot, uiLibRoot, sharedLibRoot, webmcpLibRoot, contextLibRoot, projectRoot, configDir, dirname2(nodeModulesPath), ...installedPkgRoots]
+        // Allow serving files from viewer package, project, shared libs, node_modules root, and .storybook
+        allow: [
+          viewerRoot,
+          uiLibRoot,
+          sharedLibRoot,
+          webmcpLibRoot,
+          contextLibRoot,
+          projectRoot,
+          configDir,
+          dirname2(nodeModulesPath),
+          ...hasStorybookDir ? [storybookDir] : [],
+          ...installedPkgRoots
+        ]
       }
     },
     plugins: [
@@ -2377,6 +2589,8 @@ async function createDevServer(options = {}) {
       ...hasReactPlugin(projectViteConfig) ? [] : [react()],
       // CJS interop for packages imported from within node_modules
       cjsInteropPlugin(nodeModulesPath),
+      // Rewrite require() → ESM import for optional peer deps (e.g., @tanstack/react-table)
+      optionalPeerDepsPlugin(uiLibRoot),
       // Fragments plugins (array including SVGR)
       ...fragmentsPlugin({
         fragmentFiles: allFragmentFiles,
@@ -2389,6 +2603,15 @@ async function createDevServer(options = {}) {
     css: {
       modules: {
         localsConvention: "camelCase"
+      },
+      preprocessorOptions: {
+        scss: {
+          api: "modern-compiler",
+          loadPaths: [
+            resolve2(projectRoot, "src"),
+            resolve2(projectRoot, "src/styles")
+          ]
+        }
       }
     },
     optimizeDeps: {
@@ -2400,17 +2623,21 @@ async function createDevServer(options = {}) {
       // Dedupe ensures all imports of these packages resolve to the same copy
       dedupe: ["react", "react-dom"],
       alias: {
+        // Project-specific aliases (tsconfig paths, Storybook static dirs)
+        // Listed first — Fragments-specific aliases below take precedence
+        ...tsconfigAliases,
+        ...storybookAliases,
         // Resolve @fragments-sdk/ui to local source or installed package
         "@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/react": isWebMCPSource ? join(webmcpLibRoot, "react/index.ts") : join(webmcpLibRoot, "dist/react/index.js"),
+        "@fragments-sdk/webmcp/fragments": isWebMCPSource ? join(webmcpLibRoot, "fragments/index.ts") : join(webmcpLibRoot, "dist/fragments/index.js"),
         "@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/types": isContextSource ? join(contextLibRoot, "types/index.ts") : join(contextLibRoot, "dist/types/index.js"),
+        "@fragments-sdk/context/mcp-tools": isContextSource ? join(contextLibRoot, "mcp-tools/index.ts") : join(contextLibRoot, "dist/mcp-tools/index.js"),
         "@fragments-sdk/context": contextLibRoot,
         // Resolve @fragments-sdk/cli/core to the CLI's own core source
         "@fragments-sdk/cli/core": resolve2(cliPackageRoot, "src/core/index.ts"),
@@ -2481,4 +2708,4 @@ export {
   createDevServer,
   fragmentsPlugin
 };
-//# sourceMappingURL=viewer-HZK4BSDK.js.map
+//# sourceMappingURL=viewer-RFA2KVBG.js.map