@runwisp/ui 1.5.1 → 1.7.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@runwisp/ui",
   "description": "Svelte 5 UI component library for RunWisp dashboards and admin interfaces.",
-  "version": "1.5.1",
+  "version": "1.7.0",
   "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.5.1",
-    "@runwisp/typescript-config": "1.5.1",
+    "@runwisp/eslint-config": "1.7.0",
+    "@runwisp/typescript-config": "1.7.0",
     "@storybook/addon-a11y": "^10.5.5",
     "@storybook/addon-docs": "^10.5.5",
     "@storybook/addon-svelte-csf": "^5.1.2",
@@ -60,7 +60,6 @@
     "@tailwindcss/forms": "^0.5.11",
     "@tailwindcss/typography": "^0.5.20",
     "@tailwindcss/vite": "^4.3.3",
-    "@types/ms": "^2.1.0",
     "@types/node": "^26.1.2",
     "eslint": "^10.8.0",
     "eslint-config-prettier": "^10.1.8",
@@ -93,11 +92,10 @@
     "@fontsource-variable/geist-mono": "^5.3.0",
     "@fontsource/tasa-orbiter": "^5.3.0",
     "@lucide/svelte": "^1.52.0",
-    "@runwisp/common": "1.5.1",
+    "@runwisp/common": "1.7.0",
     "@tanstack/svelte-virtual": "^3.13.35",
     "ansi-to-html": "^0.7.2",
     "cron-parser": "^5.7.0",
-    "cronstrue": "^3.24.0",
-    "ms": "^2.1.3"
+    "cronstrue": "^3.24.0"
   }
 }

package/src/lib/actions/fold-to-fit.test.ts

@@ -0,0 +1,36 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+import { describe, expect, it } from "vitest";
+import { foldUntilFits } from "./fold-to-fit.js";
+
+// A row of named parts with widths, folding parts to zero.
+function row(width: number, parts: Record<string, number>) {
+    const shown = { ...parts };
+    return {
+        fits: () => Object.values(shown).reduce((a, b) => a + b, 0) <= width,
+        fold: (key: string) => {
+            shown[key] = 0;
+        },
+    };
+}
+
+describe("foldUntilFits", () => {
+    const order = ["id", "via", "start", "usage"];
+    const parts = { verdict: 100, id: 60, via: 40, start: 80, usage: 90 };
+
+    it("folds nothing when the row fits", () => {
+        const r = row(400, parts);
+        expect(foldUntilFits(order, r.fits, r.fold)).toEqual([]);
+    });
+
+    it("folds in order and stops as soon as it fits", () => {
+        const r = row(280, parts);
+        expect(foldUntilFits(order, r.fits, r.fold)).toEqual(["id", "via"]);
+    });
+
+    it("folds everything foldable when even that doesn't fit", () => {
+        const r = row(50, parts);
+        expect(foldUntilFits(order, r.fits, r.fold)).toEqual(order);
+    });
+});

package/src/lib/actions/fold-to-fit.ts

