@runwisp/ui 1.0.1 → 1.2.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.0.1",
+  "version": "1.2.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.0.1",
-    "@runwisp/typescript-config": "1.0.1",
+    "@runwisp/eslint-config": "1.2.0",
+    "@runwisp/typescript-config": "1.2.0",
     "@storybook/addon-a11y": "^10.5.5",
     "@storybook/addon-docs": "^10.5.5",
     "@storybook/addon-svelte-csf": "^5.1.2",
@@ -93,7 +93,7 @@
     "@fontsource-variable/geist-mono": "^5.3.0",
     "@fontsource/tasa-orbiter": "^5.3.0",
     "@lucide/svelte": "^1.28.0",
-    "@runwisp/common": "1.0.1",
+    "@runwisp/common": "1.2.0",
     "@tanstack/svelte-virtual": "^3.13.35",
     "ansi-to-html": "^0.7.2",
     "cron-parser": "^5.7.0",

package/src/astro/SiteFooter.astro

@@ -2,46 +2,164 @@
 // SPDX-FileCopyrightText: PoppyCake, s.r.o.
 // SPDX-License-Identifier: Apache-2.0
 
+// Brand footer shared by runwisp.com and docs.runwisp.com. Plain scoped CSS on
+// --rw-* tokens (no Tailwind) so it renders the same under Starlight, which
+// only loads theme-tokens.css.
+import logoSvg from "../lib/assets/runwisp-logo.svg?raw";
+
+export interface FooterLink {
+    label: string;
+    href: string;
+    external?: boolean;
+}
+
+export interface FooterColumn {
+    title: string;
+    links: FooterLink[];
+}
+
 interface Props {
-    tagline?: string;
+    columns: FooterColumn[];
+    homeHref?: string;
+    wordmark?: string;
     class?: string;
 }
 
-const { tagline = "Built by operators, for operators.", class: className = "" } =
-    Astro.props;
-
-const hasTeaser = Astro.slots.has("teaser");
-const hasColumns = Astro.slots.has("columns");
-const hasBadges = Astro.slots.has("badges");
+const { columns, homeHref = "/", wordmark = "RunWisp", class: className = "" } = Astro.props;
 ---
 
-<footer class:list={["bg-surface-sunken border-t border-outline", className]}>
-    <div class="mx-auto max-w-6xl px-6 py-12">
-        {
-            hasTeaser && (
-                <div class="bg-surface-raised mb-10 rounded-[4px] border border-outline p-6 shadow-sm">
-                    <slot name="teaser" />
-                </div>
-            )
-        }
-        {
-            hasColumns && (
-                <div class="grid gap-8 font-mono sm:grid-cols-2 lg:grid-cols-4 [&_a]:block [&_a]:text-on-surface-muted [&_a]:[&_a:hover]:text-primary [&_h4]:mb-3 [&_h4]:text-xs [&_h4]:font-medium [&_h4]:uppercase [&_h4]:tracking-[0.16em] [&_h4]:text-on-surface-faint [&_h4]:before:mr-1.5 [&_h4]:before:content-['──']">
-                    <slot name="columns" />
-                </div>
-            )
-        }
-        <div
-            class="text-on-surface-muted mt-10 flex flex-col items-start justify-between gap-4 border-t border-outline-faint pt-6 font-mono text-xs sm:flex-row sm:items-center"
-        >
-            <p>{tagline}</p>
+<footer class:list={["rw-ft", className]}>
+    <div class="rw-ft-wrap">
+        <div class="rw-ft-grid" style={`--rw-ft-cols: ${columns.length}`}>
+            <div class="rw-ft-brand">
+                <a class="rw-ft-mark" href={homeHref}
+                    ><span class="rw-ft-logo" aria-hidden="true" set:html={logoSvg} />
+                    {wordmark}</a
+                >
+                <slot />
+            </div>
             {
-                hasBadges && (
-                    <div class="flex flex-wrap items-center gap-3">
-                        <slot name="badges" />
+                columns.map((column) => (
+                    <div class="rw-ft-col">
+                        <h4>{column.title}</h4>
+                        {column.links.map((link) => (
+                            <a
+                                href={link.href}
+                                target={link.external ? "_blank" : undefined}
+                                rel={link.external ? "noopener noreferrer" : undefined}
+                            >
+                                {link.label}
+                            </a>
+                        ))}
                     </div>
-                )
+                ))
             }
         </div>
+        {
+            Astro.slots.has("bottom") && (
+                <div class="rw-ft-bottom">
+                    <slot name="bottom" />
+                </div>
+            )
+        }
     </div>
 </footer>
