@runwisp/ui 0.14.0 → 0.15.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@runwisp/ui",
   "description": "Svelte 5 UI component library for RunWisp dashboards and admin interfaces.",
-  "version": "0.14.0",
+  "version": "0.15.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": "0.14.0",
-    "@runwisp/typescript-config": "0.14.0",
+    "@runwisp/eslint-config": "0.15.0",
+    "@runwisp/typescript-config": "0.15.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/dlv": "^1.1.5",
     "@types/ms": "^2.1.0",
     "@types/node": "^26.1.2",
     "eslint": "^10.8.0",
@@ -94,13 +93,11 @@
     "@fontsource-variable/geist-mono": "^5.3.0",
     "@fontsource/tasa-orbiter": "^5.3.0",
     "@lucide/svelte": "^1.28.0",
-    "@runwisp/common": "0.14.0",
+    "@runwisp/common": "0.15.0",
     "@tanstack/svelte-virtual": "^3.13.35",
     "ansi-to-html": "^0.7.2",
     "cron-parser": "^5.7.0",
     "cronstrue": "^3.24.0",
-    "date-fns": "^4.4.0",
-    "dlv": "^1.1.3",
     "fuse.js": "^7.5.0",
     "ms": "^2.1.3"
   }

package/src/lib/actions/portal.ts

@@ -1,9 +1,6 @@
 // SPDX-FileCopyrightText: PoppyCake, s.r.o.
 // SPDX-License-Identifier: Apache-2.0
 
-/**
- * Svelte Action for portaling an element to the body
- */
 export function portal(node: HTMLElement) {
     document.body.appendChild(node);
     return {

package/src/lib/components/CronInput.svelte

@@ -42,7 +42,6 @@
             // but we want to catch it to show "Invalid cron expression".
             const text = cronstrue.toString(value, { throwExceptionOnParseError: true });
 
-            // Calculate next run
             let next: Date | undefined;
             try {
                 const interval = CronExpressionParser.parse(value);
@@ -57,7 +56,6 @@
         }
     });
 
-    // Determine state for styling
     let isError = $derived(!disabled && value && value.trim() !== "" && !explanation.isValid);
 </script>
 
@@ -74,7 +72,6 @@
     </div>
     <div class="flex gap-4">
         <div class="flex-1">
-            <!-- Pass connection-status-like classes effectively by using the component props or class -->
             <Input
                 placeholder="* * * * *"
                 bind:value
@@ -83,7 +80,6 @@
             />
         </div>
     </div>
-    <!-- Live Feedback -->
     <div
         class="flex items-start gap-3 rounded-[4px] border p-3 {isError
             ? 'border-danger-soft-border bg-danger-soft'

package/src/lib/components/DataGrid.svelte

@@ -55,8 +55,6 @@
     import Pagination from "./Pagination.svelte";
     import Fuse from "fuse.js";
 
