import { s as __toESM } from "./chunk-BNovOVIE.js";
import { t as require_react } from "./react-DA-nE2FX.js";
import { i as cr, n as ao, r as b, t as N } from "./chunk-5FQGJX7Z-BOg95xG5.js";
import { t as require_jsx_runtime } from "./jsx-runtime-COBk7ree.js";
var import_react = /* @__PURE__ */ __toESM(require_react(), 1), import_jsx_runtime = /* @__PURE__ */ __toESM(require_jsx_runtime(), 1), H = b("block", "before:content-[counter(line)]", "before:inline-block", "before:[counter-increment:line]", "before:w-6", "before:mr-4", "before:text-[13px]", "before:text-right", "before:text-muted-foreground/50", "before:font-mono", "before:select-none"), k = (0, import_react.memo)(({ children: e, result: o, language: s, className: c, ...u }) => {
  let d = (0, import_react.useMemo)(() => ({
    backgroundColor: o.bg,
    color: o.fg
  }), [o.bg, o.fg]);
  return (0, import_jsx_runtime.jsx)("pre", {
    className: b(c, "p-4 text-sm dark:bg-(--shiki-dark-bg)!"),
    "data-language": s,
    "data-streamdown": "code-block-body",
    style: d,
    ...u,
    children: (0, import_jsx_runtime.jsx)("code", {
      className: "[counter-increment:line_0] [counter-reset:line]",
      children: o.tokens.map((e2, o2) => (0, import_jsx_runtime.jsx)("span", {
        className: H,
        children: e2.map((e3, o3) => (0, import_jsx_runtime.jsx)("span", {
          className: "dark:bg-(--shiki-dark-bg)! dark:text-(--shiki-dark)!",
          style: {
            color: e3.color,
            backgroundColor: e3.bgColor,
            ...e3.htmlStyle
          },
          ...e3.htmlAttrs,
          children: e3.content
        }, o3))
      }, o2))
    })
  });
}, (e, o) => e.result === o.result && e.language === o.language && e.className === o.className), C = ({ className: e, language: o, style: s, ...c }) => (0, import_jsx_runtime.jsx)("div", {
  className: b("my-4 w-full overflow-hidden rounded-xl border border-border", e),
  "data-language": o,
  "data-streamdown": "code-block",
  style: {
    contentVisibility: "auto",
    containIntrinsicSize: "auto 200px",
    ...s
  },
  ...c
}), h = ({ language: e, children: o }) => (0, import_jsx_runtime.jsxs)("div", {
  className: "flex items-center justify-between bg-muted/80 p-3 text-muted-foreground text-xs",
  "data-language": e,
  "data-streamdown": "code-block-header",
  children: [(0, import_jsx_runtime.jsx)("span", {
    className: "ml-1 font-mono lowercase",
    children: e
  }), (0, import_jsx_runtime.jsx)("div", {
    className: "flex items-center gap-2",
    children: o
  })]
}), W = ({ code: e, language: o, className: l, children: d, ...f }) => {
  let { shikiTheme: p } = (0, import_react.useContext)(N), m = cr(), g = (0, import_react.useMemo)(() => ({
    bg: "transparent",
    fg: "inherit",
    tokens: e.split("\n").map((e2) => [{
      content: e2,
      color: "inherit",
      bgColor: "transparent",
      htmlStyle: {},
      offset: 0
    }])
  }), [e]), [_, v] = (0, import_react.useState)(g);
  return (0, import_react.useEffect)(() => {
    if (!m) {
      v(g);
      return;
    }
    let s = m.highlight({
      code: e,
      language: o,
      themes: p
    }, (e2) => {
      v(e2);
    });
    if (s) {
      v(s);
      return;
    }
    v(g);
  }, [
    e,
    o,
    p,
    m,
    g
  ]), (0, import_jsx_runtime.jsx)(ao.Provider, {
    value: { code: e },
    children: (0, import_jsx_runtime.jsxs)(C, {
      language: o,
      children: [(0, import_jsx_runtime.jsx)(h, {
        language: o,
        children: d
      }), (0, import_jsx_runtime.jsx)(k, {
        className: l,
        language: o,
        result: _,
        ...f
      })]
    })
  });
};
export {
  W as CodeBlock
};
