@sxl-studio/storybook-addon 1.0.13 → 1.0.14

package/dist/index.js

@@ -29,7 +29,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 +78,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 : []);

package/dist/manager.js

@@ -37,7 +37,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 +86,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 : []);
@@ -3823,16 +3823,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 +3855,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 +3865,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 +3886,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.14",
   "description": "Storybook addon for SXL Studio — displays Figma Embed, component info and design token status for linked components",
   "type": "module",
   "main": "dist/index.js",