@runwisp/ui 1.0.0 → 1.0.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@runwisp/ui",
   "description": "Svelte 5 UI component library for RunWisp dashboards and admin interfaces.",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -49,8 +49,8 @@
   "devDependencies": {
     "@chromatic-com/storybook": "^5.2.1",
     "@eslint/js": "^10.0.1",
-    "@runwisp/eslint-config": "1.0.0",
-    "@runwisp/typescript-config": "1.0.0",
+    "@runwisp/eslint-config": "1.0.1",
+    "@runwisp/typescript-config": "1.0.1",
     "@storybook/addon-a11y": "^10.5.5",
     "@storybook/addon-docs": "^10.5.5",
     "@storybook/addon-svelte-csf": "^5.1.2",
@@ -93,7 +93,7 @@
     "@fontsource-variable/geist-mono": "^5.3.0",
     "@fontsource/tasa-orbiter": "^5.3.0",
     "@lucide/svelte": "^1.28.0",
-    "@runwisp/common": "1.0.0",
+    "@runwisp/common": "1.0.1",
     "@tanstack/svelte-virtual": "^3.13.35",
     "ansi-to-html": "^0.7.2",
     "cron-parser": "^5.7.0",

package/src/lib/components/Badge.svelte

@@ -3,9 +3,11 @@
 
 <script lang="ts">
     import type { Snippet } from "svelte";
+    import Tooltip from "./Tooltip.svelte";
 
     type BadgeVariant = "default" | "primary" | "success" | "warning" | "danger" | "info";
     type BadgeSize = "sm" | "md" | "lg";
+    type TooltipPosition = "top" | "bottom" | "left" | "right";
 
     interface Props {
         variant?: BadgeVariant;
@@ -13,6 +15,10 @@
         dot?: boolean;
         loading?: boolean;
         outline?: boolean;
+        /** Shown in the styled hover tooltip (see {@link Tooltip}). */
+        tooltip?: string;
+        /** Side the tooltip opens on — pick one that has room, e.g. "bottom" near the top of the viewport. */
+        tooltipPosition?: TooltipPosition;
         children?: Snippet;
         class?: string;
     }
@@ -23,6 +29,8 @@
         dot = false,
         loading = false,
         outline = false,
+        tooltip,
+        tooltipPosition = "top",
         children,
         class: className = "",
     }: Props = $props();
@@ -91,37 +99,47 @@
     };
 </script>
 
