pgserve 2.1.2 → 2.2.0

package/console/colors_and_type.css

@@ -0,0 +1,227 @@
+/* pgserve design system — tokens
+ * :root              → MDR (dark, default)
+ * [data-theme=lumon] → Lumon (light)
+ * Components reference semantic vars (--surface-*, --text-*, --accent).
+ * Never reference --c-* scale tokens directly.
+ */
+
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Inter+Tight:wght@400;500;600&display=swap');
+
+/* ============================================================
+ * MDR — dark, CRT phosphor (default)
+ * ============================================================ */
+:root {
+  /* surface ladder */
+  --c-bg-0: #080B0A;
+  --c-bg-1: #0E1311;
+  --c-bg-2: #161C1A;
+  --c-bg-3: #1F2725;
+  --c-line: #2A3331;
+  --c-line-strong: #3A4542;
+
+  /* text ladder */
+  --c-fg-0: #DCE8E2;
+  --c-fg-1: #99A8A2;
+  --c-fg-2: #5E6E68;
+  --c-fg-3: #3A4542;
+
+  /* accent — CRT phosphor */
+  --c-accent: #7DD3A4;
+  --c-accent-hover: #97DFB6;
+  --c-accent-press: #5FB988;
+
+  /* semantic — matches CLI thresholds */
+  --c-ok: #7DD3A4;
+  --c-warn: #E0B062;
+  --c-error: #E07B7B;
+  --c-info: #6FB8D6;
+
+  /* domain accents */
+  --c-vector: #B69BE0;
+  --c-audit: #D6A574;
+
+  /* semantic aliases */
+  --surface-canvas: var(--c-bg-0);
+  --surface-panel: var(--c-bg-1);
+  --surface-raised: var(--c-bg-2);
+  --surface-hover: var(--c-bg-3);
+  --surface-tint: color-mix(in oklab, var(--c-accent) 10%, transparent);
+
+  --line: var(--c-line);
+  --line-strong: var(--c-line-strong);
+
+  --text-primary: var(--c-fg-0);
+  --text-secondary: var(--c-fg-1);
+  --text-dim: var(--c-fg-2);
+  --text-disabled: var(--c-fg-3);
+
+  --accent: var(--c-accent);
+  --accent-hover: var(--c-accent-hover);
+  --accent-press: var(--c-accent-press);
+  --accent-tint: color-mix(in oklab, var(--c-accent) 14%, transparent);
+  --accent-line: color-mix(in oklab, var(--c-accent) 38%, transparent);
+
+  --status-ok: var(--c-ok);
+  --status-warn: var(--c-warn);
+  --status-error: var(--c-error);
+  --status-info: var(--c-info);
+  --status-vector: var(--c-vector);
+  --status-audit: var(--c-audit);
+
+  --select-bg: color-mix(in oklab, var(--c-accent) 22%, transparent);
+  --scanline-opacity: 0.04;
+
+  /* type families */
+  --font-mono: 'JetBrains Mono', 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;
+  --font-sans: 'Inter Tight', -apple-system, system-ui, sans-serif;
+
+  /* type scale */
+  --t-xs: 11px;          /* eyebrows / labels */
+  --t-sm: 12px;          /* metadata, table headers */
+  --t-md: 13px;          /* body */
+  --t-lg: 15px;          /* emphasised body */
+  --t-xl: 18px;          /* sub-headings */
+  --t-2xl: 22px;         /* section titles */
+  --t-3xl: 28px;         /* page titles */
+  --t-4xl: 40px;         /* hero metrics */
+  --t-5xl: 64px;         /* display */
+
+  /* line-heights */
+  --lh-tight: 1.05;
+  --lh-snug: 1.25;
+  --lh-base: 1.45;
+  --lh-prose: 1.6;
+
+  /* spacing — 4px grid */
+  --space-0: 0;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 24px;
+  --space-6: 32px;
+  --space-7: 48px;
+  --space-8: 64px;
+
+  /* radius — minimal */
+  --radius-0: 0;
+  --radius-1: 2px;
+  --radius-2: 4px;
+
+  /* motion */
+  --ease: cubic-bezier(0.2, 0, 0, 1);
+  --dur-micro: 90ms;
+  --dur-std: 180ms;
+  --dur-panel: 320ms;
+
+  /* sizing */
+  --row-control: 28px;
+  --row-table: 32px;
+  --topbar-h: 44px;
+  --sidebar-w: 240px;
+}
+
+/* ============================================================
+ * Lumon — light, institutional fluorescent
+ * ============================================================ */
+:root[data-theme="lumon"] {
+  --c-bg-0: #F2EEE6;
+  --c-bg-1: #FFFFFF;
+  --c-bg-2: #EBE5D8;
+  --c-bg-3: #DCD4C0;
+  --c-line: #C8BFA8;
+  --c-line-strong: #9B9075;
+
+  --c-fg-0: #0A0E14;
+  --c-fg-1: #3B4250;
+  --c-fg-2: #6B6F78;
+  --c-fg-3: #A0A199;
+
+  --c-accent: #1B5E8C;
+  --c-accent-hover: #2A75A8;
+  --c-accent-press: #154C73;
+
+  --c-ok: #2C7A4D;
+  --c-warn: #B8842C;
+  --c-error: #9B2C2C;
+  --c-info: #1B5E8C;
+
+  --c-vector: #6B4FA0;
+  --c-audit: #8C5A1A;
+
+  --select-bg: color-mix(in oklab, var(--c-accent) 16%, transparent);
+  --scanline-opacity: 0;
+}
+
+/* ============================================================
+ * Base
+ * ============================================================ */
+html, body {
+  background: var(--surface-canvas);
+  color: var(--text-primary);
+  font-family: var(--font-mono);
+  font-size: var(--t-md);
+  line-height: var(--lh-base);
+  font-variant-numeric: tabular-nums slashed-zero;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+::selection { background: var(--select-bg); color: var(--text-primary); }
+
+/* utility classes */
+.mono { font-family: var(--font-mono); }
+.sans { font-family: var(--font-sans); }
+.eyebrow {
+  font-family: var(--font-mono);
+  font-size: var(--t-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-dim);
+}
+.bracket-eyebrow {
+  font-family: var(--font-mono);
+  font-size: var(--t-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--status-info);
+}
+.bracket-eyebrow::before { content: '['; color: var(--status-info); }
+.bracket-eyebrow::after  { content: ']'; color: var(--status-info); }
+
+.dim { color: var(--text-dim); }
+.fg-2 { color: var(--text-secondary); }
+.fg-1 { color: var(--text-primary); }
+
+.cursor-blink::after {
+  content: '▌';
+  display: inline-block;
+  margin-left: 2px;
+  color: var(--accent);
+  animation: pgsv-blink 1s steps(2) infinite;
+}
+@keyframes pgsv-blink { 50% { opacity: 0; } }
+
+/* scanline overlay (MDR only) */
+.scanlines {
+  position: relative;
+  isolation: isolate;
+}
+.scanlines::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background-image: repeating-linear-gradient(
+    to bottom,
+    transparent 0,
+    transparent 2px,
+    rgba(125, 211, 164, 0.5) 2px,
+    rgba(125, 211, 164, 0.5) 3px
+  );
+  opacity: var(--scanline-opacity);
+  mix-blend-mode: screen;
+  z-index: 1;
+}

