@decantr/content 3.8.0

package/patterns/agent-swarm-canvas.json

@@ -0,0 +1,136 @@
+{
+  "id": "agent-swarm-canvas",
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Agent Swarm Canvas",
+  "description": "A spatial node-graph canvas where AI agents appear as interactive nodes with real-time status, drag-to-connect edges, zoom/pan navigation, and a minimap for orchestration overview.",
+  "category": "agentic",
+  "tags": [
+    "2026",
+    "agentic",
+    "spatial",
+    "orchestration",
+    "node-graph",
+    "real-time"
+  ],
+  "components": [
+    "AgentNode",
+    "ConnectionPath",
+    "StatusBadge",
+    "CanvasControls",
+    "Minimap",
+    "TaskTooltip"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Full spatial canvas with minimap, control bar, and status overlay — intended as a primary view for agent orchestration dashboards",
+      "layout": {
+        "layout": "spatial",
+        "atoms": "_rel _w100 _h100 _overhidden _bgbg"
+      }
+    },
+    "compact": {
+      "description": "Reduced canvas without minimap or control bar, suitable for embedding in sidebars or secondary panels — agents render as smaller nodes with abbreviated labels",
+      "layout": {
+        "layout": "spatial",
+        "atoms": "_rel _w100 _overhidden _bgbg"
+      }
+    },
+    "readonly": {
+      "description": "Non-interactive snapshot of the agent graph — no drag, no connect, no zoom controls — used for monitoring dashboards and historical playback",
+      "layout": {
+        "layout": "spatial",
+        "atoms": "_rel _w100 _h100 _overhidden _bgbg _ptrnone"
+      }
+    }
+  },
+  "visual_brief": "A dark, full-bleed spatial canvas with floating agent-node cards connected by animated bezier paths. Nodes show colored status rings (idle/running/error). Minimap in bottom-right, control bar bottom-center. Dot-grid background scales with zoom.",
+  "layout_hints": {
+    "container": "borderless",
+    "note": "This is a full-bleed visualization. Do NOT wrap in a d-surface card. Agent nodes float freely within the canvas area.",
+    "node_interaction": "Each agent node card MUST have cursor: pointer. Use d-surface[data-interactive] for clickable nodes. Clicking navigates to agent detail.",
+    "shared_geometry": "Connection paths and agent nodes MUST render in the same transformed coordinate space. Do not scale the SVG and cards separately or the lines will drift away from their nodes during pan and zoom.",
+    "metrics": "Display agent metrics with LABELED text, not icon-only. Good: 'Requests: 142 | Latency: 120ms'. Bad: '⚡ 142 ⬇ 120ms'. Icons without labels are unparseable.",
+    "status_consistency": "All status badges MUST use d-annotation[data-status]. Every status includes a colored dot (8px circle) prefix for visual scanning. Consistent across all agents.",
+    "error_escalation": "Agents with error status should have a subtle red border glow on their card: box-shadow: 0 0 12px color-mix(in srgb, var(--d-error) 25%, transparent).",
+    "directional_start_layout": "Default authored layouts should begin in a readable orchestration flow rather than a random scatter. Favor a left-to-right or top-down pipeline with ingress and routing upstream, synthesis and quality in the middle, and dispatch or guard nodes downstream. Operators can then reposition nodes if needed.",
+    "drag_behavior": "Nodes should be draggable after the initial authored layout loads. Dragging should move the node itself and update connection paths live without breaking the shared canvas transform model.",
+    "node_card": "Agent node cards: min-width 200px, max-width 260px. Layout must be: Row 1: avatar (40px circle) + column(name + agent-id). Row 2: status badge (FULL WIDTH, not beside the name). Row 3+: metrics stacked vertically. The status badge must NEVER share a row with the agent name — it goes on its own row below the name/id, spanning the full card width. Use d-annotation for the badge.",
+    "node_card_sizing": "The name text uses text-sm font-semibold with text-ellipsis overflow-hidden whitespace-nowrap. The agent-id uses text-xs text-muted. Status badge row: flex with gap-2, badge pill-shaped. Metrics: mono-data text-xs, one line per metric. Card padding: 12px. Gap between rows: 8px.",
+    "connection_ports": "Paths should anchor to meaningful node ports rather than guessed center offsets. Choose left/right anchors when the target is primarily horizontal, and top/bottom anchors when the target is primarily vertical. Curves should leave the node orthogonally before bending toward the destination.",
+    "zoom_behavior": "Zoom should feel smooth and continuous, not discrete or jumpy. Prefer cursor-aware scaling on wheel gestures so the point under the cursor stays visually stable while zooming.",
+    "overlay_compactness": "Status overlays should behave like compact floating summaries, not wide banners. Cap overlay width, keep copy terse, and avoid large explanatory paragraphs that compete with the graph."
+  },
+  "default_layout": {
+    "layout": "spatial",
+    "atoms": "_rel _w100 _h100 _overhidden _bgbg",
+    "slots": {
+      "canvas-viewport": "The main infinite-scroll canvas area. Uses CSS transform for zoom/pan. Contains all agent nodes and connection paths positioned absolutely via x/y coordinates. Must handle pointer events for drag-to-connect, pan (middle-click or space+drag), and pinch-to-zoom. Background should render a subtle dot-grid pattern that scales with zoom level.",
+      "agent-node": "Repeating slot — one per agent. Each node is a rounded card (80–120px wide) positioned absolutely on the canvas. Shows agent name, avatar/icon, and a colored status ring: idle (gray/neutral), running (blue/primary with pulse animation), error (red/destructive with shake), complete (green/success with checkmark). Nodes have connection ports (small circles) on left and right edges for drag-to-connect wiring. Clicking a node expands it inline to show current task description and elapsed time. Nodes support drag repositioning.",
+      "connection-line": "SVG path elements drawn between agent-node connection ports. Uses bezier curves (cubic) with a slight droop. Animated dash pattern flows in the direction of data transfer. Line color reflects connection status: active (primary color, animated flow), idle (muted/dashed), error (destructive, static). Hovering a line shows a tooltip with the data payload summary being transferred.",
+      "status-overlay": "A translucent overlay panel anchored to the top-right of the canvas viewport. Shows aggregate swarm stats: total agents, running count, error count, completed count, and overall progress as a thin horizontal bar. Collapses to a single summary badge on compact viewports. Uses backdrop-blur for depth.",
+      "control-bar": "Horizontal toolbar anchored to the bottom-center of the canvas. Contains zoom-in, zoom-out, fit-to-view, and toggle-minimap icon buttons. Also includes a play/pause button for swarm execution and a reset-layout button that auto-arranges nodes using a force-directed algorithm. Buttons use icon-only rendering with tooltips on hover.",
+      "minimap": "A small (160×120px) overview panel anchored to the bottom-right corner. Renders a simplified, zoomed-out view of the entire node graph with colored dots for agents and thin lines for connections. Shows a draggable viewport rectangle indicating the current visible area. Semi-transparent background with subtle border."
+    }
+  },
+  "accessibility": {
+    "role": "application",
+    "aria-label": "Agent orchestration canvas",
+    "announcements": [
+      "Agent {name} status changed to {status}",
+      "Connection established between {source} and {target}",
+      "Swarm execution {started|paused|completed}"
+    ],
+    "keyboard": [
+      "Tab: cycle through agent nodes in DOM order",
+      "Enter: expand selected agent node details",
+      "Space: toggle swarm play/pause",
+      "Arrow keys: pan canvas viewport",
+      "+/-: zoom in/out",
+      "0: fit all agents in view",
+      "Delete: remove selected connection",
+      "Escape: deselect current node or cancel drag"
+    ]
+  },
+  "responsive": {
+    "mobile": "Below 768px the spatial swarm canvas is too cramped to render usefully. Stack agent nodes vertically as a simple status list with one card per node. Hide decorative SVG connection lines, the minimap, and the zoom control bar. No drag-to-connect; a tap opens a detail sheet.",
+    "tablet": "Two-column card grid at tablet viewports. Minimap hidden by default but available from the control bar. Touch gestures: tap-to-select; long-press-then-tap-target to create a connection.",
+    "desktop": "Full spatial canvas with absolute-positioned agent nodes, SVG connection lines, pan+zoom, minimap, and drag-to-connect. This is the canonical layout that delivers the mission-control personality directive."
+  },
+  "motion": {
+    "micro": {
+      "node-hover": "scale(1.05) + glow-intensity 200ms ease-out",
+      "connection-pulse": "opacity 0.3→1→0.3 along path 2s linear infinite"
+    },
+    "transitions": {
+      "node-add": "scale(0) to scale(1) + fade 300ms spring",
+      "node-remove": "scale(1) to scale(0) + fade 200ms ease-in",
+      "layout-shift": "position lerp 500ms ease-in-out"
+    },
+    "ambient": {
+      "connection-flow": "dash-offset animate along path 3s linear infinite",
+      "status-glow": "border-color pulse matching status 2s ease-in-out infinite"
+    }
+  },
+  "interactions": [
+    "drag-nodes",
+    "pan-background",
+    "zoom-scroll",
+    "click-select",
+    "click-connect",
+    "hover-tooltip",
+    "status-pulse",
+    "animate-on-mount",
+    "live-simulation"
+  ],
+  "composition": {
+    "AgentSwarmCanvas": "Viewport(d-section, spatial, full-bleed) > [CanvasLayer + StatusOverlay + ControlBar + Minimap?]",
+    "CanvasLayer": "Canvas(zoomable, pannable) > [AgentNode[] + ConnectionPath[]]",
+    "AgentNode": "Card(d-surface, data-interactive, positioned) > [Name + Avatar + StatusRing(pulse?: running) + TaskTooltip?]",
+    "ConnectionPath": "SVG(bezier, animated-dash) > Path(color: status)",
+    "StatusOverlay": "Panel(d-annotation, backdrop-blur, top-right) > [AgentCount + RunningCount + ErrorCount + ProgressBar]",
+    "ControlBar": "Bar(d-control, bottom-center) > [ZoomIn + ZoomOut + FitView + ToggleMinimap + PlayPause + ResetLayout]"
+  }
+}

