@decantr/content 3.8.0

package/patterns/content-card-grid.json

@@ -0,0 +1,151 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "content-card-grid",
+  "version": "1.3.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Content Card Grid",
+  "description": "Responsive grid of registry content cards with optional thumbnail media, strong type identity, builder-friendly descriptions, and a clean source/version/date footer. Used for browsing patterns, themes, blueprints, archetypes, and shells. This pattern owns the card grid, not outer section spacing.",
+  "dependencies": {
+    "patterns": {
+      "namespace-badge": "^1.0.0"
+    },
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Card",
+        "Badge",
+        "Button",
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "contained": false,
+  "components": [
+    "Card",
+    "CardHeader",
+    "CardBody",
+    "CardFooter",
+    "Badge",
+    "Button",
+    "icon"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Registry content cards with optional 16:9 media, one type chip, a 3-line description, and a clean source/version/date footer. Grid: 1/2/3 cols at sm/md/lg.",
+      "components": [
+        "Card",
+        "CardHeader",
+        "CardBody",
+        "CardFooter",
+        "Badge",
+        "Button",
+        "icon"
+      ],
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gc1 _md:gc2 _lg:gc3 _gap4",
+        "slots": {
+          "card-media": "Optional full-width 16:9 thumbnail image. Only render when the content item has an uploaded registry thumbnail.",
+          "card-title-row": "Title on the left with one color-coded type chip on the right",
+          "card-description": "Short description with _bodysm _fgmuted, max 3 lines",
+          "card-meta": "Friendly source line, version, and publish date",
+          "card-cta": "One optional showcase CTA with external-link affordance"
+        }
+      }
+    },
+    "compact": {
+      "description": "Compact list-style content cards with minimal info. Grid: 1/2/4 cols. Useful for dense browsing views.",
+      "components": [
+        "Card",
+        "Badge",
+        "icon"
+      ],
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gc1 _sm:gc2 _xl:gc4 _gap3",
+        "slots": {
+          "card-icon": "Content type icon on the left",
+          "card-title": "Content name with _textsm _fontmedium",
+          "card-namespace": "Namespace badge, small variant",
+          "card-version": "Version text with _textxs _fgmuted"
+        }
+      }
+    },
+    "editable": {
+      "description": "Dashboard content cards with the same visual hierarchy as public cards, plus status and edit/delete affordances.",
+      "components": [
+        "Card",
+        "CardHeader",
+        "CardBody",
+        "CardFooter",
+        "Badge",
+        "Button",
+        "icon"
+      ],
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gc1 _md:gc2 _lg:gc3 _gap4",
+        "slots": {
+          "card-media": "Optional full-width 16:9 thumbnail image",
+          "card-status": "Status badge (published/pending/rejected) with color coding",
+          "card-title-row": "Title with one type chip",
+          "card-description": "Short description, max 3 lines",
+          "card-meta": "Friendly source line, version, and publish date",
+          "card-actions": "Edit and delete button group kept visually secondary to the main content"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "grid",
+    "atoms": "_grid _gc1 _md:gc2 _lg:gc3 _gap4",
+    "slots": {
+      "card-media": "Optional full-width 16:9 thumbnail image",
+      "card-title-row": "Content name, clickable link, and one color-coded type chip",
+      "card-description": "Short description, max 3 lines",
+      "card-meta": "Friendly source line, version, and publish date",
+      "card-cta": "Optional showcase action"
+    }
+  },
+  "visual_brief": "Responsive grid of bordered cards that feel editorial, calm, and app-forward. Each card can open with an optional 16:9 screenshot-style thumbnail. The title and description should dominate, with one distinct type chip acting as the only browse-card chip. The footer should feel like a clean authored source line rather than a metadata bucket: source first, then version, then date. If a showcase exists, its CTA should feel obvious and inviting. The overall impression should be curated and useful, not operator-heavy or diagnostic.",
+  "responsive": {
+    "mobile": "Single-column card stack. Cards take full width, thumbnails remain 16:9, descriptions show up to three lines, and the footer/source line wraps naturally without overflow.",
+    "tablet": "Two-column grid. Thumbnails, title, description, and footer all remain readable without crowded chip rows.",
+    "desktop": "Three or four column grid depending on container width. Cards feel airy and selective, with one type chip, generous description room, and a clear showcase CTA when present."
+  },
+  "layout_hints": {
+    "card_treatment": "Each card uses lum-card-outlined with a type-linked accent and optional media frame. Hover should feel subtle but premium: border intensifies, card lifts slightly, and shadows deepen without turning noisy.",
+    "card_content": "Do not use browse-card trust chips. Keep only the type chip. The footer should carry the source line first, then version, then date. Showcase CTA should sit clearly below that row when present.",
+    "grid_layout": "Responsive grid: 3 columns desktop, 2 tablet, 1 mobile. Gap: 1rem. Equal-height cards per row. Avoid visual density spikes between cards with thumbnails and cards without thumbnails. Parent workspace layout owns any spacing between this grid and sibling filters, intros, or empty-state lead surfaces."
+  },
+  "motion": {
+    "micro": "Cards may lift slightly and intensify their border treatment on hover. Showcase CTAs should respond clearly on hover and focus without overwhelming the card.",
+    "transitions": "Filter and sort changes should cross-fade or stagger cards in gently over 180-260ms. Thumbnail appearance should feel polished but restrained."
+  },
+  "interactions": [
+    "lift-hover",
+    "stagger-children",
+    "animate-on-mount",
+    "click-select",
+    "scroll-reveal"
+  ],
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Content card grid",
+    "keyboard": [
+      "Tab should move through cards and showcase CTAs in reading order.",
+      "If the whole card is clickable, expose one clear primary interaction target."
+    ],
+    "announcements": [
+      "Card title, source line, and showcase availability should be available to assistive technology without depending on hover."
+    ],
+    "focus_management": "Focused cards should receive an obvious treatment equivalent to hover, and nested CTAs should remain distinct from the card container."
+  },
+  "composition": {
+    "ContentCardGrid": "Grid(d-data, responsive: 1/2/3-col) > ContentCard[]",
+    "ContentCard": "Card(d-surface, hoverable) > [Thumbnail(optional, 16:9) + TitleRow > [Title(heading4, clickable) + TypeChip(d-annotation, color-coded)] + Description(text-muted, line-clamp-3) + Footer > [SourceLine(mono-data) + Version + PublishDate + ShowcaseAction(optional)]]",
+    "EditableCard": "ContentCard > FooterSecondary > [StatusBadge + EditButton(d-interactive) + DeleteButton(d-interactive, variant: destructive)]"
+  }
+}

