@decantr/content 3.8.0

package/patterns/booking-calendar.json

@@ -0,0 +1,125 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "booking-calendar",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Booking Calendar",
+  "description": "Availability-aware booking calendar with selectable time slots, optional provider selection, timezone handling, and inline confirmation for scheduling workflows.",
+  "category": "scheduling",
+  "tags": [
+    "2026",
+    "scheduling",
+    "calendar",
+    "booking",
+    "availability",
+    "time-slots",
+    "appointments"
+  ],
+  "components": [
+    "AvailabilityGrid",
+    "TimeSlot",
+    "ProviderSelector",
+    "BookingConfirmation",
+    "DatePicker",
+    "TimezoneSelector"
+  ],
+  "default_preset": "week-view",
+  "presets": {
+    "week-view": {
+      "description": "Seven-day week grid showing available time slots as selectable chips in each day column — the primary booking view for browsing availability across a week",
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gc7 _gap2 _py4 _w-full"
+      }
+    },
+    "day-view": {
+      "description": "Single-day hourly slot list with half-hour granularity — vertical stack of time slot buttons for detailed availability on a specific date",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap2 _py4 _maxw-[400px] _mx-auto"
+      }
+    },
+    "provider-select": {
+      "description": "Provider-first flow: choose a provider from avatar cards, then see their specific availability in a day or week grid below — for multi-practitioner booking scenarios",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap6 _py4 _w-full"
+      }
+    }
+  },
+  "visual_brief": "Calendar interface with a header row containing a DatePicker (left/right arrows flanking the current week or date label, e.g. 'Mar 24 - 30, 2026'), and a small TimezoneSelector dropdown in the top-right corner showing the detected timezone with a globe icon. Below the header, the week-view preset renders a 7-column grid: each column has a day label header (Mon 24, Tue 25, etc.) with today's date highlighted in accent. Within each column, available time slots appear as small outlined rectangular buttons (e.g. '9:00 AM', '9:30 AM', '10:00 AM') stacked vertically. Available slots have an accent-outlined style with hover fill. Unavailable/past slots are grayed out with reduced opacity and no pointer cursor. The currently selected slot has a filled accent background with white text and a subtle checkmark. Days with no availability show a muted 'No availability' label. The day-view preset shows a single vertical list of slot buttons at full width, grouped by morning/afternoon/evening with subtle section dividers. The provider-select preset adds a horizontal scrollable row of provider cards at the top: each card shows a circular avatar (48px), provider name below, and a specialty/role label in muted text. The selected provider card has an accent border ring. Below the provider row, the availability grid (week or day) loads for that provider. When a time slot is selected, a BookingConfirmation card slides up from the bottom (or appears as an adjacent panel on desktop): it shows the selected provider's avatar and name, the date and time in bold, the duration (e.g. '30 min'), the timezone, and a prominent 'Confirm Booking' primary button with a secondary 'Cancel' text button. The confirmation card has a surface background with slight elevation (shadow-md).",
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col _gap4 _py4 _w-full",
+    "slots": {
+      "controls-bar": "A horizontal row at the top containing: the DatePicker on the left (back/forward arrow buttons flanking a week or date range label, clickable to open a mini calendar popover), a view toggle in the center (Week / Day segmented control), the ProviderSelector (only in provider-select preset, otherwise hidden) as a horizontal scrollable row of avatar cards, and the TimezoneSelector on the right as a small dropdown with globe icon showing the current timezone abbreviation.",
+      "availability-grid": "The main scheduling area. In week-view: a 7-column CSS grid with sticky day-name headers. Each column contains vertically stacked TimeSlot buttons for that day's available times. Columns have equal width and a subtle vertical separator between them. In day-view: a single column of TimeSlot buttons with time labels, grouped under 'Morning', 'Afternoon', 'Evening' subheadings. The grid loads availability data per provider and date range, showing a skeleton shimmer during fetch.",
+      "time-slot": "Individual bookable time chip. Renders as a rounded button (border-radius: 8px, padding: 8px 16px). States: available (outlined accent border, transparent background, accent text), unavailable (gray border, gray text, opacity 0.4, cursor not-allowed), selected (filled accent background, white text, checkmark icon), hovered (accent background at 10% opacity). Shows the time label (e.g. '2:30 PM'). Slots are 30-min intervals by default.",
+      "booking-confirmation": "Conditional panel that appears after a time slot is selected. Card with surface background and shadow-md elevation. Contains: provider avatar (40px) and name in a row, a horizontal divider, the selected date in bold (e.g. 'Wednesday, March 25, 2026'), the selected time range (e.g. '2:30 PM - 3:00 PM'), timezone label, duration badge (e.g. '30 min'), a primary 'Confirm Booking' button (full-width), and a text 'Cancel' link below it. On confirmation, the button shows a spinner then transitions to a success checkmark with 'Booked!' text."
+    }
+  },
+  "responsive": {
+    "mobile": "Week-view switches to a horizontal scrollable day strip (shows 3 days visible, swipe for more) with the selected day's slots below as a vertical list. DatePicker becomes a compact single-date selector. Provider cards scroll horizontally. Booking confirmation renders as a bottom sheet that slides up. Time slots are full-width buttons with larger tap targets (min 44px height).",
+    "tablet": "Week-view shows all 7 columns at comfortable width. Provider cards remain a horizontal row. Booking confirmation appears as a right-side panel or inline below the grid. Standard touch target sizes.",
+    "desktop": "Full 7-column week grid with generous slot spacing. Booking confirmation appears as a fixed sidebar panel on the right (30% width) alongside the grid. Provider cards display with additional detail (next available time). Hover states are fully active."
+  },
+  "motion": {
+    "micro": {
+      "slot-hover": "background-color accent/10 + border-color accent 120ms ease-out",
+      "slot-select": "scale(0.97→1) + background-fill 150ms ease-out",
+      "provider-card-hover": "translateY(-2px) + shadow-md 150ms ease-out"
+    },
+    "transitions": {
+      "confirmation-enter": "translateY(24px)→0 + opacity 0→1 350ms ease-out",
+      "confirmation-exit": "translateY(0)→24px + opacity 1→0 250ms ease-in",
+      "week-navigate": "translateX(±100%)→0 + opacity 0→1 300ms ease-out",
+      "confirm-success": "button-width shrink + checkmark-scale(0→1) 400ms ease-out"
+    },
+    "ambient": {
+      "skeleton-shimmer": "background-position sweep left→right 1.5s ease-in-out infinite during loading"
+    }
+  },
+  "interactions": [
+    "click-select",
+    "drag-reorder",
+    "keyboard-navigation",
+    "animate-on-mount"
+  ],
+  "composition": {
+    "BookingCalendar": "Container(d-section, flex-col, gap-4) > [ControlsBar(d-control) > [ProviderSelector?(d-control, horizontal-scroll) + DatePicker(d-control) + TimezoneSelector(d-control, dropdown)] + AvailabilityGrid(d-surface, grid: week|day) > TimeSlot(d-interactive, selectable, state: available|unavailable|selected)* + BookingConfirmation?(d-surface, elevation-md, conditional: slot-selected)]",
+    "ProviderSelector": "Row(d-control, horizontal-scroll) > ProviderCard(d-interactive, selectable) > [Avatar(d-annotation, circle) + Name(d-data) + Role(d-annotation, muted)]",
+    "AvailabilityGrid": "Grid(d-surface, columns: 7|1) > DayColumn(d-data, sticky-header) > [DayLabel(d-annotation) + TimeSlot(d-interactive)[]]",
+    "BookingConfirmation": "Card(d-surface, shadow-md) > [ProviderRow > [Avatar + Name] + Divider + DateLabel(d-data, bold) + TimeRange(d-data) + TimezoneLabel(d-annotation) + DurationBadge(d-annotation) + ConfirmButton(d-interactive, variant: primary, full-width) + CancelLink(d-interactive, text)]"
+  },
+  "layout_hints": {
+    "calendar_priority": "Availability and selection state should be clear before provider metadata or secondary controls. The user should immediately understand when they can book.",
+    "confirmation_attachment": "The confirmation card should feel attached to the selected slot and provider rather than like a separate checkout surface.",
+    "mobile_fallback": "On small screens, preserve the same sense of temporal availability even when controls collapse and the grid becomes denser."
+  },
+  "layout_hints": {
+    "calendar_priority": "Availability and selection state should be clear before provider metadata or secondary controls. The user should immediately understand when they can book.",
+    "confirmation_attachment": "The confirmation card should feel attached to the selected slot and provider rather than like a separate checkout surface.",
+    "mobile_fallback": "On small screens, preserve the same sense of temporal availability even when controls collapse and the grid becomes denser."
+  },
+  "accessibility": {
+    "role": "application",
+    "aria-label": "Booking calendar with time slot selection",
+    "keyboard": [
+      "Arrow Left/Right: navigate between days in week-view",
+      "Arrow Up/Down: navigate between time slots within a day",
+      "Enter/Space: select the focused time slot or confirm booking",
+      "Tab: move between controls (date picker, timezone, provider, grid, confirmation)",
+      "Escape: deselect current slot or dismiss confirmation",
+      "P: focus provider selector (when available)",
+      "T: open timezone selector"
+    ],
+    "announcements": [
+      "Viewing availability for {date_range}",
+      "Provider {name} selected, loading availability",
+      "Time slot {time} on {date}: {status}",
+      "Selected {time} on {date} with {provider}. Confirm or press Escape to cancel",
+      "Booking confirmed: {date} at {time} with {provider}",
+      "Timezone changed to {timezone}"
+    ]
+  }
+}

