indira-workspace-ui 0.1.0 → 0.3.0

package/.claude/skills/indira-api/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: indira-api
-description: Scaffold and extend Node/Express backend services in the Indira API architecture — routes/controller/service/repository/model layering, validated per-environment config, PM2 process definitions, and Pino structured HTTP logging with an audit trail on every mutation. Ensures every backend app shares the same folder structure and constraints. Use for any new Express service, or any new module (patient, auth, appointment, audit, billing, ...) added to an existing one.
+description: Scaffold and extend Node/Express backend services in the Indira API architecture — routes/controller/service/repository/model layering, validated per-environment config, PM2 process definitions, and Pino structured HTTP logging with an audit trail on every mutation. Includes a ready-made SSO-with-approval-gate auth pattern (env-configured super-admin email allowlist, new users pending until approved). Ensures every backend app shares the same folder structure and constraints. Use for any new Express service, any new module (patient, auth, appointment, audit, billing, ...) added to an existing one, or the backend half of a new full-stack app (pair with /indira-ui for the frontend).
 ---
 
 # indira-api
@@ -10,6 +10,12 @@ The full spec lives at `docs/api-architecture.md` in the target repository —
 read it completely before doing anything else; every path, filename and rule
 you need is in it, and this skill does not repeat them.
 
+**Building a brand-new full-stack app?** Scaffold the backend first —
+`auth` and `audit` before any domain module (§13 of the spec) — then hand
+off to `/indira-ui` for the frontend. That skill designs the screens; it
+doesn't invent the data they show, so the API should exist (even just
+scaffolded and booting) before it starts.
+
 Your job has four parts, in order. Do not skip Part 0 or Part 1.
 
 ## Part 0 — Establish the spec (new repo only)
@@ -39,11 +45,15 @@ Do not scaffold from a one-line request. For a **new service**, confirm:
   specific frontend, another internal service, a cron, a webhook)?
 - **Database** — Postgres, MySQL, MongoDB, something else? Driver or ORM
   preference, or should it match another Indira service for consistency?
-- **First modules** — beyond the mandatory `auth` and `audit` (§12 of the
+- **First modules** — beyond the mandatory `auth` and `audit` (§13 of the
   spec builds these first), which domain modules does the initial version
   need? Get the entity name and its core fields for each.
 - **Auth model** — session, JWT, SSO against an existing identity provider?
-  Anything from an existing Indira service to reuse rather than reinvent?
+  If it's SSO with an approval gate (a new user is `pending` until a super
+  admin approves them; an env-configured email allowlist grants super-admin
+  on first login) that exact pattern is §12 of the reference spec — read it
+  before scaffolding `auth`, don't design it from scratch. Anything from an
+  existing Indira service to reuse rather than reinvent?
 - **Environments** — which of local/uat/production does this need on day
   one, and are there secrets beyond DB + mail that the env schema must
   declare?
@@ -119,7 +129,7 @@ If any answer is no, fix the plan before writing code.
    key the config schema declares has a placeholder.
 8. Write one integration test per new route under `tests/`, and unit tests
    for the service's business rules beside the module.
-9. Verify (§12 of the spec): the server boots, `GET /api/health` returns
+9. Verify (§13 of the spec): the server boots, `GET /api/health` returns
    200, one request produces one structured Pino log line carrying a
    request id, and a deliberately-triggered error returns the `{ error:
    { code, message, requestId } }` shape with that same id.

package/.claude/skills/indira-api/reference/api-architecture.md

@@ -311,10 +311,80 @@ gitignored `.env.*` files and in the box's process environment — never in
    the spec doesn't have, the answer is usually the existing pattern used
    plainly. Extend this document (and every app's copy of it) before
    inventing a one-off.
+9. **The super-admin allowlist lives in env, not the database.**
+   `SUPER_ADMIN_EMAILS` (§12.1) is read at boot and re-checked on every SSO
+   login — never exposed as an editable field, never granted through an API
+   call.
 
 ---
 
-## 12. Building it for a new app
+## 12. SSO authentication with an approval gate
+
+A pattern for services that authenticate against a corporate identity
+provider (reference IdP: Microsoft Entra ID / Azure AD, via OIDC) instead of
+issuing their own passwords, and that gate a brand-new user behind a human
+approval before they can do anything.
+
+### 12.1 Config
+
+`config/index.js`'s schema declares, alongside the existing keys:
+
+```
+SSO_TENANT_ID        required
+SSO_CLIENT_ID        required
+SSO_CLIENT_SECRET    required
+SSO_REDIRECT_URI     required
+SUPER_ADMIN_EMAILS   required, comma-separated, lower-cased and trimmed on read
+```
+
+`SUPER_ADMIN_EMAILS` is the one allowlist that grants the `super_admin`
+role. It is never stored in the database and never editable from the API —
+the only way to change who is a super admin is to change this env var and
+redeploy. That is deliberate: the people who can approve new accounts must
+themselves be provisioned outside the thing they administer.
+
+### 12.2 Flow
+
+1. `GET /api/auth/sso/login` redirects to the IdP's OIDC authorize endpoint
+   (state + PKCE verifier stored server-side, keyed by a short-lived cookie).
+2. `GET /api/auth/sso/callback` exchanges the code, validates the id_token
+   (issuer, audience, signature, nonce), and extracts the verified email.
+3. Look the email up in `users`:
+   - **Not found, and email ∈ `SUPER_ADMIN_EMAILS`** — create the user with
+     `role: "super_admin"`, `status: "active"`, issue the session/JWT +
+     refresh token immediately.
+   - **Not found, and email ∉ `SUPER_ADMIN_EMAILS`** — create the user with
+     `status: "pending"`, `role: "member"`. Do **not** issue a session.
+     Respond `202 { data: { status: "pending" } }` — the client shows a
+     "waiting for approval" screen, not an error.
+   - **Found, `status: "active"`** — issue session/JWT + refresh token as
+     normal. If email ∈ `SUPER_ADMIN_EMAILS` and the stored role isn't
+     `super_admin` yet, elevate it on this login too — the allowlist is
+     always the source of truth for who is a super admin, even for rows
+     created before an email was added to it.
+   - **Found, `status: "pending"`** — respond `202` again, same as a brand
+     new pending user. No session.
+   - **Found, `status: "rejected"`** — `403`. A rejected user is not
+     silently re-queued by logging in again.
+4. A `super_admin` calls `GET /api/users?status=pending` to see the queue,
+   and `POST /api/users/:id/approve` or `POST /api/users/:id/reject` to
+   resolve one. Approve flips `status` to `active` (the user's *next* SSO
+   login then issues a session); reject flips it to `rejected`. Both routes
+   sit behind `auth("user:approve")`, restricted to `super_admin`, and both
+   write to the audit trail (actor, the user approved/rejected, before/after
+   status) — this is a mutation like any other, law 5 applies.
+
+### 12.3 What this buys, and what it deliberately doesn't
+
+This is a gate, not a role system — every approved user is a plain member
+until something else grants them more. Fine-grained permissions beyond
+"super admin vs. everyone else" are a separate module's concern (or a later
+addendum to this one), not something to bolt onto `auth` because it's
+already open.
+
+---
+
+## 13. Building it for a new app
 
 1. Scaffold the tree in §1 exactly. Nothing above `modules/*` beyond what's
    listed.

package/.claude/skills/indira-ui/SKILL.md

@@ -1,16 +1,46 @@
 ---
 name: indira-ui
-description: Design and build screens in the Indira Workspace UI language. Interviews the developer or business team first (who uses it, what they come to do, what must be found in two seconds), turns the answers into a component hierarchy that shows no more data than the task needs, then builds it from the design-system spec. Use for any new page, dashboard, form, list, or internal tool that should look and behave like the BRD Governance Tool.
+description: Design and build screens from this repo's design-system spec(s) — Indira Workspace UI (light, the default) and, where the repo has it, Vault UI (dark, for custody/treasury/compliance-grade data) — asking which composition to use when more than one is available. Interviews the developer or business team first (who uses it, what they come to do, what must be found in two seconds), turns the answers into a component hierarchy that shows no more data than the task needs, then builds it from the chosen spec. Use for any new page, dashboard, form, list, or internal tool; migrating an existing screen's UI to this design language; or the frontend half of a new full-stack app (pair with /indira-api for the backend).
 ---
 
 # indira-ui
 
-You are a senior product designer who builds. You work in the **Indira
-Workspace UI** language, specified in `docs/design-system.md` in this
-repository. Read that file completely before doing anything else; every
-number and rule you need is in it, and this skill does not repeat them.
-
-Your job has three parts, in order, and you do not skip the first one.
+You are a senior product designer who builds. A repo can define more than
+one design composition — which one you build in is decided in Part 0, below.
+Whichever one is chosen, read its spec file completely before doing anything
+else; every number and rule you need is in that one file, and this skill
+does not repeat them.
+
+Your job has four parts, in order, and you do not skip Part 0 or Part 1.
+
+## Part 0 — Pick the design composition
+
+Check the target repo for `docs/design-system*.md`.
+
+- **Exactly one file** — that is the composition. Read it completely and go
+  to Part 1; don't make the developer confirm a choice they don't have.
+- **More than one file** — read enough of each (title + opening paragraph)
+  to describe it in a sentence, then ask the developer which this screen
+  should use before doing anything else. As of this writing, a repo may
+  offer:
+  - **Indira Workspace UI** (`docs/design-system.md`) — light, one rose
+    accent, soft rounded shapes. The default: governance/workflow tools,
+    anything that should look like the BRD Governance Tool.
+  - **Vault UI** (`docs/design-system-vault.md`) — dark by default, one
+    desaturated accent, dense tabular layout. Custody/treasury/compliance-
+    grade screens where the data itself carries the seriousness and a
+    light, friendly surface would undersell that.
+
+  List whatever compositions the repo actually has, not just these two —
+  more may exist by the time you read this. Wait for an explicit answer.
+  If the developer has no preference, recommend Indira Workspace UI and say
+  why (it's this product's established look); switch only on request.
+- **No file** — fresh project. Fall back to building Indira Workspace UI
+  from this skill's own copy of the spec (§7), same as if this part didn't
+  exist.
+
+Never mix components from two compositions on one screen — each spec's own
+closing section says so, and it's as true across systems as within one.
 
 ## Part 1 — Grill before you draw
 
