@decantr/content 3.8.0

package/patterns/video-room.json

@@ -0,0 +1,142 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "video-room",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Video Room",
+  "description": "Video conferencing layout with participant grid, speaker view, screen sharing, and a floating controls bar for real-time communication.",
+  "category": "communication",
+  "tags": [
+    "2026",
+    "video",
+    "conferencing",
+    "real-time",
+    "communication",
+    "webrtc",
+    "meeting"
+  ],
+  "components": [
+    "VideoGrid",
+    "ParticipantTile",
+    "SpeakerView",
+    "ScreenShareView",
+    "ControlsBar",
+    "ParticipantList",
+    "ChatSidebar",
+    "ReactionOverlay"
+  ],
+  "default_preset": "grid",
+  "presets": {
+    "grid": {
+      "description": "Equal-sized participant tiles in a responsive grid layout — scales from 1 to 49 tiles with automatic row/column calculation for balanced distribution",
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gap-2 _p-2 _h-full _bg-gray-950 _auto-rows-fr"
+      }
+    },
+    "speaker": {
+      "description": "Dominant speaker occupies 70% of the view with a filmstrip of other participants along the bottom — automatically switches based on audio activity",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _h-full _bg-gray-950 _gap-2 _p-2"
+      }
+    },
+    "screen-share": {
+      "description": "Shared screen content takes the dominant area with participant thumbnails arranged in a vertical sidebar — optimized for content visibility",
+      "layout": {
+        "layout": "split",
+        "atoms": "_flex _row _h-full _bg-gray-950 _gap-2 _p-2"
+      }
+    },
+    "audio-only": {
+      "description": "Avatar circles with speaking indicators arranged in a grid — bandwidth-efficient mode showing profile images with animated audio visualization rings",
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gap-4 _p-8 _h-full _bg-gray-950 _place-items-center"
+      }
+    }
+  },
+  "visual_brief": "A dark-themed (always dark, background: #0a0a0f) full-viewport video conferencing interface. The grid layout arranges participant tiles as rounded rectangles (border-radius: 12px) with 8px gaps between them, automatically calculating optimal grid dimensions (e.g., 2x2 for 4 participants, 3x3 for 9). Each ParticipantTile has a subtle border (1px solid rgba(255,255,255,0.08)) that transforms into a glowing accent-colored border when the participant is speaking — the glow uses box-shadow: 0 0 0 2px var(--d-accent), 0 0 12px rgba(var(--d-accent-rgb), 0.3) with a smooth pulse animation synced to audio levels. Video fills the tile with object-fit: cover. When video is off, the tile shows the participant's avatar as a large centered circle (64px in grid, 120px in speaker view) on a slightly lighter dark background (bg-gray-900). Name labels float at the bottom-left of each tile: text rendered on a frosted glass bar (backdrop-filter: blur(12px), background: rgba(0,0,0,0.5), border-radius: 6px, padding: 4px 8px). The label shows the participant name (text-sm, text-white) and a small mute icon (12px, red microphone-off icon) if muted. In speaker view, the active speaker occupies the top 70% of the viewport as a large tile, with a horizontal filmstrip of other participants (120px tall tiles) scrolling along the bottom. The transition between active speakers cross-fades over 400ms. The ControlsBar is centered at the bottom of the viewport, floating 24px above the edge. It contains circular buttons (48px diameter) arranged horizontally with 12px gaps: microphone toggle (white icon on dark bg, red bg when muted), camera toggle (same pattern), screen share (accent highlight when active), reactions (opens an emoji picker flyout), participants list toggle, chat toggle, and leave call (always red background, white phone-down icon). Buttons have a frosted glass background (backdrop-filter: blur(16px), background: rgba(30,30,30,0.8), border: 1px solid rgba(255,255,255,0.1)). The ReactionOverlay renders floating emoji that rise from the participant's tile with a float-up + fade-out animation. Screen share mode places the shared content in 75% of the width with a vertical strip of participant thumbnails (160px wide) on the right side.",
+  "layout_hints": {
+    "container": "full-viewport-dark",
+    "note": "This pattern ALWAYS uses a dark theme regardless of the app's light/dark mode setting. Background must be near-black (#0a0a0f or similar). All text is white/light. Do not apply light theme colors.",
+    "tile_sizing": "Participant tiles must maintain 16:9 aspect ratio when possible. In grid mode, calculate rows and columns to fill the viewport: cols = ceil(sqrt(n * aspectRatio)), rows = ceil(n / cols). Use CSS aspect-ratio: 16/9 with object-fit: cover on video elements.",
+    "speaking_indicator": "The speaking border glow is the PRIMARY visual indicator of who is talking. It must be clearly visible — use at least 2px solid accent border + 12px blur box-shadow. The glow should pulse subtly (opacity 0.6→1.0→0.6) synced to audio amplitude.",
+    "controls_placement": "ControlsBar must be centered horizontally, floating above the bottom edge. It should auto-hide after 5 seconds of mouse inactivity (fade out over 300ms) and reappear on mouse movement. On touch devices, tap to toggle visibility.",
+    "name_labels": "Name labels use frosted glass (backdrop-filter: blur(12px)). They are positioned at the bottom-left of each tile with 8px margin. Keep them compact — name only with optional mute icon. Do NOT show full details in the label."
+  },
+  "default_layout": {
+    "layout": "grid",
+    "atoms": "_grid _gap-2 _p-2 _h-full _w-full _bg-gray-950",
+    "slots": {
+      "video-grid": "The main container for participant tiles. Uses CSS Grid with auto-calculated columns and rows based on participant count. Gap of 8px between tiles. The grid fills the entire viewport minus the space reserved for the controls bar. Background is the deep dark (#0a0a0f). When only 1 participant, the tile fills the entire grid. For 2 participants, side-by-side at 50% each. For 3-4, 2x2 grid. For 5-9, 3x3. For 10-16, 4x4. And so on, always preferring wider layouts. All tiles stretch to fill available space equally using auto-rows: 1fr and auto-columns: 1fr.",
+      "participant-tile": "Repeating slot — one per participant. A rounded rectangle (border-radius: 12px) with overflow: hidden. Contains the video stream element (width: 100%, height: 100%, object-fit: cover) or a fallback avatar display (centered circle, 64px diameter, showing initials or profile image, on a bg-gray-900 background with a subtle radial gradient from center). Border: 1px solid rgba(255,255,255,0.08) default, transitioning to the speaking glow state (box-shadow: 0 0 0 2px var(--d-accent), 0 0 16px rgba(var(--d-accent-rgb), 0.35)) when the participant is actively speaking. The name label bar is positioned absolute at bottom: 8px, left: 8px — a frosted glass pill (backdrop-filter: blur(12px), background: rgba(0,0,0,0.55), border-radius: 6px, padding: 4px 10px) showing the name in text-sm font-medium text-white. If the participant is muted, a small red microphone-off icon (14px) appears after the name with 6px gap. If video is off, a camera-off icon (14px, text-gray-500) appears in the top-right corner of the tile. Pin indicator (small pin icon, top-left) for manually pinned participants.",
+      "speaker-view": "Active in speaker preset. The dominant speaker tile occupies the top area (flex: 7, approximately 70% height). Below it, a horizontal scrollable filmstrip (flex: 3, approximately 30% height, max 120px) shows other participants as smaller tiles. The active speaker tile has a subtle accent border glow at all times. Transition between speakers uses a 400ms cross-fade (the outgoing speaker tile smoothly swaps into the filmstrip while the new speaker expands to the dominant position). The filmstrip scrolls horizontally with 8px gaps between tiles, each filmstrip tile is 160px wide with 16:9 aspect ratio.",
+      "screen-share-view": "Active in screen-share preset. The shared screen content occupies the left 75% of the viewport as a single large tile with object-fit: contain (showing the full shared content with letterboxing if aspect ratios differ). A thin border separates it from the participant sidebar on the right (25% width, min 160px), which stacks participant tiles vertically with 8px gaps in a scrollable column. The shared content tile has a label bar at the top showing '{name} is sharing their screen' on a frosted glass background.",
+      "controls-bar": "A floating horizontal bar centered at the bottom of the viewport, 24px above the bottom edge. Uses position: fixed with left: 50%, transform: translateX(-50%). The bar itself has a frosted glass background (backdrop-filter: blur(16px), background: rgba(20,20,25,0.85), border: 1px solid rgba(255,255,255,0.1), border-radius: 28px, padding: 8px 16px). Contains circular control buttons (48px diameter each) spaced 12px apart: Microphone (white mic icon, toggles to red background + mic-off icon when muted), Camera (white camera icon, toggles to red bg + camera-off when off), Screen Share (monitor icon, accent background when actively sharing), Reactions (smile icon, opens an upward emoji picker flyout with 6 quick reactions), Participants (users icon, toggles ParticipantList sidebar, shows count badge), Chat (message icon, toggles ChatSidebar, shows unread count badge), Leave (red background always, phone-off white icon, slightly separated from other buttons with a 16px gap). Each button has hover: brightness(1.2) and active: scale(0.95) feedback.",
+      "reaction-overlay": "A visual layer rendered above participant tiles (pointer-events: none) where emoji reactions appear. When a participant reacts, the chosen emoji (32px) spawns from the bottom-center of their tile, floats upward over 2 seconds with a slight sinusoidal horizontal drift, scaling from 1.0 to 1.3 while fading from opacity 1.0 to 0. Multiple reactions can stack. Each reaction also briefly shows as a small emoji badge (20px) in the top-right corner of the participant's tile for 3 seconds.",
+      "chat-sidebar": "A 360px-wide panel that slides in from the right edge of the viewport when toggled. Dark background (bg-gray-900) with a subtle left border (1px solid rgba(255,255,255,0.08)). Contains a scrollable message list and a bottom-anchored input field. Messages show sender name (text-xs, text-gray-400), message text (text-sm, text-white), and timestamp. The sidebar overlays the video grid (does not resize it) with a smooth 300ms slide-in animation.",
+      "participant-list": "A 300px-wide panel that slides in from the right edge. Lists all participants with their avatar (32px circle), name (text-sm, text-white), and status icons (mic muted, camera off, screen sharing). Hovering a participant shows quick actions: mute, pin, spotlight. Shows participant count at the top."
+    }
+  },
+  "accessibility": {
+    "role": "application",
+    "aria-label": "Video conference room",
+    "announcements": [
+      "{name} joined the call",
+      "{name} left the call",
+      "{name} started sharing their screen",
+      "{name} stopped sharing",
+      "{name} is now speaking",
+      "You are now muted",
+      "You are now unmuted"
+    ],
+    "keyboard": [
+      "M: toggle microphone mute",
+      "V: toggle camera on/off",
+      "S: toggle screen sharing",
+      "C: toggle chat sidebar",
+      "P: toggle participant list",
+      "R: open reactions picker",
+      "Tab: cycle through participant tiles",
+      "Enter: pin/unpin focused participant",
+      "Escape: close any open sidebar or picker",
+      "Ctrl+D / Cmd+D: leave call (with confirmation)"
+    ]
+  },
+  "responsive": {
+    "mobile": "Grid layout switches to max 2x2 tiles with the active speaker auto-promoted to the largest tile. Controls bar simplifies to 4 essential buttons (mic, camera, chat, leave) with a '...' overflow menu for additional controls. Participant tiles show only video/avatar without name labels (name appears on tap). Screen share view goes full-screen with a floating 'back to tiles' button. Chat sidebar becomes a full-screen overlay. No hover states — all interactions are tap-based.",
+    "tablet": "Grid supports up to 3x3 tiles. Controls bar shows all buttons. Speaker view maintains the 70/30 split. Screen share sidebar becomes a bottom filmstrip instead of right sidebar. Chat sidebar is a half-width overlay. Touch-friendly button sizes (min 44px tap targets). Name labels always visible.",
+    "desktop": "Full grid up to 7x7 (49 participants). All controls visible with keyboard shortcuts. Hover-to-show name labels option. Controls bar auto-hides on mouse inactivity. Screen share uses the right sidebar layout. Chat and participant list can be open simultaneously if viewport width exceeds 1400px. Drag to rearrange participant tile positions."
+  },
+  "motion": {
+    "micro": {
+      "button-press": "scale(0.95) on active/press, 80ms ease-out, return 120ms ease-out",
+      "button-hover": "brightness(1.2) filter, 100ms ease-out",
+      "mute-toggle": "Icon cross-fades with 150ms, background-color transitions 200ms"
+    },
+    "transitions": {
+      "speaker-swap": "Cross-fade between active speakers, 400ms ease-in-out. Outgoing speaker tile animates to filmstrip position while incoming speaker tile expands to dominant.",
+      "grid-reflow": "When participant joins or leaves, tiles animate to new grid positions over 300ms spring(1, 100, 12)",
+      "sidebar-toggle": "Chat/participant sidebar slides in from right over 300ms ease-out with a subtle backdrop dim",
+      "controls-hide": "Controls bar fades out (opacity 1→0) over 300ms after 5s of mouse inactivity, fades in immediately on mouse move"
+    },
+    "ambient": {
+      "speaking-glow": "Active speaker border glow pulses opacity 0.5→1.0→0.5, 1.5s ease-in-out, synchronized to voice activity detection",
+      "audio-ring": "In audio-only mode, concentric rings expand outward from avatar when speaking, 1s ease-out infinite while voice active",
+      "reaction-float": "Emoji rises from tile bottom-center, drifts upward 120px with sinusoidal X offset (amplitude 20px, period 1s), scales 1.0→1.3, opacity 1.0→0, duration 2s ease-out"
+    }
+  },
+  "interactions": [
+    "animate-on-mount"
+  ],
+  "composition": {
+    "VideoRoom": "Room(d-section, full-viewport, dark-always) > [VideoArea + ControlsBar + ReactionOverlay + ChatSidebar? + ParticipantList?]",
+    "VideoArea": "Grid(d-surface[dark], responsive-grid) > ParticipantTile* | SpeakerView | ScreenShareView",
+    "ParticipantTile": "Tile(d-surface[dark], rounded, overflow-hidden) > [VideoStream | AvatarFallback] + NameLabel(frosted-glass) + MuteIndicator?",
+    "SpeakerView": "Split(flex-col) > [DominantTile(flex-7) + Filmstrip(flex-3, horizontal-scroll) > ParticipantTile*]",
+    "ScreenShareView": "Split(flex-row) > [SharedContent(flex-3, object-contain) + TileSidebar(flex-1, vertical-scroll) > ParticipantTile*]",
+    "ControlsBar": "Bar(floating, frosted-glass, bottom-center, auto-hide) > [MicButton + CameraButton + ShareButton + ReactionsButton + ParticipantsButton + ChatButton + LeaveButton(red)]",
+    "ReactionOverlay": "Layer(pointer-events-none, full-viewport) > FloatingEmoji*(animated, ephemeral)"
+  }
+}

