@runwisp/ui 1.3.0 → 1.5.0

package/src/lib/components/Link.svelte

@@ -3,11 +3,15 @@
 
 <script lang="ts">
     import type { Snippet } from "svelte";
+    import type { HTMLAnchorAttributes } from "svelte/elements";
 
     type LinkVariant = "default" | "muted" | "primary" | "danger";
     type LinkUnderline = "always" | "hover" | "none";
 
-    interface Props {
+    // 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.
+    interface Props extends Omit<HTMLAnchorAttributes, "href" | "children" | "class"> {
         href: string;
         variant?: LinkVariant;
         external?: boolean;
@@ -23,6 +27,7 @@
         underline = "hover",
         children,
         class: className = "",
+        ...restProps
     }: Props = $props();
 
     const baseClasses = `
@@ -50,6 +55,7 @@
     class="{baseClasses} {variantClasses[variant]} {underlineClasses[underline]} {className}"
     target={external ? "_blank" : undefined}
     rel={external ? "noopener noreferrer" : undefined}
+    {...restProps}
 >
     {@render children()}
 </a>

package/src/lib/components/LogConsole.svelte

@@ -6,13 +6,12 @@
     import { ansiLineToHtml, visibleColumns } from "../log-console/ansi.js";
     import { LogCache } from "../log-console/LogCache.svelte.js";
     import { LogFetcher } from "../log-console/LogFetcher.svelte.js";
+    import { createHighlightScroll } from "../log-console/highlight-scroll.js";
     import type { FetchLogsFn, LogEvent } from "../log-console/types.js";
     import { formatBytes } from "../utils/format.js";
 
     interface Props {
         fetchLogs?: FetchLogsFn;
-        chunkSize?: number;
-        lineHeight?: number;
         class?: string;
         // highlightLine, when set, scrolls the console so the given absolute
         // line number is visible and pulses a short-lived flash on that row.
@@ -37,6 +36,10 @@
         // run that simply produced no output. Null/undefined renders nothing;
         // the caller clears it once a subsequent fetch succeeds.
         error?: string | null;
+        // The caller is still fetching this console's first output (e.g. the
+        // run panel seeding its tail). Shows the loading state rather than
+        // "No output yet" until that output arrives.
+        loading?: boolean;
         // Wrap long lines instead of horizontally scrolling them. When on, each
         // rendered row's height becomes a multiple of `lineHeight` (one per
         // wrapped visual row), so the virtualizer switches from the fixed-height
@@ -47,17 +50,18 @@
 
     let {
         fetchLogs,
-        chunkSize = 4096,
-        lineHeight = 20,
         class: className = "",
         highlightLine = null,
         fetchLineHistory,
         endLabel = "end of output",
         endTone = "muted",
         error = null,
+        loading = false,
         wrap = $bindable(false),
     }: Props = $props();
 
+    const lineHeight = 20; // px per rendered row
+
     // --- Frame-history inline expansion (single expansion at a time) ---
     // expandedLine is the absolute line number whose history block is open;
     // expandedFrames holds the fetched whole-region frames (null while loading).
@@ -266,7 +270,7 @@
         const i = lineNum - cache.firstAvailableLine;
         if (i <= 0) return base;
         if (i >= prefixSums.length) {
-            const last = prefixSums.length > 0 ? (prefixSums[prefixSums.length - 1] ?? 0) : 0;
+            const last = prefixSums.at(-1) ?? 0;
             return last * lineHeight + base;
         }
         return (prefixSums[i] ?? 0) * lineHeight + base;
@@ -340,11 +344,8 @@
     let overlayRows = $derived(cache.overlayRows);
 
     let totalHeight = $derived.by(() => {
-        const truncationBannerHeight = cache.firstAvailableLine > 0 ? lineHeight : 0;
         const linesHeight = wrap
-            ? (prefixSums.length > 0
-                  ? (prefixSums[prefixSums.length - 1] ?? 0)
-                  : Math.max(0, cache.totalLines - cache.firstAvailableLine)) *
+            ? (prefixSums.at(-1) ?? Math.max(0, cache.totalLines - cache.firstAvailableLine)) *
                   lineHeight +
               truncationBannerHeight
             : (cache.totalLines - cache.firstAvailableLine) * lineHeight + truncationBannerHeight;
@@ -405,8 +406,7 @@
     // viewport lands at the end of the log without racing the auto-scroll.
     $effect(() => {
         const fn = fetchLogs;
-        const cs = chunkSize;
-        fetcher = new LogFetcher(cache, fn, cs, (min, max) => {
+        fetcher = new LogFetcher(cache, fn, (min, max) => {
             measureRange(min, max);
             if (isAutoScroll && !userScrolledUp) {
                 requestAnimationFrame(() => scrollToBottom());
@@ -533,29 +533,32 @@
         scrollTop = 0;
     }
 
-    // Search-hit deep-link: when highlightLine flips to a non-null number,
-    // scroll the viewport so that line is centred, and pulse a one-shot
-    // flash class for ~1.5s. Cleaning up the timer on prop change keeps a
-    // rapid sequence of jumps from leaking timers.
-    $effect(() => {
-        const target = highlightLine;
-        if (target === null || target === undefined) {
-            flashLine = null;
-            return;
-        }
-        if (!containerEl) return;
-        const targetY = lineTop(target) - containerHeight / 2 + lineHeight / 2;
-        const clamped = Math.max(0, Math.min(targetY, totalHeight - containerHeight));
-        containerEl.scrollTo({ top: clamped, behavior: "smooth" });
-        isAutoScroll = false;
-        userScrolledUp = true;
-        flashLine = target;
-        if (flashTimer !== null) clearTimeout(flashTimer);
-        flashTimer = setTimeout(() => {
+    // Search-hit deep-link: scroll the viewport so the highlighted line is
+    // centred, once per highlightLine, and pulse a one-shot flash class for
+    // ~1.5s. createHighlightScroll keeps later layout changes (new lines on a
+    // live run, resizes) from pulling the view back to the hit.
+    const syncHighlightScroll = createHighlightScroll({
+        line: () => highlightLine,
+        ready: (line) => containerEl !== null && containerHeight > 0 && line < cache.totalLines,
+        reveal: (line) => {
+            if (!containerEl) return;
+            const targetY = lineTop(line) - containerHeight / 2 + lineHeight / 2;
+            const clamped = Math.max(0, Math.min(targetY, totalHeight - containerHeight));
+            containerEl.scrollTo({ top: clamped, behavior: "smooth" });
+            isAutoScroll = false;
+            userScrolledUp = true;
+            flashLine = line;
+            if (flashTimer !== null) clearTimeout(flashTimer);
+            flashTimer = setTimeout(() => {
+                flashLine = null;
+                flashTimer = null;
+            }, 1500);
+        },
+        clear: () => {
             flashLine = null;
-            flashTimer = null;
-        }, 1500);
+        },
     });
+    $effect(syncHighlightScroll);
 
     $effect(() => {
         if (!containerEl) return;
@@ -798,7 +801,7 @@
                 {/each}
             {/if}
 
-            {#if cache.totalLines === 0 && overlayRows.length === 0 && !fetcher?.isFetching}
+            {#if cache.totalLines === 0 && overlayRows.length === 0 && !loading && !fetcher?.isFetching}
                 <div
                     class="absolute inset-0 flex items-center justify-center text-[var(--rw-con-dim)]"
                 >
@@ -809,7 +812,7 @@
                 </div>
             {/if}
 
-            {#if cache.totalLines === 0 && fetcher?.isFetching}
+            {#if cache.totalLines === 0 && (loading || fetcher?.isFetching)}
                 <div
                     class="absolute inset-0 flex items-center justify-center text-[var(--rw-con-dim)]"
                 >

package/src/lib/components/Modal.svelte

@@ -4,6 +4,7 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
     import { X } from "@lucide/svelte";
+    import Heading from "./Heading.svelte";
 
     interface Props {
         open?: boolean;
@@ -20,7 +21,6 @@
         class?: string;
     }
 
-    import { portal } from "../actions/portal.js";
     import { trapFocus } from "../actions/focusTrap.js";
 
     let {
@@ -36,6 +36,8 @@
         class: className = "",
     }: Props = $props();
 
+    const titleId = $props.id();
+
     const sizeClasses: Record<string, string> = {
         sm: "max-w-sm",
         md: "max-w-md",
@@ -49,35 +51,52 @@
         onClose?.();
     }
 
-    function handleKeydown(e: KeyboardEvent) {
-        if (e.key === "Escape" && closable) {
-            handleClose();
-        }
+    // showModal() puts the dialog in the top layer and makes the page behind it
+    // inert. The dialog stays open while mounted; `open` drives (un)mounting.
+    function showModal(node: HTMLDialogElement) {
+        node.showModal();
+    }
+
+    function handleCancel(e: Event) {
+        e.preventDefault();
+        if (closable) handleClose();
+    }
+
+    // Chrome ignores preventDefault() on a repeated Escape and closes anyway;
+    // reopen so a non-closable modal stays up while mounted.
+    function handleNativeClose(e: Event & { currentTarget: HTMLDialogElement }) {
+        if (open) e.currentTarget.showModal();
     }
-</script>
 
-<svelte:window onkeydown={handleKeydown} />
+    // Only a press that starts and ends on the backdrop closes the modal, so a
+    // text selection dragged out of the panel doesn't.
+    let pressedBackdrop = false;
+    function handlePointerDown(e: PointerEvent) {
+        pressedBackdrop = e.target === e.currentTarget;
+    }
+    function handleBackdropClick(e: MouseEvent) {
+        if (closable && pressedBackdrop && e.target === e.currentTarget) handleClose();
+    }
+</script>
 
 {#if open}
-    <div
-        use:portal
+    <dialog
+        use:showModal
+        oncancel={handleCancel}
+        onclose={handleNativeClose}
+        onpointerdown={handlePointerDown}
+        onclick={handleBackdropClick}
+        aria-labelledby={title ? titleId : undefined}
         class="
-			fixed inset-0
-			z-50 flex items-center justify-center
-			p-4
+			fixed inset-0 m-0 flex h-full max-h-none w-full max-w-none
+			items-center justify-center border-0 bg-transparent p-4
+			text-inherit backdrop:bg-transparent
 		"
     >
-        {#if closable}
-            <button
-                type="button"
-                class="absolute inset-0 z-0 bg-backdrop backdrop-blur-sm"
-                aria-label="Close modal"
-                tabindex="-1"
-                onclick={handleClose}
-            ></button>
-        {:else}
-            <div class="absolute inset-0 z-0 bg-backdrop backdrop-blur-sm"></div>
-        {/if}
+        <div
+            class="pointer-events-none absolute inset-0 z-0 bg-backdrop backdrop-blur-sm"
+            aria-hidden="true"
+        ></div>
 
         <div
             use:trapFocus
@@ -87,9 +106,6 @@
 				rounded-[4px] border border-outline bg-surface-overlay shadow-lg
 				{className}
 			"
-            role="dialog"
-            aria-modal="true"
-            aria-labelledby={title ? "modal-title" : undefined}
         >
             {#if header}
                 <div class="border-b border-outline px-6 py-4">
@@ -101,12 +117,7 @@
                 >
                     <div>
                         {#if title}
-                            <h2
-                                id="modal-title"
-                                class="font-mono text-lg font-semibold text-on-surface"
-                            >
-                                {title}
-                            </h2>
+                            <Heading level={2} size="lg" id={titleId}>{title}</Heading>
                         {/if}
                         {#if description}
                             <p class="mt-1 text-sm text-on-surface-muted">{description}</p>
@@ -136,5 +147,5 @@
                 </div>
             {/if}
         </div>
-    </div>
+    </dialog>
 {/if}

package/src/lib/components/NotificationBell.svelte

@@ -9,6 +9,7 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
     import { Bell } from "@lucide/svelte";
+    import Heading from "./Heading.svelte";
     import Popover from "./Popover.svelte";
 
     interface Props {
@@ -60,7 +61,7 @@
 
     <div role="dialog" aria-label={title} class="w-96 max-w-[90vw]">
         <div class="mb-2 flex items-center justify-between gap-2">
-            <h2 class="font-mono text-sm font-semibold text-on-surface">{title}</h2>
+            <Heading level={2} size="sm">{title}</Heading>
             {#if actions}
                 <div class="flex items-center gap-3 text-xs">{@render actions()}</div>
             {/if}

package/src/lib/components/PageContainer.svelte

@@ -4,16 +4,7 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
 
-    /**
-     * PageContainer — the single, standardized page-level wrapper.
-     *
-     * Variants:
-     *   "standard"   – Max-width + centering + padding + flex-col + min-h-full.
-     *   "full"       – Same as standard but h-full (fills viewport).
-     *   "wide"       – Max-width + centering only (consumer provides padding).
-     *   "narrow"     – Narrower max-width + centering.
-     *   "flush"      – Fills container height, no max-width.
-     */
+    /** The standard page-level wrapper. See variantClasses for each variant's layout. */
     let {
         children,
         variant = "standard",

package/src/lib/components/PageHeader.svelte

@@ -3,11 +3,13 @@
 
 <script lang="ts">
     import type { Snippet } from "svelte";
+    import Heading from "./Heading.svelte";
 
     interface Props {
         title: string;
-        subtitle?: string;
-        actions?: Snippet;
+        /** Plain text, or a snippet when the line carries tokens (counts, names). */
+        subtitle?: string | Snippet;
+        actions?: Snippet | undefined;
         class?: string;
     }
 
@@ -16,8 +18,10 @@
 
 <div class="flex shrink-0 flex-wrap items-start justify-between gap-3 px-1 {className}">
     <div class="min-w-0">
-        <h1 class="font-mono text-2xl font-bold tracking-tight text-on-surface">{title}</h1>
-        {#if subtitle}
+        <Heading level={1} size="2xl">{title}</Heading>
+        {#if typeof subtitle === "function"}
+            <p class="mt-0.5 text-sm text-on-surface-muted">{@render subtitle()}</p>
+        {:else if subtitle}
             <p class="mt-0.5 text-sm text-on-surface-muted">{subtitle}</p>
         {/if}
     </div>

package/src/lib/components/Popover.svelte

@@ -4,9 +4,8 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
     import type { Placement } from "@floating-ui/dom";
-    import { onDestroy } from "svelte";
-    import { computePosition, autoUpdate, flip, shift, offset } from "@floating-ui/dom";
     import { fade } from "svelte/transition";
+    import { floating, isOutsideClick } from "../actions/floating.js";
     import { portal } from "../actions/portal.js";
     import { trapFocus } from "../actions/focusTrap.js";
 
@@ -33,7 +32,6 @@
 
     let triggerEl = $state<HTMLElement | null>(null);
     let contentEl = $state<HTMLElement | null>(null);
-    let cleanupFloating = $state<(() => void) | null>(null);
 
     // Track the `md` breakpoint only when sheet mode is requested, so the
     // content can switch between floating (desktop) and bottom sheet (phone)
@@ -50,64 +48,17 @@
 
     const asSheet = $derived(mobileSheet && !isDesktop);
 
-    function teardown() {
-        cleanupFloating?.();
-        cleanupFloating = null;
-    }
-
-    function setupFloating() {
-        if (!triggerEl || !contentEl) return;
-        cleanupFloating = autoUpdate(triggerEl, contentEl, () => {
-            if (!triggerEl || !contentEl) return;
-            void computePosition(triggerEl, contentEl, {
-                placement,
-                middleware: [offset(8), flip(), shift({ padding: 8 })],
-            }).then(({ x, y }) => {
-                if (contentEl) {
-                    Object.assign(contentEl.style, {
-                        left: `${String(x)}px`,
-                        top: `${String(y)}px`,
-                        position: "absolute",
-                    });
-                }
-            });
-        });
-    }
-
-    // Position the content while open: float it on desktop, or pin it as a
-    // sheet on phone (clearing any inline coords floating-ui left behind).
-    $effect(() => {
-        if (!open || !contentEl) {
-            teardown();
-            return;
-        }
-        if (asSheet) {
-            teardown();
-            contentEl.style.removeProperty("left");
-            contentEl.style.removeProperty("top");
-            contentEl.style.removeProperty("position");
-            return;
-        }
-        setupFloating();
-        return teardown;
-    });
-
     function toggle() {
         open = !open;
     }
 
     function handleOutsideClick(e: MouseEvent) {
-        const path = e.composedPath();
-        if (triggerEl && path.includes(triggerEl)) return;
-        if (contentEl && path.includes(contentEl)) return;
-        if (open) open = false;
+        if (open && isOutsideClick(e, triggerEl, contentEl)) open = false;
     }
 
     function handleKeyDown(e: KeyboardEvent) {
         if (e.key === "Escape" && open) open = false;
     }
-
-    onDestroy(teardown);
 </script>
 
 <svelte:window onclick={handleOutsideClick} onkeydown={handleKeyDown} />
@@ -146,6 +97,13 @@
         <div
             use:portal
             use:trapFocus
+            use:floating={{
+                reference: triggerEl,
+                placement,
+                offset: 8,
+                padding: 8,
+                disabled: asSheet,
+            }}
             bind:this={contentEl}
             class="
                 z-[9999] max-h-[80vh] overflow-y-auto

package/src/lib/components/Progress.svelte

@@ -12,6 +12,9 @@
         size?: ProgressSize;
         showLabel?: boolean;
         label?: string;
+        /** Percent at which the bar turns warning / danger, overriding `variant`
+         *  (e.g. `{ warning: 70, danger: 90 }` for CPU or memory). */
+        thresholds?: { warning?: number; danger?: number };
         class?: string;
     }
 
@@ -22,11 +25,18 @@
         size = "md",
         showLabel = false,
         label,
+        thresholds,
         class: className = "",
     }: Props = $props();
 
     const percentage = $derived(Math.min(Math.max((value / max) * 100, 0), 100));
 
+    const tone = $derived.by((): ProgressVariant => {
+        if (thresholds?.danger !== undefined && percentage >= thresholds.danger) return "danger";
+        if (thresholds?.warning !== undefined && percentage >= thresholds.warning) return "warning";
+        return variant;
+    });
+
     const variantClasses: Record<ProgressVariant, string> = {
         default: "bg-primary",
         success: "bg-success-surface",
@@ -55,16 +65,19 @@
         </div>
     {/if}
 
-    <div class="w-full {sizeClasses[size]} overflow-hidden rounded-full bg-surface-sunken">
+    <div
+        class="w-full {sizeClasses[size]} overflow-hidden rounded-full bg-surface-sunken"
+        role="progressbar"
+        aria-label={label}
+        aria-valuenow={value}
+        aria-valuemin={0}
+        aria-valuemax={max}
+    >
         <div
             class="{sizeClasses[size]} {variantClasses[
-                variant
+                tone
             ]} rounded-full transition-[width] duration-200"
             style="width: {percentage}%"
-            role="progressbar"
-            aria-valuenow={value}
-            aria-valuemin={0}
-            aria-valuemax={max}
         ></div>
     </div>
 </div>

package/src/lib/components/Radio.svelte

@@ -2,12 +2,17 @@
 <!-- SPDX-License-Identifier: Apache-2.0 -->
 
 <script lang="ts">
+    import { getContext } from "svelte";
+    import { RADIO_GROUP_KEY, type RadioGroupContext } from "./radio-group.js";
+
     type RadioSize = "sm" | "md" | "lg";
 
     interface Props {
         value: string;
+        /** Selected value when used without a RadioGroup; inside one, the group owns it. */
         groupValue?: string;
-        name: string;
+        /** Defaults to the enclosing RadioGroup's name. */
+        name?: string;
         label: string;
         description?: string;
         disabled?: boolean;
@@ -32,7 +37,14 @@
         lg: { radio: "h-6 w-6", dot: "h-2.5 w-2.5", text: "text-base" },
     };
 
-    const isChecked = $derived(groupValue === value);
+    const group = getContext<RadioGroupContext | undefined>(RADIO_GROUP_KEY);
+
+    const isChecked = $derived((group ? group.value : groupValue) === value);
+
+    function select() {
+        if (group) group.value = value;
+        else groupValue = value;
+    }
 </script>
 
 <label
@@ -43,11 +55,11 @@
     <div class="relative flex shrink-0 items-center justify-center">
         <input
             type="radio"
-            {name}
+            name={name ?? group?.name}
             {value}
             {disabled}
             checked={isChecked}
-            onchange={() => (groupValue = value)}
+            onchange={select}
             class="
                 peer {sizeClasses[size].radio}
                 cursor-pointer appearance-none rounded-full

package/src/lib/components/RadioGroup.svelte

@@ -2,7 +2,8 @@
 <!-- SPDX-License-Identifier: Apache-2.0 -->
 
 <script lang="ts">
-    import type { Snippet } from "svelte";
+    import { setContext, type Snippet } from "svelte";
+    import { RADIO_GROUP_KEY, type RadioGroupContext } from "./radio-group.js";
 
     type Orientation = "horizontal" | "vertical";
 
@@ -19,7 +20,7 @@
 
     let {
         value = $bindable(""),
-        name: _name,
+        name,
         label,
         error,
         hint,
@@ -28,6 +29,18 @@
         class: className = "",
     }: Props = $props();
 
+    setContext<RadioGroupContext>(RADIO_GROUP_KEY, {
+        get name() {
+            return name;
+        },
+        get value() {
+            return value;
+        },
+        set value(next: string) {
+            value = next;
+        },
+    });
+
     const orientationClasses: Record<Orientation, string> = {
         horizontal: "flex flex-row flex-wrap gap-x-6 gap-y-3",
         vertical: "flex flex-col gap-3",