npm - @runwisp/ui - Versions diffs - 1.5.0 → 1.7.0 - Mend

@runwisp/ui 1.5.0 → 1.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (70) hide show

package/package.json +5 -7
package/src/lib/actions/focusTrap.ts +3 -3
package/src/lib/actions/fold-to-fit.test.ts +36 -0
package/src/lib/actions/fold-to-fit.ts +89 -0
package/src/lib/actions/modal-dialog.test.ts +47 -0
package/src/lib/actions/modal-dialog.ts +48 -0
package/src/lib/components/AccordionItem.svelte +16 -5
package/src/lib/components/Badge.svelte +4 -25
package/src/lib/components/Button.svelte +2 -9
package/src/lib/components/CodeBlock.svelte +7 -6
package/src/lib/components/DataGrid.svelte +5 -5
package/src/lib/components/Drawer.svelte +22 -30
package/src/lib/components/DurationInput.svelte +6 -25
package/src/lib/components/FilterBar.svelte +3 -7
package/src/lib/components/FilterPill.svelte +2 -2
package/src/lib/components/FormField.svelte +1 -1
package/src/lib/components/Link.svelte +9 -4
package/src/lib/components/LogConsole.svelte +101 -424
package/src/lib/components/Modal.svelte +7 -30
package/src/lib/components/SearchInput.svelte +1 -1
package/src/lib/components/Select.svelte +3 -2
package/src/lib/components/Sparkline.svelte +2 -2
package/src/lib/components/Spinner.svelte +10 -5
package/src/lib/components/StatusDot.svelte +1 -1
package/src/lib/components/StatusIndicator.svelte +37 -104
package/src/lib/components/Tabs.svelte +15 -1
package/src/lib/components/Tooltip.svelte +1 -1
package/src/lib/components/dashboard/RunActions.svelte +156 -0
package/src/lib/components/dashboard/RunConsoleFrame.svelte +319 -0
package/src/lib/components/dashboard/RunDetailPanel.svelte +137 -725
package/src/lib/components/dashboard/RunFacts.svelte +119 -0
package/src/lib/components/dashboard/RunFilterChips.svelte +52 -0
package/src/lib/components/dashboard/RunFilterPopover.svelte +9 -10
package/src/lib/components/dashboard/RunHeaderLine.svelte +295 -0
package/src/lib/components/dashboard/RunListSkeleton.svelte +43 -0
package/src/lib/components/dashboard/RunRow.svelte +202 -0
package/src/lib/components/dashboard/RunsList.svelte +267 -545
package/src/lib/components/dashboard/bulk-selection.svelte.test.ts +42 -0
package/src/lib/components/dashboard/bulk-selection.svelte.ts +50 -0
package/src/lib/components/dashboard/cron-format.test.ts +10 -1
package/src/lib/components/dashboard/cron-format.ts +7 -3
package/src/lib/components/dashboard/run-filters.test.ts +62 -2
package/src/lib/components/dashboard/run-filters.ts +104 -99
package/src/lib/components/dashboard/run-helpers.test.ts +131 -12
package/src/lib/components/dashboard/run-helpers.ts +150 -44
package/src/lib/components/dashboard/status-config.ts +18 -0
package/src/lib/components/dashboard/types.ts +6 -0
package/src/lib/components/data-grid-selection.ts +2 -9
package/src/lib/components/filter-spec.ts +3 -3
package/src/lib/index.ts +13 -2
package/src/lib/log-console/AnsiLine.svelte +12 -0
package/src/lib/log-console/FrameHistoryBlock.svelte +57 -0
package/src/lib/log-console/LogCache.svelte.ts +1 -1
package/src/lib/log-console/LogConsoleFooter.svelte +88 -0
package/src/lib/log-console/ansi.ts +1 -1
package/src/lib/log-console/frame-history.svelte.test.ts +47 -0
package/src/lib/log-console/frame-history.svelte.ts +71 -0
package/src/lib/log-console/wrap-layout.svelte.test.ts +92 -0
package/src/lib/log-console/wrap-layout.svelte.ts +188 -0
package/src/lib/theme-tokens.css +21 -21
package/src/lib/theme.css +13 -13
package/src/lib/utils/format.test.ts +125 -3
package/src/lib/utils/format.ts +101 -8
package/src/lib/utils/toast.svelte.ts +2 -3
package/src/lib/utils/typing-target.ts +10 -0
package/src/stories/Accordion.stories.svelte +60 -1
package/src/stories/CodeBlock.stories.svelte +13 -0
package/src/stories/Link.stories.svelte +25 -1
package/src/stories/LogConsole.stories.svelte +2 -2
package/src/stories/Tabs.stories.svelte +17 -0

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@runwisp/ui",
   "description": "Svelte 5 UI component library for RunWisp dashboards and admin interfaces.",
