@decantr/content 3.8.0

package/patterns/relationship-graph.json

@@ -0,0 +1,127 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "relationship-graph",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Relationship Graph",
+  "description": "Network graph visualizing entity relationships such as contacts, companies, and deals with force-directed, radial, and timeline layout presets, labeled edges, and interactive exploration.",
+  "category": "data-visualization",
+  "tags": [
+    "2026",
+    "data-visualization",
+    "graph",
+    "network",
+    "relationships",
+    "entities",
+    "crm"
+  ],
+  "components": [
+    "GraphCanvas",
+    "EntityNode",
+    "RelationshipEdge",
+    "DetailCard",
+    "SearchOverlay",
+    "FilterPanel"
+  ],
+  "default_preset": "network",
+  "presets": {
+    "network": {
+      "description": "Force-directed network layout where entities cluster organically based on relationship strength — highly connected entities gravitate toward the center, peripheral entities drift outward",
+      "layout": {
+        "layout": "spatial",
+        "atoms": "_relative _wfull _hfull _overflow-hidden"
+      }
+    },
+    "radial": {
+      "description": "Radial layout placing the selected focus entity at the center with concentric rings for first-degree, second-degree, and third-degree connections radiating outward",
+      "layout": {
+        "layout": "spatial",
+        "atoms": "_relative _wfull _hfull _overflow-hidden"
+      }
+    },
+    "timeline": {
+      "description": "Horizontal timeline layout where relationships are plotted along a time axis showing when connections were established — entities appear as nodes above and below the axis connected by vertical lines to their creation date",
+      "layout": {
+        "layout": "spatial",
+        "atoms": "_relative _wfull _hfull _overflow-x-auto"
+      }
+    }
+  },
+  "visual_brief": "Force-directed network graph on a clean canvas where entities appear as distinct node shapes: people are circular avatars (48px diameter) showing initials or a photo with a colored ring indicating entity type (blue for contacts, teal for team members), companies are rounded squares (48px) with a building icon or logo and a gray border, and deals are diamond-shaped nodes (40px) with a dollar icon colored by deal stage (green for won, amber for active, red for lost). Edges connecting entities are thin curved lines with a small text label at the midpoint describing the relationship type ('reports to', 'invested in', 'closed deal', 'referred by'). Edge thickness scales with relationship strength or recency — thicker lines for stronger or more recent connections. Selecting an entity smoothly animates it to the visual center and fans out its direct connections in a radial arrangement while fading distant unrelated nodes to 15% opacity. The radial preset places the focus entity at an exact center point with concentric dashed rings at equal intervals for 1st, 2nd, and 3rd degree connections. Colors consistently encode entity type across all presets. A search overlay in the top-left provides type-ahead entity search. An optional filter panel on the left edge allows filtering by entity type, relationship type, and date range. A detail card appears on the right when an entity is selected, showing the entity's full profile info, a list of relationships, and recent activity.",
+  "default_layout": {
+    "layout": "spatial",
+    "atoms": "_relative _wfull _hfull _overflow-hidden",
+    "slots": {
+      "search-overlay": "Top-left floating search input (280px wide) with type-ahead suggestions. As the user types, matching entity nodes highlight on the canvas and suggestions appear in a dropdown list. Selecting a suggestion centers and selects that entity. The search input has a subtle frosted-glass background.",
+      "filter-panel": "Optional collapsible left-side panel (240px wide) with filter controls: entity type checkboxes (People, Companies, Deals), relationship type multi-select, date range picker for filtering by relationship creation date, and a relationship strength minimum slider. Applied filters dim non-matching nodes and edges rather than removing them entirely.",
+      "graph-canvas": "Main rendering area filling the container. Supports pan (drag background), zoom (scroll/pinch), and node dragging (click-drag a node to reposition it within the force simulation). Renders a subtle dot-grid background. All entity nodes and relationship edges are positioned within this canvas.",
+      "entity-node": "Repeating slot — one per entity. Shape depends on entity type: circle for people (with avatar/initials), rounded square for companies (with icon/logo), diamond for deals (with stage icon). Each node shows the entity name below it in 12px text. A colored ring or border indicates type. Hovering shows a tooltip with key info (title, company, deal value). Double-clicking opens the detail card.",
+      "relationship-edge": "Repeating slot — one per relationship. Curved SVG path connecting two entity nodes. A small rotated text label at the path midpoint describes the relationship. Edge color is a muted neutral by default but shifts to the source entity's type color on hover. Thickness scales from 1px (weak) to 4px (strong). Hovering an edge highlights both connected nodes.",
+      "detail-card": "Right-side card (320px wide) that appears when an entity is selected. Header shows entity avatar/icon, name, and type badge. Body contains: key details section (title, email, phone for contacts; industry, size for companies; value, stage, probability for deals), a relationships list showing all connected entities as clickable rows, and a recent activity feed with timestamped events."
+    }
+  },
+  "responsive": {
+    "mobile": "Graph canvas fills the viewport with touch pan and pinch zoom. Entity nodes render at reduced size (36px). Edge labels hidden by default (shown on tap). Search overlay is a floating action button that expands to full-width search. Filter panel opens as a bottom sheet. Detail card opens as a full-screen overlay.",
+    "tablet": "Standard graph layout with touch support. Entity nodes at full size. Search overlay visible. Filter panel as a collapsible sidebar. Detail card slides in from the right at 300px width.",
+    "desktop": "Full interactive graph with hover tooltips, drag-to-reposition nodes, and smooth force simulation. Search overlay and filter panel visible simultaneously. Detail card opens as a side panel without obscuring the graph. Zoom controls in the corner."
+  },
+  "layout_hints": {
+    "graph_priority": "Entity relationships should be readable before peripheral controls. Search, filters, and detail panels support the network read but should not dominate it.",
+    "focus_logic": "When one entity is selected, the graph should clearly pivot around that entity so the user understands why other nodes are being emphasized or dimmed.",
+    "detail_attachment": "The side detail card should feel connected to the selected node and relationship context, not like a generic profile panel detached from the graph."
+  },
+  "motion": {
+    "micro": {
+      "node-hover": "scale(1→1.15) + ring-glow 150ms ease-out",
+      "edge-hover": "opacity 0.3→1 + thickness increase 150ms ease-out"
+    },
+    "transitions": {
+      "focus-entity": "selected node translates to center + connected nodes fan out radially 500ms ease-in-out",
+      "unfocus": "nodes return to force-directed positions 400ms ease-out",
+      "detail-open": "translateX(100%→0) 300ms ease-out",
+      "filter-apply": "non-matching nodes opacity 1→0.15 300ms ease-out"
+    },
+    "ambient": {
+      "force-settle": "nodes drift gently as force simulation converges, continuous",
+      "connection-pulse": "subtle opacity pulse on edges of selected entity 3s ease-in-out infinite"
+    }
+  },
+  "interactions": [
+    "drag-nodes",
+    "pan-background",
+    "zoom-scroll",
+    "click-select",
+    "hover-tooltip",
+    "animate-on-mount"
+  ],
+  "composition": {
+    "RelationshipGraph": "Container(d-section, spatial) > [SearchOverlay(d-control) + FilterPanel?(d-surface)] + GraphCanvas > EntityNode*(d-interactive) + RelationshipEdge* + DetailCard?(d-surface)",
+    "GraphCanvas": "Canvas(d-data, pannable, zoomable, dot-grid-bg) > [RelationshipEdge* + EntityNode*]",
+    "EntityNode": "Node(d-interactive, shape: entityType, color: typeColor) > [Avatar|Icon + NameLabel(d-annotation)]",
+    "RelationshipEdge": "Edge(d-data, curved, labeled) > [PathLine + MidpointLabel(d-annotation)]",
+    "DetailCard": "Panel(d-surface, slide-right) > [Header > [EntityAvatar + Name + TypeBadge] + Details(d-data) + RelationshipList + ActivityFeed]",
+    "SearchOverlay": "Overlay(d-control, top-left, frosted) > [SearchInput + SuggestionList?]"
+  },
+  "accessibility": {
+    "role": "img",
+    "aria-label": "Entity relationship network graph",
+    "keyboard": [
+      "Tab: cycle focus between entity nodes",
+      "Enter: select focused entity and open detail card",
+      "Escape: deselect entity and close detail card",
+      "Arrow keys: pan the graph canvas",
+      "Plus/Minus: zoom in/out",
+      "S: focus the search overlay input",
+      "F: toggle the filter panel",
+      "R: switch to radial layout centered on selected entity",
+      "0: reset zoom to fit all entities"
+    ],
+    "announcements": [
+      "Entity: {name}, {type}, {connectionCount} connections",
+      "Relationship: {entity1} {relationshipType} {entity2}",
+      "Detail card opened for {name}",
+      "Filter applied: showing {count} of {total} entities",
+      "View centered on {name} with {degree}-degree connections visible"
+    ]
+  }
+}

