@decantr/content 3.8.0

package/patterns/service-catalog.json

@@ -0,0 +1,94 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "service-catalog",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Service Catalog",
+  "description": "Grid or list of deployable services with status, region, and operational metadata for cloud and platform consoles.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Card",
+        "Badge",
+        "Button",
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Card",
+    "Badge",
+    "Button",
+    "icon"
+  ],
+  "default_preset": "grid",
+  "presets": {
+    "grid": {
+      "description": "Responsive service card grid for browsing platform services and environments.",
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gc1 _md:gc2 _xl:gc3 _gap4",
+        "slots": {
+          "toolbar": "Optional search, filters, and environment selectors",
+          "service-card": "Single service tile with icon, name, status, and metadata",
+          "service-actions": "Contextual actions such as open, deploy, or inspect"
+        }
+      }
+    },
+    "list": {
+      "description": "Denser row-based service catalog for operator-heavy pages.",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap3",
+        "slots": {
+          "toolbar": "Optional search and filter row",
+          "service-row": "Single service row with status and actions"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "grid",
+    "atoms": "_grid _gc1 _md:gc2 _xl:gc3 _gap4",
+    "slots": {
+      "toolbar": "Search and filter controls",
+      "service-card": "Service catalog card",
+      "service-actions": "Secondary actions"
+    }
+  },
+  "visual_brief": "Operational service catalog with clean, status-aware cards. Each item should surface the service identity, current health, region or environment, and a few practical facts without reading like a cluttered data table. The grid should feel like a modern control plane, not a marketing gallery.",
+  "responsive": {
+    "mobile": "Single-column stack. Metadata wraps cleanly and actions collapse into a single trailing affordance if needed.",
+    "tablet": "Two-column grid with enough width for service status, region, and one or two secondary facts.",
+    "desktop": "Three-column grid or dense list view depending on operator density. Cards remain easy to scan at a glance."
+  },
+  "layout_hints": {
+    "identity_first": "Lead with service name, type icon, and health state. Secondary metadata like region, deployment target, or runtime should support that first read.",
+    "operator_density": "Avoid stuffing every service property into the card. Prefer a small, repeatable metadata cluster and leave deeper diagnostics for drill-down views.",
+    "toolbar_rhythm": "If a toolbar is present, keep it visually separate from the grid. Parent workspace layout owns section spacing; the pattern owns only the toolbar-to-grid transition."
+  },
+  "motion": {
+    "micro": "Cards may lift or sharpen their border on hover. Status indicators may pulse subtly only when in degraded or deploying states.",
+    "transitions": "Filtering or sorting should cross-fade or stagger cards in gently without disrupting scanability."
+  },
+  "interactions": [
+    "animate-on-mount"
+  ],
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Service catalog",
+    "keyboard": [
+      "Tab should move through toolbar controls, then services, then any row or card actions in reading order."
+    ],
+    "announcements": [
+      "Each service should expose name, status, and key metadata semantically so health is not color-only."
+    ]
+  },
+  "composition": {
+    "ServiceCatalog": "Stack(d-section, operator) > [Toolbar?(d-control cluster) + ServiceGrid(d-data, responsive) > ServiceCard[]]",
+    "ServiceCard": "Card(d-surface, hoverable) > [Identity(icon + name + status) + MetaRow(d-annotation)* + Actions?(d-interactive cluster)]"
+  }
+}

package/patterns/service-map.json

