@teambit/api-reference 1.0.1080 → 1.0.1081

package/dist/api-compare.js

@@ -18,6 +18,13 @@ function _componentUiComponentCompare() {
   };
   return data;
 }
+function _semanticsUi() {
+  const data = require("@teambit/semantics.ui.api-diff-view");
+  _semanticsUi = function () {
+    return data;
+  };
+  return data;
+}
 function _apiCompareModule() {
   const data = _interopRequireDefault(require("./api-compare.module.scss"));
   _apiCompareModule = function () {
@@ -26,196 +33,66 @@ function _apiCompareModule() {
   return data;
 }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function impactClass(impact) {
-  switch (impact) {
-    case 'BREAKING':
-      return _apiCompareModule().default.removedBadge;
-    case 'NON_BREAKING':
-      return _apiCompareModule().default.addedBadge;
-    case 'PATCH':
-      return _apiCompareModule().default.modifiedBadge;
-    default:
-      return _apiCompareModule().default.summaryBadge;
-  }
-}
-function impactLabel(impact) {
-  switch (impact) {
-    case 'BREAKING':
-      return 'Breaking';
-    case 'NON_BREAKING':
-      return 'Non-breaking';
-    case 'PATCH':
-      return 'Patch';
-    default:
-      return impact;
-  }
-}
-function getStatusClass(status) {
-  switch (status) {
-    case 'ADDED':
-      return _apiCompareModule().default.statusAdded;
-    case 'REMOVED':
-      return _apiCompareModule().default.statusRemoved;
-    case 'MODIFIED':
-      return _apiCompareModule().default.statusModified;
-    default:
-      return _apiCompareModule().default.statusBadge;
-  }
-}
-function getStatusLabel(status) {
-  switch (status) {
-    case 'ADDED':
-      return '+ Added';
-    case 'REMOVED':
-      return '- Removed';
-    case 'MODIFIED':
-      return '~ Modified';
-    default:
-      return status;
-  }
-}
-function dotClass(impact) {
-  switch (impact) {
-    case 'BREAKING':
-      return _apiCompareModule().default.dotBreaking;
-    case 'NON_BREAKING':
-      return _apiCompareModule().default.dotNonBreaking;
-    default:
-      return _apiCompareModule().default.dotPatch;
-  }
-}
-function DetailItem({
-  detail
-}) {
-  return /*#__PURE__*/_react().default.createElement("li", {
-    className: _apiCompareModule().default.detailItem
-  }, /*#__PURE__*/_react().default.createElement("span", {
-    className: dotClass(detail.impact)
-  }), /*#__PURE__*/_react().default.createElement("span", {
-    className: _apiCompareModule().default.detailDescription
-  }, detail.description));
-}
-function APIDiffEntry({
-  change
-}) {
-  const [expanded, setExpanded] = _react().default.useState(change.status === 'MODIFIED');
-  const [showSignatures, setShowSignatures] = _react().default.useState(false);
-  const hasBody = change.status === 'MODIFIED' ? change.changes && change.changes.length > 0 || change.baseSignature || change.compareSignature : change.baseSignature || change.compareSignature;
-  return /*#__PURE__*/_react().default.createElement("div", {
-    className: _apiCompareModule().default.diffEntry
-  }, /*#__PURE__*/_react().default.createElement("div", {
-    className: _apiCompareModule().default.diffEntryHeader,
-    onClick: () => hasBody && setExpanded(!expanded),
-    role: "button",
-    tabIndex: 0,
-    "aria-expanded": hasBody ? expanded : undefined,
-    onKeyDown: e => {
-      if (e.key === 'Enter' || e.key === ' ') {
-        e.preventDefault();
-        hasBody && setExpanded(!expanded);
-      }
-    }
-  }, /*#__PURE__*/_react().default.createElement("span", {
-    className: getStatusClass(change.status)
-  }, getStatusLabel(change.status)), /*#__PURE__*/_react().default.createElement("span", {
-    className: _apiCompareModule().default.exportName
-  }, change.exportName), /*#__PURE__*/_react().default.createElement("span", {
-    className: _apiCompareModule().default.schemaType
-  }, change.schemaType), /*#__PURE__*/_react().default.createElement("span", {
-    className: `${impactClass(change.impact)} ${_apiCompareModule().default.impactBadge}`
-  }, impactLabel(change.impact)), hasBody && /*#__PURE__*/_react().default.createElement("span", {
-    className: expanded ? _apiCompareModule().default.expandIconOpen : _apiCompareModule().default.expandIcon
-  }, "\u25B6")), expanded && hasBody && /*#__PURE__*/_react().default.createElement("div", {
-    className: _apiCompareModule().default.diffEntryBody
-  }, change.status === 'MODIFIED' && change.changes && change.changes.length > 0 && /*#__PURE__*/_react().default.createElement("ul", {
-    className: _apiCompareModule().default.detailsList
-  }, change.changes.map((detail, i) => /*#__PURE__*/_react().default.createElement(DetailItem, {
-    key: `${detail.changeKind}-${i}`,
-    detail: detail
-  }))), change.status === 'MODIFIED' && (change.baseSignature || change.compareSignature) && /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, /*#__PURE__*/_react().default.createElement("button", {
-    className: _apiCompareModule().default.toggleSignatures,
-    onClick: () => setShowSignatures(!showSignatures)
-  }, showSignatures ? '▼ Hide signatures' : '▶ Show signatures'), showSignatures && /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, change.baseSignature && /*#__PURE__*/_react().default.createElement("div", null, /*#__PURE__*/_react().default.createElement("div", {
-    className: _apiCompareModule().default.signatureLabel
-  }, "Base"), /*#__PURE__*/_react().default.createElement("div", {
-    className: _apiCompareModule().default.signatureRemoved
-  }, change.baseSignature)), change.compareSignature && /*#__PURE__*/_react().default.createElement("div", null, /*#__PURE__*/_react().default.createElement("div", {
-    className: _apiCompareModule().default.signatureLabel
-  }, "Compare"), /*#__PURE__*/_react().default.createElement("div", {
-    className: _apiCompareModule().default.signatureBlock
-  }, change.compareSignature)))), change.status === 'ADDED' && change.compareSignature && /*#__PURE__*/_react().default.createElement("div", {
-    className: _apiCompareModule().default.signatureBlock
-  }, change.compareSignature), change.status === 'REMOVED' && change.baseSignature && /*#__PURE__*/_react().default.createElement("div", {
-    className: _apiCompareModule().default.signatureRemoved
-  }, change.baseSignature)));
-}
-function ChangeSection({
-  title,
-  changes
+// single source of truth for the API diff model lives in api-diff-view.
+
+/**
+ * the API tab of the single-component compare page. thin host around the same
+ * `ComponentApiDiffSection` the lane-compare API view uses — one implementation, two hosts.
+ * data comes from the compare context (fetched once by ComponentCompare).
+ */
+function APICompare({
+  getInsights
 }) {
-  if (changes.length === 0) return null;
-  const sorted = [...changes].sort((a, b) => {
-    const order = {
-      REMOVED: 0,
-      MODIFIED: 1,
-      ADDED: 2
-    };
-    return (order[a.status] ?? 3) - (order[b.status] ?? 3);
-  });
-  return /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, /*#__PURE__*/_react().default.createElement("h3", {
-    className: _apiCompareModule().default.sectionTitle
-  }, title), /*#__PURE__*/_react().default.createElement("div", {
-    className: _apiCompareModule().default.changeList
-  }, sorted.map(change => /*#__PURE__*/_react().default.createElement(APIDiffEntry, {
-    key: `${change.visibility}-${change.status}-${change.exportName}`,
-    change: change
-  }))));
-}
-function APICompare() {
   const compareContext = (0, _componentUiComponentCompare().useComponentCompare)();
-  const apiDiffResult = compareContext?.apiDiffResult;
-  if (apiDiffResult === undefined) {
-    return /*#__PURE__*/_react().default.createElement("div", {
-      className: _apiCompareModule().default.emptyState
-    }, "Loading API diff...");
-  }
-  if (!apiDiffResult || !apiDiffResult.hasChanges) {
-    return /*#__PURE__*/_react().default.createElement("div", {
-      className: _apiCompareModule().default.emptyState
-    }, "No API changes between these versions");
-  }
+  const baseModel = compareContext?.base?.model;
+  const compareModel = compareContext?.compare?.model;
+
+  // Prefer a diff already on the context — the legacy `ComponentCompare` fetches it once and sets
+  // it there. The redesign single-component page does NOT put it on its inline context, so we fetch
+  // on our own. This hook is only mounted when the API view is the active tab (the page renders the
+  // element on-demand), so lane-compare — which renders one panel per component and never mounts
+  // this tab — pays nothing.
+  const contextApiDiff = compareContext?.apiDiffResult;
+  const shouldSelfFetch = contextApiDiff === undefined;
   const {
-    publicChanges,
-    internalChanges,
-    added,
-    removed,
-    modified,
-    breaking,
-    impact
-  } = apiDiffResult;
-  return /*#__PURE__*/_react().default.createElement("div", {
-    className: _apiCompareModule().default.apiCompareContainer
+    result: fetchedApiDiff
+  } = (0, _semanticsUi().useApiDiff)(baseModel?.id.toString(), compareModel?.id.toString(), {
+    skip: !shouldSelfFetch
+  });
+  const apiDiffResult = shouldSelfFetch ? fetchedApiDiff : contextApiDiff;
+
+  // memoized so the insights context value keeps a stable identity — otherwise a fresh array every
+  // render would re-render every `useApiDiffInsights` consumer (incl. the React.memo'd ApiChangeBlock).
+  const insights = _react().default.useMemo(() => getInsights?.(), [getInsights]);
+  if (!compareContext) return null;
+  const id = (compareModel || baseModel)?.id;
+  if (!id) return null;
+  const componentIdStr = id.toStringWithoutVersion();
+  const baseVersion = baseModel?.id.version;
+  const compareVersion = compareModel?.id.version;
+
+  // no base (first version) or identical versions — nothing to diff, not a failure.
+  const nothingToCompare = apiDiffResult === null && (!baseVersion || baseVersion === compareVersion);
+  return /*#__PURE__*/_react().default.createElement(_semanticsUi().ApiDiffInsightProvider, {
+    insights: insights
   }, /*#__PURE__*/_react().default.createElement("div", {
-    className: _apiCompareModule().default.summary
-  }, /*#__PURE__*/_react().default.createElement("span", {
-    className: impactClass(impact)
-  }, impactLabel(impact)), /*#__PURE__*/_react().default.createElement("span", {
-    className: _apiCompareModule().default.summaryDivider
-  }, "|"), added > 0 && /*#__PURE__*/_react().default.createElement("span", {
-    className: _apiCompareModule().default.addedBadge
-  }, "+", added, " added"), removed > 0 && /*#__PURE__*/_react().default.createElement("span", {
-    className: _apiCompareModule().default.removedBadge
-  }, "-", removed, " removed"), modified > 0 && /*#__PURE__*/_react().default.createElement("span", {
-    className: _apiCompareModule().default.modifiedBadge
-  }, "~", modified, " modified"), breaking > 0 && /*#__PURE__*/_react().default.createElement("span", {
-    className: _apiCompareModule().default.removedBadge
-  }, breaking, " breaking")), /*#__PURE__*/_react().default.createElement(ChangeSection, {
-    title: "Public API",
-    changes: publicChanges
-  }), /*#__PURE__*/_react().default.createElement(ChangeSection, {
-    title: "Internal (non-exported)",
-    changes: internalChanges
-  }));
+    className: _apiCompareModule().default.apiCompareContainer
+  }, nothingToCompare ? /*#__PURE__*/_react().default.createElement(_semanticsUi().ApiDiffSlimRow, {
+    componentIdStr: componentIdStr,
+    displayName: id.fullName,
+    chip: "nothing to compare",
+    detail: baseVersion ? 'both sides are the same version' : 'no base version to compare against',
+    tone: "ok"
+  }) : /*#__PURE__*/_react().default.createElement(_semanticsUi().ComponentApiDiffSection, {
+    componentIdStr: componentIdStr,
+    displayName: id.fullName,
+    baseId: baseModel?.id.toString(),
+    compareId: compareModel?.id.toString(),
+    baseVersion: baseVersion,
+    compareVersion: compareVersion,
+    result: apiDiffResult,
+    loading: apiDiffResult === undefined
+  })));
 }
 
 //# sourceMappingURL=api-compare.js.map

