@decantr/content 3.8.0

package/patterns/file-browser.json

@@ -0,0 +1,148 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "file-browser",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "File Browser",
+  "description": "File and folder tree with preview panel, breadcrumb navigation, and multi-select for comprehensive file management.",
+  "category": "content-management",
+  "tags": [
+    "2026",
+    "files",
+    "folders",
+    "tree",
+    "file-manager",
+    "drag-and-drop",
+    "content-management",
+    "preview"
+  ],
+  "components": [
+    "FolderTree",
+    "FileList",
+    "FileCard",
+    "FileRow",
+    "PreviewPanel",
+    "BreadcrumbBar",
+    "ActionBar",
+    "UploadDropzone"
+  ],
+  "default_preset": "split",
+  "presets": {
+    "tree": {
+      "description": "Sidebar folder tree navigation with a flat file list on the right — traditional file manager layout optimized for deep folder hierarchies",
+      "layout": {
+        "layout": "split",
+        "atoms": "_flex _row _h-full _bg-surface _border _rounded"
+      }
+    },
+    "grid": {
+      "description": "Icon grid view showing file cards with thumbnails and names in a responsive masonry-like grid — best for visual browsing of images and documents",
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _grid-cols-auto-fill _gap-4 _p-4 _bg-surface"
+      }
+    },
+    "list": {
+      "description": "Table-style list view with sortable columns (name, size, type, modified date) — optimized for detailed file information and bulk operations",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _h-full _bg-surface _border _rounded"
+      }
+    },
+    "split": {
+      "description": "Three-panel layout: folder tree left, file list center, preview panel right — the most comprehensive view combining navigation, listing, and preview in one screen",
+      "layout": {
+        "layout": "split",
+        "atoms": "_flex _row _h-full _bg-surface _border _rounded"
+      }
+    }
+  },
+  "visual_brief": "A two-or-three-panel file management interface with clean lines and clear visual hierarchy. The leftmost panel is the FolderTree (240px wide, collapsible): a vertical list of folders with indentation levels (16px per level) connected by thin vertical and horizontal connector lines (1px solid var(--d-border-subtle), gray) forming an ASCII-tree-like structure. Folder icons are small (16px) filled folder shapes that rotate open (chevron turns 90deg) when expanded. The active/selected folder has an accent-tinted background row (var(--d-accent) at 10% opacity) with accent-colored text. Hovering any folder row shows a subtle background tint. The center panel is the FileList (flex: 1, fills remaining space). Above it spans the BreadcrumbBar: a horizontal path showing the current location as clickable segments separated by chevron-right icons (e.g., 'Home > Projects > Design > Assets'), each segment in text-sm with hover underline, the final segment in font-semibold. Below the breadcrumb is the ActionBar: a horizontal toolbar with icon+label buttons for Upload, New Folder, Delete, and a view-mode toggle (grid/list icons), plus a search input on the right side (240px wide, with a search icon prefix). The file list itself renders either as FileCards in grid mode (120px wide cards with a 64px icon/thumbnail centered above the filename) or FileRows in list mode (table rows with columns: checkbox, icon, name, size, type, date modified, each sortable by clicking the column header). File icons use distinct shapes and colors per type: documents are blue page icons, images are green landscape icons, code files are purple bracket icons, archives are amber box icons, PDFs are red document icons. Selected files have an accent-tinted background (var(--d-accent) at 8% opacity) with a visible checkbox checked state. Multi-select is supported via Shift+click (range) and Ctrl/Cmd+click (additive). The rightmost panel is the PreviewPanel (320px wide, slides in from the right when a file is selected). It shows: a large thumbnail or file-type icon at the top (200px max-height), the filename (text-base font-semibold), file metadata in a key-value list (Size, Type, Created, Modified, Owner — each as text-sm rows), and quick action buttons (Download, Share, Rename, Delete) as ghost-style icon+label buttons. The UploadDropzone activates on drag-over: a full-area overlay (position: absolute, inset: 0, z-index above all content) with a dashed border (3px dashed var(--d-accent), border-radius 12px), translucent accent-tinted background (var(--d-accent) at 8%), and a centered column with a large upload cloud icon (48px) and 'Drop files to upload' text (text-lg, text-accent). During file drag operations, a ghost badge follows the cursor showing the count of files being moved ('3 files') in a small accent pill.",
+  "layout_hints": {
+    "container": "multi-panel",
+    "note": "The split preset uses a three-panel layout with resizable dividers. The folder tree and preview panels are collapsible. Panel widths should be adjustable via drag handles on the divider borders.",
+    "folder_tree": "Connector lines use a combination of vertical lines (from parent to last child) and horizontal stubs (from vertical line to folder icon). Use CSS ::before pseudo-elements on each tree item. Indent each level by 16px.",
+    "file_icons": "File type icons MUST be visually distinct — do not use a generic file icon for everything. Use color-coded icons: blue for documents (.doc, .txt), green for images (.png, .jpg), purple for code (.js, .ts, .py), amber for archives (.zip, .tar), red for PDFs. This color coding is essential for quick visual scanning.",
+    "selection": "Selected files must have a clearly visible accent background tint AND a checked checkbox. Multi-select interactions: click selects single, Shift+click selects range, Ctrl/Cmd+click toggles individual selection.",
+    "preview_panel": "The preview panel should only appear when a file (not folder) is selected. For image files, show an actual thumbnail. For other files, show a large file-type icon. The panel slides in from the right edge with a 250ms animation."
+  },
+  "default_layout": {
+    "layout": "split",
+    "atoms": "_flex _row _h-full _bg-surface _rounded _border _overflow-hidden",
+    "slots": {
+      "folder-tree": "Left panel, 240px wide (resizable, min 180px, max 360px), with a right border (1px solid var(--d-border-subtle)). Contains a vertical scrollable list of folder entries. Each entry is a horizontal row: an expand/collapse chevron (16px, rotates 0deg→90deg on expand, hidden for empty folders), a folder icon (16px, filled style, accent-colored when selected), and the folder name (text-sm, truncated with ellipsis). Indentation: each nesting level adds 16px of left padding. Connector lines: a thin vertical line (1px solid var(--d-border-muted)) runs from a parent's expand icon down to its last child, with horizontal stubs (12px wide) branching to each child. The active folder row has background: color-mix(in srgb, var(--d-accent) 10%, transparent) with the folder name in accent color and font-medium. Hover rows get a subtle background tint (var(--d-bg-muted)). Right-click opens a context menu (Rename, Delete, New Subfolder). The panel header shows 'Folders' in text-xs uppercase tracking-wide text-muted with a collapse button (chevron-left icon) on the right.",
+      "breadcrumb-bar": "Horizontal bar above the file list area, height 40px, padding 0 16px, flex items center, border-bottom 1px solid var(--d-border-subtle). Shows the current folder path as a series of clickable text segments: each segment is a text-sm link (text-muted, hover: text-foreground, hover: underline) separated by chevron-right icons (12px, text-muted). The final (current) segment is text-foreground font-semibold and is not clickable. If the path is too long, early segments collapse into a '...' dropdown that reveals the full path on click. A home icon (16px) precedes the first segment as a clickable root link.",
+      "action-bar": "Horizontal toolbar below the breadcrumb bar, height 44px, padding 0 12px, flex items center gap-2, border-bottom 1px solid var(--d-border-subtle). Left section: Upload button (primary variant, small size, upload-cloud icon + 'Upload' text), New Folder button (ghost variant, folder-plus icon + 'New Folder'), Delete button (ghost variant, trash icon, text-error, disabled unless files are selected, shows selected count). Separator (1px vertical line, 20px tall, var(--d-border-muted)). View toggle: two icon buttons (grid-view and list-view) where the active mode has accent background. Right section: search input (240px wide, border-radius 8px, search icon prefix, placeholder 'Search files...', text-sm). When files are selected, an additional '3 selected' indicator appears with a 'Clear selection' text button.",
+      "file-list": "Center panel, flex: 1, scrollable vertically. In list mode: a table layout with a sticky header row showing column names (Checkbox, Name, Size, Type, Modified) in text-xs uppercase tracking-wide text-muted font-medium. Each column header is clickable to sort (shows an up/down arrow indicator). Rows alternate between transparent and var(--d-bg-muted) at 30% opacity for scanability. Each FileRow: height 44px, flex items center, padding 0 12px. Row contents: checkbox (18px, rounded-sm, accent-checked), file type icon (20px, color-coded), file name (text-sm, flex-1, truncated), file size (text-xs, text-muted, 80px wide), file type label (text-xs, text-muted, 100px wide), modified date (text-xs, text-muted, 140px wide). Selected rows have accent-tinted background. Hover rows get subtle background. Double-click opens file/folder. In grid mode: a responsive grid (grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)), gap 16px, padding 16px). Each FileCard: a vertical stack (width fills grid cell) with a centered icon or thumbnail (64px height area), file name below (text-xs, text-center, max 2 lines with line-clamp-2), and a selected state showing an accent ring around the card. Hover lifts the card slightly (translateY(-2px), shadow increase).",
+      "preview-panel": "Right panel, 320px wide (resizable, min 240px, max 480px), with a left border (1px solid var(--d-border-subtle)). Slides in from the right when a file is selected, slides out when deselected. Top section: a large preview area (padding 24px, centered) showing either a thumbnail image (max-width 100%, max-height 200px, object-fit contain, rounded 8px with subtle shadow) or a large file-type icon (72px) on a muted circular background (120px diameter). Below: the filename (text-base font-semibold, padding 0 24px, word-break), then a metadata section (padding 16px 24px) with key-value rows: each row has a label (text-xs text-muted uppercase, 80px wide) and a value (text-sm text-foreground). Metadata includes: Size, Type, Created, Modified, Owner, Location. Below metadata: a divider line, then a row of quick-action ghost buttons (Download, Share, Rename, Move, Delete) with icon + label, arranged as a flex-wrap row with 8px gap. The Delete button uses text-error color.",
+      "upload-dropzone": "An overlay that activates when files are dragged over the browser window. Position: absolute, inset: 0, z-index: 50 (above all panel content). Border: 3px dashed var(--d-accent) with border-radius 12px. Background: color-mix(in srgb, var(--d-accent) 8%, var(--d-bg-surface) 92%). Contains a centered vertical flex column: a large cloud-upload icon (48px, text-accent), 'Drop files to upload' heading (text-lg, font-semibold, text-accent), and 'or click to browse' subtext (text-sm, text-muted). The overlay fades in over 200ms when drag enters and fades out over 150ms when drag leaves. On drop, transitions to an upload progress state showing a progress bar and file list."
+    }
+  },
+  "accessibility": {
+    "role": "application",
+    "aria-label": "File browser",
+    "announcements": [
+      "Navigated to folder {name}",
+      "{count} files selected",
+      "File {name} preview opened",
+      "Uploading {count} files — {percent}% complete",
+      "File {name} deleted",
+      "Sorted by {column} {ascending|descending}"
+    ],
+    "keyboard": [
+      "Tab: move focus between folder tree, file list, and preview panel",
+      "Arrow Up/Down: navigate files in list, folders in tree",
+      "Arrow Left/Right: collapse/expand folders in tree, move between columns in list",
+      "Enter: open selected file or navigate into folder",
+      "Space: toggle file selection",
+      "Shift+Arrow: extend selection range",
+      "Ctrl/Cmd+A: select all files in current folder",
+      "Delete/Backspace: delete selected files (with confirmation)",
+      "Ctrl/Cmd+C/V: copy/paste files",
+      "F2: rename selected file",
+      "Ctrl/Cmd+Shift+N: create new folder",
+      "Escape: clear selection or close preview panel"
+    ]
+  },
+  "responsive": {
+    "mobile": "Single-panel layout only. Folder tree becomes a full-screen overlay triggered by a hamburger/folder icon in the action bar. File list defaults to a simplified list view (name + icon + size only, no table columns). Preview panel becomes a bottom sheet on file tap. Breadcrumb bar shows only the current folder name with a back arrow. Action bar simplifies to essential actions behind an overflow menu. Upload dropzone is replaced by an upload button that opens the system file picker. Multi-select uses a long-press to enter selection mode with checkboxes.",
+    "tablet": "Two-panel layout: folder tree (collapsible) + file list. Preview panel is a slide-over overlay from the right (50% width). Grid view shows 4-5 columns of file cards. Action bar shows primary actions with remaining in overflow. Drag-and-drop supported for file organization. Breadcrumb bar shows full path with horizontal scroll if needed.",
+    "desktop": "Full three-panel split layout. All panels visible simultaneously with resizable dividers (drag handles on borders). Folder tree 240px, file list flex, preview 320px. Full table columns in list view with sortable headers. Keyboard shortcuts fully enabled. Right-click context menus on files and folders. Drag-and-drop between folders with visual drop indicators. Search input with real-time filtering and type-ahead."
+  },
+  "motion": {
+    "micro": {
+      "row-hover": "background-color transition 100ms ease-out",
+      "card-hover": "translateY(-2px) + shadow increase, 150ms ease-out",
+      "folder-expand": "chevron rotates 0→90deg, 200ms ease-out; children slide down with stagger 50ms each",
+      "checkbox-check": "scale bounce 1.0→1.2→1.0, 200ms ease-out with checkmark draw animation"
+    },
+    "transitions": {
+      "preview-open": "Preview panel slides in from right edge, width 0→320px, 250ms ease-out with content fade-in 150ms delay",
+      "preview-close": "Panel slides out to right, 200ms ease-in, content fades immediately",
+      "view-switch": "Cross-fade between grid and list views, 200ms ease-in-out with content scale 0.98→1.0",
+      "dropzone-activate": "Overlay fades in from opacity 0→1 over 200ms with border dash animation"
+    },
+    "ambient": {
+      "upload-progress": "Progress bar fills with smooth width transition, striped gradient animation moving left-to-right at 1s linear infinite",
+      "drag-ghost": "File count badge follows cursor with 50ms position lerp for smooth trailing effect"
+    }
+  },
+  "interactions": [
+    "click-select",
+    "hover-reveal",
+    "animate-on-mount",
+    "keyboard-navigation"
+  ],
+  "composition": {
+    "FileBrowser": "Browser(d-section, flex-row, full-height) > [FolderTree?(d-surface) + MainArea(flex-col, flex-1) + PreviewPanel?(d-surface)]",
+    "MainArea": "Area(flex-col) > [BreadcrumbBar + ActionBar + FileList(scrollable)]",
+    "FolderTree": "Tree(d-surface, scrollable, resizable) > FolderEntry*(indented, connectors) > [Chevron + FolderIcon + Name]",
+    "FileList": "List(d-surface, scrollable) > FileRow*(d-interactive) | FileCard*(d-interactive)",
+    "FileRow": "Row(d-interactive, flex-row) > [Checkbox + TypeIcon + Name + Size + Type + Modified]",
+    "FileCard": "Card(d-interactive, flex-col, centered) > [Thumbnail|TypeIcon + FileName]",
+    "PreviewPanel": "Panel(d-surface, slide-in, resizable) > [Preview(image|icon) + Filename + Metadata(key-value) + QuickActions]",
+    "BreadcrumbBar": "Bar(d-annotation, flex-row) > Segment*(clickable, chevron-separated)",
+    "ActionBar": "Bar(d-control, flex-row) > [UploadButton + NewFolderButton + DeleteButton + ViewToggle + SearchInput]",
+    "UploadDropzone": "Overlay(d-interactive, dashed-border, centered) > [UploadIcon + DropText + BrowseLink]"
+  }
+}

