@runwisp/ui 1.5.0 → 1.7.0

package/src/stories/Accordion.stories.svelte

@@ -3,11 +3,32 @@
 
 <script module>
     import { defineMeta } from "@storybook/addon-svelte-csf";
-    import { LifeBuoy, Trash } from "@lucide/svelte";
+    import { LifeBuoy, Pencil, Trash } from "@lucide/svelte";
     import Accordion from "$lib/components/Accordion.svelte";
     import AccordionItem from "$lib/components/AccordionItem.svelte";
     import Toggle from "$lib/components/Toggle.svelte";
 
+    const blocks = [
+        {
+            label: "Node.js 22",
+            enabled: true,
+            frameClass: "border-outline bg-surface-raised",
+            run: "RUN apk add --no-cache nodejs npm",
+        },
+        {
+            label: "Python 3.12",
+            enabled: false,
+            frameClass: "border-outline-faint bg-surface",
+            run: "RUN apk add --no-cache python3",
+        },
+        {
+            label: "Go 1.27 (stale)",
+            enabled: true,
+            frameClass: "border-warning-soft-border bg-warning-soft/30",
+            run: "RUN apk add --no-cache go",
+        },
+    ];
+
     const { Story } = defineMeta({
         title: "Navigation/Accordion",
         component: Accordion,
@@ -59,3 +80,41 @@
         <pre class="font-mono text-xs">RUN apk add --no-cache nodejs npm</pre>
     </AccordionItem>
 </Story>
+
+<!-- `leading` sits before the title and never toggles the panel; `frameClass`
+     tints the frame by state. -->
+<Story name="Framed with leading control and tint" asChild>
+    <div class="flex max-w-lg flex-col gap-2">
+        {#each blocks as block (block.label)}
+            <AccordionItem
+                variant="framed"
+                frameClass={block.frameClass}
+                class={block.enabled ? "" : "opacity-60"}
+            >
+                {#snippet leading()}
+                    <Toggle checked={block.enabled} size="sm" />
+                {/snippet}
+                {#snippet title()}
+                    <span class="block truncate">{block.label}</span>
+                {/snippet}
+                {#snippet actions()}
+                    <button
+                        type="button"
+                        aria-label="Edit"
+                        class="rounded-[3px] p-1 text-on-surface-faint hover:bg-surface-sunken hover:text-on-surface"
+                    >
+                        <Pencil size={14} />
+                    </button>
+                    <button
+                        type="button"
+                        aria-label="Remove"
+                        class="rounded-[3px] p-1 text-on-surface-faint hover:bg-danger-soft hover:text-danger-surface"
+                    >
+                        <Trash size={14} />
+                    </button>
+                {/snippet}
+                <pre class="font-mono text-xs">{block.run}</pre>
+            </AccordionItem>
+        {/each}
+    </div>
+</Story>

package/src/stories/CodeBlock.stories.svelte

@@ -7,6 +7,8 @@
 
     const helloTask = '[tasks.hello]\ncron = "*/5 * * * *"\nrun  = "echo hello"';
     const backupTask = '[tasks.backup]\ncron = "0 3 * * *"\nkeep_runs = 60';
+    const longLine =
+        "export RUNWISP_STATION_TOKEN=rw_live_8f2c1d9e4b7a6053c1e2f3a4b5c6d7e8f9a0b1c2d3e4f5a6b7c8d9e0f1a2b3c4";
 
     const { Story } = defineMeta({
         title: "Data Display/CodeBlock",
@@ -40,6 +42,17 @@
     <CodeBlock variant="surface" size="sm" copyable={false} code={helloTask} />
 </Story>
 
+<!-- A line wider than the block scrolls without running under the copy button. -->
+<Story name="Long line" asChild>
+    <div class="flex max-w-md flex-col gap-3">
+        <CodeBlock code={longLine} />
+        <CodeBlock code={longLine} size="sm" prompt="$" />
+        <CodeBlock code={longLine} variant="surface" />
+        <CodeBlock code={longLine} variant="surface" size="sm" />
+        <CodeBlock code="runwisp station" size="sm" />
+    </div>
+</Story>
+
 <!-- Rich children render the markup; `code` keeps the copied text plain. -->
 <Story name="Highlighted children" asChild>
     <!-- No whitespace between the line spans: inside <pre> it would render as blank lines. -->

package/src/stories/Link.stories.svelte

@@ -10,7 +10,10 @@
         component: Link,
         tags: ["autodocs"],
         argTypes: {
-            variant: { control: "select", options: ["default", "muted", "primary", "danger"] },
+            variant: {
+                control: "select",
+                options: ["default", "muted", "primary", "danger", "unstyled"],
+            },
             underline: { control: "select", options: ["always", "hover", "none"] },
         },
     });
@@ -36,3 +39,24 @@
         Task configuration docs →
     </Link>
 </Story>
+
+<!-- `unstyled` adds nothing beyond `class`: the row brings its own layout and colours. -->
+<Story name="Unstyled nav row" asChild>
+    <nav class="w-64 space-y-0.5">
+        <Link
+            href="#tasks"
+            variant="unstyled"
+            aria-current="page"
+            class="flex items-center gap-3 rounded-sm bg-primary-soft px-3 py-2 font-mono text-sm text-primary-soft-text"
+        >
+            Tasks
+        </Link>
+        <Link
+            href="#runners"
+            variant="unstyled"
+            class="flex items-center gap-3 rounded-sm px-3 py-2 font-mono text-sm text-on-surface-muted hover:bg-surface-sunken hover:text-primary"
+        >
+            Runners
+        </Link>
+    </nav>
+</Story>

package/src/stories/LogConsole.stories.svelte

@@ -24,7 +24,7 @@
         `  ${ESC}32m✓${ESC}0m users            ${ESC}90m(184,221 rows, 48 MB)${ESC}0m`,
         `  ${ESC}32m✓${ESC}0m sessions         ${ESC}90m(902,114 rows, 210 MB)${ESC}0m`,
         `  ${ESC}32m✓${ESC}0m invoices         ${ESC}90m(45,002 rows, 12 MB)${ESC}0m`,
-        `${ESC}33m[warn]${ESC}0m table ${ESC}1maudit_log${ESC}0m exceeds 1 GB — consider partitioning`,
+        `${ESC}33m[warn]${ESC}0m table ${ESC}1maudit_log${ESC}0m exceeds 1 GB, consider partitioning`,
         `  ${ESC}32m✓${ESC}0m audit_log        ${ESC}90m(7,212,330 rows, 1.2 GB)${ESC}0m`,
         `${ESC}31m[error]${ESC}0m checksum mismatch on chunk 7, retrying ${ESC}90m(attempt 1/3)${ESC}0m`,
         `  ${ESC}32m✓${ESC}0m retry succeeded`,
@@ -53,7 +53,7 @@
     const LONG_LINES = [
         `${ESC}36m[info]${ESC}0m starting request trace`,
         `${ESC}90m2026-06-05T03:00:00Z${ESC}0m GET /api/v1/tasks?include=runs,logs,schedule&limit=100&offset=0 → ${ESC}32m200${ESC}0m ${ESC}90m{"trace":"a1b2c3d4-e5f6-7890-abcd-ef1234567890","upstream":"https://internal.example.com/very/long/path/segment/that/keeps/going/and/going","latency_ms":1287,"bytes":204812}${ESC}0m`,
-        `${ESC}31m[error]${ESC}0m panic: runtime error: index out of range [12] with length 8 — goroutine 42 [running]: main.process(0xc0000b4000, 0x1f4) /home/runner/work/app/app/internal/pipeline/process.go:317 +0x4a5`,
+        `${ESC}31m[error]${ESC}0m panic: runtime error: index out of range [12] with length 8, goroutine 42 [running]: main.process(0xc0000b4000, 0x1f4) /home/runner/work/app/app/internal/pipeline/process.go:317 +0x4a5`,
         "  short line in between",
         `tab-separated\tcolumns\there\tshould\tstay\taligned\tand\textend\tfar\tpast\tthe\tviewport\tedge\tto\tprove\thorizontal\tscroll`,
         `${ESC}32m[done]${ESC}0m ${"=".repeat(400)}|END`,

package/src/stories/Tabs.stories.svelte

@@ -32,6 +32,14 @@
         { id: "settings", label: "Settings", icon: Settings },
     ];
 
+    const deployTabs = [
+        { id: "binary", label: "Linux binary" },
+        { id: "docker", label: "Docker run" },
+        { id: "compose", label: "Docker Compose" },
+        { id: "kubernetes", label: "Kubernetes manifest" },
+        { id: "systemd", label: "systemd unit" },
+    ];
+
     const disabledTabs = [
         { id: "active", label: "Active" },
         { id: "completed", label: "Completed" },
@@ -105,3 +113,12 @@
         {/snippet}
     </Tabs>
 </Story>
+
+<!-- `scrollable` keeps every label on one line and scrolls the bar sideways. -->
+<Story name="Scrollable" asChild>
+    <div class="flex max-w-xs flex-col gap-4">
+        <Tabs tabs={deployTabs} variant="enclosed" scrollable />
+        <Tabs tabs={deployTabs} variant="pills" scrollable />
+        <Tabs tabs={deployTabs} variant="underline" scrollable />
+    </div>
+</Story>