@runwisp/ui 0.7.0 → 0.8.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@runwisp/ui",
   "description": "Svelte 5 UI component library for RunWisp dashboards and admin interfaces.",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -15,14 +15,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "scripts": {
-    "dev": "storybook dev -p 6006 --no-open",
-    "build": "echo '@runwisp/ui: no build step (raw source)'",
-    "check": "bun run check:types && bun run check:lint",
-    "check:types": "svelte-check --tsconfig ./tsconfig.json",
-    "check:lint": "prettier --check . && eslint .",
-    "format": "prettier --write ."
-  },
   "files": [
     "src"
   ],
@@ -58,8 +50,8 @@
     "@chromatic-com/storybook": "^4.1.3",
     "@eslint/compat": "^1.4.0",
     "@eslint/js": "^9.39.1",
-    "@runwisp/eslint-config": "0.7.0",
-    "@runwisp/typescript-config": "0.7.0",
+    "@runwisp/eslint-config": "0.8.0",
+    "@runwisp/typescript-config": "0.8.0",
     "@storybook/addon-a11y": "^10.1.9",
     "@storybook/addon-docs": "^10.1.9",
     "@storybook/addon-svelte-csf": "^5.0.10",
@@ -107,7 +99,7 @@
     "@floating-ui/dom": "^1.7.4",
     "@fontsource/tasa-orbiter": "^5.2.2",
     "@lucide/svelte": "^0.561.0",
-    "@runwisp/common": "0.7.0",
+    "@runwisp/common": "0.8.0",
     "@tanstack/svelte-virtual": "^3.13.25",
     "ansi-to-html": "^0.7.2",
     "cron-parser": "^5.4.0",

package/src/lib/components/Alert.svelte

