@iloveagents/foundry-web-ui 0.3.0 → 0.4.0

package/dist/components/surface-card.d.ts

@@ -0,0 +1,9 @@
+import { type VariantProps } from "class-variance-authority";
+import type { ComponentPropsWithoutRef } from "react";
+declare const surfaceCardVariants: (props?: ({
+    tone?: "default" | "muted" | "empty" | "subtle" | null | undefined;
+    radius?: "lg" | "md" | "xl" | null | undefined;
+    padding?: "sm" | "lg" | "md" | "xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare function SurfaceCard({ className, tone, radius, padding, ...props }: ComponentPropsWithoutRef<"div"> & VariantProps<typeof surfaceCardVariants>): import("react/jsx-runtime").JSX.Element;
+export { surfaceCardVariants };

package/dist/components/surface-card.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "@iloveagents/foundry-web-primitives";
+const surfaceCardVariants = cva("border border-border shadow-sm", {
+    variants: {
+        tone: {
+            default: "bg-card",
+            subtle: "bg-background/80",
+            muted: "bg-muted/10",
+            empty: "border-dashed bg-muted/10 text-sm text-muted-foreground",
+        },
+        radius: {
+            md: "rounded-xl",
+            lg: "rounded-[1.5rem]",
+            xl: "rounded-[2rem]",
+        },
+        padding: {
+            sm: "p-4",
+            md: "p-5",
+            lg: "p-6",
+            xl: "p-7",
+        },
+    },
+    defaultVariants: {
+        tone: "default",
+        radius: "lg",
+        padding: "md",
+    },
+});
+export function SurfaceCard({ className, tone, radius, padding, ...props }) {
+    return (_jsx("div", { className: cn(surfaceCardVariants({ tone, radius, padding }), className), ...props }));
+}
+export { surfaceCardVariants };

package/dist/components/theme-runtime-provider.d.ts

@@ -0,0 +1,15 @@
+import { type CSSProperties, type ReactNode } from "react";
+import type { ThemeMode } from "../lib/theme-store.js";
+import { type ResolvedThemeRuntime, type ThemeLayer } from "../lib/theme-runtime.js";
+export declare function ThemeRuntimeProvider({ layers, mode, children, }: {
+    layers: ThemeLayer[];
+    mode: ThemeMode;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useThemeRuntime(): ResolvedThemeRuntime;
+export declare function ThemeScope({ children, className, style, }: {
+    children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ThemeDocumentMetadata(): null;

package/dist/components/theme-runtime-provider.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useMemo, useRef, useState, } from "react";
+import { resolveThemeRuntime, } from "../lib/theme-runtime.js";
+const ThemeRuntimeContext = createContext(null);
+export function ThemeRuntimeProvider({ layers, mode, children, }) {
+    const fallback = useRef(resolveThemeRuntime([], "system"));
+    const [systemPrefersDark, setSystemPrefersDark] = useState(() => typeof window !== "undefined"
+        ? window.matchMedia("(prefers-color-scheme: dark)").matches
+        : false);
+    useEffect(() => {
+        if (mode !== "system" || typeof window === "undefined")
+            return;
+        const media = window.matchMedia("(prefers-color-scheme: dark)");
+        const handleChange = (event) => {
+            setSystemPrefersDark(event.matches);
+        };
+        setSystemPrefersDark(media.matches);
+        media.addEventListener("change", handleChange);
+        return () => media.removeEventListener("change", handleChange);
+    }, [mode]);
+    const runtime = useMemo(() => {
+        try {
+            const next = resolveThemeRuntime(layers, mode);
+            fallback.current = next;
+            return next;
+        }
+        catch {
+            return fallback.current;
+        }
+    }, [layers, mode, systemPrefersDark]);
+    return _jsx(ThemeRuntimeContext.Provider, { value: runtime, children: children });
+}
+export function useThemeRuntime() {
+    return useContext(ThemeRuntimeContext) ?? resolveThemeRuntime([], "system");
+}
+export function ThemeScope({ children, className, style, }) {
+    const runtime = useThemeRuntime();
+    return (_jsx("div", { className: className, style: { ...runtime.variables, fontFamily: "var(--font-body)", ...style }, children: children }));
+}
+export function ThemeDocumentMetadata() {
+    const runtime = useThemeRuntime();
+    useEffect(() => {
+        if (typeof document === "undefined")
+            return;
+        document.title = runtime.branding.appTitle || runtime.branding.appName || "Foundry UI";
+    }, [runtime.branding.appName, runtime.branding.appTitle]);
+    return null;
+}

package/dist/components/theme-toggle.d.ts

@@ -0,0 +1,2 @@
+import { type FC } from "react";
+export declare const ThemeToggle: FC;

package/dist/components/theme-toggle.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Sun, Moon, Monitor } from "lucide-react";
+import { TooltipIconButton } from "./tooltip-icon-button.js";
+import { useThemeStore } from "../lib/theme-store.js";
+const icons = {
+    light: Sun,
+    dark: Moon,
+    system: Monitor,
+};
+const labels = {
+    light: "Light mode",
+    dark: "Dark mode",
+    system: "System theme",
+};
+export const ThemeToggle = () => {
+    const { mode, cycle } = useThemeStore();
+    const Icon = icons[mode];
+    return (_jsx(TooltipIconButton, { tooltip: labels[mode], size: "icon", onClick: cycle, children: _jsx(Icon, { className: "size-4 text-primary" }) }));
+};

package/dist/components/tool-call-card.d.ts

@@ -0,0 +1,27 @@
+import type { ReactNode } from "react";
+export type ToolCallStatus = {
+    type: "running";
+} | {
+    type: "complete";
+} | {
+    type: "incomplete";
+    reason?: string;
+} | {
+    type: "requires-action";
+    reason?: string;
+};
+interface ToolCallCardProps {
+    icon?: ReactNode;
+    title: string;
+    description?: string;
+    status: ToolCallStatus;
+    action?: {
+        label: string;
+        onClick: () => void;
+        disabled?: boolean;
+    };
+    children?: ReactNode;
+    className?: string;
+}
+export declare function ToolCallCard({ icon, title, description, status, action, children, className, }: ToolCallCardProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/tool-call-card.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Loader2, CheckCircle2, XCircle, AlertCircle, ChevronDown } from "lucide-react";
+import { cn } from "@iloveagents/foundry-web-primitives";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "../ui/collapsible.js";
+import { useState } from "react";
+export function ToolCallCard({ icon, title, description, status, action, children, className, }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const isSuccess = status.type === "complete";
+    const isError = status.type === "incomplete" && status.reason === "error";
+    const isRunning = status.type === "running";
+    const requiresAction = status.type === "requires-action";
+    return (_jsx(Collapsible, { open: isOpen, onOpenChange: setIsOpen, className: className, children: _jsxs("div", { className: cn("flex items-start gap-3 p-3 rounded-lg border", "bg-muted/50 text-sm transition-colors", isSuccess && "border-primary/30 bg-primary/5", isError && "border-destructive/30 bg-destructive/5", requiresAction && "border-primary/30 bg-primary/5"), children: [_jsxs("div", { className: "flex-shrink-0 mt-0.5", children: [isRunning && _jsx(Loader2, { className: "size-4 text-primary animate-spin" }), isSuccess && _jsx(CheckCircle2, { className: "size-4 text-primary" }), isError && _jsx(XCircle, { className: "size-4 text-destructive" }), requiresAction && _jsx(AlertCircle, { className: "size-4 text-primary" })] }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2", children: [icon && _jsx("span", { className: "text-muted-foreground", children: icon }), _jsx("span", { className: "font-medium text-foreground", children: title }), _jsxs("div", { className: "ml-auto flex items-center gap-1.5", children: [action && !isRunning && (_jsx("button", { type: "button", onClick: action.onClick, disabled: action.disabled, className: cn("h-6 px-2.5 text-xs font-medium rounded-md", "border border-primary/30 text-primary", "hover:bg-primary/10 transition-colors", "disabled:opacity-50 disabled:pointer-events-none"), children: action.label })), children && (_jsx(CollapsibleTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "p-0.5 hover:bg-muted rounded transition-colors", "aria-label": "Toggle details", children: _jsx(ChevronDown, { className: cn("size-4 text-muted-foreground transition-transform", isOpen && "rotate-180") }) }) }))] })] }), description && (_jsx("div", { className: cn("text-xs mt-0.5", isError ? "text-destructive" : "text-primary"), children: description })), children && (_jsx(CollapsibleContent, { children: _jsx("div", { className: "mt-2", children: children }) }))] })] }) }));
+}

package/dist/components/tool-fallback.d.ts

@@ -0,0 +1,26 @@
+export declare const ToolFallback: (props: Record<string, unknown>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Heuristically detect a failed tool result. The agent-framework
+ * adapter flattens both plain-Python and MCP tool errors into the
+ * same ``result`` field without a dedicated error flag, so we have
+ * to sniff:
+ *
+ * - MCP canonical shape: ``{isError: true, content: [...]}``
+ * - Python ``@tool`` exception: a string starting with ``"Error:"``
+ *   (agent-framework's default serialization — see
+ *   ``agent_framework/_tools.py::_serialize_tool_exception``).
+ * - Structured error objects: ``{error: "..."}`` or
+ *   ``{error: {message: "..."}}`` — what FastMCP's ``ToolError``
+ *   (re-)raises produce.
+ *
+ * Keep this narrow. A substring match on ``"Error"`` would false-
+ * positive on legitimate results ("…contains the word Error in a
+ * heading…"), so anchor patterns to prefix / explicit fields only.
+ */
+export declare function _detectErrorResult(result: unknown): boolean;
+/**
+ * Pull a user-readable one-liner out of an error result so the card
+ * header shows *why* it failed rather than the generic "Execution
+ * failed". Matches the shapes enumerated in ``detectErrorResult``.
+ */
+export declare function _extractErrorMessage(result: unknown): string | null;

package/dist/components/tool-fallback.js

@@ -0,0 +1,129 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { ToolCallCard } from "./tool-call-card.js";
+import { Wrench } from "lucide-react";
+export const ToolFallback = (props) => {
+    const { toolName, args, result, part } = props;
+    const rawStatus = part?.status || props.status;
+    // Tool results that *describe* a failure (Python ``@tool`` raises an
+    // exception → agent-framework serializes it as an error string;
+    // FastMCP returns ``{isError: true, content: [...]}``; our own tools
+    // sometimes return a plain ``"Error: ..."`` string) arrive here with
+    // ``status.type === "complete"`` because the tool-call round-trip
+    // succeeded from the transport's point of view. Without sniffing
+    // the payload we'd render "Execution complete" in green for a red
+    // condition — exactly what the user called out. Normalize to the
+    // ``incomplete + reason: "error"`` state the card knows how to
+    // show in red with an X-circle.
+    const isErrorResult = _detectErrorResult(result);
+    const status = isErrorResult
+        ? { type: "incomplete", reason: "error" }
+        : rawStatus;
+    let description = "";
+    if (status.type === "running") {
+        description = `Executing ${toolName}...`;
+    }
+    else if (status.type === "incomplete" && status.reason === "error") {
+        description = _extractErrorMessage(result) ?? "Execution failed";
+    }
+    else if (status.type === "complete") {
+        description = result ? "Execution complete" : "Completed";
+    }
+    else if (status.type === "requires-action") {
+        description = "Waiting for execution...";
+    }
+    return (_jsxs(ToolCallCard, { icon: _jsx(Wrench, { className: "size-3.5" }), title: formatToolName(toolName), description: description, status: status, className: "w-full", children: [args && Object.keys(args).length > 0 && (_jsx("div", { className: "text-muted-foreground text-xs space-y-1", children: Object.entries(args).map(([key, value]) => (_jsxs("div", { children: [_jsxs("span", { className: "font-medium", children: [key, ":"] }), " ", _jsx("span", { className: "font-mono", children: formatValue(value) })] }, key))) })), (status.type === "complete" ||
+                (status.type === "incomplete" && status.reason === "error")) &&
+                result != null && (_jsxs("div", { className: "text-muted-foreground text-xs mt-2 pt-2 border-t border-border", children: [_jsxs("div", { className: "font-medium mb-1", children: [status.type === "incomplete" ? "Error" : "Result", ":"] }), _jsx("pre", { className: "font-mono text-xs bg-muted p-2 rounded overflow-x-auto", children: formatResult(result) })] }))] }));
+};
+function formatToolName(toolName) {
+    return toolName
+        .split("_")
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+        .join(" ");
+}
+function formatValue(value) {
+    if (typeof value === "string")
+        return value;
+    if (typeof value === "number" || typeof value === "boolean")
+        return String(value);
+    return JSON.stringify(value);
+}
+function formatResult(result) {
+    if (typeof result === "string")
+        return result;
+    return JSON.stringify(result, null, 2);
+}
+/**
+ * Heuristically detect a failed tool result. The agent-framework
+ * adapter flattens both plain-Python and MCP tool errors into the
+ * same ``result`` field without a dedicated error flag, so we have
+ * to sniff:
+ *
+ * - MCP canonical shape: ``{isError: true, content: [...]}``
+ * - Python ``@tool`` exception: a string starting with ``"Error:"``
+ *   (agent-framework's default serialization — see
+ *   ``agent_framework/_tools.py::_serialize_tool_exception``).
+ * - Structured error objects: ``{error: "..."}`` or
+ *   ``{error: {message: "..."}}`` — what FastMCP's ``ToolError``
+ *   (re-)raises produce.
+ *
+ * Keep this narrow. A substring match on ``"Error"`` would false-
+ * positive on legitimate results ("…contains the word Error in a
+ * heading…"), so anchor patterns to prefix / explicit fields only.
+ */
+export function _detectErrorResult(result) {
+    if (result == null)
+        return false;
+    if (typeof result === "string") {
+        // Python tools: "Error: <message>" (agent-framework default).
+        return /^\s*Error:\s/.test(result);
+    }
+    if (typeof result === "object") {
+        const obj = result;
+        // MCP Streamable-HTTP canonical shape.
+        if (obj.isError === true)
+            return true;
+        // FastMCP ToolError + some of our hand-rolled paths.
+        if (typeof obj.error === "string" && obj.error.length > 0)
+            return true;
+        if (obj.error &&
+            typeof obj.error === "object" &&
+            typeof obj.error.message === "string") {
+            return true;
+        }
+    }
+    return false;
+}
+/**
+ * Pull a user-readable one-liner out of an error result so the card
+ * header shows *why* it failed rather than the generic "Execution
+ * failed". Matches the shapes enumerated in ``detectErrorResult``.
+ */
+export function _extractErrorMessage(result) {
+    if (typeof result === "string") {
+        // Strip the "Error: " prefix so the header isn't redundant.
+        const m = /^\s*Error:\s*(.*)$/s.exec(result);
+        return m ? m[1].trim() || "Execution failed" : null;
+    }
+    if (result && typeof result === "object") {
+        const obj = result;
+        if (typeof obj.error === "string")
+            return obj.error;
+        if (obj.error &&
+            typeof obj.error === "object" &&
+            typeof obj.error.message === "string") {
+            return obj.error.message;
+        }
+        if (Array.isArray(obj.content)) {
+            // MCP error: content[].text usually carries the human message.
+            for (const item of obj.content) {
+                if (item &&
+                    typeof item === "object" &&
+                    typeof item.text === "string") {
+                    return item.text;
+                }
+            }
+        }
+    }
+    return null;
+}

package/dist/components/tool-panel-layout.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Layout wrapper that adjusts main content when tool panel is open.
+ * - Narrow screens (< 1280px): Full-screen overlay, chat hidden
+ * - Wide screens (>= 1280px): Side-by-side layout, chat shifts left
+ */
+interface ToolPanelLayoutProps {
+    children: React.ReactNode;
+}
+export declare function ToolPanelLayout({ children }: ToolPanelLayoutProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/tool-panel-layout.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@iloveagents/foundry-web-primitives";
+import { useToolPanelStore } from "../lib/tool-panel-store.js";
+import { ToolPanel } from "./tool-panel.js";
+export function ToolPanelLayout({ children }) {
+    const isOpen = useToolPanelStore((state) => state.isOpen);
+    const panelWidth = useToolPanelStore((state) => state.panelWidth);
+    const useOverlay = useToolPanelStore((state) => state.useOverlay);
+    return (_jsxs("div", { className: "relative h-full flex-1 min-w-0 overflow-hidden", children: [_jsx("div", { className: cn("h-full flex flex-col transition-all duration-300 ease-in-out", useOverlay && isOpen && "hidden"), style: {
+                    width: isOpen && !useOverlay ? `calc(100% - ${panelWidth}px)` : "100%",
+                }, children: children }), _jsx(ToolPanel, {})] }));
+}

package/dist/components/tool-panel.d.ts

@@ -0,0 +1 @@
+export declare function ToolPanel(): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/tool-panel.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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 } from "../lib/tool-panel-store.js";
+import { useAppStore } from "../lib/app-store.js";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { markdownComponents } from "./markdown-text.js";
+import { SelectionPopover } from "./selection-popover.js";
+/** Renders panel content using the renderer registry, then built-in markdown/text. */
+function PanelContentRenderer({ content }) {
+    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 (_jsx(Suspense, { fallback: null, children: _jsx(Component, { content: content }) }));
+    }
+    // Built-in markdown / text rendering
+    return (_jsx("div", { className: "px-6 py-4", children: content.type === "markdown" ? (_jsx("div", { className: "max-w-2xl mx-auto", children: _jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], components: markdownComponents, children: content.content }) })) : (_jsx("div", { className: "whitespace-pre-wrap text-sm text-foreground max-w-2xl mx-auto", children: content.content })) }));
+}
+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(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.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) => {
+            if (e.key === "Escape" && isOpen) {
+                closePanel();
+            }
+        };
+        window.addEventListener("keydown", handleEscape);
+        return () => window.removeEventListener("keydown", handleEscape);
+    }, [isOpen, closePanel]);
+    if (!content)
+        return null;
+    return (_jsxs("div", { "data-tool-panel": true, 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 }, children: [_jsx("div", { className: "flex-shrink-0 border-b border-border px-6 py-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h2", { className: "text-lg font-semibold text-foreground truncate pr-4", children: content.title }), _jsxs("div", { className: "flex items-center gap-1", children: [entityId && (_jsxs(_Fragment, { children: [_jsx("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", children: isEntityPinned ? (_jsx(PinOff, { className: "size-4" })) : (_jsx(Pin, { className: "size-4 text-muted-foreground" })) }), _jsx("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", children: _jsx(FolderOpen, { className: "size-4 text-muted-foreground" }) })] })), _jsx("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", children: copied ? (_jsx(Check, { className: "size-4 text-success" })) : (_jsx(Copy, { className: "size-4 text-muted-foreground" })) }), _jsx("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", children: isFullscreen ? (_jsx(Minimize2, { className: "size-4 text-muted-foreground" })) : (_jsx(Maximize2, { className: "size-4 text-muted-foreground" })) }), _jsx("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", children: _jsx(X, { className: "size-5 text-muted-foreground" }) })] })] }) }), _jsxs("div", { className: "relative flex-1 overflow-y-auto", ref: contentRef, "data-testid": "tool-panel-content", children: [_jsx(PanelContentRenderer, { content: content }), _jsx(SelectionPopover, { containerRef: contentRef })] })] }));
+}

