@alfadocs/ui-kit-debug 1.57.0 → 1.58.0

package/dist/_chunks/sidebar-DLsG2AIk.js

@@ -1,1349 +0,0 @@
-import { jsx as s, jsxs as u, Fragment as X } from "react/jsx-runtime";
-import { forwardRef as b, useState as B, useEffect as L, useCallback as Q, useRef as G, useMemo as O, useId as ns, useContext as q, createContext as Z } from "react";
-import * as R from "@radix-ui/react-dialog";
-import * as M from "@radix-ui/react-collapsible";
-import * as E from "@radix-ui/react-accordion";
-import * as h from "@radix-ui/react-tooltip";
-import { a as os } from "./accordion-Ch3xp0mX.js";
-import { S as ts } from "./scroll-area-ZtFCv9K7.js";
-import { Slot as ls } from "@radix-ui/react-slot";
-import { c as T } from "./index-D2ZczOXr.js";
-import { useTranslation as A } from "react-i18next";
-import { u as cs } from "./registry-DvAUVLHh.js";
-import { u as us } from "./use-edge-resize-DHbyQwu8.js";
-import { c as ms } from "./compose-refs-C0k0tdqF.js";
-import { a as vs, b as ps, d as fs } from "./input-surface-iBmxVBfr.js";
-import { X as gs } from "./x-B5YnXwCz.js";
-import { c as ss } from "./createLucideIcon-DhHxpK9K.js";
-import { G as bs } from "./grip-vertical-onSb1JXO.js";
-import { C as H } from "./chevron-right-I9AeSxH2.js";
-import { S as hs } from "./star-Bf9L2Uot.js";
-import { T as xs } 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 ys = [
-  ["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" }]
-], ws = ss("panel-left-close", ys);
-/**
- * @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 Ns = [
-  ["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" }]
-], zs = ss("panel-left-open", Ns), Ss = {
-  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."
-    }
-  }
-}, $ = Z({
-  mode: "expanded",
-  density: "default"
-}), w = () => q($), es = "ui.sidebar.state";
-function js(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 Cs(e) {
-  if (!(typeof window > "u"))
-    try {
-      window.localStorage.setItem(es, e);
-    } catch {
-    }
-}
-const Y = T(
-  [
-    "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.
-    //
-    // `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: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: {
-      // 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: {
-        expanded: "ds:w-[var(--sidebar-modern-expanded-size)] ds:[:where(&)]:[box-shadow:var(--accessible-off,var(--shadow-md))]",
-        icon: "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" }
-  }
-), ks = 192, Ts = 384, Is = 248, Rs = [
-  "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(" "), Bs = b(
-  ({
-    state: e,
-    defaultState: a = "expanded",
-    onStateChange: r,
-    density: d = "default",
-    open: n,
-    onOpenChange: t,
-    resizable: o = !1,
-    "aria-label": l,
-    className: c,
-    children: m,
-    id: f,
-    ...g
-  }, y) => {
-    const { t: x } = A("ui"), i = e !== void 0, [N, z] = B(
-      () => i ? e : js(a)
-    ), v = i ? e : N;
-    L(() => {
-      i || Cs(N);
-    }, [N, i]);
-    const S = Q(
-      (k) => {
-        i || z(k), r == null || r(k);
-      },
-      [i, r]
-    ), j = l ?? x("navigation.sidebar.label"), C = G(v);
-    L(() => {
-      C.current = v;
-    }, [v]);
-    const F = O(
-      () => ({
-        getIsCollapsed: () => C.current !== "expanded",
-        toggleCollapsed: () => {
-          const k = C.current === "expanded" ? "icon" : "expanded";
-          S(k);
-        }
-      }),
-      [S]
-    );
-    cs(Ss, F, f);
-    const D = G(null), P = O(() => ms(y, D), [y]), { separatorProps: U, isResizing: _ } = us({
-      edge: "inline-end",
-      targetRef: D,
-      cssProperty: "--sidebar-modern-expanded-size",
-      minSize: ks,
-      maxSize: Ts,
-      defaultSize: Is,
-      disabled: !o || v !== "expanded"
-    }), V = o && v === "expanded";
-    return v === "overlay" ? /* @__PURE__ */ s(
-      $.Provider,
-      {
-        value: { mode: "overlay", density: d, transitionTo: S },
-        children: /* @__PURE__ */ s(R.Root, { open: n, onOpenChange: t, children: /* @__PURE__ */ u(R.Portal, { children: [
-          /* @__PURE__ */ s(
-            R.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(
-            R.Content,
-            {
-              "aria-label": j,
-              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",
-                Y({ mode: "overlay", density: d }),
-                "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: m
-                  }
-                ),
-                /* @__PURE__ */ s(R.Close, { asChild: !0, children: /* @__PURE__ */ s(
-                  "button",
-                  {
-                    type: "button",
-                    "aria-label": x("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(gs, { "aria-hidden": "true", className: "ds:size-4" })
-                  }
-                ) })
-              ]
-            }
-          )
-        ] }) })
-      }
-    ) : /* @__PURE__ */ s(
-      $.Provider,
-      {
-        value: { mode: v, density: d, 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": v,
-            "data-density": d,
-            "data-resizing": _ ? "" : void 0,
-            className: [
-              Y({ mode: v, density: d }),
-              d === "compact" ? "ds:density-compact" : "",
-              c ?? ""
-            ].filter(Boolean).join(" "),
-            ...g,
-            children: [
-              m,
-              V ? /* @__PURE__ */ s(
-                "div",
-                {
-                  ...U,
-                  "aria-label": x("navigation.sidebar.resize"),
-                  "data-resizing": _ ? "" : void 0,
-                  className: Rs
-                }
-              ) : null
-            ]
-          }
-        ) })
-      }
-    );
-  }
-);
-Bs.displayName = "Sidebar";
-const As = b(({ className: e, ...a }, r) => {
-  const { mode: d } = w();
-  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)]",
-        // 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.
-        d === "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(" "),
-      ...a
-    }
-  );
-});
-As.displayName = "SidebarHeader";
-const Ds = b(
-  ({ className: e, children: a, ...r }, d) => (
-    // 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(
-      ts,
-      {
-        orientation: "vertical",
-        className: ["ds:flex-1 ds:min-h-0", e ?? ""].filter(Boolean).join(" "),
-        children: /* @__PURE__ */ s(
-          "div",
-          {
-            ref: d,
-            className: "ds:ps-[var(--spacing-xs)] ds:pe-[var(--spacing-xs)] ds:py-[var(--spacing-sm)]",
-            ...r,
-            children: a
-          }
-        )
-      }
-    )
-  )
-);
-Ds.displayName = "SidebarBody";
-const Ps = b(({ className: e, ...a }, r) => {
-  const { mode: d } = w();
-  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.
-        d === "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
-    }
-  );
-});
-Ps.displayName = "SidebarFooter";
-const _s = [
-  "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(" "), J = [
-  "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: d = !0,
-    open: n,
-    onOpenChange: t,
-    className: o,
-    children: l,
-    ...c
-  }, m) => {
-    const { mode: f } = w(), g = f === "icon", y = r && !g && !!e, x = [
-      "ds:flex ds:flex-col",
-      "ds:gap-[var(--spacing-xs)]",
-      "ds:mt-[var(--spacing-sm)]",
-      o ?? ""
-    ].filter(Boolean).join(" ");
-    if (!y)
-      return /* @__PURE__ */ u("div", { ref: m, className: x, ...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: J, children: a }) : null,
-              e ? /* @__PURE__ */ s("span", { className: g ? "ds:sr-only" : "", children: e }) : null
-            ]
-          }
-        ) : null,
-        l
-      ] });
-    const i = "section";
-    return /* @__PURE__ */ s(
-      E.Root,
-      {
-        type: "single",
-        collapsible: !0,
-        defaultValue: n === void 0 && d ? i : void 0,
-        value: n === void 0 ? void 0 : n ? i : "",
-        onValueChange: t ? (N) => t(N === i) : void 0,
-        asChild: !0,
-        children: /* @__PURE__ */ s("div", { ref: m, className: x, ...c, children: /* @__PURE__ */ u(E.Item, { value: i, children: [
-          /* @__PURE__ */ s(E.Header, { className: "ds:flex", children: /* @__PURE__ */ u(E.Trigger, { className: _s, children: [
-            a ? /* @__PURE__ */ s("span", { "aria-hidden": "true", className: J, 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(
-            os,
-            {
-              "aria-label": e,
-              className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)] ds:[&>div]:contents",
-              children: l
-            }
-          )
-        ] }) })
-      }
-    );
-  }
-);
-as.displayName = "SidebarSection";
-const Es = [
-  "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(" "), Hs = b(
-  ({
-    label: e,
-    icon: a,
-    children: r,
-    className: d,
-    defaultOpen: n,
-    open: t,
-    onOpenChange: o,
-    ...l
-  }, c) => {
-    const { mode: m } = w();
-    return /* @__PURE__ */ u(
-      M.Root,
-      {
-        ref: c,
-        defaultOpen: n,
-        open: t,
-        onOpenChange: o,
-        className: d,
-        ...l,
-        children: [
-          /* @__PURE__ */ u(M.Trigger, { className: Es, 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",
-                  m === "icon" ? "ds:sr-only" : ""
-                ].join(" "),
-                children: e
-              }
-            ),
-            m !== "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(
-            M.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
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-Hs.displayName = "SidebarGroup";
-const Fs = T(
-  [
-    // 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 = Z(null), is = b(
-  ({
-    asChild: e = !1,
-    isActive: a = !1,
-    navId: r,
-    isPinned: d = !1,
-    onPinChange: n,
-    pinLabel: t,
-    className: o,
-    children: l,
-    "aria-label": c,
-    ...m
-  }, f) => {
-    const { mode: g, density: y } = w(), x = e ? ls : "a", i = n !== void 0 && g !== "icon", [N, z] = B(null), v = g === "icon" && c != null && N ? `${c}, ${N}` : c, S = /* @__PURE__ */ s(
-      x,
-      {
-        ref: f,
-        "aria-current": a ? "page" : void 0,
-        "aria-label": v,
-        "data-nav-id": r,
-        className: Fs({
-          mode: g,
-          density: y,
-          isActive: a,
-          className: i ? "ds:flex-1 ds:min-w-0" : o
-        }),
-        ...m,
-        children: l
-      }
-    ), j = i ? /* @__PURE__ */ u(
-      "div",
-      {
-        className: [
-          "ds:group/item ds:flex ds:items-center ds:gap-[var(--spacing-2xs)]",
-          o ?? ""
-        ].filter(Boolean).join(" "),
-        children: [
-          S,
-          /* @__PURE__ */ s(
-            W,
-            {
-              isPinned: d,
-              label: t ?? c ?? "",
-              onPinChange: n
-            }
-          )
-        ]
-      }
-    ) : 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 Us = b(({ className: e, children: a, ...r }, d) => /* @__PURE__ */ s(
-  "span",
-  {
-    ref: d,
-    "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
-  }
-));
-Us.displayName = "SidebarItemIcon";
-const Vs = b(({ className: e, children: a, ...r }, d) => {
-  const { mode: n } = w();
-  return /* @__PURE__ */ s(
-    "span",
-    {
-      ref: d,
-      className: [
-        "ds:flex-1",
-        "ds:overflow-hidden ds:text-ellipsis ds:whitespace-nowrap ds:break-normal",
-        "ds:text-start",
-        n === "icon" ? "ds:sr-only" : "",
-        e ?? ""
-      ].filter(Boolean).join(" "),
-      ...r,
-      children: a
-    }
-  );
-});
-Vs.displayName = "SidebarItemLabel";
-const Ks = b(({ className: e, children: a, ...r }, d) => {
-  const { mode: n } = w(), t = n === "icon", o = q(rs);
-  return L(() => {
-    if (!o || !t) return;
-    const l = a == null || a === !1 ? null : String(a).trim() || null;
-    return o(l), () => o(null);
-  }, [o, a, t]), /* @__PURE__ */ s(
-    "span",
-    {
-      ref: d,
-      "aria-hidden": t ? "true" : void 0,
-      className: [
-        "ds:inline-flex ds:items-center ds:justify-center",
-        "ds:font-[var(--font-weight-semibold)]",
-        t ? [
-          "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
-    }
-  );
-});
-Ks.displayName = "SidebarItemBadge";
-const Ms = T(
-  [
-    "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: [
-          vs.sm,
-          ps.sm,
-          fs.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" }
-  }
-), Ls = b(
-  ({ logo: e, name: a, showChevron: r = !0, variant: d = "ghost", className: n, ...t }, o) => {
-    const { mode: l } = w(), c = l !== "icon";
-    return /* @__PURE__ */ u(
-      "button",
-      {
-        ref: o,
-        type: "button",
-        "aria-label": a,
-        className: [Ms({ variant: d }), n].filter(Boolean).join(" "),
-        ...t,
-        children: [
-          /* @__PURE__ */ s(
-            "span",
-            {
-              "aria-hidden": "true",
-              className: "ds:inline-flex ds:items-center ds:shrink-0",
-              children: e
-            }
-          ),
-          c ? /* @__PURE__ */ u(X, { 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 Gs = T(
-  [
-    "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" }
-  }
-), Os = b(({ icon: e, label: a, shortcut: r, className: d, ...n }, t) => {
-  const { mode: o } = w(), l = o !== "icon";
-  return /* @__PURE__ */ u(
-    "button",
-    {
-      ref: t,
-      type: "button",
-      "aria-label": a,
-      "aria-keyshortcuts": r,
-      className: [Gs({ mode: o }), d].filter(Boolean).join(" "),
-      ...n,
-      children: [
-        /* @__PURE__ */ s(
-          "span",
-          {
-            "aria-hidden": "true",
-            className: "ds:inline-flex ds:size-4 ds:items-center ds:justify-center",
-            children: e
-          }
-        ),
-        l ? /* @__PURE__ */ u(X, { 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
-      ]
-    }
-  );
-});
-Os.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(" "), W = b(
-  ({ isPinned: e, onPinChange: a, label: r, className: d, onClick: n, ...t }, o) => {
-    const { t: l } = A("ui"), { mode: c } = w();
-    if (c === "icon") return null;
-    const m = e ? l("navigation.sidebar.unpinItem", "Unpin {{label}}", { label: r }) : l("navigation.sidebar.pinItem", "Pin {{label}}", { label: r });
-    return /* @__PURE__ */ s(
-      "button",
-      {
-        ref: o,
-        type: "button",
-        "aria-label": m,
-        "aria-pressed": e,
-        className: [$s, d].filter(Boolean).join(" "),
-        onClick: (f) => {
-          f.preventDefault(), f.stopPropagation(), a == null || a(!e), n == null || n(f);
-        },
-        ...t,
-        children: /* @__PURE__ */ s(
-          hs,
-          {
-            "aria-hidden": "true",
-            className: "ds:size-4",
-            fill: e ? "currentColor" : "none"
-          }
-        )
-      }
-    );
-  }
-);
-W.displayName = "SidebarPinButton";
-const ds = Z(null), Xs = () => q(ds), qs = b(
-  ({ heading: e, emptyMessage: a, onReorder: r, className: d, children: n, ...t }, o) => {
-    const { t: l } = A("ui"), c = e ?? l("navigation.sidebar.favorites", "Favourites"), m = Array.isArray(n) ? n.filter(Boolean) : n ? [n] : [], f = m.length, g = f > 0, [y, x] = B(null), [i, N] = B(""), z = G(!1), v = Q((j) => {
-      z.current = !z.current, N(z.current ? j : `${j}​`);
-    }, []), S = O(
-      () => ({ onReorder: r, count: f, dragSource: y, setDragSource: x, announce: v }),
-      [r, f, y, v]
-    );
-    return !g && !a ? null : /* @__PURE__ */ s(ds.Provider, { value: S, children: /* @__PURE__ */ u(
-      as,
-      {
-        ref: o,
-        label: c,
-        className: d,
-        ...t,
-        children: [
-          g ? m : /* @__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 })
-        ]
-      }
-    ) });
-  }
-);
-qs.displayName = "SidebarFavorites";
-const Zs = T(
-  [
-    "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(" "), Ys = b(
-  ({
-    index: e,
-    isActive: a = !1,
-    asChild: r = !1,
-    reorderLabel: d,
-    isPinned: n = !1,
-    onPinChange: t,
-    pinLabel: o,
-    "aria-label": l,
-    className: c,
-    children: m,
-    ...f
-  }, g) => {
-    const { t: y } = A("ui"), { mode: x } = w(), i = Xs(), [N, z] = B(!1), v = !!(i != null && i.onReorder) && x !== "icon", S = d ?? l ?? "", j = ns(), C = (p, I) => {
-      if (!(i != null && i.onReorder)) return;
-      const K = Math.max(0, Math.min(i.count - 1, I));
-      K !== p && (i.onReorder(p, K), i.announce(
-        y(
-          "navigation.sidebar.reorderAnnounce",
-          "{{label}} moved to position {{to}} of {{total}}",
-          { label: S, to: K + 1, total: i.count }
-        )
-      ));
-    }, F = (p) => {
-      v && (p.altKey && p.key === "ArrowUp" ? (p.preventDefault(), C(e, e - 1)) : p.altKey && p.key === "ArrowDown" ? (p.preventDefault(), C(e, e + 1)) : p.key === "Home" && p.altKey ? (p.preventDefault(), C(e, 0)) : p.key === "End" && p.altKey && (p.preventDefault(), C(e, i.count - 1)));
-    }, D = (p) => {
-      v && (i == null || i.setDragSource(e), p.dataTransfer && (p.dataTransfer.effectAllowed = "move", p.dataTransfer.setData("ds:text/plain", String(e))));
-    }, P = () => {
-      i == null || i.setDragSource(null), z(!1);
-    }, U = (p) => {
-      !v || (i == null ? void 0 : i.dragSource) === null || (p.preventDefault(), p.dataTransfer && (p.dataTransfer.dropEffect = "move"), z(!0));
-    }, _ = () => z(!1), V = (p) => {
-      if (!v) return;
-      p.preventDefault();
-      const I = i == null ? void 0 : i.dragSource;
-      z(!1), !(I == null || I === e) && C(I, e);
-    }, k = (i == null ? void 0 : i.dragSource) === e;
-    return /* @__PURE__ */ u(
-      "div",
-      {
-        className: Zs({
-          dragging: k,
-          dropTarget: N && !k
-        }),
-        draggable: v || void 0,
-        onDragStart: v ? D : void 0,
-        onDragEnd: v ? P : void 0,
-        onDragOver: U,
-        onDragLeave: _,
-        onDrop: V,
-        children: [
-          /* @__PURE__ */ s(
-            is,
-            {
-              ref: g,
-              isActive: a,
-              asChild: r,
-              "aria-label": l,
-              "aria-describedby": v ? j : void 0,
-              draggable: v ? !1 : void 0,
-              className: [v ? "ds:flex-1 ds:min-w-0" : "", c ?? ""].filter(Boolean).join(" "),
-              ...f,
-              children: m
-            }
-          ),
-          v ? /* @__PURE__ */ s(
-            "button",
-            {
-              type: "button",
-              id: j,
-              "aria-label": y(
-                "navigation.sidebar.reorderHandle",
-                "Reorder {{label}}. Press Alt + Up or Alt + Down to move.",
-                { label: S }
-              ),
-              className: Ws,
-              onKeyDown: F,
-              children: /* @__PURE__ */ s(bs, { "aria-hidden": "true", className: "ds:size-4" })
-            }
-          ) : null,
-          t && x !== "icon" ? /* @__PURE__ */ s(
-            W,
-            {
-              isPinned: n,
-              label: o ?? l ?? "",
-              onPinChange: t
-            }
-          ) : null
-        ]
-      }
-    );
-  }
-);
-Ys.displayName = "SidebarFavoriteItem";
-const Js = T(
-  [
-    "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 = b(({ avatar: e, name: a, subtitle: r, subtitleLabel: d, className: n, ...t }, o) => {
-  const { mode: l } = w(), c = l !== "icon", m = typeof r == "string" ? r : d;
-  return /* @__PURE__ */ u(
-    "button",
-    {
-      ref: o,
-      type: "button",
-      "aria-label": m ? `${a}, ${m}` : a,
-      className: [Js(), n].filter(Boolean).join(" "),
-      ...t,
-      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
-      ]
-    }
-  );
-});
-Qs.displayName = "SidebarProfilePill";
-const se = [
-  "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(" "), ee = b(({ className: e, "aria-label": a, onClick: r, ...d }, n) => {
-  const { t } = A("ui"), { mode: o, density: l, transitionTo: c } = w();
-  if (o === "overlay") return null;
-  const m = o === "expanded", f = m ? [
-    "ds:justify-start",
-    l === "compact" ? "ds:ps-[var(--spacing-xs)]" : "ds:ps-[var(--spacing-sm)]"
-  ].join(" ") : "ds:justify-center", g = a ?? (m ? t("navigation.sidebar.collapse", "Collapse sidebar") : t("navigation.sidebar.expand", "Expand sidebar")), y = /* @__PURE__ */ s(
-    "button",
-    {
-      ref: n,
-      type: "button",
-      "aria-label": g,
-      "aria-expanded": m,
-      onClick: (x) => {
-        c == null || c(m ? "icon" : "expanded"), r == null || r(x);
-      },
-      className: [se, f, e].filter(Boolean).join(" "),
-      ...d,
-      children: /* @__PURE__ */ s("span", { className: "ds:inline-flex ds:size-5 ds:shrink-0 ds:items-center ds:justify-center", children: m ? /* @__PURE__ */ s(
-        ws,
-        {
-          "aria-hidden": "true",
-          className: "ds:size-4 ds:rtl:-scale-x-100"
-        }
-      ) : /* @__PURE__ */ s(
-        zs,
-        {
-          "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: y }),
-    /* @__PURE__ */ s(h.Portal, { children: /* @__PURE__ */ u(
-      h.Content,
-      {
-        side: o === "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: [
-          g,
-          /* @__PURE__ */ s(h.Arrow, { className: "ds:fill-[var(--foreground)]" })
-        ]
-      }
-    ) })
-  ] });
-});
-ee.displayName = "SidebarCollapseTrigger";
-const ae = T(
-  [
-    "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" }
-  }
-), re = b(({ title: e, description: a, icon: r, className: d, ...n }, t) => {
-  const { mode: o } = w(), l = o === "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: t,
-        "aria-label": l ? e : void 0,
-        className: ae({ mode: o, className: d }),
-        ...n,
-        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(xs, { className: "ds:size-4" })
-            }
-          ),
-          l ? null : /* @__PURE__ */ u(X, { 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 l ? /* @__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;
-});
-re.displayName = "SidebarUpgradeChip";
-export {
-  Bs as S,
-  Ds as a,
-  ee as b,
-  Ys as c,
-  qs as d,
-  Ps as e,
-  Hs as f,
-  As as g,
-  is as h,
-  Ks as i,
-  Us as j,
-  Vs as k,
-  W as l,
-  Os as m,
-  Qs as n,
-  as as o,
-  re as p,
-  Ls as q,
-  Ss as s,
-  w as u
-};
-//# sourceMappingURL=sidebar-DLsG2AIk.js.map