@lukeashford/aurelius 2.12.0 → 2.14.0

package/dist/styles/theme.css

@@ -179,6 +179,8 @@
   --animate-slide-out-right: slide-out-right 200ms ease-in;
   --animate-pulse-glow: pulse-glow 2s ease-in-out infinite;
   --animate-cursor-blink: cursor-blink 1s steps(1) infinite;
+  --animate-snake-spin: snake-spin 1.5s linear infinite;
+  --animate-snake-travel: snake-travel 1.5s ease-in-out infinite;
 
   /* ===== LAYOUT TOKENS ===== */
   --container-sm: 640px;
@@ -249,6 +251,24 @@
   }
 }
 
+@keyframes snake-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes snake-travel {
+  0% {
+    stroke-dashoffset: 0;
+  }
+  100% {
+    stroke-dashoffset: -56;
+  }
+}
+
 /* ===== BASE STYLES (applied via @layer base) ===== */
 @layer base {
   html {

package/llms.md

@@ -101,6 +101,7 @@ Import from `@lukeashford/aurelius`:
 | Accordion | type, defaultValue, value, onValueChange, value, disabled |
 | Alert | variant (info, success, warning, error), title |
 | AttachmentPreview | attachments, onRemove, removable, maxVisible |
+| AudioCard | src, title, subtitle, playing, controls, volume, muted, loop, mediaClassName, contentClassName, playerProps |
 | 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) |
@@ -131,6 +132,7 @@ Import from `@lukeashford/aurelius`:
 | 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 |
 | SectionHeading | level (h2, h3) |
 | Select | error, options |
 | Skeleton | children |
@@ -146,14 +148,26 @@ 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 |
-| ArtifactsPanel | artifacts, isOpen, onClose, isLoading, width, onResizeStart, artifactCount, onExpand |
+| ArtifactsPanel | artifacts, isOpen, onClose, isLoading, width, widthPercent, onResizeStart, 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 |
+| 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 |
 | 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 |
+| CheckSquareIcon | children |
+| ChevronLeftIcon | children |
+| ChevronRightIcon | children |
+| CloseIcon | children |
+| CrossSquareIcon | variant |
+| EmptySquareIcon | children |
+| ExpandIcon | children |
+| HistoryIcon | children |
+| LayersIcon | children |
+| PlusIcon | children |
+| SquareLoaderIcon | children |
 
 ### Component Notes
 
@@ -213,6 +227,21 @@ Import from `@lukeashford/aurelius`:
 - **onOpenChange**: Callback when open state changes
 - **closeOnClickOutside**: Close when clicking outside
 
+**ScriptCard**
+ScriptCard displays a formatted movie/video script.
+
+Follows standard screenplay formatting conventions:
+- Scene headings: uppercase, gold, left-aligned
+- Action: silver, full width
+- Character names: uppercase, centered-left
+- Dialogue: indented from both sides
+- Transitions: uppercase, right-aligned
+
+- **title**: * Title of the script (shown at top)
+- **subtitle**: * Subtitle/metadata (e.g., "30-second spot • Directed by AI Creative")
+- **elements**: * Array of script elements in order
+- **maxHeight**: * Maximum height before scrolling (default: 16rem / 256px)
+
 **Stepper**
 - **steps**: Array of steps. Each requires: id (string | number), label (string).
 - **currentStep**: ID of the current step (must match a step.id from the steps array).
@@ -230,12 +259,16 @@ ArtifactsPanel displays rich content artifacts in a slide-in 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.
+
+Supports fullWidth artifacts that span all columns in the grid.
 
 - **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 (when expanded)
+- **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**
@@ -317,6 +350,8 @@ Artifacts are controlled externally via the useArtifacts hook:
 - **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).
 - **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.
+- **tasksTitle**: * Title for the todos list @default "Tasks"
 
 **ChatView**
 ChatView displays a conversation thread with smart scrolling behavior.
@@ -345,7 +380,7 @@ When expanded, shows chevron at top-left to collapse.
 - **onSelectConversation**: * Callback when a conversation is selected
 - **onNewChat**: * Callback when "New Chat" is clicked
 - **onToggleCollapse**: * Callback to toggle collapse state
-- **width**: * Current width of the sidebar (when expanded)
+- **width**: * Current width of the sidebar (when expanded). Accepts CSS width value (e.g., "15vw", "256px").
 - **onResizeStart**: * Callback to start resizing
 
 **MessageActions**
@@ -365,6 +400,35 @@ but has not yet started streaming tokens. It cycles through flavorful "thinking"
 - **phraseInterval**: * Interval between phrase changes in ms @default 2500
 - **phrases**: * Custom phrases to cycle through (defaults to built-in phrases)
 
+**TodosList**
+TodosList displays a structured list of tasks with status indicators.
+
+Features:
+- Nested tasks with indentation
+- Status indicators: done (checkmark), in_progress (snake animation), pending (empty), cancelled, failed
+- Done tasks are crossed out with golden checkmark
+- Cancelled/failed tasks are crossed out with subtle styling and sorted to bottom of their local group
+- Max 1/4 screen height with scroll
+- Subtasks appear when parent task is in_progress or done
+
+The component automatically sorts cancelled/failed tasks to the bottom of their local group
+(not globally), so just changing a task's status will reorder it appropriately.
+
+- **Task.id**: * Unique identifier for the task
+- **Task.label**: * Task description text
+- **Task.status**: * Current status of the task
+- **Task.subtasks**: * Optional subtasks (shown when parent is in_progress or done)
+- **tasks**: * Array of tasks to display
+- **title**: * Title for the todos list @default "Tasks"
+
+**CrossSquareIcon**
+- **variant**: * Visual variant for different states - 'cancelled': subtle ash coloring - 'failed': error red coloring
+
+**SquareLoaderIcon**
+Square loading spinner with "snake" animation.
+A golden stroke travels around a square border.
+
+
 
 ### Component usage example
 

package/package.json

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