@runwisp/ui 1.4.0 → 1.5.0

package/src/lib/components/DataGrid.svelte

@@ -25,18 +25,13 @@
         /** Take over sorting (e.g. server-side). When set, the grid only reports
          *  the clicked key and never reorders `data` itself. */
         onSort?: (key: string) => void;
-        /** Built-in fuzzy search box above the table. For typed filters use
-         *  `FilterBar` + `applyFilters` outside the grid instead. */
-        filterable?: boolean;
-        filterPlaceholder?: string;
-        filterKeys?: string[];
-        filterQuery?: string;
         paginate?: boolean;
         page?: number;
         pageSize?: number;
         pageSizeOptions?: number[];
         /** Server mode: the full row count. `data` is then the current page as
-         *  delivered, so the grid skips its own filter, sort, and slicing. */
+         *  delivered, so the grid skips its own sort and slicing. Filter with
+         *  `FilterBar` + `applyFilters` before handing rows to the grid. */
         total?: number;
         onPageChange?: (page: number) => void;
         onPageSizeChange?: (pageSize: number) => void;
@@ -85,10 +80,13 @@
 <script lang="ts" generics="T extends object">
     import { ArrowUp, ArrowDown, ArrowUpDown } from "@lucide/svelte";
     import Checkbox from "./Checkbox.svelte";
-    import Input from "./Input.svelte";
     import Pagination from "./Pagination.svelte";
     import Spinner from "./Spinner.svelte";
-    import Fuse from "fuse.js";
+    import Table from "./Table.svelte";
+    import TableBody from "./TableBody.svelte";
+    import TableCell from "./TableCell.svelte";
+    import TableHead from "./TableHead.svelte";
+    import TableRow from "./TableRow.svelte";
     import { selectionState } from "./data-grid-selection.js";
 
     let {
@@ -99,10 +97,6 @@
         sortKey = $bindable(undefined),
         sortDirection = $bindable(undefined),
         onSort,
-        filterable = false,
-        filterPlaceholder = "Filter…",
-        filterKeys,
-        filterQuery = $bindable(""),
         paginate = false,
         page = $bindable(1),
         pageSize = $bindable(20),
@@ -166,36 +160,16 @@
         }
     }
 
-    const searchableKeys = $derived(
-        filterKeys?.length ? filterKeys : columns.map((c) => String(c.key)),
-    );
-
-    const fuse = $derived(
-        new Fuse(data, {
-            keys: searchableKeys,
-            threshold: 0.3,
-            ignoreLocation: true,
-        }),
-    );
-
-    const filteredData = $derived.by(() => {
-        if (typeof total === "number") return data;
-
-        if (!filterable || !filterQuery.trim()) return data;
-
-        return fuse.search(filterQuery).map((r) => r.item);
-    });
-
     // Client-side sort. Off in server mode (`total` set) or when the parent
     // drives sorting via `onSort`; otherwise reorder by the active key so a
     // sortable header actually sorts. Stable + inert on display-only keys.
     const sortedData = $derived.by(() => {
         if (onSort || typeof total === "number" || !sortKey || !sortDirection) {
-            return filteredData;
+            return data;
         }
         const dir = sortDirection === "desc" ? -1 : 1;
         const key = sortKey;
-        return [...filteredData].sort(
+        return [...data].sort(
             (a, b) => dir * compareValues(resolvePath(a, key), resolvePath(b, key)),
         );
     });
@@ -220,7 +194,7 @@
     let someSelected = $derived(selection.someSelected);
 
     // Cell rhythm — airy by default, tight when compact. Header + body share it.
-    const cellPad = $derived(compact ? "px-3 py-2" : "px-5 py-3.5");
+    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)]";
 </script>
@@ -230,22 +204,6 @@
         ? ''
         : 'rounded-[4px] border border-outline bg-surface-raised shadow-sm'} {className}"
 >
-    {#if filterable}
-        <div class="border-b border-outline p-3">
-            <Input
-                value={filterQuery}
-                oninput={(e) => {
-                    filterQuery = e.currentTarget.value;
-                    if (paginate && !total) page = 1;
-                }}
-                type="search"
-                placeholder={filterPlaceholder}
-                size="sm"
-                class="max-w-sm"
-            />
-        </div>
-    {/if}
-
     <div
         class="relative min-h-0 flex-1 rounded-[4px] {wrapperClass ??
             (stickyHeader ? '' : 'overflow-x-auto')}"