@@ -0,0 +1,89 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+/**
+ * Folds keys away, in `order`, until `fits()` says the row fits. Returns the
+ * keys it folded. Fixed order, so a control is always in the same place: in
+ * the row, or in its overflow menu.
+ */
+export function foldUntilFits(
+    order: readonly string[],
+    fits: () => boolean,
+    fold: (key: string) => void,
+): string[] {
+    const folded: string[] = [];
+    for (const key of order) {
+        if (fits()) break;
+        fold(key);
+        folded.push(key);
+    }
+    return folded;
+}
+
+export interface FoldToFitOptions {
+    /** Fold keys, first to go first. */
+    order: readonly string[];
+    /** Called with the folded keys whenever they change, to fill a ⋯ menu. */
+    onfold?: (folded: string[]) => void;
+}
+
+/**
+ * Keeps a one-line row from overflowing by folding parts of it away. Markup:
+ * `[data-fold=k]` hides when `k` folds, `[data-fold-alt=k]` (render it with
+ * `hidden`) shows instead, a shorter version. `[data-fold-shrink]` parts
+ * normally truncate, so they stop shrinking while the row is measured.
+ * Re-fits when the row resizes or its content changes.
+ */
+export function foldToFit(row: HTMLElement, options: FoldToFitOptions) {
+    let opts = options;
+    let reported = "";
+    let frame = 0;
+
+    const all = (selector: string) => Array.from(row.querySelectorAll<HTMLElement>(selector));
+    const setFolded = (key: string, folded: boolean) => {
+        for (const el of all(`[data-fold="${key}"]`)) el.hidden = folded;
+        for (const el of all(`[data-fold-alt="${key}"]`)) el.hidden = !folded;
+    };
+
+    function fit() {
+        frame = 0;
+        for (const key of opts.order) setFolded(key, false);
+        const shrinking = all("[data-fold-shrink]");
+        for (const el of shrinking) el.style.flexShrink = "0";
+        const folded = foldUntilFits(
+            opts.order,
+            () => row.scrollWidth <= row.clientWidth,
+            (key) => {
+                setFolded(key, true);
+            },
+        );
+        for (const el of shrinking) el.style.flexShrink = "";
+        const key = folded.join(" ");
+        if (key !== reported) {
+            reported = key;
+            opts.onfold?.(folded);
+        }
+    }
+
+    const schedule = () => {
+        if (frame === 0) frame = requestAnimationFrame(fit);
+    };
+    const resize = new ResizeObserver(schedule);
+    resize.observe(row);
+    // Not attributes: fitting toggles `hidden`, which would loop.
+    const content = new MutationObserver(schedule);
+    content.observe(row, { childList: true, subtree: true, characterData: true });
+    fit();
+
+    return {
+        update(next: FoldToFitOptions) {
+            opts = next;
+            schedule();
+        },
+        destroy() {
+            cancelAnimationFrame(frame);
+            resize.disconnect();
+            content.disconnect();
+        },
+    };
+}

package/src/lib/actions/modal-dialog.test.ts

@@ -0,0 +1,47 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+import { describe, expect, it, vi } from "vitest";
+import { modalDialogHandlers } from "./modal-dialog.js";
+
+function setup(closable: boolean, open = true) {
+    const close = vi.fn();
+    const handlers = modalDialogHandlers({ closable: () => closable, isOpen: () => open, close });
+    const dialog = new EventTarget();
+    return { close, handlers, dialog, showModal: vi.fn() };
+}
+
+describe("modalDialogHandlers", () => {
+    it("closes on Escape only when closable, and always cancels the native close", () => {
+        const closable = setup(true);
+        const event = { preventDefault: vi.fn() };
+        closable.handlers.oncancel(event);
+        expect(event.preventDefault).toHaveBeenCalled();
+        expect(closable.close).toHaveBeenCalledOnce();
+
+        const locked = setup(false);
+        locked.handlers.oncancel(event);
+        expect(locked.close).not.toHaveBeenCalled();
+    });
+
+    it("closes on a press that starts and ends on the backdrop", () => {
+        const { handlers, close, dialog } = setup(true);
+        handlers.onpointerdown({ target: new EventTarget(), currentTarget: dialog });
+        handlers.onclick({ target: dialog, currentTarget: dialog });
+        expect(close).not.toHaveBeenCalled();
+
+        handlers.onpointerdown({ target: dialog, currentTarget: dialog });
+        handlers.onclick({ target: dialog, currentTarget: dialog });
+        expect(close).toHaveBeenCalledOnce();
+    });
+
+    it("reopens a dialog the browser closed while it is still mounted", () => {
+        const mounted = setup(false, true);
+        mounted.handlers.onclose({ currentTarget: mounted });
+        expect(mounted.showModal).toHaveBeenCalledOnce();
+
+        const gone = setup(false, false);
+        gone.handlers.onclose({ currentTarget: gone });
+        expect(gone.showModal).not.toHaveBeenCalled();
+    });
+});

package/src/lib/actions/modal-dialog.ts

