@decantr/content 3.8.0

package/patterns/moderation-queue-item.json

@@ -0,0 +1,129 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "moderation-queue-item",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Moderation Queue Item",
+  "description": "Submission card for the admin moderation queue showing content preview, submitter info, reputation score, and approve/reject action buttons.",
+  "dependencies": {
+    "patterns": {
+      "namespace-badge": "^1.0.0",
+      "reputation-badge": "^1.0.0"
+    },
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Card",
+        "Badge",
+        "Button",
+        "Avatar",
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "contained": false,
+  "components": [
+    "Card",
+    "CardHeader",
+    "CardBody",
+    "CardFooter",
+    "Badge",
+    "Button",
+    "Avatar",
+    "icon"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Full moderation card with content preview, submitter avatar, reputation score, submission date, and approve/reject buttons.",
+      "components": [
+        "Card",
+        "CardHeader",
+        "CardBody",
+        "CardFooter",
+        "Badge",
+        "Button",
+        "Avatar",
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap0 _border _bordermuted/20 _r3 _overflow[hidden]",
+        "slots": {
+          "header": "Type badge, content name, and submission timestamp",
+          "submitter": "Avatar, username, reputation score badge, and trust indicator",
+          "preview": "Content description and truncated JSON preview",
+          "notes": "Optional admin notes textarea",
+          "actions": "Approve Button (success), Reject Button (destructive), View Detail link"
+        }
+      }
+    },
+    "compact": {
+      "description": "Compact single-row moderation item for dense queue views. Inline approve/reject icons.",
+      "components": [
+        "Badge",
+        "Button",
+        "Avatar",
+        "icon"
+      ],
+      "layout": {
+        "layout": "row",
+        "atoms": "_flex _aic _gap4 _px4 _py3 _borderb _bordermuted/10",
+        "slots": {
+          "avatar": "Submitter Avatar, small",
+          "content-info": "Type badge, name, and short description inline",
+          "reputation": "Reputation score, compact",
+          "actions": "Approve/reject icon Buttons"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col _gap0 _border _bordermuted/20 _r3",
+    "slots": {
+      "header": "Type, name, timestamp",
+      "submitter": "Avatar, name, reputation",
+      "preview": "Description and content preview",
+      "actions": "Approve and reject buttons"
+    }
+  },
+  "visual_brief": "Bordered card for a single moderation queue entry. The header row shows a type badge (pattern, theme, etc.) in a color-coded pill, the content name, and a submission timestamp. A submitter row displays a small avatar, username, and reputation score badge. The card body shows a description preview and a collapsible content preview section (rendered JSON or markdown). The footer contains Approve (primary green) and Reject (destructive red) action buttons with optional feedback textarea. Compact preset condenses to a single row with inline approve/reject icon buttons.",
+  "responsive": {
+    "mobile": "Cards take full width. Approve/Reject buttons are full-width stacked. Content preview defaults to collapsed. Feedback textarea appears on button click.",
+    "tablet": "Standard card layout. Buttons side by side in the footer.",
+    "desktop": "Full card with content preview visible. Buttons inline in footer. Feedback textarea expandable."
+  },
+  "motion": {
+    "micro": "Approve and reject controls may use clear hover/focus transitions, while status borders may brighten subtly when an item is selected.",
+    "transitions": "Expand/collapse of previews and feedback surfaces should animate over 160-240ms without making the moderation queue feel noisy."
+  },
+  "interactions": [
+    "animate-on-mount"
+  ],
+  "layout_hints": {
+    "card_layout": "Bordered card: type badge (d-annotation) + title + namespace + submitted-by + submitted-at. Right side: Approve (primary) + Reject (danger ghost) action buttons.",
+    "status_indicator": "Left border colored by status: pending=amber, approved=green, rejected=red.",
+    "density": "Compact cards — this is an admin worklist, not a showcase. Minimal vertical padding."
+  },
+  "accessibility": {
+    "role": "article",
+    "aria-label": "Moderation queue item",
+    "keyboard": [
+      "Tab moves through preview, approve, reject, and feedback controls in order."
+    ],
+    "announcements": [
+      "Moderation status and decision outcomes should be announced clearly.",
+      "Collapsed preview state changes should be announced when expanded."
+    ],
+    "focus_management": "After moderation actions, keep focus on the affected row or feedback control so the reviewer can continue operating without losing queue context."
+  },
+  "composition": {
+    "ModerationQueueItem": "Card(d-surface, bordered) > [Header + SubmitterRow + ContentPreview + AdminNotes? + ActionBar]",
+    "Header": "CardHeader > [TypeBadge(d-annotation, color-coded) + ContentName(heading4) + Timestamp(text-muted)]",
+    "SubmitterRow": "Row > [Avatar + Username(font-medium) + ReputationBadge(d-annotation)]",
+    "ContentPreview": "CardBody(d-data) > [Description + JSONPreview?(collapsible, mono-data)]",
+    "ActionBar": "CardFooter(d-interactive) > [ApproveButton(variant: success) + RejectButton(variant: destructive) + ViewDetailLink(variant: ghost)]"
+  }
+}

package/patterns/morphing-topology.json

@@ -0,0 +1,113 @@
+{
+  "id": "morphing-topology",
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Morphing Topology",
+  "description": "A layout that reshapes its zone structure based on AI-detected user context. Zones expand, collapse, merge, and split using animated CSS grid-template changes driven by application state. Integrates with Decantr's composition topology system: zones map to archetype roles (primary, gateway, public, auxiliary), and transitions between zone configurations are smooth and meaningful. For adaptive dashboards, context-aware workspaces, and AI-orchestrated interfaces that reorganize around what the user is doing.",
+  "category": "generative",
+  "tags": [
+    "2026",
+    "generative",
+    "adaptive",
+    "topology",
+    "grid",
+    "context-aware",
+    "AI",
+    "zones"
+  ],
+  "components": [
+    "MorphZone",
+    "TransitionBorder",
+    "ContextBadge",
+    "LayoutToggle",
+    "ZoneLabel"
+  ],
+  "default_preset": "balanced",
+  "presets": {
+    "balanced": {
+      "description": "Equal-weight zone distribution. All zones visible at similar sizes in a 2x2 or 3-column grid. Default starting state before context signals arrive. Grid uses fr units for proportional sizing.",
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gap4 _p4"
+      }
+    },
+    "focus-expand": {
+      "description": "One zone expanded to 70% of viewport while others collapse to sidebar thumbnails. Triggered when AI detects sustained interaction in a single zone. Expanded zone gets full content rendering; collapsed zones show summary + ZoneLabel only.",
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gap2 _p4"
+      }
+    },
+    "merged": {
+      "description": "Two adjacent zones merge into a single larger zone when their content is contextually related. TransitionBorder between them dissolves. The merged zone inherits both zones' content in a combined layout. ContextBadge shows merge reason.",
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gap4 _p4"
+      }
+    },
+    "split": {
+      "description": "A single zone divides into two when the AI detects multiple distinct concerns. Animated split with TransitionBorder appearing as a growing divider. Each new zone gets its own ZoneLabel and ContextBadge.",
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gap4 _p4"
+      }
+    },
+    "stacked-fallback": {
+      "description": "All zones stacked vertically in a single column. Used when morphing is disabled, on small screens, or when grid animation is not supported. Zones maintain their expand/collapse state as accordion sections.",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap4 _p4"
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "grid",
+    "atoms": "_grid _gap4 _p4",
+    "slots": {
+      "zone-container": "The CSS grid parent that holds all zones. Grid template rows and columns animate between configurations using transition on grid-template-rows and grid-template-columns properties. Container must have explicit dimensions for grid animation to work.",
+      "zone-panel": "Individual content zone rendered as a MorphZone. Each zone has an ID tied to a Decantr archetype role or section. Content within the zone is independently scrollable. Zone size is driven by grid-area assignment that changes with topology state. Minimum zone size prevents content from becoming unusable.",
+      "transition-boundary": "The visual and interactive border between adjacent zones. TransitionBorder renders as a subtle divider that can be dragged to manually resize zones. During merge transitions, the border dissolves with opacity animation. During splits, it grows from a center point. Border includes a drag handle on hover.",
+      "context-indicator": "ContextBadge displaying why the current topology shape was chosen. Shows labels like 'Focused on code review', 'Merged: related data sources', or 'Split: multiple concerns detected'. Badge positioned at the top of the affected zone. Can be dismissed but reappears on next topology change.",
+      "layout-controls": "LayoutToggle allowing manual override of AI-driven topology. Options: balanced, focus on [zone], merge [zone+zone], reset. Toggle persists user preference and suppresses AI changes until reset. Controls can be placed in a toolbar or as a floating widget."
+    }
+  },
+  "accessibility": {
+    "role": "region",
+    "aria_label": "Adaptive workspace layout",
+    "announcements": [
+      "Announce topology changes: 'Layout changed: [zone] expanded to focus view'",
+      "Announce zone merges: '[zone A] and [zone B] merged'",
+      "Announce zone splits: '[zone] split into [zone A] and [zone B]'",
+      "Announce manual override: 'Layout locked to [configuration]'"
+    ],
+    "keyboard": [
+      "Tab navigates between zones in DOM order",
+      "Ctrl+Arrow keys resize the focused zone's grid area",
+      "Ctrl+M merges the focused zone with the adjacent zone",
+      "Ctrl+Shift+S splits the focused zone",
+      "Ctrl+0 resets to balanced topology",
+      "L key opens LayoutToggle controls"
+    ],
+    "reduce_motion": "Grid template changes apply instantly without CSS transition. TransitionBorder merge/split animations disabled. Zone resize is immediate. All topology changes still occur but without visual animation."
+  },
+  "responsive": {
+    "mobile": "Switch to stacked-fallback preset. Zones render as collapsible accordion panels. Only one zone expanded at a time. LayoutToggle hidden; AI-driven topology changes limited to reordering zones by relevance.",
+    "tablet": "Maximum 2-column grid. Focus-expand uses 60/40 split instead of 70/30. TransitionBorder drag handles enlarged for touch (48px hit target). ContextBadge displayed as a dismissible toast rather than inline badge."
+  },
+  "visual_brief": "CSS Grid container with named zones that animate between configurations. In the balanced preset, zones are evenly distributed in a 2x2 or 3-column grid. Focus-expand preset enlarges one zone to take two-thirds of the space while others shrink. Merged preset combines adjacent zones into a single large panel. Split preset divides a zone into two sub-panels. Zone boundaries show subtle transition borders that animate during layout changes. Each zone has a small label badge in the corner indicating its role (primary, gateway, auxiliary). The stacked-fallback preset arranges all zones in a single column.",
+  "interactions": [
+    "drag-nodes",
+    "pan-background",
+    "zoom-scroll",
+    "click-select",
+    "hover-tooltip",
+    "animate-on-mount"
+  ],
+  "composition": {
+    "MorphingTopology": "Grid(d-section, animated-template) > [ZonePanel[] + TransitionBorder[] + LayoutControls?]",
+    "ZonePanel": "Panel(d-surface, grid-area: dynamic, scrollable) > [ZoneLabel(d-annotation) + ContextBadge?(d-annotation) + Content]",
+    "TransitionBorder": "Divider(d-control, draggable, dissolve-on-merge)",
+    "LayoutControls": "Panel(d-control, floating) > [LayoutToggle > Option(d-interactive)[] + ResetButton]"
+  }
+}

