@alfadocs/ui-kit-debug 1.57.0 → 1.58.0

package/dist/_chunks/sidebar-D4Wllqfz.js

@@ -0,0 +1,2029 @@
+import { jsxs as h, Fragment as xe, jsx as r } from "react/jsx-runtime";
+import { useId as ye, useState as re, useRef as F, useCallback as L, useEffect as ne, useMemo as he, createContext as ce, useContext as ue, forwardRef as H } from "react";
+import * as pe from "@radix-ui/react-dialog";
+import * as Se from "@radix-ui/react-collapsible";
+import * as be from "@radix-ui/react-accordion";
+import * as E from "@radix-ui/react-tooltip";
+import { a as Xe } from "./accordion-Ch3xp0mX.js";
+import { S as We } from "./scroll-area-CY5SLYNw.js";
+import { Slot as Ze } from "@radix-ui/react-slot";
+import { c as ee } from "./index-D2ZczOXr.js";
+import { useTranslation as de } from "react-i18next";
+import { u as Je } from "./registry-DvAUVLHh.js";
+import { u as Qe } from "./use-edge-resize-DHbyQwu8.js";
+import { c as es } from "./compose-refs-C0k0tdqF.js";
+import { a as ss, b as ts, d as ns } from "./input-surface-iBmxVBfr.js";
+import { u as rs } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
+import { i as as } from "./is-development-CLUAnsU7.js";
+import { X as is } from "./x-B5YnXwCz.js";
+import { c as Me } from "./createLucideIcon-DhHxpK9K.js";
+import { G as os } from "./grip-vertical-onSb1JXO.js";
+import { C as we } from "./chevron-right-I9AeSxH2.js";
+import { S as ds } from "./star-Bf9L2Uot.js";
+import { T as ls } from "./trending-up-C_luYBzS.js";
+/**
+ * @license lucide-react v1.22.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const cs = [
+  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
+  ["path", { d: "M9 3v18", key: "fh3hqa" }],
+  ["path", { d: "m16 15-3-3 3-3", key: "14y99z" }]
+], us = Me("panel-left-close", cs);
+/**
+ * @license lucide-react v1.22.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const ms = [
+  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
+  ["path", { d: "M9 3v18", key: "fh3hqa" }],
+  ["path", { d: "m14 9 3 3-3 3", key: "8010ee" }]
+], fs = Me("panel-left-open", ms), ps = {
+  id: "sidebar",
+  capabilities: ["expand"],
+  state: {
+    isCollapsed: {
+      type: "boolean",
+      descriptionKey: "ui.agent.sidebar.state.isCollapsed",
+      description: "True when the sidebar is in its collapsed (rail) state.",
+      read: (e) => e.getIsCollapsed()
+    }
+  },
+  actions: {
+    toggle_collapsed: {
+      // Pure ephemeral chrome state — toggling the rail loses no data.
+      safety: "read",
+      descriptionKey: "ui.agent.sidebar.actions.toggleCollapsed",
+      description: "Toggle the sidebar between collapsed and expanded.",
+      invoke: (e) => {
+        e.toggleCollapsed();
+      }
+    }
+  },
+  domHooks: {
+    root: { attr: "data-component", value: "sidebar" },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    },
+    item: {
+      attr: "data-nav-id",
+      sourceProp: "navId",
+      description: "Each Sidebar.Item emits its `navId` prop as data-nav-id. Agents activate a nav item via native click on the matching anchor."
+    }
+  }
+}, Ne = ce({
+  enabled: !1,
+  move: null
+}), Ce = () => ue(Ne), _e = ce(null), oe = (e, t) => e.sectionId === t.sectionId && e.index === t.index, Be = "[data-sidebar-item-id]", Fe = "[data-sidebar-section-id]";
+function le(e, t) {
+  var a;
+  const s = (a = e.parentElement) == null ? void 0 : a.closest(Fe);
+  return s && t.contains(s) ? s.dataset.sidebarSectionId ?? null : null;
+}
+function vs(e, t) {
+  var c;
+  const s = e.querySelector("[data-sidebar-body]") ?? e, a = Array.from(
+    s.querySelectorAll(`${Fe},${Be}`)
+  ), i = /* @__PURE__ */ new Map([[null, []]]), u = /* @__PURE__ */ new Map(), o = /* @__PURE__ */ new Map();
+  let p = null;
+  for (const l of a) {
+    const v = l.dataset.sidebarSectionId;
+    if (v !== void 0) {
+      i.set(v, []), u.set(v, l.dataset.sidebarSectionOpen !== "false"), o.set(v, l.dataset.sidebarSectionLabel ?? "");
+      continue;
+    }
+    if (l.dataset.sidebarItemId === t) {
+      p = l;
+      continue;
+    }
+    const y = le(l, s);
+    (c = i.get(y)) == null || c.push(l);
+  }
+  if (!p) return null;
+  const m = (l) => {
+    var v;
+    return (((v = i.get(l)) == null ? void 0 : v.length) ?? 0) + 1;
+  }, g = [], I = i.get(null) ?? [], N = I.length === 0 && le(p, s) === null;
+  for (const l of a) {
+    const v = l.dataset.sidebarSectionId;
+    if (v !== void 0) {
+      const w = i.get(v) ?? [];
+      (!u.get(v) || w.length === 0) && g.push({
+        sectionId: v,
+        index: w.length,
+        total: m(v),
+        indicator: { kind: "section", sectionId: v }
+      });
+      continue;
+    }
+    if (l === p) {
+      N && g.push({
+        sectionId: null,
+        index: 0,
+        total: 1,
+        indicator: { kind: "item", itemId: t, edge: "before" }
+      });
+      continue;
+    }
+    const y = le(l, s);
+    if (y !== null && !u.get(y)) continue;
+    const A = i.get(y) ?? [], D = A.indexOf(l), T = l.dataset.sidebarItemId ?? "";
+    g.push({
+      sectionId: y,
+      index: D,
+      total: m(y),
+      indicator: { kind: "item", itemId: T, edge: "before" }
+    }), D === A.length - 1 && g.push({
+      sectionId: y,
+      index: D + 1,
+      total: m(y),
+      indicator: { kind: "item", itemId: T, edge: "after" }
+    });
+  }
+  I.length === 0 && !N && g.push({
+    sectionId: null,
+    index: 0,
+    total: 1,
+    indicator: { kind: "list" }
+  });
+  const k = le(p, s), R = (i.get(k) ?? []).filter(
+    (l) => l.compareDocumentPosition(p) & Node.DOCUMENT_POSITION_FOLLOWING
+  ).length;
+  return {
+    places: g,
+    originIndex: g.findIndex(
+      (l) => oe(l, { sectionId: k, index: R })
+    ),
+    emptySectionIds: [...i.entries()].filter(([l, v]) => l !== null && u.get(l) && !v.length).map(([l]) => l),
+    listEmpty: I.length === 0 && !N,
+    sectionLabels: o
+  };
+}
+function gs(e, t) {
+  const s = e.querySelector("[data-sidebar-body]") ?? e, a = le(t, s), i = Array.from(s.querySelectorAll(Be)).filter(
+    (u) => u !== t && le(u, s) === a && u.compareDocumentPosition(t) & Node.DOCUMENT_POSITION_FOLLOWING
+  ).length;
+  return { sectionId: a, index: i };
+}
+function He(e, t) {
+  var a;
+  const { indicator: s } = t;
+  return s.kind === "item" ? e.querySelector(
+    `[data-sidebar-item-id="${CSS.escape(s.itemId)}"]`
+  ) : s.kind === "list" ? e.querySelector("[data-sidebar-drop-zone-list]") : e.querySelector(
+    `[data-sidebar-drop-zone="${CSS.escape(s.sectionId)}"]`
+  ) ?? ((a = e.querySelector(
+    `[data-sidebar-section-id="${CSS.escape(s.sectionId)}"]`
+  )) == null ? void 0 : a.querySelector("[data-sidebar-section-heading]")) ?? null;
+}
+function bs(e, t) {
+  var a;
+  const s = (a = He(e, t)) == null ? void 0 : a.getBoundingClientRect();
+  return s ? t.indicator.kind === "item" ? t.indicator.edge === "before" ? s.top : s.bottom : s.top + s.height / 2 : t.indicator.kind === "item" ? Number.POSITIVE_INFINITY : e.getBoundingClientRect().bottom;
+}
+const hs = 450, xs = 6, ys = 5e3, Ie = 48, ws = 14;
+function Ss({
+  onMoveItem: e,
+  enabled: t,
+  rootRef: s,
+  quietFocusRef: a
+}) {
+  const { t: i } = de("ui"), u = ye(), [o, p] = re(null), m = F(null), g = F([]), I = F(/* @__PURE__ */ new Map()), N = F(/* @__PURE__ */ new Map()), k = F(null), R = F(e);
+  R.current = e;
+  const c = F(null), l = F(null), v = L((n) => {
+    m.current = n, p(n);
+  }, []), [y, A] = re(""), D = F(!1), T = L((n) => {
+    D.current = !D.current, A(D.current ? n : `${n}​`);
+  }, []), w = L(
+    (n) => n.sectionId === null ? i("navigation.sidebar.move.inList", {
+      position: n.index + 1,
+      total: n.total
+    }) : i("navigation.sidebar.move.inSection", {
+      section: I.current.get(n.sectionId) ?? "",
+      position: n.index + 1,
+      total: n.total
+    }),
+    [i]
+  ), O = L(
+    (n, f, x) => {
+      var te;
+      const d = s.current;
+      if (!d) return !1;
+      const S = vs(d, n);
+      if (!S || S.originIndex < 0) return !1;
+      g.current = S.places, I.current = S.sectionLabels;
+      const B = S.places[S.originIndex], Z = x.getAttribute("aria-label") ?? ((te = x.textContent) == null ? void 0 : te.trim()) ?? "";
+      return v({
+        itemId: n,
+        label: Z,
+        via: f,
+        origin: B,
+        target: B,
+        emptySectionIds: S.emptySectionIds,
+        listEmpty: S.listEmpty
+      }), T(
+        i("navigation.sidebar.move.pickedUp", {
+          item: Z,
+          place: w(B)
+        })
+      ), !0;
+    },
+    [s, v, T, i, w]
+  ), z = L(
+    (n, f) => {
+      const x = m.current;
+      !x || oe(x.target, n) || (v({ ...x, target: n }), f && (T(w(n)), requestAnimationFrame(() => {
+        var S, B;
+        const d = s.current;
+        d && ((B = (S = He(d, n)) == null ? void 0 : S.scrollIntoView) == null || B.call(S, { block: "nearest" }));
+      })));
+    },
+    [v, T, w, s]
+  ), P = L(() => {
+    var B, Z;
+    const n = m.current;
+    if (!n) return;
+    v(null), g.current = [];
+    const { itemId: f, origin: x, target: d, label: S } = n;
+    oe(x, d) || (k.current = {
+      itemId: f,
+      sectionId: d.sectionId,
+      index: d.index,
+      until: Date.now() + ys
+    }, d.sectionId !== null && ((B = N.current.get(d.sectionId)) == null || B()), (Z = R.current) == null || Z.call(R, {
+      itemId: f,
+      toSectionId: d.sectionId,
+      index: d.index
+    })), T(
+      i("navigation.sidebar.move.dropped", {
+        item: S,
+        place: w(d)
+      })
+    );
+  }, [v, T, i, w]), j = L(() => {
+    const n = m.current;
+    n && (v(null), g.current = [], T(
+      i("navigation.sidebar.move.cancelled", {
+        item: n.label,
+        place: w(n.origin)
+      })
+    ));
+  }, [v, T, i, w]), X = L(
+    (n, f) => {
+      const x = m.current, d = !n.altKey && !n.ctrlKey && !n.metaKey && !n.shiftKey;
+      if (!x) {
+        n.key === " " && d && !n.repeat && (n.preventDefault(), O(f, "keyboard", n.currentTarget));
+        return;
+      }
+      if (x.itemId !== f || x.via !== "keyboard") return;
+      const S = g.current, B = S.findIndex((te) => oe(te, x.target)), Z = (te) => {
+        const me = S[Math.max(0, Math.min(S.length - 1, te))];
+        me && z(me, !0);
+      };
+      switch (n.key) {
+        case "ArrowDown":
+          n.preventDefault(), Z(B + 1);
+          break;
+        case "ArrowUp":
+          n.preventDefault(), Z(B - 1);
+          break;
+        case "Home":
+          n.preventDefault(), Z(0);
+          break;
+        case "End":
+          n.preventDefault(), Z(S.length - 1);
+          break;
+        case " ":
+        case "Enter":
+          n.preventDefault(), n.repeat || P();
+          break;
+        case "Escape":
+          n.preventDefault(), n.stopPropagation(), j();
+          break;
+        case "Tab":
+          j();
+          break;
+      }
+    },
+    [O, z, P, j]
+  ), U = L(
+    (n) => {
+      const f = m.current;
+      (f == null ? void 0 : f.via) === "keyboard" && f.itemId === n && j();
+    },
+    [j]
+  ), b = L(() => {
+    var f;
+    const n = c.current;
+    n != null && n.timer && clearTimeout(n.timer), n != null && n.frame && cancelAnimationFrame(n.frame), c.current = null, (f = l.current) == null || f.call(l), l.current = null;
+  }, []), M = L(
+    (n, f) => {
+      if (m.current || c.current || !n.isPrimary || n.button !== 0) return;
+      const x = n.pointerType === "touch", d = {
+        pointerId: n.pointerId,
+        itemId: f,
+        node: n.currentTarget,
+        touch: x,
+        startX: n.clientX,
+        startY: n.clientY,
+        dragging: !1,
+        timer: null,
+        lastY: n.clientY,
+        frame: 0
+      };
+      c.current = d;
+      const S = () => {
+        var C, J;
+        if (!O(d.itemId, "pointer", d.node)) {
+          b();
+          return;
+        }
+        d.dragging = !0, (J = (C = window.getSelection) == null ? void 0 : C.call(window)) == null || J.removeAllRanges();
+      }, B = (C) => {
+        const J = s.current;
+        if (!J) return;
+        let Q = null, fe = Number.POSITIVE_INFINITY;
+        for (const ae of g.current) {
+          const ie = Math.abs(bs(J, ae) - C);
+          ie < fe && (Q = ae, fe = ie);
+        }
+        Q && z(Q, !1);
+      }, Z = () => {
+        var De, Ae;
+        if (d.frame = 0, !d.dragging) return;
+        const C = (Ae = (De = s.current) == null ? void 0 : De.querySelector("[data-sidebar-body]")) == null ? void 0 : Ae.closest("[data-radix-scroll-area-viewport]");
+        if (!C) return;
+        const J = C.getBoundingClientRect(), Q = J.top + Ie - d.lastY, fe = d.lastY - (J.bottom - Ie), ae = Math.max(Q, fe);
+        if (ae <= 0) return;
+        const ie = Math.ceil(ws * Math.min(1, ae / Ie)), ge = C.scrollTop;
+        C.scrollTop += Q > 0 ? -ie : ie, C.scrollTop !== ge && (B(d.lastY), d.frame = requestAnimationFrame(Z));
+      }, te = (C) => {
+        if (C.pointerId === d.pointerId) {
+          if (!d.dragging) {
+            if (Math.hypot(
+              C.clientX - d.startX,
+              C.clientY - d.startY
+            ) < xs) return;
+            if (d.touch) {
+              b();
+              return;
+            }
+            if (S(), !d.dragging) return;
+          }
+          d.lastY = C.clientY, B(C.clientY), d.frame || (d.frame = requestAnimationFrame(Z));
+        }
+      }, me = (C) => {
+        var ie;
+        if (C.pointerId !== d.pointerId) return;
+        const J = d.dragging;
+        if (b(), !J) return;
+        const Q = (ie = s.current) == null ? void 0 : ie.getBoundingClientRect();
+        if (!Q || C.clientX < Q.left || C.clientX > Q.right || C.clientY < Q.top || C.clientY > Q.bottom) {
+          j();
+          return;
+        }
+        P();
+        const ae = (ge) => {
+          ge.preventDefault(), ge.stopPropagation();
+        };
+        window.addEventListener("click", ae, {
+          capture: !0,
+          once: !0
+        }), setTimeout(() => window.removeEventListener("click", ae, !0), 0);
+      }, ke = (C) => {
+        if (C.pointerId !== d.pointerId) return;
+        const J = d.dragging;
+        b(), J && j();
+      }, Te = (C) => C.preventDefault(), Ee = (C) => {
+        C.key !== "Escape" || !d.dragging || (C.preventDefault(), b(), j());
+      };
+      window.addEventListener("pointermove", te), window.addEventListener("pointerup", me), window.addEventListener("pointercancel", ke), window.addEventListener("keydown", Ee, !0), x && (window.addEventListener("contextmenu", Te, !0), d.timer = setTimeout(() => {
+        d.timer = null, S();
+      }, hs)), l.current = () => {
+        window.removeEventListener("pointermove", te), window.removeEventListener("pointerup", me), window.removeEventListener("pointercancel", ke), window.removeEventListener("keydown", Ee, !0), window.removeEventListener("contextmenu", Te, !0);
+      };
+    },
+    [O, z, P, j, b, s]
+  );
+  ne(() => b, [b]);
+  const Y = F(null), q = L((n) => {
+    var f;
+    (f = c.current) != null && f.dragging && n.preventDefault();
+  }, []), V = L(
+    (n) => {
+      var f;
+      Y.current !== n && ((f = Y.current) == null || f.removeEventListener("touchmove", q), Y.current = n, n == null || n.addEventListener("touchmove", q, { passive: !1 }));
+    },
+    [q]
+  ), W = F(t);
+  W.current = t;
+  const K = L(
+    (n) => V(n && W.current ? n : null),
+    [V]
+  );
+  ne(() => {
+    V(t ? s.current : null);
+  }, [t, V, s]), ne(() => () => V(null), [V]), ne(() => {
+    !t && m.current && j();
+  }, [t, j]);
+  const _ = L((n, f) => (N.current.set(n, f), () => {
+    N.current.get(n) === f && N.current.delete(n);
+  }), []), $ = L(() => {
+    const n = k.current, f = s.current;
+    if (!n || !f) return;
+    if (Date.now() > n.until) {
+      k.current = null;
+      return;
+    }
+    const x = f.querySelector(
+      `[data-sidebar-item-id="${CSS.escape(n.itemId)}"]`
+    );
+    if (!x) return;
+    const d = document.activeElement, S = d !== null && d !== document.body && d !== x;
+    if (!oe(gs(f, x), n)) {
+      S && (k.current = null);
+      return;
+    }
+    k.current = null, !(d === x || S) && (a.current = !0, x.focus(), a.current = !1);
+  }, [s, a]);
+  return {
+    context: he(
+      () => t ? {
+        enabled: t,
+        instructionsId: u,
+        move: o,
+        onItemKeyDown: X,
+        onItemPointerDown: M,
+        onItemBlur: U,
+        registerSection: _
+      } : { enabled: !1, move: null, registerSection: _ },
+      [
+        t,
+        u,
+        o,
+        X,
+        M,
+        U,
+        _
+      ]
+    ),
+    message: y,
+    instructionsId: u,
+    restoreFocus: $,
+    touchGuardRef: K,
+    /** True while any move runs: Escape cancels it, not the drawer. */
+    cancelIfMoving: () => m.current ? (j(), !0) : !1
+  };
+}
+const ze = ce({
+  mode: "expanded",
+  density: "default"
+}), G = () => ue(ze), Ue = "ui.sidebar.state";
+function Is(e) {
+  if (typeof window > "u") return e;
+  try {
+    const t = window.localStorage.getItem(Ue);
+    if (t === "expanded" || t === "icon" || t === "overlay") return t;
+  } catch {
+  }
+  return e;
+}
+function Ns(e) {
+  if (!(typeof window > "u"))
+    try {
+      window.localStorage.setItem(Ue, e);
+    } catch {
+    }
+}
+const Pe = ee(
+  [
+    "ds:flex ds:flex-col",
+    // `--sidebar-surface`: the page background in light mode (white-on-white
+    // chrome separated by --shadow-md). In dark mode the Header already
+    // blends with --background, so the token steps the sidebar one layer
+    // down (blue-600) to keep it visually distinct from the header band —
+    // matches the PDF dark mockups' "flat Dark Blue surface with subtle
+    // depth via layering" recipe. A token, so a light sidebar nested in a
+    // dark page stays light.
+    "ds:bg-[var(--sidebar-surface,var(--background))] ds:text-[var(--foreground)]",
+    // The inline-end hairline is drawn in the accessible themes only
+    // (--accessible-edge-width is 0 elsewhere).
+    "ds:[:where(&)]:border-e-[length:var(--accessible-edge-width,0px)] ds:border-[var(--border)]",
+    // Elevation is set per mode below. Forced colours strip shadows, so
+    // there only the accessible themes' `border-e` separates the rail.
+    "ds:transition-[inline-size] ds:duration-[var(--animation-duration)]",
+    "ds:motion-reduce:transition-none",
+    // While the resize handle is dragging, the width must track the
+    // pointer 1:1 — the data attribute suppresses the width transition.
+    "ds:data-[resizing]:transition-none"
+  ].join(" "),
+  {
+    variants: {
+      // Tokenised widths (Linear / Jira proportions) and one elevation per
+      // mode: chrome `--shadow-md` docked, `--shadow-xl` for the drawer, none
+      // in the accessible themes. `[:where(&)]` lets a className shadow win.
+      mode: {
+        // Docked, `relative z-[1]` lifts the rail over a sibling that paints
+        // a background (AppFrame's <main>), which would cover its shadow. The
+        // drawer must never get them: they beat its `fixed` and `h-dvh`.
+        expanded: "ds:relative ds:z-[1] ds:h-full ds:w-[var(--sidebar-modern-expanded-size)] ds:[:where(&)]:[box-shadow:var(--accessible-off,var(--shadow-md))]",
+        icon: "ds:relative ds:z-[1] ds:h-full ds:w-[var(--sidebar-modern-icon-size)] ds:[:where(&)]:[box-shadow:var(--accessible-off,var(--shadow-md))]",
+        overlay: "ds:w-[var(--sidebar-modern-expanded-size)] ds:[:where(&)]:[box-shadow:var(--accessible-off,var(--shadow-xl))]"
+      },
+      density: {
+        default: "",
+        compact: ""
+      }
+    },
+    defaultVariants: { mode: "expanded", density: "default" }
+  }
+), zs = 192, Cs = 384, js = 248, ks = [
+  "ds:absolute ds:[inset-block:0] ds:end-0 ds:z-[2]",
+  "ds:w-[var(--resizable-handle-size)]",
+  "ds:cursor-col-resize ds:select-none ds:touch-none",
+  "ds:hover:bg-[var(--accent)] ds:focus-visible:bg-[var(--accent)]",
+  "ds:data-[resizing]:bg-[var(--accent)]",
+  "ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
+  "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
+  "ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+  "ds:forced-colors:focus-visible:outline-[CanvasText]",
+  "ds:before:absolute ds:before:content-['']",
+  "ds:before:[inset-block:0]",
+  "ds:before:[inline-size:var(--min-target-size)]",
+  "ds:before:[inset-inline:calc(0px_-_(var(--min-target-size)_-_var(--resizable-handle-size))_/_2)]"
+].join(" "), Ts = H(
+  ({
+    state: e,
+    defaultState: t = "expanded",
+    onStateChange: s,
+    density: a = "default",
+    open: i,
+    onOpenChange: u,
+    resizable: o = !1,
+    onMoveItem: p,
+    "aria-label": m,
+    className: g,
+    children: I,
+    id: N,
+    ...k
+  }, R) => {
+    const { t: c } = de("ui"), l = e !== void 0, [v, y] = re(
+      () => Is(t)
+    ), A = l ? e : v;
+    ne(() => {
+      l || Ns(v);
+    }, [v, l]);
+    const D = L(
+      (_) => {
+        l || y(_), s == null || s(_);
+      },
+      [l, s]
+    ), T = m ?? c("navigation.sidebar.label"), w = ye(), O = N ?? w, z = F(A);
+    ne(() => {
+      z.current = A;
+    }, [A]);
+    const P = he(
+      () => ({
+        getIsCollapsed: () => z.current !== "expanded",
+        toggleCollapsed: () => {
+          const _ = z.current === "expanded" ? "icon" : "expanded";
+          D(_);
+        }
+      }),
+      [D]
+    );
+    Je(ps, P, N);
+    const j = F(null), X = F(null), U = F(!1), { separatorProps: b, isResizing: M } = Qe({
+      edge: "inline-end",
+      targetRef: j,
+      cssProperty: "--sidebar-modern-expanded-size",
+      minSize: zs,
+      maxSize: Cs,
+      defaultSize: js,
+      disabled: !o || A !== "expanded"
+    }), Y = o && A === "expanded", q = Ss({
+      onMoveItem: p,
+      enabled: p !== void 0 && A !== "icon",
+      rootRef: j,
+      quietFocusRef: U
+    }), { touchGuardRef: V } = q, W = he(
+      () => es(R, j, V),
+      [R, V]
+    );
+    rs(() => q.restoreFocus());
+    const K = p !== void 0 ? /* @__PURE__ */ h(xe, { children: [
+      /* @__PURE__ */ r("span", { id: q.instructionsId, hidden: !0, children: c("navigation.sidebar.move.instructions") }),
+      /* @__PURE__ */ r(
+        "span",
+        {
+          role: "status",
+          "aria-live": "polite",
+          "data-sidebar-move-status": "",
+          className: "ds:sr-only",
+          children: q.message
+        }
+      )
+    ] }) : null;
+    return A === "overlay" ? /* @__PURE__ */ r(
+      ze.Provider,
+      {
+        value: {
+          mode: "overlay",
+          density: a,
+          transitionTo: D,
+          navElementId: O,
+          quietFocusRef: U
+        },
+        children: /* @__PURE__ */ r(E.Provider, { delayDuration: 300, children: /* @__PURE__ */ r(pe.Root, { open: i, onOpenChange: u, children: /* @__PURE__ */ h(pe.Portal, { children: [
+          /* @__PURE__ */ r(
+            pe.Overlay,
+            {
+              className: [
+                "ds:fixed ds:inset-0 ds:z-[var(--z-modal-backdrop)]",
+                "ds:bg-[var(--foreground)]/20 ds:backdrop-blur-sm",
+                "ds:data-[state=open]:animate-in ds:data-[state=open]:fade-in",
+                "ds:data-[state=closed]:animate-out ds:data-[state=closed]:fade-out",
+                "ds:motion-reduce:animate-none"
+              ].join(" ")
+            }
+          ),
+          /* @__PURE__ */ h(
+            pe.Content,
+            {
+              onOpenAutoFocus: (_) => {
+                var se;
+                X.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+                const $ = (se = j.current) == null ? void 0 : se.querySelector(
+                  '[aria-current="page"]'
+                );
+                U.current = !0, $ == null || $.focus(), U.current = !1, $ && document.activeElement === $ && _.preventDefault();
+              },
+              onCloseAutoFocus: (_) => {
+                var se;
+                const $ = document.activeElement;
+                $ && $ !== document.body || (se = X.current) != null && se.isConnected && (_.preventDefault(), X.current.focus());
+              },
+              onEscapeKeyDown: (_) => {
+                q.cancelIfMoving() && _.preventDefault();
+              },
+              "aria-label": T,
+              className: [
+                "ds:fixed ds:z-[var(--z-modal)]",
+                // `start-0`/`top-0` — the `inset-inline-start-0` /
+                // `inset-block-start-0` spellings are not Tailwind
+                // utilities and compiled to nothing.
+                "ds:start-0 ds:top-0",
+                "ds:h-dvh",
+                Pe({ mode: "overlay", density: a }),
+                "ds:data-[state=open]:animate-in ds:data-[state=closed]:animate-out",
+                "ds:data-[state=open]:slide-in-from-left ds:data-[state=closed]:slide-out-to-left",
+                "ds:rtl:data-[state=open]:slide-in-from-right ds:rtl:data-[state=closed]:slide-out-to-right",
+                "ds:motion-reduce:animate-none",
+                "ds:focus:outline-none",
+                g ?? ""
+              ].filter(Boolean).join(" "),
+              children: [
+                /* @__PURE__ */ h(
+                  "nav",
+                  {
+                    ref: W,
+                    id: O,
+                    "aria-label": T,
+                    "data-component": "sidebar",
+                    "data-component-id": N,
+                    className: "ds:flex ds:flex-col ds:h-full",
+                    ...k,
+                    children: [
+                      /* @__PURE__ */ r(Ne.Provider, { value: q.context, children: I }),
+                      K
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ r(pe.Close, { asChild: !0, children: /* @__PURE__ */ r(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": c("navigation.sidebar.close"),
+                    className: [
+                      "ds:absolute ds:top-[var(--spacing-sm)] ds:end-[var(--spacing-sm)]",
+                      "ds:inline-flex ds:items-center ds:justify-center",
+                      "ds:min-w-[var(--min-target-size)] ds:min-h-[var(--min-target-size)]",
+                      "ds:rounded-[var(--radius-sm)] ds:text-[var(--muted-foreground)]",
+                      "ds:hover:bg-[var(--muted)]/20 ds:focus-visible:outline-[length:var(--focus-ring-width)]",
+                      "ds:focus-visible:outline-solid ds:focus-visible:outline-[var(--ring)]",
+                      "ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]"
+                    ].join(" "),
+                    children: /* @__PURE__ */ r(is, { "aria-hidden": "true", className: "ds:size-4" })
+                  }
+                ) })
+              ]
+            }
+          )
+        ] }) }) })
+      }
+    ) : /* @__PURE__ */ r(
+      ze.Provider,
+      {
+        value: {
+          mode: A,
+          density: a,
+          transitionTo: D,
+          navElementId: O,
+          quietFocusRef: U
+        },
+        children: /* @__PURE__ */ r(E.Provider, { delayDuration: 300, children: /* @__PURE__ */ h(
+          "nav",
+          {
+            ref: W,
+            id: O,
+            "aria-label": T,
+            "data-component": "sidebar",
+            "data-component-id": N,
+            "data-mode": A,
+            "data-density": a,
+            "data-resizing": M ? "" : void 0,
+            className: [
+              Pe({ mode: A, density: a }),
+              a === "compact" ? "ds:density-compact" : "",
+              g ?? ""
+            ].filter(Boolean).join(" "),
+            ...k,
+            children: [
+              /* @__PURE__ */ r(Ne.Provider, { value: q.context, children: I }),
+              K,
+              Y ? /* @__PURE__ */ r(
+                "div",
+                {
+                  ...b,
+                  "aria-label": c("navigation.sidebar.resize"),
+                  "data-resizing": M ? "" : void 0,
+                  className: ks
+                }
+              ) : null
+            ]
+          }
+        ) })
+      }
+    );
+  }
+);
+Ts.displayName = "Sidebar";
+const Es = H(({ className: e, ...t }, s) => {
+  const { mode: a } = G();
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      ref: s,
+      className: [
+        "ds:relative ds:flex ds:items-center ds:gap-[var(--spacing-xs)]",
+        "ds:min-h-[var(--min-target-size)]",
+        // Expanded uses the SAME inline padding as `SidebarBody`, so the
+        // header's first control starts on the nav items' left edge and its
+        // icon can land on the nav icon column (the trigger adds the item's
+        // own `ps` on top — see `SidebarCollapseTrigger`). In the rail,
+        // `justify-center` centres the control exactly as the nav icons
+        // centre. Header content therefore tracks the nav column in both
+        // modes instead of sitting on its own axis.
+        a === "icon" ? "ds:justify-center ds:ps-[var(--spacing-xs)] ds:pe-[var(--spacing-xs)]" : "ds:ps-[var(--spacing-xs)] ds:pe-[var(--spacing-xs)]",
+        "ds:py-[var(--spacing-sm)]",
+        // Hairline border + downward chrome shadow cast the header as a
+        // sticky top band above the scrolling body.
+        "ds:border-block-end ds:border-[var(--border)]",
+        "ds:shadow-[var(--shadow-chrome-down)]",
+        e ?? ""
+      ].filter(Boolean).join(" "),
+      ...t
+    }
+  );
+});
+Es.displayName = "SidebarHeader";
+const Ye = ee(
+  [
+    "ds:min-h-[var(--min-target-size)] ds:rounded-[var(--radius-sm)]",
+    "ds:border ds:border-dashed ds:border-[color:var(--border)]"
+  ].join(" "),
+  {
+    variants: {
+      active: {
+        true: "ds:border-[color:var(--primary)] ds:bg-[var(--muted)]/20 ds:forced-colors:border-[Highlight]",
+        false: ""
+      }
+    },
+    defaultVariants: { active: !1 }
+  }
+), Ds = H(
+  ({ className: e, children: t, ...s }, a) => {
+    const { navElementId: i } = G(), { enabled: u, move: o } = Ce(), p = u && (o != null && o.listEmpty) ? /* @__PURE__ */ r(
+      "div",
+      {
+        "aria-hidden": "true",
+        "data-sidebar-drop-zone-list": "",
+        className: Ye({
+          active: o.target.indicator.kind === "list" && !oe(o.target, o.origin)
+        })
+      }
+    ) : null;
+    return (
+      // Scroll the nav sections through the kit `ScrollArea` (8px tokenised
+      // scrollbar) instead of native `overflow-auto` (the OS scrollbar), so the
+      // sidebar matches the Control Room rail and the kit's trays. `flex-1 min-h-0`
+      // fills the column and bounds the height; the layout `className` lands on the
+      // body box (the ScrollArea root). Padding + `ref` + div props go on the inner
+      // content div so the scrollbar sits flush at the inline-end edge.
+      /* @__PURE__ */ r(
+        We,
+        {
+          orientation: "vertical",
+          ...i ? { role: "group", "aria-labelledby": i } : {},
+          className: ["ds:flex-1 ds:min-h-0", e ?? ""].filter(Boolean).join(" "),
+          children: /* @__PURE__ */ h(
+            "div",
+            {
+              ref: a,
+              "data-sidebar-body": "",
+              className: "ds:ps-[var(--spacing-xs)] ds:pe-[var(--spacing-xs)] ds:py-[var(--spacing-sm)]",
+              ...s,
+              children: [
+                t,
+                p
+              ]
+            }
+          )
+        }
+      )
+    );
+  }
+);
+Ds.displayName = "SidebarBody";
+const As = H(({ className: e, ...t }, s) => {
+  const { mode: a } = G();
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      ref: s,
+      className: [
+        "ds:relative ds:flex ds:items-center ds:gap-[var(--spacing-xs)]",
+        // Icon-rail is 64px — two 44×44 controls can't sit side-by-side,
+        // so switch to a vertical stack and let each row self-centre.
+        a === "icon" ? "ds:flex-col ds:ps-[var(--spacing-xs)] ds:pe-[var(--spacing-xs)]" : "ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]",
+        "ds:min-h-[var(--min-target-size)]",
+        "ds:py-[var(--spacing-sm)]",
+        // Hairline border + upward chrome shadow cast the footer as a
+        // sticky bottom band below the scrolling body.
+        "ds:border-block-start ds:border-[var(--border)]",
+        "ds:shadow-[var(--shadow-chrome-up)]",
+        e ?? ""
+      ].filter(Boolean).join(" "),
+      ...t
+    }
+  );
+});
+As.displayName = "SidebarFooter";
+const Ps = [
+  "ds:group/section-label ds:flex ds:w-full ds:items-center",
+  "type-eyebrow",
+  "ds:text-[var(--muted-foreground)]",
+  "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)]",
+  "ds:py-[var(--spacing-xs)]",
+  "ds:hover:text-[var(--foreground)]",
+  "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
+  "ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+  "ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none"
+].join(" "), Re = [
+  "ds:inline-flex ds:shrink-0 ds:items-center ds:justify-center",
+  "ds:size-4",
+  "ds:text-[var(--accent)]",
+  "ds:me-[var(--spacing-xs)]"
+].join(" "), Oe = ee(
+  "ds:flex ds:items-center ds:rounded-[var(--radius-sm)]",
+  {
+    variants: {
+      dropInto: {
+        true: "ds:outline-[length:var(--focus-ring-width)] ds:outline-dashed ds:outline-[color:var(--primary)] ds:forced-colors:outline-[CanvasText]",
+        false: ""
+      }
+    },
+    defaultVariants: { dropInto: !1 }
+  }
+), Rs = [
+  "ds:flex ds:shrink-0 ds:items-center",
+  "ds:[&>*]:min-w-[var(--min-target-size)] ds:[&>*]:min-h-[var(--min-target-size)]"
+].join(" "), qe = ce(!1), Ve = H(
+  ({
+    label: e,
+    icon: t,
+    collapsible: s = !0,
+    defaultOpen: a = !0,
+    open: i,
+    onOpenChange: u,
+    sectionId: o,
+    actions: p,
+    className: m,
+    children: g,
+    ...I
+  }, N) => {
+    const { t: k } = de("ui"), { mode: R } = G(), c = R === "icon", l = ye(), v = s && !c && !!e, [y, A] = re(a), D = i ?? y, T = F(D);
+    T.current = D;
+    const w = L(
+      (K) => {
+        i === void 0 && A(K), u == null || u(K);
+      },
+      [i, u]
+    ), { enabled: O, move: z, registerSection: P } = Ce(), j = ue(qe);
+    ne(() => {
+      O && o === void 0 && !j && as() && console.warn(
+        `SidebarSection "${e ?? ""}": moves are on but it has no sectionId, so its items cannot move.`
+      );
+    }, [O, o, j, e]), ne(() => {
+      if (!(o === void 0 || !P))
+        return P(o, () => {
+          T.current || w(!0);
+        });
+    }, [o, P, w]);
+    const X = O && z !== null && o !== void 0, U = X && z.target.indicator.kind === "section" && z.target.indicator.sectionId === o && !oe(z.target, z.origin), b = X && z.emptySectionIds.includes(o) ? /* @__PURE__ */ r(
+      "div",
+      {
+        "aria-hidden": "true",
+        "data-sidebar-drop-zone": o,
+        className: Ye({ active: U })
+      }
+    ) : null, M = o !== void 0 ? {
+      "data-sidebar-section-id": o,
+      "data-sidebar-section-label": e ?? "",
+      "data-sidebar-section-open": String(!v || D)
+    } : {}, Y = p && !c ? /* @__PURE__ */ r(
+      "span",
+      {
+        role: "group",
+        "aria-label": e ? k("navigation.sidebar.sectionActions", { section: e }) : void 0,
+        className: Rs,
+        children: p
+      }
+    ) : null, q = /* @__PURE__ */ h(_e.Provider, { value: { sectionId: o }, children: [
+      g,
+      b
+    ] }), V = [
+      "ds:flex ds:flex-col",
+      "ds:gap-[var(--spacing-xs)]",
+      "ds:mt-[var(--spacing-sm)]",
+      m ?? ""
+    ].filter(Boolean).join(" ");
+    if (!v) {
+      const K = !!e || !!t, _ = e ? { role: "group", "aria-labelledby": l } : {}, $ = K ? /* @__PURE__ */ h(
+        "span",
+        {
+          className: [
+            "ds:flex ds:items-center",
+            "type-eyebrow",
+            "ds:text-[var(--muted-foreground)]",
+            "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)]",
+            "ds:py-[var(--spacing-xs)]",
+            Y ? "ds:min-w-0 ds:flex-1" : "",
+            c && !t ? "ds:sr-only" : ""
+          ].filter(Boolean).join(" "),
+          children: [
+            t ? /* @__PURE__ */ r("span", { "aria-hidden": "true", className: Re, children: t }) : null,
+            e ? /* @__PURE__ */ r("span", { id: l, className: c ? "ds:sr-only" : "", children: e }) : null
+          ]
+        }
+      ) : null;
+      return /* @__PURE__ */ h(
+        "div",
+        {
+          ref: N,
+          className: V,
+          ..._,
+          ...M,
+          ...I,
+          children: [
+            Y ? /* @__PURE__ */ h(
+              "div",
+              {
+                "data-sidebar-section-heading": "",
+                className: Oe(),
+                children: [
+                  $,
+                  Y
+                ]
+              }
+            ) : $,
+            q
+          ]
+        }
+      );
+    }
+    const W = "section";
+    return /* @__PURE__ */ r(
+      be.Root,
+      {
+        type: "single",
+        collapsible: !0,
+        value: D ? W : "",
+        onValueChange: (K) => w(K === W),
+        asChild: !0,
+        children: /* @__PURE__ */ r("div", { ref: N, className: V, ...M, ...I, children: /* @__PURE__ */ h(be.Item, { value: W, children: [
+          /* @__PURE__ */ h(
+            "div",
+            {
+              "data-sidebar-section-heading": "",
+              className: Oe({
+                dropInto: U && !D
+              }),
+              children: [
+                /* @__PURE__ */ r(be.Header, { className: "ds:flex ds:min-w-0 ds:flex-1", children: /* @__PURE__ */ h(be.Trigger, { className: Ps, children: [
+                  t ? /* @__PURE__ */ r("span", { "aria-hidden": "true", className: Re, children: t }) : null,
+                  /* @__PURE__ */ r("span", { className: "ds:flex-1 ds:text-start", children: e }),
+                  /* @__PURE__ */ r(
+                    we,
+                    {
+                      "aria-hidden": "true",
+                      className: "ds:size-3 ds:transition-transform ds:group-data-[state=open]/section-label:rotate-90 ds:rtl:-scale-x-100 ds:motion-reduce:transition-none"
+                    }
+                  )
+                ] }) }),
+                Y
+              ]
+            }
+          ),
+          /* @__PURE__ */ r(
+            Xe,
+            {
+              role: "group",
+              "aria-label": e,
+              forceMount: O ? !0 : void 0,
+              className: [
+                "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)] ds:[&>div]:contents",
+                // Force-mounted content is never hidden by Radix: do it here.
+                O ? "ds:data-[state=closed]:hidden" : ""
+              ].filter(Boolean).join(" "),
+              children: q
+            }
+          )
+        ] }) })
+      }
+    );
+  }
+);
+Ve.displayName = "SidebarSection";
+const Os = [
+  "ds:group ds:flex ds:w-full ds:items-center ds:gap-[var(--spacing-sm)]",
+  "ds:min-h-[var(--min-target-size)]",
+  "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)]",
+  "ds:rounded-[var(--radius-sm)]",
+  "ds:text-[var(--foreground)] ds:text-[var(--font-size-sm)]",
+  "ds:font-[var(--font-weight-medium)]",
+  "ds:hover:bg-[var(--muted)]/20",
+  "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
+  "ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+  "ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none"
+].join(" "), Ls = H(
+  ({
+    label: e,
+    icon: t,
+    children: s,
+    className: a,
+    defaultOpen: i,
+    open: u,
+    onOpenChange: o,
+    ...p
+  }, m) => {
+    const { mode: g } = G();
+    return /* @__PURE__ */ h(
+      Se.Root,
+      {
+        ref: m,
+        defaultOpen: i,
+        open: u,
+        onOpenChange: o,
+        className: a,
+        ...p,
+        children: [
+          /* @__PURE__ */ h(Se.Trigger, { className: Os, children: [
+            t ? /* @__PURE__ */ r(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "ds:inline-flex ds:items-center ds:text-[var(--accent)]",
+                children: t
+              }
+            ) : null,
+            /* @__PURE__ */ r(
+              "span",
+              {
+                className: [
+                  "ds:flex-1 ds:text-start",
+                  g === "icon" ? "ds:sr-only" : ""
+                ].join(" "),
+                children: e
+              }
+            ),
+            g !== "icon" ? /* @__PURE__ */ r(
+              we,
+              {
+                "aria-hidden": "true",
+                className: "ds:size-4 ds:transition-transform ds:group-data-[state=open]:rotate-90 ds:rtl:-scale-x-100 ds:motion-reduce:transition-none"
+              }
+            ) : null
+          ] }),
+          /* @__PURE__ */ r(
+            Se.Content,
+            {
+              className: [
+                "ds:overflow-hidden",
+                "ds:data-[state=open]:animate-in ds:data-[state=closed]:animate-out",
+                "ds:motion-reduce:animate-none",
+                "ds:ps-[var(--spacing-md)]"
+              ].join(" "),
+              children: s
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Ls.displayName = "SidebarGroup";
+const ve = [
+  "ds:z-[var(--z-tooltip)] ds:max-w-[16rem]",
+  "ds:rounded-[var(--radius-sm)]",
+  "ds:bg-[var(--foreground)] ds:text-[var(--background)]",
+  "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:py-[var(--spacing-xs)] ds:text-[length:var(--font-size-xs)]",
+  "ds:animate-in ds:fade-in ds:zoom-in-95 ds:motion-reduce:animate-none"
+].join(" "), Ms = ee(
+  [
+    // Every row is a pin-hover parent so inline pin / reorder affordances can
+    // fade in on hover of the whole row — keep `group/item` on this selector.
+    // `!text-[var(--foreground)]` forces the label colour over the browser's
+    // default `<a>` link colour (blue-violet) and any inherited hue. The
+    // active variant also uses `!text-*` so it still wins when needed.
+    "ds:group/item ds:relative ds:flex ds:items-center",
+    "ds:gap-[var(--spacing-sm)]",
+    "ds:no-underline ds:!text-[var(--foreground)] ds:text-[length:var(--font-size-sm)]",
+    "ds:hover:bg-[var(--muted)]/12",
+    "ds:transition-colors ds:duration-[var(--animation-duration)]",
+    "ds:motion-reduce:transition-none",
+    "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
+    "ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+    "ds:forced-colors:focus-visible:outline-[CanvasText]"
+  ].join(" "),
+  {
+    variants: {
+      mode: {
+        expanded: [
+          "ds:min-h-[var(--min-target-size)] ds:rounded-[var(--radius-sm)]",
+          "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)]"
+        ].join(" "),
+        // Icon-only: each item is a 44×44 pill tile centered in the rail.
+        // The active / hover background fills just the tile rather than the
+        // whole row — matching Linear / Asana chrome.
+        icon: [
+          "ds:justify-center ds:ms-auto ds:me-auto",
+          "ds:w-[var(--min-target-size)] ds:h-[var(--min-target-size)]",
+          "ds:ps-0 ds:pe-0 ds:rounded-[var(--radius-md)]"
+        ].join(" "),
+        overlay: [
+          "ds:min-h-[var(--min-target-size)] ds:rounded-[var(--radius-sm)]",
+          "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)]"
+        ].join(" ")
+      },
+      density: {
+        default: "",
+        compact: "ds:ps-[var(--spacing-xs)] ds:pe-[var(--spacing-xs)]"
+      },
+      isActive: {
+        // Filled pill — multi-carrier (bg + text + weight + aria-current at
+        // render time) so colour is never the sole identifier. `!text-*`
+        // forces the foreground over any inherited / base rule so the icon
+        // and label read clearly against the primary fill in every theme.
+        true: [
+          "ds:bg-[var(--primary)] ds:!text-[var(--primary-foreground)]",
+          "ds:font-[var(--font-weight-semibold)]",
+          // Keep hover from dimming the active fill.
+          "ds:hover:bg-[var(--primary)]"
+        ].join(" "),
+        false: ""
+      }
+    },
+    defaultVariants: {
+      mode: "expanded",
+      density: "default",
+      isActive: !1
+    }
+  }
+), Le = [
+  "ds:before:pointer-events-none ds:before:absolute ds:before:start-0 ds:before:end-0",
+  "ds:before:h-[length:var(--focus-ring-width)] ds:before:content-['']",
+  "ds:before:rounded-[var(--radius-full)] ds:before:bg-[var(--primary)]",
+  "ds:forced-colors:before:bg-[CanvasText]"
+].join(" "), _s = ee("", {
+  variants: {
+    movable: {
+      true: "ds:select-none ds:[-webkit-touch-callout:none]",
+      false: ""
+    },
+    moving: { true: "ds:opacity-60", false: "" },
+    drop: {
+      before: `${Le} ds:before:top-[calc(var(--spacing-xs)/-2)] ds:before:-translate-y-1/2`,
+      after: `${Le} ds:before:bottom-[calc(var(--spacing-xs)/-2)] ds:before:translate-y-1/2`,
+      none: ""
+    }
+  },
+  defaultVariants: { movable: !1, moving: !1, drop: "none" }
+}), $e = ce(null), Ge = H(
+  ({
+    asChild: e = !1,
+    isActive: t = !1,
+    navId: s,
+    isPinned: a = !1,
+    onPinChange: i,
+    pinLabel: u,
+    className: o,
+    children: p,
+    "aria-label": m,
+    "aria-describedby": g,
+    onKeyDown: I,
+    onPointerDown: N,
+    onBlur: k,
+    ...R
+  }, c) => {
+    const { mode: l, density: v, quietFocusRef: y, navElementId: A } = G(), D = e ? Ze : "a", T = i !== void 0 && l !== "icon", w = Ce(), O = ue(_e), z = w.enabled && l !== "icon" && s !== void 0 && (O === null || O.sectionId !== void 0) ? s : void 0, P = w.move, j = P && !oe(P.target, P.origin) ? P.target : null, X = z !== void 0 && (j == null ? void 0 : j.indicator.kind) === "item" && j.indicator.itemId === z ? j.indicator.edge : "none", U = z !== void 0 ? {
+      "data-sidebar-item-id": z,
+      "data-moving": (P == null ? void 0 : P.itemId) === z ? "" : void 0,
+      // A link would otherwise start the browser's own link drag.
+      draggable: !1,
+      "aria-describedby": [g, w.instructionsId].filter(Boolean).join(" "),
+      // An image inside the item would start its own native drag.
+      onDragStart: (f) => f.preventDefault(),
+      onKeyDown: (f) => {
+        var d, S;
+        I == null || I(f);
+        const x = f.key === "Escape" && ((d = w.move) == null ? void 0 : d.itemId) === z;
+        (!f.defaultPrevented || x) && ((S = w.onItemKeyDown) == null || S.call(w, f, z));
+      },
+      onPointerDown: (f) => {
+        var x;
+        N == null || N(f), (x = w.onItemPointerDown) == null || x.call(w, f, z);
+      },
+      onBlur: (f) => {
+        var x;
+        k == null || k(f), (x = w.onItemBlur) == null || x.call(w, z);
+      }
+    } : {
+      // Keys left out when unset: an undefined one would override the
+      // tooltip's own description through Slot.
+      ...g !== void 0 ? { "aria-describedby": g } : {},
+      ...I ? { onKeyDown: I } : {},
+      ...N ? { onPointerDown: N } : {},
+      ...k ? { onBlur: k } : {}
+    }, b = _s({
+      movable: z !== void 0,
+      moving: P !== null && P.itemId === z,
+      drop: X
+    }), [M, Y] = re(null), q = l === "icon" && m != null && M ? `${m}, ${M}` : m, V = /* @__PURE__ */ r(
+      D,
+      {
+        ref: c,
+        "aria-current": t ? "page" : void 0,
+        "aria-label": q,
+        "data-nav-id": s,
+        className: Ms({
+          mode: l,
+          density: v,
+          isActive: t,
+          className: [T ? "ds:flex-1 ds:min-w-0" : o, b].filter(Boolean).join(" ")
+        }),
+        ...U,
+        ...R,
+        children: p
+      }
+    ), W = T ? /* @__PURE__ */ h(
+      "div",
+      {
+        className: [
+          "ds:group/item ds:flex ds:items-center ds:gap-[var(--spacing-2xs)]",
+          o ?? ""
+        ].filter(Boolean).join(" "),
+        children: [
+          V,
+          /* @__PURE__ */ r(
+            je,
+            {
+              isPinned: a,
+              label: u ?? m ?? "",
+              onPinChange: i
+            }
+          )
+        ]
+      }
+    ) : V, K = F(null), [_, $] = re(), se = (f) => {
+      var S, B;
+      const x = (S = K.current) == null ? void 0 : S.querySelector(
+        "[data-sidebar-item-label]"
+      );
+      if (!(x != null && x.scrollWidth > x.clientWidth) || y != null && y.current || w.move !== null) {
+        f.preventDefault();
+        return;
+      }
+      $(((B = x.textContent) == null ? void 0 : B.trim()) || void 0);
+    }, n = l !== "icon" && A !== void 0 ? /* @__PURE__ */ h(E.Root, { children: [
+      /* @__PURE__ */ r(
+        E.Trigger,
+        {
+          asChild: !0,
+          ref: K,
+          onPointerMove: se,
+          onFocus: se,
+          children: W
+        }
+      ),
+      /* @__PURE__ */ r(E.Portal, { children: /* @__PURE__ */ h(
+        E.Content,
+        {
+          side: "right",
+          sideOffset: 6,
+          className: ve,
+          children: [
+            m ?? _,
+            /* @__PURE__ */ r(E.Arrow, { className: "ds:fill-[var(--foreground)]" })
+          ]
+        }
+      ) })
+    ] }) : l === "icon" && m ? /* @__PURE__ */ h(E.Root, { children: [
+      /* @__PURE__ */ r(E.Trigger, { asChild: !0, children: W }),
+      /* @__PURE__ */ r(E.Portal, { children: /* @__PURE__ */ h(
+        E.Content,
+        {
+          side: "right",
+          sideOffset: 6,
+          className: ve,
+          children: [
+            m,
+            /* @__PURE__ */ r(E.Arrow, { className: "ds:fill-[var(--foreground)]" })
+          ]
+        }
+      ) })
+    ] }) : W;
+    return /* @__PURE__ */ r($e.Provider, { value: Y, children: n });
+  }
+);
+Ge.displayName = "SidebarItem";
+const Bs = H(({ className: e, children: t, ...s }, a) => /* @__PURE__ */ r(
+  "span",
+  {
+    ref: a,
+    "aria-hidden": "true",
+    className: [
+      "ds:inline-flex ds:shrink-0 ds:items-center ds:justify-center",
+      "ds:size-5",
+      // Icons carry the accent tint by default so the rail reads less
+      // monotone against the violet active pill. The active row sets
+      // `aria-current="page"` on the anchor (which is `group/item`), so
+      // the icon flips to the primary-foreground (white) on the filled
+      // pill — keeping it readable on the primary background.
+      "ds:text-[var(--accent)]",
+      "ds:group-aria-[current=page]/item:text-[var(--primary-foreground)]",
+      e ?? ""
+    ].filter(Boolean).join(" "),
+    ...s,
+    children: t
+  }
+));
+Bs.displayName = "SidebarItemIcon";
+const Fs = H(({ className: e, children: t, ...s }, a) => {
+  const { mode: i } = G();
+  return /* @__PURE__ */ r(
+    "span",
+    {
+      ref: a,
+      "data-sidebar-item-label": "",
+      className: [
+        "ds:flex-1",
+        "ds:overflow-hidden ds:text-ellipsis ds:whitespace-nowrap ds:break-normal",
+        "ds:text-start",
+        i === "icon" ? "ds:sr-only" : "",
+        e ?? ""
+      ].filter(Boolean).join(" "),
+      ...s,
+      children: t
+    }
+  );
+});
+Fs.displayName = "SidebarItemLabel";
+const Hs = H(({ className: e, children: t, ...s }, a) => {
+  const { mode: i } = G(), u = i === "icon", o = ue($e);
+  return ne(() => {
+    if (!o || !u) return;
+    const p = t == null || t === !1 ? null : String(t).trim() || null;
+    return o(p), () => o(null);
+  }, [o, t, u]), /* @__PURE__ */ r(
+    "span",
+    {
+      ref: a,
+      "aria-hidden": u ? "true" : void 0,
+      className: [
+        "ds:inline-flex ds:items-center ds:justify-center",
+        "ds:font-[var(--font-weight-semibold)]",
+        u ? [
+          "ds:absolute ds:top-[2px] ds:end-[2px]",
+          "ds:min-w-0 ds:size-[10px] ds:ps-0 ds:pe-0",
+          "ds:rounded-[var(--radius-full)]",
+          "ds:bg-[var(--primary)] ds:text-transparent",
+          "ds:ring-2 ds:ring-[var(--background)]",
+          "ds:pointer-events-none"
+        ].join(" ") : [
+          "ds:min-w-[var(--spacing-lg)] ds:h-[var(--spacing-lg)]",
+          "ds:rounded-[var(--radius-full)]",
+          "ds:bg-[var(--primary)] ds:text-[var(--primary-foreground)]",
+          "ds:text-[length:var(--font-size-xs)]",
+          "ds:ps-[var(--spacing-xs)] ds:pe-[var(--spacing-xs)]"
+        ].join(" "),
+        e ?? ""
+      ].filter(Boolean).join(" "),
+      ...s,
+      children: t
+    }
+  );
+});
+Hs.displayName = "SidebarItemBadge";
+const Us = ee(
+  [
+    "ds:flex ds:items-center",
+    "ds:text-[var(--foreground)]",
+    "ds:transition-colors ds:motion-reduce:transition-none",
+    "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
+    "ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+    "ds:forced-colors:focus-visible:outline-[CanvasText]",
+    "ds:no-underline"
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        // Borderless (Linear / Notion style): transparent at rest with a
+        // muted hover fill, a 44px tap target, roomier radius, and the dense
+        // `--font-size-sm` label. The historical default.
+        ghost: [
+          "ds:min-h-[var(--min-target-size)]",
+          "ds:gap-[var(--spacing-sm)] ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)]",
+          "ds:text-[length:var(--font-size-sm)]",
+          "ds:rounded-[var(--radius-md)]",
+          "ds:hover:bg-[var(--muted)]/20"
+        ].join(" "),
+        // Input-field look: consumes the SAME shared input-surface tokens as
+        // <TextInput size="sm"> — height, text size and horizontal inset — so
+        // a practice / workspace selector stacked directly above the sidebar
+        // <SearchBar size="sm"> renders as a genuinely matched pair (identical
+        // 32px box and label size) and stays in lockstep if that surface
+        // evolves. `gap-3` + the shared `ps-3` line the pin glyph and label up
+        // with the search input's icon and text below. The 3:1
+        // `--control-border` edge and the `--input`/`--shadow-input`/
+        // `--radius-sm` chrome mirror the input's resting surface; opaque
+        // hover keeps the fill solid over a brand-tinted parent. 32px clears
+        // WCAG 2.5.8 (24px AA).
+        field: [
+          ss.sm,
+          ts.sm,
+          ns.sm,
+          "ds:gap-3",
+          "ds:rounded-[var(--radius-sm)]",
+          "ds:border ds:border-[color:var(--control-border)] ds:bg-[var(--input)]",
+          "ds:shadow-[var(--shadow-input)]",
+          "ds:hover:bg-[color-mix(in_srgb,var(--muted)_20%,var(--input))]"
+        ].join(" ")
+      }
+    },
+    defaultVariants: { variant: "ghost" }
+  }
+), Ys = H(
+  ({ logo: e, name: t, showChevron: s = !0, variant: a = "ghost", className: i, ...u }, o) => {
+    const { mode: p } = G(), m = p !== "icon";
+    return /* @__PURE__ */ h(
+      "button",
+      {
+        ref: o,
+        type: "button",
+        "aria-label": t,
+        className: [Us({ variant: a }), i].filter(Boolean).join(" "),
+        ...u,
+        children: [
+          /* @__PURE__ */ r(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "ds:inline-flex ds:items-center ds:shrink-0",
+              children: e
+            }
+          ),
+          m ? /* @__PURE__ */ h(xe, { children: [
+            /* @__PURE__ */ r("span", { className: "ds:truncate ds:flex-1 ds:text-start ds:max-w-[var(--header-workspace-max-inline-size)]", children: t }),
+            s ? /* @__PURE__ */ r(
+              we,
+              {
+                "aria-hidden": "true",
+                className: "ds:size-4 ds:shrink-0 ds:rotate-90"
+              }
+            ) : null
+          ] }) : null
+        ]
+      }
+    );
+  }
+);
+Ys.displayName = "SidebarWorkspaceSwitcher";
+const qs = ee(
+  [
+    "ds:flex ds:items-center ds:justify-center ds:gap-[var(--spacing-xs)]",
+    "ds:min-h-[var(--min-target-size)]",
+    "ds:rounded-[var(--radius-md)]",
+    "ds:bg-[var(--primary)] ds:text-[var(--primary-foreground)]",
+    "ds:font-[var(--font-weight-semibold)] ds:text-[length:var(--font-size-sm)]",
+    "ds:hover:bg-[var(--primary-hover)]",
+    "ds:transition-colors ds:motion-reduce:transition-none",
+    "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
+    "ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+    "ds:forced-colors:focus-visible:outline-[CanvasText]"
+  ].join(" "),
+  {
+    variants: {
+      mode: {
+        expanded: "ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]",
+        // A full target-size tile, like the rail's items: 44px, 48px in the
+        // accessible themes.
+        icon: "ds:ps-0 ds:pe-0 ds:w-[var(--min-target-size)] ds:h-[var(--min-target-size)] ds:ms-auto ds:me-auto",
+        overlay: "ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]"
+      }
+    },
+    defaultVariants: { mode: "expanded" }
+  }
+), Vs = H(({ icon: e, label: t, shortcut: s, className: a, ...i }, u) => {
+  const { mode: o } = G(), p = o !== "icon", m = /* @__PURE__ */ h(
+    "button",
+    {
+      ref: u,
+      type: "button",
+      "aria-label": t,
+      "aria-keyshortcuts": s,
+      className: [qs({ mode: o }), a].filter(Boolean).join(" "),
+      ...i,
+      children: [
+        /* @__PURE__ */ r(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "ds:inline-flex ds:size-4 ds:items-center ds:justify-center",
+            children: e
+          }
+        ),
+        p ? /* @__PURE__ */ h(xe, { children: [
+          /* @__PURE__ */ r("span", { className: "ds:truncate", children: t }),
+          s ? /* @__PURE__ */ r("kbd", { className: "ds:ms-auto ds:text-[length:var(--font-size-xs)] ds:font-[family-name:var(--font-mono)] ds:opacity-80", children: s }) : null
+        ] }) : null
+      ]
+    }
+  );
+  return p ? m : /* @__PURE__ */ h(E.Root, { children: [
+    /* @__PURE__ */ r(E.Trigger, { asChild: !0, children: m }),
+    /* @__PURE__ */ r(E.Portal, { children: /* @__PURE__ */ h(
+      E.Content,
+      {
+        side: "right",
+        sideOffset: 6,
+        className: ve,
+        children: [
+          t,
+          /* @__PURE__ */ r(E.Arrow, { className: "ds:fill-[var(--foreground)]" })
+        ]
+      }
+    ) })
+  ] });
+});
+Vs.displayName = "SidebarPrimaryAction";
+const $s = [
+  "ds:inline-flex ds:items-center ds:justify-center ds:shrink-0",
+  "ds:size-6 ds:rounded-[var(--radius-sm)]",
+  // Lift above the Sidebar's opt-in resize handle (z-[2]). When `resizable`,
+  // that handle's ::before hit-area reaches ~--min-target-size/2 inward from
+  // the inline-end edge — exactly where these end-aligned pin stars sit — so
+  // without a higher stacking order the separator swallows the click and
+  // pinning silently fails. Pointer-events stay off until the row is hovered
+  // or the star is focused, so the handle is still fully grabbable at rest
+  // (including touch, where the star never reveals). On a NON-resizable
+  // sidebar there's no handle to clear, but the same gating is inert — the
+  // star reveals and accepts clicks on hover/focus exactly as before.
+  "ds:relative ds:z-[3]",
+  "ds:pointer-events-none ds:group-hover/item:pointer-events-auto ds:focus-visible:pointer-events-auto",
+  // Pin stars carry the accent tint to match every other icon in the rail.
+  // Stays quiet via opacity — reveals only on row hover / focus.
+  "ds:text-[var(--accent)]",
+  "ds:opacity-0 ds:group-hover/item:opacity-100 ds:focus-visible:opacity-100",
+  "ds:hover:bg-[var(--muted)]/20",
+  "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
+  "ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+  "ds:forced-colors:focus-visible:outline-[CanvasText]",
+  "ds:transition-[color,opacity,background-color] ds:duration-[var(--animation-duration)]",
+  "ds:motion-reduce:transition-none"
+].join(" "), je = H(
+  ({ isPinned: e, onPinChange: t, label: s, className: a, onClick: i, ...u }, o) => {
+    const { t: p } = de("ui"), { mode: m } = G();
+    if (m === "icon") return null;
+    const g = e ? p("navigation.sidebar.unpinItem", "Unpin {{label}}", { label: s }) : p("navigation.sidebar.pinItem", "Pin {{label}}", { label: s });
+    return /* @__PURE__ */ r(
+      "button",
+      {
+        ref: o,
+        type: "button",
+        "aria-label": g,
+        "aria-pressed": e,
+        className: [$s, a].filter(Boolean).join(" "),
+        onClick: (I) => {
+          I.preventDefault(), I.stopPropagation(), t == null || t(!e), i == null || i(I);
+        },
+        ...u,
+        children: /* @__PURE__ */ r(
+          ds,
+          {
+            "aria-hidden": "true",
+            className: "ds:size-4",
+            fill: e ? "currentColor" : "none"
+          }
+        )
+      }
+    );
+  }
+);
+je.displayName = "SidebarPinButton";
+const Ke = ce(null), Gs = () => ue(Ke), Ks = H(
+  ({ heading: e, emptyMessage: t, onReorder: s, className: a, children: i, ...u }, o) => {
+    const { t: p } = de("ui"), m = e ?? p("navigation.sidebar.favorites", "Favourites"), g = Array.isArray(i) ? i.filter(Boolean) : i ? [i] : [], I = g.length, N = I > 0, [k, R] = re(null), [c, l] = re(""), v = F(!1), y = L((D) => {
+      v.current = !v.current, l(v.current ? D : `${D}​`);
+    }, []), A = he(
+      () => ({ onReorder: s, count: I, dragSource: k, setDragSource: R, announce: y }),
+      [s, I, k, y]
+    );
+    return !N && !t ? null : /* @__PURE__ */ r(Ke.Provider, { value: A, children: /* @__PURE__ */ r(qe.Provider, { value: !0, children: /* @__PURE__ */ h(
+      Ve,
+      {
+        ref: o,
+        label: m,
+        className: a,
+        ...u,
+        children: [
+          N ? g : /* @__PURE__ */ r("p", { className: "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] type-meta ds:text-[color:var(--muted-foreground)]", children: t }),
+          /* @__PURE__ */ r("span", { role: "status", "aria-live": "polite", className: "ds:sr-only", children: c })
+        ]
+      }
+    ) }) });
+  }
+);
+Ks.displayName = "SidebarFavorites";
+const Xs = ee(
+  [
+    "ds:group/item ds:relative ds:flex ds:items-center ds:gap-[var(--spacing-2xs)]",
+    "ds:rounded-[var(--radius-sm)]",
+    "ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none"
+  ].join(" "),
+  {
+    variants: {
+      dragging: {
+        true: "ds:opacity-60",
+        false: ""
+      },
+      dropTarget: {
+        true: "ds:outline-[length:var(--focus-ring-width)] ds:outline-dashed ds:outline-[var(--primary)] ds:outline-offset-[-2px]",
+        false: ""
+      }
+    },
+    defaultVariants: { dragging: !1, dropTarget: !1 }
+  }
+), Ws = [
+  "ds:inline-flex ds:items-center ds:justify-center ds:shrink-0",
+  "ds:size-6 ds:rounded-[var(--radius-sm)]",
+  "ds:cursor-grab ds:active:cursor-grabbing",
+  "ds:text-[var(--muted-foreground)]",
+  // Quiet chrome — only reveal the grip when the row is hovered or the
+  // handle itself is focused (keyboard / AT). Matches the pin-star's
+  // reveal-on-hover behaviour so the two siblings appear together.
+  "ds:opacity-0 ds:group-hover/item:opacity-100 ds:focus-visible:opacity-100",
+  "ds:hover:bg-[var(--muted)]/20 ds:hover:text-[var(--foreground)]",
+  "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
+  "ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+  "ds:forced-colors:focus-visible:outline-[CanvasText]",
+  "ds:transition-[color,opacity,background-color] ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none"
+].join(" "), Zs = H(
+  ({
+    index: e,
+    isActive: t = !1,
+    asChild: s = !1,
+    reorderLabel: a,
+    isPinned: i = !1,
+    onPinChange: u,
+    pinLabel: o,
+    "aria-label": p,
+    className: m,
+    children: g,
+    ...I
+  }, N) => {
+    const { t: k } = de("ui"), { mode: R } = G(), c = Gs(), [l, v] = re(!1), y = !!(c != null && c.onReorder) && R !== "icon", A = a ?? p ?? "", D = ye(), T = (b, M) => {
+      if (!(c != null && c.onReorder)) return;
+      const Y = Math.max(0, Math.min(c.count - 1, M));
+      Y !== b && (c.onReorder(b, Y), c.announce(
+        k(
+          "navigation.sidebar.reorderAnnounce",
+          "{{label}} moved to position {{to}} of {{total}}",
+          { label: A, to: Y + 1, total: c.count }
+        )
+      ));
+    }, w = (b) => {
+      y && (b.altKey && b.key === "ArrowUp" ? (b.preventDefault(), T(e, e - 1)) : b.altKey && b.key === "ArrowDown" ? (b.preventDefault(), T(e, e + 1)) : b.key === "Home" && b.altKey ? (b.preventDefault(), T(e, 0)) : b.key === "End" && b.altKey && (b.preventDefault(), T(e, c.count - 1)));
+    }, O = (b) => {
+      y && (c == null || c.setDragSource(e), b.dataTransfer && (b.dataTransfer.effectAllowed = "move", b.dataTransfer.setData("ds:text/plain", String(e))));
+    }, z = () => {
+      c == null || c.setDragSource(null), v(!1);
+    }, P = (b) => {
+      !y || (c == null ? void 0 : c.dragSource) === null || (b.preventDefault(), b.dataTransfer && (b.dataTransfer.dropEffect = "move"), v(!0));
+    }, j = () => v(!1), X = (b) => {
+      if (!y) return;
+      b.preventDefault();
+      const M = c == null ? void 0 : c.dragSource;
+      v(!1), !(M == null || M === e) && T(M, e);
+    }, U = (c == null ? void 0 : c.dragSource) === e;
+    return /* @__PURE__ */ h(
+      "div",
+      {
+        className: Xs({
+          dragging: U,
+          dropTarget: l && !U
+        }),
+        draggable: y || void 0,
+        onDragStart: y ? O : void 0,
+        onDragEnd: y ? z : void 0,
+        onDragOver: P,
+        onDragLeave: j,
+        onDrop: X,
+        children: [
+          /* @__PURE__ */ r(
+            Ge,
+            {
+              ref: N,
+              isActive: t,
+              asChild: s,
+              "aria-label": p,
+              "aria-describedby": y ? D : void 0,
+              draggable: y ? !1 : void 0,
+              className: [y ? "ds:flex-1 ds:min-w-0" : "", m ?? ""].filter(Boolean).join(" "),
+              ...I,
+              children: g
+            }
+          ),
+          y ? /* @__PURE__ */ r(
+            "button",
+            {
+              type: "button",
+              id: D,
+              "aria-label": k(
+                "navigation.sidebar.reorderHandle",
+                "Reorder {{label}}. Press Alt + Up or Alt + Down to move.",
+                { label: A }
+              ),
+              className: Ws,
+              onKeyDown: w,
+              children: /* @__PURE__ */ r(os, { "aria-hidden": "true", className: "ds:size-4" })
+            }
+          ) : null,
+          u && R !== "icon" ? /* @__PURE__ */ r(
+            je,
+            {
+              isPinned: i,
+              label: o ?? p ?? "",
+              onPinChange: u
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+Zs.displayName = "SidebarFavoriteItem";
+const Js = ee(
+  [
+    "ds:flex ds:items-center ds:gap-[var(--spacing-sm)]",
+    "ds:min-h-[var(--min-target-size)]",
+    "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)]",
+    "ds:rounded-[var(--radius-md)]",
+    "ds:text-[var(--foreground)] ds:text-[length:var(--font-size-sm)]",
+    "ds:hover:bg-[var(--muted)]/20",
+    "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
+    "ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+    "ds:forced-colors:focus-visible:outline-[CanvasText]",
+    "ds:no-underline"
+  ].join(" ")
+), Qs = H(({ avatar: e, name: t, subtitle: s, subtitleLabel: a, className: i, ...u }, o) => {
+  const { mode: p } = G(), m = p !== "icon", g = typeof s == "string" ? s : a;
+  return /* @__PURE__ */ h(
+    "button",
+    {
+      ref: o,
+      type: "button",
+      "aria-label": g ? `${t}, ${g}` : t,
+      className: [Js(), i].filter(Boolean).join(" "),
+      ...u,
+      children: [
+        /* @__PURE__ */ r(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "ds:inline-flex ds:items-center ds:shrink-0",
+            children: e
+          }
+        ),
+        m ? /* @__PURE__ */ h("span", { className: "ds:flex-1 ds:min-w-0 ds:text-start", children: [
+          /* @__PURE__ */ r("span", { className: "ds:block ds:truncate type-label", children: t }),
+          s ? typeof s == "string" ? /* @__PURE__ */ r("span", { className: "ds:block ds:truncate type-meta ds:text-[color:var(--muted-foreground)]", children: s }) : /* @__PURE__ */ r("span", { className: "ds:flex ds:items-center ds:gap-[length:var(--spacing-xs)] ds:min-w-0 type-meta ds:text-[color:var(--muted-foreground)]", children: s }) : null
+        ] }) : null
+      ]
+    }
+  );
+});
+Qs.displayName = "SidebarProfilePill";
+const et = [
+  "ds:inline-flex ds:items-center ds:justify-center ds:shrink-0",
+  "ds:min-w-[var(--min-target-size)] ds:min-h-[var(--min-target-size)]",
+  "ds:rounded-[var(--radius-sm)]",
+  "ds:text-[var(--muted-foreground)]",
+  "ds:hover:bg-[var(--muted)]/20 ds:hover:text-[var(--foreground)]",
+  "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
+  "ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+  "ds:forced-colors:focus-visible:outline-[CanvasText]",
+  "ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none"
+].join(" "), st = H(({ className: e, "aria-label": t, onClick: s, ...a }, i) => {
+  const { t: u } = de("ui"), { mode: o, density: p, transitionTo: m } = G();
+  if (o === "overlay") return null;
+  const g = o === "expanded", I = g ? [
+    "ds:justify-start",
+    p === "compact" ? "ds:ps-[var(--spacing-xs)]" : "ds:ps-[var(--spacing-sm)]"
+  ].join(" ") : "ds:justify-center", N = t ?? (g ? u("navigation.sidebar.collapse", "Collapse sidebar") : u("navigation.sidebar.expand", "Expand sidebar")), k = /* @__PURE__ */ r(
+    "button",
+    {
+      ref: i,
+      type: "button",
+      "aria-label": N,
+      "aria-expanded": g,
+      onClick: (R) => {
+        m == null || m(g ? "icon" : "expanded"), s == null || s(R);
+      },
+      className: [et, I, e].filter(Boolean).join(" "),
+      ...a,
+      children: /* @__PURE__ */ r("span", { className: "ds:inline-flex ds:size-5 ds:shrink-0 ds:items-center ds:justify-center", children: g ? /* @__PURE__ */ r(
+        us,
+        {
+          "aria-hidden": "true",
+          className: "ds:size-4 ds:rtl:-scale-x-100"
+        }
+      ) : /* @__PURE__ */ r(
+        fs,
+        {
+          "aria-hidden": "true",
+          className: "ds:size-4 ds:rtl:-scale-x-100"
+        }
+      ) })
+    }
+  );
+  return /* @__PURE__ */ h(E.Root, { children: [
+    /* @__PURE__ */ r(E.Trigger, { asChild: !0, children: k }),
+    /* @__PURE__ */ r(E.Portal, { children: /* @__PURE__ */ h(
+      E.Content,
+      {
+        side: o === "icon" ? "right" : "top",
+        sideOffset: 6,
+        className: ve,
+        children: [
+          N,
+          /* @__PURE__ */ r(E.Arrow, { className: "ds:fill-[var(--foreground)]" })
+        ]
+      }
+    ) })
+  ] });
+});
+st.displayName = "SidebarCollapseTrigger";
+const tt = ee(
+  [
+    "ds:flex ds:items-center ds:gap-[var(--spacing-sm)]",
+    "ds:rounded-[var(--radius-md)]",
+    "ds:border ds:border-[var(--border)]",
+    "ds:bg-[image:var(--gradient-surface-subtle-accent)]",
+    "ds:no-underline ds:!text-[var(--foreground)]",
+    "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
+    "ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+    "ds:forced-colors:focus-visible:outline-[CanvasText]"
+  ].join(" "),
+  {
+    variants: {
+      mode: {
+        expanded: [
+          "ds:min-h-[var(--min-target-size)]",
+          "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:py-[var(--spacing-sm)]"
+        ].join(" "),
+        icon: [
+          "ds:justify-center",
+          "ds:w-[var(--min-target-size)] ds:h-[var(--min-target-size)]",
+          "ds:ms-auto ds:me-auto ds:ps-0 ds:pe-0"
+        ].join(" "),
+        overlay: [
+          "ds:min-h-[var(--min-target-size)]",
+          "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:py-[var(--spacing-sm)]"
+        ].join(" ")
+      }
+    },
+    defaultVariants: { mode: "expanded" }
+  }
+), nt = H(({ title: e, description: t, icon: s, className: a, ...i }, u) => {
+  const { mode: o } = G(), p = o === "icon", m = (
+    // aria-label only in icon mode (where the copy is hidden) — in
+    // expanded mode the accessible name comes from the visible contents
+    // so the description isn't excluded from it.
+    /* @__PURE__ */ h(
+      "a",
+      {
+        ref: u,
+        "aria-label": p ? e : void 0,
+        className: tt({ mode: o, className: a }),
+        ...i,
+        children: [
+          /* @__PURE__ */ r(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: [
+                "ds:inline-flex ds:size-8 ds:shrink-0 ds:items-center ds:justify-center",
+                "ds:rounded-[var(--radius-sm)]",
+                "ds:bg-[var(--accent)] ds:text-[var(--accent-foreground)]"
+              ].join(" "),
+              children: s ?? /* @__PURE__ */ r(ls, { className: "ds:size-4" })
+            }
+          ),
+          p ? null : /* @__PURE__ */ h(xe, { children: [
+            /* @__PURE__ */ h("span", { className: "ds:flex-1 ds:min-w-0 ds:text-start", children: [
+              /* @__PURE__ */ r("span", { className: "ds:block ds:line-clamp-2 type-label", children: e }),
+              t ? (
+                // Foreground (not muted) on the tinted surface — the gradient
+                // stops leave muted text short of AA in both colour schemes.
+                /* @__PURE__ */ r("span", { className: "ds:block ds:line-clamp-2 type-meta", children: t })
+              ) : null
+            ] }),
+            /* @__PURE__ */ r(
+              we,
+              {
+                "aria-hidden": "true",
+                className: "ds:size-4 ds:shrink-0 ds:rtl:-scale-x-100"
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  );
+  return p ? /* @__PURE__ */ h(E.Root, { children: [
+    /* @__PURE__ */ r(E.Trigger, { asChild: !0, children: m }),
+    /* @__PURE__ */ r(E.Portal, { children: /* @__PURE__ */ h(
+      E.Content,
+      {
+        side: "right",
+        sideOffset: 6,
+        className: ve,
+        children: [
+          e,
+          /* @__PURE__ */ r(E.Arrow, { className: "ds:fill-[var(--foreground)]" })
+        ]
+      }
+    ) })
+  ] }) : m;
+});
+nt.displayName = "SidebarUpgradeChip";
+export {
+  Ts as S,
+  Ds as a,
+  st as b,
+  Zs as c,
+  Ks as d,
+  As as e,
+  Ls as f,
+  Es as g,
+  Ge as h,
+  Hs as i,
+  Bs as j,
+  Fs as k,
+  je as l,
+  Vs as m,
+  Qs as n,
+  Ve as o,
+  nt as p,
+  Ys as q,
+  ps as s,
+  G as u
+};
+//# sourceMappingURL=sidebar-D4Wllqfz.js.map