@iloveagents/foundry-web-ui 0.26.0 → 0.27.0

package/dist/workbench/workbench-styles.js

@@ -0,0 +1,290 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function WorkbenchStyles() {
+    return (_jsx("style", { children: `
+        .workbench-preview [data-panel-resize] {
+          width: 12px;
+          right: 0 !important;
+          z-index: 40;
+          touch-action: none;
+          background: transparent;
+          outline: none;
+        }
+        .workbench-preview [data-panel-resize] > div { display: none; }
+        .workbench-preview [data-panel-resize]::after {
+          content: "";
+          position: absolute;
+          top: 50%;
+          left: 3px;
+          width: 6px;
+          height: 56px;
+          transform: translateY(-50%);
+          border-radius: 999px;
+          background: var(--border);
+          box-shadow: 0 1px 2px #00000014;
+          opacity: 0;
+          transition: opacity 120ms ease;
+        }
+        .workbench-preview [data-panel-resize]:hover::after,
+        .workbench-preview [data-panel-resize]:focus-visible::after,
+        .workbench-preview [data-panel-resize]:active::after { opacity: 1; }
+        .workbench-preview select:not([multiple]):not([size]),
+        .workbench-preview select[size="1"]:not([multiple]) {
+          appearance: none;
+          padding-right: 36px;
+          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364758b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+          background-repeat: no-repeat;
+          background-position: right 12px center;
+          background-size: 16px 16px;
+        }
+        .preview-account-compact button > span:not(.sr-only) { display: none; }
+        .workbench-preview #preview-assistant textarea::placeholder {
+          font-size: 14px;
+          font-weight: 400;
+          color: color-mix(in srgb, var(--muted-foreground) 65%, var(--background));
+          opacity: 1;
+        }
+        .workbench-preview #preview-assistant button[aria-label="Add to this message"] {
+          width: 32px;
+          height: 32px;
+          margin-left: -8px;
+          padding: 0;
+        }
+        .workbench-preview #preview-assistant button[aria-label="Add to this message"] svg {
+          width: 16px;
+          height: 16px;
+        }
+
+        .workbench-preview #preview-assistant button[aria-label="Send message"],
+        .workbench-preview #preview-assistant button[aria-label="Stop generating"] {
+          width: 32px;
+          height: 32px;
+          min-width: 32px;
+          padding: 0;
+        }
+
+        .workbench-preview .preview-mobile-navigation { display: none; }
+        @media (max-width: 767px) {
+          .workbench-preview .preview-mobile-navigation { display: inline-flex; }
+        }
+        .workbench-preview [data-chat-collapsed="true"] [data-chat-header] button,
+        .workbench-preview [data-chat-rail] button {
+          width: 36px;
+          max-width: 36px;
+          flex-shrink: 0;
+          padding: 8px;
+        }
+
+        .workbench-preview [data-chat-composer-divider] { display: none; }
+        .workbench-preview [data-global-chat] section[aria-label="Chat history"] {
+          width: 100%; max-width: 48rem; margin-left: auto; margin-right: auto;
+          box-sizing: border-box;
+        }
+        .workbench-preview [data-global-chat] form { border-radius: 16px; }
+        /* One motion treatment for navigation and both working panes. */
+        .workbench-preview [data-sidebar-surface],
+        .workbench-preview [data-panel-motion] {
+          transition: width 200ms ease-in-out, min-width 200ms ease-in-out;
+        }
+        .workbench-preview [data-resizing] [data-panel-motion] { transition: none; }
+        @media (prefers-reduced-motion: reduce) {
+          .workbench-preview [data-sidebar-surface],
+          .workbench-preview [data-panel-motion] { transition: none; }
+        }
+        .workbench-preview [data-sidebar-collapsed] button,
+        .workbench-preview [data-sidebar-collapsed] a {
+          width: 36px; height: 36px; min-width: 36px; padding: 8px;
+          display: inline-flex; align-items: center; justify-content: center;
+          align-self: center; border-radius: 8px;
+        }
+        .workbench-preview [data-sidebar-collapsed] svg {
+          width: 18px; height: 18px; stroke-width: 2;
+        }
+        .workbench-preview {
+          --workbench-header-height: 60px;
+          --sidebar: color-mix(in srgb, var(--background) 98.5%, var(--foreground) 1.5%);
+          background: var(--sidebar);
+          --workbench-outline: color-mix(in srgb, var(--sidebar-ring) 28%, transparent);
+          padding: 8px 8px 8px 0;
+        }
+        .workbench-preview [data-workbench-surface] {
+          position: relative;
+          border-radius: 12px;
+          background: var(--background);
+        }
+        .workbench-preview [data-workbench-surface]::after {
+          content: "";
+          position: absolute;
+          inset: 0;
+          pointer-events: none;
+          border: 1px solid var(--workbench-outline);
+
+          border-radius: inherit;
+          z-index: 30;
+        }
+        .workbench-preview #preview-assistant::after {
+          content: "";
+          position: absolute;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          width: 1px;
+          pointer-events: none;
+          background: color-mix(in srgb, var(--border) 55%, transparent);
+        }
+
+        @container hdr (max-width: 700px) {
+          .workbench-preview [data-entity-header-identity] {
+            flex-basis: 100%;
+          }
+          .workbench-preview [data-entity-header-identity] h1 {
+            min-width: 0;
+          }
+        }
+        .workbench-preview [data-navigation-header],
+        .workbench-preview [data-chat-header] {
+          height: var(--workbench-header-height);
+          min-height: var(--workbench-header-height);
+          box-sizing: border-box;
+          padding-top: 0;
+          padding-bottom: 0;
+          align-items: center;
+        }
+        .workbench-preview [data-navigation-header] button,
+        .workbench-preview [data-chat-header] button {
+          height: 36px;
+          min-width: 36px;
+          align-items: center;
+          justify-content: center;
+          border-radius: 8px;
+        }
+        .workbench-preview [data-navigation-header] button,
+        .workbench-preview [data-chat-header] button,
+        .workbench-preview [data-chat-rail] button {
+          color: var(--muted-foreground);
+          background-color: transparent;
+        }
+        .workbench-preview [data-navigation-header] button:hover,
+        .workbench-preview [data-chat-header] button:hover,
+        .workbench-preview [data-chat-rail] button:hover {
+          color: var(--foreground);
+          background-color: var(--muted);
+        }
+        .workbench-preview [data-navigation-header] button svg,
+        .workbench-preview [data-chat-header] button svg,
+        .workbench-preview [data-content-collapse] svg,
+        .workbench-preview [data-chat-rail] button svg {
+          width: 18px;
+          height: 18px;
+          stroke-width: 2;
+          flex-shrink: 0;
+        }
+        .workbench-preview [data-content-collapse] {
+          position: absolute;
+          top: calc((var(--workbench-header-height) - 36px) / 2);
+          right: var(--workbench-inline-padding, 16px);
+          width: 36px;
+          height: 36px;
+          padding: 8px;
+          z-index: 20;
+        }
+        .workbench-preview [data-working-content]:has(> [data-content-collapse]) [data-preview-entity-header] > [data-entity-header-row] {
+          padding-right: var(--workbench-header-actions-inset, calc(var(--workbench-inline-padding, 16px) + 44px));
+        }
+        .workbench-preview [data-working-content]:not(:has([data-entity-header-row])):not([data-item-panel-open]) {
+          padding-top: var(--workbench-header-height);
+        }
+        @media print {
+          .workbench-preview [data-content-collapse] { display: none; }
+        }
+        .workbench-preview [data-conversation-row] {
+          color: var(--sidebar-foreground);
+          font-size: 14px;
+          line-height: 20px;
+        }
+        /* Preview-only hierarchy: workspace title first, quiet section labels,
+           and one consistent rhythm for conversation and content rows. */
+        .workbench-preview [data-nav-group-header],
+        .workbench-preview [data-conversation-section-label] {
+          min-height: 32px;
+          gap: 0;
+          background: transparent;
+          font-size: 12px;
+          font-weight: 500;
+          line-height: 16px;
+          letter-spacing: normal;
+          text-transform: none;
+          color: var(--muted-foreground);
+        }
+        .workbench-preview [data-nav-group-header] span:not([data-nav-status-dot]) {
+          font-size: inherit;
+          font-weight: inherit;
+          letter-spacing: inherit;
+          text-transform: none;
+          color: inherit;
+        }
+        .workbench-preview [data-nav-group-header] > span[aria-hidden="true"] {
+          display: none;
+        }
+        .workbench-preview [data-nav-group-label] > div:has(> [data-nav-group-header]) {
+          padding-top: 18px;
+          padding-bottom: 2px;
+        }
+        .workbench-preview [data-conversation-row],
+        .workbench-preview [data-sidebar-surface]:not([data-sidebar-collapsed]) [data-nav-depth] {
+          min-height: 36px;
+          padding-top: 6px;
+          padding-bottom: 6px;
+          gap: 10px;
+          border-radius: 8px;
+        }
+        .workbench-preview:not([data-workspace-navigation]) [data-sidebar-surface]:not([data-sidebar-collapsed]) [data-nav-depth="0"] {
+          padding-left: 12px;
+        }
+        .workbench-preview:not([data-workspace-navigation]) [data-sidebar-surface]:not([data-sidebar-collapsed]) [data-nav-depth="0"] > [data-nav-twisty-cell]:not(:has([data-nav-twisty])) {
+          display: none;
+        }
+        .workbench-preview [data-sidebar-surface]:not([data-sidebar-collapsed]) div[data-nav-depth] {
+          padding-top: 0;
+          padding-bottom: 0;
+        }
+        .workbench-preview:not([data-workspace-navigation]) [data-sidebar-surface]:not([data-sidebar-collapsed]) div[data-nav-depth="0"] {
+          padding-left: 0;
+        }
+        .workbench-preview:not([data-workspace-navigation]) [data-sidebar-surface]:not([data-sidebar-collapsed]) div[data-nav-depth="0"] > button:not([data-nav-twisty]) {
+          padding-left: 12px;
+          min-height: 36px;
+          gap: 10px;
+        }
+        [data-workspace-navigation] [data-nav-group-label="Spaces"] > :first-child,
+        .workbench-preview [data-sidebar-surface] nav > [data-nav-group-label]:first-child > div:has(> [data-nav-group-header]) {
+          padding-top: 0;
+        }
+        [data-workspace-navigation] [data-nav-group-label="Spaces"] [data-nav-depth="0"] > button {
+          font-size: 15px;
+          font-weight: 600;
+          letter-spacing: -0.015em;
+          line-height: 22px;
+        }
+        [data-workspace-navigation] [data-nav-group-label="Recent chats"] > :first-child {
+          padding-top: 10px;
+        }
+        [data-workspace-navigation] [data-nav-group-label="Content"] {
+          margin-top: 0;
+        }
+
+        [data-workspace-navigation] [data-sidebar-surface]:not([data-sidebar-collapsed]) [data-nav-group-label="Content"] button[data-nav-depth],
+        [data-workspace-navigation] [data-sidebar-surface]:not([data-sidebar-collapsed]) [data-nav-group-label="Content"] div[data-nav-depth] > button:not([data-nav-twisty]) {
+          padding-left: calc(32px + var(--nav-depth, 0) * 16px);
+        }
+        [data-workspace-navigation] [data-sidebar-surface]:not([data-sidebar-collapsed]) [data-nav-group-label="Content"] [data-nav-depth] > [data-nav-twisty-cell] {
+          left: calc(12px + var(--nav-depth, 0) * 16px);
+        }
+
+        @media (pointer: coarse) {
+          .workbench-preview [data-conversation-row],
+          .workbench-preview [data-sidebar-surface]:not([data-sidebar-collapsed]) [data-nav-depth] {
+            min-height: 44px;
+          }
+        }
+      ` }));
+}