package/patterns/namespace-badge.json

@@ -0,0 +1,93 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "namespace-badge",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Namespace Badge",
+  "description": "Color-coded badge for content namespaces: @official (primary/blue), @community (green), and @org:slug (purple). Indicates content provenance and trust level.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Badge",
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "contained": true,
+  "components": [
+    "Badge",
+    "icon"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Standard-sized namespace badge with icon and namespace text.",
+      "components": [
+        "Badge",
+        "icon"
+      ],
+      "layout": {
+        "layout": "inline",
+        "atoms": "_inline-flex _aic _gap1",
+        "slots": {
+          "icon": "Namespace icon: shield-check for @official, users for @community, building for @org",
+          "label": "Namespace text label"
+        }
+      }
+    },
+    "compact": {
+      "description": "Small badge with icon only, tooltip shows full namespace. For dense list views.",
+      "components": [
+        "Badge",
+        "icon"
+      ],
+      "layout": {
+        "layout": "inline",
+        "atoms": "_inline-flex _aic",
+        "slots": {
+          "icon": "Namespace icon only, with title attribute for tooltip"
+        }
+      }
+    },
+    "pill": {
+      "description": "Pill-shaped badge with background color fill. Prominent display for detail pages.",
+      "components": [
+        "Badge",
+        "icon"
+      ],
+      "layout": {
+        "layout": "inline",
+        "atoms": "_inline-flex _aic _gap1 _rfull _px3 _py1",
+        "slots": {
+          "icon": "Namespace icon with matching color",
+          "label": "Namespace text, bold weight"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "inline",
+    "atoms": "_inline-flex _aic _gap1",
+    "slots": {
+      "icon": "Namespace icon",
+      "label": "Namespace text"
+    }
+  },
+  "visual_brief": "Small inline badge with a namespace icon and text label. @official renders with a blue/primary background and a shield or checkmark icon. @community renders with a green background and a people/globe icon. @org:slug renders with a purple background and a building icon. The standard preset shows both icon and text. Compact preset shows icon only with a tooltip for the full namespace. Pill preset renders as a rounded-full capsule shape. All variants use white or contrast text on the colored background.",
+  "interactions": [
+    "animate-on-mount",
+    "click-select"
+  ],
+  "layout_hints": {
+    "badge_layout": "Small inline pill: @ symbol + namespace text. @official gets accent bg with white text. Community namespaces get outlined style with border.",
+    "sizing": "text-xs, pill-shaped (rounded-full), horizontal padding 0.5rem."
+  },
+  "responsive": {
+    "mobile": "Badge renders at standard size. Compact preset preferred in tight layouts to save space.",
+    "tablet": "Standard badge with icon and text visible.",
+    "desktop": "Full badge with comfortable padding. Pill preset works well inline with other metadata."
+  }
+}

package/patterns/nav-header.json

@@ -0,0 +1,110 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "nav-header",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Navigation Header",
+  "description": "Top navigation bar with logo, links, and actions.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Button",
+        "Link",
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Button",
+    "Link",
+    "icon"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Horizontal nav with logo left, links center, actions right",
+      "components": [
+        "Button",
+        "Link",
+        "icon"
+      ],
+      "layout": {
+        "layout": "row",
+        "atoms": "_flex _aic _jcsb _px6 _py3 _bb[1px_solid_var(--d-border)]",
+        "slots": {
+          "logo": "Brand logo or wordmark, left-aligned",
+          "links": "Horizontal navigation links with _flex _gap4",
+          "actions": "Action buttons (login, signup) right-aligned with _flex _gap2"
+        }
+      }
+    },
+    "minimal": {
+      "description": "Logo left, single CTA right, no navigation links",
+      "components": [
+        "Button",
+        "icon"
+      ],
+      "layout": {
+        "layout": "row",
+        "atoms": "_flex _aic _jcsb _px6 _py3",
+        "slots": {
+          "logo": "Brand logo or wordmark",
+          "cta": "Single primary action Button"
+        }
+      }
+    }
+  },
+  "visual_brief": "Horizontal navigation bar pinned to the top of the viewport. The bar spans full width with a subtle bottom border separating it from page content. Logo or wordmark sits on the far left with comfortable left padding. Navigation links are arranged horizontally in the center (or left-of-center) with even spacing and medium-weight text that highlights on hover with an underline or color shift. Action buttons (login, sign up) cluster on the far right — the primary action uses a filled button, secondary uses ghost. The bar has a fixed height (~60px) with vertically centered content. On scroll, the header may gain a subtle backdrop blur and elevated shadow.",
+  "layout_hints": {
+    "brand_first": "Brand, primary links, and actions should read in a clear priority order. Do not let decorative elements or overflow menus obscure the primary navigation rhythm.",
+    "mobile_collapse": "On smaller screens, collapse secondary links before compromising the clarity of the brand and primary CTA.",
+    "header_compactness": "Keep header controls compact so the nav stays elegant instead of looking like a dense toolbar."
+  },
+  "responsive": {
+    "mobile": "Navigation links collapse into a hamburger menu icon (three horizontal lines) on the right. Tapping the hamburger opens a full-height slide-in panel from the right or a dropdown overlay with vertically stacked links and action buttons. Logo remains visible. Close button (X icon) in the panel header.",
+    "tablet": "Navigation links may remain visible if few (3-4 items), otherwise collapse to hamburger. Action buttons stay visible next to hamburger. Padding reduces to px4.",
+    "desktop": "Full horizontal layout with all links visible. Logo left, links center, actions right. Hover states on links. Dropdown menus open on hover or click for nested navigation."
+  },
+  "motion": {
+    "micro": "Link hover underline slides in from left with 200ms ease. Dropdown chevron rotates 180deg on open. Active link indicator transitions position with 250ms ease.",
+    "transitions": "Mobile menu slides in from right with 300ms ease-out transform. Backdrop fades in over 200ms. Dropdown menus fade in and translate down 4px over 200ms. Sticky header shadow transitions in over 150ms on scroll."
+  },
+  "interactions": [
+    "hover-reveal",
+    "keyboard-navigation"
+  ],
+  "accessibility": {
+    "role": "navigation",
+    "aria-label": "Main navigation",
+    "keyboard": [
+      "Tab navigates between navigation links and action buttons",
+      "Enter activates the focused link or button",
+      "Escape closes the mobile menu or open dropdown",
+      "Arrow Left/Right navigates between top-level links",
+      "Arrow Down opens a dropdown menu on focused link"
+    ],
+    "announcements": [
+      "Navigation menu expanded",
+      "Navigation menu collapsed",
+      "Submenu {name} opened"
+    ],
+    "focus_management": "Mobile menu button uses aria-expanded to reflect open/closed state. On menu open, focus moves to first link. On Escape, focus returns to the hamburger button."
+  },
+  "default_layout": {
+    "layout": "row",
+    "atoms": "_flex _aic _jcsb _px6 _py3 _bb[1px_solid_var(--d-border)]",
+    "slots": {
+      "logo": "Brand logo or name",
+      "links": "Navigation links",
+      "actions": "Action buttons (login, signup)"
+    }
+  },
+  "composition": {
+    "NavHeader": "Bar(d-section, row, space-between, border-bottom, full-width) > [Logo + NavLinks + ActionButtons]",
+    "NavLinks": "Row(d-interactive, gap-4) > Link(hover: underline)[]",
+    "ActionButtons": "Row(d-interactive, gap-2) > [LoginButton(variant: ghost) + SignUpButton(variant: primary)]"
+  }
+}

