@runwisp/ui 0.13.0 → 0.15.0

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,16 +56,15 @@
         }
     });
 
-    // Determine state for styling
     let isError = $derived(!disabled && value && value.trim() !== "" && !explanation.isValid);
 </script>
 
 <div class="space-y-2">
     <div class="flex items-center justify-between">
-        <div class="text-sm font-medium text-on-surface-muted">Cron Schedule</div>
+        <div class="font-mono text-xs font-medium text-on-surface-muted">Cron Schedule</div>
         <button
             type="button"
-            class="flex items-center gap-1 text-xs text-primary hover:text-primary-hover"
+            class="flex items-center gap-1 font-mono text-xs text-primary hover:text-primary-hover"
             onclick={() => (examplesModalOpen = true)}
         >
             Examples <Info size={12} />
@@ -74,32 +72,31 @@
     </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
                 {disabled}
-                class="font-mono {isError
-                    ? '!focus:border-danger-500 !focus:ring-danger-500 border-danger-300!'
-                    : ''}"
+                class="font-mono {isError ? 'border-danger-surface!' : ''}"
             />
         </div>
     </div>
-    <!-- Live Feedback -->
     <div
-        class="flex items-start gap-3 rounded-md border p-3 transition-colors duration-200
-        {isError ? 'border-danger-soft-border bg-danger-soft' : 'border-outline bg-surface-sunken'}"
+        class="flex items-start gap-3 rounded-[4px] border p-3 {isError
+            ? 'border-danger-soft-border bg-danger-soft'
+            : 'border-outline bg-surface-sunken'}"
     >
         <Info size={18} class="mt-0.5 {isError ? 'text-danger-surface' : 'text-primary'}" />
         <div>
             <div
