@xenide-io/the-old-ui-theme 0.4.6 → 0.4.8

package/dist/suite.js

@@ -2318,6 +2318,22 @@ function openSuiteAskAi(detail) {
     })
   );
 }
+var LAUNCHER_EDGE_GAP = 12;
+var LAUNCHER_STORAGE_KEY = "suite-ask-ai-launcher-position";
+function resolveSuiteAiLauncherPosition(side, desiredY, viewportWidth, viewportHeight, launcherWidth, launcherHeight) {
+  const maxX = Math.max(
+    LAUNCHER_EDGE_GAP,
+    viewportWidth - launcherWidth - LAUNCHER_EDGE_GAP
+  );
+  const maxY = Math.max(
+    LAUNCHER_EDGE_GAP,
+    viewportHeight - launcherHeight - LAUNCHER_EDGE_GAP
+  );
+  return {
+    x: side === "left" ? LAUNCHER_EDGE_GAP : maxX,
+    y: Math.min(Math.max(desiredY, LAUNCHER_EDGE_GAP), maxY)
+  };
+}
 function SuiteAiPanel({
   presets = [],
   emptyState = "Ask anything about your workspace, or look something up online.",
@@ -2336,8 +2352,51 @@ function SuiteAiPanel({
   const [hydrating, setHydrating] = (0, import_react8.useState)(false);
   const [error, setError] = (0, import_react8.useState)("");
   const [copiedId, setCopiedId] = (0, import_react8.useState)(null);
+  const [launcherSide, setLauncherSide] = (0, import_react8.useState)("right");
+  const [launcherPosition, setLauncherPosition] = (0, import_react8.useState)(null);
+  const [draggingLauncher, setDraggingLauncher] = (0, import_react8.useState)(false);
   const scrollerRef = (0, import_react8.useRef)(null);
+  const launcherRef = (0, import_react8.useRef)(null);
+  const launcherSideRef = (0, import_react8.useRef)("right");
+  const launcherPositionRef = (0, import_react8.useRef)(null);
+  const launcherDragRef = (0, import_react8.useRef)(null);
+  const suppressLauncherClickRef = (0, import_react8.useRef)(false);
   const pendingPromptRef = (0, import_react8.useRef)(null);
+  (0, import_react8.useEffect)(() => {
+    const launcher = launcherRef.current;
+    if (!launcher) return;
+    let side = "right";
+    let desiredY = window.innerHeight - launcher.offsetHeight - 20;
+    try {
+      const stored = JSON.parse(
+        localStorage.getItem(LAUNCHER_STORAGE_KEY) || "null"
+      );
+      if ((stored == null ? void 0 : stored.side) === "left" || (stored == null ? void 0 : stored.side) === "right")
+        side = stored.side;
+      if (typeof (stored == null ? void 0 : stored.y) === "number") desiredY = stored.y;
+    } catch (e) {
+    }
+    launcherSideRef.current = side;
+    setLauncherSide(side);
+    const placeLauncher = () => {
+      var _a, _b;
+      const element = launcherRef.current;
+      if (!element) return;
+      const next = resolveSuiteAiLauncherPosition(
+        launcherSideRef.current,
+        (_b = (_a = launcherPositionRef.current) == null ? void 0 : _a.y) != null ? _b : desiredY,
+        window.innerWidth,
+        window.innerHeight,
+        element.offsetWidth,
+        element.offsetHeight
+      );
+      launcherPositionRef.current = next;
+      setLauncherPosition(next);
+    };
+    placeLauncher();
+    window.addEventListener("resize", placeLauncher);
+    return () => window.removeEventListener("resize", placeLauncher);
+  }, []);
   const scrollToBottom = (0, import_react8.useCallback)(() => {
     const el = scrollerRef.current;
     if (!el) return;
@@ -2433,22 +2492,135 @@ function SuiteAiPanel({
     } catch (e) {
     }
   }
+  function saveLauncherPosition(side, position) {
+    try {
+      localStorage.setItem(
+        LAUNCHER_STORAGE_KEY,
+        JSON.stringify({ side, y: position.y })
+      );
+    } catch (e) {
+    }
+  }
+  function dockLauncher(side, desiredY) {
+    const launcher = launcherRef.current;
+    if (!launcher) return;
+    const next = resolveSuiteAiLauncherPosition(
+      side,
+      desiredY,
+      window.innerWidth,
+      window.innerHeight,
+      launcher.offsetWidth,
+      launcher.offsetHeight
+    );
+    launcherSideRef.current = side;
+    launcherPositionRef.current = next;
+    setLauncherSide(side);
+    setLauncherPosition(next);
+    saveLauncherPosition(side, next);
+  }
+  function startLauncherDrag(event) {
+    if (event.pointerType === "mouse" && event.button !== 0) return;
+    const rect = event.currentTarget.getBoundingClientRect();
+    launcherDragRef.current = {
+      pointerId: event.pointerId,
+      offsetX: event.clientX - rect.left,
+      offsetY: event.clientY - rect.top,
+      startX: event.clientX,
+      startY: event.clientY
+    };
+    suppressLauncherClickRef.current = false;
+    event.currentTarget.setPointerCapture(event.pointerId);
+    setDraggingLauncher(true);
+  }
+  function moveLauncher(event) {
+    const drag = launcherDragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    const launcher = event.currentTarget;
+    const maxX = Math.max(
+      LAUNCHER_EDGE_GAP,
+      window.innerWidth - launcher.offsetWidth - LAUNCHER_EDGE_GAP
+    );
+    const maxY = Math.max(
+      LAUNCHER_EDGE_GAP,
+      window.innerHeight - launcher.offsetHeight - LAUNCHER_EDGE_GAP
+    );
+    const next = {
+      x: Math.min(
+        Math.max(event.clientX - drag.offsetX, LAUNCHER_EDGE_GAP),
+        maxX
+      ),
+      y: Math.min(
+        Math.max(event.clientY - drag.offsetY, LAUNCHER_EDGE_GAP),
+        maxY
+      )
+    };
+    if (Math.hypot(event.clientX - drag.startX, event.clientY - drag.startY) > 4) {
+      suppressLauncherClickRef.current = true;
+    }
+    launcherPositionRef.current = next;
+    setLauncherPosition(next);
+  }
+  function finishLauncherDrag(event) {
+    var _a, _b, _c, _d;
+    const drag = launcherDragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+    launcherDragRef.current = null;
+    setDraggingLauncher(false);
+    const rect = event.currentTarget.getBoundingClientRect();
+    const currentX = (_b = (_a = launcherPositionRef.current) == null ? void 0 : _a.x) != null ? _b : rect.left;
+    const side = currentX + rect.width / 2 < window.innerWidth / 2 ? "left" : "right";
+    dockLauncher(side, (_d = (_c = launcherPositionRef.current) == null ? void 0 : _c.y) != null ? _d : rect.top);
+  }
+  function moveLauncherWithKeyboard(event) {
+    var _a, _b;
+    if (!["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(event.key))
+      return;
+    event.preventDefault();
+    const currentY = (_b = (_a = launcherPositionRef.current) == null ? void 0 : _a.y) != null ? _b : event.currentTarget.getBoundingClientRect().top;
+    if (event.key === "ArrowLeft") dockLauncher("left", currentY);
+    else if (event.key === "ArrowRight") dockLauncher("right", currentY);
+    else
+      dockLauncher(
+        launcherSideRef.current,
+        currentY + (event.key === "ArrowUp" ? -24 : 24)
+      );
+  }
   const Icon = BrandIcon != null ? BrandIcon : import_iconoir_react8.Sparks;
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
-    !hideLauncher ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
-      "button",
-      {
-        type: "button",
-        "data-test": "ai-panel-launcher",
-        onClick: () => setOpen(true),
-        className: "fixed bottom-5 right-5 z-30 flex items-center gap-2 rounded-full border border-ph-border bg-ph-surface px-4 py-2.5 text-sm font-medium text-ph-ink shadow-ph hover:bg-ph-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand",
-        "aria-label": "Open Ask AI",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { className: "h-4 w-4 text-ph-brand" }),
-          "Ask AI"
-        ]
-      }
-    ) : null,
+    !hideLauncher ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+        "button",
+        {
+          ref: launcherRef,
+          type: "button",
+          "data-test": "ai-panel-launcher",
+          onClick: () => {
+            if (suppressLauncherClickRef.current) {
+              suppressLauncherClickRef.current = false;
+              return;
+            }
+            setOpen(true);
+          },
+          onPointerDown: startLauncherDrag,
+          onPointerMove: moveLauncher,
+          onPointerUp: finishLauncherDrag,
+          onPointerCancel: finishLauncherDrag,
+          onKeyDown: moveLauncherWithKeyboard,
+          className: `fixed z-30 flex touch-none select-none items-center gap-2 rounded-full border border-ph-border bg-ph-surface px-4 py-2.5 text-sm font-medium text-ph-ink shadow-ph hover:bg-ph-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand ${draggingLauncher ? "cursor-grabbing" : "cursor-grab"}`,
+          style: launcherPosition ? { left: launcherPosition.x, top: launcherPosition.y } : { bottom: 20, right: 20 },
+          "aria-label": "Open Ask AI",
+          "aria-describedby": "suite-ask-ai-launcher-help",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { className: "h-4 w-4 text-ph-brand" }),
+            "Ask AI"
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { id: "suite-ask-ai-launcher-help", className: "sr-only", children: "Drag to reposition, or use arrow keys. The launcher docks to the nearest screen edge." })
+    ] }) : null,
     open ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "fixed inset-0 z-40", role: "dialog", "aria-modal": "true", children: [
       /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         "button",
@@ -2462,7 +2634,7 @@ function SuiteAiPanel({
       /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
         "aside",
         {
-          className: "absolute inset-y-0 right-0 flex w-full max-w-md flex-col border-l border-ph-border bg-ph-surface shadow-2xl",
+          className: `absolute inset-y-0 flex w-full max-w-md flex-col bg-ph-surface shadow-2xl ${launcherSide === "left" ? "left-0 border-r border-ph-border" : "right-0 border-l border-ph-border"}`,
           "data-test": "suite-ask-ai-panel",
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center justify-between border-b border-ph-border px-4 py-3", children: [

package/dist/suite.mjs

@@ -2092,6 +2092,22 @@ function openSuiteAskAi(detail) {
     })
   );
 }
+var LAUNCHER_EDGE_GAP = 12;
+var LAUNCHER_STORAGE_KEY = "suite-ask-ai-launcher-position";
+function resolveSuiteAiLauncherPosition(side, desiredY, viewportWidth, viewportHeight, launcherWidth, launcherHeight) {
+  const maxX = Math.max(
+    LAUNCHER_EDGE_GAP,
+    viewportWidth - launcherWidth - LAUNCHER_EDGE_GAP
+  );
+  const maxY = Math.max(
+    LAUNCHER_EDGE_GAP,
+    viewportHeight - launcherHeight - LAUNCHER_EDGE_GAP
+  );
+  return {
+    x: side === "left" ? LAUNCHER_EDGE_GAP : maxX,
+    y: Math.min(Math.max(desiredY, LAUNCHER_EDGE_GAP), maxY)
+  };
+}
 function SuiteAiPanel({
   presets = [],
   emptyState = "Ask anything about your workspace, or look something up online.",
@@ -2110,8 +2126,51 @@ function SuiteAiPanel({
   const [hydrating, setHydrating] = useState8(false);
   const [error, setError] = useState8("");
   const [copiedId, setCopiedId] = useState8(null);
+  const [launcherSide, setLauncherSide] = useState8("right");
+  const [launcherPosition, setLauncherPosition] = useState8(null);
+  const [draggingLauncher, setDraggingLauncher] = useState8(false);
   const scrollerRef = useRef3(null);
+  const launcherRef = useRef3(null);
+  const launcherSideRef = useRef3("right");
+  const launcherPositionRef = useRef3(null);
+  const launcherDragRef = useRef3(null);
+  const suppressLauncherClickRef = useRef3(false);
   const pendingPromptRef = useRef3(null);
+  useEffect7(() => {
+    const launcher = launcherRef.current;
+    if (!launcher) return;
+    let side = "right";
+    let desiredY = window.innerHeight - launcher.offsetHeight - 20;
+    try {
+      const stored = JSON.parse(
+        localStorage.getItem(LAUNCHER_STORAGE_KEY) || "null"
+      );
+      if ((stored == null ? void 0 : stored.side) === "left" || (stored == null ? void 0 : stored.side) === "right")
+        side = stored.side;
+      if (typeof (stored == null ? void 0 : stored.y) === "number") desiredY = stored.y;
+    } catch (e) {
+    }
+    launcherSideRef.current = side;
+    setLauncherSide(side);
+    const placeLauncher = () => {
+      var _a, _b;
+      const element = launcherRef.current;
+      if (!element) return;
+      const next = resolveSuiteAiLauncherPosition(
+        launcherSideRef.current,
+        (_b = (_a = launcherPositionRef.current) == null ? void 0 : _a.y) != null ? _b : desiredY,
+        window.innerWidth,
+        window.innerHeight,
+        element.offsetWidth,
+        element.offsetHeight
+      );
+      launcherPositionRef.current = next;
+      setLauncherPosition(next);
+    };
+    placeLauncher();
+    window.addEventListener("resize", placeLauncher);
+    return () => window.removeEventListener("resize", placeLauncher);
+  }, []);
   const scrollToBottom = useCallback3(() => {
     const el = scrollerRef.current;
     if (!el) return;
@@ -2207,22 +2266,135 @@ function SuiteAiPanel({
     } catch (e) {
     }
   }
+  function saveLauncherPosition(side, position) {
+    try {
+      localStorage.setItem(
+        LAUNCHER_STORAGE_KEY,
+        JSON.stringify({ side, y: position.y })
+      );
+    } catch (e) {
+    }
+  }
+  function dockLauncher(side, desiredY) {
+    const launcher = launcherRef.current;
+    if (!launcher) return;
+    const next = resolveSuiteAiLauncherPosition(
+      side,
+      desiredY,
+      window.innerWidth,
+      window.innerHeight,
+      launcher.offsetWidth,
+      launcher.offsetHeight
+    );
+    launcherSideRef.current = side;
+    launcherPositionRef.current = next;
+    setLauncherSide(side);
+    setLauncherPosition(next);
+    saveLauncherPosition(side, next);
+  }
+  function startLauncherDrag(event) {
+    if (event.pointerType === "mouse" && event.button !== 0) return;
+    const rect = event.currentTarget.getBoundingClientRect();
+    launcherDragRef.current = {
+      pointerId: event.pointerId,
+      offsetX: event.clientX - rect.left,
+      offsetY: event.clientY - rect.top,
+      startX: event.clientX,
+      startY: event.clientY
+    };
+    suppressLauncherClickRef.current = false;
+    event.currentTarget.setPointerCapture(event.pointerId);
+    setDraggingLauncher(true);
+  }
+  function moveLauncher(event) {
+    const drag = launcherDragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    const launcher = event.currentTarget;
+    const maxX = Math.max(
+      LAUNCHER_EDGE_GAP,
+      window.innerWidth - launcher.offsetWidth - LAUNCHER_EDGE_GAP
+    );
+    const maxY = Math.max(
+      LAUNCHER_EDGE_GAP,
+      window.innerHeight - launcher.offsetHeight - LAUNCHER_EDGE_GAP
+    );
+    const next = {
+      x: Math.min(
+        Math.max(event.clientX - drag.offsetX, LAUNCHER_EDGE_GAP),
+        maxX
+      ),
+      y: Math.min(
+        Math.max(event.clientY - drag.offsetY, LAUNCHER_EDGE_GAP),
+        maxY
+      )
+    };
+    if (Math.hypot(event.clientX - drag.startX, event.clientY - drag.startY) > 4) {
+      suppressLauncherClickRef.current = true;
+    }
+    launcherPositionRef.current = next;
+    setLauncherPosition(next);
+  }
+  function finishLauncherDrag(event) {
+    var _a, _b, _c, _d;
+    const drag = launcherDragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+    launcherDragRef.current = null;
+    setDraggingLauncher(false);
+    const rect = event.currentTarget.getBoundingClientRect();
+    const currentX = (_b = (_a = launcherPositionRef.current) == null ? void 0 : _a.x) != null ? _b : rect.left;
+    const side = currentX + rect.width / 2 < window.innerWidth / 2 ? "left" : "right";
+    dockLauncher(side, (_d = (_c = launcherPositionRef.current) == null ? void 0 : _c.y) != null ? _d : rect.top);
+  }
+  function moveLauncherWithKeyboard(event) {
+    var _a, _b;
+    if (!["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(event.key))
+      return;
+    event.preventDefault();
+    const currentY = (_b = (_a = launcherPositionRef.current) == null ? void 0 : _a.y) != null ? _b : event.currentTarget.getBoundingClientRect().top;
+    if (event.key === "ArrowLeft") dockLauncher("left", currentY);
+    else if (event.key === "ArrowRight") dockLauncher("right", currentY);
+    else
+      dockLauncher(
+        launcherSideRef.current,
+        currentY + (event.key === "ArrowUp" ? -24 : 24)
+      );
+  }
   const Icon = BrandIcon != null ? BrandIcon : Sparks;
   return /* @__PURE__ */ jsxs15(Fragment5, { children: [
-    !hideLauncher ? /* @__PURE__ */ jsxs15(
-      "button",
-      {
-        type: "button",
-        "data-test": "ai-panel-launcher",
-        onClick: () => setOpen(true),
-        className: "fixed bottom-5 right-5 z-30 flex items-center gap-2 rounded-full border border-ph-border bg-ph-surface px-4 py-2.5 text-sm font-medium text-ph-ink shadow-ph hover:bg-ph-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand",
-        "aria-label": "Open Ask AI",
-        children: [
-          /* @__PURE__ */ jsx18(Icon, { className: "h-4 w-4 text-ph-brand" }),
-          "Ask AI"
-        ]
-      }
-    ) : null,
+    !hideLauncher ? /* @__PURE__ */ jsxs15(Fragment5, { children: [
+      /* @__PURE__ */ jsxs15(
+        "button",
+        {
+          ref: launcherRef,
+          type: "button",
+          "data-test": "ai-panel-launcher",
+          onClick: () => {
+            if (suppressLauncherClickRef.current) {
+              suppressLauncherClickRef.current = false;
+              return;
+            }
+            setOpen(true);
+          },
+          onPointerDown: startLauncherDrag,
+          onPointerMove: moveLauncher,
+          onPointerUp: finishLauncherDrag,
+          onPointerCancel: finishLauncherDrag,
+          onKeyDown: moveLauncherWithKeyboard,
+          className: `fixed z-30 flex touch-none select-none items-center gap-2 rounded-full border border-ph-border bg-ph-surface px-4 py-2.5 text-sm font-medium text-ph-ink shadow-ph hover:bg-ph-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand ${draggingLauncher ? "cursor-grabbing" : "cursor-grab"}`,
+          style: launcherPosition ? { left: launcherPosition.x, top: launcherPosition.y } : { bottom: 20, right: 20 },
+          "aria-label": "Open Ask AI",
+          "aria-describedby": "suite-ask-ai-launcher-help",
+          children: [
+            /* @__PURE__ */ jsx18(Icon, { className: "h-4 w-4 text-ph-brand" }),
+            "Ask AI"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx18("span", { id: "suite-ask-ai-launcher-help", className: "sr-only", children: "Drag to reposition, or use arrow keys. The launcher docks to the nearest screen edge." })
+    ] }) : null,
     open ? /* @__PURE__ */ jsxs15("div", { className: "fixed inset-0 z-40", role: "dialog", "aria-modal": "true", children: [
       /* @__PURE__ */ jsx18(
         "button",
@@ -2236,7 +2408,7 @@ function SuiteAiPanel({
       /* @__PURE__ */ jsxs15(
         "aside",
         {
-          className: "absolute inset-y-0 right-0 flex w-full max-w-md flex-col border-l border-ph-border bg-ph-surface shadow-2xl",
+          className: `absolute inset-y-0 flex w-full max-w-md flex-col bg-ph-surface shadow-2xl ${launcherSide === "left" ? "left-0 border-r border-ph-border" : "right-0 border-l border-ph-border"}`,
           "data-test": "suite-ask-ai-panel",
           children: [
             /* @__PURE__ */ jsxs15("div", { className: "flex items-center justify-between border-b border-ph-border px-4 py-3", children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xenide-io/the-old-ui-theme",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "description": "Props-driven React components and theme tokens inspired by classic interface design — optimized for Next.js apps and internal tools.",
   "author": "Xenide",
   "license": "MIT",

package/src/suite/components/ai-panel.test.ts

@@ -0,0 +1,20 @@
+import { describe, expect, it } from 'vitest';
+
+import { resolveSuiteAiLauncherPosition } from './ai-panel';
+
+describe('resolveSuiteAiLauncherPosition', () => {
+  it('docks to either edge and keeps the launcher inside the viewport', () => {
+    expect(
+      resolveSuiteAiLauncherPosition('left', -20, 1000, 800, 120, 40),
+    ).toEqual({
+      x: 12,
+      y: 12,
+    });
+    expect(
+      resolveSuiteAiLauncherPosition('right', 900, 1000, 800, 120, 40),
+    ).toEqual({
+      x: 868,
+      y: 748,
+    });
+  });
+});

package/src/suite/components/ai-panel.tsx

@@ -6,6 +6,8 @@ import {
   useRef,
   useState,
   type ComponentType,
+  type KeyboardEvent as ReactKeyboardEvent,
+  type PointerEvent as ReactPointerEvent,
   type ReactNode,
 } from 'react';
 import { Check, Copy, Sparks, Xmark as X } from 'iconoir-react';
@@ -37,6 +39,34 @@ export interface SuiteAiChatMessage {
   created_at?: string;
 }
 
+type LauncherSide = 'left' | 'right';
+type LauncherPosition = { x: number; y: number };
+
+const LAUNCHER_EDGE_GAP = 12;
+const LAUNCHER_STORAGE_KEY = 'suite-ask-ai-launcher-position';
+
+export function resolveSuiteAiLauncherPosition(
+  side: LauncherSide,
+  desiredY: number,
+  viewportWidth: number,
+  viewportHeight: number,
+  launcherWidth: number,
+  launcherHeight: number,
+): LauncherPosition {
+  const maxX = Math.max(
+    LAUNCHER_EDGE_GAP,
+    viewportWidth - launcherWidth - LAUNCHER_EDGE_GAP,
+  );
+  const maxY = Math.max(
+    LAUNCHER_EDGE_GAP,
+    viewportHeight - launcherHeight - LAUNCHER_EDGE_GAP,
+  );
+  return {
+    x: side === 'left' ? LAUNCHER_EDGE_GAP : maxX,
+    y: Math.min(Math.max(desiredY, LAUNCHER_EDGE_GAP), maxY),
+  };
+}
+
 /**
  * Suite-wide Ask AI slide-over — Notion-style continuous chat.
  *
@@ -77,9 +107,67 @@ export function SuiteAiPanel({
   const [hydrating, setHydrating] = useState(false);
   const [error, setError] = useState('');
   const [copiedId, setCopiedId] = useState<number | null>(null);
+  const [launcherSide, setLauncherSide] = useState<LauncherSide>('right');
+  const [launcherPosition, setLauncherPosition] =
+    useState<LauncherPosition | null>(null);
+  const [draggingLauncher, setDraggingLauncher] = useState(false);
   const scrollerRef = useRef<HTMLDivElement>(null);
+  const launcherRef = useRef<HTMLButtonElement>(null);
+  const launcherSideRef = useRef<LauncherSide>('right');
+  const launcherPositionRef = useRef<LauncherPosition | null>(null);
+  const launcherDragRef = useRef<{
+    pointerId: number;
+    offsetX: number;
+    offsetY: number;
+    startX: number;
+    startY: number;
+  } | null>(null);
+  const suppressLauncherClickRef = useRef(false);
   const pendingPromptRef = useRef<string | null>(null);
 
+  useEffect(() => {
+    const launcher = launcherRef.current;
+    if (!launcher) return;
+
+    let side: LauncherSide = 'right';
+    let desiredY = window.innerHeight - launcher.offsetHeight - 20;
+    try {
+      const stored = JSON.parse(
+        localStorage.getItem(LAUNCHER_STORAGE_KEY) || 'null',
+      ) as {
+        side?: LauncherSide;
+        y?: number;
+      } | null;
+      if (stored?.side === 'left' || stored?.side === 'right')
+        side = stored.side;
+      if (typeof stored?.y === 'number') desiredY = stored.y;
+    } catch {
+      // Ignore invalid saved launcher positions.
+    }
+
+    launcherSideRef.current = side;
+    setLauncherSide(side);
+
+    const placeLauncher = () => {
+      const element = launcherRef.current;
+      if (!element) return;
+      const next = resolveSuiteAiLauncherPosition(
+        launcherSideRef.current,
+        launcherPositionRef.current?.y ?? desiredY,
+        window.innerWidth,
+        window.innerHeight,
+        element.offsetWidth,
+        element.offsetHeight,
+      );
+      launcherPositionRef.current = next;
+      setLauncherPosition(next);
+    };
+
+    placeLauncher();
+    window.addEventListener('resize', placeLauncher);
+    return () => window.removeEventListener('resize', placeLauncher);
+  }, []);
+
   const scrollToBottom = useCallback(() => {
     const el = scrollerRef.current;
     if (!el) return;
@@ -185,21 +273,158 @@ export function SuiteAiPanel({
     }
   }
 
+  function saveLauncherPosition(
+    side: LauncherSide,
+    position: LauncherPosition,
+  ) {
+    try {
+      localStorage.setItem(
+        LAUNCHER_STORAGE_KEY,
+        JSON.stringify({ side, y: position.y }),
+      );
+    } catch {
+      // Storage may be unavailable; dragging still works for this session.
+    }
+  }
+
+  function dockLauncher(side: LauncherSide, desiredY: number) {
+    const launcher = launcherRef.current;
+    if (!launcher) return;
+    const next = resolveSuiteAiLauncherPosition(
+      side,
+      desiredY,
+      window.innerWidth,
+      window.innerHeight,
+      launcher.offsetWidth,
+      launcher.offsetHeight,
+    );
+    launcherSideRef.current = side;
+    launcherPositionRef.current = next;
+    setLauncherSide(side);
+    setLauncherPosition(next);
+    saveLauncherPosition(side, next);
+  }
+
+  function startLauncherDrag(event: ReactPointerEvent<HTMLButtonElement>) {
+    if (event.pointerType === 'mouse' && event.button !== 0) return;
+    const rect = event.currentTarget.getBoundingClientRect();
+    launcherDragRef.current = {
+      pointerId: event.pointerId,
+      offsetX: event.clientX - rect.left,
+      offsetY: event.clientY - rect.top,
+      startX: event.clientX,
+      startY: event.clientY,
+    };
+    suppressLauncherClickRef.current = false;
+    event.currentTarget.setPointerCapture(event.pointerId);
+    setDraggingLauncher(true);
+  }
+
+  function moveLauncher(event: ReactPointerEvent<HTMLButtonElement>) {
+    const drag = launcherDragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    const launcher = event.currentTarget;
+    const maxX = Math.max(
+      LAUNCHER_EDGE_GAP,
+      window.innerWidth - launcher.offsetWidth - LAUNCHER_EDGE_GAP,
+    );
+    const maxY = Math.max(
+      LAUNCHER_EDGE_GAP,
+      window.innerHeight - launcher.offsetHeight - LAUNCHER_EDGE_GAP,
+    );
+    const next = {
+      x: Math.min(
+        Math.max(event.clientX - drag.offsetX, LAUNCHER_EDGE_GAP),
+        maxX,
+      ),
+      y: Math.min(
+        Math.max(event.clientY - drag.offsetY, LAUNCHER_EDGE_GAP),
+        maxY,
+      ),
+    };
+    if (
+      Math.hypot(event.clientX - drag.startX, event.clientY - drag.startY) > 4
+    ) {
+      suppressLauncherClickRef.current = true;
+    }
+    launcherPositionRef.current = next;
+    setLauncherPosition(next);
+  }
+
+  function finishLauncherDrag(event: ReactPointerEvent<HTMLButtonElement>) {
+    const drag = launcherDragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+    launcherDragRef.current = null;
+    setDraggingLauncher(false);
+    const rect = event.currentTarget.getBoundingClientRect();
+    const currentX = launcherPositionRef.current?.x ?? rect.left;
+    const side: LauncherSide =
+      currentX + rect.width / 2 < window.innerWidth / 2 ? 'left' : 'right';
+    dockLauncher(side, launcherPositionRef.current?.y ?? rect.top);
+  }
+
+  function moveLauncherWithKeyboard(
+    event: ReactKeyboardEvent<HTMLButtonElement>,
+  ) {
+    if (
+      !['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.key)
+    )
+      return;
+    event.preventDefault();
+    const currentY =
+      launcherPositionRef.current?.y ??
+      event.currentTarget.getBoundingClientRect().top;
+    if (event.key === 'ArrowLeft') dockLauncher('left', currentY);
+    else if (event.key === 'ArrowRight') dockLauncher('right', currentY);
+    else
+      dockLauncher(
+        launcherSideRef.current,
+        currentY + (event.key === 'ArrowUp' ? -24 : 24),
+      );
+  }
+
   const Icon = BrandIcon ?? Sparks;
 
   return (
     <>
       {!hideLauncher ? (
-        <button
-          type="button"
-          data-test="ai-panel-launcher"
-          onClick={() => setOpen(true)}
-          className="fixed bottom-5 right-5 z-30 flex items-center gap-2 rounded-full border border-ph-border bg-ph-surface px-4 py-2.5 text-sm font-medium text-ph-ink shadow-ph hover:bg-ph-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand"
-          aria-label="Open Ask AI"
-        >
-          <Icon className="h-4 w-4 text-ph-brand" />
-          Ask AI
-        </button>
+        <>
+          <button
+            ref={launcherRef}
+            type="button"
+            data-test="ai-panel-launcher"
+            onClick={() => {
+              if (suppressLauncherClickRef.current) {
+                suppressLauncherClickRef.current = false;
+                return;
+              }
+              setOpen(true);
+            }}
+            onPointerDown={startLauncherDrag}
+            onPointerMove={moveLauncher}
+            onPointerUp={finishLauncherDrag}
+            onPointerCancel={finishLauncherDrag}
+            onKeyDown={moveLauncherWithKeyboard}
+            className={`fixed z-30 flex touch-none select-none items-center gap-2 rounded-full border border-ph-border bg-ph-surface px-4 py-2.5 text-sm font-medium text-ph-ink shadow-ph hover:bg-ph-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-brand ${draggingLauncher ? 'cursor-grabbing' : 'cursor-grab'}`}
+            style={
+              launcherPosition
+                ? { left: launcherPosition.x, top: launcherPosition.y }
+                : { bottom: 20, right: 20 }
+            }
+            aria-label="Open Ask AI"
+            aria-describedby="suite-ask-ai-launcher-help"
+          >
+            <Icon className="h-4 w-4 text-ph-brand" />
+            Ask AI
+          </button>
+          <span id="suite-ask-ai-launcher-help" className="sr-only">
+            Drag to reposition, or use arrow keys. The launcher docks to the
+            nearest screen edge.
+          </span>
+        </>
       ) : null}
 
       {open ? (
@@ -211,7 +436,7 @@ export function SuiteAiPanel({
             aria-label="Close Ask AI"
           />
           <aside
-            className="absolute inset-y-0 right-0 flex w-full max-w-md flex-col border-l border-ph-border bg-ph-surface shadow-2xl"
+            className={`absolute inset-y-0 flex w-full max-w-md flex-col bg-ph-surface shadow-2xl ${launcherSide === 'left' ? 'left-0 border-r border-ph-border' : 'right-0 border-l border-ph-border'}`}
             data-test="suite-ask-ai-panel"
           >
             <div className="flex items-center justify-between border-b border-ph-border px-4 py-3">