@runwisp/ui 1.4.0 → 1.5.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@runwisp/ui",
   "description": "Svelte 5 UI component library for RunWisp dashboards and admin interfaces.",
-  "version": "1.4.0",
+  "version": "1.5.1",
   "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.4.0",
-    "@runwisp/typescript-config": "1.4.0",
+    "@runwisp/eslint-config": "1.5.1",
+    "@runwisp/typescript-config": "1.5.1",
     "@storybook/addon-a11y": "^10.5.5",
     "@storybook/addon-docs": "^10.5.5",
     "@storybook/addon-svelte-csf": "^5.1.2",
@@ -93,12 +93,11 @@
     "@fontsource-variable/geist-mono": "^5.3.0",
     "@fontsource/tasa-orbiter": "^5.3.0",
     "@lucide/svelte": "^1.52.0",
-    "@runwisp/common": "1.4.0",
+    "@runwisp/common": "1.5.1",
     "@tanstack/svelte-virtual": "^3.13.35",
     "ansi-to-html": "^0.7.2",
     "cron-parser": "^5.7.0",
     "cronstrue": "^3.24.0",
-    "fuse.js": "^7.5.0",
     "ms": "^2.1.3"
   }
 }

package/src/lib/actions/floating.ts

@@ -0,0 +1,73 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Placement } from "@floating-ui/dom";
+import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
+
+export interface FloatingOptions {
+    reference: HTMLElement | null;
+    placement: Placement;
+    offset: number;
+    padding: number;
+    /** Size the floating element to the reference's width (e.g. a select menu). */
+    matchWidth?: boolean;
+    /** When true the element is left unpositioned (e.g. shown as a bottom sheet). */
+    disabled?: boolean;
+    /** Called with the final placement after flip(), e.g. to set a transform origin. */
+    onPlace?: (placement: Placement) => void;
+}
+
+/**
+ * Svelte action that keeps `node` positioned against `options.reference`
+ * while mounted, re-computing on scroll, resize and layout changes.
+ */
+export function floating(node: HTMLElement, options: FloatingOptions) {
+    let stop: (() => void) | null = null;
+
+    function start(opts: FloatingOptions) {
+        stop?.();
+        stop = null;
+        const reference = opts.reference;
+        if (opts.disabled === true || !reference) {
+            node.style.removeProperty("left");
+            node.style.removeProperty("top");
+            node.style.removeProperty("position");
+            return;
+        }
+        if (opts.matchWidth === true) node.style.width = `${String(reference.offsetWidth)}px`;
+        // A position computed after stop() must not land on a re-purposed node.
+        let live = true;
+        const cleanup = autoUpdate(reference, node, () => {
+            void computePosition(reference, node, {
+                placement: opts.placement,
+                middleware: [offset(opts.offset), flip(), shift({ padding: opts.padding })],
+            }).then(({ x, y, placement }) => {
+                if (!live) return;
+                Object.assign(node.style, {
+                    left: `${String(x)}px`,
+                    top: `${String(y)}px`,
+                    position: "absolute",
+                });
+                opts.onPlace?.(placement);
+            });
+        });
+        stop = () => {
+            live = false;
+            cleanup();
+        };
+    }
+
+    start(options);
+    return {
+        update: start,
+        destroy() {
+            stop?.();
+        },
+    };
+}
+
+/** Whether a click landed outside every given element (null entries are ignored). */
+export function isOutsideClick(e: MouseEvent, ...elements: (HTMLElement | null)[]): boolean {
+    const path = e.composedPath();
+    return !elements.some((el) => el !== null && path.includes(el));
+}

package/src/lib/actions/focusTrap.ts

@@ -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/portal.ts

@@ -1,8 +1,12 @@
 // SPDX-FileCopyrightText: PoppyCake, s.r.o.
 // SPDX-License-Identifier: Apache-2.0
 
