@fragments-sdk/cli 0.7.9 → 0.7.10

package/dist/{viewer-ZWQQ74FV.js → viewer-ZA7WK3EY.js}

@@ -4,15 +4,15 @@ import {
   findStorybookDir,
   generatePreviewModule,
   loadConfig
-} from "./chunk-CWKQQR6C.js";
+} from "./chunk-57OW43NL.js";
 import {
   discoverFragmentFiles,
   discoverInstalledFragments
 } from "./chunk-AWYCDRPG.js";
 import {
   generateContext
-} from "./chunk-2EFVPE5Q.js";
-import "./chunk-AA6CAHCZ.js";
+} from "./chunk-TQOGBAOZ.js";
+import "./chunk-7CRC46HV.js";
 import {
   BRAND
 } from "./chunk-EKLMXTWU.js";
@@ -360,7 +360,7 @@ var sharedRenderPool = null;
 var browserPoolModule = null;
 async function getSharedRenderPool() {
   if (!browserPoolModule) {
-    browserPoolModule = await import("./service-HL6TMP3B.js");
+    browserPoolModule = await import("./service-QACVPR37.js");
   }
   if (!sharedRenderPool) {
     sharedRenderPool = new browserPoolModule.BrowserPool({
@@ -603,7 +603,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-HL6TMP3B.js");
+            const { FigmaClient, bufferToBase64Url } = await import("./service-QACVPR37.js");
             const figmaClient = new FigmaClient({
               accessToken: figmaToken
             });
@@ -694,7 +694,7 @@ function fragmentsPlugin(options) {
               );
               return;
             }
-            const { FigmaClient } = await import("./service-HL6TMP3B.js");
+            const { FigmaClient } = await import("./service-QACVPR37.js");
             const figmaClient = new FigmaClient({ accessToken: figmaToken });
             const { fileKey, nodeId } = figmaClient.parseUrl(figmaUrl);
             const figmaDesignProps = await figmaClient.getNodeProperties(
@@ -735,7 +735,7 @@ function fragmentsPlugin(options) {
               }));
               return;
             }
-            const { getSharedTokenRegistry } = await import("./service-HL6TMP3B.js");
+            const { getSharedTokenRegistry } = await import("./service-QACVPR37.js");
             const registry = getSharedTokenRegistry();
             if (!registry.isInitialized()) {
               await registry.initialize(config.tokens, projectRoot);
@@ -795,7 +795,7 @@ function fragmentsPlugin(options) {
               }));
               return;
             }