package/dist/workbench/workbench.d.ts

@@ -0,0 +1,5 @@
+import { type ReactNode } from "react";
+export declare function WorkbenchPreview({ page, chatOnly: chatRoute, }: {
+    page: ReactNode;
+    chatOnly?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/workbench/workbench.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { WorkbenchNavigation } from "./navigation.js";
+import { WorkbenchChatHeader } from "./chat-header.js";
+import { WorkbenchContentPane } from "./content-pane.js";
+import { ChatResizeHandle } from "./chat-resize-handle.js";
+import { WelcomeIntro } from "./welcome-intro.js";
+import { useWorkbenchState } from "./use-workbench-state.js";
+import { WorkbenchStyles } from "./workbench-styles.js";
+import { Button } from "@iloveagents/foundry-web-primitives";
+import { ChatContent, TooltipIconButton } from "../index.js";
+import { FileText, MessageSquare, Menu } from "lucide-react";
+import { ConversationHistory } from "./conversation-history.js";
+export function WorkbenchPreview({ page, chatOnly: chatRoute = false, }) {
+    const { panelOpen, chatOnly, pageLabel, chatWidth, collapsed, setCollapsed, compactPane, setCompactPane, contentCollapsed, setContentCollapsed, contentHidden, historyOpen, emptyChat, showHistory, spaciousChat, returnToChat, openHistory, historyShortcut, toggleNavigation, navGroups, workspaceGroups, staticNavigationGroups, closePanel, startChat, } = useWorkbenchState(chatRoute);
+    const buttonClass = "inline-flex items-center justify-center rounded-lg p-2 text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-2 focus-visible:outline-primary";
+    return (_jsxs("div", { className: "workbench-preview flex min-h-0 flex-1 overflow-hidden", "data-workspace-navigation": workspaceGroups ? "true" : undefined, children: [_jsx(WorkbenchStyles, {}), _jsx(WorkbenchNavigation, { groups: staticNavigationGroups, workspace: !!workspaceGroups, onNewConversation: startChat }), _jsxs("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden", "data-workbench-surface": true, role: "region", "aria-label": "Workspace working area", children: [chatWidth.compact && (_jsxs("div", { className: "flex shrink-0 items-center gap-1 border-b border-border px-2 py-1", role: "group", "aria-label": "Workspace panes", children: [_jsx(Button, { variant: "ghost", size: "icon", className: "preview-mobile-navigation size-11", "aria-label": "Open navigation", onClick: toggleNavigation, children: _jsx(Menu, { className: "size-4" }) }), ["content", "chat"]
+                                .filter((pane) => !chatOnly || pane === "chat")
+                                .map((pane) => (_jsxs(Button, { variant: "ghost", className: "h-11 gap-1.5 px-3 aria-pressed:bg-muted", "aria-pressed": chatOnly || compactPane === pane, "aria-controls": pane === "chat" ? "preview-assistant" : "preview-content", onClick: () => setCompactPane(pane), children: [pane === "chat" ? (_jsx(MessageSquare, { className: "size-4" })) : (_jsx(FileText, { className: "size-4" })), pane === "chat" ? "Chat" : "Content"] }, pane)))] })), _jsxs("div", { ref: chatWidth.containerRef, className: "relative flex min-h-0 min-w-0 flex-1 overflow-x-auto", children: [_jsxs("section", { id: "preview-assistant", "data-panel-motion": true, "data-global-chat": spaciousChat || undefined, "data-chat-collapsed": collapsed ? "true" : undefined, inert: chatWidth.compact && !chatOnly && compactPane !== "chat", "aria-label": "Assistant conversation", className: "relative flex min-h-0 shrink-0 flex-col", style: {
+                                    display: chatWidth.compact && !chatOnly && compactPane !== "chat" ? "none" : "flex",
+                                    width: chatWidth.compact || chatOnly
+                                        ? "100%"
+                                        : collapsed
+                                            ? 44
+                                            : contentCollapsed
+                                                ? "calc(100% - 44px)"
+                                                : chatWidth.width,
+                                    background: "var(--background)",
+                                }, children: [_jsx(WorkbenchChatHeader, { collapsed: collapsed, chatWidth: chatWidth, buttonClass: buttonClass, toggleNavigation: toggleNavigation, setCollapsed: setCollapsed, showHistory: showHistory, startChat: startChat, returnToChat: returnToChat, openHistory: openHistory, chatOnly: chatOnly, setContentCollapsed: setContentCollapsed }), !collapsed && showHistory && (_jsx(ConversationHistory, { groups: navGroups, workspaceId: workspaceGroups?.[0]?.meta?.exclusiveRootId, onClose: returnToChat, showBack: true })), !chatWidth.compact && !collapsed && !contentCollapsed && (_jsx(ChatResizeHandle, { chatWidth: chatWidth })), _jsx("div", { className: "min-h-0 flex-1 flex-col", style: {
+                                            display: collapsed || showHistory ? "none" : "flex",
+                                            paddingBottom: spaciousChat && emptyChat && !historyOpen ? "clamp(32px, 10vh, 96px)" : undefined,
+                                        }, children: _jsx(ChatContent, { centerComposer: spaciousChat && emptyChat && !historyOpen, composerIntro: spaciousChat && emptyChat ? (_jsx(WelcomeIntro, { navGroups: navGroups, historyShortcut: historyShortcut })) : undefined, placeholder: chatOnly ? "Ask anything" : "Ask about this page…", compactComposer: !spaciousChat, hideCurrentPageBadge: true, showPinButton: false, starterSuggestions: [], emptyState: _jsxs("div", { className: "flex min-h-full flex-col justify-center gap-3 px-6 py-8", children: [_jsx("h1", { className: "text-lg font-semibold tracking-tight", children: "What would you like to get done?" }), _jsx("p", { className: "max-w-sm text-sm leading-relaxed text-muted-foreground", children: pageLabel && !pageLabel.startsWith("/") ? (_jsxs(_Fragment, { children: ["Work with ", _jsx("span", { className: "font-medium text-foreground", children: pageLabel }), " ", "or across your spaces: find information, create or edit content, and run actions."] })) : ("Find information, create or edit content, and run actions across your spaces.") }), _jsx("p", { className: "max-w-sm text-xs leading-relaxed text-muted-foreground", children: "Your conversation continues as you browse. Select text or a field to work more specifically." }), historyShortcut] }) }) })] }), _jsx(WorkbenchContentPane, { contentHidden: contentHidden, panelOpen: panelOpen, chatWidth: chatWidth, contentCollapsed: contentCollapsed, collapsed: collapsed, buttonClass: buttonClass, setCollapsed: setCollapsed, setContentCollapsed: setContentCollapsed, closePanel: closePanel, page: page }), contentCollapsed && !chatOnly && !chatWidth.compact && (_jsx("aside", { "aria-label": "Collapsed content", className: "flex w-11 shrink-0 flex-col items-center", style: { width: 44 }, children: _jsx("div", { className: "flex h-full w-full flex-col items-center", "data-chat-rail": true, children: _jsx("div", { className: "flex items-center justify-center", style: { height: 60 }, children: _jsx(TooltipIconButton, { tooltip: "Expand content", className: buttonClass, "aria-label": "Expand content", onClick: () => setContentCollapsed(false), children: _jsx(FileText, { size: 18 }) }) }) }) }))] })] })] }));
+}

package/dist/workbench.d.ts

@@ -0,0 +1,2 @@
+export { WorkbenchPreview } from "./workbench/workbench.js";
+export { ConversationHistory } from "./workbench/conversation-history.js";

package/dist/workbench.js

@@ -0,0 +1,2 @@
+export { WorkbenchPreview } from "./workbench/workbench.js";
+export { ConversationHistory } from "./workbench/conversation-history.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iloveagents/foundry-web-ui",
-  "version": "0.26.0",
+  "version": "0.27.0",
   "license": "MIT",
   "description": "React agent UI core for Foundry UI — chat, composer, AG-UI adapter for assistant-ui, tool cards, panels, sidebar, theme runtime, and UI stores.",
   "keywords": [
@@ -31,7 +31,11 @@
       "types": "./dist/chart.d.ts",
       "import": "./dist/chart.js"
     },
-    "./styles.css": "./dist/styles.css"
+    "./styles.css": "./dist/styles.css",
+    "./workbench": {
+      "types": "./dist/workbench.d.ts",
+      "import": "./dist/workbench.js"
+    }
   },
   "files": [
     "dist",
@@ -76,8 +80,8 @@
     "recharts": "^3.10.1",
     "remark-gfm": "^4.0.0",
     "tailwind-merge": "^3.5.0",
-    "@iloveagents/foundry-agent": "^0.26.0",
-    "@iloveagents/foundry-web-primitives": "^0.26.0"
+    "@iloveagents/foundry-agent": "^0.27.0",
+    "@iloveagents/foundry-web-primitives": "^0.27.0"
   },
   "devDependencies": {
     "@ag-ui/client": "^0.0.52",