-                class="text-sm font-medium {isError ? 'text-danger-soft-text' : 'text-on-surface'}"
+                class="font-sans text-sm font-medium {isError
+                    ? 'text-danger-soft-text'
+                    : 'text-on-surface'}"
             >
                 {explanation.text}
             </div>
             {#if explanation.next}
-                <div class="mt-0.5 text-xs text-on-surface-muted">
-                    Next run: <span class="font-medium text-on-surface"
+                <div class="mt-0.5 font-sans text-xs text-on-surface-muted">
+                    Next run: <span class="font-mono font-medium text-on-surface"
                         >{explanation.next.toLocaleString()}</span
                     >
                 </div>
@@ -118,7 +115,7 @@
             {#each cronExamples as example (example.cron)}
                 <button
                     type="button"
-                    class="flex w-full items-center justify-between rounded-lg px-3 py-2 text-left transition-colors hover:bg-surface-sunken"
+                    class="flex w-full items-center justify-between rounded-[3px] px-3 py-2 text-left hover:bg-surface-sunken"
                     onclick={() => selectExample(example.cron)}
                 >
                     <code class="font-mono text-sm text-on-surface">{example.cron}</code>

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,
@@ -169,7 +167,7 @@
 </script>
 
 <div
-    class="relative flex flex-col rounded-xl border border-outline bg-surface-raised shadow-sm {className}"
+    class="relative flex flex-col rounded-[4px] border border-outline bg-surface-raised shadow-sm {className}"
 >
     {#if filterable}
         <div class="border-b border-outline p-3">
@@ -188,7 +186,7 @@
     {/if}
 
     <div
-        class="relative min-h-0 flex-1 rounded-t-xl rounded-b-xl {wrapperClass ??
+        class="relative min-h-0 flex-1 rounded-[4px] {wrapperClass ??
             (stickyHeader ? '' : 'overflow-x-auto')}"
     >
         {#if loading}
@@ -196,7 +194,7 @@
                 class="absolute inset-0 z-10 flex items-center justify-center bg-surface-raised/50 backdrop-blur-[1px]"
             >
                 <div
-                    class="flex items-center gap-3 rounded-full border border-outline-faint bg-surface-raised px-4 py-2 shadow-lg"
+                    class="flex items-center gap-3 rounded-full border border-outline bg-surface-raised px-4 py-2 shadow-md"
                 >
                     <svg class="h-5 w-5 animate-spin text-primary" viewBox="0 0 24 24" fill="none">
                         <circle
@@ -213,7 +211,7 @@
                             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>
-                    <span class="text-sm font-medium text-on-surface-muted">Loading...</span>
+                    <span class="font-mono text-sm text-on-surface-muted">Loading...</span>
                 </div>
             </div>
         {/if}
@@ -239,7 +237,7 @@
                         <th
                             class="
 							    group px-4 {compact ? 'py-2' : 'py-3'}
-							    font-medium text-on-surface-muted
+							    font-mono text-xs tracking-wide text-on-surface-faint uppercase
 							    {column.align === 'center' ? 'text-center' : ''}
 							    {column.align === 'right' ? 'text-right' : ''}
 						    "
@@ -249,7 +247,7 @@
                                 <button
                                     onclick={() => handleSort(column.key as string)}
                                     class="
-                                        inline-flex items-center gap-1 transition-colors group-hover:text-on-surface
+                                        inline-flex items-center gap-1 group-hover:text-on-surface
                                         {sortKey === column.key ? 'text-on-surface' : ''}
                                     "
                                 >
@@ -263,7 +261,7 @@
                                     {:else}
                                         <ArrowUpDown
                                             size={14}
-                                            class="text-on-surface-faint opacity-0 transition-opacity group-hover:opacity-100"
+                                            class="text-on-surface-faint opacity-0 group-hover:opacity-100"
                                         />
                                     {/if}
                                 </button>
@@ -295,13 +293,12 @@
                     {#each pagedData as row, idx (idx)}
                         <tr
                             class="
-							    border-b border-outline-faint last:border-b-0
+							    border-b border-outline last:border-b-0
 							    {striped && idx % 2 === 1 ? 'bg-surface-sunken/30' : ''}
 							    {hoverable ? 'hover:bg-surface-sunken' : ''}
 							    {isSelected(row) ? 'bg-primary-soft/30' : ''}
 							    {onRowClick ? 'cursor-pointer' : ''}
-							    transition-colors duration-200
-						    "
+							    						    "
                             onclick={() => onRowClick?.(row)}
                         >
                             {#if selectable}
@@ -329,7 +326,11 @@
                                     {#if column.render}
                                         {@render column.render(row)}
                                     {:else}
-                                        {dlv(row, column.key as string) ?? "-"}
+                                        <!-- Raw field value: a token, so mono. Snippet-rendered
+                                             cells choose their own voice. -->
+                                        <span class="font-mono"
+                                            >{row[column.key as keyof T] ?? "-"}</span
+                                        >
                                     {/if}
                                 </td>
                             {/each}

package/src/lib/components/Drawer.svelte

@@ -100,7 +100,7 @@
         <div
             class="
                 absolute z-10 flex flex-col
-                bg-surface-overlay shadow-xl
+                border border-outline bg-surface-overlay shadow-lg
                 {positionClasses[side]}
                 {className}
             "
@@ -110,18 +110,20 @@
             aria-labelledby={title ? "drawer-title" : undefined}
             transition:fly={{ ...flyParams[side], duration: 250 }}
         >
-            <!-- Header -->
             {#if header}
-                <div class="border-b border-outline-faint px-6 py-4">
+                <div class="border-b border-outline px-6 py-4">
                     {@render header()}
                 </div>
             {:else if title || closable}
                 <div
-                    class="flex items-start justify-between gap-4 border-b border-outline-faint px-6 py-4"
+                    class="flex items-start justify-between gap-4 border-b border-outline px-6 py-4"
                 >
                     <div>
                         {#if title}
-                            <h2 id="drawer-title" class="text-lg font-semibold text-on-surface">
+                            <h2
+                                id="drawer-title"
+                                class="font-mono text-lg font-semibold text-on-surface"
+                            >
                                 {title}
                             </h2>
                         {/if}
@@ -129,7 +131,7 @@
                     {#if closable}
                         <button
                             onclick={handleClose}
-                            class="-m-2 shrink-0 rounded-lg p-2 text-on-surface-faint transition-colors hover:bg-surface-sunken hover:text-on-surface-muted"
+                            class="-m-2 shrink-0 rounded-[3px] p-2 text-on-surface-faint hover:bg-surface-sunken hover:text-on-surface-muted"
                             aria-label="Close"
                         >
                             <X size={20} />
@@ -138,16 +140,14 @@
                 </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-faint bg-surface-sunken/50 px-6 py-4">
+                <div class="border-t border-outline bg-surface-sunken px-6 py-4">
                     {@render footer()}
                 </div>
             {/if}

package/src/lib/components/Dropdown.svelte

@@ -6,8 +6,6 @@
     import type { Component } from "svelte";
     import { tick, onDestroy } from "svelte";
     import { EllipsisVertical, Check } from "@lucide/svelte";
-    import { scale } from "svelte/transition";
-    import { quintOut } from "svelte/easing";
     import { computePosition, autoUpdate, flip, shift, offset } from "@floating-ui/dom";
 
     interface MenuItem {
@@ -58,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, {
@@ -71,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}`;
                 }
@@ -127,7 +121,7 @@
         bind:this={triggerEl}
         aria-label={triggerLabel}
         aria-expanded={open}
-        class="rounded-lg p-2 text-on-surface-muted transition-colors hover:bg-surface-sunken hover:text-on-surface focus:ring-2 focus:ring-outline focus:outline-none active:bg-surface-sunken"
+        class="rounded-[3px] p-2 text-on-surface-muted hover:bg-surface-sunken hover:text-on-surface focus:ring-2 focus:ring-outline focus:outline-none active:bg-surface-sunken"
     >
         {#if trigger}
             {@render trigger()}
@@ -141,12 +135,11 @@
             use:portal
             bind:this={menuEl}
             role="menu"
-            transition:scale={{ duration: 150, start: 0.95, easing: quintOut }}
             class="
 				z-[9999]
 				min-w-48 overflow-y-auto
-				rounded-xl
-				border border-outline bg-surface-overlay py-1 shadow-xl shadow-on-surface/5
+				rounded-[4px]
+				border border-outline bg-surface-overlay py-1 shadow-lg
 			"
             style="transform-origin: {transformOrigin};"
         >
@@ -155,20 +148,19 @@
             {:else}
                 {#each items as item, idx (idx)}
                     {#if item.divider}
-                        <hr class="my-1 border-outline-faint" />
+                        <hr class="my-1 border-outline" />
                     {:else if item.href}
                         <a
                             href={item.href}
                             title={item.title}
                             role="menuitem"
                             class="
-									mx-1 flex items-center gap-3 rounded-lg px-3 py-2 text-sm
+									mx-1 flex items-center gap-3 rounded-[3px] px-3 py-2 font-mono text-sm
 									{item.danger
                                 ? 'text-danger-soft-text hover:bg-danger-soft'
-                                : 'text-on-surface-muted hover:bg-surface-sunken'}
+                                : 'text-on-surface-muted hover:bg-surface-sunken hover:text-on-surface'}
 									{item.disabled ? 'cursor-not-allowed opacity-50' : ''}
-								transition-colors
-							"
+															"
                         >
                             {#if item.icon}
                                 {@const Icon = item.icon}
@@ -183,11 +175,11 @@
                             title={item.title}
                             role="menuitem"
                             class="
-									mx-1 box-border flex w-full max-w-[calc(100%-8px)] items-center gap-3 rounded-lg px-3 py-2 text-left text-sm
+									mx-1 box-border flex w-full max-w-[calc(100%-8px)] items-center gap-3 rounded-[3px] px-3 py-2 text-left font-mono text-sm
 									{item.danger
                                 ? 'text-danger-soft-text hover:bg-danger-soft'
-                                : 'text-on-surface-muted hover:bg-surface-sunken'}
-									transition-colors disabled:cursor-not-allowed
+                                : 'text-on-surface-muted hover:bg-surface-sunken hover:text-on-surface'}
+									disabled:cursor-not-allowed
 									disabled:opacity-50
 							"
                         >

package/src/lib/components/DurationInput.svelte

@@ -46,15 +46,15 @@
     };
 
     const inputClasses = `
-        w-full rounded-lg border
+        w-full rounded-[3px] border font-mono
         bg-surface-raised text-on-surface placeholder:text-on-surface-faint
-        focus:outline-none focus:ring-4 focus:ring-ring/10 focus:border-ring
+        focus:outline-none focus:border-ring focus:ring-2 focus:ring-ring focus:ring-offset-2
         disabled:bg-surface-sunken disabled:text-on-surface-muted disabled:cursor-not-allowed
-        transition-all duration-normal ease-in-out
-    `;
+            `;
 
     const normalBorder = "border-outline hover:border-outline-hover shadow-sm";
-    const errorBorder = "border-danger-400 focus:border-danger-500 focus:ring-danger-500/20";
+    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 "";
@@ -113,14 +113,14 @@
 
 <div class="space-y-1.5 {className}">
     {#if label}
-        <label for={inputId} class="block text-sm font-medium text-on-surface-muted">
+        <label for={inputId} class="block font-mono text-xs font-medium text-on-surface-muted">
             {label}
         </label>
     {/if}
 
     <div class="group relative">
         <div
-            class="pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 text-on-surface-faint transition-colors group-focus-within:text-primary"
+            class="pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 text-on-surface-faint group-focus-within:text-primary"
         >
             <Clock size={16} />
         </div>
@@ -155,18 +155,14 @@
     </div>
 
     {#if parsedHuman && isFocused}
-        <p
-            class="animate-in slide-in-from-top-1 fade-in text-xs font-medium text-primary duration-200"
-        >
+        <p class="font-sans text-xs font-medium text-primary">
             {parsedHuman}
         </p>
     {:else if error}
-        <p
-            class="animate-in slide-in-from-top-1 fade-in text-sm text-danger-soft-text duration-200"
-        >
+        <p class="font-sans text-xs text-danger-soft-text">
             {error}
         </p>
     {:else if hint}
-        <p class="text-sm text-on-surface-muted">{hint}</p>
+        <p class="font-sans text-xs text-on-surface-muted">{hint}</p>
     {/if}
 </div>

package/src/lib/components/EmptyState.svelte

@@ -32,7 +32,7 @@
         <Icon size={iconSize} class="text-on-surface-faint" />
     </div>
 
-    <h3 class="mb-1 text-lg font-semibold text-on-surface">{title}</h3>
+    <h3 class="mb-1 font-mono text-lg font-semibold text-on-surface">{title}</h3>
 
     {#if description}
         <p class="mb-6 max-w-sm text-sm text-on-surface-muted">{description}</p>

package/src/lib/components/ErrorState.svelte

@@ -41,14 +41,14 @@
 
     const IconComponent = $derived(icon ?? (variant === "disconnected" ? WifiOff : TriangleAlert));
 
-    const iconBg = $derived(variant === "disconnected" ? "bg-danger-soft" : "bg-warning-soft");
+    const iconBg = $derived(variant === "disconnected" ? "bg-warning-soft" : "bg-danger-soft");
     const iconColor = $derived(
-        variant === "disconnected" ? "text-danger-surface" : "text-warning-surface",
+        variant === "disconnected" ? "text-warning-soft-text" : "text-danger-soft-text",
     );
 </script>
 
 <div
-    class="flex flex-col items-center justify-center gap-4 rounded-xl border border-outline bg-surface-raised px-6 py-12 text-center {className}"
+    class="flex flex-col items-center justify-center gap-4 rounded-[4px] border border-outline bg-surface-raised px-6 py-12 text-center {className}"
     role="alert"
 >
     <div class="rounded-full {iconBg} p-3">
@@ -56,7 +56,7 @@
     </div>
 
     <div class="space-y-1">
-        <h3 class="text-lg font-semibold text-on-surface">{defaultTitle}</h3>
+        <h3 class="font-mono text-lg font-semibold text-on-surface">{defaultTitle}</h3>
         <p class="max-w-sm text-sm text-on-surface-muted">{message}</p>
     </div>
 

package/src/lib/components/FeatureCard.svelte

@@ -15,19 +15,19 @@
 </script>
 
 <article
-    class="overflow-hidden rounded-xl border border-outline bg-surface-raised p-6 shadow-sm transition-colors hover:border-outline-hover {className}"
+    class="overflow-hidden rounded-[4px] border border-outline bg-surface-raised p-6 hover:border-outline-hover {className}"
 >
     <div class="flex flex-col gap-3">
         {#if Icon}
             <span
-                class="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-primary-soft text-primary-soft-text"
+                class="inline-flex h-10 w-10 items-center justify-center rounded-[3px] border border-primary-soft-border bg-primary-soft text-primary-soft-text"
             >
                 <Icon size={20} />
             </span>
         {/if}
-        <h3 class="text-lg font-semibold text-on-surface">{title}</h3>
+        <h3 class="font-mono text-base text-primary">{title}</h3>
         {#if children}
-            <div class="text-sm leading-relaxed text-on-surface-muted">
+            <div class="font-sans text-sm leading-relaxed text-on-surface-muted">
                 {@render children()}
             </div>
         {/if}

package/src/lib/components/FormField.svelte

@@ -36,7 +36,7 @@
 
 <div class="space-y-1.5 {className}">
     {#if label}
-        <label for={fieldId} class="block text-sm font-medium text-on-surface-muted">
+        <label for={fieldId} class="block font-mono text-xs font-medium text-on-surface-muted">
             {label}
             {#if required}
                 <span class="text-danger-soft-text">*</span>
@@ -45,18 +45,16 @@
     {/if}
 
     {#if description}
-        <p class="text-sm text-on-surface-faint">{description}</p>
+        <p class="font-sans text-xs text-on-surface-faint">{description}</p>
     {/if}
 
     {@render children()}
 
     {#if error}
-        <p
-            class="animate-in slide-in-from-top-1 fade-in text-sm text-danger-soft-text duration-200"
-        >
+        <p class="font-sans text-xs text-danger-soft-text">
             {error}
         </p>
     {:else if hint}
-        <p class="text-sm text-on-surface-muted">{hint}</p>
+        <p class="font-sans text-xs text-on-surface-muted">{hint}</p>
     {/if}
 </div>

package/src/lib/components/Heading.svelte

@@ -40,6 +40,9 @@
     const tag = $derived(`h${level}` as const);
 </script>
 
-<svelte:element this={tag} class="text-on-surface {sizeClasses[resolvedSize]} {className}">
+<svelte:element
+    this={tag}
+    class="font-mono tracking-tight text-on-surface {sizeClasses[resolvedSize]} {className}"
+>
     {@render children()}
 </svelte:element>

package/src/lib/components/Input.svelte

@@ -43,20 +43,20 @@
     };
 
     const inputClasses = `
-		w-full rounded-lg border
+		w-full rounded-[3px] border font-mono
 		bg-surface-raised text-on-surface placeholder:text-on-surface-faint
-		focus:outline-none focus:ring-4 focus:ring-ring/10 focus:border-ring
+		focus:outline-none focus:border-ring focus:ring-2 focus:ring-ring focus:ring-offset-2
 		disabled:bg-surface-sunken disabled:text-on-surface-muted disabled:cursor-not-allowed
-		transition-all duration-normal ease-in-out
-	`;
+			`;
 
     const normalBorder = "border-outline hover:border-outline-hover shadow-sm";
-    const errorBorder = "border-danger-400 focus:border-danger-500 focus:ring-danger-500/20";
+    const errorBorder =
+        "border-danger-surface focus:border-danger-surface focus:ring-danger-surface";
 </script>
 
 <div class="space-y-1.5 {className}">
     {#if label}
-        <label for={inputId} class="block text-sm font-medium text-on-surface-muted">
+        <label for={inputId} class="block font-mono text-xs font-medium text-on-surface-muted">
             {label}
         </label>
     {/if}
@@ -64,7 +64,7 @@
     <div class="group relative">
         {#if leadingIcon}
             <div
-                class="pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 text-on-surface-faint transition-colors group-focus-within:text-on-surface-muted"
+                class="pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 text-on-surface-faint group-focus-within:text-on-surface-muted"
             >
                 {@render leadingIcon()}
             </div>
@@ -97,7 +97,7 @@
             </div>
         {:else if trailingIcon}
             <div
-                class="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-on-surface-faint transition-colors group-focus-within:text-on-surface-muted"
+                class="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-on-surface-faint group-focus-within:text-on-surface-muted"
             >
                 {@render trailingIcon()}
             </div>
@@ -105,12 +105,10 @@
     </div>
 
     {#if error}
-        <p
-            class="animate-in slide-in-from-top-1 fade-in text-sm text-danger-soft-text duration-200"
-        >
+        <p class="font-sans text-xs text-danger-soft-text">
             {error}
         </p>
     {:else if hint}
-        <p class="text-sm text-on-surface-muted">{hint}</p>
+        <p class="font-sans text-xs text-on-surface-muted">{hint}</p>
     {/if}
 </div>

package/src/lib/components/Kbd.svelte

@@ -16,7 +16,7 @@
         min-w-[1.5em] px-1.5 py-0.5
         text-xs font-mono font-medium
         bg-surface-sunken text-on-surface-muted
-        border border-outline rounded-md
+        border border-outline rounded-[3px]
         shadow-sm
     `;
 </script>

package/src/lib/components/Link.svelte

@@ -27,9 +27,8 @@
 
     const baseClasses = `
         inline-flex items-center gap-1
-        transition-colors duration-normal ease-out
-        focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring/10 focus-visible:border-ring
-        rounded-sm
+                focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
+        rounded-[3px]
     `;
 
     const variantClasses: Record<LinkVariant, string> = {

package/src/lib/components/LinkButton.svelte

@@ -40,7 +40,7 @@
     {...restProps}
 >
     {#if icon}
-        <span class="shrink-0 transition-transform group-active:scale-95">
+        <span class="shrink-0 group-active:scale-95">
             {@render icon()}
         </span>
     {/if}
@@ -48,7 +48,7 @@
         {@render children()}
     {/if}
     {#if iconRight}
-        <span class="shrink-0 transition-transform group-active:scale-95">
+        <span class="shrink-0 group-active:scale-95">
             {@render iconRight()}
         </span>
     {/if}