package/dist/api-compare.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","data","_interopRequireDefault","require","_componentUiComponentCompare","_apiCompareModule","e","__esModule","default","impactClass","impact","styles","removedBadge","addedBadge","modifiedBadge","summaryBadge","impactLabel","getStatusClass","status","statusAdded","statusRemoved","statusModified","statusBadge","getStatusLabel","dotClass","dotBreaking","dotNonBreaking","dotPatch","DetailItem","detail","createElement","className","detailItem","detailDescription","description","APIDiffEntry","change","expanded","setExpanded","React","useState","showSignatures","setShowSignatures","hasBody","changes","length","baseSignature","compareSignature","diffEntry","diffEntryHeader","onClick","role","tabIndex","undefined","onKeyDown","key","preventDefault","exportName","schemaType","impactBadge","expandIconOpen","expandIcon","diffEntryBody","detailsList","map","i","changeKind","Fragment","toggleSignatures","signatureLabel","signatureRemoved","signatureBlock","ChangeSection","title","sorted","sort","a","b","order","REMOVED","MODIFIED","ADDED","sectionTitle","changeList","visibility","APICompare","compareContext","useComponentCompare","apiDiffResult","emptyState","hasChanges","publicChanges","internalChanges","added","removed","modified","breaking","apiCompareContainer","summary","summaryDivider"],"sources":["api-compare.tsx"],"sourcesContent":["import React from 'react';\nimport { useComponentCompare } from '@teambit/component.ui.component-compare.context';\nimport type { APIDiffResult, APIDiffChange, APIDiffDetail } from './api-compare.types';\nimport styles from './api-compare.module.scss';\n\nexport type { APIDiffResult, APIDiffChange, APIDiffDetail };\n\nfunction impactClass(impact: string): string {\n  switch (impact) {\n    case 'BREAKING':\n      return styles.removedBadge;\n    case 'NON_BREAKING':\n      return styles.addedBadge;\n    case 'PATCH':\n      return styles.modifiedBadge;\n    default:\n      return styles.summaryBadge;\n  }\n}\n\nfunction impactLabel(impact: string): string {\n  switch (impact) {\n    case 'BREAKING':\n      return 'Breaking';\n    case 'NON_BREAKING':\n      return 'Non-breaking';\n    case 'PATCH':\n      return 'Patch';\n    default:\n      return impact;\n  }\n}\n\nfunction getStatusClass(status: string): string {\n  switch (status) {\n    case 'ADDED':\n      return styles.statusAdded;\n    case 'REMOVED':\n      return styles.statusRemoved;\n    case 'MODIFIED':\n      return styles.statusModified;\n    default:\n      return styles.statusBadge;\n  }\n}\n\nfunction getStatusLabel(status: string): string {\n  switch (status) {\n    case 'ADDED':\n      return '+ Added';\n    case 'REMOVED':\n      return '- Removed';\n    case 'MODIFIED':\n      return '~ Modified';\n    default:\n      return status;\n  }\n}\n\nfunction dotClass(impact: string): string {\n  switch (impact) {\n    case 'BREAKING':\n      return styles.dotBreaking;\n    case 'NON_BREAKING':\n      return styles.dotNonBreaking;\n    default:\n      return styles.dotPatch;\n  }\n}\n\nfunction DetailItem({ detail }: { detail: APIDiffDetail }) {\n  return (\n    <li className={styles.detailItem}>\n      <span className={dotClass(detail.impact)} />\n      <span className={styles.detailDescription}>{detail.description}</span>\n    </li>\n  );\n}\n\nfunction APIDiffEntry({ change }: { change: APIDiffChange }) {\n  const [expanded, setExpanded] = React.useState(change.status === 'MODIFIED');\n  const [showSignatures, setShowSignatures] = React.useState(false);\n\n  const hasBody =\n    change.status === 'MODIFIED'\n      ? (change.changes && change.changes.length > 0) || change.baseSignature || change.compareSignature\n      : change.baseSignature || change.compareSignature;\n\n  return (\n    <div className={styles.diffEntry}>\n      <div\n        className={styles.diffEntryHeader}\n        onClick={() => hasBody && setExpanded(!expanded)}\n        role=\"button\"\n        tabIndex={0}\n        aria-expanded={hasBody ? expanded : undefined}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n            hasBody && setExpanded(!expanded);\n          }\n        }}\n      >\n        <span className={getStatusClass(change.status)}>{getStatusLabel(change.status)}</span>\n        <span className={styles.exportName}>{change.exportName}</span>\n        <span className={styles.schemaType}>{change.schemaType}</span>\n        <span className={`${impactClass(change.impact)} ${styles.impactBadge}`}>{impactLabel(change.impact)}</span>\n        {hasBody && <span className={expanded ? styles.expandIconOpen : styles.expandIcon}>▶</span>}\n      </div>\n      {expanded && hasBody && (\n        <div className={styles.diffEntryBody}>\n          {change.status === 'MODIFIED' && change.changes && change.changes.length > 0 && (\n            <ul className={styles.detailsList}>\n              {change.changes.map((detail, i) => (\n                <DetailItem key={`${detail.changeKind}-${i}`} detail={detail} />\n              ))}\n            </ul>\n          )}\n          {change.status === 'MODIFIED' && (change.baseSignature || change.compareSignature) && (\n            <>\n              <button className={styles.toggleSignatures} onClick={() => setShowSignatures(!showSignatures)}>\n                {showSignatures ? '▼ Hide signatures' : '▶ Show signatures'}\n              </button>\n              {showSignatures && (\n                <>\n                  {change.baseSignature && (\n                    <div>\n                      <div className={styles.signatureLabel}>Base</div>\n                      <div className={styles.signatureRemoved}>{change.baseSignature}</div>\n                    </div>\n                  )}\n                  {change.compareSignature && (\n                    <div>\n                      <div className={styles.signatureLabel}>Compare</div>\n                      <div className={styles.signatureBlock}>{change.compareSignature}</div>\n                    </div>\n                  )}\n                </>\n              )}\n            </>\n          )}\n          {change.status === 'ADDED' && change.compareSignature && (\n            <div className={styles.signatureBlock}>{change.compareSignature}</div>\n          )}\n          {change.status === 'REMOVED' && change.baseSignature && (\n            <div className={styles.signatureRemoved}>{change.baseSignature}</div>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction ChangeSection({ title, changes }: { title: string; changes: APIDiffChange[] }) {\n  if (changes.length === 0) return null;\n\n  const sorted = [...changes].sort((a, b) => {\n    const order: Record<string, number> = { REMOVED: 0, MODIFIED: 1, ADDED: 2 };\n    return (order[a.status] ?? 3) - (order[b.status] ?? 3);\n  });\n\n  return (\n    <>\n      <h3 className={styles.sectionTitle}>{title}</h3>\n      <div className={styles.changeList}>\n        {sorted.map((change) => (\n          <APIDiffEntry key={`${change.visibility}-${change.status}-${change.exportName}`} change={change} />\n        ))}\n      </div>\n    </>\n  );\n}\n\nexport function APICompare() {\n  const compareContext = useComponentCompare();\n  const apiDiffResult: APIDiffResult | null | undefined = (compareContext as any)?.apiDiffResult;\n\n  if (apiDiffResult === undefined) {\n    return <div className={styles.emptyState}>Loading API diff...</div>;\n  }\n\n  if (!apiDiffResult || !apiDiffResult.hasChanges) {\n    return <div className={styles.emptyState}>No API changes between these versions</div>;\n  }\n\n  const { publicChanges, internalChanges, added, removed, modified, breaking, impact } = apiDiffResult;\n\n  return (\n    <div className={styles.apiCompareContainer}>\n      <div className={styles.summary}>\n        <span className={impactClass(impact)}>{impactLabel(impact)}</span>\n        <span className={styles.summaryDivider}>|</span>\n        {added > 0 && <span className={styles.addedBadge}>+{added} added</span>}\n        {removed > 0 && <span className={styles.removedBadge}>-{removed} removed</span>}\n        {modified > 0 && <span className={styles.modifiedBadge}>~{modified} modified</span>}\n        {breaking > 0 && <span className={styles.removedBadge}>{breaking} breaking</span>}\n      </div>\n      <ChangeSection title=\"Public API\" changes={publicChanges} />\n      <ChangeSection title=\"Internal (non-exported)\" changes={internalChanges} />\n    </div>\n  );\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","data","_interopRequireDefault","require","_componentUiComponentCompare","_semanticsUi","_apiCompareModule","e","__esModule","default","APICompare","getInsights","compareContext","useComponentCompare","baseModel","base","model","compareModel","compare","contextApiDiff","apiDiffResult","shouldSelfFetch","undefined","result","fetchedApiDiff","useApiDiff","id","toString","skip","insights","React","useMemo","componentIdStr","toStringWithoutVersion","baseVersion","version","compareVersion","nothingToCompare","createElement","ApiDiffInsightProvider","className","styles","apiCompareContainer","ApiDiffSlimRow","displayName","fullName","chip","detail","tone","ComponentApiDiffSection","baseId","compareId","loading"],"sources":["api-compare.tsx"],"sourcesContent":["import React from 'react';\nimport { useComponentCompare } from '@teambit/component.ui.component-compare.context';\nimport {\n  ComponentApiDiffSection,\n  ApiDiffSlimRow,\n  ApiDiffInsightProvider,\n  useApiDiff,\n} from '@teambit/semantics.ui.api-diff-view';\nimport type { ApiDiffInsight } from '@teambit/semantics.ui.api-diff-view';\nimport styles from './api-compare.module.scss';\n\n// single source of truth for the API diff model lives in api-diff-view.\nexport type { APIDiffResult, APIDiffChange, APIDiffDetail } from '@teambit/semantics.ui.api-diff-view';\n\nexport type APICompareProps = {\n  /** resolved lazily at render time — slot registrations can land after the section is constructed */\n  getInsights?: () => ApiDiffInsight[];\n};\n\n/**\n * the API tab of the single-component compare page. thin host around the same\n * `ComponentApiDiffSection` the lane-compare API view uses — one implementation, two hosts.\n * data comes from the compare context (fetched once by ComponentCompare).\n */\nexport function APICompare({ getInsights }: APICompareProps) {\n  const compareContext = useComponentCompare();\n  const baseModel = compareContext?.base?.model;\n  const compareModel = compareContext?.compare?.model;\n\n  // Prefer a diff already on the context — the legacy `ComponentCompare` fetches it once and sets\n  // it there. The redesign single-component page does NOT put it on its inline context, so we fetch\n  // on our own. This hook is only mounted when the API view is the active tab (the page renders the\n  // element on-demand), so lane-compare — which renders one panel per component and never mounts\n  // this tab — pays nothing.\n  const contextApiDiff = compareContext?.apiDiffResult;\n  const shouldSelfFetch = contextApiDiff === undefined;\n  const { result: fetchedApiDiff } = useApiDiff(baseModel?.id.toString(), compareModel?.id.toString(), {\n    skip: !shouldSelfFetch,\n  });\n  const apiDiffResult = shouldSelfFetch ? fetchedApiDiff : contextApiDiff;\n\n  // memoized so the insights context value keeps a stable identity — otherwise a fresh array every\n  // render would re-render every `useApiDiffInsights` consumer (incl. the React.memo'd ApiChangeBlock).\n  const insights = React.useMemo(() => getInsights?.(), [getInsights]);\n\n  if (!compareContext) return null;\n\n  const id = (compareModel || baseModel)?.id;\n  if (!id) return null;\n\n  const componentIdStr = id.toStringWithoutVersion();\n  const baseVersion = baseModel?.id.version;\n  const compareVersion = compareModel?.id.version;\n\n  // no base (first version) or identical versions — nothing to diff, not a failure.\n  const nothingToCompare = apiDiffResult === null && (!baseVersion || baseVersion === compareVersion);\n\n  return (\n    <ApiDiffInsightProvider insights={insights}>\n      <div className={styles.apiCompareContainer}>\n        {nothingToCompare ? (\n          <ApiDiffSlimRow\n            componentIdStr={componentIdStr}\n            displayName={id.fullName}\n            chip=\"nothing to compare\"\n            detail={baseVersion ? 'both sides are the same version' : 'no base version to compare against'}\n            tone=\"ok\"\n          />\n        ) : (\n          <ComponentApiDiffSection\n            componentIdStr={componentIdStr}\n            displayName={id.fullName}\n            baseId={baseModel?.id.toString()}\n            compareId={compareModel?.id.toString()}\n            baseVersion={baseVersion}\n            compareVersion={compareVersion}\n            result={apiDiffResult}\n            loading={apiDiffResult === undefined}\n          />\n        )}\n      </div>\n    </ApiDiffInsightProvider>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/api-compare.module.scss

@@ -3,248 +3,6 @@
   flex-direction: column;
   height: 100%;
   overflow: auto;
-  padding: 24px;
-  gap: 16px;
-}
-
-.summary {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-  padding: 12px 16px;
-  background: var(--bit-bg-dent, #f6f6f6);
-  border-radius: 8px;
-  font-size: 13px;
-}
-
-.summaryDivider {
-  opacity: 0.3;
-  color: var(--bit-text-color-light, #6c707c);
-}
-
-.summaryBadge {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 3px 10px;
-  border-radius: 12px;
-  font-weight: 500;
-  font-size: 12px;
-  white-space: nowrap;
-}
-
-.addedBadge {
-  composes: summaryBadge;
-  background: color-mix(in srgb, var(--bit-color-added, #2ea043) 15%, transparent);
-  color: var(--bit-color-added, #2ea043);
-}
-
-.removedBadge {
-  composes: summaryBadge;
-  background: color-mix(in srgb, var(--bit-color-removed, #f85149) 15%, transparent);
-  color: var(--bit-color-removed, #f85149);
-}
-
-.modifiedBadge {
-  composes: summaryBadge;
-  background: color-mix(in srgb, var(--bit-color-modified, #d29922) 15%, transparent);
-  color: var(--bit-color-modified, #d29922);
-}
-
-.changeList {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.sectionTitle {
-  margin: 16px 0 8px;
-  font-size: 12px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  color: var(--bit-text-color-light, #6c707c);
-}
-
-.diffEntry {
-  border: 1px solid var(--bit-border-color-lightest, #ededed);
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.diffEntryHeader {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 10px 16px;
-  cursor: pointer;
-  user-select: none;
-
-  &:hover {
-    background: var(--bit-bg-dent, #f6f6f6);
-  }
-}
-
-.statusBadge {
-  display: inline-flex;
-  align-items: center;
-  padding: 2px 8px;
-  border-radius: 4px;
-  font-weight: 600;
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.3px;
-  flex-shrink: 0;
-  white-space: nowrap;
-}
-
-.statusAdded {
-  composes: statusBadge;
-  background: color-mix(in srgb, var(--bit-color-added, #2ea043) 15%, transparent);
-  color: var(--bit-color-added, #2ea043);
-}
-
-.statusRemoved {
-  composes: statusBadge;
-  background: color-mix(in srgb, var(--bit-color-removed, #f85149) 15%, transparent);
-  color: var(--bit-color-removed, #f85149);
-}
-
-.statusModified {
-  composes: statusBadge;
-  background: color-mix(in srgb, var(--bit-color-modified, #d29922) 15%, transparent);
-  color: var(--bit-color-modified, #d29922);
-}
-
-.exportName {
-  font-weight: 600;
-  font-size: 14px;
-  font-family: var(--bit-font-mono, monospace);
-  color: var(--bit-text-color-heavy, #2b2b2b);
-}
-
-.schemaType {
-  color: var(--bit-text-color-light, #6c707c);
-  font-size: 12px;
-}
-
-.impactBadge {
-  composes: summaryBadge;
-  margin-left: auto;
-  font-size: 11px;
-}
-
-.expandIcon {
-  color: var(--bit-text-color-light, #6c707c);
-  font-size: 10px;
-  transition: transform 0.2s;
-  flex-shrink: 0;
-}
-
-.expandIconOpen {
-  composes: expandIcon;
-  transform: rotate(90deg);
-}
-
-.diffEntryBody {
-  padding: 0 16px 16px;
-  border-top: 1px solid var(--bit-border-color-lightest, #ededed);
-}
-
-.detailsList {
-  list-style: none;
-  padding: 12px 0 0;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.detailItem {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  font-size: 13px;
-  line-height: 1.5;
-  color: var(--bit-text-color-heavy, #2b2b2b);
-}
-
-.detailDot {
-  width: 7px;
-  height: 7px;
-  min-width: 7px;
-  border-radius: 50%;
-  margin-top: 6px;
-  flex-shrink: 0;
-}
-
-.dotBreaking {
-  composes: detailDot;
-  background: var(--bit-color-removed, #f85149);
-}
-
-.dotNonBreaking {
-  composes: detailDot;
-  background: var(--bit-color-added, #2ea043);
-}
-
-.dotPatch {
-  composes: detailDot;
-  background: var(--bit-color-modified, #d29922);
-}
-
-.detailDescription {
-  color: var(--bit-text-color-heavy, #2b2b2b);
-}
-
-.signatureBlock {
-  margin-top: 12px;
-  padding: 12px;
-  background: var(--bit-bg-dent, #f6f6f6);
-  border-radius: 6px;
-  font-family: var(--bit-font-mono, monospace);
-  font-size: 12px;
-  white-space: pre-wrap;
-  word-break: break-word;
-  line-height: 1.6;
-  color: var(--bit-text-color-heavy, #2b2b2b);
-}
-
-.signatureLabel {
-  font-weight: 600;
-  color: var(--bit-text-color-light, #6c707c);
-  margin-top: 12px;
-  margin-bottom: 4px;
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.signatureRemoved {
-  composes: signatureBlock;
-  text-decoration: line-through;
-  opacity: 0.6;
-}
-
-.emptyState {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  color: var(--bit-text-color-light, #6c707c);
-  font-size: 14px;
-}
-
-.toggleSignatures {
-  background: none;
-  border: none;
-  color: var(--bit-accent-color, #0366d6);
-  font-size: 12px;
-  cursor: pointer;
-  padding: 4px 0;
-  margin-top: 12px;
-
-  &:hover {
-    text-decoration: underline;
-  }
+  padding: 16px 24px;
+  max-width: 980px;
 }

package/dist/api-compare.section.d.ts

@@ -2,7 +2,13 @@ import React from 'react';
 import type { Section } from '@teambit/component';
 import type { TabItem } from '@teambit/component.ui.component-compare.models.component-compare-props';
 import type { ChangeType } from '@teambit/component.ui.component-compare.models.component-compare-change-type';
+import type { ApiDiffInsight } from '@teambit/semantics.ui.api-diff-view';
 export declare class APICompareSection implements TabItem, Section {
+    route: {
+        path: string;
+        element: React.ReactNode;
+    };
+    constructor(getInsights?: () => ApiDiffInsight[]);
     navigationLink: {
         href: string;
         children: string;
@@ -11,10 +17,6 @@ export declare class APICompareSection implements TabItem, Section {
         href: string;
         children: string;
     };
-    route: {
-        path: string;
-        element: React.JSX.Element;
-    };
     order: number;
     changeType: ChangeType;
     id: string;

package/dist/api-compare.section.js

@@ -25,19 +25,24 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 // Use string cast since the external ChangeType enum doesn't have API yet
 const ChangeTypeAPI = 'API';
 class APICompareSection {
-  constructor() {
+  constructor(getInsights) {
+    _defineProperty(this, "route", void 0);
     _defineProperty(this, "navigationLink", {
       href: 'api',
       children: 'API'
     });
     _defineProperty(this, "props", this.navigationLink);
-    _defineProperty(this, "route", {
-      path: 'api/*',
-      element: /*#__PURE__*/_react().default.createElement(_apiCompare().APICompare, null)
-    });
     _defineProperty(this, "order", 15);
     _defineProperty(this, "changeType", ChangeTypeAPI);
     _defineProperty(this, "id", 'api');
+    // built in the constructor (not a field initializer) so the element captures the
+    // getter regardless of class-field initialization order.
+    this.route = {
+      path: 'api/*',
+      element: /*#__PURE__*/_react().default.createElement(_apiCompare().APICompare, {
+        getInsights: getInsights
+      })
+    };
   }
 }
 exports.APICompareSection = APICompareSection;

package/dist/api-compare.section.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","data","_interopRequireDefault","require","_apiCompare","e","__esModule","default","_defineProperty","r","t","_toPropertyKey","Object","defineProperty","value","enumerable","configurable","writable","i","_toPrimitive","Symbol","toPrimitive","call","TypeError","String","Number","ChangeTypeAPI","APICompareSection","constructor","href","children","navigationLink","path","element","createElement","APICompare","exports"],"sources":["api-compare.section.tsx"],"sourcesContent":["import React from 'react';\nimport type { Section } from '@teambit/component';\nimport type { TabItem } from '@teambit/component.ui.component-compare.models.component-compare-props';\nimport type { ChangeType } from '@teambit/component.ui.component-compare.models.component-compare-change-type';\nimport { APICompare } from './api-compare';\n\n// Use string cast since the external ChangeType enum doesn't have API yet\nconst ChangeTypeAPI = 'API' as unknown as ChangeType;\n\nexport class APICompareSection implements TabItem, Section {\n  navigationLink = {\n    href: 'api',\n    children: 'API',\n  };\n\n  props = this.navigationLink;\n\n  route = {\n    path: 'api/*',\n    element: <APICompare />,\n  };\n\n  order = 15;\n  changeType = ChangeTypeAPI;\n  id = 'api';\n}\n"],"mappings":";;;;;;AAAA,SAAAA,OAAA;EAAA,MAAAC,IAAA,GAAAC,sBAAA,CAAAC,OAAA;EAAAH,MAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAIA,SAAAG,YAAA;EAAA,MAAAH,IAAA,GAAAE,OAAA;EAAAC,WAAA,YAAAA,CAAA;IAAA,OAAAH,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAA2C,SAAAC,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAG,gBAAAH,CAAA,EAAAI,CAAA,EAAAC,CAAA,YAAAD,CAAA,GAAAE,cAAA,CAAAF,CAAA,MAAAJ,CAAA,GAAAO,MAAA,CAAAC,cAAA,CAAAR,CAAA,EAAAI,CAAA,IAAAK,KAAA,EAAAJ,CAAA,EAAAK,UAAA,MAAAC,YAAA,MAAAC,QAAA,UAAAZ,CAAA,CAAAI,CAAA,IAAAC,CAAA,EAAAL,CAAA;AAAA,SAAAM,eAAAD,CAAA,QAAAQ,CAAA,GAAAC,YAAA,CAAAT,CAAA,uCAAAQ,CAAA,GAAAA,CAAA,GAAAA,CAAA;AAAA,SAAAC,aAAAT,CAAA,EAAAD,CAAA,2BAAAC,CAAA,KAAAA,CAAA,SAAAA,CAAA,MAAAL,CAAA,GAAAK,CAAA,CAAAU,MAAA,CAAAC,WAAA,kBAAAhB,CAAA,QAAAa,CAAA,GAAAb,CAAA,CAAAiB,IAAA,CAAAZ,CAAA,EAAAD,CAAA,uCAAAS,CAAA,SAAAA,CAAA,YAAAK,SAAA,yEAAAd,CAAA,GAAAe,MAAA,GAAAC,MAAA,EAAAf,CAAA;AAE3C;AACA,MAAMgB,aAAa,GAAG,KAA8B;AAE7C,MAAMC,iBAAiB,CAA6B;EAAAC,YAAA;IAAApB,eAAA,yBACxC;MACfqB,IAAI,EAAE,KAAK;MACXC,QAAQ,EAAE;IACZ,CAAC;IAAAtB,eAAA,gBAEO,IAAI,CAACuB,cAAc;IAAAvB,eAAA,gBAEnB;MACNwB,IAAI,EAAE,OAAO;MACbC,OAAO,eAAEjC,MAAA,GAAAO,OAAA,CAAA2B,aAAA,CAAC9B,WAAA,GAAA+B,UAAU,MAAE;IACxB,CAAC;IAAA3B,eAAA,gBAEO,EAAE;IAAAA,eAAA,qBACGkB,aAAa;IAAAlB,eAAA,aACrB,KAAK;EAAA;AACZ;AAAC4B,OAAA,CAAAT,iBAAA,GAAAA,iBAAA","ignoreList":[]}
+{"version":3,"names":["_react","data","_interopRequireDefault","require","_apiCompare","e","__esModule","default","_defineProperty","r","t","_toPropertyKey","Object","defineProperty","value","enumerable","configurable","writable","i","_toPrimitive","Symbol","toPrimitive","call","TypeError","String","Number","ChangeTypeAPI","APICompareSection","constructor","getInsights","href","children","navigationLink","route","path","element","createElement","APICompare","exports"],"sources":["api-compare.section.tsx"],"sourcesContent":["import React from 'react';\nimport type { Section } from '@teambit/component';\nimport type { TabItem } from '@teambit/component.ui.component-compare.models.component-compare-props';\nimport type { ChangeType } from '@teambit/component.ui.component-compare.models.component-compare-change-type';\nimport type { ApiDiffInsight } from '@teambit/semantics.ui.api-diff-view';\nimport { APICompare } from './api-compare';\n\n// Use string cast since the external ChangeType enum doesn't have API yet\nconst ChangeTypeAPI = 'API' as unknown as ChangeType;\n\nexport class APICompareSection implements TabItem, Section {\n  route: { path: string; element: React.ReactNode };\n\n  constructor(getInsights?: () => ApiDiffInsight[]) {\n    // built in the constructor (not a field initializer) so the element captures the\n    // getter regardless of class-field initialization order.\n    this.route = {\n      path: 'api/*',\n      element: <APICompare getInsights={getInsights} />,\n    };\n  }\n\n  navigationLink = {\n    href: 'api',\n    children: 'API',\n  };\n\n  props = this.navigationLink;\n\n  order = 15;\n  changeType = ChangeTypeAPI;\n  id = 'api';\n}\n"],"mappings":";;;;;;AAAA,SAAAA,OAAA;EAAA,MAAAC,IAAA,GAAAC,sBAAA,CAAAC,OAAA;EAAAH,MAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAKA,SAAAG,YAAA;EAAA,MAAAH,IAAA,GAAAE,OAAA;EAAAC,WAAA,YAAAA,CAAA;IAAA,OAAAH,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAA2C,SAAAC,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAG,gBAAAH,CAAA,EAAAI,CAAA,EAAAC,CAAA,YAAAD,CAAA,GAAAE,cAAA,CAAAF,CAAA,MAAAJ,CAAA,GAAAO,MAAA,CAAAC,cAAA,CAAAR,CAAA,EAAAI,CAAA,IAAAK,KAAA,EAAAJ,CAAA,EAAAK,UAAA,MAAAC,YAAA,MAAAC,QAAA,UAAAZ,CAAA,CAAAI,CAAA,IAAAC,CAAA,EAAAL,CAAA;AAAA,SAAAM,eAAAD,CAAA,QAAAQ,CAAA,GAAAC,YAAA,CAAAT,CAAA,uCAAAQ,CAAA,GAAAA,CAAA,GAAAA,CAAA;AAAA,SAAAC,aAAAT,CAAA,EAAAD,CAAA,2BAAAC,CAAA,KAAAA,CAAA,SAAAA,CAAA,MAAAL,CAAA,GAAAK,CAAA,CAAAU,MAAA,CAAAC,WAAA,kBAAAhB,CAAA,QAAAa,CAAA,GAAAb,CAAA,CAAAiB,IAAA,CAAAZ,CAAA,EAAAD,CAAA,uCAAAS,CAAA,SAAAA,CAAA,YAAAK,SAAA,yEAAAd,CAAA,GAAAe,MAAA,GAAAC,MAAA,EAAAf,CAAA;AAE3C;AACA,MAAMgB,aAAa,GAAG,KAA8B;AAE7C,MAAMC,iBAAiB,CAA6B;EAGzDC,WAAWA,CAACC,WAAoC,EAAE;IAAArB,eAAA;IAAAA,eAAA,yBASjC;MACfsB,IAAI,EAAE,KAAK;MACXC,QAAQ,EAAE;IACZ,CAAC;IAAAvB,eAAA,gBAEO,IAAI,CAACwB,cAAc;IAAAxB,eAAA,gBAEnB,EAAE;IAAAA,eAAA,qBACGkB,aAAa;IAAAlB,eAAA,aACrB,KAAK;IAjBR;IACA;IACA,IAAI,CAACyB,KAAK,GAAG;MACXC,IAAI,EAAE,OAAO;MACbC,OAAO,eAAEnC,MAAA,GAAAO,OAAA,CAAA6B,aAAA,CAAChC,WAAA,GAAAiC,UAAU;QAACR,WAAW,EAAEA;MAAY,CAAE;IAClD,CAAC;EACH;AAYF;AAACS,OAAA,CAAAX,iBAAA,GAAAA,iBAAA","ignoreList":[]}

package/dist/api-reference.ui.runtime.js

@@ -171,8 +171,9 @@ class APIReferenceUI {
     // register all default schema classes
     apiReferenceUI.registerSchemaClasses(() => Object.values(_semanticsEntities().Schemas));
 
-    // register API compare tab in component compare
-    const apiCompareSection = new (_apiCompare().APICompareSection)();
+    // register API compare tab in component compare. insights are resolved lazily —
+    // aspects can register them on componentCompareUI after this provider runs.
+    const apiCompareSection = new (_apiCompare().APICompareSection)(() => componentCompareUI.getApiDiffInsights());
     componentCompareUI.registerNavigation(apiCompareSection);
     componentCompareUI.registerRoutes([apiCompareSection.route]);
     return apiReferenceUI;