npm - @iloveagents/foundry-web-ui - Versions diffs - 0.1.0 - Mend

@iloveagents/foundry-web-ui 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (88) hide show

package/AGENTS.md +59 -0
package/CLAUDE.md +1 -0
package/LICENSE +21 -0
package/README.md +41 -0
package/package.json +61 -0
package/src/__tests__/no-spaces-imports.test.ts +59 -0
package/src/__tests__/open-core-guards.test.ts +307 -0
package/src/__tests__/theme-runtime.test.ts +81 -0
package/src/__tests__/tool-fallback.test.tsx +109 -0
package/src/components/ag-ui-runtime-provider.tsx +59 -0
package/src/components/app-brand.tsx +38 -0
package/src/components/assistant-chat.tsx +423 -0
package/src/components/chat-attachments.tsx +68 -0
package/src/components/chat-bubble.tsx +339 -0
package/src/components/chat-header.tsx +44 -0
package/src/components/client-tool-executor.tsx +230 -0
package/src/components/collection-empty-state.tsx +37 -0
package/src/components/collection-filter-bar.tsx +168 -0
package/src/components/collection-search-input.tsx +41 -0
package/src/components/collection-skeleton.tsx +55 -0
package/src/components/collection-sort-menu.tsx +62 -0
package/src/components/collection-surface.tsx +46 -0
package/src/components/collection-toolbar.tsx +33 -0
package/src/components/collection-view-toggle.tsx +61 -0
package/src/components/confirm-dialog.tsx +49 -0
package/src/components/confirmation-card.tsx +32 -0
package/src/components/context-badges.tsx +124 -0
package/src/components/context-bar.tsx +202 -0
package/src/components/form-dialog.tsx +56 -0
package/src/components/global-selection-popover.tsx +135 -0
package/src/components/infinite-scroll-sentinel.tsx +48 -0
package/src/components/json-viewer.tsx +232 -0
package/src/components/loading-indicator.tsx +40 -0
package/src/components/markdown-text.tsx +379 -0
package/src/components/name-dialog.tsx +87 -0
package/src/components/selection-popover.tsx +156 -0
package/src/components/show-document-tool-ui.tsx +90 -0
package/src/components/sidebar.test.tsx +182 -0
package/src/components/sidebar.tsx +1174 -0
package/src/components/surface-card.tsx +45 -0
package/src/components/theme-runtime-provider.tsx +93 -0
package/src/components/theme-toggle.tsx +27 -0
package/src/components/tool-call-card.tsx +126 -0
package/src/components/tool-fallback.tsx +169 -0
package/src/components/tool-panel-layout.tsx +36 -0
package/src/components/tool-panel.tsx +233 -0
package/src/components/tooltip-icon-button.tsx +28 -0
package/src/components/user-menu.tsx +60 -0
package/src/index.ts +170 -0
package/src/lib/__tests__/ag-ui-adapter.test.ts +182 -0
package/src/lib/__tests__/app-store.test.ts +330 -0
package/src/lib/__tests__/attachment-adapter.test.ts +48 -0
package/src/lib/__tests__/chat-bubble-store.test.ts +67 -0
package/src/lib/__tests__/client-tools.test.ts +124 -0
package/src/lib/__tests__/dev-store.test.ts +78 -0
package/src/lib/__tests__/nav-config.test.ts +135 -0
package/src/lib/__tests__/nav-dnd.test.ts +24 -0
package/src/lib/__tests__/nav-store.test.ts +59 -0
package/src/lib/__tests__/sidebar-store.test.ts +144 -0
package/src/lib/__tests__/theme-store.test.ts +83 -0
package/src/lib/__tests__/tool-panel-store.test.ts +61 -0
package/src/lib/__tests__/use-page-context.test.ts +58 -0
package/src/lib/ag-ui-adapter.ts +362 -0
package/src/lib/app-store.ts +294 -0
package/src/lib/attachment-adapter.ts +92 -0
package/src/lib/auth-provider.tsx +144 -0
package/src/lib/chat-bubble-store.ts +46 -0
package/src/lib/client-tools.ts +293 -0
package/src/lib/dev-store.ts +69 -0
package/src/lib/nav-config.ts +292 -0
package/src/lib/nav-dnd.ts +14 -0
package/src/lib/nav-store.ts +76 -0
package/src/lib/sidebar-store.ts +113 -0
package/src/lib/theme-runtime.ts +660 -0
package/src/lib/theme-store.ts +67 -0
package/src/lib/tool-panel-store.ts +121 -0
package/src/lib/use-new-conversation.test.tsx +124 -0
package/src/lib/use-new-conversation.ts +33 -0
package/src/lib/use-page-tools.ts +40 -0
package/src/ui/collapsible.tsx +7 -0
package/src/ui/dialog.tsx +109 -0
package/src/ui/dropdown-menu.tsx +71 -0
package/src/ui/popover.tsx +34 -0
package/src/ui/select.tsx +15 -0
package/src/ui/tooltip.tsx +30 -0
package/src/vite-env.d.ts +1 -0
package/tsconfig.json +16 -0
package/vitest.config.ts +8 -0

