@decantr/content 3.8.0

package/patterns/spatial-card-stack.json

@@ -0,0 +1,133 @@
+{
+  "id": "spatial-card-stack",
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Spatial Card Stack",
+  "description": "Z-axis stacked cards with depth parallax and gesture-based navigation — supports swipeable deck, fanned arc, 3D carousel, and chronological timeline stack layouts.",
+  "category": "spatial",
+  "tags": [
+    "2027",
+    "frontier",
+    "spatial",
+    "3D",
+    "cards",
+    "gesture",
+    "parallax",
+    "depth",
+    "carousel"
+  ],
+  "components": [
+    "CardStack",
+    "DepthCard",
+    "StackControls",
+    "DepthIndicator",
+    "GestureZone"
+  ],
+  "default_preset": "deck",
+  "presets": {
+    "deck": {
+      "description": "Swipeable card stack where cards are layered along the Z-axis — front card is full-size and interactive, cards behind progressively scale down, dim, and offset upward",
+      "layout": {
+        "layout": "spatial",
+        "atoms": "_relative _w-full _flex _items-center _justify-center _perspective-1000"
+      }
+    },
+    "fan": {
+      "description": "Cards spread in a horizontal arc like a hand of playing cards — each card rotated at increasing angles from center, hovering a card raises it from the fan for preview",
+      "layout": {
+        "layout": "spatial",
+        "atoms": "_relative _w-full _flex _items-end _justify-center _perspective-1200 _pb-16"
+      }
+    },
+    "carousel3d": {
+      "description": "Cards arranged in a circular 3D orbit around a vertical axis — the front-facing card is fully visible, flanking cards foreshorten with perspective, navigation rotates the entire ring",
+      "layout": {
+        "layout": "spatial",
+        "atoms": "_relative _w-full _flex _items-center _justify-center _perspective-800"
+      }
+    },
+    "timeline-stack": {
+      "description": "Chronologically ordered cards stacked with the newest on top — cards behind offset downward and to the right creating a cascading paper stack effect with visible timestamps on edges",
+      "layout": {
+        "layout": "spatial",
+        "atoms": "_relative _w-full _flex _items-start _justify-center _perspective-1000 _p-8"
+      }
+    }
+  },
+  "visual_brief": "In deck mode: a stack of cards centered in the container. The container has CSS perspective: 1000px applied to enable 3D transforms. The front (active) card renders at full size (width: 320px, aspect-ratio: 3/4 by default, rounded-xl, shadow-xl, bg-surface). It sits at translateZ(0) and is fully interactive — clickable, scrollable content inside. Behind it, up to 4 additional cards are visible. The second card: transform: translateZ(-30px) translateY(-12px) scale(0.95), opacity: 0.85. Third card: translateZ(-60px) translateY(-24px) scale(0.90), opacity: 0.7. Fourth card: translateZ(-90px) translateY(-36px) scale(0.85), opacity: 0.55. Fifth card: translateZ(-120px) translateY(-48px) scale(0.80), opacity: 0.4. Cards beyond the fifth are hidden (display: none). Each card has a subtle border (1px solid var(--d-border)). Swiping left on the front card (via touch drag or mouse drag) causes it to rotate slightly (rotateY -5deg) and translate left, then once past a 30% threshold, it flies off-screen (translateX -120%, rotateY -15deg, opacity 0, 300ms spring) and the next card springs forward to the front position. Swiping right brings the previous card back. Arrow controls (left/right chevron buttons, 36px circle, bg-surface, shadow-md) sit on either side of the stack. A DepthIndicator below the stack shows the current position as small dots (8px circles, gap-2) — the active dot is filled (bg-accent), others are outline (border, bg-transparent). In fan mode: cards are arranged in a semicircular arc. Each card is rotated around its bottom-center origin. The center card is at rotate(0deg), cards to the left at -8deg, -16deg, -24deg and cards to the right at +8deg, +16deg, +24deg. Cards overlap slightly. Hovering a card raises it: translateY(-20px) + scale(1.05) with a 200ms ease-out transition, bringing it above the fan. Clicking selects it and centers it. In carousel3d mode: cards are arranged in a 3D ring. Each card is positioned using rotateY(N * 360/total deg) translateZ(300px). The container has a preserve-3d transform-style. Navigation rotates the entire ring by one card increment (300ms ease-out). The front-facing card has full opacity and no perspective distortion. Cards at 90deg are edge-on and nearly invisible. In timeline-stack mode: cards cascade down-right. Each successive card offsets by translateX(8px) translateY(12px). The top card is fully visible; cards below show just their right and bottom edges. A small timestamp label (text-xs, font-mono, bg-muted, rounded, px-1) peeks out from the right edge of each stacked card.",
+  "layout_hints": {
+    "container": "block with perspective",
+    "note": "The container MUST have CSS perspective set (1000px default) for 3D effects. Cards should use transform-style: preserve-3d for nested 3D content. Ensure the container has enough padding to accommodate card offsets and shadows.",
+    "card_sizing": "Default card size: 320px wide, auto height. Override with CSS custom properties --card-width and --card-height. Maintain consistent aspect ratio across all cards in a stack.",
+    "gesture_thresholds": "Swipe threshold: 30% of card width to trigger navigation. Below threshold, card springs back. Velocity-based: fast swipes (>500px/s) trigger regardless of distance.",
+    "performance": "Only render the active card + 4 surrounding cards. Use will-change: transform, opacity on visible cards. Remove will-change from hidden cards."
+  },
+  "default_layout": {
+    "layout": "spatial",
+    "atoms": "_relative _w-full _flex _flex-col _items-center _justify-center _perspective-1000 _gap-4 _py-8",
+    "slots": {
+      "card-stack": "The 3D container holding all DepthCard elements. Uses transform-style: preserve-3d. Dimensions match the front card size plus padding for depth offset (add 48px padding on each side for the cascade effect). Position: relative. All child DepthCards are position: absolute, centered within this container via left: 50%, top: 50%, translate(-50%, -50%) as the base transform, with each card's depth transform layered on top. The container handles pointer events for swipe/drag gestures via a GestureZone overlay. In carousel3d mode, the container additionally applies a rotateY transform that animates when navigating between cards.",
+      "depth-card": "Repeating slot — one per item in the stack. Each card is a d-surface element (rounded-xl, shadow-lg, overflow-hidden, bg-surface). Position: absolute, centered in the card-stack container. The card's visual depth is controlled by CSS transforms: translateZ (depth), translateY (vertical offset), and scale (size reduction). These three properties are interpolated based on the card's position relative to the active index. The active (front) card: translateZ(0) scale(1) opacity(1), pointer-events: auto, z-index: highest. Cards behind: pointer-events: none, progressively reduced z-index. Each card has transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 300ms ease-out — the spring-like bezier gives a satisfying physical feel when cards move forward. Card content is projected inside via a slot: the card accepts arbitrary children (images, text, interactive elements). In fan mode, the transform changes to rotateZ(angle) with transform-origin: bottom center.",
+      "stack-controls": "Navigation buttons flanking the card stack. Two circular buttons (36px diameter, bg-surface, border, shadow-md, rounded-full) positioned absolutely: left button at left: -48px, top: 50%, translateY(-50%); right button at right: -48px, top: 50%, translateY(-50%). Each contains a chevron icon (16px, stroke-width: 2). Left button: chevron-left icon, navigates to previous card. Right button: chevron-right icon, navigates to next card. Buttons have hover state (bg-accent/10%, scale 1.05) and active state (scale 0.95). Disabled state (at start/end of stack): opacity 0.3, pointer-events: none. In carousel3d mode, buttons rotate the ring. In fan mode, buttons shift the highlighted card.",
+      "depth-indicator": "A row of small dots below the card stack showing the current position within the stack. Uses flex layout (gap-2, items-center, justify-center). Each dot is an 8px circle. The active card's dot: bg-accent, scale(1). Other dots: border 1.5px solid var(--d-border), bg-transparent, scale(0.85). Dots transition between states with: background-color 200ms, transform 200ms. If there are more than 7 items, the indicator collapses: shows the active dot, 2 dots on each side, and small ellipsis dots (...) at the edges. Clicking a dot navigates directly to that card.",
+      "gesture-zone": "An invisible overlay covering the card-stack area that captures touch/mouse drag events for swipe navigation. Position: absolute, inset: 0, z-index above cards. Captures pointerdown → pointermove → pointerup sequences. During drag: the front card follows the pointer horizontally with a slight rotateY tilt (max ±8deg at card edges). Visual feedback: the card tilts in the drag direction, the next card in the swipe direction begins scaling up (scale 0.95→0.98) as a preview. On release: if past threshold (30% card width or velocity >500px/s), commit the navigation with a spring animation (300ms). Below threshold, spring back to center (250ms ease-out). The gesture zone also handles keyboard arrow events bubbled from child focus."
+    }
+  },
+  "accessibility": {
+    "role": "group",
+    "aria-label": "Card stack navigation",
+    "aria-roledescription": "carousel",
+    "announcements": [
+      "Showing card {current} of {total}",
+      "Navigated to card {current}: {card_title}",
+      "Card stack: swipe left or right to navigate, or use arrow keys"
+    ],
+    "keyboard": [
+      "Arrow Left: navigate to previous card",
+      "Arrow Right: navigate to next card",
+      "Home: navigate to first card",
+      "End: navigate to last card",
+      "Enter: activate/click the front card",
+      "Tab: move focus into the front card's content",
+      "Escape: return focus to the card stack from card content"
+    ]
+  },
+  "responsive": {
+    "mobile": "Card width reduces to min(280px, 90vw). Only 3 depth cards rendered behind active (instead of 4). Stack controls hidden — swipe gestures only. Depth indicator dots reduce to 6px. Fan mode disabled — falls back to deck mode. Carousel3d simplified to 2D horizontal scroll.",
+    "tablet": "Full card width (320px). All 4 depth cards rendered. Stack controls visible at 32px. Touch gestures + button navigation both active. All presets functional."
+  },
+  "motion": {
+    "micro": {
+      "card-hover": "translateY(-4px) + shadow-elevation over 200ms ease-out (deck mode, front card only)",
+      "control-hover": "scale(1.05) + bg-accent/10% over 150ms ease-out",
+      "dot-hover": "scale(1.1) over 150ms"
+    },
+    "transitions": {
+      "card-forward": "translateZ + scale + opacity to front position, 400ms cubic-bezier(0.34, 1.56, 0.64, 1) — spring feel",
+      "card-backward": "translateZ + scale + opacity to depth position, 350ms ease-out",
+      "card-swipe-away": "translateX(±120%) + rotateY(±15deg) + opacity 0, 300ms spring",
+      "card-spring-back": "translateX(0) + rotateY(0), 250ms ease-out",
+      "carousel-rotate": "parent rotateY by card-increment degrees, 400ms ease-out",
+      "fan-highlight": "translateY(-20px) + scale(1.05), 200ms ease-out"
+    },
+    "ambient": {
+      "depth-parallax": "subtle translateX/Y offset on depth cards in response to mouse position (max ±4px), 100ms ease-out — creates a parallax depth illusion",
+      "idle-float": "front card subtle translateY oscillation (±2px) over 4s ease-in-out infinite — gentle floating effect when not interacting"
+    }
+  },
+  "interactions": [
+    "lift-hover",
+    "click-select",
+    "animate-on-mount",
+    "stagger-children"
+  ],
+  "composition": {
+    "SpatialCardStack": "Section(d-section, perspective-1000, flex-col, items-center) > [CardStackContainer + StackControls + DepthIndicator]",
+    "CardStackContainer": "Div(relative, preserve-3d) > [DepthCard*(d-surface, absolute, depth-transformed) + GestureZone(invisible-overlay)]",
+    "DepthCard": "Surface(d-surface, rounded-xl, shadow-lg, positioned) > [CardContent(slot)]",
+    "StackControls": "Div(absolute, flanking) > [PrevButton(circle, chevron-left) + NextButton(circle, chevron-right)]",
+    "DepthIndicator": "Flex(gap-2, items-center) > Dot*(8px, circle, active: filled, inactive: outline)",
+    "GestureZone": "Div(absolute, inset-0, pointer-capture) > SwipeHandler(threshold: 30%, velocity: 500px/s)"
+  }
+}

