@decantr/content 3.8.0

package/patterns/api-explorer.json

@@ -0,0 +1,131 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "api-explorer",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "API Explorer",
+  "description": "Interactive API documentation with a browsable endpoint list, parameter tables, a try-it-out request builder with editable JSON bodies, live response viewer, and multi-language code snippet generation.",
+  "category": "developer",
+  "tags": [
+    "2026",
+    "developer",
+    "api",
+    "documentation",
+    "rest",
+    "request-builder",
+    "explorer"
+  ],
+  "components": [
+    "EndpointList",
+    "EndpointDetail",
+    "RequestBuilder",
+    "ResponseViewer",
+    "AuthConfig",
+    "ParameterTable",
+    "CodeSnippet"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Two-panel layout with a left sidebar listing all endpoints and a right detail area showing the selected endpoint's documentation, request builder, and response viewer",
+      "layout": {
+        "layout": "row",
+        "atoms": "_flex _row _hfull _wfull _overflow-hidden"
+      }
+    },
+    "grouped": {
+      "description": "Endpoints organized by API resource with collapsible groups in the sidebar — each group shows the resource name and endpoint count, expanding to reveal individual endpoints within that resource",
+      "layout": {
+        "layout": "row",
+        "atoms": "_flex _row _hfull _wfull _overflow-hidden"
+      }
+    },
+    "minimal": {
+      "description": "Compact single-column reference layout without the sidebar — endpoints render as collapsible accordion sections in a scrollable list, each expanding to show method, path, parameters, and a condensed request/response example",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _wfull _overflow-y-auto _p4"
+      }
+    }
+  },
+  "visual_brief": "Two-panel layout with a left sidebar (280px wide) listing API endpoints and a right detail area filling the remaining width. The sidebar has a search input at the top and below it a scrollable list of endpoints grouped by resource (e.g., 'Users', 'Products', 'Orders'). Each resource group has a heading with the resource name and a count badge. Under each group, individual endpoints display as rows showing an HTTP method badge (GET as a green rounded pill, POST as a blue pill, PUT as an orange pill, DELETE as a red pill, PATCH as a purple pill) followed by the URL path in monospace text (e.g., '/users/{id}'). The currently selected endpoint row has an active background highlight. The right detail area shows the selected endpoint's documentation: a title with the HTTP method badge and full path, a description paragraph, a ParameterTable with columns for name, type (as a code-styled badge), required (red asterisk or green optional badge), and description. Below the parameter table is the RequestBuilder section: an editable JSON body area with syntax highlighting (for POST/PUT/PATCH methods), an auth configuration dropdown (None, Bearer Token, API Key, Basic Auth) with a token/key input field, and header key-value rows. A prominent 'Send' button with a play icon triggers the request. The ResponseViewer below shows: a status code badge (2xx green, 4xx amber, 5xx red) with the status text, a collapsible headers section showing response headers as key-value pairs, and the response body in a syntax-highlighted JSON viewer with line numbers. At the bottom, CodeSnippet tabs allow switching between curl, JavaScript (fetch), and Python (requests) with a copy-to-clipboard button on each tab. The minimal preset renders everything as a single scrollable page with accordion sections per endpoint.",
+  "layout_hints": {
+    "panel_balance": "Keep the endpoint index, request builder, and response viewer in a clear operational hierarchy. Do not let the request builder overpower the endpoint documentation itself.",
+    "response_focus": "The response viewer should feel like a trustworthy debugging surface, not a generic textarea dump. Keep status, headers, and body in a stable order.",
+    "mobile_fallback": "When the sidebar collapses on small screens, preserve the mental model of endpoint selection before request construction."
+  },
+  "default_layout": {
+    "layout": "row",
+    "atoms": "_flex _row _hfull _wfull _overflow-hidden",
+    "slots": {
+      "endpoint-list": "Left sidebar panel (280px fixed width) with a top search input for filtering endpoints by path or method, followed by a scrollable list of endpoint items. In grouped preset, items are nested under collapsible resource group headings. Each endpoint item shows an HTTP method badge (colored pill: GET=green, POST=blue, PUT=orange, DELETE=red, PATCH=purple) and the path in monospace. The active endpoint has a highlighted background. The sidebar has a subtle right border.",
+      "endpoint-detail": "Right content area filling the remaining width, scrollable vertically. Contains all documentation and interactive sections for the selected endpoint stacked vertically with comfortable spacing.",
+      "description-section": "Top of the detail area. Shows the endpoint title as a large heading with the HTTP method badge and full URL path. Below it, a description paragraph explaining what the endpoint does, followed by any notes or warnings as callout boxes.",
+      "parameter-table": "A data table listing all parameters (path, query, header, body). Columns: parameter name (monospace), location badge (path/query/header/body as small pills), type (code-styled, e.g., 'string', 'integer', 'object'), required indicator (red 'required' badge or gray 'optional'), default value if any, and a description. Rows alternate with subtle background striping. Nested object parameters indent with a tree-line guide.",
+      "request-builder": "Interactive section for constructing and sending requests. Contains: a URL bar showing the full resolved URL with editable path parameters highlighted in a distinct color, an AuthConfig dropdown and credential input, optional header rows (key-value pairs with add/remove), a JSON body editor with syntax highlighting and line numbers (visible for POST/PUT/PATCH), and a prominent 'Send' button (primary color, play icon) at the right. A loading spinner replaces the button while the request is in flight.",
+      "response-viewer": "Section showing the API response after sending a request. Header row: status code as a large colored badge (200 green, 201 green, 400 amber, 401 amber, 404 amber, 500 red) with status text. A toggle to show/hide response headers as a key-value list. The response body displayed in a syntax-highlighted JSON code block with line numbers, word-wrap toggle, and a copy button. If the response is an error, the viewer has a subtle red background tint.",
+      "code-snippet": "Tabbed section at the bottom showing auto-generated code examples for the current request configuration. Tabs: curl, JavaScript (using fetch API), Python (using requests library). Each tab shows a syntax-highlighted code block matching the current request parameters, headers, auth, and body. A copy-to-clipboard button in the top-right of each tab. Code updates live as the request builder configuration changes."
+    }
+  },
+  "responsive": {
+    "mobile": "Single-column layout. Endpoint list renders as a top dropdown selector instead of a sidebar. Detail sections stack vertically with full width. JSON editor uses a compact height. Code snippets show one language at a time with a selector dropdown. Send button is sticky at the bottom of the viewport.",
+    "tablet": "Sidebar collapses to an icon-only mode (showing just method badges) that expands on tap. Detail area takes most of the width. Parameter table horizontally scrolls if needed. Response viewer and code snippets at full width.",
+    "desktop": "Full two-panel layout with 280px sidebar and spacious detail area. Parameter table displays all columns without truncation. JSON editor has generous height. Code snippet tabs are all visible. Hover effects on endpoint list items."
+  },
+  "motion": {
+    "micro": {
+      "endpoint-hover": "background-tint 100ms ease-out on sidebar items",
+      "method-badge": "subtle scale pulse on hover 150ms ease-out",
+      "send-button-hover": "background-lighten + scale(1.02) 150ms ease-out",
+      "copy-flash": "background flash green 300ms ease-out on successful clipboard copy"
+    },
+    "transitions": {
+      "endpoint-switch": "detail area crossfade 200ms ease-out when selecting a different endpoint",
+      "response-appear": "fade + slide-up 300ms ease-out when response arrives",
+      "group-expand": "max-height 0→auto + fade 250ms ease-out for resource group toggle",
+      "sidebar-collapse": "width 280px→60px 300ms ease-in-out on tablet sidebar toggle"
+    },
+    "ambient": {
+      "request-loading": "send button spinner rotation continuous while request is in flight"
+    }
+  },
+  "interactions": [
+    "animate-on-mount",
+    "click-select",
+    "inline-edit",
+    "hover-reveal",
+    "keyboard-navigation"
+  ],
+  "composition": {
+    "APIExplorer": "Container(d-section, flex-row) > [EndpointList(d-surface) > EndpointItem*(d-interactive)] + EndpointDetail(d-surface) > [DescriptionSection + ParameterTable(d-data) + RequestBuilder(d-interactive) + ResponseViewer(d-data) + CodeSnippet(d-data)]",
+    "EndpointList": "Sidebar(d-surface, fixed-width, scrollable) > [SearchInput(d-control) + ResourceGroup* > EndpointItem*]",
+    "EndpointItem": "Row(d-interactive) > [MethodBadge(d-annotation, color: method) + PathLabel(mono)]",
+    "RequestBuilder": "Section(d-interactive) > [URLBar + AuthConfig(d-control) + HeaderRows? + BodyEditor?(d-data, syntax-highlighted) + SendButton(d-interactive)]",
+    "ResponseViewer": "Section(d-data) > [StatusBadge(d-annotation, color: statusCode) + HeadersToggle? + ResponseBody(d-data, syntax-highlighted, line-numbers)]",
+    "CodeSnippet": "Tabs(d-data) > [CurlTab + JavaScriptTab + PythonTab] > CodeBlock(syntax-highlighted, copyable)"
+  },
+  "accessibility": {
+    "role": "application",
+    "aria-label": "Interactive API documentation explorer with request builder",
+    "keyboard": [
+      "Arrow Up/Down: navigate endpoint list in sidebar",
+      "Enter: select focused endpoint and show its detail",
+      "Tab: move between interactive elements (search, parameters, body editor, send button)",
+      "Ctrl+Enter: send the current request",
+      "Ctrl+C: copy the current code snippet to clipboard",
+      "1-3: switch between code snippet tabs (curl, JS, Python)",
+      "Escape: close expanded response headers or resource groups",
+      "S: focus the endpoint search input",
+      "F: toggle fullscreen on the body editor or response viewer"
+    ],
+    "announcements": [
+      "Endpoint selected: {method} {path}",
+      "Request sent to {method} {path}",
+      "Response received: {statusCode} {statusText}, {bodySize} bytes",
+      "Code snippet copied to clipboard: {language}",
+      "Parameter {name} is required, type {type}",
+      "Auth configured: {authType}",
+      "Showing {count} endpoints matching '{query}'"
+    ]
+  }
+}