package/patterns/bottom-tab-bar.json

@@ -0,0 +1,117 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "bottom-tab-bar",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Bottom Tab Bar",
+  "description": "Mobile-first fixed-bottom tab navigator with 4-5 icon+label items. The primary navigation affordance for mobile consumer apps. Active tab signaled via color shift, icon scale, and an underline dot. Sticky on desktop within the centered column. Pairs with the mobile-tab-bar shell.",
+  "category": "navigation",
+  "tags": [
+    "2026",
+    "mobile",
+    "navigation",
+    "tab-bar",
+    "bottom-nav",
+    "consumer"
+  ],
+  "components": [
+    "TabBar",
+    "TabItem",
+    "TabIcon",
+    "TabLabel",
+    "ActiveIndicator",
+    "BadgeDot"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Four-item bottom tab bar with icon above label. Active item has color-shift, icon scale, and underline dot. Sticky bottom on mobile, sticky bottom of centered column on desktop.",
+      "layout": {
+        "layout": "flex-row",
+        "atoms": "_sticky _bottom-0 _z-40 _flex _items-center _justify-around _w-full _h-16 _bg-background/85 _backdrop-blur _border-t _border-border"
+      }
+    },
+    "five-item": {
+      "description": "Five-item variant for apps with an additional primary tab (e.g., separate Discover, Search, and Profile tabs). Slightly tighter spacing per item.",
+      "layout": {
+        "layout": "flex-row",
+        "atoms": "_sticky _bottom-0 _z-40 _flex _items-center _justify-around _w-full _h-16 _bg-background/85 _backdrop-blur _border-t _border-border"
+      }
+    },
+    "compact-no-labels": {
+      "description": "Icon-only variant with no labels — used when the icons are universally known (e.g., the four signature SwipeCircle icons). Slightly shorter at 56px height.",
+      "layout": {
+        "layout": "flex-row",
+        "atoms": "_sticky _bottom-0 _z-40 _flex _items-center _justify-around _w-full _h-14 _bg-background/85 _backdrop-blur _border-t _border-border"
+      }
+    }
+  },
+  "visual_brief": "A bar pinned to the bottom of the viewport (or the bottom of a centered 480px column on desktop). The bar is 64px tall plus safe-area-inset-bottom on iOS. It hosts 4 evenly-distributed tap targets (5 in the five-item variant), each at minimum 56×56px for thumb-friendliness. The bar uses a translucent backdrop-blur background (85% opacity of the page background, blur 16px) so content scrolling behind subtly tints through. A 1px soft border-top in the muted border color is the only visual separator from the body — no harsh hairline. Each TabItem is a vertical flex stack: a 24×24px Lucide icon (stroke-width 2) on top with 4px gap to a 11px uppercase-ish label below (font-weight 500, tracking-tight, color: var(--d-text-muted) for inactive). The active TabItem shifts color from muted to primary (coral), the icon scales up 1.1× with a spring transition (180ms cubic-bezier(0.34, 1.56, 0.64, 1)), and a 4px circular dot in violet (the secondary/match color) appears 2px below the icon centered horizontally — a subtle but unmistakable signal of selected state. On tap, the entire item briefly scales down to 0.96 for tactile feedback, then snaps back via spring. Optional BadgeDot: a 6px circle in the violet match color positioned at top-right of the icon (translateX 8px translateY -4px) signals unread items in that tab (e.g., new matches, unread chats). The bar is z-index 40 and sits above body content but below modals/celebrations (z-50+).",
+  "layout_hints": {
+    "container": "sticky-bottom flex-row",
+    "tab_target": "Each tab is min 56×56px tap area; vertical flex with 4px gap between icon and label",
+    "active_signal": "Color shift muted→primary AND icon scale 1.1× AND violet dot 4px below icon — three redundant signals for accessibility",
+    "translucency": "backdrop-blur(16px) with 85% bg-opacity. Required: page bg color set as CSS var so the rgba()-with-var pattern works",
+    "safe_area": "Padding bottom uses calc(8px + env(safe-area-inset-bottom)) — accommodates iOS home indicator without forcing the inset on every page"
+  },
+  "default_layout": {
+    "layout": "flex-row",
+    "atoms": "_sticky _bottom-0 _z-40 _flex _items-center _justify-around _w-full _h-16 _bg-background/85 _backdrop-blur _border-t _border-border",
+    "slots": {
+      "tab-bar": "Outer container. Sticky bottom (mobile and desktop). Flex-row, items-center, justify-around. Height 64px + env(safe-area-inset-bottom). Padding 8px 12px calc(8px + env(safe-area-inset-bottom)). Background: var(--d-bg) at 85% opacity with backdrop-filter blur(16px). Border-top: 1px solid var(--d-border). Z-index 40. Width 100% inside the parent shell column.",
+      "tab-item": "Repeating slot — one per tab (4 in standard, 5 in five-item, 4 in compact-no-labels). Vertical flex column, items-center, gap 4px, padding 4px 8px. Min size 56×56. Cursor: pointer. Tap target satisfies WCAG 2.5.5 (44×44 minimum, exceeded). Each item carries data-active true|false and aria-current page when active. Click navigates via the route bound to that tab. On press: scale 0.96 with 80ms transition, then spring back to 1.0 with 180ms cubic-bezier(0.34, 1.56, 0.64, 1).",
+      "tab-icon": "24×24 icon (Lucide preferred — Heart, Users, MessageCircle, User, Search, Compass for SwipeCircle). Stroke-width 2. Color: var(--d-text-muted) when inactive, var(--d-primary) when active. Active state adds transform: scale(1.1) and translateY(-2px) lift, transitioned with 200ms cubic-bezier(0.34, 1.56, 0.64, 1).",
+      "tab-label": "Single-line label below icon, font-size 11px, font-weight 500 inactive / 600 active, letter-spacing 0.01em, white-space nowrap, color matches icon. In compact-no-labels preset, this slot is omitted entirely.",
+      "active-indicator": "4×4px circular dot in var(--d-secondary) (violet match accent), positioned absolute below the icon (transform: translateY(2px)). Visible only on the active tab. Animates in via opacity 0→1 (160ms) and scale 0→1 (160ms cubic-bezier(0.34, 1.56, 0.64, 1)) when the tab becomes active.",
+      "badge-dot": "Optional 6×6px circle in var(--d-secondary), positioned absolute at top-right of the icon (translateX 8px, translateY -4px). Indicates unread/new items in this tab. May contain a tiny number for counts >0 — but typically just a dot. Pulse animation on appearance: scale 0→1.2→1 over 320ms."
+    }
+  },
+  "accessibility": {
+    "role": "tablist",
+    "aria-label": "Primary navigation",
+    "keyboard": [
+      "Arrow Right: focus next tab",
+      "Arrow Left: focus previous tab",
+      "Home: focus first tab",
+      "End: focus last tab",
+      "Enter or Space: activate focused tab",
+      "Tab: move focus into the active tab's content body"
+    ],
+    "announcements": [
+      "Tab activated: {tab_label} — showing {page_name}",
+      "Unread items in {tab_label}"
+    ],
+    "focus_management": "Roving tabindex — only the active tab is in the tab order (tabindex=0); inactive tabs are tabindex=-1 and become reachable via arrow keys. On tab activation via click/Enter, focus moves to the new active tab and the page navigates."
+  },
+  "responsive": {
+    "mobile": "Full viewport width. Sticky bottom with safe-area-inset-bottom padding. Tap targets 56×56 minimum. Flex-row layout.",
+    "tablet": "Same as mobile — the mobile-tab-bar shell caps at 480px regardless of viewport. Flex-row layout.",
+    "desktop": "Stays sticky at the bottom of the centered 480px column. Same icon and label sizing — desktop visitors see a mobile-app-like floating column. Flex-row layout."
+  },
+  "motion": {
+    "micro": {
+      "tab-press": "scale(0.96) for 80ms then spring back to scale(1) over 180ms cubic-bezier(0.34, 1.56, 0.64, 1)",
+      "icon-active": "translateY(-2px) + scale(1.1) over 200ms spring on tab activation",
+      "indicator-appear": "opacity 0→1 + scale 0→1 over 160ms spring when tab becomes active",
+      "label-active": "color transition muted→primary over 200ms ease-out"
+    },
+    "transitions": {
+      "tab-switch": "When tab changes, the previous active tab's icon scales back to 1.0 and color fades to muted (200ms), and the new active tab's icon scales up and the violet dot appears (200ms) — overlapping for a smooth crossfade",
+      "badge-pulse": "On new badge appearance: scale 0→1.2→1 over 320ms, then optional gentle pulse (scale 1→1.06→1 over 1.6s ease-in-out infinite) to keep attention until viewed"
+    }
+  },
+  "interactions": [
+    "click-select",
+    "scale-hover",
+    "keyboard-navigation",
+    "animate-on-mount"
+  ],
+  "composition": {
+    "BottomTabBar": "TabBar(d-floating-bar, sticky-bottom, flex-row) > [TabItem×4 | TabItem×5]",
+    "TabItem": "Button(flex-col, items-center, gap-1) > [TabIcon(24px) + TabLabel(11px) + ActiveIndicator(4px-dot, conditional) + BadgeDot(6px-circle, conditional)]",
+    "TabIcon": "Icon(lucide, 24px, stroke-2) — Heart | Users | MessageCircle | User | Search | Compass",
+    "TabLabel": "Span(text-xs, font-medium, whitespace-nowrap)",
+    "ActiveIndicator": "Span(absolute, 4px-circle, bg-secondary, below-icon)",
+    "BadgeDot": "Span(absolute, 6px-circle, bg-secondary, top-right-of-icon)"
+  }
+}

