# Section: citation-tools

**Role:** auxiliary | **Shell:** sidebar-main | **Archetype:** citation-tools
**Description:** Auxiliary citation management surface for organizing a citation library and running Shepardize-style validity checks with visual citation graphs.

## Quick Start

**Shell:** Collapsible sidebar with header bar and scrollable main content area. Used by saas-dashboard, financial-dashboard, workbench, ecommerce (account pages). (nav: 240px, header: 52px)
**Pages:** 2 (citations, citation-check)
**Key patterns:** data-table [moderate], citation-graph [moderate]
**CSS classes:** `.counsel-page`, `.counsel-seal`, `.counsel-header`, `.mono-data`
**Density:** comfortable
**Voice:** Formal and precise.

## Shell Implementation (sidebar-main)

### body

- **flex:** 1
- **note:** Sole scroll container. Page content renders directly here. No wrapper div around outlet.
- **atoms:** _flex1 _overflow[auto] _p6
- **padding:** 1.5rem
- **overflow_y:** auto

### root

- **atoms:** _flex _h[100vh]
- **height:** 100vh
- **display:** flex
- **direction:** row

### header

- **align:** center
- **border:** bottom
- **height:** 52px
- **display:** flex
- **justify:** space-between
- **padding:** 0 1.5rem
- **left_content:** Breadcrumb — omit segment when it equals page title
- **button_sizing:** Buttons in the header use compact sizing: py-1.5 px-3 text-sm (~32px tall). The header is a tight 52px bar — default d-interactive padding is too large here.
- **right_content:** Theme toggle (sun/moon icon) + Search/command trigger. Theme toggle toggles light/dark class on html element.

### sidebar

- **nav:**
  - flex: 1
  - padding: 0.5rem
  - item_gap: 2px
  - group_gap: 0.5rem
  - overflow_y: auto
  - item_content: icon (16px) + label text. Collapsed: icon only, text hidden.
  - item_padding: 0.375rem 0.75rem
  - item_treatment: d-interactive[ghost]
  - group_header_treatment: d-label
- **atoms:** _flex _col _borderR
- **brand:**
  - align: center
  - border: bottom
  - height: 52px
  - content: Logo/brand + collapse toggle
  - display: flex
  - padding: 0 1rem
- **width:** 240px
- **border:** right
- **footer:**
  - border: top
  - content: User avatar + settings link
  - padding: 0.5rem
  - position_within: bottom (mt-auto)
- **position:** left
- **direction:** column
- **background:** var(--d-surface)
- **collapsed_width:** 64px
- **collapse_breakpoint:** md

### main_wrapper

- **flex:** 1
- **atoms:** _flex _col _flex1 _overflow[hidden]
- **overflow:** hidden
- **direction:** column

### Anti-patterns

- Do NOT nest `overflow-y-auto` inside another `overflow-y-auto` — one scroll container per region.
- Do NOT apply `d-surface` to shell frame regions (sidebar, header). Use `var(--d-surface)` or `var(--d-bg)` directly.
- Do NOT add wrapper `<div>` elements around shell regions — the grid areas handle placement.

## Shell Notes (sidebar-main)

- **Hotkeys:** Navigation hotkeys defined in the essence are keyboard shortcuts. Implement as useEffect keydown event listeners — do NOT render hotkey text in the sidebar UI.
- **Collapse:** Sidebar collapse toggle should be integrated into the sidebar header area (next to the brand/logo), not floating at the bottom of the sidebar.
- **Breadcrumbs:** For nested routes (e.g., /resource/:id), show a breadcrumb trail above the page heading inside the main content area.
- **Empty States:** When a section has zero data, show a centered empty state: 48px muted icon + descriptive message + optional CTA button.
- **Section Labels:** Dashboard section labels should use the d-label class. Anchor with a left accent border: border-left: 2px solid var(--d-accent); padding-left: 0.5rem.
- **Section Density:** Dashboard sections use compact spacing. Apply data-density='compact' on d-section elements for tighter vertical rhythm than marketing pages.
- **Page Transitions:** Apply the entrance-fade class (if generated) to the main content area for smooth page transitions.

## Spacing Guide

| Context | Token | Value | Usage |
|---------|-------|-------|-------|
| Content gap | `--d-content-gap` | `1rem` | Gap between sibling elements |
| Section padding | `--d-section-py` | `5rem` | Vertical padding on d-section |
| Surface padding | `--d-surface-p` | `1.25rem` | Inner padding for d-surface |
| Interactive V | `--d-interactive-py` | `0.5rem` | Vertical padding on buttons |
| Interactive H | `--d-interactive-px` | `1rem` | Horizontal padding on buttons |
| Control | `--d-control-py` | `0.5rem` | Vertical padding on inputs |
| Data row | `--d-data-py` | `0.625rem` | Vertical padding on table rows |