package/dist/components/tooltip-icon-button.d.ts

@@ -0,0 +1,7 @@
+import { type ComponentPropsWithRef } from "react";
+import { Button } from "@iloveagents/foundry-web-primitives";
+export type TooltipIconButtonProps = ComponentPropsWithRef<typeof Button> & {
+    tooltip: string;
+    side?: "top" | "bottom" | "left" | "right";
+};
+export declare const TooltipIconButton: import("react").ForwardRefExoticComponent<Omit<TooltipIconButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/tooltip-icon-button.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Slottable } from "@radix-ui/react-slot";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip.js";
+import { Button } from "@iloveagents/foundry-web-primitives";
+export const TooltipIconButton = forwardRef(({ children, tooltip, side = "bottom", ...rest }, ref) => {
+    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "icon", ...rest, ref: ref, children: [_jsx(Slottable, { children: children }), _jsx("span", { className: "sr-only", children: tooltip })] }) }), _jsx(TooltipContent, { side: side, children: tooltip })] }));
+});
+TooltipIconButton.displayName = "TooltipIconButton";

package/dist/components/user-menu.d.ts

@@ -0,0 +1,2 @@
+import { type FC } from "react";
+export declare const UserMenu: FC;

package/dist/components/user-menu.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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.js";
+import { Button } from "@iloveagents/foundry-web-primitives";
+export const UserMenu = () => {
+    const { user, signOut } = useStore(authStore, useShallow((s) => ({ user: s.user, signOut: s.signOut })));
+    if (!user)
+        return null;
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "sm", className: "gap-2 rounded-full px-2", children: [user.avatar ? (_jsx("img", { src: user.avatar, alt: user.name, className: "size-6 rounded-full" })) : (_jsx("div", { className: cn("size-6 rounded-full", "bg-primary/10 text-primary", "flex items-center justify-center"), children: _jsx(User, { className: "size-3.5" }) })), _jsx("span", { className: "text-xs text-muted-foreground hidden sm:inline", children: user.name })] }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-56", children: [_jsx(DropdownMenuLabel, { className: "font-normal", children: _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("p", { className: "text-sm font-medium", children: user.name }), _jsx("p", { className: "text-xs text-muted-foreground", children: user.email })] }) }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: signOut, className: "text-destructive cursor-pointer", children: [_jsx(LogOut, { className: "size-4" }), "Sign out"] })] })] }));
+};

