import { o as le } from "./rolldown-runtime.js";
import { i as ae, t as ne } from "./vendor/react.js";
import { t as oe } from "./createLucideIcon.js";
import { _ as ie, i as re, v as pe, y as ce } from "./sidebar.js";
import { t as y } from "./utils.js";
import { a as F, i as de, n as ue, o as he, t as fe } from "./_shared.js";
import { a as G, i as be, n as Y, r as me, t as ve } from "./AppShellContent.js";
var xe = [
  ["path", {
    d: "M4 5h16",
    key: "1tepv9"
  }],
  ["path", {
    d: "M4 12h16",
    key: "1lakjw"
  }],
  ["path", {
    d: "M4 19h16",
    key: "1djgab"
  }]
], ge = oe("menu", xe), s = ne();
function E({ background: e, height: l, padding: t, mobilePadding: p, gap: u, connected: a, className: h, style: b, children: x, ...o }) {
  const c = {};
  return e !== void 0 && (c["--app-shell-background"] = e), l !== void 0 && (c["--app-shell-height"] = l), t !== void 0 && (c["--app-shell-padding"] = typeof t == "number" ? `${t}px` : t), p !== void 0 && (c["--app-shell-mobile-padding"] = typeof p == "number" ? `${p}px` : p), u !== void 0 && (c["--app-shell-gap"] = typeof u == "number" ? `${u}px` : u), /* @__PURE__ */ (0, s.jsx)("div", {
    "data-slot": "app-shell",
    "data-connected": a ? "true" : void 0,
    style: {
      ...c,
      ...b
    },
    className: y("flex h-[var(--app-shell-height,100dvh)] w-full", "gap-[var(--app-shell-gap,0px)]", "p-[var(--app-shell-mobile-padding,0.5rem)] md:p-[var(--app-shell-padding,1rem)]", "bg-[var(--app-shell-background,var(--app-bg))]", h),
    ...o,
    children: x
  });
}
E.displayName = "AppShell";
var i = /* @__PURE__ */ le(ae(), 1);
function J({ panels: e, activeIndex: l, onActiveChange: t, onSidebarOpen: p, baseId: u }) {
  const a = i.useRef(null), h = i.useCallback((c) => {
    let n = null;
    switch (c.key) {
      case "ArrowRight":
        n = (l + 1) % e.length;
        break;
      case "ArrowLeft":
        n = (l - 1 + e.length) % e.length;
        break;
      case "Home":
        n = 0;
        break;
      case "End":
        n = e.length - 1;
        break;
      default:
        return;
    }
    c.preventDefault(), t(n);
    const f = a.current;
    f && f.querySelectorAll('[role="tab"]')[n]?.focus();
  }, [
    l,
    e.length,
    t
  ]), [b, x] = i.useState(null);
  i.useEffect(() => {
    const c = a.current;
    if (!c || e.length <= 1) return;
    const n = c.querySelectorAll('[role="tab"]')[l];
    if (!n) return;
    const f = n.offsetLeft, r = n.offsetWidth;
    x((v) => v && v.left === f && v.width === r ? v : {
      left: f,
      width: r
    });
  }, [l, e.length]);
  const o = p ? /* @__PURE__ */ (0, s.jsx)("button", {
    type: "button",
    onClick: p,
    className: y("flex min-h-11 min-w-11 items-center justify-center rounded-lg", "text-secondary-foreground hover:bg-accent", "active:scale-[0.95]", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", "transition-colors motion-reduce:transition-none"),
    "aria-label": "Open sidebar",
    children: /* @__PURE__ */ (0, s.jsx)(ge, { className: "size-5" })
  }) : null;
  return e.length <= 1 ? o ? /* @__PURE__ */ (0, s.jsx)("div", {
    className: "flex h-12 shrink-0 items-center border-b border-border px-3",
    children: o
  }) : null : /* @__PURE__ */ (0, s.jsxs)("div", {
    className: "flex h-12 shrink-0 items-center gap-1 border-b border-border px-3",
    children: [o, /* @__PURE__ */ (0, s.jsxs)("div", {
      ref: a,
      role: "tablist",
      className: "relative flex gap-1",
      onKeyDown: h,
      children: [b && /* @__PURE__ */ (0, s.jsx)("div", {
        className: y("absolute top-1/2 -translate-y-1/2 h-9 rounded-lg bg-accent", "transition-[left,width] duration-200 ease-[cubic-bezier(0.16,1,0.3,1)]", "motion-reduce:transition-none"),
        style: {
          left: b.left,
          width: b.width
        },
        "aria-hidden": "true"
      }), e.map((c, n) => {
        const f = c.label || `Panel ${n + 1}`, r = n === l;
        return /* @__PURE__ */ (0, s.jsx)("button", {
          id: u ? `${u}-tab-${n}` : void 0,
          type: "button",
          role: "tab",
          "aria-selected": r,
          "aria-controls": u ? `${u}-tabpanel-${n}` : void 0,
          tabIndex: r ? 0 : -1,
          onClick: () => t(n),
          className: y("relative z-10 rounded-lg px-3 min-h-9 text-sm font-medium", "transition-colors duration-150 motion-reduce:transition-none", "active:scale-[0.97]", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", r ? "text-foreground" : "text-secondary-foreground hover:text-foreground"),
          children: f
        }, n);
      })]
    })]
  });
}
J.displayName = "AppShellMobileTabBar";
var ye = "AppShell.Panel";
function O({ width: e, flex: l, expanded: t = !1, onExpandedChange: p, label: u, className: a, style: h, children: b, ...x }) {
  const o = i.useContext(G), c = i.useMemo(() => ({
    expanded: t,
    onExpandedChange: p
  }), [t, p]), n = i.useMemo(() => {
    if (!o.visible && !o.isMobile) return {
      ...h,
      opacity: 0,
      width: "0px",
      flex: "0",
      overflow: "hidden",
      pointerEvents: "none"
    };
    if (o.isMobile) return {
      ...h,
      flex: "1"
    };
    const r = {};
    return t ? r.flex = "1" : e !== void 0 ? (r.width = typeof e == "number" ? `${e}px` : e, r.maxWidth = "100%") : l !== void 0 ? r.flex = String(l) : r.flex = "1", {
      ...r,
      ...h
    };
  }, [
    o.visible,
    o.isMobile,
    t,
    e,
    l,
    h
  ]), f = !o.visible && !o.isMobile;
  return /* @__PURE__ */ (0, s.jsx)(me.Provider, {
    value: c,
    children: /* @__PURE__ */ (0, s.jsx)("div", {
      "data-slot": "app-shell-panel",
      "data-expanded": t || void 0,
      "aria-hidden": f || void 0,
      inert: f || void 0,
      ...o.panelId ? {
        role: "tabpanel",
        id: o.panelId,
        "aria-labelledby": o.tabId
      } : {},
      className: y("flex h-full min-w-0 flex-col", f && "overflow-clip", e !== void 0 && !t && !f && !o.isMobile && "shrink-0", o.isMobile && "animate-[delight-fade-in_150ms_ease-out_both]", o.isMobile && "motion-reduce:animate-none", "transition-[flex,width,opacity] duration-300 ease-[cubic-bezier(0.16,1,0.3,1)]", "motion-reduce:transition-none", a),
      style: n,
      ...x,
      children: b
    })
  });
}
O.displayName = "AppShell.Panel";
O.__appShellType = ye;
function I({ background: e = "var(--app-bg)", height: l = "100dvh", padding: t = 16, mobilePadding: p, gap: u = 12, connected: a = !1, skipToId: h, activePanel: b, onActivePanelChange: x, defaultActivePanel: o = 0, className: c, children: n, ...f }) {
  const r = ie(), v = i.useId(), [X, Z] = i.useState(o), S = b ?? X, ee = i.useCallback((d) => {
    b === void 0 && Z((m) => m === d ? m : d), x?.(d);
  }, [b, x]), { panels: j, panelInfos: $, sidebarChild: k, otherChildren: B } = i.useMemo(() => {
    const d = [], m = [];
    let g = null;
    const w = [];
    return i.Children.forEach(n, (A) => {
      if (i.isValidElement(A))
        if (A.type?.__appShellType === "AppShell.Panel") {
          const K = A;
          m.push({ label: K.props.label }), d.push(K);
        } else A.type === z ? g = A : w.push(A);
    }), {
      panels: d,
      panelInfos: m,
      sidebarChild: g,
      otherChildren: w
    };
  }, [n]), C = j.findIndex((d) => d.props.expanded), N = C !== -1, M = N ? 1 : Math.min(j.length, 2), R = i.useMemo(() => N ? j.map((d, m) => ({
    panel: d,
    visible: m === C,
    index: m
  })) : j.map((d, m) => ({
    panel: d,
    visible: m < 2,
    index: m
  })), [
    j,
    N,
    C
  ]), P = r && j.length > 1, T = i.useCallback((d) => M === 1 ? "only" : N ? d === C ? "only" : "last" : d === 0 ? "first" : "last", [
    M,
    N,
    C
  ]), D = i.useMemo(() => ({
    connected: a,
    panelCount: M,
    getPanelPosition: T
  }), [
    a,
    M,
    T
  ]), H = i.useContext(re), _ = H?.setOpenMobile, te = i.useCallback(() => {
    _?.(!0);
  }, [_]), se = i.useCallback((d) => {
    _?.(d);
  }, [_]), W = h ? /* @__PURE__ */ (0, s.jsx)("a", {
    href: `#${h}`,
    className: "sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-50 focus:rounded-md focus:bg-background focus:px-4 focus:py-2 focus:text-sm focus:font-medium focus:text-foreground focus:shadow-sm focus:ring-2 focus:ring-ring",
    children: "Skip to content"
  }) : null, q = i.useMemo(() => R.map(({ panel: d, visible: m, index: g }) => {
    if (r && g !== S) return null;
    const w = {
      visible: r ? !0 : m,
      isMobile: r,
      tabId: P ? `${v}-tab-${g}` : void 0,
      panelId: P ? `${v}-tabpanel-${g}` : void 0
    };
    return /* @__PURE__ */ (0, s.jsx)(be.Provider, {
      value: g,
      children: /* @__PURE__ */ (0, s.jsx)(G.Provider, {
        value: w,
        children: d
      })
    }, g);
  }), [
    R,
    r,
    S,
    P,
    v
  ]), V = P && $[S] ? $[S].label || `Panel ${S + 1}` : null;
  return r ? /* @__PURE__ */ (0, s.jsx)(Y, {
    value: D,
    children: /* @__PURE__ */ (0, s.jsxs)(E, {
      background: e,
      height: l,
      padding: t,
      mobilePadding: p,
      gap: 0,
      connected: a,
      className: c,
      ...f,
      children: [
        W,
        k && /* @__PURE__ */ (0, s.jsx)(ce, {
          open: H?.openMobile ?? !1,
          onOpenChange: se,
          children: /* @__PURE__ */ (0, s.jsx)(pe, {
            side: "left",
            showCloseButton: !1,
            className: "w-[280px] p-0",
            "aria-label": "Sidebar navigation",
            children: k
          })
        }),
        /* @__PURE__ */ (0, s.jsxs)("div", {
          className: "flex h-full min-w-0 flex-1 flex-col overflow-clip",
          children: [/* @__PURE__ */ (0, s.jsx)(J, {
            panels: $,
            activeIndex: S,
            onActiveChange: ee,
            onSidebarOpen: k ? te : void 0,
            baseId: v
          }), /* @__PURE__ */ (0, s.jsx)("div", {
            className: "flex min-h-0 flex-1",
            children: q
          })]
        }),
        V && /* @__PURE__ */ (0, s.jsxs)("div", {
          className: "sr-only",
          role: "status",
          "aria-live": "polite",
          children: [V, " panel active"]
        }),
        B
      ]
    })
  }) : /* @__PURE__ */ (0, s.jsx)(Y, {
    value: D,
    children: /* @__PURE__ */ (0, s.jsxs)(E, {
      background: e,
      height: l,
      padding: t,
      mobilePadding: p,
      gap: a ? 0 : u,
      connected: a,
      className: c,
      ...f,
      children: [
        W,
        k,
        q,
        B
      ]
    })
  });
}
I.displayName = "AppShell";
function z({ width: e, expandedWidth: l = "280px", collapsedWidth: t = "64px", className: p, style: u, children: a, ...h }) {
  const b = !e;
  return /* @__PURE__ */ (0, s.jsx)("div", {
    "data-slot": "app-shell-sidebar",
    style: {
      ...b ? {
        "--app-shell-sidebar-collapsed": t,
        "--app-shell-sidebar-expanded": l
      } : { "--app-shell-sidebar-width": e },
      ...u
    },
    className: y("flex h-full shrink-0 flex-col overflow-clip", "transition-[width] duration-300 ease-[cubic-bezier(0.16,1,0.3,1)]", "motion-reduce:transition-none", b ? ["w-[var(--app-shell-sidebar-collapsed,64px)]", "[&:has([data-state=expanded])]:w-[var(--app-shell-sidebar-expanded,280px)]"] : "w-[var(--app-shell-sidebar-width,64px)]", p),
    ...h,
    children: a
  });
}
z.displayName = "AppShell.Sidebar";
function Q({ className: e, children: l, ...t }) {
  return /* @__PURE__ */ (0, s.jsx)("div", {
    "data-slot": "app-shell-header",
    className: y("shrink-0", e),
    ...t,
    children: l
  });
}
Q.displayName = "AppShell.Header";
var Se = Object.assign(I, {
  Root: I,
  Sidebar: z,
  Header: Q,
  Panel: O,
  Content: ve
}), L = {
  background: "string",
  height: "string",
  padding: "string",
  mobilePadding: "string",
  gap: "string",
  connected: "boolean"
}, U = class extends fe {
  get propDefs() {
    return L;
  }
  static get observedAttributes() {
    return Object.keys(L).map(ue);
  }
  _renderReact() {
    const e = this._readAllProps(), l = this._getSlot("sidebar"), t = this._getSlot("content") || this._getDefaultSlot(), p = [];
    l && p.push(F(l)), t && p.push(F(t));
    const u = (a) => {
      if (a != null) {
        if (typeof a == "number") return a;
        if (typeof a == "string") {
          const h = Number(a);
          return Number.isNaN(h) ? a : h;
        }
      }
    };
    return i.createElement(Se, {
      background: e.background || "transparent",
      height: e.height || "100vh",
      padding: u(e.padding) ?? 16,
      mobilePadding: u(e.mobilePadding),
      gap: u(e.gap) ?? 12,
      connected: e.connected === !0 || e.connected === "true"
    }, ...p);
  }
};
de(U, L);
he("hf-app-shell", U);
export {
  U as AppShellWC,
  U as default
};

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