@runwisp/ui 1.5.1 → 1.7.0

package/src/lib/log-console/wrap-layout.svelte.ts

@@ -0,0 +1,188 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+import { untrack } from "svelte";
+import { visibleColumns } from "./ansi.js";
+import type { LogCache } from "./LogCache.svelte.js";
+
+/** Pixels per rendered row. */
+export const LINE_HEIGHT = 20;
+
+// Right padding on the text cell (pr-4); reserved when computing how many
+// columns a wrapped line can use.
+const TEXT_PADDING = 16;
+
+/**
+ * How many columns a wrapped line can use: 1 with wrapping off or before the
+ * font is measured. Many widths map to the same count, so a resize only costs
+ * a remeasure when this number changes.
+ */
+export function wrapColumns(
+    wrap: boolean,
+    width: number,
+    gutter: number,
+    charWidth: number,
+): number {
+    if (!wrap || charWidth <= 0) return 1;
+    return Math.max(1, Math.floor((width - gutter - TEXT_PADDING) / charWidth));
+}
+
+interface WrapLayoutInputs {
+    wrap: () => boolean;
+    /** Width of the scroll container in px. */
+    width: () => number;
+    gutterWidth: () => number;
+    /** Width of one monospace column in px. */
+    charWidth: () => number;
+}
+
+/**
+ * Row geometry for the virtualized log. With wrapping off every line is one
+ * row. With wrapping on, each line occupies as many rows as its text wraps
+ * into at the current column width, so positions come from a prefix sum of the
+ * per-line row counts instead of a multiplication. Construct during component
+ * init: it registers effects.
+ */
+export class WrapLayout {
+    // rowCounts remembers the wrapped row count for every line whose text has
+    // been observed; lines never loaded (pruned or out-of-window) count as 1.
+    // A plain Map is deliberate: reactivity is driven by the `#version` counter
+    // (bumped 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
+    readonly #rowCounts = new Map<number, number>();
+    #version = $state(0);
+    readonly #cache: LogCache;
+    readonly #inputs: WrapLayoutInputs;
+
+    // How many columns a wrapped line can use at the current width. Derived,
+    // so the full remeasure below depends on the column count alone: a resize
+    // that keeps the count (most pixels of a drag) doesn't re-walk every line.
+    readonly #availableColumns = $derived.by(() => {
+        const { wrap, width, gutterWidth, charWidth } = this.#inputs;
+        return wrapColumns(wrap(), width(), gutterWidth(), charWidth());
+    });
+
+    // prefixSums[i] is the total rows consumed by lines
+    // [firstAvailableLine, firstAvailableLine + i). Empty when wrapping is off
+    // (the fixed-height path ignores it).
+    readonly #prefixSums = $derived.by(() => {
+        const first = this.#cache.firstAvailableLine;
+        const total = this.#cache.totalLines;
+        // Subscribe to the counter that signals rowCounts changed.
+        // eslint-disable-next-line @typescript-eslint/no-meaningless-void-operator
+        void this.#version;
+        if (!this.#inputs.wrap()) return [];
+        const count = Math.max(0, total - first);
+        const sums = new Array<number>(count + 1);
+        sums[0] = 0;
+        let acc = 0;
+        for (let i = 0; i < count; i++) {
+            acc += this.#rowCounts.get(first + i) ?? 1;
+            sums[i + 1] = acc;
+        }
+        return sums;
+    });
+
+    constructor(cache: LogCache, inputs: WrapLayoutInputs) {
+        this.#cache = cache;
+        this.#inputs = inputs;
+
+        // Full remeasure of every loaded line, needed only when wrapping turns
+        // on or the available column width changes (wrap width affects every
+        // line's row count). Line appends/backfills are measured incrementally
+        // via measureRange; reading `cache.lines` in this effect's tracked scope
+        // would resubscribe it to the SvelteMap's shared version signal and
+        // re-run this O(n) walk on every appended line, hence `untrack`. Pruned
+        // lines keep their last-computed count so scroll geometry stays stable.
+        $effect(() => {
+            if (!this.#inputs.wrap()) return;
+            const cols = this.#availableColumns;
+            untrack(() => {
+                let changed = false;
+                for (const [num, text] of this.#cache.lines) {
+                    changed = this.#measure(num, text, cols) || changed;
+                }
+                if (changed) this.#version++;
+            });
+        });
+
+        // Drop wrap geometry when wrapping turns off so memory doesn't linger.
+        $effect(() => {
+            if (!this.#inputs.wrap()) this.#rowCounts.clear();
+        });
+    }
+
+    /**
+     * Measure the wrapped row counts of the lines in [min, max]. Called where
+     * new line text lands in the cache (streamed append, on-demand backfill),
+     * each of which knows the touched range, so one appended line costs O(1).
+     */
+    measureRange(min: number, max: number): void {
+        if (!this.#inputs.wrap() || min > max) return;
+        const cols = this.#availableColumns;
+        let changed = false;
+        for (let num = min; num <= max; num++) {
+            changed = this.#measure(num, this.#cache.lines.get(num), cols) || changed;
+        }
+        if (changed) this.#version++;
+    }
+
+    /** Rows a line occupies. */
+    rowCount(lineNum: number): number {
+        return this.#inputs.wrap() ? (this.#rowCounts.get(lineNum) ?? 1) : 1;
+    }
+
+    /** Rows consumed by the lines before `lineNum`. */
+    rowsAbove(lineNum: number): number {
+        const i = lineNum - this.#cache.firstAvailableLine;
+        if (!this.#inputs.wrap()) return i;
+        const sums = this.#prefixSums;
+        if (i <= 0) return 0;
+        if (i >= sums.length) return sums.at(-1) ?? 0;
+        return sums[i] ?? 0;
+    }
+
+    /** Rows consumed by every loaded line. */
+    get totalRows(): number {
+        const { firstAvailableLine, totalLines } = this.#cache;
+        if (!this.#inputs.wrap()) return totalLines - firstAvailableLine;
+        return this.#prefixSums.at(-1) ?? Math.max(0, totalLines - firstAvailableLine);
+    }
+
+    /** Offset from firstAvailableLine of the line whose rows cover `yRows`. */
+    offsetAt(yRows: number): number {
+        if (!this.#inputs.wrap()) return Math.floor(yRows);
+        const sums = this.#prefixSums;
+        if (sums.length === 0) return 0;
+        if (yRows <= (sums[0] ?? 0)) return 0;
+        const last = sums.length - 1;
+        if (yRows >= (sums[last] ?? Number.POSITIVE_INFINITY)) return last;
+        let lo = 0;
+        let hi = last;
+        while (lo < hi) {
+            const mid = (lo + hi + 1) >> 1;
+            if ((sums[mid] ?? Number.POSITIVE_INFINITY) <= yRows) lo = mid;
+            else hi = mid - 1;
+        }
+        return lo;
+    }
+
+    /** Offset of the first line starting at or past `limitRows`, scanning on from `yRows`. */
+    offsetEnd(yRows: number, limitRows: number): number {
+        if (!this.#inputs.wrap()) return Math.ceil(limitRows);
+        const sums = this.#prefixSums;
+        const count = sums.length - 1;
+        let end = this.offsetAt(yRows);
+        while (end < count && (sums[end] ?? Number.POSITIVE_INFINITY) < limitRows) end++;
+        return Math.max(0, end);
+    }
+
+    #measure(num: number, text: string | undefined, cols: number): boolean {
+        const rows = text && cols > 1 ? Math.max(1, Math.ceil(visibleColumns(text) / cols)) : 1;
+        if (this.#rowCounts.get(num) === rows) return false;
+        this.#rowCounts.set(num, rows);
+        return true;
+    }
+}

package/src/lib/utils/format.test.ts

@@ -8,6 +8,9 @@ import {
     formatClockTime,
     formatDayMonth,
     formatDuration,
+    formatDurationExact,
+    parseDuration,
+    formatRelativeCompact,
     formatRelativeTime,
     formatRelativeTimeWithAbsolute,
     formatTimeHM,
@@ -122,11 +125,84 @@ describe("formatRelativeTimeWithAbsolute", () => {
 });
 
 describe("formatRelativeTime", () => {
+    const now = new Date("2024-01-10T12:00:00Z");
+    const at = (seconds: number): Date => new Date(now.getTime() + seconds * 1000);
+
     it("advances as the supplied now advances", () => {
         const date = new Date("2024-01-01T12:00:00Z");
         expect(formatRelativeTime(date, new Date("2024-01-01T14:00:00Z"))).toBe("2 hours ago");
         expect(formatRelativeTime(date, new Date("2024-01-01T15:00:00Z"))).toBe("3 hours ago");
     });
+
+    it("always shows a number by default", () => {
+        expect(formatRelativeTime(at(0), now)).toBe("in 0 seconds");
+        expect(formatRelativeTime(at(-86_400), now)).toBe("1 day ago");
+        expect(formatRelativeTime(at(86_400), now)).toBe("in 1 day");
+    });
+
+    it.each([
+        [0, "now"],
+        [-16, "16 seconds ago"],
+        [16, "in 16 seconds"],
+        [-60, "1 minute ago"],
+        [-5 * 60, "5 minutes ago"],
+        [-3600, "1 hour ago"],
+        [2 * 3600, "in 2 hours"],
+        [-86_400, "yesterday"],
+        [86_400, "tomorrow"],
+        [-3 * 86_400, "3 days ago"],
+    ])("numeric auto: %is from now reads %s", (seconds, expected) => {
+        expect(formatRelativeTime(at(seconds), now, { numeric: "auto" })).toBe(expected);
+    });
+
+    it("accepts a timestamp, an ISO string or a Date", () => {
+        const date = at(-120);
+        expect(formatRelativeTime(date.getTime(), now)).toBe("2 minutes ago");
+        expect(formatRelativeTime(date.toISOString(), now)).toBe("2 minutes ago");
+        expect(formatRelativeTime(date, now)).toBe("2 minutes ago");
+    });
+
+    it("throws on an invalid date", () => {
+        expect(() => formatRelativeTime("not a date", now)).toThrow(RangeError);
+        expect(() => formatRelativeTime("not a date", now, { numeric: "auto" })).toThrow(
+            RangeError,
+        );
+    });
+});
+
+describe("formatRelativeCompact", () => {
+    const now = new Date("2024-01-10T12:00:00Z");
+    const ago = (seconds: number): number => now.getTime() - seconds * 1000;
+
+    it.each([
+        [0, "0s"],
+        [16.9, "16s"],
+        [59, "59s"],
+        [60, "1m"],
+        [3 * 60 + 59, "3m"],
+        [59 * 60, "59m"],
+        [3600, "1h"],
+        [23 * 3600 + 3599, "23h"],
+        [86_400, "1d"],
+        [45 * 86_400, "45d"],
+        [400 * 86_400, "400d"],
+    ])("%is ago reads %s", (seconds, expected) => {
+        expect(formatRelativeCompact(ago(seconds), now)).toBe(expected);
+    });
+
+    it("clamps a future date to 0s", () => {
+        expect(formatRelativeCompact(ago(-90), now)).toBe("0s");
+    });
+
+    it("accepts an ISO string or a Date", () => {
+        expect(formatRelativeCompact(new Date(ago(180)).toISOString(), now)).toBe("3m");
+        expect(formatRelativeCompact(new Date(ago(180)), now)).toBe("3m");
+    });
+
+    it("does not guard an invalid date", () => {
+        // Same as the station helper it replaces; callers pass server timestamps.
+        expect(formatRelativeCompact("not a date", now)).toBe("NaNd");
+    });
 });
 
 describe("formatClockTime", () => {
@@ -156,3 +232,49 @@ describe("formatDayMonth", () => {
         expect(r).not.toContain("2026");
     });
 });
+
+describe("parseDuration", () => {
+    it("reads the placeholder's own format", () => {
+        expect(parseDuration("5m 30s")).toBe(330_000);
+    });
+
+    it("reads compact, fractional and sub-second forms", () => {
+        expect(parseDuration("1h30m")).toBe(5_400_000);
+        expect(parseDuration("1.5h")).toBe(5_400_000);
+        expect(parseDuration("250ms")).toBe(250);
+        expect(parseDuration("2d")).toBe(172_800_000);
+    });
+
+    it("reads what the ms package did", () => {
+        expect(parseDuration("500")).toBe(500);
+        expect(parseDuration("1w")).toBe(604_800_000);
+        expect(parseDuration("1y")).toBe(31_557_600_000);
+        expect(parseDuration("2 hours")).toBe(7_200_000);
+        expect(parseDuration("30 sec")).toBe(30_000);
+        expect(parseDuration("5 minutes")).toBe(300_000);
+        expect(parseDuration("5M")).toBe(300_000);
+        expect(parseDuration(".5h")).toBe(1_800_000);
+        expect(parseDuration(" 1 Hour 30 mins ")).toBe(5_400_000);
+    });
+
+    it("rejects text that isn't number+unit throughout", () => {
+        expect(parseDuration("")).toBeNull();
+        expect(parseDuration("5x")).toBeNull();
+        expect(parseDuration("5m abc")).toBeNull();
+        expect(parseDuration("5 30s")).toBeNull();
+        expect(parseDuration("1.5.5")).toBeNull();
+        expect(parseDuration("9".repeat(101))).toBeNull();
+    });
+});
+
+describe("formatDurationExact", () => {
+    it("keeps every non-zero unit instead of rounding", () => {
+        expect(formatDurationExact(330_000)).toBe("5m 30s");
+        expect(formatDurationExact(3_930_000)).toBe("1h 5m 30s");
+        expect(formatDurationExact(0)).toBe("0ms");
+    });
+
+    it("round-trips through parseDuration", () => {
+        expect(parseDuration(formatDurationExact(90_061_001))).toBe(90_061_001);
+    });
+});

package/src/lib/utils/format.ts

@@ -13,18 +13,48 @@ const RELATIVE_DIVISIONS: [amount: number, unit: Intl.RelativeTimeFormatUnit][]
     [Number.POSITIVE_INFINITY, "years"],
 ];
 
-const relativeTime = new Intl.RelativeTimeFormat(undefined, { numeric: "always" });
+const relativeTime = {
+    always: new Intl.RelativeTimeFormat(undefined, { numeric: "always" }),
+    auto: new Intl.RelativeTimeFormat(undefined, { numeric: "auto" }),
+};
+
+export interface RelativeTimeOptions {
+    /** `"auto"` words the near units: "now", "yesterday", "tomorrow", "last week". Default `"always"`. */
+    numeric?: Intl.RelativeTimeFormatNumeric;
+}
 
 /** "N units ago" / "in N units" for `date` relative to `now`. */
-export function formatRelativeTime(date: string | Date, now: Date = new Date()): string {
+export function formatRelativeTime(
+    date: string | number | Date,
+    now: Date = new Date(),
+    { numeric = "always" }: RelativeTimeOptions = {},
+): string {
+    const format = relativeTime[numeric];
     let delta = (new Date(date).getTime() - now.getTime()) / 1000;
     for (const [amount, unit] of RELATIVE_DIVISIONS) {
         if (Math.abs(delta) < amount) {
-            return relativeTime.format(Math.round(delta), unit);
+            return format.format(Math.round(delta), unit);
         }
         delta /= amount;
     }
-    return relativeTime.format(Math.round(delta), "years");
+    return format.format(Math.round(delta), "years");
+}
+
+/**
+ * Compact age of a past `date` for dense rows and live labels: "45s", "5m",
+ * "3h", "2d". Each unit floors; a future date reads "0s".
+ */
+export function formatRelativeCompact(
+    date: string | number | Date,
+    now: Date = new Date(),
+): string {
+    const seconds = Math.max(0, Math.floor((now.getTime() - new Date(date).getTime()) / 1000));
+    if (seconds < 60) return `${String(seconds)}s`;
+    const minutes = Math.floor(seconds / 60);
+    if (minutes < 60) return `${String(minutes)}m`;
+    const hours = Math.floor(minutes / 60);
+    if (hours < 24) return `${String(hours)}h`;
+    return `${String(Math.floor(hours / 24))}d`;
 }
 
 /** A locale date/time formatter for one fixed option set, built once. */
@@ -108,3 +138,66 @@ export function formatDuration(ms: number): string {
     const remM = m % 60;
     return remM > 0 ? String(h) + "h " + String(remM) + "m" : String(h) + "h";
 }
+
+// Largest first, so formatDurationExact can peel units off greedily.
+const DURATION_UNITS: [unit: string, ms: number][] = [
+    ["d", 86_400_000],
+    ["h", 3_600_000],
+    ["m", 60_000],
+    ["s", 1000],
+    ["ms", 1],
+];
+
+// Every unit name parseDuration takes, in ms. The `ms` package's set.
+const UNIT_ALIASES: [ms: number, names: string[]][] = [
+    [1, ["ms", "msec", "msecs", "millisecond", "milliseconds"]],
+    [1000, ["s", "sec", "secs", "second", "seconds"]],
+    [60_000, ["m", "min", "mins", "minute", "minutes"]],
+    [3_600_000, ["h", "hr", "hrs", "hour", "hours"]],
+    [86_400_000, ["d", "day", "days"]],
+    [604_800_000, ["w", "week", "weeks"]],
+    [31_557_600_000, ["y", "yr", "yrs", "year", "years"]],
+];
+const UNIT_MS = new Map(UNIT_ALIASES.flatMap(([size, names]) => names.map((n) => [n, size])));
+
+/**
+ * parseDuration reads a duration into milliseconds. It takes what the `ms`
+ * package does ("500" as milliseconds, ".5h", "2 hours", "30 sec", "1w", "1y",
+ * any case) plus compound forms: "5m 30s", "1h30m". Returns null when any part
+ * isn't a number with a unit (only a lone number may go without one).
+ */
+export function parseDuration(text: string): number | null {
+    const s = text.trim().toLowerCase();
+    // Bounded like `ms`, which also keeps the number pattern's backtracking cheap.
+    if (!s || s.length > 100) return null;
+    const segment = /(-?\d*\.?\d+)\s*([a-z]*)\s*/y;
+    let total = 0;
+    let segments = 0;
+    let bare = false;
+    while (segment.lastIndex < s.length) {
+        const match = segment.exec(s);
+        if (!match) return null;
+        const [, amount = "", unit = ""] = match;
+        const size = unit ? UNIT_MS.get(unit) : 1;
+        if (size === undefined) return null;
+        bare ||= !unit;
+        total += Number(amount) * size;
+        segments++;
+    }
+    if (bare && segments > 1) return null;
+    return Math.round(total);
+}
+
+/** formatDurationExact renders milliseconds as "1h 5m 30s", keeping every non-zero unit. */
+export function formatDurationExact(ms: number): string {
+    const parts: string[] = [];
+    let rest = Math.round(ms);
+    for (const [unit, size] of DURATION_UNITS) {
+        const amount = Math.floor(rest / size);
+        if (amount > 0) {
+            parts.push(String(amount) + unit);
+            rest -= amount * size;
+        }
+    }
+    return parts.length > 0 ? parts.join(" ") : "0ms";
+}

package/src/lib/utils/typing-target.ts

@@ -0,0 +1,10 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+/** True when a keyboard event came from a field the user is typing into. */
+export function isTypingTarget(target: EventTarget | null): boolean {
+    return (
+        target instanceof HTMLElement &&
+        (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable)
+    );
+}

package/src/stories/Accordion.stories.svelte

@@ -3,11 +3,32 @@
 
 <script module>
     import { defineMeta } from "@storybook/addon-svelte-csf";
-    import { LifeBuoy, Trash } from "@lucide/svelte";
+    import { LifeBuoy, Pencil, Trash } from "@lucide/svelte";
     import Accordion from "$lib/components/Accordion.svelte";
     import AccordionItem from "$lib/components/AccordionItem.svelte";
     import Toggle from "$lib/components/Toggle.svelte";
 
+    const blocks = [
+        {
+            label: "Node.js 22",
+            enabled: true,
+            frameClass: "border-outline bg-surface-raised",
+            run: "RUN apk add --no-cache nodejs npm",
+        },
+        {
+            label: "Python 3.12",
+            enabled: false,
+            frameClass: "border-outline-faint bg-surface",
+            run: "RUN apk add --no-cache python3",
+        },
+        {
+            label: "Go 1.27 (stale)",
+            enabled: true,
+            frameClass: "border-warning-soft-border bg-warning-soft/30",
+            run: "RUN apk add --no-cache go",
+        },
+    ];
+
     const { Story } = defineMeta({
         title: "Navigation/Accordion",
         component: Accordion,
@@ -59,3 +80,41 @@
         <pre class="font-mono text-xs">RUN apk add --no-cache nodejs npm</pre>
     </AccordionItem>
 </Story>
+
+<!-- `leading` sits before the title and never toggles the panel; `frameClass`
+     tints the frame by state. -->
+<Story name="Framed with leading control and tint" asChild>
+    <div class="flex max-w-lg flex-col gap-2">
+        {#each blocks as block (block.label)}
+            <AccordionItem
+                variant="framed"
+                frameClass={block.frameClass}
+                class={block.enabled ? "" : "opacity-60"}
+            >
+                {#snippet leading()}
+                    <Toggle checked={block.enabled} size="sm" />
+                {/snippet}
+                {#snippet title()}
+                    <span class="block truncate">{block.label}</span>
+                {/snippet}
+                {#snippet actions()}
+                    <button
+                        type="button"
+                        aria-label="Edit"
+                        class="rounded-[3px] p-1 text-on-surface-faint hover:bg-surface-sunken hover:text-on-surface"
+                    >
+                        <Pencil size={14} />
+                    </button>
+                    <button
+                        type="button"
+                        aria-label="Remove"
+                        class="rounded-[3px] p-1 text-on-surface-faint hover:bg-danger-soft hover:text-danger-surface"
+                    >
+                        <Trash size={14} />
+                    </button>
+                {/snippet}
+                <pre class="font-mono text-xs">{block.run}</pre>
+            </AccordionItem>
+        {/each}
+    </div>
+</Story>

package/src/stories/CodeBlock.stories.svelte

@@ -7,6 +7,8 @@
 
     const helloTask = '[tasks.hello]\ncron = "*/5 * * * *"\nrun  = "echo hello"';
     const backupTask = '[tasks.backup]\ncron = "0 3 * * *"\nkeep_runs = 60';
+    const longLine =
+        "export RUNWISP_STATION_TOKEN=rw_live_8f2c1d9e4b7a6053c1e2f3a4b5c6d7e8f9a0b1c2d3e4f5a6b7c8d9e0f1a2b3c4";
 
     const { Story } = defineMeta({
         title: "Data Display/CodeBlock",
@@ -40,6 +42,17 @@
     <CodeBlock variant="surface" size="sm" copyable={false} code={helloTask} />
 </Story>
 
+<!-- A line wider than the block scrolls without running under the copy button. -->
+<Story name="Long line" asChild>
+    <div class="flex max-w-md flex-col gap-3">
+        <CodeBlock code={longLine} />
+        <CodeBlock code={longLine} size="sm" prompt="$" />
+        <CodeBlock code={longLine} variant="surface" />
+        <CodeBlock code={longLine} variant="surface" size="sm" />
+        <CodeBlock code="runwisp station" size="sm" />
+    </div>
+</Story>
+
 <!-- Rich children render the markup; `code` keeps the copied text plain. -->
 <Story name="Highlighted children" asChild>
     <!-- No whitespace between the line spans: inside <pre> it would render as blank lines. -->

package/src/stories/Link.stories.svelte

@@ -10,7 +10,10 @@
         component: Link,
         tags: ["autodocs"],
         argTypes: {
-            variant: { control: "select", options: ["default", "muted", "primary", "danger"] },
+            variant: {
+                control: "select",
+                options: ["default", "muted", "primary", "danger", "unstyled"],
+            },
             underline: { control: "select", options: ["always", "hover", "none"] },
         },
     });
@@ -36,3 +39,24 @@
         Task configuration docs →
     </Link>
 </Story>
+
+<!-- `unstyled` adds nothing beyond `class`: the row brings its own layout and colours. -->
+<Story name="Unstyled nav row" asChild>
+    <nav class="w-64 space-y-0.5">
+        <Link
+            href="#tasks"
+            variant="unstyled"
+            aria-current="page"
+            class="flex items-center gap-3 rounded-sm bg-primary-soft px-3 py-2 font-mono text-sm text-primary-soft-text"
+        >
+            Tasks
+        </Link>
+        <Link
+            href="#runners"
+            variant="unstyled"
+            class="flex items-center gap-3 rounded-sm px-3 py-2 font-mono text-sm text-on-surface-muted hover:bg-surface-sunken hover:text-primary"
+        >
+            Runners
+        </Link>
+    </nav>
+</Story>

package/src/stories/Tabs.stories.svelte

@@ -32,6 +32,14 @@
         { id: "settings", label: "Settings", icon: Settings },
     ];
 
+    const deployTabs = [
+        { id: "binary", label: "Linux binary" },
+        { id: "docker", label: "Docker run" },
+        { id: "compose", label: "Docker Compose" },
+        { id: "kubernetes", label: "Kubernetes manifest" },
+        { id: "systemd", label: "systemd unit" },
+    ];
+
     const disabledTabs = [
         { id: "active", label: "Active" },
         { id: "completed", label: "Completed" },
@@ -105,3 +113,12 @@
         {/snippet}
     </Tabs>
 </Story>
+
+<!-- `scrollable` keeps every label on one line and scrolls the bar sideways. -->
+<Story name="Scrollable" asChild>
+    <div class="flex max-w-xs flex-col gap-4">
+        <Tabs tabs={deployTabs} variant="enclosed" scrollable />
+        <Tabs tabs={deployTabs} variant="pills" scrollable />
+        <Tabs tabs={deployTabs} variant="underline" scrollable />
+    </div>
+</Story>