package/dist/index.d.ts

@@ -0,0 +1,68 @@
+export { Sidebar } from "./components/sidebar.js";
+export { ToolPanel } from "./components/tool-panel.js";
+export { ToolPanelLayout } from "./components/tool-panel-layout.js";
+export { MarkdownText, markdownComponents } from "./components/markdown-text.js";
+export { ClientToolExecutor } from "./components/client-tool-executor.js";
+export { AGUIRuntimeProvider, useAGUIAdapter } from "./components/ag-ui-runtime-provider.js";
+export type { AGUIChatConversationFactoryArgs, AGUIHistoryAdapterFactory, } from "./components/ag-ui-runtime-provider.js";
+export { ChatContent, DEFAULT_STARTER_SUGGESTIONS } from "./components/assistant-chat.js";
+export type { ChatContentProps } from "./components/assistant-chat.js";
+export { ChatBubble } from "./components/chat-bubble.js";
+export { ChatHeader } from "./components/chat-header.js";
+export { ComposerAttachment, UserMessageAttachment, userAttachmentComponents, composerAttachmentComponents, } from "./components/chat-attachments.js";
+export { ShowDocumentToolUI } from "./components/show-document-tool-ui.js";
+export { ToolCallCard } from "./components/tool-call-card.js";
+export type { ToolCallStatus } from "./components/tool-call-card.js";
+export { ToolFallback } from "./components/tool-fallback.js";
+export { ConfirmationCard } from "./components/confirmation-card.js";
+export { TooltipIconButton } from "./components/tooltip-icon-button.js";
+export { ComposerContextBadges, SentContextBadges } from "./components/context-badges.js";
+export { ContextPins } from "./components/context-bar.js";
+export { SelectionPopover } from "./components/selection-popover.js";
+export { GlobalSelectionPopover } from "./components/global-selection-popover.js";
+export { LoadingIndicator } from "./components/loading-indicator.js";
+export { ThemeToggle } from "./components/theme-toggle.js";
+export { AppBrand } from "./components/app-brand.js";
+export { CollectionToolbar } from "./components/collection-toolbar.js";
+export { CollectionSearchInput } from "./components/collection-search-input.js";
+export { CollectionFilterBar, type CollectionFilterDefinition, type CollectionFilterOption, type CollectionFilterValue, } from "./components/collection-filter-bar.js";
+export { CollectionSortMenu, type CollectionSortOption, } from "./components/collection-sort-menu.js";
+export { CollectionViewToggle, type CollectionViewMode, } from "./components/collection-view-toggle.js";
+export { CollectionEmptyState } from "./components/collection-empty-state.js";
+export { CollectionSkeleton } from "./components/collection-skeleton.js";
+export { InfiniteScrollSentinel } from "./components/infinite-scroll-sentinel.js";
+export { CollectionSurface } from "./components/collection-surface.js";
+export { ThemeRuntimeProvider, ThemeScope, ThemeDocumentMetadata, useThemeRuntime, } from "./components/theme-runtime-provider.js";
+export { JsonViewer } from "./components/json-viewer.js";
+export { UserMenu } from "./components/user-menu.js";
+export { FormDialog } from "./components/form-dialog.js";
+export { ConfirmDialog } from "./components/confirm-dialog.js";
+export { NameDialog } from "./components/name-dialog.js";
+export { SurfaceCard, surfaceCardVariants } from "./components/surface-card.js";
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, } from "./ui/tooltip.js";
+export { Collapsible, CollapsibleTrigger, CollapsibleContent, } from "./ui/collapsible.js";
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuLabel, } from "./ui/dropdown-menu.js";
+export { Dialog, DialogPortal, DialogOverlay, DialogTrigger, DialogClose, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, } from "./ui/dialog.js";
+export { Popover, PopoverTrigger, PopoverAnchor, PopoverContent } from "./ui/popover.js";
+export { Select, selectClassName } from "./ui/select.js";
+export { useAppStore } from "./lib/app-store.js";
+export { useNavStore, type NavFooterAction } from "./lib/nav-store.js";
+export { useToolPanelStore } from "./lib/tool-panel-store.js";
+export type { ToolPanelContent, PdfHighlightRef, PanelRendererEntry, } from "./lib/tool-panel-store.js";
+export { useSidebarStore, SIDEBAR_WIDTH, RAIL_WIDTH } from "./lib/sidebar-store.js";
+export { useChatBubbleStore } from "./lib/chat-bubble-store.js";
+export { useChatLifecycleStore } from "./lib/chat-lifecycle-store.js";
+export { submitComposerText } from "./lib/composer-submit-store.js";
+export { registerSelectionContextResolver, resolveSelectionContext, type SelectionContextInput, type SelectionContextItem, type SelectionContextResolver, type SelectionContextResult, } from "./lib/selection-context.js";
+export { useThemeStore } from "./lib/theme-store.js";
+export type { ThemeMode } from "./lib/theme-store.js";
+export { mergeThemeDefinitions, resolveThemeRuntime, getEffectiveThemeMode, getThemePreset, } from "./lib/theme-runtime.js";
+export type { ThemeDefinition, ThemeLayer, ResolvedThemeRuntime, ThemeColorSlots, ThemeSidebarSlots, ThemeStatusSlots, ThemeChartSlots, ThemeTypographySlots, ThemeRadiusSlots, ThemeAppSlots, ThemeBranding, } from "./lib/theme-runtime.js";
+export { useDevStore } from "./lib/dev-store.js";
+export { DEFAULT_NAV_CONFIG, findNavItem } from "./lib/nav-config.js";
+export type { NavItem, NavItemAction, NavItemDnd, NavGroup, NavGroupCreateAction, NavMatch, CollapsedRailItem, CollapsedRailContext, } from "./lib/nav-config.js";
+export { usePageTools } from "./lib/use-page-tools.js";
+export { useNewConversation } from "./lib/use-new-conversation.js";
+export { AGUIAdapterSDK } from "./lib/ag-ui-adapter.js";
+export { FileAttachmentAdapter } from "./lib/attachment-adapter.js";
+export { AuthProvider } from "./lib/auth-provider.js";