package/src/lib/theme-store.ts ADDED Viewed

@@ -0,0 +1,67 @@
+/**
+ * Theme Store -- Zustand store for dark/light/system theme preference.
+ *
+ * Persists the user's choice to localStorage and applies the `.dark` class
+ * on `<html>`. In "system" mode it tracks the OS preference via matchMedia.
+ */
+import { create } from "zustand";
+export type ThemeMode = "light" | "dark" | "system";
+interface ThemeState {
+  mode: ThemeMode;
+  setMode: (mode: ThemeMode) => void;
+  /** Cycle through light -> dark -> system. */
+  cycle: () => void;
+}
+const STORAGE_KEY = "theme";
+const CYCLE_ORDER: ThemeMode[] = ["light", "dark", "system"];
+function getStoredMode(): ThemeMode {
+  if (typeof window === "undefined") return "system";
+  const stored = localStorage.getItem(STORAGE_KEY);
+  if (stored === "light" || stored === "dark" || stored === "system") return stored;
+  return "system";
+}
+function prefersDark(): boolean {
+  if (typeof window === "undefined") return false;
+  return window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+function applyTheme(mode: ThemeMode) {
+  if (typeof document === "undefined") return;
+  const isDark = mode === "dark" || (mode === "system" && prefersDark());
+  document.documentElement.classList.toggle("dark", isDark);
+}
+export const useThemeStore = create<ThemeState>((set, get) => {
+  const initial = getStoredMode();
+  applyTheme(initial);
+  // Listen for OS preference changes when in system mode
+  if (typeof window !== "undefined") {
+    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
+      if (get().mode === "system") applyTheme("system");
+    });
+  }
+  return {
+    mode: initial,
+    setMode: (mode) => {
+      localStorage.setItem(STORAGE_KEY, mode);
+      applyTheme(mode);
+      set({ mode });
+    },
+    cycle: () => {
+      const current = get().mode;
+      const idx = CYCLE_ORDER.indexOf(current);
+      const next = CYCLE_ORDER[(idx + 1) % CYCLE_ORDER.length];
+      get().setMode(next);
+    },
+  };
+});

package/src/lib/tool-panel-store.ts ADDED Viewed