@@ -0,0 +1,133 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "service-map",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Service Map",
+  "description": "Topology graph showing service dependencies with health indicators, animated traffic flow, and interactive detail panels for monitoring distributed service architectures.",
+  "category": "observability",
+  "tags": [
+    "2026",
+    "observability",
+    "topology",
+    "service-map",
+    "dependencies",
+    "health",
+    "monitoring"
+  ],
+  "components": [
+    "MapCanvas",
+    "ServiceNode",
+    "DependencyEdge",
+    "HealthIndicator",
+    "DetailPanel",
+    "Legend"
+  ],
+  "default_preset": "graph",
+  "presets": {
+    "graph": {
+      "description": "Force-directed graph layout where service nodes repel each other and edges act as springs — organic arrangement reveals natural clusters and heavily-connected hubs",
+      "layout": {
+        "layout": "spatial",
+        "atoms": "_relative _wfull _hfull _overflow-hidden"
+      }
+    },
+    "hierarchy": {
+      "description": "Tree layout with entry-point services at the top and downstream dependencies flowing downward — reveals request flow direction and service depth in the call chain",
+      "layout": {
+        "layout": "spatial",
+        "atoms": "_relative _wfull _hfull _overflow-auto"
+      }
+    },
+    "grid": {
+      "description": "Organized grid layout where services are arranged in a structured matrix grouped by team or domain — edges route orthogonally between nodes for a clean architectural diagram feel",
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gap8 _wfull _hfull _overflow-auto _p8"
+      }
+    }
+  },
+  "visual_brief": "Force-directed graph rendered on a dark canvas where each service is a rounded rectangle node (approximately 120x60px) containing a small service type icon (database cylinder, server rack, cloud function, etc.), the service name in medium-weight text below the icon, and a small circular health dot in the top-right corner glowing green (healthy), yellow (degraded), or red (down). Curved bezier edges connect dependent services with animated dot particles flowing along the edge in the direction of requests. Edge thickness scales with traffic volume — thin hairlines for low-traffic dependencies, thick 4px lines for high-traffic paths. Hovering a node highlights all its direct dependency edges in the node's health color and fades all unrelated nodes and edges to 20% opacity. A detail panel slides in from the right side showing the selected service's key metrics: p50/p95/p99 latency as a mini histogram, error rate as a percentage with trend arrow, requests per second as a sparkline, and a list of direct upstream and downstream dependencies. A legend in the bottom-left corner explains health dot colors, edge thickness meaning, and node icon types. The hierarchy preset arranges nodes top-to-bottom with straight downward edges. The grid preset places nodes in labeled group boxes.",
+  "default_layout": {
+    "layout": "spatial",
+    "atoms": "_relative _wfull _hfull _overflow-hidden",
+    "slots": {
+      "map-canvas": "The main rendering area occupying the full container. Supports pan (click-drag on background) and zoom (scroll wheel or pinch). Renders a subtle dot-grid background pattern for spatial reference. All service nodes and dependency edges are positioned within this canvas using absolute or SVG coordinates. The canvas auto-fits all nodes on initial load with padding.",
+      "service-node": "Repeating slot — one per service. A rounded rectangle (border-radius 12px) with a subtle border and semi-transparent background. Contains: a small icon representing the service type (16px), the service name (14px medium weight), and a HealthIndicator dot (8px circle) in the top-right corner. The node has a subtle drop shadow. On hover, the node elevates slightly and its border color intensifies to match its health status. Selected nodes show a ring highlight.",
+      "dependency-edge": "Repeating slot — one per service-to-service dependency. A curved SVG path connecting two service nodes. Animated dot particles (3px circles) travel along the path from caller to callee. Particle speed is proportional to request rate. Edge color defaults to a muted neutral but shifts to the caller's health color on hover. An optional small label at the midpoint shows request rate or protocol (REST, gRPC, etc.).",
+      "detail-panel": "Right-side panel (320px wide) that slides in when a service node is selected. Header shows service name, type badge, and health status with uptime percentage. Body contains: latency section with p50/p95/p99 values and a mini distribution chart, error rate with a small trend sparkline, throughput as requests/second with a sparkline, and a dependencies list showing upstream callers and downstream callees as clickable links that re-center the map on that service.",
+      "legend": "Small overlay card anchored to the bottom-left corner of the canvas. Shows: health dot color meanings (green=healthy, yellow=degraded, red=down), edge thickness scale (thin=low traffic, thick=high traffic), and node icon legend for service types."
+    }
+  },
+  "responsive": {
+    "mobile": "Map canvas fills the screen with touch-based pan and pinch-to-zoom. Service nodes render at minimum size with name only (no icon). Detail panel opens as a bottom sheet instead of a side panel. Legend hides behind an info button. Edges simplified to straight lines without particles.",
+    "tablet": "Standard force-directed layout with touch support. Detail panel slides in from the right at reduced width (280px). Service nodes show icon and name. Edge particles render at reduced density.",
+    "desktop": "Full interactive map with hover effects, animated edge particles, and side detail panel. Zoom controls in the top-right corner. Legend always visible. Generous node sizing with icons, names, and health indicators."
+  },
+  "layout_hints": {
+    "map_ownership": "This pattern owns the topology canvas, overlays, and detail-panel anchoring. Parent dashboards should frame it as one observability surface rather than wrapping it in extra competing panels.",
+    "node_priority": "Service health and dependency structure should be readable before fine-grained metrics. The detail panel is where deeper analytics belong.",
+    "overlay_rhythm": "Legend, controls, and detail panel should feel like supporting map chrome. Keep them visually lighter than the node graph itself.",
+    "node_label_overflow": "Service node labels MUST handle overflow gracefully — set `max-width: 12rem; overflow: hidden; text-overflow: ellipsis` AND attach a `data-tooltip={fullServiceName}` attribute that surfaces the complete name on hover via the hover-tooltip pattern. A truncated \"payments-...\" with no tooltip is a broken affordance — the user cannot read the truncated half.",
+    "empty_canvas_fit": "When the topology occupies less than ~70% of the canvas viewport, EITHER auto-fit-zoom the graph to fill the viewport OR add an explicit \"Fit to view\" button in the canvas controls. Empty canvas space below the graph reads as wasted real estate.",
+    "connection_line_legibility": "Service-to-service connection lines should use `stroke: var(--d-border); stroke-width: 1.5px; opacity: 0.6` MINIMUM. Lines too light/thin disappear on dark backgrounds and the dependency relationships become unreadable.",
+    "edge_anchoring": "CRITICAL: Connection lines MUST anchor to d-port elements on each node, NOT to the node's outer rectangle. Each ServiceNode renders one or more d-port[data-side=\"left|right|top|bottom\"] children. The d-port treatment positions the port dot 4px OUTSIDE the node edge — that gives SVG paths a predictable anchor coordinate that visually attaches to the node border. Get coordinates via `port.getBoundingClientRect()` (ref the port element) and translate into the canvas SVG's coordinate space (subtract canvas rect offset, divide by current zoom factor). NEVER hand-compute port positions from node bounding rects + offsets — the math always drifts and lines float disconnected.",
+    "edge_line_shape": "Edges MUST be smooth cubic-bezier curves, NOT orthogonal stair-step paths. Path data formula: `M startX,startY C (startX + dx*0.5),startY (endX - dx*0.5),endY endX,endY` where `dx = abs(endX - startX)`. Curves communicate request flow direction visually; stair-step paths look like hand-drawn diagrams. Stroke: `var(--d-border)` at 1.5px stroke-width and opacity 0.6 baseline; on hover or selection elevate to the caller's health color at full opacity.",
+    "edge_recompute_on_drag": "Edge paths MUST re-render on every pointer-move during node drag (and on canvas pan/zoom). If lines are computed once at mount and never updated, dragging a node leaves the edge anchored to its old position — appearing visually disconnected. Use the d-port refs + getBoundingClientRect inside a `requestAnimationFrame` loop during drag, or recompute on every state update if the canvas re-renders.",
+    "edge_particle_animation": "Animated dot particles travel along each edge from caller to callee at speed proportional to RPS. Implement via SVG `<circle>` with `<animateMotion path={pathData} dur=\"2s\" repeatCount=\"indefinite\" />` OR via CSS `offset-path: path(...)` with motion-distance keyframes. Particles render only on edges where the connected service is healthy — skip particles on red/down edges to reduce visual noise on degraded systems."
+  },
+  "motion": {
+    "micro": {
+      "node-hover": "scale(1→1.05) + elevation increase + border-color shift 150ms ease-out",
+      "edge-highlight": "opacity 0.4→1 + color shift 200ms ease-out"
+    },
+    "transitions": {
+      "detail-slide": "translateX(100%→0) 300ms ease-out for panel entry",
+      "focus-fade": "opacity 1→0.2 300ms ease-out on unfocused nodes/edges",
+      "layout-reflow": "node positions lerp 600ms ease-in-out when switching presets"
+    },
+    "ambient": {
+      "edge-particles": "dot particles flowing along edges at speed proportional to request rate, continuous",
+      "health-pulse": "scale(1→1.3→1) + opacity pulse 2s ease-in-out infinite on degraded/down health dots"
+    }
+  },
+  "interactions": [
+    "drag-nodes",
+    "pan-background",
+    "zoom-scroll",
+    "click-select",
+    "hover-tooltip",
+    "status-pulse",
+    "animate-on-mount",
+    "live-simulation",
+    "real-time-updates"
+  ],
+  "composition": {
+    "ServiceMap": "Container(d-section, spatial) > [MapCanvas > ServiceNode*(d-interactive) + DependencyEdge*] + DetailPanel?(d-surface) + Legend(d-annotation)",
+    "MapCanvas": "Canvas(d-data, pannable, zoomable, dot-grid-bg) > [DependencyEdge* + ServiceNode*]",
+    "ServiceNode": "Node(d-interactive, rounded-rect) > [TypeIcon + ServiceName + HealthIndicator(d-annotation, dot)]",
+    "DependencyEdge": "Edge(d-data, curved, animated-particles) > [PathLine + FlowParticles + MidpointLabel?]",
+    "DetailPanel": "Panel(d-surface, slide-right) > [Header > [ServiceName + TypeBadge + HealthStatus] + Metrics > [Latency + ErrorRate + Throughput] + DependencyList]",
+    "Legend": "Card(d-annotation, bottom-left) > [HealthColors + EdgeScale + NodeIcons]"
+  },
+  "accessibility": {
+    "role": "img",
+    "aria-label": "Service dependency map showing topology and health status",
+    "keyboard": [
+      "Tab: cycle focus between service nodes in alphabetical order",
+      "Enter: select focused node and open detail panel",
+      "Escape: close detail panel and deselect node",
+      "Arrow keys: pan the map canvas",
+      "Plus/Minus: zoom in/out",
+      "0: reset zoom to fit all nodes",
+      "L: toggle legend visibility"
+    ],
+    "announcements": [
+      "Service {name}: {healthStatus}, {requestRate} req/s, {errorRate}% error rate",
+      "Detail panel opened for {name}",
+      "{name} depends on {count} downstream services",
+      "{count} upstream services call {name}",
+      "Map zoomed to {zoomLevel}%"
+    ]
+  }
+}