+
+<style>
+    .rw-ft {
+        border-top: 1px solid var(--rw-outline);
+        margin-top: 30px;
+        padding: 52px 0 0;
+        color: var(--rw-on-surface);
+        font-family: var(--rw-font-sans);
+        /* Container, not viewport: under Starlight the footer sits in the
+         * content column, not the full page width. */
+        container-type: inline-size;
+    }
+    /* Slotted content (blurb, bottom bar) doesn't carry this component's scope,
+     * so these reach it via :global, wrapped in :where() to stay at element
+     * specificity: any consumer class (e.g. a teaser paragraph) wins. */
+    :global(:where(.rw-ft) a) {
+        color: inherit;
+        text-decoration: none;
+    }
+    .rw-ft-wrap {
+        max-width: 1120px;
+        margin: 0 auto;
+        padding: 0 clamp(20px, 5vw, 40px);
+    }
+    .rw-ft-grid {
+        display: grid;
+        grid-template-columns: 1.6fr repeat(var(--rw-ft-cols), 1fr);
+        gap: 30px;
+    }
+    @container (max-width: 780px) {
+        .rw-ft-grid {
+            grid-template-columns: 1fr 1fr;
+        }
+    }
+    .rw-ft-mark {
+        display: flex;
+        align-items: center;
+        gap: 9px;
+        margin-bottom: 14px;
+        font-weight: 700;
+        font-size: 18px;
+        letter-spacing: -0.02em;
+    }
+    .rw-ft-logo {
+        display: inline-flex;
+        width: 21px;
+        height: 21px;
+        color: var(--rw-primary);
+    }
+    .rw-ft-logo :global(svg) {
+        width: 100%;
+        height: 100%;
+    }
+    :global(:where(.rw-ft-brand) p) {
+        margin: 0;
+        color: var(--rw-on-surface-muted);
+        font-size: 13.5px;
+        max-width: 30ch;
+    }
+    .rw-ft-col h4 {
+        margin: 0 0 14px;
+        font-family: var(--rw-font-mono);
+        font-size: 11px;
+        font-weight: 500;
+        letter-spacing: 0.1em;
+        text-transform: lowercase;
+        color: var(--rw-on-surface-faint);
+    }
+    .rw-ft-col h4::before {
+        content: "── ";
+    }
+    .rw-ft-col a {
+        display: block;
+        padding: 4px 0;
+        font-family: var(--rw-font-mono);
+        font-size: 13.5px;
+        color: var(--rw-on-surface-muted);
+        transition: color 0.15s;
+    }
+    .rw-ft-col a:hover,
+    :global(:where(.rw-ft) a:hover) {
+        color: var(--rw-primary);
+    }
+    .rw-ft-bottom {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px 14px;
+        align-items: center;
+        margin-top: 44px;
+        padding: 16px 0;
+        border-top: 1px solid var(--rw-outline);
+        font-family: var(--rw-font-mono);
+        font-size: 12px;
+        color: var(--rw-on-surface-faint);
+    }
+    .rw-ft-bottom :global(.sep) {
+        opacity: 0.4;
+    }
+</style>

package/src/lib/actions/row-motion.test.ts