package/patterns/breadcrumb-nav.json

@@ -0,0 +1,111 @@
+{
+  "id": "breadcrumb-nav",
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Breadcrumb Nav",
+  "description": "A hierarchical path navigation component with text links, chevron separators, and smart overflow handling that collapses middle segments into a dropdown menu.",
+  "category": "navigation",
+  "tags": [
+    "2026",
+    "navigation",
+    "breadcrumb",
+    "hierarchy",
+    "wayfinding",
+    "overflow"
+  ],
+  "components": [
+    "BreadcrumbList",
+    "BreadcrumbItem",
+    "Separator",
+    "OverflowMenu"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Text-only breadcrumb links separated by chevron icons, with the current page displayed as bold non-interactive text — the most common navigation breadcrumb style",
+      "layout": {
+        "layout": "inline",
+        "atoms": "_flex _align-center _gap-1 _flex-wrap-nowrap _overflow-hidden"
+      }
+    },
+    "icon": {
+      "description": "Breadcrumb items with small folder or category icons preceding each label, adding visual context for file-system or content-hierarchy navigation",
+      "layout": {
+        "layout": "inline",
+        "atoms": "_flex _align-center _gap-1 _flex-wrap-nowrap _overflow-hidden"
+      }
+    },
+    "dropdown": {
+      "description": "Breadcrumb with overflow handling that collapses middle path segments into an ellipsis button which opens a dropdown listing the hidden segments — essential for deep hierarchies",
+      "layout": {
+        "layout": "inline",
+        "atoms": "_flex _align-center _gap-1 _flex-wrap-nowrap _overflow-hidden"
+      }
+    }
+  },
+  "visual_brief": "A single horizontal line of text links representing the navigation hierarchy, rendered as an ordered list (ol) with inline-flex items. Each breadcrumb item is a text link in text-sm (14px) with text-muted color that transitions to text-default on hover with a subtle underline (text-decoration: underline with underline-offset: 2px). Between each item sits a chevron separator: a small right-pointing angle bracket (›) rendered as a 12px SVG icon in text-muted color with 4px horizontal margin on each side. The current (last) breadcrumb item is rendered as plain text (not a link) in text-default color with font-semibold weight and no hover interaction — it represents the active page. The first item is typically 'Home' and can optionally display a home icon (16px) instead of text. When the path exceeds the available width (measured on mount and resize), the component enters overflow mode: the first item and the last two items remain visible, and all middle items collapse into a single overflow button displayed as '...' (three dots) styled as a small pill button (24px height, 32px width, bg-surface-subtle, border-radius-md, text-muted, hover: bg-surface-hover). Clicking the overflow button opens a dropdown menu (d-surface card with elevation, border-radius-md, min-width: 160px) positioned below the button, listing the hidden segments as menu items (text-sm, padding: 8px 12px, hover: bg-surface-subtle). Each menu item is a link that navigates to that hierarchy level. The dropdown closes on outside click, Escape, or selecting an item. In the icon preset, each breadcrumb item has a small 14px icon to the left of the label: a home icon for the root, a folder icon for intermediate levels, and a document/page icon for the current page. Icons are text-muted color, matching the link color behavior on hover. The entire breadcrumb component has 0 vertical padding (it inherits line-height from the parent) and sits naturally inline within a page header or toolbar.",
+  "layout_hints": {
+    "container": "inline or header",
+    "note": "Breadcrumbs are typically placed at the top of a page content area, below the main navigation but above the page title. They should not be wrapped in a card — render inline. The component has a max-width of 100% and uses overflow: hidden with text-overflow on individual items if a single label is too long.",
+    "overflow_threshold": "The overflow collapse triggers when the total rendered width of all items exceeds the container width. Measure on mount and on window resize. Always keep the first item and the last 2 items visible; collapse everything in between into the overflow menu.",
+    "separator_style": "Use a chevron (›) SVG icon, not a text character. The icon is 12px × 12px, color: text-muted, with 4px margin-left and 4px margin-right. Do not use slashes (/) or greater-than signs (>) as separators."
+  },
+  "default_layout": {
+    "layout": "inline",
+    "atoms": "_flex _align-center _gap-1 _overflow-hidden _text-sm",
+    "slots": {
+      "breadcrumb-list": "The outer container, rendered as an <ol> element with list-style: none and display: flex, align-items: center, gap: 4px. flex-wrap: nowrap to keep all items on a single line. overflow: hidden to clip content that exceeds the container width. The list has role='navigation' and aria-label='Breadcrumb'. Padding: 0, margin: 0. The component measures its own width on mount and on resize to determine if overflow collapse is needed. If the combined width of all items plus separators exceeds the container width, it enters overflow mode.",
+      "breadcrumb-item": "Repeating slot — one per hierarchy level. Each item is an <li> with display: inline-flex, align-items: center, white-space: nowrap. Non-current items render as <a> links with text-sm (14px), color: text-muted, text-decoration: none. Hover: color transitions to text-default (150ms ease), text-decoration: underline with underline-offset: 2px. Focus-visible: 2px accent outline with 2px offset, border-radius-sm. The current item (last in the list) renders as a <span> (not a link) with font-semibold, color: text-default, aria-current='page'. Max-width per item: 200px with text-overflow: ellipsis and overflow: hidden for long labels. In the icon preset, each item also contains a 14px icon (home, folder, or document) to the left of the label with a 4px gap.",
+      "separator": "Repeating slot — one between each pair of breadcrumb items. Renders as a 12px × 12px right-pointing chevron SVG icon (a simple > shape with 1.5px stroke, stroke-linecap: round). Color: text-muted. aria-hidden='true' since it is decorative. Flex-shrink: 0 to prevent the separator from collapsing. Margin: 0 4px. The separator is an <li> with role='presentation' to exclude it from the list semantics.",
+      "overflow-menu": "Conditionally rendered when the breadcrumb path is too long for the container. Replaces the collapsed middle items with a single button displaying '...' (or an ellipsis icon). The button is 24px tall, 32px wide, bg-surface-subtle, border-radius-md, border: 1px solid border-muted, text-muted color, font-semibold. Hover: bg-surface-hover. Focus-visible: 2px accent outline. Clicking opens a dropdown menu absolutely positioned below the button (top: calc(100% + 4px), left: 0). The dropdown is a d-surface card with border-radius-md, box-shadow: 0 4px 12px rgba(0,0,0,0.1), padding: 4px 0, min-width: 160px, max-height: 240px, overflow-y: auto. Each hidden segment is a menu item: an <a> link with display: block, padding: 8px 12px, text-sm, text-default, hover: bg-surface-subtle. Items are listed in hierarchy order (top = shallowest). The menu has role='menu' and each item has role='menuitem'. Closes on outside click, Escape, or item selection. Opening animation: opacity 0→1 + translateY(-4px)→0, 150ms ease-out."
+    }
+  },
+  "accessibility": {
+    "role": "navigation",
+    "aria-label": "Breadcrumb navigation",
+    "announcements": [
+      "You are here: {currentPage}",
+      "Breadcrumb path: {path segments joined by comma}",
+      "Overflow menu opened with {count} hidden segments",
+      "Navigated to {page}"
+    ],
+    "keyboard": [
+      "Tab: move focus between breadcrumb links and overflow button",
+      "Enter: activate focused breadcrumb link or open overflow menu",
+      "Escape: close overflow dropdown menu",
+      "Arrow Down: move focus to next item in overflow dropdown",
+      "Arrow Up: move focus to previous item in overflow dropdown",
+      "Home: move focus to first item in overflow dropdown",
+      "End: move focus to last item in overflow dropdown"
+    ]
+  },
+  "responsive": {
+    "mobile": "Breadcrumbs aggressively collapse — only the parent (one level up) and current page are shown, with all earlier levels in the overflow menu. Max item width reduces to 120px. The overflow dropdown renders full-width at the bottom of the breadcrumb row. Touch targets are 44px minimum height.",
+    "tablet": "Breadcrumbs show the first item, overflow, and last 2 items. Max item width 160px. Touch targets are 40px. Dropdown renders normally below the overflow button.",
+    "desktop": "Full breadcrumb path shown if it fits. Overflow only triggers when the path exceeds container width. Max item width 200px. Hover states active on links. Dropdown has max-height 240px with scroll for very deep hierarchies."
+  },
+  "motion": {
+    "micro": {
+      "link-hover": "color transition 150ms ease",
+      "overflow-button-hover": "background-color transition 120ms ease"
+    },
+    "transitions": {
+      "dropdown-open": "opacity 0→1 + translateY(-4px)→0, 150ms ease-out",
+      "dropdown-close": "opacity 1→0 + translateY(0)→(-4px), 100ms ease-in",
+      "overflow-collapse": "items fade out 150ms as they collapse into the overflow button on resize"
+    },
+    "ambient": {}
+  },
+  "interactions": [
+    "hover-reveal",
+    "keyboard-navigation"
+  ],
+  "composition": {
+    "BreadcrumbNav": "Nav(role=navigation, aria-label=Breadcrumb) > BreadcrumbList(ol)",
+    "BreadcrumbList": "List(ol, inline-flex, nowrap) > [BreadcrumbItem + Separator]* + BreadcrumbItem(current)",
+    "BreadcrumbItem": "ListItem(li) > Link(a, text-muted, hover:text-default) | Span(current, font-semibold)",
+    "Separator": "ListItem(li, role=presentation, aria-hidden) > ChevronIcon(12px, text-muted)",
+    "OverflowMenu": "Button('...', pill) + Dropdown(d-surface, elevated) > MenuItem*(a, role=menuitem)"
+  }
+}