@@ -35,25 +35,25 @@
     > = {
         info: {
             bg: "bg-info-soft",
-            border: "border-aurora-200",
+            border: "border-info-soft-border",
             icon: Info,
             iconColor: "text-info",
         },
         success: {
             bg: "bg-success-soft",
-            border: "border-success-200",
+            border: "border-success-soft-border",
             icon: CircleCheckBig,
             iconColor: "text-success-surface",
         },
         warning: {
             bg: "bg-warning-soft",
-            border: "border-warning-200",
+            border: "border-warning-soft-border",
             icon: TriangleAlert,
             iconColor: "text-warning-surface",
         },
         danger: {
             bg: "bg-danger-soft",
-            border: "border-danger-200",
+            border: "border-danger-soft-border",
             icon: CircleX,
             iconColor: "text-danger-surface",
         },

package/src/lib/components/Avatar.svelte

@@ -30,10 +30,10 @@
     };
 
     const statusClasses: Record<string, string> = {
-        online: "bg-success-500",
+        online: "bg-success-surface",
         offline: "bg-on-surface-faint",
-        busy: "bg-danger-500",
-        away: "bg-warning-500",
+        busy: "bg-danger-surface",
+        away: "bg-warning-surface",
     };
 
     const statusSizes: Record<string, string> = {
@@ -46,11 +46,11 @@
 
     // Generate a consistent color based on name
     const colors = [
-        "bg-wisp-500",
-        "bg-aurora-500",
-        "bg-success-500",
-        "bg-warning-500",
-        "bg-danger-500",
+        "bg-primary",
+        "bg-info",
+        "bg-success-surface",
+        "bg-warning-surface",
+        "bg-danger-surface",
     ];
 
     const colorIndex = $derived(

package/src/lib/components/Badge.svelte

@@ -35,28 +35,28 @@
 
     const variantClasses: Record<BadgeVariant, { solid: string; outline: string }> = {
         default: {
-            solid: "bg-mist-100 text-mist-700",
-            outline: "bg-transparent border border-mist-300 text-mist-700",
+            solid: "bg-surface-sunken text-on-surface-muted",
+            outline: "bg-transparent border border-outline-hover text-on-surface-muted",
         },
         primary: {
-            solid: "bg-wisp-100 text-wisp-700",
-            outline: "bg-transparent border border-wisp-300 text-wisp-700",
+            solid: "bg-primary-soft text-primary-soft-text",
+            outline: "bg-transparent border border-wisp-300 text-primary-soft-text",
         },
         success: {
-            solid: "bg-success-100 text-success-700",
-            outline: "bg-transparent border border-success-300 text-success-700",
+            solid: "bg-success-soft text-success-soft-text",
+            outline: "bg-transparent border border-success-300 text-success-soft-text",
         },
         warning: {
-            solid: "bg-warning-100 text-warning-700",
-            outline: "bg-transparent border border-warning-400 text-warning-700",
+            solid: "bg-warning-soft text-warning-soft-text",
+            outline: "bg-transparent border border-warning-400 text-warning-soft-text",
         },
         danger: {
-            solid: "bg-danger-100 text-danger-700",
-            outline: "bg-transparent border border-danger-300 text-danger-700",
+            solid: "bg-danger-soft text-danger-soft-text",
+            outline: "bg-transparent border border-danger-300 text-danger-soft-text",
         },
         info: {
-            solid: "bg-aurora-100 text-aurora-700",
-            outline: "bg-transparent border border-aurora-300 text-aurora-700",
+            solid: "bg-info-soft text-info-soft-text",
+            outline: "bg-transparent border border-aurora-300 text-info-soft-text",
         },
     };
 
@@ -68,20 +68,20 @@
 
     const dotColors: Record<BadgeVariant, string> = {
         default: "bg-mist-500",
-        primary: "bg-wisp-500",
-        success: "bg-success-500",
-        warning: "bg-warning-500",
-        danger: "bg-danger-500",
-        info: "bg-aurora-500",
+        primary: "bg-primary",
+        success: "bg-success-surface",
+        warning: "bg-warning-surface",
+        danger: "bg-danger-surface",
+        info: "bg-info",
     };
 
     const indicatorTextColors: Record<BadgeVariant, string> = {
-        default: "text-mist-500",
-        primary: "text-wisp-500",
-        success: "text-success-500",
-        warning: "text-warning-500",
-        danger: "text-danger-500",
-        info: "text-aurora-500",
+        default: "text-on-surface-muted",
+        primary: "text-primary",
+        success: "text-success-soft-text",
+        warning: "text-warning-soft-text",
+        danger: "text-danger-soft-text",
+        info: "text-info",
     };
 
     const spinnerSizeClasses: Record<BadgeSize, string> = {

package/src/lib/components/CronInput.svelte

@@ -88,7 +88,7 @@
     <!-- Live Feedback -->
     <div
         class="flex items-start gap-3 rounded-md border p-3 transition-colors duration-200
-        {isError ? 'border-danger-200 bg-danger-soft' : 'border-outline bg-surface-sunken'}"
+        {isError ? 'border-danger-soft-border bg-danger-soft' : 'border-outline bg-surface-sunken'}"
     >
         <Info size={18} class="mt-0.5 {isError ? 'text-danger-surface' : 'text-primary'}" />
         <div>

package/src/lib/components/Dropdown.svelte

@@ -5,7 +5,7 @@
     import type { Snippet } from "svelte";
     import type { Component } from "svelte";
     import { tick, onDestroy } from "svelte";
-    import { EllipsisVertical } from "@lucide/svelte";
+    import { EllipsisVertical, Check } from "@lucide/svelte";
     import { scale } from "svelte/transition";
     import { quintOut } from "svelte/easing";
     import { computePosition, autoUpdate, flip, shift, offset } from "@floating-ui/dom";
@@ -18,6 +18,7 @@
         danger?: boolean;
         disabled?: boolean;
         divider?: boolean;
+        selected?: boolean;
         title?: string;
     }
 
@@ -26,10 +27,18 @@
         trigger?: Snippet;
         children?: Snippet;
         align?: "left" | "right";
+        triggerLabel?: string;
         class?: string;
     }
 
-    let { items = [], trigger, children, align = "right", class: className = "" }: Props = $props();
+    let {
+        items = [],
+        trigger,
+        children,
+        align = "right",
+        triggerLabel = "Options",
+        class: className = "",
+    }: Props = $props();
 
     let open = $state(false);
     let triggerEl = $state<HTMLElement | null>(null);
@@ -116,7 +125,8 @@
             toggle(!open);
         }}
         bind:this={triggerEl}