-    import dlv from "dlv";
-
     let {
         columns,
         data,
@@ -331,7 +329,7 @@
                                         <!-- Raw field value: a token, so mono. Snippet-rendered
                                              cells choose their own voice. -->
                                         <span class="font-mono"
-                                            >{dlv(row, column.key as string) ?? "-"}</span
+                                            >{row[column.key as keyof T] ?? "-"}</span
                                         >
                                     {/if}
                                 </td>

package/src/lib/components/Drawer.svelte

@@ -110,7 +110,6 @@
             aria-labelledby={title ? "drawer-title" : undefined}
             transition:fly={{ ...flyParams[side], duration: 250 }}
         >
-            <!-- Header -->
             {#if header}
                 <div class="border-b border-outline px-6 py-4">
                     {@render header()}
@@ -141,14 +140,12 @@
                 </div>
             {/if}
 
-            <!-- Body -->
             {#if children}
                 <div class="flex-1 overflow-y-auto px-6 py-4">
                     {@render children()}
                 </div>
             {/if}
 
-            <!-- Footer -->
             {#if footer}
                 <div class="border-t border-outline bg-surface-sunken px-6 py-4">
                     {@render footer()}

package/src/lib/components/Dropdown.svelte

@@ -56,11 +56,7 @@
 
             void computePosition(triggerEl, menuEl, {
                 placement,
-                middleware: [
-                    offset(4), // MENU_OFFSET
-                    flip(),
-                    shift({ padding: 8 }), // VIEWPORT_PADDING
-                ],
+                middleware: [offset(4), flip(), shift({ padding: 8 })],
             }).then(({ x, y, placement }) => {
                 if (menuEl) {
                     Object.assign(menuEl.style, {
@@ -69,7 +65,7 @@
                         position: "absolute",
                     });
 
-                    // Simple origin logic based on verify placement
+                    // Flip transform origin vertically when the menu flips above the trigger
                     const isTop = placement.startsWith("top");
                     transformOrigin = `${isTop ? "bottom" : "top"} ${align}`;
                 }

package/src/lib/components/Modal.svelte

@@ -89,7 +89,6 @@
             aria-modal="true"
             aria-labelledby={title ? "modal-title" : undefined}
         >
-            <!-- Header -->
             {#if header}
                 <div class="border-b border-outline px-6 py-4">
                     {@render header()}
@@ -123,14 +122,12 @@
                 </div>
             {/if}
 
-            <!-- Body -->
             {#if children}
                 <div class="flex-1 overflow-y-auto px-6 py-4">
                     {@render children()}
                 </div>
             {/if}
 
-            <!-- Footer -->
             {#if footer}
                 <div class="rounded-b-[4px] border-t border-outline bg-surface-sunken px-6 py-4">
                     {@render footer()}

package/src/lib/components/Select.svelte

@@ -53,7 +53,7 @@
         id = `select-${generateUlid()}`,
         name,
         onchange,
-        onsearch, // New prop
+        onsearch,
     }: Props & { onsearch?: (query: string) => void } = $props();
 
     let isOpen = $state(false);
@@ -156,7 +156,7 @@
         value = option.value;
         onchange?.(value);
         isOpen = false;
-        cleanupFloating?.(); // Cleanup immediately on select
+        cleanupFloating?.();
     }
 
     function handleKeydown(e: KeyboardEvent) {
@@ -294,12 +294,10 @@
         </div>
     </button>
 
-    <!-- Hidden input for form submission if needed -->
     {#if name}
         <input type="hidden" {name} {value} />
     {/if}
 
-    <!-- Dropdown Menu -->
     {#if isOpen}
         <div use:portal bind:this={menuEl} class="z-[9999] min-w-[200px]">
             <div
@@ -384,7 +382,6 @@
     {/if}
 </div>
 
-<!-- Helper Component for items -->
 {#snippet OptionItem({
     option,
     active,

package/src/lib/components/StatusIndicator.svelte

@@ -26,7 +26,6 @@
         class: className = "",
     }: Props = $props();
 
-    // Status configuration lookup
     const STATUS_CONFIG: Record<Status, { label: string; classes: string; iconColor: string }> = {
         running: {
             label: "Running",
@@ -65,7 +64,6 @@
         },
     };
 
-    // Size configuration lookup
     const SIZE_CONFIG: Record<Size, { classes: string; iconSize: number }> = {
         sm: { classes: "px-2 py-0.5 text-2xs gap-1.5", iconSize: 10 },
         md: { classes: "px-2.5 py-0.5 text-xs gap-1.5", iconSize: 12 },
@@ -81,7 +79,6 @@
     role="status"
     in:fade={{ duration: 150 }}
 >
-    <!-- Icon Container -->
     <span class="flex shrink-0 items-center justify-center {config.iconColor}">
         {#if status === "running" || pulse}
             <svg

package/src/lib/components/Tabs.svelte

@@ -80,7 +80,6 @@
 </script>
 
 <div class={className}>
-    <!-- Tab list -->
     <div
         class="
 			{variant === 'underline' ? 'border-b border-outline' : ''}
@@ -133,7 +132,6 @@
         </nav>
     </div>
 
-    <!-- Tab panels -->
     {#if children && renderedActiveTab}
         <div
             id="tabpanel-{renderedActiveTab}"

package/src/lib/components/ToastContainer.svelte

@@ -2,10 +2,6 @@
 <!-- SPDX-License-Identifier: Apache-2.0 -->
 
 <script lang="ts">
-    /**
-     * Toast notification component
-     * Displays toast notifications for user feedback
-     */
     import { fly, fade } from "svelte/transition";
     import { CircleCheck, CircleX, Info, TriangleAlert, X } from "@lucide/svelte";
     import { toast, type Toast } from "../utils/toast.svelte.js";
@@ -50,7 +46,6 @@
     }
 </script>
 
-<!-- Toast Container -->
 <div
     class="pointer-events-none fixed bottom-4 left-1/2 z-[100] flex -translate-x-1/2 flex-col gap-2"
     role="region"

package/src/lib/components/Tooltip.svelte

@@ -41,6 +41,9 @@
 <div class="group relative inline-block {className}">
     {@render children()}
 
+    <!-- Hover intent: 100ms before it appears, so sweeping the pointer across a
+         dense row doesn't flash a trail of bubbles. Still no fade — `duration-0`
+         keeps the appearance instant once the delay is served, per DESIGN.md. -->
     <div
         class="
 			absolute z-50 {positionClasses[position]}
@@ -48,8 +51,8 @@
 			border border-outline bg-surface-overlay px-2.5 py-1.5 font-sans
 			text-xs
 			{wide ? 'w-max max-w-xs whitespace-normal' : 'whitespace-nowrap'}
-			text-on-surface opacity-0 group-hover:visible
-			group-hover:opacity-100
+			text-on-surface opacity-0 transition-[opacity,visibility]
+			delay-100 duration-0 group-hover:visible group-hover:opacity-100
 		"
         role="tooltip"
     >