import { o as V } from "./rolldown-runtime.js";
import { i as L, n as I, t as q } from "./vendor/react.js";
import { t as $ } from "./createLucideIcon.js";
import { t as D } from "./ellipsis-vertical.js";
import { t as Y } from "./minimize-2.js";
import { t as E } from "./Button.js";
import { t as l } from "./utils.js";
import { t as _ } from "./DropdownMenu.js";
import { o as Z, t as J } from "./AppShellContent.js";
var W = [
  ["path", {
    d: "M15 3h6v6",
    key: "1q9fwt"
  }],
  ["path", {
    d: "m21 3-7 7",
    key: "1l2asr"
  }],
  ["path", {
    d: "m3 21 7-7",
    key: "tjx5ai"
  }],
  ["path", {
    d: "M9 21H3v-6",
    key: "wtvkvv"
  }]
], B = $("maximize-2", W), o = /* @__PURE__ */ V(L(), 1), n = q(), T = "AppShellCard.Header", v = "AppShellCard.Actions", w = "AppShellCard.Menu", z = o.forwardRef(function({ className: t, bodyClassName: r, children: c, ...h }, O) {
  const i = Z(), H = o.useId(), g = o.useRef(null);
  o.useEffect(() => {
    const s = g.current;
    if (!s) return;
    const a = () => {
      const S = s.scrollHeight > s.clientHeight, A = S && s.scrollTop > 0 ? "1" : "0", N = S && s.scrollTop + s.clientHeight < s.scrollHeight - 1 ? "1" : "0";
      s.style.getPropertyValue("--scroll-t") !== A && s.style.setProperty("--scroll-t", A), s.style.getPropertyValue("--scroll-b") !== N && s.style.setProperty("--scroll-b", N);
    };
    s.addEventListener("scroll", a, { passive: !0 });
    const x = new ResizeObserver(a);
    return x.observe(s), a(), () => {
      s.removeEventListener("scroll", a), x.disconnect();
    };
  }, []);
  let u = null, m = null, d = null;
  const f = [];
  o.Children.forEach(c, (s) => {
    if (!o.isValidElement(s)) {
      f.push(s);
      return;
    }
    const a = s.type?.__appShellCardType;
    a === T ? u = s : a === v ? m = s : a === w ? d = s : f.push(s);
  });
  const R = u || m || d || i?.onExpandedChange;
  return /* @__PURE__ */ (0, n.jsxs)(J, {
    ref: O,
    "data-slot": "app-shell-card",
    className: l("shadow-lg transition-[margin] duration-300 ease-[cubic-bezier(0.16,1,0.3,1)]", i?.expanded ? "m-0" : "mx-5 my-10", t),
    ...h,
    children: [R && /* @__PURE__ */ (0, n.jsxs)("div", {
      "data-slot": "app-shell-card-toolbar",
      role: "toolbar",
      "aria-label": "Card actions",
      className: "flex shrink-0 items-center gap-4 overflow-hidden border-b border-border px-4 py-3 sm:gap-6 sm:p-6",
      children: [
        u,
        m,
        d && /* @__PURE__ */ (0, n.jsxs)(_, { children: [/* @__PURE__ */ (0, n.jsx)(_.Trigger, { render: /* @__PURE__ */ (0, n.jsx)(E, {
          appearance: "ghost",
          size: "icon",
          "aria-label": "More options",
          children: /* @__PURE__ */ (0, n.jsx)(D, { className: "size-5" })
        }) }), /* @__PURE__ */ (0, n.jsx)(_.Popup, {
          id: `${H}-popup`,
          align: "end",
          sideOffset: 4,
          children: d.props.children
        })] }),
        i?.onExpandedChange && /* @__PURE__ */ (0, n.jsx)(E, {
          appearance: "ghost",
          size: "icon",
          onClick: () => i.onExpandedChange?.(!i.expanded),
          "aria-label": i.expanded ? "Minimize panel" : "Maximize panel",
          children: /* @__PURE__ */ (0, n.jsx)("span", {
            className: "delight-fade-in inline-flex",
            children: i.expanded ? /* @__PURE__ */ (0, n.jsx)(Y, { className: "size-5" }) : /* @__PURE__ */ (0, n.jsx)(B, { className: "size-5" })
          }, String(i.expanded))
        })
      ]
    }), /* @__PURE__ */ (0, n.jsx)("div", {
      ref: g,
      "data-slot": "app-shell-card-body",
      role: "region",
      "aria-label": "Card content",
      tabIndex: 0,
      className: l("delight-scroll-shadow flex-1 min-h-0 overflow-auto p-4 sm:p-6 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring rounded-b-[inherit]", r),
      children: f
    })]
  });
});
z.displayName = "AppShellCard";
function b({ className: e, children: t, ...r }) {
  return /* @__PURE__ */ (0, n.jsx)("div", {
    "data-slot": "app-shell-card-header",
    className: l("flex min-w-0 flex-1 flex-col justify-center", e),
    ...r,
    children: t
  });
}
b.displayName = "AppShellCard.Header";
b.__appShellCardType = T;
function M({ className: e, children: t, ...r }) {
  return /* @__PURE__ */ (0, n.jsx)("h3", {
    "data-slot": "app-shell-card-title",
    className: l("text-lg font-semibold leading-7 text-foreground", e),
    ...r,
    children: t
  });
}
M.displayName = "AppShellCard.Title";
function P({ className: e, children: t, ...r }) {
  return /* @__PURE__ */ (0, n.jsx)("p", {
    "data-slot": "app-shell-card-subtitle",
    className: l("text-sm leading-5 text-muted-foreground", e),
    ...r,
    children: t
  });
}
P.displayName = "AppShellCard.Subtitle";
function C({ className: e, children: t, ...r }) {
  return /* @__PURE__ */ (0, n.jsx)("div", {
    "data-slot": "app-shell-card-actions",
    className: l("flex shrink-0 items-center gap-2", e),
    ...r,
    children: t
  });
}
C.displayName = "AppShellCard.Actions";
C.__appShellCardType = v;
function y({ children: e }) {
  return e;
}
y.displayName = "AppShellCard.Menu";
y.__appShellCardType = w;
var U = Object.assign(z, {
  Header: b,
  Title: M,
  Subtitle: P,
  Actions: C,
  Menu: y
}), X = I(), p = { bodyClassName: "string" };
function j(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 k = 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, X.createRoot)(t), this._render();
  }
  disconnectedCallback() {
    this._root?.unmount(), this._root = null;
  }
  attributeChangedCallback(e, t, r) {
    this._render();
  }
  static get observedAttributes() {
    return Object.keys(p).map((e) => e.replace(/([A-Z])/g, "-$1").toLowerCase());
  }
  _setProp(e, t) {
    const r = p[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 = p[e] || "string";
    return j(this.getAttribute(t), r);
  }
  _render() {
    if (!this._root || !this._childrenContainer) return;
    const e = {};
    for (const [r, c] of Object.entries(p)) if (r in this._props) e[r] = this._props[r];
    else {
      const h = r.replace(/([A-Z])/g, "-$1").toLowerCase();
      e[r] = j(this.getAttribute(h), c);
    }
    const t = o.createElement(U, {
      ...e,
      _hostElement: this
    }, o.createElement("span", {
      ref: (r) => {
        r && this._childrenContainer && r.replaceWith(this._childrenContainer);
      },
      style: { display: "contents" }
    }));
    this._root.render(t);
  }
};
for (const e of Object.keys(p)) Object.defineProperty(k.prototype, e, {
  get() {
    return this._getProp(e);
  },
  set(t) {
    this._setProp(e, t);
  },
  enumerable: !0,
  configurable: !0
});
typeof customElements < "u" && !customElements.get("hf-app-shell-card") && customElements.define("hf-app-shell-card", k);
export {
  k as AppShellCardWC,
  k as default
};

//# sourceMappingURL=hf-app-shell-card.js.map