@runwisp/ui 0.10.0 → 0.12.0

package/src/lib/theme-tokens.css

@@ -20,73 +20,76 @@
  */
 
 :root {
-    /* Primary — Wisp Violet */
-    --rw-color-wisp-50: oklch(0.97 0.02 280);
-    --rw-color-wisp-100: oklch(0.94 0.04 280);
-    --rw-color-wisp-200: oklch(0.88 0.08 280);
-    --rw-color-wisp-300: oklch(0.78 0.12 280);
-    --rw-color-wisp-400: oklch(0.68 0.16 275);
-    --rw-color-wisp-500: oklch(0.58 0.18 270);
-    --rw-color-wisp-600: oklch(0.5 0.18 268);
-    --rw-color-wisp-700: oklch(0.42 0.16 268);
-    --rw-color-wisp-800: oklch(0.35 0.12 268);
-    --rw-color-wisp-900: oklch(0.28 0.08 268);
-    --rw-color-wisp-950: oklch(0.18 0.06 268);
+    /* Primary — Wisp Teal (brand = #0E7C86, the artifact's deep teal). Deeper
+     * and less cyan than Aurora (running/info) so the two stay distinct. */
+    --rw-color-wisp-50: oklch(0.97 0.02 205);
+    --rw-color-wisp-100: oklch(0.95 0.035 205);
+    --rw-color-wisp-200: oklch(0.89 0.055 204);
+    --rw-color-wisp-300: oklch(0.8 0.075 204);
+    --rw-color-wisp-400: oklch(0.68 0.088 203);
+    --rw-color-wisp-500: oklch(0.6 0.09 204);
+    --rw-color-wisp-600: oklch(0.536 0.089 205); /* ≈ #0E7C86 */
+    --rw-color-wisp-700: oklch(0.46 0.08 206);
+    --rw-color-wisp-800: oklch(0.38 0.066 207);
+    --rw-color-wisp-900: oklch(0.3 0.048 208);
+    --rw-color-wisp-950: oklch(0.2 0.034 210);
 
-    /* Accent — Aurora Teal */
-    --rw-color-aurora-50: oklch(0.97 0.02 180);
-    --rw-color-aurora-100: oklch(0.94 0.05 180);
-    --rw-color-aurora-200: oklch(0.88 0.1 178);
-    --rw-color-aurora-300: oklch(0.78 0.14 176);
-    --rw-color-aurora-400: oklch(0.68 0.16 174);
-    --rw-color-aurora-500: oklch(0.58 0.14 172);
-    --rw-color-aurora-600: oklch(0.5 0.12 172);
-    --rw-color-aurora-700: oklch(0.42 0.1 172);
-    --rw-color-aurora-800: oklch(0.35 0.08 172);
-    --rw-color-aurora-900: oklch(0.28 0.06 172);
+    /* Accent — Aurora Teal (running status = #13A0A8, a cyan-leaning teal) */
+    --rw-color-aurora-50: oklch(0.97 0.02 192);
+    --rw-color-aurora-100: oklch(0.94 0.045 192);
+    --rw-color-aurora-200: oklch(0.88 0.075 190);
+    --rw-color-aurora-300: oklch(0.78 0.105 189);
+    --rw-color-aurora-400: oklch(0.68 0.115 190);
+    --rw-color-aurora-500: oklch(0.58 0.115 191);
+    --rw-color-aurora-600: oklch(0.5 0.105 192);
+    --rw-color-aurora-700: oklch(0.42 0.09 192);
+    --rw-color-aurora-800: oklch(0.35 0.07 192);
+    --rw-color-aurora-900: oklch(0.28 0.055 192);
 
-    /* Mist — neutral grays with a purple tint */
-    --rw-color-mist-50: oklch(0.98 0.005 280);
-    --rw-color-mist-100: oklch(0.96 0.008 280);
-    --rw-color-mist-200: oklch(0.92 0.01 280);
-    --rw-color-mist-300: oklch(0.86 0.012 280);
-    --rw-color-mist-400: oklch(0.7 0.012 280);
-    --rw-color-mist-500: oklch(0.55 0.012 280);
-    --rw-color-mist-600: oklch(0.45 0.012 280);
-    --rw-color-mist-700: oklch(0.35 0.012 280);
-    --rw-color-mist-800: oklch(0.25 0.012 280);
-    --rw-color-mist-900: oklch(0.18 0.012 280);
-    --rw-color-mist-950: oklch(0.12 0.012 280);
+    /* Mist — cool slate-blue neutrals (the artifact's #EDF1F4 / #E0E6EC /
+     * #18212E family). No purple tint; hue ~248, low chroma rising into the
+     * mids the way the design's slate does. */
+    --rw-color-mist-50: oklch(0.985 0.004 240);
+    --rw-color-mist-100: oklch(0.956 0.006 240); /* ≈ ground #EDF1F4 */
+    --rw-color-mist-200: oklch(0.922 0.01 248); /* ≈ line #E0E6EC */
+    --rw-color-mist-300: oklch(0.83 0.016 248);
+    --rw-color-mist-400: oklch(0.676 0.026 248); /* ≈ faint #8B99A7 */
+    --rw-color-mist-500: oklch(0.6 0.03 248);
+    --rw-color-mist-600: oklch(0.531 0.032 248); /* ≈ muted #5E6E7E */
+    --rw-color-mist-700: oklch(0.4 0.031 252);
+    --rw-color-mist-800: oklch(0.31 0.029 255);
+    --rw-color-mist-900: oklch(0.245 0.028 258); /* ≈ ink #18212E */
+    --rw-color-mist-950: oklch(0.17 0.022 258);
 
-    /* Success — Aurora Mint */
-    --rw-color-success-50: oklch(0.97 0.018 165);
-    --rw-color-success-100: oklch(0.94 0.035 165);
-    --rw-color-success-200: oklch(0.88 0.06 165);
-    --rw-color-success-300: oklch(0.78 0.09 165);
-    --rw-color-success-400: oklch(0.68 0.11 165);
-    --rw-color-success-500: oklch(0.58 0.115 165);
-    --rw-color-success-600: oklch(0.5 0.105 165);
-    --rw-color-success-700: oklch(0.42 0.095 165);
+    /* Success — Field Green (success status = #1F9D57, a true grass green) */
+    --rw-color-success-50: oklch(0.97 0.02 150);
+    --rw-color-success-100: oklch(0.94 0.04 150);
+    --rw-color-success-200: oklch(0.88 0.07 150);
+    --rw-color-success-300: oklch(0.78 0.11 150);
+    --rw-color-success-400: oklch(0.68 0.14 150);
+    --rw-color-success-500: oklch(0.58 0.145 150);
+    --rw-color-success-600: oklch(0.5 0.13 150);
+    --rw-color-success-700: oklch(0.42 0.11 150);
 
-    /* Danger — Rose Crimson */
-    --rw-color-danger-50: oklch(0.97 0.014 355);
-    --rw-color-danger-100: oklch(0.94 0.028 355);
-    --rw-color-danger-200: oklch(0.88 0.052 355);
-    --rw-color-danger-300: oklch(0.78 0.085 355);
-    --rw-color-danger-400: oklch(0.68 0.115 355);
-    --rw-color-danger-500: oklch(0.58 0.145 355);
-    --rw-color-danger-600: oklch(0.5 0.135 355);
-    --rw-color-danger-700: oklch(0.42 0.12 355);
+    /* Danger — Signal Red (failed status = #D6453D, a warm tomato red) */
+    --rw-color-danger-50: oklch(0.97 0.016 27);
+    --rw-color-danger-100: oklch(0.94 0.03 27);
+    --rw-color-danger-200: oklch(0.88 0.06 27);
+    --rw-color-danger-300: oklch(0.78 0.1 27);
+    --rw-color-danger-400: oklch(0.68 0.14 27);
+    --rw-color-danger-500: oklch(0.58 0.175 27);
+    --rw-color-danger-600: oklch(0.5 0.17 27);
+    --rw-color-danger-700: oklch(0.42 0.145 27);
 
-    /* Warning */
-    --rw-color-warning-50: oklch(0.98 0.03 85);
-    --rw-color-warning-100: oklch(0.95 0.08 85);
-    --rw-color-warning-200: oklch(0.9 0.12 80);
-    --rw-color-warning-300: oklch(0.85 0.16 75);
-    --rw-color-warning-400: oklch(0.8 0.18 70);
-    --rw-color-warning-500: oklch(0.75 0.16 65);
-    --rw-color-warning-600: oklch(0.65 0.14 60);
-    --rw-color-warning-700: oklch(0.55 0.12 55);
+    /* Warning — Ember Amber (stopped status = #D98324, a warm orange-amber) */
+    --rw-color-warning-50: oklch(0.97 0.03 78);
+    --rw-color-warning-100: oklch(0.94 0.07 74);
+    --rw-color-warning-200: oklch(0.9 0.11 72);
+    --rw-color-warning-300: oklch(0.84 0.14 70);
+    --rw-color-warning-400: oklch(0.77 0.155 67);
+    --rw-color-warning-500: oklch(0.69 0.155 64);
+    --rw-color-warning-600: oklch(0.6 0.14 62);
+    --rw-color-warning-700: oklch(0.52 0.12 60);
 
     /* ANSI console palette — 16-color map for the log console, tuned for
      * its always-dark surface (no .dark override needed). Hues follow the
@@ -109,6 +112,15 @@
     --rw-ansi-bright-cyan: var(--rw-color-aurora-300);
     --rw-ansi-bright-white: var(--rw-color-mist-50);
 
+    /* Console device surface — the log console is a "black box" instrument
+     * with its own fixed palette that never follows the light/dark UI theme.
+     * Exact values from the approved execution-detail design. */
+    --rw-con-bg: #0e141b; /* body / gutter backing */
+    --rw-con-panel: #11181f; /* toolbar + footer chrome */
+    --rw-con-text: #c3cfda; /* default log text */
+    --rw-con-dim: #6c7d8c; /* footer + muted readouts */
+    --rw-con-gutter: #3c4a58; /* line numbers + sentinel rule */
+
     /* Light-mode semantic tokens (default) */
     /* Surfaces */
     --rw-surface: var(--rw-color-mist-50);

package/src/lib/theme.css

@@ -1,24 +1,27 @@
 /* Copyright (c) PoppyCake, s.r.o. SPDX-License-Identifier: Apache-2.0 */
 
-@import "tailwindcss";
-@plugin "@tailwindcss/forms";
-@plugin "@tailwindcss/typography";
-
 /* RunWisp Design System — Tailwind v4 entrypoint.
  *
  * Raw OKLch palette + semantic tokens live in ./theme-tokens.css (plain CSS),
  * so apps/docs (Starlight, no Tailwind pipeline) can consume the same source.
  * This file republishes those tokens under Tailwind's --color-* namespace so
  * utilities like `bg-wisp-500`, `text-surface`, etc. generate.
+ *
+ * All @import rules precede the @plugin directives so the stylesheet stays
+ * valid CSS (an @import must come before any other at-rule besides @charset
+ * / @layer); Tailwind's @plugin registrations are order-independent here.
  */
 
+@import "tailwindcss";
 @import "./theme-tokens.css";
-
 @import "@fontsource/tasa-orbiter/400.css";
 @import "@fontsource/tasa-orbiter/500.css";
 @import "@fontsource/tasa-orbiter/600.css";
 @import "@fontsource/tasa-orbiter/700.css";
 
+@plugin "@tailwindcss/forms";
+@plugin "@tailwindcss/typography";
+
 @theme {
     /* Palette aliases — Tailwind utilities (bg-wisp-500, text-mist-900, …)
      * resolve through to --rw-color-* declared in theme-tokens.css. */
@@ -197,6 +200,7 @@
     --color-warning-soft-text: var(--rw-warning-soft-text);
     /* Info */
     --color-info: var(--rw-info);
+    --color-info-surface: var(--rw-info);
     --color-info-hover: var(--rw-info-hover);
     --color-on-info: var(--rw-on-info);
     --color-info-soft: var(--rw-info-soft);

package/src/lib/utils/format.test.ts

@@ -4,11 +4,21 @@
 import { describe, expect, it } from "vitest";
 import {
     formatBytes,
+    formatCalendarDate,
+    formatClockTime,
+    formatDayMonth,
     formatDuration,
     formatRelativeTime,
     formatRelativeTimeWithAbsolute,
+    formatTimeHM,
 } from "./format.js";
 
+// The clock/date helpers below delegate to toLocaleTimeString / toLocaleDateString,
+// whose exact rendering is locale- and timezone-dependent. We assert the
+// locale-invariant *shape* of each format (how many numeric groups, year present
+// or not) rather than a literal string, mirroring formatRelativeTimeWithAbsolute.
+const numericGroups = (s: string): number => (s.match(/\d+/g) ?? []).length;
+
 describe("formatBytes", () => {
     it("formats 0 bytes", () => {
         expect(formatBytes(0)).toBe("0 B");
@@ -122,3 +132,31 @@ describe("formatRelativeTime", () => {
         );
     });
 });
+
+describe("formatClockTime", () => {
+    it("renders three numeric groups (hours, minutes, seconds)", () => {
+        // 24-hour h:m:s — the seconds component is what sets it apart from formatTimeHM.
+        expect(numericGroups(formatClockTime("2026-06-22T17:15:02Z"))).toBe(3);
+    });
+});
+
+describe("formatTimeHM", () => {
+    it("renders two numeric groups (hours, minutes) — no seconds", () => {
+        expect(numericGroups(formatTimeHM("2026-06-22T17:15:02Z"))).toBe(2);
+    });
+});
+
+describe("formatCalendarDate", () => {
+    it("includes the four-digit year", () => {
+        // Midday UTC keeps the calendar year stable across every timezone.
+        expect(formatCalendarDate("2026-06-22T12:00:00Z")).toContain("2026");
+    });
+});
+
+describe("formatDayMonth", () => {
+    it("includes a day digit but omits the year", () => {
+        const r = formatDayMonth("2026-06-22T12:00:00Z");
+        expect(r).toMatch(/\d/);
+        expect(r).not.toContain("2026");
+    });
+});

package/src/lib/utils/format.ts

@@ -53,6 +53,42 @@ export function formatDateTime(dateStr: string): string {
     });
 }
 
+/** Wall-clock time of day, seconds included, 24-hour — e.g. "17:15:02". */
+export function formatClockTime(dateStr: string): string {
+    return new Date(dateStr).toLocaleTimeString(undefined, {
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+        hour12: false,
+    });
+}
+
+/** Calendar date without the time — e.g. "22 Jun 2026". */
+export function formatCalendarDate(dateStr: string): string {
+    return new Date(dateStr).toLocaleDateString(undefined, {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+    });
+}
+
+/** Time of day, no seconds, 24-hour — e.g. "17:15". */
+export function formatTimeHM(dateStr: string): string {
+    return new Date(dateStr).toLocaleTimeString(undefined, {
+        hour: "2-digit",
+        minute: "2-digit",
+        hour12: false,
+    });
+}
+
+/** Day and month, no year — e.g. "22 Jun". */
+export function formatDayMonth(dateStr: string): string {
+    return new Date(dateStr).toLocaleDateString(undefined, {
+        month: "short",
+        day: "numeric",
+    });
+}
+
 export function formatDuration(ms: number): string {
     if (ms < 1000) return String(ms) + "ms";
     const s = Math.floor(ms / 1000);

package/src/lib/utils/ticking-now.svelte.test.ts

@@ -0,0 +1,45 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { TickingNow } from "./ticking-now.svelte.js";
+
+describe("TickingNow", () => {
+    beforeEach(() => {
+        vi.useFakeTimers();
+        vi.setSystemTime(new Date("2024-06-15T12:00:00.000Z"));
+    });
+    afterEach(() => {
+        vi.useRealTimers();
+    });
+
+    it("reports the current time before it starts ticking", () => {
+        const clock = new TickingNow();
+        expect(clock.now.getTime()).toBe(new Date("2024-06-15T12:00:00.000Z").getTime());
+    });
+
+    it("advances on its default 30s interval", () => {
+        const clock = new TickingNow();
+        const stop = clock.start();
+        vi.advanceTimersByTime(30_000);
+        expect(clock.now.getTime()).toBe(new Date("2024-06-15T12:00:30.000Z").getTime());
+        stop();
+    });
+
+    it("advances on a custom interval", () => {
+        const clock = new TickingNow(1000);
+        const stop = clock.start();
+        vi.advanceTimersByTime(3000);
+        expect(clock.now.getTime()).toBe(new Date("2024-06-15T12:00:03.000Z").getTime());
+        stop();
+    });
+
+    it("stops advancing once the cleanup is called", () => {
+        const clock = new TickingNow(1000);
+        const stop = clock.start();
+        vi.advanceTimersByTime(1000);
+        stop();
+        vi.advanceTimersByTime(9000);
+        expect(clock.now.getTime()).toBe(new Date("2024-06-15T12:00:01.000Z").getTime());
+    });
+});

package/src/lib/utils/ticking-now.svelte.ts

@@ -0,0 +1,32 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+import { SvelteDate } from "svelte/reactivity";
+
+const DEFAULT_TICK_INTERVAL_MS = 30_000;
+
+// TickingNow is a reactive clock that advances on a fixed interval, so
+// relative-time labels re-render without waiting for a data event.
+// Call start() inside an $effect and return its cleanup.
+export class TickingNow {
+    #ms = $state(Date.now());
+    readonly #intervalMs: number;
+
+    constructor(intervalMs: number = DEFAULT_TICK_INTERVAL_MS) {
+        this.#intervalMs = intervalMs;
+    }
+
+    start(): () => void {
+        this.#ms = Date.now();
+        const timer = setInterval(() => {
+            this.#ms = Date.now();
+        }, this.#intervalMs);
+        return () => {
+            clearInterval(timer);
+        };
+    }
+
+    get now(): Date {
+        return new SvelteDate(this.#ms);
+    }
+}

package/src/stories/assets/runwisp_c.svg

@@ -1,8 +1,8 @@
 <svg width="512" height="512" version="1.1" viewBox="0 0 5120 5120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
   <linearGradient id="b">
-   <stop stop-color="#526ee3" offset="0"/>
-   <stop stop-color="#009371" offset="1"/>
+   <stop stop-color="#15a0a8" offset="0"/>
+   <stop stop-color="#0e7c86" offset="1"/>
   </linearGradient>
   <radialGradient id="a" cx="2375.3" cy="3240.7" r="1333.9" gradientTransform="matrix(1.01 -.012494 .026846 2.1701 -110.74 -3341.2)" gradientUnits="userSpaceOnUse" xlink:href="#b"/>
  </defs>