@flamingo-stack/openframe-frontend-core 0.0.710 → 0.0.712

package/dist/chunk-ILNN6QRW.js

@@ -0,0 +1,1612 @@
+"use client";
+import {
+  DRAG_AND_DROP_MEDIA_QUERY,
+  useHorizontalScrollbar,
+  useLocalStorage
+} from "./chunk-3K5ZLZE7.js";
+import {
+  ApprovalBatchMessage,
+  TicketStatusTag,
+  formatTicketFullTimestamp,
+  formatTicketRelativeTime,
+  getReadableTextColor,
+  resolveTicketStatus,
+  useCollapsible
+} from "./chunk-2NASBO7O.js";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from "./chunk-P3JMAMHP.js";
+import {
+  AgentMark
+} from "./chunk-H3PKYE4N.js";
+import {
+  SquareAvatar,
+  Tag
+} from "./chunk-IYVFSLWJ.js";
+import {
+  useIsomorphicLayoutEffect,
+  useMediaQuery
+} from "./chunk-ADBE7QF3.js";
+import {
+  Arrow02LeftIcon,
+  Arrow02RightIcon,
+  BoxArchiveIcon,
+  Chevron02DownIcon,
+  Chevron02UpIcon,
+  ClockIcon,
+  DotsLoaderIcon,
+  Flag02Icon,
+  InfoCircleIcon,
+  MessagesIcon,
+  PlusIcon,
+  ShieldCheckIcon,
+  TagIcon,
+  UserCheckIcon,
+  UserXmarkIcon
+} from "./chunk-NCPTID44.js";
+import {
+  LaptopIcon
+} from "./chunk-OSIKGEBU.js";
+import {
+  Button
+} from "./chunk-YDPKUAP4.js";
+import {
+  next_link_default
+} from "./chunk-DAAVMYUT.js";
+import {
+  Skeleton
+} from "./chunk-FYEJTF5Y.js";
+import {
+  cn
+} from "./chunk-7RXWKTAP.js";
+
+// src/components/ui/deleted-user-avatar.tsx
+import { jsx } from "react/jsx-runtime";
+var SIZE_CLASSES = {
+  sm: "h-8 w-8",
+  md: "h-10 w-10",
+  lg: "h-12 w-12"
+};
+var ICON_CLASSES = {
+  sm: "w-4 h-4",
+  md: "w-5 h-5",
+  lg: "w-6 h-6"
+};
+function DeletedUserAvatar({ size = "md", className, accessibleLabel }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      role: "img",
+      "aria-label": accessibleLabel || "Deleted user",
+      className: cn(
+        "flex shrink-0 items-center justify-center rounded-full bg-ods-error/20",
+        SIZE_CLASSES[size],
+        className
+      ),
+      children: /* @__PURE__ */ jsx(UserXmarkIcon, { className: cn("text-ods-error", ICON_CLASSES[size]) })
+    }
+  );
+}
+
+// src/components/ui/touch-friendly-tooltip.tsx
+import { useCallback, useRef, useState } from "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var dismissOpenTooltip = null;
+function TouchFriendlyTooltip({ content, side = "left", children }) {
+  const [open, setOpen] = useState(false);
+  const isTouchRef = useRef(false);
+  const close = useCallback(() => setOpen(false), []);
+  if (!content) return children;
+  const toggleFromTouch = () => {
+    setOpen((prev) => {
+      const next = !prev;
+      if (next) {
+        if (dismissOpenTooltip && dismissOpenTooltip !== close) dismissOpenTooltip();
+        dismissOpenTooltip = close;
+      } else if (dismissOpenTooltip === close) {
+        dismissOpenTooltip = null;
+      }
+      return next;
+    });
+  };
+  return /* @__PURE__ */ jsx2(TooltipProvider, { delayDuration: 150, children: /* @__PURE__ */ jsxs(Tooltip, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx2(
+      TooltipTrigger,
+      {
+        asChild: true,
+        onPointerDown: (e) => {
+          isTouchRef.current = e.pointerType === "touch";
+          if (!isTouchRef.current) return;
+          e.preventDefault();
+          toggleFromTouch();
+        },
+        onFocus: (e) => {
+          if (isTouchRef.current) e.preventDefault();
+        },
+        onClick: (e) => {
+          if (isTouchRef.current) e.preventDefault();
+        },
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx2(TooltipContent, { side, className: "max-w-xs", children: content })
+  ] }) });
+}
+
+// src/components/features/board/board-column-header.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function BoardColumnHeader({
+  column,
+  collapsed = false,
+  onToggleCollapse,
+  onAddTicket,
+  onArchive
+}) {
+  const count = column.total ?? column.tickets.length;
+  const tagStatus = column.statusKey ?? column.id;
+  const useStatusVariant = resolveTicketStatus(tagStatus) !== null;
+  const actionClass = "h-8 w-8 p-0 content-md:h-8 content-md:w-8";
+  if (collapsed) {
+    return /* @__PURE__ */ jsxs2("div", { className: "flex h-full flex-col items-center gap-[var(--spacing-system-xsf)]", children: [
+      onToggleCollapse && /* @__PURE__ */ jsx3(
+        Button,
+        {
+          variant: "transparent",
+          size: "icon",
+          className: actionClass,
+          onClick: onToggleCollapse,
+          "aria-label": "Expand column",
+          children: /* @__PURE__ */ jsx3(Arrow02RightIcon, { className: "h-6 w-6 text-ods-text-secondary" })
+        }
+      ),
+      /* @__PURE__ */ jsx3(
+        TicketStatusTag,
+        {
+          status: tagStatus,
+          label: column.label,
+          color: useStatusVariant ? void 0 : column.color,
+          className: "h-auto [writing-mode:vertical-rl]"
+        }
+      ),
+      /* @__PURE__ */ jsx3("span", { className: "text-h5", style: { color: column.color }, children: count })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-[var(--spacing-system-xsf)]", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex min-w-0 flex-1 items-center gap-[var(--spacing-system-xsf)]", children: [
+      /* @__PURE__ */ jsx3(TicketStatusTag, { status: tagStatus, label: column.label, color: useStatusVariant ? void 0 : column.color }),
+      /* @__PURE__ */ jsx3("span", { className: "text-h5", style: useStatusVariant ? void 0 : { color: column.color }, children: count })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "flex shrink-0 items-center gap-[var(--spacing-system-xxs)]", children: [
+      column.tooltip && /* @__PURE__ */ jsx3(TouchFriendlyTooltip, { content: column.tooltip, side: "bottom", children: /* @__PURE__ */ jsx3(Button, { variant: "transparent", size: "icon", className: actionClass, "aria-label": column.tooltip, children: /* @__PURE__ */ jsx3(InfoCircleIcon, { className: "h-6 w-6 text-ods-text-secondary" }) }) }),
+      onToggleCollapse && /* @__PURE__ */ jsx3(
+        Button,
+        {
+          variant: "transparent",
+          size: "icon",
+          className: actionClass,
+          onClick: onToggleCollapse,
+          "aria-label": "Collapse column",
+          children: /* @__PURE__ */ jsx3(Arrow02LeftIcon, { className: "h-6 w-6 text-ods-text-secondary" })
+        }
+      ),
+      onArchive && /* @__PURE__ */ jsx3(
+        Button,
+        {
+          variant: "transparent",
+          size: "icon",
+          className: actionClass,
+          onClick: onArchive,
+          "aria-label": "Archive resolved tickets",
+          children: /* @__PURE__ */ jsx3(BoxArchiveIcon, { className: "h-6 w-6 text-ods-text-secondary" })
+        }
+      ),
+      onAddTicket && /* @__PURE__ */ jsx3(
+        Button,
+        {
+          variant: "transparent",
+          size: "icon",
+          className: actionClass,
+          onClick: onAddTicket,
+          "aria-label": "Add ticket",
+          children: /* @__PURE__ */ jsx3(PlusIcon, { className: "h-6 w-6 text-ods-text-secondary" })
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/features/board/color-utils.ts
+function tintOnDark(hex) {
+  const n = parseInt(hex.replace("#", ""), 16);
+  const r = n >> 16 & 255;
+  const g = n >> 8 & 255;
+  const b = n & 255;
+  const mix = (c) => Math.round(0.1 * c + 0.9 * 22);
+  const toHex = (v) => v.toString(16).padStart(2, "0");
+  return `#${toHex(mix(r))}${toHex(mix(g))}${toHex(mix(b))}`;
+}
+
+// src/components/features/board/board-ticket-approval.tsx
+import { useState as useState2 } from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function BoardTicketApproval({ pendingApproval, onApprove, onReject }) {
+  const [expanded, setExpanded] = useState2(false);
+  const { innerRef, containerStyle } = useCollapsible({ expanded });
+  const isAdmin = pendingApproval.approvalType === "ADMIN";
+  return /* @__PURE__ */ jsxs3("div", { className: "pointer-events-auto flex flex-col", children: [
+    /* @__PURE__ */ jsxs3(
+      "button",
+      {
+        type: "button",
+        onClick: () => setExpanded((v) => !v),
+        "aria-expanded": expanded,
+        className: "flex w-full cursor-pointer items-center gap-[var(--spacing-system-xxs)] text-h6",
+        children: [
+          /* @__PURE__ */ jsxs3(
+            "span",
+            {
+              className: cn(
+                "flex min-w-0 flex-1 items-center gap-[var(--spacing-system-xxs)]",
+                isAdmin ? "text-ods-open-yellow" : "text-ods-text-secondary"
+              ),
+              children: [
+                isAdmin ? /* @__PURE__ */ jsx4(ShieldCheckIcon, { className: "size-4 shrink-0" }) : /* @__PURE__ */ jsx4(DotsLoaderIcon, { size: 16, className: "shrink-0" }),
+                /* @__PURE__ */ jsx4("span", { className: "flex-1 truncate text-left", children: isAdmin ? "Technician approval required" : "Pending client approval" })
+              ]
+            }
+          ),
+          expanded ? /* @__PURE__ */ jsx4(Chevron02UpIcon, { className: "size-4 shrink-0 text-ods-text-secondary" }) : /* @__PURE__ */ jsx4(Chevron02DownIcon, { className: "size-4 shrink-0 text-ods-text-secondary" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx4("div", { style: containerStyle, children: /* @__PURE__ */ jsx4("div", { ref: innerRef, className: "pt-[var(--spacing-system-xs)]", children: /* @__PURE__ */ jsx4(
+      ApprovalBatchMessage,
+      {
+        className: "mb-0",
+        data: {
+          approvalRequestId: pendingApproval.id,
+          approvalType: pendingApproval.approvalType ?? "CLIENT",
+          toolCalls: pendingApproval.toolCalls ?? []
+        },
+        status: "pending",
+        showExecutionStatus: false,
+        onApprove,
+        onReject
+      }
+    ) }) })
+  ] });
+}
+
+// src/components/features/board/ticket-card.tsx
+import { attachClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { preserveOffsetOnSource } from "@atlaskit/pragmatic-drag-and-drop/element/preserve-offset-on-source";
+import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview";
+import {
+  memo,
+  useCallback as useCallback2,
+  useEffect,
+  useMemo,
+  useRef as useRef3,
+  useState as useState3
+} from "react";
+
+// src/utils/drag-effect.ts
+function holdMoveDragEffect(element) {
+  const onDragStart = (event) => {
+    const transfer = event.dataTransfer;
+    if (transfer) transfer.effectAllowed = "move";
+  };
+  element.addEventListener("dragstart", onDragStart);
+  return () => element.removeEventListener("dragstart", onDragStart);
+}
+
+// src/components/features/board/drop-aim.ts
+import { createContext, useContext } from "react";
+var DropAimContext = createContext(null);
+var BoardLiftContext = createContext(null);
+function useBoardLift() {
+  return useContext(BoardLiftContext);
+}
+function useDropAim() {
+  return useContext(DropAimContext);
+}
+function isSameAim(a, b) {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  return a.columnId === b.columnId && a.ticketId === b.ticketId && a.edge === b.edge;
+}
+
+// src/components/features/board/use-lane-scroll-anchor.ts
+import { useRef as useRef2 } from "react";
+var TICKET_ID_ATTRIBUTE = "data-ticket-id";
+function cardPositions(root) {
+  return Array.from(root.querySelectorAll(`[${TICKET_ID_ATTRIBUTE}]`)).map((element) => ({
+    id: element.getAttribute(TICKET_ID_ATTRIBUTE) ?? "",
+    offsetTop: element.offsetTop
+  }));
+}
+function useLaneScrollAnchor(scrollRef, tickets) {
+  const positionsRef = useRef2([]);
+  useIsomorphicLayoutEffect(() => {
+    const root = scrollRef.current;
+    if (!root) return;
+    const previous = positionsRef.current;
+    const scrollTop = root.scrollTop;
+    const current = cardPositions(root);
+    if (previous.length > 0 && scrollTop > 0) {
+      const anchor = previous.find((card) => card.offsetTop >= scrollTop) ?? previous[previous.length - 1];
+      const moved = current.find((card) => card.id === anchor.id);
+      if (moved) {
+        const drift = moved.offsetTop - anchor.offsetTop;
+        if (Math.abs(drift) >= 1) root.scrollTop = scrollTop + drift;
+      }
+    }
+    positionsRef.current = current;
+  }, [tickets]);
+}
+
+// src/components/features/board/lane-geometry.ts
+var DROP_LINE_ATTRIBUTE = "data-board-drop-line";
+function nearestCardIn(lane, pointerY, draggedTicketId) {
+  let best = null;
+  let bestDistance = Number.POSITIVE_INFINITY;
+  for (const card of lane.querySelectorAll(`[${TICKET_ID_ATTRIBUTE}]`)) {
+    if (card.dataset.ticketId === draggedTicketId) continue;
+    const rect = card.getBoundingClientRect();
+    if (rect.height === 0) continue;
+    const distance = Math.abs(pointerY - (rect.top + rect.height / 2));
+    if (distance < bestDistance) {
+      bestDistance = distance;
+      best = card;
+    }
+  }
+  return best;
+}
+function cardById(root, ticketId) {
+  for (const card of root.querySelectorAll(`[${TICKET_ID_ATTRIBUTE}]`)) {
+    if (card.dataset.ticketId === ticketId) return card;
+  }
+  return null;
+}
+
+// src/components/features/board/pending-move.ts
+import { createContext as createContext2, useContext as useContext2 } from "react";
+function applyPendingMove(columns, move) {
+  const ticket = columns.flatMap((column) => column.tickets).find((t) => t.id === move.ticketId);
+  if (!ticket || !columns.some((column) => column.id === move.toColumnId)) return columns;
+  return columns.map((column) => {
+    const without = column.tickets.filter((t) => t.id !== move.ticketId);
+    if (column.id !== move.toColumnId) {
+      return without.length === column.tickets.length ? column : { ...column, tickets: without };
+    }
+    return { ...column, tickets: insertAfter(without, ticket, move.afterTicketId) };
+  });
+}
+function insertAfter(tickets, ticket, afterId) {
+  if (afterId === null) return [ticket, ...tickets];
+  const after = tickets.findIndex((t) => t.id === afterId);
+  const at = after < 0 ? tickets.length : after + 1;
+  return [...tickets.slice(0, at), ticket, ...tickets.slice(at)];
+}
+var LandingCardContext = createContext2(null);
+function useIsLanding(ticketId) {
+  return useContext2(LandingCardContext) === ticketId;
+}
+function hasMoveSettled(columns, move) {
+  const tickets = columns.find((c) => c.id === move.toColumnId)?.tickets;
+  if (!tickets) return false;
+  const index = tickets.findIndex((t) => t.id === move.ticketId);
+  if (index < 0) return false;
+  if (move.fromColumnId === move.toColumnId) {
+    return (tickets[index - 1]?.id ?? null) === move.afterTicketId;
+  }
+  return !columns.find((c) => c.id === move.fromColumnId)?.tickets.some((t) => t.id === move.ticketId);
+}
+
+// src/components/features/board/ticket-card.tsx
+import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var PRIORITY_COLOR_CLASS = {
+  low: "text-ods-text-secondary",
+  medium: "text-ods-info",
+  high: "text-ods-warning",
+  urgent: "text-ods-error"
+};
+var DRAGGED_CARD_OPACITY = 0.4;
+var DRAG_PREVIEW_OPACITY = 0.9;
+var MAX_VISIBLE_TAGS = 2;
+var MAX_VISIBLE_ASSIGNEES = 3;
+var ACTIVITY_DEFAULT_LABEL = {
+  "ai-working": "AI assistant is working",
+  "user-typing": "User typing",
+  "waiting-external": "Waiting for client response",
+  stale: "No activity"
+};
+var TICKET_CARD_SHELL = "relative flex flex-col gap-[var(--spacing-system-sf)] rounded-md border border-ods-border bg-ods-bg p-[var(--spacing-system-sf)] select-none text-left";
+function TicketCardBody({
+  ticket,
+  columnColor,
+  renderAssignSlot,
+  onApprove,
+  onReject,
+  href,
+  onLinkClick
+}) {
+  const showNewMessage = !!ticket.hasNewMessage && !!columnColor;
+  const newMessageTextColor = columnColor ? getReadableTextColor(columnColor) : void 0;
+  const showDeviceRow = !!(ticket.deviceHostnames?.length || ticket.organizationName);
+  const deviceText = [ticket.deviceHostnames?.join(", "), ticket.organizationName].filter(Boolean).join(", ");
+  const hasRightSection = !!(ticket.priority || ticket.agent || ticket.assignees?.length || renderAssignSlot);
+  const rightSection = hasRightSection ? /* @__PURE__ */ jsxs4("div", { className: "pointer-events-auto flex shrink-0 items-center gap-[var(--spacing-system-xsf)]", children: [
+    ticket.priority && /* @__PURE__ */ jsx5(
+      Flag02Icon,
+      {
+        className: cn("size-4", PRIORITY_COLOR_CLASS[ticket.priority]),
+        "aria-label": `Priority: ${ticket.priority}`
+      }
+    ),
+    ticket.agent && /* @__PURE__ */ jsx5(
+      "span",
+      {
+        role: "img",
+        "aria-label": `Owned by ${ticket.agent === "fae" ? "Fae" : "Mingo"}`,
+        className: "flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-full border border-ods-border bg-ods-bg",
+        children: /* @__PURE__ */ jsx5(AgentMark, { agent: ticket.agent, className: ticket.agent === "fae" ? "size-full" : "size-5" })
+      }
+    ),
+    renderAssignSlot ? renderAssignSlot(ticket) : ticket.assignees?.length ? /* @__PURE__ */ jsxs4("div", { className: "flex -space-x-2", children: [
+      ticket.assignees.slice(0, MAX_VISIBLE_ASSIGNEES).map(
+        (a) => a.deleted ? /* @__PURE__ */ jsx5(
+          DeletedUserAvatar,
+          {
+            size: "sm",
+            accessibleLabel: `Deleted user: ${a.name ?? a.initials ?? a.id}`
+          },
+          a.id
+        ) : /* @__PURE__ */ jsx5(
+          SquareAvatar,
+          {
+            src: a.avatarUrl,
+            alt: a.name ?? a.initials ?? a.id,
+            fallback: a.name ?? a.initials,
+            size: "sm",
+            variant: "round"
+          },
+          a.id
+        )
+      ),
+      ticket.assignees.length > MAX_VISIBLE_ASSIGNEES && /* @__PURE__ */ jsxs4("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-ods-border bg-ods-bg text-ods-text-secondary text-h6", children: [
+        "+",
+        ticket.assignees.length - MAX_VISIBLE_ASSIGNEES
+      ] })
+    ] }) : null
+  ] }) : null;
+  const timestampLabel = ticket.createdAt ? formatTicketRelativeTime(ticket.createdAt) : null;
+  const tooltipLabel = ticket.createdAt ? formatTicketFullTimestamp(ticket.createdAt) : null;
+  const metaLabel = [ticket.ticketNumber || null, timestampLabel].filter(Boolean).join(" \u2022 ");
+  const metaClass = "truncate text-ods-text-secondary text-h6";
+  const meta = href ? /* @__PURE__ */ jsx5(
+    next_link_default,
+    {
+      href,
+      draggable: false,
+      prefetch: false,
+      tabIndex: -1,
+      onClick: onLinkClick,
+      className: cn("pointer-events-auto block", metaClass),
+      children: metaLabel
+    }
+  ) : /* @__PURE__ */ jsx5("p", { className: cn(tooltipLabel && "pointer-events-auto", metaClass), children: metaLabel });
+  return /* @__PURE__ */ jsxs4(Fragment, { children: [
+    /* @__PURE__ */ jsxs4("div", { className: "flex items-start gap-[var(--spacing-system-sf)]", children: [
+      /* @__PURE__ */ jsxs4("div", { className: "flex min-w-0 flex-1 flex-col gap-[var(--spacing-system-zero)]", title: ticket.title, children: [
+        /* @__PURE__ */ jsx5("p", { className: "truncate text-ods-text-primary text-h3", children: ticket.title }),
+        showDeviceRow && /* @__PURE__ */ jsxs4("div", { className: "flex min-w-0 items-center gap-[var(--spacing-system-xxs)] text-ods-text-secondary text-h6", children: [
+          /* @__PURE__ */ jsx5(LaptopIcon, { className: "size-4 shrink-0" }),
+          /* @__PURE__ */ jsx5("span", { className: "truncate", title: deviceText, children: deviceText })
+        ] })
+      ] }),
+      rightSection
+    ] }),
+    ticket.tags?.length ? /* @__PURE__ */ jsx5(TicketTagRow, { tags: ticket.tags }) : null,
+    metaLabel && (tooltipLabel ? /* @__PURE__ */ jsx5(TooltipProvider, { children: /* @__PURE__ */ jsxs4(Tooltip, { children: [
+      /* @__PURE__ */ jsx5(TooltipTrigger, { asChild: true, children: meta }),
+      /* @__PURE__ */ jsx5(TooltipContent, { children: tooltipLabel })
+    ] }) }) : meta),
+    ticket.escalatedByUser && /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-[var(--spacing-system-xxs)] text-ods-open-yellow text-h6", children: [
+      /* @__PURE__ */ jsx5(UserCheckIcon, { className: "size-4 shrink-0" }),
+      /* @__PURE__ */ jsx5("span", { className: "truncate", children: "Escalated by User" })
+    ] }),
+    ticket.activity && /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        className: cn(
+          "flex items-center gap-[var(--spacing-system-xxs)] text-h6",
+          ticket.activity.kind === "stale" ? "text-ods-open-yellow" : "text-ods-text-secondary"
+        ),
+        children: [
+          ticket.activity.kind === "stale" ? /* @__PURE__ */ jsx5(ClockIcon, { className: "size-4 shrink-0" }) : /* @__PURE__ */ jsx5(DotsLoaderIcon, { className: "size-4 shrink-0" }),
+          /* @__PURE__ */ jsx5("span", { className: "truncate", children: ticket.activity.label ?? ACTIVITY_DEFAULT_LABEL[ticket.activity.kind] })
+        ]
+      }
+    ),
+    showNewMessage && /* @__PURE__ */ jsx5(
+      Tag,
+      {
+        label: "New Message",
+        icon: /* @__PURE__ */ jsx5(MessagesIcon, { size: 16, color: newMessageTextColor }),
+        className: "w-fit shrink-0",
+        style: { backgroundColor: columnColor, color: newMessageTextColor }
+      }
+    ),
+    ticket.pendingApproval && /* @__PURE__ */ jsx5(BoardTicketApproval, { pendingApproval: ticket.pendingApproval, onApprove, onReject })
+  ] });
+}
+function TicketCardView({ className, style, ...bodyProps }) {
+  const { ticket, columnColor } = bodyProps;
+  const showNewMessage = !!ticket.hasNewMessage && !!columnColor;
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      className: cn(TICKET_CARD_SHELL, className),
+      style: showNewMessage ? { borderColor: columnColor, ...style } : style,
+      children: /* @__PURE__ */ jsx5("div", { className: "relative z-10 flex flex-col gap-[var(--spacing-system-sf)]", children: /* @__PURE__ */ jsx5(TicketCardBody, { ...bodyProps }) })
+    }
+  );
+}
+var TicketCard = memo(function TicketCardImpl({
+  ticket,
+  columnId,
+  columnColor,
+  href,
+  dragDisabled,
+  dropDisabled,
+  allowedFromColumns,
+  renderAssignSlot,
+  onApprove,
+  onReject
+}) {
+  const ref = useRef3(null);
+  const ticketRef = useRef3(ticket);
+  useEffect(() => {
+    ticketRef.current = ticket;
+  });
+  const [isDragging, setIsDragging] = useState3(false);
+  const isLanding = useIsLanding(ticket.id);
+  const aim = useDropAim();
+  const closestEdge = aim && aim.columnId === columnId && aim.ticketId === ticket.id ? aim.edge : null;
+  const isSource = isDragging || aim?.ticket.id === ticket.id;
+  const lift = useBoardLift();
+  const handleKeyDown = (e) => {
+    if (e.key !== " " || dragDisabled || !lift) return;
+    e.preventDefault();
+    lift(ticket.id);
+  };
+  const keyShortcuts = dragDisabled || !lift ? void 0 : "Space";
+  useEffect(() => {
+    const element = ref.current;
+    if (!element || dragDisabled) return void 0;
+    const identity = { type: "ticket", ticketId: ticket.id, columnId };
+    return combine(
+      // Before anything else: the drag has to start as a "move", or its first
+      // frame is drawn with the copy cursor — see `drag-effect.ts`.
+      holdMoveDragEffect(element),
+      draggable({
+        element,
+        // Read at drag start rather than captured, so a card renamed or re-tagged
+        // since it mounted travels as it is now. No height: it was here for a
+        // lane that opened room for the card, and nothing opens room any more —
+        // it was costing a forced layout read at the start of every drag to
+        // produce a field no one read.
+        getInitialData: () => ({ ...identity, ticket: ticketRef.current }),
+        /**
+         * The card under the pointer is the browser's own drag image, styled by
+         * us. Drawing it ourselves as a positioned element was tried and has one
+         * unfixable flaw: an element in the page cannot leave the page. Carry a
+         * card up towards the address bar and the pointer crosses into the
+         * browser's own chrome, where no `dragover` reaches the document — so
+         * the card freezes at the top edge and only catches up when the drag
+         * ends. A native drag image is moved by the browser itself and floats
+         * over everything, which is why Jira's card does not stick there.
+         *
+         * A clone rather than a second React tree: this is a photograph, taken
+         * once, and a copy of the card's own DOM is a photograph of exactly what
+         * is on screen — assignee slot and all — with no providers to re-supply
+         * and no chance of it rendering a loading state into the picture.
+         */
+        onGenerateDragPreview: ({ nativeSetDragImage, location, source }) => {
+          const { width } = source.element.getBoundingClientRect();
+          setCustomNativeDragPreview({
+            nativeSetDragImage,
+            // Holds the card under the same part of itself it was grabbed by.
+            getOffset: preserveOffsetOnSource({ element: source.element, input: location.current.input }),
+            render: ({ container }) => {
+              const clone = source.element.cloneNode(true);
+              clone.style.width = `${width}px`;
+              clone.style.opacity = String(DRAG_PREVIEW_OPACITY);
+              clone.classList.add("shadow-card-hover");
+              container.appendChild(clone);
+            }
+          });
+        },
+        onDragStart: () => setIsDragging(true),
+        onDrop: () => setIsDragging(false)
+      }),
+      dropTargetForElements({
+        element,
+        canDrop: ({ source }) => {
+          if (source.data.type !== "ticket" || source.data.ticketId === ticket.id) return false;
+          const from = String(source.data.columnId);
+          if (from === columnId) return true;
+          if (dropDisabled) return false;
+          return !allowedFromColumns || allowedFromColumns.includes(from);
+        },
+        // The edge rides along in the drop target's own data, so the board reads
+        // "above or below this card" straight off the drop it receives.
+        getData: ({ input, element: self }) => attachClosestEdge({ ...identity }, { input, element: self, allowedEdges: ["top", "bottom"] }),
+        // Sticky, so crossing the gap between two cards — which is lane padding
+        // and belongs to no card's box — keeps answering with the card just
+        // left, rather than handing the question to the lane for those few
+        // pixels and back again. Both answer with the same slot (the lane
+        // resolves the nearest card and its edge), so this is about not
+        // re-deriving it from a different target every few pixels, NOT about
+        // reaching room a card has opened: nothing moves during a drag here.
+        getIsSticky: () => true
+      })
+    );
+  }, [ticket.id, columnId, dragDisabled, dropDisabled, allowedFromColumns]);
+  const showNewMessage = !!ticket.hasNewMessage && !!columnColor;
+  const style = {};
+  if (showNewMessage) style.borderColor = columnColor;
+  const handleClick = useCallback2(
+    (e) => {
+      if (isDragging) e.preventDefault();
+    },
+    [isDragging]
+  );
+  const body = useMemo(
+    () => /* @__PURE__ */ jsx5(
+      TicketCardBody,
+      {
+        ticket,
+        columnColor,
+        renderAssignSlot,
+        onApprove: onApprove ? (requestId) => onApprove(ticket.id, requestId) : void 0,
+        onReject: onReject ? (requestId) => onReject(ticket.id, requestId) : void 0,
+        href,
+        onLinkClick: handleClick
+      }
+    ),
+    [ticket, columnColor, renderAssignSlot, onApprove, onReject, href, handleClick]
+  );
+  const cardClasses = cn(TICKET_CARD_SHELL, !dragDisabled && "cursor-pointer");
+  const outerProps = {
+    ref,
+    style,
+    className: cardClasses,
+    // Read by the lane's scroll anchor to keep the list still when tickets are
+    // inserted above the viewport — see `use-lane-scroll-anchor.ts`.
+    [TICKET_ID_ATTRIBUTE]: ticket.id
+  };
+  const innerWrapperClass = "relative z-10 flex flex-col gap-[var(--spacing-system-sf)]";
+  if (isSource) {
+    style.opacity = DRAGGED_CARD_OPACITY;
+  } else if (isLanding) {
+    style.visibility = "hidden";
+  }
+  const insertionLine = closestEdge ? /* @__PURE__ */ jsx5(
+    "span",
+    {
+      "aria-hidden": true,
+      ...{ [DROP_LINE_ATTRIBUTE]: "" },
+      className: cn(
+        // Nothing sticks out sideways or beyond the line's own 2px: the lane
+        // scrolls, and a scroll container clips whatever leaves its padding box
+        // — an end cap or a knob on this would be cut off against the first and
+        // last card in every lane.
+        "pointer-events-none absolute inset-x-0 z-10 h-0.5 rounded-full bg-ods-accent",
+        // Centred in the lane's own gap, so it reads as sitting between two
+        // cards rather than as belonging to one of them. The lane reserves the
+        // matching sliver at its ends (see `board-column.tsx`).
+        closestEdge === "top" ? "-top-[5px]" : "-bottom-[5px]"
+      )
+    }
+  ) : null;
+  if (href) {
+    return /* @__PURE__ */ jsxs4("div", { ...outerProps, children: [
+      insertionLine,
+      /* @__PURE__ */ jsx5(
+        next_link_default,
+        {
+          href,
+          draggable: false,
+          prefetch: false,
+          onClick: handleClick,
+          onKeyDown: handleKeyDown,
+          "aria-label": ticket.title,
+          "aria-keyshortcuts": keyShortcuts,
+          className: "absolute inset-0 z-0 rounded-md focus-visible:outline-none"
+        }
+      ),
+      /* @__PURE__ */ jsx5("div", { className: cn("pointer-events-none", innerWrapperClass), children: body })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs4("div", { ...outerProps, children: [
+    insertionLine,
+    /* @__PURE__ */ jsx5(
+      "button",
+      {
+        type: "button",
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        "aria-label": ticket.title,
+        "aria-keyshortcuts": keyShortcuts,
+        className: "absolute inset-0 z-0 cursor-pointer rounded-md focus-visible:outline-none"
+      }
+    ),
+    /* @__PURE__ */ jsx5("div", { className: cn("pointer-events-none", innerWrapperClass), children: body })
+  ] });
+});
+function TicketTagRow({ tags }) {
+  const visible = tags.slice(0, MAX_VISIBLE_TAGS);
+  const hidden = tags.length - visible.length;
+  return /* @__PURE__ */ jsxs4("div", { className: "flex h-8 flex-wrap items-start gap-[var(--spacing-system-xxs)] overflow-clip", children: [
+    visible.map((tag) => /* @__PURE__ */ jsx5(Tag, { variant: "outline", label: tag }, tag)),
+    hidden > 0 && /* @__PURE__ */ jsx5(Tag, { variant: "outline", label: `+${hidden}` })
+  ] });
+}
+
+// src/components/features/board/ticket-card-skeleton.tsx
+import { forwardRef } from "react";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var TicketCardSkeleton = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex flex-col gap-[var(--spacing-system-sf)] rounded-md border border-ods-border bg-ods-bg p-[var(--spacing-system-sf)]",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs5("div", { className: "flex items-start gap-[var(--spacing-system-sf)]", children: [
+          /* @__PURE__ */ jsxs5("div", { className: "flex min-w-0 flex-1 flex-col gap-[var(--spacing-system-xxs)]", children: [
+            /* @__PURE__ */ jsx6("div", { className: "flex items-center text-h3", children: /* @__PURE__ */ jsx6(Skeleton, { className: "h-4 w-3/4" }) }),
+            /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-[var(--spacing-system-xxs)] text-h6", children: [
+              /* @__PURE__ */ jsx6(Skeleton, { className: "size-4 shrink-0 rounded-sm" }),
+              /* @__PURE__ */ jsx6(Skeleton, { className: "h-3 w-1/2" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs5("div", { className: "flex shrink-0 items-center gap-[var(--spacing-system-xsf)]", children: [
+            /* @__PURE__ */ jsx6(Skeleton, { className: "size-4 rounded-sm" }),
+            /* @__PURE__ */ jsx6(Skeleton, { className: "size-8 rounded-full" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs5("div", { className: "flex h-8 items-center gap-[var(--spacing-system-xxs)]", children: [
+          /* @__PURE__ */ jsx6(Skeleton, { className: "h-8 w-16 rounded-md" }),
+          /* @__PURE__ */ jsx6(Skeleton, { className: "h-8 w-12 rounded-md" })
+        ] })
+      ]
+    }
+  )
+);
+TicketCardSkeleton.displayName = "TicketCardSkeleton";
+
+// src/components/features/board/board-column.tsx
+import { attachClosestEdge as attachClosestEdge2 } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+import { dropTargetForElements as dropTargetForElements2 } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { memo as memo2, useCallback as useCallback3, useEffect as useEffect2, useRef as useRef4, useState as useState4 } from "react";
+
+// src/utils/auto-scroll-ancestors.ts
+import {
+  autoScrollForElements,
+  autoScrollWindowForElements
+} from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
+import { unsafeOverflowAutoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/unsafe-overflow/element";
+import { combine as combine2 } from "@atlaskit/pragmatic-drag-and-drop/combine";
+
+// src/utils/scroll-parent.ts
+var SCROLLABLE = /(auto|scroll|overlay)/;
+function scrollableAncestorsOf(element) {
+  const found = [];
+  for (let node = element.parentElement; node && node !== document.body; node = node.parentElement) {
+    const style = getComputedStyle(node);
+    if (SCROLLABLE.test(style.overflowY) || SCROLLABLE.test(style.overflowX)) found.push(node);
+  }
+  return found;
+}
+function nearestScrollableAncestor(element) {
+  return scrollableAncestorsOf(element)[0] ?? null;
+}
+
+// src/utils/auto-scroll-ancestors.ts
+var OVERFLOW_REACH = 5e3;
+var overflow = () => ({
+  forTopEdge: { top: OVERFLOW_REACH, left: OVERFLOW_REACH, right: OVERFLOW_REACH },
+  forBottomEdge: { bottom: OVERFLOW_REACH, left: OVERFLOW_REACH, right: OVERFLOW_REACH },
+  forLeftEdge: { left: OVERFLOW_REACH, top: OVERFLOW_REACH, bottom: OVERFLOW_REACH },
+  forRightEdge: { right: OVERFLOW_REACH, top: OVERFLOW_REACH, bottom: OVERFLOW_REACH }
+});
+var verticalOverflow = () => ({
+  forTopEdge: { top: OVERFLOW_REACH },
+  forBottomEdge: { bottom: OVERFLOW_REACH }
+});
+function autoScrollBothWays(element) {
+  return combine2(
+    autoScrollForElements({ element }),
+    unsafeOverflowAutoScrollForElements({ element, getOverflow: overflow })
+  );
+}
+function autoScrollColumn(element) {
+  return combine2(
+    autoScrollForElements({ element }),
+    unsafeOverflowAutoScrollForElements({ element, getOverflow: verticalOverflow })
+  );
+}
+function autoScrollAncestors(element) {
+  const cleanups = scrollableAncestorsOf(element).map(autoScrollBothWays);
+  cleanups.push(autoScrollWindowForElements());
+  return combine2(...cleanups);
+}
+
+// src/components/features/board/board-column.tsx
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var BoardColumn = memo2(function BoardColumnImpl({
+  column,
+  collapsed = false,
+  onToggleCollapse,
+  onAddTicket,
+  onArchive,
+  getTicketHref,
+  renderAssignSlot,
+  onApprove,
+  onReject,
+  onLoadMore,
+  loadMoreRootMargin = "200px 0px",
+  joinLeft = false,
+  joinRight = false,
+  touchMode = false,
+  className
+}) {
+  const laneRef = useRef4(null);
+  const [isOver, setIsOver] = useState4(false);
+  useEffect2(() => {
+    const element = laneRef.current;
+    if (!element || collapsed || touchMode || column.dropDisabled) return void 0;
+    return dropTargetForElements2({
+      element,
+      canDrop: ({ source }) => {
+        if (source.data.type !== "ticket") return false;
+        const from = source.data.columnId;
+        if (from === column.id) return true;
+        return !column.allowedFromColumns || column.allowedFromColumns.includes(String(from));
+      },
+      // A drop that lands between cards — most of the lane, once a hovered card
+      // has opened the room the preview is drawn in — answers with the nearest
+      // card and the edge of it the pointer is on, exactly as that card would
+      // have. Reporting a bare lane instead sent the ticket to the BOTTOM of the
+      // column, which is what made small moves look like they had not worked and
+      // large ones like the only thing that did.
+      getData: ({ input, element: lane, source }) => {
+        const nearest = nearestCardIn(lane, input.clientY, String(source.data.ticketId));
+        const ticketId = nearest?.dataset.ticketId;
+        if (!nearest || !ticketId) return { type: "column", columnId: column.id };
+        return attachClosestEdge2(
+          { type: "ticket", ticketId, columnId: column.id },
+          { input, element: nearest, allowedEdges: ["top", "bottom"] }
+        );
+      },
+      onDragEnter: () => setIsOver(true),
+      onDragLeave: () => setIsOver(false),
+      onDrop: () => setIsOver(false)
+    });
+  }, [column.id, column.dropDisabled, column.allowedFromColumns, collapsed, touchMode]);
+  const handleToggleCollapse = useCallback3(() => onToggleCollapse?.(column.id), [onToggleCollapse, column.id]);
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      ref: laneRef,
+      className: cn(
+        "flex h-full shrink-0 flex-col gap-[var(--spacing-system-sf)] overflow-hidden rounded-md border border-ods-border p-[var(--spacing-system-sf)]",
+        "transition-[width] duration-300 ease-out",
+        collapsed ? "w-14" : "w-[400px]",
+        column.system && "bg-ods-card",
+        joinLeft && "rounded-l-none border-l-0",
+        joinRight && "rounded-r-none",
+        isOver && "outline outline-2 -outline-offset-2 outline-ods-focus",
+        className
+      ),
+      style: column.system ? void 0 : { backgroundColor: tintOnDark(column.color) },
+      children: [
+        /* @__PURE__ */ jsx7(
+          BoardColumnHeader,
+          {
+            column,
+            collapsed,
+            onToggleCollapse: onToggleCollapse ? handleToggleCollapse : void 0,
+            onAddTicket: !collapsed && onAddTicket ? () => onAddTicket(column.id) : void 0,
+            onArchive: !collapsed && column.archivable && onArchive ? () => onArchive(column.id) : void 0
+          }
+        ),
+        !collapsed && /* @__PURE__ */ jsxs6(Fragment2, { children: [
+          /* @__PURE__ */ jsx7("div", { "aria-hidden": true, className: "-mx-[var(--spacing-system-sf)] h-px shrink-0 bg-ods-border" }),
+          /* @__PURE__ */ jsx7(
+            ColumnBody,
+            {
+              column,
+              getTicketHref,
+              renderAssignSlot,
+              onApprove,
+              onReject,
+              onLoadMore,
+              loadMoreRootMargin,
+              touchMode
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
+function ColumnBody({
+  column,
+  getTicketHref,
+  renderAssignSlot,
+  onApprove,
+  onReject,
+  onLoadMore,
+  loadMoreRootMargin,
+  touchMode
+}) {
+  const scrollRef = useRef4(null);
+  const sentinelRef = useRef4(null);
+  useLaneScrollAnchor(scrollRef, column.tickets);
+  useEffect2(() => {
+    const element = scrollRef.current;
+    if (!element || touchMode) return void 0;
+    return autoScrollColumn(element);
+  }, [touchMode]);
+  const loadMoreRef = useRef4(onLoadMore);
+  const columnIdRef = useRef4(column.id);
+  useEffect2(() => {
+    loadMoreRef.current = onLoadMore;
+    columnIdRef.current = column.id;
+  });
+  useEffect2(() => {
+    if (!column.hasMore || column.isLoadingMore) return void 0;
+    const sentinel = sentinelRef.current;
+    const root = scrollRef.current;
+    if (!sentinel || !root || !loadMoreRef.current) return void 0;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((e) => e.isIntersecting)) {
+          loadMoreRef.current?.(columnIdRef.current);
+        }
+      },
+      { root, rootMargin: loadMoreRootMargin }
+    );
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [column.hasMore, column.isLoadingMore, loadMoreRootMargin]);
+  return (
+    // `overflow-anchor:none` hands scroll anchoring to `useLaneScrollAnchor`
+    // wholesale. The browser's own anchoring is unusable here — it silently
+    // skips transformed elements, so it works between drags and does nothing
+    // during one — and leaving both on double-corrects every insertion.
+    /* @__PURE__ */ jsxs6(
+      "div",
+      {
+        ref: scrollRef,
+        className: "flex min-h-0 flex-1 flex-col gap-[var(--spacing-system-xs)] overflow-y-auto py-[5px] [overflow-anchor:none]",
+        children: [
+          column.isLoading ? /* @__PURE__ */ jsx7(SkeletonStack, {}) : column.tickets.length === 0 ? /* @__PURE__ */ jsx7(EmptyState, { columnId: column.id, touchMode }) : column.tickets.map((t) => /* @__PURE__ */ jsx7(
+            TicketCard,
+            {
+              ticket: t,
+              columnId: column.id,
+              columnColor: column.color,
+              href: getTicketHref?.(t.id),
+              renderAssignSlot,
+              onApprove,
+              onReject,
+              dragDisabled: touchMode || column.dragDisabled,
+              dropDisabled: touchMode || column.dropDisabled,
+              allowedFromColumns: column.allowedFromColumns
+            },
+            t.id
+          )),
+          column.isLoadingMore && !column.isLoading && /* @__PURE__ */ jsx7(TicketCardSkeleton, {}),
+          column.hasMore && /* @__PURE__ */ jsx7("div", { ref: sentinelRef, "aria-hidden": true, className: "h-1 shrink-0" })
+        ]
+      }
+    )
+  );
+}
+function SkeletonStack({ count = 4 }) {
+  return /* @__PURE__ */ jsx7(Fragment2, { children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx7(TicketCardSkeleton, {}, `skeleton-${i}`)) });
+}
+function EmptyState({ columnId, touchMode }) {
+  const aim = useDropAim();
+  if (aim && aim.columnId === columnId) {
+    return /* @__PURE__ */ jsx7("div", { "aria-hidden": true, ...{ [DROP_LINE_ATTRIBUTE]: "" }, className: "h-0.5 shrink-0 rounded-full bg-ods-accent" });
+  }
+  return /* @__PURE__ */ jsxs6("div", { className: "flex flex-1 flex-col items-center justify-center gap-[var(--spacing-system-lf)] p-[var(--spacing-system-lf)] text-center text-ods-text-secondary", children: [
+    /* @__PURE__ */ jsx7(TagIcon, { className: "h-6 w-6 shrink-0" }),
+    /* @__PURE__ */ jsxs6("div", { className: "flex w-full flex-col", children: [
+      /* @__PURE__ */ jsx7("p", { className: "text-h4", children: "No tickets here" }),
+      /* @__PURE__ */ jsx7("p", { className: "text-h6", children: touchMode ? "Change a ticket's status to move it to this column" : "Drag a ticket here or change its status to move it to this column" })
+    ] })
+  ] });
+}
+
+// src/components/features/board/use-board-collapse.ts
+import { useCallback as useCallback4, useEffect as useEffect3, useRef as useRef5, useState as useState5 } from "react";
+function useBoardCollapse(storageKey, initial) {
+  const [persisted, setPersisted] = useLocalStorage(storageKey ?? "__board_collapse_unused__", {});
+  const [memory, setMemory] = useState5(initial ?? {});
+  const collapsed = storageKey ? persisted : memory;
+  const setMap = storageKey ? setPersisted : setMemory;
+  const setMapRef = useRef5(setMap);
+  useEffect3(() => {
+    setMapRef.current = setMap;
+  });
+  const toggle = useCallback4((columnId) => {
+    setMapRef.current((prev) => ({ ...prev, [columnId]: !prev[columnId] }));
+  }, []);
+  const setCollapsed = useCallback4((columnId, value) => {
+    setMapRef.current((prev) => ({ ...prev, [columnId]: value }));
+  }, []);
+  return { collapsed, toggle, setCollapsed };
+}
+
+// src/components/features/board/board.tsx
+import { combine as combine3 } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { preventUnhandled } from "@atlaskit/pragmatic-drag-and-drop/utils/prevent-unhandled";
+import { Fragment as Fragment3, useCallback as useCallback5, useEffect as useEffect4, useMemo as useMemo2, useRef as useRef6, useState as useState6 } from "react";
+import { createPortal } from "react-dom";
+
+// src/components/features/board/aim.ts
+import { extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+var othersIn = (columns, columnId, ticketId) => (columns.find((c) => c.id === columnId)?.tickets ?? []).filter((t) => t.id !== ticketId);
+function laneOf(columns, ticketId) {
+  return columns.find((c) => c.tickets.some((t) => t.id === ticketId)) ?? null;
+}
+function initialAim(columns, ticketId) {
+  const lane = laneOf(columns, ticketId);
+  if (!lane) return null;
+  return { columnId: lane.id, index: lane.tickets.findIndex((t) => t.id === ticketId) };
+}
+function aimFromTarget(columns, ticketId, target) {
+  const columnId = String(target.columnId);
+  if (!columns.some((c) => c.id === columnId)) return null;
+  const others = othersIn(columns, columnId, ticketId);
+  if (target.type !== "ticket") return { columnId, index: others.length };
+  const over = others.findIndex((t) => t.id === String(target.ticketId));
+  if (over < 0) return { columnId, index: others.length };
+  return { columnId, index: over + (extractClosestEdge(target) === "bottom" ? 1 : 0) };
+}
+function moveAim(columns, ticketId, aim, key, accepts) {
+  if (key === "ArrowUp" || key === "ArrowDown") {
+    const limit = othersIn(columns, aim.columnId, ticketId).length;
+    const index = Math.min(Math.max(aim.index + (key === "ArrowUp" ? -1 : 1), 0), limit);
+    return index === aim.index ? aim : { ...aim, index };
+  }
+  const step = key === "ArrowLeft" ? -1 : 1;
+  const from = columns.findIndex((c) => c.id === aim.columnId);
+  for (let i = from + step; i >= 0 && i < columns.length; i += step) {
+    const column = columns[i];
+    if (!accepts(column)) continue;
+    const limit = othersIn(columns, column.id, ticketId).length;
+    return { columnId: column.id, index: Math.min(aim.index, limit) };
+  }
+  return aim;
+}
+function aimAnchor(columns, ticketId, aim) {
+  const others = othersIn(columns, aim.columnId, ticketId);
+  if (others.length === 0) return { ticketId: null, edge: null };
+  if (aim.index < others.length) return { ticketId: others[aim.index].id, edge: "top" };
+  return { ticketId: others[others.length - 1].id, edge: "bottom" };
+}
+function aimToChange(columns, ticketId, aim) {
+  const lane = laneOf(columns, ticketId);
+  if (!lane) return null;
+  const others = othersIn(columns, aim.columnId, ticketId);
+  const afterTicketId = others[aim.index - 1]?.id ?? null;
+  const beforeTicketId = others[aim.index]?.id ?? null;
+  if (lane.id === aim.columnId) {
+    const currentIndex = lane.tickets.findIndex((t) => t.id === ticketId);
+    if ((lane.tickets[currentIndex - 1]?.id ?? null) === afterTicketId) return null;
+  }
+  return { ticketId, fromColumnId: lane.id, toColumnId: aim.columnId, afterTicketId, beforeTicketId };
+}
+
+// src/components/features/board/resolve-drop.ts
+function resolveBoardDrop(columns, { source, target }) {
+  if (!target) return null;
+  const ticketId = String(source.ticketId);
+  const aim = aimFromTarget(columns, ticketId, target);
+  return aim && aimToChange(columns, ticketId, aim);
+}
+
+// src/components/features/board/touch-board.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+function TouchBoard({
+  columns,
+  onLoadMore,
+  onAddTicket,
+  onArchiveColumn,
+  getTicketHref,
+  renderAssignSlot,
+  onApprove,
+  onReject,
+  collapseStorageKey,
+  initialCollapsed,
+  loadMoreRootMargin,
+  className
+}) {
+  const { collapsed, toggle } = useBoardCollapse(collapseStorageKey, initialCollapsed);
+  return /* @__PURE__ */ jsx8("div", { className: cn("flex h-full min-h-0 flex-col", className), children: /* @__PURE__ */ jsx8(
+    "div",
+    {
+      className: "flex min-h-0 flex-1 snap-x snap-mandatory gap-[var(--spacing-system-mf)] overflow-x-auto overscroll-x-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+      children: columns.map((column) => /* @__PURE__ */ jsx8(
+        BoardColumn,
+        {
+          column,
+          touchMode: true,
+          collapsed: !!collapsed[column.id],
+          onToggleCollapse: toggle,
+          className: cn(
+            "snap-start",
+            !collapsed[column.id] && "w-[min(400px,calc(100%_-_2*var(--spacing-system-mf)))]"
+          ),
+          onAddTicket,
+          onArchive: onArchiveColumn,
+          getTicketHref,
+          renderAssignSlot,
+          onApprove,
+          onReject,
+          onLoadMore,
+          loadMoreRootMargin
+        },
+        column.id
+      ))
+    }
+  ) });
+}
+
+// src/components/features/board/board.tsx
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+var PENDING_MOVE_TIMEOUT_MS = 2e3;
+var DROP_MS = 160;
+var DROP_EASING = "cubic-bezier(0.2, 0, 0, 1)";
+var DRAG_PREVIEW_Z = 1200;
+var ARROW_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
+function Board(props) {
+  const dragAndDropEnabled = useMediaQuery(DRAG_AND_DROP_MEDIA_QUERY);
+  if (dragAndDropEnabled === void 0) {
+    return /* @__PURE__ */ jsx9("div", { "aria-hidden": true, className: cn("flex h-full min-h-0 flex-col", props.className) });
+  }
+  return dragAndDropEnabled ? /* @__PURE__ */ jsx9(DragBoard, { ...props }) : /* @__PURE__ */ jsx9(TouchBoard, { ...props });
+}
+function DragBoard({
+  columns,
+  onChange,
+  onLoadMore,
+  onAddTicket,
+  onArchiveColumn,
+  getTicketHref,
+  renderAssignSlot,
+  onApprove,
+  onReject,
+  collapseStorageKey,
+  initialCollapsed,
+  loadMoreRootMargin,
+  className
+}) {
+  const { collapsed, toggle } = useBoardCollapse(collapseStorageKey, initialCollapsed);
+  const {
+    scrollRef,
+    trackRef,
+    thumbRef,
+    thumbRatio,
+    onScroll,
+    onTrackClick,
+    onTrackWheel,
+    onThumbPointerDown,
+    onThumbPointerMove,
+    onThumbPointerUp,
+    onThumbPointerCancel
+  } = useHorizontalScrollbar();
+  const columnsRef = useRef6(columns);
+  const onChangeRef = useRef6(onChange);
+  const boardRef = useRef6(null);
+  const scrollerRef = useRef6(null);
+  const setScroller = useCallback5(
+    (node) => {
+      scrollerRef.current = node;
+      scrollRef(node);
+    },
+    [scrollRef]
+  );
+  const [aim, setAim] = useState6(null);
+  const [lifted, setLifted] = useState6(null);
+  const [announcement, setAnnouncement] = useState6("");
+  const dragGeometry = useRef6(null);
+  const [landingPreview, setLandingPreview] = useState6(null);
+  const previewRef = useRef6(null);
+  const [reportedMove, setPendingMove] = useState6(null);
+  const pendingMove = reportedMove && !hasMoveSettled(columns, reportedMove) ? reportedMove : null;
+  const view = useMemo2(() => pendingMove ? applyPendingMove(columns, pendingMove) : columns, [columns, pendingMove]);
+  useEffect4(() => {
+    columnsRef.current = view;
+    onChangeRef.current = onChange;
+  });
+  const [landing, setLanding] = useState6(null);
+  const landingTimer = useRef6(null);
+  const pointRef = useRef6({ x: 0, y: 0 });
+  const laneLabel = useCallback5((columnId) => view.find((c) => c.id === columnId)?.label ?? columnId, [view]);
+  const acceptsLifted = useCallback5(
+    (fromColumnId) => (column) => {
+      if (column.dropDisabled || collapsed[column.id]) return false;
+      if (column.id === fromColumnId) return true;
+      return !column.allowedFromColumns || column.allowedFromColumns.includes(fromColumnId);
+    },
+    [collapsed]
+  );
+  const lift = useCallback5(
+    (ticketId) => {
+      const start = initialAim(view, ticketId);
+      if (!start) return;
+      setLifted({ ticketId, aim: start });
+      const title = laneOf(view, ticketId)?.tickets.find((t) => t.id === ticketId)?.title ?? "Ticket";
+      setAnnouncement(`${title} lifted. Use the arrow keys to move it, space to drop it, escape to put it back.`);
+    },
+    [view]
+  );
+  const drop = useCallback5(() => {
+    if (!lifted) return;
+    const change = aimToChange(view, lifted.ticketId, lifted.aim);
+    setLifted(null);
+    if (!change) {
+      setAnnouncement("Put back where it was.");
+      return;
+    }
+    setAnnouncement(`Dropped into ${laneLabel(change.toColumnId)}.`);
+    setPendingMove({
+      ticketId: change.ticketId,
+      fromColumnId: change.fromColumnId,
+      toColumnId: change.toColumnId,
+      afterTicketId: change.afterTicketId
+    });
+    onChange(change);
+  }, [lifted, view, laneLabel, onChange]);
+  const walk = useCallback5(
+    (key) => {
+      if (!lifted) return;
+      const from = laneOf(view, lifted.ticketId)?.id ?? lifted.aim.columnId;
+      const next = moveAim(view, lifted.ticketId, lifted.aim, key, acceptsLifted(from));
+      if (next === lifted.aim) return;
+      setLifted({ ...lifted, aim: next });
+      const total = (view.find((c) => c.id === next.columnId)?.tickets ?? []).filter(
+        (t) => t.id !== lifted.ticketId
+      ).length;
+      setAnnouncement(`${laneLabel(next.columnId)}, position ${next.index + 1} of ${total + 1}.`);
+    },
+    [lifted, view, acceptsLifted, laneLabel]
+  );
+  useEffect4(() => {
+    if (!lifted) return void 0;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") {
+        setLifted(null);
+        setAnnouncement("Move cancelled.");
+      } else if (event.key === " " || event.key === "Enter") {
+        drop();
+      } else if (ARROW_KEYS.includes(event.key)) {
+        walk(event.key);
+      } else {
+        return;
+      }
+      event.preventDefault();
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [lifted, drop, walk]);
+  useEffect4(() => {
+    if (!lifted) return;
+    boardRef.current?.querySelector(`[${DROP_LINE_ATTRIBUTE}]`)?.scrollIntoView({ block: "nearest", inline: "nearest" });
+  }, [lifted]);
+  const keyboardAim = useMemo2(() => {
+    if (!lifted) return null;
+    const ticket = laneOf(view, lifted.ticketId)?.tickets.find((t) => t.id === lifted.ticketId);
+    if (!ticket) return null;
+    const anchor = aimToChange(view, lifted.ticketId, lifted.aim) ? aimAnchor(view, lifted.ticketId, lifted.aim) : { ticketId: null, edge: null };
+    return { columnId: lifted.aim.columnId, ...anchor, ticket };
+  }, [lifted, view]);
+  useEffect4(() => {
+    if (!pendingMove) return void 0;
+    const timer = setTimeout(() => setPendingMove(null), PENDING_MOVE_TIMEOUT_MS);
+    return () => clearTimeout(timer);
+  }, [pendingMove]);
+  useEffect4(() => {
+    const scroller = scrollerRef.current;
+    const readAim = (source, target) => {
+      const ticket = source.data.ticket;
+      if (!target || !ticket) return null;
+      const ticketId = String(source.data.ticketId);
+      const slot = aimFromTarget(columnsRef.current, ticketId, target);
+      if (!slot) return null;
+      const anchor = aimToChange(columnsRef.current, ticketId, slot) ? aimAnchor(columnsRef.current, ticketId, slot) : { ticketId: null, edge: null };
+      return { columnId: slot.columnId, ...anchor, ticket };
+    };
+    const aimAt = (source, targets) => {
+      const next = readAim(source, targets[0]?.data);
+      setAim((prev) => isSameAim(prev, next) ? prev : next);
+    };
+    return combine3(
+      // Dragging towards the edge of the board scrolls the lanes sideways —
+      // and keeps scrolling once the pointer is past that edge.
+      scroller ? autoScrollBothWays(scroller) : () => {
+      },
+      // ...and towards the edge of the SCREEN scrolls whatever the page is
+      // actually scrolled by, which is the layout's `<main>`, not the document.
+      // Auto-scroll is registered on those; a DROP is not. Nothing outside the
+      // lanes is a drop target: a card carried over the filters, the header or
+      // the sidebar is aimed at nothing, draws nothing, and cancels when
+      // released. Resolving a lane from a pointer that has left the board — by
+      // matching it horizontally to the column above or below it — was tried and
+      // is not what a board does; the answer has to be somewhere the user is
+      // actually pointing.
+      monitorForElements({
+        canMonitor: ({ source }) => source.data.type === "ticket",
+        onDragStart: ({ source, location }) => {
+          const ticket = source.data.ticket;
+          if (!ticket) return;
+          const rect = source.element.getBoundingClientRect();
+          const { clientX, clientY } = location.current.input;
+          pointRef.current = { x: clientX, y: clientY };
+          preventUnhandled.start();
+          setLanding(null);
+          dragGeometry.current = {
+            ticket,
+            columnColor: columnsRef.current.find((c) => c.id === source.data.columnId)?.color,
+            width: rect.width,
+            grabX: clientX - rect.left,
+            grabY: clientY - rect.top
+          };
+        },
+        onDropTargetChange: ({ source, location }) => aimAt(source, location.current.dropTargets),
+        onDrag: ({ source, location }) => {
+          aimAt(source, location.current.dropTargets);
+          const { clientX, clientY } = location.current.input;
+          pointRef.current = { x: clientX, y: clientY };
+        },
+        onDrop: ({ source, location }) => {
+          preventUnhandled.stop();
+          setAim(null);
+          const change = resolveBoardDrop(columnsRef.current, {
+            source: source.data,
+            target: location.current.dropTargets[0]?.data
+          });
+          if (!change) return;
+          setPendingMove({
+            ticketId: change.ticketId,
+            fromColumnId: change.fromColumnId,
+            toColumnId: change.toColumnId,
+            afterTicketId: change.afterTicketId
+          });
+          const geometry = dragGeometry.current;
+          if (geometry) {
+            setLandingPreview({ ...geometry, startX: pointRef.current.x, startY: pointRef.current.y });
+            setLanding(change.ticketId);
+          }
+          onChangeRef.current(change);
+        }
+      })
+    );
+  }, []);
+  useIsomorphicLayoutEffect(() => {
+    if (!landing) return void 0;
+    const finish = () => {
+      landingTimer.current = null;
+      setLanding(null);
+      setLandingPreview(null);
+    };
+    const preview2 = previewRef.current;
+    const card = boardRef.current && cardById(boardRef.current, landing);
+    if (!preview2 || !landingPreview || !card) {
+      finish();
+      return void 0;
+    }
+    const to = card.getBoundingClientRect();
+    const lane = nearestScrollableAncestor(card)?.getBoundingClientRect();
+    if (lane && (to.top < lane.top || to.bottom > lane.bottom)) {
+      finish();
+      return void 0;
+    }
+    const { startX, startY } = landingPreview;
+    preview2.style.transition = "none";
+    preview2.style.opacity = String(DRAG_PREVIEW_OPACITY);
+    preview2.style.transform = `translate(${startX}px, ${startY}px)`;
+    const from = preview2.getBoundingClientRect();
+    void preview2.offsetHeight;
+    preview2.style.transition = `transform ${DROP_MS}ms ${DROP_EASING}, opacity ${DROP_MS}ms ${DROP_EASING}`;
+    preview2.style.opacity = "1";
+    preview2.style.transform = `translate(${startX + to.left - from.left}px, ${startY + to.top - from.top}px)`;
+    landingTimer.current = setTimeout(finish, DROP_MS);
+    return () => {
+      if (landingTimer.current) clearTimeout(landingTimer.current);
+      landingTimer.current = null;
+    };
+  }, [landing, landingPreview]);
+  const preview = landingPreview && createPortal(
+    /* @__PURE__ */ jsx9(
+      "div",
+      {
+        ref: previewRef,
+        "aria-hidden": true,
+        className: "pointer-events-none fixed left-0 top-0 [&_*]:!pointer-events-none",
+        style: {
+          zIndex: DRAG_PREVIEW_Z,
+          width: landingPreview.width,
+          // The grip offset lives here, so the animated property is a plain
+          // translate in pointer coordinates and nothing else.
+          margin: `${-landingPreview.grabY}px 0 0 ${-landingPreview.grabX}px`
+        },
+        children: /* @__PURE__ */ jsx9(
+          TicketCardView,
+          {
+            ticket: landingPreview.ticket,
+            columnColor: landingPreview.columnColor,
+            renderAssignSlot,
+            className: "shadow-card-hover"
+          }
+        )
+      }
+    ),
+    document.body
+  );
+  return /* @__PURE__ */ jsx9(LandingCardContext.Provider, { value: landing, children: /* @__PURE__ */ jsx9(DropAimContext.Provider, { value: aim ?? keyboardAim, children: /* @__PURE__ */ jsxs7(BoardLiftContext.Provider, { value: lift, children: [
+    preview,
+    /* @__PURE__ */ jsxs7("div", { ref: boardRef, className: cn("flex h-full flex-col", className), children: [
+      /* @__PURE__ */ jsx9(
+        "div",
+        {
+          ref: setScroller,
+          onScroll,
+          className: "flex min-h-0 flex-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+          children: view.map((column, i) => {
+            const prev = view[i - 1];
+            const next = view[i + 1];
+            const joinLeft = !!(column.system && prev?.system);
+            const joinRight = !!(column.system && next?.system);
+            const showGap = i > 0 && !joinLeft;
+            return /* @__PURE__ */ jsxs7(Fragment3, { children: [
+              showGap && /* @__PURE__ */ jsx9("div", { "aria-hidden": true, className: "w-[var(--spacing-system-mf)] shrink-0" }),
+              /* @__PURE__ */ jsx9(
+                BoardColumn,
+                {
+                  column,
+                  collapsed: !!collapsed[column.id],
+                  onToggleCollapse: toggle,
+                  onAddTicket,
+                  onArchive: onArchiveColumn,
+                  getTicketHref,
+                  renderAssignSlot,
+                  onApprove,
+                  onReject,
+                  onLoadMore,
+                  loadMoreRootMargin,
+                  joinLeft,
+                  joinRight
+                }
+              )
+            ] }, column.id);
+          })
+        }
+      ),
+      /* @__PURE__ */ jsx9("p", { "aria-live": "polite", className: "sr-only", children: announcement }),
+      thumbRatio > 0 && /* @__PURE__ */ jsx9(
+        "div",
+        {
+          ref: trackRef,
+          onClick: onTrackClick,
+          onWheel: onTrackWheel,
+          className: "relative mt-[var(--spacing-system-mf)] h-2 shrink-0 cursor-pointer rounded-full bg-ods-border",
+          children: /* @__PURE__ */ jsx9(
+            "div",
+            {
+              ref: thumbRef,
+              "data-scrollbar-thumb": true,
+              className: "absolute top-0 h-full touch-none rounded-full bg-ods-text-secondary transition-colors",
+              style: { width: `${thumbRatio * 100}%`, cursor: "grab" },
+              onPointerDown: onThumbPointerDown,
+              onPointerMove: onThumbPointerMove,
+              onPointerUp: onThumbPointerUp,
+              onPointerCancel: onThumbPointerCancel
+            }
+          )
+        }
+      )
+    ] })
+  ] }) }) });
+}
+
+// src/components/features/board/types.ts
+var STATUS_DEFAULTS = {
+  ACTIVE: { label: "Active", color: "#5ea62e" },
+  AI_ASSISTANCE: { label: "AI Handling", color: "#888888" },
+  TECH_REQUIRED: { label: "Tech Required", color: "#e1b32f" },
+  ON_HOLD: { label: "On Hold", color: "#f36666" },
+  RESOLVED: { label: "Resolved", color: "#888888" },
+  ARCHIVED: { label: "Archived", color: "#3a3a3a" }
+};
+function columnFromTicketStatus(status, tickets, overrides = {}) {
+  const defaults = STATUS_DEFAULTS[status];
+  return {
+    id: status,
+    label: overrides.label ?? defaults.label,
+    color: overrides.color ?? defaults.color,
+    tooltip: overrides.tooltip,
+    tickets,
+    total: overrides.total,
+    hasMore: overrides.hasMore,
+    isLoading: overrides.isLoading,
+    isLoadingMore: overrides.isLoadingMore,
+    system: overrides.system,
+    dropDisabled: overrides.dropDisabled,
+    dragDisabled: overrides.dragDisabled,
+    allowedFromColumns: overrides.allowedFromColumns,
+    archivable: overrides.archivable
+  };
+}
+function groupTicketsByStatus(tickets, statuses) {
+  const buckets = {
+    ACTIVE: [],
+    AI_ASSISTANCE: [],
+    TECH_REQUIRED: [],
+    ON_HOLD: [],
+    RESOLVED: [],
+    ARCHIVED: []
+  };
+  for (const t of tickets) {
+    const canonical = canonicalize(t.status);
+    if (canonical) buckets[canonical].push(t);
+  }
+  return statuses.map((s) => columnFromTicketStatus(s, buckets[s]));
+}
+function canonicalize(status) {
+  const upper = status.toUpperCase().replace(/\s+/g, "_");
+  if (upper === "ACTION_REQUIRED") return "TECH_REQUIRED";
+  if (upper === "ACTIVE" || upper === "AI_ASSISTANCE" || upper === "TECH_REQUIRED" || upper === "ON_HOLD" || upper === "RESOLVED" || upper === "ARCHIVED") {
+    return upper;
+  }
+  return null;
+}
+
+export {
+  DeletedUserAvatar,
+  TouchFriendlyTooltip,
+  autoScrollBothWays,
+  autoScrollAncestors,
+  BoardColumnHeader,
+  tintOnDark,
+  holdMoveDragEffect,
+  BoardTicketApproval,
+  TicketCardBody,
+  TicketCardView,
+  TicketCard,
+  TicketCardSkeleton,
+  BoardColumn,
+  useBoardCollapse,
+  Board,
+  columnFromTicketStatus,
+  groupTicketsByStatus
+};