@meetreeve/ui 0.2.0

package/dist/index.mjs

@@ -0,0 +1,910 @@
+"use client";
+
+// src/brand-glyph.tsx
+import Image from "next/image";
+import { useState } from "react";
+
+// src/lib/cn.ts
+function cn(...inputs) {
+  const out = [];
+  for (const input of inputs) {
+    if (!input) continue;
+    if (typeof input === "string" || typeof input === "number") {
+      out.push(String(input));
+    } else if (Array.isArray(input)) {
+      const nested = cn(...input);
+      if (nested) out.push(nested);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) out.push(key);
+      }
+    }
+  }
+  return out.join(" ");
+}
+
+// src/lib/initials.ts
+function initials(name) {
+  if (!name) return "\xB7\xB7";
+  const parts = name.trim().split(/\s+/).slice(0, 2);
+  return parts.map((p) => p[0]?.toUpperCase() ?? "").join("") || "\xB7\xB7";
+}
+
+// src/lib/monogram.ts
+var MONOGRAM_COLORS = [
+  "#7c3aed",
+  // violet
+  "#2563eb",
+  // blue
+  "#0e7490",
+  // cyan
+  "#047857",
+  // emerald
+  "#c2410c",
+  // orange
+  "#dc2626",
+  // red
+  "#db2777",
+  // pink
+  "#4f46e5"
+  // indigo
+];
+function monogramColor(seed) {
+  let h = 0;
+  for (let i = 0; i < seed.length; i++) h = h * 31 + seed.charCodeAt(i) | 0;
+  return MONOGRAM_COLORS[Math.abs(h) % MONOGRAM_COLORS.length];
+}
+
+// src/brand-glyph.tsx
+import { jsx } from "react/jsx-runtime";
+function faviconUrl(domain) {
+  if (!domain) return null;
+  const host = domain.trim().toLowerCase();
+  if (!host.includes(".") || /\s/.test(host)) return null;
+  return `https://www.google.com/s2/favicons?domain=${encodeURIComponent(host)}&sz=128`;
+}
+function BrandGlyph({ brand, size = "sm", subtle = false, className }) {
+  const box = size === "lg" ? "h-6 w-6" : "h-5 w-5";
+  const img = size === "lg" ? "h-4 w-4" : "h-3.5 w-3.5";
+  const dim = size === "lg" ? 16 : 14;
+  const candidates = [];
+  if (brand.favicon) candidates.push(brand.favicon);
+  if (brand.logo) candidates.push(brand.logo);
+  const [failed, setFailed] = useState(() => /* @__PURE__ */ new Set());
+  const src = candidates.find((u) => !failed.has(u)) ?? null;
+  if (src) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "flex shrink-0 items-center justify-center overflow-hidden rounded",
+          // Tint needs a dark-mode counterpart or it vanishes on dark backgrounds.
+          subtle ? "bg-black/5 dark:bg-white/10" : "bg-black/10 dark:bg-white/15",
+          box,
+          className
+        ),
+        children: /* @__PURE__ */ jsx(
+          Image,
+          {
+            src,
+            alt: "",
+            width: dim,
+            height: dim,
+            "data-testid": "brand-image",
+            unoptimized: true,
+            onError: () => setFailed((prev) => new Set(prev).add(src)),
+            className: cn(img, "rounded-sm object-contain")
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      "data-testid": "brand-monogram",
+      className: cn(
+        "flex shrink-0 select-none items-center justify-center rounded font-semibold uppercase text-white",
+        size === "lg" ? "text-[11px]" : "text-[9px]",
+        box,
+        className
+      ),
+      style: { backgroundColor: brand.color || monogramColor(brand.name || "?") },
+      children: initials(brand.name)
+    }
+  );
+}
+
+// src/responsive-header.tsx
+import { useEffect, useId, useRef, useState as useState2 } from "react";
+import { Menu, X } from "lucide-react";
+
+// src/lib/use-media-query.ts
+import { useCallback, useSyncExternalStore } from "react";
+function useMediaQuery(query) {
+  const subscribe = useCallback(
+    (onChange) => {
+      if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+        return () => {
+        };
+      }
+      const mql = window.matchMedia(query);
+      mql.addEventListener("change", onChange);
+      return () => mql.removeEventListener("change", onChange);
+    },
+    [query]
+  );
+  const getSnapshot = () => typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(query).matches : false;
+  return useSyncExternalStore(subscribe, getSnapshot, () => false);
+}
+
+// src/tokens.ts
+var MIN_SIZES = {
+  /** WCAG 2.5.5 minimum interactive target, px. Applies to BOTH width and height. */
+  touchTarget: 44,
+  /** Floor width for the always-inline search field on mobile, px. */
+  searchInput: 200,
+  /** Generic minimum width/height for a secondary control (button, select), px. */
+  control: 44,
+  /** Max width of the brand wordmark before it truncates, px. */
+  wordmarkMaxWidth: 180
+};
+var BREAKPOINTS = {
+  /** Tailwind `sm`. */
+  sm: 640,
+  /** Tailwind `md` — the header switches to its full desktop layout at/above this. */
+  md: 768
+};
+
+// src/responsive-header.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+function MenuIcon({ open }) {
+  return open ? /* @__PURE__ */ jsx2(X, { className: "h-5 w-5", "aria-hidden": "true" }) : /* @__PURE__ */ jsx2(Menu, { className: "h-5 w-5", "aria-hidden": "true" });
+}
+function SecondaryControls({
+  nav,
+  auth,
+  themeToggle
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    nav?.map(
+      (item) => (
+        // A link navigates; an action-only item (no href) is a button — never an
+        // <a href="#"> that scroll-jumps and pushes a history entry.
+        item.href ? /* @__PURE__ */ jsx2(
+          "a",
+          {
+            href: item.href,
+            onClick: item.onSelect,
+            className: "text-sm font-medium text-foreground/80 hover:text-foreground",
+            children: item.label
+          },
+          item.label
+        ) : /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            onClick: item.onSelect,
+            className: "text-left text-sm font-medium text-foreground/80 hover:text-foreground",
+            children: item.label
+          },
+          item.label
+        )
+      )
+    ),
+    themeToggle,
+    auth
+  ] });
+}
+function ResponsiveHeader({
+  brand,
+  search,
+  nav,
+  auth,
+  themeToggle,
+  menuLabel = "Menu",
+  className
+}) {
+  const isDesktop = useMediaQuery(`(min-width: ${BREAKPOINTS.md}px)`);
+  const [open, setOpen] = useState2(false);
+  const panelId = useId();
+  const buttonRef = useRef(null);
+  const panelRef = useRef(null);
+  useEffect(() => {
+    if (isDesktop) setOpen(false);
+  }, [isDesktop]);
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        setOpen(false);
+        buttonRef.current?.focus();
+      }
+    };
+    const onPointerDown = (e) => {
+      const target = e.target;
+      if (!panelRef.current?.contains(target) && !buttonRef.current?.contains(target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.removeEventListener("pointerdown", onPointerDown);
+    };
+  }, [open]);
+  const hasSecondary = Boolean(nav && nav.length > 0 || auth || themeToggle);
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      "data-testid": "responsive-header",
+      className: cn(
+        "flex w-full items-center gap-3 border-b border-border bg-background px-4 py-2",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { "data-testid": "header-brand", className: "flex shrink-0 items-center gap-2", children: [
+          /* @__PURE__ */ jsx2(BrandGlyph, { brand, size: "lg" }),
+          isDesktop && /* @__PURE__ */ jsx2(
+            "span",
+            {
+              "data-testid": "header-wordmark",
+              className: "truncate text-sm font-semibold text-foreground",
+              style: { maxWidth: MIN_SIZES.wordmarkMaxWidth },
+              children: brand.name
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            "data-testid": "header-search",
+            className: "flex flex-1 items-center",
+            style: { minWidth: MIN_SIZES.searchInput },
+            children: search
+          }
+        ),
+        hasSecondary && (isDesktop ? /* @__PURE__ */ jsx2("nav", { "data-testid": "header-actions", className: "flex shrink-0 items-center gap-3", children: /* @__PURE__ */ jsx2(SecondaryControls, { nav, auth, themeToggle }) }) : /* @__PURE__ */ jsxs("div", { className: "relative shrink-0", children: [
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              ref: buttonRef,
+              type: "button",
+              "data-testid": "header-menu-button",
+              "aria-label": menuLabel,
+              "aria-expanded": open,
+              "aria-controls": panelId,
+              onClick: () => setOpen((v) => !v),
+              className: "flex items-center justify-center rounded-md border border-border text-foreground",
+              style: { minWidth: MIN_SIZES.touchTarget, minHeight: MIN_SIZES.touchTarget },
+              children: /* @__PURE__ */ jsx2(MenuIcon, { open })
+            }
+          ),
+          open && /* @__PURE__ */ jsx2(
+            "div",
+            {
+              ref: panelRef,
+              id: panelId,
+              "data-testid": "header-menu-panel",
+              className: "absolute right-0 top-full z-50 mt-2 flex min-w-[12rem] flex-col gap-3 rounded-md border border-border bg-background p-3 shadow-lg",
+              children: /* @__PURE__ */ jsx2(SecondaryControls, { nav, auth, themeToggle })
+            }
+          )
+        ] }))
+      ]
+    }
+  );
+}
+
+// src/app-sidebar.tsx
+import { useEffect as useEffect4, useId as useId3, useMemo, useRef as useRef4, useState as useState5 } from "react";
+import { Menu as Menu2, X as X2 } from "lucide-react";
+
+// src/lib/resolve-icon.ts
+import * as LucideIcons from "lucide-react";
+var FALLBACK_ICON_NAME = "Layers";
+var REACT_FORWARD_REF = /* @__PURE__ */ Symbol.for("react.forward_ref");
+var NON_ICON_EXPORTS = /* @__PURE__ */ new Set(["Icon"]);
+function isIconComponent(icons, name) {
+  if (NON_ICON_EXPORTS.has(name)) return false;
+  if (!Object.prototype.hasOwnProperty.call(icons, name)) return false;
+  const value = icons[name];
+  return typeof value === "object" && value !== null && value.$$typeof === REACT_FORWARD_REF;
+}
+function resolveIcon(name) {
+  const icons = LucideIcons;
+  const candidate = isIconComponent(icons, name) ? icons[name] : void 0;
+  return candidate ?? icons[FALLBACK_ICON_NAME];
+}
+
+// src/lib/use-dismissable-disclosure.ts
+import { useEffect as useEffect2 } from "react";
+function useDismissableDisclosure({
+  open,
+  onClose,
+  panelRef,
+  triggerRef,
+  initialFocusRef
+}) {
+  useEffect2(() => {
+    if (open) initialFocusRef?.current?.focus();
+  }, [open]);
+  useEffect2(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        onClose();
+        triggerRef.current?.focus();
+      }
+    };
+    const onPointerDown = (e) => {
+      const target = e.target;
+      if (!panelRef.current?.contains(target) && !triggerRef.current?.contains(target)) {
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.removeEventListener("pointerdown", onPointerDown);
+    };
+  }, [open, onClose, panelRef, triggerRef]);
+}
+
+// src/ladder/types.ts
+import { z } from "zod";
+var zAppRungItem = z.object({
+  type: z.literal("app"),
+  moduleId: z.string().min(1)
+});
+var zGroupRungItem = z.object({
+  type: z.literal("group"),
+  id: z.string().min(1),
+  label: z.string().min(1),
+  icon: z.string().min(1),
+  children: z.array(z.string().min(1)).min(1)
+});
+var zRungItem = z.discriminatedUnion("type", [zAppRungItem, zGroupRungItem]);
+var zSidebarRungShape = z.object({
+  rows: z.number().int().positive(),
+  items: z.array(zRungItem).min(1)
+});
+function moduleIdsOf(rung) {
+  const ids = [];
+  for (const item of rung.items) {
+    if (item.type === "app") {
+      ids.push(item.moduleId);
+    } else {
+      ids.push(...item.children);
+    }
+  }
+  return ids;
+}
+var zSidebarLadder = z.object({
+  version: z.number().int().nonnegative(),
+  rungs: z.array(zSidebarRungShape).min(1)
+}).superRefine((ladder, ctx) => {
+  const { rungs } = ladder;
+  if (rungs.length === 0) return;
+  const rung0HasGroup = rungs[0].items.some((item) => item.type === "group");
+  if (rung0HasGroup) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: "rung 0 must be fully expanded \u2014 no folded groups allowed",
+      path: ["rungs", 0, "items"]
+    });
+  }
+  let baselineModuleSet = null;
+  rungs.forEach((rung, i) => {
+    if (rung.rows !== rung.items.length) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: `rung ${i}: rows (${rung.rows}) must equal its item count (${rung.items.length})`,
+        path: ["rungs", i, "rows"]
+      });
+    }
+    if (i > 0 && rung.rows >= rungs[i - 1].rows) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: `rung ${i}: rows (${rung.rows}) must be strictly less than rung ${i - 1}'s (${rungs[i - 1].rows})`,
+        path: ["rungs", i, "rows"]
+      });
+    }
+    const ids = moduleIdsOf(rung);
+    const seen = /* @__PURE__ */ new Set();
+    for (const id of ids) {
+      if (seen.has(id)) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: `rung ${i}: module "${id}" appears more than once (as two rows, or as a row AND inside a group)`,
+          path: ["rungs", i]
+        });
+      }
+      seen.add(id);
+    }
+    const groupIds = /* @__PURE__ */ new Set();
+    for (const item of rung.items) {
+      if (item.type !== "group") continue;
+      if (groupIds.has(item.id)) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: `rung ${i}: group id "${item.id}" appears more than once`,
+          path: ["rungs", i]
+        });
+      }
+      groupIds.add(item.id);
+    }
+    if (baselineModuleSet === null) {
+      baselineModuleSet = seen;
+    } else {
+      const missing = [...baselineModuleSet].filter((id) => !seen.has(id));
+      const extra = [...seen].filter((id) => !baselineModuleSet.has(id));
+      if (missing.length > 0 || extra.length > 0) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: `rung ${i}: module set differs from rung 0 (missing: ${missing.join(", ") || "none"}; extra: ${extra.join(", ") || "none"})`,
+          path: ["rungs", i]
+        });
+      }
+    }
+  });
+});
+
+// src/ladder/fallback.ts
+var FALLBACK_GROUP_ICON = "Layers";
+function deriveFallbackLadder(registry, groupOrder) {
+  const rung0Items = registry.map((m) => ({
+    type: "app",
+    moduleId: m.moduleId
+  }));
+  const rungs = [{ rows: rung0Items.length, items: rung0Items }];
+  const effectiveGroupOrder = [.../* @__PURE__ */ new Set([...groupOrder, ...registry.map((m) => m.group)])];
+  const foldOrder = [...effectiveGroupOrder].reverse();
+  const folded = /* @__PURE__ */ new Set();
+  let previousRows = rungs[0].rows;
+  for (const group of foldOrder) {
+    const membersOfGroup = registry.filter((m) => m.group === group).map((m) => m.moduleId);
+    if (membersOfGroup.length === 0) continue;
+    folded.add(group);
+    const items = [];
+    for (const g of effectiveGroupOrder) {
+      const membersOfG = registry.filter((m) => m.group === g).map((m) => m.moduleId);
+      if (membersOfG.length === 0) continue;
+      if (folded.has(g)) {
+        items.push({ type: "group", id: g, label: g, icon: FALLBACK_GROUP_ICON, children: membersOfG });
+      } else {
+        for (const moduleId of membersOfG) {
+          items.push({ type: "app", moduleId });
+        }
+      }
+    }
+    if (items.length < previousRows) {
+      rungs.push({ rows: items.length, items });
+      previousRows = items.length;
+    }
+  }
+  return { version: 1, rungs };
+}
+function reconcileLadder(ladder, registry) {
+  const validIds = new Set(registry.map((m) => m.moduleId));
+  function dropUnknown(items) {
+    const out = [];
+    for (const item of items) {
+      if (item.type === "app") {
+        if (validIds.has(item.moduleId)) out.push(item);
+      } else {
+        const children = item.children.filter((id) => validIds.has(id));
+        if (children.length > 0) out.push({ ...item, children });
+      }
+    }
+    return out;
+  }
+  const cleanedRungs = ladder.rungs.map((rung) => {
+    const items = dropUnknown(rung.items);
+    return { rows: items.length, items };
+  });
+  const rung0Ids = new Set(
+    (cleanedRungs[0]?.items ?? []).flatMap((i) => i.type === "app" ? [i.moduleId] : i.children)
+  );
+  const missing = registry.filter((m) => !rung0Ids.has(m.moduleId));
+  if (missing.length === 0) {
+    return { ...ladder, rungs: cleanedRungs };
+  }
+  const appended = missing.map((m) => ({ type: "app", moduleId: m.moduleId }));
+  const withAppended = cleanedRungs.map((rung) => ({
+    rows: rung.items.length + appended.length,
+    items: [...rung.items, ...appended]
+  }));
+  return { ...ladder, rungs: withAppended };
+}
+function resolveLadder(raw, registry, groupOrder) {
+  if (raw != null) {
+    const parsed = zSidebarLadder.safeParse(raw);
+    if (parsed.success) {
+      const reconciled = reconcileLadder(parsed.data, registry);
+      if (zSidebarLadder.safeParse(reconciled).success) {
+        return reconciled;
+      }
+    }
+  }
+  return deriveFallbackLadder(registry, groupOrder);
+}
+
+// src/ladder/use-ladder-rung.ts
+import { useLayoutEffect, useRef as useRef2, useState as useState3 } from "react";
+var DEFAULT_ROW_HEIGHT = 36;
+var DEFAULT_HYSTERESIS_ROWS = 1;
+function useLadderRung(ladder, containerRef, options = {}) {
+  const rowHeight = options.rowHeight ?? DEFAULT_ROW_HEIGHT;
+  const hysteresisRows = options.hysteresisRows ?? DEFAULT_HYSTERESIS_ROWS;
+  const [rungIndex, setRungIndex] = useState3(0);
+  const rungIndexRef = useRef2(0);
+  const ladderSignature = `${ladder.version}:${ladder.rungs.map((r) => r.rows).join(",")}`;
+  useLayoutEffect(() => {
+    rungIndexRef.current = 0;
+    setRungIndex(0);
+    const node = containerRef.current;
+    if (!node || typeof ResizeObserver === "undefined") return;
+    const select = (height) => {
+      const rowsAvailable = Math.floor(height / rowHeight);
+      const currentRows = ladder.rungs[rungIndexRef.current].rows;
+      let bestIndex = ladder.rungs.length - 1;
+      for (let i = 0; i < ladder.rungs.length; i++) {
+        if (ladder.rungs[i].rows <= rowsAvailable) {
+          bestIndex = i;
+          break;
+        }
+      }
+      const bestRows = ladder.rungs[bestIndex].rows;
+      const isSteppingUp = bestRows > currentRows;
+      if (isSteppingUp && rowsAvailable < bestRows + hysteresisRows) {
+        return;
+      }
+      if (bestIndex !== rungIndexRef.current) {
+        rungIndexRef.current = bestIndex;
+        setRungIndex(bestIndex);
+      }
+    };
+    const ro = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry) select(entry.contentRect.height);
+    });
+    ro.observe(node);
+    return () => ro.disconnect();
+  }, [ladderSignature, containerRef, rowHeight, hysteresisRows]);
+  return ladder.rungs[Math.min(rungIndex, ladder.rungs.length - 1)];
+}
+
+// src/ladder/flyout.tsx
+import { useCallback as useCallback2, useEffect as useEffect3, useId as useId2, useLayoutEffect as useLayoutEffect2, useRef as useRef3, useState as useState4 } from "react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var PANEL_GAP = 4;
+function Flyout({ label, icon, active, children, className }) {
+  const [hoverOpen, setHoverOpen] = useState4(false);
+  const [clickOpen, setClickOpen] = useState4(false);
+  const [panelPosition, setPanelPosition] = useState4(null);
+  const open = hoverOpen || clickOpen;
+  const panelId = useId2();
+  const triggerRef = useRef3(null);
+  const panelRef = useRef3(null);
+  const firstItemRef = useRef3(null);
+  const prefersReducedMotion = useMediaQuery("(prefers-reduced-motion: reduce)");
+  const Icon = resolveIcon(icon);
+  const reposition = useCallback2(() => {
+    const rect = triggerRef.current?.getBoundingClientRect();
+    if (rect) setPanelPosition({ top: rect.top, left: rect.right + PANEL_GAP });
+  }, []);
+  useLayoutEffect2(() => {
+    if (open) reposition();
+  }, [open, reposition]);
+  useEffect3(() => {
+    if (!open) return;
+    window.addEventListener("resize", reposition);
+    window.addEventListener("scroll", reposition, true);
+    return () => {
+      window.removeEventListener("resize", reposition);
+      window.removeEventListener("scroll", reposition, true);
+    };
+  }, [open, reposition]);
+  useDismissableDisclosure({
+    open,
+    onClose: () => {
+      setHoverOpen(false);
+      setClickOpen(false);
+    },
+    panelRef,
+    triggerRef
+  });
+  useEffect3(() => {
+    if (clickOpen && panelPosition) firstItemRef.current?.focus();
+  }, [clickOpen, panelPosition]);
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      "data-testid": "ladder-flyout",
+      className: cn("relative", className),
+      onMouseEnter: () => setHoverOpen(true),
+      onMouseLeave: () => setHoverOpen(false),
+      children: [
+        /* @__PURE__ */ jsxs2(
+          "button",
+          {
+            ref: triggerRef,
+            type: "button",
+            "data-testid": "ladder-flyout-trigger",
+            "aria-expanded": open,
+            "aria-controls": panelId,
+            onClick: () => setClickOpen((v) => !v),
+            className: cn(
+              "group flex w-full items-center gap-2.5 rounded-md px-3 py-1.5 text-sm transition-colors",
+              active ? "bg-primary/10 text-foreground" : "text-muted-foreground hover:bg-foreground/5 hover:text-foreground"
+            ),
+            children: [
+              /* @__PURE__ */ jsx3(
+                Icon,
+                {
+                  className: cn("size-4 shrink-0", active ? "text-primary" : "text-muted-foreground"),
+                  strokeWidth: 1.5,
+                  "aria-hidden": "true"
+                }
+              ),
+              /* @__PURE__ */ jsx3("span", { className: "truncate", children: label })
+            ]
+          }
+        ),
+        open && panelPosition && /* @__PURE__ */ jsx3(
+          "div",
+          {
+            ref: panelRef,
+            id: panelId,
+            "data-testid": "ladder-flyout-panel",
+            style: { position: "fixed", top: panelPosition.top, left: panelPosition.left },
+            className: cn(
+              "z-50 flex min-w-[12rem] flex-col gap-0.5 rounded-md border border-border bg-background p-2 shadow-lg",
+              !prefersReducedMotion && "transition-all duration-150 ease-out"
+            ),
+            children: children.map((child, i) => /* @__PURE__ */ jsx3(
+              "a",
+              {
+                ref: i === 0 ? firstItemRef : void 0,
+                href: child.href,
+                "aria-current": child.active ? "page" : void 0,
+                className: cn(
+                  "truncate rounded-md px-3 py-1.5 text-sm transition-colors",
+                  child.active ? "bg-primary/10 text-foreground" : "text-muted-foreground hover:bg-foreground/5 hover:text-foreground"
+                ),
+                children: child.label
+              },
+              child.moduleId
+            ))
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/app-sidebar.tsx
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function isHrefActive(activePath, href) {
+  return activePath === href || activePath.startsWith(`${href}/`);
+}
+function NavLink({
+  href,
+  active,
+  icon,
+  label,
+  testId
+}) {
+  const Icon = resolveIcon(icon);
+  return /* @__PURE__ */ jsxs3(
+    "a",
+    {
+      href,
+      "data-testid": testId,
+      "aria-current": active ? "page" : void 0,
+      className: cn(
+        "group flex items-center gap-2.5 rounded-md px-3 py-1.5 text-sm transition-colors",
+        active ? "bg-primary/10 text-foreground" : "text-muted-foreground hover:bg-foreground/5 hover:text-foreground"
+      ),
+      children: [
+        /* @__PURE__ */ jsx4(
+          Icon,
+          {
+            className: cn("size-4 shrink-0", active ? "text-primary" : "text-muted-foreground"),
+            strokeWidth: 1.5,
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsx4("span", { className: "truncate", children: label })
+      ]
+    }
+  );
+}
+function AppSidebar({
+  ladder,
+  modules,
+  groupOrder,
+  activePath,
+  brand,
+  topItem,
+  menuLabel = "Menu",
+  ladderOptions,
+  className
+}) {
+  const isDesktop = useMediaQuery(`(min-width: ${BREAKPOINTS.md}px)`);
+  const [mobileOpen, setMobileOpen] = useState5(false);
+  const containerRef = useRef4(null);
+  const drawerId = useId3();
+  const mobileTriggerRef = useRef4(null);
+  const mobileDrawerRef = useRef4(null);
+  const mobileCloseRef = useRef4(null);
+  const moduleMap = useMemo(() => new Map(modules.map((m) => [m.moduleId, m])), [modules]);
+  const registryForLadder = useMemo(
+    () => modules.map((m) => ({ moduleId: m.moduleId, group: m.group })),
+    [modules]
+  );
+  const resolvedLadder = useMemo(
+    () => resolveLadder(ladder, registryForLadder, groupOrder),
+    [ladder, registryForLadder, groupOrder]
+  );
+  const rung = useLadderRung(resolvedLadder, containerRef, ladderOptions);
+  const rung0 = resolvedLadder.rungs[0];
+  useEffect4(() => {
+    if (isDesktop) setMobileOpen(false);
+  }, [isDesktop]);
+  useDismissableDisclosure({
+    open: mobileOpen,
+    onClose: () => setMobileOpen(false),
+    panelRef: mobileDrawerRef,
+    triggerRef: mobileTriggerRef,
+    initialFocusRef: mobileCloseRef
+  });
+  function renderAppItem(item, testIdPrefix) {
+    const def = moduleMap.get(item.moduleId);
+    if (!def) return null;
+    return /* @__PURE__ */ jsx4(
+      NavLink,
+      {
+        href: def.href,
+        active: isHrefActive(activePath, def.href),
+        icon: def.icon,
+        label: def.label,
+        testId: `${testIdPrefix}-${item.moduleId}`
+      },
+      item.moduleId
+    );
+  }
+  function renderGroupItem(item) {
+    const children = item.children.map((moduleId) => {
+      const def = moduleMap.get(moduleId);
+      const href = def?.href ?? "#";
+      return {
+        moduleId,
+        label: def?.label ?? moduleId,
+        href,
+        active: isHrefActive(activePath, href)
+      };
+    });
+    const active = children.some((c) => c.active);
+    return /* @__PURE__ */ jsx4(Flyout, { label: item.label, icon: item.icon, active, children }, item.id);
+  }
+  const brandBlock = brand && /* @__PURE__ */ jsxs3(
+    "a",
+    {
+      href: brand.href,
+      "data-testid": "app-sidebar-brand",
+      className: "flex items-center gap-2.5 border-b border-border px-5 py-4",
+      children: [
+        /* @__PURE__ */ jsx4("span", { className: "grid size-7 place-items-center rounded-md bg-primary text-primary-foreground", children: /* @__PURE__ */ jsx4("span", { className: "font-mono text-sm font-bold", children: (brand.label[0] ?? "r").toUpperCase() }) }),
+        /* @__PURE__ */ jsx4("span", { className: "truncate text-sm font-semibold tracking-tight", children: brand.label })
+      ]
+    }
+  );
+  function topItemBlock(testId) {
+    if (!topItem) return null;
+    return /* @__PURE__ */ jsx4("div", { className: "px-3 pt-4", children: /* @__PURE__ */ jsx4(
+      NavLink,
+      {
+        href: topItem.href,
+        active: isHrefActive(activePath, topItem.href),
+        icon: topItem.icon,
+        label: topItem.label,
+        testId
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    !isDesktop && /* @__PURE__ */ jsx4(
+      "button",
+      {
+        ref: mobileTriggerRef,
+        type: "button",
+        "data-testid": "app-sidebar-mobile-trigger",
+        "aria-label": menuLabel,
+        "aria-expanded": mobileOpen,
+        "aria-controls": drawerId,
+        onClick: () => setMobileOpen((v) => !v),
+        className: "flex items-center justify-center rounded-md border border-border p-2 text-foreground",
+        children: mobileOpen ? /* @__PURE__ */ jsx4(X2, { className: "h-5 w-5", "aria-hidden": "true" }) : /* @__PURE__ */ jsx4(Menu2, { className: "h-5 w-5", "aria-hidden": "true" })
+      }
+    ),
+    !isDesktop && mobileOpen && /* @__PURE__ */ jsxs3("div", { className: "fixed inset-0 z-50", children: [
+      /* @__PURE__ */ jsx4(
+        "div",
+        {
+          "data-testid": "app-sidebar-mobile-scrim",
+          className: "absolute inset-0 bg-black/50",
+          "aria-hidden": "true",
+          onClick: () => setMobileOpen(false)
+        }
+      ),
+      /* @__PURE__ */ jsxs3(
+        "div",
+        {
+          ref: mobileDrawerRef,
+          id: drawerId,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": "Navigation",
+          "data-testid": "app-sidebar-mobile-drawer",
+          className: "absolute inset-y-0 left-0 flex w-72 flex-col overflow-y-auto border-r border-border bg-sidebar",
+          children: [
+            /* @__PURE__ */ jsx4("div", { className: "sticky top-0 z-10 flex justify-end bg-sidebar p-2", children: /* @__PURE__ */ jsx4(
+              "button",
+              {
+                ref: mobileCloseRef,
+                type: "button",
+                "data-testid": "app-sidebar-mobile-close",
+                "aria-label": `Close ${menuLabel.toLowerCase()}`,
+                onClick: () => setMobileOpen(false),
+                className: "flex items-center justify-center rounded-md p-2 text-foreground hover:bg-foreground/5",
+                children: /* @__PURE__ */ jsx4(X2, { className: "h-5 w-5", "aria-hidden": "true" })
+              }
+            ) }),
+            brandBlock,
+            topItemBlock("app-sidebar-mobile-top-item"),
+            /* @__PURE__ */ jsx4("nav", { className: "flex-1 px-3 py-4", children: /* @__PURE__ */ jsx4("div", { className: "flex flex-col gap-0.5", children: rung0.items.map(
+              (item) => item.type === "app" ? renderAppItem(item, "app-sidebar-mobile-navlink") : null
+            ) }) })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs3(
+      "aside",
+      {
+        "data-testid": "app-sidebar-desktop",
+        className: cn("hidden w-64 shrink-0 flex-col border-r border-border bg-sidebar md:flex", className),
+        children: [
+          brandBlock,
+          topItemBlock("app-sidebar-top-item"),
+          /* @__PURE__ */ jsx4(
+            "nav",
+            {
+              ref: containerRef,
+              "data-testid": "app-sidebar-nav",
+              className: "flex-1 overflow-y-auto px-3 py-4",
+              children: /* @__PURE__ */ jsx4("div", { className: "flex flex-col gap-0.5", children: rung.items.map((item) => item.type === "app" ? renderAppItem(item, "app-sidebar-navlink") : renderGroupItem(item)) })
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+export {
+  AppSidebar,
+  BrandGlyph,
+  Flyout,
+  ResponsiveHeader,
+  deriveFallbackLadder,
+  faviconUrl,
+  reconcileLadder,
+  resolveLadder,
+  useLadderRung,
+  zSidebarLadder
+};