@@ -0,0 +1,121 @@
+/**
+ * Tool Panel State Management
+ *
+ * Zustand store for managing the tool panel (flyout side panel).
+ * Allows both UI components and agent tools to control the panel.
+ */
+import { create } from "zustand";
+import type { LazyExoticComponent, ComponentType } from "react";
+export interface PdfHighlightRef {
+  pageNumber: number;
+  polygon: number[];
+}
+export interface ToolPanelContent {
+  title: string;
+  content: string;
+  type: "markdown" | "text" | "page" | "pdf";
+  /** PDF highlights for citation overlays (only when type === "pdf") */
+  pdfHighlights?: PdfHighlightRef[];
+  /** Initial page to scroll to (only when type === "pdf") */
+  initialPage?: number;
+  /** SPACES entity ID — enables pin and navigate actions in panel header */
+  entityId?: string;
+}
+/** Pluggable content renderer for the tool panel — registered by feature modules. */
+export interface PanelRendererEntry {
+  /** Check if this renderer handles the given content */
+  match: (content: ToolPanelContent) => boolean;
+  /** Lazy component to render. Receives content as prop. */
+  component: LazyExoticComponent<ComponentType<{ content: ToolPanelContent }>>;
+}
+const SIDE_BY_SIDE_BREAKPOINT = 1280;
+const getPanelWidth = (): number => {
+  if (typeof window === "undefined") return 800;
+  const screenWidth = window.innerWidth;
+  if (screenWidth < SIDE_BY_SIDE_BREAKPOINT) return screenWidth;
+  return Math.min(1000, Math.max(600, screenWidth * 0.5));
+};
+const shouldUseOverlay = (): boolean => {
+  if (typeof window === "undefined") return true;
+  return window.innerWidth < SIDE_BY_SIDE_BREAKPOINT;
+};
+interface ToolPanelState {
+  isOpen: boolean;
+  content: ToolPanelContent | null;
+  // Layout state
+  panelWidth: number;
+  useOverlay: boolean;
+  isFullscreen: boolean;
+  // Pluggable content renderers (registered by feature modules)
+  renderers: PanelRendererEntry[];
+  // Actions
+  openPanel: (content: ToolPanelContent) => void;
+  closePanel: () => void;
+  setContent: (content: ToolPanelContent) => void;
+  updateLayout: () => void;
+  toggleFullscreen: () => void;
+  /** Register a custom content renderer (e.g., PDF viewer, entity pages). */
+  registerRenderer: (entry: PanelRendererEntry) => void;
+}
+export const useToolPanelStore = create<ToolPanelState>((set, get) => ({
+  isOpen: false,
+  content: null,
+  panelWidth: getPanelWidth(),
+  useOverlay: shouldUseOverlay(),
+  isFullscreen: false,
+  renderers: [],
+  openPanel: (content) => set({ isOpen: true, content }),
+  registerRenderer: (entry) =>
+    set((state) => ({ renderers: [...state.renderers, entry] })),
+  closePanel: () => set({ isOpen: false, isFullscreen: false }),
+  setContent: (content) => set({ content }),
+  updateLayout: () => {
+    const { isFullscreen } = get();
+    if (!isFullscreen) {
+      set({
+        panelWidth: getPanelWidth(),
+        useOverlay: shouldUseOverlay(),
+      });
+    }
+  },
+  toggleFullscreen: () => {
+    const { isFullscreen } = get();
+    if (isFullscreen) {
+      set({
+        isFullscreen: false,
+        panelWidth: getPanelWidth(),
+        useOverlay: shouldUseOverlay(),
+      });
+    } else {
+      set({
+        isFullscreen: true,
+        panelWidth: typeof window !== "undefined" ? window.innerWidth : 1200,
+        useOverlay: true,
+      });
+    }
+  },
+}));
+// Debounced resize listener
+if (typeof window !== "undefined") {
+  let timeout: ReturnType<typeof setTimeout>;
+  window.addEventListener("resize", () => {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      useToolPanelStore.getState().updateLayout();
+    }, 100);
+  });
+}

package/src/lib/use-new-conversation.test.tsx ADDED Viewed

