@le-space/ui 0.9.1 → 0.9.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@le-space/ui",
-  "version": "0.9.1",
+  "version": "0.9.4",
   "description": "Floating Aleph Relay Button UI components for Svelte and React.",
   "license": "MIT",
   "type": "module",
@@ -44,8 +44,8 @@
     "url": "https://github.com/NiKrause/relay-button/issues"
   },
   "dependencies": {
-    "@le-space/browser": "0.9.1",
-    "@le-space/core": "0.9.1",
+    "@le-space/browser": "0.9.4",
+    "@le-space/core": "0.9.4",
     "viem": "^2.53.1"
   },
   "peerDependencies": {

package/react/index.d.ts

@@ -199,6 +199,16 @@ interface DeploymentProgressEvent {
 }
 type DeploymentProgressListener = (event: DeploymentProgressEvent) => void;
 
+/**
+ * Geometry for a launcher the consumer can place and the user can drag.
+ *
+ * Kept free of DOM access on purpose: the framework layers read rects and write
+ * styles, this module only does the arithmetic, which is what makes the awkward
+ * parts — the tap/drag threshold, staying on screen after a rotation — testable
+ * without a browser.
+ */
+type FabCorner = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+
 type SponsorRelayHealthTone = 'ok' | 'caution' | 'error' | 'idle';
 interface SponsorRelayUcanStoreBootstrapInput {
     adminDid: string;
@@ -233,6 +243,20 @@ interface SponsorRelayProps {
     crnSource?: CrnSourcePreference;
     schedulerApiHost?: string;
     twoN6ApiHost?: string;
+    /**
+     * Which corner the floating launcher starts in. Consumers could not place it
+     * at all before: the launcher is `position: fixed`, so a wrapper around it
+     * collapses to 0x0 and has no box to position or drag.
+     */
+    position?: FabCorner;
+    /** Let the user drag the launcher. The panel follows it. */
+    draggable?: boolean;
+    /**
+     * localStorage key for the dragged position. Omit it and nothing is
+     * persisted -- a library that writes to storage unasked collides with its
+     * host.
+     */
+    positionStorageKey?: string;
 }
 interface SponsorRelayWalletState {
     connected: boolean;
@@ -400,6 +424,7 @@ declare class SponsorRelayController {
     private emit;
     private trace;
     private patch;
+    private lastProgressLabel;
     private emitProgress;
     private configureRelayBootstrapRegistration;
     private probeRelayReachableOverProxy;

package/react/index.js

@@ -1,6 +1,59 @@
 // src/react/SponsorRelayFab.tsx
 import React2 from "react";
 
+// src/shared/fab-position.ts
+var FAB_EDGE_MARGIN = 22;
+var FAB_DRAG_THRESHOLD = 6;
+function dragExceedsThreshold(start, current, threshold = FAB_DRAG_THRESHOLD) {
+  const dx = current.x - start.x;
+  const dy = current.y - start.y;
+  return Math.hypot(dx, dy) >= threshold;
+}
+function resolveCornerPlacement(corner, size, viewport, margin = FAB_EDGE_MARGIN) {
+  const left = corner.endsWith("left") ? margin : viewport.width - size.width - margin;
+  const top = corner.startsWith("top") ? margin : viewport.height - size.height - margin;
+  return clampToViewport({ left, top }, size, viewport, margin);
+}
+function clampToViewport(placement, size, viewport, margin = FAB_EDGE_MARGIN) {
+  const maxLeft = Math.max(margin, viewport.width - size.width - margin);
+  const maxTop = Math.max(margin, viewport.height - size.height - margin);
+  return {
+    left: Math.min(Math.max(placement.left, margin), maxLeft),
+    top: Math.min(Math.max(placement.top, margin), maxTop)
+  };
+}
+function anchorPanelToLauncher(launcher, panel, viewport, gap = 12, margin = FAB_EDGE_MARGIN) {
+  const launcherCentre = launcher.top + launcher.height / 2;
+  const side = launcherCentre < viewport.height / 2 ? "below" : "above";
+  const top = side === "below" ? launcher.top + launcher.height + gap : launcher.top - gap - panel.height;
+  const preferredLeft = launcher.left + launcher.width / 2 < viewport.width / 2 ? launcher.left : launcher.left + launcher.width - panel.width;
+  const clamped = clampToViewport({ left: preferredLeft, top }, panel, viewport, margin);
+  const available = side === "below" ? viewport.height - clamped.top - margin : launcher.top - gap - margin;
+  return {
+    ...clamped,
+    side,
+    maxHeight: Math.max(0, available)
+  };
+}
+function readStoredPosition(key) {
+  if (!key) return null;
+  try {
+    const raw = globalThis.localStorage?.getItem(key);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    return Number.isFinite(parsed?.left) && Number.isFinite(parsed?.top) ? parsed : null;
+  } catch {
+    return null;
+  }
+}
+function writeStoredPosition(key, placement, viewport) {
+  if (!key) return;
+  try {
+    globalThis.localStorage?.setItem(key, JSON.stringify({ ...placement, viewport }));
+  } catch {
+  }
+}
+
 // src/shared/constants.ts
 var DEFAULT_INSTANCE_NAME = "sponsor-relay";
 var DEFAULT_MANIFEST_URL = "./rootfs-manifest.json";
@@ -43,7 +96,7 @@ var RECENT_INSTANCE_RUNTIME_GRACE_MS = 10 * 60 * 1e3;
 var DEPLOYMENT_PENDING_WARNING_MS = 3 * 60 * 1e3;
 
 // src/shared/package-version.ts
-var UI_PACKAGE_VERSION = "0.9.1";
+var UI_PACKAGE_VERSION = "0.9.4";
 
 // src/shared/format.ts
 function shortHash(value, head = 8, tail = 6) {
@@ -2777,7 +2830,8 @@ function browserMultiaddrTransport(addr) {
 }
 function selectCompactRelayBootstrapMultiaddrs(addrs, limit = DEFAULT_BOOTSTRAP_COMPACT_MULTIADDR_LIMIT) {
   const entries = filterPublicMultiaddrs(addrs, {
-    browserDialableOnly: true
+    browserDialableOnly: true,
+    allowInsecureWebSockets: true
   }).map((addr, index) => ({
     addr,
     index,
@@ -2847,12 +2901,23 @@ function isLocalHostname(host) {
 function hasPeerId(addr) {
   return splitMultiaddr(addr).includes("p2p");
 }
-function isBrowserDialableMultiaddr(addr) {
+function isSecureWebSocketMultiaddr(addr) {
+  const parts = splitMultiaddr(addr.toLowerCase());
+  if (parts.includes("wss")) return true;
+  const wsIndex = parts.indexOf("ws");
+  return wsIndex > 0 && parts.lastIndexOf("tls", wsIndex) >= 0;
+}
+function isWebSocketMultiaddr(addr) {
+  const parts = splitMultiaddr(addr.toLowerCase());
+  return parts.includes("ws") || parts.includes("wss");
+}
+function isBrowserDialableMultiaddr(addr, options = {}) {
   const normalized = addr.toLowerCase();
   if (normalized.includes("/webtransport") || normalized.includes("/webrtc-direct")) {
     return normalized.includes("/certhash/");
   }
-  return normalized.includes("/ws") || normalized.includes("/wss");
+  if (!isWebSocketMultiaddr(addr)) return false;
+  return (options.allowInsecureWebSockets ?? false) || isSecureWebSocketMultiaddr(addr);
 }
 function dedupeMultiaddrs(addrs) {
   const seen = /* @__PURE__ */ new Set();
@@ -2886,7 +2951,9 @@ function filterPublicMultiaddrs(addrs, options = {}) {
   return dedupeMultiaddrs(addrs).filter((addr) => {
     if (!isPublicMultiaddr(addr)) return false;
     if (options.requirePeerId !== false && !hasPeerId(addr)) return false;
-    if (options.browserDialableOnly && !isBrowserDialableMultiaddr(addr)) {
+    if (options.browserDialableOnly && !isBrowserDialableMultiaddr(addr, {
+      allowInsecureWebSockets: options.allowInsecureWebSockets
+    })) {
       return false;
     }
     return true;
@@ -3001,7 +3068,8 @@ function buildRelayBootstrapPostContent(args) {
   const updatedAt = args.now ?? Date.now();
   const fullMultiaddrs = filterPublicMultiaddrs(args.multiaddrs);
   const fullBrowserMultiaddrs = args.browserMultiaddrs ? filterPublicMultiaddrs(args.browserMultiaddrs, {
-    browserDialableOnly: true
+    browserDialableOnly: true,
+    allowInsecureWebSockets: true
   }) : void 0;
   const compactMultiaddrs = selectCompactRelayBootstrapMultiaddrs(
     fullBrowserMultiaddrs && fullBrowserMultiaddrs.length > 0 ? fullBrowserMultiaddrs : fullMultiaddrs,
@@ -3083,7 +3151,8 @@ async function signRelayBootstrapAuthorization(args) {
 async function signRelayBootstrapProof(args) {
   const fullMultiaddrs = filterPublicMultiaddrs(args.multiaddrs);
   const fullBrowserMultiaddrs = args.browserMultiaddrs ? filterPublicMultiaddrs(args.browserMultiaddrs, {
-    browserDialableOnly: true
+    browserDialableOnly: true,
+    allowInsecureWebSockets: true
   }) : void 0;
   const compactMultiaddrs = selectCompactRelayBootstrapMultiaddrs(
     fullBrowserMultiaddrs && fullBrowserMultiaddrs.length > 0 ? fullBrowserMultiaddrs : fullMultiaddrs,
@@ -3885,12 +3954,30 @@ function validateUcanStoreBootstrapPackage(value) {
 function deploymentNoun(profile) {
   return profile === "ucan-store" ? "service" : "relay";
 }
+function describeRequest(input, init) {
+  const method = String(init?.method ?? "GET").toUpperCase();
+  const url = typeof input === "string" ? input : input instanceof URL ? input.toString() : typeof input?.url === "string" ? input.url : "<unknown url>";
+  return `${method} ${url}`;
+}
+function deploymentFailureMessage(error, stage) {
+  const message = error instanceof Error ? error.message : String(error);
+  const step = String(stage ?? "").trim();
+  return step ? `${message} (while: ${step})` : message;
+}
 function asJsonFetch(input, init) {
-  return fetch(input, init).then(async (response) => ({
-    ok: response.ok,
-    status: response.status,
-    json: async () => await response.json()
-  }));
+  return fetch(input, init).then(
+    async (response) => ({
+      ok: response.ok,
+      status: response.status,
+      json: async () => await response.json()
+    }),
+    (error) => {
+      const reason = error instanceof Error ? error.message : String(error);
+      throw new Error(`${reason} (${describeRequest(input, init)})`, {
+        cause: error
+      });
+    }
+  );
 }
 function isConfirmedGuestSetupResult(value) {
   return Boolean(
@@ -4533,11 +4620,15 @@ var SponsorRelayController = class {
     };
     this.emit();
   }
+  lastProgressLabel = null;
   emitProgress(event) {
     const nextEvent = {
       ...event,
       timestamp: Date.now()
     };
+    if (nextEvent.stage !== "error") {
+      this.lastProgressLabel = nextEvent.label;
+    }
     this.trace(`progress:${nextEvent.stage}`, {
       label: nextEvent.label,
       progress: nextEvent.progress,
@@ -6454,10 +6545,15 @@ var SponsorRelayController = class {
         attemptErrors.length > 0 ? `All compatible CRNs failed. ${attemptErrors.join(" | ")}` : lastError?.message ?? "All compatible CRNs failed."
       );
     } catch (error) {
-      this.trace("deploy:error", error);
+      const message = deploymentFailureMessage(error, this.lastProgressLabel);
+      this.trace("deploy:error", {
+        message,
+        stage: this.lastProgressLabel,
+        error
+      });
       this.patch({
         busy: { deploying: false },
-        errorText: error instanceof Error ? error.message : String(error),
+        errorText: message,
         statusText: "Deployment failed"
       });
       this.emitProgress({
@@ -6465,7 +6561,7 @@ var SponsorRelayController = class {
         label: "Deployment failed",
         progress: 100,
         status: "error",
-        error: error instanceof Error ? error.message : String(error)
+        error: message
       });
     }
   }
@@ -7169,6 +7265,14 @@ function SponsorRelayFab(props) {
     }
   };
   const launcherRef = React2.useRef(null);
+  const panelRef = React2.useRef(null);
+  const draggable = props.draggable ?? false;
+  const corner = props.position ?? "bottom-right";
+  const storageKey = props.positionStorageKey;
+  const [placement, setPlacement] = React2.useState(null);
+  const dragOrigin = React2.useRef(null);
+  const dragOffset = React2.useRef(null);
+  const draggedRef = React2.useRef(false);
   const [inlinePanelStyle, setInlinePanelStyle] = React2.useState(null);
   const [compactInlineLabel, setCompactInlineLabel] = React2.useState(false);
   React2.useEffect(() => {
@@ -7198,6 +7302,67 @@ function SponsorRelayFab(props) {
       window.clearTimeout(timeout);
     };
   }, [state.deploymentProgress.stage, state.deploymentProgress.timestamp]);
+  const viewportSize = () => ({
+    width: window.innerWidth,
+    height: window.innerHeight
+  });
+  const launcherSize = () => {
+    const rect = launcherRef.current?.getBoundingClientRect();
+    return { width: rect?.width ?? 180, height: rect?.height ?? 44 };
+  };
+  React2.useEffect(() => {
+    if (launcherMode !== "floating") {
+      setPlacement(null);
+      return;
+    }
+    const stored = readStoredPosition(storageKey);
+    setPlacement(
+      stored ? clampToViewport(stored, launcherSize(), viewportSize()) : resolveCornerPlacement(corner, launcherSize(), viewportSize())
+    );
+    const onViewportChange = () => setPlacement(
+      (current) => current ? clampToViewport(current, launcherSize(), viewportSize()) : current
+    );
+    window.addEventListener("resize", onViewportChange);
+    window.addEventListener("orientationchange", onViewportChange);
+    return () => {
+      window.removeEventListener("resize", onViewportChange);
+      window.removeEventListener("orientationchange", onViewportChange);
+    };
+  }, [launcherMode, corner, storageKey]);
+  const handlePointerDown = (event) => {
+    if (!draggable || launcherMode !== "floating" || event.button > 0 || !placement) return;
+    dragOrigin.current = { x: event.clientX, y: event.clientY };
+    dragOffset.current = { x: event.clientX - placement.left, y: event.clientY - placement.top };
+    draggedRef.current = false;
+    event.currentTarget.setPointerCapture?.(event.pointerId);
+  };
+  const handlePointerMove = (event) => {
+    const origin = dragOrigin.current;
+    const offset = dragOffset.current;
+    if (!origin || !offset) return;
+    const point = { x: event.clientX, y: event.clientY };
+    if (!draggedRef.current && !dragExceedsThreshold(origin, point)) return;
+    draggedRef.current = true;
+    setPlacement(
+      clampToViewport(
+        { left: point.x - offset.x, top: point.y - offset.y },
+        launcherSize(),
+        viewportSize()
+      )
+    );
+  };
+  const handlePointerUp = (event) => {
+    if (!dragOrigin.current) return;
+    event.currentTarget.releasePointerCapture?.(event.pointerId);
+    dragOrigin.current = null;
+    dragOffset.current = null;
+    if (draggedRef.current && placement) {
+      writeStoredPosition(storageKey, placement, viewportSize());
+    } else {
+      controller.toggleOpen();
+    }
+    draggedRef.current = false;
+  };
   React2.useEffect(() => {
     if (launcherMode !== "inline" || !state.open) {
       return;
@@ -7251,18 +7416,37 @@ function SponsorRelayFab(props) {
   const inlineButtonBorder = `1px solid ${themedLauncherBorder}`;
   const inlineBadgeBackground = themedLauncherBadgeBackground;
   const inlineBadgeBorder = `1px solid ${themedLauncherBadgeBorder}`;
+  const floatingPanelStyle = () => {
+    if (!placement || typeof window === "undefined") {
+      return {
+        ...basePanelStyle,
+        right: "1.4rem",
+        bottom: "11.5rem",
+        maxHeight: "calc(100vh - 12.5rem)"
+      };
+    }
+    const panelRect = panelRef.current?.getBoundingClientRect();
+    const anchored = anchorPanelToLauncher(
+      { ...placement, ...launcherSize() },
+      { width: panelRect?.width ?? 448, height: panelRect?.height ?? 520 },
+      viewportSize()
+    );
+    return {
+      ...basePanelStyle,
+      left: anchored.left,
+      top: anchored.top,
+      right: "auto",
+      bottom: "auto",
+      maxHeight: anchored.maxHeight
+    };
+  };
   const panelStyle = launcherMode === "inline" ? inlinePanelStyle ?? {
     ...basePanelStyle,
     top: "4.75rem",
     right: "1rem",
     maxHeight: "calc(100vh - 6rem)",
     width: "min(30rem, calc(100vw - 1.5rem))"
-  } : {
-    ...basePanelStyle,
-    right: "1.4rem",
-    bottom: "11.5rem",
-    maxHeight: "calc(100vh - 12.5rem)"
-  };
+  } : floatingPanelStyle();
   const launcherLabel = deploymentLauncherLabel(state, compactInlineLabel, launcherMode);
   const rootfsBlocked = state.rootfsHealth.tone === "error";
   const deployCallToAction = state.wallet.connected ? state.busy.deploying ? "Deploying\u2026" : rootfsBlocked ? "Deployment blocked \u2014 Rootfs unavailable" : deploymentButtonLabel(state) : "Connect MetaMask";
@@ -7273,7 +7457,11 @@ function SponsorRelayFab(props) {
       {
         ref: launcherRef,
         type: "button",
-        onClick: () => controller.toggleOpen(),
+        onClick: draggable ? void 0 : () => controller.toggleOpen(),
+        onPointerDown: handlePointerDown,
+        onPointerMove: handlePointerMove,
+        onPointerUp: handlePointerUp,
+        onPointerCancel: handlePointerUp,
         onMouseEnter: () => setHovered(true),
         onMouseLeave: () => setHovered(false),
         onFocus: () => setHovered(true),
@@ -7281,8 +7469,13 @@ function SponsorRelayFab(props) {
         title: indicator.detail ?? deploymentPanelTitle(state),
         style: {
           position: launcherMode === "floating" ? "fixed" : "relative",
-          right: launcherMode === "floating" ? "1.4rem" : void 0,
-          bottom: launcherMode === "floating" ? "5.8rem" : void 0,
+          left: launcherMode === "floating" && placement ? placement.left : void 0,
+          top: launcherMode === "floating" && placement ? placement.top : void 0,
+          right: launcherMode === "floating" && !placement ? "1.4rem" : void 0,
+          bottom: launcherMode === "floating" && !placement ? "5.8rem" : void 0,
+          // Without this the browser scrolls the page instead of moving the button.
+          touchAction: draggable ? "none" : void 0,
+          userSelect: draggable ? "none" : void 0,
           zIndex: launcherMode === "floating" ? 1e4 : "auto",
           borderRadius: "999px",
           border: launcherMode === "floating" ? `1px solid ${themedLauncherBorder}` : inlineButtonBorder,
@@ -7412,7 +7605,7 @@ function SponsorRelayFab(props) {
           }
         }
       ),
-      /* @__PURE__ */ jsxs("aside", { style: panelStyle, children: [
+      /* @__PURE__ */ jsxs("aside", { ref: panelRef, style: panelStyle, children: [
         /* @__PURE__ */ jsxs(
           "div",
           {

package/shared/index.d.ts

@@ -197,6 +197,75 @@ interface DeploymentProgressEvent {
 }
 type DeploymentProgressListener = (event: DeploymentProgressEvent) => void;
 
+/**
+ * Geometry for a launcher the consumer can place and the user can drag.
+ *
+ * Kept free of DOM access on purpose: the framework layers read rects and write
+ * styles, this module only does the arithmetic, which is what makes the awkward
+ * parts — the tap/drag threshold, staying on screen after a rotation — testable
+ * without a browser.
+ */
+type FabCorner = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+interface FabPoint {
+    x: number;
+    y: number;
+}
+interface FabSize {
+    width: number;
+    height: number;
+}
+interface FabViewport {
+    width: number;
+    height: number;
+}
+/** Absolute top-left of the launcher, in viewport coordinates. */
+interface FabPlacement {
+    left: number;
+    top: number;
+}
+declare const DEFAULT_FAB_CORNER: FabCorner;
+/** Distance from the viewport edge, matching the previous `1.4rem` inset. */
+declare const FAB_EDGE_MARGIN = 22;
+/**
+ * Pointer travel, in pixels, before a press becomes a drag.
+ *
+ * Not zero: fingers are not steady, so a strict zero turns every tap into a
+ * one-pixel drag and the click never fires.
+ */
+declare const FAB_DRAG_THRESHOLD = 6;
+declare function dragExceedsThreshold(start: FabPoint, current: FabPoint, threshold?: number): boolean;
+/** Where a named corner puts a launcher of this size in this viewport. */
+declare function resolveCornerPlacement(corner: FabCorner, size: FabSize, viewport: FabViewport, margin?: number): FabPlacement;
+/**
+ * Keep the launcher reachable. A viewport that shrinks — rotation, a desktop
+ * window dragged narrow, a mobile keyboard — would otherwise strand a dragged
+ * button off-screen with no way to bring it back.
+ */
+declare function clampToViewport(placement: FabPlacement, size: FabSize, viewport: FabViewport, margin?: number): FabPlacement;
+/** Which way the panel should open, given where the launcher sits. */
+type FabPanelSide = 'above' | 'below';
+interface FabPanelPlacement extends FabPlacement {
+    side: FabPanelSide;
+    maxHeight: number;
+}
+/**
+ * Hang the panel off the launcher instead of off its own hardcoded corner.
+ *
+ * The panel opens away from the nearer edge, so a launcher dragged to the top
+ * of the screen drops its panel downward rather than off-screen upward.
+ */
+declare function anchorPanelToLauncher(launcher: FabPlacement & FabSize, panel: FabSize, viewport: FabViewport, gap?: number, margin?: number): FabPanelPlacement;
+interface StoredPosition extends FabPlacement {
+    /** Viewport the position was captured in, so a resize can be detected. */
+    viewport?: FabViewport;
+}
+/**
+ * Persistence is opt-in through a consumer-supplied key: a library that writes
+ * to localStorage unasked is a library that collides with its host.
+ */
+declare function readStoredPosition(key: string | null | undefined): StoredPosition | null;
+declare function writeStoredPosition(key: string | null | undefined, placement: FabPlacement, viewport?: FabViewport): void;
+
 type SponsorRelayHealthTone = 'ok' | 'caution' | 'error' | 'idle';
 interface SponsorRelayUcanStoreBootstrapInput {
     adminDid: string;
@@ -231,6 +300,20 @@ interface SponsorRelayProps {
     crnSource?: CrnSourcePreference;
     schedulerApiHost?: string;
     twoN6ApiHost?: string;
+    /**
+     * Which corner the floating launcher starts in. Consumers could not place it
+     * at all before: the launcher is `position: fixed`, so a wrapper around it
+     * collapses to 0x0 and has no box to position or drag.
+     */
+    position?: FabCorner;
+    /** Let the user drag the launcher. The panel follows it. */
+    draggable?: boolean;
+    /**
+     * localStorage key for the dragged position. Omit it and nothing is
+     * persisted -- a library that writes to storage unasked collides with its
+     * host.
+     */
+    positionStorageKey?: string;
 }
 interface SponsorRelayWalletState {
     connected: boolean;
@@ -397,7 +480,7 @@ declare const STALE_INSTANCE_ALLOCATION_COOLDOWN_MS: number;
 declare const RECENT_INSTANCE_RUNTIME_GRACE_MS: number;
 declare const DEPLOYMENT_PENDING_WARNING_MS: number;
 
-declare const UI_PACKAGE_VERSION = "0.9.1";
+declare const UI_PACKAGE_VERSION = "0.9.4";
 
 interface RootfsRequiredPortForward {
     port: number;
@@ -433,6 +516,30 @@ declare function connectWallet(provider?: EthereumProviderLike | null): Promise<
 declare function personalSign(address: string, message: string, provider?: EthereumProviderLike | null): Promise<string>;
 declare function watchWallet(onChange: () => void, provider?: EthereumProviderLike | null): () => void;
 
+/**
+ * What a request was, for an error that otherwise says nothing.
+ *
+ * `fetch` rejects with a bare `TypeError: Failed to fetch` for every network
+ * failure — no URL, no method, no cause. Carried up through the deploy path
+ * that becomes "Relay Button deployment failed: Failed to fetch", which is
+ * where a run of this project ended with no way to tell which of a dozen calls
+ * had failed.
+ *
+ * Exported for its test; `init.method` is read defensively because a call site
+ * may pass none.
+ */
+declare function describeRequest(input: RequestInfo | URL, init?: RequestInit): string;
+/**
+ * The failure message, with the step it happened in.
+ *
+ * A deployment walks two dozen calls across Aleph, a CRN and a guest VM. When
+ * one of them fails with a message that names none of them — `Failed to fetch`
+ * is the standard case — the step is the only thing that narrows it down, and
+ * it is already known.
+ *
+ * Exported for its test.
+ */
+declare function deploymentFailureMessage(error: unknown, stage: string | null | undefined): string;
 /**
  * Normalise the two address documents in the fleet into one list of groups.
  *
@@ -467,6 +574,7 @@ declare class SponsorRelayController {
     private emit;
     private trace;
     private patch;
+    private lastProgressLabel;
     private emitProgress;
     private configureRelayBootstrapRegistration;
     private probeRelayReachableOverProxy;
@@ -520,4 +628,4 @@ interface DeploymentProgressEmitter {
 }
 declare function createDeploymentProgressEmitter(): DeploymentProgressEmitter;
 
-export { type CompactBootstrapRegistrationRecord, type CompactInstanceDetails, type CompactInstanceRecord, DEFAULT_INSTANCE_NAME, DEFAULT_MANIFEST_URL, DEFAULT_TIER_ID, DEFAULT_UCAN_STORE_ALLOWED_CAPABILITIES, DEFAULT_UCAN_STORE_MAX_DELEGATION_EXPIRATION_SECONDS, DEFAULT_UCAN_STORE_PWA_ORIGIN, DEFAULT_UCAN_STORE_SERVICE_DID, DEFAULT_UCAN_STORE_SERVICE_ORIGIN, DEFAULT_UCAN_STORE_USER_DELEGATION_EXPIRATION_SECONDS, DEPLOYMENT_PENDING_WARNING_MS, type DeploymentProgressEmitter, type EthereumProviderLike, IDLE_DEPLOYMENT_PROGRESS, INSTANCE_RUNTIME_PENDING_REFRESH_MS, INSTANCE_RUNTIME_READY_REFRESH_MS, INSTANCE_RUNTIME_STALE_REFRESH_MS, MANIFEST_SOURCE_REFRESH_DEBOUNCE_MS, RECENT_INSTANCE_RUNTIME_GRACE_MS, REFRESH_INTERVAL_MS, ROOTFS_MISSING_STATE, STALE_INSTANCE_ALLOCATION_COOLDOWN_MS, type SponsorRelayAddressGroup, SponsorRelayController, type SponsorRelayHealthTone, type SponsorRelayInstanceAddresses, type SponsorRelayPricingSummary, type SponsorRelayProps, type SponsorRelayRootfsHealth, type SponsorRelayState, type SponsorRelaySubscriber, type SponsorRelayUcanStoreBootstrapInput, type SponsorRelayWalletState, UI_PACKAGE_VERSION, buildSshCommand, connectWallet, createDeploymentProgressEmitter, createSponsorRelayController, formatDateTime, formatNumber, formatTierSpecLabel, getEthereumProvider, joinMappedPorts, joinRequiredPortForwards, parseInstanceAddressPayload, personalSign, resolveManifestSource, rootfsHealth, shortHash, toChecksumAddress, watchWallet };
+export { type CompactBootstrapRegistrationRecord, type CompactInstanceDetails, type CompactInstanceRecord, DEFAULT_FAB_CORNER, DEFAULT_INSTANCE_NAME, DEFAULT_MANIFEST_URL, DEFAULT_TIER_ID, DEFAULT_UCAN_STORE_ALLOWED_CAPABILITIES, DEFAULT_UCAN_STORE_MAX_DELEGATION_EXPIRATION_SECONDS, DEFAULT_UCAN_STORE_PWA_ORIGIN, DEFAULT_UCAN_STORE_SERVICE_DID, DEFAULT_UCAN_STORE_SERVICE_ORIGIN, DEFAULT_UCAN_STORE_USER_DELEGATION_EXPIRATION_SECONDS, DEPLOYMENT_PENDING_WARNING_MS, type DeploymentProgressEmitter, type EthereumProviderLike, FAB_DRAG_THRESHOLD, FAB_EDGE_MARGIN, type FabCorner, type FabPanelPlacement, type FabPanelSide, type FabPlacement, type FabPoint, type FabSize, type FabViewport, IDLE_DEPLOYMENT_PROGRESS, INSTANCE_RUNTIME_PENDING_REFRESH_MS, INSTANCE_RUNTIME_READY_REFRESH_MS, INSTANCE_RUNTIME_STALE_REFRESH_MS, MANIFEST_SOURCE_REFRESH_DEBOUNCE_MS, RECENT_INSTANCE_RUNTIME_GRACE_MS, REFRESH_INTERVAL_MS, ROOTFS_MISSING_STATE, STALE_INSTANCE_ALLOCATION_COOLDOWN_MS, type SponsorRelayAddressGroup, SponsorRelayController, type SponsorRelayHealthTone, type SponsorRelayInstanceAddresses, type SponsorRelayPricingSummary, type SponsorRelayProps, type SponsorRelayRootfsHealth, type SponsorRelayState, type SponsorRelaySubscriber, type SponsorRelayUcanStoreBootstrapInput, type SponsorRelayWalletState, UI_PACKAGE_VERSION, anchorPanelToLauncher, buildSshCommand, clampToViewport, connectWallet, createDeploymentProgressEmitter, createSponsorRelayController, deploymentFailureMessage, describeRequest, dragExceedsThreshold, formatDateTime, formatNumber, formatTierSpecLabel, getEthereumProvider, joinMappedPorts, joinRequiredPortForwards, parseInstanceAddressPayload, personalSign, readStoredPosition, resolveCornerPlacement, resolveManifestSource, rootfsHealth, shortHash, toChecksumAddress, watchWallet, writeStoredPosition };

package/shared/index.js

@@ -1,3 +1,57 @@
+// src/shared/fab-position.ts
+var DEFAULT_FAB_CORNER = "bottom-right";
+var FAB_EDGE_MARGIN = 22;
+var FAB_DRAG_THRESHOLD = 6;
+function dragExceedsThreshold(start, current, threshold = FAB_DRAG_THRESHOLD) {
+  const dx = current.x - start.x;
+  const dy = current.y - start.y;
+  return Math.hypot(dx, dy) >= threshold;
+}
+function resolveCornerPlacement(corner, size, viewport, margin = FAB_EDGE_MARGIN) {
+  const left = corner.endsWith("left") ? margin : viewport.width - size.width - margin;
+  const top = corner.startsWith("top") ? margin : viewport.height - size.height - margin;
+  return clampToViewport({ left, top }, size, viewport, margin);
+}
+function clampToViewport(placement, size, viewport, margin = FAB_EDGE_MARGIN) {
+  const maxLeft = Math.max(margin, viewport.width - size.width - margin);
+  const maxTop = Math.max(margin, viewport.height - size.height - margin);
+  return {
+    left: Math.min(Math.max(placement.left, margin), maxLeft),
+    top: Math.min(Math.max(placement.top, margin), maxTop)
+  };
+}
+function anchorPanelToLauncher(launcher, panel, viewport, gap = 12, margin = FAB_EDGE_MARGIN) {
+  const launcherCentre = launcher.top + launcher.height / 2;
+  const side = launcherCentre < viewport.height / 2 ? "below" : "above";
+  const top = side === "below" ? launcher.top + launcher.height + gap : launcher.top - gap - panel.height;
+  const preferredLeft = launcher.left + launcher.width / 2 < viewport.width / 2 ? launcher.left : launcher.left + launcher.width - panel.width;
+  const clamped = clampToViewport({ left: preferredLeft, top }, panel, viewport, margin);
+  const available = side === "below" ? viewport.height - clamped.top - margin : launcher.top - gap - margin;
+  return {
+    ...clamped,
+    side,
+    maxHeight: Math.max(0, available)
+  };
+}
+function readStoredPosition(key) {
+  if (!key) return null;
+  try {
+    const raw = globalThis.localStorage?.getItem(key);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    return Number.isFinite(parsed?.left) && Number.isFinite(parsed?.top) ? parsed : null;
+  } catch {
+    return null;
+  }
+}
+function writeStoredPosition(key, placement, viewport) {
+  if (!key) return;
+  try {
+    globalThis.localStorage?.setItem(key, JSON.stringify({ ...placement, viewport }));
+  } catch {
+  }
+}
+
 // src/shared/constants.ts
 var DEFAULT_INSTANCE_NAME = "sponsor-relay";
 var DEFAULT_MANIFEST_URL = "./rootfs-manifest.json";
@@ -42,7 +96,7 @@ var RECENT_INSTANCE_RUNTIME_GRACE_MS = 10 * 60 * 1e3;
 var DEPLOYMENT_PENDING_WARNING_MS = 3 * 60 * 1e3;
 
 // src/shared/package-version.ts
-var UI_PACKAGE_VERSION = "0.9.1";
+var UI_PACKAGE_VERSION = "0.9.4";
 
 // src/shared/format.ts
 function shortHash(value, head = 8, tail = 6) {
@@ -2776,7 +2830,8 @@ function browserMultiaddrTransport(addr) {
 }
 function selectCompactRelayBootstrapMultiaddrs(addrs, limit = DEFAULT_BOOTSTRAP_COMPACT_MULTIADDR_LIMIT) {
   const entries = filterPublicMultiaddrs(addrs, {
-    browserDialableOnly: true
+    browserDialableOnly: true,
+    allowInsecureWebSockets: true
   }).map((addr, index) => ({
     addr,
     index,
@@ -2846,12 +2901,23 @@ function isLocalHostname(host) {
 function hasPeerId(addr) {
   return splitMultiaddr(addr).includes("p2p");
 }
-function isBrowserDialableMultiaddr(addr) {
+function isSecureWebSocketMultiaddr(addr) {
+  const parts = splitMultiaddr(addr.toLowerCase());
+  if (parts.includes("wss")) return true;
+  const wsIndex = parts.indexOf("ws");
+  return wsIndex > 0 && parts.lastIndexOf("tls", wsIndex) >= 0;
+}
+function isWebSocketMultiaddr(addr) {
+  const parts = splitMultiaddr(addr.toLowerCase());
+  return parts.includes("ws") || parts.includes("wss");
+}
+function isBrowserDialableMultiaddr(addr, options = {}) {
   const normalized = addr.toLowerCase();
   if (normalized.includes("/webtransport") || normalized.includes("/webrtc-direct")) {
     return normalized.includes("/certhash/");
   }
-  return normalized.includes("/ws") || normalized.includes("/wss");
+  if (!isWebSocketMultiaddr(addr)) return false;
+  return (options.allowInsecureWebSockets ?? false) || isSecureWebSocketMultiaddr(addr);
 }
 function dedupeMultiaddrs(addrs) {
   const seen = /* @__PURE__ */ new Set();
@@ -2885,7 +2951,9 @@ function filterPublicMultiaddrs(addrs, options = {}) {
   return dedupeMultiaddrs(addrs).filter((addr) => {
     if (!isPublicMultiaddr(addr)) return false;
     if (options.requirePeerId !== false && !hasPeerId(addr)) return false;
-    if (options.browserDialableOnly && !isBrowserDialableMultiaddr(addr)) {
+    if (options.browserDialableOnly && !isBrowserDialableMultiaddr(addr, {
+      allowInsecureWebSockets: options.allowInsecureWebSockets
+    })) {
       return false;
     }
     return true;
@@ -3000,7 +3068,8 @@ function buildRelayBootstrapPostContent(args) {
   const updatedAt = args.now ?? Date.now();
   const fullMultiaddrs = filterPublicMultiaddrs(args.multiaddrs);
   const fullBrowserMultiaddrs = args.browserMultiaddrs ? filterPublicMultiaddrs(args.browserMultiaddrs, {
-    browserDialableOnly: true
+    browserDialableOnly: true,
+    allowInsecureWebSockets: true
   }) : void 0;
   const compactMultiaddrs = selectCompactRelayBootstrapMultiaddrs(
     fullBrowserMultiaddrs && fullBrowserMultiaddrs.length > 0 ? fullBrowserMultiaddrs : fullMultiaddrs,
@@ -3082,7 +3151,8 @@ async function signRelayBootstrapAuthorization(args) {
 async function signRelayBootstrapProof(args) {
   const fullMultiaddrs = filterPublicMultiaddrs(args.multiaddrs);
   const fullBrowserMultiaddrs = args.browserMultiaddrs ? filterPublicMultiaddrs(args.browserMultiaddrs, {
-    browserDialableOnly: true
+    browserDialableOnly: true,
+    allowInsecureWebSockets: true
   }) : void 0;
   const compactMultiaddrs = selectCompactRelayBootstrapMultiaddrs(
     fullBrowserMultiaddrs && fullBrowserMultiaddrs.length > 0 ? fullBrowserMultiaddrs : fullMultiaddrs,
@@ -3884,12 +3954,30 @@ function validateUcanStoreBootstrapPackage(value) {
 function deploymentNoun(profile) {
   return profile === "ucan-store" ? "service" : "relay";
 }
+function describeRequest(input, init) {
+  const method = String(init?.method ?? "GET").toUpperCase();
+  const url = typeof input === "string" ? input : input instanceof URL ? input.toString() : typeof input?.url === "string" ? input.url : "<unknown url>";
+  return `${method} ${url}`;
+}
+function deploymentFailureMessage(error, stage) {
+  const message = error instanceof Error ? error.message : String(error);
+  const step = String(stage ?? "").trim();
+  return step ? `${message} (while: ${step})` : message;
+}
 function asJsonFetch(input, init) {
-  return fetch(input, init).then(async (response) => ({
-    ok: response.ok,
-    status: response.status,
-    json: async () => await response.json()
-  }));
+  return fetch(input, init).then(
+    async (response) => ({
+      ok: response.ok,
+      status: response.status,
+      json: async () => await response.json()
+    }),
+    (error) => {
+      const reason = error instanceof Error ? error.message : String(error);
+      throw new Error(`${reason} (${describeRequest(input, init)})`, {
+        cause: error
+      });
+    }
+  );
 }
 function isConfirmedGuestSetupResult(value) {
   return Boolean(
@@ -4532,11 +4620,15 @@ var SponsorRelayController = class {
     };
     this.emit();
   }
+  lastProgressLabel = null;
   emitProgress(event) {
     const nextEvent = {
       ...event,
       timestamp: Date.now()
     };
+    if (nextEvent.stage !== "error") {
+      this.lastProgressLabel = nextEvent.label;
+    }
     this.trace(`progress:${nextEvent.stage}`, {
       label: nextEvent.label,
       progress: nextEvent.progress,
@@ -6453,10 +6545,15 @@ var SponsorRelayController = class {
         attemptErrors.length > 0 ? `All compatible CRNs failed. ${attemptErrors.join(" | ")}` : lastError?.message ?? "All compatible CRNs failed."
       );
     } catch (error) {
-      this.trace("deploy:error", error);
+      const message = deploymentFailureMessage(error, this.lastProgressLabel);
+      this.trace("deploy:error", {
+        message,
+        stage: this.lastProgressLabel,
+        error
+      });
       this.patch({
         busy: { deploying: false },
-        errorText: error instanceof Error ? error.message : String(error),
+        errorText: message,
         statusText: "Deployment failed"
       });
       this.emitProgress({
@@ -6464,7 +6561,7 @@ var SponsorRelayController = class {
         label: "Deployment failed",
         progress: 100,
         status: "error",
-        error: error instanceof Error ? error.message : String(error)
+        error: message
       });
     }
   }
@@ -6724,6 +6821,7 @@ function createSponsorRelayController(props = {}) {
   return new SponsorRelayController(props);
 }
 export {
+  DEFAULT_FAB_CORNER,
   DEFAULT_INSTANCE_NAME,
   DEFAULT_MANIFEST_URL,
   DEFAULT_TIER_ID,
@@ -6734,6 +6832,8 @@ export {
   DEFAULT_UCAN_STORE_SERVICE_ORIGIN,
   DEFAULT_UCAN_STORE_USER_DELEGATION_EXPIRATION_SECONDS,
   DEPLOYMENT_PENDING_WARNING_MS,
+  FAB_DRAG_THRESHOLD,
+  FAB_EDGE_MARGIN,
   IDLE_DEPLOYMENT_PROGRESS,
   INSTANCE_RUNTIME_PENDING_REFRESH_MS,
   INSTANCE_RUNTIME_READY_REFRESH_MS,
@@ -6745,10 +6845,15 @@ export {
   STALE_INSTANCE_ALLOCATION_COOLDOWN_MS,
   SponsorRelayController,
   UI_PACKAGE_VERSION,
+  anchorPanelToLauncher,
   buildSshCommand,
+  clampToViewport,
   connectWallet,
   createDeploymentProgressEmitter,
   createSponsorRelayController,
+  deploymentFailureMessage,
+  describeRequest,
+  dragExceedsThreshold,
   formatDateTime,
   formatNumber,
   formatTierSpecLabel,
@@ -6757,9 +6862,12 @@ export {
   joinRequiredPortForwards,
   parseInstanceAddressPayload,
   personalSign,
+  readStoredPosition,
+  resolveCornerPlacement,
   resolveManifestSource,
   rootfsHealth,
   shortHash,
   toChecksumAddress,
-  watchWallet
+  watchWallet,
+  writeStoredPosition
 };

package/svelte/SponsorRelayFab.svelte

@@ -1,7 +1,7 @@
 <script>
   import { onDestroy, onMount } from 'svelte'
 
-  import { UI_PACKAGE_VERSION, createSponsorRelayController, formatDateTime, formatNumber, formatTierSpecLabel, joinMappedPorts, joinRequiredPortForwards, shortHash } from '../shared/index'
+  import { UI_PACKAGE_VERSION, anchorPanelToLauncher, clampToViewport, createSponsorRelayController, readStoredPosition, resolveCornerPlacement, writeStoredPosition, formatDateTime, formatNumber, formatTierSpecLabel, joinMappedPorts, joinRequiredPortForwards, shortHash } from '../shared/index'
   import AccordionSection from './components/AccordionSection.svelte'
   import CopyButton from './components/CopyButton.svelte'
   import LauncherButton from './components/LauncherButton.svelte'
@@ -23,6 +23,9 @@ export let apiHosts = undefined
   export let crnSource = undefined
   export let schedulerApiHost = undefined
   export let twoN6ApiHost = undefined
+  export let position = 'bottom-right'
+  export let draggable = false
+  export let positionStorageKey = undefined
 
   const controller = createSponsorRelayController({
     manifestUrl,
@@ -131,13 +134,104 @@ export let apiHosts = undefined
       .join('\n')
   }
 
+  // Placement lives here rather than in the launcher because the panel has to
+  // be anchored to it, and only this component renders both.
+  let launcherEl = null
+  let panelEl = null
+  let placement = null
+  let panelPlacement = null
+  let dragOffset = null
+
+  function viewport() {
+    return { width: window.innerWidth, height: window.innerHeight }
+  }
+
+  function launcherSize() {
+    const rect = launcherEl?.getBoundingClientRect()
+    return { width: rect?.width ?? 180, height: rect?.height ?? 44 }
+  }
+
+  function initPlacement() {
+    if (launcherMode !== 'floating' || typeof window === 'undefined') return
+    const stored = readStoredPosition(positionStorageKey)
+    placement = stored
+      ? clampToViewport(stored, launcherSize(), viewport())
+      : resolveCornerPlacement(position, launcherSize(), viewport())
+    updatePanelPlacement()
+  }
+
+  function updatePanelPlacement() {
+    if (!state.open || !placement || launcherMode !== 'floating') {
+      panelPlacement = null
+      return
+    }
+    const panelRect = panelEl?.getBoundingClientRect()
+    panelPlacement = anchorPanelToLauncher(
+      { ...placement, ...launcherSize() },
+      { width: panelRect?.width ?? 448, height: panelRect?.height ?? 520 },
+      viewport(),
+    )
+  }
+
+  function handleDragStart(point) {
+    if (!placement) return
+    // Remember where inside the button the finger landed, so it does not jump
+    // to the pointer on the first move.
+    dragOffset = { x: point.x - placement.left, y: point.y - placement.top }
+  }
+
+  function handleDragMove(point) {
+    if (!dragOffset) return
+    placement = clampToViewport(
+      { left: point.x - dragOffset.x, top: point.y - dragOffset.y },
+      launcherSize(),
+      viewport(),
+    )
+    updatePanelPlacement()
+  }
+
+  function handleDragEnd(wasDragging) {
+    dragOffset = null
+    if (wasDragging && placement) writeStoredPosition(positionStorageKey, placement, viewport())
+  }
+
+  function handleViewportChange() {
+    if (!placement) return
+    placement = clampToViewport(placement, launcherSize(), viewport())
+    updatePanelPlacement()
+  }
+
+  $: if (state.open !== undefined) updatePanelPlacement()
+
+  $: panelStyle = panelPlacement
+    ? `left:${panelPlacement.left}px;top:${panelPlacement.top}px;right:auto;bottom:auto;max-height:${panelPlacement.maxHeight}px;`
+    : ''
+
   onMount(async () => {
     const unsubscribe = controller.subscribe((next) => {
       state = next
     })
 
+    // Before `controller.init()`, not after it, and the order is the whole
+    // feature. Placement reads storage and the viewport — no network — while
+    // `init()` fetches the manifest and the account's instances. Behind that
+    // await, `placement` stays null for as long as Aleph takes to answer, and
+    // `handleDragStart` returns early on a null placement: the launcher simply
+    // cannot be dragged. Measured in simple-todo: still immovable 20 seconds
+    // after the app was ready, with pointerdown, eight pointermoves and
+    // pointerup all arriving at the button.
+    //
+    // The React build never had this — it resolves placement in its own effect.
+    initPlacement()
+
     await controller.init()
-    return unsubscribe
+    window.addEventListener('resize', handleViewportChange)
+    window.addEventListener('orientationchange', handleViewportChange)
+    return () => {
+      window.removeEventListener('resize', handleViewportChange)
+      window.removeEventListener('orientationchange', handleViewportChange)
+      unsubscribe()
+    }
   })
 
   onDestroy(() => {
@@ -145,14 +239,24 @@ export let apiHosts = undefined
   })
 </script>
 
-<LauncherButton open={state.open} onToggle={() => controller.toggleOpen()} mode={launcherMode} />
+<LauncherButton
+  bind:element={launcherEl}
+  open={state.open}
+  onToggle={() => controller.toggleOpen()}
+  mode={launcherMode}
+  {placement}
+  {draggable}
+  onDragStart={handleDragStart}
+  onDragMove={handleDragMove}
+  onDragEnd={handleDragEnd}
+/>
 
 {#if state.open}
   <div class="backdrop" on:click={() => controller.setOpen(false)}></div>
 {/if}
 
 {#if state.open}
-  <aside class="panel">
+  <aside class="panel" bind:this={panelEl} style={panelStyle}>
     <div class="panel-head">
       <div>
         <p class="eyebrow">

package/svelte/components/LauncherButton.svelte

@@ -1,10 +1,68 @@
 <script>
+  import { dragExceedsThreshold } from '../../shared/index'
+
   export let open = false
   export let onToggle = () => {}
   export let mode = 'floating'
+  /** Absolute placement from the parent, or null to use the CSS corner default. */
+  export let placement = null
+  export let draggable = false
+  /** Called with the pointer position while dragging; the parent owns the maths. */
+  export let onDragStart = () => {}
+  export let onDragMove = () => {}
+  export let onDragEnd = () => {}
+  /** Bound by the parent so it can measure the launcher to anchor the panel. */
+  export let element = null
+
+  let dragging = false
+  let pressOrigin = null
+
+  function handlePointerDown(event) {
+    if (!draggable || mode !== 'floating' || event.button > 0) return
+    pressOrigin = { x: event.clientX, y: event.clientY }
+    dragging = false
+    event.currentTarget.setPointerCapture?.(event.pointerId)
+    onDragStart(pressOrigin)
+  }
+
+  function handlePointerMove(event) {
+    if (!pressOrigin) return
+    const point = { x: event.clientX, y: event.clientY }
+    // Only become a drag once the pointer has travelled far enough; below the
+    // threshold this is still a press that should open the panel.
+    if (!dragging && !dragExceedsThreshold(pressOrigin, point)) return
+    dragging = true
+    onDragMove(point)
+  }
+
+  function handlePointerUp(event) {
+    if (!pressOrigin) return
+    event.currentTarget.releasePointerCapture?.(event.pointerId)
+    const wasDragging = dragging
+    pressOrigin = null
+    dragging = false
+    onDragEnd(wasDragging)
+    // A drag must not also toggle the panel; a tap must.
+    if (!wasDragging) onToggle()
+  }
+
+  $: placementStyle =
+    placement && mode === 'floating'
+      ? `left:${placement.left}px;top:${placement.top}px;right:auto;bottom:auto;`
+      : ''
 </script>
 
-<button class={`launcher ${mode} ${open ? 'open' : ''}`} type="button" on:click={onToggle}>
+<button
+  bind:this={element}
+  class={`launcher ${mode} ${open ? 'open' : ''} ${draggable ? 'draggable' : ''}`}
+  style={placementStyle}
+  type="button"
+  on:pointerdown={handlePointerDown}
+  on:pointermove={handlePointerMove}
+  on:pointerup={handlePointerUp}
+  on:pointercancel={handlePointerUp}
+  on:click={draggable ? undefined : onToggle}
+>
   <svg class="mark" viewBox="0 0 32 32" aria-hidden="true" focusable="false">
     <line x1="17" y1="15.4" x2="19.6" y2="13" class="mark-link" stroke-width="2.4" stroke-linecap="round" />
     <circle cx="11.5" cy="20.5" r="7" class="mark-node" />
@@ -53,6 +111,12 @@
     z-index: 10000;
   }
 
+  .launcher.draggable {
+    /* Without this the browser scrolls the page instead of moving the button. */
+    touch-action: none;
+    user-select: none;
+  }
+
   .launcher.inline {
     position: relative;
     z-index: auto;