@ksp-gonogo/ui-kit 0.1.0

package/dist/test/setup.js

@@ -0,0 +1,12 @@
+import "@testing-library/jest-dom";
+// jsdom omits ResizeObserver, which ScrollArea/Tabs construct at mount to track
+// overflow. A no-op stub keeps those components mountable in tests; the glow
+// indicators it would drive aren't asserted here.
+if (typeof globalThis.ResizeObserver === "undefined") {
+    globalThis.ResizeObserver = class ResizeObserver {
+        observe() { }
+        unobserve() { }
+        disconnect() { }
+    };
+}
+//# sourceMappingURL=setup.js.map

package/dist/test/setup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup.js","sourceRoot":"","sources":["../../src/test/setup.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC;AAEnC,gFAAgF;AAChF,6EAA6E;AAC7E,kDAAkD;AAClD,IAAI,OAAO,UAAU,CAAC,cAAc,KAAK,WAAW,EAAE,CAAC;IACrD,UAAU,CAAC,cAAc,GAAG,MAAM,cAAc;QAC9C,OAAO,KAAI,CAAC;QACZ,SAAS,KAAI,CAAC;QACd,UAAU,KAAI,CAAC;KAChB,CAAC;AACJ,CAAC"}

package/dist/theme.d.ts

@@ -0,0 +1,116 @@
+/**
+ * Typed theme contract.
+ *
+ * Themes name the project's design tokens by role (`text.muted`, not
+ * `gray.500`) so future palette tweaks change the value behind the role
+ * instead of forcing a sweep across every consumer.
+ *
+ * Sizes and spacing are emitted as CSS-variable strings (e.g.
+ * `var(--font-size-base)`) so the responsive overrides in `tokens.css`
+ * (coarse-pointer bumps, `prefers-reduced-motion`, future
+ * `prefers-color-scheme`) keep working when a styled-component switches from a
+ * raw CSS var to `theme.typography...`.
+ */
+export interface ThemeColors {
+    text: {
+        primary: string;
+        muted: string;
+        dim: string;
+        /**
+         * Lowest-contrast foreground tier — placeholder text, disabled labels,
+         * extreme captions. Fails large-text WCAG contrast on dark surfaces;
+         * use sparingly for non-essential content.
+         */
+        faint: string;
+        inverse: string;
+    };
+    surface: {
+        app: string;
+        panel: string;
+        raised: string;
+        sunken: string;
+    };
+    border: {
+        subtle: string;
+        strong: string;
+    };
+    accent: {
+        fg: string;
+        bg: string;
+    };
+    status: {
+        go: {
+            fg: string;
+            bg: string;
+        };
+        nogo: {
+            fg: string;
+            bg: string;
+        };
+        warning: {
+            fg: string;
+            bg: string;
+        };
+        info: {
+            fg: string;
+            bg: string;
+        };
+    };
+    focus: string;
+}
+export interface ThemeTypography {
+    family: {
+        mono: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        base: string;
+        lg: string;
+    };
+    weight: {
+        regular: number;
+        bold: number;
+    };
+    letterSpacing: {
+        /** Subtle negative-to-zero tracking for dense running text. */
+        tight: string;
+        /** Wide tracking for uppercase labels and section headers. */
+        label: string;
+        /** Widest tracking for spaced-out captions and status chips. */
+        wide: string;
+        /** Neutral (no) tracking for body copy. */
+        body: string;
+    };
+}
+export interface ThemeSpace {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+}
+export interface ThemeRadii {
+    /** Tightest corner — buttons and small controls. */
+    xs: string;
+    sm: string;
+    md: string;
+    /** Fully rounded — chips, avatars, toggle knobs. */
+    pill: string;
+}
+export interface ThemeBorders {
+    subtle: string;
+    strong: string;
+}
+export interface UiKitTheme {
+    colors: ThemeColors;
+    typography: ThemeTypography;
+    space: ThemeSpace;
+    radii: ThemeRadii;
+    borders: ThemeBorders;
+}
+declare module "styled-components" {
+    interface DefaultTheme extends UiKitTheme {
+    }
+}
+//# sourceMappingURL=theme.d.ts.map

