@alfadocs/ui-kit-debug 0.71.0 → 0.72.1

package/dist/_chunks/sidebar-B0OBmJrC.js

@@ -0,0 +1,1311 @@
+import { jsx as s, jsxs as u, Fragment as q } from "react/jsx-runtime";
+import { forwardRef as b, useState as R, useEffect as U, useCallback as ss, useRef as $, useMemo as O, useId as ds, useContext as Z, createContext as W } from "react";
+import * as B from "@radix-ui/react-dialog";
+import * as V from "@radix-ui/react-collapsible";
+import * as E from "@radix-ui/react-accordion";
+import * as h from "@radix-ui/react-tooltip";
+import { a as ts } from "./accordion-C11v9ouP.js";
+import { S as os } from "./scroll-area-BZOvUhwQ.js";
+import { Slot as ls } from "@radix-ui/react-slot";
+import { c as I } from "./index-D2ZczOXr.js";
+import { useTranslation as D } from "react-i18next";
+import { u as cs } from "./registry-DvAUVLHh.js";
+import { u as us } from "./use-edge-resize-ZnGG7gyO.js";
+import { c as ms } from "./compose-refs-C0k0tdqF.js";
+import { X as vs } from "./x-B5YnXwCz.js";
+import { c as X } from "./createLucideIcon-DhHxpK9K.js";
+import { G as ps } from "./grip-vertical-onSb1JXO.js";
+import { C as H } from "./chevron-right-I9AeSxH2.js";
+import { S as fs } from "./star-Bf9L2Uot.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 gs = [
+  ["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" }]
+], bs = X("panel-left-close", gs);
+/**
+ * @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 hs = [
+  ["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" }]
+], xs = X("panel-left-open", hs);
+/**
+ * @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 ys = [
+  ["path", { d: "M16 7h6v6", key: "box55l" }],
+  ["path", { d: "m22 7-8.5 8.5-5-5L2 17", key: "1t1m79" }]
+], ws = X("trending-up", ys), Ns = {
+  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."
+    }
+  }
+}, G = W({
+  mode: "expanded",
+  density: "default"
+}), x = () => Z(G), es = "ui.sidebar.state";
+function zs(e) {
+  if (typeof window > "u") return e;
+  try {
+    const a = window.localStorage.getItem(es);
+    if (a === "expanded" || a === "icon" || a === "overlay") return a;
+  } catch {
+  }
+  return e;
+}
+function Ss(e) {
+  if (!(typeof window > "u"))
+    try {
+      window.localStorage.setItem(es, e);
+    } catch {
+    }
+}
+const J = I(
+  [
+    "ds:flex ds:flex-col",
+    // Sidebar sits at the page background in light mode (white-on-white
+    // chrome separated by the inline-end border + --shadow-md). In dark
+    // mode the Header already blends with --background, so we step 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.
+    "ds:bg-[var(--background)] ds:[.theme-dark_&]:bg-[color:var(--color-blue-600)] ds:text-[var(--foreground)]",
+    "ds:border-inline-end ds:border-[var(--border)]",
+    // Resting-surface elevation — `--shadow-md` is deliberately lighter
+    // than `--shadow-card` so it reads as chrome, not a floating card,
+    // while still separating the rail from the page content on light
+    // backgrounds. Forced-colors strips shadows globally, so the
+    // `border-inline-end` above carries the separation cue for HCM.
+    //
+    // `relative z-[1]` lifts the rail above any sibling that paints a
+    // solid background (e.g. AppFrame's `<main>` surface), otherwise
+    // the shadow that projects towards the inline-end gets covered.
+    "ds:relative ds:z-[1] ds:shadow-[var(--shadow-md)]",
+    // Accessible (AAA) theme prefers a solid border over a soft shadow as the
+    // separation cue — swap the resting elevation for a real 1px `border-e`.
+    "ds:[.theme-accessible_&]:border-e ds:[.theme-accessible_&]:shadow-none",
+    "ds:h-full",
+    "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: {
+      mode: {
+        // Tokenised widths modelled on Linear / Jira proportions.
+        expanded: "ds:w-[var(--sidebar-modern-expanded-size)]",
+        icon: "ds:w-[var(--sidebar-modern-icon-size)]",
+        overlay: "ds:w-[var(--sidebar-modern-expanded-size)]"
+      },
+      density: {
+        default: "",
+        compact: ""
+      }
+    },
+    defaultVariants: { mode: "expanded", density: "default" }
+  }
+), js = 192, Cs = 384, ks = 248, Is = [
+  "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 = b(
+  ({
+    state: e,
+    defaultState: a = "expanded",
+    onStateChange: r,
+    density: n = "default",
+    open: d,
+    onOpenChange: l,
+    resizable: t = !1,
+    "aria-label": o,
+    className: c,
+    children: p,
+    id: f,
+    ...g
+  }, N) => {
+    const { t: y } = D(), i = e !== void 0, [w, z] = R(
+      () => i ? e : zs(a)
+    ), m = i ? e : w;
+    U(() => {
+      i || Ss(w);
+    }, [w, i]);
+    const S = ss(
+      (k) => {
+        i || z(k), r == null || r(k);
+      },
+      [i, r]
+    ), j = o ?? y("navigation.sidebar.label"), C = $(m);
+    U(() => {
+      C.current = m;
+    }, [m]);
+    const F = O(
+      () => ({
+        getIsCollapsed: () => C.current !== "expanded",
+        toggleCollapsed: () => {
+          const k = C.current === "expanded" ? "icon" : "expanded";
+          S(k);
+        }
+      }),
+      [S]
+    );
+    cs(Ns, F, f);
+    const A = $(null), P = O(() => ms(N, A), [N]), { separatorProps: M, isResizing: _ } = us({
+      edge: "inline-end",
+      targetRef: A,
+      cssProperty: "--sidebar-modern-expanded-size",
+      minSize: js,
+      maxSize: Cs,
+      defaultSize: ks,
+      disabled: !t || m !== "expanded"
+    }), K = t && m === "expanded";
+    return m === "overlay" ? /* @__PURE__ */ s(
+      G.Provider,
+      {
+        value: { mode: "overlay", density: n, transitionTo: S },
+        children: /* @__PURE__ */ s(B.Root, { open: d, onOpenChange: l, children: /* @__PURE__ */ u(B.Portal, { children: [
+          /* @__PURE__ */ s(
+            B.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__ */ u(
+            B.Content,
+            {
+              "aria-label": j,
+              className: [
+                "ds:fixed ds:z-[var(--z-modal)]",
+                "ds:inset-inline-start-0 ds:inset-block-start-0",
+                "ds:h-dvh",
+                J({ mode: "overlay", density: n }),
+                "ds:shadow-[var(--shadow-xl)]",
+                "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",
+                c ?? ""
+              ].filter(Boolean).join(" "),
+              children: [
+                /* @__PURE__ */ s(
+                  "nav",
+                  {
+                    ref: P,
+                    id: f,
+                    "aria-label": j,
+                    "data-component": "sidebar",
+                    "data-component-id": f,
+                    className: "ds:flex ds:flex-col ds:h-full",
+                    ...g,
+                    children: p
+                  }
+                ),
+                /* @__PURE__ */ s(B.Close, { asChild: !0, children: /* @__PURE__ */ s(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": y("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__ */ s(vs, { "aria-hidden": "true", className: "ds:size-4" })
+                  }
+                ) })
+              ]
+            }
+          )
+        ] }) })
+      }
+    ) : /* @__PURE__ */ s(
+      G.Provider,
+      {
+        value: { mode: m, density: n, transitionTo: S },
+        children: /* @__PURE__ */ s(h.Provider, { delayDuration: 300, children: /* @__PURE__ */ u(
+          "nav",
+          {
+            ref: P,
+            id: f,
+            "aria-label": j,
+            "data-component": "sidebar",
+            "data-component-id": f,
+            "data-mode": m,
+            "data-density": n,
+            "data-resizing": _ ? "" : void 0,
+            className: [
+              J({ mode: m, density: n }),
+              n === "compact" ? "ds:density-compact" : "",
+              c ?? ""
+            ].filter(Boolean).join(" "),
+            ...g,
+            children: [
+              p,
+              K ? /* @__PURE__ */ s(
+                "div",
+                {
+                  ...M,
+                  "aria-label": y("navigation.sidebar.resize"),
+                  "data-resizing": _ ? "" : void 0,
+                  className: Is
+                }
+              ) : null
+            ]
+          }
+        ) })
+      }
+    );
+  }
+);
+Ts.displayName = "Sidebar";
+const Bs = b(({ className: e, ...a }, r) => {
+  const { mode: n } = x();
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      ref: r,
+      className: [
+        "ds:relative ds:flex ds:items-center ds:gap-[var(--spacing-xs)]",
+        "ds:min-h-[var(--min-target-size)]",
+        // Icon-rail is 64px — shrink horizontal padding so a 44×44
+        // control fits centred inside the header.
+        n === "icon" ? "ds:justify-center ds:ps-[var(--spacing-xs)] ds:pe-[var(--spacing-xs)]" : "ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]",
+        "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(" "),
+      ...a
+    }
+  );
+});
+Bs.displayName = "SidebarHeader";
+const Rs = b(
+  ({ className: e, children: a, ...r }, n) => (
+    // 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__ */ s(
+      os,
+      {
+        orientation: "vertical",
+        className: ["ds:flex-1 ds:min-h-0", e ?? ""].filter(Boolean).join(" "),
+        children: /* @__PURE__ */ s(
+          "div",
+          {
+            ref: n,
+            className: "ds:ps-[var(--spacing-xs)] ds:pe-[var(--spacing-xs)] ds:py-[var(--spacing-sm)]",
+            ...r,
+            children: a
+          }
+        )
+      }
+    )
+  )
+);
+Rs.displayName = "SidebarBody";
+const Ds = b(({ className: e, ...a }, r) => {
+  const { mode: n } = x();
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      ref: r,
+      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.
+        n === "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(" "),
+      ...a
+    }
+  );
+});
+Ds.displayName = "SidebarFooter";
+const As = [
+  "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(" "), Q = [
+  "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(" "), as = b(
+  ({
+    label: e,
+    icon: a,
+    collapsible: r = !0,
+    defaultOpen: n = !0,
+    open: d,
+    onOpenChange: l,
+    className: t,
+    children: o,
+    ...c
+  }, p) => {
+    const { mode: f } = x(), g = f === "icon", N = r && !g && !!e, y = [
+      "ds:flex ds:flex-col",
+      "ds:gap-[var(--spacing-xs)]",
+      "ds:mt-[var(--spacing-sm)]",
+      t ?? ""
+    ].filter(Boolean).join(" ");
+    if (!N)
+      return /* @__PURE__ */ u("div", { ref: p, className: y, ...c, children: [
+        !!e || !!a ? /* @__PURE__ */ u(
+          "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)]",
+              g && !a ? "ds:sr-only" : ""
+            ].filter(Boolean).join(" "),
+            children: [
+              a ? /* @__PURE__ */ s("span", { "aria-hidden": "true", className: Q, children: a }) : null,
+              e ? /* @__PURE__ */ s("span", { className: g ? "ds:sr-only" : "", children: e }) : null
+            ]
+          }
+        ) : null,
+        o
+      ] });
+    const i = "section";
+    return /* @__PURE__ */ s(
+      E.Root,
+      {
+        type: "single",
+        collapsible: !0,
+        defaultValue: d === void 0 && n ? i : void 0,
+        value: d === void 0 ? void 0 : d ? i : "",
+        onValueChange: l ? (w) => l(w === i) : void 0,
+        asChild: !0,
+        children: /* @__PURE__ */ s("div", { ref: p, className: y, ...c, children: /* @__PURE__ */ u(E.Item, { value: i, children: [
+          /* @__PURE__ */ s(E.Header, { className: "ds:flex", children: /* @__PURE__ */ u(E.Trigger, { className: As, children: [
+            a ? /* @__PURE__ */ s("span", { "aria-hidden": "true", className: Q, children: a }) : null,
+            /* @__PURE__ */ s("span", { className: "ds:flex-1 ds:text-start", children: e }),
+            /* @__PURE__ */ s(
+              H,
+              {
+                "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"
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ s(
+            ts,
+            {
+              "aria-label": e,
+              className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)] ds:[&>div]:contents",
+              children: o
+            }
+          )
+        ] }) })
+      }
+    );
+  }
+);
+as.displayName = "SidebarSection";
+const Ps = [
+  "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(" "), _s = b(
+  ({
+    label: e,
+    icon: a,
+    children: r,
+    className: n,
+    defaultOpen: d,
+    open: l,
+    onOpenChange: t,
+    ...o
+  }, c) => {
+    const { mode: p } = x();
+    return /* @__PURE__ */ u(
+      V.Root,
+      {
+        ref: c,
+        defaultOpen: d,
+        open: l,
+        onOpenChange: t,
+        className: n,
+        ...o,
+        children: [
+          /* @__PURE__ */ u(V.Trigger, { className: Ps, children: [
+            a ? /* @__PURE__ */ s(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "ds:inline-flex ds:items-center ds:text-[var(--accent)]",
+                children: a
+              }
+            ) : null,
+            /* @__PURE__ */ s(
+              "span",
+              {
+                className: [
+                  "ds:flex-1 ds:text-start",
+                  p === "icon" ? "ds:sr-only" : ""
+                ].join(" "),
+                children: e
+              }
+            ),
+            p !== "icon" ? /* @__PURE__ */ s(
+              H,
+              {
+                "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__ */ s(
+            V.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: r
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+_s.displayName = "SidebarGroup";
+const Es = I(
+  [
+    // 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
+    }
+  }
+), rs = W(null), is = b(
+  ({
+    asChild: e = !1,
+    isActive: a = !1,
+    navId: r,
+    isPinned: n = !1,
+    onPinChange: d,
+    pinLabel: l,
+    className: t,
+    children: o,
+    "aria-label": c,
+    ...p
+  }, f) => {
+    const { mode: g, density: N } = x(), y = e ? ls : "a", i = d !== void 0 && g !== "icon", [w, z] = R(null), m = g === "icon" && c != null && w ? `${c}, ${w}` : c, S = /* @__PURE__ */ s(
+      y,
+      {
+        ref: f,
+        "aria-current": a ? "page" : void 0,
+        "aria-label": m,
+        "data-nav-id": r,
+        className: Es({
+          mode: g,
+          density: N,
+          isActive: a,
+          className: i ? "ds:flex-1 ds:min-w-0" : t
+        }),
+        ...p,
+        children: o
+      }
+    ), j = i ? /* @__PURE__ */ u(
+      "div",
+      {
+        className: [
+          "ds:group/item ds:flex ds:items-center ds:gap-[var(--spacing-2xs)]",
+          t ?? ""
+        ].filter(Boolean).join(" "),
+        children: [
+          S,
+          /* @__PURE__ */ s(
+            Y,
+            {
+              isPinned: n,
+              label: l ?? c ?? "",
+              onPinChange: d
+            }
+          )
+        ]
+      }
+    ) : S, C = g === "icon" && c ? /* @__PURE__ */ u(h.Root, { children: [
+      /* @__PURE__ */ s(h.Trigger, { asChild: !0, children: j }),
+      /* @__PURE__ */ s(h.Portal, { children: /* @__PURE__ */ u(
+        h.Content,
+        {
+          side: "right",
+          sideOffset: 6,
+          className: [
+            "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(" "),
+          children: [
+            c,
+            /* @__PURE__ */ s(h.Arrow, { className: "ds:fill-[var(--foreground)]" })
+          ]
+        }
+      ) })
+    ] }) : j;
+    return /* @__PURE__ */ s(rs.Provider, { value: z, children: C });
+  }
+);
+is.displayName = "SidebarItem";
+const Hs = b(({ className: e, children: a, ...r }, n) => /* @__PURE__ */ s(
+  "span",
+  {
+    ref: n,
+    "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(" "),
+    ...r,
+    children: a
+  }
+));
+Hs.displayName = "SidebarItemIcon";
+const Fs = b(({ className: e, children: a, ...r }, n) => {
+  const { mode: d } = x();
+  return /* @__PURE__ */ s(
+    "span",
+    {
+      ref: n,
+      className: [
+        "ds:flex-1",
+        "ds:overflow-hidden ds:text-ellipsis ds:whitespace-nowrap ds:break-normal",
+        "ds:text-start",
+        d === "icon" ? "ds:sr-only" : "",
+        e ?? ""
+      ].filter(Boolean).join(" "),
+      ...r,
+      children: a
+    }
+  );
+});
+Fs.displayName = "SidebarItemLabel";
+const Ms = b(({ className: e, children: a, ...r }, n) => {
+  const { mode: d } = x(), l = d === "icon", t = Z(rs);
+  return U(() => {
+    if (!t || !l) return;
+    const o = a == null || a === !1 ? null : String(a).trim() || null;
+    return t(o), () => t(null);
+  }, [t, a, l]), /* @__PURE__ */ s(
+    "span",
+    {
+      ref: n,
+      "aria-hidden": l ? "true" : void 0,
+      className: [
+        "ds:inline-flex ds:items-center ds:justify-center",
+        "ds:font-[var(--font-weight-semibold)]",
+        l ? [
+          "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(" "),
+      ...r,
+      children: a
+    }
+  );
+});
+Ms.displayName = "SidebarItemBadge";
+const Ks = I(
+  [
+    "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(" ")
+), Ls = b(({ logo: e, name: a, showChevron: r = !0, className: n, ...d }, l) => {
+  const { mode: t } = x(), o = t !== "icon";
+  return /* @__PURE__ */ u(
+    "button",
+    {
+      ref: l,
+      type: "button",
+      "aria-label": a,
+      className: [Ks(), n].filter(Boolean).join(" "),
+      ...d,
+      children: [
+        /* @__PURE__ */ s(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "ds:inline-flex ds:items-center ds:shrink-0",
+            children: e
+          }
+        ),
+        o ? /* @__PURE__ */ u(q, { children: [
+          /* @__PURE__ */ s("span", { className: "ds:truncate ds:flex-1 ds:text-start ds:max-w-[var(--header-workspace-max-inline-size)]", children: a }),
+          r ? /* @__PURE__ */ s(
+            H,
+            {
+              "aria-hidden": "true",
+              className: "ds:size-4 ds:shrink-0 ds:rotate-90"
+            }
+          ) : null
+        ] }) : null
+      ]
+    }
+  );
+});
+Ls.displayName = "SidebarWorkspaceSwitcher";
+const Vs = I(
+  [
+    "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)]",
+        icon: "ds:ps-0 ds:pe-0 ds:w-[var(--sidebar-modern-tile)] ds:h-[var(--sidebar-modern-tile)] ds:ms-auto ds:me-auto",
+        overlay: "ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]"
+      }
+    },
+    defaultVariants: { mode: "expanded" }
+  }
+), Us = b(({ icon: e, label: a, shortcut: r, className: n, ...d }, l) => {
+  const { mode: t } = x(), o = t !== "icon";
+  return /* @__PURE__ */ u(
+    "button",
+    {
+      ref: l,
+      type: "button",
+      "aria-label": a,
+      "aria-keyshortcuts": r,
+      className: [Vs({ mode: t }), n].filter(Boolean).join(" "),
+      ...d,
+      children: [
+        /* @__PURE__ */ s(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "ds:inline-flex ds:size-4 ds:items-center ds:justify-center",
+            children: e
+          }
+        ),
+        o ? /* @__PURE__ */ u(q, { children: [
+          /* @__PURE__ */ s("span", { className: "ds:truncate", children: a }),
+          r ? /* @__PURE__ */ s("kbd", { className: "ds:ms-auto ds:text-[length:var(--font-size-xs)] ds:font-[family-name:var(--font-mono)] ds:opacity-80", children: r }) : null
+        ] }) : null
+      ]
+    }
+  );
+});
+Us.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(" "), Y = b(
+  ({ isPinned: e, onPinChange: a, label: r, className: n, onClick: d, ...l }, t) => {
+    const { t: o } = D(), { mode: c } = x();
+    if (c === "icon") return null;
+    const p = e ? o("navigation.sidebar.unpinItem", "Unpin {{label}}", { label: r }) : o("navigation.sidebar.pinItem", "Pin {{label}}", { label: r });
+    return /* @__PURE__ */ s(
+      "button",
+      {
+        ref: t,
+        type: "button",
+        "aria-label": p,
+        "aria-pressed": e,
+        className: [$s, n].filter(Boolean).join(" "),
+        onClick: (f) => {
+          f.preventDefault(), f.stopPropagation(), a == null || a(!e), d == null || d(f);
+        },
+        ...l,
+        children: /* @__PURE__ */ s(
+          fs,
+          {
+            "aria-hidden": "true",
+            className: "ds:size-4",
+            fill: e ? "currentColor" : "none"
+          }
+        )
+      }
+    );
+  }
+);
+Y.displayName = "SidebarPinButton";
+const ns = W(null), Os = () => Z(ns), Gs = b(
+  ({ heading: e, emptyMessage: a, onReorder: r, className: n, children: d, ...l }, t) => {
+    const { t: o } = D(), c = e ?? o("navigation.sidebar.favorites", "Favourites"), p = Array.isArray(d) ? d.filter(Boolean) : d ? [d] : [], f = p.length, g = f > 0, [N, y] = R(null), [i, w] = R(""), z = $(!1), m = ss((j) => {
+      z.current = !z.current, w(z.current ? j : `${j}​`);
+    }, []), S = O(
+      () => ({ onReorder: r, count: f, dragSource: N, setDragSource: y, announce: m }),
+      [r, f, N, m]
+    );
+    return !g && !a ? null : /* @__PURE__ */ s(ns.Provider, { value: S, children: /* @__PURE__ */ u(
+      as,
+      {
+        ref: t,
+        label: c,
+        className: n,
+        ...l,
+        children: [
+          g ? p : /* @__PURE__ */ s("p", { className: "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] type-meta ds:text-[color:var(--muted-foreground)]", children: a }),
+          /* @__PURE__ */ s("span", { role: "status", "aria-live": "polite", className: "ds:sr-only", children: i })
+        ]
+      }
+    ) });
+  }
+);
+Gs.displayName = "SidebarFavorites";
+const qs = I(
+  [
+    "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 }
+  }
+), Zs = [
+  "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(" "), Ws = b(
+  ({
+    index: e,
+    isActive: a = !1,
+    asChild: r = !1,
+    reorderLabel: n,
+    isPinned: d = !1,
+    onPinChange: l,
+    pinLabel: t,
+    "aria-label": o,
+    className: c,
+    children: p,
+    ...f
+  }, g) => {
+    const { t: N } = D(), { mode: y } = x(), i = Os(), [w, z] = R(!1), m = !!(i != null && i.onReorder) && y !== "icon", S = n ?? o ?? "", j = ds(), C = (v, T) => {
+      if (!(i != null && i.onReorder)) return;
+      const L = Math.max(0, Math.min(i.count - 1, T));
+      L !== v && (i.onReorder(v, L), i.announce(
+        N(
+          "navigation.sidebar.reorderAnnounce",
+          "{{label}} moved to position {{to}} of {{total}}",
+          { label: S, to: L + 1, total: i.count }
+        )
+      ));
+    }, F = (v) => {
+      m && (v.altKey && v.key === "ArrowUp" ? (v.preventDefault(), C(e, e - 1)) : v.altKey && v.key === "ArrowDown" ? (v.preventDefault(), C(e, e + 1)) : v.key === "Home" && v.altKey ? (v.preventDefault(), C(e, 0)) : v.key === "End" && v.altKey && (v.preventDefault(), C(e, i.count - 1)));
+    }, A = (v) => {
+      m && (i == null || i.setDragSource(e), v.dataTransfer && (v.dataTransfer.effectAllowed = "move", v.dataTransfer.setData("ds:text/plain", String(e))));
+    }, P = () => {
+      i == null || i.setDragSource(null), z(!1);
+    }, M = (v) => {
+      !m || (i == null ? void 0 : i.dragSource) === null || (v.preventDefault(), v.dataTransfer && (v.dataTransfer.dropEffect = "move"), z(!0));
+    }, _ = () => z(!1), K = (v) => {
+      if (!m) return;
+      v.preventDefault();
+      const T = i == null ? void 0 : i.dragSource;
+      z(!1), !(T == null || T === e) && C(T, e);
+    }, k = (i == null ? void 0 : i.dragSource) === e;
+    return /* @__PURE__ */ u(
+      "div",
+      {
+        className: qs({
+          dragging: k,
+          dropTarget: w && !k
+        }),
+        draggable: m || void 0,
+        onDragStart: m ? A : void 0,
+        onDragEnd: m ? P : void 0,
+        onDragOver: M,
+        onDragLeave: _,
+        onDrop: K,
+        children: [
+          /* @__PURE__ */ s(
+            is,
+            {
+              ref: g,
+              isActive: a,
+              asChild: r,
+              "aria-label": o,
+              "aria-describedby": m ? j : void 0,
+              draggable: m ? !1 : void 0,
+              className: [m ? "ds:flex-1 ds:min-w-0" : "", c ?? ""].filter(Boolean).join(" "),
+              ...f,
+              children: p
+            }
+          ),
+          m ? /* @__PURE__ */ s(
+            "button",
+            {
+              type: "button",
+              id: j,
+              "aria-label": N(
+                "navigation.sidebar.reorderHandle",
+                "Reorder {{label}}. Press Alt + Up or Alt + Down to move.",
+                { label: S }
+              ),
+              className: Zs,
+              onKeyDown: F,
+              children: /* @__PURE__ */ s(ps, { "aria-hidden": "true", className: "ds:size-4" })
+            }
+          ) : null,
+          l && y !== "icon" ? /* @__PURE__ */ s(
+            Y,
+            {
+              isPinned: d,
+              label: t ?? o ?? "",
+              onPinChange: l
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+Ws.displayName = "SidebarFavoriteItem";
+const Xs = I(
+  [
+    "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(" ")
+), Ys = b(({ avatar: e, name: a, subtitle: r, subtitleLabel: n, className: d, ...l }, t) => {
+  const { mode: o } = x(), c = o !== "icon", p = typeof r == "string" ? r : n;
+  return /* @__PURE__ */ u(
+    "button",
+    {
+      ref: t,
+      type: "button",
+      "aria-label": p ? `${a}, ${p}` : a,
+      className: [Xs(), d].filter(Boolean).join(" "),
+      ...l,
+      children: [
+        /* @__PURE__ */ s(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "ds:inline-flex ds:items-center ds:shrink-0",
+            children: e
+          }
+        ),
+        c ? /* @__PURE__ */ u("span", { className: "ds:flex-1 ds:min-w-0 ds:text-start", children: [
+          /* @__PURE__ */ s("span", { className: "ds:block ds:truncate type-label", children: a }),
+          r ? typeof r == "string" ? /* @__PURE__ */ s("span", { className: "ds:block ds:truncate type-meta ds:text-[color:var(--muted-foreground)]", children: r }) : /* @__PURE__ */ s("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: r }) : null
+        ] }) : null
+      ]
+    }
+  );
+});
+Ys.displayName = "SidebarProfilePill";
+const Js = [
+  "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(" "), Qs = b(({ className: e, "aria-label": a, onClick: r, ...n }, d) => {
+  const { t: l } = D(), { mode: t, transitionTo: o } = x();
+  if (t === "overlay") return null;
+  const c = t === "expanded", p = a ?? (c ? l("navigation.sidebar.collapse", "Collapse sidebar") : l("navigation.sidebar.expand", "Expand sidebar")), f = /* @__PURE__ */ s(
+    "button",
+    {
+      ref: d,
+      type: "button",
+      "aria-label": p,
+      "aria-expanded": c,
+      onClick: (g) => {
+        o == null || o(c ? "icon" : "expanded"), r == null || r(g);
+      },
+      className: [Js, e].filter(Boolean).join(" "),
+      ...n,
+      children: c ? /* @__PURE__ */ s(
+        bs,
+        {
+          "aria-hidden": "true",
+          className: "ds:size-4 ds:rtl:-scale-x-100"
+        }
+      ) : /* @__PURE__ */ s(
+        xs,
+        {
+          "aria-hidden": "true",
+          className: "ds:size-4 ds:rtl:-scale-x-100"
+        }
+      )
+    }
+  );
+  return /* @__PURE__ */ u(h.Root, { children: [
+    /* @__PURE__ */ s(h.Trigger, { asChild: !0, children: f }),
+    /* @__PURE__ */ s(h.Portal, { children: /* @__PURE__ */ u(
+      h.Content,
+      {
+        side: t === "icon" ? "right" : "top",
+        sideOffset: 6,
+        className: [
+          "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(" "),
+        children: [
+          p,
+          /* @__PURE__ */ s(h.Arrow, { className: "ds:fill-[var(--foreground)]" })
+        ]
+      }
+    ) })
+  ] });
+});
+Qs.displayName = "SidebarCollapseTrigger";
+const se = I(
+  [
+    "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" }
+  }
+), ee = b(({ title: e, description: a, icon: r, className: n, ...d }, l) => {
+  const { mode: t } = x(), o = t === "icon", c = (
+    // 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__ */ u(
+      "a",
+      {
+        ref: l,
+        "aria-label": o ? e : void 0,
+        className: se({ mode: t, className: n }),
+        ...d,
+        children: [
+          /* @__PURE__ */ s(
+            "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: r ?? /* @__PURE__ */ s(ws, { className: "ds:size-4" })
+            }
+          ),
+          o ? null : /* @__PURE__ */ u(q, { children: [
+            /* @__PURE__ */ u("span", { className: "ds:flex-1 ds:min-w-0 ds:text-start", children: [
+              /* @__PURE__ */ s("span", { className: "ds:block ds:line-clamp-2 type-label", children: e }),
+              a ? (
+                // Foreground (not muted) on the tinted surface — the gradient
+                // stops leave muted text short of AA in both colour schemes.
+                /* @__PURE__ */ s("span", { className: "ds:block ds:line-clamp-2 type-meta", children: a })
+              ) : null
+            ] }),
+            /* @__PURE__ */ s(
+              H,
+              {
+                "aria-hidden": "true",
+                className: "ds:size-4 ds:shrink-0 ds:rtl:-scale-x-100"
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  );
+  return o ? /* @__PURE__ */ u(h.Root, { children: [
+    /* @__PURE__ */ s(h.Trigger, { asChild: !0, children: c }),
+    /* @__PURE__ */ s(h.Portal, { children: /* @__PURE__ */ u(
+      h.Content,
+      {
+        side: "right",
+        sideOffset: 6,
+        className: [
+          "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(" "),
+        children: [
+          e,
+          /* @__PURE__ */ s(h.Arrow, { className: "ds:fill-[var(--foreground)]" })
+        ]
+      }
+    ) })
+  ] }) : c;
+});
+ee.displayName = "SidebarUpgradeChip";
+export {
+  Ts as S,
+  Rs as a,
+  Qs as b,
+  Ws as c,
+  Gs as d,
+  Ds as e,
+  _s as f,
+  Bs as g,
+  is as h,
+  Ms as i,
+  Hs as j,
+  Fs as k,
+  Y as l,
+  Us as m,
+  Ys as n,
+  as as o,
+  ee as p,
+  Ls as q,
+  Ns as s,
+  x as u
+};
+//# sourceMappingURL=sidebar-B0OBmJrC.js.map