@runwisp/ui 1.0.0 → 1.1.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@runwisp/ui",
   "description": "Svelte 5 UI component library for RunWisp dashboards and admin interfaces.",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -49,8 +49,8 @@
   "devDependencies": {
     "@chromatic-com/storybook": "^5.2.1",
     "@eslint/js": "^10.0.1",
-    "@runwisp/eslint-config": "1.0.0",
-    "@runwisp/typescript-config": "1.0.0",
+    "@runwisp/eslint-config": "1.1.0",
+    "@runwisp/typescript-config": "1.1.0",
     "@storybook/addon-a11y": "^10.5.5",
     "@storybook/addon-docs": "^10.5.5",
     "@storybook/addon-svelte-csf": "^5.1.2",
@@ -93,7 +93,7 @@
     "@fontsource-variable/geist-mono": "^5.3.0",
     "@fontsource/tasa-orbiter": "^5.3.0",
     "@lucide/svelte": "^1.28.0",
-    "@runwisp/common": "1.0.0",
+    "@runwisp/common": "1.1.0",
     "@tanstack/svelte-virtual": "^3.13.35",
     "ansi-to-html": "^0.7.2",
     "cron-parser": "^5.7.0",

package/src/astro/SiteFooter.astro

@@ -2,46 +2,164 @@
 // SPDX-FileCopyrightText: PoppyCake, s.r.o.
 // SPDX-License-Identifier: Apache-2.0
 
+// Brand footer shared by runwisp.com and docs.runwisp.com. Plain scoped CSS on
+// --rw-* tokens (no Tailwind) so it renders the same under Starlight, which
+// only loads theme-tokens.css.
+import logoSvg from "../lib/assets/runwisp-logo.svg?raw";
+
+export interface FooterLink {
+    label: string;
+    href: string;
+    external?: boolean;
+}
+
+export interface FooterColumn {
+    title: string;
+    links: FooterLink[];
+}
+
 interface Props {
-    tagline?: string;
+    columns: FooterColumn[];
+    homeHref?: string;
+    wordmark?: string;
     class?: string;
 }
 
-const { tagline = "Built by operators, for operators.", class: className = "" } =
-    Astro.props;
-
-const hasTeaser = Astro.slots.has("teaser");
-const hasColumns = Astro.slots.has("columns");
-const hasBadges = Astro.slots.has("badges");
+const { columns, homeHref = "/", wordmark = "RunWisp", class: className = "" } = Astro.props;
 ---
 
-<footer class:list={["bg-surface-sunken border-t border-outline", className]}>
-    <div class="mx-auto max-w-6xl px-6 py-12">
-        {
-            hasTeaser && (
-                <div class="bg-surface-raised mb-10 rounded-[4px] border border-outline p-6 shadow-sm">
-                    <slot name="teaser" />
-                </div>
-            )
-        }
-        {
-            hasColumns && (
-                <div class="grid gap-8 font-mono sm:grid-cols-2 lg:grid-cols-4 [&_a]:block [&_a]:text-on-surface-muted [&_a]:[&_a:hover]:text-primary [&_h4]:mb-3 [&_h4]:text-xs [&_h4]:font-medium [&_h4]:uppercase [&_h4]:tracking-[0.16em] [&_h4]:text-on-surface-faint [&_h4]:before:mr-1.5 [&_h4]:before:content-['──']">
-                    <slot name="columns" />
-                </div>
-            )
-        }
-        <div
-            class="text-on-surface-muted mt-10 flex flex-col items-start justify-between gap-4 border-t border-outline-faint pt-6 font-mono text-xs sm:flex-row sm:items-center"
-        >
-            <p>{tagline}</p>
+<footer class:list={["rw-ft", className]}>
+    <div class="rw-ft-wrap">
+        <div class="rw-ft-grid" style={`--rw-ft-cols: ${columns.length}`}>
+            <div class="rw-ft-brand">
+                <a class="rw-ft-mark" href={homeHref}
+                    ><span class="rw-ft-logo" aria-hidden="true" set:html={logoSvg} />
+                    {wordmark}</a
+                >
+                <slot />
+            </div>
             {
-                hasBadges && (
-                    <div class="flex flex-wrap items-center gap-3">
-                        <slot name="badges" />
+                columns.map((column) => (
+                    <div class="rw-ft-col">
+                        <h4>{column.title}</h4>
+                        {column.links.map((link) => (
+                            <a
+                                href={link.href}
+                                target={link.external ? "_blank" : undefined}
+                                rel={link.external ? "noopener noreferrer" : undefined}
+                            >
+                                {link.label}
+                            </a>
+                        ))}
                     </div>
-                )
+                ))
             }
         </div>
+        {
+            Astro.slots.has("bottom") && (
+                <div class="rw-ft-bottom">
+                    <slot name="bottom" />
+                </div>
+            )
+        }
     </div>
 </footer>
+
+<style>
+    .rw-ft {
+        border-top: 1px solid var(--rw-outline);
+        margin-top: 30px;
+        padding: 52px 0 0;
+        color: var(--rw-on-surface);
+        font-family: var(--rw-font-sans);
+        /* Container, not viewport: under Starlight the footer sits in the
+         * content column, not the full page width. */
+        container-type: inline-size;
+    }
+    /* Slotted content (blurb, bottom bar) doesn't carry this component's scope,
+     * so these reach it via :global, wrapped in :where() to stay at element
+     * specificity: any consumer class (e.g. a teaser paragraph) wins. */
+    :global(:where(.rw-ft) a) {
+        color: inherit;
+        text-decoration: none;
+    }
+    .rw-ft-wrap {
+        max-width: 1120px;
+        margin: 0 auto;
+        padding: 0 clamp(20px, 5vw, 40px);
+    }
+    .rw-ft-grid {
+        display: grid;
+        grid-template-columns: 1.6fr repeat(var(--rw-ft-cols), 1fr);
+        gap: 30px;
+    }
+    @container (max-width: 780px) {
+        .rw-ft-grid {
+            grid-template-columns: 1fr 1fr;
+        }
+    }
+    .rw-ft-mark {
+        display: flex;
+        align-items: center;
+        gap: 9px;
+        margin-bottom: 14px;
+        font-weight: 700;
+        font-size: 18px;
+        letter-spacing: -0.02em;
+    }
+    .rw-ft-logo {
+        display: inline-flex;
+        width: 21px;
+        height: 21px;
+        color: var(--rw-primary);
+    }
+    .rw-ft-logo :global(svg) {
+        width: 100%;
+        height: 100%;
+    }
+    :global(:where(.rw-ft-brand) p) {
+        margin: 0;
+        color: var(--rw-on-surface-muted);
+        font-size: 13.5px;
+        max-width: 30ch;
+    }
+    .rw-ft-col h4 {
+        margin: 0 0 14px;
+        font-family: var(--rw-font-mono);
+        font-size: 11px;
+        font-weight: 500;
+        letter-spacing: 0.1em;
+        text-transform: lowercase;
+        color: var(--rw-on-surface-faint);
+    }
+    .rw-ft-col h4::before {
+        content: "── ";
+    }
+    .rw-ft-col a {
+        display: block;
+        padding: 4px 0;
+        font-family: var(--rw-font-mono);
+        font-size: 13.5px;
+        color: var(--rw-on-surface-muted);
+        transition: color 0.15s;
+    }
+    .rw-ft-col a:hover,
+    :global(:where(.rw-ft) a:hover) {
+        color: var(--rw-primary);
+    }
+    .rw-ft-bottom {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px 14px;
+        align-items: center;
+        margin-top: 44px;
+        padding: 16px 0;
+        border-top: 1px solid var(--rw-outline);
+        font-family: var(--rw-font-mono);
+        font-size: 12px;
+        color: var(--rw-on-surface-faint);
+    }
+    .rw-ft-bottom :global(.sep) {
+        opacity: 0.4;
+    }
+</style>

package/src/lib/components/AlertDialog.svelte

@@ -2,21 +2,28 @@
 <!-- SPDX-License-Identifier: Apache-2.0 -->
 
 <script lang="ts">
+    import type { Component, Snippet } from "svelte";
     import Modal from "./Modal.svelte";
     import Button from "./Button.svelte";
-
-    type AlertVariant = "danger" | "warning" | "info";
+    import type { ButtonVariant } from "./button-styles.js";
 
     interface Props {
         open?: boolean;
         title: string;
         description?: string | undefined;
+        size?: "sm" | "md" | "lg" | "xl" | "full";
         confirmLabel?: string;
         cancelLabel?: string;
-        variant?: AlertVariant;
-        onConfirm?: () => void;
+        confirmVariant?: ButtonVariant;
+        confirmDisabled?: boolean;
+        confirmIcon?: Component<{ size?: number }>;
+        /** May be async: the dialog shows a spinner and closes once it resolves.
+         *  If it throws, the dialog stays open so the caller can surface the error. */
+        onConfirm?: () => void | Promise<void>;
         onCancel?: () => void;
-        loading?: boolean;
+        children?: Snippet;
+        /** Replaces the default Cancel / Confirm buttons. */
+        footer?: Snippet;
         class?: string;
     }
 
@@ -24,40 +31,71 @@
         open = $bindable(false),
         title,
         description,
+        size = "sm",
         confirmLabel = "Confirm",
         cancelLabel = "Cancel",
-        variant = "danger",
+        confirmVariant = "danger",
+        confirmDisabled = false,
+        confirmIcon: ConfirmIcon,
         onConfirm,
         onCancel,
-        loading = false,
+        children,
+        footer: footerProp,
         class: className = "",
     }: Props = $props();
 
