@stephen-netu/design-system 0.1.0 → 0.2.0

package/dist/p0-primitives/tokens/control-room.css

@@ -0,0 +1,309 @@
+/* @kos/design-system — Control Room Theme
+   "Industrial-grade functionalism" aesthetic.
+   Brutalist architecture × Command & Control telemetry.
+   
+   Principles:
+   - Monolithic blocks, no rounded corners
+   - Strict 8px grid alignment
+   - High contrast: phosphor on charcoal
+   - Binary status language (SYSTEM_BUSY, not "Loading...")
+   - Monospace everything, all-caps chrome
+   - No fades — snap/blink transitions only */
+
+:root[data-theme="control-room"] {
+  /* --- Backgrounds — Matte military finishes --- */
+  --color-bg-app: #0a0a0a;           /* Deep matte — main terminal bg */
+  --color-bg-canvas: #111111;        /* Slightly elevated — workspace surface */
+  --color-bg-panel: #141414;         /* Panel containers */
+  --color-bg-panel-elevated: #1a1a1a; /* Elevated dialogs, modals */
+  --color-bg-inset: #080808;         /* Inset wells, input fields */
+  
+  /* Card backgrounds — high contrast for data density */
+  --color-card-bg: #0f0f0f;
+  --color-card-bg-alt: #151515;
+  --color-card-border: #2a2a2a;
+
+  /* --- Text — Phosphor on glass aesthetic --- */
+  --color-text-primary: #e8e8e8;     /* Bright phosphor white */
+  --color-text-secondary: #888888;   /* Dimmed readouts */
+  --color-text-tertiary: #555555;    /* Inactive metadata */
+  --color-text-muted: #333333;     /* Ghost text */
+  --color-text-inverse: #0a0a0a;   /* For light backgrounds */
+  
+  /* Card text (when cards have different bg) */
+  --color-card-text-primary: #e8e8e8;
+  --color-card-text-secondary: #888888;
+  --color-card-text-tertiary: #555555;
+
+  /* --- Accent — Warning/Status only --- */
+  --color-accent: #00ff41;           /* Terminal green — primary action */
+  --color-accent-hover: #33ff66;     /* Brighter on hover */
+  --color-accent-active: #00cc33;      /* Depressed state */
+  --color-accent-glow: rgba(0, 255, 65, 0.3);
+  
+  /* Status colors — binary state language */
+  --color-status-active: #00ff41;    /* SYSTEM_READY */
+  --color-status-busy: #ffd700;      /* SYSTEM_BUSY */
+  --color-status-alert: #ff3131;     /* SYSTEM_FAULT */
+  --color-status-warn: #ff8c00;      /* DEGRADED */
+  --color-status-info: #00bfff;      /* INFO (rare use) */
+  
+  /* --- Semantic (presence) --- */
+  --color-online: #00ff41;
+  --color-offline: #333333;
+  --color-away: #ffd700;
+  --color-busy: #ff3131;
+
+  /* --- Epistemic (ASSAY) — harsh binary states --- */
+  --epistemic-cleared: #00ff41;
+  --epistemic-cleared-glow: rgba(0, 255, 65, 0.2);
+  --epistemic-blocked: #ff3131;
+  --epistemic-blocked-glow: rgba(255, 49, 49, 0.2);
+  --epistemic-pending: #ffd700;
+  --epistemic-pending-glow: rgba(255, 215, 0, 0.2);
+  --epistemic-degraded: #555555;
+  --epistemic-degraded-glow: rgba(85, 85, 85, 0.15);
+
+  /* --- Allay stages — grayscale with terminal highlight --- */
+  --epistemic-stage-0: #1a1a1a;      /* Propose — dark */
+  --epistemic-stage-1: #333333;      /* Parse — dim */
+  --epistemic-stage-2: #666666;      /* Authorize — mid */
+  --epistemic-stage-3: #999999;      /* Execute — bright */
+  --epistemic-stage-4: #00ff41;       /* Trace — active */
+  --epistemic-stage-5: #ffd700;       /* Replicate — complete */
+
+  /* --- Expert identity — monochrome with single accent --- */
+  --expert-atelier: #00ff41;         /* Knowledge — terminal green */
+  --expert-agora: #ffd700;           /* Communication — hazard yellow */
+  --expert-ryu: #ff8c00;             /* Task — amber */
+  --expert-sovereign: #00bfff;       /* Kernel — ice blue */
+  --expert-agent: #888888;           /* Agent — neutral */
+
+  /* --- Borders — Heavy, architectural --- */
+  --border-width-thin: 1px;
+  --border-width-default: 2px;
+  --border-width-thick: 2px;         /* For active states, indicators */
+  --border-width-heavy: 3px;         /* For structural emphasis */
+--border-subtle: #1a1a1a;
+   --border-default: #444c56;
+   --border-heavy: #333333;
+   --border-focus: #00ff41;
+   --border-alert: #ff3131;
+   --border-warning: #ffd700;
+  --divider-color: #1a1a1a;
+
+  /* --- Grid patterns — subtle telemetry lines --- */
+  --grid-line: rgba(0, 255, 65, 0.04);   /* Faint phosphor grid */
+  --grid-dot: rgba(0, 255, 65, 0.08);
+  --grid-major: rgba(0, 255, 65, 0.12);  /* Major divisions */
+
+  /* --- Typography — Monospace only --- */
+  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', 'Fira Code', ui-monospace, monospace;
+  --font-data: 'OCR-A', 'JetBrains Mono', monospace; /* For serial numbers, IDs */
+  --font-sans: var(--font-mono);      /* Override — everything mono */
+  --font-serif: var(--font-mono);     /* Override — everything mono */
+  --font-display: var(--font-mono);  /* Override — everything mono */
+
+  /* Type scale — tight, compact */
+  --text-2xs: 0.5rem;     /* 8px — micro indicators, arrows */
+  --text-xs: 0.625rem;    /* 10px — metadata only */
+  --text-sm: 0.75rem;     /* 12px — timestamps, coordinates */
+  --text-base: 0.875rem;  /* 14px — body/data */
+  --text-lg: 1rem;        /* 16px — section headers */
+  --text-xl: 1.125rem;    /* 18px — panel titles */
+  --text-2xl: 1.25rem;    /* 20px — major headers */
+  --text-3xl: 1.5rem;     /* 24px — system labels */
+
+  /* --- Spacing — Strict 8px grid --- */
+  --space-1: 0.5rem;      /* 8px */
+  --space-2: 1rem;        /* 16px */
+  --space-3: 1.5rem;      /* 24px */
+  --space-4: 2rem;        /* 32px */
+  --space-6: 3rem;        /* 48px */
+  --space-8: 4rem;        /* 64px */
+
+  /* --- Border radius — ZERO --- */
+  --radius-none: 0;
+  --radius-xs: 0;
+  --radius-sm: 0;
+  --radius-md: 0;
+  --radius-lg: 0;
+  --radius-xl: 0;
+  --radius-full: 0;
+  
+  /* Clipped corners (alternative to radius) */
+  --clip-corner-sm: polygon(
+    0 4px, 4px 0,
+    calc(100% - 4px) 0, 100% 4px,
+    100% calc(100% - 4px), calc(100% - 4px) 100%,
+    4px 100%, 0 calc(100% - 4px)
+  );
+  --clip-corner-md: polygon(
+    0 8px, 8px 0,
+    calc(100% - 8px) 0, 100% 8px,
+    100% calc(100% - 8px), calc(100% - 8px) 100%,
+    8px 100%, 0 calc(100% - 8px)
+  );
+
+  /* --- Shadows — None. Use borders for depth. --- */
+  --shadow-none: none;
+  --shadow-sm: none;
+  --shadow-md: none;
+  /* --- Shadow/Glow — Minimal, functional --- */
+  --shadow-active: 0 0 8px var(--color-accent-glow);
+  --shadow-warning: 0 0 8px rgba(255, 215, 0, 0.4);
+  
+  /* --- Overlay colors for scanlines, glass effects --- */
+  --color-overlay-scanline: rgba(0, 0, 0, 0.1);
+  --color-overlay-glass: rgba(10, 10, 10, 0.85);
+
+  /* --- Transitions — Snap/blink only --- */
+  --transition-instant: 0ms;
+  --transition-fast: 50ms step-end;
+  --transition-normal: 100ms step-end;
+  --transition-slow: 150ms step-end;
+  
+  /* --- Animation speeds --- */
+  --animation-speed-flicker: 0.15s;
+  --animation-speed-pulse: 1s;
+  --animation-speed-blink: 0.5s;
+  
+  /* --- Opacity variants for status colors --- */
+  --color-status-active-10: rgba(0, 255, 65, 0.1);
+  --color-status-active-30: rgba(0, 255, 65, 0.3);
+  --color-status-busy-10: rgba(255, 215, 0, 0.1);
+  --color-status-busy-30: rgba(255, 215, 0, 0.3);
+  --color-status-alert-10: rgba(255, 49, 49, 0.1);
+  --color-status-alert-30: rgba(255, 49, 49, 0.3);
+  --color-status-warn-10: rgba(255, 140, 0, 0.1);
+  --color-status-warn-30: rgba(255, 140, 0, 0.3);
+  
+  /* --- Hazard pattern sizing tokens --- */
+  --hazard-stripe-width: 20px;
+  --hazard-stripe-band: 10px;
+  --hazard-alt-stripe-width: 16px;
+  --hazard-alt-stripe-band: 8px;
+  
+  /* --- Component sizing tokens --- */
+  --size-hazard-divider-height: 4px;
+  --size-grid-gap-subtle: 1px;
+  --size-status-bar-height: 2px;
+  --size-border-left-heavy: 3px;
+  --size-network-link-width: 2px;
+  --size-network-link-height: 24px;
+  
+  /* CRT flicker animation - applied via class */
+}
+
+/* Apply flicker to overlay elements */
+[data-theme="control-room"] .crt-flicker::before {
+  animation: flicker var(--animation-speed-flicker) infinite;
+}
+
+/* --- Hazard Pattern Utility ---
+ * Uses theme tokens for full self-containment
+ */
+[data-theme="control-room"] .hazard-stripes {
+  background: repeating-linear-gradient(
+    45deg,
+    var(--color-bg-app),
+    var(--color-bg-app) var(--hazard-stripe-band),
+    var(--color-status-busy) var(--hazard-stripe-band),
+    var(--color-status-busy) var(--hazard-stripe-width)
+  );
+}
+
+[data-theme="control-room"] .hazard-stripes-alt {
+  background: repeating-linear-gradient(
+    -45deg,
+    var(--color-bg-canvas),
+    var(--color-bg-canvas) var(--hazard-alt-stripe-band),
+    var(--color-status-warn) var(--hazard-alt-stripe-band),
+    var(--color-status-warn) var(--hazard-alt-stripe-width)
+  );
+}
+
+/* --- CRT Scanline Overlay --- */
+[data-theme="control-room"] .crt-overlay::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: repeating-linear-gradient(
+    0deg,
+    var(--color-overlay-scanline),
+    var(--color-overlay-scanline) 1px,
+    transparent 1px,
+    transparent 2px
+  );
+  pointer-events: none;
+  z-index: 1000;
+}
+
+/* --- Phosphor Glow Effect --- */
+[data-theme="control-room"] .phosphor-glow {
+  text-shadow: 0 0 4px var(--color-accent-glow);
+}
+
+/* --- All Caps Chrome --- */
+[data-theme="control-room"] .chrome-label,
+[data-theme="control-room"] .panel-header,
+[data-theme="control-room"] .section-title,
+[data-theme="control-room"] button,
+[data-theme="control-room"] .btn {
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-weight: 500;
+}
+
+/* --- Status Badge Patterns --- */
+[data-theme="control-room"] .badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem 0.5rem;
+  border: 1px solid currentColor;
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  text-transform: uppercase;
+}
+
+[data-theme="control-room"] .badge::before {
+  content: '';
+  width: 6px;
+  height: 6px;
+  margin-right: 0.375rem;
+  background: currentColor;
+}
+
+[data-theme="control-room"] .badge--active {
+  color: var(--color-status-active);
+  border-color: var(--color-status-active);
+}
+
+[data-theme="control-room"] .badge--busy {
+  color: var(--color-status-busy);
+  border-color: var(--color-status-busy);
+  animation: pulse var(--animation-speed-pulse) step-end infinite;
+}
+
+[data-theme="control-room"] .badge--alert {
+  color: var(--color-status-alert);
+  border-color: var(--color-status-alert);
+  animation: blink var(--animation-speed-blink) step-end infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+@keyframes blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}
+
+@keyframes flicker {
+  0%, 100% { opacity: 1; }
+  92% { opacity: 1; }
+  93% { opacity: 0.8; }
+  94% { opacity: 1; }
+}