@@ -0,0 +1,115 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { arrival, leave, prefersReducedMotion } from "./row-motion.js";
+
+const LEAVE_MS = 160;
+const CLOSE_GAP_DELAY_MS = 110;
+const SHIFT_MS = 200;
+const SHIFT_DELAY = "--rw-shift-delay";
+
+// The helpers read the reduced-motion preference off `matchMedia` and write to
+// the narrow element slices they declare, so a stubbed global and plain objects
+// stand in for the browser (this repo's vitest env has no jsdom).
+function setReducedMotion(reduce: boolean): void {
+    vi.stubGlobal("matchMedia", (media: string) => ({ media, matches: reduce }));
+}
+
+/** A list element recording the custom properties a leaving row sets on it. */
+function listNode() {
+    const props = new Map<string, string>();
+    return {
+        props,
+        style: {
+            setProperty: (name: string, value: string | null) => {
+                props.set(name, value ?? "");
+            },
+            removeProperty: (name: string) => {
+                const previous = props.get(name) ?? "";
+                props.delete(name);
+                return previous;
+            },
+        },
+    };
+}
+
+describe("prefersReducedMotion", () => {
+    afterEach(() => vi.unstubAllGlobals());
+
+    it("reports what the reduced-motion media query matches", () => {
+        setReducedMotion(true);
+        expect(prefersReducedMotion()).toBe(true);
+        setReducedMotion(false);
+        expect(prefersReducedMotion()).toBe(false);
+    });
+});
+
+describe("arrival", () => {
+    it("plays the arrival cue on a row mounting for a fresh run", () => {
+        const added: string[] = [];
+        arrival({ classList: { add: (token: string) => added.push(token) } }, true);
+        expect(added).toEqual(["run-arrive"]);
+    });
+
+    it("leaves a row that mounted for an already-known run alone", () => {
+        const added: string[] = [];
+        arrival({ classList: { add: (token: string) => added.push(token) } }, false);
+        expect(added).toEqual([]);
+    });
+});
+
+describe("leave", () => {
+    beforeEach(() => {
+        vi.useFakeTimers();
+        setReducedMotion(false);
+    });
+    afterEach(() => {
+        vi.useRealTimers();
+        vi.unstubAllGlobals();
+    });
+
+    it("fades out a run removed live and delays the rows closing its gap", () => {
+        const list = listNode();
+        const config = leave({ dataset: { runId: "run-1" }, parentElement: list }, () => true);
+
+        expect(config.duration).toBe(LEAVE_MS);
+        expect(list.props.get(SHIFT_DELAY)).toBe("110ms");
+
+        // Halfway through: half faded, halfway back to its resting offset.
+        expect(config.css?.(0.5, 0.5)).toBe("opacity: 0.5; translate: -6px 0");
+
+        // The delay is a one-shot for this removal, not a lasting list style.
+        vi.advanceTimersByTime(CLOSE_GAP_DELAY_MS + SHIFT_MS);
+        expect(list.props.has(SHIFT_DELAY)).toBe(false);
+    });
+
+    it("still animates a row with no list element around it", () => {
+        const config = leave({ dataset: { runId: "run-1" }, parentElement: null }, () => true);
+        expect(config.duration).toBe(LEAVE_MS);
+    });
+
+    it("goes instantly when the run left for any reason other than a live removal", () => {
+        const list = listNode();
+        const scrolledOut = leave(
+            { dataset: { runId: "run-1" }, parentElement: list },
+            () => false,
+        );
+        const noTracker = leave({ dataset: { runId: "run-1" }, parentElement: list }, undefined);
+        const noRunId = leave({ dataset: {}, parentElement: list }, () => true);
+
+        expect(scrolledOut.duration).toBe(0);
+        expect(noTracker.duration).toBe(0);
+        expect(noRunId.duration).toBe(0);
+        expect(list.props.has(SHIFT_DELAY)).toBe(false);
+    });
+
+    it("goes instantly when the operator prefers reduced motion", () => {
+        setReducedMotion(true);
+        const list = listNode();
+        const config = leave({ dataset: { runId: "run-1" }, parentElement: list }, () => true);
+
+        expect(config.duration).toBe(0);
+        expect(list.props.has(SHIFT_DELAY)).toBe(false);
+    });
+});

package/src/lib/actions/row-motion.ts

