@inneranimalmedia/agentsam-sdk 2.6.2 → 2.6.3

package/packages/agentsam-nav/dist/browser.js

@@ -0,0 +1,613 @@
+// src/browser.tsx
+import { createRoot } from "react-dom/client";
+import { createPortal } from "react-dom";
+
+// src/Nav.tsx
+import { useCallback as useCallback2 } from "react";
+
+// src/NavCollapsible.tsx
+import { cloneElement, createContext as createContext2, useContext as useContext2, useId, useState as useState2 } from "react";
+
+// src/utils.ts
+function cx(...values) {
+  return values.filter(Boolean).join(" ");
+}
+
+// src/NavProvider.tsx
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var NavContext = createContext(null);
+function NavProvider({
+  children,
+  value: data = {},
+  tokens = {},
+  theme = "dark",
+  accentColor = "#8B5CF6",
+  defaultOpen = true,
+  mobileBreakpoint = 768,
+  peekable = false,
+  resizable = false
+}) {
+  const [menu, setMenu] = useState(null);
+  const [desktopOpen, setDesktopOpen] = useState(defaultOpen);
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
+  const [isPeeking, setPeeking] = useState(false);
+  const [width, setWidthState] = useState(268);
+  useEffect(() => {
+    const query = window.matchMedia(`(max-width: ${mobileBreakpoint - 1}px)`);
+    const update = () => {
+      setIsMobile(query.matches);
+      if (query.matches) setMobileOpen(false);
+      else setPeeking(false);
+    };
+    update();
+    query.addEventListener("change", update);
+    return () => query.removeEventListener("change", update);
+  }, [mobileBreakpoint]);
+  const open = isMobile ? mobileOpen : desktopOpen;
+  const setOpen = useCallback((next) => {
+    if (isMobile) setMobileOpen(next);
+    else setDesktopOpen(next);
+  }, [isMobile]);
+  const close = useCallback(() => setOpen(false), [setOpen]);
+  const toggle = useCallback(() => setOpen(!open), [open, setOpen]);
+  const setWidth = useCallback((next) => {
+    setWidthState(Math.max(208, Math.min(400, Math.round(next))));
+  }, []);
+  useEffect(() => {
+    if (!isMobile || !open) return void 0;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") close();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [close, isMobile, open]);
+  const scrollToItem = useCallback((itemId) => {
+    document.querySelector(`[data-nav-item-id="${CSS.escape(itemId)}"]`)?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+  }, []);
+  const value = useMemo(() => ({
+    data,
+    tokens,
+    theme,
+    accentColor,
+    menu,
+    setMenu,
+    open,
+    isMobile,
+    isPeeking,
+    peekable,
+    resizable,
+    width,
+    mobileBreakpoint,
+    setOpen,
+    toggle,
+    close,
+    setPeeking,
+    setWidth,
+    scrollToItem
+  }), [data, tokens, theme, accentColor, menu, close, isMobile, isPeeking, mobileBreakpoint, open, peekable, resizable, scrollToItem, setOpen, setWidth, toggle, width]);
+  return /* @__PURE__ */ jsx(NavContext.Provider, { value, children });
+}
+function useNav() {
+  const context = useContext(NavContext);
+  if (!context) throw new Error("useNav must be used inside Nav.Provider");
+  return context;
+}
+
+// src/NavCollapsible.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var CollapsibleContext = createContext2(null);
+function useCollapsible() {
+  const context = useContext2(CollapsibleContext);
+  if (!context) throw new Error("Nav.Collapsible components must be nested inside Nav.Collapsible");
+  return context;
+}
+function NavCollapsible({ children, defaultOpen = false }) {
+  const [open, setOpen] = useState2(defaultOpen);
+  const contentId = useId();
+  return /* @__PURE__ */ jsx2(CollapsibleContext.Provider, { value: { open, setOpen, contentId }, children });
+}
+function NavCollapsibleTrigger({ render, children, className, ...props }) {
+  const { open, setOpen, contentId } = useCollapsible();
+  const renderedProps = render?.props;
+  const triggerProps = {
+    "aria-expanded": open,
+    "aria-controls": contentId,
+    onClick: (event) => {
+      renderedProps?.onClick?.(event);
+      if (!event.defaultPrevented) setOpen(!open);
+    }
+  };
+  if (render) return /* @__PURE__ */ jsx2(Fragment, { children: cloneElement(render, triggerProps) });
+  return /* @__PURE__ */ jsx2("button", { type: "button", className: cx("agentsam-nav__menu-button", className), ...props, ...triggerProps, children });
+}
+function NavCollapsibleContent({ className, ...props }) {
+  const { open, setOpen, contentId } = useCollapsible();
+  const { isMobile } = useNav();
+  if (isMobile && open) {
+    return /* @__PURE__ */ jsxs("div", { id: contentId, className: cx("agentsam-nav__collapsible-content", "agentsam-nav__mobile-subview", className), ...props, children: [
+      /* @__PURE__ */ jsxs("button", { type: "button", className: "agentsam-nav__mobile-back", onClick: () => setOpen(false), children: [
+        /* @__PURE__ */ jsx2("span", { "aria-hidden": "true", children: "\u2039" }),
+        " Back"
+      ] }),
+      props.children
+    ] });
+  }
+  return /* @__PURE__ */ jsx2("div", { id: contentId, hidden: !open, className: cx("agentsam-nav__collapsible-content", className), ...props });
+}
+
+// src/NavContent.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function NavContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx3("div", { className: cx("agentsam-nav__content", className), ...props });
+}
+
+// src/NavFooter.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function NavFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx4("div", { className: cx("agentsam-nav__footer", className), ...props });
+}
+
+// src/NavGroup.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function NavGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx5("section", { className: cx("agentsam-nav__group", className), ...props });
+}
+function NavGroupLabel({ className, ...props }) {
+  return /* @__PURE__ */ jsx5("p", { className: cx("agentsam-nav__group-label", className), ...props });
+}
+
+// src/NavHeader.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function NavHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx6("div", { className: cx("agentsam-nav__header", className), ...props });
+}
+
+// src/NavMenu.tsx
+import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
+function NavMenu({ className, ...props }) {
+  return /* @__PURE__ */ jsx7("ul", { className: cx("agentsam-nav__menu", className), ...props });
+}
+function NavMenuItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx7("li", { className: cx("agentsam-nav__menu-item", className), ...props });
+}
+function NavMenuButton({ icon: Icon, active = false, itemId, className, children, ...props }) {
+  const IconComponent = Icon;
+  return /* @__PURE__ */ jsxs2(
+    "button",
+    {
+      type: "button",
+      "data-nav-item-id": itemId,
+      "data-active": active ? "true" : void 0,
+      "aria-current": active ? "page" : void 0,
+      className: cx("agentsam-nav__menu-button", className),
+      ...props,
+      children: [
+        IconComponent ? /* @__PURE__ */ jsx7(IconComponent, { className: "agentsam-nav__menu-icon", "aria-hidden": true }) : null,
+        /* @__PURE__ */ jsx7("span", { className: "agentsam-nav__menu-label", children })
+      ]
+    }
+  );
+}
+function NavMenuSub({ className, ...props }) {
+  return /* @__PURE__ */ jsx7("ul", { className: cx("agentsam-nav__menu-sub", className), ...props });
+}
+function NavMenuSubButton({ active = false, className, children, ...props }) {
+  return /* @__PURE__ */ jsx7("a", { "data-active": active ? "true" : void 0, "aria-current": active ? "page" : void 0, className: cx("agentsam-nav__menu-sub-button", className), ...props, children });
+}
+function NavMenuChevron({ className }) {
+  return /* @__PURE__ */ jsx7("svg", { className: cx("agentsam-nav__chevron", className), "aria-hidden": "true", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx7("path", { d: "m6 3 5 5-5 5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+
+// src/NavTrigger.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+function NavTrigger({ className, "aria-label": ariaLabel = "Toggle navigation", ...props }) {
+  const { open, toggle } = useNav();
+  return /* @__PURE__ */ jsx8("button", { type: "button", "aria-label": ariaLabel, "aria-expanded": open, className: cx("agentsam-nav__trigger", className), onClick: toggle, ...props, children: /* @__PURE__ */ jsx8("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx8("path", { d: "M4 7h16M4 12h16M4 17h16", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" }) }) });
+}
+
+// src/Surfaces.tsx
+import { Fragment as Fragment2, useId as useId2, useState as useState3 } from "react";
+import * as Menu from "@radix-ui/react-dropdown-menu";
+import * as Dialog from "@radix-ui/react-dialog";
+import { ChevronDown, Files, Folder, MessageSquare, MoreHorizontal, PanelLeft, PanelTop, Pin, Pencil, Plus, Search, Share, Trash2, User } from "lucide-react";
+import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
+function useNavStyle() {
+  const { accentColor, tokens } = useNav();
+  return { ...Object.fromEntries(Object.entries(tokens).map(([key, value]) => [`--nav-${key}`, value])), "--nav-accent": accentColor };
+}
+function NavScope({ className, style, ...props }) {
+  const { theme } = useNav();
+  return /* @__PURE__ */ jsx9("div", { ...props, "data-nav-theme": theme, className: cx("as-nav-scope", className), style: { ...useNavStyle(), ...style } });
+}
+function MenuActions({ actions }) {
+  const { theme } = useNav();
+  const style = useNavStyle();
+  return /* @__PURE__ */ jsx9(Fragment3, { children: actions.map((action) => /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    action.separatorBefore ? /* @__PURE__ */ jsx9(Menu.Separator, { className: "as-nav-menu-separator" }) : null,
+    action.children?.length ? /* @__PURE__ */ jsxs3(Menu.Sub, { children: [
+      /* @__PURE__ */ jsxs3(Menu.SubTrigger, { className: "as-nav-menu-row", disabled: action.disabled, children: [
+        action.icon,
+        /* @__PURE__ */ jsx9("span", { children: action.label }),
+        /* @__PURE__ */ jsx9(ChevronDown, {})
+      ] }),
+      /* @__PURE__ */ jsx9(Menu.Portal, { children: /* @__PURE__ */ jsx9(Menu.SubContent, { "data-nav-theme": theme, style, className: "as-nav-scope as-nav-popover", sideOffset: 6, collisionPadding: 12, children: /* @__PURE__ */ jsx9(MenuActions, { actions: action.children }) }) })
+    ] }) : /* @__PURE__ */ jsxs3(Menu.Item, { className: "as-nav-menu-row", disabled: action.disabled || !action.onSelect, "data-destructive": action.destructive || void 0, onSelect: action.onSelect, children: [
+      action.icon ? /* @__PURE__ */ jsx9("span", { className: "as-nav-icon", children: action.icon }) : null,
+      /* @__PURE__ */ jsx9("span", { children: action.label })
+    ] })
+  ] }, action.id)) });
+}
+function NavOverflowMenu({ label = "More options", actions = [], children, id: suppliedId, align = "end" }) {
+  const { menu, setMenu, theme } = useNav();
+  const generatedId = useId2();
+  const id = suppliedId ?? generatedId;
+  const style = useNavStyle();
+  return /* @__PURE__ */ jsxs3(Menu.Root, { open: menu === id, onOpenChange: (open) => setMenu(open ? id : null), children: [
+    /* @__PURE__ */ jsx9(Menu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx9("button", { type: "button", className: "as-nav-button", "aria-label": label, title: label, children: children ?? /* @__PURE__ */ jsx9(MoreHorizontal, {}) }) }),
+    /* @__PURE__ */ jsx9(Menu.Portal, { children: /* @__PURE__ */ jsxs3(Menu.Content, { "data-nav-theme": theme, style, className: "as-nav-scope as-nav-popover", align, sideOffset: 8, collisionPadding: 12, children: [
+      /* @__PURE__ */ jsx9(Menu.Label, { className: "as-nav-menu-heading", children: label }),
+      actions.length ? /* @__PURE__ */ jsx9(MenuActions, { actions }) : /* @__PURE__ */ jsx9("div", { className: "as-nav-empty", children: "No actions available" })
+    ] }) })
+  ] });
+}
+function NavTopbarLogo({ variant = "mark", onClick, toggle = false }) {
+  const { data, toggle: toggleNav } = useNav();
+  const label = toggle ? "Toggle sidebar" : data.brand?.name ?? "Home";
+  return /* @__PURE__ */ jsxs3("button", { type: "button", className: cx("as-nav-button as-nav-brand", toggle && "as-nav-brand--toggle"), "aria-label": label, title: label, onClick: onClick ?? (toggle ? toggleNav : () => data.brand?.home && data.onNavigate?.(data.brand.home)), children: [
+    /* @__PURE__ */ jsx9("span", { className: "as-nav-brand-mark", children: data.brand?.logo ? /* @__PURE__ */ jsxs3(Fragment3, { children: [
+      /* @__PURE__ */ jsx9("img", { className: "as-nav-logo-dark", src: data.brand.logo, alt: "" }),
+      /* @__PURE__ */ jsx9("img", { className: "as-nav-logo-light", "data-fallback": !data.brand.lightLogo || void 0, src: data.brand.lightLogo ?? data.brand.logo, alt: "" })
+    ] }) : /* @__PURE__ */ jsx9(PanelLeft, {}) }),
+    variant === "expanded" ? /* @__PURE__ */ jsx9("span", { children: data.brand?.name }) : null
+  ] });
+}
+function NavProjectContext() {
+  const { data } = useNav();
+  return /* @__PURE__ */ jsxs3("div", { className: "as-nav-context", children: [
+    data.project ? /* @__PURE__ */ jsxs3(Fragment3, { children: [
+      /* @__PURE__ */ jsxs3(NavOverflowMenu, { label: data.project.name, actions: data.projectActions, children: [
+        /* @__PURE__ */ jsx9(Folder, {}),
+        /* @__PURE__ */ jsx9("span", { className: "as-nav-project-name", children: data.project.name }),
+        /* @__PURE__ */ jsx9(ChevronDown, {})
+      ] }),
+      /* @__PURE__ */ jsx9("span", { className: "as-nav-separator", children: "/" })
+    ] }) : null,
+    /* @__PURE__ */ jsx9("span", { className: "as-nav-title", title: data.conversation?.title, children: data.conversation?.title ?? data.brand?.name }),
+    data.mode ? /* @__PURE__ */ jsxs3("span", { className: "as-nav-mode-label", children: [
+      "\xB7 ",
+      data.mode === "work" ? "Work" : "Chat"
+    ] }) : null
+  ] });
+}
+function NavTopbarSpacer() {
+  return /* @__PURE__ */ jsx9("span", { className: "as-nav-spacer" });
+}
+function NavFilesResources() {
+  const { data } = useNav();
+  return /* @__PURE__ */ jsx9(NavOverflowMenu, { label: "Files & resources", actions: data.resourceActions, children: /* @__PURE__ */ jsx9(Files, {}) });
+}
+function NavPinnedSummary() {
+  const { data } = useNav();
+  if (!data.resourceActions?.length) return null;
+  return /* @__PURE__ */ jsx9(NavOverflowMenu, { label: "Toggle pinned summary", actions: data.resourceActions, children: /* @__PURE__ */ jsx9(PanelTop, {}) });
+}
+function NavConversationActions() {
+  const { data } = useNav();
+  return /* @__PURE__ */ jsx9(NavOverflowMenu, { label: "Conversation options", actions: data.conversationActions });
+}
+function NavShareButton() {
+  const { data } = useNav();
+  if (!data.onShare) return null;
+  return /* @__PURE__ */ jsxs3("button", { type: "button", className: "as-nav-button", onClick: data.onShare, "aria-label": "Share conversation", title: "Share", children: [
+    /* @__PURE__ */ jsx9(Share, {}),
+    /* @__PURE__ */ jsx9("span", { className: "as-nav-share-label", children: "Share" })
+  ] });
+}
+function NavAccountSwitcher({ accounts, activeAccountId, onAccountChange, expanded = false }) {
+  const { data } = useNav();
+  const options = accounts ?? data.accounts ?? (data.account ? [data.account] : []);
+  const account = options.find((item) => item.id === (activeAccountId ?? data.account?.id)) ?? data.account;
+  const change = onAccountChange ?? data.onAccountChange;
+  const actions = [
+    ...options.filter((item) => item.id !== account?.id).map((item) => ({ id: item.id, label: item.name, disabled: !change, onSelect: () => change?.(item.id) })),
+    ...data.accountActions ?? []
+  ];
+  return /* @__PURE__ */ jsx9("div", { className: cx("as-nav-account", expanded && "as-nav-account--expanded"), children: /* @__PURE__ */ jsxs3(NavOverflowMenu, { label: account?.name ?? "Account", actions, align: "start", children: [
+    /* @__PURE__ */ jsx9("span", { className: "as-nav-avatar", children: account?.avatar ? /* @__PURE__ */ jsx9("img", { src: account.avatar, alt: "" }) : /* @__PURE__ */ jsx9(User, {}) }),
+    expanded ? /* @__PURE__ */ jsxs3("span", { className: "as-nav-account-copy", children: [
+      /* @__PURE__ */ jsx9("strong", { children: account?.name ?? "Account" }),
+      account?.plan ? /* @__PURE__ */ jsx9("small", { children: account.plan }) : null
+    ] }) : null,
+    expanded ? /* @__PURE__ */ jsx9(ChevronDown, {}) : null
+  ] }) });
+}
+function NavModeSwitcher() {
+  const { data } = useNav();
+  return /* @__PURE__ */ jsx9("div", { className: "as-nav-mode-switch", role: "group", "aria-label": "Conversation mode", children: ["chat", "work"].map((mode) => /* @__PURE__ */ jsx9("button", { type: "button", "aria-pressed": data.mode === mode, onClick: () => data.onModeChange?.(mode), disabled: !data.onModeChange, children: mode === "chat" ? "Chat" : "Work" }, mode)) });
+}
+function NavTopbar({
+  children,
+  rightSlot,
+  modeSlot,
+  contextSlot,
+  startup = false,
+  className,
+  showNavigationTrigger = true,
+  showAccount = false
+}) {
+  return /* @__PURE__ */ jsx9(NavScope, { className: cx("as-nav-topbar", startup && "as-nav-topbar--startup", className), children: children ?? /* @__PURE__ */ jsxs3(Fragment3, { children: [
+    /* @__PURE__ */ jsxs3("div", { className: "as-nav-topbar-leading", children: [
+      showNavigationTrigger ? /* @__PURE__ */ jsx9(NavTopbarLogo, { toggle: true }) : null,
+      !startup ? contextSlot ?? /* @__PURE__ */ jsx9(NavProjectContext, {}) : null
+    ] }),
+    startup ? /* @__PURE__ */ jsx9("div", { className: "as-nav-topbar-center", children: modeSlot ?? /* @__PURE__ */ jsx9(NavModeSwitcher, {}) }) : modeSlot,
+    /* @__PURE__ */ jsx9(NavTopbarSpacer, {}),
+    /* @__PURE__ */ jsxs3("div", { className: "as-nav-topbar-actions", children: [
+      !startup ? /* @__PURE__ */ jsxs3(Fragment3, { children: [
+        /* @__PURE__ */ jsx9(NavShareButton, {}),
+        /* @__PURE__ */ jsx9(NavConversationActions, {}),
+        /* @__PURE__ */ jsx9(NavPinnedSummary, {})
+      ] }) : null,
+      rightSlot,
+      showAccount ? /* @__PURE__ */ jsx9(NavAccountSwitcher, {}) : null
+    ] })
+  ] }) });
+}
+function RenameDialog({ open, onOpenChange, title, value, onSave }) {
+  const { theme } = useNav();
+  const [draft, setDraft] = useState3(value);
+  const style = useNavStyle();
+  return /* @__PURE__ */ jsx9(Dialog.Root, { open, onOpenChange: (next) => {
+    if (next) setDraft(value);
+    onOpenChange(next);
+  }, children: /* @__PURE__ */ jsxs3(Dialog.Portal, { children: [
+    /* @__PURE__ */ jsx9(Dialog.Overlay, { className: "as-nav-dialog-overlay" }),
+    /* @__PURE__ */ jsxs3(Dialog.Content, { "data-nav-theme": theme, style, className: "as-nav-scope as-nav-dialog", children: [
+      /* @__PURE__ */ jsx9(Dialog.Title, { children: title }),
+      /* @__PURE__ */ jsx9(Dialog.Description, { children: "Choose a clear name." }),
+      /* @__PURE__ */ jsxs3("form", { onSubmit: (event) => {
+        event.preventDefault();
+        if (draft.trim()) {
+          onSave(draft.trim());
+          onOpenChange(false);
+        }
+      }, children: [
+        /* @__PURE__ */ jsx9("input", { autoFocus: true, "aria-label": title, value: draft, onChange: (event) => setDraft(event.target.value), maxLength: 200 }),
+        /* @__PURE__ */ jsxs3("div", { className: "as-nav-dialog-actions", children: [
+          /* @__PURE__ */ jsx9(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx9("button", { type: "button", className: "as-nav-button", children: "Cancel" }) }),
+          /* @__PURE__ */ jsx9("button", { type: "submit", className: "as-nav-button", disabled: !draft.trim(), children: "Save" })
+        ] })
+      ] })
+    ] })
+  ] }) });
+}
+function ConversationRow({ item }) {
+  const { data, close, isMobile } = useNav();
+  const [rename, setRename] = useState3(false);
+  const selected = item.id === data.conversation?.id;
+  const actions = data.getConversationActions?.(item) ?? [
+    ...data.onPinConversation ? [{ id: "pin", label: item.pinned ? "Unpin chat" : "Pin chat", icon: /* @__PURE__ */ jsx9(Pin, {}), onSelect: () => data.onPinConversation?.(item.id) }] : [],
+    ...data.onDeleteConversation ? [{ id: "delete", label: "Delete chat", icon: /* @__PURE__ */ jsx9(Trash2, {}), destructive: true, separatorBefore: true, onSelect: () => data.onDeleteConversation?.(item.id) }] : []
+  ];
+  return /* @__PURE__ */ jsxs3("div", { className: "as-nav-conversation", "data-active": selected || void 0, "data-nav-item-id": item.id, children: [
+    /* @__PURE__ */ jsxs3("button", { type: "button", className: "as-nav-conversation-link", title: item.title, "aria-current": selected ? "page" : void 0, onClick: () => {
+      data.onSelectConversation?.(item.id);
+      if (isMobile) close();
+    }, children: [
+      /* @__PURE__ */ jsx9(MessageSquare, {}),
+      /* @__PURE__ */ jsx9("span", { children: item.title })
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { className: "as-nav-row-actions", children: [
+      data.onRenameConversation ? /* @__PURE__ */ jsx9("button", { type: "button", className: "as-nav-button", "aria-label": `Rename ${item.title}`, title: "Rename", onClick: (event) => {
+        event.stopPropagation();
+        setRename(true);
+      }, children: /* @__PURE__ */ jsx9(Pencil, {}) }) : null,
+      actions.length ? /* @__PURE__ */ jsx9(NavOverflowMenu, { id: `conversation-${item.id}`, label: `${item.title} options`, actions }) : null
+    ] }),
+    data.onRenameConversation ? /* @__PURE__ */ jsx9(RenameDialog, { open: rename, onOpenChange: setRename, title: "Rename conversation", value: item.title, onSave: (title) => data.onRenameConversation?.(item.id, title) }) : null
+  ] });
+}
+function ProjectRow({ item, conversations }) {
+  const { data, close, isMobile } = useNav();
+  const [expanded, setExpanded] = useState3(item.id === data.project?.id);
+  const [rename, setRename] = useState3(false);
+  const actions = data.getProjectActions?.(item) ?? [
+    ...data.onPinProject ? [{ id: "pin", label: item.pinned ? "Unpin project" : "Pin project", icon: /* @__PURE__ */ jsx9(Pin, {}), onSelect: () => data.onPinProject?.(item.id) }] : [],
+    ...data.onDeleteProject ? [{ id: "delete", label: "Delete project", icon: /* @__PURE__ */ jsx9(Trash2, {}), destructive: true, separatorBefore: true, onSelect: () => data.onDeleteProject?.(item.id) }] : []
+  ];
+  return /* @__PURE__ */ jsxs3("div", { className: "as-nav-project", "data-active": item.id === data.project?.id || void 0, "data-nav-item-id": item.id, children: [
+    /* @__PURE__ */ jsxs3("div", { className: "as-nav-project-row", children: [
+      /* @__PURE__ */ jsxs3("button", { type: "button", className: "as-nav-project-toggle", title: item.name, "aria-expanded": expanded, onClick: () => setExpanded((value) => !value), children: [
+        /* @__PURE__ */ jsx9(Folder, {}),
+        /* @__PURE__ */ jsx9("span", { children: item.name }),
+        /* @__PURE__ */ jsx9(ChevronDown, {})
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { className: "as-nav-row-actions", children: [
+        data.onRenameProject ? /* @__PURE__ */ jsx9("button", { type: "button", className: "as-nav-button", "aria-label": `Rename ${item.name}`, title: "Rename", onClick: () => setRename(true), children: /* @__PURE__ */ jsx9(Pencil, {}) }) : null,
+        actions.length ? /* @__PURE__ */ jsx9(NavOverflowMenu, { id: `project-${item.id}`, label: `${item.name} options`, actions }) : null
+      ] })
+    ] }),
+    expanded ? /* @__PURE__ */ jsxs3("div", { className: "as-nav-project-conversations", children: [
+      conversations.filter((conversation) => conversation.projectId === item.id && !conversation.pinned).map((conversation) => /* @__PURE__ */ jsx9(ConversationRow, { item: conversation }, conversation.id)),
+      data.onSelectProject ? /* @__PURE__ */ jsx9("button", { className: "as-nav-project-home", type: "button", onClick: () => {
+        data.onSelectProject?.(item.id);
+        if (isMobile) close();
+      }, children: "Open project" }) : null
+    ] }) : null,
+    data.onRenameProject ? /* @__PURE__ */ jsx9(RenameDialog, { open: rename, onOpenChange: setRename, title: "Rename project", value: item.name, onSave: (name) => data.onRenameProject?.(item.id, name) }) : null
+  ] });
+}
+function SidenavContents() {
+  const { data, close, isMobile } = useNav();
+  const [query, setQuery] = useState3("");
+  const normalized = query.trim().toLowerCase();
+  const conversations = (data.conversations ?? []).filter((item) => !normalized || item.title.toLowerCase().includes(normalized));
+  const projects = (data.projects ?? []).filter((item) => !normalized || item.name.toLowerCase().includes(normalized) || conversations.some((conversation) => conversation.projectId === item.id));
+  const pinnedConversations = conversations.filter((item) => item.pinned);
+  const pinnedProjects = projects.filter((item) => item.pinned);
+  const recent = conversations.filter((item) => !item.pinned && (!item.projectId || !projects.some((project) => project.id === item.projectId)));
+  return /* @__PURE__ */ jsxs3(Fragment3, { children: [
+    /* @__PURE__ */ jsx9("div", { className: "as-nav-sidenav-head", children: /* @__PURE__ */ jsx9(NavTopbarLogo, { toggle: true }) }),
+    /* @__PURE__ */ jsxs3("div", { className: "as-nav-sidenav-main", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "as-nav-destinations", children: [
+        data.onCreateConversation ? /* @__PURE__ */ jsxs3("button", { type: "button", className: "as-nav-destination", title: "New chat", "aria-label": "New chat", onClick: () => {
+          data.onCreateConversation?.();
+          if (isMobile) close();
+        }, children: [
+          /* @__PURE__ */ jsx9(Plus, {}),
+          /* @__PURE__ */ jsx9("span", { children: "New chat" })
+        ] }) : null,
+        (data.destinations ?? []).map((item) => /* @__PURE__ */ jsxs3("button", { type: "button", className: "as-nav-destination", title: item.label, "aria-label": item.label, "data-active": item.active || void 0, onClick: () => {
+          if (item.onSelect) item.onSelect();
+          else if (item.href) data.onNavigate?.(item.href);
+          if (isMobile) close();
+        }, children: [
+          item.icon,
+          /* @__PURE__ */ jsx9("span", { children: item.label })
+        ] }, item.id))
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { className: "as-nav-expanded-only as-nav-history", children: [
+        /* @__PURE__ */ jsxs3("label", { className: "as-nav-search", children: [
+          /* @__PURE__ */ jsx9(Search, {}),
+          /* @__PURE__ */ jsx9("input", { "aria-label": "Search conversations", placeholder: "Search conversations", value: query, onChange: (event) => setQuery(event.target.value) })
+        ] }),
+        pinnedProjects.length || pinnedConversations.length ? /* @__PURE__ */ jsxs3("section", { children: [
+          /* @__PURE__ */ jsx9("h2", { children: "Pinned" }),
+          pinnedProjects.map((item) => /* @__PURE__ */ jsx9(ProjectRow, { item, conversations }, item.id)),
+          pinnedConversations.map((item) => /* @__PURE__ */ jsx9(ConversationRow, { item }, item.id))
+        ] }) : null,
+        projects.length ? /* @__PURE__ */ jsxs3("section", { children: [
+          /* @__PURE__ */ jsx9("h2", { children: "Projects" }),
+          projects.map((project) => /* @__PURE__ */ jsx9(ProjectRow, { item: project, conversations }, project.id))
+        ] }) : null,
+        recent.length ? /* @__PURE__ */ jsxs3("section", { children: [
+          /* @__PURE__ */ jsx9("h2", { children: "Recent conversations" }),
+          recent.map((item) => /* @__PURE__ */ jsx9(ConversationRow, { item }, item.id))
+        ] }) : null,
+        !conversations.length && !projects.length ? /* @__PURE__ */ jsx9("p", { className: "as-nav-empty", children: query ? "No matching conversations or projects" : "Your conversations will appear here." }) : null
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx9("div", { className: "as-nav-sidenav-foot", children: /* @__PURE__ */ jsx9(NavAccountSwitcher, { expanded: true }) })
+  ] });
+}
+function NavSidenav() {
+  const { open, isMobile, isPeeking, peekable, setPeeking, setOpen, menu, theme } = useNav();
+  const style = useNavStyle();
+  if (isMobile) return /* @__PURE__ */ jsx9(Dialog.Root, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs3(Dialog.Portal, { children: [
+    /* @__PURE__ */ jsx9(Dialog.Overlay, { className: "as-nav-dialog-overlay" }),
+    /* @__PURE__ */ jsxs3(Dialog.Content, { "data-nav-theme": theme, style, className: "as-nav-scope as-nav-mobile-drawer", children: [
+      /* @__PURE__ */ jsx9(Dialog.Title, { className: "as-nav-sr-only", children: "Navigation" }),
+      /* @__PURE__ */ jsx9(Dialog.Description, { className: "as-nav-sr-only", children: "Projects and conversations" }),
+      /* @__PURE__ */ jsx9(SidenavContents, {})
+    ] })
+  ] }) });
+  return /* @__PURE__ */ jsx9(NavScope, { className: "as-nav-sidenav-reserve", "data-open": open, children: /* @__PURE__ */ jsx9("aside", { "aria-label": "Application navigation", className: "as-nav-sidenav", "data-expanded": open || isPeeking, onMouseEnter: () => {
+    if (peekable && !open) setPeeking(true);
+  }, onMouseLeave: () => {
+    if (!menu) setPeeking(false);
+  }, children: /* @__PURE__ */ jsx9(SidenavContents, {}) }) });
+}
+
+// src/Nav.tsx
+import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
+function NavRoot({ className, children, ...props }) {
+  const { close, isMobile, isPeeking, open, peekable, resizable, setPeeking, setWidth, width } = useNav();
+  const startResize = useCallback2((event) => {
+    if (isMobile) return;
+    event.preventDefault();
+    const startX = event.clientX;
+    const startWidth = width;
+    const onPointerMove = (move) => setWidth(startWidth + move.clientX - startX);
+    const stop = () => {
+      window.removeEventListener("pointermove", onPointerMove);
+      window.removeEventListener("pointerup", stop);
+    };
+    window.addEventListener("pointermove", onPointerMove);
+    window.addEventListener("pointerup", stop, { once: true });
+  }, [isMobile, setWidth, width]);
+  return /* @__PURE__ */ jsxs4(Fragment4, { children: [
+    isMobile && open ? /* @__PURE__ */ jsx10("button", { type: "button", className: "agentsam-nav__backdrop", "aria-label": "Close navigation", onClick: close }) : null,
+    /* @__PURE__ */ jsxs4(
+      "aside",
+      {
+        "aria-label": "Application navigation",
+        "data-mobile": isMobile ? "true" : "false",
+        "data-open": open ? "true" : "false",
+        "data-peeking": isPeeking ? "true" : "false",
+        className: cx("agentsam-nav", className),
+        style: { "--agentsam-nav-width": `${width}px`, ...props.style },
+        onMouseEnter: () => {
+          if (peekable && !open && !isMobile) setPeeking(true);
+        },
+        onMouseLeave: () => setPeeking(false),
+        ...props,
+        children: [
+          children,
+          resizable && !isMobile && open ? /* @__PURE__ */ jsx10("div", { className: "agentsam-nav__resize-handle", role: "separator", "aria-label": "Resize navigation", "aria-orientation": "vertical", onPointerDown: startResize }) : null
+        ]
+      }
+    )
+  ] });
+}
+var Nav = Object.assign(NavRoot, {
+  Scope: NavScope,
+  Sidenav: NavSidenav,
+  Topbar: NavTopbar,
+  TopbarLogo: NavTopbarLogo,
+  TopbarSpacer: NavTopbarSpacer,
+  ProjectContext: NavProjectContext,
+  AccountSwitcher: NavAccountSwitcher,
+  FilesResources: NavFilesResources,
+  PinnedSummary: NavPinnedSummary,
+  ConversationActions: NavConversationActions,
+  ShareButton: NavShareButton,
+  OverflowMenu: NavOverflowMenu,
+  ModeSwitcher: NavModeSwitcher,
+  Provider: NavProvider,
+  Header: NavHeader,
+  Content: NavContent,
+  Footer: NavFooter,
+  Group: NavGroup,
+  GroupLabel: NavGroupLabel,
+  Menu: NavMenu,
+  MenuItem: NavMenuItem,
+  MenuButton: NavMenuButton,
+  MenuSub: NavMenuSub,
+  MenuSubButton: NavMenuSubButton,
+  MenuChevron: NavMenuChevron,
+  Collapsible: NavCollapsible,
+  CollapsibleTrigger: NavCollapsibleTrigger,
+  CollapsibleContent: NavCollapsibleContent,
+  Trigger: NavTrigger
+});
+
+// src/browser.tsx
+import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+function mountNav(options) {
+  if (!options.sidenav && !options.topbar) throw new Error("mountNav requires a sidenav or topbar element");
+  const anchor = document.createElement("div");
+  anchor.style.display = "contents";
+  (options.sidenav ?? options.topbar).parentElement.appendChild(anchor);
+  const root = createRoot(anchor);
+  let current = options;
+  const render = () => root.render(/* @__PURE__ */ jsxs5(Nav.Provider, { ...current, children: [
+    current.sidenav ? createPortal(/* @__PURE__ */ jsx11(Nav.Sidenav, {}), current.sidenav) : null,
+    current.topbar ? createPortal(/* @__PURE__ */ jsx11(Nav.Topbar, { startup: current.startup }), current.topbar) : null
+  ] }));
+  render();
+  return {
+    update(next) {
+      current = { ...current, ...next };
+      render();
+    },
+    unmount() {
+      root.unmount();
+      anchor.remove();
+    }
+  };
+}
+export {
+  mountNav
+};