@lostgradient/cinder 0.1.0

package/dist/components/kanban-board/index.js

@@ -0,0 +1,1474 @@
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __toESM = (mod, isNodeMode, target) => {
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: () => mod[key],
+        enumerable: true
+      });
+  return to;
+};
+var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: (newValue) => all[name] = () => newValue
+    });
+};
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/components/kanban-board/index.ts
+import"@lostgradient/cinder/kanban-board/styles";
+
+// src/components/kanban-board/kanban-board.svelte
+import"svelte/internal/disclose-version";
+import * as $4 from "svelte/internal/client";
+
+// src/utilities/class-names.ts
+function classNames(...parts) {
+  return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
+}
+
+// ../../node_modules/esm-env/true.js
+var true_default = true;
+// src/utilities/dev-warn.ts
+function devWarn(message, ...args) {
+  if (!true_default)
+    return;
+  console.warn(message, ...args);
+}
+
+// src/utilities/sortable-controller.svelte.ts
+import * as $ from "svelte/internal/client";
+import { createContext } from "svelte";
+var [getSortableContext, setSortableContext] = createContext();
+var defaultAnnouncements = {
+  lifted: (itemLabel, position, total) => `${itemLabel}, lifted. Current position ${position} of ${total}. Use arrow keys to move. Space to drop, Escape to cancel.`,
+  moved: (itemLabel, position, total) => `${itemLabel}, moved to position ${position} of ${total}.`,
+  dropped: (itemLabel, position, total) => `${itemLabel}, dropped at position ${position} of ${total}.`,
+  cancelled: (itemLabel) => `Reorder cancelled. ${itemLabel} returned to original position.`
+};
+
+class SortableController {
+  #phase = $.state("idle");
+  get phase() {
+    return $.get(this.#phase);
+  }
+  set phase(value) {
+    $.set(this.#phase, value, true);
+  }
+  #liftedKey = $.state(null);
+  get liftedKey() {
+    return $.get(this.#liftedKey);
+  }
+  set liftedKey(value) {
+    $.set(this.#liftedKey, value, true);
+  }
+  #liftedLabel = $.state("");
+  get liftedLabel() {
+    return $.get(this.#liftedLabel);
+  }
+  set liftedLabel(value) {
+    $.set(this.#liftedLabel, value, true);
+  }
+  #liftedFrom = $.state(0);
+  get liftedFrom() {
+    return $.get(this.#liftedFrom);
+  }
+  set liftedFrom(value) {
+    $.set(this.#liftedFrom, value, true);
+  }
+  #liftedTo = $.state(0);
+  get liftedTo() {
+    return $.get(this.#liftedTo);
+  }
+  set liftedTo(value) {
+    $.set(this.#liftedTo, value, true);
+  }
+  #announce;
+  #announcements;
+  constructor(options) {
+    this.#announce = options.announce;
+    this.#announcements = { ...defaultAnnouncements, ...options.announcements };
+  }
+  lift(key, fromIndex, itemLabel, total) {
+    if (this.phase === "lifted")
+      return;
+    this.phase = "lifted";
+    this.liftedKey = key;
+    this.liftedLabel = itemLabel;
+    this.liftedFrom = fromIndex;
+    this.liftedTo = fromIndex;
+    this.#announce(this.#announcements.lifted(itemLabel, fromIndex + 1, total));
+  }
+  move(toIndex, itemLabel, total, options = {}) {
+    if (this.phase !== "lifted")
+      return false;
+    const clamped = Math.max(0, Math.min(total - 1, toIndex));
+    if (clamped === this.liftedTo)
+      return false;
+    this.liftedTo = clamped;
+    if (options.announce !== false) {
+      this.#announce(this.#announcements.moved(itemLabel, clamped + 1, total));
+    }
+    return true;
+  }
+  drop(items, itemLabel) {
+    if (this.phase !== "lifted" || this.liftedKey === null)
+      return null;
+    const fromIndex = this.liftedFrom;
+    const toIndex = this.liftedTo;
+    const itemKey = this.liftedKey;
+    this.#announce(this.#announcements.dropped(itemLabel, toIndex + 1, items.length));
+    this.#reset();
+    if (fromIndex === toIndex)
+      return null;
+    if (fromIndex < 0 || fromIndex >= items.length || toIndex < 0 || toIndex >= items.length) {
+      return null;
+    }
+    const nextItems = reorder(items, fromIndex, toIndex);
+    return { nextItems, change: { itemKey, fromIndex, toIndex } };
+  }
+  completeDrop(itemLabel, total) {
+    if (this.phase !== "lifted")
+      return;
+    const boundedTotal = Math.max(1, total);
+    const position = Math.max(1, Math.min(this.liftedTo + 1, boundedTotal));
+    this.#announce(this.#announcements.dropped(itemLabel, position, boundedTotal));
+    this.#reset();
+  }
+  cancel(itemLabel) {
+    if (this.phase !== "lifted")
+      return;
+    this.#announce(this.#announcements.cancelled(itemLabel ?? this.liftedLabel));
+    this.#reset();
+  }
+  reconcileLiftedKey(items, getKey) {
+    if (this.phase !== "lifted" || this.liftedKey === null)
+      return;
+    const currentIndex = items.findIndex((it) => getKey(it) === this.liftedKey);
+    if (currentIndex < 0) {
+      this.#announce(this.#announcements.cancelled(this.liftedLabel));
+      this.#reset();
+      return;
+    }
+    this.liftedTo = Math.max(0, Math.min(items.length - 1, this.liftedTo));
+    if (currentIndex !== this.liftedFrom) {
+      this.liftedFrom = currentIndex;
+    }
+  }
+  #reset() {
+    this.phase = "idle";
+    this.liftedKey = null;
+    this.liftedLabel = "";
+    this.liftedFrom = 0;
+    this.liftedTo = 0;
+  }
+}
+function reorder(items, fromIndex, toIndex) {
+  const result = [...items];
+  const spliced = result.splice(fromIndex, 1);
+  if (spliced.length === 0)
+    return result;
+  result.splice(toIndex, 0, ...spliced);
+  return result;
+}
+
+// src/utilities/use-announcer.svelte.ts
+import * as $2 from "svelte/internal/client";
+function useAnnouncer(options) {
+  const { clearDelay = 1000, debounceMs = 0 } = options ?? {};
+  let message = $2.state("");
+  let debounceTimeout = null;
+  let setMessageTimeout = null;
+  let autoClearTimeout = null;
+  function setMessage(text) {
+    if (setMessageTimeout) {
+      globalThis.clearTimeout(setMessageTimeout);
+      setMessageTimeout = null;
+    }
+    if (autoClearTimeout) {
+      globalThis.clearTimeout(autoClearTimeout);
+      autoClearTimeout = null;
+    }
+    $2.set(message, "");
+    setMessageTimeout = globalThis.setTimeout(() => {
+      setMessageTimeout = null;
+      $2.set(message, text, true);
+      autoClearTimeout = globalThis.setTimeout(() => {
+        $2.set(message, "");
+        autoClearTimeout = null;
+      }, clearDelay);
+    }, 0);
+  }
+  function announce(text) {
+    if (debounceMs > 0) {
+      if (debounceTimeout) {
+        globalThis.clearTimeout(debounceTimeout);
+      }
+      debounceTimeout = globalThis.setTimeout(() => {
+        debounceTimeout = null;
+        setMessage(text);
+      }, debounceMs);
+    } else {
+      setMessage(text);
+    }
+  }
+  function clear() {
+    if (debounceTimeout) {
+      globalThis.clearTimeout(debounceTimeout);
+      debounceTimeout = null;
+    }
+    if (setMessageTimeout) {
+      globalThis.clearTimeout(setMessageTimeout);
+      setMessageTimeout = null;
+    }
+    if (autoClearTimeout) {
+      globalThis.clearTimeout(autoClearTimeout);
+      autoClearTimeout = null;
+    }
+    $2.set(message, "");
+  }
+  $2.user_effect(() => {
+    return () => {
+      if (debounceTimeout) {
+        globalThis.clearTimeout(debounceTimeout);
+        debounceTimeout = null;
+      }
+      if (setMessageTimeout) {
+        globalThis.clearTimeout(setMessageTimeout);
+        setMessageTimeout = null;
+      }
+      if (autoClearTimeout) {
+        globalThis.clearTimeout(autoClearTimeout);
+        autoClearTimeout = null;
+      }
+    };
+  });
+  function destroy() {
+    clear();
+  }
+  return {
+    get message() {
+      return $2.get(message);
+    },
+    announce,
+    clear,
+    destroy
+  };
+}
+
+// src/components/_sortable-item.svelte
+import"svelte/internal/disclose-version";
+import * as $3 from "svelte/internal/client";
+var root_2 = $3.from_svg(`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" focusable="false"><path d="M2 4h12v1.5H2zM2 7.25h12v1.5H2zM2 10.5h12v1.5H2z"></path></svg>`);
+var root = $3.from_html(`<li data-sortable-row="" aria-roledescription="sortable item"><!> <button type="button" class="cinder-sortable-handle"><!></button></li>`);
+function _sortable_item($$anchor, $$props) {
+  const rowId = $3.props_id();
+  $3.push($$props, true);
+  const context = getSortableContext();
+  let handleEl = $3.state(null);
+  let rowEl = $3.state(null);
+  let pointerActive = false;
+  let pointerId = null;
+  let moveRafHandle = null;
+  let scrollRafHandle = null;
+  let latestPointerY = 0;
+  let latestPointerX = 0;
+  let listEl = null;
+  let windowPointerListenersActive = false;
+  let previewX = $3.state(0);
+  let previewY = $3.state(0);
+  let isDraggingWithPointer = $3.state(false);
+  let previewWidth = 0;
+  let previewHeight = 0;
+  let previewPortalEl = null;
+  const isLifted = $3.derived(() => context.controller.phase === "lifted" && context.controller.liftedKey === $$props.itemKey);
+  const isDropTarget = $3.derived(() => context.controller.phase === "lifted" && context.controller.liftedTo === $$props.index);
+  const itemContext = {
+    get isLifted() {
+      return $3.get(isLifted);
+    },
+    get isDropTarget() {
+      return $3.get(isDropTarget);
+    },
+    get visualIndex() {
+      return $$props.index;
+    },
+    get total() {
+      return $$props.total;
+    }
+  };
+  const handleLabel = $3.derived(() => $$props.formatHandleLabel($$props.itemLabel));
+  let grabOffsetX = 0;
+  let grabOffsetY = 0;
+  function createPreviewPortal(pointerX, pointerY) {
+    if (typeof document === "undefined")
+      return;
+    if (previewPortalEl)
+      return;
+    if (!$3.get(rowEl))
+      return;
+    const rect = $3.get(rowEl).getBoundingClientRect();
+    previewWidth = rect.width;
+    previewHeight = rect.height;
+    grabOffsetX = pointerX - rect.left;
+    grabOffsetY = pointerY - rect.top;
+    const portal = document.createElement("div");
+    portal.setAttribute("data-cinder-drag-preview", "");
+    portal.setAttribute("aria-hidden", "true");
+    portal.setAttribute("inert", "");
+    portal.className = "cinder-sortable-drag-preview";
+    const clone = $3.get(rowEl).cloneNode(true);
+    clone.removeAttribute("data-sortable-row");
+    clone.removeAttribute("data-key");
+    clone.removeAttribute("data-key-type");
+    clone.removeAttribute("data-row-id");
+    clone.removeAttribute("id");
+    clone.querySelectorAll("[id]").forEach((descendant) => {
+      descendant.removeAttribute("id");
+    });
+    portal.appendChild(clone);
+    portal.style.setProperty("--preview-width", `${previewWidth}px`);
+    portal.style.setProperty("--preview-height", `${previewHeight}px`);
+    portal.style.setProperty("--preview-left", `${rect.left}px`);
+    portal.style.setProperty("--preview-top", `${rect.top}px`);
+    portal.style.setProperty("--preview-dx", "0px");
+    portal.style.setProperty("--preview-dy", "0px");
+    document.body.appendChild(portal);
+    previewPortalEl = portal;
+    $3.set(isDraggingWithPointer, true);
+  }
+  function updatePreviewPosition(pointerX, pointerY) {
+    if (!previewPortalEl || !$3.get(rowEl))
+      return;
+    if (typeof document === "undefined")
+      return;
+    const rect = $3.get(rowEl).getBoundingClientRect();
+    const dx = pointerX - grabOffsetX - rect.left;
+    const dy = pointerY - grabOffsetY - rect.top;
+    previewPortalEl.style.setProperty("--preview-left", `${rect.left}px`);
+    previewPortalEl.style.setProperty("--preview-top", `${rect.top}px`);
+    previewPortalEl.style.setProperty("--preview-dx", `${dx}px`);
+    previewPortalEl.style.setProperty("--preview-dy", `${dy}px`);
+    $3.set(previewX, pointerX, true);
+    $3.set(previewY, pointerY, true);
+  }
+  function destroyPreviewPortal() {
+    if (moveRafHandle !== null) {
+      cancelAnimationFrame(moveRafHandle);
+      moveRafHandle = null;
+    }
+    if (previewPortalEl) {
+      previewPortalEl.remove();
+      previewPortalEl = null;
+    }
+    $3.set(isDraggingWithPointer, false);
+  }
+  function addWindowPointerListeners() {
+    if (windowPointerListenersActive || typeof window === "undefined")
+      return;
+    window.addEventListener("pointerup", handleWindowPointerUp);
+    window.addEventListener("pointercancel", handleWindowPointerCancel);
+    windowPointerListenersActive = true;
+  }
+  function removeWindowPointerListeners() {
+    if (!windowPointerListenersActive || typeof window === "undefined")
+      return;
+    window.removeEventListener("pointerup", handleWindowPointerUp);
+    window.removeEventListener("pointercancel", handleWindowPointerCancel);
+    windowPointerListenersActive = false;
+  }
+  function endPointerSession(reason) {
+    if (reason === "drop") {
+      if (moveRafHandle !== null) {
+        cancelAnimationFrame(moveRafHandle);
+        moveRafHandle = null;
+      }
+      recomputeTarget();
+      updatePreviewPosition(latestPointerX, latestPointerY);
+    } else {
+      if (moveRafHandle !== null) {
+        cancelAnimationFrame(moveRafHandle);
+        moveRafHandle = null;
+      }
+    }
+    if (scrollRafHandle !== null) {
+      cancelAnimationFrame(scrollRafHandle);
+      scrollRafHandle = null;
+    }
+    if (pointerId !== null && $3.get(handleEl)?.hasPointerCapture(pointerId)) {
+      try {
+        $3.get(handleEl).releasePointerCapture(pointerId);
+      } catch {}
+    }
+    destroyPreviewPortal();
+    removeWindowPointerListeners();
+    pointerActive = false;
+    pointerId = null;
+    listEl = null;
+    if (reason === "drop") {
+      context.commitDrop($$props.itemKey, $$props.itemLabel);
+    } else {
+      context.cancel($$props.itemLabel);
+    }
+  }
+  function scheduleAutoScroll() {
+    if (!pointerActive)
+      return;
+    const SCROLL_ZONE = 32;
+    const SCROLL_SPEED = 8;
+    const viewportHeight = window.innerHeight;
+    scrollRafHandle = requestAnimationFrame(() => {
+      scrollRafHandle = null;
+      if (!pointerActive)
+        return;
+      if (latestPointerY < SCROLL_ZONE) {
+        window.scrollBy(0, -SCROLL_SPEED);
+        recomputeTarget();
+        scheduleAutoScroll();
+      } else if (latestPointerY > viewportHeight - SCROLL_ZONE) {
+        window.scrollBy(0, SCROLL_SPEED);
+        recomputeTarget();
+        scheduleAutoScroll();
+      }
+    });
+  }
+  function recomputeTarget() {
+    if (!pointerActive)
+      return;
+    if (context.getPointerTarget) {
+      const target2 = context.getPointerTarget({
+        activeKey: $$props.itemKey,
+        pointerX: latestPointerX,
+        pointerY: latestPointerY,
+        itemLabel: $$props.itemLabel
+      });
+      if (target2)
+        context.move(target2.index, $$props.itemLabel, target2.total);
+      return;
+    }
+    if (!listEl)
+      return;
+    const rows = Array.from(listEl.querySelectorAll(":scope > [data-sortable-row]"));
+    const nonLifted = rows.filter((r) => r.dataset["rowId"] !== String(rowId));
+    const midpoints = nonLifted.map((r) => {
+      const rect = r.getBoundingClientRect();
+      return rect.top + rect.height / 2;
+    });
+    const insertionIndex = midpoints.filter((m) => m < latestPointerY).length;
+    const target = Math.max(0, Math.min(insertionIndex, $$props.total - 1));
+    context.move(target, $$props.itemLabel, $$props.total);
+  }
+  function handlePointerDown(event2) {
+    if (pointerActive)
+      return;
+    if (event2.button !== 0 && event2.pointerType === "mouse")
+      return;
+    if (!$3.get(handleEl))
+      return;
+    listEl = $3.get(handleEl).closest(".cinder-sortable-list");
+    event2.preventDefault();
+    pointerActive = true;
+    pointerId = event2.pointerId;
+    latestPointerX = event2.clientX;
+    latestPointerY = event2.clientY;
+    $3.get(handleEl).setPointerCapture(event2.pointerId);
+    context.lift($$props.itemKey, $$props.index, $$props.itemLabel, $$props.total);
+    if (context.controller.phase !== "lifted" || context.controller.liftedKey !== $$props.itemKey) {
+      try {
+        $3.get(handleEl).releasePointerCapture(event2.pointerId);
+      } catch {}
+      pointerActive = false;
+      pointerId = null;
+      listEl = null;
+      return;
+    }
+    createPreviewPortal(event2.clientX, event2.clientY);
+    updatePreviewPosition(event2.clientX, event2.clientY);
+    addWindowPointerListeners();
+    scheduleAutoScroll();
+  }
+  function handlePointerMove(event2) {
+    if (!pointerActive)
+      return;
+    latestPointerX = event2.clientX;
+    latestPointerY = event2.clientY;
+    if (moveRafHandle === null) {
+      moveRafHandle = requestAnimationFrame(() => {
+        moveRafHandle = null;
+        recomputeTarget();
+        updatePreviewPosition(latestPointerX, latestPointerY);
+      });
+    }
+    if (scrollRafHandle === null) {
+      scheduleAutoScroll();
+    }
+  }
+  function handlePointerUp(_event) {
+    if (!pointerActive)
+      return;
+    endPointerSession("drop");
+  }
+  function handlePointerCancel(_event) {
+    if (!pointerActive)
+      return;
+    endPointerSession("cancel");
+  }
+  function handleWindowPointerUp(event2) {
+    if (!pointerActive || pointerId !== null && event2.pointerId !== pointerId)
+      return;
+    endPointerSession("drop");
+  }
+  function handleWindowPointerCancel(event2) {
+    if (!pointerActive || pointerId !== null && event2.pointerId !== pointerId)
+      return;
+    endPointerSession("cancel");
+  }
+  function handleKeyDown(event2) {
+    const { key } = event2;
+    if (!$3.get(isLifted)) {
+      if (key === " " || key === "Enter") {
+        event2.preventDefault();
+        context.lift($$props.itemKey, $$props.index, $$props.itemLabel, $$props.total);
+      }
+      return;
+    }
+    switch (key) {
+      case "ArrowLeft":
+      case "ArrowRight":
+        if (context.handleLiftedKeydown?.({
+          event: event2,
+          itemKey: $$props.itemKey,
+          itemLabel: $$props.itemLabel,
+          index: $$props.index,
+          total: $$props.total
+        }) === true) {
+          return;
+        }
+        break;
+      case " ":
+      case "Enter":
+        event2.preventDefault();
+        if (pointerActive) {
+          endPointerSession("drop");
+        } else {
+          context.commitDrop($$props.itemKey, $$props.itemLabel);
+        }
+        break;
+      case "ArrowDown":
+        event2.preventDefault();
+        context.move(context.controller.liftedTo + 1, $$props.itemLabel, $$props.total);
+        break;
+      case "ArrowUp":
+        event2.preventDefault();
+        context.move(context.controller.liftedTo - 1, $$props.itemLabel, $$props.total);
+        break;
+      case "Home":
+        event2.preventDefault();
+        context.move(0, $$props.itemLabel, $$props.total);
+        break;
+      case "End":
+        event2.preventDefault();
+        context.move($$props.total - 1, $$props.itemLabel, $$props.total);
+        break;
+      case "Escape":
+        event2.preventDefault();
+        if (pointerActive) {
+          endPointerSession("cancel");
+        } else {
+          context.cancel($$props.itemLabel);
+        }
+        break;
+      case "Tab":
+        if (pointerActive) {
+          endPointerSession("cancel");
+        } else {
+          context.cancel($$props.itemLabel);
+        }
+        break;
+    }
+  }
+  $3.user_effect(() => {
+    const phase = context.controller.phase;
+    if (!pointerActive || phase !== "idle")
+      return;
+    if (moveRafHandle !== null) {
+      cancelAnimationFrame(moveRafHandle);
+      moveRafHandle = null;
+    }
+    if (scrollRafHandle !== null) {
+      cancelAnimationFrame(scrollRafHandle);
+      scrollRafHandle = null;
+    }
+    if (pointerId !== null && $3.get(handleEl)?.hasPointerCapture(pointerId)) {
+      try {
+        $3.get(handleEl).releasePointerCapture(pointerId);
+      } catch {}
+    }
+    destroyPreviewPortal();
+    removeWindowPointerListeners();
+    pointerActive = false;
+    pointerId = null;
+    listEl = null;
+  });
+  $3.user_effect(() => {
+    return () => {
+      if (!pointerActive)
+        return;
+      if (context.controller.phase === "lifted" && context.controller.liftedKey === $$props.itemKey) {
+        endPointerSession("cancel");
+      } else {
+        if (moveRafHandle !== null) {
+          cancelAnimationFrame(moveRafHandle);
+          moveRafHandle = null;
+        }
+        if (scrollRafHandle !== null) {
+          cancelAnimationFrame(scrollRafHandle);
+          scrollRafHandle = null;
+        }
+        if (pointerId !== null && $3.get(handleEl)?.hasPointerCapture(pointerId)) {
+          try {
+            $3.get(handleEl).releasePointerCapture(pointerId);
+          } catch {}
+        }
+        destroyPreviewPortal();
+        removeWindowPointerListeners();
+        pointerActive = false;
+        pointerId = null;
+        listEl = null;
+      }
+    };
+  });
+  var li = root();
+  var node = $3.child(li);
+  $3.snippet(node, () => $$props.children, () => itemContext);
+  var button = $3.sibling(node, 2);
+  var node_1 = $3.child(button);
+  {
+    var consequent = ($$anchor2) => {
+      var fragment = $3.comment();
+      var node_2 = $3.first_child(fragment);
+      $3.snippet(node_2, () => $$props.handle, () => ({ pressed: $3.get(isLifted), label: $3.get(handleLabel) }));
+      $3.append($$anchor2, fragment);
+    };
+    var alternate = ($$anchor2) => {
+      var svg = root_2();
+      $3.append($$anchor2, svg);
+    };
+    $3.if(node_1, ($$render) => {
+      if ($$props.handle)
+        $$render(consequent);
+      else
+        $$render(alternate, -1);
+    });
+  }
+  $3.reset(button);
+  $3.bind_this(button, ($$value) => $3.set(handleEl, $$value), () => $3.get(handleEl));
+  $3.reset(li);
+  $3.bind_this(li, ($$value) => $3.set(rowEl, $$value), () => $3.get(rowEl));
+  $3.template_effect(($0) => {
+    $3.set_attribute(li, "data-key", $$props.itemKey);
+    $3.set_attribute(li, "data-key-type", typeof $$props.itemKey);
+    $3.set_attribute(li, "data-row-id", rowId);
+    $3.set_attribute(li, "data-preview-x", $3.get(isDraggingWithPointer) ? $3.get(previewX) : undefined);
+    $3.set_attribute(li, "data-preview-y", $3.get(isDraggingWithPointer) ? $3.get(previewY) : undefined);
+    $3.set_class(li, 1, $0);
+    $3.set_attribute(button, "aria-label", $3.get(handleLabel));
+    $3.set_attribute(button, "aria-pressed", $3.get(isLifted));
+    $3.set_attribute(button, "aria-describedby", $$props.instructionsId);
+  }, [
+    () => $3.clsx(classNames("cinder-sortable-item", $3.get(isLifted) && $3.get(isDraggingWithPointer) && "cinder-sortable-item--placeholder", $3.get(isLifted) && !$3.get(isDraggingWithPointer) && "cinder-sortable-item--lifted", !$3.get(isLifted) && context.controller.phase === "lifted" && "cinder-sortable-item--shifting", $$props.class))
+  ]);
+  $3.delegated("keydown", button, handleKeyDown);
+  $3.delegated("pointerdown", button, handlePointerDown);
+  $3.delegated("pointermove", button, handlePointerMove);
+  $3.delegated("pointerup", button, handlePointerUp);
+  $3.event("pointercancel", button, handlePointerCancel);
+  $3.append($$anchor, li);
+  $3.pop();
+}
+$3.delegate(["keydown", "pointerdown", "pointermove", "pointerup"]);
+
+// src/components/kanban-board/kanban-board-helpers.ts
+function validateKanbanBoardKeys(columns, getCardKey) {
+  const columnKeys = new Set;
+  const duplicateColumnKeys = new Set;
+  const cardKeys = new Set;
+  const duplicateCardKeys = new Set;
+  for (const column of columns) {
+    if (columnKeys.has(column.id))
+      duplicateColumnKeys.add(column.id);
+    columnKeys.add(column.id);
+    for (const card of column.cards) {
+      const cardKey = getCardKey(card);
+      if (cardKeys.has(cardKey))
+        duplicateCardKeys.add(cardKey);
+      cardKeys.add(cardKey);
+    }
+  }
+  return {
+    valid: duplicateColumnKeys.size === 0 && duplicateCardKeys.size === 0,
+    duplicateColumnKeys,
+    duplicateCardKeys
+  };
+}
+function findCard(columns, getCardKey, cardKey) {
+  for (const [columnIndex, column] of columns.entries()) {
+    const cardIndex = column.cards.findIndex((card2) => getCardKey(card2) === cardKey);
+    const card = column.cards[cardIndex];
+    if (cardIndex >= 0 && card !== undefined) {
+      return {
+        card,
+        cardKey,
+        column,
+        columnIndex,
+        cardIndex
+      };
+    }
+  }
+  return null;
+}
+function buildCardLocationMap(columns, getCardKey) {
+  const locations = new Map;
+  for (const [columnIndex, column] of columns.entries()) {
+    column.cards.forEach((card, cardIndex) => {
+      const cardKey = getCardKey(card);
+      if (locations.has(cardKey))
+        return;
+      locations.set(cardKey, { card, cardKey, column, columnIndex, cardIndex });
+    });
+  }
+  return locations;
+}
+function moveKanbanCard(columns, getCardKey, cardKey, target) {
+  const located = findCard(columns, getCardKey, cardKey);
+  if (!located)
+    return null;
+  const targetColumn = columns[target.columnIndex];
+  if (!targetColumn || targetColumn.collapsed)
+    return null;
+  const fromColumn = located.column;
+  const targetLength = target.columnIndex === located.columnIndex ? fromColumn.cards.length : targetColumn.cards.length;
+  const toIndex = Math.max(0, Math.min(target.cardIndex, Math.max(0, targetLength - 1)));
+  const crossColumnToIndex = Math.max(0, Math.min(target.cardIndex, targetColumn.cards.length));
+  if (target.columnIndex === located.columnIndex) {
+    if (located.cardIndex === toIndex)
+      return null;
+    const nextColumns2 = columns.map((column, index) => index === located.columnIndex ? { ...column, cards: reorder(column.cards, located.cardIndex, toIndex) } : column);
+    return {
+      nextColumns: nextColumns2,
+      change: {
+        type: "card",
+        cardKey,
+        fromColumnKey: fromColumn.id,
+        toColumnKey: fromColumn.id,
+        fromIndex: located.cardIndex,
+        toIndex
+      }
+    };
+  }
+  const nextColumns = columns.map((column, index) => {
+    if (index === located.columnIndex) {
+      return {
+        ...column,
+        cards: column.cards.filter((_, cardIndex) => cardIndex !== located.cardIndex)
+      };
+    }
+    if (index === target.columnIndex) {
+      const cards = [...column.cards];
+      cards.splice(crossColumnToIndex, 0, located.card);
+      return { ...column, cards };
+    }
+    return column;
+  });
+  return {
+    nextColumns,
+    change: {
+      type: "card",
+      cardKey,
+      fromColumnKey: fromColumn.id,
+      toColumnKey: targetColumn.id,
+      fromIndex: located.cardIndex,
+      toIndex: crossColumnToIndex
+    }
+  };
+}
+function moveKanbanColumn(columns, columnKey, toIndex) {
+  const fromIndex = columns.findIndex((column) => column.id === columnKey);
+  if (fromIndex < 0)
+    return null;
+  const clamped = Math.max(0, Math.min(toIndex, columns.length - 1));
+  if (fromIndex === clamped)
+    return null;
+  return {
+    nextColumns: reorder(columns, fromIndex, clamped),
+    change: { type: "column", columnKey, fromIndex, toIndex: clamped }
+  };
+}
+function toggleKanbanColumn(columns, columnKey) {
+  const columnIndex = columns.findIndex((column2) => column2.id === columnKey);
+  const column = columns[columnIndex];
+  if (columnIndex < 0 || column === undefined)
+    return null;
+  const collapsed = !column.collapsed;
+  return {
+    nextColumns: columns.map((current, index) => index === columnIndex ? { ...current, collapsed } : current),
+    change: { type: "collapse", columnKey, collapsed }
+  };
+}
+function findNextVisibleColumn(columns, fromColumnIndex, direction) {
+  for (let index = fromColumnIndex + direction;index >= 0 && index < columns.length; index += direction) {
+    if (!columns[index]?.collapsed)
+      return index;
+  }
+  return null;
+}
+
+// src/components/kanban-board/kanban-board.svelte
+var root_22 = $4.from_html(`<button type="button" class="cinder-kanban-board__column-handle"><svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M2 4h12v1.5H2zM2 7.25h12v1.5H2zM2 10.5h12v1.5H2z"></path></svg></button>`);
+var root_5 = $4.from_html(`<div class="cinder-kanban-board__column-actions"><!></div>`);
+var root_6 = $4.from_html(`<button type="button" class="cinder-kanban-board__collapse"> </button>`);
+var root_9 = $4.from_html(`<li class="cinder-kanban-board__card cinder-kanban-board__drop-placeholder cinder-sortable-item--placeholder" role="presentation" aria-hidden="true"></li>`);
+var root_10 = $4.from_html(`<div class="cinder-kanban-board__card-content"><!></div>`);
+var root_8 = $4.from_html(`<!>   <!>`, 1);
+var root_11 = $4.from_html(`<li class="cinder-kanban-board__card cinder-kanban-board__drop-placeholder cinder-sortable-item--placeholder" role="presentation" aria-hidden="true"></li>`);
+var root_12 = $4.from_html(`<li class="cinder-kanban-board__empty"><!></li>`);
+var root_7 = $4.from_html(`<ul class="cinder-kanban-board__cards cinder-sortable-list" role="list"><!> <!> <!></ul>`);
+var root_1 = $4.from_html(`<section class="cinder-kanban-board__column" role="listitem"><header class="cinder-kanban-board__column-header"><!> <div class="cinder-kanban-board__column-title"><!></div> <!> <!></header> <!></section>`);
+var root2 = $4.from_html(`<section><p class="cinder-sr-only">Press Space to lift a card, arrow keys to move it, Space to drop, and Escape to cancel.</p> <p class="cinder-sr-only">Press Space to lift a column, Left and Right arrows to move it, Space to drop, and Escape to
+    cancel.</p> <div class="cinder-kanban-board__columns" role="list"></div></section> <div role="alert" aria-atomic="true" class="cinder-sr-only"> </div>`, 1);
+function Kanban_board($$anchor, $$props) {
+  const baseId = $4.props_id();
+  $4.push($$props, true);
+  let collapsible = $4.prop($$props, "collapsible", 3, false), reorderColumns = $4.prop($$props, "reorderColumns", 3, true);
+  const announcer = useAnnouncer({ clearDelay: 5000 });
+  const cardController = new SortableController({
+    announce: (message) => announcer.announce(message),
+    announcements: {
+      lifted: (itemLabel, position, total) => `${itemLabel} lifted from position ${position} of ${total}. Use arrow keys to move, Space to drop, Escape to cancel.`,
+      moved: (itemLabel, position, total) => `${itemLabel} moved to position ${position} of ${total}.`,
+      dropped: (itemLabel, position, total) => `${itemLabel} dropped at position ${position} of ${total}.`,
+      cancelled: (itemLabel) => `${itemLabel} move cancelled.`
+    }
+  });
+  const instructionsId = `${baseId}-instructions`;
+  const columnInstructionsId = `${baseId}-column-instructions`;
+  let columnsElement = $4.state(null);
+  let cardTarget = $4.state(null);
+  let pointerColumnIndex = $4.state(null);
+  let columnLiftedKey = $4.state(null);
+  let columnTargetIndex = $4.state(null);
+  let crossColumnPlaceholderBlockSize = $4.state(null);
+  let lastInvalidKeyWarning = "";
+  const keyValidation = $4.derived(() => validateKanbanBoardKeys($$props.columns, $$props.getCardKey));
+  const invalidKeys = $4.derived(() => !$4.get(keyValidation).valid);
+  const cardLocations = $4.derived(() => buildCardLocationMap($$props.columns, $$props.getCardKey));
+  const visualColumns = $4.derived(() => {
+    if (cardController.phase !== "lifted" || cardController.liftedKey === null || !$4.get(cardTarget)) {
+      return $$props.columns;
+    }
+    const located = findCard($$props.columns, $$props.getCardKey, cardController.liftedKey);
+    if (!located || located.columnIndex !== $4.get(cardTarget).columnIndex)
+      return $$props.columns;
+    return moveKanbanCard($$props.columns, $$props.getCardKey, cardController.liftedKey, $4.get(cardTarget))?.nextColumns ?? $$props.columns;
+  });
+  const crossColumnCardTarget = $4.derived(() => {
+    if (cardController.phase !== "lifted" || cardController.liftedKey === null || !$4.get(cardTarget)) {
+      return null;
+    }
+    const located = findCard($$props.columns, $$props.getCardKey, cardController.liftedKey);
+    const targetColumn = $$props.columns[$4.get(cardTarget).columnIndex];
+    if (!located || !targetColumn || targetColumn.collapsed)
+      return null;
+    if (located.columnIndex === $4.get(cardTarget).columnIndex)
+      return null;
+    return {
+      columnIndex: $4.get(cardTarget).columnIndex,
+      cardIndex: Math.max(0, Math.min($4.get(cardTarget).cardIndex, targetColumn.cards.length))
+    };
+  });
+  const crossColumnPlaceholderStyle = $4.derived(() => $4.get(crossColumnPlaceholderBlockSize) ? `--cinder-kanban-board-drop-placeholder-block-size: ${$4.get(crossColumnPlaceholderBlockSize)};` : undefined);
+  $4.user_effect(() => {
+    if (!$4.get(invalidKeys)) {
+      lastInvalidKeyWarning = "";
+      return;
+    }
+    const duplicateColumns = [...$4.get(keyValidation).duplicateColumnKeys].join(", ");
+    const duplicateCards = [...$4.get(keyValidation).duplicateCardKeys].join(", ");
+    const warningSignature = `${duplicateColumns}|${duplicateCards}`;
+    if (warningSignature === lastInvalidKeyWarning)
+      return;
+    lastInvalidKeyWarning = warningSignature;
+    devWarn(`[cinder-kanban-board] duplicate keys disable reordering. Duplicate columns: ${duplicateColumns || "none"}. Duplicate cards: ${duplicateCards || "none"}.`);
+  });
+  $4.user_effect(() => {
+    if (!$4.get(invalidKeys))
+      return;
+    if (cardController.phase === "lifted")
+      cancelCardLift();
+    if ($4.get(columnLiftedKey) !== null)
+      cancelColumnLift();
+  });
+  $4.user_effect(() => {
+    if (!$4.get(columnsElement) || !$4.get(crossColumnCardTarget) || cardController.liftedKey === null) {
+      $4.set(crossColumnPlaceholderBlockSize, null);
+      return;
+    }
+    const liftedRow = getLiftedRowElement();
+    const liftedHeight = liftedRow?.getBoundingClientRect().height ?? 0;
+    $4.set(crossColumnPlaceholderBlockSize, liftedHeight > 0 ? `${liftedHeight}px` : null, true);
+  });
+  $4.user_effect(() => {
+    $$props.columns.forEach((column) => column.cards.forEach((currentCard) => $$props.getCardKey(currentCard)));
+    if (cardController.phase !== "lifted" || cardController.liftedKey === null)
+      return;
+    const located = findCard($$props.columns, $$props.getCardKey, cardController.liftedKey);
+    if (!located) {
+      cardController.cancel();
+      $4.set(cardTarget, null);
+      return;
+    }
+    if (!$4.get(cardTarget)) {
+      $4.set(cardTarget, {
+        columnIndex: located.columnIndex,
+        cardIndex: located.cardIndex
+      }, true);
+    }
+  });
+  function getColumnLabel(column) {
+    return column.title;
+  }
+  function getCardCount(column) {
+    return column.collapsed ? 0 : column.cards.length;
+  }
+  function makeCardContext(column, columnIndex, cardIndex, isLifted, isDropTarget) {
+    return {
+      column,
+      columnIndex,
+      cardIndex,
+      visualIndex: cardIndex,
+      totalCards: column.cards.length,
+      isLifted,
+      isDropTarget
+    };
+  }
+  function makeColumnContext(column, columnIndex) {
+    return {
+      column,
+      columnIndex,
+      totalColumns: $$props.columns.length,
+      isLifted: $4.get(columnLiftedKey) === column.id,
+      isDropTarget: $4.get(columnTargetIndex) === columnIndex,
+      collapsed: Boolean(column.collapsed),
+      canCollapse: collapsible(),
+      canReorder: reorderColumns() && !$4.get(invalidKeys)
+    };
+  }
+  function getColumnCardListElement(columnElement) {
+    return Array.from(columnElement.children).find((child3) => child3 instanceof HTMLElement && child3.classList.contains("cinder-kanban-board__cards")) ?? null;
+  }
+  function sortableRowMatchesKey(row, key) {
+    return row.getAttribute("data-key") === String(key) && row.getAttribute("data-key-type") === typeof key;
+  }
+  function getLiftedRowElement() {
+    if (!$4.get(columnsElement) || cardController.liftedKey === null)
+      return null;
+    return Array.from($4.get(columnsElement).querySelectorAll("[data-sortable-row]")).find((row) => sortableRowMatchesKey(row, cardController.liftedKey)) ?? null;
+  }
+  function getLiftedRowBlockSize() {
+    return getLiftedRowElement()?.getBoundingClientRect().height ?? 0;
+  }
+  function getColumnDropZoneBottom(cardList, liftedRowBlockSize) {
+    return cardList.getBoundingClientRect().bottom + liftedRowBlockSize;
+  }
+  function locatePointerTarget(pointerX, pointerY) {
+    if (!$4.get(columnsElement))
+      return null;
+    const liftedRowBlockSize = getLiftedRowBlockSize();
+    const columnElements = Array.from($4.get(columnsElement).children).filter((element) => element instanceof HTMLElement && element.classList.contains("cinder-kanban-board__column"));
+    const columnIndex = columnElements.findIndex((element) => {
+      const rect = element.getBoundingClientRect();
+      const cardList2 = getColumnCardListElement(element);
+      if (!cardList2)
+        return false;
+      return pointerX >= rect.left && pointerX <= rect.right && pointerY >= rect.top && pointerY <= getColumnDropZoneBottom(cardList2, liftedRowBlockSize);
+    });
+    if (columnIndex < 0 || $$props.columns[columnIndex]?.collapsed)
+      return null;
+    const columnElement = columnElements[columnIndex];
+    if (!columnElement)
+      return null;
+    const cardList = getColumnCardListElement(columnElement);
+    const draggedKey = cardController.liftedKey;
+    const rows = Array.from(cardList?.children ?? []).filter((row) => row instanceof HTMLElement && row.hasAttribute("data-sortable-row") && (draggedKey === null || !sortableRowMatchesKey(row, draggedKey)));
+    const insertionIndex = rows.filter((row) => {
+      const rect = row.getBoundingClientRect();
+      return rect.top + rect.height / 2 < pointerY;
+    }).length;
+    return { columnIndex, cardIndex: insertionIndex };
+  }
+  function hasCrossColumnPlaceholder(columnIndex) {
+    return $4.get(crossColumnCardTarget)?.columnIndex === columnIndex;
+  }
+  function shouldRenderCrossColumnPlaceholder(columnIndex, cardIndex) {
+    return $4.get(crossColumnCardTarget)?.columnIndex === columnIndex && $4.get(crossColumnCardTarget).cardIndex === cardIndex;
+  }
+  function shouldRenderCrossColumnAppendPlaceholder(column, columnIndex) {
+    return $4.get(crossColumnCardTarget)?.columnIndex === columnIndex && $4.get(crossColumnCardTarget).cardIndex >= column.cards.length;
+  }
+  function getDestinationTotal(target, itemKey) {
+    const column = $$props.columns[target.columnIndex];
+    if (!column)
+      return 1;
+    const located = itemKey === null ? null : findCard($$props.columns, $$props.getCardKey, itemKey);
+    const sameColumn = located?.columnIndex === target.columnIndex;
+    return Math.max(1, sameColumn ? column.cards.length : column.cards.length + 1);
+  }
+  function announceTarget(itemLabel) {
+    if (!$4.get(cardTarget))
+      return;
+    const column = $$props.columns[$4.get(cardTarget).columnIndex];
+    if (!column)
+      return;
+    const total = getDestinationTotal($4.get(cardTarget), cardController.liftedKey);
+    announcer.announce(`${itemLabel} moved to ${column.title}, position ${$4.get(cardTarget).cardIndex + 1} of ${total}.`);
+  }
+  setSortableContext({
+    get controller() {
+      return cardController;
+    },
+    commitDrop(itemKey, itemLabel) {
+      if ($4.get(invalidKeys) || !$4.get(cardTarget)) {
+        cancelCardLift(itemLabel);
+        return;
+      }
+      const destinationColumn = $$props.columns[$4.get(cardTarget).columnIndex];
+      if (!destinationColumn || destinationColumn.collapsed) {
+        cancelCardLift(itemLabel);
+        return;
+      }
+      const located = findCard($$props.columns, $$props.getCardKey, itemKey);
+      if (!located) {
+        cancelCardLift(itemLabel);
+        return;
+      }
+      const dropTotal = getDestinationTotal($4.get(cardTarget), itemKey);
+      const result = moveKanbanCard($$props.columns, $$props.getCardKey, itemKey, $4.get(cardTarget));
+      cardController.completeDrop(itemLabel, dropTotal);
+      $4.set(cardTarget, null);
+      $4.set(pointerColumnIndex, null);
+      if (result)
+        $$props.onchange(result.nextColumns, result.change);
+    },
+    cancel(itemLabel) {
+      cardController.cancel(itemLabel);
+      $4.set(cardTarget, null);
+      $4.set(pointerColumnIndex, null);
+    },
+    lift(key, fromIndex, itemLabel, total) {
+      if ($4.get(invalidKeys) || $4.get(columnLiftedKey) !== null)
+        return;
+      const located = findCard($$props.columns, $$props.getCardKey, key);
+      if (!located || located.column.collapsed)
+        return;
+      $4.set(cardTarget, {
+        columnIndex: located.columnIndex,
+        cardIndex: located.cardIndex
+      }, true);
+      cardController.lift(key, fromIndex, itemLabel, total);
+    },
+    move(toIndex, itemLabel, _total) {
+      if (!$4.get(cardTarget))
+        return;
+      const previousTarget = $4.get(cardTarget);
+      const targetColumnIndex = $4.get(pointerColumnIndex) ?? $4.get(cardTarget).columnIndex;
+      const column = $$props.columns[targetColumnIndex];
+      if (!column || column.collapsed)
+        return;
+      const located = cardController.liftedKey === null ? null : findCard($$props.columns, $$props.getCardKey, cardController.liftedKey);
+      const allowAppend = $4.get(pointerColumnIndex) !== null || located?.columnIndex !== targetColumnIndex;
+      const maxCardIndex = allowAppend ? getCardCount(column) : Math.max(0, getCardCount(column) - 1);
+      const cardIndex = Math.max(0, Math.min(toIndex, maxCardIndex));
+      $4.set(cardTarget, { columnIndex: targetColumnIndex, cardIndex }, true);
+      const destinationTotal = getDestinationTotal($4.get(cardTarget), cardController.liftedKey);
+      const targetChanged = previousTarget.columnIndex !== $4.get(cardTarget).columnIndex || previousTarget.cardIndex !== $4.get(cardTarget).cardIndex;
+      cardController.move(cardIndex, itemLabel, destinationTotal, { announce: false });
+      if (targetChanged)
+        announceTarget(itemLabel);
+      $4.set(pointerColumnIndex, null);
+    },
+    getPointerTarget({ pointerX, pointerY }) {
+      const target = locatePointerTarget(pointerX, pointerY);
+      if (!target)
+        return null;
+      $4.set(pointerColumnIndex, target.columnIndex, true);
+      const column = $$props.columns[target.columnIndex];
+      return {
+        index: target.cardIndex,
+        total: Math.max(1, getCardCount(column))
+      };
+    },
+    handleLiftedKeydown({ event: event3, itemLabel }) {
+      if (!$4.get(cardTarget) || event3.key !== "ArrowLeft" && event3.key !== "ArrowRight")
+        return false;
+      event3.preventDefault();
+      const direction = event3.key === "ArrowRight" ? 1 : -1;
+      const nextColumnIndex = findNextVisibleColumn($$props.columns, $4.get(cardTarget).columnIndex, direction);
+      if (nextColumnIndex === null) {
+        announcer.announce(`${itemLabel} has no available column in that direction.`);
+        return true;
+      }
+      const nextColumn = $$props.columns[nextColumnIndex];
+      $4.set(cardTarget, {
+        columnIndex: nextColumnIndex,
+        cardIndex: Math.max(0, Math.min($4.get(cardTarget).cardIndex, nextColumn.cards.length))
+      }, true);
+      const destinationTotal = getDestinationTotal($4.get(cardTarget), cardController.liftedKey);
+      cardController.move($4.get(cardTarget).cardIndex, itemLabel, destinationTotal, { announce: false });
+      announceTarget(itemLabel);
+      return true;
+    }
+  });
+  function cancelCardLift(itemLabel) {
+    cardController.cancel(itemLabel);
+    $4.set(cardTarget, null);
+    $4.set(pointerColumnIndex, null);
+  }
+  function cancelColumnLift(columnTitle) {
+    $4.set(columnLiftedKey, null);
+    $4.set(columnTargetIndex, null);
+    if (columnTitle)
+      announcer.announce(`${columnTitle} column move cancelled.`);
+  }
+  function handleWindowKeydown(event3) {
+    if (cardController.phase === "lifted" && event3.key === "Escape") {
+      event3.preventDefault();
+      cancelCardLift();
+      return;
+    }
+    if ($4.get(columnLiftedKey) !== null && event3.key === "Escape") {
+      event3.preventDefault();
+      const column = $$props.columns.find((currentColumn) => currentColumn.id === $4.get(columnLiftedKey));
+      cancelColumnLift(column?.title);
+    }
+  }
+  function toggleColumn(column) {
+    const result = toggleKanbanColumn($$props.columns, column.id);
+    if (!result)
+      return;
+    announcer.announce(`${column.title} ${result.change.type === "collapse" && result.change.collapsed ? "collapsed" : "expanded"}.`);
+    $$props.onchange(result.nextColumns, result.change);
+  }
+  function liftColumn(column, columnIndex) {
+    if (cardController.phase === "lifted")
+      return;
+    $4.set(columnLiftedKey, column.id, true);
+    $4.set(columnTargetIndex, columnIndex, true);
+    announcer.announce(`${column.title} column lifted, position ${columnIndex + 1} of ${$$props.columns.length}.`);
+  }
+  function dropColumn(column, targetIndex) {
+    const result = moveKanbanColumn($$props.columns, column.id, targetIndex);
+    $4.set(columnLiftedKey, null);
+    $4.set(columnTargetIndex, null);
+    announcer.announce(`${column.title} column dropped at position ${targetIndex + 1} of ${$$props.columns.length}.`);
+    if (result)
+      $$props.onchange(result.nextColumns, result.change);
+  }
+  function handleColumnClick(column, columnIndex) {
+    if (!reorderColumns() || $4.get(invalidKeys) || cardController.phase === "lifted")
+      return;
+    if ($4.get(columnLiftedKey) === null) {
+      liftColumn(column, columnIndex);
+      return;
+    }
+    if ($4.get(columnLiftedKey) === column.id) {
+      dropColumn(column, $4.get(columnTargetIndex) ?? columnIndex);
+    }
+  }
+  function handleColumnKeydown(event3, column, columnIndex) {
+    if (!reorderColumns() || $4.get(invalidKeys) || cardController.phase === "lifted")
+      return;
+    if ($4.get(columnLiftedKey) === null) {
+      return;
+    }
+    if ($4.get(columnLiftedKey) !== column.id)
+      return;
+    const currentTarget = $4.get(columnTargetIndex) ?? columnIndex;
+    if (event3.key === "Escape") {
+      event3.preventDefault();
+      cancelColumnLift(column.title);
+      return;
+    }
+    if (event3.key === "Tab") {
+      cancelColumnLift(column.title);
+      return;
+    }
+    if (event3.key === " " || event3.key === "Enter") {
+      event3.preventDefault();
+      dropColumn(column, currentTarget);
+      return;
+    }
+    const nextIndex = event3.key === "ArrowLeft" ? currentTarget - 1 : event3.key === "ArrowRight" ? currentTarget + 1 : event3.key === "Home" ? 0 : event3.key === "End" ? $$props.columns.length - 1 : currentTarget;
+    if (nextIndex !== currentTarget) {
+      event3.preventDefault();
+      $4.set(columnTargetIndex, Math.max(0, Math.min(nextIndex, $$props.columns.length - 1)), true);
+      announcer.announce(`${column.title} column moved to position ${($4.get(columnTargetIndex) ?? 0) + 1} of ${$$props.columns.length}.`);
+    }
+  }
+  var fragment = root2();
+  $4.event("keydown", $4.window, handleWindowKeydown);
+  var section = $4.first_child(fragment);
+  var p = $4.child(section);
+  var p_1 = $4.sibling(p, 2);
+  var div = $4.sibling(p_1, 2);
+  $4.each(div, 23, () => $4.get(visualColumns), (column, columnIndex) => $4.get(invalidKeys) ? `${column.id}-${columnIndex}` : column.id, ($$anchor2, column, columnIndex) => {
+    const columnContext = $4.derived(() => makeColumnContext($4.get(column), $4.get(columnIndex)));
+    var section_1 = root_1();
+    var header = $4.child(section_1);
+    var node = $4.child(header);
+    {
+      var consequent = ($$anchor3) => {
+        var button = root_22();
+        $4.template_effect(() => {
+          $4.set_attribute(button, "aria-label", `Reorder ${$4.get(column).title} column`);
+          $4.set_attribute(button, "aria-pressed", $4.get(columnLiftedKey) === $4.get(column).id);
+          $4.set_attribute(button, "aria-describedby", columnInstructionsId);
+          button.disabled = $4.get(invalidKeys);
+        });
+        $4.delegated("click", button, () => handleColumnClick($4.get(column), $4.get(columnIndex)));
+        $4.delegated("keydown", button, (event3) => handleColumnKeydown(event3, $4.get(column), $4.get(columnIndex)));
+        $4.append($$anchor3, button);
+      };
+      $4.if(node, ($$render) => {
+        if (reorderColumns())
+          $$render(consequent);
+      });
+    }
+    var div_1 = $4.sibling(node, 2);
+    var node_1 = $4.child(div_1);
+    {
+      var consequent_1 = ($$anchor3) => {
+        var fragment_1 = $4.comment();
+        var node_2 = $4.first_child(fragment_1);
+        $4.snippet(node_2, () => $$props.columnHeader, () => $4.get(column), () => $4.get(columnContext));
+        $4.append($$anchor3, fragment_1);
+      };
+      var alternate = ($$anchor3) => {
+        var text2 = $4.text();
+        $4.template_effect(() => $4.set_text(text2, $4.get(column).title));
+        $4.append($$anchor3, text2);
+      };
+      $4.if(node_1, ($$render) => {
+        if ($$props.columnHeader)
+          $$render(consequent_1);
+        else
+          $$render(alternate, -1);
+      });
+    }
+    $4.reset(div_1);
+    var node_3 = $4.sibling(div_1, 2);
+    {
+      var consequent_2 = ($$anchor3) => {
+        var div_2 = root_5();
+        var node_4 = $4.child(div_2);
+        $4.snippet(node_4, () => $$props.columnActions, () => $4.get(column), () => $4.get(columnContext));
+        $4.reset(div_2);
+        $4.append($$anchor3, div_2);
+      };
+      $4.if(node_3, ($$render) => {
+        if ($$props.columnActions)
+          $$render(consequent_2);
+      });
+    }
+    var node_5 = $4.sibling(node_3, 2);
+    {
+      var consequent_3 = ($$anchor3) => {
+        var button_1 = root_6();
+        var text_1 = $4.child(button_1, true);
+        $4.reset(button_1);
+        $4.template_effect(() => {
+          $4.set_attribute(button_1, "aria-label", `${$4.get(column).collapsed ? "Expand" : "Collapse"} ${$4.get(column).title}`);
+          $4.set_attribute(button_1, "aria-expanded", !$4.get(column).collapsed);
+          $4.set_text(text_1, $4.get(column).collapsed ? "+" : "-");
+        });
+        $4.delegated("click", button_1, () => toggleColumn($4.get(column)));
+        $4.append($$anchor3, button_1);
+      };
+      $4.if(node_5, ($$render) => {
+        if (collapsible())
+          $$render(consequent_3);
+      });
+    }
+    $4.reset(header);
+    var node_6 = $4.sibling(header, 2);
+    {
+      var consequent_8 = ($$anchor3) => {
+        var ul = root_7();
+        var node_7 = $4.child(ul);
+        $4.each(node_7, 19, () => $4.get(column).cards, (currentCard, cardIndex) => $4.get(invalidKeys) ? `${$$props.getCardKey(currentCard)}-${cardIndex}` : $$props.getCardKey(currentCard), ($$anchor4, currentCard, cardIndex) => {
+          const cardKey = $4.derived(() => $$props.getCardKey($4.get(currentCard)));
+          const original = $4.derived(() => $4.get(cardLocations).get($4.get(cardKey)) ?? null);
+          const itemLabel = $4.derived(() => $$props.getCardLabel($4.get(currentCard), $4.get(original)?.column ?? $4.get(column), $4.get(original)?.cardIndex ?? $4.get(cardIndex)));
+          const isLifted = $4.derived(() => cardController.phase === "lifted" && cardController.liftedKey === $4.get(cardKey));
+          const isDropTarget = $4.derived(() => Boolean($4.get(cardTarget) && $4.get(cardTarget).columnIndex === $4.get(columnIndex) && $4.get(cardTarget).cardIndex === $4.get(cardIndex)));
+          var fragment_3 = root_8();
+          var node_8 = $4.first_child(fragment_3);
+          {
+            var consequent_4 = ($$anchor5) => {
+              var li = root_9();
+              $4.template_effect(() => $4.set_style(li, $4.get(crossColumnPlaceholderStyle)));
+              $4.append($$anchor5, li);
+            };
+            var d = $4.derived(() => shouldRenderCrossColumnPlaceholder($4.get(columnIndex), $4.get(cardIndex)));
+            $4.if(node_8, ($$render) => {
+              if ($4.get(d))
+                $$render(consequent_4);
+            });
+          }
+          var node_9 = $4.sibling(node_8, 2);
+          {
+            const children = ($$anchor5) => {
+              var div_3 = root_10();
+              var node_10 = $4.child(div_3);
+              {
+                let $02 = $4.derived(() => makeCardContext($4.get(column), $4.get(columnIndex), $4.get(cardIndex), $4.get(isLifted), $4.get(isDropTarget)));
+                $4.snippet(node_10, () => $$props.card, () => $4.get(currentCard), () => $4.get($02));
+              }
+              $4.reset(div_3);
+              $4.append($$anchor5, div_3);
+            };
+            let $0 = $4.derived(() => Math.max(1, $4.get(column).cards.length));
+            _sortable_item(node_9, {
+              get item() {
+                return $4.get(currentCard);
+              },
+              get itemKey() {
+                return $4.get(cardKey);
+              },
+              get index() {
+                return $4.get(cardIndex);
+              },
+              get itemLabel() {
+                return $4.get(itemLabel);
+              },
+              formatHandleLabel: (name) => `Move ${name}`,
+              get instructionsId() {
+                return instructionsId;
+              },
+              get total() {
+                return $4.get($0);
+              },
+              class: "cinder-kanban-board__card",
+              children,
+              $$slots: { default: true }
+            });
+          }
+          $4.append($$anchor4, fragment_3);
+        });
+        var node_11 = $4.sibling(node_7, 2);
+        {
+          var consequent_5 = ($$anchor4) => {
+            var li_1 = root_11();
+            $4.template_effect(() => $4.set_style(li_1, $4.get(crossColumnPlaceholderStyle)));
+            $4.append($$anchor4, li_1);
+          };
+          var d_1 = $4.derived(() => shouldRenderCrossColumnAppendPlaceholder($4.get(column), $4.get(columnIndex)));
+          $4.if(node_11, ($$render) => {
+            if ($4.get(d_1))
+              $$render(consequent_5);
+          });
+        }
+        var node_12 = $4.sibling(node_11, 2);
+        {
+          var consequent_7 = ($$anchor4) => {
+            var li_2 = root_12();
+            var node_13 = $4.child(li_2);
+            {
+              var consequent_6 = ($$anchor5) => {
+                var fragment_4 = $4.comment();
+                var node_14 = $4.first_child(fragment_4);
+                $4.snippet(node_14, () => $$props.emptyColumn, () => $4.get(column));
+                $4.append($$anchor5, fragment_4);
+              };
+              var alternate_1 = ($$anchor5) => {
+                var text_2 = $4.text("No cards");
+                $4.append($$anchor5, text_2);
+              };
+              $4.if(node_13, ($$render) => {
+                if ($$props.emptyColumn)
+                  $$render(consequent_6);
+                else
+                  $$render(alternate_1, -1);
+              });
+            }
+            $4.reset(li_2);
+            $4.append($$anchor4, li_2);
+          };
+          var d_2 = $4.derived(() => $4.get(column).cards.length === 0 && !hasCrossColumnPlaceholder($4.get(columnIndex)));
+          $4.if(node_12, ($$render) => {
+            if ($4.get(d_2))
+              $$render(consequent_7);
+          });
+        }
+        $4.reset(ul);
+        $4.template_effect(() => $4.set_attribute(ul, "aria-label", `${$4.get(column).title} cards`));
+        $4.append($$anchor3, ul);
+      };
+      $4.if(node_6, ($$render) => {
+        if (!$4.get(column).collapsed)
+          $$render(consequent_8);
+      });
+    }
+    $4.reset(section_1);
+    $4.template_effect(($0) => {
+      $4.set_attribute(section_1, "aria-label", $0);
+      $4.set_attribute(section_1, "data-cinder-collapsed", $4.get(column).collapsed ? "" : undefined);
+    }, [() => getColumnLabel($4.get(column))]);
+    $4.append($$anchor2, section_1);
+  });
+  $4.reset(div);
+  $4.bind_this(div, ($$value) => $4.set(columnsElement, $$value), () => $4.get(columnsElement));
+  $4.reset(section);
+  var div_4 = $4.sibling(section, 2);
+  var text_3 = $4.child(div_4, true);
+  $4.reset(div_4);
+  $4.template_effect(($0) => {
+    $4.set_class(section, 1, $0);
+    $4.set_attribute(section, "aria-label", $$props.label);
+    $4.set_attribute(section, "data-cinder-invalid-keys", $4.get(invalidKeys) ? "" : undefined);
+    $4.set_attribute(p, "id", instructionsId);
+    $4.set_attribute(p_1, "id", columnInstructionsId);
+    $4.set_text(text_3, announcer.message);
+  }, [
+    () => $4.clsx(classNames("cinder-kanban-board", $$props.class))
+  ]);
+  $4.append($$anchor, fragment);
+  $4.pop();
+}
+$4.delegate(["click", "keydown"]);
+
+// src/components/kanban-board/index.ts
+var kanban_board_default = Kanban_board;
+export {
+  kanban_board_default as default,
+  Kanban_board as KanbanBoard
+};
+
+//# debugId=C6B690CBE4CBEEAB64756E2164756E21