@apiboost/omnispec 1.1.0-next.1 → 1.1.0-next.2

package/dist/esm/chunks/{AsyncApiSpec-BPiA9b5T.js → AsyncApiSpec-BzhfaQ_T.js}

@@ -1,21 +1,13 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useCallback, useState, useMemo } from 'react';
-import { css, cx } from '@emotion/css';
-import { a as useSpecFetcher, I as Icon, m as mq, r as resolveSchemaStyle, S as SpecType, T as ThemeProvider, L as LoadingScreen, b as SpecStatusScreen, E as ErrorMessage, N as NavTree, h as buildSidebar, C as ConfigProvider, e as DocLayout } from './useSpecFetcher-CZvAnU7Z.js';
-import { M as MarkdownRenderer, T as Tabs, t as SchemaTree, A as schemaToNodes, x as generateExample, H as ExampleSelector, C as CodeBlock, d as ExpandableCard, f as MethodBar, I as buildConstraints, S as SchemaBadge, a as Collapsible, D as useHashScroll, y as requestExpand, w as flattenNavItemIds, G as useScrollSpy, u as SearchBar, J as ExpandProvider, v as SpecToolbar, z as resolveDownloadLink } from './Collapsible-0ryLh6wX.js';
-import { E as ErrorBoundary } from './ErrorBoundary-posRNrbt.js';
+import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import { useCallback, Fragment, useState, useMemo } from 'react';
+import { cx, css } from '@emotion/css';
+import { a as useSpecFetcher, I as Icon, m as mq, r as resolveSchemaStyle, S as SpecType, T as ThemeProvider, L as LoadingScreen, b as SpecStatusScreen, E as ErrorMessage, N as NavTree, h as buildSidebar, C as ConfigProvider, e as DocLayout } from './useSpecFetcher-BvVfMuzf.js';
+import { M as MarkdownRenderer, C as CodeBlock, T as Tabs, t as SchemaTree, A as schemaToNodes, x as generateExample, J as ExampleSelector, d as ExpandableCard, f as MethodBar, K as buildConstraints, S as SchemaBadge, R as ReferenceLayout, a as Collapsible, D as useHashScroll, y as requestExpand, w as flattenNavItemIds, G as useScrollSpy, u as SearchBar, L as ExpandProvider, v as SpecToolbar, z as resolveDownloadLink } from './Collapsible-MyJB2agz.js';
+import { E as ErrorBoundary } from './ErrorBoundary-9pDlZFfM.js';
 import { r as resolveRefs, p as parse, d as decodeJsonPointerSegment } from './ref-resolver-B0C36NuQ.js';
 import '@emotion/styled';
 import './ssrf-guard-CsZoYdEq.js';
 
