@runwisp/ui 1.5.0 → 1.5.1

package/src/lib/theme.css

@@ -1,6 +1,6 @@
 /* Copyright (c) PoppyCake, s.r.o. SPDX-License-Identifier: Apache-2.0 */
 
-/* RunWisp Design System — Tailwind v4 entrypoint.
+/* 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.
@@ -23,7 +23,7 @@
      * side for good; below it the operator can fold the first two away. */
     --breakpoint-3xl: 100rem;
 
-    /* Palette aliases — Tailwind utilities (bg-wisp-500, text-mist-900, …)
+    /* Palette aliases, Tailwind utilities (bg-wisp-500, text-mist-900, …)
      * resolve through to --rw-color-* declared in theme-tokens.css. */
     --color-wisp-50: var(--rw-color-wisp-50);
     --color-wisp-100: var(--rw-color-wisp-100);
@@ -87,7 +87,7 @@
     --color-warning-600: var(--rw-color-warning-600);
     --color-warning-700: var(--rw-color-warning-700);
 
-    /* Typography — stacks and @font-face live in theme-tokens.css so the
+    /* Typography, stacks and @font-face live in theme-tokens.css so the
      * non-Tailwind consumers (apps/docs) share one definition. */
     --font-sans: var(--rw-font-sans);
     --font-mono: var(--rw-font-mono);
@@ -126,18 +126,18 @@
     --spacing-20: 5rem;
     --spacing-24: 6rem;
 
-    /* Border radius — runbook scale (small radii are signature). lg/xl/2xl/3xl
+    /* Border radius, runbook scale (small radii are signature). lg/xl/2xl/3xl
      * remain for legacy call sites but should not be used going forward. */
     --radius-none: 0;
-    --radius-sm: 0.1875rem; /* 3px — controls */
-    --radius-md: 0.25rem; /* 4px — panels / cards */
+    --radius-sm: 0.1875rem; /* 3px, controls */
+    --radius-md: 0.25rem; /* 4px, panels / cards */
     --radius-lg: 0.5rem;
     --radius-xl: 0.75rem;
     --radius-2xl: 1rem;
     --radius-3xl: 1.5rem;
     --radius-full: 9999px;
 
-    /* Shadows — mapped to the flip tokens in theme-tokens.css so every
+    /* Shadows, mapped to the flip tokens in theme-tokens.css so every
      * shadow-* utility resolves to `none` in dark (borders-only look). */
     --shadow-xs: var(--rw-shadow-xs);
     --shadow-sm: var(--rw-shadow-sm);
@@ -146,7 +146,7 @@
     --shadow-xl: var(--rw-shadow-xl);
 }
 
-/* Semantic Design Tokens — Tailwind utility aliases.
+/* Semantic Design Tokens, Tailwind utility aliases.
  * Components use `bg-surface`, `text-primary`, etc.; the values live in
  * theme-tokens.css under the --rw-* namespace and flip on light/dark. */
 
@@ -206,7 +206,7 @@
     --color-warning-soft-border: var(--rw-warning-soft-border);
     --color-info-soft-border: var(--rw-info-soft-border);
 
-    /* Terminal surface — fixed dark in both themes */
+    /* Terminal surface, fixed dark in both themes */
     --color-term: var(--rw-term);
     --color-term-2: var(--rw-term-2);
     --color-term-line: var(--rw-term-line);
@@ -228,8 +228,8 @@
 
     /* Motion. Deliberately minimal: hover, focus and state changes are
      * instant, so there is no scale of durations to pick from. The few things
-     * that still move — a drawer sliding, a toggle knob, an accordion's
-     * height, a progress bar's width — set their own timing inline. */
+     * that still move, a drawer sliding, a toggle knob, an accordion's
+     * height, a progress bar's width, set their own timing inline. */
     --ease-out: cubic-bezier(0, 0, 0.2, 1);
 }
 
@@ -255,7 +255,7 @@ body {
     color: var(--rw-on-surface);
 }
 