package/patterns/filter-bar.json

@@ -0,0 +1,146 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "filter-bar",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Filter Bar",
+  "description": "Search input and filter controls for filtering page content. Sits above data-consuming patterns like data-table, card-grid, and activity-feed.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Input",
+        "Select",
+        "Button",
+        "Badge",
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Input",
+    "Select",
+    "Button",
+    "Badge",
+    "icon"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Search input + dropdown filters + action buttons in a horizontal bar",
+      "components": [
+        "Input",
+        "Select",
+        "Button",
+        "icon"
+      ],
+      "layout": {
+        "layout": "row",
+        "atoms": "_flex _row _gap3 _aic _w[100%] _py2",
+        "slots": {
+          "search": "Search Input with placeholder text",
+          "filters": "One or more Select dropdowns for category/status filtering",
+          "actions": "Action Buttons (clear, apply, etc.)"
+        }
+      }
+    },
+    "compact": {
+      "description": "Search input only, filters in a collapsible popover",
+      "components": [
+        "Input",
+        "Select",
+        "Button",
+        "Badge",
+        "icon"
+      ],
+      "layout": {
+        "layout": "row",
+        "atoms": "_flex _row _gap2 _aic _w[100%] _py1",
+        "slots": {
+          "search": "Search Input, takes full width",
+          "filter-toggle": "Button that opens a Popover with filter Select controls",
+          "active-filters": "Badge chips showing currently active filters"
+        }
+      }
+    },
+    "advanced": {
+      "description": "Multi-row with filter chips, saved filters, and clear-all",
+      "components": [
+        "Input",
+        "Select",
+        "Button",
+        "Badge",
+        "icon"
+      ],
+      "layout": {
+        "layout": "column",
+        "atoms": "_flex _col _gap2 _w[100%] _py2",
+        "slots": {
+          "search-row": "Top row: Search Input + filter dropdowns + action Buttons",
+          "chips-row": "Second row: Badge filter chips showing active filters with remove buttons",
+          "saved-filters": "Optional row: saved filter presets as outline Buttons"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "row",
+    "atoms": "_flex _row _gap3 _aic _w[100%] _py2",
+    "slots": {
+      "search": "Search Input with placeholder text",
+      "filters": "One or more Select dropdowns for category/status filtering",
+      "actions": "Action Buttons (clear, apply, etc.)"
+    }
+  },
+  "io": {
+    "produces": [
+      "search",
+      "filters",
+      "status"
+    ],
+    "consumes": [],
+    "actions": [
+      "clear",
+      "apply"
+    ]
+  },
+  "visual_brief": "Horizontal bar containing a search input with magnifying glass icon on the left, one or more dropdown Select filters in the middle (category, status, date range), and action buttons on the right (Clear All, Apply). Active filters may display as small removable badge chips below the bar. The compact preset places the search input and filters in a single tight row. The advanced preset adds an expandable panel with additional filter fields (date pickers, range sliders, checkboxes).",
+  "layout_hints": {
+    "control_priority": "Search and primary filters should read as one coherent control band. Secondary filters belong in an expandable surface before they crowd the main row.",
+    "chip_rhythm": "Active-filter chips should wrap cleanly and remain clearly dismissible without turning the bar into a chip cloud.",
+    "mobile_behavior": "Collapsed mobile filters must preserve the same filter model as desktop, not introduce a different semantic ordering."
+  },
+  "responsive": {
+    "mobile": "Search input takes full width on its own row. Filter selects stack below or collapse into a 'Filters' button that opens a bottom sheet. Active filter chips wrap to multiple lines.",
+    "tablet": "Search and primary filters fit in one row. Less common filters in a collapsible section.",
+    "desktop": "All elements in a single horizontal row. Advanced filters expand inline below the bar."
+  },
+  "motion": {
+    "micro": "Filter chips, toggles, and dropdown affordances may animate softly on hover and selection over 120-180ms.",
+    "transitions": "Expanded filter panels and chip removals should animate over 150-240ms without making the bar feel noisy."
+  },
+  "interactions": [
+    "inline-edit",
+    "animate-on-mount",
+    "keyboard-navigation"
+  ],
+  "accessibility": {
+    "role": "search",
+    "aria-label": "Filter bar",
+    "keyboard": [
+      "Tab moves through search, filter, and apply/clear controls in logical order.",
+      "Arrow keys may move between segmented or tab-like filter controls."
+    ],
+    "announcements": [
+      "Active filter changes and result-count updates should be announced clearly."
+    ],
+    "focus_management": "Expanded filter surfaces should move focus into the panel and return it to the invoking control on close."
+  },
+  "composition": {
+    "FilterBar": "Row(d-control, full-width) > [SearchInput(d-control, icon: search) + FilterSelects > Select(d-control)[] + ActionButtons(d-interactive)]",
+    "ActiveFilters": "Row(gap-2) > FilterChip(d-annotation, removable)[]",
+    "AdvancedFilters": "Panel(d-surface, expandable) > [FilterRow > Select[] + SavedFilters > Button(variant: outline)[]]"
+  }
+}

package/patterns/footer.json

@@ -0,0 +1,115 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "footer",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Footer",
+  "description": "Page footer with link columns, social icons, and copyright notice.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Link",
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Link",
+    "icon"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Multi-column footer with link groups, social icons, and copyright",
+      "components": [
+        "Link",
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap8 _px6 _py8 _borderT",
+        "slots": {
+          "columns": "Grid of link groups: _grid _gc2 _md:gc4 _gap6",
+          "column-heading": "Group heading with _textsm _fontbold _fgmuted _uppercase _tracking[wider]",
+          "column-links": "Vertical list of links with _flex _col _gap2",
+          "bottom-bar": "Horizontal bar: logo/copyright left, social icons right with _flex _jcsb _aic",
+          "social-icons": "Row of social media icon links with _flex _gap3"
+        }
+      }
+    },
+    "simple": {
+      "description": "Single-row footer with links and copyright",
+      "components": [
+        "Link"
+      ],
+      "layout": {
+        "layout": "row",
+        "atoms": "_flex _aic _jcsb _px6 _py4 _borderT _fgmuted",
+        "slots": {
+          "links": "Horizontal footer links",
+          "copyright": "Copyright text"
+        }
+      }
+    }
+  },
+  "visual_brief": "Full-width footer section with a top border separating it from page content. The standard preset uses a multi-column grid layout: 3-4 columns of link groups, each headed by an uppercase, small, bold, muted label (e.g. 'Product', 'Company', 'Resources'). Links beneath each heading are regular-weight, muted text that brightens on hover. Below the columns, a bottom bar contains the logo or brand name on the left with a copyright line, and social media icon links (GitHub, Twitter, LinkedIn) on the right. The simple preset is a single horizontal row with inline links on one side and copyright on the other. Background uses the page surface color or a slightly darker shade.",
+  "responsive": {
+    "mobile": "Link columns stack to 2-column grid (gc2). Bottom bar stacks vertically — copyright above, social icons below, both centered. Padding reduces to px4 py6.",
+    "tablet": "Three or four columns depending on content. Bottom bar stays horizontal. Comfortable spacing.",
+    "desktop": "Full four-column grid with generous gap6 spacing. Bottom bar horizontal with logo left, social right. Full px6 py8 padding."
+  },
+  "layout_hints": {
+    "footer_priority": "Column groupings and utility links should read clearly before social or decorative elements. The footer should feel like a calm endpoint to the page, not a second hero.",
+    "bottom_bar_role": "Brand, copyright, and social actions belong in a restrained support band beneath the primary link grid.",
+    "mobile_translation": "When stacked, preserve the same information hierarchy so the footer remains scannable rather than collapsing into a dense wall of links."
+  },
+  "motion": {
+    "micro": "Links and social icons may brighten or underline subtly on hover and focus.",
+    "transitions": "Footer interactions should feel calm and understated, reinforcing that this is a utility surface rather than a marketing flourish."
+  },
+  "interactions": [
+    "hover-reveal",
+    "keyboard-navigation"
+  ],
+  "accessibility": {
+    "role": "contentinfo",
+    "aria-label": "Site footer",
+    "keyboard": [
+      "Footer links and social actions should follow a predictable top-to-bottom, left-to-right reading order."
+    ],
+    "announcements": [
+      "Link group headings and their links should be exposed semantically so the footer remains navigable without relying on column layout alone."
+    ]
+  },
+  "layout_hints": {
+    "footer_priority": "Column groupings and utility links should read clearly before social or decorative elements. The footer should feel like a calm endpoint to the page, not a second hero.",
+    "bottom_bar_role": "Brand, copyright, and social actions belong in a restrained support band beneath the primary link grid.",
+    "mobile_translation": "When stacked, preserve the same information hierarchy so the footer remains scannable rather than collapsing into a dense wall of links."
+  },
+  "motion": {
+    "micro": "Links and social icons may brighten or underline subtly on hover and focus.",
+    "transitions": "Footer interactions should feel calm and understated, reinforcing that this is a utility surface rather than a marketing flourish."
+  },
+  "accessibility": {
+    "role": "contentinfo",
+    "aria-label": "Site footer",
+    "keyboard": [
+      "Footer links and social actions should follow a predictable top-to-bottom, left-to-right reading order."
+    ],
+    "announcements": [
+      "Link group headings and their links should be exposed semantically so the footer remains navigable without relying on column layout alone."
+    ]
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col _gap8 _px6 _py8 _borderT",
+    "slots": {
+      "columns": "Grid of link groups",
+      "bottom-bar": "Logo/copyright and social icons",
+      "copyright": "Copyright notice"
+    }
+  }
+}

