@runwisp/ui 1.5.1 → 1.7.1

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/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>