@@ -20,6 +50,29 @@ not one at a time, and stop as soon as the answers are clear — this is a
 discovery, not a form. Use the question tool when one is available; otherwise
 ask in prose and wait.
 
+**Migrating an existing screen, not building a new one?** Same three parts,
+but the brief opens differently — add these before "Who":
+
+- **What's there today** — describe or screenshot the current screen. What
+  do people actually use vs. ignore? (Ask directly — the ignored parts are
+  what you leave out, exactly as with a fresh build.)
+- **What must not change** — which behaviours, data, or integrations are
+  load-bearing and must survive untouched? A migration rebuilds the visual
+  and structural layer; it is not licence to rewrite what the screen does.
+- **What's the current stack** — plain CSS, Bootstrap, MUI, styled-
+  components? None of its styling survives the swap; what you're checking
+  for is which existing data-fetching/behaviour logic can stay as-is
+  underneath the new markup.
+
+Migrate one screen at a time. "Migrate the whole app" is always several
+screens — say so, and ask which one first. An old screen and a newly
+migrated one looking different in the same nav is normal mid-migration, not
+a bug to fix immediately.
+
+**Building a brand-new full-stack app?** If there's no backend yet, run
+`/indira-api` first (it scaffolds `auth` and `audit` before any domain
+module) — this skill designs screens, it doesn't invent the data they show.
+
 **Who**
 - Who opens this screen, by role? How often — several times a day, once a
   week, once a quarter?
@@ -130,20 +183,25 @@ Build from the spec, not from memory of other design systems.
 
 ## What "done" looks like
 
-Give back, in this order: the confirmed brief, the hierarchy tree, the
-screens built, the audit result, and a two-line note of any place the request
-was pushed back on and what was decided. If a requested element was left out
-for a law, name the law — the requester should be able to overrule it
-knowingly, not discover it missing.
+Give back, in this order: which design composition was used (and, if more
+than one was on offer, that the developer chose it), the confirmed brief,
+the hierarchy tree, the screens built, the audit result, and a two-line note
+of any place the request was pushed back on and what was decided. If a
+requested element was left out for a law, name the law — the requester
+should be able to overrule it knowingly, not discover it missing.
 
 ## Things you never do
 
+- Assume the design composition when the repo defines more than one — Part
+  0 is not optional just because you're confident which one fits.
 - Add a page-name heading, a hero, a gradient, an emoji icon, or a second
   filled button.
 - Write a sentence of help text under a control.
 - Show an id, a status word and a status colour for the same record in the
   same place.
-- Invent a colour for a new status. Six statuses; a seventh is a product
-  decision, not a design one.
+- Invent a colour for a new status beyond what the chosen composition's own
+  spec defines — a new one is a product decision, not a per-screen one.
 - Use a spinner for page content, or animate anything on a loop.
 - Design a screen for a user you have not asked about.
+- Reach for a second composition's component inside a screen built in the
+  first one.

package/README.md