-        aria-label="Options"
+        aria-label={triggerLabel}
+        aria-expanded={open}
         class="rounded-lg p-2 text-on-surface-muted transition-colors hover:bg-surface-sunken hover:text-on-surface focus:ring-2 focus:ring-outline focus:outline-none active:bg-surface-sunken"
     >
         {#if trigger}
@@ -186,6 +196,9 @@
                                 <Icon size={16} class="opacity-70" />
                             {/if}
                             {item.label}
+                            {#if item.selected}
+                                <Check size={16} class="ml-auto text-primary" />
+                            {/if}
                         </button>
                     {/if}
                 {/each}

package/src/lib/components/DurationInput.svelte

@@ -147,7 +147,7 @@
 
         {#if error}
             <div
-                class="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-danger-500"
+                class="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-danger-soft-text"
             >
                 <CircleAlert size={18} />
             </div>
@@ -161,7 +161,9 @@
             {parsedHuman}
         </p>
     {:else if error}
-        <p class="animate-in slide-in-from-top-1 fade-in text-sm text-danger-600 duration-200">
+        <p
+            class="animate-in slide-in-from-top-1 fade-in text-sm text-danger-soft-text duration-200"
+        >
             {error}
         </p>
     {:else if hint}

package/src/lib/components/EmptyState.svelte

@@ -8,7 +8,7 @@
 
     interface Props {
         title?: string;
-        description?: string;
+        description?: string | undefined;
         icon?: Component;
         iconSize?: number;
         actions?: Snippet;

package/src/lib/components/FormField.svelte

@@ -32,7 +32,7 @@
         <label for={generatedId} class="block text-sm font-medium text-on-surface-muted">
             {label}
             {#if required}
-                <span class="text-danger-500">*</span>
+                <span class="text-danger-soft-text">*</span>
             {/if}
         </label>
     {/if}
@@ -44,7 +44,9 @@
     {@render children()}
 
     {#if error}
-        <p class="animate-in slide-in-from-top-1 fade-in text-sm text-danger-600 duration-200">
+        <p
+            class="animate-in slide-in-from-top-1 fade-in text-sm text-danger-soft-text duration-200"
+        >
             {error}
         </p>
     {:else if hint}

package/src/lib/components/Input.svelte

@@ -91,7 +91,7 @@
 
         {#if error}
             <div
-                class="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-danger-500"
+                class="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-danger-soft-text"
             >
                 <CircleAlert size={18} />
             </div>
@@ -105,7 +105,9 @@
     </div>
 
     {#if error}
-        <p class="animate-in slide-in-from-top-1 fade-in text-sm text-danger-600 duration-200">
+        <p
+            class="animate-in slide-in-from-top-1 fade-in text-sm text-danger-soft-text duration-200"
+        >
             {error}
         </p>
     {:else if hint}

package/src/lib/components/LogConsole.svelte

@@ -3,19 +3,12 @@
 
 <script lang="ts">
     import { untrack } from "svelte";
-    import Convert from "ansi-to-html";
+    import { ansiLineToHtml } from "../log-console/ansi.js";
     import { LogCache } from "../log-console/LogCache.svelte.js";
     import { LogFetcher } from "../log-console/LogFetcher.svelte.js";
     import type { FetchLogsFn, LogEvent } from "../log-console/types.js";
     import { formatBytes } from "../utils/format.js";
 
-    // Convert ANSI escape sequences in a single log line to safe HTML spans.
-    // A fresh converter per call ensures no colour state leaks between
-    // independently virtualised lines.
-    function ansiLineToHtml(text: string): string {
-        return new Convert({ escapeXML: true }).toHtml(text);
-    }
-
     interface Props {
         fetchLogs?: FetchLogsFn;
         chunkSize?: number;
@@ -256,13 +249,13 @@
 </script>
 
 <div
-    class="log-console relative flex h-full w-full flex-col overflow-hidden bg-slate-950 font-mono text-sm {className}"
+    class="log-console relative flex h-full w-full flex-col overflow-hidden bg-mist-950 font-mono text-sm {className}"
 >
     <div bind:this={containerEl} class="flex-1 overflow-auto" onscroll={onScroll}>
         <div class="relative" style="height: {totalHeight}px; min-height: 100%;">
             {#if cache.firstAvailableLine > 0}
                 <div
-                    class="absolute right-0 left-0 flex items-center bg-amber-950/60 text-amber-400"
+                    class="absolute right-0 left-0 flex items-center bg-warning-700/20 text-warning-400"
                     style="top: 0px; height: {lineHeight}px;"
                 >
                     <div
@@ -280,24 +273,24 @@
 
             {#each renderedLines as line (line.num)}
                 <div
-                    class="log-line absolute right-0 left-0 flex items-center hover:bg-slate-900/50 {flashLine ===
+                    class="log-line absolute right-0 left-0 flex items-center hover:bg-mist-900/50 {flashLine ===
                     line.num
                         ? 'log-line--flash'
                         : ''}"
                     style="top: {lineTop(line.num)}px; height: {lineHeight}px;"
                 >
                     <div
-                        class="flex-shrink-0 pr-3 text-right text-slate-600 select-none"
+                        class="flex-shrink-0 pr-3 text-right text-mist-500 select-none"
                         style="width: {gutterWidth}px;"
                     >
                         {line.num + 1}
                     </div>
-                    <div class="flex-1 truncate pr-4 text-slate-300">
+                    <div class="flex-1 truncate pr-4 text-mist-200">
                         {#if line.text !== undefined}
                             <!-- eslint-disable-next-line svelte/no-at-html-tags -->
                             <span class="whitespace-pre">{@html ansiLineToHtml(line.text)}</span>
                         {:else}
-                            <span class="text-slate-700 italic">Loading...</span>
+                            <span class="text-mist-600 italic">Loading...</span>
                         {/if}
                     </div>
                 </div>
@@ -312,7 +305,7 @@
                         class="flex-shrink-0 pr-3 text-right select-none"
                         style="width: {gutterWidth}px;"
                     ></div>
-                    <div class="flex items-center gap-1 text-slate-500">
+                    <div class="flex items-center gap-1 text-mist-400">
                         <span class="dot" style="animation-delay: 0ms;"></span>
                         <span class="dot" style="animation-delay: 150ms;"></span>
                         <span class="dot" style="animation-delay: 300ms;"></span>
@@ -329,7 +322,7 @@
                         )}px; height: {lineHeight}px;"
                     >
                         <div
-                            class="flex-shrink-0 pr-3 text-right text-slate-800 opacity-0 select-none"
+                            class="flex-shrink-0 pr-3 text-right text-mist-700 opacity-0 select-none"
                             style="width: {gutterWidth}px;"
                         >
                             ~
@@ -339,16 +332,16 @@
             {/if}
 
             {#if cache.totalLines === 0 && !fetcher?.isFetching}
-                <div class="absolute inset-0 flex items-center justify-center text-slate-600">
+                <div class="absolute inset-0 flex items-center justify-center text-mist-500">
                     <div class="text-center">
                         <div class="mb-1 text-lg">No output yet</div>
-                        <div class="text-sm text-slate-700">Waiting for logs...</div>
+                        <div class="text-sm text-mist-600">Waiting for logs...</div>
                     </div>
                 </div>
             {/if}
 
             {#if cache.totalLines === 0 && fetcher?.isFetching}
-                <div class="absolute inset-0 flex items-center justify-center text-slate-600">
+                <div class="absolute inset-0 flex items-center justify-center text-mist-500">
                     <div class="flex items-center gap-2">
                         <span class="dot" style="animation-delay: 0ms;"></span>
                         <span class="dot" style="animation-delay: 150ms;"></span>
@@ -363,11 +356,11 @@
     {#if userScrolledUp && cache.totalLines > 0}
         <button
             class="absolute right-4 bottom-12 z-10 flex items-center gap-2 rounded-full border
-                   border-slate-700 bg-slate-800
+                   border-mist-700 bg-mist-800
                    px-3 py-1.5 text-xs
-                   font-medium text-slate-300 shadow-lg
+                   font-medium text-mist-200 shadow-lg
                    transition-all duration-200 hover:scale-105
-                   hover:bg-slate-700 active:scale-95"
+                   hover:bg-mist-700 active:scale-95"
             onclick={enableAutoScroll}
         >
             <svg
@@ -384,20 +377,20 @@
     {/if}
 
     <div
-        class="flex flex-shrink-0 items-center justify-between border-t border-slate-800
-               bg-slate-900/80 px-3 py-1.5 text-xs text-slate-500"
+        class="flex flex-shrink-0 items-center justify-between border-t border-mist-800
+               bg-mist-900/80 px-3 py-1.5 text-xs text-mist-400"
     >
         <div class="flex items-center gap-3">
             {#if isStreaming}
-                <div class="flex items-center gap-1.5 text-aurora-400">
+                <div class="flex items-center gap-1.5 text-info">
                     <div class="h-1.5 w-1.5 animate-pulse rounded-full bg-aurora-400"></div>
                     Streaming
                 </div>
             {:else if cache.finished}
-                <span class="text-slate-600">Stream ended</span>
+                <span class="text-mist-500">Stream ended</span>
             {/if}
             {#if fetcher?.isFetching}
-                <span class="text-slate-600">Fetching...</span>
+                <span class="text-mist-500">Fetching...</span>
             {/if}
         </div>
         <div class="flex items-center gap-4">
@@ -406,7 +399,7 @@
                 <span>{formatBytes(cache.totalBytes)}</span>
             {/if}
             {#if isAutoScroll}
-                <span class="text-aurora-500">Auto-scroll</span>
+                <span class="text-info">Auto-scroll</span>
             {/if}
         </div>
     </div>
@@ -423,7 +416,7 @@
 
     @keyframes log-line-flash {
         0% {
-            background-color: rgba(251, 191, 36, 0.45);
+            background-color: oklch(0.8 0.18 70 / 0.45);
         }
         100% {
             background-color: transparent;

package/src/lib/components/Progress.svelte

@@ -28,10 +28,10 @@
     const percentage = $derived(Math.min(Math.max((value / max) * 100, 0), 100));
 
     const variantClasses: Record<ProgressVariant, string> = {
-        default: "bg-wisp-500",
-        success: "bg-success-500",
-        warning: "bg-warning-500",
-        danger: "bg-danger-500",
+        default: "bg-primary",
+        success: "bg-success-surface",
+        warning: "bg-warning-surface",
+        danger: "bg-danger-surface",
     };
 
     const sizeClasses: Record<ProgressSize, string> = {

package/src/lib/components/RadioGroup.svelte

@@ -44,7 +44,9 @@
     </div>
 
     {#if error}
-        <p class="animate-in slide-in-from-top-1 fade-in text-sm text-danger-600 duration-200">
+        <p
+            class="animate-in slide-in-from-top-1 fade-in text-sm text-danger-soft-text duration-200"
+        >
             {error}
         </p>
     {:else if hint}

package/src/lib/components/Select.svelte

@@ -385,7 +385,7 @@
     {/if}
 
     {#if error}
-        <p class="animate-in slide-in-from-top-1 fade-in mt-1.5 text-sm text-danger-600">
+        <p class="animate-in slide-in-from-top-1 fade-in mt-1.5 text-sm text-danger-soft-text">
             {error}
         </p>
     {:else if hint}

package/src/lib/components/Sparkline.svelte

@@ -6,14 +6,19 @@
         data: number[];
         color?: string;
         fillColor?: string;
+        fillOpacity?: number;
         height?: number;
         class?: string;
     }
 
+    // `currentColor` by default so the caller can theme us with a Tailwind
+    // text-* class — that's the only way to flip on .dark without burning a
+    // hardcoded hex in here.
     let {
         data,
-        color = "#6366f1",
+        color = "currentColor",
         fillColor,
+        fillOpacity = 0.12,
         height = 40,
         class: className = "",
     }: Props = $props();
@@ -42,7 +47,10 @@
         return `${pathD} L${lastX.toFixed(1)},${height} L0,${height} Z`;
     });
 
-    let resolvedFill = $derived(fillColor ?? color + "18");
+    // Use `fill-opacity` rather than appending "18" to a hex — that trick
+    // breaks for `currentColor` / `oklch()` / `var(...)` values.
+    let resolvedFill = $derived(fillColor ?? color);
+    let resolvedFillOpacity = $derived(fillColor === undefined ? fillOpacity : 1);
 </script>
 
 <svg
@@ -52,7 +60,7 @@
     style="height: {height}px"
 >
     {#if data.length >= 2}
-        <path d={fillD} fill={resolvedFill} />
+        <path d={fillD} fill={resolvedFill} fill-opacity={resolvedFillOpacity} />
         <path d={pathD} fill="none" stroke={color} stroke-width="1.5" stroke-linejoin="round" />
     {/if}
 </svg>

package/src/lib/components/TaskCard.svelte

@@ -16,15 +16,15 @@
     let { accent = "wisp", onclick, children, class: className = "" }: Props = $props();
 
     const accentClasses: Record<TaskCardAccent, string> = {
-        danger: "hover:border-danger-200",
-        wisp: "hover:border-wisp-200",
-        aurora: "hover:border-aurora-200",
+        danger: "hover:border-danger-soft-border",
+        wisp: "hover:border-primary-soft-border",
+        aurora: "hover:border-info-soft-border",
     };
 </script>
 
 <button
     type="button"
-    class="group w-full rounded-lg border border-mist-100 bg-surface-raised p-3 text-left transition-all hover:shadow-sm {accentClasses[
+    class="group w-full rounded-lg border border-outline-faint bg-surface-raised p-3 text-left transition-all hover:shadow-sm {accentClasses[
         accent
     ]} {className}"
     {onclick}

package/src/lib/components/Textarea.svelte

@@ -67,14 +67,14 @@
         ></textarea>
 
         {#if error}
-            <div class="pointer-events-none absolute top-3 right-3 text-danger-500">
+            <div class="pointer-events-none absolute top-3 right-3 text-danger-soft-text">
                 <CircleAlert size={18} />
             </div>
         {/if}
     </div>
 
     {#if error}
-        <p class="text-sm text-danger-600">{error}</p>
+        <p class="text-sm text-danger-soft-text">{error}</p>
     {:else if hint}
         <p class="text-sm text-on-surface-muted">{hint}</p>
     {/if}

package/src/lib/components/ToastContainer.svelte

@@ -26,13 +26,13 @@
     function getColorClasses(type: Toast["type"]) {
         switch (type) {
             case "success":
-                return "border-success-200 text-success-700";
+                return "border-success-soft-border text-success-soft-text";
             case "error":
-                return "border-danger-200 text-danger-700";
+                return "border-danger-soft-border text-danger-soft-text";
             case "warning":
-                return "border-warning-200 text-warning-700";
+                return "border-warning-soft-border text-warning-soft-text";
             case "info":
-                return "border-wisp-200 text-wisp-700";
+                return "border-primary-soft-border text-primary-soft-text";
         }
     }
 

package/src/lib/components/Tooltip.svelte

@@ -11,9 +11,17 @@
         position?: TooltipPosition;
         children: Snippet;
         class?: string;
+        /** Wrap long content across lines instead of one nowrap line. */
+        wide?: boolean;
     }
 
-    let { content, position = "top", children, class: className = "" }: Props = $props();
+    let {
+        content,
+        position = "top",
+        children,
+        class: className = "",
+        wide = false,
+    }: Props = $props();
 
     const positionClasses: Record<TooltipPosition, string> = {
         top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
@@ -39,7 +47,8 @@
 			pointer-events-none invisible rounded-lg
 			bg-mist-800 px-2.5 py-1.5 text-xs
 			font-medium
-			whitespace-nowrap text-white opacity-0 transition-opacity
+			{wide ? 'w-max max-w-xs whitespace-normal' : 'whitespace-nowrap'}
+			text-white opacity-0 transition-opacity
 			duration-150 group-hover:visible
 			group-hover:opacity-100
 		"