package/dist/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAQH,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM,CAAC;QAChB,KAAK,EAAE,MAAM,CAAC;QACd,GAAG,EAAE,MAAM,CAAC;QACZ;;;;WAIG;QACH,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,OAAO,EAAE;QACP,GAAG,EAAE,MAAM,CAAC;QACZ,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;QACf,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,MAAM,EAAE;QACN,MAAM,EAAE,MAAM,CAAC;QACf,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,MAAM,EAAE;QACN,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;KACZ,CAAC;IACF,MAAM,EAAE;QACN,EAAE,EAAE;YAAE,EAAE,EAAE,MAAM,CAAC;YAAC,EAAE,EAAE,MAAM,CAAA;SAAE,CAAC;QAC/B,IAAI,EAAE;YAAE,EAAE,EAAE,MAAM,CAAC;YAAC,EAAE,EAAE,MAAM,CAAA;SAAE,CAAC;QACjC,OAAO,EAAE;YAAE,EAAE,EAAE,MAAM,CAAC;YAAC,EAAE,EAAE,MAAM,CAAA;SAAE,CAAC;QACpC,IAAI,EAAE;YAAE,EAAE,EAAE,MAAM,CAAC;YAAC,EAAE,EAAE,MAAM,CAAA;SAAE,CAAC;KAClC,CAAC;IACF,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE;QACN,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;IACF,IAAI,EAAE;QACJ,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,EAAE,MAAM,CAAC;QACb,EAAE,EAAE,MAAM,CAAC;KACZ,CAAC;IACF,MAAM,EAAE;QACN,OAAO,EAAE,MAAM,CAAC;QAChB,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;IACF,aAAa,EAAE;QACb,+DAA+D;QAC/D,KAAK,EAAE,MAAM,CAAC;QACd,8DAA8D;QAC9D,KAAK,EAAE,MAAM,CAAC;QACd,gEAAgE;QAChE,IAAI,EAAE,MAAM,CAAC;QACb,2CAA2C;QAC3C,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;CACH;AAED,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,UAAU;IACzB,oDAAoD;IACpD,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,oDAAoD;IACpD,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,WAAW,CAAC;IACpB,UAAU,EAAE,eAAe,CAAC;IAC5B,KAAK,EAAE,UAAU,CAAC;IAClB,KAAK,EAAE,UAAU,CAAC;IAClB,OAAO,EAAE,YAAY,CAAC;CACvB;AAED,OAAO,QAAQ,mBAAmB,CAAC;IAQjC,UAAiB,YAAa,SAAQ,UAAU;KAAG;CACpD"}

package/dist/theme.js

@@ -0,0 +1,15 @@
+/**
+ * Typed theme contract.
+ *
+ * Themes name the project's design tokens by role (`text.muted`, not
+ * `gray.500`) so future palette tweaks change the value behind the role
+ * instead of forcing a sweep across every consumer.
+ *
+ * Sizes and spacing are emitted as CSS-variable strings (e.g.
+ * `var(--font-size-base)`) so the responsive overrides in `tokens.css`
+ * (coarse-pointer bumps, `prefers-reduced-motion`, future
+ * `prefers-color-scheme`) keep working when a styled-component switches from a
+ * raw CSS var to `theme.typography...`.
+ */
+export {};
+//# sourceMappingURL=theme.js.map

package/dist/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG"}

package/dist/tokens.css