+// Inside a modal <dialog> the rest of the page is inert and below the top
+// layer, so content opened from it (a menu, a popover) is moved into the
+// dialog instead of <body>.
 export function portal(node: HTMLElement) {
-    document.body.appendChild(node);
+    const host = node.parentElement?.closest("dialog[open]") ?? document.body;
+    host.appendChild(node);
     return {
         destroy() {
             node.remove();

package/src/lib/components/Accordion.svelte

@@ -2,18 +2,22 @@
 <!-- SPDX-License-Identifier: Apache-2.0 -->
 
 <script lang="ts">
-    import type { Snippet } from "svelte";
+    import { setContext, type Snippet } from "svelte";
+    import { ACCORDION_KEY, AccordionGroup } from "./accordion.svelte.js";
 
     interface Props {
+        /** `single` keeps at most one item open; `multiple` lets items open independently. */
         type?: "single" | "multiple";
         children?: Snippet;
         class?: string;
     }
 
     let { type = "multiple", children, class: className = "" }: Props = $props();
+
+    setContext(ACCORDION_KEY, new AccordionGroup(() => type === "single"));
 </script>
 
-<div class="divide-y divide-outline {className}" role="presentation" data-accordion-type={type}>
+<div class="divide-y divide-outline {className}">
     {#if children}
         {@render children()}
     {/if}

package/src/lib/components/AccordionItem.svelte

@@ -2,62 +2,119 @@
 <!-- SPDX-License-Identifier: Apache-2.0 -->
 
 <script lang="ts">
-    import type { Snippet } from "svelte";
+    import { getContext, untrack, type Snippet } from "svelte";
     import { ChevronDown } from "@lucide/svelte";
+    import { ACCORDION_KEY, type AccordionGroup } from "./accordion.svelte.js";
+
+    /** `framed` is a standalone bordered panel; `plain` is a row inside an Accordion. */
+    type AccordionItemVariant = "plain" | "framed";
 
     interface Props {
         title?: Snippet | string;
+        /** Controls beside the header that must not toggle it (a switch, a delete button). */
+        actions?: Snippet;
         children?: Snippet;
         open?: boolean;
         disabled?: boolean;
+        variant?: AccordionItemVariant;
         class?: string;
     }
 
     let {
         title,
+        actions,
         children,
         open = $bindable(false),
         disabled = false,
+        variant = "plain",
         class: className = "",
     }: Props = $props();
 
+    const id = $props.id();
+    const group = getContext<AccordionGroup | undefined>(ACCORDION_KEY);
+
+    // Single mode: claim the group when this item opens (by click or binding)…
+    $effect(() => {
+        if (open && group?.single) {
+            untrack(() => {
+                group.active = id;
+            });
+        }
+    });
+
+    // …and close when another item claims it.
+    $effect(() => {
+        const active = group?.active;
+        if (active && active !== id) {
+            untrack(() => {
+                if (open) open = false;
+            });
+        }
+    });
+
     function toggle() {
         if (!disabled) {
             open = !open;
         }
     }
+
+    const framed = $derived(variant === "framed");
 </script>
 
-<div class="group {className}">
-    <button
-        type="button"
-        onclick={toggle}
-        {disabled}
-        class="
-            flex w-full items-center justify-between gap-3 py-4 text-left font-mono text-sm
-            text-on-surface hover:text-primary
-            disabled:cursor-not-allowed disabled:opacity-50
-        "
-        aria-expanded={open}
-    >
-        <span class="flex-1">
-            {#if typeof title === "function"}
-                {@render title()}
-            {:else if title}
-                {title}
-            {/if}
-        </span>
-        <ChevronDown size={16} class="shrink-0 text-on-surface-faint {open ? 'rotate-180' : ''}" />
-    </button>
+<div
+    class="group {framed
+        ? 'rounded-[4px] border border-outline bg-surface-raised'
+        : ''} {className}"
+>
+    <div class="flex items-center gap-3 {framed ? 'px-4' : ''}">
+        <button
+            type="button"
+            onclick={toggle}
+            {disabled}
+            class="
+                flex min-w-0 flex-1 items-center justify-between gap-3 text-left font-mono text-sm
+                text-on-surface hover:text-primary
+                disabled:cursor-not-allowed disabled:opacity-50
+                {framed ? 'py-3' : 'py-4'}
+            "
+            aria-expanded={open}
+            aria-controls="{id}-content"
+        >
+            <span class="min-w-0 flex-1">
+                {#if typeof title === "function"}
+                    {@render title()}
+                {:else if title}
+                    {title}
+                {/if}
+            </span>
+            <ChevronDown
+                size={16}
+                class="shrink-0 text-on-surface-faint {open ? 'rotate-180' : ''}"
+            />
+        </button>
+        {#if actions}
+            <div class="flex shrink-0 items-center gap-2">
+                {@render actions()}
+            </div>
+        {/if}
+    </div>
 
+    <!-- Collapsed content stays mounted for the height transition, so `inert`
+         keeps it out of the tab order and the accessibility tree. -->
     <div
+        id="{id}-content"
+        inert={!open}
         class="grid transition-[grid-template-rows] duration-150 ease-out {open
             ? 'grid-rows-[1fr]'
             : 'grid-rows-[0fr]'}"
     >
         <div class="overflow-hidden">
             {#if children}
-                <div class="pb-4 text-sm text-on-surface-muted">
+                <div
+                    class="text-sm text-on-surface-muted {framed
+                        ? 'border-t border-outline-faint p-4'
+                        : 'pb-4'}"
+                >
                     {@render children()}
                 </div>
             {/if}

package/src/lib/components/Avatar.svelte

@@ -44,7 +44,6 @@
         xl: "h-4 w-4",
     };
 
-    // Generate a consistent color based on name
     const colors = [
         "bg-primary",
         "bg-info",

package/src/lib/components/Badge.svelte

@@ -17,7 +17,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;

package/src/lib/components/CodeBlock.svelte

@@ -2,59 +2,108 @@
 <!-- SPDX-License-Identifier: Apache-2.0 -->
 
 <script lang="ts">
+    import type { Snippet } from "svelte";
+    import { CopyFeedback } from "../utils/clipboard.svelte.js";
+
+    type CodeBlockVariant = "terminal" | "surface";
+    type CodeBlockSize = "sm" | "md";
+
     interface Props {
-        code: string;
+        /** Plain source. Rendered unless `children` is set, and always what the copy button copies. */
+        code?: string;
+        /** Rich or highlighted markup. Without `code`, the copy button copies its rendered text. */
+        children?: Snippet;
         language?: string;
         filename?: string;
+        /** Shell prompt before the first line, e.g. "$". Never copied or selected. */
+        prompt?: string;
+        /** `terminal` stays dark in both themes; `surface` follows the page theme for in-page snippets. */
+        variant?: CodeBlockVariant;
+        size?: CodeBlockSize;
+        copyable?: boolean;
         class?: string;
     }
 
-    let { code, language, filename, class: className = "" }: Props = $props();
-
-    let copied = $state(false);
-    let resetTimer = $state<ReturnType<typeof setTimeout> | undefined>(undefined);
-
-    async function writeClipboard(): Promise<void> {
-        if (typeof navigator === "undefined" || !navigator.clipboard) return;
-        try {
-            await navigator.clipboard.writeText(code);
-            copied = true;
-            if (resetTimer) clearTimeout(resetTimer);
-            resetTimer = setTimeout(() => {
-                copied = false;
-            }, 2000);
-        } catch {
-            copied = false;
-        }
-    }
+    let {
+        code,
+        children,
+        language,
+        filename,
+        prompt,
+        variant = "terminal",
+        size = "md",
+        copyable = true,
+        class: className = "",
+    }: Props = $props();
+
+    const feedback = new CopyFeedback();
+    let codeEl = $state<HTMLElement | undefined>(undefined);
 
     function handleCopy(): void {
-        void writeClipboard();
+        void feedback.copy(code ?? codeEl?.textContent ?? "");
     }
+
+    const variantClasses: Record<
+        CodeBlockVariant,
+        { frame: string; header: string; prompt: string; button: string }
+    > = {
+        terminal: {
+            frame: "border-term-line bg-term text-term-text",
+            header: "border-term-line-2 bg-term-2 text-term-muted",
+            prompt: "text-term-teal",
+            button: "border-term-line-2 bg-term-2 text-term-muted hover:border-term-teal hover:text-term-teal",
+        },
+        surface: {
+            frame: "border-outline bg-surface-sunken text-on-surface-muted",
+            header: "border-outline bg-surface text-on-surface-faint",
+            prompt: "text-on-surface-faint",
+            button: "border-outline bg-surface-raised text-on-surface-faint hover:border-outline-hover hover:text-primary",
+        },
+    };
+
+    const sizeClasses: Record<CodeBlockSize, string> = {
+        sm: "px-4 py-3 text-xs",
+        md: "px-4 py-4 text-sm leading-relaxed",
+    };
+
+    const tone = $derived(variantClasses[variant]);
+    const hasHeader = $derived(Boolean(filename || language));
 </script>
 
-<div
-    class="overflow-hidden rounded-[4px] border border-term-line bg-term text-term-text {className}"
->
-    {#if filename || language}
+{#snippet copyButton(extra: string)}
+    <button
+        type="button"
+        onclick={handleCopy}
+        class="inline-flex items-center rounded-[3px] border px-2 py-1 font-mono text-xs {tone.button} {extra}"
+        aria-label={feedback.copied ? "Copied" : "Copy to clipboard"}
+    >
+        {feedback.copied ? "[copied]" : "[copy]"}
+    </button>
+{/snippet}
+
+<div class="overflow-hidden rounded-[4px] border {tone.frame} {className}">
+    {#if hasHeader}
         <div
-            class="flex items-center justify-between border-b border-term-line-2 bg-term-2 px-4 py-2 font-mono text-xs text-term-muted"
+            class="flex items-center justify-between gap-3 border-b px-4 py-2 font-mono text-xs {tone.header}"
         >
             <span>{filename ?? language}</span>
+            {#if copyable}
+                {@render copyButton("-my-1")}
+            {/if}
         </div>
     {/if}
     <div class="relative">
         <pre
-            class="overflow-x-auto px-4 py-4 font-mono text-sm leading-relaxed text-term-text"><code
-                >{code}</code
+            class="overflow-x-auto font-mono {sizeClasses[size]} {copyable && !hasHeader
+                ? 'pr-24'
+                : ''}">{#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>
-        <button
-            type="button"
-            onclick={handleCopy}
-            class="absolute top-2 right-2 inline-flex items-center rounded-[3px] border border-term-line-2 bg-term-2 px-2 py-1 font-mono text-xs text-term-muted hover:border-term-teal hover:text-term-teal"
-            aria-label={copied ? "Copied" : "Copy to clipboard"}
-        >
-            {copied ? "[copied]" : "[copy]"}
-        </button>
+        {#if copyable && !hasHeader}
+            {@render copyButton("absolute top-2 right-2")}
+        {/if}
     </div>
 </div>

package/src/lib/components/CronInput.svelte

@@ -8,10 +8,13 @@
     import cronstrue from "cronstrue";
     import { CronExpressionParser } from "cron-parser";
 
-    let { value = $bindable(), disabled = false } = $props<{
+    let {
+        value = $bindable(),
+        disabled = false,
+    }: {
         value: string;
         disabled?: boolean;
-    }>();
+    } = $props();
 
     let examplesModalOpen = $state(false);