@lukeashford/aurelius 2.19.0 → 2.21.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

@@ -100,15 +100,17 @@ Import from `@lukeashford/aurelius`:
 |-----------|-------|
 | Accordion | type, defaultValue, value, onValueChange, value, disabled |
 | Alert | variant (info, success, warning, error), title |
-| ArtifactCard | artifact, onExpand, isLoading |
+| 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 |
+| 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) |
 | Badge | variant (default, gold, success, error, warning, info) |
 | BrandIcon | size (sm, md, lg), variant (solid, outline) |
 | Breadcrumb | separator, current |
 | Button | variant (primary, important, elevated, outlined, featured, ghost, danger), size (sm, md, lg, xl), loading |
-| Card | variant (default, elevated, outlined, ghost, featured), interactive, selected, noPadding, isLoading, title, subtitle, action, align, aspect, position |
+| Card | variant (default, elevated, outlined, ghost, featured), interactive, selected, noPadding, loading, title, subtitle, action, align, aspect, position |
 | Checkbox | label |
 | Col | span, offset, order |
 | ColorSwatch | color, label |
@@ -118,7 +120,7 @@ Import from `@lukeashford/aurelius`:
 | Drawer | isOpen, onClose, position (left, right, top, bottom), title, size, children, className |
 | FileChip | name, size, type, status (pending, uploading, complete, error), previewUrl, onRemove, removable, error |
 | HelperText | error |
-| ImageCard | src, alt, title, subtitle, aspectRatio (${number}/${number}), objectFit, overlay, mediaClassName, contentClassName |
+| ImageCard | src, alt, title, subtitle, aspectRatio (${number}/${number}), objectFit, overlay, mediaClassName, contentClassName, loading |
 | Input | error, leadingIcon, trailingIcon |
 | InputGroup | children |
 | Label | required |
@@ -129,12 +131,12 @@ Import from `@lukeashford/aurelius`:
 | Modal | isOpen, onClose, title, children, className |
 | Navbar | fixed, bordered, position, active, active |
 | Pagination | page, totalPages, onPageChange, siblingCount, showEdges |
-| PdfCard | src, title, subtitle, height, mediaClassName, contentClassName |
+| PdfCard | src, title, subtitle, height, mediaClassName, contentClassName, loading |
 | Popover | children, trigger, position (top, bottom, left, right), align (start, center, end), open, onOpenChange, closeOnClickOutside |
 | Progress | value, max, size (sm, md, lg), variant (default, success, warning, error), showValue, formatValue, indeterminate |
 | Radio | label |
 | Row | gutter, gutterX, gutterY, justify (start, center, end, between, around, evenly), align (start, center, end, stretch, baseline) |
-| ScriptCard | title, subtitle, elements, maxHeight |
+| ScriptCard | title, subtitle, elements, maxHeight, loading |
 | SectionHeading | level (h2, h3) |
 | Select | error, options |
 | Skeleton | children |
@@ -146,20 +148,22 @@ Import from `@lukeashford/aurelius`:
 | Switch | checked, defaultChecked, onCheckedChange, label |
 | Table | responsive, hoverable, selected, sortable, sortDirection |
 | Tabs | defaultValue, value, onValueChange, value, value, forceMount |
-| TextCard | content, title, subtitle, isMarkdown, maxHeight, contentClassName |
+| TextCard | content, title, subtitle, isMarkdown, maxHeight, contentClassName, loading |
 | Textarea | error |
 | 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 |
-| ArtifactsPanel | artifacts, isOpen, onClose, isLoading, width, widthPercent, onResizeStart, artifactCount, onExpand |
+| VideoCard | src, title, subtitle, aspectRatio (${number}/${number}), playing, controls, light, volume, muted, loop, mediaClassName, contentClassName, playerProps, loading |
+| ArtifactsPanel | nodes, artifacts, 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, artifacts, 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 |
 
@@ -197,7 +202,26 @@ based on the artifact type.
 - **Artifact.scriptElements**: * For html artifacts - structured script elements (used by ScriptCard)
 - **artifact**: * The artifact object to display
 - **onExpand**: * Callback when the artifact should be expanded/opened
-- **isLoading**: * Whether the artifact is still loading
+- **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
@@ -312,21 +336,26 @@ 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.
+When provided with `nodes`, it renders a tree-aware, navigable panel
+where groups can be entered (breadcrumb navigation) and artifacts
+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
-- **isLoading**: * 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
+When provided with flat `artifacts`, it renders them in a simple grid.
+
+Supports zoom controls (0.25x–1x) in tree mode. 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. When provided, the panel renders a navigable artifact tree instead of a flat list.
+- **artifacts**: * Array of flat artifacts to display (legacy/simple mode). Ignored when `nodes` is provided.
+- **loading**: * Whether artifacts are still loading (show skeletons)
 
 **BranchNavigator**
 BranchNavigator provides a UI for switching between conversation branches.
@@ -369,7 +398,11 @@ 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
@@ -405,9 +438,10 @@ Artifacts are controlled externally via the useArtifacts hook:
 - **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 tree-aware navigation. When provided, the panel renders a navigable tree instead of a flat list.
+- **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 +514,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.

package/package.json

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