@@ -0,0 +1,48 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+// showModal() puts the dialog in the top layer and makes the page behind it
+// inert. The dialog stays open while mounted; the caller's `open` flag drives
+// (un)mounting.
+export function showModal(node: HTMLDialogElement) {
+    node.showModal();
+}
+
+interface ModalDialogOptions {
+    closable: () => boolean;
+    isOpen: () => boolean;
+    close: () => void;
+}
+
+// The slice of a pointer/click event the handlers read.
+interface Pressed {
+    target: EventTarget | null;
+    currentTarget: EventTarget | null;
+}
+
+/**
+ * Event handlers to spread on a `<dialog use:showModal>`: Escape and a press on
+ * the bare dialog (its backdrop area) close it when closable.
+ */
+export function modalDialogHandlers({ closable, isOpen, close }: ModalDialogOptions) {
+    // Only a press that starts and ends on the backdrop closes the dialog, so a
+    // text selection dragged out of the panel doesn't.
+    let pressedBackdrop = false;
+    return {
+        oncancel(e: { preventDefault(): void }) {
+            e.preventDefault();
+            if (closable()) close();
+        },
+        // Chrome ignores preventDefault() on a repeated Escape and closes anyway;
+        // reopen so a non-closable dialog stays up while mounted.
+        onclose(e: { currentTarget: { showModal(): void } }) {
+            if (isOpen()) e.currentTarget.showModal();
+        },
+        onpointerdown(e: Pressed) {
+            pressedBackdrop = e.target === e.currentTarget;
+        },
+        onclick(e: Pressed) {
+            if (closable() && pressedBackdrop && e.target === e.currentTarget) close();
+        },
+    };
+}

package/src/lib/components/AccordionItem.svelte

@@ -11,22 +11,32 @@
 
     interface Props {
         title?: Snippet | string;
+        /** A control before the title that must not toggle the panel (an enable switch). */
+        leading?: Snippet;
         /** Controls beside the header that must not toggle it (a switch, a delete button). */
         actions?: Snippet;
         children?: Snippet;
         open?: boolean;
         disabled?: boolean;
         variant?: AccordionItemVariant;
+        /**
+         * `framed` only: border and background colours in place of the default
+         * `border-outline bg-surface-raised`, to tint the panel by state (e.g.
+         * `border-warning-soft-border bg-warning-soft/30` for a stale one).
+         */
+        frameClass?: string;
         class?: string;
     }
 
     let {
         title,
+        leading,
         actions,
         children,
         open = $bindable(false),
         disabled = false,
         variant = "plain",
+        frameClass = "border-outline bg-surface-raised",
         class: className = "",
     }: Props = $props();
 
@@ -61,12 +71,13 @@
     const framed = $derived(variant === "framed");
 </script>
 
-<div
-    class="group {framed
-        ? 'rounded-[4px] border border-outline bg-surface-raised'
-        : ''} {className}"
->
+<div class="group {framed ? `rounded-[4px] border ${frameClass}` : ''} {className}">
     <div class="flex items-center gap-3 {framed ? 'px-4' : ''}">
+        {#if leading}
+            <div class="flex shrink-0 items-center">
+                {@render leading()}
+            </div>
+        {/if}
         <button
             type="button"
             onclick={toggle}

package/src/lib/components/Badge.svelte

@@ -3,6 +3,7 @@
 
 <script lang="ts">
     import type { Snippet } from "svelte";
+    import Spinner from "./Spinner.svelte";
     import Tooltip from "./Tooltip.svelte";
 
     type BadgeVariant = "default" | "primary" | "success" | "warning" | "danger" | "info";
@@ -92,11 +93,7 @@
         info: "text-info",
     };
 
