@runwisp/ui 0.4.0

package/src/lib/components/StatusIndicator.svelte

@@ -0,0 +1,203 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    import { fade } from "svelte/transition";
+
+    type Status =
+        | "running"
+        | "success"
+        | "failed"
+        | "pending"
+        | "paused"
+        | "scheduled"
+        | "cancelled";
+    type Size = "sm" | "md" | "lg";
+
+    interface Props {
+        status: Status;
+        size?: Size;
+        showLabel?: boolean;
+        pulse?: boolean;
+        label?: string;
+        class?: string;
+    }
+
+    let {
+        status,
+        size = "md",
+        showLabel = true,
+        pulse = false,
+        label = undefined,
+        class: className = "",
+    }: Props = $props();
+
+    // Status configuration lookup
+    const STATUS_CONFIG: Record<Status, { label: string; classes: string; iconColor: string }> = {
+        running: {
+            label: "Running",
+            classes: "bg-info-soft text-info-soft-text border-info-soft ring-1 ring-info-soft",
+            iconColor: "text-info-surface",
+        },
+        success: {
+            label: "Success",
+            classes:
+                "bg-success-soft text-success-soft-text border-success-soft ring-1 ring-success-soft/50",
+            iconColor: "text-success-surface",
+        },
+        failed: {
+            label: "Failed",
+            classes:
+                "bg-danger-soft text-danger-soft-text border-danger-soft ring-1 ring-danger-soft/50",
+            iconColor: "text-danger-surface",
+        },
+        pending: {
+            label: "Pending",
+            classes: "bg-warning-soft text-warning-soft-text border-warning-soft",
+            iconColor: "text-warning-surface",
+        },
+        paused: {
+            label: "Paused",
+            classes: "bg-surface-sunken text-on-surface-muted border-outline",
+            iconColor: "text-on-surface-faint",
+        },
+        scheduled: {
+            label: "Scheduled",
+            classes: "bg-primary-soft text-primary-soft-text border-primary-soft",
+            iconColor: "text-primary",
+        },
+        cancelled: {
+            label: "Cancelled",
+            classes: "bg-surface-sunken text-on-surface-faint border-outline opacity-75",
+            iconColor: "text-on-surface-faint",
+        },
+    };
+
+    // 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 },
+        lg: { classes: "px-3 py-1 text-sm gap-2", iconSize: 14 },
+    };
+
+    const config = $derived(STATUS_CONFIG[status]);
+    const sizeConfig = $derived(SIZE_CONFIG[size]);
+</script>
+
+<div
+    class="duration-normal inline-flex items-center justify-center rounded-full border font-medium transition-all {config.classes} {sizeConfig.classes} {className}"
+    role="status"
+    in:fade={{ duration: 150 }}
+>
+    <!-- Icon Container -->
+    <span class="flex shrink-0 items-center justify-center {config.iconColor}">
+        {#if status === "running" || pulse}
+            <svg
+                width={sizeConfig.iconSize}
+                height={sizeConfig.iconSize}
+                viewBox="0 0 24 24"
+                fill="none"
+                class="animate-spin"
+            >
+                <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>
+        {:else if status === "success"}
+            <svg
+                width={sizeConfig.iconSize}
+                height={sizeConfig.iconSize}
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="3"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+            >
+                <polyline points="20 6 9 17 4 12"></polyline>
+            </svg>
+        {:else if status === "failed"}
+            <svg
+                width={sizeConfig.iconSize}
+                height={sizeConfig.iconSize}
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="3"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+            >
+                <line x1="18" y1="6" x2="6" y2="18"></line>
+                <line x1="6" y1="6" x2="18" y2="18"></line>
+            </svg>
+        {:else if status === "pending"}
+            <svg
+                width={sizeConfig.iconSize}
+                height={sizeConfig.iconSize}
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="3"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+            >
+                <circle cx="12" cy="12" r="10"></circle>
+                <polyline points="12 6 12 12 16 14"></polyline>
+            </svg>
+        {:else if status === "scheduled"}
+            <svg
+                width={sizeConfig.iconSize}
+                height={sizeConfig.iconSize}
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+            >
+                <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
+                <line x1="16" y1="2" x2="16" y2="6"></line>
+                <line x1="8" y1="2" x2="8" y2="6"></line>
+                <line x1="3" y1="10" x2="21" y2="10"></line>
+            </svg>
+        {:else if status === "paused"}
+            <svg
+                width={sizeConfig.iconSize}
+                height={sizeConfig.iconSize}
+                viewBox="0 0 24 24"
+                fill="currentColor"
+            >
+                <rect x="6" y="4" width="4" height="16" rx="1" />
+                <rect x="14" y="4" width="4" height="16" rx="1" />
+            </svg>
+        {:else if status === "cancelled"}
+            <svg
+                width={sizeConfig.iconSize}
+                height={sizeConfig.iconSize}
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+            >
+                <circle cx="12" cy="12" r="10"></circle>
+                <line x1="4.93" y1="4.93" x2="19.07" y2="19.07"></line>
+            </svg>
+        {/if}
+    </span>
+
+    {#if showLabel}
+        <span class="truncate">{label ?? config.label}</span>
+    {/if}
+</div>

package/src/lib/components/Table.svelte

@@ -0,0 +1,19 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    import type { Snippet } from "svelte";
+
+    interface Props {
+        children: Snippet;
+        class?: string;
+    }
+
+    let { children, class: className = "" }: Props = $props();
+</script>
+
+<div class="overflow-x-auto rounded-xl border border-outline {className}">
+    <table class="w-full text-sm">
+        {@render children()}
+    </table>
+</div>

package/src/lib/components/TableBody.svelte

@@ -0,0 +1,17 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    import type { Snippet } from "svelte";
+
+    interface Props {
+        children: Snippet;
+        class?: string;
+    }
+
+    let { children, class: className = "" }: Props = $props();
+</script>
+
+<tbody class={className}>
+    {@render children()}
+</tbody>

package/src/lib/components/TableCell.svelte

@@ -0,0 +1,34 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    import type { Snippet } from "svelte";
+
+    type CellAlign = "left" | "center" | "right";
+
+    interface Props {
+        header?: boolean;
+        align?: CellAlign;
+        children: Snippet;
+        class?: string;
+    }
+
+    let { header = false, align = "left", children, class: className = "" }: Props = $props();
+
+    const alignClasses: Record<CellAlign, string> = {
+        left: "text-left",
+        center: "text-center",
+        right: "text-right",
+    };
+
+    const tag = $derived(header ? "th" : "td");
+</script>
+
+<svelte:element
+    this={tag}
+    class="px-4 py-3 {alignClasses[align]} {header
+        ? 'text-xs font-medium tracking-wider text-on-surface-muted uppercase'
+        : 'text-on-surface'} {className}"
+>
+    {@render children()}
+</svelte:element>

package/src/lib/components/TableHead.svelte

@@ -0,0 +1,19 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    import type { Snippet } from "svelte";
+
+    interface Props {
+        children: Snippet;
+        class?: string;
+    }
+
+    let { children, class: className = "" }: Props = $props();
+</script>
+
+<thead class="bg-surface-sunken/50 {className}">
+    <tr>
+        {@render children()}
+    </tr>
+</thead>

package/src/lib/components/TableRow.svelte

@@ -0,0 +1,22 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    import type { Snippet } from "svelte";
+
+    interface Props {
+        children: Snippet;
+        hoverable?: boolean;
+        class?: string;
+    }
+
+    let { children, hoverable = false, class: className = "" }: Props = $props();
+</script>
+
+<tr
+    class="border-b border-outline-faint {hoverable
+        ? 'duration-fast transition-colors hover:bg-surface-sunken'
+        : ''} {className}"
+>
+    {@render children()}
+</tr>