package/patterns/session-inspector.json

@@ -0,0 +1,62 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "session-inspector",
+  "version": "1.1.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Session Inspector",
+  "description": "Contextual inspector panel for producer sessions showing selected stem metadata, automation values, collaborator presence, comments, export readiness, and split status.",
+  "category": "music",
+  "tags": ["2026", "music", "daw", "inspector", "metadata", "collaboration", "export"],
+  "components": ["SelectedStemCard", "AutomationSummary", "PresenceList", "CommentStack", "ExportReadiness", "SplitStatus"],
+  "default_preset": "aside",
+  "presets": {
+    "aside": {
+      "description": "Right-side inspector for desktop DAW shells",
+      "layout": { "layout": "stack", "atoms": "_flex _flex-col _gap-4 _bg-bg _border-l _p-4" }
+    },
+    "sheet": {
+      "description": "Bottom sheet inspector for mobile DAW shells",
+      "layout": { "layout": "stack", "atoms": "_flex _flex-col _gap-3 _bg-surface _border-t _p-4" }
+    }
+  },
+  "visual_brief": "A dense right-side production inspector with compact modules rather than big cards. It shows selected stem/region, automation parameters, plugin chain summary, collaborator cursors, comments, export readiness checks, and split validation. It can also act as a desktop sidecar for track crate, collaborator ops, room monitor, and settings guardrail routes when those pages need production context. Use small headings, tokenized chips, status dots, monospace values, separators, and inline actions so it feels like a serious utility panel. Avoid marketing copy, oversized empty states, sparse wide panels, and decorative card nesting.",
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _flex-col _gap-4 _bg-bg _border-l _p-4",
+    "slots": {
+      "selected-object": "Current stem/region metadata with color, gain, pan, key, and duration.",
+      "automation": "Compact automation lane summary with editable values.",
+      "collaboration": "Presence, comments, and active edit cursors.",
+      "release-readiness": "Bounce/export readiness and split validation."
+    }
+  },
+  "composition": {
+    "SessionInspector": "Aside(stack) > [SelectedStemCard + AutomationSummary + PresenceList + CommentStack + ExportReadiness + SplitStatus]"
+  },
+  "motion": {
+    "micro": {
+      "selection-change": "modules crossfade in 150ms when selected region changes",
+      "status-update": "status chips pulse once when a validation state changes"
+    }
+  },
+  "interactions": ["hover-reveal", "status-pulse", "real-time-updates", "keyboard-navigation"],
+  "responsive": {
+    "mobile": {
+      "layout": "alternate-pattern",
+      "alternate_pattern_id": "session-inspector",
+        "notes": "Render as a tab panel or bottom sheet opened from selected stem/status controls. Keep selected item, readiness, and collaborator state visible before long notes."
+      },
+    "desktop": "Right aside stays visible for active sessions and can collapse to icon rail. On secondary desktop routes, use inspector-like sidecars to prevent sparse card-only layouts."
+  },
+  "accessibility": {
+    "role": "complementary",
+    "aria-label": "Session inspector",
+    "keyboard": ["I: toggle inspector", "Esc: close inspector sheet on mobile"],
+    "announcements": ["Inspector showing {item}", "Export readiness {status}", "Split total {percent}%"]
+  },
+  "layout_hints": {
+    "density": "Favor concise stacked utility rows over marketing cards.",
+    "desktop_sidecar": "A sidecar should carry real state: queue, readiness, latency, voice sync, export checks, or selected-item metadata.",
+    "contextuality": "Inspector content must reflect the selected track, region, or room state."
+  }
+}