package/patterns/remote-cursor.json

@@ -0,0 +1,103 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "remote-cursor",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Remote Cursor",
+  "description": "Real-time cursor indicator for collaborators with name label and smooth interpolation. Shows where other users are editing.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [],
+      "charts": []
+    }
+  },
+  "components": ["Avatar", "Text", "Container"],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Cursor with name label positioned below",
+      "components": [],
+      "layout": {
+        "layout": "absolute",
+        "atoms": "_absolute _pointer[none] _z[100]",
+        "slots": {
+          "cursor": "SVG cursor icon in user's presence color",
+          "label": "Name tag with colored background"
+        }
+      }
+    },
+    "minimal": {
+      "description": "Cursor only without name label",
+      "components": [],
+      "layout": {
+        "layout": "absolute",
+        "atoms": "_absolute _pointer[none] _z[100]",
+        "slots": {
+          "cursor": "SVG cursor icon only"
+        }
+      }
+    },
+    "extended": {
+      "description": "Extended cursor with small avatar thumbnail beside the name tag for richer collaborator presence",
+      "components": [
+        "Avatar"
+      ],
+      "layout": {
+        "layout": "absolute",
+        "atoms": "_absolute _pointer[none] _z[100]",
+        "slots": {
+          "cursor": "SVG cursor icon",
+          "avatar": "Small avatar image",
+          "label": "Name on hover"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "absolute",
+    "atoms": "_absolute _pointer[none] _z[100]",
+    "slots": {
+      "cursor": "SVG cursor icon in user's presence color",
+      "label": "Name tag with colored background",
+      "caret": "Optional text caret for typing position"
+    }
+  },
+  "io": {
+    "consumes": [
+      "user",
+      "position"
+    ],
+    "produces": [],
+    "actions": []
+  },
+  "visual_brief": "Small SVG cursor icon colored in the collaborator's assigned presence color, positioned absolutely over the document at the collaborator's cursor location. A name tag label extends from the cursor top-right, styled as a small rounded badge with the user's name in white text on a colored background matching the cursor color. The cursor animates smoothly between positions using CSS transitions. The minimal preset shows only the colored caret line without the name tag. The extended preset adds a small avatar thumbnail beside the name tag. Multiple cursors coexist independently on the same document.",
+  "responsive": {
+    "mobile": "Cursors render smaller. Name tags use abbreviated first names. Extended preset falls back to minimal to save space.",
+    "tablet": "Standard cursor size and name tags.",
+    "desktop": "Full cursor visualization with smooth interpolation, name tags, and optional avatar in extended preset."
+  },
+  "layout_hints": {
+    "cursor_priority": "Location comes first, identity second. The cursor itself should remain the primary anchor, with labels supporting it without obscuring the document.",
+    "multi_cursor_readability": "When multiple cursors are present, keep labels compact and offset enough that collaborators do not visually collide into an unreadable cluster.",
+    "mobile_fallback": "On smaller screens, favor positional clarity over rich identity chrome so collaborative awareness remains useful without taking over the document."
+  },
+  "motion": {
+    "micro": "Cursor movement and label emphasis should remain smooth and subtle, reinforcing presence rather than drawing theatrical attention.",
+    "transitions": "Position interpolation should preserve locality and document context; avoid laggy or overshooting motion that makes collaboration feel imprecise."
+  },
+  "interactions": [
+    "animate-on-mount"
+  ],
+  "accessibility": {
+    "role": "status",
+    "aria-label": "Remote collaborator cursor",
+    "keyboard": [
+      "If collaborator presence is inspectable, keyboard access should move through presence summaries rather than attempting to focus every cursor overlay directly."
+    ],
+    "announcements": [
+      "Collaborator name and active editing position should be exposed semantically so remote presence remains understandable without the visual cursor overlay alone."
+    ]
+  }
+}

package/patterns/render-queue.json

@@ -0,0 +1,102 @@
+{
+  "id": "render-queue",
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Render Queue",
+  "description": "Queue of AI generation jobs displaying status, progress, thumbnails, and cancel/retry actions for video and image rendering workflows.",
+  "category": "media",
+  "tags": ["2026", "media", "queue", "ai", "rendering", "jobs", "async"],
+  "components": ["RenderJob", "ProgressBar", "StatusBadge", "ThumbnailPreview", "CancelButton", "RetryButton"],
+  "default_preset": "list",
+  "presets": {
+    "list": {
+      "description": "Detailed row-per-job listing with thumbnail, prompt preview, progress bar, status badge, and action buttons for active monitoring",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _flex-col _gap-2 _p-4 _w-full _bg-surface"
+      }
+    },
+    "compact": {
+      "description": "One-line compressed view showing status icon, name, and percentage for dense monitoring dashboards and sidebars",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _flex-col _gap-1 _p-2 _w-full"
+      }
+    },
+    "cards": {
+      "description": "Visual card grid emphasizing thumbnails with progress overlay, ideal for creative review and gallery-style queue browsing",
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _grid-cols-3 _gap-4 _p-4 _w-full"
+      }
+    }
+  },
+  "visual_brief": "Vertical list of render job rows. Each row has a 64x64px thumbnail preview on the left (rounded 8px, shows final output for complete jobs or skeleton shimmer for queued, with animated generation artifacts for rendering). Middle section has job name in semibold 14px type and prompt preview in 12px muted text with 1-line truncate. Progress bar below middle section is 4px tall with animated accent-color fill that shimmers while active. Percentage text (e.g. '67%') appears above the bar right-aligned. Status badge on right edge shows one of: queued (gray clock icon), rendering (blue spinning icon), complete (green check), failed (red x icon). Action area far right: cancel button (X icon) visible during queued/rendering states, retry button (refresh icon) visible on failed state, download button (arrow down) visible on complete state. Failed jobs have subtle red left border accent. Complete jobs get a soft success glow on row.",
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _flex-col _gap-2 _p-4 _w-full _bg-surface",
+    "slots": {
+      "job-row": "Repeating row (d-surface, data-interactive) representing a single render job. Horizontal flex layout with fixed-size thumbnail, flexible info column, fixed-width status and actions.",
+      "thumbnail-preview": "64x64px rounded preview image on left. Shows final output for complete jobs, loading shimmer for queued, animated preview frames for rendering, error icon for failed.",
+      "job-info": "Center column with job name (semibold 14px) and prompt preview (12px muted, single line with ellipsis truncation).",
+      "progress-bar": "4px tall bar below job info. Fill width animates to match percentage. Accent color with shimmer gradient during active rendering. Hidden when complete or failed.",
+      "status-badge": "Icon + label badge showing current state. Colors: queued=neutral, rendering=primary+animated, complete=success, failed=destructive.",
+      "action-buttons": "Right-edge action cluster. Cancel (X) for active jobs, Retry (refresh) for failed, Download (arrow) for complete."
+    }
+  },
+  "responsive": {
+    "mobile": "Thumbnail reduces to 48px. Prompt preview hidden. Action buttons collapse into kebab menu. Status badge shows icon only.",
+    "tablet": "Standard list layout with full metadata. Cards preset shows 2 columns.",
+    "desktop": "Full layout with all columns visible. Cards preset shows 3-4 columns."
+  },
+  "layout_hints": {
+    "queue_priority": "Job status and progress should be the first read, followed by preview and actions. The queue should help operators understand what is blocked, running, or complete at a glance.",
+    "row_consistency": "Queued, active, failed, and complete jobs should preserve the same row structure so status differences feel semantic rather than like different components.",
+    "cards_variant": "Card mode should remain clearly a queue view, not drift into a generic media gallery. Progress and status must stay visible."
+  },
+  "layout_hints": {
+    "queue_priority": "Job status and progress should be the first read, followed by preview and actions. The queue should help operators understand what is blocked, running, or complete at a glance.",
+    "row_consistency": "Queued, active, failed, and complete jobs should preserve the same row structure so status differences feel semantic rather than like different components.",
+    "cards_variant": "Card mode should remain clearly a queue view, not drift into a generic media gallery. Progress and status must stay visible."
+  },
+  "motion": {
+    "micro": {
+      "progress-shimmer": "gradient sweep 1.5s linear infinite during rendering",
+      "status-icon-spin": "rotate 360deg 1s linear infinite for rendering status"
+    },
+    "transitions": {
+      "job-complete": "row flash green + progress bar fill to 100% 400ms ease-out",
+      "job-remove": "slide-out-right + collapse height 250ms ease-in"
+    },
+    "ambient": {
+      "queued-pulse": "opacity 0.6 to 0.9 pulse 2s ease-in-out infinite for queued jobs"
+    }
+  },
+  "interactions": [
+    "animate-on-mount"
+  ],
+  "composition": {
+    "RenderQueue": "Root(d-section, stack) > RenderJob*(d-interactive)",
+    "RenderJob": "Row(d-surface) > [ThumbnailPreview + JobInfo + ProgressBar + StatusBadge + ActionCluster]",
+    "ActionCluster": "Group > [CancelButton?(active) | RetryButton?(failed) | DownloadButton?(complete)]",
+    "CardsVariant": "Grid > JobCard*(d-surface) > [LargeThumbnail + ProgressOverlay + StatusBadge]"
+  },
+  "accessibility": {
+    "role": "list",
+    "aria-label": "Render job queue",
+    "announcements": [
+      "Job {name} started rendering",
+      "Job {name} completed",
+      "Job {name} failed: {error}",
+      "Job {name} cancelled"
+    ],
+    "keyboard": [
+      "Tab: cycle through job rows",
+      "Enter: open job detail",
+      "Delete: cancel selected job",
+      "R: retry selected failed job",
+      "D: download selected complete job"
+    ]
+  }
+}