package/dist/p0-primitives/tokens/index.d.ts

@@ -0,0 +1,2 @@
+export { auditContrast, formatAuditReport, parseHex, parseRgb, parseHsl, parseColor, sRGBtoLinear, relativeLuminance, contrastRatio, extractCSSVariables, resolveVarValue } from './contrast-audit';
+//# sourceMappingURL=index.d.ts.map

package/dist/p0-primitives/tokens/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/p0-primitives/tokens/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,YAAY,EAAE,iBAAiB,EAAE,aAAa,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/p0-primitives/tokens/index.js

@@ -0,0 +1,2 @@
+// Design token imports — theme variants
+export { auditContrast, formatAuditReport, parseHex, parseRgb, parseHsl, parseColor, sRGBtoLinear, relativeLuminance, contrastRatio, extractCSSVariables, resolveVarValue } from './contrast-audit';

package/dist/p0-primitives/tokens/tokens.css

@@ -0,0 +1,247 @@
+:root {
+  /* @kos/design-system — Neo-brutalist industrial default theme */
+  /* Deep charcoal surfaces · Brass accents · Monospace data · Zero radius */
+
+  /* --- Backgrounds (charcoal depth) --- */
+  --color-bg-app: #0b0d0f;             /* Deepest — app chrome / substrate */
+  --color-bg-canvas: #121518;          /* Workspace surface */
+  --color-bg-panel: #181c20;           /* Panel containers */
+  --color-bg-panel-elevated: #20252a;  /* Elevated dialogs, modals */
+  --color-bg-inset: #0a0a0a;           /* Inset wells, inputs */
+  --color-bg-root: #0b0d0f;
+
+  /* Card backgrounds (warm charcoal depth) */
+  --color-card-bg: #1a1e22;
+  --color-card-bg-warm: #24292e;
+  --color-card-bg-cool: #15181c;
+  --color-card-border: #2a2f35;
+
+  /* --- Text (warm silkscreen on dark) --- */
+  --color-text-primary: #e8e0d0;       /* Primary — warm white silkscreen */
+  --color-text-secondary: #a8a08c;     /* Secondary — annotations */
+  --color-text-tertiary: #6b6558;      /* Dim — metadata */
+  --color-text-muted: #3a3630;         /* Ghost text */
+  --color-text-inverse: #0b0d0f;       /* For light backgrounds */
+
+  /* Card text */
+  --color-card-text-primary: #e8e0d0;
+  --color-card-text-secondary: #a8a08c;
+  --color-card-text-tertiary: #6b6558;
+
+  /* --- Accent (default: brass, user-controllable via --accent-*) --- */
+  --color-accent: var(--accent-primary, #b87333);
+  --color-accent-hover: var(--accent-hover, #d4892f);
+  --color-accent-active: var(--accent-active, #8a5526);
+   --color-accent-glow: var(--accent-glow, rgba(184, 115, 51, 0.28));
+   --color-accent-muted: var(--accent-muted, rgba(184, 115, 51, 0.16));
+   --color-accent-subtle: var(--accent-subtle, rgba(184, 115, 51, 0.08));
+   --color-accent-faint: var(--accent-faint, rgba(184, 115, 51, 0.04));
+
+   /* Overlay levels — white opacity ramps for borders, backgrounds, hover states */
+   --overlay-white-02: rgba(255, 255, 255, 0.02);
+   --overlay-white-03: rgba(255, 255, 255, 0.03);
+   --overlay-white-04: rgba(255, 255, 255, 0.04);
+   --overlay-white-05: rgba(255, 255, 255, 0.05);
+   --overlay-white-06: rgba(255, 255, 255, 0.06);
+   --overlay-white-08: rgba(255, 255, 255, 0.08);
+   --overlay-white-10: rgba(255, 255, 255, 0.10);
+   --overlay-white-18: rgba(255, 255, 255, 0.18);
+   --overlay-white-22: rgba(255, 255, 255, 0.22);
+   --overlay-white-25: rgba(255, 255, 255, 0.25);
+
+   /* Overlay levels — accent color opacity ramps */
+   --overlay-accent-06: rgba(184, 115, 51, 0.06);
+   --overlay-accent-08: rgba(184, 115, 51, 0.08);
+   --overlay-accent-12: rgba(184, 115, 51, 0.12);
+   --overlay-accent-18: rgba(184, 115, 51, 0.18);
+   --overlay-accent-30: rgba(184, 115, 51, 0.30);
+   --overlay-accent-45: rgba(184, 115, 51, 0.45);
+   --overlay-accent-50: rgba(184, 115, 51, 0.50);
+   --overlay-accent-55: rgba(184, 115, 51, 0.55);
+
+   /* Overlay levels — status color opacity ramps */
+   --overlay-success-06: rgba(79, 168, 162, 0.06);
+   --overlay-error-06: rgba(193, 74, 74, 0.06);
+
+   /* Cell background for band/offer tables */
+   --color-bg-cell: #121518;
+
+  /* --- Telemetry palette --- */
+  --color-cyan: #4fa8a2;               /* Online / OK */
+  --color-cyan-glow: rgba(79, 168, 162, 0.32);
+  --color-amber: #d4a04c;              /* Warning / transition */
+  --color-amber-glow: rgba(212, 160, 76, 0.32);
+  --color-crimson: #c14a4a;            /* Fault / halt */
+  --color-crimson-glow: rgba(193, 74, 74, 0.32);
+
+  /* --- Status --- */
+  --color-success: #4fa8a2;
+  --color-warning: #d4a04c;
+  --color-error: #c14a4a;
+  --color-info: #5b8db8;
+
+  /* --- Semantic (presence) --- */
+  --color-online: #4fa8a2;
+  --color-offline: #3a3630;
+  --color-away: #d4a04c;
+  --color-busy: #c14a4a;
+  --color-typing: #d4a04c;
+
+  /* --- Epistemic (ASSAY clearance states) --- */
+  --epistemic-cleared: #4fa8a2;
+  --epistemic-cleared-glow: rgba(79, 168, 162, 0.2);
+  --epistemic-blocked: #c14a4a;
+  --epistemic-blocked-glow: rgba(193, 74, 74, 0.2);
+  --epistemic-pending: #d4a04c;
+  --epistemic-pending-glow: rgba(212, 160, 76, 0.2);
+  --epistemic-degraded: #3a3630;
+  --epistemic-degraded-glow: rgba(58, 54, 48, 0.15);
+
+  /* --- Allay stages (0=dark → 5=brass) --- */
+  --epistemic-stage-0: #121518;
+  --epistemic-stage-1: #181c20;
+  --epistemic-stage-2: #3a3630;
+  --epistemic-stage-3: #6b6558;
+  --epistemic-stage-4: #4fa8a2;
+  --epistemic-stage-5: #d4a04c;
+  --epistemic-stage-5-glow: rgba(212, 160, 76, 0.25);
+
+  /* --- Expert identity colors --- */
+  --expert-atelier: #5b8db8;
+  --expert-agora: #4fa8a2;
+  --expert-ryu: #d4a04c;
+  --expert-sovereign: #8b7fb0;
+  --expert-agent: #6b6558;
+
+  /* --- Borders --- */
+  --border-subtle: rgba(255, 255, 255, 0.06);
+  --border-default: #3a3630;
+  --border-hover: #6b6558;
+  --border-focus: #b87333;
+  --border-alert: #c14a4a;
+  --border-warning: #d4a04c;
+  --divider-color: #181c20;
+
+  /* Border aliases (for component compatibility) */
+  --color-border: var(--border-default);
+  --color-border-subtle: var(--border-subtle);
+  --color-border-default: var(--border-default);
+
+  /* --- Grid (canvas patterns) --- */
+  --grid-line: rgba(184, 115, 51, 0.03);
+  --grid-dot: rgba(184, 115, 51, 0.06);
+  --grid-major: rgba(184, 115, 51, 0.1);
+
+  /* --- Typography --- */
+  --font-sans: 'Outfit', system-ui, -apple-system, sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
+  --font-serif: 'Crimson Pro', Georgia, serif;
+
+  --text-2xs: 0.5rem;
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --text-2xl: 1.5rem;
+  --text-3xl: 1.875rem;
+  --text-4xl: 2.25rem;
+
+  /* --- Spacing --- */
+  --space-05: 0.125rem;
+  --space-1: 0.25rem;
+  --space-15: 0.375rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-10: 2.5rem;
+  --space-12: 3rem;
+  --space-16: 4rem;
+
+  /* --- Border radius — zero by default (opt-in via --radius-*) --- */
+  --border-width-thin: 1px;
+  --border-width-default: 2px;
+  --border-width-heavy: 3px;
+
+  --size-divider: 6px;
+  --blur-sm: 2px;
+  --blur-md: 4px;
+  --blur-lg: 8px;
+
+  --radius-xs: 0;
+  --radius-sm: 0;
+  --radius-md: 0;
+  --radius-lg: 0;
+  --radius-xl: 0;
+  --radius-full: 9999px;
+
+  /* --- Shadows — minimal, border-based depth preferred --- */
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  --shadow-md: none;
+  --shadow-lg: none;
+  --shadow-xl: none;
+  --shadow-glow: 0 0 12px rgba(184, 115, 51, 0.15);
+  --shadow-glow-lg: 0 0 24px rgba(184, 115, 51, 0.25);
+  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.4);
+  --shadow-card: none;
+  --shadow-card-hover: none;
+  --shadow-accent-glow: 0 0 16px rgba(184, 115, 51, 0.15), 0 0 32px rgba(184, 115, 51, 0.05);
+
+  /* --- Transitions --- */
+  --transition-fast: 120ms ease;
+  --transition-normal: 200ms ease;
+  --transition-slow: 350ms ease;
+  --transition-bounce: 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
+
+  /* --- Semantic Color Roles --- */
+  --color-bg-primary: var(--color-bg-app);
+  --color-bg-secondary: var(--color-bg-canvas);
+  --color-bg-tertiary: var(--color-bg-panel);
+  --color-bg-elevated: var(--color-bg-panel-elevated);
+   --color-bg-hover: rgba(255, 255, 255, 0.06);
+
+   /* --- Surface extensions (cross-app) --- */
+   --color-bg-input: var(--color-bg-inset);
+   --color-bg-muted: #1c2025;
+   --color-bg-surface: #222222;
+
+  --color-fg-primary: var(--color-text-primary);
+  --color-fg-secondary: var(--color-text-secondary);
+  --color-fg-tertiary: var(--color-text-tertiary);
+  --color-fg-muted: var(--color-text-muted);
+  --color-fg-inverse: var(--color-text-inverse);
+
+  /* Feedback semantic mapping */
+  --color-status-success: var(--color-success);
+  --color-status-warning: var(--color-warning);
+  --color-status-error: var(--color-error);
+  --color-status-info: var(--color-info);
+
+  /* --- Animation / Duration --- */
+  --duration-fast: 100ms;
+  --duration-normal: 200ms;
+  --duration-slow: 300ms;
+  --duration-slower: 500ms;
+
+  --ease-linear: linear;
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+
+  /* --- Z-index --- */
+  --z-dropdown: 1000;
+  --z-sticky: 1020;
+  --z-fixed: 1030;
+  --z-modal-backdrop: 1040;
+  --z-modal: 1050;
+  --z-popover: 1060;
+  --z-tooltip: 1070;
+  --z-toast: 1080;
+  --z-glass-box: 9000;
+}

package/dist/p0-primitives/tokens/validity-tokens.css

@@ -0,0 +1,83 @@
+:root {
+  /* --- Validity Score Colors (KVE - Knowledge Validity Engine) ---
+     Used for displaying document validity scores from v0-kve-scanner
+     Score ranges: 0-1000 (permille)
+     - 900-1000: High validity (green)
+     - 700-899: Medium validity (amber)  
+     - 500-699: Low validity (orange)
+     - 0-499: Critical validity (red)
+  */
+  
+  /* High Validity (900-1000) */
+  --validity-high: #27ae60;
+  --validity-high-light: #2ecc71;
+  --validity-high-dark: #229954;
+  --validity-high-glow: rgba(39, 174, 96, 0.25);
+  --validity-high-bg: rgba(39, 174, 96, 0.12);
+  --validity-high-border: rgba(39, 174, 96, 0.3);
+  
+  /* Medium Validity (700-899) */
+  --validity-medium: #f39c12;
+  --validity-medium-light: #f1c40f;
+  --validity-medium-dark: #d68910;
+  --validity-medium-glow: rgba(243, 156, 18, 0.25);
+  --validity-medium-bg: rgba(243, 156, 18, 0.12);
+  --validity-medium-border: rgba(243, 156, 18, 0.3);
+  
+  /* Low Validity (500-699) */
+  --validity-low: #e67e22;
+  --validity-low-light: #eb984e;
+  --validity-low-dark: #ba4a00;
+  --validity-low-glow: rgba(230, 126, 34, 0.25);
+  --validity-low-bg: rgba(230, 126, 34, 0.12);
+  --validity-low-border: rgba(230, 126, 34, 0.3);
+  
+  /* Critical Validity (0-499) */
+  --validity-critical: #c0392b;
+  --validity-critical-light: #e74c3c;
+  --validity-critical-dark: #a93226;
+  --validity-critical-glow: rgba(192, 57, 43, 0.25);
+  --validity-critical-bg: rgba(192, 57, 43, 0.12);
+  --validity-critical-border: rgba(192, 57, 43, 0.3);
+  
+  /* No Score / Unknown */
+  --validity-unknown: #6b7280;
+  --validity-unknown-light: #9ca3af;
+  --validity-unknown-dark: #4b5563;
+  --validity-unknown-bg: rgba(107, 114, 128, 0.12);
+  --validity-unknown-border: rgba(107, 114, 128, 0.3);
+  
+  /* Validity Score Display */
+  --validity-score-font: var(--font-mono);
+  --validity-score-size: var(--text-2xl);
+  --validity-score-weight: 700;
+  
+  /* Validity Progress Bar */
+  --validity-progress-height: 0.5rem;
+  --validity-progress-bg: var(--color-bg-panel);
+  --validity-progress-border-radius: var(--radius-full);
+}
+
+/* Utility classes for validity states */
+.validity-high { color: var(--validity-high); }
+.validity-medium { color: var(--validity-medium); }
+.validity-low { color: var(--validity-low); }
+.validity-critical { color: var(--validity-critical); }
+.validity-unknown { color: var(--validity-unknown); }
+
+.bg-validity-high { background: var(--validity-high-bg); }
+.bg-validity-medium { background: var(--validity-medium-bg); }
+.bg-validity-low { background: var(--validity-low-bg); }
+.bg-validity-critical { background: var(--validity-critical-bg); }
+.bg-validity-unknown { background: var(--validity-unknown-bg); }
+
+.border-validity-high { border-color: var(--validity-high-border); }
+.border-validity-medium { border-color: var(--validity-medium-border); }
+.border-validity-low { border-color: var(--validity-low-border); }
+.border-validity-critical { border-color: var(--validity-critical-border); }
+.border-validity-unknown { border-color: var(--validity-unknown-border); }
+
+.shadow-validity-high { box-shadow: 0 0 12px var(--validity-high-glow); }
+.shadow-validity-medium { box-shadow: 0 0 12px var(--validity-medium-glow); }
+.shadow-validity-low { box-shadow: 0 0 12px var(--validity-low-glow); }
+.shadow-validity-critical { box-shadow: 0 0 12px var(--validity-critical-glow); }

package/dist/p0-primitives/types/geometry.d.ts

@@ -0,0 +1,18 @@
+/** 2D point in pixel coordinates */
+export interface Point {
+    x: number;
+    y: number;
+}
+/** 2D size in pixels */
+export interface Size {
+    width: number;
+    height: number;
+}
+/** Axis-aligned rectangle in pixel coordinates */
+export interface Rect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+//# sourceMappingURL=geometry.d.ts.map

package/dist/p0-primitives/types/geometry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"geometry.d.ts","sourceRoot":"","sources":["../../../src/p0-primitives/types/geometry.ts"],"names":[],"mappings":"AAIA,oCAAoC;AACpC,MAAM,WAAW,KAAK;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,wBAAwB;AACxB,MAAM,WAAW,IAAI;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,kDAAkD;AAClD,MAAM,WAAW,IAAI;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB"}

package/dist/p0-primitives/types/geometry.js

@@ -0,0 +1,4 @@
+// P0 Primitives — Geometry types
+// Foundation types for spatial reasoning across all design system layers.
+// These are the canonical definitions — other layers should import from here.
+export {};