package/patterns/session-manager.json

@@ -0,0 +1,89 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "session-manager",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Session Manager",
+  "description": "Active sessions panel showing current device, other sessions with device info, location, last active, and revoke controls.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Button",
+        "Badge",
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Button",
+    "Badge",
+    "icon"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Full session list with current device highlighted",
+      "components": [
+        "Button",
+        "Badge",
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap6",
+        "slots": {
+          "current-session": "This device session card with 'Current' badge",
+          "sessions-list": "Other active sessions list",
+          "revoke-all": "Logout from all devices button"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col _gap6",
+    "slots": {
+      "current-session": "This device with 'Current' badge",
+      "sessions-list": "Other sessions with device, browser, location, last active",
+      "revoke-all": "Sign out everywhere button"
+    }
+  },
+  "visual_brief": "Settings panel showing active login sessions. The current session is highlighted at the top with a 'Current Session' badge, showing device name (e.g., 'MacBook Pro — Chrome'), location, and last active time. Below, a list of other sessions, each showing device icon (desktop/mobile/tablet), browser name, location (city, country), last active timestamp, and a 'Revoke' button on the right. A 'Sign Out All Other Sessions' destructive button sits at the bottom of the list. Sessions with suspicious activity show a warning icon.",
+  "layout_hints": {
+    "current_session_priority": "The current session should be visually distinct and always feel anchored above the revocable session list.",
+    "destructive_spacing": "Revoke actions and the sign-out-everywhere action need clear separation from passive session metadata so they do not read like inline labels.",
+    "suspicious_state": "Suspicious-session states should be obvious through icon, text, and treatment rather than relying on color alone."
+  },
+  "responsive": {
+    "mobile": "Sessions stack as full-width cards. Device info and location on separate lines. Revoke button full-width per session. Sign Out All button at the bottom.",
+    "tablet": "Standard list layout. Device info and location inline. Revoke buttons on the right.",
+    "desktop": "Full list with all information inline per row. Comfortable spacing between sessions."
+  },
+  "motion": {
+    "micro": "Hover and focus states on revoke controls may brighten subtly, but session rows should otherwise remain stable and administrative.",
+    "transitions": "Revoked-session removal and warning-state changes should animate softly over 150-220ms without collapsing the entire list abruptly."
+  },
+  "interactions": [
+    "animate-on-mount"
+  ],
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Session manager",
+    "keyboard": [
+      "Tab moves through current-session controls, row-level revoke actions, and sign-out-everywhere actions in order."
+    ],
+    "announcements": [
+      "Current session, suspicious activity, and revoke outcomes should be announced clearly."
+    ],
+    "focus_management": "After revoking a session, preserve focus on the next logical row action or the bulk sign-out control."
+  },
+  "composition": {
+    "SessionManager": "Container(d-section, flex-col, gap-4) > [CurrentSession + OtherSessions + RevokeAllButton?]",
+    "CurrentSession": "Card(d-surface, accent-border) > [DeviceIcon + DeviceInfo > [Name(font-medium) + Location + LastActive(text-muted)] + CurrentBadge(d-annotation)]",
+    "OtherSessions": "List(flex-col) > SessionRow[]",
+    "SessionRow": "Row(d-data-row) > [DeviceIcon + DeviceInfo > [Name + Location + LastActive(text-muted)] + RevokeButton(d-interactive, variant: destructive)]"
+  }
+}

