bosun 0.40.2 → 0.40.4

package/task/task-store.mjs

@@ -429,6 +429,7 @@ function defaultMeta() {
     version: 1,
     projectId: null,
     lastFullSync: null,
+    epicDependencies: {},
     sprintOrderMode: "parallel",
     taskCount: 0,
     stats: {
@@ -808,6 +809,25 @@ function ensureSprintsMap() {
   return _store.sprints;
 }
 
+function ensureEpicDependenciesMap() {
+  if (!_store._meta || typeof _store._meta !== "object") {
+    _store._meta = defaultMeta();
+  }
+  if (!_store._meta.epicDependencies || typeof _store._meta.epicDependencies !== "object") {
+    _store._meta.epicDependencies = {};
+  }
+  const map = _store._meta.epicDependencies;
+  for (const [key, value] of Object.entries(map)) {
+    const epicId = String(key || "").trim();
+    if (!epicId) {
+      delete map[key];
+      continue;
+    }
+    map[epicId] = uniqueStringList(Array.isArray(value) ? value : []);
+  }
+  return map;
+}
+
 export function listSprints() {
   ensureLoaded();
   const sprints = Object.values(ensureSprintsMap());
@@ -1693,12 +1713,18 @@ export function getGlobalDagOfDags() {
       return String(a.to).localeCompare(String(b.to));
     });
 
+  const epicDependencies = getEpicDependencies();
+
   return {
     sprintOrderMode: mode,
     sprintCount: nodes.length,
     edgeCount: edges.length,
+    epicDependencies,
     nodes,
-    edges,
+    edges: edges.map((edge) => ({
+      ...edge,
+      kind: edge.taskLinks.some((link) => link?.type === 'sequence') ? 'sequential' : 'dependency',
+    })),
   };
 }
 
@@ -1706,6 +1732,54 @@ export function getDagOfDags() {
   return getGlobalDagOfDags();
 }
 
+export function getEpicDependencies() {
+  ensureLoaded();
+  const map = ensureEpicDependenciesMap();
+  return Object.entries(map).map(([epicId, dependencies]) => ({
+    epicId,
+    dependencies: uniqueStringList(Array.isArray(dependencies) ? dependencies : []),
+  }));
+}
+
+export function setEpicDependencies(epicId, dependencies = []) {
+  ensureLoaded();
+  const normalizedEpicId = String(epicId || '').trim();
+  if (!normalizedEpicId) return null;
+  const cleaned = uniqueStringList((Array.isArray(dependencies) ? dependencies : [])
+    .map((entry) => String(entry || '').trim())
+    .filter((entry) => entry && entry !== normalizedEpicId));
+  const map = ensureEpicDependenciesMap();
+  if (cleaned.length > 0) map[normalizedEpicId] = cleaned;
+  else delete map[normalizedEpicId];
+  saveStore();
+  return { epicId: normalizedEpicId, dependencies: [...(map[normalizedEpicId] || [])] };
+}
+
+export function addEpicDependency(epicId, dependencyEpicId) {
+  ensureLoaded();
+  const normalizedEpicId = String(epicId || '').trim();
+  const normalizedDependency = String(dependencyEpicId || '').trim();
+  if (!normalizedEpicId || !normalizedDependency || normalizedEpicId === normalizedDependency) return null;
+  const map = ensureEpicDependenciesMap();
+  const next = uniqueStringList([...(map[normalizedEpicId] || []), normalizedDependency]);
+  map[normalizedEpicId] = next;
+  saveStore();
+  return { epicId: normalizedEpicId, dependencies: [...next] };
+}
+
+export function removeEpicDependency(epicId, dependencyEpicId) {
+  ensureLoaded();
+  const normalizedEpicId = String(epicId || '').trim();
+  const normalizedDependency = String(dependencyEpicId || '').trim();
+  if (!normalizedEpicId || !normalizedDependency) return null;
+  const map = ensureEpicDependenciesMap();
+  const next = uniqueStringList((map[normalizedEpicId] || []).filter((entry) => entry !== normalizedDependency));
+  if (next.length > 0) map[normalizedEpicId] = next;
+  else delete map[normalizedEpicId];
+  saveStore();
+  return { epicId: normalizedEpicId, dependencies: [...(map[normalizedEpicId] || [])] };
+}
+
 export function canStartTask(taskId, options = {}) {
   return canTaskStart(taskId, options);
 }
@@ -1721,6 +1795,7 @@ export function canTaskStart(taskId, options = {}) {
       blockingTaskIds: [],
       missingDependencyTaskIds: [],
       blockingSprintIds: [],
+      blockingEpicIds: [],
       sprintOrderMode,
     };
   }