package/patterns/spatial-presence-ring.json

@@ -0,0 +1,103 @@
+{
+  "id": "spatial-presence-ring",
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Spatial Presence Ring",
+  "description": "A circular or arc display showing nearby agents and users with live status indicators. Ring segments represent participants, expanding on hover or focus to reveal details. Segments are distributed evenly around the ring with smooth reflow when participants join or leave. For collaborative workspaces, multiplayer agent UIs, and real-time presence-aware interfaces.",
+  "category": "spatial",
+  "tags": [
+    "2026",
+    "spatial",
+    "presence",
+    "collaboration",
+    "ring",
+    "multiplayer",
+    "agents",
+    "real-time"
+  ],
+  "components": [
+    "PresenceRing",
+    "PresenceSegment",
+    "StatusDot",
+    "DetailPopover",
+    "UserAvatar"
+  ],
+  "default_preset": "full-ring",
+  "presets": {
+    "full-ring": {
+      "description": "Complete 360-degree ring. Segments distributed evenly using CSS conic-gradient for the track and positioned elements for each participant. Ring surrounds center-content. Scales from 2 to 24 participants before switching to overflow indicator.",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_relative _flex _aic _jcc"
+      }
+    },
+    "half-arc": {
+      "description": "180-degree arc across the top or bottom of the container. Useful when the ring shares space with other content. Segments are larger since they span a half-circle. Good for 2-12 participants.",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_relative _flex _col _aic"
+      }
+    },
+    "linear-fallback": {
+      "description": "Horizontal row of avatars with status dots. Used when container is too narrow for a ring or on mobile. Overflow scrolls horizontally. Detail popover appears above/below on tap.",
+      "layout": {
+        "layout": "row",
+        "atoms": "_flex _row _aic _gap2 _overflow-x-auto"
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_relative _flex _aic _jcc",
+    "slots": {
+      "ring-container": "The circular track that holds all presence segments. Rendered as a CSS conic-gradient ring or SVG circle. Track shows segment boundaries with subtle dividers. Ring diameter should be responsive to container size with a minimum of 200px.",
+      "presence-segment": "A single participant slice of the ring. Contains UserAvatar and StatusDot. Default state shows avatar thumbnail on the ring edge. Expanded state (hover/focus) grows the segment to show name, role, and activity. Segments reflow smoothly when participants change.",
+      "detail-popover": "Expanded information panel that appears when a segment is activated. Shows full user name, role label, current activity description, connection quality indicator, and action buttons (message, call, follow). Positioned radially outward from the segment.",
+      "status-indicator": "StatusDot showing participant state: active (green pulse), idle (amber static), away (gray), busy (red), AI agent (blue pulse). Dot is positioned at the outer edge of each segment. Pulse animation indicates real-time activity.",
+      "center-content": "The content area inside the ring. Typically shows aggregate information: participant count, shared context label, or a collaborative focus element. In full-ring preset, this is the primary content area surrounded by the presence display."
+    }
+  },
+  "accessibility": {
+    "role": "group",
+    "aria_label": "Active participants",
+    "announcements": [
+      "Announce when a participant joins: '[Name] joined, [N] participants active'",
+      "Announce when a participant leaves: '[Name] left'",
+      "Announce status changes: '[Name] is now [status]'",
+      "Announce segment expansion: 'Viewing details for [Name], [role]'"
+    ],
+    "keyboard": [
+      "Tab enters the ring, then Arrow Left/Right cycles between segments",
+      "Enter or Space expands the focused segment's detail popover",
+      "Escape closes the detail popover and returns focus to the segment",
+      "Home/End jumps to first/last segment in ring order"
+    ],
+    "reduce_motion": "Disable ring rotation animations and segment reflow transitions. StatusDot pulse replaced with static color. Segment expansion is instant rather than animated. Ring layout preserved (not decorative motion)."
+  },
+  "responsive": {
+    "mobile": "Switch to linear-fallback preset. Horizontal scrollable avatar row with status dots. Tap to expand detail popover as a bottom sheet. Maximum 8 visible before overflow count badge.",
+    "tablet": "Half-arc preset by default to save vertical space. Segments are touch-sized (48px minimum). Detail popover appears as a card overlay rather than radial popup."
+  },
+  "visual_brief": "Circular ring display where each participant occupies an arc segment proportional to their activity level. Segments distribute evenly around the ring with subtle dividers. Each segment shows a small avatar and a status dot (green/yellow/red). Expanding a segment on hover reveals a detail popover with name, role, and activity details. The ring track itself is rendered as a conic gradient or SVG circle. The half-arc preset shows only the top semicircle. The linear-fallback preset arranges participants in a horizontal row for simpler layouts. Smooth reflow animation when participants join or leave.",
+  "layout_hints": {
+    "segment_balance": "Ring segments should remain readable and evenly distributed. Avoid crowding the arc with too much text in the default state.",
+    "detail_reveal": "Expanded participant details should feel like contextual overlays, not detached popovers that obscure the whole ring.",
+    "fallback_consistency": "The linear fallback should preserve status, identity, and shared-context meaning rather than becoming a generic avatar strip."
+  },
+  "motion": {
+    "micro": "Status dots and active participant states may pulse subtly to show presence without turning the ring into a constant animation source.",
+    "transitions": "Segment reflow and detail reveal should animate smoothly over 180-260ms while preserving the ring's overall stability."
+  },
+  "interactions": [
+    "animate-on-mount",
+    "hover-reveal"
+  ],
+  "composition": {
+    "SpatialPresenceRing": "Container(d-section, centered) > [RingTrack + CenterContent]",
+    "RingTrack": "Ring(d-data, circular) > PresenceSegment[]",
+    "PresenceSegment": "Segment(d-interactive, expandable) > [UserAvatar(small) + StatusDot(d-annotation, color: state, pulse?: active)]",
+    "DetailPopover": "Popover(d-surface, radial-position) > [FullName + RoleLabel(d-annotation) + Activity(text-muted) + ActionButtons(d-interactive)]",
+    "CenterContent": "Panel(d-surface, inner) > [ParticipantCount + SharedContext?]"
+  }
+}