@@ -0,0 +1,124 @@
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { MemoryRouter, useLocation } from "react-router";
+import { beforeEach, describe, expect, it, vi, afterEach } from "vitest";
+import { useAppStore } from "./app-store.ts";
+import { citationStore } from "@iloveagents/foundry-agent";
+import { useSidebarStore } from "./sidebar-store.ts";
+import { useToolPanelStore } from "./tool-panel-store.ts";
+import { useNewConversation } from "./use-new-conversation.ts";
+const switchToNewThread = vi.fn();
+const resetThread = vi.fn();
+vi.mock("@assistant-ui/react", () => ({
+  useAui: () => ({
+    threads: () => ({
+      switchToNewThread,
+    }),
+  }),
+}));
+vi.mock("../components/ag-ui-runtime-provider.tsx", () => ({
+  useAGUIAdapter: () => ({
+    resetThread,
+  }),
+}));
+function LocationProbe() {
+  const location = useLocation();
+  return <div data-testid="location">{location.pathname}</div>;
+}
+function Trigger() {
+  const handleNewConversation = useNewConversation();
+  return (
+    <button type="button" onClick={handleNewConversation}>
+      New Thread
+    </button>
+  );
+}
+describe("useNewConversation", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+  let originalActEnvironment: boolean | undefined;
+  beforeEach(() => {
+    originalActEnvironment = globalThis.IS_REACT_ACT_ENVIRONMENT;
+    globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+    switchToNewThread.mockReset();
+    resetThread.mockReset();
+    useToolPanelStore.setState({ isOpen: true });
+    useSidebarStore.setState({ isMobileOpen: true });
+    citationStore.setState({
+      results: [
+        {
+          chunk_id: "chunk-1",
+          entity_id: "file-1",
+          entity_name: "Test File",
+          content: "Excerpt",
+          page_number: 1,
+          bounding_regions: "[]",
+          score: 1,
+        },
+      ],
+      handler: { openCitation: vi.fn() },
+    });
+    useAppStore.setState({
+      threadActive: true,
+      currentPage: "/spaces/demo",
+      navContext: {
+        group: "Workspaces",
+        groupDescription: null,
+        groupMeta: {},
+        label: "Demo",
+        description: null,
+        meta: {},
+        contextInstructions: null,
+      },
+      selectedItemId: "entity-1",
+      content: { title: "Draft" },
+      highlights: [{ entityId: "entity-1", blockId: "block-1" }],
+      contextItems: [],
+      sentContext: {},
+    });
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+  afterEach(() => {
+    act(() => {
+      root.unmount();
+    });
+    container.remove();
+    globalThis.IS_REACT_ACT_ENVIRONMENT = originalActEnvironment;
+  });
+  it("navigates to chat and resets thread state", async () => {
+    await act(async () => {
+      root.render(
+        <MemoryRouter initialEntries={["/spaces/demo"]}>
+          <Trigger />
+          <LocationProbe />
+        </MemoryRouter>,
+      );
+    });
+    const button = container.querySelector("button");
+    expect(button).toBeTruthy();
+    await act(async () => {
+      button?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    });
+    expect(container.querySelector('[data-testid="location"]')?.textContent).toBe("/");
+    expect(switchToNewThread).toHaveBeenCalledTimes(1);
+    expect(resetThread).toHaveBeenCalledTimes(1);
+    expect(useToolPanelStore.getState().isOpen).toBe(false);
+    expect(useSidebarStore.getState().isMobileOpen).toBe(false);
+    expect(citationStore.getState().results).toEqual([]);
+    expect(citationStore.getState().handler).toBeNull();
+  });
+});

package/src/lib/use-new-conversation.ts ADDED Viewed

@@ -0,0 +1,33 @@
+import { useCallback } from "react";
+import { useNavigate } from "react-router";
+import { useAui } from "@assistant-ui/react";
+import { useStore } from "zustand";
+import { citationStore } from "@iloveagents/foundry-agent";
+import { useAGUIAdapter } from "../components/ag-ui-runtime-provider.tsx";
+import { useToolPanelStore } from "./tool-panel-store.ts";
+import { useAppStore } from "./app-store.ts";
+import { useSidebarStore } from "./sidebar-store.ts";
+/**
+ * Shared hook for starting a new conversation.
+ * Used by ChatHeader and Sidebar to keep behavior in sync.
+ */
+export function useNewConversation() {
+  const aui = useAui();
+  const { resetThread } = useAGUIAdapter();
+  const navigate = useNavigate();
+  const closePanel = useToolPanelStore((s) => s.closePanel);
+  const resetApp = useAppStore((s) => s.resetAll);
+  const closeMobile = useSidebarStore((s) => s.closeMobile);
+  const clearCitations = useStore(citationStore, (s) => s.clear);
+  return useCallback(() => {
+    closePanel();
+    resetApp();
+    closeMobile();
+    clearCitations();
+    resetThread();
+    aui.threads().switchToNewThread();
+    navigate("/");
+  }, [closePanel, resetApp, closeMobile, clearCitations, resetThread, aui, navigate]);
+}

package/src/lib/use-page-tools.ts ADDED Viewed

@@ -0,0 +1,40 @@
+/**
+ * usePageTools — hook for pages to register client tools with the agent.
+ *
+ * Call this in any page component to declare tools available on that page.
+ * Tools are registered on mount and removed on unmount, so the agent
+ * only sees tools relevant to the current page.
+ *
+ * @example
+ * ```tsx
+ * function WorkspacePage() {
+ *   usePageTools([
+ *     {
+ *       name: "submit_draft",
+ *       description: "Submit the current draft for review",
+ *       parameters: { type: "object", properties: {}, required: [] },
+ *       execute: async () => {
+ *         // ... submit logic
+ *         return JSON.stringify({ status: "success" });
+ *       },
+ *     },
+ *   ]);
+ *   return <div>...</div>;
+ * }
+ * ```
+ */
+import { useEffect } from "react";
+import { clientToolRegistry, type ClientToolEntry } from "@iloveagents/foundry-agent";
+export function usePageTools(tools: ClientToolEntry[]) {
+  useEffect(() => {
+    clientToolRegistry.getState().registerPageTools(tools);
+    return () => {
+      clientToolRegistry.getState().clearPageTools();
+    };
+    // Registers once on mount, clears on unmount.
+    // Tools array should be stable (defined outside the component or memoized).
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+}

package/src/ui/collapsible.tsx ADDED Viewed

@@ -0,0 +1,7 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+const Collapsible = CollapsiblePrimitive.Root;
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/src/ui/dialog.tsx ADDED Viewed

@@ -0,0 +1,109 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import { cn } from "@iloveagents/foundry-web-primitives";
+import { ThemeScope } from "../components/theme-runtime-provider.tsx";
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogClose = DialogPrimitive.Close;
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/55 backdrop-blur-sm",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out",
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+    showCloseButton?: boolean;
+  }
+>(({ className, children, showCloseButton = true, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-1/2 top-1/2 z-50 grid w-[calc(100%-2rem)] max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4",
+        "rounded-[2rem] border border-border bg-background/95 p-6 shadow-2xl duration-200",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        className,
+      )}
+      {...props}
+    >
+      {/* ThemeScope ensures portaled dialogs inherit the active theme */}
+      <ThemeScope style={{ display: "contents" }}>
+      {children}
+      </ThemeScope>
+      {showCloseButton ? (
+        <DialogPrimitive.Close
+          className={cn(
+            "absolute right-5 top-5 rounded-md p-1 transition-colors hover:bg-muted",
+            "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+          )}
+          aria-label="Close"
+        >
+          <X className="size-4 text-muted-foreground" />
+        </DialogPrimitive.Close>
+      ) : null}
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+function DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("flex flex-col gap-1.5 pr-10", className)} {...props} />;
+}
+function DialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("flex justify-end gap-2", className)} {...props} />;
+}
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title ref={ref} className={cn("text-lg font-semibold", className)} {...props} />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};