package/patterns/api-key-row.json

@@ -0,0 +1,119 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "api-key-row",
+  "version": "1.1.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "API Key Row",
+  "description": "API key management surface with responsive key rows/cards, masked key metadata, create-key workflow, copy/revoke actions, and a save-once creation banner.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Badge",
+        "Button",
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "contained": false,
+  "components": [
+    "Badge",
+    "Button",
+    "icon"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Full API key row with name, masked key, scope badges, dates, and copy/revoke actions.",
+      "components": [
+        "Badge",
+        "Button",
+        "icon"
+      ],
+      "layout": {
+        "layout": "row",
+        "atoms": "_flex _aic _gap4 _px4 _py4 _borderb _bordermuted/10",
+        "slots": {
+          "key-icon": "Key icon indicator on the left",
+          "key-info": "Key name (_textsm _fontmedium) and masked key value (_textxs _mono _fgmuted) stacked vertically",
+          "scopes": "Horizontal row of scope Badge elements (read, write, org:read, org:write)",
+          "dates": "Created and last-used timestamps",
+          "actions": "Copy key Button and Revoke Button (destructive variant)"
+        }
+      }
+    },
+    "card": {
+      "description": "Card-style API key display for mobile-friendly layouts. Stacked vertically.",
+      "components": [
+        "Badge",
+        "Button",
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap3 _p4 _border _bordermuted/20 _r3",
+        "slots": {
+          "header": "Key name and masked value",
+          "scopes": "Scope badges row",
+          "meta": "Created and last-used dates",
+          "actions": "Copy and revoke buttons, full width"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "row",
+    "atoms": "_flex _aic _gap4 _px4 _py4 _borderb _bordermuted/10",
+    "slots": {
+      "key-icon": "Key icon",
+      "key-info": "Name and masked key",
+      "scopes": "Scope badges",
+      "dates": "Created and last-used",
+      "actions": "Copy and revoke buttons"
+    }
+  },
+  "visual_brief": "Single horizontal row with a key icon on the far left, followed by the key name in medium-weight text and a masked key value (e.g. 'sk-****...3f2a') in monospace below it. Scope badges (read, write) appear as small colored pills in the middle. Created and last-used dates render in muted small text. Copy and revoke action buttons sit on the far right, with revoke styled as a destructive variant. Rows are separated by bottom borders. The card preset stacks everything vertically inside a bordered card for mobile use.",
+  "responsive": {
+    "mobile": "Prefer the card preset — stacked vertical layout with wrapped scope badges and actions that sit beneath the key metadata instead of forcing a rigid table.",
+    "tablet": "Standard row or card-list layout is acceptable, but metadata should wrap before the key row overflows.",
+    "desktop": "Full row layout with clear separation between key info, scopes, dates, and actions."
+  },
+  "motion": {
+    "micro": "Copy and revoke controls may brighten or lift subtly on hover and focus, but the row itself should remain operational and stable.",
+    "transitions": "Reveal, creation-banner, and revoked-state changes should animate softly over 150-220ms without shifting the table rhythm."
+  },
+  "interactions": [
+    "inline-edit",
+    "click-select",
+    "hover-reveal"
+  ],
+  "layout_hints": {
+    "row_layout": "Key icon (16px, muted) + key name + masked value + scope badges + date metadata + actions. On narrow widths, collapse into stacked cards before the metadata starts crowding.",
+    "reveal": "Click masked value to reveal for 5 seconds, then re-mask. Copy button copies full key.",
+    "create_form": "Inline form at top: text input for key name + scope controls + Create button (primary). Appears on 'New API Key' click.",
+    "creation_banner": "After key creation, surface a prominent one-time reveal banner with copy action and dismissal control. This banner should feel like a temporary alert card, not just a paragraph."
+  },
+  "accessibility": {
+    "role": "row",
+    "aria-label": "API key entry",
+    "keyboard": [
+      "Tab moves through reveal, copy, revoke, and scope controls in row order.",
+      "Keyboard users should be able to reveal and copy keys without relying on hover-only UI."
+    ],
+    "announcements": [
+      "One-time key creation and reveal states should be announced clearly.",
+      "Revocation outcomes should be announced explicitly."
+    ],
+    "focus_management": "Keep focus on the row or invoked action after copy or reveal events so the user does not lose context."
+  },
+  "composition": {
+    "ApiKeyWorkspace": "Stack > [WorkspaceHeader + CreatePanel? + CreationBanner? + ApiKeyRow[]]",
+    "ApiKeyRow": "Row(d-data-row, hoverable) > [KeyIcon + KeyInfo + ScopeBadges + DateInfo + Actions]",
+    "KeyInfo": "Stack(flex-col) > [KeyName(font-medium) + MaskedKey(mono-data, text-muted)]",
+    "ScopeBadges": "Row(gap-2) > Badge(d-annotation)[]",
+    "Actions": "Row(d-interactive) > [CopyButton(variant: ghost) + RevokeButton(variant: destructive)]",
+    "CreationBanner": "AlertCard(d-surface, success-tint) > [BannerTitle + FullKey(mono-data) + CopyAction + DismissAction]"
+  }
+}

package/patterns/ar-annotation.json

@@ -0,0 +1,137 @@
+{
+  "id": "ar-annotation",
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "AR Annotation",
+  "description": "Annotation overlay for marking up images, scenes, and spatial content with positioned hotspots, text labels, measurement lines, and A/B comparison sliders.",
+  "category": "spatial",
+  "tags": [
+    "2027",
+    "frontier",
+    "spatial",
+    "annotation",
+    "AR",
+    "overlay",
+    "measurement",
+    "comparison",
+    "interactive"
+  ],
+  "components": [
+    "AnnotationCanvas",
+    "Hotspot",
+    "AnnotationLabel",
+    "MeasurementLine",
+    "CompareSlider",
+    "ZoomControls"
+  ],
+  "default_preset": "hotspot",
+  "presets": {
+    "hotspot": {
+      "description": "Clickable pulsing circles positioned on an image or scene — each hotspot expands on hover/click to reveal a label card with title, description, and optional media",
+      "layout": {
+        "layout": "spatial",
+        "atoms": "_relative _w-full _overflow-hidden _rounded-lg"
+      }
+    },
+    "label": {
+      "description": "Positioned text labels with speech-bubble tails pointing to annotated elements — labels are always visible and can be dragged to reposition in edit mode",
+      "layout": {
+        "layout": "spatial",
+        "atoms": "_relative _w-full _overflow-hidden _rounded-lg"
+      }
+    },
+    "measurement": {
+      "description": "SVG line overlays with distance and area annotations — endpoints are draggable, measurement text updates in real-time as lines are adjusted",
+      "layout": {
+        "layout": "spatial",
+        "atoms": "_relative _w-full _overflow-hidden _rounded-lg"
+      }
+    },
+    "compare": {
+      "description": "A/B comparison slider splitting the view with a draggable vertical divider — shows before image on the left and after image on the right, with a handle for scrubbing",
+      "layout": {
+        "layout": "spatial",
+        "atoms": "_relative _w-full _overflow-hidden _rounded-lg"
+      }
+    }
+  },
+  "visual_brief": "A full-bleed container holding an image or scene as the base layer, with interactive annotation elements positioned absolutely on top using percentage-based coordinates (so annotations scale with the image). In hotspot mode: each hotspot is a 24px circle with a 2px solid accent-colored border and a translucent accent fill (10% opacity). A pulsing ring animation radiates outward (scale 1→2, opacity 1→0, 2s infinite) creating a radar-ping effect that draws attention. On hover, the hotspot scales to 1.2x with a 150ms ease-out transition. On click, a label card expands from the hotspot position: a rounded-lg surface (d-surface, shadow-lg, min-w-48, max-w-72, p-3) with a small 8px triangular tail/caret pointing from the card toward the hotspot center. The card contains: a title (text-sm, font-semibold), a description (text-xs, text-muted, line-clamp-3), and an optional thumbnail image (rounded-md, w-full, aspect-video, object-cover). The card enters with scale(0.8)→scale(1) + opacity 0→1 over 200ms spring. Clicking elsewhere or pressing Escape closes the card. Multiple hotspots can exist simultaneously; only one card is open at a time. In label mode: each annotation is a positioned speech-bubble card (d-surface, rounded-lg, shadow-md, p-2, text-xs). The card has a triangular tail (8px CSS triangle) pointing toward the annotated point. A thin line (1px, muted color) connects the tail tip to the exact annotated coordinate on the image. Labels are always visible (not hidden behind hotspots). In edit mode, labels can be dragged to reposition — a drag handle icon appears on hover. In measurement mode: SVG lines overlay the image. Each measurement consists of two endpoint circles (8px, filled accent) connected by a solid line (2px, accent color). At the midpoint of the line, a text element shows the measurement value ('142px', '3.2m', etc.) in a small pill (bg-surface, rounded-full, px-2, text-xs, font-mono, shadow-sm). Endpoints are draggable — as they move, the measurement text updates in real-time. Lines can be straight (distance) or form closed polygons (area). In compare mode: the container is split vertically. Left side shows the 'before' image, right side shows the 'after' image. A vertical divider line (2px, bg-accent) separates them, with a circular handle (32px, bg-surface, shadow-lg, border-2 border-accent) at its center. The handle is draggable left/right, clipping each image accordingly using clip-path. Two small labels ('Before' / 'After') appear at the top of each side in muted text. The divider defaults to 50% and can be scrubbed from 0% to 100%. ZoomControls appear in the bottom-right: a vertical stack of icon buttons (zoom-in, zoom-out, fit-to-view, each 32px circle, bg-surface, shadow-md). Pinch-to-zoom and scroll-to-zoom are also supported. The zoom applies a CSS transform: scale() to the entire annotation canvas, with transform-origin at the pinch/scroll center point.",
+  "layout_hints": {
+    "container": "block, aspect-ratio matches source image",
+    "note": "The AnnotationCanvas should match the source image's aspect ratio. All annotation positions use percentage coordinates (x: 0-100, y: 0-100) so they scale correctly when the container resizes. In responsive layouts, ensure the container width is fluid but the aspect ratio is preserved.",
+    "positioning": "Annotations use position: absolute with left/top as percentages. Transform: translate(-50%, -50%) centers the annotation on its coordinate point.",
+    "z_ordering": "Image layer: z-index 0. Measurement lines: z-index 1. Hotspots: z-index 2. Labels/Cards: z-index 3. ZoomControls: z-index 4. Compare divider: z-index 5.",
+    "zoom_bounds": "Zoom range: 0.5x to 4x. Default: 1x (fit to container). When zoomed in, the canvas becomes pannable via drag."
+  },
+  "default_layout": {
+    "layout": "spatial",
+    "atoms": "_relative _w-full _overflow-hidden _rounded-lg _bg-muted",
+    "slots": {
+      "annotation-canvas": "The root container wrapping the image and all annotation layers. Position: relative. Overflow: hidden. Border-radius: rounded-lg. The canvas applies CSS transform: scale(var(--zoom-level, 1)) with transition: transform 200ms ease-out for smooth zoom. Transform-origin dynamically set to the last zoom interaction point. The canvas contains three layers in order: (1) ImageLayer — the base image as an <img> or background-image, width: 100%, height: auto, object-fit: contain, pointer-events: none. (2) SVG overlay — a full-size SVG (position: absolute, inset: 0, width: 100%, height: 100%) containing measurement lines and hotspot pulse animations. (3) HTML annotation layer — position: absolute, inset: 0, containing Hotspot and AnnotationLabel elements positioned via percentage-based left/top.",
+      "hotspot": "Repeating slot — one per annotation point. A 24px circle (position: absolute, left/top as percentage, transform: translate(-50%, -50%)). The circle has: background: var(--d-accent) at 10% opacity, border: 2px solid var(--d-accent), border-radius: 50%, cursor: pointer. A ::after pseudo-element creates the pulse ring animation (position: absolute, inset: -4px, border: 2px solid var(--d-accent), border-radius: 50%, animation: pulse-ring 2s ease-out infinite). On hover: scale(1.2), background opacity increases to 20%, transition 150ms. On click: the hotspot triggers the opening of its associated AnnotationLabel card. The hotspot has a data-annotation-id attribute linking it to its label content. Active (expanded) hotspot: background opacity 30%, border-width 3px.",
+      "annotation-label": "A floating card that appears when a hotspot is clicked or always visible in label mode. Structure: d-surface container (position: absolute, rounded-lg, shadow-lg, p-3, min-w-48, max-w-72, z-index: 3). The card has a triangular tail (8×8px CSS border-triangle) on the edge closest to the associated hotspot. Tail direction is computed dynamically — if the hotspot is near the top of the canvas, the tail points up and the card appears below, and vice versa for all four directions. Card content: title (text-sm, font-semibold, mb-1), description (text-xs, text-muted, line-clamp-3), optional image (rounded-md, w-full, aspect-video, object-cover, mt-2). A small close button (16px, X icon, absolute top-right) dismisses the card in hotspot mode. In label mode, the card is always visible and has a thin connector line (1px, dashed, muted) from the tail tip to the annotation coordinate.",
+      "measurement-line": "Repeating slot — one per measurement. Rendered in the SVG overlay layer. Each measurement consists of: two circle endpoints (r: 4, fill: var(--d-accent), cursor: grab), a connecting line (stroke: var(--d-accent), stroke-width: 2, stroke-linecap: round), and a midpoint text label. The text label is a foreignObject containing a small pill (bg-surface, rounded-full, px-2 py-0.5, text-xs, font-mono, shadow-sm) showing the measurement value. Endpoints have hover state (r: 6, fill-opacity: 0.8) and are draggable — on drag, the line and label update in real-time. For polygon measurements (area), endpoints connect in sequence and the final endpoint connects back to the first, with a filled polygon (accent color at 5% opacity) showing the enclosed area. Area measurement displayed at the polygon centroid.",
+      "compare-slider": "A full-size overlay for A/B comparison. Two images (before and after) are stacked, each position: absolute, inset: 0, width: 100%, height: 100%, object-fit: contain. The 'after' image uses clip-path: inset(0 0 0 var(--split-position)) to reveal only the right portion. A vertical divider line (position: absolute, top: 0, bottom: 0, left: var(--split-position), width: 2px, bg-accent) marks the split. Centered on the divider: a circular handle (32px diameter, bg-surface, border: 2px solid var(--d-accent), shadow-lg, rounded-full, cursor: ew-resize, z-index: 5). The handle contains a left-right arrow icon (16px). Dragging the handle updates --split-position (0% to 100%) in real-time. Two labels ('Before' / 'After') in text-xs, font-medium, text-muted, bg-surface/80%, px-2 py-0.5, rounded sit at the top-left and top-right of their respective sides.",
+      "zoom-controls": "A vertical stack of icon buttons anchored to the bottom-right of the canvas (position: absolute, bottom: 12px, right: 12px, z-index: 4). Three buttons stacked vertically with gap-1: zoom-in (+ icon), zoom-out (- icon), fit-to-view (expand icon). Each button: 32px circle, bg-surface, border, shadow-md, rounded-full, cursor: pointer. Hover: bg-accent/10%, scale(1.05). Active: scale(0.95). Zoom-in increases scale by 0.25 (max 4x). Zoom-out decreases by 0.25 (min 0.5x). Fit-to-view resets to scale(1). A small zoom level badge (text-xs, font-mono, bg-surface, rounded, px-1) appears above the buttons showing current zoom ('1.5x') — visible only when zoom is not 1x."
+    }
+  },
+  "accessibility": {
+    "role": "img",
+    "aria-label": "Annotated image with interactive markers",
+    "announcements": [
+      "Annotation: {title} at position {x}%, {y}%",
+      "Opened annotation: {title} — {description}",
+      "Closed annotation: {title}",
+      "Measurement: {value} between point A and point B",
+      "Zoom level: {level}x",
+      "Comparison slider at {position}%"
+    ],
+    "keyboard": [
+      "Tab: cycle through hotspots/annotations in DOM order",
+      "Enter/Space: open annotation card for focused hotspot",
+      "Escape: close open annotation card",
+      "Arrow keys: nudge annotation position in edit mode (1% per keypress)",
+      "+/-: zoom in/out",
+      "0: reset zoom to fit",
+      "Left/Right arrows: move compare slider (when focused) by 5% increments"
+    ]
+  },
+  "responsive": {
+    "mobile": "Hotspot size increases to 32px for touch targets. Label cards render full-width at the bottom of the canvas (sheet-style) instead of positioned near the hotspot. Measurement endpoints increase to 12px radius for touch. Compare slider handle increases to 44px. Zoom controls stack horizontally at bottom-center. Pinch-to-zoom supported natively.",
+    "tablet": "Hotspots at 28px. Label cards positioned near hotspots with dynamic tail direction. Full measurement interactivity with touch. Compare slider at standard 32px handle. Zoom via pinch and button controls."
+  },
+  "motion": {
+    "micro": {
+      "hotspot-hover": "scale(1.2) + bg-opacity increase, 150ms ease-out",
+      "zoom-button-hover": "scale(1.05) + bg-accent/10%, 150ms ease-out",
+      "compare-handle-hover": "scale(1.1) + shadow-elevation, 150ms"
+    },
+    "transitions": {
+      "label-open": "scale(0.8→1) + opacity(0→1), 200ms cubic-bezier(0.34, 1.56, 0.64, 1)",
+      "label-close": "scale(1→0.9) + opacity(1→0), 150ms ease-in",
+      "zoom-change": "transform: scale() 200ms ease-out",
+      "compare-slide": "clip-path update at 60fps (no transition — immediate for responsiveness)"
+    },
+    "ambient": {
+      "hotspot-pulse": "ring scale(1→2) + opacity(1→0), 2s ease-out infinite — radar ping effect",
+      "measurement-endpoint-idle": "subtle opacity oscillation (0.7→1→0.7) 3s ease-in-out infinite when not being dragged"
+    }
+  },
+  "interactions": [
+    "hover-tooltip",
+    "animate-on-mount",
+    "pan-background"
+  ],
+  "composition": {
+    "ARAnnotation": "Canvas(d-section, relative, overflow-hidden, rounded-lg) > [ImageLayer + SVGOverlay + AnnotationLayer + ZoomControls]",
+    "ImageLayer": "Img(absolute, inset-0, w-full, h-full, object-contain, pointer-events-none)",
+    "SVGOverlay": "SVG(absolute, inset-0, w-full, h-full) > [MeasurementLine* + HotspotPulseRing*]",
+    "AnnotationLayer": "Div(absolute, inset-0) > [Hotspot*(d-interactive, positioned-%) + AnnotationLabel*(d-surface, positioned)]",
+    "Hotspot": "Div(absolute, 24px, circle, accent-border, pulsing) > ClickHandler → AnnotationLabel",
+    "AnnotationLabel": "Surface(d-surface, rounded-lg, shadow-lg, p-3) > [Title + Description + Image? + CloseButton?]",
+    "MeasurementLine": "SVG-Group > [Endpoint*(circle, draggable) + Line(stroke) + MidpointLabel(foreignObject, pill)]",
+    "CompareSlider": "Div(absolute, inset-0) > [BeforeImg + AfterImg(clipped) + Divider(vertical, accent) + Handle(circle, draggable)]",
+    "ZoomControls": "Stack(absolute, bottom-right, gap-1) > [ZoomIn + ZoomOut + FitToView] + ZoomBadge?"
+  }
+}

package/patterns/arrangement-canvas.json

@@ -0,0 +1,72 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "arrangement-canvas",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Arrangement Canvas",
+  "description": "Multi-track audio arrangement canvas with stem rows, waveform regions, automation lanes, beat grid, markers, collaborator cursors, and a moving playhead.",
+  "category": "music",
+  "tags": ["2026", "music", "daw", "arrangement", "waveform", "automation", "timeline"],
+  "components": ["TimeRuler", "StemTrackRow", "WaveformRegion", "AutomationLane", "BeatGrid", "MarkerFlag", "Playhead", "CollaboratorCursor"],
+  "default_preset": "session",
+  "presets": {
+    "session": {
+      "description": "Full arrangement editor for active production sessions with timeline ruler, stem rows, regions, automation lanes, and collaborator cursors",
+      "layout": { "layout": "stack", "atoms": "_relative _w-full _bg-surface _border _overflow-hidden" }
+    },
+    "preview": {
+      "description": "Read-only public preview of the arrangement canvas, suitable for marketing and showcase first viewports",
+      "layout": { "layout": "stack", "atoms": "_relative _w-full _bg-surface _border" }
+    }
+  },
+  "visual_brief": "A serious commercial DAW arrangement view. A sticky time ruler spans the top with bar numbers, beat subdivisions, and section markers. Each track row has a compact fixed left header with stem color, name, mute/solo/arm controls, gain readout, and selected state. Timeline regions are clipped waveform blocks aligned to the beat grid, with subtle depth and no decorative glow overload. Automation lanes use fine amber/cyan curves with node points under selected rows. Marker flags identify Intro, Verse, Hook, Drop, and Bridge. The playhead is precise and spans every track. Collaborator cursors appear as named flags with thin vertical guides. The canvas must feel like the main product, not a placeholder chart.",
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_relative _w-full _bg-surface _border _overflow-hidden",
+    "slots": {
+      "time-ruler": "Top ruler with bar numbers, beat ticks, loop range, and marker flags.",
+      "track-stack": "Stack of stem rows. Each row preserves a fixed header plus horizontally scrollable timeline region.",
+      "waveform-region": "Colored clip blocks with waveform bars, trim handles, fade handles, and clip names.",
+      "automation-lane": "Attached lane showing parameter curve and draggable node points.",
+      "collaboration-layer": "Playhead and named collaborator cursors share the same time coordinate system."
+    }
+  },
+  "composition": {
+    "ArrangementCanvas": "Root(application) > [TimeRuler + TrackStack + CollaborationLayer]",
+    "TrackStack": "Stack > StemTrackRow*",
+    "StemTrackRow": "Grid(track-header timeline) > [StemHeader + TimelineArea]",
+    "TimelineArea": "Relative > [BeatGrid + WaveformRegion* + AutomationLane? + Playhead + CollaboratorCursor*]"
+  },
+  "motion": {
+    "micro": {
+      "region-select": "selected region gains border glow and subtle lift in 120ms",
+      "automation-node-drag": "curve updates at pointer speed"
+    },
+    "ambient": {
+      "playhead": "playhead advances smoothly during playback",
+      "collaborator-cursors": "remote cursors ease to new positions within 160ms"
+    }
+  },
+  "interactions": ["click-select", "drag-nodes", "hover-tooltip", "real-time-updates", "keyboard-navigation", "pan-background", "zoom-scroll"],
+  "responsive": {
+    "mobile": {
+      "layout": "alternate-pattern",
+      "alternate_pattern_id": "arrangement-canvas",
+      "horizontal_scroll": true,
+      "hide_components": ["automation-lane-expanded", "secondary-markers"],
+        "notes": "Use horizontal timeline scroll with stable track row heights and fixed headers where possible. Keep transport and selected stem inspector available. Do not compress waveform regions until labels become unreadable."
+      },
+    "desktop": "Render full time ruler, fixed stem headers, visible automation lanes, markers, and collaborator cursors."
+  },
+  "accessibility": {
+    "role": "application",
+    "aria-label": "Audio arrangement canvas",
+    "keyboard": ["Space: play or pause", "Left/Right: nudge playhead", "M/S/R: mute, solo, or arm focused stem", "Delete: remove selected region", "A: toggle automation lane"],
+    "announcements": ["Selected region {name}", "Playhead at bar {bar}", "Automation node moved to {value}"]
+  },
+  "layout_hints": {
+    "temporal_alignment": "Every visual layer must align to one shared time grid.",
+    "mobile_survival": "Do not collapse the DAW into unreadable columns; allow intentional horizontal scroll and panel switching.",
+    "producer_signal": "The canvas should immediately read as an audio production tool, not a generic kanban or table."
+  }
+}