-  "version": "1.5.0",
+  "version": "1.7.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.5.0",
-    "@runwisp/typescript-config": "1.5.0",
+    "@runwisp/eslint-config": "1.7.0",
+    "@runwisp/typescript-config": "1.7.0",
     "@storybook/addon-a11y": "^10.5.5",
     "@storybook/addon-docs": "^10.5.5",
     "@storybook/addon-svelte-csf": "^5.1.2",
@@ -60,7 +60,6 @@
     "@tailwindcss/forms": "^0.5.11",
     "@tailwindcss/typography": "^0.5.20",
     "@tailwindcss/vite": "^4.3.3",
-    "@types/ms": "^2.1.0",
     "@types/node": "^26.1.2",
     "eslint": "^10.8.0",
     "eslint-config-prettier": "^10.1.8",
@@ -93,11 +92,10 @@
     "@fontsource-variable/geist-mono": "^5.3.0",
     "@fontsource/tasa-orbiter": "^5.3.0",
     "@lucide/svelte": "^1.52.0",
-    "@runwisp/common": "1.5.0",
+    "@runwisp/common": "1.7.0",
     "@tanstack/svelte-virtual": "^3.13.35",
     "ansi-to-html": "^0.7.2",
     "cron-parser": "^5.7.0",
-    "cronstrue": "^3.24.0",
-    "ms": "^2.1.3"
+    "cronstrue": "^3.24.0"
   }
 }

package/src/lib/actions/focusTrap.ts CHANGED Viewed