package/patterns/budget-sankey.json

@@ -0,0 +1,103 @@
+{
+  "id": "budget-sankey",
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Budget Sankey",
+  "description": "Sankey flow diagram visualizing budget allocation from revenue sources through categories to individual line items with proportional flow widths.",
+  "category": "civic",
+  "tags": ["2026", "civic", "budget", "sankey", "allocation", "flow", "visualization"],
+  "components": ["SankeyCanvas", "FlowLine", "NodeBlock", "FlowLabel", "AmountTooltip"],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Full left-to-right Sankey flow diagram showing sources, categories, and line items with proportional flows for complete budget visibility",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _flex-col _gap-4 _p-6 _w-full _bg-surface _min-h-[500px]"
+      }
+    },
+    "simplified": {
+      "description": "Two-column simplified flow showing only top-level sources to categories, suitable for executive summary and overview dashboards",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _flex-col _gap-4 _p-6 _w-full _bg-surface _min-h-[360px]"
+      }
+    },
+    "detail": {
+      "description": "Expanded flow with drill-down drawers showing sub-allocations for each line item, enabling exploration of budget details on demand",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _flex-col _gap-4 _p-6 _w-full _bg-surface _min-h-[600px]"
+      }
+    }
+  },
+  "visual_brief": "A horizontal flow diagram rendered as SVG with three vertical columns of nodes arranged left-to-right. Left column shows revenue sources as vertical bar blocks (e.g. Property Tax, Sales Tax, Federal Grants, Fees) sized proportionally to their contribution amount. Middle column shows spending categories (Education, Infrastructure, Public Safety, Health Services) as similar bar blocks. Right column shows specific line items (Teacher Salaries, Road Repair, Police Equipment) in more granular blocks. Flows between columns are curved bezier paths with widths proportional to the dollar amount they represent. Each flow is colored by its source column (e.g. all flows from Property Tax share a green tint, federal grants are blue). Flows have subtle gradient transitions where they enter each node. Hovering a flow brightens it while dimming others and shows an amount tooltip near cursor (e.g. '$12.4M → Education'). Node labels sit alongside each block showing name and total amount in monospace. Animation: flows fade in sequentially from left to right on initial load.",
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _flex-col _gap-4 _p-6 _w-full _bg-surface _min-h-[500px]",
+    "slots": {
+      "sankey-canvas": "Main SVG canvas containing all nodes and flow lines. Responsive to container width. Uses viewBox for scaling.",
+      "node-block": "Vertical rectangle representing a source, category, or line item. Height proportional to total flow volume. Positioned in column layout. Hover highlights all connected flows.",
+      "flow-line": "Curved bezier path connecting source node to target node. Width proportional to flow amount. Opacity 60% default, 90% on hover, 20% on other-flow hover.",
+      "flow-label": "Amount label positioned at the midpoint of each major flow showing the dollar value. Visible only for significant flows (>5% of total).",
+      "amount-tooltip": "Floating tooltip that follows cursor showing precise flow details: source → target and exact amount.",
+      "column-header": "Column labels at the top of each vertical node group (Sources, Categories, Line Items)."
+    }
+  },
+  "responsive": {
+    "mobile": "Simplified to 2-column view (source to category only). Labels wrap below nodes. Tooltip becomes bottom sheet. Scrollable if labels overflow.",
+    "tablet": "Full 3-column layout with slightly reduced label typography. Touch tap reveals tooltip.",
+    "desktop": "Full flow layout with hover tooltips, highlighted flow interactions, and keyboard navigation through nodes."
+  },
+  "layout_hints": {
+    "flow_priority": "The user should understand how money moves before reading every label. Preserve a clear left-to-right narrative from revenue to categories to line items.",
+    "node_balance": "Node labels and totals should support the flow structure without crowding the paths. Let the widths and positions carry the primary meaning.",
+    "mobile_fallback": "Two-column mode should still feel like a real budget flow explanation, not a simplified infographic detached from the full logic."
+  },
+  "layout_hints": {
+    "flow_priority": "The user should understand how money moves before reading every label. Preserve a clear left-to-right narrative from revenue to categories to line items.",
+    "node_balance": "Node labels and totals should support the flow structure without crowding the paths. Let the widths and positions carry the primary meaning.",
+    "mobile_fallback": "Two-column mode should still feel like a real budget flow explanation, not a simplified infographic detached from the full logic."
+  },
+  "motion": {
+    "micro": {
+      "flow-hover": "opacity transition 150ms ease-out + dim siblings",
+      "node-hover": "stroke highlight + connected-flow brighten 200ms ease-out"
+    },
+    "transitions": {
+      "initial-load": "flows fade-in staggered left-to-right 800ms total with ease-out",
+      "drill-down": "node expand + child flows animate in 400ms spring"
+    },
+    "ambient": {
+      "flow-active": "subtle gradient animation along path 4s linear infinite suggesting money movement"
+    }
+  },
+  "interactions": [
+    "hover-tooltip",
+    "animate-on-mount",
+    "click-select"
+  ],
+  "composition": {
+    "BudgetSankey": "Root(d-section, stack) > [ColumnHeaders + SankeyCanvas]",
+    "SankeyCanvas": "SVG(viewBox) > [NodeBlock* + FlowLine* + FlowLabel*]",
+    "NodeBlock": "Rect(positioned, sized-by-total) + Label(alongside)",
+    "FlowLine": "Path(bezier-curve, width-by-amount, color-by-source)",
+    "AmountTooltip": "Floating(follows-cursor, d-annotation, backdrop-blur)"
+  },
+  "accessibility": {
+    "role": "figure",
+    "aria-label": "Budget allocation flow diagram",
+    "announcements": [
+      "{source} contributes {amount} to {category}",
+      "Total budget: {total}",
+      "{node} selected with {count} connections"
+    ],
+    "keyboard": [
+      "Tab: cycle through nodes",
+      "Arrow keys: navigate column and between columns",
+      "Enter: drill-down into focused node",
+      "Escape: close drill-down view"
+    ]
+  }
+}