package/patterns/vod-annotator.json

@@ -0,0 +1,112 @@
+{
+  "id": "vod-annotator",
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "VOD Annotator",
+  "description": "A video-on-demand playback surface with timeline annotation flags, drawing overlay tools, tag filtering, and replay markers for esports coaching review.",
+  "category": "esports",
+  "tags": [
+    "2026",
+    "esports",
+    "video",
+    "vod",
+    "annotation",
+    "coaching",
+    "review"
+  ],
+  "components": [
+    "VideoPlayer",
+    "AnnotationTimeline",
+    "DrawingOverlay",
+    "MarkerFlag",
+    "TagChip",
+    "ReplayButton"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Single video player with annotation timeline beneath, drawing overlay on top of video, and tag-filtering chip rail along the bottom",
+      "layout": {
+        "layout": "stacked",
+        "atoms": "_flex _flex-col _gap-3 _w100 _max-w-6xl _mx-auto _p-4"
+      }
+    },
+    "multi-angle": {
+      "description": "Synchronized grid of player POV video feeds viewed simultaneously with shared timeline and aligned annotation markers across all angles",
+      "layout": {
+        "layout": "grid-2",
+        "atoms": "_grid _grid-cols-2 _gap-2 _w100 _p-4"
+      }
+    },
+    "heatmap": {
+      "description": "Timeline heatmap overlay showing aggregated play frequency and annotation density across the VOD duration for pattern-spotting review",
+      "layout": {
+        "layout": "stacked",
+        "atoms": "_flex _flex-col _gap-3 _w100 _p-4"
+      }
+    }
+  },
+  "visual_brief": "A dark-background coaching surface. Large 16:9 video player at top with standard playback controls (play/pause, scrub, time, speed, volume, fullscreen) overlaid at bottom of the video on hover. A transparent drawing overlay sits atop the video, enabled by toolbar toggle, allowing arrows, circles, rectangles, and freehand lines in brand-accent colors. Directly below the player, an annotation timeline strip spans full width with colored marker flags planted at annotation timestamps (color encodes tag type: red=mistake, green=highlight, blue=rotation, purple=teamfight, amber=objective). Hovering a flag reveals a mini-preview thumbnail and annotation text. A horizontal tag chip rail below timeline acts as filters — click a chip to hide/show flag types. Each annotation in the list has a replay button that jumps to that timestamp and loops the moment. Commenter avatars appear as small circles on each flag showing who created it.",
+  "layout_hints": {
+    "container": "d-section",
+    "note": "Video player must be 16:9 aspect. Drawing overlay must be toggleable to avoid interfering with scrub controls.",
+    "tag_colors": "Tag color semantics must stay consistent across annotations: mistake=red, highlight=green, rotation=blue, teamfight=purple, objective=amber."
+  },
+  "default_layout": {
+    "layout": "stacked",
+    "atoms": "_flex _flex-col _gap-3 _w100 _max-w-6xl _mx-auto _p-4",
+    "slots": {
+      "video-player": "16:9 HTML5 or custom video element with playback controls overlay, scrub bar, speed, volume, fullscreen.",
+      "drawing-overlay": "Transparent SVG canvas layered over the video supporting arrows, shapes, freehand drawing with brand-accent colors.",
+      "annotation-timeline": "Horizontal strip beneath video showing marker-flag planted at each annotation timestamp, synchronized with playback.",
+      "marker-flag": "Repeating colored flag element on timeline. Color encodes tag type. Click jumps to timestamp.",
+      "tag-chip": "Filter chip in bottom rail toggling visibility of a tag category across markers.",
+      "replay-button": "Button beside each annotation list entry that seeks and loops the annotated moment."
+    }
+  },
+  "accessibility": {
+    "role": "application",
+    "aria-label": "Video annotation review surface",
+    "announcements": [
+      "Annotation at {timestamp}: {tag} by {author}",
+      "Filter {tag} {enabled|disabled}"
+    ],
+    "keyboard": [
+      "Space: play/pause video",
+      "J / L: seek back/forward 5s",
+      "M: mute",
+      "F: fullscreen",
+      "N: create new annotation at current timestamp",
+      "D: toggle drawing overlay",
+      "Arrow Left/Right: previous/next annotation"
+    ]
+  },
+  "responsive": {
+    "mobile": "Tag chip rail scrolls horizontally. Drawing tools move to bottom action sheet. Multi-angle collapses to single view with tab switcher.",
+    "tablet": "Standard layout retained. Timeline marker size reduced."
+  },
+  "motion": {
+    "micro": {
+      "flag-hover": "marker scale(1.3) + preview thumbnail slide-up 180ms ease-out",
+      "chip-toggle": "chip opacity dim when disabled 150ms"
+    },
+    "transitions": {
+      "seek-jump": "playhead smooth-scrub 300ms ease-in-out",
+      "drawing-draw": "stroke path draw-in with follow-cursor immediate"
+    },
+    "ambient": {
+      "playhead-pulse": "timeline playhead subtle glow pulse 2s ease-in-out infinite while playing"
+    }
+  },
+  "interactions": [
+    "animate-on-mount"
+  ],
+  "composition": {
+    "VodAnnotator": "Section(d-section) > [VideoPlayer(16:9) > [VideoElement + DrawingOverlay + PlaybackControls] + AnnotationTimeline > MarkerFlag[] + TagChipRail > TagChip[] + AnnotationList > AnnotationEntry[] > [Timestamp + TagBadge + AuthorAvatar + NoteText + ReplayButton]]",
+    "VideoPlayer": "Player(aspect-16-9) > [Video + Overlays + Controls(scrub, play, speed, vol, fs)]",
+    "DrawingOverlay": "SVG(layered, toggleable) > DrawLayer(arrows, shapes, freehand)",
+    "AnnotationTimeline": "Strip(horizontal, scrub-synced) > [TimelineTrack + MarkerFlag[] + Playhead]",
+    "MarkerFlag": "Flag(d-interactive, tag-colored) > [FlagIcon + AuthorAvatar + PreviewOnHover]"
+  }
+}

