@runwisp/ui 1.3.0 → 1.5.0

package/src/lib/utils/format.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 // Signed magnitude thresholds for Intl.RelativeTimeFormat, largest-first
-// division. Mirrors the buckets date-fns' formatDistance used to pick.
+// division. The buckets match date-fns' formatDistance.
 const RELATIVE_DIVISIONS: [amount: number, unit: Intl.RelativeTimeFormatUnit][] = [
     [60, "seconds"],
     [60, "minutes"],
@@ -13,105 +13,88 @@ const RELATIVE_DIVISIONS: [amount: number, unit: Intl.RelativeTimeFormatUnit][]
     [Number.POSITIVE_INFINITY, "years"],
 ];
 
-// formatDistance renders a signed date delta as "N units ago" / "in N units"
-// using the platform Intl formatter. Negative delta (date before base) reads as
-// past, positive as future.
-function formatDistance(date: Date, base: Date): string {
-    const rtf = new Intl.RelativeTimeFormat(undefined, { numeric: "always" });
-    let delta = (date.getTime() - base.getTime()) / 1000;
+const relativeTime = new Intl.RelativeTimeFormat(undefined, { numeric: "always" });
+
+/** "N units ago" / "in N units" for `date` relative to `now`. */
+export function formatRelativeTime(date: string | Date, now: Date = new Date()): string {
+    let delta = (new Date(date).getTime() - now.getTime()) / 1000;
     for (const [amount, unit] of RELATIVE_DIVISIONS) {
         if (Math.abs(delta) < amount) {
-            return rtf.format(Math.round(delta), unit);
+            return relativeTime.format(Math.round(delta), unit);
         }
         delta /= amount;
     }
-    return rtf.format(Math.round(delta), "years");
+    return relativeTime.format(Math.round(delta), "years");
 }
 
-export function formatBytes(bytes: number): string {
-    const units: [string, ...string[]] = ["B", "KB", "MB", "GB", "TB", "PB"];
-    let value = bytes;
-    let unitIndex = 0;
-    while (value >= 1024 && unitIndex < units.length - 1) {
-        value /= 1024;
-        unitIndex++;
-    }
-    const unit = units[unitIndex] ?? "B";
-    const digits = value < 10 && unitIndex > 0 ? 1 : 0;
-    return `${new Intl.NumberFormat("en", { maximumFractionDigits: digits }).format(value)} ${unit}`;
+/** A locale date/time formatter for one fixed option set, built once. */
+function dateFormatter(options: Intl.DateTimeFormatOptions): (date: string | Date) => string {
+    const format = new Intl.DateTimeFormat(undefined, options);
+    return (date) => format.format(new Date(date));
 }
 
-export function formatRelativeTime(dateStr: string | Date, now: Date = new Date()): string {
-    return formatDistance(new Date(dateStr), now);
-}
+export const formatDateTime = dateFormatter({
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+});
 
-export function formatRelativeTimeWithAbsolute(
-    dateStr: string | Date,
-    now: Date = new Date(),
-): string {
-    const date = new Date(dateStr);
-    const relative = formatDistance(date, now);
-    const diffMs = Math.abs(now.getTime() - date.getTime());
-    const diffDays = diffMs / (1000 * 60 * 60 * 24);
+/** Wall-clock time of day, seconds included, 24-hour — e.g. "17:15:02". */
+export const formatClockTime = dateFormatter({
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: false,
+});
 
-    let absolute: string;
-    if (diffDays < 1) {
-        absolute = date.toLocaleTimeString(undefined, {
-            hour: "numeric",
-            minute: "2-digit",
-            hour12: false,
-        });
-    } else {
-        absolute = date.toLocaleDateString(undefined, { month: "short", day: "numeric" });
-    }
+/** Calendar date without the time — e.g. "22 Jun 2026". */
+export const formatCalendarDate = dateFormatter({
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+});
 
-    return `${relative} (${absolute})`;
-}
+/** Time of day, no seconds, 24-hour — e.g. "17:15". */
+export const formatTimeHM = dateFormatter({ hour: "2-digit", minute: "2-digit", hour12: false });
 
-export function formatDateTime(dateStr: string): string {
-    return new Date(dateStr).toLocaleString(undefined, {
-        year: "numeric",
-        month: "short",
-        day: "numeric",
-        hour: "numeric",
-        minute: "2-digit",
-    });
-}
+/** Day and month, no year — e.g. "22 Jun". */
+export const formatDayMonth = dateFormatter({ month: "short", day: "numeric" });
 
-/** Wall-clock time of day, seconds included, 24-hour — e.g. "17:15:02". */
-export function formatClockTime(dateStr: string): string {
-    return new Date(dateStr).toLocaleTimeString(undefined, {
-        hour: "2-digit",
-        minute: "2-digit",
-        second: "2-digit",
-        hour12: false,
-    });
-}
+export const formatFullDateTime = dateFormatter({
+    year: "numeric",
+    month: "short",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: false,
+});
 
-/** Calendar date without the time — e.g. "22 Jun 2026". */
-export function formatCalendarDate(dateStr: string): string {
-    return new Date(dateStr).toLocaleDateString(undefined, {
-        year: "numeric",
-        month: "short",
-        day: "numeric",
-    });
-}
+const formatShortTime = dateFormatter({ hour: "numeric", minute: "2-digit", hour12: false });
 
-/** Time of day, no seconds, 24-hour — e.g. "17:15". */
-export function formatTimeHM(dateStr: string): string {
-    return new Date(dateStr).toLocaleTimeString(undefined, {
-        hour: "2-digit",
-        minute: "2-digit",
-        hour12: false,
-    });
+export function formatRelativeTimeWithAbsolute(
+    dateStr: string | Date,
+    now: Date = new Date(),
+): string {
+    const date = new Date(dateStr);
+    const diffDays = Math.abs(now.getTime() - date.getTime()) / (1000 * 60 * 60 * 24);
+    const absolute = diffDays < 1 ? formatShortTime(date) : formatDayMonth(date);
+    return `${formatRelativeTime(date, now)} (${absolute})`;
 }
 
-/** Day and month, no year — e.g. "22 Jun". */
-export function formatDayMonth(dateStr: string): string {
-    return new Date(dateStr).toLocaleDateString(undefined, {
-        month: "short",
-        day: "numeric",
-    });
+export function formatBytes(bytes: number): string {
+    const units: [string, ...string[]] = ["B", "KB", "MB", "GB", "TB", "PB"];
+    let value = bytes;
+    let unitIndex = 0;
+    while (value >= 1024 && unitIndex < units.length - 1) {
+        value /= 1024;
+        unitIndex++;
+    }
+    const unit = units[unitIndex] ?? "B";
+    const digits = value < 10 && unitIndex > 0 ? 1 : 0;
+    return `${new Intl.NumberFormat("en", { maximumFractionDigits: digits }).format(value)} ${unit}`;
 }
 
 export function formatDuration(ms: number): string {
@@ -125,15 +108,3 @@ export function formatDuration(ms: number): string {
     const remM = m % 60;
     return remM > 0 ? String(h) + "h " + String(remM) + "m" : String(h) + "h";
 }
-
-export function formatFullDateTime(date: Date | string): string {
-    return new Intl.DateTimeFormat(undefined, {
-        year: "numeric",
-        month: "short",
-        day: "2-digit",
-        hour: "2-digit",
-        minute: "2-digit",
-        second: "2-digit",
-        hour12: false,
-    }).format(new Date(date));
-}

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

@@ -5,16 +5,12 @@ import { describe, expect, it } from "vitest";
 import { formatShortId } from "./id.js";
 
 describe("formatShortId", () => {
-    it("returns the last 8 characters by default", () => {
+    it("returns the last 8 characters", () => {
         expect(formatShortId("01HVZ4XYZ123456ABCDEF")).toBe("56ABCDEF");
     });
 
-    it("honours a custom length", () => {
-        expect(formatShortId("01HVZ4XYZ123456ABCDEF", 4)).toBe("CDEF");
-    });
-
-    it("returns the whole string when shorter than the requested length", () => {
-        expect(formatShortId("abc", 8)).toBe("abc");
+    it("returns the whole string when shorter than 8", () => {
+        expect(formatShortId("abc")).toBe("abc");
     });
 
     it("returns an empty string for an empty input", () => {

package/src/lib/utils/id.ts

@@ -1,6 +1,7 @@
 // SPDX-FileCopyrightText: PoppyCake, s.r.o.
 // SPDX-License-Identifier: Apache-2.0
 
-export function formatShortId(id: string, length = 8): string {
-    return id.slice(-length);
+/** The last 8 characters of a ULID, the part that differs between runs. */
+export function formatShortId(id: string): string {
+    return id.slice(-8);
 }

package/src/lib/utils/theme.svelte.test.ts

@@ -89,12 +89,6 @@ describe("themeStore", () => {
         expect(themeStore.resolved).toBe("dark");
     });
 
-    it("falls back to the legacy storage key", async () => {
-        stubBrowser({ storage: { "runwisp-theme": "light" } });
-        const { themeStore } = await import("./theme.svelte.js");
-        expect(themeStore.preference).toBe("light");
-    });
-
     it("ignores an invalid stored value", async () => {
         stubBrowser({ storage: { "runwisp:theme": "purple" } });
         const { themeStore } = await import("./theme.svelte.js");

package/src/lib/utils/theme.svelte.ts

@@ -2,13 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 export type ThemePreference = "auto" | "light" | "dark";
-export type ResolvedTheme = "light" | "dark";
+type ResolvedTheme = "light" | "dark";
 
 // Shared by every RunWisp surface. Keep byte-for-byte in sync with the
 // no-flash <head> scripts in each app's app.html / layout.
-export const THEME_STORAGE_KEY = "runwisp:theme";
-// The daemon dashboard used this key before the store moved here.
-const LEGACY_STORAGE_KEY = "runwisp-theme";
+const THEME_STORAGE_KEY = "runwisp:theme";
 
 function isPreference(value: string | null): value is ThemePreference {
     return value === "auto" || value === "light" || value === "dark";
@@ -16,7 +14,7 @@ function isPreference(value: string | null): value is ThemePreference {
 
 function readStored(): string | null {
     try {
-        return localStorage.getItem(THEME_STORAGE_KEY) ?? localStorage.getItem(LEGACY_STORAGE_KEY);
+        return localStorage.getItem(THEME_STORAGE_KEY);
     } catch {
         return null; // private mode / embedded contexts
     }

package/src/lib/utils/toast.svelte.ts

@@ -3,9 +3,9 @@
 
 import { generateUlid } from "@runwisp/common";
 
-export type ToastType = "success" | "error" | "warning" | "info";
+type ToastType = "success" | "error" | "warning" | "info";
 
-export interface ToastAction {
+interface ToastAction {
     label: string;
     onClick: () => void;
 }
@@ -18,7 +18,7 @@ export interface Toast {
     action?: ToastAction;
 }
 
-export interface ToastOptions {
+interface ToastOptions {
     duration?: number;
     action?: ToastAction;
 }
@@ -88,14 +88,6 @@ class ToastStore {
     info(message: string, opts?: ToastOptions): string {
         return this.add("info", message, opts);
     }
-
-    clear() {
-        for (const timer of this.timers.values()) {
-            clearTimeout(timer);
-        }
-        this.timers.clear();
-        this.items = [];
-    }
 }
 
 export const toast = new ToastStore();

package/src/stories/Accordion.stories.svelte

@@ -0,0 +1,61 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script module>
+    import { defineMeta } from "@storybook/addon-svelte-csf";
+    import { LifeBuoy, 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 { Story } = defineMeta({
+        title: "Navigation/Accordion",
+        component: Accordion,
+        tags: ["autodocs"],
+    });
+</script>
+
+<Story name="Multiple" asChild>
+    <Accordion class="max-w-lg">
+        <AccordionItem title="Retries" open>Retry a failed run up to three times.</AccordionItem>
+        <AccordionItem title="Timeouts">Kill the run after 10 minutes.</AccordionItem>
+        <AccordionItem title="Notifications">Send failures to Slack.</AccordionItem>
+    </Accordion>
+</Story>
+
+<Story name="Single" asChild>
+    <Accordion type="single" class="max-w-lg">
+        <AccordionItem title="Retries" open>Opening another section closes this one.</AccordionItem>
+        <AccordionItem title="Timeouts">Kill the run after 10 minutes.</AccordionItem>
+        <AccordionItem title="Notifications">Send failures to Slack.</AccordionItem>
+    </Accordion>
+</Story>
+
+<Story name="Framed, default open" asChild>
+    <AccordionItem variant="framed" open class="max-w-lg">
+        {#snippet title()}
+            <span class="flex items-center gap-2.5">
+                <LifeBuoy size={16} class="text-on-surface-faint" />
+                Schedule recovery
+                <span class="font-sans text-xs text-on-surface-faint">Missed ticks & jitter</span>
+            </span>
+        {/snippet}
+        What to do with cron ticks missed while the scheduler was offline.
+    </AccordionItem>
+</Story>
+
+<Story name="Framed with actions" asChild>
+    <AccordionItem variant="framed" title="Node.js 22" class="max-w-lg">
+        {#snippet actions()}
+            <Toggle checked size="sm" />
+            <button
+                type="button"
+                aria-label="Remove"
+                class="text-on-surface-faint hover:text-danger-surface"
+            >
+                <Trash size={14} />
+            </button>
+        {/snippet}
+        <pre class="font-mono text-xs">RUN apk add --no-cache nodejs npm</pre>
+    </AccordionItem>
+</Story>

package/src/stories/Button.stories.svelte

@@ -4,7 +4,7 @@
 <script module>
     import { defineMeta } from "@storybook/addon-svelte-csf";
     import Button from "$lib/components/Button.svelte";
-    import { Play, Plus, ArrowRight, Download, Trash2 } from "@lucide/svelte";
+    import { Play, Plus, ArrowRight, Download, Trash } from "@lucide/svelte";
 
     const { Story } = defineMeta({
         title: "Core/Button",
@@ -71,7 +71,7 @@
             Export
         </Button>
         <Button variant="danger">
-            {#snippet icon()}<Trash2 size={16} />{/snippet}
+            {#snippet icon()}<Trash size={16} />{/snippet}
             Delete
         </Button>
     </div>

package/src/stories/CodeBlock.stories.svelte

@@ -0,0 +1,55 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script module>
+    import { defineMeta } from "@storybook/addon-svelte-csf";
+    import CodeBlock from "$lib/components/CodeBlock.svelte";
+
+    const helloTask = '[tasks.hello]\ncron = "*/5 * * * *"\nrun  = "echo hello"';
+    const backupTask = '[tasks.backup]\ncron = "0 3 * * *"\nkeep_runs = 60';
+
+    const { Story } = defineMeta({
+        title: "Data Display/CodeBlock",
+        component: CodeBlock,
+        tags: ["autodocs"],
+        argTypes: {
+            variant: { control: "select", options: ["terminal", "surface"] },
+            size: { control: "select", options: ["sm", "md"] },
+        },
+    });
+</script>
+
+<Story
+    name="Default"
+    args={{
+        code: "export RUNWISP_STATION_TOKEN=rw_xxx\nexport RUNWISP_STATION_URL=https://app.runwisp.com\nrunwisp station",
+    }}
+/>
+
+<Story
+    name="Filename"
+    args={{ code: "FROM alpine:3.20\nRUN apk add --no-cache curl", filename: "Dockerfile" }}
+/>
+
+<Story
+    name="Shell prompt"
+    args={{ code: "curl -fsSL https://get.runwisp.com/install.sh | bash", prompt: "$" }}
+/>
+
+<Story name="Surface variant" asChild>
+    <CodeBlock variant="surface" size="sm" copyable={false} code={helloTask} />
+</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. -->
+    <CodeBlock filename="runwisp.toml" code={backupTask}
+        ><span class="block text-[var(--rw-syn-fn)]">[tasks.backup]</span><span class="block"
+            ><span class="text-[var(--rw-syn-kw)]">cron</span> =
+            <span class="text-[var(--rw-syn-str)]">"0 3 * * *"</span></span
+        ><span class="block"
+            ><span class="text-[var(--rw-syn-kw)]">keep_runs</span> =
+            <span class="text-[var(--rw-syn-num)]">60</span></span
+        ></CodeBlock
+    >
+</Story>

package/src/stories/DataGrid.stories.svelte

@@ -9,7 +9,7 @@
     import FilterBar from "$lib/components/FilterBar.svelte";
     import { seedValues } from "$lib/components/filter-spec.js";
     import { applyFilters } from "$lib/utils/filter.js";
-    import { Play, Pause, Trash2, SquarePen } from "@lucide/svelte";
+    import { Play, Pause, Trash, SquarePen } from "@lucide/svelte";
 
     const { Story } = defineMeta({
         title: "Data/DataGrid",
@@ -75,7 +75,7 @@
         { label: "Run Now", icon: Play },
         { label: "Pause", icon: Pause },
         { divider: true },
-        { label: "Delete", icon: Trash2, danger: true },
+        { label: "Delete", icon: Trash, danger: true },
     ];
 
     /** @type {import("$lib/components/filter-spec.js").FilterField[]} */
@@ -138,11 +138,6 @@
 
 <Story name="Sortable" args={{ columns, data: tasks, sortKey: "name", sortDirection: "asc" }} />
 
-<Story
-    name="Filterable"
-    args={{ columns, data: tasks, filterable: true, filterPlaceholder: "Filter tasks…" }}
-/>
-
 <Story name="Paginated" args={{ columns, data: tasks, paginate: true, pageSize: 2 }} />
 
 <Story name="Filters, Sort, Selection, Pagination" asChild>

package/src/stories/Dropdown.stories.svelte

@@ -4,7 +4,7 @@
 <script module>
     import { defineMeta } from "@storybook/addon-svelte-csf";
     import Dropdown from "$lib/components/Dropdown.svelte";
-    import { Play, Pause, SquarePen, Copy, Trash2, Settings, ChevronDown } from "@lucide/svelte";
+    import { Play, Pause, SquarePen, Copy, Trash, Settings, ChevronDown } from "@lucide/svelte";
 
     const { Story } = defineMeta({
         title: "Core/Dropdown",
@@ -24,7 +24,7 @@
         { label: "Duplicate", icon: Copy, onClick: () => console.log("Duplicate") },
         { label: "Pause", icon: Pause, onClick: () => console.log("Pause") },
         { divider: true },
-        { label: "Delete", icon: Trash2, danger: true, onClick: () => console.log("Delete") },
+        { label: "Delete", icon: Trash, danger: true, onClick: () => console.log("Delete") },
     ];
 
     const settingsMenu = [
@@ -63,7 +63,7 @@
             { label: "Edit", icon: SquarePen },
             { label: "Duplicate", icon: Copy, disabled: true },
             { divider: true },
-            { label: "Delete", icon: Trash2, danger: true, disabled: true },
+            { label: "Delete", icon: Trash, danger: true, disabled: true },
         ],
     }}
 />

package/src/stories/Heading.stories.svelte

@@ -0,0 +1,31 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script module>
+    import { defineMeta } from "@storybook/addon-svelte-csf";
+    import Heading from "$lib/components/Heading.svelte";
+    import Text from "$lib/components/Text.svelte";
+
+    const { Story } = defineMeta({
+        title: "Core/Heading",
+        component: Heading,
+        tags: ["autodocs"],
+    });
+</script>
+
+<Story name="Levels" asChild>
+    <div class="space-y-3">
+        <Heading level={1}>Level 1</Heading>
+        <Heading level={2}>Level 2</Heading>
+        <Heading level={3}>Level 3</Heading>
+        <Heading level={4}>Level 4</Heading>
+    </div>
+</Story>
+
+<!-- A card title: the semantic level stays, the size shrinks. -->
+<Story name="Card title" asChild>
+    <div class="max-w-sm rounded-[4px] border border-outline bg-surface-raised p-4">
+        <Heading level={2} size="sm" id="resources-title">System resources</Heading>
+        <Text size="sm" color="muted" class="mt-2">CPU and memory over the last hour.</Text>
+    </div>
+</Story>

package/src/stories/Kbd.stories.svelte

@@ -0,0 +1,36 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script module>
+    import { defineMeta } from "@storybook/addon-svelte-csf";
+    import Kbd from "$lib/components/Kbd.svelte";
+
+    const { Story } = defineMeta({
+        title: "Core/Kbd",
+        component: Kbd,
+        tags: ["autodocs"],
+        argTypes: {
+            size: { control: "select", options: ["xs", "sm"] },
+            tone: { control: "select", options: ["default", "faint", "console"] },
+        },
+    });
+</script>
+
+<Story name="Default" args={{ keys: ["Ctrl", "K"] }} />
+
+<Story name="Faint in an input" asChild>
+    <div
+        class="flex h-9 max-w-xs items-center justify-between rounded-[3px] border border-outline bg-surface-sunken/60 px-3 font-mono text-sm text-on-surface-faint"
+    >
+        Search tasks…
+        <Kbd keys="⌘K" size="xs" tone="faint" />
+    </div>
+</Story>
+
+<Story name="Console" asChild>
+    <div
+        class="flex items-center gap-1.5 bg-[var(--rw-con-bg)] px-3 py-2 font-mono text-xs text-[var(--rw-con-dim)]"
+    >
+        Restore <Kbd keys="Esc" size="xs" tone="console" />
+    </div>
+</Story>

package/src/stories/Link.stories.svelte

@@ -0,0 +1,38 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script module>
+    import { defineMeta } from "@storybook/addon-svelte-csf";
+    import Link from "$lib/components/Link.svelte";
+
+    const { Story } = defineMeta({
+        title: "Core/Link",
+        component: Link,
+        tags: ["autodocs"],
+        argTypes: {
+            variant: { control: "select", options: ["default", "muted", "primary", "danger"] },
+            underline: { control: "select", options: ["always", "hover", "none"] },
+        },
+    });
+</script>
+
+<Story name="Variants" asChild>
+    <div class="flex flex-col gap-2 text-sm">
+        <Link href="#tasks">Default</Link>
+        <Link href="#tasks" variant="muted">Muted</Link>
+        <Link href="#tasks" variant="primary">Primary</Link>
+        <Link href="#tasks" variant="danger">Danger</Link>
+    </div>
+</Story>
+
+<Story name="External" asChild>
+    <Link
+        href="https://docs.runwisp.com/configuration/tasks/"
+        external
+        variant="primary"
+        title="Opens in a new tab"
+        class="text-sm font-medium"
+    >
+        Task configuration docs →
+    </Link>
+</Story>

package/src/stories/PageHeader.stories.svelte

@@ -0,0 +1,31 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script module>
+    import { defineMeta } from "@storybook/addon-svelte-csf";
+    import PageHeader from "$lib/components/PageHeader.svelte";
+    import Button from "$lib/components/Button.svelte";
+
+    const { Story } = defineMeta({
+        title: "Layout/PageHeader",
+        component: PageHeader,
+        tags: ["autodocs"],
+    });
+</script>
+
+<Story
+    name="Default"
+    args={{ title: "Tasks", subtitle: "Scheduled tasks and background processes." }}
+/>
+
+<Story name="Rich subtitle and actions" asChild>
+    <PageHeader title="Notifications">
+        {#snippet subtitle()}
+            Recent notifications across all tasks ·
+            <span class="font-mono font-medium text-primary-soft-text tabular-nums">3 unread</span>
+        {/snippet}
+        {#snippet actions()}
+            <Button size="sm" variant="secondary">Mark all read</Button>
+        {/snippet}
+    </PageHeader>
+</Story>