import { o as N } from "./rolldown-runtime.js";
import { i as j, n as C, t as v } from "./vendor/react.js";
import { t as g } from "./createLucideIcon.js";
import { t as S } from "./dist.js";
import { t as u } from "./utils.js";
import { n as w, r as T, t as k } from "./tooltip2.js";
var A = [
  ["path", {
    d: "M15 3h6v6",
    key: "1q9fwt"
  }],
  ["path", {
    d: "M10 14 21 3",
    key: "gplh6r"
  }],
  ["path", {
    d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6",
    key: "a6xqqp"
  }]
], _ = g("external-link", A), E = [
  ["circle", {
    cx: "12",
    cy: "12",
    r: "10",
    key: "1mglay"
  }],
  ["path", {
    d: "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20",
    key: "13o1zl"
  }],
  ["path", {
    d: "M2 12h20",
    key: "9i4pu4"
  }]
], z = g("globe", E), d = /* @__PURE__ */ N(j(), 1), r = v(), $ = S("inline-flex items-center gap-1.5 transition-colors cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", {
  variants: { variant: {
    default: "text-sm text-primary hover:text-primary underline underline-offset-2 rounded-sm",
    pill: "px-2.5 py-1 rounded-full bg-accent hover:bg-surface-2 text-xs text-secondary-foreground delight-selection-press",
    minimal: "text-xs text-quaternary-foreground hover:text-secondary-foreground rounded-sm"
  } },
  defaultVariants: { variant: "default" }
});
function m({ url: e, favicon: t, className: s }) {
  const [i, n] = d.useState(!1), o = d.useMemo(() => {
    if (t) return t;
    try {
      return `https://www.google.com/s2/favicons?domain=${new URL(e).hostname}&sz=32`;
    } catch {
      return null;
    }
  }, [e, t]);
  return !o || i ? /* @__PURE__ */ (0, r.jsx)(z, { className: u("size-4 text-muted-foreground", s) }) : /* @__PURE__ */ (0, r.jsx)("img", {
    src: o,
    alt: "",
    className: u("size-4 rounded delight-fade-in motion-reduce:!animate-none", s),
    onError: () => n(!0)
  });
}
m.displayName = "SourceFavicon";
function p({ source: e, variant: t, showFavicon: s = !0, className: i, onClick: n }) {
  const o = e.title || e.siteName || e.url, a = u($({ variant: t }), i), l = /* @__PURE__ */ (0, r.jsxs)(r.Fragment, { children: [
    s && /* @__PURE__ */ (0, r.jsx)(m, {
      url: e.url,
      favicon: e.favicon
    }),
    /* @__PURE__ */ (0, r.jsx)("span", {
      className: "truncate max-w-[200px]",
      children: o
    }),
    t === "default" && /* @__PURE__ */ (0, r.jsx)(_, {
      className: "size-3 shrink-0",
      "aria-hidden": "true"
    })
  ] });
  return n ? /* @__PURE__ */ (0, r.jsx)("button", {
    type: "button",
    "data-slot": "ai-source-trigger",
    onClick: n,
    className: a,
    "aria-label": `Source: ${o}`,
    children: l
  }) : /* @__PURE__ */ (0, r.jsx)("a", {
    "data-slot": "ai-source-trigger",
    href: e.url,
    target: "_blank",
    rel: "noopener noreferrer",
    className: a,
    "aria-label": `Source: ${o}`,
    children: l
  });
}
p.displayName = "AISourceTrigger";
function y({ source: e, className: t }) {
  const s = d.useMemo(() => {
    try {
      return new URL(e.url).hostname;
    } catch {
      return e.url;
    }
  }, [e.url]);
  return /* @__PURE__ */ (0, r.jsxs)("div", {
    className: u("p-3 max-w-xs space-y-2", t),
    children: [
      /* @__PURE__ */ (0, r.jsxs)("div", {
        className: "flex items-start gap-2",
        children: [/* @__PURE__ */ (0, r.jsx)(m, {
          url: e.url,
          favicon: e.favicon,
          className: "mt-0.5"
        }), /* @__PURE__ */ (0, r.jsxs)("div", {
          className: "flex-1 min-w-0",
          children: [/* @__PURE__ */ (0, r.jsx)("p", {
            className: "text-sm font-medium text-foreground truncate",
            children: e.title || s
          }), /* @__PURE__ */ (0, r.jsx)("p", {
            className: "text-xs text-quaternary-foreground truncate",
            children: s
          })]
        })]
      }),
      e.description && /* @__PURE__ */ (0, r.jsx)("p", {
        className: "text-xs text-muted-foreground line-clamp-2",
        children: e.description
      }),
      /* @__PURE__ */ (0, r.jsxs)("a", {
        href: e.url,
        target: "_blank",
        rel: "noopener noreferrer",
        className: "flex items-center gap-1 text-xs text-primary hover:text-primary",
        children: ["Visit source", /* @__PURE__ */ (0, r.jsx)(_, { className: "size-3" })]
      })
    ]
  });
}
y.displayName = "AISourceContent";
function h({ source: e, variant: t, showFavicon: s = !0, showTooltip: i = !0, className: n }) {
  return i ? /* @__PURE__ */ (0, r.jsxs)(k, { children: [/* @__PURE__ */ (0, r.jsx)(T, { render: /* @__PURE__ */ (0, r.jsx)("span", {
    "data-slot": "ai-source",
    children: /* @__PURE__ */ (0, r.jsx)(p, {
      source: e,
      variant: t,
      showFavicon: s,
      className: n
    })
  }) }), /* @__PURE__ */ (0, r.jsx)(w, {
    side: "top",
    className: "p-0",
    children: /* @__PURE__ */ (0, r.jsx)(y, { source: e })
  })] }) : /* @__PURE__ */ (0, r.jsx)("span", {
    "data-slot": "ai-source",
    children: /* @__PURE__ */ (0, r.jsx)(p, {
      source: e,
      variant: t,
      showFavicon: s,
      className: n
    })
  });
}
h.displayName = "AISource";
function I({ sources: e, maxVisible: t = 3, showAll: s = !1, onShowMore: i, className: n }) {
  const o = s ? e : e.slice(0, t), a = e.length - t;
  return /* @__PURE__ */ (0, r.jsxs)("nav", {
    "data-slot": "ai-source-list",
    "aria-label": "Sources",
    className: u("flex flex-wrap items-center gap-2", n),
    children: [
      /* @__PURE__ */ (0, r.jsx)("span", {
        className: "text-xs text-quaternary-foreground",
        children: "Sources:"
      }),
      o.map((l, f) => /* @__PURE__ */ (0, r.jsx)("span", {
        className: "delight-stagger motion-reduce:!animate-none",
        style: { "--delight-delay": `${f * 50}ms` },
        children: /* @__PURE__ */ (0, r.jsx)(h, {
          source: l,
          variant: "pill"
        })
      }, `${l.url}-${f}`)),
      !s && a > 0 && /* @__PURE__ */ (0, r.jsxs)("button", {
        type: "button",
        onClick: i,
        "aria-label": `Show ${a} more sources`,
        className: "px-2.5 py-1 rounded-full bg-accent hover:bg-surface-2 text-xs text-secondary-foreground transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring delight-selection-press",
        children: [
          "+",
          a,
          " more"
        ]
      })
    ]
  });
}
I.displayName = "AISourceList";
var L = C(), c = {
  variant: "string",
  size: "string",
  source: "string",
  showFavicon: "boolean",
  showTooltip: "boolean",
  className: "string"
};
function x(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 b = 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 s of Array.from(this.childNodes))
      s.nodeType === Node.TEXT_NODE && !s.textContent?.trim() || e.push(s);
    const t = document.createElement("div");
    for (t.style.display = "contents", this._childrenContainer = document.createElement("div"), this._childrenContainer.style.display = "contents", e.forEach((s) => this._childrenContainer.appendChild(s)); this.firstChild; ) this.removeChild(this.firstChild);
    this.appendChild(t), this._root = (0, L.createRoot)(t), this._render();
  }
  disconnectedCallback() {
    this._root?.unmount(), this._root = null;
  }
  attributeChangedCallback(e, t, s) {
    this._render();
  }
  static get observedAttributes() {
    return Object.keys(c).map((e) => e.replace(/([A-Z])/g, "-$1").toLowerCase());
  }
  _setProp(e, t) {
    const s = c[e] || "string";
    this._props[e] = this._parseValue(t, s), 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(), s = c[e] || "string";
    return x(this.getAttribute(t), s);
  }
  _render() {
    if (!this._root) return;
    const e = {};
    for (const [s, i] of Object.entries(c)) if (s in this._props) e[s] = this._props[s];
    else {
      const n = s.replace(/([A-Z])/g, "-$1").toLowerCase();
      e[s] = x(this.getAttribute(n), i);
    }
    const t = d.createElement(h, {
      ...e,
      _hostElement: this
    });
    this._root.render(t);
  }
};
for (const e of Object.keys(c)) Object.defineProperty(b.prototype, e, {
  get() {
    return this._getProp(e);
  },
  set(t) {
    this._setProp(e, t);
  },
  enumerable: !0,
  configurable: !0
});
typeof customElements < "u" && !customElements.get("hf-ai-source") && customElements.define("hf-ai-source", b);
export {
  b as AISourceWC,
  b as default
};

//# sourceMappingURL=hf-ai-source.js.map