@@ -0,0 +1,133 @@
+:root {
+  --font-family-mono:
+    "JetBrains Mono", ui-monospace, "IBM Plex Mono", Menlo, Consolas, monospace;
+  --font-size-xs: 11px;
+  --font-size-sm: 12px;
+  --font-size-base: 14px;
+  --font-size-lg: 16px;
+
+  /*
+   * Colour tokens — names match `theme.colors.*` paths in
+   * `packages/ui-kit/src/defaultDarkTheme.ts`. The CSS-variable layer is
+   * the single source of truth; the JS theme object is a typed handle
+   * that reads from these vars (e.g. `var(--color-text-primary)`).
+   * A future light-mode or color-blind theme swaps the values here.
+   */
+  --color-text-primary: #ccc;
+  --color-text-muted: #888;
+  --color-text-dim: #808080;
+  --color-text-faint: #7a7a7a;
+  --color-text-inverse: #050505;
+
+  --color-surface-app: #050505;
+  --color-surface-panel: #0d0d0d;
+  --color-surface-raised: #1a1a1a;
+  --color-surface-sunken: #0a0a0a;
+
+  --color-border-subtle: #2a2a2a;
+  --color-border-strong: #333;
+
+  --color-accent-fg: #00ff88;
+  --color-accent-bg: #00ff88;
+
+  --color-status-go-fg: #cfe;
+  --color-status-go-bg: #2e5a2e;
+  --color-status-nogo-fg: #ffdede;
+  --color-status-nogo-bg: #ff4d4d;
+  --color-status-warning-fg: #1a1a1a;
+  --color-status-warning-bg: #ff8c00;
+  --color-status-info-fg: #7cf;
+  --color-status-info-bg: #0d0d0d;
+
+  /*
+   * Muted variants for status surfaces — used when the alert/warning
+   * state needs a *darker* fill (e.g. error-button background, banner
+   * inset). Distinct from the primary status colours, which are full-
+   * brightness. `alert-muted` covers nogo-tone darks; `warning-bg-muted`
+   * covers warning-tone darks (warm browns / olives).
+   */
+  --color-status-alert-muted: #4a0e0e;
+  --color-status-warning-bg-muted: #3a2a0a;
+  /*
+   * Warning text + border for warning chips on a *dark* surface — the
+   * `-fg` and `-bg` pair above is for bright orange chips (dark text on
+   * orange); these are the inverse case (light cream text on dark amber).
+   */
+  --color-status-warning-fg-muted: #ffd68a;
+  --color-status-warning-border-muted: #8a6a28;
+
+  /*
+   * Tag palette — used for *labeled state* with a paired fg / bg /
+   * border surface. Examples: a purple "prediction" chip, a blue
+   * station-link badge. Each tag has a fg / bg / border triple.
+   *
+   * Not for categorical data (chart series, telemetry rows, body
+   * markers) — use the `--color-data-*` palette below for that.
+   *
+   * Not currently typed in the theme schema — promote when a widely-
+   * shared widget begins consuming them programmatically.
+   */
+  --color-tag-blue-fg: #4488ff;
+  --color-tag-blue-bg: #0a0a1a;
+  --color-tag-blue-border: #1a1a3a;
+  --color-tag-purple-fg: #cc44cc;
+  --color-tag-purple-bg: #1a0a1a;
+  --color-tag-purple-border: #6a3a9a;
+  --color-tag-yellow-fg: #ffeb3b;
+  --color-tag-yellow-bg: #3a2800;
+  --color-tag-yellow-border: #6a5a2a;
+  --color-tag-dark-brown-bg: #1a1000;
+  --color-tag-dark-brown-border: #3a2800;
+  --color-tag-cyan-fg: #00cccc;
+  --color-tag-orange-fg: #ff6633;
+  --color-tag-red-fg: #ff4466;
+
+  /*
+   * Categorical data palette — used for chart series, telemetry rows,
+   * body markers, and anything where the role is "make this category
+   * visually distinct from neighbours". Cycle by index (see
+   * packages/components/src/shared/dataPalette.ts).
+   *
+   * Designed for the dark mission-control surface: every value lands at
+   * ~70%+ HSL lightness with high saturation so it reads on
+   * `--color-surface-app` through `--color-surface-raised`. Hues span
+   * ~360° with adjacent pairs visually distinct. None overlap the
+   * semantic palette (accent green, status orange/red/nogo) — a chart
+   * series should never be mistaken for a state indicator.
+   */
+  --color-data-1: #6cb4ff; /* steel blue */
+  --color-data-2: #ff7e7e; /* coral */
+  --color-data-3: #d987ff; /* orchid */
+  --color-data-4: #ffb87a; /* peach */
+  --color-data-5: #4fe6ff; /* cyan */
+  --color-data-6: #ffd866; /* goldenrod */
+  --color-data-7: #ff8eb8; /* rose */
+  --color-data-8: #7d8eff; /* periwinkle */
+  --color-data-9: #88dd55; /* spring */
+  --color-data-10: #44dddd; /* teal */
+  --color-data-11: #c87fff; /* bright purple */
+  --color-data-12: #ff5cad; /* hot pink */
+  --color-data-13: #5fc97a; /* forest */
+  --color-data-14: #e89c5b; /* burnt peach */
+  --color-data-15: #aa9cff; /* lilac */
+  --color-data-16: #c2db4a; /* chartreuse */
+  --color-data-17: #6fc2e5; /* sky */
+  --color-data-18: #db8b6f; /* rust */
+  --color-data-19: #b6f7d6; /* pale mint */
+  --color-data-20: #ffa3d6; /* cotton-candy */
+  --color-data-21: #87a6ff; /* sapphire */
+  --color-data-22: #ffc88e; /* apricot */
+  --color-data-23: #c8a6e3; /* lavender */
+  --color-data-24: #f5e07c; /* canary */
+
+  --color-focus: #00ff88;
+}
+
+@media (pointer: coarse) {
+  :root {
+    --font-size-xs: 12px;
+    --font-size-sm: 13px;
+    --font-size-base: 15px;
+    --font-size-lg: 17px;
+  }
+}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@ksp-gonogo/ui-kit",
+  "description": "Export-safe design system for Gonogo mission-control widgets and third-party Uplinks",
+  "license": "GPL-3.0-only",
+  "version": "0.1.0",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ksp-gonogo/gonogo.git",
+    "directory": "packages/ui-kit"
+  },
+  "homepage": "https://github.com/ksp-gonogo/gonogo/tree/main/packages/ui-kit#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./tokens.css": "./dist/tokens.css",
+    "./theme": {
+      "types": "./dist/theme.d.ts",
+      "import": "./dist/theme.js"
+    }
+  },
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/jest-axe": "^3.5.9",
+    "@types/react": "^18.0.0",
+    "jest-axe": "^10.0.0",
+    "jsdom": "^29.0.2",
+    "typescript": "^5.0.0",
+    "vitest": "^4.1.4",
+    "@ksp-gonogo/sitrep-sdk": "0.0.1"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "styled-components": "^6.0.0"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json && cp src/tokens.css dist/tokens.css",
+    "dev": "tsc -p tsconfig.json --watch",
+    "lint": "tsc --noEmit",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit && tsc -p tsconfig.test-d.json"
+  }
+}