From 0f5ed5d0a35a9473a6c3fc9dd51a5c6a38800dd4 Mon Sep 17 00:00:00 2001
From: Mathious6 <91007976+Mathious6@users.noreply.github.com>
Date: Mon, 31 Aug 2026 20:16:32 +0200
Subject: [PATCH] refactor(ui): establish reusable components

---
 src/app.css                     |  28 ++++--
 src/lib/ExportMenu.svelte       |  37 ++-----
 src/lib/Mark.svelte             |   6 +-
 src/lib/RowMenu.svelte          |  66 +++----------
 src/lib/SelectionActions.svelte |  47 +++++++++
 src/lib/SubnetCell.svelte       |   4 +-
 src/lib/SubnetTable.svelte      |  59 +++++++++++-
 src/lib/TagsCell.svelte         |   6 +-
 src/lib/UpdateControl.svelte    |  12 +--
 src/lib/ui/Button.svelte        |  56 +++++++++++
 src/lib/ui/Dialog.svelte        |  55 +++++++++++
 src/lib/ui/MenuItem.svelte      |  25 +++++
 src/lib/ui/MenuSurface.svelte   |  57 +++++++++++
 src/lib/ui/Pill.svelte          |  15 +++
 src/routes/+page.svelte         | 166 +++++++++++---------------------
 15 files changed, 418 insertions(+), 221 deletions(-)
 create mode 100644 src/lib/SelectionActions.svelte
 create mode 100644 src/lib/ui/Button.svelte
 create mode 100644 src/lib/ui/Dialog.svelte
 create mode 100644 src/lib/ui/MenuItem.svelte
 create mode 100644 src/lib/ui/MenuSurface.svelte
 create mode 100644 src/lib/ui/Pill.svelte

diff --git a/src/app.css b/src/app.css
index 0facc70..fde7587 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,15 +1,18 @@
 @import "tailwindcss";
 
 @theme {
-  --color-bg: #131010;
-  --color-raised: #1a1616;
-  --color-line: #2a2424;
-  --color-text: #f1ecec;
-  --color-muted: #b7b1b1;
-  --color-faint: #7c7575;
-  --color-accent: #89b5ff;
+  --color-bg: #111213;
+  --color-raised: #191a1c;
+  --color-line: #2b2d30;
+  --color-text: #f1f1ee;
+  --color-muted: #b6b7b8;
+  --color-faint: #92959a;
+  --color-accent: #78a9ff;
   --color-good: #8ec07c;
   --color-bad: #e0866b;
+  --radius-control: 6px;
+  --radius-surface: 10px;
+  --ease-ui: 140ms ease;
 }
 
 html,
