@apiboost/omnispec 1.0.0 → 1.1.0-next.2

package/dist/esm/chunks/AsyncApiSpec-BzhfaQ_T.js

@@ -0,0 +1,2599 @@
+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 mergeSchema(base, override) {
+  if (!base) return override;
+  if (!override) return base;
+  const result = { ...base, ...override };
+  const baseProps = base.properties;
+  const overrideProps = override.properties;
+  if (baseProps || overrideProps) {
+    result.properties = { ...baseProps ?? {}, ...overrideProps ?? {} };
+  }
+  const required = Array.from(
+    /* @__PURE__ */ new Set([...base.required ?? [], ...override.required ?? []])
+  );
+  if (required.length > 0) result.required = required;
+  return result;
+}
+function mergeMessageLayer(base, override) {
+  const result = { ...base };
+  for (const [key, value] of Object.entries(override)) {
+    if (key === "traits" || value === void 0) continue;
+    if (key === "headers") {
+      result.headers = mergeSchema(base.headers, value);
+    } else if (key === "examples") {
+      result.examples = [...base.examples ?? [], ...value ?? []];
+    } else if (key === "bindings") {
+      result.bindings = { ...base.bindings ?? {}, ...value };
+    } else {
+      result[key] = value;
+    }
+  }
+  return result;
+}
+function applyMessageTraits(msg, isV3) {
+  if (!msg.traits || msg.traits.length === 0) return msg;
+  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 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 === "bindings") {
+      result.bindings = { ...base.bindings ?? {}, ...value };
+    } else {
+      result[key] = value;
+    }
+  }
+  return result;
+}
+function applyOperationTraits(op, isV3) {
+  if (!op.traits || op.traits.length === 0) return op;
+  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 acc;
+}
+async function parseAsyncApiSpec(specInput) {
+  const raw = typeof specInput === "string" ? parseSpecString(specInput) : specInput;
+  const api = await resolveRefs(raw);
+  const majorVersion = parseInt(api.asyncapi.split(".")[0], 10);
+  const isV3 = majorVersion >= 3;
+  const servers = extractServers(api, raw);
+  const rawApi = raw;
+  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;
+    return {
+      name: tag.name,
+      description: tag.description,
+      displayName: raw2["x-displayName"],
+      externalDocs: raw2.externalDocs
+    };
+  })?.filter((tag) => !tag["x-internal"]);
+  return {
+    title: api.info.title,
+    description: api.info.description,
+    version: api.info.version,
+    specVersion: api.asyncapi,
+    servers,
+    channels: channels.filter((ch) => !ch.xInternal),
+    components,
+    tags,
+    tagGroups: root["x-tagGroups"],
+    externalDocs: api.externalDocs,
+    contact: api.info.contact,
+    license: api.info.license,
+    termsOfService: api.info.termsOfService,
+    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 ?? "",
+    protocol: s.protocol,
+    protocolVersion: s.protocolVersion,
+    description: s.description,
+    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)) {
+    const rawServers2 = Array.isArray(rawApi.servers) ? rawApi.servers : [];
+    return api.servers.map((s, idx) => toServer(s, s.name ?? `server-${idx}`, rawServers2[idx]?.security));
+  }
+  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, defaultContentType) {
+  if (!api.channels) return [];
+  return Object.entries(api.channels).map(([channelName, ch]) => {
+    const operations = [];
+    if (ch.publish) {
+      operations.push(convertOperationV2("publish", ch.publish, defaultContentType));
+    }
+    if (ch.subscribe) {
+      operations.push(convertOperationV2("subscribe", ch.subscribe, defaultContentType));
+    }
+    const raw = ch;
+    return {
+      name: channelName,
+      address: channelName,
+      description: ch.description,
+      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, 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, false, defaultContentType));
+      }
+    } else {
+      messages.push(convertMessage(op.message, false, defaultContentType));
+    }
+  }
+  const raw = op;
+  return {
+    action,
+    operationId: op.operationId,
+    summary: op.summary,
+    description: op.description,
+    messages,
+    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"]
+  };
+}
+function resolveChannelName(rawChannel, resolvedChannel, addressToName) {
+  const refString = rawChannel && typeof rawChannel === "object" && "$ref" in rawChannel && typeof rawChannel.$ref === "string" ? rawChannel.$ref : resolvedChannel && typeof resolvedChannel === "object" && "$ref" in resolvedChannel && typeof resolvedChannel.$ref === "string" ? resolvedChannel.$ref : void 0;
+  if (refString) {
+    const last = refString.split("/").pop();
+    return last !== void 0 ? decodeJsonPointerSegment(last) : void 0;
+  }
+  const address = resolvedChannel?.address;
+  if (address && addressToName.has(address)) {
+    return addressToName.get(address);
+  }
+  return void 0;
+}
+function extractChannelsV3(api, rawApi, defaultContentType) {
+  if (!api.channels) return [];
+  const channelMap = /* @__PURE__ */ new Map();
+  const addressToName = /* @__PURE__ */ new Map();
+  for (const [channelName, ch] of Object.entries(api.channels)) {
+    const raw = ch;
+    const address = ch.address ?? channelName;
+    addressToName.set(address, channelName);
+    channelMap.set(channelName, {
+      name: channelName,
+      address,
+      description: ch.description,
+      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, 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, true, defaultContentType));
+        }
+        return out;
+      };
+      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),
+        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);
+      }
+    }
+  }
+  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, 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,
+    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,
+    externalDocs: msg.externalDocs
+  };
+}
+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, isV3, defaultContentType);
+  }
+  return {
+    schemas: api.components?.schemas ?? {},
+    messages,
+    securitySchemes: components?.securitySchemes ?? {}
+  };
+}
+function deriveSecurityNames(raw, resolved) {
+  const rawArr = raw ?? [];
+  const resArr = resolved ?? [];
+  const count = Math.max(rawArr.length, resArr.length);
+  if (count === 0) return void 0;
+  const names = [];
+  for (let i = 0; i < count; i++) {
+    const rawEntry = rawArr[i];
+    const resEntry = resArr[i];
+    if (rawEntry && typeof rawEntry === "object" && typeof rawEntry.$ref === "string") {
+      names.push(decodeJsonPointerSegment(rawEntry.$ref.split("/").pop()));
+    } else if (resEntry && typeof resEntry === "object") {
+      if (typeof resEntry.type === "string") {
+        names.push(resEntry.type);
+      } else {
+        names.push(...Object.keys(resEntry));
+      }
+    }
+  }
+  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("{")) {
+    try {
+      return JSON.parse(trimmed);
+    } catch {
+    }
+  }
+  return parse(trimmed);
+}
+
+function useAsyncApiSpec(spec) {
+  const parser = useCallback(async (raw) => {
+    return parseAsyncApiSpec(raw);
+  }, []);
+  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",
+  borderBottom: "1px solid var(--omnispec-border-color)"
+});
+const titleStyle$5 = css({
+  margin: "0 0 0.25rem",
+  fontSize: "var(--omnispec-h2-font-size)",
+  color: "var(--omnispec-h2-color)",
+  fontWeight: 700,
+  display: "inline"
+});
+const versionStyle$1 = css({
+  fontSize: "var(--omnispec-font-size-sm)",
+  color: "var(--omnispec-fg-muted)",
+  marginLeft: "0.75rem",
+  fontFamily: "var(--omnispec-font-mono)"
+});
+const specBadgeStyle = css({
+  fontSize: "var(--omnispec-font-size-xs)",
+  color: "var(--omnispec-color-primary)",
+  border: "1px solid var(--omnispec-color-primary)",
+  borderRadius: "0.25rem",
+  padding: "1px 0.375rem",
+  marginLeft: "0.5rem",
+  fontFamily: "var(--omnispec-font-mono)"
+});
+const metaStyle = css({
+  fontSize: "var(--omnispec-font-size-sm)",
+  color: "var(--omnispec-fg-secondary)",
+  marginTop: "0.25rem"
+});
+const linkStyle = css({
+  color: "var(--omnispec-fg-link)",
+  textDecoration: "none",
+  "&:hover": {
+    textDecoration: "underline"
+  }
+});
+function AsyncOverview({ spec }) {
+  return /* @__PURE__ */ jsxs("div", { className: cx("omnispec-async-overview", containerStyle$4), children: [
+    /* @__PURE__ */ jsx("h1", { className: titleStyle$5, children: spec.title }),
+    /* @__PURE__ */ jsxs("span", { className: versionStyle$1, children: [
+      "v",
+      spec.version
+    ] }),
+    /* @__PURE__ */ jsxs("span", { className: specBadgeStyle, children: [
+      "AsyncAPI ",
+      spec.specVersion
+    ] }),
+    spec.description && /* @__PURE__ */ jsx(MarkdownRenderer, { content: spec.description }),
+    spec.contact && /* @__PURE__ */ jsxs("div", { className: metaStyle, children: [
+      spec.contact.name && /* @__PURE__ */ jsxs("span", { children: [
+        "Contact: ",
+        spec.contact.name
+      ] }),
+      spec.contact.email && /* @__PURE__ */ jsxs("span", { children: [
+        " <",
+        /* @__PURE__ */ jsx("a", { href: `mailto:${spec.contact.email}`, className: linkStyle, children: spec.contact.email }),
+        ">"
+      ] }),
+      spec.contact.url && /* @__PURE__ */ jsxs("span", { children: [
+        " \xB7 ",
+        /* @__PURE__ */ jsx("a", { href: spec.contact.url, target: "_blank", rel: "noopener noreferrer", className: linkStyle, children: spec.contact.url })
+      ] })
+    ] }),
+    spec.license && /* @__PURE__ */ jsxs("div", { className: metaStyle, children: [
+      "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(ExternalDocsLink, { externalDocs: spec.externalDocs, context: spec.title ?? "API" }) })
+  ] });
+}
+
+const protocolColors = {
+  kafka: "#231F20",
+  "kafka-secure": "#231F20",
+  mqtt: "#660066",
+  "mqtt5": "#660066",
+  amqp: "#FF6600",
+  "amqp1": "#FF6600",
+  ws: "#4A90D9",
+  wss: "#4A90D9",
+  http: "var(--omnispec-color-get)",
+  https: "var(--omnispec-color-get)",
+  nats: "#27AAE1",
+  redis: "#DC382D",
+  sns: "#FF9900",
+  sqs: "#FF9900",
+  stomp: "#6DB33F",
+  mercure: "#1D1D1D"
+};
+const badgeBase = css({
+  display: "inline-block",
+  padding: "0.125rem 0.5rem",
+  borderRadius: "0.25rem",
+  fontSize: "0.625rem",
+  fontWeight: 700,
+  fontFamily: "var(--omnispec-font-mono)",
+  color: "#ffffff",
+  letterSpacing: "0.0313rem"
+});
+const versionStyle = css({
+  fontWeight: 400,
+  opacity: 0.8
+});
+function ProtocolBadge({ protocol, version }) {
+  const color = protocolColors[protocol.toLowerCase()] ?? "var(--omnispec-fg-muted)";
+  return /* @__PURE__ */ jsxs("span", { className: cx(badgeBase, css({ backgroundColor: color })), children: [
+    protocol.toUpperCase(),
+    version && /* @__PURE__ */ jsxs("span", { className: versionStyle, children: [
+      " ",
+      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: [
+    /* @__PURE__ */ jsx("dt", { className: nameStyle$1, children: humanizeField(field) }),
+    /* @__PURE__ */ jsx("dd", { className: valueStyle, children: renderValue(value) })
+  ] }, field)) });
+}
+const listStyle$1 = css({
+  display: "grid",
+  gridTemplateColumns: "max-content 1fr",
+  gap: "0.25rem 1rem",
+  margin: "0.25rem 0 0",
+  minWidth: 0
+});
+const rowStyle$1 = css({ display: "contents" });
+const nameStyle$1 = css({
+  fontSize: "var(--omnispec-font-size-xs)",
+  fontWeight: 600,
+  color: "var(--omnispec-fg-secondary)"
+});
+const valueStyle = css({
+  fontSize: "var(--omnispec-font-size-xs)",
+  color: "var(--omnispec-fg-primary)",
+  margin: 0,
+  minWidth: 0,
+  overflowWrap: "anywhere",
+  wordBreak: "break-word"
+});
+const codeStyle = css({
+  fontFamily: "var(--omnispec-font-mono)",
+  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)",
+  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" }) {
+  if (!bindings || Object.keys(bindings).length === 0) return null;
+  const protocols = Object.entries(bindings).filter(
+    ([, cfg]) => cfg && typeof cfg === "object"
+  );
+  if (protocols.length === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { className: containerStyle$3, children: [
+    /* @__PURE__ */ jsx("h4", { className: titleStyle$4, children: title }),
+    /* @__PURE__ */ jsx("div", { className: protocolListStyle, children: protocols.map(([protocol, cfg]) => {
+      const rows = Object.entries(cfg).filter(
+        ([key, value]) => !HIDDEN_KEYS.has(key) && value !== void 0
+      );
+      return /* @__PURE__ */ jsxs("div", { className: protocolCardStyle, children: [
+        /* @__PURE__ */ jsx("div", { className: protocolHeaderStyle, children: /* @__PURE__ */ jsx(ProtocolBadge, { protocol }) }),
+        rows.length > 0 ? /* @__PURE__ */ jsx(FieldRows, { fields: rows }) : /* @__PURE__ */ jsx("p", { className: emptyStyle, children: "No binding fields." })
+      ] }, protocol);
+    }) })
+  ] });
+}
+const containerStyle$3 = css({
+  marginTop: "1rem"
+});
+const titleStyle$4 = css({
+  margin: "0 0 0.75rem",
+  fontSize: "var(--omnispec-font-size-md)",
+  fontWeight: 700,
+  color: "var(--omnispec-fg-primary)",
+  letterSpacing: "0.02em"
+});
+const protocolListStyle = css({
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.5rem"
+});
+const protocolCardStyle = css({
+  padding: "0.625rem 0.75rem",
+  borderRadius: "var(--omnispec-border-radius)",
+  backgroundColor: "var(--omnispec-bg-secondary)"
+});
+const protocolHeaderStyle = css({
+  marginBottom: "0.5rem"
+});
+const emptyStyle = css({
+  margin: 0,
+  fontSize: "var(--omnispec-font-size-xs)",
+  color: "var(--omnispec-fg-muted)"
+});
+
+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 }),
+    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({
+  display: "flex",
+  alignItems: "center",
+  gap: "0.375rem",
+  flexWrap: "wrap",
+  marginTop: "0.5rem"
+});
+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",
+  gap: "0.3125rem",
+  fontSize: "var(--omnispec-font-size-xs)",
+  fontFamily: "var(--omnispec-font-mono)",
+  color: "var(--omnispec-fg-primary)",
+  backgroundColor: "var(--omnispec-bg-tertiary)",
+  padding: "0.1875rem 0.625rem",
+  borderRadius: "var(--omnispec-border-radius)",
+  fontWeight: 500,
+  textDecoration: "none",
+  "&:hover": {
+    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"
+});
+const titleStyle$3 = css({
+  margin: "0 0 0.75rem",
+  fontSize: "var(--omnispec-h3-font-size)",
+  color: "var(--omnispec-h3-color)",
+  fontWeight: 600
+});
+const tabStripStyle = css({
+  display: "flex",
+  flexWrap: "wrap",
+  gap: "0.25rem",
+  marginBottom: "0.5rem"
+});
+const tabStyle = css({
+  padding: "0.25rem 0.75rem",
+  border: "none",
+  borderRadius: "var(--omnispec-border-radius)",
+  backgroundColor: "var(--omnispec-bg-tertiary)",
+  color: "var(--omnispec-fg-secondary)",
+  fontSize: "var(--omnispec-font-size-sm)",
+  fontFamily: "var(--omnispec-font-mono)",
+  cursor: "pointer",
+  "&:hover": {
+    color: "var(--omnispec-fg-primary)"
+  }
+});
+const tabActiveStyle = css({
+  backgroundColor: "var(--omnispec-color-primary)",
+  color: "#ffffff",
+  "&:hover": {
+    color: "#ffffff"
+  }
+});
+const cardStyle$1 = css({
+  padding: "0.75rem",
+  border: "1px solid var(--omnispec-border-color)",
+  borderRadius: "var(--omnispec-border-radius)",
+  backgroundColor: "var(--omnispec-bg-secondary)",
+  "&:hover": {
+    borderColor: "var(--omnispec-color-primary)"
+  }
+});
+const cardHeaderStyle = css({
+  display: "flex",
+  alignItems: "center",
+  gap: "0.5rem",
+  marginBottom: "0.375rem"
+});
+const serverNameStyle = css({
+  fontWeight: 600,
+  fontSize: "var(--omnispec-font-size-sm)",
+  color: "var(--omnispec-fg-primary)"
+});
+const urlStyle = css({
+  fontFamily: "var(--omnispec-font-mono)",
+  fontSize: "var(--omnispec-font-size-sm)",
+  color: "var(--omnispec-fg-code)",
+  display: "block",
+  marginBottom: "0.25rem"
+});
+const descriptionStyle = css({
+  margin: "0.25rem 0 0",
+  fontSize: "var(--omnispec-font-size-xs)",
+  color: "var(--omnispec-fg-secondary)"
+});
+const variablesStyle = css({
+  marginTop: "0.5rem",
+  fontSize: "var(--omnispec-font-size-xs)"
+});
+const varRowStyle = css({
+  display: "flex",
+  gap: "0.375rem",
+  marginBottom: "0.125rem"
+});
+const varNameStyle = css({
+  fontFamily: "var(--omnispec-font-mono)",
+  color: "var(--omnispec-fg-primary)",
+  fontWeight: 600
+});
+const varDefaultStyle = css({
+  fontFamily: "var(--omnispec-font-mono)",
+  color: "var(--omnispec-fg-muted)"
+});
+const varDescStyle = css({
+  color: "var(--omnispec-fg-secondary)"
+});
+const varEnumStyle = css({
+  fontFamily: "var(--omnispec-font-mono)",
+  color: "var(--omnispec-color-info)"
+});
+const varTokenStyle = css({
+  color: "var(--omnispec-color-primary)",
+  backgroundColor: "color-mix(in srgb, var(--omnispec-color-primary) 12%, transparent)",
+  borderRadius: "var(--omnispec-border-radius)",
+  padding: "0 0.125rem",
+  "&::before": { content: '"{"' },
+  "&::after": { content: '"}"' }
+});
+function highlightVariables(url) {
+  const parts = url.split(/(\{[^}]+\})/g);
+  return parts.map(
+    (part, i) => /^\{[^}]+\}$/.test(part) ? /* @__PURE__ */ jsx("span", { className: varTokenStyle, children: part.slice(1, -1) }, i) : /* @__PURE__ */ jsx("span", { children: part }, i)
+  );
+}
+function ServerCard({ server }) {
+  return /* @__PURE__ */ jsxs("div", { className: cardStyle$1, children: [
+    /* @__PURE__ */ jsxs("div", { className: cardHeaderStyle, children: [
+      /* @__PURE__ */ jsx("span", { className: serverNameStyle, children: server.name }),
+      /* @__PURE__ */ jsx(ProtocolBadge, { protocol: server.protocol, version: server.protocolVersion })
+    ] }),
+    /* @__PURE__ */ jsx("code", { className: urlStyle, children: highlightVariables(server.url) }),
+    server.description && /* @__PURE__ */ jsx("p", { className: descriptionStyle, children: server.description }),
+    server.variables && Object.entries(server.variables).length > 0 && /* @__PURE__ */ jsx("div", { className: variablesStyle, children: Object.entries(server.variables).map(([name, variable]) => /* @__PURE__ */ jsxs("div", { className: varRowStyle, children: [
+      /* @__PURE__ */ jsx("code", { className: varNameStyle, children: name }),
+      variable.default && /* @__PURE__ */ jsxs("span", { className: varDefaultStyle, children: [
+        "= ",
+        variable.default
+      ] }),
+      variable.enum && variable.enum.length > 0 && /* @__PURE__ */ jsxs("span", { className: varEnumStyle, children: [
+        "enum: ",
+        variable.enum.join(" | ")
+      ] }),
+      variable.description && /* @__PURE__ */ jsx("span", { className: varDescStyle, children: variable.description })
+    ] }, name)) }),
+    /* @__PURE__ */ jsx(SecurityRequirementBadges, { requirements: server.securityRequirements ?? [] }),
+    /* @__PURE__ */ jsx(BindingsSection, { bindings: server.bindings, title: "Server Bindings" })
+  ] });
+}
+function ServerList({ servers }) {
+  const [selected, setSelected] = useState(0);
+  if (servers.length === 0) return null;
+  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$1, { children: [
+      /* @__PURE__ */ jsx("div", { className: tabStripStyle, role: "tablist", "aria-label": "Servers", children: servers.map((server, idx) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          role: "tab",
+          "aria-selected": idx === activeIndex,
+          className: cx(tabStyle, idx === activeIndex && tabActiveStyle),
+          onClick: () => setSelected(idx),
+          children: server.name
+        },
+        server.name
+      )) }),
+      /* @__PURE__ */ jsx(ServerCard, { server: servers[activeIndex] })
+    ] }) : /* @__PURE__ */ jsx(ServerCard, { server: servers[0] })
+  ] });
+}
+
+function detectSchemaFormat(schemaFormat) {
+  if (!schemaFormat) return "json";
+  const f = schemaFormat.toLowerCase();
+  if (f.includes("avro")) return "avro";
+  if (f.includes("protobuf") || f.includes("proto")) return "protobuf";
+  return "json";
+}
+function avroToJsonSchema(avro) {
+  return convert(avro);
+}
+function convert(node) {
+  if (typeof node === "string") return primitive(node);
+  if (Array.isArray(node)) {
+    const nonNull = node.filter((n) => n !== "null");
+    const nullable = node.length !== nonNull.length;
+    if (nonNull.length === 1) {
+      return { ...convert(nonNull[0]), nullable };
+    }
+    return { oneOf: nonNull.map(convert), nullable };
+  }
+  if (node && typeof node === "object") {
+    const obj = node;
+    const type = obj.type;
+    if (type === "record") {
+      const fields = obj.fields ?? [];
+      const properties = {};
+      const required = [];
+      for (const field of fields) {
+        const name = field.name;
+        const schema = convert(field.type);
+        if (field.doc) schema.description = field.doc;
+        if (field.default !== void 0) schema.default = field.default;
+        properties[name] = schema;
+        if (field.default === void 0 && !schema.nullable) required.push(name);
+      }
+      const result = { type: "object", properties };
+      if (obj.doc) result.description = obj.doc;
+      if (required.length > 0) result.required = required;
+      return result;
+    }
+    if (type === "enum") {
+      return { type: "string", enum: obj.symbols ?? [] };
+    }
+    if (type === "array") {
+      return { type: "array", items: convert(obj.items) };
+    }
+    if (type === "map") {
+      return { type: "object", additionalProperties: convert(obj.values) };
+    }
+    if (type === "fixed") {
+      return { type: "string", format: `fixed(${obj.size ?? "?"})` };
+    }
+    if (typeof type === "string") {
+      const base = primitive(type);
+      if (obj.logicalType) base.format = String(obj.logicalType);
+      return base;
+    }
+    if (type && typeof type === "object") return convert(type);
+  }
+  return { type: "object" };
+}
+const AVRO_PRIMITIVES = {
+  null: { type: "null" },
+  boolean: { type: "boolean" },
+  int: { type: "integer", format: "int32" },
+  long: { type: "integer", format: "int64" },
+  float: { type: "number", format: "float" },
+  double: { type: "number", format: "double" },
+  bytes: { type: "string", format: "byte" },
+  string: { type: "string" }
+};
+function primitive(name) {
+  return { ...AVRO_PRIMITIVES[name] ?? { type: name } };
+}
+
+function MessagePayload({ message, idx }) {
+  const rawPayload = message.payload;
+  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 })
+  ] });
+}
+function PayloadBody({
+  rawPayload,
+  schemaFormat,
+  message,
+  idx
+}) {
+  if (typeof rawPayload.$ref === "string") {
+    return /* @__PURE__ */ jsxs("div", { className: unresolvedRefStyle, role: "alert", children: [
+      /* @__PURE__ */ jsx(Icon, { name: "warning", size: "0.875rem" }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        "Unresolved reference: ",
+        /* @__PURE__ */ jsx("code", { className: unresolvedRefCodeStyle, children: rawPayload.$ref })
+      ] })
+    ] });
+  }
+  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,
+    {
+      tabs: [
+        {
+          id: `schema-${idx}`,
+          label: "Payload Schema",
+          content: /* @__PURE__ */ jsx(SchemaTree, { nodes: schemaToNodes(schema) })
+        },
+        {
+          id: `example-${idx}`,
+          label: "Example",
+          content: /* @__PURE__ */ jsx(MessageExample, { message, schema })
+        }
+      ]
+    }
+  );
+}
+function MessageExample({ message, schema }) {
+  const named = (message.examples ?? []).filter((ex) => ex.payload !== void 0).map((ex, i) => ({
+    name: ex.name ?? `example ${i + 1}`,
+    summary: ex.summary,
+    value: ex.payload
+  }));
+  const [selectedName, setSelectedName] = useState(named[0]?.name ?? "");
+  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$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)",
+  fontSize: "var(--omnispec-font-size-xxs)",
+  color: "var(--omnispec-fg-secondary)",
+  backgroundColor: "var(--omnispec-bg-tertiary)",
+  padding: "0.0625rem 0.375rem",
+  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",
+  gap: "0.5rem",
+  padding: "0.5rem 0.75rem",
+  borderRadius: "var(--omnispec-border-radius)",
+  backgroundColor: "color-mix(in srgb, var(--omnispec-color-warning) 12%, transparent)",
+  color: "var(--omnispec-color-warning)",
+  fontSize: "var(--omnispec-font-size-sm)"
+});
+const unresolvedRefCodeStyle = css({
+  fontFamily: "var(--omnispec-font-mono)",
+  fontSize: "var(--omnispec-font-size-xs)"
+});
+
+const actionLabels$1 = {
+  publish: "PUB",
+  subscribe: "SUB",
+  send: "SEND",
+  receive: "RECV"
+};
+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, onTagClick }) {
+  const primaryAction = channel.operations[0]?.action;
+  const primaryLabel = actionLabels$1[primaryAction] ?? primaryAction?.toUpperCase() ?? "";
+  const primaryColor = actionColors$1[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 }),
+        /* @__PURE__ */ jsxs("div", { className: bodyStyle, children: [
+          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$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$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: [
+                    "enum: ",
+                    paramEnum.map(String).join(" | ")
+                  ] })
+                ] }),
+                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$1, children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cx(actionBadgeBase$1, css({
+                    backgroundColor: actionColors$1[op.action] ?? "var(--omnispec-fg-muted)"
+                  })),
+                  children: actionLabels$1[op.action] ?? op.action.toUpperCase()
+                }
+              ),
+              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$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 || 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" })
+          ] }, idx))
+        ] })
+      ]
+    }
+  );
+}
+function messageLabel(message, index) {
+  return message.title ?? message.name ?? `Message ${index + 1}`;
+}
+function OperationMessages({ operation, idx }) {
+  const messages = operation.messages ?? [];
+  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$1, children: [
+    messages.length > 1 && /* @__PURE__ */ jsxs("div", { className: messageSelectorStyle, children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: `msg-select-${idx}`, className: messageSelectorLabelStyle, children: "Message" }),
+      /* @__PURE__ */ jsx(
+        "select",
+        {
+          id: `msg-select-${idx}`,
+          className: messageSelectStyle,
+          value: selectedIndex,
+          onChange: (e) => setSelectedIndex(Number(e.target.value)),
+          children: messages.map((m, i) => /* @__PURE__ */ jsx("option", { value: i, children: messageLabel(m, i) }, i))
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { className: messageCountStyle, children: [
+        messages.length,
+        " messages"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(MessageView, { message: active, idx })
+  ] });
+}
+function MessageView({ message, idx }) {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("h4", { className: sectionTitleStyle$1, children: [
+      "Message",
+      (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$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$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" })
+  ] });
+}
+const bodyStyle = css({
+  padding: "0.75rem 1rem",
+  [mq.desktop]: {
+    padding: "1rem 1.25rem"
+  }
+});
+const sectionStyle$1 = css({
+  marginBottom: "1.5rem"
+});
+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$1 = css({
+  display: "flex",
+  flexDirection: "column"
+});
+const paramRowStyle$1 = css({
+  padding: "0.75rem 0"
+});
+const paramHeaderStyle$1 = css({
+  display: "flex",
+  alignItems: "center",
+  gap: "0.5rem",
+  flexWrap: "wrap"
+});
+const paramNameStyle$1 = css({
+  fontSize: "var(--omnispec-font-size-sm)",
+  fontWeight: 700,
+  backgroundColor: "transparent",
+  padding: 0
+});
+const typeBadgeStyle$2 = css({
+  fontSize: "var(--omnispec-font-size-xs)",
+  fontWeight: 400
+});
+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$1 = css({
+  display: "flex",
+  flexWrap: "wrap",
+  gap: "0.375rem",
+  marginTop: "0.375rem"
+});
+const operationStyle = css({
+  padding: "0.75rem 0",
+  borderTop: "1px solid var(--omnispec-border-color)"
+});
+const opHeaderStyle$1 = css({
+  display: "flex",
+  alignItems: "center",
+  gap: "0.5rem",
+  marginBottom: "0.5rem"
+});
+const actionBadgeBase$1 = 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$1 = css({
+  fontSize: "var(--omnispec-font-size-sm)",
+  fontWeight: 700,
+  backgroundColor: "transparent",
+  padding: 0
+});
+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 opExternalDocsStyle = css({
+  marginBottom: "0.75rem"
+});
+const messageTitleStyle$1 = css({
+  fontWeight: 400,
+  color: "var(--omnispec-fg-primary)"
+});
+const messageSummaryStyle$1 = css({
+  margin: "0 0 0.5rem",
+  fontSize: "var(--omnispec-font-size-base)",
+  color: "var(--omnispec-fg-secondary)"
+});
+const contentTypeStyle$2 = 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 headersWrapStyle$1 = css({
+  marginTop: "1rem"
+});
+const messageSelectorStyle = css({
+  display: "flex",
+  alignItems: "center",
+  gap: "0.5rem",
+  flexWrap: "wrap",
+  marginBottom: "0.75rem"
+});
+const messageSelectorLabelStyle = css({
+  fontSize: "var(--omnispec-font-size-xs)",
+  fontWeight: 600,
+  color: "var(--omnispec-fg-muted)",
+  textTransform: "uppercase",
+  letterSpacing: "0.0313rem",
+  whiteSpace: "nowrap"
+});
+const messageSelectStyle = css({
+  padding: "0.375rem 0.625rem",
+  border: "1px solid var(--omnispec-input-border)",
+  borderRadius: "var(--omnispec-border-radius)",
+  backgroundColor: "var(--omnispec-input-bg)",
+  color: "var(--omnispec-fg-primary)",
+  fontSize: "var(--omnispec-font-size-sm)",
+  fontFamily: "var(--omnispec-font-mono)"
+});
+const messageCountStyle = css({
+  fontSize: "var(--omnispec-font-size-xs)",
+  color: "var(--omnispec-fg-muted)"
+});
+const correlationIdStyle = css({
+  display: "flex",
+  alignItems: "center",
+  gap: "0.5rem",
+  flexWrap: "wrap",
+  marginTop: "0.75rem"
+});
+const correlationIdLabelStyle = css({
+  fontSize: "var(--omnispec-font-size-xs)",
+  fontWeight: 700,
+  color: "var(--omnispec-fg-primary)",
+  fontFamily: "var(--omnispec-font-mono)"
+});
+const correlationIdLocationStyle = 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 correlationIdDescStyle = css({
+  fontSize: "var(--omnispec-font-size-xs)",
+  color: "var(--omnispec-fg-secondary)"
+});
+const replyStyle$1 = css({
+  marginTop: "1rem",
+  paddingLeft: "0.75rem",
+  borderLeft: "0.125rem solid var(--omnispec-border-color)"
+});
+const replyTitleStyle = css({
+  margin: "0 0 0.5rem",
+  fontSize: "var(--omnispec-font-size-md)",
+  fontWeight: 700,
+  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",
+  gap: "0.25rem",
+  marginBottom: "0.5rem"
+});
+const tagChipStyle = 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 = 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$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(
+        Collapsible,
+        {
+          title: /* @__PURE__ */ jsx("code", { className: schemaNameStyle, children: name }),
+          defaultOpen: false,
+          children: [
+            message.title && /* @__PURE__ */ jsx("p", { className: messageSummaryStyle, children: message.title }),
+            message.summary && /* @__PURE__ */ jsx("p", { className: messageSummaryStyle, children: message.summary }),
+            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__ */ jsxs("div", { className: headersWrapStyle, children: [
+              /* @__PURE__ */ jsx("h4", { className: headersTitleStyle, children: "Headers" }),
+              /* @__PURE__ */ jsx(SchemaTree, { nodes: schemaToNodes(message.headers) })
+            ] })
+          ]
+        }
+      ) }, name)) })
+    ] }),
+    schemas.length > 0 && /* @__PURE__ */ jsxs("div", { className: `omnispec-async-components ${containerStyle$1}`, id: "schemas", children: [
+      /* @__PURE__ */ jsx("h2", { className: titleStyle$2, children: "Schemas" }),
+      /* @__PURE__ */ jsx("div", { className: schemaWrapperStyle, children: schemas.map(([name, schema]) => /* @__PURE__ */ jsx("div", { className: schemaStyle, id: `schema-${name}`, children: /* @__PURE__ */ jsx(
+        Collapsible,
+        {
+          title: /* @__PURE__ */ jsx("code", { className: schemaNameStyle, children: name }),
+          defaultOpen: false,
+          children: /* @__PURE__ */ jsx(SchemaTree, { nodes: schemaToNodes(schema) })
+        }
+      ) }, name)) })
+    ] })
+  ] });
+}
+const containerStyle$1 = css({
+  marginTop: "2rem",
+  paddingTop: "1.5rem",
+  borderTop: "1px solid var(--omnispec-border-color)",
+  [mq.mobile]: {
+    borderTop: "none",
+    marginTop: "1.5rem",
+    paddingTop: "1rem"
+  }
+});
+const titleStyle$2 = css({
+  margin: "0 0 1rem",
+  fontSize: "var(--omnispec-h2-font-size)",
+  color: "var(--omnispec-h2-color)",
+  fontWeight: 700
+});
+const schemaWrapperStyle = css({
+  border: "1px solid var(--omnispec-border-color)",
+  borderRadius: "0.5rem",
+  padding: "1.5rem 1rem"
+});
+const schemaStyle = css({
+  marginBottom: "0.5rem"
+});
+const schemaNameStyle = css({
+  fontFamily: "var(--omnispec-font-mono)",
+  fontSize: "var(--omnispec-font-size-base)",
+  fontWeight: 600,
+  color: "var(--omnispec-color-primary)",
+  backgroundColor: "transparent",
+  padding: 0,
+  "&:hover": {
+    textDecoration: "underline"
+  }
+});
+const messageSummaryStyle = css({
+  margin: "0 0 0.5rem",
+  fontSize: "var(--omnispec-font-size-sm)",
+  color: "var(--omnispec-fg-secondary)"
+});
+const contentTypeStyle = css({
+  display: "block",
+  fontFamily: "var(--omnispec-font-mono)",
+  fontSize: "var(--omnispec-font-size-xs)",
+  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 }) {
+  const entries = Object.entries(securitySchemes ?? {});
+  if (entries.length === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { className: `omnispec-async-security ${containerStyle}`, id: "security", children: [
+    /* @__PURE__ */ jsx("h2", { className: titleStyle$1, children: "Security Schemes" }),
+    /* @__PURE__ */ jsx("div", { className: listStyle, children: entries.map(([name, scheme]) => /* @__PURE__ */ jsxs("div", { className: cardStyle, id: `security-${name}`, children: [
+      /* @__PURE__ */ jsxs("div", { className: headerStyle$1, children: [
+        /* @__PURE__ */ jsx(Icon, { name: "lock", size: "0.875rem" }),
+        /* @__PURE__ */ jsx("code", { className: nameStyle, children: name }),
+        /* @__PURE__ */ jsx("span", { className: typeBadgeStyle, children: scheme.type })
+      ] }),
+      scheme.description && /* @__PURE__ */ jsx("p", { className: descStyle$1, children: scheme.description }),
+      /* @__PURE__ */ jsx(
+        FieldRows,
+        {
+          fields: Object.entries(scheme).filter(
+            ([key, value]) => !SPECIAL_KEYS.has(key) && value !== void 0 && typeof value !== "object"
+          )
+        }
+      ),
+      scheme.flows && Object.keys(scheme.flows).length > 0 && /* @__PURE__ */ jsx("div", { className: flowsStyle, children: Object.entries(scheme.flows).map(([flowName, flow]) => /* @__PURE__ */ jsx(OAuthFlow, { name: flowName, flow }, flowName)) })
+    ] }, name)) })
+  ] });
+}
+function OAuthFlow({ name, flow }) {
+  const scopes = flow.availableScopes ?? flow.scopes ?? {};
+  const urls = Object.entries(flow).filter(
+    ([key, value]) => key !== "availableScopes" && key !== "scopes" && typeof value === "string"
+  );
+  return /* @__PURE__ */ jsxs("div", { className: flowCardStyle, children: [
+    /* @__PURE__ */ jsx("div", { className: flowNameStyle, children: name }),
+    /* @__PURE__ */ jsx(FieldRows, { fields: urls }),
+    Object.keys(scopes).length > 0 && /* @__PURE__ */ jsxs("div", { className: scopesStyle, children: [
+      /* @__PURE__ */ jsx("span", { className: scopesLabelStyle, children: "Scopes" }),
+      /* @__PURE__ */ jsx("ul", { className: scopeListStyle, children: Object.entries(scopes).map(([scope, desc]) => /* @__PURE__ */ jsxs("li", { className: scopeRowStyle, children: [
+        /* @__PURE__ */ jsx("code", { className: scopeNameStyle, children: scope }),
+        desc && /* @__PURE__ */ jsx("span", { className: scopeDescStyle, children: desc })
+      ] }, scope)) })
+    ] })
+  ] });
+}
+const containerStyle = css({
+  marginTop: "1.5rem",
+  paddingTop: "1rem",
+  [mq.desktop]: {
+    marginTop: "2rem",
+    paddingTop: "1.5rem",
+    borderTop: "1px solid var(--omnispec-border-color)"
+  }
+});
+const titleStyle$1 = css({
+  margin: "0 0 1rem",
+  fontSize: "var(--omnispec-h2-font-size)",
+  color: "var(--omnispec-h2-color)",
+  fontWeight: 700
+});
+const listStyle = css({
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.75rem"
+});
+const cardStyle = css({
+  padding: "0.75rem 0.875rem",
+  borderRadius: "var(--omnispec-border-radius)",
+  backgroundColor: "var(--omnispec-bg-secondary)"
+});
+const headerStyle$1 = css({
+  display: "flex",
+  alignItems: "center",
+  gap: "0.5rem",
+  marginBottom: "0.375rem"
+});
+const nameStyle = css({
+  fontFamily: "var(--omnispec-font-mono)",
+  fontSize: "var(--omnispec-font-size-sm)",
+  fontWeight: 700,
+  color: "var(--omnispec-color-primary)",
+  backgroundColor: "transparent",
+  padding: 0
+});
+const typeBadgeStyle = css({
+  fontSize: "var(--omnispec-font-size-xxs)",
+  fontFamily: "var(--omnispec-font-mono)",
+  color: "var(--omnispec-fg-secondary)",
+  backgroundColor: "var(--omnispec-bg-tertiary)",
+  padding: "0.0625rem 0.375rem",
+  borderRadius: "var(--omnispec-border-radius)"
+});
+const descStyle$1 = css({
+  margin: "0 0 0.5rem",
+  fontSize: "var(--omnispec-font-size-sm)",
+  color: "var(--omnispec-fg-secondary)"
+});
+const flowsStyle = css({
+  marginTop: "0.625rem",
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.5rem"
+});
+const flowCardStyle = css({
+  padding: "0.5rem 0.625rem",
+  borderRadius: "var(--omnispec-border-radius)",
+  backgroundColor: "var(--omnispec-bg-tertiary)"
+});
+const flowNameStyle = css({
+  fontFamily: "var(--omnispec-font-mono)",
+  fontSize: "var(--omnispec-font-size-xs)",
+  fontWeight: 700,
+  color: "var(--omnispec-fg-primary)"
+});
+const scopesStyle = css({
+  marginTop: "0.375rem"
+});
+const scopesLabelStyle = css({
+  fontSize: "var(--omnispec-font-size-xxs)",
+  fontWeight: 600,
+  textTransform: "uppercase",
+  letterSpacing: "0.05em",
+  color: "var(--omnispec-fg-muted)"
+});
+const scopeListStyle = css({
+  listStyle: "none",
+  margin: "0.25rem 0 0",
+  padding: 0,
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.125rem"
+});
+const scopeRowStyle = css({
+  display: "flex",
+  gap: "0.5rem",
+  alignItems: "baseline",
+  flexWrap: "wrap"
+});
+const scopeNameStyle = css({
+  fontFamily: "var(--omnispec-font-mono)",
+  fontSize: "var(--omnispec-font-size-xs)",
+  color: "var(--omnispec-color-primary)"
+});
+const scopeDescStyle = css({
+  fontSize: "var(--omnispec-font-size-xs)",
+  color: "var(--omnispec-fg-secondary)"
+});
+
+const UNTAGGED_LABEL = "Untagged";
+function slugify(value) {
+  return value.trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "") || "tag";
+}
+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);
+  }
+  return Array.from(names);
+}
+function hasAnyTags(channels) {
+  return channels.some((ch) => channelTagNames(ch).length > 0);
+}
+function groupChannelsByTag(channels, specTags) {
+  const byName = /* @__PURE__ */ new Map();
+  const untagged = [];
+  for (const channel of channels) {
+    const names = channelTagNames(channel);
+    if (names.length === 0) {
+      untagged.push(channel);
+      continue;
+    }
+    for (const name of names) {
+      const list = byName.get(name) ?? [];
+      list.push(channel);
+      byName.set(name, list);
+    }
+  }
+  const declared = (specTags ?? []).map((t) => t.name);
+  const operationOnly = Array.from(byName.keys()).filter((name) => !declared.includes(name)).sort();
+  const orderedNames = [...declared.filter((name) => byName.has(name)), ...operationOnly];
+  const tagMetaByName = new Map((specTags ?? []).map((t) => [t.name, t]));
+  const usedIds = /* @__PURE__ */ new Set();
+  const uniqueId = (base) => {
+    let id = base;
+    let n = 2;
+    while (usedIds.has(id)) id = `${base}-${n++}`;
+    usedIds.add(id);
+    return id;
+  };
+  const groups = orderedNames.map((name) => ({
+    tag: tagMetaByName.get(name) ?? { name },
+    id: uniqueId(slugify(name)),
+    label: tagMetaByName.get(name)?.displayName ?? name,
+    channels: byName.get(name) ?? []
+  }));
+  if (untagged.length > 0) {
+    groups.push({ tag: void 0, id: uniqueId("untagged"), label: UNTAGGED_LABEL, channels: untagged });
+  }
+  return groups;
+}
+
+function TagGroupHeader({ group }) {
+  return /* @__PURE__ */ jsxs("div", { className: headerStyle, children: [
+    /* @__PURE__ */ jsxs("h3", { className: titleStyle, children: [
+      group.label,
+      /* @__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__ */ jsx("div", { className: docsStyle, children: /* @__PURE__ */ jsx(ExternalDocsLink, { externalDocs: group.tag.externalDocs, context: group.label }) })
+  ] });
+}
+const headerStyle = css({
+  marginBottom: "0.75rem",
+  paddingBottom: "0.5rem",
+  borderBottom: "0.125rem solid var(--omnispec-border-color)"
+});
+const titleStyle = css({
+  display: "flex",
+  alignItems: "center",
+  gap: "0.625rem",
+  margin: 0,
+  fontSize: "var(--omnispec-h3-font-size)",
+  fontWeight: 800,
+  color: "var(--omnispec-h3-color)"
+});
+const countStyle = css({
+  fontSize: "var(--omnispec-font-size-xs)",
+  fontWeight: 500,
+  color: "var(--omnispec-fg-muted)",
+  backgroundColor: "var(--omnispec-bg-tertiary)",
+  padding: "0.125rem 0.5rem",
+  borderRadius: "0.625rem",
+  fontFamily: "var(--omnispec-font-mono)"
+});
+const descStyle = css({
+  marginTop: "0.5rem",
+  fontSize: "var(--omnispec-font-size-sm)",
+  color: "var(--omnispec-fg-secondary)",
+  lineHeight: 1.6
+});
+const docsStyle = css({
+  marginTop: "0.5rem"
+});
+
+function AsyncApiSpec({
+  spec,
+  theme,
+  layout = "sidebar",
+  sidebarPosition = "left",
+  defaultExpandOperations = false,
+  displayMode,
+  downloadLink,
+  sidebarNav,
+  slots = {},
+  schemaStyle,
+  pro,
+  onSpecLoaded,
+  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);
+  const [expandGeneration, setExpandGeneration] = useState(0);
+  const [navGrouping, setNavGrouping] = useState("channel");
+  const handleToggleExpand = useCallback(() => {
+    setAllExpanded((prev) => !prev);
+    setExpandGeneration((prev) => prev + 1);
+  }, []);
+  useMemo(() => {
+    if (parsedSpec && onSpecLoaded) {
+      const major = parseInt(parsedSpec.specVersion.split(".")[0], 10);
+      onSpecLoaded({
+        title: parsedSpec.title,
+        version: parsedSpec.version,
+        type: major >= 3 ? SpecType.ASYNCAPI_3 : SpecType.ASYNCAPI_2
+      });
+    }
+  }, [parsedSpec, onSpecLoaded]);
+  const filteredChannels = useMemo(() => {
+    if (!parsedSpec || !searchQuery.trim()) return parsedSpec?.channels ?? [];
+    const q = searchQuery.toLowerCase();
+    return parsedSpec.channels.filter(
+      (ch) => ch.address.toLowerCase().includes(q) || ch.description?.toLowerCase().includes(q) || ch.operations.some(
+        (op) => op.operationId?.toLowerCase().includes(q) || op.summary?.toLowerCase().includes(q) || (op.tags ?? []).some((t) => t.name.toLowerCase().includes(q))
+      )
+    );
+  }, [parsedSpec, searchQuery]);
+  const grouped = useMemo(() => hasAnyTags(filteredChannels), [filteredChannels]);
+  const tagGroups = useMemo(
+    () => grouped ? groupChannelsByTag(filteredChannels, parsedSpec?.tags) : [],
+    [grouped, filteredChannels, parsedSpec]
+  );
+  const channelDomId = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    if (grouped) {
+      for (const group of tagGroups) {
+        for (const ch of group.channels) {
+          if (!map.has(ch.name)) map.set(ch.name, `${group.id}-channel-${ch.name}`);
+        }
+      }
+    } else {
+      for (const ch of filteredChannels) map.set(ch.name, `channel-${ch.name}`);
+    }
+    return map;
+  }, [grouped, tagGroups, filteredChannels]);
+  const operationDomId = useCallback(
+    (channelName, idx) => `${channelDomId.get(channelName) ?? `channel-${channelName}`}-op-${idx}`,
+    [channelDomId]
+  );
+  const opToCard = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const ch of filteredChannels) {
+      const card = channelDomId.get(ch.name) ?? `channel-${ch.name}`;
+      ch.operations.forEach((_, idx) => map.set(`${card}-op-${idx}`, card));
+    }
+    return map;
+  }, [filteredChannels, channelDomId]);
+  const hasOperations = useMemo(
+    () => filteredChannels.some((ch) => ch.operations.length > 0),
+    [filteredChannels]
+  );
+  const navItems = useMemo(() => {
+    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) => {
+      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),
+        label: op.operationId ?? op.summary ?? `${actionLabel(op.action)} ${ch.address}`,
+        badge: actionLabel(op.action),
+        badgeColor: actionColor(op.action)
+      }))
+    );
+    const tagGroupNavItem = (group) => ({
+      id: `taggroup-${group.id}`,
+      label: group.label,
+      badge: String(group.channels.length),
+      children: group.channels.map((ch) => channelNavItem(ch, `${group.id}-`))
+    });
+    const channelChildren = navGrouping === "operation" ? operationNavItems() : grouped ? nestByTagGroups(tagGroups, parsedSpec.tagGroups, tagGroupNavItem) : filteredChannels.map((ch) => channelNavItem(ch, ""));
+    const items = [];
+    if (parsedSpec.servers.length > 0) {
+      items.push({ id: "servers", label: "Servers" });
+    }
+    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",
+        label: "Messages",
+        children: Object.keys(parsedSpec.components.messages).map((name) => ({
+          id: `message-${name}`,
+          label: name
+        }))
+      });
+    }
+    if (Object.keys(parsedSpec.components.schemas).length > 0) {
+      items.push({
+        id: "schemas",
+        label: "Schemas",
+        children: Object.keys(parsedSpec.components.schemas).map((name) => ({
+          id: `schema-${name}`,
+          label: name
+        }))
+      });
+    }
+    if (Object.keys(parsedSpec.components.securitySchemes).length > 0) {
+      items.push({ id: "security", label: "Security Schemes" });
+    }
+    return items;
+  }, [parsedSpec, grouped, tagGroups, filteredChannels, navGrouping, operationDomId, searchQuery]);
+  const { navigateTo } = useHashScroll(filteredChannels.length);
+  const handleNavSelect = useCallback((id) => {
+    const cardId = opToCard.get(id);
+    if (cardId) {
+      requestExpand(cardId);
+      navigateTo(id);
+      return;
+    }
+    navigateTo(id);
+  }, [navigateTo, opToCard]);
+  const navSectionIds = useMemo(() => flattenNavItemIds(navItems), [navItems]);
+  const activeSection = useScrollSpy(navSectionIds);
+  if (state.status === "loading") {
+    return /* @__PURE__ */ jsx(ThemeProvider, { theme, children: /* @__PURE__ */ jsx("div", { className: `omnispec-asyncapi ${className ?? ""}`, children: /* @__PURE__ */ jsx(LoadingScreen, {}) }) });
+  }
+  if (state.status === "error") {
+    return /* @__PURE__ */ jsx(
+      SpecStatusScreen,
+      {
+        theme,
+        layout,
+        sidebarPosition,
+        slots,
+        sidebarNav,
+        premiumThemingEnabled: pro?.premiumThemingEnabled ?? false,
+        className: `omnispec-asyncapi ${className ?? ""}`,
+        children: /* @__PURE__ */ jsx(ErrorMessage, { title: "Failed to load specification", message: state.error })
+      }
+    );
+  }
+  if (!parsedSpec) return null;
+  const specNav = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    /* @__PURE__ */ jsx(
+      SearchBar,
+      {
+        placeholder: "Filter channels...",
+        onSearch: setSearchQuery
+      }
+    ),
+    hasOperations && /* @__PURE__ */ jsxs("div", { className: groupToggleStyle, role: "group", "aria-label": "Sidebar grouping", children: [
+      /* @__PURE__ */ jsx("span", { className: groupToggleLabelStyle, children: "Group by" }),
+      /* @__PURE__ */ jsxs("div", { className: groupToggleButtonsStyle, children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: cx(groupToggleButtonStyle, navGrouping === "channel" && groupToggleActiveStyle),
+            "aria-pressed": navGrouping === "channel",
+            "aria-label": "Group by channel",
+            onClick: () => setNavGrouping("channel"),
+            children: "Channel"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: cx(groupToggleButtonStyle, navGrouping === "operation" && groupToggleActiveStyle),
+            "aria-pressed": navGrouping === "operation",
+            "aria-label": "Group by operation",
+            onClick: () => setNavGrouping("operation"),
+            children: "Operation"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      NavTree,
+      {
+        items: navItems,
+        activeId: activeSection,
+        onSelect: handleNavSelect
+      }
+    )
+  ] });
+  const sidebar = buildSidebar(sidebarNav, specNav);
+  const resolvedDownloadLink = resolveDownloadLink(downloadLink, spec);
+  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,
+      sidebarPosition,
+      sidebar,
+      sidebarHeader: slots.sidebarHeader,
+      sidebarFooter: slots.sidebarFooter,
+      header: slots.header,
+      footer: slots.footer,
+      children: [
+        /* @__PURE__ */ jsx(
+          SpecToolbar,
+          {
+            overview: /* @__PURE__ */ jsx(AsyncOverview, { spec: parsedSpec }),
+            expandLabel: "channels",
+            allExpanded,
+            onToggleExpand: handleToggleExpand,
+            downloadLink: resolvedDownloadLink
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { id: "servers", children: /* @__PURE__ */ jsx(ServerList, { servers: parsedSpec.servers }) }),
+        /* @__PURE__ */ jsxs("div", { id: "channels", children: [
+          /* @__PURE__ */ jsx("h2", { className: css({ margin: "0 0 1rem", fontSize: "var(--omnispec-h2-font-size)", fontWeight: "var(--omnispec-h2-font-weight)", color: "var(--omnispec-h2-color)" }), children: "Channels" }),
+          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(
+              ChannelCard,
+              {
+                id: `${group.id}-channel-${channel.name}`,
+                channel,
+                displayMode: resolvedDisplayMode,
+                expandAll: allExpanded,
+                expandGeneration,
+                onTagClick: setSearchQuery
+              },
+              `${group.id}-${channel.name}`
+            ))
+          ] }, group.id)) : filteredChannels.map((channel) => /* @__PURE__ */ jsx(
+            ChannelCard,
+            {
+              id: `channel-${channel.name}`,
+              channel,
+              displayMode: resolvedDisplayMode,
+              expandAll: allExpanded,
+              expandGeneration,
+              onTagClick: setSearchQuery
+            },
+            channel.name
+          ))
+        ] }),
+        /* @__PURE__ */ jsx(ComponentsSection, { components: parsedSpec.components }),
+        /* @__PURE__ */ jsx(SecuritySchemesSection, { securitySchemes: parsedSpec.components.securitySchemes })
+      ]
+    }
+  ) }) }) }) }) });
+}
+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();
+  for (const g of groups) if (g.tag?.name) byTagName.set(g.tag.name, g);
+  const used = /* @__PURE__ */ new Set();
+  const grouped = xTagGroups.map((xg) => {
+    const children = xg.tags.map((t) => byTagName.get(t)).filter((g) => !!g);
+    children.forEach((g) => used.add(g));
+    return {
+      id: `xtaggroup-${xg.name.trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "") || "group"}`,
+      label: xg.name,
+      children: children.map(toNav)
+    };
+  }).filter((item) => (item.children?.length ?? 0) > 0);
+  const leftover = groups.filter((g) => !used.has(g)).map(toNav);
+  return [...grouped, ...leftover];
+}
+const emptyStateStyle = css({
+  fontSize: "var(--omnispec-font-size-sm)",
+  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",
+  gap: "0.5rem",
+  padding: "0.5rem 0.75rem 0.25rem",
+  flexWrap: "wrap"
+});
+const groupToggleLabelStyle = css({
+  fontSize: "var(--omnispec-font-size-xxs)",
+  fontWeight: 600,
+  textTransform: "uppercase",
+  letterSpacing: "0.05em",
+  color: "var(--omnispec-fg-muted)"
+});
+const groupToggleButtonsStyle = css({
+  display: "inline-flex",
+  borderRadius: "var(--omnispec-border-radius)",
+  backgroundColor: "var(--omnispec-bg-tertiary)",
+  padding: "0.125rem"
+});
+const groupToggleButtonStyle = css({
+  border: "none",
+  background: "transparent",
+  color: "var(--omnispec-fg-secondary)",
+  fontSize: "var(--omnispec-font-size-xs)",
+  padding: "0.125rem 0.625rem",
+  borderRadius: "calc(var(--omnispec-border-radius) - 1px)",
+  cursor: "pointer"
+});
+const groupToggleActiveStyle = css({
+  backgroundColor: "var(--omnispec-bg-primary)",
+  color: "var(--omnispec-fg-primary)",
+  fontWeight: 600,
+  boxShadow: "var(--omnispec-shadow-sm, 0 1px 0.125rem rgba(0,0,0,0.1))"
+});
+const tagSectionStyle = css({
+  marginBottom: "2rem"
+});
+
+export { AsyncApiSpec };
+//# sourceMappingURL=AsyncApiSpec-BzhfaQ_T.js.map