@@ -25,7 +25,7 @@ export function getFocusableElements(container: HTMLElement): HTMLElement[] {
  * Pure decision function: given a keydown event, the currently focusable
  * elements (in order), and whatever currently has focus, returns the element
  * that Tab/Shift+Tab should wrap focus to in order to keep it trapped inside
- * the set — or `null` if the key doesn't need handling.
+ * the set, or `null` if the key doesn't need handling.
  *
  * Framework- and DOM-free on purpose (elements are compared by identity only)
  * so this can be unit tested without a browser or jsdom.
@@ -59,7 +59,7 @@ export interface TrapFocusOptions {
  * Svelte action that keeps keyboard focus inside `node` while it's mounted:
  * Tab from the last focusable descendant wraps to the first (and Shift+Tab
  * from the first wraps to the last), and focus is restored to whatever was
- * focused beforehand once the trap is torn down — unless a click on some
+ * focused beforehand once the trap is torn down, unless a click on some
  * other real element already moved focus there, in which case that's left
  * alone.
  */
@@ -97,7 +97,7 @@ export function trapFocus(node: HTMLElement, options: TrapFocusOptions = {}) {
         destroy() {
             node.removeEventListener("keydown", handleKeydown);
             // By the time an action's destroy() runs, `node` (and whatever
-            // inside it held focus) has already been detached — removing a
+            // inside it held focus) has already been detached, removing a
             // focused element resets focus to <body> as a browser default, so
             // that can't be told apart from an explicit close (Escape, item
             // activation) by checking `node.contains(activeElement)` here.

package/src/lib/actions/fold-to-fit.test.ts ADDED Viewed

@@ -0,0 +1,36 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+import { describe, expect, it } from "vitest";
+import { foldUntilFits } from "./fold-to-fit.js";
+// A row of named parts with widths, folding parts to zero.
+function row(width: number, parts: Record<string, number>) {
+    const shown = { ...parts };
+    return {
+        fits: () => Object.values(shown).reduce((a, b) => a + b, 0) <= width,
+        fold: (key: string) => {
+            shown[key] = 0;
+        },
+    };
+}
+describe("foldUntilFits", () => {
+    const order = ["id", "via", "start", "usage"];
+    const parts = { verdict: 100, id: 60, via: 40, start: 80, usage: 90 };
+    it("folds nothing when the row fits", () => {
+        const r = row(400, parts);
+        expect(foldUntilFits(order, r.fits, r.fold)).toEqual([]);
+    });
+    it("folds in order and stops as soon as it fits", () => {
+        const r = row(280, parts);
+        expect(foldUntilFits(order, r.fits, r.fold)).toEqual(["id", "via"]);
+    });
+    it("folds everything foldable when even that doesn't fit", () => {
+        const r = row(50, parts);
+        expect(foldUntilFits(order, r.fits, r.fold)).toEqual(order);
+    });
+});

package/src/lib/actions/fold-to-fit.ts ADDED Viewed

@@ -0,0 +1,89 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+/**
+ * Folds keys away, in `order`, until `fits()` says the row fits. Returns the
+ * keys it folded. Fixed order, so a control is always in the same place: in
+ * the row, or in its overflow menu.
+ */
+export function foldUntilFits(
+    order: readonly string[],
+    fits: () => boolean,
+    fold: (key: string) => void,
+): string[] {
+    const folded: string[] = [];
+    for (const key of order) {
+        if (fits()) break;
+        fold(key);
+        folded.push(key);
+    }
+    return folded;
+}
+export interface FoldToFitOptions {
+    /** Fold keys, first to go first. */
+    order: readonly string[];
+    /** Called with the folded keys whenever they change, to fill a ⋯ menu. */
+    onfold?: (folded: string[]) => void;
+}
+/**
+ * Keeps a one-line row from overflowing by folding parts of it away. Markup:
+ * `[data-fold=k]` hides when `k` folds, `[data-fold-alt=k]` (render it with
+ * `hidden`) shows instead, a shorter version. `[data-fold-shrink]` parts
+ * normally truncate, so they stop shrinking while the row is measured.
+ * Re-fits when the row resizes or its content changes.
+ */
+export function foldToFit(row: HTMLElement, options: FoldToFitOptions) {
+    let opts = options;
+    let reported = "";
+    let frame = 0;
+    const all = (selector: string) => Array.from(row.querySelectorAll<HTMLElement>(selector));
+    const setFolded = (key: string, folded: boolean) => {
+        for (const el of all(`[data-fold="${key}"]`)) el.hidden = folded;
+        for (const el of all(`[data-fold-alt="${key}"]`)) el.hidden = !folded;
+    };
+    function fit() {
+        frame = 0;
+        for (const key of opts.order) setFolded(key, false);
+        const shrinking = all("[data-fold-shrink]");
+        for (const el of shrinking) el.style.flexShrink = "0";
+        const folded = foldUntilFits(
+            opts.order,
+            () => row.scrollWidth <= row.clientWidth,
+            (key) => {
+                setFolded(key, true);
+            },
+        );
+        for (const el of shrinking) el.style.flexShrink = "";
+        const key = folded.join(" ");
+        if (key !== reported) {
+            reported = key;
+            opts.onfold?.(folded);
+        }
+    }
+    const schedule = () => {
+        if (frame === 0) frame = requestAnimationFrame(fit);
+    };
+    const resize = new ResizeObserver(schedule);
+    resize.observe(row);
+    // Not attributes: fitting toggles `hidden`, which would loop.
+    const content = new MutationObserver(schedule);
+    content.observe(row, { childList: true, subtree: true, characterData: true });
+    fit();
+    return {
+        update(next: FoldToFitOptions) {
+            opts = next;
+            schedule();
+        },
+        destroy() {
+            cancelAnimationFrame(frame);
+            resize.disconnect();
+            content.disconnect();
+        },
+    };
+}

package/src/lib/actions/modal-dialog.test.ts ADDED Viewed

@@ -0,0 +1,47 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+import { describe, expect, it, vi } from "vitest";
+import { modalDialogHandlers } from "./modal-dialog.js";
+function setup(closable: boolean, open = true) {
+    const close = vi.fn();
+    const handlers = modalDialogHandlers({ closable: () => closable, isOpen: () => open, close });
+    const dialog = new EventTarget();
+    return { close, handlers, dialog, showModal: vi.fn() };
+}
+describe("modalDialogHandlers", () => {
+    it("closes on Escape only when closable, and always cancels the native close", () => {
+        const closable = setup(true);
+        const event = { preventDefault: vi.fn() };
+        closable.handlers.oncancel(event);
+        expect(event.preventDefault).toHaveBeenCalled();
+        expect(closable.close).toHaveBeenCalledOnce();
+        const locked = setup(false);
+        locked.handlers.oncancel(event);
+        expect(locked.close).not.toHaveBeenCalled();
+    });
+    it("closes on a press that starts and ends on the backdrop", () => {
+        const { handlers, close, dialog } = setup(true);
+        handlers.onpointerdown({ target: new EventTarget(), currentTarget: dialog });
+        handlers.onclick({ target: dialog, currentTarget: dialog });
+        expect(close).not.toHaveBeenCalled();
+        handlers.onpointerdown({ target: dialog, currentTarget: dialog });
+        handlers.onclick({ target: dialog, currentTarget: dialog });
+        expect(close).toHaveBeenCalledOnce();
+    });
+    it("reopens a dialog the browser closed while it is still mounted", () => {
+        const mounted = setup(false, true);
+        mounted.handlers.onclose({ currentTarget: mounted });
+        expect(mounted.showModal).toHaveBeenCalledOnce();
+        const gone = setup(false, false);
+        gone.handlers.onclose({ currentTarget: gone });
+        expect(gone.showModal).not.toHaveBeenCalled();
+    });
+});

package/src/lib/actions/modal-dialog.ts ADDED Viewed

@@ -0,0 +1,48 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+// showModal() puts the dialog in the top layer and makes the page behind it
+// inert. The dialog stays open while mounted; the caller's `open` flag drives
+// (un)mounting.
+export function showModal(node: HTMLDialogElement) {
+    node.showModal();
+}
+interface ModalDialogOptions {
+    closable: () => boolean;
+    isOpen: () => boolean;
+    close: () => void;
+}
+// The slice of a pointer/click event the handlers read.
+interface Pressed {
+    target: EventTarget | null;
+    currentTarget: EventTarget | null;
+}
+/**
+ * Event handlers to spread on a `<dialog use:showModal>`: Escape and a press on
+ * the bare dialog (its backdrop area) close it when closable.
+ */
+export function modalDialogHandlers({ closable, isOpen, close }: ModalDialogOptions) {
+    // Only a press that starts and ends on the backdrop closes the dialog, so a
+    // text selection dragged out of the panel doesn't.
+    let pressedBackdrop = false;
+    return {
+        oncancel(e: { preventDefault(): void }) {
+            e.preventDefault();
+            if (closable()) close();
+        },
+        // Chrome ignores preventDefault() on a repeated Escape and closes anyway;
+        // reopen so a non-closable dialog stays up while mounted.
+        onclose(e: { currentTarget: { showModal(): void } }) {
+            if (isOpen()) e.currentTarget.showModal();
+        },
+        onpointerdown(e: Pressed) {
+            pressedBackdrop = e.target === e.currentTarget;
+        },
+        onclick(e: Pressed) {
+            if (closable() && pressedBackdrop && e.target === e.currentTarget) close();
+        },
+    };
+}

package/src/lib/components/AccordionItem.svelte CHANGED Viewed

@@ -11,22 +11,32 @@
     interface Props {
         title?: Snippet | string;
+        /** A control before the title that must not toggle the panel (an enable switch). */
+        leading?: Snippet;
         /** Controls beside the header that must not toggle it (a switch, a delete button). */
         actions?: Snippet;
         children?: Snippet;
         open?: boolean;
         disabled?: boolean;
         variant?: AccordionItemVariant;
+        /**
+         * `framed` only: border and background colours in place of the default
+         * `border-outline bg-surface-raised`, to tint the panel by state (e.g.
+         * `border-warning-soft-border bg-warning-soft/30` for a stale one).
+         */
+        frameClass?: string;
         class?: string;
     }
     let {
         title,
+        leading,
         actions,
         children,
         open = $bindable(false),
         disabled = false,
         variant = "plain",
+        frameClass = "border-outline bg-surface-raised",
         class: className = "",
     }: Props = $props();
@@ -61,12 +71,13 @@
     const framed = $derived(variant === "framed");
 </script>
-<div
-    class="group {framed
-        ? 'rounded-[4px] border border-outline bg-surface-raised'
-        : ''} {className}"
->
+<div class="group {framed ? `rounded-[4px] border ${frameClass}` : ''} {className}">
     <div class="flex items-center gap-3 {framed ? 'px-4' : ''}">
+        {#if leading}
+            <div class="flex shrink-0 items-center">
+                {@render leading()}
+            </div>
+        {/if}
         <button
             type="button"
             onclick={toggle}

package/src/lib/components/Badge.svelte CHANGED Viewed

@@ -3,6 +3,7 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
+    import Spinner from "./Spinner.svelte";
     import Tooltip from "./Tooltip.svelte";
     type BadgeVariant = "default" | "primary" | "success" | "warning" | "danger" | "info";
@@ -17,7 +18,7 @@
         outline?: boolean;
         /** Shown in the styled hover tooltip (see {@link Tooltip}). */
         tooltip?: string;
-        /** Side the tooltip opens on — pick one that has room, e.g. "bottom" near the top of the viewport. */
+        /** Side the tooltip opens on, pick one that has room, e.g. "bottom" near the top of the viewport. */
         tooltipPosition?: TooltipPosition;
         children?: Snippet;
         class?: string;
@@ -92,11 +93,7 @@
         info: "text-info",
     };
-    const spinnerSizeClasses: Record<BadgeSize, string> = {
-        sm: "h-3 w-3",
-        md: "h-3.5 w-3.5",
-        lg: "h-4 w-4",
-    };
+    const spinnerPx: Record<BadgeSize, number> = { sm: 12, md: 14, lg: 16 };
 </script>
 {#snippet chip(extraClass: string)}
@@ -107,25 +104,7 @@
     >
         {#if dot}
             {#if loading}
-                <svg
-                    class="{spinnerSizeClasses[size]} animate-spin {indicatorTextColors[variant]}"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                >
-                    <circle
-                        class="opacity-25"
-                        cx="12"
-                        cy="12"
-                        r="10"
-                        stroke="currentColor"
-                        stroke-width="4"
-                    ></circle>
-                    <path
-                        class="opacity-75"
-                        fill="currentColor"
-                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                    ></path>
-                </svg>
+                <Spinner size={spinnerPx[size]} label="" class={indicatorTextColors[variant]} />
             {:else}
                 <span class="h-1.5 w-1.5 rounded-full {dotColors[variant]}"></span>
             {/if}

package/src/lib/components/Button.svelte CHANGED Viewed

@@ -4,6 +4,7 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
     import type { HTMLButtonAttributes } from "svelte/elements";
+    import Spinner from "./Spinner.svelte";
     import {
         BUTTON_BASE,
         BUTTON_SIZES,
@@ -44,15 +45,7 @@
     {...restProps}
 >
     {#if loading}
-        <svg class="h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none">
-            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"
-            ></circle>
-            <path
-                class="opacity-75"
-                fill="currentColor"
-                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-            ></path>
-        </svg>
+        <Spinner size="sm" label="" />
     {:else if icon}
         <span class="shrink-0 group-active:scale-95">
             {@render icon()}

package/src/lib/components/CodeBlock.svelte CHANGED Viewed

@@ -92,18 +92,19 @@
             {/if}
         </div>
     {/if}
-    <div class="relative">
-        <pre
-            class="overflow-x-auto font-mono {sizeClasses[size]} {copyable && !hasHeader
-                ? 'pr-24'
-                : ''}">{#if prompt}<span
+    <!-- The copy button gets its own column so a long line scrolls under the
+         edge of the code, never under the button. -->
+    <div class="flex">
+        <pre class="min-w-0 flex-1 overflow-x-auto font-mono {sizeClasses[size]}">{#if prompt}<span
                     class="mr-[1ch] select-none {tone.prompt}"
                     aria-hidden="true">{prompt}</span
                 >{/if}<code bind:this={codeEl}
                 >{#if children}{@render children()}{:else}{code}{/if}</code
             ></pre>
         {#if copyable && !hasHeader}
-            {@render copyButton("absolute top-2 right-2")}
+            <div class="flex shrink-0 items-start pt-2 pr-2 pl-2">
+                {@render copyButton("")}
+            </div>
         {/if}
     </div>
 </div>

package/src/lib/components/DataGrid.svelte CHANGED Viewed

@@ -46,16 +46,16 @@
         onRowClick?: (row: T) => void;
         loading?: boolean;
         stickyHeader?: boolean;
-        /** Hide the header row entirely — for single-column feeds (e.g. an
+        /** Hide the header row entirely, for single-column feeds (e.g. an
          *  inbox) where a column label would be noise. */
         showHeader?: boolean;
-        /** Rendered below the table body, inside the frame — e.g. a cursor
+        /** Rendered below the table body, inside the frame, e.g. a cursor
          *  "Load more" button for feeds that don't use offset pagination. */
         footer?: Snippet;
         /** Drop the outer border/shadow/bg so the grid sits flush inside a Card
          *  or panel that already supplies its own frame. */
         bare?: boolean;
-        /** Extra classes per row — e.g. a left accent bar for a failing row.
+        /** Extra classes per row, e.g. a left accent bar for a failing row.
          *  Rows always carry `group`, so a `render`/`rowAction` snippet can use
          *  `group-hover:` to reveal on-hover controls. */
         rowClass?: (row: T) => string;
@@ -66,7 +66,7 @@
     // Type-aware comparator. Nullish sorts last; numbers numerically; dates by
     // epoch; everything else by locale with numeric-aware string compare.
     // Returns 0 for non-comparable/equal, so a column whose key maps to no real
-    // field (a display-only key) leaves order untouched — sort stays inert there.
+    // field (a display-only key) leaves order untouched, sort stays inert there.
     function compareValues(a: unknown, b: unknown): number {
         if (a == null && b == null) return 0;
         if (a == null) return 1;
@@ -193,7 +193,7 @@
     let allSelected = $derived(selection.allSelected);
     let someSelected = $derived(selection.someSelected);
-    // Cell rhythm — airy by default, tight when compact. Header + body share it.
+    // Cell rhythm, airy by default, tight when compact. Header + body share it.
     const density = $derived(compact ? "compact" : "comfortable");
     // Hover reveals a teal accent rail on the leftmost cell (see .group on <tr>).
     const railHover = "group-hover:shadow-[inset_3px_0_0_var(--color-primary)]";

package/src/lib/components/Drawer.svelte CHANGED Viewed

@@ -5,9 +5,9 @@
     import type { Snippet } from "svelte";
     import { X } from "@lucide/svelte";
     import Heading from "./Heading.svelte";
-    import { portal } from "../actions/portal.js";
     import { trapFocus } from "../actions/focusTrap.js";
-    import { fly } from "svelte/transition";
+    import { modalDialogHandlers, showModal } from "../actions/modal-dialog.js";
+    import { fade, fly } from "svelte/transition";
     type Side = "left" | "right" | "top" | "bottom";
     type DrawerSize = "sm" | "md" | "lg" | "xl";
@@ -38,6 +38,8 @@
         class: className = "",
     }: Props = $props();
+    const titleId = $props.id();
     const sizeValues: Record<DrawerSize, string> = {
         sm: "320px",
         md: "400px",
@@ -72,32 +74,25 @@
         onClose?.();
     }
-    function handleKeydown(e: KeyboardEvent) {
-        if (e.key === "Escape" && closable) {
-            handleClose();
-        }
-    }
+    const dialogHandlers = modalDialogHandlers({
+        closable: () => closable,
+        isOpen: () => open,
+        close: handleClose,
+    });
 </script>
-<svelte:window onkeydown={handleKeydown} />
 {#if open}
-    <div use:portal class="fixed inset-0 z-50">
-        {#if closable}
-            <button
-                type="button"
-                class="absolute inset-0 z-0 bg-backdrop backdrop-blur-sm"
-                aria-label="Close drawer"
-                tabindex="-1"
-                onclick={handleClose}
-                transition:fly={{ duration: 150 }}
-            ></button>
-        {:else}
-            <div
-                class="absolute inset-0 z-0 bg-backdrop backdrop-blur-sm"
-                transition:fly={{ duration: 150 }}
-            ></div>
-        {/if}
+    <dialog
+        use:showModal
+        {...dialogHandlers}
+        aria-labelledby={title ? titleId : undefined}
+        class="fixed inset-0 m-0 h-full max-h-none w-full max-w-none border-0 bg-transparent p-0 text-inherit backdrop:bg-transparent"
+    >
+        <div
+            class="pointer-events-none absolute inset-0 z-0 bg-backdrop backdrop-blur-sm"
+            aria-hidden="true"
+            transition:fade={{ duration: 150 }}
+        ></div>
         <div
             use:trapFocus
@@ -108,9 +103,6 @@
                 {className}
             "
             style={panelStyle}
-            role="dialog"
-            aria-modal="true"
-            aria-labelledby={title ? "drawer-title" : undefined}
             transition:fly={{ ...flyParams[side], duration: 250 }}
         >
             {#if header}
@@ -123,7 +115,7 @@
                 >
                     <div>
                         {#if title}
-                            <Heading level={2} size="lg" id="drawer-title">{title}</Heading>
+                            <Heading level={2} size="lg" id={titleId}>{title}</Heading>
                         {/if}
                     </div>
                     {#if closable}
@@ -150,5 +142,5 @@
                 </div>
             {/if}
         </div>
-    </div>
+    </dialog>
 {/if}

package/src/lib/components/DurationInput.svelte CHANGED Viewed

@@ -3,7 +3,7 @@
 <script lang="ts">
     import { CircleAlert, Clock } from "@lucide/svelte";
-    import ms, { type StringValue } from "ms";
+    import { formatDurationExact, parseDuration } from "../utils/format.js";
     type InputSize = "sm" | "md" | "lg";
@@ -56,28 +56,9 @@
     const errorBorder =
         "border-danger-surface focus:border-danger-surface focus:ring-danger-surface";
-    function formatMs(msValue: number): string {
-        if (typeof msValue !== "number" || isNaN(msValue)) return "";
-        try {
-            return ms(msValue);
-        } catch {
-            return "";
-        }
-    }
-    function parseToMs(str: string): number | null {
-        if (!str || !str.trim()) return null;
-        try {
-            const result = ms(str as StringValue);
-            return typeof result === "number" ? result : null;
-        } catch {
-            return null;
-        }
-    }
     function updateFromValue() {
         if (!isFocused) {
-            textValue = value != null ? formatMs(value) : "";
+            textValue = value != null ? formatDurationExact(value) : "";
         }
     }
@@ -89,11 +70,11 @@
         const val = e.currentTarget.value;
         textValue = val;
-        const msValue = parseToMs(val);
+        const msValue = parseDuration(val);
         value = msValue;
-        if (typeof msValue === "number") {
-            parsedHuman = ms(msValue, { long: true });
+        if (msValue !== null) {
+            parsedHuman = formatDurationExact(msValue);
             if (error) error = undefined;
         } else {
             parsedHuman = "";
@@ -106,7 +87,7 @@
     function handleBlur() {
         isFocused = false;
-        textValue = value != null ? formatMs(value) : "";
+        textValue = value != null ? formatDurationExact(value) : "";
         parsedHuman = "";
     }
 </script>