@@ -4,6 +4,16 @@ The component library specified in [docs/design-system.md](docs/design-system.md
 React 19 + Tailwind CSS 4 + Lucide. Published to npm as `indira-workspace-ui`, and it doubles
 as an installer for the `indira-ui` and `indira-api` Claude Code skills.
 
+This repo also holds a second, deliberately separate composition — **Vault UI**
+([docs/design-system-vault.md](docs/design-system-vault.md), components in
+[src/vault/](src/vault/)) — dark, one accent, dense tabular layout, for
+custody/treasury/compliance-grade screens where a light, friendly surface
+would undersell the data. See it live at the "Vault UI" nav item in the demo
+workspace. The `/indira-ui` skill now asks which composition to use before
+building a screen whenever a repo has more than one. Vault UI ships from its
+own subpath — `indira-workspace-ui/vault` — so installing the main package
+never pulls its dark theme in by accident.
+
 ## Install in a consuming project
 
 ```
@@ -35,6 +45,24 @@ Add a `@source` pointing at the installed package next to your own `@import "tai
 - One filled button per view, top-right (law 1). Status is always a glyph and a colour (law 5).
 - Theme: `useTheme()` sets `data-theme` on the root; the default follows `prefers-color-scheme`.
 
+### Vault UI
+
+```jsx
+import { VaultShell, VaultButton, VaultTable, VaultStatusPill } from "indira-workspace-ui/vault";
+import "indira-workspace-ui/vault/style.css";
+```
+
+Same `@source` requirement as the main system, pointed at the same `dist-lib`:
+
+```css
+@import "indira-workspace-ui/vault/style.css";
+@source "../node_modules/indira-workspace-ui/dist-lib";
+```
+
+Never import both `style.css` and `vault/style.css` into the same screen's markup — see
+[docs/design-system-vault.md](docs/design-system-vault.md) §6. A page is one composition or the
+other.
+
 ## Scales
 
 The only values that compile: text `xs sm base lg xl 2xl`, weights `normal medium semibold bold`,
@@ -55,6 +83,7 @@ npm run build:lib # builds the publishable package into dist-lib/
 | `src/components/` | One file per component; `index.js` is the barrel and the library's entry point. |
 | `src/screens/` | The demo workspace: Dashboard, BRD list, BRD detail, a library gallery per component group, and the dev-skills docs screen. |
 | `src/data/` | Demo directory and BRD records (demo app only — not part of the published package). |
+| `src/vault/` | Vault UI — the second design composition. Its own tokens/components, scoped under `.vault`, never mixed with `src/components/`. Ships from its own `dist-lib/vault.{mjs,cjs}` + `dist-lib/vault.css`, exported as the package's `./vault` subpath. |
 | `.claude/skills/indira-ui`, `.claude/skills/indira-api` | The two Claude Code skills this package installs into consumer projects. |
 | `bin/cli.js` | The `indira-workspace-ui add-skills` CLI. |
 | `vite.lib.config.js` | Library build config — components only, externalizes `react`/`react-dom`/`lucide-react`. |

package/dist-lib/vault.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("react/jsx-runtime"),t=require("lucide-react");function n({name:t=``,photo:n,size:r=32,className:i=``}){let a=t.trim().split(/\s+/).slice(0,2).map(e=>e[0]).join(``).toUpperCase();return(0,e.jsx)(`span`,{className:`vault-avatar ${i}`,style:{width:r,height:r,fontSize:Math.round(r*.4)},children:n?(0,e.jsx)(`img`,{src:n,alt:``}):a})}function r({brand:r,nav:a=[],activeId:o,onNavigate:s,footNav:c=[],user:l,className:u=``,children:d}){return(0,e.jsxs)(`div`,{className:`vault-shell ${u}`,children:[(0,e.jsxs)(`aside`,{className:`vault-shell__sidebar`,children:[(0,e.jsxs)(`div`,{className:`vault-shell__brand`,children:[(0,e.jsx)(`span`,{className:`vault-shell__brand-mark`,children:r?.mark??`V`}),(0,e.jsx)(`span`,{className:`vault-shell__brand-name`,children:r?.name})]}),(0,e.jsx)(`nav`,{className:`vault-shell__nav`,children:a.map(t=>(0,e.jsx)(i,{item:t,active:t.id===o,onClick:()=>s?.(t.id)},t.id))}),c.length>0&&(0,e.jsxs)(`div`,{className:`vault-shell__foot`,children:[(0,e.jsx)(`div`,{className:`vault-shell__foot-label`,children:`Support`}),c.map(t=>(0,e.jsx)(i,{item:t,active:!1,onClick:()=>s?.(t.id)},t.id))]})]}),(0,e.jsxs)(`div`,{className:`vault-shell__main`,children:[(0,e.jsxs)(`header`,{className:`vault-shell__topbar`,children:[(0,e.jsx)(`button`,{type:`button`,className:`vault-topbar__icon`,title:`Notifications`,children:(0,e.jsx)(t.Bell,{size:17,"aria-hidden":`true`})}),l&&(0,e.jsxs)(`button`,{type:`button`,className:`vault-btn vault-user`,style:{padding:0,background:`none`},title:l.email,children:[(0,e.jsx)(n,{name:l.name,photo:l.photo}),(0,e.jsxs)(`span`,{className:`min-w-0`,style:{textAlign:`left`},children:[(0,e.jsx)(`span`,{className:`vault-user__name block`,children:l.name}),(0,e.jsx)(`span`,{className:`vault-user__role block`,children:l.role})]}),(0,e.jsx)(t.ChevronDown,{size:14,"aria-hidden":`true`,style:{color:`rgb(var(--v-ink-faint))`}})]})]}),(0,e.jsx)(`div`,{className:`vault-shell__content`,children:d})]})]})}function i({item:t,active:n,onClick:r}){let i=t.icon;return(0,e.jsxs)(`button`,{type:`button`,className:`vault-nav-item`,"aria-current":n?`page`:void 0,onClick:r,title:t.label,children:[i&&(0,e.jsx)(i,{size:17,"aria-hidden":`true`}),(0,e.jsx)(`span`,{className:`truncate`,children:t.label})]})}function a({tabs:t=[],value:n,onChange:r,className:i=``}){return(0,e.jsx)(`div`,{className:`vault-tabs ${i}`,role:`tablist`,children:t.map(t=>(0,e.jsx)(`button`,{type:`button`,role:`tab`,className:`vault-tab`,"aria-selected":t.value===n,onClick:()=>r?.(t.value),children:t.label},t.value))})}function o({onBack:n,title:r,tabs:i,value:o,onTabChange:s,figure:c,figureSub:l,pill:u}){return(0,e.jsxs)(e.Fragment,{children:[n&&(0,e.jsxs)(`button`,{type:`button`,className:`vault-back`,onClick:n,children:[(0,e.jsx)(t.ChevronLeft,{size:14,"aria-hidden":`true`}),`Back`]}),(0,e.jsxs)(`div`,{className:`vault-header`,children:[(0,e.jsxs)(`div`,{children:[(0,e.jsx)(`h1`,{className:`vault-header__title`,children:r}),i&&(0,e.jsx)(a,{tabs:i,value:o,onChange:s})]}),(c||u)&&(0,e.jsxs)(`div`,{children:[c&&(0,e.jsx)(`div`,{className:`vault-header__figure`,children:c}),l&&(0,e.jsx)(`div`,{className:`vault-header__sub`,children:l}),u&&(0,e.jsx)(`div`,{className:`vault-header__pill-row`,children:u})]})]})]})}function s({tone:t=`accent`,children:n,className:r=``}){return(0,e.jsx)(`span`,{className:`vault-pill vault-pill--${t} ${r}`,children:n})}function c({figure:t,label:n,tone:r,className:i=``}){let a=r===`accent`?`rgb(var(--v-accent))`:r===`warn`?`rgb(var(--v-warn))`:r===`danger`?`rgb(var(--v-danger))`:void 0;return(0,e.jsxs)(`div`,{className:`vault-stat ${i}`,style:a?{"--tone":a}:void 0,children:[(0,e.jsx)(`span`,{className:`vault-stat__figure`,children:t}),(0,e.jsx)(`span`,{className:`vault-stat__label`,children:n})]})}function l({variant:t=`primary`,icon:n,className:r=``,children:i,...a}){return(0,e.jsxs)(`button`,{type:`button`,className:`vault-btn vault-btn--${t} ${r}`,...a,children:[n&&(0,e.jsx)(n,{size:t===`icon`?18:15,"aria-hidden":`true`}),t!==`icon`&&i]})}function u({checked:n=!1,onChange:r,label:i,className:a=``}){return(0,e.jsxs)(`label`,{className:`vault-check-row ${a}`,style:{cursor:`pointer`},children:[(0,e.jsx)(`button`,{type:`button`,role:`checkbox`,"aria-checked":n,className:`vault-checkbox`,onClick:()=>r?.(!n),children:n&&(0,e.jsx)(t.Check,{size:12,"aria-hidden":`true`})}),i&&(0,e.jsx)(`span`,{className:`vault-check-row__label`,children:i})]})}function d({clearable:n=!1,onClear:r,className:i=``,...a}){return n?(0,e.jsxs)(`span`,{className:`vault-inp-wrap`,children:[(0,e.jsx)(`input`,{className:`vault-inp ${i}`,...a}),(0,e.jsx)(`button`,{type:`button`,onClick:r,title:`Clear`,"aria-label":`Clear`,children:(0,e.jsx)(t.X,{size:14,"aria-hidden":`true`})})]}):(0,e.jsx)(`input`,{className:`vault-inp ${i}`,...a})}function f({className:t=``,children:n,...r}){return(0,e.jsx)(`select`,{className:`vault-select ${t}`,...r,children:n})}function p({columns:t=[],rows:n=[],getRowId:r=(e,t)=>e.id??t,className:i=``}){return(0,e.jsx)(`div`,{className:`vault-table-wrap`,children:(0,e.jsxs)(`table`,{className:`vault-table ${i}`,children:[(0,e.jsx)(`thead`,{children:(0,e.jsx)(`tr`,{children:t.map(t=>(0,e.jsx)(`th`,{style:t.align===`right`?{textAlign:`right`}:void 0,children:t.label},t.key))})}),(0,e.jsx)(`tbody`,{children:n.map((n,i)=>(0,e.jsx)(`tr`,{children:t.map(t=>(0,e.jsx)(`td`,{style:t.align===`right`?{textAlign:`right`}:void 0,children:t.render?t.render(n):n[t.key]},t.key))},r(n,i)))})]})})}exports.VaultAvatar=n,exports.VaultButton=l,exports.VaultCheckbox=u,exports.VaultInput=d,exports.VaultPageHeader=o,exports.VaultSelect=f,exports.VaultShell=r,exports.VaultStatTile=c,exports.VaultStatusPill=s,exports.VaultTable=p,exports.VaultTabs=a;
+//# sourceMappingURL=vault.cjs.map

package/dist-lib/vault.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"vault.cjs","names":[],"sources":["../src/vault/VaultAvatar.jsx","../src/vault/VaultShell.jsx","../src/vault/VaultPageHeader.jsx","../src/vault/VaultStatusPill.jsx","../src/vault/VaultStatTile.jsx","../src/vault/VaultControls.jsx","../src/vault/VaultTable.jsx"],"sourcesContent":["/** Circular avatar restyled for a dark ground — see VaultShell for usage. */\nexport default function VaultAvatar({ name = \"\", photo, size = 32, className = \"\" }) {\n  const initials = name\n    .trim()\n    .split(/\\s+/)\n    .slice(0, 2)\n    .map((p) => p[0])\n    .join(\"\")\n    .toUpperCase();\n  return (\n    <span className={`vault-avatar ${className}`} style={{ width: size, height: size, fontSize: Math.round(size * 0.4) }}>\n      {photo ? <img src={photo} alt=\"\" /> : initials}\n    </span>\n  );\n}\n","import { Bell, ChevronDown } from \"lucide-react\";\nimport VaultAvatar from \"./VaultAvatar\";\n\n/**\n * VaultShell — the sidebar + top bar chrome for Vault UI\n * (docs/design-system-vault.md §3). Dark flows continuously: sidebar,\n * top bar and content are all --v-canvas, no lighter sidebar surface.\n *\n *   <VaultShell nav={NAV} activeId={id} onNavigate={setId} brand={{...}} user={{...}}>\n *     {content}\n *   </VaultShell>\n */\nexport default function VaultShell({ brand, nav = [], activeId, onNavigate, footNav = [], user, className = \"\", children }) {\n  return (\n    <div className={`vault-shell ${className}`}>\n      <aside className=\"vault-shell__sidebar\">\n        <div className=\"vault-shell__brand\">\n          <span className=\"vault-shell__brand-mark\">{brand?.mark ?? \"V\"}</span>\n          <span className=\"vault-shell__brand-name\">{brand?.name}</span>\n        </div>\n        <nav className=\"vault-shell__nav\">\n          {nav.map((item) => (\n            <VaultNavItem key={item.id} item={item} active={item.id === activeId} onClick={() => onNavigate?.(item.id)} />\n          ))}\n        </nav>\n        {footNav.length > 0 && (\n          <div className=\"vault-shell__foot\">\n            <div className=\"vault-shell__foot-label\">Support</div>\n            {footNav.map((item) => (\n              <VaultNavItem key={item.id} item={item} active={false} onClick={() => onNavigate?.(item.id)} />\n            ))}\n          </div>\n        )}\n      </aside>\n      <div className=\"vault-shell__main\">\n        <header className=\"vault-shell__topbar\">\n          <button type=\"button\" className=\"vault-topbar__icon\" title=\"Notifications\">\n            <Bell size={17} aria-hidden=\"true\" />\n          </button>\n          {user && (\n            <button type=\"button\" className=\"vault-btn vault-user\" style={{ padding: 0, background: \"none\" }} title={user.email}>\n              <VaultAvatar name={user.name} photo={user.photo} />\n              <span className=\"min-w-0\" style={{ textAlign: \"left\" }}>\n                <span className=\"vault-user__name block\">{user.name}</span>\n                <span className=\"vault-user__role block\">{user.role}</span>\n              </span>\n              <ChevronDown size={14} aria-hidden=\"true\" style={{ color: \"rgb(var(--v-ink-faint))\" }} />\n            </button>\n          )}\n        </header>\n        <div className=\"vault-shell__content\">{children}</div>\n      </div>\n    </div>\n  );\n}\n\nfunction VaultNavItem({ item, active, onClick }) {\n  const Icon = item.icon;\n  return (\n    <button type=\"button\" className=\"vault-nav-item\" aria-current={active ? \"page\" : undefined} onClick={onClick} title={item.label}>\n      {Icon && <Icon size={17} aria-hidden=\"true\" />}\n      <span className=\"truncate\">{item.label}</span>\n    </button>\n  );\n}\n","import { ChevronLeft } from \"lucide-react\";\n\n/** Underline tabs (§4) — a different composition earns a different tab shape than the main system's segmented track. */\nexport function VaultTabs({ tabs = [], value, onChange, className = \"\" }) {\n  return (\n    <div className={`vault-tabs ${className}`} role=\"tablist\">\n      {tabs.map((t) => (\n        <button\n          key={t.value}\n          type=\"button\"\n          role=\"tab\"\n          className=\"vault-tab\"\n          aria-selected={t.value === value}\n          onClick={() => onChange?.(t.value)}\n        >\n          {t.label}\n        </button>\n      ))}\n    </div>\n  );\n}\n\n/**\n * VaultPageHeader — back control, bold title, underline tabs, and a\n * right-hand slot for the one figure that matters most on this page plus\n * its status pill (docs/design-system-vault.md §3).\n *\n *   <VaultPageHeader onBack={...} title=\"Marketing\" tabs={...} value={tab} onTabChange={setTab}\n *     figure=\"2,345.6789 BTC\" figureSub=\"≈59,339,969.79 CNY\" pill={<VaultStatusPill tone=\"warn\">Effective after 23:59:59</VaultStatusPill>} />\n */\nexport default function VaultPageHeader({ onBack, title, tabs, value, onTabChange, figure, figureSub, pill }) {\n  return (\n    <>\n      {onBack && (\n        <button type=\"button\" className=\"vault-back\" onClick={onBack}>\n          <ChevronLeft size={14} aria-hidden=\"true\" />\n          Back\n        </button>\n      )}\n      <div className=\"vault-header\">\n        <div>\n          <h1 className=\"vault-header__title\">{title}</h1>\n          {tabs && <VaultTabs tabs={tabs} value={value} onChange={onTabChange} />}\n        </div>\n        {(figure || pill) && (\n          <div>\n            {figure && <div className=\"vault-header__figure\">{figure}</div>}\n            {figureSub && <div className=\"vault-header__sub\">{figureSub}</div>}\n            {pill && <div className=\"vault-header__pill-row\">{pill}</div>}\n          </div>\n        )}\n      </div>\n    </>\n  );\n}\n","/**\n * VaultStatusPill — solid fill, one of the three semantic colours\n * (§1, §4). Sparingly: the record's one current state, never decoration.\n *\n *   <VaultStatusPill tone=\"warn\">Effective after 23:59:59</VaultStatusPill>\n */\nexport default function VaultStatusPill({ tone = \"accent\", children, className = \"\" }) {\n  return <span className={`vault-pill vault-pill--${tone} ${className}`}>{children}</span>;\n}\n","/**\n * VaultStatTile — a dense KPI figure. Colour only on the left edge, and\n * only when `tone` is set — most tiles stay neutral ink (§5 law 1: colour\n * reserved for state that actually matters, never decoration).\n *\n *   <VaultStatTile figure={3} label=\"Approved\" tone=\"accent\" />\n */\nexport default function VaultStatTile({ figure, label, tone, className = \"\" }) {\n  const toneVar = tone === \"accent\" ? \"rgb(var(--v-accent))\" : tone === \"warn\" ? \"rgb(var(--v-warn))\" : tone === \"danger\" ? \"rgb(var(--v-danger))\" : undefined;\n  return (\n    <div className={`vault-stat ${className}`} style={toneVar ? { \"--tone\": toneVar } : undefined}>\n      <span className=\"vault-stat__figure\">{figure}</span>\n      <span className=\"vault-stat__label\">{label}</span>\n    </div>\n  );\n}\n","import { Check, X } from \"lucide-react\";\n\n/**\n * Vault UI controls (§4): Button, Checkbox, Input, Select. Dark fields,\n * 8px radius, accent border + ring on focus.\n */\nexport function VaultButton({ variant = \"primary\", icon: Icon, className = \"\", children, ...rest }) {\n  return (\n    <button type=\"button\" className={`vault-btn vault-btn--${variant} ${className}`} {...rest}>\n      {Icon && <Icon size={variant === \"icon\" ? 18 : 15} aria-hidden=\"true\" />}\n      {variant !== \"icon\" && children}\n    </button>\n  );\n}\n\n/** `checked` + `onChange` — a plain toggle, not the main system's native checkbox skin. */\nexport function VaultCheckbox({ checked = false, onChange, label, className = \"\" }) {\n  return (\n    <label className={`vault-check-row ${className}`} style={{ cursor: \"pointer\" }}>\n      <button\n        type=\"button\"\n        role=\"checkbox\"\n        aria-checked={checked}\n        className=\"vault-checkbox\"\n        onClick={() => onChange?.(!checked)}\n      >\n        {checked && <Check size={12} aria-hidden=\"true\" />}\n      </button>\n      {label && <span className=\"vault-check-row__label\">{label}</span>}\n    </label>\n  );\n}\n\nexport function VaultInput({ clearable = false, onClear, className = \"\", ...rest }) {\n  if (!clearable) return <input className={`vault-inp ${className}`} {...rest} />;\n  return (\n    <span className=\"vault-inp-wrap\">\n      <input className={`vault-inp ${className}`} {...rest} />\n      <button type=\"button\" onClick={onClear} title=\"Clear\" aria-label=\"Clear\">\n        <X size={14} aria-hidden=\"true\" />\n      </button>\n    </span>\n  );\n}\n\nexport function VaultSelect({ className = \"\", children, ...rest }) {\n  return (\n    <select className={`vault-select ${className}`} {...rest}>\n      {children}\n    </select>\n  );\n}\n","/**\n * VaultTable (§4) — dense, muted sentence-case headers (not the main\n * system's uppercase-tracked style), hairline row dividers, no zebra.\n *\n * Column: { key, label, render?(row), align? }\n */\nexport default function VaultTable({ columns = [], rows = [], getRowId = (row, i) => row.id ?? i, className = \"\" }) {\n  return (\n    <div className=\"vault-table-wrap\">\n      <table className={`vault-table ${className}`}>\n        <thead>\n          <tr>\n            {columns.map((c) => (\n              <th key={c.key} style={c.align === \"right\" ? { textAlign: \"right\" } : undefined}>\n                {c.label}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {rows.map((row, i) => (\n            <tr key={getRowId(row, i)}>\n              {columns.map((c) => (\n                <td key={c.key} style={c.align === \"right\" ? { textAlign: \"right\" } : undefined}>\n                  {c.render ? c.render(row) : row[c.key]}\n                </td>\n              ))}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist-lib/vault.css

@@ -0,0 +1,159 @@
+/*
+ * Vault UI — a second design composition (docs/design-system-vault.md).
+ * Everything scoped under .vault so it never reaches an Indira Workspace UI
+ * screen sharing the same page, and never needs edits to src/index.css.
+ */
+
+.vault {
+  --v-canvas: 13 16 22;
+  --v-surface: 20 24 32;
+  --v-surface-2: 27 32 42;
+  --v-line: 38 44 56;
+  --v-ink: 237 239 243;
+  --v-ink-muted: 138 145 158;
+  --v-ink-faint: 86 93 108;
+  --v-accent: 52 201 142;
+  --v-accent-on: 8 20 16;
+  --v-warn: 224 138 62;
+  --v-danger: 224 96 122;
+  --v-dur: 150ms;
+
+  background: rgb(var(--v-canvas));
+  color: rgb(var(--v-ink));
+  font-variant-numeric: tabular-nums;
+  border-radius: 20px;
+  overflow: hidden;
+}
+
+/* ---- presentation frame for the catalog screen only: a floating window
+   on a near-black backdrop, echoing how this composition is usually shown ---- */
+.vault-frame-backdrop { background: #05070c; border-radius: 24px; padding: 32px; }
+.vault-frame { max-width: 1040px; margin: 0 auto; box-shadow: 0 30px 60px rgb(0 0 0 / 0.45); }
+
+/* ---- shell: sidebar + top bar ---- */
+.vault-shell { display: flex; min-height: 100%; }
+.vault-shell__sidebar { width: 220px; flex-shrink: 0; display: flex; flex-direction: column; padding: 20px 12px; }
+.vault-shell__brand { display: flex; align-items: center; gap: 10px; padding: 0 8px; margin-bottom: 28px; }
+.vault-shell__brand-mark { width: 28px; height: 28px; border-radius: 8px; background: rgb(var(--v-accent) / 0.16); color: rgb(var(--v-accent)); display: grid; place-items: center; font-weight: 700; font-size: 13px; }
+.vault-shell__brand-name { font-size: 13px; font-weight: 700; letter-spacing: 0.02em; }
+.vault-shell__nav { display: flex; flex-direction: column; gap: 2px; }
+.vault-nav-item {
+  display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border-radius: 8px;
+  font-size: 13px; font-weight: 500; color: rgb(var(--v-ink-muted)); background: transparent; border: 0; text-align: left;
+  transition: background-color var(--v-dur) ease, color var(--v-dur) ease;
+}
+.vault-nav-item:hover { background: rgb(var(--v-surface)); color: rgb(var(--v-ink)); }
+.vault-nav-item[aria-current="page"] { background: rgb(var(--v-surface)); color: rgb(var(--v-ink)); }
+.vault-nav-item[aria-current="page"] svg { color: rgb(var(--v-accent)); }
+.vault-shell__foot { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-top: 12px; }
+.vault-shell__foot-label { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(var(--v-ink-faint)); padding: 0 10px; margin-bottom: 6px; }
+
+.vault-shell__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.vault-shell__topbar { height: 56px; flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; gap: 16px; padding: 0 24px; }
+.vault-topbar__icon { width: 32px; height: 32px; border-radius: 9999px; display: grid; place-items: center; color: rgb(var(--v-ink-muted)); background: transparent; border: 0; }
+.vault-topbar__icon:hover { background: rgb(var(--v-surface)); color: rgb(var(--v-ink)); }
+.vault-user { display: flex; align-items: center; gap: 10px; }
+.vault-user__name { font-size: 13px; font-weight: 600; line-height: 16px; }
+.vault-user__role { font-size: 11px; color: rgb(var(--v-ink-muted)); line-height: 14px; }
+
+.vault-shell__content { flex: 1; min-width: 0; padding: 8px 28px 28px; overflow-y: auto; }
+
+/* ---- avatar ---- */
+.vault-avatar { width: 32px; height: 32px; border-radius: 9999px; display: grid; place-items: center; overflow: hidden; flex-shrink: 0; font-size: 12px; font-weight: 700; color: rgb(var(--v-ink)); background: rgb(var(--v-surface-2)); }
+.vault-avatar > img { width: 100%; height: 100%; object-fit: cover; }
+
+/* ---- page header ---- */
+.vault-back {
+  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; margin-bottom: 20px;
+  border-radius: 9999px; border: 1px solid rgb(var(--v-line)); background: transparent; color: rgb(var(--v-ink-muted));
+  font-size: 12px; font-weight: 500; transition: border-color var(--v-dur) ease, color var(--v-dur) ease;
+}
+.vault-back:hover { color: rgb(var(--v-ink)); border-color: rgb(var(--v-ink-faint)); }
+.vault-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 24px; }
+.vault-header__title { font-size: 20px; font-weight: 700; margin: 0 0 16px; }
+.vault-header__figure { font-size: 20px; font-weight: 700; text-align: right; }
+.vault-header__sub { font-size: 12px; color: rgb(var(--v-warn)); text-align: right; margin-top: 2px; }
+.vault-header__pill-row { display: flex; justify-content: flex-end; margin-top: 8px; }
+
+/* ---- tabs: underline, not the main system's segmented track ---- */
+.vault-tabs { display: flex; align-items: center; gap: 24px; }
+.vault-tab {
+  position: relative; background: none; border: 0; padding: 0 0 12px; font-size: 14px; font-weight: 500;
+  color: rgb(var(--v-ink-muted)); transition: color var(--v-dur) ease;
+}
+.vault-tab:hover { color: rgb(var(--v-ink)); }
+.vault-tab[aria-selected="true"] { color: rgb(var(--v-ink)); font-weight: 700; }
+.vault-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgb(var(--v-accent)); border-radius: 2px; }
+
+/* ---- section ---- */
+.vault-section { margin-bottom: 28px; }
+.vault-section__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
+.vault-section__title { font-size: 15px; font-weight: 700; margin: 0; }
+.vault-section__hint { font-size: 12px; color: rgb(var(--v-ink-muted)); margin: 4px 0 0; }
+.vault-section__hint a { color: rgb(var(--v-accent)); text-decoration: underline; text-underline-offset: 2px; }
+
+/* ---- checkbox row ---- */
+.vault-check-row { display: flex; align-items: center; gap: 10px; }
+.vault-checkbox {
+  width: 18px; height: 18px; border-radius: 5px; border: 1px solid rgb(var(--v-line)); background: rgb(var(--v-surface));
+  display: inline-grid; place-items: center; flex-shrink: 0; padding: 0; color: rgb(var(--v-accent-on));
+  transition: background-color var(--v-dur) ease, border-color var(--v-dur) ease;
+}
+.vault-checkbox[aria-checked="true"] { background: rgb(var(--v-accent)); border-color: rgb(var(--v-accent)); }
+.vault-check-row__label { font-size: 13px; color: rgb(var(--v-ink-muted)); }
+
+/* ---- form grid ---- */
+.vault-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; align-items: end; }
+.vault-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
+.vault-label { font-size: 12px; font-weight: 500; color: rgb(var(--v-ink-muted)); }
+.vault-inp, .vault-select {
+  height: 38px; padding: 0 12px; border-radius: 8px; border: 1px solid rgb(var(--v-line)); background: rgb(var(--v-surface));
+  color: rgb(var(--v-ink)); font-size: 13px; font-family: inherit; outline: none; width: 100%;
+  transition: border-color var(--v-dur) ease, box-shadow var(--v-dur) ease;
+}
+.vault-inp::placeholder { color: rgb(var(--v-ink-faint)); }
+.vault-inp:focus, .vault-select:focus { border-color: rgb(var(--v-accent)); box-shadow: 0 0 0 3px rgb(var(--v-accent) / 0.16); }
+.vault-inp--clear { display: flex; align-items: center; }
+.vault-inp-wrap { position: relative; }
+.vault-inp-wrap > .vault-inp { padding-right: 32px; }
+.vault-inp-wrap > button { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: rgb(var(--v-ink-faint)); background: none; border: 0; display: grid; place-items: center; width: 20px; height: 20px; }
+.vault-inp-wrap > button:hover { color: rgb(var(--v-ink)); }
+
+/* ---- buttons ---- */
+.vault-btn { display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer; font-family: inherit; transition: background-color var(--v-dur) ease, color var(--v-dur) ease, opacity var(--v-dur) ease; }
+.vault-btn--primary { height: 38px; padding: 0 18px; border-radius: 9999px; background: rgb(var(--v-accent)); color: rgb(var(--v-accent-on)); font-size: 13px; font-weight: 700; }
+.vault-btn--primary:hover { background: rgb(var(--v-accent) / 0.88); }
+.vault-btn--icon { width: 38px; height: 38px; border-radius: 9999px; background: rgb(var(--v-accent)); color: rgb(var(--v-accent-on)); justify-content: center; flex-shrink: 0; }
+.vault-btn--icon:hover { background: rgb(var(--v-accent) / 0.88); }
+.vault-btn--text { height: 28px; padding: 0 4px; background: none; color: rgb(var(--v-ink-muted)); font-size: 12px; font-weight: 500; }
+.vault-btn--text:hover { color: rgb(var(--v-ink)); }
+.vault-btn--danger-text { height: 28px; padding: 0; background: none; color: rgb(var(--v-danger)); font-size: 12px; font-weight: 600; }
+.vault-btn--danger-text:hover { opacity: 0.8; }
+
+/* ---- status pill ---- */
+.vault-pill { display: inline-flex; align-items: center; height: 24px; padding: 0 12px; border-radius: 9999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
+.vault-pill--accent { background: rgb(var(--v-accent)); color: rgb(var(--v-accent-on)); }
+.vault-pill--warn { background: rgb(var(--v-warn)); color: rgb(15 12 8); }
+.vault-pill--danger { background: rgb(var(--v-danger) / 0.16); color: rgb(var(--v-danger)); }
+
+/* ---- stat tile: dense KPI, colour only when the state actually matters ---- */
+.vault-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
+@media (min-width: 900px) { .vault-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
+.vault-stat {
+  background: rgb(var(--v-surface)); border-radius: 8px; padding: 14px 16px; text-align: left; border: 0;
+  border-left: 3px solid var(--tone, transparent); cursor: default;
+}
+.vault-stat__figure { display: block; font-size: 22px; font-weight: 700; line-height: 1.2; color: rgb(var(--v-ink)); }
+.vault-stat__label { display: block; margin-top: 4px; font-size: 12px; color: rgb(var(--v-ink-muted)); }
+
+/* ---- table ---- */
+.vault-table-wrap { background: rgb(var(--v-surface)); border-radius: 12px; overflow: hidden; }
+.vault-table { width: 100%; border-collapse: collapse; }
+.vault-table th {
+  text-align: left; font-size: 12px; font-weight: 500; color: rgb(var(--v-ink-muted)); padding: 12px 16px;
+  border-bottom: 1px solid rgb(var(--v-line));
+}
+.vault-table td { padding: 12px 16px; font-size: 13px; color: rgb(var(--v-ink)); border-bottom: 1px solid rgb(var(--v-line)); vertical-align: middle; }
+.vault-table tr:last-child td { border-bottom: 0; }
+.vault-table tbody tr { transition: background-color var(--v-dur) ease; }
+.vault-table tbody tr:hover td { background: rgb(var(--v-surface-2)); }

package/dist-lib/vault.mjs

@@ -0,0 +1,279 @@
+import { Fragment as e, jsx as t, jsxs as n } from "react/jsx-runtime";
+import { Bell as r, Check as i, ChevronDown as a, ChevronLeft as o, X as s } from "lucide-react";
+//#region src/vault/VaultAvatar.jsx
+function c({ name: e = "", photo: n, size: r = 32, className: i = "" }) {
+	let a = e.trim().split(/\s+/).slice(0, 2).map((e) => e[0]).join("").toUpperCase();
+	return /* @__PURE__ */ t("span", {
+		className: `vault-avatar ${i}`,
+		style: {
+			width: r,
+			height: r,
+			fontSize: Math.round(r * .4)
+		},
+		children: n ? /* @__PURE__ */ t("img", {
+			src: n,
+			alt: ""
+		}) : a
+	});
+}
+//#endregion
+//#region src/vault/VaultShell.jsx
+function l({ brand: e, nav: i = [], activeId: o, onNavigate: s, footNav: l = [], user: d, className: f = "", children: p }) {
+	return /* @__PURE__ */ n("div", {
+		className: `vault-shell ${f}`,
+		children: [/* @__PURE__ */ n("aside", {
+			className: "vault-shell__sidebar",
+			children: [
+				/* @__PURE__ */ n("div", {
+					className: "vault-shell__brand",
+					children: [/* @__PURE__ */ t("span", {
+						className: "vault-shell__brand-mark",
+						children: e?.mark ?? "V"
+					}), /* @__PURE__ */ t("span", {
+						className: "vault-shell__brand-name",
+						children: e?.name
+					})]
+				}),
+				/* @__PURE__ */ t("nav", {
+					className: "vault-shell__nav",
+					children: i.map((e) => /* @__PURE__ */ t(u, {
+						item: e,
+						active: e.id === o,
+						onClick: () => s?.(e.id)
+					}, e.id))
+				}),
+				l.length > 0 && /* @__PURE__ */ n("div", {
+					className: "vault-shell__foot",
+					children: [/* @__PURE__ */ t("div", {
+						className: "vault-shell__foot-label",
+						children: "Support"
+					}), l.map((e) => /* @__PURE__ */ t(u, {
+						item: e,
+						active: !1,
+						onClick: () => s?.(e.id)
+					}, e.id))]
+				})
+			]
+		}), /* @__PURE__ */ n("div", {
+			className: "vault-shell__main",
+			children: [/* @__PURE__ */ n("header", {
+				className: "vault-shell__topbar",
+				children: [/* @__PURE__ */ t("button", {
+					type: "button",
+					className: "vault-topbar__icon",
+					title: "Notifications",
+					children: /* @__PURE__ */ t(r, {
+						size: 17,
+						"aria-hidden": "true"
+					})
+				}), d && /* @__PURE__ */ n("button", {
+					type: "button",
+					className: "vault-btn vault-user",
+					style: {
+						padding: 0,
+						background: "none"
+					},
+					title: d.email,
+					children: [
+						/* @__PURE__ */ t(c, {
+							name: d.name,
+							photo: d.photo
+						}),
+						/* @__PURE__ */ n("span", {
+							className: "min-w-0",
+							style: { textAlign: "left" },
+							children: [/* @__PURE__ */ t("span", {
+								className: "vault-user__name block",
+								children: d.name
+							}), /* @__PURE__ */ t("span", {
+								className: "vault-user__role block",
+								children: d.role
+							})]
+						}),
+						/* @__PURE__ */ t(a, {
+							size: 14,
+							"aria-hidden": "true",
+							style: { color: "rgb(var(--v-ink-faint))" }
+						})
+					]
+				})]
+			}), /* @__PURE__ */ t("div", {
+				className: "vault-shell__content",
+				children: p
+			})]
+		})]
+	});
+}
+function u({ item: e, active: r, onClick: i }) {
+	let a = e.icon;
+	return /* @__PURE__ */ n("button", {
+		type: "button",
+		className: "vault-nav-item",
+		"aria-current": r ? "page" : void 0,
+		onClick: i,
+		title: e.label,
+		children: [a && /* @__PURE__ */ t(a, {
+			size: 17,
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ t("span", {
+			className: "truncate",
+			children: e.label
+		})]
+	});
+}
+//#endregion
+//#region src/vault/VaultPageHeader.jsx
+function d({ tabs: e = [], value: n, onChange: r, className: i = "" }) {
+	return /* @__PURE__ */ t("div", {
+		className: `vault-tabs ${i}`,
+		role: "tablist",
+		children: e.map((e) => /* @__PURE__ */ t("button", {
+			type: "button",
+			role: "tab",
+			className: "vault-tab",
+			"aria-selected": e.value === n,
+			onClick: () => r?.(e.value),
+			children: e.label
+		}, e.value))
+	});
+}
+function f({ onBack: r, title: i, tabs: a, value: s, onTabChange: c, figure: l, figureSub: u, pill: f }) {
+	return /* @__PURE__ */ n(e, { children: [r && /* @__PURE__ */ n("button", {
+		type: "button",
+		className: "vault-back",
+		onClick: r,
+		children: [/* @__PURE__ */ t(o, {
+			size: 14,
+			"aria-hidden": "true"
+		}), "Back"]
+	}), /* @__PURE__ */ n("div", {
+		className: "vault-header",
+		children: [/* @__PURE__ */ n("div", { children: [/* @__PURE__ */ t("h1", {
+			className: "vault-header__title",
+			children: i
+		}), a && /* @__PURE__ */ t(d, {
+			tabs: a,
+			value: s,
+			onChange: c
+		})] }), (l || f) && /* @__PURE__ */ n("div", { children: [
+			l && /* @__PURE__ */ t("div", {
+				className: "vault-header__figure",
+				children: l
+			}),
+			u && /* @__PURE__ */ t("div", {
+				className: "vault-header__sub",
+				children: u
+			}),
+			f && /* @__PURE__ */ t("div", {
+				className: "vault-header__pill-row",
+				children: f
+			})
+		] })]
+	})] });
+}
+//#endregion
+//#region src/vault/VaultStatusPill.jsx
+function p({ tone: e = "accent", children: n, className: r = "" }) {
+	return /* @__PURE__ */ t("span", {
+		className: `vault-pill vault-pill--${e} ${r}`,
+		children: n
+	});
+}
+//#endregion
+//#region src/vault/VaultStatTile.jsx
+function m({ figure: e, label: r, tone: i, className: a = "" }) {
+	let o = i === "accent" ? "rgb(var(--v-accent))" : i === "warn" ? "rgb(var(--v-warn))" : i === "danger" ? "rgb(var(--v-danger))" : void 0;
+	return /* @__PURE__ */ n("div", {
+		className: `vault-stat ${a}`,
+		style: o ? { "--tone": o } : void 0,
+		children: [/* @__PURE__ */ t("span", {
+			className: "vault-stat__figure",
+			children: e
+		}), /* @__PURE__ */ t("span", {
+			className: "vault-stat__label",
+			children: r
+		})]
+	});
+}
+//#endregion
+//#region src/vault/VaultControls.jsx
+function h({ variant: e = "primary", icon: r, className: i = "", children: a, ...o }) {
+	return /* @__PURE__ */ n("button", {
+		type: "button",
+		className: `vault-btn vault-btn--${e} ${i}`,
+		...o,
+		children: [r && /* @__PURE__ */ t(r, {
+			size: e === "icon" ? 18 : 15,
+			"aria-hidden": "true"
+		}), e !== "icon" && a]
+	});
+}
+function g({ checked: e = !1, onChange: r, label: a, className: o = "" }) {
+	return /* @__PURE__ */ n("label", {
+		className: `vault-check-row ${o}`,
+		style: { cursor: "pointer" },
+		children: [/* @__PURE__ */ t("button", {
+			type: "button",
+			role: "checkbox",
+			"aria-checked": e,
+			className: "vault-checkbox",
+			onClick: () => r?.(!e),
+			children: e && /* @__PURE__ */ t(i, {
+				size: 12,
+				"aria-hidden": "true"
+			})
+		}), a && /* @__PURE__ */ t("span", {
+			className: "vault-check-row__label",
+			children: a
+		})]
+	});
+}
+function _({ clearable: e = !1, onClear: r, className: i = "", ...a }) {
+	return e ? /* @__PURE__ */ n("span", {
+		className: "vault-inp-wrap",
+		children: [/* @__PURE__ */ t("input", {
+			className: `vault-inp ${i}`,
+			...a
+		}), /* @__PURE__ */ t("button", {
+			type: "button",
+			onClick: r,
+			title: "Clear",
+			"aria-label": "Clear",
+			children: /* @__PURE__ */ t(s, {
+				size: 14,
+				"aria-hidden": "true"
+			})
+		})]
+	}) : /* @__PURE__ */ t("input", {
+		className: `vault-inp ${i}`,
+		...a
+	});
+}
+function v({ className: e = "", children: n, ...r }) {
+	return /* @__PURE__ */ t("select", {
+		className: `vault-select ${e}`,
+		...r,
+		children: n
+	});
+}
+//#endregion
+//#region src/vault/VaultTable.jsx
+function y({ columns: e = [], rows: r = [], getRowId: i = (e, t) => e.id ?? t, className: a = "" }) {
+	return /* @__PURE__ */ t("div", {
+		className: "vault-table-wrap",
+		children: /* @__PURE__ */ n("table", {
+			className: `vault-table ${a}`,
+			children: [/* @__PURE__ */ t("thead", { children: /* @__PURE__ */ t("tr", { children: e.map((e) => /* @__PURE__ */ t("th", {
+				style: e.align === "right" ? { textAlign: "right" } : void 0,
+				children: e.label
+			}, e.key)) }) }), /* @__PURE__ */ t("tbody", { children: r.map((n, r) => /* @__PURE__ */ t("tr", { children: e.map((e) => /* @__PURE__ */ t("td", {
+				style: e.align === "right" ? { textAlign: "right" } : void 0,
+				children: e.render ? e.render(n) : n[e.key]
+			}, e.key)) }, i(n, r))) })]
+		})
+	});
+}
+//#endregion
+export { c as VaultAvatar, h as VaultButton, g as VaultCheckbox, _ as VaultInput, f as VaultPageHeader, v as VaultSelect, l as VaultShell, m as VaultStatTile, p as VaultStatusPill, y as VaultTable, d as VaultTabs };
+
+//# sourceMappingURL=vault.mjs.map

package/dist-lib/vault.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"vault.mjs","names":[],"sources":["../src/vault/VaultAvatar.jsx","../src/vault/VaultShell.jsx","../src/vault/VaultPageHeader.jsx","../src/vault/VaultStatusPill.jsx","../src/vault/VaultStatTile.jsx","../src/vault/VaultControls.jsx","../src/vault/VaultTable.jsx"],"sourcesContent":["/** Circular avatar restyled for a dark ground — see VaultShell for usage. */\nexport default function VaultAvatar({ name = \"\", photo, size = 32, className = \"\" }) {\n  const initials = name\n    .trim()\n    .split(/\\s+/)\n    .slice(0, 2)\n    .map((p) => p[0])\n    .join(\"\")\n    .toUpperCase();\n  return (\n    <span className={`vault-avatar ${className}`} style={{ width: size, height: size, fontSize: Math.round(size * 0.4) }}>\n      {photo ? <img src={photo} alt=\"\" /> : initials}\n    </span>\n  );\n}\n","import { Bell, ChevronDown } from \"lucide-react\";\nimport VaultAvatar from \"./VaultAvatar\";\n\n/**\n * VaultShell — the sidebar + top bar chrome for Vault UI\n * (docs/design-system-vault.md §3). Dark flows continuously: sidebar,\n * top bar and content are all --v-canvas, no lighter sidebar surface.\n *\n *   <VaultShell nav={NAV} activeId={id} onNavigate={setId} brand={{...}} user={{...}}>\n *     {content}\n *   </VaultShell>\n */\nexport default function VaultShell({ brand, nav = [], activeId, onNavigate, footNav = [], user, className = \"\", children }) {\n  return (\n    <div className={`vault-shell ${className}`}>\n      <aside className=\"vault-shell__sidebar\">\n        <div className=\"vault-shell__brand\">\n          <span className=\"vault-shell__brand-mark\">{brand?.mark ?? \"V\"}</span>\n          <span className=\"vault-shell__brand-name\">{brand?.name}</span>\n        </div>\n        <nav className=\"vault-shell__nav\">\n          {nav.map((item) => (\n            <VaultNavItem key={item.id} item={item} active={item.id === activeId} onClick={() => onNavigate?.(item.id)} />\n          ))}\n        </nav>\n        {footNav.length > 0 && (\n          <div className=\"vault-shell__foot\">\n            <div className=\"vault-shell__foot-label\">Support</div>\n            {footNav.map((item) => (\n              <VaultNavItem key={item.id} item={item} active={false} onClick={() => onNavigate?.(item.id)} />\n            ))}\n          </div>\n        )}\n      </aside>\n      <div className=\"vault-shell__main\">\n        <header className=\"vault-shell__topbar\">\n          <button type=\"button\" className=\"vault-topbar__icon\" title=\"Notifications\">\n            <Bell size={17} aria-hidden=\"true\" />\n          </button>\n          {user && (\n            <button type=\"button\" className=\"vault-btn vault-user\" style={{ padding: 0, background: \"none\" }} title={user.email}>\n              <VaultAvatar name={user.name} photo={user.photo} />\n              <span className=\"min-w-0\" style={{ textAlign: \"left\" }}>\n                <span className=\"vault-user__name block\">{user.name}</span>\n                <span className=\"vault-user__role block\">{user.role}</span>\n              </span>\n              <ChevronDown size={14} aria-hidden=\"true\" style={{ color: \"rgb(var(--v-ink-faint))\" }} />\n            </button>\n          )}\n        </header>\n        <div className=\"vault-shell__content\">{children}</div>\n      </div>\n    </div>\n  );\n}\n\nfunction VaultNavItem({ item, active, onClick }) {\n  const Icon = item.icon;\n  return (\n    <button type=\"button\" className=\"vault-nav-item\" aria-current={active ? \"page\" : undefined} onClick={onClick} title={item.label}>\n      {Icon && <Icon size={17} aria-hidden=\"true\" />}\n      <span className=\"truncate\">{item.label}</span>\n    </button>\n  );\n}\n","import { ChevronLeft } from \"lucide-react\";\n\n/** Underline tabs (§4) — a different composition earns a different tab shape than the main system's segmented track. */\nexport function VaultTabs({ tabs = [], value, onChange, className = \"\" }) {\n  return (\n    <div className={`vault-tabs ${className}`} role=\"tablist\">\n      {tabs.map((t) => (\n        <button\n          key={t.value}\n          type=\"button\"\n          role=\"tab\"\n          className=\"vault-tab\"\n          aria-selected={t.value === value}\n          onClick={() => onChange?.(t.value)}\n        >\n          {t.label}\n        </button>\n      ))}\n    </div>\n  );\n}\n\n/**\n * VaultPageHeader — back control, bold title, underline tabs, and a\n * right-hand slot for the one figure that matters most on this page plus\n * its status pill (docs/design-system-vault.md §3).\n *\n *   <VaultPageHeader onBack={...} title=\"Marketing\" tabs={...} value={tab} onTabChange={setTab}\n *     figure=\"2,345.6789 BTC\" figureSub=\"≈59,339,969.79 CNY\" pill={<VaultStatusPill tone=\"warn\">Effective after 23:59:59</VaultStatusPill>} />\n */\nexport default function VaultPageHeader({ onBack, title, tabs, value, onTabChange, figure, figureSub, pill }) {\n  return (\n    <>\n      {onBack && (\n        <button type=\"button\" className=\"vault-back\" onClick={onBack}>\n          <ChevronLeft size={14} aria-hidden=\"true\" />\n          Back\n        </button>\n      )}\n      <div className=\"vault-header\">\n        <div>\n          <h1 className=\"vault-header__title\">{title}</h1>\n          {tabs && <VaultTabs tabs={tabs} value={value} onChange={onTabChange} />}\n        </div>\n        {(figure || pill) && (\n          <div>\n            {figure && <div className=\"vault-header__figure\">{figure}</div>}\n            {figureSub && <div className=\"vault-header__sub\">{figureSub}</div>}\n            {pill && <div className=\"vault-header__pill-row\">{pill}</div>}\n          </div>\n        )}\n      </div>\n    </>\n  );\n}\n","/**\n * VaultStatusPill — solid fill, one of the three semantic colours\n * (§1, §4). Sparingly: the record's one current state, never decoration.\n *\n *   <VaultStatusPill tone=\"warn\">Effective after 23:59:59</VaultStatusPill>\n */\nexport default function VaultStatusPill({ tone = \"accent\", children, className = \"\" }) {\n  return <span className={`vault-pill vault-pill--${tone} ${className}`}>{children}</span>;\n}\n","/**\n * VaultStatTile — a dense KPI figure. Colour only on the left edge, and\n * only when `tone` is set — most tiles stay neutral ink (§5 law 1: colour\n * reserved for state that actually matters, never decoration).\n *\n *   <VaultStatTile figure={3} label=\"Approved\" tone=\"accent\" />\n */\nexport default function VaultStatTile({ figure, label, tone, className = \"\" }) {\n  const toneVar = tone === \"accent\" ? \"rgb(var(--v-accent))\" : tone === \"warn\" ? \"rgb(var(--v-warn))\" : tone === \"danger\" ? \"rgb(var(--v-danger))\" : undefined;\n  return (\n    <div className={`vault-stat ${className}`} style={toneVar ? { \"--tone\": toneVar } : undefined}>\n      <span className=\"vault-stat__figure\">{figure}</span>\n      <span className=\"vault-stat__label\">{label}</span>\n    </div>\n  );\n}\n","import { Check, X } from \"lucide-react\";\n\n/**\n * Vault UI controls (§4): Button, Checkbox, Input, Select. Dark fields,\n * 8px radius, accent border + ring on focus.\n */\nexport function VaultButton({ variant = \"primary\", icon: Icon, className = \"\", children, ...rest }) {\n  return (\n    <button type=\"button\" className={`vault-btn vault-btn--${variant} ${className}`} {...rest}>\n      {Icon && <Icon size={variant === \"icon\" ? 18 : 15} aria-hidden=\"true\" />}\n      {variant !== \"icon\" && children}\n    </button>\n  );\n}\n\n/** `checked` + `onChange` — a plain toggle, not the main system's native checkbox skin. */\nexport function VaultCheckbox({ checked = false, onChange, label, className = \"\" }) {\n  return (\n    <label className={`vault-check-row ${className}`} style={{ cursor: \"pointer\" }}>\n      <button\n        type=\"button\"\n        role=\"checkbox\"\n        aria-checked={checked}\n        className=\"vault-checkbox\"\n        onClick={() => onChange?.(!checked)}\n      >\n        {checked && <Check size={12} aria-hidden=\"true\" />}\n      </button>\n      {label && <span className=\"vault-check-row__label\">{label}</span>}\n    </label>\n  );\n}\n\nexport function VaultInput({ clearable = false, onClear, className = \"\", ...rest }) {\n  if (!clearable) return <input className={`vault-inp ${className}`} {...rest} />;\n  return (\n    <span className=\"vault-inp-wrap\">\n      <input className={`vault-inp ${className}`} {...rest} />\n      <button type=\"button\" onClick={onClear} title=\"Clear\" aria-label=\"Clear\">\n        <X size={14} aria-hidden=\"true\" />\n      </button>\n    </span>\n  );\n}\n\nexport function VaultSelect({ className = \"\", children, ...rest }) {\n  return (\n    <select className={`vault-select ${className}`} {...rest}>\n      {children}\n    </select>\n  );\n}\n","/**\n * VaultTable (§4) — dense, muted sentence-case headers (not the main\n * system's uppercase-tracked style), hairline row dividers, no zebra.\n *\n * Column: { key, label, render?(row), align? }\n */\nexport default function VaultTable({ columns = [], rows = [], getRowId = (row, i) => row.id ?? i, className = \"\" }) {\n  return (\n    <div className=\"vault-table-wrap\">\n      <table className={`vault-table ${className}`}>\n        <thead>\n          <tr>\n            {columns.map((c) => (\n              <th key={c.key} style={c.align === \"right\" ? { textAlign: \"right\" } : undefined}>\n                {c.label}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {rows.map((row, i) => (\n            <tr key={getRowId(row, i)}>\n              {columns.map((c) => (\n                <td key={c.key} style={c.align === \"right\" ? { textAlign: \"right\" } : undefined}>\n                  {c.render ? c.render(row) : row[c.key]}\n                </td>\n              ))}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/docs/design-system-vault.md

@@ -0,0 +1,127 @@
+# Vault UI — a second design composition, for serious data
+
+Indira Workspace UI (`docs/design-system.md`) is the default: light, one rose
+accent, soft rounded shapes. It is right for governance/workflow tools where
+the *product* should feel approachable.
+
+Vault UI is the other option. It exists for screens where the *data itself*
+carries the seriousness — balances, spend limits, custody/treasury,
+compliance ledgers — and a light, friendly surface would undersell that.
+Dark by default (it does not ship a light mode; committing to dark is part
+of the seriousness), one desaturated accent, moderate rounding, dense
+tabular layout. Inspired by custody/treasury dashboards (Fireblocks, BitGo,
+Coinbase Custody-style admin tools) — not a literal clone of any one of
+them.
+
+Same method as the main system: a token set, a fixed set of scales, one
+shell, a small set of components, a short list of laws. Component code
+lives in `src/vault/`, styles in `src/vault/vault.css`, everything scoped
+under one root class (`.vault`) so it never bleeds into an Indira Workspace
+UI screen sharing the same page.
+
+---
+
+## 1. Tokens
+
+RGB triplets, same convention as the main system, so any colour can take an
+opacity modifier.
+
+| Token | Value | Role |
+| --- | --- | --- |
+| `--v-canvas` | `13 16 22` | Page ground. Sidebar, header and content panel are all this — dark flows continuously, no lighter sidebar. |
+| `--v-surface` | `20 24 32` | Raised regions: the table block, inputs, the active-nav pill. |
+| `--v-surface-2` | `27 32 42` | Hover / pressed state on a surface. |
+| `--v-line` | `38 44 56` | Hairlines: table row dividers, input borders at rest. |
+| `--v-ink` | `237 239 243` | Primary text. |
+| `--v-ink-muted` | `138 145 158` | Secondary text, column headers, placeholders. |
+| `--v-ink-faint` | `86 93 108` | Tertiary — disabled, least important. |
+| `--v-accent` | `52 201 142` | The one accent: primary button, focus ring, active tab underline, positive status, checkbox check. |
+| `--v-accent-on` | `8 20 16` | Text/icon on the accent fill. |
+| `--v-warn` | `224 138 62` | Pending / "effective after" / needs-attention status. Used on a pill only, never decoratively. |
+| `--v-danger` | `224 96 122` | Destructive text action (e.g. "Remove"). Text colour only — no filled danger buttons in this set; a destructive action here is a plain link-weight word, confirmed before it fires. |
+
+Exactly three semantic colours (`accent`, `warn`, `danger`) — the same
+discipline as the main system's six statuses, just a smaller palette
+because Vault screens carry fewer distinct states. A fourth is a product
+decision, not a per-screen one.
+
+## 2. Scales
+
+- **Radius**: `8px` controls (inputs, buttons, table block), `9999px` pills
+  and circular icon buttons and avatars. Two values, not four — this system
+  doesn't need the main system's card/nav-item middle step.
+- **Type**: same family as the main system (Inter / system sans). Sizes:
+  `11px` column headers and micro-labels, `13px` body/table cells, `14px`
+  controls, `16px` section titles, `20px` page title, `24px` the balance
+  figure. Numbers are always `tabular-nums`.
+- **Spacing**: 4/8 grid, same as the main system. Sidebar `220px`, header
+  row `64px`, panel padding `24px`, table cell padding `12px 16px`.
+- **Motion**: `150ms` ease, background/border/colour transitions only. No
+  spring, no bounce — same law as the main system.
+
+## 3. Shell
+
+Sidebar (dark, `220px`, icon + label nav, active item gets a `--v-surface`
+pill behind it and an accent-tinted icon) and a slim top bar (icon actions,
+bell, avatar + name + role + chevron, right-aligned) — no search field by
+default; Vault screens are narrower in scope than a full workspace. A page
+inside it gets its own header block: a "Back" control, a bold title, an
+underline tab row for switching views, and — right-aligned — the figure
+that matters most on this page (a balance, a total, a count) plus a status
+pill for the record's current state.
+
+## 4. Components
+
+- **`VaultShell`** — the sidebar + top bar chrome described above.
+- **`VaultPageHeader`** — back control, title, `VaultTabs`, and a right-hand
+  slot for a figure + `VaultStatusPill`.
+- **`VaultTabs`** — underline style: active tab is ink text over a
+  `2px` accent underline; inactive tabs are muted text, no track/pill
+  (this is *not* the main system's segmented-track tabs — a different
+  composition earns a different tab treatment).
+- **Controls** (`VaultButton`, `VaultCheckbox`, `VaultInput`, `VaultSelect`)
+  — dark fields, `8px` radius, accent border + ring on focus. `VaultButton`
+  variants: `primary` (solid accent), `icon` (circular, for the one
+  add/create action per section), `text` (row actions), `danger-text` (the
+  one destructive action, coloured, never filled).
+- **`VaultStatusPill`** — pill, solid fill in one of the three semantic
+  colours, white/on-colour text. Sparingly: the record's one current state,
+  never decoration.
+- **`VaultTable`** — dense, header row in muted sentence-case (not the main
+  system's uppercase-tracked style — Vault's own voice), hairline row
+  dividers, no zebra striping, a `text`/`danger-text` button for row
+  actions.
+- **`VaultAvatar`** — circular, photo or initials, same idea as the main
+  system's Avatar, restyled for a dark ground.
+
+## 5. Laws
+
+1. **One accent, spent twice at most per view**: the primary button and the
+   one positive/active status. Warn and danger are for state, never chrome.
+2. **Dark, not dimmed** — this is not the main system's palette with the
+   lights off; every token above is authored for a dark ground, so contrast
+   and the accent's saturation are tuned for it directly.
+3. **Density is the point.** A Vault screen assumes the reader wants to
+   scan a lot of figures fast — tabular numbers, tight rows, minimal
+   decoration. If a control isn't load-bearing, it isn't on the screen.
+4. **Read-only is visible.** A view a person can't act on says so (a
+   labelled state, not just the absence of a button) — the main system's
+   law 3 (no over-data) and law 5 (status is a shape and a colour) both
+   still apply here; this system just draws them in a different hand.
+5. **No destructive action fires unconfirmed.** `danger-text` is a trigger,
+   not the action itself — same rule as the main system's law 14, restated
+   because this system's whole reason to exist is data where that matters.
+
+---
+
+## 6. Building it
+
+1. Tokens + component CSS live in `src/vault/vault.css`, scoped under one
+   `.vault` root class — never edit `src/index.css` or the main system's
+   component classes to make room for this one.
+2. Build `VaultShell` first, then controls, then `VaultTable` and
+   `VaultPageHeader`.
+3. A screen either lives entirely in Indira Workspace UI or entirely in
+   Vault UI — the two are never mixed on one screen (that's exactly the
+   "variety reads as generated" failure the main system's law 1 warns
+   about, just as true across two systems as within one).

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "indira-workspace-ui",
-  "version": "0.1.0",
+  "version": "0.3.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",
+  "description": "Indira Workspace UI — the component library specified in docs/design-system.md, plus Vault UI (docs/design-system-vault.md, a second dark/serious-data composition) and a CLI to install the indira-ui and indira-api Claude Code skills",
   "keywords": [
     "react",
     "component-library",
@@ -17,7 +17,8 @@
     "bin",
     ".claude/skills/indira-ui",
     ".claude/skills/indira-api",
-    "docs/design-system.md"
+    "docs/design-system.md",
+    "docs/design-system-vault.md"
   ],
   "main": "./dist-lib/indira-workspace-ui.cjs",
   "module": "./dist-lib/indira-workspace-ui.mjs",
@@ -26,7 +27,12 @@
       "import": "./dist-lib/indira-workspace-ui.mjs",
       "require": "./dist-lib/indira-workspace-ui.cjs"
     },
-    "./style.css": "./dist-lib/style.css"
+    "./style.css": "./dist-lib/style.css",
+    "./vault": {
+      "import": "./dist-lib/vault.mjs",
+      "require": "./dist-lib/vault.cjs"
+    },
+    "./vault/style.css": "./dist-lib/vault.css"
   },
   "bin": {
     "indira-workspace-ui": "bin/cli.js"