package/patterns/calendar-view.json

@@ -0,0 +1,143 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "calendar-view",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Calendar View",
+  "description": "Multi-mode calendar with day, week, and month views, event creation via click-and-drag, and drag-to-reschedule functionality.",
+  "category": "scheduling",
+  "tags": [
+    "2026",
+    "calendar",
+    "scheduling",
+    "events",
+    "date-picker",
+    "drag-and-drop",
+    "time-management"
+  ],
+  "components": [
+    "CalendarGrid",
+    "DayCell",
+    "WeekColumn",
+    "TimeSlot",
+    "EventChip",
+    "EventPopover",
+    "ViewSwitcher",
+    "NavigationBar",
+    "MiniCalendar"
+  ],
+  "default_preset": "month",
+  "presets": {
+    "month": {
+      "description": "Full month grid overview showing up to 3 events per day cell with overflow count — best for high-level schedule overview and planning",
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _grid-cols-7 _gap-px _bg-border _rounded _overflow-hidden"
+      }
+    },
+    "week": {
+      "description": "Seven-day column layout with 15-minute time slots, events positioned absolutely by start/end time — ideal for detailed daily scheduling",
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _grid-cols-8 _h-full _overflow-y-auto _bg-surface"
+      }
+    },
+    "day": {
+      "description": "Single day detail view with full time-slot granularity and expanded event cards showing descriptions and attendees",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _h-full _overflow-y-auto _bg-surface"
+      }
+    },
+    "agenda": {
+      "description": "Chronological list view of upcoming events grouped by day — compact, scannable, accessible format without spatial positioning",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap-2 _p-4 _overflow-y-auto _bg-surface"
+      }
+    }
+  },
+  "visual_brief": "A clean, structured calendar interface built on hairline borders (1px, var(--d-border-subtle)) forming a precise grid. The NavigationBar spans the full width at the top: a left-aligned row with back/forward chevron buttons, a bold month+year title (e.g., 'April 2026' in text-lg font-semibold), and a 'Today' pill button that jumps to the current date. Right-aligned is the ViewSwitcher — a segmented control with four options (Month, Week, Day, Agenda) rendered as connected pill buttons with the active one filled with accent color and white text. Below the nav bar in month view, a day-of-week header row shows abbreviated day names (Mon, Tue, ...) in text-xs uppercase tracking-wide text-muted. The month grid itself has 5-6 rows of 7 cells each. Each DayCell has the date number in the top-left corner (text-sm), with today's date rendered inside a filled accent-color circle (24px diameter) with white text, creating a distinctive marker. Days outside the current month show muted text at 40% opacity. Events within each cell are rendered as small rounded pill chips (border-radius: 4px, height 20px) with a category-specific left color stripe (4px wide): blue for meetings, green for personal, purple for external, amber for deadlines. Event chip text is truncated with ellipsis at the cell boundary. When more than 3 events exist in a day, a '+N more' text link in text-xs text-muted appears below the visible chips, clickable to expand. In week view, time columns show alternating subtle background stripes (transparent and var(--d-bg-muted) at 30% opacity) for each hour block, with 15-minute subdivisions marked by dotted hairlines. Events are absolutely positioned rectangles spanning their time range, with rounded corners (6px), category-colored left border (3px), white/surface background, and a subtle left-edge shadow. Overlapping events are laid out side-by-side at reduced width. The current time is indicated by a horizontal red line (2px) with a small red circle (8px) on the left edge, extending across all columns. Click-and-drag event creation renders a translucent preview chip (40% opacity, accent-colored) that snaps to 15-minute increments. The EventPopover appears on click as a 320px-wide floating card with event title, time range, location, description, attendee avatars, and edit/delete actions. The optional MiniCalendar is a small (200px wide) month grid in the sidebar showing dots beneath days that have events.",
+  "layout_hints": {
+    "container": "bordered-grid",
+    "note": "Month view uses CSS Grid with 7 columns. Week view uses 8 columns (1 for time labels + 7 for days). Day cells in month view should have min-height of 100px to accommodate event chips.",
+    "today_marker": "Today's date number MUST be rendered inside a filled circle. Use a 24px width/height circle with background var(--d-accent), color white, border-radius 50%, display flex align-items-center justify-center. This is the most recognizable calendar convention — do not omit it.",
+    "event_chips": "Event chips use a compact pill style. Height 20px in month view, dynamic height in week/day view based on duration. Category colors are communicated via a left border strip, NOT full background fill — the chip background stays var(--d-bg-surface) or very light tint of the category color.",
+    "time_grid": "In week/day views, the time gutter on the left shows hour labels (text-xs, text-muted) aligned to the top of each hour row. The grid lines are hairline (1px solid var(--d-border-subtle)). Alternate hour blocks use a barely-visible background tint for scanability.",
+    "current_time_line": "A 2px-tall horizontal line in var(--d-error) red spanning the full width of the time grid, positioned at the exact current time. A small 8px filled circle sits at the left edge. This line updates its position every minute."
+  },
+  "default_layout": {
+    "layout": "grid",
+    "atoms": "_flex _col _h-full _bg-surface _rounded _border",
+    "slots": {
+      "navigation-bar": "Full-width top bar with 48px height, horizontal flex layout, items centered vertically. Left section: previous month/week chevron button (icon-only, 32px square, ghost style, rounded), next chevron button. Center or left-of-center: current period label (e.g., 'April 2026') in text-lg font-semibold. A 'Today' button as a small outlined pill (text-xs, border 1px solid var(--d-border), rounded-full, padding 4px 12px) appears beside the label and is only visible when the view is not showing the current period. Right section: the ViewSwitcher segmented control.",
+      "view-switcher": "A segmented button group with 4 options: Month, Week, Day, Agenda. Rendered as connected buttons with shared border (1px solid var(--d-border)), border-radius on the outer edges only. The active segment has background var(--d-accent) with white text. Inactive segments have transparent background with text-muted that strengthens on hover. Transition between active states animates a background slide (200ms ease-out).",
+      "day-header-row": "A row of 7 day-name labels positioned above the month grid. Each label shows the abbreviated day name (Mon, Tue, Wed, Thu, Fri, Sat, Sun) in text-xs uppercase tracking-widest text-muted font-medium. Weekend days (Sat, Sun) may use a slightly different muted tone. Height 32px, border-bottom 1px solid var(--d-border-subtle).",
+      "day-cell": "Repeating slot — one per day in the visible grid. Each cell is a rectangular area within the CSS grid. Padding 4px 8px. The date number sits in the top-left corner as text-sm. Today's date gets the filled accent circle treatment (24px, centered number, white text on accent background). Days outside the current month render with opacity 0.4. Below the date number, events stack vertically with 2px gaps. Each event is an EventChip. After the 3rd event, remaining events collapse into a '+N more' link (text-xs, text-accent, cursor pointer) that on click shows all events in a popover or expands the cell. Cells have a hover state: background tint with var(--d-bg-muted). Clicking an empty area of a cell initiates event creation for that date.",
+      "event-chip": "Repeating slot within day cells or time columns. In month view: a compact pill (height 20px, border-radius 4px, padding 0 6px, display flex align-items-center). Left edge has a 4px-wide color strip indicating category (blue=#3b82f6 meetings, green=#22c55e personal, purple=#8b5cf6 external, amber=#f59e0b deadlines). Text is the event title in text-xs, single line with text-ellipsis overflow-hidden whitespace-nowrap. In week/day view: a positioned rectangle spanning the event's time range. Min-height 20px. Shows title (text-xs font-medium) and time (text-xs text-muted) stacked vertically. Background is a very light tint of the category color (5% opacity). Draggable for rescheduling. Click opens EventPopover.",
+      "event-popover": "A 320px-wide floating card (d-surface, border-radius 12px, box-shadow: 0 8px 24px rgba(0,0,0,0.12)) that appears anchored to the clicked event chip. Contains: event title (text-base font-semibold), colored category dot (8px circle) beside the title, date and time range on the next line (text-sm text-muted, icon-prefixed with a clock icon), location (text-sm, icon-prefixed with a map-pin icon, if set), description paragraph (text-sm, max 3 lines, text-muted), attendee avatar row (overlapping 24px circles, max 5 visible with +N overflow), and a bottom action row with Edit (ghost button) and Delete (ghost button, text-error) options. Popover has a small caret/arrow pointing to the source chip.",
+      "mini-calendar": "An optional compact month grid (200px wide) for sidebar placement. Shows a small month grid with single-letter day headers (M, T, W, T, F, S, S) in text-xs. Each date is a small clickable circle (28px). Today is accent-filled. Selected date has an accent ring. Days with events show a small dot (4px) beneath the date number in accent color. Navigation arrows at the top cycle months. Used for quick date jumping."
+    }
+  },
+  "accessibility": {
+    "role": "application",
+    "aria-label": "Calendar view",
+    "announcements": [
+      "View changed to {month|week|day|agenda}",
+      "Navigated to {month year}",
+      "Event {title} on {date} at {time}",
+      "Event {title} moved to {new date/time}",
+      "New event created on {date}"
+    ],
+    "keyboard": [
+      "Tab: move focus between navigation, view switcher, and calendar grid",
+      "Arrow keys: navigate between days in month view, time slots in week/day view",
+      "Enter: open event detail popover or create event on empty day",
+      "Escape: close popover or cancel event creation",
+      "T: jump to today",
+      "M/W/D/A: switch to month/week/day/agenda view",
+      "Page Up/Down: navigate to previous/next month or week",
+      "Space: select/deselect date for multi-date operations"
+    ]
+  },
+  "responsive": {
+    "mobile": "Defaults to agenda view (list). Month view simplifies to a scrollable list of weeks with horizontal swipe between weeks. Week view shows 3 days at a time with horizontal scroll. Event chips show only the color dot and truncated title. EventPopover becomes a bottom sheet. Drag-to-create is replaced with a tap-to-create flow. MiniCalendar is hidden. Navigation bar stacks: period label on top, view switcher below as icon-only tabs.",
+    "tablet": "Month view shows full grid with event chips. Week view shows all 7 days with horizontal scroll if needed. Touch drag for event creation and rescheduling with haptic feedback. EventPopover is a centered modal on smaller tablets, anchored popover on larger ones. MiniCalendar available in a collapsible sidebar.",
+    "desktop": "Full month grid with generous cell heights (120px+). Week view shows all 7 day columns with scrollable time grid. Click-and-drag event creation. Hover previews on event chips showing time and first line of description. Keyboard shortcuts fully enabled. MiniCalendar in persistent sidebar when space allows. EventPopover anchored to click position."
+  },
+  "motion": {
+    "micro": {
+      "chip-hover": "translateY(-1px) + subtle shadow elevation, 100ms ease-out",
+      "today-pulse": "Today's accent circle has a single subtle scale pulse (1.0→1.05→1.0) on initial render, 400ms ease-out",
+      "view-switch": "Active segment background slides to new position, 200ms ease-out"
+    },
+    "transitions": {
+      "view-change": "Cross-fade between views with 250ms ease-in-out, content scales from 0.98 to 1.0",
+      "month-navigate": "Grid slides left/right (depending on direction) with 300ms ease-out, new month content fades in",
+      "event-create": "New event chip scales from 0.9 to 1.0 + fade in, 200ms ease-out",
+      "popover-open": "Popover scales from 0.95 to 1.0 + fade from 0 to 1, 200ms ease-out with origin at anchor point"
+    },
+    "ambient": {
+      "current-time-line": "The red current-time indicator line smoothly translates its Y position every minute (transition: top 60s linear)",
+      "drag-preview": "Translucent event preview chip during drag creation pulses opacity 0.3→0.5→0.3, 1.5s ease-in-out infinite"
+    }
+  },
+  "interactions": [
+    "click-select",
+    "drag-reorder",
+    "hover-tooltip",
+    "keyboard-navigation",
+    "animate-on-mount",
+    "real-time-updates"
+  ],
+  "composition": {
+    "CalendarView": "Container(d-section, flex-col, full-height) > [NavigationBar + ViewContent]",
+    "NavigationBar": "Bar(d-surface, flex-row, sticky-top) > [PrevButton + PeriodLabel + TodayButton + NextButton + ViewSwitcher]",
+    "ViewSwitcher": "SegmentedControl(d-interactive) > Segment[](Month|Week|Day|Agenda)",
+    "MonthGrid": "Grid(d-surface, 7-col) > [DayHeaderRow + DayCell*]",
+    "DayCell": "Cell(d-surface, clickable) > [DateNumber(today?: accent-circle) + EventChip*(max-3) + OverflowLink?]",
+    "WeekView": "Grid(d-surface, 8-col) > [TimeGutter + WeekColumn* > TimeSlot* > EventChip*]",
+    "EventChip": "Chip(d-interactive, draggable, category-colored) > [ColorStrip + Title + Time?]",
+    "EventPopover": "Popover(d-surface, floating, anchored) > [Title + CategoryDot + DateTime + Location? + Description? + Attendees? + Actions]"
+  }
+}