package/src/ui/dropdown-menu.tsx ADDED Viewed

@@ -0,0 +1,71 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { type ComponentPropsWithRef, forwardRef } from "react";
+import { cn } from "@iloveagents/foundry-web-primitives";
+export const DropdownMenu = DropdownMenuPrimitive.Root;
+export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+export const DropdownMenuContent = forwardRef<
+  HTMLDivElement,
+  ComponentPropsWithRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border border-border",
+        "bg-popover p-1 text-popover-foreground shadow-md",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
+        "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className,
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = "DropdownMenuContent";
+export const DropdownMenuItem = forwardRef<
+  HTMLDivElement,
+  ComponentPropsWithRef<typeof DropdownMenuPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+      "transition-colors focus:bg-accent focus:text-accent-foreground",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = "DropdownMenuItem";
+export const DropdownMenuSeparator = forwardRef<
+  HTMLDivElement,
+  ComponentPropsWithRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
+export const DropdownMenuLabel = forwardRef<
+  HTMLDivElement,
+  ComponentPropsWithRef<typeof DropdownMenuPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", className)}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = "DropdownMenuLabel";

package/src/ui/popover.tsx ADDED Viewed

@@ -0,0 +1,34 @@
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { cn } from "@iloveagents/foundry-web-primitives";
+const Popover = PopoverPrimitive.Root;
+const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverAnchor = PopoverPrimitive.Anchor;
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 8, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 rounded-2xl border border-border bg-popover p-3 text-popover-foreground shadow-xl outline-none",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
+        "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className,
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+export { Popover, PopoverTrigger, PopoverAnchor, PopoverContent };

package/src/ui/select.tsx ADDED Viewed

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { cn } from "@iloveagents/foundry-web-primitives";
+const selectClassName =
+  "flex h-10 w-full rounded-xl border border-border bg-background px-3 py-2 text-sm outline-none transition focus:border-primary focus:ring-2 focus:ring-primary/15 disabled:cursor-not-allowed disabled:opacity-50";
+const Select = React.forwardRef<HTMLSelectElement, React.ComponentProps<"select">>(
+  ({ className, ...props }, ref) => {
+    return <select ref={ref} className={cn(selectClassName, className)} {...props} />;
+  },
+);
+Select.displayName = "Select";
+export { Select, selectClassName };

package/src/ui/tooltip.tsx ADDED Viewed

@@ -0,0 +1,30 @@
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { cn } from "@iloveagents/foundry-web-primitives";
+const TooltipProvider = TooltipPrimitive.Provider;
+const Tooltip = TooltipPrimitive.Root;
+const TooltipTrigger = TooltipPrimitive.Trigger;
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className,
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/src/vite-env.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ /// <reference types="vite/client" />

package/tsconfig.json ADDED Viewed

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "jsx": "react-jsx",
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "allowImportingTsExtensions": true,
+    "noEmit": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules"]
+}

package/vitest.config.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import { defineConfig } from "vitest/config";
+export default defineConfig({
+  test: {
+    environment: "jsdom",
+    include: ["src/**/*.test.{ts,tsx}"],
+  },
+});