-    const spinnerSizeClasses: Record<BadgeSize, string> = {
-        sm: "h-3 w-3",
-        md: "h-3.5 w-3.5",
-        lg: "h-4 w-4",
-    };
+    const spinnerPx: Record<BadgeSize, number> = { sm: 12, md: 14, lg: 16 };
 </script>
 
 {#snippet chip(extraClass: string)}
@@ -107,25 +104,7 @@
     >
         {#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>
+                <Spinner size={spinnerPx[size]} label="" class={indicatorTextColors[variant]} />
             {:else}
                 <span class="h-1.5 w-1.5 rounded-full {dotColors[variant]}"></span>
             {/if}

package/src/lib/components/Button.svelte

@@ -4,6 +4,7 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
     import type { HTMLButtonAttributes } from "svelte/elements";
+    import Spinner from "./Spinner.svelte";
     import {
         BUTTON_BASE,
         BUTTON_SIZES,
@@ -44,15 +45,7 @@
     {...restProps}
 >
     {#if loading}
-        <svg class="h-4 w-4 animate-spin" 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>
+        <Spinner size="sm" label="" />
     {:else if icon}
         <span class="shrink-0 group-active:scale-95">
             {@render icon()}

package/src/lib/components/CodeBlock.svelte

@@ -92,18 +92,19 @@
             {/if}
         </div>
     {/if}
-    <div class="relative">
-        <pre
-            class="overflow-x-auto font-mono {sizeClasses[size]} {copyable && !hasHeader
-                ? 'pr-24'
-                : ''}">{#if prompt}<span
+    <!-- The copy button gets its own column so a long line scrolls under the
+         edge of the code, never under the button. -->
+    <div class="flex">
+        <pre class="min-w-0 flex-1 overflow-x-auto font-mono {sizeClasses[size]}">{#if prompt}<span
                     class="mr-[1ch] select-none {tone.prompt}"
                     aria-hidden="true">{prompt}</span
                 >{/if}<code bind:this={codeEl}
                 >{#if children}{@render children()}{:else}{code}{/if}</code
             ></pre>
         {#if copyable && !hasHeader}
-            {@render copyButton("absolute top-2 right-2")}
+            <div class="flex shrink-0 items-start pt-2 pr-2 pl-2">
+                {@render copyButton("")}
+            </div>
         {/if}
     </div>
 </div>

package/src/lib/components/Drawer.svelte

@@ -5,9 +5,9 @@
     import type { Snippet } from "svelte";
     import { X } from "@lucide/svelte";
     import Heading from "./Heading.svelte";
-    import { portal } from "../actions/portal.js";
     import { trapFocus } from "../actions/focusTrap.js";
-    import { fly } from "svelte/transition";
+    import { modalDialogHandlers, showModal } from "../actions/modal-dialog.js";
+    import { fade, fly } from "svelte/transition";
 
     type Side = "left" | "right" | "top" | "bottom";
     type DrawerSize = "sm" | "md" | "lg" | "xl";
@@ -38,6 +38,8 @@
         class: className = "",
     }: Props = $props();
 
+    const titleId = $props.id();
+
     const sizeValues: Record<DrawerSize, string> = {
         sm: "320px",
         md: "400px",
@@ -72,32 +74,25 @@
         onClose?.();
     }
 
-    function handleKeydown(e: KeyboardEvent) {
-        if (e.key === "Escape" && closable) {
-            handleClose();
-        }
-    }
+    const dialogHandlers = modalDialogHandlers({
+        closable: () => closable,
+        isOpen: () => open,
+        close: handleClose,
+    });
 </script>
 
-<svelte:window onkeydown={handleKeydown} />
-
 {#if open}
-    <div use:portal class="fixed inset-0 z-50">
-        {#if closable}
-            <button
-                type="button"
-                class="absolute inset-0 z-0 bg-backdrop backdrop-blur-sm"
-                aria-label="Close drawer"
-                tabindex="-1"
-                onclick={handleClose}
-                transition:fly={{ duration: 150 }}
-            ></button>
-        {:else}
-            <div
-                class="absolute inset-0 z-0 bg-backdrop backdrop-blur-sm"
-                transition:fly={{ duration: 150 }}
-            ></div>
-        {/if}
+    <dialog
+        use:showModal
+        {...dialogHandlers}
+        aria-labelledby={title ? titleId : undefined}
+        class="fixed inset-0 m-0 h-full max-h-none w-full max-w-none border-0 bg-transparent p-0 text-inherit backdrop:bg-transparent"
+    >
+        <div
+            class="pointer-events-none absolute inset-0 z-0 bg-backdrop backdrop-blur-sm"
+            aria-hidden="true"
+            transition:fade={{ duration: 150 }}
+        ></div>
 
         <div
             use:trapFocus
@@ -108,9 +103,6 @@
                 {className}
             "
             style={panelStyle}
-            role="dialog"
-            aria-modal="true"
-            aria-labelledby={title ? "drawer-title" : undefined}
             transition:fly={{ ...flyParams[side], duration: 250 }}
         >
             {#if header}
@@ -123,7 +115,7 @@
                 >
                     <div>
                         {#if title}
-                            <Heading level={2} size="lg" id="drawer-title">{title}</Heading>
+                            <Heading level={2} size="lg" id={titleId}>{title}</Heading>
                         {/if}
                     </div>
                     {#if closable}
@@ -150,5 +142,5 @@
                 </div>
             {/if}
         </div>
-    </div>
+    </dialog>
 {/if}

package/src/lib/components/DurationInput.svelte

@@ -3,7 +3,7 @@
 
 <script lang="ts">
     import { CircleAlert, Clock } from "@lucide/svelte";
-    import ms, { type StringValue } from "ms";
+    import { formatDurationExact, parseDuration } from "../utils/format.js";
 
     type InputSize = "sm" | "md" | "lg";
 
@@ -56,28 +56,9 @@
     const errorBorder =
         "border-danger-surface focus:border-danger-surface focus:ring-danger-surface";
 
-    function formatMs(msValue: number): string {
-        if (typeof msValue !== "number" || isNaN(msValue)) return "";
-        try {
-            return ms(msValue);
-        } catch {
-            return "";
-        }
-    }
-
-    function parseToMs(str: string): number | null {
-        if (!str || !str.trim()) return null;
-        try {
-            const result = ms(str as StringValue);
-            return typeof result === "number" ? result : null;
-        } catch {
-            return null;
-        }
-    }
-
     function updateFromValue() {
         if (!isFocused) {
-            textValue = value != null ? formatMs(value) : "";
+            textValue = value != null ? formatDurationExact(value) : "";
         }
     }
 
@@ -89,11 +70,11 @@
         const val = e.currentTarget.value;
         textValue = val;
 
-        const msValue = parseToMs(val);
+        const msValue = parseDuration(val);
         value = msValue;
 
-        if (typeof msValue === "number") {
-            parsedHuman = ms(msValue, { long: true });
+        if (msValue !== null) {
+            parsedHuman = formatDurationExact(msValue);
             if (error) error = undefined;
         } else {
             parsedHuman = "";
@@ -106,7 +87,7 @@
 
     function handleBlur() {
         isFocused = false;
-        textValue = value != null ? formatMs(value) : "";
+        textValue = value != null ? formatDurationExact(value) : "";
         parsedHuman = "";
     }
 </script>

package/src/lib/components/FilterBar.svelte

@@ -20,6 +20,7 @@
     import SearchInput from "./SearchInput.svelte";
     import FilterPill from "./FilterPill.svelte";
     import Popover from "./Popover.svelte";
+    import { isTypingTarget } from "../utils/typing-target.js";
     import { Plus, RotateCcw } from "@lucide/svelte";
     import {
         type FilterField,
@@ -83,12 +84,7 @@
     // `/` focuses the search box, unless the user is already typing somewhere.
     function onWindowKeydown(e: KeyboardEvent) {
         if (e.key !== "/" || !searchEl) return;
-        const t = e.target;
-        if (
-            t instanceof HTMLElement &&
-            (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable)
-        )
-            return;
+        if (isTypingTarget(e.target)) return;
         e.preventDefault();
         searchEl.focus();
     }

package/src/lib/components/Link.svelte

@@ -5,12 +5,14 @@
     import type { Snippet } from "svelte";
     import type { HTMLAnchorAttributes } from "svelte/elements";
 
-    type LinkVariant = "default" | "muted" | "primary" | "danger";
+    type LinkVariant = "default" | "muted" | "primary" | "danger" | "unstyled";
     type LinkUnderline = "always" | "hover" | "none";
 
     // Use Link for off-site URLs (`external` opens a new tab with rel=noopener
-    // noreferrer). An in-app href must still come from SvelteKit's resolve():
-    // being a component, Link sits outside svelte/no-navigation-without-resolve.
+    // noreferrer). `unstyled` adds no classes beyond `class` (no `underline`
+    // either), for nav rows and menu items that bring their own layout. An
+    // in-app href must still come from SvelteKit's resolve(): being a
+    // component, Link sits outside svelte/no-navigation-without-resolve.
     interface Props extends Omit<HTMLAnchorAttributes, "href" | "children" | "class"> {
         href: string;
         variant?: LinkVariant;
@@ -41,6 +43,7 @@
         muted: "text-on-surface-muted hover:text-on-surface",
         primary: "text-primary hover:text-primary-hover",
         danger: "text-danger-surface hover:text-danger-hover",
+        unstyled: "",
     };
 
     const underlineClasses: Record<LinkUnderline, string> = {
@@ -52,7 +55,9 @@
 
 <a
     {href}
-    class="{baseClasses} {variantClasses[variant]} {underlineClasses[underline]} {className}"
+    class={variant === "unstyled"
+        ? className
+        : `${baseClasses} ${variantClasses[variant]} ${underlineClasses[underline]} ${className}`}
     target={external ? "_blank" : undefined}
     rel={external ? "noopener noreferrer" : undefined}
     {...restProps}