package/patterns/voice-command-palette.json

@@ -0,0 +1,127 @@
+{
+  "id": "voice-command-palette",
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Voice Command Palette",
+  "description": "Voice-activated command interface with real-time waveform visualization, live transcription, contextual suggestion chips, and processing feedback — a voice-first alternative to traditional command palettes.",
+  "category": "voice",
+  "tags": [
+    "2027",
+    "frontier",
+    "voice",
+    "command",
+    "palette",
+    "natural-language",
+    "AI",
+    "hands-free"
+  ],
+  "components": [
+    "CommandOverlay",
+    "VoiceInput",
+    "CommandSuggestion",
+    "ProcessingIndicator",
+    "ResultPreview",
+    "HotkeyHint"
+  ],
+  "default_preset": "overlay",
+  "presets": {
+    "overlay": {
+      "description": "Full-screen centered overlay with backdrop blur — large waveform at top, live transcript below, suggestion chips at the bottom, suitable for primary voice command invocation",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_fixed _inset-0 _flex _items-center _justify-center _bg-black/50 _backdrop-blur-sm _z-50"
+      }
+    },
+    "inline": {
+      "description": "Embedded voice command input within a page section — compact waveform, transcript, and suggestions rendered inline without overlay or backdrop, for persistent voice interfaces",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _flex-col _gap-3 _p-4 _rounded-xl _border _bg-surface"
+      }
+    },
+    "floating": {
+      "description": "Small 48px circle near the mic button that expands into a pill shape showing transcript and suggestions — minimal footprint, ideal for always-available voice access in toolbars",
+      "layout": {
+        "layout": "flex",
+        "atoms": "_fixed _bottom-4 _right-4 _z-50"
+      }
+    }
+  },
+  "visual_brief": "In overlay mode: a centered modal panel (max-width 560px, rounded-2xl, bg-surface, shadow-2xl) appears over a full-screen backdrop (bg-black/50%, backdrop-blur-sm). The panel is vertically stacked. At the top (p-6): a large waveform visualization (the same bar-style as voice-waveform pattern, but wider — 48 bars spanning the full panel width) showing the user's live speech input. The bars are accent-colored during active speech and collapse to muted during silence. Below the waveform (px-6): a live transcript area (min-height 48px, max-height 120px) displaying the real-time speech-to-text result in text-lg font-medium. Text appears word-by-word with a blinking cursor at the end. A muted placeholder ('Say a command...') shows when no speech has been captured. Below the transcript (px-6, pb-4): a horizontally scrollable row of suggestion chips. Each chip is a pill (rounded-full, px-3 py-1.5, border, text-sm) showing a parsed command interpretation ('Navigate to /settings', 'Open file: main.ts', 'Run build'). The most likely suggestion has a filled background (bg-accent, text-accent-foreground). Others have outline style. Chips update in real-time as the transcript changes — they fade in/out with 150ms transitions. At the bottom of the panel: a thin separator line, then a footer row (px-6, py-3) showing a HotkeyHint on the left ('Esc to cancel') and a small microphone status icon on the right. When the system is processing a recognized command: the waveform area is replaced by a ProcessingIndicator — a horizontal pulsing bar (4px tall, bg-accent, animated width oscillation from 20% to 80% and back). A brief success state flashes the panel border green (200ms) before the overlay dismisses. In floating mode: resting state is a 48px circle (bg-accent, shadow-lg) with a microphone icon (24px, white). On activation (click or hotkey), the circle smoothly expands (300ms spring) into a pill shape (width: 320px, height: auto, rounded-2xl, bg-surface, shadow-2xl). The pill shows a compact waveform (24px tall), a single-line transcript, and up to 3 suggestion chips below. Tapping outside or pressing Escape collapses it back to the circle.",
+  "layout_hints": {
+    "container": "fixed overlay or inline block depending on preset",
+    "note": "The overlay preset should trap focus when open and return focus to the trigger element on close. The floating preset should not trap focus but should be keyboard-accessible.",
+    "dismissal": "Overlay dismisses on: Escape key, click outside the panel, or successful command execution. Floating collapses on: Escape, tap outside, or 5s of silence after last speech.",
+    "command_parsing": "Suggestion chips should be driven by an intent-parsing layer that matches partial transcripts against available commands. Show up to 5 suggestions in overlay mode, 3 in floating mode.",
+    "success_feedback": "On successful command execution: flash panel border green (var(--d-success)) for 200ms, then dismiss with a scale-down + fade-out animation (200ms ease-in)."
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_fixed _inset-0 _flex _items-center _justify-center _bg-black/50 _backdrop-blur-sm _z-50",
+    "slots": {
+      "command-overlay": "The full-screen backdrop layer. Uses position: fixed, inset: 0. Background is black at 50% opacity with backdrop-filter: blur(4px). Clicking this backdrop area (outside the panel) dismisses the voice command palette. The overlay should fade in (opacity 0→1 over 150ms) on open and fade out on close. Z-index: 50 to sit above all page content. The overlay traps focus — Tab cycles only through interactive elements within the panel.",
+      "voice-input": "The primary interaction zone at the top of the modal panel. Contains two sub-regions: (1) WaveformPreview — a 48-bar amplitude visualization spanning the full panel width (approximately 480px), bars 4px wide with 3px gap, 48px tall, centered. Bars animate identically to the voice-waveform bar preset but scaled to panel width. (2) Transcript — a text area below the waveform (margin-top: 16px) showing the live speech-to-text output. Text renders in text-lg, font-medium. Words appear incrementally with 80ms fade-in per word. A blinking cursor (2px wide, accent color, 1s blink) follows the last word. When no speech has been captured, a muted placeholder reads 'Say a command...' in text-muted, italic. The transcript area has min-height: 48px and max-height: 120px with overflow-y: auto for long utterances.",
+      "command-suggestion": "A horizontally scrollable row of suggestion chips below the transcript. Each chip is a pill-shaped button: rounded-full, px-3, py-1.5, text-sm, font-medium. The highest-confidence suggestion uses filled style (bg-accent, text-accent-foreground). Remaining suggestions use outline style (border, text-foreground). Each chip has a subtle left icon indicating command type (navigation: arrow icon, action: play icon, query: search icon). Chips enter with a staggered fade-in (50ms delay per chip, 150ms duration). When the transcript changes, chips that are no longer relevant fade out (100ms) and new ones fade in. Clicking a chip immediately executes that command. The row is horizontally scrollable with scroll-snap-type: x mandatory and hidden scrollbar. Maximum 5 chips visible in overlay mode.",
+      "processing-indicator": "Shown when a command has been recognized and is being executed. Replaces the waveform area. A horizontal bar (4px tall, full width, rounded-full) with an animated fill: the filled portion oscillates between 20% and 80% width, sliding left to right and back, using accent color (bg-accent). Animation: 1.5s ease-in-out infinite. Below the bar, centered text in text-sm text-muted reads 'Processing: {command_summary}...'. The indicator enters with a crossfade from the waveform (200ms).",
+      "result-preview": "Shown briefly after successful command execution before the overlay dismisses. A compact preview of the command result: for navigation commands, shows the destination page title; for action commands, shows a checkmark + 'Done' message; for queries, shows a brief answer snippet. Renders in a muted card style (bg-muted/10%, rounded-lg, p-3, text-sm). Visible for 800ms before the overlay auto-dismisses.",
+      "hotkey-hint": "A small footer row at the bottom of the panel (px-6, py-3, border-t). Left side: keyboard shortcut hints in text-xs, text-muted, font-mono ('Esc to cancel · Enter to confirm'). Right side: a small microphone status indicator (12px circle — green when listening, red when error, gray when idle). The footer is visually understated to avoid competing with the main interaction area."
+    }
+  },
+  "accessibility": {
+    "role": "dialog",
+    "aria-label": "Voice command palette",
+    "aria-modal": "true",
+    "announcements": [
+      "Voice command palette opened — listening for commands",
+      "Heard: {transcript}",
+      "Suggestion: {command_description}",
+      "Processing command: {command}",
+      "Command executed: {result}",
+      "Voice command palette closed"
+    ],
+    "keyboard": [
+      "Cmd+Shift+V / Ctrl+Shift+V: open voice command palette",
+      "Escape: close/cancel",
+      "Enter: confirm top suggestion",
+      "Arrow Left/Right: navigate between suggestion chips",
+      "Tab: cycle through suggestions and controls",
+      "1-5: quick-select suggestion by number"
+    ]
+  },
+  "responsive": {
+    "mobile": "Overlay panel expands to full-width (inset-x: 16px) with rounded-xl. Waveform reduces to 24 bars. Suggestion chips stack vertically instead of horizontal scroll. Floating preset circle increases to 56px for touch. Processing indicator uses full-width.",
+    "tablet": "Overlay panel at max-width: 560px centered. Full 48-bar waveform. Horizontal chip scroll with touch. Floating preset unchanged."
+  },
+  "motion": {
+    "micro": {
+      "chip-hover": "scale(1.03) + shadow-elevation 150ms ease-out",
+      "chip-press": "scale(0.97) 100ms ease-in",
+      "hotkey-hint-hover": "opacity 0.5→1 150ms"
+    },
+    "transitions": {
+      "overlay-open": "backdrop opacity 0→1 150ms ease-out, panel scale(0.95)→scale(1) + opacity 0→1 200ms spring",
+      "overlay-close": "panel scale(1)→scale(0.95) + opacity 1→0 150ms ease-in, backdrop opacity 1→0 150ms",
+      "floating-expand": "circle width 48px→320px, height 48px→auto, border-radius 24px→16px over 300ms spring",
+      "floating-collapse": "reverse of expand, 250ms ease-in",
+      "success-flash": "border-color → var(--d-success) 0ms, then back to default over 200ms ease-out"
+    },
+    "ambient": {
+      "waveform-listening": "continuous bar oscillation at 60fps synced to audio input",
+      "cursor-blink": "opacity steps(2) 1s infinite",
+      "processing-sweep": "width oscillation 20%→80%→20% 1.5s ease-in-out infinite"
+    }
+  },
+  "interactions": [
+    "animate-on-mount"
+  ],
+  "composition": {
+    "VoiceCommandPalette": "Dialog(d-surface, fixed|inline, z-50) > [VoiceInput + CommandSuggestions + ProcessingIndicator? + ResultPreview? + HotkeyHint]",
+    "VoiceInput": "Section(flex-col, gap-3, p-6) > [WaveformPreview(48-bar, animated) + Transcript(text-lg, live-updating)]",
+    "CommandSuggestions": "ScrollRow(flex, gap-2, overflow-x-auto, px-6) > CommandSuggestion*(d-interactive, pill, staggered-enter)",
+    "CommandSuggestion": "Button(rounded-full, px-3, py-1.5, text-sm) > [TypeIcon + Label]",
+    "ProcessingIndicator": "Div(flex-col, items-center, gap-2) > [AnimatedBar(4px, accent, oscillating-width) + StatusText(text-sm, text-muted)]",
+    "ResultPreview": "Card(bg-muted/10%, rounded-lg, p-3, text-sm) > ResultContent",
+    "HotkeyHint": "Footer(flex, justify-between, px-6, py-3, border-t) > [ShortcutText(text-xs, mono) + MicStatus(12px, dot)]"
+  }
+}