package/patterns/neural-feedback-loop.json

@@ -0,0 +1,124 @@
+{
+  "id": "neural-feedback-loop",
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Neural Feedback Loop",
+  "description": "A bio-mimetic visualization that renders AI processing state through organic pulsing, color shifts, and flow animations. Displays model confidence, token consumption rate, processing stage, or any continuous metric as a living, breathing visual element. PulseCore radiates outward with intensity mapped to metric values. FlowTrack shows directional particle flow representing throughput. IntensityRing provides a clean circular gauge. For AI transparency UIs, model monitoring dashboards, and any interface that needs to make invisible AI processes tangible and legible.",
+  "category": "generative",
+  "tags": [
+    "2026",
+    "generative",
+    "AI",
+    "visualization",
+    "feedback",
+    "bio-mimetic",
+    "confidence",
+    "transparency"
+  ],
+  "components": [
+    "PulseCore",
+    "FlowTrack",
+    "MetricDisplay",
+    "IntensityRing",
+    "FeedbackTooltip"
+  ],
+  "default_preset": "radial",
+  "presets": {
+    "radial": {
+      "description": "Centered PulseCore with IntensityRing surrounding it. Core pulses with CSS animation using custom cubic-bezier timing that mimics organic breathing. IntensityRing fill represents 0-100% metric value using conic-gradient. MetricDisplay shows numeric value below. Color shifts from cool (low) to warm (high) using color-mix().",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _aic _jcc _gap4"
+      }
+    },
+    "inline-flow": {
+      "description": "Horizontal FlowTrack with directional particle animation showing throughput left-to-right. MetricDisplay inline at the end. Compact enough to embed in a toolbar or status bar. Particle speed maps to processing rate; particle density maps to load.",
+      "layout": {
+        "layout": "row",
+        "atoms": "_flex _row _aic _gap3"
+      }
+    },
+    "ambient": {
+      "description": "Full-container background treatment. PulseCore is the entire container background with subtle radial-gradient pulsing. Color shifts across the background surface. No explicit ring or track — the entire area breathes. Metric values shown via FeedbackTooltip on hover only. Designed for ambient awareness without demanding attention.",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_rel _wfull _hfull"
+      }
+    },
+    "static-gauge": {
+      "description": "Non-animated fallback. IntensityRing rendered as a static arc gauge with solid fill. MetricDisplay shows current value and label. No pulsing, particles, or color transitions. Clean data visualization with no motion.",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _aic _jcc _gap2"
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col _aic _jcc _gap4",
+    "slots": {
+      "pulse-core": "The central animated element. Renders as a radial gradient that expands and contracts with CSS animation. Pulse frequency: idle (2s cycle), processing (0.8s cycle), high-load (0.4s cycle). Pulse amplitude maps to metric intensity. Uses @keyframes with custom cubic-bezier(0.4, 0, 0.2, 1) for organic feel. Core color is the base metric color.",
+      "flow-track": "A directional flow visualization showing throughput or progress. Renders animated particles (small circles or dots) moving along a track path. Particle speed represents processing rate. Particle count represents queue depth or load. Track can be linear (inline-flow preset) or circular (following IntensityRing). Uses CSS animation with translateX/rotate transforms.",
+      "metric-label": "MetricDisplay showing the current numeric value, unit, and descriptive label. Examples: '94% confidence', '1.2k tok/s', 'Stage 3/7'. Typography should use tabular-nums for stable width during value changes. Color matches the current intensity color. Supports trend arrow (up/down/stable) suffix.",
+      "intensity-ring": "IntensityRing renders a circular or arc gauge showing metric fill from 0% to 100%. Implemented with CSS conic-gradient: from transparent to the intensity color, with a smooth gradient edge. Ring thickness and diameter are configurable. The unfilled portion uses a muted background track color. Optional tick marks at 25% intervals.",
+      "detail-tooltip": "FeedbackTooltip providing expanded context on hover or focus. Shows: current value, min/max range, trend over last N seconds, and a plain-language interpretation (e.g., 'Model is highly confident', 'Processing is slower than usual'). Tooltip positioned above the core element. Includes a small sparkline if trend data is available."
+    }
+  },
+  "accessibility": {
+    "role": "status",
+    "aria_live": "polite",
+    "aria_label": "AI processing feedback",
+    "announcements": [
+      "Announce significant metric changes: 'Confidence increased to 94%'",
+      "Announce state transitions: 'Processing started', 'Processing complete'",
+      "Announce threshold crossings: 'Token rate exceeded limit'",
+      "Provide metric summary on focus: '[Metric name]: [value], [trend]'"
+    ],
+    "keyboard": [
+      "Tab focuses the feedback element, announcing current metric value",
+      "Enter or Space opens the detail tooltip",
+      "Escape closes the detail tooltip"
+    ],
+    "reduce_motion": "Switch to static-gauge preset. All pulsing, particle flow, and color transitions disabled. IntensityRing renders as a static filled arc. MetricDisplay updates values without animation. Color changes are instant rather than transitioned."
+  },
+  "responsive": {
+    "mobile": "Use inline-flow or static-gauge preset. Radial preset requires minimum 160px container. FlowTrack particle count reduced for performance. FeedbackTooltip appears as a bottom sheet on tap rather than hover tooltip.",
+    "tablet": "All presets available. Radial preset scales to container. Touch targets for tooltip activation are 44px minimum. Ambient preset works well as a page background on tablet."
+  },
+  "layout_hints": {
+    "containment": "This pattern should read as one feedback instrument, not a general dashboard section. Parent layouts own outer spacing; the pattern owns the core/ring/track stack and any tooltip anchoring immediately around it.",
+    "signal_priority": "PulseCore establishes live state first, IntensityRing carries the stable metric read, and MetricDisplay confirms the exact value. FlowTrack should support the interpretation rather than competing with the primary metric.",
+    "ambient_usage": "Ambient preset is a surface treatment, not a layout wrapper. If used behind other content, keep foreground cards and labels on a separate readable layer so the feedback motion never becomes the structural container."
+  },
+  "visual_brief": "Bio-mimetic circular visualization with a central PulseCore element that expands and contracts with breathing animation, its frequency mapped to processing state (slow idle pulse, rapid active pulse). Surrounding the core, an IntensityRing provides a clean circular gauge with fill level indicating the current metric value. FlowTrack renders directional particle animations flowing along arc paths to represent throughput. A MetricDisplay overlay shows the numeric value and label. The inline-flow preset linearizes the visualization as a horizontal pulsing bar. The ambient preset uses large subtle background pulses. Static-gauge renders as a simple circular progress ring without animation.",
+  "motion": {
+    "micro": {
+      "gauge-update": "value transition 500ms ease-out with number counter",
+      "threshold-cross": "flash border-color 300ms + scale(1.02) on threshold breach"
+    },
+    "transitions": {
+      "metric-refresh": "cross-fade 200ms ease-in-out",
+      "panel-toggle": "height 0→auto + fade 300ms ease-out"
+    },
+    "ambient": {
+      "confidence-pulse": "opacity oscillate 0.7→1 3s ease-in-out infinite",
+      "data-stream": "translateY scroll-like 1s linear infinite on live data"
+    }
+  },
+  "interactions": [
+    "animate-on-mount",
+    "status-pulse",
+    "live-simulation",
+    "hover-tooltip",
+    "real-time-updates"
+  ],
+  "composition": {
+    "NeuralFeedbackLoop": "Container(d-section, centered) > [PulseCore + IntensityRing + MetricDisplay + DetailTooltip?]",
+    "PulseCore": "Core(d-data, radial-gradient, pulsing: frequency-mapped, color-shift: metric)",
+    "IntensityRing": "Ring(d-data, conic-gradient, fill: 0-100%)",
+    "FlowTrack": "Track(d-data, particle-animation, speed: rate) > Particle[]",
+    "MetricDisplay": "Label(d-annotation, mono-data, tabular-nums) > [Value + Unit + TrendArrow?]",
+    "DetailTooltip": "Tooltip(d-surface, on-hover) > [CurrentValue + Range + Trend + Interpretation]"
+  }
+}