@@ -19,6 +22,7 @@ body {
   overflow: hidden;
   background: var(--color-bg);
   color: var(--color-text);
+  font-family: "SF Mono", "Cascadia Code", "Roboto Mono", monospace;
 }
 
 table {
@@ -33,3 +37,13 @@ table {
 .chip-strip::-webkit-scrollbar {
   display: none;
 }
+
+@media (prefers-reduced-motion: no-preference) {
+  button,
+  input,
+  [role="menu"],
+  [role="dialog"] {
+    transition: color var(--ease-ui), background-color var(--ease-ui), border-color var(--ease-ui),
+      box-shadow var(--ease-ui), opacity var(--ease-ui);
+  }
+}
diff --git a/src/lib/ExportMenu.svelte b/src/lib/ExportMenu.svelte
index 0965c62..1554833 100644
--- a/src/lib/ExportMenu.svelte
+++ b/src/lib/ExportMenu.svelte
@@ -1,35 +1,10 @@
 <script lang="ts">
-  let { locked, onAycd, onDismiss }: { locked: boolean; onAycd: () => void; onDismiss: () => void } = $props();
+  import MenuItem from "./ui/MenuItem.svelte";
+  import MenuSurface from "./ui/MenuSurface.svelte";
 
-  let item = $state<HTMLButtonElement | null>(null);
-
-  $effect(() => {
-    item?.focus();
-  });
+  let { locked, trigger, onAycd, onDismiss }: { locked: boolean; trigger: HTMLElement | null; onAycd: () => void; onDismiss: () => void } = $props();
 </script>
 
-<div
-  class="absolute right-0 top-full z-30 mt-1 min-w-48 rounded-md border border-line bg-raised py-1 text-xs text-text shadow-none"
-  role="menu"
-  tabindex="-1"
-  onkeydown={(event) => {
-    if (event.key === "Escape") {
-      event.preventDefault();
-      onDismiss();
-    } else if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
-      event.preventDefault();
-      item?.focus();
-    }
-  }}
->
-  <button
-    bind:this={item}
-    type="button"
-    class="block w-full px-3 py-1.5 text-left hover:bg-bg disabled:opacity-40"
-    disabled={locked}
-    role="menuitem"
-    onclick={onAycd}
-  >
-    Export for AYCD (.json)
-  </button>
-</div>
+<MenuSurface class="absolute right-0 top-full mt-1 min-w-48" {trigger} {onDismiss}>
+  <MenuItem disabled={locked} onclick={onAycd}>Export for AYCD (.json)</MenuItem>
+</MenuSurface>
diff --git a/src/lib/Mark.svelte b/src/lib/Mark.svelte
index b453e97..9c720f3 100644
--- a/src/lib/Mark.svelte
+++ b/src/lib/Mark.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
+  import Pill from "./ui/Pill.svelte";
+
   let { value }: { value: string } = $props();
 </script>
 
-<span class="inline-flex h-[22px] max-w-full items-center truncate rounded-md border border-line bg-raised px-1.5 font-mono text-xs text-text">
-  {value}
-</span>
+<Pill tone="country">{value}</Pill>
diff --git a/src/lib/RowMenu.svelte b/src/lib/RowMenu.svelte
index 6199f50..b456079 100644
--- a/src/lib/RowMenu.svelte
+++ b/src/lib/RowMenu.svelte
@@ -1,7 +1,11 @@
 <script lang="ts">
+  import MenuItem from "./ui/MenuItem.svelte";
+  import MenuSurface from "./ui/MenuSurface.svelte";
+
   let {
     x,
     y,
+    trigger,
     locked,
     onProbe,
     onExport,
@@ -11,6 +15,7 @@
   }: {
     x: number;
     y: number;
+    trigger: HTMLElement | null;
     locked: boolean;
     onProbe: () => void;
     onExport: () => void;
@@ -23,64 +28,19 @@
 
   $effect(() => {
     const node = root;
-    if (!node) {
-      return;
-    }
+    if (!node) return;
     const left = Math.min(x, window.innerWidth - node.offsetWidth - 8);
     const top = Math.min(y, window.innerHeight - node.offsetHeight - 8);
     node.style.left = `${Math.max(8, left)}px`;
     node.style.top = `${Math.max(8, top)}px`;
-    node.focus();
   });
 </script>
 
-<div
-  bind:this={root}
-  class="fixed z-30 min-w-32 rounded-md border border-line bg-raised py-1 text-xs text-text shadow-none"
-  style="left: {x}px; top: {y}px"
-  role="menu"
-  tabindex="-1"
-  onkeydown={(event) => {
-    if (event.key === "Escape") {
-      event.preventDefault();
-      onDismiss();
-    }
-  }}
->
-  <button
-    type="button"
-    class="block w-full px-3 py-1.5 text-left hover:bg-bg disabled:opacity-40"
-    disabled={locked}
-    role="menuitem"
-    onclick={onProbe}
-  >
-    Probe
-  </button>
-  <button
-    type="button"
-    class="block w-full px-3 py-1.5 text-left hover:bg-bg disabled:opacity-40"
-    disabled={locked}
-    role="menuitem"
-    onclick={onExport}
-  >
-    Export
-  </button>
-  <button
-    type="button"
-    class="block w-full px-3 py-1.5 text-left hover:bg-bg disabled:opacity-40"
-    disabled={locked}
-    role="menuitem"
-    onclick={onExportAycd}
-  >
-    Export for AYCD (.json)
-  </button>
-  <button
-    type="button"
-    class="block w-full px-3 py-1.5 text-left text-bad hover:bg-bg disabled:opacity-40"
-    disabled={locked}
-    role="menuitem"
-    onclick={onRemove}
-  >
-    Remove
-  </button>
+<div bind:this={root} class="fixed z-30" style="left: {x}px; top: {y}px">
+<MenuSurface class="min-w-32" {trigger} {onDismiss}>
+    <MenuItem disabled={locked} onclick={onProbe}>Probe</MenuItem>
+    <MenuItem disabled={locked} onclick={onExport}>Export</MenuItem>
+    <MenuItem disabled={locked} onclick={onExportAycd}>Export for AYCD (.json)</MenuItem>
+    <MenuItem disabled={locked} danger onclick={onRemove}>Remove</MenuItem>
+  </MenuSurface>
 </div>
diff --git a/src/lib/SelectionActions.svelte b/src/lib/SelectionActions.svelte
new file mode 100644
index 0000000..52c4f8c
--- /dev/null
+++ b/src/lib/SelectionActions.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+  import Button from "./ui/Button.svelte";
+  import MenuItem from "./ui/MenuItem.svelte";
+  import MenuSurface from "./ui/MenuSurface.svelte";
+
+  let { locked, onExport, onExportAycd, onProbe }: { locked: boolean; onExport: () => void; onExportAycd: () => void; onProbe: () => void } = $props();
+
+  let menuOpen = $state(false);
+  let split = $state<HTMLDivElement | null>(null);
+  let trigger = $state<HTMLButtonElement | null>(null);
+
+  $effect(() => {
+    if (!menuOpen) return;
+    function dismiss(event: MouseEvent) {
+      if (split && event.target instanceof Node && !split.contains(event.target)) menuOpen = false;
+    }
+    window.addEventListener("click", dismiss);
+    return () => window.removeEventListener("click", dismiss);
+  });
+
+  function closeMenu() {
+    menuOpen = false;
+  }
+
+  function exportText() {
+    closeMenu();
+    onExport();
+  }
+
+  function probe() {
+    closeMenu();
+    onProbe();
+  }
+</script>
+
+<div class="flex items-center gap-1.5">
+  <div bind:this={split} class="relative flex">
+    <Button variant="outline" joined="start" disabled={locked} onclick={exportText}>Export</Button>
+    <Button bind:ref={trigger} variant="outline" size="narrowIcon" joined="end" aria-label="More export options" aria-expanded={menuOpen} aria-haspopup="menu" disabled={locked} onclick={() => (menuOpen = !menuOpen)}>▾</Button>
+    {#if menuOpen}
+      <MenuSurface class="absolute right-0 top-full mt-1 min-w-48" {trigger} onDismiss={closeMenu}>
+        <MenuItem disabled={locked} onclick={() => { closeMenu(); onExportAycd(); }}>Export for AYCD (.json)</MenuItem>
+      </MenuSurface>
+    {/if}
+  </div>
+  <Button variant="primary" disabled={locked} onclick={probe}>Probe selected</Button>
+</div>
diff --git a/src/lib/SubnetCell.svelte b/src/lib/SubnetCell.svelte
index 2555085..fc0dd60 100644
--- a/src/lib/SubnetCell.svelte
+++ b/src/lib/SubnetCell.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
-  import Mark from "./Mark.svelte";
-
   let { cidr }: { cidr: string } = $props();
 </script>
 
-<Mark value={cidr} />
+<span class="font-mono text-xs text-text">{cidr}</span>
diff --git a/src/lib/SubnetTable.svelte b/src/lib/SubnetTable.svelte
index 794975a..ea55cdb 100644
--- a/src/lib/SubnetTable.svelte
+++ b/src/lib/SubnetTable.svelte
@@ -245,6 +245,12 @@
     untrack(() => table.setPageIndex(0));
   });
 
+  $effect(() => {
+    if (selectedCidrs.size === 0) {
+      rangeAnchor = null;
+    }
+  });
+
   $effect(() => {
     const pageCount = Math.max(1, table.getPageCount());
     if (pagination.pageIndex >= pageCount) {
@@ -284,12 +290,53 @@
     return () => window.removeEventListener("keydown", selectByKeyboard);
   });
 
-  let menu = $state<{ cidr: string; x: number; y: number } | null>(null);
+  let menu = $state<{ cidr: string; x: number; y: number; trigger: HTMLElement | null } | null>(null);
   let rangeAnchor = $state<string | null>(null);
 
   function openMenu(event: MouseEvent, cidr: string) {
     event.preventDefault();
-    menu = { cidr, x: event.clientX, y: event.clientY };
+    menu = { cidr, x: event.clientX, y: event.clientY, trigger: event.currentTarget as HTMLElement };
+  }
+
+  function selectRowByKeyboard(event: KeyboardEvent, cidr: string) {
+    if (isInteractive(event.target)) {
+      return;
+    }
+    if (event.key !== "Enter" && event.key !== " ") {
+      if (event.key === "ContextMenu" || (event.shiftKey && event.key === "F10")) {
+        event.preventDefault();
+        const trigger = event.currentTarget as HTMLElement;
+        const bounds = trigger.getBoundingClientRect();
+        menu = { cidr, x: bounds.left + Math.min(24, bounds.width / 2), y: bounds.top + Math.min(24, bounds.height / 2), trigger };
+      }
+      return;
+    }
+    event.preventDefault();
+    const modifier = event.metaKey || event.ctrlKey;
+    if (event.shiftKey && rangeAnchor) {
+      const start = orderedRows.findIndex((row) => row.original.cidr === rangeAnchor);
+      const end = orderedRows.findIndex((row) => row.original.cidr === cidr);
+      if (start >= 0 && end >= 0) {
+        const range = orderedRows
+          .slice(Math.min(start, end), Math.max(start, end) + 1)
+          .map((row) => row.original.cidr);
+        onSelectionChange(modifier ? new Set([...selectedCidrs, ...range]) : new Set(range));
+        return;
+      }
+    }
+    const next = new Set(selectedCidrs);
+    if (modifier || selectedCidrs.has(cidr)) {
+      if (next.has(cidr)) {
+        next.delete(cidr);
+      } else {
+        next.add(cidr);
+      }
+    } else {
+      next.clear();
+      next.add(cidr);
+    }
+    onSelectionChange(next);
+    rangeAnchor = cidr;
   }
 
   function selectRow(event: MouseEvent, cidr: string) {
@@ -459,12 +506,13 @@
                     <div class="flex h-8 items-center">
                       {#if header.column.getCanFilter()}
                         <input
-                          class="block h-6 w-full rounded-md bg-raised px-1 text-xs font-normal text-text focus:outline-none focus:ring-1 focus:ring-accent {numericIds.has(
+                          class="block h-6 w-full rounded-[var(--radius-control)] border border-transparent bg-raised px-1 text-xs font-normal text-text focus:border-line focus:outline-none focus:ring-1 focus:ring-accent {numericIds.has(
                             header.column.id,
                           )
                             ? 'text-right'
                             : ''}"
                           value={String(header.column.getFilterValue() ?? "")}
+                          aria-label={`Filter ${String(header.column.columnDef.header)}`}
                           oninput={(event) => {
                             header.column.setFilterValue(event.currentTarget.value);
                             table.setPageIndex(0);
@@ -485,10 +533,12 @@
         <tr
           class="group h-8 border-t border-line {selectedCidrs.has(row.original.cidr)
             ? 'bg-accent/10 shadow-[inset_3px_0_0_var(--color-accent)] hover:bg-accent/15'
-            : 'hover:bg-raised'}"
+          : 'hover:bg-raised/80'} focus-visible:relative focus-visible:z-10 focus-visible:outline-none focus-visible:shadow-[inset_0_0_0_1px_var(--color-accent)]"
+          tabindex="0"
           aria-selected={selectedCidrs.has(row.original.cidr)}
           onclick={(event) => selectRow(event, row.original.cidr)}
           oncontextmenu={(event) => openMenu(event, row.original.cidr)}
+          onkeydown={(event) => selectRowByKeyboard(event, row.original.cidr)}
         >
           {#each row.getAllCells() as cell (cell.id)}
             <td
@@ -527,6 +577,7 @@
   <RowMenu
     x={menu.x}
     y={menu.y}
+    trigger={menu.trigger}
     {locked}
     onProbe={() => {
       const cidr = menu?.cidr;
diff --git a/src/lib/TagsCell.svelte b/src/lib/TagsCell.svelte
index 40ae80f..0023f25 100644
--- a/src/lib/TagsCell.svelte
+++ b/src/lib/TagsCell.svelte
@@ -24,9 +24,10 @@
     {#each tags as tag}
       <button
         type="button"
-        class="inline-flex h-[22px] max-w-[104px] shrink-0 items-center rounded-md border border-line bg-raised px-1.5 font-mono text-xs text-text hover:text-muted disabled:opacity-40"
+          class="inline-flex h-[22px] max-w-[104px] shrink-0 items-center rounded-[var(--radius-control)] border border-line bg-raised px-1.5 font-mono text-xs text-text hover:border-muted hover:text-muted disabled:opacity-40"
         disabled={locked}
         title={tag}
+        aria-label={`Remove tag ${tag}`}
         onclick={() => onRemove(cidr, tag)}
       >
         <span class="truncate">{tag}</span>
@@ -35,8 +36,9 @@
     {/each}
   </div>
   <input
-    class="h-6 w-20 shrink-0 rounded-md bg-transparent px-1 text-xs placeholder:text-faint focus:outline-none focus:ring-1 focus:ring-accent disabled:opacity-40"
+    class="h-6 w-20 shrink-0 rounded-[var(--radius-control)] bg-transparent px-1 text-xs placeholder:text-faint focus:outline-none focus:ring-1 focus:ring-accent disabled:opacity-40"
     placeholder="add"
+    aria-label={`Add tag to ${cidr}`}
     disabled={locked}
     bind:value={draft[cidr]}
     onkeydown={(event) => {
diff --git a/src/lib/UpdateControl.svelte b/src/lib/UpdateControl.svelte
index 4c71b65..5cb1acb 100644
--- a/src/lib/UpdateControl.svelte
+++ b/src/lib/UpdateControl.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { Update } from "@tauri-apps/plugin-updater";
   import { checkForUpdate, installUpdate, type UpdateProgress } from "$lib/update";
+  import Button from "./ui/Button.svelte";
 
   let {
     disabled,
@@ -89,11 +90,10 @@
   }
 </script>
 
-<button
-  type="button"
-  class="relative flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-sm {update
-    ? 'text-accent'
-    : 'text-faint hover:text-text'} focus:outline-none focus:ring-1 focus:ring-accent disabled:opacity-40"
+<Button
+  variant="quiet"
+  size="icon"
+  class="relative {update ? 'text-accent' : 'text-faint'}"
   disabled={disabled || checking || installing}
   aria-label={label}
   aria-busy={checking || installing}
@@ -106,5 +106,5 @@
   {#if update && !installing}
     <span class="absolute right-0 top-0 h-1 w-1 rounded-full bg-accent" aria-hidden="true"></span>
   {/if}
-</button>
+</Button>
 <span class="sr-only" role="status" aria-live="polite">{announcement}</span>
diff --git a/src/lib/ui/Button.svelte b/src/lib/ui/Button.svelte
new file mode 100644
index 0000000..3cc23dc
--- /dev/null
+++ b/src/lib/ui/Button.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  let {
+    children,
+    variant = "quiet",
+    size = "default",
+    joined = "none",
+    type = "button",
+    disabled = false,
+    ref = $bindable<HTMLButtonElement | null>(null),
+    onclick,
+    class: className = "",
+    ...attributes
+  }: {
+    children: Snippet;
+    variant?: "quiet" | "outline" | "primary" | "danger";
+    size?: "default" | "compact" | "icon" | "narrowIcon";
+    joined?: "none" | "start" | "end";
+    type?: "button" | "submit" | "reset";
+    disabled?: boolean;
+    ref?: HTMLButtonElement | null;
+    onclick?: (event: MouseEvent) => void;
+    class?: string;
+    [key: string]: unknown;
+  } = $props();
+
+  const variants = {
+    quiet: "border-transparent text-muted hover:bg-raised hover:text-text",
+    outline: "border-line text-muted hover:border-muted hover:text-text",
+    primary: "border-line bg-raised text-text shadow-[inset_0_1px_0_rgb(255_255_255_/_0.06)] hover:border-accent/70 hover:bg-accent/10",
+    danger: "border-bad/50 text-bad hover:bg-bad/10",
+  };
+  const sizes = {
+    default: "h-7 px-3 text-xs",
+    compact: "h-6 px-2 text-xs",
+    icon: "h-7 w-7 text-sm",
+    narrowIcon: "h-7 w-6 text-xs",
+  };
+  const joins = {
+    none: "rounded-[var(--radius-control)]",
+    start: "rounded-l-[var(--radius-control)] rounded-r-none",
+    end: "rounded-l-none rounded-r-[var(--radius-control)] border-l-0",
+  };
+</script>
+
+<button
+  bind:this={ref}
+  {...attributes}
+  {type}
+  {disabled}
+  {onclick}
+  class="inline-flex shrink-0 items-center justify-center border font-medium outline-none focus-visible:ring-1 focus-visible:ring-accent disabled:pointer-events-none disabled:opacity-40 {variants[variant]} {sizes[size]} {joins[joined]} {className}"
+>
+  {@render children()}
+</button>
diff --git a/src/lib/ui/Dialog.svelte b/src/lib/ui/Dialog.svelte
new file mode 100644
index 0000000..e42a228
--- /dev/null
+++ b/src/lib/ui/Dialog.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { onDestroy, tick, type Snippet } from "svelte";
+
+  let { children, label, onDismiss }: { children: Snippet; label: string; onDismiss: () => void } = $props();
+
+  let root = $state<HTMLDivElement | null>(null);
+  const previousFocus = typeof document === "undefined" ? null : document.activeElement as HTMLElement | null;
+  let restored = false;
+
+  function restoreFocus() {
+    if (restored) return;
+    restored = true;
+    previousFocus?.focus();
+  }
+
+  function dismiss() {
+    restoreFocus();
+    onDismiss();
+  }
+
+  $effect(() => {
+    void tick().then(() => root?.querySelector<HTMLElement>("input, button, [tabindex]:not([tabindex='-1'])")?.focus());
+  });
+
+  onDestroy(restoreFocus);
+
+  function trapFocus(event: KeyboardEvent) {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      dismiss();
+      return;
+    }
+    if (event.key !== "Tab") return;
+    const focusable = [...(root?.querySelectorAll<HTMLElement>('a[href], button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex="-1"])') ?? [])];
+    if (focusable.length === 0) {
+      event.preventDefault();
+      root?.focus();
+      return;
+    }
+    const current = focusable.indexOf(document.activeElement as HTMLElement);
+    if (event.shiftKey && (current <= 0 || document.activeElement === root)) {
+      event.preventDefault();
+      focusable[focusable.length - 1]?.focus();
+    } else if (!event.shiftKey && current === focusable.length - 1) {
+      event.preventDefault();
+      focusable[0]?.focus();
+    }
+  }
+</script>
+
+<div class="absolute inset-0 z-20 flex items-center justify-center bg-bg/85 px-6" role="presentation" onkeydown={trapFocus}>
+  <div bind:this={root} class="w-full max-w-md rounded-[var(--radius-surface)] border border-line bg-raised p-5 shadow-[0_20px_50px_rgb(0_0_0_/_0.35)]" role="dialog" aria-modal="true" aria-label={label} tabindex="-1">
+    {@render children()}
+  </div>
+</div>
diff --git a/src/lib/ui/MenuItem.svelte b/src/lib/ui/MenuItem.svelte
new file mode 100644
index 0000000..4e18280
--- /dev/null
+++ b/src/lib/ui/MenuItem.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  let {
+    children,
+    disabled = false,
+    danger = false,
+    onclick,
+  }: {
+    children: Snippet;
+    disabled?: boolean;
+    danger?: boolean;
+    onclick: () => void;
+  } = $props();
+</script>
+
+<button
+  type="button"
+  class="block w-full px-3 py-1.5 text-left outline-none hover:bg-bg focus:bg-bg disabled:opacity-40 {danger ? 'text-bad' : 'text-text'}"
+  {disabled}
+  role="menuitem"
+  {onclick}
+>
+  {@render children()}
+</button>
diff --git a/src/lib/ui/MenuSurface.svelte b/src/lib/ui/MenuSurface.svelte
new file mode 100644
index 0000000..970e215
--- /dev/null
+++ b/src/lib/ui/MenuSurface.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+  import { onDestroy, tick, type Snippet } from "svelte";
+
+  let {
+    children,
+    class: className = "",
+    trigger = null,
+    onDismiss,
+  }: {
+    children: Snippet;
+    class?: string;
+    trigger?: HTMLElement | null;
+    onDismiss: () => void;
+  } = $props();
+
+  let root = $state<HTMLDivElement | null>(null);
+  let restored = false;
+
+  function restoreFocus() {
+    if (restored) return;
+    restored = true;
+    trigger?.focus();
+  }
+
+  function dismiss() {
+    restoreFocus();
+    onDismiss();
+  }
+
+  $effect(() => {
+    void tick().then(() => {
+      const first = root?.querySelector<HTMLElement>('[role="menuitem"]:not(:disabled)');
+      (first ?? root)?.focus();
+    });
+  });
+
+  onDestroy(restoreFocus);
+
+  function moveFocus(event: KeyboardEvent) {
+    const items = [...(root?.querySelectorAll<HTMLButtonElement>('[role="menuitem"]:not(:disabled)') ?? [])];
+    const current = items.indexOf(document.activeElement as HTMLButtonElement);
+    if (event.key === "Escape") {
+      event.preventDefault();
+      dismiss();
+    } else if (event.key === "Home" || event.key === "End") {
+      event.preventDefault();
+      items[event.key === "Home" ? 0 : items.length - 1]?.focus();
+    } else if ((event.key === "ArrowDown" || event.key === "ArrowUp") && items.length > 0) {
+      event.preventDefault();
+      items[(current + (event.key === "ArrowDown" ? 1 : -1) + items.length) % items.length]?.focus();
+    }
+  }
+</script>
+
+<div bind:this={root} class="z-30 rounded-[var(--radius-control)] border border-line bg-raised py-1 text-xs text-text shadow-[0_12px_30px_rgb(0_0_0_/_0.3)] {className}" role="menu" tabindex="-1" onkeydown={moveFocus}>
+  {@render children()}
+</div>
diff --git a/src/lib/ui/Pill.svelte b/src/lib/ui/Pill.svelte
new file mode 100644
index 0000000..66541df
--- /dev/null
+++ b/src/lib/ui/Pill.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  let { children, tone = "neutral", class: className = "" }: { children: Snippet; tone?: "neutral" | "accent" | "country"; class?: string } = $props();
+
+  const tones = {
+    neutral: "border-line bg-raised text-text",
+    accent: "border-accent/40 bg-accent/10 text-accent",
+    country: "border-line bg-bg text-muted",
+  };
+</script>
+
+<span class="inline-flex h-[22px] max-w-full items-center truncate rounded-[var(--radius-control)] border px-1.5 font-mono text-xs {tones[tone]} {className}">
+  {@render children()}
+</span>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 030926a..f9820c7 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -10,7 +10,10 @@
   import { emptyMetrics, withMetrics } from "$lib/import";
   import SubnetTable from "$lib/SubnetTable.svelte";
   import ExportMenu from "$lib/ExportMenu.svelte";
+  import SelectionActions from "$lib/SelectionActions.svelte";
   import UpdateControl from "$lib/UpdateControl.svelte";
+  import Button from "$lib/ui/Button.svelte";
+  import Dialog from "$lib/ui/Dialog.svelte";
 
   let rows = $state<SubnetRow[]>([]);
   let hovering = $state(false);
@@ -25,7 +28,6 @@
   let failed = $state(false);
   let working = $state("");
   let draft = $state<Record<string, string>>({});
-  let targetField = $state<HTMLInputElement | null>(null);
   let filtering = $state(false);
   let filterCount = $state(0);
   let selectedCidrs = $state<Set<string>>(new Set());
@@ -46,7 +48,6 @@
 
   const locked = $derived(busy || running || updating);
   const selectedScope = $derived(selectedCidrs.size > 0 ? [...selectedCidrs] : null);
-  const selectedLabel = $derived(selectedCidrs.size > 0 ? `${selectedCidrs.size} selected` : "");
 
   $effect(() => {
     const available = new Set(rows.map((row) => row.cidr));
@@ -80,12 +81,6 @@
     failed = false;
   }
 
-  $effect(() => {
-    if (asking) {
-      targetField?.focus();
-    }
-  });
-
   onMount(() => {
     let disposed = false;
     let stopDrop = () => {};
@@ -187,6 +182,7 @@
   }
 
   async function exportFiles(cidrs: string[] | null = selectedScope) {
+    exportMenuOpen = false;
     if (locked || rows.length === 0) {
       return;
     }
@@ -252,7 +248,6 @@
 
   function closeExportMenu() {
     exportMenuOpen = false;
-    exportMenuTrigger?.focus();
   }
 
   $effect(() => {
@@ -309,6 +304,7 @@
     if (locked || rows.length === 0) {
       return;
     }
+    exportMenuOpen = false;
     probeCidrs = selectedScope;
     asking = true;
   }
@@ -322,6 +318,7 @@
     if (locked) {
       return;
     }
+    exportMenuOpen = false;
     probeCidrs = cidrs;
     if (target.trim()) {
       await confirmProbe();
@@ -453,18 +450,8 @@
     </div>
   {/if}
   {#if asking}
-    <div
-      class="absolute inset-0 z-20 flex items-center justify-center bg-bg/85 px-6"
-      role="presentation"
-      onkeydown={(event) => {
-        if (event.key === "Escape") {
-          event.preventDefault();
-          cancelProbe();
-        }
-      }}
-    >
+    <Dialog label="Probe" onDismiss={cancelProbe}>
       <form
-        class="w-full max-w-md rounded-xl border border-line bg-raised p-5"
         onsubmit={(event) => {
           event.preventDefault();
           void confirmProbe();
@@ -477,43 +464,23 @@
         <label class="mt-4 block text-xs text-faint" for="target-url">HTTPS URL</label>
         <input
           id="target-url"
-          class="mt-1 w-full rounded-md border border-line bg-bg px-3 py-2 font-mono text-sm text-text placeholder:text-faint focus:outline-none focus:ring-1 focus:ring-accent"
+          class="mt-1 w-full rounded-[var(--radius-control)] border border-line bg-bg px-3 py-2 font-mono text-sm text-text placeholder:text-faint focus:outline-none focus:ring-1 focus:ring-accent"
           type="url"
           placeholder="https://example.com/"
-          bind:this={targetField}
           bind:value={target}
         />
         <div class="mt-5 flex justify-end gap-2">
-          <button
-            type="button"
-            class="h-7 rounded-md border border-line px-3 text-xs text-muted hover:text-text focus:outline-none focus:ring-1 focus:ring-accent"
-            onclick={cancelProbe}
-          >
-            Cancel
-          </button>
-          <button
-            type="submit"
-            class="h-7 rounded-md border border-line bg-raised px-3 text-xs text-text focus:outline-none focus:ring-1 focus:ring-accent disabled:opacity-40"
-            disabled={!target.trim()}
-          >
-            Probe
-          </button>
+          <Button variant="outline" onclick={cancelProbe}>Cancel</Button>
+          <Button type="submit" variant="primary" disabled={!target.trim()}>Probe</Button>
         </div>
       </form>
-    </div>
+    </Dialog>
   {/if}
   {#if rows.length === 0}
     <div class="flex min-h-0 flex-1 flex-col items-center justify-center px-6 text-center">
       <h1 class="text-sm font-medium">proxybench</h1>
       <p class="mt-2 text-xs text-faint">Drop a .txt file or a folder of .txt files.</p>
-      <button
-        type="button"
-        class="mt-6 h-7 rounded-md border border-line bg-raised px-3 text-xs text-text focus:outline-none focus:ring-1 focus:ring-accent disabled:opacity-40"
-        disabled={locked}
-        onclick={pickFiles}
-      >
-        Open files
-      </button>
+      <Button variant="primary" class="mt-6" disabled={locked} onclick={pickFiles}>Open files</Button>
       {#if busy}
         <p class="mt-4 text-sm text-faint">{working || "Importing…"}</p>
       {/if}
@@ -527,67 +494,46 @@
             {#if busy && !running}
               {working || "Working…"}
             {:else}
-              {rows.length} {rows.length === 1 ? "subnet" : "subnets"}{selectedLabel
-                ? ` · ${selectedLabel}`
-                : ""}
+              {rows.length} {rows.length === 1 ? "subnet" : "subnets"}
             {/if}
           </p>
         </div>
         <div class="flex items-center gap-2">
-          <button
-            type="button"
-            class="h-7 rounded-md border border-line px-3 text-xs {filtering
-              ? 'bg-raised text-text'
-              : 'text-muted hover:text-text'} focus:outline-none focus:ring-1 focus:ring-accent"
+          <Button
+            variant={filtering ? "primary" : "outline"}
+            aria-pressed={filtering}
             onclick={() => (filtering = !filtering)}
           >
             Filter{filterCount > 0 ? ` ${filterCount}` : ""}
-          </button>
-          <button
-            type="button"
-            class="h-7 rounded-md border border-line px-3 text-xs text-muted hover:text-text focus:outline-none focus:ring-1 focus:ring-accent disabled:opacity-40"
-            disabled={locked}
-            onclick={pickFiles}
-          >
-            Open files
-          </button>
-          <div class="relative flex" data-export-menu>
-            <button
-              type="button"
-              class="h-7 rounded-l-md border border-line px-3 text-xs text-muted hover:text-text focus:outline-none focus:ring-1 focus:ring-accent disabled:opacity-40"
-              disabled={locked}
-              onclick={() => void exportFiles()}
-            >
-              Export
-            </button>
-            <button
-              bind:this={exportMenuTrigger}
-              type="button"
-              class="h-7 w-7 rounded-r-md border border-l-0 border-line text-xs text-muted hover:text-text focus:outline-none focus:ring-1 focus:ring-accent disabled:opacity-40"
-              aria-label="More export options"
-              aria-expanded={exportMenuOpen}
-              aria-haspopup="menu"
-              disabled={locked}
-              onclick={() => (exportMenuOpen = !exportMenuOpen)}
-            >
-              ▾
-            </button>
-            {#if exportMenuOpen}
-              <ExportMenu
-                {locked}
-                onAycd={() => void exportAycd()}
-                onDismiss={closeExportMenu}
-              />
-            {/if}
-          </div>
-          <button
-            type="button"
-            class="h-7 rounded-md border border-line bg-raised px-3 text-xs text-text focus:outline-none focus:ring-1 focus:ring-accent disabled:opacity-40"
-            disabled={locked}
-            onclick={openProbe}
-          >
-            {selectedLabel ? "Probe selected" : "Probe all"}
-          </button>
+          </Button>
+          <Button variant="outline" disabled={locked} onclick={pickFiles}>Open files</Button>
+          {#if selectedCidrs.size > 0}
+            <SelectionActions
+              {locked}
+              onExport={() => void exportFiles()}
+              onExportAycd={() => void exportAycd()}
+              onProbe={openProbe}
+            />
+          {:else}
+            <div class="relative flex" data-export-menu>
+              <Button variant="outline" joined="start" disabled={locked} onclick={() => void exportFiles()}>Export</Button>
+              <Button
+                bind:ref={exportMenuTrigger}
+                variant="outline"
+                size="narrowIcon"
+                joined="end"
+                aria-label="More export options"
+                aria-expanded={exportMenuOpen}
+                aria-haspopup="menu"
+                disabled={locked}
+                onclick={() => (exportMenuOpen = !exportMenuOpen)}
+              >▾</Button>
+              {#if exportMenuOpen}
+                <ExportMenu {locked} trigger={exportMenuTrigger} onAycd={() => void exportAycd()} onDismiss={closeExportMenu} />
+              {/if}
+            </div>
+            <Button variant="primary" disabled={locked} onclick={openProbe}>Probe all</Button>
+          {/if}
         </div>
       </header>
       <SubnetTable
@@ -614,7 +560,7 @@
       {#if version}
         <button
           type="button"
-          class="rounded-sm text-xs tabular-nums text-faint hover:text-text hover:underline hover:decoration-dotted hover:underline-offset-2 focus:outline-none focus:ring-1 focus:ring-accent"
+          class="rounded-[var(--radius-control)] px-1 text-xs tabular-nums text-faint hover:text-text hover:underline hover:decoration-dotted hover:underline-offset-2 focus:outline-none focus:ring-1 focus:ring-accent"
           aria-label={`proxybench v${version} — open repository on GitHub`}
           title="https://github.com/Mathious6/proxybench"
           onclick={openRepository}
@@ -655,24 +601,20 @@
       <span class="h-4 w-px shrink-0 bg-line" aria-hidden="true"></span>
       <div class="flex shrink-0 items-center gap-2 pl-3">
         <span class="min-w-[112px] text-right text-xs tabular-nums text-faint">{paging.label}</span>
-        <button
-          type="button"
-          class="h-7 w-7 rounded-md border border-line text-xs text-muted hover:text-text focus:outline-none focus:ring-1 focus:ring-accent disabled:opacity-40"
+        <Button
+          variant="outline"
+          size="icon"
           aria-label="Previous page"
           disabled={!paging.canPrevious}
           onclick={() => paging.previous()}
-        >
-          ‹
-        </button>
-        <button
-          type="button"
-          class="h-7 w-7 rounded-md border border-line text-xs text-muted hover:text-text focus:outline-none focus:ring-1 focus:ring-accent disabled:opacity-40"
+        >‹</Button>
+        <Button
+          variant="outline"
+          size="icon"
           aria-label="Next page"
           disabled={!paging.canNext}
           onclick={() => paging.next()}
-        >
-          ›
-        </button>
+        >›</Button>
       </div>
     {/if}
   </footer>