-    const confirmVariantMap: Record<AlertVariant, "danger" | "primary"> = {
-        danger: "danger",
-        warning: "primary",
-        info: "primary",
-    };
+    let confirming = $state(false);
+
+    async function handleConfirm() {
+        if (confirming) return;
+        confirming = true;
+        try {
+            await onConfirm?.();
+            open = false;
+        } finally {
+            confirming = false;
+        }
+    }
 
     function handleCancel() {
+        if (confirming) return;
         open = false;
         onCancel?.();
     }
-
-    function handleConfirm() {
-        onConfirm?.();
-    }
 </script>
 
-<Modal bind:open {title} {description} size="sm" closable onClose={handleCancel} class={className}>
+{#snippet confirmIconSnippet()}
+    {#if ConfirmIcon}<ConfirmIcon size={16} />{/if}
+{/snippet}
+
+<Modal
+    bind:open
+    {title}
+    {description}
+    {size}
+    closable={!confirming}
+    onClose={handleCancel}
+    {children}
+    class={className}
+>
     {#snippet footer()}
-        <div class="flex items-center justify-end gap-3">
-            <Button variant="secondary" onclick={handleCancel} disabled={loading}>
-                {cancelLabel}
-            </Button>
-            <Button variant={confirmVariantMap[variant]} onclick={handleConfirm} {loading}>
-                {confirmLabel}
-            </Button>
-        </div>
+        {#if footerProp}
+            {@render footerProp()}
+        {:else}
+            <div class="flex items-center justify-end gap-3">
+                <Button variant="secondary" onclick={handleCancel} disabled={confirming}>
+                    {cancelLabel}
+                </Button>
+                <Button
+                    variant={confirmVariant}
+                    loading={confirming}
+                    disabled={confirming || confirmDisabled}
+                    onclick={() => void handleConfirm()}
+                    icon={ConfirmIcon ? confirmIconSnippet : undefined}
+                >
+                    {confirmLabel}
+                </Button>
+            </div>
+        {/if}
     {/snippet}
 </Modal>

package/src/lib/components/Badge.svelte

@@ -3,9 +3,11 @@
 
 <script lang="ts">
     import type { Snippet } from "svelte";
+    import Tooltip from "./Tooltip.svelte";
 
     type BadgeVariant = "default" | "primary" | "success" | "warning" | "danger" | "info";
     type BadgeSize = "sm" | "md" | "lg";
+    type TooltipPosition = "top" | "bottom" | "left" | "right";
 
     interface Props {
         variant?: BadgeVariant;
@@ -13,6 +15,10 @@
         dot?: boolean;
         loading?: boolean;
         outline?: boolean;
+        /** Shown in the styled hover tooltip (see {@link Tooltip}). */
+        tooltip?: string;
+        /** Side the tooltip opens on — pick one that has room, e.g. "bottom" near the top of the viewport. */
+        tooltipPosition?: TooltipPosition;
         children?: Snippet;
         class?: string;
     }
@@ -23,6 +29,8 @@
         dot = false,
         loading = false,
         outline = false,
+        tooltip,
+        tooltipPosition = "top",
         children,
         class: className = "",
     }: Props = $props();
@@ -91,37 +99,47 @@
     };
 </script>
 
-<span
-    class="{baseClasses} {outline
-        ? variantClasses[variant].outline
-        : variantClasses[variant].solid} {sizeClasses[size]} {className}"
->
-    {#if dot}
-        {#if loading}
-            <svg
-                class="{spinnerSizeClasses[size]} animate-spin {indicatorTextColors[variant]}"
-                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>
-        {:else}
-            <span class="h-1.5 w-1.5 rounded-full {dotColors[variant]}"></span>
+{#snippet chip(extraClass: string)}
+    <span
+        class="{baseClasses} {outline
+            ? variantClasses[variant].outline
+            : variantClasses[variant].solid} {sizeClasses[size]} {extraClass}"
+    >
+        {#if dot}
+            {#if loading}
+                <svg
+                    class="{spinnerSizeClasses[size]} animate-spin {indicatorTextColors[variant]}"
+                    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>
+            {:else}
+                <span class="h-1.5 w-1.5 rounded-full {dotColors[variant]}"></span>
+            {/if}
         {/if}
-    {/if}
-    {#if children}
-        {@render children()}
-    {/if}
-</span>
+        {#if children}
+            {@render children()}
+        {/if}
+    </span>
+{/snippet}
+
+{#if tooltip}
+    <Tooltip content={tooltip} position={tooltipPosition} class={className} wide>
+        {@render chip("")}
+    </Tooltip>
+{:else}
+    {@render chip(className)}
+{/if}

package/src/lib/components/Button.svelte

@@ -17,7 +17,7 @@
         size?: ButtonSize;
         fullWidth?: boolean;
         loading?: boolean;
-        icon?: Snippet;
+        icon?: Snippet | undefined;
         iconRight?: Snippet;
         children?: Snippet;
     }