package/patterns/rent-reminder.json

@@ -0,0 +1,140 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "rent-reminder",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Rent Reminder",
+  "description": "Payment reminder notification with contextual styling for upcoming, due today, and overdue states. Includes one-click payment action.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Button",
+        "icon",
+        "Badge"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Button",
+    "icon",
+    "Badge"
+  ],
+  "default_preset": "upcoming",
+  "presets": {
+    "upcoming": {
+      "description": "Upcoming payment reminder with blue info tint, due date countdown, and a pay-now action button",
+      "components": [
+        "Button",
+        "icon"
+      ],
+      "layout": {
+        "layout": "row",
+        "atoms": "_flex _aic _gap4 _p4 _r2 _bgPrimary/10",
+        "slots": {
+          "icon": "Calendar icon",
+          "title": "Reminder headline",
+          "amount": "Amount due",
+          "due-date": "Due date",
+          "action": "Pay now button"
+        }
+      }
+    },
+    "due-today": {
+      "description": "Due-today alert banner with warning tint, prominent amount display, and urgent pay-now action",
+      "components": [
+        "Button",
+        "icon"
+      ],
+      "layout": {
+        "layout": "row",
+        "atoms": "_flex _aic _gap4 _p4 _r2 _bgWarning/10",
+        "slots": {
+          "icon": "Alert icon",
+          "title": "Due today message",
+          "amount": "Amount due",
+          "action": "Pay now button"
+        }
+      }
+    },
+    "overdue": {
+      "description": "Overdue payment warning with destructive red tint, late fee breakdown, and days-overdue counter",
+      "components": [
+        "Button",
+        "icon"
+      ],
+      "layout": {
+        "layout": "row",
+        "atoms": "_flex _aic _gap4 _p4 _r2 _bgDanger/10",
+        "slots": {
+          "icon": "Warning icon",
+          "title": "Overdue message",
+          "amount": "Amount with late fee",
+          "days-overdue": "Days overdue",
+          "action": "Pay now button"
+        }
+      }
+    },
+    "paid": {
+      "description": "Payment confirmed success banner with green tint, checkmark icon, and payment date receipt",
+      "components": [
+        "icon"
+      ],
+      "layout": {
+        "layout": "row",
+        "atoms": "_flex _aic _gap4 _p4 _r2 _bgSuccess/10",
+        "slots": {
+          "icon": "Check icon",
+          "title": "Paid confirmation",
+          "amount": "Amount paid",
+          "date": "Payment date"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "row",
+    "atoms": "_flex _aic _gap4 _p4 _r2",
+    "slots": {
+      "icon": "Status icon",
+      "content": "Message and details",
+      "amount": "Amount",
+      "action": "Action button"
+    }
+  },
+  "visual_brief": "Notification-style card or banner with contextual coloring based on payment state. Upcoming (blue/info tint) shows a calendar icon with 'Rent due in X days', the amount, and a 'Pay Now' button. Due today (yellow/warning tint) shows an alert icon with 'Rent due today', the amount prominently, and an urgent 'Pay Now' button. Overdue (red/destructive tint) shows a warning triangle icon with 'Rent overdue by X days', the amount with late fee breakdown, and a 'Pay Now' button. Paid (green/success tint) shows a checkmark icon with 'Rent paid' and the payment date.",
+  "responsive": {
+    "mobile": "Full-width banner card. Amount text large for visibility. Pay button full-width at the bottom. Details stack vertically.",
+    "tablet": "Standard card width. All elements in a comfortable layout. Pay button inline.",
+    "desktop": "Card or inline banner. All information on one or two lines. Pay button on the right."
+  },
+  "layout_hints": {
+    "urgency_priority": "The current payment state should be instantly legible before the user reads supporting details. Amount and due status must dominate the first scan.",
+    "banner_role": "This pattern is a contextual prompt, not a full financial dashboard. Keep it concise and attach it closely to the payment or tenant context it refers to.",
+    "state_translation": "Upcoming, due, overdue, and paid variants should all preserve the same structural rhythm so the status shift feels semantic rather than like a different component."
+  },
+  "motion": {
+    "micro": "Status tint and CTA may sharpen slightly on hover. Overdue states may carry a restrained emphasis, but the reminder should remain calm and actionable.",
+    "transitions": "State changes from upcoming to due or paid should feel clear and affirmative without becoming alarming or flashy."
+  },
+  "interactions": [
+    "animate-on-mount"
+  ],
+  "accessibility": {
+    "role": "status",
+    "aria-label": "Rent reminder",
+    "keyboard": [
+      "If a pay action is present, it should be reachable immediately after the reminder content in reading order."
+    ],
+    "announcements": [
+      "Due state, amount, and payment timing should be announced together so urgency is understandable without relying on color alone."
+    ]
+  },
+  "composition": {
+    "RentReminder": "Card(d-surface, tint: status) > [StatusIcon(color: status) + ReminderContent + PayAction]",
+    "ReminderContent": "Stack(flex-col) > [Title(font-medium) + DueDate(d-annotation, mono-data) + Amount(heading3, mono-data) + Property?(text-muted)]",
+    "PayAction": "Button(d-interactive, variant: status === overdue ? destructive : primary)"
+  }
+}

package/patterns/rent-roll.json

@@ -0,0 +1,112 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "rent-roll",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Rent Roll",
+  "description": "Monthly rent summary with all units showing expected rent, collected, outstanding, and vacancy loss. Calculates totals.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Button",
+        "icon",
+        "Badge",
+        "Select"
+      ],
+      "charts": [
+        "AreaChart"
+      ]
+    }
+  },
+  "components": [
+    "Button",
+    "icon",
+    "Badge",
+    "Select"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Full rent roll with summary and table",
+      "components": [
+        "Button",
+        "icon",
+        "Badge",
+        "Select"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap6",
+        "slots": {
+          "header": "Month selector, export button",
+          "summary": "Expected rent, collected, outstanding, vacancy loss cards",
+          "table": "All units with rent status",
+          "totals": "Grand totals row",
+          "trends": "Collection rate trend chart"
+        }
+      }
+    },
+    "summary": {
+      "description": "Compact rent roll summary for dashboard",
+      "components": [
+        "Badge"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap3 _p4",
+        "slots": {
+          "header": "Title",
+          "metrics": "Collected, outstanding",
+          "progress": "Collection progress bar"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col _gap6",
+    "slots": {
+      "header": "Title and controls",
+      "summary": "Summary metrics",
+      "table": "Rent roll table",
+      "totals": "Totals row"
+    }
+  },
+  "visual_brief": "Data table showing monthly rent collection for all units in a property. Columns: unit number, tenant name, expected rent, amount collected, outstanding balance (highlighted red if nonzero), and payment status badge (paid, partial, unpaid, vacant). A header row has the title, month/year selector, and export button. A summary row at the top shows total expected, total collected, total outstanding, and vacancy loss. The totals row at the bottom sums all columns. The summary preset shows only the KPI metrics without the full table.",
+  "responsive": {
+    "mobile": "Table becomes a card list — each unit as a card with key values. Summary metrics in a 2x2 grid. Month selector is a simple dropdown.",
+    "tablet": "Table with horizontal scroll if needed. Summary visible above. Comfortable row height.",
+    "desktop": "Full table with all columns visible. Summary bar at top. Sticky header row."
+  },
+  "layout_hints": {
+    "collection_priority": "Lead with expected, collected, and outstanding totals first, then the unit-by-unit ledger. Users should understand collection health before diving into individual rows.",
+    "row_discipline": "Each unit row should make rent status, balance, and occupancy state easy to scan without relying on color alone.",
+    "summary_role": "The summary bar supports the table as a high-level read, but the table remains the authoritative rent-roll record."
+  },
+  "motion": {
+    "micro": "Summary metrics and status badges may sharpen subtly on hover or focus. Export and month controls should respond crisply.",
+    "transitions": "Month or property changes should update the roll smoothly enough to preserve confidence in the ledger and totals."
+  },
+  "interactions": [
+    "animate-on-mount"
+  ],
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Rent roll",
+    "keyboard": [
+      "Summary controls and the rent table should remain keyboard navigable in a predictable order."
+    ],
+    "announcements": [
+      "Expected rent, collected totals, balances, and payment status should be exposed semantically so the roll remains understandable without visual table formatting alone."
+    ]
+  },
+  "composition": {
+    "RentRoll": "Container(d-section, flex-col, gap-4) > [Header + SummaryMetrics + UnitTable + Totals]",
+    "Header": "Row(d-control) > [Title + MonthSelector(d-control) + PropertyFilter(d-control) + ExportButton(d-interactive)]",
+    "SummaryMetrics": "Row(d-data) > [ExpectedTotal(mono-data) + CollectedTotal(mono-data, color: success) + Outstanding(mono-data, color: warning) + VacancyLoss(mono-data, color: destructive)]",
+    "UnitTable": "Table(d-data) > UnitRow[]",
+    "UnitRow": "Row(d-data-row) > [UnitNumber + Tenant + ExpectedRent(mono-data) + Collected(mono-data) + Balance(mono-data, color: status) + StatusBadge(d-annotation)]"
+  }
+}