@iloveagents/foundry-web-ui 0.3.0 → 0.4.0

package/src/components/tool-panel.tsx

@@ -1,233 +0,0 @@
-import { useCallback, useEffect, useRef, useState, Suspense } from "react";
-import { X, Maximize2, Minimize2, Copy, Check, Pin, PinOff, FolderOpen } from "lucide-react";
-import { useNavigate } from "react-router";
-import { cn } from "@iloveagents/foundry-web-primitives";
-import { useToolPanelStore, type ToolPanelContent } from "../lib/tool-panel-store.ts";
-import { useAppStore } from "../lib/app-store.ts";
-import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
-import { markdownComponents } from "./markdown-text.tsx";
-import { SelectionPopover } from "./selection-popover.tsx";
-
-/** Renders panel content using the renderer registry, then built-in markdown/text. */
-function PanelContentRenderer({ content }: { content: ToolPanelContent }) {
-  const renderers = useToolPanelStore((s) => s.renderers);
-
-  // Check registered renderers first (e.g., PDF viewer, entity pages, demo pages)
-  const customRenderer = renderers.find((r) => r.match(content));
-  if (customRenderer) {
-    const Component = customRenderer.component;
-    return (
-      <Suspense fallback={null}>
-        <Component content={content} />
-      </Suspense>
-    );
-  }
-
-  // Built-in markdown / text rendering
-  return (
-    <div className="px-6 py-4">
-      {content.type === "markdown" ? (
-        <div className="max-w-2xl mx-auto">
-          <ReactMarkdown remarkPlugins={[remarkGfm]} components={markdownComponents}>
-            {content.content}
-          </ReactMarkdown>
-        </div>
-      ) : (
-        <div className="whitespace-pre-wrap text-sm text-foreground max-w-2xl mx-auto">
-          {content.content}
-        </div>
-      )}
-    </div>
-  );
-}
-
-export function ToolPanel() {
-  const isOpen = useToolPanelStore((state) => state.isOpen);
-  const content = useToolPanelStore((state) => state.content);
-  const closePanel = useToolPanelStore((state) => state.closePanel);
-  const panelWidth = useToolPanelStore((state) => state.panelWidth);
-  const isFullscreen = useToolPanelStore((state) => state.isFullscreen);
-  const toggleFullscreen = useToolPanelStore((state) => state.toggleFullscreen);
-  const navigate = useNavigate();
-  const contentRef = useRef<HTMLDivElement>(null);
-  const [copied, setCopied] = useState(false);
-
-  // Pin state for SPACES entities
-  const entityId = content?.entityId;
-  const contextItems = useAppStore((s) => s.contextItems);
-  const addContextItem = useAppStore((s) => s.addContextItem);
-  const removeContextItem = useAppStore((s) => s.removeContextItem);
-
-  const entityPin = entityId
-    ? contextItems.find(
-        (i) =>
-          i.persistence === "persistent" &&
-          i.type === "page" &&
-          i.payload.kind === "page" &&
-          (i.payload as { path: string }).path === `/spaces/${entityId}`,
-      )
-    : null;
-  const isEntityPinned = !!entityPin;
-
-  const handleToggleEntityPin = useCallback(() => {
-    if (!entityId || !content) return;
-    if (entityPin) {
-      removeContextItem(entityPin.id);
-    } else {
-      addContextItem({
-        type: "page",
-        label: content.title,
-        payload: { kind: "page", path: `/spaces/${entityId}`, label: content.title, meta: {} },
-        sourcePage: `/spaces/${entityId}`,
-        persistence: "persistent",
-      });
-    }
-  }, [entityId, entityPin, content, addContextItem, removeContextItem]);
-
-  const handleNavigateToEntity = useCallback(() => {
-    if (!entityId || !content) return;
-    navigate(content.type === "page" ? content.content : `/spaces/${entityId}`);
-    closePanel();
-  }, [entityId, content, navigate, closePanel]);
-
-  const handleCopyAll = useCallback(() => {
-    if (!content) return;
-    navigator.clipboard.writeText(content.content).then(() => {
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    });
-  }, [content]);
-
-  // Close on Escape key
-  useEffect(() => {
-    const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === "Escape" && isOpen) {
-        closePanel();
-      }
-    };
-
-    window.addEventListener("keydown", handleEscape);
-    return () => window.removeEventListener("keydown", handleEscape);
-  }, [isOpen, closePanel]);
-
-  if (!content) return null;
-
-  return (
-    <div
-      data-tool-panel
-      className={cn(
-        "fixed top-0 right-0 z-40",
-        "h-dvh",
-        "bg-background border-l border-border shadow-2xl",
-        "transition-transform duration-300 ease-in-out",
-        "flex flex-col",
-        isOpen ? "translate-x-0" : "translate-x-full",
-      )}
-      style={{ width: panelWidth }}
-    >
-      {/* Header */}
-      <div className="flex-shrink-0 border-b border-border px-6 py-4">
-        <div className="flex items-center justify-between">
-          <h2 className="text-lg font-semibold text-foreground truncate pr-4">{content.title}</h2>
-          <div className="flex items-center gap-1">
-            {entityId && (
-              <>
-                <button
-                  type="button"
-                  onClick={handleToggleEntityPin}
-                  className={cn(
-                    "flex items-center justify-center",
-                    "size-8 rounded-md shrink-0",
-                    "hover:bg-muted transition-colors",
-                    "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary",
-                    isEntityPinned && "text-primary",
-                  )}
-                  aria-label={isEntityPinned ? "Unpin document" : "Pin document"}
-                  title={isEntityPinned ? "Unpin document" : "Pin document"}
-                >
-                  {isEntityPinned ? (
-                    <PinOff className="size-4" />
-                  ) : (
-                    <Pin className="size-4 text-muted-foreground" />
-                  )}
-                </button>
-                <button
-                  type="button"
-                  onClick={handleNavigateToEntity}
-                  className={cn(
-                    "flex items-center justify-center",
-                    "size-8 rounded-md shrink-0",
-                    "hover:bg-muted transition-colors",
-                    "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary",
-                  )}
-                  aria-label="Open in navigation"
-                  title="Open in navigation"
-                >
-                  <FolderOpen className="size-4 text-muted-foreground" />
-                </button>
-              </>
-            )}
-            <button
-              type="button"
-              onClick={handleCopyAll}
-              className={cn(
-                "flex items-center justify-center",
-                "size-8 rounded-md flex-shrink-0",
-                "hover:bg-muted transition-colors",
-                "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary",
-              )}
-              aria-label="Copy content"
-            >
-              {copied ? (
-                <Check className="size-4 text-success" />
-              ) : (
-                <Copy className="size-4 text-muted-foreground" />
-              )}
-            </button>
-            <button
-              type="button"
-              onClick={toggleFullscreen}
-              className={cn(
-                "flex items-center justify-center",
-                "size-8 rounded-md flex-shrink-0",
-                "hover:bg-muted transition-colors",
-                "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary",
-              )}
-              aria-label={isFullscreen ? "Exit fullscreen" : "Fullscreen"}
-            >
-              {isFullscreen ? (
-                <Minimize2 className="size-4 text-muted-foreground" />
-              ) : (
-                <Maximize2 className="size-4 text-muted-foreground" />
-              )}
-            </button>
-            <button
-              type="button"
-              onClick={closePanel}
-              className={cn(
-                "flex items-center justify-center",
-                "size-8 rounded-md flex-shrink-0",
-                "hover:bg-muted transition-colors",
-                "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary",
-              )}
-              aria-label="Close panel"
-            >
-              <X className="size-5 text-muted-foreground" />
-            </button>
-          </div>
-        </div>
-      </div>
-
-      {/* Content */}
-      <div
-        className="relative flex-1 overflow-y-auto"
-        ref={contentRef}
-        data-testid="tool-panel-content"
-      >
-        <PanelContentRenderer content={content} />
-        <SelectionPopover containerRef={contentRef} />
-      </div>
-    </div>
-  );
-}