package/src/lib/components/Tabs.svelte

@@ -0,0 +1,148 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import type { Component } from "svelte";
+
+    interface Tab {
+        id: string;
+        label: string;
+        icon?: Component;
+        badge?: string | number;
+        dirty?: boolean;
+        disabled?: boolean;
+    }
+
+    interface Props {
+        tabs: Tab[];
+        activeTab?: string;
+        onChange?: (tabId: string) => void;
+        variant?: "underline" | "pills" | "enclosed";
+        fullWidth?: boolean;
+        children?: Snippet<[string]>;
+        class?: string;
+    }
+
+    let {
+        tabs,
+        activeTab = $bindable(),
+        onChange,
+        variant = "underline",
+        fullWidth = false,
+        children,
+        class: className = "",
+    }: Props = $props();
+
+    $effect(() => {
+        if (!activeTab && tabs.length > 0) {
+            const firstId = tabs[0]?.id;
+            if (firstId) activeTab = firstId;
+        }
+    });
+
+    const renderedActiveTab = $derived(activeTab ?? tabs[0]?.id ?? "");
+
+    function handleTabClick(tabId: string) {
+        if (tabs.find((t) => t.id === tabId)?.disabled) return;
+        activeTab = tabId;
+        onChange?.(tabId);
+    }
+
+    function getTabButtonClasses(tab: Tab): string {
+        const baseClasses = `
+            ${fullWidth ? "flex-1" : ""}
+            inline-flex items-center justify-center gap-2 px-4 py-2.5
+            text-sm font-medium
+            transition-colors duration-150
+            disabled:cursor-not-allowed disabled:opacity-50
+        `;
+
+        const isActive = activeTab === tab.id;
+
+        if (variant === "underline") {
+            return `${baseClasses} -mb-px border-b-2 ${
+                isActive
+                    ? "border-primary text-primary-soft-text"
+                    : "border-transparent text-on-surface-muted hover:border-outline-hover hover:text-on-surface"
+            }`;
+        }
+
+        if (variant === "pills" || variant === "enclosed") {
+            return `${baseClasses} rounded-lg ${
+                isActive
+                    ? "bg-surface-raised text-on-surface shadow-sm"
+                    : "text-on-surface-muted hover:text-on-surface"
+            }`;
+        }
+
+        return baseClasses;
+    }
+</script>
+
+<div class={className}>
+    <!-- Tab list -->
+    <div
+        class="
+			{variant === 'underline' ? 'border-b border-outline' : ''}
+			{variant === 'pills' ? 'rounded-xl bg-surface-sunken p-1' : ''}
+			{variant === 'enclosed' ? 'rounded-xl border border-outline bg-surface-sunken p-1' : ''}
+		"
+        role="tablist"
+    >
+        <nav class="flex {fullWidth ? '' : 'gap-1'}" aria-label="Tabs">
+            {#each tabs as tab (tab.id)}
+                <button
+                    onclick={() => handleTabClick(tab.id)}
+                    class={getTabButtonClasses(tab)}
+                    role="tab"
+                    aria-selected={activeTab === tab.id}
+                    aria-controls="tabpanel-{tab.id}"
+                    disabled={tab.disabled}
+                >
+                    {#if tab.icon}
+                        {@const Icon = tab.icon}
+                        <Icon
+                            size={16}
+                            class={activeTab === tab.id ? "text-primary" : "text-on-surface-faint"}
+                        />
+                    {/if}
+                    <span>{tab.label}</span>
+                    {#if tab.dirty}
+                        <span
+                            class="h-1.5 w-1.5 rounded-full {activeTab === tab.id
+                                ? 'bg-warning-surface'
+                                : 'bg-on-surface-faint'}"
+                            aria-label="Unsaved changes"
+                            title="Unsaved changes"
+                        ></span>
+                    {/if}
+                    {#if tab.badge || tab.badge === 0}
+                        <span
+                            class="
+							rounded-full px-1.5 py-0.5 text-xs font-medium
+							{activeTab === tab.id
+                                ? 'bg-primary-soft text-primary-soft-text'
+                                : 'bg-surface-sunken text-on-surface-muted'}
+						"
+                        >
+                            {tab.badge}
+                        </span>
+                    {/if}
+                </button>
+            {/each}
+        </nav>
+    </div>
+
+    <!-- Tab panels -->
+    {#if children && renderedActiveTab}
+        <div
+            id="tabpanel-{renderedActiveTab}"
+            role="tabpanel"
+            aria-labelledby="tab-{renderedActiveTab}"
+            class="mt-4"
+        >
+            {@render children(renderedActiveTab)}
+        </div>
+    {/if}
+</div>

package/src/lib/components/Text.svelte

@@ -0,0 +1,57 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    import type { Snippet } from "svelte";
+
+    type TextSize = "xs" | "sm" | "base" | "lg" | "xl";
+    type TextWeight = "normal" | "medium" | "semibold" | "bold";
+    type TextColor = "default" | "muted" | "faint";
+    type TextElement = "p" | "span" | "div";
+
+    interface Props {
+        size?: TextSize;
+        weight?: TextWeight;
+        color?: TextColor;
+        as?: TextElement;
+        children: Snippet;
+        class?: string;
+    }
+
+    let {
+        size = "base",
+        weight = "normal",
+        color = "default",
+        as = "p",
+        children,
+        class: className = "",
+    }: Props = $props();
+
+    const sizeClasses: Record<TextSize, string> = {
+        xs: "text-xs",
+        sm: "text-sm",
+        base: "text-base",
+        lg: "text-lg",
+        xl: "text-xl",
+    };
+
+    const weightClasses: Record<TextWeight, string> = {
+        normal: "font-normal",
+        medium: "font-medium",
+        semibold: "font-semibold",
+        bold: "font-bold",
+    };
+
+    const colorClasses: Record<TextColor, string> = {
+        default: "text-on-surface",
+        muted: "text-on-surface-muted",
+        faint: "text-on-surface-faint",
+    };
+</script>
+
+<svelte:element
+    this={as}
+    class="{sizeClasses[size]} {weightClasses[weight]} {colorClasses[color]} {className}"
+>
+    {@render children()}
+</svelte:element>

package/src/lib/components/Textarea.svelte

@@ -0,0 +1,81 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    import type { HTMLTextareaAttributes } from "svelte/elements";
+    import { CircleAlert } from "@lucide/svelte";
+
+    interface Props extends HTMLTextareaAttributes {
+        label?: string;
+        hint?: string;
+        error?: string;
+        resize?: "none" | "vertical" | "horizontal" | "both";
+        class?: string;
+        value?: string;
+    }
+
+    let {
+        label,
+        hint,
+        error,
+        disabled = false,
+        resize = "vertical",
+        class: className = "",
+        value = $bindable(""),
+        id,
+        ...restProps
+    }: Props = $props();
+
+    const resizeClasses: Record<string, string> = {
+        none: "resize-none",
+        vertical: "resize-y",
+        horizontal: "resize-x",
+        both: "resize",
+    };
+
+    const textareaClasses = `
+		w-full px-3.5 py-2.5 rounded-lg border
+		text-sm bg-surface-raised text-on-surface placeholder:text-on-surface-faint
+		focus:outline-none focus:ring-2 focus:ring-offset-0
+		disabled:bg-surface-sunken disabled:text-on-surface-muted disabled:cursor-not-allowed
+		transition-colors duration-fast
+	`;
+
+    const normalBorder =
+        "border-outline hover:border-outline-hover focus:border-ring focus:ring-ring/20";
+    const errorBorder = "border-danger-400 focus:border-danger-500 focus:ring-danger-500/20";
+</script>
+
+<div class="space-y-1.5 {className}">
+    {#if label}
+        <label class="block text-sm font-medium text-on-surface-muted" for={id}>
+            {label}
+        </label>
+    {/if}
+
+    <div class="relative">
+        <textarea
+            class="
+					{textareaClasses}
+					{error ? errorBorder : normalBorder}
+					{resizeClasses[resize]}
+				"
+            {disabled}
+            {id}
+            bind:value
+            {...restProps}
+        ></textarea>
+
+        {#if error}
+            <div class="pointer-events-none absolute top-3 right-3 text-danger-500">
+                <CircleAlert size={18} />
+            </div>
+        {/if}
+    </div>
+
+    {#if error}
+        <p class="text-sm text-danger-600">{error}</p>
+    {:else if hint}
+        <p class="text-sm text-on-surface-muted">{hint}</p>
+    {/if}
+</div>

package/src/lib/components/ThemeToggle.svelte

@@ -0,0 +1,47 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    import { Moon, Sun } from "@lucide/svelte";
+
+    interface Props {
+        storageKey?: string;
+        class?: string;
+    }
+
+    let { storageKey = "runwisp:theme", class: className = "" }: Props = $props();
+
+    let isDark = $state(false);
+    let mounted = $state(false);
+
+    $effect(() => {
+        isDark = document.documentElement.classList.contains("dark");
+        mounted = true;
+    });
+
+    function toggle(): void {
+        const next = !isDark;
+        isDark = next;
+        document.documentElement.classList.toggle("dark", next);
+        try {
+            localStorage.setItem(storageKey, next ? "dark" : "light");
+        } catch {
+            // localStorage may be unavailable (private mode, embedded contexts) — fall through.
+        }
+    }
+</script>
+
+<button
+    type="button"
+    onclick={toggle}
+    aria-pressed={isDark}
+    aria-label={isDark ? "Switch to light theme" : "Switch to dark theme"}
+    title={isDark ? "Switch to light theme" : "Switch to dark theme"}
+    class="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-outline bg-surface-raised text-on-surface-muted transition-colors hover:border-outline-hover hover:text-on-surface {className}"
+>
+    {#if mounted && isDark}
+        <Sun size={16} />
+    {:else}
+        <Moon size={16} />
+    {/if}
+</button>