@@ -0,0 +1,75 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+import { cubicOut } from "svelte/easing";
+import { flip, type AnimationConfig } from "svelte/animate";
+import type { TransitionConfig } from "svelte/transition";
+
+const LEAVE_MS = 160;
+// Rows closing the gap wait for most of the fade, so they don't slide over a
+// row that is still visible.
+const CLOSE_GAP_DELAY_MS = 110;
+const SHIFT_MS = 200;
+
+// The slices of a row (and of the list it sits in) these helpers touch. Every
+// real row element satisfies them; naming just the members used keeps the
+// helpers unit-testable without a browser DOM.
+type ArrivingRow = { readonly classList: Pick<DOMTokenList, "add"> };
+type LeavingRow = {
+    readonly dataset: DOMStringMap;
+    readonly parentElement: { readonly style: ListStyle } | null;
+};
+type ListStyle = Pick<CSSStyleDeclaration, "setProperty" | "removeProperty">;
+
+export function prefersReducedMotion(): boolean {
+    return matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
+/**
+ * Plays the live-arrival cue (`.run-arrive` in theme.css) on a list row that
+ * mounts for a freshly arrived run. Mount-only, so the run's next re-render
+ * (pending → running) can't cut the animation short.
+ */
+export function arrival(node: ArrivingRow, fresh: boolean) {
+    if (fresh) node.classList.add("run-arrive");
+}
+
+/**
+ * Outro for a run row (`out:leave={motion?.removed}`): fades and sweeps the
+ * row out when `removed` says its run (read from `data-run-id`) left live.
+ * Rows leaving for any other reason (scrolled out of the virtual window, a
+ * filter change) go instantly. Also sets `--rw-shift-delay` on the list so
+ * rows sliding up with a CSS transition start after the fade.
+ */
+export function leave(
+    node: LeavingRow,
+    removed: ((runId: string) => boolean) | undefined,
+): TransitionConfig {
+    const runId = node.dataset.runId;
+    if (!runId || removed?.(runId) !== true || prefersReducedMotion()) return { duration: 0 };
+    const list = node.parentElement;
+    if (list) {
+        list.style.setProperty("--rw-shift-delay", `${String(CLOSE_GAP_DELAY_MS)}ms`);
+        setTimeout(
+            () => list.style.removeProperty("--rw-shift-delay"),
+            CLOSE_GAP_DELAY_MS + SHIFT_MS,
+        );
+    }
+    return {
+        duration: LEAVE_MS,
+        easing: cubicOut,
+        css: (t) => `opacity: ${String(t)}; translate: ${String((1 - t) * -12)}px 0`,
+    };
+}
+
+/**
+ * `animate:` for plain (non-virtual) run lists: flip, except rows moving up to
+ * close a removed row's gap wait for its fade.
+ */
+export function shift(node: Element, rects: { from: DOMRect; to: DOMRect }): AnimationConfig {
+    if (prefersReducedMotion()) return { duration: 0 };
+    return flip(node, rects, {
+        duration: SHIFT_MS,
+        delay: rects.to.top < rects.from.top ? CLOSE_GAP_DELAY_MS : 0,
+    });
+}

package/src/lib/components/AlertDialog.svelte

@@ -2,21 +2,28 @@
 <!-- SPDX-License-Identifier: Apache-2.0 -->
 
 <script lang="ts">
+    import type { Component, Snippet } from "svelte";
     import Modal from "./Modal.svelte";
     import Button from "./Button.svelte";
-
-    type AlertVariant = "danger" | "warning" | "info";
+    import type { ButtonVariant } from "./button-styles.js";
 
     interface Props {
         open?: boolean;
         title: string;
         description?: string | undefined;
+        size?: "sm" | "md" | "lg" | "xl" | "full";
         confirmLabel?: string;
         cancelLabel?: string;
-        variant?: AlertVariant;
-        onConfirm?: () => void;
+        confirmVariant?: ButtonVariant;
+        confirmDisabled?: boolean;
+        confirmIcon?: Component<{ size?: number }>;
+        /** May be async: the dialog shows a spinner and closes once it resolves.
+         *  If it throws, the dialog stays open so the caller can surface the error. */
+        onConfirm?: () => void | Promise<void>;
         onCancel?: () => void;
-        loading?: boolean;
+        children?: Snippet;
+        /** Replaces the default Cancel / Confirm buttons. */
+        footer?: Snippet;
         class?: string;
     }
 
@@ -24,40 +31,71 @@
         open = $bindable(false),
         title,
         description,
+        size = "sm",
         confirmLabel = "Confirm",
         cancelLabel = "Cancel",
-        variant = "danger",
+        confirmVariant = "danger",
+        confirmDisabled = false,
+        confirmIcon: ConfirmIcon,
         onConfirm,
         onCancel,
-        loading = false,
+        children,
+        footer: footerProp,
         class: className = "",
     }: Props = $props();
 
-    const confirmVariantMap: Record<AlertVariant, "danger" | "primary"> = {
-        danger: "danger",
-        warning: "primary",
-        info: "primary",
-    };
+    let confirming = $state(false);
+
+    async function handleConfirm() {
+        if (confirming) return;
+        confirming = true;
+        try {
+            await onConfirm?.();
+            open = false;
+        } finally {
+            confirming = false;
+        }
+    }
 
     function handleCancel() {
+        if (confirming) return;
         open = false;
         onCancel?.();
     }
-
-    function handleConfirm() {
-        onConfirm?.();
-    }
 </script>
 
-<Modal bind:open {title} {description} size="sm" closable onClose={handleCancel} class={className}>
+{#snippet confirmIconSnippet()}
+    {#if ConfirmIcon}<ConfirmIcon size={16} />{/if}
+{/snippet}
+
+<Modal
+    bind:open
+    {title}
+    {description}
+    {size}
+    closable={!confirming}
+    onClose={handleCancel}
+    {children}
+    class={className}
+>
     {#snippet footer()}
-        <div class="flex items-center justify-end gap-3">
-            <Button variant="secondary" onclick={handleCancel} disabled={loading}>
-                {cancelLabel}
-            </Button>
-            <Button variant={confirmVariantMap[variant]} onclick={handleConfirm} {loading}>
-                {confirmLabel}
-            </Button>
-        </div>
+        {#if footerProp}
+            {@render footerProp()}
+        {:else}
+            <div class="flex items-center justify-end gap-3">
+                <Button variant="secondary" onclick={handleCancel} disabled={confirming}>
+                    {cancelLabel}
+                </Button>
+                <Button
+                    variant={confirmVariant}
+                    loading={confirming}
+                    disabled={confirming || confirmDisabled}
+                    onclick={() => void handleConfirm()}
+                    icon={ConfirmIcon ? confirmIconSnippet : undefined}
+                >
+                    {confirmLabel}
+                </Button>
+            </div>
+        {/if}
     {/snippet}
 </Modal>

package/src/lib/components/Button.svelte

@@ -17,7 +17,7 @@
         size?: ButtonSize;
         fullWidth?: boolean;
         loading?: boolean;
-        icon?: Snippet;
+        icon?: Snippet | undefined;
         iconRight?: Snippet;
         children?: Snippet;
     }