---

**Guard:** strict mode | DNA violations = error | Blueprint violations = warn

**Key palette tokens:**

| Token | Value | Role |
|-------|-------|------|
| `--d-text` | `#1C1917` | Body text, headings, primary content |
| `--d-accent` | `#991B1B` |  |
| `--d-border` | `#D6CFC0` | Dividers, card borders, separators |
| `--d-primary` | `#1E3A5F` | Brand color, key interactive, selected states |
| `--d-surface` | `#FFFFFF` | Cards, panels, containers |
| `--d-secondary` | `#7F1D1D` | Secondary brand color, supporting elements |
| `--d-bg` | `#FAF7F2` | Page canvas / base layer |
| `--d-text-muted` | `#6B6054` | Secondary text, placeholders, labels |
| `--d-accent-hover` | `#7F1D1D` |  |
| `--d-primary-hover` | `#14284A` | Hover state for primary elements |
| `--d-surface-raised` | `#F4F0E8` | Elevated containers, modals, popovers |
| `--d-secondary-hover` | `#991B1B` |  |

Full token set: `src/styles/tokens.css`

**Visual Treatments:** All 6 base treatments available (see DECANTR.md for usage).
**Theme decorators:**

| Class | Usage |
|-------|-------|
| `.counsel-page` | Warm cream document page (#FAF7F2) with generous margins and serif body text. Document-inspired foundation. |
| `.counsel-seal` | Official seal with ribbon embellishment in navy and oxblood. Authority and certification mark. |
| `.counsel-header` | Georgia or Garamond serif heading with deep navy color. Formal section and page headers. |
| `.counsel-margin` | Annotation margin area with dashed divider for notes and references. Legal pad aesthetic. |
| `.counsel-divider` | Thin horizontal rule with warm border tone for clean section separation. |
| `.counsel-oxblood` | Deep oxblood red accent elements for emphasis, warnings, and critical status indicators. |
| `.counsel-citation` | Indented citation blocks with left border accent and italic serif type. Legal reference styling. |
| `.counsel-highlight` | Subtle highlight on key text using warm cream background tint. Marks important passages. |

**Compositions:** **document:** Legal document viewer with serif body, citation styling, and annotation margins.
**marketing:** Law firm marketing page with authoritative serif headlines and seal branding.
**client-portal:** Client portal with case status, document access, and secure messaging.
**case-dashboard:** Legal case dashboard with matter listings, docket calendar, and client directory.
**Spatial hints:** Density bias: none. Section padding: 72px. Card wrapping: subtle.


Usage: `className={css('_flex _col _gap4') + ' d-surface counsel-glass'}` — atoms via css(), treatments and theme decorators as plain class strings.

---

**Zone:** App (auxiliary) — sidebar-main shell
Supporting section within App zone. Shares navigation with primary.
For full app topology, see `.decantr/context/scaffold.md`

## Features

citations, shepardize

---

## Visual Direction

**Personality:** Authoritative legal research workspace with warm cream backgrounds and deep navy accents. Serif body typography with monospace case citations. Citation graphs visualize case law networks showing which decisions cite which. Contract diffs reveal redlining with author attribution in margins. Matter cards track billable hours and deadlines with urgency indicators. Lucide icons. Scholarly.

**Personality utilities available in treatments.css:**
- `mono-data` — Monospace + tabular-nums for metrics, IDs, timestamps

## Pattern Reference

### data-table

Sortable, filterable, paginated data table with row selection

**Visual brief:** Full-width data table with a sticky header row. Header cells use uppercase, small, muted text with sort-direction arrows on sortable columns. Data rows have consistent vertical padding (py3) for scan-ability, with subtle zebra-stripe background on hover. Row-selection checkboxes align in the first column. Active selections highlight the row with a faint primary-color tint. A toolbar above the table holds a search input on the left and action buttons (export, delete) on the right. Pagination controls at the bottom show current range, total count, and prev/next buttons with disabled states at boundaries.

**Components:** Table, Checkbox, Button, Input, Badge, icon

**Composition:**
```
Table = Table(d-data) > [TableHeader > HeaderCell(sortable?, sort-indicator?)[] + TableBody > DataRow(d-data-row, hoverable, striped?)[]]
DataRow = Row > [Checkbox?(d-control) + DataCell(d-data-cell)[]]
Toolbar = Row(d-control) > [SearchInput(d-control) + ActionButtons(d-interactive)]
DataTable = Container(d-data, full-width) > [Toolbar + Table + Pagination]
Pagination = Row(d-control) > [PageInfo(text-muted) + PageButtons(d-interactive, variant: ghost)[]]
```

**Layout slots:**
- `toolbar`: Top row with optional search Input and action Buttons
- `pagination`: Footer with page info and prev/next Buttons
- `table-body`: Data rows with optional row selection Checkbox
- `table-header`: Column headers with sort controls
**Motion:**
| Interaction | Animation |
|-------------|-----------|
| micro | Row hover highlights with 150ms background-color transition. Sort arrow rotates 180deg on direction change with 200ms ease. Checkbox scales briefly on check (scale 1.1 for 100ms). |
| transitions | Rows entering from filter/search fade in with 200ms opacity transition. Bulk-selected rows highlight with a slide-in left-border accent over 150ms. |

**Responsive:**
- **Mobile (<640px):** Table transforms into a stacked card list. Each row becomes a vertical card with label-value pairs. Toolbar search goes full-width. Pagination simplifies to prev/next only. Horizontal scroll is avoided entirely.
- **Tablet (640-1024px):** Table displays with horizontal scroll if columns exceed viewport. Sticky first column for row identifiers. Toolbar remains single row.
- **Desktop (>1024px):** Full table layout with all columns visible. Sticky header on scroll. Toolbar with search, filters, and bulk action buttons. Full pagination with page numbers.

**Accessibility:**
- Role: `Table uses semantic <table>, <thead>, <tbody>, <th>, <td> elements. Sort buttons are <button> inside <th> with aria-sort attribute.`


### citation-graph

An interactive network graph visualizing case citation relationships, cross-references, and legal authority chains for research and precedent analysis.

**Visual brief:** A full-bleed dark canvas with circular nodes representing cases. Node size scales logarithmically with citation count (leading cases become large hubs). Node color encodes court level (SCOTUS dark purple, Circuit Courts blue, District Courts teal, State courts amber) or topic area depending on filter. Edges are directed curved arrows: 'cites' edges in muted gray, 'cited-by' in primary blue, 'overruled' in red with dashed stroke, 'distinguished' in orange. Hovering any node expands a tooltip with full case citation (e.g. 'Brown v. Board of Education, 347 U.S. 483 (1954)'), year, jurisdiction, key holding excerpt, and in/out citation counts. Left-side filter panel contains collapsible sections for jurisdiction, date range slider, topic tags, and citation-depth control. A depth indicator pill in the top-right shows current traversal depth (e.g. '3 hops from root case'). Nodes can be dragged to reposition.

**Components:** CitationNode, CitationEdge, CaseLabel, DepthIndicator, FilterPanel

**Composition:**
```
FilterPanel = Panel(d-surface) > [JurisdictionFilter + DateRangeFilter + TopicFilter + DepthSlider]
GraphCanvas = Viewport(zoomable, pannable) > [EdgeLayer + NodeLayer + LabelLayer]
CitationEdge = Path(arrow, styled-by-relation) > RelationBadge?
CitationNode = Circle(sized, court-colored) > [CaseLabel + HoverTooltip > FullCitation]
CitationGraph = Section(d-section, full-bleed) > [FilterPanel(left) + GraphCanvas > [CitationNode[](d-interactive) + CitationEdge[]] + DepthIndicator(top-right) + Legend]
```

**Layout slots:**
- `body`: Long-form text content with headings and paragraphs
- `toc`: Table of contents sidebar (optional)
  **Layout guidance:**
  - note: Full-bleed graph canvas. Node hit targets minimum 24px. Case labels must render textually, not symbolically.
  - container: d-section
  - edge_semantics: Edge style MUST encode relationship type (cites/overruled/distinguished). Do not collapse to single style.
  - citation_format: Always use Bluebook citation format for case labels. Court and year required.
**Motion:**
| Interaction | Animation |
|-------------|-----------|
| edge-hover | stroke-width +1.5px + opacity-boost 150ms |
| node-hover | scale(1.15) + highlight-ring 180ms ease-out |
| filter-apply | nodes fade to 0.2 then back 400ms ease-in-out |
| layout-reflow | position lerp 800ms spring |
| preset-switch | layout morph 600ms ease |
| active-path | dash-offset drift 3s linear infinite on focused-path edges |

**Responsive:**
- **Mobile (<640px):** Graph remains interactive but filter panel becomes a bottom sheet. Node labels hidden by default, shown on tap.
- **Tablet (640-1024px):** Filter panel collapses to icon bar. Graph canvas expanded.

**Accessibility:**
- Role: `application`
- Keyboard: Tab: cycle through citation nodes; Enter: focus node and show full detail; Arrow keys: pan canvas; +/-: zoom in/out; F: open filter panel; Escape: clear selection
- Announcements: Case {citation} has {inCount} inbound and {outCount} outbound citations; Filter {name} set to {value}; Traversal depth changed to {depth}


---

## Pages

### citations (/citations)

Layout: data-table → citation-graph

### citation-check (/citations/check)

Layout: citation-graph → data-table