package/patterns/split-calculator.json

@@ -0,0 +1,104 @@
+{
+  "id": "split-calculator",
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Split Calculator",
+  "description": "Royalty split calculator for music collaborators with percentage allocation, role tagging, preset splits, and validation that totals equal 100%.",
+  "category": "music",
+  "tags": ["2026", "music", "royalties", "splits", "collaborators", "calculator", "rights"],
+  "components": ["SplitRow", "PercentageInput", "CollaboratorAvatar", "RoleTag", "TotalBadge", "PresetButton"],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Full split calculator with collaborator rows, percentage inputs with sliders, role tags, total validation, and preset buttons for common splits",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _flex-col _gap-4 _p-6 _bg-surface _rounded-xl _border _w-full _max-w-2xl"
+      }
+    },
+    "simple": {
+      "description": "Two-party simplified split with just percentage inputs and names, suitable for quick agreements between duo collaborators",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _flex-col _gap-3 _p-4 _bg-surface _rounded-lg _border _w-full _max-w-md"
+      }
+    },
+    "advanced": {
+      "description": "Advanced variant with role-specific sub-splits, writer vs publisher breakdown, and master vs publishing separation for complex rights arrangements",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _flex-col _gap-6 _p-6 _bg-surface _rounded-xl _border _w-full _max-w-3xl"
+      }
+    }
+  },
+  "visual_brief": "A vertical list of collaborator rows inside a rounded card. Each collaborator row has a drag handle on the far left (6-dot grip icon, visible on hover), a 40px circular avatar with initials fallback, a name text in semibold 14px with role tag beneath as a small colored pill (Producer=purple, Songwriter=blue, Performer=amber, Engineer=gray), and on the right a percentage input combining a horizontal slider (flex-grow, 0-100%) with a coupled numeric spinbox (60px wide) showing the exact percentage with % suffix. A visible remove-row X button appears on hover at far right. Below the rows sits a total badge showing the sum of all percentages (e.g. '100.0%') as a prominent pill: green background if exactly 100%, red background with warning icon if over or under. Preset buttons row below the total shows common allocations ('50/50', '70/30', 'Equal shares', 'Custom') as outlined buttons that apply instantly. Add-collaborator button at bottom spans full width as a dashed-border outlined button with plus icon.",
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _flex-col _gap-4 _p-6 _bg-surface _rounded-xl _border _w-full _max-w-2xl",
+    "slots": {
+      "split-row": "Repeating row (d-interactive) per collaborator with drag handle, avatar, name+role, percentage input, and remove button.",
+      "drag-handle": "6-dot grip icon at far left, visible on hover. Enables drag-reorder of rows.",
+      "collaborator-avatar": "40px circular avatar with profile image or initials fallback on colored background.",
+      "name-and-role": "Stack showing collaborator name in semibold and role tag pill beneath with category-specific color.",
+      "role-tag": "Small colored pill displaying role (Producer/Songwriter/Performer/Engineer). Category-coded colors.",
+      "percentage-input": "Compound input combining horizontal slider (0-100) and numeric spinbox (0.0-100.0 with % suffix). Coupled bidirectionally.",
+      "remove-button": "X icon button at far right, visible on row hover, removes that collaborator row.",
+      "total-badge": "Prominent pill showing sum of all percentages. Green if = 100%, red with warning icon if not.",
+      "preset-buttons": "Horizontal row of quick-apply preset buttons (50/50, 70/30, Equal, Custom).",
+      "add-row-button": "Full-width dashed-border button at bottom with plus icon to add new collaborator."
+    }
+  },
+  "responsive": {
+    "mobile": "Rows wrap: avatar + name on top, slider + spinbox on bottom. Remove button moves next to drag handle. Preset buttons scroll horizontally.",
+    "tablet": "Standard layout with slightly condensed spacing.",
+    "desktop": "Full inline layout with all controls and hover states visible."
+  },
+  "motion": {
+    "micro": {
+      "slider-drag": "slider fill follows pointer at 60fps with spinbox number update",
+      "total-change": "total badge color transitions 200ms ease-out when crossing 100%"
+    },
+    "transitions": {
+      "row-add": "scale-in + fade 250ms spring at bottom of list",
+      "row-remove": "slide-out + fade + collapse 200ms ease-in",
+      "preset-apply": "all percentages animate simultaneously to new values 400ms ease-out"
+    },
+    "ambient": {
+      "invalid-total-pulse": "total badge red pulse 1.5s ease-in-out infinite when sum ≠ 100%"
+    }
+  },
+  "interactions": [
+    "animate-on-mount"
+  ],
+  "composition": {
+    "SplitCalculator": "Root(d-surface, stack) > [SplitRow* + TotalBadge + PresetButtons + AddRowButton]",
+    "SplitRow": "Row(d-interactive) > [DragHandle + CollaboratorAvatar + NameAndRole + PercentageInput + RemoveButton?]",
+    "PercentageInput": "Compound > [Slider(0-100) + Spinbox(numeric, %)]",
+    "PresetButtons": "FlexRow > PresetButton*(d-control, outlined)",
+    "TotalBadge": "Pill(d-annotation, state-colored) > [SumText + WarningIcon?]"
+  },
+  "layout_hints": {
+    "allocation_priority": "Collaborator identity, role, and percentage share should read as one unit so users can audit ownership splits without scanning in multiple passes.",
+    "validation_prominence": "The running total and invalid-state warning should stay visible as supporting guidance without overpowering the row-by-row editing flow.",
+    "preset_behavior": "Preset actions should feel like quick starting points attached to the current split list, not a detached settings mode."
+  },
+  "accessibility": {
+    "role": "form",
+    "aria-label": "Royalty split calculator",
+    "announcements": [
+      "{collaborator} set to {percent}%",
+      "Total is now {total}%",
+      "Warning: total does not equal 100%",
+      "Preset {name} applied"
+    ],
+    "keyboard": [
+      "Tab: cycle through collaborator inputs",
+      "Arrow keys: adjust focused percentage by 1%",
+      "Shift+Arrow: fine adjust by 0.1%",
+      "Enter: confirm value",
+      "Delete: remove focused collaborator",
+      "Ctrl+A: add new collaborator"
+    ]
+  }
+}