package/console/components.jsx

@@ -0,0 +1,167 @@
+/* pgserve · atoms */
+const { useState, useEffect, useRef, useMemo } = React;
+
+const cx = (...c) => c.filter(Boolean).join(' ');
+
+function Btn({ kind = 'default', size, children, onClick, title }) {
+  return (
+    <button
+      className={cx('btn', kind !== 'default' && kind, size === 'sm' && 'sm')}
+      onClick={onClick}
+      title={title}
+    >
+      {children}
+    </button>
+  );
+}
+
+function Tag({ kind, children }) {
+  return <span className={cx('tag', kind)}>{children}</span>;
+}
+
+function Dot({ color = 'var(--accent)' }) {
+  return <span style={{ width: 6, height: 6, borderRadius: '50%', background: color, display: 'inline-block' }} />;
+}
+
+function BracketH({ children, hint }) {
+  return (
+    <h3 className="bracket-h">
+      [ {children} ]{hint && <span className="dim">{hint}</span>}
+    </h3>
+  );
+}
+
+function Stat({ label, value, sub, accent = false, status }) {
+  return (
+    <div className="stat">
+      <div className="lbl">{label}</div>
+      <div className="val">
+        {accent ? <span className="accent">{value}</span> : value}
+      </div>
+      {sub && <div className="sub"><span className={status}>{sub}</span></div>}
+    </div>
+  );
+}
+
+/* CLI block-bar meter */
+function MiniBar({ value, max = 100, width = 20, kind = 'ok' }) {
+  const filled = Math.round((value / max) * width);
+  const empty = Math.max(0, width - filled);
+  return (
+    <span className="mbar">
+      <span className={cx('blk', kind !== 'ok' && kind)}>{'█'.repeat(filled)}</span>
+      <span className="empty">{'░'.repeat(empty)}</span>
+    </span>
+  );
+}
+
+function Threshold({ label, value, max = 100, suffix = '%', kind = 'ok' }) {
+  const pct = Math.min(100, (value / max) * 100);
+  return (
+    <div className="threshold">
+      <span className="lbl">{label}</span>
+      <span className="track">
+        <span className={cx('fill', kind !== 'ok' && kind)} style={{ width: `${pct}%` }} />
+      </span>
+      <span className="v">{value}{suffix}</span>
+    </div>
+  );
+}
+
+/* live-tailing log line */
+function LogLine({ ts, lvl = 'info', evt, msg }) {
+  return (
+    <div className="log-line">
+      <span className="ts">{ts}</span>
+      <span className={cx('lvl', lvl)}>{evt}</span>
+      <span className="msg">{msg}</span>
+    </div>
+  );
+}
+
+/* SVG sparkline */
+function Sparkline({ data, w = 120, h = 28, color = 'var(--accent)' }) {
+  const max = Math.max(...data), min = Math.min(...data);
+  const range = max - min || 1;
+  const step = w / (data.length - 1);
+  const pts = data.map((d, i) => `${(i * step).toFixed(1)},${(h - ((d - min) / range) * (h - 4) - 2).toFixed(1)}`).join(' ');
+  const areaPts = `0,${h} ${pts} ${w},${h}`;
+  return (
+    <svg className="spark" width={w} height={h} viewBox={`0 0 ${w} ${h}`}>
+      <polygon points={areaPts} fill={color} opacity="0.12" />
+      <polyline points={pts} fill="none" stroke={color} strokeWidth="1.2" />
+    </svg>
+  );
+}
+
+/* fingerprint hex emphasis */
+function FP({ hex }) {
+  return <span style={{ color: 'var(--accent)' }}>{hex}</span>;
+}
+
+/* segmented control */
+function Seg({ options, value, onChange }) {
+  return (
+    <div className="seg">
+      {options.map(o => (
+        <button key={o.value} className={value === o.value ? 'on' : ''} onClick={() => onChange(o.value)}>
+          {o.label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+/* alert banner */
+function Alert({ kind = 'warn', label, children, actions }) {
+  return (
+    <div className={cx('alert', kind)}>
+      <span className="lbl">{label}</span>
+      <span className="msg">{children}</span>
+      {actions && <span className="actions">{actions}</span>}
+    </div>
+  );
+}
+
+/* score chip 0..100 */
+function Score({ value, max = 100 }) {
+  const kind = value >= 80 ? 'ok' : value >= 60 ? 'warn' : 'err';
+  return (
+    <span className={cx('score', kind)}>
+      <span className="v">{value}</span>
+      <span className="max">/{max}</span>
+    </span>
+  );
+}
+
+/* bracket-eyebrow */
+function Eyebrow({ children, info = true }) {
+  return <span className={info ? 'bracket-eyebrow' : 'eyebrow'}>{children}</span>;
+}
+
+/* placeholder for screens not yet implemented in v1; renders inside the
+ * standard <page> shell so navigation chrome stays consistent and the
+ * sidebar reads "[ coming soon ]" rather than blowing the React tree up. */
+function ComingSoon({ title, crumb }) {
+  return (
+    <div className="page">
+      <div className="page-head">
+        <h1>{title}</h1>
+        {crumb && <span className="crumb">{crumb}</span>}
+      </div>
+      <div className="panel" style={{ padding: 32, textAlign: 'center' }}>
+        <div style={{ fontSize: 14, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-dim)' }}>
+          [ coming soon ]
+        </div>
+        <div style={{ marginTop: 12, fontSize: 12, color: 'var(--text-dim)' }}>
+          this screen scaffolds the autopg-console-settings wish; a future wish ships its content.
+        </div>
+      </div>
+    </div>
+  );
+}
+
+Object.assign(window, {
+  cx, Btn, Tag, Dot, BracketH, Stat, MiniBar, Threshold, LogLine,
+  Sparkline, FP, Seg, Alert, Score, Eyebrow, ComingSoon,
+});