package/patterns/agent-timeline.json

@@ -0,0 +1,119 @@
+{
+  "id": "agent-timeline",
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Agent Timeline",
+  "description": "A vertical timeline for agent observability that displays actions, decisions, tool calls, and reasoning steps as collapsible color-coded events with filtering, detail expansion, and summary statistics.",
+  "category": "agentic",
+  "tags": [
+    "2026",
+    "agentic",
+    "timeline",
+    "observability",
+    "tool-calls",
+    "reasoning"
+  ],
+  "components": [
+    "TimelineEvent",
+    "EventDetail",
+    "ToolCallCard",
+    "ReasoningStep",
+    "FilterChip",
+    "TimelineSummary"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Full vertical timeline with summary header, filter bar, and expandable event nodes — intended as a primary observability view or dedicated panel",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap4 _py4"
+      }
+    },
+    "compact": {
+      "description": "Condensed timeline for sidebar placement — events render as single-line items with icon + label only, no inline detail expansion (click opens a popover instead), no summary header",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap1 _py2"
+      }
+    },
+    "live": {
+      "description": "Streaming variant that auto-scrolls to the latest event as it arrives — new events animate in from the bottom with a fade-slide-up, a 'live' indicator pulses at the top, and the summary header updates in real time",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap4 _py4 _overyauto"
+      }
+    }
+  },
+  "visual_brief": "Vertical timeline with a continuous 2px line on the left edge. Color-coded orbs mark each event type (action=cyan, decision=green, error=red, tool_call=purple, reasoning=amber). Cards extend right from the line with colored left-borders. Sticky summary header at top with aggregate stats. Filter chips below header.",
+  "layout_hints": {
+    "vertical_line": "A continuous 2px vertical line runs the FULL height of the timeline, 16px from the left edge. Color: var(--d-border). The line MUST NOT have gaps between events — it connects all events visually.",
+    "orb": "Each event has a 12px diameter colored circle (orb) centered ON the vertical line. The orb is vertically aligned with the FIRST line of text (the badge/timestamp row), not the center of the event block.",
+    "event_colors": "Each event TYPE must have a DISTINCT color. No two types share the same color. Suggested: action=cyan(accent), decision=green(success), error=red(error), warning=amber(warning), tool_call=purple, reasoning=amber/gold, info=blue(info).",
+    "spacing": "Compact event spacing: gap-3 to gap-4 between events. Dense timelines are easier to scan than spacious ones.",
+    "badge_size": "Event type badges use d-annotation with at least 0.7rem font and enough padding to be scannable at speed."
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col _gap4 _py4",
+    "slots": {
+      "summary-header": "A sticky header card at the top of the timeline showing aggregate stats for the current agent session. Displays: total events count, breakdown by type (tool calls, reasoning steps, outputs, errors) as small labeled counts with color-coded dots, total elapsed time, and token usage (input/output tokens). Also shows the agent's name, model identifier, and current status (running/complete/error). In the 'live' preset, the elapsed time and event count update in real time. A small sparkline chart shows event frequency over time (events per second) to visualize bursts of activity.",
+      "filter-bar": "A horizontal scrollable row of FilterChip components for narrowing visible events. Default chips: 'All', 'Tool Calls', 'Reasoning', 'Outputs', 'Errors', 'Decisions'. Chips are toggleable (multiple can be active simultaneously). Active chips use a filled style with the corresponding event-type color; inactive chips use an outline style. Also includes a text search input at the right edge for filtering events by content. Filter state persists across live updates. Chip counts show how many events match each filter (e.g., 'Tool Calls (12)').",
+      "timeline-track": "The vertical spine of the timeline. Renders as a thin continuous line (2px) running vertically down the left side of the event list (24px from the left edge). The line color uses a muted neutral tone with segments that colorize to match adjacent event nodes. Between events, the line can show elapsed time labels if the gap exceeds a configurable threshold (default 5s). At the bottom of a completed timeline, the track terminates with a small square end-cap. During live streaming, the bottom is an animated pulsing dot.",
+      "event-node": "Repeating slot — one per agent action. Each event is a card positioned to the right of the timeline-track, connected by a small horizontal line from the track to the card. The card has a colored left-border indicating event type: tool-call (blue/info), reasoning (purple/accent), output (green/success), error (red/destructive), decision (amber/warning). Each card shows: (1) a type icon matching the color, (2) a one-line summary (e.g., 'Called search_web with query \"decantr patterns\"'), (3) a relative timestamp ('2.3s ago' or '+1.2s'), and (4) a chevron toggle to expand/collapse the detail section. Cards are collapsed by default. Error events auto-expand and have a stronger visual treatment (background tint, bold border). Events animate in with a subtle slide-up + fade when appended in live mode.",
+      "event-detail": "The expandable content area within each event-node. Content varies by event type: For tool-call events — shows the tool name, input parameters as a formatted JSON/key-value block, output/result as a collapsible code block, duration in milliseconds, and token cost. For reasoning events — shows the full reasoning text formatted as markdown with a 'thinking' visual treatment (slightly italic, indented, with a brain icon). For output events — shows the generated text or data, formatted with markdown rendering. For error events — shows the error message, stack trace in a scrollable code block, and a 'retry' button if the error is retryable. For decision events — shows the decision description, alternatives considered as a list, and the selected option highlighted."
+    }
+  },
+  "accessibility": {
+    "role": "feed",
+    "aria-label": "Agent activity timeline",
+    "announcements": [
+      "New event: {type} — {summary}",
+      "Error occurred: {message}",
+      "Agent completed after {duration} with {event_count} events",
+      "Filter applied: showing {type} events only",
+      "Event details expanded for {summary}"
+    ],
+    "keyboard": [
+      "Arrow Up/Down: navigate between timeline events",
+      "Enter: expand/collapse selected event detail",
+      "F: focus the filter bar search input",
+      "1-6: toggle filter chips by position",
+      "Home: jump to first event",
+      "End: jump to latest event",
+      "Escape: collapse all expanded events and clear filters"
+    ]
+  },
+  "responsive": {
+    "mobile": "Timeline track moves to a thin left-edge gutter (8px inset). Event cards span full width with reduced padding. Filter bar scrolls horizontally with momentum. Summary header stacks stats in a 2×2 grid. Event details render in a bottom sheet on tap rather than inline expansion to save vertical space.",
+    "tablet": "Standard vertical layout maintained. Filter bar remains fully visible without scrolling (wraps to second row if needed). Event cards maintain comfortable padding. Summary header displays stats in a single row."
+  },
+  "motion": {
+    "micro": {
+      "event-hover": "translateX(2px) + border-accent 150ms ease-out",
+      "orb-pulse": "scale(1→1.2→1) 2s ease-in-out infinite on active events"
+    },
+    "transitions": {
+      "event-expand": "max-height 0→auto + fade 300ms ease-out",
+      "event-collapse": "max-height auto→0 + fade 200ms ease-in",
+      "new-event": "slide-in-from-top + fade 400ms ease-out"
+    }
+  },
+  "interactions": [
+    "animate-on-mount",
+    "stagger-children",
+    "status-pulse",
+    "real-time-updates",
+    "hover-reveal",
+    "scroll-reveal"
+  ],
+  "composition": {
+    "AgentTimeline": "Container(d-section, flex-col, gap-4) > [TimelineSummary + FilterBar + EventList]",
+    "TimelineSummary": "Card(d-surface, sticky) > [AgentName + ModelId + Status(d-annotation) + EventCounts(d-data) + ElapsedTime(mono-data) + TokenUsage]",
+    "FilterBar": "Row(d-control, scrollable) > FilterChip(toggleable, color: event-type)[]",
+    "EventList": "Track(d-data, vertical-line) > EventNode[]",
+    "EventNode": "Card(d-surface, color-left-border: event-type, collapsible) > [TypeIcon + Summary + Timestamp(mono-data) + ChevronToggle + EventDetail?]",
+    "EventDetail": "Panel(d-data, expandable) > [Content(variant: event-type)]"
+  }
+}

