@starlove/orbit 1.3.4 → 1.4.0

package/public/js/drawer.js

@@ -10,6 +10,158 @@ import { escapeHtml } from "./format.js";
 /** Bumps on each open/close so a stale `transitionend` from an old close cannot clear a newly opened drawer. */
 let drawerToken = 0;
 
+/** Aborts scroll/resize observers when tabs are re-rendered or the drawer closes. */
+let drawerTabsScrollAbort = null;
+
+/** Toggle edge-fade classes on the tab shell when the strip can scroll further left/right. */
+function syncDrawerTabsScrollState(tabsEl) {
+  const shellEl = document.getElementById("drawerTabsShell");
+  if (!tabsEl || !shellEl) return;
+
+  const maxScroll = tabsEl.scrollWidth - tabsEl.clientWidth;
+  if (maxScroll <= 1) {
+    shellEl.classList.remove("can-scroll-left", "can-scroll-right");
+    return;
+  }
+
+  shellEl.classList.toggle("can-scroll-left", tabsEl.scrollLeft > 1);
+  shellEl.classList.toggle("can-scroll-right", tabsEl.scrollLeft < maxScroll - 1);
+}
+
+/** Keep the active settings tab visible when the strip overflows horizontally. */
+function scrollActiveDrawerTabIntoView(tabsEl) {
+  tabsEl
+    ?.querySelector(".drawer-tab.is-active")
+    ?.scrollIntoView({ block: "nearest", inline: "nearest" });
+}
+
+function teardownDrawerTabsScroll() {
+  drawerTabsScrollAbort?.abort();
+  drawerTabsScrollAbort = null;
+  const shellEl = document.getElementById("drawerTabsShell");
+  const tabsEl = document.getElementById("drawerTabs");
+  shellEl?.classList.remove("can-scroll-left", "can-scroll-right");
+  tabsEl?.classList.remove("is-grabbing");
+}
+
+function bindDrawerTabsScroll(tabsEl) {
+  teardownDrawerTabsScroll();
+  if (!tabsEl) return;
+
+  const controller = new AbortController();
+  drawerTabsScrollAbort = controller;
+  const { signal } = controller;
+
+  const onScrollChange = () => syncDrawerTabsScrollState(tabsEl);
+  tabsEl.addEventListener("scroll", onScrollChange, { passive: true, signal });
+
+  if (typeof ResizeObserver !== "undefined") {
+    const observer = new ResizeObserver(onScrollChange);
+    observer.observe(tabsEl);
+    signal.addEventListener("abort", () => observer.disconnect(), { once: true });
+  }
+
+  // Vertical wheel over the tab strip pans horizontally (no Shift required).
+  const LINE_SCROLL_PX = 16;
+  const wheelPixels = (value, mode) => {
+    if (mode === WheelEvent.DOM_DELTA_LINE) return value * LINE_SCROLL_PX;
+    if (mode === WheelEvent.DOM_DELTA_PAGE) return value * Math.max(tabsEl.clientWidth, 1);
+    return value;
+  };
+
+  tabsEl.addEventListener(
+    "wheel",
+    (event) => {
+      if (event.defaultPrevented || event.ctrlKey) return;
+      if (tabsEl.scrollWidth <= tabsEl.clientWidth) return;
+
+      const horizontalDelta = event.deltaX || event.deltaY;
+      if (!horizontalDelta) return;
+
+      event.preventDefault();
+      tabsEl.scrollLeft += wheelPixels(horizontalDelta, event.deltaMode);
+    },
+    { passive: false, signal }
+  );
+
+  // Click-and-drag horizontal panning; threshold keeps tab clicks intact.
+  const DRAG_THRESHOLD = 4;
+  let dragActive = false;
+  let dragged = false;
+  let startX = 0;
+  let startScroll = 0;
+  let pointerId = 0;
+
+  tabsEl.addEventListener(
+    "pointerdown",
+    (event) => {
+      if (event.button !== 0) return;
+      if (tabsEl.scrollWidth <= tabsEl.clientWidth) return;
+      dragged = false;
+      dragActive = true;
+      pointerId = event.pointerId;
+      startX = event.clientX;
+      startScroll = tabsEl.scrollLeft;
+    },
+    { signal }
+  );
+
+  tabsEl.addEventListener(
+    "pointermove",
+    (event) => {
+      if (!dragActive || event.pointerId !== pointerId) return;
+      const delta = event.clientX - startX;
+      if (!dragged && Math.abs(delta) > DRAG_THRESHOLD) {
+        dragged = true;
+        try {
+          tabsEl.setPointerCapture(pointerId);
+        } catch {
+          /* no-op: some browsers can't capture here */
+        }
+        tabsEl.classList.add("is-grabbing");
+      }
+      if (dragged) {
+        event.preventDefault();
+        tabsEl.scrollLeft = startScroll - delta;
+      }
+    },
+    { signal }
+  );
+
+  const endDrag = (event) => {
+    if (!dragActive || (event && event.pointerId !== pointerId)) return;
+    dragActive = false;
+    tabsEl.classList.remove("is-grabbing");
+    try {
+      tabsEl.releasePointerCapture(pointerId);
+    } catch {
+      /* no-op */
+    }
+  };
+
+  tabsEl.addEventListener("pointerup", endDrag, { signal });
+  tabsEl.addEventListener("pointercancel", endDrag, { signal });
+  tabsEl.addEventListener("pointerleave", endDrag, { signal });
+
+  tabsEl.addEventListener(
+    "click",
+    (event) => {
+      if (dragged) {
+        event.stopPropagation();
+        event.preventDefault();
+        dragged = false;
+      }
+    },
+    { capture: true, signal }
+  );
+
+  requestAnimationFrame(() => {
+    if (signal.aborted) return;
+    onScrollChange();
+    scrollActiveDrawerTabIntoView(tabsEl);
+  });
+}
+
 /** Slide the right drawer in (ticket detail, project settings, or create form). */
 export function openDrawer() {
   drawerToken += 1;
@@ -38,8 +190,11 @@ export function closeDrawer() {
     drawerInner.innerHTML = "";
     const titleBlockEl = document.getElementById("drawerTitleBlock");
     const tabsEl = document.getElementById("drawerTabs");
+    const tabsShellEl = document.getElementById("drawerTabsShell");
     if (titleBlockEl) titleBlockEl.innerHTML = "";
-    if (tabsEl) { tabsEl.innerHTML = ""; tabsEl.hidden = true; }
+    if (tabsEl) tabsEl.innerHTML = "";
+    if (tabsShellEl) tabsShellEl.hidden = true;
+    teardownDrawerTabsScroll();
     drawer.classList.remove("is-wide");
   };
 
@@ -69,6 +224,7 @@ export function renderDrawerShell({ eyebrow, title, titleAttrs, subtitleHtml, ta
   drawer.classList.toggle("is-wide", mode === "ticket" || mode === "settings");
   const titleBlockEl = document.getElementById("drawerTitleBlock");
   const tabsEl = document.getElementById("drawerTabs");
+  const tabsShellEl = document.getElementById("drawerTabsShell");
 
   // Rebuild the eyebrow / title / subtitle wholesale each render. Like
   // drawerInner.innerHTML below, this means any listeners the caller attached
@@ -82,12 +238,14 @@ export function renderDrawerShell({ eyebrow, title, titleAttrs, subtitleHtml, ta
   }
   const segments = [];
   if (eyebrow) segments.push(`<span class="drawer-eyebrow">${escapeHtml(eyebrow)}</span>`);
-  segments.push(`<h2${titleAttrHtml}>${escapeHtml(title ?? "")}</h2>`);
+  if (title != null && String(title).trim() !== "") {
+    segments.push(`<h2${titleAttrHtml}>${escapeHtml(title)}</h2>`);
+  }
   if (subtitleHtml) segments.push(`<div class="drawer-subtitle">${subtitleHtml}</div>`);
   titleBlockEl.innerHTML = segments.join("");
 
   if (tabs && tabs.length) {
-    tabsEl.hidden = false;
+    if (tabsShellEl) tabsShellEl.hidden = false;
     tabsEl.innerHTML = tabs
       .map(
         (t) =>
@@ -101,9 +259,11 @@ export function renderDrawerShell({ eyebrow, title, titleAttrs, subtitleHtml, ta
         btn.addEventListener("click", () => onTabSelect(btn.dataset.drawerTab));
       });
     }
+    bindDrawerTabsScroll(tabsEl);
   } else {
-    tabsEl.hidden = true;
+    if (tabsShellEl) tabsShellEl.hidden = true;
     tabsEl.innerHTML = "";
+    teardownDrawerTabsScroll();
   }
 
   const archiveBtn = document.getElementById("drawerArchiveBtn");

package/public/js/font-preference.js

@@ -0,0 +1,229 @@
+export const FONT_STORAGE_KEY = "orbit_font_preferences";
+export const FONT_CHANGE_EVENT = "orbit:font-preference-change";
+
+// Inter is the default site font and for most categories; badges default to
+// Orbitron. The site font drives global font metrics such as size, spacing,
+// and line-height.
+export const DEFAULT_SITE_FONT = "inter";
+export const DEFAULT_BADGE_FONT = "orbitron";
+export const DEFAULT_USER_SCALE = 1;
+export const USER_SCALE_MIN = 0.85;
+export const USER_SCALE_MAX = 1.3;
+export const USER_SCALE_STEP = 0.05;
+
+export const SITE_FONT_OPTIONS = Object.freeze([
+  "inter",
+  "openSans",
+  "jetBrainsMono",
+  "chakraPetch",
+  "orbitron",
+  "rajdhani",
+  "runescapeUF",
+  "openRing"
+]);
+
+export const FONT_OPTIONS = Object.freeze({
+  inter: {
+    label: "Inter",
+    stack: "\"Orbit Inter\", \"Inter\", \"Segoe UI Variable\", \"Segoe UI\", Arial, sans-serif",
+    className: "font-inter"
+  },
+  openSans: {
+    label: "Open Sans",
+    stack: "\"Orbit Open Sans\", \"Open Sans\", \"Segoe UI Variable\", \"Segoe UI\", Arial, sans-serif",
+    className: "font-open-sans"
+  },
+  jetBrainsMono: {
+    label: "JetBrains Mono",
+    stack: "\"Orbit JetBrains Mono\", \"JetBrains Mono\", \"Cascadia Mono\", \"SFMono-Regular\", Consolas, monospace",
+    className: "font-jetbrains-mono"
+  },
+  chakraPetch: {
+    label: "Chakra Petch",
+    stack: "\"Orbit Chakra Petch\", \"Chakra Petch\", \"Segoe UI Variable\", \"Segoe UI\", Arial, sans-serif",
+    className: "font-chakra-petch"
+  },
+  orbitron: {
+    label: "Orbitron",
+    stack: "\"Orbit Orbitron\", \"Orbitron\", \"Segoe UI Variable\", \"Segoe UI\", Arial, sans-serif",
+    className: "font-orbitron"
+  },
+  rajdhani: {
+    label: "Rajdhani",
+    stack: "\"Orbit Rajdhani\", \"Rajdhani\", \"Segoe UI Variable\", \"Segoe UI\", Arial, sans-serif",
+    className: "font-rajdhani"
+  },
+  runescapeUF: {
+    label: "Runescape UF",
+    stack: "\"Orbit Runescape UF\", \"Cascadia Mono\", monospace",
+    className: "font-runescape-uf"
+  },
+  openRing: {
+    label: "Open Ring",
+    stack: "\"Orbit Open Ring\", \"Segoe UI Variable\", \"Segoe UI\", Arial, sans-serif",
+    className: "font-open-ring"
+  }
+});
+
+// Per-category overrides shown in the Appearance grid. Body text is not a
+// target: it always follows the primary font (`site`), so it drives
+// --orbit-font-body directly in applyFontPreferences instead.
+export const FONT_TARGETS = Object.freeze({
+  heading: {
+    label: "Headings",
+    cssVar: "--orbit-font-heading",
+    dataAttr: "fontHeading"
+  },
+  control: {
+    label: "Controls",
+    cssVar: "--orbit-font-control",
+    dataAttr: "fontControl"
+  },
+  label: {
+    label: "Labels",
+    cssVar: "--orbit-font-label",
+    dataAttr: "fontLabel"
+  },
+  badge: {
+    label: "Badges",
+    cssVar: "--orbit-font-badge",
+    dataAttr: "fontBadge"
+  }
+});
+
+export const LEGACY_FONT_TARGET_ALIASES = Object.freeze({
+  ui: "control"
+});
+
+export const DEFAULT_FONT_TARGET_PREFERENCES = Object.freeze({
+  control: DEFAULT_SITE_FONT,
+  heading: DEFAULT_SITE_FONT,
+  label: DEFAULT_SITE_FONT,
+  badge: DEFAULT_BADGE_FONT
+});
+
+export const DEFAULT_FONT_PREFERENCES = Object.freeze({
+  ...DEFAULT_FONT_TARGET_PREFERENCES,
+  // Primary font: drives body text and the default for every override category.
+  site: DEFAULT_SITE_FONT,
+  // User size slider multiplier (drives --type-user-scale).
+  userScale: DEFAULT_USER_SCALE
+});
+
+function hasOwn(object, key) {
+  return Object.prototype.hasOwnProperty.call(object, key);
+}
+
+export function clampUserScale(value) {
+  const number = Number(value);
+  if (!Number.isFinite(number)) return DEFAULT_USER_SCALE;
+  return Math.min(USER_SCALE_MAX, Math.max(USER_SCALE_MIN, number));
+}
+
+export function normalizeFontPreferences(value) {
+  const input = value && typeof value === "object" ? value : {};
+  const normalized = { ...DEFAULT_FONT_PREFERENCES };
+  const explicitTargets = new Set();
+  for (const key of Object.keys(FONT_TARGETS)) {
+    if (typeof input[key] === "string" && hasOwn(FONT_OPTIONS, input[key])) {
+      normalized[key] = input[key];
+      explicitTargets.add(key);
+    }
+  }
+  for (const [legacyKey, target] of Object.entries(LEGACY_FONT_TARGET_ALIASES)) {
+    if (!explicitTargets.has(target) && typeof input[legacyKey] === "string" && hasOwn(FONT_OPTIONS, input[legacyKey])) {
+      normalized[target] = input[legacyKey];
+    }
+  }
+  if (typeof input.site === "string" && hasOwn(FONT_OPTIONS, input.site)) {
+    normalized.site = input.site;
+  }
+  if (input.userScale !== undefined) {
+    normalized.userScale = clampUserScale(input.userScale);
+  }
+  // Before the split, one "label" target drove both categories. Preserve a
+  // customized label choice for badges unless badge was saved separately.
+  if (!hasOwn(input, "badge") && hasOwn(input, "label") && input.label !== DEFAULT_SITE_FONT) {
+    normalized.badge = normalized.label;
+  }
+  return normalized;
+}
+
+export function storedFontPreferences(storage = globalThis.localStorage) {
+  if (!storage) return { ...DEFAULT_FONT_PREFERENCES };
+  try {
+    const raw = storage.getItem(FONT_STORAGE_KEY);
+    if (!raw) return { ...DEFAULT_FONT_PREFERENCES };
+    return normalizeFontPreferences(JSON.parse(raw));
+  } catch {
+    return { ...DEFAULT_FONT_PREFERENCES };
+  }
+}
+
+export function fontStackFor(optionId) {
+  return FONT_OPTIONS[optionId]?.stack || FONT_OPTIONS[DEFAULT_SITE_FONT].stack;
+}
+
+export function applyFontPreferences(preferences = storedFontPreferences(), { doc = globalThis.document } = {}) {
+  const normalized = normalizeFontPreferences(preferences);
+  const root = doc?.documentElement;
+  if (!root) return normalized;
+
+  for (const [target, config] of Object.entries(FONT_TARGETS)) {
+    const optionId = normalized[target];
+    root.style?.setProperty?.(config.cssVar, fontStackFor(optionId));
+    root.setAttribute?.(`data-${config.dataAttr.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`)}`, optionId);
+  }
+
+  // Body text (paragraphs, card titles, long-form prose, editors) always tracks
+  // the primary font rather than being an independent category.
+  root.style?.setProperty?.("--orbit-font-body", fontStackFor(normalized.site));
+  // The only size lever is the Appearance slider; font family no longer changes size.
+  root.style?.setProperty?.("--type-user-scale", String(normalized.userScale));
+  root.setAttribute?.("data-font-site", normalized.site);
+  return normalized;
+}
+
+export function setFontPreferences(preferences, {
+  doc = globalThis.document,
+  storage = globalThis.localStorage,
+  eventTarget = globalThis.window
+} = {}) {
+  const normalized = normalizeFontPreferences(preferences);
+  storage?.setItem?.(FONT_STORAGE_KEY, JSON.stringify(normalized));
+  applyFontPreferences(normalized, { doc });
+  eventTarget?.dispatchEvent?.(new CustomEvent(FONT_CHANGE_EVENT, { detail: { preferences: normalized } }));
+  return normalized;
+}
+
+export function resetFontPreferences(options = {}) {
+  options.storage?.removeItem?.(FONT_STORAGE_KEY);
+  return setFontPreferences(DEFAULT_FONT_PREFERENCES, options);
+}
+
+export function setFontPreference(target, optionId, options = {}) {
+  if (!hasOwn(FONT_TARGETS, target)) throw new Error(`Unknown font target: ${target}`);
+  if (!hasOwn(FONT_OPTIONS, optionId)) throw new Error(`Unknown font option: ${optionId}`);
+  return setFontPreferences({ ...storedFontPreferences(options.storage), [target]: optionId }, options);
+}
+
+// Swap the whole site to a primary font: sets every target plus the `site`
+// driver. Per-target overrides can be applied afterward via setFontPreference.
+export function setSiteFont(optionId, options = {}) {
+  if (!hasOwn(FONT_OPTIONS, optionId)) throw new Error(`Unknown font option: ${optionId}`);
+  const next = { ...storedFontPreferences(options.storage) };
+  for (const target of Object.keys(FONT_TARGETS)) next[target] = optionId;
+  next.site = optionId;
+  return setFontPreferences(next, options);
+}
+
+export function setUserScale(value, options = {}) {
+  return setFontPreferences(
+    { ...storedFontPreferences(options.storage), userScale: clampUserScale(value) },
+    options
+  );
+}
+
+export function applyStoredFontPreferences(options = {}) {
+  return applyFontPreferences(storedFontPreferences(options.storage), options);
+}

package/public/js/format.js

@@ -431,13 +431,3 @@ export function renderLabels(labels = []) {
     </div>
   `;
 }
-
-export function repoLabelFromUrl(repoUrl) {
-  const raw = String(repoUrl || "").trim();
-  if (!raw) return "Not set";
-  const githubHttps = raw.match(/github\.com\/([^/\s]+)\/([^/\s]+?)(?:\.git)?$/i);
-  if (githubHttps) return `${githubHttps[1]}/${githubHttps[2]}`;
-  const githubSsh = raw.match(/github\.com[:/]([^/\s]+)\/([^/\s]+?)(?:\.git)?$/i);
-  if (githubSsh) return `${githubSsh[1]}/${githubSsh[2]}`;
-  return raw;
-}

package/public/js/icons.js

@@ -0,0 +1,16 @@
+export const closeIconSvg = `
+  <svg class="ui-icon ui-icon-x" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+    <path d="M6 6l12 12M18 6 6 18" />
+  </svg>
+`;
+
+/** Trash bin — archive / permanent delete actions (drawer header, card archive controls, toasts). */
+export const trashIconSvg = `
+  <svg class="ui-icon ui-icon-trash" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M3 6h18" />
+    <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+    <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
+    <path d="M10 11v6" />
+    <path d="M14 11v6" />
+  </svg>
+`;

package/public/js/kanban.js

@@ -513,10 +513,13 @@ export function enableKanbanDragScroll() {
 
   kanban.addEventListener("pointerdown", (event) => {
     if (event.button !== 0) return;
+    // Clear stale drag-click suppression on any fresh primary press — even over
+    // a card — so a both-button / two-finger pan that emitted no trailing click
+    // can't swallow the next genuine click.
+    dragged = false;
     if (shouldIgnore(event.target)) return;
 
     active = true;
-    dragged = false;
     pointerId = event.pointerId;
     startX = event.clientX;
     startScroll = kanban.scrollLeft;
@@ -569,4 +572,123 @@ export function enableKanbanDragScroll() {
     },
     true
   );
+
+  // --- Both-button mouse drag + two-finger touch drag -----------------------
+  // A second panning affordance that works ANYWHERE on the board, including
+  // directly over cards. A plain left-click / single-finger tap is left to the
+  // cards (so they still open + drag); holding *both* mouse buttons, or dragging
+  // with *two fingers*, pans the board horizontally without engaging a card.
+  let bothBtnPanning = false;
+  let bothBtnLastX = 0;
+  let suppressContextMenu = false;
+
+  // Pressing the second mouse button (buttons bitmask 1|2 === 3) arms the pan
+  // and cancels any single-button drag already in flight (see `active` above).
+  kanban.addEventListener("pointerdown", (event) => {
+    if (event.pointerType !== "mouse" || (event.buttons & 3) !== 3) return;
+    bothBtnPanning = true;
+    bothBtnLastX = event.clientX;
+    suppressContextMenu = true;
+    active = false; // hand control off from the left-button drag
+    kanban.classList.add("is-grabbing");
+  });
+
+  kanban.addEventListener("pointermove", (event) => {
+    if (event.pointerType !== "mouse") return;
+    const bothDown = (event.buttons & 3) === 3;
+    if (bothDown) {
+      event.preventDefault();
+      if (!bothBtnPanning) {
+        bothBtnPanning = true;
+        bothBtnLastX = event.clientX;
+        suppressContextMenu = true;
+        active = false;
+        kanban.classList.add("is-grabbing");
+        return;
+      }
+      const delta = event.clientX - bothBtnLastX;
+      if (delta) {
+        kanban.scrollLeft -= delta;
+        bothBtnLastX = event.clientX;
+        dragged = true; // eat the trailing synthetic click
+      }
+    } else if (bothBtnPanning) {
+      bothBtnPanning = false;
+      kanban.classList.remove("is-grabbing");
+    }
+  });
+
+  kanban.addEventListener("pointerup", (event) => {
+    if (event.pointerType === "mouse" && bothBtnPanning && (event.buttons & 3) !== 3) {
+      bothBtnPanning = false;
+      kanban.classList.remove("is-grabbing");
+    }
+  });
+
+  // Right-click handling on the board:
+  //  - after a both-button pan, swallow the trailing context menu;
+  //  - otherwise suppress the native browser menu everywhere EXCEPT over a card,
+  //    which owns its own context menu (see bindCardContextMenuDelegated).
+  kanban.addEventListener("contextmenu", (event) => {
+    if (suppressContextMenu) {
+      event.preventDefault();
+      event.stopPropagation();
+      suppressContextMenu = false;
+      return;
+    }
+    const onCard = event.target instanceof Element && event.target.closest(".card");
+    if (!onCard) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  });
+
+  // Two-finger touch pan. Touch events (not pointer events) are used here so we
+  // can reliably preventDefault the browser's native two-finger scroll/zoom.
+  let touchPanning = false;
+  let touchPanLastX = 0;
+  const twoFingerCentroidX = (touches) => (touches[0].clientX + touches[1].clientX) / 2;
+
+  kanban.addEventListener(
+    "touchstart",
+    (event) => {
+      // Fresh gesture — clear any leftover drag-click suppression so a real tap
+      // is never swallowed when the prior two-finger pan emitted no click.
+      dragged = false;
+      if (event.touches.length === 2) {
+        touchPanning = true;
+        touchPanLastX = twoFingerCentroidX(event.touches);
+        active = false; // cancel any single-finger drag that started
+        kanban.classList.add("is-grabbing");
+      } else {
+        touchPanning = false;
+      }
+    },
+    { passive: true }
+  );
+
+  kanban.addEventListener(
+    "touchmove",
+    (event) => {
+      if (!touchPanning || event.touches.length !== 2) return;
+      const x = twoFingerCentroidX(event.touches);
+      const delta = x - touchPanLastX;
+      if (delta) {
+        event.preventDefault();
+        kanban.scrollLeft -= delta;
+        touchPanLastX = x;
+        dragged = true; // eat the trailing tap so a card doesn't open
+      }
+    },
+    { passive: false }
+  );
+
+  const endTouchPan = (event) => {
+    if (event.touches.length < 2 && touchPanning) {
+      touchPanning = false;
+      kanban.classList.remove("is-grabbing");
+    }
+  };
+  kanban.addEventListener("touchend", endTouchPan, { passive: true });
+  kanban.addEventListener("touchcancel", endTouchPan, { passive: true });
 }