package/patterns/split-pane.json

@@ -0,0 +1,112 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "split-pane",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Split Pane",
+  "description": "Resizable terminal panes with keyboard and mouse controls for multi-panel layouts.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [],
+      "charts": []
+    }
+  },
+  "components": ["Container"],
+  "default_preset": "horizontal",
+  "presets": {
+    "horizontal": {
+      "description": "Side by side panes with vertical divider",
+      "components": [],
+      "layout": {
+        "layout": "flex",
+        "atoms": "_flex _hfull _mono _bgblack",
+        "slots": {
+          "pane-left": "Left content pane",
+          "divider": "Resizable vertical divider",
+          "pane-right": "Right content pane"
+        }
+      }
+    },
+    "vertical": {
+      "description": "Stacked panes with horizontal divider",
+      "components": [],
+      "layout": {
+        "layout": "flex",
+        "atoms": "_flex _col _hfull _mono _bgblack",
+        "slots": {
+          "pane-top": "Top content pane",
+          "divider": "Resizable horizontal divider",
+          "pane-bottom": "Bottom content pane"
+        }
+      }
+    },
+    "quad": {
+      "description": "Four-pane 2x2 grid layout with cross-shaped drag handles at the center intersection",
+      "components": [],
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _hfull _mono _bgblack",
+        "slots": {
+          "pane-tl": "Top-left pane",
+          "pane-tr": "Top-right pane",
+          "pane-bl": "Bottom-left pane",
+          "pane-br": "Bottom-right pane"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "flex",
+    "atoms": "_flex _hfull _mono",
+    "slots": {
+      "panes": "Content panes",
+      "handles": "Resize handles"
+    }
+  },
+  "features": [
+    "drag-resize",
+    "double-click-reset",
+    "keyboard-resize",
+    "min-max-constraints",
+    "collapse-rail",
+    "focus-indicator"
+  ],
+  "keyboard_shortcuts": {
+    "Ctrl+Shift+Left": "Shrink left pane",
+    "Ctrl+Shift+Right": "Expand left pane",
+    "Ctrl+Shift+Up": "Shrink top pane",
+    "Ctrl+Shift+Down": "Expand top pane",
+    "Ctrl+\\": "Toggle pane focus"
+  },
+  "visual_brief": "Multi-panel layout with resizable dividers between panes. The horizontal preset splits the viewport into left and right panels with a vertical drag handle between them. The vertical preset splits into top and bottom with a horizontal drag handle. The quad preset creates four panels in a 2x2 grid with cross-shaped drag handles at the center. Each pane has a monospace terminal aesthetic with a dark background. Drag handles render as a thin line with a grip indicator (three dots or lines). Double-clicking a handle resets to equal sizing.",
+  "responsive": {
+    "mobile": "Panes stack vertically (no side-by-side splitting). Tab-based switching between panes instead of simultaneous view. No drag handles.",
+    "tablet": "Horizontal split available. Drag handles have larger touch targets (24px hit area). Quad preset unavailable.",
+    "desktop": "Full split pane with all presets. Keyboard shortcuts for resizing. Drag handles at standard size."
+  },
+  "layout_hints": {
+    "pane_ownership": "The pattern owns pane boundaries, dividers, and resize affordances. Child pages or viewers should not add their own competing split structures unless explicitly nested by the contract.",
+    "focus_hierarchy": "One pane should always feel primary and the others supportive. Resize handles should reinforce that relationship rather than turning the layout into an undifferentiated grid.",
+    "mobile_fallback": "When the split collapses on mobile, preserve pane semantics through tabs or stacked sections rather than pretending simultaneous multi-pane editing is still available."
+  },
+  "motion": {
+    "micro": "Resize handles may brighten or thicken slightly on hover and focus so the drag affordance is obvious.",
+    "transitions": "Pane resizing should feel direct and continuous. Collapsing or resetting panes should animate just enough to preserve orientation without adding theatrical motion."
+  },
+  "interactions": [
+    "animate-on-mount"
+  ],
+  "accessibility": {
+    "role": "group",
+    "aria-label": "Split pane layout",
+    "keyboard": [
+      "Focusable resize handles should expose arrow-key resizing in addition to pointer drag.",
+      "Pane order and active pane state should remain clear when navigating by keyboard."
+    ],
+    "announcements": [
+      "Resize handles and pane labels should communicate orientation and current size changes to assistive technology when adjusted."
+    ]
+  }
+}

package/patterns/stats-bar.json

@@ -0,0 +1,125 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "stats-bar",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Stats Bar",
+  "description": "Horizontal bar of key statistics or metrics. Compact summary row.",
+  "tags": [
+    "metrics",
+    "stats",
+    "summary",
+    "kpi",
+    "dashboard"
+  ],
+  "classification": {
+    "triggers": [
+      "stats summary",
+      "metrics bar",
+      "key numbers",
+      "totals"
+    ],
+    "tier": "recommended"
+  },
+  "components": ["Text", "icon", "Container"],
+  "default_preset": "default",
+  "presets": {
+    "default": {
+      "description": "Equal-width stat items in a row",
+      "layout": {
+        "layout": "row",
+        "atoms": "_grid _gap4 _sm:gc2 _lg:gc4",
+        "slots": {
+          "items": "Equal-width stat cells with label, value, optional unit, and optional trend"
+        },
+        "distribution": "equal"
+      }
+    },
+    "compact": {
+      "description": "Minimal padding, inline separators",
+      "layout": {
+        "layout": "row",
+        "atoms": "_flex _aic _gap3 _wrap",
+        "slots": {
+          "items": "Inline stat cells with divider separators and reduced padding"
+        },
+        "distribution": "auto",
+        "separator": "divider"
+      }
+    },
+    "highlighted": {
+      "description": "First stat emphasized, rest secondary",
+      "layout": {
+        "layout": "row",
+        "atoms": "_grid _gap4 _sm:gc2 _lg:gc4",
+        "slots": {
+          "items": "Stat cells with the first metric visually emphasized and remaining metrics secondary"
+        },
+        "distribution": "featured-first"
+      }
+    }
+  },
+  "slots": {
+    "items": {
+      "type": "array",
+      "item": {
+        "label": {
+          "type": "text",
+          "required": true
+        },
+        "value": {
+          "type": "number",
+          "required": true
+        },
+        "unit": {
+          "type": "text",
+          "required": false
+        },
+        "trend": {
+          "type": "delta",
+          "required": false
+        }
+      }
+    }
+  },
+  "layout": {
+    "container": "div",
+    "direction": "horizontal",
+    "alignment": "center"
+  },
+  "visual_brief": "Compact horizontal row of key statistics separated by subtle vertical dividers. Each stat shows a label in muted uppercase small text above a large bold value. The compact preset reduces vertical padding and font sizes. The highlighted preset adds a colored accent underline or background to the most important metric. Stats are evenly distributed across the bar width. Optional trend arrows (up/down) appear beside values with green/red coloring.",
+  "default_layout": {
+    "layout": "row",
+    "atoms": "_grid _gap4 _sm:gc2 _lg:gc4",
+    "slots": {
+      "items": "Equal-width stat cells with label, value, optional unit, and optional trend"
+    }
+  },
+  "responsive": {
+    "mobile": "Stats wrap to a 2x2 grid or become horizontally scrollable. Values remain large. Labels may abbreviate.",
+    "tablet": "Single horizontal row with all stats visible. Comfortable spacing.",
+    "desktop": "Full horizontal bar with generous spacing between stats. All labels fully spelled out."
+  },
+  "layout_hints": {
+    "summary_priority": "The value is the first read, then the label, then any trend. Keep that hierarchy stable across compact and highlighted variants.",
+    "bar_role": "This pattern is a concise summary surface. It should feel like one horizontal instrumentation band, not a row of unrelated mini-cards.",
+    "highlighted_variant": "When one metric is emphasized, it should still remain visually tied to the rest of the stats bar rather than breaking the row into separate modules."
+  },
+  "motion": {
+    "micro": "Trend arrows or highlighted metrics may sharpen subtly on hover or focus.",
+    "transitions": "Value or trend updates should remain crisp and low-noise so the stats bar continues to feel stable."
+  },
+  "interactions": [
+    "animate-on-mount"
+  ],
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Statistics bar",
+    "keyboard": [
+      "If stats are interactive, focus should move through them in the same left-to-right order as the visual bar."
+    ],
+    "announcements": [
+      "Each stat's label, value, and trend should be exposed together so the summary remains understandable without divider lines or color cues."
+    ]
+  }
+}