package/patterns/alert-rule-builder.json

@@ -0,0 +1,127 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "alert-rule-builder",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Alert Rule Builder",
+  "description": "Visual condition builder for creating alert rules, filters, or automation triggers using nested AND/OR logic groups with metric selectors, operators, threshold sliders, and live rule testing.",
+  "category": "configuration",
+  "tags": [
+    "2026",
+    "configuration",
+    "alerts",
+    "rules",
+    "conditions",
+    "builder",
+    "monitoring"
+  ],
+  "components": [
+    "RuleGroup",
+    "ConditionRow",
+    "MetricSelector",
+    "OperatorSelector",
+    "ValueInput",
+    "ThresholdSlider",
+    "AddConditionButton",
+    "TestButton"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Condition groups with AND/OR logic toggles between rows — supports one level of nesting with groups rendered as bordered cards containing their conditions",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap4 _p4 _wfull"
+      }
+    },
+    "simple": {
+      "description": "Single flat list of conditions joined by a single logic operator — no nesting or groups, ideal for basic threshold alerts with just one or two conditions",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap3 _p4 _wfull"
+      }
+    },
+    "advanced": {
+      "description": "Deeply nested AND/OR tree with unlimited group depth — groups can contain sub-groups creating a visual tree structure with indentation and connecting lines for complex rule logic",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap4 _p4 _wfull _overflow-y-auto"
+      }
+    }
+  },
+  "visual_brief": "Card-based rule builder with indented groups representing AND/OR logic. The top level is a bordered card (the root group) containing condition rows stacked vertically. Each condition row is a horizontal strip with four inline elements: a metric dropdown selector showing the metric name (e.g., 'CPU Usage', 'Error Rate', 'Latency p99'), an operator dropdown (>, <, =, !=, contains, between), a value input field (numeric or text depending on metric type), and a small circular remove button with an X icon at the right edge. Between each condition row sits a small pill-shaped logic toggle button showing 'AND' or 'OR' in uppercase — clicking toggles between the two. The pill color is blue for AND and orange for OR. Nested groups appear as indented bordered cards within the parent group, with a colored left border matching their logic operator color. An 'Add condition' button with a plus icon sits at the bottom of each group, alongside an 'Add group' button for nesting. The ThresholdSlider variant replaces the plain value input with a slider overlaid on a mini sparkline chart of recent metric data, with a draggable horizontal line showing the threshold position. A prominent 'Test Rule' button at the bottom evaluates the complete rule against recent data and shows a pass (green checkmark) or fail (red X) result with a count of matching data points. The entire builder has a subtle background tint distinguishing it from surrounding content.",
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col _gap4 _p4 _wfull",
+    "slots": {
+      "rule-header": "Top bar showing the rule name as an editable text field, a severity selector (info/warning/critical) as colored radio pills, and a notification channel selector dropdown. The severity pills are blue for info, amber for warning, and red for critical.",
+      "rule-group": "Repeating slot — the primary structural unit. A bordered card with rounded corners and a colored left border (blue for AND group, orange for OR group). Contains a small group-level logic label in the top-left corner ('ALL of' for AND, 'ANY of' for OR). Inside: a vertical stack of ConditionRow slots separated by logic toggle pills, followed by action buttons at the bottom.",
+      "condition-row": "Repeating slot within a rule-group. A horizontal row containing: MetricSelector (dropdown, 180px width, shows metric name with a small type icon), OperatorSelector (dropdown, 100px width, shows operator symbol), ValueInput (text/number input, 120px width) or ThresholdSlider (240px width slider on mini-chart), and a remove button (circular, 24px, muted until hovered). The row has a subtle hover background. Drag handle on the left edge for reordering.",
+      "logic-toggle": "Small pill button (60px wide, 24px tall) centered between condition rows. Shows 'AND' or 'OR' text. Clicking toggles the logic operator for the containing group. Background color matches the operator: blue for AND, orange for OR. Smooth color transition on toggle.",
+      "threshold-slider": "An enhanced value input variant. Shows a mini sparkline chart (240px wide, 48px tall) of recent metric data with a horizontal draggable threshold line. The area above or below the line (depending on operator direction) tints in the severity color. A numeric readout appears above the drag handle. Moving the handle updates the value input in real time.",
+      "test-section": "Bottom area containing the Test button and result display. The 'Test Rule' button is prominent with a play icon. When clicked, it shows a loading spinner, then displays results: a pass/fail badge, the number of data points that matched out of total evaluated, and a small timeline showing when matches occurred in the recent window."
+    }
+  },
+  "responsive": {
+    "mobile": "Condition rows stack vertically — metric selector, operator, and value input each take full width on separate lines. Logic toggles remain between conditions. Nested groups indent with a thinner left border. Threshold slider stretches to full width. Test button is sticky at the bottom of the viewport.",
+    "tablet": "Condition rows display horizontally with slightly compressed widths. Groups maintain full indentation. Test section is visible without scrolling on most rules.",
+    "desktop": "Full horizontal condition rows with generous spacing. Threshold sliders show wider mini-charts. Drag-to-reorder is smooth with drop zone indicators. Multiple levels of nesting display cleanly with indentation guides."
+  },
+  "motion": {
+    "micro": {
+      "row-hover": "background-tint 100ms ease-out",
+      "toggle-flip": "background-color + text transition 200ms ease-out on logic toggle",
+      "remove-hover": "scale(1→1.1) + color shift to red 150ms ease-out"
+    },
+    "transitions": {
+      "row-add": "height 0→auto + fade + slide-down 250ms ease-out",
+      "row-remove": "height auto→0 + fade-out 200ms ease-in",
+      "group-nest": "indent slide-right + border-appear 300ms ease-out",
+      "test-result": "fade + scale(0.95→1) 300ms ease-out"
+    },
+    "ambient": {
+      "threshold-glow": "subtle pulse on threshold line when value is near current metric reading"
+    }
+  },
+  "interactions": [
+    "drag-reorder",
+    "click-select",
+    "inline-edit",
+    "keyboard-navigation",
+    "animate-on-mount",
+    "status-pulse"
+  ],
+  "layout_hints": {
+    "rule_priority": "The user should be able to read rule logic top to bottom before thinking about nested complexity. Group hierarchy and AND/OR relationships must remain unmistakable.",
+    "edit_focus": "Row-level controls should support editing without overpowering the logic structure. Add/remove actions belong at the edge of the builder, not in the center of attention.",
+    "test_feedback": "Rule testing should feel attached to the current rule state, not like a separate diagnostics panel detached from the builder."
+  },
+  "composition": {
+    "RuleBuilder": "Container(d-section, flex-col, gap-4) > [RuleHeader(d-control) + RuleGroup*(d-surface) + TestSection(d-control)]",
+    "RuleHeader": "Row(d-control) > [RuleNameInput + SeverityPills(d-interactive) + ChannelSelector]",
+    "RuleGroup": "Card(d-surface, bordered, indent: depth, color-left-border: logic) > [GroupLabel(d-annotation) + ConditionRow*(d-interactive) + LogicToggle*(d-interactive) + ActionButtons > [AddConditionButton + AddGroupButton]]",
+    "ConditionRow": "Row(d-interactive) > [DragHandle + MetricSelector(d-control) + OperatorSelector(d-control) + ValueInput(d-control) | ThresholdSlider(d-interactive) + RemoveButton]",
+    "TestSection": "Row(d-control) > [TestButton(d-interactive) + TestResult?(d-annotation)]"
+  },
+  "accessibility": {
+    "role": "form",
+    "aria-label": "Alert rule condition builder",
+    "keyboard": [
+      "Tab: move between condition row inputs and controls",
+      "Enter: confirm dropdown selection or trigger test",
+      "Arrow Up/Down: navigate dropdown options in metric and operator selectors",
+      "Delete/Backspace: remove focused condition row (with confirmation)",
+      "Ctrl+G: add a new nested group",
+      "Ctrl+Enter: run rule test",
+      "Escape: close open dropdowns or cancel pending removal"
+    ],
+    "announcements": [
+      "Condition added: {metric} {operator} {value}",
+      "Condition removed from group",
+      "Logic toggled to {AND|OR} for group",
+      "Nested group added with {logic} operator",
+      "Rule test result: {pass|fail}, {matchCount} of {total} data points matched",
+      "Severity set to {level}"
+    ]
+  }
+}