package/patterns/voice-waveform.json

@@ -0,0 +1,120 @@
+{
+  "id": "voice-waveform",
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Voice Waveform",
+  "description": "Live audio visualization showing speech amplitude as an animated waveform — supports bar, sine wave, circular, and minimal display modes for real-time voice feedback.",
+  "category": "voice",
+  "tags": [
+    "2027",
+    "frontier",
+    "voice",
+    "audio",
+    "waveform",
+    "visualization",
+    "real-time",
+    "animation"
+  ],
+  "components": [
+    "WaveformCanvas",
+    "AmplitudeBar",
+    "FrequencyDisplay",
+    "VoiceIndicator",
+    "MuteToggle"
+  ],
+  "default_preset": "bar",
+  "presets": {
+    "bar": {
+      "description": "Vertical bars (32 bars, width 3px, gap 2px) that oscillate with speech amplitude — center bars taller for mid-range voice frequencies, edges shorter",
+      "layout": {
+        "layout": "flex",
+        "atoms": "_flex _items-center _justify-center _gap-0.5 _h-12 _overflow-hidden"
+      }
+    },
+    "wave": {
+      "description": "Smooth sine wave rendered via SVG path that undulates with speech cadence — amplitude controls wave height, frequency controls wave density",
+      "layout": {
+        "layout": "flex",
+        "atoms": "_flex _items-center _justify-center _h-12 _overflow-hidden"
+      }
+    },
+    "circular": {
+      "description": "Waveform wrapped around a 128px diameter circle with amplitude extending radially outward — creates a pulsing orb effect during active speech",
+      "layout": {
+        "layout": "flex",
+        "atoms": "_flex _items-center _justify-center _w-32 _h-32"
+      }
+    },
+    "minimal": {
+      "description": "Single horizontal line that thickens and thins with volume — extremely compact, suitable for inline placement next to speaker names or mic icons",
+      "layout": {
+        "layout": "flex",
+        "atoms": "_flex _items-center _h-4 _w-16"
+      }
+    }
+  },
+  "visual_brief": "A horizontal strip showing real-time audio amplitude. In bar mode: 32 vertical bars, each 3px wide with 2px gap, aligned at their vertical center. Heights map to frequency bands — the center 10–12 bars are taller (representing mid-range voice frequencies at 300–3000 Hz), while edge bars are shorter (low and high frequency). During active speech, bars animate at 60fps with heights oscillating between 4px (quiet) and 100% container height (loud). Active bars use the accent color with a subtle glow (box-shadow: 0 0 6px var(--d-accent)). During silence, bars collapse to 2–4px heights in a muted/neutral color at 20% opacity, barely visible. The wave preset renders a single SVG path element using a cubic bezier approximation of a sine wave. The path's vertical displacement corresponds to amplitude (±24px from center at max volume), and the wave's horizontal frequency increases slightly with louder speech. Stroke width is 2px, accent color, with a subtle drop-shadow. The circular preset draws 64 radial lines emanating from a center point, each line's length proportional to its frequency band's amplitude. Lines extend outward from a 64px radius circle. Active speech creates a dynamic starburst/sea-urchin effect. A faint circle outline (1px, muted) marks the base radius. The minimal preset is a single horizontal line (2px default stroke) that smoothly animates stroke-width between 1px (silence) and 6px (loud speech), using accent color when active and muted color when silent.",
+  "layout_hints": {
+    "container": "inline or block",
+    "note": "The waveform should be placed near voice/audio controls. It works well inside a toolbar, header bar, or alongside a speaker avatar. For the circular preset, ensure the parent container allows the 128px square footprint.",
+    "data_binding": "Bind to a Web Audio API AnalyserNode. The component expects a Float32Array of frequency data (32 or 64 bins depending on preset) updated at 60fps via requestAnimationFrame.",
+    "color_states": "Active speech: var(--d-accent). Silence: var(--d-muted) at 20% opacity. Muted: var(--d-muted) at 10% opacity with a strikethrough icon overlay."
+  },
+  "default_layout": {
+    "layout": "flex",
+    "atoms": "_flex _items-center _justify-center _gap-0.5 _h-12 _overflow-hidden _rounded-md",
+    "slots": {
+      "waveform-canvas": "The primary SVG or Canvas element that renders the waveform visualization. In bar mode, this is a flex container holding 32 AmplitudeBar elements centered vertically. Each bar is a rounded rectangle (border-radius: 1.5px) with its height driven by the corresponding frequency bin value. The canvas handles the animation loop — on each frame, it reads frequency data from the audio analyser and updates bar heights with a slight easing (lerp factor 0.3) to smooth out jitter. Background is transparent. The canvas must be GPU-accelerated (will-change: transform) to maintain 60fps.",
+      "amplitude-bar": "Repeating slot — one per frequency bin (32 in bar preset, 64 in circular). Each bar is a thin vertical rectangle, width 3px, with dynamic height. Bars use CSS custom properties (--bar-height) updated via JavaScript for animation. Color transitions between muted (silence) and accent (speech) over 150ms. Bars have border-radius: 1.5px for softened edges. In the circular preset, bars become radial lines rotated around the center point at equal angular intervals (360°/64 = 5.625° apart).",
+      "frequency-display": "Optional diagnostic slot showing the dominant frequency in Hz as small monospace text (text-xs, text-muted). Positioned below the waveform canvas. Useful for debugging or advanced UIs. Hidden by default in all presets — toggled via a data attribute.",
+      "voice-indicator": "A small (8px) colored dot positioned to the left of the waveform canvas. Green when speech is detected (VAD active), muted/gray when silent, red when in error state (no microphone access). Includes a subtle pulse animation (scale 1→1.3→1 over 1.5s) when speech is active. Serves as a quick glanceable status indicator independent of the waveform animation.",
+      "mute-toggle": "An icon button (24×24px) positioned to the right of the waveform canvas. Shows a microphone icon when unmuted, a microphone-off icon with a diagonal strikethrough when muted. Clicking toggles the audio input. When muted, the entire waveform dims to 20% opacity and bars freeze at minimum height. The button has hover (background: var(--d-muted)/10%) and focus-visible (outline ring) states."
+    }
+  },
+  "accessibility": {
+    "role": "img",
+    "aria-label": "Voice waveform visualization",
+    "announcements": [
+      "Microphone {muted|unmuted}",
+      "Speech detected",
+      "Speech ended — silence",
+      "Audio input error: {reason}"
+    ],
+    "keyboard": [
+      "M: toggle mute",
+      "Space: toggle mute (when mute button focused)",
+      "Escape: stop audio capture"
+    ]
+  },
+  "responsive": {
+    "mobile": "Bar count reduces from 32 to 16 for performance. Circular preset scales down to 96px diameter. Minimal preset remains unchanged. MuteToggle increases to 44×44px for touch targets.",
+    "tablet": "Full bar count maintained. Circular preset at full 128px. Touch-friendly mute toggle at 36×36px."
+  },
+  "motion": {
+    "micro": {
+      "bar-oscillation": "height transition per frame, lerp factor 0.3, GPU-accelerated via transform: scaleY()",
+      "mute-toggle-hover": "background-color 150ms ease-out"
+    },
+    "transitions": {
+      "mute-state": "opacity 0.2→1 or 1→0.2 over 200ms ease-in-out for entire waveform",
+      "preset-switch": "crossfade 300ms — old preset fades out, new preset fades in"
+    },
+    "ambient": {
+      "voice-indicator-pulse": "scale(1) → scale(1.3) → scale(1) 1.5s ease-in-out infinite when speech active",
+      "silence-idle": "bars drift to random 2–4px heights with slow (2s) easing to avoid perfectly static appearance"
+    }
+  },
+  "interactions": [
+    "animate-on-mount",
+    "inline-edit",
+    "keyboard-navigation"
+  ],
+  "composition": {
+    "VoiceWaveform": "Section(d-section, inline-flex, items-center, gap-2) > [VoiceIndicator + WaveformCanvas(svg|canvas, animated) + MuteToggle?]",
+    "WaveformCanvas": "SVG(viewBox, preserveAspectRatio) > AmplitudeBar*(rect|line, animated-height) + FrequencyDisplay?",
+    "AmplitudeBar": "Rect(width: 3px, rx: 1.5, dynamic-height, fill: accent|muted)",
+    "VoiceIndicator": "Dot(8px, border-radius-full, bg: status-color, pulse-animation)",
+    "MuteToggle": "Button(d-interactive, icon-only, 24px) > MicIcon|MicOffIcon"
+  }
+}

