@runwisp/ui 0.4.0

package/src/lib/components/Drawer.svelte

@@ -0,0 +1,156 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import { X } from "@lucide/svelte";
+    import { portal } from "../actions/portal.js";
+    import { fly } from "svelte/transition";
+
+    type Side = "left" | "right" | "top" | "bottom";
+    type DrawerSize = "sm" | "md" | "lg" | "xl";
+
+    interface Props {
+        open?: boolean;
+        side?: Side;
+        size?: DrawerSize;
+        title?: string;
+        closable?: boolean;
+        onClose?: () => void;
+        header?: Snippet;
+        footer?: Snippet;
+        children?: Snippet;
+        class?: string;
+    }
+
+    let {
+        open = $bindable(false),
+        side = "right",
+        size = "md",
+        title,
+        closable = true,
+        onClose,
+        header,
+        footer,
+        children,
+        class: className = "",
+    }: Props = $props();
+
+    const sizeValues: Record<DrawerSize, string> = {
+        sm: "320px",
+        md: "400px",
+        lg: "560px",
+        xl: "720px",
+    };
+
+    const isHorizontal = $derived(side === "left" || side === "right");
+
+    const panelStyle = $derived(
+        isHorizontal
+            ? `width: ${sizeValues[size]}; max-width: 100vw;`
+            : `height: ${sizeValues[size]}; max-height: 100vh;`,
+    );
+
+    const positionClasses: Record<Side, string> = {
+        left: "inset-y-0 left-0",
+        right: "inset-y-0 right-0",
+        top: "inset-x-0 top-0",
+        bottom: "inset-x-0 bottom-0",
+    };
+
+    const flyParams: Record<Side, { x?: number; y?: number }> = {
+        left: { x: -320 },
+        right: { x: 320 },
+        top: { y: -320 },
+        bottom: { y: 320 },
+    };
+
+    function handleClose() {
+        open = false;
+        onClose?.();
+    }
+
+    function handleKeydown(e: KeyboardEvent) {
+        if (e.key === "Escape" && closable) {
+            handleClose();
+        }
+    }
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+{#if open}
+    <div use:portal class="fixed inset-0 z-50">
+        {#if closable}
+            <button
+                type="button"
+                class="absolute inset-0 z-0 bg-backdrop backdrop-blur-sm"
+                aria-label="Close drawer"
+                tabindex="-1"
+                onclick={handleClose}
+                transition:fly={{ duration: 150 }}
+            ></button>
+        {:else}
+            <div
+                class="absolute inset-0 z-0 bg-backdrop backdrop-blur-sm"
+                transition:fly={{ duration: 150 }}
+            ></div>
+        {/if}
+
+        <div
+            class="
+                absolute z-10 flex flex-col
+                bg-surface-overlay shadow-xl
+                {positionClasses[side]}
+                {className}
+            "
+            style={panelStyle}
+            role="dialog"
+            aria-modal="true"
+            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">
+                    {@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"
+                >
+                    <div>
+                        {#if title}
+                            <h2 id="drawer-title" class="text-lg font-semibold text-on-surface">
+                                {title}
+                            </h2>
+                        {/if}
+                    </div>
+                    {#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"
+                            aria-label="Close"
+                        >
+                            <X size={20} />
+                        </button>
+                    {/if}
+                </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">
+                    {@render footer()}
+                </div>
+            {/if}
+        </div>
+    </div>
+{/if}

package/src/lib/components/Dropdown.svelte

@@ -0,0 +1,195 @@
+<!-- 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";
+    import { tick, onDestroy } from "svelte";
+    import { EllipsisVertical } 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 {
+        label?: string;
+        icon?: Component;
+        href?: string;
+        onClick?: () => void;
+        danger?: boolean;
+        disabled?: boolean;
+        divider?: boolean;
+        title?: string;
+    }
+
+    interface Props {
+        items?: MenuItem[];
+        trigger?: Snippet;
+        children?: Snippet;
+        align?: "left" | "right";
+        class?: string;
+    }
+
+    let { items = [], trigger, children, align = "right", class: className = "" }: Props = $props();
+
+    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";
+
+    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), // MENU_OFFSET
+                    flip(),
+                    shift({ padding: 8 }), // VIEWPORT_PADDING
+                ],
+            }).then(({ x, y, placement }) => {
+                if (menuEl) {
+                    Object.assign(menuEl.style, {
+                        left: `${x}px`,
+                        top: `${y}px`,
+                        position: "absolute",
+                    });
+
+                    // Simple origin logic based on verify placement
+                    const isTop = placement.startsWith("top");
+                    transformOrigin = `${isTop ? "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;
+        }
+    }
+
+    function handleOutsideClick(e: MouseEvent) {
+        const target = e.target as HTMLElement;
+        if (triggerEl?.contains(target)) return;
+        if (menuEl?.contains(target)) return;
+        if (open) toggle(false);
+    }
+
+    function handleKeyDown(e: KeyboardEvent) {
+        if (e.key === "Escape" && open) {
+            toggle(false);
+        }
+    }
+
+    onDestroy(() => {
+        cleanupFloating?.();
+    });
+</script>
+
+<svelte:window onclick={handleOutsideClick} onkeydown={handleKeyDown} />
+
+<div class="dropdown-container relative inline-block {className}">
+    <button
+        onclick={(e) => {
+            e.stopPropagation();
+            toggle(!open);
+        }}
+        bind:this={triggerEl}
+        aria-label="Options"
+        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"
+    >
+        {#if trigger}
+            {@render trigger()}
+        {:else}
+            <EllipsisVertical size={18} />
+        {/if}
+    </button>
+
+    {#if open}
+        <div
+            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
+			"
+            style="transform-origin: {transformOrigin};"
+        >
+            {#if children}
+                {@render children()}
+            {:else}
+                {#each items as item, idx (idx)}
+                    {#if item.divider}
+                        <hr class="my-1 border-outline-faint" />
+                    {: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
+									{item.danger
+                                ? 'text-danger-soft-text hover:bg-danger-soft'
+                                : 'text-on-surface-muted hover:bg-surface-sunken'}
+									{item.disabled ? 'cursor-not-allowed opacity-50' : ''}
+								transition-colors
+							"
+                        >
+                            {#if item.icon}
+                                {@const Icon = item.icon}
+                                <Icon size={16} class="opacity-70" />
+                            {/if}
+                            {item.label}
+                        </a>
+                    {:else}
+                        <button
+                            onclick={() => handleItemClick(item)}
+                            disabled={item.disabled}
+                            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
+									{item.danger
+                                ? 'text-danger-soft-text hover:bg-danger-soft'
+                                : 'text-on-surface-muted hover:bg-surface-sunken'}
+									transition-colors disabled:cursor-not-allowed
+									disabled:opacity-50
+							"
+                        >
+                            {#if item.icon}
+                                {@const Icon = item.icon}
+                                <Icon size={16} class="opacity-70" />
+                            {/if}
+                            {item.label}
+                        </button>
+                    {/if}
+                {/each}
+            {/if}
+        </div>
+    {/if}
+</div>

package/src/lib/components/DurationInput.svelte

@@ -0,0 +1,170 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    import { CircleAlert, Clock } from "@lucide/svelte";
+    import ms, { type StringValue } from "ms";
+
+    type InputSize = "sm" | "md" | "lg";
+
+    interface Props {
+        id?: string;
+        value?: number | null;
+        label?: string;
+        hint?: string;
+        error?: string;
+        disabled?: boolean;
+        class?: string;
+        placeholder?: string;
+        size?: InputSize;
+    }
+
+    let {
+        id,
+        value = $bindable(),
+        label,
+        hint,
+        error = $bindable(),
+        disabled = false,
+        class: className = "",
+        placeholder = "e.g. 5m 30s",
+        size = "md",
+        ...restProps
+    }: Props = $props();
+
+    const generatedId = `duration-input-${Math.random().toString(36).slice(2, 10)}`;
+    const inputId = $derived(id ?? generatedId);
+
+    let textValue = $state("");
+    let parsedHuman = $state("");
+    let isFocused = $state(false);
+
+    const sizeClasses: Record<InputSize, string> = {
+        sm: "text-sm px-3 py-1.5",
+        md: "text-sm px-3.5 py-2",
+        lg: "text-base px-4 py-2.5",
+    };
+
+    const inputClasses = `
+        w-full rounded-lg border
+        bg-surface-raised text-on-surface placeholder:text-on-surface-faint
+        focus:outline-none focus:ring-4 focus:ring-ring/10 focus:border-ring
+        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";
+
+    function formatMs(msValue: number): string {
+        if (typeof msValue !== "number" || isNaN(msValue)) return "";
+        try {
+            return ms(msValue);
+        } catch {
+            return "";
+        }
+    }
+
+    function parseToMs(str: string): number | null {
+        if (!str || !str.trim()) return null;
+        try {
+            const result = ms(str as StringValue);
+            return typeof result === "number" ? result : null;
+        } catch {
+            return null;
+        }
+    }
+
+    function updateFromValue() {
+        if (!isFocused) {
+            textValue = value != null ? formatMs(value) : "";
+        }
+    }
+
+    $effect(() => {
+        updateFromValue();
+    });
+
+    function handleInput(e: Event) {
+        const val = (e.target as HTMLInputElement).value;
+        textValue = val;
+
+        const msValue = parseToMs(val);
+        value = msValue;
+
+        if (typeof msValue === "number") {
+            parsedHuman = ms(msValue, { long: true });
+            if (error) error = undefined;
+        } else {
+            parsedHuman = "";
+        }
+    }
+
+    function handleFocus() {
+        isFocused = true;
+    }
+
+    function handleBlur() {
+        isFocused = false;
+        textValue = value != null ? formatMs(value) : "";
+        parsedHuman = "";
+    }
+</script>
+
+<div class="space-y-1.5 {className}">
+    {#if label}
+        <label for={inputId} class="block text-sm 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"
+        >
+            <Clock size={16} />
+        </div>
+
+        <input
+            id={inputId}
+            type="text"
+            class="
+                {inputClasses}
+                {sizeClasses[size]}
+                {error ? errorBorder : normalBorder}
+                pl-10
+                {error ? 'pr-10' : ''}
+            "
+            {disabled}
+            value={textValue}
+            {placeholder}
+            oninput={handleInput}
+            onfocus={handleFocus}
+            onblur={handleBlur}
+            aria-invalid={error ? "true" : undefined}
+            {...restProps}
+        />
+
+        {#if error}
+            <div
+                class="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-danger-500"
+            >
+                <CircleAlert size={18} />
+            </div>
+        {/if}
+    </div>
+
+    {#if parsedHuman && isFocused}
+        <p
+            class="animate-in slide-in-from-top-1 fade-in text-xs font-medium text-primary duration-200"
+        >
+            {parsedHuman}
+        </p>
+    {:else if error}
+        <p class="animate-in slide-in-from-top-1 fade-in text-sm text-danger-600 duration-200">
+            {error}
+        </p>
+    {:else if hint}
+        <p class="text-sm text-on-surface-muted">{hint}</p>
+    {/if}
+</div>

package/src/lib/components/EmptyState.svelte

@@ -0,0 +1,46 @@
+<!-- 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";
+    import { Inbox } from "@lucide/svelte";
+
+    interface Props {
+        title?: string;
+        description?: string;
+        icon?: Component;
+        iconSize?: number;
+        actions?: Snippet;
+        class?: string;
+    }
+
+    let {
+        title = "No data",
+        description,
+        icon = Inbox,
+        iconSize = 48,
+        actions,
+        class: className = "",
+    }: Props = $props();
+
+    const Icon = $derived(icon);
+</script>
+
+<div class="flex flex-col items-center justify-center px-4 py-12 text-center {className}">
+    <div class="mb-4 rounded-full bg-surface-sunken p-4">
+        <Icon size={iconSize} class="text-on-surface-faint" />
+    </div>
+
+    <h3 class="mb-1 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>
+    {/if}
+
+    {#if actions}
+        <div class="flex items-center gap-3">
+            {@render actions()}
+        </div>
+    {/if}
+</div>

package/src/lib/components/ErrorState.svelte

@@ -0,0 +1,73 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    import type { Snippet, Component } from "svelte";
+    import { TriangleAlert, RefreshCw, WifiOff } from "@lucide/svelte";
+    import Button from "./Button.svelte";
+
+    interface Props {
+        /** Error message to display */
+        message: string;
+        /** Title override */
+        title?: string;
+        /** Icon override */
+        icon?: Component;
+        /** Callback when the retry button is clicked */
+        onRetry?: () => void;
+        /** Whether a retry is in progress */
+        retrying?: boolean;
+        /** Visual variant */
+        variant?: "default" | "disconnected";
+        /** Extra actions slot */
+        actions?: Snippet;
+        class?: string;
+    }
+
+    let {
+        message,
+        title,
+        icon,
+        onRetry,
+        retrying = false,
+        variant = "default",
+        actions,
+        class: className = "",
+    }: Props = $props();
+
+    const defaultTitle = $derived(
+        title ?? (variant === "disconnected" ? "Connection Lost" : "Something went wrong"),
+    );
+
+    const IconComponent = $derived(icon ?? (variant === "disconnected" ? WifiOff : TriangleAlert));
+
+    const iconBg = $derived(variant === "disconnected" ? "bg-danger-soft" : "bg-warning-soft");
+    const iconColor = $derived(
+        variant === "disconnected" ? "text-danger-surface" : "text-warning-surface",
+    );
+</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}"
+    role="alert"
+>
+    <div class="rounded-full {iconBg} p-3">
+        <IconComponent class="h-8 w-8 {iconColor}" />
+    </div>
+
+    <div class="space-y-1">
+        <h3 class="text-lg font-semibold text-on-surface">{defaultTitle}</h3>
+        <p class="max-w-sm text-sm text-on-surface-muted">{message}</p>
+    </div>
+
+    {#if onRetry}
+        <Button variant="secondary" onclick={onRetry} loading={retrying}>
+            {#snippet icon()}<RefreshCw size={16} />{/snippet}
+            Retry
+        </Button>
+    {/if}
+
+    {#if actions}
+        {@render actions()}
+    {/if}
+</div>

package/src/lib/components/FeatureCard.svelte

@@ -0,0 +1,35 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    import type { Component, Snippet } from "svelte";
+
+    interface Props {
+        title: string;
+        icon?: Component;
+        children?: Snippet;
+        class?: string;
+    }
+
+    let { title, icon: Icon, children, class: className = "" }: Props = $props();
+</script>
+
+<article
+    class="overflow-hidden rounded-xl border border-outline bg-surface-raised p-6 shadow-sm transition-colors 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"
+            >
+                <Icon size={20} />
+            </span>
+        {/if}
+        <h3 class="text-lg font-semibold text-on-surface">{title}</h3>
+        {#if children}
+            <div class="text-sm leading-relaxed text-on-surface-muted">
+                {@render children()}
+            </div>
+        {/if}
+    </div>
+</article>