@sxl-studio/storybook-addon 1.0.13 → 1.0.15

package/dist/index.d.ts

@@ -69,6 +69,10 @@ type SxlRegistry = {
     figmaFileKey: string;
     figmaFileName?: string;
     updatedAt?: string;
+    repository?: {
+        url?: string;
+        documentationUrl?: string;
+    };
     entries: SxlRegistryEntry[];
 };
 /**

package/dist/index.js

@@ -11,12 +11,17 @@ function fromDiffCodeConnect(data) {
   const d = data;
   const fileKey = typeof d.$figmaFileKey === "string" ? d.$figmaFileKey : "";
   const fileName = typeof d.$figmaFileName === "string" ? d.$figmaFileName : void 0;
+  const repository = d.repository && typeof d.repository === "object" ? d.repository : void 0;
   const isV2 = Array.isArray(d.components);
   const entries = isV2 ? convertV2Components(d.components, fileKey) : convertV1Entries(Array.isArray(d.entries) ? d.entries : [], fileKey);
   return {
     version: 1,
     figmaFileKey: fileKey,
     figmaFileName: fileName,
+    repository: repository ? {
+      ...typeof repository.url === "string" ? { url: repository.url } : {},
+      ...typeof repository.documentationUrl === "string" ? { documentationUrl: repository.documentationUrl } : {}
+    } : void 0,
     entries
   };
 }
@@ -29,7 +34,7 @@ function convertV2Components(components, fileKey) {
     const nodeId = String(c.nodeId ?? "");
     const sb = c.storybook ?? {};
     const cc = c.codeConnect ?? {};
-    const figmaUrl = fileKey ? `https://www.figma.com/design/${fileKey}?node-id=${nodeId.replace(":", "-")}` : void 0;
+    const figmaUrl = typeof sb.figmaUrl === "string" && sb.figmaUrl.trim() ? sb.figmaUrl.trim() : fileKey ? `https://www.figma.com/design/${fileKey}?node-id=${nodeId.replace(":", "-")}` : void 0;
     const statusRaw = typeof sb.status === "string" ? sb.status : void 0;
     const readiness = statusRaw === "complete" || statusRaw === "ready-for-dev" || statusRaw === "in-progress" || statusRaw === "backlog" ? statusRaw : void 0;
     const files = parseFiles(Array.isArray(cc.files) ? cc.files : []);
@@ -78,7 +83,7 @@ function convertV1Entries(rawEntries, fileKey) {
     const b = e.binding;
     const sb = b.storybook ?? {};
     const nodeId = String(e.nodeId ?? "");
-    const figmaUrl = fileKey ? `https://www.figma.com/design/${fileKey}?node-id=${nodeId.replace(":", "-")}` : void 0;
+    const figmaUrl = typeof sb.figmaUrl === "string" && sb.figmaUrl.trim() ? sb.figmaUrl.trim() : fileKey ? `https://www.figma.com/design/${fileKey}?node-id=${nodeId.replace(":", "-")}` : void 0;
     const statusRaw = typeof sb.status === "string" ? sb.status : void 0;
     const readiness = statusRaw === "complete" || statusRaw === "ready-for-dev" || statusRaw === "in-progress" || statusRaw === "backlog" ? statusRaw : void 0;
     const files = parseFiles(Array.isArray(b.files) ? b.files : []);
@@ -133,6 +138,54 @@ function joinFetchUrl(base, path) {
   const segments = normalizeCompositionPath(path).split("/").filter(Boolean);
   return b + segments.map(encodeURIComponent).join("/");
 }
+function candidateRelativePaths(path) {
+  const n = normalizeCompositionPath(path);
+  const out = [n];
+  if (n.startsWith("components/")) {
+    out.push(n.slice("components/".length));
+  }
+  return Array.from(new Set(out));
+}
+function buildGitlabRawCandidates(repositoryUrl, path) {
+  let parsed;
+  try {
+    parsed = new URL(repositoryUrl);
+  } catch {
+    return [];
+  }
+  const cleanPath = parsed.pathname.replace(/\/+$/, "");
+  const marker = "/-/tree/";
+  const idx = cleanPath.indexOf(marker);
+  if (idx < 0) return [];
+  const prefix = cleanPath.slice(0, idx);
+  const tail = cleanPath.slice(idx + marker.length);
+  const slash = tail.indexOf("/");
+  const ref = slash >= 0 ? tail.slice(0, slash) : tail;
+  const baseDir = slash >= 0 ? tail.slice(slash + 1) : "";
+  const baseRaw = `${parsed.origin}${prefix}/-/raw/${encodeURIComponent(ref)}` + (baseDir ? `/${baseDir.split("/").map(encodeURIComponent).join("/")}` : "");
+  return candidateRelativePaths(path).map((rel) => joinFetchUrl(baseRaw, rel));
+}
+function extractRepositoryUrl(params) {
+  const raw = params?.registry;
+  if (!raw || typeof raw !== "object") return void 0;
+  const repo = raw.repository;
+  if (!repo || typeof repo !== "object") return void 0;
+  const url = repo.url;
+  return typeof url === "string" && url.trim() ? url.trim() : void 0;
+}
+async function fetchFirstOk(urls) {
+  for (const url of urls) {
+    try {
+      const res = await fetch(url, { credentials: "include" });
+      if (!res.ok) continue;
+      const text = await res.text();
+      if (!text.trim()) continue;
+      return { text, url };
+    } catch {
+    }
+  }
+  return null;
+}
 async function loadCompositionJsonText(path, legacyInline, params) {
   const inline = legacyInline?.trim();
   if (inline) {
@@ -176,8 +229,21 @@ async function loadCompositionJsonText(path, legacyInline, params) {
       return { error: `Fetch failed: ${msg}` };
     }
   }
+  const repoUrl = extractRepositoryUrl(params);
+  if (repoUrl) {
+    const gitlabCandidates = buildGitlabRawCandidates(repoUrl, p);
+    const hit = await fetchFirstOk(gitlabCandidates);
+    if (hit) {
+      return { text: hit.text, source: "fetch" };
+    }
+  }
+  const localCandidates = candidateRelativePaths(p).map((rel) => `/${rel}`);
+  const localHit = await fetchFirstOk(localCandidates);
+  if (localHit) {
+    return { text: localHit.text, source: "fetch" };
+  }
   return {
-    error: "Composition file is not inlined. Pass parameters.sxl.compositionSources, compositionFetchBaseUrl + staticDirs, or resolveComposition() in preview \u2014 see @sxl-studio/storybook-addon README."
+    error: "Composition file is not inlined and auto-fetch failed. Pass parameters.sxl.compositionSources, compositionFetchBaseUrl + staticDirs, or resolveComposition() in preview \u2014 see @sxl-studio/storybook-addon README."
   };
 }
 export {

package/dist/manager.js

@@ -19,12 +19,17 @@ function fromDiffCodeConnect(data) {
   const d = data;
   const fileKey = typeof d.$figmaFileKey === "string" ? d.$figmaFileKey : "";
   const fileName = typeof d.$figmaFileName === "string" ? d.$figmaFileName : void 0;
+  const repository = d.repository && typeof d.repository === "object" ? d.repository : void 0;
   const isV2 = Array.isArray(d.components);
   const entries = isV2 ? convertV2Components(d.components, fileKey) : convertV1Entries(Array.isArray(d.entries) ? d.entries : [], fileKey);
   return {
     version: 1,
     figmaFileKey: fileKey,
     figmaFileName: fileName,
+    repository: repository ? {
+      ...typeof repository.url === "string" ? { url: repository.url } : {},
+      ...typeof repository.documentationUrl === "string" ? { documentationUrl: repository.documentationUrl } : {}
+    } : void 0,
     entries
   };
 }
@@ -37,7 +42,7 @@ function convertV2Components(components, fileKey) {
     const nodeId = String(c.nodeId ?? "");
     const sb = c.storybook ?? {};
     const cc = c.codeConnect ?? {};
-    const figmaUrl = fileKey ? `https://www.figma.com/design/${fileKey}?node-id=${nodeId.replace(":", "-")}` : void 0;
+    const figmaUrl = typeof sb.figmaUrl === "string" && sb.figmaUrl.trim() ? sb.figmaUrl.trim() : fileKey ? `https://www.figma.com/design/${fileKey}?node-id=${nodeId.replace(":", "-")}` : void 0;
     const statusRaw = typeof sb.status === "string" ? sb.status : void 0;
     const readiness = statusRaw === "complete" || statusRaw === "ready-for-dev" || statusRaw === "in-progress" || statusRaw === "backlog" ? statusRaw : void 0;
     const files = parseFiles(Array.isArray(cc.files) ? cc.files : []);
@@ -86,7 +91,7 @@ function convertV1Entries(rawEntries, fileKey) {
     const b = e.binding;
     const sb = b.storybook ?? {};
     const nodeId = String(e.nodeId ?? "");
-    const figmaUrl = fileKey ? `https://www.figma.com/design/${fileKey}?node-id=${nodeId.replace(":", "-")}` : void 0;
+    const figmaUrl = typeof sb.figmaUrl === "string" && sb.figmaUrl.trim() ? sb.figmaUrl.trim() : fileKey ? `https://www.figma.com/design/${fileKey}?node-id=${nodeId.replace(":", "-")}` : void 0;
     const statusRaw = typeof sb.status === "string" ? sb.status : void 0;
     const readiness = statusRaw === "complete" || statusRaw === "ready-for-dev" || statusRaw === "in-progress" || statusRaw === "backlog" ? statusRaw : void 0;
     const files = parseFiles(Array.isArray(b.files) ? b.files : []);
@@ -141,6 +146,54 @@ function joinFetchUrl(base, path) {
   const segments = normalizeCompositionPath(path).split("/").filter(Boolean);
   return b + segments.map(encodeURIComponent).join("/");
 }
+function candidateRelativePaths(path) {
+  const n = normalizeCompositionPath(path);
+  const out = [n];
+  if (n.startsWith("components/")) {
+    out.push(n.slice("components/".length));
+  }
+  return Array.from(new Set(out));
+}
+function buildGitlabRawCandidates(repositoryUrl, path) {
+  let parsed;
+  try {
+    parsed = new URL(repositoryUrl);
+  } catch {
+    return [];
+  }
+  const cleanPath = parsed.pathname.replace(/\/+$/, "");
+  const marker = "/-/tree/";
+  const idx = cleanPath.indexOf(marker);
+  if (idx < 0) return [];
+  const prefix = cleanPath.slice(0, idx);
+  const tail = cleanPath.slice(idx + marker.length);
+  const slash = tail.indexOf("/");
+  const ref = slash >= 0 ? tail.slice(0, slash) : tail;
+  const baseDir = slash >= 0 ? tail.slice(slash + 1) : "";
+  const baseRaw = `${parsed.origin}${prefix}/-/raw/${encodeURIComponent(ref)}` + (baseDir ? `/${baseDir.split("/").map(encodeURIComponent).join("/")}` : "");
+  return candidateRelativePaths(path).map((rel) => joinFetchUrl(baseRaw, rel));
+}
+function extractRepositoryUrl(params) {
+  const raw = params?.registry;
+  if (!raw || typeof raw !== "object") return void 0;
+  const repo = raw.repository;
+  if (!repo || typeof repo !== "object") return void 0;
+  const url = repo.url;
+  return typeof url === "string" && url.trim() ? url.trim() : void 0;
+}
+async function fetchFirstOk(urls) {
+  for (const url of urls) {
+    try {
+      const res = await fetch(url, { credentials: "include" });
+      if (!res.ok) continue;
+      const text = await res.text();
+      if (!text.trim()) continue;
+      return { text, url };
+    } catch {
+    }
+  }
+  return null;
+}
 async function loadCompositionJsonText(path, legacyInline, params) {
   const inline = legacyInline?.trim();
   if (inline) {
@@ -184,8 +237,21 @@ async function loadCompositionJsonText(path, legacyInline, params) {
       return { error: `Fetch failed: ${msg}` };
     }
   }
+  const repoUrl = extractRepositoryUrl(params);
+  if (repoUrl) {
+    const gitlabCandidates = buildGitlabRawCandidates(repoUrl, p);
+    const hit = await fetchFirstOk(gitlabCandidates);
+    if (hit) {
+      return { text: hit.text, source: "fetch" };
+    }
+  }
+  const localCandidates = candidateRelativePaths(p).map((rel) => `/${rel}`);
+  const localHit = await fetchFirstOk(localCandidates);
+  if (localHit) {
+    return { text: localHit.text, source: "fetch" };
+  }
   return {
-    error: "Composition file is not inlined. Pass parameters.sxl.compositionSources, compositionFetchBaseUrl + staticDirs, or resolveComposition() in preview \u2014 see @sxl-studio/storybook-addon README."
+    error: "Composition file is not inlined and auto-fetch failed. Pass parameters.sxl.compositionSources, compositionFetchBaseUrl + staticDirs, or resolveComposition() in preview \u2014 see @sxl-studio/storybook-addon README."
   };
 }
 
@@ -3823,16 +3889,25 @@ var SxlPanel = () => {
   }, []);
   const entryForRender = result.status === "found" ? result.entry : null;
   const showEmbed = !!entryForRender?.figmaUrl && entryForRender.designEmbed !== false;
+  const renderEmbedSection = entryForRender?.designEmbed === true || !!entryForRender?.figmaUrl;
   useEffect(() => {
-    if (!params?.debugFigmaEmbed || !showEmbed || !entryForRender?.figmaUrl) return;
+    if (!entryForRender) return;
+    if (entryForRender.designEmbed === true && !entryForRender.figmaUrl) {
+      console.warn(
+        "[SXL Studio addon] Embed requested but figmaUrl is missing. Check diff `$figmaFileKey` or set `storybook.figmaUrl` in entry.",
+        { nodeId: entryForRender.nodeId, displayName: entryForRender.displayName }
+      );
+      return;
+    }
+    if (!showEmbed || !entryForRender.figmaUrl) return;
     const embedUrl = buildEmbedUrl(entryForRender.figmaUrl);
     console.info("[SXL Studio addon] Figma embed", {
       designEmbed: entryForRender.designEmbed,
       figmaUrl: entryForRender.figmaUrl,
       embedUrl,
-      hint: "If the iframe stays blank, allow frame-src https://www.figma.com in Storybook dev CSP (see addon README)."
+      hint: "If iframe is blank, verify Storybook CSP frame-src includes https://www.figma.com"
     });
-  }, [params?.debugFigmaEmbed, showEmbed, entryForRender?.figmaUrl, entryForRender?.designEmbed]);
+  }, [showEmbed, entryForRender?.figmaUrl, entryForRender?.designEmbed, entryForRender?.nodeId, entryForRender?.displayName]);
   if (result.status === "no-registry") {
     return React2.createElement(NoRegistryState, null);
   }
@@ -3846,7 +3921,7 @@ var SxlPanel = () => {
   const readiness = entry.meta?.readiness;
   const dateStr = formatDate(entry.updatedAt);
   const apiProps = entry.componentApi?.properties;
-  return /* @__PURE__ */ React2.createElement("div", { style: panelRoot }, /* @__PURE__ */ React2.createElement("div", { style: topRow }, /* @__PURE__ */ React2.createElement("div", { style: titleBlock }, entry.displayName ? /* @__PURE__ */ React2.createElement("h2", { style: componentName }, entry.displayName) : null), /* @__PURE__ */ React2.createElement("div", { style: metaCol }, dateStr ? /* @__PURE__ */ React2.createElement("div", { style: dateText }, "Updated ", dateStr) : null, /* @__PURE__ */ React2.createElement("div", { style: badgeRow }, /* @__PURE__ */ React2.createElement(TokensBadge, { value: tokensBool }), readiness ? /* @__PURE__ */ React2.createElement(ReadinessBadge, { readiness }) : null))), entry.description ? /* @__PURE__ */ React2.createElement("div", { style: section }, /* @__PURE__ */ React2.createElement("div", { style: sectionLabel }, "Description"), /* @__PURE__ */ React2.createElement("div", { style: card }, /* @__PURE__ */ React2.createElement("p", { style: descriptionText }, entry.description))) : null, showEmbed ? /* @__PURE__ */ React2.createElement("div", { style: section }, /* @__PURE__ */ React2.createElement("div", { style: sectionLabel }, "Embed"), /* @__PURE__ */ React2.createElement("div", { style: embedWrap }, /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ React2.createElement("div", { style: panelRoot }, /* @__PURE__ */ React2.createElement("div", { style: topRow }, /* @__PURE__ */ React2.createElement("div", { style: titleBlock }, entry.displayName ? /* @__PURE__ */ React2.createElement("h2", { style: componentName }, entry.displayName) : null), /* @__PURE__ */ React2.createElement("div", { style: metaCol }, dateStr ? /* @__PURE__ */ React2.createElement("div", { style: dateText }, "Updated ", dateStr) : null, /* @__PURE__ */ React2.createElement("div", { style: badgeRow }, /* @__PURE__ */ React2.createElement(TokensBadge, { value: tokensBool }), readiness ? /* @__PURE__ */ React2.createElement(ReadinessBadge, { readiness }) : null))), entry.description ? /* @__PURE__ */ React2.createElement("div", { style: section }, /* @__PURE__ */ React2.createElement("div", { style: sectionLabel }, "Description"), /* @__PURE__ */ React2.createElement("div", { style: card }, /* @__PURE__ */ React2.createElement("p", { style: descriptionText }, entry.description))) : null, renderEmbedSection ? /* @__PURE__ */ React2.createElement("div", { style: section }, /* @__PURE__ */ React2.createElement("div", { style: sectionLabel }, "Embed"), showEmbed ? /* @__PURE__ */ React2.createElement("div", { style: embedWrap }, /* @__PURE__ */ React2.createElement(
     "iframe",
     {
       title: "Figma embed",
@@ -3856,9 +3931,7 @@ var SxlPanel = () => {
       allow: "clipboard-write; fullscreen",
       referrerPolicy: "no-referrer-when-downgrade",
       onLoad: () => {
-        if (params?.debugFigmaEmbed) {
-          console.info("[SXL Studio addon] Figma iframe load event fired");
-        }
+        console.info("[SXL Studio addon] Figma iframe load event fired");
       }
     }
   ), /* @__PURE__ */ React2.createElement("div", { style: embedFooter }, /* @__PURE__ */ React2.createElement(
@@ -3879,7 +3952,7 @@ var SxlPanel = () => {
       style: link
     },
     "Open in Figma Dev Mode \u2192"
-  )))) : entry.figmaUrl ? /* @__PURE__ */ React2.createElement("div", { style: section }, /* @__PURE__ */ React2.createElement(
+  ))) : /* @__PURE__ */ React2.createElement("div", { style: card }, /* @__PURE__ */ React2.createElement("p", { style: { ...descriptionText, margin: 0 } }, "Embed is enabled but Figma URL is missing in registry entry. Re-link this component in plugin or ensure `diff-code-connect` has `$figmaFileKey` (or `storybook.figmaUrl`)."), /* @__PURE__ */ React2.createElement("p", { style: { ...descriptionText, margin: "8px 0 0", fontSize: "12px" } }, "Node: ", /* @__PURE__ */ React2.createElement("code", { style: emptyCode }, entry.nodeId)))) : entry.figmaUrl ? /* @__PURE__ */ React2.createElement("div", { style: section }, /* @__PURE__ */ React2.createElement(
     "a",
     {
       href: buildDevModeUrl(entry.figmaUrl),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sxl-studio/storybook-addon",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "description": "Storybook addon for SXL Studio — displays Figma Embed, component info and design token status for linked components",
   "type": "module",
   "main": "dist/index.js",