indira-workspace-ui 0.1.0

package/docs/design-system.md

@@ -0,0 +1,462 @@
+# Indira Workspace UI — design system specification
+
+A build-from-scratch specification for the UI language used by the BRD
+Governance Tool. Written so an agent (or a person) can reproduce the library in
+any stack without seeing the original code. Where a number appears, it is the
+number — not a suggestion.
+
+The reference implementation is React + Tailwind, but nothing here depends on
+either. The system is: **a token set, a fixed set of scales, one shell, ~25
+components, and a short list of laws.** Everything the product looks like falls
+out of those.
+
+---
+
+## 0. The three sentences
+
+1. **Constraint and repetition read as "designed"; variety reads as "generated".**
+   One accent, one radius set, one shadow set, one icon family, one type scale.
+2. **Status is data, the brand is chrome.** Six status hues carry meaning; the
+   brand colour carries *action*. They never trade places.
+3. **A person who opens a screen must find its one primary action within two
+   seconds, and must never be shown data they did not come for.**
+
+---
+
+## 1. Tokens
+
+Tokens are CSS custom properties holding **"R G B" triplets** (no `rgb()`), so
+every colour can take an opacity modifier: `rgb(var(--c-primary) / 0.12)`.
+Two token sets — light and dark — over one set of components. Dark is *re-toned*,
+not inverted: it never bottoms out at pure black, and the brand is lifted so it
+still clears 7:1.
+
+### 1.1 Colour — light
+
+| Token | Value | Role |
+| --- | --- | --- |
+| `--c-primary` | `182 30 66` (#B61E42) | The single accent. Primary buttons, active nav, focus rings, links. |
+| `--c-on-primary` | `255 255 255` | Text/icon on primary. |
+| `--c-primary-container` | `243 204 219` (#F3CCDB) | Tonal buttons, active chip fill, accent notices. Deliberately a saturated rose, not a pale tint: a pale pink is 12/255 from the "rejected" chip and reads as an error. |
+| `--c-on-primary-container` | `122 18 48` | Text on the container. |
+| `--c-canvas` | `247 249 251` | The page ground behind everything. |
+| `--c-surface` | `255 255 255` | Cards, table bodies, dialogs. |
+| `--c-surface-1` | `248 250 252` | Hover, table header rows, wells. |
+| `--c-surface-2` | `241 245 249` | Controls at rest, tab tracks, count boxes, notices. |
+| `--c-surface-3` | `232 238 245` | Pressed / selected. |
+| `--c-sidebar` | `255 255 255` | Navigation column and header. Light, never a dark rail. |
+| `--c-sidebar-line` | `233 237 243` | Hairline inside the sidebar. |
+| `--c-on-surface` | `15 23 42` | Headings, primary text ("ink"). |
+| `--c-on-surface-var` | `71 85 105` | Secondary text ("ink-muted"). |
+| `--c-on-surface-faint` | `100 116 139` | Tertiary text, timestamps ("ink-faint"). Held at 4.8:1 on white — this is the floor for anything that is *text*. |
+| `--c-outline-var` | `233 237 243` | The hairlines that separate ("line"). |
+| `--c-outline` | `203 213 225` | Control borders ("line-strong"). |
+
+Status — the **entire data palette**. Charts may draw from here and nowhere else.
+
+| Token | Light | Dark | Meaning |
+| --- | --- | --- | --- |
+| `--c-st-draft` | `148 163 184` | `148 163 184` | Not yet submitted |
+| `--c-st-submitted` | `37 99 235` | `96 165 250` | Sent, level 1 not yet acted |
+| `--c-st-review` | `2 132 199` | `56 189 248` | In review |
+| `--c-st-approved` | `22 163 74` | `74 222 128` | Approved / published |
+| `--c-st-rejected` | `220 38 38` | `248 113 113` | Rejected |
+| `--c-st-sentback` | `217 119 6` | `251 191 36` | Sent back for changes; also "attention" |
+
+Each status also has a chip triplet — pastel fill, saturated label, tinted
+border — `--chip-{status}`, `--chip-{status}-fg`, `--chip-{status}-bd`:
+
+```
+draft      241 245 249 / 71 85 105  / 226 232 240
+submitted  239 246 255 / 29 78 216  / 219 234 254
+review     224 242 254 / 3 105 161  / 186 230 253
+approved   220 252 231 / 21 128 61  / 187 247 208
+rejected   254 226 226 / 185 28 28  / 254 202 202
+sentback   254 243 199 / 180 83 9   / 253 230 138
+```
+
+Colour-vision rule: approved↔rejected (green↔red) and submitted↔review
+(blue↔cyan) fail deuteranopia when the segments *touch*. So: no stacked bars
+with adjacent statuses; status always pairs colour with a **shape** (icon or
+label); KPI tiles instead of distribution bars; the only chart is single-series
+in the accent.
+
+### 1.2 Colour — dark
+
+```
+--c-primary 242 135 158   --c-on-primary 92 12 36
+--c-primary-container 116 18 46   --c-on-primary-container 251 208 218
+--c-canvas 15 18 24   --c-surface 22 26 33   --c-surface-1 28 33 41
+--c-surface-2 36 42 52   --c-surface-3 45 53 64
+--c-sidebar 22 26 33   --c-sidebar-line 42 49 60
+--c-on-surface 226 232 240   --c-on-surface-var 160 172 187   --c-on-surface-faint 125 138 154
+--c-outline-var 42 49 60   --c-outline 65 74 87
+chips: draft 36 42 52/160 172 187/51 59 71 · submitted 23 41 77/147 197 253/30 58 107
+       review 12 53 80/125 211 252/18 73 110 · approved 16 55 31/134 239 172/23 81 45
+       rejected 69 22 26/252 165 165/97 33 38 · sentback 64 48 12/252 211 77/90 68 19
+```
+
+Selected with `[data-theme='dark']` on the root; the default follows
+`prefers-color-scheme`. Shadows disappear on dark surfaces, so every card gets
+a 1px `--c-outline-var` border in dark mode only.
+
+### 1.3 Elevation — three steps, nothing else
+
+```
+--elev-1: 0 1px 2px rgb(15 23 42 / 0.04), 0 1px 3px rgb(15 23 42 / 0.06)   controls at rest, filled buttons
+--elev-2: 0 2px 4px rgb(15 23 42 / 0.05), 0 8px 16px rgb(15 23 42 / 0.08)  cards, menus, popovers
+--elev-3: 0 4px 8px rgb(15 23 42 / 0.06), 0 16px 32px rgb(15 23 42 / 0.14) dialogs, contact cards
+dark:     same offsets with rgb(0 0 0 / 0.3–0.5)
+```
+
+Cards carry `--elev-2` and **no border** in light mode. Hairlines (`--c-outline-var`)
+separate *regions inside* a card (header from body, table rows); shadows
+separate the card from the canvas.
+
+### 1.4 Radius — four values
+
+| Name | px | Where |
+| --- | --- | --- |
+| `xs` | 8 | Inputs, tags, chips' count boxes, alert boxes, small buttons, tab segments |
+| `sm` | 12 | Nav items, menus, dialogs, inner panels, tab tracks, contact cards |
+| `lg` | 16 | Cards — the dominant shape |
+| `full` | 9999 | Buttons, chips, pills, avatars, badges |
+
+24px appears exactly once: the rounded corner where the content panel meets
+the shell (§3).
+
+### 1.5 Type — one family, six sizes, four weights
+
+Family: `Inter, "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif`.
+Mono: `JetBrains Mono, Cascadia Mono, Consolas, ui-monospace`. Document
+(rendered BRD only): `Georgia, Tinos, "Times New Roman", serif`.
+
+| Token | size / line | Weight | Use |
+| --- | --- | --- | --- |
+| `xs` | 12 / 16 | 500–600 | Table headers (uppercase, tracking 0.06em), meta, captions, labels, chips |
+| `sm` | 14 / 20 | 400–500 | Body, table cells, nav items, buttons (600) |
+| `base` | 16 / 24 | 500–600 | Card titles, names in headers |
+| `lg` | 20 / 28 | 600 | Detail-page titles |
+| `xl` | 24 / 32 | 600 | KPI figures, compact page titles (when one is used at all) |
+| `2xl` | 36 / 40 | 700 | Reserved. Not used on workspace screens. |
+
+Two deliberate exceptions, set in component CSS rather than utilities so the
+scale itself stays closed: card titles at **18/24 medium**, and contact-card
+rows at **13px**.
+
+Weights: 400 body · 500 labels/nav · 600 titles, buttons, figures · 700 never
+in the workspace. Numbers are always `tabular-nums`.
+
+Enforce the scale by **deleting** the framework's defaults, not extending them:
+an off-scale utility should fail to compile.
+
+### 1.6 Spacing — the 4/8 grid, and the numbers that recur
+
+| Value | Where it recurs |
+| --- | --- |
+| 4 | Gap between icon-only buttons; tab-track padding; chip count-box inset |
+| 8 | Gap between a label and its control; gap between meta rows; toolbar-button gap |
+| 12 | Gap between chips; gap between avatar and text; contact-card row gap |
+| 16 | Card inner padding (compact); table cell horizontal padding; gap between icon and title in a card |
+| 20 | Card padding (BRD card); horizontal padding of notices |
+| 24 | Grid column gap; dialog body padding; card body padding; page gutter (min) |
+| 32 | Page gutter at ≥1280; header horizontal padding |
+| 36 | BRD card side padding; status orb offset from the card edge |
+| 48 | Grid row gap when cards carry an overhanging orb |
+| 72 | Header height |
+| 224 | Sidebar width (84 when collapsed to a rail) |
+
+Density over air: 56px table rows, 48px nav items, 40px controls, 34px small
+buttons, 32px chips.
+
+### 1.7 Motion
+
+One curve: `cubic-bezier(0.2, 0, 0, 1)`. Durations: 100ms (fast), 150ms
+(default, colour/shadow/transform), 200ms (layout: sidebar width). Skeletons,
+never spinners, for content that is loading; a spinner only inside a button
+that is doing something. Nothing pulses at the reader. The one animation is
+`fade-up` (150ms) for menus, cards and dialogs appearing.
+
+### 1.8 Icons
+
+One family (Lucide geometry), 24-unit grid, stroke 1.75, round joins. Sizes
+14 / 16 / 18 / 20 / 24 only. Inline SVG, ~35 glyphs. **Never emoji.** Every
+status has a glyph as well as a colour: draft `file`, submitted `send`, review
+`clock`, approved `check-circle`, rejected `ban`, sent back `send-back`.
+
+---
+
+## 2. Roles, not colours, in components
+
+Components reference **roles**, never raw tokens: `primary`, `primary-on`,
+`primary-container`, `canvas`, `surface`, `surface-1..3`, `sidebar`, `ink`,
+`ink-muted`, `ink-faint`, `line`, `line-strong`, `st-{status}`. Swapping the
+brand means changing four numbers in §1.1; nothing else moves.
+
+Hover and press are **state layers** — an inset wash of the on-colour over the
+container (`inset 0 0 0 100px rgb(var(--c-on-primary) / 0.12)`) — never a
+second hard-coded colour.
+
+---
+
+## 3. The shell — how the sidebar and header make an "L"
+
+```
+┌──────────┬────────────────────────────────────────────────┐
+│ brand    │  greeting        [ search ]      🔔  (avatar) ▾ │  ← header, 72px, white
+│          ├──╮                                              │
+│ ● Nav    │  ╰─────────────────────────────────────────────┤  ← 24px radius corner
+│   Nav    │                                                │
+│   Nav    │            content panel (canvas grey)         │
+│          │                                                │
+│ ⚙  ⏻    │                                                │
+└──────────┴────────────────────────────────────────────────┘
+   224px
+```
+
+- The **shell** itself is the white surface. The sidebar and the header are
+  regions of it, not boxes beside each other — so **neither carries a border**.
+- The **content panel** is the only thing with an edge: canvas grey, with a
+  **24px top-left radius** curving into the corner where sidebar meets header.
+  That single curve is what makes the two read as one "L".
+- Sidebar: brand mark at top (20px padding), nav items 48px tall, 14px/500,
+  icon 20, radius 12, **14px vertical pitch** between items, 16px side padding.
+  Active item: solid `primary` fill, `on-primary` text, 600 weight, soft
+  tinted shadow `0 8px 16px rgb(var(--c-primary) / 0.22)`. No section
+  captions — a 12px gap separates groups. Theme and sign-out pinned at the foot.
+- A collapse control sits on the sidebar's outer edge at a fixed height
+  (`top: 26px`, half outside), so it is in the same place whether the sidebar
+  is 224px or the 84px rail. Below 1000px the rail is forced.
+- Header: greeting (12px muted "Good morning," over 16px/600 name) on the left;
+  search 320px, 40px tall, `surface-1` fill, no border until focus; bell with a
+  count badge (16px, primary); avatar 40 + name 14/600 + role 12 muted + chevron
+  in a pill trigger. All on one 72px centre line. Header hides when the sidebar
+  is railed (focus mode) — the rail keeps theme and sign-out so nothing is lost.
+- Double-tap of the space bar outside any field toggles browser full screen.
+
+---
+
+## 4. Components
+
+Each entry: anatomy · measurements · states · rules. All are single-purpose.
+
+### 4.1 Button `.btn`
+Pill (`full`), 40px, `px-5`, 14/600, gap 8, icon 18. Small: 34px, `px-4`,
+12px, icon 16. Icon-only: 40×40 (34×34 small). Variants:
+
+- **filled** — primary + `elev-1`. **At most one per view.**
+- **tonal** — primary-container. Secondary.
+- **outlined** — surface + `line-strong` border. Tertiary.
+- **text** — transparent. Row actions, "Clear", "View all".
+- **approve / sendback / reject** — status-tinted, used only for the three
+  decisions.
+- **attention** modifier — the filled button ringed in sent-back amber
+  (`0 0 0 3px rgb(var(--c-st-sentback) / 0.35)`) while the form is incomplete:
+  still the thing to press, visibly "not ready yet".
+
+Disabled: `opacity: 0.4`, `pointer-events: none`.
+
+### 4.2 Card `.card`
+`surface`, radius 16, `elev-2`, no border (hairline in dark). Header
+`.card-h`: 24px horizontal / 20px vertical, hairline below, title 16/600.
+Body `.card-b`: 24px. A card is a *region*, never decoration — do not nest cards.
+
+### 4.3 Stat tile `.stat-tile`
+A card with a 44px tinted status icon (radius 8) left, figure 24/600 above a
+12/500 muted label right. Click filters the list it summarises. Active: 2px
+primary ring, no border change.
+
+### 4.4 Large-icon record card `.brd-card`
+For lists where the *state* of a record matters more than its metadata.
+Card 16px radius, `elev-2`, padding `48 36 24`, min-height 230, 4 columns from
+1100px, gaps 24 across / 48 down. A **52px solid status orb** (white glyph,
+`0 6px 14px rgb(15 23 42 / 0.14)`) is absolutely positioned at `top: -26px;
+left: 36px` — centred on the card's top edge. Title 18/24/500, clamped to two
+lines **and reserving two** so meta rows align across a row. Two meta rows at
+28px pitch (12px, faint, 14px icon). Hairline. Footer pinned with `mt-auto`:
+two 11/700 labels ("Approvers", "Progress"), a 24px avatar stack (-4px overlap,
+2px surface ring, dashed "+N"), and a 14/700 tabular percentage.
+The card shows **no id, no status text, no priority** — the orb *is* the status;
+the id lives in `title=` and an `sr-only` span.
+
+### 4.5 Table `.th` `.td` `.table-plan`
+Header: 12px uppercase 600, tracking 0.06em, faint, `surface-1` row, hairline.
+Cells: 14px, `px-4 py-3.5`, hairline, `overflow-wrap: anywhere` so a long
+email never widens the table. Any table with more than five columns uses
+`table-layout: fixed` with a `<colgroup>` **column plan** in percentages, and
+every single-line cell `truncate`s with the full value in `title=`. Secondary
+facts (email under name, designation under department) go on a second 12px
+faint line inside the cell, not in their own column. Row actions are icon
+buttons with tooltips. Clickable rows use `.row-link` (hover `surface-1`).
+
+### 4.6 Filter chips `.fchip` `.fcount`
+32px, radius 8, 13/500, `padding 0 4px 0 12px`, 12px gap between chips. The
+count rides in a 26px box (radius 8, `surface-2`, 11/600 tabular). Active: ink
+label; count box `surface` with a 1px primary border and primary text. Counts
+come from the **full** set so a chip always says how many are behind it.
+
+### 4.7 Tabs `.tabs` `.tab` — segmented control
+Track: inline-flex, 4px padding, radius 12, `surface-2`. Segment: 34px,
+`0 14px`, radius 8, 13/500, muted. Active: `surface` fill, `elev-1`, ink,
+600. Badge: 20px, radius 6, `surface-3`; on the active segment it becomes
+primary-container. An 8px amber dot (`.tab-alert`) marks a tab with empty
+required fields — only after a submit attempt, and it does not pulse.
+Tabs switch **views**; chips **filter**. They must not look alike.
+
+### 4.8 Toolbar button `.tbtn`
+32px, radius 8, `surface`, `elev-1`, 12/500, icon 16. Icon-only 32×32.
+Active: primary-container. Used for grid/list toggles and "clear search".
+
+### 4.9 Inputs `.inp` `.lbl` `.hint`
+40px, radius 8, `line-strong` border, `surface`, 14px, `px-4`. Hover: faint
+border. Focus: primary border + `0 0 0 3px rgb(var(--c-primary) / 0.12)`.
+Label 12/600 muted above with 8px gap; hint 12 faint below. Required marked
+with a primary asterisk. Search inputs carry a 16px glyph at `left: 12px`.
+In dense rows (pipeline editor) controls drop to 36px.
+
+### 4.10 Chip / pill / tag
+- **Status pill** `.chip .chip--{status}`: pill, `px-3 py-1`, 12/600, pastel
+  fill + saturated text + tinted border, 6px dot in the saturated colour.
+- **Tag** `.tag`: radius 8, `surface-1`, hairline, 12/500 muted. Roles, levels,
+  counts.
+- **Version chip** `.vchip`: like tag but mono 12/600. Current version takes
+  the primary container.
+
+### 4.11 Notice `.notice` (+ `-accent`, `-alert`)
+Radius 8, **no border**, `surface-2` fill (accent: primary-container; alert:
+rejected chip fill), `px-5 py-4`, 14px/1.5. The 20px icon sits on the first
+line's centre (`mt-0.5`) and carries the tone colour. Text is `min-w-0 flex-1`;
+an optional action is `shrink-0` on the right.
+
+### 4.12 Avatar
+Circle, initials 600 white on one of six tints derived from the name
+(`#1D4ED8 #6D28D9 #15803D #B45309 #475569 #0F766E` — all outside the brand's
+red family and outside the status palette, so an avatar can never be mistaken
+for either). Renders a photo instead when the person has one. Sizes 20 / 24 /
+28 / 32 / 40 / 44 / 48. Stacks overlap by 4px with a 2px surface ring.
+
+### 4.13 Person + contact card `.person` `.person-card`
+Any rendered person is a trigger: hover 350ms in / 180ms out, focus opens
+immediately, Esc closes. The card (300px, radius 12, `elev-3`, hairline) is
+portalled to `body` and positioned `fixed` below the trigger, flipping above
+when it would not fit. Head: 48px avatar, name 16/600, designation 12 muted,
+status tag if not active. Body rows (13px, 16px icon, 10px gap): email as a
+mailto link, department, "Reports to …", role. Resolves from id, email, or
+name against one cached directory request. Inside a `<button>` it is
+hover-only (no second focusable).
+
+### 4.14 Stepper (approval route)
+Stamp: 40px circle, 2px border, 12/500. Four states, each a **shape as well as
+a colour** so it survives a greyscale print: done = primary fill + check;
+current = primary-container + primary ring 4px at 14%; rejected = rejected
+chip + strike; waiting = surface + `line-strong`. Horizontal (strip, 168px
+min per step, connector at `top: 20px`) or vertical (connector down the left
+at `left: 20px`, 24px gap between steps, text left-aligned). No pulsing.
+
+### 4.15 Dialog `.modal`
+Scrim `black/30`, panel `surface` radius 12 `elev-3`, `max-h: calc(100vh - 48px)`,
+**flex column: header and footer fixed, only the body scrolls** (24px padding).
+Focus trapped, returned to the invoker on close, Esc closes. Sizes 480 / 640 /
+960.
+
+### 4.16 Full-screen document `.doc-full`
+`fixed inset-0`, canvas fill, page 920px centred, one pill "Exit" control
+fixed top-right (40px, `elev-2`). Esc closes. Body scroll locked beneath.
+
+### 4.17 Skeleton `.skel`
+Rounded bars in `surface-2`, in the **shape of the content** (a card skeleton
+has an orb, two title lines, meta, a rule, a footer) so nothing reflows when
+data lands.
+
+### 4.18 Empty state
+48px circular `surface-1` icon well, 14/500 title, 14 muted line (max 46ch),
+one tonal small button. Never a paragraph.
+
+### 4.19 Toast
+Bottom-centre, `elev-2`, 14px, auto-dismiss; error variant uses the rejected
+chip colours. One at a time.
+
+---
+
+## 5. Laws
+
+These are the rules the components exist to serve. A screen that follows every
+component spec but breaks one of these is wrong.
+
+1. **Two-second rule.** Every screen has one primary action, it is the only
+   filled button on the screen, and it sits top-right of the content panel.
+   A newcomer finds it in two seconds without reading.
+2. **No page-name heading.** The active sidebar item already names the screen.
+   The top of the content panel is a *toolbar* — filters left, view controls
+   and the primary action right — not a title. (Detail screens name the
+   *record*, which is different: that title is content.)
+3. **No over-data.** Show what the person came for and nothing they did not.
+   A list row carries at most: identity, one status signal, one "where it is",
+   one "who", one date. Everything else is one click away or in a tooltip.
+4. **Tooltips, not descriptions.** Explanatory copy lives in `title=` and in
+   contact cards, never as a sentence under a control. Labels are two or three
+   words. A subtitle under a heading is a smell.
+5. **Status is a shape and a colour.** Never colour alone (CVD, greyscale
+   print). Never a colour outside the six.
+6. **Nothing overflows.** Single-line text truncates with an ellipsis and a
+   tooltip; multi-line clamps to two; long unbroken strings wrap inside their
+   cell; tables have a column plan. Audited at 1440 and 1180 — zero offenders.
+7. **Rows align.** Titles reserve their lines; footers pin to the bottom; grids
+   use `items-start`. A ragged row reads as broken.
+8. **One accent.** The brand colour appears on: the primary button, the active
+   nav item, the active chip's count box, focus rings, links. That is the list.
+9. **Density over air.** 4/8 grid, 56px rows, 48px nav, 40px controls. White
+   space is spent on grouping, not on padding.
+10. **Skeleton, not spinner.** A spinner only inside a control that is working.
+11. **Motion is 150ms and purposeful.** Nothing pulses, nothing bounces,
+    nothing animates at the reader.
+12. **People are hoverable.** Wherever a name or email appears, the contact
+    card is one hover away; pipelines show the email, not the name — it is
+    what people recognise from their mailbox.
+13. **Dialogs fit the viewport.** Chrome fixed, body scrolls, a 4-level form
+    fits a laptop without scrolling.
+14. **Destructive and decision actions are named** ("Reject", "Send back",
+    "Approve"), coloured by status, and on a detail screen gated behind having
+    read the thing being decided.
+15. **Consistency beats local optimisation.** If a screen wants a component
+    the library does not have, the answer is usually an existing one used
+    plainly. Add to the library only when three screens need it.
+
+---
+
+## 6. Fixes shipped, as rules (the audit trail behind the laws)
+
+| Symptom | Rule that came out of it |
+| --- | --- |
+| Cards 3 wide at 1120px | 4 columns from 1100px; 24/48 gaps |
+| Toolbar 9px above the first orb | 24px below toolbar + 28px grid top padding so an overhanging orb has 26px clear |
+| Initials clipped in an avatar stack | 24px avatars, −4px overlap, 2px ring |
+| Users table 480px wider than the screen | ≤6 columns, column plan, secondary facts on a second line, icon actions |
+| "Awaiting approval" pill overflowing its column | Pill label "Pending"; the amber tone carries the meaning |
+| BRD id truncated to "BRD-2026-…" | The column whose distinguishing digits are at the end never truncates |
+| Chip tabs not recognisable as tabs | Segmented control for views; chips only for filters |
+| Greeting removed from the header | Restored: 12 muted + 16/600 name, left of search |
+| Sidebar/header looked like two boxes | One white shell; content panel with a 24px corner |
+| Deep links bounced to /login in dev | Boot must ignore a duplicate-request rejection under StrictMode |
+| Approve link acted on GET | Mutations happen on POST behind a confirm page (scanners prefetch GETs) |
+| Long emails widening tables | `overflow-wrap: anywhere` on every cell |
+| Pipeline editor needed scrolling | One line per level; labels once as column headings |
+| Preview and route stacked | Route vertical in a 300px column; document takes the rest |
+| Document cramped in a card | Click or "Full preview" opens it alone with an Exit control |
+| SSO button with nothing happening on click | Spinner + "Redirecting to Microsoft…", reset on `pageshow` |
+
+---
+
+## 7. Building it in another stack
+
+1. Create the two token sets from §1 as CSS variables on `:root` and
+   `[data-theme='dark']`.
+2. Configure the framework so **only** these scales exist: type 12/14/16/20/24/36,
+   weights 400/500/600/700, radii 8/12/16/full, shadows e1/e2/e3, the six
+   status roles and the surface/ink/line roles. Delete the defaults.
+3. Build the shell (§3) first. Get the "L" right before any page.
+4. Build components in this order: button, card, input, table, chips, tabs,
+   avatar, person card, notice, dialog, skeleton, empty state, stat tile, record
+   card, stepper. Each with its states from §4.
+5. Only then compose screens, checking each against §5 and running an overflow
+   audit at 1440 and 1180.

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "indira-workspace-ui",
+  "version": "0.1.0",
+  "type": "module",
+  "license": "UNLICENSED",
+  "description": "Indira Workspace UI — the component library specified in docs/design-system.md, plus a CLI to install the indira-ui and indira-api Claude Code skills",
+  "keywords": [
+    "react",
+    "component-library",
+    "design-system",
+    "tailwindcss",
+    "claude-code",
+    "claude-skill"
+  ],
+  "files": [
+    "dist-lib",
+    "bin",
+    ".claude/skills/indira-ui",
+    ".claude/skills/indira-api",
+    "docs/design-system.md"
+  ],
+  "main": "./dist-lib/indira-workspace-ui.cjs",
+  "module": "./dist-lib/indira-workspace-ui.mjs",
+  "exports": {
+    ".": {
+      "import": "./dist-lib/indira-workspace-ui.mjs",
+      "require": "./dist-lib/indira-workspace-ui.cjs"
+    },
+    "./style.css": "./dist-lib/style.css"
+  },
+  "bin": {
+    "indira-workspace-ui": "bin/cli.js"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:lib": "vite build --config vite.lib.config.js && node scripts/copy-style.mjs",
+    "prepublishOnly": "npm run build:lib",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "lucide-react": "^1.38.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@tailwindcss/vite": "^4.3.3",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "@vitejs/plugin-react": "^6.1.0",
+    "autoprefixer": "^10.5.4",
+    "eslint": "^10.9.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.4",
+    "globals": "^17.11.0",
+    "postcss": "^8.5.26",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "vite": "^8.2.2"
+  }
+}