@decantr/content 3.8.0

package/patterns/holographic-control-bar.json

@@ -0,0 +1,114 @@
+{
+  "id": "holographic-control-bar",
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Holographic Control Bar",
+  "description": "A floating, detachable toolbar that follows user focus with glassmorphic depth treatment. Can dock to any viewport edge or float freely via drag-to-reposition. Semi-transparent with backdrop blur and subtle border luminance. For spatial UIs, immersive workspaces, creative tools, and any interface where persistent controls must not occlude content.",
+  "category": "spatial",
+  "tags": [
+    "2026",
+    "spatial",
+    "toolbar",
+    "floating",
+    "glassmorphic",
+    "draggable",
+    "dock"
+  ],
+  "components": [
+    "FloatingBar",
+    "ActionGroup",
+    "DragHandle",
+    "DockTarget",
+    "PositionIndicator"
+  ],
+  "default_preset": "floating",
+  "presets": {
+    "floating": {
+      "description": "Free-floating bar positioned via drag. Glassmorphic: backdrop-filter blur, semi-transparent background, 1px luminant border. Casts a subtle shadow. PositionIndicator shows current screen quadrant.",
+      "layout": {
+        "layout": "row",
+        "atoms": "_fixed _flex _row _aic _gap2 _px4 _py2 _rounded-xl"
+      }
+    },
+    "docked-bottom": {
+      "description": "Snapped to bottom viewport edge. Full-width with centered action groups. Glassmorphic backdrop with top border only. Slide-up entry animation.",
+      "layout": {
+        "layout": "row",
+        "atoms": "_fixed _bottom-0 _left-0 _right-0 _flex _row _aic _jcc _gap4 _px6 _py3"
+      }
+    },
+    "docked-side": {
+      "description": "Snapped to left or right viewport edge. Vertical action layout. Narrow width, icon-only by default with labels on hover. Glassmorphic with inward-facing border.",
+      "layout": {
+        "layout": "column",
+        "atoms": "_fixed _top-0 _flex _col _aic _gap2 _px2 _py4 _rounded-r-lg"
+      }
+    },
+    "minimal": {
+      "description": "Collapsed to a small floating pill showing only the drag handle and an expand toggle. Expands on click to reveal full action groups. Lowest visual footprint.",
+      "layout": {
+        "layout": "row",
+        "atoms": "_fixed _flex _row _aic _gap1 _px2 _py1 _rounded-full"
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "row",
+    "atoms": "_fixed _flex _row _aic _gap2 _px4 _py2 _rounded-xl",
+    "slots": {
+      "toolbar-track": "The invisible boundary area where the bar can be positioned. Defines valid floating zones and dock-snap regions. DockTarget elements mark edge snap points. Typically the full viewport.",
+      "action-group": "One or more grouped sets of toolbar actions. Each ActionGroup contains related buttons or controls separated by subtle dividers. Groups should be semantically labeled for screen readers.",
+      "drag-handle": "The grab target for repositioning the bar. Renders as a subtle grip pattern (dots or lines). Must be large enough for touch (44x44px minimum). Shows grab cursor on hover, grabbing on drag.",
+      "dock-zone": "Edge regions where the bar snaps when dragged nearby. Each DockTarget defines a snap threshold (e.g., 40px from edge). Visual indicator appears when bar enters snap range. Supports top, bottom, left, right edges.",
+      "floating-indicator": "Visual feedback showing the bar's current position state: floating (no indicator), near-dock (glow at target edge), docked (subtle connection line to edge). PositionIndicator also announces position changes to screen readers."
+    }
+  },
+  "accessibility": {
+    "role": "toolbar",
+    "aria_label": "Floating control bar",
+    "announcements": [
+      "Announce dock state changes: 'Control bar docked to bottom', 'Control bar floating'",
+      "Announce when bar is dragged to a new position",
+      "Announce expand/collapse in minimal preset"
+    ],
+    "keyboard": [
+      "Tab navigates between action groups, then between actions within each group",
+      "Arrow Left/Right moves between actions within a group",
+      "G key grabs the bar for keyboard repositioning, Arrow keys move, Enter drops",
+      "D key cycles between dock positions (float, bottom, left, right)",
+      "Escape releases grab or collapses to minimal preset"
+    ],
+    "reduce_motion": "Disable slide and snap animations. Dock transitions are instant. Glassmorphic blur remains (decorative, not motion). Drag repositioning uses position jumps rather than smooth tracking."
+  },
+  "responsive": {
+    "mobile": "Default to docked-bottom preset. Drag-to-float disabled (too imprecise on touch). Swipe down to dismiss, swipe up to restore. Action groups scroll horizontally if overflow.",
+    "tablet": "All presets available. Drag handle enlarged for touch (56x56px). Dock snap threshold increased to 60px. Floating position persisted across sessions."
+  },
+  "visual_brief": "Floating glassmorphic toolbar with backdrop blur, semi-transparent background, and subtle luminant border. Contains grouped action buttons with icon-only or icon+label styles. A drag handle on one end allows repositioning anywhere in the viewport. Docks to viewport edges with a snap animation when dragged near them. Docked-bottom preset fixes the bar along the bottom edge. Docked-side preset fixes along a vertical edge. Minimal preset reduces to a small floating pill with only essential actions. A subtle glow or shimmer effect reinforces the glassmorphic treatment.",
+  "layout_hints": {
+    "overlay_discipline": "The control bar should feel like purposeful overlay chrome. Keep it compact and avoid turning it into a second navigation header.",
+    "dock_feedback": "Dock targets and floating indicators should clearly communicate state without obscuring the underlying canvas.",
+    "action_grouping": "Keep related controls grouped and visually separated so operators can scan the bar quickly."
+  },
+  "motion": {
+    "micro": "Hover, drag-handle, and dock-target states may brighten subtly to reinforce affordance.",
+    "transitions": "Docking, undocking, and expansion should animate smoothly over 180-260ms with predictable easing."
+  },
+  "interactions": [
+    "drag-nodes",
+    "pan-background",
+    "zoom-scroll",
+    "click-select",
+    "hover-tooltip",
+    "animate-on-mount",
+    "glow-hover",
+    "live-simulation"
+  ],
+  "composition": {
+    "HolographicControlBar": "Bar(d-control, glassmorphic, backdrop-blur, floating) > [DragHandle(grip-pattern) + ActionGroup[] + DockIndicator?]",
+    "ActionGroup": "Group(d-interactive, gap-2, divider) > IconButton[]",
+    "DragHandle": "Handle(d-interactive, min-44px, cursor: grab)",
+    "DockIndicator": "Indicator(d-annotation, glow: near-dock)"
+  }
+}

package/patterns/hotkey-bar.json

@@ -0,0 +1,97 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "hotkey-bar",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Hotkey Bar",
+  "description": "Function key shortcut bar inspired by DOS/Norton Commander style interfaces.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {
+      "terminal": "^1.0.0"
+    },
+    "requires_core": {
+      "components": [],
+      "charts": []
+    }
+  },
+  "components": ["Text", "Kbd"],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Standard F1-F10 function key bar with evenly spaced shortcut labels in a fixed bottom row",
+      "components": [],
+      "layout": {
+        "layout": "flex",
+        "atoms": "_flex _aic _jcsb _px1 _mono _textsm _h[28px] _bgmuted",
+        "slots": {
+          "keys": "Array of F1-F10 hotkey bindings"
+        }
+      }
+    },
+    "extended": {
+      "description": "F1-F12 extended function key bar",
+      "components": [],
+      "layout": {
+        "layout": "flex",
+        "atoms": "_flex _aic _jcsb _px1 _mono _textsm _h[28px] _bgmuted",
+        "slots": {
+          "keys": "Array of F1-F12 hotkey bindings"
+        }
+      }
+    },
+    "custom": {
+      "description": "Custom key bindings with modifiers",
+      "components": [],
+      "layout": {
+        "layout": "flex",
+        "atoms": "_flex _aic _gap4 _px2 _mono _textsm _h[28px] _bgmuted",
+        "slots": {
+          "keys": "Custom key bindings with labels"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "flex",
+    "atoms": "_flex _aic _jcsb _px1 _mono _textsm _h[28px]",
+    "slots": {
+      "keys": "Hotkey bindings"
+    }
+  },
+  "features": [
+    "click-activate",
+    "keyboard-trigger",
+    "disabled-state",
+    "active-pressed-state"
+  ],
+  "visual_brief": "Fixed horizontal bar at the bottom of the viewport displaying function key shortcuts in a DOS/Norton Commander style. Each slot shows a function key label (F1, F2, ... F10) in a highlighted badge followed by the action name (Help, Menu, View, Edit, Copy, Move, Mkdir, Delete, etc.). Background is typically dark with bright key labels. Extended preset adds Shift+F and Ctrl+F combinations as additional rows. The bar spans the full viewport width with evenly distributed key slots.",
+  "responsive": {
+    "mobile": "Bar shows only the most critical shortcuts (F1-F5). Remaining keys accessible via a more button. Key labels use abbreviated action names.",
+    "tablet": "Full F1-F10 bar visible. Key slots slightly narrower.",
+    "desktop": "Full bar with all function keys and comfortable spacing. Extended preset shows additional modifier combinations."
+  },
+  "layout_hints": {
+    "bar_priority": "The key label should read before the action text so users can scan function bindings rapidly.",
+    "density": "Keep the bar extremely compact and horizontal. It is terminal chrome, not a secondary navigation rail.",
+    "mobile_translation": "On smaller screens, preserve the most important bindings and collapse the rest rather than shrinking every slot to illegibility."
+  },
+  "motion": {
+    "micro": "Hovered or active key slots may brighten slightly to acknowledge interaction without looking like conventional buttons.",
+    "transitions": "The bar should feel stable and ever-present; avoid animated reflow unless shortcut sets genuinely change."
+  },
+  "interactions": [
+    "hover-reveal",
+    "keyboard-navigation"
+  ],
+  "accessibility": {
+    "role": "toolbar",
+    "aria-label": "Hotkey bar",
+    "keyboard": [
+      "Shortcut items should be reachable in sequence, with the underlying key command still working even if the bar itself is not focused."
+    ],
+    "announcements": [
+      "Each binding should expose both the function key and its action name semantically so the bar is understandable without color-coded badges alone."
+    ]
+  }
+}

package/patterns/how-it-works.json

@@ -0,0 +1,118 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "how-it-works",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "How It Works",
+  "description": "Step-by-step process section with numbered steps, descriptions, and optional connecting lines",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "icon"
+  ],
+  "default_preset": "horizontal",
+  "presets": {
+    "horizontal": {
+      "description": "Horizontal row of 3-4 steps connected by lines/arrows",
+      "components": [
+        "icon"
+      ],
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gc1 _md:gc3 _gap8 _py12 _px6 _textCenter",
+        "slots": {
+          "heading": "Section heading with _heading2 _textCenter and optional subtext",
+          "step": "Individual step block: number circle + title + description",
+          "step-number": "Circled number (48px) with primary background and white text, or bordered circle with primary text",
+          "step-title": "Step heading with _heading4 _fontmedium",
+          "step-description": "Step explanation with _bodysm _fgmuted",
+          "connector": "Horizontal line or arrow connecting step circles, rendered via CSS pseudo-elements or a border"
+        }
+      }
+    },
+    "vertical": {
+      "description": "Vertical timeline-style steps with a connecting vertical line",
+      "components": [
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap8 _py12 _px6 _mw[640px] _mx[auto]",
+        "slots": {
+          "step": "Row with number on left, text on right: _flex _row _gap4",
+          "step-number": "Number circle on the vertical line",
+          "step-content": "Title + description stacked: _flex _col _gap1",
+          "connector": "Vertical line connecting number circles via left-border or pseudo-element"
+        }
+      }
+    },
+    "icon-steps": {
+      "description": "Steps with feature icons instead of numbers",
+      "components": [
+        "icon"
+      ],
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gc1 _md:gc3 _gap8 _py12 _px6 _textCenter",
+        "slots": {
+          "step": "Block with icon + title + description",
+          "step-icon": "Feature icon in rounded circle (56px) with muted background",
+          "step-title": "Step heading",
+          "step-description": "Step explanation",
+          "connector": "Arrow or dashed line between icons"
+        }
+      }
+    }
+  },
+  "visual_brief": "Step-by-step process section with numbered steps arranged horizontally. Each step features a prominent circular number badge (48px diameter) with primary-color background and white bold text, a step title in heading4 weight below the circle, and a 2-3 line description in muted small text. Steps are connected by thin horizontal lines or subtle arrows running between the number circles at their vertical center, creating a visual flow from left to right. Typically 3-4 steps in a row. A centered section heading and subtext sit above the steps. The vertical preset arranges steps in a timeline format with a continuous vertical line on the left, number circles overlapping the line, and step content (title + description) to the right. The icon-steps preset replaces numbers with feature icons in larger rounded background circles.",
+  "responsive": {
+    "mobile": "Steps stack vertically regardless of preset. Number circles align left with content to the right (timeline style). Connecting lines become vertical. Horizontal connectors hidden. Text left-aligned. Gap reduces to gap6.",
+    "tablet": "Horizontal preset shows 3 columns. Connectors visible. Vertical preset centered at comfortable width. Standard spacing.",
+    "desktop": "Full horizontal row with visible connecting lines between step circles. Generous gap8 spacing. Section centered with py12 padding."
+  },
+  "motion": {
+    "micro": "Step connector lines draw in from left to right with 400ms ease as each step enters viewport.",
+    "transitions": "Steps stagger in on section enter with fade-up (translateY(12px) to 0) at 300ms ease, 120ms stagger delay per step."
+  },
+  "interactions": [
+    "animate-on-mount",
+    "stagger-children",
+    "scroll-reveal"
+  ],
+  "accessibility": {
+    "role": "list",
+    "aria-label": "How it works",
+    "keyboard": [
+      "Tab navigates between steps",
+      "Shift+Tab navigates backwards between steps"
+    ],
+    "announcements": [
+      "Step {number} of {total}: {title}",
+      "Process overview with {total} steps"
+    ]
+  },
+  "default_layout": {
+    "layout": "grid",
+    "atoms": "_grid _gc1 _md:gc3 _gap8 _py12 _px6 _textCenter",
+    "slots": {
+      "step": "Numbered step block",
+      "step-number": "Circled number badge",
+      "step-title": "Step heading",
+      "step-description": "Step explanation",
+      "connector": "Visual connector between steps"
+    }
+  },
+  "layout_hints": {
+    "connector_line": "Draw a horizontal connecting line (2px, var(--d-border)) between the step circles. On mobile (stacked), use a vertical line on the left side. The line should be dashed or use a gradient fade at the ends.",
+    "step_numbers": "Step number circles should use background: var(--d-primary) with white text (or accent bg with dark text for neon themes). Size: 48px diameter, font-weight: bold. Active/current step should pulse subtly.",
+    "section_background": "Use var(--d-bg) background (same as hero) to create a visual pairing with the hero section. This groups hero + how-it-works as the \"above the fold\" narrative."
+  }
+}

