import { o as T } from "./rolldown-runtime.js";
import { i as v, n as E, t as A } from "./vendor/react.js";
import { t as w } from "./createLucideIcon.js";
import { t as z } from "./chevron-down.js";
import { t as O } from "./chevron-right.js";
import { t as c } from "./proxy.js";
import { t as R } from "./AnimatePresence.js";
import { t as P } from "./dist.js";
import { t as a } from "./utils.js";
import { t as V } from "./use-controllable-state.js";
import { t as B } from "./markdown-renderer.js";
var M = [
  ["path", {
    d: "M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5",
    key: "1gvzjb"
  }],
  ["path", {
    d: "M9 18h6",
    key: "x1upvd"
  }],
  ["path", {
    d: "M10 22h4",
    key: "ceow96"
  }]
], f = w("lightbulb", M), d = /* @__PURE__ */ T(v(), 1), n = A(), L = P("overflow-hidden rounded-xl border transition-colors", {
  variants: {
    variant: {
      default: "border-border bg-muted",
      thinking: "border-primary bg-primary/10",
      subtle: "border-border bg-background"
    },
    state: {
      idle: "",
      streaming: "border-primary"
    }
  },
  defaultVariants: {
    variant: "default",
    state: "idle"
  }
});
function g({ className: e }) {
  return /* @__PURE__ */ (0, n.jsxs)("div", {
    className: a("flex items-center gap-1", e),
    role: "status",
    "aria-label": "Thinking",
    children: [
      /* @__PURE__ */ (0, n.jsx)(c.span, {
        className: "size-1.5 rounded-full bg-primary motion-reduce:animate-none",
        animate: { opacity: [
          0.3,
          1,
          0.3
        ] },
        transition: {
          duration: 1.5,
          repeat: Number.POSITIVE_INFINITY,
          delay: 0
        }
      }),
      /* @__PURE__ */ (0, n.jsx)(c.span, {
        className: "size-1.5 rounded-full bg-primary motion-reduce:animate-none",
        animate: { opacity: [
          0.3,
          1,
          0.3
        ] },
        transition: {
          duration: 1.5,
          repeat: Number.POSITIVE_INFINITY,
          delay: 0.2
        }
      }),
      /* @__PURE__ */ (0, n.jsx)(c.span, {
        className: "size-1.5 rounded-full bg-primary motion-reduce:animate-none",
        animate: { opacity: [
          0.3,
          1,
          0.3
        ] },
        transition: {
          duration: 1.5,
          repeat: Number.POSITIVE_INFINITY,
          delay: 0.4
        }
      })
    ]
  });
}
function b({ title: e = "Reasoning", isOpen: t, onToggle: r, isStreaming: i = !1, duration: s, contentId: o, className: p }) {
  return /* @__PURE__ */ (0, n.jsxs)("button", {
    type: "button",
    onClick: r,
    "aria-expanded": t,
    "aria-controls": o,
    className: a("flex items-center justify-between w-full px-4 py-3 transition-colors hover:bg-fg-primary/5 focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring rounded-xl", p),
    children: [/* @__PURE__ */ (0, n.jsxs)("div", {
      className: "flex items-center gap-2",
      children: [
        /* @__PURE__ */ (0, n.jsx)(f, {
          className: a("size-4", i ? "text-primary" : "text-quaternary-foreground"),
          "aria-hidden": "true"
        }),
        /* @__PURE__ */ (0, n.jsx)("span", {
          className: "text-sm font-medium text-foreground",
          children: e
        }),
        i && /* @__PURE__ */ (0, n.jsx)(g, {}),
        s && !i && /* @__PURE__ */ (0, n.jsx)("span", {
          className: "text-xs text-muted-foreground",
          children: s
        })
      ]
    }), t ? /* @__PURE__ */ (0, n.jsx)(z, {
      className: "size-4 text-muted-foreground transition-transform",
      "aria-hidden": "true"
    }) : /* @__PURE__ */ (0, n.jsx)(O, {
      className: "size-4 text-muted-foreground rtl:rotate-180 transition-transform",
      "aria-hidden": "true"
    })]
  });
}
b.displayName = "AIReasoningTrigger";
function y({ children: e, markdown: t = !0, className: r }) {
  return /* @__PURE__ */ (0, n.jsx)("div", {
    className: a("px-4 pb-4", r),
    children: t && typeof e == "string" ? /* @__PURE__ */ (0, n.jsx)(B, {
      className: "text-sm text-secondary-foreground",
      children: e
    }) : /* @__PURE__ */ (0, n.jsx)("div", {
      className: "text-sm text-secondary-foreground",
      children: e
    })
  });
}
y.displayName = "AIReasoningContent";
function x({ children: e, title: t = "Reasoning", open: r, defaultOpen: i = !1, onOpenChange: s, isStreaming: o = !1, markdown: p = !0, duration: N, variant: j, className: C }) {
  const m = d.useId(), [u, I] = V({
    value: r,
    defaultValue: i,
    onChange: s
  }), k = () => {
    I(!u);
  };
  return /* @__PURE__ */ (0, n.jsxs)("div", {
    "data-slot": "ai-reasoning-block",
    className: a(L({
      variant: o ? "thinking" : j,
      state: o ? "streaming" : "idle"
    }), C),
    children: [/* @__PURE__ */ (0, n.jsx)(b, {
      title: t,
      isOpen: u,
      onToggle: k,
      isStreaming: o,
      duration: N,
      contentId: m
    }), /* @__PURE__ */ (0, n.jsx)(R, { children: u && /* @__PURE__ */ (0, n.jsx)(c.div, {
      id: m,
      role: "region",
      "aria-label": t,
      initial: {
        height: 0,
        opacity: 0
      },
      animate: {
        height: "auto",
        opacity: 1
      },
      exit: {
        height: 0,
        opacity: 0
      },
      transition: { duration: 0.2 },
      className: "overflow-hidden",
      children: /* @__PURE__ */ (0, n.jsx)(y, {
        markdown: p,
        children: e
      })
    }) })]
  });
}
x.displayName = "AIReasoningBlock";
function q({ text: e = "Thinking...", isThinking: t = !0, action: r, className: i }) {
  return t ? /* @__PURE__ */ (0, n.jsxs)(c.div, {
    "data-slot": "ai-thinking-bar",
    initial: {
      opacity: 0,
      y: -10
    },
    animate: {
      opacity: 1,
      y: 0
    },
    exit: {
      opacity: 0,
      y: -10
    },
    className: a("flex items-center justify-between px-4 py-2 rounded-lg bg-primary/10 border border-primary motion-reduce:animate-none", i),
    children: [/* @__PURE__ */ (0, n.jsxs)("div", {
      className: "flex items-center gap-2",
      children: [
        /* @__PURE__ */ (0, n.jsx)(f, {
          className: "size-4 text-primary",
          "aria-hidden": "true"
        }),
        /* @__PURE__ */ (0, n.jsx)("span", {
          className: "text-sm text-primary",
          children: e
        }),
        /* @__PURE__ */ (0, n.jsx)(g, {})
      ]
    }), r]
  }) : null;
}
q.displayName = "AIThinkingBar";
var S = E();
function D(e) {
  return { onOpenChange: (t) => {
    e.dispatchEvent(new CustomEvent("open-change", {
      detail: t,
      bubbles: !0,
      composed: !0
    }));
  } };
}
function F(e) {
  const { _hostElement: t, ...r } = e, i = d.useMemo(() => t ? D(t) : {}, [t]);
  return d.createElement(x, {
    ...r,
    ...i
  });
}
var l = {
  variant: "string",
  size: "string",
  title: "string",
  open: "boolean",
  defaultOpen: "boolean",
  isStreaming: "boolean",
  markdown: "boolean",
  duration: "string",
  className: "string"
};
function h(e, t) {
  if (e !== null)
    switch (t) {
      case "number":
        return Number(e);
      case "boolean":
        return e !== "false" && e !== "0";
      case "json":
        try {
          return JSON.parse(e);
        } catch {
          return e;
        }
      default:
        return e;
    }
}
var _ = class extends HTMLElement {
  _root = null;
  _childrenContainer = null;
  _props = {};
  _initialized = !1;
  connectedCallback() {
    setTimeout(() => this._initialize(), 0);
  }
  _initialize() {
    if (this._initialized) return;
    this._initialized = !0;
    const e = [];
    for (const r of Array.from(this.childNodes))
      r.nodeType === Node.TEXT_NODE && !r.textContent?.trim() || e.push(r);
    const t = document.createElement("div");
    for (t.style.display = "contents", this._childrenContainer = document.createElement("div"), this._childrenContainer.style.display = "contents", e.forEach((r) => this._childrenContainer.appendChild(r)); this.firstChild; ) this.removeChild(this.firstChild);
    this.appendChild(t), this._root = (0, S.createRoot)(t), this._render();
  }
  disconnectedCallback() {
    this._root?.unmount(), this._root = null;
  }
  attributeChangedCallback(e, t, r) {
    this._render();
  }
  static get observedAttributes() {
    return Object.keys(l).map((e) => e.replace(/([A-Z])/g, "-$1").toLowerCase());
  }
  _setProp(e, t) {
    const r = l[e] || "string";
    this._props[e] = this._parseValue(t, r), this._render();
  }
  _parseValue(e, t) {
    if (t === "boolean" && typeof e == "boolean" || t === "number" && typeof e == "number" || t === "string" && typeof e == "string") return e;
    if (typeof e == "string") switch (t) {
      case "boolean":
        return e !== "false" && e !== "0" && e !== "";
      case "number":
        return Number(e);
      case "json":
        try {
          return JSON.parse(e);
        } catch {
          return e;
        }
      default:
        return e;
    }
    return e;
  }
  _getProp(e) {
    if (e in this._props) return this._props[e];
    const t = e.replace(/([A-Z])/g, "-$1").toLowerCase(), r = l[e] || "string";
    return h(this.getAttribute(t), r);
  }
  _render() {
    if (!this._root || !this._childrenContainer) return;
    const e = {};
    for (const [r, i] of Object.entries(l)) if (r in this._props) e[r] = this._props[r];
    else {
      const s = r.replace(/([A-Z])/g, "-$1").toLowerCase();
      e[r] = h(this.getAttribute(s), i);
    }
    const t = d.createElement(F, {
      ...e,
      _hostElement: this
    }, d.createElement("span", {
      ref: (r) => {
        r && this._childrenContainer && r.replaceWith(this._childrenContainer);
      },
      style: { display: "contents" }
    }));
    this._root.render(t);
  }
};
for (const e of Object.keys(l)) Object.defineProperty(_.prototype, e, {
  get() {
    return this._getProp(e);
  },
  set(t) {
    this._setProp(e, t);
  },
  enumerable: !0,
  configurable: !0
});
typeof customElements < "u" && !customElements.get("hf-ai-reasoning-block") && customElements.define("hf-ai-reasoning-block", _);
export {
  _ as AIReasoningBlockWC,
  _ as default
};

//# sourceMappingURL=hf-ai-reasoning-block.js.map