package/patterns/settings-nav.json

@@ -0,0 +1,106 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "settings-nav",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Settings Nav",
+  "description": "Vertical navigation list for settings and preferences pages with grouped sections, active state highlighting, icons, and badges. Collapses to horizontal tabs on mobile.",
+  "category": "navigation",
+  "tags": [
+    "settings",
+    "navigation",
+    "sidebar",
+    "tabs",
+    "preferences"
+  ],
+  "components": [
+    "NavItem",
+    "NavGroup",
+    "Icon",
+    "Badge",
+    "Text"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Vertical sidebar navigation with grouped sections and icon-prefixed items — used as a settings page sidebar alongside a content panel",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap1 _py2"
+      }
+    },
+    "compact": {
+      "description": "Condensed vertical list without group headings — suitable for narrow sidebars or drawers with limited items",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap0 _py1"
+      }
+    },
+    "tabs": {
+      "description": "Horizontal tab bar variant for top-of-page navigation — items render as underlined tabs rather than a sidebar list",
+      "layout": {
+        "layout": "row",
+        "atoms": "_flex _row _gap0 _border-b"
+      }
+    }
+  },
+  "visual_brief": "A vertical navigation list on the left side of a settings page. Items are grouped under small uppercase section headings (d-label). Each item is a row with a 16-20px icon on the left, label text in the middle, and an optional badge or count on the right. Active item has a primary-color left border (3px), primary-tinted background, and primary text color. Hover state shows a subtle surface background tint. Items have 8-10px vertical padding and 12px horizontal padding. Groups are separated by 16px spacing and a muted horizontal divider. On mobile the entire nav collapses to a horizontal scrollable tab bar at the top, with icon-only items and the active tab underlined.",
+  "layout_hints": {
+    "active_indicator": "Active item uses a 3px left border in var(--d-primary) color plus a light primary background tint: background: color-mix(in srgb, var(--d-primary) 10%, transparent).",
+    "group_headings": "Section group headings use the d-label class. They are not clickable, just visual separators.",
+    "icon_alignment": "Icons are 16-20px, vertically centered with the label text. Use flex + align-items: center.",
+    "mobile_tabs": "On mobile (<640px), render as a horizontal scrollable row of tab items. Show icon + short label. Active tab has a bottom border instead of left border."
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col _gap1 _py2",
+    "slots": {
+      "group-heading": "Uppercase section label (d-label) separating navigation groups. Not interactive.",
+      "nav-item": "Repeating slot — one per settings page. Renders as a flex row with icon (left), label (center), and optional badge/count (right). Active state indicated by left border + background tint. Hover shows surface background.",
+      "divider": "Thin horizontal line (1px border-top, var(--d-border)) between groups."
+    }
+  },
+  "accessibility": {
+    "role": "navigation",
+    "aria-label": "Settings navigation",
+    "keyboard": [
+      "Arrow Up/Down navigates between items",
+      "Enter activates the focused item",
+      "Home jumps to first item",
+      "End jumps to last item"
+    ],
+    "announcements": [
+      "Navigated to {section} settings",
+      "{item} selected, {badge_count} notifications"
+    ],
+    "focus_management": "Focus remains on the activated item after navigation. On mobile tab switch, focus moves to the content panel."
+  },
+  "responsive": {
+    "mobile": "Collapses to a horizontal scrollable tab bar at the top of the page. Items show icon + abbreviated label. Active tab has a 2px bottom border in primary color. Group headings are hidden. Horizontal scroll with momentum enabled.",
+    "tablet": "Standard vertical sidebar at 200-240px width. All items and group headings visible. Badge counts shown.",
+    "desktop": "Full vertical sidebar at 240-280px width. All items, group headings, badges, and descriptions visible. Sticky positioning within scroll container."
+  },
+  "composition": {
+    "SettingsNav": "Nav(d-section, flex-col, gap-1, sticky) > [NavGroup[]]",
+    "NavGroup": "Stack(flex-col, gap-0) > [GroupHeading(d-label)? + NavItem[] + Divider?]",
+    "NavItem": "Link(d-interactive, flex, align-center, gap-3, px-3, py-2) > [Icon(16px) + Label(text-sm) + Badge?(d-annotation, ml-auto)]"
+  },
+  "motion": {
+    "micro": {
+      "hover": "background-color 0.15s ease",
+      "active": "border-color 0.1s ease, background-color 0.1s ease"
+    },
+    "transitions": {
+      "page_switch": "Content panel cross-fades on nav item selection (0.15s ease)"
+    }
+  },
+  "interactions": [
+    "hover-reveal",
+    "keyboard-navigation"
+  ],
+  "io": {
+    "consumes": ["active-route", "nav-items", "badge-counts"],
+    "produces": ["navigation-event"],
+    "actions": ["navigate"]
+  }
+}

