@apiboost/omnispec 1.0.0 → 1.1.0-next.1

package/dist/cjs/chunks/AsyncApiSpec-CHvM1swf.js

@@ -0,0 +1,1880 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var css = require('@emotion/css');
+var useSpecFetcher = require('./useSpecFetcher-BKz1jHTV.js');
+var Collapsible = require('./Collapsible-Jlb_vtdW.js');
+var ErrorBoundary = require('./ErrorBoundary-c1piU8da.js');
+var refResolver = require('./ref-resolver-0A8GNRI3.js');
+require('@emotion/styled');
+require('./ssrf-guard-B6T2A7Ho.js');
+
+function unionTags(a, b) {
+  if (!a && !b) return void 0;
+  const byName = /* @__PURE__ */ new Map();
+  for (const tag of [...a ?? [], ...b ?? []]) {
+    if (!byName.has(tag.name)) byName.set(tag.name, tag);
+  }
+  return Array.from(byName.values());
+}
+function mergeSchema(base, override) {
+  if (!base) return override;
+  if (!override) return base;
+  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 === "tags") {
+      result.tags = unionTags(base.tags, value);
+    } else 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) {
+  if (!msg.traits || msg.traits.length === 0) return msg;
+  let acc = {};
+  for (const trait of msg.traits) acc = mergeMessageLayer(acc, trait);
+  return mergeMessageLayer(acc, msg);
+}
+function mergeOperationLayer(base, override) {
+  const result = { ...base };
+  for (const [key, value] of Object.entries(override)) {
+    if (key === "traits" || value === void 0) continue;
+    if (key === "tags") {
+      result.tags = unionTags(base.tags, value);
+    } else if (key === "bindings") {
+      result.bindings = { ...base.bindings ?? {}, ...value };
+    } else {
+      result[key] = value;
+    }
+  }
+  return result;
+}
+function applyOperationTraits(op) {
+  if (!op.traits || op.traits.length === 0) return op;
+  let acc = {};
+  for (const trait of op.traits) acc = mergeOperationLayer(acc, trait);
+  return mergeOperationLayer(acc, op);
+}
+async function parseAsyncApiSpec(specInput) {
+  const raw = typeof specInput === "string" ? parseSpecString(specInput) : specInput;
+  const api = await refResolver.resolveRefs(raw);
+  const majorVersion = parseInt(api.asyncapi.split(".")[0], 10);
+  const isV3 = majorVersion >= 3;
+  const servers = extractServers(api, raw);
+  const rawApi = raw;
+  const channels = isV3 ? extractChannelsV3(api, rawApi) : extractChannelsV2(api);
+  const components = extractComponents(api);
+  const 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"]
+  };
+}
+function extractServers(api, rawApi) {
+  if (!api.servers) return [];
+  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),
+    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) {
+  if (!api.channels) return [];
+  return Object.entries(api.channels).map(([channelName, ch]) => {
+    const operations = [];
+    if (ch.publish) {
+      operations.push(convertOperationV2("publish", ch.publish));
+    }
+    if (ch.subscribe) {
+      operations.push(convertOperationV2("subscribe", ch.subscribe));
+    }
+    const raw = ch;
+    return {
+      name: channelName,
+      address: channelName,
+      description: ch.description,
+      operations: operations.filter((op) => !op.xInternal),
+      parameters: ch.parameters,
+      bindings: ch.bindings,
+      xInternal: raw["x-internal"]
+    };
+  });
+}
+function convertOperationV2(action, rawOp) {
+  const op = applyOperationTraits(rawOp);
+  const messages = [];
+  if (op.message) {
+    if ("oneOf" in op.message) {
+      for (const m of op.message.oneOf) {
+        messages.push(convertMessage(m));
+      }
+    } else {
+      messages.push(convertMessage(op.message));
+    }
+  }
+  const raw = op;
+  return {
+    action,
+    operationId: op.operationId,
+    summary: op.summary,
+    description: op.description,
+    messages,
+    message: messages[0],
+    tags: op.tags,
+    bindings: op.bindings,
+    securityNames: deriveSecurityNames(void 0, op.security),
+    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 ? refResolver.decodeJsonPointerSegment(last) : void 0;
+  }
+  const address = resolvedChannel?.address;
+  if (address && addressToName.has(address)) {
+    return addressToName.get(address);
+  }
+  return void 0;
+}
+function extractChannelsV3(api, rawApi) {
+  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,
+      xInternal: raw["x-internal"]
+    });
+  }
+  if (api.operations) {
+    for (const [opKey, resolvedOp] of Object.entries(api.operations)) {
+      const op = applyOperationTraits(resolvedOp);
+      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));
+        }
+        return out;
+      };
+      const messages = collectMessages(op.messages);
+      const replyMessages = collectMessages(op.reply?.messages);
+      const raw = op;
+      const operation = {
+        action: op.action,
+        summary: op.summary,
+        description: op.description,
+        messages,
+        message: messages[0],
+        tags: op.tags,
+        bindings: op.bindings,
+        securityNames: deriveSecurityNames(rawOp?.security, op.security),
+        reply: replyMessages.length > 0 ? { messages: replyMessages } : void 0,
+        xBadges: raw["x-badges"],
+        xInternal: raw["x-internal"]
+      };
+      if (operation.xInternal) continue;
+      if (channelName && channelMap.has(channelName)) {
+        channelMap.get(channelName).operations.push(operation);
+      }
+    }
+  }
+  return Array.from(channelMap.values());
+}
+function convertMessage(rawMsg) {
+  const msg = applyMessageTraits(rawMsg);
+  return {
+    name: msg.name,
+    title: msg.title,
+    summary: msg.summary,
+    description: msg.description,
+    contentType: msg.contentType,
+    schemaFormat: msg.schemaFormat,
+    payload: msg.payload,
+    headers: msg.headers,
+    correlationId: msg.correlationId,
+    tags: msg.tags,
+    examples: msg.examples,
+    bindings: msg.bindings
+  };
+}
+function extractComponents(api) {
+  const components = api.components;
+  const rawMessages = api.components?.messages ?? {};
+  const messages = {};
+  for (const [name, msg] of Object.entries(rawMessages)) {
+    messages[name] = convertMessage(msg);
+  }
+  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(refResolver.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 parseSpecString(input) {
+  const trimmed = input.trim();
+  if (trimmed.startsWith("{")) {
+    try {
+      return JSON.parse(trimmed);
+    } catch {
+    }
+  }
+  return refResolver.parse(trimmed);
+}
+
+function useAsyncApiSpec(spec) {
+  const parser = React.useCallback(async (raw) => {
+    return parseAsyncApiSpec(raw);
+  }, []);
+  return useSpecFetcher.useSpecFetcher(spec, parser);
+}
+
+const containerStyle$4 = css.css({
+  marginBottom: "2rem",
+  paddingBottom: "1.5rem",
+  borderBottom: "1px solid var(--omnispec-border-color)"
+});
+const titleStyle$5 = css.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.css({
+  fontSize: "var(--omnispec-font-size-sm)",
+  color: "var(--omnispec-fg-muted)",
+  marginLeft: "0.75rem",
+  fontFamily: "var(--omnispec-font-mono)"
+});
+const specBadgeStyle = css.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.css({
+  fontSize: "var(--omnispec-font-size-sm)",
+  color: "var(--omnispec-fg-secondary)",
+  marginTop: "0.25rem"
+});
+const linkStyle = css.css({
+  color: "var(--omnispec-fg-link)",
+  textDecoration: "none",
+  "&:hover": {
+    textDecoration: "underline"
+  }
+});
+function AsyncOverview({ spec }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: css.cx("omnispec-async-overview", containerStyle$4), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h1", { className: titleStyle$5, children: spec.title }),
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: versionStyle$1, children: [
+      "v",
+      spec.version
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: specBadgeStyle, children: [
+      "AsyncAPI ",
+      spec.specVersion
+    ] }),
+    spec.description && /* @__PURE__ */ jsxRuntime.jsx(Collapsible.MarkdownRenderer, { content: spec.description }),
+    spec.contact && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: metaStyle, children: [
+      spec.contact.name && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        "Contact: ",
+        spec.contact.name
+      ] }),
+      spec.contact.email && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        " <",
+        /* @__PURE__ */ jsxRuntime.jsx("a", { href: `mailto:${spec.contact.email}`, className: linkStyle, children: spec.contact.email }),
+        ">"
+      ] }),
+      spec.contact.url && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        " \xB7 ",
+        /* @__PURE__ */ jsxRuntime.jsx("a", { href: spec.contact.url, target: "_blank", rel: "noopener noreferrer", className: linkStyle, children: spec.contact.url })
+      ] })
+    ] }),
+    spec.license && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: metaStyle, children: [
+      "License: ",
+      spec.license.url ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: spec.license.url, target: "_blank", rel: "noopener noreferrer", className: linkStyle, children: spec.license.name }) : spec.license.name
+    ] }),
+    spec.externalDocs && /* @__PURE__ */ jsxRuntime.jsx("div", { className: metaStyle, children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: spec.externalDocs.url, target: "_blank", rel: "noopener noreferrer", className: linkStyle, children: spec.externalDocs.description ?? "External Documentation" }) })
+  ] });
+}
+
+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.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.css({
+  fontWeight: 400,
+  opacity: 0.8
+});
+function ProtocolBadge({ protocol, version }) {
+  const color = protocolColors[protocol.toLowerCase()] ?? "var(--omnispec-fg-muted)";
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: css.cx(badgeBase, css.css({ backgroundColor: color })), children: [
+    protocol.toUpperCase(),
+    version && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: versionStyle, children: [
+      " ",
+      version
+    ] })
+  ] });
+}
+
+function humanizeField(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 renderValue(value) {
+  if (value === null) return /* @__PURE__ */ jsxRuntime.jsx("span", { className: mutedStyle, children: "null" });
+  if (typeof value === "boolean") return /* @__PURE__ */ jsxRuntime.jsx("code", { className: codeStyle, children: value ? "true" : "false" });
+  if (typeof value === "number") return /* @__PURE__ */ jsxRuntime.jsx("code", { className: codeStyle, children: String(value) });
+  if (typeof value === "string") return /* @__PURE__ */ jsxRuntime.jsx("span", { children: value });
+  return /* @__PURE__ */ jsxRuntime.jsx("code", { className: jsonStyle, children: JSON.stringify(value) });
+}
+function FieldRows({ fields }) {
+  if (fields.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("dl", { className: listStyle$1, children: fields.map(([field, value]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: rowStyle$1, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("dt", { className: nameStyle$1, children: humanizeField(field) }),
+    /* @__PURE__ */ jsxRuntime.jsx("dd", { className: valueStyle, children: renderValue(value) })
+  ] }, field)) });
+}
+const listStyle$1 = css.css({
+  display: "grid",
+  gridTemplateColumns: "max-content 1fr",
+  gap: "0.25rem 1rem",
+  margin: "0.25rem 0 0"
+});
+const rowStyle$1 = css.css({ display: "contents" });
+const nameStyle$1 = css.css({
+  fontSize: "var(--omnispec-font-size-xs)",
+  fontWeight: 600,
+  color: "var(--omnispec-fg-secondary)"
+});
+const valueStyle = css.css({
+  fontSize: "var(--omnispec-font-size-xs)",
+  color: "var(--omnispec-fg-primary)",
+  margin: 0,
+  minWidth: 0,
+  wordBreak: "break-word"
+});
+const codeStyle = css.css({
+  fontFamily: "var(--omnispec-font-mono)",
+  fontSize: "var(--omnispec-font-size-xs)"
+});
+const jsonStyle = css.css({
+  fontFamily: "var(--omnispec-font-mono)",
+  fontSize: "var(--omnispec-font-size-xs)",
+  color: "var(--omnispec-fg-code)",
+  wordBreak: "break-all"
+});
+const mutedStyle = css.css({
+  color: "var(--omnispec-fg-muted)"
+});
+
+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__ */ jsxRuntime.jsxs("div", { className: containerStyle$3, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h4", { className: titleStyle$4, children: title }),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: protocolCardStyle, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: protocolHeaderStyle, children: /* @__PURE__ */ jsxRuntime.jsx(ProtocolBadge, { protocol }) }),
+        rows.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(FieldRows, { fields: rows }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: emptyStyle, children: "No binding fields." })
+      ] }, protocol);
+    }) })
+  ] });
+}
+const containerStyle$3 = css.css({
+  marginTop: "1rem"
+});
+const titleStyle$4 = css.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.css({
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.5rem"
+});
+const protocolCardStyle = css.css({
+  padding: "0.625rem 0.75rem",
+  borderRadius: "var(--omnispec-border-radius)",
+  backgroundColor: "var(--omnispec-bg-secondary)"
+});
+const protocolHeaderStyle = css.css({
+  marginBottom: "0.5rem"
+});
+const emptyStyle = css.css({
+  margin: 0,
+  fontSize: "var(--omnispec-font-size-xs)",
+  color: "var(--omnispec-fg-muted)"
+});
+
+function SecurityRequirementBadges({ names, label = "Security" }) {
+  if (!names || names.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: rowStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: labelStyle, children: label }),
+    names.map((name) => /* @__PURE__ */ jsxRuntime.jsxs("a", { href: `#security-${name}`, className: badgeStyle, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(useSpecFetcher.Icon, { name: "lock", size: "0.625rem", strokeWidth: 2.5 }),
+      name
+    ] }, name))
+  ] });
+}
+const rowStyle = css.css({
+  display: "flex",
+  alignItems: "center",
+  gap: "0.375rem",
+  flexWrap: "wrap",
+  marginTop: "0.5rem"
+});
+const labelStyle = css.css({
+  fontSize: "var(--omnispec-font-size-xxs)",
+  fontWeight: 600,
+  textTransform: "uppercase",
+  letterSpacing: "0.05em",
+  color: "var(--omnispec-fg-muted)"
+});
+const badgeStyle = css.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 containerStyle$2 = css.css({
+  marginBottom: "1.5rem"
+});
+const titleStyle$3 = css.css({
+  margin: "0 0 0.75rem",
+  fontSize: "var(--omnispec-h3-font-size)",
+  color: "var(--omnispec-h3-color)",
+  fontWeight: 600
+});
+const tabStripStyle = css.css({
+  display: "flex",
+  flexWrap: "wrap",
+  gap: "0.25rem",
+  marginBottom: "0.5rem"
+});
+const tabStyle = css.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.css({
+  backgroundColor: "var(--omnispec-color-primary)",
+  color: "#ffffff",
+  "&:hover": {
+    color: "#ffffff"
+  }
+});
+const cardStyle$1 = css.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.css({
+  display: "flex",
+  alignItems: "center",
+  gap: "0.5rem",
+  marginBottom: "0.375rem"
+});
+const serverNameStyle = css.css({
+  fontWeight: 600,
+  fontSize: "var(--omnispec-font-size-sm)",
+  color: "var(--omnispec-fg-primary)"
+});
+const urlStyle = css.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.css({
+  margin: "0.25rem 0 0",
+  fontSize: "var(--omnispec-font-size-xs)",
+  color: "var(--omnispec-fg-secondary)"
+});
+const variablesStyle = css.css({
+  marginTop: "0.5rem",
+  fontSize: "var(--omnispec-font-size-xs)"
+});
+const varRowStyle = css.css({
+  display: "flex",
+  gap: "0.375rem",
+  marginBottom: "0.125rem"
+});
+const varNameStyle = css.css({
+  fontFamily: "var(--omnispec-font-mono)",
+  color: "var(--omnispec-fg-primary)",
+  fontWeight: 600
+});
+const varDefaultStyle = css.css({
+  fontFamily: "var(--omnispec-font-mono)",
+  color: "var(--omnispec-fg-muted)"
+});
+const varDescStyle = css.css({
+  color: "var(--omnispec-fg-secondary)"
+});
+const varEnumStyle = css.css({
+  fontFamily: "var(--omnispec-font-mono)",
+  color: "var(--omnispec-color-info)"
+});
+const varTokenStyle = css.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__ */ jsxRuntime.jsx("span", { className: varTokenStyle, children: part.slice(1, -1) }, i) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: part }, i)
+  );
+}
+function ServerCard({ server }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cardStyle$1, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cardHeaderStyle, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: serverNameStyle, children: server.name }),
+      /* @__PURE__ */ jsxRuntime.jsx(ProtocolBadge, { protocol: server.protocol, version: server.protocolVersion })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("code", { className: urlStyle, children: highlightVariables(server.url) }),
+    server.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: descriptionStyle, children: server.description }),
+    server.variables && Object.entries(server.variables).length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: variablesStyle, children: Object.entries(server.variables).map(([name, variable]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: varRowStyle, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("code", { className: varNameStyle, children: name }),
+      variable.default && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: varDefaultStyle, children: [
+        "= ",
+        variable.default
+      ] }),
+      variable.enum && variable.enum.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: varEnumStyle, children: [
+        "enum: ",
+        variable.enum.join(" | ")
+      ] }),
+      variable.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: varDescStyle, children: variable.description })
+    ] }, name)) }),
+    /* @__PURE__ */ jsxRuntime.jsx(SecurityRequirementBadges, { names: server.securityNames }),
+    /* @__PURE__ */ jsxRuntime.jsx(BindingsSection, { bindings: server.bindings, title: "Server Bindings" })
+  ] });
+}
+function ServerList({ servers }) {
+  const [selected, setSelected] = React.useState(0);
+  if (servers.length === 0) return null;
+  const activeIndex = Math.min(selected, servers.length - 1);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: css.cx("omnispec-async-servers", containerStyle$2), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: titleStyle$3, children: "Servers" }),
+    servers.length > 1 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: tabStripStyle, role: "tablist", "aria-label": "Servers", children: servers.map((server, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          role: "tab",
+          "aria-selected": idx === activeIndex,
+          className: css.cx(tabStyle, idx === activeIndex && tabActiveStyle),
+          onClick: () => setSelected(idx),
+          children: server.name
+        },
+        server.name
+      )) }),
+      /* @__PURE__ */ jsxRuntime.jsx(ServerCard, { server: servers[activeIndex] })
+    ] }) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    message.schemaFormat && /* @__PURE__ */ jsxRuntime.jsx("span", { className: schemaFormatBadgeStyle, children: message.schemaFormat }),
+    rawPayload && /* @__PURE__ */ jsxRuntime.jsx(PayloadBody, { rawPayload, schemaFormat: message.schemaFormat, message, idx })
+  ] });
+}
+function PayloadBody({
+  rawPayload,
+  schemaFormat,
+  message,
+  idx
+}) {
+  if (typeof rawPayload.$ref === "string") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: unresolvedRefStyle, role: "alert", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(useSpecFetcher.Icon, { name: "warning", size: "0.875rem" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        "Unresolved reference: ",
+        /* @__PURE__ */ jsxRuntime.jsx("code", { className: unresolvedRefCodeStyle, children: rawPayload.$ref })
+      ] })
+    ] });
+  }
+  const schema = detectSchemaFormat(schemaFormat) === "avro" ? avroToJsonSchema(rawPayload) : rawPayload;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Collapsible.Tabs,
+    {
+      tabs: [
+        {
+          id: `schema-${idx}`,
+          label: "Payload Schema",
+          content: /* @__PURE__ */ jsxRuntime.jsx(Collapsible.SchemaTree, { nodes: Collapsible.schemaToNodes(schema) })
+        },
+        {
+          id: `example-${idx}`,
+          label: "Example",
+          content: /* @__PURE__ */ jsxRuntime.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] = React.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(Collapsible.generateExample(exampleSchema), null, 2) : "{}";
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Collapsible.ExampleSelector, { examples: named, selectedName: selectedName || (named[0]?.name ?? ""), onSelect: setSelectedName }),
+    /* @__PURE__ */ jsxRuntime.jsx(Collapsible.CodeBlock, { code, language: "json" })
+  ] });
+}
+const schemaFormatBadgeStyle = css.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 unresolvedRefStyle = css.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.css({
+  fontFamily: "var(--omnispec-font-mono)",
+  fontSize: "var(--omnispec-font-size-xs)"
+});
+
+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 ChannelDetail({ channel, id, expandAll, expandGeneration }) {
+  const primaryAction = channel.operations[0]?.action;
+  const primaryLabel = actionLabels[primaryAction] ?? primaryAction?.toUpperCase() ?? "";
+  const primaryColor = actionColors[primaryAction] ?? "var(--omnispec-fg-muted)";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Collapsible.ExpandableCard,
+    {
+      id,
+      title: channel.address,
+      rightLabel: `${channel.operations.length} ${channel.operations.length === 1 ? "operation" : "operations"}`,
+      expandAll,
+      expandGeneration,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Collapsible.MethodBar, { label: primaryLabel, path: channel.address, color: primaryColor }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: bodyStyle, children: [
+          channel.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: sectionStyle, children: /* @__PURE__ */ jsxRuntime.jsx(Collapsible.MarkdownRenderer, { content: channel.description }) }),
+          channel.parameters && Object.keys(channel.parameters).length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: sectionStyle, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h4", { className: sectionTitleStyle, children: "Parameters" }),
+            /* @__PURE__ */ jsxRuntime.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 = Collapsible.buildConstraints(schema);
+              return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: paramRowStyle, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: paramHeaderStyle, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: paramNameStyle, children: name }),
+                  paramType && /* @__PURE__ */ jsxRuntime.jsx("pre", { className: typeBadgeStyle$1, children: paramType })
+                ] }),
+                (paramFormat || constraintBadges.length > 0 || paramEnum && paramEnum.length > 0) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: paramConstraintsStyle, children: [
+                  paramFormat && /* @__PURE__ */ jsxRuntime.jsx(Collapsible.SchemaBadge, { variant: "constraint", children: paramFormat }),
+                  constraintBadges.map((c) => /* @__PURE__ */ jsxRuntime.jsx(Collapsible.SchemaBadge, { variant: "constraint", children: c }, c)),
+                  paramEnum && paramEnum.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(Collapsible.SchemaBadge, { variant: "enum", children: [
+                    "enum: ",
+                    paramEnum.map(String).join(" | ")
+                  ] })
+                ] }),
+                param.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: paramDescStyle, children: param.description })
+              ] }, name);
+            }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(BindingsSection, { bindings: channel.bindings, title: "Channel Bindings" }),
+          channel.operations.map((op, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { id: id ? `${id}-op-${idx}` : void 0, className: operationStyle, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: opHeaderStyle, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: css.cx(actionBadgeBase, css.css({
+                    backgroundColor: actionColors[op.action] ?? "var(--omnispec-fg-muted)"
+                  })),
+                  children: actionLabels[op.action] ?? op.action.toUpperCase()
+                }
+              ),
+              op.operationId && /* @__PURE__ */ jsxRuntime.jsx("span", { className: opIdStyle, children: op.operationId }),
+              op.summary && /* @__PURE__ */ jsxRuntime.jsx("span", { className: opSummaryStyle, children: op.summary })
+            ] }),
+            op.tags && op.tags.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: tagChipsStyle, children: op.tags.map((tag) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: tagChipStyle, title: tag.description, children: tag.name }, tag.name)) }),
+            op.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: sectionStyle, children: /* @__PURE__ */ jsxRuntime.jsx(Collapsible.MarkdownRenderer, { content: op.description }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(SecurityRequirementBadges, { names: op.securityNames }),
+            /* @__PURE__ */ jsxRuntime.jsx(OperationMessages, { operation: op, idx }),
+            op.reply && op.reply.messages.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: replyStyle, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h4", { className: replyTitleStyle, children: "Reply" }),
+              op.reply.messages.map((replyMsg, i) => /* @__PURE__ */ jsxRuntime.jsx(MessageView, { message: replyMsg, idx: `${idx}-reply-${i}` }, i))
+            ] }),
+            /* @__PURE__ */ jsxRuntime.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] = React.useState(0);
+  if (messages.length === 0) return null;
+  const active = messages[Math.min(selectedIndex, messages.length - 1)];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: sectionStyle, children: [
+    messages.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: messageSelectorStyle, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: `msg-select-${idx}`, className: messageSelectorLabelStyle, children: "Message" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "select",
+        {
+          id: `msg-select-${idx}`,
+          className: messageSelectStyle,
+          value: selectedIndex,
+          onChange: (e) => setSelectedIndex(Number(e.target.value)),
+          children: messages.map((m, i) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: i, children: messageLabel(m, i) }, i))
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: messageCountStyle, children: [
+        messages.length,
+        " messages"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(MessageView, { message: active, idx })
+  ] });
+}
+function MessageView({ message, idx }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("h4", { className: sectionTitleStyle, children: [
+      "Message",
+      (message.title ?? message.name) && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: messageTitleStyle, children: [
+        " \u2014 ",
+        message.title ?? message.name
+      ] })
+    ] }),
+    message.summary && /* @__PURE__ */ jsxRuntime.jsx("p", { className: messageSummaryStyle$1, children: message.summary }),
+    message.contentType && /* @__PURE__ */ jsxRuntime.jsx("code", { className: contentTypeStyle$1, children: message.contentType }),
+    /* @__PURE__ */ jsxRuntime.jsx(MessagePayload, { message, idx }),
+    message.correlationId && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: correlationIdStyle, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: correlationIdLabelStyle, children: "correlationId" }),
+      /* @__PURE__ */ jsxRuntime.jsx("code", { className: correlationIdLocationStyle, children: message.correlationId.location }),
+      message.correlationId.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: correlationIdDescStyle, children: message.correlationId.description })
+    ] }),
+    message.headers && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: headersWrapStyle, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h4", { className: sectionTitleStyle, children: "Headers" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Collapsible.SchemaTree, { nodes: Collapsible.schemaToNodes(message.headers) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(BindingsSection, { bindings: message.bindings, title: "Message Bindings" })
+  ] });
+}
+const bodyStyle = css.css({
+  padding: "0.75rem 1rem",
+  [useSpecFetcher.mq.desktop]: {
+    padding: "1rem 1.25rem"
+  }
+});
+const sectionStyle = css.css({
+  marginBottom: "1.5rem"
+});
+const sectionTitleStyle = css.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.css({
+  display: "flex",
+  flexDirection: "column"
+});
+const paramRowStyle = css.css({
+  padding: "0.75rem 0"
+});
+const paramHeaderStyle = css.css({
+  display: "flex",
+  alignItems: "center",
+  gap: "0.5rem",
+  flexWrap: "wrap"
+});
+const paramNameStyle = css.css({
+  fontSize: "var(--omnispec-font-size-sm)",
+  fontWeight: 700,
+  backgroundColor: "transparent",
+  padding: 0
+});
+const typeBadgeStyle$1 = css.css({
+  fontSize: "var(--omnispec-font-size-xs)",
+  fontWeight: 400
+});
+const paramDescStyle = css.css({
+  margin: "0.25rem 0 0",
+  fontSize: "var(--omnispec-font-size-base)",
+  color: "var(--omnispec-fg-secondary)",
+  lineHeight: 1.5
+});
+const paramConstraintsStyle = css.css({
+  display: "flex",
+  flexWrap: "wrap",
+  gap: "0.375rem",
+  marginTop: "0.375rem"
+});
+const operationStyle = css.css({
+  padding: "0.75rem 0",
+  borderTop: "1px solid var(--omnispec-border-color)"
+});
+const opHeaderStyle = css.css({
+  display: "flex",
+  alignItems: "center",
+  gap: "0.5rem",
+  marginBottom: "0.5rem"
+});
+const actionBadgeBase = css.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.css({
+  fontSize: "var(--omnispec-font-size-sm)",
+  fontWeight: 700,
+  backgroundColor: "transparent",
+  padding: 0
+});
+const opSummaryStyle = css.css({
+  fontSize: "var(--omnispec-font-size-sm)",
+  color: "var(--omnispec-fg-secondary)"
+});
+const messageTitleStyle = css.css({
+  fontWeight: 400,
+  color: "var(--omnispec-fg-primary)"
+});
+const messageSummaryStyle$1 = css.css({
+  margin: "0 0 0.5rem",
+  fontSize: "var(--omnispec-font-size-base)",
+  color: "var(--omnispec-fg-secondary)"
+});
+const contentTypeStyle$1 = css.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 = css.css({
+  marginTop: "1rem"
+});
+const messageSelectorStyle = css.css({
+  display: "flex",
+  alignItems: "center",
+  gap: "0.5rem",
+  flexWrap: "wrap",
+  marginBottom: "0.75rem"
+});
+const messageSelectorLabelStyle = css.css({
+  fontSize: "var(--omnispec-font-size-xs)",
+  fontWeight: 600,
+  color: "var(--omnispec-fg-muted)",
+  textTransform: "uppercase",
+  letterSpacing: "0.0313rem",
+  whiteSpace: "nowrap"
+});
+const messageSelectStyle = css.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.css({
+  fontSize: "var(--omnispec-font-size-xs)",
+  color: "var(--omnispec-fg-muted)"
+});
+const correlationIdStyle = css.css({
+  display: "flex",
+  alignItems: "center",
+  gap: "0.5rem",
+  flexWrap: "wrap",
+  marginTop: "0.75rem"
+});
+const correlationIdLabelStyle = css.css({
+  fontSize: "var(--omnispec-font-size-xs)",
+  fontWeight: 700,
+  color: "var(--omnispec-fg-primary)",
+  fontFamily: "var(--omnispec-font-mono)"
+});
+const correlationIdLocationStyle = css.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.css({
+  fontSize: "var(--omnispec-font-size-xs)",
+  color: "var(--omnispec-fg-secondary)"
+});
+const replyStyle = css.css({
+  marginTop: "1rem",
+  paddingLeft: "0.75rem",
+  borderLeft: "0.125rem solid var(--omnispec-border-color)"
+});
+const replyTitleStyle = css.css({
+  margin: "0 0 0.5rem",
+  fontSize: "var(--omnispec-font-size-md)",
+  fontWeight: 700,
+  color: "var(--omnispec-fg-primary)",
+  letterSpacing: "0.02em"
+});
+const tagChipsStyle = css.css({
+  display: "flex",
+  flexWrap: "wrap",
+  gap: "0.25rem",
+  marginBottom: "0.5rem"
+});
+const tagChipStyle = css.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"
+});
+
+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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    messages.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `omnispec-async-messages ${containerStyle$1}`, id: "messages", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: titleStyle$2, children: "Messages" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: schemaWrapperStyle, children: messages.map(([name, message]) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: schemaStyle, id: `message-${name}`, children: /* @__PURE__ */ jsxRuntime.jsxs(
+        Collapsible.Collapsible,
+        {
+          title: /* @__PURE__ */ jsxRuntime.jsx("code", { className: schemaNameStyle, children: name }),
+          defaultOpen: false,
+          children: [
+            message.title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: messageSummaryStyle, children: message.title }),
+            message.summary && /* @__PURE__ */ jsxRuntime.jsx("p", { className: messageSummaryStyle, children: message.summary }),
+            message.contentType && /* @__PURE__ */ jsxRuntime.jsx("code", { className: contentTypeStyle, children: message.contentType }),
+            /* @__PURE__ */ jsxRuntime.jsx(MessagePayload, { message, idx: `message-${name}` }),
+            message.headers && /* @__PURE__ */ jsxRuntime.jsx(Collapsible.SchemaTree, { nodes: Collapsible.schemaToNodes(message.headers) })
+          ]
+        }
+      ) }, name)) })
+    ] }),
+    schemas.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `omnispec-async-components ${containerStyle$1}`, id: "schemas", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: titleStyle$2, children: "Schemas" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: schemaWrapperStyle, children: schemas.map(([name, schema]) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: schemaStyle, id: `schema-${name}`, children: /* @__PURE__ */ jsxRuntime.jsx(
+        Collapsible.Collapsible,
+        {
+          title: /* @__PURE__ */ jsxRuntime.jsx("code", { className: schemaNameStyle, children: name }),
+          defaultOpen: false,
+          children: /* @__PURE__ */ jsxRuntime.jsx(Collapsible.SchemaTree, { nodes: Collapsible.schemaToNodes(schema) })
+        }
+      ) }, name)) })
+    ] })
+  ] });
+}
+const containerStyle$1 = css.css({
+  marginTop: "2rem",
+  paddingTop: "1.5rem",
+  borderTop: "1px solid var(--omnispec-border-color)",
+  [useSpecFetcher.mq.mobile]: {
+    borderTop: "none",
+    marginTop: "1.5rem",
+    paddingTop: "1rem"
+  }
+});
+const titleStyle$2 = css.css({
+  margin: "0 0 1rem",
+  fontSize: "var(--omnispec-h2-font-size)",
+  color: "var(--omnispec-h2-color)",
+  fontWeight: 700
+});
+const schemaWrapperStyle = css.css({
+  border: "1px solid var(--omnispec-border-color)",
+  borderRadius: "0.5rem",
+  padding: "1.5rem 1rem"
+});
+const schemaStyle = css.css({
+  marginBottom: "0.5rem"
+});
+const schemaNameStyle = css.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.css({
+  margin: "0 0 0.5rem",
+  fontSize: "var(--omnispec-font-size-sm)",
+  color: "var(--omnispec-fg-secondary)"
+});
+const contentTypeStyle = css.css({
+  display: "block",
+  fontFamily: "var(--omnispec-font-mono)",
+  fontSize: "var(--omnispec-font-size-xs)",
+  color: "var(--omnispec-fg-muted)",
+  marginBottom: "0.5rem"
+});
+
+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__ */ jsxRuntime.jsxs("div", { className: `omnispec-async-security ${containerStyle}`, id: "security", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h2", { className: titleStyle$1, children: "Security Schemes" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: listStyle, children: entries.map(([name, scheme]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cardStyle, id: `security-${name}`, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: headerStyle$1, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(useSpecFetcher.Icon, { name: "lock", size: "0.875rem" }),
+        /* @__PURE__ */ jsxRuntime.jsx("code", { className: nameStyle, children: name }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: typeBadgeStyle, children: scheme.type })
+      ] }),
+      scheme.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: descStyle$1, children: scheme.description }),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: flowsStyle, children: Object.entries(scheme.flows).map(([flowName, flow]) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: flowCardStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: flowNameStyle, children: name }),
+    /* @__PURE__ */ jsxRuntime.jsx(FieldRows, { fields: urls }),
+    Object.keys(scopes).length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: scopesStyle, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: scopesLabelStyle, children: "Scopes" }),
+      /* @__PURE__ */ jsxRuntime.jsx("ul", { className: scopeListStyle, children: Object.entries(scopes).map(([scope, desc]) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: scopeRowStyle, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("code", { className: scopeNameStyle, children: scope }),
+        desc && /* @__PURE__ */ jsxRuntime.jsx("span", { className: scopeDescStyle, children: desc })
+      ] }, scope)) })
+    ] })
+  ] });
+}
+const containerStyle = css.css({
+  marginTop: "1.5rem",
+  paddingTop: "1rem",
+  [useSpecFetcher.mq.desktop]: {
+    marginTop: "2rem",
+    paddingTop: "1.5rem",
+    borderTop: "1px solid var(--omnispec-border-color)"
+  }
+});
+const titleStyle$1 = css.css({
+  margin: "0 0 1rem",
+  fontSize: "var(--omnispec-h2-font-size)",
+  color: "var(--omnispec-h2-color)",
+  fontWeight: 700
+});
+const listStyle = css.css({
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.75rem"
+});
+const cardStyle = css.css({
+  padding: "0.75rem 0.875rem",
+  borderRadius: "var(--omnispec-border-radius)",
+  backgroundColor: "var(--omnispec-bg-secondary)"
+});
+const headerStyle$1 = css.css({
+  display: "flex",
+  alignItems: "center",
+  gap: "0.5rem",
+  marginBottom: "0.375rem"
+});
+const nameStyle = css.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.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.css({
+  margin: "0 0 0.5rem",
+  fontSize: "var(--omnispec-font-size-sm)",
+  color: "var(--omnispec-fg-secondary)"
+});
+const flowsStyle = css.css({
+  marginTop: "0.625rem",
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.5rem"
+});
+const flowCardStyle = css.css({
+  padding: "0.5rem 0.625rem",
+  borderRadius: "var(--omnispec-border-radius)",
+  backgroundColor: "var(--omnispec-bg-tertiary)"
+});
+const flowNameStyle = css.css({
+  fontFamily: "var(--omnispec-font-mono)",
+  fontSize: "var(--omnispec-font-size-xs)",
+  fontWeight: 700,
+  color: "var(--omnispec-fg-primary)"
+});
+const scopesStyle = css.css({
+  marginTop: "0.375rem"
+});
+const scopesLabelStyle = css.css({
+  fontSize: "var(--omnispec-font-size-xxs)",
+  fontWeight: 600,
+  textTransform: "uppercase",
+  letterSpacing: "0.05em",
+  color: "var(--omnispec-fg-muted)"
+});
+const scopeListStyle = css.css({
+  listStyle: "none",
+  margin: "0.25rem 0 0",
+  padding: 0,
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.125rem"
+});
+const scopeRowStyle = css.css({
+  display: "flex",
+  gap: "0.5rem",
+  alignItems: "baseline",
+  flexWrap: "wrap"
+});
+const scopeNameStyle = css.css({
+  fontFamily: "var(--omnispec-font-mono)",
+  fontSize: "var(--omnispec-font-size-xs)",
+  color: "var(--omnispec-color-primary)"
+});
+const scopeDescStyle = css.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 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__ */ jsxRuntime.jsxs("div", { className: headerStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: titleStyle, children: [
+      group.label,
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: countStyle, children: group.channels.length })
+    ] }),
+    group.tag?.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: descStyle, children: /* @__PURE__ */ jsxRuntime.jsx(Collapsible.MarkdownRenderer, { content: group.tag.description }) }),
+    group.tag?.externalDocs && /* @__PURE__ */ jsxRuntime.jsxs(
+      "a",
+      {
+        href: group.tag.externalDocs.url,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: docsStyle,
+        children: [
+          group.tag.externalDocs.description ?? "External docs",
+          /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: " \u2197" })
+        ]
+      }
+    )
+  ] });
+}
+const headerStyle = css.css({
+  marginBottom: "0.75rem",
+  paddingBottom: "0.5rem",
+  borderBottom: "0.125rem solid var(--omnispec-border-color)"
+});
+const titleStyle = css.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.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.css({
+  marginTop: "0.5rem",
+  fontSize: "var(--omnispec-font-size-sm)",
+  color: "var(--omnispec-fg-secondary)",
+  lineHeight: 1.6
+});
+const docsStyle = css.css({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "0.25rem",
+  marginTop: "0.5rem",
+  fontSize: "var(--omnispec-font-size-xs)",
+  color: "var(--omnispec-fg-link)",
+  textDecoration: "none",
+  "&:hover": {
+    textDecoration: "underline"
+  }
+});
+
+function AsyncApiSpec({
+  spec,
+  theme,
+  layout = "sidebar",
+  sidebarPosition = "left",
+  defaultExpandOperations = false,
+  downloadLink,
+  sidebarNav,
+  slots = {},
+  schemaStyle,
+  pro,
+  onSpecLoaded,
+  className
+}) {
+  const resolvedSchemaStyle = useSpecFetcher.resolveSchemaStyle(schemaStyle, pro?.advancedSchemaStyles ?? false);
+  const { data: parsedSpec, state } = useAsyncApiSpec(spec);
+  const [searchQuery, setSearchQuery] = React.useState("");
+  const [allExpanded, setAllExpanded] = React.useState(defaultExpandOperations);
+  const [expandGeneration, setExpandGeneration] = React.useState(0);
+  const [navGrouping, setNavGrouping] = React.useState("channel");
+  const handleToggleExpand = React.useCallback(() => {
+    setAllExpanded((prev) => !prev);
+    setExpandGeneration((prev) => prev + 1);
+  }, []);
+  React.useMemo(() => {
+    if (parsedSpec && onSpecLoaded) {
+      const major = parseInt(parsedSpec.specVersion.split(".")[0], 10);
+      onSpecLoaded({
+        title: parsedSpec.title,
+        version: parsedSpec.version,
+        type: major >= 3 ? useSpecFetcher.SpecType.ASYNCAPI_3 : useSpecFetcher.SpecType.ASYNCAPI_2
+      });
+    }
+  }, [parsedSpec, onSpecLoaded]);
+  const filteredChannels = React.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 = React.useMemo(() => hasAnyTags(filteredChannels), [filteredChannels]);
+  const tagGroups = React.useMemo(
+    () => grouped ? groupChannelsByTag(filteredChannels, parsedSpec?.tags) : [],
+    [grouped, filteredChannels, parsedSpec]
+  );
+  const channelDomId = React.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 = React.useCallback(
+    (channelName, idx) => `${channelDomId.get(channelName) ?? `channel-${channelName}`}-op-${idx}`,
+    [channelDomId]
+  );
+  const opToCard = React.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 = React.useMemo(
+    () => filteredChannels.some((ch) => ch.operations.length > 0),
+    [filteredChannels]
+  );
+  const navItems = React.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) => ({
+      id: `${idPrefix}channel-${ch.name}`,
+      label: ch.address,
+      badge: ch.operations.map((op) => actionLabel(op.action)).join("/") || void 0,
+      badgeColor: actionColor(ch.operations[0]?.action ?? "")
+    });
+    const 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" });
+    }
+    items.push({
+      id: "channels",
+      label: navGrouping === "operation" ? "Operations" : "Channels",
+      children: channelChildren
+    });
+    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]);
+  const { navigateTo } = Collapsible.useHashScroll(filteredChannels.length);
+  const handleNavSelect = React.useCallback((id) => {
+    const cardId = opToCard.get(id);
+    if (cardId) {
+      Collapsible.requestExpand(cardId);
+      navigateTo(id);
+      return;
+    }
+    navigateTo(id);
+  }, [navigateTo, opToCard]);
+  const navSectionIds = React.useMemo(() => Collapsible.flattenNavItemIds(navItems), [navItems]);
+  const activeSection = Collapsible.useScrollSpy(navSectionIds);
+  if (state.status === "loading") {
+    return /* @__PURE__ */ jsxRuntime.jsx(useSpecFetcher.ThemeProvider, { theme, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `omnispec-asyncapi ${className ?? ""}`, children: /* @__PURE__ */ jsxRuntime.jsx(useSpecFetcher.LoadingScreen, {}) }) });
+  }
+  if (state.status === "error") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      useSpecFetcher.SpecStatusScreen,
+      {
+        theme,
+        layout,
+        sidebarPosition,
+        slots,
+        sidebarNav,
+        premiumThemingEnabled: pro?.premiumThemingEnabled ?? false,
+        className: `omnispec-asyncapi ${className ?? ""}`,
+        children: /* @__PURE__ */ jsxRuntime.jsx(useSpecFetcher.ErrorMessage, { title: "Failed to load specification", message: state.error })
+      }
+    );
+  }
+  if (!parsedSpec) return null;
+  const specNav = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Collapsible.SearchBar,
+      {
+        placeholder: "Filter channels...",
+        onSearch: setSearchQuery
+      }
+    ),
+    hasOperations && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: groupToggleStyle, role: "group", "aria-label": "Sidebar grouping", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: groupToggleLabelStyle, children: "Group by" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: groupToggleButtonsStyle, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: css.cx(groupToggleButtonStyle, navGrouping === "channel" && groupToggleActiveStyle),
+            "aria-pressed": navGrouping === "channel",
+            "aria-label": "Group by channel",
+            onClick: () => setNavGrouping("channel"),
+            children: "Channel"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: css.cx(groupToggleButtonStyle, navGrouping === "operation" && groupToggleActiveStyle),
+            "aria-pressed": navGrouping === "operation",
+            "aria-label": "Group by operation",
+            onClick: () => setNavGrouping("operation"),
+            children: "Operation"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      useSpecFetcher.NavTree,
+      {
+        items: navItems,
+        activeId: activeSection,
+        onSelect: handleNavSelect
+      }
+    )
+  ] });
+  const sidebar = useSpecFetcher.buildSidebar(sidebarNav, specNav);
+  const resolvedDownloadLink = Collapsible.resolveDownloadLink(downloadLink, spec);
+  return /* @__PURE__ */ jsxRuntime.jsx(useSpecFetcher.ConfigProvider, { config: { allowTryIt: false, layout, sidebarPosition, defaultExpandOperations, schemaStyle: resolvedSchemaStyle, slots, proRenderers: pro?.renderers ?? /* @__PURE__ */ new Map(), premiumThemingEnabled: pro?.premiumThemingEnabled ?? false }, children: /* @__PURE__ */ jsxRuntime.jsx(Collapsible.ExpandProvider, { expandAll: allExpanded, expandGeneration, children: /* @__PURE__ */ jsxRuntime.jsx(useSpecFetcher.ThemeProvider, { theme, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `omnispec-asyncapi ${className ?? ""}`, children: /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary.ErrorBoundary, { title: "Failed to render this API reference", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    useSpecFetcher.DocLayout,
+    {
+      layout,
+      sidebarPosition,
+      sidebar,
+      sidebarHeader: slots.sidebarHeader,
+      sidebarFooter: slots.sidebarFooter,
+      header: slots.header,
+      footer: slots.footer,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Collapsible.SpecToolbar,
+          {
+            overview: /* @__PURE__ */ jsxRuntime.jsx(AsyncOverview, { spec: parsedSpec }),
+            expandLabel: "channels",
+            allExpanded,
+            onToggleExpand: handleToggleExpand,
+            downloadLink: resolvedDownloadLink
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { id: "servers", children: /* @__PURE__ */ jsxRuntime.jsx(ServerList, { servers: parsedSpec.servers }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { id: "channels", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: css.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("section", { id: `taggroup-${group.id}`, className: tagSectionStyle, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(TagGroupHeader, { group }),
+            group.channels.map((channel) => /* @__PURE__ */ jsxRuntime.jsx(
+              ChannelDetail,
+              {
+                id: `${group.id}-channel-${channel.name}`,
+                channel,
+                expandAll: allExpanded,
+                expandGeneration
+              },
+              `${group.id}-${channel.name}`
+            ))
+          ] }, group.id)) : filteredChannels.map((channel) => /* @__PURE__ */ jsxRuntime.jsx(
+            ChannelDetail,
+            {
+              id: `channel-${channel.name}`,
+              channel,
+              expandAll: allExpanded,
+              expandGeneration
+            },
+            channel.name
+          ))
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(ComponentsSection, { components: parsedSpec.components }),
+        /* @__PURE__ */ jsxRuntime.jsx(SecuritySchemesSection, { securitySchemes: parsedSpec.components.securitySchemes })
+      ]
+    }
+  ) }) }) }) }) });
+}
+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.css({
+  fontSize: "var(--omnispec-font-size-sm)",
+  color: "var(--omnispec-fg-muted)",
+  fontStyle: "italic"
+});
+const groupToggleStyle = css.css({
+  display: "flex",
+  alignItems: "center",
+  gap: "0.5rem",
+  padding: "0.5rem 0.75rem 0.25rem",
+  flexWrap: "wrap"
+});
+const groupToggleLabelStyle = css.css({
+  fontSize: "var(--omnispec-font-size-xxs)",
+  fontWeight: 600,
+  textTransform: "uppercase",
+  letterSpacing: "0.05em",
+  color: "var(--omnispec-fg-muted)"
+});
+const groupToggleButtonsStyle = css.css({
+  display: "inline-flex",
+  borderRadius: "var(--omnispec-border-radius)",
+  backgroundColor: "var(--omnispec-bg-tertiary)",
+  padding: "0.125rem"
+});
+const groupToggleButtonStyle = css.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.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.css({
+  marginBottom: "2rem"
+});
+
+exports.AsyncApiSpec = AsyncApiSpec;
+//# sourceMappingURL=AsyncApiSpec-CHvM1swf.js.map