@lukeashford/aurelius 2.20.0 → 3.0.0

package/dist/styles/theme.css

@@ -269,6 +269,36 @@
   }
 }
 
+@keyframes badge-ping {
+  0% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0 rgb(var(--gold-rgb) / 0.4);
+  }
+  40% {
+    transform: scale(1.15);
+    box-shadow: 0 0 0 6px rgb(var(--gold-rgb) / 0);
+  }
+  100% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0 rgb(var(--gold-rgb) / 0);
+  }
+}
+
+@keyframes badge-invert {
+  0% {
+    background-color: var(--color-gold);
+    color: var(--color-obsidian);
+  }
+  40% {
+    background-color: var(--color-obsidian);
+    color: var(--color-gold);
+  }
+  100% {
+    background-color: var(--color-gold);
+    color: var(--color-obsidian);
+  }
+}
+
 /* ===== BASE STYLES (applied via @layer base) ===== */
 @layer base {
   html {

package/llms.md

@@ -101,6 +101,8 @@ Import from `@lukeashford/aurelius`:
 | Accordion | type, defaultValue, value, onValueChange, value, disabled |
 | Alert | variant (info, success, warning, error), title |
 | ArtifactCard | artifact, onExpand, loading |
+| ArtifactGroup | node, onClick |
+| ArtifactVariantStack | node, onExpandArtifact, onGroupClick |
 | AttachmentPreview | attachments, onRemove, removable, maxVisible |
 | AudioCard | src, title, subtitle, playing, controls, volume, muted, loop, mediaClassName, contentClassName, playerProps, height, loading |
 | Avatar | src, alt, name, size (xs, sm, md, lg, xl, 2xl), status (online, offline, busy) |
@@ -151,15 +153,17 @@ Import from `@lukeashford/aurelius`:
 | Toast | children, position (top-right, top-left, bottom-right, bottom-left, top-center, bottom-center), defaultDuration |
 | Tooltip | content, children, open, side (top, right, bottom, left) |
 | VideoCard | src, title, subtitle, aspectRatio (${number}/${number}), playing, controls, light, volume, muted, loop, mediaClassName, contentClassName, playerProps, loading |
-| ArtifactsPanel | artifacts, isOpen, onClose, loading, width, widthPercent, onResizeStart, artifactCount, onExpand |
+| ArtifactsPanel | nodes, loading, artifactCount, onExpand |
 | BranchNavigator | current, total, onPrevious, onNext, size, showIcon |
 | ChatInput | position (centered, bottom), placeholder, helperText, onSubmit, disabled, animate, isStreaming, onStop, attachments, onAttachmentsChange, showAttachmentButton, acceptedFileTypes |
-| ChatInterface | messages, conversationTree, onTreeChange, conversations, onMessageSubmit, onEditMessage, onRetryMessage, onStop, onSelectConversation, onNewChat, isStreaming, isThinking, placeholder, emptyStateHelper, initialSidebarCollapsed, emptyState, showAttachmentButton, enableMessageActions, attachments, onAttachmentsChange, artifacts, isArtifactsPanelOpen, onArtifactsPanelOpenChange, tasks, tasksTitle |
+| ChatInterface | messages, conversationTree, onTreeChange, conversations, onMessageSubmit, onEditMessage, onRetryMessage, onStop, onSelectConversation, onNewChat, isStreaming, isThinking, placeholder, emptyStateHelper, initialSidebarCollapsed, emptyState, showAttachmentButton, enableMessageActions, attachments, onAttachmentsChange, artifactNodes, isArtifactsPanelOpen, onArtifactsPanelOpenChange, tasks, tasksTitle |
 | ChatView | messages, latestUserMessageIndex, isStreaming, isThinking, onScroll |
 | ConversationSidebar | conversations, isCollapsed, onSelectConversation, onNewChat, onToggleCollapse, width, onResizeStart, onExpand |
 | MessageActions | variant (user, assistant), content, onEdit, onRetry, isEditing, onEditingChange, editValue |
 | ThinkingIndicator | isVisible, phraseInterval, phrases |
 | TodosList | tasks, title |
+| ToolPanelContainer | topContent, bottomContent, width, onResizeStart |
+| ToolSidebar | tools, activeTools, onToggleTool |
 | CheckSquareIcon | children |
 | ChevronLeftIcon | children |
 | ChevronRightIcon | children |
@@ -169,6 +173,7 @@ Import from `@lukeashford/aurelius`:
 | ExpandIcon | children |
 | HistoryIcon | children |
 | LayersIcon | children |
+| MediaIcon | children |
 | PlusIcon | children |
 | SquareLoaderIcon | children |
 
@@ -199,6 +204,25 @@ based on the artifact type.
 - **onExpand**: * Callback when the artifact should be expanded/opened
 - **loading**: * Whether the artifact is still loading
 
+**ArtifactGroup**
+Renders a GROUP node as a Card with the group label as title. Inside,
+the first child is shown on top with two offset layers behind it
+(always shown as a visual symbol for "group"). A square count badge
+shows the total items.
+
+- **node**: * The GROUP node to display
+- **onClick**: * Called when the group is clicked (e.g. to navigate into it)
+
+**ArtifactVariantStack**
+Renders a VARIANT_SET node as a Card with the set label as title.
+Children are displayed in a horizontal row inside the card body.
+Children handle their own click behavior (expand for artifacts,
+navigate for groups).
+
+- **node**: * The VARIANT_SET node to display
+- **onExpandArtifact**: * Passed through to ArtifactCard children for expand/open behavior
+- **onGroupClick**: * Passed through to ArtifactGroup children for navigation
+
 **AttachmentPreview**
 - **AttachmentItem.id**: * Unique identifier
 - **AttachmentItem.file**: * The File object
@@ -312,21 +336,22 @@ A card for displaying text content, supporting Markdown and HTML formatting.
 - **contentClassName**: * Optional class name for the content container
 
 **ArtifactsPanel**
-ArtifactsPanel displays rich content artifacts in a slide-in panel.
+ArtifactsPanel displays artifacts in a navigable tree panel.
 
-When collapsed, shows a thin strip with layers icon at top.
-When expanded, shows chevron at top-right to collapse.
-Click on artifacts to expand them to full screen modal.
+This is a content-only component — it fills whatever container it is
+placed in. Opening/closing and resizing are handled by the parent
+ToolPanelContainer and ToolSidebar.
 
-Supports fullWidth artifacts that span all columns in the grid.
+Groups can be entered (breadcrumb navigation) and artifact nodes
+can be expanded to a full-screen modal.
 
-- **artifacts**: * Array of artifacts to display
-- **isOpen**: * Whether the panel is visible
-- **onClose**: * Callback to close/collapse the panel
+Supports zoom controls (0.25x–1x). Zoom uses CSS `transform: scale()`
+on the content wrapper so the entire layout scales uniformly — cards,
+images, gaps, and text all shrink as if the viewer is physically
+moving back from the content.
+
+- **nodes**: * Top-level tree nodes to display in the navigable artifact tree.
 - **loading**: * Whether artifacts are still loading (show skeletons)
-- **width**: * Current width of the panel as CSS value (e.g., "50vw", "400px").
-- **widthPercent**: * Width as percentage of viewport (0-100) for column calculations.
-- **onResizeStart**: * Callback to start resizing
 
 **BranchNavigator**
 BranchNavigator provides a UI for switching between conversation branches.
@@ -369,16 +394,18 @@ ChatInterface is the main orchestrator for a full-featured chat experience.
 Features:
 - ConversationSidebar (left) — collapsible list of past conversations
 - ChatView (center) — main conversation area with smart scrolling
-- ArtifactsPanel (right) — controlled via useArtifacts hook
+- Tool panel system (right) — IntelliJ-style tool sidebar with:
+  - Top group: Chat History, Artifacts Panel (mutually exclusive)
+  - Bottom group: Todo List
+  - Vertical split with draggable divider when both groups are active
+  - Width-resizable tool content area
 - ChatInput — position-aware input that centers in empty state
 - Branching — support for conversation tree with branch navigation
 - Message Actions — copy, edit, retry
 - Thinking Indicator — shown between user message and response
 
-Artifacts are controlled externally via the useArtifacts hook:
-- scheduleArtifact() — adds artifact with loading skeleton
-- showArtifact() — reveals artifact content
-- removeArtifact() — removes artifact on failure
+Artifacts are supplied as a tree of ArtifactNode objects via the
+artifactNodes prop.
 
 - **ChatMessage.id**: * Unique identifier for the message
 - **ChatMessage.variant**: * Whether the message is from the user or the assistant
@@ -404,10 +431,10 @@ Artifacts are controlled externally via the useArtifacts hook:
 - **enableMessageActions**: * Whether to enable message-level actions (copy, edit, retry).
 - **attachments**: * Current attachments for the chat input (controlled).
 - **onAttachmentsChange**: * Called when attachments are added or removed in the chat input.
-- **artifacts**: * Artifacts to display in the side panel. Best managed via the useArtifacts hook and passed here.
-- **isArtifactsPanelOpen**: * Whether the artifacts panel is currently open (controlled).
+- **artifactNodes**: * Top-level artifact tree nodes for the artifacts panel.
+- **isArtifactsPanelOpen**: * Whether the artifacts panel is currently open (controlled). When set, maps to the tool panel system — opens the artifacts tool.
 - **onArtifactsPanelOpenChange**: * Called when the artifacts panel is opened or closed (controlled).
-- **tasks**: * Tasks to display in the todos list below the artifacts panel. Shows a list of tasks with status indicators.
+- **tasks**: * Tasks to display in the todos list tool panel. Shows a list of tasks with status indicators.
 - **tasksTitle**: * Title for the todos list @default "Tasks"
 
 **ChatView**
@@ -480,9 +507,43 @@ The component automatically sorts cancelled/failed tasks to the bottom of their
 - **tasks**: * Array of tasks to display
 - **title**: * Title for the todos list @default "Tasks"
 
+**ToolPanelContainer**
+ToolPanelContainer manages the layout of one or two tool panels
+stacked vertically. When both top and bottom slots are filled, a
+height-adjustable divider appears between them.
+
+It also renders the width-resize handle on its left edge, identical
+to the previous ArtifactsPanel resize behavior.
+
+- **topContent**: * Content for the top tool slot (from the top group). When null, the bottom slot takes full height.
+- **bottomContent**: * Content for the bottom tool slot (from the bottom group). When null, the top slot takes full height.
+- **width**: * Panel width as CSS value (e.g., "50vw")
+- **onResizeStart**: * Callback to start horizontal resizing (width dragger)
+
+**ToolSidebar**
+ToolSidebar renders a vertical strip of tool icon buttons on the right
+side of the chat interface. It follows the IntelliJ pattern:
+
+- Top-aligned group and bottom-aligned group separated by a divider
+- Tools in the same group are mutually exclusive
+- Clicking an active tool closes it; clicking an inactive tool opens it
+- Constant slim width regardless of tool panel state
+
+- **ToolDefinition.id**: * Unique identifier for this tool
+- **ToolDefinition.icon**: * Icon element shown in the sidebar button
+- **ToolDefinition.label**: * Accessible label for the button
+- **ToolDefinition.group**: * Which group the tool belongs to — tools in the same group are mutually exclusive (opening one closes the other).
+- **tools**: * Available tool definitions
+- **activeTools**: * Current state — which tool is open per group
+- **onToggleTool**: * Called when a tool button is clicked (toggle)
+
 **CrossSquareIcon**
 - **variant**: * Visual variant for different states - 'cancelled': subtle ash coloring - 'failed': error red coloring
 
+**MediaIcon**
+Media icon — a film frame with play triangle, representing video and media artifacts.
+
+
 **SquareLoaderIcon**
 Square loading spinner with "snake" animation.
 A golden stroke travels around a square border.
@@ -508,42 +569,6 @@ import { Button, Card, Input, Badge } from '@lukeashford/aurelius'
 
 Import hooks from `@lukeashford/aurelius`:
 
-### useArtifacts
-
-Hook for managing artifacts in the ChatInterface.
-
-Provides methods to control the artifacts panel programmatically,
-designed for event-driven architectures like SSE streams.
-
-**Returns:** `UseArtifactsReturn`
-
-| Property | Type | Description |
-|----------|------|-------------|
-| `artifacts` | `Artifact[]` | Current list of artifacts |
-| `scheduleArtifact` | `(artifact: Omit<Artifact, 'isPending'>) => void` | Schedule a new artifact (adds to list with isPending=true, shows skeleton). |
-| `showArtifact` | `(artifactId: string, artifact: Omit<Artifact, 'id' | 'isPending'>) => void` | Show an artifact (updates existing or adds new with isPending=false). |
-| `removeArtifact` | `(artifactId: string) => void` | Remove an artifact from the list. |
-| `clearArtifacts` | `() => void` | Clear all artifacts |
-
-**Example:**
-
-```tsx
-const { artifacts, scheduleArtifact, showArtifact, removeArtifact } = useArtifacts()
-
-// When SSE operator.started event arrives
-scheduleArtifact({ id: operatorId, type: 'IMAGE' })
-
-// When SSE artifact.created event arrives
-showArtifact(artifactId, {
-  type: 'IMAGE',
-  url: 'https://example.com/image.png',
-  title: 'Generated Image',
-})
-
-// When SSE operator.failed event arrives
-removeArtifact(operatorId)
-```
-
 ### useScrollAnchor
 
 Hook for smart scroll behavior in chat interfaces.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukeashford/aurelius",
-  "version": "2.20.0",
+  "version": "3.0.0",
   "description": "Design system for Aurelius applications — A cohesive visual language for creative technologists",
   "main": "dist/index.js",
   "module": "dist/index.mjs",