package/patterns/identity-summary.json

@@ -0,0 +1,115 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "identity-summary",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Identity Summary",
+  "description": "Profile or author summary surface with a compact media anchor, name/title stack, supporting bio, metadata rows, and optional action links.",
+  "category": "profile",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Avatar",
+        "Badge",
+        "Button",
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Avatar",
+    "Badge",
+    "Button",
+    "icon"
+  ],
+  "default_preset": "editorial",
+  "presets": {
+    "editorial": {
+      "description": "Identity block for about pages and portfolio bios with a media anchor, role/title stack, biography, metadata facts, and optional action row.",
+      "components": [
+        "Avatar",
+        "Badge",
+        "Button",
+        "icon"
+      ],
+      "layout": {
+        "layout": "split",
+        "atoms": "_flex _col _gap5",
+        "slots": {
+          "media": "Compact visual anchor on the left: real portrait, monogram, or branded mark. Roughly 88-112px square or circular.",
+          "identity": "Name, role/title, and short biography stacked with a clear hierarchy.",
+          "meta": "Two to four compact fact rows such as location, email, practice, or availability. Each row uses an aligned icon chip plus label/value stack or a short fact pill.",
+          "actions": "Optional explicit action buttons or links such as email, CV download, or social profile links."
+        }
+      }
+    },
+    "compact": {
+      "description": "Small inline identity summary for sidebars, article bylines, or compact author surfaces.",
+      "components": [
+        "Avatar",
+        "Badge",
+        "icon"
+      ],
+      "layout": {
+        "layout": "row",
+        "atoms": "_flex _row _gap4 _aic",
+        "slots": {
+          "media": "Avatar or monogram chip",
+          "identity": "Short identity stack with name and subtitle",
+          "meta": "Optional single-line supporting fact"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "split",
+    "atoms": "_flex _col _gap5",
+    "slots": {
+      "media": "Profile media anchor",
+      "identity": "Name, role, and summary",
+      "meta": "Supporting identity facts",
+      "actions": "Optional actions"
+    }
+  },
+  "visual_brief": "A calm, premium identity panel rather than a dashboard widget. The media anchor sits at the left as a compact portrait, monogram, or decorative mark and should feel intentional, not like a placeholder avatar block. To the right is a vertical identity stack: name in a strong heading weight, role or title in muted supporting type, and a short biography at a comfortable reading measure. Supporting metadata sits directly beneath the biography as a compact two-column fact cluster or a short inline fact row, depending on available width. Metadata items should use consistent icon chips or quiet fact pills so the information feels attached to the identity stack rather than floating elsewhere in the card. Optional actions should read as compact editorial affordances — small action pills, secondary links, or understated buttons — not as large operational rows lifted from settings or contact panels.",
+  "layout_hints": {
+    "media_scale": "Keep the media anchor compact enough that it supports the identity instead of overwhelming it. If there is no real portrait, treat the media slot as a decorative identity mark rather than pretending it is a photo.",
+    "identity_hierarchy": "Name, role/title, biography, and metadata should read as one coherent stack. Do not detach metadata into a visually separate footer unless the route contract explicitly asks for that.",
+    "meta_attachment": "Location, email, practice, and availability facts should align to the text column and stay visually tied to the identity content. Avoid icons floating above labels or drifting away from the value text.",
+    "meta_density": "Metadata should stay compact and editorial. Prefer a calm fact cluster or short fact grid over a long stack of heavy utility rows unless the route explicitly needs an operational contact panel.",
+    "action_clarity": "If action links are shown, render them as explicit but compact actions. Avoid ambiguous naked text labels, but also avoid making editorial identity panels look like an admin action list."
+  },
+  "responsive": {
+    "mobile": "Collapse to a single-column stack: media anchor first, then identity copy, then metadata and actions. Keep the text measure comfortable and let metadata rows stack instead of wrapping awkwardly.",
+    "tablet": "Allow either a split composition with compact media on the left or a stacked composition depending on width. Metadata can sit beneath the identity block in two columns if it stays calm and aligned.",
+    "desktop": "Use a compact media anchor with a clear text column. Metadata should sit under the biography in a compact fact cluster, and actions should remain a restrained row of editorial affordances rather than a vertical utility list."
+  },
+  "motion": {
+    "micro": "Any hover or focus feedback should stay restrained. Identity surfaces should feel editorial and stable, not animated like a dashboard tile.",
+    "transitions": "If biography or metadata rows appear progressively, use a gentle fade or rise over 180-220ms without disturbing the overall panel rhythm."
+  },
+  "interactions": [
+    "animate-on-mount",
+    "hover-reveal"
+  ],
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Identity summary",
+    "keyboard": [
+      "Tab should move through any action links or buttons in a clear reading order after the identity content."
+    ],
+    "announcements": [
+      "Name, title, biography, and supporting metadata should be announced in a coherent order.",
+      "If actions are present, their purpose should be explicit from the accessible label."
+    ],
+    "focus_management": "Keep focus on explicit actions only. Decorative media and icon chips should not become stray tab stops."
+  },
+  "composition": {
+    "IdentitySummary": "Panel(d-surface, editorial) > [IdentityRow > [MediaAnchor + IdentityStack > [Name(heading-scale) + Title(text-muted) + Bio + MetaCluster]] + ActionRow?]",
+    "MetaCluster": "ResponsiveFactCluster(compact, 2-col-or-inline) > MetaFact*(icon-chip + label/value stack or fact pill)",
+    "ActionRow": "Row(compact editorial actions) > ActionLink*(icon + label)"
+  }
+}

package/patterns/instrument-schedule.json

@@ -0,0 +1,131 @@
+{
+  "id": "instrument-schedule",
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Instrument Schedule",
+  "description": "A laboratory instrument booking calendar displaying reservations across multiple instruments over time, with user attribution, maintenance windows, availability status, and quick-book interactions on free slots.",
+  "category": "science",
+  "tags": [
+    "2026",
+    "science",
+    "lab",
+    "scheduling",
+    "calendar",
+    "booking",
+    "instruments",
+    "reservation"
+  ],
+  "components": [
+    "InstrumentRow",
+    "TimeBlock",
+    "UserAvatar",
+    "MaintenanceSlot",
+    "BookingDialog",
+    "InstrumentStatus",
+    "TimeAxis",
+    "NowIndicator"
+  ],
+  "default_preset": "week",
+  "presets": {
+    "week": {
+      "description": "Week-grid calendar with instruments on the vertical axis and days/hours on the horizontal axis. Each cell represents a bookable time slot. Renders all bookings as colored blocks with user avatars and sample IDs.",
+      "layout": {
+        "layout": "grid",
+        "atoms": "_w100 _overflow-x-auto _p2"
+      }
+    },
+    "day": {
+      "description": "Detailed single-day view with hours on the vertical axis and instruments as horizontal columns. Bookings render taller with more detail (duration, sample count, user, protocol). Ideal for bench-scheduling huddles.",
+      "layout": {
+        "layout": "grid",
+        "atoms": "_w100 _overflow-x-auto _p2"
+      }
+    },
+    "list": {
+      "description": "Chronological agenda listing upcoming bookings as rows with instrument, user, time window, and sample details. Sorted by start time. Best for mobile viewing and printable schedules.",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_w100 _grid _gap2 _p3"
+      }
+    }
+  },
+  "visual_brief": "A lab-scheduling grid rendered as a d-section inside a scrollable container. The grid has InstrumentRows stacked vertically on the left axis and a horizontal TimeAxis along the top showing day/hour labels. The left column shows instrument names in semibold text with their InstrumentStatus indicator beside them: a colored 8px dot (green=online, amber=busy, red=offline, blue=maintenance) and the instrument's short-id in mono-data muted ('Thermo-Q Exactive HF' with 'THRM-01' beneath). Each InstrumentRow has a horizontal rail that spans the week, divided into hourly columns (or 30-min in day preset). TimeBlocks render as colored rectangles positioned over their reserved time range; block color is assigned per-user (stable hash to pastel palette) so multiple bookings by the same researcher share color identity. Each block contains a UserAvatar circle (20px) on the left, user name initial, and sample IDs in mono-data small text centered or truncated. Block height fills the row completely. Hovering a block surfaces a BookingDialog tooltip with full booking details: user, protocol name, sample count, start/end times, and buttons to extend, release, or message the user. MaintenanceSlots render with a distinctive hatched diagonal-stripe pattern and blue background with a wrench icon, labeled 'Maintenance'. Free slots are clickable (cursor:pointer) and hover-highlight in a subtle primary tint inviting new bookings; clicking opens the BookingDialog in creation mode. A vertical NowIndicator line with a small clock-icon pill at top crosses the grid at the current time, updating live. Weekends and after-hours cells show a subtle disabled gray tint. Color-coding by user group (badge-color) can override per-user colors when enabled. A legend anchors to the bottom-right summarizing colors and status indicators.",
+  "layout_hints": {
+    "container": "d-section with horizontal scroll overflow",
+    "note": "Lab scheduling is shared-resource allocation. Conflicts must be visually obvious. Maintenance windows cannot be double-booked. Always show instrument status alongside schedule.",
+    "instrument_row_height": "InstrumentRow minimum height 48px, maximum 80px. Row header column fixed at 200px width (sticky left on scroll).",
+    "time_block_color": "TimeBlock colors assigned by stable-hash of user-id to pastel palette — consistent across sessions. Alternative: override with user-group color when configured.",
+    "status_indicator": "InstrumentStatus dot MUST be 8px circle with icon companion (sun/moon/wrench/x). Never rely on color alone.",
+    "maintenance_pattern": "MaintenanceSlot MUST use visually distinct diagonal-stripe hatching + blue tint + wrench icon. Not just solid color — must be unmistakable as non-bookable.",
+    "now_indicator": "NowIndicator vertical line spans full grid height with z-index above time blocks. Updates position every 60s. Includes clock pill at top with current time label."
+  },
+  "default_layout": {
+    "layout": "grid",
+    "atoms": "_w100 _overflow-x-auto _p2",
+    "slots": {
+      "time-axis": "Top horizontal axis showing day/date labels (week preset) or hour labels (day preset). Sticky on scroll. Uses d-annotation small-caps muted. Weekend columns subtly tinted.",
+      "instrument-rows": "Repeating slot — one row per instrument. Left column (sticky) shows instrument name, InstrumentStatus dot, and short-id. Right rail contains TimeBlocks for that instrument.",
+      "time-blocks": "Repeating sub-slot — one per booking. Positioned absolutely within instrument row based on start/end times. Colored by user/group. Contains UserAvatar, name initial, sample IDs.",
+      "maintenance-slots": "Sub-slot for scheduled instrument maintenance windows. Renders with diagonal-stripe pattern, blue tint, and wrench icon. Non-bookable and visually distinct.",
+      "instrument-status": "Indicator dot + icon combination beside each instrument name showing current state: online (green), busy (amber), offline (red), maintenance (blue).",
+      "now-indicator": "Vertical line crossing the grid at the current time. Updates live every 60 seconds. Includes clock pill at top showing current time.",
+      "booking-dialog": "Modal/popover that opens on TimeBlock hover or free-slot click. Create mode has form for new booking (user, protocol, duration, samples). View mode shows booking details with extend/release/message actions.",
+      "legend": "Bottom-right corner legend summarizing color coding for users/groups, status indicators, and maintenance pattern."
+    }
+  },
+  "accessibility": {
+    "role": "grid",
+    "aria-label": "Instrument booking schedule",
+    "announcements": [
+      "Instrument {name} status: {status}",
+      "Booking: {user} from {start} to {end} on {instrument}",
+      "Free slot on {instrument} at {time}",
+      "New booking created for {instrument} by {user}"
+    ],
+    "keyboard": [
+      "Arrow keys: navigate between grid cells",
+      "Enter: open booking dialog on focused cell",
+      "Escape: close booking dialog",
+      "N: jump to now-indicator position",
+      "T: toggle between week/day/list preset"
+    ]
+  },
+  "responsive": {
+    "mobile": "Switches automatically to list preset. TimeBlocks render as rows with instrument name, time window, user, and samples. BookingDialog opens as full-screen sheet.",
+    "tablet": "Week grid at reduced column width. InstrumentStatus collapses to icon-only. Booking detail tooltip becomes tap-to-open rather than hover."
+  },
+  "motion": {
+    "micro": {
+      "block-hover": "brightness(1.08) + subtle shadow 150ms ease-out",
+      "free-slot-hover": "primary-tint fade-in 120ms ease-out",
+      "status-dot-pulse": "busy amber dot 1s ease-in-out infinite"
+    },
+    "transitions": {
+      "dialog-open": "popover scale 0.96 to 1.0 + fade 200ms ease-out",
+      "booking-create": "new block fade-in + height grow 300ms ease-out",
+      "booking-release": "block fade + scale 0.95 + slide-up 250ms ease-in",
+      "now-indicator-move": "line transform translate 500ms ease-in-out on minute tick"
+    },
+    "ambient": {
+      "now-pulse": "now-indicator clock pill subtle pulse 2s ease-in-out infinite",
+      "maintenance-shimmer": "hatching pattern subtle diagonal-sweep 4s linear infinite"
+    }
+  },
+  "interactions": [
+    "click-select",
+    "drag-reorder",
+    "keyboard-navigation",
+    "animate-on-mount"
+  ],
+  "composition": {
+    "InstrumentSchedule": "Section(d-section, overflow-x-auto) > [TimeAxis + InstrumentRow[] + NowIndicator + Legend]",
+    "InstrumentRow": "Row(d-row, data-instrument) > [InstrumentHeader + TimeRail > [TimeBlock[] + MaintenanceSlot[] + FreeSlot[]]]",
+    "InstrumentHeader": "Cell(d-annotation, sticky-left) > [InstrumentName + InstrumentStatus + ShortId]",
+    "TimeBlock": "Block(d-surface, data-interactive, data-user-color, positioned) > [UserAvatar + UserInitial + SampleIDs]",
+    "MaintenanceSlot": "Block(d-annotation, data-maintenance, hatched) > [WrenchIcon + MaintenanceLabel]",
+    "InstrumentStatus": "Indicator(d-annotation, data-status) > [StatusDot + StatusIcon]",
+    "NowIndicator": "Line(d-annotation, data-now, vertical) > [ClockPill + VerticalRule]",
+    "BookingDialog": "Popover(d-surface) > [BookingForm | BookingDetails + ActionButtons]"
+  }
+}