package/src/components/tooltip-icon-button.tsx

@@ -1,28 +0,0 @@
-import { type ComponentPropsWithRef, forwardRef } from "react";
-import { Slottable } from "@radix-ui/react-slot";
-
-import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip.tsx";
-import { Button } from "@iloveagents/foundry-web-primitives";
-
-export type TooltipIconButtonProps = ComponentPropsWithRef<typeof Button> & {
-  tooltip: string;
-  side?: "top" | "bottom" | "left" | "right";
-};
-
-export const TooltipIconButton = forwardRef<HTMLButtonElement, TooltipIconButtonProps>(
-  ({ children, tooltip, side = "bottom", ...rest }, ref) => {
-    return (
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button variant="ghost" size="icon" {...rest} ref={ref}>
-            <Slottable>{children}</Slottable>
-            <span className="sr-only">{tooltip}</span>
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent side={side}>{tooltip}</TooltipContent>
-      </Tooltip>
-    );
-  },
-);
-
-TooltipIconButton.displayName = "TooltipIconButton";

package/src/components/user-menu.tsx

@@ -1,60 +0,0 @@
-import { type FC } from "react";
-import { LogOut, User } from "lucide-react";
-import { useStore } from "zustand";
-import { useShallow } from "zustand/react/shallow";
-import { cn } from "@iloveagents/foundry-web-primitives";
-import { authStore } from "@iloveagents/foundry-agent/msal";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "../ui/dropdown-menu.tsx";
-import { Button } from "@iloveagents/foundry-web-primitives";
-
-export const UserMenu: FC = () => {
-  const { user, signOut } = useStore(
-    authStore,
-    useShallow((s) => ({ user: s.user, signOut: s.signOut })),
-  );
-
-  if (!user) return null;
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="ghost" size="sm" className="gap-2 rounded-full px-2">
-          {user.avatar ? (
-            <img src={user.avatar} alt={user.name} className="size-6 rounded-full" />
-          ) : (
-            <div
-              className={cn(
-                "size-6 rounded-full",
-                "bg-primary/10 text-primary",
-                "flex items-center justify-center",
-              )}
-            >
-              <User className="size-3.5" />
-            </div>
-          )}
-          <span className="text-xs text-muted-foreground hidden sm:inline">{user.name}</span>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="w-56">
-        <DropdownMenuLabel className="font-normal">
-          <div className="flex flex-col gap-0.5">
-            <p className="text-sm font-medium">{user.name}</p>
-            <p className="text-xs text-muted-foreground">{user.email}</p>
-          </div>
-        </DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem onClick={signOut} className="text-destructive cursor-pointer">
-          <LogOut className="size-4" />
-          Sign out
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-};

