@mova-ui/react 0.4.4 → 0.4.5

package/registry/rudder-issue-board.json

@@ -1,7 +1,7 @@
 {
   "id": "rudder-issue-board",
   "tier": "free",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "file": "rudder-issue-board.tsx",
   "sourcePath": "ui/ai/rudder-issue-board.tsx",
   "registryFile": "rudder-issue-board.json",
@@ -20,5 +20,5 @@
   ],
   "license": "Apache-2.0",
   "previewMode": "client",
-  "content": "\"use client\";\n\"use client\";\n\n// SPDX-License-Identifier: Apache-2.0\n// Adapted from Rudder's KanbanBoard, StatusIcon, and PriorityIcon.\n// The bundled third-party notices retain Rudder's LICENSE and NOTICE.\nimport {\n  DndContext,\n  DragOverlay,\n  KeyboardSensor,\n  PointerSensor,\n  closestCenter,\n  pointerWithin,\n  useDroppable,\n  useSensor,\n  useSensors,\n  type CollisionDetection,\n  type DragCancelEvent,\n  type DragEndEvent,\n  type DragOverEvent,\n  type DragStartEvent,\n  type KeyboardCoordinateGetter,\n} from \"@dnd-kit/core\";\nimport { SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport { CalendarClock, FolderKanban, Plus, Tags, UserCheck, Filter, List, Columns3, SlidersHorizontal, ArrowUpDown, ChevronDown, Check } from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"framer-motion\";\nimport { Fragment, createContext, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, useId, type ReactNode, type RefObject } from \"react\";\n\nexport type BoardStatus = \"backlog\" | \"todo\" | \"in_progress\" | \"in_review\" | \"blocked\" | \"done\" | \"cancelled\";\n\nexport interface BoardIssue {\n  assignee: string;\n  created: string;\n  updated?: string;\n  id: string;\n  labels: string[];\n  priority: \"critical\" | \"high\" | \"medium\" | \"low\";\n  project: string;\n  reviewer?: string;\n  status: BoardStatus;\n  title: string;\n}\n\nexport interface RudderIssueBoardProps {\n  theme?: \"dark\" | \"light\";\n  className?: string;\n  initialIssues?: readonly BoardIssue[];\n  onIssuesChange?: (issues: BoardIssue[]) => void;\n}\n\nconst BOARD_STATUSES: readonly BoardStatus[] = [\"backlog\", \"todo\", \"in_progress\", \"in_review\", \"blocked\", \"done\", \"cancelled\"];\nconst AI_THEME_STYLES = \"/* Shared public tokens for the standalone AI component family. */\\n.mova-ai-theme {\\n  color-scheme: light;\\n  color: var(--mova-ai-ink, #202020);\\n  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \\\"Segoe UI\\\", sans-serif;\\n  font-size: 13px;\\n  line-height: 1.45;\\n  letter-spacing: -0.01em;\\n\\n  --mova-ai-page: #f7f7f7;\\n  --mova-ai-canvas: #f4f4f4;\\n  --mova-ai-surface: #ffffff;\\n  --mova-ai-inset: #f8f8f8;\\n  --mova-ai-hover: #f1f1f1;\\n  --mova-ai-hover-strong: #e9e9e9;\\n\\n  --mova-ai-ink: #202020;\\n  --mova-ai-ink-secondary: #666666;\\n  --mova-ai-ink-muted: #858585;\\n\\n  --mova-ai-border: #dedede;\\n  --mova-ai-border-soft: #ededed;\\n  --mova-ai-border-strong: #c8c8c8;\\n  --mova-ai-field: #f6f6f6;\\n  --mova-ai-grid: color-mix(in srgb, var(--mova-ai-border) 78%, transparent);\\n  --mova-ai-stripe: rgb(32 35 38 / 7%);\\n  --mova-ai-stripe-bg: #242424;\\n\\n  --mova-ai-accent: #454545;\\n  --mova-ai-accent-ink: #333333;\\n  --mova-ai-accent-foreground: #ffffff;\\n  --mova-ai-accent-tint: #eeeeee;\\n  --mova-ai-success: #28734d;\\n  --mova-ai-success-tint: #e8f3ec;\\n  --mova-ai-warning: #986517;\\n  --mova-ai-warning-tint: #f8f0df;\\n  --mova-ai-danger: #a33c3c;\\n  --mova-ai-danger-tint: #f7eaea;\\n  --mova-ai-info: #496b89;\\n  --mova-ai-info-tint: #eaf0f5;\\n  --mova-ai-neutral-status: #69737d;\\n  --mova-ai-status-on: #ffffff;\\n\\n  --mova-ai-tooltip-bg: #292929;\\n  --mova-ai-tooltip-fg: #f6f6f6;\\n  --mova-ai-tooltip-muted: #c3c3c3;\\n  --mova-ai-tooltip-border: #484848;\\n\\n  --mova-ai-radius-panel: 8px;\\n  --mova-ai-radius-control: 8px;\\n  --mova-ai-shadow-xs: 0 1px 2px rgb(22 28 33 / 5%);\\n  --mova-ai-shadow-sm: 0 2px 8px rgb(22 28 33 / 7%);\\n  --mova-ai-shadow-md: 0 8px 20px rgb(22 28 33 / 11%);\\n  --mova-ai-shadow-lg: 0 14px 32px rgb(22 28 33 / 15%);\\n  --mova-ai-shadow-hairline: 0 0 0 1px var(--mova-ai-border);\\n  --mova-ai-shadow-btn: 0 0 0 1px var(--mova-ai-border-strong), var(--mova-ai-shadow-xs);\\n  --mova-ai-shadow-card: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-sm);\\n  --mova-ai-shadow-raised: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-md);\\n  --mova-ai-shadow-overlay: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-lg);\\n  --mova-ai-shadow-inset-field: inset 0 1px 2px rgb(22 28 33 / 12%);\\n}\\n\\n.mova-ai-theme[data-theme=\\\"dark\\\"] {\\n  color-scheme: dark;\\n  --mova-ai-page: #181818;\\n  --mova-ai-canvas: #202020;\\n  --mova-ai-surface: #272727;\\n  --mova-ai-inset: #1d1d1d;\\n  --mova-ai-hover: #2d2d2d;\\n  --mova-ai-hover-strong: #393939;\\n\\n  --mova-ai-ink: #eeeeee;\\n  --mova-ai-ink-secondary: #b5b5b5;\\n  --mova-ai-ink-muted: #929292;\\n\\n  --mova-ai-border: #3b3b3b;\\n  --mova-ai-border-soft: #303030;\\n  --mova-ai-border-strong: #505050;\\n  --mova-ai-field: #2c2c2c;\\n  --mova-ai-grid: color-mix(in srgb, var(--mova-ai-border) 78%, transparent);\\n  --mova-ai-stripe: rgb(255 255 255 / 6%);\\n  --mova-ai-stripe-bg: #202528;\\n\\n  --mova-ai-accent: #c2c2c2;\\n  --mova-ai-accent-ink: #d5d5d5;\\n  --mova-ai-accent-foreground: #202020;\\n  --mova-ai-accent-tint: #353535;\\n  --mova-ai-success: #88c7a0;\\n  --mova-ai-success-tint: #293b30;\\n  --mova-ai-warning: #d7b66f;\\n  --mova-ai-warning-tint: #3c3525;\\n  --mova-ai-danger: #e5928e;\\n  --mova-ai-danger-tint: #3c2b2b;\\n  --mova-ai-info: #9bbbd6;\\n  --mova-ai-info-tint: #293541;\\n  --mova-ai-neutral-status: #a0a0a0;\\n  --mova-ai-status-on: #181818;\\n\\n  --mova-ai-tooltip-bg: #121212;\\n  --mova-ai-tooltip-fg: #eeeeee;\\n  --mova-ai-tooltip-muted: #b5b5b5;\\n  --mova-ai-tooltip-border: #3b3b3b;\\n\\n  --mova-ai-shadow-xs: 0 1px 2px rgb(0 0 0 / 22%);\\n  --mova-ai-shadow-sm: 0 2px 8px rgb(0 0 0 / 25%);\\n  --mova-ai-shadow-md: 0 8px 20px rgb(0 0 0 / 30%);\\n  --mova-ai-shadow-lg: 0 14px 32px rgb(0 0 0 / 38%);\\n  --mova-ai-shadow-hairline: 0 0 0 1px var(--mova-ai-border);\\n  --mova-ai-shadow-btn: 0 0 0 1px var(--mova-ai-border-strong), var(--mova-ai-shadow-xs);\\n  --mova-ai-shadow-card: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-sm);\\n  --mova-ai-shadow-raised: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-md);\\n  --mova-ai-shadow-overlay: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-lg);\\n  --mova-ai-shadow-inset-field: inset 0 1px 2px rgb(0 0 0 / 42%);\\n}\\n\";\n\nconst createBoardKeyboardCoordinates = (\n  getHorizontalTarget: () => BoardStatus | null,\n  onHorizontalTarget: (status: BoardStatus | null) => void,\n): KeyboardCoordinateGetter => (event, args) => {\n  if (event.code !== \"ArrowLeft\" && event.code !== \"ArrowRight\") {\n    onHorizontalTarget(null);\n    return sortableKeyboardCoordinates(event, args);\n  }\n\n  event.preventDefault();\n  const { context } = args;\n  const currentStatus = String(getHorizontalTarget() ?? context.active?.data.current?.status ?? \"\") as BoardStatus;\n  const lanes: Array<{ rect: NonNullable<ReturnType<typeof context.droppableRects.get>>; status: BoardStatus }> = [];\n\n  context.droppableContainers.getEnabled().forEach((container) => {\n    const data = container.data.current;\n    if (data?.type !== \"column\" && data?.type !== \"hidden-column\") return;\n    const rect = context.droppableRects.get(container.id);\n    if (rect && BOARD_STATUSES.includes(data.status as BoardStatus)) {\n      lanes.push({ rect, status: data.status as BoardStatus });\n    }\n  });\n\n  lanes.sort((a, b) => a.rect.left - b.rect.left || a.rect.top - b.rect.top);\n  const currentIndex = lanes.findIndex((lane) => lane.status === currentStatus);\n  const targetIndex = currentIndex + (event.code === \"ArrowRight\" ? 1 : -1);\n  const targetLane = lanes[targetIndex];\n  if (!targetLane) {\n    onHorizontalTarget(null);\n    return;\n  }\n  onHorizontalTarget(targetLane.status);\n\n  const currentCenterY = context.collisionRect\n    ? context.collisionRect.top + context.collisionRect.height / 2\n    : targetLane.rect.top;\n  let targetRect = targetLane.rect;\n  let nearestDistance = Number.POSITIVE_INFINITY;\n\n  context.droppableContainers.getEnabled().forEach((container) => {\n    const data = container.data.current;\n    if (data?.type !== \"issue\" || data.status !== targetLane.status) return;\n    const rect = context.droppableRects.get(container.id);\n    if (!rect) return;\n    const distance = Math.abs(rect.top + rect.height / 2 - currentCenterY);\n    if (distance < nearestDistance) {\n      nearestDistance = distance;\n      targetRect = rect;\n    }\n  });\n\n  const activeRect = context.collisionRect;\n  return {\n    x: targetRect.left + (targetRect.width - (activeRect?.width ?? 0)) / 2,\n    y: targetRect.top + (targetRect.height - (activeRect?.height ?? 0)) / 2,\n  };\n};\n\nconst STATUS_META: Record<BoardStatus, { color: string; label: string; lane: string; laneOver: string }> = {\n  backlog: { color: \"var(--mova-ai-neutral-status)\", label: \"Backlog\", lane: \"border-[var(--mova-ai-border,#3b3b3b)] bg-[var(--mova-ai-canvas,#202020)]\", laneOver: \"border-[var(--mova-ai-border-strong,#505050)] bg-[var(--mova-ai-hover,#2d2d2d)]\" },\n  todo: { color: \"var(--mova-ai-neutral-status)\", label: \"To do\", lane: \"border-[var(--mova-ai-border,#3b3b3b)] bg-[var(--mova-ai-canvas,#202020)]\", laneOver: \"border-[var(--mova-ai-border-strong,#505050)] bg-[var(--mova-ai-hover,#2d2d2d)]\" },\n  in_progress: { color: \"var(--mova-ai-info)\", label: \"In progress\", lane: \"border-[var(--mova-ai-border,#3b3b3b)] bg-[var(--mova-ai-canvas,#202020)]\", laneOver: \"border-[var(--mova-ai-border-strong,#505050)] bg-[var(--mova-ai-hover,#2d2d2d)]\" },\n  in_review: { color: \"var(--mova-ai-warning)\", label: \"In review\", lane: \"border-[var(--mova-ai-border,#3b3b3b)] bg-[var(--mova-ai-canvas,#202020)]\", laneOver: \"border-[var(--mova-ai-border-strong,#505050)] bg-[var(--mova-ai-hover,#2d2d2d)]\" },\n  blocked: { color: \"var(--mova-ai-danger)\", label: \"Blocked\", lane: \"border-[var(--mova-ai-border,#3b3b3b)] bg-[var(--mova-ai-canvas,#202020)]\", laneOver: \"border-[var(--mova-ai-border-strong,#505050)] bg-[var(--mova-ai-hover,#2d2d2d)]\" },\n  done: { color: \"var(--mova-ai-success)\", label: \"Done\", lane: \"border-[var(--mova-ai-border,#3b3b3b)] bg-[var(--mova-ai-canvas,#202020)]\", laneOver: \"border-[var(--mova-ai-border-strong,#505050)] bg-[var(--mova-ai-hover,#2d2d2d)]\" },\n  cancelled: { color: \"var(--mova-ai-neutral-status)\", label: \"Cancelled\", lane: \"border-[var(--mova-ai-border,#3b3b3b)] bg-[var(--mova-ai-canvas,#202020)]\", laneOver: \"border-[var(--mova-ai-border-strong,#505050)] bg-[var(--mova-ai-hover,#2d2d2d)]\" },\n};\n\nconst DEFAULT_ISSUES: readonly BoardIssue[] = [\n  { id: \"R6Z-141\", title: \"Retire legacy Node backend, CLI, and MCP authorities\", status: \"backlog\", priority: \"high\", assignee: \"Noah\", project: \"Rudder-dev\", labels: [\"Feature\"], created: \"Aug 20\" },\n  { id: \"R6Z-140\", title: \"Cut over the public listener and Rust authorities\", status: \"backlog\", priority: \"high\", assignee: \"Avery\", project: \"Rudder-dev\", labels: [\"Feature\"], created: \"Aug 20\" },\n  { id: \"R6Z-170\", title: \"Proposal: add history versions and Diff view\", status: \"todo\", priority: \"medium\", assignee: \"Luca\", project: \"Rudder-dev\", labels: [\"Feature\"], created: \"Aug 27\" },\n  { id: \"R6Z-166\", title: \"Define the issue event contract for agent handoffs\", status: \"todo\", priority: \"medium\", assignee: \"Mira\", project: \"Rudder-dev\", labels: [\"Spec\"], created: \"Aug 26\" },\n  { id: \"R6Z-181\", title: \"Share 500-index issue context through MCP and CLI\", status: \"in_progress\", priority: \"high\", assignee: \"Sana\", project: \"Rudder-dev\", labels: [\"Feature\"], created: \"Aug 30\" },\n  { id: \"R6Z-210\", title: \"Re-run the Rust output spool after a capacity failure\", status: \"in_progress\", priority: \"high\", assignee: \"Noah\", reviewer: \"Mira\", project: \"Rudder-dev\", labels: [\"Bug\"], created: \"Sep 14\" },\n  { id: \"R6Z-207\", title: \"Remove the loaded Issues hint from the shell\", status: \"done\", priority: \"medium\", assignee: \"Theo\", project: \"Rudder-dev\", labels: [\"Feature\"], created: \"Aug 19\" },\n];\n\nfunction StatusIcon({ status }: { status: BoardStatus }) {\n  const common = { stroke: \"currentColor\", strokeWidth: 2, strokeLinecap: \"round\" as const };\n  return (\n    <span className=\"inline-flex h-4 w-4 shrink-0 items-center justify-center\" data-slot=\"issue-status-icon\" data-status={status} style={{ color: STATUS_META[status].color }} aria-hidden=\"true\">\n      <svg viewBox=\"0 0 16 16\" className=\"h-full w-full overflow-visible\" fill=\"none\">\n        {status === \"backlog\" ? <circle cx=\"8\" cy=\"8\" r=\"5.5\" {...common} strokeDasharray=\"1 3\" /> : null}\n        {status === \"todo\" ? <circle cx=\"8\" cy=\"8\" r=\"5.5\" {...common} /> : null}\n        {status === \"in_progress\" ? <><circle cx=\"8\" cy=\"8\" r=\"5.5\" {...common} opacity=\"0.22\" /><path d=\"M8 2.5a5.5 5.5 0 0 1 5.5 5.5\" {...common} strokeWidth=\"2.4\" /><path d=\"M13.5 8a5.5 5.5 0 0 1-5.5 5.5\" {...common} strokeWidth=\"2.4\" opacity=\"0.72\" /></> : null}\n        {status === \"in_review\" ? <><circle cx=\"8\" cy=\"8\" r=\"5.5\" {...common} /><circle cx=\"8\" cy=\"8\" r=\"2\" fill=\"currentColor\" /></> : null}\n        {status === \"done\" ? <><circle cx=\"8\" cy=\"8\" r=\"6.5\" fill=\"currentColor\" /><path d=\"M4.75 8.25 7 10.5l4.25-5\" stroke=\"var(--mova-ai-status-on,#fff)\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" /></> : null}\n        {status === \"cancelled\" ? <><circle cx=\"8\" cy=\"8\" r=\"6\" fill=\"currentColor\" opacity=\"0.16\" /><circle cx=\"8\" cy=\"8\" r=\"5.5\" {...common} /><path d=\"m5.25 5.25 5.5 5.5m0-5.5-5.5 5.5\" {...common} /></> : null}\n        {status === \"blocked\" ? <><path d=\"M5.1 2.25h5.8l3.05 3.05v5.4l-3.05 3.05H5.1L2.05 10.7V5.3Z\" {...common} strokeLinejoin=\"round\" /><path d=\"m5.25 5.25 5.5 5.5\" {...common} /></> : null}\n      </svg>\n    </span>\n  );\n}\n\nfunction PriorityIcon({ priority }: { priority: BoardIssue[\"priority\"] }) {\n  const active = priority === \"critical\" ? 4 : priority === \"high\" ? 3 : priority === \"medium\" ? 2 : 1;\n  const tone = priority === \"critical\" ? \"var(--mova-ai-danger)\" : priority === \"high\" ? \"var(--mova-ai-warning)\" : priority === \"medium\" ? \"var(--mova-ai-info)\" : \"var(--mova-ai-neutral-status)\";\n  const heights = [4, 6, 10, 14];\n  return (\n    <span className=\"inline-flex h-3.5 w-4 items-end gap-[2px]\" style={{ color: tone }} aria-hidden=\"true\">\n      {heights.map((height, index) => <span className=\"w-[3px] rounded-[1px] bg-current\" key={height} style={{ height: `${height}px`, opacity: index < active ? 1 : 0.25 }} />)}\n    </span>\n  );\n}\n\nconst DISPLAY_FIELDS = [\"Identifier\", \"Priority\", \"Assignee\", \"Reviewer\", \"Labels\", \"Project\", \"Updated\", \"Created\"] as const;\ntype DisplayField = typeof DISPLAY_FIELDS[number];\nconst DisplayContext = createContext<readonly DisplayField[]>(DISPLAY_FIELDS.filter((field) => field !== \"Updated\"));\n\nfunction MemberAvatar({ name }: { name: string }) {\n  return <span aria-hidden=\"true\" className=\"inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-[var(--mova-ai-hover-strong,#e9e9e9)] text-[9px] font-semibold text-[color:var(--mova-ai-ink,#202020)]\">{name.slice(0, 1)}</span>;\n}\n\nfunction IssueListRow({ issue }: { issue: BoardIssue }) {\n  const display = useContext(DisplayContext);\n  return <article className=\"rudder-list-row border-b border-[var(--mova-ai-border-soft,#ededed)] px-4 py-3\" data-testid={`issue-row-${issue.id}`}>\n    <div className=\"flex min-w-0 items-start gap-2.5\">\n      <span className=\"mt-0.5\" title={STATUS_META[issue.status].label}><span className=\"sr-only\">{STATUS_META[issue.status].label}</span><StatusIcon status={issue.status} /></span>\n      {display.includes(\"Identifier\") ? <span className=\"shrink-0 pt-0.5 font-mono text-xs text-[color:var(--mova-ai-ink-muted,#858585)]\">{issue.id}</span> : null}\n      <h3 className=\"min-w-0 flex-1 break-words text-sm font-medium leading-relaxed text-[color:var(--mova-ai-ink,#202020)]\">{issue.title}</h3>\n    </div>\n    <div className=\"rudder-list-meta flex min-w-0 flex-wrap items-center gap-x-3 gap-y-2 text-xs text-[color:var(--mova-ai-ink-secondary,#666)]\">\n      {display.includes(\"Priority\") ? <span title={`${issue.priority} priority`}><span className=\"sr-only\">{issue.priority} priority</span><PriorityIcon priority={issue.priority} /></span> : null}\n      {display.includes(\"Labels\") ? issue.labels.map((label) => <span key={label} className=\"inline-flex max-w-full items-center gap-1.5 rounded-full border border-[var(--mova-ai-border,#dedede)] px-2 py-0.5\"><span className=\"h-1.5 w-1.5 shrink-0 rounded-full bg-[var(--mova-ai-neutral-status,#69737d)]\" /><span className=\"break-words\">{label}</span></span>) : null}\n      {display.includes(\"Assignee\") ? <span className=\"inline-flex min-w-0 items-center gap-1.5\"><MemberAvatar name={issue.assignee} /><span className=\"break-words\">{issue.assignee}</span></span> : null}\n      {display.includes(\"Reviewer\") && issue.reviewer ? <span className=\"inline-flex items-center gap-1\" title=\"Reviewer\"><UserCheck className=\"h-3 w-3 shrink-0\" />{issue.reviewer}</span> : null}\n      {display.includes(\"Project\") ? <span className=\"rudder-list-project break-words\">{issue.project}</span> : null}\n      {display.includes(\"Created\") ? <span className=\"whitespace-nowrap\">{issue.created}</span> : null}\n      {display.includes(\"Updated\") ? <span className=\"whitespace-nowrap\">Updated {issue.updated ?? issue.created}</span> : null}\n    </div>\n  </article>;\n}\n\nfunction IssueCardBody({ issue }: { issue: BoardIssue }) {\n  const display = useContext(DisplayContext);\n  return (\n    <div className=\"min-w-0\">\n      <div className=\"flex min-w-0 items-start gap-2\">\n        <span className=\"min-w-0 flex-1 font-mono text-xs text-[color:var(--mova-ai-ink-muted,#858585)]\">{display.includes(\"Identifier\") ? issue.id : \"\"}</span>\n        {display.includes(\"Assignee\") ? <span className=\"inline-flex min-w-0 max-w-[8.5rem] shrink items-center gap-1 overflow-hidden text-xs text-[color:var(--mova-ai-ink-secondary,#666)]\">\n          <MemberAvatar name={issue.assignee} />\n          <span className=\"truncate\">{issue.assignee}</span>\n        </span> : null}\n      </div>\n      <p className=\"mt-2 break-words text-sm leading-snug text-[color:var(--mova-ai-ink,#202020)]\">{issue.title}</p>\n      {display.includes(\"Priority\") ? <div className=\"mt-2 flex min-w-0 items-center gap-1.5 overflow-hidden text-xs text-[color:var(--mova-ai-ink-muted,#858585)]\">\n        <PriorityIcon priority={issue.priority} />\n        <span className=\"capitalize\">{issue.priority}</span>\n      </div> : null}\n      <div className=\"mt-2 space-y-1.5 border-t border-[var(--mova-ai-border-soft,#ededed)] pt-2 text-xs text-[color:var(--mova-ai-ink-muted,#858585)]\">\n        {display.includes(\"Project\") ? <div className=\"grid min-w-0 grid-cols-[4.5rem_minmax(0,1fr)] items-center gap-2\"><span className=\"inline-flex items-center gap-1.5\"><FolderKanban className=\"h-3 w-3\" />Project</span><span className=\"truncate text-right\">{issue.project}</span></div> : null}\n        {display.includes(\"Reviewer\") && issue.reviewer ? <div className=\"grid min-w-0 grid-cols-[4.5rem_minmax(0,1fr)] items-center gap-2\"><span className=\"inline-flex items-center gap-1.5\"><UserCheck className=\"h-3 w-3\" />Reviewer</span><span className=\"truncate text-right\">{issue.reviewer}</span></div> : null}\n        {display.includes(\"Labels\") ? <div className=\"grid min-w-0 grid-cols-[4.5rem_minmax(0,1fr)] items-center gap-2\"><span className=\"inline-flex items-center gap-1.5\"><Tags className=\"h-3 w-3\" />Labels</span><span className=\"truncate text-right\"><span className=\"inline-flex items-center gap-1 rounded-full border border-[var(--mova-ai-border,#dedede)] px-1.5 py-0.5 text-[10px]\"><span className=\"h-1.5 w-1.5 rounded-full bg-[var(--mova-ai-neutral-status,#69737d)]\" />{issue.labels[0] ?? \"None\"}</span></span></div> : null}\n        {display.includes(\"Created\") ? <div className=\"grid min-w-0 grid-cols-[4.5rem_minmax(0,1fr)] items-center gap-2\"><span className=\"inline-flex items-center gap-1.5\"><CalendarClock className=\"h-3 w-3\" />Created</span><span className=\"truncate text-right\">{issue.created}</span></div> : null}\n        {display.includes(\"Updated\") ? <div className=\"grid grid-cols-[4.5rem_minmax(0,1fr)] gap-2\"><span>Updated</span><span className=\"truncate text-right\">{issue.updated ?? issue.created}</span></div> : null}\n      </div>\n    </div>\n  );\n}\n\nfunction SortableIssueCard({ issue }: { issue: BoardIssue }) {\n  const { attributes, isDragging, listeners, setNodeRef, transform, transition } = useSortable({ id: issue.id, data: { status: issue.status, type: \"issue\" } });\n  return (\n    <article\n      ref={setNodeRef}\n      style={{ transform: CSS.Transform.toString(transform), transition }}\n      {...attributes}\n      {...listeners}\n      className={`motion-kanban-card cursor-grab touch-pan-x overflow-hidden rounded-[9px] border border-[var(--mova-ai-border,#dedede)] bg-[var(--mova-ai-surface,#fff)] p-2.5 outline-none transition-[box-shadow,opacity,border-color] motion-reduce:transition-none focus-visible:border-[var(--mova-ai-border-strong,#c8c8c8)] focus-visible:ring-2 focus-visible:ring-[var(--mova-ai-border-strong,#c8c8c8)] active:cursor-grabbing ${isDragging ? \"opacity-25\" : \"hover:border-[var(--mova-ai-border-strong,#c8c8c8)] hover:shadow-sm\"}`}\n      data-dragging={isDragging ? \"true\" : \"false\"}\n      data-issue-id={issue.id}\n      data-testid={`kanban-card-${issue.id}`}\n    >\n      <IssueCardBody issue={issue} />\n    </article>\n  );\n}\n\nfunction BoardColumn({ issues, status, onCreate }: { issues: BoardIssue[]; status: BoardStatus; onCreate: (status: BoardStatus, trigger: HTMLElement) => void }) {\n  const { isOver, setNodeRef } = useDroppable({ id: status, data: { status, type: \"column\" } });\n  const meta = STATUS_META[status];\n  return (\n    <div className=\"flex min-h-0 w-[260px] min-w-[260px] shrink-0 flex-col\">\n      <div className=\"mb-1 flex items-center gap-2 px-2 py-2\">\n        <StatusIcon status={status} />\n        <span className=\"text-xs font-semibold uppercase tracking-wide text-[color:var(--mova-ai-ink-secondary,#666)]\">{meta.label}</span>\n        <span className=\"ml-auto text-xs tabular-nums text-[color:var(--mova-ai-ink-muted,#858585)]\">{issues.length}</span>\n        <button type=\"button\" onClick={(event) => onCreate(status, event.currentTarget)} aria-label={`Create issue in ${meta.label}`} className=\"rounded p-1 hover:bg-[var(--mova-ai-hover-strong,#e9e9e9)] focus-visible:ring-2 focus-visible:ring-[var(--mova-ai-border-strong,#c8c8c8)]\"><Plus className=\"h-3.5 w-3.5 text-[color:var(--mova-ai-ink-muted,#858585)]\" aria-hidden=\"true\" /></button>\n      </div>\n      <div\n        ref={setNodeRef}\n        className={`motion-kanban-lane min-h-[160px] flex-1 space-y-1.5 overflow-y-auto rounded-[9px] border p-1.5 transition-colors motion-reduce:transition-none ${isOver ? meta.laneOver : meta.lane}`}\n        data-over={isOver ? \"true\" : \"false\"}\n        data-testid={`kanban-column-${status}`}\n      >\n        <SortableContext items={issues.map((issue) => issue.id)} strategy={verticalListSortingStrategy}>\n          {issues.map((issue) => <Fragment key={issue.id}><SortableIssueCard issue={issue} /></Fragment>)}\n        </SortableContext>\n      </div>\n    </div>\n  );\n}\n\nfunction HiddenStatus({ status, onCreate }: { status: BoardStatus; onCreate: (status: BoardStatus, trigger: HTMLElement) => void }) {\n  const { isOver, setNodeRef } = useDroppable({ id: status, data: { status, type: \"hidden-column\" } });\n  const meta = STATUS_META[status];\n  return (\n    <div ref={setNodeRef} className={`motion-kanban-lane flex items-center gap-2 rounded-[9px] border px-2 py-2 transition-colors motion-reduce:transition-none ${isOver ? meta.laneOver : meta.lane}`} data-over={isOver ? \"true\" : \"false\"} data-testid={`kanban-hidden-column-${status}`}>\n      <StatusIcon status={status} />\n      <span className=\"min-w-0 flex-1 text-xs font-semibold uppercase tracking-wide text-[color:var(--mova-ai-ink-secondary,#666)]\">{meta.label}</span>\n      <span className=\"text-xs tabular-nums text-[color:var(--mova-ai-ink-muted,#858585)]\">0</span>\n      <button type=\"button\" onClick={(event) => onCreate(status, event.currentTarget)} aria-label={`Create issue in ${meta.label}`} className=\"rounded p-1 hover:bg-[var(--mova-ai-hover-strong,#e9e9e9)] focus-visible:ring-2 focus-visible:ring-[var(--mova-ai-border-strong,#c8c8c8)]\"><Plus className=\"h-3.5 w-3.5 text-[color:var(--mova-ai-ink-muted,#858585)]\" aria-hidden=\"true\" /></button>\n    </div>\n  );\n}\n\nfunction ToolbarPopover({ label, icon, children, triggerRef }: { label: string; icon: ReactNode; children: ReactNode; triggerRef?: RefObject<HTMLButtonElement | null> }) {\n  const reducedMotion = useReducedMotion();\n  const [open, setOpen] = useState(false);\n  const root = useRef<HTMLDivElement>(null);\n  const trigger = useRef<HTMLButtonElement>(null);\n  const panel = useRef<HTMLDivElement>(null);\n  const id = useId();\n  useLayoutEffect(() => {\n    if (!open) return;\n    const container = root.current;\n    const popup = panel.current;\n    const board = container?.closest<HTMLElement>('section[aria-label=\"Rudder issue board\"]');\n    if (!container || !popup || !board) return;\n    const position = () => {\n      const anchor = container.getBoundingClientRect();\n      const bounds = board.getBoundingClientRect();\n      // Convert viewport measurements back to local CSS pixels for scaled previews.\n      const scale = container.offsetWidth ? anchor.width / container.offsetWidth : 1;\n      if (!scale) return;\n      const inset = 8 * scale;\n      popup.style.maxWidth = `${Math.max(0, (bounds.width - inset * 2) / scale)}px`;\n      const width = popup.getBoundingClientRect().width;\n      const left = Math.max(bounds.left + inset, Math.min(anchor.right - width, bounds.right - inset - width));\n      popup.style.left = `${(left - anchor.left) / scale}px`;\n      popup.style.right = \"auto\";\n    };\n    position();\n    const observer = new ResizeObserver(position);\n    observer.observe(board);\n    observer.observe(container);\n    window.addEventListener(\"resize\", position);\n    return () => { observer.disconnect(); window.removeEventListener(\"resize\", position); };\n  }, [open]);\n  useEffect(() => {\n    if (!open) return;\n    panel.current?.querySelector<HTMLElement>(\"input:checked, button, input\")?.focus();\n    const dismiss = (event: PointerEvent) => {\n      if (!root.current?.contains(event.target as Node)) { setOpen(false); trigger.current?.focus(); }\n    };\n    document.addEventListener(\"pointerdown\", dismiss);\n    return () => document.removeEventListener(\"pointerdown\", dismiss);\n  }, [open]);\n  return <div ref={root} className=\"relative\" onBlur={(event) => { if (event.relatedTarget && !event.currentTarget.contains(event.relatedTarget as Node)) setOpen(false); }} onKeyDown={(event) => { if (event.key === \"Escape\" && open) { event.preventDefault(); event.stopPropagation(); setOpen(false); trigger.current?.focus(); } }}>\n    <button ref={(node) => { trigger.current = node; if (triggerRef) triggerRef.current = node; }} type=\"button\" aria-label={label === \"Sort\" ? \"Sort issues\" : label === \"Filter\" ? \"Filter issues by status\" : \"Display fields\"} aria-expanded={open} aria-controls={id} onClick={() => setOpen((value) => !value)} className={`flex items-center gap-1.5 rounded-md px-2 py-1.5 transition-colors hover:bg-[var(--mova-ai-hover,#f1f1f1)] ${open ? \"bg-[var(--mova-ai-hover-strong,#e9e9e9)] text-[color:var(--mova-ai-ink,#202020)]\" : \"\"}`}>{icon}{label}<ChevronDown className=\"h-3 w-3\" /></button>\n    <AnimatePresence initial={false}>{open ? <motion.div key=\"panel\" ref={panel} id={id} role=\"group\" aria-label={`${label} options`} initial={{ opacity: 0, y: reducedMotion ? 0 : -4 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: reducedMotion ? 0 : -3 }} transition={{ duration: reducedMotion ? 0 : 0.16, ease: [0.22, 1, 0.36, 1] }} className=\"absolute right-0 z-30 mt-2 w-48 space-y-1 rounded-lg border border-[var(--mova-ai-border,#dedede)] bg-[var(--mova-ai-surface,#fff)] p-2 text-xs shadow-xl\">{children}</motion.div> : null}</AnimatePresence>\n  </div>;\n}\n\nfunction resolveTargetStatus(overId: string, issues: BoardIssue[]): BoardStatus | null {\n  if (BOARD_STATUSES.includes(overId as BoardStatus)) return overId as BoardStatus;\n  return issues.find((issue) => issue.id === overId)?.status ?? null;\n}\n\nexport function RudderIssueBoard({ theme = \"dark\", className = \"\", initialIssues = DEFAULT_ISSUES, onIssuesChange }: RudderIssueBoardProps) {\n  const rootRef = useRef<HTMLElement>(null);\n  const sortGroupId = useId();\n  const keyboardTargetRef = useRef<BoardStatus | null>(null);\n  const [issues, setIssues] = useState<BoardIssue[]>(() => [...initialIssues]);\n  const [statusFilter, setStatusFilter] = useState(\"all\");\n  const [sort, setSort] = useState(\"Manual\");\n  const [descending, setDescending] = useState(false);\n  const [view, setView] = useState<\"board\" | \"list\">(\"board\");\n  const [display, setDisplay] = useState<DisplayField[]>(DISPLAY_FIELDS.filter((field) => field !== \"Updated\"));\n  const [creating, setCreating] = useState<BoardStatus | null>(null);\n  const [draft, setDraft] = useState(\"\");\n  const createInputRef = useRef<HTMLInputElement>(null);\n  const createTriggerRef = useRef<HTMLElement | null>(null);\n  const listCreateRef = useRef<HTMLButtonElement>(null);\n  const statusFilterRef = useRef<HTMLButtonElement>(null);\n  const createOpen = creating !== null;\n  const restoreCreateFocus = () => requestAnimationFrame(() => {\n    const original = createTriggerRef.current;\n    (original?.isConnected ? original : listCreateRef.current ?? statusFilterRef.current)?.focus();\n  });\n  const openCreate = (status: BoardStatus, trigger: HTMLElement) => { createTriggerRef.current = trigger; setCreating(status); setDraft(\"\"); };\n  const closeCreate = () => { setCreating(null); restoreCreateFocus(); };\n  useEffect(() => { if (createOpen) createInputRef.current?.focus(); }, [createOpen]);\n  const orderedIssues = useMemo(() => {\n    const matches = issues;\n    if (sort === \"Manual\") return matches;\n    const dateValue = (value: string): string | number => { const timestamp = Date.parse(value); return Number.isNaN(timestamp) ? value : timestamp; };\n    return [...matches].sort((a, b) => {\n      const value = (issue: BoardIssue): string | number => sort === \"Status\" ? BOARD_STATUSES.indexOf(issue.status) : sort === \"Priority\" ? [\"critical\", \"high\", \"medium\", \"low\"].indexOf(issue.priority) : sort === \"Title\" ? issue.title : dateValue(sort === \"Updated\" ? issue.updated ?? issue.created : issue.created);\n      const av = value(a), bv = value(b);\n      const delta = typeof av === \"number\" && typeof bv === \"number\" ? av - bv : String(av).localeCompare(String(bv), undefined, { numeric: true });\n      return descending ? -delta : delta;\n    });\n  }, [issues, sort, descending]);\n  const filtered = useMemo(() => orderedIssues.filter((issue) => statusFilter === \"all\" || issue.status === statusFilter), [orderedIssues, statusFilter]);\n  const [activeId, setActiveId] = useState<string | null>(null);\n  const [overStatus, setOverStatus] = useState<BoardStatus | null>(null);\n  const [announcement, setAnnouncement] = useState(\"Issue board ready. Pick up a card to move it between status columns.\");\n  const [reduceMotion, setReduceMotion] = useState(false);\n  const keyboardCoordinates = useMemo(\n    () => createBoardKeyboardCoordinates(\n      () => keyboardTargetRef.current,\n      (status) => { keyboardTargetRef.current = status; },\n    ),\n    [],\n  );\n  const sensors = useSensors(\n    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),\n    useSensor(KeyboardSensor, { coordinateGetter: keyboardCoordinates }),\n  );\n  const grouped = useMemo(() => Object.fromEntries(BOARD_STATUSES.map((status) => [status, filtered.filter((issue) => issue.status === status)])) as Record<BoardStatus, BoardIssue[]>, [filtered]);\n  const visibleStatuses = BOARD_STATUSES.filter((status) => grouped[status].length > 0);\n  const hiddenStatuses = BOARD_STATUSES.filter((status) => grouped[status].length === 0);\n  const activeIssue = activeId ? issues.find((issue) => issue.id === activeId) ?? null : null;\n\n  useEffect(() => {\n    const media = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n    const update = () => setReduceMotion(media.matches);\n    update();\n    media.addEventListener(\"change\", update);\n    return () => media.removeEventListener(\"change\", update);\n  }, []);\n\n  const collisionDetection: CollisionDetection = (args) => {\n    if (!args.pointerCoordinates && keyboardTargetRef.current) {\n      const target = args.droppableContainers.find((container) => container.id === keyboardTargetRef.current);\n      if (target) return [{ id: target.id, data: { droppableContainer: target, value: 0 } }];\n    }\n    const pointerCollisions = pointerWithin(args);\n    if (pointerCollisions.length > 0) {\n      const issueCollision = pointerCollisions.find(({ id }) =>\n        args.droppableContainers.find((container) => container.id === id)?.data.current?.type === \"issue\"\n      );\n      if (issueCollision) return [issueCollision];\n\n      const laneCollision = pointerCollisions.find(({ id }) => {\n        const type = args.droppableContainers.find((container) => container.id === id)?.data.current?.type;\n        return type === \"column\" || type === \"hidden-column\";\n      });\n      const lane = laneCollision\n        ? args.droppableContainers.find((container) => container.id === laneCollision.id)\n        : null;\n      const targetStatus = lane?.data.current?.status as BoardStatus | undefined;\n      const laneIssues = targetStatus\n        ? args.droppableContainers.filter((container) =>\n            container.id !== args.active.id\n            && container.data.current?.type === \"issue\"\n            && container.data.current?.status === targetStatus\n          )\n        : [];\n      const laneIssueBottom = Math.max(\n        ...laneIssues.map((container) => args.droppableRects.get(container.id)?.bottom ?? Number.NEGATIVE_INFINITY),\n      );\n      if (args.pointerCoordinates && args.pointerCoordinates.y <= laneIssueBottom) {\n        const nearestIssue = closestCenter({ ...args, droppableContainers: laneIssues })[0];\n        if (nearestIssue) return [nearestIssue];\n      }\n\n      return pointerCollisions;\n    }\n    return closestCenter(args);\n  };\n\n  const clearDrag = (event?: DragCancelEvent) => {\n    keyboardTargetRef.current = null;\n    setActiveId(null);\n    setOverStatus(null);\n    if (event) setAnnouncement(\"Move cancelled.\");\n  };\n\n  const handleDragStart = ({ active }: DragStartEvent) => {\n    const issue = issues.find((candidate) => candidate.id === String(active.id));\n    setActiveId(String(active.id));\n    if (issue) setAnnouncement(`Picked up ${issue.id}. Current status: ${STATUS_META[issue.status].label}.`);\n  };\n\n  const handleDragOver = ({ over }: DragOverEvent) => {\n    setOverStatus(over ? resolveTargetStatus(String(over.id), issues) : null);\n  };\n\n  const handleDragEnd = ({ active, over }: DragEndEvent) => {\n    clearDrag();\n    if (!over) {\n      setAnnouncement(\"Move cancelled.\");\n      return;\n    }\n    const activeIssueId = String(active.id);\n    const overId = String(over.id);\n    const targetStatus = resolveTargetStatus(overId, issues);\n    const movingIssue = issues.find((issue) => issue.id === activeIssueId);\n    if (!targetStatus || !movingIssue) return;\n\n    const sourceStatus = movingIssue.status;\n    const allGrouped = Object.fromEntries(BOARD_STATUSES.map((status) => [status, orderedIssues.filter((issue) => issue.status === status)])) as Record<BoardStatus, BoardIssue[]>;\n    const targetLaneBeforeMove = allGrouped[targetStatus];\n    const nextByStatus = Object.fromEntries(BOARD_STATUSES.map((status) => [status, allGrouped[status].filter((issue) => issue.id !== activeIssueId)])) as Record<BoardStatus, BoardIssue[]>;\n    const targetLane = nextByStatus[targetStatus];\n    const overIndex = targetLaneBeforeMove.findIndex((issue) => issue.id === overId);\n    const insertAt = overIndex >= 0 ? Math.min(overIndex, targetLane.length) : targetLane.length;\n    targetLane.splice(insertAt, 0, { ...movingIssue, status: targetStatus });\n    const nextIssues = BOARD_STATUSES.flatMap((status) => nextByStatus[status]);\n\n    if (sourceStatus !== targetStatus || nextIssues.map((issue) => issue.id).join(\"|\") !== issues.map((issue) => issue.id).join(\"|\")) {\n      setSort(\"Manual\");\n      setIssues(nextIssues);\n      onIssuesChange?.(nextIssues);\n      setAnnouncement(`${movingIssue.id} moved to ${STATUS_META[targetStatus].label}.`);\n      requestAnimationFrame(() => requestAnimationFrame(() => {\n        const movedCard = Array.from(rootRef.current?.querySelectorAll<HTMLElement>(\"[data-issue-id]\") ?? [])\n          .find((card) => card.dataset.issueId === activeIssueId);\n        (movedCard ?? statusFilterRef.current)?.focus({ preventScroll: true });\n      }));\n    } else {\n      setAnnouncement(`${movingIssue.id} stayed in ${STATUS_META[targetStatus].label}.`);\n    }\n  };\n\n  return (\n    <section ref={rootRef} data-theme={theme} className={`mova-ai-theme rudder-board w-full min-w-0 min-h-[620px] bg-[var(--mova-ai-canvas,#202020)] text-[color:var(--mova-ai-ink,#eeeeee)] ${className}`} aria-label=\"Rudder issue board\">\n      <style>{AI_THEME_STYLES}{`\n        .rudder-board :is(button,input,select,summary):focus-visible { outline: 2px solid var(--mova-ai-accent,#c2c2c2); outline-offset: 2px; }\n        .rudder-board { container-type: inline-size; }\n        .rudder-list-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 40%); align-items: start; gap: 16px; }\n        .rudder-list-meta { justify-content: flex-end; padding-top: 2px; }\n        @container (max-width: 640px) {\n          .rudder-list-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }\n          .rudder-list-meta { justify-content: flex-start; padding-left: 26px; }\n        }\n        @media (prefers-reduced-motion: reduce) {\n          .motion-kanban-card,\n          .motion-kanban-lane {\n            animation: none !important;\n            transition: none !important;\n          }\n        }\n      `}</style>\n      <p className=\"sr-only\" aria-live=\"assertive\">{announcement}</p>\n      <div className=\"flex flex-wrap items-center gap-2 border-b border-[var(--mova-ai-border,#dedede)] px-4 py-3 text-xs text-[color:var(--mova-ai-ink-secondary,#666)]\">\n        <h2 className=\"mr-auto text-xs font-medium uppercase tracking-[0.16em] text-[color:var(--mova-ai-ink-secondary,#666)]\">Issues</h2>\n        <div className=\"flex flex-wrap items-center justify-end gap-1\">\n        <button type=\"button\" aria-label=\"Show working issues\" aria-pressed={statusFilter === \"in_progress\"} onClick={() => setStatusFilter((value) => value === \"in_progress\" ? \"all\" : \"in_progress\")} className={`mr-1 rounded-md border border-[var(--mova-ai-border,#dedede)] px-2.5 py-1.5 tabular-nums transition-colors hover:bg-[var(--mova-ai-hover,#f1f1f1)] ${statusFilter === \"in_progress\" ? \"bg-[var(--mova-ai-hover-strong,#e9e9e9)] text-[color:var(--mova-ai-ink,#202020)]\" : \"\"}`}>{issues.filter((issue) => issue.status === \"in_progress\").length} working</button>\n        <div className=\"mr-1 flex rounded-md border border-[var(--mova-ai-border,#dedede)] p-0.5\"><button type=\"button\" aria-label=\"List view\" aria-pressed={view === \"list\"} onClick={() => setView(\"list\")} className={`rounded p-1 transition-colors ${view === \"list\" ? \"bg-[var(--mova-ai-hover-strong,#e9e9e9)] text-[color:var(--mova-ai-ink,#202020)]\" : \"\"}`}><List className=\"h-3.5 w-3.5\" /></button><button type=\"button\" aria-label=\"Board view\" aria-pressed={view === \"board\"} onClick={() => setView(\"board\")} className={`rounded p-1 transition-colors ${view === \"board\" ? \"bg-[var(--mova-ai-hover-strong,#e9e9e9)] text-[color:var(--mova-ai-ink,#202020)]\" : \"\"}`}><Columns3 className=\"h-3.5 w-3.5\" /></button></div>\n        <ToolbarPopover label=\"Filter\" triggerRef={statusFilterRef} icon={<Filter className=\"h-3 w-3\" />}>\n          <div role=\"radiogroup\" aria-label=\"Issue status\">{[\"all\", ...BOARD_STATUSES].map((status) => <label key={status} className=\"flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 hover:bg-[var(--mova-ai-hover,#f1f1f1)]\"><input type=\"radio\" className=\"accent-[var(--mova-ai-accent,#454545)]\" name={`${sortGroupId}-status`} checked={statusFilter === status} onChange={() => setStatusFilter(status)} />{status === \"all\" ? \"All statuses\" : STATUS_META[status as BoardStatus].label}</label>)}</div>\n        </ToolbarPopover>\n        <ToolbarPopover label=\"Sort\" icon={<ArrowUpDown className=\"h-3 w-3\" />}>\n          <div role=\"radiogroup\" aria-label=\"Sort field\">{[\"Manual\", \"Status\", \"Priority\", \"Title\", \"Created\", \"Updated\"].map((value) => <label key={value} className={`flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 hover:bg-[var(--mova-ai-hover,#f1f1f1)] ${sort === value ? \"bg-[var(--mova-ai-hover,#f1f1f1)] text-[color:var(--mova-ai-ink,#202020)]\" : \"\"}`}><input className=\"accent-[var(--mova-ai-accent,#454545)]\" type=\"radio\" name={sortGroupId} checked={sort === value} onChange={() => setSort(value)} />{value}{sort === value ? <Check className=\"ml-auto h-3 w-3\" /> : null}</label>)}</div>\n          <button type=\"button\" disabled={sort === \"Manual\"} onClick={() => setDescending((value) => !value)} aria-label=\"Toggle sort direction\" className=\"flex w-full items-center gap-2 border-t border-[var(--mova-ai-border,#dedede)] px-2 py-2 text-left disabled:opacity-40\"><ArrowUpDown className=\"h-3 w-3\" />{descending ? \"Descending\" : \"Ascending\"}</button>\n        </ToolbarPopover>\n        <ToolbarPopover label=\"Display\" icon={<SlidersHorizontal className=\"h-3 w-3\" />}>{DISPLAY_FIELDS.map((field) => <label key={field} className=\"flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 hover:bg-[var(--mova-ai-hover,#f1f1f1)]\"><input className=\"accent-[var(--mova-ai-accent,#454545)]\" type=\"checkbox\" checked={display.includes(field)} onChange={() => setDisplay((fields) => fields.includes(field) ? fields.filter((value) => value !== field) : [...fields, field])} />{field}</label>)}</ToolbarPopover>\n        </div>\n      </div>\n      {creating ? <form onKeyDown={(event) => { if (event.key === \"Escape\") { event.preventDefault(); closeCreate(); } }} className=\"flex flex-wrap items-center gap-2 border-b border-[var(--mova-ai-border,#dedede)] bg-[var(--mova-ai-hover,#f1f1f1)] p-3\" onSubmit={(event) => { event.preventDefault(); if (!draft.trim()) return; let sequence = issues.length + 1; while (issues.some((issue) => issue.id === `ISS-${sequence}`)) sequence++; const next = [...issues, { id: `ISS-${sequence}`, title: draft.trim(), status: creating, priority: \"medium\" as const, assignee: \"Unassigned\", project: \"No project\", labels: [], created: new Date().toISOString().slice(0, 10) }]; setIssues(next); onIssuesChange?.(next); setStatusFilter(\"all\"); closeCreate(); setAnnouncement(\"Issue created.\"); }}><input ref={createInputRef} required aria-label=\"New issue title\" placeholder=\"Issue title\" value={draft} onChange={(event) => setDraft(event.target.value)} className=\"min-w-0 flex-1 rounded border border-[var(--mova-ai-border,#dedede)] bg-[var(--mova-ai-field,#f6f6f6)] px-2 py-1.5 text-sm\" /><select aria-label=\"New issue status\" value={creating} onChange={(event) => setCreating(event.target.value as BoardStatus)} className=\"rounded bg-[var(--mova-ai-canvas,#f4f4f4)] p-1 text-xs\">{BOARD_STATUSES.map((status) => <option key={status} value={status}>{STATUS_META[status].label}</option>)}</select><button type=\"submit\" className=\"rounded bg-[var(--mova-ai-accent,#454545)] px-3 py-1.5 text-xs text-[color:var(--mova-ai-accent-foreground,#fff)]\">Create</button><button type=\"button\" onClick={closeCreate} className=\"px-2 text-xs\">Cancel</button></form> : null}\n      <DisplayContext.Provider value={display}>\n      <AnimatePresence mode=\"wait\" initial={false}>\n      <motion.div key={view} initial={{ opacity: 0, y: reduceMotion ? 0 : 5 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: reduceMotion ? 0 : -3 }} transition={{ duration: reduceMotion ? 0 : 0.15, ease: [0.22, 1, 0.36, 1] }}>\n      {view === \"list\" ? <div className=\"max-h-[580px] overflow-y-auto\">{filtered.map((issue) => <IssueListRow key={issue.id} issue={issue} />)}{filtered.length === 0 ? <p className=\"py-10 text-center text-sm text-[color:var(--mova-ai-ink-secondary,#666)]\">No issues match this filter.</p> : null}<button ref={listCreateRef} type=\"button\" onClick={(event) => openCreate(statusFilter === \"all\" ? \"backlog\" : statusFilter as BoardStatus, event.currentTarget)} className=\"flex items-center gap-2 px-4 py-3 text-xs text-[color:var(--mova-ai-ink-secondary,#666)] transition-colors hover:text-[color:var(--mova-ai-ink,#202020)]\"><Plus className=\"h-3.5 w-3.5\" />Add issue</button></div> :\n      <DndContext\n        autoScroll={{ acceleration: 2, interval: 10, threshold: { x: 0.08, y: 0.2 } }}\n        collisionDetection={collisionDetection}\n        onDragCancel={clearDrag}\n        onDragEnd={handleDragEnd}\n        onDragOver={handleDragOver}\n        onDragStart={handleDragStart}\n        sensors={sensors}\n      >\n        <div className=\"overflow-x-auto overscroll-x-contain p-3 sm:p-4\">\n          <div className=\"flex min-h-[520px] min-w-max items-stretch gap-3\">\n            {visibleStatuses.map((status) => <Fragment key={status}><BoardColumn issues={grouped[status]} status={status} onCreate={openCreate} /></Fragment>)}\n            {hiddenStatuses.length > 0 ? (\n              <div className={`motion-kanban-lane flex min-h-0 w-[228px] min-w-[228px] shrink-0 flex-col rounded-[10px] border p-2 transition-colors motion-reduce:transition-none ${overStatus && hiddenStatuses.includes(overStatus) ? \"border-[var(--mova-ai-border-strong,#c8c8c8)] bg-[var(--mova-ai-hover,#f1f1f1)]\" : \"border-[var(--mova-ai-border,#dedede)] bg-[var(--mova-ai-canvas,#f4f4f4)]\"}`} data-testid=\"kanban-hidden-columns\">\n                <div className=\"mb-2 flex items-center gap-2 px-1\">\n                  <span className=\"text-xs font-semibold uppercase tracking-wide text-[color:var(--mova-ai-ink-muted,#858585)]\">Hidden columns</span>\n                  <span className=\"ml-auto text-xs tabular-nums text-[color:var(--mova-ai-ink-muted,#858585)]\">{hiddenStatuses.length}</span>\n                </div>\n                <div className=\"space-y-2\">{hiddenStatuses.map((status) => <Fragment key={status}><HiddenStatus status={status} onCreate={openCreate} /></Fragment>)}</div>\n              </div>\n            ) : null}\n          </div>\n        </div>\n        <DragOverlay dropAnimation={reduceMotion ? null : { duration: 180, easing: \"cubic-bezier(0.22, 1, 0.36, 1)\" }}>\n          {activeIssue ? <article className=\"w-[247px] rotate-[0.4deg] scale-[1.015] overflow-hidden rounded-[9px] border border-[var(--mova-ai-border-strong,#c8c8c8)] bg-[var(--mova-ai-surface,#fff)] p-2.5 shadow-[0_18px_48px_rgba(0,0,0,.48)]\"><IssueCardBody issue={activeIssue} /></article> : null}\n        </DragOverlay>\n      </DndContext>}\n      </motion.div>\n      </AnimatePresence>\n      </DisplayContext.Provider>\n    </section>\n  );\n}\n\nexport default RudderIssueBoard;\n"
+  "content": "\"use client\";\n\"use client\";\n\n// SPDX-License-Identifier: Apache-2.0\n// Adapted from Rudder's KanbanBoard, StatusIcon, and PriorityIcon.\n// The bundled third-party notices retain Rudder's LICENSE and NOTICE.\nimport {\n  DndContext,\n  DragOverlay,\n  KeyboardSensor,\n  PointerSensor,\n  closestCenter,\n  pointerWithin,\n  useDroppable,\n  useSensor,\n  useSensors,\n  type CollisionDetection,\n  type DragCancelEvent,\n  type DragEndEvent,\n  type DragOverEvent,\n  type DragStartEvent,\n  type KeyboardCoordinateGetter,\n} from \"@dnd-kit/core\";\nimport { SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport { CalendarClock, FolderKanban, Plus, Tags, UserCheck, Filter, List, Columns3, SlidersHorizontal, ArrowUpDown, ChevronDown, Check } from \"lucide-react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"framer-motion\";\nimport { Fragment, createContext, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, useId, type ReactNode, type RefObject, type CSSProperties } from \"react\";\n\nexport type BoardStatus = \"backlog\" | \"todo\" | \"in_progress\" | \"in_review\" | \"blocked\" | \"done\" | \"cancelled\";\n\nexport interface BoardIssue {\n  assignee: string;\n  created: string;\n  updated?: string;\n  id: string;\n  labels: string[];\n  priority: \"critical\" | \"high\" | \"medium\" | \"low\";\n  project: string;\n  reviewer?: string;\n  status: BoardStatus;\n  title: string;\n}\n\nexport interface RudderIssueBoardProps {\n  theme?: \"dark\" | \"light\";\n  className?: string;\n  initialIssues?: readonly BoardIssue[];\n  onIssuesChange?: (issues: BoardIssue[]) => void;\n}\n\nconst BOARD_STATUSES: readonly BoardStatus[] = [\"backlog\", \"todo\", \"in_progress\", \"in_review\", \"blocked\", \"done\", \"cancelled\"];\nconst AI_THEME_STYLES = \"/* Shared public tokens for the standalone AI component family. */\\n.mova-ai-theme {\\n  color-scheme: light;\\n  color: var(--mova-ai-ink, #202020);\\n  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \\\"Segoe UI\\\", sans-serif;\\n  font-size: 13px;\\n  line-height: 1.45;\\n  letter-spacing: -0.01em;\\n\\n  --mova-ai-page: #f7f7f7;\\n  --mova-ai-canvas: #f4f4f4;\\n  --mova-ai-surface: #ffffff;\\n  --mova-ai-inset: #f8f8f8;\\n  --mova-ai-hover: #f1f1f1;\\n  --mova-ai-hover-strong: #e9e9e9;\\n\\n  --mova-ai-ink: #202020;\\n  --mova-ai-ink-secondary: #666666;\\n  --mova-ai-ink-muted: #858585;\\n\\n  --mova-ai-border: #dedede;\\n  --mova-ai-border-soft: #ededed;\\n  --mova-ai-border-strong: #c8c8c8;\\n  --mova-ai-field: #f6f6f6;\\n  --mova-ai-grid: color-mix(in srgb, var(--mova-ai-border) 78%, transparent);\\n  --mova-ai-stripe: rgb(32 35 38 / 7%);\\n  --mova-ai-stripe-bg: #242424;\\n\\n  --mova-ai-accent: #454545;\\n  --mova-ai-accent-ink: #333333;\\n  --mova-ai-accent-foreground: #ffffff;\\n  --mova-ai-accent-tint: #eeeeee;\\n  --mova-ai-success: #28734d;\\n  --mova-ai-success-tint: #e8f3ec;\\n  --mova-ai-warning: #986517;\\n  --mova-ai-warning-tint: #f8f0df;\\n  --mova-ai-danger: #a33c3c;\\n  --mova-ai-danger-tint: #f7eaea;\\n  --mova-ai-info: #496b89;\\n  --mova-ai-info-tint: #eaf0f5;\\n  --mova-ai-neutral-status: #69737d;\\n  --mova-ai-status-on: #ffffff;\\n\\n  --mova-ai-tooltip-bg: #292929;\\n  --mova-ai-tooltip-fg: #f6f6f6;\\n  --mova-ai-tooltip-muted: #c3c3c3;\\n  --mova-ai-tooltip-border: #484848;\\n\\n  --mova-ai-radius-panel: 8px;\\n  --mova-ai-radius-control: 8px;\\n  --mova-ai-shadow-xs: 0 1px 2px rgb(22 28 33 / 5%);\\n  --mova-ai-shadow-sm: 0 2px 8px rgb(22 28 33 / 7%);\\n  --mova-ai-shadow-md: 0 8px 20px rgb(22 28 33 / 11%);\\n  --mova-ai-shadow-lg: 0 14px 32px rgb(22 28 33 / 15%);\\n  --mova-ai-shadow-hairline: 0 0 0 1px var(--mova-ai-border);\\n  --mova-ai-shadow-btn: 0 0 0 1px var(--mova-ai-border-strong), var(--mova-ai-shadow-xs);\\n  --mova-ai-shadow-card: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-sm);\\n  --mova-ai-shadow-raised: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-md);\\n  --mova-ai-shadow-overlay: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-lg);\\n  --mova-ai-shadow-inset-field: inset 0 1px 2px rgb(22 28 33 / 12%);\\n}\\n\\n.mova-ai-theme[data-theme=\\\"dark\\\"] {\\n  color-scheme: dark;\\n  --mova-ai-page: #181818;\\n  --mova-ai-canvas: #202020;\\n  --mova-ai-surface: #272727;\\n  --mova-ai-inset: #1d1d1d;\\n  --mova-ai-hover: #2d2d2d;\\n  --mova-ai-hover-strong: #393939;\\n\\n  --mova-ai-ink: #eeeeee;\\n  --mova-ai-ink-secondary: #b5b5b5;\\n  --mova-ai-ink-muted: #929292;\\n\\n  --mova-ai-border: #3b3b3b;\\n  --mova-ai-border-soft: #303030;\\n  --mova-ai-border-strong: #505050;\\n  --mova-ai-field: #2c2c2c;\\n  --mova-ai-grid: color-mix(in srgb, var(--mova-ai-border) 78%, transparent);\\n  --mova-ai-stripe: rgb(255 255 255 / 6%);\\n  --mova-ai-stripe-bg: #202528;\\n\\n  --mova-ai-accent: #c2c2c2;\\n  --mova-ai-accent-ink: #d5d5d5;\\n  --mova-ai-accent-foreground: #202020;\\n  --mova-ai-accent-tint: #353535;\\n  --mova-ai-success: #88c7a0;\\n  --mova-ai-success-tint: #293b30;\\n  --mova-ai-warning: #d7b66f;\\n  --mova-ai-warning-tint: #3c3525;\\n  --mova-ai-danger: #e5928e;\\n  --mova-ai-danger-tint: #3c2b2b;\\n  --mova-ai-info: #9bbbd6;\\n  --mova-ai-info-tint: #293541;\\n  --mova-ai-neutral-status: #a0a0a0;\\n  --mova-ai-status-on: #181818;\\n\\n  --mova-ai-tooltip-bg: #121212;\\n  --mova-ai-tooltip-fg: #eeeeee;\\n  --mova-ai-tooltip-muted: #b5b5b5;\\n  --mova-ai-tooltip-border: #3b3b3b;\\n\\n  --mova-ai-shadow-xs: 0 1px 2px rgb(0 0 0 / 22%);\\n  --mova-ai-shadow-sm: 0 2px 8px rgb(0 0 0 / 25%);\\n  --mova-ai-shadow-md: 0 8px 20px rgb(0 0 0 / 30%);\\n  --mova-ai-shadow-lg: 0 14px 32px rgb(0 0 0 / 38%);\\n  --mova-ai-shadow-hairline: 0 0 0 1px var(--mova-ai-border);\\n  --mova-ai-shadow-btn: 0 0 0 1px var(--mova-ai-border-strong), var(--mova-ai-shadow-xs);\\n  --mova-ai-shadow-card: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-sm);\\n  --mova-ai-shadow-raised: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-md);\\n  --mova-ai-shadow-overlay: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-lg);\\n  --mova-ai-shadow-inset-field: inset 0 1px 2px rgb(0 0 0 / 42%);\\n}\\n\";\n\nconst createBoardKeyboardCoordinates = (\n  getHorizontalTarget: () => BoardStatus | null,\n  onHorizontalTarget: (status: BoardStatus | null) => void,\n): KeyboardCoordinateGetter => (event, args) => {\n  if (event.code !== \"ArrowLeft\" && event.code !== \"ArrowRight\") {\n    onHorizontalTarget(null);\n    return sortableKeyboardCoordinates(event, args);\n  }\n\n  event.preventDefault();\n  const { context } = args;\n  const currentStatus = String(getHorizontalTarget() ?? context.active?.data.current?.status ?? \"\") as BoardStatus;\n  const lanes: Array<{ rect: NonNullable<ReturnType<typeof context.droppableRects.get>>; status: BoardStatus }> = [];\n\n  context.droppableContainers.getEnabled().forEach((container) => {\n    const data = container.data.current;\n    if (data?.type !== \"column\" && data?.type !== \"hidden-column\") return;\n    const rect = context.droppableRects.get(container.id);\n    if (rect && BOARD_STATUSES.includes(data.status as BoardStatus)) {\n      lanes.push({ rect, status: data.status as BoardStatus });\n    }\n  });\n\n  lanes.sort((a, b) => a.rect.left - b.rect.left || a.rect.top - b.rect.top);\n  const currentIndex = lanes.findIndex((lane) => lane.status === currentStatus);\n  const targetIndex = currentIndex + (event.code === \"ArrowRight\" ? 1 : -1);\n  const targetLane = lanes[targetIndex];\n  if (!targetLane) {\n    onHorizontalTarget(null);\n    return;\n  }\n  onHorizontalTarget(targetLane.status);\n\n  const currentCenterY = context.collisionRect\n    ? context.collisionRect.top + context.collisionRect.height / 2\n    : targetLane.rect.top;\n  let targetRect = targetLane.rect;\n  let nearestDistance = Number.POSITIVE_INFINITY;\n\n  context.droppableContainers.getEnabled().forEach((container) => {\n    const data = container.data.current;\n    if (data?.type !== \"issue\" || data.status !== targetLane.status) return;\n    const rect = context.droppableRects.get(container.id);\n    if (!rect) return;\n    const distance = Math.abs(rect.top + rect.height / 2 - currentCenterY);\n    if (distance < nearestDistance) {\n      nearestDistance = distance;\n      targetRect = rect;\n    }\n  });\n\n  const activeRect = context.collisionRect;\n  return {\n    x: targetRect.left + (targetRect.width - (activeRect?.width ?? 0)) / 2,\n    y: targetRect.top + (targetRect.height - (activeRect?.height ?? 0)) / 2,\n  };\n};\n\nconst STATUS_META: Record<BoardStatus, { color: string; label: string; lane: string; laneOver: string }> = {\n  backlog: { color: \"var(--mova-ai-neutral-status)\", label: \"Backlog\", lane: \"border-[var(--mova-ai-border,#3b3b3b)] bg-[var(--mova-ai-canvas,#202020)]\", laneOver: \"border-[var(--mova-ai-border-strong,#505050)] bg-[var(--mova-ai-hover,#2d2d2d)]\" },\n  todo: { color: \"var(--mova-ai-neutral-status)\", label: \"To do\", lane: \"border-[var(--mova-ai-border,#3b3b3b)] bg-[var(--mova-ai-canvas,#202020)]\", laneOver: \"border-[var(--mova-ai-border-strong,#505050)] bg-[var(--mova-ai-hover,#2d2d2d)]\" },\n  in_progress: { color: \"var(--mova-ai-info)\", label: \"In progress\", lane: \"border-[var(--mova-ai-border,#3b3b3b)] bg-[var(--mova-ai-canvas,#202020)]\", laneOver: \"border-[var(--mova-ai-border-strong,#505050)] bg-[var(--mova-ai-hover,#2d2d2d)]\" },\n  in_review: { color: \"var(--mova-ai-warning)\", label: \"In review\", lane: \"border-[var(--mova-ai-border,#3b3b3b)] bg-[var(--mova-ai-canvas,#202020)]\", laneOver: \"border-[var(--mova-ai-border-strong,#505050)] bg-[var(--mova-ai-hover,#2d2d2d)]\" },\n  blocked: { color: \"var(--mova-ai-danger)\", label: \"Blocked\", lane: \"border-[var(--mova-ai-border,#3b3b3b)] bg-[var(--mova-ai-canvas,#202020)]\", laneOver: \"border-[var(--mova-ai-border-strong,#505050)] bg-[var(--mova-ai-hover,#2d2d2d)]\" },\n  done: { color: \"var(--mova-ai-success)\", label: \"Done\", lane: \"border-[var(--mova-ai-border,#3b3b3b)] bg-[var(--mova-ai-canvas,#202020)]\", laneOver: \"border-[var(--mova-ai-border-strong,#505050)] bg-[var(--mova-ai-hover,#2d2d2d)]\" },\n  cancelled: { color: \"var(--mova-ai-neutral-status)\", label: \"Cancelled\", lane: \"border-[var(--mova-ai-border,#3b3b3b)] bg-[var(--mova-ai-canvas,#202020)]\", laneOver: \"border-[var(--mova-ai-border-strong,#505050)] bg-[var(--mova-ai-hover,#2d2d2d)]\" },\n};\n\nconst DEFAULT_ISSUES: readonly BoardIssue[] = [\n  { id: \"R6Z-141\", title: \"Retire legacy Node backend, CLI, and MCP authorities\", status: \"backlog\", priority: \"high\", assignee: \"Noah\", project: \"Rudder-dev\", labels: [\"Feature\"], created: \"Aug 20\" },\n  { id: \"R6Z-140\", title: \"Cut over the public listener and Rust authorities\", status: \"backlog\", priority: \"high\", assignee: \"Avery\", project: \"Rudder-dev\", labels: [\"Feature\"], created: \"Aug 20\" },\n  { id: \"R6Z-170\", title: \"Proposal: add history versions and Diff view\", status: \"todo\", priority: \"medium\", assignee: \"Luca\", project: \"Rudder-dev\", labels: [\"Feature\"], created: \"Aug 27\" },\n  { id: \"R6Z-166\", title: \"Define the issue event contract for agent handoffs\", status: \"todo\", priority: \"medium\", assignee: \"Mira\", project: \"Rudder-dev\", labels: [\"Spec\"], created: \"Aug 26\" },\n  { id: \"R6Z-181\", title: \"Share 500-index issue context through MCP and CLI\", status: \"in_progress\", priority: \"high\", assignee: \"Sana\", project: \"Rudder-dev\", labels: [\"Feature\"], created: \"Aug 30\" },\n  { id: \"R6Z-210\", title: \"Re-run the Rust output spool after a capacity failure\", status: \"in_progress\", priority: \"high\", assignee: \"Noah\", reviewer: \"Mira\", project: \"Rudder-dev\", labels: [\"Bug\"], created: \"Sep 14\" },\n  { id: \"R6Z-207\", title: \"Remove the loaded Issues hint from the shell\", status: \"done\", priority: \"medium\", assignee: \"Theo\", project: \"Rudder-dev\", labels: [\"Feature\"], created: \"Aug 19\" },\n];\n\nfunction StatusIcon({ status }: { status: BoardStatus }) {\n  const common = { stroke: \"currentColor\", strokeWidth: 2, strokeLinecap: \"round\" as const };\n  return (\n    <span className=\"inline-flex h-4 w-4 shrink-0 items-center justify-center\" data-slot=\"issue-status-icon\" data-status={status} style={{ color: STATUS_META[status].color }} aria-hidden=\"true\">\n      <svg viewBox=\"0 0 16 16\" className=\"h-full w-full overflow-visible\" fill=\"none\">\n        {status === \"backlog\" ? <circle cx=\"8\" cy=\"8\" r=\"5.5\" {...common} strokeDasharray=\"1 3\" /> : null}\n        {status === \"todo\" ? <circle cx=\"8\" cy=\"8\" r=\"5.5\" {...common} /> : null}\n        {status === \"in_progress\" ? <><circle cx=\"8\" cy=\"8\" r=\"5.5\" {...common} opacity=\"0.22\" /><path d=\"M8 2.5a5.5 5.5 0 0 1 5.5 5.5\" {...common} strokeWidth=\"2.4\" /><path d=\"M13.5 8a5.5 5.5 0 0 1-5.5 5.5\" {...common} strokeWidth=\"2.4\" opacity=\"0.72\" /></> : null}\n        {status === \"in_review\" ? <><circle cx=\"8\" cy=\"8\" r=\"5.5\" {...common} /><circle cx=\"8\" cy=\"8\" r=\"2\" fill=\"currentColor\" /></> : null}\n        {status === \"done\" ? <><circle cx=\"8\" cy=\"8\" r=\"6.5\" fill=\"currentColor\" /><path d=\"M4.75 8.25 7 10.5l4.25-5\" stroke=\"var(--mova-ai-status-on,#fff)\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" /></> : null}\n        {status === \"cancelled\" ? <><circle cx=\"8\" cy=\"8\" r=\"6\" fill=\"currentColor\" opacity=\"0.16\" /><circle cx=\"8\" cy=\"8\" r=\"5.5\" {...common} /><path d=\"m5.25 5.25 5.5 5.5m0-5.5-5.5 5.5\" {...common} /></> : null}\n        {status === \"blocked\" ? <><path d=\"M5.1 2.25h5.8l3.05 3.05v5.4l-3.05 3.05H5.1L2.05 10.7V5.3Z\" {...common} strokeLinejoin=\"round\" /><path d=\"m5.25 5.25 5.5 5.5\" {...common} /></> : null}\n      </svg>\n    </span>\n  );\n}\n\nfunction PriorityIcon({ priority }: { priority: BoardIssue[\"priority\"] }) {\n  const active = priority === \"critical\" ? 4 : priority === \"high\" ? 3 : priority === \"medium\" ? 2 : 1;\n  const tone = priority === \"critical\" ? \"var(--mova-ai-danger)\" : priority === \"high\" ? \"var(--mova-ai-warning)\" : priority === \"medium\" ? \"var(--mova-ai-info)\" : \"var(--mova-ai-neutral-status)\";\n  const heights = [4, 6, 10, 14];\n  return (\n    <span className=\"inline-flex h-3.5 w-4 items-end gap-[2px]\" style={{ color: tone }} aria-hidden=\"true\">\n      {heights.map((height, index) => <span className=\"w-[3px] rounded-[1px] bg-current\" key={height} style={{ height: `${height}px`, opacity: index < active ? 1 : 0.25 }} />)}\n    </span>\n  );\n}\n\nconst DISPLAY_FIELDS = [\"Identifier\", \"Priority\", \"Assignee\", \"Reviewer\", \"Labels\", \"Project\", \"Updated\", \"Created\"] as const;\ntype DisplayField = typeof DISPLAY_FIELDS[number];\nconst DisplayContext = createContext<readonly DisplayField[]>(DISPLAY_FIELDS.filter((field) => field !== \"Updated\"));\n\nfunction MemberAvatar({ name }: { name: string }) {\n  return <span aria-hidden=\"true\" className=\"inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-[var(--mova-ai-hover-strong,#e9e9e9)] text-[9px] font-semibold text-[color:var(--mova-ai-ink,#202020)]\">{name.slice(0, 1)}</span>;\n}\n\nfunction IssueListRow({ issue }: { issue: BoardIssue }) {\n  const display = useContext(DisplayContext);\n  return <article className=\"rudder-list-row border-b border-[var(--mova-ai-border-soft,#ededed)] px-4 py-3\" data-testid={`issue-row-${issue.id}`}>\n    <div className=\"flex min-w-0 items-start gap-2.5\">\n      <span className=\"mt-0.5\" title={STATUS_META[issue.status].label}><span className=\"sr-only\">{STATUS_META[issue.status].label}</span><StatusIcon status={issue.status} /></span>\n      {display.includes(\"Identifier\") ? <span className=\"shrink-0 pt-0.5 font-mono text-xs text-[color:var(--mova-ai-ink-muted,#858585)]\">{issue.id}</span> : null}\n      <h3 className=\"min-w-0 flex-1 break-words text-sm font-medium leading-relaxed text-[color:var(--mova-ai-ink,#202020)]\">{issue.title}</h3>\n    </div>\n    <div className=\"rudder-list-meta flex min-w-0 flex-wrap items-center gap-x-3 gap-y-2 text-xs text-[color:var(--mova-ai-ink-secondary,#666)]\">\n      {display.includes(\"Priority\") ? <span title={`${issue.priority} priority`}><span className=\"sr-only\">{issue.priority} priority</span><PriorityIcon priority={issue.priority} /></span> : null}\n      {display.includes(\"Labels\") ? issue.labels.map((label) => <span key={label} className=\"inline-flex max-w-full items-center gap-1.5 rounded-full border border-[var(--mova-ai-border,#dedede)] px-2 py-0.5\"><span className=\"h-1.5 w-1.5 shrink-0 rounded-full bg-[var(--mova-ai-neutral-status,#69737d)]\" /><span className=\"break-words\">{label}</span></span>) : null}\n      {display.includes(\"Assignee\") ? <span className=\"inline-flex min-w-0 items-center gap-1.5\"><MemberAvatar name={issue.assignee} /><span className=\"break-words\">{issue.assignee}</span></span> : null}\n      {display.includes(\"Reviewer\") && issue.reviewer ? <span className=\"inline-flex items-center gap-1\" title=\"Reviewer\"><UserCheck className=\"h-3 w-3 shrink-0\" />{issue.reviewer}</span> : null}\n      {display.includes(\"Project\") ? <span className=\"rudder-list-project break-words\">{issue.project}</span> : null}\n      {display.includes(\"Created\") ? <span className=\"whitespace-nowrap\">{issue.created}</span> : null}\n      {display.includes(\"Updated\") ? <span className=\"whitespace-nowrap\">Updated {issue.updated ?? issue.created}</span> : null}\n    </div>\n  </article>;\n}\n\nfunction IssueCardBody({ issue }: { issue: BoardIssue }) {\n  const display = useContext(DisplayContext);\n  return (\n    <div className=\"min-w-0\">\n      <div className=\"flex min-w-0 items-start gap-2\">\n        <span className=\"min-w-0 flex-1 font-mono text-xs text-[color:var(--mova-ai-ink-muted,#858585)]\">{display.includes(\"Identifier\") ? issue.id : \"\"}</span>\n        {display.includes(\"Assignee\") ? <span className=\"inline-flex min-w-0 max-w-[8.5rem] shrink items-center gap-1 overflow-hidden text-xs text-[color:var(--mova-ai-ink-secondary,#666)]\">\n          <MemberAvatar name={issue.assignee} />\n          <span className=\"truncate\">{issue.assignee}</span>\n        </span> : null}\n      </div>\n      <p className=\"mt-2 break-words text-sm leading-snug text-[color:var(--mova-ai-ink,#202020)]\">{issue.title}</p>\n      {display.includes(\"Priority\") ? <div className=\"mt-2 flex min-w-0 items-center gap-1.5 overflow-hidden text-xs text-[color:var(--mova-ai-ink-muted,#858585)]\">\n        <PriorityIcon priority={issue.priority} />\n        <span className=\"capitalize\">{issue.priority}</span>\n      </div> : null}\n      <div className=\"mt-2 space-y-1.5 border-t border-[var(--mova-ai-border-soft,#ededed)] pt-2 text-xs text-[color:var(--mova-ai-ink-muted,#858585)]\">\n        {display.includes(\"Project\") ? <div className=\"grid min-w-0 grid-cols-[4.5rem_minmax(0,1fr)] items-center gap-2\"><span className=\"inline-flex items-center gap-1.5\"><FolderKanban className=\"h-3 w-3\" />Project</span><span className=\"truncate text-right\">{issue.project}</span></div> : null}\n        {display.includes(\"Reviewer\") && issue.reviewer ? <div className=\"grid min-w-0 grid-cols-[4.5rem_minmax(0,1fr)] items-center gap-2\"><span className=\"inline-flex items-center gap-1.5\"><UserCheck className=\"h-3 w-3\" />Reviewer</span><span className=\"truncate text-right\">{issue.reviewer}</span></div> : null}\n        {display.includes(\"Labels\") ? <div className=\"grid min-w-0 grid-cols-[4.5rem_minmax(0,1fr)] items-center gap-2\"><span className=\"inline-flex items-center gap-1.5\"><Tags className=\"h-3 w-3\" />Labels</span><span className=\"truncate text-right\"><span className=\"inline-flex items-center gap-1 rounded-full border border-[var(--mova-ai-border,#dedede)] px-1.5 py-0.5 text-[10px]\"><span className=\"h-1.5 w-1.5 rounded-full bg-[var(--mova-ai-neutral-status,#69737d)]\" />{issue.labels[0] ?? \"None\"}</span></span></div> : null}\n        {display.includes(\"Created\") ? <div className=\"grid min-w-0 grid-cols-[4.5rem_minmax(0,1fr)] items-center gap-2\"><span className=\"inline-flex items-center gap-1.5\"><CalendarClock className=\"h-3 w-3\" />Created</span><span className=\"truncate text-right\">{issue.created}</span></div> : null}\n        {display.includes(\"Updated\") ? <div className=\"grid grid-cols-[4.5rem_minmax(0,1fr)] gap-2\"><span>Updated</span><span className=\"truncate text-right\">{issue.updated ?? issue.created}</span></div> : null}\n      </div>\n    </div>\n  );\n}\n\nfunction SortableIssueCard({ issue }: { issue: BoardIssue }) {\n  const { attributes, isDragging, listeners, setNodeRef, transform, transition } = useSortable({ id: issue.id, data: { status: issue.status, type: \"issue\" } });\n  return (\n    <article\n      ref={setNodeRef}\n      style={{ transform: CSS.Transform.toString(transform), transition }}\n      {...attributes}\n      {...listeners}\n      className={`motion-kanban-card cursor-grab touch-pan-x overflow-hidden rounded-[9px] border border-[var(--mova-ai-border,#dedede)] bg-[var(--mova-ai-surface,#fff)] p-2.5 outline-none transition-[box-shadow,opacity,border-color] motion-reduce:transition-none focus-visible:border-[var(--mova-ai-border-strong,#c8c8c8)] focus-visible:ring-2 focus-visible:ring-[var(--mova-ai-border-strong,#c8c8c8)] active:cursor-grabbing ${isDragging ? \"opacity-25\" : \"hover:border-[var(--mova-ai-border-strong,#c8c8c8)] hover:shadow-sm\"}`}\n      data-dragging={isDragging ? \"true\" : \"false\"}\n      data-issue-id={issue.id}\n      data-testid={`kanban-card-${issue.id}`}\n    >\n      <IssueCardBody issue={issue} />\n    </article>\n  );\n}\n\nfunction BoardColumn({ issues, status, onCreate }: { issues: BoardIssue[]; status: BoardStatus; onCreate: (status: BoardStatus, trigger: HTMLElement) => void }) {\n  const { isOver, setNodeRef } = useDroppable({ id: status, data: { status, type: \"column\" } });\n  const meta = STATUS_META[status];\n  return (\n    <div className=\"flex min-h-0 w-[260px] min-w-[260px] shrink-0 flex-col\">\n      <div className=\"mb-1 flex items-center gap-2 px-2 py-2\">\n        <StatusIcon status={status} />\n        <span className=\"text-xs font-semibold uppercase tracking-wide text-[color:var(--mova-ai-ink-secondary,#666)]\">{meta.label}</span>\n        <span className=\"ml-auto text-xs tabular-nums text-[color:var(--mova-ai-ink-muted,#858585)]\">{issues.length}</span>\n        <button type=\"button\" onClick={(event) => onCreate(status, event.currentTarget)} aria-label={`Create issue in ${meta.label}`} className=\"rounded p-1 hover:bg-[var(--mova-ai-hover-strong,#e9e9e9)] focus-visible:ring-2 focus-visible:ring-[var(--mova-ai-border-strong,#c8c8c8)]\"><Plus className=\"h-3.5 w-3.5 text-[color:var(--mova-ai-ink-muted,#858585)]\" aria-hidden=\"true\" /></button>\n      </div>\n      <div\n        ref={setNodeRef}\n        className={`motion-kanban-lane min-h-[160px] flex-1 space-y-1.5 overflow-y-auto rounded-[9px] border p-1.5 transition-colors motion-reduce:transition-none ${isOver ? meta.laneOver : meta.lane}`}\n        data-over={isOver ? \"true\" : \"false\"}\n        data-status={status}\n        style={{ \"--lane-status\": meta.color } as CSSProperties}\n        data-testid={`kanban-column-${status}`}\n      >\n        <SortableContext items={issues.map((issue) => issue.id)} strategy={verticalListSortingStrategy}>\n          {issues.map((issue) => <Fragment key={issue.id}><SortableIssueCard issue={issue} /></Fragment>)}\n        </SortableContext>\n      </div>\n    </div>\n  );\n}\n\nfunction HiddenStatus({ status, onCreate }: { status: BoardStatus; onCreate: (status: BoardStatus, trigger: HTMLElement) => void }) {\n  const { isOver, setNodeRef } = useDroppable({ id: status, data: { status, type: \"hidden-column\" } });\n  const meta = STATUS_META[status];\n  return (\n    <div ref={setNodeRef} className={`motion-kanban-lane flex items-center gap-2 rounded-[9px] border px-2 py-2 transition-colors motion-reduce:transition-none ${isOver ? meta.laneOver : meta.lane}`} data-over={isOver ? \"true\" : \"false\"} data-status={status} style={{ \"--lane-status\": meta.color } as CSSProperties} data-testid={`kanban-hidden-column-${status}`}>\n      <StatusIcon status={status} />\n      <span className=\"min-w-0 flex-1 text-xs font-semibold uppercase tracking-wide text-[color:var(--mova-ai-ink-secondary,#666)]\">{meta.label}</span>\n      <span className=\"text-xs tabular-nums text-[color:var(--mova-ai-ink-muted,#858585)]\">0</span>\n      <button type=\"button\" onClick={(event) => onCreate(status, event.currentTarget)} aria-label={`Create issue in ${meta.label}`} className=\"rounded p-1 hover:bg-[var(--mova-ai-hover-strong,#e9e9e9)] focus-visible:ring-2 focus-visible:ring-[var(--mova-ai-border-strong,#c8c8c8)]\"><Plus className=\"h-3.5 w-3.5 text-[color:var(--mova-ai-ink-muted,#858585)]\" aria-hidden=\"true\" /></button>\n    </div>\n  );\n}\n\nfunction ToolbarPopover({ label, icon, children, triggerRef }: { label: string; icon: ReactNode; children: ReactNode; triggerRef?: RefObject<HTMLButtonElement | null> }) {\n  const reducedMotion = useReducedMotion();\n  const [open, setOpen] = useState(false);\n  const root = useRef<HTMLDivElement>(null);\n  const trigger = useRef<HTMLButtonElement>(null);\n  const panel = useRef<HTMLDivElement>(null);\n  const id = useId();\n  useLayoutEffect(() => {\n    if (!open) return;\n    const container = root.current;\n    const popup = panel.current;\n    const board = container?.closest<HTMLElement>('section[aria-label=\"Rudder issue board\"]');\n    if (!container || !popup || !board) return;\n    const position = () => {\n      const anchor = container.getBoundingClientRect();\n      const bounds = board.getBoundingClientRect();\n      // Convert viewport measurements back to local CSS pixels for scaled previews.\n      const scale = container.offsetWidth ? anchor.width / container.offsetWidth : 1;\n      if (!scale) return;\n      const inset = 8 * scale;\n      popup.style.maxWidth = `${Math.max(0, (bounds.width - inset * 2) / scale)}px`;\n      const width = popup.getBoundingClientRect().width;\n      const left = Math.max(bounds.left + inset, Math.min(anchor.right - width, bounds.right - inset - width));\n      popup.style.left = `${(left - anchor.left) / scale}px`;\n      popup.style.right = \"auto\";\n    };\n    position();\n    const observer = new ResizeObserver(position);\n    observer.observe(board);\n    observer.observe(container);\n    window.addEventListener(\"resize\", position);\n    return () => { observer.disconnect(); window.removeEventListener(\"resize\", position); };\n  }, [open]);\n  useEffect(() => {\n    if (!open) return;\n    panel.current?.querySelector<HTMLElement>(\"input:checked, button, input\")?.focus();\n    const dismiss = (event: PointerEvent) => {\n      if (!root.current?.contains(event.target as Node)) { setOpen(false); trigger.current?.focus(); }\n    };\n    document.addEventListener(\"pointerdown\", dismiss);\n    return () => document.removeEventListener(\"pointerdown\", dismiss);\n  }, [open]);\n  return <div ref={root} className=\"relative\" onBlur={(event) => { if (event.relatedTarget && !event.currentTarget.contains(event.relatedTarget as Node)) setOpen(false); }} onKeyDown={(event) => { if (event.key === \"Escape\" && open) { event.preventDefault(); event.stopPropagation(); setOpen(false); trigger.current?.focus(); } }}>\n    <button ref={(node) => { trigger.current = node; if (triggerRef) triggerRef.current = node; }} type=\"button\" aria-label={label === \"Sort\" ? \"Sort issues\" : label === \"Filter\" ? \"Filter issues by status\" : \"Display fields\"} aria-expanded={open} aria-controls={id} onClick={() => setOpen((value) => !value)} className={`flex items-center gap-1.5 rounded-md px-2 py-1.5 transition-colors hover:bg-[var(--mova-ai-hover,#f1f1f1)] ${open ? \"bg-[var(--mova-ai-hover-strong,#e9e9e9)] text-[color:var(--mova-ai-ink,#202020)]\" : \"\"}`}>{icon}{label}<ChevronDown className=\"h-3 w-3\" /></button>\n    <AnimatePresence initial={false}>{open ? <motion.div key=\"panel\" ref={panel} id={id} role=\"group\" aria-label={`${label} options`} initial={{ opacity: 0, y: reducedMotion ? 0 : -4 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: reducedMotion ? 0 : -3 }} transition={{ duration: reducedMotion ? 0 : 0.16, ease: [0.22, 1, 0.36, 1] }} className=\"absolute right-0 z-30 mt-2 w-48 space-y-1 rounded-lg border border-[var(--mova-ai-border,#dedede)] bg-[var(--mova-ai-surface,#fff)] p-2 text-xs shadow-xl\">{children}</motion.div> : null}</AnimatePresence>\n  </div>;\n}\n\nfunction resolveTargetStatus(overId: string, issues: BoardIssue[]): BoardStatus | null {\n  if (BOARD_STATUSES.includes(overId as BoardStatus)) return overId as BoardStatus;\n  return issues.find((issue) => issue.id === overId)?.status ?? null;\n}\n\nexport function RudderIssueBoard({ theme = \"dark\", className = \"\", initialIssues = DEFAULT_ISSUES, onIssuesChange }: RudderIssueBoardProps) {\n  const rootRef = useRef<HTMLElement>(null);\n  const sortGroupId = useId();\n  const keyboardTargetRef = useRef<BoardStatus | null>(null);\n  const [issues, setIssues] = useState<BoardIssue[]>(() => [...initialIssues]);\n  const [statusFilter, setStatusFilter] = useState(\"all\");\n  const [sort, setSort] = useState(\"Manual\");\n  const [descending, setDescending] = useState(false);\n  const [view, setView] = useState<\"board\" | \"list\">(\"board\");\n  const [display, setDisplay] = useState<DisplayField[]>(DISPLAY_FIELDS.filter((field) => field !== \"Updated\"));\n  const [creating, setCreating] = useState<BoardStatus | null>(null);\n  const [draft, setDraft] = useState(\"\");\n  const createInputRef = useRef<HTMLInputElement>(null);\n  const createTriggerRef = useRef<HTMLElement | null>(null);\n  const listCreateRef = useRef<HTMLButtonElement>(null);\n  const statusFilterRef = useRef<HTMLButtonElement>(null);\n  const createOpen = creating !== null;\n  const restoreCreateFocus = () => requestAnimationFrame(() => {\n    const original = createTriggerRef.current;\n    (original?.isConnected ? original : listCreateRef.current ?? statusFilterRef.current)?.focus();\n  });\n  const openCreate = (status: BoardStatus, trigger: HTMLElement) => { createTriggerRef.current = trigger; setCreating(status); setDraft(\"\"); };\n  const closeCreate = () => { setCreating(null); restoreCreateFocus(); };\n  useEffect(() => { if (createOpen) createInputRef.current?.focus(); }, [createOpen]);\n  const orderedIssues = useMemo(() => {\n    const matches = issues;\n    if (sort === \"Manual\") return matches;\n    const dateValue = (value: string): string | number => { const timestamp = Date.parse(value); return Number.isNaN(timestamp) ? value : timestamp; };\n    return [...matches].sort((a, b) => {\n      const value = (issue: BoardIssue): string | number => sort === \"Status\" ? BOARD_STATUSES.indexOf(issue.status) : sort === \"Priority\" ? [\"critical\", \"high\", \"medium\", \"low\"].indexOf(issue.priority) : sort === \"Title\" ? issue.title : dateValue(sort === \"Updated\" ? issue.updated ?? issue.created : issue.created);\n      const av = value(a), bv = value(b);\n      const delta = typeof av === \"number\" && typeof bv === \"number\" ? av - bv : String(av).localeCompare(String(bv), undefined, { numeric: true });\n      return descending ? -delta : delta;\n    });\n  }, [issues, sort, descending]);\n  const filtered = useMemo(() => orderedIssues.filter((issue) => statusFilter === \"all\" || issue.status === statusFilter), [orderedIssues, statusFilter]);\n  const [activeId, setActiveId] = useState<string | null>(null);\n  const [overStatus, setOverStatus] = useState<BoardStatus | null>(null);\n  const [announcement, setAnnouncement] = useState(\"Issue board ready. Pick up a card to move it between status columns.\");\n  const [reduceMotion, setReduceMotion] = useState(false);\n  const keyboardCoordinates = useMemo(\n    () => createBoardKeyboardCoordinates(\n      () => keyboardTargetRef.current,\n      (status) => { keyboardTargetRef.current = status; },\n    ),\n    [],\n  );\n  const sensors = useSensors(\n    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),\n    useSensor(KeyboardSensor, { coordinateGetter: keyboardCoordinates }),\n  );\n  const grouped = useMemo(() => Object.fromEntries(BOARD_STATUSES.map((status) => [status, filtered.filter((issue) => issue.status === status)])) as Record<BoardStatus, BoardIssue[]>, [filtered]);\n  const visibleStatuses = BOARD_STATUSES.filter((status) => grouped[status].length > 0);\n  const hiddenStatuses = BOARD_STATUSES.filter((status) => grouped[status].length === 0);\n  const activeIssue = activeId ? issues.find((issue) => issue.id === activeId) ?? null : null;\n\n  useEffect(() => {\n    const media = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n    const update = () => setReduceMotion(media.matches);\n    update();\n    media.addEventListener(\"change\", update);\n    return () => media.removeEventListener(\"change\", update);\n  }, []);\n\n  const collisionDetection: CollisionDetection = (args) => {\n    if (!args.pointerCoordinates && keyboardTargetRef.current) {\n      const target = args.droppableContainers.find((container) => container.id === keyboardTargetRef.current);\n      if (target) return [{ id: target.id, data: { droppableContainer: target, value: 0 } }];\n    }\n    const pointerCollisions = pointerWithin(args);\n    if (pointerCollisions.length > 0) {\n      const issueCollision = pointerCollisions.find(({ id }) =>\n        args.droppableContainers.find((container) => container.id === id)?.data.current?.type === \"issue\"\n      );\n      if (issueCollision) return [issueCollision];\n\n      const laneCollision = pointerCollisions.find(({ id }) => {\n        const type = args.droppableContainers.find((container) => container.id === id)?.data.current?.type;\n        return type === \"column\" || type === \"hidden-column\";\n      });\n      const lane = laneCollision\n        ? args.droppableContainers.find((container) => container.id === laneCollision.id)\n        : null;\n      const targetStatus = lane?.data.current?.status as BoardStatus | undefined;\n      const laneIssues = targetStatus\n        ? args.droppableContainers.filter((container) =>\n            container.id !== args.active.id\n            && container.data.current?.type === \"issue\"\n            && container.data.current?.status === targetStatus\n          )\n        : [];\n      const laneIssueBottom = Math.max(\n        ...laneIssues.map((container) => args.droppableRects.get(container.id)?.bottom ?? Number.NEGATIVE_INFINITY),\n      );\n      if (args.pointerCoordinates && args.pointerCoordinates.y <= laneIssueBottom) {\n        const nearestIssue = closestCenter({ ...args, droppableContainers: laneIssues })[0];\n        if (nearestIssue) return [nearestIssue];\n      }\n\n      return pointerCollisions;\n    }\n    return closestCenter(args);\n  };\n\n  const clearDrag = (event?: DragCancelEvent) => {\n    keyboardTargetRef.current = null;\n    setActiveId(null);\n    setOverStatus(null);\n    if (event) setAnnouncement(\"Move cancelled.\");\n  };\n\n  const handleDragStart = ({ active }: DragStartEvent) => {\n    const issue = issues.find((candidate) => candidate.id === String(active.id));\n    setActiveId(String(active.id));\n    if (issue) setAnnouncement(`Picked up ${issue.id}. Current status: ${STATUS_META[issue.status].label}.`);\n  };\n\n  const handleDragOver = ({ over }: DragOverEvent) => {\n    setOverStatus(over ? resolveTargetStatus(String(over.id), issues) : null);\n  };\n\n  const handleDragEnd = ({ active, over }: DragEndEvent) => {\n    clearDrag();\n    if (!over) {\n      setAnnouncement(\"Move cancelled.\");\n      return;\n    }\n    const activeIssueId = String(active.id);\n    const overId = String(over.id);\n    const targetStatus = resolveTargetStatus(overId, issues);\n    const movingIssue = issues.find((issue) => issue.id === activeIssueId);\n    if (!targetStatus || !movingIssue) return;\n\n    const sourceStatus = movingIssue.status;\n    const allGrouped = Object.fromEntries(BOARD_STATUSES.map((status) => [status, orderedIssues.filter((issue) => issue.status === status)])) as Record<BoardStatus, BoardIssue[]>;\n    const targetLaneBeforeMove = allGrouped[targetStatus];\n    const nextByStatus = Object.fromEntries(BOARD_STATUSES.map((status) => [status, allGrouped[status].filter((issue) => issue.id !== activeIssueId)])) as Record<BoardStatus, BoardIssue[]>;\n    const targetLane = nextByStatus[targetStatus];\n    const overIndex = targetLaneBeforeMove.findIndex((issue) => issue.id === overId);\n    const insertAt = overIndex >= 0 ? Math.min(overIndex, targetLane.length) : targetLane.length;\n    targetLane.splice(insertAt, 0, { ...movingIssue, status: targetStatus });\n    const nextIssues = BOARD_STATUSES.flatMap((status) => nextByStatus[status]);\n\n    if (sourceStatus !== targetStatus || nextIssues.map((issue) => issue.id).join(\"|\") !== issues.map((issue) => issue.id).join(\"|\")) {\n      setSort(\"Manual\");\n      setIssues(nextIssues);\n      onIssuesChange?.(nextIssues);\n      setAnnouncement(`${movingIssue.id} moved to ${STATUS_META[targetStatus].label}.`);\n      requestAnimationFrame(() => requestAnimationFrame(() => {\n        const movedCard = Array.from(rootRef.current?.querySelectorAll<HTMLElement>(\"[data-issue-id]\") ?? [])\n          .find((card) => card.dataset.issueId === activeIssueId);\n        (movedCard ?? statusFilterRef.current)?.focus({ preventScroll: true });\n      }));\n    } else {\n      setAnnouncement(`${movingIssue.id} stayed in ${STATUS_META[targetStatus].label}.`);\n    }\n  };\n\n  return (\n    <section ref={rootRef} data-theme={theme} className={`mova-ai-theme rudder-board w-full min-w-0 min-h-[620px] bg-[var(--mova-ai-canvas,#202020)] text-[color:var(--mova-ai-ink,#eeeeee)] ${className}`} aria-label=\"Rudder issue board\">\n      <style>{AI_THEME_STYLES}{`\n        .rudder-board :is(button,input,select,summary):focus-visible { outline: 2px solid var(--mova-ai-accent,#c2c2c2); outline-offset: 2px; }\n        .rudder-board { container-type: inline-size; }\n        .rudder-board .motion-kanban-lane[data-status] { position: relative; overflow: hidden; }\n        .rudder-board .motion-kanban-lane[data-status]::after { content: \"\"; position: absolute; inset-inline: 7px; bottom: 0; height: 2px; border-radius: 999px; background: var(--lane-status); opacity: .82; pointer-events: none; }\n        .rudder-board .motion-kanban-lane[data-status][data-over=\"true\"]::after { opacity: 1; height: 3px; }\n        .rudder-list-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 40%); align-items: start; gap: 16px; }\n        .rudder-list-meta { justify-content: flex-end; padding-top: 2px; }\n        @container (max-width: 640px) {\n          .rudder-list-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }\n          .rudder-list-meta { justify-content: flex-start; padding-left: 26px; }\n        }\n        @media (prefers-reduced-motion: reduce) {\n          .motion-kanban-card,\n          .motion-kanban-lane {\n            animation: none !important;\n            transition: none !important;\n          }\n        }\n      `}</style>\n      <p className=\"sr-only\" aria-live=\"assertive\">{announcement}</p>\n      <div className=\"flex flex-wrap items-center gap-2 border-b border-[var(--mova-ai-border,#dedede)] px-4 py-3 text-xs text-[color:var(--mova-ai-ink-secondary,#666)]\">\n        <h2 className=\"mr-auto text-xs font-medium uppercase tracking-[0.16em] text-[color:var(--mova-ai-ink-secondary,#666)]\">Issues</h2>\n        <div className=\"flex flex-wrap items-center justify-end gap-1\">\n        <button type=\"button\" aria-label=\"Show working issues\" aria-pressed={statusFilter === \"in_progress\"} onClick={() => setStatusFilter((value) => value === \"in_progress\" ? \"all\" : \"in_progress\")} className={`mr-1 rounded-md border border-[var(--mova-ai-border,#dedede)] px-2.5 py-1.5 tabular-nums transition-colors hover:bg-[var(--mova-ai-hover,#f1f1f1)] ${statusFilter === \"in_progress\" ? \"bg-[var(--mova-ai-hover-strong,#e9e9e9)] text-[color:var(--mova-ai-ink,#202020)]\" : \"\"}`}>{issues.filter((issue) => issue.status === \"in_progress\").length} working</button>\n        <div className=\"mr-1 flex rounded-md border border-[var(--mova-ai-border,#dedede)] p-0.5\"><button type=\"button\" aria-label=\"List view\" aria-pressed={view === \"list\"} onClick={() => setView(\"list\")} className={`rounded p-1 transition-colors ${view === \"list\" ? \"bg-[var(--mova-ai-hover-strong,#e9e9e9)] text-[color:var(--mova-ai-ink,#202020)]\" : \"\"}`}><List className=\"h-3.5 w-3.5\" /></button><button type=\"button\" aria-label=\"Board view\" aria-pressed={view === \"board\"} onClick={() => setView(\"board\")} className={`rounded p-1 transition-colors ${view === \"board\" ? \"bg-[var(--mova-ai-hover-strong,#e9e9e9)] text-[color:var(--mova-ai-ink,#202020)]\" : \"\"}`}><Columns3 className=\"h-3.5 w-3.5\" /></button></div>\n        <ToolbarPopover label=\"Filter\" triggerRef={statusFilterRef} icon={<Filter className=\"h-3 w-3\" />}>\n          <div role=\"radiogroup\" aria-label=\"Issue status\">{[\"all\", ...BOARD_STATUSES].map((status) => <label key={status} className=\"flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 hover:bg-[var(--mova-ai-hover,#f1f1f1)]\"><input type=\"radio\" className=\"accent-[var(--mova-ai-accent,#454545)]\" name={`${sortGroupId}-status`} checked={statusFilter === status} onChange={() => setStatusFilter(status)} />{status === \"all\" ? \"All statuses\" : STATUS_META[status as BoardStatus].label}</label>)}</div>\n        </ToolbarPopover>\n        <ToolbarPopover label=\"Sort\" icon={<ArrowUpDown className=\"h-3 w-3\" />}>\n          <div role=\"radiogroup\" aria-label=\"Sort field\">{[\"Manual\", \"Status\", \"Priority\", \"Title\", \"Created\", \"Updated\"].map((value) => <label key={value} className={`flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 hover:bg-[var(--mova-ai-hover,#f1f1f1)] ${sort === value ? \"bg-[var(--mova-ai-hover,#f1f1f1)] text-[color:var(--mova-ai-ink,#202020)]\" : \"\"}`}><input className=\"accent-[var(--mova-ai-accent,#454545)]\" type=\"radio\" name={sortGroupId} checked={sort === value} onChange={() => setSort(value)} />{value}{sort === value ? <Check className=\"ml-auto h-3 w-3\" /> : null}</label>)}</div>\n          <button type=\"button\" disabled={sort === \"Manual\"} onClick={() => setDescending((value) => !value)} aria-label=\"Toggle sort direction\" className=\"flex w-full items-center gap-2 border-t border-[var(--mova-ai-border,#dedede)] px-2 py-2 text-left disabled:opacity-40\"><ArrowUpDown className=\"h-3 w-3\" />{descending ? \"Descending\" : \"Ascending\"}</button>\n        </ToolbarPopover>\n        <ToolbarPopover label=\"Display\" icon={<SlidersHorizontal className=\"h-3 w-3\" />}>{DISPLAY_FIELDS.map((field) => <label key={field} className=\"flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 hover:bg-[var(--mova-ai-hover,#f1f1f1)]\"><input className=\"accent-[var(--mova-ai-accent,#454545)]\" type=\"checkbox\" checked={display.includes(field)} onChange={() => setDisplay((fields) => fields.includes(field) ? fields.filter((value) => value !== field) : [...fields, field])} />{field}</label>)}</ToolbarPopover>\n        </div>\n      </div>\n      {creating ? <form onKeyDown={(event) => { if (event.key === \"Escape\") { event.preventDefault(); closeCreate(); } }} className=\"flex flex-wrap items-center gap-2 border-b border-[var(--mova-ai-border,#dedede)] bg-[var(--mova-ai-hover,#f1f1f1)] p-3\" onSubmit={(event) => { event.preventDefault(); if (!draft.trim()) return; let sequence = issues.length + 1; while (issues.some((issue) => issue.id === `ISS-${sequence}`)) sequence++; const next = [...issues, { id: `ISS-${sequence}`, title: draft.trim(), status: creating, priority: \"medium\" as const, assignee: \"Unassigned\", project: \"No project\", labels: [], created: new Date().toISOString().slice(0, 10) }]; setIssues(next); onIssuesChange?.(next); setStatusFilter(\"all\"); closeCreate(); setAnnouncement(\"Issue created.\"); }}><input ref={createInputRef} required aria-label=\"New issue title\" placeholder=\"Issue title\" value={draft} onChange={(event) => setDraft(event.target.value)} className=\"min-w-0 flex-1 rounded border border-[var(--mova-ai-border,#dedede)] bg-[var(--mova-ai-field,#f6f6f6)] px-2 py-1.5 text-sm\" /><select aria-label=\"New issue status\" value={creating} onChange={(event) => setCreating(event.target.value as BoardStatus)} className=\"rounded bg-[var(--mova-ai-canvas,#f4f4f4)] p-1 text-xs\">{BOARD_STATUSES.map((status) => <option key={status} value={status}>{STATUS_META[status].label}</option>)}</select><button type=\"submit\" className=\"rounded bg-[var(--mova-ai-accent,#454545)] px-3 py-1.5 text-xs text-[color:var(--mova-ai-accent-foreground,#fff)]\">Create</button><button type=\"button\" onClick={closeCreate} className=\"px-2 text-xs\">Cancel</button></form> : null}\n      <DisplayContext.Provider value={display}>\n      <AnimatePresence mode=\"wait\" initial={false}>\n      <motion.div key={view} initial={{ opacity: 0, y: reduceMotion ? 0 : 5 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: reduceMotion ? 0 : -3 }} transition={{ duration: reduceMotion ? 0 : 0.15, ease: [0.22, 1, 0.36, 1] }}>\n      {view === \"list\" ? <div className=\"max-h-[580px] overflow-y-auto\">{filtered.map((issue) => <IssueListRow key={issue.id} issue={issue} />)}{filtered.length === 0 ? <p className=\"py-10 text-center text-sm text-[color:var(--mova-ai-ink-secondary,#666)]\">No issues match this filter.</p> : null}<button ref={listCreateRef} type=\"button\" onClick={(event) => openCreate(statusFilter === \"all\" ? \"backlog\" : statusFilter as BoardStatus, event.currentTarget)} className=\"flex items-center gap-2 px-4 py-3 text-xs text-[color:var(--mova-ai-ink-secondary,#666)] transition-colors hover:text-[color:var(--mova-ai-ink,#202020)]\"><Plus className=\"h-3.5 w-3.5\" />Add issue</button></div> :\n      <DndContext\n        autoScroll={{ acceleration: 2, interval: 10, threshold: { x: 0.08, y: 0.2 } }}\n        collisionDetection={collisionDetection}\n        onDragCancel={clearDrag}\n        onDragEnd={handleDragEnd}\n        onDragOver={handleDragOver}\n        onDragStart={handleDragStart}\n        sensors={sensors}\n      >\n        <div className=\"overflow-x-auto overscroll-x-contain p-3 sm:p-4\">\n          <div className=\"flex min-h-[520px] min-w-max items-stretch gap-3\">\n            {visibleStatuses.map((status) => <Fragment key={status}><BoardColumn issues={grouped[status]} status={status} onCreate={openCreate} /></Fragment>)}\n            {hiddenStatuses.length > 0 ? (\n              <div className={`motion-kanban-lane flex min-h-0 w-[228px] min-w-[228px] shrink-0 flex-col rounded-[10px] border p-2 transition-colors motion-reduce:transition-none ${overStatus && hiddenStatuses.includes(overStatus) ? \"border-[var(--mova-ai-border-strong,#c8c8c8)] bg-[var(--mova-ai-hover,#f1f1f1)]\" : \"border-[var(--mova-ai-border,#dedede)] bg-[var(--mova-ai-canvas,#f4f4f4)]\"}`} data-testid=\"kanban-hidden-columns\">\n                <div className=\"mb-2 flex items-center gap-2 px-1\">\n                  <span className=\"text-xs font-semibold uppercase tracking-wide text-[color:var(--mova-ai-ink-muted,#858585)]\">Hidden columns</span>\n                  <span className=\"ml-auto text-xs tabular-nums text-[color:var(--mova-ai-ink-muted,#858585)]\">{hiddenStatuses.length}</span>\n                </div>\n                <div className=\"space-y-2\">{hiddenStatuses.map((status) => <Fragment key={status}><HiddenStatus status={status} onCreate={openCreate} /></Fragment>)}</div>\n              </div>\n            ) : null}\n          </div>\n        </div>\n        <DragOverlay dropAnimation={reduceMotion ? null : { duration: 180, easing: \"cubic-bezier(0.22, 1, 0.36, 1)\" }}>\n          {activeIssue ? <article className=\"w-[247px] rotate-[0.4deg] scale-[1.015] overflow-hidden rounded-[9px] border border-[var(--mova-ai-border-strong,#c8c8c8)] bg-[var(--mova-ai-surface,#fff)] p-2.5 shadow-[0_18px_48px_rgba(0,0,0,.48)]\"><IssueCardBody issue={activeIssue} /></article> : null}\n        </DragOverlay>\n      </DndContext>}\n      </motion.div>\n      </AnimatePresence>\n      </DisplayContext.Provider>\n    </section>\n  );\n}\n\nexport default RudderIssueBoard;\n"
 }