package/patterns/content-detail-hero.json

@@ -0,0 +1,129 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "content-detail-hero",
+  "version": "1.2.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Content Detail Hero",
+  "description": "Action-first header section for content detail pages showing name, human-readable source identity, concise trust state, quick-start guidance, and type-aware next-step actions before the raw contract payload.",
+  "dependencies": {
+    "patterns": {
+      "namespace-badge": "^1.0.0"
+    },
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Badge",
+        "Button",
+        "Chip",
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "contained": false,
+  "components": [
+    "Badge",
+    "Button",
+    "Chip",
+    "icon"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Full-width detail hero with narrative content, a quick-start rail, and compact trust summaries.",
+      "components": [
+        "Badge",
+        "Button",
+        "Chip",
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap4 _py8 _px6 _borderb _bordermuted/20",
+        "slots": {
+          "breadcrumb": "Breadcrumb navigation: Registry > Type > Namespace > Slug",
+          "badges": "Minimal badge row for type and one primary trust signal",
+          "title": "Content name with _heading2 styling and a mono-data version label",
+          "description": "Concise description explaining what the item does and why it matters",
+          "meta-row": "Human-readable source line, publish date, and tightly scoped supporting metadata",
+          "quick-start-panel": "Action-first quick-start surface with a primary command, a secondary inspect action, and a short 'what to do next' note",
+          "trust-strip": "Compact row of trust summary cards for registry intelligence and showcase verification",
+          "action-group": "Type-aware CTA buttons such as Start from blueprint, Copy reference, Inspect JSON, or Open showcase"
+        }
+      }
+    },
+    "compact": {
+      "description": "Compact hero for inline or constrained views with one primary next-step action.",
+      "components": [
+        "Badge",
+        "Button",
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap3 _py4 _px4",
+        "slots": {
+          "badges": "Type badge and one trust signal, inline",
+          "title": "Content name with _heading3",
+          "description": "Short description with _bodysm _fgmuted",
+          "actions": "Primary command and one supporting action, compact"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col _gap4 _py8 _px6 _borderb _bordermuted/20",
+    "slots": {
+      "breadcrumb": "Breadcrumb navigation",
+      "badges": "Minimal type badge plus one trust signal",
+      "title": "Content name heading with version",
+      "description": "Content description",
+      "meta-row": "Friendly source line, date, and concise supporting metadata",
+      "quick-start-panel": "Action-first quick-start guidance with primary and secondary commands",
+      "trust-strip": "Registry intelligence and showcase verification summaries",
+      "action-group": "Primary and supporting actions"
+    }
+  },
+  "visual_brief": "Full-width detail hero that feels like a product launch panel rather than a raw data dump. A breadcrumb trail sits at the top. The first visible row uses only a few high-signal badges: type and the strongest trust state. The title is large and paired with a lightweight mono-data version readout. The source line should read like a friendly publisher identity, such as @official/decantr or @community/alice, rather than exposing raw internal ids. Trust information is summarized in compact supporting cards instead of a long wall of chips.",
+  "responsive": {
+    "mobile": "Breadcrumb collapses to a short back path. Quick-start becomes a full-width stack below the description. Trust summaries become cards stacked beneath the hero copy. Action buttons go full-width and the metadata row trims to the most useful items.",
+    "tablet": "Hero content and quick-start panel can sit in a 2-row composition, with trust summaries in a two-column strip. Breadcrumb remains visible and action buttons stay grouped.",
+    "desktop": "Hero reads as a split composition: descriptive content on the left, quick-start panel on the right, with trust summaries flowing underneath. The page should feel editorial, roomy, and high-confidence."
+  },
+  "layout_hints": {
+    "hero_layout": "Use a split hero rhythm with narrative on the left and a quick-start rail on the right whenever space allows. Keep the quick-start rail visually distinct using a bordered or treated panel, but avoid drowning the top of the page in chips or letting metadata outcompete the next-step actions.",
+    "background": "Subtle gradient matching content type color at 5-8% opacity, fading to var(--d-bg). Add a restrained accent glow behind the primary action rail rather than across the whole page.",
+    "actions": "Actions are type-aware: blueprints foreground scaffold/start actions, patterns/themes/shells foreground inspect/reference actions. Primary action should read like the next thing a human should do, not just 'copy'.",
+    "source_line": "Source identity should prioritize the human-facing publisher while preserving the registry scope, for example @official/decantr or @org:acme/alice.",
+    "trust_panels": "Trust summaries should be compact, card-like, and human-readable. Prefer one sentence plus 2-4 supporting facts over long comma-separated evidence dumps."
+  },
+  "motion": {
+    "micro": "Primary actions and trust-summary cards may use subtle hover elevation and accent transitions, but the hero should remain calm and editorial.",
+    "transitions": "Hero content and quick-start rail can fade up together over 220-320ms. Trust cards may stagger lightly beneath the hero rather than popping in abruptly."
+  },
+  "interactions": [
+    "animate-on-mount",
+    "stagger-children",
+    "glow-hover"
+  ],
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Content detail hero",
+    "keyboard": [
+      "Tab moves from breadcrumb to primary actions to supporting trust cards in a predictable order."
+    ],
+    "announcements": [
+      "Title, source identity, and primary action context should be available before supporting trust summaries."
+    ],
+    "focus_management": "Keep the primary next-step action early in the focus order without skipping the page title and source identity."
+  },
+  "composition": {
+    "ContentDetailHero": "Section(d-section, flex-col, gap-4, border-bottom) > [Breadcrumb + BadgeRow + HeroSplit > [NarrativeColumn > [Title(heading2) + Description(text-muted) + MetaRow] + QuickStartPanel] + TrustStrip + ActionGroup]",
+    "BadgeRow": "Row(gap-2) > [TypeChip(d-annotation, color-coded) + TrustChip]",
+    "MetaRow": "Row(d-data, gap-3) > [SourceLine(mono-data) + PublishDate(text-muted) + SupportingMeta]",
+    "QuickStartPanel": "Panel(d-surface, compact) > [Eyebrow + PrimaryCommand + SecondaryAction + UsageGuidance]",
+    "TrustStrip": "Grid(2-col desktop / 1-col mobile) > [RegistryIntelligenceSummary + ShowcaseVerificationSummary]",
+    "ActionGroup": "Row(d-interactive, gap-2) > [PrimaryAction(variant: primary) + SecondaryAction(variant: ghost) + ShowcaseAction(variant: ghost)]"
+  }
+}

package/patterns/content-feed.json

@@ -0,0 +1,141 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "content-feed",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Content Feed",
+  "description": "Exclusive content feed with posts, media players, comments, and tier-gated content. Infinite scroll support.",
+  "dependencies": {
+    "patterns": {
+      "unlock-gate": "^1.0.0"
+    },
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Button",
+        "Card",
+        "Badge",
+        "Avatar",
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Button",
+    "Card",
+    "Badge",
+    "Avatar",
+    "icon"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Chronological content feed with embedded media players, comments, and tier-gated posts",
+      "components": [
+        "Button",
+        "Card",
+        "Badge",
+        "Avatar",
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap6 _maxw[720px] _mx[auto]",
+        "slots": {
+          "filters": "Type, tier filter buttons",
+          "items": "Content posts",
+          "load-more": "Infinite scroll trigger"
+        }
+      }
+    },
+    "grid": {
+      "description": "Grid layout for visual content",
+      "components": [
+        "Card",
+        "Badge",
+        "icon"
+      ],
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gc2 _md:gc3 _gap4",
+        "slots": {
+          "items": "Content cards in grid"
+        }
+      }
+    },
+    "compact": {
+      "description": "Dense single-column list view with reduced card padding and no inline comments",
+      "components": [
+        "Card",
+        "Badge",
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap2",
+        "slots": {
+          "items": "Compact post rows"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col _gap6",
+    "slots": {
+      "filters": "Content filters",
+      "items": "Post feed",
+      "load-more": "Pagination"
+    }
+  },
+  "io": {
+    "produces": [
+      "post-click",
+      "unlock-click",
+      "like-click"
+    ],
+    "consumes": [
+      "post-data",
+      "creator-data",
+      "user-tier"
+    ]
+  },
+  "visual_brief": "Vertical feed of content cards in chronological order. Each card shows an author row (avatar, name, timestamp), the post content (text, images, embedded video player), engagement stats (likes, comments count), and a comment input area. Tier-gated content shows a blurred preview with a lock icon and 'Subscribe to unlock' overlay. Filter tabs at the top allow switching between All, Text, Video, Audio, and Images. The grid preset arranges cards in a masonry layout. Compact preset removes the comment area and reduces card padding.",
+  "responsive": {
+    "mobile": "Single-column full-width cards. Video players scale to container width. Filters become a horizontal scrollable row. Load-more button replaces infinite scroll for performance.",
+    "tablet": "Single-column feed with comfortable card widths. Filters visible in a row.",
+    "desktop": "Feed constrained to a centered content column (680px). Grid preset uses two or three columns."
+  },
+  "layout_hints": {
+    "feed_priority": "Author identity and content body come first, then engagement and gating states. The feed should feel editorial and sequential rather than like a dashboard of unrelated cards.",
+    "gate_discipline": "Locked or tier-gated items should preserve the same post hierarchy as unlocked posts so monetization reads as part of the feed, not a separate widget.",
+    "filter_role": "Filter tabs should act as a lightweight mode selector above the stream, not as a second navigation system."
+  },
+  "motion": {
+    "micro": "Feed cards, engagement controls, and gated overlays may respond subtly on hover and focus, while likes or unlock affordances may confirm interaction without breaking reading flow.",
+    "transitions": "Filter changes and content loading should preserve chronological continuity, with gentle entry or fade behavior rather than abrupt masonry reshuffles."
+  },
+  "interactions": [
+    "animate-on-mount",
+    "stagger-children",
+    "scroll-reveal",
+    "lift-hover"
+  ],
+  "accessibility": {
+    "role": "feed",
+    "aria-label": "Content feed",
+    "keyboard": [
+      "Feed items and their main actions should follow a clear top-to-bottom order, with comment and unlock actions reachable after the content."
+    ],
+    "announcements": [
+      "Author, timestamp, content type, and gated state should be exposed semantically so each post remains understandable without visual overlays alone."
+    ]
+  },
+  "composition": {
+    "ContentFeed": "Container(d-section, flex-col, centered) > [FilterTabs(d-control) + PostList + LoadMore?(d-interactive)]",
+    "PostList": "List(flex-col, gap-6) > PostCard[]",
+    "PostCard": "Card(d-surface) > [AuthorRow > [Avatar + Name + Timestamp(text-muted)] + PostContent(markdown, media?) + EngagementBar > [LikeCount + CommentCount] + CommentInput?]",
+    "GatedPost": "PostCard(blurred) > [LockOverlay(d-annotation, icon: lock) + SubscribeCTA(d-interactive)]"
+  }
+}

package/patterns/content-uploader.json

@@ -0,0 +1,137 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "content-uploader",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Content Uploader",
+  "description": "Drag-drop media upload component with file preview, progress tracking, and multi-file support. Handles images, videos, audio, and documents.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Button",
+        "Card",
+        "Progress",
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Button",
+    "Card",
+    "Progress",
+    "icon"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Multi-file upload with preview grid and progress tracking",
+      "components": [
+        "Button",
+        "Card",
+        "Progress",
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap4",
+        "slots": {
+          "dropzone": "Drag-drop target area with visual feedback",
+          "file-list": "Uploaded files with progress bars",
+          "preview": "Media preview thumbnails grid",
+          "actions": "Upload, cancel, clear buttons"
+        }
+      }
+    },
+    "single": {
+      "description": "Single file upload with large preview area",
+      "components": [
+        "Button",
+        "Card",
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap4",
+        "slots": {
+          "dropzone": "Large drag-drop target",
+          "preview": "Full-size media preview",
+          "actions": "Replace, remove buttons"
+        }
+      }
+    },
+    "audio": {
+      "description": "Audio upload with waveform preview",
+      "components": [
+        "Button",
+        "Card",
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap4",
+        "slots": {
+          "dropzone": "Audio file drop area",
+          "waveform": "Audio waveform visualization",
+          "player": "Audio player controls",
+          "actions": "Upload actions"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col _gap4",
+    "slots": {
+      "dropzone": "Drag-drop target area",
+      "file-list": "Uploaded files list",
+      "preview": "Media preview",
+      "actions": "Action buttons"
+    }
+  },
+  "io": {
+    "produces": [
+      "uploaded-files",
+      "upload-progress"
+    ],
+    "consumes": []
+  },
+  "visual_brief": "Large dashed-border drop zone with a cloud upload icon centered above 'Drag and drop files here or click to browse' text. Active drag-over state highlights the zone with a primary color border. Below the drop zone, an uploaded files list shows each file as a row with thumbnail preview, filename, file size, a progress bar during upload, and a remove button. The progress bar fills with primary color. The single preset shows one file at a time with a larger preview. Audio preset includes waveform visualization for audio files.",
+  "responsive": {
+    "mobile": "Drop zone reduces in height. File list shows smaller thumbnails. Upload uses native file picker on tap. Progress bars are full-width.",
+    "tablet": "Standard drop zone size. File list shows medium thumbnails with inline progress.",
+    "desktop": "Large drop zone with generous padding. File list shows large thumbnails and detailed file info."
+  },
+  "layout_hints": {
+    "dropzone_priority": "The primary affordance is the upload target itself. Supporting file previews and action rows should reinforce confidence in what has been selected, not compete with the dropzone.",
+    "progress_clarity": "Upload state, file identity, and error or retry status should stay tightly grouped for each file so the user can resolve issues without scanning the whole surface.",
+    "single_vs_multi": "Single-file flows should emphasize preview and replacement, while multi-file flows should emphasize queue state and per-file progress."
+  },
+  "motion": {
+    "micro": "Drop targets may brighten on drag-over, and upload rows may sharpen or pulse subtly while active.",
+    "transitions": "File entry, progress updates, and completion states should feel confidence-building and calm, especially during longer uploads."
+  },
+  "interactions": [
+    "drag-reorder",
+    "animate-on-mount",
+    "click-select"
+  ],
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Content uploader",
+    "keyboard": [
+      "Browse, remove, retry, and upload actions should remain reachable in a straightforward order after the dropzone."
+    ],
+    "announcements": [
+      "Selected files, upload progress, completion, and error states should be exposed semantically so the workflow remains understandable without drag feedback alone."
+    ]
+  },
+  "composition": {
+    "ContentUploader": "Container(d-section, flex-col, gap-4) > [Dropzone + FileList + Actions]",
+    "Dropzone": "Zone(d-surface, dashed-border, drop-target) > [CloudIcon + InstructionText + BrowseButton?(d-interactive)]",
+    "FileList": "List(flex-col, gap-2) > FileRow[]",
+    "FileRow": "Row(d-data-row) > [Thumbnail + FileName + FileSize(text-muted) + Progress(d-data) + RemoveButton(d-interactive)]"
+  }
+}