{ "catalogId": "a2ui-atoms-v1", "displayName": "A2UI Multi-Surface Renderer", "type": "application/vnd.a2ui.renderer+json", "atomCount": 474, "compactIndex": "https://a2uicatalog.ai/atoms/index.json", "runbooks": "https://a2uicatalog.ai/runbooks/index.json", "trainingPrompt": "https://a2uicatalog.ai/prompts/training-md-gem.md", "thirdPartyNotices": "https://a2uicatalog.ai/THIRD-PARTY-NOTICES.md", "attributionModel": "Three tiers: 'source' credits derived or adapted work (vendor name + license); 'source_inspiration' credits a visual/pattern origin with no code derivation; atoms with source a2uicatalog and no inspiration field are original. Full notices and per-vendor manifests at /THIRD-PARTY-NOTICES.md and /vendors/.", "atoms": [ { "type": "intro", "description": "Italic series link and/or transparency note shown at the top", "compact_description": "series link or transparency note at article top", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-chat", "email", "pdf", "google-apps-script-web", "mcp-apps" ] }, "fields": { "series_label": "string", "series_url": "url", "continuation": "string (optional)", "note": "string (optional)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "body", "description": "One or more prose paragraphs", "compact_description": "prose paragraph block", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-chat", "email", "pdf", "google-apps-script-web", "mcp-apps" ] }, "fields": { "text": "string" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "heading", "description": "H2 section title", "compact_description": "H2 section title", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-chat", "email", "pdf", "google-apps-script-web", "mcp-apps" ] }, "fields": { "text": "string" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "subheading", "description": "H3 subsection title", "compact_description": "H3 subsection title", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-chat", "email", "pdf", "google-apps-script-web", "mcp-apps" ] }, "fields": { "text": "string" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "quote", "description": "Pull quote or blockquote", "compact_description": "pull quote or blockquote with attribution", "surfaces": { "works_on": [ "web", "google-meet-stage", "email", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "blockquote styling stripped — renders as plain text" } ] }, "fields": { "text": "string", "attribution": "string (optional)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "code", "description": "Fenced code block", "compact_description": "syntax-highlighted fenced code block", "surfaces": { "works_on": [ "web", "google-meet-stage", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "renders as monospace text, no syntax highlighting" }, { "surface": "email", "note": "pre/code styling unreliable across email clients — use plain text or image" } ] }, "fields": { "language": "string", "content": "string" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "pipeline", "description": "Inline left-to-right flow (e.g. build pipeline steps)", "compact_description": "left-to-right step flow diagram", "surfaces": { "works_on": [ "web", "google-meet-stage", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "monospace background stripped — use bullet_list instead" }, { "surface": "email", "note": "background colour unreliable — use bullet_list instead" } ] }, "fields": { "steps": "list[string]" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "bullet_list", "description": "Unordered list with optional bold lead-in per item", "compact_description": "unordered list with optional bold label per item", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-chat", "email", "pdf", "google-apps-script-web", "mcp-apps" ] }, "fields": { "items": [ { "label": "string (optional)", "text": "string" } ] }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "divider", "description": "Visual section break", "compact_description": "horizontal visual section break", "surfaces": { "works_on": [ "web", "google-meet-stage", "email", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "hr not supported in Chat cards — omit or use heading instead" } ] }, "fields": {}, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "youtube", "description": "Responsive 16:9 embedded YouTube video", "compact_description": "responsive 16:9 YouTube embed", "surfaces": { "works_on": [ "web", "google-meet-stage", "mcp-apps" ], "degraded_on": [ { "surface": "google-apps-script-web", "note": "iframe embeds may be blocked by google-apps-script-web CSP in IFRAME sandbox mode" } ], "incompatible_on": [ { "surface": "google-chat", "reason": "iframes not supported — use image with link instead" }, { "surface": "email", "reason": "iframes stripped by all email clients — use image thumbnail with link" }, { "surface": "pdf", "reason": "iframes not renderable in PDF — use image thumbnail" } ] }, "fields": { "url": "string", "caption": "string (optional)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "image", "description": "Single image with caption, hosted at a public URL", "compact_description": "single image with optional caption", "surfaces": { "works_on": [ "web", "google-meet-stage", "email", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "external images may be blocked by Chat security policy — use Chat-hosted URLs" } ] }, "fields": { "url": "string", "alt": "string", "caption": "string (optional)", "width": "string (optional)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "image_pair", "description": "Two images side by side with individual captions", "compact_description": "two images side by side with captions", "surfaces": { "works_on": [ "web", "google-meet-stage", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "table layout may reflow — use two separate image blocks instead" }, { "surface": "email", "note": "side-by-side layout unreliable on mobile email — use two separate images" } ] }, "fields": { "left": { "url": "string", "alt": "string", "caption": "string (optional)" }, "right": { "url": "string", "alt": "string", "caption": "string (optional)" } }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "diagram", "description": "SVG architecture diagram hosted at a public URL", "compact_description": "D2 or SVG architecture diagram", "surfaces": { "works_on": [ "web", "google-meet-stage", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "SVG may not render — use PNG export instead" }, { "surface": "email", "note": "SVG support inconsistent across email clients — use PNG export" } ] }, "fields": { "url": "string", "caption": "string (optional)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "github_repo_card", "description": "GitHub repo card — fetches live star/fork/language/push data from GitHub API at render time and embeds as self-contained HTML", "compact_description": "live GitHub repo card with stars forks and language", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "use repo_links instead — no network fetch at stage render time" }, { "surface": "google-chat", "note": "not supported" }, { "surface": "email", "note": "not supported" }, { "surface": "pdf", "note": "not supported" } ] }, "fields": { "repo": "string", "label": "string", "description": "string" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "repo_links", "description": "Formatted GitHub repo link list at end of article", "compact_description": "styled GitHub repo link list", "surfaces": { "works_on": [ "web", "google-meet-stage", "email", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "list styling stripped — renders as plain links" } ] }, "fields": { "links": [ { "label": "string", "url": "string" } ] }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "closing", "description": "Final paragraph + optional hashtags", "compact_description": "article closing paragraph with hashtags", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-chat", "email", "pdf", "google-apps-script-web", "mcp-apps" ] }, "fields": { "text": "string", "tags": "list[string] (optional)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "callout", "description": "Highlighted alert box — info, warning, tip, or danger", "compact_description": "coloured tip info warning or danger highlight box", "surfaces": { "works_on": [ "web", "google-meet-stage", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "border-left and background colour stripped — use bold text prefix instead" }, { "surface": "email", "note": "background colour unreliable — test across clients or use plain bold text" } ] }, "fields": { "kind": "info | warning | tip | danger", "title": "string (optional)", "text": "string" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "steps", "description": "Numbered sequential steps with blue circle indicators", "compact_description": "numbered step-by-step instruction sequence", "surfaces": { "works_on": [ "web", "google-meet-stage", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "custom list styling stripped — use bullet_list with manual numbering" }, { "surface": "email", "note": "flexbox layout unreliable — use ordered_list or bullet_list" } ] }, "fields": { "items": [ { "label": "string (optional)", "text": "string" } ] }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "table", "description": "HTML table with styled headers, alternating rows, horizontal scroll", "compact_description": "data table with header row on mobile", "surfaces": { "works_on": [ "web", "google-meet-stage", "email", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "HTML tables not supported in Chat cards — use bullet_list or key_value instead" } ] }, "fields": { "caption": "string (optional)", "headers": "list[string]", "rows": "list[list[string]]", "col_widths": "list[string] (optional, added 2026-07-24). One CSS width per column (e.g. [\"46%\",\"18%\",\"18%\",\"18%\"]), switches to table-layout:fixed. Without it, a long label in one column can pull free space away from short single-glyph cells in the others." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "tabs", "description": "CSS-only tabbed panels — ideal for multi-language code examples", "compact_description": "tabbed content panels", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": null, "incompatible_on": [ { "surface": "google-chat", "reason": "CSS radio button trick not supported — use separate code blocks" }, { "surface": "email", "reason": "CSS :checked not supported in email — use separate code blocks" }, { "surface": "pdf", "reason": "interactive CSS not renderable — use separate code blocks" } ] }, "fields": { "accent": "string (optional)", "tabs": [ { "label": "string", "language": "string", "content": "string" } ] }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "key_value", "description": "Key-value table for env vars, config options, API fields", "compact_description": "label and value pairs in a compact grid", "surfaces": { "works_on": [ "web", "google-meet-stage", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "table layout stripped — use bullet_list with bold keys instead" }, { "surface": "email", "note": "table styling may vary — test or use bullet_list" } ] }, "fields": { "title": "string (optional)", "items": [ { "key": "string", "description": "string", "required": "bool (optional)", "default": "string (optional)" } ] }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "before_after", "description": "Side-by-side code comparison — red/green panels showing old vs new", "compact_description": "side-by-side code or content before and after comparison approach", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "pdf", "note": "colour panels may not export cleanly — use two separate code blocks" } ], "incompatible_on": [ { "surface": "google-chat", "reason": "side-by-side layout and colour styling not supported — use two code blocks" }, { "surface": "email", "reason": "flexbox and background colour unreliable — use two separate code blocks" } ] }, "fields": { "language": "string", "before": "string", "after": "string", "before_label": "string (optional)", "after_label": "string (optional)", "caption": "string (optional)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "api_reference", "description": "Full API/function reference block — name, description, parameters table,", "compact_description": "API endpoint method parameters and response docs returns, example", "surfaces": { "works_on": [ "web", "google-meet-stage", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "complex table layout not supported — use key_value + code block instead" }, { "surface": "email", "note": "nested table styling unreliable — use key_value + code block" } ] }, "fields": { "name": "string", "kind": "function | endpoint | class | method", "method": "string (optional)", "description": "string", "deprecated": "bool (optional)", "parameters": [ { "name": "string", "type": "string", "required": "bool (optional)", "description": "string", "default": "string (optional)" } ], "returns": "string (optional)", "example": { "label": "string (optional)", "language": "string", "code": "string" } }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "gallery", "description": "Responsive image grid with CSS-only lightbox on click", "compact_description": "scrollable image gallery grid", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "CSS :target lightbox may not work in iframe — images show without lightbox" }, { "surface": "pdf", "note": "grid renders but lightbox is non-functional — use image_pair or image" } ], "incompatible_on": [ { "surface": "google-chat", "reason": "CSS grid and :target not supported — use image_pair instead" }, { "surface": "email", "reason": "CSS grid and :target stripped — use individual image blocks" } ] }, "fields": { "cols": "2 | 3 | 4 (optional, default 3)", "caption": "string (optional)", "images": [ { "url": "string", "alt": "string", "caption": "string (optional)" } ] }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "video_pair", "description": "Two YouTube videos side by side with optional labels", "compact_description": "two videos side by side", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": null, "incompatible_on": [ { "surface": "google-chat", "reason": "iframes not supported — use two image thumbnails with links" }, { "surface": "email", "reason": "iframes stripped — use image thumbnails with links" }, { "surface": "pdf", "reason": "iframes not renderable — use image thumbnails" } ] }, "fields": { "caption": "string (optional)", "left": { "url": "string", "label": "string (optional)" }, "right": { "url": "string", "label": "string (optional)" } }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "carousel", "description": "CSS-only sliding carousel with dot indicators and prev/next arrows", "compact_description": "horizontally scrollable card carousel", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "pdf", "note": "only first slide renders — use gallery instead" } ], "incompatible_on": [ { "surface": "google-chat", "reason": "CSS radio button trick not supported — use image_pair or gallery" }, { "surface": "email", "reason": "CSS :checked not supported in email — use individual images" } ] }, "fields": { "accent": "string (optional)", "caption": "string (optional)", "slides": [ { "url": "string", "label": "string (optional)", "subtitle": "string (optional)" } ] }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "timeline", "description": "Vertical timeline with dot connectors, date badges, tag pills", "compact_description": "chronological event timeline", "surfaces": { "works_on": [ "web", "google-meet-stage", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "flexbox layout and custom styling stripped — use bullet_list with bold dates" }, { "surface": "email", "note": "flexbox unreliable on mobile email — use bullet_list with bold dates" } ] }, "fields": { "title": "string (optional)", "accent": "string (optional)", "events": [ { "date": "string", "label": "string", "text": "string", "tag": "string (optional)" } ] }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "annotated_code", "description": "Code block with numbered yellow callout bubbles on specific lines,", "compact_description": "code block with numbered callout bubbles on specific lines explanation list below", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "pdf", "note": "callout bubbles may not render inline — consider code + steps instead" } ], "incompatible_on": [ { "surface": "google-chat", "reason": "inline flexbox badges not supported — use code block + bullet_list" }, { "surface": "email", "reason": "inline positioning unreliable — use code block + bullet_list" } ] }, "fields": { "language": "string", "code": "string", "caption": "string (optional)", "annotations": [ { "line": "integer", "text": "string" } ] }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "stat_card", "description": "Glowing neon stat card — large value with label and optional delta", "compact_description": "single KPI value with label delta and accent colour indicator", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "pdf", "note": "glow animations not rendered — displays as flat card" } ], "incompatible_on": [ { "surface": "google-chat", "reason": "complex CSS not supported — use key_value or body instead" }, { "surface": "email", "reason": "CSS gradients and animations unreliable — use plain text" } ] }, "fields": { "value": "string", "label": "string", "delta": "string (optional)", "is_up": "bool (optional)", "accent": "string (optional)" }, "source": { "name": "UIverse.io community", "url": "https://uiverse.io", "license": "MIT" } }, { "type": "progress_bar", "description": "Animated CSS progress bar with glow pulse effect", "compact_description": "labelled horizontal progress bar with percentage", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "pdf", "note": "animation not rendered — shows static bar" } ], "incompatible_on": [ { "surface": "google-chat", "reason": "CSS animations not supported — use bullet_list or body" }, { "surface": "email", "reason": "CSS animations stripped — use plain percentage text" } ] }, "fields": { "value": "integer (0-100)", "label": "string", "accent": "string (optional)", "show_percent": "bool (optional)", "caption": "string (optional)" }, "source": { "name": "UIverse.io community", "url": "https://uiverse.io", "license": "MIT" } }, { "type": "badge_group", "description": "Group of coloured status badges with optional pulse animation — green/cyan/blue/yellow/red/purple/grey", "compact_description": "row of coloured label badges", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "email", "note": "background colours may vary — test or use plain text labels" }, { "surface": "pdf", "note": "pulse animations not rendered — badges display as flat" } ], "incompatible_on": [ { "surface": "google-chat", "reason": "inline flex and border-radius not supported — use bullet_list" } ] }, "fields": { "title": "string (optional)", "badges": [ { "text": "string", "color": "green|cyan|blue|yellow|red|purple|grey", "pulse": "bool (optional)" } ] }, "source": { "name": "UIverse.io community", "url": "https://uiverse.io", "license": "MIT" } }, { "type": "sparkline", "description": "Renders a small, simple line chart without axes or coordinates, showing", "compact_description": "inline SVG trend line chart general trends.", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": null, "incompatible_on": [ { "surface": "google-chat", "reason": "Requires SVG or Canvas rendering which is not supported. Consider `metric_delta` or `trend_indicator` for textual trends." }, { "surface": "email", "reason": "Requires dynamic rendering or complex image generation, not suitable for static email content." }, { "surface": "pdf", "reason": "Requires dynamic rendering or complex image generation, not suitable for static PDF content." } ] }, "fields": { "data": "list of numbers (e.g., [10, 12, 8, 15, 13])", "color": "string (hex or named color, e.g., '#4CAF50' or 'green')", "line_width": "number (e.g., 2)", "height": "string (CSS height value, e.g., '20px')", "width": "string (CSS width value, e.g., '80px')" }, "source": { "name": "UIverse.io community", "url": "https://uiverse.io", "license": "MIT" } }, { "type": "heatmap", "description": "Renders a graphical representation of data where individual values", "compact_description": "grid heatmap coloured by intensity value are represented as colors in a matrix.", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": null, "incompatible_on": [ { "surface": "google-chat", "reason": "Requires complex grid and color rendering which is not supported. No direct alternative." }, { "surface": "email", "reason": "Requires complex rendering (SVG/Canvas/CSS Grid), not suitable for static email content." }, { "surface": "pdf", "reason": "Requires complex rendering (SVG/Canvas/CSS Grid), not suitable for static PDF content." } ] }, "fields": { "data": "list of lists of numbers (e.g., [[1, 2, 3], [4, 5, 6]])", "labels_x": "list of strings (labels for the x-axis, e.g., ['Mon', 'Tue', 'Wed'])", "labels_y": "list of strings (labels for the y-axis, e.g., ['AM', 'PM'])", "color_scale": "list of strings (colors for the gradient, e.g., ['#FFFFFF', '#FF0000'] for white to red)", "unit": "string (optional, unit for the data values, e.g., '°C')" }, "source": { "name": "UIverse.io community", "url": "https://uiverse.io", "license": "MIT" } }, { "type": "punch_card", "description": "Renders a Day-of-Week vs. Hour-of-Day bubble grid (punch card) of repository or commit activity, where bubble size is proportional to activity.", "compact_description": "7x24 grid of glowing activity bubbles representing hourly commits", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": null, "incompatible_on": [ { "surface": "google-chat", "reason": "Requires complex SVG bubble rendering which is not supported." }, { "surface": "email", "reason": "Requires SVG, not supported in static emails." }, { "surface": "pdf", "reason": "Requires SVG, not supported in static PDFs." } ] }, "fields": { "data": "list of lists of numbers (7 rows representing days of week, each containing 24 numbers representing commit frequency for each hour)", "labels_days": "list of strings (optional, e.g., ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'])", "color": "string (optional, hex or named color for active bubbles, e.g., '#00f2ff')", "title": "string (optional, title of the repository or chart, e.g., 'Commit Activity')", "subtitle": "string (optional, subtitle, e.g., 'curtiskrygier/meetstudio')" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "sankey_flow", "description": "Renders a flow diagram (Sankey flow) where left-hand source nodes connect to right-hand target nodes via beautiful, curved gradient Bezier bands.", "compact_description": "curved dual-column gradient flow diagram for financial or pipeline streams", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": null, "incompatible_on": [ { "surface": "google-chat", "reason": "Requires complex SVG path calculations." }, { "surface": "email", "reason": "Requires SVG, not supported in static emails." }, { "surface": "pdf", "reason": "Requires SVG, not supported in static PDFs." } ] }, "fields": { "nodes": "list of dictionaries representing columns (e.g., [{'id': 'revenue', 'label': 'Revenue', 'column': 0, 'color': '#10b981'}, ...])", "links": "list of dictionaries representing flows (e.g., [{'source': 'revenue', 'target': 'marketing', 'value': 25000, 'color': '#38bdf8'}, ...])", "title": "string (optional, title of the chart, e.g., 'Financial Flow Allocation')" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "cohort_retention", "description": "Renders a SaaS subscription or customer cohort retention triangular matrix with color-coded continuous gradients.", "compact_description": "triangular cohort retention grid with continuous color-scale rendering", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": null, "incompatible_on": [ { "surface": "google-chat", "reason": "Requires complex triangular layout and color scale." }, { "surface": "email", "reason": "Requires SVG or CSS grid." }, { "surface": "pdf", "reason": "Requires SVG or CSS grid." } ] }, "fields": { "cohorts": "list of dictionaries representing cohorts (e.g., [{'cohort_name': 'Jan 2026', 'original_size': 2500, 'retention_rates': [100.0, 93.4]}])", "periods": "list of strings representing period headers (e.g., ['Month 0', 'Month 1'])", "color_scale": "list of strings representing the continuous color scale (e.g., ['#1e293b', '#10b981'])", "title": "string (optional, chart title, e.g., 'SaaS Retention Cohorts')" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "donut_stat", "description": "Renders a single key metric with a surrounding donut chart indicating", "compact_description": "CSS ring chart with centre value and percentage its proportion or progress.", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Only the metric value, label, and percentage will be rendered as text. The visual donut chart is not supported." } ], "incompatible_on": [ { "surface": "email", "reason": "Requires SVG or Canvas rendering for the donut chart, which is not supported in email clients." }, { "surface": "pdf", "reason": "Requires dynamic rendering for the donut chart, not suitable for static PDF content." } ] }, "fields": { "value": "number (the current value, e.g., 75)", "max_value": "number (the maximum possible value, e.g., 100)", "label": "string (descriptive label for the metric, e.g., 'Completion')", "unit": "string (optional, unit for the value, e.g., '%')", "color": "string (hex or named color for the donut segment, e.g., '#2196F3')", "size": "string (CSS size value, e.g., '100px')" }, "source": { "name": "UIverse.io community", "url": "https://uiverse.io", "license": "MIT" } }, { "type": "metric_delta", "description": "Renders a key performance indicator with its current value and a numerical", "compact_description": "big number metric with directional change indicator or percentage", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-chat", "email", "pdf", "google-apps-script-web", "mcp-apps" ] }, "fields": { "label": "string (descriptive label for the metric, e.g., 'Sales')", "current_value": "string (the current formatted value, e.g., '$12,345')", "delta_value": "string (the formatted change value, e.g., '+$1,234' or '+10%')", "delta_type": "enum (increase, decrease, no_change) - determines icon/color", "unit": "string (optional, unit for the current value, e.g., 'USD')", "previous_period_label": "string (optional, e.g., 'vs. last month')" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "task_list", "description": "Renders a premium, glassmorphic checklist and action item tracker with status checkboxes, priorities, assignees, and due dates.", "compact_description": "glassmorphic structured checklist with priority and assignee badges", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": null, "incompatible_on": [ { "surface": "google-chat", "reason": "Requires detailed HTML/SVG listing styles." }, { "surface": "email", "reason": "Requires complex SVG layouts." }, { "surface": "pdf", "reason": "Requires interactive layout rendering." } ] }, "fields": { "title": "string (optional, e.g., 'Google Tasks & Action Items')", "tasks": "list of dictionaries representing tasks, where each dictionary contains: {'id': string, 'text': string, 'completed': boolean, 'priority': string (high|medium|low), 'due_date': string (optional), 'assignee': string (optional, initials e.g. 'CK')}" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "sentiment_summary", "description": "Renders an emotional summary and sentiment tracker for a call or meeting, showing positive/negative/neutral mix, sentiment index progress arc, and emotional journey area timeline.", "compact_description": "meeting sentiment analyzer with index arc and timeline chart", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": null, "incompatible_on": [ { "surface": "google-chat", "reason": "Requires complex SVG emotional timeline path rendering." }, { "surface": "email", "reason": "Requires SVG path calculations." }, { "surface": "pdf", "reason": "Requires dynamic visual projections." } ] }, "fields": { "title": "string (optional, e.g., 'Call Sentiment & Mood Analysis')", "sentiment_index": "number representing overall positive sentiment percentage (0-100, e.g., 78)", "emotional_journey": "list of numbers representing call sentiment score over time intervals (values -1.0 to 1.0, e.g., [0.1, -0.2, 0.4, 0.8, 0.6])", "themes": "list of dictionaries representing key themes with weights or moods: [{'theme': 'Technical Alignment', 'mood': 'Analytical', 'score': 85}, ...]" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "trend_indicator", "description": "Renders a simple visual indicator (e.g., arrow, icon) representing", "compact_description": "compact inline value with mini trend bar the direction of a", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-chat", "email", "pdf", "google-apps-script-web", "mcp-apps" ] }, "fields": { "trend_direction": "enum (up, down, stable) - determines the icon or arrow direction", "label": "string (descriptive text for the trend, e.g., 'Improving', 'Declining', 'Steady')", "context": "string (optional, additional context, e.g., 'over last 30 days')", "color": "string (optional, hex or named color for the indicator, e.g., 'green' for 'up', 'red' for 'down')" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "breadcrumb", "description": "A navigation aid indicating the user's current location within a hierarchical", "compact_description": "navigation breadcrumb trail structure.", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Renders as a series of linked text elements without visual separators or interactive styling." }, { "surface": "email", "note": "Renders as a simple list of text links, losing interactive styling and visual separators." }, { "surface": "pdf", "note": "Renders as a simple list of text links, losing interactive styling and visual separators." } ] }, "fields": { "items": "list of {label: string, url: string, is_current: boolean}" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "pagination", "description": "A control for navigating through a series of pages or results.", "compact_description": "page number controls", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Renders as a set of buttons or text links. Complex styling and active page indication might be limited." }, { "surface": "email", "note": "Renders as a simple list of links, losing interactive styling and current page indication." }, { "surface": "pdf", "note": "Renders as a simple list of links, losing interactive styling and current page indication." } ] }, "fields": { "current_page": "integer", "total_pages": "integer", "base_url": "string (the URL prefix for all page links)", "page_param": "string (e.g., 'page', the query parameter name for the page number)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "stepper", "description": "Vertical step sequence where completed steps show an animated SVG checkmark draw, the active step pulses with a sonar-style glow ring, and pending steps are muted. State is driven by active_index — a single integer the agent increments as each step completes. No JavaScript required.", "compact_description": "CSS animated vertical step sequence with checkmark draw and active pulse", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-side-panel", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Renders as a plain text list with emoji status markers; no connectors or animation." }, { "surface": "email", "note": "Renders as a simple ordered list; no visual states." }, { "surface": "pdf", "note": "Renders as a static ordered list at the active_index state; no animation." } ] }, "fields": { "steps": "list of strings or {label, description} objects. Each step in the sequence.", "active_index": "integer (optional, default 0). Index of the currently executing step. Steps before it are completed; steps after are pending.", "color": "string (optional). Accent colour for completed/active states. Default \"#38bdf8\".", "label": "string (optional). Heading above the step list." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "tab_bar", "description": "A horizontal navigation component displaying a set of clickable tabs,", "compact_description": "horizontal tab navigation bar typically leading to different sections or pages.", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Renders as a series of buttons or text links. Visual tab styling and active state might be limited." }, { "surface": "email", "note": "Renders as a simple list of links, losing visual tab styling and active state." }, { "surface": "pdf", "note": "Renders as a simple list of links, losing visual tab styling and active state." } ] }, "fields": { "tabs": "list of {label: string, url: string, is_active: boolean, icon: string (optional, e.g., 'home')}" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "anchor_list", "description": "A list of links that navigate to specific sections within the current", "compact_description": "in-page anchor navigation links document or to external URLs.", "surfaces": { "works_on": [ "web", "google-meet-stage", "email", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Renders as a list of hyperlinks. Internal document anchors are not supported; links must point to external URLs or other cards." } ] }, "fields": { "anchors": "list of {label: string, url: string, target_id: string (optional, for in-document navigation on web/pdf)}" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "faq_accordion", "description": "Renders a list of questions and answers, where answers are hidden until", "compact_description": "collapsible FAQ question and answer list the question is clicked.", "surfaces": { "works_on": [ "web", "google-meet-stage", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Renders as a simple list of questions and answers without interactive collapse/expand functionality." }, { "surface": "email", "note": "Renders as a simple list of questions and answers without interactive collapse/expand functionality." } ] }, "fields": { "items": "list of objects, each with 'question' (string) and 'answer' (string)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "glossary_term", "description": "Renders a term with its definition, often with an optional link for", "compact_description": "definition term with explanation more details.", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-chat", "email", "pdf", "google-apps-script-web", "mcp-apps" ] }, "fields": { "term": "string (the term itself)", "definition": "string (the explanation)", "link_text": "optional string (e.g., \"Learn more\")", "link_url": "optional string (URL for more details)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "footnote", "description": "Renders a numbered footnote reference and its corresponding text, typically", "compact_description": "numbered footnote reference at the bottom of a section or page.", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-chat", "email", "pdf", "google-apps-script-web", "mcp-apps" ] }, "fields": { "number": "integer (the footnote number)", "text": "string (the footnote content)", "id": "string (unique identifier for linking, e.g., \"fn1\")" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "blockquote_with_avatar", "description": "Renders a blockquote with an associated avatar and attribution.", "compact_description": "testimonial quote with avatar and attribution", "surfaces": { "works_on": [ "web", "google-meet-stage", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Renders as a simple blockquote with text attribution; avatar image is not supported." }, { "surface": "email", "note": "Renders as a simple blockquote with text attribution; avatar image is not supported." } ] }, "fields": { "quote": "string (the quoted text)", "author_name": "string (name of the person quoted)", "author_title": "optional string (title or role of the person)", "avatar_url": "optional string (URL to the author's avatar image)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "pull_stat", "description": "Renders a prominent, large statistic or number, often with a brief", "compact_description": "large display number pulled from prose for emphasis descriptive label.", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-chat", "email", "pdf", "google-apps-script-web", "mcp-apps" ] }, "fields": { "value": "string (the prominent number/statistic, e.g., \"99%\", \"1.2M\")", "label": "string (descriptive text for the stat, e.g., \"customer satisfaction\")", "unit": "optional string (e.g., \"%\", \"users\", \"USD\")", "color": "optional string (hex code or named color for the value)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "accordion_item", "description": "Renders a single section of content that can be expanded or collapsed", "compact_description": "single collapsible section with toggle by clicking its header, using only CSS.", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": null, "incompatible_on": [ { "surface": "google-chat", "reason": "Relies on CSS `:checked` pseudo-class for interactivity, which is not supported." }, { "surface": "email", "reason": "Relies on CSS `:checked` pseudo-class for interactivity, which is not supported." }, { "surface": "pdf", "reason": "Relies on CSS `:checked` pseudo-class for interactivity, which is not supported." } ] }, "fields": { "header": "string The title or label for the collapsible section.", "content": "string The main content to be shown or hidden." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "tooltip", "description": "Renders a small, informational popup that appears when a user hovers", "compact_description": "hover tooltip on a trigger element over a specified trigger element, using only CSS.", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": null, "incompatible_on": [ { "surface": "google-chat", "reason": "Relies on CSS `:hover` pseudo-class for interactivity, which is not supported." }, { "surface": "email", "reason": "Relies on CSS `:hover` pseudo-class for interactivity, which is not supported." }, { "surface": "pdf", "reason": "Relies on CSS `:hover` pseudo-class for interactivity, which is not supported." } ] }, "fields": { "trigger_text": "string The text or element that, when hovered, reveals the tooltip.", "tooltip_content": "string The content displayed within the tooltip." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "hover_card", "description": "Renders a rich content card that appears when a user hovers over a", "compact_description": "rich hover card revealed on mouse over specified trigger element, using only CSS.", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": null, "incompatible_on": [ { "surface": "google-chat", "reason": "Relies on CSS `:hover` pseudo-class for interactivity, which is not supported." }, { "surface": "email", "reason": "Relies on CSS `:hover` pseudo-class for interactivity, which is not supported." }, { "surface": "pdf", "reason": "Relies on CSS `:hover` pseudo-class for interactivity, which is not supported." } ] }, "fields": { "trigger_element": "string The text or element that, when hovered, reveals the card.", "card_title": "string The title of the hover card.", "card_content": "string The main content of the hover card, can include rich text or simple HTML.", "card_image_url": "string, optional An optional image to display within the card." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "collapsible_panel", "description": "Renders a standalone section of content that can be toggled between", "compact_description": "expandable content panel with header toggle visible and hidden states by clicking a control, using only CSS.", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": null, "incompatible_on": [ { "surface": "google-chat", "reason": "Relies on CSS `:checked` pseudo-class for interactivity, which is not supported." }, { "surface": "email", "reason": "Relies on CSS `:checked` pseudo-class for interactivity, which is not supported." }, { "surface": "pdf", "reason": "Relies on CSS `:checked` pseudo-class for interactivity, which is not supported." } ] }, "fields": { "toggle_label": "string The text for the control that expands/collapses the content.", "initial_state": "string, default \"collapsed\" The initial state of the panel (\"expanded\" or \"collapsed\").", "content": "string The main content to be shown or hidden." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "css_modal", "description": "Renders a modal dialog that appears on click and can be dismissed,", "compact_description": "pure-CSS modal dialog triggered by checkbox controlled purely by CSS without JavaScript.", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": null, "incompatible_on": [ { "surface": "google-chat", "reason": "Relies on CSS `:checked` pseudo-class for interactivity and fixed positioning, which are not supported." }, { "surface": "email", "reason": "Relies on CSS `:checked` pseudo-class for interactivity and fixed positioning, which are not supported." }, { "surface": "pdf", "reason": "Relies on CSS `:checked` pseudo-class for interactivity and fixed positioning, which are not supported." } ] }, "fields": { "trigger_text": "string The text or element that, when clicked, opens the modal.", "modal_title": "string The title displayed at the top of the modal.", "modal_body": "string The main content of the modal dialog.", "close_button_label": "string, default \"Close\" The label for the button to close the modal." }, "source": { "name": "UIverse.io community", "url": "https://uiverse.io", "license": "MIT" } }, { "type": "audio_player", "description": "Renders an embedded audio player for a given URL.", "compact_description": "inline audio player with controls", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Renders as a clickable link to the audio file, no embedded player." }, { "surface": "email", "note": "Renders as a clickable link to the audio file, no embedded player." } ] }, "fields": { "audio_url": "string", "title": "string", "autoplay": "boolean", "loop": "boolean" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "audio_link", "description": "Renders a clickable link to an audio file, often with an audio icon.", "compact_description": "styled link to an audio file", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-chat", "email", "pdf", "google-apps-script-web", "mcp-apps" ] }, "fields": { "audio_url": "string", "label": "string", "icon_type": "string" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "pdf_preview", "description": "Renders an image thumbnail of a PDF document with a link to the full", "compact_description": "embedded PDF preview panel PDF.", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Renders as an image followed by a clickable link to the PDF, without complex layout." }, { "surface": "email", "note": "Renders as an image followed by a clickable link to the PDF, without complex layout." } ] }, "fields": { "pdf_url": "string", "thumbnail_url": "string", "title": "string", "alt_text": "string" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "document_link", "description": "Renders a clickable link to a document (e.g., PDF, DOCX), often with", "compact_description": "styled link to a downloadable document a document icon.", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-chat", "email", "pdf", "google-apps-script-web", "mcp-apps" ] }, "fields": { "document_url": "string", "label": "string", "icon_type": "string" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "video_thumbnail", "description": "Renders a static image thumbnail for a video, with a play icon overlay", "compact_description": "clickable video thumbnail with play button and a link to the video source.", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Renders as an image followed by a clickable link to the video, no play icon overlay." }, { "surface": "email", "note": "Renders as an image followed by a clickable link to the video, no play icon overlay." } ] }, "fields": { "video_url": "string", "thumbnail_url": "string", "alt_text": "string", "title": "string" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "video_card", "description": "Renders a card with a video thumbnail, title, and description, linking", "compact_description": "video with title description and metadata to the video source.", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Renders as a basic card with image, title, description, and link, without advanced styling." }, { "surface": "email", "note": "Renders as a basic card with image, title, description, and link, without advanced styling." } ] }, "fields": { "video_url": "string", "thumbnail_url": "string", "title": "string", "description": "string", "alt_text": "string" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "code_diff", "description": "Unified diff view computed server-side via Python difflib. Added lines have a green left border and fade-in background; removed lines have red. Unchanged context lines are neutral. Optional line numbers, language badge, and title. No JavaScript required — diff is computed at render time, not in the browser.", "compact_description": "server-side unified diff view with green additions and red removals", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-side-panel", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Renders as plain monospace text block; no colour highlighting." }, { "surface": "pdf", "note": "Renders as a static diff without colour; additions and removals shown with +/- prefix only." } ], "incompatible_on": [ { "surface": "email", "reason": "CSS background-color and border-left highlighting stripped by email clients." } ] }, "fields": { "old_code": "string. The original text (before state).", "new_code": "string. The updated text (after state).", "label": "string (optional). Title shown in the header bar.", "language": "string (optional). Language badge shown in header, e.g. \"python\", \"typescript\".", "show_line_numbers": "bool (optional). Show line numbers. Default true.", "context_lines": "integer (optional). Unchanged lines shown around each change. Default 3." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "code_snippet_pair", "description": "Renders two distinct code snippets side-by-side or stacked, without", "compact_description": "two code blocks side by side without diff highlighting diff highlighting.", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Renders code snippets stacked vertically instead of side-by-side." }, { "surface": "email", "note": "Renders code snippets stacked vertically instead of side-by-side." } ] }, "fields": { "left_code": "string", "right_code": "string", "language": "string", "left_label": "string", "right_label": "string" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "framed_screenshot", "description": "Renders an image within a decorative frame, simulating a device (e.g.,", "compact_description": "device-framed screenshot with optional caption browser, phone).", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": null, "incompatible_on": [ { "surface": "google-chat", "reason": "Requires complex CSS for device framing, which is not supported." }, { "surface": "email", "reason": "Requires complex CSS for device framing, which is not supported." }, { "surface": "pdf", "reason": "Requires complex CSS for device framing, which is not supported." } ] }, "fields": { "image_url": "string", "alt_text": "string", "device_type": "string", "caption": "string" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "image_with_caption", "description": "Renders a single image with a descriptive caption below it.", "compact_description": "image with styled caption below", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-chat", "email", "pdf", "google-apps-script-web", "mcp-apps" ] }, "fields": { "image_url": "string", "alt_text": "string", "caption": "string", "link_url": "string" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "alert_banner", "description": "A prominent banner displaying a message, often with an icon and an", "compact_description": "full-width status alert strip optional action.", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Renders as a basic card with text and button; no custom icons, complex layouts, or animations." } ], "incompatible_on": [ { "surface": "email", "reason": "Relies on complex CSS for layout, icons, and interactive elements which are not reliably supported." } ] }, "fields": { "message": "string The main message to display in the banner.", "type": "string The type of alert (e.g., \"info\", \"warning\", \"error\", \"success\").", "icon": "string Optional icon name to display next to the message.", "action_label": "string Optional text for an action button.", "action_url": "string Optional URL for the action button." }, "source": { "name": "UIverse.io community", "url": "https://uiverse.io", "license": "MIT" } }, { "type": "toast_notification", "description": "A fixed-position slide-in notification toast that appears from a corner of the viewport, holds for 3.5 seconds, then slides back out — all via CSS keyframes. Renders a viewport placeholder in the article flow with the toast positioned fixed above it.", "compact_description": "CSS slide-in/out fixed-position notification toast", "surfaces": { "works_on": [ "web", "google-apps-script-side-panel", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Fixed positioning relative to Meet iframe; renders at iframe edge" }, { "surface": "pdf", "note": "Renders as a styled notification card inline (not fixed)" }, { "surface": "google-chat", "note": "Renders as a plain notification text card" } ], "incompatible_on": [ { "surface": "email", "reason": "CSS keyframe animations and fixed positioning not supported" } ] }, "fields": { "title": "string (optional). Bold notification title. Default \"Changes saved\".", "message": "string (optional). Body text. Default \"Your updates have been applied successfully.\"", "variant": "\"success\" | \"error\" | \"info\" | \"warning\" (optional, default \"success\")", "position": "\"bottom-right\" | \"bottom-left\" | \"top-right\" | \"top-left\" (optional, default \"bottom-right\")" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "loading_skeleton", "description": "A placeholder UI that shows the structure of content while it's loading,", "compact_description": "animated placeholder skeleton while content loads indicating active data fetching.", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": null, "incompatible_on": [ { "surface": "google-chat", "reason": "Google Chat does not support custom UI elements with animated loading states." }, { "surface": "email", "reason": "Email does not support custom UI elements with animated loading states." } ] }, "fields": { "shape": "string The general shape of the content being loaded (e.g., \"card\", \"list\", \"text_block\").", "lines": "integer The number of lines of text to simulate in the skeleton.", "has_image": "boolean Indicates if the skeleton should include an image placeholder." }, "source": { "name": "UIverse.io community", "url": "https://uiverse.io", "license": "MIT" } }, { "type": "empty_state", "description": "A UI pattern displayed when there is no data to show, often with an", "compact_description": "zero-data empty state with icon and call to action image, message, and an optional call to action.", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Renders as a basic card with image, title, text, and button; limited layout flexibility and styling." }, { "surface": "email", "note": "Renders as a basic block with image, title, text, and button; limited layout flexibility and styling." } ] }, "fields": { "image_url": "string Optional URL for an illustrative image.", "title": "string The main title for the empty state.", "description": "string A descriptive message explaining why the state is empty.", "action_label": "string Optional text for a call to action button.", "action_url": "string Optional URL for the call to action button." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "spinner", "description": "A simple rotating animation indicating that content is loading or an", "compact_description": "loading spinner indicator operation is in progress.", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": null, "incompatible_on": [ { "surface": "google-chat", "reason": "Google Chat does not support custom animated loading indicators." }, { "surface": "email", "reason": "Email does not support custom animated loading indicators." } ] }, "fields": { "size": "string The size of the spinner (e.g., \"small\", \"medium\", \"large\").", "color": "string The color of the spinner (e.g., \"primary\", \"gray\")." }, "source": { "name": "UIverse.io community", "url": "https://uiverse.io", "license": "MIT" } }, { "type": "status_pill", "description": "A small, colored label or \"pill\" used to display a concise status for", "compact_description": "coloured status pill badge an item.", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Renders as plain text; no custom background colors, rounded corners, or advanced styling." }, { "surface": "email", "note": "Renders as plain text; limited styling for background colors or rounded corners." } ] }, "fields": { "label": "string The text label for the status.", "color": "string The semantic color of the pill (e.g., \"success\", \"warning\", \"error\", \"info\", \"neutral\").", "icon": "string Optional icon to display within the pill." }, "source": { "name": "UIverse.io community", "url": "https://uiverse.io", "license": "MIT" } }, { "type": "inline_feedback_message", "description": "A small, contextual message displayed inline with content, often used", "compact_description": "inline success error or warning message for validation feedback or hints.", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Renders as basic text; no custom icons, colors, or complex inline styling." }, { "surface": "email", "note": "Renders as basic text; no custom icons, colors, or complex inline styling." } ] }, "fields": { "message": "string The feedback message text.", "type": "string The type of feedback (e.g., \"success\", \"error\", \"warning\", \"info\").", "icon": "string Optional icon to display next to the message." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "rating_stars", "description": "A visual component allowing users to rate an item using a series of", "compact_description": "star rating display stars, or displaying a static rating.", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Can display static stars using Unicode characters or images, but no interactive rating functionality." }, { "surface": "email", "note": "Can display static stars using Unicode characters or images, but no interactive rating functionality." } ] }, "fields": { "rating": "integer The current rating value (e.g., 3 for 3 stars).", "max_rating": "integer The maximum possible rating (e.g., 5 for 5 stars).", "is_interactive": "boolean Indicates if the stars are clickable for user input." }, "source": { "name": "UIverse.io community", "url": "https://uiverse.io", "license": "MIT" } }, { "type": "progress_circle", "description": "SVG circular progress arc that animates from 0 to the target value on mount using CSS stroke-dashoffset transition. Percentage is displayed in the centre. Replaces the prior placeholder implementation with a proper animated SVG arc. No JavaScript required.", "compact_description": "CSS stroke-dashoffset animated SVG progress arc with centre percentage", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-side-panel", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "pdf", "note": "Renders as a static arc at target value without mount animation" } ], "incompatible_on": [ { "surface": "google-chat", "reason": "Google Chat does not support custom SVG or CSS-animated progress arcs." }, { "surface": "email", "reason": "SVG animation not supported in email clients." } ] }, "fields": { "value": "integer. The progress value (0–100).", "label": "string (optional). Caption text below the circle.", "color": "string (optional). Arc stroke colour. Default \"#38bdf8\".", "size": "\"sm\" | \"md\" | \"lg\" (optional, default \"md\"). Circle diameter." }, "source": { "name": "UIverse.io community", "url": "https://uiverse.io", "license": "MIT" } }, { "type": "action_required_card", "description": "A card highlighting an important status or issue that requires immediate", "compact_description": "prominent card prompting a required user action user attention,", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-chat", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "email", "note": "Renders as a basic block with title, description, and button; limited layout and styling options." } ] }, "fields": { "title": "string The main title of the card, indicating the required action.", "description": "string A detailed explanation of the action needed.", "action_label": "string The text for the primary action button.", "action_url": "string The URL for the primary action button.", "icon": "string Optional icon to display on the card." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "feature_matrix", "description": "Renders a table comparing features across multiple products or versions.", "compact_description": "features versus plans comparison matrix", "surfaces": { "works_on": [ "web", "google-meet-stage", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Renders as a series of lists or key-value pairs due to lack of table support." } ], "incompatible_on": [ { "surface": "email", "reason": "Complex table layouts may not render consistently across email clients." } ] }, "fields": { "product_names": "array", "features": "array" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "pricing_tier_card", "description": "Renders a single pricing plan with its name, price, key features, and", "compact_description": "single pricing plan card with features list an optional call to action.", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-chat", "email", "pdf", "google-apps-script-web", "mcp-apps" ] }, "fields": { "plan_name": "string", "price": "string", "currency": "string", "frequency": "string", "features": "array", "call_to_action_label": "string", "call_to_action_url": "string", "is_highlighted": "boolean" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "pricing_tier_group", "description": "Renders a collection of pricing tier cards, typically for comparing", "compact_description": "side-by-side pricing plan comparison different subscription plans.", "surfaces": { "works_on": [ "web", "google-meet-stage", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Renders as stacked individual cards or sections within a single card." }, { "surface": "email", "note": "Renders as stacked blocks without complex column layouts." } ] }, "fields": { "tiers": "array" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "pros_cons_list", "description": "Renders a two-column list itemizing advantages and disadvantages for", "compact_description": "two-column pros and cons comparison a single subject.", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-chat", "email", "pdf", "google-apps-script-web", "mcp-apps" ] }, "fields": { "subject": "string", "pros": "array", "cons": "array" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "side_by_side_spec", "description": "Renders a detailed comparison of two items, displaying their attributes", "compact_description": "two items compared spec by spec and values side-by-side.", "surfaces": { "works_on": [ "web", "google-meet-stage", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Renders as stacked lists of attributes and values for each item." } ], "incompatible_on": [ { "surface": "email", "reason": "Complex side-by-side layouts may not render consistently across email clients." } ] }, "fields": { "item_a_name": "string", "item_b_name": "string", "specs": "array" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "product_spec_table", "description": "Renders a table detailing technical specifications or features for", "compact_description": "product specifications in a clean table a single product.", "surfaces": { "works_on": [ "web", "google-meet-stage", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Renders as a list of key-value pairs." } ], "incompatible_on": [ { "surface": "email", "reason": "Complex table layouts may not render consistently across email clients." } ] }, "fields": { "product_name": "string", "specs": "array" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "comparison_grid", "description": "Renders a grid comparing multiple products or services with features,", "compact_description": "multi-item attribute comparison grid often using icons or checkmarks to indicate presence.", "surfaces": { "works_on": [ "web", "google-meet-stage", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Renders as a simplified list of products with their features, losing grid layout and icons." }, { "surface": "email", "note": "Renders as stacked blocks without complex grid layouts, potentially losing icons." } ] }, "fields": { "products": "array", "features": "array" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "versus_block", "description": "Renders a block explicitly comparing two entities with a prominent", "compact_description": "head-to-head two-option versus card \"VS\" separator.", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Renders as two stacked cards, losing the explicit 'VS' visual separation." }, { "surface": "email", "note": "Renders as two stacked blocks, losing the explicit 'VS' visual separation and side-by-side layout." } ] }, "fields": { "entity_a_name": "string", "entity_a_description": "string", "entity_a_image_url": "string", "entity_b_name": "string", "entity_b_description": "string", "entity_b_image_url": "string", "comparison_points": "array" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "rating_comparison", "description": "Renders a comparison of multiple items based on star ratings or numerical", "compact_description": "multiple items rated across dimensions scores.", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-chat", "email", "pdf", "google-apps-script-web", "mcp-apps" ] }, "fields": { "items": "array" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "capability_checklist", "description": "Renders a list of capabilities, indicating which items possess each", "compact_description": "feature capability tick list per tier capability using checkmarks", "surfaces": { "works_on": [ "web", "google-meet-stage", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Renders as a simplified list of capabilities with text indicators for each item." } ], "incompatible_on": [ { "surface": "email", "reason": "Table-like structures with checkmarks may not render consistently across email clients." } ] }, "fields": { "capability_names": "array", "items": "array" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "toggle_switch", "description": "Renders a visual on/off switch.", "compact_description": "CSS toggle switch input", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": null, "incompatible_on": [ { "surface": "google-chat", "reason": "CSS pseudo-classes like :checked and advanced styling are not supported." }, { "surface": "email", "reason": "CSS pseudo-classes like :checked and advanced styling are not supported." }, { "surface": "pdf", "reason": "Interactivity and advanced CSS are not supported." } ] }, "fields": { "label": "string", "is_checked": "boolean", "name": "string" }, "source": { "name": "UIverse.io community", "url": "https://uiverse.io", "license": "MIT" } }, { "type": "expandable_text", "description": "Renders a block of text that can be expanded or collapsed to reveal", "compact_description": "truncated text with read more expand toggle more content.", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": null, "incompatible_on": [ { "surface": "google-chat", "reason": "CSS pseudo-classes like :checked or :target and dynamic content display are not supported." }, { "surface": "email", "reason": "CSS pseudo-classes like :checked or :target and dynamic content display are not supported." }, { "surface": "pdf", "reason": "Interactivity and advanced CSS are not supported." } ] }, "fields": { "summary": "string", "details": "string", "initial_state_expanded": "boolean" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "flip_card", "description": "Renders a card with a front and back side that flips on interaction.", "compact_description": "card that flips on hover to reveal back content", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": null, "incompatible_on": [ { "surface": "google-chat", "reason": "CSS transforms, transitions, and pseudo-classes like :hover are not supported." }, { "surface": "email", "reason": "CSS transforms, transitions, and pseudo-classes like :hover are not supported." }, { "surface": "pdf", "reason": "Interactivity and advanced CSS are not supported." } ] }, "fields": { "front_content": "string", "back_content": "string", "trigger_on_hover": "boolean" }, "source": { "name": "UIverse.io community", "url": "https://uiverse.io", "license": "MIT" } }, { "type": "image_hotspots", "description": "Renders an image with interactive points that display information on", "compact_description": "image with clickable annotated hotspot overlays hover.", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": null, "incompatible_on": [ { "surface": "google-chat", "reason": "CSS positioning, pseudo-classes like :hover, and dynamic content display are not supported." }, { "surface": "email", "reason": "CSS positioning, pseudo-classes like :hover, and dynamic content display are not supported." }, { "surface": "pdf", "reason": "Interactivity and advanced CSS are not supported." } ] }, "fields": { "image_url": "string", "alt_text": "string", "hotspots": "list of objects with label, x_position, y_position, content" }, "source": { "name": "UIverse.io community", "url": "https://uiverse.io", "license": "MIT" } }, { "type": "css_dropdown_menu", "description": "Renders a menu that appears when a trigger element is hovered or focused.", "compact_description": "pure-CSS dropdown navigation menu", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": null, "incompatible_on": [ { "surface": "google-chat", "reason": "CSS pseudo-classes like :hover or :focus-within and dynamic display are not supported." }, { "surface": "email", "reason": "CSS pseudo-classes like :hover or :focus-within and dynamic display are not supported." }, { "surface": "pdf", "reason": "Interactivity and advanced CSS are not supported." } ] }, "fields": { "trigger_text": "string", "menu_items": "list of objects with label, url" }, "source": { "name": "UIverse.io community", "url": "https://uiverse.io", "license": "MIT" } }, { "type": "star_rating_input", "description": "Renders an interactive star rating component for user input.", "compact_description": "interactive star rating input", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": null, "incompatible_on": [ { "surface": "google-chat", "reason": "CSS pseudo-classes like :checked and :hover for interactive forms are not supported." }, { "surface": "email", "reason": "CSS pseudo-classes like :checked and :hover for interactive forms are not supported." }, { "surface": "pdf", "reason": "Interactivity and advanced CSS are not supported." } ] }, "fields": { "max_stars": "integer", "initial_rating": "integer", "name": "string" }, "source": { "name": "UIverse.io community", "url": "https://uiverse.io", "license": "MIT" } }, { "type": "segmented_control", "description": "Renders a group of mutually exclusive buttons for selection, styled", "compact_description": "mutually exclusive option selector strip as a single control.", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": null, "incompatible_on": [ { "surface": "google-chat", "reason": "CSS pseudo-classes like :checked and advanced styling for form elements are not supported." }, { "surface": "email", "reason": "CSS pseudo-classes like :checked and advanced styling for form elements are not supported." }, { "surface": "pdf", "reason": "Interactivity and advanced CSS are not supported." } ] }, "fields": { "options": "list of objects with label, value", "selected_value": "string", "name": "string" }, "source": { "name": "UIverse.io community", "url": "https://uiverse.io", "license": "MIT" } }, { "type": "zoomable_image", "description": "Renders an image that magnifies when hovered over.", "compact_description": "image with click-to-zoom lightbox", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": null, "incompatible_on": [ { "surface": "google-chat", "reason": "CSS transforms, transitions, and pseudo-classes like :hover are not supported." }, { "surface": "email", "reason": "CSS transforms, transitions, and pseudo-classes like :hover are not supported." }, { "surface": "pdf", "reason": "Interactivity and advanced CSS are not supported." } ] }, "fields": { "image_url": "string", "alt_text": "string", "zoom_factor": "float" }, "source": { "name": "UIverse.io community", "url": "https://uiverse.io", "license": "MIT" } }, { "type": "custom_checkbox_group", "description": "Renders a group of custom-styled checkboxes allowing multiple selections.", "compact_description": "styled checkbox group input", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": null, "incompatible_on": [ { "surface": "google-chat", "reason": "CSS pseudo-classes like :checked and advanced styling for form elements are not supported." }, { "surface": "email", "reason": "CSS pseudo-classes like :checked and advanced styling for form elements are not supported." }, { "surface": "pdf", "reason": "Interactivity and advanced CSS are not supported." } ] }, "fields": { "group_label": "string", "options": "list of objects with label, value, is_checked", "name": "string" }, "source": { "name": "UIverse.io community", "url": "https://uiverse.io", "license": "MIT" } }, { "type": "css_slide_panel", "description": "Renders a panel that slides into view from the side of the screen on", "compact_description": "CSS-only slide-in panel drawer activation.", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": null, "incompatible_on": [ { "surface": "google-chat", "reason": "CSS transforms, transitions, and pseudo-classes like :target or :checked are not supported." }, { "surface": "email", "reason": "CSS transforms, transitions, and pseudo-classes like :target or :checked are not supported." }, { "surface": "pdf", "reason": "Interactivity and advanced CSS are not supported." } ] }, "fields": { "trigger_text": "string", "panel_content": "string", "slide_from_side": "string" }, "source": { "name": "UIverse.io community", "url": "https://uiverse.io", "license": "MIT" } }, { "type": "testimonial_card", "description": "Renders a single customer testimonial with text, author details, and", "compact_description": "customer testimonial with photo name and quote an optional avatar.", "surfaces": { "works_on": [ "web", "google-meet-stage", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Renders as basic text and author name; avatar and complex styling are not supported." }, { "surface": "email", "note": "Renders as basic text and author name; avatar and complex styling may be rendered as a simple image or not at all depending on client." } ] }, "fields": { "text": "string", "author_name": "string", "author_title": "string", "author_avatar_url": "string", "rating": "integer" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "star_rating_display", "description": "Renders a visual representation of a star rating, optionally with a", "compact_description": "read-only star rating with score and count total review count.", "surfaces": { "works_on": [ "web", "google-meet-stage", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Renders as text (e.g., '4.5 stars') or using emoji stars; visual styling of stars is not supported." }, { "surface": "email", "note": "Renders as text (e.g., '4.5 stars') or a static image; interactive or dynamic star rendering is not supported." } ] }, "fields": { "rating": "number", "max_rating": "integer", "review_count": "integer" }, "source": { "name": "UIverse.io community", "url": "https://uiverse.io", "license": "MIT" } }, { "type": "avatar_group", "description": "Renders a stack or row of small user avatars, often indicating a group", "compact_description": "stacked user avatar group with overflow count or community.", "surfaces": { "works_on": [ "web", "google-meet-stage", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Renders as a limited number of small images or a text count; stacking/overlapping is not supported." }, { "surface": "email", "note": "Renders as a limited number of small images or a text count; stacking/overlapping is not reliably supported across clients." } ] }, "fields": { "avatars": "list", "total_count": "integer", "label": "string" }, "source": { "name": "UIverse.io community", "url": "https://uiverse.io", "license": "MIT" } }, { "type": "contributor_list", "description": "Renders a list of individuals who have contributed to a project or", "compact_description": "list of contributors with avatar and role community, with their", "surfaces": { "works_on": [ "web", "google-meet-stage", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Renders as a basic text list; avatars and rich formatting are not supported." }, { "surface": "email", "note": "Renders as a basic text list; avatars and rich formatting may be rendered as simple images or not at all." } ] }, "fields": { "contributors": "list", "title": "string" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "customer_logo_grid", "description": "Renders a grid or row of logos from featured customers or partners.", "compact_description": "grid of customer or partner logos", "surfaces": { "works_on": [ "web", "google-meet-stage", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Renders as a limited number of stacked images or a text list of names; grid layout is not supported." }, { "surface": "email", "note": "Renders as a limited number of stacked images or a text list of names; grid layout is not reliably supported across clients." } ] }, "fields": { "logos": "list", "title": "string" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "social_proof_banner", "description": "Renders a prominent banner highlighting a key social proof metric or", "compact_description": "social proof strip with stats and logos achievement.", "surfaces": { "works_on": [ "web", "google-meet-stage", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Renders as basic text and icon; banner styling and rich layout are not supported." }, { "surface": "email", "note": "Renders as basic text and icon; banner styling and rich layout may be rendered as a simple image or not at all." } ] }, "fields": { "metric_value": "string", "metric_label": "string", "icon_url": "string", "link_url": "string" }, "source": { "name": "UIverse.io community", "url": "https://uiverse.io", "license": "MIT" } }, { "type": "media_mention_card", "description": "Renders a card showcasing a mention or feature in a media publication.", "compact_description": "press or media mention with logo and quote", "surfaces": { "works_on": [ "web", "google-meet-stage", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Renders as basic text and publication logo; card styling and rich layout are not supported." }, { "surface": "email", "note": "Renders as basic text and publication logo; card styling and rich layout may be rendered as a simple image or not at all." } ] }, "fields": { "publication_name": "string", "publication_logo_url": "string", "headline": "string", "article_url": "string", "date": "string" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "expert_endorsement", "description": "Renders an endorsement from an industry expert, including their quote,", "compact_description": "expert quote with credentials and photo name, and credentials.", "surfaces": { "works_on": [ "web", "google-meet-stage", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Renders as basic text and expert name; avatar and rich formatting are not supported." }, { "surface": "email", "note": "Renders as basic text and expert name; avatar and rich formatting may be rendered as a simple image or not at all." } ] }, "fields": { "quote": "string", "expert_name": "string", "expert_title": "string", "expert_organization": "string", "expert_avatar_url": "string" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "review_callout", "description": "Renders a short, impactful quote from a customer review, often accompanied", "compact_description": "highlighted customer review excerpt by a star rating.", "surfaces": { "works_on": [ "web", "google-meet-stage", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Renders as basic text and author name; star rating may be shown as emojis or text." }, { "surface": "email", "note": "Renders as basic text and author name; star rating may be shown as a static image or text." } ] }, "fields": { "review_text": "string", "author_name": "string", "rating": "number", "max_rating": "integer", "product_name": "string" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "social_feed_embed", "description": "Renders an embedded snippet of a social media post, such as a tweet", "compact_description": "embedded social media post or feed or Instagram post.", "surfaces": { "works_on": [ "web", "google-meet-stage", "mcp-apps" ], "degraded_on": [ { "surface": "google-apps-script-web", "note": "social platform iframes generally blocked by X-Frame-Options" } ], "incompatible_on": [ { "surface": "google-chat", "reason": "Google Chat does not support embedding arbitrary HTML or iframes for social media posts." }, { "surface": "email", "reason": "Email clients do not support embedding arbitrary HTML or iframes for social media posts." }, { "surface": "pdf", "reason": "PDFs are static documents and do not support interactive embeds or iframes." } ] }, "fields": { "embed_code": "string", "platform": "string", "post_url": "string" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "terminal_block", "description": "Renders a static or interactive command-line interface terminal window showing input commands and output logs.", "compact_description": "display terminal commands and code output in a simulated console window", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Interactive copy-to-clipboard actions and prompt animations are disabled." }, { "surface": "google-chat", "note": "Renders as standard unformatted monospace text block without terminal window aesthetics." }, { "surface": "email", "note": "CSS styling for terminal headers and simulated window controls are stripped or flattened." } ] }, "fields": { "command": "string. The execution command displayed at the prompt.", "output": "string. The stdout or stderr text block response from the command.", "shell": "string: bash | zsh | powershell | cmd. The console design theme." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "file_tree", "description": "Renders a hierarchical layout displaying directory structures, folders, and individual files for software projects.", "compact_description": "present hierarchical directory structures and files for software project navigation", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Nested toggle states and hover highlights are completely unavailable." }, { "surface": "google-chat", "note": "Flattens to a plain text bulleted list using indentation characters." }, { "surface": "email", "note": "Dynamic expanding or collapsing of directory nodes is non-functional." } ] }, "fields": { "nodes": "array. Highly structured list of folder and file objects with nesting indicators." }, "source": { "name": "shadcn/ui", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "tabbed_code", "description": "Renders multiple code snippets organized inside an interactive, multi-tab container component.", "compact_description": "organize multiple programming language snippets inside an interactive tab container", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Tab switching logic feels slow or becomes unresponsive." }, { "surface": "google-chat", "note": "Displays all code blocks sequentially or drops all but the first tab." }, { "surface": "email", "note": "Interactivity is broken so all snippet variations render stacked vertically." } ] }, "fields": { "tabs": "array. Collection of objects containing the language identifier, tab label, and code string." }, "source": { "name": "shadcn/ui", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "http_request_block", "description": "Renders a formatted API request block displaying the HTTP method badge, URL endpoint, headers, and body.", "compact_description": "document REST API endpoints with HTTP methods, headers, and payloads", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Layout shifts or responsive styling can clip wide URL strings." }, { "surface": "google-chat", "note": "Strips method badges and colors, rendering as basic raw markdown text." }, { "surface": "email", "note": "Complex inline structures and method badge background colors drop out." } ] }, "fields": { "method": "string: GET | POST | PUT | DELETE | PATCH. The HTTP verb.", "url": "string. The fully qualified or relative API endpoint route.", "headers": "object. Key-value pairs detailing required HTTP headers.", "body": "string. Optional request payload, typically stringified JSON." }, "source": { "name": "Flowbite", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "env_var_list", "description": "Renders a clear configuration list detailing system environment variable keys, descriptions, and default values.", "compact_description": "list configuration environment variables with descriptions and default values", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Copy shortcuts and secret-masking toggle utilities are disabled." }, { "surface": "google-chat", "note": "Falls back to a standard markdown definition list without visual separation." }, { "surface": "email", "note": "Table alignment borders can break depending on the email client." } ] }, "fields": { "variables": "array. List of objects including key name, description, requirement status, and default." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "prerequisite_checklist", "description": "Renders a callout box highlighting required tools, knowledge, or setups needed before starting a guide.", "compact_description": "highlight prerequisite knowledge and system requirements before", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Converts the warning wrapper box into a standard unstyled text list." }, { "surface": "email", "note": "Custom background colors and alert icons are dropped by basic client engines." } ] }, "fields": { "title": "string. Custom header text for the prerequisite warning block.", "items": "array. Strings containing descriptions of individual setup requirements." }, "source": { "name": "Flowbite", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "keyboard_shortcut", "description": "Renders inline text visual tags mimicking keyboard keys to highlight shortcuts or hotkey combinations.", "compact_description": "display visual keyboard key combinations for application shortcuts and hotkeys", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Discards button styles and shows plain text characters in brackets." }, { "surface": "email", "note": "Key cap shadows and rounded corners are flattened by client processors." } ] }, "fields": { "keys": "array. Individual key characters like Ctrl, Shift, or C to join.", "action": "string. The function or command triggered by the keystroke combination." }, "source": { "name": "Flowbite", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "api_param_table", "description": "Renders a structured documentation table outlining parameter fields, data types, requirements, and fallback options.", "compact_description": "reference table detailing API parameters, data types, and default values", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Wide table blocks introduce harsh horizontal scrolling on restricted screen areas." }, { "surface": "google-chat", "note": "Complete loss of structural grids, collapsing into standard text sentences." }, { "surface": "email", "note": "Responsive tabular configurations fail, causing text truncation or line wrapping." } ] }, "fields": { "parameters": "array. Objects defining name, type, required flag, default value, and description." }, "source": { "name": "shadcn/ui", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "version_badge", "description": "Displays a small visual tag showing software release or dependency version numbers.", "compact_description": "software release or dependency version number tag", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Renders as unstyled plain text in brackets instead of a colored badge." }, { "surface": "email", "note": "Custom border radius and background colors may fail to render." } ] }, "fields": { "version": "string. The semantic version number or release label to display.", "status": "string: stable | beta | alpha | rc. The lifecycle stage." }, "source": { "name": "Flowbite", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "deprecation_notice", "description": "Displays a prominent warning banner indicating a feature or API is no longer supported.", "compact_description": "warning banner for deprecated features or unsupported APIs", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Box styling lost, collapses into standard text with manual prefix." }, { "surface": "email", "note": "Alert background colors and icons frequently drop out." } ] }, "fields": { "alternative": "string. Recommended migration path or replacement feature.", "removal_version": "string. Optional version when the feature will be removed." }, "source": { "name": "shadcn/ui", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "experimental_banner", "description": "Renders a callout box identifying a feature or code path as experimental or unstable.", "compact_description": "highlight experimental or unstable feature notice callout", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Converted into basic text without protective boundary boxes." }, { "surface": "email", "note": "Colorful alert panels flatten to default background containers." } ] }, "fields": { "message": "string. Context or feedback links for the unstable feature." }, "source": { "name": "Flowbite", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "cli_command", "description": "Displays a copyable single-line command-line prompt for terminal execution.", "compact_description": "copyable single-line terminal command execution string", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Interactive copy mechanics are disabled." }, { "surface": "google-chat", "note": "Loses dark console background, shows as basic inline code." }, { "surface": "email", "note": "Inline code background and execution symbols often stripped." } ] }, "fields": { "command": "string. The exact shell command to be copied and executed." }, "source": { "name": "UIverse.io community", "url": "https://uiverse.io/", "license": "MIT" } }, { "type": "copy_code_button", "description": "Renders a discrete interactive button that copies associated text or code to the clipboard.", "compact_description": "button to copy specified text or code to clipboard", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Clipboard API operations are blocked or unsupported." }, { "surface": "google-chat", "note": "Hidden entirely — interactive buttons not supported in message layouts." }, { "surface": "email", "note": "JavaScript clipboard actions fail completely in client sandboxes." } ] }, "fields": { "text_to_copy": "string. The raw string content sent to clipboard when clicked." }, "source": { "name": "UIverse.io community", "url": "https://uiverse.io/", "license": "MIT" } }, { "type": "log_output", "description": "Displays a scrollable monospace block containing raw system or compilation log strings.", "compact_description": "scrollable monospace server or compiler log output block", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "High-frequency scrollbars are restricted or difficult to navigate." }, { "surface": "google-chat", "note": "Large logs cause truncation or massive message overflow." }, { "surface": "email", "note": "Max-height constraints fail, expanding the log indefinitely." } ] }, "fields": { "logs": "string. The raw console log output text block." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "json_tree_viewer", "description": "Displays a nested, expandable visual explorer for structural JSON data objects.", "compact_description": "expandable visual explorer for nested JSON data", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Dynamic node toggles and mouse interaction fully disabled." }, { "surface": "google-chat", "note": "Collapses into a raw non-interactive string code block." }, { "surface": "email", "note": "Interactive expanding nodes fail, forcing full vertical expansion." } ] }, "fields": { "data": "string. The raw valid JSON string to parse and render." }, "source": { "name": "shadcn/ui", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "key_takeaways", "description": "Displays a highlighted summary box containing critical bullet points from an article.", "compact_description": "highlighted summary of main conclusions and critical takeaways", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Outer borders disappear, presenting as plain bullet lists." }, { "surface": "email", "note": "Background gradients and accent borders dropped by standard clients." } ] }, "fields": { "points": "array. Core sentences highlighting the key learnings." }, "source": { "name": "Flowbite", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "summary_box", "description": "Renders a condensed overview panel summarising article content at a glance.", "compact_description": "condensed introductory panel with article overview", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Outer wrapper styling drops, showing standard paragraph text." }, { "surface": "email", "note": "Container spacing and custom padding are compressed." } ] }, "fields": { "text": "string. The summary narrative block." }, "source": { "name": "shadcn/ui", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "learning_objectives", "description": "Displays a checklist-style panel outlining competencies a reader will gain from the content.", "compact_description": "checklist of educational goals and competencies gained post-reading", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Target icons convert back to standard text bullets." }, { "surface": "email", "note": "Custom check icons and borders fail to display." } ] }, "fields": { "objectives": "array. Statements describing individual knowledge achievements." }, "source": { "name": "Flowbite", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "changelog_entry", "description": "Renders a single timeline entry documenting additions, fixes, or modifications in a software release.", "compact_description": "timeline entry documenting product modifications per release", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Timeline vertical paths and relative positioning can misalign." }, { "surface": "google-chat", "note": "Visual timeline tracks collapse into standard header lists." }, { "surface": "email", "note": "Left margin tracks and connection lines disappear on older renderers." } ] }, "fields": { "version": "string. The release tag or identifier.", "date": "string. The publication date of the changes.", "changes": "array. Objects outlining specific features modified, categorised by type." }, "source": { "name": "shadcn/ui", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "release_notes", "description": "Displays a grouped publication document containing categorised changes for a version launch.", "compact_description": "grouped product release documentation by change category", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Multi-column grouping panels flatten to markdown segments." }, { "surface": "email", "note": "Segment grid structures drop, rendering all elements stacked." } ] }, "fields": { "title": "string. Header name for the release notice.", "added": "array. Optional new features added in this release.", "fixed": "array. Optional bugs resolved in this release.", "changed": "array. Optional modifications to existing behaviour." }, "source": { "name": "Flowbite", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "further_reading", "description": "Displays a curated list of links and references for extending understanding beyond the article.", "compact_description": "curated references for extending topic research", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Rich link metadata cards degrade into simple bracketed URLs." }, { "surface": "email", "note": "Tracking parameters on anchor links may flag spam filters." } ] }, "fields": { "links": "array. Objects containing resource titles, URLs, and brief annotations." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "resources_list", "description": "Renders a clean inventory list of downloadable assets or reference files with metadata.", "compact_description": "downloadable project assets and attached resource links", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "File size badges and download icons are discarded." }, { "surface": "email", "note": "Dynamic download metrics and layouts fail to display." } ] }, "fields": { "items": "array. Download assets containing title, size, type, and url." }, "source": { "name": "Flowbite", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "sidebar_note", "description": "Displays an off-axis callout block containing peripheral thoughts, caveats, or fun facts.", "compact_description": "off-axis container for peripheral notes or caveats", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Floating side positions collapse inline due to confined viewport." }, { "surface": "google-chat", "note": "Absolute placement breaks, pushing text inline with the message." }, { "surface": "email", "note": "Multi-column side floats drop, forcing block underneath normal text." } ] }, "fields": { "title": "string. The headline for the side note.", "content": "string. The note content." }, "source": { "name": "shadcn/ui", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "difficulty_badge", "description": "Displays a small visual marker representing the technical complexity level of an article.", "compact_description": "label technical complexity level of blog content", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Renders as unstyled plain text instead of a color-coded label." }, { "surface": "email", "note": "Custom background and border treatments may fail to display." } ] }, "fields": { "level": "string: beginner | intermediate | advanced. The target audience expertise tier." }, "source": { "name": "Flowbite", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "caution_block", "description": "Renders a high-visibility callout box warning readers about potential pitfalls or destructive actions.", "compact_description": "highlight dangerous pitfalls or critical destructive actions", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Collapses into plain unbordered body copy sentences." }, { "surface": "email", "note": "Accent borders and caution colors stripped by simple processors." } ] }, "fields": { "message": "string. The warning content." }, "source": { "name": "shadcn/ui", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "checklist_interactive", "description": "Renders a list of items with actionable checkboxes for readers to track task progress.", "compact_description": "interactive task tracking checklist for article milestones", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Interactive checking performs sluggishly." }, { "surface": "google-chat", "note": "Degrades into a static markdown bullet list." }, { "surface": "email", "note": "Dynamic check state saving is completely broken." } ] }, "fields": { "items": "array. Individual checkpoint task strings." }, "source": { "name": "Flowbite", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "glossary_inline", "description": "Renders a specialised inline element displaying technical term definitions on hover.", "compact_description": "inline hover tooltips for complex technical term definitions", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Hover tooltips and interactive gestures fail to initialise." }, { "surface": "google-chat", "note": "Drops definition utility, leaves only the term text." }, { "surface": "email", "note": "Floating elements fail, rendering definitions invisible." } ] }, "fields": { "term": "string. The technical phrase needing definition.", "definition": "string. Explanation displayed when term is activated." }, "source": { "name": "shadcn/ui", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "time_estimate", "description": "Displays the estimated duration required to fully read or complete an article.", "compact_description": "estimated reading duration badge for article content", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Falls back to raw text timing statement." }, { "surface": "email", "note": "Badge decorations fail to scale or colour." } ] }, "fields": { "minutes": "integer. The estimated reading time in minutes." }, "source": { "name": "Flowbite", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "progress_checkpoint", "description": "Displays an indicator showing the reader's current location within a multi-step sequence.", "compact_description": "milestone progress indicator across multi-step tutorial", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Live progression trackers fail to update." }, { "surface": "google-chat", "note": "Renders as simple numbered fraction text." }, { "surface": "email", "note": "Step wizard layout flattens to default text." } ] }, "fields": { "current_step": "integer. The current active step index.", "total_steps": "integer. Total steps in the sequence." }, "source": { "name": "shadcn/ui", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "social_share_bar", "description": "Displays a row of quick-action buttons enabling readers to share the post to external networks.", "compact_description": "social media buttons for sharing article to external networks", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "JavaScript popup triggers are blocked in restricted contexts." }, { "surface": "google-chat", "note": "Hidden — sharing script bindings unavailable." }, { "surface": "email", "note": "Dynamic script-based link builders cannot load inside messages." } ] }, "fields": { "platforms": "array. Permitted networks: twitter | linkedin | facebook | reddit.", "url": "string. Optional URL override, defaults to current page." }, "source": { "name": "UIverse.io community", "url": "https://uiverse.io/", "license": "MIT" } }, { "type": "newsletter_cta", "description": "Displays an input block encouraging readers to subscribe to an email update list.", "compact_description": "email subscription form for recurring reader updates", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Form input handling may block submissions." }, { "surface": "google-chat", "note": "Data capture forms are invalid components." }, { "surface": "email", "note": "Inline forms fail — replace with external link anchor." } ] }, "fields": { "headline": "string. Header message prompting subscription.", "button_label": "string. Optional submit button text, defaults to Subscribe." }, "source": { "name": "Flowbite", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "author_bio_card", "description": "Renders a profile section containing the creator's avatar, bio, and links.", "compact_description": "profile block displaying content creator biographical details", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Avatar drops, flattens to generic markdown text." }, { "surface": "email", "note": "Column layout strips, stacking content blocks vertically." } ] }, "fields": { "name": "string. Full name of the content creator.", "avatar_url": "string. URL to the profile image.", "bio": "string. Short narrative profiling the writer.", "links": "object. Optional key-value pairs of platform names and URLs." }, "source": { "name": "Flowbite", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "related_posts_grid", "description": "Displays a curated grid of preview cards for complementary reading material.", "compact_description": "grid of recommended alternative post reading cards", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Flexbox card sizing fails to size uniformly." }, { "surface": "google-chat", "note": "Collapses into basic single-line hyperlinks." }, { "surface": "email", "note": "CSS grid reverts to simple text list." } ] }, "fields": { "posts": "array. Objects containing title, url, and optional topic." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "series_overview_card", "description": "Renders a navigation box indexing all parts within a multi-part article series.", "compact_description": "navigation index for multi-part article series parts", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Indexed list flattens into single unstyled lines." }, { "surface": "email", "note": "Border tracks and active flags are stripped." } ] }, "fields": { "series_name": "string. Name of the series.", "parts": "array. Objects with title, url, and optional current boolean." }, "source": { "name": "shadcn/ui", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "reaction_group", "description": "Displays an interactive set of emoji elements collecting emotional sentiment feedback from readers.", "compact_description": "emoji reaction counters collecting reader sentiment feedback", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Count animations and click actions trigger slowly." }, { "surface": "google-chat", "note": "Interactive event bindings are blocked entirely." }, { "surface": "email", "note": "Tracking selections are inert without network connection." } ] }, "fields": { "enabled_emojis": "array. Tracked emojis: thumbs_up | heart | rocket | mind_blown." }, "source": { "name": "UIverse.io community", "url": "https://uiverse.io/", "license": "MIT" } }, { "type": "linkedin_post_image", "description": "Renders a styled LinkedIn post image preview (conviction card, stat card, or carousel slide). Screenshot at 1.91:1 ratio for social sharing.", "compact_description": "LinkedIn post image preview — conviction_card, stat_card, or carousel_slide mode", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ] }, "fields": { "mode": "string (optional, \"conviction_card\"|\"stat_card\"|\"carousel_slide\", default \"conviction_card\")", "accent": "string (optional, hex, default \"#7c3aed\")", "quote": "string (conviction_card — main quote text)", "attribution": "string (conviction_card — author/source)", "value": "string (stat_card — big number)", "label": "string (stat_card — metric label)", "title": "string (carousel_slide — slide title)", "body": "string (carousel_slide — slide body)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "share_quote", "description": "Displays a visually distinct callout showcasing a key phrase designed for social clipping.", "compact_description": "prominent blockquote optimised for social media sharing", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Clip-to-copy actions are unavailable." }, { "surface": "google-chat", "note": "Background bars revert to general quote indicators." }, { "surface": "email", "note": "Share action triggers are omitted by sandboxes." } ] }, "fields": { "text": "string. The impactful quote statement.", "author": "string. Optional attribution source." }, "source": { "name": "Flowbite", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "follow_cta", "description": "Renders a banner encouraging readers to connect with official social channels.", "compact_description": "call to action driving social media community expansion", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Callout cards break into fundamental text lines." }, { "surface": "email", "note": "Button backgrounds and icons flatten inside email layers." } ] }, "fields": { "message": "string. Promotional copy driving user interactions.", "platform_links": "object. Platform name keys mapped to target URLs." }, "source": { "name": "Flowbite", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "follow_button", "description": "Displays a single button allowing a user to subscribe directly to a profile.", "compact_description": "direct profile subscription button for social platforms", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Async profile follow tracking may fail to sync." }, { "surface": "google-chat", "note": "Inline action buttons are unsupported." }, { "surface": "email", "note": "Scripted follow actions degrade to plain hyperlinks." } ] }, "fields": { "target_handle": "string. Handle identifier of target profile.", "platform": "string: twitter | github | linkedin. The platform." }, "source": { "name": "UIverse.io community", "url": "https://uiverse.io/", "license": "MIT" } }, { "type": "reading_progress_bar", "description": "Renders a horizontal visual bar tracking the reader's scroll completion depth within the article.", "compact_description": "track and display article reading progress completion status", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "High frequency scroll monitoring triggers suffer from visual frame latency." }, { "surface": "google-chat", "note": "Dynamic scroll tracking layout elements are completely stripped." }, { "surface": "email", "note": "Script-driven viewport position tracking fails in client readers." } ] }, "fields": { "color": "string. Hexadecimal or design utility color token for the bar." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "table_of_contents", "description": "Renders an active list directory of navigation links targeting main content sections.", "compact_description": "navigate article sections using structured heading directory links", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Sticky placement logic loses layout sync relative to video stages." }, { "surface": "google-chat", "note": "Multi-level structure drops, collapsing to plain flat text." }, { "surface": "email", "note": "Scroll monitoring active section highlighting fails completely." } ] }, "fields": { "headings": "array. Structured items detailing section names and anchor tags." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "article_hero", "description": "Renders a prominent visual header displaying title, metadata, and background cover imagery.", "compact_description": "display prominent introductory headline and banner media", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Cover visuals drop, returning unformatted markdown headers." }, { "surface": "email", "note": "Complex layout positioning and custom fonts break down." } ] }, "fields": { "title": "string. Main showcase headline text.", "subtitle": "string. Optional accompanying summary text.", "image_url": "string. URL to header background media." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "scroll_to_top", "description": "Renders an interactive button providing smooth automated viewport reset to page top.", "compact_description": "quickly return viewport to top of page document", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Scroll animation shifts generate noticeable redraw lag." }, { "surface": "google-chat", "note": "Removed — message frames prohibit floating navigation triggers." }, { "surface": "email", "note": "Inline frame actions break across email display engines." } ] }, "fields": { "behavior": "string: smooth | auto. Scroll animation profile." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "article_series_nav", "description": "Renders an organized multi-part sequence navigation panel mapping serial publication installments.", "compact_description": "navigate interconnected parts inside multi-part blog series", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Progress bars convert to basic markdown links." }, { "surface": "email", "note": "Box borders and status indicators stripped by processors." } ] }, "fields": { "series_id": "string. Unique identifier of the series cluster.", "current_part": "integer. Ordered index within series limits." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "embed_codepen", "description": "Renders an embedded interactive CodePen sandbox workspace within the document.", "compact_description": "embed interactive CodePen workspace development environments", "surfaces": { "works_on": [ "web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Live sandboxed tabs and result viewports fail to initialize." }, { "surface": "google-chat", "note": "Blocked — degrades to CodePen URL link." }, { "surface": "email", "note": "Third-party sandboxes reject external frame initialization." }, { "surface": "google-apps-script-web", "note": "external iframe — depends on site's X-Frame-Options; test before use" } ] }, "fields": { "pen_id": "string. Alphanumeric identity of the target snippet.", "user_handle": "string. Profile handle owning the snippet." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "embed_stackblitz", "description": "Renders an integrated live development engine frame executing StackBlitz workspace code.", "compact_description": "embed dynamic StackBlitz live IDE code sandboxes", "surfaces": { "works_on": [ "web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Virtual environments hit thread execution limits within stages." }, { "surface": "google-chat", "note": "Collapses to fallback hyperlinks due to framework policies." }, { "surface": "email", "note": "Sandboxed editor containers completely blocked." }, { "surface": "google-apps-script-web", "note": "external iframe — depends on site's X-Frame-Options; test before use" } ] }, "fields": { "project_id": "string. Folder identity indicator for active workspace." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "embed_gist", "description": "Displays an inline styled snippet view of remote code from GitHub Gists.", "compact_description": "embed version-controlled GitHub Gist source code snippets", "surfaces": { "works_on": [ "web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Script restrictions fallback to basic text links." }, { "surface": "email", "note": "Script inject routines cannot load outside web environments." }, { "surface": "google-apps-script-web", "note": "external iframe — depends on site's X-Frame-Options; test before use" } ] }, "fields": { "gist_id": "string. Hexadecimal identifier for target file fragments." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "embed_tweet", "description": "Displays a fully rendered standalone publication card containing Twitter status data.", "compact_description": "embed live public Twitter status updates and media", "surfaces": { "works_on": [ "web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Resizing widgets fail to track width variations in streams." }, { "surface": "google-chat", "note": "Theme styling collapses to simple quote blocks." }, { "surface": "email", "note": "Runtime engines drop interactive layout cards." }, { "surface": "google-apps-script-web", "note": "Twitter/X iframe often blocked by X-Frame-Options" } ] }, "fields": { "tweet_id": "string. Unique snowflake identifier for the post." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "embed_google_slides", "description": "Renders an interactive presentation iframe viewer loading Google Slides resources.", "compact_description": "embed interactive Google Slides presentation slide decks", "surfaces": { "works_on": [ "web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Slide transitions update sluggishly over video layers." }, { "surface": "google-chat", "note": "Collapses to markdown resource links." }, { "surface": "email", "note": "Slider primitives fail to pass email sandbox parameters." }, { "surface": "google-apps-script-web", "note": "works if viewer has access; Google Slides embeds are generally allowed" } ] }, "fields": { "presentation_id": "string. Asset identifier for the slide file." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "lottie_animation", "description": "Renders an active vector illustration display controlled via Lottie runtime rules.", "compact_description": "render lightweight high-performance vector Lottie animations", "surfaces": { "works_on": [ "web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Multi-frame rendering degrades during active screen streams." }, { "surface": "google-chat", "note": "Vector scripts disappear, producing empty blocks." }, { "surface": "email", "note": "Missing engines stop animation playback." }, { "surface": "google-apps-script-web", "note": "requires lottie-web CDN; add the script tag to your Apps Script HtmlService page" } ] }, "fields": { "src_url": "string. Direct reference path to remote asset configuration.", "loop": "boolean. Whether playback recreates endlessly." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "figma_embed", "description": "Renders a real-time collaborative preview referencing explicit Figma design canvas artboards.", "compact_description": "embed collaborative live Figma design file prototype previews", "surfaces": { "works_on": [ "web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Vector redraw calls strain stage runtime layers." }, { "surface": "google-chat", "note": "Collapses to remote document shortcuts." }, { "surface": "email", "note": "Design tool canvas structures dropped by secure parsers." }, { "surface": "google-apps-script-web", "note": "Figma iframes require Figma auth; test before use" } ] }, "fields": { "embed_url": "string. Absolute sharing path generated by Figma." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "color_swatch_grid", "description": "Displays a grid of color swatches with labels and hex values for design system palettes.", "compact_description": "grid of named color swatches with hex values", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "email", "note": "CSS grid collapses; falls back to inline color names." } ] }, "fields": { "colors": "array of {name, hex}. Color entries to display." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "live_demo_embed", "description": "Embeds a live interactive demo or sandbox within the article.", "compact_description": "embed interactive live demo sandbox iframe", "surfaces": { "works_on": [ "web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Sandboxed iframes blocked by stage security policy." }, { "surface": "google-chat", "note": "Collapses to link." }, { "surface": "email", "note": "Iframes stripped." }, { "surface": "google-apps-script-web", "note": "sandbox iframe restrictions may apply depending on embed target" } ] }, "fields": { "url": "string. URL of the live demo.", "title": "string (optional). Display title." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "benchmark_comparison", "description": "Side-by-side performance benchmark visualization comparing multiple implementations.", "compact_description": "side-by-side performance benchmark comparison bars", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "email", "note": "Renders as plain table." } ] }, "fields": { "items": "array of {label, value}. Benchmark entries." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "chartjs_bar", "description": "Renders an interactive bar chart using Chart.js with configurable datasets.", "compact_description": "interactive Chart.js bar chart with datasets", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Chart.js canvas rendering inconsistent in stage iframe." }, { "surface": "google-chat", "note": "Canvas not supported." }, { "surface": "email", "note": "Canvas stripped." } ] }, "fields": { "labels": "array of strings. X-axis labels.", "datasets": "array of {label, data}. Chart datasets." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "chartjs_line", "description": "Renders an interactive line chart using Chart.js for time-series or trend data.", "compact_description": "interactive Chart.js line chart for trend data", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Canvas rendering inconsistent in stage iframe." }, { "surface": "google-chat", "note": "Canvas not supported." }, { "surface": "email", "note": "Canvas stripped." } ] }, "fields": { "labels": "array of strings. X-axis labels.", "datasets": "array of {label, data}. Chart datasets." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "data_table_sortable", "description": "Renders a data table with client-side column sorting and optional pagination.", "compact_description": "sortable data table with column headers", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Sorting interaction requires JS not available in stage." }, { "surface": "email", "note": "Renders as static table." } ] }, "fields": { "headers": "array of strings. Column headers.", "rows": "array of arrays. Table rows." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" }, "aliases": [ "data_table" ] }, { "type": "metric_comparison_card", "description": "Card comparing a current metric value against a previous period with delta indicator.", "compact_description": "metric card comparing current vs previous period", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "email", "note": "Renders as plain text values." } ] }, "fields": { "label": "string. Metric name.", "value": "number. Current value.", "previous": "number. Previous period value.", "lower_is_better": "boolean (optional, default true). Which direction is GOOD, which decides whether the delta is green or red. Defaults to true because this card was written for response times; set false for traffic, revenue or any metric where a rise is the good outcome." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "mini_sparkline_set", "description": "Compact grid of multiple labeled sparklines for at-a-glance multi-metric comparison.", "compact_description": "compact grid of multiple labeled sparklines", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "email", "note": "SVG sparklines may not render." } ] }, "fields": { "series": "array of {label, data}. Sparkline series." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "status_dashboard", "description": "Compact grid showing live operational status of multiple services with color indicators.", "compact_description": "grid of service status indicators with color states", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "email", "note": "Colour indicators may not render." } ] }, "fields": { "metrics": "array of {label, value, color}. Status entries." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "uptime_timeline", "description": "Visual timeline of service uptime over a rolling window with per-day status blocks.", "compact_description": "30-day uptime timeline with per-day status blocks", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "email", "note": "Colour blocks may collapse." } ] }, "fields": { "uptime": "number. Uptime percentage (0–100)." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "command_palette", "description": "Keyboard-driven command palette overlay for quick navigation and action execution.", "compact_description": "keyboard-driven command palette with shortcut hints", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Keyboard events captured by Meet." }, { "surface": "google-chat", "note": "Interactive overlays not supported." }, { "surface": "email", "note": "Interaction stripped." } ] }, "fields": { "commands": "array of {text, shortcut}. Available commands." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "search_result_card", "description": "Styled card displaying a single search result with title, snippet, and URL.", "compact_description": "single search result card with title snippet URL", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "email", "note": "Renders as plain link." } ] }, "fields": { "title": "string. Result title.", "description": "string. Snippet text.", "url": "string (optional). Result URL." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "post_metadata_bar", "description": "Displays article metadata — author, publish date, read time, and optional tags — in a compact bar.", "compact_description": "article metadata bar with author date read time", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Renders as plain text line." }, { "surface": "email", "note": "Simplified to plain text." } ] }, "fields": { "author": "string. Author display name.", "date": "string. Publish date (YYYY-MM-DD).", "readTime": "integer. Estimated read time in minutes." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "footnote_group", "description": "Renders a numbered list of footnotes at the bottom of an article or section.", "compact_description": "numbered footnote list at section or article end", "surfaces": { "works_on": [ "web", "email", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Footnotes not visible in viewport-fitted stage." } ] }, "fields": { "footnotes": "array of {id, text}. Footnote entries." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "notification_badge", "description": "Small badge overlaid on an icon or element to indicate unread count or alert state.", "compact_description": "unread count badge overlaid on icon element", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Overlay positioning unreliable in stage grid." }, { "surface": "email", "note": "Renders as inline text." } ] }, "fields": { "text": "string. Badge label or count.", "color": "string (optional). Background colour (hex)." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "expandable_list", "description": "Nested tree list where parent items expand to reveal children on click.", "compact_description": "nested expandable tree list with collapsible children", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Expand interaction requires JS not available." }, { "surface": "email", "note": "Renders flat." } ] }, "fields": { "items": "array of {text, children}. Tree nodes." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "poll_block", "description": "Interactive poll with a question and vote-count bar for each option.", "compact_description": "poll with question options and vote count bars", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Voting interaction requires JS not available." }, { "surface": "email", "note": "Renders as plain list of options." } ] }, "fields": { "question": "string. Poll question.", "options": "array of {text, votes}. Poll choices." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "abbr_tooltip", "description": "Inline abbreviation with a tooltip revealing the full expanded form on hover.", "compact_description": "inline abbreviation with hover tooltip full form", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Hover not available; abbreviation shown plain." }, { "surface": "email", "note": "Tooltip stripped; abbreviation shown as text." } ] }, "fields": { "text": "string. The abbreviation to display.", "title": "string. The expanded full form." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "copy_to_clipboard", "description": "Inline code or text element with a one-click copy button that provides feedback on success.", "compact_description": "copy-to-clipboard button with inline code and feedback", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Clipboard API may be blocked." }, { "surface": "email", "note": "Button stripped; shows plain text." } ] }, "fields": { "text": "string. Display label.", "value": "string. Value copied to clipboard." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "conversion_funnel", "description": "Renders a premium pipeline conversion funnel with tapered glowing step bars, percentage conversion rates, and leakage drop-off markers.", "compact_description": "pipeline conversion funnel with step tapering and leak markers", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": null, "incompatible_on": [ { "surface": "google-chat", "reason": "Requires detailed custom SVG drawing." } ] }, "fields": { "title": "string (optional, e.g., 'Acquisition Funnel')", "steps": "list of dictionaries representing funnel stages: [{'stage': 'Visits', 'value': 10000}, {'stage': 'Signups', 'value': 4500}, ...]" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "gauge_sla", "description": "Renders a semi-circular radial gauge track with high contrast status quadrants, a glowing needle tick, and a prominent central KPI readout.", "compact_description": "radial SLA gauge with glowing pointer and large metric value", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": null, "incompatible_on": [ { "surface": "google-chat", "reason": "Requires complex SVG layouts." } ] }, "fields": { "title": "string (optional, e.g., 'API Response SLA')", "value": "number representing current value (e.g., 99.4)", "max_value": "number representing maximum gauge scale (e.g., 100)", "unit": "string (optional, e.g., '%')", "label": "string (optional, e.g., 'SLA Met')" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "stacked_area", "description": "Renders cumulative layered area chart trends utilizing overlapping translucent gradient fills and glowing series borders.", "compact_description": "stacked area chart with overlapping glowing translucent gradients", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": null, "incompatible_on": [ { "surface": "google-chat", "reason": "Requires complex SVG gradients." } ] }, "fields": { "title": "string (optional, e.g., 'SaaS Cumulative Workloads')", "labels": "list of strings representing X-axis ticks (e.g., ['Q1', 'Q2', 'Q3', 'Q4'])", "series": "list of dictionaries representing stacked layers: [{'label': 'Enterprise', 'data': [10, 25, 45, 60], 'color': '#00f2ff'}, ...]" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "scatter_trend", "description": "Renders a coordinate scatter grid representing discrete data points intersected by a prominent glowing linear regression line.", "compact_description": "coordinate scatter plot with regression trend line", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": null, "incompatible_on": [ { "surface": "google-chat", "reason": "Requires custom grid mapping." } ] }, "fields": { "title": "string (optional, e.g., 'CSAT vs. Support Response Time')", "data_points": "list of [x, y] coordinates: [[1.2, 95], [2.5, 88], [3.1, 75]]", "label_x": "string (optional, e.g., 'Response Time (Hours)')", "label_y": "string (optional, e.g., 'CSAT Score')" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "call_mood_board", "description": "Renders a premium, aesthetic call emotion summary and theme board showing detected sentiments, dominant moods with color codings, active themes, and word weightings.", "compact_description": "visual summary board of call sentiments moods and active themes", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": null, "incompatible_on": [ { "surface": "google-chat", "reason": "Requires detailed flex layout and gradients." } ] }, "fields": { "title": "string (optional, e.g., 'Call Mood & Themes Summary')", "moods": "list of dictionaries representing call emotions: [{'mood': 'Collaborative', 'intensity': 85, 'color': '#10b981'}, ...]", "themes": "list of dictionaries representing keywords/themes: [{'term': 'Pricing', 'weight': 90, 'sentiment': 'neutral'}, ...]", "summary": "string (optional summary paragraph)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "github_activity_grid", "description": "Renders a high-fidelity SVG representation of a GitHub-style contribution activity calendar with colored commitment density blocks, total contributions, and streak statistics.", "compact_description": "SVG GitHub-style contribution grid and activity tracker", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": null, "incompatible_on": [ { "surface": "google-chat", "reason": "Requires detailed SVG grid rendering." } ] }, "fields": { "title": "string (optional, e.g., 'GitHub Repository Activity')", "username": "string (optional, e.g., 'curtiskrygier')", "total_contributions": "integer (optional, e.g., 342)", "streak_days": "integer (optional, e.g., 18)", "activity": "list of integers (0-4) or dictionary of weeks/days for rendering grid squares" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "form", "description": "Form container with labelled field controls and explicit submit/cancel buttons. Fields are expressed as a list of {label, type, name, placeholder, options, rules} entries.", "compact_description": "labelled form with fields and submit button", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "incompatible_on": [ { "surface": "google-chat", "reason": "Google Chat has its own card input model — use key_value or action buttons" }, { "surface": "email", "reason": "Interactive form controls do not function in email clients" }, { "surface": "pdf", "reason": "Static render only — use table or key_value for read-only representation" } ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Renders and collects input visually; form submit has no stage routing — use with follow_up_chips for conversational submission" } ] }, "fields": { "title": "string (optional). Form heading shown above fields.", "submit_label": "string (optional, default 'Submit'). Label for the primary submit button.", "cancel_label": "string (optional). If set, renders a secondary cancel button.", "fields": { "type": "array", "items": { "label": "string. Visible field label.", "name": "string. Field identifier used in form submission.", "type": "string. One of: text, email, password, number, url, textarea, select, radio, checkbox, switch, slider, date. Default: text.", "placeholder": "string (optional).", "options": "array of {value, label} (required for select, radio, checkbox types).", "default_value": "string | boolean | number (optional).", "rules": "array of strings (optional). Validation rules e.g. ['required', 'email', 'minLength:2']." } } }, "source": { "name": "OpenUI / Thesys", "url": "https://github.com/thesysdev/openui", "license": "MIT" } }, { "type": "form_input", "description": "Standalone labelled text input field — text, email, password, number, or url. Use inside a form atom or as a standalone search/filter control.", "compact_description": "single labelled input field", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "incompatible_on": [ { "surface": "google-chat", "reason": "Use Chat card input widget instead" }, { "surface": "email", "reason": "Input controls non-functional in email" }, { "surface": "pdf", "reason": "Static only" } ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Renders as a styled input on stage; data capture requires stage-level routing" } ] }, "fields": { "label": "string. Visible label above the input.", "name": "string. Field identifier.", "type": "string (optional). One of: text, email, password, number, url. Default: text.", "placeholder": "string (optional).", "rules": "array of strings (optional). e.g. ['required', 'email', 'minLength:2']." }, "source": { "name": "OpenUI / Thesys", "url": "https://github.com/thesysdev/openui", "license": "MIT" }, "aliases": [ "text_input" ] }, { "type": "form_select", "description": "Labelled dropdown select with a list of value/label options. Supports required validation and an optional placeholder prompt.", "compact_description": "labelled dropdown select with options", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "incompatible_on": [ { "surface": "google-chat", "reason": "Use Chat card dropdown widget instead" }, { "surface": "email", "reason": "Non-functional in email" }, { "surface": "pdf", "reason": "Static only — use key_value" } ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Renders as a styled select; data capture requires stage-level routing" } ] }, "fields": { "label": "string. Visible label.", "name": "string. Field identifier.", "placeholder": "string (optional). e.g. 'Select an option…'", "options": { "type": "array", "description": "List of {value, label} pairs." }, "rules": "array of strings (optional). e.g. ['required']." }, "source": { "name": "OpenUI / Thesys", "url": "https://github.com/thesysdev/openui", "license": "MIT" } }, { "type": "form_radio_group", "description": "Labelled group of radio buttons for single-option selection. Each option has a value, visible label, and optional description.", "compact_description": "radio button group for single-option selection", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "incompatible_on": [ { "surface": "google-chat", "reason": "Use Chat card radio widget instead" }, { "surface": "email", "reason": "Non-functional in email" }, { "surface": "pdf", "reason": "Static only" } ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Radio selection renders correctly; value capture requires stage-level routing" } ] }, "fields": { "label": "string (optional). Group label.", "name": "string. Field identifier.", "options": { "type": "array", "description": "List of {value, label, description?} entries." }, "default_value": "string (optional). Pre-selected option value.", "rules": "array of strings (optional). e.g. ['required']." }, "source": { "name": "OpenUI / Thesys", "url": "https://github.com/thesysdev/openui", "license": "MIT" } }, { "type": "form_checkbox_group", "description": "Labelled group of checkboxes for multi-option selection. Each checkbox has a name, visible label, optional description, and optional default checked state.", "compact_description": "checkbox group for multi-option selection", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "incompatible_on": [ { "surface": "google-chat", "reason": "Use Chat card multi-select widget instead" }, { "surface": "email", "reason": "Non-functional in email" }, { "surface": "pdf", "reason": "Static only" } ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Checkbox selection renders correctly; value capture requires stage-level routing" } ] }, "fields": { "label": "string (optional). Group label.", "name": "string. Aggregate field identifier for form submission.", "items": { "type": "array", "description": "List of {name, label, description?, default_checked?} entries." }, "rules": "array of strings (optional)." }, "source": { "name": "OpenUI / Thesys", "url": "https://github.com/thesysdev/openui", "license": "MIT" } }, { "type": "form_switch_group", "description": "Group of named toggle switches — on/off controls with optional labels and descriptions. Suitable for settings panels, notification preferences, and feature flags.", "compact_description": "group of labelled toggle switches", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Toggle switches render correctly; value capture requires stage-level routing" } ], "incompatible_on": [ { "surface": "google-chat", "reason": "Use Chat card switch widget instead" }, { "surface": "email", "reason": "Non-functional in email" }, { "surface": "pdf", "reason": "Static only — use status_dashboard for read-only equivalent" } ] }, "fields": { "label": "string (optional). Section label above the switches.", "name": "string. Aggregate field identifier.", "items": { "type": "array", "description": "List of {name, label?, description?, default_checked?} entries." } }, "source": { "name": "OpenUI / Thesys", "url": "https://github.com/thesysdev/openui", "license": "MIT" } }, { "type": "form_slider", "description": "Numeric range slider with a min, max, and optional step. Supports continuous (smooth) and discrete (stepped) variants. Renders a labelled track with a draggable thumb.", "compact_description": "numeric range slider input", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "incompatible_on": [ { "surface": "google-chat", "reason": "Non-functional in Chat cards" }, { "surface": "email", "reason": "Non-functional in email" }, { "surface": "pdf", "reason": "Static only — use progress_bar for visual representation" } ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Slider renders and is draggable; value capture requires stage-level routing" } ] }, "fields": { "label": "string (optional). Visible label above the slider.", "name": "string. Field identifier.", "min": "number. Minimum value.", "max": "number. Maximum value.", "step": "number (optional). Increment size. Omit for continuous.", "default_value": "number (optional). Initial thumb position.", "variant": "string (optional). One of: continuous, discrete. Default: continuous.", "rules": "array of strings (optional)." }, "source": { "name": "OpenUI / Thesys", "url": "https://github.com/thesysdev/openui", "license": "MIT" } }, { "type": "form_date_picker", "description": "Date picker input supporting single-date selection or a date-range (start + end). Renders a calendar popover. Use inside a form or standalone.", "compact_description": "date or date-range picker input", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "incompatible_on": [ { "surface": "google-chat", "reason": "Non-functional in Chat cards" }, { "surface": "email", "reason": "Non-functional in email" }, { "surface": "pdf", "reason": "Static only" } ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Date input renders and is clickable; value capture requires stage-level routing" } ] }, "fields": { "label": "string (optional). Visible label.", "name": "string. Field identifier.", "mode": "string (optional). One of: single, range. Default: single.", "placeholder": "string (optional). e.g. 'Pick a date'.", "rules": "array of strings (optional). e.g. ['required']." }, "source": { "name": "OpenUI / Thesys", "url": "https://github.com/thesysdev/openui", "license": "MIT" } }, { "type": "modal", "description": "Modal dialog overlay with a title, configurable size, and arbitrary content children. Opened programmatically or via a trigger button. Closes on X, Escape, or backdrop click.", "compact_description": "modal dialog overlay with title and content", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [], "incompatible_on": [ { "surface": "google-chat", "reason": "Chat has no modal primitive" }, { "surface": "email", "reason": "Non-functional in email" }, { "surface": "pdf", "reason": "Non-functional in PDF" } ] }, "fields": { "title": "string. Modal heading.", "size": "string (optional). One of: sm, md, lg. Default: md.", "children": { "type": "array", "description": "Content atoms to render inside the modal body." }, "trigger_label": "string (optional). If set, renders a button that opens the modal." }, "source": { "name": "OpenUI / Thesys", "url": "https://github.com/thesysdev/openui", "license": "MIT" } }, { "type": "follow_up_chips", "description": "A row of tappable suggestion chips placed at the end of a response or slide, prompting the user with pre-written follow-up questions or actions. Each chip fires its text as a new user message when clicked.", "compact_description": "clickable follow-up suggestion chips", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Chips render correctly; click actions need stage WebSocket routing to produce AI responses" } ], "incompatible_on": [ { "surface": "google-chat", "reason": "Use Chat card action buttons instead" }, { "surface": "email", "reason": "Non-functional in email" }, { "surface": "pdf", "reason": "Static only" } ] }, "fields": { "items": { "type": "array", "description": "List of suggestion strings. e.g. ['What's the ROI?', 'Show me by region', 'Compare to last year']." }, "label": "string (optional). Small heading above the chips. e.g. 'You might also ask:'" }, "source": { "name": "OpenUI / Thesys", "url": "https://github.com/thesysdev/openui", "license": "MIT" } }, { "type": "choicebox_group", "description": "Card-style option selector where each option renders as a full card with icon, title, and description. The entire card is the click target — richer than radio buttons. Inspired by Vercel Geist Choicebox. Ideal for plan selection, framework choice, and AI-generated setup wizards.", "compact_description": "card-style option selector with icon, title, description per card", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Cards render and are selectable; value capture requires stage-level routing" } ], "incompatible_on": [ { "surface": "google-chat", "reason": "Use Chat card action buttons instead" }, { "surface": "email", "reason": "Non-functional in email" }, { "surface": "pdf", "reason": "Static only" } ] }, "fields": { "label": "string (optional). Group heading above the cards.", "name": "string. Form field name for the selected value(s).", "multiple": "boolean (optional, default false). If true allows multiple selections.", "accent": "string (optional, default", "submit_label": "string (optional). If set, renders a submit button below the cards.", "items": { "type": "array", "description": "List of {value, title, description?, icon?, disabled?} entries." } }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "feedback_prompt", "description": "In-context feedback collection widget for rating content or AI response quality. Supports thumbs up/down or 1–5 star ratings with optional follow-up text. Inspired by Vercel Geist Feedback pattern.", "compact_description": "thumbs or star rating feedback collection widget", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Renders and is interactive; action_url POST requires stage-level routing" } ], "incompatible_on": [ { "surface": "google-chat", "reason": "Use Chat card star rating widget instead" }, { "surface": "email", "reason": "Non-functional in email" }, { "surface": "pdf", "reason": "Static only" } ] }, "fields": { "question": "string (optional). Label text above the widget. e.g. \"Was this helpful?\"", "style": "string (optional). One of: thumbs | stars. Default: thumbs.", "placeholder": "string (optional). Follow-up textarea placeholder shown after the rating buttons.", "action_url": "string (optional). Endpoint for form POST on submit." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "entity_list", "description": "List of named resources — each row shows an avatar or icon, a title, a subtitle, a status badge, and optional trailing metadata. Covers project lists, deployment rosters, and team member panels. Inspired by Vercel Geist Entity component.", "compact_description": "named resource rows with avatar, status badge, and meta", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-chat", "email", "pdf", "google-apps-script-web", "mcp-apps" ] }, "fields": { "items": { "type": "array", "description": "List of {name, subtitle?, icon?, status?, meta?} entries." } }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "prompt_template", "description": "Displays an LLM prompt with interpolation slots highlighted in a distinct colour. Includes an optional copy-to-clipboard button. Ideal for AI documentation, tutorials, and prompt engineering articles.", "compact_description": "LLM prompt with highlighted {variable} slots and copy button", "surfaces": { "works_on": [ "web", "google-meet-stage", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Renders as plain code block without slot highlighting" }, { "surface": "email", "note": "Renders as plain code block without slot highlighting" } ] }, "fields": { "template": "string. The prompt text containing {slot} placeholders.", "accent": "string (optional, default", "copyable": "boolean (optional, default true). Show copy button.", "label": "string (optional). Small label shown above the template block." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "model_card", "description": "AI model specification card showing model name, provider, context window, pricing tier, and a row of capability badges. First-class atom for AI-native content and agent documentation.", "compact_description": "AI model spec card with context window, pricing, and capability badges", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-chat", "email", "pdf", "google-apps-script-web", "mcp-apps" ] }, "fields": { "name": "string. Model display name, e.g. \"Claude Sonnet 4.6\".", "provider": "string (optional). Provider name, e.g. \"Anthropic\".", "context_window": "string (optional). e.g. \"200 k tokens\".", "pricing": "string (optional). e.g. \"$3 / M tokens in\".", "capabilities": { "type": "array", "description": "List of short capability badge strings, e.g. [\"tool use\", \"vision\", \"streaming\"]." }, "accent": "string (optional, default #7c3aed). Accent colour for provider label and badges." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "conversation_snippet", "description": "Renders a prompt-response pair as two chat bubbles — a user bubble on the right and an AI response bubble on the left. Ideal for showing LLM examples, chatbot flows, and agent interaction patterns in documentation.", "compact_description": "user prompt and AI response as chat bubbles", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-chat", "email", "pdf", "google-apps-script-web", "mcp-apps" ] }, "fields": { "user_label": "string (optional, default \"You\"). Label above the user bubble.", "user": "string. The user prompt text.", "ai_label": "string (optional, default \"Assistant\"). Label above the AI bubble.", "response": "string. The AI response text.", "accent": "string (optional, default" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "shortcut_legend", "description": "Keyboard shortcut cheat-sheet grid. Multiple shortcuts displayed in a compact two-column layout, each showing the key combination and its action label. Distinct from keyboard_shortcut which shows a single combination inline.", "compact_description": "keyboard shortcut cheat-sheet grid with key combos and labels", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-chat", "email", "pdf", "google-apps-script-web", "mcp-apps" ] }, "fields": { "title": "string (optional). Heading above the grid.", "items": { "type": "array", "description": "List of {keys, action} entries. keys is an array of key strings e.g. [\"⌘\", \"K\"]. action is the human-readable description." } }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "rating_summary_bar", "description": "Aggregate star-rating histogram showing the percentage breakdown per star level (5★ through 1★). Distinct from rating_stars which shows a single score — this shows the full distribution with bar lengths proportional to vote share.", "compact_description": "star rating histogram with percentage bars per star level", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-chat", "email", "pdf", "google-apps-script-web", "mcp-apps" ] }, "fields": { "average": "number. Overall average rating (e.g. 4.3).", "total": "number. Total number of ratings.", "breakdown": { "type": "array", "description": "List of {stars, count} from 5 down to 1." }, "accent": "string (optional, default" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "roadmap_card", "description": "Quarter-based product roadmap showing milestones across Q1–Q4 or custom periods. Each period contains a list of items with a status indicator (done, in-progress, planned). Useful for product announcements and release planning slides.", "compact_description": "quarter-based product roadmap with status-tagged milestones", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-chat", "email", "pdf", "google-apps-script-web", "mcp-apps" ] }, "fields": { "title": "string (optional). Heading above the roadmap.", "periods": { "type": "array", "description": "List of {label, items} where each item is {text, status}. status is one of done | in-progress | planned." } }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "notification_stack", "description": "Persistent notification inbox showing a list of notification items, each with an icon or emoji, a title, a body snippet, a timestamp, and an optional unread indicator dot. Distinct from toast_notification which is a transient single pop-up — the stack is a persistent grouped list.", "compact_description": "persistent notification inbox list with unread indicators", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-chat", "email", "pdf", "google-apps-script-web", "mcp-apps" ] }, "fields": { "title": "string (optional). Heading above the list, e.g. \"Notifications\".", "items": { "type": "array", "description": "List of {icon?, title, body?, time?, unread?} entries. unread is boolean, default false." } }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "inline_alert", "description": "Compact inline-level alert embedded within content flow — an icon and short message that appears beside labels, form fields, or within paragraphs without disrupting layout. Distinct from alert_banner (full-width strip) and toast_notification (transient overlay).", "compact_description": "inline icon-plus-text alert embedded in content flow", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "renders as plain text prefix with emoji icon; no colour or border styling" }, { "surface": "email", "note": "icon glyph only; background colour unreliable across clients" }, { "surface": "pdf", "note": "renders as plain text with emoji prefix; no colour" } ] }, "fields": { "type": "string. Severity level — \"info\", \"warning\", \"error\", or \"success\".", "message": "string. The alert text.", "detail": "string (optional). A secondary line of smaller detail text.", "icon": "string (optional). Override the default icon for the severity type." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "tag_block", "description": "Horizontal wrapping block of plain content tags — feature labels, category chips, or keyword pills. Neutral styling. Distinct from badge_group which carries semantic status colour. Adapted from the TagBlock pattern in OpenUI OUI benchmark samples.", "compact_description": "horizontal wrap of neutral content chip labels", "surfaces": { "works_on": [ "web", "google-meet-stage", "email", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "renders as space-separated text labels; no chip styling" } ] }, "fields": { "tags": "array of strings. The tag labels.", "color": "string (optional). Override chip accent — hex or CSS colour. Default is neutral gray." }, "source": { "name": "OpenUI / Thesys", "url": "https://github.com/thesysdev/openui", "license": "MIT" } }, { "type": "variant_selector", "description": "CSS-only variant picker — each option is a selectable card with a label and optional description, rendered as hidden radio inputs with label:has(input:checked) styling. Used for product size, colour, or plan variant selection. Adapted from the RadioGroup/RadioItem pattern in OpenUI OUI benchmark samples.", "compact_description": "CSS radio card group for variant or option picking", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": null, "incompatible_on": [ { "surface": "google-chat", "reason": "CSS :checked and :has() pseudo-classes not supported in card rendering" }, { "surface": "email", "reason": "CSS pseudo-class interactivity not supported in email clients" }, { "surface": "pdf", "reason": "interactive selection not possible in static PDF" } ] }, "fields": { "name": "string. Form field name used in radio input group.", "label": "string (optional). Group label shown above the options.", "items": { "type": "array", "description": "List of {value, title, description?} option objects." }, "default_value": "string (optional). Pre-selected option value." }, "source": { "name": "OpenUI / Thesys", "url": "https://github.com/thesysdev/openui", "license": "MIT" } }, { "type": "markdown_block", "description": "Renders an arbitrary GitHub-Flavoured Markdown string as formatted HTML — bold, italic, inline code, fenced code blocks, lists, tables, blockquotes, and links. Useful when content is authored in or retrieved as Markdown and needs faithful rendering without mapping to individual atoms. Adapted from the MarkDownRenderer pattern in OpenUI OUI benchmark samples.", "compact_description": "GFM markdown string rendered to HTML inline", "surfaces": { "works_on": [ "web", "google-meet-stage", "email", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "some markup stripped by Chat card renderer; tables and code blocks fall back to plain text" } ] }, "fields": { "content": "string. The Markdown source string to render.", "variant": "string (optional). \"default\" (standard margins) or \"compact\" (tight spacing for dense layouts). Default is \"default\"." }, "source": { "name": "OpenUI / Thesys", "url": "https://github.com/thesysdev/openui", "license": "MIT" } }, { "type": "chartjs_pie", "description": "Multi-slice pie or donut chart rendered as inline SVG — category proportions with a colour-coded legend. Distinct from donut_stat which shows a single metric as a CSS ring. Adapted from the PieChart/Slice pattern in OpenUI OUI benchmark samples.", "compact_description": "multi-slice pie or donut SVG chart with legend", "surfaces": { "works_on": [ "web", "google-meet-stage", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "SVG may not render; falls back to percentage list" } ], "incompatible_on": [ { "surface": "email", "reason": "inline SVG blocked by most email clients — use an image export instead" } ] }, "fields": { "title": "string (optional). Chart heading.", "variant": "string (optional). \"pie\" or \"donut\". Default \"donut\".", "data": { "type": "array", "description": "List of {label, value} slice objects." }, "colors": "array of strings (optional). Hex colours per slice; auto-assigned if omitted.", "show_legend": "boolean (optional). Show colour-keyed legend below chart. Default true.", "show_labels": "boolean (optional). Show percentage labels on slices. Default true." }, "source": { "name": "OpenUI / Thesys", "url": "https://github.com/thesysdev/openui", "license": "MIT" } }, { "type": "text_callout", "description": "Compact tinted note or tip block used inline within cards, forms, or panels. Lighter than callout — no left-border accent, no icon; just a soft colour-tinted background with a small bold title above body text. Adapted from the TextCallout pattern in OpenUI OUI benchmark samples.", "compact_description": "lightweight tinted inline tip or note block no icon", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-chat", "email", "pdf", "google-apps-script-web", "mcp-apps" ] }, "fields": { "variant": "string. Display variant — \"info\", \"success\", \"warning\", \"neutral\".", "title": "string. Short bold label (e.g. \"Tip\", \"Note\", \"Good to know\").", "description": "string. Body text." }, "source": { "name": "OpenUI / Thesys", "url": "https://github.com/thesysdev/openui", "license": "MIT" } }, { "type": "source_citation", "description": "Inline-numbered RAG source reference card — shows a citation number, source title, optional excerpt, and optional URL. Designed to accompany AI-generated content that cites retrieved documents. Pairs with in-body superscript references [1], [2] etc. Original a2ui-catalogue atom.", "compact_description": "numbered RAG source card with title excerpt and URL", "surfaces": { "works_on": [ "web", "google-meet-stage", "email", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "renders as plain numbered list item; no card styling or excerpt block" } ] }, "fields": { "sources": { "type": "array", "description": "List of {number, title, url?, excerpt?, author?, date?} citation objects." }, "heading": "string (optional). Section heading above the list, e.g. \"Sources\"." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "llm_comparison_table", "description": "Side-by-side comparison of outputs from multiple language models for the same prompt — model name, output text, and optional latency/cost/token metadata per column. Designed for model evaluation, A/B testing, and capability demonstrations. Original a2ui-catalogue atom.", "compact_description": "side-by-side multi-model output comparison table", "surfaces": { "works_on": [ "web", "google-meet-stage", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "renders as sequential key-value blocks; side-by-side layout not supported" }, { "surface": "email", "note": "multi-column layout collapses in most email clients; renders as stacked blocks" } ] }, "fields": { "prompt": "string (optional). The shared input prompt shown above the comparison.", "models": { "type": "array", "description": "List of {name, output, latency_ms?, cost_usd?, tokens?} model result objects." }, "show_meta": "boolean (optional). Show latency/cost/token row below each output. Default true if any model provides meta fields." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "confidence_bar", "description": "Horizontal confidence or probability bar — shows a percentage value with a label and colour-coded fill indicating certainty level. Used for classification confidence, sentiment strength, retrieval relevance scores, or any normalised probability output. Original a2ui-catalogue atom.", "compact_description": "labelled probability bar with colour-coded confidence fill", "surfaces": { "works_on": [ "web", "google-meet-stage", "email", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "renders as plain percentage text e.g. Label 82%; no bar visualisation" } ] }, "fields": { "label": "string. What is being measured, e.g. Positive Sentiment or Retrieval Relevance.", "value": "number. Confidence percentage 0-100.", "items": "array (optional). List of {label, value} for multi-row display instead of single bar.", "color": "string (optional). Override bar fill colour. Auto-assigned green/amber/red by value band if omitted." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "token_budget_meter", "description": "Visual context-window usage meter — shows tokens consumed versus the model's total context limit, with a colour-coded fill that shifts amber then red as capacity is approached. Designed for AI agent dashboards, session monitoring, and prompt-engineering tooling. Original a2ui-catalogue atom.", "compact_description": "context window token usage meter with capacity warning colours", "surfaces": { "works_on": [ "web", "google-meet-stage", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "renders as \"Used X / Y tokens (Z%)\" plain text; no visual meter" }, { "surface": "email", "note": "bar renders statically; colour may be stripped by email client" } ] }, "fields": { "used": "integer. Tokens consumed so far.", "total": "integer. Model context window size, e.g. 200000.", "model": "string (optional). Model name shown as subtitle, e.g. \"claude-sonnet-4-6\".", "label": "string (optional). Override the default \"Context window\" heading.", "warn_at": "number (optional). Percentage threshold to shift to amber. Default 70.", "critical_at": "number (optional). Percentage threshold to shift to red. Default 90.", "animate": "boolean (optional). Count up from 0 to `used` using CSS @property animation. Bar grows in sync. Uses dark styling suited to Meet stage. Default false (static).", "duration": "number (optional). Animation duration in seconds when animate is true. Default 2.0." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "product_thumbnail", "description": "Shopify Polaris-style product card showing optional image, title, vendor, SKU, price with optional compare-at strike-through, status badge, and tag chips. Adapted from Polaris ResourceItem + Thumbnail patterns.", "compact_description": "product card with image, price, status badge, and tags", "surfaces": { "works_on": [ "web", "google-meet-stage", "email", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "renders as plain text with price; no image or badge styling" } ] }, "fields": { "title": "string. Product display name.", "vendor": "string (optional). Brand or supplier name.", "sku": "string (optional). Stock-keeping unit code.", "price": "string. Formatted price, e.g. \"$49.00\".", "compare_at_price": "string (optional). Strike-through original price.", "status": "string (optional). One of active | draft | archived. Default active.", "image_url": "string (optional). Product image URL.", "tags": "array of strings (optional). Flat tag list rendered as chips." }, "source": { "name": "Shopify Polaris", "url": "https://github.com/Shopify/polaris", "license": "MIT" } }, { "type": "order_status_card", "description": "Shopify Polaris-style order summary card showing order number, date, fulfilment status badge, customer name, line item list, and total. Status is colour-coded — fulfilled (green), unfulfilled (amber), partial (blue), cancelled (red), refunded (grey). Adapted from Polaris Card + Badge patterns.", "compact_description": "e-commerce order card with status badge and line item list", "surfaces": { "works_on": [ "web", "google-meet-stage", "email", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "renders as plain order summary text; no colour or badge styling" } ] }, "fields": { "order_number": "string. Order identifier, e.g. \"#1042\".", "date": "string (optional). Order date displayed next to the order number.", "status": "string. One of fulfilled | unfulfilled | partial | cancelled | refunded.", "customer": "string (optional). Customer display name.", "items": "array (optional). List of {title, qty, price} line items.", "total": "string (optional). Formatted grand total, e.g. \"$124.00\"." }, "source": { "name": "Shopify Polaris", "url": "https://github.com/Shopify/polaris", "license": "MIT" } }, { "type": "inventory_table", "description": "Shopify Polaris-style inventory management table showing SKU, product name, available quantity, committed quantity, and warehouse location per row. Rows with available stock below the optional threshold are highlighted amber as a low-stock warning. Adapted from Polaris DataTable patterns.", "compact_description": "inventory table with SKU, stock levels, and low-stock row highlight", "surfaces": { "works_on": [ "web", "google-meet-stage", "email", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "renders as a simple text list of product names and quantities" } ] }, "fields": { "title": "string (optional). Table heading.", "items": "array. List of {sku?, product, available, committed?, location?, threshold?}. threshold triggers amber low-stock highlight when available < threshold." }, "source": { "name": "Shopify Polaris", "url": "https://github.com/Shopify/polaris", "license": "MIT" } }, { "type": "jira_ticket", "description": "Atlassian Design System Jira issue card showing issue key, type icon (bug/story/task/epic/subtask), one-line summary, status lozenge, priority indicator, assignee, optional description, and label chips. Adapted from Atlassian Design System Card + Lozenge patterns.", "compact_description": "Jira issue card with type icon, status lozenge, priority, and assignee", "surfaces": { "works_on": [ "web", "google-meet-stage", "email", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "renders as plain text with key and summary; no type icon or status badge" } ] }, "fields": { "key": "string. Issue key, e.g. \"PROJ-123\".", "issue_type": "string (optional). One of bug | story | task | epic | subtask. Default task.", "summary": "string. Issue title or one-line description.", "status": "string (optional). Column name e.g. \"To Do\", \"In Progress\", \"Done\".", "priority": "string (optional). One of highest | high | medium | low | lowest.", "assignee": "string (optional). Assignee display name.", "description": "string (optional). Short description or acceptance criteria.", "labels": "array of strings (optional). Label chips shown below the description." }, "source": { "name": "Atlassian Design System", "url": "https://atlassian.design", "license": "Apache-2.0" } }, { "type": "sprint_board", "description": "Atlassian Design System Jira-style sprint board rendered as kanban columns. Each column has a name, ticket-count badge, and compact issue cards (key, summary, type icon, priority dot). Distinct from prerequisite_checklist which is a linear checklist. Adapted from Atlassian Design System Board patterns.", "compact_description": "kanban sprint board with named columns and compact issue cards", "surfaces": { "works_on": [ "web", "google-meet-stage", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "email", "note": "multi-column layout collapses; renders as sequential column headings with bullet lists" }, { "surface": "google-chat", "note": "renders as plain text column names with ticket counts and key-summary pairs" } ] }, "fields": { "sprint_name": "string (optional). Sprint label shown above the board.", "columns": "array. List of {name, items[]} where each item is {key, summary, type?, priority?}." }, "source": { "name": "Atlassian Design System", "url": "https://atlassian.design", "license": "Apache-2.0" } }, { "type": "lozenge", "description": "Atlassian Design System semantic status pill with six strictly defined appearance variants — default (grey), success (green), removed (red), inprogress (blue), moved (yellow), new (teal). Uppercase rounded-rectangle label. Distinct from badge_group which uses arbitrary colours; lozenge maps to Jira/Confluence status semantics. Adapted from Atlassian Design System Lozenge component.", "compact_description": "Atlassian-semantic status pill with defined appearance variants", "surfaces": { "works_on": [ "web", "google-meet-stage", "email", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "renders as plain uppercase text label; no colour background" } ] }, "fields": { "text": "string. The lozenge label (single lozenge mode).", "appearance": "string (optional). One of default | success | removed | inprogress | moved | new. Default default.", "items": "array (optional). List of {text, appearance} for a row of multiple lozenges. Overrides single text/appearance fields." }, "source": { "name": "Atlassian Design System", "url": "https://atlassian.design", "license": "Apache-2.0" } }, { "type": "data_grid", "description": "IBM Carbon Design System enterprise data grid with typed columns (string/number/status/tag), optional row-selection checkboxes, sortable column indicators, zebra-stripe rows, and optional pagination footer. More capable than table and data_table_sortable for enterprise data-dense layouts. Adapted from IBM Carbon DataTable patterns.", "compact_description": "enterprise data grid with typed columns, row selection, and", "surfaces": { "works_on": [ "web", "google-meet-stage", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "email", "note": "renders as a plain HTML table; no selection checkboxes or sort indicators" }, { "surface": "google-chat", "note": "renders as a simple text list; no table structure" } ] }, "fields": { "title": "string (optional). Dark header bar above the grid.", "columns": "array. List of {header, key, type?, sortable?}. type is one of string | number | status | tag.", "rows": "array. List of row objects where each key matches a column key.", "selectable": "boolean (optional). Show row-selection checkboxes. Default false.", "pagination": "object (optional). '{per_page} splits rows into CSS-tab pages; clicking a page number label switches pages without JavaScript. Omit for single-page display.'" }, "source": { "name": "IBM Carbon Design System", "url": "https://github.com/carbon-design-system/carbon", "license": "Apache-2.0" } }, { "type": "tree_view", "description": "IBM Carbon Design System hierarchical tree for displaying recursive data structures — organisational charts, category hierarchies, nested permission models, BOM trees. More semantically general than file_tree which is file-system specific. Expanded/collapsed state set per node. Adapted from IBM Carbon TreeView component.", "compact_description": "recursive hierarchical tree with expand/collapse per node", "surfaces": { "works_on": [ "web", "google-meet-stage", "email", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "renders as an indented plain text tree; no expand/collapse indicators" } ] }, "fields": { "title": "string (optional). Label above the tree panel.", "nodes": "array. Recursive list of {label, icon?, expanded?, meta?, children?[]} node objects." }, "source": { "name": "IBM Carbon Design System", "url": "https://github.com/carbon-design-system/carbon", "license": "Apache-2.0" } }, { "type": "heatmap_calendar", "description": "IBM Carbon-inspired calendar heatmap showing activity density by date across one or more calendar months. Data is a list of date-value pairs; cells are coloured by intensity across a configurable colour scale. Distinct from heatmap (arbitrary x/y grid) and github_activity_grid (year-spanning GitHub-specific format). Adapted from IBM Carbon AI Applications data visualisation patterns.", "compact_description": "calendar month heatmap with date-value density colouring", "surfaces": { "works_on": [ "web", "google-meet-stage", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "email", "note": "renders as a static colour grid; tooltips unavailable" }, { "surface": "google-chat", "note": "renders as a plain text date-count list; no visual grid" } ] }, "fields": { "title": "string (optional). Heading above the calendar grid.", "data": "array. List of {date, count} objects where date is \"YYYY-MM-DD\".", "months": "integer (optional). Number of calendar months to render. Default 3.", "color_scale": "array of strings (optional). CSS colours from empty to maximum density. Default IBM Carbon blue scale.", "unit": "string (optional). Unit label appended to count in tooltips, e.g. \"commits\"." }, "source": { "name": "IBM Carbon Design System", "url": "https://github.com/carbon-design-system/carbon", "license": "Apache-2.0" } }, { "type": "combobox", "description": "Searchable filterable dropdown that narrows its option list as the user types. Renders with a search icon, chevron, and an open option list for article preview. Native enables browser-level autocomplete.", "compact_description": "searchable filterable dropdown — shadcn/Headless UI pattern", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "pdf", "note": "Renders as a static select; no interactivity" } ], "incompatible_on": [ { "surface": "google-chat", "reason": "No custom form widget support" }, { "surface": "email", "reason": "Non-functional in email" } ] }, "fields": { "label": "string (optional). Visible label above the field.", "name": "string. Field identifier.", "placeholder": "string (optional). Input placeholder text.", "options": "array of {value, label} pairs.", "selected": "string (optional). Pre-selected option value.", "rules": "array of strings (optional). e.g. ['required']." }, "source": { "name": "shadcn/ui", "url": "https://github.com/shadcn-ui/ui", "license": "MIT" } }, { "type": "feature_grid", "description": "A responsive CSS grid of feature tiles, each with an icon, title, and description paragraph. Supports 2 or 3 columns and optional per-tile badges. The canonical Tailwind UI marketing feature section pattern.", "compact_description": "icon + title + description feature grid — Tailwind UI pattern", "surfaces": { "works_on": [ "web", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Grid collapses to single column on narrow stage panels" }, { "surface": "email", "note": "Grid layout may collapse in email clients; renders as stacked list" } ], "incompatible_on": [ { "surface": "google-chat", "reason": "No CSS grid support" } ] }, "fields": { "heading": "string (optional). Section heading above the grid.", "description": "string (optional). Section sub-heading or intro paragraph.", "columns": "integer (optional). 2 or 3. Default 3.", "features": "array of objects with fields — icon (emoji or text), title, description, badge (optional short label), color (optional hex accent)." }, "source": { "name": "shadcn/ui", "url": "https://ui.shadcn.com", "license": "MIT" } }, { "type": "navigation_menu", "description": "Multi-level horizontal navigation bar with a brand/logo slot, top-level nav items, optional dropdown submenus, and a right-aligned CTA button. First item with children renders its submenu panel open for preview. Radix NavigationMenu pattern.", "compact_description": "multi-level horizontal nav with submenu panels — Radix pattern", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "pdf", "note": "Renders as a flat link list" } ], "incompatible_on": [ { "surface": "google-chat", "reason": "No navigation widget type" }, { "surface": "email", "reason": "Navigation bars are not meaningful in email" }, { "surface": "google-meet-stage", "reason": "Stage canvas has no persistent nav chrome" } ] }, "fields": { "brand": "string (optional). Brand name shown on the left.", "brand_url": "string (optional). URL for the brand link.", "items": "array of objects with — label, url, children (optional array of {label, url, description}).", "cta": "object (optional). {label, url} for a right-aligned call-to-action button." }, "source": { "name": "Radix UI / shadcn", "url": "https://www.radix-ui.com/primitives/docs/components/navigation-menu", "license": "MIT" } }, { "type": "multi_select_input", "description": "Tag/chip style multi-value selector. Displays selected values as removable chips above a filtered option list. Shadcn multi-select pattern.", "compact_description": "chip-style multi-value select input — shadcn pattern", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "incompatible_on": [ { "surface": "google-chat", "reason": "No custom form widget support" }, { "surface": "email", "reason": "Non-functional in email" } ], "degraded_on": [ { "surface": "pdf", "note": "Renders as a static chip list; no interactivity" } ] }, "fields": { "label": "string (optional). Visible label above the field.", "name": "string. Field identifier.", "placeholder": "string (optional). Input placeholder when no chips are selected.", "options": "array of {value, label} pairs.", "selected": "array of value strings. Pre-selected values shown as chips." }, "source": { "name": "shadcn/ui", "url": "https://github.com/shadcn-ui/ui", "license": "MIT" } }, { "type": "otp_input", "description": "One-time password entry field. Renders N individual digit boxes (default 6) with filled/unfilled visual state. Shadcn InputOTP pattern.", "compact_description": "N-box one-time password digit input — shadcn OTP pattern", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "incompatible_on": [ { "surface": "google-chat", "reason": "No custom input widget support" }, { "surface": "email", "reason": "Non-functional in email" }, { "surface": "pdf", "reason": "Input fields are non-functional in PDF" } ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Renders as static digit boxes; no keyboard routing" } ] }, "fields": { "length": "integer (optional). Number of digit boxes. Default 6.", "value": "string (optional). Pre-filled digits.", "label": "string (optional). Visible label above the boxes." }, "source": { "name": "shadcn/ui", "url": "https://github.com/shadcn-ui/ui", "license": "MIT" } }, { "type": "skill_bars", "description": "List of labeled horizontal progress bars — each with a fill percentage, optional sublabel, and per-bar color. Use for competency profiles, CV pages, feature comparison.", "compact_description": "labeled horizontal progress bars list — percent fill, per-bar color", "surfaces": { "works_on": [ "web", "google-apps-script-web", "pdf", "mcp-apps" ] }, "fields": { "title": "string (optional)", "accent": "string (optional, default hex for all bars)", "style": "string (optional, \"rounded\"|\"square\", default \"rounded\")", "height": "integer (optional, bar height in px, default 10)", "show_percent": "bool (optional, default true)", "skills": "array (required, alias items). Each: {label, value (0–100, alias percent), color?, sublabel?}" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "icon_stat_row", "description": "Horizontal strip of stats each with a large emoji icon above the number and a label below. More visual than metric_row — use when icons reinforce meaning.", "compact_description": "icon + big number + label stat strip — more visual than metric_row", "surfaces": { "works_on": [ "web", "google-apps-script-web", "pdf", "mcp-apps" ] }, "fields": { "cols": "integer (optional, default 4)", "accent": "string (optional, default hex)", "stats": "array (required, alias items). Each: {icon (emoji), value, label, prefix?, suffix?, sub?, accent?}" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "color_section", "description": "Renders child atom blocks inside a colored background container. Use to visually group content with tint, solid, or dark style.", "compact_description": "colored background wrapper — tint/solid/dark, renders child atom blocks", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ] }, "fields": { "accent": "string (optional, hex, default \"#6366f1\")", "style": "string (optional, \"tint\"|\"solid\"|\"dark\"|\"light\", default \"tint\")", "padding": "string (optional, css, default \"24px\")", "grid": "boolean (optional, default false, added 2026-07-24). Layers a faint 32px graph-paper grid (tinted by accent) on top of the base colour — for technical/blueprint-style sections.", "max_width": "string (optional, css length/%, added 2026-07-24). Caps and centres the section (e.g. \"90%\") so a wide section doesn't run the full column width; omitted → full width.", "blocks": "array (required, atom blocks rendered inside)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "tag_cloud", "description": "Visual cloud of tags with variable font size based on weight. Heavier tags appear larger. Use for skill tags, topic clouds, keyword displays.", "compact_description": "weighted tag cloud — variable size by weight, wrap layout", "surfaces": { "works_on": [ "web", "google-apps-script-web", "pdf", "mcp-apps" ] }, "fields": { "title": "string (optional)", "accent": "string (optional, default hex)", "min_size": "integer (optional, minimum font size px, default 12)", "max_size": "integer (optional, maximum font size px, default 22)", "tags": "array (required, alias items). Each: {label, weight? (default 1), color?} or plain string" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "step_progress", "description": "Horizontal step progress indicator with numbered circles and connecting lines. Completed steps show a tick. Use at the top of wizard or onboarding flows.", "compact_description": "horizontal step progress — numbered circles, connecting lines, current step highlighted", "surfaces": { "works_on": [ "web", "google-apps-script-web", "pdf", "mcp-apps" ] }, "fields": { "current": "integer (required, 1-based index of active step)", "accent": "string (optional, hex, default \"#6366f1\")", "steps": "array (required). Array of {label or title}" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "split_pane", "description": "Two-panel split layout with distinct background colors per pane. Each pane renders atom blocks independently. Unlike columns, each side has its own background.", "compact_description": "two-panel split — distinct bg per side, each side renders atom blocks", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ] }, "fields": { "left": "object — {bg (css color, default \"#f8fafc\"), blocks (atom blocks)}", "right": "object — {bg (css color, default \"#fff\"), blocks (atom blocks)}" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "gradient_hero", "description": "Full-width light/pastel gradient hero with badge, large title, subtitle, and optional CTA. Pure CSS — no images. Works on all surfaces. Use when dark_hero is too heavy.", "compact_description": "light gradient hero — badge, large title, subtitle, CTA button", "surfaces": { "works_on": [ "web", "google-apps-script-web", "pdf", "mcp-apps" ] }, "fields": { "title": "string (required, alias heading)", "subtitle": "string (optional, alias subtext)", "badge": "string (optional, label above title)", "accent": "string (optional, hex, default \"#6366f1\")", "accent2": "string (optional, second gradient hex, default \"#8b5cf6\")", "gradient": "string (optional, css gradient override)", "align": "string (optional, \"left\"|\"center\", default \"left\")", "cta_label": "string (optional)", "cta_url": "string (optional)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "icon_list", "description": "List of items each with a colored icon circle, label, and text. More visual than bullet_list. Use for feature lists, how-it-works, benefits.", "compact_description": "icon-circle list — emoji/icon per item, label + text, color per item", "surfaces": { "works_on": [ "web", "google-apps-script-web", "pdf", "mcp-apps" ] }, "fields": { "title": "string (optional)", "accent": "string (optional, default hex for all items)", "size": "string (optional, \"sm\"|\"md\"|\"lg\", default \"md\")", "items": "array (required). Array of {icon (emoji), label (optional), text (optional), color (optional hex)}" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "highlight_box", "description": "A visually rich highlighted box with gradient, solid, or outline style. Richer than callout — no severity system, pure design focus.", "compact_description": "highlight box — gradient/solid/outline style, icon, title, text", "surfaces": { "works_on": [ "web", "google-apps-script-web", "pdf", "mcp-apps" ] }, "fields": { "title": "string (optional)", "text": "string (optional, markdown — renderer degrades to empty; provide title and/or text)", "icon": "string (optional, emoji)", "accent": "string (optional, hex, default \"#6366f1\")", "style": "string (optional, \"gradient\"|\"solid\"|\"outline\", default \"gradient\")" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "two_tone_card", "description": "Card with a solid colored header section (title, subtitle, icon) and a white body that renders atom blocks. Clean, elegant container for any content.", "compact_description": "split card — colored header with icon/title, white body renders atom blocks", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ] }, "fields": { "title": "string (required)", "subtitle": "string (optional)", "icon": "string (optional, emoji)", "accent": "string (optional, hex, default \"#6366f1\")", "header_theme": "string (optional, \"light\"|\"dark\", default \"light\")", "blocks": "array (optional, atom blocks rendered in white body)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "metric_row", "description": "Horizontal strip of static metrics — value, label, optional prefix/suffix and trend indicator. Cleaner than animated_counter for non-animated use.", "compact_description": "horizontal metric strip — value, label, prefix/suffix, trend up/down", "surfaces": { "works_on": [ "web", "google-apps-script-web", "pdf", "mcp-apps" ] }, "fields": { "cols": "integer (optional, default 4)", "accent": "string (optional, default hex for all metrics)", "metrics": "array (required, alias items). Each item: {value, label, prefix?, suffix?, sub?, accent?, trend? (\"up\"|\"down\")}" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "numbered_list", "description": "Numbered list with large decorative number backgrounds (\"large\" style), circular number badges (\"badge\" style), or bordered cards with a ghost-number, title, tag pills and body text (\"cards\" style, added 2026-07-24 for stage-by-stage architecture breakdowns). More visual than steps.", "compact_description": "decorative numbered list — large background numbers, circular badges, or bordered stage cards", "surfaces": { "works_on": [ "web", "google-apps-script-web", "pdf", "mcp-apps" ] }, "fields": { "title": "string (optional). Ignored by the \"cards\" style.", "accent": "string (optional, hex, default \"#6366f1\")", "theme": "string (optional, \"light\"|\"dark\", default \"light\"). \"cards\" style only.", "style": "string (optional, \"large\"|\"badge\"|\"cards\", default \"large\")", "items": "array (required). For \"large\"/\"badge\" style, each item is {label (optional), text (optional)}. For \"cards\" style, each item is {number (optional, defaults to position), title, tags (optional, array of string), text}." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "page_header", "description": "Full-width app-style page header with title, subtitle, icon, accent color, and optional tag badge. Sets the visual tone of a pop-up app or brief. Use as the first block of any page.", "compact_description": "app-style page header — title, subtitle, icon, accent, tag badge", "surfaces": { "works_on": [ "web", "google-apps-script-web", "pdf", "mcp-apps" ] }, "fields": { "title": "string (required, markdown)", "subtitle": "string (optional, markdown)", "icon": "string (optional, emoji or short text)", "tag": "string (optional, badge label shown in accent pill)", "accent": "string (optional, hex, default \"#6366f1\")", "theme": "string (optional, \"light\"|\"dark\", default \"light\")", "background": "string (optional, css background override — now honoured in dark theme too, added 2026-07-24; previously silently discarded in favour of the dark default)", "meta": "array (optional, added 2026-07-24). Array of {label, value} shown as a small monospace stat row under the header — e.g. a title-block summary line for a reference/spec page." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "back_button", "description": "Styled back navigation button. Links to a URL, a named page slug, or browser history. Three visual styles.", "compact_description": "back navigation — url, nav_slug, or history.back(); ghost/outline/text style", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ] }, "fields": { "label": "string (optional, default \"← Back\")", "url": "string (optional, href)", "nav_slug": "string (optional, resolves to ?nav=)", "style": "string (optional, \"ghost\"|\"outline\"|\"text\", default \"ghost\")", "accent": "string (optional, hex, default \"#6366f1\")" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "section_break", "description": "Labeled or plain section divider. Supports solid, dashed, or dotted line styles. With a label, renders text centered in the line (Notion-style).", "compact_description": "section divider — optional centered label, solid/dashed/dots style", "surfaces": { "works_on": [ "web", "google-apps-script-web", "pdf", "mcp-apps" ] }, "fields": { "label": "string (optional, centered in divider line)", "style": "string (optional, \"line\"|\"dashed\"|\"dots\", default \"line\")", "accent": "string (optional, hex line color, default \"#e5e7eb\")" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "chip_group", "description": "Row of filter/tag chips, optionally scrollable. Chips can link to URLs and have active state.", "compact_description": "chip/tag row — label, color, url, active state; wrap or scroll layout", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ] }, "fields": { "label": "string (optional, group heading)", "layout": "string (optional, \"wrap\"|\"scroll\", default \"wrap\")", "chips": "array (required). Array of {label, color? (hex), url? (href), active? (bool)}" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "columns", "description": "Generic multi-column layout container. Each column holds an array of atom blocks rendered inline. 2–6 columns; collapses to single column on mobile.", "compact_description": "multi-column layout — 2–6 cols, each column holds atom blocks", "surfaces": { "works_on": [ "web", "google-apps-script-web", "pdf", "mcp-apps" ] }, "fields": { "cols": "integer (optional, 2–6, default 2)", "gap": "string (optional, css gap value, default \"1.5rem\")", "align": "string (optional, \"top\"|\"center\"|\"stretch\", default \"top\")", "items": "array (required). Each item is {blocks: [atom blocks]} — one entry per column." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "person_card", "description": "Individual person card with name, role, optional photo, bio, tags, and contact links. Use inside a columns atom to build team rosters.", "compact_description": "person card — name, role, photo, bio, tags, email, linkedin", "surfaces": { "works_on": [ "web", "google-apps-script-web", "pdf", "mcp-apps" ] }, "fields": { "name": "string (required)", "role": "string (optional)", "photo_url": "string (optional, URL)", "bio": "string (optional, markdown)", "email": "string (optional)", "linkedin": "string (optional, URL)", "tags": "string[] (optional)", "accent": "string (optional, hex, default \"#6366f1\")" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "agenda_block", "description": "Time-slotted schedule view for a day or event. Each slot has a time, title, optional speaker, location, type badge, and description.", "compact_description": "time-slotted agenda — slots with time, title, speaker, location, type", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ] }, "fields": { "title": "string (optional)", "date": "string (optional)", "accent": "string (optional, hex, default \"#6366f1\")", "slots": "array (required). Array of {time, title, speaker?, location?, type? (\"break\"|\"keynote\"|\"workshop\"|\"panel\"|\"social\"), description?}" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "risk_flag", "description": "Structured risk callout list with severity levels, description, and mitigation. For meeting prep, project status, incident reports.", "compact_description": "risk list — critical/high/medium/low with title, description, mitigation", "surfaces": { "works_on": [ "web", "google-apps-script-web", "pdf", "mcp-apps" ] }, "fields": { "title": "string (optional)", "risks": "array (required). Array of {level (\"critical\"|\"high\"|\"medium\"|\"low\"), title, description?, mitigation?}" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "action_items", "description": "Action items table with owner, due date, and status. For retros, meeting notes, sprint planning, incident reports.", "compact_description": "action items table — action, owner, due date, status", "surfaces": { "works_on": [ "web", "google-apps-script-web", "pdf", "mcp-apps" ] }, "fields": { "title": "string (optional)", "items": "array (required). Array of {action, owner?, due?, status? (\"open\"|\"in_progress\"|\"done\")}" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "bento_grid", "description": "Asymmetric CSS grid of feature tiles. First tile typically spans multiple columns for visual emphasis. Supports per-tile icons, titles, descriptions, and accent colors. MagicUI/shadcn bento pattern.", "compact_description": "asymmetric bento-box feature tile grid — MagicUI/shadcn pattern", "surfaces": { "works_on": [ "web", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Grid collapses to single column on narrow panels" }, { "surface": "email", "note": "Grid may collapse in email clients" } ], "incompatible_on": [ { "surface": "google-chat", "reason": "No CSS grid support" } ] }, "fields": { "heading": "string (optional). Section heading above the grid.", "columns": "integer (optional). Number of grid columns. Default 3.", "tiles": "array of objects with — title, subtitle, icon (emoji), span (integer, default 1; span 2 fills two columns), color (optional hex), background (optional hex)." }, "source": { "name": "MagicUI / shadcn", "url": "https://magicui.design", "license": "MIT" } }, { "type": "cta_section", "description": "Full-width call-to-action banner with headline, body text, a primary button, and an optional secondary ghost button. Renders on a solid color background. Tailwind UI CTA section pattern.", "compact_description": "full-width CTA banner with headline and buttons — Tailwind UI pattern", "surfaces": { "works_on": [ "web", "email", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Background color may not render in all stage environments" }, { "surface": "google-chat", "note": "No full-width layout support; renders as a card with buttons" } ] }, "fields": { "heading": "string. Main headline.", "body": "string. Descriptive paragraph.", "primary_cta": "object. {label, url} for the primary action button.", "secondary_cta": "object (optional). {label, url} for a ghost secondary button.", "background": "string (optional). CSS color for the banner background. Default" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "animated_counter", "description": "CSS @property counter animation that counts up from zero to target values without JavaScript. Uses @keyframes with CSS custom properties typed as integers. Each counter has a value, label, optional prefix/suffix, and color.", "compact_description": "CSS-only animated counter that counts up to target values", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "pdf", "note": "Renders as static final values; no animation" }, { "surface": "google-meet-stage", "note": "Animation plays; @property support varies by browser version" } ], "incompatible_on": [ { "surface": "google-chat", "reason": "No CSS animation support" }, { "surface": "email", "reason": "CSS animations not supported in email clients" } ] }, "fields": { "counters": "array of objects with — value (integer), label, prefix (optional), suffix (optional), color (optional hex).", "duration": "number (optional). Animation duration in seconds. Default 2." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "media_stream_card", "description": "Auto-detecting media embed that accepts a raw URL and builds the correct iframe for YouTube, Loom, Google Slides, or Vimeo. Displays a labelled card shell with a skeleton shimmer while loading. Designed for stage-first delivery where the URL is the only payload.", "compact_description": "Auto-detecting YouTube/Loom/Slides/Vimeo embed with skeleton", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "pdf", "note": "Renders as a linked thumbnail image only" }, { "surface": "email", "note": "Renders as a static linked image placeholder" } ], "incompatible_on": [ { "surface": "google-chat", "reason": "Iframe embeds not supported in Chat cards" } ] }, "fields": { "url": "string (required). Raw URL — YouTube, Loom, Google Slides, Vimeo, or any embeddable URL. Platform is auto-detected.", "title": "string (optional). Card label shown above the iframe. Defaults to detected platform name.", "height": "string (optional). CSS height for the iframe container. Default 360px." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "live_aggregator", "description": "Comparative progress-bar display for real-time vote/response data. Accepts an items array of label+value pairs and renders normalised horizontal bars with optional value labels. Designed for stage-first delivery where items update incrementally via fiber.", "compact_description": "Real-time comparative bars for votes, counts, or percentages", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "email", "note": "Renders as a static bar list; no transitions" }, { "surface": "pdf", "note": "Renders as a static bar list" } ], "incompatible_on": [ { "surface": "google-chat", "reason": "Rich progress bar layout not supported in Chat cards" } ] }, "fields": { "items": "array of objects — label (string), value (number), color (optional hex).", "title": "string (optional). Section heading above the bars.", "max_value": "number (optional). Denominator for bar widths; auto-computed from max item value if omitted.", "show_values": "boolean (optional). Show numeric value next to each bar. Default true." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "vote_button_group", "description": "Styled multi-option vote selector with three visual variants — pill (rounded filled), neon (dark with cyan glow), and default (flat bordered). Encodes the Cyberpunk Maverick voting pattern as a schema atom. CSS-only interactivity using checkbox/radio inputs.", "compact_description": "Multi-option vote buttons in pill, neon, or default style", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "email", "note": "Renders as a static button list; no selection state" }, { "surface": "pdf", "note": "Renders as a flat option list" } ], "incompatible_on": [ { "surface": "google-chat", "reason": "Custom button styling not supported in Chat cards" } ] }, "fields": { "options": "array of objects — label (string), value (string), selected (boolean optional).", "style": "string (optional). One of pill, neon, default. Default pill.", "title": "string (optional). Section heading above the buttons.", "allow_multi": "boolean (optional). Allow multiple selections. Default false." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "effect_overlay", "description": "CSS-animated celebration overlay triggered by a named effect type. confetti fires falling coloured rectangles via keyframe animation. trophy bounces a large emoji with a scale-in animation. pulse radiates a glowing circle. fireworks scatters particles radially. Designed as a schema atom wrapper around the canvas particle blast used in Cyberpunk Maverick demos.", "compact_description": "CSS confetti/trophy/pulse celebration overlay triggered by name", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "pdf", "note": "Renders as a static icon and message only" }, { "surface": "email", "note": "CSS animations not supported; renders as static icon" } ], "incompatible_on": [ { "surface": "google-chat", "reason": "CSS animation not supported in Chat cards" } ] }, "fields": { "trigger": "string (required). One of confetti, trophy, pulse, fireworks.", "status": "string (optional). Small label shown above the effect (e.g. resolved, done).", "message": "string (optional). Text shown below the icon.", "color": "string (optional). Primary accent color for pulse effect. Default" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "skeleton_stage_card", "description": "Dark-themed shimmer skeleton loader for stage use while a playbook is processing. Four variants — card (avatar + text lines), list (avatar rows), media (image header + caption), chat (alternating message bubbles). All use a CSS linear-gradient shimmer animation with no JavaScript.", "compact_description": "Dark shimmer skeleton loader in card/list/media/chat variants", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "pdf", "note": "Renders as empty grey boxes without animation" } ], "incompatible_on": [ { "surface": "google-chat", "reason": "CSS animation not supported in Chat cards" }, { "surface": "email", "reason": "CSS animations not supported in email clients" } ] }, "fields": { "variant": "string (optional). One of card, list, media, chat. Default card.", "lines": "integer (optional). Number of text lines or list rows to show. Default 3.", "count": "integer (optional). Number of skeleton cards to stack. Default 1." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "marquee_strip", "description": "Infinite horizontally-scrolling strip of text labels or logo+text items, driven by a CSS @keyframes animation with no JavaScript. Ideal for customer logo rows, tech-stack badges, testimonial tickers, and social proof strips. Pause-on-hover is CSS-only.", "compact_description": "infinite CSS-animated horizontal marquee of text or logo items", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "pdf", "note": "Renders as a static single-line row without animation" }, { "surface": "google-chat", "note": "CSS animation not supported; renders as static flex row" } ], "incompatible_on": [ { "surface": "email", "reason": "CSS keyframe animations not supported in email clients" } ] }, "fields": { "items": "array. Each item is a string or {text, image_url} object.", "speed": "\"slow\" | \"normal\" | \"fast\" (optional, default \"normal\")", "direction": "\"left\" | \"right\" (optional, default \"left\")", "pause_on_hover": "bool (optional, default true). Pause scroll on hover.", "label": "string (optional). Small header label above the strip.", "gap": "string (optional). CSS gap between items. Default \"40px\"." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" }, "source_inspiration": { "name": "Aceternity UI — Infinite Moving Cards", "url": "https://ui.aceternity.com/components/infinite-moving-cards", "note": "Pattern inspiration only — renderer is an original Python implementation" } }, { "type": "typewriter_text", "description": "Text that animates itself character by character using a CSS steps() width animation on a monospace element. A blinking cursor is included by default. Useful for hero hooks, slide reveals, and LLM demo showcases. No JavaScript required.", "compact_description": "CSS typewriter animation that reveals text character by character", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-side-panel", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "pdf", "note": "Renders as fully-visible static text without animation" }, { "surface": "google-chat", "note": "CSS animation not supported; renders as plain text" } ], "incompatible_on": [ { "surface": "email", "reason": "CSS keyframe animations not supported in email clients" } ] }, "fields": { "text": "string. The text to type out.", "size": "string (optional). Font size e.g. \"32px\". Default \"28px\".", "weight": "string (optional). Font weight e.g. \"700\". Default \"700\".", "color": "string (optional). Text colour. Default \"#1a1a1a\".", "speed": "\"slow\" | \"normal\" | \"fast\" (optional, default \"normal\")", "cursor": "bool (optional). Show blinking cursor. Default true.", "delay": "string (optional). CSS delay before typing starts. Default \"0s\"." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" }, "source_inspiration": { "name": "Aceternity UI — Typewriter Effect", "url": "https://ui.aceternity.com/components/typewriter-effect", "note": "Pattern inspiration only — renderer is an original Python implementation" } }, { "type": "animated_border_card", "description": "Card with a continuously rotating gradient border, created by a spinning conic-gradient pseudo-element — no JavaScript. Two accent colours blend through the border. Inner content area has a solid background. Ideal for highlighting key facts, announcements, or featured atoms in a catalogue.", "compact_description": "card with CSS rotating gradient animated border", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "pdf", "note": "Renders as a static card with a solid border; animation not captured" }, { "surface": "google-chat", "note": "CSS animation not supported; renders as a plain card" } ], "incompatible_on": [ { "surface": "email", "reason": "CSS animations and pseudo-elements not supported in email clients" } ] }, "fields": { "title": "string (optional). Card heading.", "body": "string. Card body content (markdown inline formatting supported).", "accent": "string (optional). Primary border gradient colour. Default \"#38bdf8\".", "accent2": "string (optional). Secondary border gradient colour. Default \"#818cf8\".", "background": "string (optional). Inner card background colour. Default \"#ffffff\".", "speed": "\"slow\" | \"normal\" | \"fast\" (optional, default \"normal\")", "border_width": "integer (optional). Border thickness in px. Default 2." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" }, "source_inspiration": { "name": "Aceternity UI — Moving Border", "url": "https://ui.aceternity.com/components/moving-border", "note": "Pattern inspiration only — renderer is an original Python implementation" } }, { "type": "aurora_background", "description": "Dark panel with three independently-animating radial gradient blobs that drift and scale using CSS @keyframes — creating an aurora borealis effect with no JavaScript. Supports optional title and body text overlaid on the effect. Ideal for hero sections, cover slides, and atmospheric backgrounds on google-meet-stage.", "compact_description": "animated aurora borealis gradient blob background, CSS-only", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "pdf", "note": "Renders as a static gradient panel without animation" }, { "surface": "google-chat", "note": "CSS animation not supported; renders as solid background" } ], "incompatible_on": [ { "surface": "email", "reason": "CSS keyframe animations not supported in email clients" } ] }, "fields": { "colors": "array of up to 3 hex colour strings (optional). Default [\"#38bdf8\",\"#818cf8\",\"#34d399\"].", "speed": "\"slow\" | \"normal\" | \"fast\" (optional, default \"slow\")", "opacity": "float 0–1 (optional, default 0.5). Blob layer opacity.", "background": "string (optional). Panel background colour. Default \"#0a0f1d\".", "title": "string (optional). Text heading overlaid on the aurora.", "body": "string (optional). Body text overlaid on the aurora (markdown inline supported)." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" }, "source_inspiration": { "name": "Aceternity UI — Aurora Background", "url": "https://ui.aceternity.com/components/aurora-background", "note": "Pattern inspiration only — renderer is an original Python implementation" } }, { "type": "dot_grid_background", "description": "Panel with a CSS repeating dot, grid, or cross background pattern using background-image with radial-gradient or linear-gradient. No SVG, no JavaScript. Useful as a texture layer behind content in dark or light themes.", "compact_description": "CSS repeating dot or grid pattern panel background", "surfaces": { "works_on": [ "web", "google-meet-stage", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "background-image patterns may not render in Chat card containers" } ], "incompatible_on": [ { "surface": "email", "reason": "CSS background-image patterns not reliably supported in email clients" } ] }, "fields": { "variant": "\"dots\" | \"grid\" | \"cross\" (optional, default \"dots\")", "title": "string (optional). Text heading overlaid on the pattern.", "body": "string (optional). Body text overlaid on the pattern (markdown inline supported).", "dot_color": "string (optional). Dot or line colour. Default \"rgba(148,163,184,0.35)\".", "background": "string (optional). Panel background fill. Default \"#0d1525\".", "spacing": "integer (optional). Grid cell size in px. Default 24.", "dot_size": "integer (optional). Dot radius in px (dots variant only). Default 1." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" }, "source_inspiration": { "name": "Aceternity UI — Grid and Dot Backgrounds", "url": "https://ui.aceternity.com/components/grid-and-dot-backgrounds", "note": "Pattern inspiration only — renderer is an original Python implementation" } }, { "type": "shimmer_button", "description": "Inline button or link with a diagonal shimmer sweep animation driven by CSS background-position keyframes. The shimmer accent colour sweeps across the button on a loop. No JavaScript. Use for primary CTAs on dark backgrounds.", "compact_description": "button with CSS background-position shimmer sweep animation", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "pdf", "note": "Renders as a static styled button without animation" }, { "surface": "google-chat", "note": "CSS animation not supported; renders as a plain button" } ], "incompatible_on": [ { "surface": "email", "reason": "CSS keyframe animations not supported in email clients" } ] }, "fields": { "label": "string. Button text.", "href": "string (optional). If set, renders as an anchor tag.", "size": "\"sm\" | \"md\" | \"lg\" (optional, default \"md\")", "accent": "string (optional). Shimmer highlight colour. Default \"#38bdf8\".", "background": "string (optional). Button background colour. Default \"#1e293b\".", "speed": "\"slow\" | \"normal\" | \"fast\" (optional, default \"normal\")", "description": "string (optional). Small text below the button." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" }, "source_inspiration": { "name": "Aceternity UI — Shimmer Button", "url": "https://ui.aceternity.com/components/shimmer-button", "note": "Pattern inspiration only — renderer is an original Python implementation" } }, { "type": "card_stack", "description": "Two to four cards stacked with CSS transform rotate and translateY, creating a fanned deck effect. The front card shows full title and body; back cards are progressively rotated and faded. No JavaScript — purely presentational. Useful for showcasing multiple items with a premium layered feel.", "compact_description": "CSS-fanned stack of 2–4 cards with rotation and opacity tiers", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "pdf", "note": "CSS transform may not render correctly in all PDF engines" }, { "surface": "google-chat", "note": "Absolute positioning and transforms may collapse in Chat card layout" } ], "incompatible_on": [ { "surface": "email", "reason": "CSS transforms and absolute positioning not supported in email clients" } ] }, "fields": { "cards": "array. Each card: {title, body, accent}. Max 4 cards.", "background": "string (optional). Card background colour. Default \"#1e293b\".", "border_color": "string (optional). Card border colour. Default \"rgba(255,255,255,0.08)\".", "height": "integer (optional). Card height in px. Default 160." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" }, "source_inspiration": { "name": "Aceternity UI — Card Stack", "url": "https://ui.aceternity.com/components/card-stack", "note": "Pattern inspiration only — renderer is an original Python implementation" } }, { "type": "meteor_shower", "description": "Dark panel with CSS-animated diagonal streaks that fall across the surface like a meteor shower. Each meteor is a rotated span with a linear-gradient tail, animated with staggered delays — no JavaScript, no canvas. Optional title and body text render above the effect layer.", "compact_description": "CSS-animated diagonal falling meteor streaks on a dark panel", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "pdf", "note": "Renders as a static dark panel without animation" }, { "surface": "google-chat", "note": "CSS animation not supported; renders as a plain dark block" } ], "incompatible_on": [ { "surface": "email", "reason": "CSS keyframe animations not supported in email clients" } ] }, "fields": { "count": "integer (optional). Number of meteors. Default 20. Max 40.", "color": "string (optional). Meteor streak colour. Default \"#38bdf8\".", "speed": "\"slow\" | \"normal\" | \"fast\" (optional, default \"normal\")", "background": "string (optional). Panel background colour. Default \"#0a0f1d\".", "title": "string (optional). Text heading overlaid on the effect.", "body": "string (optional). Body text overlaid on the effect (markdown inline supported)." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" }, "source_inspiration": { "name": "Aceternity UI — Meteors", "url": "https://ui.aceternity.com/components/meteors", "note": "Pattern inspiration only — renderer is an original Python implementation" } }, { "type": "blur_fade_in", "description": "Container that animates from blurred and transparent to fully visible on mount. Uses CSS @keyframes with filter:blur() and opacity together — no JavaScript. Configurable delay, duration, and direction (up, down, left, right, none).", "compact_description": "CSS blur-to-focus fade-in container reveal", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-apps-script-side-panel", "note": "Use direction \"none\" — translation offsets can clip against the 300px iframe edge. Opacity-only fade works correctly." }, { "surface": "pdf", "note": "Renders as a static visible panel without animation" }, { "surface": "google-chat", "note": "CSS animation not supported; renders immediately visible" } ], "incompatible_on": [ { "surface": "email", "reason": "CSS keyframe animations not supported in email clients" } ] }, "fields": { "children": "array of atom objects to render inside the container (optional).", "title": "string (optional). Heading text.", "body": "string (optional). Body text (markdown inline supported).", "delay": "string (optional). CSS delay before animation starts, e.g. \"0.3s\". Default \"0s\".", "speed": "\"slow\" | \"normal\" | \"fast\" (optional, default \"normal\")", "direction": "\"up\" | \"down\" | \"left\" | \"right\" | \"none\" (optional, default \"up\"). Drift direction on reveal.", "blur": "string (optional). Starting blur radius, e.g. \"8px\". Default \"8px\".", "background": "string (optional). Panel background. Default transparent." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" }, "source_inspiration": { "name": "Magic UI — Blur Fade", "url": "https://magicui.design/docs/components/blur-fade", "note": "Pattern inspiration only — renderer is an original Python implementation" } }, { "type": "glow_button", "description": "Button or anchor that uses CSS box-shadow to signal state. Three named states — disabled (grey), ready (brand), fired (success pulse) — each with a distinct glow colour and optional pulse animation. State is set via the state field; no JavaScript required.", "compact_description": "CSS box-shadow state-signalling button with disabled/ready/fired glow", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-side-panel", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "pdf", "note": "Renders as a static button without glow or animation" }, { "surface": "google-chat", "note": "CSS animation not supported; renders as a flat button" } ], "incompatible_on": [ { "surface": "email", "reason": "CSS box-shadow and animations not supported in most email clients" } ] }, "fields": { "label": "string. Button text.", "state": "\"disabled\" | \"ready\" | \"fired\" (optional, default \"ready\")", "href": "string (optional). If set renders as an anchor tag.", "color_ready": "string (optional). Glow colour in ready state. Default \"#38bdf8\".", "color_fired": "string (optional). Glow colour in fired state. Default \"#34d399\".", "size": "\"sm\" | \"md\" | \"lg\" (optional, default \"md\")", "description": "string (optional). Small caption text below the button." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" }, "source_inspiration": { "name": "Magic UI — Shimmer Button / Animated Subscribe Button", "url": "https://magicui.design/docs/components/animated-subscribe-button", "note": "Pattern inspiration only — renderer is an original Python implementation" } }, { "type": "animated_beam", "description": "Inline SVG panel showing two labelled endpoint nodes connected by a path with a pulsing light dot that travels along it, animating via CSS stroke-dashoffset. No JavaScript, no mousemove. Visualises data routing between two named components.", "compact_description": "CSS stroke-dashoffset animated SVG beam between two labelled nodes", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-apps-script-side-panel", "note": "SVG width is constrained to 300px; use short from_label/to_label (≤6 chars) to avoid node text overflow." }, { "surface": "pdf", "note": "Renders as a static SVG path without animation" }, { "surface": "google-chat", "note": "CSS animation not supported; renders as a static diagram" } ], "incompatible_on": [ { "surface": "email", "reason": "SVG animation and CSS keyframes not supported in email clients" } ] }, "fields": { "from_label": "string. Left/source node label.", "to_label": "string. Right/target node label.", "label": "string (optional). Small caption above the beam diagram.", "body": "string (optional). Description text below the diagram.", "active": "bool (optional). Whether the beam pulse animates. Default true.", "color": "string (optional). Beam and node accent colour. Default \"#38bdf8\".", "speed": "\"slow\" | \"normal\" | \"fast\" (optional, default \"normal\")", "curved": "bool (optional). Use a curved cubic-bezier path. Default true." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" }, "source_inspiration": { "name": "Magic UI — Animated Beam", "url": "https://magicui.design/docs/components/animated-beam", "note": "Pattern inspiration only — renderer is an original Python implementation" } }, { "type": "encrypted_reveal", "description": "Text that appears to scramble through random alphanumeric characters before locking into the final readable string. Implemented entirely in CSS using a steps() @keyframes animation cycling through server-side pre-generated scrambled frames — no JavaScript required.", "compact_description": "CSS steps() scramble-to-reveal text animation", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "pdf", "note": "Renders as a static panel showing the final text only" }, { "surface": "google-chat", "note": "CSS animation not supported; renders as plain text immediately" } ], "incompatible_on": [ { "surface": "email", "reason": "CSS keyframe animations not supported in email clients" } ] }, "fields": { "text": "string. The final text to reveal.", "size": "string (optional). Font size e.g. \"32px\". Default \"28px\".", "weight": "string (optional). Font weight. Default \"700\".", "color": "string (optional). Text colour. Default \"#f1f5f9\".", "scramble_color": "string (optional). Colour of scramble characters. Default \"#38bdf8\".", "speed": "\"slow\" | \"normal\" | \"fast\" (optional, default \"normal\")", "delay": "string (optional). CSS delay before reveal starts. Default \"0s\".", "frames": "integer (optional). Number of scramble frames before lock. Default 8.", "background": "string (optional). Container background. Default transparent." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" }, "source_inspiration": { "name": "Magic UI — Text Animate / Encrypted Text", "url": "https://magicui.design/docs/components/text-animate", "note": "Pattern inspiration only — renderer is an original Python implementation" } }, { "type": "word_flip", "description": "Inline overflow-hidden container that cycles through a list of words using a CSS steps() translateY animation. The agent provides the word array; the component handles all timing and looping. Useful for dynamic hero headlines such as \"Grow your [Retention | Revenue | Signups]\". No JavaScript required.", "compact_description": "CSS steps() vertical word carousel in an overflow-hidden inline container", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-side-panel", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "pdf", "note": "Renders all words stacked vertically (overflow visible); use first word only as fallback." }, { "surface": "google-chat", "note": "CSS animation not supported; renders the first word only as plain text." } ], "incompatible_on": [ { "surface": "email", "reason": "CSS keyframe animations not supported in email clients" } ] }, "fields": { "words": "array of strings. The words to cycle through. Minimum 2.", "prefix": "string (optional). Static text before the flipping section, e.g. \"Grow your \".", "suffix": "string (optional). Static text after the flipping section.", "speed": "\"slow\" | \"normal\" | \"fast\" (optional, default \"normal\"). Per-word hold duration.", "color": "string (optional). Flipping word colour. Default \"#38bdf8\".", "size": "string (optional). Font size, e.g. \"32px\". Default \"inherit\".", "weight": "string (optional). Font weight of flipping words. Default \"700\"." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" }, "source_inspiration": { "name": "Magic UI — Text Animate", "url": "https://magicui.design/docs/components/text-animate", "note": "Pattern inspiration only — renderer is an original Python implementation" } }, { "type": "sonar_pulse", "description": "A visual attention primitive that emits three concentric ring pulses outward from a centre point using staggered CSS @keyframes. Each ring animates independently with a 1-second delay offset, creating a continuous sonar effect. Four named variants map to semantic colours. No JavaScript required.", "compact_description": "CSS concentric ring pulse animation for attention signalling", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-side-panel", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "pdf", "note": "Renders as a static coloured circle without ring animation" }, { "surface": "google-chat", "note": "CSS animation not supported; renders as a plain coloured dot" } ], "incompatible_on": [ { "surface": "email", "reason": "CSS keyframe animations not supported in email clients" } ] }, "fields": { "variant": "\"critical\" | \"success\" | \"info\" | \"warning\" (optional, default \"critical\")", "active": "bool (optional). If false renders as a static dot. Default true.", "label": "string (optional). Short text label centred in the pulse ring.", "size": "\"sm\" | \"md\" | \"lg\" (optional, default \"md\"). Controls ring diameter.", "body": "string (optional). Caption text below the pulse ring." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" }, "source_inspiration": { "name": "Magic UI — Ripple", "url": "https://magicui.design/docs/components/ripple", "note": "Pattern inspiration only — renderer is an original Python implementation" } }, { "type": "typewriter", "description": "Text that reveals itself character-by-character using a CSS steps() width animation on an overflow-hidden monospace container, with an optional blinking cursor. No JavaScript required.", "compact_description": "CSS character-by-character typewriter reveal with optional cursor", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "pdf", "note": "Renders as static completed text; no animation" }, { "surface": "google-chat", "note": "CSS animation not supported; renders as plain text" } ], "incompatible_on": [ { "surface": "email", "reason": "CSS keyframe animations not supported in email clients" } ] }, "fields": { "text": "string. The text to type out.", "speed": "\"slow\" | \"normal\" | \"fast\" (optional, default \"normal\")", "cursor": "bool (optional). Show blinking cursor after typing. Default true.", "color": "string (optional). Text colour. Default \"#0f172a\".", "size": "string (optional). Font size e.g. \"1.4rem\". Default \"1.4rem\".", "weight": "string (optional). Font weight. Default \"600\".", "background": "string (optional). Container background. Default \"#f8fafc\"." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "number_odometer", "description": "Slot-machine style digit-by-digit flip animation where each digit column independently scrolls to its target value using staggered CSS translateY keyframes. Distinct from animated_counter which counts up sequentially — this flips each digit column independently.", "compact_description": "Slot-machine digit-column flip to target number", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "pdf", "note": "Renders as static number; no animation" }, { "surface": "google-chat", "note": "CSS animation not supported; renders as plain number" } ], "incompatible_on": [ { "surface": "email", "reason": "CSS keyframe animations not supported in email clients" } ] }, "fields": { "value": "string. The target number to display e.g. \"1337\" or \"42.5k\".", "label": "string (optional). Caption below the number.", "color": "string (optional). Digit colour. Default \"#0f172a\".", "accent": "string (optional). Accent colour. Default \"#4f46e5\".", "size": "string (optional). Font size. Default \"3rem\".", "duration": "number (optional). Animation duration in seconds. Default 1.2." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "typing_indicator", "description": "Three bouncing dots inside a chat bubble that signals an agent or user is composing a response. Each dot animates with a staggered delay using CSS @keyframes translateY, creating a continuous wave effect.", "compact_description": "Three-dot bouncing chat typing indicator bubble", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-side-panel", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "pdf", "note": "Renders as a static placeholder bubble; no animation" }, { "surface": "google-chat", "note": "CSS animation not supported; renders as plain text" } ], "incompatible_on": [ { "surface": "email", "reason": "CSS keyframe animations not supported in email clients" } ] }, "fields": { "name": "string (optional). Agent or user name shown above the bubble. Default \"Agent\".", "variant": "\"dark\" | \"light\" (optional, default \"dark\"). Bubble colour scheme." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "countdown_timer", "description": "Flip-clock style countdown display showing hours, minutes, and seconds in individual digit tiles. Renders a static snapshot of the target time — pair with a dataModelUpdate SSE stream to tick the values.", "compact_description": "Flip-clock countdown timer display (static tiles, data-driven ticking)", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Renders as plain text time string" }, { "surface": "pdf", "note": "Renders as static time display" } ], "incompatible_on": [ { "surface": "email", "reason": "Dynamic ticking not supported; renders as static snapshot" } ] }, "fields": { "hours": "integer (optional). Hours component. Default 0.", "minutes": "integer (optional). Minutes component. Default 4.", "seconds": "integer (optional). Seconds component. Default 59.", "label": "string (optional). Caption below the timer.", "variant": "\"dark\" | \"light\" (optional, default \"dark\").", "accent": "string (optional). Separator and accent colour. Default \"#00f2ff\"." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "gradient_text", "description": "Heading text rendered with an animated shifting gradient fill using CSS background-clip:text and a background-position keyframe. The gradient flows continuously between the from/to colours, creating a shimmer effect on titles and hero text.", "compact_description": "Animated gradient-fill heading text via CSS background-clip", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "pdf", "note": "Renders as flat-coloured text (first gradient stop)" }, { "surface": "google-chat", "note": "CSS background-clip not supported; renders as plain bold text" } ], "incompatible_on": [ { "surface": "email", "reason": "CSS background-clip:text not supported in email clients" } ] }, "fields": { "text": "string. The heading text to display.", "from": "string (optional). Gradient start colour. Default \"#4f46e5\".", "to": "string (optional). Gradient end colour. Default \"#06b6d4\".", "via": "string (optional). Optional midpoint colour.", "size": "string (optional). Font size. Default \"2rem\".", "weight": "string (optional). Font weight. Default \"800\".", "duration": "number (optional). Cycle duration in seconds. Default 4." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "reveal_on_scroll", "description": "Content block that starts invisible and fades + slides into view when scrolled into the viewport, using an IntersectionObserver with a CSS class toggle. Requires a small inline script — degrades gracefully to visible static content where JS is unavailable.", "compact_description": "IntersectionObserver scroll-triggered fade+slide reveal", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Content renders visible immediately (no scroll context)" }, { "surface": "pdf", "note": "Renders as fully visible static block" }, { "surface": "google-chat", "note": "Renders as plain text block" } ], "incompatible_on": [ { "surface": "email", "reason": "JavaScript not supported in email clients" } ] }, "fields": { "title": "string (optional). Bold heading inside the block.", "body": "string (optional). Body text inside the block.", "direction": "\"up\" | \"down\" | \"left\" | \"right\" (optional, default \"up\"). Drift direction before reveal.", "duration": "number (optional). Transition duration in seconds. Default 0.7.", "accent": "string (optional). Left border accent colour. Default \"#4f46e5\".", "background": "string (optional). Block background. Default \"#f8fafc\"." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "word_scramble", "description": "Text that begins as a stream of random alphanumeric characters and progressively resolves left-to-right into the final string using CSS @keyframes content with steps(). Pure CSS — no JavaScript. Each frame pre-generates a partially-revealed scramble via Python at render time.", "compact_description": "CSS steps() left-to-right character scramble-to-reveal", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "pdf", "note": "Renders as the final resolved text only" }, { "surface": "google-chat", "note": "CSS animation not supported; renders as final text" } ], "incompatible_on": [ { "surface": "email", "reason": "CSS keyframe animations not supported in email clients" } ] }, "fields": { "text": "string. The final text to reveal.", "duration": "number (optional). Total animation duration in seconds. Default 2.0.", "color": "string (optional). Final text colour. Default \"#0f172a\".", "scramble_color": "string (optional). Scramble character colour. Default \"#4f46e5\".", "size": "string (optional). Font size. Default \"2.5rem\".", "weight": "string (optional). Font weight. Default \"800\"." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "svg_path_draw", "description": "An SVG path that animates drawing itself from start to end using the stroke-dasharray / stroke-dashoffset CSS technique. The agent selects a named shape (arrow, check, circle, zigzag, infinity) or supplies a custom SVG path string.", "compact_description": "SVG stroke-dashoffset self-drawing path animation", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "pdf", "note": "Renders as a fully-drawn static SVG path" }, { "surface": "google-chat", "note": "SVG animation not supported; renders as a static icon" } ], "incompatible_on": [ { "surface": "email", "reason": "CSS keyframe animations on SVG not supported in email clients" } ] }, "fields": { "shape": "\"arrow\" | \"check\" | \"circle\" | \"zigzag\" | \"infinity\" (optional, default \"arrow\")", "color": "string (optional). Stroke colour. Default \"#4f46e5\".", "width": "integer (optional). Stroke width in px. Default 3.", "duration": "number (optional). Draw duration in seconds. Default 1.5.", "label": "string (optional). Caption below the SVG." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "parallax_card", "description": "A card with CSS perspective and a mousemove JavaScript handler that rotates the card along both axes in response to cursor position, creating a 3D parallax tilt effect. Text layers use translateZ to create depth separation. Requires a minimal inline script.", "compact_description": "3D CSS perspective tilt card with mousemove parallax depth", "surfaces": { "works_on": [ "web", "google-apps-script-side-panel", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Renders as a flat dark card; mouse events may not propagate through Meet iframe" }, { "surface": "pdf", "note": "Renders as a flat static card" }, { "surface": "google-chat", "note": "Renders as a plain text card" }, { "surface": "google-apps-script-web", "note": "mousemove events may behave differently when page is embedded in a Workspace sidebar" } ], "incompatible_on": [ { "surface": "email", "reason": "JavaScript and 3D CSS transforms not supported in email clients" } ] }, "fields": { "title": "string (optional). Card heading.", "body": "string (optional). Card body text.", "badge": "string (optional). Small pill badge above the title.", "accent": "string (optional). Badge background colour. Default \"#4f46e5\".", "background": "string (optional). Card background. Default \"#0f172a\".", "depth": "integer (optional). Maximum tilt angle in degrees. Default 15." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "quiz_question", "description": "Multiple-choice or true/false question card with CSS checkbox trick for answer reveal. Correct option is highlighted green on selection, wrong options dim. No JavaScript required — pure CSS :checked selectors drive the feedback state. Optionally shows an explanation block after any answer is chosen.", "compact_description": "MCQ or true/false question with CSS-only correct/wrong feedback", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "CSS :checked feedback works inside iframe but radio reset across slides may not persist" }, { "surface": "pdf", "note": "Renders as a static numbered question list with options as bullet points — no interactivity" } ], "incompatible_on": [ { "surface": "google-chat", "reason": "No CSS interactivity — use poll_block instead" }, { "surface": "email", "reason": "CSS :checked selectors not supported in email clients" } ] }, "fields": { "question": "string. The question text.", "options": "list[string]. Answer options — 2 to 6 items.", "correct": "integer. Zero-based index of the correct option.", "explanation": "string (optional). Shown after any option is selected.", "style": "\"default\" | \"dark\" | \"minimal\" (optional, default \"default\")" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "fill_in_blank", "description": "Cloze-test exercise where one or more blanks in a sentence or paragraph are replaced by inline input fields. On submission a minimal inline script compares trimmed lowercase input against accepted answers and highlights each blank green (correct) or red (wrong). A retry button resets all inputs.", "compact_description": "cloze-test sentence with inline inputs and correct/wrong highlight on submit", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Inputs render but JS submit handler may be sandboxed — test in target iframe" }, { "surface": "pdf", "note": "Renders as a sentence with underline placeholder blanks — no interactivity" } ], "incompatible_on": [ { "surface": "google-chat", "reason": "No form input or JS support" }, { "surface": "email", "reason": "Form inputs and JS not supported in email clients" } ] }, "fields": { "template": "string. Sentence with {blank} placeholders marking each gap.", "answers": "list[string | list[string]]. Accepted answer(s) per blank in order. A list entry may itself be a list of acceptable alternatives.", "hint": "string (optional). Shown below the exercise as a nudge.", "case_sensitive": "boolean (optional, default false)." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "match_exercise", "description": "Click-to-pair matching exercise. Two columns of items are shown — left (terms) and right (definitions). Learner clicks a term then a definition to form a pair. Matched pairs lock and highlight green; a mismatch briefly flashes red then resets. A score chip shows pairs matched / total. Driven by a minimal inline script.", "compact_description": "click-to-pair matching exercise with green lock and red mismatch flash", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Click events work inside iframe; rendered as two-column grid" }, { "surface": "pdf", "note": "Renders as a two-column table of terms and definitions — no interactivity" } ], "incompatible_on": [ { "surface": "google-chat", "reason": "No JS or interactive state" }, { "surface": "email", "reason": "No JS support in email clients" } ] }, "fields": { "pairs": "list[{term: string, definition: string}]. 3 to 8 pairs recommended.", "shuffle": "boolean (optional, default true). Randomise right-column order on render." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "hint_reveal", "description": "A \"Show hint\" disclosure button that expands to reveal help text. Built on the HTML details/summary element — no JavaScript required. The summary label toggles between \"Show hint\" and \"Hide hint\". Styled with a subtle left-border accent and muted background to visually separate it from body content.", "compact_description": "show/hide hint disclosure using HTML details/summary — no JS", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Renders as a plain text block with no toggle — hint always visible" }, { "surface": "pdf", "note": "Renders as a static tinted block with hint always visible" }, { "surface": "email", "note": "details/summary not reliably supported — renders hint as always-visible indented block" } ] }, "fields": { "hint": "string. The hint text revealed on expand.", "label": "string (optional). Button label. Default \"Show hint\".", "accent": "string (optional). Left-border and icon colour. Default \"#6366f1\"." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "achievement_badge", "description": "Unlockable achievement or completion badge displayed as a circular icon with a title, description, and optional unlock date. Locked state shows a greyscale padlock overlay. Suitable for course completion, streak milestones, and skill certifications. Renders as a centred card or inline pill depending on size variant.", "compact_description": "unlockable achievement badge with locked/unlocked state and optional date", "surfaces": { "works_on": [ "web", "google-meet-stage", "email", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Renders as a plain text badge name and description — no icon or visual styling" } ] }, "fields": { "title": "string. Achievement name.", "description": "string (optional). Short achievement description.", "icon": "string (optional). Emoji or single character used as the badge icon. Default \"🏆\".", "locked": "boolean (optional, default false). Shows greyscale padlock overlay when true.", "unlocked_at": "string (optional). ISO date string shown beneath the badge when unlocked.", "color": "string (optional). Badge accent colour. Default \"#f59e0b\".", "size": "\"card\" | \"pill\" (optional, default \"card\")" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "score_summary", "description": "End-of-exercise or end-of-module score card showing correct answers, total questions, percentage, and optional time taken. Animates the score fraction on render using a CSS counter. Includes a contextual pass/fail or grade label and an optional retry/continue CTA row.", "compact_description": "end-of-exercise score card with correct/total, percentage, grade, and CTA", "surfaces": { "works_on": [ "web", "google-meet-stage", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Renders as a plain text score line — no visual card or animation" }, { "surface": "email", "note": "CSS counter animation stripped — renders as static score text card" } ] }, "fields": { "correct": "integer. Number of correct answers.", "total": "integer. Total number of questions.", "time_taken": "string (optional). Human-readable time string e.g. \"2m 14s\".", "pass_threshold": "integer (optional). Percentage (0–100) required to pass. Drives pass/fail label colour.", "retry_label": "string (optional). Label for the retry button. Omit to hide retry CTA.", "continue_label": "string (optional). Label for the continue button. Omit to hide continue CTA.", "continue_url": "url (optional). Destination for the continue button." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "xp_bar", "description": "Experience points or gamification progress bar showing current XP, level label, and XP needed to reach the next level. The fill animates from the previous value to the current value on render via CSS transition. A level-up flash overlay triggers when xp_current equals or exceeds xp_next.", "compact_description": "animated XP/points progress bar with level label and level-up flash", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "pdf", "note": "Renders as a static labelled progress bar — no animation or level-up effect" } ], "incompatible_on": [ { "surface": "google-chat", "reason": "No CSS animation or progress bar support" }, { "surface": "email", "reason": "CSS transitions and animation not reliably supported" } ] }, "fields": { "level_label": "string. Current level name e.g. \"Level 3 — Intermediate\".", "xp_current": "integer. Current XP within the current level.", "xp_next": "integer. XP required to reach the next level.", "accent": "string (optional). Bar fill colour. Default \"#6366f1\".", "show_flash": "boolean (optional, default true). Trigger level-up flash when xp_current >= xp_next." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "lesson_nav", "description": "Previous/next lesson navigation bar with the current lesson title centred and module context shown above. Each side shows the adjacent lesson title and a directional arrow. Optionally shows a completion checkbox for the current lesson that persists via localStorage.", "compact_description": "prev/next lesson navigation with module context and optional completion checkbox", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-meet-stage", "note": "Renders as a simplified prev/next pill row — localStorage persistence unavailable in iframe" }, { "surface": "pdf", "note": "Renders as a static prev/next text row with lesson titles" }, { "surface": "google-chat", "note": "Renders as a plain text prev/next line — no navigation links" }, { "surface": "email", "note": "Renders as a plain text nav row — links may be stripped by email clients" } ] }, "fields": { "module_label": "string (optional). Module or section name shown above the nav bar.", "current_title": "string. Title of the current lesson.", "prev_title": "string (optional). Title of the previous lesson. Omit to hide prev arrow.", "prev_url": "url (optional). Link for the previous lesson.", "next_title": "string (optional). Title of the next lesson. Omit to hide next arrow.", "next_url": "url (optional). Link for the next lesson.", "show_completion": "boolean (optional, default false). Show a \"Mark as complete\" checkbox persisted in localStorage." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "course_progress_card", "description": "Overall course completion card showing a list of modules with individual progress bars and a top-level aggregate progress ring. Each module row shows its title, lesson count, and percentage complete. Suitable for a course sidebar or dashboard widget.", "compact_description": "course-level progress card with per-module bars and aggregate completion ring", "surfaces": { "works_on": [ "web", "google-meet-stage", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Renders as a plain text list of module titles and completion percentages" }, { "surface": "email", "note": "CSS progress bars stripped — renders as a static text list with percentages" } ] }, "fields": { "course_title": "string. Course name shown at the top of the card.", "modules": "list[{title: string, lessons_total: integer, lessons_done: integer}].", "accent": "string (optional). Progress fill colour. Default \"#6366f1\"." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "highlighted_text", "description": "Inline passage of text with a coloured highlight background and an optional margin annotation note. The annotation appears as a side-note pill on hover (CSS :hover) or as a visible aside on smaller viewports. Useful for reading comprehension exercises, exam technique callouts, and annotated source analysis.", "compact_description": "highlighted text passage with optional hover margin annotation note", "surfaces": { "works_on": [ "web", "google-meet-stage", "pdf", "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "google-chat", "note": "Highlight background stripped — renders as plain text with annotation appended in brackets" }, { "surface": "email", "note": "Hover annotation not supported — annotation rendered as inline parenthetical" } ] }, "fields": { "text": "string. The passage to highlight.", "annotation": "string (optional). Margin note revealed on hover.", "color": "string (optional). Highlight background colour. Default \"#fef08a\" (yellow).", "annotation_color": "string (optional). Annotation pill background. Default \"#fbbf24\"." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "drive_file_list", "description": "Live list of files in a Google Drive folder rendered with icons and download links. Works on Google Apps Script only.", "compact_description": "live list of Drive folder files", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "mcp-apps", "note": "renders sample data — live Google Workspace data requires an Apps Script deployment" } ] }, "fields": { "folder_id": "string. The Google Drive folder ID to list files from.", "max_results": "integer (optional). Maximum number of files to return. Default is 10." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "sheet_preview", "description": "Live read-only preview of a specified range in a Google Sheet. Renders as an HTML table. Works on Google Apps Script only.", "compact_description": "live read-only Google Sheet range preview", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "mcp-apps", "note": "renders sample data — live Google Workspace data requires an Apps Script deployment" } ] }, "fields": { "spreadsheet_id": "string. The Google Sheets ID.", "sheet_name": "string. The name of the sheet tab.", "range": "string. The A1 notation range (e.g. A1:D10)." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "gmail_summary", "description": "Summary list of recent emails in the user's Gmail matching a search query. Works on Google Apps Script only.", "compact_description": "list of recent Gmail messages matching query", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "mcp-apps", "note": "renders sample data — live Google Workspace data requires an Apps Script deployment" } ] }, "fields": { "query": "string. The search query (e.g. \"is:unread label:work\").", "max_results": "integer (optional). Maximum number of emails to display. Default is 5." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "calendar_upcoming", "description": "List of upcoming events from the user's primary calendar. Works on Google Apps Script only.", "compact_description": "list of upcoming calendar events", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "mcp-apps", "note": "renders sample data — live Google Workspace data requires an Apps Script deployment" } ] }, "fields": { "max_results": "integer (optional). Maximum number of upcoming events to show. Default is 5." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "user_greeting", "description": "Personalised greeting showing the active user's Google account email. Works on Google Apps Script only.", "compact_description": "personalised greeting with active user email", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "mcp-apps", "note": "renders sample data — live Google Workspace data requires an Apps Script deployment" } ] }, "fields": { "prefix": "string (optional). The greeting prefix. Default is \"Hello\"." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "script_run_button", "description": "Interactive button that executes a custom Google Apps Script server function when clicked, showing a loading spinner and returning/displaying the function result. Works on Google Apps Script only.", "compact_description": "button to trigger server-side Apps Script function", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "label": "string. The button text.", "function_name": "string. The name of the server-side V8 JavaScript function to call.", "argument": "string (optional). Optional string argument to pass to the function." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "calendar_today", "description": "Today's events from the user's default Google Calendar, displayed as a compact timeline with time and location. Automatically shows today's date in the header.", "compact_description": "today's calendar events from the user's default calendar", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "mcp-apps", "note": "renders sample data — live Google Workspace data requires an Apps Script deployment" } ] }, "fields": { "title": "string (optional). Card heading. Default is \"Today's Schedule\".", "max_results": "integer (optional). Maximum events to show. Default 8." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "sheet_stats", "description": "Aggregate statistics (sum, average, count, min, max) computed from a Google Sheet range and displayed as a row of stat badges. Ideal for dashboards.", "compact_description": "aggregate stats from a sheet range displayed as stat badges", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "mcp-apps", "note": "renders sample data — live Google Workspace data requires an Apps Script deployment" } ] }, "fields": { "spreadsheet_id": "string. The Google Sheets ID.", "sheet_name": "string (optional). Sheet tab name.", "range": "string. A1 notation range (e.g. B2:B50).", "label": "string (optional). Card heading. Default is \"Sheet Stats\".", "show": "array (optional). Which stats to show — any of sum, average, count, min, max. Default [\"sum\",\"average\",\"count\"].", "accent": "string (optional). Accent colour for stat values." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "gmail_unread_count", "description": "Unread message count badges for one or more Gmail labels, shown as a pill row. Zero counts are displayed in grey; non-zero in the accent colour.", "compact_description": "unread count badges for Gmail labels", "surfaces": { "works_on": [ "google-apps-script-web", "google-meet-stage", "mcp-apps" ], "degraded_on": [ { "surface": "mcp-apps", "note": "renders sample data — live Google Workspace data requires an Apps Script deployment" } ] }, "fields": { "labels": "array (optional). Gmail label names to count. Default [\"INBOX\"].", "title": "string (optional). Card heading. Default is \"Gmail\".", "accent": "string (optional). Badge colour for non-zero counts. Default red.", "counts": "object (static connector). Label→count map for non-GAS surfaces.", "auth_token": "string (api connector). OAuth2 bearer token for REST API." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "user_profile_card", "description": "Personalised profile card showing the active user's avatar initial, display name (derived from email), email address, and Workspace domain. On GAS uses Session.getActiveUser(); on other surfaces renders from name/email fields.", "compact_description": "user avatar, display name, email and domain — live on GAS, static fields elsewhere", "surfaces": { "works_on": [ "google-apps-script-web", "google-meet-stage", "mcp-apps" ], "degraded_on": [ { "surface": "mcp-apps", "note": "renders sample data — live Google Workspace data requires an Apps Script deployment" } ] }, "fields": { "name": "string (static connector). Display name for non-GAS surfaces.", "email": "string (static connector). Email address for non-GAS surfaces.", "accent": "string (optional). Avatar background colour.", "subtitle": "string (optional). Role or team label shown below the email." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "drive_storage_usage", "description": "Google Drive storage quota displayed as a labelled progress bar — used GB, total GB, and percentage. Bar colour shifts to amber above 70% and red above 90%. On GAS uses DriveApp; elsewhere pass used_gb and total_gb fields.", "compact_description": "Drive storage quota progress bar — live on GAS, or pass used_gb/total_gb for static", "surfaces": { "works_on": [ "google-apps-script-web", "google-meet-stage", "mcp-apps" ], "degraded_on": [ { "surface": "mcp-apps", "note": "renders sample data — live Google Workspace data requires an Apps Script deployment" } ] }, "fields": { "label": "string (optional). Card heading. Default is \"Drive Storage\".", "accent": "string (optional). Bar colour below 70% usage.", "used_gb": "number (static connector). GB used — for non-GAS surfaces.", "total_gb": "number (static connector). Total quota GB — for non-GAS surfaces.", "auth_token": "string (api connector). OAuth2 bearer token for REST API." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "sheet_form_submit", "description": "Inline form that appends a timestamped row to a Google Sheet on submit. Calls google.script.run.a2uiSheetAppend server-side. Each field renders as a labelled input or textarea.", "compact_description": "inline form that appends a row to a Google Sheet on submit", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "mcp-apps", "note": "renders sample data — live Google Workspace data requires an Apps Script deployment" } ] }, "fields": { "spreadsheet_id": "string. Target Google Sheets ID.", "sheet_name": "string (optional). Sheet tab name. Default is \"Sheet1\".", "title": "string (optional). Form heading.", "fields": "array. Array of {label, name, type, placeholder} objects. type is text, email, number, or textarea.", "submit_label": "string (optional). Submit button text. Default is \"Submit\".", "accent": "string (optional). Submit button colour." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "tasks_today", "description": "Incomplete tasks displayed as an interactive checkbox list. On GAS uses the Tasks API for live data; on other surfaces renders from an items[] array or the Google Tasks REST API.", "compact_description": "task checklist — live via Tasks API on GAS, items[] array on other surfaces", "surfaces": { "works_on": [ "google-apps-script-web", "google-meet-stage", "mcp-apps" ] }, "fields": { "title": "string (optional). Card heading. Default is \"Today's Tasks\".", "max_results": "integer (optional). Maximum tasks to show. Default 10.", "list_name": "string (optional, gas-native). Name of the task list.", "items": "array (static connector). Array of {title, due, completed} for non-GAS surfaces.", "auth_token": "string (api connector). OAuth2 bearer token for REST API." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "cursor_glow", "description": "Ambient radial gradient orb that smoothly lerp-follows the cursor across the page using requestAnimationFrame. Uses CSS mix-blend-mode:screen for a light-leak feel. Page-scoped and double-init guarded.", "compact_description": "ambient glowing orb that lerp-follows the cursor with screen blend", "surfaces": { "works_on": [ "google-apps-script-web", "web", "google-meet-stage", "mcp-apps" ] }, "fields": { "colour": "string (optional). Orb colour. Default", "size": "integer (optional). Orb diameter in px. Default 380.", "opacity": "number (optional). Orb opacity 0–1. Default 0.18.", "speed": "number (optional). Lerp factor 0–1 — lower = more lag. Default 0.1.", "blend": "string (optional). CSS mix-blend-mode. Default screen." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "cursor_trail", "description": "A chain of fading dots that follow the cursor using worm-chain physics — each dot lerps toward the one ahead of it, creating a fluid trailing effect.", "compact_description": "chain of fading dots following the cursor with worm physics", "surfaces": { "works_on": [ "google-apps-script-web", "web", "google-meet-stage", "mcp-apps" ] }, "fields": { "colour": "string (optional). Dot colour. Default", "length": "integer (optional). Number of chain dots. Default 16.", "size": "integer (optional). Lead dot diameter px. Default 10.", "speed": "number (optional). Lerp factor per dot. Default 0.35." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "particle_burst", "description": "On every click anywhere on the page, coloured particles burst outward from the click point with random velocities and simulated gravity, then fade out.", "compact_description": "click anywhere to burst coloured gravity particles from click point", "surfaces": { "works_on": [ "google-apps-script-web", "web", "google-meet-stage", "mcp-apps" ] }, "fields": { "count": "integer (optional). Particles per click. Default 14.", "colours": "array (optional). Array of hex colour strings.", "size": "integer (optional). Particle diameter px. Default 8.", "duration": "integer (optional). Animation duration ms. Default 700.", "gravity": "number (optional). Downward pull factor. Default 1.2." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "spotlight_cursor", "description": "A dark overlay with a soft-edged circular cutout that follows the cursor — torch or spotlight effect. Best used as a standalone page effect or dramatic opening slide.", "compact_description": "dark overlay with cursor-following circular cutout — torch effect", "surfaces": { "works_on": [ "google-apps-script-web", "web", "google-meet-stage", "mcp-apps" ] }, "fields": { "radius": "integer (optional). Spotlight radius px. Default 180.", "darkness": "number (optional). Overlay opacity 0–1. Default 0.82.", "colour": "string (optional). Overlay colour. Default", "soft_edge": "integer (optional). Feather distance px beyond radius. Default 60." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "magnetic_element", "description": "Wraps content that drifts toward the cursor when it enters the activation radius, then springs back with a cubic-bezier overshoot when the cursor leaves.", "compact_description": "content that drifts toward cursor and springs back with overshoot", "surfaces": { "works_on": [ "google-apps-script-web", "web", "google-meet-stage", "mcp-apps" ] }, "fields": { "label": "string (optional). Text label for the default pill style.", "content": "string (optional). Raw HTML to use instead of the default pill.", "accent": "string (optional). Pill background colour. Default", "radius": "integer (optional). Activation distance px. Default 120.", "strength": "number (optional). Pull factor 0–1. Default 0.4." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "tilt_card", "description": "A card that tilts in 3D perspective as the cursor moves across it, with a radial glare highlight that tracks cursor position. Uses CSS preserve-3d and dynamic box-shadow.", "compact_description": "3D perspective tilt card with glare highlight driven by cursor position", "surfaces": { "works_on": [ "google-apps-script-web", "web", "google-meet-stage", "mcp-apps" ] }, "fields": { "content": "string (optional). Inner HTML rendered inside the card.", "title": "string (optional). Card heading rendered above content.", "max_tilt": "number (optional). Maximum rotation degrees. Default 14.", "glare": "boolean (optional). Show glare highlight. Default true.", "accent": "string (optional). Glare colour. Default rgba(255,255,255,0.15).", "padding": "string (optional). Inner padding. Default 28px." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "doc_ai_summary", "description": "Opens a Google Doc by ID, sends its text to Vertex AI Gemini, and renders the response as a structured summary card with word count and a link to the original doc. Requires VERTEX_PROJECT_ID in Script Properties.", "compact_description": "AI-powered Google Doc summary via Vertex AI Gemini", "surfaces": { "works_on": [ "google-apps-script-web" ] }, "fields": { "doc_id": "string. Google Doc ID to summarise.", "prompt": "string (optional). Instruction sent to Gemini before the doc text.", "title": "string (optional). Override card title. Defaults to the doc name.", "model": "string (optional). Gemini model override. Defaults to VERTEX_MODEL property.", "max_chars": "integer (optional). Max doc characters sent to Gemini. Default 12000.", "accent": "string (optional). Accent colour.", "show_meta": "boolean (optional). Show word count and doc link. Default true." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "multi_doc_ai_brief", "description": "Takes an array of Google Doc IDs and renders one Vertex AI Gemini summary card per doc — a compact briefing pack for meetings. Each doc can have its own prompt override.", "compact_description": "multi-doc briefing pack — one Gemini summary card per Google Doc", "surfaces": { "works_on": [ "google-apps-script-web" ] }, "fields": { "docs": "array. Array of {doc_id, title?, prompt?} objects.", "default_prompt": "string (optional). Fallback prompt for docs without their own.", "accent": "string (optional). Accent colour for doc links.", "model": "string (optional). Gemini model override." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "gradient_heading", "description": "Gradient-fill standalone heading using CSS background-clip text. Simpler than dark_hero — just the text, no padding or CTA. Use inside content flow between other atoms.", "compact_description": "gradient-fill standalone heading", "surfaces": { "works_on": [ "google-apps-script-web", "web", "google-meet-stage", "mcp-apps" ] }, "fields": { "text": "string. Heading text.", "gradient": "string (optional). CSS gradient value. Default indigo→violet→pink.", "size": "string (optional). Font-size. Default clamp(1.8rem,4vw,3rem).", "weight": "integer (optional). Font-weight. Default 900.", "align": "string (optional). text-align. Default left.", "margin": "string (optional). CSS margin. Default 16px 0 6px." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "display_quote", "description": "Large typographic quote with a decorative quotation mark at 5rem, quote body in italic, and optional attribution line. Dark-native, great for Meet Stage title slides.", "compact_description": "typographic pull quote with decorative mark and attribution", "surfaces": { "works_on": [ "google-apps-script-web", "web", "google-meet-stage", "mcp-apps" ] }, "fields": { "text": "string. Quote body text.", "attribution": "string (optional). Name or source shown below quote.", "colour": "string (optional). Accent colour for mark and attribution. Default", "size": "string (optional). Font-size for quote text. Default clamp(1.4rem,3vw,2.2rem).", "align": "string (optional). center or left. Default center." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "split_stat", "description": "Two-column layout — a large glowing stat number on the left (with neon text-shadow) and heading + body text on the right. Classic keynote layout, great for Meet Stage.", "compact_description": "two-column stat + text keynote layout with neon glow", "surfaces": { "works_on": [ "google-apps-script-web", "web", "google-meet-stage", "mcp-apps" ] }, "fields": { "value": "string. The stat number or short value.", "prefix": "string (optional). Text before value (e.g. \"$\", \"~\").", "suffix": "string (optional). Text after value (e.g. \"%\", \"k\", \"+\").", "heading": "string (optional). Right-side heading.", "body": "string (optional). Right-side paragraph text.", "colour": "string (optional). Stat glow colour. Default", "flip": "boolean (optional). Put stat on right side. Default false." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "word_reveal", "description": "Words appear one by one with a fade-up animation that auto-plays on page load — no user interaction required. Great for Meet Stage title slides and reveal moments.", "compact_description": "auto-play word-by-word fade-up reveal animation", "surfaces": { "works_on": [ "google-apps-script-web", "web", "google-meet-stage", "mcp-apps" ] }, "fields": { "text": "string. Text to reveal word by word.", "colour": "string (optional). Text colour. Default rgba(255,255,255,0.92).", "gradient": "string (optional). CSS gradient applied to whole line (overrides colour).", "size": "string (optional). Font-size. Default clamp(2rem,5vw,3.5rem).", "weight": "integer (optional). Font-weight. Default 800.", "delay": "number (optional). Seconds between each word. Default 0.12.", "align": "string (optional). text-align. Default center." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "section_label", "description": "Uppercase section marker with a short glowing accent line — use between content sections on dark pages to create visual rhythm.", "compact_description": "uppercase section marker with glowing accent pill", "surfaces": { "works_on": [ "google-apps-script-web", "web", "google-meet-stage", "mcp-apps" ] }, "fields": { "text": "string. Label text (uppercased automatically).", "colour": "string (optional). Accent colour. Default", "margin": "string (optional). Vertical margin. Default 24px 0 12px." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "count_up_stat", "description": "A stat number that counts up from zero to the target value using a cubic ease function on page load. Auto-plays — no user interaction required.", "compact_description": "animated count-up number stat with cubic ease, auto-plays on load", "surfaces": { "works_on": [ "google-apps-script-web", "web", "google-meet-stage", "mcp-apps" ] }, "fields": { "value": "integer. Target number to count to.", "label": "string (optional). Descriptor shown below the number.", "prefix": "string (optional). Text before the number (e.g. \"$\").", "suffix": "string (optional). Text after the number (e.g. \"%\", \"k\").", "colour": "string (optional). Glow colour. Default", "duration": "integer (optional). Count-up duration ms. Default 1800.", "size": "string (optional). Font-size. Default 4rem." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "text_highlight", "description": "Inline prose sentence where specific words are highlighted in an accent colour. Mark words with **double asterisks** in the text field — highlighted words are wrapped in a styled span.", "compact_description": "prose sentence with **marked** words highlighted in accent colour", "surfaces": { "works_on": [ "google-apps-script-web", "web", "google-meet-stage", "mcp-apps" ] }, "fields": { "text": "string. Body text with **highlighted** words wrapped in double asterisks.", "size": "string (optional). Font-size. Default 1.2rem.", "colour": "string (optional). Highlight colour. Default", "weight": "integer (optional). Base font weight. Default 600.", "align": "string (optional). text-align. Default left." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "reveal_line", "description": "A single line of text that sweeps in from left using a clip-path animation — dramatic and instant. Auto-plays on load, no click required. Great for Meet Stage opening slides.", "compact_description": "clip-path sweep-in reveal line, auto-plays on load", "surfaces": { "works_on": [ "google-apps-script-web", "web", "google-meet-stage", "mcp-apps" ] }, "fields": { "text": "string. Text content.", "gradient": "string (optional). CSS gradient applied to text. Default indigo→pink.", "size": "string (optional). Font-size. Default clamp(2.5rem,6vw,4rem).", "weight": "integer (optional). Font-weight. Default 900.", "duration": "integer (optional). Animation duration ms. Default 800.", "delay": "integer (optional). Start delay ms. Default 200." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "canvas_plexus", "description": "Full-viewport animated particle network — dots connected by proximity lines that fade with distance. Mouse/pointer repulses particles. Zero external dependencies, pure requestAnimationFrame loop.", "compact_description": "animated particle plexus with proximity lines and mouse repulsion", "surfaces": { "works_on": [ "google-apps-script-web", "web", "google-meet-stage", "mcp-apps" ] }, "fields": { "count": "integer (optional). Number of particles. Default 65.", "colour": "string (optional). Hex colour for particles and lines. Default", "speed": "number (optional). Particle speed multiplier. Default 1.0.", "max_dist": "integer (optional). Max distance px for edge connections. Default 120.", "bg": "string (optional). Background colour. Default", "height": "integer (optional). Canvas height px. Default 400.", "repulse_radius": "integer (optional). Mouse repulsion radius px. Default 90." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "spring_nodes", "description": "Interactive mass-spring physics simulation — nodes repel each other (Coulomb) and are held by Hooke springs on defined edges. Click and drag to pin and move nodes. Settles naturally from a stacked initial position.", "compact_description": "interactive mass-spring physics graph with drag-to-pin nodes", "surfaces": { "works_on": [ "google-apps-script-web", "web", "google-meet-stage", "mcp-apps" ] }, "fields": { "nodes": "array (optional). Array of {id, label} objects. Defaults to 6 labelled nodes.", "edges": "array (optional). Array of {a, b} index pairs for spring connections.", "colour": "string (optional). Node and edge accent colour. Default", "bg": "string (optional). Background colour. Default", "height": "integer (optional). Canvas height px. Default 420.", "rest_length": "integer (optional). Spring rest length px. Default 110." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "isometric_mesh", "description": "Rotating 3D isometric height-field mesh. Default surface is a 16×16 Gaussian hill pre-computed server-side. Drag to rotate manually; auto-rotates until first touch. Height colour interpolates from deep indigo (low) to bright violet (high).", "compact_description": "rotating 3D isometric mesh with height-colour mapping and drag-rotate", "surfaces": { "works_on": [ "google-apps-script-web", "web", "google-meet-stage", "mcp-apps" ] }, "fields": { "grid": "integer (optional). Grid dimension N (N×N). Default 16.", "height_scale": "number (optional). Vertical exaggeration multiplier. Default 1.0.", "colour_low": "string (optional). Hex colour at minimum height. Default", "colour_high": "string (optional). Hex colour at maximum height. Default", "bg": "string (optional). Background colour. Default", "height": "integer (optional). Canvas height px. Default 460.", "auto_rotate": "boolean (optional). Auto-rotate until user drags. Default true." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "geo_iso_takeoff", "description": "Full-viewport isometric 3D canvas animation of an A321neo (or other narrowbody) departing from Toulouse Blagnac (LFBO). Shows rolling takeoff run, rotation, gear retraction, and climb-out against a night-sky grid. HUD overlay shows airline code, aircraft type, and runway. Accent colour auto-selected from airline ICAO (AIB=Airbus blue, EZY=orange, AFR=Air France blue, BAW=British Airways red, DLH=Lufthansa navy, RYR=Ryanair blue). Includes a LIVE RADAR button that opens the airspace_command_deck for LFBO.", "compact_description": "isometric 3D canvas of A321neo takeoff from LFBO — animated roll, rotation, gear-up, climb; HUD with airline/runway", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "title": "string (optional). HUD title line. Default \"LFBO RWY 32L — A321neo DEPARTURE\".", "airline": "string (optional). ICAO airline code for accent colour — AIB, EZY, AFR, BAW, DLH, RYR. Default AIB.", "aircraft_type": "string (optional). ICAO aircraft type code — A21N (A321neo), A320, B738. Default A21N." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "geo_iso_rocket_launch", "description": "Full-viewport isometric 3D canvas animation of an Ariane 6 rocket launch from Kourou ELA-4. Shows pad, ignition, liftoff, and ascent trajectory. HUD overlay with mission data.", "compact_description": "isometric 3D canvas of Ariane 6 rocket launch from Kourou — animated liftoff and ascent; mission HUD", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "title": "string (optional). HUD title. Default \"KOUROU ELA-4 — HEAVY LIFT INJECTION PROFILE\".", "vehicle": "string (optional). ARIANE_6 or ARIANE_5. Default ARIANE_6." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "geo_iso_heli_hover", "description": "Full-viewport isometric 3D canvas animation of an H160 helicopter hovering over a helipad. Rotor blur, downwash ripple, and HUD overlay with livery accent colour.", "compact_description": "isometric 3D canvas of H160 helicopter hover — rotor animation, downwash, HUD", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "title": "string (optional). HUD title. Default \"LFBO HELIPAD 2 — AIRBUS H160 HOVER PROFILE\".", "livery": "string (optional). ICAO airline code for accent colour — AIB, EZY, AFR, etc. Default AIB." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "geo_iso_fleet", "description": "Full-viewport tabbed showcase of all three isometric aviation animations — A321neo takeoff, Ariane 6 launch, and H160 hover — in a single atom with tab switcher. Use this for a full aviation/aerospace demo page. tab field sets which scene opens by default.", "compact_description": "tabbed isometric fleet demo — A321neo takeoff + Ariane 6 launch + H160 hover with tab switcher", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "airline": "string (optional). Airline ICAO for A321neo accent — AIB, EZY, AFR, BAW, DLH, RYR. Default AIB.", "rocket": "string (optional). ESA or CNES. Default ESA.", "livery": "string (optional). Airline ICAO for H160 livery. Default AIB.", "tab": "string (optional). Starting tab — \"ac\" (A321neo), \"rk\" (Ariane 6), \"hh\" (H160). Default ac." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "airspace_command_deck", "description": "Full-viewport Toulouse TMA airspace radar display — canvas radar with animated simulated flights, rotating sweep, VOR beacons, and approach paths. HTML/CSS overlay for crisp chyron title, weather panel, flight list HUD, and scrolling ticker. Driven by the toulouse_airspace.yaml playbook via the ?slide= URL parameter. For the Toulouse demo, prefer routing through Code.js _renderAirspaceSlide() which handles live METAR interpolation.", "compact_description": "Toulouse TMA radar canvas with animated flights, HUD overlay, and live METAR ticker", "surfaces": { "works_on": [ "google-apps-script-web", "google-meet-stage", "mcp-apps" ] }, "fields": { "chyron_title": "string (optional). Top-left headline overlay.", "chyron_subtitle": "string (optional). Top-left subtitle — supports interpolated METAR tags.", "ticker_text": "string (optional). Scrolling bottom bar text.", "ticker_speed": "integer (optional). Ticker scroll speed px/s. Default 45.", "panel_type": "string (optional). supervisor | target | (empty). Controls HUD flight list panel.", "panel_title": "string (optional). HUD panel heading.", "lockedCallsign": "string (optional). Highlight and add targeting reticle to this callsign.", "zoom": "integer (optional). TMA radius shown in nm. Default 35.", "height": "integer (optional). Canvas height px. Default 520.", "show_slate": "boolean (optional). Render calibration boot slate instead of radar.", "slate_title": "string (optional). Slate heading.", "slate_description": "string (optional). Slate body text.", "poll_question": "string (optional). If set, renders a vote overlay with bar chart.", "poll_options": "array (optional). Array of option strings for the poll.", "poll_values": "array (optional). Array of integer vote counts for each option." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "data_source", "description": "Generic HTTP GET data feed. Fetches on server-side render (GAS surface via UrlFetchApp) then refreshes client-side via google.script.run.fetchDataSource(). Publishes to window.A2UI_DATA[name] and calls window.A2UI_CALLBACKS[name]. Other surfaces would use fetch() or requests instead.", "compact_description": "generic HTTP feed — server-side initial fetch, client-side refresh via surface transport", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "name": "string. Feed identifier — other atoms subscribe to this name (required).", "url": "string. HTTP GET endpoint.", "format": "string (optional). json | text. Default json.", "path": "string (optional). Dot-notation path into parsed response (e.g. data.items).", "refresh": "integer (optional). Client refresh interval seconds. 0 = initial load only. Default 0.", "cache": "integer (optional). Server-side CacheService TTL seconds. Default 15." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "adsb_feed", "description": "OpenSky Network ADS-B live traffic feed for a geographic bounding box. Fetches server-side on render (cached), refreshes client-side every refresh seconds. Publishes normalised flight objects {callsign, lat, lon, alt_ft, spd_kt, hdg, on_ground, squawk} to the named feed. Unauthenticated OpenSky limit is 400 req/day — keep cache TTL >= 15s.", "compact_description": "OpenSky Network ADS-B live flight positions for a bounding box", "surfaces": { "works_on": [ "google-apps-script-web" ] }, "fields": { "name": "string (optional). Feed name other atoms subscribe to. Default adsb.", "lat_min": "number (optional). Bounding box south edge degrees. Default 43.1 (LFBO TMA).", "lat_max": "number (optional). Bounding box north edge degrees. Default 44.2.", "lon_min": "number (optional). Bounding box west edge degrees. Default 0.7.", "lon_max": "number (optional). Bounding box east edge degrees. Default 2.0.", "refresh": "integer (optional). Client refresh interval seconds. Default 15.", "filter_ground": "boolean (optional). Exclude on-ground traffic. Default true.", "cache": "integer (optional). Server-side cache TTL seconds. Default 15." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "metar_feed", "description": "METAR weather for an ICAO station via aviationweather.gov. Fetches server-side on render (cached), refreshes client-side every refresh seconds. Publishes {wind, temp, qnh, raw} to the named feed. Visual atoms bind to it by name and receive updates without a page reload.", "compact_description": "live METAR weather feed — parsed wind, temp, QNH for an ICAO station", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ], "degraded_on": [ { "surface": "mcp-apps", "note": "live data flows via the declared data proxy (atoms/data-sources.yaml); until the proxy answers, the feed stays silent" } ] }, "fields": { "name": "string (optional). Feed name other atoms subscribe to. Default metar.", "station": "string (optional). ICAO station code. Default LFBO.", "refresh": "integer (optional). Client refresh interval seconds. Default 60.", "cache": "integer (optional). Server-side cache TTL seconds. Default 30." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "firestore_read", "description": "Data connector: reads a single Firestore document (noun: document at project/collection/doc_id) on server-side render (verb: read) and publishes the deserialized result to window.A2UI_DATA[name]. Visual atoms subscribe via window.A2UI_CALLBACKS[name] — the named connector wires data to presentation without direct coupling. GAS surface fetches via Firestore REST API using ScriptApp.getOAuthToken(); requires the datastore OAuth scope in appsscript.json. Optional client-side refresh calls google.script.run.fetchFirestoreDoc() so the page stays live without a reload. Data shape is surface-agnostic — any visual atom can bind to the named feed.", "compact_description": "Firestore document read — publishes deserialized doc to named data connector; visual atoms subscribe by name", "surfaces": { "works_on": [ "google-apps-script-web" ] }, "fields": { "name": "string. Connector name — visual atoms subscribe via window.A2UI_CALLBACKS[name] (required).", "project": "string. GCP project ID that owns the Firestore database (required).", "collection": "string. Firestore collection name (required).", "doc_id": "string. Document ID within the collection (required).", "refresh": "integer (optional). Client-side refresh interval seconds. 0 = initial load only. Default 0." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "paragraph", "description": "Prose paragraph block (alias for body, google-apps-script-web only)", "compact_description": "prose paragraph (GAS alias for body)", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ] }, "fields": { "text": "string" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "text_block", "description": "Plain text block rendered as a paragraph", "compact_description": "plain text block", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ] }, "fields": { "text": "string" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "blockquote", "description": "Styled pull-quote with optional attribution line", "compact_description": "styled pull-quote with attribution", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ] }, "fields": { "text": "string", "attribution": "string (optional)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "spacer", "description": "Vertical whitespace gap between atoms", "compact_description": "vertical whitespace gap", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ] }, "fields": { "height": "string or number (optional, CSS height e.g. 24 or \"2rem\")" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "tag_chip", "description": "Small inline tag/label chip", "compact_description": "inline tag chip", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ] }, "fields": { "text": "string", "color": "string (optional, hex colour)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "badge", "description": "Inline badge pill with accent colour", "compact_description": "inline badge pill", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ] }, "fields": { "text": "string", "color": "string (optional, hex colour)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "inline_code", "description": "Monospace inline code span", "compact_description": "monospace inline code span", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ] }, "fields": { "text": "string" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "code_block", "description": "Syntax-highlighted code block", "compact_description": "syntax-highlighted code block", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ] }, "fields": { "language": "string (optional, e.g. python, js, yaml)", "content": "string" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "link_button", "description": "Text hyperlink styled as a button", "compact_description": "text hyperlink button", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ] }, "fields": { "url": "string", "label": "string" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "cta_button", "description": "Full-width call-to-action button linking to a URL", "compact_description": "call-to-action button", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ] }, "fields": { "url": "string", "label": "string", "color": "string (optional, hex)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "nav_link", "description": "Single CTA button or link that navigates to a named A2UI page. Automatically appends &from= so the destination page's back button returns here. Style variants — primary (filled indigo), ghost (border), or text (minimal).", "compact_description": "single CTA link to a named page — appends from= automatically for back-button support", "surfaces": { "works_on": [ "google-apps-script-web", "web", "google-meet-stage", "mcp-apps" ] }, "fields": { "nav_slug": "string (required). Slug of the destination named page.", "label": "string (optional). Button label. Default \"Continue →\".", "icon": "string (optional). Emoji or icon prefix.", "style": "string (optional). \"primary\" (default), \"ghost\", or \"text\".", "align": "string (optional). \"left\" (default), \"center\", or \"right\"." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "info_card", "description": "Simple card with title and body text", "compact_description": "simple info card with title and body", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ] }, "fields": { "title": "string", "text": "string" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "ai_build_trace", "description": "Token usage and model trace card — shows Gemini call stats inline on a page", "compact_description": "Gemini token usage trace card", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "model": "string (optional, e.g. gemini-2.5-flash)", "prompt_tokens": "integer (optional)", "thinking_tokens": "integer (optional)", "output_tokens": "integer (optional)", "total_tokens": "integer (optional)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "gemini_prompt", "description": "Inline Gemini prompt input that calls the GAS callGemini() function from within a rendered page", "compact_description": "inline Gemini prompt input widget", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "label": "string (optional)", "placeholder": "string (optional)", "accent": "string (optional, hex colour)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "dark_hero", "description": "Full-width dark hero banner with gradient background, badge, headline, and CTA button", "compact_description": "dark hero banner with gradient and CTA", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ] }, "fields": { "heading": "string", "subtext": "string (optional)", "badge": "string (optional, small label above heading)", "gradient": "string (optional, CSS gradient e.g. linear-gradient(135deg,#1e1b4b,#312e81))", "cta_label": "string (optional)", "cta_url": "string (optional)", "align": "string (optional, left|center)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "glowing_stat", "description": "Single large stat with neon glow effect on dark background", "compact_description": "neon-glow stat number on dark card", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ] }, "fields": { "value": "string or number", "label": "string (optional)", "colour": "string (optional, hex, default #22d3ee)", "size": "string (optional, CSS font-size)", "prefix": "string (optional)", "suffix": "string (optional)", "glow": "boolean (optional)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "glass_card", "description": "Frosted-glass card with backdrop-filter blur. Use for dark-theme highlight boxes, callouts, or content wrappers. Content is raw HTML string.", "compact_description": "frosted-glass card with blur backdrop — dark-theme highlight box", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ] }, "fields": { "title": "string (optional). Card heading text.", "content": "string (optional). Inner HTML content of the card.", "blur": "integer (optional). Backdrop blur in px. Default 18.", "bg": "string (optional). Background colour (rgba). Default rgba(255,255,255,0.05).", "border": "string (optional). Border colour (rgba). Default rgba(255,255,255,0.1).", "padding": "string (optional). CSS padding. Default 28px.", "radius": "string (optional). Border radius. Default 16px." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "gradient_border_card", "description": "Card with an animated gradient border stroke on dark background", "compact_description": "animated gradient border card", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ] }, "fields": { "title": "string (optional)", "content": "string (optional)", "colours": "array of hex strings (optional, gradient stops)", "bg": "string (optional, card background)", "angle": "number (optional, gradient angle degrees)", "padding": "string (optional)", "radius": "string (optional)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "floating_orbs", "description": "Decorative blurred colour orbs that float in a dark background area", "compact_description": "decorative blurred colour orbs background", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "orbs": "array of {colour, size, x, y} (optional)", "blur": "number (optional, blur px)", "opacity": "number (optional, 0–1)", "animate": "boolean (optional)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "neon_text", "description": "Neon-coloured glowing text, ideal for dark technical pages", "compact_description": "neon-glow coloured text", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "text": "string", "colour": "string (optional, hex, default #22d3ee)", "size": "string (optional, CSS font-size)", "weight": "string or number (optional)", "align": "string (optional, left|center|right)", "flicker": "boolean (optional)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "dark_feature_grid", "description": "Responsive feature grid on dark background — icon, title, description per cell", "compact_description": "dark-theme feature grid with icons", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ] }, "fields": { "features": "array of {icon, title, description, colour}", "columns": "integer (optional, default 3)", "accent": "string (optional, hex)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "dark_divider", "description": "Thin horizontal rule for dark theme pages", "compact_description": "dark-theme horizontal divider", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ] }, "fields": { "colour": "string (optional, hex)", "margin": "string (optional, CSS margin)", "height": "string (optional, CSS height)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "ambient_gradient", "description": "Full-screen animated aurora background — alias for aurora_background", "compact_description": "animated aurora/ambient gradient background", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "title": "string (optional)", "text": "string (optional)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "depth_stack", "description": "Stacked layered cards with parallax depth — alias for card_stack", "compact_description": "stacked cards with depth parallax", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ] }, "fields": { "cards": "array of {title, text} (alias: items)", "count": "integer (optional, max cards to show)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "scramble_reveal", "description": "Text that decrypts/un-scrambles character-by-character on scroll — alias for encrypted_reveal", "compact_description": "character-scramble text reveal on scroll", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "text": "string (alias: content, label)", "title": "string (optional)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "scroll_trigger", "description": "Content that animates in from a direction when scrolled into view — alias for reveal_on_scroll", "compact_description": "scroll-triggered animated reveal", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ] }, "fields": { "text": "string (alias: content)", "title": "string (optional)", "delay": "number (optional, seconds)", "direction": "string (optional, up|down|left|right)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "flow_connector", "description": "Animated dashed beam connecting two labelled nodes — alias for animated_beam. Two shapes — a single from/to/label pair (original), or a multi-node nodes/connectors chain (added 2026-07-24, e.g. an identity/ permission chain of more than 2 hops) where each node can be a bare string (simple pill) or a {role, name, detail} object (richer boxed card).", "compact_description": "animated beam connector between two or more nodes", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ] }, "fields": { "from": "string or {role, name, detail} object (ignored if nodes is set)", "to": "string or {role, name, detail} object (ignored if nodes is set)", "label": "string (optional, ignored if nodes is set)", "nodes": "array (optional). Array of string or {role, name, detail} — 2+ nodes in a single chain, rendered left to right.", "connectors": "array of string (optional). Labels between each consecutive pair in `nodes` — length should be len(nodes)-1.", "color": "string (optional, hex)", "theme": "string (optional, \"light\"|\"dark\", default \"light\")" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "live_metric", "description": "Animated counter that counts up from start to a target value — alias for animated_counter", "compact_description": "animated counting number (alias for animated_counter)", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "value": "number (alias: end)", "start": "number (optional)", "duration": "number (optional, seconds)", "prefix": "string (optional)", "suffix": "string (optional)", "label": "string (optional)", "decimals": "integer (optional)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "deadline_ticker", "description": "Countdown timer showing days/hours/minutes/seconds to a target date — alias for countdown_timer", "compact_description": "countdown timer to a target date (alias)", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "target_date": "string (ISO date, alias: target)", "label": "string (optional, alias: title)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "pattern_background", "description": "Dot-grid repeating pattern background — alias for dot_grid_background", "compact_description": "dot-grid pattern background (alias)", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ] }, "fields": { "color": "string (optional, dot colour hex)", "bg": "string (optional, background colour)", "size": "number (optional, dot spacing px)", "title": "string (optional)", "text": "string (optional)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "glitch_text", "description": "Cyan glitch-effect headline — periodic RGB-split animation", "compact_description": "RGB-split glitch-effect headline", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "text": "string (alias: title, label)", "size": "string (optional, CSS font-size, default 2rem)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "neon_glow", "description": "Pulsing neon-glow text on a near-black background", "compact_description": "pulsing neon-glow text on dark card", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "text": "string (alias: title, label)", "color": "string (optional, hex, default #22d3ee)", "size": "string (optional, CSS font-size)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "magnetic_button", "description": "Button that follows the cursor magnetically on hover", "compact_description": "magnetic cursor-following button", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "text": "string (alias: label, title)", "color": "string (optional, hex background)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "confetti_trigger", "description": "Button that triggers confetti explosion when clicked", "compact_description": "click-to-trigger confetti button", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "label": "string (message shown after click, alias: text)", "trigger": "string (button label, alias: button)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "floating_particles", "description": "Floating particle field background (canvas fallback placeholder)", "compact_description": "floating particles background (canvas placeholder)", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ] }, "fields": { "title": "string (optional, alias: label, text)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "parallax_section", "description": "Parallax scroll section (canvas fallback placeholder)", "compact_description": "parallax scroll section (canvas placeholder)", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ] }, "fields": { "title": "string (optional, alias: label, text)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "scroll_progress", "description": "Thin fixed progress bar at the top of the viewport showing scroll position", "compact_description": "fixed scroll-progress bar at page top", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "color": "string (optional, hex, default #6366f1)", "height": "number (optional, px, default 3)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "live_clock", "description": "Live ticking clock on a dark card, updates every second", "compact_description": "live ticking clock widget", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "label": "string (optional, alias: title)", "format": "string (optional, 12h|24h, default 24h)", "timezone": "string (optional, IANA tz label for display only)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "decision_tree", "description": "Interactive collapsible decision tree with nested branches", "compact_description": "interactive collapsible decision tree", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ] }, "fields": { "nodes": "array of {text, children: [{text, children}]} — nested tree nodes", "title": "string (optional)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "step_reveal_sequence", "description": "Tab-style step-by-step content with radio-button navigation", "compact_description": "tabbed step-by-step sequence", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "steps": "array of {title, text} — each step shown in its own tab panel" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "chat_sequence", "description": "Animated conversation thread with user/assistant bubbles", "compact_description": "animated chat conversation thread", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "messages": "array of {role (user|assistant), name (optional), text}" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "tooltip_glossary", "description": "Glossary list where hovering a term shows its definition as a tooltip", "compact_description": "glossary with hover tooltips", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ] }, "fields": { "terms": "array of {term, definition}", "text": "string (optional, introductory prose, alias: intro)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "focus_lens", "description": "Blurred background with a clear focused panel in the centre — spotlight effect", "compact_description": "spotlight focus lens on blurred background", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ] }, "fields": { "title": "string (optional)", "text": "string (optional, alias: content)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "terminal_boot", "description": "Dark terminal window that types out boot/log lines one by one", "compact_description": "animated terminal boot sequence", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "lines": "array of strings — lines typed out in sequence", "title": "string (optional, shown as terminal header)", "speed": "number (optional, ms between lines, default 380)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "stagger_list", "description": "List of items that animate in with a staggered delay — supports icons and descriptions", "compact_description": "stagger-animated list of items", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "items": "array of strings or {icon, text, sub} objects", "direction": "string (optional, up|down|left|right)", "stagger": "number (optional, delay between items in seconds, default 0.1)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "liquid_button", "description": "Button that morphs between circular and rounded-rectangle on hover", "compact_description": "liquid morphing hover button", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ] }, "fields": { "text": "string (alias: label, title)", "color": "string (optional, hex background)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "highlight_sweep", "description": "Text with an animated highlight sweep underline that plays on load", "compact_description": "animated highlight sweep text", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "text": "string (alias: content)", "color": "string (optional, highlight colour hex, default #fef08a yellow)", "delay": "number (optional, seconds before sweep starts)", "size": "string (optional, CSS font-size)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "progress_reveal", "description": "Animated progress bar that counts from 0 to a value when scrolled into view", "compact_description": "scroll-triggered animated progress bar", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "value": "number (0–100, alias: percent)", "label": "string (optional, alias: title)", "color": "string (optional, hex)", "suffix": "string (optional, default %)", "height": "number (optional, bar height px)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "big_reveal", "description": "Large centred number or word that pops in with a spring scale animation", "compact_description": "spring-animation big number or word reveal", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "text": "string (the big value, alias: value, label)", "sub": "string (optional subtitle below, alias: subtitle)", "color": "string (optional, hex)", "size": "string (optional, CSS font-size, default 5rem)", "delay": "number (optional, seconds)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "kinetic_headline", "description": "Headline where each word flies in with a staggered animation", "compact_description": "word-by-word kinetic headline animation", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "text": "string (alias: title)", "size": "string (optional, CSS font-size)", "color": "string (optional, hex)", "stagger": "number (optional, seconds between words)", "style": "string (optional, up|down|scale|fade)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "text_reveal_mask", "description": "Headline that sweeps in from left using clip-path mask animation", "compact_description": "clip-path text reveal mask animation", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "text": "string (alias: title)", "size": "string (optional, CSS font-size)", "color": "string (optional, hex)", "delay": "number (optional, seconds)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "split_reveal", "description": "Content hidden behind two coloured panels that slide apart to reveal it", "compact_description": "split-panel reveal animation", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "title": "string (optional)", "text": "string (optional, alias: content)", "color": "string (optional, panel colour hex)", "delay": "number (optional, seconds)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "mesh_gradient", "description": "Dark card with radial mesh/blob gradient background — vivid multi-colour", "compact_description": "dark card with radial mesh gradient background", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ] }, "fields": { "title": "string (optional)", "text": "string (optional, alias: content)", "bg": "string (optional, base background colour)", "colors": "array of hex strings (optional, gradient blob colours)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "stripe_background", "description": "Card with animated diagonal stripe background pattern", "compact_description": "animated diagonal stripe background card", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "title": "string (optional)", "text": "string (optional, alias: content)", "color1": "string (optional, hex, first stripe colour)", "color2": "string (optional, hex, second stripe colour)", "speed": "number (optional, animation seconds)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "status_timeline", "description": "Vertical timeline with status dots (done/active/pending/error/warning)", "compact_description": "status-dot vertical timeline", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "events": "array of {title, date (optional), text (optional), status (done|active|pending|error|warning)}", "title": "string (optional)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "counter_group", "description": "Row of animated counting stats separated by dividers", "compact_description": "row of animated stat counters", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "stats": "array of {value, label, color (optional), prefix (optional), suffix (optional), decimals (optional)} (alias: items)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "orbit_diagram", "description": "Animated orbiting node diagram — central node with satellite labels on a dashed orbit ring", "compact_description": "animated orbit diagram with satellite nodes", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "center": "string (label for the central node)", "nodes": "array of strings or {label, color} objects", "color": "string (optional, hex accent)", "speed": "number (optional, animation speed)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "noise_card", "description": "Dark card with subtle SVG film-grain noise texture overlay", "compact_description": "dark card with film-grain noise texture", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ] }, "fields": { "title": "string (optional)", "text": "string (optional, alias: content)", "bg": "string (optional, background colour)", "color": "string (optional, text colour)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "comparison_morph", "description": "Draggable before/after slider revealing two text panels side by side", "compact_description": "draggable before/after comparison slider", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ] }, "fields": { "before": "{label (optional), text}", "after": "{label (optional), text}", "title": "string (optional)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "word_cloud", "description": "Interactive word cloud — static words or live Google Sheets feed with submit input", "compact_description": "interactive word cloud with optional live Sheet feed", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "words": "array of {text, weight} (optional static words)", "palette": "array of hex strings (optional, word colours)", "placeholder": "string (optional, input placeholder)", "accent": "string (optional, hex accent for input bar)", "sheet_url": "string (optional, Google Sheet CSV URL for live words)", "write_url": "string (optional, GAS doGet URL to write submissions)", "poll": "number (optional, poll interval seconds)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "quiz_set", "description": "Multi-question quiz with multiple-choice options, per-question explanations, pass score, and result screen", "compact_description": "multi-question interactive quiz", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "title": "string (optional)", "questions": "array of {question, options: [string], correct: integer (0-based index), explanation (optional)}", "pass_score": "integer (optional, % to pass, default 70)", "accent": "string (optional, hex)", "on_pass": "object (optional, atom block shown on pass)", "on_fail": "object (optional, atom block shown on fail)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "globe_3d", "description": "Spinning interactive 3-D wireframe or earth globe rendered on HTML5 canvas — draggable with inertia", "compact_description": "interactive spinning 3-D globe (wire or earth)", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "size": "number (optional, diameter px, default 300)", "color": "string (optional, hex accent, default #6366f1)", "speed": "number (optional, auto-spin speed, default 0.006)", "lines": "number (optional, latitude line count, default 10)", "theme": "string (optional, wire|earth, default wire)", "dots": "array of {lat, lon, label (optional), color (optional)} (optional, pins on globe)", "arcs": "array of {from: [lat,lon], to: [lat,lon], color (optional)} (optional, great-circle arcs)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "geo_mercator_radar", "description": "Interactive Mercator projection map with draggable pan, node pins, and animated link vectors — dark radar aesthetic", "compact_description": "dark-theme interactive Mercator map with node pins and links", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "title": "string (optional)", "color": "string (optional, hex accent, default #00f2ff)", "height": "number (optional, px, default 450)", "nodes": "array of {id, name, lat, lon, value (optional)}", "links": "array of {from: id, to: id} (optional)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "geo_contour_waves", "description": "Animated isobaric atmospheric contour wave field — fluid procedural sine/cosine curves on dark background", "compact_description": "animated atmospheric contour wave field", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "title": "string (optional)", "color": "string (optional, hex, default #a78bfa)", "intensity": "number (optional, wave band count, default 4, max 8)", "height": "number (optional, px, default 350)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "multi_surface", "description": "One data pool rendered simultaneously across three surface engines: spatial map (desktop), phone frame card list (mobile), circular focus face (IoT/watch)", "compact_description": "three-engine multi-surface demo atom", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "title": "string (optional)", "nodes": "array of {id, type, label, temp (optional), value (optional), intensity (0–100, optional), coords: {x, y}}" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "geo_europe_airspace", "description": "Interactive SVG European airspace map — country outlines, airport pins, simulated flight tracks, click-to-open TMA playbook", "compact_description": "interactive European airspace map with airports and flights", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "title": "string (optional)", "focus": "string (optional, country name to highlight, alias: country)", "sim_flights": "array of {callsign, from: [lat,lon], to: [lat,lon]} (optional simulated flight tracks)", "airports": "boolean (optional, show airport pins, default true)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "feed_status", "description": "Live-feed status pill — shows LIVE (n) or SIM based on data published to a named feed", "compact_description": "live/sim status pill for a named data feed", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "name": "string (feed name to subscribe to)", "label": "string (optional, text prefix in pill)", "size": "string (optional, CSS font-size, default 0.6rem)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "playbook", "description": "Full-screen multi-slide presentation deck — each slide is its own atom block array, with shared data feeds and slide navigation", "compact_description": "multi-slide fullscreen presentation playbook", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "slides": "array of {id (optional), blocks: [atom block objects]} — each slide is a full block list", "shared_blocks": "array of atom block objects with role:data_source (optional). Rendered once before slides. Use for adsb_feed, metar_feed, firestore_read etc. — atoms that publish to window.A2UI_CALLBACKS[name] and have no visual output. Visual atoms in slides bind by name via data_source / weather_source / connector fields.", "transition": "string (optional, fade|slide, default fade)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "surface_unlocked", "description": "Game-style \"NEW SURFACE UNLOCKED\" achievement notification card", "compact_description": "achievement-style surface unlocked notification", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "icon": "string (optional, emoji, default ⚡)", "surface": "string (surface/feature name displayed large)", "sub": "string (optional, subtitle, default NEW SURFACE UNLOCKED)", "accent": "string (optional, hex)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "schema_reveal", "description": "Decodes the current page ?p= URL and displays the JSON schema that built this page", "compact_description": "self-reveal: shows this page's own JSON schema", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "title": "string (optional)", "accent": "string (optional, hex)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "url_anatomy", "description": "Visually annotates the current renderer URL, highlighting the GAS endpoint, ?p= parameter, and encoded payload", "compact_description": "annotated URL anatomy diagram", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ] }, "fields": { "accent": "string (optional, hex)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "schema_qr", "description": "Self-contained QR code for a given URL (or the current page URL on JS-capable surfaces) — computed via the vendored QR-Code-generator library (Project Nayuki, MIT) and rendered as inline SVG, zero network calls. Optionally interactive — set is_interactive to add a text input that live-regenerates the QR client-side as the visitor types.", "compact_description": "self-contained QR code, optionally with a live URL input", "surfaces": { "works_on": [ "web", "google-meet-stage", "email", "pdf", "google-apps-script-web", "google-apps-script-side-panel", "mcp-apps" ], "degraded_on": [ { "surface": "email", "note": "Renders the static QR only — live URL entry needs a JS-capable surface." }, { "surface": "pdf", "note": "Renders the static QR only — live URL entry needs a JS-capable surface." }, { "surface": "google-meet-stage", "note": "Renders the static QR only — live URL entry needs a JS-capable surface." }, { "surface": "google-apps-script-side-panel", "note": "Renders the static QR only — live URL entry needs a JS-capable surface." } ], "incompatible_on": [ { "surface": "google-chat", "reason": "cardsV2 has no inline SVG or Canvas support (only a fetch-by-URL image widget) — a self-contained, zero-network QR can't be expressed as a card. See `sparkline` for the same constraint." } ] }, "fields": { "url": "string (optional, fixed URL — defaults to the current page URL on JS-capable surfaces; static surfaces render nothing if omitted)", "label": "string (optional)", "sub": "string (optional, sub-label below QR)", "size": "number (optional, px, default 220)", "is_interactive": "boolean (optional, default false). Adds a text input that live-regenerates the QR client-side. Only meaningful on web, google-apps-script-web, and mcp-apps — see degraded_on." }, "source": { "name": "QR-Code-generator (Project Nayuki)", "url": "https://www.nayuki.io/page/qr-code-generator-library", "license": "MIT" } }, { "type": "take_away_card", "description": "Bold single-insight pull-quote card designed to be screenshotted", "compact_description": "bold screenshot-ready insight card", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ] }, "fields": { "headline": "string (alias: text, quote, insight)", "sub": "string (optional, attribution/source, alias: author, source)", "accent": "string (optional, hex)", "size": "string (optional, CSS font-size)", "gradient": "array of 2 hex strings (optional, background gradient colours)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "next_step_strip", "description": "Horizontal strip of numbered next steps with optional links", "compact_description": "horizontal numbered next-steps strip", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ] }, "fields": { "steps": "array of {number (optional), label, detail (optional, alias: action), url (optional)}", "accent": "string (optional, hex)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "copy_prompt", "description": "Monospace copyable text block — ideal for sharing Gemini prompts or code", "compact_description": "copyable monospace prompt/code block", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "prompt": "string (text to display and copy, alias: text, content)", "label": "string (optional, header label)", "accent": "string (optional, hex)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "atom_anatomy", "description": "Side-by-side panel showing a rendered atom alongside its raw JSON schema", "compact_description": "rendered atom + raw schema side-by-side anatomy view", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ] }, "fields": { "label": "string (optional, panel header)", "schema": "object (atom block JSON to render and display)", "accent": "string (optional, hex)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "renderer_stats", "description": "Simple stat grid showing custom key/value pairs — used to show renderer capabilities", "compact_description": "stat grid for renderer capability metrics", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ] }, "fields": { "stats": "array of {value, label}", "sub": "string (optional, footer note)", "accent": "string (optional, hex)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "prompt_to_schema", "description": "Three-panel flow diagram: natural language prompt → generated JSON schema → rendered page", "compact_description": "three-panel prompt → schema → output flow", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ] }, "fields": { "prompt": "string (the input prompt text)", "schema": "object or string (the generated JSON schema)", "output": "string (description of the rendered output)", "labels": "array of 3 strings (optional, panel headers)", "accent": "string (optional, hex)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "before_after_stack", "description": "Animated comparison: old approach items cross out one by one, then new approach slides in", "compact_description": "old-vs-new stack comparison animation", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "items": "array of strings (old approach items to cross out, alias: before_items)", "before_label": "string (optional)", "after_label": "string (optional)", "result": "string (the new approach shown after animation, alias: after_text)", "delay": "number (optional, seconds between strikes)", "accent": "string (optional, hex)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "live_vote", "description": "Live audience voting: buttons to vote, bar chart results, optional Google Sheets backend", "compact_description": "live audience voting with real-time bar chart results", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "question": "string", "options": "array of strings (vote choices)", "sheet_url": "string (optional, Google Sheet CSV for live tallies)", "write_url": "string (optional, GAS doGet URL to record votes)", "poll": "number (optional, poll interval ms, default 5000)", "accent": "string (optional, hex)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "reaction_shower", "description": "Emoji reaction buttons — tapping rains the emoji down the screen, with optional Sheet-backed totals", "compact_description": "emoji reaction buttons with raining particles", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "reactions": "array of emoji strings (optional, default 🔥💡🤯👏)", "write_url": "string (optional, GAS doGet URL to record reactions)", "sheet_url": "string (optional, Google Sheet CSV for live counts)", "poll": "number (optional, poll interval ms)", "accent": "string (optional, hex)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "raise_hand", "description": "Audience raise-hand button with live count — optional Google Sheets backend", "compact_description": "raise-hand button with live participant count", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "question": "string (optional, prompt text above button)", "label": "string (optional, button label, default ✋ Raise hand)", "write_url": "string (optional, GAS doGet URL to record hands)", "sheet_url": "string (optional, Google Sheet CSV for live count)", "poll": "number (optional, poll interval ms)", "accent": "string (optional, hex)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "surface_map", "description": "Visual diagram showing the A2UI surfaces — schema feeds into each render target", "compact_description": "A2UI surface diagram (schema → surfaces)", "surfaces": { "works_on": [ "web", "google-apps-script-web", "mcp-apps" ] }, "fields": { "title": "string (optional)", "surfaces": "array of {name, icon, desc, color} (optional, defaults to GAS/Meet/Sites/Chat)", "accent": "string (optional, hex)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "speed_counter", "description": "Stopwatch that starts ticking on load and freezes when the page finishes loading — shows real page load time", "compact_description": "live page-load stopwatch", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "label": "string (optional, e.g. \"Page loaded in\")", "sub": "string (optional, sub-label)", "accent": "string (optional, hex)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "live_edit", "description": "Embedded mini schema editor with a textarea for typing a single atom JSON block and a live rendered preview below", "compact_description": "embedded live atom JSON editor with preview", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "placeholder": "string (optional, example atom JSON)", "accent": "string (optional, hex)", "renderer_url": "string (optional, renderer base URL for linking)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "gmail_inbox", "description": "Horizontal swipeable carousel of Gmail inbox threads. Each card shows a coloured sender avatar, name, subject (bold if unread), snippet and timestamp. Clicking opens the thread in Gmail. On GAS uses GmailApp for live data; on other surfaces renders from items[] array or Gmail REST API.", "compact_description": "swipeable Gmail inbox carousel — live on GAS, items[] or api connector on web/meet", "surfaces": { "works_on": [ "google-apps-script-web", "google-meet-stage", "mcp-apps" ], "degraded_on": [ { "surface": "mcp-apps", "note": "renders sample data — live Google Workspace data requires an Apps Script deployment" } ] }, "fields": { "title": "string (optional). Section label above carousel. Default \"Inbox\".", "count": "integer (optional). Number of threads, max 20. Default 10.", "accent": "string (optional). Accent colour for unread indicator and nav dot. Default", "items": "array (static connector). Email objects for non-GAS surfaces.", "auth_token": "string (api connector). OAuth2 bearer token for REST API." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "drive_recent_files", "description": "Horizontal swipeable carousel of recently modified Drive files. Each card shows a coloured file-type badge (DOC/XLS/PPT/PDF), name, relative modified time, and owner. On GAS searches files modified in last 30 days via DriveApp; on other surfaces renders from items[] array or Drive REST API.", "compact_description": "swipeable Drive files carousel — live on GAS, items[] or api connector on web/meet", "surfaces": { "works_on": [ "google-apps-script-web", "google-meet-stage", "mcp-apps" ], "degraded_on": [ { "surface": "mcp-apps", "note": "renders sample data — live Google Workspace data requires an Apps Script deployment" } ] }, "fields": { "title": "string (optional). Section label above carousel. Default \"Recent Files\".", "count": "integer (optional). Number of files to show, max 20. Default 10.", "accent": "string (optional). Accent colour for active nav dot. Default", "items": "array (static connector). File objects for non-GAS surfaces.", "auth_token": "string (api connector). OAuth2 bearer token for REST API." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "drive_folder_contents", "description": "Responsive grid of files and subfolders inside a Drive folder. Subfolders appear first, each item shows a coloured file-type badge and name, clicking opens in Drive. On GAS uses DriveApp with folder_id; on other surfaces renders from items[] array or Drive REST API with folder_id + auth_token.", "compact_description": "Drive folder grid — live on GAS via folder_id, items[] or api connector on web/meet", "surfaces": { "works_on": [ "google-apps-script-web", "google-meet-stage", "mcp-apps" ], "degraded_on": [ { "surface": "mcp-apps", "note": "renders sample data — live Google Workspace data requires an Apps Script deployment" } ] }, "fields": { "folder_id": "string (gas-native/api). The Google Drive folder ID to browse.", "title": "string (optional). Override for the folder name shown as header.", "count": "integer (optional). Max items to show. Default 12.", "items": "array (static connector). File objects for non-GAS surfaces.", "auth_token": "string (api connector). OAuth2 bearer token for REST API." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "drive_file_card", "description": "Single Drive file card — coloured file-type badge (DOC/XLS/PPT/PDF), file name, optional description, and an \"Open →\" button. Works on any surface using static name/mime/url fields. On GAS, file_id triggers live lookup via DriveApp to populate name and mime automatically.", "compact_description": "single Drive file card — static on all surfaces; live name/type lookup via file_id on GAS", "surfaces": { "works_on": [ "google-apps-script-web", "google-meet-stage", "mcp-apps" ], "degraded_on": [ { "surface": "mcp-apps", "note": "renders sample data — live Google Workspace data requires an Apps Script deployment" } ] }, "fields": { "file_id": "string (gas-native). Drive file ID for live name/type lookup on GAS.", "name": "string. File display name — required on non-GAS surfaces.", "mime": "string. MIME type for badge colour (e.g. application/vnd.google-apps.spreadsheet).", "url": "string. URL to open — required on non-GAS surfaces.", "description": "string (optional). Short description shown below the file name." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "progress_store", "description": "Invisible state connector atom — no visual output. Initialises window._A2UI_STORE and dispatches \"a2ui:store\" CustomEvent. On GAS reads initial state from a Google Sheet at render time and writes back async via google.script.run. On web reads/writes localStorage keyed by course_id. All other LMS atoms read from and write to this shared store. Must appear before any stateful atom on the page.", "compact_description": "invisible LMS state connector — Sheet on GAS, localStorage on web; exposes window._A2UI_STORE", "surfaces": { "works_on": [ "google-apps-script-web", "google-meet-stage", "mcp-apps" ], "degraded_on": [ { "surface": "mcp-apps", "note": "renders fully but without persistence — progress and live data need an Apps Script deployment" } ] }, "fields": { "course_id": "string (required). Unique course identifier — scopes the Sheet and localStorage key." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "module_map", "description": "Visual curriculum grid showing all modules in a course. Each card displays module icon, title, description, duration, and a live status badge (locked/Start/Done) driven by progress_store. Locked modules are greyed out. Completed modules turn green. Cards navigate to module url on click.", "compact_description": "course curriculum grid — module cards with live locked/available/complete status from progress_store", "surfaces": { "works_on": [ "google-apps-script-web", "web", "google-meet-stage", "mcp-apps" ], "degraded_on": [ { "surface": "mcp-apps", "note": "renders fully but without persistence — progress and live data need an Apps Script deployment" } ] }, "fields": { "title": "string (optional). Section heading. Default \"Course Modules\".", "columns": "integer (optional). Grid columns, max 4. Default 3.", "modules": "array (required). Array of module objects. Each module supports: id (string, required), title, description, icon, duration, lessons, required[] (array of module ids that must be complete to unlock), and either: page (array of atom blocks, PREFERRED — auto-encoded into a self-contained URL at render time, no separate save needed) or url (string — only for external URLs or pre-saved nav pages). Always use page for inline module content." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "knowledge_check", "description": "Lightweight inline comprehension pulse — a single multiple-choice question with instant feedback and no score impact. Correct answer turns green with explanation; wrong answer turns red with explanation. All options lock after selection. No retry gate — learner simply continues reading.", "compact_description": "inline comprehension pulse — single question, instant feedback, no score pressure", "surfaces": { "works_on": [ "google-apps-script-web", "web", "google-meet-stage", "mcp-apps" ] }, "fields": { "question": "string (required). The comprehension question.", "options": "array (required). Array of answer strings.", "correct": "integer (required). Zero-based index of the correct answer.", "explanation": "string (optional). Explanation shown after any selection." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "quiz_result_summary", "description": "End-of-quiz result screen showing score percentage, pass/fail badge, time taken, per-question dot breakdown (green tick / red cross), and navigation buttons. Automatically writes the score to progress_store keyed by quiz_id. Pass mark is configurable.", "compact_description": "end-of-quiz result — score %, pass/fail, question dots, writes to progress_store", "surfaces": { "works_on": [ "google-apps-script-web", "web", "google-meet-stage", "mcp-apps" ] }, "fields": { "score": "integer (required). Number of correct answers.", "total": "integer (required). Total number of questions.", "quiz_id": "string (required). ID used to write score to progress_store.", "pass_mark": "integer (optional). Percentage required to pass. Default 70.", "time_secs": "integer (optional). Time taken in seconds for display.", "questions": "array (optional). Array of {label, correct} for per-question breakdown dots.", "next_url": "string (optional). URL for Continue button (shown when passed).", "retry_url": "string (optional). URL for Retry button." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "scenario_branch", "description": "Narrative branching learning atom. Presents a real-world situation with 2-4 labelled choices. Each choice reveals a consequence with good/neutral/bad outcome styling (green/amber/red). Includes a \"try again\" reset on non-linked consequences. Ideal for compliance, leadership, and soft-skills training.", "compact_description": "branching scenario — situation + choices + consequence reveal with good/neutral/bad outcome", "surfaces": { "works_on": [ "google-apps-script-web", "web", "google-meet-stage", "mcp-apps" ] }, "fields": { "scenario": "string (required). The situation or challenge presented to the learner.", "context": "string (optional). Background context shown in italics above the scenario.", "accent": "string (optional). Accent colour for choice buttons. Default", "choices": "array (required). Array of {label, consequence, outcome, next_url?} objects. outcome is \"good\", \"neutral\", or \"bad\"." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "completion_gate", "description": "Renders a locked placeholder card until the specified module id is marked complete in progress_store. Once complete, the gate disappears to reveal content below it. Use to sequence content and prevent skipping.", "compact_description": "content lock — hides until requires module id is complete in progress_store", "surfaces": { "works_on": [ "google-apps-script-web", "web", "google-meet-stage", "mcp-apps" ] }, "fields": { "requires": "string (required). Module id that must be complete in progress_store to unlock.", "label": "string (optional). Lock card heading. Default \"Locked\".", "message": "string (optional). Message shown on the lock card." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "certification_card", "description": "Completion certificate card — earner name, course title, issuer, and date with a gradient border and trophy icon. Locked behind a requires check against progress_store; becomes visible when the course is marked complete. On GAS, earner name is derived from active session if not supplied.", "compact_description": "completion certificate — locked until requires id complete in progress_store; earner from GAS session", "surfaces": { "works_on": [ "google-apps-script-web", "web", "google-meet-stage", "mcp-apps" ], "degraded_on": [ { "surface": "mcp-apps", "note": "renders fully but without persistence — progress and live data need an Apps Script deployment" } ] }, "fields": { "course": "string (required). Course name on the certificate.", "issuer": "string (optional). Issuing organisation name. Default \"A2UI Learning\".", "requires": "string (optional). Module/course id that must be complete to reveal the certificate.", "earner": "string (optional). Earner display name — auto-derived from GAS session if not set.", "date": "string (optional). Completion date string. Defaults to today.", "accent": "string (optional). Gradient accent colour. Default" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "skill_radar", "description": "SVG spider/radar chart plotting learner competency levels across multiple skill dimensions. Optional before values render as a dashed polygon overlay for before/after growth comparison. Values are 0-100 per skill.", "compact_description": "SVG radar/spider chart of skill competency levels — optional before/after growth overlay", "surfaces": { "works_on": [ "google-apps-script-web", "web", "google-meet-stage", "mcp-apps" ] }, "fields": { "title": "string (optional). Chart heading. Default \"Skill Profile\".", "accent": "string (optional). Fill/stroke colour for current polygon. Default", "skills": "array (required). Array of {label, value (0-100), before? (0-100)} objects." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "badge_showcase", "description": "Achievement badge wall — all course badges displayed in a grid. Earned badges glow with indigo highlight and full colour emoji; locked badges are greyed and dimmed. Each badge checks its required_id against progress_store to determine earned status.", "compact_description": "achievement badge wall — earned badges glow, locked badges grey; status from progress_store", "surfaces": { "works_on": [ "google-apps-script-web", "web", "google-meet-stage", "mcp-apps" ] }, "fields": { "title": "string (optional). Section heading. Default \"Achievements\".", "columns": "integer (optional). Grid columns, max 6. Default 4.", "badges": "array (required). Array of {id, label, icon, description, required_id} objects. required_id is the progress_store key to check for completion." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "learning_path_selector", "description": "Path chooser presented at course entry. Shows 2-4 role or level path cards (icon, title, description, duration). Learner clicks to select — selection is stored in progress_store via setPath() and optionally navigates to a path-specific url. Selected path can drive personalised module_map content.", "compact_description": "course entry path chooser — role/level cards, writes selection to progress_store, optional navigation", "surfaces": { "works_on": [ "google-apps-script-web", "web", "google-meet-stage", "mcp-apps" ], "degraded_on": [ { "surface": "mcp-apps", "note": "renders fully but without persistence — progress and live data need an Apps Script deployment" } ] }, "fields": { "title": "string (optional). Chooser heading. Default \"Choose Your Path\".", "intro": "string (optional). Introductory text below the heading.", "paths": "array (required). Array of {id, label, description, icon, accent, duration, url?} objects." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "video_checkpoint", "description": "YouTube video with interactive quiz questions injected at specified timestamps. Video pauses at each checkpoint and the learner must answer before playback resumes. Correct/wrong feedback shown with explanation. Checkpoint state tracked per-session; completed checkpoints are skipped on replay.", "compact_description": "YouTube video with pausing quiz checkpoints — learner must answer to continue", "surfaces": { "works_on": [ "google-apps-script-web", "web", "google-meet-stage", "mcp-apps" ], "degraded_on": [ { "surface": "mcp-apps", "note": "renders fully but without persistence — progress and live data need an Apps Script deployment" } ] }, "fields": { "youtube_id": "string (required). YouTube video ID.", "title": "string (optional). Section heading above the player.", "checkpoints": "array (required). Array of {at_seconds, question, options[], correct (0-based index), explanation} objects." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "cohort_progress_board", "description": "Instructor-facing table showing all enrolled learners with per-module completion ticks and average quiz scores. On GAS reads live from the course progress Sheet via a2uiCohortRead. On web renders from static items[] array. Shows enrolled and active learner counts at top.", "compact_description": "instructor cohort table — per-learner module completion + scores; live on GAS", "surfaces": { "works_on": [ "google-apps-script-web", "web", "google-meet-stage", "mcp-apps" ] }, "fields": { "course_id": "string (required). Matches the progress_store course_id.", "title": "string (optional). Board heading. Default \"Cohort Progress\".", "modules": "array (optional). Array of {id, label} for column headers. Drives per-module completion dots.", "items": "array (optional, web/static). Array of {email, progress{}, updated_at} learner objects." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "reflection_prompt", "description": "Structured free-text reflection textarea with a submit button. Saves the response to progress_store under the key \"reflect:\". On GAS this persists to the learner's progress Sheet. Restores previously saved text on revisit.", "compact_description": "reflection textarea — saves to progress_store; restores on revisit", "surfaces": { "works_on": [ "google-apps-script-web", "web", "google-meet-stage", "mcp-apps" ] }, "fields": { "prompt": "string (required). The reflection question shown above the textarea.", "prompt_id": "string (optional). Key suffix for progress_store. Default \"reflection\".", "placeholder": "string (optional). Textarea placeholder text.", "accent": "string (optional). Accent colour. Default" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "annotation_highlight", "description": "Rich body text passage with clickable highlighted terms that reveal inline explanations in a panel below. No state required. Ideal for glossary enrichment, technical definitions, or legal clause annotation within learning content.", "compact_description": "annotated body text — click highlighted terms to reveal inline explanations", "surfaces": { "works_on": [ "google-apps-script-web", "web", "google-meet-stage", "mcp-apps" ] }, "fields": { "text": "string (required). Body text passage. Annotated terms are replaced server-side.", "notes": "array (required). Array of {term, explanation, color?} objects. First match in text is highlighted." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "onboarding_stepper", "description": "Guided step-by-step onboarding flow for first-time learners. Each step has a label, description, optional action URL (navigated to on completion), and a \"Mark complete\" button. Completed steps persist in progress_store and are restored on revisit. Progress count shown at top.", "compact_description": "guided onboarding steps — completes to progress_store, restores on revisit", "surfaces": { "works_on": [ "google-apps-script-web", "web", "google-meet-stage", "mcp-apps" ] }, "fields": { "title": "string (optional). Stepper heading. Default \"Get Started\".", "accent": "string (optional). Active step indicator colour. Default", "steps": "array (required). Array of {id, icon, label, description, action_label, action_url?} objects." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "case_study_card", "description": "Structured enterprise case study card. Sections for situation narrative, key data points (label/value/note), numbered analysis questions, and an optional model answer reveal. No state required. The model answer is hidden behind a toggle button.", "compact_description": "structured case study — situation, data points, questions, optional model answer reveal", "surfaces": { "works_on": [ "google-apps-script-web", "web", "google-meet-stage", "mcp-apps" ] }, "fields": { "title": "string (required). Case study title.", "situation": "string (required). The scenario narrative.", "data_points": "array (optional). Array of {label, value, note?} metric blocks.", "questions": "array (optional). Array of question strings for analysis.", "model_answer": "string (optional). Model answer text shown on toggle. Hidden by default.", "accent": "string (optional). Accent colour for data point values. Default" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "study_timer", "description": "Pomodoro-style focus/break countdown timer. Configurable focus and break durations. Animated SVG progress ring. Counts completed sessions. Session-scoped only — no persistence to progress_store.", "compact_description": "Pomodoro focus/break timer with SVG ring — session only, no persistence", "surfaces": { "works_on": [ "google-apps-script-web", "web", "google-meet-stage", "mcp-apps" ] }, "fields": { "label": "string (optional). Timer heading. Default \"Study Timer\".", "focus_mins": "integer (optional). Focus period in minutes. Default 25.", "break_mins": "integer (optional). Break period in minutes. Default 5.", "accent": "string (optional). Ring and mode label colour. Default" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "rubric_card", "description": "Assessment rubric table. Rows are assessment criteria, columns are performance levels (e.g. Beginning/Developing/Proficient/Exemplary). Descriptor text in each cell describes that level for that criterion. Static display — no state required.", "compact_description": "assessment rubric table — criteria rows × performance level columns", "surfaces": { "works_on": [ "google-apps-script-web", "web", "google-meet-stage", "mcp-apps" ] }, "fields": { "title": "string (optional). Table heading. Default \"Assessment Rubric\".", "levels": "array (optional). Performance level column headers. Default [Beginning, Developing, Proficient, Exemplary].", "accent": "string (optional). Highest-level column colour. Default", "criteria": "array (required). Array of {criterion, descriptors[]} objects. descriptors[] maps to levels[] by index." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "spaced_repetition_card", "description": "Single flashcard with front/back flip animation and a post-flip confidence rating (1-5 with emoji). Writes {rating, next_days, rated_at} to progress_store under \"srs:\". Next-review hint computed via simplified SM-2 (1→1d, 2→2d, 3→4d, 4→7d, 5→14d).", "compact_description": "flip flashcard with confidence rating 1-5 — writes SRS interval to progress_store", "surfaces": { "works_on": [ "google-apps-script-web", "web", "google-meet-stage", "mcp-apps" ] }, "fields": { "front": "string (required). Front face — term or question.", "back": "string (required). Back face — answer or definition.", "card_id": "string (optional). Key for progress_store SRS data. Auto-generated if omitted.", "accent": "string (optional). Front card highlight colour. Default" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "leaderboard_card", "description": "Ranked learner leaderboard by score. On GAS reads live from the course progress Sheet via a2uiCohortRead, extracts scores for score_key, and ranks descending. On web renders from static items[]. Top 3 entries get gold/silver/bronze medal indicators. Per-row score bar visualises relative performance.", "compact_description": "ranked score leaderboard — live on GAS from Sheet, static on web; medal top 3", "surfaces": { "works_on": [ "google-apps-script-web", "web", "google-meet-stage", "mcp-apps" ], "degraded_on": [ { "surface": "mcp-apps", "note": "renders fully but without persistence — progress and live data need an Apps Script deployment" } ] }, "fields": { "course_id": "string (required). Matches progress_store course_id.", "score_key": "string (optional). Which quiz score to rank on. Default \"quiz1\".", "limit": "integer (optional). Max entries shown. Default 10.", "title": "string (optional). Card heading. Default \"Leaderboard\".", "items": "array (optional, web/static). Array of {name, score} objects for static rendering." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "nav_bar", "description": "Horizontal or vertical navigation bar linking to other named A2UI pages. Generates correct ?nav=&from= URLs at runtime using window._A2UI_NAV — no deployment URL needs to be hard-coded. Optionally sticky below the system nav header. Active page is highlighted automatically by comparing slugs.", "compact_description": "named-page nav bar — generates ?nav= URLs at runtime from _A2UI_NAV; active page auto-highlighted", "surfaces": { "works_on": [ "google-apps-script-web", "web", "google-meet-stage", "mcp-apps" ] }, "fields": { "label": "string (optional). Small uppercase label above the bar.", "layout": "string (optional). \"horizontal\" (default) or \"vertical\".", "sticky": "boolean (optional). Whether to stick below the system nav header. Default true.", "top_offset": "integer (optional). Top offset in px when sticky. Default 52.", "accent": "string (optional). Active link accent colour. Default", "links": "array (required). Array of {nav_slug, label, icon?, active?} objects. nav_slug is the saved page slug; the correct URL is generated at runtime." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "palette", "description": "Sets page-level CSS custom properties (accent colours, block gap) for consistent theming across all atoms. Use as the first block in any payload.", "compact_description": "page-level accent colour and spacing theme variables", "surfaces": { "works_on": [ "web", "google-apps-script-web", "google-apps-script-side-panel", "mcp-apps" ] }, "fields": { "accent": "hex colour string. Sets --a2ui-accent CSS var used by all atoms as default accent.", "accent2": "hex colour string (optional). Secondary accent.", "block_gap": "CSS length (default 1.25rem). Vertical gap between atom blocks.", "text_color": "hex (optional). Overrides --text CSS var.", "bg_color": "hex (optional). Overrides --bg CSS var." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "print_button", "description": "A button that triggers window.print() to print or save the current page as PDF.", "compact_description": "button to print or save page as PDF", "surfaces": { "works_on": [ "web", "google-apps-script-web", "google-apps-script-side-panel", "mcp-apps" ] }, "fields": { "label": "string (default \"Print this page\")", "align": "left, center, or right", "size": "sm, md, or lg", "accent": "hex colour for button background", "icon": "boolean (default true) — show printer emoji prefix" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "drive_image", "description": "Embeds a Google Drive image by file ID or share URL, converting it to the correct export URL that works inside GAS iframes.", "compact_description": "Google Drive image embed by file ID", "surfaces": { "works_on": [ "web", "google-apps-script-web", "google-apps-script-side-panel", "mcp-apps" ] }, "fields": { "url": "Drive share URL OR file ID", "id": "alias for url", "alt": "alt text for accessibility", "caption": "caption text shown below image", "rounded": "boolean (default true) — rounded corners", "width": "CSS width string (default \"max-width:100%\")" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "maps_embed", "description": "Embeds a Google Maps location search in an iframe. Suitable for event location, office address, field ops context.", "compact_description": "Google Maps location embed iframe", "surfaces": { "works_on": [ "web", "google-apps-script-web", "google-apps-script-side-panel", "mcp-apps" ] }, "fields": { "q": "address or place name to search (required)", "height": "iframe height in px (default 360)", "zoom": "map zoom level 1-20 (default 14)", "caption": "optional caption below the map" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "sheet_form", "description": "A form that submits data to a named Google Sheet tab via google.script.run. Requires the GAS project to be bound to a Spreadsheet.", "compact_description": "form submitting rows to a Google Sheet tab", "surfaces": { "works_on": [ "web", "google-apps-script-web", "google-apps-script-side-panel", "mcp-apps" ], "degraded_on": [ { "surface": "web", "note": "Renders a static form preview only — submission requires Apps Script runtime" } ] }, "fields": { "title": "optional form heading", "sheet": "sheet tab name to write to (required). Created automatically if it doesn't exist.", "submit_label": "button label (default \"Submit\")", "accent": "hex colour for submit button", "fields": "array (required). Each item has label, name (optional), type (text/email/textarea/select), placeholder, required, hint, options (for select), rows (for textarea)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "reveal", "description": "Wraps child blocks with entrance animations triggered on load. animation choices: fade_up, fade_in, slide_left, slide_right, scale_in, stagger.", "compact_description": "entrance animation wrapper for child blocks", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "google-apps-script-side-panel", "mcp-apps" ] }, "fields": { "animation": "fade_up (default), fade_in, slide_left, slide_right, scale_in, stagger", "duration": "animation duration in ms (default 500)", "delay": "initial delay in ms before first block animates (default 0)", "stagger_delay": "ms between each block when animation is stagger (default 120)", "blocks": "array of child atoms to wrap" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "skeleton", "description": "CSS shimmer loading placeholder. skeleton_type choices: text, card, avatar_row, image, list, table.", "compact_description": "shimmer loading placeholder shapes", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "google-apps-script-side-panel", "mcp-apps" ] }, "fields": { "skeleton_type": "text (default), card, avatar_row, image, list, table", "rows": "number of placeholder rows (default 3)", "cols": "number of columns for table type (default 3)", "height": "height for image type (default 200px)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "marquee", "description": "Infinite horizontal scrolling ticker. Items can be text strings, logos (image_url), or icon+label chips.", "compact_description": "infinite horizontal scrolling ticker strip", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "google-apps-script-side-panel", "mcp-apps" ] }, "fields": { "items": "array of {text?, label?, icon?, image_url?, url?}", "title": "optional label above the marquee strip", "speed": "seconds for one full cycle (default 30)", "gap": "px spacing between items (default 48)", "direction": "normal (left scroll, default) or right", "separator": "optional separator character between items", "pause_on_hover": "pause animation on hover (default true)", "bg": "background colour (default var(--surface))", "rounded": "rounded corners (default true)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "pulse_dot", "description": "Pulsing status or attention indicator dot. Inline or block display.", "compact_description": "pulsing status indicator dot", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "google-apps-script-side-panel", "mcp-apps" ] }, "fields": { "color": "dot colour (default", "size": "sm, md (default), lg", "label": "optional text beside the dot", "speed": "animation cycle in seconds (default 1.8)", "inline": "render inline (default true)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "loading_dots", "description": "Three-dot pulsing loader. Use during async content load or as a status indicator.", "compact_description": "three-dot pulsing loader", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "google-apps-script-side-panel", "mcp-apps" ] }, "fields": { "color": "dot colour (default var(--a2ui-accent))", "size": "sm, md (default), lg", "label": "optional text beside the dots", "align": "flex-start (default) or center" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "progress_ring", "description": "Animated SVG circular progress gauge. Animates from 0 to value on load.", "compact_description": "animated circular progress gauge", "surfaces": { "works_on": [ "web", "google-apps-script-web", "google-apps-script-side-panel", "mcp-apps" ] }, "fields": { "value": "numeric value 0-100 (required)", "size": "ring diameter in px (default 100)", "stroke_width": "ring stroke thickness (default 8)", "color": "ring fill colour (default var(--a2ui-accent))", "track_color": "background ring colour (default var(--border))", "label": "optional caption below the ring", "show_value": "show numeric value inside ring (default true)", "unit": "unit string (default %)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "confetti_burst", "description": "JS confetti celebration effect. trigger load fires immediately, trigger button shows a clickable button.", "compact_description": "confetti celebration burst effect", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "google-apps-script-side-panel", "mcp-apps" ] }, "fields": { "trigger": "button (default) or load", "label": "button label (default Celebrate!)", "count": "number of confetti pieces (default 80)", "colors": "array of hex colours", "duration": "total animation duration in ms (default 2000)", "accent": "button colour" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "ripple_button", "description": "CTA button with a CSS ripple click effect. Optionally links to a URL.", "compact_description": "CTA button with ripple click effect", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "google-apps-script-side-panel", "mcp-apps" ] }, "fields": { "label": "button text (required)", "url": "optional link target", "icon": "optional emoji or icon prefix", "accent": "button background colour", "size": "sm, md (default), lg", "full_width": "stretch to container width (default false)", "align": "flex-start (default), center, right" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "wave_divider", "description": "Animated SVG wave as a decorative section separator.", "compact_description": "animated wave section separator", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "google-apps-script-side-panel", "mcp-apps" ] }, "fields": { "color": "wave fill colour (default var(--a2ui-accent))", "height": "wave height in px (default 60)", "speed": "animation cycle in seconds (default 8)", "opacity": "fill opacity (default 0.15)", "flip": "reverse wave direction (default false)", "animate": "animate the wave (default true)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "floating_badge", "description": "An emoji or icon that bobs up and down continuously. Great for CTAs and achievement moments.", "compact_description": "bobbing emoji or icon badge", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "google-apps-script-side-panel", "mcp-apps" ] }, "fields": { "icon": "emoji or character to float (required)", "label": "optional caption below", "size": "sm, md (default), lg", "speed": "bob cycle in seconds (default 3)", "shadow": "drop shadow that deepens on rise (default true)", "align": "center (default), left, right" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "shimmer_text", "description": "Headline text with an animated shimmer/gloss sweep across a gradient. Use for hero taglines.", "compact_description": "headline text with shimmer gloss sweep", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "google-apps-script-side-panel", "mcp-apps" ] }, "fields": { "text": "the text to render (required)", "size": "font-size CSS value (default 2rem)", "from": "gradient start colour (default", "to": "gradient end colour (default", "via": "mid shimmer colour (default", "speed": "animation cycle in seconds (default 2.5)", "weight": "font-weight (default 800)", "align": "left (default), center, right" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "number_flip", "description": "Slot-machine style digit reveal. Each digit flips in from above on load.", "compact_description": "slot-machine digit reveal counter", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "google-apps-script-side-panel", "mcp-apps" ] }, "fields": { "value": "the number or string to display (required)", "prefix": "text before the number", "suffix": "text after the number", "label": "caption below", "size": "font-size CSS value (default 3rem)", "color": "digit colour (default var(--a2ui-accent))", "duration": "total animation window in ms (default 1200)", "align": "center (default), left" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "spotlight_card", "description": "A content card where a radial gradient spotlight follows the cursor. Child blocks or content field.", "compact_description": "card with cursor-following spotlight", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "google-apps-script-side-panel", "mcp-apps" ] }, "fields": { "blocks": "array of child atoms inside the card", "content": "markdown string (if no blocks)", "accent": "spotlight tint colour (default var(--a2ui-accent))" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "animated_border", "description": "Card or section with a rotating conic gradient border. Child blocks or content inside.", "compact_description": "card with rotating gradient border", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "google-apps-script-side-panel", "mcp-apps" ] }, "fields": { "blocks": "array of child atoms inside", "content": "markdown string (if no blocks)", "from": "gradient start colour (default", "to": "gradient end colour (default", "via": "gradient mid colour (default", "speed": "rotation speed in seconds (default 3)", "padding": "inner padding (default 20px)", "radius": "border radius (default 12px)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "countdown_ring", "description": "Circular SVG countdown that depletes as seconds tick down.", "compact_description": "circular countdown timer ring", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-web", "google-apps-script-side-panel", "mcp-apps" ] }, "fields": { "duration_sec": "total countdown in seconds (required, default 60)", "size": "ring diameter in px (default 80)", "color": "ring colour (default var(--a2ui-accent))", "label": "caption below" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "google_icon", "description": "A single Material Symbol icon from Google Fonts CDN. Browse 2500+ icon names at fonts.google.com/icons.", "compact_description": "single Material Symbol icon", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-side-panel", "google-apps-script-web", "mcp-apps" ] }, "fields": { "name": "icon ligature name (required, e.g. \"home\", \"check_circle\", \"rocket_launch\")", "size": "font-size CSS value (default 24px)", "color": "icon colour (default currentColor)", "filled": "render the filled variant (default false — outlined)", "weight": "font weight 100-700 (default 400)", "style": "outlined (default) or rounded", "label": "optional text beside the icon", "inline": "render inline-flex (default true)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "icon_badge", "description": "Material Symbol icon inside a coloured circular badge. Good for stat rows and feature lists.", "compact_description": "Material icon in coloured circular badge", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-side-panel", "google-apps-script-web", "mcp-apps" ] }, "fields": { "name": "icon ligature name (required)", "icon_size": "icon size in px (default 24)", "bg": "badge background colour (default var(--a2ui-accent))", "color": "icon colour (default", "padding": "badge padding (default 12px)", "radius": "badge border radius (default 50%)", "filled": "filled icon variant (default false)", "label": "optional caption below" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "icon_row", "description": "Horizontal strip of Material Symbol icon + label pairs. Good for feature/capability lists.", "compact_description": "horizontal icon and label strip", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-side-panel", "google-apps-script-web", "mcp-apps" ] }, "fields": { "items": "array of {name or icon, label or text, color?}", "icon_size": "px (default 20)", "color": "default icon colour (default var(--a2ui-accent))", "filled": "filled icon variant (default false)", "style": "outlined (default) or rounded", "gap": "gap between items (default 12px)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "workspace_logo", "description": "A single Google Workspace product logo from Google's official CDN (fonts.gstatic.com). Falls back to coloured letter badge for unknown apps.", "compact_description": "single Google Workspace product logo", "surfaces": { "works_on": [ "web", "google-apps-script-web", "google-apps-script-side-panel", "mcp-apps" ] }, "fields": { "app": "app name (required) — gmail, drive, docs, sheets, slides, calendar, meet, forms, chat, classroom, keep, sites, vault, groups, tasks, contacts, jamboard, admin, appsheet, currents", "size": "display size in px (default 48 — SVG scales to any size)", "label": "caption below logo (default capitalised app name; set to empty string to hide)", "inline": "render inline (default true)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "workspace_logo_strip", "description": "Horizontal strip of Google Workspace product logos. Greyscale by default, restores colour on hover.", "compact_description": "horizontal strip of Workspace logos", "surfaces": { "works_on": [ "web", "google-apps-script-web", "google-apps-script-side-panel", "mcp-apps" ] }, "fields": { "apps": "array of app names (default gmail, drive, docs, sheets, slides, meet)", "title": "optional label above the strip", "size": "logo size in px (default 40)", "gap": "gap between logos (default 24px)", "greyscale": "render greyscale until hover (default true)", "bg": "strip background colour (default transparent)", "align": "flex-start (default), center, flex-end" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "workspace_logo_grid", "description": "Grid of Google Workspace product logos with labels. Good for \"Integrations\" or \"Works with\" sections.", "compact_description": "labelled grid of Workspace logos", "surfaces": { "works_on": [ "web", "google-apps-script-web", "google-apps-script-side-panel", "mcp-apps" ] }, "fields": { "apps": "array of app names (default all 20 known apps)", "title": "optional section heading", "size": "logo size in px (default 48)", "cols": "grid columns (default 5)", "greyscale": "render greyscale (default false)", "show_labels": "show app name labels (default true)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "icon_feature_grid", "description": "Feature grid using Material Symbol icons — better than emoji for Workspace UI contexts.", "compact_description": "feature grid with Material icons", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-side-panel", "google-apps-script-web", "mcp-apps" ] }, "fields": { "title": "optional section heading", "cols": "grid columns (default 3)", "icon_size": "icon size in px (default 28)", "filled": "filled icon variant (default false)", "accent": "default icon colour", "style": "outlined (default) or rounded", "items": "array of {icon (ligature name), title, text, color?}" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "icon_checklist", "description": "Checklist where each item has a Material Symbol icon (not just a check mark). Good for capability or requirements lists.", "compact_description": "checklist items with Material icons", "surfaces": { "works_on": [ "web", "google-meet-stage", "google-apps-script-side-panel", "google-apps-script-web", "mcp-apps" ] }, "fields": { "title": "optional heading", "default_icon": "fallback icon for items without one (default check_circle)", "icon_size": "px (default 20)", "filled": "filled icon variant (default true)", "accent": "default icon colour", "items": "array of strings or {text, icon?, sublabel?, color?}" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "hub", "description": "Full-screen deck navigation container: subjects as a coloured nav rail, each holding slides of atom blocks. The envelope for hub/deck payloads.", "compact_description": "deck navigation shell with subjects and slides", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "subjects": "array (required) of {id, label, color (hex), slides: [{id, label, blocks: [atom blocks]}]}", "background": "string (optional, page hex, default \"#0f172a\")", "nav_background": "string (optional, nav rail hex, defaults to background)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "jump_nav", "description": "Horizontal strip of pill buttons that smooth-scroll to other blocks on the page by id.", "compact_description": "anchor pill buttons scrolling to page sections", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "links": "array (required) of {label, target (block id to scroll to)}" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "command_step", "description": "Terminal-styled command with copy button and a done-checkbox. Wire done/setDone to a ValueStore to track completion (used by training runbooks for progress).", "compact_description": "copyable command with completion checkbox", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "label": "string (optional, step title above the command)", "command": "string (required, the shell command; empty for manual steps)", "hint": "string (optional, small helper line under the checkbox)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "flashcard_deck", "description": "Tap-to-flip study cards cycling through question/answer pairs.", "compact_description": "flip-card deck of question answer pairs", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "cards": "array (required) of {front, back}", "accent": "string (optional, hex, default \"#6366f1\")", "label_front": "string (optional, default \"QUESTION\")", "label_back": "string (optional, default \"ANSWER\")" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "brevet_timeline", "description": "Vertical dated timeline of events for study/revision pages.", "compact_description": "dated vertical revision timeline", "surfaces": { "works_on": [ "google-apps-script-web", "mcp-apps" ] }, "fields": { "title": "string (optional)", "events": "array (required) of {date, title, desc}", "accent": "string (optional, hex, default \"#3b82f6\")" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "gdm_rocket_panel", "description": "Fixed-position canvas launch animation -- an isometric rocket climbing through exhaust trail and sparks to a HUD telemetry readout. Overlays one half of the viewport (position:fixed, non-interactive). Ported from the Google Meet Stage add-on's gdm-rocket-panel component (used in the \"Apps Script is now a Workspace Core Service\" playbook); graduated from stage:preview after serving as the mcp-apps page's off-catalog demo content -- the catalog's intake pipeline working as designed.", "compact_description": "isometric rocket launch canvas animation, fixed half-viewport overlay", "surfaces": { "works_on": [ "mcp-apps" ] }, "fields": { "side": "string (optional, right|left, default right -- which viewport half the overlay claims)", "layer": "string (optional, back|front, default back -- back is z-index 50, front 150, matching the original component's layer variants)", "loop": "boolean (optional, default false -- false launches once and holds at apex; true restores the original's ambient relaunch loop)" }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } }, { "type": "math_block", "description": "Native MathML equation typeset with the CSS `math` generic font family (STIX / Latin Modern Math) — no JavaScript, no external library. The agent emits standard MathML; the surface draws it. Great for maths and science content — fractions, roots, integrals, matrices — rendered with correct spacing and alignment.", "compact_description": "native MathML equation typeset with the math font family", "surfaces": { "works_on": [ "web", "google-apps-script-web", "google-meet-stage", "mcp-apps" ], "incompatible_on": [ { "surface": "email", "reason": "MathML is stripped by most email clients (Gmail etc.)" }, { "surface": "google-chat", "reason": "Chat cards have no MathML widget" } ] }, "fields": { "mathml": "string. MathML markup — inner content or a full element. Active content (script, annotation-xml, on* handlers, javascript:) is stripped before the markup is rendered.", "caption": "string (optional). Caption shown below the equation.", "number": "string (optional). Equation number, right-aligned (e.g. \"(1)\").", "align": "string (optional). 'center' (default) or 'left'.", "size": "string (optional). Equation font-size. Default clamp(1.1rem,2.5vw,1.6rem)." }, "source": { "name": "a2uicatalog", "url": "https://github.com/a2uicatalog/a2ui", "license": "MIT" } } ] }