import { o as P } from "./rolldown-runtime.js";
import { i as S, n as I, t as M } from "./vendor/react.js";
import { t as R } from "./FileTypeIcon.js";
import { t as q } from "./Avatar.js";
import { t as k } from "./dist.js";
import { t as m } from "./utils.js";
import { t as W } from "./Badge.js";
var f = /* @__PURE__ */ P(S(), 1), t = M(), Z = k("flex flex-col", {
  variants: { divider: {
    divider: "divide-y divide-border-secondary",
    connector: "px-6 py-4",
    none: "gap-4"
  } },
  defaultVariants: { divider: "divider" }
}), H = k("flex gap-3 relative", {
  variants: {
    type: {
      notifications: "",
      messages: ""
    },
    divider: {
      divider: "px-4 py-4",
      connector: "pt-0",
      none: "px-4 py-4"
    }
  },
  defaultVariants: {
    type: "notifications",
    divider: "divider"
  }
}), A = f.memo(f.forwardRef(({ className: e, user: r, timestamp: s, dateTime: l, activity: i, content: n, unread: g = !1, avatarSize: y = "lg", divider: o = "divider", feedType: a = "notifications", userHandle: N, expanded: $, isLast: j = !1, ...T }, F) => {
  const V = () => {
    if (!n || $ === !1) return null;
    switch (n.type) {
      case "file":
        return /* @__PURE__ */ (0, t.jsxs)("div", {
          className: "group/file flex gap-3 items-start w-full mt-3 rounded-lg transition-[background-color,transform] duration-150 ease-out motion-reduce:transition-none hover:bg-muted/40 active:scale-[0.99] motion-reduce:active:scale-100 cursor-default",
          children: [/* @__PURE__ */ (0, t.jsx)(R, {
            extension: n.fileExtension,
            size: "md"
          }), /* @__PURE__ */ (0, t.jsxs)("div", {
            className: "flex flex-col min-w-0 flex-1",
            children: [/* @__PURE__ */ (0, t.jsx)("p", {
              className: "text-sm font-medium text-secondary-foreground truncate",
              children: n.fileName
            }), /* @__PURE__ */ (0, t.jsx)("p", {
              className: "text-sm text-muted-foreground",
              children: n.fileSize
            })]
          })]
        });
      case "message":
        return /* @__PURE__ */ (0, t.jsx)("div", {
          className: "mt-3 border border-border rounded-ee-md rounded-es-md rounded-se-md p-3 shadow-xs w-full transition-shadow duration-200 ease-out hover:shadow-sm motion-reduce:transition-none",
          children: /* @__PURE__ */ (0, t.jsx)("p", {
            className: "text-sm text-secondary-foreground",
            children: n.mentions && n.mentions.length > 0 ? O(n.message, n.mentions) : `"${n.message}"`
          })
        });
      case "labels":
        return /* @__PURE__ */ (0, t.jsx)("div", {
          className: "flex flex-wrap gap-1 mt-3",
          children: n.labels.map((d, _) => /* @__PURE__ */ (0, t.jsx)(W, {
            variant: "outline",
            color: d.color || "primary",
            size: "sm",
            className: "delight-stagger transition-transform duration-150 ease-out motion-reduce:transition-none hover:scale-105 motion-reduce:hover:scale-100",
            style: { "--delight-delay": `${_ * 50}ms` },
            children: d.text
          }, d.text))
        });
      default:
        return null;
    }
  }, O = (d, _) => {
    const p = [];
    let u = d, b = 0;
    for (const C of _) {
      const L = new RegExp(`(@${C})`, "gi"), v = u.split(L);
      for (let h = 0; h < v.length; h++) {
        const x = v[h];
        x.toLowerCase() === `@${C.toLowerCase()}` ? p.push(/* @__PURE__ */ (0, t.jsx)("span", {
          className: "font-semibold text-primary",
          children: x
        }, b++)) : h === v.length - 1 ? u = x : p.push(/* @__PURE__ */ (0, t.jsx)("span", { children: x }, b++));
      }
    }
    return u && p.push(/* @__PURE__ */ (0, t.jsx)("span", { children: u }, b++)), p;
  };
  return /* @__PURE__ */ (0, t.jsxs)("div", {
    ref: F,
    "data-slot": "activity-feed-item",
    role: "article",
    "aria-label": `${r.name}: ${i.text}${i.link ? ` ${i.link}` : ""}`,
    className: m(H({
      type: a,
      divider: o
    }), "transition-colors duration-150 ease-out motion-reduce:transition-none", "hover:bg-muted/30", e),
    ...T,
    children: [
      /* @__PURE__ */ (0, t.jsxs)("div", {
        className: m("flex flex-col items-center gap-0.5 self-stretch shrink-0", o === "connector" && !j && "pb-0.5"),
        children: [/* @__PURE__ */ (0, t.jsx)(q, {
          src: r.avatarSrc,
          fallback: r.name,
          size: y,
          indicator: r.online === !0 ? "online" : r.online === !1 ? "offline" : void 0
        }), o === "connector" && !j && /* @__PURE__ */ (0, t.jsx)("div", { className: "flex-1 w-0.5 min-h-4 rounded-sm bg-border-secondary delight-connector-grow" })]
      }),
      /* @__PURE__ */ (0, t.jsxs)("div", {
        className: m("flex flex-col flex-1 min-w-0", o === "connector" && "pb-8"),
        children: [/* @__PURE__ */ (0, t.jsxs)("div", {
          className: "flex flex-col",
          children: [/* @__PURE__ */ (0, t.jsxs)("div", {
            className: "flex items-center gap-2 flex-wrap",
            children: [
              /* @__PURE__ */ (0, t.jsx)("span", {
                className: "text-sm font-medium text-secondary-foreground",
                children: r.name
              }),
              a === "messages" && N && /* @__PURE__ */ (0, t.jsxs)("span", {
                className: "text-sm text-muted-foreground",
                children: ["@", N]
              }),
              l ? /* @__PURE__ */ (0, t.jsx)("time", {
                dateTime: l,
                className: "text-xs text-muted-foreground",
                children: s
              }) : /* @__PURE__ */ (0, t.jsx)("span", {
                className: "text-xs text-muted-foreground",
                children: s
              })
            ]
          }), /* @__PURE__ */ (0, t.jsxs)("p", {
            className: "text-sm text-muted-foreground",
            children: [i.text, i.link && /* @__PURE__ */ (0, t.jsxs)(t.Fragment, { children: [" ", i.linkHref ? /* @__PURE__ */ (0, t.jsx)("a", {
              href: i.linkHref,
              className: "font-medium text-primary hover:text-primary/80 transition-colors duration-150 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 rounded-sm",
              children: i.link
            }) : /* @__PURE__ */ (0, t.jsx)("span", {
              className: "font-medium text-secondary-foreground",
              children: i.link
            })] })]
          })]
        }), V()]
      }),
      g && /* @__PURE__ */ (0, t.jsx)("div", {
        className: "absolute top-2 end-1 size-2.5",
        "aria-hidden": "true",
        children: /* @__PURE__ */ (0, t.jsx)("div", { className: "size-2 rounded-full bg-primary delight-unread-pulse" })
      })
    ]
  });
}));
A.displayName = "ActivityFeedItem";
var E = f.forwardRef(({ className: e, divider: r = "divider", items: s, type: l = "notifications", loading: i, children: n, ...g }, y) => /* @__PURE__ */ (0, t.jsx)("div", {
  ref: y,
  "data-slot": "activity-feed",
  role: "feed",
  "aria-label": "Activity feed",
  "aria-busy": i || void 0,
  className: m(Z({ divider: r }), e),
  ...g,
  children: s ? s.map((o, a) => /* @__PURE__ */ (0, t.jsx)(A, {
    ...o,
    "aria-setsize": s.length,
    "aria-posinset": a + 1,
    divider: r ?? "divider",
    feedType: l,
    isLast: a === s.length - 1,
    className: m("delight-stagger", o.className),
    style: {
      "--delight-delay": `${a * 60}ms`,
      ...o.style
    }
  }, a)) : n
}));
E.displayName = "ActivityFeed";
var J = I(), c = {
  variant: "string",
  size: "string",
  items: "json",
  type: "string",
  loading: "boolean"
};
function w(e, r) {
  if (e !== null)
    switch (r) {
      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 z = 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 r = document.createElement("div");
    for (r.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(r), this._root = (0, J.createRoot)(r), this._render();
  }
  disconnectedCallback() {
    this._root?.unmount(), this._root = null;
  }
  attributeChangedCallback(e, r, s) {
    this._render();
  }
  static get observedAttributes() {
    return Object.keys(c).map((e) => e.replace(/([A-Z])/g, "-$1").toLowerCase());
  }
  _setProp(e, r) {
    const s = c[e] || "string";
    this._props[e] = this._parseValue(r, s), this._render();
  }
  _parseValue(e, r) {
    if (r === "boolean" && typeof e == "boolean" || r === "number" && typeof e == "number" || r === "string" && typeof e == "string") return e;
    if (typeof e == "string") switch (r) {
      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 r = e.replace(/([A-Z])/g, "-$1").toLowerCase(), s = c[e] || "string";
    return w(this.getAttribute(r), s);
  }
  _render() {
    if (!this._root || !this._childrenContainer) return;
    const e = {};
    for (const [s, l] of Object.entries(c)) if (s in this._props) e[s] = this._props[s];
    else {
      const i = s.replace(/([A-Z])/g, "-$1").toLowerCase();
      e[s] = w(this.getAttribute(i), l);
    }
    const r = f.createElement(E, {
      ...e,
      _hostElement: this
    }, f.createElement("span", {
      ref: (s) => {
        s && this._childrenContainer && s.replaceWith(this._childrenContainer);
      },
      style: { display: "contents" }
    }));
    this._root.render(r);
  }
};
for (const e of Object.keys(c)) Object.defineProperty(z.prototype, e, {
  get() {
    return this._getProp(e);
  },
  set(r) {
    this._setProp(e, r);
  },
  enumerable: !0,
  configurable: !0
});
typeof customElements < "u" && !customElements.get("hf-activity-feed") && customElements.define("hf-activity-feed", z);
export {
  z as ActivityFeedWC,
  z as default
};

//# sourceMappingURL=hf-activity-feed.js.map