package/src/index.ts

@@ -1,185 +0,0 @@
-// --- Components ---
-export { Sidebar } from "./components/sidebar.tsx";
-export { ToolPanel } from "./components/tool-panel.tsx";
-export { ToolPanelLayout } from "./components/tool-panel-layout.tsx";
-export { MarkdownText, markdownComponents } from "./components/markdown-text.tsx";
-export { ClientToolExecutor } from "./components/client-tool-executor.tsx";
-export { AGUIRuntimeProvider, useAGUIAdapter } from "./components/ag-ui-runtime-provider.tsx";
-export type {
-  AGUIChatConversationFactoryArgs,
-  AGUIHistoryAdapterFactory,
-} from "./components/ag-ui-runtime-provider.tsx";
-export { ChatContent, DEFAULT_STARTER_SUGGESTIONS } from "./components/assistant-chat.tsx";
-export type { ChatContentProps } from "./components/assistant-chat.tsx";
-export { ChatBubble } from "./components/chat-bubble.tsx";
-export { ChatHeader } from "./components/chat-header.tsx";
-export {
-  ComposerAttachment,
-  UserMessageAttachment,
-  userAttachmentComponents,
-  composerAttachmentComponents,
-} from "./components/chat-attachments.tsx";
-export { ShowDocumentToolUI } from "./components/show-document-tool-ui.tsx";
-export { ToolCallCard } from "./components/tool-call-card.tsx";
-export type { ToolCallStatus } from "./components/tool-call-card.tsx";
-export { ToolFallback } from "./components/tool-fallback.tsx";
-export { ConfirmationCard } from "./components/confirmation-card.tsx";
-export { TooltipIconButton } from "./components/tooltip-icon-button.tsx";
-export { ComposerContextBadges, SentContextBadges } from "./components/context-badges.tsx";
-export { ContextPins } from "./components/context-bar.tsx";
-export { SelectionPopover } from "./components/selection-popover.tsx";
-export { GlobalSelectionPopover } from "./components/global-selection-popover.tsx";
-export { LoadingIndicator } from "./components/loading-indicator.tsx";
-export { ThemeToggle } from "./components/theme-toggle.tsx";
-export { AppBrand } from "./components/app-brand.tsx";
-export { CollectionToolbar } from "./components/collection-toolbar.tsx";
-export { CollectionSearchInput } from "./components/collection-search-input.tsx";
-export {
-  CollectionFilterBar,
-  type CollectionFilterDefinition,
-  type CollectionFilterOption,
-  type CollectionFilterValue,
-} from "./components/collection-filter-bar.tsx";
-export {
-  CollectionSortMenu,
-  type CollectionSortOption,
-} from "./components/collection-sort-menu.tsx";
-export {
-  CollectionViewToggle,
-  type CollectionViewMode,
-} from "./components/collection-view-toggle.tsx";
-export { CollectionEmptyState } from "./components/collection-empty-state.tsx";
-export { CollectionSkeleton } from "./components/collection-skeleton.tsx";
-export { InfiniteScrollSentinel } from "./components/infinite-scroll-sentinel.tsx";
-export { CollectionSurface } from "./components/collection-surface.tsx";
-export {
-  ThemeRuntimeProvider,
-  ThemeScope,
-  ThemeDocumentMetadata,
-  useThemeRuntime,
-} from "./components/theme-runtime-provider.tsx";
-export { JsonViewer } from "./components/json-viewer.tsx";
-export { UserMenu } from "./components/user-menu.tsx";
-export { FormDialog } from "./components/form-dialog.tsx";
-export { ConfirmDialog } from "./components/confirm-dialog.tsx";
-export { NameDialog } from "./components/name-dialog.tsx";
-export { SurfaceCard, surfaceCardVariants } from "./components/surface-card.tsx";
-
-// --- Composite UI primitives (theme-runtime-coupled — stay here for now) ---
-// Button, Checkbox, Input, Textarea, Field, FieldSet have moved to
-// @iloveagents/foundry-web-primitives (#94). The primitives below have a runtime
-// coupling to ThemeScope (theme-runtime-provider.tsx) — they need a
-// theme-system refactor before they can move to the leaf primitives
-// package. Tracked for a follow-up under #95/#96.
-export {
-  Tooltip,
-  TooltipTrigger,
-  TooltipContent,
-  TooltipProvider,
-} from "./ui/tooltip.tsx";
-export {
-  Collapsible,
-  CollapsibleTrigger,
-  CollapsibleContent,
-} from "./ui/collapsible.tsx";
-export {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuLabel,
-} from "./ui/dropdown-menu.tsx";
-export {
-  Dialog,
-  DialogPortal,
-  DialogOverlay,
-  DialogTrigger,
-  DialogClose,
-  DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
-} from "./ui/dialog.tsx";
-export { Popover, PopoverTrigger, PopoverAnchor, PopoverContent } from "./ui/popover.tsx";
-export { Select, selectClassName } from "./ui/select.tsx";
-
-// --- Stores ---
-export { useAppStore } from "./lib/app-store.ts";
-export { useNavStore, type NavFooterAction } from "./lib/nav-store.ts";
-export { useToolPanelStore } from "./lib/tool-panel-store.ts";
-export type {
-  ToolPanelContent,
-  PdfHighlightRef,
-  PanelRendererEntry,
-} from "./lib/tool-panel-store.ts";
-export { useSidebarStore, SIDEBAR_WIDTH, RAIL_WIDTH } from "./lib/sidebar-store.ts";
-export { useChatBubbleStore } from "./lib/chat-bubble-store.ts";
-export { useChatLifecycleStore } from "./lib/chat-lifecycle-store.ts";
-export { submitComposerText } from "./lib/composer-submit-store.ts";
-export {
-  registerSelectionContextResolver,
-  resolveSelectionContext,
-  type SelectionContextInput,
-  type SelectionContextItem,
-  type SelectionContextResolver,
-  type SelectionContextResult,
-} from "./lib/selection-context.ts";
-export { useThemeStore } from "./lib/theme-store.ts";
-export type { ThemeMode } from "./lib/theme-store.ts";
-export {
-  mergeThemeDefinitions,
-  resolveThemeRuntime,
-  getEffectiveThemeMode,
-  getThemePreset,
-} from "./lib/theme-runtime.ts";
-export type {
-  ThemeDefinition,
-  ThemeLayer,
-  ResolvedThemeRuntime,
-  ThemeColorSlots,
-  ThemeSidebarSlots,
-  ThemeStatusSlots,
-  ThemeChartSlots,
-  ThemeTypographySlots,
-  ThemeRadiusSlots,
-  ThemeAppSlots,
-  ThemeBranding,
-} from "./lib/theme-runtime.ts";
-// Stores moved to @iloveagents/foundry-agent (#95): authStore, citationStore,
-// streamingStatusStore, clientToolRegistry. Consumers import directly from
-// `@iloveagents/foundry-agent` / `@iloveagents/foundry-agent/msal` — no re-exports here per
-// the no-shim rule.
-export { useDevStore } from "./lib/dev-store.ts";
-
-// --- Nav types ---
-export { DEFAULT_NAV_CONFIG, findNavItem } from "./lib/nav-config.ts";
-export type {
-  NavItem,
-  NavItemAction,
-  NavItemDnd,
-  NavGroup,
-  NavGroupCreateAction,
-  NavMatch,
-  CollapsedRailItem,
-  CollapsedRailContext,
-} from "./lib/nav-config.ts";
-
-// --- Hooks ---
-export { usePageTools } from "./lib/use-page-tools.ts";
-export { useNewConversation } from "./lib/use-new-conversation.ts";
-
-// --- Adapters ---
-export { AGUIAdapterSDK } from "./lib/ag-ui-adapter.ts";
-export { FileAttachmentAdapter } from "./lib/attachment-adapter.ts";
-
-// --- Auth ---
-// `AuthProvider` is the React MSAL bootstrap (uses `@azure/msal-react`).
-// Token store, config, fetch wrapper all live in `@iloveagents/foundry-agent/msal`.
-export { AuthProvider } from "./lib/auth-provider.tsx";
-
-// --- Utils ---
-// `cn` is sourced from @iloveagents/foundry-web-primitives (the leaf primitives package).
-// Re-exporting here would create two canonical sources for the same
-// utility — banned per the "no shims" pre-1.0 rule (#90).