@@ -1732,6 +1807,7 @@ export function canTaskStart(taskId, options = {}) {
       blockingTaskIds: [],
       missingDependencyTaskIds: [],
       blockingSprintIds: [],
+      blockingEpicIds: [],
       sprintOrderMode,
     };
   }
@@ -1756,6 +1832,7 @@ export function canTaskStart(taskId, options = {}) {
       blockingTaskIds: uniqueStringList(blockingTaskIds),
       missingDependencyTaskIds: uniqueStringList(missingDependencyTaskIds),
       blockingSprintIds: [],
+      blockingEpicIds: [],
       sprintOrderMode,
     };
   }
@@ -1787,6 +1864,42 @@ export function canTaskStart(taskId, options = {}) {
           blockingTaskIds: uniqueStringList(blockingTaskIds),
           missingDependencyTaskIds: [],
           blockingSprintIds: [sprintId],
+          blockingEpicIds: [],
+          sprintOrderMode,
+          sprintTaskOrderMode,
+        };
+      }
+    }
+  }
+
+  const taskEpicId = String(task?.epicId || task?.meta?.epicId || '').trim();
+  if (taskEpicId) {
+    const epicDependenciesMap = ensureEpicDependenciesMap();
+    const requiredEpics = uniqueStringList(epicDependenciesMap[taskEpicId] || []);
+    if (requiredEpics.length > 0) {
+      const blockingEpicIds = [];
+      const blockingEpicTaskIds = [];
+      for (const requiredEpicId of requiredEpics) {
+        let hasIncomplete = false;
+        for (const candidate of Object.values(_store.tasks)) {
+          if (!candidate) continue;
+          const candidateEpicId = String(candidate?.epicId || candidate?.meta?.epicId || '').trim();
+          if (candidateEpicId !== requiredEpicId) continue;
+          if (!isTaskTerminal(candidate)) {
+            hasIncomplete = true;
+            blockingEpicTaskIds.push(candidate.id);
+          }
+        }
+        if (hasIncomplete) blockingEpicIds.push(requiredEpicId);
+      }
+      if (blockingEpicIds.length > 0) {
+        return {
+          canStart: false,
+          reason: "epic_dependencies_unresolved",
+          blockingTaskIds: uniqueStringList(blockingEpicTaskIds),
+          missingDependencyTaskIds: [],
+          blockingSprintIds: [],
+          blockingEpicIds: uniqueStringList(blockingEpicIds),
           sprintOrderMode,
           sprintTaskOrderMode,
         };
@@ -1818,6 +1931,7 @@ export function canTaskStart(taskId, options = {}) {
           blockingTaskIds: uniqueStringList(blockingTaskIds),
           missingDependencyTaskIds: [],
           blockingSprintIds: uniqueStringList(blockingSprintIds),
+          blockingEpicIds: [],
           sprintOrderMode,
           sprintTaskOrderMode,
         };
@@ -1831,6 +1945,7 @@ export function canTaskStart(taskId, options = {}) {
     blockingTaskIds: [],
     missingDependencyTaskIds: [],
     blockingSprintIds: [],
+    blockingEpicIds: [],
     sprintOrderMode,
   };
 }

package/ui/components/kanban-board.js

@@ -2,12 +2,13 @@
  *  Kanban Board Component — GitHub Projects-style task board
  * ────────────────────────────────────────────────────────────── */
 import { h } from "preact";
-import { useState, useCallback, useRef, useEffect, useMemo } from "preact/hooks";
+import { useState, useCallback, useRef, useEffect, useMemo, useLayoutEffect } from "preact/hooks";
 import htm from "htm";
 import { signal, computed } from "@preact/signals";
 import {
   tasksData,
   tasksLoaded,
+  tasksPage,
   showToast,
   runOptimistic,
   loadTasks,
@@ -97,6 +98,27 @@ function getTaskBaseBranch(task) {
   );
 }
 
+function getTaskRuntimeSnapshot(task) {
+  return task?.runtimeSnapshot || task?.meta?.runtimeSnapshot || null;
+}
+
+function getTaskEpic(task) {
+  return String(task?.epic || task?.epicName || task?.meta?.epic || task?.meta?.epicName || "").trim();
+}
+
+function getTaskSprint(task) {
+  return String(task?.sprintName || task?.sprint || task?.meta?.sprintName || task?.meta?.sprintId || "").trim();
+}
+
+function getTaskStoryPoints(task) {
+  const value = task?.storyPoints ?? task?.story_points ?? task?.points ?? task?.meta?.storyPoints;
+  return Number.isFinite(Number(value)) && String(value).trim() !== "" ? String(value) : "";
+}
+
+function getTaskDueDate(task) {
+  return String(task?.dueDate || task?.due_date || task?.meta?.dueDate || "").trim();
+}
+
 /* ─── Derived column data ─── */
 const columnData = computed(() => {
   const tasks = tasksData.value || [];
@@ -130,6 +152,14 @@ const TOUCH_DRAG_DELAY_MS = 180;
 const TOUCH_DRAG_START_PX = 6;
 const TOUCH_CANCEL_PX = 14;
 
+function queueBoardTasksRefresh() {
+  const page = Number(tasksPage?.value ?? 0);
+  const append = Number.isFinite(page) && page > 0;
+  setTimeout(() => {
+    void loadTasks({ append });
+  }, 500);
+}
+
 /* ─── Touch drag helpers ─── */
 
 function _createTouchClone(el) {
@@ -269,7 +299,7 @@ async function executeBoardTransition(task, newStatus, columnLabel) {
   );
 
   showToast(`Moved to ${columnLabel || "updated status"}`, "success");
-  setTimeout(() => loadTasks(), 500);
+  queueBoardTasksRefresh();
   return { ok: true, cancelled: false, action: decision.action, status: optimisticStatus };
 }
 
@@ -411,6 +441,11 @@ function KanbanCard({ task, onOpen }) {
   const priorityLabel = PRIORITY_LABELS[task.priority] || null;
   const tags = getTaskTags(task);
   const baseBranch = getTaskBaseBranch(task);
+  const runtime = getTaskRuntimeSnapshot(task);
+  const epic = getTaskEpic(task);
+  const sprint = getTaskSprint(task);
+  const storyPoints = getTaskStoryPoints(task);
+  const dueDate = getTaskDueDate(task);
   const repoName = task.repo || task.repository || "";
   const issueNum = task.issueNumber || task.issue_number || (typeof task.id === "string" && /^\d+$/.test(task.id) ? task.id : null);
   const hasAgent = Boolean(
@@ -459,11 +494,25 @@ function KanbanCard({ task, onOpen }) {
           ${priorityLabel && html`
             <${Chip} label=${priorityLabel} size="small" sx=${{ backgroundColor: priorityColor, color: '#fff', height: 18, fontSize: '0.65rem' }} />
           `}
+          ${runtime?.state === "running" && html`
+            <${Chip} label="LIVE" size="small" color="success" sx=${{ height: 18, fontSize: '0.65rem' }} />
+          `}
+          ${runtime?.state === "queued" && html`
+            <${Chip} label="QUEUED" size="small" color="warning" sx=${{ height: 18, fontSize: '0.65rem' }} />
+          `}
         </${Stack}>
         <${Typography} variant="body2" fontWeight=${500}>${truncate(task.title || "(untitled)", 80)}</${Typography}>
         ${task.description && html`
           <${Typography} variant="caption" color="text.secondary" sx=${{ display: 'block', mt: 0.5 }}>${truncate(task.description, 72)}</${Typography}>
         `}
+        ${(epic || sprint || storyPoints || dueDate) && html`
+          <${Stack} direction="row" spacing=${0.5} flexWrap="wrap" sx=${{ mt: 0.75 }}>
+            ${epic && html`<${Chip} label=${`Epic: ${truncate(epic, 18)}`} size="small" variant="outlined" sx=${{ height: 20, fontSize: '0.65rem' }} />`}
+            ${sprint && html`<${Chip} label=${`Sprint: ${truncate(sprint, 18)}`} size="small" variant="outlined" sx=${{ height: 20, fontSize: '0.65rem' }} />`}
+            ${storyPoints && html`<${Chip} label=${`${storyPoints} pts`} size="small" variant="outlined" sx=${{ height: 20, fontSize: '0.65rem' }} />`}
+            ${dueDate && html`<${Chip} label=${`Due: ${truncate(dueDate, 18)}`} size="small" variant="outlined" color="warning" sx=${{ height: 20, fontSize: '0.65rem' }} />`}
+          </${Stack}>
+        `}
         ${baseBranch && html`
           <${Typography} variant="caption" color="text.secondary" sx=${{ display: 'block', mt: 0.5 }}>Base: ${truncate(baseBranch, 24)}</${Typography}>
         `}
@@ -498,19 +547,80 @@ function KanbanColumn({
 }) {
   const [showCreate, setShowCreate] = useState(false);
   const inputRef = useRef(null);
+  const cardsRef = useRef(null);
+  const tailSentinelRef = useRef(null);
+  const lastAutoLoadCountRef = useRef(-1);
 
   useEffect(() => {
     if (showCreate && inputRef.current) inputRef.current.focus();
   }, [showCreate]);
 
+  const triggerLoadMore = useCallback(() => {
+    if (!hasMoreTasks || loadingMoreTasks || typeof onLoadMoreTasks !== "function") return false;
+    void onLoadMoreTasks();
+    return true;
+  }, [hasMoreTasks, loadingMoreTasks, onLoadMoreTasks]);
+
+  useEffect(() => {
+    if (!hasMoreTasks || typeof onLoadMoreTasks !== "function") {
+      lastAutoLoadCountRef.current = -1;
+      return;
+    }
+    const root = cardsRef.current;
+    const sentinel = tailSentinelRef.current;
+    if (!root || !sentinel || typeof IntersectionObserver !== "function") return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (!entry.isIntersecting) continue;
+          const key = tasks.length;
+          if (lastAutoLoadCountRef.current === key || loadingMoreTasks) continue;
+          lastAutoLoadCountRef.current = key;
+          void onLoadMoreTasks();
+        }
+      },
+      {
+        root,
+        rootMargin: "0px 0px 160px 0px",
+        threshold: 0,
+      },
+    );
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [hasMoreTasks, loadingMoreTasks, onLoadMoreTasks, tasks.length]);
+
+  useLayoutEffect(() => {
+    const root = cardsRef.current;
+    if (!root || !hasMoreTasks || loadingMoreTasks || typeof onLoadMoreTasks !== "function") return;
+    const remaining = root.scrollHeight - root.scrollTop - root.clientHeight;
+    const underfilled = root.scrollHeight <= root.clientHeight + LOAD_MORE_THRESHOLD_PX;
+    if (!underfilled && remaining > LOAD_MORE_THRESHOLD_PX) return;
+    const key = tasks.length;
+    if (lastAutoLoadCountRef.current === key) return;
+    lastAutoLoadCountRef.current = key;
+    void onLoadMoreTasks();
+  }, [hasMoreTasks, loadingMoreTasks, onLoadMoreTasks, tasks.length, showCreate]);
+
   const onCardsScroll = useCallback((event) => {
     const el = event?.currentTarget;
     if (!el) return;
     const remaining = el.scrollHeight - el.scrollTop - el.clientHeight;
     if (remaining > LOAD_MORE_THRESHOLD_PX) return;
-    if (!hasMoreTasks || loadingMoreTasks || typeof onLoadMoreTasks !== "function") return;
-    void onLoadMoreTasks();
-  }, [hasMoreTasks, loadingMoreTasks, onLoadMoreTasks]);
+    lastAutoLoadCountRef.current = tasks.length;
+    triggerLoadMore();
+  }, [tasks.length, triggerLoadMore]);
+
+  const onCardsWheel = useCallback((event) => {
+    const el = event?.currentTarget;
+    if (!el) return;
+    if (Math.abs(event.deltaY) < Math.abs(event.deltaX || 0)) return;
+    const canScroll = el.scrollHeight > el.clientHeight + 1;
+    if (!canScroll) return;
+    const atTop = el.scrollTop <= 0;
+    const atBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 1;
+    if ((event.deltaY < 0 && atTop) || (event.deltaY > 0 && atBottom)) return;
+    event.stopPropagation();
+  }, []);
 
   const onDragOver = useCallback((e) => {
     e.preventDefault();
@@ -562,7 +672,7 @@ function KanbanColumn({
         },
       );
       showToast(`Moved to ${col.title}`, "success");
-      setTimeout(() => loadTasks(), 500);
+      queueBoardTasksRefresh();
     } catch (err) {
       showToast(err?.message || "Failed to move task", "error");
     }
@@ -597,7 +707,12 @@ function KanbanColumn({
         <${Chip} label=${countLabel} size="small" />
         <${IconButton} size="small" onClick=${() => { setShowCreate(!showCreate); haptic(); }} title=${"Add task to " + col.title}>+</${IconButton}>
       </${Box}>
-      <div class="kanban-cards" onScroll=${onCardsScroll}>
+      <div
+        ref=${cardsRef}
+        class="kanban-cards"
+        onScroll=${onCardsScroll}
+        onWheel=${onCardsWheel}
+      >
         ${showCreate && html`
           <${TextField}
             inputRef=${inputRef}
@@ -616,10 +731,23 @@ function KanbanColumn({
           : html`<${Typography} variant="body2" color="text.secondary" sx=${{ textAlign: 'center', py: 2 }}>Drop tasks here</${Typography}>`
         }
         ${hasMoreTasks && html`
-          <div class="kanban-tail-sentinel"></div>
-          <div class="kanban-load-more">${loadingMoreTasks ? "Loading more tasks..." : "Scroll down to load more"}</div>
+          <div ref=${tailSentinelRef} class="kanban-tail-sentinel"></div>
         `}
       </div>
+      ${hasMoreTasks && html`
+        <div class="kanban-column-footer">
+          <button
+            type="button"
+            class="kanban-load-more"
+            onClick=${() => triggerLoadMore()}
+            disabled=${loadingMoreTasks}
+            aria-label=${loadingMoreTasks ? `Loading more ${col.title} tasks` : `Load more ${col.title} tasks`}
+          >
+            <span class="kanban-load-more-label">${loadingMoreTasks ? "Loading more tasks..." : `Load more ${col.title}`}</span>
+            <span class="kanban-load-more-icon" aria-hidden="true">⌄</span>
+          </button>
+        </div>
+      `}
       <div class="kanban-scroll-fade"></div>
     </div>
   `;

package/ui/components/shared.js

@@ -45,7 +45,6 @@ import {
   ListItemText,
   ListItemSecondaryAction,
   IconButton,
-  Fade,
 } from "@mui/material";
 
 import { ICONS } from "../modules/icons.js";
@@ -227,7 +226,13 @@ export function SkeletonCard({ height = "80px", className = "" }) {
  * onSaveBeforeClose?: (() => Promise<boolean|{closed?: boolean}|void>)|null,
  * onDiscardBeforeClose?: (() => Promise<boolean|{closed?: boolean}|void>)|null,
  * activeOperationLabel?: string,
- * closeGuard?: boolean
+ * closeGuard?: boolean,
+ * layout?: "sheet"|"side-sheet",
+ * resizable?: boolean,
+ * defaultWidth?: number,
+ * minWidth?: number,
+ * maxWidth?: number,
+ * widthStorageKey?: string
  * }} props
  */
 export function Modal({
@@ -242,6 +247,12 @@ export function Modal({
   onDiscardBeforeClose = null,
   activeOperationLabel = "",
   closeGuard = true,
+  layout = "sheet",
+  resizable = false,
+  defaultWidth = 760,
+  minWidth = 440,
+  maxWidth = 1120,
+  widthStorageKey = "",
 }) {
   const [visible, setVisible] = useState(false);
   const contentRef = useRef(null);
@@ -249,6 +260,13 @@ export function Modal({
   const [dragY, setDragY] = useState(0);
   const [closePromptOpen, setClosePromptOpen] = useState(false);
   const [closePromptSaving, setClosePromptSaving] = useState(false);
+  const isSideSheet = layout === "side-sheet";
+  const [sheetWidth, setSheetWidth] = useState(() => {
+    const fallback = Number.isFinite(Number(defaultWidth)) ? Number(defaultWidth) : 760;
+    if (!isSideSheet || !widthStorageKey || typeof localStorage === "undefined") return fallback;
+    const stored = Number(localStorage.getItem(widthStorageKey));
+    return Number.isFinite(stored) ? stored : fallback;
+  });
   const scopedUnsavedCount = Number.isFinite(Number(unsavedChanges))
     ? Math.max(0, Number(unsavedChanges))
     : 0;
@@ -346,8 +364,43 @@ export function Modal({
   }, []);
 
   const isDragHandleTarget = useCallback((target) => (
-    Boolean(target?.closest?.(".modal-handle, .modal-header"))
-  ), []);
+    !isSideSheet && Boolean(target?.closest?.(".modal-handle, .modal-header"))
+  ), [isSideSheet]);
+
+  const persistSheetWidth = useCallback((nextWidth) => {
+    if (!widthStorageKey || typeof localStorage === "undefined") return;
+    try {
+      localStorage.setItem(widthStorageKey, String(nextWidth));
+    } catch {
+      /* ignore width persistence failures */
+    }
+  }, [widthStorageKey]);
+
+  const handleSheetResizeStart = useCallback((event) => {
+    if (!isSideSheet || !resizable) return;
+    event.preventDefault();
+    event.stopPropagation();
+    const startX = event.clientX;
+    const startWidth = sheetWidth;
+    const minAllowed = Math.max(320, Number.isFinite(Number(minWidth)) ? Number(minWidth) : 440);
+    const maxAllowedBase = Number.isFinite(Number(maxWidth)) ? Number(maxWidth) : 1120;
+    const maxAllowed = typeof window !== "undefined"
+      ? Math.min(maxAllowedBase, Math.max(minAllowed, window.innerWidth - 48))
+      : maxAllowedBase;
+    let latestWidth = startWidth;
+    const onMove = (moveEvent) => {
+      const delta = startX - moveEvent.clientX;
+      latestWidth = Math.max(minAllowed, Math.min(maxAllowed, startWidth + delta));
+      setSheetWidth(latestWidth);
+    };
+    const onUp = () => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      persistSheetWidth(latestWidth);
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+  }, [isSideSheet, maxWidth, minWidth, persistSheetWidth, resizable, sheetWidth]);
 
   const handleTouchStart = useCallback((e) => {
     if (!isDragHandleTarget(e.target)) return;
@@ -530,53 +583,62 @@ export function Modal({
   const dragStyle = dragY > 0
     ? `transform: translateY(${dragY}px); opacity: ${Math.max(0.2, 1 - dragY / 400)}`
     : "";
+  const contentStyle = [
+    dragStyle,
+    isSideSheet ? `--modal-sheet-width:${sheetWidth}px` : "",
+  ].filter(Boolean).join("; ");
 
   const content = html`
-    <${Fade} in=${visible} timeout=${300}>
+    <div
+      class="modal-overlay ${visible ? "modal-overlay-visible" : ""}"
+      onClick=${(e) => {
+        if (e.target === e.currentTarget) requestClose();
+      }}
+    >
       <div
-        class="modal-overlay ${visible ? "modal-overlay-visible" : ""}"
-        onClick=${(e) => {
-          if (e.target === e.currentTarget) requestClose();
-        }}
+        ref=${contentRef}
+        class="modal-content ${isSideSheet ? "modal-side-sheet" : ""} ${contentClassName} ${visible ? "modal-content-visible" : ""} ${dragY > 0 ? "modal-dragging" : ""}"
+        style=${contentStyle}
+        onClick=${(e) => e.stopPropagation()}
+        onTouchStart=${handleTouchStart}
+        onTouchMove=${handleTouchMove}
+        onTouchEnd=${handleTouchEnd}
+        onTouchCancel=${handleTouchCancel}
+        onPointerDown=${handlePointerDown}
+        onPointerMove=${handlePointerMove}
+        onPointerUp=${handlePointerEnd}
+        onPointerCancel=${handlePointerCancel}
       >
-        <div
-          ref=${contentRef}
-          class="modal-content ${contentClassName} ${visible ? "modal-content-visible" : ""} ${dragY > 0 ? "modal-dragging" : ""}"
-          style=${dragStyle}
-          onClick=${(e) => e.stopPropagation()}
-          onTouchStart=${handleTouchStart}
-          onTouchMove=${handleTouchMove}
-          onTouchEnd=${handleTouchEnd}
-          onTouchCancel=${handleTouchCancel}
-          onPointerDown=${handlePointerDown}
-          onPointerMove=${handlePointerMove}
-          onPointerUp=${handlePointerEnd}
-          onPointerCancel=${handlePointerCancel}
-        >
-          <div class="modal-header">
-            <div class="modal-handle"></div>
-            ${title ? html`<div class="modal-title">${title}</div>` : null}
-            <${IconButton}
-              className="modal-close-btn"
-              size="small"
-              onTouchStart=${(e) => e.stopPropagation()}
-              onPointerDown=${(e) => e.stopPropagation()}
-              onPointerUp=${(e) => e.stopPropagation()}
-              onMouseDown=${(e) => e.stopPropagation()}
-              onClick=${requestClose}
-              aria-label="Close"
-              sx=${{ position: "absolute", right: 8, top: 8, zIndex: 8, pointerEvents: "auto" }}
-            >
-              ${ICONS.close}
-            <//>
-          </div>
-          <div class="modal-body" onTouchStart=${handleBodyTouchStart}>
-            ${children}
-          </div>
-          ${footer ? html`<div class="modal-footer">${footer}</div>` : null}
+        ${isSideSheet && resizable
+          ? html`<div
+              class="modal-sheet-resizer"
+              onPointerDown=${handleSheetResizeStart}
+              title="Resize panel"
+            ></div>`
+          : null}
+        <div class="modal-header">
+          <div class="modal-handle"></div>
+          ${title ? html`<div class="modal-title">${title}</div>` : null}
+          <${IconButton}
+            className="modal-close-btn"
+            size="small"
+            onTouchStart=${(e) => e.stopPropagation()}
+            onPointerDown=${(e) => e.stopPropagation()}
+            onPointerUp=${(e) => e.stopPropagation()}
+            onMouseDown=${(e) => e.stopPropagation()}
+            onClick=${requestClose}
+            aria-label="Close"
+            sx=${{ position: "absolute", right: 8, top: 8, zIndex: 8, pointerEvents: "auto" }}
+          >
+            ${ICONS.close}
+          <//>
+        </div>
+        <div class="modal-body" onTouchStart=${handleBodyTouchStart}>
+          ${children}
         </div>
+        ${footer ? html`<div class="modal-footer">${footer}</div>` : null}
       </div>
-    </${Fade}>
+    </div>
   `;
 
   const guard = closePromptOpen