@runwisp/ui 0.4.0

package/src/lib/components/Checkbox.svelte

@@ -0,0 +1,90 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    import type { HTMLInputAttributes } from "svelte/elements";
+    import { Check } from "@lucide/svelte";
+
+    type CheckboxSize = "sm" | "md" | "lg";
+
+    interface Props extends Omit<HTMLInputAttributes, "size" | "type"> {
+        size?: CheckboxSize;
+        label?: string;
+        description?: string;
+        checked?: boolean;
+        indeterminate?: boolean;
+        class?: string;
+    }
+
+    let {
+        size = "md",
+        label,
+        description,
+        checked = $bindable(false),
+        indeterminate = false,
+        disabled = false,
+        class: className = "",
+        ...restProps
+    }: Props = $props();
+
+    const sizeClasses: Record<CheckboxSize, { box: string; icon: number; text: string }> = {
+        sm: { box: "h-4 w-4", icon: 12, text: "text-sm" },
+        md: { box: "h-5 w-5", icon: 14, text: "text-sm" },
+        lg: { box: "h-6 w-6", icon: 16, text: "text-base" },
+    };
+</script>
+
+<label
+    class="inline-flex items-start gap-3 {disabled
+        ? 'cursor-not-allowed opacity-50'
+        : 'cursor-pointer'} {className}"
+>
+    <div class="relative flex shrink-0 items-center justify-center">
+        <input
+            type="checkbox"
+            bind:checked
+            {disabled}
+            class="
+				peer {sizeClasses[size].box} duration-fast
+				cursor-pointer appearance-none rounded
+				border-2 border-outline-hover
+				bg-surface-raised transition-colors checked:border-primary
+				checked:bg-primary hover:border-on-surface-faint checked:hover:border-primary-hover checked:hover:bg-primary-hover
+				focus:ring-2 focus:ring-ring/20
+				focus:ring-offset-0 focus:outline-none
+				disabled:cursor-not-allowed disabled:hover:border-outline-hover
+				disabled:checked:hover:bg-primary
+			"
+            {...restProps}
+        />
+        <div
+            class="duration-fast pointer-events-none absolute text-on-primary opacity-0 transition-opacity peer-checked:opacity-100"
+        >
+            {#if indeterminate}
+                <svg
+                    width={sizeClasses[size].icon}
+                    height={sizeClasses[size].icon}
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="3"
+                >
+                    <line x1="5" y1="12" x2="19" y2="12" />
+                </svg>
+            {:else}
+                <Check size={sizeClasses[size].icon} strokeWidth={3} />
+            {/if}
+        </div>
+    </div>
+
+    {#if label || description}
+        <div class="flex flex-col gap-0.5">
+            {#if label}
+                <span class="{sizeClasses[size].text} font-medium text-on-surface">{label}</span>
+            {/if}
+            {#if description}
+                <span class="text-sm text-on-surface-muted">{description}</span>
+            {/if}
+        </div>
+    {/if}
+</label>

package/src/lib/components/CodeBlock.svelte

@@ -0,0 +1,66 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    import { Check, Copy } from "@lucide/svelte";
+
+    interface Props {
+        code: string;
+        language?: string;
+        filename?: string;
+        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;
+        }
+    }
+
+    function handleCopy(): void {
+        void writeClipboard();
+    }
+</script>
+
+<div class="overflow-hidden rounded-xl border border-outline bg-surface-sunken {className}">
+    {#if filename || language}
+        <div
+            class="flex items-center justify-between border-b border-outline-faint px-4 py-2 font-mono text-xs text-on-surface-muted"
+        >
+            <span>{filename ?? language}</span>
+        </div>
+    {/if}
+    <div class="relative">
+        <pre
+            class="overflow-x-auto px-4 py-4 font-mono text-sm leading-relaxed text-on-surface"><code
+                >{code}</code
+            ></pre>
+        <button
+            type="button"
+            onclick={handleCopy}
+            class="absolute top-2 right-2 inline-flex items-center gap-1.5 rounded-md border border-outline bg-surface-raised px-2 py-1 text-xs font-medium text-on-surface-muted shadow-sm transition-colors hover:border-outline-hover hover:text-on-surface"
+            aria-label={copied ? "Copied" : "Copy to clipboard"}
+        >
+            {#if copied}
+                <Check size={14} class="text-success-surface" />
+                <span>Copied</span>
+            {:else}
+                <Copy size={14} />
+                <span>Copy</span>
+            {/if}
+        </button>
+    </div>
+</div>

package/src/lib/components/CronInput.svelte

@@ -0,0 +1,130 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    import { Info } from "@lucide/svelte";
+    import Input from "./Input.svelte";
+    import Modal from "./Modal.svelte";
+    import cronstrue from "cronstrue";
+    import { CronExpressionParser } from "cron-parser";
+
+    let { value = $bindable(), disabled = false } = $props<{
+        value: string;
+        disabled?: boolean;
+    }>();
+
+    let examplesModalOpen = $state(false);
+
+    const cronExamples = [
+        { cron: "* * * * *", description: "Every minute" },
+        { cron: "0 * * * *", description: "Every hour" },
+        { cron: "0 0 * * *", description: "Every day at midnight" },
+        { cron: "0 0 * * 0", description: "Every Sunday at midnight" },
+        { cron: "0 0 1 * *", description: "First day of every month" },
+        { cron: "0 9 * * 1-5", description: "Weekdays at 9 AM" },
+        { cron: "*/15 * * * *", description: "Every 15 minutes" },
+        { cron: "0 */6 * * *", description: "Every 6 hours" },
+        { cron: "30 4 1,15 * *", description: "1st and 15th at 4:30 AM" },
+        { cron: "0 0 * * 0,6", description: "Weekends at midnight" },
+    ];
+
+    function selectExample(cron: string) {
+        value = cron;
+        examplesModalOpen = false;
+    }
+
+    let explanation = $derived.by(() => {
+        if (!value || value.trim() === "") {
+            return { text: "Empty schedule", next: undefined, isValid: false };
+        }
+        try {
+            // cronstrue throws on invalid cron if throwExceptionOnParseError is true,
+            // 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);
+                next = interval.next().toDate();
+            } catch {
+                // If parser fails, we consider it invalid or at least can't show next run
+            }
+
+            return { text, next, isValid: true };
+        } catch {
+            return { text: "Invalid cron expression", next: undefined, isValid: false };
+        }
+    });
+
+    // 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>
+        <button
+            type="button"
+            class="flex items-center gap-1 text-xs text-primary hover:text-primary-hover"
+            onclick={() => (examplesModalOpen = true)}
+        >
+            Examples <Info size={12} />
+        </button>
+    </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!'
+                    : ''}"
+            />
+        </div>
+    </div>
+    <!-- Live Feedback -->
+    <div
+        class="flex items-start gap-3 rounded-md border p-3 transition-colors duration-200
+        {isError ? 'border-danger-200 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'}"
+            >
+                {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"
+                        >{explanation.next.toLocaleString()}</span
+                    >
+                </div>
+            {/if}
+        </div>
+    </div>
+</div>
+
+<Modal title="Cron Examples" size="lg" bind:open={examplesModalOpen}>
+    <div class="space-y-2">
+        <p class="text-sm text-on-surface-muted">
+            Click an example to use it, or use the format: minute hour day-of-month month
+            day-of-week
+        </p>
+        <div class="mt-4 max-h-100 space-y-1 overflow-y-auto">
+            {#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"
+                    onclick={() => selectExample(example.cron)}
+                >
+                    <code class="font-mono text-sm text-on-surface">{example.cron}</code>
+                    <span class="text-sm text-on-surface-muted">{example.description}</span>
+                </button>
+            {/each}
+        </div>
+    </div>
+</Modal>

package/src/lib/components/DataGrid.svelte

@@ -0,0 +1,368 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script module lang="ts">
+    import type { Snippet } from "svelte";
+
+    export interface Column<T> {
+        key: keyof T | string;
+        label: string;
+        sortable?: boolean;
+        width?: string;
+        align?: "left" | "center" | "right";
+        render?: Snippet<[T]>;
+    }
+
+    export interface DataGridProps<T> {
+        columns: Column<T>[];
+        data: T[];
+        selectable?: boolean;
+        selectedRows?: T[];
+        sortKey?: string;
+        sortDirection?: "asc" | "desc";
+        onSort?: (key: string) => void;
+        filterable?: boolean;
+        filterPlaceholder?: string;
+        filterKeys?: string[];
+        filterQuery?: string;
+        paginate?: boolean;
+        page?: number;
+        pageSize?: number;
+        pageSizeOptions?: number[];
+        total?: number;
+        onPageChange?: (page: number) => void;
+        onPageSizeChange?: (pageSize: number) => void;
+        onSelect?: (rows: T[]) => void;
+        emptyState?: Snippet;
+        emptyMessage?: string;
+        striped?: boolean;
+        hoverable?: boolean;
+        compact?: boolean;
+        rowKey?: keyof T;
+        rowAction?: Snippet<[T]>;
+        onRowClick?: (row: T) => void;
+        loading?: boolean;
+        stickyHeader?: boolean;
+        class?: string;
+        wrapperClass?: string;
+    }
+</script>
+
+<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 Fuse from "fuse.js";
+
+    import dlv from "dlv";
+
+    let {
+        columns,
+        data,
+        selectable = false,
+        selectedRows = $bindable([]),
+        sortKey = $bindable(undefined),
+        sortDirection = $bindable(undefined),
+        onSort,
+        filterable = false,
+        filterPlaceholder = "Filter…",
+        filterKeys,
+        filterQuery = $bindable(""),
+        paginate = false,
+        page = $bindable(1),
+        pageSize = $bindable(20),
+        pageSizeOptions,
+        total,
+        onPageChange,
+        onPageSizeChange,
+        onSelect,
+        emptyState,
+        emptyMessage = "No data available",
+        striped = false,
+        hoverable = true,
+        compact = false,
+        rowKey = "id" as keyof T,
+        rowAction,
+        onRowClick,
+        loading = false,
+        stickyHeader = false,
+        class: className = "",
+        wrapperClass,
+    }: DataGridProps<T> = $props();
+
+    function toggleAll() {
+        if (allSelected) {
+            selectedRows = [];
+        } else {
+            selectedRows = [...pagedData];
+        }
+        onSelect?.(selectedRows);
+    }
+
+    function toggleRow(row: T) {
+        const idx = selectedRows.findIndex((r) => r[rowKey] === row[rowKey]);
+        if (idx >= 0) {
+            selectedRows = selectedRows.filter((_, i) => i !== idx);
+        } else {
+            selectedRows = [...selectedRows, row];
+        }
+        onSelect?.(selectedRows);
+    }
+
+    function isSelected(row: T): boolean {
+        return selectedRows.some((r) => r[rowKey] === row[rowKey]);
+    }
+
+    function handleSort(key: string) {
+        if (onSort) {
+            onSort(key);
+            return;
+        }
+
+        if (sortKey === key) {
+            sortDirection = sortDirection === "asc" ? "desc" : "asc";
+        } else {
+            sortKey = key;
+            sortDirection = "asc";
+        }
+    }
+
+    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);
+    });
+
+    const totalItems = $derived(total ?? filteredData.length);
+    const totalPages = $derived(Math.max(1, Math.ceil(totalItems / Math.max(1, pageSize))));
+
+    $effect(() => {
+        if (!paginate) return;
+        if (page < 1) page = 1;
+        if (totalItems > 0 && page > totalPages) page = totalPages;
+    });
+
+    const pagedData = $derived.by(() => {
+        if (typeof total === "number") return filteredData;
+        if (!paginate) return filteredData;
+        const start = (page - 1) * pageSize;
+        return filteredData.slice(start, start + pageSize);
+    });
+
+    let allSelected = $derived(pagedData.length > 0 && selectedRows.length === pagedData.length);
+    let someSelected = $derived(selectedRows.length > 0 && selectedRows.length < pagedData.length);
+</script>
+
+<div
+    class="relative flex flex-col rounded-xl 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 as HTMLInputElement).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-t-xl rounded-b-xl {wrapperClass ??
+            (stickyHeader ? '' : 'overflow-x-auto')}"
+    >
+        {#if loading}
+            <div
+                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"
+                >
+                    <svg class="h-5 w-5 animate-spin text-primary" 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>
+                    <span class="text-sm font-medium text-on-surface-muted">Loading...</span>
+                </div>
+            </div>
+        {/if}
+
+        <table class="w-full text-sm">
+            <thead
+                class={stickyHeader
+                    ? "sticky top-0 z-10 bg-surface-sunken/95 backdrop-blur-sm"
+                    : "bg-surface-sunken/50"}
+            >
+                <tr class="border-b border-outline text-left">
+                    {#if selectable}
+                        <th class="w-12 px-4 py-3">
+                            <Checkbox
+                                checked={allSelected}
+                                indeterminate={someSelected}
+                                onchange={toggleAll}
+                                size="sm"
+                            />
+                        </th>
+                    {/if}
+                    {#each columns as column (column.key)}
+                        <th
+                            class="
+							    group px-4 {compact ? 'py-2' : 'py-3'}
+							    font-medium text-on-surface-muted
+							    {column.align === 'center' ? 'text-center' : ''}
+							    {column.align === 'right' ? 'text-right' : ''}
+						    "
+                            style={column.width ? `width: ${column.width}` : ""}
+                        >
+                            {#if column.sortable}
+                                <button
+                                    onclick={() => handleSort(column.key as string)}
+                                    class="
+                                        inline-flex items-center gap-1 transition-colors 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}
+                                    {:else}
+                                        <ArrowUpDown
+                                            size={14}
+                                            class="text-on-surface-faint opacity-0 transition-opacity group-hover:opacity-100"
+                                        />
+                                    {/if}
+                                </button>
+                            {:else}
+                                {column.label}
+                            {/if}
+                        </th>
+                    {/each}
+                    {#if rowAction}
+                        <th class="w-16 px-4 py-3"></th>
+                    {/if}
+                </tr>
+            </thead>
+            <tbody>
+                {#if pagedData.length === 0 && !loading}
+                    <tr>
+                        <td
+                            colspan={columns.length + (selectable ? 1 : 0) + (rowAction ? 1 : 0)}
+                            class="px-4 py-12 text-center text-on-surface-muted"
+                        >
+                            {#if emptyState}
+                                {@render emptyState()}
+                            {:else}
+                                {emptyMessage}
+                            {/if}
+                        </td>
+                    </tr>
+                {:else}
+                    {#each pagedData as row, idx (idx)}
+                        <tr
+                            class="
+							    border-b border-outline-faint 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}
+                                <td
+                                    class="px-4 {compact ? 'py-2' : 'py-3'} cursor-pointer"
+                                    onclick={(e) => {
+                                        if ((e.target as HTMLElement).tagName !== "INPUT")
+                                            toggleRow(row);
+                                    }}
+                                >
+                                    <Checkbox
+                                        checked={isSelected(row)}
+                                        size="sm"
+                                        class="pointer-events-none"
+                                    />
+                                </td>
+                            {/if}
+                            {#each columns as column (column.key)}
+                                <td
+                                    class="
+									    px-4 {compact ? 'py-2' : 'py-3'} text-on-surface-muted
+									    {column.align === 'center' ? 'text-center' : ''}
+									    {column.align === 'right' ? 'text-right' : ''}
+								    "
+                                >
+                                    {#if column.render}
+                                        {@render column.render(row)}
+                                    {:else}
+                                        {dlv(row, column.key as string) ?? "-"}
+                                    {/if}
+                                </td>
+                            {/each}
+                            {#if rowAction}
+                                <td class="px-4 {compact ? 'py-2' : 'py-3'} text-right">
+                                    {@render rowAction(row)}
+                                </td>
+                            {/if}
+                        </tr>
+                    {/each}
+                {/if}
+            </tbody>
+        </table>
+    </div>
+
+    {#if paginate}
+        <div class="border-t border-outline p-3">
+            <Pagination
+                {page}
+                {pageSize}
+                {pageSizeOptions}
+                {totalItems}
+                onPageChange={(p) => {
+                    page = p;
+                    onPageChange?.(p);
+                }}
+                onPageSizeChange={(s) => {
+                    pageSize = s;
+                    page = 1;
+                    onPageSizeChange?.(s);
+                }}
+            />
+        </div>
+    {/if}
+</div>