package/registry/sales-analytics-dual-bars.json

@@ -1,7 +1,7 @@
 {
   "id": "sales-analytics-dual-bars",
   "tier": "free",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "file": "sales-analytics-dual-bars.tsx",
   "registryFile": "sales-analytics-dual-bars.json",
   "exports": [

package/registry/sales-overview-radial-dashboard.json

@@ -1,7 +1,7 @@
 {
   "id": "sales-overview-radial-dashboard",
   "tier": "free",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "file": "sales-overview-radial-dashboard.tsx",
   "registryFile": "sales-overview-radial-dashboard.json",
   "exports": [

package/registry/sales-target-segmented-arc.json

@@ -1,7 +1,7 @@
 {
   "id": "sales-target-segmented-arc",
   "tier": "free",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "file": "sales-target-segmented-arc.tsx",
   "registryFile": "sales-target-segmented-arc.json",
   "exports": [

package/registry/scale-in-char.json

@@ -1,7 +1,7 @@
 {
   "id": "scale-in-char",
   "tier": "free",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "file": "scale-in-char.tsx",
   "registryFile": "scale-in-char.json",
   "exports": [

package/registry/scale-in-text.json

@@ -1,7 +1,7 @@
 {
   "id": "scale-in-text",
   "tier": "free",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "file": "scale-in-text.tsx",
   "registryFile": "scale-in-text.json",
   "exports": [

package/registry/scale-in-word.json

@@ -1,7 +1,7 @@
 {
   "id": "scale-in-word",
   "tier": "free",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "file": "scale-in-word.tsx",
   "registryFile": "scale-in-word.json",
   "exports": [

package/registry/scale-in.json

@@ -1,7 +1,7 @@
 {
   "id": "scale-in",
   "tier": "free",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "file": "scale-in.tsx",
   "sourcePath": "ui/entrance/scale-in.tsx",
   "registryFile": "scale-in.json",

package/registry/scramble-text.json

@@ -1,7 +1,7 @@
 {
   "id": "scramble-text",
   "tier": "free",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "file": "scramble-text.tsx",
   "registryFile": "scramble-text.json",
   "exports": [

package/registry/scroll-canvas-unroll.json

@@ -1,7 +1,7 @@
 {
   "id": "scroll-canvas-unroll",
   "tier": "free",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "file": "scroll-canvas-unroll.tsx",
   "sourcePath": "components/css-animations/whimsical/ConceptTrios2.tsx",
   "registryFile": "scroll-canvas-unroll.json",

package/registry/scroll-reveal.json

@@ -1,7 +1,7 @@
 {
   "id": "scroll-reveal",
   "tier": "free",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "file": "scroll-reveal.tsx",
   "sourcePath": "ui/scroll/scroll-reveal.tsx",
   "registryFile": "scroll-reveal.json",

package/registry/search-expand.json

@@ -1,7 +1,7 @@
 {
   "id": "search-expand",
   "tier": "free",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "file": "search-expand.tsx",
   "registryFile": "search-expand.json",
   "exports": [

package/registry/segmented-arc-meter.json

@@ -1,7 +1,7 @@
 {
   "id": "segmented-arc-meter",
   "tier": "free",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "file": "segmented-arc-meter.tsx",
   "sourcePath": "components/css-animations/yui-components/RedesignedUiTrios.tsx",
   "registryFile": "segmented-arc-meter.json",

package/registry/segmented-link-stretch.json

@@ -1,7 +1,7 @@
 {
   "id": "segmented-link-stretch",
   "tier": "free",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "file": "segmented-link-stretch.tsx",
   "sourcePath": "components/css-animations/whimsical/ConceptTrios3.tsx",
   "registryFile": "segmented-link-stretch.json",

package/registry/segmented-step-bar.json

@@ -1,7 +1,7 @@
 {
   "id": "segmented-step-bar",
   "tier": "free",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "file": "segmented-step-bar.tsx",
   "sourcePath": "components/css-animations/yui-components/UiKitTrios.tsx",
   "registryFile": "segmented-step-bar.json",

package/registry/segmented-stepper-dots.json

@@ -1,7 +1,7 @@
 {
   "id": "segmented-stepper-dots",
   "tier": "free",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "file": "segmented-stepper-dots.tsx",
   "sourcePath": "components/css-animations/yui-components/RedesignedUiTrios.tsx",
   "registryFile": "segmented-stepper-dots.json",

package/registry/select-dropdown.json

@@ -1,7 +1,7 @@
 {
   "id": "select-dropdown",
   "tier": "free",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "file": "select-dropdown.tsx",
   "registryFile": "select-dropdown.json",
   "exports": [

package/registry/server-performance-step-bars.json

@@ -1,7 +1,7 @@
 {
   "id": "server-performance-step-bars",
   "tier": "free",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "file": "server-performance-step-bars.tsx",
   "registryFile": "server-performance-step-bars.json",
   "exports": [

package/registry/shape-shift-grid.json

@@ -1,7 +1,7 @@
 {
   "id": "shape-shift-grid",
   "tier": "free",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "file": "shape-shift-grid.tsx",
   "sourcePath": "ui/loading/shape-shift-grid.tsx",
   "registryFile": "shape-shift-grid.json",

package/registry/shimmer-line.json

@@ -1,7 +1,7 @@
 {
   "id": "shimmer-line",
   "tier": "free",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "file": "shimmer-line.tsx",
   "sourcePath": "ui/loading/shimmer-line.tsx",
   "registryFile": "shimmer-line.json",

package/registry/shimmer-text.json

@@ -1,7 +1,7 @@
 {
   "id": "shimmer-text",
   "tier": "free",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "file": "shimmer-text.tsx",
   "registryFile": "shimmer-text.json",
   "exports": [

package/registry/shutter-slide.json

@@ -1,7 +1,7 @@
 {
   "id": "shutter-slide",
   "tier": "free",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "file": "shutter-slide.tsx",
   "sourcePath": "components/css-animations/whimsical/ConceptTrios1.tsx",
   "registryFile": "shutter-slide.json",

package/registry/shutter-step-slices.json

@@ -1,7 +1,7 @@
 {
   "id": "shutter-step-slices",
   "tier": "free",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "file": "shutter-step-slices.tsx",
   "sourcePath": "components/css-animations/whimsical/YuiPhysicsExperiments.tsx",
   "registryFile": "shutter-step-slices.json",

package/registry/siri-wave.json

@@ -1,7 +1,7 @@
 {
   "id": "siri-wave",
   "tier": "free",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "file": "siri-wave.tsx",
   "sourcePath": "ui/loading/siri-wave.tsx",
   "registryFile": "siri-wave.json",

package/registry/skeleton-loader.json

@@ -1,7 +1,7 @@
 {
   "id": "skeleton-loader",
   "tier": "free",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "file": "skeleton-loader.tsx",
   "sourcePath": "ui/loading/skeleton-loader.tsx",
   "registryFile": "skeleton-loader.json",

package/registry/skeleton.json

@@ -1,7 +1,7 @@
 {
   "id": "skeleton",
   "tier": "free",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "file": "skeleton.tsx",
   "sourcePath": "ui/loading/skeleton.tsx",
   "registryFile": "skeleton.json",

package/registry/skew-x-char.json

@@ -1,7 +1,7 @@
 {
   "id": "skew-x-char",
   "tier": "free",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "file": "skew-x-char.tsx",
   "registryFile": "skew-x-char.json",
   "exports": [

package/registry/slide-down-char.json

@@ -1,7 +1,7 @@
 {
   "id": "slide-down-char",
   "tier": "free",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "file": "slide-down-char.tsx",
   "registryFile": "slide-down-char.json",
   "exports": [

package/registry/slide-down-word.json

@@ -1,7 +1,7 @@
 {
   "id": "slide-down-word",
   "tier": "free",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "file": "slide-down-word.tsx",
   "registryFile": "slide-down-word.json",
   "exports": [

package/registry/slide-left-char.json

@@ -1,7 +1,7 @@
 {
   "id": "slide-left-char",
   "tier": "free",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "file": "slide-left-char.tsx",
   "registryFile": "slide-left-char.json",
   "exports": [

package/registry/slide-left.json

@@ -1,7 +1,7 @@
 {
   "id": "slide-left",
   "tier": "free",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "file": "slide-left.tsx",
   "sourcePath": "ui/entrance/slide-left.tsx",
   "registryFile": "slide-left.json",

package/registry/slide-right-char.json

@@ -1,7 +1,7 @@
 {
   "id": "slide-right-char",
   "tier": "free",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "file": "slide-right-char.tsx",
   "registryFile": "slide-right-char.json",
   "exports": [

package/registry/slide-right.json

@@ -1,7 +1,7 @@
 {
   "id": "slide-right",
   "tier": "free",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "file": "slide-right.tsx",
   "sourcePath": "ui/entrance/slide-right.tsx",
   "registryFile": "slide-right.json",

package/registry/slide-up-char.json

@@ -1,7 +1,7 @@
 {
   "id": "slide-up-char",
   "tier": "free",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "file": "slide-up-char.tsx",
   "registryFile": "slide-up-char.json",
   "exports": [