-            const { getSharedTokenRegistry } = await import("./service-HL6TMP3B.js");
+            const { getSharedTokenRegistry } = await import("./service-QACVPR37.js");
             const registry = getSharedTokenRegistry();
             if (!registry.isInitialized()) {
               await registry.initialize(config.tokens, projectRoot);
@@ -857,7 +857,7 @@ function fragmentsPlugin(options) {
               res.end(JSON.stringify({ error: "Could not resolve fragment file path" }));
               return;
             }
-            const { getSharedTokenRegistry } = await import("./service-HL6TMP3B.js");
+            const { getSharedTokenRegistry } = await import("./service-QACVPR37.js");
             const registry = getSharedTokenRegistry();
             if (!registry.isInitialized()) {
               await registry.initialize(config.tokens, projectRoot);
@@ -983,7 +983,7 @@ function fragmentsPlugin(options) {
             }
             const { writeFile, mkdir } = await import("fs/promises");
             const { join: join2 } = await import("path");
-            const { BRAND: BRAND2 } = await import("./core-YAPWXDZW.js");
+            const { BRAND: BRAND2 } = await import("./core/index.js");
             const fragmentsDir = join2(projectRoot, BRAND2.dataDir, BRAND2.componentsDir);
             await mkdir(fragmentsDir, { recursive: true });
             const fragmentPath = join2(
@@ -1056,7 +1056,7 @@ function fragmentsPlugin(options) {
             const {
               getSharedTokenRegistry,
               generateTokenPatches
-            } = await import("./service-HL6TMP3B.js");
+            } = await import("./service-QACVPR37.js");
             const registry = getSharedTokenRegistry();
             if (!registry.isInitialized()) {
               await registry.initialize(config.tokens, projectRoot);
@@ -1403,7 +1403,27 @@ function isStoryFile(filePath) {
 function getBaseComponentPath(filePath) {
   return filePath.replace(/\.(fragment|stories)\.(tsx?|jsx?)$/, "");
 }
-function generateFragmentsModule(fragmentFiles, config, previewConfigPath) {
+function extractComponentName(filePath) {
+  const match = filePath.match(/([^/\\]+)\.(fragment|stories)\.(tsx?|jsx?)$/);
+  return match ? match[1] : filePath.split("/").pop() || filePath;
+}
+async function extractDependenciesFromSource(absolutePath) {
+  try {
+    const source = await readFile(absolutePath, "utf-8");
+    const depsMatch = source.match(/dependencies:\s*\[([\s\S]*?)\]/);
+    if (!depsMatch) return [];
+    const names = [];
+    const nameRegex = /name:\s*['"]([^'"]+)['"]/g;
+    let match;
+    while ((match = nameRegex.exec(depsMatch[1])) !== null) {
+      names.push(match[1]);
+    }
+    return names;
+  } catch {
+    return [];
+  }
+}
+async function generateFragmentsModule(fragmentFiles, config, previewConfigPath) {
   const filesByBasePath = /* @__PURE__ */ new Map();
   for (const file of fragmentFiles) {
     const basePath = getBaseComponentPath(file.relativePath);
@@ -1416,18 +1436,26 @@ function generateFragmentsModule(fragmentFiles, config, previewConfigPath) {
     }
     filesByBasePath.set(basePath, existing);
   }
-  const loaders = Array.from(filesByBasePath.values()).map((files) => {
-    const primaryFile = files.storyFile || files.fragmentFile;
-    if (!primaryFile) return null;
-    const isStory = !!files.storyFile;
-    const metadataPath = files.storyFile && files.fragmentFile ? files.fragmentFile.absolutePath : null;
-    return `  {
+  const loaderEntries = await Promise.all(
+    Array.from(filesByBasePath.values()).map(async (files) => {
+      const primaryFile = files.storyFile || files.fragmentFile;
+      if (!primaryFile) return null;
+      const isStory = !!files.storyFile;
+      const metadataPath = files.storyFile && files.fragmentFile ? files.fragmentFile.absolutePath : null;
+      const componentName = extractComponentName(primaryFile.relativePath);
+      const fragmentSource = files.fragmentFile || primaryFile;
+      const dependencies = await extractDependenciesFromSource(fragmentSource.absolutePath);
+      return `  {
     path: "${primaryFile.relativePath}",
     isStory: ${isStory},
+    componentName: ${JSON.stringify(componentName)},
+    dependencies: ${JSON.stringify(dependencies)},
     loader: () => import("${primaryFile.absolutePath}"),
     metadataLoader: ${metadataPath ? `() => import("${metadataPath}")` : "null"}
   }`;
-  }).filter(Boolean).join(",\n");
+    })
+  );
+  const loaders = loaderEntries.filter(Boolean).join(",\n");
   const previewImport = previewConfigPath ? `import * as previewConfig from "virtual:fragments-preview";` : "";
   const previewSetup = previewConfigPath ? `
 // Set global preview config before loading fragments
@@ -1441,7 +1469,7 @@ setPreviewConfig({
 });
 ` : "";
   return `
-import { storyModuleToFragment, setPreviewConfig } from "@fragments/core";
+import { storyModuleToFragment, setPreviewConfig } from "@fragments-sdk/cli/core";
 ${previewImport}
 ${previewSetup}
 // Lazy fragment loaders (supports both .fragment.tsx and .stories.tsx)
@@ -1533,11 +1561,27 @@ export async function loadAllFragments() {
         return { path: loader.path, fragment };
       } catch (error) {
         console.warn("[Fragments] Failed to load " + loader.path + ":", error.message);
-        return null;
+        // Create an error stub so the component still appears in the sidebar
+        // with a helpful message about what went wrong
+        return {
+          path: loader.path,
+          fragment: {
+            meta: {
+              name: loader.componentName || loader.path,
+              description: 'Failed to load',
+              category: '',
+            },
+            variants: [],
+            _loadError: {
+              message: error.message,
+              dependencies: loader.dependencies || [],
+            },
+          },
+        };
       }
     })
   );
-  // Filter out failed loads
+  // Filter out nulls (fragments that had no component)
   return results.filter(r => r !== null);
 }
 
@@ -1951,7 +1995,7 @@ async function loadFullFragmentForCompare(_server, _fragmentFiles, componentName
   }
 }
 async function compareImages(image1Base64, image2Base64, threshold) {
-  const { DiffEngine, base64UrlToBuffer, bufferToBase64Url } = await import("./service-HL6TMP3B.js");
+  const { DiffEngine, base64UrlToBuffer, bufferToBase64Url } = await import("./service-QACVPR37.js");
   const { PNG } = await import("pngjs");
   const buffer1 = base64UrlToBuffer(image1Base64);
   const buffer2 = base64UrlToBuffer(image2Base64);
@@ -2053,6 +2097,10 @@ var viewerRoot = resolve2(cliPackageRoot, "src/viewer");
 var packagesRoot = resolve2(cliPackageRoot, "..");
 var localUiLibRoot = resolve2(packagesRoot, "../libs/ui/src");
 function resolveUiLib(nodeModulesDir) {
+  const localIndex = join(localUiLibRoot, "index.ts");
+  if (existsSync(localIndex)) {
+    return localUiLibRoot;
+  }
   const installedUi = join(nodeModulesDir, "@fragments-sdk/ui/src/index.ts");
   if (existsSync(installedUi)) {
     return resolve2(dirname2(installedUi));
@@ -2063,6 +2111,65 @@ function resolveUiLib(nodeModulesDir) {
   }
   return localUiLibRoot;
 }
+function cjsInteropPlugin(nodeModulesPath) {
+  const virtualModules = {
+    // use-sync-external-store/shim is CJS-only, used by @base-ui/react.
+    // Since React 18+, useSyncExternalStore is built-in — redirect to React's native export.
+    "use-sync-external-store/shim": `export { useSyncExternalStore } from 'react';`,
+    // use-sync-external-store/shim/with-selector is CJS-only, used by @base-ui/utils.
+    // Provides useSyncExternalStoreWithSelector — a selector wrapper around useSyncExternalStore.
+    "use-sync-external-store/shim/with-selector": `
+import { useSyncExternalStore, useRef, useEffect, useMemo, useDebugValue } from 'react';
+export function useSyncExternalStoreWithSelector(subscribe, getSnapshot, getServerSnapshot, selector, isEqual) {
+  var instRef = useRef(null);
+  if (instRef.current === null) instRef.current = { hasValue: false, value: null };
+  var inst = instRef.current;
+  var _useMemo = useMemo(function () {
+    var hasMemo = false, memoizedSnapshot, memoizedSelection;
+    function memoizedSelector(nextSnapshot) {
+      if (!hasMemo) {
+        hasMemo = true;
+        memoizedSnapshot = nextSnapshot;
+        var nextSelection = selector(nextSnapshot);
+        if (isEqual !== undefined && inst.hasValue && isEqual(inst.value, nextSelection))
+          return memoizedSelection = inst.value;
+        return memoizedSelection = nextSelection;
+      }
+      if (Object.is(memoizedSnapshot, nextSnapshot)) return memoizedSelection;
+      var nextSelection = selector(nextSnapshot);
+      if (isEqual !== undefined && isEqual(memoizedSelection, nextSelection)) {
+        memoizedSnapshot = nextSnapshot;
+        return memoizedSelection;
+      }
+      memoizedSnapshot = nextSnapshot;
+      return memoizedSelection = nextSelection;
+    }
+    var maybeGetServerSnapshot = getServerSnapshot === undefined ? null : getServerSnapshot;
+    return [function () { return memoizedSelector(getSnapshot()); },
+            maybeGetServerSnapshot === null ? undefined : function () { return memoizedSelector(maybeGetServerSnapshot()); }];
+  }, [getSnapshot, getServerSnapshot, selector, isEqual]);
+  var value = useSyncExternalStore(subscribe, _useMemo[0], _useMemo[1]);
+  useEffect(function () { inst.hasValue = true; inst.value = value; }, [value]);
+  useDebugValue(value);
+  return value;
+}`
+  };
+  return {
+    name: "fragments-cjs-interop",
+    enforce: "pre",
+    resolveId(source) {
+      if (source in virtualModules) {
+        return `\0cjs-interop:${source}`;
+      }
+      return void 0;
+    },
+    load(id) {
+      if (!id.startsWith("\0cjs-interop:")) return void 0;
+      const pkg = id.slice("\0cjs-interop:".length);
+      return virtualModules[pkg];
+    }
+  };
+}
 async function createDevServer(options = {}) {
   const startTime = performance.now();
   const {
@@ -2124,6 +2231,8 @@ async function createDevServer(options = {}) {
     plugins: [
       // React support (if not already in project config)
       ...hasReactPlugin(projectViteConfig) ? [] : [react()],
+      // CJS interop for packages imported from within node_modules
+      cjsInteropPlugin(nodeModulesPath),
       // Fragments plugins (array including SVGR)
       ...fragmentsPlugin({
         fragmentFiles: allFragmentFiles,
@@ -2142,12 +2251,10 @@ async function createDevServer(options = {}) {
       // Dedupe ensures all imports of these packages resolve to the same copy
       dedupe: ["react", "react-dom"],
       alias: {
-        // Allow importing from viewer package
-        "@fragments/viewer": viewerRoot,
-        // Resolve @fragments/ui to installed @fragments-sdk/ui or local source
-        "@fragments/ui": resolveUiLib(nodeModulesPath),
-        // Resolve @fragments/core to the consolidated core source
-        "@fragments/core": resolve2(cliPackageRoot, "src/core/index.ts"),
+        // Resolve @fragments-sdk/ui to local source or installed package
+        "@fragments-sdk/ui": resolveUiLib(nodeModulesPath),
+        // Resolve @fragments-sdk/cli/core to the CLI's own core source
+        "@fragments-sdk/cli/core": resolve2(cliPackageRoot, "src/core/index.ts"),
         // Ensure ALL react imports resolve to project's node_modules
         // This is critical for viewer files loaded from outside project root
         "react": safeRealpath(join(nodeModulesPath, "react")),
@@ -2215,4 +2322,4 @@ export {
   createDevServer,
   fragmentsPlugin
 };
-//# sourceMappingURL=viewer-ZWQQ74FV.js.map
+//# sourceMappingURL=viewer-ZA7WK3EY.js.map