@runwisp/ui 1.4.0 → 1.5.1

package/src/lib/components/Kbd.svelte

@@ -2,23 +2,34 @@
 <!-- SPDX-License-Identifier: Apache-2.0 -->
 
 <script lang="ts">
+    type KbdSize = "xs" | "sm";
+    /** `faint` sits quietly inside an input; `console` rides dark terminal chrome and inherits its text color. */
+    type KbdTone = "default" | "faint" | "console";
+
     interface Props {
         keys: string | string[];
+        size?: KbdSize;
+        tone?: KbdTone;
         class?: string;
     }
 
-    let { keys, class: className = "" }: Props = $props();
+    let { keys, size = "sm", tone = "default", class: className = "" }: Props = $props();
 
     const keyList = $derived(Array.isArray(keys) ? keys : [keys]);
 
-    const kbdClasses = `
-        inline-flex items-center justify-center
-        min-w-[1.5em] px-1.5 py-0.5
-        text-xs font-mono font-medium
-        bg-surface-sunken text-on-surface-muted
-        border border-outline rounded-[3px]
-        shadow-sm
-    `;
+    const sizeClasses: Record<KbdSize, string> = {
+        xs: "px-1.5 text-2xs",
+        sm: "min-w-[1.5em] px-1.5 text-xs",
+    };
+
+    // Vertical padding lives with the tone: console keys sit inline in toolbar
+    // text and must not grow the row.
+    const toneClasses: Record<KbdTone, string> = {
+        default:
+            "py-0.5 font-medium bg-surface-sunken text-on-surface-muted border-outline shadow-sm",
+        faint: "py-0.5 font-medium bg-surface-raised text-on-surface-faint border-outline-faint shadow-sm",
+        console: "tracking-wide border-[var(--rw-con-gutter)]",
+    };
 </script>
 
 <span class="inline-flex items-center gap-1 {className}">
@@ -26,6 +37,10 @@
         {#if i > 0}
             <span class="text-xs text-on-surface-faint select-none">+</span>
         {/if}
-        <kbd class={kbdClasses}>{key}</kbd>
+        <kbd
+            class="inline-flex items-center justify-center rounded-[3px] border font-mono {sizeClasses[
+                size
+            ]} {toneClasses[tone]}">{key}</kbd
+        >
     {/each}
 </span>

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.
@@ -51,8 +50,6 @@
 
     let {
         fetchLogs,
-        chunkSize = 4096,
-        lineHeight = 20,
         class: className = "",
         highlightLine = null,
         fetchLineHistory,
@@ -63,6 +60,8 @@
         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).
@@ -149,7 +148,7 @@
     // lineTop / totalHeight / the scroll-position→line lookup stay O(1) or
     // O(log n) even though rows are no longer uniform. A plain Map is
     // deliberate: reactivity is driven by the `rowCountVersion` counter (bumped
-    // on any change), not by per-key subscriptions — iterating a SvelteMap of
+    // on any change), not by per-key subscriptions, iterating a SvelteMap of
     // tens of thousands of lines on every streamed line would be wasteful.
     // eslint-disable-next-line svelte/prefer-svelte-reactivity
     const rowCounts = new Map<number, number>();
@@ -176,7 +175,7 @@
     // Measures wrapped row counts for exactly the lines in [min, max] and bumps
     // rowCountVersion if anything changed. Called directly wherever new line
     // text lands in the cache (streamed append, on-demand backfill), each of
-    // which already knows the touched range from LogCache's merge result — so
+    // which already knows the touched range from LogCache's merge result, so
     // a single appended line costs O(1) here instead of re-walking the whole
     // (up to 50k-line) cache. Plain function, not an $effect: reads/writes
     // rowCounts and cache.lines by key, never by iterating the map.
@@ -202,7 +201,7 @@
     // or the available column width changes (wrap width affects every line's
     // row count, so there's no way to scope that to a range). Line
     // appends/backfills are measured incrementally at their call sites via
-    // measureRange instead — reading `cache.lines` in this effect's tracked
+    // measureRange instead, reading `cache.lines` in this effect's tracked
     // scope would resubscribe it to the SvelteMap's shared version signal and
     // re-run this full O(n) walk on every single appended line. `untrack`
     // (same pattern as the fetch/prune effects below) keeps that read out of
@@ -271,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;
@@ -345,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;
@@ -376,7 +372,7 @@
 
     // Width of the virtual scroll surface: wide enough for the longest line
     // seen so far, never narrower than the viewport (so short logs show no
-    // horizontal scrollbar). Wrapping pins the surface to the viewport — there
+    // horizontal scrollbar). Wrapping pins the surface to the viewport, there
     // is no horizontal axis to scroll.
     let surfaceWidth = $derived(
         wrap
@@ -410,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());
@@ -434,14 +429,14 @@
         }
     });
 
-    // Prune stale cache entries — separate from reads to avoid a read-write cycle on SvelteMap.
+    // Prune stale cache entries, separate from reads to avoid a read-write cycle on SvelteMap.
     $effect(() => {
         const vs = visibleStart;
         const ve = visibleEnd;
         untrack(() => cache.prune(vs, ve));
     });
 
-    let prevTailRows = 0; // plain variable — intentionally non-reactive
+    let prevTailRows = 0; // plain variable, intentionally non-reactive
 
     $effect(() => {
         // Track committed lines AND live overlay rows so an animating region at
@@ -498,7 +493,7 @@
             containerWidth = containerEl.clientWidth;
             // Resync the reactive scroll position with the DOM. The browser
             // clamps scrollTop when the viewport grows (e.g. maximizing the
-            // console), but no scroll event fires for that clamp — so without
+            // console), but no scroll event fires for that clamp, so without
             // this the virtualizer keeps a stale, too-large scrollTop and
             // renders an empty window until the first manual scroll.
             scrollTop = containerEl.scrollTop;
@@ -538,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;
@@ -651,7 +649,7 @@
                                     : 'text-[var(--rw-con-dim)] hover:text-aurora-400'}"
                                 title="{line.frameCount} earlier frame{line.frameCount === 1
                                     ? ''
-                                    : 's'} — click to {expandedLine === line.num
+                                    : 's'}, click to {expandedLine === line.num
                                     ? 'hide'
                                     : 'rewind'}"
                                 aria-label="Toggle frame history for line {line.num + 1}"
@@ -911,7 +909,7 @@
         border-top-color: color-mix(in srgb, var(--rw-term-warn) 30%, transparent);
     }
 
-    /* Subtle row hover on the fixed-dark console surface — a faint lift of the
+    /* Subtle row hover on the fixed-dark console surface, a faint lift of the
        console text colour, never a theme-flipping fill. */
     .log-line:hover {
         background-color: color-mix(in srgb, var(--rw-con-text) 4%, transparent);
@@ -941,7 +939,7 @@
 
     /* Blinking teal block caret shown while a run is actively streaming. One
        monospace cell wide so it reads as a terminal cursor parked at the write
-       position — inline after a still-appending line, or alone on the next. */
+       position, inline after a still-appending line, or alone on the next. */
     .stream-cursor {
         display: inline-block;
         width: 1ch;

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>