package/patterns/form-sections.json

@@ -0,0 +1,180 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "form-sections",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Form Sections",
+  "description": "Grouped form fields organized in labeled sections with validation",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Card",
+        "Input",
+        "Select",
+        "Switch",
+        "Checkbox",
+        "Button",
+        "Label",
+        "Textarea",
+        "RadioGroup"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Card",
+    "Input",
+    "Select",
+    "Switch",
+    "Checkbox",
+    "Button",
+    "Label",
+    "Textarea",
+    "RadioGroup"
+  ],
+  "default_preset": "settings",
+  "presets": {
+    "settings": {
+      "description": "Vertical stack of sections, each with a title/description on the left and form fields on the right (2-column layout per section). Save button at bottom.",
+      "components": [
+        "Card",
+        "Input",
+        "Select",
+        "Switch",
+        "Button",
+        "Label",
+        "Textarea"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap6 _p4",
+        "slots": {
+          "section": "Card with 2-column layout: labels left, fields right",
+          "section-title": "Section heading with _heading4 and description with _bodysm _fgmuted",
+          "field-group": "Grid of form fields with _grid _gc1 _lg:gc2 _gap4",
+          "actions": "Bottom-aligned save/cancel buttons"
+        }
+      }
+    },
+    "creation": {
+      "description": "Single-column wizard-like form with sections as steps. Progress indicator at top, prev/next buttons.",
+      "components": [
+        "Card",
+        "Input",
+        "Select",
+        "Checkbox",
+        "Button",
+        "Label",
+        "Textarea"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap6 _p4 _mw[640px] _mx[auto]",
+        "slots": {
+          "progress": "Step indicator bar at top showing current/total steps",
+          "step-card": "Single Card containing current step fields",
+          "step-title": "Step heading with _heading4",
+          "field-group": "Vertical stack of form fields with _flex _col _gap4",
+          "navigation": "Prev/Next buttons at bottom"
+        }
+      }
+    },
+    "structured": {
+      "description": "Dense form with fieldsets, collapsible sections, and inline validation. Good for complex data entry.",
+      "components": [
+        "Card",
+        "Input",
+        "Select",
+        "Checkbox",
+        "RadioGroup",
+        "Button",
+        "Label",
+        "Textarea"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap4 _p4",
+        "slots": {
+          "fieldset": "Collapsible Card section with border and legend-style title",
+          "field-row": "Horizontal field groups with _grid _gc2 _gap4 for dense layout",
+          "inline-validation": "Error text below fields with _textsm _fgdestructive",
+          "actions": "Button group with save, cancel, reset"
+        }
+      }
+    }
+  },
+  "visual_brief": "Vertical stack of grouped form fields. Each section has a heading/description on the left and form controls on the right (2-column at desktop, stacked on mobile). Labels above fields. Max-width 640px. Single card wrapping or no card. Save/cancel buttons at bottom.",
+  "layout_hints": {
+    "label_position": "stacked",
+    "note": "Labels go ABOVE their field, not side-by-side. This prevents the label-field gap problem at wide viewports.",
+    "max_width": "Form content should be constrained to max-width: 40rem (640px). Full-width forms are hard to read.",
+    "section_grouping": "Group related fields under section headers. Use a SINGLE d-surface card for the entire form, OR no card at all. Do NOT wrap each section in its own separate card.",
+    "icon_placement": "Section header icons render INLINE with the heading text (icon left of heading, vertically centered), not floating outside the card border.",
+    "select_styling": "Apply d-control to ALL form elements including <select>. Add appearance: none and a custom SVG chevron for consistent styling.",
+    "textarea": "Textareas should have min-height: 6rem to visually differentiate from single-line inputs."
+  },
+  "motion": {
+    "micro": "Collapsible sections expand/collapse with 250ms ease height transition. Validation errors shake the invalid field with a 300ms horizontal oscillation (translateX +/-4px).",
+    "transitions": "Section content fades in on expand with 200ms ease. Step transitions in creation preset cross-fade over 250ms."
+  },
+  "interactions": [
+    "animate-on-mount",
+    "inline-edit",
+    "keyboard-navigation"
+  ],
+  "responsive": {
+    "mobile": "Collapse all sections to a single column. Section titles stack above fields, actions become full-width when helpful, and dense structured layouts reduce to simple vertical groups.",
+    "tablet": "Preserve the section rhythm while allowing field groups to split into two columns only when labels and controls still read clearly.",
+    "desktop": "Use the intended multi-column section layout, but keep the overall form constrained in width so long label or helper text blocks remain readable."
+  },
+  "accessibility": {
+    "role": "form",
+    "aria-label": "Form",
+    "keyboard": [
+      "Tab navigates between form fields",
+      "Shift+Tab navigates backwards between fields",
+      "Enter submits when focus is on submit button",
+      "Space toggles checkboxes and switches",
+      "Arrow keys navigate within radio groups"
+    ],
+    "announcements": [
+      "Validation error: {field} — {message}",
+      "Section {name} expanded",
+      "Section {name} collapsed",
+      "Form submitted successfully"
+    ],
+    "focus_management": "First invalid field receives focus on failed validation. On section expand, focus moves to first field in the section. On step change in creation preset, focus moves to first field of new step."
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col _gap6 _p4",
+    "slots": {
+      "section": "Card with 2-column layout: labels left, fields right",
+      "section-title": "Section heading with _heading4 and description",
+      "field-group": "Grid of form fields with _grid _gc1 _lg:gc2 _gap4",
+      "actions": "Bottom-aligned save/cancel buttons"
+    }
+  },
+  "io": {
+    "consumes": [
+      "data"
+    ],
+    "produces": [
+      "form-data"
+    ],
+    "actions": [
+      "save",
+      "cancel",
+      "reset"
+    ]
+  },
+  "composition": {
+    "FormSections": "Container(d-section, flex-col, gap-6) > [Section[] + ActionButtons]",
+    "Section": "Card(d-surface) > [SectionTitle(heading4) + Description?(text-muted) + FieldGroup(d-control, grid: 1/2-col)]",
+    "FieldGroup": "Grid > Field[]",
+    "Field": "Stack(flex-col) > [Label(font-medium) + Input(d-control) + ErrorText?(d-annotation, text-destructive)]",
+    "ActionButtons": "Row(d-interactive) > [SaveButton(variant: primary) + CancelButton(variant: ghost)]"
+  }
+}