-<span
-    class="{baseClasses} {outline
-        ? variantClasses[variant].outline
-        : variantClasses[variant].solid} {sizeClasses[size]} {className}"
->
-    {#if dot}
-        {#if loading}
-            <svg
-                class="{spinnerSizeClasses[size]} animate-spin {indicatorTextColors[variant]}"
-                viewBox="0 0 24 24"
-                fill="none"
-            >
-                <circle
-                    class="opacity-25"
-                    cx="12"
-                    cy="12"
-                    r="10"
-                    stroke="currentColor"
-                    stroke-width="4"
-                ></circle>
-                <path
-                    class="opacity-75"
-                    fill="currentColor"
-                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                ></path>
-            </svg>
-        {:else}
-            <span class="h-1.5 w-1.5 rounded-full {dotColors[variant]}"></span>
+{#snippet chip(extraClass: string)}
+    <span
+        class="{baseClasses} {outline
+            ? variantClasses[variant].outline
+            : variantClasses[variant].solid} {sizeClasses[size]} {extraClass}"
+    >
+        {#if dot}
+            {#if loading}
+                <svg
+                    class="{spinnerSizeClasses[size]} animate-spin {indicatorTextColors[variant]}"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                >
+                    <circle
+                        class="opacity-25"
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke="currentColor"
+                        stroke-width="4"
+                    ></circle>
+                    <path
+                        class="opacity-75"
+                        fill="currentColor"
+                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                    ></path>
+                </svg>
+            {:else}
+                <span class="h-1.5 w-1.5 rounded-full {dotColors[variant]}"></span>
+            {/if}
         {/if}
-    {/if}
-    {#if children}
-        {@render children()}
-    {/if}
-</span>
+        {#if children}
+            {@render children()}
+        {/if}
+    </span>
+{/snippet}
+
+{#if tooltip}
+    <Tooltip content={tooltip} position={tooltipPosition} class={className} wide>
+        {@render chip("")}
+    </Tooltip>
+{:else}
+    {@render chip(className)}
+{/if}

package/src/lib/components/Tooltip.svelte

@@ -38,7 +38,10 @@
     };
 </script>
 
-<div class="group relative inline-block {className}">
+<!-- Named group: an unnamed `group` would also fire on any ancestor's own
+     `group-hover` (e.g. a hoverable card row this tooltip sits inside),
+     popping every tooltip in that row open at once. -->
+<div class="group/tooltip relative inline-block {className}">
     {@render children()}
 
     <!-- Hover intent: 100ms before it appears, so sweeping the pointer across a
@@ -52,7 +55,7 @@
 			text-xs
 			{wide ? 'w-max max-w-xs whitespace-normal' : 'whitespace-nowrap'}
 			text-on-surface opacity-0 transition-[opacity,visibility]
-			delay-100 duration-0 group-hover:visible group-hover:opacity-100
+			delay-100 duration-0 group-hover/tooltip:visible group-hover/tooltip:opacity-100
 		"
         role="tooltip"
     >

package/src/lib/components/dashboard/run-filters.test.ts

@@ -274,9 +274,9 @@ describe("triggerDescription", () => {
 });
 
 describe("FILTERABLE_TRIGGERS", () => {
-    it("offers every trigger except cloud", () => {
+    it("offers every trigger except station", () => {
         expect(FILTERABLE_TRIGGERS).toEqual(["cron", "api", "ui", "cli", "service", "startup"]);
-        expect(FILTERABLE_TRIGGERS).not.toContain("cloud");
+        expect(FILTERABLE_TRIGGERS).not.toContain("station");
     });
 });
 

package/src/lib/components/dashboard/run-filters.ts

@@ -225,7 +225,7 @@ export function humanizeStatus(status: string): string {
 
 /**
  * Descriptive label for a run's trigger source — fuller than the one-word row
- * badge (`formatTriggeredByLabel`) for the "cron"/"cloud"/"service"/"startup"
+ * badge (`formatTriggeredByLabel`) for the "cron"/"station"/"service"/"startup"
  * sources, where the extra words disambiguate (e.g. "REST API" vs a bare
  * "API"). "ui" and "cli" already read fine as their bare badge word, so those
  * two match `formatTriggeredByLabel` exactly.
@@ -243,7 +243,7 @@ export function triggerDescription(trigger: string): string {
             return "UI";
         case "cli":
             return "CLI";
-        case "cloud":
+        case "station":
             return "Control plane";
         case "service":
             return "Service auto-start";
@@ -255,11 +255,11 @@ export function triggerDescription(trigger: string): string {
 }
 
 /**
- * The triggers offered in the filter dropdown. `cloud` is intentionally
- * excluded for now — control-plane runs still carry the `cloud` trigger, but
+ * The triggers offered in the filter dropdown. `station` is intentionally
+ * excluded for now — control-plane runs still carry the `station` trigger, but
  * it isn't a selectable filter dimension.
  */
-export const FILTERABLE_TRIGGERS: readonly Trigger[] = TRIGGERS.filter((t) => t !== "cloud");
+export const FILTERABLE_TRIGGERS: readonly Trigger[] = TRIGGERS.filter((t) => t !== "station");
 
 /** Chip label for the status dimension — names a whole bucket when it matches. */
 export function statusChipLabel(statuses: string[]): string {

package/src/lib/components/dashboard/run-helpers.test.ts

@@ -112,7 +112,7 @@ describe("formatTriggeredByLabel", () => {
         expect(formatTriggeredByLabel("cron")).toBe("Cron");
         expect(formatTriggeredByLabel("service")).toBe("Service");
         expect(formatTriggeredByLabel("startup")).toBe("Startup");
-        expect(formatTriggeredByLabel("cloud")).toBe("Cloud");
+        expect(formatTriggeredByLabel("station")).toBe("Station");
     });
 });
 

package/src/lib/components/dashboard/run-helpers.ts

@@ -90,7 +90,7 @@ export function formatTriggeredByLabel(triggeredBy: Run["triggeredBy"]): string
     if (triggeredBy === "cron") return "Cron";
     if (triggeredBy === "service") return "Service";
     if (triggeredBy === "startup") return "Startup";
-    return "Cloud";
+    return "Station";
 }
 
 /**