package/patterns/ascii-chart.json

@@ -0,0 +1,138 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "ascii-chart",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "ASCII Chart",
+  "description": "ASCII and braille character-based charts for terminal-style data visualization.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {
+      "terminal": "^1.0.0"
+    },
+    "requires_core": {
+      "components": [],
+      "charts": []
+    }
+  },
+  "components": ["Text", "Container"],
+  "default_preset": "line",
+  "presets": {
+    "line": {
+      "description": "ASCII line chart with labeled axes, dot-and-dash data points, and optional series legend",
+      "components": [],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _mono _fggreen",
+        "slots": {
+          "title": "Chart title",
+          "chart": "ASCII line visualization",
+          "legend": "Series legend",
+          "axes": "X/Y axis labels"
+        }
+      }
+    },
+    "bar": {
+      "description": "Horizontal ASCII bar chart using block fill characters with value labels and color legend",
+      "components": [],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _mono _fggreen",
+        "slots": {
+          "title": "Chart title",
+          "bars": "Horizontal bar entries",
+          "legend": "Color/pattern legend"
+        }
+      }
+    },
+    "sparkline": {
+      "description": "Inline sparkline using braille characters",
+      "components": [],
+      "layout": {
+        "layout": "inline",
+        "atoms": "_inline _mono _fggreen",
+        "slots": {
+          "sparkline": "Braille character visualization"
+        }
+      }
+    },
+    "braille": {
+      "description": "High-resolution braille dot matrix chart",
+      "components": [],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _mono _fggreen",
+        "slots": {
+          "title": "Chart title",
+          "chart": "Braille dot visualization",
+          "axes": "Axis labels"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col _mono _fggreen",
+    "slots": {
+      "title": "Chart title",
+      "chart": "ASCII visualization",
+      "legend": "Color/symbol legend",
+      "axes": "X/Y axis labels"
+    }
+  },
+  "features": [
+    "realtime-updates",
+    "multiple-series",
+    "configurable-dimensions",
+    "time-based-axis",
+    "value-labels"
+  ],
+  "character_sets": {
+    "blocks": [
+      "█",
+      "▓",
+      "▒",
+      "░",
+      " "
+    ],
+    "braille": "U+2800 to U+28FF",
+    "lines": [
+      "_",
+      ".",
+      "-",
+      "~",
+      "^",
+      "*",
+      "|"
+    ]
+  },
+  "visual_brief": "Monospace terminal-style chart rendered entirely with ASCII and braille characters on a dark or transparent background. Green-on-dark color scheme by default. Line preset draws axes with pipe and dash characters, data points with dots and asterisks connected by line-drawing characters. Bar preset renders horizontal bars using block characters (full, three-quarter, half, quarter fills). Sparkline preset is a single inline row of braille dots. All presets include a chart title at top and axis labels along edges.",
+  "responsive": {
+    "mobile": "Chart width scales to container. Character count per row reduces. Sparkline preset preferred for inline metrics. Legend moves below chart.",
+    "tablet": "Standard chart dimensions. Side legend if space allows.",
+    "desktop": "Full-width charts with generous character grids. Legend renders beside the chart area."
+  },
+  "layout_hints": {
+    "chart_role": "This pattern is a terminal-native data summary. Keep labels, legend, and plot tightly coupled so the user reads it as one instrument rather than as styled text blocks.",
+    "character_density": "Preserve legibility of the character grid before adding extra annotations. On smaller widths, reduce series density rather than cramming more glyphs.",
+    "sparkline_use": "Sparkline mode should act as supportive inline telemetry, not as the primary analytical surface."
+  },
+  "motion": {
+    "micro": "Realtime updates may redraw or pulse subtly to indicate fresh data, but the chart should remain readable and stable.",
+    "transitions": "Data changes should feel like continuous terminal output rather than animated infographic motion."
+  },
+  "interactions": [
+    "animate-on-mount",
+    "real-time-updates"
+  ],
+  "accessibility": {
+    "role": "img",
+    "aria-label": "ASCII chart",
+    "keyboard": [
+      "If the chart is interactive, keyboard focus should move to the chart summary or legend rather than each individual glyph."
+    ],
+    "announcements": [
+      "Expose chart title, series names, and key value summaries semantically so the visualization is not dependent on character art alone."
+    ]
+  }
+}