package/patterns/voting-breakdown.json

@@ -0,0 +1,101 @@
+{
+  "id": "voting-breakdown",
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Voting Breakdown",
+  "description": "Vote tally breakdown with demographic slicing, comment distribution, and proportional visualizations for civic decisions and polling.",
+  "category": "civic",
+  "tags": ["2026", "civic", "voting", "results", "demographics", "tally", "breakdown"],
+  "components": ["VoteBar", "OptionLabel", "PercentageText", "DemographicToggle", "CommentSnippet"],
+  "default_preset": "bars",
+  "presets": {
+    "bars": {
+      "description": "Horizontal bar chart displaying vote percentages per option with color-coded fills and vote counts for standard results views",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _flex-col _gap-3 _p-4 _w-full _bg-surface"
+      }
+    },
+    "pie": {
+      "description": "Proportional pie/donut chart visualization emphasizing relative share of votes across options for at-a-glance results understanding",
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _grid-cols-[1fr_1fr] _gap-6 _p-4 _w-full _bg-surface"
+      }
+    },
+    "grouped": {
+      "description": "Grouped bars segmented by category (region, age, party) for comparative analysis across voter demographic slices",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _flex-col _gap-4 _p-4 _w-full _bg-surface"
+      }
+    }
+  },
+  "visual_brief": "A vertical stack of horizontal bar rows displaying voting results. Each row has a fixed-width option label on the left (approximately 120px) showing the option text (e.g. 'Yes', 'No', 'Abstain'). The bar fills the remaining horizontal space with a colored fill proportional to vote percentage: yes=green (#10b981), no=red (#ef4444), abstain=neutral gray (#9ca3af). Percentage text and raw count appear on the right edge of each row (e.g. '62% (4,218)') in monospace semibold numerals. A demographic toggle group sits above the chart as a pill-shaped segmented control with options (Age, Region, Party, All). Selecting a toggle re-renders bars grouped or colored accordingly. Below each bar, expandable comment snippet boxes show 1-2 representative voter comments per option in italic muted text with quote marks, limited to 2 lines with 'show more' affordance. Overall vote total displays at top-right with turnout percentage. Bars have a subtle shimmer during initial load.",
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _flex-col _gap-3 _p-4 _w-full _bg-surface",
+    "slots": {
+      "demographic-toggle": "Segmented control pill at top showing demographic slice options (Age, Region, Party, All). Active state highlighted with primary color.",
+      "total-summary": "Top-right summary showing total votes, turnout percentage, and timestamp of last update.",
+      "vote-bar-row": "Repeating row (d-row) containing option label, bar fill, and percentage text. Each row represents one vote option.",
+      "option-label": "Fixed-width label (120px) on left of row displaying the vote option text in semibold 14px type.",
+      "bar-fill": "Horizontal bar with animated fill width matching percentage. Color-coded by option semantic: success/destructive/neutral.",
+      "percentage-text": "Right-aligned monospace numeric showing percentage and raw count (e.g. '62% (4,218)').",
+      "comment-snippet": "Expandable box below each bar showing 1-2 representative comments in italic with quote marks. 2-line clamp with show-more affordance."
+    }
+  },
+  "responsive": {
+    "mobile": "Option labels move above bars (stacked). Comment snippets collapse to count badge with expand-to-view. Demographic toggle scrolls horizontally. Pie preset stacks vertically.",
+    "tablet": "Standard horizontal layout with condensed labels. Pie preset shows side-by-side.",
+    "desktop": "Full layout with all elements visible and hover tooltips on bars showing detailed breakdown."
+  },
+  "layout_hints": {
+    "results_priority": "Option labels, percentages, and counts should be readable in one quick scan before comments or demographic slicing deepen the interpretation.",
+    "toggle_role": "Demographic toggles should clearly frame how the data is being sliced without overshadowing the actual vote results.",
+    "comment_support": "Comment snippets are contextual evidence, not the main chart. Keep them visually subordinate to the tally bars."
+  },
+  "layout_hints": {
+    "results_priority": "Option labels, percentages, and counts should be readable in one quick scan before comments or demographic slicing deepen the interpretation.",
+    "toggle_role": "Demographic toggles should clearly frame how the data is being sliced without overshadowing the actual vote results.",
+    "comment_support": "Comment snippets are contextual evidence, not the main chart. Keep them visually subordinate to the tally bars."
+  },
+  "motion": {
+    "micro": {
+      "bar-hover": "bar outline highlight + tooltip fade-in 150ms ease-out",
+      "toggle-change": "active pill slide 200ms spring"
+    },
+    "transitions": {
+      "bar-fill-initial": "width 0 to target 800ms ease-out staggered 100ms per bar",
+      "demographic-switch": "bars re-render with fade-cross 400ms ease-in-out"
+    },
+    "ambient": {
+      "live-update-pulse": "subtle counter tick animation when live results update"
+    }
+  },
+  "interactions": [
+    "animate-on-mount"
+  ],
+  "composition": {
+    "VotingBreakdown": "Root(d-data, stack) > [DemographicToggle + TotalSummary + VoteBarRow* + CommentSnippet*]",
+    "VoteBarRow": "Row(d-row) > [OptionLabel + BarFill(animated) + PercentageText]",
+    "PieVariant": "Grid > [PieChart(svg) + LegendList]",
+    "GroupedVariant": "Stack > GroupSection*(d-section) > [GroupHeader + VoteBarRow*]"
+  },
+  "accessibility": {
+    "role": "figure",
+    "aria-label": "Voting results breakdown",
+    "announcements": [
+      "{option}: {percent}% with {count} votes",
+      "Demographic filter changed to {slice}",
+      "Results updated: {total} total votes"
+    ],
+    "keyboard": [
+      "Tab: cycle through bars and toggles",
+      "Arrow keys: navigate between options",
+      "Enter: expand comment snippets for focused option",
+      "1-9: jump to demographic toggle"
+    ]
+  }
+}