@decantr/content 3.8.0

package/patterns/team-member-row.json

@@ -0,0 +1,139 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "team-member-row",
+  "version": "1.1.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Team Member Row",
+  "description": "Team collaboration surface row with member identity, role controls, join date, responsive management actions, and an invite flow that can collapse cleanly on narrower widths.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Avatar",
+        "Badge",
+        "Button",
+        "Select",
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "contained": false,
+  "components": [
+    "Avatar",
+    "Badge",
+    "Button",
+    "Select",
+    "icon"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Full team member row with avatar, name, email, role badge, joined date, and role-change/remove actions. The row can wrap into a stacked card-like composition when horizontal space gets tight.",
+      "components": [
+        "Avatar",
+        "Badge",
+        "Button",
+        "Select",
+        "icon"
+      ],
+      "layout": {
+        "layout": "row",
+        "atoms": "_flex _aic _gap4 _px4 _py4 _borderb _bordermuted/10",
+        "slots": {
+          "avatar": "Team member Avatar, medium size",
+          "identity": "Name (_textsm _fontmedium) and email (_textxs _fgmuted) stacked",
+          "role": "Role Badge (owner=primary, admin=secondary, member=outline)",
+          "joined": "Join date with _textxs _fgmuted",
+          "actions": "Role Select dropdown and Remove Button"
+        }
+      }
+    },
+    "card": {
+      "description": "Card-style team member for grid layouts. Avatar centered, name below, role badge, and actions.",
+      "components": [
+        "Avatar",
+        "Badge",
+        "Button",
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _aic _gap3 _p4 _border _bordermuted/20 _r3 _tc",
+        "slots": {
+          "avatar": "Large centered Avatar",
+          "name": "Member name with _textsm _fontmedium",
+          "email": "Email with _textxs _fgmuted",
+          "role": "Role Badge centered",
+          "actions": "Action buttons row"
+        }
+      }
+    },
+    "invite": {
+      "description": "Pending invitation row showing email, invited-by, expiry, and resend/cancel actions.",
+      "components": [
+        "Badge",
+        "Button",
+        "icon"
+      ],
+      "layout": {
+        "layout": "row",
+        "atoms": "_flex _aic _gap4 _px4 _py3 _borderb _bordermuted/10 _bgmuted/5",
+        "slots": {
+          "icon": "Mail icon for pending invite",
+          "email": "Invitee email with _textsm",
+          "status": "Pending Badge with expiry date",
+          "actions": "Resend and cancel Buttons"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "row",
+    "atoms": "_flex _aic _gap4 _px4 _py4 _borderb _bordermuted/10",
+    "slots": {
+      "avatar": "Member Avatar",
+      "identity": "Name and email",
+      "role": "Role badge",
+      "joined": "Join date",
+      "actions": "Management actions"
+    }
+  },
+  "visual_brief": "Horizontal row displaying a team member with a circular avatar on the left, followed by name (medium weight) and email (muted, smaller text) stacked vertically, a role badge (Owner, Admin, Member) color-coded in the middle, join date in muted text, and action controls on the right (role change dropdown, remove button). Rows are separated by bottom borders. The card preset wraps each member in a bordered card with a vertical layout. The invite preset shows a pending invite row with email, role, and resend/cancel actions.",
+  "responsive": {
+    "mobile": "Use a stacked card or wrapped row composition. Avatar and identity stay together, role/date/actions drop beneath, and invite/member controls stack instead of compressing.",
+    "tablet": "Standard row layout with wrapped secondary metadata when needed. Actions can remain inline, but should break onto a second line before overflowing.",
+    "desktop": "Full row with generous spacing. All information and actions visible inline without relying on a single non-wrapping strip."
+  },
+  "motion": {
+    "micro": "Role pills and row actions may animate subtly on hover and focus, but the row should still read like calm administrative data.",
+    "transitions": "Invite, resend, and member-update states should fade or expand gently over 150-220ms without disrupting the list rhythm."
+  },
+  "interactions": [
+    "animate-on-mount"
+  ],
+  "layout_hints": {
+    "row_layout": "Avatar (32px circle) + identity block + role/date/actions trail. On narrow widths, let the trail wrap below the identity instead of squeezing the email or control cluster.",
+    "invite_form": "Invite form uses a responsive row: email input + role dropdown + Invite button. Collapse to a stacked form on small screens.",
+    "cta_treatment": "Supporting workspace navigation such as governance links should appear as contextual action bands or compact cards, not as detached button rows."
+  },
+  "accessibility": {
+    "role": "row",
+    "aria-label": "Team member row",
+    "keyboard": [
+      "Tab moves through role controls, invite actions, and remove controls in row order."
+    ],
+    "announcements": [
+      "Role changes, invite sends, and removals should be announced clearly.",
+      "Pending-invite state should be distinguishable from active-member state semantically, not just visually."
+    ],
+    "focus_management": "After member actions, preserve focus on the affected row or the next logical row-level action."
+  },
+  "composition": {
+    "TeamMemberRow": "Row(d-data-row, hoverable) > [Avatar + MemberInfo + RoleBadge(d-annotation) + JoinDate(text-muted) + Actions]",
+    "MemberInfo": "Stack(flex-col) > [Name(font-medium) + Email(text-muted, text-sm)]",
+    "Actions": "Row(d-interactive) > [RoleSelect(d-control) + RemoveButton(variant: destructive, icon-only)]",
+    "InviteMemberForm": "ResponsiveRow > [InviteeField + RoleSelect + InviteButton]"
+  }
+}

package/patterns/tech-pills.json

@@ -0,0 +1,69 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "tech-pills",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Tech Pills",
+  "description": "Row of technology or integration pill badges showing compatibility and supported platforms. Each pill is a rounded badge with the technology name, displayed in a centered flex-wrap row. Used for 'works with' sections to communicate broad technology compatibility. Supports standard uniform styling or individually colored brand pills.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Badge"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Badge"
+  ],
+  "contained": false,
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Centered row of pill badges with uniform styling. Each pill has a rounded shape (border-radius: 20px), medium padding, semi-bold text, and a subtle hover lift. All pills use a consistent muted background with light text. Wrapped in a flex container with center justification and 12px gap. Max-width constrained to ~700px.",
+      "components": [
+        "Badge"
+      ],
+      "layout": {
+        "layout": "row",
+        "atoms": "_flex _flexwrap _justify[center] _gap3 _mw[700px] _mx[auto]",
+        "slots": {
+          "pill-items": "Array of Badge pills, each with _rounded[20px] _py2 _px5 _fs[0.85rem] _fw600 _transition _hover:translateY[-2px]. Background: _bgwhite/10. Text: _fgwhite/80. Each pill contains a technology name (e.g., 'React', 'Next.js', 'Claude', 'Cursor')."
+        }
+      }
+    },
+    "colored": {
+      "description": "Each pill gets a unique brand color from a rotating palette. Background is the accent color at ~15% opacity, text uses the full accent color. Colors rotate through coral, amber, cyan, green, yellow, purple, pink, orange. Same layout and sizing as standard, but with per-pill color variation for visual interest.",
+      "components": [
+        "Badge"
+      ],
+      "layout": {
+        "layout": "row",
+        "atoms": "_flex _flexwrap _justify[center] _gap3 _mw[700px] _mx[auto]",
+        "slots": {
+          "pill-items": "Array of Badge pills with individual colors. Each pill: _rounded[20px] _py2 _px5 _fs[0.85rem] _fw600 _transition _hover:translateY[-2px]. Background uses the pill's accent color at 15% opacity (e.g., rgba(245,136,130,0.15)). Text uses the full accent color (e.g., #F58882). Colors rotate: coral, amber, cyan, green, yellow, purple, pink, orange."
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "row",
+    "atoms": "_flex _flexwrap _justify[center] _gap3 _mw[700px] _mx[auto]",
+    "slots": {
+      "pill-items": "Technology compatibility pill badges in a centered row"
+    }
+  },
+  "io": {
+    "consumes": [],
+    "produces": [],
+    "actions": []
+  },
+  "visual_brief": "Centered flex-wrap row of rounded pill badges, each displaying a technology or integration name (e.g., 'React', 'Vue', 'Next.js', 'Tailwind', 'Figma'). Standard preset shows uniform styling — each pill has a muted border, surface background, and small text in consistent color. The colored preset gives each pill a unique brand-colored background or border (React blue, Vue green, etc.) with white or dark text for contrast. Pills have consistent padding and slight letter spacing. The row wraps naturally, creating an organic layout of technology compatibility indicators.",
+  "responsive": {
+    "mobile": "Pills wrap across multiple lines. Sizing remains consistent. Narrower horizontal padding if needed.",
+    "tablet": "Pills in a comfortable centered row, wrapping as needed.",
+    "desktop": "Single or two row display depending on count. Generous spacing between pills."
+  }
+}

package/patterns/tenant-card.json

@@ -0,0 +1,150 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "tenant-card",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Tenant Card",
+  "description": "Tenant profile summary card with photo, contact info, property/unit, lease details, and payment status.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Button",
+        "icon",
+        "Badge",
+        "Avatar"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Button",
+    "icon",
+    "Badge",
+    "Avatar"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Full tenant card with photo and all details",
+      "components": [
+        "Button",
+        "icon",
+        "Badge",
+        "Avatar"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap4 _p4",
+        "slots": {
+          "avatar": "Tenant photo",
+          "name": "Full name",
+          "contact": "Phone, email",
+          "property": "Current property/unit",
+          "lease": "Lease dates, rent amount",
+          "status": "Payment status badge",
+          "actions": "Message, view, edit buttons"
+        }
+      }
+    },
+    "compact": {
+      "description": "Condensed inline tenant summary",
+      "components": [
+        "Avatar",
+        "Badge"
+      ],
+      "layout": {
+        "layout": "row",
+        "atoms": "_flex _aic _gap3",
+        "slots": {
+          "avatar": "Small avatar",
+          "info": "Name, contact",
+          "status": "Payment status"
+        }
+      }
+    },
+    "contact": {
+      "description": "Contact-focused view with quick actions",
+      "components": [
+        "Button",
+        "icon",
+        "Avatar"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _aic _gap3 _p4 _tc",
+        "slots": {
+          "avatar": "Large centered avatar",
+          "name": "Tenant name",
+          "contact-actions": "Call, email, SMS buttons"
+        }
+      }
+    },
+    "self": {
+      "description": "Tenant's own profile view for tenant portal",
+      "components": [
+        "Button",
+        "icon",
+        "Avatar"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap4 _p4",
+        "slots": {
+          "avatar": "Profile photo with edit",
+          "info": "Name, contact info",
+          "lease": "Current lease summary",
+          "actions": "Edit profile button"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col _gap4 _p4",
+    "slots": {
+      "avatar": "Tenant photo",
+      "info": "Name and contact",
+      "details": "Property and lease info",
+      "actions": "Action buttons"
+    }
+  },
+  "visual_brief": "Bordered card with a tenant avatar or photo at the top-left, followed by name and contact information (phone, email). Below, property/unit assignment as a linked label and lease period dates. A payment status indicator shows current standing (current, late, delinquent) with color coding. Action buttons (Message, View Profile) sit at the bottom. The compact preset is a dense horizontal row with avatar, name, unit, and status. The contact preset emphasizes phone and email with click-to-call/email actions. The self preset is a tenant-facing card showing their own information and quick links.",
+  "responsive": {
+    "mobile": "Cards take full width. Action buttons stack. Contact info uses tap-to-call/email links.",
+    "tablet": "Two-column card grid. Standard card proportions.",
+    "desktop": "Three-column grid or list layout. Cards at comfortable size with all details visible."
+  },
+  "layout_hints": {
+    "identity_priority": "Lead with tenant identity and current standing first, then property and lease context. Action buttons should support that understanding, not fight for attention.",
+    "variant_role": "Standard, compact, contact, and self variants should all preserve the same core tenant identity while changing emphasis based on workflow.",
+    "status_visibility": "Payment or lease standing should be visible without overwhelming the card. Keep status, contact, and unit context tightly grouped."
+  },
+  "motion": {
+    "micro": "Action buttons and status affordances may sharpen slightly on hover. Contact-focused variants may emphasize quick actions a bit more when focused.",
+    "transitions": "Card selection or status updates should feel steady and professional rather than social-feed-like."
+  },
+  "interactions": [
+    "lift-hover",
+    "click-select",
+    "animate-on-mount",
+    "stagger-children"
+  ],
+  "accessibility": {
+    "role": "group",
+    "aria-label": "Tenant summary",
+    "keyboard": [
+      "Tenant actions should be reachable after the core identity and status information in a predictable order."
+    ],
+    "announcements": [
+      "Tenant name, unit, lease context, and standing should be exposed semantically so the card remains informative beyond visual badges and layout."
+    ]
+  },
+  "composition": {
+    "TenantCard": "Card(d-surface, hoverable) > [Avatar(large) + TenantInfo + PaymentStatus + Actions]",
+    "TenantInfo": "Stack(flex-col) > [Name(font-medium) + Property(text-muted) + Unit(text-muted) + LeaseEnd(d-annotation)]",
+    "PaymentStatus": "Badge(d-annotation, color: status)",
+    "Actions": "Row(d-interactive) > [ViewButton + MessageButton(variant: ghost) + MenuButton]"
+  }
+}

package/patterns/tenant-directory.json

@@ -0,0 +1,118 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "tenant-directory",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Tenant Directory",
+  "description": "All tenants list with search, filters, bulk actions, and summary stats. Supports card and table views.",
+  "dependencies": {
+    "patterns": {
+      "tenant-card": "^1.0.0"
+    },
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Button",
+        "icon",
+        "Input",
+        "Select",
+        "Badge"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Button",
+    "icon",
+    "Input",
+    "Select",
+    "Badge"
+  ],
+  "default_preset": "table",
+  "presets": {
+    "table": {
+      "description": "Detailed table view of tenants",
+      "components": [
+        "Button",
+        "icon",
+        "Input",
+        "Select",
+        "Badge"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap4",
+        "slots": {
+          "header": "Title, add tenant button",
+          "summary": "Total tenants, active, past due counts",
+          "filters": "Search, status filter, property filter, lease expiring filter",
+          "table": "Tenant table with sortable columns",
+          "pagination": "Page controls"
+        }
+      }
+    },
+    "cards": {
+      "description": "Visual card grid of tenants with avatar, property, and lease status displayed per card",
+      "components": [
+        "Button",
+        "icon",
+        "Input"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap4",
+        "slots": {
+          "header": "Title and controls",
+          "filters": "Search and filters",
+          "grid": "Tenant cards"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col _gap4",
+    "slots": {
+      "header": "Title and add button",
+      "summary": "Stats",
+      "filters": "Search and filters",
+      "items": "Tenant cards or rows",
+      "pagination": "Page controls"
+    }
+  },
+  "visual_brief": "Directory page with a header containing 'Tenants' title, a search input, and an 'Add Tenant' button. Summary stats show total tenants, active leases, and average occupancy. Filter controls offer search by name, filter by property/status. The main area displays tenant cards in a responsive grid (cards preset) or a data table (table preset) with columns for avatar, name, property, unit, lease dates, payment status, and actions. Pagination controls at the bottom for large directories.",
+  "responsive": {
+    "mobile": "Single-column tenant cards. Summary in a compact bar. Filters collapse to a button. Search is full-width.",
+    "tablet": "Two-column card grid or table with horizontal scroll. Filters visible.",
+    "desktop": "Three-column card grid or full-width table. All summary, filters, and pagination visible."
+  },
+  "layout_hints": {
+    "directory_priority": "Lead with tenant discoverability first: search, filters, and status summary, then the actual records. The pattern should help managers answer who is active, at risk, or needs attention quickly.",
+    "card_vs_table": "Card and table modes should preserve the same core tenant fields so switching views changes density, not meaning.",
+    "bulk_workflow": "If bulk actions are present, keep them clearly downstream of selection so the directory still reads as a stable list before it becomes an action surface."
+  },
+  "motion": {
+    "micro": "Search focus, row hover, and selection states may sharpen slightly. Bulk-selection or filter states may brighten enough to confirm changes without overwhelming the list.",
+    "transitions": "Filtering, sorting, and pagination should preserve list orientation and avoid dramatic layout jumps."
+  },
+  "interactions": [
+    "animate-on-mount"
+  ],
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Tenant directory",
+    "keyboard": [
+      "Search, filters, summary controls, and tenant items should remain reachable in one clear reading order."
+    ],
+    "announcements": [
+      "Tenant identity, unit context, and status should be exposed semantically so both card and table variants remain understandable without visual styling alone."
+    ]
+  },
+  "composition": {
+    "TenantDirectory": "Container(d-section, flex-col, gap-4) > [Header + Filters + SummaryStats? + TenantList + Pagination]",
+    "Header": "Row(d-control, space-between) > [Title + AddTenantButton(d-interactive) + ViewToggle(d-interactive)]",
+    "Filters": "Row(d-control) > [SearchInput(d-control) + PropertyFilter(d-control) + StatusFilter(d-control)]",
+    "SummaryStats": "Row(d-data) > [TotalTenants + ActiveLeases + PendingPayments(color: warning)]",
+    "TenantList": "Grid(d-data, responsive: 1/2/3-col) > TenantCard[]"
+  }
+}

package/patterns/tenant-payment-setup.json

@@ -0,0 +1,98 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "tenant-payment-setup",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Tenant Payment Setup",
+  "description": "Tenant autopay configuration with payment method management, ACH/card setup, autopay toggle, and upcoming payment preview.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Button",
+        "icon",
+        "Badge",
+        "Input",
+        "Select"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Button",
+    "icon",
+    "Badge",
+    "Input",
+    "Select"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Full payment setup view with autopay toggle, saved payment methods, and upcoming payment preview",
+      "components": [
+        "Button",
+        "icon",
+        "Badge",
+        "Input",
+        "Select"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap6",
+        "slots": {
+          "header": "Title, autopay status indicator",
+          "current-method": "Current payment method summary",
+          "methods": "Saved payment methods list",
+          "add-method": "Add bank account or card form",
+          "autopay-settings": "Autopay toggle, day of month",
+          "schedule": "Upcoming payments preview"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col _gap6",
+    "slots": {
+      "autopay": "Autopay settings",
+      "methods": "Payment methods",
+      "upcoming": "Upcoming payments"
+    }
+  },
+  "visual_brief": "Settings form for tenant autopay configuration. An autopay toggle switch at the top enables/disables automatic payments with a description of what it does. Below, a payment methods section shows saved cards/bank accounts as rows with masked account number, type icon (Visa, Mastercard, bank), and a star icon for the default method. 'Add Payment Method' button opens a card/ACH input form. An upcoming payments section shows the next payment amount, date, and property/unit in a summary card. If autopay is off, a manual 'Pay Now' button appears.",
+  "responsive": {
+    "mobile": "Full-width form. Payment method cards stack. Toggle switch prominent at top. Pay Now button full-width and sticky.",
+    "tablet": "Standard form layout. Payment methods and upcoming payments visible together.",
+    "desktop": "Comfortable form width. All sections visible. Payment methods in a clean list."
+  },
+  "layout_hints": {
+    "setup_priority": "Lead with current payment readiness first: autopay state, active method, and next charge. Deeper method management should sit just below that primary understanding.",
+    "method_clarity": "Masked account identity, default state, and next payment context should be tightly grouped so users trust what will be charged and when.",
+    "mobile_sequence": "On small screens, keep autopay state, current method, and manual pay fallback in one simple vertical sequence rather than scattering them."
+  },
+  "motion": {
+    "micro": "Autopay toggles and payment-method selection may confirm state changes with restrained visual feedback.",
+    "transitions": "Adding or switching methods should feel trustworthy and deliberate, especially around sensitive payment information."
+  },
+  "interactions": [
+    "animate-on-mount"
+  ],
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Tenant payment setup",
+    "keyboard": [
+      "Autopay controls, payment methods, and upcoming payment actions should proceed in a clear top-to-bottom order."
+    ],
+    "announcements": [
+      "Autopay state, default method, and next payment timing should be communicated semantically so the setup remains understandable without card or badge styling alone."
+    ]
+  },
+  "composition": {
+    "TenantPaymentSetup": "Container(d-section, flex-col, gap-6) > [PaymentMethods + AutopayToggle + UpcomingPayment]",
+    "PaymentMethods": "Section(d-surface) > [MethodCard(d-surface, selectable)[] + AddMethodButton(d-interactive)]",
+    "MethodCard": "Card(d-surface, active?: selected) > [CardBrandIcon + MaskedNumber(mono-data) + Expiry(text-muted) + DefaultBadge?(d-annotation)]",
+    "AutopayToggle": "Row(d-control) > [Label + Switch(d-control) + Description(text-muted)]",
+    "UpcomingPayment": "Card(d-surface) > [NextDueDate(d-annotation) + Amount(heading3, mono-data) + BreakdownList > LineItem[]]"
+  }
+}