package/patterns/share-modal.json

@@ -0,0 +1,157 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "share-modal",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Share Modal",
+  "description": "Invite collaborators and manage document sharing. Includes email invite, shareable link, and current collaborators management.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Button",
+        "Input",
+        "Select",
+        "Avatar",
+        "Tabs",
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Button",
+    "Input",
+    "Select",
+    "Avatar",
+    "Tabs",
+    "icon"
+  ],
+  "default_preset": "invite",
+  "presets": {
+    "invite": {
+      "description": "Email invite form with role selector",
+      "components": [
+        "Button",
+        "Input",
+        "Select",
+        "icon"
+      ],
+      "layout": {
+        "layout": "modal",
+        "atoms": "_flex _col _gap4 _p6 _w[480px]",
+        "slots": {
+          "header": "Modal title and close button",
+          "invite-form": "Email input with role selector",
+          "send-button": "Send invitation button"
+        }
+      }
+    },
+    "link": {
+      "description": "Shareable link management with copy-to-clipboard URL, permission settings, and expiration controls",
+      "components": [
+        "Button",
+        "Input",
+        "Select",
+        "icon"
+      ],
+      "layout": {
+        "layout": "column",
+        "atoms": "_flex _col _gap4",
+        "slots": {
+          "link-display": "Shareable URL with copy button",
+          "link-settings": "Permission level for link access",
+          "toggle": "Enable/disable link sharing"
+        }
+      }
+    },
+    "members": {
+      "description": "Current collaborators list with role management",
+      "components": [
+        "Avatar",
+        "Button",
+        "Select",
+        "icon"
+      ],
+      "layout": {
+        "layout": "column",
+        "atoms": "_flex _col _gap2",
+        "slots": {
+          "members-list": "List of current collaborators with roles",
+          "pending": "Pending invitations"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "modal",
+    "atoms": "_flex _col _gap4 _p6 _w[480px]",
+    "slots": {
+      "tabs": "Invite / Link / Members navigation",
+      "invite-form": "Email input with role selector and autocomplete",
+      "link-settings": "Shareable link toggle and permissions",
+      "members-list": "Current collaborators with role management",
+      "pending": "Pending invitations list"
+    }
+  },
+  "io": {
+    "consumes": [
+      "document",
+      "members",
+      "pending",
+      "suggestions"
+    ],
+    "produces": [
+      "invite",
+      "role-change",
+      "remove-member"
+    ],
+    "actions": [
+      "send-invite",
+      "cancel-invite",
+      "change-role",
+      "remove-member",
+      "toggle-link",
+      "copy-link"
+    ]
+  },
+  "visual_brief": "Modal dialog with tabs for Invite, Link, and Members. The Invite tab shows an email input with autocomplete, a role dropdown (Viewer, Editor, Admin), and a Send button. The Link tab has a toggle to enable/disable shareable link, the link URL in a copy-able input, and permission settings (view/edit, expiration). The Members tab lists current collaborators as rows with avatar, name, email, role dropdown, and a remove button. Pending invitations show an 'Invited' badge with a resend option. The modal header shows the document or resource name being shared.",
+  "responsive": {
+    "mobile": "Modal takes near-full screen. Tabs render as a top bar. Email input full-width. Member list scrolls vertically. Role dropdowns use native selects.",
+    "tablet": "Centered modal at 520px width. Standard tab navigation. Member list comfortable.",
+    "desktop": "Centered modal at 560px width. Full tab layout. Member management with inline role selectors."
+  },
+  "layout_hints": {
+    "sharing_priority": "Lead with the current resource context and the simplest sharing action first. Invite, link, and members tabs should feel like different lenses on the same access model, not separate tools.",
+    "tab_role": "Tabs should preserve a stable modal frame while changing only the relevant access workflow underneath.",
+    "member_clarity": "Current access state and pending invites should stay visually distinct so permission management feels trustworthy and easy to audit."
+  },
+  "motion": {
+    "micro": "Tab changes, invite success, and copy-link feedback may sharpen or fade subtly to confirm access actions.",
+    "transitions": "The modal should open and switch tabs smoothly enough to preserve context without feeling like a separate page navigation."
+  },
+  "interactions": [
+    "animate-on-mount",
+    "focus-trap",
+    "keyboard-navigation"
+  ],
+  "accessibility": {
+    "role": "dialog",
+    "aria-label": "Share modal",
+    "keyboard": [
+      "Focus should move into the active share flow immediately, with tabs, invite fields, link controls, and member actions reachable in order."
+    ],
+    "announcements": [
+      "Resource name, active tab, pending invite state, and role changes should be communicated semantically so sharing state is understandable without relying on modal layout alone."
+    ]
+  },
+  "composition": {
+    "ShareModal": "Modal(d-surface, centered) > [Header + Tabs + TabContent]",
+    "Header": "Row(space-between) > [Title(heading3) + CloseButton(d-interactive)]",
+    "Tabs": "TabBar(d-control) > [InviteTab + LinkTab + MembersTab]",
+    "InviteForm": "Section > [EmailInput(d-control, autocomplete) + RoleSelect(d-control) + SendButton(d-interactive, variant: primary)]",
+    "MembersList": "List(flex-col) > MemberRow[]",
+    "MemberRow": "Row > [Avatar + Name + Email(text-muted) + RoleSelect(d-control) + RemoveButton(d-interactive, variant: ghost)]"
+  }
+}