package/patterns/ambient-status-ring.json

@@ -0,0 +1,125 @@
+{
+  "id": "ambient-status-ring",
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Ambient Status Ring",
+  "description": "Always-on status indicator that conveys system state through color, motion, and shape — available as a circular ring, dot, horizontal bar, or ambient background glow.",
+  "category": "ambient",
+  "tags": [
+    "2027",
+    "frontier",
+    "ambient",
+    "status",
+    "indicator",
+    "real-time",
+    "animation",
+    "system-health"
+  ],
+  "components": [
+    "StatusRing",
+    "PulseAnimation",
+    "StateLabel",
+    "DetailTooltip"
+  ],
+  "default_preset": "ring",
+  "presets": {
+    "ring": {
+      "description": "A thin 3px circular ring border that changes color and animation speed based on system state — idle is muted, active rotates, warning pulses amber, error pulses red rapidly",
+      "layout": {
+        "layout": "flex",
+        "atoms": "_inline-flex _items-center _justify-center _rounded-full"
+      }
+    },
+    "dot": {
+      "description": "A small 8px circle suitable for inline status indication next to labels or in table rows — color-coded with optional pulse animation for active/warning/error states",
+      "layout": {
+        "layout": "flex",
+        "atoms": "_inline-flex _items-center _gap-1.5"
+      }
+    },
+    "bar": {
+      "description": "A horizontal strip (4px tall, full container width) that acts as a status border along the top or bottom of a container — color and animation convey state",
+      "layout": {
+        "layout": "flex",
+        "atoms": "_w-full _h-1 _rounded-full"
+      }
+    },
+    "glow": {
+      "description": "A soft ambient background glow applied to a container — uses box-shadow inset or radial gradient to tint the container background with the status color at low opacity",
+      "layout": {
+        "layout": "flex",
+        "atoms": "_relative _rounded-xl _overflow-hidden"
+      }
+    }
+  },
+  "visual_brief": "In ring mode: a circular ring rendered as an SVG circle element with stroke-width: 3px and no fill. The ring's default size is 48px diameter (configurable via CSS custom property --ring-size). The stroke color and animation change based on system state: IDLE — stroke: var(--d-muted) at 40% opacity, no animation, static. ACTIVE — stroke: var(--d-accent), gentle clockwise rotation animation (the stroke has a 25% gap created via stroke-dasharray, and the gap rotates around the circle over an 8s linear infinite cycle), producing a subtle spinning effect. WARNING — stroke: var(--d-warning)/amber, pulse animation where the stroke opacity oscillates between 0.4 and 1.0 over a 2s ease-in-out infinite cycle. ERROR — stroke: var(--d-destructive)/red, rapid pulse animation (opacity 0.3→1→0.3 over 0.5s ease-in-out infinite), combined with a subtle scale pulse (scale 1→1.05→1) for urgency. SUCCESS — stroke: var(--d-success)/green, brief flash animation (opacity 0→1 over 150ms, hold 600ms, then transition to idle state over 300ms). All state transitions use a 400ms color crossfade so the ring never jumps between colors. In dot mode: an 8px circle (border-radius: 50%) with the same color states. Active state uses the pulse scale animation (1→1.3→1, 1.5s). Warning and error use the same pulse timings as ring mode. The dot can be paired with a StateLabel (text-xs, font-medium, same color as dot) to the right. In bar mode: a full-width horizontal rectangle, 4px tall, rounded-full. Color states match ring. Active state adds a shimmer animation — a 50%-width lighter band sweeps left-to-right across the bar every 3s. Warning/error pulses are opacity-based. In glow mode: the status color is applied as an inset box-shadow (0 0 60px 20px {status-color} at 8% opacity) on the container, creating a soft ambient tint. Active state gently oscillates the glow intensity (8%→15%→8% over 4s). Warning intensifies to 20% with 2s pulse. Error intensifies to 25% with 0.5s pulse. The glow is layered behind all content via a ::before pseudo-element with pointer-events: none.",
+  "layout_hints": {
+    "container": "inline for ring/dot, block for bar/glow",
+    "note": "The ring and dot presets are inline elements designed to sit next to text or within flex rows. The bar preset should be placed at the top or bottom edge of a container. The glow preset wraps an existing container and adds the ambient effect.",
+    "state_management": "The component accepts a 'state' prop with values: idle, active, warning, error, success. State transitions should be debounced — brief error flickers (under 500ms) should not trigger the error animation to avoid visual noise.",
+    "color_customization": "Each state maps to a CSS custom property: --status-idle, --status-active, --status-warning, --status-error, --status-success. These default to the d-token equivalents but can be overridden."
+  },
+  "default_layout": {
+    "layout": "flex",
+    "atoms": "_inline-flex _items-center _justify-center _rounded-full",
+    "slots": {
+      "status-ring": "The primary SVG element rendering the status ring. Structure: SVG (width/height: var(--ring-size, 48px), viewBox: '0 0 48 48') > circle (cx: 24, cy: 24, r: 21, fill: none, stroke-width: 3, stroke-linecap: round). The circle uses stroke-dasharray to create the rotating gap effect in active state: dasharray='50 16' (approximately 75% visible, 25% gap on a ~132px circumference). A CSS animation rotates the dashoffset for the spinning effect. The SVG has a drop-shadow filter applied during warning/error states: filter: drop-shadow(0 0 4px {status-color}). Transitions between states use: stroke 400ms ease-in-out, filter 400ms ease-in-out. The ring can optionally contain content in its center (e.g., an icon or number) via a foreignObject or an overlaid HTML element centered with absolute positioning.",
+      "pulse-animation": "Not a separate DOM element but a set of CSS keyframe animations applied to the StatusRing/Dot/Bar/Glow. Defined keyframes: @keyframes ring-rotate { to { stroke-dashoffset: -66 } } — 8s linear infinite for active. @keyframes pulse-opacity { 0%,100% { opacity: 0.4 } 50% { opacity: 1 } } — 2s for warning, 0.5s for error. @keyframes pulse-scale { 0%,100% { transform: scale(1) } 50% { transform: scale(1.05) } } — 0.5s for error only. @keyframes shimmer { 0% { transform: translateX(-100%) } 100% { transform: translateX(200%) } } — 3s for bar active. @keyframes glow-breathe { 0%,100% { opacity: 0.08 } 50% { opacity: 0.15 } } — 4s for glow active. All animations use will-change for GPU acceleration.",
+      "state-label": "Optional text label displayed beside the ring/dot. Renders in text-xs, font-medium with color matching the current status state. Content examples: 'Active', 'Warning: High latency', 'Error: Connection lost', 'Idle'. The label smoothly crossfades its color when state changes (color 400ms ease-in-out). In ring and glow presets, the label is hidden by default. In dot preset, it appears to the right of the dot with gap-1.5. In bar preset, it can be centered above or below the bar.",
+      "detail-tooltip": "A hover/focus-activated tooltip (d-annotation, rounded-lg, shadow-md, p-2, text-xs, max-w-48) that appears above the status indicator. Shows detailed state information: current state name, duration in current state ('Active for 2m 34s'), and optional detail message ('Processing 142 requests'). The tooltip has a small arrow/caret pointing to the indicator. It appears with a 200ms fade-in + translateY(-4px→0) transition on hover after a 500ms delay (to avoid accidental triggers). Disappears immediately on mouse leave with 150ms fade-out."
+    }
+  },
+  "accessibility": {
+    "role": "status",
+    "aria-label": "System status indicator",
+    "aria-live": "polite",
+    "announcements": [
+      "System status: {state}",
+      "Status changed from {previous_state} to {new_state}",
+      "Warning: {detail_message}",
+      "Error: {detail_message}",
+      "System returned to normal"
+    ],
+    "keyboard": [
+      "Tab: focus the status indicator to hear current state via screen reader",
+      "Enter/Space: show detail tooltip when focused",
+      "Escape: dismiss detail tooltip"
+    ]
+  },
+  "responsive": {
+    "mobile": "Ring size reduces to 36px. Dot remains 8px. Bar remains 4px full-width. Glow intensity reduced by 50% to save GPU. State labels hidden on mobile to save space — accessible via tooltip on tap. Tooltip triggered by tap instead of hover.",
+    "tablet": "Full ring size. All presets at standard dimensions. Tooltip on hover with 500ms delay."
+  },
+  "motion": {
+    "micro": {
+      "state-color-change": "stroke/background-color 400ms ease-in-out",
+      "tooltip-appear": "opacity 0→1 + translateY(-4px→0) 200ms ease-out after 500ms delay"
+    },
+    "transitions": {
+      "idle-to-active": "stroke color crossfade 400ms + rotation animation begins with 300ms ease-in ramp",
+      "active-to-idle": "rotation animation decelerates over 600ms + stroke color crossfade 400ms",
+      "any-to-error": "stroke color 200ms (faster for urgency) + pulse begins immediately",
+      "success-flash": "stroke → success color 150ms, hold 600ms, then crossfade to idle 300ms"
+    },
+    "ambient": {
+      "active-rotation": "stroke-dashoffset rotation 8s linear infinite",
+      "warning-pulse": "opacity 0.4→1→0.4 2s ease-in-out infinite",
+      "error-pulse": "opacity 0.3→1→0.3 + scale 1→1.05→1 0.5s ease-in-out infinite",
+      "bar-shimmer": "lighter band translateX sweep 3s ease-in-out infinite",
+      "glow-breathe": "shadow opacity 8%→15%→8% 4s ease-in-out infinite"
+    }
+  },
+  "interactions": [
+    "status-pulse",
+    "real-time-updates",
+    "animate-on-mount"
+  ],
+  "composition": {
+    "AmbientStatusRing": "Wrapper(inline-flex|block, items-center) > [StatusRing(svg|div, animated, state-driven) + StateLabel?(text-xs, state-colored) + DetailTooltip?(d-annotation, on-hover)]",
+    "StatusRing": "SVG(viewBox, circle, stroke-animated) | Div(rounded-full|rounded-bar, bg-state-color, animated)",
+    "PulseAnimation": "CSS-keyframes(applied-to-parent, state-driven, GPU-accelerated)",
+    "StateLabel": "Span(text-xs, font-medium, color: state-color, transition: color 400ms)",
+    "DetailTooltip": "Annotation(d-annotation, rounded-lg, shadow-md, p-2, text-xs) > [StateName + Duration + DetailMessage?]"
+  }
+}