-function unionTags(a, b) {
-  if (!a && !b) return void 0;
-  const byName = /* @__PURE__ */ new Map();
-  for (const tag of [...a ?? [], ...b ?? []]) {
-    if (!byName.has(tag.name)) byName.set(tag.name, tag);
-  }
-  return Array.from(byName.values());
-}
 function mergeSchema(base, override) {
   if (!base) return override;
   if (!override) return base;
@@ -35,9 +27,7 @@ function mergeMessageLayer(base, override) {
   const result = { ...base };
   for (const [key, value] of Object.entries(override)) {
     if (key === "traits" || value === void 0) continue;
-    if (key === "tags") {
-      result.tags = unionTags(base.tags, value);
-    } else if (key === "headers") {
+    if (key === "headers") {
       result.headers = mergeSchema(base.headers, value);
     } else if (key === "examples") {
       result.examples = [...base.examples ?? [], ...value ?? []];
@@ -49,19 +39,22 @@ function mergeMessageLayer(base, override) {
   }
   return result;
 }
-function applyMessageTraits(msg) {
+function applyMessageTraits(msg, isV3) {
   if (!msg.traits || msg.traits.length === 0) return msg;
-  let acc = {};
+  if (isV3) {
+    let acc2 = {};
+    for (const trait of msg.traits) acc2 = mergeMessageLayer(acc2, trait);
+    return mergeMessageLayer(acc2, msg);
+  }
+  let acc = msg;
   for (const trait of msg.traits) acc = mergeMessageLayer(acc, trait);
-  return mergeMessageLayer(acc, msg);
+  return acc;
 }
 function mergeOperationLayer(base, override) {
   const result = { ...base };
   for (const [key, value] of Object.entries(override)) {
     if (key === "traits" || value === void 0) continue;
-    if (key === "tags") {
-      result.tags = unionTags(base.tags, value);
-    } else if (key === "bindings") {
+    if (key === "bindings") {
       result.bindings = { ...base.bindings ?? {}, ...value };
     } else {
       result[key] = value;
@@ -69,11 +62,16 @@ function mergeOperationLayer(base, override) {
   }
   return result;
 }
-function applyOperationTraits(op) {
+function applyOperationTraits(op, isV3) {
   if (!op.traits || op.traits.length === 0) return op;
-  let acc = {};
+  if (isV3) {
+    let acc2 = {};
+    for (const trait of op.traits) acc2 = mergeOperationLayer(acc2, trait);
+    return mergeOperationLayer(acc2, op);
+  }
+  let acc = op;
   for (const trait of op.traits) acc = mergeOperationLayer(acc, trait);
-  return mergeOperationLayer(acc, op);
+  return acc;
 }
 async function parseAsyncApiSpec(specInput) {
   const raw = typeof specInput === "string" ? parseSpecString(specInput) : specInput;
@@ -82,8 +80,9 @@ async function parseAsyncApiSpec(specInput) {
   const isV3 = majorVersion >= 3;
   const servers = extractServers(api, raw);
   const rawApi = raw;
-  const channels = isV3 ? extractChannelsV3(api, rawApi) : extractChannelsV2(api);
-  const components = extractComponents(api);
+  const defaultContentType = api.defaultContentType;
+  const channels = isV3 ? extractChannelsV3(api, rawApi, defaultContentType) : extractChannelsV2(api, defaultContentType);
+  const components = extractComponents(api, isV3, defaultContentType);
   const root = api;
   const tags = api.tags?.map((tag) => {
     const raw2 = tag;
@@ -108,11 +107,13 @@ async function parseAsyncApiSpec(specInput) {
     contact: api.info.contact,
     license: api.info.license,
     termsOfService: api.info.termsOfService,
-    logo: api.info["x-logo"]
+    logo: api.info["x-logo"],
+    defaultContentType
   };
 }
 function extractServers(api, rawApi) {
   if (!api.servers) return [];
+  const isV3 = parseInt(api.asyncapi.split(".")[0], 10) >= 3;
   const toServer = (s, name, rawSecurity) => ({
     name,
     url: s.host ? `${s.protocol}://${s.host}${s.pathname ?? ""}` : s.url ?? "",
@@ -122,6 +123,7 @@ function extractServers(api, rawApi) {
     variables: s.variables,
     security: s.security,
     securityNames: deriveSecurityNames(rawSecurity, s.security),
+    securityRequirements: deriveSecurityRequirements(rawSecurity, s.security, isV3),
     bindings: s.bindings
   });
   if (Array.isArray(api.servers)) {
@@ -131,15 +133,15 @@ function extractServers(api, rawApi) {
   const rawServers = !Array.isArray(rawApi.servers) && rawApi.servers || {};
   return Object.entries(api.servers).map(([name, s]) => toServer(s, name, rawServers[name]?.security));
 }
-function extractChannelsV2(api) {
+function extractChannelsV2(api, defaultContentType) {
   if (!api.channels) return [];
   return Object.entries(api.channels).map(([channelName, ch]) => {
     const operations = [];
     if (ch.publish) {
-      operations.push(convertOperationV2("publish", ch.publish));
+      operations.push(convertOperationV2("publish", ch.publish, defaultContentType));
     }
     if (ch.subscribe) {
-      operations.push(convertOperationV2("subscribe", ch.subscribe));
+      operations.push(convertOperationV2("subscribe", ch.subscribe, defaultContentType));
     }
     const raw = ch;
     return {
@@ -149,20 +151,21 @@ function extractChannelsV2(api) {
       operations: operations.filter((op) => !op.xInternal),
       parameters: ch.parameters,
       bindings: ch.bindings,
+      // 2.x channels have no externalDocs or channel-level tags.
       xInternal: raw["x-internal"]
     };
   });
 }
-function convertOperationV2(action, rawOp) {
-  const op = applyOperationTraits(rawOp);
+function convertOperationV2(action, rawOp, defaultContentType) {
+  const op = applyOperationTraits(rawOp, false);
   const messages = [];
   if (op.message) {
     if ("oneOf" in op.message) {
       for (const m of op.message.oneOf) {
-        messages.push(convertMessage(m));
+        messages.push(convertMessage(m, false, defaultContentType));
       }
     } else {
-      messages.push(convertMessage(op.message));
+      messages.push(convertMessage(op.message, false, defaultContentType));
     }
   }
   const raw = op;
@@ -175,7 +178,9 @@ function convertOperationV2(action, rawOp) {
     message: messages[0],
     tags: op.tags,
     bindings: op.bindings,
+    externalDocs: op.externalDocs,
     securityNames: deriveSecurityNames(void 0, op.security),
+    securityRequirements: deriveSecurityRequirements(void 0, op.security, false),
     xBadges: raw["x-badges"],
     xInternal: raw["x-internal"]
   };
@@ -192,7 +197,7 @@ function resolveChannelName(rawChannel, resolvedChannel, addressToName) {
   }
   return void 0;
 }
-function extractChannelsV3(api, rawApi) {
+function extractChannelsV3(api, rawApi, defaultContentType) {
   if (!api.channels) return [];
   const channelMap = /* @__PURE__ */ new Map();
   const addressToName = /* @__PURE__ */ new Map();
@@ -207,69 +212,108 @@ function extractChannelsV3(api, rawApi) {
       operations: [],
       parameters: ch.parameters,
       bindings: ch.bindings,
+      externalDocs: ch.externalDocs,
+      tags: ch.tags,
       xInternal: raw["x-internal"]
     });
   }
+  const orphanOperations = [];
   if (api.operations) {
     for (const [opKey, resolvedOp] of Object.entries(api.operations)) {
-      const op = applyOperationTraits(resolvedOp);
+      const op = applyOperationTraits(resolvedOp, true);
       const rawOp = rawApi.operations?.[opKey];
       const channelName = resolveChannelName(rawOp?.channel, op.channel, addressToName);
       const collectMessages = (list) => {
         const out = [];
         for (const msg of list ?? []) {
           if (msg && typeof msg === "object" && "$ref" in msg) continue;
-          out.push(convertMessage(msg));
+          out.push(convertMessage(msg, true, defaultContentType));
         }
         return out;
       };
-      const messages = collectMessages(op.messages);
+      let messages = collectMessages(op.messages);
+      if (messages.length === 0 && channelName && api.channels?.[channelName]?.messages) {
+        messages = collectMessages(
+          Object.values(api.channels[channelName].messages)
+        );
+      }
       const replyMessages = collectMessages(op.reply?.messages);
+      const rawReplyChannel = rawOp?.reply?.channel;
+      const replyChannelName = resolveChannelName(
+        rawReplyChannel,
+        op.reply?.channel,
+        addressToName
+      );
       const raw = op;
+      const reply = replyMessages.length > 0 || op.reply?.address || replyChannelName ? {
+        messages: replyMessages,
+        address: op.reply?.address,
+        channelName: replyChannelName
+      } : void 0;
       const operation = {
         action: op.action,
+        // 3.x has no operationId field; the operations-map key is the id.
+        operationId: opKey,
+        title: op.title,
         summary: op.summary,
         description: op.description,
         messages,
         message: messages[0],
         tags: op.tags,
         bindings: op.bindings,
+        externalDocs: op.externalDocs,
         securityNames: deriveSecurityNames(rawOp?.security, op.security),
-        reply: replyMessages.length > 0 ? { messages: replyMessages } : void 0,
+        securityRequirements: deriveSecurityRequirements(rawOp?.security, op.security, true),
+        reply,
         xBadges: raw["x-badges"],
         xInternal: raw["x-internal"]
       };
       if (operation.xInternal) continue;
       if (channelName && channelMap.has(channelName)) {
         channelMap.get(channelName).operations.push(operation);
+      } else {
+        orphanOperations.push(operation);
       }
     }
   }
-  return Array.from(channelMap.values());
+  const channels = Array.from(channelMap.values());
+  if (orphanOperations.length > 0) {
+    channels.push({
+      name: "__unassigned__",
+      address: "Unassigned operations",
+      description: "These operations reference a channel that is not defined in this document.",
+      operations: orphanOperations
+    });
+  }
+  return channels;
 }
-function convertMessage(rawMsg) {
-  const msg = applyMessageTraits(rawMsg);
+function convertMessage(rawMsg, isV3, defaultContentType) {
+  const msg = applyMessageTraits(rawMsg, isV3);
+  const hasOwnContentType = typeof msg.contentType === "string" && msg.contentType.length > 0;
+  const contentType = hasOwnContentType ? msg.contentType : defaultContentType ?? "application/json";
   return {
     name: msg.name,
     title: msg.title,
     summary: msg.summary,
     description: msg.description,
-    contentType: msg.contentType,
+    contentType,
+    contentTypeInherited: hasOwnContentType ? void 0 : true,
     schemaFormat: msg.schemaFormat,
     payload: msg.payload,
     headers: msg.headers,
     correlationId: msg.correlationId,
     tags: msg.tags,
     examples: msg.examples,
-    bindings: msg.bindings
+    bindings: msg.bindings,
+    externalDocs: msg.externalDocs
   };
 }
-function extractComponents(api) {
+function extractComponents(api, isV3, defaultContentType) {
   const components = api.components;
   const rawMessages = api.components?.messages ?? {};
   const messages = {};
   for (const [name, msg] of Object.entries(rawMessages)) {
-    messages[name] = convertMessage(msg);
+    messages[name] = convertMessage(msg, isV3, defaultContentType);
   }
   return {
     schemas: api.components?.schemas ?? {},
@@ -298,6 +342,40 @@ function deriveSecurityNames(raw, resolved) {
   }
   return names.length > 0 ? names : void 0;
 }
+function deriveSecurityRequirements(raw, resolved, isV3) {
+  const rawArr = raw ?? [];
+  const resArr = resolved ?? [];
+  const count = Math.max(rawArr.length, resArr.length);
+  if (count === 0) return void 0;
+  const out = [];
+  for (let i = 0; i < count; i++) {
+    const rawEntry = rawArr[i];
+    const resEntry = resArr[i];
+    if (isV3) {
+      let name;
+      if (rawEntry && typeof rawEntry === "object" && typeof rawEntry.$ref === "string") {
+        name = decodeJsonPointerSegment(rawEntry.$ref.split("/").pop());
+      } else if (resEntry && typeof resEntry.type === "string") {
+        name = resEntry.type;
+      }
+      if (name === void 0) continue;
+      const rawScopes = rawEntry?.scopes;
+      const resScopes = resEntry?.scopes;
+      const scopesSource = Array.isArray(rawScopes) ? rawScopes : Array.isArray(resScopes) ? resScopes : [];
+      const scopes = scopesSource.map(String);
+      out.push([{ name, scopes }]);
+    } else {
+      const map = rawEntry ?? resEntry;
+      if (!map || typeof map !== "object") continue;
+      const inner = Object.entries(map).map(([name, scopes]) => ({
+        name,
+        scopes: Array.isArray(scopes) ? scopes.map(String) : []
+      }));
+      if (inner.length > 0) out.push(inner);
+    }
+  }
+  return out.length > 0 ? out : void 0;
+}
 function parseSpecString(input) {
   const trimmed = input.trim();
   if (trimmed.startsWith("{")) {
@@ -316,6 +394,38 @@ function useAsyncApiSpec(spec) {
   return useSpecFetcher(spec, parser);
 }
 
+function ExternalDocsLink({ externalDocs, context, className }) {
+  const label = externalDocs.description ?? "External docs";
+  const ariaLabel = `${context ? `${context} external docs` : "External docs"}, opens in new tab`;
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href: externalDocs.url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      "aria-label": ariaLabel,
+      className: cx(linkStyle$1, className),
+      children: [
+        label,
+        /* @__PURE__ */ jsx(Icon, { name: "external-link", size: "0.875em" })
+      ]
+    }
+  );
+}
+const linkStyle$1 = css({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "0.25rem",
+  fontSize: "var(--omnispec-font-size-xs)",
+  color: "var(--omnispec-fg-link)",
+  textDecoration: "none",
+  minWidth: 0,
+  overflowWrap: "anywhere",
+  "&:hover": {
+    textDecoration: "underline"
+  }
+});
+
 const containerStyle$4 = css({
   marginBottom: "2rem",
   paddingBottom: "1.5rem",
@@ -386,7 +496,7 @@ function AsyncOverview({ spec }) {
       "License: ",
       spec.license.url ? /* @__PURE__ */ jsx("a", { href: spec.license.url, target: "_blank", rel: "noopener noreferrer", className: linkStyle, children: spec.license.name }) : spec.license.name
     ] }),
-    spec.externalDocs && /* @__PURE__ */ jsx("div", { className: metaStyle, children: /* @__PURE__ */ jsx("a", { href: spec.externalDocs.url, target: "_blank", rel: "noopener noreferrer", className: linkStyle, children: spec.externalDocs.description ?? "External Documentation" }) })
+    spec.externalDocs && /* @__PURE__ */ jsx("div", { className: metaStyle, children: /* @__PURE__ */ jsx(ExternalDocsLink, { externalDocs: spec.externalDocs, context: spec.title ?? "API" }) })
   ] });
 }
 
@@ -434,16 +544,91 @@ function ProtocolBadge({ protocol, version }) {
 }
 
 function humanizeField(field) {
+  if (/^x-/i.test(field)) return field;
   const spaced = field.replace(/[_-]+/g, " ").replace(/([a-z0-9])([A-Z])/g, "$1 $2").trim();
   return spaced.charAt(0).toUpperCase() + spaced.slice(1);
 }
+function isPlainObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+const JSON_SCHEMA_TYPES = /* @__PURE__ */ new Set([
+  "string",
+  "number",
+  "integer",
+  "boolean",
+  "object",
+  "array",
+  "null"
+]);
+function hasSchemaType(value) {
+  const t = value.type;
+  if (typeof t === "string") return JSON_SCHEMA_TYPES.has(t);
+  if (Array.isArray(t)) return t.every((x) => typeof x === "string" && JSON_SCHEMA_TYPES.has(x));
+  return false;
+}
+function isJsonSchema(value) {
+  return "properties" in value || "enum" in value || "items" in value || hasSchemaType(value);
+}
+function isScalarArray(value) {
+  return value.every(
+    (item) => item === null || typeof item !== "object"
+  );
+}
 function renderValue(value) {
   if (value === null) return /* @__PURE__ */ jsx("span", { className: mutedStyle, children: "null" });
   if (typeof value === "boolean") return /* @__PURE__ */ jsx("code", { className: codeStyle, children: value ? "true" : "false" });
   if (typeof value === "number") return /* @__PURE__ */ jsx("code", { className: codeStyle, children: String(value) });
   if (typeof value === "string") return /* @__PURE__ */ jsx("span", { children: value });
+  if (Array.isArray(value)) {
+    if (value.length === 0) return /* @__PURE__ */ jsx("span", { className: mutedStyle, children: "none" });
+    if (isScalarArray(value)) {
+      return /* @__PURE__ */ jsx("span", { children: value.map((item) => String(item)).join(", ") });
+    }
+    return /* @__PURE__ */ jsx("code", { className: jsonStyle, children: JSON.stringify(value, null, 2) });
+  }
+  if (isPlainObject(value)) {
+    if (isJsonSchema(value)) {
+      return /* @__PURE__ */ jsx(SchemaValue, { schema: value });
+    }
+    const nested = Object.entries(value).filter(([, v]) => v !== void 0);
+    if (nested.length === 0) return /* @__PURE__ */ jsx("span", { className: mutedStyle, children: "none" });
+    return /* @__PURE__ */ jsx("div", { className: nestedStyle, children: /* @__PURE__ */ jsx(FieldRows, { fields: nested }) });
+  }
   return /* @__PURE__ */ jsx("code", { className: jsonStyle, children: JSON.stringify(value) });
 }
+function SchemaValue({ schema }) {
+  const properties = isPlainObject(schema.properties) ? schema.properties : void 0;
+  if (properties && Object.keys(properties).length > 0) {
+    return /* @__PURE__ */ jsx("div", { className: schemaTableStyle, children: Object.entries(properties).map(([name, propSchema]) => /* @__PURE__ */ jsx(
+      SchemaRow,
+      {
+        name,
+        schema: isPlainObject(propSchema) ? propSchema : {}
+      },
+      name
+    )) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: schemaTableStyle, children: /* @__PURE__ */ jsx(SchemaLeaf, { schema }) });
+}
+function SchemaRow({ name, schema }) {
+  return /* @__PURE__ */ jsxs("div", { className: schemaRowStyle, children: [
+    /* @__PURE__ */ jsx("code", { className: schemaNameStyle$1, children: name }),
+    /* @__PURE__ */ jsx(SchemaLeaf, { schema })
+  ] });
+}
+function SchemaLeaf({ schema }) {
+  const type = typeof schema.type === "string" ? schema.type : void 0;
+  const description = typeof schema.description === "string" ? schema.description : void 0;
+  const enumValues = Array.isArray(schema.enum) ? schema.enum : void 0;
+  return /* @__PURE__ */ jsxs("div", { className: schemaLeafStyle, children: [
+    type && /* @__PURE__ */ jsx("span", { className: schemaTypeStyle, children: type }),
+    description && /* @__PURE__ */ jsx("span", { className: schemaDescStyle, children: description }),
+    enumValues && enumValues.length > 0 && /* @__PURE__ */ jsxs("span", { className: enumWrapStyle, children: [
+      /* @__PURE__ */ jsx("span", { className: enumLabelStyle, children: "Allowed:" }),
+      enumValues.map((v, i) => /* @__PURE__ */ jsx("code", { className: enumItemStyle, children: String(v) }, i))
+    ] })
+  ] });
+}
 function FieldRows({ fields }) {
   if (fields.length === 0) return null;
   return /* @__PURE__ */ jsx("dl", { className: listStyle$1, children: fields.map(([field, value]) => /* @__PURE__ */ jsxs("div", { className: rowStyle$1, children: [
@@ -455,7 +640,8 @@ const listStyle$1 = css({
   display: "grid",
   gridTemplateColumns: "max-content 1fr",
   gap: "0.25rem 1rem",
-  margin: "0.25rem 0 0"
+  margin: "0.25rem 0 0",
+  minWidth: 0
 });
 const rowStyle$1 = css({ display: "contents" });
 const nameStyle$1 = css({
@@ -468,6 +654,7 @@ const valueStyle = css({
   color: "var(--omnispec-fg-primary)",
   margin: 0,
   minWidth: 0,
+  overflowWrap: "anywhere",
   wordBreak: "break-word"
 });
 const codeStyle = css({
@@ -475,14 +662,82 @@ const codeStyle = css({
   fontSize: "var(--omnispec-font-size-xs)"
 });
 const jsonStyle = css({
+  display: "block",
   fontFamily: "var(--omnispec-font-mono)",
   fontSize: "var(--omnispec-font-size-xs)",
   color: "var(--omnispec-fg-code)",
-  wordBreak: "break-all"
+  margin: 0,
+  whiteSpace: "pre",
+  overflowX: "auto",
+  maxWidth: "100%",
+  overflowWrap: "anywhere"
 });
 const mutedStyle = css({
   color: "var(--omnispec-fg-muted)"
 });
+const nestedStyle = css({
+  minWidth: 0,
+  paddingLeft: "0.5rem",
+  marginTop: "0.125rem",
+  boxShadow: "inset 2px 0 0 0 var(--omnispec-border-color)"
+});
+const schemaTableStyle = css({
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.25rem",
+  minWidth: 0
+});
+const schemaRowStyle = css({
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.125rem",
+  minWidth: 0
+});
+const schemaNameStyle$1 = css({
+  fontFamily: "var(--omnispec-font-mono)",
+  fontSize: "var(--omnispec-font-size-xs)",
+  fontWeight: 600,
+  color: "var(--omnispec-fg-primary)",
+  overflowWrap: "anywhere"
+});
+const schemaLeafStyle = css({
+  display: "flex",
+  flexWrap: "wrap",
+  alignItems: "baseline",
+  gap: "0.375rem",
+  minWidth: 0
+});
+const schemaTypeStyle = css({
+  fontFamily: "var(--omnispec-font-mono)",
+  fontSize: "var(--omnispec-font-size-xs)",
+  color: "var(--omnispec-fg-code)"
+});
+const schemaDescStyle = css({
+  fontSize: "var(--omnispec-font-size-xs)",
+  color: "var(--omnispec-fg-secondary)",
+  overflowWrap: "anywhere",
+  wordBreak: "break-word"
+});
+const enumWrapStyle = css({
+  display: "flex",
+  flexWrap: "wrap",
+  alignItems: "baseline",
+  gap: "0.25rem",
+  minWidth: 0
+});
+const enumLabelStyle = css({
+  fontSize: "var(--omnispec-font-size-xs)",
+  color: "var(--omnispec-fg-muted)"
+});
+const enumItemStyle = css({
+  fontFamily: "var(--omnispec-font-mono)",
+  fontSize: "var(--omnispec-font-size-xs)",
+  color: "var(--omnispec-fg-code)",
+  backgroundColor: "var(--omnispec-bg-tertiary)",
+  borderRadius: "var(--omnispec-border-radius)",
+  padding: "0.02rem 0.3rem",
+  overflowWrap: "anywhere"
+});
 
 const HIDDEN_KEYS = /* @__PURE__ */ new Set(["bindingVersion"]);
 function BindingsSection({ bindings, title = "Bindings" }) {
@@ -533,14 +788,21 @@ const emptyStyle = css({
   color: "var(--omnispec-fg-muted)"
 });
 
-function SecurityRequirementBadges({ names, label = "Security" }) {
-  if (!names || names.length === 0) return null;
+function SecurityRequirementBadges({ requirements, label = "Security" }) {
+  if (!requirements || requirements.length === 0) return null;
   return /* @__PURE__ */ jsxs("div", { className: rowStyle, children: [
     /* @__PURE__ */ jsx("span", { className: labelStyle, children: label }),
-    names.map((name) => /* @__PURE__ */ jsxs("a", { href: `#security-${name}`, className: badgeStyle, children: [
-      /* @__PURE__ */ jsx(Icon, { name: "lock", size: "0.625rem", strokeWidth: 2.5 }),
-      name
-    ] }, name))
+    requirements.map((alternative, altIndex) => /* @__PURE__ */ jsxs(Fragment, { children: [
+      altIndex > 0 && /* @__PURE__ */ jsx("span", { className: orStyle, children: "OR" }),
+      alternative.map((scheme) => /* @__PURE__ */ jsxs("a", { href: `#security-${scheme.name}`, className: badgeStyle, children: [
+        /* @__PURE__ */ jsx(Icon, { name: "lock", size: "0.625rem", strokeWidth: 2.5 }),
+        scheme.name,
+        scheme.scopes.length > 0 && /* @__PURE__ */ jsxs("span", { className: scopesStyle$1, children: [
+          /* @__PURE__ */ jsx("span", { className: scopeSepStyle, children: "\xB7" }),
+          scheme.scopes.join(", ")
+        ] })
+      ] }, scheme.name))
+    ] }, altIndex))
   ] });
 }
 const rowStyle = css({
@@ -552,11 +814,20 @@ const rowStyle = css({
 });
 const labelStyle = css({
   fontSize: "var(--omnispec-font-size-xxs)",
+  lineHeight: 1.5,
   fontWeight: 600,
   textTransform: "uppercase",
   letterSpacing: "0.05em",
   color: "var(--omnispec-fg-muted)"
 });
+const orStyle = css({
+  fontSize: "var(--omnispec-font-size-xxs)",
+  lineHeight: 1.5,
+  fontWeight: 700,
+  textTransform: "uppercase",
+  letterSpacing: "0.05em",
+  color: "var(--omnispec-fg-muted)"
+});
 const badgeStyle = css({
   display: "inline-flex",
   alignItems: "center",
@@ -573,6 +844,15 @@ const badgeStyle = css({
     textDecoration: "underline"
   }
 });
+const scopesStyle$1 = css({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "0.3125rem",
+  color: "var(--omnispec-fg-secondary)"
+});
+const scopeSepStyle = css({
+  color: "var(--omnispec-fg-muted)"
+});
 
 const containerStyle$2 = css({
   marginBottom: "1.5rem"
@@ -700,7 +980,7 @@ function ServerCard({ server }) {
       ] }),
       variable.description && /* @__PURE__ */ jsx("span", { className: varDescStyle, children: variable.description })
     ] }, name)) }),
-    /* @__PURE__ */ jsx(SecurityRequirementBadges, { names: server.securityNames }),
+    /* @__PURE__ */ jsx(SecurityRequirementBadges, { requirements: server.securityRequirements ?? [] }),
     /* @__PURE__ */ jsx(BindingsSection, { bindings: server.bindings, title: "Server Bindings" })
   ] });
 }
@@ -710,7 +990,7 @@ function ServerList({ servers }) {
   const activeIndex = Math.min(selected, servers.length - 1);
   return /* @__PURE__ */ jsxs("div", { className: cx("omnispec-async-servers", containerStyle$2), children: [
     /* @__PURE__ */ jsx("h3", { className: titleStyle$3, children: "Servers" }),
-    servers.length > 1 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    servers.length > 1 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
       /* @__PURE__ */ jsx("div", { className: tabStripStyle, role: "tablist", "aria-label": "Servers", children: servers.map((server, idx) => /* @__PURE__ */ jsx(
         "button",
         {
@@ -805,7 +1085,15 @@ function primitive(name) {
 
 function MessagePayload({ message, idx }) {
   const rawPayload = message.payload;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    message.tags && message.tags.length > 0 && /* @__PURE__ */ jsx("div", { className: tagChipsStyle$2, children: message.tags.map((tag) => /* @__PURE__ */ jsx("span", { className: tagChipStyle$2, title: tag.description, children: tag.name }, tag.name)) }),
+    message.externalDocs && /* @__PURE__ */ jsx("div", { className: externalDocsStyle, children: /* @__PURE__ */ jsx(
+      ExternalDocsLink,
+      {
+        externalDocs: message.externalDocs,
+        context: message.name ?? message.title ?? "message"
+      }
+    ) }),
     message.schemaFormat && /* @__PURE__ */ jsx("span", { className: schemaFormatBadgeStyle, children: message.schemaFormat }),
     rawPayload && /* @__PURE__ */ jsx(PayloadBody, { rawPayload, schemaFormat: message.schemaFormat, message, idx })
   ] });
@@ -825,7 +1113,14 @@ function PayloadBody({
       ] })
     ] });
   }
-  const schema = detectSchemaFormat(schemaFormat) === "avro" ? avroToJsonSchema(rawPayload) : rawPayload;
+  const format = detectSchemaFormat(schemaFormat);
+  if (format === "protobuf") {
+    return /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(CodeBlock, { code: JSON.stringify(rawPayload, null, 2), language: "json" }),
+      /* @__PURE__ */ jsx("p", { className: proNoteStyle, children: "Full Protobuf schema rendering is available in Pro." })
+    ] });
+  }
+  const schema = format === "avro" ? avroToJsonSchema(rawPayload) : rawPayload;
   return /* @__PURE__ */ jsx(
     Tabs,
     {
@@ -854,11 +1149,28 @@ function MessageExample({ message, schema }) {
   const active = named.find((ex) => ex.name === selectedName) ?? named[0];
   const exampleSchema = schema ?? message.payload;
   const code = active?.value !== void 0 ? JSON.stringify(active.value, null, 2) : exampleSchema ? JSON.stringify(generateExample(exampleSchema), null, 2) : "{}";
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsx(ExampleSelector, { examples: named, selectedName: selectedName || (named[0]?.name ?? ""), onSelect: setSelectedName }),
     /* @__PURE__ */ jsx(CodeBlock, { code, language: "json" })
   ] });
 }
+const tagChipsStyle$2 = css({
+  display: "flex",
+  flexWrap: "wrap",
+  gap: "0.25rem",
+  marginBottom: "0.5rem"
+});
+const tagChipStyle$2 = css({
+  fontSize: "var(--omnispec-font-size-xxs)",
+  fontFamily: "var(--omnispec-font-mono)",
+  color: "var(--omnispec-fg-secondary)",
+  backgroundColor: "var(--omnispec-bg-tertiary)",
+  padding: "1px 0.5rem",
+  borderRadius: "0.625rem"
+});
+const externalDocsStyle = css({
+  marginBottom: "0.5rem"
+});
 const schemaFormatBadgeStyle = css({
   display: "inline-block",
   fontFamily: "var(--omnispec-font-mono)",
@@ -869,6 +1181,12 @@ const schemaFormatBadgeStyle = css({
   borderRadius: "var(--omnispec-border-radius)",
   marginBottom: "0.5rem"
 });
+const proNoteStyle = css({
+  margin: "0.375rem 0 0",
+  fontSize: "var(--omnispec-font-size-xxs)",
+  color: "var(--omnispec-fg-muted)",
+  fontStyle: "italic"
+});
 const unresolvedRefStyle = css({
   display: "flex",
   alignItems: "center",
@@ -884,22 +1202,22 @@ const unresolvedRefCodeStyle = css({
   fontSize: "var(--omnispec-font-size-xs)"
 });
 
-const actionLabels = {
+const actionLabels$1 = {
   publish: "PUB",
   subscribe: "SUB",
   send: "SEND",
   receive: "RECV"
 };
-const actionColors = {
+const actionColors$1 = {
   publish: "var(--omnispec-color-publish)",
   subscribe: "var(--omnispec-color-subscribe)",
   send: "var(--omnispec-color-publish)",
   receive: "var(--omnispec-color-subscribe)"
 };
-function ChannelDetail({ channel, id, expandAll, expandGeneration }) {
+function ChannelDetail({ channel, id, expandAll, expandGeneration, onTagClick }) {
   const primaryAction = channel.operations[0]?.action;
-  const primaryLabel = actionLabels[primaryAction] ?? primaryAction?.toUpperCase() ?? "";
-  const primaryColor = actionColors[primaryAction] ?? "var(--omnispec-fg-muted)";
+  const primaryLabel = actionLabels$1[primaryAction] ?? primaryAction?.toUpperCase() ?? "";
+  const primaryColor = actionColors$1[primaryAction] ?? "var(--omnispec-fg-muted)";
   return /* @__PURE__ */ jsxs(
     ExpandableCard,
     {
@@ -911,21 +1229,22 @@ function ChannelDetail({ channel, id, expandAll, expandGeneration }) {
       children: [
         /* @__PURE__ */ jsx(MethodBar, { label: primaryLabel, path: channel.address, color: primaryColor }),
         /* @__PURE__ */ jsxs("div", { className: bodyStyle, children: [
-          channel.description && /* @__PURE__ */ jsx("div", { className: sectionStyle, children: /* @__PURE__ */ jsx(MarkdownRenderer, { content: channel.description }) }),
-          channel.parameters && Object.keys(channel.parameters).length > 0 && /* @__PURE__ */ jsxs("div", { className: sectionStyle, children: [
-            /* @__PURE__ */ jsx("h4", { className: sectionTitleStyle, children: "Parameters" }),
-            /* @__PURE__ */ jsx("div", { className: paramListStyle, children: Object.entries(channel.parameters).map(([name, param]) => {
+          channel.description && /* @__PURE__ */ jsx("div", { className: sectionStyle$1, children: /* @__PURE__ */ jsx(MarkdownRenderer, { content: channel.description }) }),
+          channel.externalDocs && /* @__PURE__ */ jsx("div", { className: sectionStyle$1, children: /* @__PURE__ */ jsx(ExternalDocsLink, { externalDocs: channel.externalDocs, context: channel.address }) }),
+          channel.parameters && Object.keys(channel.parameters).length > 0 && /* @__PURE__ */ jsxs("div", { className: sectionStyle$1, children: [
+            /* @__PURE__ */ jsx("h4", { className: sectionTitleStyle$1, children: "Parameters" }),
+            /* @__PURE__ */ jsx("div", { className: paramListStyle$1, children: Object.entries(channel.parameters).map(([name, param]) => {
               const schema = param.schema ?? {};
               const paramType = schema.type;
               const paramFormat = schema.format;
               const paramEnum = schema.enum;
               const constraintBadges = buildConstraints(schema);
-              return /* @__PURE__ */ jsxs("div", { className: paramRowStyle, children: [
-                /* @__PURE__ */ jsxs("div", { className: paramHeaderStyle, children: [
-                  /* @__PURE__ */ jsx("span", { className: paramNameStyle, children: name }),
-                  paramType && /* @__PURE__ */ jsx("pre", { className: typeBadgeStyle$1, children: paramType })
+              return /* @__PURE__ */ jsxs("div", { className: paramRowStyle$1, children: [
+                /* @__PURE__ */ jsxs("div", { className: paramHeaderStyle$1, children: [
+                  /* @__PURE__ */ jsx("span", { className: paramNameStyle$1, children: name }),
+                  paramType && /* @__PURE__ */ jsx("pre", { className: typeBadgeStyle$2, children: paramType })
                 ] }),
-                (paramFormat || constraintBadges.length > 0 || paramEnum && paramEnum.length > 0) && /* @__PURE__ */ jsxs("div", { className: paramConstraintsStyle, children: [
+                (paramFormat || constraintBadges.length > 0 || paramEnum && paramEnum.length > 0) && /* @__PURE__ */ jsxs("div", { className: paramConstraintsStyle$1, children: [
                   paramFormat && /* @__PURE__ */ jsx(SchemaBadge, { variant: "constraint", children: paramFormat }),
                   constraintBadges.map((c) => /* @__PURE__ */ jsx(SchemaBadge, { variant: "constraint", children: c }, c)),
                   paramEnum && paramEnum.length > 0 && /* @__PURE__ */ jsxs(SchemaBadge, { variant: "enum", children: [
@@ -933,31 +1252,60 @@ function ChannelDetail({ channel, id, expandAll, expandGeneration }) {
                     paramEnum.map(String).join(" | ")
                   ] })
                 ] }),
-                param.description && /* @__PURE__ */ jsx("p", { className: paramDescStyle, children: param.description })
+                param.description && /* @__PURE__ */ jsx("p", { className: paramDescStyle$1, children: param.description })
               ] }, name);
             }) })
           ] }),
           /* @__PURE__ */ jsx(BindingsSection, { bindings: channel.bindings, title: "Channel Bindings" }),
           channel.operations.map((op, idx) => /* @__PURE__ */ jsxs("div", { id: id ? `${id}-op-${idx}` : void 0, className: operationStyle, children: [
-            /* @__PURE__ */ jsxs("div", { className: opHeaderStyle, children: [
+            /* @__PURE__ */ jsxs("div", { className: opHeaderStyle$1, children: [
               /* @__PURE__ */ jsx(
                 "span",
                 {
-                  className: cx(actionBadgeBase, css({
-                    backgroundColor: actionColors[op.action] ?? "var(--omnispec-fg-muted)"
+                  className: cx(actionBadgeBase$1, css({
+                    backgroundColor: actionColors$1[op.action] ?? "var(--omnispec-fg-muted)"
                   })),
-                  children: actionLabels[op.action] ?? op.action.toUpperCase()
+                  children: actionLabels$1[op.action] ?? op.action.toUpperCase()
                 }
               ),
-              op.operationId && /* @__PURE__ */ jsx("span", { className: opIdStyle, children: op.operationId }),
-              op.summary && /* @__PURE__ */ jsx("span", { className: opSummaryStyle, children: op.summary })
+              op.operationId && /* @__PURE__ */ jsx("span", { className: opIdStyle$1, children: op.operationId }),
+              op.title && /* @__PURE__ */ jsx("span", { className: opTitleStyle$1, children: op.title }),
+              op.summary && /* @__PURE__ */ jsx("span", { className: opSummaryStyle$1, children: op.summary })
             ] }),
-            op.tags && op.tags.length > 0 && /* @__PURE__ */ jsx("div", { className: tagChipsStyle, children: op.tags.map((tag) => /* @__PURE__ */ jsx("span", { className: tagChipStyle, title: tag.description, children: tag.name }, tag.name)) }),
-            op.description && /* @__PURE__ */ jsx("div", { className: sectionStyle, children: /* @__PURE__ */ jsx(MarkdownRenderer, { content: op.description }) }),
-            /* @__PURE__ */ jsx(SecurityRequirementBadges, { names: op.securityNames }),
+            op.tags && op.tags.length > 0 && /* @__PURE__ */ jsx("div", { className: tagChipsStyle$1, children: op.tags.map(
+              (tag) => onTagClick ? /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: tagChipButtonStyle$1,
+                  title: tag.description,
+                  onClick: () => onTagClick(tag.name),
+                  children: tag.name
+                },
+                tag.name
+              ) : /* @__PURE__ */ jsx("span", { className: tagChipStyle$1, title: tag.description, children: tag.name }, tag.name)
+            ) }),
+            op.description && /* @__PURE__ */ jsx("div", { className: sectionStyle$1, children: /* @__PURE__ */ jsx(MarkdownRenderer, { content: op.description }) }),
+            op.externalDocs && /* @__PURE__ */ jsx("div", { className: opExternalDocsStyle, children: /* @__PURE__ */ jsx(
+              ExternalDocsLink,
+              {
+                externalDocs: op.externalDocs,
+                context: op.operationId ?? op.summary ?? "operation"
+              }
+            ) }),
+            /* @__PURE__ */ jsx(SecurityRequirementBadges, { requirements: op.securityRequirements ?? [] }),
             /* @__PURE__ */ jsx(OperationMessages, { operation: op, idx }),
-            op.reply && op.reply.messages.length > 0 && /* @__PURE__ */ jsxs("div", { className: replyStyle, children: [
+            op.reply && (op.reply.messages.length > 0 || op.reply.address || op.reply.channelName) && /* @__PURE__ */ jsxs("div", { className: replyStyle$1, children: [
               /* @__PURE__ */ jsx("h4", { className: replyTitleStyle, children: "Reply" }),
+              op.reply.channelName && /* @__PURE__ */ jsxs("div", { className: replyMetaRowStyle, children: [
+                /* @__PURE__ */ jsx("span", { className: replyMetaLabelStyle, children: "channel" }),
+                /* @__PURE__ */ jsx("code", { className: replyMetaValueStyle, children: op.reply.channelName })
+              ] }),
+              op.reply.address && (op.reply.address.location || op.reply.address.description) && /* @__PURE__ */ jsxs("div", { className: replyMetaRowStyle, children: [
+                /* @__PURE__ */ jsx("span", { className: replyMetaLabelStyle, children: "address" }),
+                op.reply.address.location && /* @__PURE__ */ jsx("code", { className: replyMetaValueStyle, children: op.reply.address.location }),
+                op.reply.address.description && /* @__PURE__ */ jsx("span", { className: replyMetaDescStyle, children: op.reply.address.description })
+              ] }),
               op.reply.messages.map((replyMsg, i) => /* @__PURE__ */ jsx(MessageView, { message: replyMsg, idx: `${idx}-reply-${i}` }, i))
             ] }),
             /* @__PURE__ */ jsx(BindingsSection, { bindings: op.bindings, title: "Operation Bindings" })
@@ -975,7 +1323,7 @@ function OperationMessages({ operation, idx }) {
   const [selectedIndex, setSelectedIndex] = useState(0);
   if (messages.length === 0) return null;
   const active = messages[Math.min(selectedIndex, messages.length - 1)];
-  return /* @__PURE__ */ jsxs("div", { className: sectionStyle, children: [
+  return /* @__PURE__ */ jsxs("div", { className: sectionStyle$1, children: [
     messages.length > 1 && /* @__PURE__ */ jsxs("div", { className: messageSelectorStyle, children: [
       /* @__PURE__ */ jsx("label", { htmlFor: `msg-select-${idx}`, className: messageSelectorLabelStyle, children: "Message" }),
       /* @__PURE__ */ jsx(
@@ -998,23 +1346,23 @@ function OperationMessages({ operation, idx }) {
 }
 function MessageView({ message, idx }) {
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsxs("h4", { className: sectionTitleStyle, children: [
+    /* @__PURE__ */ jsxs("h4", { className: sectionTitleStyle$1, children: [
       "Message",
-      (message.title ?? message.name) && /* @__PURE__ */ jsxs("span", { className: messageTitleStyle, children: [
+      (message.title ?? message.name) && /* @__PURE__ */ jsxs("span", { className: messageTitleStyle$1, children: [
         " \u2014 ",
         message.title ?? message.name
       ] })
     ] }),
     message.summary && /* @__PURE__ */ jsx("p", { className: messageSummaryStyle$1, children: message.summary }),
-    message.contentType && /* @__PURE__ */ jsx("code", { className: contentTypeStyle$1, children: message.contentType }),
+    message.contentType && /* @__PURE__ */ jsx("code", { className: contentTypeStyle$2, children: message.contentType }),
     /* @__PURE__ */ jsx(MessagePayload, { message, idx }),
     message.correlationId && /* @__PURE__ */ jsxs("div", { className: correlationIdStyle, children: [
       /* @__PURE__ */ jsx("span", { className: correlationIdLabelStyle, children: "correlationId" }),
       /* @__PURE__ */ jsx("code", { className: correlationIdLocationStyle, children: message.correlationId.location }),
       message.correlationId.description && /* @__PURE__ */ jsx("span", { className: correlationIdDescStyle, children: message.correlationId.description })
     ] }),
-    message.headers && /* @__PURE__ */ jsxs("div", { className: headersWrapStyle, children: [
-      /* @__PURE__ */ jsx("h4", { className: sectionTitleStyle, children: "Headers" }),
+    message.headers && /* @__PURE__ */ jsxs("div", { className: headersWrapStyle$1, children: [
+      /* @__PURE__ */ jsx("h4", { className: sectionTitleStyle$1, children: "Headers" }),
       /* @__PURE__ */ jsx(SchemaTree, { nodes: schemaToNodes(message.headers) })
     ] }),
     /* @__PURE__ */ jsx(BindingsSection, { bindings: message.bindings, title: "Message Bindings" })
@@ -1026,46 +1374,46 @@ const bodyStyle = css({
     padding: "1rem 1.25rem"
   }
 });
-const sectionStyle = css({
+const sectionStyle$1 = css({
   marginBottom: "1.5rem"
 });
-const sectionTitleStyle = css({
+const sectionTitleStyle$1 = css({
   margin: "0 0 0.75rem",
   fontSize: "var(--omnispec-font-size-md)",
   fontWeight: 700,
   color: "var(--omnispec-fg-primary)",
   letterSpacing: "0.02em"
 });
-const paramListStyle = css({
+const paramListStyle$1 = css({
   display: "flex",
   flexDirection: "column"
 });
-const paramRowStyle = css({
+const paramRowStyle$1 = css({
   padding: "0.75rem 0"
 });
-const paramHeaderStyle = css({
+const paramHeaderStyle$1 = css({
   display: "flex",
   alignItems: "center",
   gap: "0.5rem",
   flexWrap: "wrap"
 });
-const paramNameStyle = css({
+const paramNameStyle$1 = css({
   fontSize: "var(--omnispec-font-size-sm)",
   fontWeight: 700,
   backgroundColor: "transparent",
   padding: 0
 });
-const typeBadgeStyle$1 = css({
+const typeBadgeStyle$2 = css({
   fontSize: "var(--omnispec-font-size-xs)",
   fontWeight: 400
 });
-const paramDescStyle = css({
+const paramDescStyle$1 = css({
   margin: "0.25rem 0 0",
   fontSize: "var(--omnispec-font-size-base)",
   color: "var(--omnispec-fg-secondary)",
   lineHeight: 1.5
 });
-const paramConstraintsStyle = css({
+const paramConstraintsStyle$1 = css({
   display: "flex",
   flexWrap: "wrap",
   gap: "0.375rem",
@@ -1075,13 +1423,13 @@ const operationStyle = css({
   padding: "0.75rem 0",
   borderTop: "1px solid var(--omnispec-border-color)"
 });
-const opHeaderStyle = css({
+const opHeaderStyle$1 = css({
   display: "flex",
   alignItems: "center",
   gap: "0.5rem",
   marginBottom: "0.5rem"
 });
-const actionBadgeBase = css({
+const actionBadgeBase$1 = css({
   display: "inline-block",
   padding: "0.125rem 0.375rem",
   borderRadius: "0.1875rem",
@@ -1091,17 +1439,25 @@ const actionBadgeBase = css({
   color: "#ffffff",
   letterSpacing: "0.0313rem"
 });
-const opIdStyle = css({
+const opIdStyle$1 = css({
   fontSize: "var(--omnispec-font-size-sm)",
   fontWeight: 700,
   backgroundColor: "transparent",
   padding: 0
 });
-const opSummaryStyle = css({
+const opTitleStyle$1 = css({
+  fontSize: "var(--omnispec-font-size-sm)",
+  fontWeight: 600,
+  color: "var(--omnispec-fg-primary)"
+});
+const opSummaryStyle$1 = css({
   fontSize: "var(--omnispec-font-size-sm)",
   color: "var(--omnispec-fg-secondary)"
 });
-const messageTitleStyle = css({
+const opExternalDocsStyle = css({
+  marginBottom: "0.75rem"
+});
+const messageTitleStyle$1 = css({
   fontWeight: 400,
   color: "var(--omnispec-fg-primary)"
 });
@@ -1110,7 +1466,7 @@ const messageSummaryStyle$1 = css({
   fontSize: "var(--omnispec-font-size-base)",
   color: "var(--omnispec-fg-secondary)"
 });
-const contentTypeStyle$1 = css({
+const contentTypeStyle$2 = css({
   fontFamily: "var(--omnispec-font-mono)",
   fontSize: "var(--omnispec-font-size-xs)",
   color: "var(--omnispec-fg-muted)",
@@ -1119,7 +1475,7 @@ const contentTypeStyle$1 = css({
   backgroundColor: "transparent",
   padding: 0
 });
-const headersWrapStyle = css({
+const headersWrapStyle$1 = css({
   marginTop: "1rem"
 });
 const messageSelectorStyle = css({
@@ -1175,7 +1531,7 @@ const correlationIdDescStyle = css({
   fontSize: "var(--omnispec-font-size-xs)",
   color: "var(--omnispec-fg-secondary)"
 });
-const replyStyle = css({
+const replyStyle$1 = css({
   marginTop: "1rem",
   paddingLeft: "0.75rem",
   borderLeft: "0.125rem solid var(--omnispec-border-color)"
@@ -1187,6 +1543,320 @@ const replyTitleStyle = css({
   color: "var(--omnispec-fg-primary)",
   letterSpacing: "0.02em"
 });
+const replyMetaRowStyle = css({
+  display: "flex",
+  alignItems: "center",
+  gap: "0.5rem",
+  flexWrap: "wrap",
+  marginBottom: "0.5rem"
+});
+const replyMetaLabelStyle = css({
+  fontSize: "var(--omnispec-font-size-xs)",
+  fontWeight: 700,
+  color: "var(--omnispec-fg-primary)",
+  fontFamily: "var(--omnispec-font-mono)"
+});
+const replyMetaValueStyle = css({
+  fontFamily: "var(--omnispec-font-mono)",
+  fontSize: "var(--omnispec-font-size-xs)",
+  color: "var(--omnispec-fg-code)",
+  backgroundColor: "var(--omnispec-bg-tertiary)",
+  padding: "1px 0.375rem",
+  borderRadius: "0.1875rem"
+});
+const replyMetaDescStyle = css({
+  fontSize: "var(--omnispec-font-size-xs)",
+  color: "var(--omnispec-fg-secondary)"
+});
+const tagChipsStyle$1 = css({
+  display: "flex",
+  flexWrap: "wrap",
+  gap: "0.25rem",
+  marginBottom: "0.5rem"
+});
+const tagChipStyle$1 = css({
+  fontSize: "var(--omnispec-font-size-xxs)",
+  fontFamily: "var(--omnispec-font-mono)",
+  color: "var(--omnispec-fg-secondary)",
+  backgroundColor: "var(--omnispec-bg-tertiary)",
+  padding: "1px 0.5rem",
+  borderRadius: "0.625rem"
+});
+const tagChipButtonStyle$1 = css({
+  fontSize: "var(--omnispec-font-size-xxs)",
+  fontFamily: "var(--omnispec-font-mono)",
+  color: "var(--omnispec-fg-secondary)",
+  backgroundColor: "var(--omnispec-bg-tertiary)",
+  padding: "1px 0.5rem",
+  borderRadius: "0.625rem",
+  border: "none",
+  cursor: "pointer",
+  "&:hover": {
+    color: "var(--omnispec-fg-primary)"
+  }
+});
+
+const actionLabels = {
+  publish: "PUB",
+  subscribe: "SUB",
+  send: "SEND",
+  receive: "RECV"
+};
+const actionColors = {
+  publish: "var(--omnispec-color-publish)",
+  subscribe: "var(--omnispec-color-subscribe)",
+  send: "var(--omnispec-color-publish)",
+  receive: "var(--omnispec-color-subscribe)"
+};
+function ChannelReferenceDetail({ channel, id, expandAll, expandGeneration, onTagClick }) {
+  const primaryAction = channel.operations[0]?.action;
+  const primaryLabel = actionLabels[primaryAction] ?? primaryAction?.toUpperCase() ?? "";
+  const primaryColor = actionColors[primaryAction] ?? "var(--omnispec-fg-muted)";
+  return /* @__PURE__ */ jsxs(
+    ExpandableCard,
+    {
+      id,
+      title: channel.address,
+      rightLabel: `${channel.operations.length} ${channel.operations.length === 1 ? "operation" : "operations"}`,
+      expandAll,
+      expandGeneration,
+      children: [
+        /* @__PURE__ */ jsx(MethodBar, { label: primaryLabel, path: channel.address, color: primaryColor }),
+        channel.description && /* @__PURE__ */ jsx("div", { className: channelMetaStyle, children: /* @__PURE__ */ jsx(MarkdownRenderer, { content: channel.description }) }),
+        channel.externalDocs && /* @__PURE__ */ jsx("div", { className: channelMetaStyle, children: /* @__PURE__ */ jsx(ExternalDocsLink, { externalDocs: channel.externalDocs, context: channel.address }) }),
+        channel.operations.map((op, idx) => /* @__PURE__ */ jsx("div", { id: id ? `${id}-op-${idx}` : void 0, className: operationWrapStyle, children: /* @__PURE__ */ jsx(
+          ReferenceLayout,
+          {
+            operationId: op.operationId ?? `${channel.name}-op-${idx}`,
+            schema: /* @__PURE__ */ jsx(
+              OperationSchemaColumn,
+              {
+                channel,
+                operation: op,
+                onTagClick
+              }
+            ),
+            samples: /* @__PURE__ */ jsx(OperationSamplesColumn, { operation: op, idx }),
+            tryIt: /* @__PURE__ */ jsx("div", { className: tryItNaStyle, children: "Interactive testing is not available for AsyncAPI protocols." })
+          }
+        ) }, idx))
+      ]
+    }
+  );
+}
+function OperationSchemaColumn({
+  channel,
+  operation,
+  onTagClick
+}) {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { className: opHeaderStyle, children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cx(actionBadgeBase, css({
+            backgroundColor: actionColors[operation.action] ?? "var(--omnispec-fg-muted)"
+          })),
+          children: actionLabels[operation.action] ?? operation.action.toUpperCase()
+        }
+      ),
+      operation.operationId && /* @__PURE__ */ jsx("span", { className: opIdStyle, children: operation.operationId }),
+      operation.title && /* @__PURE__ */ jsx("span", { className: opTitleStyle, children: operation.title }),
+      operation.summary && /* @__PURE__ */ jsx("span", { className: opSummaryStyle, children: operation.summary })
+    ] }),
+    operation.tags && operation.tags.length > 0 && /* @__PURE__ */ jsx("div", { className: tagChipsStyle, children: operation.tags.map(
+      (tag) => onTagClick ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: tagChipButtonStyle,
+          title: tag.description,
+          onClick: () => onTagClick(tag.name),
+          children: tag.name
+        },
+        tag.name
+      ) : /* @__PURE__ */ jsx("span", { className: tagChipStyle, title: tag.description, children: tag.name }, tag.name)
+    ) }),
+    operation.description && /* @__PURE__ */ jsx("div", { className: sectionStyle, children: /* @__PURE__ */ jsx(MarkdownRenderer, { content: operation.description }) }),
+    operation.externalDocs && /* @__PURE__ */ jsx("div", { className: sectionStyle, children: /* @__PURE__ */ jsx(
+      ExternalDocsLink,
+      {
+        externalDocs: operation.externalDocs,
+        context: operation.operationId ?? operation.summary ?? "operation"
+      }
+    ) }),
+    channel.parameters && Object.keys(channel.parameters).length > 0 && /* @__PURE__ */ jsxs("div", { className: sectionStyle, children: [
+      /* @__PURE__ */ jsx("h4", { className: sectionTitleStyle, children: "Parameters" }),
+      /* @__PURE__ */ jsx("div", { className: paramListStyle, children: Object.entries(channel.parameters).map(([name, param]) => {
+        const schema = param.schema ?? {};
+        const paramType = schema.type;
+        const paramFormat = schema.format;
+        const paramEnum = schema.enum;
+        const constraintBadges = buildConstraints(schema);
+        return /* @__PURE__ */ jsxs("div", { className: paramRowStyle, children: [
+          /* @__PURE__ */ jsxs("div", { className: paramHeaderStyle, children: [
+            /* @__PURE__ */ jsx("span", { className: paramNameStyle, children: name }),
+            paramType && /* @__PURE__ */ jsx("pre", { className: typeBadgeStyle$1, children: paramType })
+          ] }),
+          (paramFormat || constraintBadges.length > 0 || paramEnum && paramEnum.length > 0) && /* @__PURE__ */ jsxs("div", { className: paramConstraintsStyle, children: [
+            paramFormat && /* @__PURE__ */ jsx(SchemaBadge, { variant: "constraint", children: paramFormat }),
+            constraintBadges.map((c) => /* @__PURE__ */ jsx(SchemaBadge, { variant: "constraint", children: c }, c)),
+            paramEnum && paramEnum.length > 0 && /* @__PURE__ */ jsxs(SchemaBadge, { variant: "enum", children: [
+              "enum: ",
+              paramEnum.map(String).join(" | ")
+            ] })
+          ] }),
+          param.description && /* @__PURE__ */ jsx("p", { className: paramDescStyle, children: param.description })
+        ] }, name);
+      }) })
+    ] }),
+    /* @__PURE__ */ jsx(SecurityRequirementBadges, { requirements: operation.securityRequirements ?? [] }),
+    /* @__PURE__ */ jsx(BindingsSection, { bindings: operation.bindings, title: "Operation Bindings" }),
+    /* @__PURE__ */ jsx(BindingsSection, { bindings: channel.bindings, title: "Channel Bindings" })
+  ] });
+}
+function OperationSamplesColumn({ operation, idx }) {
+  const messages = operation.messages ?? [];
+  const replyMessages = operation.reply?.messages ?? [];
+  if (messages.length === 0 && replyMessages.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: emptySamplesStyle, children: "No message payload is defined for this operation." });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: samplesColumnStyle, children: [
+    messages.map((message, i) => /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("h4", { className: sectionTitleStyle, children: [
+        "Message",
+        (message.title ?? message.name) && /* @__PURE__ */ jsxs("span", { className: messageTitleStyle, children: [
+          " \u2014 ",
+          message.title ?? message.name
+        ] })
+      ] }),
+      message.contentType && /* @__PURE__ */ jsx("code", { className: contentTypeStyle$1, children: message.contentType }),
+      /* @__PURE__ */ jsx(MessagePayload, { message, idx: `${idx}-msg-${i}` })
+    ] }, i)),
+    replyMessages.length > 0 && /* @__PURE__ */ jsxs("div", { className: replyStyle, children: [
+      /* @__PURE__ */ jsx("h4", { className: sectionTitleStyle, children: "Reply" }),
+      replyMessages.map((message, i) => /* @__PURE__ */ jsx(MessagePayload, { message, idx: `${idx}-reply-${i}` }, i))
+    ] })
+  ] });
+}
+const channelMetaStyle = css({
+  padding: "0.75rem 1rem 0",
+  [mq.desktop]: {
+    padding: "1rem 1.25rem 0"
+  }
+});
+const operationWrapStyle = css({
+  borderTop: "1px solid var(--omnispec-border-color)"
+});
+const tryItNaStyle = css({
+  fontSize: "var(--omnispec-font-size-sm)",
+  color: "var(--omnispec-fg-muted)",
+  fontStyle: "italic",
+  padding: "0.5rem 0"
+});
+const samplesColumnStyle = css({
+  display: "flex",
+  flexDirection: "column",
+  gap: "1.5rem"
+});
+const emptySamplesStyle = css({
+  fontSize: "var(--omnispec-font-size-sm)",
+  color: "var(--omnispec-fg-muted)",
+  fontStyle: "italic"
+});
+const sectionStyle = css({
+  marginBottom: "1.5rem"
+});
+const sectionTitleStyle = css({
+  margin: "0 0 0.75rem",
+  fontSize: "var(--omnispec-font-size-md)",
+  fontWeight: 700,
+  color: "var(--omnispec-fg-primary)",
+  letterSpacing: "0.02em"
+});
+const paramListStyle = css({
+  display: "flex",
+  flexDirection: "column"
+});
+const paramRowStyle = css({
+  padding: "0.75rem 0"
+});
+const paramHeaderStyle = css({
+  display: "flex",
+  alignItems: "center",
+  gap: "0.5rem",
+  flexWrap: "wrap"
+});
+const paramNameStyle = css({
+  fontSize: "var(--omnispec-font-size-sm)",
+  fontWeight: 700,
+  backgroundColor: "transparent",
+  padding: 0
+});
+const typeBadgeStyle$1 = css({
+  fontSize: "var(--omnispec-font-size-xs)",
+  fontWeight: 400
+});
+const paramDescStyle = css({
+  margin: "0.25rem 0 0",
+  fontSize: "var(--omnispec-font-size-base)",
+  color: "var(--omnispec-fg-secondary)",
+  lineHeight: 1.5
+});
+const paramConstraintsStyle = css({
+  display: "flex",
+  flexWrap: "wrap",
+  gap: "0.375rem",
+  marginTop: "0.375rem"
+});
+const opHeaderStyle = css({
+  display: "flex",
+  alignItems: "center",
+  gap: "0.5rem",
+  marginBottom: "0.5rem"
+});
+const actionBadgeBase = css({
+  display: "inline-block",
+  padding: "0.125rem 0.375rem",
+  borderRadius: "0.1875rem",
+  fontSize: "0.5625rem",
+  fontWeight: 700,
+  fontFamily: "var(--omnispec-font-mono)",
+  color: "#ffffff",
+  letterSpacing: "0.0313rem"
+});
+const opIdStyle = css({
+  fontSize: "var(--omnispec-font-size-sm)",
+  fontWeight: 700,
+  backgroundColor: "transparent",
+  padding: 0
+});
+const opTitleStyle = css({
+  fontSize: "var(--omnispec-font-size-sm)",
+  fontWeight: 600,
+  color: "var(--omnispec-fg-primary)"
+});
+const opSummaryStyle = css({
+  fontSize: "var(--omnispec-font-size-sm)",
+  color: "var(--omnispec-fg-secondary)"
+});
+const messageTitleStyle = css({
+  fontWeight: 400,
+  color: "var(--omnispec-fg-primary)"
+});
+const contentTypeStyle$1 = css({
+  fontFamily: "var(--omnispec-font-mono)",
+  fontSize: "var(--omnispec-font-size-xs)",
+  color: "var(--omnispec-fg-muted)",
+  display: "block",
+  marginBottom: "0.5rem",
+  backgroundColor: "transparent",
+  padding: 0
+});
+const replyStyle = css({
+  paddingLeft: "0.75rem",
+  borderLeft: "0.125rem solid var(--omnispec-border-color)"
+});
 const tagChipsStyle = css({
   display: "flex",
   flexWrap: "wrap",
@@ -1201,12 +1871,25 @@ const tagChipStyle = css({
   padding: "1px 0.5rem",
   borderRadius: "0.625rem"
 });
+const tagChipButtonStyle = css({
+  fontSize: "var(--omnispec-font-size-xxs)",
+  fontFamily: "var(--omnispec-font-mono)",
+  color: "var(--omnispec-fg-secondary)",
+  backgroundColor: "var(--omnispec-bg-tertiary)",
+  padding: "1px 0.5rem",
+  borderRadius: "0.625rem",
+  border: "none",
+  cursor: "pointer",
+  "&:hover": {
+    color: "var(--omnispec-fg-primary)"
+  }
+});
 
 function ComponentsSection({ components }) {
   const schemas = Object.entries(components.schemas);
   const messages = Object.entries(components.messages ?? {});
   if (schemas.length === 0 && messages.length === 0) return null;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
     messages.length > 0 && /* @__PURE__ */ jsxs("div", { className: `omnispec-async-messages ${containerStyle$1}`, id: "messages", children: [
       /* @__PURE__ */ jsx("h2", { className: titleStyle$2, children: "Messages" }),
       /* @__PURE__ */ jsx("div", { className: schemaWrapperStyle, children: messages.map(([name, message]) => /* @__PURE__ */ jsx("div", { className: schemaStyle, id: `message-${name}`, children: /* @__PURE__ */ jsxs(
@@ -1217,9 +1900,15 @@ function ComponentsSection({ components }) {
           children: [
             message.title && /* @__PURE__ */ jsx("p", { className: messageSummaryStyle, children: message.title }),
             message.summary && /* @__PURE__ */ jsx("p", { className: messageSummaryStyle, children: message.summary }),
-            message.contentType && /* @__PURE__ */ jsx("code", { className: contentTypeStyle, children: message.contentType }),
+            message.contentType && /* @__PURE__ */ jsxs("code", { className: contentTypeStyle, children: [
+              message.contentType,
+              message.contentTypeInherited && /* @__PURE__ */ jsx("span", { className: contentTypeHintStyle, children: " (default)" })
+            ] }),
             /* @__PURE__ */ jsx(MessagePayload, { message, idx: `message-${name}` }),
-            message.headers && /* @__PURE__ */ jsx(SchemaTree, { nodes: schemaToNodes(message.headers) })
+            message.headers && /* @__PURE__ */ jsxs("div", { className: headersWrapStyle, children: [
+              /* @__PURE__ */ jsx("h4", { className: headersTitleStyle, children: "Headers" }),
+              /* @__PURE__ */ jsx(SchemaTree, { nodes: schemaToNodes(message.headers) })
+            ] })
           ]
         }
       ) }, name)) })
@@ -1284,6 +1973,20 @@ const contentTypeStyle = css({
   color: "var(--omnispec-fg-muted)",
   marginBottom: "0.5rem"
 });
+const contentTypeHintStyle = css({
+  fontStyle: "italic",
+  color: "var(--omnispec-fg-muted)"
+});
+const headersWrapStyle = css({
+  marginTop: "1rem"
+});
+const headersTitleStyle = css({
+  margin: "0 0 0.75rem",
+  fontSize: "var(--omnispec-font-size-md)",
+  fontWeight: 700,
+  color: "var(--omnispec-fg-primary)",
+  letterSpacing: "0.02em"
+});
 
 const SPECIAL_KEYS = /* @__PURE__ */ new Set(["type", "description", "flows"]);
 function SecuritySchemesSection({ securitySchemes }) {
@@ -1436,6 +2139,7 @@ function slugify(value) {
 }
 function channelTagNames(channel) {
   const names = /* @__PURE__ */ new Set();
+  for (const tag of channel.tags ?? []) names.add(tag.name);
   for (const op of channel.operations) {
     for (const tag of op.tags ?? []) names.add(tag.name);
   }
@@ -1490,19 +2194,7 @@ function TagGroupHeader({ group }) {
       /* @__PURE__ */ jsx("span", { className: countStyle, children: group.channels.length })
     ] }),
     group.tag?.description && /* @__PURE__ */ jsx("div", { className: descStyle, children: /* @__PURE__ */ jsx(MarkdownRenderer, { content: group.tag.description }) }),
-    group.tag?.externalDocs && /* @__PURE__ */ jsxs(
-      "a",
-      {
-        href: group.tag.externalDocs.url,
-        target: "_blank",
-        rel: "noopener noreferrer",
-        className: docsStyle,
-        children: [
-          group.tag.externalDocs.description ?? "External docs",
-          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: " \u2197" })
-        ]
-      }
-    )
+    group.tag?.externalDocs && /* @__PURE__ */ jsx("div", { className: docsStyle, children: /* @__PURE__ */ jsx(ExternalDocsLink, { externalDocs: group.tag.externalDocs, context: group.label }) })
   ] });
 }
 const headerStyle = css({
@@ -1535,16 +2227,7 @@ const descStyle = css({
   lineHeight: 1.6
 });
 const docsStyle = css({
-  display: "inline-flex",
-  alignItems: "center",
-  gap: "0.25rem",
-  marginTop: "0.5rem",
-  fontSize: "var(--omnispec-font-size-xs)",
-  color: "var(--omnispec-fg-link)",
-  textDecoration: "none",
-  "&:hover": {
-    textDecoration: "underline"
-  }
+  marginTop: "0.5rem"
 });
 
 function AsyncApiSpec({
@@ -1553,6 +2236,7 @@ function AsyncApiSpec({
   layout = "sidebar",
   sidebarPosition = "left",
   defaultExpandOperations = false,
+  displayMode,
   downloadLink,
   sidebarNav,
   slots = {},
@@ -1562,6 +2246,7 @@ function AsyncApiSpec({
   className
 }) {
   const resolvedSchemaStyle = resolveSchemaStyle(schemaStyle, pro?.advancedSchemaStyles ?? false);
+  const resolvedDisplayMode = displayMode ?? "compact";
   const { data: parsedSpec, state } = useAsyncApiSpec(spec);
   const [searchQuery, setSearchQuery] = useState("");
   const [allExpanded, setAllExpanded] = useState(defaultExpandOperations);
@@ -1628,12 +2313,15 @@ function AsyncApiSpec({
     if (!parsedSpec) return [];
     const actionLabel = (action) => action.toUpperCase();
     const actionColor = (action) => action === "subscribe" || action === "receive" ? "var(--omnispec-color-subscribe)" : "var(--omnispec-color-publish)";
-    const channelNavItem = (ch, idPrefix) => ({
-      id: `${idPrefix}channel-${ch.name}`,
-      label: ch.address,
-      badge: ch.operations.map((op) => actionLabel(op.action)).join("/") || void 0,
-      badgeColor: actionColor(ch.operations[0]?.action ?? "")
-    });
+    const channelNavItem = (ch, idPrefix) => {
+      const uniqueActions = [...new Set(ch.operations.map((op) => actionLabel(op.action)))];
+      return {
+        id: `${idPrefix}channel-${ch.name}`,
+        label: ch.address,
+        badge: uniqueActions.join("/") || void 0,
+        badgeColor: actionColor(ch.operations[0]?.action ?? "")
+      };
+    };
     const operationNavItems = () => filteredChannels.flatMap(
       (ch) => ch.operations.map((op, idx) => ({
         id: operationDomId(ch.name, idx),
@@ -1653,11 +2341,15 @@ function AsyncApiSpec({
     if (parsedSpec.servers.length > 0) {
       items.push({ id: "servers", label: "Servers" });
     }
-    items.push({
-      id: "channels",
-      label: navGrouping === "operation" ? "Operations" : "Channels",
-      children: channelChildren
-    });
+    const searchedToEmpty = channelChildren.length === 0 && searchQuery.trim().length > 0;
+    const channelsChildren = searchedToEmpty ? [{ id: "channels-no-results", label: "No results", className: noResultsNavStyle }] : channelChildren;
+    if (channelsChildren.length > 0) {
+      items.push({
+        id: "channels",
+        label: navGrouping === "operation" ? "Operations" : "Channels",
+        children: channelsChildren
+      });
+    }
     if (Object.keys(parsedSpec.components.messages ?? {}).length > 0) {
       items.push({
         id: "messages",
@@ -1682,7 +2374,7 @@ function AsyncApiSpec({
       items.push({ id: "security", label: "Security Schemes" });
     }
     return items;
-  }, [parsedSpec, grouped, tagGroups, filteredChannels, navGrouping, operationDomId]);
+  }, [parsedSpec, grouped, tagGroups, filteredChannels, navGrouping, operationDomId, searchQuery]);
   const { navigateTo } = useHashScroll(filteredChannels.length);
   const handleNavSelect = useCallback((id) => {
     const cardId = opToCard.get(id);
@@ -1714,7 +2406,7 @@ function AsyncApiSpec({
     );
   }
   if (!parsedSpec) return null;
-  const specNav = /* @__PURE__ */ jsxs(Fragment, { children: [
+  const specNav = /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsx(
       SearchBar,
       {
@@ -1760,7 +2452,7 @@ function AsyncApiSpec({
   ] });
   const sidebar = buildSidebar(sidebarNav, specNav);
   const resolvedDownloadLink = resolveDownloadLink(downloadLink, spec);
-  return /* @__PURE__ */ jsx(ConfigProvider, { config: { allowTryIt: false, layout, sidebarPosition, defaultExpandOperations, schemaStyle: resolvedSchemaStyle, slots, proRenderers: pro?.renderers ?? /* @__PURE__ */ new Map(), premiumThemingEnabled: pro?.premiumThemingEnabled ?? false }, children: /* @__PURE__ */ jsx(ExpandProvider, { expandAll: allExpanded, expandGeneration, children: /* @__PURE__ */ jsx(ThemeProvider, { theme, children: /* @__PURE__ */ jsx("div", { className: `omnispec-asyncapi ${className ?? ""}`, children: /* @__PURE__ */ jsx(ErrorBoundary, { title: "Failed to render this API reference", children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(ConfigProvider, { config: { allowTryIt: false, layout, sidebarPosition, defaultExpandOperations, displayMode: resolvedDisplayMode, schemaStyle: resolvedSchemaStyle, slots, proRenderers: pro?.renderers ?? /* @__PURE__ */ new Map(), premiumThemingEnabled: pro?.premiumThemingEnabled ?? false }, children: /* @__PURE__ */ jsx(ExpandProvider, { expandAll: allExpanded, expandGeneration, children: /* @__PURE__ */ jsx(ThemeProvider, { theme, children: /* @__PURE__ */ jsx("div", { className: `omnispec-asyncapi ${className ?? ""}`, children: /* @__PURE__ */ jsx(ErrorBoundary, { title: "Failed to render this API reference", children: /* @__PURE__ */ jsxs(
     DocLayout,
     {
       layout,
@@ -1787,22 +2479,26 @@ function AsyncApiSpec({
           filteredChannels.length === 0 ? /* @__PURE__ */ jsx("p", { className: emptyStateStyle, children: parsedSpec.channels.length === 0 ? "No channels are defined for this API." : "No channels match your filter." }) : grouped ? tagGroups.map((group) => /* @__PURE__ */ jsxs("section", { id: `taggroup-${group.id}`, className: tagSectionStyle, children: [
             /* @__PURE__ */ jsx(TagGroupHeader, { group }),
             group.channels.map((channel) => /* @__PURE__ */ jsx(
-              ChannelDetail,
+              ChannelCard,
               {
                 id: `${group.id}-channel-${channel.name}`,
                 channel,
+                displayMode: resolvedDisplayMode,
                 expandAll: allExpanded,
-                expandGeneration
+                expandGeneration,
+                onTagClick: setSearchQuery
               },
               `${group.id}-${channel.name}`
             ))
           ] }, group.id)) : filteredChannels.map((channel) => /* @__PURE__ */ jsx(
-            ChannelDetail,
+            ChannelCard,
             {
               id: `channel-${channel.name}`,
               channel,
+              displayMode: resolvedDisplayMode,
               expandAll: allExpanded,
-              expandGeneration
+              expandGeneration,
+              onTagClick: setSearchQuery
             },
             channel.name
           ))
@@ -1813,6 +2509,26 @@ function AsyncApiSpec({
     }
   ) }) }) }) }) });
 }
+function ChannelCard({
+  channel,
+  id,
+  displayMode,
+  expandAll,
+  expandGeneration,
+  onTagClick
+}) {
+  const Renderer = displayMode === "reference" ? ChannelReferenceDetail : ChannelDetail;
+  return /* @__PURE__ */ jsx(
+    Renderer,
+    {
+      id,
+      channel,
+      expandAll,
+      expandGeneration,
+      onTagClick
+    }
+  );
+}
 function nestByTagGroups(groups, xTagGroups, toNav) {
   if (!xTagGroups?.length) return groups.map(toNav);
   const byTagName = /* @__PURE__ */ new Map();
@@ -1835,6 +2551,11 @@ const emptyStateStyle = css({
   color: "var(--omnispec-fg-muted)",
   fontStyle: "italic"
 });
+const noResultsNavStyle = css({
+  fontStyle: "italic",
+  color: "var(--omnispec-fg-muted)",
+  cursor: "default"
+});
 const groupToggleStyle = css({
   display: "flex",
   alignItems: "center",
@@ -1875,4 +2596,4 @@ const tagSectionStyle = css({
 });
 
 export { AsyncApiSpec };
-//# sourceMappingURL=AsyncApiSpec-BPiA9b5T.js.map
+//# sourceMappingURL=AsyncApiSpec-BzhfaQ_T.js.map