@@ -263,91 +221,93 @@
             </div>
         {/if}
 
-        <table class="w-full text-sm">
+        <Table bare>
             {#if showHeader}
-                <thead
+                <TableHead
                     class={stickyHeader
                         ? "sticky top-0 z-10 bg-surface-raised/95 backdrop-blur-sm"
                         : ""}
                 >
-                    <tr class="border-b border-outline text-left">
-                        {#if selectable}
-                            <th class="w-12 {cellPad}">
-                                <Checkbox
-                                    checked={allSelected}
-                                    indeterminate={someSelected}
-                                    onchange={toggleAll}
-                                    size="sm"
-                                />
-                            </th>
-                        {/if}
-                        {#each columns as column (column.key)}
-                            <th
-                                class="
-                                    group {cellPad}
-                                    font-mono text-xs tracking-[0.08em] text-on-surface-faint uppercase
-                                    {column.align === 'center' ? 'text-center' : ''}
-                                    {column.align === 'right' ? 'text-right' : ''}
-                                    {sortKey === column.key
-                                    ? 'text-on-surface shadow-[inset_0_-2px_0_var(--color-primary)]'
-                                    : ''}
-                                "
-                                style={column.width ? `width: ${column.width}` : ""}
-                            >
-                                {#if column.sortable}
-                                    <button
-                                        onclick={() => handleSort(String(column.key))}
-                                        class="
-                                            inline-flex items-center gap-1 group-hover:text-on-surface
-                                            {sortKey === column.key ? 'text-on-surface' : ''}
-                                        "
-                                    >
-                                        {column.label}
-                                        {#if sortKey === column.key}
-                                            {#if sortDirection === "asc"}
-                                                <ArrowUp size={14} class="text-primary" />
-                                            {:else}
-                                                <ArrowDown size={14} class="text-primary" />
-                                            {/if}
+                    {#if selectable}
+                        <TableCell header {density} class="w-12">
+                            <Checkbox
+                                checked={allSelected}
+                                indeterminate={someSelected}
+                                onchange={toggleAll}
+                                size="sm"
+                            />
+                        </TableCell>
+                    {/if}
+                    {#each columns as column (column.key)}
+                        {@const sorted = sortKey === column.key}
+                        <TableCell
+                            header
+                            {density}
+                            align={column.align}
+                            aria-sort={sorted
+                                ? sortDirection === "asc"
+                                    ? "ascending"
+                                    : "descending"
+                                : undefined}
+                            class="group"
+                            style={column.width ? `width: ${column.width}` : undefined}
+                        >
+                            {#if column.sortable}
+                                <button
+                                    onclick={() => handleSort(String(column.key))}
+                                    class="
+                                        inline-flex items-center gap-1 group-hover:text-on-surface
+                                        {sorted ? 'text-on-surface' : ''}
+                                    "
+                                >
+                                    {column.label}
+                                    {#if sorted}
+                                        {#if sortDirection === "asc"}
+                                            <ArrowUp size={14} class="text-primary" />
                                         {:else}
-                                            <ArrowUpDown
-                                                size={14}
-                                                class="text-on-surface-faint opacity-0 group-hover:opacity-100"
-                                            />
+                                            <ArrowDown size={14} class="text-primary" />
                                         {/if}
-                                    </button>
-                                {:else}
-                                    {column.label}
-                                {/if}
-                            </th>
-                        {/each}
-                        {#if rowAction}
-                            <th class="w-16 {cellPad}"></th>
-                        {/if}
-                    </tr>
-                </thead>
+                                    {:else}
+                                        <ArrowUpDown
+                                            size={14}
+                                            class="text-on-surface-faint opacity-0 group-hover:opacity-100"
+                                        />
+                                    {/if}
+                                </button>
+                            {:else}
+                                {column.label}
+                            {/if}
+                        </TableCell>
+                    {/each}
+                    {#if rowAction}
+                        <TableCell header {density} class="w-16" />
+                    {/if}
+                </TableHead>
             {/if}
-            <tbody>
+            <TableBody>
                 {#if pagedData.length === 0 && !loading}
-                    <tr>
-                        <td
+                    <TableRow border="none">
+                        <TableCell
                             colspan={columns.length + (selectable ? 1 : 0) + (rowAction ? 1 : 0)}
-                            class="px-4 py-12 text-center text-on-surface-muted"
+                            density="none"
+                            align="center"
+                            class="px-4 py-12 text-on-surface-muted"
                         >
                             {#if emptyState}
                                 {@render emptyState()}
                             {:else}
                                 {emptyMessage}
                             {/if}
-                        </td>
-                    </tr>
+                        </TableCell>
+                    </TableRow>
                 {:else}
                     {#each pagedData as row, idx (row[rowKey])}
-                        <tr
+                        <TableRow
+                            border="faint"
+                            {hoverable}
                             class="
-                                group border-b border-outline-faint last:border-b-0
+                                group
                                 {striped && idx % 2 === 1 ? 'bg-surface-sunken/30' : ''}
-                                {hoverable ? 'hover:bg-surface-sunken' : ''}
                                 {isSelected(row) ? 'bg-primary-soft/30' : ''}
                                 {onRowClick ? 'cursor-pointer' : ''}
                                 {rowClass ? rowClass(row) : ''}
@@ -357,8 +317,9 @@
                             {#if selectable}
                                 <!-- stopPropagation: a selection click must never also
                                      fire onRowClick (which usually navigates away). -->
-                                <td
-                                    class="{cellPad} cursor-pointer {hoverable ? railHover : ''}"
+                                <TableCell
+                                    {density}
+                                    class="cursor-pointer {hoverable ? railHover : ''}"
                                     onclick={(e) => {
                                         e.stopPropagation();
                                         if (!(e.target instanceof HTMLInputElement)) toggleRow(row);
@@ -369,16 +330,17 @@
                                         size="sm"
                                         class="pointer-events-none"
                                     />
-                                </td>
+                                </TableCell>
                             {/if}
                             {#each columns as column, ci (column.key)}
-                                <td
-                                    class="
-                                        {cellPad} text-on-surface-muted
-                                        {column.align === 'center' ? 'text-center' : ''}
-                                        {column.align === 'right' ? 'text-right' : ''}
-                                        {ci === 0 && !selectable && hoverable ? railHover : ''}
-                                    "
+                                <TableCell
+                                    {density}
+                                    align={column.align}
+                                    class="text-on-surface-muted {ci === 0 &&
+                                    !selectable &&
+                                    hoverable
+                                        ? railHover
+                                        : ''}"
                                 >
                                     {#if column.render}
                                         {@render column.render(row)}
@@ -389,18 +351,18 @@
                                             >{resolvePath(row, String(column.key)) ?? "-"}</span
                                         >
                                     {/if}
-                                </td>
+                                </TableCell>
                             {/each}
                             {#if rowAction}
-                                <td class="{cellPad} text-right">
+                                <TableCell {density} align="right">
                                     {@render rowAction(row)}
-                                </td>
+                                </TableCell>
                             {/if}
-                        </tr>
+                        </TableRow>
                     {/each}
                 {/if}
-            </tbody>
-        </table>
+            </TableBody>
+        </Table>
     </div>
 
     {#if footer}

package/src/lib/components/Drawer.svelte

@@ -4,6 +4,7 @@
 <script lang="ts">
     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";
@@ -122,12 +123,7 @@
                 >
                     <div>
                         {#if title}
-                            <h2
-                                id="drawer-title"
-                                class="font-mono text-lg font-semibold text-on-surface"
-                            >
-                                {title}
-                            </h2>
+                            <Heading level={2} size="lg" id="drawer-title">{title}</Heading>
                         {/if}
                     </div>
                     {#if closable}

package/src/lib/components/Dropdown.svelte

@@ -4,9 +4,11 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
     import type { Component } from "svelte";
-    import { tick, onDestroy } from "svelte";
     import { EllipsisVertical, Check } from "@lucide/svelte";
-    import { computePosition, autoUpdate, flip, shift, offset } from "@floating-ui/dom";
+    import { floating, isOutsideClick } from "../actions/floating.js";
+    import { portal } from "../actions/portal.js";
+    import { trapFocus } from "../actions/focusTrap.js";
+    import Separator from "./Separator.svelte";
 
     interface MenuItem {
         label?: string;
@@ -41,74 +43,27 @@
     let open = $state(false);
     let triggerEl = $state<HTMLElement | null>(null);
     let menuEl = $state<HTMLElement | null>(null);
-    let cleanupFloating = $state<(() => void) | null>(null);
     let transformOrigin = $state("top right");
 
-    import { portal } from "../actions/portal.js";
-    import { trapFocus } from "../actions/focusTrap.js";
-
-    async function setupFloating() {
-        if (!triggerEl || !menuEl) return;
-
-        cleanupFloating = autoUpdate(triggerEl, menuEl, () => {
-            if (!triggerEl || !menuEl) return;
-
-            const placement = align === "right" ? "bottom-end" : "bottom-start";
-
-            void computePosition(triggerEl, menuEl, {
-                placement,
-                middleware: [offset(4), flip(), shift({ padding: 8 })],
-            }).then(({ x, y, placement }) => {
-                if (menuEl) {
-                    Object.assign(menuEl.style, {
-                        left: `${x}px`,
-                        top: `${y}px`,
-                        position: "absolute",
-                    });
-
-                    // Flip transform origin vertically when the menu flips above the trigger
-                    const isTop = placement.startsWith("top");
-                    transformOrigin = `${isTop ? "bottom" : "top"} ${align}`;
-                }
-            });
-        });
+    // Flip the transform origin vertically when the menu flips above the trigger.
+    function placed(placement: string) {
+        transformOrigin = `${placement.startsWith("top") ? "bottom" : "top"} ${align}`;
     }
 
     function handleItemClick(item: MenuItem) {
         if (item.divider) return;
         if (item.disabled) return;
         item.onClick?.();
-        toggle(false);
-    }
-
-    function toggle(value: boolean) {
-        open = value;
-        if (open) {
-            void tick().then(() => {
-                void setupFloating();
-            });
-        } else {
-            cleanupFloating?.();
-            cleanupFloating = null;
-        }
+        open = false;
     }
 
     function handleOutsideClick(e: MouseEvent) {
-        const path = e.composedPath();
-        if (triggerEl && path.includes(triggerEl)) return;
-        if (menuEl && path.includes(menuEl)) return;
-        if (open) toggle(false);
+        if (open && isOutsideClick(e, triggerEl, menuEl)) open = false;
     }
 
     function handleKeyDown(e: KeyboardEvent) {
-        if (e.key === "Escape" && open) {
-            toggle(false);
-        }
+        if (e.key === "Escape" && open) open = false;
     }
-
-    onDestroy(() => {
-        cleanupFloating?.();
-    });
 </script>
 
 <svelte:window onclick={handleOutsideClick} onkeydown={handleKeyDown} />
@@ -117,7 +72,7 @@
     <button
         onclick={(e) => {
             e.stopPropagation();
-            toggle(!open);
+            open = !open;
         }}
         bind:this={triggerEl}
         aria-label={triggerLabel}
@@ -135,6 +90,13 @@
         <div
             use:portal
             use:trapFocus
+            use:floating={{
+                reference: triggerEl,
+                placement: align === "right" ? "bottom-end" : "bottom-start",
+                offset: 4,
+                padding: 8,
+                onPlace: placed,
+            }}
             bind:this={menuEl}
             role="menu"
             class="
@@ -150,7 +112,7 @@
             {:else}
                 {#each items as item, idx (idx)}
                     {#if item.divider}
-                        <hr class="my-1 border-outline" />
+                        <Separator class="my-1" />
                     {:else if item.href}
                         <a
                             href={item.href}

package/src/lib/components/EmptyState.svelte

@@ -5,6 +5,7 @@
     import type { Snippet } from "svelte";
     import type { Component } from "svelte";
     import { Inbox } from "@lucide/svelte";
+    import Heading from "./Heading.svelte";
 
     interface Props {
         title?: string;
@@ -32,7 +33,7 @@
         <Icon size={iconSize} class="text-on-surface-faint" />
     </div>
 
-    <h3 class="mb-1 font-mono text-lg font-semibold text-on-surface">{title}</h3>
+    <Heading level={3} size="lg" class="mb-1">{title}</Heading>
 
     {#if description}
         <p class="mb-6 max-w-sm text-sm text-on-surface-muted">{description}</p>

package/src/lib/components/ErrorState.svelte

@@ -5,6 +5,7 @@
     import type { Snippet, Component } from "svelte";
     import { TriangleAlert, RefreshCw, WifiOff } from "@lucide/svelte";
     import Button from "./Button.svelte";
+    import Heading from "./Heading.svelte";
 
     interface Props {
         /** Error message to display */
@@ -56,7 +57,7 @@
     </div>
 
     <div class="space-y-1">
-        <h3 class="font-mono text-lg font-semibold text-on-surface">{defaultTitle}</h3>
+        <Heading level={3} size="lg">{defaultTitle}</Heading>
         <p class="max-w-sm text-sm text-on-surface-muted">{message}</p>
     </div>
 

package/src/lib/components/Heading.svelte

@@ -3,18 +3,19 @@
 
 <script lang="ts">
     import type { Snippet } from "svelte";
+    import type { HTMLAttributes } from "svelte/elements";
 
     type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
     type HeadingSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
 
-    interface Props {
+    interface Props extends Omit<HTMLAttributes<HTMLHeadingElement>, "children" | "class"> {
         level: HeadingLevel;
         size?: HeadingSize;
         children: Snippet;
         class?: string;
     }
 
-    let { level, size, children, class: className = "" }: Props = $props();
+    let { level, size, children, class: className = "", ...restProps }: Props = $props();
 
     const defaultSizeMap: Record<HeadingLevel, HeadingSize> = {
         1: "4xl",
@@ -25,24 +26,30 @@
         6: "md",
     };
 
-    const sizeClasses: Record<string, string> = {
-        xs: "text-xs font-semibold",
-        sm: "text-sm font-semibold",
-        md: "text-base font-semibold",
-        lg: "text-lg font-semibold",
-        xl: "text-xl font-bold",
-        "2xl": "text-2xl font-bold",
-        "3xl": "text-3xl font-bold",
-        "4xl": "text-4xl font-bold tracking-tight",
+    const sizeClasses: Record<HeadingSize, string> = {
+        xs: "text-xs",
+        sm: "text-sm",
+        md: "text-base",
+        lg: "text-lg",
+        xl: "text-xl",
+        "2xl": "text-2xl",
+        "3xl": "text-3xl",
+        "4xl": "text-4xl",
     };
 
     const resolvedSize = $derived(size ?? defaultSizeMap[level]);
     const tag = $derived(`h${level}` as const);
 </script>
 
+<!-- theme.css styles raw h1-h3 globally; data-rw-heading opts out of that rule
+     so these classes (the same runbook look: mono, 800, tight) decide. -->
 <svelte:element
     this={tag}
-    class="font-mono tracking-tight text-on-surface {sizeClasses[resolvedSize]} {className}"
+    data-rw-heading
+    class="font-mono leading-[1.1] font-extrabold tracking-[-0.02em] text-on-surface {sizeClasses[
+        resolvedSize
+    ]} {className}"
+    {...restProps}
 >
     {@render children()}
 </svelte:element>

package/src/lib/components/Kbd.svelte

@@ -2,23 +2,34 @@
 <!-- SPDX-License-Identifier: Apache-2.0 -->
 
 <script lang="ts">
+    type KbdSize = "xs" | "sm";
+    /** `faint` sits quietly inside an input; `console` rides dark terminal chrome and inherits its text color. */
+    type KbdTone = "default" | "faint" | "console";
+
     interface Props {
         keys: string | string[];
+        size?: KbdSize;
+        tone?: KbdTone;
         class?: string;
     }
 
-    let { keys, class: className = "" }: Props = $props();
+    let { keys, size = "sm", tone = "default", class: className = "" }: Props = $props();
 
     const keyList = $derived(Array.isArray(keys) ? keys : [keys]);
 
-    const kbdClasses = `
-        inline-flex items-center justify-center
-        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-[3px]
-        shadow-sm
-    `;
+    const sizeClasses: Record<KbdSize, string> = {
+        xs: "px-1.5 text-2xs",
+        sm: "min-w-[1.5em] px-1.5 text-xs",
+    };
+
+    // Vertical padding lives with the tone: console keys sit inline in toolbar
+    // text and must not grow the row.
+    const toneClasses: Record<KbdTone, string> = {
+        default:
+            "py-0.5 font-medium bg-surface-sunken text-on-surface-muted border-outline shadow-sm",
+        faint: "py-0.5 font-medium bg-surface-raised text-on-surface-faint border-outline-faint shadow-sm",
+        console: "tracking-wide border-[var(--rw-con-gutter)]",
+    };
 </script>
 
 <span class="inline-flex items-center gap-1 {className}">
@@ -26,6 +37,10 @@
         {#if i > 0}
             <span class="text-xs text-on-surface-faint select-none">+</span>
         {/if}
-        <kbd class={kbdClasses}>{key}</kbd>
+        <kbd
+            class="inline-flex items-center justify-center rounded-[3px] border font-mono {sizeClasses[
+                size
+            ]} {toneClasses[tone]}">{key}</kbd
+        >
     {/each}
 </span>