-/* Headings are mono chrome — the runbook voice. Unlayered, so it beats the
+/* Headings are mono chrome, the runbook voice. Unlayered, so it beats the
    weight/leading/tracking utilities on a raw <h1>-<h3>: every heading reads the
    same. The Heading component opts out (data-rw-heading) and carries this look
    in its own classes, so its props are the source of truth. :is()/:where()
@@ -295,7 +295,7 @@ body {
     backdrop-filter: var(--rw-glass-blur);
 }
 
-/* Legacy aliases — prefer .rw-bg-glass which adapts to light/dark */
+/* Legacy aliases, prefer .rw-bg-glass which adapts to light/dark */
 .rw-bg-glass-dark {
     background: var(--rw-glass);
     backdrop-filter: var(--rw-glass-blur);

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

@@ -86,7 +86,7 @@ describe("formatRelativeTimeWithAbsolute", () => {
     it("uses time-only format (HH:MM) for dates within the same day", () => {
         const recent = new Date(Date.now() - 30 * 60_000).toISOString();
         const r = formatRelativeTimeWithAbsolute(recent);
-        // Same-day branch produces `relative (HH:MM)` — assert on the colon
+        // Same-day branch produces `relative (HH:MM)`, assert on the colon
         // that only appears inside the time format.
         expect(r).toMatch(/\(\d{1,2}:\d{2}\)$/);
     });
@@ -131,13 +131,13 @@ 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.
+        // 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", () => {
+    it("renders two numeric groups (hours, minutes), no seconds", () => {
         expect(numericGroups(formatTimeHM("2026-06-22T17:15:02Z"))).toBe(2);
     });
 });

package/src/lib/utils/format.ts

@@ -41,7 +41,7 @@ export const formatDateTime = dateFormatter({
     minute: "2-digit",
 });
 
-/** Wall-clock time of day, seconds included, 24-hour — e.g. "17:15:02". */
+/** Wall-clock time of day, seconds included, 24-hour, e.g. "17:15:02". */
 export const formatClockTime = dateFormatter({
     hour: "2-digit",
     minute: "2-digit",
@@ -49,17 +49,17 @@ export const formatClockTime = dateFormatter({
     hour12: false,
 });
 
-/** Calendar date without the time — e.g. "22 Jun 2026". */
+/** Calendar date without the time, e.g. "22 Jun 2026". */
 export const formatCalendarDate = dateFormatter({
     year: "numeric",
     month: "short",
     day: "numeric",
 });
 
-/** Time of day, no seconds, 24-hour — e.g. "17:15". */
+/** Time of day, no seconds, 24-hour, e.g. "17:15". */
 export const formatTimeHM = dateFormatter({ hour: "2-digit", minute: "2-digit", hour12: false });
 
-/** Day and month, no year — e.g. "22 Jun". */
+/** Day and month, no year, e.g. "22 Jun". */
 export const formatDayMonth = dateFormatter({ month: "short", day: "numeric" });
 
 export const formatFullDateTime = dateFormatter({

package/src/lib/utils/toast.svelte.ts

@@ -1,8 +1,6 @@
 // SPDX-FileCopyrightText: PoppyCake, s.r.o.
 // SPDX-License-Identifier: Apache-2.0
 
-import { generateUlid } from "@runwisp/common";
-
 type ToastType = "success" | "error" | "warning" | "info";
 
 interface ToastAction {
@@ -28,6 +26,7 @@ const DEFAULT_DURATION = 5000;
 class ToastStore {
     items = $state<Toast[]>([]);
     private readonly timers = new Map<string, ReturnType<typeof setTimeout>>();
+    private nextId = 0;
 
     add(type: ToastType, message: string, opts: ToastOptions = {}): string {
         const duration = opts.duration ?? DEFAULT_DURATION;
@@ -37,7 +36,7 @@ class ToastStore {
             return existing.id;
         }
 
-        const id = generateUlid();
+        const id = `toast-${String(++this.nextId)}`;
         const next: Toast = { id, type, message, duration };
         if (opts.action) next.action = opts.action;
         this.items = [...this.items, next];

package/src/stories/LogConsole.stories.svelte

@@ -24,7 +24,7 @@
         `  ${ESC}32m✓${ESC}0m users            ${ESC}90m(184,221 rows, 48 MB)${ESC}0m`,
         `  ${ESC}32m✓${ESC}0m sessions         ${ESC}90m(902,114 rows, 210 MB)${ESC}0m`,
         `  ${ESC}32m✓${ESC}0m invoices         ${ESC}90m(45,002 rows, 12 MB)${ESC}0m`,
-        `${ESC}33m[warn]${ESC}0m table ${ESC}1maudit_log${ESC}0m exceeds 1 GB — consider partitioning`,
+        `${ESC}33m[warn]${ESC}0m table ${ESC}1maudit_log${ESC}0m exceeds 1 GB, consider partitioning`,
         `  ${ESC}32m✓${ESC}0m audit_log        ${ESC}90m(7,212,330 rows, 1.2 GB)${ESC}0m`,
         `${ESC}31m[error]${ESC}0m checksum mismatch on chunk 7, retrying ${ESC}90m(attempt 1/3)${ESC}0m`,
         `  ${ESC}32m✓${ESC}0m retry succeeded`,
@@ -53,7 +53,7 @@
     const LONG_LINES = [
         `${ESC}36m[info]${ESC}0m starting request trace`,
         `${ESC}90m2026-06-05T03:00:00Z${ESC}0m GET /api/v1/tasks?include=runs,logs,schedule&limit=100&offset=0 → ${ESC}32m200${ESC}0m ${ESC}90m{"trace":"a1b2c3d4-e5f6-7890-abcd-ef1234567890","upstream":"https://internal.example.com/very/long/path/segment/that/keeps/going/and/going","latency_ms":1287,"bytes":204812}${ESC}0m`,
-        `${ESC}31m[error]${ESC}0m panic: runtime error: index out of range [12] with length 8 — goroutine 42 [running]: main.process(0xc0000b4000, 0x1f4) /home/runner/work/app/app/internal/pipeline/process.go:317 +0x4a5`,
+        `${ESC}31m[error]${ESC}0m panic: runtime error: index out of range [12] with length 8, goroutine 42 [running]: main.process(0xc0000b4000, 0x1f4) /home/runner/work/app/app/internal/pipeline/process.go:317 +0x4a5`,
         "  short line in between",
         `tab-separated\tcolumns\there\tshould\tstay\taligned\tand\textend\tfar\tpast\tthe\tviewport\tedge\tto\tprove\thorizontal\tscroll`,
         `${ESC}32m[done]${ESC}0m ${"=".repeat(400)}|END`,